/* ============================================================
   Bee Your Best® · style.css
   Aufbau:
     1  Schriften
     2  Tokens
     3  Basis und Reset
     4  Hilfsklassen
     5  Typografie
     6  Layout und Rhythmus
     7  Navigation
     8  Buttons
     9  Bilder
    10  Startseite
    11  Unterseiten
    12  Formular
    13  Rechtstexte
    14  Footer
    15  Bewegung
    16  Media Queries
    17  Druck
   ============================================================ */


/* ============================================================
   1  SCHRIFTEN
   Lokal aus fonts/. Keine Verbindung zu Google.
   Siehe fonts/README.md bei Austausch.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter ist ein Variable Font: 400 und 500 stecken in derselben Datei. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================
   2  TOKENS
   Die fünf Markenfarben stehen fest und werden nicht verändert.
   Ergänzt wurde ausschließlich --rose-text, siehe Kommentar dort.
   Alle Kontrastwerte sind gegen Creme #F5F1EC gemessen.
   ============================================================ */

:root {
  /* Markenfarben */
  --creme:      #F5F1EC;   /* Hintergrund */
  --mint:       #8ECFB8;   /* Sekundärakzent */
  --rose:       #D94F6E;   /* Primärakzent, nur Flächen und Linien */
  --dunkel:     #2E2E2B;   /* Buttons, dunkle Sektionen */

  /* Der Rose-Ton für Schrift, in jeder Größe. Rose #D94F6E erreicht auf
     Creme nur 3.53:1 und ist damit für Text unzulässig; #B23A57 erreicht
     5.14:1 auf Creme und 4.74:1 auf Creme-2. */
  --rose-text:  #B23A57;

  /* Abgeleitete Flächen und Texttöne, alle gemessen */
  --creme-2:    #EDE8E1;   /* abgesetzte Fläche */
  --text:       #4A4A4A;   /* Fließtext, 7.88:1 */
  --text-leise: #5E5E5A;   /* Sekundärtext, 5.79:1 */
  --auf-dunkel-leise: #A8A49D;  /* gedämpft auf Dunkel, 5.49:1 */

  /* Linien. Bewusst fein, sie ersetzen Kästen und Schatten. */
  --linie:      #DCD6CD;
  --linie-kraeftig: #C4BDB2;

  /* Schrift */
  --schrift-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Maße */
  --breite:     1240px;
  --breite-eng: 720px;
  --nav-h:      70px;
  /* Höhe der Qualifikationsleiste. Der Hero zieht sie von der Fensterhöhe
     ab, damit beide zusammen genau das erste Bildfenster füllen. */
  --leiste-h:   3.75rem;
  --rand:       clamp(1.25rem, 5vw, 3.5rem);

  /* Kanten. Maximal 2px, keine Kapselformen. */
  --kante:      2px;
}


/* ============================================================
   3  BASIS UND RESET
   ============================================================ */

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

* { margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  /* Damit Sprungmarken nicht unter der festen Navigation landen */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kein overflow-x: hidden. Überstehende Elemente werden einzeln begrenzt,
     damit position: sticky funktionsfähig bleibt. */
  overflow-wrap: break-word;
}

a { color: inherit; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; }

::selection { background: var(--mint); color: var(--dunkel); }


/* ============================================================
   4  HILFSKLASSEN
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link: erstes fokussierbares Element, sichtbar nur bei Fokus */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 999;
  padding: 1rem 1.5rem;
  background: var(--dunkel);
  color: var(--creme);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Sichtbarer Fokus überall. Niemals outline: none. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rose-text);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Auf dunklen Flächen braucht der Fokusring einen hellen Ton */
.leiste :focus-visible,
.zitatband :focus-visible,
.seitenfuss :focus-visible {
  outline-color: var(--mint);
}


/* ============================================================
   5  TYPOGRAFIE
   Bricolage 700 für Überschriften, eng gesetzt.
   Inter 400/500 für alles andere.
   Zwischen Überschrift und Fließtext liegt bewusst ein harter Sprung.
   ============================================================ */

h1, h2, h3, h4,
.display {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-optical-sizing: auto;
  color: var(--dunkel);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.display {
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: 0.94;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 0.96;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.0;
}

h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Rosé-Hervorhebung in Überschriften. Ein Ton für alle Akzente, unabhängig
   von der Schriftgröße: Große Überschriften dürften kontrastseitig auch das
   hellere --rose tragen, nebeneinander wirkten die beiden Töne aber wie
   zwei Farben.

   Der Akzent gilt für Überschriften auf Creme. Über Fotos wird er
   nicht eingesetzt: Gemessen an der hellsten Bildstelle unter der Zeile
   erreicht er dort nur 1,3 bis 1,6:1. Auf 3:1 käme er erst bei rund 96 %
   Abdunklung, dann wäre vom Foto nichts mehr zu sehen. Über Bildern bleibt
   die Überschrift deshalb creme (4,4 bis 5,6:1); der Akzent dort ist Mint,
   wie beim Label im Seitenkopf. */
.akzent { color: var(--rose-text); }

p { max-width: 68ch; }

/* Alle Abstände stehen auf null (siehe Reset). Nach einer Überschrift folgt
   deshalb ausdrücklich Luft, sonst klebt der erste Absatz an der Unterlänge.
   Bewusst weniger als zwischen zwei Absätzen wäre: Überschrift und der Satz
   darunter gehören zusammen. Blöcke mit eigenem Rhythmus (etwa
   .ueberlappung__flaeche) gewinnen über die Klassenspezifität. */
h2 + p, h2 + .fliesstext { margin-top: clamp(0.9rem, 1.4vw, 1.35rem); }
/* Ein Bild unter der Überschrift steht für sich und braucht mehr Luft als
   ein Absatz, der noch zur Überschrift gehört. */
h2 + .bild { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
h3 + p, h3 + .fliesstext { margin-top: 0.7rem; }
.label + h2, .label + h3 { margin-top: 0; }

.fliesstext {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
}
.fliesstext + .fliesstext { margin-top: 1.1rem; }

.gross {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text);
}

.leise {
  font-size: 0.9375rem;
  color: var(--text-leise);
}

/* Label über Überschriften */
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-text);
  margin-bottom: 1rem;
}
.label--mint { color: var(--text-leise); }
/* Auf dunklen Flächen: Mint erreicht dort 7.63:1 */
.label--auf-dunkel { color: var(--mint); }

/* Textlink im Fließtext */
.textlink {
  color: var(--rose-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.textlink:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 500; color: var(--dunkel); }

blockquote { max-width: 24ch; }

/* Aufzählung mit feinem Strich statt Punkt */
.liste { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.75rem 0; }
.liste li {
  position: relative;
  padding-left: 2.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 1.25rem; height: 1px;
  background: var(--rose);
}

/* Variante: Nachweisliste.
   Acht gleichrangige Einträge hintereinander lesen sich als Aufzählung
   beliebig. Als durchnummerierte Reihe mit Haarlinien bekommen sie Ordnung
   und wirken wie ein Verzeichnis, ohne dass ein Kasten nötig wäre. Die
   Nummer folgt dem Muster der Welten-Karten auf der Startseite. Der kurze
   Rosé-Strich der Grundliste entfällt, er stünde neben der Nummer doppelt. */
.liste--nachweise {
  counter-reset: nachweis;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin: 0;
  border-bottom: 1px solid var(--linie);
}
.liste--nachweise li {
  counter-increment: nachweis;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--linie);
}
.liste--nachweise li::before {
  content: counter(nachweis, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--rose-text);
}


/* ============================================================
   6  LAYOUT UND RHYTHMUS
   Die Sektionsklassen sind bewusst verschieden gebaut. Auf keiner
   Seite folgen zwei Sektionen desselben Musters aufeinander.
   ============================================================ */

.inhalt { display: block; }

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.bahn--eng { max-width: var(--breite-eng); }

/* Muster E: zwei genau gleich breite Hälften über die volle Fensterbreite,
   ohne Bahn. Bricht bewusst mit dem 1240er Raster der übrigen Abschnitte und
   bleibt deshalb einzelnen Blöcken vorbehalten. Kein gap: Die Teilung liegt
   exakt in der Fenstermitte, den Abstand tragen die Innenabstände. */
.voll-teilung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.voll-teilung > * { min-width: 0; padding-inline: var(--rand); }

/* Linke Hälfte: Kopf oben, darunter das Bild über die restliche Höhe, damit
   beide Hälften unten auf derselben Linie enden. Das Bild gibt dafür sein
   Seitenverhältnis auf und wird von object-fit beschnitten — bei diesem
   Motiv rund vier Prozent je Seite, der Schriftzug bleibt vollständig. */
.voll-teilung__kopf { display: flex; flex-direction: column; }
.voll-teilung__kopf > .bild {
  flex: 1;
  aspect-ratio: auto;
  /* min-height: 0 statt eines Mindestmaßes: Ein Flex-Item schrumpft sonst
     nicht unter seine Inhaltshöhe und schießt unten über die Spalte hinaus,
     genau um den Betrag, den die Überschrift darüber einnimmt. */
  min-height: 0;
}

/* Vertikaler Rhythmus, absichtlich ungleich verteilt */
.abschnitt        { padding-block: clamp(4.5rem, 9vw, 8rem); }
.abschnitt--weit  { padding-block: clamp(6rem, 13vw, 11rem); }
.abschnitt--knapp { padding-block: clamp(3rem, 5vw, 4.5rem); }

.flaeche-creme2 { background: var(--creme-2); }
.flaeche-dunkel { background: var(--dunkel); color: var(--creme); }
.flaeche-dunkel h1,
.flaeche-dunkel h2,
.flaeche-dunkel h3 { color: var(--creme); }
.flaeche-dunkel .fliesstext { color: var(--auf-dunkel-leise); }

/* Trennlinie statt Kasten */
.linie-oben { border-top: 1px solid var(--linie); }

/* Muster A: zweispaltig, Text links, Medium rechts */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
/* Muster B: gespiegelt. Die Reihenfolge im Quelltext bleibt logisch,
   nur die Darstellung dreht sich. */
.split--gedreht > :first-child { order: 2; }

/* Variante: oben ausgerichtet. Zentriert gesetzt schwebt eine kurze
   Textspalte neben einer langen Liste in der Mitte, oben und unten bleibt
   Leere und nichts fluchtet. Oben ausgerichtet beginnen beide Spalten auf
   derselben Linie. */
.split--oben { align-items: start; }

/* Muster D: Kopf über die halbe Breite, darunter ein zweispaltiges
   Verzeichnis über die volle Bahn.
   Nebeneinander gesetzt lief die kurze Textspalte gegen eine achtzeilige
   Liste, links blieb ein gutes Drittel der Fläche leer. Untereinander
   trägt der Kopf die Breite des Textes und die Nachweise füllen die Zeile. */
.nachweise__kopf {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Muster C: versetzt, schmale Spalte oben ausgerichtet */
.versetzt {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.versetzt > :last-child { padding-top: clamp(0rem, 6vw, 5rem); }

/* Muster C, Variante: Das Bild reicht über die volle Höhe des Textes.
   Dafür gibt nicht mehr das Seitenverhältnis die Höhe vor, sondern die
   Zeile. Der Ausschnitt wird dadurch schmaler und hoher, das Motiv muss
   also mittig sitzen. */
.versetzt--gleich-hoch { align-items: stretch; }
.versetzt--gleich-hoch > .bild {
  aspect-ratio: auto;
  min-height: 24rem;
}
.versetzt--gleich-hoch > .bild picture {
  display: block;
  height: 100%;
}

/* Muster C, Variante: Das Bild verlässt die Bahn nach links und läuft bis an
   den Fensterrand. Abgezogen werden der Innenabstand der Bahn und, sobald das
   Fenster breiter als die Bahn ist, die Hälfte des Überschusses.
   Der Text behält seine Spalte. */
.versetzt--randabfallend > .bild {
  margin-inline-start: calc(-1 * (var(--rand) + (100vw - min(100vw, var(--breite))) / 2));
}
/* clip statt hidden: begrenzt den Überstand, ohne position: sticky im
   Abschnitt unbrauchbar zu machen. */
.abschnitt--randabfallend { overflow-x: clip; }

/* Muster F: links der Text und darunter ein Paar kleiner Bilder, rechts
   das Hauptbild. Das Hauptbild verlässt die Bahn nach rechts bis an den
   Fensterrand (Gegenstück zu .versetzt--randabfallend), der Abschnitt
   braucht dafür .abschnitt--randabfallend.

   Drei gemeinsame Zeilen: Text, Bilder, Bildzeilen. Über subgrid hängen
   sich die drei Abbildungen an dieselben Zeilen. So enden alle Bilder auf
   einer Linie und alle Bildzeilen beginnen auf einer, auch wenn eine
   Bildzeile umbricht und die andere nicht. */
.alltag {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1rem, 2.5vw, 2rem);
}

/* Die Hülle der linken Seite spielt im Raster keine Rolle. */
.alltag__links { display: contents; }

.alltag__text {
  grid-column: 1 / 7;
  grid-row: 1;
  padding-top: clamp(0rem, 2vw, 1.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.alltag__text .fliesstext { max-width: 34rem; }

.alltag__paar {
  grid-column: 1 / 7;
  grid-row: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: subgrid;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
.alltag__paar > figure {
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: subgrid;
}
/* Ist das Hauptbild höher als Text und Bildpaar zusammen, wächst die
   Bildzeile. Das Paar bleibt dann unten, an der Linie des Hauptbilds. */
.alltag__paar .bild { align-self: end; }

/* Das Hauptbild läuft über Text- und Bildzeile und endet mit dem Paar
   auf einer Linie (wie bei .versetzt--gleich-hoch). */
.alltag__haupt {
  grid-column: 7 / 13;
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: subgrid;
  margin-inline-start: clamp(1rem, 4vw, 4rem);
  margin-inline-end: calc(-1 * (var(--rand) + (100vw - min(100vw, var(--breite))) / 2));
}
/* Ohne auto rechnete der Browser aus der gestreckten Höhe über 4:3 die
   Breite hoch, und das Bild lief weit über den Fensterrand hinaus.
   Doppelte Klasse, weil .bild--quer weiter unten steht und sonst gewinnt. */
.alltag__haupt .bild {
  grid-row: 1 / 3;
  aspect-ratio: auto;
  min-height: 24rem;
}
.alltag__haupt picture { display: block; height: 100%; }
/* Wird das Bild höher als 4:3, schneidet object-fit seitlich. Die beiden
   Personen stehen rechts der Mitte, der Ausschnitt folgt ihnen. Doppelte
   Klasse, weil .bild img weiter unten steht und sonst gewinnt. */
.alltag__haupt .bild img { object-position: 68% center; }
/* Die Zeile reicht nicht bis an den Fensterrand, sondern endet an der
   Bahn, damit sie auf breiten Fenstern nicht verloren rechts außen steht. */
.alltag__haupt .alltag__zeile {
  grid-row: 3;
  margin-inline-end: calc(var(--rand) + (100vw - min(100vw, var(--breite))) / 2);
}

/* Bildzeile: Nummer in Rosé mit feiner Linie, Text leise daneben. */
.alltag__zeile {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.alltag__nr {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--rose-text);
}
.alltag__nr::after {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: var(--rose);
}

/* Muster D: Teaser aus Bild und Text, gleichrangig nebeneinander.
   Der Text steht in der Mitte der Bildhöhe, damit beide Spalten
   zusammengehören und der Block nicht oben hängt. */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* Beide Spalten laufen auf gleicher Höhe, das Bild folgt dem Text.
     Sonst steht neben dem längeren Textblock ein zu kurzes Bild. */
  align-items: stretch;
}
.teaser > .bild {
  aspect-ratio: auto;
  min-height: 20rem;
}
.teaser > .bild picture {
  display: block;
  height: 100%;
}

.teaser__text > .label { display: block; margin-bottom: 0.75rem; }
.teaser__text h2 { margin-bottom: 0.75rem; }

/* Muster E: randlos geteilt über die volle Fensterbreite. Links das Foto
   bis an den Fensterrand, rechts der Text auf abgesetzter Fläche bis an den
   anderen Rand. Das Foto zeigt zwei Personen über die ganze Breite, deshalb
   liegt nichts darüber. Es ist mindestens 4:3 hoch; wird der Text höher,
   wächst das Bild mit und object-fit schneidet nur seitlich wenig ab. */
.ueberlappung {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: stretch;
  background: var(--creme);
}
/* Das Band stößt ohne Innenabstand an die beigen Abschnitte darüber und
   darunter. Mit Abstand blieben dazwischen schmale helle Streifen stehen.
   Die Textseite ist dafür hell und hebt sich so von beiden ab. */
.band-teilung { padding-block: 0; }

/* Mindestens 4:3 hoch. Die Bildhälfte ist 55 % der Fensterbreite breit,
   4:3 ergibt also 55vw * 3/4 = 41.25vw. Kein aspect-ratio: Wird der Text
   höher, rechnete der Browser daraus eine größere Breite und das Foto
   schöbe sich in die Textfläche. */
.ueberlappung__bild { min-height: min(41.25vw, 46rem); }
/* Auf sehr breiten Fenstern deckelt 46rem die Höhe, das Foto wird dann
   oben und unten etwas beschnitten. Die Köpfe sitzen leicht über der
   Mitte, der Ausschnitt bleibt bei ihnen. */
.ueberlappung__bild .bild img { object-position: center 45%; }
.ueberlappung__bild { position: relative; }
/* Das Foto füllt die Hälfte aus, ohne selbst Höhe vorzugeben: Sonst
   setzte das Bild seine eigene 4:3-Höhe durch und die Deckelung griffe
   nicht. */
.ueberlappung__bild .bild { position: absolute; inset: 0; aspect-ratio: auto; }
.ueberlappung__bild picture { display: block; height: 100%; }

.ueberlappung__flaeche {
  align-self: center;
  padding: clamp(2rem, 3.5vw, 3.5rem) var(--rand) clamp(2rem, 3.5vw, 3.5rem) clamp(2rem, 5vw, 5.5rem);
  max-width: 40rem;
}
/* Rosé Haarlinie über dem Label als ruhiger Einstieg in die Fläche */
.ueberlappung__flaeche::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 1.5rem;
  background: var(--rose);
}
.ueberlappung__flaeche > * + * { margin-top: 1.25rem; }
/* Etwas kleiner als die übrigen h2: In der schmaleren Hälfte bräche
   „Standard-Coaching" sonst am Bindestrich um. */
.ueberlappung__flaeche h2 { font-size: clamp(1.875rem, 3vw, 2.75rem); }

/* Unter 1300px wird der Text höher als das Foto in 4:3, das Foto würde
   seitlich beschnitten und eine der beiden Personen angeschnitten. Dann
   untereinander: das Foto randlos in voller Breite, flacher geschnitten,
   darunter der Text. */
@media (max-width: 1300px) {
  .ueberlappung { grid-template-columns: minmax(0, 1fr); }
  .ueberlappung__bild { min-height: 0; }
  .ueberlappung__bild .bild { position: relative; aspect-ratio: 16 / 9; }
  .ueberlappung__bild .bild img { object-position: center 62%; }
  .ueberlappung__flaeche { max-width: 46rem; padding: clamp(2.5rem, 6vw, 3.5rem) var(--rand); }
}
@media (max-width: 600px) {
  .ueberlappung__bild .bild { aspect-ratio: 4 / 3; }
}

/* Muster D: ruhiger, eingerückter Textblock mit feiner Linie */
.notiz {
  max-width: 58ch;
  margin-inline-start: clamp(0rem, 12vw, 14rem);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--rose);
}
.notiz--mint { border-left-color: var(--mint); }
.notiz--breit { max-width: 66ch; margin-inline-start: 0; }

/* Grafisches Element: die Mittelform der Bildmarke, sehr groß und blass.
   Das Element ragt bewusst über den Rand hinaus und wird deshalb hier
   beschnitten. Ohne das entstünde auf jeder Breite ein waagerechter
   Bildlauf von rund acht Prozent.
   hidden steht als Rückfall für ältere Browser zuerst, clip überschreibt
   es dort, wo es bekannt ist, und lässt position: sticky unangetastet. */
.blattgrund {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.blattgrund::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%; right: -8%;
  width: min(46rem, 70vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url('../logo/favicon-center.svg') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
.blattgrund--links::before { right: auto; left: -14%; }


/* ============================================================
   7  NAVIGATION
   ============================================================ */

.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--rand);
  background: rgba(245, 241, 236, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* Feste aspect-ratio: ein späterer Logotausch verschiebt nichts. */
.marke__zeichen {
  width: 42px;
  aspect-ratio: 1;
  object-fit: contain;
  flex-shrink: 0;
}

.marke__text { display: flex; flex-direction: column; line-height: 1.1; }

.marke__name {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--dunkel);
}

.marke__zusatz {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-top: 1px;
}

.hauptnav { display: flex; align-items: center; gap: 0.1rem; }

.hauptnav a {
  position: relative;
  display: block;
  padding: 0.5rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-leise);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
/* Hover in der Akzentfarbe. Die rosa Linie, die sonst die aktuelle Seite
   markiert, fährt dabei von der Mitte aus ein. */
.hauptnav a:hover { color: var(--rose-text); }

.hauptnav a::after {
  content: '';
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.15rem;
  height: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.hauptnav a:hover::after,
.hauptnav a[aria-current='page']::after { transform: scaleX(1); }

.hauptnav a[aria-current='page'] { color: var(--dunkel); font-weight: 500; }
.hauptnav a[aria-current='page']:hover { color: var(--rose-text); }

.nav-cta {
  margin-left: 0.5rem;
  padding: 0.7rem 1.2rem !important;
  background: var(--dunkel);
  color: var(--creme) !important;
  border-radius: var(--kante);
  font-weight: 500 !important;
  transition: background 0.18s ease;
}
.nav-cta:hover { background: var(--rose-text); }
.nav-cta::after { display: none; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
}
.burger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--dunkel);
  transition: transform 0.24s ease, opacity 0.18s ease;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Menü */
.mobilnav {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 299;
  padding: 1.5rem var(--rand) 2.5rem;
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
.mobilnav[hidden] { display: none; }

.mobilnav a {
  display: block;
  padding: 1rem 0;
  font-size: 1.0625rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.mobilnav a:hover { color: var(--rose-text); }
.mobilnav a[aria-current='page'] { color: var(--rose-text); font-weight: 500; }

.mobilnav .mobil-cta {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--dunkel);
  color: var(--creme);
  text-align: center;
  border-bottom: 0;
  border-radius: var(--kante);
  font-weight: 500;
}


/* ============================================================
   8  BUTTONS
   Eckig. Maximal 2px Radius, keine Kapselform.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--kante);
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--dunkel {
  background: var(--dunkel);
  color: var(--creme);
}
.btn--dunkel:hover { background: var(--rose-text); }

.btn--rand {
  background: transparent;
  color: var(--dunkel);
  border-color: var(--linie-kraeftig);
}
.btn--rand:hover { border-color: var(--dunkel); background: var(--dunkel); color: var(--creme); }

.btn--hell {
  background: var(--creme);
  color: var(--dunkel);
}
.btn--hell:hover { background: var(--mint); }

/* Textlink mit Unterstrich, für nachgeordnete Wege */
.btn--schlicht {
  padding: 1rem 0;
  background: none;
  color: var(--dunkel);
  border-bottom: 1px solid var(--linie-kraeftig);
  border-radius: 0;
}
.btn--schlicht:hover { border-bottom-color: var(--rose); color: var(--rose-text); }

.btn--voll { width: 100%; }

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}
.btn-reihe--mitte { justify-content: center; }
/* Abstand, wenn eine Buttonreihe auf Fließtext folgt */
.fliesstext + .btn-reihe,
.liste + .btn-reihe { margin-top: 2rem; }


/* ============================================================
   9  BILDER
   Jeder Bildplatz hat ein festes Seitenverhältnis. Beim Austausch
   der Fotos verschiebt sich dadurch nichts.
   Maße und Motivhinweise stehen in BILDPLAETZE.md.
   ============================================================ */

.bild {
  position: relative;
  overflow: hidden;
  background: var(--creme-2);
}
.bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Anders als die Bildplätze darüber steht hier kein gewähltes Verhältnis,
   sondern das des Rohbilds (5845 x 3897, 3:2): Es wird nichts
   beschnitten, weil der Schriftzug im Motiv ganz sichtbar bleiben soll.
   Beim Austausch des Fotos muss der Wert mitgeführt werden — sonst
   schneidet object-fit doch wieder ab. */
.bild--unbeschnitten { aspect-ratio: 3 / 2; }

.bild--hoch  { aspect-ratio: 3 / 4; }
.bild--quer  { aspect-ratio: 4 / 3; }
.bild--flach { aspect-ratio: 3 / 2; }
.bild--band  { aspect-ratio: 21 / 9; }

/* Bildausschnitt. Wird gesetzt, wenn das Motiv nicht mittig sitzt,
   etwa bei Portraits mit viel Kopffreiheit. */
.bild--oben   img { object-position: center top; }
.bild--unten  img { object-position: center bottom; }
.bild--links  img { object-position: left center; }
.bild--rechts img { object-position: right center; }

/* Auf schmalen Geräten ist 21:9 zu flach zum Lesen */
@media (max-width: 700px) {
  .bild--band { aspect-ratio: 3 / 2; }

  /* Liegt Text über einem Bild, darf nicht das Seitenverhältnis die Höhe
     bestimmen, sondern der Text. Sonst ragt eine lange Überschrift unten
     aus dem Bild heraus und steht ohne Abdunklung auf dem Seitenhintergrund.
     Deshalb bestimmt hier der Textblock die Höhe und das Bild legt sich
     dahinter. */
  .bild--text-mitte,
  .bild--text-links {
    aspect-ratio: auto;
    min-height: 20rem;
  }
  .bild--text-mitte > picture,
  .bild--text-links > picture {
    position: absolute;
    inset: 0;
  }
  .bild--text-mitte > picture img,
  .bild--text-links > picture img {
    height: 100%;
  }
  /* relative, nicht static: Der Block soll im Fluss stehen und die Höhe
     bestimmen, muss aber positioniert bleiben, damit sein z-index gilt.
     Bei static ignoriert der Browser z-index, und das absolut liegende
     Bild deckt den Text vollständig zu. */
  .bild--text-mitte .bild__inhalt,
  .bild--text-links .bild__inhalt {
    position: relative;
    inset: auto;
    padding-block: 3rem;
  }
}

/* Abdunklung hinter Text auf Bildern. Sie liegt immer an, damit die
   Lesbarkeit unabhängig vom später eingesetzten Motiv gesichert ist. */
.bild--text-mitte::after,
.bild--text-links::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bild--text-mitte::after {
  background: rgba(46, 46, 43, 0.62);
}
.bild--text-links::after {
  background: linear-gradient(
    to right,
    rgba(46, 46, 43, 0.82) 0%,
    rgba(46, 46, 43, 0.70) 45%,
    rgba(46, 46, 43, 0.35) 100%
  );
}

.bild__inhalt {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  color: var(--creme);
}
.bild__inhalt--mitte { align-items: center; text-align: center; }

/* Bildunterschrift */
.bildnachweis {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}


/* ============================================================
   10  STARTSEITE
   ============================================================ */

/* --- Hero ---
   Aufbau: Die Textspalte läuft in der normalen Bahnflucht und nimmt dort
   knapp die Hälfte der Breite ein. Das Bild ist davon gelöst und liegt
   absolut in der rechten Fensterhälfte, über die volle Höhe der Sektion.

   Die Höhe ist so bemessen, dass Hero und Qualifikationsleiste zusammen
   genau das erste Bildfenster füllen. Die Leiste schließt damit bündig
   an der Unterkante ab, ohne dass darunter ein Rest sichtbar wird.
   dvh statt vh, weil mobile Browser ihre Adressleiste ein- und ausblenden. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--linie);
}

/* Bewusst keine .bahn: Der Text setzt am Fensterrand an, nicht in der
   zentrierten Bahn. Sonst rückt er auf breiten Schirmen weit nach innen,
   während das Bild rechts an der Kante klebt. */
.hero__inhalt { padding-inline: var(--rand); }

.hero__text {
  display: flex;
  flex-direction: column;
  /* Titel, Motto, Zitat und Knöpfe bilden eine zusammenhängende Gruppe und
     stehen als Ganzes in der Mitte der Sektion. Auseinandergezogen über die
     volle Höhe fiel der Zusammenhang zwischen Aussage und Handlung
     auseinander, und in der Mitte blieb ein leeres Feld. */
  justify-content: center;
  gap: clamp(1.75rem, 4.5vh, 3rem);
  /* Bezugsgröße ist die Fensterbreite ohne Rand. Der Rest bis zur
     Bildkante bei 50% bleibt Luft. */
  width: 46%;
  min-height: min(40rem, 82vh);
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* Die Maske für den Titelauftritt: Der Titel startet unterhalb seiner
   eigenen Grundlinie und fährt herauf. Ohne dieses Fenster wäre er
   vorher als verschobener Block sichtbar. */
.hero__maske { overflow: hidden; }

.hero__ort {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.hero__ort::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: var(--rose);
}

/* Ruhiger als .display: normale Zeilenhöhe, weniger Unterschneidung.
   Der Titel soll die Fläche halten, nicht sie sprengen. */
.hero__titel {
  font-size: clamp(2.25rem, 3.6vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__motto {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--rose-text);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Kleingedrucktes unter den Knöpfen: nimmt die Hemmschwelle vor dem
   ersten Schritt. */
.hero__hinweis {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-leise);
}
.hero__zitat {
  max-width: 44ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-left: 1.5rem;
  border-left: 1px solid var(--linie-kraeftig);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-leise);
}

/* Das Bild hängt an der rechten Fensterkante und füllt die Sektion von
   Unterkante der Kopfzeile bis Unterkante. Es steht ausdrücklich nicht im
   Textfluss, sonst müsste sein Seitenverhältnis die Höhe des Heros bestimmen.

   Es beginnt bewusst erst unter der Kopfzeile: die ist fest positioniert und
   würde dem Portrait sonst den Kopf abschneiden. Der Streifen darüber trägt
   den Cremeton des Heros, geht also nahtlos in die Kopfzeile über. */
.hero__bild {
  position: absolute;
  inset: var(--nav-h) 0 0 auto;
  width: 50%;
  overflow: hidden;
}
.hero__bild picture,
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Am oberen Bildrand ausrichten, damit der Kopf vollständig im Bild bleibt.
     Beschnitten wird unten, wo nur Hüfte und Hose stehen. */
  object-position: center top;
}

/* Weicher Anschluss an die Textfläche: Über der linken Bildkante liegt ein
   Verlauf in der Hintergrundfarbe. Dadurch geht das Foto in die Fläche
   über, statt mit einer sichtbaren Kante daneben zu stehen. */
.hero__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--creme) 0,
    rgba(245, 241, 236, 0.92) 6%,
    rgba(245, 241, 236, 0.55) 18%,
    rgba(245, 241, 236, 0) 40%);
}

/* Der Vorhang deckt das Bild anfangs zu und zieht nach rechts weg.
   Er trägt die Hintergrundfarbe, damit der Übergang wie ein Aufdecken
   der Fläche wirkt und nicht wie ein Balken. */
.hero__vorhang {
  position: absolute;
  inset: 0;
  background: var(--creme);
  transform-origin: right center;
  animation: vorhang 1s cubic-bezier(0.62, 0.05, 0.25, 1) 0.15s both;
}
@keyframes vorhang {
  from { transform: translateX(0); }
  to   { transform: translateX(101%); }
}

/* --- Qualifikationsleiste: vollbreit, dunkel, schmal ---
   Grundfall: mittig gesetzt, bricht um, wächst mit ihrem Inhalt. Ab einer
   Fensterbreite, in der alle fünf Einträge nebeneinander Platz haben,
   greift weiter unten die einzeilige Fassung mit fester Höhe. */
.leiste {
  background: var(--dunkel);
  color: var(--auf-dunkel-leise);
  padding-block: 1.5rem;
}
.leiste ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.5rem;
}

/* Mint statt gedämpftem Grau: Die Leiste zählt Qualifikationen auf, das
   darf man sehen. Davor ein feines Häkchen, aus zwei Rahmenkanten
   gezeichnet, damit kein zusätzliches Bild geladen werden muss. */
.leiste li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--mint);
}

.leiste li::before {
  content: '';
  flex: none;
  width: 0.32em;
  height: 0.62em;
  margin-top: -0.2em;          /* Der gedrehte Haken sitzt sonst zu tief */
  border: solid var(--mint);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Ab dieser Breite tragen die fünf Einträge eine Zeile: Die Leiste läuft
   dann über die volle Fensterbreite statt in der 1240px-Bahn, und sie
   bekommt eine feste Höhe. Erst dadurch kann der Hero darüber sich auf
   sie beziehen, sodass beide zusammen genau das erste Bildfenster füllen
   und unter der Leiste nichts frei bleibt.

   dvh statt vh, weil mobile Browser ihre Adressleiste ein- und ausblenden.
   Die Schriftgröße hängt an der Fensterbreite, damit die Zeile beim
   Verkleinern nicht an den Rand stößt. */
@media (min-width: 1440px) {
  .hero,
  .hero__text { min-height: calc(100dvh - var(--leiste-h)); }

  .leiste {
    display: flex;
    align-items: center;
    height: var(--leiste-h);
    padding-block: 0;
  }
  .leiste .bahn {
    max-width: none;
    padding-inline: clamp(1.5rem, 2.2vw, 3.5rem);
  }
  .leiste ul {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(1rem, 1.2vw, 2.5rem);
  }
  .leiste li {
    font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
    white-space: nowrap;
  }
}

/* --- Die drei Welten: drei gleichrangige Bildkarten ---
   Die Angebote stehen gleichwertig nebeneinander. Ein versetztes Raster
   hat hier nur Löcher erzeugt, weil die Texte unterschiedlich lang sind. */
.welten__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--linie);
}
.welten__kopf .fliesstext { margin-bottom: 0; }

.welten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.welt {
  display: flex;
  flex-direction: column;
  background: var(--creme);
  border-top: 2px solid var(--rose);
  text-decoration: none;
  transition: background 0.2s ease;
}
.welt:hover { background: var(--creme-2); }
.welt--b { border-top-color: var(--mint); }

/* Das Motiv zieht beim Überfahren leicht an. Der Ausschnitt bleibt
   stehen, weil .bild den Überstand abschneidet. */
.welt__bild img { transition: transform 0.7s cubic-bezier(0.22, 0.68, 0, 1); }
.welt:hover .welt__bild img { transform: scale(1.05); }

/* Der Textteil trägt den Innenabstand, nicht die Karte. Sonst stünde
   das Bild eingerückt statt bündig in der Kartenkante. */
.welt__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.welt__nummer {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-text);
  margin-bottom: 0.75rem;
}
.welt--b .welt__nummer { color: var(--text-leise); }

.welt__titel { margin-bottom: 0.5rem; }

.welt__paket {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 1.25rem;
}

.welt__text { flex: 1; font-size: 1rem; line-height: 1.65; }

.welt__mehr {
  display: inline-block;
  margin-top: 1.75rem;
  padding-bottom: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rose-text);
  border-bottom: 1px solid var(--rose);
  transition: border-color 0.18s ease;
}
.welt:hover .welt__mehr { border-bottom-color: var(--rose-text); }

/* --- Zitatband: vollbreit, Bild mit Text darüber --- */
.zitatband { position: relative; }

.zitatband blockquote {
  max-width: 30ch;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--creme);
}

/* Eine Zeile je Sinnabschnitt. Der Umbruch ist gesetzt, nicht zufällig,
   damit das zeilenweise Aufdecken beim Scrollen dem Lesen folgt. */
.zitatband__zeile { display: block; }

.zitatband cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--schrift-text);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}

/* --- Abschluss ---
   Eine helle Karte sitzt genau auf der Kante zwischen der letzten hellen
   Sektion und dem dunklen Fußbereich: Die obere Hälfte des Abschnitts
   trägt die Farbe der Sektion davor, die untere schon das Dunkel des
   Fußbereichs. So entsteht kein leerer dunkler Streifen vor dem Footer,
   und die Karte führt als letzter Blick zur Kontaktaufnahme.
   Mint bleibt Licht in der Karte, wird nie Vollfarbe. */
.schluss {
  --schluss-oben: var(--creme);
  --schluss-unten: var(--dunkel);
  position: relative;
  padding-top: clamp(3rem, 7vw, 6rem);
  /* Das Dunkel ist Grundfarbe, der Verlauf legt nur die helle obere
     Hälfte darüber. Andersherum glättete der Verlauf auf dem Handy die
     Unterkante bei Bruchteil-Pixeln, und zwischen Abschnitt und
     Fußbereich blieb ein heller Strich stehen. */
  background-color: var(--schluss-unten);
  background-image: linear-gradient(to bottom,
    var(--schluss-oben) 0,
    var(--schluss-oben) 62%,
    transparent 62%);
  text-align: center;
}
/* Kein Spalt zum Fußbereich, auch nicht bei Rundung auf halbe Pixel. */
.schluss + .seitenfuss,
main:has(> .schluss:last-child) + .seitenfuss { margin-top: -1px; }
/* Folgt die Karte auf eine abgesetzte Fläche, läuft diese weiter. */
.flaeche-creme2 + .schluss { --schluss-oben: var(--creme-2); }

/* Hintergrund, Mintlicht und Rosé-Linie liegen direkt auf der Karte statt
   in Pseudo-Ebenen mit negativem z-index: Ältere Mobilbrowser und
   Ganzseiten-Screenshots auf dem Handy ließen sonst den Karteninhalt weg. */
.schluss__karte {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 6vw, 5rem);
  border-top: 3px solid var(--rose);
  border-radius: var(--kante);
  background-color: #E4F2EC;
  background-image:
    radial-gradient(80% 70% at 15% 0%, rgba(142, 207, 184, 0.55), rgba(142, 207, 184, 0) 70%),
    linear-gradient(135deg, rgba(245, 241, 236, 0) 40%, #F5F1EC 100%);
  box-shadow: 0 30px 60px -30px rgba(46, 46, 43, 0.45);
}
/* Die Biene als Wasserzeichen unten rechts, angeschnitten. Der Inhalt
   liegt darüber. */
.schluss__karte::after {
  content: '';
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: clamp(12rem, 28vw, 20rem);
  height: clamp(12rem, 28vw, 20rem);
  background: url('../logo/logo-mark.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.schluss__karte > * { position: relative; z-index: 1; }

.schluss .label { margin-bottom: 1.25rem; }
.schluss h2 { color: var(--dunkel); margin-bottom: 1.25rem; }
.schluss p {
  max-width: 48ch;
  margin: 0 auto 2.25rem;
  color: var(--text);
}
.schluss p.btn-reihe { max-width: none; margin-bottom: 0; }
.schluss__zusatz {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-leise);
}


/* ============================================================
   11  UNTERSEITEN
   ============================================================ */

/* Kopfbereich mit Bildband, Text linksbündig */
.seitenkopf { position: relative; margin-top: var(--nav-h); }

.seitenkopf .bild__inhalt {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Diese Zentrierhilfe gilt nur, solange der Block absolut im Bild liegt.
   Unter 700px bestimmt der Text die Höhe und steht im Fluss (siehe
   Abschnitt 9). Bliebe das transform stehen, schöbe es den Block um seine
   halbe Breite nach links aus dem Bild heraus.
   Muss nach der Regel darüber stehen, sonst gewinnt sie in der Kaskade. */
@media (max-width: 700px) {
  .seitenkopf .bild__inhalt {
    left: auto;
    transform: none;
  }
  /* Das Querformat wird hier fast quadratisch beschnitten. Stehen die
     Personen am Rand, setzt die Seite den Ausschnitt über $kopf_ausschnitt. */
  .seitenkopf--links-10 .bild img { object-position: 10% center; }
  .seitenkopf--links-20 .bild img { object-position: 20% center; }
}

.seitenkopf h1 { color: var(--creme); max-width: 18ch; }

.seitenkopf .label { color: var(--mint); }

.seitenkopf__unterzeile {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--creme);
}

/* Brotkrumen */
.krumen {
  padding-block: 1rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
  border-bottom: 1px solid var(--linie);
}
.krumen ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.krumen li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; color: var(--linie-kraeftig); }
.krumen a { color: var(--rose-text); text-decoration: none; }
.krumen a:hover { text-decoration: underline; }
.krumen [aria-current='page'] { color: var(--text-leise); }

/* Zweispaltiger Inhalt mit Randspalte */
.mit-randspalte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.randspalte { position: sticky; top: calc(var(--nav-h) + 1.5rem); }

/* Nur oben und unten Luft, seitlich bündig: Die Blöcke stehen ohne Kasten
   nebeneinander, ein seitlicher Einzug ließe die Trennlinien kürzer wirken
   als das Foto darüber und die Spalte franste an beiden Kanten aus. */
.randspalte__block {
  padding: 1.75rem 0;
  border-top: 1px solid var(--linie);
}
.randspalte__block:first-child { border-top: 0; padding-top: 0; }

/* Ist der Block zugleich die Bildfläche, entfällt sein Innenmaß. Sonst
   liegt das Padding auf demselben Element, das den Bildhintergrund trägt:
   Um das Foto lief ein Rand in Creme-2, und weil das Seitenverhältnis bei
   border-box die äußere Kante meint, blieb unten zusätzlich ein Streifen
   frei. Das Foto füllt die Fläche jetzt randlos. */
.randspalte__block.bild { padding: 0; }

.randspalte__titel {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 1.25rem;
}

.datenzeile {
  display: flex;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.datenzeile:last-child { border-bottom: 0; }
.datenzeile dt { flex: 0 0 6.5rem; font-weight: 500; color: var(--dunkel); }
.datenzeile dd { color: var(--text-leise); }

/* Fließtext-Bereich der Leistungsseiten */
.textkoerper > * + * { margin-top: 1.1rem; }
.textkoerper > h2 { margin-top: clamp(2.75rem, 5vw, 4rem); }
.textkoerper > h3 { margin-top: clamp(2.25rem, 4vw, 3rem); }
.textkoerper > :first-child { margin-top: 0; }

/* Hervorgehobener Hinweis, mit Linie statt Kasten */
.hinweis {
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 2px solid var(--rose);
}
/* h3 und h4 sehen im Hinweis gleich aus. Welche Ebene richtig ist, hängt
   davon ab, was auf der Seite darüber steht. Die Optik bleibt dieselbe. */
.hinweis h3,
.hinweis h4 {
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.hinweis p { font-size: 1rem; color: var(--text-leise); }

.hinweis--mint { border-left-color: var(--mint); }

/* Vier Rollen, versetzte Anordnung */
.rollen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.rolle { padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.rolle:nth-child(even) { margin-top: clamp(0rem, 3vw, 2.5rem); }
.rolle__nr {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--rose-text);
  margin-bottom: 0.75rem;
}
.rolle h3 { margin-bottom: 0.6rem; }
.rolle p { font-size: 1rem; color: var(--text-leise); }

/* Nummerierte Schritte
   Zwei Regler steuern den Scroll-Effekt, gesetzt wird sie von
   animationen.js. Ohne Skript stehen beide auf 0, dann sieht der
   Block genau so aus wie zuvor: dunkle Zahl, feine graue Linie.
     --schritt-fuellung  Füllstand der Zahlfläche, 0 bis 1
     --schritt-fluss     Füllstand der Linie darunter, 0 bis 1
   Die Zahl trägt Rose in der dunkleren Textvariante, weil Creme auf
   #D94F6E für 15px fett zu wenig Kontrast hätte. Die Linie ist reine
   Fläche und darf deshalb das volle Rose führen. */
.schritte { counter-reset: schritt; margin-top: clamp(2rem, 4vw, 3rem); }
.schritt {
  counter-increment: schritt;
  position: relative;
  padding-left: 4rem;
  padding-bottom: 2.5rem;
  --schritt-fuellung: 0;
  --schritt-fluss: 0;
}
.schritt::before {
  content: counter(schritt);
  position: absolute;
  left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--dunkel);
  /* Der Pegel steigt von unten. Die weiche Zone von 0.35rem lässt die
     Kante wie eine Wasserlinie wirken statt wie ein harter Balken. */
  background-image: linear-gradient(
    to top,
    var(--rose-text) calc(var(--schritt-fuellung) * 100%),
    var(--dunkel) calc(var(--schritt-fuellung) * 100% + 0.35rem)
  );
  color: var(--creme);
  border-radius: var(--kante);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.9375rem;
}
.schritt::after {
  content: '';
  position: absolute;
  left: 1.25rem; top: 3rem; bottom: 0.5rem;
  width: 1px;
  background-color: var(--linie);
  background-image: linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% calc(var(--schritt-fluss) * 100%);
}
.schritt:last-child { padding-bottom: 0; }
.schritt:last-child::after { display: none; }
.schritt h3 { margin-bottom: 0.4rem; }
.schritt p { color: var(--text-leise); }

/* Merkmale als schlichte Auszeichnung */
.merkmale { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 2rem; }
.merkmale li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* Nutzenfelder, drei nebeneinander aber ohne Kastenoptik */
.nutzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.nutzen > li { padding-top: 1.25rem; border-top: 1px solid var(--rose); }
.nutzen h4 { margin-bottom: 0.4rem; }
.nutzen p { font-size: 0.9375rem; color: var(--text-leise); }


/* ============================================================
   12  FORMULAR
   ============================================================ */

.formular { display: flex; flex-direction: column; gap: 1.5rem; max-width: 40rem; }

.feldpaar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.feld { display: flex; flex-direction: column; }

.feld label {
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dunkel);
}

.feld .pflicht { color: var(--rose-text); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--creme);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--kante);
  font-size: 1rem;
  color: var(--dunkel);
  transition: border-color 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}
.feld select {
  /* Eigener Pfeil, damit das Feld eckig bleibt */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A4A4A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.feld textarea { min-height: 9rem; resize: vertical; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus { border-color: var(--rose-text); }

.feld input::placeholder,
.feld textarea::placeholder { color: var(--text-leise); opacity: 0.7; }

/* Fehlerzustand. Farbe allein trägt die Information nicht,
   es kommt immer ein Text dazu. */
.feld input[aria-invalid='true'],
.feld select[aria-invalid='true'],
.feld textarea[aria-invalid='true'] {
  border-color: var(--rose-text);
  border-width: 2px;
}

.feldfehler {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rose-text);
}

/* Einwilligung */
.einwilligung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.einwilligung input[type='checkbox'] {
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--rose-text);
  appearance: auto;
  -webkit-appearance: auto;
  flex-shrink: 0;
}
.einwilligung label {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 0;
}

/* Honeypot: außerhalb des Sichtbereichs, nicht per display:none,
   damit Bots ihn ausfüllen. */
.falle {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Sammelmeldung über dem Formular */
.meldung {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--rose);
  background: var(--creme-2);
  border-radius: var(--kante);
}
.meldung--erfolg { border-left-color: var(--mint); }
.meldung h2 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.meldung ul { margin-top: 0.5rem; }
.meldung li { font-size: 0.9375rem; }
.meldung li::before { content: '· '; }

/* Platzhalter für das spätere Buchungstool */
.buchung {
  margin-top: 2.5rem;
  padding: 2.5rem 2rem;
  background: var(--creme-2);
  border: 1px dashed var(--linie-kraeftig);
  border-radius: var(--kante);
  text-align: center;
}
.buchung h3 { margin-bottom: 0.6rem; }
.buchung p { max-width: 34ch; margin-inline: auto; font-size: 0.9375rem; color: var(--text-leise); }


/* ============================================================
   13  RECHTSTEXTE
   ============================================================ */

.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 0.75rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 {
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.rechtstext p { margin-bottom: 0.9rem; }
.rechtstext ul { margin: 0.9rem 0 1.25rem; }
.rechtstext ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.rechtstext ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.8em;
  width: 0.75rem; height: 1px;
  background: var(--linie-kraeftig);
}
.rechtstext a { color: var(--rose-text); text-decoration: underline; text-underline-offset: 0.2em; }

.rechtshinweis {
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--mint);
  background: var(--creme-2);
  border-radius: var(--kante);
  font-size: 0.9375rem;
}


/* ============================================================
   14  FOOTER
   ============================================================ */

.seitenfuss {
  background: var(--dunkel);
  color: var(--auf-dunkel-leise);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* Die Marke steht breiter als die drei Linkspalten, damit Logo und Satz
   Platz haben. Die Spalten selbst sind gleich breit und linksbündig,
   rechtsbündige Listen wirkten neben der leeren Fläche verloren. */
.seitenfuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.seitenfuss__logo {
  width: 140px;
  /* height: auto, sonst gälte die Höhe aus dem HTML-Attribut, das Logo
     säße mittig in einer zu hohen Box und stünde tiefer als die
     Spaltenüberschriften daneben. */
  height: auto;
  aspect-ratio: 679 / 555;
  object-fit: contain;
  margin-bottom: 1.75rem;
}

.seitenfuss__motto {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--creme);
}

.seitenfuss__satz {
  margin-top: 0.75rem;
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.seitenfuss__titel {
  margin-bottom: 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme);
}

.seitenfuss__spalte ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.seitenfuss a {
  color: var(--auf-dunkel-leise);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.18s ease;
}
.seitenfuss a:hover {
  color: var(--creme);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.seitenfuss__unten {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 236, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.8125rem;
}

/* Hinweis auf die Agentur: bewusst klein und zurückhaltend */
.seitenfuss__credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.seitenfuss__credit a {
  display: inline-flex;
  opacity: 0.6;
  transition: opacity 0.18s ease;
}
.seitenfuss__credit a:hover,
.seitenfuss__credit a:focus-visible { opacity: 1; }
.seitenfuss__credit img { height: 12px; width: auto; }


/* ============================================================
   15  BEWEGUNG
   Bewusst sparsam: ein gestaffelter Auftritt im Hero und ein
   einziger Scroll-Effekt für die Welten. Sonst nur Hover.
   ============================================================ */

@keyframes auftritt {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

.auftritt   { animation: auftritt 0.6s cubic-bezier(0.22, 0.68, 0, 1) both; }
.auftritt-2 { animation-delay: 0.1s; }
.auftritt-3 { animation-delay: 0.2s; }
.auftritt-4 { animation-delay: 0.3s; }

/* Titelauftritt: Der Titel fährt aus seiner Maske herauf. Er bewegt sich
   um die eigene Höhe, deshalb 100% und nicht ein fester Wert. */
@keyframes aus-maske {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.hero__titel {
  animation: aus-maske 0.9s cubic-bezier(0.22, 0.68, 0, 1) 0.1s both;
}

/* Scroll-Effekt. Ohne JavaScript bleibt der Inhalt sichtbar,
   die Klasse .sichtbar setzt erst das Skript. */
.js .beim-scrollen {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js .beim-scrollen.sichtbar { opacity: 1; transform: none; }

/* Zwei Elemente derselben Bildreihe treten nacheinander auf, statt
   gleichzeitig. Mehr als drei Stufen wären Selbstzweck. */
.js .beim-scrollen--2 { transition-delay: 0.12s; }
.js .beim-scrollen--3 { transition-delay: 0.24s; }

/* Dieselbe Bewegung wie beim Hero-Bild, nur ausgelöst vom Scrollen.
   Ohne Skript ist .sichtbar nie gesetzt, deshalb steht hier der
   Ruhezustand im Grundzustand und die Klasse .js kehrt ihn um. */
.js .bild-scroll img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(0.22, 0.68, 0, 1); }
.js .bild-scroll.sichtbar img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .beim-scrollen { opacity: 1; transform: none; }
  .js .bild-scroll img { transform: none; }
  .hero__vorhang { display: none; }
}


/* ============================================================
   16  MEDIA QUERIES
   ============================================================ */

@media (max-width: 1100px) {
  .mit-randspalte { grid-template-columns: minmax(0, 1fr) 17rem; }
  .welt--a { grid-column: 1 / 8; }
  .welt--b { grid-column: 8 / 13; }
  .welt--c { grid-column: 2 / 12; }
}

/* Die Navigation schaltet deutlich früher um als das übrige Layout.
   Logo, sechs Menüpunkte und Schaltfläche brauchen gemessene 1148px.
   Bliebe es beim allgemeinen Umbruch bei 900px, ragten
   "Psychologisches Coaching" und die Schaltfläche bei 1024px über den
   rechten Bildschirmrand hinaus. Da die Kopfzeile fixiert ist, entstünde
   dabei nicht einmal ein Bildlauf, der darauf aufmerksam macht: Die
   Menüpunkte wären schlicht abgeschnitten.
   1180px lässt gut 30px Luft für abweichende Schriftdarstellung.
   Wird dieser Wert geändert, muss die Abfrage in js/main.js mitgeführt
   werden, die das Menü beim Wechsel auf Desktop-Breite schließt. */
@media (max-width: 1180px) {
  .hauptnav { display: none; }
  .burger   { display: flex; }
}

/* Unter 1000px wird die rechte Spalte zu schmal, das Hauptbild würde
   hochkant beschnitten. Deshalb untereinander: Text, das Bildpaar und
   zuletzt das Hauptbild randabfallend, damit die Nummern 01 bis 03 der
   Reihe nach folgen.
   Die Grenze lag früher bei 1180px. Windows-Laptops mit 125 oder 150 %
   Skalierung landen aber genau dazwischen (rund 1000 bis 1280px) und
   bekamen so die gestapelte Fassung, obwohl die Seite am Schreibtisch
   betrachtet wird. */
@media (max-width: 1000px) {
  .alltag { grid-template-rows: none; }
  .alltag__text  { grid-column: 1 / -1; grid-row: 1; padding-block: 0; }
  .alltag__haupt {
    grid-column: 2 / -1;
    grid-row: 3;
    display: block;
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    margin-inline-start: 0;
  }
  .alltag__haupt .bild { aspect-ratio: 4 / 3; min-height: 0; }
  .alltag__haupt .alltag__zeile { margin-inline-end: var(--rand); }
  .alltag__paar {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-rows: none;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 5vw, 3rem);
  }
  .alltag__paar > figure { grid-row: auto; display: block; }
}


/* Der Hero bricht früher um als der Rest: Unter dieser Breite bleiben der
   Textspalte keine 480px mehr, der Titel bricht dann an unpassenden
   Stellen und die Knopfreihe fällt auseinander. Das Bild rückt deshalb
   unter den Text, statt schmal daneben stehen zu bleiben. */
@media (max-width: 991px) {
  .hero { border-bottom: 0; }
  .hero__text {
    width: 100%;
    min-height: 0;
    gap: clamp(2rem, 6vw, 3rem);
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: clamp(3rem, 8vw, 4rem);
  }
  /* relative, nicht static: Das Bild rückt zwar in den Fluss, bleibt aber
     enthaltender Block für Vorhang und Verlauf. Bei static hingen beide am
     nächsten positionierten Vorfahren, deckten die ganze Hero-Fläche ab und
     das overflow: hidden hier griff nicht mehr — der Vorhang schob sich in
     seiner Endlage um volle Fensterbreite nach rechts aus dem Bild heraus
     und machte die Seite am Handy seitlich verschiebbar. */
  .hero__bild {
    position: relative;
    /* Der Versatz aus der Desktop-Regel (oben um die Kopfzeile) würde bei
       relative das Bild nach unten schieben, ohne Platz zu reservieren:
       Es ragte dann 70px in die Qualifikationsleiste. */
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  /* Untereinander liegt die Kante nicht mehr links, sondern unten:
     Dort läuft das Bild in die Textfläche aus. */
  .hero__bild::after {
    background: linear-gradient(to bottom,
      rgba(245, 241, 236, 0) 68%,
      var(--creme) 100%);
  }
}

@media (max-width: 900px) {
  /* Einspaltig: Das Bild sitzt über dem Text und bleibt vollbreit, die
     Textspalte fällt auf den normalen Seitenrand zurück. */
  .hero { padding-top: calc(var(--nav-h) + 1.5rem); }
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
  .hero__text { padding-inline: var(--rand); padding-block: clamp(2rem, 6vw, 3rem) 0; }
  .hero__portrait { order: -1; }
  .hero__portrait .bild { min-height: 0; aspect-ratio: 4 / 3; }

  /* Zwei Spalten reichen für Einträge wie "Betriebliches
     Gesundheitsmanagement, IHK" nicht mehr, sie brächen dreizeilig um. */
  .liste--nachweise { grid-template-columns: minmax(0, 1fr); }

  .welten { grid-template-columns: minmax(0, 1fr); }
  /* Die Spaltenzuweisungen aus der 12-spaltigen Fassung müssen hier
     ausdrücklich zurück. Bleiben sie stehen, verlangt etwa welt--b mit
     "8 / 13" fünf Spalten, die es im einspaltigen Raster nicht gibt: Der
     Browser legt sie implizit an, richtet sie am Inhalt aus und schiebt die
     Karte über den rechten Rand. Genau daher kam der seitliche Bildlauf am
     Handy. */
  .welt--a, .welt--b, .welt--c { grid-column: auto; }
  .welten__kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }



  .split, .versetzt, .teaser { grid-template-columns: minmax(0, 1fr); }
  .split--gedreht > :first-child { order: 0; }
  .versetzt > :last-child { padding-top: 0; }

  /* Einspaltig gibt es keine Nachbarspalte mehr, an der sich die Höhe
     ausrichten könnte. Die Bilder bekommen ihr Verhältnis zurück. */
  .versetzt--gleich-hoch > .bild {
    aspect-ratio: 3 / 4;
    min-height: 0;
  }
  .teaser > .bild {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  /* Untereinander wirkt ein einseitiger Überstand schief: Das Bild geht
     hier auf beiden Seiten bis zum Rand. */
  .versetzt--randabfallend > .bild {
    margin-inline: calc(-1 * var(--rand));
  }

  /* Untereinander gibt es keine gemeinsame Höhe mehr: Das Bild bekommt sein
     Seitenverhältnis zurück und wird nicht beschnitten. */
  .voll-teilung { grid-template-columns: minmax(0, 1fr); }
  .voll-teilung__kopf > .bild {
    flex: none;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .mit-randspalte { grid-template-columns: minmax(0, 1fr); }
  .randspalte { position: static; }

  .notiz { margin-inline-start: 0; }

  /* Zwei Spalten statt vier: Die Marke nimmt die volle Breite, die drei
     Linkspalten teilen sich darunter die Zeile. */
  .seitenfuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seitenfuss__marke { grid-column: 1 / -1; }

  .blattgrund::before { width: min(30rem, 90vw); opacity: 0.05; }
}

@media (max-width: 700px) {
  .alltag__paar { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  /* Auf dem Handy steht das Hauptbild wie die beiden anderen in der
     Textspalte, statt eingerückt bis an den Rand zu laufen. */
  .alltag__haupt { grid-column: 1 / -1; margin-inline-end: 0; margin-top: 2rem; }
  .alltag__haupt .alltag__zeile { margin-inline-end: 0; }
  /* Der Schatten der Abschlusskarte erscheint auf dem dunklen Grund
     unter ihr als Streifen. Auf dem Handy trägt die Karte auch ohne. */
  .schluss__karte { box-shadow: none; }
}

@media (max-width: 620px) {
  .rollen { grid-template-columns: minmax(0, 1fr); }
  .rolle:nth-child(even) { margin-top: 0; }
  .feldpaar { grid-template-columns: minmax(0, 1fr); }
  .leiste ul { gap: 0.5rem 1.25rem; }
  .datenzeile { flex-direction: column; gap: 0.15rem; }
  .datenzeile dt { flex-basis: auto; }
  .seitenfuss__unten { flex-direction: column; }
}

/* Sehr schmale Geräte: 320px muss ohne Querscrollen funktionieren */
@media (max-width: 360px) {
  :root { --rand: 1rem; }
  .display { font-size: 2.625rem; }
  .btn { padding: 0.9rem 1.25rem; font-size: 0.875rem; }
  .btn-reihe { flex-direction: column; align-items: stretch; }
  .btn-reihe .btn { width: 100%; }
}


/* ============================================================
   17  DRUCK
   ============================================================ */

@media print {
  .kopf, .mobilnav, .burger, .skip-link, .buchung, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .seitenkopf, .flaeche-dunkel, .schluss, .schluss__karte, .leiste, .seitenfuss {
    background: #fff !important;
    color: #000 !important;
  }
  .schluss__karte { box-shadow: none; }
  .schluss__karte::after { display: none; }
  .bild { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
  .abschnitt { padding-block: 1.5rem; }
}