/* ======================================================================
   NORDSTREITMACHT · WARDOGS-Community-Server, Seite von Draco-Gaming
   Aufbau „Einsatzzentrale“, Farben aus dem Banner: Nachtblau, Stahl, Eisblau
   (die Augen des Wolfs), Glut nur als Warnfarbe.

   Keine Inline-Stile auf der Seite (CSP style-src 'self'). Was sich zur
   Laufzeit ändert, setzt seite.js über element.style (CSSOM, erlaubt).
   Bewegung nur, wenn das System sie nicht abbestellt hat
   (prefers-reduced-motion), siehe ganz unten.
   ====================================================================== */

/* ------------------------------------------------------------- Schriften */
@font-face { font-family: "Barlow"; src: url("../schriften/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../schriften/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../schriften/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../schriften/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../schriften/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../schriften/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --grund: #0a0e14;
  --grund-tief: #070b11;
  --flaeche: #111821;
  --flaeche-hoch: #17212d;
  --linie: rgba(170, 200, 230, .10);
  --linie-stark: rgba(170, 200, 230, .24);
  --text: #c3cdd8;
  --text-hell: #eef4fa;
  --text-leise: #8391a1;
  --akzent: #46a8ff;
  --akzent-hell: #8fd0ff;
  --akzent-tief: #1d5f9e;
  --eis: #d6efff;
  --zweit: #7d93ab;
  --glut: #ff8a3d;
  --online: #5fd37e;
  --gefahr: #e0533d;
  --display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --schrift: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Consolas", "Cascadia Mono", ui-monospace, "SFMono-Regular", monospace;
  --bahn: 1180px;
  --kopf-hoehe: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--grund);
  background-image:
    linear-gradient(color-mix(in srgb, var(--zweit) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--zweit) 6%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  color: var(--text);
  font: 400 17px/1.6 var(--schrift);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--akzent) 45%, transparent); color: #fff; }
a { color: var(--akzent-hell); text-underline-offset: .18em; }
a:hover { color: var(--eis); }
code { font-family: var(--mono); font-size: .9em; color: var(--text-hell); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
[hidden] { display: none !important; }
.bahn { width: min(var(--bahn), calc(100% - 3rem)); margin: 0 auto; }
.disp { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.klein { font-size: .88rem; color: var(--text-leise); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Vorrat an Zeichen für <use href="#…">, nicht display: none (sonst zeichnen manche Browser die Kopien nicht) */
.zeichen-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.springen { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--akzent); color: #06101c; font-weight: 600; text-decoration: none; }
.springen:focus { top: 1rem; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(6, 10, 16, .88), rgba(6, 10, 16, .45) 70%, transparent);
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.kopf.fest {
  background: color-mix(in srgb, var(--grund) 90%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--linie), 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.kopf-innen { display: flex; align-items: center; gap: 1.3rem; height: var(--kopf-hoehe); }
.zurueck {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .75rem .4rem .55rem;
  border: 1px solid var(--linie-stark); border-radius: 3px;
  color: var(--text); text-decoration: none; font: 600 .84rem/1 var(--schrift);
  background: rgba(255, 255, 255, .04); white-space: nowrap;
  transition: border-color .2s, color .2s, background-color .2s;
}
.zurueck:hover { border-color: var(--akzent); color: var(--text-hell); background: rgba(70, 168, 255, .08); }
.zurueck img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 90, 40, .45)); }
.marke { display: inline-flex; align-items: center; gap: .7rem; color: var(--text-hell); text-decoration: none; opacity: 0; translate: 0 -6px; transition: opacity .4s ease, translate .4s ease; }
.kopf.fest .marke, .marke.immer { opacity: 1; translate: 0 0; }
.marke-bild {
  width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--akzent) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--akzent) 45%, transparent);
}
.marke-text { display: flex; flex-direction: column; line-height: 1; }
.marke-text b { font: 700 1.36rem/1 var(--display); letter-spacing: .08em; text-shadow: 0 0 12px color-mix(in srgb, var(--akzent) 35%, transparent); }
.marke-text small { margin-top: .22rem; font: 600 .64rem/1 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); }
.menue { display: flex; gap: 1.35rem; margin-left: auto; }
.menue a {
  position: relative; color: var(--text); text-decoration: none;
  font: 600 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em;
  padding: .5rem 0;
}
.menue a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--akzent); box-shadow: 0 0 10px var(--akzent);
  scale: 0 1; transform-origin: left; transition: scale .25s ease;
}
.menue a:hover, .menue a.aktiv { color: var(--text-hell); }
.menue a:hover::after, .menue a.aktiv::after { scale: 1 1; }
.live-pille {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: rgba(0, 0, 0, .4); border: 1px solid var(--linie-stark);
  font: 600 .84rem/1 var(--mono); color: var(--text-hell); white-space: nowrap; text-decoration: none;
}
.punkt {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--online);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 22%, transparent), 0 0 12px var(--online);
}
.punkt.aus { background: var(--text-leise); box-shadow: none; }
.punkt.warnung { background: var(--glut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glut) 22%, transparent), 0 0 12px var(--glut); }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.35rem;
  background: var(--akzent); color: #06101c; text-decoration: none; border: 0; cursor: pointer;
  font: 700 1.02rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background-color .2s, color .2s;
}
.knopf::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  translate: -120% 0; transition: translate .6s ease;
}
.knopf:hover { background: var(--akzent-hell); color: #06101c; }
.knopf:hover::before { translate: 120% 0; }
.knopf-rand { background: rgba(6, 10, 16, .35); color: var(--text-hell); border: 1px solid var(--linie-stark); clip-path: none; }
.knopf-rand:hover { background: rgba(70, 168, 255, .12); color: var(--text-hell); border-color: var(--akzent); }
.knopf > svg { width: 1.25em; height: 1.25em; flex: none; margin: -.2em 0; }

/* ------------------------------------------------------------------ Kopfbild */
/*
 * Das Banner (16:9) füllt den Kopf randlos. Damit die Effekte genau auf Augen,
 * Ring und Lichtern liegen, egal wie der Schirm das Bild beschneidet, sitzen Bild
 * und Effekte gemeinsam auf einer „Bühne“ im Seitenverhältnis des Bildes, die sich
 * wie object-fit: cover verhält (Breite oder Höhe füllt, Mitte, 30 % von oben).
 * Die Positionen sind Prozent der Bildmaße 1672 × 941.
 */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  height: max(520px, min(56.25vw, 94vh));
  container-type: size;
  background: var(--grund-tief);
}
.buehne {
  position: absolute; left: 50%; top: 30%; z-index: 0;
  width: max(100cqw, calc(100cqh * 1672 / 941)); aspect-ratio: 1672 / 941;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-30% + var(--py, 0px)));
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.zoom { position: absolute; inset: 0; transform-origin: 50% 30%; scale: 1.03; animation: kamera 46s ease-in-out infinite alternate; }
.banner { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; }
.fx { position: absolute; pointer-events: none; }

/* Wolfskopf als Film (WAN 2.2, erstes = letztes Bild = Banner-Ausschnitt 896 × 672 ab 1218/70 in 3344 × 1882):
   liegt deckungsgleich über dem Banner und läuft zu den Rändern weich aus. seite.js lädt ihn nur auf großen
   Schirmen; dann übernimmt er auch die Augen. */
.wolf-film {
  left: 36.42%; top: 3.72%; width: 26.79%; height: 35.71%;
  object-fit: fill; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask: radial-gradient(ellipse 50% 52% at 50% 54%, #000 58%, rgba(0, 0, 0, .55) 80%, transparent 100%);
  mask: radial-gradient(ellipse 50% 52% at 50% 54%, #000 58%, rgba(0, 0, 0, .55) 80%, transparent 100%);
}
.wolf-film.laeuft { opacity: 1; }
.augen { inset: 0; transition: opacity 1.2s ease; }
.hero.mit-film .augen { opacity: 0; }

/* Wolfsaugen: glühen beim Laden auf, atmen, ab und zu ein Lichtblitz quer */
.auge {
  width: 4.4%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 249, 255, .98) 0 7%, rgba(130, 205, 255, .8) 17%, rgba(46, 140, 255, .38) 36%, transparent 68%);
  mix-blend-mode: screen; opacity: 0;
  animation: auge-an 1.4s .5s ease-out forwards, auge-puls 5.2s 1.9s ease-in-out infinite;
}
.auge.links { left: 47.03%; top: 29.21%; }
.auge.rechts { left: 52.66%; top: 29.33%; animation-delay: .62s, 2.02s; }
.blitz {
  left: 49.85%; top: 29.28%; width: 36%; height: 1.1%; translate: -50% -50%;
  background: radial-gradient(ellipse at center, rgba(225, 245, 255, .95) 0, rgba(90, 180, 255, .45) 30%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; scale: .15 1;
  animation: blitz 9.5s 2.6s ease-in-out infinite;
}
/* Lichtlauf auf dem Metallring um den Wolf. Der Ring im Bild ist leicht oval und wird oben von Ohren und Stern,
   unten vom Schriftzug verdeckt. Darum keine berechnete Kreisform: ring-maske.png stammt aus dem Banner selbst
   (nur die Metallpixel des äußeren Ringbands, endet am Schriftzug), Ausschnitt 932 × 480 ab 1209/286 in 3344 × 1882.
   Der Lichtkegel dreht sich um die Ringmitte (50 % / 77,9 % des Ausschnitts) und ist nur durch die Maske sichtbar. */
.ring {
  left: 36.15%; top: 15.2%; width: 27.87%; height: 25.5%; overflow: hidden;
  -webkit-mask: url("../bilder/ring-maske.png") 0 0 / 100% 100% no-repeat;
  mask: url("../bilder/ring-maske.png") 0 0 / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: 0;
  animation: einblenden-fx 1.2s 1.2s ease-out forwards;
}
.ring::before {
  content: ""; position: absolute; left: -14.4%; top: -47.1%; width: 128.8%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 296deg, rgba(150, 215, 255, 0) 296deg, rgba(160, 220, 255, .75) 343deg, rgba(240, 250, 255, 1) 355deg, #fff 359deg, transparent 360deg);
  animation: drehen 7.5s 1.2s linear infinite;
}
.ring::after {
  content: ""; position: absolute; inset: 0; background: rgba(120, 200, 255, .9);
  animation: hauch 6s ease-in-out infinite;
}
/* Glanz, der über den Chrom-Schriftzug läuft */
.glanz {
  left: 20.4%; top: 40.6%; width: 59.4%; height: 13.4%;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0) 43%, rgba(236, 248, 255, .9) 50%, rgba(255, 255, 255, 0) 57%, transparent 60% 100%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  mix-blend-mode: overlay;
  animation: glanz 8.5s 1.8s ease-in-out infinite;
}
/* Positionslichter der Hubschrauber, Lampen am Wachturm */
.licht {
  width: .62%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ff4436 34%, rgba(255, 60, 48, 0) 70%);
  box-shadow: 0 0 12px 4px rgba(255, 70, 50, .55);
  mix-blend-mode: screen; opacity: 0;
  animation: blinken 1.7s steps(1) infinite;
}
.licht.heli-heck { left: 13.82%; top: 18.81%; }
.licht.heli-bug { left: 21.53%; top: 22.85%; animation-delay: .55s; animation-duration: 2.3s; }
.licht.heli-rechts { left: 90.79%; top: 18.07%; animation-delay: 1.1s; width: .5%; }
.licht.warm {
  width: .9%; background: radial-gradient(circle, #fff6d8 0 18%, #ffb04a 40%, rgba(255, 150, 40, 0) 72%);
  box-shadow: 0 0 16px 5px rgba(255, 170, 60, .4); opacity: .85;
  animation: flackern 3.4s ease-in-out infinite;
}
.licht.turm-1 { left: 91.87%; top: 55.26%; }
.licht.turm-2 { left: 86.84%; top: 67.69%; animation-delay: .7s; }
.licht.turm-3 { left: 89.11%; top: 67.59%; animation-delay: 1.6s; }
/* Nordlicht im Himmel, Nebel im Tal */
.nordlicht {
  left: -8%; width: 116%; top: -6%; height: 44%;
  background:
    radial-gradient(42% 52% at 24% 44%, rgba(40, 225, 195, .16), transparent 70%),
    radial-gradient(40% 46% at 72% 30%, rgba(70, 140, 255, .2), transparent 70%),
    radial-gradient(32% 40% at 52% 62%, rgba(150, 100, 255, .1), transparent 70%);
  mix-blend-mode: screen; animation: nordlicht 24s ease-in-out infinite alternate;
}
.nebel {
  left: -30%; width: 160%; top: 54%; height: 30%;
  background:
    radial-gradient(34% 58% at 18% 50%, rgba(205, 220, 238, .12), transparent 70%),
    radial-gradient(28% 52% at 58% 42%, rgba(205, 220, 238, .09), transparent 70%),
    radial-gradient(24% 48% at 88% 58%, rgba(205, 220, 238, .11), transparent 70%);
  animation: nebel 64s linear infinite alternate;
}
.nebel.zwei { top: 64%; height: 26%; opacity: .8; animation-duration: 92s; animation-direction: alternate-reverse; }
/* Abtastlinie wie auf einem Lageschirm */
.scan {
  inset: 0;
  background: linear-gradient(180deg, transparent 0, rgba(143, 208, 255, 0) 47%, rgba(143, 208, 255, .22) 49.6%, rgba(220, 244, 255, .5) 50%, transparent 50.4%);
  translate: 0 -60%; opacity: 0;
  animation: scan 12s 3.2s linear infinite;
}
#schnee { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(0deg, var(--grund) 1%, rgba(10, 14, 20, .86) 17%, rgba(10, 14, 20, 0) 40%),
    linear-gradient(180deg, rgba(10, 14, 20, .35), transparent 16%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 7, 12, .55) 100%);
}
.hero-innen { position: relative; z-index: 3; margin-top: -14rem; padding-bottom: 2.6rem; text-align: center; }
.hero-text {
  max-width: 46rem; margin: 0 auto 1.4rem; font-size: 1.16rem; color: var(--text-hell);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; }
.hero-lage {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin-top: 2rem;
  font: 500 .88rem/1.4 var(--mono); color: var(--text);
}
.hero-lage > span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-lage > span + span::before { content: "//"; color: var(--akzent); margin-right: .2rem; }
.id-chip {
  display: inline-flex; align-items: center; gap: .7rem; max-width: 100%;
  padding: .55rem .6rem .55rem 1rem;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--linie-stark); border-radius: 3px;
  color: var(--text-leise); font: 600 .78rem/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: border-color .2s;
}
.id-chip:hover { border-color: var(--akzent); }
.id-chip code { font-size: .96rem; letter-spacing: .04em; color: var(--text-hell); text-transform: none; overflow-wrap: anywhere; text-align: left; }
.id-chip > span:last-child { padding: .38rem .6rem; background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--akzent-hell); border-radius: 2px; white-space: nowrap; }
.id-chip.kopiert > span:last-child { background: color-mix(in srgb, var(--online) 22%, transparent); color: var(--online); }

/* ------------------------------------------------------------- Abschnitte */
.abschnitt { position: relative; padding: 5rem 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.topo::before, .topo-links::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--zweit); opacity: .15;
  -webkit-mask: url("../bilder/topo.svg") right -120px top -40px / 1100px auto no-repeat;
  mask: url("../bilder/topo.svg") right -120px top -40px / 1100px auto no-repeat;
}
.topo-links::before { -webkit-mask-position: left -260px bottom -160px; mask-position: left -260px bottom -160px; }
.ueber {
  display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1rem;
  color: var(--akzent); font-size: .98rem; letter-spacing: .2em;
}
.ueber::before { content: ""; width: 28px; height: 2px; background: var(--akzent); box-shadow: 0 5px 0 color-mix(in srgb, var(--akzent) 45%, transparent); }
.ab-kopf { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.2rem; }
.ab-kopf h2 { margin: 0; color: var(--text-hell); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; }
.ab-rechts { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-leise); font: 500 .88rem/1.4 var(--mono); }
.feld {
  position: relative;
  background: linear-gradient(180deg, var(--flaeche-hoch), var(--flaeche));
  border: 1px solid var(--linie); border-radius: 3px;
  padding: 1.5rem 1.6rem;
}
.hud::before, .hud::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 0 solid var(--akzent);
  transition: width .6s ease, height .6s ease;
}
.hud::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.hud::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.hud:hover::before, .hud:hover::after { width: 34px; height: 34px; }
.feld-titel { margin: 0 0 .9rem; font: 600 .76rem/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); }

/* ------------------------------------------------------------------- Lage */
.lage-gitter { position: relative; display: grid; grid-template-columns: 1.25fr 1fr 1.15fr; gap: 1.2rem; }
.lage-zwei { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.lage-zahl { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.2rem; align-items: center; }
.lage-zahl .feld-titel, .lage-zahl .balken, .lage-zahl .mini { grid-column: 1 / -1; }
.gross-zahl { margin: 0; font: 700 5.2rem/1 var(--display); color: var(--text-hell); font-variant-numeric: tabular-nums; }
.gross-zahl small { font-size: 2rem; color: var(--text-leise); margin-left: .15rem; }
.balken { height: 8px; margin: 1rem 0 1.2rem; background: rgba(255, 255, 255, .06); overflow: hidden; }
.balken span { display: block; height: 100%; width: 100%; transform-origin: left; scale: 0 1; background: linear-gradient(90deg, var(--akzent-tief), var(--akzent)); box-shadow: 0 0 12px var(--akzent); transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.mini { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; font-size: .94rem; }
.mini dt { color: var(--text-leise); }
.mini dd { margin: 0; color: var(--text-hell); }

/* Radar: ein Punkt je Spieler, er leuchtet auf, wenn der Strahl vorbeikommt */
.radar {
  position: relative; width: 132px; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 32%, rgba(70, 168, 255, .16) 32.6%, transparent 33.4% 65%, rgba(70, 168, 255, .16) 65.6%, transparent 66.4%),
    linear-gradient(transparent calc(50% - .5px), rgba(70, 168, 255, .14) 0 calc(50% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(70, 168, 255, .14) 0 calc(50% + .5px), transparent 0),
    radial-gradient(circle, rgba(20, 50, 80, .35), rgba(5, 10, 18, .7));
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  box-shadow: 0 0 24px -6px var(--akzent), inset 0 0 22px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.radar-strahl {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 290deg, rgba(70, 168, 255, .05) 290deg, rgba(110, 195, 255, .45) 357deg, rgba(220, 245, 255, .9) 359.5deg, transparent 360deg);
}
.radar-punkt {
  position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--eis); box-shadow: 0 0 8px 2px var(--akzent); opacity: .18;
}
.radar-mitte { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--akzent-hell); box-shadow: 0 0 10px var(--akzent); }

.abend-datum { margin: 0; font-size: 2.6rem; line-height: 1.05; color: var(--text-hell); }
.abend-datum span { color: var(--akzent); }
.abend-datum.offen { font-size: 1.9rem; color: var(--text); }
.abend-name { margin: .5rem 0 0; font: 600 1.06rem/1.3 var(--schrift); color: var(--text-hell); }
.countdown { display: flex; gap: .5rem; margin: 1.1rem 0 1rem; }
.countdown div { min-width: 64px; padding: .55rem .4rem; text-align: center; background: rgba(0, 0, 0, .3); border: 1px solid var(--linie); }
.countdown b { display: block; font: 700 1.8rem/1 var(--display); color: var(--text-hell); font-variant-numeric: tabular-nums; }
.countdown small { font: 600 .62rem/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.daten { display: grid; grid-template-columns: auto 1fr; gap: .65rem 1.2rem; margin: 0; align-items: baseline; }
.daten dt { color: var(--text-leise); font-size: .88rem; }
.daten dd { margin: 0; color: var(--text-hell); font-size: .94rem; min-width: 0; }
.daten code { padding: .12rem .4rem; background: rgba(0, 0, 0, .35); border: 1px solid var(--linie); border-radius: 2px; overflow-wrap: anywhere; }
.daten .id-chip { padding: .4rem .45rem .4rem .7rem; }
.daten .id-chip code { font-size: .8rem; border: 0; background: none; padding: 0; }
.namen { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; min-height: 2.2rem; }
.namen li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .62rem; font-size: .88rem;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); color: var(--text-hell);
  animation: chip-rein .5s ease-out backwards;
}
.namen li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fraktion, var(--online)); box-shadow: 0 0 6px var(--fraktion, var(--online)); }
.namen li.mehr, .namen li.leer { color: var(--text-leise); }
.namen li.mehr::before, .namen li.leer::before { display: none; }
.namen-hinweis { margin: .9rem 0 0; }
.fraktionen { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.fraktionen li { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: baseline; }
.fraktionen b { font: 700 1.2rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-hell); }
.fraktionen span { font: 600 1.1rem/1 var(--mono); color: var(--text-hell); font-variant-numeric: tabular-nums; }
.fraktionen i { grid-column: 1 / -1; display: block; height: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.fraktionen i::after { content: ""; display: block; height: 100%; width: var(--anteil, 0%); background: var(--farbe, var(--akzent)); box-shadow: 0 0 10px var(--farbe, var(--akzent)); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.fraktionen .leer { display: block; color: var(--text-leise); font-size: .92rem; }
.zustand-zeile.gestoert { color: var(--glut); }

/* --------------------------------------------------------------- Rangliste */
.vorbereitung { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: center; overflow: hidden; }
.vorbereitung h3 { margin: 0 0 .8rem; color: var(--text-hell); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.05; }
.vorbereitung p { margin: 0 0 1rem; }
.wertungen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.wertungen li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem .4rem .45rem;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
  font: 700 .86rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-hell);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.wertungen svg { width: 20px; height: 20px; color: var(--akzent); }
.geist { position: relative; padding: 1rem; border: 1px solid var(--linie); background: rgba(0, 0, 0, .25); }
.geist-zeile { display: grid; grid-template-columns: 2rem 1fr 4rem 4rem 3rem; gap: .8rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px solid var(--linie); }
.geist-zeile:last-child { border-bottom: 0; }
.geist-zeile span { display: block; height: 9px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(143, 208, 255, .16), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: schimmer 2.4s linear infinite; }
.geist-zeile span:first-child { width: 1.2rem; }
.geist-zeile:nth-child(2) span { animation-delay: .15s; } .geist-zeile:nth-child(3) span { animation-delay: .3s; }
.geist-zeile:nth-child(4) span { animation-delay: .45s; } .geist-zeile:nth-child(5) span { animation-delay: .6s; }
.geist-zeile:nth-child(6) span { animation-delay: .75s; }
.geist-kopf span { height: 7px; opacity: .6; }
.geist::after {
  content: "WERTUNG STARTET"; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  padding: .55rem 1rem; border: 1px solid color-mix(in srgb, var(--akzent) 60%, transparent);
  background: rgba(6, 10, 16, .85); color: var(--akzent-hell);
  font: 700 .95rem/1 var(--display); letter-spacing: .24em; white-space: nowrap;
  box-shadow: 0 0 24px -6px var(--akzent);
  animation: blinkschrift 2.6s ease-in-out infinite;
}

/* ------------------------------------------------- Beitreten, Regeln, Team */
.schritte { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.schritte::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 3.1rem; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent);
  transform-origin: left; scale: 0 1; transition: scale 1.4s .3s ease;
}
.schritte.sichtbar::before { scale: 1 1; }
.schritte > li { z-index: 1; }
.schritt-nr { display: block; font-size: 3.8rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--akzent); margin-bottom: .6rem; }
.schritte h3, .regel h3 { margin: 0 0 .4rem; color: var(--text-hell); font: 700 1.3rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.schritte p { margin: 0; }
.schritte code { color: var(--akzent-hell); overflow-wrap: anywhere; }
.regel-gitter { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.regel { padding: 1.2rem 1.2rem 1.3rem; border-top: 3px solid var(--akzent); background: color-mix(in srgb, var(--flaeche) 85%, transparent); transition: translate .25s ease, box-shadow .25s ease; }
.regel:hover { translate: 0 -3px; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .9), 0 -6px 18px -12px var(--akzent); }
.regel-nr { font-size: 1.1rem; color: var(--akzent); letter-spacing: .16em; }
.regel h3 { margin-top: .4rem; }
.regel p { margin: 0; font-size: .95rem; }
.regel.neu { border-top-color: var(--zweit); }
.stufen { position: relative; margin-top: 2.4rem; }
.stufen-leiste { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 1rem; padding: 0; list-style: none; }
.stufen-leiste li { position: relative; padding: 1rem 2.2rem 1rem 1.3rem; background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche)); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
.stufen-leiste li:first-child { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.stufen-leiste li:nth-child(2) { margin-left: -14px; padding-left: 2.4rem; background: color-mix(in srgb, var(--akzent) 30%, var(--flaeche)); }
.stufen-leiste li:nth-child(3) { margin-left: -14px; padding-left: 2.4rem; background: color-mix(in srgb, var(--gefahr) 62%, var(--flaeche)); }
.stufen-leiste b { display: block; color: var(--text-hell); font-size: 1.4rem; }
.stufen-leiste span { font-size: .92rem; color: var(--text-hell); opacity: .85; }
.team-gitter { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
.team-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .8rem; }
.team { display: flex; align-items: center; gap: 1.1rem; }
.team img {
  width: 76px; height: 76px; object-fit: contain; flex: none; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--akzent) 35%, transparent), transparent 70%);
  transition: filter .3s ease, scale .3s ease;
}
.team:hover img { filter: drop-shadow(0 0 12px var(--akzent)); scale: 1.06; }
.team h3 { margin: 0; color: var(--text-hell); font-size: 1.7rem; line-height: 1; }
.team p { margin: .3rem 0 0; color: var(--text-leise); font-size: .92rem; }
.melden h3 { margin: 0 0 .6rem; color: var(--text-hell); font-size: 2rem; line-height: 1; }
.melden p { margin: 0 0 1.2rem; }
.melden .klein { margin: 1rem 0 0; }
.verweis-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.verweis { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--text); transition: border-color .2s, translate .2s; }
.verweis:hover { border-color: var(--akzent); color: var(--text); translate: 0 -2px; }
.verweis-art { font: 600 .72rem/1 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.verweis b { color: var(--text-hell); font: 700 1.35rem/1.15 var(--display); text-transform: uppercase; }
.verweis b::after { content: " ↗"; color: var(--akzent); }
.verweis span:last-child { font-size: .92rem; color: var(--text-leise); }

/* ----------------------------------------------------------------- Discord */
/* Nur ein Verweis: die Seite lädt nichts von Discord (kein Widget, kein Bild von dort) */
.discord { display: grid; grid-template-columns: 1fr auto; gap: 2.4rem; align-items: center; overflow: hidden; }
.discord h3 { margin: 0 0 .8rem; color: var(--text-hell); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.05; }
.discord p { max-width: 44rem; margin: 0 0 1.4rem; }
.discord .klein { margin: 1.1rem 0 0; }
.discord-zeichen {
  display: grid; place-items: center; width: 184px; aspect-ratio: 1; margin-right: 1.2rem; border-radius: 50%;
  color: var(--akzent-hell);
  background: radial-gradient(circle, rgba(20, 50, 80, .35), rgba(5, 10, 18, .7));
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  box-shadow: 0 0 34px -8px var(--akzent), inset 0 0 22px rgba(0, 0, 0, .6);
}
.discord-zeichen svg {
  width: 50%; height: 50%;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--akzent) 70%, transparent));
  transition: scale .3s ease, filter .3s ease;
}
.discord:hover .discord-zeichen svg { scale: 1.06; filter: drop-shadow(0 0 18px var(--akzent)); }

/* ------------------------------------------------------------ Wappen-Emblem */
.emblem { position: relative; width: 88px; aspect-ratio: 1; flex: none; }
.emblem img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; border: 1px solid color-mix(in srgb, var(--akzent) 60%, transparent); box-shadow: 0 0 22px -4px var(--akzent); }
.emblem::before, .emblem::after {
  content: ""; position: absolute; width: 18%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 249, 255, .95) 0 8%, rgba(110, 195, 255, .6) 22%, transparent 66%);
  mix-blend-mode: screen; animation: auge-puls 5.2s ease-in-out infinite;
}
.emblem::before { left: 32.07%; top: 62.4%; }
.emblem::after { left: 66.56%; top: 62.91%; animation-delay: .12s; }

/* ------------------------------------------------------------------ Fußzeile */
.fuss { padding: 2.6rem 0 3rem; border-top: 1px solid var(--linie); background: rgba(0, 0, 0, .28); }
.fuss-innen { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.fuss p { margin: 0; font-size: .86rem; color: var(--text-leise); max-width: 46rem; }
.fuss nav { display: flex; gap: 1.2rem; font-size: .9rem; }
.fuss nav a { color: var(--text); }

/* ------------------------------------------------------------- Textseiten */
.seitenkopf { padding-top: calc(var(--kopf-hoehe) + 3rem); padding-bottom: 2.2rem; }
.seitenkopf h1 { margin: 0; color: var(--text-hell); font-size: clamp(2.4rem, 5.5vw, 3.8rem); line-height: 1; }
.einleitung { max-width: 46rem; margin: 1.2rem 0 .4rem; font-size: 1.1rem; }
.text-innen { max-width: 50rem; }
.text-innen h2 { margin: 2.8rem 0 .8rem; color: var(--text-hell); font-size: 1.8rem; line-height: 1.1; }
.text-innen h2:first-child { margin-top: 0; }
.text-innen p { margin: 0 0 1rem; }
.text-innen ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.text-innen li { margin: .35rem 0; }
.text-innen li::marker { color: var(--akzent); }
.text-innen strong { color: var(--text-hell); }
.kurz { margin-bottom: 2.6rem; }
.kurz .feld-titel { margin-bottom: 1rem; }
.kurz ul { margin: 0; }
.merke { margin: 1.2rem 0 1.4rem; padding: 1rem 1.2rem; border-left: 3px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.merke p:last-child { margin-bottom: 0; }
.fristen { width: 100%; margin: .4rem 0 1.2rem; border-collapse: collapse; font-size: .96rem; }
.fristen th, .fristen td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.fristen th { font: 600 .74rem/1.2 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); border-bottom-color: var(--linie-stark); }
.fristen td:last-child { color: var(--text-hell); white-space: nowrap; }

/* ------------------------------------------------- Kopf rechts, Kontoknopf */
.kopf-rechts { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.menue ~ .kopf-rechts { margin-left: 0; }
.konto-chip {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 15rem;
  padding: .28rem .8rem .28rem .28rem; border-radius: 999px;
  background: rgba(0, 0, 0, .4); border: 1px solid var(--linie-stark);
  color: var(--text-hell); font: 600 .84rem/1 var(--schrift); text-decoration: none; white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}
.konto-chip:hover { border-color: var(--akzent); color: var(--text-hell); background: rgba(70, 168, 255, .1); }
.konto-chip svg { width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 50%; color: #06101c; background: linear-gradient(135deg, var(--akzent-hell), var(--akzent-tief)); }
.konto-chip span { overflow: hidden; text-overflow: ellipsis; }
.konto-chip small {
  padding: .2rem .38rem; border-radius: 2px; background: color-mix(in srgb, var(--akzent) 22%, transparent);
  color: var(--akzent-hell); font: 700 .64rem/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase;
}

/* Hintergrundmusik an/aus (musik.js); „wartet“: an, aber noch keine Bedienung der Seite */
.musik-knopf {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linie-stark); background: rgba(0, 0, 0, .4);
  color: var(--text-leise); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.musik-knopf:hover { border-color: var(--akzent); color: var(--text-hell); background: rgba(70, 168, 255, .1); }
.musik-knopf svg { width: 20px; height: 20px; }
.musik-knopf .an, .musik-knopf[aria-pressed="true"] .aus { display: none; }
.musik-knopf[aria-pressed="true"] .an { display: block; }
.musik-knopf[aria-pressed="true"] { color: var(--akzent-hell); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.musik-knopf.wartet { animation: musik-wartet 2.4s ease-in-out infinite; }
@keyframes musik-wartet { 0%, 100% { box-shadow: 0 0 0 0 rgba(70, 168, 255, 0); } 50% { box-shadow: 0 0 0 5px rgba(70, 168, 255, .2); } }
.ohne-js .musik-knopf { display: none; }

/* -------------------------------------------------- Knöpfe und Formulare */
.knopf-klein { padding: .62rem 1rem; font-size: .9rem; }
.knopf-klein:not(.knopf-rand) { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.knopf-gefahr { background: var(--gefahr); color: #fff; }
.knopf-gefahr:hover { background: #f26b55; color: #fff; }
.knopf-rand.knopf-gefahr { background: transparent; color: #ffb3a6; border-color: color-mix(in srgb, var(--gefahr) 60%, transparent); }
.knopf-rand.knopf-gefahr:hover { background: rgba(224, 83, 61, .14); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.steam-knopf {
  display: inline-flex; align-items: center; gap: .65rem; padding: .85rem 1.25rem; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #2a475e, #1b2838); border: 1px solid #3d6c8d;
  color: #e6f1f8; font: 600 1rem/1 var(--schrift); text-decoration: none; white-space: nowrap;
  transition: border-color .2s, filter .2s;
}
.steam-knopf:hover { border-color: #66c0f4; filter: brightness(1.12); color: #fff; }
.steam-knopf svg { width: 22px; height: 22px; flex: none; }
.steam-knopf:disabled { opacity: .6; cursor: wait; }
.formular { display: grid; gap: .9rem; }
.formular label, .feld-label {
  display: grid; gap: .4rem; font: 600 .72rem/1.2 var(--schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise);
}
.eingabe {
  width: 100%; padding: .65rem .75rem; color-scheme: dark;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--linie-stark); border-radius: 2px;
  color: var(--text-hell); font: 500 .95rem/1.35 var(--schrift); letter-spacing: normal; text-transform: none;
}
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 25%, transparent); }
textarea.eingabe { resize: vertical; min-height: 5.4rem; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.zaehler { justify-self: end; margin-top: -.5rem; font: 500 .78rem/1 var(--mono); color: var(--text-leise); }
.zaehler.voll { color: var(--glut); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.schalter { position: relative; display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; color: var(--text-hell); font-size: .98rem; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter span {
  position: relative; width: 46px; height: 26px; border-radius: 999px; flex: none;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--linie-stark); transition: background-color .2s, border-color .2s;
}
.schalter span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-leise); transition: translate .2s, background-color .2s;
}
.schalter input:checked + span { background: color-mix(in srgb, var(--online) 45%, #000); border-color: var(--online); }
.schalter input:checked + span::after { translate: 20px 0; background: #fff; }
.schalter input:focus-visible + span { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
.schalter input:disabled + span { opacity: .5; }
.abzeichen {
  display: inline-block; padding: .24rem .5rem; border: 1px solid color-mix(in srgb, var(--akzent) 50%, transparent);
  color: var(--akzent-hell); font: 700 .68rem/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.abzeichen.warn { border-color: color-mix(in srgb, var(--glut) 55%, transparent); color: var(--glut); }
.abzeichen.rot { border-color: color-mix(in srgb, var(--gefahr) 60%, transparent); color: #ffb3a6; }
.gefahrzone { border-color: color-mix(in srgb, var(--gefahr) 45%, transparent); background: linear-gradient(180deg, rgba(224, 83, 61, .08), var(--flaeche)); }
.gefahrzone h2, .gefahrzone h3 { color: #ffd0c7; }
.merke.fehler { border-left-color: var(--gefahr); background: rgba(224, 83, 61, .08); }

/* ------------------------------------------------------------- Kontoseite */
.konto-stapel { display: grid; gap: 1.2rem; }
.konto-stapel .feld h2 { margin: 0 0 .7rem; color: var(--text-hell); font: 700 1.7rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.konto-stapel .feld p { margin: 0 0 1rem; }
.konto-stapel .feld p:last-child { margin-bottom: 0; }
.konto-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; margin-bottom: 1rem; }
.konto-bild {
  width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--akzent-hell), var(--akzent-tief)); color: #06101c; font: 700 1.9rem/1 var(--display);
  box-shadow: 0 0 22px -6px var(--akzent);
}
.konto-kopf h2 { margin: 0 0 .35rem !important; }
.konto-kopf .daten { gap: .3rem 1rem; }

/* -------------------------------------------------------------- Admin-Bereich */
.admin-band { position: relative; padding: calc(var(--kopf-hoehe) + 2.6rem) 0 2.2rem; border-bottom: 1px solid var(--linie); }
.admin-band h1 { margin: 0; color: var(--text-hell); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.admin-band .einleitung { margin-top: .8rem; }
.lampen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.lampe { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; align-items: center; padding: .9rem 1rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--linie); }
.lampe .punkt { grid-row: span 2; }
.lampe b { color: var(--text-hell); font-size: .95rem; }
.lampe small { color: var(--text-leise); font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.serverzeile { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 1.2rem 0 0; font: 500 .88rem/1.4 var(--mono); color: var(--text); }
.serverzeile span::before { content: "// "; color: var(--akzent); }
.serverzeile b { color: var(--text-hell); font-weight: 600; }
.abschnitt.eng { padding: 3.2rem 0; }
.admin-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.admin-gitter .breit { grid-column: 1 / -1; }
.admin-gitter > * { min-width: 0; }   /* sonst wächst die Spalte mit der breitesten Tabelle mit */
.feld-kopf { margin: 0 0 1rem; color: var(--text-hell); font: 700 1.5rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.feld > .klein:last-child { margin-bottom: 0; }
/* position: relative, damit auch absolut gesetzte Teile (.nur-vorlesen im Tabellenkopf) mit scrollen
   statt die Seite auf dem Handy zu verbreitern */
.tabelle-huelle { position: relative; overflow-x: auto; margin: 0 -.2rem; padding: 0 .2rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th, .tabelle td { padding: .55rem .6rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linie); }
.tabelle th { font: 600 .7rem/1.2 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); border-bottom-color: var(--linie-stark); white-space: nowrap; }
.tabelle td { color: var(--text-hell); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabelle td.leise { color: var(--text-leise); }
.tabelle td.zeit { white-space: nowrap; }
.tabelle tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.tabelle .leer td { color: var(--text-leise); text-align: center; padding: 1.2rem; }
.tabelle code { font-size: .8rem; color: var(--text); }
.tabelle .abzeichen { margin-left: .4rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
/* Tabellen mit Knöpfen bleiben einzeilig und scrollen auf schmalen Schirmen seitlich */
.tabelle .aktionen { flex-wrap: nowrap; }
.tabelle.eng td { white-space: nowrap; }
.tabelle.eng .leer td { white-space: normal; }
.mini-knopf {
  padding: .34rem .56rem; border: 1px solid var(--linie-stark); border-radius: 2px; cursor: pointer;
  background: rgba(255, 255, 255, .03); color: var(--text); font: 600 .76rem/1 var(--schrift); white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.mini-knopf:hover { border-color: var(--akzent); color: var(--text-hell); background: rgba(70, 168, 255, .1); }
.mini-knopf.gefahr { border-color: color-mix(in srgb, var(--gefahr) 55%, transparent); color: #ffb3a6; }
.mini-knopf.gefahr:hover { background: rgba(224, 83, 61, .16); color: #ffd0c7; }
.mini-knopf:disabled { opacity: .45; cursor: not-allowed; }
.fraktion-punkt { display: inline-block; width: 8px; height: 8px; margin-right: .45rem; border-radius: 50%; background: var(--fraktion, var(--text-leise)); box-shadow: 0 0 6px var(--fraktion, transparent); }
.status-chip {
  display: inline-block; padding: .22rem .45rem; border-radius: 2px; white-space: nowrap;
  background: rgba(255, 255, 255, .06); color: var(--text-leise); font: 700 .66rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase;
}
.status-chip.erledigt { background: color-mix(in srgb, var(--online) 18%, transparent); color: var(--online); }
.status-chip.fehler, .status-chip.verfallen { background: color-mix(in srgb, var(--gefahr) 20%, transparent); color: #ffb3a6; }
.status-chip.offen, .status-chip.laeuft { background: color-mix(in srgb, var(--akzent) 20%, transparent); color: var(--akzent-hell); }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; max-height: 28rem; overflow-y: auto; }
.verlauf li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .25rem .8rem; align-items: baseline;
  padding: .55rem .75rem; background: rgba(0, 0, 0, .22); border-left: 3px solid var(--linie-stark); font-size: .9rem;
}
.verlauf li.erledigt { border-left-color: var(--online); }
.verlauf li.fehler, .verlauf li.verfallen { border-left-color: var(--gefahr); }
.verlauf li.offen, .verlauf li.laeuft { border-left-color: var(--akzent); }
.verlauf li.leer { grid-template-columns: 1fr; color: var(--text-leise); border-left-color: transparent; }
.verlauf time { font: 500 .8rem/1 var(--mono); color: var(--text-leise); white-space: nowrap; }
.verlauf b { color: var(--text-hell); font-weight: 600; }
.verlauf .antwort { grid-column: 2 / -1; color: var(--text-leise); font-size: .84rem; overflow-wrap: anywhere; }
.liste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.liste li { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .7rem .8rem; background: rgba(0, 0, 0, .25); border-left: 3px solid var(--akzent); }
.liste li b { color: var(--text-hell); }
.liste li small { display: block; color: var(--text-leise); font-size: .84rem; overflow-wrap: anywhere; }
.liste li.still { border-left-color: var(--linie-stark); }
.liste li.leer { grid-template-columns: 1fr; color: var(--text-leise); border-left-color: transparent; }
/* Kartenwahl: Zusätze (Nur Infanterie, Hardcore) als Haken in einer Zeile */
.modifikatoren { margin: 0; padding: 0; border: 0; min-width: 0; }
.modifikatoren legend { padding: 0; margin-bottom: .4rem; font: 600 .72rem/1.2 var(--schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.modifikatoren [data-modifikator-liste] { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.formular .haken { display: inline-flex; align-items: center; gap: .45rem; font: 500 .95rem/1.3 var(--schrift); letter-spacing: normal; text-transform: none; color: var(--text-hell); cursor: pointer; }
.haken input { width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
/* Rotation: Schalter und Reihenfolge über der Tabelle */
.rotation-kopf { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.6rem; margin-bottom: 1rem; }
.rotation-kopf .feld-label { min-width: 12rem; }
.rotation-kopf .klein { margin: 0; flex: 1 1 14rem; }
.tabelle td.nr { font-family: var(--mono); color: var(--text-leise); }
.tabelle tr.laeuft td { background: color-mix(in srgb, var(--online) 6%, transparent); }
/* Einstellungen: Raster, Abzeichen „wann gilt es“, geänderte Felder markiert */
.einstellungen-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.1rem; align-items: start; }
.einstellungen-gitter > * > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.einstellungen-gitter i {
  display: inline-block; padding: .16rem .38rem; border: 1px solid var(--linie-stark); border-radius: 2px; font: 700 .6rem/1 var(--schrift);
  font-style: normal; letter-spacing: .1em; color: var(--text-leise);
}
.einstellungen-gitter i:empty { display: none; }
.einstellungen-gitter i.sofort { border-color: color-mix(in srgb, var(--online) 55%, transparent); color: var(--online); }
.einstellungen-gitter i.spaeter { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); color: var(--akzent-hell); }
.einstellungen-gitter i.fest { border-color: color-mix(in srgb, var(--gefahr) 60%, transparent); color: #ffb3a6; }
.einstellungen-gitter small { color: var(--text-leise); font: 500 .8rem/1.35 var(--schrift); letter-spacing: normal; text-transform: none; }
.eingabe.geaendert { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
.eingabe:disabled { opacity: .55; cursor: not-allowed; }
/* Schalter im Formular: nicht wie die Feldbeschriftungen (Großschrift, Raster) */
.formular .schalter { display: inline-flex; gap: .6rem; margin-top: .55rem; font: 500 .92rem/1.3 var(--schrift); letter-spacing: normal; text-transform: none; color: var(--text-hell); }
.klein-schalter span { width: 40px; height: 22px; }
.klein-schalter span::after { width: 14px; height: 14px; }
.klein-schalter input:checked + span::after { translate: 18px 0; }
/* Was der Server kann */
.faehig-liste { list-style: none; margin: 1rem 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1.2rem; }
.faehig-liste li { display: flex; align-items: baseline; gap: .55rem; font-size: .92rem; color: var(--text-hell); }
.faehig-liste li::before { content: "✓"; flex: none; font: 700 .9rem/1 var(--mono); color: var(--online); }
.faehig-liste li.nein { color: var(--text-leise); }
.faehig-liste li.nein::before { content: "✕"; color: var(--gefahr); }
.faehig-liste li.offen::before { content: "?"; color: var(--text-leise); }
.faehig-liste li.leer { grid-column: 1 / -1; color: var(--text-leise); }
.faehig-liste li.leer::before { content: none; }
[data-braucht]:disabled { opacity: .45; cursor: not-allowed; }
.zahlenzeile { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin: 0 0 1.1rem; font: 500 .9rem/1.4 var(--mono); }
.zahlenzeile b { color: var(--text-hell); }
.trenner { height: 1px; margin: 1.3rem 0; background: var(--linie); border: 0; }
.mehr-knopf { margin-top: 1rem; }
/* links und rechts verankert: kann die Seite auf dem Handy nie breiter machen */
.meldungen { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; display: grid; justify-items: end; gap: .5rem; pointer-events: none; }
.meldung {
  width: 100%; max-width: 26rem; padding: .8rem 1rem; pointer-events: auto;
  background: var(--flaeche-hoch); border: 1px solid var(--linie-stark); border-left: 3px solid var(--akzent);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .9); color: var(--text-hell); font-size: .92rem;
  animation: chip-rein .3s ease-out;
}
.meldung.gut { border-left-color: var(--online); }
.meldung.schlecht { border-left-color: var(--gefahr); }
dialog.frage {
  width: min(31rem, calc(100% - 2rem)); padding: 1.4rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, var(--flaeche-hoch), var(--flaeche)); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: 3px; box-shadow: 0 30px 80px -20px #000;
}
dialog.frage::backdrop { background: rgba(3, 6, 10, .74); backdrop-filter: blur(3px); }
dialog.frage h2 { margin: 0 0 .6rem; color: var(--text-hell); font: 700 1.55rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
dialog.frage p { margin: 0 0 1rem; }
dialog.frage .formular { margin-top: .4rem; }

/* ------------------------------------------------- Admin A2: Reiter usw. */
/* Kennzahlen im Kopf (wie Warcons Kopfzeile) */
.kennzahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.kennzahlen > div { padding: .7rem .9rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--linie); min-width: 0; }
.kennzahlen small { display: block; font: 600 .66rem/1.2 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.kennzahlen b { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; color: var(--text-hell); font: 600 1.05rem/1.25 var(--mono); overflow-wrap: anywhere; }
.kennzahlen b > span { display: inline-flex; align-items: center; gap: .45rem; }
.kennzahlen b.warn { color: var(--glut); }
.kennzahlen b.schlecht { color: #ffb3a6; }
.kennzahlen b.leise { color: var(--text-leise); }
.punkt.rot { background: var(--gefahr); box-shadow: 0 0 8px var(--gefahr); }
.code-knopf { padding: 0; border: 0; background: none; color: inherit; cursor: copy; font: inherit; text-align: left; }
.code-knopf code { font-size: .78rem; color: var(--akzent-hell); overflow-wrap: anywhere; }
.code-knopf:hover code, .code-knopf:focus-visible code { color: var(--eis); text-decoration: underline; }

/* Reiterleiste: bleibt unter dem Kopf stehen */
.reiter { position: sticky; top: var(--kopf-hoehe); z-index: 20; background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linie); }
.reiter-innen { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: thin; }
.reiter a {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .85rem 1rem .75rem; border-bottom: 2px solid transparent;
  color: var(--text-leise); font: 600 .9rem/1 var(--schrift); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.reiter a:hover { color: var(--text-hell); }
.reiter a[aria-current="page"] { color: var(--text-hell); border-bottom-color: var(--akzent); }
.reiter-zahl { padding: .12rem .4rem; border-radius: 2px; background: color-mix(in srgb, var(--online) 20%, transparent); color: var(--online); font: 600 .72rem/1 var(--mono); }
.reiter-zahl:empty { display: none; }
.tafel, .tafel [id] { scroll-margin-top: calc(var(--kopf-hoehe) + 3.6rem); }

/* Umschalter (Online / Teams / frühere Spieler; Diagramm / Tabelle) */
.umschalter { display: inline-flex; flex-wrap: wrap; margin: 0 0 1rem; border: 1px solid var(--linie-stark); }
.umschalter button { padding: .6rem 1rem; border: 0; background: transparent; color: var(--text-leise); font: 600 .88rem/1 var(--schrift); cursor: pointer; }
.umschalter button + button { border-left: 1px solid var(--linie-stark); }
.umschalter button[aria-pressed="true"] { background: color-mix(in srgb, var(--akzent) 22%, transparent); color: var(--text-hell); }
.umschalter button:hover { color: var(--text-hell); }
.klein-umschalter { margin: 0 0 0 auto; }
.klein-umschalter button { padding: .4rem .7rem; font-size: .8rem; }

/* Werkzeugleiste über Tabellen */
.werkzeugleiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-bottom: 1rem; }
.werkzeugleiste .eingabe { width: auto; }
.werkzeugleiste .suche { flex: 1 1 16rem; min-width: 12rem; }
.werkzeugleiste .klein { margin: 0; }
.trenner-flex { flex: 1 1 0; }
.klein-label { display: inline-flex; align-items: center; gap: .45rem; font: 500 .85rem/1 var(--schrift); color: var(--text-leise); }
.feld-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .9rem; }
.feld-zeile .feld-kopf { margin: 0; }
.feld-zeile .klein { margin: 0; }
.abstand-oben { margin-top: 1rem; }
.mono { font-family: var(--mono); font-size: .84rem; overflow-wrap: anywhere; }
.tabelle td.mono { white-space: normal; }

/* sortierbare Tabellenköpfe */
.sortierbar th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sortierbar th button:hover, .sortierbar th button:focus-visible { color: var(--text-hell); }
.sortierbar th[aria-sort] button { color: var(--akzent-hell); }
.sortierbar th[aria-sort="ascending"] button::after { content: " ▲"; }
.sortierbar th[aria-sort="descending"] button::after { content: " ▼"; }
.tabelle th.zahl button { text-align: right; }

/* Spielerzellen: Name (Link zur Akte) und SteamID darunter */
.tabelle td.spieler-zelle { white-space: normal; min-width: 11rem; }
.spieler-zelle > a, .spieler-zelle > span { color: var(--text-hell); font-weight: 600; }
.spieler-zelle small { display: block; color: var(--text-leise); font: 500 .74rem/1.35 var(--mono); overflow-wrap: anywhere; }
.spieler-zelle small.feed-namen, .spieler-zelle small:not(:last-child) { font-family: var(--schrift); }
.spieler-zelle mark { background: color-mix(in srgb, var(--glut) 35%, transparent); color: var(--text-hell); padding: 0 .1rem; }
.tabelle td.merkmale { white-space: normal; }
.tabelle td.merkmale .abzeichen { margin: .1rem .25rem .1rem 0; }
.haken-zelle input, .tabelle th input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
.tabelle td.warn { color: var(--glut); }
.abzeichen.info { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); color: var(--akzent-hell); }
.abzeichen.gut { border-color: color-mix(in srgb, var(--online) 55%, transparent); color: var(--online); }
.tabelle tr.teamkill td { background: color-mix(in srgb, var(--glut) 7%, transparent); }
.tabelle tr.still td { color: var(--text-leise); }
.kennung { display: block; margin-top: .2rem; color: var(--text-leise); font: 500 .74rem/1.2 var(--mono); }
.tabelle td small { display: block; color: var(--text-leise); font-size: .78rem; }

/* Knöpfe in Reihen (Filter, Schnellgründe, Platzhalter) */
.filterknoepfe, .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: baseline; gap: .4rem; padding: .35rem .65rem; border: 1px solid var(--linie-stark); border-radius: 2px;
  background: rgba(0, 0, 0, .25); color: var(--text); font: 500 .84rem/1.2 var(--schrift); cursor: pointer;
}
.chip small { color: var(--text-leise); font: 600 .7rem/1 var(--mono); }
.chip:hover { border-color: var(--akzent); color: var(--text-hell); }
.chip[aria-pressed="true"] { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 20%, transparent); color: var(--text-hell); }
.klein-chip { padding: .2rem .45rem; font: 500 .76rem/1.2 var(--mono); }

/* Geld im Spiel */
.legende { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.legende-knopf { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--linie); background: rgba(0, 0, 0, .2); color: var(--text-hell); font: 500 .82rem/1.2 var(--schrift); cursor: pointer; }
.legende-knopf b { font: 600 .8rem/1 var(--mono); color: var(--text); }
.legende-knopf[aria-pressed="false"] { opacity: .45; }
.legende-knopf .fraktion-punkt { margin-right: 0; }
.diagramm { min-height: 6rem; }
.diagramm svg { display: block; width: 100%; height: auto; }
.diagramm .achse-linie { stroke: rgba(170, 200, 230, .10); stroke-width: 1; }
.diagramm .achse-text { fill: var(--text-leise); font: 500 11px var(--mono); }
.diagramm .zeiger { stroke: var(--akzent-hell); stroke-width: 1; stroke-dasharray: 3 3; }
.diagramm .zeiger-text { fill: var(--text-hell); font: 600 11px var(--schrift); paint-order: stroke; stroke: var(--grund); stroke-width: 3px; }

/* Teams: eine Spalte je Seite */
.teams-spalten { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 1rem; }
.team-spalte { min-width: 0; padding: .8rem; background: rgba(0, 0, 0, .22); border: 1px solid var(--linie); }
.team-spalte.zu { opacity: .72; border-style: dashed; }
.team-spalte.ziel { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.team-spalte header { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-bottom: .7rem; }
.team-spalte header b { color: var(--text-hell); font: 700 1.15rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.team-zahl { font: 600 1rem/1 var(--mono); color: var(--text-hell); }
.team-zahl small { color: var(--text-leise); font-size: .75rem; }
.klein-haken { margin-left: auto; font: 500 .8rem/1 var(--schrift) !important; color: var(--text-leise) !important; }
.team-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.team-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: .5rem; align-items: center; padding: .45rem .55rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark); cursor: grab;
}
.team-karte.zieht { border-left-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--flaeche)); }
.team-karte[draggable="false"] { cursor: default; }
.griff { color: var(--text-leise); font: 700 .8rem/1 var(--mono); letter-spacing: -.1em; }
.karte-name { min-width: 0; color: var(--text-hell); font-size: .9rem; overflow-wrap: anywhere; }
.karte-name small { display: block; color: var(--text-leise); font: 500 .74rem/1.3 var(--mono); }
.karte-name .von { font-family: var(--schrift); }
.karte-name .abzeichen { margin-left: .35rem; }
.mini-auswahl { width: auto; max-width: 8.5rem; padding: .25rem .4rem; font-size: .8rem; }
.teams-ohne { margin-top: 1rem; padding: .8rem; border: 1px dashed var(--linie-stark); }

/* Akte */
.zurueck-link { display: inline-block; margin-bottom: .8rem; font: 600 .88rem/1 var(--schrift); text-decoration: none; }
.akte-kopf { margin-bottom: 1.2rem; }
.akte-kopf h2 { margin: 0; color: var(--text-hell); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.05; overflow-wrap: anywhere; }
.akte-abzeichen { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.akte-abzeichen:empty { display: none; }
.akte-kopf .klein { margin: .3rem 0 0; }
.akte-gitter { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.2rem; align-items: start; }
/* eine Spalte, die nie breiter wird als ihr Platz (sonst schiebt das Kachelraster die Seite auf dem Handy breit) */
.akte-haupt, .akte-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; min-width: 0; }
.akte-seite .formular + .formular { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.werkzeugleiste .haken { display: inline-flex; align-items: center; gap: .45rem; font: 500 .9rem/1.3 var(--schrift); color: var(--text-hell); cursor: pointer; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.akte-haupt > .kacheln { margin-bottom: 0; }
.kachel { padding: .65rem .8rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--linie); min-width: 0; }
.kachel small { display: block; font: 600 .64rem/1.2 var(--schrift); letter-spacing: .13em; text-transform: uppercase; color: var(--text-leise); }
.kachel b { display: block; margin-top: .3rem; color: var(--text-hell); font: 600 1.05rem/1.25 var(--mono); overflow-wrap: anywhere; }
.akte-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: .4rem 0 1rem; }
.akte-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.balken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.balken-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; font-size: .88rem; }
.balken-liste b { font: 600 .84rem/1.2 var(--mono); color: var(--text-hell); }
.balken-liste i { grid-column: 1 / -1; display: block; height: 4px; background: rgba(255, 255, 255, .06); }
.balken-liste i::after { content: ""; display: block; height: 100%; width: var(--anteil, 0%); background: var(--akzent); }
.kurz-liste { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .9rem; }
.notizen .notiz-text { margin: 0 0 .25rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-hell); font-size: .92rem; }
.tabelle td.ergebnis.sieg { color: var(--online); }
.tabelle td.ergebnis.niederlage { color: #ffb3a6; }
.tabelle td.ergebnis.laeuft, .tabelle td.ergebnis.abgebrochen { color: var(--text-leise); }

/* Bann-Fenster und Einstellungen der Banns */
dialog.bann-dialog { width: min(40rem, calc(100% - 2rem)); }
.vorschau-kasten { padding: .7rem .9rem; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--gefahr); }
.vorschau-kasten small { display: block; font: 600 .64rem/1.2 var(--schrift); letter-spacing: .13em; text-transform: uppercase; color: var(--text-leise); }
.vorschau { margin: .3rem 0 0; color: var(--text-hell); font: 500 .9rem/1.4 var(--mono); overflow-wrap: anywhere; }
.vorschau:empty::before { content: "–"; color: var(--text-leise); }
.grund-zeile { grid-template-columns: 8rem minmax(0, 1fr) 8.5rem auto !important; border-left-color: var(--linie-stark) !important; }
.grund-zeile .eingabe { padding: .45rem .55rem; font-size: .88rem; }
dialog.teams-dialog { width: min(36rem, calc(100% - 2rem)); }
dialog.teams-dialog p b { color: var(--text-hell); }

@media (max-width: 980px) {
  .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .akte-gitter { grid-template-columns: minmax(0, 1fr); }
  .akte-drei { grid-template-columns: minmax(0, 1fr); }
  .teams-spalten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .akte-zwei { grid-template-columns: minmax(0, 1fr); }
  .grund-zeile { grid-template-columns: minmax(0, 1fr) auto !important; }
  .grund-zeile .eingabe[name="grund"], .grund-zeile select { grid-column: 1 / -1; }
  .reiter a { padding: .75rem .7rem .65rem; font-size: .82rem; }
}

/* ----------------------------------------------------------- Einblenden */
.einblenden { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--verzug, 0s); }
.einblenden.sichtbar { opacity: 1; translate: 0 0; }
.ohne-js .einblenden { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------- Keyframes */
@keyframes kamera { from { scale: 1.03; } to { scale: 1.09; } }
@keyframes auge-an { 0% { opacity: 0; scale: .2; } 55% { opacity: 1; scale: 1.9; } 100% { opacity: .85; scale: 1; } }
@keyframes auge-puls { 0%, 100% { opacity: .72; scale: 1; } 50% { opacity: 1; scale: 1.28; } }
@keyframes blitz { 0%, 84%, 100% { opacity: 0; scale: .15 1; } 88% { opacity: 1; scale: 1 1; } 93% { opacity: 0; scale: 1.2 .6; } }
@keyframes drehen { to { rotate: 360deg; } }
@keyframes einblenden-fx { to { opacity: .85; } }
@keyframes hauch { 0%, 100% { opacity: .08; } 50% { opacity: .5; } }
@keyframes glanz { 0% { background-position: 160% 0; } 38%, 100% { background-position: -60% 0; } }
@keyframes blinken { 0% { opacity: 1; } 10% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flackern { 0%, 100% { opacity: .85; } 38% { opacity: .55; } 40% { opacity: .95; } 72% { opacity: .68; } 74% { opacity: .9; } }
@keyframes nordlicht { 0% { translate: -3% 0; opacity: .5; } 50% { opacity: .95; } 100% { translate: 3% 2%; opacity: .6; } }
@keyframes nebel { from { translate: -7% 0; } to { translate: 7% 0; } }
@keyframes scan { 0% { translate: 0 -60%; opacity: 0; } 4% { opacity: 1; } 40% { translate: 0 60%; opacity: .7; } 41%, 100% { translate: 0 60%; opacity: 0; } }
@keyframes chip-rein { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes blinkschrift { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes atmen { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 22%, transparent), 0 0 12px var(--online); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--online) 8%, transparent), 0 0 18px var(--online); } }
.punkt:not(.aus) { animation: atmen 2.2s ease-in-out infinite; }

/* ------------------------------------------------------------------ Schmal */
/* Mittlere Breite: Kopfzeile mit Menü passt nur ohne den Schriftzug neben dem Wappen (das Wappen führt weiter zur Startseite) */
@media (min-width: 981px) and (max-width: 1240px) {
  .kopf-innen:has(.menue) { gap: .9rem; }
  .menue { gap: .9rem; }
  /* Text nur noch für Vorleseprogramme, nicht weg */
  .kopf-innen:has(.menue) .marke-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 980px) {
  .menue { display: none; }
  .hero { height: auto; aspect-ratio: 1672 / 941; }
  .hero::after { background: linear-gradient(0deg, var(--grund) 1%, transparent 30%); }
  .hero-innen { margin-top: -1rem; }
  .lage-gitter, .lage-zwei, .schritte, .verweis-gitter, .team-gitter, .vorbereitung, .fuss-innen { grid-template-columns: 1fr; }
  .discord { gap: 1.6rem; }
  .discord-zeichen { width: 128px; margin-right: 0; }
  .schritte::before { display: none; }
  .regel-gitter { grid-template-columns: 1fr 1fr; }
  .stufen-leiste { grid-template-columns: 1fr; gap: .4rem; }
  .stufen-leiste li, .stufen-leiste li:first-child, .stufen-leiste li:nth-child(2), .stufen-leiste li:nth-child(3) { clip-path: none; margin-left: 0; padding-left: 1.3rem; }
  .marke { opacity: 1; translate: 0 0; }
  .kopf { background: color-mix(in srgb, var(--grund) 90%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linie); }
  .seite-start main { padding-top: 0; }
  .seite-start .hero { margin-top: var(--kopf-hoehe); }
  .menue ~ .kopf-rechts { margin-left: auto; }
  .admin-gitter { grid-template-columns: minmax(0, 1fr); }
  .lampen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .einstellungen-gitter, .faehig-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  :root { --kopf-hoehe: 62px; }
  body { font-size: 16px; }
  .regel-gitter, .team-karten { grid-template-columns: 1fr; }
  .discord { grid-template-columns: 1fr; }
  .discord-zeichen { display: none; }
  .kopf-innen { gap: .6rem; }
  .zurueck span, .marke-text small { display: none; }
  .marke-text b { font-size: 1.15rem; }
  .gross-zahl { font-size: 4.2rem; }
  .radar { width: 104px; }
  .abschnitt { padding: 3.6rem 0; }
  .daten { grid-template-columns: 1fr; gap: .15rem; }
  .daten dd { margin-bottom: .7rem; }
  .id-chip .chip-titel { display: none; }
  .geist-zeile { grid-template-columns: 1.4rem 1fr 3rem 2.4rem; }
  .geist-zeile span:last-child { display: none; }
  .fristen td:last-child { white-space: normal; }
  .konto-chip { padding: .28rem; }
  /* Text nur noch für Vorleseprogramme, nicht weg */
  .konto-chip span, .konto-chip small { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lampen, .reihe, .einstellungen-gitter, .faehig-liste { grid-template-columns: minmax(0, 1fr); }
  /* Knöpfe in Tabellen auf dem Handy größer und weiter auseinander (↑, ↓, Hinspringen liegen nebeneinander) */
  .tabelle .mini-knopf { padding: .55rem .7rem; font-size: .82rem; }
  .tabelle .aktionen { gap: .45rem; }
  .seite-admin .feld, .seite-konto .feld { padding: 1.2rem 1.1rem; }
}

/* Ganz schmal: Die Spielerzahl steht im Kopfbild, im Kopf bleibt Platz für den Kontoknopf */
@media (max-width: 440px) {
  .kopf .live-pille { display: none; }
}

/* ---------------------------------------- Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .auge { opacity: .85; }
  .blitz, .scan, .glanz, .ring { display: none; }
  .einblenden { opacity: 1; translate: 0 0; }
  .balken span { scale: 1 1; }
}