@font-face {
  font-family: "TGK Display";
  src: url("../Fonts/Anton.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   TuS Graf Kobbo 1902 e.V. — Kobbo Matchday Pulse
   Website-Richtung, 2026-05-25
   Palette: Rot / Weiß / Schwarz / Feldgrün (Brief überschreibt
   Energetic-Default). Keine externen Schriftarten.
   ============================================================= */

:root {
  /* Vereinsfarben */
  --red:        #C8102E;
  --red-deep:   #9A0C24;
  --red-ink:    #6E0817;
  --green:      #1F6F3A;
  --green-deep: #154E29;

  /* Neutral */
  --ink:        #17231B;
  --ink-soft:   #2A3A2F;
  --paper:      #FFFFFF;
  --paper-soft: #F5F5F2;
  --paper-band: #ECEAE3;
  --muted:      #5B5B61;
  --line:       #E5E3DD;
  --line-ink:   #2A3A2F;
  --image-text-bg: rgba(23, 35, 27, .7);
  /* Textfarbe auf Foto- und Videoflaechen. Bewusst NICHT im Dark-Mode-Block
     ueberschrieben: der Hintergrund ist dort ein Bild, keine Themeflaeche.
     Wuerde dieser Wert mitkippen, staende dunkler Text auf hellem Foto. */
  --on-media:   #FFFFFF;
  /* Gedämpfte Vordergrundfarbe auf --ink-Flächen (Footer), token-basiert statt
     hartkodiertem rgba(255,255,255,.78) — folgt --paper automatisch durch alle
     Theme-/Kontrast-Kombinationen (L7). */
  --footer-bg: #132019;
  --footer-fg: #F7F6F0;
  --footer-fg-muted: rgba(247, 246, 240, .78);
  /* Akzent für lange Lesestrecken: im Dark Mode heller als die Vereinsfarbe,
     damit das kleine Orientierungssignal zuverlässig lesbar bleibt. */
  --tgk-longform-accent: var(--red);

  /* Typografie */
  --font-display: "TGK Display", Impact, "Haettenschweiler", "Arial Narrow Bold",
                  "Helvetica Neue Condensed", "Arial Black", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "JetBrains Mono",
                  Menlo, Consolas, monospace;

  /* Radien — das freigegebene Grundlayout bleibt präzise; dunkle
     Medienflächen dürfen die vorhandene Rundung etwas deutlicher zeigen. */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-dark: 14px;
  --r-hero: 22px;

  /* Spacing */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --gap-8: 64px;
  --gap-9: 96px;

  /* Layout */
  --max-w: 1440px;
  --gutter: 24px;
  --pitch-qr-max-w: 960px;
  --pitch-qr-image-max: 320px;
  --pitch-qr-canvas: #FFFFFF;

  /* Gelieferter Print-Styleguide, bewusst getrennt vom bewährten Websystem */
  --print-red: #F20000;
  --print-red-deep: #990A13;
  --print-blue: #001AE8;
  --print-green: #D1D694;

  /* Partner-Logos (sponsoren.php, sponsoren-variante-b.php, Startseiten-Streifen).
     Die Logos sind Originaldateien der Partner (teils weiß auf transparent,
     teils mit festem Farbkasten) und liegen deshalb auf --ink. Im Ruhezustand
     werden sie entfärbt/aufgehellt, damit die vielen Farben nicht unruhig
     wirken; bei Hover/Focus zeigt sich das Originallogo (Kundenwunsch
     06.08.). Werte am realen Logo-Bestand abgestimmt. */
  --partner-logo-frame-h: 132px;
  --partner-logo-opacity-rest: .78;
  --partner-logo-transition: opacity .3s ease, transform .3s ease;

  /* Fließtext-Blöcke (verein.php, sport-detail.php Intro) — größere Schrift
     und eine mittig begrenzte Lesespur statt überbreiter Zeilen. */
  --fs-body-lg: 20px;
  --measure-body: 920px;

  /* Karte Anfahrt (kontakt.php) — volle Breite, feste Rahmenstaerke wie
     uebrige Kachel-/Bildrahmen der Seite. */
  --map-frame-h: clamp(320px, 42vw, 520px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale, 1));
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button { font: inherit; cursor: pointer; }
a { color: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
video:focus-visible {
  outline: 3px solid var(--print-blue);
  outline-offset: 3px;
}

/* ------------------- Typografie ------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--red { color: var(--red); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.018em;
  line-height: 1.05;
  hyphens: none;
  overflow-wrap: normal;
  text-transform: uppercase;
  word-break: normal;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.018em;
  line-height: 1.05;
  hyphens: none;
  overflow-wrap: normal;
  text-transform: uppercase;
  text-wrap: balance;
  word-break: normal;
  margin: 0;
}

p { margin: 0 0 var(--gap-3); }

.lede {
  font-size: calc(18px * var(--font-scale, 1));
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ------------------- Layout-Hülle ------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.section {
  padding-block: var(--gap-9) var(--gap-9);
}
.section--soft { background: var(--paper-soft); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-5);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--gap-4);
  margin-bottom: var(--gap-7);
  flex-wrap: wrap;
}
.section-head__title {
  font-size: calc(clamp(36px, 5vw, 56px) * var(--font-scale, 1));
}
.section-head__meta {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------- Buttons ------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 14px 22px;
  border: 2px solid var(--line-ink);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(14px * var(--font-scale, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease,
              color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.btn--primary {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--ghost-light {
  background: transparent;
  color: var(--on-media);
  border-color: var(--on-media);
}
.btn--ghost-light:hover { background: var(--paper); color: var(--ink); }

/* ------------------- Top-Nav ------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: var(--gap-4) 0;
  /* Transparent ueber dem Hero-Bild: Textfarbe darf nicht mit dem Theme kippen,
     sonst steht dunkle Navigation auf hellem Foto. Der angeheftete Zustand
     (.nav.is-pinned) hat eine Themeflaeche und nutzt dort wieder --ink. */
  color: var(--on-media);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, padding 0.2s ease;
}
.nav.is-pinned {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line);
  padding: var(--gap-3) 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
}
.nav__back {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--r-md);
  padding: 0 11px;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.9;
}
.nav__back:hover {
  color: var(--red);
  opacity: 1;
}
.nav__brand {
  flex: 0 1 240px;
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  text-decoration: none;
  color: currentColor;
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__crest {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--red);
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  letter-spacing: 0;
}
.nav__crest img { width: 100%; height: 100%; object-fit: contain; }
.nav__links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.35vw, 24px);
}
.nav__links a {
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
  opacity: 0.85;
  transition: color .18s ease, background-color .18s ease, opacity .18s ease;
}
.nav__links a:hover,
.nav__links a:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: var(--paper);
}
.nav__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 10px 16px;
  background: var(--red);
  color: var(--paper);
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  text-decoration: none;
  border: 2px solid var(--red);
}
.nav__cta:hover { background: var(--red-deep); border-color: var(--red-deep); }
.nav__burger { display: none; }

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__brand { font-size: calc(15px * var(--font-scale, 1)); }
  .nav__cta { padding: 8px 12px; font-size: calc(11px * var(--font-scale, 1)); }
}

@media (max-width: 560px) {
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: var(--gap-3);
  }
  .nav__back {
    grid-column: 1 / -1;
    width: max-content;
  }
  .nav__cta {
    display: none;
  }
}

/* ------------------- Hero ------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--on-media);
  overflow: hidden;
  isolation: isolate;
  background: var(--green-deep);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 42%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--gap-9);
  padding-bottom: var(--gap-7);
}
.hero__core {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-6);
  text-shadow: 0 2px 3px rgba(0,0,0,0.76), 0 10px 34px rgba(0,0,0,0.5);
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--gap-3);
  width: fit-content;
  padding: .5em .7em;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-media);
  background: var(--image-text-bg);
  opacity: 1;
}
.hero__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--red);
}
.hero__title {
  font-size: calc(clamp(56px, 11vw, 168px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0;
  text-shadow: 0 6px 28px rgba(23,35,27,0.5);
}
.hero__title span {
  display: block;
}
.hero__title .accent {
  color: var(--red);
  -webkit-text-stroke: 0;
}
.hero__claim {
  width: fit-content;
  justify-self: start;
  padding: .38em .58em;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: calc(clamp(20px, 2.6vw, 32px) * var(--font-scale, 1));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--on-media);
  background: var(--image-text-bg);
  max-width: 22ch;
}
/* Startseiten-Hero: der Claim ist das dominierende Element unter dem
   Markennamen, deshalb deutlich groesser als der Standard-Claim-Baustein. */
.hero__claim--lead {
  font-size: calc(clamp(34px, 6.4vw, 104px) * var(--font-scale, 1));
  letter-spacing: 0.02em;
  max-width: 18ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  margin-top: var(--gap-4);
}
.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-6);
  flex-wrap: wrap;
  padding-top: var(--gap-6);
  margin-top: var(--gap-7);
}
.hero__foot-item {
  width: fit-content;
  padding: .48em .62em;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-media);
  background: #101a14;
  text-shadow: 0 2px 3px rgba(0,0,0,0.76), 0 8px 24px rgba(0,0,0,0.5);
}
.hero__foot-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  color: var(--on-media);
  margin-top: 4px;
}
.hero__scroll {
  position: absolute;
  bottom: var(--gap-5);
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.6);
}

@media (max-width: 880px) {
  .hero__scroll { display: none; }
  .hero__foot-item strong { font-size: calc(22px * var(--font-scale, 1)); }
}

/* ------------------- Status-Strip / Heute ------------------- */
.statusbar {
  background: var(--green-deep);
  color: var(--paper);
  padding-block: var(--gap-3);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.statusbar__row {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--gap-2);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}
.statusbar__divider {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.18);
  min-width: 32px;
}

/* ------------------- Modul: Nächstes Spiel ------------------- */
.match {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-6);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.match__main {
  padding: var(--gap-7);
  display: grid;
  gap: var(--gap-5);
}
.match__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap-5);
}
.match__team {
  display: grid;
  gap: var(--gap-2);
  text-align: center;
}
.match__crest {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(40px * var(--font-scale, 1));
  letter-spacing: 0;
  border-radius: var(--r-md);
}
.match__crest--home {
  background: var(--paper);
  color: var(--red);
  padding: 8px;
}
.match__crest--home img { width: 100%; height: 100%; object-fit: contain; }
.match__crest--away {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line-ink);
}
.match__resultstrip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}
.match__resultstrip div {
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-md);
  padding: var(--gap-3);
}
.match__resultstrip strong {
  display: block;
  font-size: calc(12px * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.match__resultstrip span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,0.72);
  font-size: calc(13px * var(--font-scale, 1));
}
.match__team-name {
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.match__team-sub {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.match__vs {
  font-family: var(--font-display);
  font-size: calc(56px * var(--font-scale, 1));
  line-height: 1.05;
  color: var(--ink);
}
.match__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-5);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--line);
}
.match__fact {
  display: grid;
  gap: 2px;
}
.match__fact dt {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.match__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.match__side {
  background: var(--green-deep);
  color: var(--paper);
  padding: var(--gap-7);
  display: grid;
  gap: var(--gap-4);
  align-content: space-between;
}
.match__side h3 {
  font-size: calc(26px * var(--font-scale, 1));
  letter-spacing: 0.02em;
}
.match__side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-3);
}
.match__side-list li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: baseline;
  gap: var(--gap-3);
  padding-bottom: var(--gap-3);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale, 1));
}
.match__side-list li:last-child { border-bottom: none; }
.match__side-list time {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.match__side-list .tag {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 3px 6px;
  border-radius: var(--r-sm);
}

@media (max-width: 880px) {
  .match { grid-template-columns: 1fr; }
  .match__main, .match__side { padding: var(--gap-6); }
  .match__teams { grid-template-columns: 1fr; gap: var(--gap-3); }
  .match__vs { transform: rotate(0deg); font-size: calc(36px * var(--font-scale, 1)); }
  .match__crest { width: 64px; height: 64px; font-size: calc(30px * var(--font-scale, 1)); }
}

/* ------------------- Hinweis-Marker ------------------- */
.placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(200,16,46,0.12);
  color: var(--red);
  border: 1px dashed var(--red);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.placeholder-tag::before {
  content: "▲";
  font-size: calc(10px * var(--font-scale, 1));
}

/* ------------------- Sportarten-Hub ------------------- */
.sportarten__intro {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap-7);
  margin-bottom: var(--gap-7);
  align-items: end;
}
.sportarten__intro p { font-size: calc(17px * var(--font-scale, 1)); max-width: 56ch; }

.filter-bar {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
  margin-bottom: var(--gap-5);
}
.chip {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--line-ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-sm);
}
.chip.is-active {
  background: var(--ink);
  color: var(--paper);
}
.chip__count {
  margin-left: 6px;
  opacity: 0.6;
}

.sportgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-3);
}
@media (max-width: 1024px) { .sportgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  720px) { .sportgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  420px) { .sportgrid { grid-template-columns: 1fr; } }

.sport {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap-3);
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  min-height: 200px;
  transition: transform 0.18s ease, background-color 0.18s ease,
              color 0.18s ease;
}
.sport:hover {
  transform: translateY(-2px);
}
.sport__num {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  color: var(--muted);
}
.sport__name {
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.sport__meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--gap-3);
}
.sport__cat {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: var(--r-sm);
}
.sport__count {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Kategorie-Farben */
.cat-mannschaft { background: var(--red); color: var(--paper); }
.cat-outdoor    { background: var(--green); color: var(--paper); }
.cat-fitness    { background: var(--ink); color: var(--paper); }
.cat-kinder     { background: var(--red-deep); color: var(--paper); }

.sport[data-cat="mannschaft"] .sport__name { color: var(--red-ink); }
.sport[data-cat="outdoor"] .sport__name { color: var(--green-deep); }

/* Featured-Sport: Fußball mit Foto */
.sport--feature {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  border-color: var(--line-ink);
  background: var(--ink);
}
.sport--feature .sport__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.65);
}
.sport--feature .sport__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap-3);
  padding: var(--gap-6);
  height: 100%;
}
.sport--feature .sport__name {
  color: var(--paper);
  font-size: calc(clamp(40px, 5vw, 64px) * var(--font-scale, 1));
}
.sport--feature .sport__num,
.sport--feature .sport__count {
  color: rgba(255,255,255,0.8);
}

@media (max-width: 720px) {
  .sport--feature { grid-column: span 2; grid-row: span 1; min-height: 280px; }
}
@media (max-width: 420px) {
  .sport--feature { grid-column: span 1; }
}

.sparten-showcase {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 31%);
  gap: var(--gap-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: var(--gap-6);
  padding-bottom: var(--gap-2);
}
.sparten-showcase article {
  min-height: 300px;
  display: grid;
  align-content: end;
  scroll-snap-align: start;
  color: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  background: var(--image) center/cover;
}
.sparten-showcase small {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,0.8), 0 6px 20px rgba(0,0,0,0.52);
}
.sparten-showcase strong {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: calc(clamp(34px, 5vw, 58px) * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.52);
}
.sparten-note {
  max-width: 760px;
  margin: var(--gap-3) 0 0;
  color: var(--muted);
}
@media (max-width: 720px) {
  .sparten-showcase { grid-auto-columns: 82%; }
}

/* ------------------- Mitglied werden ------------------- */
.member {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-6);
}
@media (max-width: 880px) { .member { grid-template-columns: 1fr; } }

.tier {
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: var(--gap-7);
  display: grid;
  gap: var(--gap-4);
  align-content: start;
}
.tier--accent {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.tier__label {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tier--accent .tier__label { color: color-mix(in srgb, var(--on-media) 85%, transparent); }
.tier__title {
  font-size: calc(clamp(32px, 4vw, 48px) * var(--font-scale, 1));
  line-height: 1.05;
}
.tier__price {
  font-family: var(--font-display);
  font-size: calc(clamp(56px, 8vw, 96px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.tier__price small {
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: var(--gap-2);
  opacity: 0.8;
}
.tier__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-3);
}
.tier__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--gap-3);
  font-size: calc(15px * var(--font-scale, 1));
  align-items: baseline;
}
.tier__list li::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--red);
  border-radius: var(--r-sm);
}
.tier--accent .tier__list li::before {
  background: var(--paper);
}

.faq {
  margin-top: var(--gap-7);
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--gap-4) 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: calc(20px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale, 1));
  color: var(--red);
}
.faq details[open] summary::after { content: "−"; }
.faq__body {
  padding-top: var(--gap-3);
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ------------------- Über uns / Inline-Clip ------------------- */
.about {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gap-7);
  align-items: center;
}
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }

.about__copy h2 {
  font-size: calc(clamp(40px, 5.5vw, 72px) * var(--font-scale, 1));
  margin-bottom: var(--gap-4);
}
.about__copy p { font-size: calc(17px * var(--font-scale, 1)); line-height: 1.55; max-width: 56ch; }
.about__stats {
  margin-top: var(--gap-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-4);
  border-top: 1px solid var(--line);
  padding-top: var(--gap-5);
}
.about__stat {
  display: grid;
  gap: 4px;
}
.about__stat strong {
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 4vw, 44px) * var(--font-scale, 1));
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.about__stat span {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.about__clip {
  position: relative;
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--ink);
}
.about__clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__clip-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: auto;
  width: fit-content;
  max-width: 100%;
  padding: var(--gap-4);
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------- Atmosphäre-Band ------------------- */
.band {
  position: relative;
  height: clamp(220px, 38vw, 420px);
  overflow: hidden;
  margin-block: 0;
}
.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.band__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: grid;
  align-items: center;
}
.band__quote {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 5vw, 64px) * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  max-width: 22ch;
  text-shadow: 0 2px 3px rgba(0,0,0,0.8), 0 8px 26px rgba(0,0,0,0.52);
}
.band__quote span {
  display: block;
  color: var(--red);
}

/* ------------------- News / Termine ------------------- */
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-5);
}
@media (max-width: 880px) { .news { grid-template-columns: 1fr; } }

.news__card {
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--gap-3);
  min-height: 280px;
  transition: transform 0.15s ease;
}
.news__card:hover { transform: translateY(-2px); }
.news__date {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.news__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  background: var(--paper-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  width: max-content;
}
.news__title {
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.news__link {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.news__link::after { content: " →"; }

/* ------------------- Sponsoren / Ehrenamt ------------------- */
.sponsoren-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-3);
  margin-bottom: var(--gap-6);
}
@media (max-width: 720px) { .sponsoren-grid { grid-template-columns: repeat(2, 1fr); } }

.sponsor-slot {
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border: 1px dashed var(--line-ink);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sponsor-slot span {
  display: block;
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.engage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-4);
  margin-top: var(--gap-6);
}
@media (max-width: 720px) { .engage { grid-template-columns: 1fr; } }

.engage__card {
  background: var(--green-deep);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--gap-6);
  display: grid;
  gap: var(--gap-3);
  align-content: start;
}
.engage__card--green { background: var(--green-deep); }
.engage__card h3 {
  font-size: calc(28px * var(--font-scale, 1));
}
.engage__card p {
  font-size: calc(15px * var(--font-scale, 1));
  color: color-mix(in srgb, var(--on-media) 85%, transparent);
  margin: 0;
  max-width: 48ch;
}
.engage__cta {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  margin-top: var(--gap-3);
  border-bottom: 1px solid var(--paper);
  padding-bottom: 4px;
  width: max-content;
}

/* ------------------- Mobile Vorschau ------------------- */
.mobile-preview {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--gap-7);
  align-items: center;
}
@media (max-width: 880px) {
  .mobile-preview { grid-template-columns: 1fr; }
}
.mobile-preview__copy h2 {
  font-size: calc(clamp(40px, 5vw, 64px) * var(--font-scale, 1));
  margin-bottom: var(--gap-4);
}
.mobile-preview__copy p { max-width: 48ch; }
.mobile-preview__list {
  margin-top: var(--gap-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gap-3);
}
.mobile-preview__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--gap-3);
  font-size: calc(15px * var(--font-scale, 1));
}
.mobile-preview__list li::before {
  content: counter(mobcount, decimal-leading-zero);
  counter-increment: mobcount;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.1em;
  color: var(--red);
  padding-top: 4px;
}
.mobile-preview__list { counter-reset: mobcount; }

.phone {
  --phone-w: 300px;
  width: var(--phone-w);
  margin: 0 auto;
  position: relative;
  background: var(--green-deep);
  border: 6px solid var(--ink);
  border-radius: 38px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 24px 40px -16px rgba(23,35,27,0.32);
  padding: 0;
  aspect-ratio: 300 / 640;
  overflow: hidden;
}
.phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: var(--green-deep);
  border-radius: 12px;
  z-index: 3;
}
.phone__screen {
  background: var(--paper);
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.phone__statusbar {
  position: absolute;
  top: 6px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  letter-spacing: 0.08em;
  color: var(--ink);
  z-index: 2;
}
.phone__statusbar svg { vertical-align: middle; }
.phone__nav {
  position: absolute;
  top: 24px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.phone__nav-brand {
  font-family: var(--font-display);
  font-size: calc(14px * var(--font-scale, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.phone__nav-burger {
  width: 22px;
  height: 14px;
  display: grid;
  gap: 3px;
}
.phone__nav-burger span {
  display: block;
  height: 2px;
  background: var(--paper);
}
.phone__hero {
  position: relative;
  height: 220px;
  background: url("/fileadmin/tus-graf-kobbo/start/hero-poster.webp") center/cover;
  color: var(--paper);
  padding: 56px 14px 14px;
  display: grid;
  align-content: end;
  gap: 6px;
}
.phone__hero-title {
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}
.phone__hero-title .accent { color: var(--red); display: block; }
.phone__hero-claim {
  font-family: var(--font-display);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}
.phone__hero-cta {
  margin-top: 6px;
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  width: max-content;
  border-radius: 2px;
}
.phone__alert {
  background: var(--green-deep);
  color: var(--paper);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.phone__alert .dot { width: 6px; height: 6px; margin: 0; }
.phone__match {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}
.phone__match-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.phone__match-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.phone__team {
  display: grid;
  gap: 2px;
  text-align: center;
}
.phone__team span {
  font-family: var(--font-display);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.phone__team-crest {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: var(--red);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(11px * var(--font-scale, 1));
  border-radius: 2px;
}
.phone__team-crest--away {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.phone__vs {
  font-family: var(--font-display);
  font-size: calc(16px * var(--font-scale, 1));
  letter-spacing: 0;
}
.phone__sport-list {
  padding: 10px 14px 14px;
  display: grid;
  gap: 4px;
}
.phone__sport-list-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.phone__sport-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.phone__sport-tile small {
  font-family: var(--font-mono);
  font-size: calc(8px * var(--font-scale, 1));
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--green-deep);
  padding: 2px 4px;
  border-radius: 2px;
}
.phone__sport-tile.is-red small { background: var(--red); }
.phone__sport-tile.is-green small { background: var(--green); }
.phone__tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 10px 0 16px;
}
.phone__tabbar div {
  font-family: var(--font-mono);
  font-size: calc(8px * var(--font-scale, 1));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.phone__tabbar div.is-active {
  color: var(--red);
}
.phone__tabbar div::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  margin: 0 auto 4px;
  mask: var(--ico) center/contain no-repeat;
  -webkit-mask: var(--ico) center/contain no-repeat;
  border-radius: 3px;
  opacity: 0.85;
}

/* ------------------- Footer ------------------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--gap-8) var(--gap-5);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--gap-7);
  margin-bottom: var(--gap-7);
}
@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--gap-5); }
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}
.footer__crest {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--red);
  font-family: var(--font-display);
  font-size: calc(28px * var(--font-scale, 1));
  border-radius: var(--r-md);
}
.footer__claim {
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 var(--gap-3);
  font-weight: 500;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-2);
}
.footer__col a {
  color: var(--paper);
  text-decoration: none;
  font-size: calc(14px * var(--font-scale, 1));
}
.footer__col a:hover { color: var(--red); }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--gap-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-3);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ------------------- Hinweis-Badge ------------------- */
.predesign-badge {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px -10px rgba(14,14,16,0.4);
}
.predesign-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* =============================================================
   ERWEITERUNG · 2026-05-25 · echte Unterseiten
   --------------------------------------------------------------
   - Foto-Bänder & Mosaik für Startseite
   - .subhero  · kompakter Page-Hero für Unterseiten
   - .kenburns · slow zoom & pan, respektiert reduce-motion
   - .slider   · scroll-snap Carousel + Pagination + Progress
   - Sport-Tile-Foto · Foto-Hintergrund für jede Sportart-Kachel
   ============================================================= */

/* ---------- Foto-Tile-Variante für Sportkacheln ---------- */
.sport--photo {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border-color: var(--line-ink);
  isolation: isolate;
}
.sport--photo .sport__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.55) saturate(1.05);
  transition: transform 0.6s ease, filter 0.3s ease;
}
.sport--photo:hover .sport__media {
  transform: scale(1.06);
  filter: brightness(0.65) saturate(1.1);
}
.sport--photo > *:not(.sport__media) { position: relative; z-index: 1; }
.sport--photo .sport__name { color: var(--paper); }
.sport--photo .sport__num,
.sport--photo .sport__count { color: color-mix(in srgb, var(--on-media) 85%, transparent); }
.sport--photo[data-cat="mannschaft"] .sport__name,
.sport--photo[data-cat="outdoor"] .sport__name { color: var(--paper); }
.sport--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

.sport--photo .sport__name,
.sport--photo .sport__num,
.sport--photo .sport__count {
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}

.sport--photo .sport__num,
.sport--photo .sport__count {
  width: fit-content;
  padding: .38em .58em;
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  text-shadow: none;
}

/* ---------- Photo-Band (Startseiten-Foto-Streifen) ---------- */
.photoband {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: var(--gap-3);
  padding-block: var(--gap-7);
}
.photoband__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 2px solid var(--line-ink);
  background: var(--ink);
}
.photoband__tile-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.photoband__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.photoband__tile:hover img { transform: scale(1.04); }
.photoband__lightbox {
  position: absolute;
  top: var(--gap-3);
  right: var(--gap-3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.photoband__lightbox:hover {
  color: var(--paper);
  background: var(--ink);
  transform: scale(1.05);
}
.photoband__lightbox:focus-visible {
  color: var(--paper);
  background: var(--ink);
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.tgk-gallery__lightbox {
  display: block;
  color: inherit;
  text-decoration: none;
}
.fancybox__slide.is-selected .f-panzoom__wrapper > .f-panzoom__content.is-lazyloaded {
  visibility: visible;
}
.member-photos .tgk-gallery__lightbox {
  width: 100%;
  height: 100%;
}
.photoband__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.photoband__tile-label {
  position: absolute;
  bottom: var(--gap-4);
  left: var(--gap-4);
  right: var(--gap-4);
  z-index: 1;
  color: var(--on-media);
  display: grid;
  gap: 4px;
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}
.photoband__tile-label small {
  width: fit-content;
  padding: .42em .6em;
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.photoband__tile-label strong {
  font-family: var(--font-display);
  font-size: calc(clamp(22px, 2.6vw, 32px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.photoband__tile--lead {
  grid-row: span 2;
}
@media (max-width: 880px) {
  .photoband {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
  }
  .photoband__tile--lead { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
  .photoband {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 200px);
  }
  .photoband__tile--lead { grid-column: span 1; }
}

/* ---------- Mosaik-Galerie (Verein-Unterseite + Mitglied-Block) ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: var(--gap-3);
}
.mosaic figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--line-ink);
}
.mosaic figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: auto;
  width: fit-content;
  max-width: 100%;
  padding: var(--gap-3);
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}
.mosaic--a figure:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.mosaic--a figure:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.mosaic--a figure:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.mosaic--a figure:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.mosaic--a figure:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.mosaic--a figure:nth-child(6) { grid-column: span 2; grid-row: span 1; }
.mosaic--a figure:nth-child(7) { grid-column: span 2; grid-row: span 1; }
@media (max-width: 880px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .mosaic figure:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .mosaic--a figure:nth-child(1) { grid-column: span 2; }
}

/* ---------- Anlage-Vollbild (Verein-Unterseite) ---------- */
.club-anlage-figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--line-ink);
  position: relative;
}
.club-anlage-figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.club-anlage-figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--gap-4);
  border-top-right-radius: var(--r-md);
  background: var(--image-text-bg);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}
@media (max-width: 880px) {
  .club-anlage-figure img { aspect-ratio: 4 / 3; }
}

/* ---------- Detail-Still (einzelnes Zwischenbild, z.B. Mitglied werden) ---------- */
.detail-still {
  margin: var(--gap-7) auto 0;
  max-width: 640px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--line-ink);
}
.detail-still img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.detail-still figcaption {
  padding: var(--gap-3) var(--gap-4);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 2px solid var(--line-ink);
}

.membership-collage {
  margin-top: var(--gap-7);
}

.membership-intro-section {
  padding-bottom: 0;
}

.membership-gallery-section {
  padding-top: 0;
}

/* ---------- Mitglied-Foto-Trio ---------- */
.member-photos {
  margin-top: var(--gap-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-3);
}
.member-photos figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--line-ink);
  background: var(--ink);
}
.member-photos figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.member-photos figure:hover img { transform: scale(1.05); }
.member-photos figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--gap-5);
  background: transparent;
  color: var(--paper);
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 7px 18px rgba(0,0,0,0.58);
}
.member-photos figcaption small {
  display: block;
  width: fit-content;
  padding: .42em .6em;
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.member-photos figcaption strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: calc(clamp(20px, 2.4vw, 28px) * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* A source section may contain an editorial image strip after its card grid.
   TYPO3 keeps that strip as a separate, human-editable gallery element. This
   composition wrapper preserves the source section rhythm without coupling
   the two backend records or hiding either element. */
.sports-stills-followup {
  margin-block-start: calc(-1 * var(--gap-7));
  margin-block-end: var(--gap-9);
}
.sports-stills-followup .member-photos {
  margin-top: 0;
}
@media (max-width: 720px) {
  .sports-stills-followup {
    margin-block-start: 0;
  }
  .member-photos { grid-template-columns: 1fr; }
  .member-photos figure { aspect-ratio: 5 / 4; }
}

/* ---------- Page-Subhero (Unterseiten-Standard) ---------- */
.subhero {
  position: relative;
  min-height: 64vh;
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.subhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.subhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
}
.subhero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 64vh;
  padding-top: 120px;
  padding-bottom: var(--gap-7);
  gap: var(--gap-6);
}
.subhero__kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--gap-3);
  width: fit-content;
  padding: .5em .7em;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--image-text-bg);
  opacity: 1;
  text-shadow: none;
}
.subhero__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--red);
}
.subhero__title {
  font-family: var(--font-display);
  font-size: calc(clamp(48px, 9vw, 132px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  align-self: end;
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 10px 32px rgba(0,0,0,0.58);
}
.subhero__title .accent { color: var(--red); display: block; }
.subhero__claim {
  width: fit-content;
  justify-self: start;
  padding: .38em .58em;
  font-family: var(--font-display);
  font-size: calc(clamp(18px, 2.2vw, 28px) * var(--font-scale, 1));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  max-width: 32ch;
  background: var(--image-text-bg);
  text-shadow: none;
}
.subhero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-6);
  flex-wrap: wrap;
  padding-top: var(--gap-5);
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: var(--gap-5);
}
.subhero__foot-item {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-media) 85%, transparent);
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 8px 24px rgba(0,0,0,0.58);
}
.subhero__foot-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: calc(24px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-top: 4px;
}

/* ---------- Ken Burns · Slow Zoom & Pan ---------- */
.kenburns {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.kenburns img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns-pan 22s ease-in-out infinite alternate;
  transform-origin: center 30%;
  will-change: transform;
}
@keyframes kenburns-pan {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  50%  { transform: scale(1.10) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1.18) translate3d(1.5%, 1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kenburns img { animation: none; transform: none; }
}

/* ---------- Breadcrumbs · für Unterseiten ---------- */
.crumbs {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  display: flex;
  gap: var(--gap-3);
  align-items: center;
  flex-wrap: wrap;
}
.crumbs a {
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
}
.crumbs a:hover { color: var(--red); opacity: 1; }
.crumbs span[aria-hidden] {
  color: rgba(255,255,255,0.5);
  font-family: var(--font-display);
}

/* ---------- Quick-Facts (Sidebar) ---------- */
.quick-facts {
  background: var(--green-deep);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--gap-6);
  display: grid;
  gap: var(--gap-4);
  align-content: start;
}
.quick-facts h3 {
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.quick-facts dl {
  display: grid;
  gap: var(--gap-3);
  margin: 0;
}
.quick-facts dt {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.quick-facts dd {
  margin: 2px 0 var(--gap-3);
  padding-bottom: var(--gap-3);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.quick-facts dd:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.quick-facts__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 12px 16px;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(13px * var(--font-scale, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-md);
  border: 2px solid var(--red);
  margin-top: var(--gap-2);
}
.quick-facts__cta:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* ---------- Subpage-Layout (Editorial-2-Spalter) ---------- */
.subpage {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--gap-7);
  align-items: start;
}
@media (max-width: 880px) { .subpage { grid-template-columns: 1fr; } }

.subpage__lede {
  font-family: var(--font-display);
  font-size: calc(clamp(24px, 2.6vw, 34px) * var(--font-scale, 1));
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--gap-5);
  max-width: 22ch;
}
/* Aufgabe 6 (07.08.2026): einheitliche Behandlung aller Fliesstext-Bloecke.
   Der Container traegt Mass + Zentrierung, damit ein Textblock nicht mehr
   linksbuendig in einer schmalen Spalte mit leerer rechter Haelfte steht.
   Ab 881px zweispaltig per CSS columns, darunter automatisch einspaltig.
   Die Klasse wird sowohl auf mehrabsaetzige Bloecke (verein.php, kontakt.php)
   als auch direkt auf einzelne <p> (sport-detail.php .sport-intro) gesetzt. */
.subpage__body {
  max-width: var(--measure-body);
  margin-inline: auto;
  text-align: left;
}
.subpage__body,
.subpage__body p {
  font-size: calc(var(--fs-body-lg) * var(--font-scale, 1));
  line-height: 1.6;
  color: var(--ink-soft);
}
.subpage__body p {
  max-width: none;
}
@media (min-width: 881px) {
  .subpage__body {
    columns: 2;
    column-gap: var(--gap-7);
  }
}
.subpage__body--single {
  columns: auto;
}
.subpage__body--compact {
  max-width: 68ch;
  margin-inline: 0;
}
.subpage__body--paired {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-7);
  align-items: start;
}
.subpage__body--paired > div {
  min-width: 0;
}
.subpage__body--paired > div > :first-child {
  margin-top: 0;
}
@media (max-width: 880px) {
  .subpage__body--paired { grid-template-columns: 1fr; }
}
.subpage__body h3 {
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 3.4vw, 40px) * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: var(--gap-6) 0 var(--gap-3);
}
.subpage__pullquote {
  margin: var(--gap-7) 0;
  padding-left: var(--gap-5);
  border-left: 4px solid var(--red);
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 3.6vw, 42px) * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.subpage__pullquote cite {
  display: block;
  margin-top: var(--gap-3);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Trainings-Tabelle (Sportart-Detailseite) ---------- */
.schedule {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  border-top: 2px solid var(--line-ink);
}
.schedule th,
.schedule td {
  text-align: left;
  padding: var(--gap-3) var(--gap-3);
  border-bottom: 1px solid var(--line);
}
.schedule th {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.schedule td {
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.schedule .schedule__age {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Beitragstabelle (L3: mitglied-werden.php, erste aktiv
   genutzte <table> im Prototyp) ---------- */
.fee-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}
.fee-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
}
.fee-table th,
.fee-table td {
  padding: var(--gap-3) var(--gap-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.fee-table thead th {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fee-table tbody th[scope="row"] {
  font-weight: 700;
}
.fee-table tbody td {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.fee-table tbody tr:last-child th,
.fee-table tbody tr:last-child td {
  border-bottom: none;
}
.schedule__row--ground td {
  background: var(--green-deep);
  color: var(--paper);
}
.schedule__row--ground td:first-child { color: var(--red); }
@media (max-width: 720px) {
  .schedule th { display: none; }
  .schedule tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-2);
    padding: var(--gap-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .schedule td { padding: 0; border: none; font-size: calc(14px * var(--font-scale, 1)); }
}

/* ---------- Trainer-Karten ---------- */
.coaches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-4);
}
@media (max-width: 720px) { .coaches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .coaches { grid-template-columns: 1fr; } }
.coach {
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  display: grid;
  gap: var(--gap-3);
  align-content: start;
}
.coach__avatar {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  letter-spacing: 0;
  border-radius: var(--r-md);
}
.coach__role {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.coach__name {
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.coach__meta {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================
   SLIDER · scroll-snap + Pagination + Progress
   Full-bleed horizontaler Foto-Slider.
   ============================================================= */
.slider {
  position: relative;
  background: var(--green-deep);
  color: var(--paper);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 2px solid var(--line-ink);
}
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: clamp(440px, 64vh, 720px);
  overflow: hidden;
  isolation: isolate;
}
.slide img,
.slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.slide__caption {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: var(--gap-6);
  display: grid;
  gap: var(--gap-3);
  width: min(100%, 900px);
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 8px 24px rgba(0,0,0,0.58);
  color: var(--paper);
}
.slide__caption .eyebrow {
  color: var(--red);
}
.slide__caption h3 {
  font-family: var(--font-display);
  font-size: calc(clamp(34px, 5vw, 64px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  max-width: 22ch;
}
.slide__caption p {
  margin: 0;
  font-size: calc(15px * var(--font-scale, 1));
  max-width: 56ch;
  color: rgba(255,255,255,0.92);
}
.slide__index {
  position: absolute;
  z-index: 1;
  top: var(--gap-5);
  right: var(--gap-6);
  font-family: var(--font-display);
  font-size: calc(clamp(48px, 8vw, 120px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--paper);
  opacity: 0.85;
}
.slide__index small {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: 0.18em;
  vertical-align: top;
  margin-left: 6px;
  color: rgba(255,255,255,0.7);
}

.slider__controls {
  position: absolute;
  bottom: var(--gap-5);
  left: var(--gap-6);
  right: var(--gap-6);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--gap-4);
  z-index: 2;
}
.slider__dots {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
.slider__dot {
  width: 56px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.slider__dot:hover { background: rgba(255,255,255,0.55); }
.slider__dot.is-active {
  background: rgba(255,255,255,0.18);
}
.slider__dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform-origin: left;
  animation: slider-progress var(--slide-dur, 6s) linear forwards;
}
.slider__dot:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}
@keyframes slider-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .slider__dot.is-active::after { animation: none; transform: scaleX(1); }
}

.slider__nav {
  display: flex;
  gap: var(--gap-2);
}
.slider__nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: calc(20px * var(--font-scale, 1));
  display: grid;
  place-items: center;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.slider__nav button:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
.slider__nav button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
@media (max-width: 720px) {
  .slider__controls {
    left: var(--gap-4);
    right: var(--gap-4);
    bottom: var(--gap-4);
  }
  .slide__caption { padding: var(--gap-4) var(--gap-4) calc(var(--gap-7) + var(--gap-2)); }
  .slider__nav button { width: 40px; height: 40px; }
  .slider__dot { width: 36px; }
}

/* =============================================================
   Programm-Tabelle (Sommerfest)
   ============================================================= */
.program {
  display: grid;
  gap: 1px;
  background: var(--line-ink);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.program__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--gap-4);
  align-items: center;
  background: var(--paper);
  padding: var(--gap-4) var(--gap-5);
}
.program__row time {
  font-family: var(--font-display);
  font-size: calc(24px * var(--font-scale, 1));
  letter-spacing: 0.04em;
  color: var(--red);
}
.program__row strong {
  font-family: var(--font-display);
  font-size: calc(18px * var(--font-scale, 1));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.program__row small {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 2px;
}
.program__row .tag {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
}
@media (max-width: 720px) {
  .program__row {
    grid-template-columns: 1fr;
    gap: var(--gap-2);
  }
  .program__row .tag { justify-self: start; }
}

/* =============================================================
   Reduced motion (am Ende, damit Overrides greifen)
   ============================================================= */
/* ------------------- Reduced motion ------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .slider__track { scroll-behavior: auto; }
}

/* =============================================================
   Prototyp-Ergänzungen, 2026-05-30
   ============================================================= */

html {
  overflow-x: hidden;
}

body { overflow-x: hidden; }

.wrap > *,
.section-head > *,
.cta-panel > *,
.split-feature > *,
.card-row > *,
.team-grid > *,
.training-grid > *,
.timeline-grid > *,
.legal-grid > *,
.sport-grid > * {
  min-width: 0;
}

p,
.lede,
.btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body[data-theme="dark"] {
  --ink: #F7F6F0;
  --ink-soft: #D8D4C8;
  --paper: #141414;
  --paper-soft: #20201D;
  --paper-band: #282620;
  --tgk-longform-accent: #FFB8C5;
  --muted: #B7B1A4;
  --line: #3B3932;
  --line-ink: #ECEAE3;
  background: var(--paper);
  color: var(--ink);
}

body[data-contrast="high"] {
  --red: #E60023;
  --red-deep: #B4001B;
  --ink: #000000;
  --paper: #FFFFFF;
  --muted: #222222;
  --line: #000000;
  --line-ink: #000000;
}

body[data-theme="dark"][data-contrast="high"] {
  --ink: #FFFFFF;
  --paper: #000000;
  --paper-soft: #111111;
  --muted: #FFFFFF;
  --tgk-longform-accent: var(--ink);
  --line: #FFFFFF;
  --line-ink: #FFFFFF;
}

body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

body[data-language="easy"] .eyebrow {
  letter-spacing: 0.06em;
}

.skip-link {
  position: fixed;
  z-index: 300;
  left: var(--gap-4);
  top: var(--gap-4);
  transform: translateY(-140%);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--red);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

.scroll-top {
  position: fixed;
  z-index: 90;
  right: var(--gap-4);
  bottom: calc(var(--gap-4) + 64px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--line-ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.brand-year {
  opacity: .7;
  font-weight: 500;
}

.nav__links a.active {
  color: var(--red);
  opacity: 1;
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  color: inherit;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.tgk-source-strip {
  background: var(--red);
  color: var(--paper);
}
.tgk-source-strip .dot { background: var(--paper); }

.page-hero {
  min-height: 72vh;
  display: grid;
  align-items: end;
  padding: 160px 0 var(--gap-8);
  background: var(--paper-band);
  overflow: hidden;
}
.page-hero--compact {
  min-height: 46vh;
  background: var(--paper-soft);
}
.page-hero--image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.02);
}
.page-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}
.page-hero__content {
  position: relative;
  z-index: 1;
  color: var(--on-media);
  display: grid;
  gap: var(--gap-4);
  max-width: var(--max-w);
}

.page-hero--image .page-hero__content {
  text-shadow: 0 2px 3px rgba(0,0,0,0.82), 0 10px 32px rgba(0,0,0,0.58);
}
.page-hero--compact .page-hero__content {
  color: var(--ink);
}
.page-hero__content h1 {
  font-size: calc(clamp(52px, 10vw, 130px) * var(--font-scale, 1));
  max-width: 10ch;
}

main[data-legal-page="true"] .page-hero__content h1 {
  max-width: 18ch;
}
.page-hero__content p {
  font-size: calc(20px * var(--font-scale, 1));
  max-width: 62ch;
}

.page-hero--image .page-hero__content > .eyebrow,
.page-hero--image .page-hero__content > p {
  width: fit-content;
  justify-self: start;
  padding: .38em .58em;
  border-radius: var(--r-md);
  background: var(--image-text-bg);
  text-shadow: none;
}

.page-hero--image .page-hero__content > .eyebrow {
  padding: .5em .7em;
}

body[data-page="sponsoren"] .page-hero__content > h1 {
  max-width: 12ch;
}

body[data-page="mitglied"] .page-hero__content > h1 {
  max-width: 11ch;
}

.sport-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-5);
}
.sport-grid--columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sport-card {
  min-height: 100%;
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sport-card a {
  display: grid;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}
.sport-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 2px solid var(--line-ink);
}
.sport-card__content {
  padding: var(--gap-5);
  display: grid;
  align-content: start;
  gap: var(--gap-3);
}
.team-card h3,
.info-card h3,
.timeline-card h3,
.training-card h3 {
  font-size: calc(clamp(28px, 3vw, 42px) * var(--font-scale, 1));
}
.team-card h3.youth-team__title {
  text-transform: none;
}
.sport-card h3 {
  /* Smaller clamp than the shared card title so longer labels
     (e.g. "Sport für Erwachsene") wrap onto a second line instead
     of overflowing the fixed-width tile. */
  font-size: calc(clamp(22px, 2.2vw, 34px) * var(--font-scale, 1));
  line-height: 1.08;
  overflow-wrap: break-word;
}
.sport-card p,
.sport-card small {
  color: var(--ink-soft);
}
.sport-card small {
  font-weight: 800;
}

/* Pitchdeck-QRs: ruhige Druckdaten-Ebene direkt vor dem Footer. Die beiden
   QR-Codes bleiben quadratisch und scanbar; der generische 4:3-Kartencrop
   gilt hier bewusst nicht. Downloads bleiben ein Core-Uploads-Element. */
.section[data-ce-source="tgk26.pitchdeck.qr-hub"] {
  padding-block: var(--gap-8) var(--gap-6);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] > .ce-cards__header,
.section[data-ce-source="tgk26.pitchdeck.qr-hub"] > .sport-grid,
.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] > .min-header,
.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] > .ce-uploads {
  width: min(calc(100% - (2 * var(--gutter))), var(--pitch-qr-max-w));
  margin-inline: auto;
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] > .ce-cards__header {
  margin-bottom: var(--gap-7);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__title {
  max-width: 17ch;
  font-size: calc(clamp(36px, 4.5vw, 56px) * var(--font-scale, 1));
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__subtitle {
  max-width: 52ch;
  margin: var(--gap-3) 0 0;
  color: var(--ink-soft);
  font-size: calc(clamp(17px, 1.6vw, 20px) * var(--font-scale, 1));
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .sport-grid {
  gap: var(--gap-6);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .sport-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border-radius: var(--r-md);
  box-shadow: none;
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-image {
  display: grid;
  place-items: center;
  padding: var(--gap-6);
  border-bottom: 2px solid var(--line-ink);
  background: var(--pitch-qr-canvas);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__img {
  width: min(100%, var(--pitch-qr-image-max));
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border: 0;
  object-fit: contain;
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-3);
  padding: var(--gap-5);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-title {
  font-size: calc(clamp(28px, 3vw, 38px) * var(--font-scale, 1));
  line-height: 1.05;
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-title a {
  text-decoration-thickness: 2px;
  text-underline-offset: var(--gap-2);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-text {
  margin: 0;
  color: var(--ink-soft);
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-tag {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: auto;
  padding: var(--gap-3) var(--gap-4);
  border: 2px solid var(--red);
  border-radius: var(--r-md);
  background: var(--red);
  color: var(--on-media);
  font-weight: 800;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-tag:hover,
.section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-tag:focus-visible {
  border-color: var(--red-deep);
  background: var(--red-deep);
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] {
  padding-block: 0 var(--gap-9);
  background: var(--paper);
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] > .min-header {
  padding-top: var(--gap-6);
  border-top: 1px solid var(--line);
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .min-header__title {
  font-size: calc(clamp(28px, 3vw, 38px) * var(--font-scale, 1));
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .min-header__subtitle {
  max-width: 58ch;
  margin: var(--gap-2) 0 0;
  color: var(--ink-soft);
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3);
  margin-block: var(--gap-5) 0;
  padding: 0;
  list-style: none;
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads li,
.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads li > div {
  min-width: 0;
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads a {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-md);
  background: var(--paper-soft);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads a::before {
  content: "↓";
  flex: 0 0 auto;
  color: var(--red);
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  line-height: 1;
}

.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads a:hover,
.section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads a:focus-visible {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .section[data-ce-source="tgk26.pitchdeck.qr-hub"] {
    padding-block: var(--gap-7) var(--gap-5);
  }

  .section[data-ce-source="tgk26.pitchdeck.qr-hub"] .sport-grid,
  .section[data-ce-source="tgk26.pitchdeck.qr-downloads"] .ce-uploads {
    grid-template-columns: 1fr;
  }

  .section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__card-image {
    padding: var(--gap-5);
  }

  .section[data-ce-source="tgk26.pitchdeck.qr-hub"] .ce-cards__img {
    width: min(100%, 280px);
  }

  .section[data-ce-source="tgk26.pitchdeck.qr-downloads"] {
    padding-bottom: var(--gap-8);
  }
}

.training-grid,
.team-grid,
.timeline-grid,
.card-row,
.legal-grid,
.tgk-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-5);
}
.training-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Modifier fuer Karten-Reihen mit nur 1 Eintrag (L3/L6: Download-Kachel,
   Ansprechpartner-Kachel, Adress-Kachel) — zentriert statt linksbuendig in
   Spalte 1 verloren zu wirken. Compound-Selektor haelt die Spezifitaet ueber
   der Basis-Regel UND allen bestehenden Responsive-Overrides. */
.card-row.card-row--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
.training-card,
.team-card,
.info-card,
.timeline-card,
.stat-card {
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  min-height: 100%;
}
.training-card p,
.team-card p,
.info-card p,
.timeline-card p,
.stat-card span {
  color: var(--ink-soft);
}
.info-card address {
  font-style: normal;
  color: var(--ink-soft);
}
.stat-card {
  display: grid;
  gap: var(--gap-3);
}
.stat-card strong {
  font-family: var(--font-display);
  font-size: calc(clamp(36px, 5vw, 72px) * var(--font-scale, 1));
  line-height: 1.05;
  color: var(--red);
}
.stat-card--link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.stat-card--link:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.stat-card--link:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: var(--gap-7);
}
.split-feature--reverse {
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1fr);
}
.split-feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}
/* Hochformat-Video im Split-Layout: die Handyaufnahme wuerde in voller Spalten-
   breite die Sektion sprengen, deshalb gedeckelte Hoehe und mittige Ausrichtung.
   Gleiche Rahmensprache wie das Bild daneben. */
.split-feature__video {
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 560px);
  justify-self: center;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--paper-band);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}
@media (max-width: 760px) {
  .split-feature__video {
    max-height: min(60vh, 440px);
  }
}
.split-feature h2,
.cta-panel h2 {
  font-size: calc(clamp(42px, 6vw, 78px) * var(--font-scale, 1));
}
.cta-panel {
  display: grid;
  gap: var(--gap-5);
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: clamp(24px, 5vw, 64px);
}

.tgk-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: var(--gap-8) 0 var(--gap-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(2, 1fr);
  gap: var(--gap-6);
}
.footer-col__title {
  margin: 0 0 var(--gap-3);
  font-family: var(--font-display);
  font-size: calc(22px * var(--font-scale, 1));
  text-transform: uppercase;
}
.footer-col p,
.footer-col li {
  color: var(--footer-fg-muted);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-2);
}
.footer-col a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.footer-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: var(--gap-3);
}
.footer-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-4);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: var(--gap-7);
  padding-top: var(--gap-4);
  color: var(--footer-fg-muted);
}
.footer-bar a {
  color: inherit;
  margin-left: var(--gap-4);
}

/* ---------- Social-Icon-Leisten: gemeinsame Basis (L5 + L7) ----------
   .footer-social (Footer, includes/footer.php) und .news-social
   (termine.php, "01 · News") teilen sich Layout/Größe/Touch-Target hier;
   nur die Farbwelt unterscheidet sich je nach Hintergrund (--ink im
   Footer, --paper auf der Aktuelles-Seite). */
.footer-social,
.news-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-5);
}

.footer-social__link,
.news-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.footer-social__link svg,
.news-social__link svg {
  width: 22px;
  height: 22px;
}

/* Footer-Kontext: helle Icons auf --ink-Fläche */
.footer-social__link {
  color: var(--footer-fg-muted);
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 14%, transparent);
}
.footer-social__link:focus-visible {
  outline-color: var(--paper);
  outline-offset: 2px;
}

/* Aktuelles-Kontext: gedämpfte Icons auf --paper-Fläche */
.news-social__link {
  color: var(--muted);
}
.news-social__link:hover,
.news-social__link:focus-visible {
  color: var(--red);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.news-social__link:focus-visible {
  outline-color: var(--line-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .footer-social__link,
  .news-social__link {
    transition: none;
  }
}

/* Das Entwurfsoptionen-Panel schwebt fest ueber der Seite und legt sich am
   Seitenende sonst genau ueber die Fusszeile mit Impressum, Datenschutz und
   Barrierefreiheit. Der Footer bekommt deshalb Luft nach unten, solange das
   Panel vorhanden ist — in TYPO3 faellt es weg und damit auch die Reserve. */
body:has(.tgk-style-switcher) .tgk-footer {
  padding-bottom: 120px;
}
@media (max-width: 760px) {
  body:has(.tgk-style-switcher) .tgk-footer {
    padding-bottom: 148px;
  }
}

.tgk-style-switcher {
  position: fixed;
  z-index: 120;
  right: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 24px));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 52px rgba(0,0,0,.22);
  overflow: hidden;
  font-size: calc(15px * var(--font-scale, 1));
}
.tgk-style-switcher__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}
.tgk-style-switcher__toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink);
  font-size: calc(20px * var(--font-scale, 1));
  line-height: 1.05;
}
.tgk-style-switcher__body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
  max-height: min(72vh, 620px);
  overflow-y: auto;
}
.tgk-style-switcher__body[hidden] {
  display: none;
}
.ss-section {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ss-radios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ss-radios-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ss-radios--navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ss-radios--navigation button:last-child {
  grid-column: 1 / -1;
}
.ss-radios button {
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ss-radios button[aria-pressed="true"] {
  background: rgba(200,16,46,.14);
  border-color: var(--red);
  color: var(--red);
}

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

@media (max-width: 1100px) {
  .sport-grid,
  .training-grid,
  .team-grid,
  .timeline-grid,
  .card-row,
  .legal-grid,
  .tgk-feature-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split-feature,
  .split-feature--reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  /* --gap-9 only drives the vertical section rhythm (.section padding-block)
     and the top hero padding (.hero__grid) - halving it here shortens the
     mobile page without touching the desktop values. */
  :root {
    --gutter: 18px;
    --gap-9: 48px;
  }
  .nav { padding: var(--gap-3) 0; }
  .nav__links {
    position: fixed;
    inset: 72px 14px auto 14px;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--line-ink);
    border-radius: var(--r-lg);
    padding: var(--gap-2);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
  }
  .nav__links.is-open { display: grid; }
  .nav__links a {
    padding: 13px 12px;
    border-radius: var(--r-md);
  }
  .nav-toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .hero { min-height: 92vh; }
  .hero__foot { grid-template-columns: repeat(2, 1fr); }
  .page-hero {
    min-height: 68vh;
    padding-top: 118px;
  }
  .page-hero__content h1,
  .section-head__title,
  .split-feature h2,
  .cta-panel h2 {
    font-size: calc(clamp(34px, 10vw, 54px) * var(--font-scale, 1));
  }
  .btn {
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .sport-grid,
  .training-grid,
  .team-grid,
  .timeline-grid,
  .card-row,
  .legal-grid,
  .tgk-feature-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .tgk-style-switcher {
    right: 12px;
    bottom: 12px;
  }
  .footer-bar a {
    margin-left: 0;
    margin-right: var(--gap-4);
  }
}

@media (max-width: 880px) {
  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__links--standard {
    position: fixed;
    inset: 72px 14px auto 14px;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--line-ink);
    border-radius: var(--r-lg);
    padding: var(--gap-2);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__links--standard.is-open {
    display: grid;
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav-toggle--standard {
    display: inline-flex;
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__cta {
    display: none;
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__links--standard a {
    padding: 13px 12px;
    border-radius: var(--r-md);
  }
}

/* ------------------- Navigationsvarianten ------------------- */
body:not([data-nav-mode="mega"]) .mega-nav,
body:not([data-nav-mode="offcanvas"]) .nav-toggle--offcanvas {
  display: none;
}

body[data-nav-mode="mega"] .nav__links--standard,
body[data-nav-mode="mega"] .nav-toggle--standard,
body[data-nav-mode="offcanvas"] .nav__links--standard,
body[data-nav-mode="offcanvas"] .nav-toggle--standard,
body[data-nav-mode="offcanvas"] .mega-nav {
  display: none;
}

body[data-nav-mode="mega"] .mega-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.mega-nav__topline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  color: currentColor;
}

.mega-nav__topline span {
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.mega-nav__panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: min(1180px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(-8px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-5);
  padding: var(--gap-5);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line-ink);
  border-top: 4px solid var(--red);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

/* Geoeffnet wird ausschliesslich ueber data-open, gesetzt per JS: Hover mit
   Absichtsverzoegerung, Klick zum Anheften, Tastatur. Weder :hover noch
   :focus-within stehen im Selektor — :hover riss auf dem Weg zum Panel ab,
   und :focus-within hielt es offen, waehrend Escape es schliessen wollte. */
.mega-nav[data-open="true"] .mega-nav__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.mega-nav__group h2,
.offcanvas-nav__group h2 {
  margin: 0 0 var(--gap-3);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mega-nav__group ul,
.offcanvas-nav__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-2);
}

.mega-nav__group a,
.offcanvas-nav__group a {
  display: block;
  min-height: 36px;
  padding: 7px 0;
  color: inherit;
  font-size: calc(15px * var(--font-scale, 1));
  font-weight: 800;
  text-decoration: none;
}

.mega-nav__group a:hover,
.mega-nav__group a.active,
.offcanvas-nav__group a:hover,
.offcanvas-nav__group a.active {
  color: var(--red);
}

body[data-nav-mode="offcanvas"] .nav-toggle--offcanvas {
  display: inline-flex;
}

body.is-offcanvas-open {
  overflow: hidden;
}

.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,.48);
}

.offcanvas-backdrop[hidden] {
  display: none;
}

.offcanvas-nav {
  position: fixed;
  z-index: 130;
  top: 0;
  right: 0;
  width: min(400px, calc(100vw - 24px));
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap-4);
  padding: var(--gap-5);
  background: var(--paper);
  color: var(--ink);
  border-left: 4px solid var(--red);
  box-shadow: -24px 0 80px rgba(0,0,0,.35);
  transform: translateX(104%);
  transition: transform .22s ease;
}

body.is-offcanvas-open .offcanvas-nav {
  transform: translateX(0);
}

.offcanvas-nav__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
  padding-bottom: var(--gap-4);
  border-bottom: 1px solid var(--line);
}

.offcanvas-nav__head strong {
  display: block;
  font-family: var(--font-display);
  font-size: calc(34px * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
}

.offcanvas-nav__close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-ink);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink);
  font-size: calc(28px * var(--font-scale, 1));
  line-height: 1.05;
}

.offcanvas-nav__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: var(--gap-5);
  padding-right: 4px;
}

.offcanvas-nav__cta {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--red);
  color: var(--paper);
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  body[data-nav-mode="mega"] .mega-nav {
    display: none;
  }

  body[data-nav-mode="mega"] .nav-toggle--offcanvas {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav-toggle--offcanvas {
    display: none;
  }

  body[data-nav-mode="offcanvas"] .nav-toggle--standard,
  body[data-nav-mode="mega"] .nav-toggle--standard {
    display: none;
  }

  .offcanvas-nav {
    width: min(360px, calc(100vw - 16px));
    padding: var(--gap-4);
  }
}

/* =============================================================
   Relaunch-Präzisierung 2026-07-14
   Bestehende visuelle Linie bleibt erhalten; Navigation, Records
   und Redaktionsmodule werden barrierefrei und TYPO3-first ergänzt.
   ============================================================= */

.nav {
  padding-block: 10px;
}

.nav.is-pinned {
  padding-block: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.nav__inner {
  min-height: 104px;
  gap: clamp(12px, 1.5vw, 28px);
}

.nav__brand {
  flex: 0 0 auto;
  font-size: calc(20px * var(--font-scale, 1));
}

.nav__crest {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  padding: 5px;
}

.nav__brand-copy {
  max-width: 150px;
  line-height: 1.05;
  padding: 7px 9px;
  border-radius: var(--r-md);
  background: var(--image-text-bg);
}

.nav__links--standard {
  align-self: stretch;
  overflow: visible;
}

.nav-list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Der Außenabstand gehört der Liste – nie dem einzelnen Menüpunkt. So
     bleiben Einträge mit und ohne Untermenü im gleichen Rhythmus. */
  gap: clamp(10px, 1vw, 16px);
  list-style: none;
  margin: 0;
  padding: 4px;
  border-radius: var(--r-md);
  background: rgba(9, 16, 12, .7);
  border: 1px solid rgba(255, 255, 255, .16);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nav-item__topline {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  border-radius: var(--r-sm);
  color: var(--on-media);
  box-shadow: inset 0 0 0 transparent;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Punkte ohne Untermenü erhalten keine künstliche Leerfläche. Der einheitliche
   Abstand kommt ausschließlich aus .nav-list. */
.nav-item:not([data-nav-dropdown]) > .nav-item__topline {
  /* Derselbe Endraum wie beim 44px-Dropdown-Button hält die Fußabdrücke und
     damit den sichtbaren Rhythmus aller Hauptpunkte gleich. */
  padding-inline-end: 44px;
}

.nav__links .nav-item__link,
.nav-submenu-toggle,
.mega-nav__trigger {
  font-size: calc(15px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .045em;
}

.nav__links .nav-item__link {
  display: flex;
  min-height: 48px;
  align-items: center;
  margin-inline: 0;
  padding-inline: 12px;
  border-radius: 0;
  background: transparent;
}

.nav-item.is-active > .nav-item__topline .nav-item__link {
  color: var(--red);
  opacity: 1;
}

.nav-item[data-open="true"] > .nav-item__topline,
.nav-item > .nav-item__topline:hover,
.nav-item:focus-within > .nav-item__topline {
  background: rgba(255, 255, 255, .12);
  color: var(--on-media);
}

.nav-item.is-active > .nav-item__topline {
  background: transparent;
  color: var(--on-media);
  box-shadow: inset 0 -4px 0 var(--red);
}

.nav__links .nav-item__topline .nav-item__link:hover,
.nav__links .nav-item__topline .nav-item__link:focus-visible,
.nav-item.is-active > .nav-item__topline .nav-item__link:hover,
.nav-item.is-active > .nav-item__topline .nav-item__link:focus-visible {
  background: transparent;
  color: inherit;
}

.nav-submenu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: currentColor;
}

.nav-submenu-toggle span,
.mega-nav__trigger span:last-child {
  display: inline-block;
  transition: transform .18s ease;
}

.nav-item[data-open="true"] .nav-submenu-toggle span,
.mega-nav[data-open="true"] .mega-nav__trigger span:last-child {
  transform: rotate(180deg);
}

@media (min-width: 1221px) {
  /* Der sichtbare Pfeil rückt an sein Wort. Der Button selbst bleibt ein
     eigenständiges 44px-Ziel; Link und Toggle überlappen weder beim Klicken
     noch im Fokuszustand. Diese Regeln stehen nach dem generischen Open-State,
     damit der Pfeil beim Öffnen nicht seitlich springt. */
  .nav-submenu-toggle span {
    transform: translateX(-8px);
  }

  .nav-item[data-open="true"] .nav-submenu-toggle span {
    transform: translateX(-8px) rotate(180deg);
  }
}

.nav-submenu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  min-width: 248px;
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line-ink);
  border-top: 4px solid var(--red);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.nav-item[data-open="true"] > .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-submenu li,
.nav-submenu a {
  width: 100%;
}

.nav__links .nav-submenu a {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: calc(14px * var(--font-scale, 1));
  white-space: normal;
}

.nav__links .nav-submenu a:hover,
.nav__links .nav-submenu a:focus-visible,
.nav__links .nav-submenu a.active {
  background: var(--paper-soft);
  color: var(--red);
}

.nav__cta {
  min-height: 48px;
  padding-inline: 18px;
  font-size: calc(13px * var(--font-scale, 1));
}

.mega-nav__trigger {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px auto;
  border: 1px solid currentColor;
  border-radius: var(--r-md);
  padding: 0 18px;
  background: var(--image-text-bg);
  color: currentColor;
  text-transform: uppercase;
}

.mega-nav__panel {
  top: 100%;
  width: min(1400px, calc(100dvw - 32px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mega-nav[data-open="true"] .mega-nav__panel {
  /* Oeffnen laeuft ausschliesslich ueber data-open, gesetzt per JS (Hover mit
     Absichtsverzoegerung, Klick, Tastatur). Weder :hover noch :focus-within
     stehen im Selektor — sonst haelt der Fokus auf dem Ausloeser das Panel
     offen und Escape kann es nicht schliessen. */
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.mega-nav__group h2 a,
.offcanvas-nav__group h2 a {
  color: inherit;
  text-decoration: none;
}

.nav-item--dev .nav-item__link,
.mega-nav__group--dev h2 a,
.offcanvas-nav__group--dev h2 a {
  color: var(--red);
}

.nav-item--dev .nav-item__link {
  min-height: 44px;
  margin-block: 2px;
  padding-inline: 9px;
  border: 1px solid currentColor;
  border-radius: var(--r-md);
  letter-spacing: .12em;
}

.mega-nav__group--dev,
.offcanvas-nav__group--dev {
  border-left-color: var(--red);
}

/* DEV-Seite: gelieferte Print-Grundlage als eigene, nicht produktive Referenz. */
.dev-hero {
  background: var(--paper-soft);
}

.dev-hero .page-hero__content {
  max-width: var(--max-w);
}

.dev-hero h1 {
  max-width: 14ch;
  overflow-wrap: normal;
}

.dev-source-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-5);
  margin-bottom: var(--gap-6);
  padding: var(--gap-5);
  border: 2px solid var(--line-ink);
  border-left: 8px solid var(--print-red);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.dev-source-bar p {
  margin: 4px 0 0;
  color: var(--muted);
}

.dev-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-4);
}

.dev-color-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.dev-color-card__swatch {
  min-height: 156px;
  display: grid;
  place-items: end start;
  padding: var(--gap-4);
  background: var(--swatch);
  color: var(--swatch-ink, #111);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(18px * var(--font-scale, 1));
  font-weight: 700;
}

.dev-color-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 0;
  padding: var(--gap-4);
  font-size: calc(14px * var(--font-scale, 1));
}

.dev-color-card dt {
  font-weight: 800;
}

.dev-color-card dd {
  margin: 0;
  font-family: var(--font-mono);
}

.dev-type-grid,
.dev-bridge-grid,
.dev-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-5);
}

.dev-type-sample,
.dev-type-rules,
.dev-bridge-card,
.dev-resource-card {
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: clamp(24px, 4vw, 48px);
}

.dev-type-sample {
  display: grid;
  align-content: center;
  min-height: 320px;
  background: #d5d3d3;
  color: #231f20;
  line-height: 1.05;
}

.dev-type-sample strong,
.dev-type-sample em {
  display: block;
  font-size: calc(clamp(50px, 8vw, 100px) * var(--font-scale, 1));
  text-transform: uppercase;
}

.dev-type-sample strong {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.dev-type-sample em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.dev-type-sample small {
  margin-top: var(--gap-4);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(clamp(30px, 5vw, 64px) * var(--font-scale, 1));
}

.dev-type-rules {
  display: grid;
  gap: var(--gap-5);
  align-content: center;
}

.dev-type-rule h3,
.dev-type-rule p,
.dev-bridge-card h3,
.dev-bridge-card p,
.dev-resource-card h3,
.dev-resource-card p {
  margin-top: 0;
}

.dev-type-rule h3 {
  margin-bottom: 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(16px * var(--font-scale, 1));
  text-transform: uppercase;
}

.dev-type-rule p,
.dev-bridge-card p,
.dev-resource-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.dev-resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dev-resource-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease;
}

.dev-resource-card:hover,
.dev-resource-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .12);
}

.dev-resource-card .text-link {
  align-self: flex-start;
}

.page-hero {
  padding-top: 190px;
}

.section-action {
  margin-top: var(--gap-6);
}

.text-link {
  color: var(--red);
  font-weight: 800;
  text-underline-offset: 4px;
}

/* Icon+Text-Link (L3: PDF-Download, OpenStreetMap-Link). Liefert nur das
   Flex-Layout und den 44px-Touch-Target — Farbe kommt weiterhin von
   .text-link, die zusätzlich auf demselben <a> sitzt. */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 44px;
}
.icon-link__icon {
  flex-shrink: 0;
}
.icon-link:focus-visible {
  outline-color: var(--line-ink);
  outline-offset: 3px;
}

/* Ansprechpartner: alle Daten bleiben sichtbar, Bewegung ist rein ergänzend. */
.contact-group + .contact-group {
  margin-top: var(--gap-8);
}

.contact-group__title {
  margin-bottom: var(--gap-5);
  font-size: calc(clamp(30px, 4vw, 48px) * var(--font-scale, 1));
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-5);
}
/* Siehe .card-row--single weiter oben — dasselbe Muster fuer 1-Karten-Faelle
   in .contact-grid (L3/L6). */
.contact-grid.contact-grid--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.contact-grid.contact-grid--hut {
  grid-template-columns: minmax(0, var(--measure-body));
  justify-content: center;
}

.contact-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--red);
}

.contact-card:hover,
.contact-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--line-ink);
}

.contact-card__portrait {
  margin: 0;
  overflow: hidden;
  border-bottom: 2px solid var(--line-ink);
  background: var(--paper-band);
}

.contact-card__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .24s ease;
}

.contact-card:hover .contact-card__portrait img,
.contact-card:focus-within .contact-card__portrait img {
  transform: scale(1.025);
}

.contact-card__body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: var(--gap-5);
}

.contact-card__body h3 {
  font-size: calc(clamp(27px, 3vw, 38px) * var(--font-scale, 1));
}

.contact-card__role {
  margin: 0;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contact-card__secondary {
  margin: 0;
  color: var(--muted);
  font-size: calc(14px * var(--font-scale, 1));
}

.contact-card__links {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin-top: var(--gap-3);
  font-style: normal;
}

.contact-card__links a {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: inherit;
  font-size: calc(14px * var(--font-scale, 1));
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

.contact-card__links a span:first-child {
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 900;
}

.contact-card--compact {
  margin-top: var(--gap-4);
  box-shadow: none;
}

.contact-card--compact:hover,
.contact-card--compact:focus-within {
  transform: none;
  box-shadow: none;
}

/* Marketing-Organigramm */
.marketing-org {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 2fr);
  gap: var(--gap-6);
  align-items: start;
}

.marketing-lead {
  position: sticky;
  top: 140px;
  padding: var(--gap-6);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-lg);
  border-left: 6px solid var(--red);
}

.marketing-lead > .eyebrow {
  color: var(--paper);
  opacity: 1;
}

.marketing-lead h3 {
  margin-block: var(--gap-3) var(--gap-5);
  max-width: 100%;
  color: var(--paper);
  font-size: calc(clamp(30px, 2.3vw, 36px) * var(--font-scale, 1));
  letter-spacing: .02em;
  line-height: 1.05;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.marketing-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-4);
}

.marketing-area {
  min-height: 100%;
  padding: var(--gap-5);
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}

.marketing-area h3 {
  margin-bottom: var(--gap-4);
  font-size: calc(clamp(26px, 3vw, 38px) * var(--font-scale, 1));
}

.name-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.name-list li {
  padding-top: 8px;
  border-top: 1px solid currentColor;
  font-weight: 700;
}

/* Jugendverzeichnis */
.youth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr);
  gap: var(--gap-6);
  align-items: start;
}

.youth-groups {
  display: grid;
  gap: var(--gap-3);
}

.youth-group {
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}

.youth-group summary {
  /* Fixed-width name column instead of flex justify-content: the "Jahrgaenge"
     small-text and the chevron then start at the same x-position in every
     <summary>, regardless of how long the group name is. */
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--gap-4);
  padding: var(--gap-4) var(--gap-5);
  cursor: pointer;
}

.youth-group summary > span {
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 4vw, 42px) * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
}

.youth-group summary small {
  justify-self: end;
  color: var(--muted);
  font-weight: 800;
}

/* L4: .youth-group summary hat display:flex — dadurch unterdrückt der
   Browser die native ::marker-Box, die alte ::marker-Regel griff seitdem
   nirgends mehr (entfernt). Sichtbares Auf/Zu-Signal jetzt über das
   Chevron-SVG im Markup. */
.youth-group__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--red);
  transition: transform .2s ease;
}
.youth-group[open] .youth-group__chevron {
  transform: rotate(180deg);
}

.youth-group__content {
  display: grid;
  gap: var(--gap-4);
  padding: 0 var(--gap-5) var(--gap-5);
  border-top: 1px solid var(--line);
}

.youth-group__cooperation {
  margin: var(--gap-4) 0 0;
  color: var(--red);
  font-weight: 800;
}

.youth-team h3 {
  margin-block: var(--gap-4) var(--gap-2);
  font-size: calc(25px * var(--font-scale, 1));
}

.youth-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.youth-contact-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-3);
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.youth-contact-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
  text-underline-offset: 3px;
}

/* L4: Trainingszeiten-Platzhalter je Jugendteam, bis echte Zeiten vorliegen. */
.youth-schedule-pending {
  margin: var(--gap-3) 0 0;
  color: var(--muted);
  font-size: calc(14px * var(--font-scale, 1));
  font-style: italic;
}

.youth-schedule-list {
  list-style: none;
  margin: var(--gap-3) 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.youth-schedule-list li {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.youth-lead {
  position: sticky;
  top: 140px;
  padding: var(--gap-5);
  background: var(--paper-band);
  border-radius: var(--r-lg);
}

.youth-lead > h3 {
  margin-top: var(--gap-3);
  font-size: calc(clamp(32px, 4vw, 48px) * var(--font-scale, 1));
}

/* Aktuelles */
.editorial-placeholder,
.editorial-note {
  padding: var(--gap-5);
  background: var(--paper-band);
  border-left: 5px solid var(--red);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.editorial-placeholder strong {
  display: block;
  margin-bottom: var(--gap-2);
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 4vw, 42px) * var(--font-scale, 1));
  text-transform: uppercase;
}

.editorial-placeholder p,
.editorial-note {
  margin-bottom: 0;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-4);
}

/* L5: zeigt nur 1-2 Termine ausserhalb des Aufklappbereichs, erbt
   .event-list vollstaendig, braucht nur Abstand zum folgenden Accordion. */
.event-list--preview {
  margin-bottom: var(--gap-5);
}

.event-item {
  min-width: 0;
  min-height: 184px;
  display: grid;
  align-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-5);
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-top: 6px solid var(--red);
  border-radius: var(--r-lg);
}

.event-item--open {
  border-top-color: var(--print-blue);
}

.event-item time,
.event-status {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Aufgabe 2, Entwurf B (07.08.2026): Datum deutlich groesser + fetter —
   Kundenwunsch, war zuvor kaum groesser als der Status-Text darunter. */
.event-item time {
  display: block;
  color: var(--red);
  font-family: var(--font-display);
  font-size: calc(clamp(22px, 2.6vw, 30px) * var(--font-scale, 1));
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}

.event-item h3 {
  font-size: calc(clamp(28px, 3vw, 40px) * var(--font-scale, 1));
}

.event-status {
  color: var(--muted);
}

.event-item--open .event-status {
  color: var(--print-blue);
}

.event-list + .editorial-note {
  margin-top: var(--gap-5);
}

/* L5: "Kalenderplanung"-Kachel, dezent per Dropdown aufklappbar — Muster
   von .youth-group/.youth-group summary uebernommen. */
.event-accordion {
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}

.event-accordion__summary {
  list-style: none;
  cursor: pointer;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  padding: var(--gap-4) var(--gap-5);
}
.event-accordion__summary::-webkit-details-marker { display: none; }

.event-accordion__summary span {
  font-family: var(--font-display);
  font-size: calc(clamp(24px, 3vw, 34px) * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
}

.event-accordion__summary small {
  color: var(--muted);
  font-weight: 800;
}

.event-accordion__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--red);
  transition: transform .2s ease;
}
.event-accordion[open] .event-accordion__chevron {
  transform: rotate(180deg);
}

.event-accordion__summary:focus-visible {
  outline-color: var(--line-ink);
  outline-offset: 3px;
}

/* Innerer <ol class="event-list"> braucht im aufgeklappten Zustand oberen
   Abstand + eigene Randlinie zur Summary, ohne die Basisregel zu ändern. */
.event-accordion .event-list {
  margin: 0;
  padding: var(--gap-4) var(--gap-5) var(--gap-5);
  border-top: 1px solid var(--line);
}

/* Aufgabe 3 (07.08.2026): auto-fit statt fester 3-Spalten-Aufteilung, damit
   der Verein spaeter Bilder ergaenzen kann, ohne dass eine Zeile mit
   ungefuellten Zellen entsteht. Alle Bilder teilen dasselbe Seitenverhaeltnis
   (siehe img-Regel unten). */
.club-life-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-4);
}

.club-life-grid figure {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}

.club-life-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.club-life-grid figcaption {
  padding: 14px var(--gap-4);
  border-top: 2px solid var(--line-ink);
  font-weight: 800;
}

/* Video-Galerie (Kinder in Bewegung): gleiches Hochformat wie das
   bestehende Feature-Video, gleiche Rahmensprache wie club-life-grid. */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-4);
  margin-top: var(--gap-5);
}

.video-gallery__item {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
}

.video-gallery__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--paper-band);
}

.video-gallery figcaption {
  padding: 14px var(--gap-4);
  border-top: 2px solid var(--line-ink);
  font-weight: 800;
}

/* ---------- Partner/Sponsoren (sponsoren.php, index.php, L5) ---------- */

/* Partner logos sit on the light page with generous air around them. The
   files are the partners' originals and vary wildly in construction, so the
   calm comes from spacing and a shared optical height, not from recolouring. */
.partner-logo-panel {
  padding-block: var(--gap-5);
}

.partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-4);
  row-gap: var(--gap-6);
  align-items: center;
}
@media (min-width: 561px) {
  .partner-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Ab Desktop-Breite immer fuenf Logos je Reihe. */
@media (min-width: 900px) {
  .partner-logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.partner-logo-tile__link {
  display: grid;
  justify-items: center;
  gap: var(--gap-3);
  min-height: 44px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.partner-logo-tile__link:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 6px;
  border-radius: var(--r-md);
}

/* One optical height for every mark, whatever its proportions. */
.partner-logo-tile__frame {
  width: 100%;
  height: var(--partner-logo-frame-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  transition: background-color .2s ease;
}
.partner-logo-tile__frame[data-logo-tone="light"] {
  background: #d7d9d8;
  padding: var(--gap-3);
}
body[data-theme="dark"] .partner-logo-tile__frame[data-logo-tone="light"] {
  background: transparent;
  padding: 0;
}
.partner-logo-tile__frame img {
  /* width/height auf 100% statt max-*: sonst bleiben kleine Originale
     (z. B. ein 61x28-SVG) winzig, weil sie nie hochskaliert werden. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--partner-logo-opacity-rest);
  transition: var(--partner-logo-transition);
}

/* Marks that are pure white on transparent are flipped to dark so they read
   on the light ground. */
.partner-logo-tile--hell .partner-logo-tile__frame img {
  filter: invert(1);
}

a.partner-logo-tile__link:hover .partner-logo-tile__frame img,
.partner-logo-tile__link:focus-visible .partner-logo-tile__frame img {
  opacity: 1;
  transform: scale(1.05);
}

@media (hover: none) {
  .partner-logo-tile__frame img { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-logo-tile__frame,
  .partner-logo-tile__frame img { transition: none; transform: none !important; }
}

.partner-logo-tile__name {
  font-size: calc(13px * var(--font-scale, 1));
  line-height: 1.35;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ---------- Partner-Laufband (sponsoren-variante-b.php) ---------- */
/* Wiederverwendet das SLIDER-Scroll-Snap-Muster oben: overflow-x:auto +
   scroll-snap-type:x statt eines neuen Scroll-Mechanismus. */
.partner-carousel {
  padding-block: var(--gap-5);
  overflow: hidden;
}
.partner-carousel__track {
  display: flex;
  gap: var(--gap-5);
  padding-inline: var(--gap-5);
  overflow-x: auto;
  /* A continuous marquee must not snap: snapping pulls scrollLeft back to the
     nearest tile on every frame and the band never moves. For the same reason
     smooth scrolling stays off — the arrow buttons request it explicitly. */
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
}
.partner-carousel__track::-webkit-scrollbar { display: none; }
.partner-carousel__track:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -3px;
}
.partner-carousel .partner-logo-tile {
  flex: 0 0 auto;
  width: clamp(170px, 26vw, 250px);
}
.partner-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-3);
  padding-inline: var(--gap-5);
  margin-top: var(--gap-4);
}
.partner-carousel__pause {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  color: var(--paper);
}
.partner-carousel__pause:hover {
  background: color-mix(in srgb, var(--paper) 14%, transparent);
}
.partner-carousel__pause:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

/* 2-Spalten-Grid fuer die Ansprechpartner-Kacheln unter "Partner werden" —
   bewusst NICHT .contact-grid (fest 4-spaltig, siehe oben), da nur 2
   Kontakte vorliegen. */
.partner-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-5);
}
@media (min-width: 761px) {
  .partner-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1220px) {
  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__links--standard {
    position: fixed;
    inset: 126px 14px auto 14px;
    max-height: calc(100dvh - 142px);
    overflow-y: auto;
    display: none;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--line-ink);
    border-radius: var(--r-lg);
    padding: var(--gap-2);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__links--standard.is-open {
    display: block;
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav-toggle--standard {
    display: inline-flex;
  }

  body:not([data-nav-mode="offcanvas"]):not([data-nav-mode="mega"]) .nav__cta {
    display: none;
  }

  .nav-list {
    display: grid;
    gap: 2px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .nav-item {
    display: block;
  }

  .nav-item__topline {
    justify-content: space-between;
    color: var(--ink);
  }

  .nav-item[data-open="true"] > .nav-item__topline,
  .nav-item > .nav-item__topline:hover,
  .nav-item:focus-within > .nav-item__topline {
    background: var(--paper-soft);
    color: var(--ink);
  }

  .nav-item.is-active > .nav-item__topline {
    color: var(--ink);
    box-shadow: inset 4px 0 0 var(--red);
  }

  .nav__links .nav-item__link {
    flex: 1 1 auto;
    padding: 12px;
  }

  .nav-submenu {
    position: static;
    min-width: 0;
    display: none;
    margin: 0 8px 8px;
    padding: 4px 8px 8px 18px;
    border: 0;
    border-left: 3px solid var(--red);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .nav-item[data-open="true"] > .nav-submenu {
    display: grid;
  }

  .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Events, calendar variant ----------
   Large boxes per occupied day, grouped by month, colour-coded by event type —
   deliberately not a 30-day grid, whose cells are too small to read. */
.event-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-5);
  margin-bottom: var(--gap-6);
}
.event-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.event-calendar__legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
}
.event-calendar {
  display: grid;
  gap: var(--gap-7);
}
.event-calendar--flat {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gap-4);
  row-gap: 0;
}
.event-calendar--flat > .event-calendar__month-title {
  grid-column: 1 / -1;
  margin-top: var(--gap-7);
}
.event-calendar--flat > .event-calendar__month-title:first-child {
  margin-top: 0;
}
.event-calendar--flat > .event-calendar__day {
  margin-bottom: 0;
}
.event-calendar__month-title {
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 3.4vw, 40px) * var(--font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 var(--gap-4);
  padding-bottom: var(--gap-3);
  border-bottom: 2px solid var(--line-ink);
}
.event-calendar__days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap-4);
}
.event-calendar__day {
  min-height: 220px;
  display: grid;
  align-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-5);
  background: var(--paper);
  border: 2px solid var(--line-ink);
  border-top: 8px solid var(--muted);
  border-radius: var(--r-lg);
}
.event-calendar__day-date {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(44px, 6vw, 72px) * var(--font-scale, 1));
  line-height: 1.05;
  color: var(--ink);
}
.event-calendar__day-date small {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(13px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap-1);
}
.event-calendar__day h3 {
  margin: 0;
  font-size: calc(clamp(20px, 2.2vw, 26px) * var(--font-scale, 1));
}
.event-calendar__day-tag {
  width: fit-content;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em .6em;
  border-radius: var(--r-md);
  color: var(--muted);
  background: var(--paper-band);
}
.event-calendar__day--fest {
  border-top-color: var(--red);
}
.event-calendar__day--fest .event-calendar__day-tag,
.event-calendar__legend-dot--fest {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}
.event-calendar__legend-dot--fest { background: var(--red); }
.event-calendar__day--treff {
  border-top-color: var(--green);
}
.event-calendar__day--treff .event-calendar__day-tag,
.event-calendar__legend-dot--treff {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
}
.event-calendar__legend-dot--treff { background: var(--green); }
.event-calendar__day--versammlung {
  border-top-color: var(--print-blue);
}
.event-calendar__day--versammlung .event-calendar__day-tag,
.event-calendar__legend-dot--versammlung {
  color: var(--print-blue);
  background: color-mix(in srgb, var(--print-blue) 14%, transparent);
}
.event-calendar__legend-dot--versammlung { background: var(--print-blue); }
.event-calendar__day--open {
  outline: 2px dashed var(--print-blue);
  outline-offset: 4px;
}

/* ---------- Anfahrtskarte (kontakt.php, Aufgabe 5) ----------
   Volles Wrap-Full-Bleed, cookiefreier OpenStreetMap-Embed (kein
   Drittanbieter-Consent noetig, siehe Bericht). */
.location-map__action {
  padding-block: var(--gap-4);
}

@media (max-width: 1020px) {
  .event-calendar--flat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-grid,
  .event-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dev-color-grid,
  .dev-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-org,
  .youth-layout {
    grid-template-columns: 1fr;
  }

  .marketing-lead,
  .youth-lead {
    position: static;
  }
}

@media (max-width: 760px) {
  .event-calendar--flat {
    grid-template-columns: 1fr;
  }
  .nav,
  .nav.is-pinned {
    padding-block: 8px;
  }

  .nav__inner {
    min-height: 104px;
    display: flex;
  }

  .nav__crest {
    flex-basis: 100px;
    width: 100px;
    height: 100px;
  }

  .nav__brand-copy {
    display: none;
  }

  .page-hero {
    padding-top: 164px;
  }

  .contact-grid,
  .marketing-areas,
  .event-list,
  .club-life-grid,
  .dev-color-grid,
  .dev-type-grid,
  .dev-bridge-grid,
  .dev-resource-grid {
    grid-template-columns: 1fr;
  }

  .dev-source-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dev-source-bar .btn {
    width: 100%;
  }

  .youth-group summary {
    grid-template-columns: 1fr;
    row-gap: var(--gap-2);
  }

  .youth-contact-list li {
    align-items: flex-start;
    flex-direction: column;
  }

  .youth-contact-list a {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .contact-card__portrait img,
  .nav-submenu,
  .nav-submenu-toggle span,
  .mega-nav__trigger span:last-child,
  .dev-resource-card,
  .youth-group__chevron,
  .event-accordion__chevron {
    transition: none;
  }

  .contact-card:hover,
  .contact-card:focus-within,
  .contact-card:hover .contact-card__portrait img,
  .contact-card:focus-within .contact-card__portrait img {
    transform: none;
  }

  .dev-resource-card:hover,
  .dev-resource-card:focus-within {
    transform: none;
  }
}

/* =============================================================
   Sportbereiche und zentraler Vereinsfilm, 2026-07-14
   Gemeinsame TYPO3-taugliche Detailstruktur ohne Fantasiedaten.
   ============================================================= */
.section--film {
  overflow: hidden;
  background: #101a14;
  color: #fff;
}

.section--film .eyebrow--red {
  color: #ff6b82;
}

.section-head--on-dark {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.section-head--on-dark .section-head__meta {
  color: rgba(255, 255, 255, .72);
}

.film-stage {
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: 18px 18px 0 var(--red);
}

.film-stage video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.film-stage figcaption {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
  gap: var(--gap-5);
  align-items: start;
  padding: var(--gap-5);
  border-top: 2px solid rgba(255, 255, 255, .78);
  background: #101a14;
}

.film-stage figcaption strong {
  font-family: var(--font-display);
  font-size: calc(clamp(28px, 4vw, 48px) * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
}

.film-stage figcaption span {
  color: rgba(255, 255, 255, .78);
}

.video-credit {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--font-scale, 1));
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.video-credit a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, .34);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.video-credit a:hover,
.video-credit a:focus-visible {
  color: #fff;
  text-decoration-color: var(--red);
}

.video-credit--film-stage {
  margin-top: 28px;
  text-align: right;
}

.template-preview-bar {
  padding: 150px 0 20px;
  background: var(--print-blue);
  color: #fff;
}

.template-preview-bar .wrap {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-4);
  flex-wrap: wrap;
}

.template-preview-bar strong {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.template-preview-bar + .page-hero {
  padding-top: var(--gap-8);
}

.sport-detail-hero .page-hero__content h1 {
  max-width: 13ch;
}

.sport-source-bar {
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}

.sport-source-bar__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  flex-wrap: wrap;
  padding-block: 12px;
  font-size: calc(14px * var(--font-scale, 1));
}

.sport-source-bar__inner > span:last-child {
  margin-left: auto;
  color: var(--muted);
}

.source-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.source-status--checked {
  background: #DFF2E4;
  color: #0E4C25;
}

/* L1: ersetzt die alte Faktenkacheln-Sektion — reiner Fliesstext-Block
   (Eyebrow + section-head__title + .lede), kein Grid, keine Kacheln. */
.sport-intro {
  display: grid;
  gap: var(--gap-4);
  max-width: min(100%, 1100px);
  margin-inline: auto;
}

.sport-intro > .lede {
  max-width: 68ch;
  font-size: calc(clamp(20px, 1.35vw, 22px) * var(--font-scale, 1));
  line-height: 1.65;
}

/* Wiederverwendbares Langtextmuster für Rechtliches und andere redaktionelle
   Text-Inhaltselemente. Es nutzt vorhandene Eyebrow-, Titel- und Lead-Tokens
   statt ein zweites Typografie-System einzuführen. */
.tgk-longform {
  width: min(100%, 1000px);
  margin-inline: auto;
}

.tgk-longform__intro {
  display: grid;
  gap: var(--gap-3);
  margin-bottom: var(--gap-7);
}

.tgk-longform__eyebrow.eyebrow {
  margin: 0;
  color: var(--tgk-longform-accent);
}

/* TYPO3s parseFunc_RTE normalisiert Absatzklassen zu `.min-paragraph`.
   Die semantische Intro-Position hält Eyebrow und Lead trotzdem zuverlässig. */
.tgk-longform__intro > p:first-child {
  margin: 0;
  color: var(--tgk-longform-accent);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tgk-longform__title.section-head__title {
  max-width: 16ch;
  margin: 0;
}

.tgk-longform__intro .tgk-longform__lead.lede {
  max-width: 66ch;
  margin: 0;
  font-size: calc(clamp(20px, 1.35vw, 22px) * var(--font-scale, 1));
  line-height: 1.65;
}

.tgk-longform__intro > p:last-child {
  max-width: 66ch;
  margin: 0;
  font-size: calc(clamp(20px, 1.35vw, 22px) * var(--font-scale, 1));
  line-height: 1.65;
}

.tgk-longform__body {
  max-width: 78ch;
  color: var(--ink-soft);
  font-size: calc(var(--fs-body-lg) * var(--font-scale, 1));
  line-height: 1.65;
}

.tgk-longform__body > :first-child { margin-top: 0; }

.tgk-longform__body > :last-child { margin-bottom: 0; }

.tgk-longform__body h2,
.tgk-longform__body h3 {
  max-width: 20ch;
  margin: var(--gap-7) 0 var(--gap-3);
  font-family: var(--font-display);
  font-size: calc(clamp(30px, 3.5vw, 44px) * var(--font-scale, 1));
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}

.tgk-longform__body p,
.tgk-longform__body ul,
.tgk-longform__body ol {
  max-width: 68ch;
  margin: 0 0 var(--gap-4);
}

.tgk-longform__body ul,
.tgk-longform__body ol {
  padding-left: 1.3em;
}

.tgk-longform__body li + li { margin-top: var(--gap-2); }

.tgk-longform__body a {
  color: inherit;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
}

.tgk-longform__body a:hover,
.tgk-longform__body a:focus-visible {
  color: var(--ink);
  outline-color: var(--tgk-longform-accent);
}

@media (max-width: 680px) {
  .tgk-longform__intro { margin-bottom: var(--gap-6); }
  .tgk-longform__body { font-size: calc(18px * var(--font-scale, 1)); }
  .tgk-longform__body h2,
  .tgk-longform__body h3 { margin-top: var(--gap-6); }
}

/* Als TYPO3-Frame ist derselbe Stil direkt auf normalen Core-Text- und
   Textmedia-Elementen auswählbar. Rechtstexte nutzen zusätzlich die
   semantischen __intro-/__body-Bausteine oben. */
.tgk-longform[data-ce-type] > h2,
.tgk-longform[data-ce-type] > h3 {
  max-width: 20ch;
  margin: var(--gap-7) 0 var(--gap-3);
  font-family: var(--font-display);
  font-size: calc(clamp(30px, 3.5vw, 44px) * var(--font-scale, 1));
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tgk-longform[data-ce-type] > p,
.tgk-longform[data-ce-type] > ul,
.tgk-longform[data-ce-type] > ol {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: calc(var(--fs-body-lg) * var(--font-scale, 1));
  line-height: 1.65;
}

.tgk-longform.ce-textmedia .ce-textmedia__content {
  max-width: 78ch;
}

.tgk-longform.ce-textmedia .ce-textmedia__title {
  max-width: 20ch;
  margin: 0 0 var(--gap-3);
  font-family: var(--font-display);
  font-size: calc(clamp(30px, 3.5vw, 44px) * var(--font-scale, 1));
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tgk-longform.ce-textmedia .ce-textmedia__text {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: calc(var(--fs-body-lg) * var(--font-scale, 1));
  line-height: 1.65;
}

.sport-offer-list {
  display: grid;
  gap: var(--gap-4);
}

.sport-offer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr) minmax(220px, .62fr);
  gap: var(--gap-5);
  padding: var(--gap-5);
  border: 2px solid var(--line-ink);
  border-left: 7px solid var(--red);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.sport-offer__intro,
.sport-offer__schedule,
.sport-offer__contacts {
  min-width: 0;
}

.sport-offer__intro h3 {
  margin-block: 8px var(--gap-3);
  font-size: calc(clamp(31px, 4vw, 50px) * var(--font-scale, 1));
}

.sport-offer__intro p {
  color: var(--ink-soft);
}

.sport-offer__schedule {
  display: grid;
  align-content: start;
  gap: 10px;
}

.schedule-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-soft);
}

.schedule-row strong {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: .06em;
  text-transform: uppercase;
}

.schedule-row span {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.schedule-row small,
.sport-offer__contacts small {
  color: var(--muted);
}

.sport-offer__status {
  margin: 0;
  padding: 14px;
  border-left: 4px solid var(--print-blue);
  background: var(--paper-soft);
  font-weight: 800;
}

.sport-offer__contacts ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: var(--gap-3) 0 0;
  padding: 0;
}

.sport-offer__contacts li {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sport-offer__contacts a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 900;
  text-underline-offset: 3px;
}

.sport-contact-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
  gap: var(--gap-6);
  align-items: start;
}

.sport-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-4);
  margin-bottom: var(--gap-5);
}

.source-panel {
  min-width: 0;
  padding: var(--gap-6);
  border-left: 7px solid var(--red);
  border-radius: var(--r-lg);
  background: #17231B;
  color: #fff;
}

.source-panel h3 {
  margin-block: var(--gap-3) var(--gap-5);
  font-size: calc(clamp(31px, 4vw, 48px) * var(--font-scale, 1));
}

.source-panel ul {
  list-style: none;
  display: grid;
  gap: var(--gap-4);
  margin: 0;
  padding: 0;
}

.source-panel li {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.source-panel a {
  font-weight: 900;
  text-underline-offset: 4px;
}

.source-panel small {
  color: rgba(255, 255, 255, .7);
}

.source-panel__review {
  margin: var(--gap-6) 0 0;
  padding: var(--gap-4);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .84);
}

.source-panel__review strong {
  color: #fff;
}

.contact-grid--directory {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .sport-offer {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr);
  }

  .sport-offer__contacts {
    grid-column: 1 / -1;
  }

  .sport-contact-source {
    grid-template-columns: 1fr;
  }

  .contact-grid--directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .film-stage {
    box-shadow: 8px 8px 0 var(--red);
  }

  .film-stage figcaption,
  .sport-offer,
  .sport-contact-grid,
  .contact-grid--directory {
    grid-template-columns: 1fr;
  }

  .sport-offer__contacts {
    grid-column: auto;
  }

  .sport-source-bar__inner > span:last-child {
    width: 100%;
    margin-left: 0;
  }

  .template-preview-bar .wrap {
    display: grid;
  }
}

.dev-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-5);
}

.dev-resource-card {
  min-width: 0;
  min-height: 440px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 58px);
  color: #fff;
  box-shadow: 10px 10px 0 var(--line-ink);
}

.dev-resource-card::before,
.dev-resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.dev-resource-card::before {
  background-position: center;
  background-size: cover;
}

.dev-resource-card::after {
  z-index: -1;
  background: transparent;
}

.dev-resource-card--style::before {
  background-image: url("/fileadmin/tus-graf-kobbo/start/hero-poster.webp");
}

.dev-resource-card--pitch::before {
  background-image: url("../entwuerfe/assets/images/action/action-team-net.webp");
}

.dev-resource-card--pitch::after {
  background: transparent;
}

.dev-resource-card--story::before,
.dev-resource-card--pure::before {
  background-image: url("../assets/pages/dev/herovideo-story-poster.jpg");
}

.dev-resource-card--story::after {
  background: transparent;
}

.dev-resource-card--pure::before {
  background-position: 61% center;
}

.dev-resource-card--pure::after {
  background: transparent;
}

.dev-resource-card .eyebrow {
  width: fit-content;
  padding: .5em .7em;
  color: #fff;
  background: var(--image-text-bg);
  text-shadow: none;
}

.dev-resource-card h3 {
  max-width: 11ch;
  margin-block: var(--gap-3);
  color: #fff;
  font-size: calc(clamp(40px, 6vw, 72px) * var(--font-scale, 1));
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
  text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 10px 32px rgba(0,0,0,.62);
}

.dev-resource-card p {
  width: fit-content;
  padding: .38em .58em;
  max-width: 42ch;
  color: rgba(255, 255, 255, .84);
  background: var(--image-text-bg);
  font-size: calc(clamp(17px, 1.8vw, 21px) * var(--font-scale, 1));
  font-weight: 700;
  text-shadow: none;
}

.dev-resource-card .btn {
  margin-top: var(--gap-5);
}

.pitch-hub-hero .page-hero__content h1 {
  max-width: 10ch;
}

.pitch-story-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pitch-story-steps li {
  min-width: 0;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--red);
  padding: var(--gap-5);
  background: var(--paper-soft);
}

.pitch-story-steps li > span {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 900;
}

.pitch-story-steps strong {
  display: block;
  margin-top: var(--gap-5);
  font-family: var(--font-display);
  font-size: calc(clamp(29px, 3vw, 43px) * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
}

.pitch-story-steps p {
  margin: auto 0 0;
  padding-top: var(--gap-5);
  color: var(--ink-soft);
  font-weight: 700;
}

.pitch-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-5);
}

.pitch-hub-card {
  min-width: 0;
  min-height: 660px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border: 2px solid var(--line-ink);
  border-radius: var(--r-lg);
  color: #fff;
  box-shadow: 10px 10px 0 var(--line-ink);
}

.pitch-hub-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.pitch-hub-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
}

.pitch-hub-card--sponsors::after {
  background: transparent;
}

.pitch-hub-card:hover > img,
.pitch-hub-card:focus-within > img {
  transform: scale(1.025);
}

.pitch-hub-card__content {
  min-width: 0;
  width: 100%;
  padding: clamp(28px, 5vw, 58px);
  text-shadow: 0 2px 3px rgba(0,0,0,.88), 0 10px 32px rgba(0,0,0,.65);
}

.pitch-hub-card__content .eyebrow {
  width: fit-content;
  padding: .5em .7em;
  color: #fff;
  background: var(--image-text-bg);
  text-shadow: none;
}

.pitch-hub-card__content h3 {
  max-width: 13ch;
  margin-block: var(--gap-3);
  color: #fff;
  font-size: calc(clamp(42px, 5.2vw, 74px) * var(--font-scale, 1));
  line-height: 1.05;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.pitch-hub-card__content p {
  width: fit-content;
  padding: .38em .58em;
  max-width: 38ch;
  color: rgba(255, 255, 255, .86);
  background: var(--image-text-bg);
  font-size: calc(clamp(17px, 1.8vw, 21px) * var(--font-scale, 1));
  font-weight: 700;
  text-shadow: none;
}

.pitch-hub-card__content .btn {
  margin-top: var(--gap-5);
}

@media (max-width: 980px) {
  .pitch-story-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dev-resource-grid,
  .pitch-hub-grid,
  .pitch-story-steps {
    grid-template-columns: 1fr;
  }

  .dev-resource-card,
  .pitch-hub-card {
    min-height: 520px;
    box-shadow: 6px 6px 0 var(--line-ink);
  }

  .pitch-story-steps li {
    min-height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pitch-hub-card > img {
    transition: none;
  }

  .pitch-hub-card:hover > img,
  .pitch-hub-card:focus-within > img {
    transform: none;
  }
}

/* =============================================================
   DEV Herovideo: isolierter Scroll-Scrub und purer Player
   Art direction: maximal-editorial innerhalb der stillen Site-Linie.
   ============================================================= */
.film-story-main,
.pure-video-main {
  width: 100%;
  max-width: none;
  background: #050806;
  color: #fff;
}

body[data-page="hero-story"] {
  overflow-x: visible;
}

body[data-page="hero-story"] .tgk-style-switcher,
body[data-page="hero-story"] .scroll-top,
body[data-page="hero-pure"] .tgk-style-switcher,
body[data-page="hero-pure"] .scroll-top {
  display: none;
}

.film-story {
  position: relative;
  width: 100%;
  background: #050806;
}

.film-story__stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: clamp(126px, 13vw, 176px);
  background: #050806;
}

.film-story__video {
  width: 100%;
  max-height: 78svh;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 46%;
  background: #000;
}

.film-story__veil {
  display: none;
}

.film-story__chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .22);
}

.film-story__chapter {
  min-width: 0;
  padding: clamp(24px, 4vw, 54px);
  background: #101a14;
}

.film-story__index {
  display: block;
  margin-bottom: 12px;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 900;
  letter-spacing: .14em;
}

.film-story__chapter h1,
.film-story__chapter h2 {
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: calc(clamp(40px, 5vw, 76px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: .018em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
}

.film-story__progress {
  display: none;
}

.film-story.is-enhanced {
  height: 440svh;
}

.film-story.is-enhanced .film-story__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  display: block;
  overflow: hidden;
  padding: 0;
}

.film-story.is-enhanced .film-story__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}

.film-story.is-enhanced .film-story__veil {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: transparent;
}

.film-story.is-enhanced .film-story__chapters {
  position: absolute;
  inset: 0;
  display: block;
  background: transparent;
  pointer-events: none;
}

.film-story.is-enhanced .film-story__chapter {
  position: absolute;
  inset: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(150px, 15vw, 210px) clamp(24px, 7vw, 112px) clamp(80px, 10vw, 130px);
  background: transparent;
  opacity: 0;
  visibility: hidden;
}

.film-story.is-enhanced .film-story__chapter h1,
.film-story.is-enhanced .film-story__chapter h2 {
  width: auto;
  max-width: 100%;
  overflow: hidden;
  padding-block: .1em .05em;
  font-size: calc(clamp(72px, 13.5vw, 216px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: .018em;
  text-wrap: nowrap;
  text-shadow: 0 4px 44px rgba(0, 0, 0, .38);
}

.film-story__char {
  display: inline-block;
  will-change: transform, opacity;
}

.film-story__word {
  display: inline-block;
}

.film-story__word + .film-story__word {
  margin-left: .18em;
}

.film-story.is-enhanced .film-story__index {
  width: fit-content;
  padding: .5em .7em;
  margin-bottom: clamp(12px, 2vw, 24px);
  color: #fff;
  background: var(--image-text-bg);
  font-size: calc(clamp(11px, 1vw, 14px) * var(--font-scale, 1));
}

.film-story.is-enhanced .film-story__index::after {
  content: "";
  width: clamp(40px, 5vw, 74px);
  height: 3px;
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--red);
}

.film-story.is-enhanced .film-story__progress {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(22px, 4vw, 52px);
  left: clamp(20px, 4vw, 64px);
  height: 3px;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
}

.film-story.is-enhanced .film-story__progress span {
  width: 100%;
  height: 100%;
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--red);
}

.film-story-exit,
.pure-video__links {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 5vw, 64px);
  padding: 28px max(24px, env(safe-area-inset-left)) 34px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: #050806;
}

.film-story-exit a,
.pure-video__links a {
  color: #fff;
  font-weight: 900;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.pure-video {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: #000;
}

.video-credit--pure {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: #050806;
}

.pure-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
}

.pure-video__frame video {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  background: #000;
  transition: filter .55s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.pure-video.is-ending .pure-video__frame video,
.pure-video.has-ended .pure-video__frame video {
  filter: brightness(.72) saturate(.9);
}

.pure-video__end-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: clamp(110px, 12vw, 170px) clamp(24px, 7vw, 112px) 110px;
  background: transparent;
  color: #fff;
  text-align: center;
}

.pure-video__end-card[hidden] {
  display: none;
}

.pure-video__end-card-inner {
  width: min(100%, 920px);
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(3, 7, 4, .62);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24);
}

.pure-video__end-card .eyebrow {
  color: #ffb4c1;
}

.pure-video__end-card h2 {
  max-width: 10ch;
  margin: 14px auto 0;
  color: #fff;
  font-size: calc(clamp(58px, 10vw, 150px) * var(--font-scale, 1));
  letter-spacing: .018em;
  line-height: 1.05;
}

.pure-video__end-card p {
  margin: clamp(18px, 3vw, 30px) auto 0;
  color: rgba(255, 255, 255, .88);
  font-size: calc(clamp(18px, 2vw, 26px) * var(--font-scale, 1));
  font-weight: 750;
}

.pure-video__end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(22px, 4vw, 38px);
}

.pure-video__controls {
  position: absolute;
  right: auto;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: clamp(18px, 4vw, 64px);
  z-index: 3;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(5, 8, 6, .64);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}

.pure-video__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pure-video__buttons button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.pure-video__buttons button > span:first-child {
  font-size: calc(13px * var(--font-scale, 1));
}

.pure-video__buttons button > span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pure-video__buttons button:hover,
.pure-video__buttons button:focus-visible,
.pure-video__buttons button[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
}

.pure-video__buttons button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.pure-video__buttons button:disabled {
  opacity: .42;
  cursor: default;
}

.pure-video__readout {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, .68);
  font-family: var(--font-mono);
  font-size: calc(9px * var(--font-scale, 1));
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .film-story__chapters {
    grid-template-columns: 1fr;
  }

  .film-story.is-enhanced {
    height: 400svh;
  }

  .film-story.is-enhanced .film-story__video {
    object-position: center 46%;
  }

  .film-story.is-enhanced .film-story__veil {
    background: transparent;
  }

  .film-story.is-enhanced .film-story__chapter {
    justify-content: flex-end;
    padding: 130px 20px 18svh;
  }

  .film-story.is-enhanced .film-story__chapter h1,
  .film-story.is-enhanced .film-story__chapter h2 {
    width: auto;
    max-width: 96vw;
    font-size: calc(clamp(54px, 15vw, 82px) * var(--font-scale, 1));
    white-space: nowrap;
  }

  .pure-video__controls {
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    max-width: calc(100% - 24px);
    gap: 7px;
    padding: 4px 7px 4px 4px;
  }

  .pure-video__buttons {
    flex-wrap: nowrap;
  }

  .pure-video__buttons button {
    flex: 0 0 auto;
  }

  .pure-video__readout {
    min-width: 0;
    gap: 6px;
  }

  .pure-video__readout [data-video-status] {
    display: none;
  }

  .pure-video__end-card {
    padding: 120px 20px 92px;
  }

  .pure-video__end-card h2 {
    font-size: calc(clamp(52px, 16vw, 82px) * var(--font-scale, 1));
  }
}

@media (max-width: 440px) {
  .film-story.is-enhanced .film-story__chapter h1,
  .film-story.is-enhanced .film-story__chapter h2 {
    font-size: calc(clamp(48px, 15vw, 66px) * var(--font-scale, 1));
  }

  .film-story-exit {
    align-items: center;
    flex-direction: column;
  }

}

@media (prefers-reduced-motion: reduce) {
  .film-story__char {
    will-change: auto;
  }

  .pure-video__frame video {
    transition: none;
  }
}

body[data-motion="reduced"] .film-story__char {
  will-change: auto;
}

/* =============================================================
   TEAM STAGE · full-bleed team photographs with scroll parallax
   ============================================================= */

.team-stage {
  padding-block: var(--gap-9);
  background: var(--ink);
  color: var(--on-media);
}

.team-stage .section-head__title,
.team-stage .section-head__meta {
  color: var(--on-media);
}

.team-stage__band {
  position: relative;
  margin-top: var(--gap-7);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--on-media) 24%, transparent);
  border-radius: var(--r-lg);
}

.team-stage__media {
  position: relative;
  height: clamp(320px, 62vh, 720px);
  overflow: hidden;
}

/* The image is oversized so the parallax offset never exposes an edge. */
.team-stage__media img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.team-stage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 35, 27, .92) 0%, rgba(23, 35, 27, .45) 34%, rgba(23, 35, 27, 0) 62%);
  pointer-events: none;
}

.team-stage__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-block-end: var(--gap-6);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: var(--gap-5);
}

/* The kicker sits on photography, so it carries its own plate. */
.team-stage__caption .eyebrow {
  background: var(--image-text-bg);
  border-radius: var(--r-md);
  padding: var(--gap-1) var(--gap-2);
  color: var(--on-media);
}

.team-stage__title {
  font-family: var(--font-display);
  font-size: calc(clamp(44px, 8.5vw, 132px) * var(--font-scale, 1));
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: var(--gap-2) 0 var(--gap-3);
  color: var(--on-media);
}

.team-stage__meta {
  max-width: 52ch;
  font-size: calc(17px * var(--font-scale, 1));
  line-height: 1.5;
  color: var(--on-media);
  background: var(--image-text-bg);
  border-radius: var(--r-md);
  padding: var(--gap-3) var(--gap-4);
}

.team-stage__meta strong {
  font-size: calc(19px * var(--font-scale, 1));
}

.team-stage__zoom {
  margin-top: var(--gap-4);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 44px;
  padding: var(--gap-2) var(--gap-4);
  font: inherit;
  font-size: calc(15px * var(--font-scale, 1));
  color: var(--on-media);
  background: transparent;
  border: 1px solid var(--on-media);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.team-stage__zoom:hover,
.team-stage__zoom:focus-visible {
  background: var(--on-media);
  color: var(--ink);
}

.team-stage__zoom svg { flex: none; }

/* Reveal on scroll — the band starts slightly lowered and settles. */
.team-stage__band[data-team-band] .team-stage__caption {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.team-stage__band[data-team-band].is-revealed .team-stage__caption {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .team-stage__media { height: clamp(240px, 42vh, 380px); }

  /* Not enough room to stack type over the photo — caption moves below it. */
  .team-stage__caption {
    position: static;
    padding-block: var(--gap-4) 0;
  }

  .team-stage__media::after {
    background: linear-gradient(to top, rgba(23, 35, 27, .55) 0%, rgba(23, 35, 27, 0) 45%);
  }

  .team-stage__title { font-size: calc(clamp(38px, 13vw, 64px) * var(--font-scale, 1)); }

  .team-stage__meta {
    max-width: none;
    background: transparent;
    padding-inline: 0;
  }
}

body[data-motion="reduced"] .team-stage__media img,
body[data-motion="reduced"] .team-stage__band .team-stage__caption {
  transform: none !important;
  transition: none;
}

body[data-motion="reduced"] .team-stage__band .team-stage__caption { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .team-stage__media img,
  .team-stage__band .team-stage__caption { transform: none !important; transition: none; }
  .team-stage__band .team-stage__caption { opacity: 1; }
}

/* ---------- Partner: Karten-Variante (sponsoren-variante-c.php) ---------- */
/* Every mark gets the same white plate. Logos that carry their own coloured
   box blend into the row instead of standing out as blocks. */
.partner-logo-panel--karten .partner-logo-grid {
  column-gap: var(--gap-4);
  row-gap: var(--gap-4);
  /* Every card the same size, whatever the length of the company name:
     stretch across the row, and let all rows share the tallest row's height. */
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.partner-logo-panel--karten .partner-logo-tile {
  display: flex;
}

.partner-logo-panel--karten .partner-logo-tile__link {
  width: 100%;
  height: 100%;
  /* A floor so all three category grids land on the same card height, not just
     each grid on its own. */
  min-height: var(--partner-card-min-h, 188px);
  align-content: center;
  padding: var(--gap-4) var(--gap-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.partner-logo-panel--karten .partner-logo-tile__frame {
  height: 84px;
}

.partner-logo-panel--karten .partner-logo-tile__frame img {
  width: min(100%, 132px);
  height: min(100%, 72px);
}

.partner-logo-panel--home {
  --partner-card-min-h: 176px;
}

.partner-logo-panel--karten .partner-logo-tile__frame img { opacity: .9; }

/* Very long names must not push a single card taller than the rest. The full
   company name stays in the markup and in the link label. */
.partner-logo-panel--karten .partner-logo-tile__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

a.partner-logo-panel--karten .partner-logo-tile__link:hover,
.partner-logo-panel--karten a.partner-logo-tile__link:hover {
  border-color: var(--red);
  box-shadow: 0 10px 26px rgba(23, 35, 27, .1);
  transform: translateY(-3px);
}

.partner-logo-panel--karten a.partner-logo-tile__link:hover .partner-logo-tile__frame img {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .partner-logo-panel--karten .partner-logo-tile__link { transition: none; transform: none !important; }
}

/* The marquee sits on the light ground, so its controls cannot inherit the
   light-on-dark slider styling. */
.partner-carousel__controls .slider__nav button {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.partner-carousel__controls .slider__nav button:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}
.partner-carousel__pause.btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.partner-carousel__pause.btn:hover,
.partner-carousel__pause.btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- Variantenumschalter Partnerlogos (Entscheidungshilfe) ---------- */
/* Prototype-only: removed in one step once a variant is chosen. */
.variant-switch {
  background: var(--paper-soft, #F4F5F3);
  border-block: 1px solid var(--line);
}

.variant-switch__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-3) var(--gap-5);
  padding-block: var(--gap-3);
}

.variant-switch__label {
  margin: 0;
  font-size: calc(13px * var(--font-scale, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.variant-switch__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}

.variant-switch__item {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 44px;
  padding: var(--gap-2) var(--gap-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease;
}

.variant-switch__item:hover { border-color: var(--red); }

.variant-switch__item:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.variant-switch__item.is-active {
  border-color: var(--red);
  background: var(--red);
  color: var(--on-media);
}

.variant-switch__nr {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  color: var(--on-media);
  font-family: var(--font-display);
  font-size: calc(14px * var(--font-scale, 1));
}

.variant-switch__item.is-active .variant-switch__nr {
  background: var(--on-media);
  color: var(--red);
}

.variant-switch__text { display: grid; line-height: 1.25; }
.variant-switch__text strong { font-size: calc(15px * var(--font-scale, 1)); }
.variant-switch__text small {
  font-size: calc(12px * var(--font-scale, 1));
  opacity: .75;
}

@media (max-width: 620px) {
  .variant-switch__nav { width: 100%; }
  .variant-switch__item { flex: 1 1 auto; }
}

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

/* Marker for a design still awaiting a decision. Prototype-only: removed
   together with the rejected variant. */
.variant-tag {
  max-width: var(--wrap-max, 1320px);
  margin: 0 auto;
  padding: var(--gap-4) var(--gap-5) 0;
  display: flex;
  align-items: baseline;
  gap: var(--gap-3);
  font-size: calc(15px * var(--font-scale, 1));
  color: var(--muted);
}

.variant-tag span {
  flex: none;
  padding: var(--gap-1) var(--gap-3);
  border-radius: 999px;
  background: var(--red);
  color: var(--on-media);
  font-family: var(--font-display);
  font-size: calc(14px * var(--font-scale, 1));
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ---------- Standortkarte (Kontaktseite) ---------- */
/* Leaflet liegt lokal im Projekt, die Kacheln kommen von openstreetmap.org.
   Keine Cookies, deshalb kein Einwilligungsbanner. */
.location-map {
  margin-block: var(--gap-7);
  border-block: 1px solid var(--line);
  background: var(--paper-soft, #F4F5F3);
}

.location-map--contained {
  max-width: var(--measure-body);
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.location-map--contained .location-map__canvas {
  height: min(58vh, 520px);
}

.contact-card--hut {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr);
  grid-template-rows: 1fr;
}

.contact-card--hut .contact-card__body {
  align-content: center;
  text-align: left;
}

.contact-card--hut .contact-card__portrait {
  order: 2;
  border-bottom: 0;
  border-left: 2px solid var(--line-ink);
}

.contact-card--hut .contact-card__portrait img {
  height: 100%;
  min-height: 320px;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (max-width: 760px) {
  .contact-card--hut {
    grid-template-columns: 1fr;
  }
  .contact-card--hut .contact-card__portrait {
    order: 0;
    border-left: 0;
    border-bottom: 2px solid var(--line-ink);
  }
}

body[data-page="start"] .hero__claim,
body[data-page="start"] .hero__foot-item,
body[data-page="start"] .sport,
body[data-page="start"] .stat-card,
body[data-page="start"] .partner-logo-panel--karten .partner-logo-tile__link {
  border-radius: var(--r-hero);
}

/* Die freigegebene schwarze/mediale Formensprache bleibt bestehen. Nur ihre
   vorhandenen Ecken werden etwas klarer lesbar, ohne Maße oder Abstände zu
   verändern. */
.film-stage,
.source-panel,
.sport--feature,
.sport--photo,
.team-stage__band {
  border-radius: var(--r-dark);
}

.location-map__canvas {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 420px;
  border: 0;
}

.location-map__fallback {
  padding: var(--gap-6);
  text-align: center;
}

/* Leaflet zeichnet eigene Flaechen — Schrift und Rundung angleichen. */
.leaflet-container {
  font-family: inherit;
  font-size: calc(15px * var(--font-scale, 1));
  background: var(--paper-soft, #F4F5F3);
}

.location-map .leaflet-control-zoom.leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

.location-map .leaflet-control-attribution,
.location-map .leaflet-control-attribution a {
  color: #26332a;
}

.location-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, .96);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(23, 35, 27, .22);
}

.leaflet-popup-content { margin: 0; }
.leaflet-popup-content-wrapper { padding: 0; }

.karte-karte {
  padding: var(--gap-4) var(--gap-5) var(--gap-4);
  min-width: 220px;
}

.karte-karte__logo {
  width: 48px;
  height: 48px;
  margin-bottom: var(--gap-2);
}

.karte-karte__kicker {
  margin: 0;
  font-size: calc(12px * var(--font-scale, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}

.karte-karte__titel {
  margin: var(--gap-1) 0 var(--gap-2);
  font-family: var(--font-display);
  font-size: calc(24px * var(--font-scale, 1));
  line-height: 1.05;
  text-transform: uppercase;
}

.karte-karte__text {
  margin: 0 0 var(--gap-3);
  font-size: calc(15px * var(--font-scale, 1));
  line-height: 1.5;
  color: var(--ink);
}

.karte-karte__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-4);
  margin: 0;
}

.karte-karte__links a {
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 760px) {
  .location-map__canvas { height: 70vh; min-height: 360px; }

  .tgk-style-switcher.is-collapsed {
    width: 52px;
  }

  .tgk-style-switcher.is-collapsed .tgk-style-switcher__head {
    padding: 4px;
  }

  .tgk-style-switcher.is-collapsed .tgk-style-switcher__head > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* A gallery with a single picture (e.g. the real Skifreizeit group photo)
   keeps its natural ratio instead of the 4:3 grid crop. */
.club-life-grid figure:only-child { max-width: 920px; }
.club-life-grid figure:only-child img { aspect-ratio: auto; }

/* TGK26 navigation refinement: one rail, one interaction surface per item.
   Hover/open uses the full cell; the current branch is the same cell with a
   red lower marker. No nested white link surface can overlap the parent. */
@media (min-width: 981px) {
  .nav.is-pinned {
    padding-block: 5px;
    background: #17201b;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 26px rgba(8, 15, 10, .26);
  }

  .nav.is-pinned .nav__inner { min-height: 62px; }
  .nav.is-pinned .nav__crest { flex-basis: 52px; width: 52px; height: 52px; padding: 2px; }
  .nav.is-pinned .nav__brand { font-size: calc(15px * var(--font-scale, 1)); color: #fff; }
  .nav.is-pinned .nav__brand-copy { max-width: 126px; padding: 4px 6px; background: rgba(0, 0, 0, .36); }
  .nav.is-pinned .nav-list { padding: 3px; background: transparent; border-color: rgba(255, 255, 255, .14); }
  .nav.is-pinned .nav-item__topline { min-height: 44px; }
  .nav.is-pinned .nav__links .nav-item__link { min-height: 44px; padding-inline: 10px; font-size: calc(12px * var(--font-scale, 1)); }
  .nav.is-pinned .nav-submenu-toggle { min-height: 44px; width: 44px; color: #fff; }
  .nav.is-pinned .nav__cta { padding: 8px 11px; font-size: calc(11px * var(--font-scale, 1)); }

  .nav.is-pinned .nav-item.is-active > .nav-item__topline {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 -4px 0 var(--red);
  }
  .nav.is-pinned .nav-item.is-active > .nav-item__topline .nav-item__link,
  .nav.is-pinned .nav-item.is-active > .nav-item__topline .nav-submenu-toggle { color: #fff; }
}

/* Aktive und inaktive Einträge nutzen dieselbe präzise Innenkante. */
.nav .nav-item.is-active > .nav-item__topline .nav-item__link {
  margin-inline: 0;
  padding-inline: 12px;
}