/* ===========================================================================
   sektionen.css - Inhaltsabschnitte der Startseite

   P4: Hero, Signaturleiste, Einleitung, Yoga-Angebot.
   P5: Wochenstundenplan mit Ferien und Ausfaellen.
   P6: Ueber Astrid, Studio, Highlight-Flaeche, Zitat.
   P7: Kontaktbereich, Formular, Statusmeldungen, Bestaetigungsseite.
   P8: Rechtsseiten (Impressum, Datenschutz).

   Setzt tokens.css, basis.css und geruest.css voraus. Keine externen URLs.
   Bewegung ausschliesslich ueber die Dauer-Tokens - damit greift
   prefers-reduced-motion automatisch.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Schaltflaechen
   ------------------------------------------------------------------------ */
.schaltflaeche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bedienelement-min-hoehe);
  padding: 0 var(--abstand-m);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--dauer-kurz) var(--kurve-standard),
    border-color var(--dauer-kurz) var(--kurve-standard),
    color var(--dauer-kurz) var(--kurve-standard);
}

.schaltflaeche--primaer {
  background-color: var(--grund-invers);
  color: var(--text-auf-invers);
  border: var(--rahmen-duenn) solid var(--grund-invers);
}

.schaltflaeche--primaer:hover,
.schaltflaeche--primaer:focus-visible {
  background-color: var(--akzent-primaer);
  border-color: var(--akzent-primaer);
  color: var(--text-auf-akzent);
}

.schaltflaeche--sekundaer {
  border: var(--rahmen-duenn) solid var(--linie-bedienelement);
  color: var(--text-haupt);
}

.schaltflaeche--sekundaer:hover,
.schaltflaeche--sekundaer:focus-visible {
  border-color: var(--linie-stark);
  color: var(--akzent-primaer);
}

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-l);
  align-items: end;
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
}

.hero__text {
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--abstand-2xl);
}

.hero__titel {
  margin: 0;
  font-size: var(--groesse-titel-1);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-schlagzeile);
  letter-spacing: var(--laufweite-schlagzeile);
  text-wrap: balance;
}

.hero__titel em {
  font-style: italic;
  font-weight: var(--staerke-leicht);
}

.hero__einleitung {
  max-width: 33ch;
  margin: var(--abstand-l) 0 0;
  color: var(--text-gedaempft);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs);
  margin: var(--abstand-l) 0 0;
  max-width: none;
}

/* Der Bildausschnitt wird ueber das Seitenverhaeltnis gesteuert, nicht
   ueber eigene Zuschnitte. Auf dem Smartphone steht das Bild breiter und
   flacher, am Desktop hochformatig wie in Konzept A. */
.hero__bild {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.hero__foto,
.hero__bild picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__foto {
  object-fit: cover;
  /* Astrid sitzt im linken Drittel des Fotos - so bleibt sie im
     hochformatigen Desktop-Rahmen, und rechts ist noch der Brunnen zu sehen. */
  object-position: 33% 50%;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(20rem, 1.05fr) minmax(17.5rem, 0.95fr);
    gap: 0;
  }

  .hero__text {
    padding-block: var(--sektionsabstand) var(--abstand-3xl);
  }

  .hero__bild {
    aspect-ratio: auto;
    /* Bewusst etwas flacher als in Konzept A: die Quelle liegt im
       Querformat vor, und ein zu hoher Rahmen wuerde sie stark
       beschneiden und zugleich sehr grosse Dateien verlangen. Ein
       eigener Hochformat-Zuschnitt waere die bessere Loesung - er
       wurde in P2b bewusst nicht eingebrannt. */
    height: clamp(24rem, 52vw, 40rem);
  }
}

/* ---------------------------------------------------------------------------
   Signaturleiste
   ------------------------------------------------------------------------ */
.signaturleiste {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-m);
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--abstand-m) var(--seitenrand);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.signaturleiste__name {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-style: italic;
  color: var(--text-gedaempft);
}

.signaturleiste__figuren {
  width: clamp(11rem, 30vw, 20rem);
  height: auto;
}

/* ---------------------------------------------------------------------------
   Einleitung
   ------------------------------------------------------------------------ */
.einleitung {
  display: grid;
  /* min() verhindert, dass die Spalte breiter wird als der
     verfuegbare Platz. Ohne das laeuft das Raster unterhalb von
     etwa 320 px waagrecht ueber - im Browser nachgemessen. */
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 5.625rem);
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand) var(--seitenrand) var(--sektionsabstand-klein);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.einleitung__leitsatz {
  max-width: 24ch;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-titel-4);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-kompakt);
  letter-spacing: var(--laufweite-titel);
}

.einleitung__text {
  max-width: var(--breite-lesetext);
  color: var(--text-gedaempft);
}

/* ---------------------------------------------------------------------------
   Yoga-Angebot

   Jede Zeile ist ein <details>. Die Bewegung macht ausschliesslich CSS - die
   Seite laedt dafuer kein Skript. Moderne Browser fahren die Hoehe ueber
   ::details-content und `interpolate-size` weich auf und zu; wo das fehlt,
   klappt die Zeile schlicht ohne Uebergang um. Lesbar und bedienbar ist sie
   in beiden Faellen. Bei prefers-reduced-motion stehen die Dauern ohnehin
   auf 0.01ms (tokens.css) - dann bewegt sich nichts.
   ------------------------------------------------------------------------ */
.angebot {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding-bottom: var(--sektionsabstand-klein);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
  /* Nur hier, nicht global: erlaubt den Uebergang von 0 auf auto. */
  interpolate-size: allow-keywords;
}

/* Derselbe Auftakt wie beim Stundenplan: Titel in Titelgroesse 2, darunter
   die Angabe in Versalien. Vorher stand hier nur ein kleines Label - der
   Abschnitt war als einziger ohne Ueberschrift und wirkte wie ein Anhang
   der Einleitung. */
.angebot__kopf {
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--abstand-xl);
}

.angebot__ueberschrift {
  margin: 0;
  font-size: var(--groesse-titel-2);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-schlagzeile);
  letter-spacing: var(--laufweite-titel);
}

.angebot__hinweis {
  margin: var(--abstand-2xs) 0 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.angebot__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.angebot__zeile {
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.angebot__zeile:last-child {
  border-bottom: var(--rahmen-duenn) solid var(--linie-dezent);
}

/* --- Die immer sichtbare Zeile ------------------------------------------- */

.angebot__zusammenfassung {
  display: grid;
  list-style: none;
  grid-template-columns: 1fr auto;
  gap: var(--abstand-2xs) var(--abstand-s);
  padding: var(--abstand-m) var(--seitenrand);
  cursor: pointer;
  transition: background-color var(--dauer-mittel) var(--kurve-standard);
}

.angebot__zusammenfassung--fest {
  cursor: auto;
}

/* Das Standarddreieck weicht dem eigenen Pfeil. */
.angebot__zusammenfassung::-webkit-details-marker {
  display: none;
}

.angebot__zusammenfassung::marker {
  content: "";
}

.angebot__zusammenfassung:hover {
  background-color: var(--grund-abgesetzt);
}

/* Eine offene Zeile bleibt abgesetzt - so ist auf einen Blick klar, welche
   der sechs gerade ausgeklappt ist. */
.angebot__eintrag[open] {
  background-color: var(--grund-abgesetzt);
}

.angebot__nummer {
  grid-column: 1;
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  font-variant-numeric: tabular-nums;
  transition: color var(--dauer-kurz) var(--kurve-standard);
}

.angebot__eintrag[open] .angebot__nummer,
.angebot__zusammenfassung:hover .angebot__nummer {
  color: var(--akzent-primaer);
}

.angebot__titel,
.angebot__beschreibung,
.angebot__zusatz {
  grid-column: 1 / -1;
}

.angebot__titel {
  margin: 0;
  font-size: var(--groesse-titel-4);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
}

.angebot__beschreibung {
  display: block;
  max-width: 44ch;
  min-width: 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-klein);
  line-height: var(--zeilenhoehe-fliesstext);
}

.angebot__zusatz {
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  white-space: nowrap;
  /* Kein Abschneiden, falls doch einmal ein laengerer Zusatz gepflegt wird. */
  overflow-wrap: anywhere;
}

/* --- Der Pfeil ------------------------------------------------------------ */

.angebot__pfeil {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-gedaempft);
  transition: transform var(--dauer-kurz) var(--kurve-standard),
              color var(--dauer-kurz) var(--kurve-standard);
}

.angebot__zusammenfassung:hover .angebot__pfeil {
  color: var(--akzent-primaer);
}

.angebot__eintrag[open] .angebot__pfeil {
  transform: rotate(180deg);
  color: var(--akzent-primaer);
}

/* --- Der ausklappbare Teil ------------------------------------------------ */

.angebot__eintrag::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dauer-mittel) var(--kurve-standard),
              content-visibility var(--dauer-mittel) var(--kurve-standard) allow-discrete;
}

.angebot__eintrag[open]::details-content {
  block-size: auto;
}

.angebot__mehr {
  padding: 0 var(--seitenrand) var(--abstand-l);
}

/* Der Inhalt zieht leicht nach, statt hart dazustehen. */
.angebot__mehr-inhalt {
  display: grid;
  gap: var(--abstand-m);
  opacity: 0;
  translate: 0 -0.35rem;
  transition: opacity var(--dauer-mittel) var(--kurve-ein),
              translate var(--dauer-mittel) var(--kurve-ein);
}

.angebot__eintrag[open] .angebot__mehr-inhalt {
  opacity: 1;
  translate: 0 0;
  transition-delay: 60ms;
}

.angebot__mehr-text {
  display: grid;
  align-content: start;
  gap: var(--abstand-s);
  max-width: 52ch;
}

.angebot__fuer,
.angebot__bemerkung {
  margin: 0;
  font-size: var(--groesse-klein);
  line-height: var(--zeilenhoehe-fliesstext);
}

/* Fliesstext ist durchgehend im helleren Grau - Wunsch von Astrid
   (2026-09-28). Dunkel bleiben Ueberschriften und Bedienelemente. */
.angebot__fuer {
  color: var(--text-gedaempft);
}

.angebot__marke {
  display: block;
  margin-bottom: var(--abstand-3xs);
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.angebot__punkte {
  display: grid;
  gap: var(--abstand-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: var(--rahmen-stark) solid var(--akzent-sekundaer);
  padding-left: var(--abstand-s);
  color: var(--text-gedaempft);
  font-size: var(--groesse-klein);
  line-height: var(--zeilenhoehe-fliesstext);
}

.angebot__bemerkung {
  color: var(--text-gedaempft);
  font-style: italic;
}

/* Zwei Stufen, beide mit den Umbruchpunkten des Designs (48rem / 62rem).

   Wichtig in beiden: Jede Zeile ist ein eigenes Raster - sie teilen sich keines.
   Deshalb darf keine Spalte ihre Breite aus dem Inhalt ziehen. Eine `auto`-Spalte
   waere bei «Nach Absprache» breiter als bei «60 Min», und die Spalten davor
   saessen in jeder Zeile woanders. Alle Spuren sind darum fest oder rein anteilig
   (`minmax(0, fr)`): So beginnen Titel, Text und Zusatz in allen sechs Zeilen an
   derselben Stelle. */

/* Tablet: Nummer und Pfeil aussen, die Angaben gestapelt dazwischen. Fuer die
   vierspaltige Zeile fehlt hier schlicht die Breite. */
@media (min-width: 48rem) {
  .angebot__zusammenfassung {
    grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem;
    gap: var(--abstand-2xs) var(--abstand-s);
    align-items: start;
  }

  .angebot__nummer {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.5rem;
  }

  .angebot__titel,
  .angebot__beschreibung,
  .angebot__zusatz {
    grid-column: 2;
  }

  .angebot__pfeil {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0.35rem;
  }

  /* Der ausgeklappte Text beginnt unter den Angaben, nicht unter der Nummer. */
  .angebot__mehr {
    padding-left: calc(var(--seitenrand) + 3.25rem + var(--abstand-s));
  }
}

/* Desktop: die Zeile aus Konzept A - Nummer, Titel, Text, Zusatz, Pfeil
   nebeneinander, auf gemeinsamer Schriftlinie. */
@media (min-width: 62rem) {
  .angebot__zusammenfassung {
    grid-template-columns:
      3.25rem            /* Nummer */
      minmax(0, 1.8fr)   /* Titel */
      minmax(0, 2fr)     /* Beschreibung */
      9.5rem             /* Zusatz - fest, damit alle sechs untereinander stehen */
      1.5rem;            /* Pfeil */
    gap: var(--abstand-s);
    align-items: baseline;
  }

  .angebot__titel {
    grid-column: 2;
    grid-row: 1;
  }

  .angebot__beschreibung {
    grid-column: 3;
    grid-row: 1;
  }

  .angebot__zusatz {
    grid-column: 4;
    grid-row: 1;
  }

  .angebot__pfeil {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
  }
}

/* ---------------------------------------------------------------------------
   Wochenstundenplan (P5)

   Ein Markup fuer beide Ansichten. Am Desktop stehen die fuenf Tage
   nebeneinander. Auf dem Smartphone zeigt js-stundenplan einen Tag pro
   Ansicht; ohne JavaScript bleiben alle fuenf untereinander sichtbar.
   ------------------------------------------------------------------------ */
.stundenplan {
  background-color: var(--grund-abgesetzt);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.stundenplan__kopf {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--abstand-l);
}

.stundenplan__titel {
  margin: 0;
  font-size: var(--groesse-titel-2);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-schlagzeile);
  letter-spacing: var(--laufweite-titel);
}

.stundenplan__woche {
  margin: var(--abstand-2xs) 0 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.stundenplan__hinweis {
  max-width: 38ch;
  margin: var(--abstand-s) 0 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-klein);
}

/* --- Wochennavigation: echte Verweise, funktionieren ohne JavaScript --- */
.stundenplan__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs) var(--abstand-m);
  margin: var(--abstand-m) 0 0;
}

.stundenplan__nav-verweis {
  font-size: var(--groesse-klein);
  white-space: nowrap;
}

.stundenplan__nav-verweis--vor {
  margin-inline-start: auto;
}

/* --- Tagesauswahl (nur schmal, nur mit JavaScript) --- */
.stundenplan__auswahl {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: 0 var(--seitenrand) var(--abstand-s);
}

.stundenplan__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2xs);
}

.stundenplan__chip {
  min-width: var(--touchziel-min);
  min-height: var(--touchziel-min);
  padding: var(--abstand-2xs) var(--abstand-xs);
  border: var(--rahmen-duenn) solid var(--linie-bedienelement);
  background-color: transparent;
  color: var(--text-haupt);
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-label);
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) var(--kurve-standard),
    color var(--dauer-kurz) var(--kurve-standard);
}

.stundenplan__chip[aria-selected="true"] {
  background-color: var(--grund-invers);
  border-color: var(--grund-invers);
  color: var(--text-auf-invers);
}

/* --- Wochenraster --- */
.stundenplan__woche-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: 0 var(--seitenrand) var(--abstand-xl);
  list-style: none;
}

.stundenplan__tag {
  padding: var(--abstand-s) 0 var(--abstand-m);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.stundenplan__tag--heute {
  background-color: var(--grund-heute);
}

/* Traeger der Rolle "tabpanel", die stundenplan.js auf schmalen
   Bildschirmen setzt. Bewusst ohne eigene Masse: das Aussehen macht
   weiterhin .stundenplan__tag. Nur der Fokusring gehoert hierher, denn
   anspringbar ist im Registerkarten-Muster dieses Element. */
.stundenplan__tagpanel {
  outline-offset: 0;
}

.stundenplan__tagkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-2xs);
  margin: 0 0 var(--abstand-s);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label-weit);
  text-transform: uppercase;
}

.stundenplan__datum {
  color: var(--text-gedaempft);
  letter-spacing: var(--laufweite-normal);
  font-variant-numeric: tabular-nums;
}

.stundenplan__heute {
  margin-left: auto;
  color: var(--akzent-primaer);
  letter-spacing: var(--laufweite-label);
}

.stundenplan__kurse {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stundenplan__zeit {
  margin: 0 0 var(--abstand-3xs);
  color: var(--text-gedaempft);
  font-size: var(--groesse-fein);
  font-variant-numeric: tabular-nums;
}

.stundenplan__kursname {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  line-height: var(--zeilenhoehe-kompakt);
  /* Letzte Sicherung gegen einen waagrechten Ueberlauf. Sie soll im
     Normalfall NICHT greifen - dafuer sorgt die an die Spaltenbreite
     angepasste Groesse weiter unten im 48rem-Block. Kommt eines Tages ein
     noch laengerer Kursname dazu, wird er getrennt statt in die
     Nachbarspalte zu ragen.

     Die Silbentrennung greift, weil das Dokument lang="de-CH" traegt;
     break-word faengt Browser ohne Trennmuster ab. Dieselbe Kombination
     wie bei den Rechtsseiten weiter unten. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Ausgefallene Kurse bleiben stehen und werden deutlich markiert.
   Der Durchstrich allein genuegt nicht - die Marke "Faellt aus" steht
   als Text daneben. */
.stundenplan__kurs--faellt-aus .stundenplan__kursname {
  text-decoration: line-through;
  text-decoration-thickness: var(--rahmen-duenn);
  color: var(--text-gedaempft);
}

.stundenplan__ausfall {
  margin: var(--abstand-3xs) 0 0;
  font-size: var(--groesse-fein);
}

.stundenplan__marke {
  display: inline-block;
  padding: 0 var(--abstand-3xs);
  background-color: var(--zustand-fehler);
  color: var(--farbe-papier-warm);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.stundenplan__grund {
  color: var(--text-gedaempft);
}

.stundenplan__lage {
  margin: 0 0 var(--abstand-s);
  padding: var(--abstand-2xs) var(--abstand-xs);
  font-size: var(--groesse-fein);
  color: var(--text-haupt);
}

.stundenplan__lage--ferien {
  border-left: var(--rahmen-stark) solid var(--zustand-warnung);
  background-color: var(--grund-seite);
}

.stundenplan__lage--ausfall {
  border-left: var(--rahmen-stark) solid var(--zustand-fehler);
  background-color: var(--grund-seite);
}

.stundenplan__lagetitel {
  display: block;
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.stundenplan__leer {
  margin: 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-fein);
}

/* Zitat statt Kursliste waehrend der Ferien - ein Ausschnitt aus dem
   Zitat-Abschnitt weiter unten auf der Seite, hier klein und ruhig, nicht
   als zweite grosse Schlagzeile. */
.stundenplan__ferienspruch {
  margin: 0;
  padding: 0 var(--abstand-xs);
}

.stundenplan__ferienspruch blockquote {
  margin: 0;
  font-size: var(--groesse-fein);
  font-style: italic;
  line-height: var(--zeilenhoehe-kompakt);
}

.stundenplan__ferienspruch blockquote p {
  max-width: none;
  margin: 0;
}

.stundenplan__ferienspruch figcaption {
  margin-top: var(--abstand-2xs);
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.stundenplan__ferienspruch figcaption cite {
  font-style: normal;
}

/* Mit JavaScript auf schmalen Bildschirmen: ein Tag pro Ansicht.

   ZWEI Bedingungen muessen zusammenkommen: die Bildschirmbreite UND die
   Markierung data-tagesansicht, die stundenplan.js genau dann setzt, wenn
   es die Tagesauswahl aufgebaut hat.

   Die zweite Bedingung ist eine Sicherung, kein Beiwerk. Haengt das
   Ausblenden allein an einer Klasse am <html>, genuegt ein nicht
   ausgeloester Umschaltvorgang - und der Stundenplan waere vollstaendig
   leer. Mit der Markierung faellt jeder Zwischenzustand auf die sichere
   Seite: keine Markierung, alle fuenf Tage sichtbar.

   Geprueft in P10 in beide Richtungen: Fenster von breit auf schmal und
   zurueck. */
@media (max-width: 47.99rem) {
  .js-stundenplan .stundenplan__woche-raster[data-tagesansicht] .stundenplan__tag {
    display: none;
  }

  .js-stundenplan .stundenplan__woche-raster[data-tagesansicht] .stundenplan__tag[data-sichtbar] {
    display: block;
  }
}

/* --- Astrids Ferien unter dem Wochenraster ---
   Ruhig und schmal, damit sie den Stundenplan nicht konkurriert. Der
   Rahmen links greift die Ferienmarkierung im Raster auf. */
.stundenplan__ferien {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: 0 var(--seitenrand) var(--sektionsabstand-klein);
}

.stundenplan__ferientitel {
  margin: 0 0 var(--abstand-s);
  font-size: var(--groesse-label);
  font-weight: var(--staerke-normal);
  letter-spacing: var(--laufweite-label-weit);
  text-transform: uppercase;
}

.stundenplan__ferienliste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stundenplan__ferieneintrag {
  padding: var(--abstand-2xs) var(--abstand-xs);
  border-left: var(--rahmen-stark) solid var(--zustand-warnung);
  background-color: var(--grund-seite);
  font-size: var(--groesse-fein);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
  .stundenplan__ferienliste {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

/* Ab Tablet die ganze Woche nebeneinander, wie in Konzept A. */
@media (min-width: 48rem) {
  .stundenplan__auswahl {
    display: none;
  }

  .stundenplan__woche-raster {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .stundenplan__tag {
    min-height: 14rem;
    padding: var(--abstand-s) var(--abstand-xs) var(--abstand-m);
    border-top: 0;
    border-left: var(--rahmen-duenn) solid var(--linie-dezent);
  }

  .stundenplan__tag:last-child {
    border-right: var(--rahmen-duenn) solid var(--linie-dezent);
  }

  /* Ab hier stehen fuenf Tage nebeneinander, jede Spalte ist zunaechst nur
     gut 116 Pixel breit. --groesse-gross faengt bei 20 px an und war damit
     zu gross: "Yoga in der Schwangerschaft" ragte bei 768 und 800 Pixeln
     in die Nachbarspalte. --groesse-spaltentext waechst steiler mit der
     Fensterbreite mit und erreicht dieselben 24 px am oberen Ende.
     Gefunden und nachgemessen in P10. */
  .stundenplan__kursname {
    font-size: var(--groesse-spaltentext);
  }

  .stundenplan__tagkopf {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-3xs);
  }

  .stundenplan__heute {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   Ueber Astrid (P6)

   Zweispaltig nach Konzept A: zwei Bilder links, Text rechts. Auf dem
   Smartphone stehen die beiden Bilder nebeneinander ueber dem Text. Die
   Spalten 4fr / 9fr folgen den Seitenverhaeltnissen 2:3 und 3:2 - so sind
   beide gleich hoch und nichts wird beschnitten (wie im Bildband).
   ------------------------------------------------------------------------ */
.astrid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.astrid__bilder {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
  gap: var(--abstand-2xs);
}

.astrid__bild {
  overflow: hidden;
}

.astrid__bild--hoch {
  aspect-ratio: 2 / 3;
}

.astrid__bild--quer {
  aspect-ratio: 3 / 2;
}

.astrid__bild picture,
.astrid__foto {
  display: block;
  width: 100%;
  height: 100%;
}

.astrid__foto {
  object-fit: cover;
}

.astrid__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sektionsabstand-klein) var(--seitenrand);
}

.astrid__leitsatz {
  max-width: var(--breite-schlagzeile);
  margin: 0;
  font-size: var(--groesse-titel-3);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
}

.astrid__fliesstext {
  max-width: var(--breite-lesetext);
  margin-top: var(--abstand-l);
  color: var(--text-gedaempft);
}

.astrid__merksatz {
  margin-top: var(--abstand-s);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-style: italic;
  color: var(--text-gedaempft);
}

/* ---------------------------------------------------------------------------
   Bildband

   Hochformat, Querformat, Hochformat. Die Spalten 4fr / 9fr / 4fr folgen den
   Seitenverhaeltnissen 2:3 und 3:2 - so stehen alle drei gleich hoch und es
   wird nichts beschnitten. Auf dem Smartphone steht das Querformat oben in
   voller Breite, die zwei Hochformate darunter nebeneinander.
   ------------------------------------------------------------------------ */
.bildband {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand-klein) var(--seitenrand);
}

.bildband__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bildband__eintrag {
  overflow: hidden;
  background-color: var(--grund-abgesetzt);
}

.bildband__eintrag--hoch {
  aspect-ratio: 2 / 3;
}

.bildband__eintrag--quer {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 3 / 2;
}

.bildband__eintrag picture,
.bildband__foto {
  display: block;
  width: 100%;
  height: 100%;
}

.bildband__foto {
  object-fit: cover;
  transition: transform var(--dauer-lang) var(--kurve-standard);
}

/* Ganz leichtes Heranruecken beim Ueberfahren - nur auf Zeigegeraeten. */
@media (hover: hover) {
  .bildband__eintrag:hover .bildband__foto {
    transform: scale(1.025);
  }
}

@media (min-width: 48rem) {
  .bildband__liste {
    grid-template-columns: 4fr 9fr 4fr;
    gap: var(--abstand-m);
  }

  .bildband__eintrag--quer {
    grid-column: auto;
    grid-row: auto;
  }
}

/* --- Ausbildungsweg: die Geschichte hinter den Kennzahlen ---

   Bewusst ruhig gesetzt: eine Linie darueber wie bei den Kennzahlen, eine
   kleine Versalien-Ueberschrift, dann Fliesstext in Lesebreite. Der
   Schlusssatz nimmt die Form des Merksatzes auf - so klingt der Abschnitt
   aus, wie er begonnen hat. */
.werdegang {
  margin-top: var(--abstand-2xl);
  padding-top: var(--abstand-m);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.werdegang__titel {
  margin: 0 0 var(--abstand-s);
  color: var(--text-gedaempft);
  font-family: var(--schrift-grund);
  font-size: var(--groesse-label);
  font-weight: var(--staerke-halbfett, 600);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

/* Die Linie oben laeuft so breit wie die der Kennzahlen, der Text bleibt
   in Lesebreite. */
.werdegang__absatz,
.werdegang__schluss {
  max-width: var(--breite-lesetext);
}

.werdegang__absatz {
  margin: 0 0 var(--abstand-s);
  color: var(--text-gedaempft);
}

.werdegang__absatz:last-of-type {
  margin-bottom: 0;
}

.werdegang__schluss {
  margin-top: var(--abstand-m);
  padding-left: var(--abstand-s);
  border-left: var(--rahmen-stark) solid var(--akzent-sekundaer);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-style: italic;
  color: var(--text-gedaempft);
}

/* --- Kennzahlen: Wert und Beschriftung als Paar --- */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-l);
  margin: var(--abstand-2xl) 0 0;
  padding-top: var(--abstand-m);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.kennzahl__wert {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-titel-4);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-schlagzeile);
}

.kennzahl__beschriftung {
  /* dd bringt einen eigenen Einzug mit - der gehoert hier nicht hin. */
  margin: var(--abstand-3xs) 0 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

/* Am Desktop bewusst zurueckhaltend: zwei kleinere Bilder untereinander,
   hoechstens 26rem breit - oben das Hochformat im Rahmen 4:5, darunter das
   Querformat 3:2. Sie stehen am Innenrand ihrer Spalte, direkt neben dem
   Text, und beginnen auf derselben Hoehe wie die Ueberzeile. */
@media (min-width: 62rem) {
  .astrid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    column-gap: var(--abstand-2xl);
    padding: var(--sektionsabstand) var(--seitenrand);
  }

  .astrid__bilder {
    grid-template-columns: 1fr;
    gap: var(--abstand-m);
    justify-self: end;
    width: 100%;
    max-width: 26rem;
  }

  /* 4:5 statt 2:3, damit das obere Bild nicht zu lang wird. Beschnitten
     wird oben im Laub - Gesicht und Fuesse bleiben im Bild. */
  .astrid__bild--hoch {
    aspect-ratio: 4 / 5;
  }

  .astrid__bild--hoch .astrid__foto {
    object-position: 50% 100%;
  }

  .astrid__text {
    padding: 0;
  }
}

/* ---------------------------------------------------------------------------
   Studio "Zeit fuer dich" (P6)

   Kopfzeile, breites Bild, vierteilige Faktenleiste. Preise und Flaechen
   kommen unveraendert aus studio.yaml. Kein Buchungselement.
   ------------------------------------------------------------------------ */
.studio {
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.studio__kopf {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-s);
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--abstand-l);
}

.studio__kopf .ueberzeile {
  grid-column: 1 / -1;
  margin: 0;
}

.studio__titel {
  margin: 0;
  font-size: var(--groesse-titel-2);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-schlagzeile);
  letter-spacing: var(--laufweite-titel);
}

.studio__beschreibung {
  max-width: 44ch;
  margin: 0;
  color: var(--text-gedaempft);
}

.studio__bild {
  overflow: hidden;
  height: clamp(18.75rem, 44vw, 37.5rem);
}

.studio__bild picture,
.studio__foto {
  display: block;
  width: 100%;
  height: 100%;
}

.studio__foto {
  object-fit: cover;
  object-position: 50% 50%;
}

/* --- Faktenleiste --- */
/* Schmal zwei feste Spalten, ab Tablet alle vier nebeneinander wie in
   Konzept A. Eine feste Spaltenzahl statt auto-fit, damit die senkrechten
   Trennlinien sicher an der richtigen Stelle sitzen. */
.faktenleiste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-bottom: var(--rahmen-duenn) solid var(--linie-dezent);
}

.faktenleiste__feld {
  padding: var(--abstand-m) var(--abstand-s);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

.faktenleiste__feld:nth-child(odd) {
  padding-left: var(--seitenrand);
}

.faktenleiste__feld:nth-child(even) {
  padding-right: var(--seitenrand);
  border-left: var(--rahmen-duenn) solid var(--linie-dezent);
}

.faktenleiste__beschriftung {
  margin: 0;
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.faktenleiste__wert {
  margin: var(--abstand-2xs) 0 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  line-height: var(--zeilenhoehe-kompakt);
}

@media (min-width: 48rem) {
  /* Dieselben zwei Spalten wie die Einleitung: Die Beschreibung beginnt
     damit auf derselben Linie wie deren Fliesstext und sitzt unten buendig
     zum Titel, statt frei am rechten Rand zu haengen. */
  .studio__kopf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 5.625rem);
    align-items: end;
  }

  /* Senkrechte Trennlinien wie in Konzept A. Die waagrechte Linie oben
     entfaellt dann, weil die vier Felder in einer Zeile stehen. */
  .faktenleiste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .faktenleiste__feld,
  .faktenleiste__feld:nth-child(odd),
  .faktenleiste__feld:nth-child(even) {
    padding-inline: var(--abstand-m);
    border-top: 0;
    border-left: var(--rahmen-duenn) solid var(--linie-dezent);
  }

  .faktenleiste__feld:first-child {
    padding-left: var(--seitenrand);
    border-left: 0;
  }

  .faktenleiste__feld:last-child {
    padding-right: var(--seitenrand);
  }
}

/* ---------------------------------------------------------------------------
   Highlight-Flaeche (P6)

   Farbige Sektion nach Konzept A. Sie wird nur ausgegeben, wenn es einen
   aktiven, unabgelaufenen Eintrag gibt - ohne Eintrag steht hier nichts,
   auch keine leere Flaeche.

   Der Grund ist Salbei, also hell. Es gilt deshalb NICHT die Regel fuer
   dunkle Flaechen; Text und Fokusring bleiben dunkel.
   ------------------------------------------------------------------------ */
.highlight {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--grund-hervorhebung);
  color: var(--text-auf-hervorhebung);
}

.highlight__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sektionsabstand-klein) var(--seitenrand);
}

/* Die allgemeine Ueberzeile ist auf hellem Papier abgestimmt. Auf Salbei
   braucht sie den eigenen, geprueften Ton. */
.highlight__ueberzeile {
  color: var(--text-auf-hervorhebung);
}

.highlight__titel {
  margin: 0;
  font-size: var(--groesse-titel-2);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-schlagzeile);
  letter-spacing: var(--laufweite-titel);
}

.highlight__beschreibung {
  max-width: 46ch;
  margin: var(--abstand-m) 0 0;
}

.highlight__zeitraum {
  margin: var(--abstand-m) 0 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
}

.highlight__bild {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.highlight__bild picture,
.highlight__foto {
  display: block;
  width: 100%;
  height: 100%;
}

.highlight__foto {
  object-fit: cover;
  object-position: 50% 50%;
}

@media (min-width: 62rem) {
  .highlight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .highlight__text {
    padding: var(--sektionsabstand) var(--abstand-xl);
  }

  .highlight__bild {
    aspect-ratio: auto;
    min-height: clamp(18.75rem, 40vw, 33.75rem);
  }
}

/* ---------------------------------------------------------------------------
   Zitat (P6)

   Kurzes Zitat mit Quellenangabe, technisch als figure/blockquote/cite
   ausgezeichnet. Keine Bewegung - das Reveal aus Konzept A gehoert zu P9.
   ------------------------------------------------------------------------ */
.zitat {
  padding: var(--sektionsabstand) var(--seitenrand);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
  text-align: center;
}

.zitat__block {
  margin: 0 auto;
}

/* Die Breitenbegrenzung gehoert auf das Element, das die Zitatschrift
   traegt. Auf der figure haette 26ch die Grundschrift als Bezug und waere
   damit rund ein Drittel zu schmal - das Zitat braeche dann in sehr viele
   kurze Zeilen um. */
.zitat__text {
  max-width: var(--breite-schlagzeile);
  margin: 0 auto;
  font-size: var(--groesse-titel-3);
  font-weight: var(--staerke-extraleicht);
  font-style: italic;
  line-height: var(--zeilenhoehe-kompakt);
  letter-spacing: var(--laufweite-titel);
}

/* Absaetze tragen sonst die Lesebreite fuer Fliesstext. Hier bestimmt der
   Block die Breite. */
.zitat__text p {
  max-width: none;
  margin: 0;
}

.zitat__quelle {
  margin-top: var(--abstand-l);
  color: var(--text-gedaempft);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label-weit);
  text-transform: uppercase;
}

.zitat__quelle cite {
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   Schaltflaeche auf dunklem Grund (P7)

   Der Kontaktbereich ist die dunkle Flaeche aus Konzept A. Die primaere
   Schaltflaeche waere dort dunkel auf dunkel.
   ------------------------------------------------------------------------ */
.schaltflaeche--hell {
  background-color: var(--text-auf-invers);
  color: var(--grund-invers);
  border: var(--rahmen-duenn) solid var(--text-auf-invers);
}

.schaltflaeche--hell:hover,
.schaltflaeche--hell:focus-visible {
  background-color: var(--akzent-sekundaer);
  border-color: var(--akzent-sekundaer);
  color: var(--grund-hervorhebung-tief);
}

/* ---------------------------------------------------------------------------
   Kontaktbereich (P7)

   Dunkle Flaeche nach Konzept A: Kontaktangaben links, Formular rechts.
   Auf dem Smartphone untereinander.
   ------------------------------------------------------------------------ */
.kontakt {
  background-color: var(--grund-invers);
  color: var(--text-auf-invers);
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--abstand-xl);
}

.kontakt__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
}

.kontakt .ueberzeile {
  color: var(--text-auf-invers-gedaempft);
}

/* Links erben aus basis.css die dunkle Textfarbe. Auf dieser Flaeche waeren
   sie damit unsichtbar - dieselbe Umkehrung wie im Fussbereich. */
.kontakt a {
  color: var(--text-auf-invers);
}

.kontakt a:hover,
.kontakt a:focus-visible {
  color: var(--akzent-sekundaer);
}

.kontakt__titel {
  margin: 0;
  font-size: var(--groesse-titel-3);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
}

.kontakt__einleitung {
  max-width: 42ch;
  margin: var(--abstand-s) 0 0;
  color: var(--text-auf-invers-gedaempft);
}

/* E-Mail und Telefon: die zwei Wege, auf denen jemand tatsaechlich Kontakt
   aufnimmt. Sie stehen gross genug, um sofort aufzufallen, aber nicht in
   Schlagzeilengroesse - eine Adresse in 40 px bricht mitten im Wort um.
   Die Linie darunter macht sie als Verweis erkennbar. */
.kontakt__wege {
  display: grid;
  gap: var(--abstand-2xs);
  margin: var(--abstand-l) 0 0;
  padding: 0;
  list-style: none;
}

.kontakt__weg {
  display: inline-block;
  padding-bottom: var(--abstand-3xs);
  border-bottom: var(--rahmen-duenn) solid var(--text-auf-invers-gedaempft);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  text-decoration: none;
  /* Lange Adressen brechen zur Not um, statt den Bildschirm zu sprengen. */
  overflow-wrap: anywhere;
  transition: border-color var(--dauer-kurz) var(--kurve-standard);
}

.kontakt__weg:hover,
.kontakt__weg:focus-visible {
  border-bottom-color: var(--akzent-sekundaer);
}

/* Anschrift und Ortsangaben in einem Block: inhaltlich dasselbe, und es
   spart gegenueber fuenf Einzelzeilen deutlich Hoehe. */
.kontakt__adresse {
  margin: var(--abstand-l) 0 0;
  color: var(--text-auf-invers-gedaempft);
  font-size: var(--groesse-klein);
  font-style: normal;
  line-height: var(--zeilenhoehe-weit);
}

.kontakt__name {
  display: block;
  color: var(--text-auf-invers);
}

/* Marke und Auszeichnungen schliessen die linke Spalte ab - direkt unter der
   Anschrift, auf der Hoehe des Nachrichtenfelds. Zuvor standen sie im
   Fussbereich und kosteten dort eine eigene, hohe Zeile. */
.kontakt__marke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: var(--rahmen-duenn) solid rgb(242 236 226 / 18%);
}

.kontakt__logo {
  width: min(100%, 13rem);
  height: auto;
}

.kontakt__zeichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt__zeichen img {
  width: clamp(4rem, 11vw, 5.5rem); /* 64 -> 88 px */
  height: auto;
}

.kontakt__zeichen li:last-child img {
  width: clamp(3.5rem, 10vw, 5rem); /* 56 -> 80 px, rundes Zeichen */
  border-radius: var(--radius-kreis);
}

.kontakt__formulartitel {
  margin: 0;
  font-size: var(--groesse-titel-4);
  font-weight: var(--staerke-leicht);
}

.kontakt__formularhinweis {
  max-width: 46ch;
  margin: var(--abstand-2xs) 0 var(--abstand-l);
  color: var(--text-auf-invers-gedaempft);
  font-size: var(--groesse-klein);
}

/* --- Verbandszeichen --- */
@media (min-width: 48rem) {
  .kontakt__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Formular (P7)

   Vollstaendig ohne JavaScript bedienbar. Es gibt kein Skript, das mit dem
   Formular zu tun haette - Pruefung und Fehlermeldungen kommen vom Server.

   Fehler werden nie allein ueber Farbe gekennzeichnet: es steht immer ein
   Text daneben, und die Zusammenfassung oben nennt jedes betroffene Feld.
   ------------------------------------------------------------------------ */
.formular__feld {
  margin-bottom: var(--abstand-s);
}

.formular__beschriftung {
  display: block;
  min-height: auto;
  margin-bottom: var(--abstand-3xs);
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.formular__eingabe,
.formular__auswahl,
.formular__textfeld {
  display: block;
  width: 100%;
  min-height: var(--bedienelement-min-hoehe);
  padding: var(--abstand-2xs) var(--abstand-xs);
  border: var(--rahmen-duenn) solid var(--text-auf-invers-gedaempft);
  background-color: var(--grund-seite);
  color: var(--text-haupt);
}

.formular__textfeld {
  min-height: 8rem;
  line-height: var(--zeilenhoehe-fliesstext);
}

/* Das angeklickte Feld faerbt sich. Bewusst `:focus` und nicht
   `:focus-visible`: Der Tastaturring allein erscheint bei einem Mausklick
   nicht, und dann sah man ueberhaupt nicht, in welchem Feld man schreibt.
   Kein `outline: none` - der Ring aus basis.css kommt bei Tastaturbedienung
   zusaetzlich dazu. */
.formular__eingabe:focus,
.formular__auswahl:focus,
.formular__textfeld:focus {
  border-color: var(--akzent-primaer);
  box-shadow: inset 0 0 0 var(--rahmen-duenn) var(--akzent-primaer);
}

.formular__hilfe {
  margin: var(--abstand-3xs) 0 0;
  color: var(--text-auf-invers-gedaempft);
  font-size: var(--groesse-fein);
}

/* Der Fehlertext steht unter dem Feld und ist ueber aria-describedby mit
   ihm verbunden. Die Farbe ist die Verstaerkung, nicht das Merkmal. */
.formular__fehler {
  margin: var(--abstand-3xs) 0 0;
  padding-left: var(--abstand-2xs);
  border-left: var(--rahmen-stark) solid var(--akzent-sekundaer);
  color: var(--text-auf-invers);
  font-size: var(--groesse-fein);
}

.formular__fehleruebersicht {
  margin-bottom: var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  border-left: var(--rahmen-stark) solid var(--akzent-sekundaer);
  background-color: var(--grund-hervorhebung-tief);
}

.formular__fehleruebersicht ul {
  margin: var(--abstand-2xs) 0 0;
  padding-left: var(--abstand-m);
  font-size: var(--groesse-klein);
}

.formular__fehlertitel {
  margin: 0;
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}

.formular__datenschutz {
  max-width: 48ch;
  margin: var(--abstand-m) 0 0;
  color: var(--text-auf-invers-gedaempft);
  font-size: var(--groesse-fein);
  line-height: var(--zeilenhoehe-fliesstext);
}

.formular__aktionen {
  margin: var(--abstand-m) 0 0;
  max-width: none;
}

/* --- Honigtopf ---
   Aus dem Blickfeld geschoben statt display:none: ein Ausfuellprogramm
   erkennt display:none oft und laesst das Feld dann in Ruhe. Der Platz
   nimmt kein Layout ein, weil das Feld absolut positioniert ist.

   Fuer Screenreader ist es zusaetzlich per aria-hidden ausgeblendet und
   traegt tabindex="-1", steht also auch nicht in der Tabulatorreihenfolge.
   Ein Mensch bekommt es nie zu Gesicht.

   Fehlt einmal das Stylesheet, ist das Feld sichtbar - dann sagt seine
   Beschriftung, was zu tun ist. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Statusmeldungen (P7)
   ------------------------------------------------------------------------ */
.statusmeldungen {
  margin-bottom: var(--abstand-m);
}

.statusmeldung {
  margin: 0 0 var(--abstand-2xs);
  padding: var(--abstand-xs) var(--abstand-s);
  border-left: var(--rahmen-stark) solid var(--linie-dezent);
  font-size: var(--groesse-klein);
}

.statusmeldung--erfolg {
  border-left-color: var(--zustand-erfolg);
  background-color: var(--grund-abgesetzt);
  color: var(--text-haupt);
}

.statusmeldung--fehler {
  border-left-color: var(--zustand-fehler);
  background-color: var(--grund-abgesetzt);
  color: var(--text-haupt);
}

/* Im dunklen Kontaktbereich brauchen die Meldungen den hellen Grund nicht
   zu verlieren - er hebt sie dort gerade richtig hervor. */

/* ---------------------------------------------------------------------------
   Bestaetigungsseite unter /kontakt (P7)
   ------------------------------------------------------------------------ */
.bestaetigung {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand) var(--seitenrand);
}

.bestaetigung__titel {
  margin: var(--abstand-m) 0 0;
  font-size: var(--groesse-titel-2);
}

.bestaetigung__text {
  max-width: var(--breite-lesetext);
  margin: var(--abstand-m) 0 0;
  color: var(--text-gedaempft);
}

.bestaetigung__angaben {
  margin: var(--abstand-l) 0 0;
  line-height: var(--zeilenhoehe-weit);
}

.bestaetigung__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs);
  margin: var(--abstand-2xl) 0 0;
  max-width: none;
}

/* ---------------------------------------------------------------------------
   Rechtsseiten: Impressum und Datenschutzerklaerung (P8)

   Ein langer Fliesstext, der gut lesbar sein muss. Deshalb eine bewusst
   schmale Spalte, grosszuegige Zeilenabstaende und klar abgesetzte
   Zwischenueberschriften - kein Layout mit Bildern oder Spalten.
   ------------------------------------------------------------------------ */
.rechtsseite {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--sektionsabstand);
}

.rechtstext {
  /* Etwas breiter als die reine Lesebreite, damit die Aufzaehlungen mit
     ihrem Einzug nicht gedraengt wirken. */
  max-width: 46rem;
}

/* "Datenschutzerklaerung" ist ein einziges Wort mit 20 Zeichen. Auf einem
   schmalen Bildschirm passt es in keine Zeile und erzeugte im Browser
   tatsaechlich einen waagrechten Ueberlauf. Die Silbentrennung greift,
   weil das Dokument lang="de-CH" traegt; break-word ist die Absicherung
   fuer den Fall, dass der Browser keine Trennmuster hat. Gilt fuer alle
   Ueberschriften dieser Seiten - die Abschnittstitel enthalten ebenso
   lange Komposita. */
.rechtstext__titel,
.rechtstext__abschnittstitel {
  hyphens: auto;
  overflow-wrap: break-word;
}

.rechtstext__titel {
  margin: 0;
  font-size: var(--groesse-titel-2);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
}

.rechtstext__einleitung {
  margin: var(--abstand-m) 0 0;
  color: var(--text-gedaempft);
}

/* Hinweis, solange der Text nicht fachlich freigegeben ist. Er erscheint
   nur, wenn in rechtliches.yaml ein entwurfshinweis steht. */
.rechtstext__entwurf {
  margin: var(--abstand-m) 0 0;
  padding: var(--abstand-xs) var(--abstand-s);
  border-left: var(--rahmen-stark) solid var(--zustand-warnung);
  background-color: var(--grund-abgesetzt);
  font-size: var(--groesse-klein);
}

/* --- Inhaltsuebersicht --- */
.rechtstext__uebersicht {
  margin-top: var(--abstand-2xl);
  padding: var(--abstand-s) var(--abstand-m);
  border: var(--rahmen-duenn) solid var(--linie-dezent);
}

.rechtstext__uebersichtstitel {
  margin: 0 0 var(--abstand-2xs);
  font-size: var(--groesse-label);
  font-family: var(--schrift-grund);
  letter-spacing: var(--laufweite-label-weit);
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.rechtstext__uebersicht ol {
  margin: 0;
  padding-left: var(--abstand-m);
  font-size: var(--groesse-klein);
  line-height: var(--zeilenhoehe-weit);
}

/* --- Abschnitte --- */
.rechtstext__abschnitt {
  margin-top: var(--abstand-2xl);
  /* Damit ein Sprung aus der Inhaltsuebersicht nicht unter dem oberen
     Rand klebt. */
  scroll-margin-top: var(--abstand-l);
}

.rechtstext__abschnittstitel {
  margin: 0 0 var(--abstand-s);
  font-size: var(--groesse-titel-4);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
}

.rechtstext__abschnitt p {
  margin-bottom: var(--abstand-s);
  line-height: var(--zeilenhoehe-weit);
}

.rechtstext__punkte {
  margin: 0 0 var(--abstand-s);
  padding-left: var(--abstand-m);
  max-width: var(--breite-lesetext);
  line-height: var(--zeilenhoehe-weit);
}

.rechtstext__punkte li {
  margin-bottom: var(--abstand-3xs);
}

.rechtstext__adresse {
  font-style: normal;
  line-height: var(--zeilenhoehe-weit);
}

/* --- Fuss der Rechtsseite --- */
.rechtstext__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-s);
  margin-top: var(--abstand-3xl);
  padding-top: var(--abstand-m);
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
  color: var(--text-gedaempft);
  font-size: var(--groesse-klein);
}

.rechtstext__fuss p {
  margin: 0;
}