/* ==========================================================================
   VfL Handball Mennighüffen – Design-System
   --------------------------------------------------------------------------
   Farbwelt aus dem Vereinslogo gemessen: #34AA48.
   Dieses Grün erreicht auf Weiß nur 3.0:1 und taugt damit NICHT als Textfarbe.
   Deshalb zwei Töne aus derselben Farbfamilie (Farbton 130°):

     --vt-green-brand  #34AA48  Flächen, Balken, Wappen, Text auf Dunkel (5.9:1)
     --vt-green        #257E34  Text, Links, Button-Hintergrund auf Weiß (5.1:1)

   Leitmotive (Konzept Kap. 3): Diagonalen statt gerader Kanten, der Grün-Balken
   als Trikot-Kante, große Ziffern, Asymmetrie, Uppercase-Kicker, Bold-Sektionen
   auf Dunkelgrün, dezente Motion mit Respekt vor prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts – self-hosted, kein Google-CDN
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Grün-Familie */
  --vt-green-brand:  #34AA48;
  --vt-green:        #257E34;
  --vt-green-hover:  #1C6127;
  --vt-green-light:  #E8F5EB;
  --vt-green-signal: #4ADE5A;

  /* Dunkel / Flächen */
  --vt-ink:     #0E1A13;
  --vt-ink-2:   #16241C;
  --vt-white:   #FFFFFF;
  --vt-surface: #F6F8F6;
  --vt-border:  #DDE5DE;

  /* Text – alle Werte ≥ 4.5:1 auf ihrem Grund */
  --vt-text:        #14201A;
  --vt-text-light:  #46554C;
  --vt-text-muted:  #5F6D65;
  --vt-on-dark:     rgba(255, 255, 255, .82);
  --vt-on-dark-dim: rgba(255, 255, 255, .62);

  /* Ergebnis-Codes */
  --vt-win:  #257E34;
  --vt-draw: #5F6D65;
  --vt-loss: #B02A1D;

  /* Radius – kantig-sportlich, keine Bubble-Ecken */
  --r-sm: 4px;
  --r-md: 8px;

  /* Spacing, 4px-Basis */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* Typo */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --header-h: 76px;
  /* Wie weit der Matchday-Block in den Hero hineinragt. Hintergrundstopp und
     negativer Abstand MUESSEN denselben Wert nutzen. */
  /* Wie weit der Matchday-Block in den Hero hineinragt. Davon gehen rund
     130px fuer Kopfzeile und Abstand ab - der Rest ist die Ueberlappung der
     Karten. Wert wird an DREI Stellen gebraucht: Hero-Polsterung, negativer
     Abstand und Hintergrundstopp. */
  --md-lift: clamp(160px, 14vw, 220px);
  /* Breite der hellen Buehne im Hero. Wird an ZWEI Stellen gebraucht: die
     Buehne selbst und der rechte Freiraum des Hero-Textes. */
  --stage-w: clamp(360px, 46vw, 700px);
  /* Wie weit die Grafik rechts aus dem Bild herauslaeuft. */
  --stage-bleed: clamp(20px, 3.5vw, 70px);
  /* Wie weit die Grafik UNTEN aus der hellen Flaeche herausbricht. Das ist der
     Kern von Idee 2: die helle Flaeche ist kuerzer als das Bild, die Figuren
     treten aus ihr heraus. Ohne das bleibt es ein Bild im Kasten. */
  --stage-out: clamp(56px, 7.5vw, 120px);
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--vt-text);
  background: var(--vt-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--vt-green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--vt-green-hover); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--vt-green);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-6); }
.wrap--narrow { max-width: 760px; }

section { padding-block: var(--s-24); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--vt-green); color: #fff;
  padding: var(--s-3) var(--s-6);
  font-family: var(--display); font-weight: 800;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Kicker – Uppercase-Label mit Grün-Balken (Trikot-Kante)
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vt-green);
}
.kicker::before {
  content: "";
  width: 26px; height: 3px;
  background: var(--vt-green);
  flex: none;
}
.kicker.on-dark { color: var(--vt-green-signal); }
.kicker.on-dark::before { background: var(--vt-green-signal); }
.kicker.on-cta { color: #fff; }
.kicker.on-cta::before { background: rgba(255, 255, 255, .75); }
.kicker--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Sektionsköpfe
   -------------------------------------------------------------------------- */
.sec-head { margin-bottom: var(--s-12); }
.sec-head h1, .sec-head h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  text-transform: uppercase;
  margin-top: var(--s-3);
}
.sec-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.sec-head.is-dark h1, .sec-head.is-dark h2 { color: #fff; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}

.btn-primary { background: var(--vt-green); color: #fff; }
.btn-primary:hover { background: var(--vt-green-hover); color: #fff; transform: translateY(-2px); }

.btn-dark { background: var(--vt-ink); color: #fff; }
.btn-dark:hover { background: var(--vt-ink-2); color: #fff; transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--vt-green); border-color: var(--vt-border); }
.btn-outline:hover { border-color: var(--vt-green); color: var(--vt-green-hover); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost:hover { border-color: var(--vt-green-signal); color: var(--vt-green-signal); }
.btn-ghost--on-green:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   7. Header – transparent über dem Hero, weiß beim Scrollen
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .25s, box-shadow .25s;
}

/* Die Kopfzeile darf breiter laufen als der Inhalt – Wappen, sechs Menüpunkte,
   CTA und der Deltatec-Hinweis brauchen mehr als die 1200px des Textrasters. */
.site-header .wrap { max-width: 1360px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--vt-text);
  flex: none;
}
.brand .vfl-logo { width: 52px; height: 52px; object-fit: contain; flex: none; }
.brand-text { line-height: 1.1; }

/* Der Header liegt IMMER über einer dunklen Fläche: Startseite über dem Hero,
   Unterseiten über .page-head / .team-hero / .single__head. Solange nicht
   gescrollt ist, muss die Navigation deshalb überall hell sein – mit der
   früheren Einschränkung auf .has-hero stand sie auf Unterseiten dunkel auf
   dunkel. */
.site-header:not(.is-scrolled) .brand,
.site-header:not(.is-scrolled) .menu a:not(.btn) { color: #fff; }
.site-header:not(.is-scrolled) .burger span { background: #fff; }

.site-header.is-scrolled {
  background: var(--vt-white);
  box-shadow: 0 3px 0 var(--vt-green-brand), 0 6px 18px rgba(14, 26, 19, .07);
}

.menu { display: flex; align-items: center; gap: clamp(18px, 1.9vw, 30px); }
.menu ul { display: contents; margin: 0; padding: 0; }
/* display:contents am ul hebt dessen list-style aus – der Marker muss am li weg. */
.menu li { position: relative; list-style: none; }

.menu a:not(.btn) {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vt-text);
}
.menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 3px;
  background: var(--vt-green-brand);
  transition: width .2s;
}
.menu a:not(.btn):hover::after,
.menu .current-menu-item > a::after,
.menu .current_page_item > a::after { width: 100%; }

.menu a:not(.btn):hover { color: var(--vt-green); }
.site-header:not(.is-scrolled) .menu a:not(.btn):hover { color: var(--vt-green-signal); }

/* Untermenüs */
.menu .sub-menu {
  position: absolute;
  top: 100%; left: -14px;
  min-width: 210px;
  margin: 0; padding: var(--s-2) 0;
  list-style: none;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-top: 3px solid var(--vt-green-brand);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 14px 30px rgba(14, 26, 19, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  display: block;
}
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu .sub-menu a { display: block !important; padding: 9px 18px !important; color: var(--vt-text) !important; }
.menu .sub-menu a::after { display: none; }
.menu .sub-menu a:hover { background: var(--vt-green-light); color: var(--vt-green) !important; }

.nav-cta { padding: 11px 20px; font-size: .8rem; white-space: nowrap; flex: none; }

/* --------------------------------------------------------------------------
   7b. „Made by Deltatec" – Header-Badge und Footer-Block
   -------------------------------------------------------------------------- */
.dt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1;
}
.dt-badge__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dt-badge__img { width: auto; display: block; }

/* Header: „Sponsored by" ueber dem Logo. Nebeneinander wuerde die Kopfzeile zu
   breit; gestapelt bleibt die Breite die des Logos und der Hinweis ist lesbar.
   Bewusst OHNE Trennlinie – die Logodatei brachte frueher schon einen
   Fremdstrich mit, zusammen wirkte das wie ein Kasten um das Logo. */
.dt-badge--header {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  opacity: .72;
  transition: opacity .2s;
}
.dt-badge--header:hover { opacity: 1; }
.dt-badge--header .dt-badge__label { color: var(--vt-on-dark-dim); }
/* Die Wortmarke ist zweizeilig – unter ~30px werden die Zeilen unlesbar. */
.dt-badge--header .dt-badge__img { height: 30px; }

/* Zwei Dateien, per Zustand umgeschaltet: heller Header braucht die lila
   Wortmarke. Ein CSS-Filter waere billiger, haette aber das gruene Dreieck
   mitgedreht. */
.dt-badge--header .dt-badge__img--dunkel { display: none; }
.site-header.is-scrolled .dt-badge--header .dt-badge__img--hell { display: none; }
.site-header.is-scrolled .dt-badge--header .dt-badge__img--dunkel { display: block; }
.site-header.is-scrolled .dt-badge--header { opacity: 1; }
.site-header.is-scrolled .dt-badge--header .dt-badge__label { color: var(--vt-text-muted); }

/* Footer */
.dt-badge--footer { gap: 10px; }
.dt-badge--footer .dt-badge__label { color: var(--vt-on-dark-dim); font-size: .62rem; }
.dt-badge--footer .dt-badge__img { height: 18px; }
.dt-badge--footer:hover .dt-badge__label { color: #fff; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 4px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 26px; height: 3px;
  background: var(--vt-ink);
  transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Mobile-Overlay
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--vt-ink);
  /* Helle Grundfarbe für das ganze Overlay – sonst erbt loser Text die dunkle
     Body-Farbe und stünde unsichtbar auf dem dunklen Grund. */
  color: #fff;
  overflow-y: auto;
  padding: calc(var(--header-h) + var(--s-8)) var(--s-6) var(--s-12);
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__list { list-style: none; margin: 0 0 var(--s-8); padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mobile-nav__list a {
  display: block;
  padding: var(--s-4) 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.mobile-nav__list a:hover { color: var(--vt-green-signal); }
.mobile-nav__list .sub-menu { list-style: none; margin: 0 0 var(--s-3); padding: 0 0 0 var(--s-4); }
.mobile-nav__list .sub-menu a { font-size: 1rem; font-weight: 700; color: var(--vt-on-dark); padding: 10px 0; }
.mobile-nav__list .sub-menu li { border: 0; }
.mobile-nav__cta { width: 100%; justify-content: center; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Hero – diagonaler Schnitt unten
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Stapelebene, damit das Aktionsband darunter geschoben werden kann und
     nur im weggeschnittenen Dreieck sichtbar wird. */
  z-index: 2;
  display: flex;
  align-items: center;
  /* Gedeckelt: 92vh allein waere auf einem 1200px hohen Schirm 1104px, und der
     erste Inhalt begaenne erst nach 1,45 Bildschirmen. */
  min-height: clamp(480px, 74vh, 720px);
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(14, 26, 19, .95) 0%, rgba(14, 26, 19, .74) 45%, rgba(37, 126, 52, .58) 100%),
    radial-gradient(circle at 75% 30%, rgba(74, 222, 90, .22), transparent 55%),
    var(--vt-ink);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

/* Feines Streifenraster – gibt der Fläche Textur statt flachem Verlauf. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 26px);
  pointer-events: none;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: grayscale(.35);
}
.hero.has-photo { background-blend-mode: multiply; }

/* Das Wappen als großes Hintergrundmotiv – zurückhaltend, damit die
   Headline führt und die weiße Scheibe nicht mit ihr konkurriert. */
.hero__ball {
  position: absolute;
  right: clamp(20px, 7vw, 170px);
  top: 50%;
  width: min(32vw, 380px);
  transform: translateY(-46%);
  opacity: .34;
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* Unten bewusst knapper als das Section-Raster: auf kurzen Bildschirmen
     treibt nicht 78vh die Hoehe, sondern Inhalt plus Polsterung. */
  /* Untere Polsterung == --md-lift: der Hero reserviert genau die Zone, in
     die der Matchday hineinragt. Kleiner -> die Kicker-Zeile landet auf den
     Knoepfen; groesser -> die Kopfzeile rutscht um die Differenz zu tief. */
  padding-block: calc(var(--header-h) + var(--s-8)) var(--md-lift);
}

.hero h1 {
  max-width: 14ch;
  margin: var(--s-4) 0 var(--s-3);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  text-transform: uppercase;
  color: #fff;
}
.hero h1 em { font-style: normal; color: var(--vt-green-signal); }

.hero p {
  max-width: 44ch;
  margin-bottom: var(--s-8);
  font-size: 1.15rem;
  color: var(--vt-on-dark);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   9a. Aktionsgrafik als helle Buehne im Hero
   -------------------------------------------------------------------------- */

/* Die Illustration braucht hellen Grund - auf Dunkelgruen verschwindet ihre
   dunkle Strichzeichnung. Als eigenes Band unter dem Hero kostete sie 332px
   Scrollweg, am Seitenende fand sie niemand. Hier sitzt sie INNERHALB der
   Hero-Flaeche und kostet keine Hoehe.

   Unten endet die Buehne oberhalb von --md-lift, damit sie nicht in die Zone
   ragt, in die der Matchday-Block hineingezogen wird. */
.hero__stage {
  position: absolute;
  /* NICHT top: 0. Der Keil laeuft dann hinter die Kopfzeile, und dort stehen
     weisse Navigation und das weisse Deltatec-Logo: gemessen begann die helle
     Flaeche oben bei x=924, das Badge sass bei x=1276 - weiss auf hell. */
  top: var(--header-h);
  right: calc(-1 * var(--stage-bleed));
  bottom: var(--md-lift);
  /* Kasten = helle Flaeche PLUS Ueberhang; die helle Flaeche selbst zeichnet
     das ::before, damit die Grafik ueber deren rechte Kante hinauslaufen kann. */
  width: calc(var(--stage-w) + var(--stage-bleed));
  z-index: 1;

  /* Diagonale als LAENGE, nicht in Prozent: Kasten und helle Flaeche sind
     unterschiedlich breit, mit Prozent liefen die beiden Schnitte auseinander. */
  --stage-cut: calc(var(--stage-w) * .22);

  /* KEIN clip-path auf dem Kasten: er hatte die Grafik auf die helle Flaeche
     eingeschlossen, und genau dadurch sah es aus wie ein Bild im Kasten statt
     wie eine Szene. Nach unten begrenzt der Kasten selbst (bottom: --md-lift),
     nach unten rechts der clip-path des Heros. */
}

.hero__stage::before {
  content: "";
  position: absolute;
  /* Unten kuerzer als der Kasten: um --stage-out steht die Grafik ueber die
     helle Flaeche hinaus auf dem Dunkelgruen. */
  inset: 0 var(--stage-bleed) var(--stage-out) 0;
  background: var(--vt-surface);
  /* Gleiche Diagonale wie der Kasten, gleiche Handschrift wie der untere
     Schnitt des Heros. */
  clip-path: polygon(var(--stage-cut) 0, 100% 0, 100% 100%, 0 100%);
}

.hero__stage-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  /* Voll die Buehnenhoehe nutzen. Ein Abstand hier kostete Bildgroesse: mit
     2x24px Rand band max-height und verkleinerte die Grafik von 713 auf 621px
     effektive Breite. Die Illustration bringt ihren eigenen transparenten Rand
     mit, sie stoesst also nicht an die Kanten. Gegen Ueberragen schuetzt der
     clip-path des Kastens. */
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

/* Alles, was zur Buehne gehoert, gilt NUR dort, wo die Buehne existiert.
   Vorher galten die Regeln immer und wurden unter 1080px zurueckgesetzt - die
   kleinere Schriftgroesse war dabei vergessen worden, die Ueberschrift blieb
   auf 1000px Breite bei 36px statt 70px. */
@media (min-width: 1081px) {
  /* Wo die Buehne steht, entfaellt das Wappen: zwei Handballmotive
     nebeneinander sind eines zu viel. */
  .hero.has-stage .hero__ball { display: none; }

  /* Nur die TATSAECHLICHE Ueberdeckung freihalten, nicht die ganze Keilbreite:
     der Wrap ist auf --wrap begrenzt und mittig, bei breiten Fenstern reicht
     der Keil also gar nicht so weit hinein. Mit der vollen Breite blieben bei
     1920px nur 420px Textspalte und die Ueberschrift brach dreizeilig. */
  .hero.has-stage .hero__inner {
    padding-right: max(
      var(--s-6),
      calc(var(--stage-w) + var(--s-8) - (100vw - var(--wrap)) / 2)
    );
  }

  /* Schmalere Textspalte braucht eine kleinere Headline. */
  .hero.has-stage h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
}

/* --------------------------------------------------------------------------
   10. Matchday – asymmetrisch, nicht das 3er-Karten-Raster
   -------------------------------------------------------------------------- */
/* Der Matchday-Block wird in den Hero hineingezogen: die Kopfzeile sitzt noch
   auf der dunklen Flaeche, die Karten ueberlappen deren Unterkante. So steht der
   naechste Anwurf im ersten Bildschirm, ohne dass der Hero schrumpfen muss.

   Der Trick ist der Hintergrund: die obere Zone bleibt DURCHSICHTIG, damit der
   Hero durchscheint, und erst darunter setzt die helle Flaeche ein. Ein harter
   Farbstopp, kein Verlauf. Der Abschnitt braucht dafuer z-index 3, weil der Hero
   auf 2 liegt. */
.matchday {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--md-lift));
  padding-top: var(--s-8);
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--md-lift),
    var(--vt-surface) var(--md-lift),
    var(--vt-surface) 100%
  );
}

/* Auf dem dunklen Grund brauchen die Karten einen Schatten, sonst schweben sie
   ohne Halt darin. */
.matchday .sec-head { margin-bottom: var(--s-6); }

.matchday .md-team { box-shadow: 0 10px 28px rgba(14, 26, 19, .22); }

.md-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

/* --- Matchday-Übersicht: je Mannschaft nächstes Spiel + letztes Ergebnis --- */
.md-teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-team {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Der Grün-Balken als Trikot-Kante, wie überall */
.md-team::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--vt-green-brand);
}

.md-team__head {
  display: block;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 5px);
  background: var(--vt-ink);
  color: #fff;
  text-decoration: none;
}
.md-team__head:hover { color: #fff; background: var(--vt-ink-2); }
.md-team__name {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.md-team__league {
  display: block;
  margin-top: 2px;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vt-green-signal);
}

.md-next {
  flex: 1;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 5px);
}
.md-next__when {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
  font-size: .82rem;
}
.md-next__date { font-family: var(--display); font-weight: 800; }
.md-next__time { color: var(--vt-text-light); font-variant-numeric: tabular-nums; }
.md-next__where {
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.md-next__where.is-home { background: var(--vt-green-light); color: var(--vt-green); }
.md-next__where.is-away { background: var(--vt-surface); color: var(--vt-text-light); }

.md-next__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
}
.md-next__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: .8rem;
  line-height: 1.25;
}
.md-next__side .team-crest { width: 46px; height: 46px; font-size: .85rem; }
/* Unsere Mannschaft etwas kräftiger setzen. */
.md-next__side.is-ours { font-weight: 600; color: var(--vt-text); }
.md-next__vs {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--vt-text-muted);
}
.md-next__hall {
  margin: var(--s-3) 0 0;
  font-size: .78rem;
  color: var(--vt-text-muted);
  text-align: center;
}

.md-next--empty p { margin: 0; color: var(--vt-text-light); font-size: .9rem; }
.md-next--empty .md-next__hint { margin-top: var(--s-1); font-size: .8rem; color: var(--vt-text-muted); }

.md-last {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 5px);
  border-top: 1px solid var(--vt-border);
  background: var(--vt-surface);
  font-size: .84rem;
}
.md-last__label {
  font-family: var(--display);
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
}
.md-last__opp {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-last .res-badge { width: 22px; height: 22px; font-size: .68rem; flex: none; }
.md-last--empty { color: var(--vt-text-muted); }

.md-source {
  margin-top: var(--s-6);
  font-size: .78rem;
  color: var(--vt-text-muted);
}

.match-card {
  position: relative;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Der Grün-Balken als Trikot-Kante. */
.match-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--vt-green-brand);
}

.mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: 14px var(--s-6);
  background: var(--vt-ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mc-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}

.team-slot { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.team-slot strong {
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Wappen-Kachel, leicht geschert – die „Trikot"-Anmutung */
.team-crest {
  display: grid;
  place-items: center;
  width: 82px; height: 82px;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.4rem;
  color: #fff;
  transform: skewX(-7deg);
}
.team-crest > span { transform: skewX(7deg); }
.crest-home { background: var(--vt-green); }
.crest-away { background: var(--vt-ink); }

.vs {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--vt-text-muted);
}

.mc-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--vt-border);
  font-size: .9rem;
  color: var(--vt-text-light);
}
.mc-foot b { color: var(--vt-text); }

.mc-empty { padding: var(--s-8) var(--s-6); }
.mc-empty__lead {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--vt-text);
}
.mc-empty p { color: var(--vt-text-light); max-width: 46ch; }
.mc-empty .btn { margin-top: var(--s-4); }

/* Ergebnis-Spalte */
.results {
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  padding-bottom: var(--s-2);
}
.results h3 {
  padding: var(--s-4) 22px 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vt-text-light);
}

.res-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 22px;
  border-top: 1px solid var(--vt-border);
  font-size: .92rem;
}
.res-row--empty { display: block; color: var(--vt-text-light); }

.res-badge {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 900;
  font-size: .75rem;
  color: #fff;
}
.b-w { background: var(--vt-win); }
.b-d { background: var(--vt-draw); }
.b-l { background: var(--vt-loss); }

.res-opp { min-width: 0; }
.res-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-where { color: var(--vt-text-muted); margin-right: 2px; }
.res-own {
  display: block;
  font-size: .74rem;
  line-height: 1.3;
  color: var(--vt-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-score {
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.results__src {
  padding: var(--s-3) 22px 0;
  font-size: .74rem;
  color: var(--vt-text-muted);
  border-top: 1px solid var(--vt-border);
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   11. News – Magazin-Raster, erste Karte groß
   -------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--vt-green-brand);
  box-shadow: 0 12px 30px rgba(14, 26, 19, .1);
  color: inherit;
}

/* Feature-Karte über zwei Spalten UND zwei Reihen – bewusste Asymmetrie, und
   die beiden kleinen Karten stapeln sich rechts daneben statt eine fast leere
   zweite Reihe zu hinterlassen. */
.news-card--feature { grid-column: span 2; grid-row: span 2; }
.news-card--feature .nc-img { aspect-ratio: auto; flex: 1; min-height: 260px; }
.news-card--feature h2,
.news-card--feature h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.news-card--feature .nc-body { flex: 0 0 auto; }

.nc-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--vt-green) 0%, var(--vt-ink) 100%);
  overflow: hidden;
}
.nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .nc-img img { transform: scale(1.05); }

.card-img-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.card-img-fallback img { width: 38%; height: auto; opacity: .55; }

.nc-img .tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  background: var(--vt-green);
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nc-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  padding: 18px 20px 22px;
}
.nc-body .date {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
}
.nc-body h2,
.nc-body h3 {
  font-size: 1.2rem;
  letter-spacing: -.01em;
  text-transform: none;
}
.nc-excerpt { font-size: .92rem; color: var(--vt-text-light); }
.nc-more {
  margin-top: auto;
  padding-top: var(--s-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vt-green);
}

/* --------------------------------------------------------------------------
   12. Teams – Kacheln mit Hover-Zoom
   -------------------------------------------------------------------------- */
.team-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5, 20px);
}

.tcard {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 5:3 wie die Bildgroesse vfl-team. Weicht das Seitenverhaeltnis hier ab,
     beschneidet object-fit ein ZWEITES Mal - unsichtbar im Code, sichtbar am
     abgeschnittenen Spieler. */
  aspect-ratio: 5 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.tcard__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1E7F38 0%, var(--vt-ink) 100%);
  transition: transform .4s;
}
.tcard__bg img { width: 100%; height: 100%; object-fit: cover; }
.tcard:hover .tcard__bg { transform: scale(1.06); }

/* Duotone-Schleier, damit gemischte Fotoqualität einheitlich wirkt */
.tcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 26, 19, .1) 0%, rgba(14, 26, 19, .88) 100%);
  pointer-events: none;
}

.tcard__content { position: relative; z-index: 2; padding: 22px; }
.tcard__content .liga {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vt-green-signal);
  margin-bottom: 2px;
}
.tcard__content h3 { font-size: 1.5rem; text-transform: uppercase; color: #fff; }

/* Extern verlinkte Mannschaft (Jugend -> JSG LöMO) */
.tcard__ext {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vt-green-signal);
}
.tcard--external .tcard__bg { background: linear-gradient(135deg, #17692F 0%, var(--vt-ink) 100%); }

.tcard__arrow {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .18);
  font-weight: 900;
  transition: background-color .2s, transform .2s;
}
.tcard:hover .tcard__arrow { background: var(--vt-green); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   13. Statistik-Band – Diagonale + große Ziffern
   -------------------------------------------------------------------------- */
.stats {
  background: var(--vt-ink);
  color: #fff;
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  padding-block: var(--s-24);
}
.stats .wrap { padding-block: var(--s-8); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  list-style: none;
  margin: 0; padding: 0;
  text-align: center;
}
.stat__num {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--vt-green-signal);
  font-variant-numeric: tabular-nums;
}
.stat__lbl {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vt-on-dark-dim);
}

/* --------------------------------------------------------------------------
   14. Sponsoren
   -------------------------------------------------------------------------- */
.sponsors { background: var(--vt-surface); }

.sp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  list-style: none;
  margin: 0; padding: 0;
}
.sp { display: block; }
/* Logos stehen in Farbe – so, wie die Partner sie führen.
   Feste Höhe statt aspect-ratio: gegen eine aus aspect-ratio abgeleitete Höhe
   löst `max-height: 100%` am Bild nicht auf, hohe Logos drückten die Kachel
   auf und die Kästchen standen unterschiedlich hoch. */
.sp__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(88px, 7.5vw, 108px);
  padding: 14px;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sp__inner:hover {
  border-color: var(--vt-green-brand);
  box-shadow: 0 8px 22px rgba(14, 26, 19, .09);
  transform: translateY(-2px);
}
/* Absoluter Deckel statt max-height:100% – prozentuale Höhen gegen einen
   Container, dessen Zeile mitwächst, greifen nicht zuverlässig. */
.sp__inner img {
  max-height: clamp(52px, 4.6vw, 70px);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sp--main .sp__inner img { max-height: clamp(76px, 7vw, 104px); }
.sp__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: .9rem;
  color: var(--vt-text-light);
}

/* --------------------------------------------------------------------------
   15. CTA-Band
   -------------------------------------------------------------------------- */
.cta {
  background: linear-gradient(120deg, var(--vt-green) 0%, var(--vt-green-hover) 100%);
  color: #fff;
  text-align: center;
}
.cta h2 {
  margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  color: #fff;
}
.cta p { max-width: 52ch; margin: 0 auto var(--s-8); color: rgba(255, 255, 255, .92); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* --------------------------------------------------------------------------
   16. Innenseiten
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--vt-ink);
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-16);
}
.page-head .sec-head { margin-bottom: 0; }

.page-body, .single__body { padding-block: var(--s-16); }

.entry h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: var(--s-12) 0 var(--s-4); text-transform: uppercase; }
.entry h3 { font-size: 1.25rem; margin: var(--s-8) 0 var(--s-3); }
.entry > *:first-child { margin-top: 0; }
.entry img { border-radius: var(--r-md); }
.entry blockquote {
  margin: var(--s-8) 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  border-left: 6px solid var(--vt-green-brand);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}

.single__head {
  background: var(--vt-ink);
  color: #fff;
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-16);
}
.single__head h1 {
  margin: var(--s-4) 0 var(--s-3);
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-transform: uppercase;
  color: #fff;
}
.single__meta { color: var(--vt-on-dark-dim); font-size: .92rem; margin: 0; }
.single__figure { margin: 0; transform: translateY(calc(var(--s-12) * -1)); }
.single__figure img { border-radius: var(--r-md); width: 100%; }
.single__foot { padding-bottom: var(--s-24); }

.no-results { color: var(--vt-text-light); }

/* Pagination */
.pagination { margin-top: var(--s-12); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px; height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
  color: var(--vt-text);
}
.pagination .page-numbers:hover { border-color: var(--vt-green-brand); color: var(--vt-green); }
.pagination .page-numbers.current { background: var(--vt-green); border-color: var(--vt-green); color: #fff; }

/* --------------------------------------------------------------------------
   17. Umschalter Spielplan / Tabelle
   (Der weiße Rahmenkasten .hbnet-widget ist entfallen – er umschloss das
   abgeschaltete handball.net-Widget und stand als leerer Streifen über der
   Monatszeile des Spielplans.)
   -------------------------------------------------------------------------- */
.hb-tabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------------------
   18c. Ligatabelle + Spielplan nebeneinander

   Ab 1100px stehen beide Tafeln nebeneinander statt hintereinander in Reitern.
   Grund: Auf der Mannschaftsseite war viel zu scrollen, und wer den Spielplan
   liest, will meistens auch den Tabellenplatz sehen. Die Reiter bleiben im
   Markup und uebernehmen darunter wieder - deshalb hier das !important gegen
   das [hidden], das die Reiter-Logik setzt.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .hbnet-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
  .hbnet-block .hb-tabs { display: none; }
  .hbnet-block .hb-panel[hidden] { display: block !important; }
  /* Halbe Breite traegt keine neun Spalten: Siege, Unentschieden, Niederlagen
     und die Tore entfallen. Platz, Mannschaft, Spiele, Differenz und Punkte
     sind das, wonach jemand in einer Tabelle sucht. */
  .hbnet-block .lt__opt { display: none; }
}

/* ---------------------------------------------------------------------------
   18d. Live-Ticker

   Steht im Matchday-Abschnitt ueber der Karte und damit auf hellem Grund.
   --------------------------------------------------------------------------- */
.live-ticker {
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.live-ticker.is-live { border-color: var(--vt-green); }
.lt-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.lt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vt-green-light); color: var(--vt-green-hover);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px;
}
.live-ticker.is-live .lt-badge { background: var(--vt-green); color: #fff; }
.lt-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Pulsieren nur, wo es niemanden stoert - wer Bewegung reduziert haben will,
   bekommt einen ruhigen Punkt. */
@media (prefers-reduced-motion: no-preference) {
  .live-ticker.is-live .lt-dot { animation: lt-puls 1.6s ease-in-out infinite; }
}
@keyframes lt-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lt-paarung { font-weight: 600; }
.lt-paarung b { margin: 0 6px; font-size: 1.1rem; }

.lt-liste { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.lt-ev {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--vt-border);
  font-size: .9rem;
}
.lt-ev:last-child { border-bottom: 0; }
.lt-min { color: var(--vt-text-muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.lt-spieler { color: var(--vt-text-light); }
.lt-spieler::before { content: " – "; color: var(--vt-text-muted); }
.lt-stand { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Eigene Treffer hervorheben. Nur Farbe reicht nicht - deshalb zusaetzlich der
   Balken an der Kante. */
.lt-ev.is-tor.is-heim { box-shadow: inset 3px 0 0 var(--vt-green); padding-left: 10px; }
.lt-ev.is-strafe .lt-was { color: var(--vt-loss); }
.lt-quelle { margin: var(--s-3) 0 0; font-size: .74rem; color: var(--vt-text-muted); }

.liga-tabelle { overflow-x: auto; }
.lt { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lt__caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--s-3);
  color: var(--vt-text-muted);
  font-size: .82rem;
}
.lt th, .lt td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--vt-border); }
.lt thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-text-muted); }
.lt thead th abbr { text-decoration: none; border: 0; }
.lt__pl { width: 2.2rem; text-align: right; color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }
.lt__team { text-align: left; font-weight: 600; }
.lt td { font-variant-numeric: tabular-nums; }
.lt__pkt { font-weight: 700; }
/* Eigene Mannschaft: nicht nur Farbe - wer Gruen schlecht sieht, braucht den
   Balken an der Kante. */
.lt tbody tr.is-eigen { background: var(--vt-green-light); }
.lt tbody tr.is-eigen .lt__team { box-shadow: inset 3px 0 0 var(--vt-green); padding-left: 10px; }
.lt__quelle { margin: var(--s-3) 0 0; font-size: .74rem; color: var(--vt-text-muted); }

/* Schmale Schirme: die Kuerzel-Spalten fallen weg, Platz/Team/Diff/Punkte bleiben. */
@media (max-width: 640px) {
  .lt__opt { display: none; }
}

.hb-tab {
  padding: 11px 20px;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vt-text-light);
  cursor: pointer;
}
.hb-tab.is-active {
  background: var(--vt-green);
  border-color: var(--vt-green);
  color: #fff;
}

/* --------------------------------------------------------------------------
   18. Formulare des Plugins (vt-Klassen) an unser Design angleichen
   -------------------------------------------------------------------------- */
.vt-form { display: grid; gap: var(--s-4); }
.vt-row { display: grid; gap: var(--s-2); }
.vt-form label { font-weight: 600; font-size: .92rem; }
.vt-form input[type="text"],
.vt-form input[type="email"],
.vt-form input[type="tel"],
.vt-form input[type="date"],
.vt-form select,
.vt-form textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--vt-text);
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-sm);
}
.vt-form input:focus, .vt-form select:focus, .vt-form textarea:focus {
  outline: 3px solid var(--vt-green);
  outline-offset: 1px;
  border-color: var(--vt-green);
}
.vt-form textarea { min-height: 160px; resize: vertical; }
.vt-check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: .92rem; }
.vt-check input { margin-top: 4px; }
.vt-form button[type="submit"],
.vt-form input[type="submit"] {
  justify-self: start;
  padding: 14px 26px;
  background: var(--vt-green);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.vt-form button[type="submit"]:hover { background: var(--vt-green-hover); }
.vt-alert { padding: var(--s-4); border-radius: var(--r-sm); border-left: 6px solid var(--vt-green); background: var(--vt-green-light); }
.vt-alert--error { border-left-color: var(--vt-loss); background: #FBEAE8; }

/* Honeypot – muss unsichtbar bleiben, egal welches Theme */
.vt-hp { position: absolute !important; left: -9999px !important; }

.form-privacy {
  margin-top: var(--s-4);
  font-size: .86rem;
  color: var(--vt-text-muted);
}

/* --------------------------------------------------------------------------
   18b. Galerie + Lightbox des Plugins
   Das Plugin liefert nur Markup und JS, kein Frontend-CSS. Ohne diese Regeln
   stünde die Lightbox dauerhaft sichtbar unter dem Footer.
   -------------------------------------------------------------------------- */
.galerie { margin: var(--s-8) 0; }
.gal-grid {
  display: grid;
  grid-template-columns: var(--gal-template, repeat(auto-fill, minmax(230px, 1fr)));
  gap: var(--s-3);
}
.gal-grid a, .gal-grid img { display: block; }
.gal-grid img {
  width: 100%;
  aspect-ratio: var(--gal-ratio, 3 / 4);
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform .3s, filter .3s;
}
.galerie.gal-orig .gal-grid img { aspect-ratio: auto; }
.galerie[data-lightbox="1"] .gal-grid img { cursor: zoom-in; }
.gal-grid img:hover { transform: translateY(-3px); filter: brightness(1.05); }

.lightbox { display: none; }
.lightbox.open {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: var(--s-8);
  background: rgba(14, 26, 19, .94);
}
.lightbox.open img {
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  width: auto;
  border-radius: var(--r-md);
}
.lightbox .lb-close {
  position: absolute;
  top: var(--s-6); right: var(--s-6);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--vt-ink-2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox .lb-close:hover { background: var(--vt-green); border-color: var(--vt-green); }

/* ==========================================================================
   18c. Unterseiten (Block 2)
   ========================================================================== */

.page-head__lead {
  max-width: 62ch;
  margin-top: var(--s-4);
  color: var(--vt-on-dark);
  font-size: 1.08rem;
}
.page-head__cta { margin-top: var(--s-6); }

/* --- Team-Hero ---------------------------------------------------------- */
.team-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Gedeckelt statt reinem vh: auf hohen Monitoren wirkte ein Unterseiten-Hero
     mit 46vh unangenehm wuchtig. */
  min-height: clamp(300px, 42vh, 440px);
  padding-block: calc(var(--header-h) + var(--s-12)) var(--s-12);
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(14, 26, 19, .95) 0%, rgba(14, 26, 19, .72) 50%, rgba(37, 126, 52, .5) 100%),
    var(--vt-ink);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
/* Folgt eine hochgezogene Matchday-Karte, muss der Hero unten GENAU so viel
   freihalten, wie die Karte hochgezogen wird. Vorher waren es feste --s-12
   (48px) gegen 179px Hochzug: Die Karte landete 131px auf der Ueberschrift.
   Exakt --md-lift, nicht mehr - mit einem Zuschlag saesse der Kopf zu tief,
   dieselbe Falle wie seinerzeit auf der Startseite. */
.team-hero--md { padding-bottom: var(--md-lift); }

/* Ankerleiste unter dem Mannschafts-Hero.
   Bleibt beim Scrollen unter der Kopfzeile haengen - deshalb top auf die
   Kopfhoehe und nicht auf 0. */
.team-anker {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--vt-white);
  border-bottom: 1px solid var(--vt-border);
}
.team-anker__innen {
  display: flex;
  gap: var(--s-1, 6px);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 10px;
}
.team-anker__innen::-webkit-scrollbar { display: none; }
.team-anker a {
  flex: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vt-text-light); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.team-anker a:hover, .team-anker a:focus-visible { background: var(--vt-green-light); color: var(--vt-green-hover); }
.team-anker a:focus-visible { outline: 2px solid var(--vt-green); outline-offset: 1px; }

/* Sprungziele nicht unter die Kopfzeile und die Leiste rutschen lassen. */
#spiele, #saison, #training, #kader, #bilder, #news { scroll-margin-top: calc(var(--header-h) + 64px); }

.team-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: grayscale(.3);
}
.team-hero__inner { position: relative; z-index: 2; }
.team-hero h1 {
  margin: var(--s-3) 0 0;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  text-transform: uppercase;
  color: #fff;
}
.team-hero__note { max-width: 56ch; margin-top: var(--s-3); color: var(--vt-on-dark); }

.team-fixtures { background: var(--vt-surface); }

/* --- Trainingszeiten ---------------------------------------------------- */
/* Trainingszeiten und Ansprechpartner stehen untereinander über die volle
   Breite – nebeneinander wurde die Tabelle unnötig gequetscht. */
.team-meta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-16);
  align-items: start;
}
.team-meta .sec-head { margin-bottom: var(--s-6); }
.team-meta .sec-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }

.training-list { list-style: none; margin: 0; padding: 0; }
.training-slot {
  display: grid;
  /* „DONNERSTAG" braucht in Archivo 900 uppercase deutlich mehr als 4.5rem –
     vorher lief der Tag in die Uhrzeit hinein. */
  grid-template-columns: minmax(8rem, 10rem) minmax(7rem, 11rem) 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--vt-border);
}
.training-slot:last-child { border-bottom: 1px solid var(--vt-border); }
.training-slot__day {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--vt-green);
}
.training-slot__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.training-slot__where { font-size: .94rem; }
.training-slot__addr,
.training-slot__note { display: block; color: var(--vt-text-light); font-size: .88rem; }

.squad-list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-2) var(--s-6);
}
.squad-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--vt-border); }

.team-back { padding-block: 0 var(--s-16); }

/* --- Mannschaften-Übersicht --------------------------------------------- */
.team-group + .team-group { margin-top: var(--s-16); }
.team-group__title {
  margin-bottom: var(--s-6);
  padding-left: var(--s-4);
  border-left: 6px solid var(--vt-green-brand);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  text-transform: uppercase;
}

/* --- Team-Schnellauswahl ------------------------------------------------ */
.team-picker { padding-block: var(--s-16); }
.team-picker--soft { background: var(--vt-surface); }
.team-picker__title {
  margin-bottom: var(--s-4);
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vt-text-light);
}
.team-picker__lead { max-width: 62ch; margin-bottom: var(--s-6); color: var(--vt-text-light); }
.team-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0; padding: 0;
}
.team-pill {
  display: inline-block;
  padding: 10px 18px;
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vt-text);
  transition: background-color .18s, border-color .18s, color .18s;
}
.team-pill:hover { background: var(--vt-green); border-color: var(--vt-green); color: #fff; }

.fixtures__intro { margin-bottom: var(--s-8); }
.fixtures__note { margin-top: var(--s-6); font-size: .84rem; color: var(--vt-text-muted); }

/* --- Kontakt ------------------------------------------------------------ */
.contact__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-16);
  align-items: start;
}
.info-card {
  padding: var(--s-6);
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-left: 6px solid var(--vt-green-brand);
  border-radius: var(--r-md);
}
.info-card + .info-card { margin-top: var(--s-4); }
.info-card h2 {
  margin-bottom: var(--s-3);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.info-card p { font-size: .95rem; }
.info-card .btn { margin-top: var(--s-3); }

.hall-list { list-style: none; margin: 0; padding: 0; }
.hall-list li + li { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--vt-border); }
.hall-list span { font-size: .95rem; color: var(--vt-text-light); }
.hall-list__map {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-hint { padding-block: 0 var(--s-24); }
.team-external { padding-block: var(--s-16) 0; }
.hint-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
  padding: var(--s-8);
  background: var(--vt-green-light);
  border-radius: var(--r-md);
}
.hint-card h2 { margin: var(--s-2) 0; font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: uppercase; }
.hint-card p { max-width: 52ch; margin: 0; color: var(--vt-text-light); }

/* --- Mitglied werden ---------------------------------------------------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: none;
}
.step {
  position: relative;
  padding: var(--s-8) var(--s-6) var(--s-6);
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
}
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--vt-green-brand);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.step__nr {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  color: var(--vt-green-brand);
}
.step h3 { margin: var(--s-3) 0 var(--s-2); font-size: 1.2rem; text-transform: uppercase; }
.step p { color: var(--vt-text-light); font-size: .95rem; }

.join-form { background: var(--vt-surface); }
.join-form__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-16);
  align-items: start;
}
.join-form .info-card { background: var(--vt-white); }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--s-2);
  font-size: .95rem;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: var(--vt-green);
}

/* --- Sponsorenseite ----------------------------------------------------- */
.sp-grid--main { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--s-12); }
/* Nur falls der Verein später wirklich einen Hauptsponsor auszeichnet. */
.sp--main .sp__inner {
  height: clamp(120px, 10vw, 150px);
  border-color: var(--vt-green-brand);
  border-width: 2px;
}

/* ==========================================================================
   18d. Bausteine aus vereins-core (Plugin liefert kein Frontend-CSS)
   ========================================================================== */

/* Ansprechpartner-Karten */
/* Gruppen- und Kaderfotos (Beitragsbild der Vorstands- bzw. Mannschaftsseite). */
.vorstand-foto,
.team-foto {
  margin: 0 0 var(--s-12);
}
.vorstand-foto img,
.team-foto img {
  display: block;
  width: min(980px, 100%);
  height: auto;
  border-radius: var(--r-md);
}
.vorstand-foto figcaption,
.team-foto figcaption {
  margin-top: var(--s-3);
  font-size: .9375rem;
  color: var(--vt-text-light);
}

.contact-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-6);
}
.contact-people.cols-1 { grid-template-columns: 1fr; }
.contact-people.cols-2 { grid-template-columns: repeat(2, 1fr); }
.contact-people.cols-3 { grid-template-columns: repeat(3, 1fr); }
.contact-people.cols-4 { grid-template-columns: repeat(4, 1fr); }

.person {
  padding: var(--s-6);
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-top: 4px solid var(--vt-green-brand);
  border-radius: var(--r-md);
}
.person-foto img {
  width: 96px; height: 96px;
  margin-bottom: var(--s-4);
  object-fit: cover;
  border-radius: var(--r-md);
}
.person-rolle {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vt-green);
}
.person h3 { margin: var(--s-2) 0 var(--s-3); font-size: 1.15rem; }
.person p { font-size: .93rem; color: var(--vt-text-light); line-height: 1.6; }
.person strong { color: var(--vt-text); }

/* FAQ-Sets */
.faq-section { padding-block: var(--s-24); }
.faq-section.section-soft { background: var(--vt-surface); }
.faq-section.section-dark { background: var(--vt-ink); color: var(--vt-on-dark); }
.faq-section.section-dark h2,
.faq-section.section-dark summary { color: #fff; }
.faq-section .section-head { margin-bottom: var(--s-8); }
.faq-section .section-head h2 {
  margin-top: var(--s-3);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
}

/* Das Plugin liefert ein minimales Basis-CSS für die FAQ mit. Damit unser
   Design gewinnt, hier bewusst zwei Klassen Spezifität. */
.faq-list { max-width: 860px; margin: 0; }
.faq-list .faq-item {
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--vt-border);
  border-radius: 0;
}
.faq-list .faq-item:first-child { border-top: 1px solid var(--vt-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.08rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vt-green);
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--vt-green); }
.faq-a { padding-top: var(--s-3); color: var(--vt-text-light); }
.faq-section.section-dark .faq-item { border-color: rgba(255, 255, 255, .14); }
.faq-section.section-dark .faq-a { color: var(--vt-on-dark); }

/* Sponsoren-Ausgabe des Plugins ([vt_sponsoren]) */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-6);
}
.sponsor-card {
  padding: var(--s-6);
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  text-align: center;
}
.sponsor-card.is-main { border-color: var(--vt-green-brand); border-width: 2px; }
.sponsor-card .logo { display: grid; place-items: center; min-height: 90px; margin-bottom: var(--s-3); }
.sponsor-card .logo img { max-height: 90px; width: auto; object-fit: contain; }
.sponsor-card h3 { font-size: 1.05rem; }
.sponsor-card p { margin-top: var(--s-2); font-size: .9rem; color: var(--vt-text-light); }
.sponsor-card .more {
  display: inline-block;
  margin-top: var(--s-3);
  font-family: var(--display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Redaktions-Hinweise des Plugins – nur für Eingeloggte sichtbar */
.muted-note {
  padding: var(--s-3) var(--s-4);
  background: #FFF8E5;
  border-left: 4px solid var(--vt-warning, #C9820B);
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--vt-text-light);
}

/* Kader mit Portraits (Modul „Kader", ab vereins-core 1.31.0).
   Das Plugin bringt nur Raster und Seitenverhaeltnis mit; Farbe, Kanten und
   Typografie kommen von hier - das ist die Arbeitsteilung von Modell B.
   Zwei Klassen Spezifitaet, damit unser Design das Basis-CSS des Plugins schlaegt. */
.team-roster { padding-block: var(--s-16) 0; }

.vt-kader.vt-kader--karten {
  --vt-kader-template: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-8);
}
.vt-kader .vt-kader__item {
  position: relative;
  overflow: hidden;
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
}
.vt-kader .vt-kader__foto {
  background: var(--vt-green-light);
  border-bottom: 1px solid var(--vt-border);
}
.vt-kader .vt-kader__initialen {
  font-family: var(--display);
  font-weight: 800;
  color: var(--vt-green);
  opacity: .5;
}

/* Die Nummer sitzt auf der Bildkante - wie auf dem Trikot, nicht daneben.
   Sie ist bewusst nicht zentriert: Torhueter tragen hier Initialen (CK, AF),
   und zweistellige Zeichen duerfen den Kreis nicht sprengen. */
.vt-kader .vt-kader__nummer {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  min-width: 2rem;
  padding: 2px var(--s-2);
  background: var(--vt-green-brand);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.vt-kader .vt-kader__name {
  display: block;
  padding: var(--s-3) var(--s-3) 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--vt-text);
}
.vt-kader .vt-kader__position {
  display: block;
  padding: 2px var(--s-3) var(--s-3);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vt-green);
}

/* Aufklapper: nur dort, wo wirklich Angaben gepflegt sind. Das Pluszeichen sagt,
   dass es etwas zu sehen gibt - sonst verschwendet die Karte einen Klick ins Leere. */
.vt-kader .vt-kader__item details > summary { position: relative; }
.vt-kader .vt-kader__item details > summary::after {
  content: "+";
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-2);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--vt-green);
}
.vt-kader .vt-kader__item details[open] > summary::after { content: "−"; }
.vt-kader .vt-kader__details {
  padding: 0 var(--s-3) var(--s-3);
  border-top: 1px solid var(--vt-border);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
}
.vt-kader .vt-kader__details dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
  opacity: 1;
}
.vt-kader .vt-kader__details dd {
  font-size: .9rem;
  color: var(--vt-text-light);
}

@media (max-width: 640px) {
  .vt-kader.vt-kader--karten { --vt-kader-template: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-4); }
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--vt-ink);
  color: var(--vt-on-dark);
  padding: var(--s-16) 0 var(--s-8);
}
.f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-8);
}
.f-head {
  margin-bottom: var(--s-4);
  font-family: var(--display);
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.site-footer a { display: block; padding: 4px 0; font-size: .92rem; color: var(--vt-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--vt-green-signal); }
/* wp_nav_menu mit items_wrap '%3$s' liefert lose <li> ohne <ul> – der Marker
   muss deshalb am li abgeschaltet werden, nicht am Elternelement. */
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { list-style: none; }

.brand--footer { color: #fff; padding: 0; }
.brand--footer:hover { color: #fff; }
.f-brand p { margin: var(--s-4) 0; font-size: .92rem; }
.f-addr { font-size: .92rem; line-height: 1.5; }
.f-addr strong { color: #fff; }

.social { display: flex; gap: 10px; margin-top: var(--s-2); }
.social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  background: var(--vt-ink-2);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
}
.social a:hover { background: var(--vt-green); color: #fff; }

.f-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem;
  color: var(--vt-on-dark-dim);
}
.f-bottom a { display: inline; padding: 0; }
.f-legal { display: flex; gap: var(--s-4); }
.f-legal ul { display: flex; gap: var(--s-4); }

/* --------------------------------------------------------------------------
   20. Motion – dezent, und abschaltbar
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .news-card:hover, .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* Darunter wuerde der Hero-Text unter die Buehne laufen. Wappen, Textbreite
     und Schriftgroesse gelten hier gar nicht erst - siehe min-width-Block. */
  .hero__stage { display: none; }

  .sp-grid { grid-template-columns: repeat(4, 1fr); }
  .sp-grid--main { grid-template-columns: repeat(2, 1fr); }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .contact-people.cols-3,
  .contact-people.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .team-meta__grid,
  .contact__grid,
  .join-form__grid { gap: var(--s-12); }
}

@media (max-width: 1380px) {
  /* Darunter wird die Kopfzeile zu eng – der Deltatec-Hinweis steht dann nur
     im Footer, statt aus dem Raster zu laufen. Die Grenze liegt bewusst leicht
     ueber der Wrap-Breite (1360px): mit dem Label „Sponsored by" ist das Badge
     100px breit, und knapp oberhalb der alten 1300er-Grenze wurde es eng. */
  .dt-badge--header { display: none; }
}

@media (max-width: 900px) {
  section { padding-block: var(--s-16); }

  .menu { display: none; }
  .burger { display: flex; }

  .md-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-card--feature { grid-column: span 2; grid-row: auto; }
  .news-card--feature .nc-img { aspect-ratio: 16 / 8; min-height: 0; }
  .team-row { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }

  .hero { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); min-height: 82vh; }
  .hero__ball { right: -60px; opacity: .22; }

  .stats { clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }

  /* Block 2 */
  .contact__grid,
  .join-form__grid { grid-template-columns: 1fr; gap: var(--s-12); }
  .team-meta__grid { gap: var(--s-12); }
  .step-grid { grid-template-columns: 1fr; }
  .sp-grid--main { grid-template-columns: repeat(2, 1fr); }
  .team-hero { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); min-height: clamp(240px, 34vh, 340px); }
  .hint-card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  :root { --s-24: 64px; }

  .news-grid { grid-template-columns: 1fr; }
  .news-card--feature { grid-column: span 1; grid-row: auto; }
  .team-row { grid-template-columns: 1fr; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .f-grid { grid-template-columns: 1fr; }

  .brand-text { font-size: .82rem; max-width: 8ch; }
  .brand .vfl-logo { width: 44px; height: 44px; }

  .mc-body { grid-template-columns: 1fr; gap: var(--s-3); }
  .vs { font-size: 1.6rem; }
  .team-crest { width: 66px; height: 66px; font-size: 1.15rem; }

  .hero h1 { max-width: none; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }

  .f-bottom { flex-direction: column; }

  /* Block 2 */
  .contact-people,
  .contact-people.cols-2,
  .contact-people.cols-3,
  .contact-people.cols-4 { grid-template-columns: 1fr; }
  .sp-grid--main { grid-template-columns: 1fr; }
  .training-slot { grid-template-columns: 3.5rem 1fr; }
  .training-slot__where { grid-column: 1 / -1; }
  .squad-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   22. Spielplan in eigener Darstellung
   Ersetzt das abgeschaltete handball.net-Widget (siehe inc/hbnet.php, Teil 4).
   -------------------------------------------------------------------------- */
.fixture-list {
  background: var(--vt-white);
  border: 1px solid var(--vt-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Zwei Klassen, damit die Regel auch INNERHALB von .entry gewinnt: dort setzt
   `.entry h3` einen Außenabstand von 32px und eine größere Schrift – das ergab
   auf der Spiele-Seite einen weißen Streifen über der Monatszeile. */
.fixture-list .fixture-list__month {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--vt-ink);
  color: #fff;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fixture {
  display: grid;
  grid-template-columns: 7.5rem 1fr 6.5rem;
  grid-template-areas: "datum teams ergebnis" ".     halle halle";
  gap: 2px var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--vt-border);
  font-size: .92rem;
}
.fixture-list__month + .fixture { border-top: 0; }
.fixture.is-next { background: var(--vt-green-light); }
.fixture.is-played { color: var(--vt-text-light); }

.fixture__date { grid-area: datum; display: flex; flex-direction: column; line-height: 1.25; }
.fixture__day  { font-family: var(--display); font-weight: 800; font-size: .82rem; }
.fixture__time { font-size: .78rem; color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }

.fixture__teams { grid-area: teams; min-width: 0; }
.fixture__teams .is-ours { font-weight: 700; color: var(--vt-text); }
.fixture__sep { color: var(--vt-text-muted); margin: 0 4px; }

.fixture__result {
  grid-area: ergebnis;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}
.fixture__result .res-badge { width: 22px; height: 22px; font-size: .68rem; flex: none; }
.fixture__where {
  font-family: var(--display);
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
}

.fixture__hall { grid-area: halle; font-size: .78rem; color: var(--vt-text-muted); }

.fixture-group + .fixture-group { margin-top: var(--s-12); }
/* .entry h2 bringt eigene Abstände mit – hier nicht erwünscht. */
.fixture-group .fixture-group__title { margin-top: 0; }
.entry .fixture-list p,
.entry .fixture-list span { margin: 0; }
.fixture-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
}
.fixture-group__title a { color: inherit; text-decoration: none; }
.fixture-group__title a:hover { color: var(--vt-green); }
.fixture-group__title span {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
}

@media (max-width: 620px) {
  .fixture {
    grid-template-columns: 1fr auto;
    grid-template-areas: "datum ergebnis" "teams teams" "halle halle";
  }
  .fixture__date { flex-direction: row; gap: var(--s-2); align-items: baseline; }
}