/* ============================================================
   Bundesliga Tippspiel – Stylesheet
   "Dark Stadium": Flutlicht-Optik, Rasengruen als Akzent,
   Anzeigetafel-Typografie. Mobil wie am PC nutzbar.
   ------------------------------------------------------------
   Aufbau
     1  Schriften
     2  Farben und Masse (Tokens)
     3  Grundlagen und Hintergrund
     4  Kopfbereich
     5  Navigation
     6  Layout und Karten
     7  Kennzahlen und Podium
     8  Tabellen
     9  Platzierungen und Medaillen
    10  Vereinswappen
    11  Spieltagsmatrix und Kompaktansicht
    12  Formulare und Schaltflaechen
    13  Meldungen und Etiketten
    14  Fusszeile
    15  Bewegung
    16  Admin und Installation
    17  Hilfsklassen
    18  Mobil, Druck, Bewegung reduzieren
   ============================================================ */

/* --- 1  Schriften ------------------------------------------
   Lokal ausgeliefert (assets/schriften). Kein Google-CDN, damit
   keine IP-Adressen der Mitspieler nach aussen gehen.
   ---------------------------------------------------------- */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('schriften/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('schriften/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('schriften/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('schriften/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2  Farben und Masse ----------------------------------- */

:root {
  /* Flaechen, von tief nach hoch */
  --grund:        #0a0f0c;
  --grund-2:      #0e1511;
  --karte:        #121a15;
  --karte-hoch:   #18231b;
  --karte-tief:   #0f1712;

  /* Linien */
  --linie:        rgba(255, 255, 255, .09);
  --linie-stark:  rgba(255, 255, 255, .17);

  /* Schrift */
  --text:         #eaf2ec;
  --text-2:       #9fb3a6;
  --text-3:       #7a9084;

  /* Rasengruen */
  --gruen:        #16c060;
  --gruen-hell:   #3ce884;
  --gruen-tief:   #0b7a3e;
  --gruen-nacht:  #05301a;
  --gruen-schleier: rgba(22, 192, 96, .12);
  --auf-gruen:    #04170b;

  /* Podium */
  --gold:         #f0b429;
  --gold-schleier: rgba(240, 180, 41, .12);
  --silber:       #c6d0ca;
  --bronze:       #d08a4e;

  /* Signale */
  --rot:          #ff453a;
  --rot-schleier: rgba(255, 69, 58, .13);
  --blau:         #4aa3e0;
  --blau-schleier: rgba(74, 163, 224, .12);

  /* Schriftfamilien */
  --schrift: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --schrift-anzeige: 'Barlow Condensed', 'Barlow', system-ui,
                     'Arial Narrow', sans-serif;

  /* Masse */
  --breite:       1240px;
  --radius:       14px;
  --radius-klein: 9px;
  --radius-gross: 20px;

  /* Schatten und Leuchten */
  --schatten:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .42);
  --leuchten-gruen: 0 0 24px rgba(22, 192, 96, .30);
  --leuchten-gold:  0 0 24px rgba(240, 180, 41, .28);

  /* Bewegung */
  --tempo-schnell: 140ms;
  --tempo:         220ms;
  --tempo-ruhig:   360ms;
  --kurve:         cubic-bezier(.4, 0, .2, 1);
  --kurve-aus:     cubic-bezier(.16, 1, .3, 1);
  --kurve-schwung: cubic-bezier(.34, 1.56, .64, 1);

  /* Hoehe der klebenden Navigation, fuer scroll-margin */
  --nav-hoehe: 52px;

  /* --- Altlasten: Namen, die noch in PHP-Seiten vorkommen ---
     Bleiben definiert, damit nichts ungestylt zurueckfaellt. */
  --weiss:        #ffffff;
  --rasen:        var(--grund);
  --gruen-blass:  var(--gruen-schleier);
  --gold-blass:   var(--gold-schleier);
  --text-grau:    var(--text-2);
  --grau:         var(--text-2);
}

/* --- 3  Grundlagen und Hintergrund ------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Flutlicht von oben und ganz dezente Rasenstreifen.
   Feste Ebenen, damit beim Scrollen nichts neu gezeichnet wird. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(22, 192, 96, .15), transparent 68%),
    radial-gradient(760px 460px at 88% 2%,  rgba(74, 163, 224, .07), transparent 70%),
    radial-gradient(620px 420px at 6% 12%,  rgba(240, 180, 41, .05), transparent 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .014) 0 64px,
    transparent 64px 128px
  );
}

/* Sichtbarer Fokus – nie entfernen, nur schoener machen. */
:focus-visible {
  outline: 2px solid var(--gruen-hell);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--gruen);
  color: var(--auf-gruen);
}

a { color: var(--gruen-hell); }

h1, h2, h3, h4 {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.15;
}

/* Nur fuer Screenreader */
.nur-lesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink */
.sprunglink {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .6rem 1.1rem;
  background: var(--gruen);
  color: var(--auf-gruen);
  font-weight: 600;
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  text-decoration: none;
  transition: top var(--tempo) var(--kurve);
}
.sprunglink:focus { top: 0; }

/* --- 4  Kopfbereich --------------------------------------- */

.kopf {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.25rem 1.25rem;
  background:
    linear-gradient(180deg, var(--gruen-nacht), var(--grund-2) 92%);
  border-bottom: 1px solid var(--linie);
}

/* Angedeutete Mittellinie als Deko */
.kopf::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -90px;
  width: 260px;
  height: 220%;
  border-left: 2px solid rgba(255, 255, 255, .05);
  border-radius: 50%;
  pointer-events: none;
}

.kopf.mit-bild {
  background-image:
    linear-gradient(180deg, rgba(5, 20, 11, .78), rgba(10, 15, 12, .96) 92%),
    url('stadion.jpg');
  background-size: cover;
  background-position: center 58%;
  padding: 1.9rem 1.25rem 1.4rem;
}

.kopf-inner {
  position: relative;
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}

/* Ballzeichen im Kopf */
.marke-zeichen {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gruen), var(--gruen-tief));
  box-shadow: var(--leuchten-gruen), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: var(--auf-gruen);
}
.marke-zeichen svg { width: 24px; height: 24px; display: block; }

.kopf h1 {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.kopf .saison {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .15rem;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .02em;
}
.kopf.mit-bild .saison { color: #cfe0d4; text-shadow: 0 1px 10px rgba(0,0,0,.7); }

.kopf a { color: #fff; }

/* Statuszeile rechts im Kopf */
.kopf-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* --- 5  Navigation ---------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 15, 12, .86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--linie);
}

.nav-inner {
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  gap: .15rem;
  padding: 0 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.nav-inner::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem .95rem;
  color: var(--text-2);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: var(--schrift-anzeige);
  transition: color var(--tempo-schnell) var(--kurve);
}

/* Gleitender Balken unter dem aktiven Punkt */
.nav a::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--gruen), var(--gold));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tempo) var(--kurve-aus);
}

.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(.55); }

.nav a.aktiv { color: #fff; }
.nav a.aktiv::after {
  transform: scaleX(1);
  box-shadow: 0 0 14px rgba(22, 192, 96, .55);
}

/* Symbol nur in der mobilen Leiste */
.nav-symbol { display: none; }

/* Auf breiten Schirmen die ausgeschriebene Beschriftung */
.nav-kurz { display: none; }
.nav-symbol svg { width: 22px; height: 22px; display: block; }

/* Lesefortschritt als feine Linie unter der Navigation */
.fortschritt {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gruen), var(--gold));
  pointer-events: none;
}

/* --- 6  Layout und Karten --------------------------------- */

.inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.6rem 1.25rem 4rem;
}

.karte {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 120px),
    var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.35rem 1.4rem;
  margin-bottom: 1.25rem;
}

/* Farbige Kante fuer besondere Karten */
.karte-gold,
.karte-gruen,
.karte-rot { overflow: hidden; }
.karte-gold::before,
.karte-gruen::before,
.karte-rot::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.karte-gold::before  { background: linear-gradient(180deg, var(--gold), #a3750f); }
.karte-gruen::before { background: linear-gradient(180deg, var(--gruen-hell), var(--gruen-tief)); }
.karte-rot::before   { background: linear-gradient(180deg, var(--rot), #8c1b14); }

.karte h2 {
  margin: 0 0 .3rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: #fff;
}

.karte h3 {
  margin: 1.3rem 0 .7rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--gruen-hell);
}

.karte h2 + .hint { margin-top: 0; }

.karte-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

/* Kleine Ueberschrift mit Linie daneben */
.abschnitt-titel {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .9rem;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-3);
}
.abschnitt-titel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.hint {
  color: var(--text-2);
  font-size: .89rem;
  margin: .2rem 0 1rem;
}

/* --- 7  Kennzahlen und Podium ----------------------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}

.kennzahl {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.1rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 90px),
    var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.kennzahl .marke-oben {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gruen), transparent 70%);
}

.kennzahl .titel {
  font-family: var(--schrift-anzeige);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
}

.kennzahl .wert {
  display: block;
  margin-top: .2rem;
  font-family: var(--schrift-anzeige);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.kennzahl .zusatz {
  font-size: .8rem;
  color: var(--text-2);
}

.kennzahl-gold .marke-oben { background: linear-gradient(90deg, var(--gold), transparent 70%); }
.kennzahl-gold .wert { color: var(--gold); text-shadow: var(--leuchten-gold); }
.kennzahl-gruen .wert { color: var(--gruen-hell); text-shadow: var(--leuchten-gruen); }

/* Podium der ersten drei */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: .7rem;
  margin-bottom: 1.4rem;
}

.podium-platz {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .7rem .9rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 70%),
    var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius) var(--radius) 6px 6px;
  box-shadow: var(--schatten);
}

.podium-platz .rang {
  font-family: var(--schrift-anzeige);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.podium-platz .name {
  font-family: var(--schrift-anzeige);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  overflow-wrap: anywhere;
}

.podium-platz .punkte {
  font-family: var(--schrift-anzeige);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.podium-platz .punkte small {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-top: .1rem;
}

/* Kranz um die Platznummer */
.podium-kranz {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--auf-gruen);
}

.podium-1 { border-color: rgba(240, 180, 41, .4); }
.podium-1 .podium-kranz {
  background: linear-gradient(150deg, #ffd968, var(--gold) 55%, #cc9315);
  box-shadow: var(--leuchten-gold);
}
.podium-1 .punkte { color: var(--gold); }
/* Der erste Platz steht hoeher als die Nachbarn - wie ein echtes Podest */
.podium-1 { padding-top: 2.1rem; padding-bottom: 1.1rem; }
.podium-1 .name { font-size: 1.2rem; }
.podium-1 .punkte { font-size: 2.15rem; }

.podium-2 { border-color: rgba(198, 208, 202, .3); }
.podium-2 .podium-kranz {
  background: linear-gradient(150deg, #eef2ef, var(--silber) 55%, #98a29c);
  box-shadow: 0 0 20px rgba(198, 208, 202, .22);
}
.podium-2 .punkte { color: var(--silber); }

.podium-3 { border-color: rgba(208, 138, 78, .3); }
.podium-3 .podium-kranz {
  background: linear-gradient(150deg, #f0b48a, var(--bronze) 55%, #b87a35);
  box-shadow: 0 0 20px rgba(208, 138, 78, .22);
}
.podium-3 .punkte { color: var(--bronze); }

/* --- 8  Tabellen ------------------------------------------ */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .94rem;
}

thead th {
  position: relative;
  text-align: left;
  font-family: var(--schrift-anzeige);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  padding: .55rem .6rem;
  background: var(--karte-tief);
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
thead th:first-child { border-radius: var(--radius-klein) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--radius-klein) 0 0; }

tbody td {
  padding: .6rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

tbody tr {
  transition: background var(--tempo-schnell) var(--kurve);
}
tbody tr:hover { background: rgba(255, 255, 255, .035); }
tbody tr:last-child td { border-bottom: 0; }

td.zahl, th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
td.mitte, th.mitte { text-align: center; }

.tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1.4rem;
  padding: 0 1.4rem;
  scrollbar-width: thin;
}
.tabelle-scroll::-webkit-scrollbar { height: 8px; }
.tabelle-scroll::-webkit-scrollbar-thumb {
  background: var(--linie-stark);
  border-radius: 8px;
}

/* Grosse Punktzahl in einer Zelle */
.zahl-gross {
  font-family: var(--schrift-anzeige);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Ergebnis wie auf der Anzeigetafel */
.ergebnis-tafel {
  display: inline-flex;
  align-items: baseline;
  gap: .1rem;
  padding: .18rem .5rem;
  border-radius: 7px;
  background: var(--karte-tief);
  border: 1px solid var(--linie);
  font-family: var(--schrift-anzeige);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: .02em;
}
.ergebnis-tafel.offen { color: var(--text-3); }
.ergebnis-tafel.live {
  color: var(--rot);
  border-color: rgba(255, 69, 58, .45);
  background: var(--rot-schleier);
}

/* Hervorhebung der Podestplaetze: Leiste links plus Schleier */
tr.rang-1, tr.rang-2, tr.rang-3, tr.rang-letzter { position: relative; }

tr.rang-1 td:first-child,
tr.rang-2 td:first-child,
tr.rang-3 td:first-child,
tr.rang-letzter td:first-child {
  box-shadow: inset 3px 0 0 var(--kante, transparent);
}

tr.rang-1 {
  --kante: var(--gold);
  background: linear-gradient(90deg, rgba(240, 180, 41, .11), transparent 62%);
}
tr.rang-2 {
  --kante: var(--silber);
  background: linear-gradient(90deg, rgba(198, 208, 202, .09), transparent 62%);
}
tr.rang-3 {
  --kante: var(--bronze);
  background: linear-gradient(90deg, rgba(208, 138, 78, .09), transparent 62%);
}
tr.rang-letzter {
  --kante: var(--text-3);
  background: linear-gradient(90deg, rgba(122, 144, 132, .08), transparent 62%);
}

tr.rang-1:hover { background: linear-gradient(90deg, rgba(240, 180, 41, .17), rgba(255,255,255,.03) 62%); }
tr.rang-2:hover { background: linear-gradient(90deg, rgba(198, 208, 202, .14), rgba(255,255,255,.03) 62%); }
tr.rang-3:hover { background: linear-gradient(90deg, rgba(208, 138, 78, .14), rgba(255,255,255,.03) 62%); }

/* Zusammenfassungszeile */
tr.summe {
  background: var(--gruen-schleier);
}
tr.summe td { border-bottom: 0; font-weight: 700; }
tr.summe:hover { background: var(--gruen-schleier); }

/* Besonders hervorgehobene Regelzeile (Torfestival) */
tr.hervor-gold {
  background: linear-gradient(90deg, rgba(240, 180, 41, .13), transparent 70%);
  box-shadow: inset 3px 0 0 var(--gold);
}
tr.hervor-gold:hover {
  background: linear-gradient(90deg, rgba(240, 180, 41, .19), rgba(255,255,255,.03) 70%);
}

.leer {
  text-align: center;
  padding: 2.8rem 1rem;
  color: var(--text-2);
}
.leer-zeichen {
  display: block;
  margin: 0 auto .7rem;
  width: 46px; height: 46px;
  color: var(--text-3);
  opacity: .7;
}

/* --- 9  Platzierungen und Medaillen ----------------------- */

.platz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 .35rem;
  border-radius: 9px;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  background: var(--karte-hoch);
  border: 1px solid var(--linie);
  color: var(--text-2);
}

.platz-1 {
  background: linear-gradient(150deg, #ffd968, var(--gold) 60%, #cc9315);
  border-color: rgba(240, 180, 41, .5);
  color: #3a2c00;
  box-shadow: var(--leuchten-gold);
}
.platz-2 {
  background: linear-gradient(150deg, #eef2ef, var(--silber) 60%, #98a29c);
  border-color: rgba(198, 208, 202, .45);
  color: #222924;
}
.platz-3 {
  background: linear-gradient(150deg, #f0b48a, var(--bronze) 60%, #b87a35);
  border-color: rgba(208, 138, 78, .45);
  color: #2e1a06;
}

.platz-zelle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

/* Medaillen und Muelleimer kommen als Zeichen aus PHP */
.symbol {
  font-size: 1.15rem;
  line-height: 1;
  vertical-align: middle;
  margin-left: .1rem;
  filter: saturate(1.15) drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.symbol-gross { font-size: 1.4rem; }

/* --- 10  Vereinswappen ------------------------------------ */

.verein {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  vertical-align: middle;
}

/* Wappen sind fuer helle Untergruende gemacht. Auf dunklem Grund
   braucht es eine helle Kachel, sonst verschwinden dunkle Logos. */
.wappen {
  object-fit: contain;
  vertical-align: middle;
  flex: none;
  padding: 2px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform var(--tempo) var(--kurve-schwung);
}

tbody tr:hover .wappen { transform: scale(1.12); }

.wappen-ersatz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--gruen-tief);
  color: #fff;
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  letter-spacing: .02em;
  flex: none;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.verein-name {
  font-size: .9em;
  font-weight: 500;
  white-space: nowrap;
}

.begegnung {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}
.begegnung .trenner {
  color: var(--text-3);
  font-weight: 400;
}

/* Paarung nur mit Wappen, ohne Namen. Der Vereinsname steckt im
   alt-Text und im title, damit Vorlesewerkzeuge und der Mauszeiger
   ihn weiter ausgeben. */
.begegnung-gross { gap: .7rem; }
.begegnung-gross .wappen { padding: 3px; border-radius: 9px; }
.begegnung-gross .trenner { font-size: 1.1rem; }

/* --- 11  Spieltagsmatrix und Kompaktansicht --------------- */

.uebersicht { font-size: .88rem; }
.uebersicht th, .uebersicht td { padding: .42rem .38rem; }

.uebersicht .fix-spieler {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 138px;
  background: var(--karte);
  box-shadow: 1px 0 0 var(--linie-stark);
}
.uebersicht thead .fix-spieler { z-index: 3; background: var(--karte-tief); }
.uebersicht tbody tr:hover .fix-spieler { background: var(--karte-hoch); }

.uebersicht th.partie-kopf {
  min-width: 68px;
  font-size: .68rem;
  text-align: center;
  line-height: 1.3;
  padding: .35rem .2rem;
  letter-spacing: .04em;
}
.uebersicht th.partie-kopf .ergebnis {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--gruen-hell);
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.uebersicht th.partie-kopf .ergebnis.live { color: var(--rot); }

.uebersicht td.tippzelle-anzeige {
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: .3rem .2rem;
  line-height: 1.2;
  border-radius: 5px;
}
.uebersicht td.tippzelle-anzeige .pkt {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  opacity: .85;
}

.uebersicht .spalte-tag,
.uebersicht .spalte-gesamt {
  position: sticky;
  z-index: 2;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--karte);
  box-shadow: -1px 0 0 var(--linie-stark);
}
.uebersicht .spalte-tag    { right: 68px; min-width: 60px; }
.uebersicht .spalte-gesamt { right: 0;    min-width: 68px; }
.uebersicht thead .spalte-tag,
.uebersicht thead .spalte-gesamt { z-index: 3; background: var(--karte-tief); }
.uebersicht tbody tr:hover .spalte-tag,
.uebersicht tbody tr:hover .spalte-gesamt { background: var(--karte-hoch); }

/* Trefferfarben */
.treffer-exakt {
  background: rgba(22, 192, 96, .16);
  color: var(--gruen-hell);
  font-weight: 600;
}
.treffer-fest {
  background: rgba(240, 180, 41, .18);
  color: var(--gold);
  font-weight: 700;
}
.treffer-tendenz {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

/* Legende der Trefferfarben */
.legende {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--text-2);
}
.legende b {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 6px;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  letter-spacing: .03em;
}

/* Kompaktansicht fuers Handy */
.kompakt { display: none; }

.kompakt-spiel {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  margin-bottom: .8rem;
  overflow: hidden;
  background: var(--karte-tief);
}
.kompakt-spiel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .7rem;
  background: var(--gruen-schleier);
  border-bottom: 1px solid var(--linie);
  font-weight: 600;
  font-size: .92rem;
}
.kompakt-spiel-kopf .ergebnis {
  font-family: var(--schrift-anzeige);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.kompakt-tipps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1px;
  background: var(--linie);
}
.kompakt-tipp {
  background: var(--karte);
  padding: .38rem .55rem;
  font-size: .82rem;
  display: flex;
  justify-content: space-between;
  gap: .4rem;
}
.kompakt-tipp .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.kompakt-tipp .wert {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.hinweis-quer {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-2);
  background: var(--blau-schleier);
  border: 1px solid rgba(74, 163, 224, .22);
  padding: .55rem .75rem;
  border-radius: var(--radius-klein);
  margin-bottom: .9rem;
}

.ansicht-schalter { display: none; }

/* --- 12  Formulare und Schaltflaechen --------------------- */

label {
  display: block;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  margin-bottom: .35rem;
}

input[type=text], input[type=password], input[type=number],
input[type=search], input[type=date], select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--karte-tief);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  transition: border-color var(--tempo-schnell) var(--kurve),
              box-shadow var(--tempo-schnell) var(--kurve);
}

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.28); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px rgba(22, 192, 96, .22);
}

/* Auswahllisten: eigenes Pfeilsymbol, damit sie dunkel passen */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239fb3a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px 8px;
  cursor: pointer;
}
select option { background: #111a14; color: var(--text); }

.feld { margin-bottom: 1rem; }

.feld-reihe {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.feld-reihe .feld { flex: 1 1 180px; margin-bottom: 0; }

/* Schaltflaechen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .6rem 1.2rem;
  font-family: var(--schrift-anzeige);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: linear-gradient(180deg, var(--gruen-hell), var(--gruen));
  color: var(--auf-gruen);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform var(--tempo-schnell) var(--kurve),
              box-shadow var(--tempo-schnell) var(--kurve),
              filter var(--tempo-schnell) var(--kurve);
}

.btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--leuchten-gruen);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(.98); }

.btn-zweit {
  background: var(--karte-hoch);
  color: var(--text);
  border-color: var(--linie-stark);
}
.btn-zweit:hover {
  background: var(--gruen-schleier);
  border-color: var(--gruen);
  color: #fff;
  box-shadow: none;
}

.btn-gefahr {
  background: linear-gradient(180deg, #ff6a60, var(--rot));
  color: #2b0705;
}
.btn-gefahr:hover { box-shadow: 0 0 22px rgba(255, 69, 58, .35); }

.btn-klein {
  min-height: 36px;
  padding: .35rem .8rem;
  font-size: .85rem;
}

.btn-reihe {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Umschalter Hinrunde/Rueckrunde */
.schalter {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--karte-tief);
  border: 1px solid var(--linie);
  border-radius: 11px;
}
.schalter a {
  padding: .4rem .95rem;
  border-radius: 8px;
  font-family: var(--schrift-anzeige);
  font-size: .88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  text-decoration: none;
  transition: background var(--tempo-schnell) var(--kurve),
              color var(--tempo-schnell) var(--kurve);
}
.schalter a:hover { color: #fff; background: rgba(255,255,255,.05); }
.schalter a.aktiv {
  background: linear-gradient(180deg, var(--gruen-hell), var(--gruen));
  color: var(--auf-gruen);
  box-shadow: 0 2px 10px rgba(22, 192, 96, .3);
}

/* --- 13  Meldungen und Etiketten -------------------------- */

/* Block, nicht Flex: die Meldungen enthalten gemischten Inline-Inhalt
   wie "<strong>Wichtig:</strong> Text ..." - als Flex-Container wuerde
   daraus zwei Spalten nebeneinander. */
.meldung {
  display: block;
  padding: .85rem 1rem;
  border-radius: var(--radius-klein);
  margin-bottom: 1.25rem;
  font-size: .92rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--text-3);
  background: var(--karte-tief);
}
.meldung > div { min-width: 0; }

.meldung.gut {
  background: var(--gruen-schleier);
  border-color: rgba(22, 192, 96, .25);
  border-left-color: var(--gruen);
}
.meldung.fehler {
  background: var(--rot-schleier);
  border-color: rgba(255, 69, 58, .28);
  border-left-color: var(--rot);
}
.meldung.info {
  background: var(--blau-schleier);
  border-color: rgba(74, 163, 224, .25);
  border-left-color: var(--blau);
}
.meldung.warn {
  background: var(--gold-schleier);
  border-color: rgba(240, 180, 41, .28);
  border-left-color: var(--gold);
}

.meldung ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.meldung strong { color: #fff; }

/* Etiketten */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .16rem .55rem;
  border-radius: 20px;
  font-family: var(--schrift-anzeige);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tag-doppel {
  background: var(--gold-schleier);
  border-color: rgba(240, 180, 41, .45);
  color: var(--gold);
}
.tag-live {
  background: var(--rot-schleier);
  border-color: rgba(255, 69, 58, .5);
  color: var(--rot);
}
.tag-offen {
  background: rgba(255, 255, 255, .06);
  border-color: var(--linie-stark);
  color: var(--text-2);
}
.tag-fertig {
  background: var(--gruen-schleier);
  border-color: rgba(22, 192, 96, .45);
  color: var(--gruen-hell);
}
.tag-frei {
  background: var(--blau-schleier);
  border-color: rgba(74, 163, 224, .45);
  color: var(--blau);
}

/* Pulsierender Punkt bei laufenden Spielen */
.live-punkt {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rot);
  margin-right: .4rem;
  flex: none;
}
.live-punkt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rot);
  animation: welle 1.8s ease-out infinite;
}

@keyframes welle {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* --- 14  Fusszeile ---------------------------------------- */

.fuss {
  max-width: var(--breite);
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1.25rem 2.5rem;
  color: var(--text-3);
  font-size: .84rem;
  border-top: 1px solid var(--linie);
}
.fuss .marke-klein {
  font-family: var(--schrift-anzeige);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
}

/* Urheberzeile: etwas abgesetzt, damit sie nicht mit den
   Datenhinweisen darueber verschwimmt. */
.fuss .urheber {
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--text-2);
}
.fuss .urheber strong {
  color: var(--gruen-hell);
  font-weight: 600;
}

/* --- 15  Bewegung ----------------------------------------- */

/* Karten und Bloecke fahren beim Laden gestaffelt ein.
   Ohne JavaScript sichtbar, falls das Skript nicht laedt. */
@keyframes rein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rein-sanft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop {
  0%   { opacity: 0; transform: scale(.86) translateY(10px); }
  100% { opacity: 1; transform: none; }
}

.js .einfahren {
  opacity: 0;
  animation: rein var(--tempo-ruhig) var(--kurve-aus) forwards;
  animation-delay: var(--verzug, 0ms);
}

/* Tabellenzeilen fahren gestaffelt ein.

   Bewusst ohne Sichtbarkeitspruefung: das Ausblenden steht im
   Stylesheet und greift sofort beim Aufbau der Seite - so blitzt
   nichts auf. Das Skript setzt nur --verzug fuer die Staffelung.
   Bleibt es aus, laufen alle Zeilen gemeinsam ein. Damit haengt die
   Sichtbarkeit der Tabelle an keiner Stelle an JavaScript.

   Bei klebenden Spalten nur einblenden, kein transform - sonst
   verliert position:sticky innerhalb der Zeile seinen Bezug. */
.js .zeilen-rein tbody tr {
  opacity: 0;
  animation: rein var(--tempo) var(--kurve-aus) forwards;
  animation-delay: var(--verzug, 0ms);
}

.js .uebersicht.zeilen-rein tbody tr,
.js .matrix.zeilen-rein tbody tr {
  animation-name: rein-sanft;
}

.js .podium .podium-platz {
  opacity: 0;
  animation: pop var(--tempo-ruhig) var(--kurve-schwung) forwards;
  animation-delay: var(--verzug, 0ms);
}

/* Zaehlende Zahlen: Platz reservieren, damit nichts springt */
.zaehler { font-variant-numeric: tabular-nums; }

/* Ergebnis blinkt kurz auf, wenn es neu eintrifft */
@keyframes tor-blitz {
  0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, .55); }
  100% { box-shadow: 0 0 0 14px rgba(255, 69, 58, 0); }
}
.ergebnis-tafel.live { animation: tor-blitz 2.4s ease-out infinite; }

/* --- 16  Admin und Installation --------------------------- */

/* Anmeldung */
.anmeldung {
  width: 100%;
  max-width: 390px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 140px),
    var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 1.9rem 1.6rem;
  box-shadow: var(--schatten-hoch);
}
.anmeldung h1 {
  margin: 0 0 .2rem;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
}
.anmeldung .sub {
  margin: 0 0 1.5rem;
  color: var(--text-2);
  font-size: .9rem;
}
.anmeldung .btn { width: 100%; margin-top: .5rem; }

.anmeldung .ball {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gruen), var(--gruen-tief));
  box-shadow: var(--leuchten-gruen);
  color: var(--auf-gruen);
  font-size: 1.6rem;
  line-height: 1;
}
.anmeldung .ball svg { width: 26px; height: 26px; }

/* Diagnose, Selbsttest, Einrichtung */
.box {
  width: 100%;
  max-width: 760px;
  margin: 2rem auto;
  padding: 1.6rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.box h1 {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #fff;
}

p.sub, .sub {
  margin: 0 0 1.5rem;
  color: var(--text-2);
  font-size: .92rem;
}

.hinweis {
  padding: .85rem 1rem;
  border-radius: var(--radius-klein);
  margin-bottom: 1rem;
  font-size: .92rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--text-3);
  background: var(--karte-tief);
}
.hinweis.gut {
  background: var(--gruen-schleier);
  border-color: rgba(22, 192, 96, .25);
  border-left-color: var(--gruen);
}
.hinweis.fehler {
  background: var(--rot-schleier);
  border-color: rgba(255, 69, 58, .28);
  border-left-color: var(--rot);
}

.status { font-weight: 600; }
.status .details {
  display: block;
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-2);
}
.ok  { color: var(--gruen-hell); font-weight: 600; }
.bad { color: var(--rot);        font-weight: 600; }

/* Tippeingabe: Matrix mit klebender Spielerspalte */
.matrix .spieler-spalte {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 152px;
  background: var(--karte);
  box-shadow: 1px 0 0 var(--linie-stark);
}
.matrix thead .spieler-spalte { z-index: 3; background: var(--karte-tief); }
.matrix tbody tr:hover .spieler-spalte { background: var(--karte-hoch); }

.matrix th.partie {
  font-size: .7rem;
  min-width: 94px;
  line-height: 1.35;
  text-align: center;
}
.matrix .ergebnis-klein {
  font-family: var(--schrift-anzeige);
  font-size: .88rem;
  font-weight: 700;
  color: var(--gruen-hell);
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}

.tippzelle { white-space: nowrap; padding: .3rem .25rem; text-align: center; }
.tippzelle input {
  width: 38px;
  padding: .35rem .1rem;
  text-align: center;
  font-size: .95rem;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--karte-tief);
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
}
.tippzelle input:focus {
  background: var(--gold-schleier);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .25);
  color: #fff;
}
.doppelpunkt { color: var(--text-3); margin: 0 2px; }
.unvollstaendig { color: var(--rot); font-weight: 700; }

/* Aufklappbare Bereiche */
details {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: .3rem .8rem;
  background: var(--karte-tief);
}
details[open] { padding-bottom: .9rem; }
summary {
  cursor: pointer;
  padding: .55rem 0;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
}
summary:hover { color: #fff; }

/* Wappenverwaltung */
.wappen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .85rem;
}
.wappen-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: .85rem;
  text-align: center;
  background: var(--karte-tief);
  transition: border-color var(--tempo-schnell) var(--kurve),
              transform var(--tempo-schnell) var(--kurve);
}
.wappen-karte:hover {
  border-color: var(--gruen);
  transform: translateY(-2px);
}
.wappen-karte .vorschau {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .55rem;
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .9);
}
.wappen-karte .vorschau img { max-height: 68px; max-width: 68px; }
.wappen-karte .titel {
  font-family: var(--schrift-anzeige);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .55rem;
  min-height: 2.2em;
  color: #fff;
}
.wappen-karte input[type=file] {
  font-size: .74rem;
  width: 100%;
  margin-bottom: .45rem;
  color: var(--text-2);
}
input[type=file]::file-selector-button {
  font: inherit;
  padding: .3rem .6rem;
  margin-right: .5rem;
  color: var(--text);
  background: var(--karte-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  cursor: pointer;
}

/* --- 17  Hilfsklassen ------------------------------------- */

.grau   { color: var(--text-2); }
.klein  { font-size: .85rem; }
.fett   { font-weight: 700; }
.mono   { font-variant-numeric: tabular-nums; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.mt     { margin-top: 1rem; }
.mb     { margin-bottom: 1rem; }
.verlauf { opacity: .55; }
.gruen  { color: var(--gruen-hell); }
.goldig { color: var(--gold); }

/* --- 18b  Formkurve der Mannschaften ----------------------
   Zwei Reihen je Partie: oben Heim, unten Gast - in derselben
   Reihenfolge wie die Wappen daneben. Farbe allein traegt die
   Aussage nicht, jede Kachel hat einen Titel im Klartext.
   ---------------------------------------------------------- */

th.form-kopf { min-width: 250px; }

.form-zelle {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.form-reihe {
  display: flex;
  align-items: center;
  gap: .28rem;
  line-height: 1;
  padding: .16rem 0;
}

.form-rang {
  min-width: 2.1rem;
  text-align: right;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.form-punkt {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex: none;
  background: var(--karte-hoch);
  border: 1px solid var(--linie);
}
.form-punkt.sieg {
  background: linear-gradient(180deg, var(--gruen-hell), var(--gruen));
  border-color: transparent;
}
.form-punkt.remis {
  background: rgba(255, 255, 255, .22);
  border-color: transparent;
}
.form-punkt.niederlage {
  background: linear-gradient(180deg, #ff6a60, var(--rot));
  border-color: transparent;
}

/* Kacheln aus der Vorsaison sehen aus wie alle anderen. Der
   Unterschied steht im Titel der Kachel und in der Legende - so
   bleibt der Streifen auf einen Blick lesbar. */
.form-liga {
  margin-left: .45rem;
  font-family: var(--schrift-anzeige);
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.form-tore {
  margin-left: .45rem;
  font-family: var(--schrift-anzeige);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.form-tore::after {
  content: " Tore pro Spiel";
  font-size: .68rem;
  color: var(--text-3);
}

.form-leer {
  font-size: .78rem;
  color: var(--text-3);
}

.form-legende {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-2);
  margin-top: .9rem;
}
.form-legende > span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* --- 18c  Bundesliga-Tabelle ------------------------------
   Rein informativ. Beim Oeffnen fahren erst die Wappen als Wand
   ein, danach die Tabellenzeilen - jeweils als versetzte Welle
   mit Unschaerfe, die sich aufloest.
   ---------------------------------------------------------- */

/* Wappenwand ueber der Tabelle */
.wappenwand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  padding: .5rem 0 1.4rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--linie);
}

.wappenwand-feld {
  display: inline-flex;
}

.js .wappenwand-feld {
  opacity: 0;
  animation: wappen-rein .62s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes wappen-rein {
  0% {
    opacity: 0;
    transform: scale(.45) translateY(26px) rotate(-14deg);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* Kurzes Aufleuchten, wenn ein Wappen landet */
.js .wappenwand-feld::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(22, 192, 96, .55), transparent 68%);
  opacity: 0;
  pointer-events: none;
  animation: wappen-funke .5s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 45ms + .28s);
}
.wappenwand-feld { position: relative; }

@keyframes wappen-funke {
  0%   { opacity: .75; transform: scale(.7); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* Zeilen der Ligatabelle folgen nach der Wand */
.js .liga-tabelle tbody tr {
  opacity: 0;
  animation: rein var(--tempo) var(--kurve-aus) forwards;
  animation-delay: calc(.55s + var(--i, 0) * 30ms);
}

.liga-verein {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.liga-name {
  font-weight: 600;
  white-space: nowrap;
}

.liga-minus { color: var(--rot); }

/* Zonen der Tabelle */
.liga-tabelle tr.zone-champions  td:first-child { box-shadow: inset 3px 0 0 #4aa3e0; }
.liga-tabelle tr.zone-europa     td:first-child { box-shadow: inset 3px 0 0 #f0b429; }
.liga-tabelle tr.zone-conference td:first-child { box-shadow: inset 3px 0 0 #3ce884; }
.liga-tabelle tr.zone-relegation td:first-child { box-shadow: inset 3px 0 0 #d08a4e; }
.liga-tabelle tr.zone-abstieg    td:first-child { box-shadow: inset 3px 0 0 var(--rot); }

.liga-legende {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-2);
  margin-top: .9rem;
}
.liga-legende > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.liga-punkt {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.liga-punkt.zone-champions  { background: #4aa3e0; }
.liga-punkt.zone-europa     { background: #f0b429; }
.liga-punkt.zone-conference { background: #3ce884; }
.liga-punkt.zone-relegation { background: #d08a4e; }
.liga-punkt.zone-abstieg    { background: var(--rot); }

@media (max-width: 640px) {
  .wappenwand { gap: .4rem; padding-bottom: 1.1rem; }
  .liga-name  { display: none; }
}

/* --- 19  Ladeanimation (Flutlicht) ------------------------
   Einmal am Tag beim ersten Aufruf. Ablauf in Sekunden:
     0,00  Flutlicht flackert an, Stadion wird hell
     0,25  Mittelkreis und Mittellinie zeichnen sich
     0,55  Titel klappt zeichenweise herein
     0,95  Ladebalken fuellt sich
     1,60  Vorhang hebt sich, Seite erscheint

   Wichtig: Das Verschwinden steckt vollstaendig im CSS. Faellt
   JavaScript aus, verschwindet die Ebene trotzdem - sie darf die
   Seite unter keinen Umstaenden dauerhaft blockieren.
   ---------------------------------------------------------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  background:
    radial-gradient(120% 90% at 50% 8%, #0d2417 0%, #05100a 55%, #030805 100%);
  animation: intro-vorhang .55s cubic-bezier(.45, 0, .55, 1) 1.62s forwards;
}

/* Goldene Kante, die beim Hochziehen mitlaeuft */
.intro::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gruen), transparent);
  opacity: 0;
  animation: intro-kante .55s ease-out 1.62s forwards;
}

@keyframes intro-vorhang {
  to { transform: translateY(-100%); visibility: hidden; }
}
@keyframes intro-kante {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Flutlichtkegel aus den oberen Ecken --- */

.intro-licht {
  position: absolute;
  top: -12%;
  width: 60vmax;
  height: 130vmax;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(214, 255, 228, .30) 0%,
    rgba(120, 230, 170, .12) 28%,
    transparent 62%
  );
  filter: blur(14px);
  opacity: 0;
  animation: intro-flackern 1.1s steps(1, end) forwards;
}
.intro-licht.links  { left: -22vmax;  transform: rotate(19deg);  transform-origin: top center; }
.intro-licht.rechts { right: -22vmax; transform: rotate(-19deg); transform-origin: top center;
                      animation-delay: .09s; }

/* Echtes Flutlicht zuendet nicht sauber, es flackert kurz */
@keyframes intro-flackern {
  0%   { opacity: 0; }
  8%   { opacity: .55; }
  14%  { opacity: .05; }
  22%  { opacity: .75; }
  30%  { opacity: .15; }
  42%  { opacity: 1; }
  100% { opacity: 1; }
}

/* --- Buehne --- */

.intro-buehne {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 1.5rem;
  text-align: center;
  animation: intro-buehne-weg .28s ease-in 1.5s forwards;
}
@keyframes intro-buehne-weg {
  to { opacity: 0; transform: translateY(-10px); }
}

/* --- Spielfeldlinien, die sich zeichnen --- */

.intro-feld {
  position: absolute;
  left: 50%;
  bottom: -14vmin;
  width: min(105vw, 900px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.intro-feld path,
.intro-feld line,
.intro-feld circle {
  fill: none;
  stroke: rgba(255, 255, 255, .34);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--laenge, 1400);
  stroke-dashoffset: var(--laenge, 1400);
  animation: intro-zeichnen .7s cubic-bezier(.16, 1, .3, 1) .2s forwards;
}
@keyframes intro-zeichnen {
  to { stroke-dashoffset: 0; }
}

/* Anstosspunkt */
.intro-punkt {
  fill: var(--gruen-hell);
  stroke: none;
  opacity: 0;
  animation: intro-punkt-auf .45s var(--kurve-schwung) .8s forwards;
}
@keyframes intro-punkt-auf {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Titel, zeichenweise wie eine Anzeigetafel --- */

.intro-titel {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  perspective: 700px;
}

/* Die Zeilen sind eigene Flex-Reihen, damit lange Titel umbrechen
   koennen, ohne dass die Zeichen auseinanderfallen. */
.intro-titel > span {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .3em;
}

.intro-wort {
  display: flex;
  flex-wrap: nowrap;
}

.intro-zeichen {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) rotateX(-75deg);
  transform-origin: 50% 100%;
  animation: intro-zeichen-rein .45s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(.45s + var(--i, 0) * 26ms);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6),
               0 0 42px rgba(22, 192, 96, .35);
}
@keyframes intro-zeichen-rein {
  to { opacity: 1; transform: none; }
}

/* Erste Zeile kleiner, zweite gross - wie ein Logo */
.intro-titel .zeile-klein {
  font-size: clamp(.95rem, 3.6vw, 1.7rem);
  letter-spacing: .34em;
  color: var(--gruen-hell);
  text-indent: .34em;
}
.intro-titel .zeile-gross {
  font-size: clamp(2.6rem, 12vw, 6.4rem);
  letter-spacing: .01em;
}

/* Goldene Linie, die unter dem Titel durchwischt */
.intro-linie {
  width: min(74vw, 460px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gruen-hell) 78%, transparent);
  transform: scaleX(0);
  animation: intro-linie-auf .5s cubic-bezier(.16, 1, .3, 1) .75s forwards;
  box-shadow: 0 0 18px rgba(240, 180, 41, .45);
}
@keyframes intro-linie-auf {
  to { transform: scaleX(1); }
}

/* --- Ladebalken --------------------------------------------
   Sitzt bewusst am unteren Bildrand und nicht unter dem Titel:
   dort stehen sich Goldlinie und Balken sonst als zwei fast
   gleiche Striche gegenseitig im Weg. Unten liest er sich als
   Ladefortschritt der Seite. */

.intro-balken {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  opacity: 0;
  animation: rein-sanft .3s ease-out .5s forwards;
}
.intro-balken i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gruen-tief), var(--gruen), var(--gold));
  box-shadow: 0 0 12px rgba(22, 192, 96, .55);
  animation: intro-laden 1.15s cubic-bezier(.3, .8, .3, 1) .45s forwards;
}
@keyframes intro-laden {
  to { width: 100%; }
}

.intro-hinweis {
  font-family: var(--schrift-anzeige);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
  animation: rein-sanft .4s ease-out 1s forwards;
}

/* --- Überspringen --- */

.intro-skip {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  z-index: 3;
  min-height: 44px;
  padding: .5rem 1.1rem;
  font-family: var(--schrift-anzeige);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 22px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  animation: rein-sanft .3s ease-out .5s forwards;
  transition: background var(--tempo-schnell) var(--kurve);
}
.intro-skip:hover { background: rgba(255, 255, 255, .22); }

/* Sofort verschwinden, wenn heute schon gesehen. Die Klasse setzt ein
   winziges Skript im Kopf der Seite - so blitzt nichts auf. */
html.intro-aus .intro { display: none; }

/* Vorzeitig geschlossen: gleicher Ausgang, nur sofort */
.intro.weg {
  animation: intro-vorhang .45s cubic-bezier(.45, 0, .55, 1) forwards;
}
.intro.weg .intro-buehne {
  animation: intro-buehne-weg .2s ease-in forwards;
}

/* --- 18  Mobil, Druck, Bewegung reduzieren ---------------- */

@media (max-width: 720px) {
  .nur-breit  { display: none; }
  .kompakt    { display: block; }
  .ansicht-schalter { display: flex; }
  .hinweis-quer { display: flex; }
}

@media (min-width: 721px) {
  .hinweis-quer { display: none; }
}

/* Querformat auf dem Handy: die breite Tabelle ist nutzbar */
@media (max-width: 900px) and (orientation: landscape) {
  .nur-breit { display: block; }
  .kompakt   { display: none; }
  .hinweis-quer { display: none; }
}

@media (max-width: 860px) {
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium-1 { order: -1; padding-top: 1rem; }
  .podium-platz {
    flex-direction: row;
    align-items: center;
    gap: .8rem;
    text-align: left;
    border-radius: var(--radius);
  }
  .podium-platz .name { flex: 1; }
  .podium-platz .rang { display: none; }
  .podium-platz .punkte small { display: inline; margin: 0 0 0 .2rem; }
}

/* Auf schmalen Geraeten bleiben von der Formkurve nur die Kacheln.
   Tabellenplatz und Tore pro Spiel wuerden die Tabelle sonst so breit
   machen, dass sie seitlich weggescrollt werden muss. */
@media (max-width: 720px) {
  th.form-kopf { min-width: 0; }
  .form-rang, .form-tore, .form-liga { display: none; }
  .form-punkt { width: 13px; height: 13px; border-radius: 3px; }
  .form-reihe { gap: .22rem; }
}

@media (max-width: 640px) {
  .inhalt { padding: 1.1rem .9rem 2rem; }
  .karte  { padding: 1.1rem 1rem; border-radius: var(--radius); }
  .karte h2 { font-size: 1.15rem; }
  .tabelle-scroll { margin: 0 -1rem; padding: 0 1rem; }
  table    { font-size: .9rem; }
  thead th { padding: .5rem .45rem; }
  tbody td { padding: .55rem .45rem; }
  .kopf    { padding: 1.15rem 1rem 1rem; }
  .kopf.mit-bild { padding: 1.4rem 1rem 1.1rem; }
  .marke-zeichen { width: 36px; height: 36px; }
  .marke-zeichen svg { width: 20px; height: 20px; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .kennzahl { padding: .8rem .85rem; }
  .kennzahl .wert { font-size: 1.7rem; }
  .btn-reihe .btn { flex: 1 1 auto; }
  .box { margin: 1rem auto; padding: 1.1rem; border-radius: var(--radius); }
}

/* Die Hauptnavigation wird auf dem Handy zur Leiste am unteren Rand.
   Fuenf Punkte, jeder mindestens 44 px hoch - gut mit dem Daumen.
   Die Admin-Navigation hat neun Punkte und bleibt oben scrollbar. */
@media (max-width: 700px) {
  .nav-haupt {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0; right: 0;
    border-top: 1px solid var(--linie-stark);
    border-bottom: 0;
    background: rgba(10, 15, 12, .94);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
  }
  .nav-haupt .nav-inner {
    padding: 0;
    gap: 0;
    overflow: visible;
    justify-content: space-around;
  }
  .nav-haupt a {
    flex: 1;
    flex-direction: column;
    gap: .18rem;
    min-height: 56px;
    padding: .5rem .2rem .45rem;
    font-size: .66rem;
    letter-spacing: .04em;
    text-align: center;
  }
  .nav-haupt .nav-symbol { display: block; }
  .nav-haupt .nav-lang { display: none; }
  .nav-haupt .nav-kurz { display: block; }
  /* Balken sitzt oben, weil die Leiste unten klebt */
  .nav-haupt a::after {
    top: 0;
    bottom: auto;
    left: 22%;
    right: 22%;
    border-radius: 0 0 3px 3px;
  }
  .nav-haupt a.aktiv .nav-symbol { color: var(--gruen-hell); }
  .fortschritt { display: none; }

  /* Platz fuer die Leiste schaffen */
  .inhalt { padding-bottom: 5.5rem; }
  .fuss   { padding-bottom: 5.5rem; }
}

@media print {
  .nav, .btn, .kopf::after, .sprunglink, .fortschritt,
  .hinweis-quer, .ansicht-schalter { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  .karte, .kennzahl, .box {
    box-shadow: none;
    border: 1px solid #bbb;
    background: #fff;
    color: #000;
  }
  .karte h2, .kennzahl .wert, .zahl-gross { color: #000; }
  thead th { background: #eee; color: #000; }
  .kopf { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .kopf h1 { color: #000; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .einfahren,
  .js .zeilen-rein tbody tr,
  .js .podium .podium-platz { opacity: 1; }
  .live-punkt::after { display: none; }
  .js .wappenwand-feld,
  .js .liga-tabelle tbody tr { opacity: 1; }
  .js .wappenwand-feld::after { display: none; }

  /* Ladeanimation: kein Flackern, kein Klappen. Der Titel steht
     einfach da und die Ebene verschwindet nach kurzer Zeit.
     Die Dauer muss hier ausdruecklich gesetzt werden, weil die
     Regel oben alle Animationen auf 0,001 ms kappt - sonst waere
     das Intro weg, bevor man es gesehen hat. */
  .intro {
    animation: intro-vorhang .3s ease-in 1s forwards !important;
  }
  .intro-licht { opacity: .5 !important; animation: none !important; }
  .intro-feld path,
  .intro-feld line,
  .intro-feld circle { stroke-dashoffset: 0 !important; animation: none !important; }
  .intro-punkt,
  .intro-zeichen,
  .intro-skip,
  .intro-balken,
  .intro-hinweis {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .intro-linie { transform: scaleX(1) !important; animation: none !important; }
  .intro-balken i { width: 100% !important; animation: none !important; }
  .intro-buehne { animation: none !important; }
}

/* ============================================================
   20  Tipp-Import
   ============================================================ */

/* Zeilen, deren Zuordnung der Mensch prüfen sollte, nutzen
   die vorhandene Klasse tr.hervor-gold. */

/* Ankreuzfeld mit Beschriftung daneben */
.ankreuz {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  margin: .2rem 0 .4rem;
}
.ankreuz input { width: 1.05rem; height: 1.05rem; accent-color: var(--gruen); }

/* ============================================================
   21  Gleitende Markierung in der Navigation
   ============================================================ */

.nav-inner { position: relative; }

/* Der wandernde Balken. Farben wie gehabt: Grün nach Gold. */
.nav-gleiter {
  position: absolute;
  left: 0;
  top: .3rem;
  bottom: 0;
  width: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
  background: linear-gradient(180deg, rgba(22, 192, 96, .015), rgba(22, 192, 96, .13));
  transition:
    transform var(--tempo-ruhig) var(--kurve-aus),
    width     var(--tempo-ruhig) var(--kurve-aus),
    opacity   var(--tempo)       var(--kurve);
}

/* Die kräftige Linie am unteren Rand wandert mit */
.nav-gleiter::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--gruen), var(--gold));
  box-shadow: 0 0 14px rgba(22, 192, 96, .55);
}

/* Beschriftung über den Gleiter heben */
.nav a { z-index: 1; }

/* Sobald der Gleiter da ist, entfällt der Balken je Punkt -
   ohne JavaScript bleibt er und alles sieht aus wie bisher. */
.nav-inner.hat-gleiter a::after { display: none; }
.nav-inner.hat-gleiter a:hover  { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .nav-gleiter { transition: none; }
}

/* ============================================================
   22  Tippeingabe: Kopfzeile bleibt beim Blättern stehen
   ============================================================ */

/* Die Matrix bekommt ein eigenes Blätterfeld. Die Höhe greift
   nur, wenn die Liste wirklich länger ist - bei wenigen
   Spielern steht die Tabelle ganz normal da. */
.matrix-feld {
  max-height: calc(100dvh - 14rem);
  min-height: 16rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.matrix-feld thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--karte-tief);
  /* Der Rahmen scrollt sonst weg, weil border-collapse getrennt ist */
  box-shadow: inset 0 -1px 0 var(--linie-stark), 0 6px 14px rgba(0, 0, 0, .38);
}

/* Die Spielerspalte klebt links UND oben - die Ecke braucht
   die höchste Ebene, sonst schiebt sich der Rest darüber. */
.matrix-feld thead .spieler-spalte {
  z-index: 5;
  box-shadow: 1px 0 0 var(--linie-stark),
              inset 0 -1px 0 var(--linie-stark),
              0 6px 14px rgba(0, 0, 0, .38);
}
.matrix-feld tbody .spieler-spalte { z-index: 2; }

/* Auf schmalen Schirmen ist die Kompaktansicht im Einsatz -
   dort wäre ein zweites Blätterfeld nur hinderlich. */
@media (max-width: 760px) {
  .matrix-feld { max-height: none; min-height: 0; }
  .matrix-feld thead th { position: static; box-shadow: none; }
  .matrix-feld thead .spieler-spalte { box-shadow: 1px 0 0 var(--linie-stark); }
}

/* ============================================================
   23  Zugangsseite: Glaskarte vor dem Stadionfoto
   ============================================================ */

.tor-seite {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-x: hidden;
}

/* Das Foto liegt fest hinter allem. Der dunkle Schleier ist
   kein Schmuck: ohne ihn steht weisse Schrift auf hellem Rasen
   und ist nicht mehr lesbar. */
.tor-bild {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(10, 15, 12, .38), rgba(10, 15, 12, .66)),
    url("bilder/stadion-schmal.jpg") center / cover no-repeat;
  animation: torHeranfahren 18s var(--kurve) forwards;
}
@media (min-width: 900px) {
  .tor-bild {
    background-image:
      linear-gradient(rgba(10, 15, 12, .34), rgba(10, 15, 12, .62)),
      url("bilder/stadion.jpg");
  }
}

/* Sehr langsames Heranfahren - fällt kaum auf, nimmt dem
   Standbild aber die Starre. */
@keyframes torHeranfahren {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.tor { width: 100%; max-width: 25rem; }

/* --- Die Glaskarte -------------------------------------- */

.glaskarte {
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 20, 16, .46);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
  overflow: hidden;
}

/* Feiner Lichtstreifen oben - macht aus der Fläche echtes Glas */
.glaskarte { position: relative; }
.glaskarte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, .55) 45%, transparent);
}

.glaskarte-kopf {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.5rem 1.5rem 1.1rem;
}
.glaskarte-kopf h1 {
  font-family: var(--schrift-anzeige);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
  color: #fff;
}
.glaskarte-unter {
  margin: .15rem 0 0;
  font-size: .84rem;
  color: rgba(255, 255, 255, .7);
}

.tor-zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .8rem;
  color: var(--gruen-hell);
  background: rgba(22, 192, 96, .16);
  border: 1px solid rgba(22, 192, 96, .32);
}
.tor-zeichen svg { width: 1.45rem; height: 1.45rem; }

.glaskarte-inhalt { padding: 0 1.5rem 1.5rem; }

/* --- Eingabefeld ----------------------------------------- */

.tor-feld { display: block; margin-bottom: 1rem; }
.tor-feld > span {
  display: block;
  margin-bottom: .4rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--schrift-anzeige);
  color: rgba(255, 255, 255, .72);
}
.tor-feld input {
  width: 100%;
  padding: .8rem .9rem;
  font-size: 1rem;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: .7rem;
  transition: border-color var(--tempo) var(--kurve),
              box-shadow   var(--tempo) var(--kurve);
}
.tor-feld input::placeholder { color: rgba(255, 255, 255, .42); }
.tor-feld input:focus {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px rgba(22, 192, 96, .28);
}
.tor-feld input:disabled { opacity: .5; }

.tor-knopf { width: 100%; justify-content: center; }
.tor-knopf:disabled { opacity: .5; cursor: not-allowed; }

.tor-fehler {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: .65rem;
  font-size: .89rem;
  color: #ffd9d6;
  background: rgba(255, 69, 58, .16);
  border: 1px solid rgba(255, 69, 58, .38);
}
.tor-rest { display: block; opacity: .8; font-size: .82rem; margin-top: .15rem; }

.tor-hinweis {
  margin: 1.1rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}

/* Ohne Unschärfe-Unterstützung (ältere Browser) muss die Karte
   trotzdem lesbar sein - dann eben deckend statt durchscheinend. */
@supports not (backdrop-filter: blur(4px)) {
  .glaskarte { background: rgba(18, 26, 21, .93); }
}

@media (prefers-reduced-motion: reduce) {
  .tor-bild { animation: none; }
}

/* ============================================================
   24  Fußball als Mauszeiger
   ============================================================ */

/* Nur die Spieleransicht - im Adminbereich bleibt der normale
   Zeiger, dort wird in schmale Felder getippt und da zählt
   Genauigkeit mehr als Spielerei.

   Der Treffpunkt liegt in der Ballmitte (10 10 bei 20 px).
   Zwei Deklarationen: die erste versteht jeder Browser, die
   zweite liefert auf scharfen Bildschirmen das doppelt so
   fein aufgelöste Bild. Wer image-set nicht kennt, behält
   stillschweigend die erste. */
body.mit-ball {
  cursor: url("bilder/ball.png") 10 10, auto;
}
body.mit-ball {
  cursor: -webkit-image-set(url("bilder/ball.png") 1x,
                            url("bilder/ball-2x.png") 2x) 10 10, auto;
  cursor: image-set(url("bilder/ball.png") 1x,
                    url("bilder/ball-2x.png") 2x) 10 10, auto;
}

/* Anklickbares hat im Stylesheet eigene pointer-Regeln, und der
   Browser selbst setzt bei Links ebenfalls die Hand. Beides muss
   ueberschrieben werden, damit der Ball wirklich ueberall liegt.
   Als Rueckfallebene bleibt "pointer" stehen - kommt das Bild
   einmal nicht an, erscheint wieder die gewohnte Hand.

   WILLST DU AUF LINKS UND KNOEPFEN LIEBER DIE HAND?
   Dann diesen einen Block loeschen, sonst nichts. */
body.mit-ball a,
body.mit-ball button,
body.mit-ball .btn,
body.mit-ball summary,
body.mit-ball label,
body.mit-ball [role="button"] {
  cursor: url("bilder/ball.png") 10 10, pointer;
  cursor: -webkit-image-set(url("bilder/ball.png") 1x,
                            url("bilder/ball-2x.png") 2x) 10 10, pointer;
  cursor: image-set(url("bilder/ball.png") 1x,
                    url("bilder/ball-2x.png") 2x) 10 10, pointer;
}

/* In Eingabefeldern muss der Schreibbalken sichtbar bleiben,
   sonst weiss man nicht, wo man tippt. */
body.mit-ball input,
body.mit-ball textarea,
body.mit-ball select {
  cursor: auto;
}

/* Deaktiviertes bleibt erkennbar deaktiviert - muss nach den
   Regeln oben stehen, sonst gewinnt der Ball. */
body.mit-ball a:disabled,
body.mit-ball button:disabled,
body.mit-ball .btn:disabled,
body.mit-ball input:disabled,
body.mit-ball select:disabled,
body.mit-ball textarea:disabled { cursor: not-allowed; }

/* Auf Touchgeräten gibt es keinen Zeiger. Hier müssen dieselben
   Selektoren stehen wie oben - sonst behalten Links und Knöpfe
   den Ball, weil sie genauer benannt sind und damit gewinnen. */
@media (pointer: coarse) {
  body.mit-ball,
  body.mit-ball a,
  body.mit-ball button,
  body.mit-ball .btn,
  body.mit-ball summary,
  body.mit-ball label,
  body.mit-ball [role="button"] { cursor: auto; }
}

/* --- Spur hinter dem Ball -------------------------------- */

/* Die Bälle der Spur liegen über allem, fangen aber keine
   Klicks ab. Animiert werden ausschließlich transform und
   opacity - alles andere würde bei jeder Mausbewegung ein
   neues Layout auslösen und die Seite zäh machen. */
.ballspur {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  z-index: 9999;
  pointer-events: none;
  background: url("bilder/ball-spur.png") center / contain no-repeat;
  will-change: transform, opacity;
  animation: ballAusrollen 480ms cubic-bezier(.25, .6, .3, 1) forwards;
}

@keyframes ballAusrollen {
  from { opacity: .6; }
  to   { opacity: 0;  }
}

/* Rollen und Schrumpfen liegen auf einer zweiten Ebene, damit
   die Verschiebung zur Mausposition davon unberührt bleibt. */
.ballspur i {
  display: block;
  width: 100%;
  height: 100%;
  animation: ballDrehen 480ms linear forwards;
}

@keyframes ballDrehen {
  from { transform: rotate(0)      scale(1);   }
  to   { transform: rotate(160deg) scale(.35); }
}

@media (prefers-reduced-motion: reduce) {
  .ballspur { display: none; }
}