/* UnCutV Team-Wiki – Website-Look: Big Shoulders Display, DM Sans, JetBrains Mono, Pink -> Orange */
:root {
  --bg: #07050a; --panel: #110b13; --panel2: #1a1119; --line: rgba(255, 236, 244, .10); --line2: rgba(255, 236, 244, .18);
  --text: #fbf2f5; --muted: #b9a8b1; --pink: #ff1685; --orange: #ff7338; --sun: #ffc36b; --red: #ff4d5e; --green: #3ddc84;
  --grad: linear-gradient(90deg, #ff1685, #ff7338);
  --display: 'Big Shoulders Display', Impact, sans-serif; --sans: 'DM Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 10% -10%, rgba(255, 22, 133, .14), transparent 70%), radial-gradient(900px 600px at 100% 110%, rgba(255, 115, 56, .12), transparent 70%); }
a { color: var(--sun); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, .mono { font-family: var(--mono); }
h1, h2, h3, h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
h1 { font-size: clamp(34px, 5vw, 52px); margin: .1em 0 .4em; font-weight: 800; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Kopfzeile */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px; height: 64px;
  background: rgba(7, 5, 10, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: 48px; height: 48px; }
.brand span { font: 700 22px/1 var(--display); text-transform: uppercase; }
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search { flex: 1; max-width: 460px; margin-left: auto; }
.search input { width: 100%; }
.me { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mename { font-weight: 600; }
.menubtn { display: none; cursor: pointer; font-size: 24px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line2); }

/* Grundgeruest */
.wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; gap: 32px; max-width: 1440px; margin: 0 auto; padding: 24px 20px 80px; }
.wrap.wide { grid-template-columns: 260px minmax(0, 1fr); }
.side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
.navgroup { margin-bottom: 18px; }
.navhead { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin: 0 0 8px 10px; }
.side a, .toc a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: 15px; }
.side a:hover, .toc a:hover { background: var(--panel2); color: var(--text); text-decoration: none; }
.side a.on { background: linear-gradient(90deg, rgba(255, 22, 133, .22), rgba(255, 115, 56, .10)); color: var(--text); box-shadow: inset 3px 0 0 var(--pink); }
.lock::before { content: "🔒"; font-style: normal; font-size: 11px; opacity: .7; }
.toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
.toc a { font-size: 13px; padding: 4px 10px; }
.toc a.l3 { padding-left: 22px; }
.content { min-width: 0; }

/* Elemente */
.crumbs { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-top: 6px; }
.titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.actions form { margin: 0; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); font: 600 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: none; vertical-align: middle; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.r-supporter { --c: #5ab4ff; } .r-mod { --c: #3ddc84; } .r-admin { --c: #ff7338; } .r-developer { --c: #b388ff; } .r-owner { --c: #ff1685; } .r-none { --c: #8a7a82; }
.meta { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.alert { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); margin: 12px 0; }
.alert.err { border-color: rgba(255, 77, 94, .6); background: rgba(255, 77, 94, .1); }
.alert.ok { border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .08); }
.card { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }

/* Formulare */
input, select, textarea { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 9px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255, 22, 133, .55); outline-offset: 1px; border-color: transparent; }
textarea { width: 100%; font: 14px/1.55 var(--mono); resize: vertical; min-height: 420px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
button, .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 14px/1 var(--sans); padding: 11px 18px; border-radius: 999px; border: 0; color: #fff; background: var(--grad); text-decoration: none; }
button:hover, .btn:hover { filter: brightness(1.1); text-decoration: none; }
.ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.red { background: rgba(255, 77, 94, .16); border: 1px solid rgba(255, 77, 94, .6); color: #ffd0d5; }
button.small { padding: 7px 12px; font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.grid3, .grid4 { display: grid; gap: 12px; }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: 2fr repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 2px 6px 2px 0; }
form.inline select { padding: 6px 10px; font-size: 13px; }
.tabs { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.tab { background: transparent; border: 1px solid var(--line2); color: var(--muted); padding: 7px 14px; }
.tab.on { color: var(--text); border-color: var(--pink); }
.tabs .small { margin-left: auto; }
.preview { min-height: 420px; padding: 18px 22px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); }
form.danger { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Suche */
.hit { display: block; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 10px; color: var(--text); }
.hit:hover { border-color: var(--pink); text-decoration: none; }
.hit b { display: block; font: 700 20px/1.2 var(--display); text-transform: uppercase; }
.hit span { color: var(--muted); font-size: 14px; }

/* Tabellen */
.tablewrap { overflow-x: auto; margin: 14px 0 20px; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel2); padding: 10px 14px; }
td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
tbody tr:hover td { background: rgba(255, 255, 255, .02); }

/* Artikel (Markdown) */
.md { max-width: 860px; }
.md h2 { font-size: 30px; margin: 1.6em 0 .5em; padding-top: .3em; }
.md h3 { font-size: 22px; margin: 1.4em 0 .4em; color: var(--sun); }
.md h4 { font-size: 18px; margin: 1.2em 0 .3em; }
.md h2:first-child { margin-top: .3em; }
.md h2, .md h3 { position: relative; }
.md .anchor { position: absolute; left: -.9em; opacity: 0; color: var(--pink); font-size: .8em; }
.md thead:has(th:empty:first-child) { display: none; }
.md h2:hover .anchor, .md h3:hover .anchor { opacity: 1; text-decoration: none; }
.md p, .md ul, .md ol { margin: 0 0 1em; }
.md li { margin: .25em 0; }
.md li > input[type=checkbox] { accent-color: var(--pink); margin-right: 6px; transform: translateY(1px); }
.md ul:has(> li > input[type=checkbox]) { list-style: none; padding-left: 4px; }
.md code { font-size: .88em; color: #ffb3d6; background: rgba(255, 22, 133, .10); border: 1px solid rgba(255, 22, 133, .22); padding: 1px 6px; border-radius: 6px; }
.md pre { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; color: var(--text); }
kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 1px 7px; border-radius: 6px; background: #1c1118; color: var(--sun); border: 1px solid rgba(255, 195, 107, .35); border-bottom-width: 3px; font-size: .85em; line-height: 1.5; }
.md .note { margin: 1.2em 0; padding: 12px 16px; border-left: 4px solid var(--orange); background: rgba(255, 115, 56, .08); border-radius: 0 12px 12px 0; }
.md .note p:last-child { margin-bottom: 0; }
.md hr { border: 0; border-top: 1px solid var(--line2); margin: 2em 0; }
.md img { max-width: 100%; border-radius: 12px; }
.md blockquote { margin: 0; }

/* Login */
.loginbody { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login { width: 100%; max-width: 420px; padding: 32px 28px; border-radius: 24px; border: 1px solid var(--line2); background: rgba(17, 11, 19, .92); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.loginlogo { width: 170px; display: block; margin: -6px auto 6px; filter: drop-shadow(0 10px 30px rgba(255, 22, 133, .35)); }
.kicker { font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); text-align: center; }
.login h1 { text-align: center; font-size: 48px; margin: 8px 0 10px; }
.login h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login p { text-align: center; }
.login button { justify-content: center; margin-top: 4px; padding: 13px; }

/* Handy */
@media (max-width: 1100px) {
  .wrap { grid-template-columns: 240px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 800px) {
  .top { gap: 10px; padding: 10px 16px; }
  .menubtn { display: block; }
  .brand span, .mename, .me .chip { display: none; }
  .search { max-width: none; }
  .wrap, .wrap.wide { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 60px; }
  .side { display: none; position: static; max-height: none; }
  #navtoggle:checked + .wrap .side { display: block; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .grid3, .grid4 { grid-template-columns: 1fr; }
  .me .ghost { padding: 8px 12px; }
}

/* Login mit txAdmin (Cfx.re) */
.btn.cfx { width: 100%; justify-content: center; padding: 15px; font-size: 16px; margin-top: 6px; box-shadow: 0 12px 30px rgba(255, 22, 133, .28); }
.center { text-align: center; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }

/* Aufklappbare Kategorien in der Seitenleiste */
.side details.navgroup { margin-bottom: 10px; }
.side details.navgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 7px 10px; border-radius: 10px; user-select: none; }
.side details.navgroup > summary::-webkit-details-marker { display: none; }
.side details.navgroup > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.side details.navgroup[open] > summary::before { transform: rotate(90deg); }
.side details.navgroup > summary:hover { background: var(--panel2); }
.side .count { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); font: 600 10px/1 var(--mono); letter-spacing: 0; }
.side .tools { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
input.num { width: 90px; }
form.inline input { padding: 6px 10px; font-size: 14px; }