/* DSG Club26 redesign — Logo-Farben: Grün/Schwarz/Grau.
   Germania One ist lokal abgelegt; keine externen Font-Aufrufe im Browser. */
@font-face {
  font-family: "Germania One Local";
  src: url("../fonts/germania-one.woff2") format("woff2"),
       url("../fonts/germania-one.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --club-green: #80b040;
  --club-green-2: #9bd24e;
  --club-green-dark: #203010;
  --club-black: #050505;
  --club-ink: #0d0f0b;
  --club-dark: #151812;
  --club-card: #1d2118;
  --club-gray: #adadad;
  --club-text: #f3f5ef;
  --club-muted: #c5cabb;
  --club-border: rgba(128,176,64,.45);
  --max: 1160px;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss gewinnen. Der Browser vergibt dafuer display:none,
   aber jede eigene Regel mit display (etwa .matchday-presented-by oder
   .termine-filter mit display:flex) schlaegt das - die Elemente blieben dann
   sichtbar, obwohl das Skript sie versteckt hat. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; overflow-x: clip; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--club-text);
  background:
    radial-gradient(circle at 15% 0%, rgba(128,176,64,.22), transparent 30rem),
    linear-gradient(145deg, #050505 0%, #10140d 45%, #000 100%);
  line-height: 1.65;
}

/* Runen-/Wiking-Anmutung, aber lesbar: starke Versalien, große Abstände, fallback ohne Cloud-Font. */
.brand-font,
h1, h2, h3, .nav a, .eyebrow, .button, .logo-word {
  font-family: "Germania One Local", "Copperplate", "Palatino Linotype", Georgia, serif;
  letter-spacing: .055em;
}

a { color: var(--club-green-2); text-decoration: none; }
a:hover { color: #fff; }

/* Skip-Link: unsichtbar, bis er per Tastatur fokussiert wird */
/* Liveticker: Startseite und eigene Seite /live/. Auf dem Handy gedacht -
   das ist der Ort, an dem er waehrend des Spiels gelesen wird. */
.liveticker-card { border-left-color: #e03c3c; }
.ticker-partie + .ticker-partie { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--club-border); }
.ticker-kennung { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0 0 1rem;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--club-muted); }
.ticker-status { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .55rem;
  border-radius: 999px; background: #e03c3c; color: #fff; font-weight: 800; letter-spacing: .1em; }
.ticker-status.is-ende { padding-left: .7rem; background: var(--club-green); color: #071004; }
.ticker-zeit { font-variant-numeric: tabular-nums; color: var(--club-muted); letter-spacing: .02em; }
.ticker-status.is-gleich { padding-left: .7rem; background: transparent; color: var(--club-green-2); box-shadow: inset 0 0 0 1.5px var(--club-green); }
.ticker-punkt { width: .55rem; height: .55rem; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.8); animation: ticker-puls 1.6s ease-out infinite; }
@keyframes ticker-puls {
  70% { box-shadow: 0 0 0 .5rem rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .ticker-punkt { animation: none; } }

/* Eigene Live-Seite: Kopfbereich schlank, damit die Anzeigetafel auf dem
   Handy ohne Scrollen sichtbar ist. */
.seite-live .hero-copy > p, .seite-live .hero-copy .button-row { display: none; }
.seite-live .site-header .header-inner { padding-block: .8rem; min-height: 0; }
.seite-live .site-header .logo { width: clamp(56px, 14vw, 96px); height: auto; }
.seite-live .site-header .header-inner { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .9rem; text-align: left; }
.seite-live .hero-copy h1 { font-size: clamp(1.5rem, 6vw, 2.4rem); margin: 0; }
.seite-live main .grid { padding-top: 1rem; }

/* Anzeigetafel: unser Team links, Stand in der Mitte, Gegner rechts */
.ticker-anzeige { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: .8rem; padding: 1.1rem 1rem; border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(128,176,64,.22), transparent 70%), rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px var(--club-border), 0 14px 30px rgba(0,0,0,.35); }
.ticker-team { text-align: center; }
.ticker-team-name { display: block; font-family: "Germania One Local", "Copperplate", Georgia, serif;
  font-size: clamp(1.05rem, 4.2vw, 1.6rem); line-height: 1.15; letter-spacing: .02em; overflow-wrap: anywhere; }
.ticker-team.is-wir .ticker-team-name { color: var(--club-green-2); }
.ticker-score { display: flex; align-items: center; gap: .15rem; padding: .3rem .85rem; border-radius: 14px;
  background: #071004; box-shadow: inset 0 0 0 2px var(--club-green), 0 0 24px rgba(128,176,64,.35);
  font-family: "Germania One Local", "Copperplate", Georgia, serif; font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.ticker-score i { font-style: normal; color: var(--club-green-2); padding: 0 .1rem; }

/* Spielleiste: zwoelf Felder, eins je Spiel */
.ticker-leiste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem; margin: .8rem 0 0; }
.ticker-leiste span { height: .7rem; border-radius: 4px; background: rgba(255,255,255,.1); }
.ticker-leiste span.is-doppel { height: .7rem; outline: 1px dashed rgba(255,255,255,.18); outline-offset: -1px; }
.ticker-leiste span.is-plus { background: #3abe5a; outline: none; }
.ticker-leiste span.is-minus { background: #7d4646; outline: none; }
.ticker-leiste span.is-neutral { background: #c5cabb; outline: none; }
.ticker-leiste span.is-laeuft { background: #fff; outline: none; animation: ticker-blink 1.4s ease-in-out infinite; }
@keyframes ticker-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ticker-leiste span.is-laeuft { animation: none; } }
.ticker-lage { margin: .9rem 0 0; font-weight: 700; font-size: 1.02rem; text-align: center; }

.ticker-board { margin: 1.1rem 0 0; padding: .9rem 1rem; border-radius: 14px;
  background: rgba(224,60,60,.10); box-shadow: inset 0 0 0 1px rgba(224,60,60,.4); }
.ticker-titel, .ticker-raster h3 { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--club-green-2); }
.ticker-board-spiel { display: grid; gap: .2rem; padding: .45rem 0; }
.ticker-board-spiel + .ticker-board-spiel { border-top: 1px solid rgba(255,255,255,.08); }
.ticker-board-nr { font-size: .78rem; color: var(--club-muted); text-align: center; }
.ticker-board-namen { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: .6rem; font-size: 1.02rem; text-align: center; }
.ticker-board-namen strong { color: var(--club-green-2); }
.ticker-board-legs { padding: .05rem .6rem; border-radius: 8px; background: rgba(0,0,0,.35);
  font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* Reststand je Spieler, wenn 3K Einzelaufnahmen liefert */
.ticker-reste { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  gap: .5rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed rgba(255,255,255,.12); text-align: center; }
.ticker-rest { display: grid; gap: .1rem; padding: .35rem .3rem; border-radius: 10px; }
.ticker-rest.is-am-wurf { background: rgba(128,176,64,.16); box-shadow: inset 0 0 0 1px var(--club-border); }
.ticker-rest-zahl { font-family: "Germania One Local", "Copperplate", Georgia, serif; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ticker-rest-info { font-size: .7rem; color: var(--club-muted); }
.ticker-rest-wurf { justify-self: center; padding: .05rem .5rem; border-radius: 999px; background: var(--club-green); color: #071004;
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ticker-legende { margin: .55rem 0 0; padding-top: .5rem; border-top: 1px dashed rgba(255,255,255,.12); text-align: center; font-size: .86rem; color: var(--club-muted); }
.ticker-3k-link { display: block; margin-top: .45rem; text-align: center; font-size: .78rem; color: var(--club-green-2); }
.ticker-rest-trenner { align-self: center; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--club-muted); }

.ticker-kurz { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ticker-kurz li { padding: .45rem .7rem; border-radius: 10px; background: rgba(0,0,0,.22); border-left: 3px solid var(--club-border); font-size: .92rem; }
.ticker-kurz li.is-plus, .ticker-kurz li.is-jubel { border-left-color: #3abe5a; }
.ticker-kurz li.is-minus { border-left-color: #b45454; }
.ticker-kurz li.is-highlight { border-left-color: #f0c040; font-weight: 700; }

.ticker-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem; margin-top: 1.3rem; }
@media (max-width: 860px) { .ticker-raster { grid-template-columns: 1fr; } }
.ticker-chronik ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
@media (min-width: 861px) { .ticker-chronik ol { max-height: 34rem; overflow-y: auto; padding-right: .3rem; } }
.ticker-chronik li { padding: .5rem .7rem; border-radius: 10px; background: rgba(0,0,0,.22);
  border-left: 3px solid var(--club-border); line-height: 1.45; }
.ticker-chronik li.is-plus { border-left-color: #3abe5a; }
.ticker-chronik li.is-jubel { border-left-color: #3abe5a; background: rgba(58,190,90,.16); font-weight: 700; }
.ticker-chronik li.is-minus { border-left-color: #b45454; }
.ticker-chronik li.is-live { border-left-color: #e03c3c; background: rgba(224,60,60,.14); font-weight: 700; }
.ticker-chronik li.is-block, .ticker-chronik li.is-start, .ticker-chronik li.is-ende { color: var(--club-muted); font-style: italic; }

.ticker-statistik { display: grid; gap: .3rem; margin: 0 0 1.2rem; }
.ticker-statistik div { display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem .6rem; border-radius: 8px; background: rgba(0,0,0,.22); }
.ticker-statistik dt { color: var(--club-muted); }
.ticker-statistik dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.ticker-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ticker-spiel { display: grid; grid-template-columns: 1.5rem 3.6rem 1fr auto; gap: .45rem;
  align-items: center; padding: .35rem .55rem; border-radius: 8px; background: rgba(0,0,0,.22); font-size: .86rem; }
.ticker-spiel.is-laeuft { background: rgba(224,60,60,.16); box-shadow: inset 0 0 0 1px rgba(224,60,60,.45); }
.ticker-nr { color: var(--club-muted); font-variant-numeric: tabular-nums; }
.ticker-art { color: var(--club-green-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.ticker-namen { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ticker-namen .ticker-wir { color: var(--club-text); font-weight: 700; }
.ticker-stand { padding: 0 .4rem; border-radius: 6px; background: rgba(255,255,255,.1);
  font-weight: 800; font-variant-numeric: tabular-nums; }
.ticker-stand.is-plus { background: rgba(58,190,90,.22); color: #9be8ac; }
.ticker-stand.is-minus { background: rgba(220,80,80,.20); color: #f2a8a8; }
.ticker-marke { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #f2a8a8; }
.ticker-fuss { margin-top: 1.2rem; }
.ticker-tabelle-wrap { overflow-x: auto; margin: 0 0 1rem; }
.ticker-tabelle { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.ticker-tabelle th, .ticker-tabelle td { padding: .4rem .35rem; border-bottom: 1px solid rgba(255,255,255,.07); text-align: center; }
.ticker-tabelle thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--club-green-2); }
.ticker-tabelle tbody th { text-align: left; font-weight: 700; }
.ticker-tabelle tbody th small { display: block; font-weight: 400; font-size: .72rem; color: var(--club-muted); }
.ticker-tabelle td.is-180 { color: #f0c040; font-weight: 800; }
.ticker-gegner summary { cursor: pointer; color: var(--club-muted); font-size: .85rem; margin: .2rem 0 .6rem; }
.ticker-spruch { margin: .3rem 0 0; text-align: center; font-style: italic; color: var(--club-green-2); }
.ticker-schnitt { grid-column: 3; font-size: .72rem; color: var(--club-muted); font-variant-numeric: tabular-nums; }
.ticker-chronik li.is-highlight { border-left-color: #f0c040; background: rgba(240,192,64,.15); font-weight: 700; }
.ticker-chronik li.is-gegner { border-left-color: var(--club-muted); color: var(--club-muted); }
@media (max-width: 620px) {
  .ticker-spiel { grid-template-columns: 1.3rem 1fr; row-gap: .1rem; }
  .ticker-art, .ticker-namen, .ticker-spiel .ticker-marke, .ticker-schnitt { grid-column: 2; }
}

/* "Nach oben"-Knopf. enhance.js baut ihn ein und blendet ihn erst ab
   etwa anderthalb Bildschirmen Scrollweg ein. */
/* Sprungleiste ueber den Spieltagsberichten. */
.spieltag-verzeichnis { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.spieltag-verzeichnis a { display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .45rem .85rem; border: 1px solid var(--club-border); border-radius: 999px;
  background: rgba(128,176,64,.08); color: var(--club-green-2); font-size: .85rem; }
.spieltag-verzeichnis a strong { font-weight: 800; }
.spieltag-verzeichnis a:hover, .spieltag-verzeichnis a:focus-visible {
  background: var(--club-green); color: #071004; outline: none; }

.to-top { position: fixed; right: clamp(.8rem, 3vw, 1.6rem); bottom: clamp(.8rem, 3vw, 1.6rem);
  z-index: 90; width: 2.9rem; height: 2.9rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--club-green); border-radius: 50%; background: rgba(13,15,11,.88);
  backdrop-filter: blur(8px); color: var(--club-green-2); font-size: 1.2rem; line-height: 1;
  cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: background .18s, color .18s; }
.to-top:hover, .to-top:focus-visible { background: var(--club-green); color: #071004; outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  padding: .7rem 1.2rem; background: var(--club-green); color: #071004;
  font-weight: 800; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #071004; }

.site-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95), rgba(32,48,16,.88)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px);
}
.site-header::after {
  content: "";
  position: absolute; inset: auto -10% -35% -10%; height: 9rem;
  background: radial-gradient(ellipse at center, rgba(128,176,64,.18), transparent 65%);
  pointer-events: none;
}
/* Startseite: echtes Foto statt reinem Farbverlauf hinter dem Header */
.site-header.site-header--photo {
  background:
    linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(10,16,6,.72) 45%, rgba(10,16,6,.42) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
    var(--header-img) center 22% / cover no-repeat;
}
.header-inner {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  min-height: 210px;
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 0;
}
.logo {
  width: min(230px, 62vw);
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.6));
}
.hero-copy h1 {
  margin: 0 0 .4rem;
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #000, 0 0 24px rgba(128,176,64,.32);
}
.hero-copy p { max-width: 48rem; margin: .4rem 0 1.2rem; color: var(--club-muted); font-size: 1.08rem; }

.nav-wrap { position: sticky; top: 0; z-index: 80; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 4px solid var(--club-green); background: rgba(0,0,0,.82); backdrop-filter: blur(10px); box-shadow: 0 12px 24px rgba(0,0,0,.28); }
.nav {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .65rem 0;
}
.nav a {
  color: #f2f2f2;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-size: .95rem;
  text-transform: uppercase;
}
.nav a:hover, .nav a.active { background: var(--club-green); color: #071004; }
/* Sprachumschalter DE/RU — rechts in der Navigation, dezent umrandet */
.nav .lang-switch { margin-left: auto; border: 1px solid var(--club-border); color: var(--club-green-2); font-size: .85rem; }
.nav .lang-switch + .lang-switch { margin-left: 0; }

/* Burger-Menue. Der Knopf wird von enhance.js eingebaut, das dabei
   .has-nav-toggle am <html>-Element setzt. Alles hier haengt an dieser
   Markierung: ohne JavaScript bleibt die Navigation unveraendert sichtbar. */
.nav-toggle { display: none; }
.has-nav-toggle .nav-toggle {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  padding: .6rem 0;
  border: 0;
  background: none;
  color: #f2f2f2;
  cursor: pointer;
  align-items: center;
  gap: .6rem;
}
.has-nav-toggle .nav-toggle::after { content: attr(aria-label); font-family: "Germania One Local", "Copperplate", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.5rem; height: 2px; background: var(--club-green); border-radius: 2px; }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -.42rem; }
.nav-toggle-bars::after { top: .42rem; }

@media (max-width: 820px) {
  .has-nav-toggle .nav-toggle { display: flex; }
  .has-nav-toggle .nav { display: none; }
  .has-nav-toggle .nav.is-open { display: flex; flex-direction: column; align-items: stretch; padding-bottom: .9rem; }
  .has-nav-toggle .nav.is-open a { text-align: center; }
  /* Der Sprachumschalter darf im aufgeklappten Menue nicht mehr nach rechts
     gedrueckt werden - in der Spalte sitzt er sonst als einziger abgesetzt. */
  .has-nav-toggle .nav.is-open .lang-switch { margin-left: 0; align-self: center; }
}

/* Checkout-Rechner (Startseite) */
.checkout-form { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 .6rem; }
.checkout-form input { background: rgba(0,0,0,.35); border: 1px solid var(--club-border); border-radius: 12px; color: inherit; font: inherit; padding: .55rem .9rem; width: 9rem; }
.checkout-form input:focus { outline: 2px solid var(--club-green-2); outline-offset: 1px; }
.checkout-presets { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .6rem; }
.checkout-chip { background: none; border: 1px solid var(--club-border); border-radius: 999px; color: var(--club-green-2); font: inherit; font-size: .85rem; padding: .25rem .75rem; cursor: pointer; }
.checkout-chip:hover { border-color: var(--club-green-2); }
.checkout-result .checkout-msg { margin: .5rem 0 .3rem; }
.checkout-result .checkout-bogey { color: #d7a35b; }
.checkout-route { display: flex; gap: .45rem; flex-wrap: wrap; margin: .3rem 0; }
.checkout-route .dart { border-radius: 10px; padding: .3rem .7rem; font-weight: 700; border: 1px solid var(--club-border); }
.checkout-route .dart-t { background: rgba(128,176,64,.22); color: var(--club-green-2); border-color: rgba(128,176,64,.5); }
.checkout-route .dart-d { background: rgba(215,163,91,.16); color: #e3b877; border-color: rgba(215,163,91,.4); }

/* Teams-Seite: Gruppen-Bloecke mit Gegner-Chips statt Fliesstext */
.group-blocks { display: grid; gap: 1rem; margin-top: .8rem; }
.group-block { border: 1px solid var(--club-border); border-radius: 14px; padding: .9rem 1.1rem; background: rgba(0,0,0,.15); }
.group-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .55rem; }
.group-block-head strong { font-size: 1.05rem; }
.group-league { color: var(--club-green-2); font-size: .85rem; font-weight: 600; }
.group-note { color: #e3b877; font-size: .85rem; font-weight: 600; }
.opponent-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.opponent-chip { background: rgba(255,255,255,.06); border: 1px solid var(--club-border); border-radius: 999px; padding: .2rem .65rem; font-size: .82rem; }

/* Startseite: Team-Uebersicht direkt unterm Schriftzug */
.teams-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: .9rem 0 .6rem; }
.teams-strip-item { display: flex; flex-direction: column; gap: .25rem; text-align: center; padding: .8rem .6rem; border: 1px solid var(--club-border); border-radius: 14px; background: rgba(0,0,0,.18); color: inherit; text-decoration: none; transition: background .15s, border-color .15s; }
.teams-strip-item:hover, .teams-strip-item:focus-visible { background: rgba(128,176,64,.14); border-color: var(--club-green); outline: none; }
.teams-strip-item strong { font-size: 1rem; }
.teams-strip-item span { color: var(--club-green-2); font-size: .78rem; }
@media (max-width: 720px) { .teams-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Claim-Animation direkt in die Team-Kachel integriert: kein zweiter Rahmen/Hintergrund */
.teams-strip-card { overflow: hidden; }
.teams-strip-card .claim-banner.claim-inline { margin: -.4rem auto 1rem; border: none; background: none; box-shadow: none; padding: 0; }
.teams-strip-card .claim-banner.claim-inline img { max-width: min(480px, 100%); }


@media (max-width: 820px) { .nav .lang-switch { margin-left: 0; } }

main { width: min(var(--max), calc(100% - 2rem)); margin: 2rem auto 3rem; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.card {
  background: linear-gradient(180deg, rgba(29,33,24,.96), rgba(13,15,11,.96));
  border: 1px solid var(--club-border);
  border-left: 6px solid var(--club-green);
  border-radius: 18px;
  padding: clamp(1.1rem, 2.5vw, 1.7rem);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.card h2, .card h3 { margin-top: 0; color: #fff; line-height: 1.15; }

/* Brush-Leitmotiv: handgemalte Pinselstrich-Unterstreichung unter Sektionsüberschriften,
   passend zum rauen Club26-Schriftzug. Zwei Varianten im Wechsel, damit es nicht uniform wirkt. */
.card h2::after, .page-hero-inner h2::after {
  content: ""; display: block; height: 9px; width: min(150px, 55%);
  margin-top: .45rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 14"><path fill="%2380b040" d="M2,7.5 C28,4.5 70,3.5 110,4.5 C150,5.5 185,4 217,5.5 L218,8 C186,7 150,9 108,8.5 C68,8 30,9.5 4,11.5 Z"/><path fill="%2380b040" d="M205,11 c3,-0.4 6,-0.2 8,0.3 l-0.2,1.6 c-2.5,-0.4 -5.3,-0.4 -8,0.1 Z" opacity="0.8"/></svg>') no-repeat left center / 100% auto;
}
.card:nth-of-type(even) h2::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 14"><path fill="%2380b040" d="M3,10 C40,8 75,9.5 115,7.5 C155,5.5 190,6.5 217,4.5 L217.6,7 C190,8.8 156,7.8 118,9.8 C78,11.8 42,10.3 4.5,12.4 Z"/><path fill="%2380b040" d="M6,5.5 c2.8,-0.8 5.6,-1 8.4,-0.6 l-0.3,1.7 c-2.6,-0.3 -5.2,-0.1 -7.8,0.6 Z" opacity="0.75"/></svg>');
}
.card p:last-child { margin-bottom: 0; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }
.eyebrow { color: var(--club-green-2); text-transform: uppercase; font-size: .85rem; font-weight: 700; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .65rem 1rem;
  border-radius: 10px;
  background: var(--club-green);
  color: #071004;
  border: 2px solid #000;
  font-weight: 800;
  text-transform: uppercase;
}
.button.secondary { background: transparent; color: var(--club-green-2); border-color: var(--club-border); }
.button:hover { background: #000; color: var(--club-green-2); border-color: var(--club-green); }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.info-list li { padding-left: 1.1rem; position: relative; }
.info-list li::before { content: "▸"; color: var(--club-green); position: absolute; left: 0; }

.sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.sponsor { text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 1rem; }
.sponsor img { max-width: 180px; max-height: 130px; width: auto; height: auto; background: #fff; padding: .55rem; border-radius: 10px; }
.sponsor p { color: var(--club-muted); }

.site-footer { background: #050505; border-top: 3px solid var(--club-green); color: var(--club-muted); position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/schriftzug-club26.webp') center / 62% auto no-repeat;
  opacity: 0.045;
  pointer-events: none;
}
.footer-inner { width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 820px) {
  .header-inner { grid-template-columns: 1fr; text-align: center; gap: .8rem; }
  .logo { margin: 0 auto; }
  .hero-copy p { margin-left: auto; margin-right: auto; }
  .span-7, .span-8, .span-5, .span-4, .span-6 { grid-column: span 12; }
  .sponsor-grid { grid-template-columns: 1fr; }
  .nav { justify-content: center; }
}


.muted { color: var(--club-muted); }
.small { font-size: .92rem; }
.text-link { display: inline-block; margin-top: .6rem; font-weight: 700; }
.table-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); }
.club-table { width: 100%; border-collapse: collapse; min-width: 840px; background: rgba(0,0,0,.22); }
.club-table th, .club-table td { padding: .75rem .8rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.club-table th { color: #071004; background: var(--club-green); font-family: "Germania One Local", "Copperplate", Georgia, serif; letter-spacing: .055em; text-transform: uppercase; }
.club-table tr:hover td { background: rgba(128,176,64,.08); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.1rem 0; }
.team-card { background: linear-gradient(180deg, rgba(29,33,24,.96), rgba(8,10,7,.96)); border: 1px solid var(--club-border); border-left: 6px solid var(--club-green); border-radius: 18px; padding: 1.2rem; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.team-card h3 { margin: .1rem 0 1rem; }
.team-card-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; }
.team-card-links .text-link { margin-top: 0; }
.team-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0 0 1rem; }
.team-facts div { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .65rem; }
.team-facts dt { color: var(--club-green-2); font-weight: 800; font-size: .8rem; text-transform: uppercase; }
.team-facts dd { margin: .15rem 0 0; font-size: 1.05rem; }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }


.board-photo { margin: 1rem 0 0; }
.board-photo img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 16px; border: 1px solid var(--club-border); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.board-photo figcaption { margin-top: .75rem; color: var(--club-muted); font-size: .95rem; }


.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 1.1rem 0 3rem; }
.gallery-item { position: relative; display: block; overflow: visible; border-radius: 18px; border: 1px solid var(--club-border); background: radial-gradient(circle at center, rgba(128,176,64,.10), rgba(0,0,0,.34)); box-shadow: 0 18px 40px rgba(0,0,0,.28); padding: .45rem; }
.gallery-item img { width: 100%; height: auto; max-height: none; object-fit: contain; display: block; border-radius: 12px; transition: filter .25s ease; }
.gallery-item span { position: absolute; left: .9rem; bottom: .9rem; padding: .35rem .6rem; border-radius: 999px; background: rgba(0,0,0,.72); color: var(--club-green-2); font-family: "Germania One Local", "Copperplate", Georgia, serif; letter-spacing: .04em; }
.gallery-item:hover img { filter: brightness(1.08); }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 2rem; }
  .gallery-item span { left: .45rem; right: .45rem; bottom: .45rem; padding: .25rem .45rem; font-size: .68rem; line-height: 1.2; }
}


.sponsor-hero p { max-width: 78rem; }
.sponsor-logo-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; }
.sponsor-logo-card img { width: 100%; max-width: 520px; height: 150px; object-fit: contain; margin: 0 auto 1rem; background: #fff; padding: 1rem; border-radius: 14px; }
.sponsor-logo-card h3 { margin: .25rem 0 .4rem; }


.claim-banner { margin: -0.7rem auto 1.2rem; padding: 1rem; text-align: center; border: 1px solid rgba(128,176,64,.22); border-radius: 22px; background: radial-gradient(circle at center, rgba(128,176,64,.12), rgba(0,0,0,.18)); }

.claim-banner img { display: block; max-width: min(720px, 100%); width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.42)); }
.parallax-claim {
  --claim-y: 0px;
  --claim-glow-y: 0px;
  --claim-rotate: 0deg;
  --claim-tilt: 0deg;
  --claim-shine-x: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.05rem, 3vw, 1.65rem);
  border-color: rgba(155,210,78,.34);
  background:
    radial-gradient(circle at var(--claim-shine-x) calc(50% + var(--claim-glow-y)), rgba(155,210,78,.24), transparent 34%),
    linear-gradient(135deg, rgba(128,176,64,.11), rgba(255,255,255,.035) 42%, rgba(0,0,0,.25));
  box-shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateZ(0);
  perspective: 900px;
}
.parallax-claim::before,
.parallax-claim::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: -1;
}
.parallax-claim::before {
  background:
    radial-gradient(circle at 25% 40%, rgba(155,210,78,.20), transparent 19rem),
    radial-gradient(circle at 78% 58%, rgba(255,255,255,.07), transparent 17rem);
  transform: translate3d(0, calc(var(--claim-glow-y) * .45), 0);
  transition: transform .16s linear;
}
.parallax-claim::after {
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.13) 47%, transparent 62%);
  transform: translate3d(calc(var(--claim-y) * -1.8), 0, 0) rotate(8deg);
  opacity: .28;
  mix-blend-mode: screen;
}
.parallax-claim img {
  transform: translate3d(0, var(--claim-y), 0) rotateX(var(--claim-tilt)) rotateZ(var(--claim-rotate));
  transform-origin: center;
  will-change: transform;
  transition: transform .16s linear, filter .22s ease;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.48)) drop-shadow(0 0 24px rgba(128,176,64,.18));
}
.parallax-claim:hover img { filter: drop-shadow(0 22px 28px rgba(0,0,0,.50)) drop-shadow(0 0 30px rgba(155,210,78,.25)); }
@media (prefers-reduced-motion: reduce) {
  .parallax-claim,
  .parallax-claim::before,
  .parallax-claim::after,
  .parallax-claim img { transition: none; animation: none; transform: none; }
}
@media (max-width: 620px) {
  .parallax-claim { margin-top: 0; padding: .8rem; }
  /* Auf Mobile ist der Lichtreflex der zentrale Scroll-Effekt – daher kräftiger statt gedämpft. */
  .parallax-claim::after { opacity: .34; }
}
.social-links { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.social-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--club-green-2); font-weight: 800; }
.social-link svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.social-link:hover { color: #fff; }
.board-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.board-list li { padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.04); }
.board-list-compact li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.board-list span { color: var(--club-muted); }
.legal-text h3 { margin: 1.25rem 0 .35rem; color: var(--club-green-2); }

/* shared social icon color filters */
.social-icon-green { filter: brightness(0) saturate(100%) invert(73%) sepia(69%) saturate(375%) hue-rotate(41deg) brightness(92%) contrast(92%); }
.social-icon-dark  { filter: brightness(0) saturate(100%) invert(4%) sepia(19%) saturate(1323%) hue-rotate(52deg) brightness(101%) contrast(98%); }

.social-link img,
.nav-social img,
.header-social img { width: 1.2rem; height: 1.2rem; filter: brightness(0) saturate(100%) invert(73%) sepia(69%) saturate(375%) hue-rotate(41deg) brightness(92%) contrast(92%); }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 99; display: grid; place-items: center; padding: 2rem; }
.lightbox img { max-width: min(1100px, 94vw); max-height: 86vh; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.lightbox button { position: absolute; border: 1px solid var(--club-border); background: #050505; color: #fff; border-radius: 50%; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: #111; border-color: var(--club-green); }
.lightbox-close { right: 1.5rem; top: 1rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-count { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); margin: 0; color: rgba(255,255,255,.72); font-size: .92rem; letter-spacing: .04em; }
@media (max-width: 720px) {
  /* Auf schmalen Geraeten wandern die Blaetterknoepfe nach unten neben den
     Zaehler - seitlich wuerden sie sonst auf dem Bild liegen. */
  .lightbox-prev, .lightbox-next { top: auto; bottom: .7rem; transform: none; width: 2.6rem; height: 2.6rem; font-size: 1.8rem; }
  .lightbox-prev { left: calc(50% - 5.4rem); }
  .lightbox-next { right: calc(50% - 5.4rem); }
  .lightbox-count { bottom: 1.35rem; }
}
.no-scroll { overflow: hidden; }

.current-sponsors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .current-sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .current-sponsors { grid-template-columns: 1fr; } }

.social-icon-only { width: 2.25rem; height: 2.25rem; justify-content: center; border: 1px solid var(--club-border); border-radius: 999px; background: rgba(128,176,64,.09); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.social-icon-only img { margin: 0; }
.social-icon-only:hover { background: var(--club-green); color: #071004; }
.social-icon-only:hover img { filter: brightness(0) saturate(100%) invert(4%) sepia(19%) saturate(1323%) hue-rotate(52deg) brightness(101%) contrast(98%); }

.nav-social { display: inline-flex !important; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0 !important; border: 1px solid var(--club-border); border-radius: 999px; background: rgba(128,176,64,.08); }
.nav-social:hover, .nav-social:focus-visible { background: var(--club-green); outline: none; }
.nav-social:hover img, .nav-social:focus-visible img { filter: brightness(0) saturate(100%) invert(4%) sepia(19%) saturate(1323%) hue-rotate(52deg) brightness(101%) contrast(98%); }

.header-social { display: flex; gap: .65rem; align-items: center; margin-top: .9rem; }
.button-row .header-social { margin-top: 0; margin-left: .35rem; }
.header-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: 999px; border: 1px solid var(--club-border); background: rgba(128,176,64,.10); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.header-social a:hover, .header-social a:focus-visible { background: var(--club-green); outline: none; }
.header-social a:hover img, .header-social a:focus-visible img { filter: brightness(0) saturate(100%) invert(4%) sepia(19%) saturate(1323%) hue-rotate(52deg) brightness(101%) contrast(98%); }
@media (max-width: 820px) { .header-social { justify-content: center; } }

.live-status{display:inline-flex;align-items:center;gap:.45rem;margin:.8rem 0 0;padding:.5rem .75rem;border-radius:999px;border:1px solid var(--club-border);background:rgba(128,176,64,.08);color:var(--club-muted);font-size:.92rem}.live-status::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--club-green);box-shadow:0 0 12px rgba(128,176,64,.8)}.live-status[data-state="warn"]::before{background:#e6b84c}.live-status[data-state="ok"]{color:var(--club-text)}

.gallery-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.gallery-jump a{display:inline-flex;align-items:center;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--club-border);background:rgba(128,176,64,.08);color:var(--club-green-2);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em}
.gallery-jump a:hover,.gallery-jump a:focus-visible{background:var(--club-green);color:#071004;outline:none}

/* Bereichsnavigation der Galerie: klebt beim Scrollen unter der Navigation.
   Bei 81 Fotos war sie sonst nach dem ersten Abschnitt weg. */
.gallery-jump-bar { position: sticky; top: var(--nav-h, 0px); z-index: 60;
  margin: -.4rem 0 .4rem; padding: .6rem 0;
  background: rgba(13,15,11,.9); backdrop-filter: blur(8px); }
.gallery-jump-bar .gallery-jump { margin-top: 0; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery-jump-bar .gallery-jump::-webkit-scrollbar { display: none; }
.gallery-jump-bar .gallery-jump a { flex: 0 0 auto; }

/* Mannschaftsfotos: zwei statt drei Spalten - Gruppenbilder brauchen mehr
   Flaeche als Schnappschuesse, und vorerst haengt dort nur ein Bild. */
.team-foto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
@media (max-width: 620px) { .team-foto-grid { grid-template-columns: 1fr; } }

/* Eingeklappte Fotostrecken: ohne JavaScript genauso bedienbar. */
.gallery-details { margin: 0 0 2.2rem; }
.gallery-details > summary { display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border: 1px solid var(--club-border); border-radius: 999px;
  background: rgba(128,176,64,.08); color: var(--club-green-2);
  font-weight: 700; font-size: .9rem; cursor: pointer; list-style: none; }
.gallery-details > summary::-webkit-details-marker { display: none; }
.gallery-details > summary::before { content: '▸'; transition: transform .18s ease; }
.gallery-details[open] > summary::before { transform: rotate(90deg); }
.gallery-details > summary:hover, .gallery-details > summary:focus-visible {
  background: var(--club-green); color: #071004; outline: none; }
.gallery-details .gallery-grid { margin-top: 1rem; margin-bottom: 0; }
.gallery-section-intro{margin-top:1.2rem}

.team-section-heading{margin-top:1.2rem}.team-section-heading h2{margin-bottom:.4rem}.cup-team-grid{margin-bottom:1.5rem}

/* Matchday-Ergebnisse: zwei Spalten (Haupt-/Trostrunde), Sieger leicht hervorgehoben */
.matchday-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.3rem 0 .4rem}
.matchday-results h3{margin:0 0 .6rem;color:var(--club-green-2);font-size:1.15rem}
.result-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.result-list li{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .7rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.045)}
.result-list li:first-child{border-color:var(--club-border);background:rgba(128,176,64,.12)}
.result-list .rank{min-width:1.5rem;color:var(--club-green-2);font-weight:800;font-family:"Germania One Local","Copperplate",Georgia,serif}
@media(max-width:620px){.matchday-results{grid-template-columns:1fr}}


.home-layout { align-items: stretch; }
.home-lead h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); }
.home-quick .info-list strong { color: #fff; }
.home-section-title { margin-top: .4rem; }
.home-section-title p { max-width: 58rem; }
.span-3 { grid-column: span 3; }
.home-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(128,176,64,.42);
  border-bottom: 5px solid var(--club-green);
  background:
    radial-gradient(circle at 20% 0%, rgba(155,210,78,.19), transparent 13rem),
    linear-gradient(180deg, rgba(29,33,24,.96), rgba(8,10,7,.98));
  color: var(--club-text);
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-teaser::after {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: .75rem;
  color: var(--club-green-2);
  font-size: 1.75rem;
  opacity: .75;
}
.home-teaser:hover,
.home-teaser:focus-visible {
  transform: translateY(-4px);
  color: #fff;
  border-color: var(--club-green-2);
  box-shadow: 0 24px 54px rgba(0,0,0,.40), 0 0 0 1px rgba(155,210,78,.12);
  outline: none;
}
.home-teaser h3 { margin: .35rem 0 .55rem; color: #fff; font-size: 1.45rem; }
.home-teaser p { margin: 0; color: var(--club-muted); }
.teaser-kicker {
  color: var(--club-green-2);
  font-family: "Germania One Local", "Copperplate", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: .82rem;
}
.home-feature, .home-venue { margin-top: .2rem; }

/* Team-Banner: breites Mannschaftsfoto mit Verlaufs-Overlay und Bildunterschrift */
.home-team-band-caption { position: static; padding: 0; background: none; }
.home-team-band-caption h2 { margin: .15rem 0 .35rem; color: #fff; }
.home-team-band-caption p { margin: 0; color: var(--club-muted); }

/* Matchday-Highlight auf der Startseite */
.home-matchday { border-left-color: var(--club-green-2); }

@media (max-width: 980px) { .span-3 { grid-column: span 6; } }
@media (max-width: 820px) { .span-3, .home-feature, .home-venue { grid-column: span 12; } .home-teaser { min-height: 180px; } }

/* ============================================================
   Werte-Eyecatcher: „Drei Werte, ein Treffer"
   Dartboard mit hereinfliegenden Darts + pulsierendem Bull.
   ============================================================ */
.values-eyecatcher {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(128,176,64,.28);
  background:
    radial-gradient(circle at 18% 12%, rgba(128,176,64,.16), transparent 42%),
    linear-gradient(150deg, #0c1008 0%, #11160d 55%, #070905 100%);
}
.values-aurora {
  position: absolute; inset: -40% -10% auto -10%; height: 130%;
  background:
    radial-gradient(40% 55% at 70% 30%, rgba(155,210,78,.20), transparent 70%),
    radial-gradient(45% 50% at 25% 70%, rgba(128,176,64,.16), transparent 70%);
  filter: blur(6px);
  animation: valuesDrift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes valuesDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .8; }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}
.values-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(1.2rem, 4vw, 2.8rem);
  align-items: center;
}
.values-board { justify-self: center; width: 100%; max-width: 360px; }
/* Echtes Board aus der Mühle26 — kreisrund freigestellt, mit sanftem LED-Glow */
.values-board img {
  width: 100%; height: auto; display: block;
  border-radius: 50%;
  box-shadow: 0 22px 40px rgba(0,0,0,.55), 0 0 55px rgba(128,176,64,.28);
  animation: boardGlow 4s ease-in-out infinite;
}
@keyframes boardGlow {
  0%, 100% { box-shadow: 0 22px 40px rgba(0,0,0,.55), 0 0 45px rgba(128,176,64,.22); }
  50%      { box-shadow: 0 22px 40px rgba(0,0,0,.55), 0 0 75px rgba(155,210,78,.42); }
}

.values-copy h2 { margin: .15rem 0 .3rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.values-lead { color: var(--club-muted); max-width: 46ch; }
.values-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .9rem; }
.value-item { display: flex; gap: .85rem; align-items: flex-start; }
.value-item h3 { margin: 0 0 .15rem; font-size: 1.15rem; }
.value-item p { margin: 0; color: var(--club-muted); }
.value-bull {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: .25rem; border-radius: 50%;
  background:
    radial-gradient(circle, #c9f56a 0 22%, #80b040 22% 48%, #10140d 48% 70%, #80b040 70% 86%, #10140d 86% 100%);
  box-shadow: 0 0 0 1px rgba(128,176,64,.35), 0 0 14px rgba(128,176,64,.35);
}

/* Scroll-Reveal: nur wenn JS aktiv ist (.anim-ready). Ohne JS bleibt alles sichtbar. */
.values-eyecatcher.anim-ready .values-board img { opacity: 0; transform: scale(.9) rotate(-5deg); transition: transform .9s cubic-bezier(.22,.9,.3,1.18), opacity .6s ease; }
.values-eyecatcher.anim-ready .value-item { opacity: 0; transform: translateY(14px); transition: transform .6s ease, opacity .6s ease; }
.values-eyecatcher.anim-ready .value-item:nth-child(1) { transition-delay: .35s; }
.values-eyecatcher.anim-ready .value-item:nth-child(2) { transition-delay: .5s; }
.values-eyecatcher.anim-ready .value-item:nth-child(3) { transition-delay: .65s; }
.values-eyecatcher.anim-ready.in-view .values-board img,
.values-eyecatcher.anim-ready.in-view .value-item { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .values-inner { grid-template-columns: 1fr; }
  .values-board { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .values-aurora { animation: none; }
  .values-board img { animation: none; }
  .values-eyecatcher .values-board img, .values-eyecatcher .value-item { opacity: 1; transform: none; transition: none; }
}


/* Spielstätten-Showcase: großes Foto der Mühle26 */
.venue-showcase { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(1.2rem, 4vw, 2.4rem); align-items: center; }
.venue-showcase-media { border-radius: 16px; overflow: hidden; border: 1px solid rgba(128,176,64,.35); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.venue-showcase-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.venue-showcase-copy h2 { margin: .15rem 0 .5rem; font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.venue-showcase-copy p { color: var(--club-text); }
.venue-showcase-copy p.muted { color: var(--club-muted); }
@media (max-width: 720px) { .venue-showcase { grid-template-columns: 1fr; } .venue-showcase-media { max-height: 460px; } }

/* ============================================================
   Sponsoring-Flyer: Pakete, Vorteile, Ziele, Kontakt
   ============================================================ */
.sponsor-flyer { background: radial-gradient(circle at 85% 0%, rgba(128,176,64,.14), transparent 45%), linear-gradient(155deg, #0d1108, #11160d 60%, #080a05); border: 1px solid rgba(128,176,64,.3); }
.sponsor-flyer-head { max-width: 70ch; }
.sponsor-flyer-head h2 { margin: .1rem 0 .5rem; }
.sponsor-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.4rem 0; }
.package { background: rgba(255,255,255,.04); border: 1px solid rgba(128,176,64,.28); border-radius: 16px; padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.package.featured { border-color: var(--club-green); background: rgba(128,176,64,.1); box-shadow: 0 0 0 1px rgba(128,176,64,.45), 0 16px 36px rgba(0,0,0,.4); position: relative; }
.package.featured::after { content: "Beliebt"; position: absolute; top: -.7rem; right: 1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #08120a; background: var(--club-green-2); border-radius: 999px; padding: .15rem .6rem; }
.package-kicker { margin: 0; color: var(--club-green-2); text-transform: uppercase; font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.package-price { margin: 0; font-family: "Germania One Local", Georgia, serif; font-size: 2.3rem; line-height: 1; color: var(--club-text); }
.package-price span { font-family: inherit; font-size: .95rem; color: var(--club-muted); margin-left: .25rem; }
.package p:last-child { margin: .25rem 0 0; color: var(--club-muted); font-size: .95rem; }
.sponsor-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 4vw, 2.4rem); margin-top: .5rem; }
.sponsor-twocol h3 { margin: 0 0 .5rem; }
.sponsor-twocol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.sponsor-twocol li { position: relative; padding-left: 1.5rem; color: var(--club-muted); }
.sponsor-twocol li::before { content: "🎯"; position: absolute; left: 0; font-size: .9rem; }
.sponsor-contact { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(128,176,64,.25); }
.sponsor-contact h3 { margin: 0 0 .35rem; }
.sponsor-contact p { color: var(--club-muted); margin: 0 0 .4rem; }
@media (max-width: 820px) { .sponsor-packages { grid-template-columns: 1fr; } .sponsor-twocol { grid-template-columns: 1fr; } }

/* ============================================================
   VISUELLE AUFWERTUNG (Phasen 1–4)
   ============================================================ */

/* --- Scroll-Fortschrittsbalken --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--club-green), var(--club-green-2));
  box-shadow: 0 0 10px rgba(155,210,78,.6);
  z-index: 200; pointer-events: none;
}

/* --- Scroll-Reveal (nur aktiv, wenn JS die Klasse setzt) --- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Gestaffeltes Erscheinen: Geschwisterkarten kommen leicht zeitversetzt statt gleichzeitig. */
.reveal:nth-of-type(2) { transition-delay: .06s; }
.reveal:nth-of-type(3) { transition-delay: .12s; }
.reveal:nth-of-type(4) { transition-delay: .18s; }
.reveal:nth-of-type(5) { transition-delay: .24s; }
.reveal:nth-of-type(n+6) { transition-delay: .3s; }

/* --- Sanftes Bild-Einblenden (verhindert hartes Auf-Poppen beim Laden) --- */
img[loading="lazy"] { opacity: 0; transition: opacity .5s ease; }
img[loading="lazy"].img-loaded,
img[loading="lazy"].img-loaded ~ * { opacity: 1; }
img[loading="lazy"]:not([src]) { opacity: 1; }

/* --- Tactile Tap-Feedback für Touch-Geräte (kein Hover verfügbar) --- */
@media (hover: none) and (pointer: coarse) {
  .button, .card, .home-teaser, .gallery-item, .sponsor-logo-card, .package, .nav a, .team-card {
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  }
  .button:active { transform: scale(.96); filter: brightness(.92); }
  .card:active, .home-teaser:active, .sponsor-logo-card:active, .package:active, .team-card:active {
    transform: scale(.985);
    box-shadow: 0 10px 22px rgba(0,0,0,.4);
  }
  .gallery-item:active { transform: scale(.97); }
  .gallery-item:active img { filter: brightness(.88); }
  .nav a:active { background: rgba(128,176,64,.35); }
}

/* --- Sticky-Nav: mehr Tiefe beim Scrollen --- */
.nav-wrap.is-scrolled { box-shadow: 0 16px 32px rgba(0,0,0,.45); background: rgba(0,0,0,.92); }

/* --- Karten-/Teaser-Hover --- */
.card { transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease; }
.card:hover { border-left-color: var(--club-green-2); box-shadow: 0 26px 56px rgba(0,0,0,.5); }
.home-teaser:hover, .sponsor-logo-card:hover, .package:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(0,0,0,.45);
  border-color: var(--club-green-2);
}
.sponsor-logo-card, .package, .home-teaser { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

/* --- Zahlen-Band --- */
/* Zahlenreihe frei auf dem Seitenhintergrund — bewusst ohne Karten-Box */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; align-items: start; padding: 1.6rem 0 1.2rem; }
.stat { padding: .4rem; }
.stat-num { font-family: "Germania One Local", Georgia, serif; font-size: clamp(2.3rem, 5.5vw, 3.6rem); line-height: 1; color: var(--club-green-2); text-shadow: 0 0 24px rgba(128,176,64,.4); letter-spacing: .03em; }
.stat-label { margin-top: .45rem; color: var(--club-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 600px) { .stats-band { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; } }

/* --- Seiten-Bild-Band (Hero pro Unterseite) --- */

/* Vollflächiger Foto-Hero: läuft randlos bis an die Browserkanten,
   dockt direkt an die Navigation an — kein Karten-Rahmen. */
.page-hero {
  position: relative; overflow: hidden;
  min-height: 250px;
  display: flex; align-items: flex-end;
  margin-inline: calc(50% - 50vw);
  margin-top: -2rem;
  margin-bottom: 1.8rem;
  background: var(--hero-img) center 32% / cover no-repeat;
}
.page-hero::before {
  content: "";
  position: absolute;
  right: 3%; bottom: 6%;
  width: 44%; max-width: 500px;
  aspect-ratio: 1400/662;
  background: url('../img/schriftzug-club26.webp') right bottom / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,8,4,.92) 0%, rgba(8,14,5,.55) 52%, rgba(8,14,5,.12) 100%),
    linear-gradient(180deg, transparent 45%, rgba(5,7,4,.75) 100%);
}
/* Text im randlosen Hero bleibt an der Inhaltsspalte ausgerichtet */
.page-hero-inner {
  position: relative; z-index: 1;
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 2.6rem) 0;
}
.page-hero-inner p { max-width: 48ch; }
.page-hero-inner .eyebrow { text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.page-hero-inner h1, .page-hero-inner h2 {
  margin: .1rem 0 .3rem; line-height: 1;
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase;
  text-shadow: 0 3px 20px rgba(0,0,0,.75);
}
.page-hero-inner p { margin: 0; color: var(--club-text); text-shadow: 0 2px 10px rgba(0,0,0,.75); }
@media (max-width: 620px) { .page-hero { min-height: 200px; } }
/* Desktop: breites Band würde stark zoomen -> höher machen, damit mehr vom Motiv sichtbar ist. */
@media (min-width: 721px) {
  .page-hero { min-height: 380px; background-position: center 40%; }
}

/* --- Team-Kachel: vollständiges Foto, kein Beschnitt, kein Text-Overlay --- */
.home-team-band-caption { max-width: 60ch; }
.home-team-band-caption h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.home-team-band img { display: block; width: 100%; height: auto; border-radius: 12px; margin-top: 1rem; }

/* --- Footer-Aufwertung --- */
.footer-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 1.4rem; border-bottom: 1px solid rgba(128,176,64,.2); }
.footer-col h3 { margin: 0 0 .5rem; color: var(--club-green-2); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.footer-col p { margin: 0 0 .3rem; color: var(--club-muted); font-size: .95rem; }
.footer-col a { color: var(--club-green-2); }
@media (max-width: 720px) { .footer-top { grid-template-columns: 1fr; gap: 1.1rem; } }
.footer-credit { margin-top: 1rem; text-align: center; font-size: .72rem; letter-spacing: .08em; color: rgba(197,202,187,.4); }

/* --- Typografie & Weißraum --- */
.grid.home-layout { gap: 1.3rem; }
.card h2 { letter-spacing: .04em; }
.eyebrow { letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  .card:hover, .home-teaser:hover, .sponsor-logo-card:hover, .package:hover { transform: none; }
  .scroll-progress { display: none; }
  img[loading="lazy"] { opacity: 1 !important; transition: none !important; }
  .button:active, .card:active, .home-teaser:active, .sponsor-logo-card:active, .package:active, .team-card:active, .gallery-item:active { transform: none !important; }
}

/* Bestleistungen & Meilensteine (verein.html) */
.highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.highlight-card { border: 1px solid var(--club-border); border-radius: 14px; padding: 1rem 1.1rem; background: rgba(0,0,0,.16); }
.highlight-card h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.highlight-card p:last-child { margin: 0; color: var(--club-muted, #c8d6c0); font-size: .92rem; }
@media (max-width: 720px) { .highlight-grid { grid-template-columns: 1fr; } }
/* Bleibt nur eine Karte uebrig (etwa wenn eine per data-until abgelaufen
   ist), nimmt sie die volle Breite statt eine leere Haelfte zu lassen. */
.highlight-grid > :only-child { grid-column: 1 / -1; }

/* Sponsoren-Laufband (Startseite) */
.sponsor-marquee { overflow: hidden; margin: 1.1rem calc(-1 * clamp(1rem, 3vw, 1.6rem)) .6rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sponsor-marquee-track { display: flex; width: max-content; gap: 1.4rem; animation: sponsor-scroll 34s linear infinite; }
.sponsor-marquee:hover .sponsor-marquee-track { animation-play-state: paused; }
.sponsor-marquee-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 150px; height: 74px; background: #fff; border-radius: 12px; padding: .6rem; }
.sponsor-marquee-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes sponsor-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sponsor-marquee-track { animation: none; overflow-x: auto; }
  .sponsor-marquee { overflow-x: auto; }
}

/* Spieltag-Laufband (Startseite): naechste Spiele, praesentiert von Sponsoren */
.matchday-banner-card { overflow: hidden; }
.matchday-banner-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem;
  margin: calc(-1 * clamp(1.1rem, 2.5vw, 1.7rem)) calc(-1 * clamp(1.1rem, 2.5vw, 1.7rem)) 1.2rem;
  padding: 1.7rem clamp(1.1rem, 2.5vw, 1.7rem);
  background:
    linear-gradient(100deg, rgba(0,0,0,.92) 20%, rgba(10,16,6,.58) 62%, rgba(10,16,6,.28) 100%),
    var(--matchday-img) center 46% / cover no-repeat;
}
.matchday-banner-logo { flex: none; width: min(120px, 26vw); height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.matchday-banner-heading { min-width: 0; flex: 1 1 auto; }
.matchday-banner-heading .eyebrow { margin: 0; }
.matchday-banner-heading h2 { margin: .15rem 0 0; font-size: clamp(1.5rem, 3.6vw, 2.3rem); text-shadow: 0 3px 0 #000; }
@media (max-width: 560px) { .matchday-banner-head { flex-direction: column; text-align: center; } }
.matchday-presented-by { margin: 0; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; color: var(--club-muted); font-size: .85rem; max-width: 100%; }
/* Umbruch statt Ueberlauf: Bei drei Logos ergeben 143px plus Abstaende rund
   440px - mehr als ein Handydisplay breit. Ohne wrap ragte das letzte Logo aus
   der Karte heraus und wurde abgeschnitten. */
.matchday-sponsor-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.matchday-sponsor-logos img { height: 62px; width: auto; max-width: 143px; object-fit: contain; background: #fff; border-radius: 12px; padding: .5rem .7rem; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
@media (max-width: 560px) {
  /* Etwas kleiner, damit zwei Logos nebeneinander passen statt jedes allein
     in einer Zeile zu stehen. */
  .matchday-presented-by { justify-content: center; text-align: center; }
  .matchday-sponsor-logos img { height: 48px; max-width: 118px; padding: .4rem .55rem; }
}
.matchday-marquee { overflow: hidden; margin: .6rem calc(-1 * clamp(1rem, 3vw, 1.6rem)) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* 33s statt 38s: rund 15 % schneller. Der Sponsoren-Streifen auf den anderen
   Seiten laeuft weiter mit 34s - die beiden sind bewusst nicht gekoppelt. */
/* Kein gap: Bei zwei identischen Haelften und einer Verschiebung um 50 %
   fehlt sonst pro Umlauf die halbe Luecke (gemessen: 8 px) und es ruckt.
   Der Abstand haengt deshalb an der Pille selbst und zaehlt zur Satzbreite.
   Die Dauer setzt matchday-banner.js, damit das Tempo unabhaengig von der
   Anzahl der Partien gleich bleibt. */
.matchday-marquee-track { display: flex; width: max-content; gap: 0; animation: matchday-scroll var(--matchday-dauer, 33s) linear infinite; }
.matchday-marquee:hover .matchday-marquee-track { animation-play-state: paused; }
.matchday-pill { flex: 0 0 auto; margin-right: 1rem; display: flex; flex-direction: column; gap: .2rem; min-width: 15rem; padding: .75rem 1.1rem; border: 1px solid var(--club-border); border-left: 4px solid var(--club-green); border-radius: 14px; background: rgba(0,0,0,.22); }
.matchday-pill.is-home { min-width: 17rem; border-color: var(--club-green-2); border-left-width: 6px; background: linear-gradient(135deg, rgba(128,176,64,.22), rgba(0,0,0,.22)); box-shadow: 0 0 0 1px rgba(155,210,78,.35), 0 10px 24px rgba(128,176,64,.22); }
.matchday-home-badge { margin-top: .15rem; display: inline-block; align-self: flex-start; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .25rem .55rem; border-radius: 999px; background: var(--club-green); color: #071004; }
.matchday-pill-date { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--club-green-2); font-weight: 700; }
.matchday-pill-teams { font-size: 1.02rem; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.matchday-team-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; background: var(--club-green); color: #071004; border-radius: 6px; font-size: .82rem; font-weight: 800; }
.matchday-own { font-weight: 700; color: var(--club-text); }
.matchday-vs { color: var(--club-green-2); font-weight: 700; }
.matchday-score { margin-left: .2rem; padding: .05rem .45rem; background: rgba(255,255,255,.1); border-radius: 6px; font-weight: 800; }
.matchday-score.is-win { background: rgba(58,190,90,.22); color: #9be8ac; }
.matchday-score.is-loss { background: rgba(220,80,80,.20); color: #f2a8a8; }
.matchday-score.is-draw { background: rgba(255,255,255,.14); }
.matchday-pill-meta { font-size: .8rem; color: var(--club-muted); }
.matchday-pill-link { margin-top: .15rem; font-size: .8rem; font-weight: 700; }
@keyframes matchday-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .matchday-marquee-track { animation: none; overflow-x: auto; }
  .matchday-marquee { overflow-x: auto; }
}

/* Terminkalender (termine.html) */
.termine-wrap { margin-top: .5rem; }

/* Filterleiste */
/* Filterleiste klebt beim Scrollen unter der Navigation. Auf schmalen
   Geraeten bleibt sie einzeilig und wird seitlich gescrollt - umbrechend
   waere sie 155px hoch und damit als klebendes Element zu gross. */
.termine-filter { position: sticky; top: var(--nav-h, 0px); z-index: 60;
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .4rem;
  padding: .55rem 0; background: rgba(13,15,11,.88); backdrop-filter: blur(8px);
  box-shadow: 0 .55rem .6rem -.5rem rgba(0,0,0,.55); }
.termine-mehr { margin-top: 1rem; text-align: center; }
.termine-mehr .muted { margin: .5rem 0 0; }
.termine-chip { background: rgba(0,0,0,.28); border: 1px solid var(--club-border); border-radius: 999px; color: var(--club-text); font: inherit; font-size: .85rem; padding: .3rem .8rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.termine-chip:hover { border-color: var(--club-green-2); }
.termine-chip.is-active { background: var(--club-green); border-color: var(--club-green); color: #071004; font-weight: 700; }
@media (max-width: 700px) {
  /* Einzeilig und seitlich scrollbar: umbrechend waere die klebende Leiste
     auf dem Handy 155px hoch. */
  .termine-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .termine-filter::-webkit-scrollbar { display: none; }
  .termine-chip { flex: 0 0 auto; }
}

/* Monatsgruppen */
.termine-group + .termine-group { margin-top: 1.5rem; }
.termine-month { position: sticky; top: calc(var(--nav-h, 0px) + var(--termine-filter-h, 0px)); z-index: 50;
  margin: 0 0 .6rem; padding: .45rem 0 .35rem; background: rgba(13,15,11,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(128,176,64,.28); font-size: 1rem; color: var(--club-green-2); text-transform: uppercase; letter-spacing: .08em; }
.termine-items { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }

/* Einzeltermin */
/* hidden muss display:grid schlagen (Author-Style vs. UA-Style) */
.termine-item[hidden], .termine-group[hidden] { display: none; }
.termine-item { display: grid; grid-template-columns: 3.6rem 1fr auto; align-items: center; gap: .9rem;
  border: 1px solid rgba(255,255,255,.08); border-left: 3px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: .6rem .85rem; background: rgba(0,0,0,.2); }
.termine-item.is-home { border-left-color: var(--club-green); background: linear-gradient(90deg, rgba(128,176,64,.12), rgba(0,0,0,.2) 45%); }
.termine-item.is-cup { border-left-color: #e3b877; }

/* Datumsspalte */
.termine-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.termine-weekday { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--club-muted); }
.termine-daynum { font-size: 1rem; font-weight: 800; }

/* Inhalt */
.termine-body { min-width: 0; }
.termine-teams { margin: 0; font-size: .98rem; line-height: 1.35; }
.termine-team-chip { display: inline-block; min-width: 1.4rem; text-align: center; margin-right: .45rem; padding: 0 .3rem;
  background: var(--club-green); color: #071004; border-radius: 6px; font-size: .76rem; font-weight: 800; }
.termine-own { font-weight: 700; }
.termine-vs { color: var(--club-green-2); font-weight: 700; padding: 0 .2rem; }
.termine-score { margin-left: .45rem; padding: 0 .4rem; background: rgba(255,255,255,.1); border-radius: 6px; font-weight: 800; }
.termine-score.is-win { background: rgba(58,190,90,.22); color: #9be8ac; }
.termine-score.is-loss { background: rgba(220,80,80,.20); color: #f2a8a8; }
.termine-score.is-draw { background: rgba(255,255,255,.14); color: var(--club-text); }
.termine-meta { margin: .15rem 0 0; color: var(--club-muted); font-size: .82rem; }

/* Rechte Spalte */
.termine-side { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.termine-tag { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--club-border); color: var(--club-muted); white-space: nowrap; }
.termine-tag-home { background: var(--club-green); border-color: var(--club-green); color: #071004; }
.termine-tag-cup { background: rgba(227,184,119,.18); border-color: rgba(227,184,119,.5); color: #e3b877; }
.termine-item.is-venue { border-left-color: #7f8ea0; background: rgba(127,142,160,.09); }
.termine-item.is-venue .termine-own { font-weight: 700; color: #d3dae2; }
.termine-tag-venue { background: rgba(127,142,160,.22); border-color: rgba(127,142,160,.55); color: #cfd8e2; }
.termine-link { font-size: .8rem; font-weight: 700; color: var(--club-green-2); white-space: nowrap; }

/* ---------- Spieltag-Bloecke (spieltage.html) ----------
   Erzeugt von tools/build-spieltage.py. Die Partienliste ist bewusst
   schlichter gehalten als .termine-item: Hier steht der Bericht im
   Vordergrund, die Paarungen sind nur die Einordnung dazu. */
.spieltag + .spieltag { margin-top: 1.1rem; }
.spieltag > h2 { margin-top: .1rem; }

.spieltag-partien { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; }
.spieltag-partie {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .9rem;
  border: 1px solid rgba(255,255,255,.08); border-left: 3px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: .6rem .85rem; background: rgba(0,0,0,.2);
}
.spieltag-partie.is-home { border-left-color: var(--club-green); background: linear-gradient(90deg, rgba(128,176,64,.12), rgba(0,0,0,.2) 45%); }
.spieltag-paarung { min-width: 0; }
.spieltag-vs { color: var(--club-green-2); font-weight: 700; padding: 0 .4rem; }
.spieltag-liga { color: var(--club-muted); font-size: .82rem; white-space: nowrap; }
.spieltag-ergebnis { padding: .1rem .5rem; background: rgba(255,255,255,.1); border-radius: 6px; font-weight: 800; }
.spieltag-zeit { color: var(--club-muted); font-size: .85rem; white-space: nowrap; }

.spieltag-highlight {
  margin: 1rem 0 0; padding: .65rem .9rem;
  border-left: 4px solid var(--club-green); border-radius: 10px;
  background: rgba(128,176,64,.12);
}
.spieltag-highlight strong { color: var(--club-green-2); }

/* Bestleistungen: Kategorie links, Namen rechts. Auf schmalen Schirmen
   untereinander, sonst wird die rechte Spalte zu eng. */
.spieltag-bestleistungen { margin: 1rem 0 0; display: grid; gap: .4rem; }
.spieltag-bestleistungen > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: .2rem .9rem;
  padding: .55rem .85rem; border-radius: 10px; background: rgba(0,0,0,.18);
  border-left: 3px solid var(--club-border);
}
.spieltag-bestleistungen dt { color: var(--club-green-2); font-weight: 700; font-size: .88rem; }
.spieltag-bestleistungen dd { margin: 0; font-size: .92rem; }
@media (max-width: 700px) {
  .spieltag-bestleistungen > div { grid-template-columns: 1fr; }
}

.spieltag-text { margin-top: 1rem; }
.spieltag-text p { margin: 0 0 .7rem; }
.spieltag-text p:last-child { margin-bottom: 0; }

.spieltag-fotos { margin-top: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Berichtsfotos sind das Bild zum Spieltag, keine Vorschau-Kacheln: ein
   einzelnes Foto geht ueber die volle Breite, auf dem Handy immer eine Spalte.
   (Die Galerie ist auf dem Handy zweispaltig - ohne diese Regel waren
   Berichtsfotos dort nur halb so breit.) */
.spieltag-fotos > :only-child { grid-column: 1 / -1; }
@media (max-width: 620px) { .spieltag-fotos { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  /* Liga und Ergebnis unter die Paarung, sonst wird es dreispaltig zu eng. */
  .spieltag-partie { grid-template-columns: 1fr auto; gap: .5rem .7rem; }
  .spieltag-liga { grid-column: 1; font-size: .78rem; }
  .spieltag-vs { padding: 0 .25rem; }
}

/* Archivtabelle Endstand (mannschaften.html) */
.archiv-tabelle > summary { cursor: pointer; font-weight: 700; color: var(--club-green-2);
  padding: .5rem 0; }
.archiv-tabelle > summary:hover { color: var(--club-green); }
/* Auf schmalen Schirmen scrollt die Tabelle in sich, nicht die ganze Seite */
.tabelle-scroll { overflow-x: auto; margin-top: .6rem; }
table.standings { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .88rem; }
table.standings th, table.standings td { text-align: left; padding: .45rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
table.standings thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--club-muted); border-bottom-color: var(--club-border); }
table.standings tbody th { font-weight: 700; }
table.standings tbody tr:last-child th,
table.standings tbody tr:last-child td { border-bottom: 0; }
table.standings tbody tr:hover { background: rgba(255,255,255,.04); }

/* Ausgelost, aber von 2K noch ohne Spieltag */
.termine-tag-open { background: rgba(227,184,119,.14); border-color: rgba(227,184,119,.45); color: #e3b877; }
.termine-item.is-open { border-left-style: dashed; }
.termine-date.is-open .termine-weekday,
.termine-date.is-open .termine-daynum { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #e3b877; }
.termine-group-open .termine-month { color: #e3b877; }

@media (max-width: 700px) {
  .termine-item { grid-template-columns: 3.2rem 1fr; gap: .7rem; padding: .6rem .7rem; }
  .termine-side { grid-column: 2; justify-content: flex-start; margin-top: .15rem; }
  .termine-teams { font-size: .92rem; }
}

/* Terminseite: naechstes Spiel, Ergebnisse, Kalender-Export */
.next-match-card { border-left: 4px solid var(--club-green-2); }
.next-match-teams { margin: .1rem 0 .3rem; font-size: 1.25rem; line-height: 1.3; }
.next-match-meta { margin: 0; color: var(--club-text); font-weight: 600; }
.next-match-countdown { color: var(--club-green-2); }
.next-match-countdown.is-set { font-weight: 700; }

.termine-past summary { cursor: pointer; font-family: "Germania One Local", "Copperplate", Georgia, serif;
  letter-spacing: .055em; text-transform: uppercase; color: var(--club-green-2);
  padding: .5rem .7rem; border: 1px solid var(--club-border); border-radius: 10px;
  background: rgba(0,0,0,.2); }
.termine-past summary:hover { border-color: var(--club-green-2); }
.termine-past[open] summary { margin-bottom: .7rem; }
.termine-past .termine-items { margin-top: .5rem; }
.termine-past .termine-item { opacity: .92; }

.ics-row { gap: .5rem; }
.ics-row .button { font-size: .88rem; padding: .5rem .9rem; }