/* ===========================================================================
   public/look.css  -  DER HUB-LOOK
   ---------------------------------------------------------------------------
   Wird als LETZTE Stildatei geladen und legt sich ueber alles. Die
   vorhandenen Regeln bleiben unangetastet - Abschalten heisst: die eine
   <link>-Zeile in der index.html auskommentieren.

   GRUNDSATZ
     Wappengruen ist der einzige Akzent. Vier Bedeutungsfarben (Zusage-Gruen, Gold,
     Glut-Orange, Stahl-Blau) tragen Bedeutung, alles andere ist Grau in
     drei Stufen. Flaechen bleiben FLACH; Licht liegt nur an Kanten und
     hinter Wappen. Bewegung an wenigen Stellen, alles unter 300 ms, alles
     aus bei "Bewegung reduzieren".

   BAUSTEINE
     01 Grund        Waldnacht, Gitter, schraege Haarlinien
     02 Kopfleiste   leuchtende Oberkante, gruener Reiter, pulsierender Punkt
     03 Karten       Haarlinie oben, Eckwinkel und Leuchtstreifen am Anpfiff
     04 Kacheln      Lichtfleck, Anheben unter der Maus
     05 Tabellen     Balken hinter den Zahlen (Breite setzt look.js)
     06 Bewegung     Karten kommen nacheinander, Zahlen zaehlen hoch
   =========================================================================== */

/* ---------------------------------------------------------------- 01 Grund */
:root{
  --nacht:#050C09;
  --karbon:#0C1712;
  --karbon-hoch:#122019;
  --linie:rgba(214,232,220,.07);
  --linie-hell:rgba(214,232,220,.14);
  /* Heisst noch "rot" - ist das helle Wappengruen fuer Schrift-Akzente */
  --look-rot-hell:#5CF0A2;
}
body{background:var(--nacht) !important}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) !important;
  background-size:40px 40px !important;
  opacity:1 !important;
}
/* Schraege Haarlinien oben rechts - dieselben wie auf dem Post */
body::after{
  content:'';position:fixed;right:-80px;top:-60px;width:560px;height:340px;
  pointer-events:none;z-index:0;
  background:repeating-linear-gradient(-35deg,transparent 0 30px,rgba(31,224,122,.07) 30px 33px);
  -webkit-mask-image:linear-gradient(200deg,#000 30%,transparent 80%);
  mask-image:linear-gradient(200deg,#000 30%,transparent 80%);
}
main{position:relative;z-index:1}

/* ---------------------------------------------------------- 02 Kopfleiste */
.kopf{position:relative;background:var(--karbon) !important;
  border:1px solid var(--linie-hell);border-radius:14px;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.kopf::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--rot);border-radius:14px 14px 0 0;
  box-shadow:0 0 18px rgba(31,224,122,.7)}
.kopf-marke img{filter:drop-shadow(0 0 14px rgba(31,224,122,.45))}
.kopf-marke b{font-weight:900;letter-spacing:-.01em}
.leiste .reiter{border-radius:9px;transition:background .15s,color .15s}
.leiste .reiter[aria-current="page"]{background:var(--rot);color:var(--auf-marke);
  box-shadow:0 6px 18px -6px rgba(31,224,122,.8)}
.puls.an{animation:look-puls 1.6s infinite}
@keyframes look-puls{
  0%{box-shadow:0 0 0 0 rgba(51,192,106,.6)}
  100%{box-shadow:0 0 0 10px rgba(51,192,106,0)}
}
.an-kasten .an-live{animation:look-puls 1.6s infinite}

/* -------------------------------------------------------------- 03 Karten */
.platte{background:var(--karbon) !important;border-color:var(--linie-hell) !important;
  position:relative}
/* Feine helle Haarlinie oben - laesst die Karte wie eine Flaeche mit Dicke aussehen */
.platte::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;
  background:rgba(255,255,255,.08);pointer-events:none}
.h-leiste{background:var(--karbon) !important;border:1px solid var(--linie-hell);
  border-radius:14px;overflow:hidden}
.h-leiste::before{background:var(--rot) !important;height:3px !important;
  box-shadow:0 0 16px rgba(31,224,122,.6)}
.h-wert .zahl{font-variant-numeric:tabular-nums}

/* Anpfiff: roter Leuchtstreifen links, Eckwinkel rechts oben */
.h-anpfiff{position:relative;background:var(--karbon) !important;
  border:1px solid var(--linie-hell);border-radius:16px;overflow:hidden}
.h-anpfiff::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--rot);box-shadow:0 0 16px rgba(31,224,122,.8)}
.h-anpfiff::after{content:'';position:absolute;right:14px;top:14px;width:22px;height:22px;
  border-top:2px solid var(--rot);border-right:2px solid var(--rot);opacity:.7;
  pointer-events:none}
.h-anpfiff.leer::before,.h-anpfiff.leer::after{display:none}
.h-vs{text-shadow:0 0 18px rgba(31,224,122,.8)}
.h-duell-team img{filter:drop-shadow(0 0 16px rgba(0,0,0,.7))}
.h-ub{background:var(--karbon-hoch) !important;border-color:var(--linie-hell) !important;
  position:relative;overflow:hidden}
.h-ub::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rot)}
.h-ub b{font-size:1.7rem}

/* Formkurve der Mannschaft (home.js zeichnet die Balken) */
.h-form{display:flex;gap:5px;align-items:flex-end;height:64px;margin:14px 0 4px;padding-top:16px}
.h-form i{flex:1;border-radius:4px 4px 0 0;background:var(--zusage);position:relative;
  min-height:8px;transform-origin:bottom;animation:look-wachsen .5s ease-out both}
.h-form i.remis{background:var(--gold)} .h-form i.niederlage{background:var(--rot)}
.h-form i::after{content:attr(data-s);position:absolute;top:-16px;left:0;right:0;text-align:center;
  font-family:var(--eng);font-size:.62rem;color:var(--silber-matt)}
.h-form-legende{font-family:var(--eng);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--silber-matt)}
@keyframes look-wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ------------------------------------------------------------- 04 Kacheln */
.h-kachel2{position:relative;overflow:hidden;border-radius:14px;
  border:1px solid var(--linie-hell);background:var(--karbon) !important;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.h-kachel2::before{content:'';position:absolute;left:-40px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(31,224,122,.22),transparent 70%);
  pointer-events:none}
.h-kachel2:hover{transform:translateY(-3px);border-color:rgba(31,224,122,.6);
  box-shadow:0 18px 40px -18px rgba(31,224,122,.55)}
.h-kachel2 .h-k-symbol{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--karbon-hoch);border:1px solid var(--linie-hell)}

/* ------------------------------------------------------------ 05 Tabellen */
/* Der Balken hinter der Zahl war als Block zu laut - jetzt eine feine
   Linie unter der Zahl, die den Anteil am Bestwert zeigt. */
.sx-tabelle td{position:relative;font-variant-numeric:tabular-nums}
.sx-tabelle td[data-balken]{--w:0%}
.sx-tabelle td[data-balken]::before{content:'';position:absolute;left:14%;right:14%;bottom:5px;height:2px;
  width:calc(var(--w) * .72);margin:0 auto;border-radius:1px;background:rgba(255,255,255,.22);pointer-events:none}
.sx-tabelle td[data-balken="gut"]::before{background:rgba(51,192,106,.55)}
.sx-tabelle td[data-balken="gold"]::before{background:rgba(212,166,42,.6)}
.sx-tabelle td[data-balken="blau"]::before{background:rgba(95,168,199,.6)}
.sx-tabelle td[data-balken="rot"]::before{background:rgba(31,224,122,.6)}
.sx-tabelle td.sx-nr{color:var(--silber-matt);font-family:var(--zahl);width:52px}
.sx-tabelle td.sx-posk{width:64px}
.sx-tabelle td.sx-posk .sx-pos{min-width:0;padding:3px 8px;font-size:.6rem}
.sx-tabelle th[data-sort]{cursor:pointer;user-select:none}
.sx-tabelle th[data-sort]:hover{color:var(--weiss)}
.sx-tabelle tr.erster td{background:transparent !important}
.sx-tabelle tr.erster td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.sx-tabelle th.an{color:var(--look-rot-hell) !important}

/* ------------------------------------------------------------ 06 Bewegung */
/* Karten kommen beim Oeffnen einer Seite nacheinander - 80 ms Versatz */
#inhalt > .platte,#inhalt > .h-anpfiff,#inhalt > .h-leiste,#inhalt .h-spalte > .platte{
  animation:look-rein .32s ease-out both}
#inhalt > :nth-child(2){animation-delay:.08s} #inhalt > :nth-child(3){animation-delay:.16s}
#inhalt > :nth-child(4){animation-delay:.24s} #inhalt > :nth-child(5){animation-delay:.32s}
#inhalt .h-spalte > :nth-child(2){animation-delay:.24s}
@keyframes look-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.t-knopf.haupt{box-shadow:0 8px 20px -8px rgba(31,224,122,.8)}
.t-knopf.haupt:hover{transform:translateY(-1px)}
.t-zeile,.s-zeile{transition:transform .12s,border-color .12s}
.t-zeile:hover,.s-zeile:hover{transform:translateX(2px)}

@media (prefers-reduced-motion:reduce){
  .puls.an,.an-kasten .an-live,.h-form i,#inhalt > .platte,#inhalt > .h-anpfiff,
  #inhalt > .h-leiste,#inhalt .h-spalte > .platte{animation:none !important}
  .h-kachel2,.t-knopf.haupt,.t-zeile,.s-zeile{transition:none !important}
}
@media(max-width:760px){body::after{display:none}}


/* =========================================================================
   07 AUFSTELLUNGSBRETT - Perspektive wie im Fernsehen
   Der Platz liegt gekippt, die Plaettchen stehen aufrecht darauf.
   Alles nur Ansicht: die Plaetze bleiben, wo sie sind, Antippen geht wie
   vorher. Am Handy wird flacher gekippt, damit nichts zu klein wird.
   ========================================================================= */
.feld-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:820px;margin:0 auto 4px;
  padding:10px 16px;background:var(--karbon);border:1px solid var(--linie-hell);
  border-radius:14px 14px 0 0;position:relative;overflow:hidden}
.feld-kopf::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--rot);
  box-shadow:0 0 16px rgba(31,224,122,.7)}
.feld-kopf-wappen{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(31,224,122,.45))}
.feld-kopf > b{font-family:var(--anzeige);font-weight:900;font-size:1rem}
.feld-chip{padding:4px 10px;border-radius:7px;border:1px solid var(--linie-hell);
  font-family:var(--eng);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silber)}
.feld-chip.rot{border-color:var(--rot);color:var(--look-rot-hell)}
.feld-fort{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--eng);
  font-size:.66rem;letter-spacing:.14em;color:var(--silber-matt);text-transform:uppercase}
.feld-fort i{font-style:normal}
.feld-balken{width:120px;height:8px;border-radius:4px;background:var(--karbon-hoch);
  border:1px solid var(--linie-hell);overflow:hidden;display:block}
.feld-balken b{display:block;height:100%;background:var(--zusage);transition:width .3s}

.feld-buehne{max-width:820px;margin:-26px auto 0;perspective:1200px;perspective-origin:50% 36%;
  padding:0 0 6px}
.feld{transform:rotateX(20deg);transform-origin:50% 100%;overflow:visible !important;
  border-radius:8px !important;
  box-shadow:0 60px 80px -30px rgba(0,0,0,.95);
  background:
    radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.12),transparent 45%),
    radial-gradient(ellipse at 85% 0%,rgba(255,255,255,.12),transparent 45%),
    repeating-linear-gradient(180deg,#0d2617 0 8.33%,#113020 8.33% 16.66%) !important}
.feld::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(0,0,0,.55) 100%)}
.feld-linien{--l:rgba(255,255,255,.45) !important}
.f-mittellinie,.f-mittelkreis,.f-strafraum,.f-strafraum::after{box-shadow:0 0 8px rgba(255,255,255,.22)}
.feld-linien{border:2px solid var(--l);border-radius:6px;inset:1.5% !important}
/* Reihenlinien */
.f-reihe{position:absolute;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(51,192,106,.55) 12%,rgba(51,192,106,.55) 88%,transparent)}

/* Plaettchen stehen aufrecht auf dem gekippten Platz */
.platz{transform:translate(-50%,-50%) rotateX(-20deg) !important;transform-origin:50% 100%;
  transform-style:preserve-3d;width:10% !important}
.platz:hover{transform:translate(-50%,-50%) rotateX(-20deg) translateY(-4px) scale(1.06) !important}
.p-schatten{position:absolute;left:50%;bottom:-6px;width:110%;height:16px;transform:translateX(-50%) rotateX(20deg);
  background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);pointer-events:none;z-index:-1}
.p-figur{border:2px solid var(--f);border-radius:16px;background:#191620;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.95),0 0 0 3px rgba(0,0,0,.35)}
.p-figur-bild{border-radius:14px;
  -webkit-mask-image:linear-gradient(#000 70%,transparent 100%);mask-image:linear-gradient(#000 70%,transparent 100%)}
.platz:hover .p-figur{box-shadow:0 18px 36px -12px rgba(0,0,0,.95),0 0 26px color-mix(in srgb,var(--f) 55%,transparent)}
.platz.mit-figur .p-tafel{margin-top:4px;border-bottom:2px solid var(--f);font-size:.62rem;padding:2px 6px}

/* Freier Platz: gestricheltes Fenster */
.platz.leer{width:11.5% !important}
.p-frei{width:74%;aspect-ratio:1;margin:0 auto;border-radius:14px;border:2px dashed rgba(255,255,255,.35);
  background:rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);transition:.15s}
.p-frei b{font-family:var(--eng);font-size:.7rem;letter-spacing:.14em}
.p-frei small{font-size:.55rem;letter-spacing:.1em;color:var(--silber-matt);text-transform:uppercase;margin-top:2px}
.platz.leer:hover .p-frei{border-color:var(--look-rot-hell);color:var(--look-rot-hell);
  box-shadow:0 0 0 6px rgba(31,224,122,.18),0 0 22px rgba(31,224,122,.5)}

/* Kurzstatistik beim Zeigen */
.p-karte{display:none;position:absolute;left:104%;top:0;min-width:150px;padding:9px 11px;text-align:left;
  border-radius:10px;background:var(--karbon);border:1px solid var(--linie-hell);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.9);font-size:.68rem;color:var(--silber);z-index:9}
.p-karte b{display:block;color:var(--weiss);margin-bottom:4px;font-size:.72rem}
.p-karte span{display:flex;justify-content:space-between;gap:8px}
.p-karte em{font-style:normal;color:var(--weiss);font-weight:700}
.p-karte i{font-style:normal;color:var(--silber-matt)}
.platz:hover .p-karte[data-voll]{display:block}
@media(max-width:760px){
  .feld{transform:rotateX(12deg)}
  .platz{transform:translate(-50%,-50%) rotateX(-12deg) !important}
  .feld-buehne{padding-top:16px}
  .feld-fort{margin-left:0}
  .p-karte{display:none !important}
}
@media (prefers-reduced-motion:reduce){.feld-balken b{transition:none}}


/* =========================================================================
   08 STARTSEITE - Buehne und Bildkacheln
   Bilder liegen unter public/images/:
     buehne.jpg (oder .png)          das grosse Bild oben, 1920 x 600 empfohlen
     bereich-termine.jpg, bereich-kader.jpg, bereich-taktik.jpg ...
                                     je Kachel ein Bild, 600 x 400 empfohlen
   Fehlt ein Bild, faellt die Stelle auf den roten Look zurueck.
   ========================================================================= */
.h-buehne{position:relative;height:300px;border-radius:16px;overflow:hidden;margin-bottom:14px;
  background:#1a0508;border:1px solid var(--linie-hell);isolation:isolate}
.h-buehne-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:saturate(.9)}
.h-buehne.ohne{background:
  radial-gradient(ellipse at 50% 20%,rgba(31,224,122,.45),transparent 60%),
  repeating-linear-gradient(-35deg,transparent 0 34px,rgba(31,224,122,.10) 34px 38px),
  linear-gradient(#0A3A20,#050C09)}
.h-buehne.ohne::before{content:'';position:absolute;right:-6%;top:-20%;width:56%;height:140%;
  background:url('/images/TuS_Isomatte.png') center/contain no-repeat;opacity:.16;filter:grayscale(.4)}
.h-buehne-schleier{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,6,10,.92) 0%,rgba(7,6,10,.65) 45%,rgba(7,6,10,.15) 100%),
             linear-gradient(0deg,rgba(7,6,10,.9),transparent 55%)}
.h-buehne::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--rot);
  box-shadow:0 0 18px rgba(31,224,122,.7)}
.h-buehne-inhalt{position:absolute;left:36px;bottom:32px;display:flex;align-items:center;gap:22px}
.h-buehne-wappen{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(31,224,122,.55))}
.h-buehne-name{font-family:var(--anzeige);font-weight:900;font-size:3.2rem;line-height:.95;
  letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.8)}
.h-buehne-name b{color:var(--look-rot-hell)}
.h-buehne-unter{font-family:var(--eng);font-size:.8rem;letter-spacing:.3em;color:var(--silber);margin-top:8px}
.h-buehne-chips{position:absolute;right:28px;bottom:32px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.h-buehne-chips span{padding:6px 12px;border-radius:8px;background:rgba(7,6,10,.7);border:1px solid var(--linie-hell);
  font-family:var(--eng);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silber)}
@media(max-width:760px){.h-buehne-chips{left:18px;right:auto;bottom:auto;top:14px;justify-content:flex-start}}
.h-kacheln2{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important;gap:12px !important}
.h-kachel2{position:relative;height:130px;padding:0 !important;align-items:flex-start !important;
  justify-content:flex-end !important;isolation:isolate}
.h-k-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  filter:saturate(.85) brightness(.85);transition:transform .4s,filter .2s}
.h-kachel2::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(7,6,10,.95) 0%,rgba(7,6,10,.35) 60%,rgba(7,6,10,.05) 100%)}
.h-kachel2:hover .h-k-bild{transform:scale(1.06);filter:saturate(1) brightness(1)}
.h-kachel2 .h-k-symbol{position:absolute;left:12px;top:12px;width:32px;height:32px;font-size:.95rem;
  background:rgba(7,6,10,.7) !important}
.h-kachel2 .h-k-name{position:absolute;left:14px;bottom:12px;font-family:var(--anzeige);font-weight:900;
  font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.h-form i{max-width:48px}
.h-form{justify-content:flex-start}
@media(max-width:760px){
  .h-buehne{height:200px}
  .h-buehne-inhalt{left:18px;bottom:18px;gap:12px}
  .h-buehne-wappen{width:64px;height:64px}
  .h-buehne-name{font-size:1.9rem}
  .h-kacheln2{grid-template-columns:repeat(2,1fr) !important}
  .h-kachel2{height:100px}
}

.sx-tabelle td.sx-matt{color:var(--silber-matt)}
.sx-tabelle th,.sx-tabelle td{padding-left:8px;padding-right:8px}

/* Rolle als Balken unter dem Spieler in der Kaderliste */
.s-zeile{position:relative;overflow:hidden}
.s-zeile::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:2px 2px 0 0;
  background:var(--balken,transparent)}
.s-legende-stufen{margin-top:6px}
.s-legende-stufen i.balken{width:14px;height:4px;border-radius:2px;display:inline-block;vertical-align:middle}

/* Rueckennummer auf dem Feld: klare Plakette oben rechts am Fenster statt
   des kleinen blassen Punkts am Fuss */
.p-figur .p-figur-nr{left:auto;right:-6px;bottom:auto;top:-8px;min-width:26px;height:24px;line-height:22px;
  padding:0 6px;border-radius:7px;background:var(--nacht);color:#fff;border:1.5px solid var(--f);
  font-size:.78rem;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.7)}

/* Kaderliste: Ueberschriften je Mannschaftsteil */
.s-gruppenkopf{display:flex;align-items:center;gap:8px;margin:12px 4px 6px;font-family:var(--eng);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silber-matt)}
.s-gruppenkopf:first-child{margin-top:2px}
.s-gruppenkopf i{width:10px;height:10px;border-radius:3px;background:var(--silber-matt)}
.s-gruppenkopf.gk-TW i{background:var(--gold)} .s-gruppenkopf.gk-DEF i{background:var(--stahl)}
.s-gruppenkopf.gk-MF i{background:var(--zusage)} .s-gruppenkopf.gk-ST i{background:var(--rot)}
.s-gruppenkopf::after{content:'';flex:1;height:1px;background:var(--linie)}

/* Kaderliste: Gruppen einklappbar */
.s-gruppenkopf{cursor:pointer;user-select:none}
.s-gruppenkopf b{margin-left:auto;font-weight:400;color:var(--silber-matt)}
.s-gruppenkopf::after{flex:1 1 auto}
.s-gruppenkopf.zu{opacity:.7}