/* ===========================================================================
   public/bestand.css  -  ALTBESTAND DER BEREICHE (frueher <style> in index.html)
   ---------------------------------------------------------------------------
   Stand vor dem Sportportal-Look. Liegt jetzt als eigene Datei mit ?v=AUTO
   (ein Jahr im Browser gespeichert) statt eingebettet: index.html wird bei
   jedem Aufruf neu geladen (no-cache) - vorher kamen damit jedes Mal 150 KB
   Stil mit. Regeln, deren Klassen kein Skript mehr schreibt, sind entfernt
   (werkzeug/css_tot.js, geprueft mit werkzeug/stil_abdruck.js: gleiche
   berechnete Stile in allen Bereichen und Fenstern).
   Reihenfolge: bestand.css -> look.css -> portal.css -> portal/<bereich>.css
   =========================================================================== */

/* =========================================================================
   TuS ISOMATTE · HUB
   Farbwelt aus dem Wappen: Waldnacht, Karbon, gebuerstetes Silber,
   Neongruen, Lagerfeuer-Gold.
   ========================================================================= */
:root{
  /* ===================================================================
     FARBWELT - Rot-Weiss, wie in Köln und Düsseldorf
     -------------------------------------------------------------------
     Die MARKE ist gruen-gold wie das Wappen. Die STATUSFARBEN bleiben getrennt davon:
     Grün heisst Zusage, Gelb Vielleicht, Rot Absage. Würde die Hausfarbe
     ebenfalls Rot sein, könnte man eine Absage nicht mehr von einer
     Überschrift unterscheiden - deshalb sind es zwei getrennte Sätze.
     =================================================================== */

  /* Grund - Waldnacht wie im Wappen und im Discord-Bot (_farben.py) */
  --nacht:#050C09;
  --karbon:#0C1712;
  --karbon-hoch:#122019;
  --linie:rgba(214,232,220,.10);
  --linie-hell:rgba(214,232,220,.20);

  /* Marke - die Farben des Wappens.
     Die Variablen heissen aus historischen Gruenden noch --rot*, sie
     sind aber die HAUSFARBE. Umbenennen haette hunderte Stellen
     beruehrt; so bleibt alles, was die Hausfarbe nutzt, automatisch
     richtig. Echtes Rot gibt es nur noch als Status (--absage) und als
     Farbe der Manager-Rolle. */
  /* RASEN UND KREIDE.
     Frueher stand hier #1FE07A - eine Esports-Neonfarbe. Im Wappen des
     Vereins kommt sie praktisch nicht vor: von 91.582 sichtbaren
     Bildpunkten liegen 0,02 % in ihrer Naehe, dagegen 14,6 % in warmen
     Erdtoenen (Leder, Holz, Lagerfeuer, Bier).
     Gruen ist ab jetzt DER PLATZ - eine Flaeche, die traegt. Die MARKE
     ist die Kreide (--kreide): der hellste Punkt jeder Seite ist eine
     weisse Linie, kein Leuchten. */
  --rot:#2FA05E;            /* Rasengruen - der Platz, nicht die Marke */
  --rot-tief:#17693A;       /* tiefer Rasen, Maehstreifen, Flaechen */
  --rot-hell:#7CCB92;       /* frischer Halm - Schrift und Hover */
  --auf-marke:#04140A;      /* Schrift AUF gruener Flaeche (5,94:1) */

  /* Die neue Marke: die Linie auf dem Platz. 17,78:1 auf dem Grund -
     heller als das Neon je war, und ganz ohne Schein. */
  --kreide:#F2F4EA;
  /* Leder: alles, was eine Handlung ausloest. Damit trennt sich
     "hier kann man klicken" von "hier stehst du gerade" - heute sind
     beide dieselbe Vollflaeche. */
  --leder:#B0764A;
  --leder-tief:#8A5230;
  /* Das Neon bleibt - aber mit GENAU EINER Bedeutung: wir senden gerade. */
  --live:#1FE07A;
  --weiss:#EEF1EA;          /* Zeltleinen, hellste Schrift */
  --silber:#C6CED6;         /* gebuerstetes Metall des Schildes */
  --silber-matt:#8A959E;
  --gold:#C9A227;           /* Lagerfeuer, Auszeichnungen, Hall of Fame */

  /* Alte Namen zeigen auf die neuen Werte. */
  --gruen:var(--rot);
  --gruen-tief:var(--rot-tief);
  /* --zelt stand auf var(--weiss), war also reines Weiss - die Sandfarbe
     gab es im Hub gar nicht, obwohl der Bot sie seit jeher unter
     demselben Namen fuehrt (_farben.py: ZELT = 0xE8E3D3). */
  --zelt:#E8E3D3;

  /* ZUSTÄNDE - bleiben eigenständig, sonst verliert man die Bedeutung */
  --zusage:#33C06A;         /* Zusage, Sieg */
  --vielleicht:#D4A62A;     /* Vielleicht, Remis */
  --absage:#E0455E;         /* Absage, Niederlage */
  --stahl:#5FA8C7;          /* Backup */
  --lila:#9B6DFF;           /* Urlaub */
  --glut:#E8763A;
  --rasen:#1F7A46;          /* Spielfeld - bleibt grün, ein Platz ist grün */
  --wappen:url('/images/TuS_Isomatte_512.webp');

  --alarm:var(--absage);

  /* SCHRIFTEN
     Archivo für Überschriften: breit genug, um bei grossen Graden zu
     tragen, ohne zu quetschen. Oswald nur für Kleinkram wie
     Navigation und Schilder - dort ist Enge ein Vorteil, in Überschriften
     wirkt sie billig. Inter für Fliesstext, JetBrains Mono für Zahlen. */
  --anzeige:'Archivo',system-ui,sans-serif;
  /* Oswald statt Oswald: gleiche Enge, aber deutlich mehr
     Strichstärke. Saira wirkte auf dunklem Grund ausgewaschen - dünne
     helle Schrift auf Schwarz verliert immer an Kontrast. */
  --eng:'Oswald','Archivo',system-ui,sans-serif;
  --text:'Inter',system-ui,sans-serif;
  --zahl:'JetBrains Mono',monospace;

  /* GRÖSSENVERHÄLTNIS - eine Leiter statt frei gewählter Werte.
     Vorher stand an jeder Stelle eine eigene Zahl, dadurch gab es keine
     erkennbare Ordnung zwischen den Ebenen. */
  --t1:clamp(2.1rem,5vw,3.4rem);   /* Seitentitel */
  --t2:clamp(1.5rem,3.4vw,2.2rem); /* grosse Karte */
  --t3:1.18rem;                    /* Abschnitt */
  --t4:1rem;                       /* Karte */
  --tk:.9375rem;                   /* Fliesstext */
  --tw:.8125rem;                   /* klein */
  --ts:.6875rem;                   /* Schilder */

  /* ABSTÄNDE UND RUNDUNGEN - ebenfalls als feste Leiter */
  --a1:6px; --a2:10px; --a3:16px; --a4:24px; --a5:36px; --a6:56px;
  --r1:8px; --r2:12px; --r3:18px; --r4:26px;
  --schatten:0 14px 40px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--nacht);
  color:var(--silber);
  font-family:var(--text);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Karbon-Gewebe wie auf der Wappenplatte - sehr zurueckhaltend */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 4px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.20) 0 2px,transparent 2px 4px);
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:4px}
.weg{display:none!important}

/* ANMELDUNG und GERUEST (Kopfzeile, Leisten, Seitenkopf, Fusszeile, "im Hub")
   stehen NICHT mehr hier, sondern vollstaendig in /portal.css - eine Quelle
   statt zweier, die sich gegenseitig mit !important ueberstimmen. */
.platte{background:linear-gradient(180deg,var(--karbon-hoch) 0%,var(--karbon) 60%);
  border:1px solid var(--linie);border-radius:var(--r3);padding:var(--a4);
  box-shadow:var(--schatten)}

.baustelle{text-align:center;padding:var(--a6) var(--a4);color:var(--silber-matt);
  font-size:var(--tk);line-height:1.6}
.baustelle b{display:block;font-family:var(--anzeige);font-weight:700;
  font-size:var(--t3);letter-spacing:.01em;color:var(--weiss);margin-bottom:10px}

.wert{font-family:var(--zahl);font-size:1.9rem;color:var(--zelt);line-height:1}

/* ============================ TERMINE ================================== */
.t-gross{display:grid;grid-template-columns:1fr auto;gap:26px;
  background:linear-gradient(150deg,var(--karbon-hoch),var(--karbon));
  border:1px solid var(--linie);border-left:3px solid var(--f,var(--gruen));
  border-radius:16px;padding:26px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.t-gross::after{content:"";position:absolute;top:-40%;right:-10%;width:320px;height:320px;
  background:radial-gradient(circle,var(--f,var(--gruen)),transparent 68%);
  opacity:.07;pointer-events:none}

.t-titel{font-family:var(--anzeige);font-weight:900;font-size:clamp(1.7rem,4.5vw,2.6rem);
  line-height:1;letter-spacing:.02em;color:var(--zelt);text-transform:uppercase;margin:8px 0 12px}

.t-zeit{font-family:var(--zahl);font-size:.78rem;color:var(--silber-matt)}

.z-bu{color:var(--stahl);border-color:color-mix(in srgb,var(--stahl) 35%,transparent)!important;
  background:color-mix(in srgb,var(--stahl) 8%,transparent)}

  

.t-z{padding:9px 18px;border-radius:9px;border:1px solid var(--linie-hell);
  font-family:var(--anzeige);font-weight:700;font-size:.98rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--silber-matt);transition:all .16s}
.t-z:hover{color:var(--zelt);border-color:var(--silber-matt)}

.t-z:disabled{opacity:.5}

.t-leiste{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:16px}
.t-filter{display:flex;gap:4px;background:var(--karbon);padding:4px;border-radius:10px;
  border:1px solid var(--linie)}
.t-f{padding:7px 16px;border-radius:7px;font-family:var(--anzeige);font-weight:700;
  font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--silber-matt)}
.t-f.an{background:rgba(47,160,94,0.12);color:var(--gruen)}
.t-werkzeuge{display:flex;gap:8px;flex-wrap:wrap}
.t-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r1);border:1px solid var(--linie-hell);
  background:var(--karbon);color:var(--silber);
  font-family:var(--eng);font-weight:600;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;transition:all .15s}
.t-knopf:hover{color:var(--weiss);border-color:var(--silber-matt);
  background:var(--karbon-hoch)}
/* HANDLUNG = LEDER, siehe portal.css bei .p-knopf.haupt.
   Gruen ist der Platz; was etwas ausloest, ist Leder. */
.t-knopf.haupt{background:var(--leder);border-color:var(--leder);color:var(--auf-marke)}
.t-knopf.haupt:hover{background:#C4874F;border-color:#C4874F}
.t-knopf.gold{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.t-knopf.gold:hover{filter:brightness(1.12)}
.t-knopf.warn{color:var(--absage);
  border-color:color-mix(in srgb,var(--absage) 35%,transparent)}
.t-knopf.warn:hover{background:color-mix(in srgb,var(--absage) 14%,transparent);
  color:var(--absage)}
.t-knopf:disabled{opacity:.45;cursor:not-allowed}
/* Zurückhaltend: für Handlungen, die man selten braucht. Vorher war fast
   jeder Knopf rot - dann sticht keiner mehr hervor. */
.t-knopf.still{border-color:transparent;background:transparent;
  color:var(--silber-matt)}
.t-knopf.still:hover{background:var(--karbon);color:var(--weiss)}

.t-liste{display:flex;flex-direction:column;gap:9px}
.t-zeile{display:grid;grid-template-columns:auto 1fr auto;gap:var(--a3);
  align-items:center;padding:14px 18px;border-radius:var(--r2);
  background:var(--karbon);border:1px solid var(--linie);
  border-left:3px solid var(--f,var(--linie-hell));transition:all .15s}
.t-zeile:hover{background:var(--karbon-hoch);border-color:var(--linie-hell);
  transform:translateX(2px)}

.t-mitte{min-width:0}

.t-zeit{font-family:var(--zahl);font-size:.72rem;color:var(--silber-matt)}

.z{min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r1);font-family:var(--zahl);font-size:.8rem;
  border:1px solid var(--linie);background:var(--nacht)}

.z-bu{color:var(--stahl)}

.t-n{line-height:1.4}

.t-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  padding:var(--a4);overflow-y:auto}
.t-modal{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--karbon);border:1px solid var(--linie-hell);
  border-radius:var(--r3);box-shadow:var(--schatten);overflow:hidden}
.t-modal-kopf{display:flex;justify-content:space-between;align-items:center;
  padding:var(--a3) var(--a4);border-bottom:1px solid var(--linie)}
.t-modal-kopf h2{font-family:var(--anzeige);font-weight:700;font-size:var(--t3);
  letter-spacing:-.01em;color:var(--weiss)}
.t-zu{width:32px;height:32px;border-radius:var(--r1);color:var(--silber-matt)}
.t-zu:hover{color:var(--weiss);background:var(--karbon-hoch)}
.t-modal-leib{padding:var(--a4);overflow-y:auto;display:flex;flex-direction:column;
  gap:var(--a3)}
.t-modal-fuss{display:flex;justify-content:flex-end;gap:10px;
  padding:var(--a3) var(--a4);border-top:1px solid var(--linie)}
.t-modal label{display:flex;flex-direction:column;gap:7px;font-family:var(--eng);
  font-weight:600;font-size:var(--tw);letter-spacing:.14em;text-transform:uppercase;
  color:var(--silber-matt)}
.t-modal input,.t-modal select,.t-modal textarea{
  background:var(--nacht);border:1px solid var(--linie-hell);border-radius:var(--r1);
  padding:11px 13px;color:var(--weiss);font-family:var(--text);font-size:var(--tk);
  letter-spacing:0;text-transform:none;transition:border-color .15s}
.t-modal input:focus,.t-modal select:focus,.t-modal textarea:focus{
  outline:none;border-color:var(--rot)}
.t-modal input[type=color]{padding:4px;height:44px;cursor:pointer}
.t-modal textarea{resize:vertical;min-height:60px}
.t-info{color:var(--silber-matt);font-size:var(--tk);line-height:1.55}

.t-info.klein{font-size:.8rem}
.t-info b{color:var(--zelt)}

.t-tage{display:flex;gap:6px;flex-wrap:wrap}
.t-tag{flex:0 0 auto!important;cursor:pointer}
.t-tag input{display:none}
.t-tag span{display:inline-block;padding:9px 13px;border-radius:9px;
  border:1px solid var(--linie-hell);font-family:var(--anzeige);font-weight:700;
  font-size:1rem;color:var(--silber-matt)}
.t-tag input:checked+span{background:var(--gruen);color:#04150C;border-color:var(--gruen)}
.t-w-liste{display:flex;flex-direction:column;gap:6px}
.t-w-zeile{display:flex;align-items:center;gap:11px;padding:10px 13px;
  background:var(--nacht);border:1px solid var(--linie);border-radius:9px}
.t-w-zeile.aus{opacity:.45}
.t-w-punkt{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.t-w-name{flex:1;color:var(--zelt)}

.t-w-name small{display:block;font-family:var(--zahl);font-size:.6rem;
  letter-spacing:.12em;color:var(--silber-matt);margin-top:2px}
.t-w-fest{font-family:var(--zahl);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silber-matt);opacity:.7}
/* Kippschalter fuer Serien ein-/ausblenden */
.t-schalter{flex:0 0 auto!important;cursor:pointer;display:inline-block}
.t-schalter input{display:none}
.t-schalter span{display:block;width:42px;height:23px;border-radius:12px;
  background:rgba(198,206,214,.14);border:1px solid var(--linie-hell);position:relative;
  transition:background .18s}
.t-schalter span::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;
  border-radius:50%;background:var(--silber-matt);transition:transform .18s,background .18s}
.t-schalter input:checked+span{background:rgba(47,160,94,0.3);border-color:var(--gruen)}
.t-schalter input:checked+span::after{transform:translateX(19px);background:var(--gruen)}

/* ==================== STATISTIK · HALL OF FAME ========================= */
.sx-tabelle{width:100%;border-collapse:collapse;font-size:var(--tk);min-width:820px}
.sx-tabelle th{padding:10px 8px;font-family:var(--eng);font-weight:600;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silber-matt);
  text-align:right;cursor:pointer;white-space:nowrap;user-select:none;
  border-bottom:1px solid var(--linie)}
.sx-tabelle th:hover{color:var(--weiss)}
.sx-tabelle th.an{color:var(--rot-hell)}
.sx-tabelle th.sx-platz,.sx-tabelle th.sx-spieler{text-align:left;cursor:default}
.sx-tabelle td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--linie);
  font-family:var(--zahl);font-size:.82rem;color:var(--silber)}
.sx-tabelle tr:hover td{background:var(--karbon-hoch)}
.sx-tabelle tr.erster td{background:color-mix(in srgb,var(--zusage) 7%,transparent)}
.sx-platz{width:44px;text-align:left!important;color:var(--silber-matt)}
.sx-spieler{text-align:left!important;display:flex;align-items:center;gap:9px;
  font-family:var(--text)!important}
.sx-spieler img{width:30px;height:30px;border-radius:50%;object-fit:cover;
  flex-shrink:0;background:var(--karbon-hoch);display:flex;align-items:center;
  justify-content:center;color:var(--silber-matt);font-size:.8rem}
.sx-spieler b{color:var(--weiss);font-weight:600}
.sx-spieler i{color:var(--silber-matt);font-style:normal;font-size:.72rem}
.sx-pos{font-family:var(--zahl);font-size:.55rem;letter-spacing:.06em;padding:2px 6px;
  border-radius:4px;color:var(--nacht);font-weight:700;min-width:32px;text-align:center}
.sx-m{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font-family:var(--anzeige);font-weight:800;font-size:.7rem;
  color:var(--nacht);background:var(--linie-hell)}
.sx-m.gold{background:var(--gold)} .sx-m.silber{background:#C9CBCE}
.sx-m.bronze{background:#C77B3A}
.sx-tabelle td.gut{color:var(--zusage);font-weight:500}
.sx-tabelle td.blau{color:var(--stahl)}
.sx-tabelle td.gold{color:var(--gold)}
.sx-tabelle td.rot{color:var(--absage)}
.sx-note{padding:3px 9px;border-radius:20px;font-size:.78rem}
.sx-note.hoch{color:var(--zusage);background:color-mix(in srgb,var(--zusage) 13%,transparent)}
.sx-note.mittel{color:var(--gold);background:color-mix(in srgb,var(--gold) 13%,transparent)}
.sx-note.tief{color:var(--absage);background:color-mix(in srgb,var(--absage) 13%,transparent)}

.hf-gitter{display:grid;gap:var(--a3);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hf-karte{border:1px solid var(--linie);border-top:2px solid var(--f);
  border-radius:var(--r2);background:var(--karbon);overflow:hidden}
.hf-kopf{display:flex;align-items:center;gap:9px;padding:13px var(--a3);
  border-bottom:1px solid var(--linie);font-family:var(--eng);font-weight:600;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
.hf-zeile{display:flex;align-items:center;gap:10px;padding:10px var(--a3);
  border-bottom:1px solid var(--linie)}
.hf-zeile:last-child{border-bottom:0}
.hf-zeile.erster{background:color-mix(in srgb,var(--f) 9%,transparent)}
.hf-zeile img{width:32px;height:32px}
.hf-name{flex:1;color:var(--weiss);font-size:.92rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hf-wert{font-family:var(--anzeige);font-weight:800;font-size:1.3rem;color:var(--f);
  display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.hf-wert i{font-family:var(--eng);font-weight:600;font-style:normal;font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silber-matt);margin-top:3px}

/* ============================= TAKTIK-BRETT ============================ */
.tb-raum{display:grid;gap:var(--a3);grid-template-columns:1fr 280px;align-items:start}
@media(max-width:1000px){.tb-raum{grid-template-columns:1fr}}
.tb-brett{background:var(--karbon);border:1px solid var(--linie);
  border-radius:var(--r3);overflow:hidden}
.tb-leiste{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);
  padding:11px var(--a3);flex-wrap:wrap;border-bottom:1px solid var(--linie)}
.tb-leiste.unten{border-bottom:0;border-top:1px solid var(--linie)}
.tb-werkzeuge{display:flex;gap:4px;flex-wrap:wrap}
.tb-werkzeuge.gesperrt{opacity:.4;pointer-events:none}
.tb-w:disabled{cursor:not-allowed}
.tb-w{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r1);
  border:1px solid var(--linie);background:var(--nacht);color:var(--silber-matt);
  font-family:var(--eng);font-weight:600;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;transition:all .15s}
.tb-w span{font-size:1rem;line-height:1}
.tb-w:hover{color:var(--weiss);border-color:var(--silber-matt)}
.tb-w.an{background:var(--rot);border-color:var(--rot);color:var(--auf-marke)}
.tb-farben{display:flex;gap:5px}
.tb-f{width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  transition:transform .12s}
.tb-f:hover{transform:scale(1.12)}
.tb-f.an{border-color:var(--weiss);transform:scale(1.15)}
.tb-flaeche{padding:var(--a3);background:var(--nacht)}
.tb-flaeche canvas{display:block;border-radius:var(--r2);cursor:crosshair;
  box-shadow:var(--schatten);touch-action:none}
.tb-knoepfe{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tb-seite{background:var(--karbon);border:1px solid var(--linie);
  border-radius:var(--r3);padding:var(--a3)}
.tb-raumkasten{border:1px solid color-mix(in srgb,var(--rot) 40%,transparent);
  border-radius:var(--r2);padding:12px;margin-bottom:var(--a3);
  background:color-mix(in srgb,var(--rot) 8%,transparent)}
.tb-raumnr{font-family:var(--zahl);font-size:1.5rem;letter-spacing:.2em;
  color:var(--rot-hell);text-align:center}
.tb-leute{display:flex;flex-direction:column;gap:4px}
.tb-p{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:var(--r1);
  background:var(--nacht);border:1px solid var(--linie);font-size:.82rem}
.tb-p-name{flex:1;color:var(--weiss);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.tb-p-name i{color:var(--silber-matt);font-style:normal;font-size:.7rem}
.tb-p-k{width:24px;height:24px;border-radius:6px;border:1px solid var(--linie);
  color:var(--silber-matt);font-size:.72rem}
.tb-p-k.an{color:var(--zusage);border-color:var(--zusage)}
.tb-p-k.weg:hover{color:var(--absage);border-color:var(--absage)}
.tb-p-darf{color:var(--zusage)}
.tb-schritte{display:flex;flex-wrap:wrap;gap:5px}
.tb-s{position:relative;width:38px;height:34px;border-radius:var(--r1);
  border:1px solid var(--linie);background:var(--nacht);color:var(--silber);
  font-family:var(--zahl);font-size:.8rem}
.tb-s:hover{border-color:var(--rot);color:var(--weiss)}
.tb-s i{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;
  background:var(--karbon-hoch);border:1px solid var(--linie);font-style:normal;
  font-size:.55rem;line-height:14px;color:var(--silber-matt)}
.tb-s i:hover{color:var(--absage);border-color:var(--absage)}

/* ====================== KALENDER · STATS · TABELLE ===================== */
.kal-kopf{display:flex;align-items:center;gap:var(--a3);margin-bottom:var(--a3)}
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.kal-wt{font-family:var(--eng);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silber-matt);text-align:center;padding:6px 0}
.kal-tag{min-height:88px;border:1px solid var(--linie);border-radius:var(--r1);
  background:var(--karbon);padding:6px;display:flex;flex-direction:column;gap:3px}
.kal-tag.aus{background:transparent;border-color:transparent}
.kal-tag.heute{border-color:var(--rot)}
.kal-tag.voll{background:var(--karbon-hoch)}
.kal-zahl{font-family:var(--zahl);font-size:.72rem;color:var(--silber-matt)}
.kal-tag.heute .kal-zahl{color:var(--rot);font-weight:700}
.kal-termin{font-size:.66rem;line-height:1.25;padding:3px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--f,var(--silber)) 16%,transparent);
  border-left:2px solid var(--f,var(--silber));color:var(--weiss);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kal-weg{font-size:.62rem;color:var(--lila);margin-top:auto}
@media(max-width:700px){.kal-tag{min-height:62px}.kal-termin{font-size:.58rem}}

.st-reihen{display:flex;flex-direction:column;gap:9px}
.st-reihe{display:grid;grid-template-columns:80px 1fr 46px;gap:10px;align-items:center;
  font-size:var(--tk);color:var(--silber)}
.st-reihe b{text-align:right;color:var(--weiss);font-family:var(--zahl)}
.st-balken{height:18px;border-radius:5px;background:var(--nacht);
  border:1px solid var(--linie);overflow:hidden}
.st-balken div{height:100%}
.st-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a2);
  margin-top:var(--a4);text-align:center}
.st-zahlen div{font-family:var(--eng);font-weight:600;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--silber-matt)}
.st-zahlen span{display:block;font-family:var(--anzeige);font-weight:800;
  font-size:1.5rem;color:var(--weiss);letter-spacing:-.02em;margin-bottom:3px}
.st-form{display:flex;gap:7px}
.st-f{width:38px;height:38px;border-radius:var(--r1);display:flex;align-items:center;
  justify-content:center;font-family:var(--anzeige);font-weight:800;font-size:1rem;
  color:var(--nacht)}
.st-f.a-sieg{background:var(--zusage)}
.st-f.a-remis{background:var(--vielleicht)}
.st-f.a-niederlage{background:var(--absage);color:#fff}

.tab-tabelle{width:100%;border-collapse:collapse;font-size:var(--tk)}
.tab-tabelle th{font-family:var(--eng);font-weight:600;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silber-matt);
  text-align:right;padding:0 6px 10px}
.tab-tabelle th:nth-child(2){text-align:left}
.tab-tabelle td{padding:10px 6px;border-top:1px solid var(--linie);text-align:right;
  color:var(--silber);font-family:var(--zahl);font-size:.82rem}
.tab-tabelle .tab-name{text-align:left;font-family:var(--text);font-size:var(--tk);
  color:var(--weiss)}
.tab-tabelle .tab-platz{color:var(--silber-matt)}
.tab-tabelle .tab-punkte{color:var(--weiss);font-weight:500}
.tab-tabelle tr.wir td{background:color-mix(in srgb,var(--rot) 12%,transparent)}
.tab-tabelle tr.wir .tab-name{color:var(--rot-hell);font-weight:600}
.tab-form{display:flex;flex-direction:column;gap:5px}
/* Tabelle: Vereinslogo vor dem Namen */
.tab-tabelle .tab-name .tab-verein{display:inline-flex;align-items:center;gap:10px}
.tab-tabelle .tab-logo{width:26px;height:26px;flex:none;border-radius:6px;display:inline-grid;place-items:center;
  background:var(--karbon-hoch);border:1px solid var(--linie);overflow:hidden;
  font-family:var(--eng);font-size:.62rem;color:var(--silber-matt)}
.tab-tabelle .tab-logo img{width:100%;height:100%;object-fit:contain}
.vr-voll{margin-top:5px!important}
.vr-marke{font-family:var(--eng);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rot);border:1px solid color-mix(in srgb,var(--rot) 40%,transparent);border-radius:4px;padding:1px 5px;margin-left:6px}
/* Aus ProLeague einfuegen */
.tab-einfuegen{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--a3);padding:var(--a3);
  border:1px dashed color-mix(in srgb,var(--rot) 45%,transparent);border-radius:var(--r2);
  background:color-mix(in srgb,var(--rot) 6%,transparent)}
.tab-einfuegen b{font-family:var(--eng);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rot)}
.tab-einfuegen span{color:var(--silber-matt);font-size:.85rem}
.tab-einfuegen kbd{font-family:var(--zahl);font-size:.75rem;padding:1px 5px;border-radius:4px;border:1px solid var(--linie-hell);color:var(--weiss)}
.tab-einfuegen textarea{min-height:44px}
.tab-pl-meldung.ok{color:var(--zusage)}
.tab-pl-meldung.warn{color:var(--vielleicht)}
.tab-form-kopf,.tab-form-zeile{display:grid;
  grid-template-columns:1fr 52px 52px 52px 62px 62px 42px;gap:5px;align-items:center}
.tab-form-kopf span{font-family:var(--eng);font-weight:600;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--silber-matt);
  text-align:center}
.tab-form-kopf span:first-child{text-align:left}
.tab-form-zeile input[type=number]{text-align:center;padding:8px 4px}
.tab-form-zeile input[type=checkbox]{width:18px;height:18px;margin:0 auto;
  accent-color:var(--rot)}

/* ========================== KABINE · LIVE TV =========================== */
.kab-raum{display:flex;flex-direction:column;height:min(70vh,640px);padding:0}
.kab-liste{flex:1;overflow-y:auto;padding:var(--a4)}
.kab-tag{text-align:center;font-family:var(--zahl);font-size:.62rem;
  color:var(--silber-matt);margin:var(--a3) 0;position:relative}
.kab-tag::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--linie);z-index:0}
.kab-tag{background:transparent}
.kab-n{display:flex;gap:10px;margin-bottom:12px}
.kab-n img{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  object-fit:cover;background:var(--karbon-hoch)}
.kab-inhalt{min-width:0;max-width:78%}
.kab-kopf{display:flex;gap:9px;align-items:baseline;margin-bottom:3px}
.kab-kopf b{font-size:.86rem;color:var(--weiss)}
.kab-kopf span{font-family:var(--zahl);font-size:.6rem;color:var(--silber-matt)}
.kab-text{padding:9px 13px;border-radius:12px;border-top-left-radius:4px;
  background:var(--karbon-hoch);color:var(--silber);font-size:var(--tk);
  line-height:1.5;word-break:break-word}
.kab-n.meine{flex-direction:row-reverse}
.kab-n.meine .kab-kopf{flex-direction:row-reverse}
.kab-n.meine .kab-text{background:color-mix(in srgb,var(--rot) 20%,var(--karbon));
  border-top-left-radius:12px;border-top-right-radius:4px}
.kab-eingabe{display:flex;gap:9px;padding:var(--a3) var(--a4);
  border-top:1px solid var(--linie)}
.kab-eingabe input{flex:1;background:var(--nacht);border:1px solid var(--linie-hell);
  border-radius:var(--r1);padding:11px 14px;color:var(--weiss);
  font-family:var(--text);font-size:var(--tk)}
.kab-eingabe input:focus{outline:none;border-color:var(--rot)}

.tv-gitter{display:grid;gap:var(--a3);
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.tv-karte{border:1px solid var(--linie);border-radius:var(--r2);overflow:hidden;
  background:var(--karbon)}
.tv-rahmen{aspect-ratio:16/9;background:#000}
.tv-rahmen iframe{width:100%;height:100%;border:0}
.tv-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px}
.tv-fuss b{color:var(--weiss);font-size:.95rem;display:flex;align-items:center;gap:7px}

@keyframes pulsen{50%{opacity:.4}}
.tv-karte.live{border-color:color-mix(in srgb,var(--rot) 45%,transparent)}
.tv-vorschau{position:relative;display:block;width:100%;height:100%}
.tv-vorschau img{width:100%;height:100%;object-fit:cover}
.tv-aus{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--silber-matt);font-family:var(--eng);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;background:var(--karbon)}
.tv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.6);
  border:2px solid var(--weiss);color:var(--weiss);display:flex;
  align-items:center;justify-content:center;font-size:1.2rem;
  transition:transform .15s}
.tv-vorschau:hover .tv-play{transform:translate(-50%,-50%) scale(1.12)}
.tv-hinweis{font-size:var(--tw);color:var(--silber-matt);line-height:1.55;max-width:64ch}
.tv-hinweis b{color:var(--weiss)}
.tv-fuss span{font-size:var(--tw);color:var(--silber-matt)}

/* ====================== MEDIEN · TAKTIK · ADMIN ======================== */
.b-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);
  flex-wrap:wrap;margin-bottom:var(--a4)}
.b-filter{display:flex;gap:5px;flex-wrap:wrap}
.b-f{padding:8px 15px;border-radius:20px;border:1px solid var(--linie);
  background:var(--karbon);color:var(--silber-matt);font-family:var(--eng);
  font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  transition:all .15s}
.b-f:hover{color:var(--weiss)}
.b-f.an{background:var(--karbon-hoch);color:var(--weiss);border-color:var(--rot)}

.m-gitter{display:grid;gap:var(--a3);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.m-karte{position:relative;border:1px solid var(--linie);border-radius:var(--r2);
  overflow:hidden;background:var(--karbon);transition:border-color .15s}
.m-karte:hover{border-color:var(--linie-hell)}
.m-vorschau{aspect-ratio:16/9;background:var(--nacht);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.m-vorschau video,.m-vorschau img{width:100%;height:100%;object-fit:cover}
.m-link{display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--silber-matt);font-family:var(--eng);font-weight:600;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase}
.m-link span{font-size:1.7rem}
.m-link:hover{color:var(--weiss)}
.m-fuss{padding:13px 15px}
.m-titel{font-family:var(--anzeige);font-weight:700;font-size:.98rem;color:var(--weiss);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-unter{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px;font-family:var(--zahl);
  font-size:.62rem;color:var(--silber-matt)}
.m-marke{color:var(--rot);border:1px solid color-mix(in srgb,var(--rot) 35%,transparent);
  border-radius:20px;padding:1px 7px}
.m-notiz{margin-top:8px;font-size:var(--tw);color:var(--silber-matt);line-height:1.5}
.m-weg{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:var(--r1);
  background:rgba(7,10,8,.8);border:1px solid var(--linie);color:var(--silber-matt)}
.m-weg:hover{color:var(--absage);border-color:var(--absage)}

.ea-liste{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto}
.ea-spiel{display:grid;grid-template-columns:78px 1fr 62px 1fr;gap:12px;
  align-items:center;padding:10px 14px;border-radius:var(--r1);background:var(--nacht);
  border:1px solid var(--linie);border-left:3px solid var(--linie-hell);
  font-size:var(--tw)}
.ea-spiel.a-sieg{border-left-color:var(--zusage)}
.ea-spiel.a-remis{border-left-color:var(--vielleicht)}
.ea-spiel.a-niederlage{border-left-color:var(--absage)}
.ea-datum{font-family:var(--zahl);font-size:.68rem;color:var(--silber-matt)}
.ea-gegner{color:var(--weiss)}
.ea-tore{font-family:var(--zahl);font-size:.95rem;color:var(--weiss);text-align:center}
.ea-spieler{color:var(--silber-matt);font-size:.72rem;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.ea-spiel{grid-template-columns:70px 1fr 56px}.ea-spieler{display:none}}
.ad-tabelle{width:100%;border-collapse:collapse;font-size:var(--tk)}
.ad-tabelle td{padding:9px 4px;border-bottom:1px solid var(--linie);color:var(--silber)}
.ad-tabelle td:last-child{text-align:right;font-family:var(--zahl);font-size:.76rem;
  color:var(--silber-matt)}
.ad-tabelle td.fehlt{color:var(--linie-hell)}
.ad-tabelle tr:last-child td{border-bottom:0}
code{font-family:var(--zahl);font-size:.78rem;color:var(--silber);
  background:var(--nacht);padding:2px 6px;border-radius:5px}

.un-raum{position:relative;padding:0;overflow:hidden}
.un-stift{position:absolute;top:var(--a3);right:var(--a3);z-index:2}
.un-kopf{position:relative;padding:var(--a6) var(--a4) var(--a5);text-align:center;
  border-bottom:1px solid var(--linie);
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,
      rgba(255,255,255,.014) 9px 18px),
    linear-gradient(180deg,color-mix(in srgb,var(--rot) 10%,var(--karbon-hoch)),
      var(--karbon))}
.un-kopf::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--rot),var(--rot-tief))}
.un-kopf h2{font-family:var(--anzeige);font-weight:900;
  font-size:clamp(2rem,6vw,3.6rem);letter-spacing:-.02em;color:var(--weiss);
  line-height:1;text-transform:uppercase}
.un-unter{margin-top:12px;font-family:var(--eng);font-weight:600;
  font-size:clamp(.85rem,2vw,1.15rem);letter-spacing:.1em;text-transform:uppercase;
  color:var(--rot-hell)}
.un-verein{margin-top:8px;font-family:var(--eng);font-weight:500;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--silber-matt)}

.un-text{padding:var(--a5) var(--a4) var(--a4);max-width:70ch;margin:0 auto;
  text-align:center}
.un-text p{color:var(--silber);font-size:1.02rem;line-height:1.75;
  margin-bottom:var(--a3)}

.un-karten{display:grid;gap:var(--a3);padding:0 var(--a4) var(--a4);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.un-karte{border:1px solid var(--linie);border-radius:var(--r2);padding:var(--a3);
  background:var(--nacht)}
.un-symbol{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r2);font-size:1.25rem;
  background:color-mix(in srgb,var(--rot) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rot) 32%,transparent)}
.un-karte h4{margin:14px 0 8px;font-family:var(--eng);font-weight:600;
  font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--weiss)}
.un-karte p{color:var(--silber-matt);font-size:var(--tk);line-height:1.6}

.un-knopf{display:block;margin:0 var(--a4) var(--a3);padding:20px;border-radius:var(--r2);
  background:var(--rot);color:var(--auf-marke);text-align:center;font-family:var(--eng);
  font-weight:700;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 14px 40px -14px var(--rot);transition:all .15s}
.un-knopf:hover{background:var(--rot-hell);box-shadow:0 16px 46px -12px var(--rot)}
.un-knopf.leer{background:transparent;border:1px dashed var(--linie-hell);
  color:var(--silber-matt);letter-spacing:0;text-transform:none;font-size:var(--tk);
  box-shadow:none;font-weight:400}
.un-paypal{display:flex;align-items:center;gap:12px;width:max-content;margin:0 auto var(--a4);
  padding:11px 18px;border-radius:var(--r2);background:var(--nacht);
  border:1px solid var(--linie);color:var(--weiss);font-size:var(--tk)}
.un-paypal:hover{border-color:var(--silber-matt)}
.un-paypal span{font-family:var(--eng);font-weight:600;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silber-matt)}
.un-schluss{margin:0 var(--a4) var(--a4);padding:var(--a3) var(--a4);
  border-radius:var(--r2);border-left:3px solid var(--rot);background:var(--nacht);
  color:var(--silber-matt);font-size:var(--tk);line-height:1.7;text-align:center}
.un-form{border:1px solid var(--linie);border-radius:var(--r2);padding:var(--a3);
  display:flex;flex-direction:column;gap:var(--a3)}

.se-stand{margin-top:var(--a4);padding-top:var(--a3);border-top:1px solid var(--linie);
  font-family:var(--zahl);font-size:.66rem;color:var(--silber-matt)}

/* =============================== STARTSEITE ============================ */
/* BILANZLEISTE - Entwurf "Bühne", freigegeben am 29.08.
   Keine Fugen mehr zwischen den Kacheln, sondern dünne Trennstriche, dazu
   grössere Zahlen und oben eine rote Lichtkante. Steht im Archiv UND auf
   der Startseite - beide benutzen dieselben Klassen. */

.h-wert{flex:1;position:relative;padding:22px 10px 18px;text-align:center;
  min-width:0;transition:background .15s}
.h-wert+.h-wert::before{content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:var(--linie)}
.h-wert:hover{background:var(--karbon-hoch)}
.h-wert .zahl{display:block;font-family:var(--anzeige);font-weight:900;
  font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1;color:var(--weiss);
  font-variant-numeric:tabular-nums}
.h-wert .schild{display:block;font-family:var(--eng);font-weight:600;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--silber-matt);margin-top:9px}
.h-wert.gut .zahl{color:var(--zusage)}
.h-wert.mittel .zahl{color:var(--vielleicht)}
.h-wert.schlecht .zahl{color:var(--absage)}

.h-wann{color:var(--silber);font-size:.95rem}
.h-wann b{color:var(--rot-hell)}

.h-uhr{font-family:var(--zahl);font-size:clamp(1.3rem,3.4vw,2rem);color:var(--rot-hell);
  letter-spacing:.04em;text-shadow:0 0 22px color-mix(in srgb,var(--rot) 55%,transparent)}
.h-uhr.jetzt{color:var(--zusage)}

.t-knopf.gross{padding:14px 30px;font-size:1rem}

.h-zwei{display:grid;gap:var(--a3);grid-template-columns:1.4fr 1fr;
  align-items:start;margin-bottom:var(--a3)}

@media(max-width:900px){.h-zwei{grid-template-columns:1fr}}
.h-block{margin-bottom:16px}
.h-titel{font-family:var(--anzeige);font-weight:700;font-size:var(--t3);
  letter-spacing:-.01em;color:var(--weiss);margin-bottom:var(--a3);
  display:flex;align-items:center;gap:9px}
.h-nichts{color:var(--silber-matt);font-size:.88rem;line-height:1.5}

/* ============================ HOME & KADER ============================= */

.h-titel{font-family:var(--anzeige);font-weight:700;font-size:1.25rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--zelt);margin-bottom:12px}

.k-karte{display:flex;gap:14px;align-items:flex-start;background:var(--karbon);
  border:1px solid var(--linie);border-left:3px solid var(--f);border-radius:12px;
  padding:14px 16px;position:relative}
.k-karte:hover{background:var(--karbon-hoch)}
.k-nummer{font-family:var(--anzeige);font-weight:900;font-size:2rem;line-height:1;
  color:var(--f);min-width:46px;text-align:center}
.k-nummer span{color:var(--linie-hell)}

.k-name{font-family:var(--anzeige);font-weight:700;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--weiss);line-height:1.2}

.k-hp,.k-np,.k-fuss{font-family:var(--zahl);font-size:.6rem;letter-spacing:.1em;
  padding:3px 8px;border-radius:20px;border:1px solid var(--linie-hell)}
.k-hp{color:var(--nacht);background:var(--f);border-color:var(--f);font-weight:700}
.k-np{color:var(--silber-matt)}
.k-fuss{color:var(--silber-matt);text-transform:none;letter-spacing:.04em}
.k-notiz{margin-top:8px;font-size:.84rem;color:var(--silber-matt);line-height:1.45}

/* ======================== KADER · AUFSTELLUNG ========================== */
.s-reiter{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.s-tab{padding:11px 28px;border-radius:24px;border:1px solid var(--linie);
  font-family:var(--eng);font-weight:600;font-size:.86rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silber-matt);background:var(--karbon);
  transition:all .15s}
.s-tab.an{background:var(--rot);color:var(--auf-marke);border-color:var(--rot);
  box-shadow:0 8px 24px -10px var(--rot)}

.s-raum{display:grid;gap:18px;grid-template-columns:320px 1fr;align-items:start}
@media(max-width:900px){.s-raum{grid-template-columns:1fr}}

.s-seite{background:var(--karbon);border:1px solid var(--linie);border-radius:14px;
  padding:16px}
.s-seite-kopf{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px}
.s-seite-kopf h3{font-family:var(--anzeige);font-weight:700;font-size:1.15rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--zelt)}
.s-mini{width:30px;height:30px;border-radius:8px;border:1px solid var(--linie);
  color:var(--silber-matt)}
.s-mini:hover{color:var(--gruen);border-color:var(--gruen)}
.s-breit{width:100%;margin-bottom:12px}

.s-legende{display:flex;flex-wrap:wrap;gap:6px 12px;padding:10px 12px;margin-bottom:12px;
  border:1px solid var(--linie);border-radius:10px;background:var(--nacht)}
.s-legende span{display:flex;align-items:center;gap:6px;font-size:.72rem;
  color:var(--silber-matt)}
.s-legende i{width:9px;height:9px;border-radius:50%;display:inline-block}

.s-liste{display:flex;flex-direction:column;gap:5px;max-height:58vh;overflow-y:auto;
  padding-right:4px}
.s-zeile{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--linie);background:var(--nacht);cursor:pointer}
.s-zeile:hover{border-color:var(--silber-matt)}
.s-zeile.gesetzt{border-color:var(--gruen);
  background:color-mix(in srgb,var(--gruen) 9%,transparent)}
.s-gruppe{font-family:var(--zahl);font-size:.55rem;letter-spacing:.08em;padding:3px 6px;
  border-radius:5px;min-width:38px;text-align:center;color:var(--nacht);font-weight:700}
.g-TW{background:var(--gold)} .g-DEF{background:var(--stahl)}
.g-MF{background:var(--gruen)} .g-ST{background:var(--alarm)}
/* Ohne Zuordnung war das Abzeichen unsichtbar: dunkle Schrift auf
   durchsichtigem Grund. Jetzt ein Grundton fuer alle, die Farben je
   Gruppe darueber - mit .s-gruppe davor, sonst gewinnt die Grundregel,
   weil sie weiter unten steht.
   Die Farben sind dieselben wie in der Statistik: Torwart gold, Abwehr
   blau, Mittelfeld gruen, Angriff rot. --gruen zeigt bei Isomatte aufs
   Haus-Rot, deshalb steht hier --zusage. */
.s-gruppe{background:var(--linie-hell);color:var(--weiss)}
.s-gruppe.g-TW{background:var(--gold);color:var(--nacht)}
.s-gruppe.g-DEF{background:var(--stahl);color:var(--nacht)}
.s-gruppe.g-MF{background:var(--zusage);color:var(--nacht)}
.s-gruppe.g-ST{background:var(--rot-hell);color:var(--auf-marke)}
.s-nr{font-family:var(--zahl);font-size:.7rem;color:var(--silber-matt);min-width:30px}
.s-name{flex:1;font-size:.88rem;color:var(--zelt);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.s-punkt{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.s-x{width:24px;color:var(--silber-matt);font-size:.8rem}
.s-x:hover{color:var(--zelt)}
.s-leer{color:var(--silber-matt);font-size:.85rem;padding:14px;text-align:center}

.s-steuer{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.s-feld{display:flex;flex-direction:column;gap:5px;font-family:var(--zahl);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silber-matt)}
.s-feld select,.s-feld input{background:var(--karbon);border:1px solid var(--linie-hell);
  border-radius:9px;padding:9px 12px;color:var(--zelt);font-family:var(--brot);
  font-size:.92rem;letter-spacing:0;text-transform:none}
.s-werkzeuge{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.t-knopf.gold{background:var(--gold);color:var(--nacht);border-color:var(--gold)}
.s-zeile2{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.s-schalter{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:22px;
  border:1px solid var(--linie);background:var(--karbon);color:var(--silber-matt);
  font-family:var(--zahl);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.s-schalter.an{border-color:var(--gruen);color:var(--gruen)}
.s-knauf{width:30px;height:16px;border-radius:10px;background:var(--linie-hell);
  position:relative;transition:background .15s}
.s-knauf::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:var(--zelt);transition:transform .15s}
.s-schalter.an .s-knauf{background:var(--gruen)}
.s-schalter.an .s-knauf::after{transform:translateX(14px)}

.s-hinweis{padding:11px 15px;border-radius:10px;margin-bottom:14px;font-size:.88rem;
  color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,transparent)}
.s-hinweis.frei{color:var(--gruen);
  border-color:color-mix(in srgb,var(--gruen) 30%,transparent);
  background:color-mix(in srgb,var(--gruen) 8%,transparent)}

/* Das Schild ueberlappt den Kreis leicht - das spart Hoehe, und bei zwei
   Plaetzen dicht untereinander (etwa LIV, ZIV, RIV) stossen die Schilder
   nicht mehr an den Kreis des Nachbarn. */
.platz .p-tafel{margin-top:-6px;position:relative;z-index:2;
  padding:4px 7px;border-radius:7px;
  background:rgba(7,10,8,.92);
  border:1px solid var(--linie);border-bottom:2px solid var(--f,var(--linie-hell));
  font-family:var(--text);font-weight:500;font-size:.66rem;color:var(--weiss);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* Etwas breiter als der Platz selbst, aber gedeckelt - sonst schiebt ein
     langer Name das Schild ueber den Nachbarn. */
  max-width:min(112px,150%);width:max-content;margin-inline:auto}
.platz.leer .p-tafel{color:var(--silber-matt);border-bottom-color:var(--linie);
  background:rgba(7,10,8,.6)}
.platz.leer:hover .p-tafel{border-color:var(--silber-matt);color:var(--weiss)}
.platz.leer{width:auto}
.p-schild.oben{font-family:var(--eng);font-weight:600;font-size:.54rem;
  letter-spacing:.16em;color:rgba(255,255,255,.55);margin-bottom:3px}

/* ======================== KADER · ANWESENHEIT ========================== */
.a-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.a-raum{display:grid;gap:20px;grid-template-columns:1fr 340px;align-items:start}
@media(max-width:900px){.a-raum{grid-template-columns:1fr}}
.a-titel{font-family:var(--anzeige);font-weight:700;font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gruen);margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.a-legende{display:flex;gap:10px}
.a-legende span{display:flex;align-items:center;gap:4px;font-family:var(--zahl);
  font-size:.55rem;letter-spacing:.1em;color:var(--silber-matt)}
.a-legende i{width:8px;height:8px;border-radius:50%}
.a-reihe{display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:center;
  margin-bottom:7px}
.a-name{font-size:.82rem;color:var(--zelt);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.a-balken{position:relative;height:22px;border-radius:5px;background:var(--nacht);
  border:1px solid var(--linie);display:flex;overflow:hidden}
.a-stueck{height:100%}
.a-wert{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  font-family:var(--zahl);font-size:.62rem;color:var(--nacht);font-weight:700;
  text-shadow:0 0 4px rgba(255,255,255,.35)}
.a-spiele{display:flex;flex-direction:column;gap:12px;max-height:62vh;overflow-y:auto}
.a-spiel{border:1px solid var(--linie);border-radius:11px;padding:12px 14px;
  background:var(--nacht)}
.a-spiel-kopf{font-family:var(--anzeige);font-weight:700;font-size:.92rem;
  color:var(--gruen);margin-bottom:8px}
.a-spiel-kopf small{color:var(--silber-matt);font-weight:400}
.a-p{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--zelt);
  padding:2px 0}
.a-p-pos{font-family:var(--zahl);font-size:.52rem;letter-spacing:.06em;padding:2px 5px;
  border-radius:4px;min-width:34px;text-align:center;color:var(--nacht);font-weight:700}

/* ============================== SPIELFELD ============================== */
.f-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.f-wahl{background:var(--karbon);border:1px solid var(--linie-hell);border-radius:9px;
  padding:9px 13px;color:var(--zelt);font-family:var(--anzeige);font-weight:700;
  font-size:1rem;letter-spacing:.05em}
.f-zahl{font-family:var(--zahl);font-size:.7rem;letter-spacing:.14em;
  color:var(--silber-matt)}

/* Das Feld ist QUADRATISCH - genau das Format, in dem gepostet wird.
   So sieht man beim Aufstellen schon, wie das fertige Bild aussieht. */
.feld{position:relative;width:100%;max-width:820px;margin:0 auto;aspect-ratio:1/1;
  border-radius:var(--r3);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--rasen) 40%,transparent);
  background:repeating-linear-gradient(180deg,
      color-mix(in srgb,var(--rasen) 20%,#070E0A) 0 8.33%,
      color-mix(in srgb,var(--rasen) 14%,#070E0A) 8.33% 16.66%)}

/* Das Wappen liegt als EIGENE EBENE unter den Linien - nicht als
   Hintergrundbild. Nur so kann man es dezent halten und trotzdem über
   das ganze Feld ziehen, ohne dass die Linien darunter verschwinden. */
.feld::before{content:'';position:absolute;inset:6%;
  background:var(--wappen,none) center/contain no-repeat;
  opacity:.07;filter:grayscale(.35);pointer-events:none;z-index:0}

.feld-linien{position:absolute;inset:0;pointer-events:none;z-index:1;
  --l:rgba(255,255,255,.17)}
.f-mittellinie{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--l)}
.f-mittelkreis{position:absolute;left:50%;top:50%;width:17%;aspect-ratio:1;
  transform:translate(-50%,-50%);border:1px solid var(--l);border-radius:50%}
.f-mittelkreis::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--l)}
.f-strafraum{position:absolute;left:32%;right:32%;height:15%;border:1px solid var(--l)}
.f-strafraum.oben{top:0;border-top:0}
.f-strafraum.unten{bottom:0;border-bottom:0}
.f-strafraum::after{content:'';position:absolute;left:30%;right:30%;height:40%;
  border:1px solid var(--l)}
.f-strafraum.oben::after{top:0;border-top:0}
.f-strafraum.unten::after{bottom:0;border-bottom:0}

/* 15% waren zu breit: bei einer Dreier- oder Viererkette liegen die
   Plaetze nach dem Stauchen nur rund 13% auseinander - die Kreise
   ueberlappten sich, und die Namensschilder erst recht. 10,5% passt auch
   in der engsten Kette noch. */
.platz{position:absolute;transform:translate(-50%,-50%);text-align:center;
  cursor:pointer;width:11.5%}
/* Wer angefasst wird, kommt nach vorn - sonst verdeckt der Nachbar das
   Schild, sobald ein Name doch einmal laenger ist. */
.platz:hover,.platz:focus-within{z-index:6}
.p-kreis{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--f);
  background:linear-gradient(180deg,var(--karbon-hoch),var(--nacht));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.9);
  transition:transform .15s,box-shadow .15s}
.platz:hover .p-kreis{transform:scale(1.09);
  box-shadow:0 0 22px -4px var(--f),0 6px 18px -8px rgba(0,0,0,.9)}
.p-kreis img{width:100%;height:100%;object-fit:cover}
/* SPIELERBILDER MIT AUSSCHNITT
   Die Bilder liegen als HINTERGRUND und nicht als <img> im Kasten: nur so
   lassen sich Zoom und Lage aus dem Kaderprofil anwenden (background-size
   und background-position). Ein <img> koennte man nur ganz oder per
   object-position verschieben - der Zoom fehlte. */
.p-foto{position:absolute;inset:0;border-radius:50%;background-color:#12100F}
.p-nr.hinten{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center}
.p-e-foto{width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background-color:#13201A;background-size:100% auto}
/* Kaderliste: hochkant, damit Kopf bis Huefte hineinpasst */
.s-foto{width:30px;height:38px;flex:0 0 30px;border-radius:7px;
  background-color:#13201A;display:inline-block}
.s-foto.leer{display:flex;align-items:center;justify-content:center;
  font-family:var(--anzeige);font-weight:800;color:var(--silber-matt)}
/* Regler fuer den Ausschnitt im Spielerfenster */
.kb-bild{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--anzeige);font-weight:900;
  font-size:1.6rem;color:var(--silber-matt);background-color:#13201A}
.kb-schnitt{margin:0 0 var(--a3);padding:12px 14px;border-radius:var(--r1);
  border:1px solid var(--linie-hell);background:rgba(255,255,255,.02)}
.kb-schnitt label{display:block;margin:8px 0;font-size:.78rem;
  color:var(--silber-matt)}
.kb-schnitt input[type=range]{width:100%;accent-color:var(--rot)}
/* Miniaturen unter Medien > Spielerbilder */
.sb-foto{position:absolute;inset:0;border-radius:50%;background-color:#13201A;
  background-size:cover;background-position:50% 20%}
/* Miniaturen in der Statistik */
.st-foto{display:inline-block;width:34px;height:34px;border-radius:50%;
  background-color:#13201A;background-size:100% auto;flex:0 0 34px}
.p-nr{font-family:var(--anzeige);font-weight:900;font-size:1.05rem;color:var(--f)}
/* FIGUREN AUF DEM FELD: das Renderbild als Ganzes ueber dem Schild, wie
   auf dem Krakens-Feld. contain statt cover - nichts wird abgeschnitten.
   Der Schatten unter der Figur laesst sie auf dem Rasen stehen. */
.p-figur{position:relative;width:100%;height:0;padding-bottom:100%;
  transition:transform .15s}
/* Das Bild selbst laeuft unten weich aus - der Schnitt an der Huefte soll
   keine Kante sein. Die Plaketten liegen als Geschwister DARUEBER und
   bleiben deshalb voll deckend. */
.p-figur-bild{position:absolute;inset:0;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(#000 76%,transparent 100%);
  mask-image:linear-gradient(#000 76%,transparent 100%);
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.75))}
.platz:hover .p-figur{transform:scale(1.08)}
.p-figur-nr{position:absolute;right:-4px;bottom:2px;min-width:18px;height:18px;
  padding:0 4px;border-radius:9px;background:var(--f);color:#0A0708;
  font-family:var(--anzeige);font-weight:900;font-size:.62rem;line-height:18px;
  text-align:center;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.platz.mit-figur .p-tafel{margin-top:-2px}
/* Bei einer Figur sass die Positionsplakette oben - also mitten im
   Gesicht. Sie wandert an den linken Fuss, die Nummer steht am rechten. */
.p-figur .p-pos{top:auto;bottom:2px;left:-4px;transform:none;
  font-size:.5rem;padding:1px 5px;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.p-leer{font-size:1.3rem;color:var(--linie-hell)}
.p-schild{font-family:var(--zahl);font-size:.54rem;letter-spacing:.1em;
  color:var(--silber-matt);margin-top:3px}
.p-name{font-size:.66rem;color:var(--zelt);line-height:1.15;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.f-gespeichert{margin-top:22px}
.f-liste{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.f-eintrag{display:flex;background:var(--karbon);border:1px solid var(--linie);
  border-radius:10px;overflow:hidden}
.f-eintrag.an{border-color:var(--gruen)}
.f-laden{flex:1;text-align:left;padding:11px 14px}
.f-laden b{display:block;color:var(--zelt);font-size:.95rem}
.f-laden span{font-family:var(--zahl);font-size:.6rem;letter-spacing:.1em;
  color:var(--silber-matt)}
.f-weg{width:38px;color:var(--silber-matt);border-left:1px solid var(--linie)}
.f-weg:hover{color:var(--alarm)}

.p-liste{display:flex;flex-direction:column;gap:5px;max-height:52vh;overflow-y:auto}
.p-eintrag{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  border:1px solid var(--linie);background:var(--nacht);text-align:left}
.p-eintrag:hover{border-color:var(--silber-matt)}
.p-eintrag.an{border-color:var(--gruen);background:color-mix(in srgb,var(--gruen) 10%,transparent)}
.p-eintrag img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.p-e-nr{width:30px;height:30px;border-radius:50%;background:var(--karbon);
  display:flex;align-items:center;justify-content:center;color:var(--silber-matt)}
.p-e-name{flex:1;color:var(--zelt);font-size:.92rem}
.p-e-name small{color:var(--silber-matt);margin-left:5px}
.p-e-pos{font-family:var(--zahl);font-size:.6rem;letter-spacing:.1em;color:var(--gruen)}
.p-e-belegt{font-family:var(--zahl);font-size:.55rem;letter-spacing:.08em;
  color:var(--gold)}

.k-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:28px 0 14px;flex-wrap:wrap}
.k-ea{display:inline-block;font-family:var(--zahl);font-size:.55rem;letter-spacing:.1em;
  color:var(--stahl);border:1px solid color-mix(in srgb,var(--stahl) 35%,transparent);
  border-radius:20px;padding:2px 8px;margin-top:7px;margin-right:5px}
.k-ea.fehlt{color:var(--silber-matt);border-style:dashed;
  border-color:var(--linie-hell)}

.t-modal select[multiple]{height:auto;padding:6px}
.t-modal label small{text-transform:none;letter-spacing:0;opacity:.7}
.k-bild{width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid var(--f)}

@media(max-width:620px){
  .feld{max-width:100%}
  .p-name{font-size:.58rem}
  
  
}

.a-ergebnis{font-family:var(--zahl);font-size:1.5rem;color:var(--zelt);
  padding:6px 14px;border-radius:10px;border:1px solid var(--linie)}
/* Sieg in der Zustandsfarbe, NICHT in --gruen: --gruen zeigt bei
   Isomatte per Alias auf das Haus-Rot, dadurch sahen Sieg und
   Niederlage gleich aus. */
.t-zeile.a-sieg .a-ergebnis{color:var(--zusage);
  border-color:color-mix(in srgb,var(--zusage) 40%,transparent);
  background:color-mix(in srgb,var(--zusage) 10%,transparent)}
.t-zeile.a-remis .a-ergebnis{color:var(--gold);
  border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.t-zeile.a-niederlage .a-ergebnis{color:var(--absage);
  border-color:color-mix(in srgb,var(--absage) 35%,transparent)}

.t-melder{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;
  padding:13px 22px;border-radius:11px;background:var(--karbon-hoch);
  border:1px solid var(--linie-hell);color:var(--zelt);font-size:.9rem;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.9);max-width:min(90vw,520px)}

@media(max-width:760px){
  .t-gross{grid-template-columns:1fr;gap:18px;padding:20px}
  
  
  .t-zeile{grid-template-columns:auto 1fr;gap:14px;padding:14px}
  
  .t-leiste{flex-direction:column;align-items:stretch}
  .t-werkzeuge .t-knopf{flex:1}
}

/* =====================================================================
   ARCHIV  (public/js/archiv.js)
   ---------------------------------------------------------------------
   Entwuerfe vom 29.08., freigegeben: Ergebnis-Tafel fuer die Uebersicht,
   Spielbericht ohne Reiter fuers Detailfenster. Praefix "ar-", damit sich
   nichts mit den alten "a-"-Klassen der Statistik beisst.
   ===================================================================== */
.ar-leiste{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a3);flex-wrap:wrap;margin:var(--a4) 0 0;border-bottom:1px solid var(--linie)}
.ar-reiterzeile{display:flex}
.ar-reiterzeile button{background:none;border:none;padding:12px 18px;cursor:pointer;
  font-family:var(--eng);font-weight:600;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silber-matt);border-bottom:2px solid transparent;
  margin-bottom:-1px}
.ar-reiterzeile button:hover{color:var(--weiss)}
.ar-reiterzeile button.an{color:var(--weiss);border-bottom-color:var(--rot)}
.ar-waehler{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px}
.ar-waehler .f-wahl{min-width:165px}

/* ---- Ergebnis-Tafel ---- */
.ar-tafel{width:100%;border-collapse:collapse}
.ar-tafel .ar-block td{padding:26px 6px 10px}
.ar-tafel .ar-block h3{display:inline-block;margin:0;font-family:var(--anzeige);
  font-weight:800;font-size:1.05rem;color:var(--weiss);letter-spacing:.03em}
.ar-tafel .ar-block span{float:right;font-family:var(--zahl);font-size:.68rem;
  letter-spacing:.1em;color:var(--silber-matt);padding-top:6px}
.ar-p{border-top:1px solid var(--linie);cursor:pointer}
.ar-p:hover td{background:var(--karbon)}
.ar-p:focus-visible{outline:2px solid var(--rot);outline-offset:-2px}
.ar-p td{padding:13px 6px;vertical-align:middle}
.ar-w{width:5px;padding-left:0!important;padding-right:0!important}
.ar-w i{display:block;width:4px;height:34px;border-radius:3px;background:var(--f)}
.ar-d{width:92px;font-family:var(--zahl);font-size:.76rem;color:var(--silber-matt);
  white-space:nowrap;padding-left:12px!important}
.ar-g{font-family:var(--anzeige);font-weight:700;font-size:1.02rem;color:var(--weiss)}
.ar-g small{display:block;font-family:var(--text);font-weight:400;font-size:.76rem;
  color:var(--silber-matt);margin-top:3px;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.ar-abz-z{width:1%;white-space:nowrap}
.ar-abz{display:inline-block;font-family:var(--eng);font-weight:600;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--f) 45%,transparent);color:var(--f);
  background:color-mix(in srgb,var(--f) 10%,transparent)}
.ar-m{width:1%;white-space:nowrap;text-align:right}
.ar-m span{font-family:var(--zahl);font-size:.62rem;color:var(--silber-matt);
  border:1px solid var(--linie);border-radius:5px;padding:3px 6px;margin-left:4px}
.ar-e{width:1%;text-align:right;padding-right:12px!important}
.ar-e b{font-family:var(--zahl);font-weight:500;font-size:1.3rem;padding:7px 14px;
  border-radius:9px;display:inline-block;color:var(--zelt);border:1px solid var(--linie)}
.ar-sieg .ar-e b{color:var(--zusage);
  background:color-mix(in srgb,var(--zusage) 12%,transparent);
  border-color:color-mix(in srgb,var(--zusage) 38%,transparent)}
.ar-remis .ar-e b{color:var(--gold);
  background:color-mix(in srgb,var(--gold) 10%,transparent);
  border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
.ar-niederlage .ar-e b{color:var(--absage);
  background:color-mix(in srgb,var(--absage) 10%,transparent);
  border-color:color-mix(in srgb,var(--absage) 32%,transparent)}

/* ---- Spielbericht: Fenster ---- */
.t-modal.ar-breit{width:min(900px,100%);max-height:90vh}
.ar-kopf{position:relative;padding:24px 28px;border-bottom:1px solid var(--linie);
  background:linear-gradient(140deg,color-mix(in srgb,var(--f) 16%,var(--karbon-hoch)),
              var(--karbon) 62%)}
.ar-zu{position:absolute;top:16px;right:20px;background:none;border:none;cursor:pointer;
  color:var(--silber-matt);font-size:1.1rem;padding:4px 8px;border-radius:8px}
.ar-zu:hover{color:var(--weiss);background:var(--karbon-hoch)}
.ar-kopf-abz{font-family:var(--eng);font-weight:600;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--f);padding-right:40px}
.ar-duell{display:flex;align-items:center;gap:22px;margin-top:12px}
.ar-team{flex:1;font-family:var(--anzeige);font-weight:800;font-size:1.4rem;line-height:1.2}
.ar-team.ar-aus{text-align:right}
.ar-ich{color:var(--weiss)} .ar-gegner{color:var(--silber)}
.ar-stand{font-family:var(--zahl);font-size:2.3rem;line-height:1;padding:8px 20px;
  border-radius:12px;white-space:nowrap;border:1px solid var(--linie);color:var(--zelt)}
.ar-stand.ar-sieg{color:var(--zusage);
  background:color-mix(in srgb,var(--zusage) 12%,transparent);
  border-color:color-mix(in srgb,var(--zusage) 38%,transparent)}
.ar-stand.ar-remis{color:var(--gold);
  border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
.ar-stand.ar-niederlage{color:var(--absage);
  border-color:color-mix(in srgb,var(--absage) 32%,transparent)}
.ar-kopf-zeile{margin-top:12px;font-size:.8rem;color:var(--silber-matt)}

/* ---- Spielbericht: Blatt mit Sprungleiste ---- */
.ar-blatt{display:grid;grid-template-columns:158px 1fr;min-height:0;overflow:hidden}
.ar-sprung{border-right:1px solid var(--linie);padding:18px 0;background:var(--nacht)}
.ar-sprung a{display:block;padding:11px 20px;font-family:var(--eng);font-weight:600;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silber-matt);
  text-decoration:none;border-left:2px solid transparent}
.ar-sprung a:hover{color:var(--weiss)}
.ar-sprung a.an{color:var(--weiss);border-left-color:var(--rot);
  background:color-mix(in srgb,var(--rot) 8%,transparent)}
.ar-sprung a.ar-bea{margin-top:14px;color:var(--rot-hell)}
.ar-sprung a.ar-bea:hover{background:color-mix(in srgb,var(--rot) 12%,transparent)}
/* position:relative ist WICHTIG: die Sprungleiste rechnet mit
   offsetTop der Abschnitte. Ohne einen positionierten Rahmen zaehlt
   offsetTop ab dem Fenster-Overlay, dann springt und markiert sie
   daneben. */
.ar-abschnitte{position:relative;overflow-y:auto;max-height:min(70vh,720px)}
.ar-abschnitte section{padding:20px 26px;border-bottom:1px solid var(--linie)}
.ar-abschnitte section:last-child{border-bottom:none}
.ar-abschnitte h4{margin:0 0 12px;font-family:var(--eng);font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silber-matt)}
.ar-leer{margin:0;font-size:.86rem;color:var(--silber-matt);line-height:1.6}

.ar-ber{padding:14px 16px;border-radius:10px;background:var(--nacht);
  border-left:3px solid var(--f,var(--rot));color:var(--zelt);line-height:1.6;
  font-size:.9rem;margin-bottom:14px}
.ar-gitter{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ar-feld{padding:12px 13px;border-radius:10px;background:var(--nacht);
  border:1px solid var(--linie)}
.ar-feld>span{display:flex;align-items:center;font-family:var(--eng);font-weight:600;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silber-matt)}
.ar-feld>b{display:block;font-weight:600;color:var(--zelt);font-size:.9rem;margin-top:5px}
.ar-feld>b.ar-namen{font-weight:400;font-size:.84rem;line-height:1.5}
.ar-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;border-radius:6px;font-family:var(--zahl);font-style:normal;font-size:.68rem;
  color:var(--nacht);margin-right:7px;padding:0 5px}
.ar-zahl.ja{background:var(--zusage)} .ar-zahl.bu{background:var(--stahl)}
.ar-zahl.vl{background:var(--vielleicht)} .ar-zahl.nn{background:var(--absage);color:#fff}

.ar-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:11px;background:#000;border:1px solid var(--linie)}
.ar-video iframe,.ar-video video{position:absolute;inset:0;width:100%;height:100%;
  border:0;object-fit:contain;background:#000}

/* Das Positionskuerzel bekommt hier keine Farbe aus den Daten mit - in der
   grossen Statistik steht sie inline im Element. Ohne eigenen Hintergrund
   waere die Schrift (var(--nacht)) unsichtbar. */
.ar-abschnitte .sx-pos{background:var(--karbon-hoch);color:var(--silber);
  border:1px solid var(--linie)}
.ar-abschnitte .sx-spieler i{color:var(--gold)}

.ar-galerie{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ar-bild{position:relative;display:block;border-radius:10px;overflow:hidden;
  border:1px solid var(--linie);background:var(--nacht);aspect-ratio:16/10}
.ar-bild:hover{border-color:var(--rot)}
.ar-bild img{width:100%;height:100%;object-fit:cover;display:block}
.ar-bild.kaputt img{display:none}
.ar-bild.kaputt::after{content:'Bild nicht erreichbar';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;
  font-size:.72rem;color:var(--silber-matt)}
.ar-bild span{position:absolute;left:0;right:0;bottom:0;padding:7px 9px;font-size:.72rem;
  color:var(--weiss);background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}

.ar-erg-eingabe{display:flex;align-items:flex-end;gap:10px}
.ar-erg-eingabe label{flex:1}
.ar-doppel{font-family:var(--zahl);font-size:1.3rem;color:var(--silber-matt);
  line-height:44px}

@media(max-width:760px){
  
  .h-wert{flex:1 1 25%;padding:16px 6px 13px}
  .h-wert+.h-wert::before{display:none}
  .ar-leiste{flex-direction:column;align-items:stretch}
  .ar-reiterzeile button{flex:1;padding:12px 4px;font-size:.7rem;letter-spacing:.08em}
  .ar-waehler{flex-direction:column;align-items:stretch}
  .ar-waehler .f-wahl{width:100%}
  /* Tafel: Abzeichen und Marken raus, sonst wird es zu eng */
  .ar-abz-z,.ar-m{display:none}
  .ar-d{width:64px;font-size:.68rem}
  .ar-e b{font-size:1.1rem;padding:6px 10px}
  .ar-duell{flex-wrap:wrap;gap:12px}
  .ar-team{flex:1 1 40%;font-size:1.1rem}
  .ar-stand{font-size:1.8rem;padding:6px 14px}
  /* Sprungleiste wandert ueber den Text */
  .ar-blatt{grid-template-columns:1fr}
  .ar-sprung{display:flex;overflow-x:auto;border-right:none;
    border-bottom:1px solid var(--linie);padding:0}
  .ar-sprung a{border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .ar-sprung a.an{border-left:none;border-bottom-color:var(--rot)}
  .ar-sprung a.ar-bea{margin-top:0;margin-left:auto}
  .ar-abschnitte section{padding:16px 18px}
}
/* =====================================================================
   NEUES SPIEL, KNOPFREIHE UND DAS SPIEL-FENSTER
   ---------------------------------------------------------------------
   n-  = das Eintrage-Formular oben auf der Termine-Seite
   km- = die vier Knoepfe an einer Terminzeile
   sf- = das grosse Fenster aus spielfenster.js
   ===================================================================== */

.n-titel{margin:0 0 10px;font-family:var(--anzeige);font-weight:800;font-size:1.05rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--weiss)}
.n-tipp{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--nacht);
  border:1px solid var(--linie);font-size:.82rem;color:var(--silber-matt);line-height:1.5}
.n-tipp b{color:var(--zelt)}
.n-import{width:100%;margin-bottom:14px;padding:13px;border-radius:11px;cursor:pointer;
  background:color-mix(in srgb,var(--stahl) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--stahl) 45%,transparent);color:var(--stahl);
  font-family:var(--eng);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase}
.n-import:hover{background:color-mix(in srgb,var(--stahl) 22%,transparent);color:var(--weiss)}

/* Die Felder im Formular sehen aus wie die im Fenster. Die Regeln dort
   haengen an .t-modal, greifen hier also nicht - deshalb noch einmal. */

/* Kalender-/Uhr-Zeichen in Datums- und Zeitfeldern. Frueher mit invert()
   umgedreht - seit portal.css html{color-scheme:dark} setzt, zeichnet der
   Browser es schon hell; invert machte es wieder SCHWARZ auf Dunkel. */
.t-modal input[type=date]::-webkit-calendar-picker-indicator,.t-modal input[type=time]::-webkit-calendar-picker-indicator{
  filter:none;opacity:.7;cursor:pointer}

#n-mitte{grid-template-columns:1fr 1fr}
/* Mit Staffel sind es drei Felder - die Regel oben ist staerker als
   .n-drei, weil sie ueber die ID greift. Deshalb hier nochmal. */

/* Hinweiszeile neben den beiden Torfeldern im Anlege-Formular. Steht in
   der dritten Spalte und erklaert, warum man sie meistens leer laesst. */
.n-erg-tipp{align-self:center;font-size:.72rem;line-height:1.35;
  color:var(--silber-matt)}

/* ====================================================================
   AUFSTELLUNGS-POST (aufstellungspost.js)
   Links die Vorschau in voller Groesse, rechts die Einstellungen.
   Unter 900px klappt es untereinander - auf dem Handy waere ein
   zweispaltiges Fenster nicht bedienbar.
   ==================================================================== */
.ap-modal{max-width:1180px;width:96vw}
.ap-warnung{margin:0;padding:9px 11px;border-radius:9px;font-size:.74rem;
  line-height:1.4;color:var(--glut);
  border:1px solid color-mix(in srgb,var(--glut) 40%,transparent);
  background:color-mix(in srgb,var(--glut) 10%,transparent)}
.ap-warnung.weg{display:none}
/* Logo im Kopf einer Archiv-Gruppe und an den Bereichs-Reitern */
.ar-block-logo{height:22px;width:auto;vertical-align:-4px;margin-right:8px}
.ar-reiter-logo{height:18px;width:auto;vertical-align:-3px;margin-right:7px}
/* Laufende Aufnahme */
.ap-fortschritt{margin:8px 0 0;padding:9px 11px;border-radius:9px;
  font-size:.76rem;color:var(--weiss);
  border:1px solid color-mix(in srgb,var(--rot) 45%,transparent);
  background:color-mix(in srgb,var(--rot) 12%,transparent)}
.ap-fortschritt.weg{display:none}
.ap-knopfreihe{display:flex;gap:8px;flex-wrap:wrap}
/* ====================================================================
   HANDY - ueber alle Seiten
   Die Seiten haben ihre eigenen Umbrueche (33 Stellen). Hier steht, was
   fuer ALLE gilt: Eingabefelder mit 16px (sonst zoomt iOS beim Tippen
   hinein), Knoepfe hoch genug fuer den Daumen, Fenster bildschirmfuellend
   mit festem Fuss, damit "Speichern" immer erreichbar bleibt.
   ==================================================================== */
@media(max-width:760px){
  input:not([type=checkbox]):not([type=range]),select,textarea{font-size:16px}
  .t-knopf,.km,.b-f{min-height:42px}
  .t-modal{width:100%;max-height:96dvh;border-radius:14px 14px 0 0}
  .t-overlay{align-items:flex-end}
  .t-modal-fuss{position:sticky;bottom:0;background:var(--karbon);flex-wrap:wrap;
    padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .t-modal-fuss .t-knopf{flex:1 1 45%}
  .t-melder{bottom:max(12px,env(safe-area-inset-bottom));max-width:94vw}
  /* Zusagen-Ampel in der Terminzeile: eigene Zeile statt hinter der Uhrzeit */
  .t-zus,.t-zus-leer{display:flex;margin:6px 0 0}
  /* Startseite: Duell und Zusage-Knoepfe */
  
  
  
  
  /* Statistik: die Spielerspalte bleibt beim Wischen stehen */
  .sx-tabelle th.sx-spieler,.sx-tabelle td.sx-spieler{position:sticky;left:0;z-index:1;
    background:var(--karbon)}
  
  
  /* Post-Fenster und Kader-Regler */
  .ap-knopfreihe .t-knopf{flex:1 1 100%}
  .ap-vorschau{padding:4px}
  .kb-schnitt label{margin:12px 0}
  .kb-schnitt input[type=range]{height:28px}
  /* Admin-Tabellen wischbar */
  .sb-tabelle,.ad-tabelle{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sb-feld{max-width:none;min-width:120px}
  /* Taktikboard: Leiste umbrechen, Knoepfe greifbar */
  .tb-leiste{flex-wrap:wrap}
  .tb-leiste .t-knopf{flex:1 1 auto}
}
/* Forum */
.fo-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--a3)}
.fo-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fo-chip{background:rgba(255,255,255,.05);border:1px solid var(--linie-hell);color:var(--silber);border-radius:8px;
  padding:5px 10px;font-family:var(--eng);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.fo-chip.an{background:var(--f,var(--rot));color:#0A0708;border-color:var(--f,var(--rot))}
.fo-archiv{font-size:.75rem;color:var(--silber-matt);display:flex;align-items:center;gap:6px;margin-left:6px}
.fo-zeile{display:flex;gap:12px;align-items:center;padding:12px 10px;border-radius:12px;border:1px solid var(--linie);
  background:var(--karbon-hoch,rgba(255,255,255,.03));margin-bottom:8px;cursor:pointer}
.fo-zeile:hover{border-color:var(--rot)}
.fo-zeile.zu{opacity:.55}
.fo-mitte{flex:1;min-width:0}
.fo-titel{font-family:var(--anzeige);font-weight:800;font-size:1rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fo-unter{font-size:.76rem;color:var(--silber-matt);margin-top:2px}
.fo-unter b{color:var(--silber)}
.fo-vorschau{font-size:.82rem;color:var(--silber);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-pfeil{color:var(--silber-matt);font-size:1.4rem}
.fo-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;border:2px solid var(--linie-hell)}
.fo-av.fo-leer{display:inline-flex;align-items:center;justify-content:center;background:var(--karbon-hoch);
  font-family:var(--anzeige);font-weight:900;color:var(--silber)}
.fo-tag{font-family:var(--eng);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:6px;
  border:1px solid var(--f,#8E9195);color:var(--f,#8E9195)}
.fo-beitrag{padding:6px 0 14px;border-bottom:1px solid var(--linie)}
.fo-h2{font-family:var(--anzeige);font-weight:900;font-size:1.5rem;margin:8px 0 6px}
.fo-link{margin-left:8px;font-size:.75rem;color:var(--stahl)}
.fo-wer{display:flex;align-items:center;gap:10px;margin:12px 0 6px}
.fo-wer b{font-size:.92rem}
.fo-zeit{font-size:.74rem;color:var(--silber-matt)}
.fo-quelle{font-family:var(--eng);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:5px;
  border:1px solid var(--linie-hell);color:var(--silber-matt)}
.fo-quelle.hub{color:var(--rot);border-color:var(--rot)}
.fo-quelle.discord{color:#8B9CF5;border-color:#8B9CF5}
.fo-text{font-size:.92rem;line-height:1.55;white-space:normal;word-break:break-word}
.fo-antwort{padding:8px 12px 12px;border-left:2px solid var(--linie-hell);margin:8px 0 8px 18px}
.fo-schreiben{display:flex;gap:10px;align-items:flex-start;margin-top:var(--a4)}
.fo-schreiben textarea{flex:1;background:var(--nacht);border:1px solid var(--linie-hell);border-radius:10px;padding:10px;color:var(--weiss);font-family:var(--text);resize:vertical}
.fo-schreiben textarea:focus{outline:none;border-color:var(--rot)}
@media(max-width:760px){.fo-vorschau{white-space:normal}.fo-schreiben{flex-wrap:wrap}}
.fo-weg{float:right;background:none;border:1px solid var(--linie-hell);color:var(--silber-matt);border-radius:6px;
  width:26px;height:26px;cursor:pointer;margin-top:10px}
.fo-weg:hover{border-color:var(--rot);color:var(--rot)}
.fo-weg-beitrag{margin-top:6px;color:var(--rot)}
/* Streamplan-Fenster */
.st-tage{display:flex;gap:10px;flex-wrap:wrap}
.st-tage label{display:flex;align-items:center;gap:4px;font-size:.8rem}
.st-zeile{display:grid;grid-template-columns:82px 1fr 1fr 110px;gap:6px;align-items:center;margin-bottom:6px}
.st-zeile b{font-family:var(--eng);font-size:.7rem;letter-spacing:.08em;color:var(--silber-matt)}
.st-zeile input{min-width:0;font-size:.78rem;padding:6px 8px}
@media(max-width:760px){.st-zeile{grid-template-columns:1fr 1fr;} .st-zeile b{grid-column:1/-1}}
/* Taktikboard: Text je Schritt */
.tb-text{flex:1 1 100%;min-width:0;background:var(--nacht);border:1px solid var(--linie-hell);
  border-radius:8px;padding:8px 10px;color:var(--weiss);font-family:var(--text);font-size:.8rem}
.tb-text:focus{outline:none;border-color:var(--rot)}
/* Taktikboard: Zeitregler und aktiver Schritt */
.tb-zeit{width:100%;margin:8px 0 0;accent-color:var(--rot)}
.tb-zeit:disabled{opacity:.35}
.tb-s.an{border-color:var(--rot);color:var(--weiss)}
/* Anpfiff als Duell */

 

.h-zusage{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}

 
 
/* Countdown in Bloecken */
.h-uhr{display:flex;gap:6px;justify-content:flex-end}

@media(max-width:760px){.h-uhr{justify-content:flex-start}
  }
/* Direktvergleich in der Statistik */
.sx-haken{margin:0 6px 0 0;accent-color:var(--rot);vertical-align:middle}
.vg-tafel{padding:var(--a3);margin-bottom:var(--a3)}

.vg-besser{color:var(--zusage)}
/* Formkurve: Laenge waehlen */
.pr-formwahl{margin-left:10px}
.pr-formwahl button{background:none;border:1px solid var(--linie-hell);color:var(--silber-matt);
  border-radius:6px;padding:1px 7px;margin-left:4px;font-size:.66rem;cursor:pointer}
.pr-formwahl button.an{border-color:var(--rot);color:var(--weiss)}
.pr-wann{display:block;font-size:.66rem;color:var(--silber-matt);font-style:normal;margin-top:2px}
/* Meldung mit Knopf (Rueckgaengig) */
.t-melder-knopf{display:flex;align-items:center;gap:14px}
.t-melder-knopf button{background:var(--rot);color:var(--auf-marke);border:none;border-radius:8px;
  padding:6px 12px;font-family:var(--anzeige);font-weight:800;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
/* Zusagen-Ampel in der Terminzeile */
.t-zus{display:inline-flex;gap:4px;margin-left:10px;vertical-align:middle}
.t-zus b{min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:6px;
  text-align:center;font-family:var(--anzeige);font-size:.7rem;color:#0A0708}
.t-zus .zj{background:var(--zusage)} .t-zus .zv{background:var(--gold)}
.t-zus .zn{background:var(--rot);color:var(--auf-marke)} .t-zus .zb{background:var(--stahl)}
.t-zus-leer{margin-left:10px;font-size:.68rem;color:var(--silber-matt)}
/* Hinweis unter dem Feld, wo Bild und Video jetzt liegen */
.f-hinweis{font-size:.72rem;color:var(--silber-matt);line-height:1.35}
/* Die gezeichnete Sammelkarte im Profil: der Kasten tritt zurueck, die
   Karte bringt Rahmen und Schatten selbst mit. */
.pr-karte.sammel{background:none;border:none;padding:0;box-shadow:none}
/* Saison und Block im Admin-Bereich */
.sb-tabelle th{text-align:left;font-family:var(--anzeige);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--silber-matt);
  padding-bottom:6px}
.sb-tabelle td{vertical-align:middle}
.sb-feld{width:100%;max-width:180px;background:var(--nacht);
  border:1px solid var(--linie-hell);border-radius:8px;padding:7px 9px;
  color:var(--weiss);font-family:var(--text);font-size:.8rem}
.sb-feld:focus{outline:none;border-color:var(--rot)}
.ap-knopfreihe .t-knopf{flex:1 1 auto}
.ap-leib{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;
  align-items:start}
.ap-vorschau{background:var(--karbon);border:1px solid var(--linie-hell);
  border-radius:12px;padding:8px;min-height:220px;display:flex;
  align-items:center;justify-content:center}
.ap-rechts{display:flex;flex-direction:column;gap:14px}
.ap-block{border:1px solid var(--linie-hell);border-radius:12px;padding:12px 14px;
  background:rgba(255,255,255,.02)}
.ap-h{margin:0 0 10px;font-family:var(--anzeige);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase}
.ap-h.gold{color:var(--gold)}
.ap-h.glut{color:var(--glut)}
.ap-h.rot{color:var(--rot)}
.ap-gitter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ap-gitter label{display:block;font-size:.7rem;color:var(--silber-matt)}
.ap-gitter .ap-breit{grid-column:1 / -1}
.ap-gitter select,.ap-gitter input{width:100%;margin-top:4px;
  background:var(--nacht);border:1px solid var(--linie-hell);
  border-radius:8px;padding:8px 9px;color:var(--weiss);
  font-family:var(--text);font-size:.8rem}
.ap-gitter select:focus,.ap-gitter input:focus{outline:none;border-color:var(--rot)}
@media(max-width:900px){
  .ap-leib{grid-template-columns:1fr}
  .ap-gitter{grid-template-columns:1fr}
}
#n-mitte:has(#n-titel){grid-template-columns:2fr 1fr 1.4fr}

.n-speichern{width:100%;margin-top:4px;padding:15px;border-radius:12px;cursor:pointer;
  background:var(--rot);border:none;color:var(--auf-marke);font-family:var(--eng);font-weight:700;
  font-size:.86rem;letter-spacing:.18em;text-transform:uppercase}
.n-speichern:hover{background:var(--rot-hell)}
.n-speichern:disabled{opacity:.5;cursor:default}

/* ---- Knopfreihe an der Terminzeile ---- */
/* Immer mit .t-mini davor: die alte Regel ".t-mini button" ist genauer
   als ein einzelnes ".km" und wuerde Farbe und Groesse sonst gewinnen. */

/* ---- Das grosse Fenster ---- */
.t-modal.sf-modal{width:min(820px,100%)}
.sf-reihe{display:grid;gap:12px;grid-template-columns:1fr 1fr}
/* NICHT display:block auf die Label setzen - die Regel .t-modal label
   stapelt Beschriftung und Feld per flex-column. Als Block stuenden sie
   nebeneinander. */
.sf-modal label>span{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sf-modal label small{font-weight:400;font-size:.66rem;letter-spacing:.06em;
  text-transform:none;color:var(--silber-matt);margin-left:6px}
.sf-modal .t-modal-leib input,.sf-modal .t-modal-leib select,
.sf-modal .t-modal-leib textarea{width:100%}

.sf-ergebnis{padding:16px;border-radius:12px;background:var(--nacht);
  border:1px solid var(--linie);margin:4px 0 6px}
.sf-ergebnis h4{margin:0 0 12px;text-align:center;font-family:var(--eng);font-weight:600;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silber-matt)}
.sf-stand{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.sf-stand span{font-family:var(--eng);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--silber-matt);max-width:160px;text-align:right}
.sf-stand span.sf-rechts{text-align:left}
.sf-modal .sf-stand input{width:82px;flex:0 0 auto;margin:0;text-align:center;
  font-family:var(--zahl);font-size:1.35rem;padding:9px 6px}
.sf-stand b{font-family:var(--zahl);font-size:1.35rem;color:var(--silber-matt)}
.sf-hinweis{margin:11px 0 0;text-align:center;font-size:.76rem;color:var(--silber-matt)}

.sf-zone{display:flex;align-items:center;justify-content:center;padding:26px 16px;
  border-radius:12px;border:1px dashed var(--linie-hell);background:var(--nacht);
  cursor:pointer;color:var(--silber-matt);font-size:.86rem;margin-bottom:10px}
.sf-zone:hover,.sf-zone.drueber{border-color:var(--rot);color:var(--zelt);
  background:color-mix(in srgb,var(--rot) 7%,var(--nacht))}
.sf-zone.laedt{opacity:.55;pointer-events:none}
.sf-zone.laedt span::after{content:' … wird hochgeladen'}
.sf-linkzeile{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.sf-linkzeile input{margin:0;flex:1;min-width:0}
.sf-linkzeile .t-knopf{flex-shrink:0}

.sf-galerie{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sf-leer{grid-column:1/-1;margin:0;font-size:.82rem;color:var(--silber-matt)}
.sf-bild{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--linie);
  background:var(--nacht);aspect-ratio:16/10}
.sf-bild img{width:100%;height:100%;object-fit:cover;display:block}
.sf-bild.kaputt img{display:none}
.sf-bild.kaputt::after{content:'nicht erreichbar';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:.7rem;color:var(--silber-matt)}
.sf-bild button{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:7px;
  border:none;cursor:pointer;background:rgba(0,0,0,.68);color:#fff;font-size:.76rem;
  display:flex;align-items:center;justify-content:center}
.sf-bild button:hover{background:var(--absage)}
.sf-bild span{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;font-size:.68rem;
  color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}

@media(max-width:760px){
  #n-mitte,#n-mitte:has(#n-titel),.sf-reihe{
    grid-template-columns:1fr}
  
  .sf-stand span{max-width:none;text-align:center;flex:1 1 100%}
}
/* Ergebnis-Anzeige, wo frueher die Zusagen standen */

.a-ergebnis.gross{font-size:2rem;padding:12px 22px}
/* Vergangene Termine: nur fuer Manager, ueber den Schalter in der Leiste */
.t-knopf.an{border-color:var(--rot);color:var(--weiss);
  background:color-mix(in srgb,var(--rot) 14%,transparent)}
.t-knopf.rot{border-color:color-mix(in srgb,var(--absage) 50%,transparent);
  color:var(--absage)}
.t-knopf.rot:hover{background:var(--absage);color:#fff;border-color:var(--absage)}

/* =====================================================================
   KALENDER & HISTORIE  (public/js/bereiche2.js)
   Listenansicht: Monatsbloecke zum Zuklappen, darin nach Tagen gruppiert.
   Das alte Monatsraster bleibt daneben bestehen - nur dort stehen die
   Abwesenden.
   ===================================================================== */
.kal-leiste{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;
  margin-bottom:var(--a4)}

.kal-block{margin-bottom:var(--a4);border:1px solid var(--linie);border-radius:14px;
  overflow:hidden;background:var(--karbon)}
.kal-block-kopf{display:flex;align-items:center;gap:10px;width:100%;padding:15px 18px;
  background:none;border:none;cursor:pointer;text-align:left;
  border-left:3px solid var(--rot)}
.kal-block-kopf:hover{background:var(--karbon-hoch)}
.kal-block-kopf span{font-family:var(--anzeige);font-weight:800;font-size:1rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--weiss)}
.kal-block-kopf i{font-style:normal;font-family:var(--zahl);font-size:.72rem;
  color:var(--silber-matt)}
.kal-block-kopf b{margin-left:auto;color:var(--silber-matt);font-size:.7rem}
.kal-block-leib{padding:6px 14px 16px}

.kal-partie{margin-bottom:9px;border-radius:11px;background:var(--nacht);
  border:1px solid var(--linie);border-left:3px solid var(--f);overflow:hidden}
.kal-partie-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 14px 0;font-family:var(--eng);font-weight:600;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase}
.kal-wett{color:var(--f)}
.kal-st,.kal-zeit{color:var(--silber-matt)}

.kal-auf{margin-left:auto;width:26px;height:26px;border-radius:7px;cursor:pointer;
  background:var(--karbon-hoch);border:1px solid var(--linie);color:var(--silber-matt);
  font-size:.62rem;display:flex;align-items:center;justify-content:center}
.kal-auf:hover{color:var(--weiss);border-color:var(--rot)}

.kal-duell{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:12px 14px 14px}
.kal-team{flex:1;font-family:var(--anzeige);font-weight:700;font-size:1rem;
  color:var(--silber)}
.kal-team.ich{color:var(--weiss)}
.kal-team:first-of-type{text-align:right}

.kal-stand{font-family:var(--zahl);font-size:1.1rem;padding:6px 13px;border-radius:8px;
  white-space:nowrap;border:1px solid var(--linie);color:var(--zelt);flex-shrink:0}
.kal-partie.a-sieg .kal-stand{color:var(--zusage);
  background:color-mix(in srgb,var(--zusage) 12%,transparent);
  border-color:color-mix(in srgb,var(--zusage) 38%,transparent)}
.kal-partie.a-remis .kal-stand{color:var(--gold);
  border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
.kal-partie.a-niederlage .kal-stand{color:var(--absage);
  border-color:color-mix(in srgb,var(--absage) 32%,transparent)}
.kal-partie.offen .kal-stand{font-family:var(--eng);font-size:.72rem;letter-spacing:.14em;
  color:var(--silber-matt)}

.kal-detail{padding:0 14px 14px;border-top:1px solid var(--linie);margin-top:2px;
  padding-top:12px}
.kal-bericht{margin:0 0 8px;color:var(--zelt);font-size:.88rem;line-height:1.6}
.kal-notiz{margin:0 0 8px;color:var(--silber-matt);font-size:.84rem;line-height:1.6}
.kal-fakten{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.kal-fakten span{font-family:var(--zahl);font-size:.62rem;color:var(--silber-matt);
  border:1px solid var(--linie);border-radius:5px;padding:3px 7px}
.kal-tore{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-size:.84rem;
  color:var(--zelt)}
.kal-tore b{font-weight:600;color:var(--weiss)}

@media(max-width:760px){
  .kal-leiste{flex-direction:column;align-items:stretch}
  
  /* Am Handy die Wappen weg und drei feste Spalten - sonst rutscht die
     zweite Mannschaft in eine eigene Zeile und steht schief. */
  .kal-duell{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
  /* .leer ist genauer als .kal-wappen allein - ohne die zweite Angabe
     blieben die Platzhalter stehen und das Gitter haette fuenf Kacheln. */
  
  .kal-team{font-size:.86rem;text-align:right}
  .kal-team:last-of-type{text-align:left}
  .kal-partie-kopf{font-size:.6rem;letter-spacing:.06em}
}
/* ---- EA-Auswahl (Import und Stats-Abgleich) ---- */
.t-modal.ea-modal{width:min(820px,100%)}
.ea-laedt{padding:34px 10px;text-align:center;color:var(--silber-matt);
  font-family:var(--eng);letter-spacing:.16em;text-transform:uppercase;font-size:.76rem}
.ea-unter{margin:0 0 var(--a4);text-align:center;color:var(--silber-matt);font-size:.86rem}
.ea-gruppe{margin-bottom:var(--a4)}
.ea-gruppe-kopf{display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-radius:9px;border-left:3px solid var(--f);
  background:color-mix(in srgb,var(--f) 10%,var(--nacht));margin-bottom:10px}
.ea-gruppe-kopf span{font-family:var(--eng);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--f)}
.ea-gruppe-kopf i{font-style:normal;font-family:var(--zahl);font-size:.64rem;
  color:var(--silber-matt)}
.ea-fehler{margin:0;padding:12px 14px;font-size:.82rem;color:var(--silber-matt)}
.ea-gitter{display:grid;gap:9px;grid-template-columns:1fr 1fr}
.ea-karte{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;text-align:left;padding:12px 15px;border-radius:11px;
  background:var(--karbon);border:1px solid var(--linie);cursor:pointer}
.ea-karte:hover{border-color:var(--rot);background:var(--karbon-hoch)}
.ea-wann{font-family:var(--zahl);font-size:.66rem;letter-spacing:.08em;
  color:var(--silber-matt)}
.ea-geg{font-family:var(--anzeige);font-weight:700;font-size:.96rem;color:var(--weiss);
  text-transform:uppercase;letter-spacing:.03em}
.ea-stand{grid-row:1/3;grid-column:2;font-family:var(--zahl);font-size:1.35rem;
  color:var(--zusage);white-space:nowrap}

.n-ea-hinweis{margin:0 0 10px;padding:10px 14px;border-radius:10px;font-size:.8rem;
  color:var(--zelt);background:color-mix(in srgb,var(--stahl) 12%,var(--nacht));
  border:1px solid color-mix(in srgb,var(--stahl) 40%,transparent)}
.n-ea-hinweis.weg{display:none}

@media(max-width:760px){.ea-gitter{grid-template-columns:1fr}}
/* =====================================================================
   ADMIN: SERVER-STATUS UND AKTIVITAETS-PROTOKOLL
   ===================================================================== */
.sv-karten{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sv-karte{padding:16px 18px;border-radius:12px;background:var(--nacht);
  border:1px solid var(--linie)}
.sv-schild{display:block;font-family:var(--eng);font-weight:600;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--silber-matt)}
.sv-wert{display:block;margin:8px 0 12px;font-family:var(--anzeige);font-weight:800;
  font-size:1.5rem;color:var(--weiss);font-variant-numeric:tabular-nums}

.sv-klein{display:block;margin-top:8px;font-family:var(--zahl);font-size:.64rem;
  color:var(--silber-matt)}

.prot-leiste{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  margin-bottom:10px}
.prot-leiste input{flex:1;min-width:200px;margin:0;background:var(--nacht);
  border:1px solid var(--linie-hell);border-radius:var(--r1);padding:11px 13px;
  color:var(--weiss);font-family:var(--text);font-size:var(--tk)}
.prot-leiste input:focus{outline:none;border-color:var(--rot)}
.prot-leiste select{margin:0;width:auto;background:var(--nacht);
  border:1px solid var(--linie-hell);border-radius:var(--r1);padding:11px 13px;
  color:var(--weiss);font-family:var(--text);font-size:var(--tk)}

.prot-liste{max-height:430px;overflow-y:auto;border-radius:11px;background:var(--nacht);
  border:1px solid var(--linie);padding:6px 0}
.prot-zeile{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  padding:8px 15px;border-bottom:1px solid var(--linie)}
.prot-zeile:last-child{border-bottom:none}
.prot-zeile:hover{background:var(--karbon)}
.prot-zeit{font-family:var(--zahl);font-size:.66rem;color:var(--silber-matt);
  white-space:nowrap;min-width:132px}
.prot-wer{font-weight:600;color:var(--rot-hell);font-size:.84rem}
.prot-was{color:var(--zelt);font-size:.84rem}
.prot-angabe{font-family:var(--zahl);font-size:.72rem;color:var(--silber-matt);
  overflow-wrap:anywhere}

@media(max-width:760px){
  .prot-leiste{flex-direction:column;align-items:stretch}
  .prot-leiste input,.prot-leiste select,.prot-leiste .t-knopf{width:100%}
  .prot-zeit{min-width:0;flex:1 1 100%}
}
/* Die Knopfreihe auf der grossen Karte sitzt unter dem Ergebnis */

/* Das "vs" zwischen den Mannschaftsnamen bleibt zurueckhaltend */
.t-titel i,.ar-g i{font-style:normal;
  font-family:var(--eng);font-weight:600;font-size:.7em;letter-spacing:.1em;
  text-transform:uppercase;color:var(--silber-matt);padding:0 4px}
/* Positionsfarben im Spielbericht - dort kommt keine Farbe aus den Daten */
.ar-abschnitte .sx-pos{min-width:76px}
.ar-abschnitte .sx-pos.TW{background:var(--gold);color:var(--nacht);border:none}
.ar-abschnitte .sx-pos.DEF{background:var(--stahl);color:var(--nacht);border:none}
.ar-abschnitte .sx-pos.MF{background:var(--zusage);color:var(--nacht);border:none}
.ar-abschnitte .sx-pos.ST{background:var(--rot-hell);color:var(--auf-marke);border:none}
.sx-pos{min-width:76px}
/* =====================================================================
   VEREINE, LOGOS UND EA-NAMEN  (Medien-Bereich)
   ===================================================================== */
.vr-leiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.vr-leiste input{flex:1;min-width:200px;margin:0;background:var(--nacht);
  border:1px solid var(--linie-hell);border-radius:var(--r1);padding:11px 13px;
  color:var(--weiss);font-family:var(--text);font-size:var(--tk)}
.vr-leiste input:focus{outline:none;border-color:var(--rot)}

.vr-liste{display:grid;gap:9px;max-height:520px;overflow-y:auto;padding-right:4px}
.vr-karte{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;
  background:var(--nacht);border:1px solid var(--linie)}
.vr-logo{position:relative;width:46px;height:46px;flex-shrink:0;border-radius:10px;
  overflow:hidden;background:var(--karbon-hoch);border:1px solid var(--linie);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.vr-logo img{width:100%;height:100%;object-fit:contain}
.vr-logo.leer img{display:none}
.vr-logo>span{font-family:var(--anzeige);font-weight:800;font-size:1.1rem;
  color:var(--silber-matt)}
.vr-logo i{position:absolute;left:0;right:0;bottom:0;padding:2px;text-align:center;
  font-style:normal;font-family:var(--eng);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.72);opacity:0}
.vr-logo:hover i{opacity:1}
.vr-logo:hover{border-color:var(--rot)}
.vr-logo.laedt{opacity:.5;pointer-events:none}

.vr-mitte{flex:1;min-width:0}
.vr-mitte b{display:block;font-family:var(--anzeige);font-weight:700;font-size:.95rem;
  color:var(--weiss)}
.vr-spiele{display:block;margin:2px 0 7px;font-family:var(--zahl);font-size:.62rem;
  color:var(--silber-matt)}
.vr-alias{width:100%;margin:0;background:var(--karbon);border:1px solid var(--linie);
  border-radius:8px;padding:8px 11px;color:var(--zelt);font-family:var(--text);
  font-size:.82rem}
.vr-alias:focus{outline:none;border-color:var(--rot)}
.vr-speichern{flex-shrink:0}

/* Die EA-Zeile unter dem Mannschaftsnamen im Kalender */
.kal-ea{display:block;margin-top:2px;font-family:var(--zahl);font-weight:400;
  font-size:.6rem;letter-spacing:.04em;color:var(--silber-matt)}

@media(max-width:760px){
  .vr-karte{flex-wrap:wrap}
  .vr-mitte{flex:1 1 100%;order:3}
  .vr-speichern{margin-left:auto}
  .kal-ea{display:none}
}
/* Archiv: zweite Filterzeile (Saison) und das Duell mit Logos */
.ar-saisonzeile{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:12px 0 4px}
.ar-saisonzeile>span{font-family:var(--eng);font-weight:600;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--silber-matt);
  margin-right:4px}
.ar-saisonzeile button{padding:6px 13px;border-radius:20px;cursor:pointer;
  background:var(--karbon);border:1px solid var(--linie);color:var(--silber-matt);
  font-family:var(--zahl);font-size:.72rem}
.ar-saisonzeile button:hover{color:var(--weiss);border-color:var(--linie-hell)}
.ar-saisonzeile button.an{background:color-mix(in srgb,var(--rot) 16%,transparent);
  border-color:var(--rot);color:var(--weiss)}

.ar-duell-z{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ar-duell-z b{font-family:var(--anzeige);font-weight:700;font-size:1rem;
  color:var(--silber);line-height:1.25}
.ar-duell-z b.ich{color:var(--weiss)}
.ar-duell-z i{font-style:normal;font-family:var(--eng);font-weight:600;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--silber-matt)}
.ar-wappen{width:26px;height:26px;border-radius:50%;object-fit:contain;flex-shrink:0;
  background:var(--karbon-hoch);border:1px solid var(--linie)}
.ar-wappen.leer{display:flex;align-items:center;justify-content:center;
  font-family:var(--anzeige);font-weight:700;font-size:.72rem;color:var(--silber-matt)}
.ar-ea{display:block;font-family:var(--zahl);font-weight:400;font-size:.58rem;
  letter-spacing:.04em;color:var(--silber-matt);margin-top:1px}

@media(max-width:760px){
  .ar-wappen{display:none}
  .ar-duell-z{gap:6px}
  .ar-duell-z b{font-size:.88rem}
  .ar-ea{display:none}
}
/* =====================================================================
   SPIELBERICHT: OHNE SEITENLEISTE, MIT SPIELVERLAUF
   ===================================================================== */
.ar-abschnitte{padding:0}
.ar-werkzeuge{display:flex;gap:9px;flex-wrap:wrap;padding:16px 26px 0}
.ar-kopf .ar-duell{gap:14px}

.vl-raum{display:grid;gap:16px;grid-template-columns:1fr 250px;align-items:start}
.vl-strang{display:grid;gap:7px}
.vl-zeile{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;
  background:var(--nacht);border:1px solid var(--linie);border-left:3px solid var(--zusage)}
.vl-zeile.gelb{border-left-color:var(--vielleicht)}
.vl-zeile.gelbrot,.vl-zeile.rot{border-left-color:var(--absage)}
.vl-zeile.eigentor{border-left-color:var(--absage)}
.vl-zeile.fremd{opacity:.72;border-left-style:dashed}
.vl-min{font-family:var(--zahl);font-size:.8rem;color:var(--silber-matt);min-width:34px;
  text-align:right}
.vl-zeichen{font-size:1.05rem;line-height:1}
.vl-text b{display:block;font-weight:600;color:var(--weiss);font-size:.92rem}
.vl-vorlage{display:block;margin-top:2px;font-size:.78rem;color:var(--stahl)}
.vl-fremd{display:inline-block;margin-top:2px;font-family:var(--zahl);font-size:.6rem;
  color:var(--silber-matt);border:1px solid var(--linie);border-radius:4px;padding:1px 5px}

.vl-mvp{text-align:center;padding:22px 16px;border-radius:12px;background:var(--nacht);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
.vl-stern{display:block;font-size:2rem;line-height:1;color:var(--gold)}
.vl-mvp-schild{display:block;margin:9px 0 6px;font-family:var(--eng);font-weight:600;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.vl-mvp b{font-family:var(--anzeige);font-weight:800;font-size:1.05rem;color:var(--weiss)}

/* ---- Bearbeiten-Fenster ---- */
.vf-titel{margin:var(--a4) 0 6px;font-family:var(--eng);font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silber-matt)}
.vf-titel:first-child{margin-top:0}
.vf-liste{display:grid;gap:7px;margin-bottom:10px}
.vf-zeile{display:grid;gap:7px;align-items:center;
  grid-template-columns:62px 210px 1fr 1fr auto}
.vf-art{font-size:.8rem!important}
.vf-zeile input,.vf-zeile select{margin:0;background:var(--nacht);
  border:1px solid var(--linie-hell);border-radius:8px;padding:9px 10px;color:var(--weiss);
  font-family:var(--text);font-size:.84rem;width:100%}
.vf-zeile select:disabled{opacity:.4}

.vf-weg{width:32px;height:32px;border-radius:8px;cursor:pointer;background:transparent;
  border:1px solid var(--linie);color:var(--absage)}
.vf-weg:hover{background:var(--absage);color:#fff;border-color:var(--absage)}
#vf-mvp{margin:0;background:var(--nacht);border:1px solid var(--linie-hell);
  border-radius:8px;padding:10px 12px;color:var(--weiss);width:100%}
.vf-tabelle input{width:62px;margin:0;padding:6px 4px;text-align:center;
  background:var(--nacht);border:1px solid var(--linie);border-radius:6px;
  color:var(--weiss);font-family:var(--zahl);font-size:.8rem}

@media(max-width:760px){
  .vl-raum{grid-template-columns:1fr}
  .ar-werkzeuge{padding:14px 18px 0}
  .vf-zeile{grid-template-columns:1fr 1fr;gap:6px}
  .vf-zeile [data-vf=spieler],.vf-zeile [data-vf=vorlage]{grid-column:1/3}
}
/* Spielfeld: auf schmalen Fenstern noch etwas kleiner, sonst kleben die
   Schilder wieder aneinander */
@media(max-width:620px){
  .platz{width:13%}
  .platz .p-tafel{font-size:.58rem;max-width:min(84px,150%);padding:3px 5px}
  .p-schild.oben{font-size:.48rem}
}
/* Positionskuerzel liegt auf dem Kreis statt darueber */
.p-kreis{position:relative}
.platz{position:absolute}
/* Das Schild sitzt UEBER dem Kreis, nicht darin - .p-kreis schneidet
   alles ab, was ueber den Rand ragt (overflow:hidden fuer die runden
   Bilder), das Kuerzel war dadurch halb abgeschnitten.
   NUR auf dem alten Spielfeld (.platz): global erbte der Positions-Chip
   .p-pos des Design-Systems sonst position:absolute und sprang aus seiner
   Zelle (Kabine, Stats, Spielerprofil). Das Kader-Feld heisst inzwischen .pl-pos. */
.platz .p-pos{position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  padding:2px 7px;border-radius:6px;background:rgba(7,10,8,.96);
  border:1px solid var(--f);font-family:var(--eng);
  font-weight:700;font-size:.55rem;letter-spacing:.12em;color:var(--weiss);
  white-space:nowrap;pointer-events:none;z-index:3}

/* Logos etwas groesser - klein waren sie nicht zu erkennen */
.ar-wappen{width:34px;height:34px}
.ar-wappen.leer{font-size:.86rem}
.ar-duell-z b{font-size:1.05rem}

.kal-team{font-size:1.05rem}
.vr-logo{width:54px;height:54px}
@media(max-width:760px){
  .ar-wappen{width:30px;height:30px}
}
/* EA-ID: Vorschlag und Rueckmeldung unter dem Feld */
.k-ea-hinweis{display:block;margin-top:5px;font-size:.72rem;color:var(--silber-matt);
  line-height:1.5}
.k-ea-hinweis.passt{color:var(--zusage)}
.k-ea-hinweis.unbekannt{color:var(--vielleicht)}
.k-ea-hinweis button{background:color-mix(in srgb,var(--rot) 16%,transparent);
  border:1px solid var(--rot);border-radius:6px;padding:2px 9px;cursor:pointer;
  color:var(--weiss);font-family:var(--text);font-size:.76rem}
.k-ea-hinweis button:hover{background:var(--rot)}
.k-ea-hinweis i{font-style:normal;font-family:var(--zahl);font-size:.64rem;
  color:var(--silber-matt);margin-left:5px}
/* Logos noch eine Stufe groesser - im Kalender und Archiv sind sie das
   Erkennungsmerkmal, nicht Zierrat */
.ar-wappen{width:44px;height:44px}
.ar-wappen.leer{font-size:1rem}
.ar-duell-z b{font-size:1.15rem}

.kal-team{font-size:1.18rem}
.kal-stand{font-size:1.3rem;padding:8px 16px}
.kal-partie.offen .kal-stand{font-size:.78rem}
.vr-logo{width:64px;height:64px}
@media(max-width:760px){
  .ar-wappen{width:34px;height:34px}
}
/* Node-Fassung im Admin-Bereich */
.nd-kasten{margin-bottom:var(--a3)}
.nd-zeile{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:14px 16px;
  border-radius:11px;background:var(--nacht);border:1px solid var(--linie)}
.nd-zeile.alt{border-color:color-mix(in srgb,var(--vielleicht) 40%,transparent)}
.nd-zeile.gut{border-color:color-mix(in srgb,var(--zusage) 30%,transparent)}
.nd-zeile>div{flex:1;min-width:200px}
.nd-zeile b{display:block;font-weight:600;color:var(--weiss);font-size:.92rem}
.nd-zeile small{display:block;margin-top:3px;font-size:.78rem;color:var(--silber-matt);
  line-height:1.5}
.nd-punkt{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.nd-punkt.gruen{background:var(--zusage)}
.nd-punkt.gelb{background:var(--vielleicht)}
.nd-punkt.grau{background:var(--silber-matt)}
/* Spielerbild im Kader-Fenster */
.kb-reihe{display:flex;gap:14px;align-items:center;margin-bottom:var(--a3)}
.kb-vorschau{position:relative;width:76px;height:76px;flex-shrink:0;border-radius:50%;
  overflow:hidden;background:var(--karbon-hoch);border:1px solid var(--linie-hell);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.kb-vorschau img{width:100%;height:100%;object-fit:cover}
/* Mit eigenem Bild wird die Vorschau hochkant - so sieht man beim
   Schieben genau das, was spaeter in der Kaderliste steht. */
.kb-vorschau.hoch{width:84px;height:106px;border-radius:12px}
.kb-vorschau.leer img{display:none}
.kb-vorschau>span{font-family:var(--anzeige);font-weight:800;font-size:1.6rem;
  color:var(--silber-matt)}
.kb-vorschau i{position:absolute;left:0;right:0;bottom:0;padding:3px;text-align:center;
  font-style:normal;font-family:var(--eng);font-size:.52rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.72);opacity:0}
.kb-vorschau:hover i{opacity:1}
.kb-vorschau:hover{border-color:var(--rot)}
.kb-vorschau.laedt{opacity:.5;pointer-events:none}
.kb-text{flex:1;min-width:0}
.kb-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Rechte-Uebersicht im Admin */
.rt-tabelle{width:100%;border-collapse:collapse;min-width:640px}
.rt-tabelle th{padding:10px 8px;text-align:center;font-family:var(--eng);font-weight:600;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--f);
  border-bottom:2px solid color-mix(in srgb,var(--f) 40%,transparent);white-space:nowrap}
.rt-tabelle th:first-child{text-align:left;color:var(--silber-matt);
  border-bottom-color:var(--linie)}
.rt-tabelle th.fehlt{opacity:.4}
.rt-tabelle th.ich i{display:block;font-style:normal;font-family:var(--zahl);
  font-size:.55rem;color:var(--weiss);letter-spacing:0}
.rt-tabelle td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--linie);
  font-size:1rem}
.rt-tabelle td.ja{color:var(--zusage)}
.rt-tabelle td.nein{color:var(--linie-hell)}
.rt-was{text-align:left!important}
.rt-was b{display:block;font-weight:600;color:var(--zelt);font-size:.86rem}
.rt-was small{display:block;margin-top:2px;font-size:.72rem;color:var(--silber-matt);
  line-height:1.45}
.rt-hinweise{margin:var(--a3) 0 0;padding-left:18px;font-size:.8rem;
  color:var(--silber-matt);line-height:1.6}
.rt-hinweise li{margin-bottom:5px}
/* Anleitung zum Node-Update und der Neustart-Knopf */
.nd-kasten .nd-zeile+.nd-zeile{margin-top:9px}
.nd-anleitung{margin-top:9px;padding:14px 18px;border-radius:11px;background:var(--nacht);
  border:1px dashed var(--linie-hell);font-size:.84rem;color:var(--zelt);line-height:1.6}
.nd-anleitung.weg{display:none}
.nd-anleitung p{margin:0 0 8px}
.nd-anleitung ol{margin:0 0 8px;padding-left:20px}
.nd-anleitung li{margin-bottom:6px}
.nd-anleitung code{font-family:var(--zahl);font-size:.78rem;background:var(--karbon-hoch);
  border:1px solid var(--linie);border-radius:5px;padding:2px 6px}
.nd-warum{margin:10px 0 0!important;padding-top:10px;border-top:1px solid var(--linie);
  color:var(--silber-matt);font-size:.8rem}
/* Auftritte im Netz - Pflege unter Medien, Anzeige auf der Startseite */
.nz-liste{display:grid;gap:9px}
.nz-zeile{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;
  background:var(--nacht);border:1px solid var(--linie);margin:0}
.nz-zeichen{font-size:1.1rem;line-height:1;width:22px;text-align:center}
.nz-logo{position:relative;width:38px;height:38px;flex-shrink:0;border-radius:9px;
  overflow:hidden;background:var(--karbon-hoch);border:1px solid var(--linie);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.nz-logo img{width:100%;height:100%;object-fit:contain}
.nz-logo.leer img{display:none}
.nz-logo>span{font-size:1rem}
.nz-logo i{position:absolute;left:0;right:0;bottom:0;padding:1px;text-align:center;
  font-style:normal;font-family:var(--eng);font-size:.44rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.72);opacity:0}
.nz-logo:hover i{opacity:1}
.nz-logo:hover{border-color:var(--rot)}
.nz-logo.laedt{opacity:.5;pointer-events:none}
.nz-name{font-weight:600;color:var(--zelt);font-size:.86rem;min-width:82px}
.nz-zeile input{flex:1;min-width:0;margin:0;background:var(--karbon);
  border:1px solid var(--linie);border-radius:8px;padding:8px 11px;color:var(--weiss);
  font-family:var(--text);font-size:.82rem}
.nz-zeile input:focus{outline:none;border-color:var(--rot)}

.nz-knoepfe{display:flex;gap:9px;flex-wrap:wrap}
.nz-knopf{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:11px;text-decoration:none;background:var(--nacht);
  border:1px solid var(--linie);color:var(--zelt);font-family:var(--eng);
  font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.nz-knopf span{font-size:1rem}
.nz-knopf:hover{color:var(--weiss);transform:translateY(-1px)}
.nz-twitch:hover{border-color:#9146FF} .nz-discord:hover{border-color:#5865F2}
.nz-youtube:hover{border-color:#FF0000} .nz-instagram:hover{border-color:#E1306C}
.nz-tiktok:hover{border-color:#25F4EE} .nz-x:hover{border-color:var(--weiss)}

@media(max-width:760px){
  .nz-zeile{flex-wrap:wrap}
  .nz-zeile input{flex:1 1 100%}
  .nz-knopf{flex:1 1 auto;justify-content:center}
}
/* Spielersuche-Poster */
.po-modal{width:min(1180px,100%);max-width:96vw}
.po-raum{display:grid;grid-template-columns:1fr 340px;gap:var(--a4);
  padding:var(--a4);overflow-y:auto}
.po-vorschau{background:var(--nacht);border:1px solid var(--linie);
  border-radius:14px;padding:12px;display:flex;align-items:flex-start;
  justify-content:center;position:sticky;top:0;align-self:start}
.po-vorschau canvas{width:100%;max-width:470px;height:auto;
  border-radius:8px;display:block}
.po-felder{display:flex;flex-direction:column;gap:8px;min-width:0}
.po-felder label{display:block;margin:0}
.po-felder input,.po-felder textarea{width:100%;margin:0;background:var(--nacht);
  border:1px solid var(--linie-hell);border-radius:9px;padding:10px 12px;
  color:var(--weiss);font-family:var(--text);font-size:.86rem}
.po-felder input:focus,.po-felder textarea:focus{outline:none;border-color:var(--rot)}
.po-titel{margin:var(--a3) 0 2px;font-family:var(--eng);font-weight:600;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rot-hell)}
.po-hinweis{margin:0 0 6px;font-size:.74rem;color:var(--silber-matt);line-height:1.5}
.po-gruppe{margin-bottom:8px}
.po-gruppe-name{display:block;font-family:var(--zahl);font-size:.64rem;
  color:var(--silber-matt);margin-bottom:4px}
.po-gruppe-name i{font-style:normal;color:var(--linie-hell);margin-left:6px}
.po-chips{display:flex;gap:5px;flex-wrap:wrap}
.po-chip{padding:5px 10px;border-radius:7px;cursor:pointer;background:var(--karbon);
  border:1px solid var(--linie);color:var(--silber-matt);font-family:var(--zahl);
  font-size:.68rem}
.po-chip:hover{color:var(--weiss)}
.po-chip.an{background:color-mix(in srgb,var(--rot) 18%,transparent);
  border-color:var(--rot);color:var(--weiss)}
.po-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.po-warn{color:var(--vielleicht)!important}
.po-kanaele{display:flex;flex-direction:column;gap:6px}
.po-kanal{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;
  background:var(--nacht);border:1px solid var(--linie)}
.po-kanal.an{border-color:color-mix(in srgb,var(--rot) 45%,transparent)}
.po-schalt{width:24px;height:24px;flex-shrink:0;border-radius:50%;cursor:pointer;
  background:var(--karbon);border:1px solid var(--linie-hell);color:var(--silber-matt);
  font-size:.7rem;line-height:1;padding:0}
.po-kanal.an .po-schalt{background:var(--rot);border-color:var(--rot);color:var(--auf-marke)}
.po-schalt:disabled{opacity:.35;cursor:not-allowed}
.po-kanal-name{font-family:var(--zahl);font-size:.66rem;color:var(--silber-matt);
  min-width:66px}
.po-kanal input{flex:1;min-width:0;margin:0;padding:6px 9px;font-size:.76rem}
.po-regler{display:block;font-family:var(--zahl);font-size:.66rem;
  color:var(--silber-matt);margin-top:6px}
.po-regler input[type=range]{width:100%;margin:4px 0 0;accent-color:var(--rot)}
.po-schalter{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:.8rem;color:var(--zelt)}
.po-schalter input{width:16px;height:16px;margin:0;accent-color:var(--rot)}
.po-ablage{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.po-motiv{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;
  border:1px solid var(--linie);background:var(--nacht)}
.po-motiv img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.po-motiv:hover{border-color:var(--rot)}
.po-motiv-weg{position:absolute;top:2px;right:2px;width:18px;height:18px;
  border-radius:5px;border:none;cursor:pointer;background:rgba(0,0,0,.7);
  color:var(--absage);font-size:.62rem;line-height:1;opacity:0}
.po-motiv:hover .po-motiv-weg{opacity:1}

@media(max-width:900px){
  .po-raum{grid-template-columns:1fr}
  .po-vorschau{position:static}
}
/* Wettbewerbslogo am Abzeichen */
.ar-abz{display:inline-flex;align-items:center;gap:6px}
.ar-wb-logo{width:18px;height:18px;object-fit:contain;border-radius:3px}
.kal-wb-logo{width:20px;height:20px;object-fit:contain;border-radius:4px;
  vertical-align:middle;margin-right:2px}
.vr-karte.aus{opacity:.6}
.vr-karte.aus:hover{opacity:1}
/* Spielerbilder unter Medien */
.sb-gitter{display:grid;gap:12px;max-height:520px;overflow-y:auto;padding-right:4px;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sb-karte{position:relative;text-align:center;padding:12px 8px 10px;border-radius:12px;
  background:var(--nacht);border:1px solid var(--linie)}
.sb-karte.eigen{border-color:color-mix(in srgb,var(--zusage) 40%,transparent)}
.sb-bild{position:relative;width:76px;height:76px;margin:0 auto 8px;border-radius:50%;
  overflow:hidden;background:var(--karbon-hoch);border:1px solid var(--linie-hell);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.sb-bild img{width:100%;height:100%;object-fit:cover}
.sb-bild.leer img{display:none}
.sb-bild>span{font-family:var(--anzeige);font-weight:800;font-size:1.5rem;
  color:var(--silber-matt)}
.sb-bild i{position:absolute;left:0;right:0;bottom:0;padding:2px;text-align:center;
  font-style:normal;font-family:var(--eng);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.72);opacity:0}
.sb-bild:hover i{opacity:1}
.sb-bild:hover{border-color:var(--rot)}
.sb-bild.laedt{opacity:.5;pointer-events:none}
.sb-karte b{display:block;font-family:var(--text);font-weight:600;font-size:.82rem;
  color:var(--weiss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-karte span{display:block;margin-top:2px;font-family:var(--zahl);font-size:.6rem;
  color:var(--silber-matt)}
.sb-weg{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:6px;
  border:none;cursor:pointer;background:rgba(0,0,0,.6);color:var(--absage);
  font-size:.66rem;line-height:1;opacity:0}
.sb-karte:hover .sb-weg{opacity:1}
/* =====================================================================
   SPIELERPROFIL
   ===================================================================== */
.pr-modal{width:min(1180px,100%);max-width:96vw}
.pr-kopf{display:flex;align-items:center;gap:16px;margin-bottom:var(--a4)}
.pr-nr{font-family:var(--anzeige);font-weight:900;font-size:2.4rem;color:var(--rot)}
.pr-kopf h3{margin:0;font-family:var(--anzeige);font-weight:800;font-size:1.5rem;
  color:var(--weiss)}
.pr-marken{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pr-marke{font-family:var(--zahl);font-size:.64rem;color:var(--silber-matt);
  border:1px solid var(--linie);border-radius:20px;padding:3px 10px}
.pr-marke.an{border-color:var(--rot);color:var(--weiss)}

/* Zwei Spalten: Karte links, Diagramme rechts. Drei Spalten liessen die
   dritte leer, weil der Trophaeenschrank ohnehin ueber die volle Breite
   geht. */
.pr-raum{display:grid;gap:var(--a3);grid-template-columns:280px 1fr}
.pr-diagramme{display:grid;gap:var(--a3);grid-template-columns:1fr 1fr}
@media(max-width:1000px){.pr-diagramme{grid-template-columns:1fr}}
.pr-spalte{display:flex;flex-direction:column;gap:var(--a3);min-width:0}
.pr-block{background:var(--nacht);border:1px solid var(--linie);border-radius:13px;
  padding:14px}
.pr-block h4{margin:0 0 10px;font-family:var(--eng);font-weight:600;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rot-hell)}
.pr-block h4 small{display:block;margin-top:3px;font-family:var(--zahl);
  font-size:.58rem;letter-spacing:.04em;color:var(--silber-matt);text-transform:none}
.pr-block canvas{width:100%;height:auto;display:block}

/* Die Karte */
.pr-karte{border-radius:16px;padding:14px;background:
  linear-gradient(160deg,color-mix(in srgb,var(--rot) 26%,var(--nacht)),var(--nacht));
  border:2px solid var(--rot);box-shadow:0 0 14px rgba(47,160,94,0.3)}
.pr-karte-kopf{display:flex;justify-content:space-between;align-items:flex-start}
.pr-karte-nr{font-family:var(--anzeige);font-weight:900;font-size:2.2rem;
  color:var(--weiss);line-height:1}
.pr-karte-pos{font-family:var(--eng);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;color:var(--weiss);border:1px solid rgba(255,255,255,.4);
  border-radius:6px;padding:3px 8px}
.pr-karte-bild{width:132px;height:132px;margin:10px auto;border-radius:50%;
  overflow:hidden;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center}
.pr-karte-bild img{width:100%;height:100%;object-fit:cover}
/* Mit eigenem Bild wird aus dem runden Kreis ein hochkantes Fenster -
   ein Spielerbild aus dem Spiel ist eine stehende Figur, kein Portraet. */
.pr-karte-bild.hoch{width:150px;height:190px;border-radius:14px;
  background-color:#13201A}
.pr-karte-bild.leer img{display:none}
.pr-karte-bild>span{font-family:var(--anzeige);font-weight:900;font-size:2.6rem;
  color:rgba(255,255,255,.5)}
.pr-karte-name{text-align:center;font-family:var(--anzeige);font-weight:800;
  font-size:1.05rem;color:var(--weiss);letter-spacing:.04em;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.18)}
.pr-karte-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin:10px 0 8px;text-align:center}
.pr-karte-werte b{display:block;font-family:var(--zahl);font-size:1.05rem;
  color:var(--weiss)}
.pr-karte-werte span{font-family:var(--eng);font-size:.54rem;letter-spacing:.1em;
  color:rgba(255,255,255,.6)}
.pr-karte-fuss{text-align:center;font-family:var(--zahl);font-size:.62rem;
  color:rgba(255,255,255,.6)}

/* Trophäen */
.pr-breit{grid-column:1/-1}
.pr-trophaeen{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pr-troph{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  border-radius:10px;background:var(--karbon);border:1px solid var(--linie);
  opacity:.45}
.pr-troph.an{opacity:1;border-color:color-mix(in srgb,var(--zusage) 34%,transparent)}
.pr-troph-zeichen{font-size:1.2rem;line-height:1.2}
.pr-troph b{display:block;font-weight:600;font-size:.86rem;color:var(--weiss)}
.pr-troph small{display:block;font-size:.72rem;color:var(--silber-matt)}
.pr-troph em{display:block;margin-top:3px;font-style:normal;font-family:var(--zahl);
  font-size:.6rem;color:var(--vielleicht)}
.pr-mal{margin-left:auto;font-family:var(--zahl);font-size:.7rem;color:var(--zusage);
  background:color-mix(in srgb,var(--zusage) 16%,transparent);border-radius:5px;
  padding:2px 7px;align-self:center}
.pr-bahn{height:4px;border-radius:3px;background:var(--linie);margin-top:6px;
  overflow:hidden}
.pr-bahn i{display:block;height:100%;background:var(--vielleicht)}

/* Klickbare Statistikzeile */
.sx-tabelle tr.klickbar{cursor:pointer}
.sx-tabelle tr.klickbar:hover{background:var(--karbon-hoch)}

@media(max-width:900px){
  .pr-raum{grid-template-columns:1fr}
  .pr-karte{max-width:280px;margin:0 auto}
}
/* Gegner-Steckbrief */
.gs-modal{width:min(900px,100%);max-width:96vw}
.gs-bilanz{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  margin-bottom:var(--a3)}
.gs-kachel{text-align:center;padding:12px 6px;border-radius:11px;
  background:var(--nacht);border:1px solid var(--linie)}
.gs-kachel b{display:block;font-family:var(--zahl);font-size:1.3rem;color:var(--weiss)}
.gs-kachel span{font-family:var(--eng);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--silber-matt)}
.gs-kachel.gut b{color:var(--zusage)}
.gs-kachel.mittel b{color:var(--gold)}
.gs-kachel.schlecht b{color:var(--absage)}
.gs-raum{display:grid;gap:var(--a3);grid-template-columns:1.3fr 1fr}
.gs-liste{display:flex;flex-direction:column;gap:6px}
.gs-zeile{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:9px;background:var(--karbon);border:1px solid var(--linie);
  font-size:.82rem;color:var(--zelt)}
.gs-mal{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-family:var(--zahl);font-size:.7rem;flex-shrink:0}
.gs-zeile.sieg .gs-mal{background:var(--zusage);color:var(--nacht)}
.gs-zeile.remis .gs-mal{background:var(--gold);color:var(--nacht)}
.gs-zeile.niederlage .gs-mal{background:var(--absage);color:#fff}
.gs-datum{font-family:var(--zahl);font-size:.72rem;color:var(--silber-matt)}
.gs-ort{font-family:var(--zahl);font-size:.66rem;color:var(--linie-hell)}
.gs-stand{margin-left:auto;font-family:var(--zahl);font-weight:600;color:var(--weiss)}
.gs-wett{font-size:.68rem;color:var(--silber-matt);max-width:130px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-name{font-weight:600;color:var(--weiss)}
.gs-werte{margin-left:auto;font-family:var(--zahl);font-size:.72rem;
  color:var(--silber-matt);text-align:right}
.gs-werte small{display:block;font-size:.6rem;color:var(--linie-hell)}
.gs-neu{text-align:center;padding:var(--a5) var(--a4)}
.gs-neu span{font-size:2.4rem}
.gs-neu b{display:block;margin:10px 0 6px;font-family:var(--anzeige);
  font-size:1.2rem;color:var(--weiss)}
.km-geg:hover{border-color:var(--stahl);color:var(--stahl)}
@media(max-width:800px){
  .gs-bilanz{grid-template-columns:repeat(3,1fr)}
  .gs-raum{grid-template-columns:1fr}
}
/* Gespeicherte Poster */
.po-gespeichert{display:flex;flex-direction:column;gap:5px;max-height:190px;
  overflow-y:auto}
.po-eintrag{display:flex;gap:4px;align-items:stretch}
.po-laden{flex:1;min-width:0;text-align:left;cursor:pointer;padding:8px 11px;
  border-radius:9px;background:var(--nacht);border:1px solid var(--linie);
  color:var(--zelt)}
.po-laden:hover{border-color:var(--rot)}
.po-laden b{display:block;font-size:.82rem;color:var(--weiss);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.po-laden small{font-family:var(--zahl);font-size:.6rem;color:var(--silber-matt)}
.po-eintrag-weg{width:30px;flex-shrink:0;border-radius:9px;cursor:pointer;
  background:var(--nacht);border:1px solid var(--linie);color:var(--absage);
  font-size:.7rem}
.po-eintrag-weg:hover{border-color:var(--absage)}
.po-aufgabe{display:block;margin-top:8px;font-family:var(--zahl);font-size:.66rem;
  color:var(--rot-hell)}
.po-aufgabe textarea{margin-top:3px;font-size:.78rem}
/* "Wer ist gerade da" (.an-*) steht jetzt in /portal.css - es sitzt in der Kopfzeile. */

/* Rollen-Diagnose im Admin */
.rd-liste{display:flex;flex-direction:column;gap:5px;margin-top:var(--a3)}
.rd-zeile{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:9px;background:var(--nacht);border:1px solid var(--linie);
  font-size:.82rem}
.rd-zeile.fehlt{border-color:color-mix(in srgb,var(--absage) 40%,transparent)}
.rd-zeile.meine{border-color:color-mix(in srgb,var(--zusage) 45%,transparent)}
.rd-name{font-weight:600;color:var(--weiss);min-width:110px}
.rd-quelle{font-family:var(--zahl);font-size:.62rem;color:var(--silber-matt)}
.rd-id{margin-left:auto;font-family:var(--zahl);font-size:.6rem;
  color:var(--linie-hell)}
.rd-fehlt{margin-left:auto;font-family:var(--zahl);font-size:.62rem;
  color:var(--absage)}
/* Loeschknopf an einer Aufstellung in der Anwesenheit */
.a-spiel-kopf{display:flex;align-items:flex-start;gap:8px}
.a-spiel-kopf>span{flex:1;min-width:0}
/* Immer sichtbar, nur zurueckhaltend: ein Loeschknopf, den man erst durch
   Darueberfahren findet, ist keiner. */
.a-weg{width:22px;height:22px;flex-shrink:0;border-radius:6px;cursor:pointer;
  background:var(--nacht);border:1px solid var(--linie);color:var(--silber-matt);
  font-size:.64rem;line-height:1;padding:0;opacity:.55;transition:opacity .15s}
.a-spiel:hover .a-weg{opacity:1}
.a-weg:hover{border-color:var(--absage);color:var(--absage);opacity:1}

/* Die Platz-Abzeichen in derselben Farbe wie die Legende darueber -
   sonst ist der Torwart rot wie der Angriff. */
.a-p-pos.g-TW{background:var(--gold);color:var(--nacht)}
.a-p-pos.g-DEF{background:var(--stahl);color:var(--nacht)}
.a-p-pos.g-MF{background:var(--zusage);color:var(--nacht)}
.a-p-pos.g-ST{background:var(--rot-hell);color:var(--auf-marke)}
/* Logo und Staffel am Termin-Abzeichen */

.weg{display:none!important}
/* Zwei Logos am Abzeichen - Serie und Staffel */
.ar-abz{gap:5px}
.ar-abz .ar-wb-logo+.ar-wb-logo{margin-left:-2px}
.ar-kopf-abz{display:inline-flex;align-items:center;gap:6px}
.ar-kopf-logo{width:19px;height:19px;object-fit:contain;border-radius:4px}

.kal-wb-logo+.kal-wb-logo{margin-left:-3px}
/* Hinweis in der Statistik, warum jemand nicht zum Kader zaehlt */
.sx-hinweis{font-style:normal;font-family:var(--zahl);font-size:.56rem;
  letter-spacing:.04em;color:var(--vielleicht);border:1px solid
  color-mix(in srgb,var(--vielleicht) 40%,transparent);border-radius:5px;
  padding:2px 6px;margin-left:6px;white-space:nowrap;cursor:help}