/* ==========================================================================
   MSV Hürtgenwald e.V. – Abteilung Auto · Stylesheet
   --------------------------------------------------------------------------
    1. Farben & Maße          8. Rennkalender
    2. Schriften              9. Galerie & Großansicht
    3. Grundlagen            10. HK-Cup
    4. Bausteine             11. Verein
    5. Kopf & Menü           12. Tipps & Tricks
    6. Abschnitte            13. Fußzeile & „Nach oben“
    7. Startseite, Strecke   14. Impressum, Datenschutz, Prüfseite

   Farben NUR über die Variablen (--c-…) verwenden – dann reicht es,
   oben die Werte zu ändern.
   ========================================================================== */

/* ==========================================================================
   1. FARBEN & MASSE
   ========================================================================== */
:root {
  /* Flächen */
  --c-bg:          #e6e9e3;   /* Seitenhintergrund */
  --c-bg-alt:      #d9dfd8;   /* getönte Abschnitte */
  --c-flaeche:     #f5f6f2;   /* Karten */
  --c-flaeche-2:   #e2e8e2;   /* Flächen in Karten (z. B. Monatsleisten) */
  --c-linie:       #c6d0c8;   /* Rahmen & Trennlinien */

  /* Text */
  --c-text:        #151e1a;
  --c-text-leise:  #45534b;

  /* Hauptfarbe Waldgrün (Knöpfe, Links, eigene Termine) */
  --c-haupt:       #145f44;
  --c-haupt-hover: #0d4431;
  --c-haupt-hell:  #cfe3d8;
  --c-auf-haupt:   #ffffff;   /* Schrift auf der Hauptfarbe */
  --c-link:        #135c42;

  /* Akzent Signal-Orange */
  --c-akzent:      #f28a1e;
  --c-akzent-hell: #f6e2cc;
  --c-akzent-text: #7a3f05;
  --c-auf-akzent:  #3d2102;

  /* Fehlermeldungen */
  --c-fehler:      #b91c1c;

  --c-kopf-bg: color-mix(in srgb, #e6e9e3 92%, transparent);
  --schatten: 0 1px 2px rgb(20 40 30 / .06), 0 4px 12px rgb(20 40 30 / .05);

  --schrift-text:  "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  --breite:     1180px;
  --radius:     18px;
  --radius-k:   10px;
  --kopf-hoehe: 68px;
}

/* Dunkle Flächen: Kopf, Startbereich/Seitenkopf (Schrift auf dem Foto), Fuß */
.kopf,
.fuss,
#start {
  --c-bg:          #121a17;
  --c-bg-alt:      #17211d;
  --c-flaeche:     #1c2723;
  --c-flaeche-2:   #25322d;
  --c-linie:       #33443c;

  --c-text:        #eef4f0;
  --c-text-leise:  #a7b7ae;

  --c-haupt:       #3dbb85;
  --c-haupt-hover: #5fd3a0;
  --c-haupt-hell:  rgb(61 187 133 / .15);
  --c-auf-haupt:   #06170f;
  --c-link:        #6fd6a8;

  --c-akzent:      #f59a3a;
  --c-akzent-hell: rgb(245 154 58 / .15);
  --c-akzent-text: #ffc285;
  --c-auf-akzent:  #2a1500;

  --c-fehler:      #d23a3a;

  --c-kopf-bg: color-mix(in srgb, #121a17 92%, transparent);
  --schatten: 0 1px 2px rgb(0 0 0 / .35), 0 10px 28px rgb(0 0 0 / .30);
}

/* ==========================================================================
   2. SCHRIFTEN (lokal in technik/schriften – kein Google-Server)
   ========================================================================== */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("schriften/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("schriften/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("schriften/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("schriften/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("schriften/barlow-condensed-latin-800-normal.woff2") format("woff2"); }

/* ==========================================================================
   3. GRUNDLAGEN
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.45rem; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-link); text-underline-offset: .18em; }
a:hover { color: var(--c-haupt-hover); }

:focus-visible { outline: 3px solid var(--c-akzent); outline-offset: 3px; border-radius: 4px; }

.container { width: min(var(--breite), 100% - 32px); margin-inline: auto; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--c-haupt); color: var(--c-auf-haupt); padding: .6em 1em; border-radius: var(--radius-k);
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   4. BAUSTEINE
   ========================================================================== */
.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.icon--gross { width: 2rem; height: 2rem; }

.eyebrow {
  font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-link); margin-bottom: .6em;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em;
  font: inherit; font-weight: 700; text-decoration: none;
  color: var(--c-auf-haupt); background: var(--c-haupt);
  border: 2px solid var(--c-haupt); border-radius: 999px;
  cursor: pointer; transition: background .15s, transform .15s, border-color .15s;
}
.btn:hover { color: var(--c-auf-haupt); background: var(--c-haupt-hover); border-color: var(--c-haupt-hover); transform: translateY(-1px); }
.btn--hell { color: var(--c-link); background: transparent; }
.btn--hell:hover { color: var(--c-link); background: var(--c-haupt-hell); }
.btn--klein { min-height: 40px; padding: .4em 1em; font-size: .95rem; }
.btn--gross { min-height: 54px; padding: .65em 1.5em; font-size: 1.08rem; }

.textlink {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; color: var(--c-link); text-decoration: none;
}
.textlink:hover { text-decoration: underline; color: var(--c-link); }

.textknopf {
  display: inline-flex; align-items: center; gap: .4em; padding: 0; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--c-link); background: none;
}
.textknopf:hover { text-decoration: underline; }

.karte {
  background: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.etikett {
  display: inline-block; align-self: flex-start; margin-bottom: .8em; padding: .2em .75em;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-akzent-text); background: var(--c-akzent-hell); border-radius: 999px;
}
.etikett--gruen { color: var(--c-link); background: var(--c-haupt-hell); }
.etikett--gelb  { color: #5c4a00; background: #fbe98a; }

.liste { list-style: none; padding: 0; margin: 0 0 1.2em; }
.liste li { position: relative; padding-left: 1.5em; margin-bottom: .35em; }
.liste li::before {
  content: ""; position: absolute; left: .2em; top: .62em;
  width: .55em; height: .55em; border-radius: 2px; background: var(--c-akzent);
  transform: rotate(45deg);
}

.klein { font-size: .92rem; color: var(--c-text-leise); }
.hinweis { color: var(--c-text-leise); }

/* gelb markierter Platzhalter (<mark class="platzhalter">) – wird auf der Prüfseite gezählt */
mark.platzhalter { background: #fff3a6; color: #5a4700; padding: .05em .35em; border-radius: 4px; }

/* ==========================================================================
   5. KOPF & MENÜ
   ========================================================================== */
.kopf {
  position: sticky; top: 0; z-index: 50;
  color: var(--c-text);
  background: var(--c-kopf-bg);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.kopf.ist-gescrollt { border-color: var(--c-linie); box-shadow: 0 4px 18px rgb(0 0 0 / .08); }
.kopf__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--kopf-hoehe); gap: 16px; }

.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); }
.marke:hover { color: var(--c-text); }
.marke__logo { width: 44px; height: 44px; object-fit: contain; }
.marke__text { display: flex; flex-direction: column; line-height: 1.1; }
.marke__text strong { font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 800; white-space: nowrap; }
.marke__text small { font-size: .8rem; font-weight: 600; color: var(--c-text-leise); letter-spacing: .04em; text-transform: uppercase; }

.hauptmenu { display: flex; align-items: center; gap: 4px; }
.hauptmenu a { white-space: nowrap; }
.hauptmenu a:not(.btn) {
  padding: .5em .75em; border-radius: 999px;
  font-weight: 600; color: var(--c-text); text-decoration: none;
}
.hauptmenu a:not(.btn):hover { background: var(--c-haupt-hell); color: var(--c-link); }
.hauptmenu a[aria-current="page"] { background: var(--c-haupt-hell); color: var(--c-link); }
.hauptmenu .btn { margin-left: 8px; }
.hauptmenu .btn--mitglied { color: var(--c-link); background: transparent; border-color: var(--c-haupt); }
.hauptmenu .btn--mitglied:hover { color: var(--c-auf-haupt); background: var(--c-haupt); }
.hauptmenu .btn--fb { width: 40px; padding: 0; margin-left: 4px; }
.nur-mobil { display: none; }

.menu-knopf {
  display: none; width: 48px; height: 48px; padding: 0;
  align-items: center; justify-content: center;
  color: var(--c-text); background: transparent;
  border: 1px solid var(--c-linie); border-radius: 12px; cursor: pointer;
}
.menu-knopf .icon { width: 26px; height: 26px; }

/* bis 1240 px: Aufklapp-Menü (sonst bricht „MSV Hürtgenwald e.V.“ + Menü um) */
@media (max-width: 1240px) {
  .menu-knopf { display: inline-flex; }
  .hauptmenu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 20px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-linie);
    box-shadow: 0 16px 30px rgb(0 0 0 / .15);
    display: none;
  }
  .hauptmenu.ist-offen { display: flex; }
  .hauptmenu a:not(.btn) { padding: .85em 1em; font-size: 1.1rem; border-radius: 12px; }
  .hauptmenu .btn { margin: 10px 0 0; }
  .hauptmenu .btn--fb { width: auto; padding: .4em 1em; margin: 8px 0 0; }
  .nur-mobil { display: inline; }
}

/* ==========================================================================
   6. ABSCHNITTE & SEITENKOPF (Unterseiten)
   ========================================================================== */
.abschnitt {
  --abstand: clamp(56px, 9vw, 104px);
  --abstand-oben: var(--abstand);
  padding: var(--abstand-oben) 0 var(--abstand);
  background: var(--c-bg); color: var(--c-text);
  /* Sprung per Menü/Anker: direkt beim Text landen, nicht beim leeren Abstand darüber */
  scroll-margin-top: calc(14px - var(--abstand-oben));
}
.abschnitt--getoent { --c-bg: var(--c-bg-alt); }
.abschnitt__kopf { max-width: 46em; margin-bottom: clamp(28px, 4vw, 44px); }
.abschnitt__kopf p:not(.eyebrow) { color: var(--c-text-leise); font-size: 1.12rem; }
.abschnitt__kopf--zeile { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.abschnitt__kopf--zeile h2 { margin-bottom: 0; }

.seitenkopf {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(20px, 3vw, 34px) 0 clamp(20px, 3vw, 30px);
  background: var(--c-bg); color: var(--c-text);
}
.seitenkopf__foto { position: absolute; inset: 0; z-index: -2; }
.seitenkopf__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.seitenkopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--c-bg) 72%, transparent) 55%, color-mix(in srgb, var(--c-bg) 35%, transparent) 100%);
}
.seitenkopf h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; margin-bottom: .15em; text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.seitenkopf__lead { max-width: 46em; font-size: clamp(1rem, 1.4vw, 1.1rem); opacity: .92; margin: 0; }
.seitenkopf .eyebrow { margin-bottom: .35em; }
.seitenkopf + .abschnitt { --abstand-oben: clamp(28px, 4vw, 48px); }

.zurueck { display: inline-flex; align-items: center; gap: .4em; margin-bottom: 24px; font-weight: 700; text-decoration: none; }
.zurueck .icon { transform: rotate(180deg); }

/* ==========================================================================
   7. STARTSEITE & STRECKE
   ========================================================================== */

/* ---------- Startbereich: großes Foto, oben und unten abgedunkelt ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(92vh, 860px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(40px, 6vw, 72px) 0 0;
  background: var(--c-bg); color: var(--c-text);
}
.hero__foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 70%;
  animation: hero-zoom 30s ease-in-out infinite alternate;
}
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 60% at 22% 34%, color-mix(in srgb, var(--c-bg) 70%, transparent) 0%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 66%, transparent) 42%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, var(--c-bg) 92%, transparent) 0%, transparent 24%);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: start;
  gap: clamp(28px, 5vw, 64px);
}
.hero__marke {
  margin-bottom: 14px; font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-leise);
}
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .98; text-shadow: 0 2px 24px rgb(0 0 0 / .4); }
.hero__lead {
  font-size: clamp(1.1rem, 1.7vw, 1.28rem); font-weight: 500; color: #fff; max-width: 34em;
  text-shadow: 0 1px 2px rgb(0 0 0 / .85), 0 0 16px rgb(0 0 0 / .6);
}
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .btn--hell { color: #fff; border-color: rgb(255 255 255 / .7); background: rgb(0 0 0 / .2); backdrop-filter: blur(4px); }
.hero .btn--hell:hover { color: #fff; border-color: #fff; background: rgb(255 255 255 / .14); }

/* Karte „Nächster Termin“: durchsichtig, wehende Zielflagge rechts, Mini-Rennen unten */
.naechster {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; justify-self: end; align-self: end; width: min(100%, 490px);
  padding: 16px 44px 26px 16px;
  color: var(--c-text); text-decoration: none;
  background: color-mix(in srgb, var(--c-bg) 58%, transparent); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--c-akzent) 45%, transparent); border-radius: 16px;
  box-shadow: 0 14px 34px rgb(0 0 0 / .3);
  transition: transform .15s;
}
.naechster:hover { color: var(--c-text); transform: translateY(-2px); }
.naechster .kachel { width: 96px; min-height: 72px; border-radius: 12px; }
.naechster .kachel { --innen: 86px; }
.naechster .kachel__serie { font-size: min(1.45rem, calc(var(--innen) / (var(--z, 6) * .56))); }
.naechster__text { min-width: 0; }
.naechster small { display: block; font-size: .88rem; font-weight: 700; letter-spacing: 0; color: var(--c-text-leise); }
.naechster__links { display: flex; flex-direction: column; align-items: center; gap: 6px; }   /* „in 3 Wochen“ über der Kachel */
.naechster__abstand { padding: .15em .65em; border-radius: 999px; background: var(--c-flaeche-2); color: var(--c-text); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.naechster strong { display: block; margin: 2px 0 3px; font-family: var(--schrift-titel); font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.naechster .leise { display: block; font-size: 1.06rem; color: var(--c-text-leise); }

/* Flagge: 8 Streifen mit Karomuster, zeitversetzt schwingend; je zwei Streifen = ein Karo */
.naechster__flagge {
  position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  display: flex; opacity: .85; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
          mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.naechster__flagge i {
  flex: 1; margin: -8px 0;
  background: repeating-linear-gradient(180deg, #f2f2f2 0 8px, #141414 8px 16px);
  animation: flagge-wehen 2.4s ease-in-out infinite;
}
.naechster__flagge i:nth-child(4n+1), .naechster__flagge i:nth-child(4n+2) { background-position: 0 0; }
.naechster__flagge i:nth-child(4n+3), .naechster__flagge i:nth-child(4n)   { background-position: 0 8px; }
.naechster__flagge i:nth-child(2) { animation-delay: -.15s; }
.naechster__flagge i:nth-child(3) { animation-delay: -.3s; }
.naechster__flagge i:nth-child(4) { animation-delay: -.45s; }
.naechster__flagge i:nth-child(5) { animation-delay: -.6s; }
.naechster__flagge i:nth-child(6) { animation-delay: -.75s; }
.naechster__flagge i:nth-child(7) { animation-delay: -.9s; }
.naechster__flagge i:nth-child(8) { animation-delay: -1.05s; }
@keyframes flagge-wehen {
  0%, 100% { transform: translateY(-3px); filter: brightness(1); }
  50%      { transform: translateY(3px);  filter: brightness(.72); }
}
/* Mini-Rennen: zwei Autos, das orange überholt nach etwa 60 % der Strecke */
.naechster__rennen {
  position: absolute; left: 16px; right: 30px; bottom: 3px; height: 15px;
  overflow: hidden; pointer-events: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-text) 18%, transparent);
}
.rennauto { position: absolute; bottom: 1px; left: -30px; width: 26px; height: 12px; }
.rennauto svg { display: block; width: 100%; height: 100%; }
.rennauto--1 { color: var(--c-akzent); z-index: 2; animation: rennen-1 5s infinite; }
.rennauto--2 { color: #e9ecea; bottom: 3px; width: 23px; height: 11px; opacity: .85; animation: rennen-2 5s infinite; }
@keyframes rennen-1 {
  0%   { left: -30px; animation-timing-function: cubic-bezier(.55, 0, .7, .8); }
  66%  { left: 100%; }
  100% { left: 100%; }
}
@keyframes rennen-2 {
  0%   { left: -14px; animation-timing-function: cubic-bezier(.25, 0, .65, .85); }
  80%  { left: 100%; }
  100% { left: 100%; }
}

/* Kurzfakten: durchsichtiger Streifen über die ganze Breite */
.fakten {
  list-style: none; padding: 16px 0 18px; margin: clamp(32px, 5vw, 56px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--c-bg) 48%, transparent);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--c-bg) 48%, transparent);
  clip-path: inset(0 -100vmax);
  border-top: 1px solid rgb(255 255 255 / .14);
}
.fakten li { padding: 0 18px; border-left: 1px solid rgb(255 255 255 / .18); }
.fakten li:first-child { padding-left: 0; border-left: 0; }
.fakt__emoji { font-size: .78rem; vertical-align: .2em; margin-left: .25em; }
.fakten strong { display: block; font-family: var(--schrift-titel); font-size: 1.6rem; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.fakten li > span { font-size: 1rem; color: var(--c-text-leise); }

@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: 36px; }
  .hero::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 80%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 68%, transparent) 50%, color-mix(in srgb, var(--c-bg) 92%, transparent) 100%);
  }
  .hero__inner { grid-template-columns: 1fr; gap: 26px; }
  .naechster { justify-self: stretch; width: 100%; }
  .fakten { grid-template-columns: repeat(2, 1fr); row-gap: 16px; margin-top: 28px; }
  .fakten li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 420px) {
  .hero__knoepfe .btn { width: 100%; }
  .naechster { gap: 14px; padding: 14px 44px 24px 14px; }
  .naechster .kachel { width: 80px; min-height: 66px; }
  .naechster .kachel { --innen: 70px; }
  .naechster .kachel__serie { font-size: min(1.2rem, calc(var(--innen) / (var(--z, 6) * .56))); }
  .naechster strong { font-size: 1.35rem; }
  .fakten li { padding: 0 12px; }
  .fakten strong { font-size: 1.3rem; }
  .fakt__emoji { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__foto img, .naechster__flagge i { animation: none; }
  .naechster__rennen { display: none; }
}

/* ---------- Strecken-Karte (Startseite: Teaser, strecke.html: Streckendaten) ---------- */
.strecke-haupt { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
.strecke-haupt img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
/* Startseite: Foto ist ein Link wie der Knopf daneben */
.bild-link { display: block; overflow: hidden; }
.bild-link img { transition: transform .35s; }
.bild-link:hover img { transform: scale(1.03); }
.strecke-haupt__text { padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; }
.strecke-haupt h3, .strecke-haupt__titel { font-size: clamp(1.7rem, 3vw, 2.2rem); }

.strecke-daten { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; margin: 6px 0 18px; }
.strecke-daten div { padding: 10px 0; border-bottom: 1px solid var(--c-linie); }
.strecke-daten div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.strecke-daten dt { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-leise); }
.strecke-daten dd { margin: 0; font-weight: 600; line-height: 1.35; }

.strecke-anfahrt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: auto 0 0; padding-top: 8px; }
.strecke-anfahrt .textlink { margin: 0; }
.strecke-anfahrt__adresse { color: var(--c-text-leise); font-size: .95rem; }

/* HK-Cup-Hinweis auf der Startseite: gleiches Raster wie die Strecken-Karte */
.hkcup-hinweis {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center;
  margin-top: 20px; padding: 0; overflow: hidden;
}
.hkcup-hinweis img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 2 / 1; object-fit: cover; }
.hkcup-hinweis > div { padding: clamp(20px, 3vw, 32px) clamp(22px, 3.5vw, 40px); }
.hkcup-hinweis .etikett { margin-bottom: .5em; }
.hkcup-hinweis h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: .25em; }   /* wie „Außenstrecke Kleinhau“ */
.hkcup-hinweis p { color: var(--c-text-leise); font-size: .95rem; margin-bottom: .5em; }
.hkcup-hinweis__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.hkcup-hinweis__links .textlink { font-size: .95rem; }

/* Teaser auf der Startseite: Bild 2:1 wie beim HK-Cup-Hinweis, nur Titel, ein Satz, Knopf */
.strecke-haupt--teaser img { min-height: 0; aspect-ratio: 2 / 1; }
.strecke-haupt--teaser .strecke-haupt__text { justify-content: center; }
.strecke-haupt--teaser .strecke-haupt__text > p:not(.etikett):not(.strecke-teaser__knopf) { color: var(--c-text-leise); margin-bottom: .8em; }
.strecke-teaser__knopf { margin: .4em 0 0; }
.strecke-haupt--teaser .etikett, .hkcup-hinweis .etikett { font-size: .95rem; }
@media (min-width: 861px) {
  .strecke-haupt--teaser .strecke-haupt__text { padding: 28px 32px; }
  .strecke-haupt--teaser h3, .hkcup-hinweis h3 { font-size: 1.8rem; margin-bottom: .2em; }
  .strecke-haupt--teaser .strecke-haupt__text > p:not(.etikett) { margin-bottom: .3em; font-size: .98rem; }
}

/* Handy/Tablet: Bild über Text als normaler Block statt Grid
   (Safari berechnet sonst die Bildzeile nach dem Original-Seitenverhältnis → Lücke) */
@media (max-width: 860px) {
  .strecke-haupt, .hkcup-hinweis { display: block; }
  .strecke-haupt img, .hkcup-hinweis img { display: block; height: auto; }
  .strecke-haupt:not(.strecke-haupt--teaser) img { min-height: 0; aspect-ratio: 16 / 10; }
  .strecke-anfahrt { margin-top: 0; }
}
@media (max-width: 640px) { .hkcup-hinweis > div { padding: 18px 22px 22px; } }
@media (max-width: 420px) { .strecke-daten { grid-template-columns: 1fr; } }

/* ---------- Gastfahren: Schritte + Einsteiger-Tipp HK-Modellbau ---------- */
.schritte {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.schritt { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; align-items: start; align-content: start; padding: 26px 24px; }
.schritt h3 { margin-bottom: .3em; }
.schritt__nr {
  grid-row: span 2;
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0;
  font-family: var(--schrift-titel); font-size: 1.6rem; font-weight: 800;
  color: var(--c-auf-haupt); background: var(--c-haupt); border-radius: 50%;
}

.auto-tipp {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 44px); align-items: start;
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--c-akzent-hell), var(--c-flaeche) 70%);
  border: 2px solid color-mix(in srgb, var(--c-akzent) 55%, transparent);
}
.auto-tipp__logo {
  display: grid; place-items: center; width: clamp(150px, 16vw, 200px); padding: 16px 18px;
  background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgb(0 0 0 / .08);
  transition: transform .15s;
}
.auto-tipp__logo:hover { transform: translateY(-2px); }
.auto-tipp__logo img { width: 100%; height: auto; display: block; }
.auto-tipp h3 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; margin-bottom: .35em; }
.auto-tipp__text .eyebrow { color: var(--c-akzent-text); }
.auto-tipp__lead { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.auto-tipp__text p { max-width: 46em; }
.auto-tipp__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.auto-tipp__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.auto-tipp__chips li {
  padding: .3em .9em; border-radius: 999px; font-weight: 700; font-size: .92rem;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
}
@media (max-width: 820px) {
  .schritte { grid-template-columns: 1fr; gap: 14px; }
  .schritt { padding: 22px; }
}
@media (max-width: 640px) {
  .auto-tipp { grid-template-columns: 1fr; }
  .auto-tipp__reihe .btn { width: 100%; }
}

/* ---------- Mehr von uns (Facebook, YouTube, Instagram) ---------- */
.kanaele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kanal {
  display: flex; flex-direction: column; padding: 28px 26px;
  color: var(--c-text); text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.kanal:hover { color: var(--c-text); transform: translateY(-3px); }
.kanal .icon--gross { width: 56px; height: 56px; padding: 12px; margin-bottom: 18px; border-radius: 16px; color: #fff; }
.kanal p { color: var(--c-text-leise); flex: 1; }
.kanal .textlink { margin-top: 12px; }
.kanal--facebook .icon--gross  { background: #1f5fd1; }
.kanal--youtube  .icon--gross  { background: #d42a2a; }
.kanal--instagram .icon--gross { background: linear-gradient(135deg, #f6a53b, #d6307a 55%, #7a3fd0); }
.kanal--facebook { border-width: 2px; }
.kanal--facebook:hover  { border-color: #1f5fd1; }
.kanal--youtube:hover   { border-color: #d42a2a; }
.kanal--instagram:hover { border-color: #d6307a; }
@media (max-width: 820px) {
  .kanaele { grid-template-columns: 1fr; gap: 12px; }
  .kanal { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding: 20px; }
  .kanal .icon--gross { grid-row: span 3; margin: 0; }
  .kanal h3 { margin-bottom: .15em; }
  .kanal .textlink { margin-top: 6px; }
}

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.kontakt__seite { display: grid; gap: 12px; }

.formular { padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; }
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feld { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.feld small { font-weight: 400; color: var(--c-text-leise); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 46px; padding: .6em .8em;
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-linie); border-radius: var(--radius-k);
}
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--c-haupt); outline-offset: 1px; border-color: transparent; }
.feld--frage input { max-width: 14em; }
.feld--frage b { font-weight: 700; color: var(--c-link); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--c-text-leise); }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c-haupt); }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.formular__fuss .btn:disabled { opacity: .6; cursor: wait; }
.formular__status { margin: 0; font-weight: 600; font-size: .95rem; }
.formular__status--ok { color: var(--c-link); }
.formular__status--fehler { color: var(--c-fehler); }
.formular__status--info { color: var(--c-akzent-text); }
/* Spam-Falle: für Menschen unsichtbar (nicht display:none – manche Bots erkennen das) */
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kontakt__karte {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px;
  color: var(--c-text); text-decoration: none; transition: transform .15s, border-color .15s;
}
.kontakt__karte:hover { color: var(--c-text); transform: translateY(-2px); border-color: var(--c-haupt); }
.kontakt__karte .icon--gross { color: var(--c-link); }
.kontakt__karte h3 { font-size: 1.25rem; margin: 0 0 .1em; }
.kontakt__karte p { color: var(--c-text-leise); margin: 0; word-break: break-word; }
.kontakt__karte--haupt { background: var(--c-haupt); border-color: var(--c-haupt); color: var(--c-auf-haupt); }
.kontakt__karte--haupt:hover { color: var(--c-auf-haupt); background: var(--c-haupt-hover); }
.kontakt__karte--haupt .icon--gross, .kontakt__karte--haupt p { color: var(--c-auf-haupt); }
.kontakt__karte--haupt p { opacity: .85; }
@media (max-width: 860px) { .kontakt { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .formular__reihe { grid-template-columns: 1fr; } .kontakt__karte { padding: 18px; } .formular__fuss .btn { width: 100%; } }

/* ---------- Strecke: Livebild & Video ---------- */
.live-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.live-karte { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.live-karte h3 { display: flex; align-items: center; gap: .45em; margin: 0; font-size: 1.3rem; }
.live-karte h3 .icon { width: 1.1em; height: 1.1em; color: var(--c-link); }
.livebild, .video { flex: 1; display: flex; flex-direction: column; }
.livebild__bald {
  flex: 1; display: block; margin: 0; padding: 56px 28px; text-align: center; line-height: 1.6;
  border: 2px dashed var(--c-linie); border-radius: var(--radius-k); color: var(--c-text-leise);
}
.livebild__bild { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-k); background: var(--c-flaeche-2); }
.livebild__stand { display: flex; align-items: center; gap: .5em; margin: 8px 0 0; font-size: .9rem; color: var(--c-text-leise); }
.livebild__stand b { font-weight: 600; }
.livebild__punkt { flex: none; width: .6em; height: .6em; border-radius: 50%; background: #e0322d; animation: live-blinken 1.6s ease-in-out infinite; }
@keyframes live-blinken { 50% { opacity: .3; } }

/* Video: Vorschaubild mit Play-Knopf, YouTube lädt erst nach dem Klick */
.video__start {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit;
  border-radius: var(--radius-k); overflow: hidden; background: #000; aspect-ratio: 16 / 9;
}
.video__start img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .2s; }
.video__start:hover img { opacity: .9; }
.video__play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--c-haupt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 6l10 6-10 6z'/%3E%3C/svg%3E") center / 44% no-repeat;
  box-shadow: 0 6px 20px rgb(0 0 0 / .35);
}
.video__text { position: absolute; left: 0; right: 0; bottom: 12px; color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgb(0 0 0 / .6); }
.video__hinweis { margin: 10px 0 0; font-size: .85rem; color: var(--c-text-leise); }
.video__rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-k); overflow: hidden; background: #000; }
.video__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Strecke: Streckenordnung & Anfahrt ---------- */
.ordnung { margin: 0; padding: 12px 28px 12px 56px; counter-reset: regel; list-style: none; }
.ordnung li { position: relative; padding: 12px 0; border-bottom: 1px solid var(--c-linie); line-height: 1.5; counter-increment: regel; }
.ordnung li:last-child { border-bottom: 0; }
.ordnung li::before {
  content: counter(regel); position: absolute; left: -38px; top: 11px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--schrift-titel); font-weight: 800; font-size: .95rem;
  color: var(--c-auf-haupt); background: var(--c-haupt);
}
.ordnung li.ordnung__folgt { counter-increment: none; color: var(--c-text-leise); font-style: italic; }
.ordnung li.ordnung__folgt::before { content: none; }

.anfahrt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(22px, 3vw, 34px); }
.anfahrt h2 { margin-bottom: .3em; }
.anfahrt__adresse { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.anfahrt__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  .live-raster { grid-template-columns: 1fr; }
  .ordnung { padding: 6px 18px 6px 48px; }
  .anfahrt__knoepfe .btn { width: 100%; }
}

/* ==========================================================================
   8. RENNKALENDER
   ========================================================================== */

/* Filterleiste: [Alle | 1:10 | 1:8]  [Serie ▾]  [⌂ Bei uns] */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.segment { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--c-flaeche-2); }
.segment button {
  min-height: 38px; padding: .2em 1.05em; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--c-text-leise); background: transparent;
}
.segment button[aria-pressed="true"] { color: var(--c-text); background: var(--c-flaeche); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.auswahl { position: relative; display: inline-flex; }
.auswahl::after {
  content: ""; position: absolute; right: 1em; top: 50%; width: .45em; height: .45em; pointer-events: none;
  border-right: 2px solid var(--c-text-leise); border-bottom: 2px solid var(--c-text-leise);
  transform: translateY(-70%) rotate(45deg);
}
.auswahl select {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: .3em 2.4em .3em 1.1em; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem; color: var(--c-text);
  background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: 999px;
}
.umschalter {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .3em 1.05em; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem; color: var(--c-text);
  background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: 999px;
}
.umschalter .icon { width: 1.05em; height: 1.05em; }
.umschalter[aria-pressed="true"] { color: var(--c-auf-haupt); background: var(--c-haupt); border-color: var(--c-haupt); }

/* Liste */
.termine { list-style: none; padding: 0; margin: 0; }
.termine.karte { overflow: clip; }   /* clip statt hidden: sonst bleiben die Monats-Überschriften nicht oben stehen */
/* Rennkalender: hell, aber mit kräftigeren Linien und Texten als der Rest der Seite */
#termine { --c-bg: #dfe5de; --c-linie: #bcc8bf; --c-text-leise: #3b4842; }
.termin { position: relative; }
.termin--t2 {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px;
  padding: 10px 18px; border-top: 1px solid var(--c-linie);
}
.termin--t2:first-child { border-top: 0; }

/* Monats-Überschrift im Rennkalender – bleibt beim Scrollen unter dem Menü stehen */
.termine__monat {
  position: sticky; top: var(--kopf-hoehe); z-index: 3;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 18px; border-top: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie);
  background: color-mix(in srgb, var(--c-text) 7%, var(--c-flaeche));
}
.termine__monat:first-child { border-top: 0; }
/* Normale statt schmaler Schrift für bessere Lesbarkeit (wie die Jahreszahlen im Zeitstrahl) */
.termine__monat h2 {
  margin: 0; font-family: var(--schrift-text); font-size: 1.12rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums; color: var(--c-haupt);
}
.termine__monat + .termin--t2 { border-top: 0; }

/* Zeile 1: Datum · Ort · Infos (+ „in 5 Tagen“), Zeile 2: Titel */
.termin__zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin: 0 0 1px; font-size: .97rem; color: var(--c-text-leise);
}
.termin__datum { font-weight: 700; color: var(--c-text); white-space: nowrap; }
.termin__wo::before { content: "·"; margin-right: 8px; color: var(--c-text-leise); }
.termin__zeile a { white-space: nowrap; }
.termin h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 0; font-family: var(--schrift-text); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: 0;
}

/* Kachel links am Termin: Serie + Klasse, zart in der Serienfarbe (--art kommt aus script.js).
   Mischt mit Flächen-/Textfarbe → passt auf hellem und dunklem Grund (Startseite). */
.kachel {
  position: relative; overflow: hidden; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 96px; min-height: 54px; padding: 6px 5px; border-radius: 10px;
  text-align: center; line-height: 1.05;
  background: color-mix(in srgb, var(--art, #8a949b) 18%, var(--c-flaeche));
  border: 1px solid color-mix(in srgb, var(--art, #8a949b) 38%, var(--c-flaeche));
  color: color-mix(in srgb, var(--art, #8a949b) 45%, var(--c-text));
}
/* Schrift schrumpft bei langen Namen (--z = Zeichen des längsten Namens, aus script.js), damit nichts umbricht */
.kachel { --innen: 84px; }
.kachel__serie { font-family: var(--schrift-titel); font-size: min(1.32rem, calc(var(--innen) / (var(--z, 6) * .56))); font-weight: 800; letter-spacing: .01em; }
.kachel--mehr .kachel__serie { font-size: min(1.08rem, calc(var(--innen) / (var(--z, 6) * .56))); }
.kachel__klasse { font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: var(--c-text); opacity: .8; }
.kachel--streifen { padding-bottom: 11px; }
.kachel--streifen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--art-streifen); opacity: .75; }

/* Eigene Termine: grün getönt, Streifen links, Haus-Symbol */
.termin--eigen { background: color-mix(in srgb, var(--c-haupt) 14%, var(--c-flaeche)); }
.termin--eigen::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-haupt);
}
.eigen-marke { display: inline-flex; color: var(--c-link); }
.eigen-marke .icon { width: 1em; height: 1em; }

.termin__abstand {
  font-family: var(--schrift-text); font-size: .78rem; font-weight: 700; white-space: nowrap; line-height: 1.3;
  padding: .25em .7em; border-radius: 999px;
  color: var(--c-text-leise); background: var(--c-flaeche-2);
}
.termin--bald .termin__abstand { color: var(--c-auf-akzent); background: var(--c-akzent); }

/* Kalender-Knopf (.ics bzw. Google-Kalender) */
.kal-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; flex: none;
  min-height: 40px; padding: .25em .95em; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--c-link);
  background: transparent; border: 1.5px solid var(--c-linie); border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.kal-knopf:hover { background: var(--c-haupt-hell); border-color: var(--c-link); }
.kal-knopf .icon { width: 1.15em; height: 1.15em; }
.kal-knopf--icon { width: 42px; height: 42px; padding: 0; }
.kal-platz { width: 42px; }

.termine__leer { padding: 24px 0; color: var(--c-text-leise); }
.termine__trenner {
  padding: 12px 18px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-leise); background: var(--c-flaeche-2); border-top: 1px solid var(--c-linie);
}
.termin--vergangen { opacity: .62; }
.termin--vergangen .kachel { filter: grayscale(1); }
.termin--vergangen::before { opacity: .5; }
.termine__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; }
.termine__aktionen .btn { margin: 0; }
.termine__fuss { margin-top: 14px; font-size: .85rem; color: var(--c-text-leise); }

@media (max-width: 640px) {
  .filter { gap: 8px; }
  .segment { width: 100%; }
  .segment button { flex: 1; }
  .auswahl { flex: 1; }
  .auswahl select { width: 100%; }

  .termin--t2 { grid-template-columns: 82px 1fr auto; gap: 12px; padding: 10px 12px; }
  .kachel { width: 82px; }
  .kachel { --innen: 72px; }
  .kachel__serie { font-size: min(1.15rem, calc(var(--innen) / (var(--z, 6) * .56))); }
  .kachel--mehr .kachel__serie { font-size: min(.95rem, calc(var(--innen) / (var(--z, 6) * .56))); }
  .termin h3 { font-size: 1.04rem; }
  .termin__zeile { font-size: .92rem; }
  .termin__abstand { order: 1; }
  .termin__wo { order: 2; flex-basis: 100%; }   /* Handy: Ort + Infos in eigener Zeile unter dem Datum */
  .termin__wo::before { content: none; }
  .termine__monat { padding: 8px 12px; }
}

/* ==========================================================================
   9. GALERIE & GROSSANSICHT
   ========================================================================== */
.galerie {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.galerie button {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--c-linie); border-radius: var(--radius-k); overflow: hidden;
  aspect-ratio: 4 / 3;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.galerie button:hover img { transform: scale(1.04); }
.galerie li:first-child { grid-column: span 2; grid-row: span 2; }
.galerie li:first-child button { aspect-ratio: auto; height: 100%; }
/* Vorschau auf strecke.html: Links statt Knöpfe */
.galerie a { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-k); overflow: hidden; background: var(--c-linie); }
.galerie li:first-child a { aspect-ratio: auto; height: 100%; }
.galerie a:hover img { transform: scale(1.04); }
.galerie__mehr-kanaele { margin-top: 24px; color: var(--c-text-leise); }
.galerie .galerie__leer { grid-column: 1 / -1; color: var(--c-text-leise); }
@media (max-width: 640px) {
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .galerie li:first-child { grid-column: span 2; grid-row: auto; }
  .galerie li:first-child button, .galerie li:first-child a { aspect-ratio: 4 / 3; }
}

.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: rgb(10 18 14 / .94); color: #fff;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; max-width: min(1200px, 100% - 140px); text-align: center; }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 8px; }
.lightbox figcaption { margin-top: 12px; font-size: 1.05rem; opacity: .9; }
.lightbox button {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  color: #fff; background: rgb(255 255 255 / .12); border: 0; border-radius: 50%; cursor: pointer;
}
.lightbox button:hover { background: rgb(255 255 255 / .24); }
.lightbox .icon { width: 26px; height: 26px; }
.lightbox__zu { position: absolute; top: 16px; right: 16px; }
.lightbox__nav { margin: 0 20px; flex: none; }
.lightbox__nav--zurueck .icon { transform: rotate(180deg); }
@media (max-width: 640px) {
  .lightbox figure { max-width: 100%; padding: 0 8px; }
  .lightbox__nav { position: absolute; bottom: 24px; margin: 0; }
  .lightbox__nav--zurueck { left: calc(50% - 64px); }
  .lightbox__nav:not(.lightbox__nav--zurueck) { right: calc(50% - 64px); }
}

/* ==========================================================================
   10. HK-CUP
   ========================================================================== */
.hk-fakten { list-style: none; margin: clamp(32px, 5vw, 56px) 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.hk-fakten:first-child { margin-top: 0; }
.hk-fakten li { display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 16px; border-radius: var(--radius-k); background: var(--c-flaeche); border: 1px solid var(--c-linie); }
.hk-fakten span { font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.hk-fakten strong { font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.hk-fakten small { color: var(--c-text-leise); font-size: .95rem; }
.hk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hk-block { padding: 24px 24px 22px; }
.hk-block h3 { margin: 0 0 .7em; font-size: 1.35rem; }

/* Ablauf eines Rennwochenendes: Punkte mit Verbindungslinie bis zum letzten Punkt */
.hk-ablauf { list-style: none; margin: 0; padding: 0; position: relative; }
.hk-ablauf li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 0 0 14px 24px; }
.hk-ablauf li:last-child { padding-bottom: 0; }
.hk-ablauf li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-haupt); z-index: 1; }
.hk-ablauf li::after { content: ""; position: absolute; left: 5px; top: 12px; bottom: -6px; width: 2px; background: var(--c-linie); }
.hk-ablauf li:last-child::after { display: none; }
.hk-ablauf time { font-weight: 700; color: var(--c-link); white-space: nowrap; }
.hk-ablauf span { font-weight: 600; }
.hk-ablauf small { display: block; font-weight: 400; color: var(--c-text-leise); }

.hk-klassen { list-style: none; margin: 0; padding: 0; }
.hk-klassen li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--c-linie); }
.hk-klassen li:first-child { padding-top: 0; }
.hk-klassen span { color: var(--c-text-leise); }
.hk-tipp { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-k); background: var(--c-flaeche-2); }
.hk-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin: 28px 0 0; }
.hk-video { padding: 12px; }
.hk-video--breit { margin-top: 24px; }
.hk-video .video__hinweis { margin: 10px 4px 2px; }
@media (max-width: 900px) { .hk-fakten { grid-template-columns: repeat(2, 1fr); } .hk-fakten li:last-child { grid-column: 1 / -1; } .hk-zwei { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .hk-ablauf li { grid-template-columns: 1fr; gap: 0; } }

/* ==========================================================================
   11. VEREIN
   ========================================================================== */
.geschichte { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.geschichte__text p:not(.eyebrow) { font-size: 1.1rem; }
.verein__link { margin-top: 1.4em; }
.foto-rahmen { margin: 0; }
.foto-rahmen img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-k); box-shadow: 0 14px 34px rgb(0 0 0 / .18); }
.foto-rahmen figcaption { margin-top: 10px; font-size: .95rem; color: var(--c-text-leise); }
/* Ohne Foto (bilder/verein/erste-strecke.jpg fehlt): Text in voller Breite */
.geschichte--ohne-foto { grid-template-columns: 1fr; }
.geschichte--ohne-foto .foto-rahmen { display: none; }
.geschichte--ohne-foto .geschichte__text { max-width: 52em; }
@media (max-width: 820px) { .geschichte { grid-template-columns: 1fr; } }

/* Zeitstrahl: Linie in der Mitte bis zum letzten Etikett, Karten abwechselnd links/rechts */
.zeitstrahl { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; position: relative; }
.zeit { position: relative; display: grid; grid-template-columns: 1fr 130px 1fr; column-gap: 18px; align-items: start; margin-bottom: 26px; }
.zeit:last-child { margin-bottom: 0; }
.zeit::before { content: ""; position: absolute; top: 20px; bottom: -46px; left: 50%; width: 2px; margin-left: -1px; background: var(--c-linie); }
.zeit:last-child::before { display: none; }
.zeit__jahr {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; margin-top: 16px;
  padding: .32em 1em; border-radius: 999px; white-space: nowrap;
  font-family: var(--schrift-text); font-weight: 700; font-size: 1.15rem; line-height: 1.3;
  letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums;
  color: var(--c-auf-haupt); background: var(--c-haupt);
}
.zeit__karte { grid-column: 1; grid-row: 1; padding: 20px 22px; }
.zeit:nth-child(even) .zeit__karte { grid-column: 3; }
.zeit__karte img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius-k); margin-bottom: 14px; }
.zeit__karte h3 { margin: 0 0 .35em; font-size: 1.35rem; color: var(--c-text); }
.zeit__karte p { margin: 0; color: var(--c-text); font-size: 1.05rem; line-height: 1.55; }
@media (max-width: 760px) {
  .zeit::before { left: 13px; top: 10px; }
  .zeit { grid-template-columns: 1fr; padding-left: 38px; }
  .zeit__jahr { grid-column: 1; grid-row: 1; justify-self: start; margin: 0 0 10px -38px; }
  .zeit__karte, .zeit:nth-child(even) .zeit__karte { grid-column: 1; grid-row: 2; }
}

/* Beiträge */
.beitraege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.beitrag { padding: 24px 24px 20px; border-top: 5px solid var(--c-haupt); }
.beitrag h3 { margin: 0 0 .6em; font-size: 1.35rem; }
.beitrag h3 small { font-size: .8em; font-weight: 600; color: var(--c-text-leise); }
.beitrag dl { margin: 0; }
.beitrag dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-linie); }
.beitrag dl div:last-child { border-bottom: 0; }
.beitrag dd { margin: 0; font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 800; white-space: nowrap; }
.beitrag dd small { font-family: var(--schrift-text); font-size: .55em; font-weight: 600; color: var(--c-text-leise); }
.beitrag__hinweis { margin: 10px 0 0; font-size: .95rem; color: var(--c-text-leise); }

/* Mitglied werden: Schritte, darunter die Knöpfe */
.mitglied-werden { max-width: 760px; }
.mitglied__schritte { margin: 0; padding-left: 1.3em; font-size: 1.08rem; }
.mitglied__schritte li { margin-bottom: .8em; padding-left: .2em; }
.mitglied__schritte li::marker { font-weight: 700; color: var(--c-link); }
.mitglied__knoepfe { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 1.6em 0 0; }
@media (max-width: 520px) { .mitglied__knoepfe .btn { width: 100%; justify-content: center; } }

/* ==========================================================================
   12. TIPPS & TRICKS
   ========================================================================== */
.tipps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.tipp { padding: 26px 26px 22px; }
.tipp h2 { font-size: 1.4rem; margin: 0 0 .6em; }
.tipp ul { margin: 0; padding-left: 1.2em; }
.tipp li { margin-bottom: .55em; }
.tipp li:last-child { margin-bottom: 0; }

/* Standard-Setups (Liste aus daten/setups.js) */
.setups { list-style: none; margin: 0; padding: 6px 24px; }
.setup { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 0; border-bottom: 1px solid var(--c-linie); }
.setup:last-child { border-bottom: 0; }
.setup__text { display: flex; flex-direction: column; min-width: 0; }
.setup__klasse { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-leise); }
.setup strong { font-size: 1.1rem; }
.setup__hinweis { color: var(--c-text-leise); font-size: .95rem; }
.setup .btn { flex: none; }
@media (max-width: 520px) { .setups { padding: 4px 18px; } .setup { flex-wrap: wrap; } }

/* ==========================================================================
   13. FUSSZEILE & „NACH OBEN“
   ========================================================================== */
.fuss { background: var(--c-bg); color: var(--c-text-leise); padding: 40px 0 44px; }
.fuss a { color: var(--c-text); }
.fuss__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.fuss__marke { display: flex; align-items: center; gap: 14px; }
.fuss__marke img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.fuss__marke strong { color: var(--c-text); }
.fuss__social { display: flex; gap: 10px; }
.fuss__social a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-flaeche-2);
}
.fuss__social a:hover { background: var(--c-linie); }
.fuss__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss__links a { text-decoration: none; font-weight: 600; }
.fuss__links a:hover { text-decoration: underline; }

.nach-oben {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--c-auf-haupt); background: var(--c-haupt);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s, transform .2s, background .15s;
}
.nach-oben .icon { width: 22px; height: 22px; transform: rotate(-90deg); }
.nach-oben:hover { color: var(--c-auf-haupt); background: var(--c-haupt-hover); }
.nach-oben--sichtbar { opacity: 1; transform: none; pointer-events: auto; }

/* ==========================================================================
   14. IMPRESSUM, DATENSCHUTZ, PRÜFSEITE
   ========================================================================== */
.rechtlich { padding: clamp(40px, 7vw, 80px) 0; background: var(--c-bg); color: var(--c-text); }
.rechtlich .container { max-width: 780px; }
.rechtlich h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.rechtlich h2 { font-size: 1.6rem; margin-top: 1.8em; }
.rechtlich h3 { font-size: 1.2rem; margin-top: 1.4em; }

/* Prüf-Kasten – nur auf pruefen.html */
.pruefkasten {
  margin: 18px 0 28px; padding: 16px 20px; border-radius: 12px;
  background: #fff6c2; border: 2px solid #e8c516; color: #4a3b00; font-size: .95rem;
}
.pruefkasten summary { cursor: pointer; }
.pruefkasten summary strong { font-size: 1.05rem; }
.pruefkasten p { margin: 10px 0 0; }
.pruefkasten ul { margin: 6px 0 0; padding-left: 1.2em; }
.pruefkasten code { background: rgb(0 0 0 / .06); padding: 0 .3em; border-radius: 4px; }
.pruefkasten--ok { background: #e3f6e9; border-color: #66bb85; color: #134a26; }
.pruef-seiten { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; list-style: none; }