/* NO:ACCESS Website · v0.1.0
   Design: noaccess · Frost Sapphire (claude/15-noaccess-design-vorlage.md)
   Layout: Terminal-Raster auf Nachtblau, Glasflächen nach Textmenge, eine Eis-Signalstelle pro Fläche. */

/* ---------- Token-Block (unverändert aus der Vorlage) ---------- */
:root {
  --bg: #060b18;   --surface: #0a1224;  --surface2: #0f1a33;
  --border: #1a2a4c;  --text: #eef2ff;  --muted: #8a9ac4;
  --grad: linear-gradient(90deg, #0f3460, #1e5aa8, #7fb0ff);
  --hx1: #0f3460;  --hx2: #1e5aa8;  --hx3: #7fb0ff;
  --acc: #0f3460;  --acc2: #eef2ff;  --acc3: #7fb0ff;  --danger: #b04a5a;
  --panel1: #101c38;  --panel2: #0a1225;  --caps: #0e172d;  --bord2: #213561;
  --glass-hud: rgba(16,28,56,.5);   --glass-win: rgba(10,18,37,.74);  --glass-deep: rgba(6,11,24,.88);
  --glass-acc: rgba(15,52,96,.5);   --glass-ice: rgba(127,176,255,.1);
  --glass-line: rgba(238,242,255,.1);  --glass-hi: rgba(238,242,255,.07);
  --frozen: #a0bddb;  --citrus: #e4fd97;  --ink: #0a1224;
  --glass-frozen: rgba(160,189,219,.78);  --glass-citrus: rgba(228,253,151,.78);

  /* Website-Ergänzungen */
  --danger-text: #e08a98;
  --cta-line: #2f6bb8;
  --f-display: "Chakra Petch", "Inter", "Segoe UI", sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

@font-face { font-family:"Chakra Petch"; font-weight:500; src:url("../fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"Chakra Petch"; font-weight:600; src:url("../fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"Chakra Petch"; font-weight:700; src:url("../fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"Inter"; font-weight:400; src:url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"Inter"; font-weight:600; src:url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"Inter"; font-weight:700; src:url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"JetBrains Mono"; font-weight:400; src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-display:swap }
@font-face { font-family:"JetBrains Mono"; font-weight:500; src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-display:swap }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--f-body); font-size: 15px; line-height: 1.65; color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 70% 50% at 70% -10%, rgba(15,52,96,.55), rgba(6,11,24,0) 70%);
  background-size: 100% 900px;
  background-repeat: no-repeat;
}
main { flex: 1 0 auto }
img { max-width: 100%; height: auto; display: block }
a { color: var(--text); text-decoration-color: rgba(127,176,255,.5); text-underline-offset: 3px }
a:hover { color: var(--acc3) }
:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px }
::selection { background: var(--acc); color: var(--acc2) }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter) }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

h1, h2, h3, .eyebrow, .btn, .tab, .nav a { font-family: var(--f-display); text-transform: uppercase }
h1 { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; letter-spacing: .06em; font-weight: 700; margin: 0; text-wrap: balance }
h2, h1.as-h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: .14em; font-weight: 700; margin: 0; text-wrap: balance }
h3 { font-size: 15px; letter-spacing: .14em; font-weight: 700; margin: 0; line-height: 1.3 }
p { margin: 0 }
.lead { font-size: 17px; color: var(--muted); max-width: 62ch }
.muted { color: var(--muted) }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .3em; color: var(--muted); display: flex; align-items: center; gap: 10px }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--acc3) }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.ice { color: var(--acc3) }
.cash { color: var(--citrus); font-family: var(--f-mono) }
.prose { max-width: 68ch; display: grid; gap: 14px; color: var(--muted) }
.prose strong { color: var(--text); font-weight: 600 }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px }

/* ---------- Glas ---------- */
.glass { border:1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); border-radius: 6px; position: relative }
.glass::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--grad); border-radius: 6px 6px 0 0;
  -webkit-mask: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); pointer-events: none }
.glass-hud  { background: linear-gradient(200deg, var(--glass-hud), rgba(6,11,24,.62)) }
.glass-win  { background: linear-gradient(200deg, rgba(16,28,56,.66), var(--glass-win)) }
.glass-deep { background: linear-gradient(200deg, rgba(10,18,37,.82), var(--glass-deep)) }
.glass-acc  { background: linear-gradient(200deg, var(--glass-acc), rgba(10,18,36,.78)); border-color: var(--cta-line) }
.glass-ice  { background: linear-gradient(200deg, var(--glass-ice), rgba(10,18,36,.7)); border-color: rgba(127,176,255,.35) }
.glass-frozen { background: linear-gradient(200deg, rgba(160,189,219,.86), var(--glass-frozen) 60%, rgba(160,189,219,.66)); color: var(--ink); border-color: rgba(238,242,255,.45) }
.glass-citrus { background: linear-gradient(200deg, rgba(228,253,151,.88), var(--glass-citrus) 60%, rgba(228,253,151,.68)); color: var(--ink); border-color: rgba(238,242,255,.45) }
.pad { padding: clamp(18px, 2.4vw, 28px) }

/* ---------- Text-Wortmarke ---------- */
.mark { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1; white-space: nowrap; color: var(--text) }
.mark .colon { display:inline-block; position:relative; width:.3em; height:.7em; margin:0 .06em; vertical-align:baseline; animation: pulse 4.8s ease-in-out infinite }
.mark .colon::before, .mark .colon::after { content:""; position:absolute; left:50%; width:.14em; height:.14em; margin-left:-.07em; border-radius:2px; background:var(--acc3); box-shadow:0 0 10px rgba(127,176,255,.75),0 0 24px rgba(127,176,255,.35) }
.mark .colon::before { top:.08em } .mark .colon::after { bottom:.08em }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.55 } }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding: 0 18px; border-radius:2px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid var(--border); color: var(--muted); transition: border-color .15s, color .15s, box-shadow .15s, transform .15s }
.btn:hover { border-color: var(--acc3); color: var(--text) }
.btn-primary { border-radius: 999px; padding: 0 22px; color: var(--acc2); border-color: var(--cta-line); background: linear-gradient(200deg, rgba(15,52,96,.85), rgba(10,18,36,.95)) }
.btn-primary:hover { color: var(--acc2); border-color: var(--cta-line); box-shadow: 0 0 14px rgba(127,176,255,.35); transform: scale(1.03) }
.btn-signal { border-color: var(--acc3); color: var(--acc3) }
.btn-signal:hover { color: var(--acc3); box-shadow: 0 0 14px rgba(127,176,255,.45) }
.btn-danger { border-color: #5a2a35; color: var(--danger-text) }
.btn-danger:hover { border-color: var(--danger); color: var(--danger-text) }
.btn-lg { min-height: 48px; font-size: 12.5px; padding: 0 26px }
.btn[disabled] { opacity: .4; pointer-events: none }
.btn svg { width: 16px; height: 16px; flex: none }
.kbd { font-family: var(--f-mono); font-size: 11px; padding: 1px 7px; border: 1px solid var(--bord2); border-bottom-width: 2px; background: var(--surface2); border-radius: 3px; color: var(--text) }

/* ---------- Chips ---------- */
.chip { display:inline-flex; align-items:center; gap:7px; font-family: var(--f-display); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--bord2); color: var(--text); white-space: nowrap; line-height: 1.5 }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor }
.chip-ok { color: var(--text); border-color: var(--bord2) }
.chip-info { color: var(--frozen); border-color: rgba(160,189,219,.35) }
.chip-paid { color: var(--citrus); border-color: rgba(228,253,151,.35) }
.chip-neutral { color: var(--muted); border-color: var(--border) }
.chip-warn { color: var(--danger-text); border-color: #5a2a35 }
.chip-hot { color: var(--acc3); border-color: rgba(127,176,255,.5); box-shadow: 0 0 10px rgba(127,176,255,.25) }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: linear-gradient(180deg, rgba(6,11,24,.94), rgba(6,11,24,.86)); border-bottom: 1px solid var(--glass-line) }
.site-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background: var(--grad); opacity:.55;
  -webkit-mask: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); mask: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent) }
.hdr { display:flex; align-items:center; gap: 20px; min-height: 66px }
.hdr-brand { display:flex; align-items:center; gap: 12px; text-decoration:none; flex: none }
.hdr-brand .wm { width: 160px; height: auto; display: block }
.nav { display:flex; align-items:center; gap: 2px; margin-left: 4px; flex-wrap: nowrap }
.nav a { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; white-space: nowrap; color: var(--muted); text-decoration: none; padding: 8px 10px; border: 1px solid transparent; border-radius: 4px }
.nav a:hover { color: var(--text); border-color: var(--acc3) }
.nav a[aria-current="page"] { background: var(--acc); border-color: var(--cta-line); color: var(--acc2) }
.hdr-actions { margin-left: auto; display:flex; align-items:center; gap: 10px }
.hdr-actions .btn { min-height: 36px }
.menu-btn { display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--text); cursor:pointer; align-items:center; justify-content:center }
.menu-btn:hover { border-color: var(--acc3) }
.menu-btn svg { width:20px; height:20px }
.user-pill { display:flex; align-items:center; gap:10px; padding: 4px 6px 4px 4px; border:1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight:600 }
.user-pill .avatar { width:28px; height:28px; border-radius:50%; background: var(--acc); border:1px solid var(--cta-line); display:grid; place-items:center; font-family: var(--f-display); font-size:12px }

.hdr-menu { display: contents }

/* Mobil: Menue als Overlay-Dropdown unter dem Kopf, die Seite bleibt stehen */
@media (max-width: 1200px) {
  .menu-btn { display:inline-flex }
  .hdr-menu { display:none }
  .site-header.open .hdr-menu { display:block; position:absolute; top:100%; left:0; right:0; max-height: calc(100vh - 66px); overflow-y:auto;
    padding: 12px var(--gutter) 18px; background: var(--bg); border-bottom: 1px solid var(--glass-line); box-shadow: 0 24px 60px rgba(0,0,0,.55) }
  .site-header.open .nav { display:flex; flex-direction: column; align-items: stretch; margin: 0 }
  .site-header.open .nav a { padding: 12px }
  .site-header.open .hdr-actions { display:flex; margin: 10px 0 0 }
  .site-header.open .hdr-actions .btn { flex: 1 }
}

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(48px, 7vw, 88px) }
.section-tight { padding-block: clamp(32px, 4vw, 52px) }
.section-head { display:grid; gap: 14px; margin-bottom: 32px; max-width: 760px }
.page-hero { padding-block: clamp(28px, 3.5vw, 48px) 0 }
/* Inhalt direkt unter dem Seitentitel, ohne Trennlinie */
.page-hero + .section, .page-hero + .section-tight { padding-top: clamp(24px, 3vw, 36px) }
.page-hero .wrap { display:grid; gap: 16px }
.page-hero h1, .page-title { font-size: clamp(32px, 4.6vw, 52px) }
.crumbs { font-family: var(--f-mono); font-size: 12px; color: var(--muted) }
.crumbs a { color: var(--muted); text-decoration: none }
.crumbs a:hover { color: var(--acc3) }
.grid { display:grid; gap: 16px }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)) }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)) }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0,1fr) } }
.card { padding: 22px; display:grid; gap: 10px; align-content: start; min-width: 0 }
.card p { color: var(--muted); font-size: 14px }
.card .meta { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em }
a.card { text-decoration: none; transition: border-color .15s }
a.card:hover { border-color: var(--acc3); color: var(--text) }
.ico { width: 34px; height: 34px; border-radius: 5px; border: 1px solid var(--bord2); background: var(--surface2); display:grid; place-items:center; color: var(--frozen) }
.ico svg { width: 18px; height: 18px }

/* ---------- Startseite ---------- */
.hero { padding-block: clamp(28px, 3.5vw, 48px) clamp(40px, 6vw, 72px); position: relative; overflow: hidden }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center }
.hero-copy { display:grid; gap: 22px; min-width: 0; position: relative; z-index: 2 }
/* Charakterbild: Fuss auf der Oberkante der Stats-Box, hinter dem Hero-Text */
.stats-stage { position: relative }
.stats-stage .stats { position: relative; z-index: 2 }
.hero-char { position: absolute; z-index: 0; bottom: 100%; right: var(--gutter); height: clamp(400px, 50vw, 720px); width: auto; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 60px rgba(30,90,168,.35)) }
@media (max-width: 860px) { .hero-char { right: 0; height: 440px; opacity: .28 } }
/* Unterseiten: Charakterbild links, Fuss auf der Oberkante der folgenden Panels, hinter dem Inhalt davor */
.char-front > * { position: relative; z-index: 2 }
.char-stage { position: relative }
.char-stage > :not(.char-img) { position: relative; z-index: 2 }
.char-img { position: absolute; z-index: 0; bottom: 100%; left: var(--gutter); height: clamp(380px, 40vw, 560px); width: auto; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 60px rgba(30,90,168,.35)) }
@media (max-width: 860px) { .char-img { display: none } }
.hero h1 .thin { color: var(--muted); display:block }
.hero-actions { display:flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
.hero-visual { display:grid; gap: 14px; min-width: 0 }
.hero-badge { border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 30px 80px rgba(0,0,0,.45); aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center }
.hero-badge img { width: 100%; height: 100% }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0,1fr) } .hero-visual { order: -1 } .hero-badge { max-width: 300px } }

.terminal { font-family: var(--f-mono); font-size: 13px; line-height: 1.8; padding: 18px 20px; overflow-x: auto }
.terminal .ln { display:flex; gap: 12px; white-space: nowrap }
.terminal .ln span:first-child { color: var(--muted) }
.terminal .ok { color: var(--frozen) }
.terminal .bad { color: var(--danger-text) }
.terminal .good { color: var(--citrus) }
.terminal .cur { display:inline-block; width: 8px; height: 15px; background: var(--acc3); vertical-align: -2px; animation: blink 1.1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
.term-bar { display:flex; justify-content: space-between; gap: 10px; font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .26em; color: var(--muted); text-transform: uppercase; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border) }

.stats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--border); border-radius: 6px; overflow: hidden }
.stat { padding: 18px 20px; display:grid; gap: 4px; background: var(--caps); min-width: 0 }
.stat + .stat { border-left: 1px solid var(--border) }
.stat .lbl { font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted) }
.stat .val { font-family: var(--f-mono); font-size: 17px; color: var(--text) }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)) } .stat:nth-child(3) { border-left: 0 } .stat:nth-child(n+3) { border-top: 1px solid var(--border) } }

.split { display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.split.wide-left { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr) }
.split { gap: clamp(24px, 5vw, 64px); align-items: start }
@media (max-width: 860px) { .split, .split.wide-left { grid-template-columns: minmax(0,1fr) } }

.roadmap { display:grid; gap: 0; position: relative }
.rm-item { display:grid; grid-template-columns: 120px minmax(0,1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--border) }
.rm-item:last-child { border-bottom: 1px solid var(--border) }
.rm-when { font-family: var(--f-mono); font-size: 12px; color: var(--muted); padding-top: 2px }
.rm-body { display:grid; gap: 6px }
.rm-body p { color: var(--muted); font-size: 14px }
.rm-title { display:flex; flex-wrap: wrap; gap: 10px; align-items: center }
@media (max-width: 520px) { .rm-item { grid-template-columns: minmax(0,1fr); gap: 6px } }

.cta-band { padding: clamp(24px, 4vw, 40px); display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px }
.cta-band .t { display:grid; gap: 8px; max-width: 60ch }

/* ---------- Team ---------- */
.member { padding: 22px; display:grid; gap: 14px; align-content: start; min-width: 0 }
.member-top { display:flex; gap: 14px; align-items: center }
.portrait { width: 64px; height: 64px; flex: none; border-radius: 6px; border: 1px solid var(--bord2); background: linear-gradient(160deg, var(--surface2), var(--bg)); display:grid; place-items:center; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: .06em; color: var(--frozen); position: relative; overflow: hidden }
.portrait::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, rgba(127,176,255,.05) 0 1px, transparent 1px 4px) }
.member .name { font-weight: 700; font-size: 17px }
.member .role { font-family: var(--f-display); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted) }
.member p { color: var(--muted); font-size: 14px }
.member .tags { display:flex; flex-wrap: wrap; gap: 6px }
.member.open { border-style: dashed; border-color: var(--border); background: transparent; box-shadow: none }
.member.open::before { display: none }
.member.open .portrait { color: var(--muted) }

/* ---------- Regelwerk / Dokumente ---------- */
.doc-layout { display:grid; grid-template-columns: 250px minmax(0,1fr); gap: clamp(24px, 4vw, 52px); align-items: start }
@media (max-width: 900px) { .doc-layout { grid-template-columns: minmax(0,1fr) } .toc { position: static !important } }
.toc { position: sticky; top: 90px; padding: 16px; display:grid; gap: 2px }
.toc .eyebrow { margin-bottom: 8px }
.toc a { display:flex; gap: 10px; font-size: 13px; color: var(--muted); text-decoration: none; padding: 7px 10px; border-radius: 5px; border: 1px solid transparent }
.toc a .n { font-family: var(--f-mono); font-size: 11px; color: var(--muted); min-width: 22px; padding-top: 2px }
.toc a:hover { color: var(--text); border-color: var(--acc3) }
.toc a.active { background: var(--acc); border-color: var(--cta-line); color: var(--acc2) }
.rule-sec { padding-block: 8px 34px; display:grid; gap: 16px; scroll-margin-top: 90px }
.rule-sec + .rule-sec { border-top: 1px solid var(--border); padding-top: 32px }
.rule-sec h2 { font-size: 20px; display:flex; gap: 14px; align-items: baseline }
.rule-sec h2 .n { font-family: var(--f-mono); font-size: 14px; color: var(--acc3); letter-spacing: 0 }
.rules { list-style: none; margin: 0; padding: 0; display:grid; gap: 10px }
.rules li { display:grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 5px; background: rgba(10,18,36,.55) }
.rules li .p { font-family: var(--f-mono); font-size: 12px; color: var(--muted); padding-top: 2px }
.rules li .t { color: var(--muted); font-size: 14.5px }
.rules li .t strong { color: var(--text); font-weight: 600 }
.note { padding: 14px 16px; border-radius: 5px; font-size: 14px; display:flex; gap: 12px; align-items: flex-start }
.note svg { width: 18px; height: 18px; flex: none; margin-top: 2px }
.note.info { border: 1px solid rgba(160,189,219,.3); color: var(--frozen); background: rgba(160,189,219,.06) }
.note.warn { border: 1px solid #5a2a35; color: var(--danger-text); background: rgba(176,74,90,.07) }
.doc-meta { display:flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--f-mono); font-size: 12px; color: var(--muted) }

.sanctions { width: 100%; border-collapse: collapse; font-size: 14px }
.sanctions th, .sanctions td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top }
.sanctions th { font-family: var(--f-display); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.sanctions td { color: var(--muted) }
.sanctions td:first-child { color: var(--text); font-weight: 600 }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px }

/* ---------- Whitelist ---------- */
.steps { display:grid; gap: 0; counter-reset: st }
/* Titelpanel links: Ueberschrift + Text, darunter die Freischaltungs-Zeilen */
.wl-panel { padding: 24px; background: linear-gradient(200deg, rgba(16,28,56,.8), rgba(6,11,24,.88)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.wl-intro { display:grid; gap: 14px; font-family: var(--f-body); font-size: 15px; line-height: 1.65 }
.wl-intro .lead { font-size: 16px }
/* Schritte sind <details>: Kopfzeile (Nummer + Titel) klappt den Text ein und aus */
.step { display:block; padding: 20px 0; border-top: 1px solid var(--border) }
.step:last-child { border-bottom: 1px solid var(--border) }
.step:first-child { border-top: 0; padding-top: 0 }
.step summary { display:grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 18px; align-items: center; cursor: pointer; list-style: none }
.step summary::-webkit-details-marker { display: none }
.step summary:hover h3 { color: var(--acc3) }
.step summary:focus-visible { outline: 2px solid var(--acc2); outline-offset: 4px; border-radius: 4px }
.step summary .plus { width: 22px; height: 22px; border: 1px solid var(--bord2); border-radius: 3px; display:grid; place-items:center; font-family: var(--f-mono); font-size: 14px; color: var(--muted); transition: transform .28s cubic-bezier(.2,.7,.2,1) }
.step.is-open summary .plus { transform: rotate(45deg) }
.step > .b { padding: 8px 40px 0 74px }
@media (max-width: 520px) { .step > .b { padding: 8px 0 0 } }
.step .no { width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--bord2); background: var(--surface2); display:grid; place-items:center; font-family: var(--f-mono); font-size: 14px; color: var(--text) }
.step.now .no { background: var(--acc); border-color: var(--cta-line); color: var(--acc2) }
.step .b { display:grid; gap: 6px; min-width: 0 }
.step .b p { color: var(--muted); font-size: 14.5px }
.checklist { list-style: none; margin: 0; padding: 0; display:grid; gap: 10px }
.checklist li { display:grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; color: var(--muted); font-size: 14.5px }
.checklist li svg { width: 18px; height: 18px; color: var(--frozen); margin-top: 3px }
.checklist li strong { color: var(--text); font-weight: 600 }

/* ---------- Formulare ---------- */
.form { display:grid; gap: 16px }
.field { display:grid; gap: 7px; min-width: 0 }
.field label, .field .lbl { font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted) }
.field .hint { font-size: 12.5px; color: var(--muted) }
.input, .select, .textarea { width: 100%; font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; min-height: 42px; transition: border-color .15s, box-shadow .15s }
.textarea { min-height: 120px; resize: vertical; line-height: 1.55 }
.input::placeholder, .textarea::placeholder { color: #5c6a91 }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--acc3); box-shadow: 0 0 0 3px rgba(127,176,255,.18) }
.input.err { border-color: var(--danger) }
.err-msg { font-size: 12.5px; color: var(--danger-text) }
.row2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }
@media (max-width: 560px) { .row2 { grid-template-columns: minmax(0,1fr) } }
.check { display:grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--muted); cursor: pointer }
.check input { appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid var(--bord2); border-radius: 3px; background: var(--surface2); display:grid; place-items:center; cursor: pointer }
.check input:checked { background: var(--acc); border-color: var(--cta-line) }
.check input:checked::after { content:""; width: 8px; height: 4px; border-left: 2px solid var(--acc2); border-bottom: 2px solid var(--acc2); transform: rotate(-45deg) translate(1px,-1px) }
.counter { font-family: var(--f-mono); font-size: 11px; color: var(--muted); justify-self: end }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap: 6px; flex-wrap: wrap }
.tab { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; padding: 9px 14px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer }
.tab:hover { border-color: var(--acc3); color: var(--text) }
.tab[aria-selected="true"] { background: var(--acc); border-color: var(--cta-line); color: var(--acc2) }

/* ---------- Modal (Login / Registrierung) ---------- */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(3,6,14,.72); display:grid; place-items: center; padding: 16px; overflow-y: auto }
.modal { width: 100%; max-width: 440px; padding: 28px; display:grid; gap: 20px }
.modal-head { display:flex; align-items: center; justify-content: space-between; gap: 12px }
.modal-head .mark { font-size: 20px }
.x-btn { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; display:grid; place-items:center }
.x-btn:hover { border-color: var(--acc3); color: var(--text) }
.x-btn svg { width: 16px; height: 16px }
.or { display:flex; align-items:center; gap: 12px; font-family: var(--f-display); font-size: 10.5px; letter-spacing: .26em; color: var(--muted); text-transform: uppercase }
.or::before, .or::after { content:""; flex: 1; height: 1px; background: var(--border) }
.modal .small { font-size: 12.5px; color: var(--muted) }
.modal .tabs .tab { flex: 1 }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 120; display:grid; gap: 10px; max-width: min(380px, calc(100vw - 32px)) }
.toast { background: linear-gradient(200deg, rgba(15,52,96,.94), rgba(10,18,36,.98)); border-color: #2f6bb8; padding: 12px 16px; font-size: 14px; display:grid; gap: 2px; animation: tin .2s ease-out }
.toast .tt { font-family: var(--f-display); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase }
.toast.ok { border-color: rgba(228,253,151,.55); background: linear-gradient(200deg, rgba(10,18,37,.94), rgba(6,11,24,.96)) }
.toast.ok .tt { color: var(--citrus) }
@keyframes tin { from { transform: translateY(6px); opacity: .4 } to { transform: none; opacity: 1 } }

/* ---------- Hilfe ---------- */
.search { position: relative }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none }
.search .input { padding-left: 40px; min-height: 48px }
.faq { display:grid; gap: 8px }
.faq details { border: 1px solid var(--border); border-radius: 5px; background: rgba(10,18,36,.55) }
.faq details[open] { border-color: var(--bord2); background: rgba(15,26,51,.7) }
.faq summary { cursor: pointer; list-style: none; padding: 14px 16px; display:flex; justify-content: space-between; gap: 14px; align-items: center; font-weight: 600; font-size: 15px }
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { color: var(--acc3) }
.faq summary .plus { flex: none; width: 22px; height: 22px; border: 1px solid var(--bord2); border-radius: 3px; display:grid; place-items:center; font-family: var(--f-mono); font-size: 14px; color: var(--muted) }
.faq details[open] summary .plus { transform: rotate(45deg) }
.faq .a { padding: 0 16px 16px; color: var(--muted); font-size: 14.5px; display:grid; gap: 10px }
.faq .a code, .prose code, .rules code { font-family: var(--f-mono); font-size: 12.5px; background: var(--surface2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; color: var(--acc3) }
.faq-group { display:grid; gap: 12px }
.faq-group + .faq-group { margin-top: 28px }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 6px }
.keys { display:grid; gap: 0 }
.keys .k { display:flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted) }
.keys .k:last-child { border-bottom: 0 }

/* ---------- Wiki ---------- */
.wiki-layout { display:grid; grid-template-columns: 240px minmax(0,1fr); gap: clamp(24px, 4vw, 44px); align-items: start }
@media (max-width: 900px) { .wiki-layout { grid-template-columns: minmax(0,1fr) } .wiki-nav { position: static !important } }
.wiki-nav { position: sticky; top: 90px; padding: 14px; display:grid; gap: 2px }
.wiki-nav button { all: unset; box-sizing: border-box; display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 5px; border: 1px solid transparent; font-size: 13.5px; color: var(--muted); cursor: pointer }
.wiki-nav button:hover { color: var(--text); border-color: var(--acc3) }
.wiki-nav button:focus-visible { outline: 2px solid var(--acc2) }
.wiki-nav button[aria-pressed="true"] { background: var(--acc); border-color: var(--cta-line); color: var(--acc2) }
.wiki-nav .cnt { font-family: var(--f-mono); font-size: 11px }
.wiki-tools { display:flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px }
.wiki-tools .search { flex: 1 1 280px }
.wiki-cat-head { display:grid; gap: 8px; margin-bottom: 18px }
.wiki-cat-head p { color: var(--muted); font-size: 14.5px; max-width: 70ch }
.entry { padding: 18px; display:grid; gap: 8px; align-content: start; min-width: 0 }
.entry-top { display:flex; justify-content: space-between; gap: 10px; align-items: flex-start }
.entry .name { font-weight: 700; font-size: 15.5px }
.entry .kind { font-family: var(--f-display); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.entry p { color: var(--muted); font-size: 13.5px }
.entry .facts { display:flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px }
.entry .facts b { color: var(--acc3); font-weight: 400 }

/* ---------- Brand ---------- */
.logo-tile { display:grid; gap: 0; overflow: hidden; min-width: 0 }
.logo-tile .stage { aspect-ratio: 4 / 3; position: relative; background:
  radial-gradient(ellipse at 50% 40%, rgba(15,52,96,.45), rgba(6,11,24,0) 70%), var(--panel2) }
.logo-tile .stage.light { background: #dfe6f3 }
.logo-tile .stage img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain }
.logo-tile .stage.wide img { inset: 24px 28px }
.logo-tile .stage.small img { inset: 56px }
.logo-tile .stage.small img { width: calc(100% - 112px); height: calc(100% - 112px) }
.logo-tile .info { padding: 16px 18px; display:grid; gap: 10px; border-top: 1px solid var(--border) }
.logo-tile .info .t { display:flex; justify-content: space-between; gap: 10px; align-items: baseline }
.logo-tile .info .t span { font-family: var(--f-mono); font-size: 11px; color: var(--muted) }
.logo-tile .info p { font-size: 13px; color: var(--muted) }
.logo-tile .dl { display:flex; flex-wrap: wrap; gap: 8px }
.logo-tile .dl .btn { min-height: 32px; font-size: 11px; padding: 0 12px }
.swatch { overflow: hidden; display:grid; min-width: 0 }
.swatch .chipc { height: 92px; position: relative }
.swatch .info { padding: 12px 14px; display:grid; gap: 4px; border-top: 1px solid var(--border) }
.swatch .nm { font-weight: 700; font-size: 14px }
.swatch .role { font-size: 12.5px; color: var(--muted) }
.swatch .codes { display:flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 4px }
.swatch .codes code { font-family: var(--f-mono); font-size: 12px; color: var(--text) }
.copy { all: unset; cursor: pointer; font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 3px 8px; border: 1px solid var(--border); border-radius: 2px }
.copy:hover { color: var(--text); border-color: var(--acc3) }
.copy:focus-visible { outline: 2px solid var(--acc2) }
.type-spec { padding: 22px; display:grid; gap: 12px; min-width: 0 }
.type-spec .sample { font-size: 34px; line-height: 1.1; overflow-wrap: anywhere }
.type-spec .meta { display:flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px }
.dodont { padding: 20px; display:grid; gap: 12px; align-content: start; min-width: 0 }
.dodont .hd { display:flex; align-items:center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase }
.dodont.do .hd { color: var(--frozen) }
.dodont.dont .hd { color: var(--danger-text) }
.dodont ul { margin: 0; padding-left: 1.1em; display:grid; gap: 7px; color: var(--muted); font-size: 14px }
.misuse { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px }
@media (max-width: 760px) { .misuse { grid-template-columns: repeat(2, minmax(0,1fr)) } }
.misuse figure { margin: 0; display:grid; gap: 8px }
.misuse .box { aspect-ratio: 16/9; border: 1px solid #5a2a35; border-radius: 5px; display:grid; place-items:center; padding: 14px; background: var(--panel2); overflow: hidden; position: relative }
.misuse .box img { max-height: 46px; width: auto }
.misuse figcaption { font-size: 12.5px; color: var(--danger-text) }
.misuse .box::after { content:""; position:absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(176,74,90,.55) 50%, transparent calc(50% + 1px)) }

/* ---------- Footer ---------- */
.site-footer { margin-top: 40px; border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(10,18,36,.6), rgba(6,11,24,.95)) }
.ft-top { display:grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 44px 32px }
.ft-brand { display:grid; gap: 14px; align-content: start; justify-items: start }
.ft-brand .wm { width: 210px; max-width: 100% }
.ft-brand p { color: var(--muted); font-size: 13.5px; max-width: 40ch }
.ft-col { display:grid; gap: 8px; align-content: start }
.ft-col .eyebrow { margin-bottom: 6px }
.ft-col a { color: var(--muted); text-decoration: none; font-size: 14px }
.ft-col a:hover { color: var(--text) }
.ft-col a[aria-current="page"] { color: var(--text) }
.ft-bottom { display:flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted) }
.ft-bottom .ver { font-family: var(--f-mono); font-size: 10px }
@media (max-width: 860px) { .ft-top { grid-template-columns: repeat(2, minmax(0,1fr)) } .ft-brand { grid-column: 1 / -1 } }
@media (max-width: 420px) { .ft-top { grid-template-columns: minmax(0,1fr) } }

/* ---------- Streams ---------- */
.st-page { display:grid; gap: 18px }
.st-head { display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 18px; align-items: stretch }
.st-head .stats { align-self: stretch }
.st-head .wl-panel { display:grid; align-content: center }
@media (max-width: 900px) { .st-head { grid-template-columns: minmax(0,1fr) } }
.st-filter { display:grid; grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)) auto; gap: 14px 16px; align-items: end }
.st-opts { grid-column: 1 / -1; display:flex; flex-wrap: wrap; gap: 10px 26px }
@media (max-width: 900px) { .st-filter { grid-template-columns: repeat(2, minmax(0,1fr)) } .st-q { grid-column: 1 / -1 } }
@media (max-width: 520px) { .st-filter { grid-template-columns: minmax(0,1fr) } }
.st-group { font-size: 18px; margin: 10px 0 12px; display:flex; gap: 12px; align-items: baseline }
.st-group .mono { font-size: 12px; letter-spacing: .04em; color: var(--acc3); text-transform: none }
.st-grid { margin-bottom: 8px }
.stream { display:grid; overflow: hidden; min-width: 0; transition: border-color .15s }
.stream:hover { border-color: rgba(127,176,255,.35) }
.stream.is-off { opacity: .62 }
.st-thumb { position: relative; display:block; aspect-ratio: 16 / 9; text-decoration: none; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(30,90,168,.55), rgba(6,11,24,0) 70%), linear-gradient(160deg, #0f1a33, #060b18) }
.st-thumb-in { position:absolute; inset:0; display:grid; place-items:center; font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: .14em; color: rgba(238,242,255,.16) }
.st-live { position:absolute; left: 10px; top: 10px; display:inline-flex; align-items:center; gap: 7px; padding: 4px 9px; border-radius: 3px;
  font-family: var(--f-display); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acc3);
  background: rgba(6,11,24,.82); border: 1px solid rgba(127,176,255,.5); box-shadow: 0 0 10px rgba(127,176,255,.25) }
.st-live .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2.4s ease-in-out infinite }
.st-live .mono { letter-spacing: .04em; color: var(--text); font-weight: 400 }
.st-viewers { position:absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 3px; font-size: 11.5px; color: var(--text); background: rgba(6,11,24,.82); border: 1px solid var(--glass-line) }
.st-offline { position:absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 3px; font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); background: rgba(6,11,24,.82); border: 1px solid var(--border) }
.st-body { padding: 14px 16px 16px; display:grid; gap: 12px; align-content: start }
.st-who { display:flex; gap: 12px; align-items: center; min-width: 0 }
.st-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; display:grid; place-items:center; font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--acc2); background: var(--acc); border: 1px solid var(--cta-line) }
.st-names { display:grid; min-width: 0 }
.st-chan { font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-chan:hover { color: var(--acc3) }
.st-char { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-char .mono { color: var(--acc3); font-size: 12px }
.st-tags { display:flex; flex-wrap: wrap; gap: 6px }
.st-foot { display:flex; align-items:center; gap: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px }
.st-foot a { color: var(--muted); text-decoration: none }
.st-foot a:hover { color: var(--acc3) }
.st-raid { min-height: 30px; padding: 0 12px; font-size: 11px; margin-right: auto }
@media (prefers-reduced-motion: reduce) { .st-live .dot { animation: none } }

/* ---------- Startseite: Server-Status ---------- */
.srv { padding: 20px 22px 16px; display:grid; gap: 14px; background: linear-gradient(200deg, rgba(16,28,56,.78), rgba(6,11,24,.86)) }
.srv .lbl { display:block; font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted) }
.srv-head { display:flex; justify-content: space-between; align-items: center; gap: 12px }
.srv-head .eyebrow { margin: 0; white-space: nowrap }
.srv-connect { display:flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 5px; background: rgba(6,11,24,.55) }
.srv-connect > div { display:grid; gap: 6px; min-width: 0 }
.srv-addr { font-size: 17px; color: var(--acc3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.srv-copy { flex: none; min-height: 36px; padding: 0 14px; font-size: 11px }
.srv-stats { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px }
.srv-stat { display:grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--caps) }
.srv-stat .v { font-size: 20px; color: var(--text) }
.srv-stat .max { color: var(--muted) }
.srv-play { width: 100%; justify-content: center; border-radius: 4px; min-height: 46px }
.srv-foot { display:flex; justify-content: space-between; gap: 12px; font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted) }
@media (max-width: 420px) { .srv { padding: 16px } .srv-stat .v { font-size: 17px } .srv-connect { flex-wrap: wrap } }
@media (max-width: 340px) { .srv-stats { grid-template-columns: minmax(0,1fr) } }