/* Seitenaufbau: Kopfzeile, Abschnitte, Raster, Fusszeile.

   Farbrhythmus der Seite (bewusst, nicht zufaellig):
   Creme (Start) -> Weiss -> Ruhig -> Creme -> Tief (der eine dunkle Block)
   -> Creme -> Markenband am Ende. */

/* --- Breiten ---------------------------------------------------------- */
.huelle {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--schmal { max-width: 900px; }

/* --- Kopfzeile --------------------------------------------------------
   Am Original gemessen (referenz/abschnitt-00.png, 1440px):
     Logo    x=96, rund 26px hoch
     Weg     x=320..1127, also LINKS gruppiert - nicht rechtsbuendig, und
             ohne Schaltflaeche daneben. Rechts bleibt Platz stehen.
     Schrift 16px, dunkel.
   Entwurf A hatte die Punkte rechts an den Huellenrand gezogen, auf 14px
   verkleinert und weiss eingefaerbt. Alle drei kommen nicht mit. */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  background: color-mix(in srgb, var(--farbe-grund) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--kurve);
}
.kopf[data-gescrollt="ja"] { border-bottom-color: var(--farbe-linie); }

/* Auf der Startseite liegt die Kopfzeile im Original UEBER dem Hero-Foto
   und hat keine eigene Flaeche. */
.kopf--auf-bild {
  position: absolute;
  inset-inline: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
}
/* Der Schalter fuer schmale Fenster liegt dort auf dem Foto. Ohne eigene
   Flaeche waere die Umrandung auf dem dunklen Bild nicht mehr zu sehen -
   und ein Bedienelement, das man nicht findet, ist keins. */
.kopf--auf-bild .kopf__schalter {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(47, 43, 41, 0.35);
  color: var(--farbe-text-hell);
}
/* Dieselbe Ueberlegung fuer die Menuepunkte, die bis 2026-08-04 uebersehen
   wurde: sie standen in der Textfarbe rgb(47,43,41) auf dem abgedunkelten
   Foto und kamen damit gemessen auf 1,80:1 - AA verlangt 4,5:1.

   Das Original macht es genauso; die Uebernahme ist also treu, aber der
   Wert faellt durch. Der Umstellungsplan (docs/umstellung-auf-a.md, "Was
   NICHT 1:1 zu uebernehmen ist") nennt gerechnet durchfallende Kontraste
   als die eine Abweichung, die nicht verhandelbar ist - dieselbe
   Begruendung, unter der schon die fuenf Faecher-Kacheln mit 1,33:1
   korrigiert wurden. Auf dem Foto traegt das Menue also helle Schrift.
   Gestalt, Groesse und Position bleiben unveraendert. */
.kopf--auf-bild .kopf__weg a {
  color: var(--farbe-text-hell);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--ab-3);
  min-height: var(--kopf-hoehe);
}

.kopf__logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-inline-end: var(--ab-6);
}
.kopf__logo img { height: 26px; width: auto; }

/* auto RECHTS, nicht links: die Punkte stehen beim Logo, die Luft danach. */
.kopf__weg {
  display: none;
  gap: var(--ab-3);
  margin-inline-end: auto;
}
.kopf__weg a {
  font-family: var(--schrift-titel);
  font-size: var(--gr-text);
  font-weight: var(--fett-halb);
  color: var(--farbe-text);
  text-decoration: none;
  white-space: nowrap;
}
.kopf__weg a:hover { color: var(--farbe-marke-tief); }

/* Schalter fuer schmale Fenster. Er ist das <summary> eines <details> -
   deshalb list-style weg, sonst zeigt der Browser ein Dreieck. */
.klapp { flex: none; margin-inline-start: auto; }
.kopf__schalter {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  list-style: none;
}
.kopf__schalter::-webkit-details-marker { display: none; }
.kopf__schalter::marker { content: ""; }

/* Ab hier ist Platz fuer die volle Navigation - der Schalter entfaellt.
   Diese Regel muss NACH der Grunddeklaration stehen, sonst gewinnt die
   Grunddeklaration und der Schalter bleibt neben den Links stehen.

   72rem statt der frueheren 62rem: die Beschriftungen des Originals sind
   laenger ("Zentrale Abschlusspruefung (ZAP)") und brauchen zusammen mit
   dem Logo rund 1150px, sonst draengen sie sich unter die Kopfzeile. */
@media (min-width: 72rem) {
  .kopf__weg { display: flex; }
  .klapp { display: none; }
}
.kopf__schalter svg { width: 22px; height: 22px; }
.kopf__schalter .schliessen { display: none; }
.klapp[open] .kopf__schalter .oeffnen { display: none; }
.klapp[open] .kopf__schalter .schliessen { display: block; }

/* Das aufgeklappte Menue haengt unter der Kopfzeile, ueber dem Inhalt.

   Die display-Regel unten uebersteuert, was der Browser bei geschlossenem
   <details> von sich aus tut (den Inhalt ausblenden). Deshalb muss der
   geschlossene Zustand hier ausdruecklich stehen - sonst steht das Menue
   dauerhaft offen. */
.klapp:not([open]) .klappweg { display: none; }

.klappweg {
  position: absolute;
  inset-inline: 0;
  /* Ohne diese Angabe landet das Menue auf seiner statischen Hoehe, also
     mitten in der Kopfzeile. Faellt nur auf, sobald die Kopfzeile ueber
     dem Hero liegt und keine eigene Flaeche mehr hat. */
  top: var(--kopf-hoehe);
  display: grid;
  gap: var(--ab-1);
  padding-block: var(--ab-2) var(--ab-3);
  border-top: 1px solid var(--farbe-linie);
  background: var(--farbe-grund);
  box-shadow: var(--schatten-hoch);
}
.klappweg a {
  padding: var(--ab-1) 0;
  font-family: var(--schrift-titel);
  font-weight: var(--fett-halb);
  color: var(--farbe-text);
  text-decoration: none;
}

/* --- Abschnitte ------------------------------------------------------- */
.block {
  padding-block: var(--ab-6);
}
.block--eng  { padding-block: var(--ab-5); }
.block--weiss { background: var(--farbe-karte); }
/* Als Abschnittsflaeche gibt es im Original nur Creme und Weiss. Der
   Modifikator bleibt bestehen, damit die uebrigen Seiten weiterlaufen -
   er faerbt aber nicht mehr grau, sondern cremefarben. */
.block--ruhig { background: var(--farbe-grund); }
.block--tief {
  background: var(--farbe-tief);
  color: var(--farbe-text-hell);
}
.block--tief h2,
.block--tief h3 { color: var(--farbe-text-hell); }
.block--tief .block__vor { color: var(--farbe-text-hell-leise); }

.block__kopf {
  display: grid;
  gap: var(--ab-2);
  max-width: 46rem;
  margin-block-end: var(--ab-5);
}
.block__kopf--mitte {
  margin-inline: auto;
  text-align: center;
}
.block__vor {
  font-size: var(--gr-lead);
  color: var(--farbe-text-leise);
}

/* --- Raster ----------------------------------------------------------- */
.raster {
  display: grid;
  gap: var(--ab-3);
}
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
/* DREI Spalten, fest - nicht "so viele wie passen".
   In der 1250px breiten Inhaltsspalte des Originals ergab die automatische
   Spaltenzahl VIER Spalten: aus den sechs Punkten von "Was wir lernen
   werden" wurde 4+2 statt 3+3, und die drei Preiskarten standen zu viert
   in der Zeile. Genau daran ist Entwurf A gescheitert. */
.raster--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Das Team hat 14 Karten. Mit automatischer Spaltenzahl steht auf dem Handy
   eine Karte pro Zeile - das ergibt eine Bahn, durch die niemand scrollt.
   Deshalb hier feste Stufen: immer mindestens zwei nebeneinander. */
.raster--personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .raster--personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .raster--personen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Startbereich ----------------------------------------------------- */
.start {
  padding-block: var(--ab-4) var(--ab-5);
}
.start__innen {
  display: grid;
  gap: var(--ab-4);
  align-items: center;
}
@media (min-width: 62rem) {
  .start__innen {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--ab-5);
  }
}

.start__text { display: grid; gap: var(--ab-3); justify-items: start; }
.start__titel .betont { color: var(--farbe-marke-tief); }
.start__unter {
  font-size: var(--gr-lead);
  color: var(--farbe-text-leise);
  max-width: 34rem;
}
.start__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2);
}

.start__bild {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
}
.start__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 32%;
}

/* --- WhatsApp-Knopf unten rechts --------------------------------------
   Steht im Original fest am unteren rechten Rand und scrollt nicht mit.
   Die Schrift darauf ist dunkelgruen statt weiss: Weiss auf dem
   WhatsApp-Gruen kommt auf 1,98:1. Das Gruen selbst ist eine fremde Marke
   und bleibt unveraendert. */
.wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: calc(var(--ebene-kopf) - 1);
  display: inline-flex;
  align-items: center;
  gap: var(--ab-1);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-whatsapp);
  color: var(--farbe-auf-whatsapp);
  font-family: var(--schrift-titel);
  font-size: var(--gr-klein);
  font-weight: var(--fett-krftg);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(47, 43, 41, 0.25);
}
.wa svg { width: 20px; height: 20px; flex: none; }
.wa:hover { color: var(--farbe-auf-whatsapp); filter: brightness(1.05); }

@media print { .wa { display: none; } }

/* --- Fusszeile -------------------------------------------------------- */
.fuss {
  padding-block: var(--ab-5);
  background: var(--farbe-tief);
  color: var(--farbe-text-hell-leise);
}
.fuss__oben {
  display: grid;
  gap: var(--ab-4);
  padding-block-end: var(--ab-4);
  border-bottom: 1px solid var(--farbe-linie-hell);
}
@media (min-width: 48rem) {
  .fuss__oben { grid-template-columns: 1.4fr 1fr 1fr; }
}
.fuss__logo img { height: 32px; width: auto; }
.fuss h3 {
  margin-block-end: var(--ab-2);
  color: var(--farbe-text-hell);
  font-size: var(--gr-klein);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
}
.fuss a {
  color: var(--farbe-text-hell-leise);
  text-decoration: none;
}
.fuss a:hover { color: var(--farbe-text-hell); }
.fuss__liste { display: grid; gap: var(--ab-1); }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2);
  justify-content: space-between;
  padding-block-start: var(--ab-3);
  font-size: var(--gr-klein);
}

/* --- Einblenden ------------------------------------------------------
   Bewusst OHNE opacity im Ruhezustand: faellt das Skript aus oder laeuft
   der Beobachter nicht an, steht der Text trotzdem da. Sichtbarkeit darf
   nie am JavaScript haengen. */
.zeigt {
  transform: translateY(14px);
  transition: transform var(--dauer-lang) var(--kurve);
}
html:not(.einblenden-an) .zeigt { transform: none; }
.zeigt[data-sichtbar="ja"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zeigt { transform: none; }
}