/* ============================================================
   MANNSCHAFTEN — „Fünf Bagtags an einer Leiste."
   Ein tragender Effekt, sonst nichts:
   1) Die Tags neigen sich bei Hover/Fokus gedämpft in 3D und geben
      dabei den Tabellenstand frei — Information, keine Farbe.
   Der Einlauf der Leiste staffelt über die vorhandene .reveal-Mechanik
   (seite.js setzt .sichtbar, die Verzögerung je Tag kommt aus --i).
   Alle Farben, Abstände und Kurven aus tokens.css. Bewegt werden
   ausschließlich transform und opacity.
   ============================================================ */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   FEHLENDE TOKENS AUS tokens.css
   seite.css bringt die Farben, Abstände und die Bewegungskurve mit —
   aber NICHT die Radien, die Übergangsdauern und die Schatten.
   Wortgleich aus gerhelm-2026/tokens.css, nur für diese Seite
   (siehe Begründung in platzreife.css — dort zuerst nachgemessen).
   ============================================================ */
:root{
  --r-pill:999px;      /* Buttons, Chips, Plaketten */
  --r-karte:14px;      /* Dropdowns, Glaskarten */
  --r-flaeche:0px;     /* Bildflächen und Tarifkarten: scharfe Kante */
  --t-schnell:.25s;    /* Farbe, Deckkraft */
  --t-mittel:.35s;     /* Position, Größe */
  --t-lang:.8s;        /* Reveals, Bildwechsel */
  --schatten-karte:0 28px 60px -28px rgba(11,65,43,.45);
  --schatten-plakette:0 14px 30px -14px rgba(6,26,17,.6);
}

/* ============================================================
   TYPOGRAFIE-STUFEN AUS tokens.css
   Wortgleich übernommen — Begründung siehe platzreife.css: die
   .t-*-Klassen stammen aus der Design-Referenz gerhelm-2026/tokens.css,
   seite.css bringt sie nicht mit, und ein globaler Eingriff würde die
   abgenommenen Seiten verändern.
   ============================================================ */

[hidden]{display:none !important}

/* Der Hero mit der Kennzahl rechts unten — .sh-zahl steht nicht in
   seite.css, wortgleich aus faq.css übernommen. */
.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:14ch}

/* Das Wappen im Kopf hängt 130 px in die Seite — Sprungziele brauchen
   Luft nach oben, sonst verschwindet die Kopfzeile dahinter. */
.ma-team,.ma-format,.ma-mitspielen{scroll-margin-top:150px}

/* ============================================================
   01 · DIE LEISTE — fünf Bagtags nebeneinander
   Die Tags hängen an einer sichtbaren Haarlinie („Garderobe im
   Caddie-Raum"). Jede Kordel ist unterschiedlich lang: --hebung
   kommt aus dem Backend, die 3. Liga hängt am höchsten.
   ============================================================ */
.ma-leiste{padding:calc(var(--luft) * .8) var(--inset) var(--luft)}
.ma-leiste .kapitel-kopf{margin-bottom:34px}

.ma-garderobe{position:relative;border-top:2px solid var(--tinte);
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px}

.ma-tag{--kordel:88px;position:relative;display:block;flex:0 1 205px;min-width:0;
  text-decoration:none;color:var(--tinte);
  padding-top:calc(var(--kordel) - var(--hebung, 0) * 24px)}
/* Die Kordel: eine Linie von der Leiste zum Loch */
.ma-tag::before{content:"";position:absolute;top:0;left:50%;width:2px;
  height:calc(var(--kordel) - var(--hebung, 0) * 24px + 18px);
  background:var(--hairline);transform:translateX(-50%)}

/* Der Tag ist das echte Objekt: weißes Papier, oben die Öse, unten das
   Jahresband in der Saisonfarbe (--bt-farbe, aus dem Backend). */
.ma-tag-koerper{position:relative;display:flex;flex-direction:column;
  min-height:392px;background:var(--weiss);color:var(--tinte);
  border-radius:7px 7px 3px 3px;
  box-shadow:var(--schatten-plakette);
  transition:transform var(--t-mittel) var(--ease);transform-origin:50% -60px}
/* Die Metallöse und das gestanzte Loch darin */
.ma-tag-koerper::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:27px;height:27px;border-radius:50%;
  background:conic-gradient(from 210deg,#b6bdc1,#f4f6f7 20%,#98a1a6 47%,#eef1f2 70%,#b6bdc1);
  box-shadow:0 1px 2px rgba(6,26,17,.28)}
.ma-tag-koerper::after{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:inset 0 1px 3px rgba(6,26,17,.5)}

.ma-tag:hover .ma-tag-koerper,.ma-tag:focus-visible .ma-tag-koerper{
  transform:perspective(700px) rotate3d(.5,1,0,6deg) translateY(-4px)}
.ma-tag:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* Kopf: Wappen der Website (nicht das gedruckte), Anlagenname, Anschrift */
.ma-tag-kopf{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:5px;padding:44px 12px 12px}
.ma-tag-wappen{width:44px;height:auto}
.ma-tag-anlage{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.05;font-size:14px;text-wrap:balance;margin-top:3px}
.ma-tag-claim{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;
  line-height:1.15;letter-spacing:-.01em}
.ma-tag-adresse{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:10px;
  line-height:1.55;color:var(--text);margin-top:2px}

/* Das Jahresband — die einzige Fläche, die jede Saison die Farbe wechselt */
.ma-tag-band{margin-top:auto;background:var(--bt-farbe,#377F4A);color:var(--bt-text,#fff);
  padding:6px 11px 12px;display:flex;flex-direction:column;
  border-radius:0 0 3px 3px}
.ma-tag-jahr{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(34px,3vw,44px);line-height:1.12;text-align:center}
.ma-tag-zeile{display:block;margin-top:7px}
/* Die Beschriftungsfelder des Originals: weiße Kästen, Bezeichnung darunter */
.ma-tag-feld{display:flex;align-items:center;min-height:26px;background:var(--weiss);
  color:var(--tinte);padding:4px 8px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;line-height:1.15;
  text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.ma-tag-feldlabel{display:block;margin-top:3px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:400;font-size:11px;line-height:1.3}
/* Das Kleingedruckte — auf dem Original der Satz zur Saisonerkennung */
/* Nicht im Blocksatz wie auf dem Druck: in 22 Zeichen Breite reißt der
   Blocksatz Löcher zwischen die Wörter (nachgemessen 19.08.2026). */
.ma-tag-fuss{margin-top:11px;font-family:'Hanken Grotesk',sans-serif;font-weight:300;
  font-size:10px;line-height:1.5;hyphens:auto}
/* Hover zeigt Information, nicht Farbe: der Tabellenstand klappt auf */
.ma-tag-stand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;padding-top:9px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--t-mittel) var(--ease),opacity var(--t-schnell) var(--ease)}
.ma-tag:hover .ma-tag-stand,.ma-tag:focus-visible .ma-tag-stand{max-height:3em;opacity:1}

/* Original-Bagtag als Foto: ersetzt den nachgebauten Tag, die Stand-Zeile
   bleibt darunter sichtbar (dann auf dem Papier, also in Tinte). */
.ma-tag-foto{width:100%;height:auto;aspect-ratio:1/2.55;object-fit:cover;display:block;
  border-radius:7px 7px 3px 3px}
.ma-tag--foto .ma-tag-koerper{background:none;box-shadow:var(--schatten-plakette)}
.ma-tag--foto .ma-tag-koerper::before,.ma-tag--foto .ma-tag-koerper::after{display:none}
.ma-tag--foto .ma-tag-stand{color:var(--tinte)}

/* ------------------------------------------------------------
   DER WINDZUG — die Tags schaukeln an ihrer Aufhängung
   Gedreht wird um 50% 0: das ist die Leiste, an der die Kordel
   hängt — Kordel und Tag schwingen also zusammen, wie am Bag.
   Ausschlag 2,4° bei kürzerer Dauer (war 1,1°/6,4 s — Andreas am
   31.08.2026: „sollten etwas stärker wackeln"); jeder Tag bekommt
   eine eigene Dauer und einen eigenen Versatz, sonst schaukeln
   fünf Tags im Gleichschritt und das wirkt wie eine Maschine.
   Der Reveal behält seine Transform: solange die Leiste nicht
   .sichtbar ist, läuft nichts, und die Verzögerung von ,9 s
   lässt den Einlauf zuerst zu Ende laufen (Keyframes beginnen
   und enden bei 0° — es gibt keinen Sprung).
   Beim Überfahren hält der Tag an, damit die 3D-Neigung und der
   Tabellenstand ruhig zu lesen sind.
   ------------------------------------------------------------ */
@keyframes ma-schaukel{
  0%   {transform:rotate(0)}
  25%  {transform:rotate(2.4deg)}
  50%  {transform:rotate(0)}
  75%  {transform:rotate(-2.4deg)}
  100% {transform:rotate(0)}
}
.ma-garderobe .ma-tag{transform-origin:50% 0;
  animation:ma-schaukel calc(5.2s + var(--i, 0) * .5s) ease-in-out infinite;
  animation-delay:calc(.9s + var(--i, 0) * .37s)}
.js .ma-garderobe.reveal:not(.sichtbar) .ma-tag{animation:none}
.ma-garderobe .ma-tag:hover,.ma-garderobe .ma-tag:focus-visible{animation-play-state:paused}

/* Gestaffelter Einlauf über die .reveal-Mechanik von seite.js:
   die Garderobe ist EIN .reveal, die Tags folgen mit 60 ms Abstand. */
.js .ma-garderobe.reveal .ma-tag{opacity:0;transform:translateY(14px)}
.js .ma-garderobe.reveal.sichtbar .ma-tag{opacity:1;transform:none;
  transition:opacity var(--t-lang) var(--ease),transform var(--t-lang) var(--ease);
  transition-delay:calc(var(--i, 0) * 60ms)}

.ma-leiste-hinweis{margin-top:18px;color:var(--muted)}

/* ============================================================
   02 · SO WIRD GESPIELT — die zwei Ligasysteme, Dunkelfläche
   Skalenspitze: die Alterszahl je System (40 / 50·65).
   ============================================================ */
.ma-format{background:var(--tanne);color:#fff;padding:var(--luft) var(--inset)}
.ma-format .kapitel-marke .was{color:rgba(255,255,255,.66)}
.ma-format .kapitel-kopf h2{color:#fff}
.ma-format .kapitel-kopf .lead{color:rgba(255,255,255,.78)}

.ma-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:44px}
.ma-system{min-width:0}
.ma-alter{color:var(--lime);font-size:clamp(64px,7.5vw,120px);line-height:.9;display:block}
.ma-alter em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);
  display:block;margin-top:8px}
.ma-system h3{color:#fff;margin:22px 0 4px}
.ma-system .ma-traeger{color:rgba(255,255,255,.6);font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:15px}
.ma-fakten{list-style:none;margin:20px 0 0;padding:0}
.ma-fakten li{padding:10px 0;border-top:1px solid rgba(255,255,255,.16);
  font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.86)}
.ma-system .tlink{color:var(--lime);margin-top:16px;display:inline-block}

.ma-dokumente{margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:baseline}
.ma-dokumente .t-mikro{color:rgba(255,255,255,.55)}
.ma-dokumente a{color:#fff;font-family:'Hanken Grotesk',sans-serif;font-size:15px;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color var(--t-schnell) var(--ease)}
.ma-dokumente a:hover,.ma-dokumente a:focus-visible{border-color:var(--lime)}
.ma-dokumente a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* ============================================================
   03ff · DIE TEAMS — je Mannschaft ein Abschnitt
   Öffnet ohne .kapitel-kopf: der Mannschaftsname selbst ist die
   Überschrift, die Liga läuft als Eyebrow darüber.
   ============================================================ */
.ma-team{padding:var(--luft) var(--inset) 0}
.ma-team + .ma-team{padding-top:calc(var(--luft) * .9)}
.ma-team-kopf{border-top:2px solid var(--tinte);padding-top:18px;margin-bottom:34px}
.ma-team-kopf .t-eyebrow{color:var(--gruen);display:block;margin-bottom:10px}
.ma-team-kopf h2{margin:0;color:var(--tinte)}

.ma-team-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:start}
.ma-team--b .ma-team-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.ma-team--b .ma-team-tabelle{order:2}
.ma-team--b .ma-team-seite{order:1}

/* Die Gruppentabelle — echte Tabelle, Haarlinien, Gerhelm mit Kante */
.ma-tabelle{width:100%;border-collapse:collapse}
.ma-tabelle caption{text-align:left;padding-bottom:12px}
.ma-tabelle th{text-align:left;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:0 0 10px;border-bottom:1px solid var(--hairline)}
.ma-tabelle th:last-child,.ma-tabelle td:last-child{text-align:right}
.ma-tabelle td{padding:13px 0;border-bottom:1px solid var(--hairline);
  font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--text)}
.ma-tabelle td.ma-punkte{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--tinte)}
.ma-tabelle tr.ma-wir td{font-weight:600;color:var(--tinte);
  border-left:3px solid var(--lime);padding-left:14px}
.ma-tabelle tr.ma-wir td:last-child{border-left:0;padding-left:0}
/* Hover zeigt Information: die Zeile hebt ihren Rang hervor */
.ma-tabelle tbody tr{transition:background var(--t-schnell) var(--ease)}
.ma-tabelle tbody tr:hover td:first-child::before{content:attr(data-rang) ". ";
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--gruen)}
.ma-stand-datum{display:block;margin-top:10px;color:var(--muted)}

/* Spieltage unter der Tabelle */
.ma-spieltage{list-style:none;margin:34px 0 0;padding:0}
.ma-spieltage li{display:flex;align-items:baseline;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--hairline)}
.ma-spieltage .ma-datum{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--tinte);flex:0 0 52px}
.ma-spieltage .ma-ort{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--text);
  min-width:0}
.ma-spieltage .ma-ergebnis{margin-left:auto;font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:13px;color:var(--muted);text-align:right}
.ma-chip-heim{flex:0 0 auto;display:inline-block;background:var(--mint);color:var(--tinte);
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 10px}

/* Rechte Spalte: Captain, Satz, Kader */
.ma-captain{margin:0}
.ma-captain img{width:100%;max-width:320px;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r-flaeche);display:block}
.ma-captain figcaption{margin-top:10px;color:var(--muted)}
.ma-team-satz{margin:26px 0 0}
.ma-kader{margin:30px 0 0}
.ma-kader .t-mikro{color:var(--muted);display:block;margin-bottom:10px}
.ma-kader p{margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:15px;
  line-height:1.9;color:var(--text)}
.ma-team-links{margin-top:26px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.tlink{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--gruen);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t-schnell) var(--ease)}
.tlink:hover,.tlink:focus-visible{border-color:var(--gruen)}
.tlink:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* ============================================================
   LETZTER BILDSCHIRM · MITSPIELEN — der sechste, leere Tag
   Echo der Seite: die Konturschrift aus dem Hero kehrt genau
   einmal wieder — als „DEIN NAME" auf dem leeren Bagtag.
   ============================================================ */
.ma-mitspielen{background:var(--pine);color:#fff;padding:var(--luft) var(--inset);margin-top:var(--luft)}
.ma-mitspielen-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}

/* Derselbe Zuschnitt wie die fünf echten Tags (205 × 392, Öse oben,
   Band unten) — nur eben leer: alles gestrichelt statt gedruckt. */
.ma-leertag{position:relative;width:min(205px,100%);margin:0 auto;padding-top:64px;
  transform-origin:50% 0;animation:ma-schaukel 7.8s ease-in-out infinite;animation-delay:1.2s}
.ma-leertag.reveal:not(.sichtbar){animation:none}
.ma-leertag::before{content:"";position:absolute;top:0;left:50%;width:2px;height:80px;
  background:rgba(255,255,255,.25);transform:translateX(-50%)}
.ma-leertag-koerper{position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;
  text-align:center;border:2px dashed rgba(255,255,255,.4);border-radius:7px 7px 3px 3px;
  padding:52px 14px 0;min-height:392px}
.ma-leertag-koerper::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:27px;height:27px;border-radius:50%;border:2px dashed rgba(255,255,255,.4)}
.ma-leertag-name{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(22px,2vw,28px);line-height:.95;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.8)}
/* Die Fläche, die am echten Tag das Jahresband trägt */
.ma-leertag-saison{color:rgba(255,255,255,.5);font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  margin:auto -14px 0;width:calc(100% + 28px);padding:16px 14px;min-height:128px;
  border-top:2px dashed rgba(255,255,255,.4)}

.ma-mitspielen h2{color:#fff;margin:0 0 18px}
.ma-mitspielen .ma-mitspielen-text{color:rgba(255,255,255,.82);max-width:52ch}
/* Bewusst NICHT .hero-cta: deren Lade-Choreografie gehört dem Anfang
   der Seite — der Abschluss steht sofort da. */
.ma-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.ma-mitspielen-hinweis{margin-top:18px;color:rgba(255,255,255,.55)}

/* ============================================================
   SCHMALE FENSTER
   ============================================================ */
@media (max-width:1100px){
  .ma-team-grid,.ma-team--b .ma-team-grid{grid-template-columns:1fr;gap:44px}
  .ma-team--b .ma-team-tabelle{order:1}
  .ma-team--b .ma-team-seite{order:2}
  .ma-format-grid{gap:44px}
}
@media (max-width:900px){
  /* Ohne Mauszeiger gibt es kein Hover: der Stand steht immer da */
  .ma-tag-stand{max-height:2.2em;opacity:1}
  .ma-format-grid{grid-template-columns:1fr}
  .ma-mitspielen-grid{grid-template-columns:1fr;gap:44px}
  .ma-leertag{margin:0}
}
@media (max-width:560px){
  /* Die Garderobe wird zur Wischreihe: Tags bleiben ganze Tags */
  .ma-garderobe{overflow-x:auto;justify-content:flex-start;gap:16px;
    scroll-snap-type:x mandatory;padding-bottom:18px;
    -webkit-overflow-scrolling:touch}
  .ma-tag{flex:0 0 224px;scroll-snap-align:start;
    /* Kordeln kürzer, die Hebung bleibt ablesbar */
    --kordel:72px}
  .ma-tag::before{height:calc(var(--kordel) - var(--hebung, 0) * 16px + 16px)}
  .ma-tag{padding-top:calc(var(--kordel) - var(--hebung, 0) * 16px)}
  .ma-spieltage .ma-ergebnis{flex-basis:100%;margin-left:66px;text-align:left}
  .ma-spieltage li{flex-wrap:wrap;row-gap:2px}
}

/* ============================================================
   RUHE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ma-tag-koerper{transition:none}
  .ma-tag:hover .ma-tag-koerper,.ma-tag:focus-visible .ma-tag-koerper{transform:none}
  .ma-tag-stand{transition:none}
  .js .ma-garderobe.reveal .ma-tag{opacity:1;transform:none;transition:none}
  /* Kein Windzug bei „Bewegung reduzieren" — die Tags hängen still */
  .ma-garderobe .ma-tag,.ma-leertag{animation:none}
}