/* Marke Jörn Kappenstein — Stilquelle der Website
 *
 * Die Farbwerte sind die Ausprägung von marke/tokens.css und damit des
 * Brand-Guides v1.0. Weicht ein Wert ab, gilt der Brand-Guide.
 *
 * Zwei Grundsätze tragen diese Datei:
 *
 * Fließend statt gestuft. Schriftgrade über clamp(), Raster über
 * auto-fit. Es soll keine Fensterbreite geben, bei der die Seite bricht.
 * Geprüft wird zuerst bei 390 Pixeln.
 *
 * Nichts von einem fremden Rechner. Schrift liegt lokal, kein
 * preconnect, kein CDN.
 */

/* ---------- Schrift ---------- */

@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Werte, gespiegelt aus marke/tokens.css ---------- */

:root {
  /* ---------- Verbindlich ---------- */
  --petrol:           #14333D;  /* Leitfarbe, Flächen, Tinte */
  --warmweiss:        #EFEAE2;  /* warme Grundfläche, Schrift auf Petrol */
  --amber-auf-hell:   #C87E3F;  /* CTA-Fläche und Schlüsselzahlen auf Hell */
  --amber-auf-dunkel: #D08C4A;  /* dieselbe Rolle auf Dunkel */

  /* Die beiden Amber sind getrennte Tokens und werden nie
     zusammengeführt. Die Verschiebung ist eine optische Korrektur. */

  /* ---------- Abgeleitet, aus der CI-Referenz übernommen ---------- */
  --petrol-tief:      #0C242C;  /* Fußbereich, Sport-Fläche */
  --petrol-hell:      #1E4A57;  /* Hover, Karten auf Petrol */
  --tinte:            #22282A;  /* Fließtext auf hellen Flächen */
  --linie-hell:       #E2E2DD;  /* Linien auf hellen Flächen */
  --kupfer-tief:      #8F5526;  /* Amber als Schrift auf Hell, 5,02 */

  /* ---------- Abgeleitet, Farbton 195° wie Petrol, Sättigung
       an dessen 51 % angeglichen. Jeder Wert gegen seinen
       tatsächlichen Untergrund gemessen. ---------- */
  --auf-petrol-text:  #C2D1D6;  /* 8,52 auf Petrol */
  --auf-petrol-leise: #9DB6BE;  /* 6,28 auf Petrol */
  --auf-petrol-linie: #3D545C;
  --auf-hell-leise:   #4F5B5F;  /* 5,86 auf Warmweiß — ersetzt #6F7C80 mit 3,60 */

  /* ---------- Flächenwechsel ---------- */
  --warmweiss-2:      #E6DFD3;  /* Sektionswechsel, abgeleitet aus Warmweiß */
  --eisblau:          #DDE7EA;  /* kühler Raumgeber, Farbton 195° */

  /* ---------- Semantisch: helle Fläche ---------- */
  --grund:        var(--warmweiss);
  --grund-wechsel:var(--warmweiss-2);
  --linie:        var(--linie-hell);
  /* Die Trennlinie zwischen Absaetzen. --linie-hell erreicht auf den
     hellen Flaechen nur 1,02 bis 1,09 und ist damit unsichtbar; die
     Leitfarbe mit 14 Prozent Deckkraft erreicht 1,28 auf allen dreien.
     Gemessen am 18.08.2026. */
  --trennlinie:   rgb(20 51 61 / 14%);
  --text:         var(--petrol);
  --text-fliess:  var(--tinte);
  --text-leise:   var(--auf-hell-leise);
  --akzent:       var(--amber-auf-hell);
  --cta-flaeche:  var(--amber-auf-hell);
  --cta-text:     var(--tinte);   /* 4,85 — CTA-Text nie weiß */
  --link:         var(--petrol);  /* 11,17 auf Warmweiß */
  --link-hover:   var(--kupfer-tief);  /* 5,02 auf Warmweiß */
  /* Rand eines Eingabefeldes. Eine Bedienflaeche braucht 3,0 gegen ihre
     eigene Flaeche; --linie-hell erreicht dort 1,09 und ist als Rand
     unsichtbar. Aus der Palette gemischt, nicht erfunden: Petrol mit
     60 % ueber Warmweiß. Gegen jede helle Flaeche gemessen, auf der ein
     Feld stehen kann. */
  --feldrand:     #6C7C7F;  /* 3,63 Warmweiß · 3,29 Warmweiß-2 · 3,46 Eisblau */

  /* ---------- Schrift ---------- */
  --schrift: 'Switzer', ui-sans-serif, -apple-system, 'Helvetica Neue', sans-serif;

  --gewicht-regular:  400;
  --gewicht-medium:   500;
  --gewicht-bold:     700;

  --display: clamp(34px, 6.2vw, 58px);   --display-zeile: 1.10;
  --h1:      clamp(28px, 4.6vw, 40px);   --h1-zeile:      1.15;
  --h2:      clamp(22px, 3.0vw, 28px);   --h2-zeile:      1.21;
  --h3:      clamp(18px, 2.0vw, 20px);   --h3-zeile:      1.30;
  --lead:    clamp(17px, 1.7vw, 19px);   --lead-zeile:    1.58;
  --body:    16px;                       --body-zeile:    1.625;
  /* 13 statt 11,5 Pixel. Die Augenbraue steht in Versalien mit 0,12 em
     Laufweite; bei 11,5 Pixeln war sie auf dem Handy schwer zu lesen.
     Geaendert am 19.08.2026. Betrifft jede Augenbraue auf allen Seiten und
     die Spaltenueberschriften im Fussbereich. */
  --label:   13px;

  --display-lauf: -0.015em;
  --h1-lauf:      -0.01em;
  --label-lauf:    0.12em;

  --raum-1:  8px;  --raum-2: 16px;  --raum-3: 24px;
  --raum-4: 40px;  --raum-5: 64px;  --raum-6: 96px;
  --mass: 62ch;
  --radius: 8px;
  --breite: 1200px;
}

/* ---------- Semantisch: Petrol-Fläche ----------
   Auf dunklem Grund gilt das helle Amber. Das dunkle würde die
   Lesbarkeit der Schrift darauf verschlechtern. */
[data-modus="dark"] {
  --feldrand:      #829CA4;   /* 4,61 Petrol · 3,33 Petrol-hell · 5,55 Petrol-tief */
  --trennlinie:    var(--auf-petrol-linie);   /* 1,67 auf Petrol */
  --grund:         var(--petrol);
  --grund-wechsel: var(--petrol-hell);
  --linie:         var(--auf-petrol-linie);
  --text:          var(--warmweiss);
  --text-fliess:   var(--auf-petrol-text);
  --text-leise:    var(--auf-petrol-leise);
  --akzent:        var(--amber-auf-dunkel);
  --cta-flaeche:   var(--amber-auf-dunkel);
  --cta-text:      var(--tinte);   /* 5,61 */
  --link:          var(--warmweiss);
  --link-hover:    var(--amber-auf-dunkel);  /* 4,80 auf Petrol */
}

/* ---------- Sport-Hybrid: tiefere Fläche, gleiche Palette ---------- */
[data-modus="sport"] {
  --feldrand:      #829CA4;   /* 4,61 Petrol · 3,33 Petrol-hell · 5,55 Petrol-tief */
  --trennlinie:    var(--auf-petrol-linie);   /* 2,01 auf der tiefen Flaeche */
  --grund:         var(--petrol-tief);
  --grund-wechsel: var(--petrol);
  --linie:         var(--auf-petrol-linie);
  --text:          var(--warmweiss);
  --text-fliess:   var(--auf-petrol-text);
  --text-leise:    var(--auf-petrol-leise);
  --akzent:        var(--amber-auf-dunkel);
  --cta-flaeche:   var(--amber-auf-dunkel);
  --cta-text:      var(--tinte);
  --display-lauf:  -0.025em;
  --h1-lauf:       -0.025em;
}

/* ---------- Grundgerüst ---------- */

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text-fliess);
  font-family: var(--schrift);
  font-size: var(--body);
  line-height: var(--body-zeile);
  -webkit-font-smoothing: antialiased;
}

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

/* Abschnittsüberschriften laufen auf der h1-Stufe, so wie im Entwurf:
   Seitentitel 58, Abschnitt 40, Karte 20. */
h1, h2, h3 { color: var(--text); font-weight: var(--gewicht-medium); margin: 0 0 var(--raum-3); text-wrap: balance; }
h1 { font-size: var(--display); line-height: var(--display-zeile); letter-spacing: var(--display-lauf); }
h2 { font-size: var(--h1); line-height: var(--h1-zeile); letter-spacing: var(--h1-lauf); }
h3 { font-size: var(--h3); line-height: var(--h3-zeile); }

p { margin: 0 0 var(--raum-2); max-width: var(--mass); text-wrap: pretty; }

/* Kein Unterstrich, nirgends. Der Zustand wird ueber die Farbe gezeigt.
   Der Hover-Ton ist gegen seinen Untergrund gemessen: 5,02 auf Warmweiss,
   4,80 auf Petrol -- beide tragen AA. */
a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus-visible { color: var(--link-hover); }

/* Amber auf Warmweiss erreicht 2,69 und ist damit nie Fliesstext.
   Links tragen deshalb Petrol, auf dunklen Flaechen Warmweiss. */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Bausteine ---------- */

/* Flächenrhythmus wie im Entwurf: hell, dunkel, eisblau im Wechsel.
   Eine Seite aus einer einzigen Fläche wirkt beliebig. */
.band {
  padding: var(--raum-6) var(--raum-3);
  background: var(--grund);
  color: var(--text-fliess);
}
.band--schmal { padding-block: var(--raum-5); }
/* Noch flacher als --schmal. Fuer das Zahlenband: seit dem 19.08. traegt
   jede der vier Zahlen nur noch eine kurze Zeile, und 64 Pixel oben wie
   unten waren dafuer zu viel Luft. Das Logoband behaelt --schmal, dort
   stehen 96 Pixel hohe Marken. */
.band--streifen { padding-block: var(--raum-4); }
/* Auf der warmen Flaeche hebt sich eine Karte nur ab, wenn sie den
   helleren Ton traegt. Ohne das stand die Angebotskarte im
   Sessions-Abschnitt auf derselben Farbe wie ihr Band und hing an Rand
   und Schatten allein. */
.band--warm   { background: var(--warmweiss-2); --grund-wechsel: var(--warmweiss); }
.band--eis    { background: var(--eisblau); }

/* Dunkle Bänder setzen zugleich den Modus, damit Text, Akzent und CTA
   darin automatisch die dunkle Ausprägung nehmen. */
.band--petrol, .band--tief, .band--mittel {
  --feldrand:      #829CA4;   /* 4,61 Petrol · 3,33 Petrol-hell · 5,55 Petrol-tief */
  --trennlinie:    var(--auf-petrol-linie);
  --grund:         var(--petrol);
  --grund-wechsel: var(--petrol-hell);
  --linie:         var(--auf-petrol-linie);
  --text:          var(--warmweiss);
  --text-fliess:   var(--auf-petrol-text);
  --text-leise:    var(--auf-petrol-leise);
  --akzent:        var(--amber-auf-dunkel);
  --link:          var(--warmweiss);
  --link-hover:    var(--amber-auf-dunkel);
  --cta-flaeche:   var(--amber-auf-dunkel);
  --cta-text:      var(--tinte);
  color: var(--text-fliess);
}
.band--petrol { background: var(--petrol); }
.band--tief   { background: var(--petrol-tief); }
/* Die dritte dunkle Flaeche. Gebraucht auf /sport/: dort rendert .band im
   Sport-Modus als Petrol-tief, .band--tief ebenfalls, und drei Paare
   gleicher Flaechen standen hintereinander. Der Abstand traegt --
   Petrol-hell zu Petrol-tief 1,67 und zu Petrol 1,38, beides mehr als die
   1,20 zwischen Petrol und Petrol-tief, die die Seite ohnehin schon nutzt.
   Gemessen am 19.08.2026.
   Eine Karte darauf nimmt Petrol, sonst laege sie auf ihrer eigenen Farbe. */
.band--mittel { background: var(--petrol-hell); --grund-wechsel: var(--petrol); }

.innen { max-width: var(--breite); margin-inline: auto; }
.innen--eng { max-width: 760px; }

.augenbraue {
  font-size: var(--label);
  letter-spacing: var(--label-lauf);
  text-transform: uppercase;
  font-weight: var(--gewicht-bold);
  color: var(--text-leise);
  margin: 0 0 var(--raum-2);
}
[data-modus="dark"] .augenbraue,
[data-modus="sport"] .augenbraue { color: var(--auf-petrol-text); }

.gross {
  font-size: var(--display);
  line-height: var(--display-zeile);
  letter-spacing: var(--display-lauf);
  font-weight: var(--gewicht-medium);
  color: var(--text);
  margin: 0 0 var(--raum-3);
  text-wrap: balance;
}

.lead { font-size: var(--lead); line-height: var(--lead-zeile); }

/* Raster ohne Media Query. Das min(100%, …) verhindert, dass eine Karte
   bei 390 Pixeln breiter wird als der Bildschirm. */
.raster {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.raster--schmal { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* 320px Mindestbreite ergibt bei 1200px Innenmaß genau drei Spalten:
   3 × 320 + 2 × 24 = 1008 passt, vier passen nicht. */
.raster--drei   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* 260px ergibt bei 1200px Innenmass genau vier Spalten. */
.raster--vier   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Zwei gleich breite Spalten, die bei schmalem Fenster untereinander
   rutschen. */
.zwei { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Kurzer Strich vor der Augenbraue, wie im Entwurf. */
.strich { display: inline-block; width: 28px; height: 2px; background: var(--akzent); vertical-align: middle; margin-inline-end: var(--raum-1); }

.termine { list-style: none; margin: var(--raum-3) 0 0; padding: 0; }
/* Die Zeilentrenner tragen --trennlinie, nicht --linie. #E2E2DD erreicht
   auf --warmweiss-2 nur 1,02 und war damit unsichtbar; gemessen am
   19.08.2026 im Sessions-Abschnitt. Als Kartenrand genuegt --linie, als
   Linie zwischen zwei Zeilen nicht. */
.termine li { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-3); justify-content: space-between;
              padding: var(--raum-2) 0; border-bottom: 1px solid var(--trennlinie); }
.termine li:last-child { border-bottom: none; }
.termine strong { color: var(--text); font-weight: var(--gewicht-medium); }
.termine span { color: var(--text-leise); }

.ablauf { list-style: none; counter-reset: schritt; margin: var(--raum-4) 0 0; padding: 0; }
.ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 28px 1fr; gap: var(--raum-1) var(--raum-2);
             padding-bottom: var(--raum-3); }
.ablauf li::before { content: counter(schritt); grid-row: span 2; color: var(--akzent);
                     font-weight: var(--gewicht-bold); font-size: var(--h3); line-height: 1.2; }
.ablauf strong { color: var(--text); font-weight: var(--gewicht-medium); }
.ablauf span { color: var(--text-fliess); }

/* Die Trennlinie hat ihren eigenen Token, weil --linie auf den hellen
   Flaechen nicht traegt: #E2E2DD erreicht 1,02 auf --warmweiss-2, 1,09 auf
   Warmweiss und 1,03 auf Eisblau. Als Kartenrand genuegt das, als einzige
   Linie zwischen zwei Absaetzen nicht.

   Nicht ueber color-mix mit currentColor geloest: der Browser rechnet
   currentColor darin zu Grau aus, gemessen am 18.08. als
   color(srgb 0.5 0.5 0.5 / 0.14). */
.trenner {
  border: none;
  border-top: 1px solid var(--trennlinie);
  margin: var(--raum-3) 0;
}

.karte {
  background: var(--grund-wechsel);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-3);
}
.karte > :last-child { margin-bottom: 0; }

/* Die Nummer traegt Amber und steht gross ueber dem Namen. Ab 19 px
   fett ist Amber als Schrift kontrastseitig zulaessig. */
.dimension__nr { display: flex; align-items: center; gap: var(--raum-2); font-size: var(--h3);
  font-weight: var(--gewicht-bold); color: var(--akzent); margin: 0 0 var(--raum-2); letter-spacing: var(--label-lauf); }
/* Neun Zeichen in einem Strich gezeichnet, nicht neun erzeugte Bilder.
   Gleiche Strichstaerke, gleiche Flaeche, skaliert verlustfrei. */
.zeichen { width: 28px; height: 28px; flex: none; }
.dimension h3 { font-size: var(--lead); margin-bottom: var(--raum-1); }

/* Die Programme tragen kein eigenes Logo. Wiedererkennung entsteht
   typografisch: Klarstark fett, der Bereich normal, darueber ein kurzer
   Strich in eigener Farbe. 44 x 3 Pixel, wie im Entwurf gemessen -- ein
   Strich ueber die volle Kartenbreite liest sich als Trennlinie, nicht
   als Zeichen. */
.programm__name { font-size: var(--h3); font-weight: var(--gewicht-regular); color: var(--text); margin: 0 0 var(--raum-2); }
.programm__name strong { font-weight: var(--gewicht-bold); }
.programm__name::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: var(--raum-3);
  background: var(--programm-farbe, var(--akzent));
}
.programm--schule { --programm-farbe: var(--auf-petrol-leise); }
.programm--team   { --programm-farbe: var(--petrol-hell); }
.programm--sport  { --programm-farbe: var(--amber-auf-dunkel); }

/* Eine Karte je Abschnitt darf dunkel setzen, so wie Sport im Entwurf. */
/* Die Karte setzt dieselben Tokens wie ein Petrol-Band, sonst zieht ein
   Zeichen darin das Amber der hellen Flaeche mit. Gemessen am 18.08. auf
   /schule/: der .strich in der hervorgehobenen Kursreihen-Karte stand auf
   #C87E3F statt auf #D08C4A. ci-farben.md Abschnitt 4: auf dunklem Grund
   gilt das helle Amber. */
.karte--petrol {
  --feldrand:      #829CA4;   /* 4,61 Petrol · 3,33 Petrol-hell · 5,55 Petrol-tief */
  --trennlinie:    var(--auf-petrol-linie);
  --grund-wechsel: var(--petrol);
  --text:          var(--warmweiss);
  --text-fliess:   var(--auf-petrol-text);
  --text-leise:    var(--auf-petrol-text);
  --link:          var(--amber-auf-dunkel);
  --link-hover:    var(--warmweiss);
  --linie:         var(--petrol-hell);
  --akzent:        var(--amber-auf-dunkel);
  --cta-flaeche:   var(--amber-auf-dunkel);
  --cta-text:      var(--tinte);
  background: var(--petrol);
  color: var(--auf-petrol-text);
}

/* Die Gegenrichtung zu .karte--petrol: eine helle Karte auf dunklem Band.
   Gebaut fuer das Duo-Formular, das seit dem 19.08. auf einem Petrol-Band
   steht. Auf Petrol-Hell erreichten die Feldraender dort 1,21 zur
   Kartenflaeche -- unter den 3,0, die eine Bedienflaeche braucht. Auf
   Warmweiss gelten wieder die gemessenen Werte des hellen Modus. */
.karte--hell {
  --trennlinie:    rgb(20 51 61 / 14%);
  --feldrand:      #6C7C7F;   /* 3,63 auf Warmweiß */
  --grund:         var(--warmweiss);
  --grund-wechsel: var(--warmweiss-2);
  --linie:         var(--linie-hell);
  --text:          var(--petrol);
  --text-fliess:   var(--tinte);
  --text-leise:    var(--auf-hell-leise);
  --akzent:        var(--amber-auf-hell);
  --cta-flaeche:   var(--amber-auf-hell);
  --cta-text:      var(--tinte);
  --link:          var(--petrol);
  --link-hover:    var(--kupfer-tief);
  background: var(--warmweiss);
  color: var(--tinte);
}

/* Große Antippflächen für die Quiz-Weiche. */
.wahl {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 96px;
  padding: var(--raum-3);
  /* Der Wechselton des jeweiligen Bandes, nicht ein fester Wert: die
     Quiz-Weiche stand bis zum 19.08. auf Eisblau und hob sich dadurch ab.
     Auf jeder anderen Flaeche braucht sie den Gegenton, sonst verschwindet
     sie im Grund. */
  background: var(--grund-wechsel);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--lead);
  font-weight: var(--gewicht-medium);
  text-decoration: none;
}
.wahl:hover { border-color: var(--akzent); color: var(--link); }

.knopf {
  display: inline-block;
  padding: 15px 30px;
  border: none;
  border-radius: var(--radius);
  background: var(--cta-flaeche);
  color: var(--cta-text);
  font-family: inherit;
  font-size: var(--lead);
  font-weight: var(--gewicht-bold);
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;            /* Antippfläche */
}
.knopf:hover { background: var(--petrol); color: var(--warmweiss); }

.knopf-zweit {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--lead);
  font-weight: var(--gewicht-medium);
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
}
.knopf-zweit:hover { background: var(--grund-wechsel); }

.preis {
  font-size: var(--h3);
  font-weight: var(--gewicht-bold);
  color: var(--text);
}
/* Schluesselzahlen tragen Amber. Ab 19 px fett ist das kontrastseitig
   zulaessig, als Fliesstext waere es das nicht. */
.zahl { font-size: var(--h1); font-weight: var(--gewicht-bold); color: var(--akzent); line-height: 1.1; }
.zahl--hell { color: var(--text); }
.zahl small { display: block; font-size: var(--body); font-weight: var(--gewicht-regular); color: var(--text-leise); margin-top: var(--raum-1); }
.preis small { display: block; font-size: var(--body); font-weight: var(--gewicht-regular); color: var(--text-leise); }

/* ---------- Formular ----------
 *
 * Eingabefelder tragen 48 Pixel Hoehe wie die Knoepfe, damit sie sich am
 * Handy treffen lassen. Die Schriftgroesse bleibt bei 16 Pixeln: darunter
 * zoomt iOS beim Antippen in das Feld hinein.
 *
 * Beschriftungen stehen sichtbar ueber dem Feld, nicht als Platzhalter im
 * Feld. Ein Platzhalter verschwindet beim Tippen und laesst den Nutzer
 * raten, was er gerade eintraegt.
 */

.formular { display: grid; gap: var(--raum-1); max-width: 420px; margin-top: var(--raum-4); }
.formular label { font-size: 14px; font-weight: var(--gewicht-medium); color: var(--text); }
.formular input[type="text"],
.formular input[type="email"],
.einblendung input[type="text"],
.einblendung input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  /* --feldrand statt --linie: #E2E2DD erreicht auf der Feldflaeche 1,09
     und macht den Rand eines Eingabefeldes damit unsichtbar. Eine
     Bedienflaeche braucht 3,0. Der Wert unten ist gemessen. */
  border: 1px solid var(--feldrand);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text-fliess);
  font-family: inherit;
  font-size: 16px;
  margin-bottom: var(--raum-2);
}
.formular input:focus-visible,
.einblendung input:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-color: var(--akzent);
}
.formular .knopf { justify-self: start; margin-top: var(--raum-1); }
/* In einer Spalte neben dem Text braucht das Formular die volle Breite
   der Karte, nicht die 420 Pixel des schmalen Falls unter /club/. */
.formular--breit { max-width: none; margin-top: 0; }
/* Zwei Felder nebeneinander, bei schmalem Fenster untereinander. Dieselbe
   Aufteilung wie in der Einblendung. */
.felderpaar { display: grid; gap: var(--raum-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.felderpaar input { margin-bottom: 0; }
.formular .auswahl { margin-bottom: var(--raum-2); }
.formular p { margin: var(--raum-2) 0 0; color: var(--text-leise); }
.formular p:last-child { margin-top: var(--raum-1); }

/* ---------- Kopf ---------- */

/* Kopf bleibt oben stehen und liegt halbdurchsichtig über dem Inhalt,
   wie im Entwurf. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--linie-hell);
  background: rgb(239 234 226 / 94%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kopf__marke img { width: 224px; }
.kopf nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3); margin-inline-start: auto; }
.kopf nav a { color: var(--text); font-weight: var(--gewicht-medium); }
/* --link ist die Ruhefarbe. Stand hier bis zum 19.08. auch als Hover-Wert
   und liess den Hover damit wirkungslos. Richtig ist --link-hover. */
.kopf nav a:hover, .kopf nav a:focus-visible { color: var(--link-hover); }
/* Der Knopf im Kopf braucht mehr Spezifitaet als die Zeile darueber.
   Sonst gewinnt .kopf nav a:hover mit (0,2,2) gegen .knopf-klein:hover mit
   (0,2,0), und der Knopf steht in Petrol auf Petrol: Kontrast 1,0.
   Gemessen am 19.08.2026 auf allen fuenf Seiten. */
.kopf nav .knopf-klein:hover,
.kopf nav .knopf-klein:focus-visible { background: var(--petrol); color: var(--warmweiss); }

/* Der Kopf traegt eine hart eingetragene helle Flaeche. Auf einer Seite im
   Sport-Modus stuenden Schrift und Rahmen sonst in den dunklen Werten und
   waeren auf dieser Flaeche unlesbar. Deshalb setzt der Kopf die hellen
   Tokens fuer sich zurueck, so wie Sticky-Leiste und Fussbereich die
   dunklen setzen. */
[data-modus="sport"] .kopf,
[data-modus="dark"] .kopf {
  --text:       var(--petrol);
  --link:       var(--petrol);
  --link-hover: var(--kupfer-tief);
  --linie:      var(--linie-hell);
  --akzent:     var(--amber-auf-hell);
}

/* ---------- Klappmenue im Kopf ----------
 *
 * Der Kopf braucht 863 Pixel, damit Wortmarke und Navigation in eine Zeile
 * passen -- gemessen am 19.08.2026. Darunter brach er auf drei Zeilen um
 * und nahm auf dem Handy die obere Bildschirmhaelfte ein, dauerhaft, weil
 * der Kopf stehen bleibt.
 *
 * Die einzige Medienabfrage dieser Datei ausser "Bewegung reduzieren".
 * Ein Klappmenue laesst sich nicht fliessend bauen: es ist entweder offen
 * oder zu, dazwischen gibt es nichts.
 *
 * Ohne JavaScript bleibt die Navigation sichtbar und der Schalter
 * verborgen. Erst seite.js setzt data-menue-bereit.
 */

.kopf__schalter {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid var(--petrol);
  border-radius: 6px;
  background: transparent;
  color: var(--petrol);
  cursor: pointer;
}
.kopf__schalter:hover { background: var(--petrol); color: var(--warmweiss); }
.kopf__schalter .zeichen--zu { display: none; }
.kopf__schalter[aria-expanded="true"] .zeichen--auf { display: none; }
.kopf__schalter[aria-expanded="true"] .zeichen--zu  { display: block; }

@media (max-width: 879px) {
  .kopf[data-menue-bereit] .kopf__schalter { display: inline-flex; }
  .kopf[data-menue-bereit] nav { display: none; }
  .kopf[data-menue-bereit][data-menue-offen] nav {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline-start: 0;
    padding-top: var(--raum-2);
    border-top: 1px solid var(--linie-hell);
  }
  /* 48 Pixel Antippflaeche je Zeile, wie bei den Knoepfen. */
  .kopf[data-menue-bereit][data-menue-offen] nav > a {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  .kopf[data-menue-bereit][data-menue-offen] nav > .knopf-klein {
    justify-content: center;
    margin-top: var(--raum-2);
  }
}

/* Kleiner, umrandeter Knopf. Im Entwurf trägt ihn der Kopf. */
.knopf-klein {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--petrol);
  border-radius: 6px;
  background: transparent;
  color: var(--petrol);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.knopf-klein:hover { background: var(--petrol); color: var(--warmweiss); }

/* ---------- Logoband ---------- */

.marke-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--raum-3) var(--raum-5);
}
.marke-band figure { margin: 0; display: flex; align-items: center; justify-content: center; height: 96px; }
/* Optisch gleich gross, nicht rechnerisch: ein breites Wortlogo und ein
   quadratisches Siegel brauchen unterschiedliche Hoehen, um gleich
   zu wirken. */
.marke-band img { max-height: 100%; width: auto; object-fit: contain; }
.marke-band figure:nth-child(1) img { max-height: 52px; }
.marke-band figure:nth-child(2) img { max-height: 54px; }
.marke-band figure:nth-child(3) img { max-height: 40px; }

/* ---------- Fußbereich, auf Petrol ---------- */

.fuss {
  background: var(--petrol-tief);
  color: var(--auf-petrol-text);
  padding: var(--raum-5) var(--raum-3);
}
/* Ohne Unterstrich, wie im Entwurf. Eine Linkliste mit Unterstrichen
   wirkt wie ein Inhaltsverzeichnis, nicht wie ein Fußbereich. */
.fuss a { color: var(--auf-petrol-text); text-decoration: none; }
.fuss a:hover { color: var(--warmweiss); }
.fuss__slogan { color: var(--auf-petrol-leise); font-size: var(--lead); }
.fuss h3 { color: var(--auf-petrol-leise); font-size: var(--label); letter-spacing: var(--label-lauf); text-transform: uppercase; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: var(--raum-1); }

/* ---------- Sticky-Leiste ---------- */

/* Sticky-Leiste und Fußbereich sind dunkle Flächen und müssen deshalb
   dieselben Tokens setzen wie ein Petrol-Band. Ohne das trüge ein Knopf
   darin das Amber für helle Flächen. */
.sticky, .fuss {
  --feldrand:      #829CA4;   /* 4,61 Petrol · 3,33 Petrol-hell · 5,55 Petrol-tief */
  --trennlinie:    var(--auf-petrol-linie);
  --grund:         var(--petrol);
  --grund-wechsel: var(--petrol-hell);
  --linie:         var(--auf-petrol-linie);
  --text:          var(--warmweiss);
  --text-fliess:   var(--auf-petrol-text);
  --text-leise:    var(--auf-petrol-leise);
  --akzent:        var(--amber-auf-dunkel);
  --link:          var(--auf-petrol-text);
  --link-hover:    var(--warmweiss);
  --cta-flaeche:   var(--amber-auf-dunkel);
  --cta-text:      var(--tinte);
}

.sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  background: var(--petrol);
  color: var(--warmweiss);
  transition: transform .25s ease;
}
.sticky .knopf { padding: 10px 20px; font-size: var(--body); min-height: 44px; }
.sticky[data-versteckt] { transform: translateY(110%); }

/* ---------- Aufklappen. Ohne JavaScript steht alles offen. ----------
 *
 * Zugeklappt wird erst, wenn seite.js den Block als bereit markiert hat.
 * Ohne die Regel wuerde der Inhalt bei abgeschaltetem JavaScript
 * verschwinden -- das Gegenteil dessen, was zugesagt ist.
 */

[data-aufklapp-inhalt] { display: block; }
[data-aufklapp][data-aufklapp-bereit]:not([data-offen]) [data-aufklapp-inhalt] { display: none; }
[data-aufklapp]:not([data-aufklapp-bereit]) [data-aufklapp-knopf] { display: none; }
[data-aufklapp-knopf] {
  display: flex; width: 100%; justify-content: space-between; gap: var(--raum-2);
  background: none; border: none; padding: var(--raum-2) 0;
  font: inherit; font-weight: var(--gewicht-medium); color: var(--text);
  text-align: start; cursor: pointer; min-height: 48px;
}

/* ---------- Angebotskarte ----------
 *
 * Steht ueber die volle Breite vor den Terminen. Zwei Spalten, links die
 * Zahl, rechts der Knopf und die Zwei-fuer-eins-Zusage. Bei schmalem
 * Fenster untereinander.
 *
 * Amber kommt hier zweimal vor, in der Zahl und im Knopf. ci-farben.md
 * Abschnitt 4 laesst beide Rollen zu -- Schluesselzahl und CTA -- und beide
 * stehen nebeneinander in derselben Karte, lesen sich also als ein Moment.
 * Dafuer traegt die Augenbraue der Terminliste keinen Strich mehr.
 */

.angebot {
  display: grid;
  gap: var(--raum-3) var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
  margin-top: var(--raum-4);
  padding: var(--raum-4);
  /* Ein Schatten nur da, wo eine Karte sich abheben muss. Hier muss sie. */
  /* Schatten aus der Leitfarbe mit 8 Prozent, keine neue Farbe. */
  box-shadow: 0 10px 30px rgb(20 51 61 / 8%);
}
.angebot > * > :last-child { margin-bottom: 0; }

.angebot__zahl {
  margin-top: var(--raum-2);
  font-size: var(--display);
  line-height: var(--display-zeile);
  letter-spacing: var(--display-lauf);
  font-weight: var(--gewicht-bold);
  color: var(--akzent);
  margin: 0;
}
.angebot__zahl small {
  display: block;
  font-size: var(--body);
  line-height: var(--body-zeile);
  letter-spacing: normal;
  font-weight: var(--gewicht-regular);
  color: var(--text-leise);
  margin-top: var(--raum-1);
}
.angebot__tat p { margin-bottom: var(--raum-2); }
.angebot__zahl + p { margin-top: var(--raum-3); }

/* Ueber die volle Breite liegen Datum und Zusatz sonst an den beiden
   Raendern und die Zeile faellt auseinander. Beide werden deshalb nach
   links gezogen, das Datum auf einer festen Mindestbreite.
   Fliessend statt gestuft: bei 375 Pixeln reicht der Platz nicht fuer
   beides nebeneinander, dann rutscht der Zusatz unter das Datum.
   Gemessen am 19.08.2026 bei 375 und bei 1280 Pixeln. */
.termine--breit li { justify-content: flex-start; }
.termine--breit strong { flex: 0 0 auto; min-width: 200px; }
/* Ohne diese Mindestbreite umbricht bei 375 Pixeln nur die laengere der
   beiden Zeilenarten -- "Reset: Energie" rutscht nach unten, "Reset: Ruhe"
   bleibt oben, und die Liste steht ausgefranst. Mit ihr umbrechen dort
   alle fuenf Zeilen gleich. Gemessen am 19.08.2026. */
.termine--breit span { min-width: 120px; }

/* Ein hochformatiges Bild neben einer kurzen Liste reisst die Zeile
   auseinander: im Journey-Abschnitt stand das Bild mit 735 Pixeln neben
   einem Ablauf von 330. Der Zuschnitt bringt beide auf eine Hoehe, ohne
   das Bild zu verzerren. Gemessen am 19.08.2026. */
.bild--zugeschnitten {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}

/* ---------- Einblendung 5-Minuten-Duo ----------
 *
 * <dialog> statt eines eigenen Overlays: der Browser bringt Fokusfalle,
 * oberste Ebene und Escape mit. closedby="any" ergaenzt das Schliessen per
 * Klick daneben; Safari kennt das Attribut noch nicht, dort setzt seite.js
 * dasselbe nach.
 */

.einblendung {
  max-width: 560px;
  width: calc(100% - 2 * var(--raum-3));
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-fliess);
  /* Auf einem kurzen Bildschirm ist die Einblendung hoeher als das
     Fenster. Dann wird in ihr gescrollt, statt dass unten etwas abreisst.
     Geprueft bei 375 x 667. */
  overflow: auto;
  overscroll-behavior: contain;
}
/* Der Schleier ist --petrol-tief mit 62 Prozent, keine neue Farbe. */
.einblendung::backdrop { background: rgb(12 36 44 / 62%); }

.einblendung__inhalt {
  position: relative;
  display: grid;
  gap: var(--raum-3);
  /* Bei 390 Pixeln sind 40 Pixel Rand zu viel. Fliessend statt gestuft. */
  padding: clamp(var(--raum-3), 5vw, var(--raum-4));
  border-radius: var(--radius);
  background: var(--warmweiss);
  /* Schatten aus --petrol-tief mit 35 Prozent, keine neue Farbe. */
  box-shadow: 0 12px 40px rgb(12 36 44 / 35%);
}
.einblendung__inhalt > * { margin-bottom: 0; }
.einblendung h2 { font-size: var(--h2); margin-bottom: 0; }
.einblendung p { max-width: none; }
.einblendung .augenbraue { margin-bottom: calc(-1 * var(--raum-2)); }
.einblendung .knopf { justify-self: start; }
.einblendung__fein { color: var(--text-leise); }

.einblendung__zu {
  position: absolute;
  top: var(--raum-1);
  inset-inline-end: var(--raum-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.einblendung__zu:hover { color: var(--link-hover); }

/* Energie oder Ruhe. Aufbau wie das Formular unter /duo/, damit beide
   Wege sich gleich anfuehlen. */
.auswahl { display: grid; gap: var(--raum-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.auswahl__feld {
  position: relative;
  display: block;
  padding: var(--raum-2);
  /* Wie beim Eingabefeld: --linie traegt als Rand einer Bedienflaeche nicht. */
  border: 2px solid var(--feldrand);
  border-radius: var(--radius);
  background: var(--grund-wechsel);
  cursor: pointer;
  transition: border-color .15s ease;
}
.auswahl__feld input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.auswahl__titel { display: block; font-weight: var(--gewicht-bold); color: var(--text); }
.auswahl__zeile { display: block; font-size: 14px; line-height: 1.45; color: var(--text-leise); }
.auswahl__feld:hover { border-color: var(--petrol-hell); }
/* Der aktive Zustand ist die dritte Rolle, die Amber tragen darf. */
.auswahl__feld:has(input:checked) { border-color: var(--akzent); }
.auswahl__feld:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 3px; }

.einblendung__felder { display: grid; gap: var(--raum-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.einblendung__felder input { margin-bottom: 0; }
.feldname { display: block; font-size: 14px; font-weight: var(--gewicht-medium); color: var(--text); margin-bottom: var(--raum-1); }

/* ---------- Bewegung reduzieren ---------- */

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