/*
  Sektionen der Landingpage — Werte nach Handoff, Abschnitte 5 bis 12.
  Sektionsuebergreifende Bausteine (Kopfzeile, Platzhalter, Karte) stehen oben.
*/

/* --- Sektionskopf ---------------------------------------------------------- */
.kopfzeile { max-width: var(--breite-textkopf); }
.kopfzeile > * + * { margin-top: 18px; }
.kicker--akzent { color: var(--c-kicker); }
.kopfzeile__text {
  font-size: 19px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--c-text-gedaempft);
}

/*
  --- Trefferflaeche eigenstaendiger Textlinks (TE04, 18.09.2026) -------------
  CLAUDE.md verlangt 44px fuer eigenstaendige Links; gemessen waren 23 bis 36px. Die
  Flaeche waechst ueber ein unsichtbares ::after nach oben und unten, die Optik (gelbe
  Linie am Wort) bleibt. `min(0px, …)`: Ein Link, der schon 44px hat, wird nicht kleiner.
  Nicht fuer die Fusszeile: Telefon und Mail stehen dort 25px untereinander, die Flaechen
  wuerden sich ueberlappen.
*/
.anlage__link,
.kategorien__alle,
.faq__alle,
.hero__ruecklink { position: relative; }
.anlage__link::after,
.kategorien__alle::after,
.faq__alle::after,
.hero__ruecklink::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((100% - 44px) / 2)) 0;
}

/* --- Platzhalter (FR-22, FR-29, FR-65) ------------------------------------- */
.platzhalter {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px dashed var(--c-feldlinie);
}
.platzhalter__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-label-grau);
}
.platzhalter__titel { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--c-platzhalter); }
.platzhalter__text  { margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--c-platzhalter); }

/* Auf dunklem Grund braucht der Platzhalter hellere Kanten. */
.schulen .platzhalter { border-color: rgba(255,255,255,.3); }
.schulen .platzhalter__kicker,
.schulen .platzhalter__titel,
.schulen .platzhalter__text { color: rgba(255,255,255,.72); }

/* --- Reise-Praesentation (Abschnitt 5) ------------------------------------- */
.praesentation { background: var(--c-gelb); }
.praesentation__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding-block: 88px;
}
.praesentation__kicker { color: var(--c-auf-gelb-klein); }
.praesentation__text > * + * { margin-top: 20px; }
.praesentation h2 { font-size: 44px; line-height: 1.08; }
.praesentation__absatz { font-size: 18px; line-height: 1.7; font-weight: 300; color: var(--c-anthrazit); }
.praesentation__betont { font-size: 17px; line-height: 1.6; font-weight: 600; }

.karte { background: var(--c-weiss); padding: var(--pad-karte); }

/* --- Vollbild-Bildband (Abschnitt 6) --------------------------------------- */
/* Randlos heisst auch oben randlos: Das Bildband stiess bis zum 10.09.2026 mit 110px
   Weissraum an den gelben Praesentationsblock. Der Abstand nach UNTEN bleibt — er
   gehoert .leistungen, und ohne ihn klebte die Ueberschrift am Foto. */
.bildband { padding-top: 0; }
.bildband img { width: 100%; height: 70vh; min-height: 500px; object-fit: cover; }

/*
  --- Breaker (seit 08.09.2026) ----------------------------------------------

  Schmales, randloses Bildband als Zaesur zwischen zwei Textstrecken.

  Deutlich flacher als .bildband (70vh, min. 500px): Das Bildband ist eine eigene
  Station auf der Seite, der Breaker nur ein Punkt zwischen zwei Saetzen. Eine feste
  Hoehe statt eines Viewport-Anteils, damit er auf einem hohen Bildschirm nicht doch
  wieder zur Station wird.
*/
.breaker { padding-top: var(--sektion-oben); }
.breaker img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* --- Leistungen (Abschnitt 7) — Design 6a, 17.09.2026 ---------------------- */
/*
  Eine Sektion, zwei Karten und ein Banner, rechts die mitlaufende Anfrage-Kachel.
  Masse aus dem Handoff (README-6a, `Leistungen 6a.dc.html`), Farben und Abstaende
  nur ueber tokens.css. Umbrueche auf den Theme-Stufen 1023/719.
*/
.leistungen { padding-top: var(--sektion-oben); }

.lgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  /* 50px enger als --spalten-abstand: die Karten bekommen die Breite (Georg, 17.09.2026). */
  gap: calc(var(--spalten-abstand) - 50px);
  align-items: start;
}
/* Ohne min-width: 0 sprengen die Raster in der Spalte ihre Zelle. */
.lgrid__inhalt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Karten: gelb = im Preis, weiss = zubuchbar. Gleiche Geometrie, anderes Material. */
.lkarte {
  background: var(--c-weiss);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--pad-karte);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lkarte--gelb { background: var(--c-gelb); }

.lkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.lkarte__titel {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.lkarte__zwischentitel {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.lkarte__zeile {
  margin: 10px 0 0;
  max-width: 760px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}
.lkarte__absatz {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-text-gedaempft);
}

/*
  Zeichen: Haekchen (im Preis) und Plus (zubuchbar). Das Banner hat seit 17.09. keins mehr.
  Dasselbe Haekchen im Kartenkopf (44px) und als Listenzeichen (22px).
*/
.lzeichen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  line-height: 1;
}
.lzeichen svg { width: 24px; height: 24px; stroke-width: 2.4; }
.lzeichen--haken { background: var(--c-anthrazit); color: var(--c-weiss); }
.lzeichen--plus  { background: var(--c-gelb); font-size: 26px; font-weight: 700; }
.lzeichen--klein {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--c-anthrazit);
  color: var(--c-weiss);
}
.lzeichen--klein svg { width: 12px; height: 12px; stroke-width: 2.6; }

/* --- Die sechs Programmpunkte als Bildkacheln ------------------------------ */
.fixraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fixkachel {
  background: var(--c-grund);
  border-radius: var(--radius-karte);
  overflow: hidden;
  box-shadow: var(--schatten-karte-leicht);
}
.fixkachel__bild {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
}
/* Noch kein Foto: weisse Flaeche mit dunkler Oberkante, deutlich als offen erkennbar. */
.fixkachel__platzhalter {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-weiss);
  border-top: 4px solid var(--c-anthrazit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-sekundaer);
}
.fixkachel__text { padding: 14px 16px; }
.fixkachel__titel { display: block; font-size: 16px; font-weight: 600; }
.fixkachel__zeile {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 300;
  color: var(--c-text-leicht);
}

/* --- Die vier Leistungsbereiche -------------------------------------------- */
.lgruppen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(57, 66, 79, .28);
}
.lgruppe { min-width: 0; }
.lgruppe__titel {
  margin: 0 0 4px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.lgruppe__liste {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
}
.lgruppe__liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(57, 66, 79, .22);
}
.lgruppe__liste li:last-child { border-bottom: 0; }

/* --- Zubuchbare Leistungen ------------------------------------------------- */
.zusatzraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 4px;
  align-items: stretch;
}
/*
  Das Bild sitzt EINGERUECKT in der Kachel, nicht randlos: ein schmaler weisser Rand
  ringsum und ein eigener, kleinerer Radius (seit v8, im 6a-Baustein unveraendert).
*/
.zkachel {
  background: var(--c-weiss);
  /* Duenne CI-gelbe Linie: weiss auf weiss hob sich die Kachel kaum ab (Georg, 17.09.2026). */
  border: 1px solid var(--c-gelb);
  border-radius: var(--radius-karte);
  padding: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schatten-karte-leicht);
}
.zkachel__bild {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}
.zkachel__text {
  padding: 18px 10px 6px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.zkachel__titel { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.zkachel__beschreibung {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--c-text-sekundaer);
}
/* Link auf das Infoblatt: eigenstaendiger Link, deshalb 44px hoch (WCAG 2.5.8, CLAUDE.md). */
.zkachel__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-anthrazit);
}
.zkachel__link:hover { color: var(--c-kicker); }

/* margin-top: auto haelt den Preisblock unten, auch wenn die Texte verschieden lang sind. */
.zkachel__preis {
  margin: auto 0 0;
  padding-top: 14px;
  text-align: right;
}
.zkachel__betrag {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}
/* „Preis auf Anfrage" ist kein Betrag und sieht auch nicht wie einer aus. */
.zkachel__betrag--offen {
  font-size: 15px;
  font-weight: 400;
  color: var(--c-text-sekundaer);
}
.zkachel__einheit {
  display: block;
  font-size: 14px;
  color: var(--c-label-grau);
}
/*
  Bleibt in der letzten Zeile nur eine Kachel neben einer Luecke, fuellt sie die Zeile bis zum
  rechten Rand (Georg, 17.09.2026: Reiseversicherung buendig mit SUP). Aufbau wie jede andere
  Kachel: Bild oben ueber die volle Breite, Text darunter (Georg, 17.09.2026).
*/
.zusatzraster > .zkachel:last-child:nth-child(3n + 2) { grid-column: span 2; }
/* Breites Bild schneidet oben und unten; der Ausschnitt oben zeigt den Slogan des Motivs. */
.zusatzraster > .zkachel:last-child:nth-child(3n + 2) .zkachel__bild { object-position: center top; }

/* Kachel ohne Foto: gelbe Oberkante statt eines leeren Bildfelds. */
.zkachel--ohne-bild { border-top: 6px solid var(--c-gelb); }

/* --- Anfrage-Kachel -------------------------------------------------------- */
/*
  Endet von selbst an der Oberkante des Banners: sticky gilt nur innerhalb von .lgrid,
  und das Banner liegt ausserhalb. 150px Abstand = Kopfzeile plus Luft (Spec 6a, §5);
  die Kopfzeilenhoehe steht nur in --header-hoehe.
*/
.anfragekachel {
  position: sticky;
  top: calc(var(--header-hoehe) + 56px);
  background: var(--c-weiss);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: 38px 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* Niedriges Fenster (TE04, 18.09.2026): Kachel rund 325px plus 150px Abstand oben passt
   erst ab etwa 480px Hoehe. Darunter liefe sie unten aus dem Bild, also scrollt sie mit. */
@media (max-height: 520px) {
  .anfragekachel { position: static; }
}
.anfragekachel__inhalt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.anfragekachel__preis {
  margin: 0;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.anfragekachel__zusatz {
  margin: 0;
  font-size: 15px;
  color: var(--c-text-sekundaer);
}
.anfragekachel__monatstitel {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}
.anfragekachel__monate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
  font-weight: 600;
}
/* Punkt zwischen den Monaten als Gestaltung, nicht als Text: Screenreader lesen eine Liste. */
.anfragekachel__monate li + li::before {
  content: "·";
  margin-right: 10px;
  color: var(--c-kicker);
}
.anfragekachel__knopf { display: block; }
/* .knopf--gelb wird im Hero beim Hover weiss; auf weisser Kachel waere er dann unsichtbar. */
.anfragekachel__knopf:hover,
.anfragekachel__knopf:focus-visible {
  background: var(--c-anthrazit);
  color: var(--c-weiss);
}

/* --- Banner: Sport ueber das Programm hinaus ------------------------------- */
/*
  Layout nach Georgs Vorlage (17.09.2026): gelbes Kopfband mit Titel und Unterzeile in einer
  Zeile, darunter drei Zeilen Etikett | Text mit Trennlinien.
*/
.vorort {
  margin-top: 24px;
  background: var(--c-weiss);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  overflow: hidden;   /* das Kopfband folgt dem Radius */
}
.vorort__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  background: var(--c-gelb);
  padding: 26px var(--pad-karte);
}
.vorort__titel {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.vorort__unterzeile {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.vorort__liste {
  margin: 0;
  padding: 22px var(--pad-karte) 26px;
}
.vorort__zeile {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 8px 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-linie-hell);
}
.vorort__zeile:last-child { border-bottom: 0; }
.vorort__zeile dt {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
}
.vorort__zeile dd {
  margin: 0;
  max-width: 820px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
}

/* --- Ueberschrift des Wochenprogramms (programm.php nutzt die Klasse weiter) --- */
.leistungen__titel {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.025em;
}

/* --- Leistungen: Umbrueche ------------------------------------------------- */
/*
  1023: Dort schaltet auch die Kopfzeile auf den Burger. Die Kachel wandert unter die
  Karten und scrollt normal mit. Eine feste Leiste am unteren Rand ist bewusst nicht
  gebaut (Georg, 17.09.2026).
*/
@media (max-width: 1023px) {
  .lgrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .anfragekachel { position: static; }
  .fixraster,
  .zusatzraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Zweispaltig bleibt die breite Kachel eine normale Kachel. */
  .zusatzraster > .zkachel:last-child:nth-child(3n + 2) { grid-column: auto; }
  .leistungen__titel { font-size: 38px; }
}

@media (max-width: 719px) {
  .fixraster,
  .lgruppen,
  .zusatzraster { grid-template-columns: minmax(0, 1fr); }
  .lgruppe__titel,
  .lkarte__zwischentitel { font-size: 26px; }
  /* Etikett ueber dem Text statt daneben */
  .vorort__zeile { grid-template-columns: minmax(0, 1fr); }
  .anfragekachel__preis { font-size: 34px; }
  .leistungen__titel { font-size: 30px; }
}

/*
  Wochenprogramm (seit 08.09.2026, Quelle inc/programm-inhalte.php).

  Zeilen mit Trennlinien statt Kacheln — dieselbe Logik wie die Inklusiv-Liste darueber.
  Auf dieser Seite gibt es seit v7 schon zwei Kachelsorten (gelbe Vorteile, weisse
  Formularkarte); eine dritte wuerde die Bedeutung der ersten beiden verwaessern.

  Das Tageslabel steht in einer festen Spalte, damit die fuenf Titel auf einer
  Fluchtlinie beginnen — sonst wandert jeder Titel mit der Laenge von „Dienstag".

  Seit 08.09.2026 eine eigene Sektion statt eines Blocks in den Leistungen (siehe
  template-parts/programm.php). Deshalb Sektionsabstand oben statt margin-top: 56px.
*/
/* --- „Sie haben eine Kleingruppe?" (Abschnitt 7b) — seit 10.09.2026 ---------
  Erklaert, warum „ab 40 Personen" kein Ausschluss ist. Steht seit 11.09. nach dem
  Wochenprogramm (vorher davor). Titel, Unterzeile und Bild vom 11.09. (Georg).

  Kein eigener Farbgrund: Die Nachbarn sind hell, und der Farbrhythmus der Seite ist
  belegt — gelb tragen Kennzahlenband und Praesentation, dunkel die Bildstrecke
  „Zufriedene Schulen". Eine dritte gelbe Flaeche wuerde die beiden vorhandenen entwerten.
*/
.sammelbus { padding-top: var(--sektion-oben); }

/*
  Seit 16.09.2026 (Georg) Bild LINKS, Textkopf rechts — getauscht ueber `order`, nicht im
  Markup: So steht der Text im Quelltext weiter vorn, und auf schmalen Schirmen (unten,
  `order: 0`) liest man ihn vor dem Bild.
*/
.sammelbus__kopf {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.sammelbus__bild { order: -1; }
.kopfzeile .sammelbus__unterzeile {
  margin-top: 8px;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 300;
  color: var(--c-anthrazit);
}
/*
  Das Bild ist ein JPEG auf reinem Weiss, der Seitengrund ist gebrochen weiss. `multiply`
  laesst das Weiss im Grund verschwinden — sonst stuende ein hellerer Kasten auf der Seite.
*/
.sammelbus__bild {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  /* Die Datei ist quadratisch mit viel Leerraum oben und unten; 3:2 schneidet nur Weiss ab. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Seit 11.09. ersetzt Georgs Text die zwei Fall-Spalten und den Vorbehalt darunter. */
.kopfzeile .sammelbus__zwischentitel {
  margin-top: 32px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.kopfzeile .sammelbus__zwischentitel + .kopfzeile__text { margin-top: 10px; }

/*
  Formular-Ausschnitt, der sich selbst anhakt (11.09.2026). Der Grundzustand ist
  ANGEHAKT: So sieht es aus ohne JavaScript und bei reduzierter Bewegung. Nur wenn die
  Reveal-Engine laeuft und Bewegung erwuenscht ist, startet es leer und wird beim
  Einblenden angehakt — erst das Kaestchen, dann der gezeichnete Haken.
*/
.kopfzeile .sammelbus__hinweiszeile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.sammelbus__demo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 14px 22px 14px 18px;
  background: var(--c-weiss);
  border: 1px solid var(--c-linie-hell);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(57, 66, 79, .08);
  font-size: 15px;
  font-weight: 300;
  color: var(--c-anthrazit);
}
.sammelbus__kaestchen {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-anthrazit);
  border-radius: 3px;
  background: var(--c-anthrazit);
}
.sammelbus__kaestchen svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c-weiss);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 0;
}
/* Pfeil mit Hinweis rechts neben dem Ausschnitt; unter 720px darunter, Pfeil zeigt nach oben. */
.sammelbus__pfeiltext {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 250px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-anthrazit);
}
.sammelbus__pfeil {
  flex: none;
  width: 54px;
  height: 22px;
  fill: none;
  stroke: var(--c-kicker);   /* Gold statt Gelb: Gelb verschwindet auf dem hellen Grund */
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 719px) {
  .kopfzeile .sammelbus__hinweiszeile { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sammelbus__pfeiltext { flex-direction: column; align-items: flex-start; max-width: none; }
  /* Gedreht bleibt die Box 54x22 — die Raender gleichen die 16px Ueberstand oben und unten aus. */
  .sammelbus__pfeil { transform: rotate(90deg); margin: 16px 0 16px -6px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Nachdem der Haken sitzt, stupst der Pfeil zweimal Richtung Kästchen. */
  [data-reveal-bereit] .sammelbus__pfeiltext.is-sichtbar .sammelbus__pfeil { animation: pfeil-stupsen .45s 1.7s ease-in-out 2 alternate; }
  [data-reveal-bereit] .sammelbus__demo:not(.is-sichtbar) .sammelbus__kaestchen {
    background: transparent;
    border-color: var(--c-label-grau);
  }
  [data-reveal-bereit] .sammelbus__demo:not(.is-sichtbar) .sammelbus__kaestchen svg { stroke-dashoffset: 16; }
  [data-reveal-bereit] .sammelbus__demo.is-sichtbar .sammelbus__kaestchen { animation: kaestchen-an .3s .9s both; }
  [data-reveal-bereit] .sammelbus__demo.is-sichtbar .sammelbus__kaestchen svg { animation: haken-zeichnen .35s 1.15s both; }
}
@keyframes kaestchen-an {
  0%   { background: transparent; border-color: var(--c-label-grau); transform: scale(1); }
  60%  { transform: scale(1.18); }
  100% { background: var(--c-anthrazit); border-color: var(--c-anthrazit); transform: scale(1); }
}
@keyframes pfeil-stupsen {
  to { translate: -7px 0; }
}
@keyframes haken-zeichnen {
  from { stroke-dashoffset: 16; }
  to   { stroke-dashoffset: 0; }
}

.programm-sektion { padding-top: var(--sektion-oben); }
.programm-sektion__text {
  margin-top: 18px;
  max-width: var(--breite-textkopf);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--c-text-leicht);
}
/*
  Zeitstrahl statt Liste (10.09.2026). Fuenf ausgeschriebene Absaetze waren viel Text
  an einer Stelle, an der die Lehrkraft ueberfliegt; Kacheln waeren die fuenfte
  Kachelsorte auf dieser Seite gewesen. Das Aufklappen macht assets/js/akkordeon.js,
  dieselbe Mechanik wie die FAQ (FR-32).
*/
.zeitstrahl {
  position: relative;
  margin: 30px 0 0;
  padding: 0 0 0 34px;
  list-style: none;
  border-top: 2px solid var(--c-anthrazit);
}
/* Die durchgehende Linie. Beginnt und endet auf Hoehe des ersten/letzten Punktes,
   damit sie nicht ueber den Rand hinauslaeuft. */
.zeitstrahl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--c-linie-hell);
}

.zeitstrahl__tag { position: relative; border-bottom: 1px solid var(--c-linie-hell); }
.zeitstrahl__tag:last-child { border-bottom: 0; }

.zeitstrahl__punkt {
  position: absolute;
  left: -34px;
  top: 26px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pille);
  background: var(--c-linie-hell);
  /* Stanzt die Linie hinter dem Punkt frei — der Ring hat die Farbe des Seitengrunds. */
  box-shadow: 0 0 0 4px var(--c-grund);
  transition: background .2s ease;
}
/* Der offene Tag bekommt den gelben Punkt. `:has()` ist hier bewusst gewaehlt: Der
   Punkt steht VOR dem Knopf, ein Geschwisterselektor kaeme nicht an ihn heran. Kann
   ein Browser `:has()` nicht, bleibt der Punkt grau — es faellt nichts aus. */
.zeitstrahl__tag:has(.zeitstrahl__knopf[aria-expanded="true"]) .zeitstrahl__punkt {
  background: var(--c-gelb);
}

.zeitstrahl__kopf { margin: 0; }
.zeitstrahl__knopf {
  display: flex;
  align-items: baseline;
  gap: 6px 20px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--c-anthrazit);
  text-align: left;
  transition: color .2s ease;
}
.zeitstrahl__knopf:hover { color: var(--c-kicker); }

.zeitstrahl__nr {
  flex: none;
  width: 160px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-kicker);
}
.zeitstrahl__titel {
  flex: 1 1 auto;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

/* Plus, das beim Oeffnen zum Minus wird — dieselbe Zeichnung wie in der FAQ. */
.zeitstrahl__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  align-self: center;
}
.zeitstrahl__icon::before,
.zeitstrahl__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .25s var(--ease);
}
.zeitstrahl__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.zeitstrahl__knopf[aria-expanded="true"] .zeitstrahl__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0);
}

.zeitstrahl__panel[hidden] { display: none; }
.zeitstrahl__text {
  margin: 0;
  /* Linksbuendig unter dem Titel, nicht unter der Tagesangabe (160px + 20px Abstand). */
  padding: 0 40px 24px 180px;
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--c-text-leicht);
}

/* --- „Das erwartet die Klasse vor Ort" (Abschnitt 8) — Design v8 -------------
  Loest seit 10.09.2026 das dreiteilige `.bildraster` ab. Der Unterschied ist nicht
  die Optik: Das Bildraster zeigte drei Fotos ohne Ziel, hier ist jede Kachel ein Weg
  in einen Abschnitt der Unterseite. Deshalb sind es `<a>` und keine `<img>`.
*/
.kategorien { margin-top: var(--sektion-oben); }

.kategorien__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: end;
  justify-content: space-between;
}
.kategorien__titel {
  margin: 0;
  font-size: 38px;
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.025em;
  max-width: 620px;
}
.kategorien__alle {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-anthrazit);
  text-decoration: none;
  border-bottom: 2px solid var(--c-gelb);
  padding-bottom: 3px;
  transition: color .2s ease;
}
.kategorien__alle:hover,
.kategorien__alle:focus-visible { color: var(--c-kicker); }

.kategorien__raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.kategorie {
  position: relative;
  display: block;
  height: 400px;
  border-radius: var(--radius-karte);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .25s ease;
}
.kategorie:hover,
.kategorie:focus-visible { box-shadow: var(--schatten-karte-hover); }

.kategorie__bild { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Traegt die Lesbarkeit der Beschriftung, nicht die Gestaltung — im Markup aria-hidden.
   Erst ab 45 % Hoehe, damit das Motiv oben unangetastet bleibt. */
.kategorie__verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(57, 66, 79, 0) 45%, rgba(57, 66, 79, .72) 100%);
}
.kategorie__label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  right: 20px;
  color: var(--c-weiss);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* --- Zufriedene Schulen (Abschnitt 9) — Design v7 --------------------------- */
/*
  Bildstrecke statt Testimonials. Das Blaettern macht `scroll-snap`, nicht JavaScript:
  Wischen, Scrollen und Tastatur funktionieren damit auch ohne assets/js/schulen.js —
  das ergaenzt nur die zwei Knoepfe fuer die Maus.
*/
.schulen {
  background: var(--c-anthrazit);
  color: var(--c-weiss);
  margin-top: var(--sektion-oben);
}
.schulen__inhalt { padding-block: 110px; }
.schulen__titel {
  max-width: 20ch;
  border-bottom: 2px solid var(--c-gelb);
  padding-bottom: 22px;
}

.schulen__strecke { margin-top: 44px; }

.schulen__spur {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Die Leiste selbst waere auf dunklem Grund ein Fremdkoerper; geblaettert wird
     ueber Wischen, Knoepfe oder Tastatur. */
  scrollbar-width: none;
}
.schulen__spur::-webkit-scrollbar { display: none; }
.schulen__spur:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 4px; }

.schulen__rahmen {
  flex: 0 0 calc((100% - 48px) / 3);   /* drei sichtbar, zwei Luecken zu 24px */
  margin: 0;
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
}
.schulen__rahmen .platzhalter--bild { height: 100%; }
.schulen__rahmen img { width: 100%; height: 100%; object-fit: cover; }

.schulen__knoepfe { display: flex; gap: 12px; margin-top: 28px; }
.schulen__knopf {
  width: 44px; height: 44px;          /* Mindest-Touchziel */
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-pille);
  background: none;
  color: var(--c-weiss);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.schulen__knopf:hover:not(:disabled) { background: var(--c-gelb); color: var(--c-anthrazit); border-color: var(--c-gelb); }
.schulen__knopf:disabled { opacity: .35; cursor: default; }

/* --- Warum eine Sportwoche (Abschnitt 9b) — seit 08.09.2026 ----------------- */
/*
  Die einzige Sektion der Seite, die paedagogisch argumentiert statt organisatorisch.
  Sie steht bewusst direkt vor dem Vorteilspaket: erst warum ueberhaupt eine
  Sportwoche, dann warum mit Frank Reisen.

  Kein eigener Farbgrund: Zwischen der dunklen Bildstrecke darueber und den gelben
  Kacheln darunter braucht die Seite eine ruhige Flaeche, sonst folgen drei Wechsel
  hintereinander.
*/
.paedagogik { padding-top: var(--sektion-oben); }
.paedagogik__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 56px;
  margin-top: 52px;
}
.paedagogik__punkt h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.paedagogik__punkt p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--c-text-leicht);
}

/*
  Der Anspruchssatz. Zwei Zeilen, die zweite ist die Pointe — deshalb Blocksatz-Bruch
  ueber <br> statt eines Umbruchs nach Zufall der Spaltenbreite.
*/
.paedagogik__anspruch {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 3px solid var(--c-gelb);
  max-width: 34ch;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--c-anthrazit);
}

/*
  Sicherheit und Aufsicht (T05, 18.09.2026): Kopf plus vier Bloecke im Raster 2 x 2, gebaut
  wie `.paedagogik`. Die gelbe Oberkante gliedert die Bloecke, ohne Kachel zu werden: Gelbe
  Flaechen gehoeren seit v7 dem Vorteilspaket direkt darunter.
*/
.sicherheit { padding-top: var(--sektion-oben); }
.sicherheit__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
  margin-top: 52px;
}
.sicherheit__punkt { padding-top: 20px; border-top: 3px solid var(--c-gelb); }
.sicherheit__punkt h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.sicherheit__punkt p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--c-text-leicht);
}
/*
  Aussehen wie `.faq__alle`, aber eigene Klasse: tracking.js greift per querySelector die
  ERSTE `.faq__alle` der Seite, und diese Sektion steht vor der FAQ. Eigenstaendiger Link,
  also 44px Trefferflaeche; der Text sitzt unten, damit die gelbe Linie am Wort bleibt.
*/
.sicherheit__faq { min-height: 44px; align-items: flex-end; margin-top: 30px; }

/* --- Vorteilspaket (Abschnitt 10) ------------------------------------------ */
.vorteile { padding-top: var(--sektion-oben); }
.vorteile__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--c-anthrazit);
}
.vorteile__kopf h2 { margin-top: 18px; line-height: 1.06; }

/* Die 1px-Luecke auf getoentem Grund erzeugt die Rasterlinien — kein border noetig. */
/*
  Hier standen bis zum 08.09.2026 die Regeln fuer „Gut zu wissen"
  (.leistungen__reise, .leistungen__reise-raster, .reisevorteil).

  Der Block ist entfernt: Es waren die USPs von Frank Reisen, und die stehen seit v7
  als gelbe Kacheln im Vorteilspaket direkt darunter. Zwei der fuenf Punkte standen
  sogar dreifach auf der Seite. Begruendung in template-parts/leistungen.php.
*/

/*
  Vorteils-Kacheln — Design v7. Bis v6 entstanden die Trennlinien aus einer 1px-Luecke im
  Raster; jetzt sind es freistehende gelbe Kacheln mit Radius und Schatten.

  Zwei Ebenen: `.vorteil` traegt die Einblendung (schreibt `transform`), `.vorteil__flaeche`
  die Kachel samt Hover (schreibt ebenfalls `transform`). Auf einem Element wuerde eins das
  andere ueberschreiben — der Prototyp behilft sich mit `!important`, das Aenderungsdokument
  nennt das selbst einen zu behebenden Mangel.
*/
/*
  Seit 21.09.2026 wie auf frank-schulreisen.at (Georg): gelbes Band ueber die volle Breite,
  darin weisse Kacheln, Icons im Original-Grau der Hauptseite. Radius, Schatten und Zoom beim
  Hover bleiben von v7 (Georg, ebenfalls 21.09.).
*/
.vorteile__band {
  margin-top: 44px;
  padding-block: 72px;
  background: var(--c-gelb);
}
.vorteile__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.vorteil__flaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 32px 28px 40px;
  border-radius: var(--radius-karte);
  background: var(--c-weiss);
  box-shadow: var(--schatten-karte);
  text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s ease;
}
.vorteil__flaeche:hover {
  transform: scale(1.015);
  box-shadow: var(--schatten-karte-hover);
}

/* Groesser als bis v7 (72 px): auf der Hauptseite sind die Icons das Hauptmotiv der Kachel. */
.vorteil__flaeche svg { width: 120px; height: 120px; flex: none; }

.vorteil h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-anthrazit);
  /* Ersetzt die weichen Trennstriche des Entwurfs: „Notrufnummer" und „Komplettpaket"
     brechen sonst nicht. Ein `&shy;` im Text braeuchte eine Ausnahme beim Escapen. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.vorteil__text {
  max-width: 34ch;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  /*
    War bis zum 09.09.2026 `var(--c-auf-gelb-text)` — eine Variable, die es nirgends
    gibt. Eine undefinierte Custom Property macht die ganze Deklaration ungueltig, ohne
    dass etwas bricht: Der Text erbt still die Grundfarbe. Aufgefallen beim v8-Umbau,
    als ich alle in diesem Stylesheet benutzten Variablen gegen tokens.css gehalten habe.
    `--c-text-leicht` traegt dort den Kommentar „USP-Texte" — das ist die gemeinte.
  */
  color: var(--c-text-leicht);
}

/* --- Anfrage (Abschnitt 11) ------------------------------------------------ */
.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px;
  padding-block: 120px;
}
.anfrage__text > * + * { margin-top: 20px; }
.anfrage h2 { line-height: 1.06; }
.anfrage__absatz { font-size: 19px; line-height: 1.7; font-weight: 300; color: var(--c-text-gedaempft); }


/* --- FAQ-Teaser (FR-15) ---------------------------------------------------- */
.faq { padding-block: var(--sektion-oben); }
.faq__liste { margin: 48px 0 0; border-top: 2px solid var(--c-anthrazit); }
.faq__eintrag { padding: 24px 0; border-bottom: 1px solid var(--c-linie-hell); }
.faq__frage   { font-size: 19px; font-weight: 600; }
.faq__antwort { margin: 8px 0 0; font-size: 17px; line-height: 1.6; font-weight: 300; color: var(--c-text-gedaempft); }

.faq__alle,
.sicherheit__faq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 2px solid var(--c-gelb);
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-anthrazit);
  text-decoration: none;       /* die gelbe Linie ist die Unterstreichung (bis 18.09. doppelt) */
  cursor: pointer;
  transition: gap .2s ease;
}
.faq__alle:hover,
.sicherheit__faq:hover { gap: 14px; }
.faq__hinweis {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-kicker);
}
.faq__hinweis[hidden] { display: none; }

/* --- FAQ-Seite /faq/: Akkordeon auf Anthrazit (CI) -------------------------- */
.faq-akkordeon {
  background: var(--c-anthrazit);
  color: var(--c-weiss);
  padding-block: var(--sektion-oben);
}
.faq-akkordeon__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}
.faq-akkordeon__kopf { position: sticky; top: 110px; }
/* Seit 18.09.2026 ein Raster je Thema (T07); der Kicker „FAQ" ist entfallen (v7). Die
   Themen-H2 sind laenger als das alte „Antworten auf einen Blick", daher 38px statt 46px. */
.faq-akkordeon__raster + .faq-akkordeon__raster { margin-top: 72px; }
.faq-akkordeon__titel {
  margin: 0;
  font-size: 38px;
  line-height: 1.06;
  font-weight: 300;
  text-transform: uppercase;
}

.faq-akkordeon__liste { border-top: 1px solid rgba(255, 255, 255, .18); }

.faq-akk { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.faq-akk__frage { margin: 0; }
.faq-akk__knopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-weiss);
  text-align: left;
  transition: color .2s ease;
}
.faq-akk__knopf:hover,
.faq-akk__knopf[aria-expanded="true"] { color: var(--c-gelb); }

.faq-akk__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}
.faq-akk__icon::before,
.faq-akk__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .25s var(--ease);
}
.faq-akk__icon::after { transform: translate(-50%, -50%) rotate(90deg); }   /* + */
.faq-akk__knopf[aria-expanded="true"] .faq-akk__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0);                               /* wird zu - */
}

.faq-akk__panel[hidden] { display: none; }
.faq-akk__antwort {
  margin: 0;
  padding: 0 46px 30px 0;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255, 255, 255, .74);
}

.faq-akkordeon__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* Umriss-Knopf für dunkle Flächen (Zweitaktion) */
.knopf--umriss {
  background: transparent;
  color: var(--c-weiss);
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 13px 28px;
  font-size: 15px;
}
.knopf--umriss:hover { border-color: var(--c-gelb); color: var(--c-gelb); }

@media (max-width: 1023px) {
  .faq-akkordeon__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq-akkordeon__kopf { position: static; }
  .faq-akkordeon__titel { font-size: 34px; }
  .faq-akkordeon__raster + .faq-akkordeon__raster { margin-top: 56px; }
}
@media (max-width: 719px) {
  .faq-akkordeon__raster { gap: 32px; }
  .faq-akkordeon__titel { font-size: 31px; }
  .faq-akk__knopf { font-size: 18px; padding: 22px 0; gap: 18px; }
  .faq-akk__antwort { padding-right: 0; }
}

/* --- Footer (Abschnitt 12) — Design v7 -------------------------------------- */
/*
  Dunkler Block mit gelber Oberkante, drei Spalten. Das Plus-Raster liegt als Datei und
  wird ueber `background-image` gesetzt, NICHT ueber die Kurzschreibweise `background:` —
  die wuerde es beim naechsten Zugriff wieder loeschen.
*/
.fuss {
  background-color: var(--c-anthrazit);
  background-image: url("../img/fuss-raster.svg");
  background-repeat: repeat;
  border-top: 4px solid var(--c-gelb);
  color: var(--c-weiss);
}
.fuss__inhalt {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  padding-top: 76px;
}

.fuss__marke {
  display: inline-flex;
  align-items: center;
  color: inherit;              /* traegt currentColor ins SVG (FR-8) */
  text-decoration: none;
}
.fuss__marke .logo { height: 78px; width: auto; opacity: .82; }
.fuss__produkt {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
}

.fuss__titel {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-gelb);
}
.fuss__text {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255,255,255,.86);
}
/* Firmenname, Oeffnungszeit, Telefon und Mail heben sich vom uebrigen Text ab. */
.fuss__stark { font-weight: 700; color: var(--c-weiss); text-decoration: none; }
a.fuss__stark:hover { color: var(--c-gelb); }

.fuss__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.fuss__liste a {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.fuss__liste a:hover { color: var(--c-gelb); }

.fuss__recht {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 96px;
  padding-bottom: 44px;
}
.fuss__liste--recht { margin-top: 0; }
.fuss__liste--recht a { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.7); }
.fuss__liste--recht a:hover { color: var(--c-gelb); }
.fuss__firma {
  margin-left: auto;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .praesentation__raster,
  .anfrage__raster { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .praesentation__raster { padding-block: var(--sektion-oben); }
  .anfrage__raster { padding-block: var(--sektion-oben); }
  .praesentation h2 { font-size: 34px; }
  /* Vorteils-Raster: eigene Umbruchpunkte 900/640 seit v7, siehe unten. */
  .vorteile__kopf { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* Fuenf Kacheln nebeneinander waeren hier unter 190px breit — das Label passt nicht mehr. */
  .sammelbus__kopf { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Einspaltig zaehlt die Markup-Reihenfolge wieder: erst der Text, dann das Bild. */
  .sammelbus__bild { max-width: 360px; order: 0; }
  .kategorien__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .kategorie { height: 320px; }
  .kategorien__titel { font-size: 32px; }
  .schulen__rahmen { flex-basis: calc((100% - 24px) / 2); }   /* zwei sichtbar */
  .bildband { padding-top: var(--sektion-oben); }
  .bildband img { height: 46vh; min-height: 320px; }
  .breaker img { height: 260px; }
  /* Die Fusszeile bricht seit v7 bei 900 und 640px um, siehe unten. */
}

@media (max-width: 719px) {
  .breaker img { height: 180px; }
  /* Tagesangabe und Titel untereinander: 160px feste Spalte plus Titel plus Icon
     passen hier nicht mehr nebeneinander, ohne dass der Titel umbricht. */
  .zeitstrahl__knopf { flex-wrap: wrap; gap: 2px 20px; }
  .zeitstrahl__nr    { width: 100%; }
  .zeitstrahl__icon  { position: absolute; right: 0; top: 22px; align-self: auto; }
  .zeitstrahl__titel { padding-right: 34px; }
  .zeitstrahl__text  { padding-left: 0; padding-right: 0; }
  /* Das Vorteils-Raster bricht seit v7 bei 900 und 640px um, siehe unten. */
  .kategorien__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Fuenf Kacheln in zwei Spalten lassen eine allein — die letzte nimmt beide,
     sonst sieht die Reihe nach Fehler aus statt nach Absicht. */
  .kategorie:last-child { grid-column: 1 / -1; }
  .kategorie { height: 260px; }
  .schulen__inhalt { padding-block: var(--sektion-oben); }
  .schulen__rahmen { flex-basis: 100%; }                      /* eines sichtbar */
  .karte { padding: 24px; }
  .fuss__recht { flex-direction: column; align-items: flex-start; }
}

/*
  Eigene Umbruchpunkte der Fusszeile (Design v7). Bewusst NICHT die Theme-Stufen 1023/719:
  Das dreispaltige Raster wird vorher eng, und die Theme-Stufen haengen an der Typo-Skala
  und der Burger-Schwelle. Zwei zusaetzliche Punkte fuer einen neuen Block sind billiger
  als das Verschieben der bestehenden.
*/
@media (max-width: 900px) {
  .fuss__inhalt     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .vorteile__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paedagogik__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vorteile__band    { padding-block: 44px; }
  .vorteile__raster  { gap: 20px; }
  .fuss__inhalt     { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .fuss__recht      { margin-top: 56px; }
  .vorteile__raster { grid-template-columns: minmax(0, 1fr); }
  .paedagogik__raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sicherheit__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .paedagogik__anspruch { font-size: 21px; }
}

/* --- Textseiten (Rechtstexte, 404) ----------------------------------------- */
/*
  Diese Seiten haben keinen Hero. Der Header steht trotzdem fixiert darüber —
  deshalb der Abstand oben.
*/
.textseite { padding-top: calc(var(--header-hoehe) + 64px); padding-bottom: var(--sektion-oben); }
.textseite__inhalt { max-width: 720px; }
.textseite h1 { font-size: 44px; }
.textseite__text { margin-top: 28px; }
.textseite__text > * + * { margin-top: 20px; }
.textseite__text p,
.textseite__text li { font-size: 17px; line-height: 1.7; font-weight: 300; color: var(--c-text-gedaempft); }
.textseite__text h2 { font-size: 28px; margin-top: 44px; }
.textseite__text h3 { font-size: 21px; margin-top: 32px; }
.textseite__text a { color: var(--c-anthrazit); }

.textseite__wege {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.textseite__wege .anlage__link { margin-top: 0; }

@media (max-width: 719px) {
  .textseite h1 { font-size: 30px; }
}

/* --- Platzhalter, der einen Bild-Slot füllt (FR-65) ------------------------ */
/*
  Übernimmt die Größe des Slots, damit ein fehlendes Bild das Raster nicht
  zusammenfallen lässt. Zentriert, damit er in großen Flächen nicht verloren wirkt.
*/
.platzhalter--bild {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  margin-top: 0;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: var(--c-grund);
}
.platzhalter--bild.bild-hoch { height: 520px; }
@media (max-width: 899px) { .platzhalter--bild.bild-hoch { height: 360px; } }
@media (max-width: 719px) { .platzhalter--bild.bild-hoch { height: 260px; } }