/* ==================================================================
   KEROLINA — Rundreise-Detailseiten, gemeinsames Layout

   Byteweise uebernommen aus dem <style>-Block von
   rundreisen/westen/1335-ca-mw-der-aktionsreiche-westen.html
   (Zeilen 335-4363, Stand 26.08.2026). Nichts sortiert, nichts
   dedupliziert, nichts umformatiert.

   REIHENFOLGE IST PFLICHT: Diese Datei muss VOR
   assets/css/kerolina-lesekomfort.css und VOR merkzettel.css
   geladen werden — genau dort, wo der Inline-Block stand. Steht
   sie dahinter, gewinnt sie gegen die Lesekomfort-Schicht und die
   drei Schriftstufen greifen nicht mehr.

   Reiseindividuelle Regeln enthaelt diese Datei nicht: geprueft
   auf Reisenamen (nur Kommentartreffer) und auf nth-child (null).
   ================================================================== */
    /* ================================================================
       KEROLINA Rundreise-Detailseite W-1335 – Quiet Luxury 2026
       Gleiche Designwelt wie /westkueste-ct_2.html
       CI-Farben (unverändert):
       #1e1122  #3e2a4a  #2a1c33  #d2c485  #fdf1d1  #bca572
       ================================================================ */
    :root {
        --ink: #1e1122;
        --plum: #2a1c33;
        --plum-mid: #3e2a4a;
        --gold: #d2c485;
        --cream: #fdf1d1;
        --gold-deep: #bca572;
        --gold-12: rgba(210, 196, 133, .12);
        --gold-25: rgba(210, 196, 133, .25);
        --gold-45: rgba(210, 196, 133, .45);
        --plum-06: rgba(42, 28, 51, .06);
        --plum-12: rgba(42, 28, 51, .12);
        --plum-45: rgba(42, 28, 51, .45);
        --cream-06: rgba(253, 241, 209, .06);
        --cream-80: rgba(253, 241, 209, .80);
        --ink-92: rgba(30, 17, 34, .92);
        --ink-70: rgba(30, 17, 34, .70);
        /* --font-display und --font-body stehen NICHT mehr hier.
           Sie kommen aus /assets/css/kerolina-schrift.css, eingebunden
           über includes/kerolina-assets.php weiter unten in diesem Kopf.
           Diese Seite kennt damit keinen Schriftnamen mehr – ein
           Schriftwechsel fasst sie nicht an. Bitte hier nichts
           nachtragen. */
        --radius: 14px;
        --radius-sm: 8px;

        /* ==============================================================
           DESIGNSPRACHE 2027 – zentrale Tokens
           --------------------------------------------------------------
           Die Seite verwendet ab hier drei Flaechen statt Weiss/Gradient:
           Papier (Grundflaeche), warmes Papier (Premiumsektion) und
           Pflaume (dunkle Akzentsektion). Karten bleiben rein weiss und
           heben sich dadurch ohne Schattenwucht von der Flaeche ab.
           Alle Werte sind aus der bestehenden CI abgeleitet.
           ============================================================== */
        /* 1. Flaechen */
        --paper: #fcfaf5;          /* warmes Elfenbein statt reinem Weiss */
        --paper-warm: #f8f3e8;     /* leicht getoente Premiumsektion      */
        --card-bg: #ffffff;        /* Karten, Panels, Formularfelder      */
        /* 2. Linien & Kanten */
        --line: rgba(42, 28, 51, .10);        /* ruhige Trennlinie        */
        --line-strong: rgba(42, 28, 51, .18); /* betonte Trennlinie       */
        --hairline: rgba(188, 165, 114, .40); /* feine Goldlinie          */
        --field-border: rgba(42, 28, 51, .50);/* Formularfelder (Kontrast)*/
        /* 3. Schatten: flach, warm, sparsam */
        --shadow-soft: 0 1px 2px rgba(30, 17, 34, .04), 0 6px 18px rgba(30, 17, 34, .05);
        --shadow: 0 2px 5px rgba(30, 17, 34, .05), 0 16px 38px rgba(30, 17, 34, .09);
        --shadow-lift: 0 3px 8px rgba(30, 17, 34, .06), 0 20px 44px rgba(30, 17, 34, .11);
        /* 4. Raster & Rhythmus */
        --maxw: 1200px;
        --measure: 780px;          /* max. Lesebreite fuer Fliesstext     */
        --block: 1020px;           /* Breite grosser Inhaltsbloecke       */
        --section-pad: clamp(54px, 5.2vw, 78px);
        /* 5. Textfarbe */
        --ink-80: rgba(30, 17, 34, .80);
    }
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }
    html {
        scroll-behavior: smooth;
        /* Sprungziele unter dem Sticky-Header freistellen.
           Ohne diese Angabe endet jeder Anker-Sprung (#pakete,
           #anfrage-formular, Sticky-CTA, Sprunglink, Jump-Navigation)
           mit dem Ziel bei y=0 – die Kopfzeile schneidet dann die erste
           Zeile des Ziels an (gemessen: 8 px an der Paket-Eyebrow,
           3 px am Formular-Eyebrow).
           Die Werte sind die gemessene Kopfhoehe plus 14 px Luft.
           Damit landet ein Anker-Sprung exakt dort, wo die Paket-Buttons
           per JavaScript ohnehin schon hinspringen (zumFormular():
           kopfHoehe + 14) – ein Ziel, zwei Wege, dieselbe Position.
           Gemessene Kopfhoehen (nachgemessen 21.08.2026, nach der
           Merkzettel-Header-Architektur 2027): bis 480px = 63,
           481–1080px = 71, 1081–1439px = 79 (Rating/Social-Trennung in
           der Navigation), ab 1440px = 71. Die Grenze lag bis dahin bei
           401px; sie folgt jetzt der Stelle, an der das Logo seine volle
           Hoehe erreicht. */
        scroll-padding-top: 77px;
    }
    @media (min-width: 481px) {
        html { scroll-padding-top: 85px; }
    }
    @media (min-width: 1081px) and (max-width: 1439px) {
        html { scroll-padding-top: 93px; }
    }
    body {
        font-family: var(--font-body);
        font-size: 17px;
        line-height: 1.65;
        color: var(--ink);
        background: var(--paper);
        -webkit-font-smoothing: antialiased;
    }
    img {
        max-width: 100%;
        height: auto;
        display: block
    }
    a {
        color: inherit
    }
    .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px
    }
    h1, h2, h3 {
        font-family: var(--font-display);
        line-height: 1.22;
        font-weight: 700
    }
    h2 {
        font-size: clamp(1.6rem, 3vw, 2.15rem);
        letter-spacing: -.005em
    }
    h3 {
        font-size: 1.15rem
    }
    /* ================================================================
       SEKTIONSTYPEN – begrenztes, wiederverwendbares Set
       ----------------------------------------------------------------
       .section             helle Standardflaeche (Papier)
       .section--warm       leicht getoente Premiumflaeche
       .section--light      Alias von --warm (Altbestand, weiter nutzbar)
       .section--plum       dunkle Akzent-/Vertrauenssektion
       .section--framed     Conversion-Rahmen: feine Goldlinie oben/unten
       .section--afterhero  einmaliger Lichtnachhall unter dem Hero
       .section--tight      kompakter Abstand fuer schmale Zwischenmodule
       Der Wechsel zwischen Papier und warmem Papier ist der eigentliche
       Abschnittsuebergang. Goldlinien werden nur dort gesetzt, wo ein
       Bereich bewusst herausgehoben wird.
       ================================================================ */
    .section {
        padding: var(--section-pad) 0;
        background: var(--paper)
    }
    .section--warm, .section--light {
        background: var(--paper-warm)
    }
    /* Dunkle Sektionen sind gesetzte Ruhepunkte in der langen Seite.
       Die Goldlinien an ihren Kanten sind dieselbe Fassung wie an
       Trustbar und Footer – der Wechsel wirkt dadurch gewollt. */
    .section--plum {
        background: var(--plum);
        color: var(--cream);
        border-top: 1px solid var(--gold-25);
        border-bottom: 1px solid var(--gold-25)
    }
    .section--tight {
        padding: calc(var(--section-pad) * .62) 0
    }
    .section--framed {
        box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline)
    }
    /* Lichtnachhall des Hero: kurzer Cremeauslauf am oberen Rand der
       ersten Inhaltssektion, danach die ruhige warme Flaeche. */
    .section--afterhero {
        background-image: linear-gradient(180deg, rgba(253, 241, 209, .70), rgba(253, 241, 209, 0) 200px)
    }
    /* Gemeinsame Abschnittskennung: kurze Goldlinie vor jeder Eyebrow.
       Sie ist die durchgaengige Marke vom Hero bis zum Formular.
       inline-block (nicht flex), damit vorhandene Zeilenumbrueche
       innerhalb der Eyebrow erhalten bleiben. */
    /* Der Goldton traegt auf hellem Elfenbein nur 2,3:1 – zu wenig fuer
       diese kleine Versalschrift. Deshalb auf hellen Flaechen: Linie in
       Gold, Schrift in Pflaume (15:1). Auf dunklen Flaechen bleibt beides
       golden. */
    .eyebrow {
        display: inline-block;
        font-size: .8rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--plum);
        margin-bottom: 14px;
    }
    .eyebrow::before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 1px;
        background: var(--gold-deep);
        vertical-align: middle;
        margin-right: 13px;
        position: relative;
        top: -1px;
    }
    .section--plum .eyebrow, .hero .eyebrow {
        color: var(--gold)
    }
    .section--plum .eyebrow::before, .hero .eyebrow::before {
        background: var(--gold)
    }
    .lead {
        max-width: var(--measure);
        font-size: 1.04rem;
        color: var(--ink-80)
    }
    .section--plum .lead {
        color: var(--cream-80)
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    /* Tastaturfokus: Gold traegt auf hellem Elfenbein zu wenig Kontrast.
       Auf hellen Flaechen daher Pflaume, auf dunklen Flaechen Gold. */
    :focus-visible {
        outline: 3px solid var(--plum);
        outline-offset: 2px
    }
    .hero :focus-visible,
    .orient :focus-visible,
    .trustbar :focus-visible,
    .site-header :focus-visible,
    .site-footer :focus-visible,
    .section--plum :focus-visible,
    .bridge :focus-visible,
    .tour-box :focus-visible,
    .submit-zone :focus-visible,
    .sticky-cta :focus-visible {
        outline-color: var(--gold)
    }
    .skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        background: var(--gold);
        color: var(--ink);
        font-weight: 600;
        padding: 10px 18px;
        z-index: 200;
        border-radius: 0 0 var(--radius-sm) 0;
    }
    .skip-link:focus {
        left: 0
    }
    [hidden] {
        display: none !important
    }/* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: .98rem;
        padding: 12px 22px;
        border-radius: var(--radius-sm);
        text-decoration: none;
        cursor: pointer;
        border: 2px solid transparent;
        transition: background .2s, color .2s, border-color .2s;
        min-height: 46px;
        text-align: center;
    }
    .btn--gold {
        background: var(--gold);
        color: var(--ink);
        border-color: var(--gold);
        box-shadow: 0 2px 8px rgba(188, 165, 114, .30)
    }
    .btn--gold:hover {
        background: var(--gold-deep);
        border-color: var(--gold-deep)
    }
    /* Sekundaerer Button: weisse Kartenflaeche mit ruhiger Kante, damit
       er zur Kartenfamilie gehoert und dem goldenen Primaer-CTA
       eindeutig nachgeordnet bleibt. */
    .btn--ghost {
        background: var(--card-bg);
        color: var(--plum);
        border-width: 1px;
        border-color: var(--line-strong);
        box-shadow: var(--shadow-soft)
    }
    .btn--ghost:hover {
        border-color: var(--gold-deep);
        background: var(--card-bg)
    }
    .btn--outline-light {
        background: transparent;
        color: var(--cream);
        border-color: var(--gold-45)
    }
    .btn--outline-light:hover {
        border-color: var(--gold);
        background: var(--cream-06)
    }
    .btn--big {
        font-size: 1.05rem;
        padding: 15px 28px
    }
    .btn[disabled] {
        opacity: .65;
        cursor: not-allowed
    }/* Header / Navigation */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--ink-92);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--gold-25);
    }
    /* ---- Lesefortschritt: die Unterkante der Kopfzeile ----------------
       Diese Seite ist auf dem Telefon 44 Bildschirme lang; wer alle
       Etappen oeffnet, bekommt 56 (gemessen 390x844). Von allen Fragen,
       die eine so lange Seite aufwirft, war genau eine auf KEINER
       Bildschirmbreite beantwortet: wie weit ist der Weg noch?

       Sie bekommt deshalb kein eigenes Bedienelement, sondern die Kante,
       die ohnehin schon da ist. Die Kopfzeile schliesst seit jeher mit
       einer Goldhaarlinie in 25 % Deckung ab. Der bereits gelesene Teil
       dieser Linie steht in vollem Gold. Es kommt kein Element hinzu,
       eine vorhandene Linie wird auf ihrer Laenge unterschiedlich stark.

       Kein Knopf, keine Flaeche, kein Klick, keine Bewegung ausser der
       eigenen Breite. Und die folgt dem Finger, nicht einer Kurve:
       bewusst KEINE transition. Eine nachlaufende Linie waere eine
       Animation, eine mitlaufende ist eine Anzeige. Damit gilt auch
       prefers-reduced-motion als erfuellt, ohne Sonderregel.

       Gold traegt hier eine Linie auf dunkler Flaeche – der Einsatz, den
       02-design-system-2027.md 2.2 fuer Gold ausdruecklich vorsieht.

       Ohne JavaScript bleibt --lesefortschritt bei 0 %, die Linie
       erscheint nicht, und die Seite ist exakt die von vorher.

       Bewusst OHNE role="progressbar": Der Wert aendert sich bei jeder
       Scrollbewegung. Als angesagter Wert waere er fuer Vorlesesoftware
       eine Dauerstoerung, waehrend dort Landmarken und Ueberschriften die
       Orientierung bereits tragen. Die Linie ist eine rein visuelle
       Hilfe – deshalb ein Pseudo-Element und kein Knoten im Dokument. */
    .site-header::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: var(--lesefortschritt, 0%);
        background: var(--gold);
    }
    @media (forced-colors: active) {
        /* Im Kontrastmodus wird jede Autorenfarbe ersetzt. Highlight ist
           die einzige Systemfarbe, die dort verlaesslich sichtbar bleibt. */
        .site-header::after { background: Highlight; }
    }
    @media print {
        /* Auf Papier gibt es keinen Scrollweg. Die Linie waere dort ein
           angeschnittener Goldbalken ohne Aussage. Die einzige
           Druckregel dieser Seite – sie raeumt nur weg, was diese
           Ergaenzung selbst mitbringt. */
        .site-header::after { display: none; }
    }
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 10px 22px;
        max-width: var(--maxw);
        margin: 0 auto;
    }
    .site-header__logo img {
        height: 56px;
        width: auto
    }
    .main-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 16px;
        list-style: none
    }
    .main-nav a {
        color: var(--cream);
        text-decoration: none;
        font-size: .9rem;
        font-weight: 500;
        padding: 8px 2px;
        border-bottom: 2px solid transparent;
    }
    .main-nav a:hover, .main-nav a[aria-current="page"] {
        border-bottom-color: var(--gold);
        color: var(--gold)
    }
    .nav-toggle {
        display: none;
        background: transparent;
        border: 2px solid var(--gold-45);
        color: var(--cream);
        border-radius: var(--radius-sm);
        padding: 9px 12px;
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: .9rem;
    }
    @media (max-width: 1080px) {
        .nav-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px
        }
        .main-nav {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            background: var(--ink);
            border-bottom: 1px solid var(--gold-25);
            padding: 10px 16px 18px;
            max-height: calc(100vh - 80px);
            overflow-y: auto;
        }
        .main-nav.is-open {
            display: block
        }
        .main-nav ul {
            flex-direction: column;
            gap: 0
        }
        .main-nav a {
            display: block;
            padding: 12px 10px;
            font-size: 1rem;
            border-bottom: 1px solid rgba(253, 241, 209, .08)
        }
    }/* Hero */
    /* ==================================================================
       HERO 08/2026 – Emotions-Layer "Amerikanische Weite"
       ------------------------------------------------------------------
       Dramaturgie in drei Ebenen: 1. Emotion (Panorama ueber die ganze
       Breite), 2. Einordnung (Dauer, Start/Ziel, ein Satz), 3. Handlung
       (CTA + Preisanker). Alles Rationale, das vorher im Hero stand,
       sitzt jetzt in der Orientierungszone direkt darunter (.orient) –
       gleiche Flaeche, gleiche Leserichtung, deutlich weniger Text im
       ersten Bildschirm.

       Die Bildhoehe ist der begrenzende Faktor: Die einzige im Projekt
       vorhandene Fassung dieses Motivs ist 2000x686 px. Deshalb liegt das
       Bild ab 981 px vollflaechig und darunter als Band mit gedeckelter
       Hoehe (--hero-bild-h). So bleibt der Zuschnitt in jeder Breite
       unterhalb einer unnatuerlichen Uebervergroesserung.
       ================================================================== */
    .hero {
        --hero-bild-h: clamp(340px, 48vw, 440px);
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: var(--plum);
        color: var(--cream);
        padding: calc(var(--hero-bild-h) - 108px) 0 30px;
    }
    /* Das Panorama liegt hinter dem Text, aber ueber der Pflaumenflaeche
       des Hero. Dafuer isolation am Hero und z-index:-1 hier – ohne
       isolation wuerde das Bild hinter die Sektion selbst rutschen. */
    .hero__bild {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: var(--hero-bild-h);
        margin: 0;
        z-index: -1;
    }
    .hero__bild img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Der Fokuspunkt ist eine Angabe der Reise, keine Stilregel.
           kerolina_hero() setzt ihn als --hero-fokus am <figure>; derselbe
           Wert bestimmt den Mobilzuschnitt. Ein Wert, keine zwei. */
        object-position: var(--hero-fokus, 50% 42%);
    }
    /* Overlay: kein gleichmaessiger schwarzer Schleier, sondern ein
       Verlauf aus den CI-Toenen Pflaume und Ink. Unten dicht (dort steht
       der Text), oben offen (dort steht der Himmel). Unter 981 px laeuft
       er in die Pflaumenflaeche des Hero aus – die Unterkante des Bandes
       wird dadurch unsichtbar, Bild und Textflaeche lesen sich als eine
       Szene. */
    .hero__bild::after {
        content: "";
        position: absolute;
        inset: 0;
        /* Der letzte Stopp ist volle Pflaume bereits bei 92 %, nicht erst
           bei 100 %: Bei .96 blieb das Bild an der Bandkante noch minimal
           sichtbar und erzeugte gegen die Pflaumenflaeche darunter eine
           feine, sichtbare Kante. */
        background-image: linear-gradient(to bottom,
            rgba(42, 28, 51, .06) 0%,
            rgba(42, 28, 51, .18) 34%,
            rgba(30, 17, 34, .52) 56%,
            rgba(42, 28, 51, .84) 76%,
            var(--plum) 92%);
    }
    /* width:100% ist Pflicht, nicht Kosmetik: Der Hero ist ein
       Spalten-Flexcontainer. Die auto-Margins von .wrap wuerden das
       Kind sonst auf Inhaltsbreite schrumpfen und mittig setzen – der
       Text stand dadurch in der Bildmitte statt am linken Satzrand. */
    .hero__inner {
        position: relative;
        width: 100%;
    }
    .hero__text {
        max-width: 660px;
    }
    /* Die Eyebrow steht hier auf einem Foto, dessen Himmel eine helle
       Flaeche ist. Gold traegt dort zu wenig – auf hellen Flaechen ist
       Gold ohnehin nur Linienfarbe, nie Textfarbe. Deshalb: Linie in
       Gold (aus .eyebrow::before), Schrift in Cream. Der zweizeilige
       Umbruch haelt beide Zeilen im linken, dichteren Verlaufsbereich. */
    .hero .eyebrow {
        color: var(--cream);
        line-height: 1.7;
    }
    /* Auf Telefonen brach die Eyebrow durch die weite Laufweite auf drei
       Zeilen ("KEROLINA USA-RUNDREISEN-" / "MANUFAKTUR ·" / "RUNDREISE
       W-1335"). Enger gesetzt passt der Manufakturname in eine Zeile und
       die Rundreise-ID steht als zweite darunter. */
    @media (max-width: 520px) {
        .hero .eyebrow {
            font-size: .72rem;
            letter-spacing: .1em;
        }
        .hero .eyebrow::before {
            width: 18px;
            margin-right: 9px;
        }
    }
    .hero h1 {
        font-size: clamp(2rem, 4.6vw, 3.2rem);
        margin: 6px 0 8px;
        text-wrap: balance;
    }
    .hero__sub {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.9vw, 1.25rem);
        color: var(--gold);
        margin-bottom: 14px;
    }
    /* Der emotionale Satz. Volles Cream statt cream-80: Er steht auf dem
       Bild und ist die einzige Stelle der Seite, an der Stimmung Text
       ist – dort darf der Kontrast nicht abgesenkt sein. */
    .hero__claim {
        font-family: var(--font-display);
        font-size: clamp(1.02rem, 1.5vw, 1.2rem);
        line-height: 1.5;
        color: var(--cream);
        max-width: 32em;
        margin-bottom: 26px;
    }
    .hero__ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 13px;
    }
    /* Preisanker: bleibt im ersten Bildschirm und nennt beide Zahlen. Der
       Gesamtpreis fuer zwei Reisende ist die Zahl, die zaehlt – nur
       "ab … p. P." erzeugt beim Angebot einen Schock
       (04-conversion-psychology.md, §3). Das Preisdetail steht in der
       Orientierungszone darunter. */
    /* 32em statt 36em: Der Kasten des Preisankers reichte bei 981 px bis
       6 px in die Bildlegende hinein. Gemessen kollidierten die Glyphen
       noch nicht, aber 6 px sind keine Toleranz – eine andere Ersatz-
       schrift oder ein Wort mehr genuegen. 32em laesst an der engsten
       Desktopbreite rund 140 px Luft. */
    .hero__preis {
        margin-top: 22px;
        max-width: 32em;
        padding-left: 15px;
        border-left: 2px solid var(--gold);
    }
    .hero__preis strong {
        display: block;
        font-size: 1.02rem;
        color: var(--gold);
    }
    .hero__preis span {
        display: block;
        margin-top: 3px;
        font-size: .88rem;
        color: var(--cream);
    }
    /* Der Preisblock ist seit 19.08.2026 zweigeteilt: Ankerzeile vor den
       Schaltflaechen, Preisdetail dahinter (Begruendung und Messwerte am
       Markup). Beide behalten die gemeinsame Grundform oben; hier stehen
       nur die beiden Unterschiede.

       Die Goldkante traegt allein die Ankerzeile. Zwei Kanten ober- und
       unterhalb des Knopfpaares waeren zwei gleich laute Akzente um das
       Element herum, das der lauteste sein soll – und Gold ist in diesem
       System Linienfarbe fuer EINE Betonung, nicht fuer eine Klammer
       (02-design-system-2027.md, 2.2). Der Einzug bleibt bei beiden
       gleich, damit Anker und Detail trotz der Knoepfe dazwischen auf
       derselben Textkante stehen. */
    .hero__preis--anker {
        /* 12 px und nicht der Abstand des Absatzes darueber (26 px): Der
           Anker gehoert zur Handlung, nicht zum Stimmungssatz – die
           engere Bindung nach unten macht Preis und Knopf zu einer
           Gruppe. Der Wert ist ausserdem gemessen: Bei 18 px endet der
           Haupt-CTA auf 390 x 844 fuenf Pixel unter der Falz. */
        margin-bottom: 12px;
    }
    .hero__preis--detail {
        margin-top: 16px;
        border-left-color: transparent;
    }
    /* Bildlegende: nennt Motiv und Etappe. Damit traegt das Bild seine
       Aussage als echter Text – das <img> selbst bleibt dekorativ
       (alt=""), weil der sichtbare Text die Reise schon erklaert. */
    .hero__legende {
        position: relative;
        margin-top: 26px;
        font-size: .76rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--cream);
        opacity: .74;
    }
    @media (min-width: 981px) {
        .hero {
            --hero-bild-h: 100%;
            min-height: clamp(540px, 60vh, 640px);
            padding: clamp(110px, 15vh, 170px) 0 clamp(38px, 4.6vh, 56px);
        }
        .hero__bild img {
            object-position: 50% 46%;
        }
        /* Zwei Verlaufsebenen. Die zweite ist bewusst SEITLICH und nicht
           diagonal: Der Text laeuft vom oberen bis zum unteren Rand der
           linken Spalte, eine Diagonale verdichtet aber nur eine Ecke –
           gemessen fielen Eyebrow, H1 und Subline damit am hellen
           Horizont durch (2,3:1 bis 1,8:1). Seitlich ist die linke Spalte
           auf ihrer ganzen Hoehe dicht, waehrend die rechte Bildhaelfte
           mit Tafelbergen und Abendlicht offen bleibt.
           CSS malt die zuerst genannte Ebene oben. */
        .hero__bild::after {
            background-image:
                linear-gradient(to top,
                    var(--plum) 0%,
                    rgba(42, 28, 51, .95) 10%,
                    rgba(42, 28, 51, .88) 26%,
                    rgba(42, 28, 51, .78) 40%,
                    rgba(42, 28, 51, .60) 52%,
                    rgba(42, 28, 51, .34) 66%,
                    rgba(42, 28, 51, .10) 85%,
                    rgba(42, 28, 51, 0) 100%),
                linear-gradient(to right,
                    rgba(30, 17, 34, .90) 0%,
                    rgba(30, 17, 34, .80) 24%,
                    rgba(30, 17, 34, .58) 42%,
                    rgba(42, 28, 51, .26) 58%,
                    rgba(42, 28, 51, .05) 74%,
                    rgba(42, 28, 51, 0) 86%);
        }
        /* Auf dem Desktop steht die Legende als Bildnachweis am unteren
           rechten Bildrand, nicht im Textfluss. Dort ist der Verlauf
           dicht. Die Breitenbegrenzung haelt sie vom Preisanker frei –
           der endet bei 36em am linken Satzrand. */
        .hero__legende {
            position: absolute;
            right: 24px;
            bottom: 10px;
            max-width: 340px;
            margin-top: 0;
            text-align: right;
        }
    }
    /* ==================================================================
       ORIENTIERUNGSZONE – Fortsetzung des Hero, nicht neue Seite
       ------------------------------------------------------------------
       Traegt alles Rationale, das vorher in der rechten Hero-Spalte und
       im langen Hero-Absatz stand: Routenkarte, Bundesstaatenfolge,
       Reisedaten, Preisdetail, Sylvia-Hinweis, Merken/Teilen. Gleiche
       Pflaumenflaeche wie der Hero-Auslauf – die Kante zwischen beiden
       ist bewusst unsichtbar. Die Goldlinie kommt erst an der Trustbar
       (deren border-top) und schliesst die dunkle Eroeffnung ab.
       ================================================================== */
    /* Bewusst deutlich flacher gepolstert als eine .section: Die Zone ist
       die Fortsetzung des Hero, keine eigene Sektion. Volle
       Sektionsabstaende haetten den Weg zu "Fuer wen ist diese Reise
       ideal?" ohne inhaltlichen Gewinn verlaengert. */
    .orient {
        position: relative;
        overflow: hidden;
        background: var(--plum);
        color: var(--cream);
        padding: clamp(22px, 2.4vw, 28px) 0 clamp(28px, 3vw, 36px);
    }
    /* Die gestrichelte Routenlinie stand vorher im Hero. Ueber dem Foto
       waere sie Unruhe; neben der Routenkarte ist sie Motiv. */
    .orient__linie {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .3;
    }
    /* Zeilenabstand bewusst kleiner als der Spaltenabstand: Zwischen
       Kartenblock und Nebenzeile genuegen 26 px, waehrend die Spalten
       Luft brauchen. Mit einheitlichem gap kostete die Nebenzeile 46 px
       zusaetzlichen Weg ohne Inhalt. */
    .orient__grid {
        position: relative;
        display: grid;
        grid-template-columns: minmax(240px, 330px) 1fr;
        gap: 26px clamp(24px, 3.4vw, 46px);
        align-items: start;
    }
    .orient__karte {
        margin: 0;
    }
    /* Die Routenkarte ist eine Aquarell-Illustration: immer vollstaendig
       zeigen, nie beschneiden (13-image-guidelines.md, §1.2). Der weisse
       Grund ist der Illustrationsgrund selbst. */
    .orient__karte img {
        width: 100%;
        height: auto;
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow);
    }
    .orient__karte figcaption {
        margin-top: 12px;
        font-size: .8rem;
        letter-spacing: .05em;
        line-height: 1.6;
        color: var(--gold);
    }
    .orient__lead {
        font-size: 1rem;
        color: var(--cream-80);
        max-width: var(--measure);
    }
    .orient__fakten {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 22px;
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid var(--gold-25);
    }
    .orient__fakten dt {
        font-size: .74rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--gold);
    }
    .orient__fakten dd {
        margin: 2px 0 0;
        font-size: .95rem;
        color: var(--cream);
    }
    .orient__preisnote {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--gold-25);
        font-size: .9rem;
        color: var(--cream-80);
    }
    .orient__preisnote strong {
        color: var(--gold);
    }
    /* Sylvia-Hinweis und Merken/Teilen sind beide Nebenaktionen. Sie
       laufen ueber die ganze Rasterbreite statt in der rechten Spalte:
       Zusammen brauchen sie rund 840 px und haetten in der Spalte auf
       zwei Zeilen gebrochen. Ueber die volle Breite stehen sie auf einer
       Zeile und nutzen zugleich die Flaeche neben der Karte, die sonst
       leer bliebe. */
    .orient__neben {
        grid-column: 1 / -1;
        padding-top: 16px;
        border-top: 1px solid var(--gold-25);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 36px;
    }
    /* Die Nebenzeile traegt ihre Goldlinie selbst. Der Baustein
       .hero__sylvia bringt eine eigene mit – zwei Linien uebereinander
       wirken wie ein Fehler. Der Reset braucht hier zwei Klassen, weil
       .hero__sylvia weiter unten im Stylesheet steht und bei gleicher
       Spezifitaet sonst gewinnt. */
    .orient .orient__neben > * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    .orient .orient__neben .hero__sylvia {
        flex: 0 1 auto;
    }
    @media (max-width: 860px) {
        .orient__grid {
            grid-template-columns: 1fr;
        }
        .orient__karte {
            max-width: 400px;
        }
        .orient__fakten {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 420px) {
        .orient__fakten {
            grid-template-columns: 1fr;
            gap: 13px;
        }
    }/* Trustbar */
    /* Trustbar = Scharnier zwischen Hero und Inhalt. Die Goldlinien
       oben und unten fassen sie als eigene Stufe und leiten in die
       erste helle Sektion ueber. */
    .trustbar {
        background: var(--ink);
        color: var(--cream);
        border-top: 1px solid var(--gold-25);
        border-bottom: 1px solid var(--gold-25)
    }
    .trustbar__inner {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
        padding: 26px 24px;
        max-width: var(--maxw);
        margin: 0 auto;
        text-align: center;
    }
    .trustbar__item strong {
        display: block;
        font-family: var(--font-display);
        font-size: .98rem;
        color: var(--gold)
    }
    .trustbar__item span {
        font-size: .8rem;
        color: var(--cream-80)
    }
    @media (max-width: 1080px) {
        .trustbar__inner {
            grid-template-columns: repeat(3, 1fr)
        }
    }
    /* Telefone: eine Spalte, linksbuendig, Goldwort ueber dem Text.
       Das zweispaltige Raster erzeugte hier 324 px Hoehe – 38 % eines
       390-px-Bildschirms – fuer fuenf Halbsaetze, davon 78 % Leerflaeche.
       Ursache waren drei Dinge, die alle nur mobil schaden:
       zentrierter Satz (jede der zehn Zeilen beginnt woanders, nichts
       ist scanbar), Spalten von 165 px (vier der fuenf Aussagen brachen
       auf zwei bis drei Zeilen um) und eine verwaiste fuenfte Zelle.

       Zwischenstand 08/2026 war ein Run-in: Goldwort und Satz in einer
       Zeile. Das war mit 231 px die kompakteste Loesung, hatte aber
       einen Rest: Weil die Goldwoerter unterschiedlich breit sind,
       begann der Satz in jeder Zeile woanders, und auf 320 px blieb
       rechts neben dem Goldwort ein halbleerer Zeilenrest stehen.

       Jetzt steht das Goldwort ueber seinem Satz. Damit beginnt jede
       einzelne Zeile des Blocks auf derselben Kante – Label wie Text.

       Die erste Fassung dieser Stapelung war mit 372 px zu luftig: Sie
       verwechselte Weissraum mit Hochwertigkeit. Entscheidend ist nicht,
       wie viel Abstand da ist, sondern dass er ungleich verteilt ist.
       Das Paar Goldwort→Satz ist deshalb auf null gezogen (kein
       margin-bottom, nur die Zeilenkaesten liegen aneinander, rund 6 px
       optisch), der Abstand zwischen den Punkten steht bei 18 px.
       Verhaeltnis rund 1:3 – dadurch liest der Blick vier Paare und
       nicht acht gleichrangige Zeilen, und der Block ist 48 px flacher
       als die luftige Fassung.
       Ab 641 px greift diese Regel nicht – Tablet und Desktop bleiben
       unveraendert (Blockhoehe 234/206/136 px unveraendert geprueft). */
    @media (max-width: 640px) {
        .trustbar__inner {
            grid-template-columns: 1fr;
            gap: 18px;
            text-align: left;
            padding: 20px 24px 22px;
        }
        /* Ohne diese Zeile erben die Spans den 26,4-px-Zeilenkasten des
           16-px-Elternteils, obwohl die Schrift 13,6 px misst. Jede
           Umbruchzeile kostete dadurch rund 7 px geschenkte Hoehe. */
        .trustbar__item {
            line-height: 1.45;
        }
        .trustbar__item strong {
            display: block;
            line-height: 1.25;
        }
        /* .85rem statt .8rem: Der Wert .8rem ist laut
           02-design-system-2027.md, 3.2 der Eyebrow vorbehalten;
           fuer Kleintext nennt dieselbe Tabelle .85–.92rem. Einspaltig
           ist der Platz dafuer da, ohne dass der Block hoeher wird.
           Desktop bleibt bei .8rem – dort waeren die Spalten zu schmal. */
        .trustbar__item span {
            font-size: .85rem;
            /* Etwas offener als das Goldwort (1.25): Der Satz soll ruhiger
               laufen als sein Label, sonst konkurrieren beide. 1.45 statt
               der zuvor gesetzten 1.55 – bei zwei Zeilen war der Zeilen-
               abstand innerhalb eines Satzes sonst fast so gross wie der
               Abstand zum naechsten Punkt. */
            line-height: 1.45;
            /* Derselbe Rasterschutz, den der Abschnitt weiter unten fuer
               Fliesstext setzt – dort ist span nicht aufgefuehrt, weil das
               zweispaltige Raster den Fall nie erzeugt hat. Einspaltig und
               bei 200 % Textzoom ragte "Buchungsabsicherung" auf 320 px um
               16 px ueber den Rand. "anywhere" statt "break-word", weil nur
               so die Mindestbreite mitgerechnet wird. Bei normaler
               Schriftgroesse bricht nichts – der Umbruch greift erst, wenn
               das Wort sonst nicht in die Zeile passt. */
            overflow-wrap: anywhere;
        }
        /* Mobil ausgeblendete Aussage – Begruendung am Markup.
           Rueckgaengig: diese vier Zeilen entfernen. */
        .trustbar__item--mobil-aus {
            display: none;
        }
    }
    /* Gesetzte Umbrueche in den beiden langen Erlaeuterungen, nur mobil.
       Der automatische Umbruch trennte "Deutsche Buchungsabsicherung bei /
       Pauschalreisen" und liess "Pauschalreisen" als Rest stehen; gesetzt
       ist jede Zeile eine Sinneinheit. Der Block sieht dadurch von 320 bis
       640 px identisch aus – kein Zwischenzustand, der nur auf einer
       Geraetebreite gut aussieht (wichtig bei rund 200 Seiten).
       Umgekehrte Logik als sonst: Das <br> steht per Vorgabe im Markup und
       wird ab 641 px ausgeblendet. display:none an einem <br> entfernt den
       Umbruch zuverlaessig; der umgekehrte Weg (ausblenden und mobil
       wieder einschalten) ist es nicht.
       Kein text-wrap: balance – In-App-Browser kennen es nicht. */
    @media (min-width: 641px) {
        .tb-umbruch {
            display: none;
        }
    }/* Für wen */
    /* ================================================================
       KARTENSYSTEM – eine Familie, drei Rollen
       ----------------------------------------------------------------
       Basiskarte  .card-surface : weisse Flaeche, Haarlinie, ruhiger
                                   Schatten, gleicher Radius
       Akzentkarte .card-accent  : zusaetzlich schmale Goldkante links
       Empfehlung  .paket-card--best : Goldrahmen + staerkere Anhebung
       Gleiche Linienfarbe, gleicher Radius, gleiche Schattenformel –
       dadurch gehoeren Eignungspruefung, Hoehepunkte, Routenkapitel,
       Pakete, Machbarkeitspruefung, FAQ, Etappen und Formularbloecke
       sichtbar zusammen, obwohl sie unterschiedliche Aufgaben haben.
       ================================================================ */
    .card-surface,
    .fit-card,
    .legal-box,
    .hl-card,
    .ueberblick-card,
    .paket-card,
    .review-card,
    .faq-item,
    .etappe details,
    .route-legende,
    #anfrage-form fieldset {
        background: var(--card-bg);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
    }
    /* Akzentkarten tragen die Goldkante des Hero weiter. */
    .card-accent,
    .fit-card,
    .legal-box {
        border-left: 3px solid var(--gold-deep)
    }
    /* Nur interaktive Karten reagieren auf Hover. */
    .paket-card, .faq-item, .etappe details {
        transition: border-color .2s, box-shadow .2s
    }
    .faq-item:hover, .etappe details:hover {
        border-color: var(--gold-45)
    }
    .paket-card:hover {
        border-color: var(--gold-45);
        box-shadow: var(--shadow)
    }
    .fit-card {
        padding: 30px 34px;
        max-width: var(--block);
    }
    .fit-card ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 32px;
        margin-top: 14px
    }
    .fit-card li {
        padding-left: 26px;
        position: relative;
        font-size: .96rem
    }
    .fit-card li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--gold-deep);
        font-weight: 700
    }
    .fit-card__not {
        margin-top: 22px;
        border-top: 1px solid var(--hairline);
        padding-top: 18px;
        font-size: .92rem;
        color: var(--ink-70)
    }
    .fit-card__not a {
        font-weight: 600;
        color: var(--plum)
    }
    @media (max-width: 700px) {
        .fit-card ul {
            grid-template-columns: 1fr
        }
    }/* Highlights */
    .hl-grid {
        /* Steuergroessen des Bildrahmens - zentral fuer alle Highlight-Karten.
           --hl-media-ratio: Rahmenformat, --hl-media-max: Hoehendeckel. */
        --hl-media-ratio: 4 / 3;
        --hl-media-max: 260px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 32px
    }
    .hl-card {
        overflow: hidden;
    }
    /* Illustrationen vollstaendig zeigen, nie beschneiden:
       Der Rahmen ist eine ruhige, fluide Flaeche (aspect-ratio + Hoehendeckel),
       die Zeichnung wird darin per contain komplett und unverzerrt zentriert.
       Weisser Rahmengrund = gleicher Ton wie der Illustrationsgrund, dadurch
       bleibt der Ausgleichsraum optisch unsichtbar. */
    .hl-card img {
        width: 100%;
        aspect-ratio: var(--hl-media-ratio);
        max-height: var(--hl-media-max);
        object-fit: contain;
        object-position: center;
        background: var(--card-bg);
        padding: 10px 12px;
        border-bottom: 1px solid var(--line)
    }
    .hl-card__body {
        padding: 18px 20px 20px
    }
    .hl-card h3 {
        font-size: 1rem;
        margin-bottom: 6px
    }
    .hl-card p {
        font-size: .87rem;
        color: var(--ink-80)
    }
    @media (max-width: 1080px) {
        .hl-grid {
            grid-template-columns: 1fr 1fr
        }
    }
    @media (max-width: 560px) {
        .hl-grid {
            grid-template-columns: 1fr
        }
    }/* Pakete */
    .paket-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin-top: 34px
    }
    .paket-card {
        position: relative;
        padding: 28px 26px;
        display: flex;
        flex-direction: column;
    }
    .paket-card--best {
        border: 1.5px solid var(--gold-deep);
        box-shadow: var(--shadow-lift)
    }
    /* Die frueher hier stehende .paket-card__badge (goldene Kapsel ueber der
       Kartenkante) ist entfallen. Ihre Nachfolgerin .paket-card__empfehlung
       steht im Redesign-Layer weiter unten. */
    .paket-card h3 {
        margin-bottom: 6px
    }
    .paket-card__pos {
        font-size: .88rem;
        color: var(--ink-70);
        margin-bottom: 14px
    }
    .paket-card__preis {
        font-family: var(--font-display);
        font-size: 1.7rem;
        color: var(--plum);
        margin-bottom: 2px
    }
    .paket-card__preis small {
        font-size: .85rem;
        font-family: var(--font-body);
        color: var(--ink-70)
    }
    .paket-card ul {
        list-style: none;
        display: grid;
        gap: 8px;
        margin: 18px 0 22px;
        flex: 1
    }
    .paket-card li {
        padding-left: 24px;
        position: relative;
        font-size: .9rem
    }
    .paket-card li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--gold-deep);
        font-weight: 700
    }
    .paket-card .btn {
        width: 100%
    }
    /* Fussnote zum Paketvergleich: bewusst schmale Lesebreite, durch
       eine Haarlinie als Anhang der Karten ausgewiesen statt frei im
       Weissraum stehend. */
    .paket-hinweis {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
        font-size: .85rem;
        color: var(--ink-70);
        max-width: 880px
    }
    @media (max-width: 980px) {
        .paket-grid {
            grid-template-columns: 1fr;
            gap: 28px
        }
    }/* Conversion-Brücke */
    .bridge {
        background: var(--plum);
        color: var(--cream);
        border-radius: var(--radius);
        border: 1px solid var(--gold-45);
        padding: 36px 38px;
        box-shadow: var(--shadow);
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }
    .bridge h2 {
        color: var(--gold);
        margin-bottom: 12px
    }
    .bridge p {
        color: var(--cream-80);
        max-width: 680px;
        margin: 0 auto
    }/* Route / Timeline */
    .route-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 26px 0 8px
    }
    .route-toolbar button {
        background: var(--card-bg);
        border: 1px solid var(--line-strong);
        color: var(--plum);
        font-family: var(--font-body);
        font-weight: 600;
        font-size: .9rem;
        border-radius: var(--radius-sm);
        padding: 9px 16px;
        cursor: pointer;
        min-height: 42px;
        box-shadow: var(--shadow-soft);
        transition: border-color .2s;
    }
    .route-toolbar button:hover {
        border-color: var(--gold-deep)
    }
    .timeline {
        position: relative;
        margin-top: 26px;
        max-width: var(--block)
    }
    .timeline::before {
        content: "";
        position: absolute;
        left: 23px;
        top: 10px;
        bottom: 10px;
        width: 2px;
        background: linear-gradient(180deg, var(--gold-45), var(--gold-25));
    }
    .etappe {
        position: relative;
        padding: 0 0 18px 66px
    }
    .etappe::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 20px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--plum);
        border: 3px solid var(--gold);
    }
    .etappe details {
        overflow: hidden;
    }
    .etappe summary {
        cursor: pointer;
        list-style: none;
        padding: 16px 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
    }
    .etappe summary::-webkit-details-marker {
        display: none
    }
    .etappe summary::after {
        content: "+";
        font-family: var(--font-display);
        font-size: 1.3rem;
        color: var(--gold-deep);
        margin-left: auto;
    }
    .etappe details[open] summary::after {
        content: "–"
    }
    .etappe__tag {
        font-weight: 700;
        font-size: .82rem;
        color: var(--cream);
        background: var(--plum);
        border-radius: var(--radius-sm);
        padding: 4px 10px;
        white-space: nowrap;
    }
    .etappe__titel {
        font-weight: 600;
        font-size: .98rem
    }
    .etappe__meta {
        font-size: .82rem;
        color: var(--ink-70);
        white-space: nowrap
    }
    .etappe__kat {
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--gold-deep);
        border: 1px solid var(--gold-45);
        border-radius: 999px;
        padding: 2px 10px;
    }
    .etappe__body {
        display: grid;
        grid-template-columns: 1fr 260px;
        gap: 22px;
        padding: 0 20px 20px;
        border-top: 1px solid var(--line);
    }
    .etappe__body ul {
        list-style: none;
        display: grid;
        gap: 7px;
        margin: 16px 0 10px
    }
    .etappe__body li {
        padding-left: 22px;
        position: relative;
        font-size: .92rem
    }
    .etappe__body li::before {
        content: "·";
        position: absolute;
        left: 6px;
        color: var(--gold-deep);
        font-weight: 700;
        font-size: 1.4rem;
        line-height: 1
    }
    .etappe__hotel {
        font-size: .86rem;
        font-weight: 600;
        color: var(--plum)
    }
    .etappe__body img {
        border-radius: var(--radius-sm);
        aspect-ratio: 3/2;
        object-fit: cover;
        margin-top: 16px
    }
    /* Bildunterschrift der Etappe. Sie traegt den Ortsnamen aus dem
       Betreiberbestand und steht dicht am Bild -- 8px statt der 12px der
       Routenkarte, weil das Etappenbild klein ist und ein groesserer Abstand
       die Zuordnung loesen wuerde.

       Kein Grossbuchstabensatz: In Versalien liest sich eine Ortsangabe wie
       eine technische Bildkennung. Pflaume statt Gold, weil Gold auf hellen
       Flaechen nur als Linie eingesetzt wird (02-design-system-2027.md, 2.2).

       Die Figur uebernimmt den Aussenabstand des Bildes; das Bild selbst
       bekommt ihn deshalb hier abgenommen, sonst stuende er zweimal. */
    .etappe__figur {
        margin: 0;
        margin-top: 16px
    }
    .etappe__figur img {
        margin-top: 0
    }
    .etappe__bildunterschrift {
        margin-top: 8px;
        font-size: .78rem;
        line-height: 1.5;
        letter-spacing: .03em;
        color: var(--ink-70)
    }
    @media (max-width: 720px) {
        .etappe__body {
            grid-template-columns: 1fr
        }
        /* Deckel auf 340px, aber nie breiter als die Karte: das feste
           max-width hat auf sehr schmalen Geraeten die globale Regel
           img{max-width:100%} ausgehebelt und das Bild aus der Karte
           herauslaufen lassen. */
        .etappe__body img {
            max-width: min(340px, 100%)
        }
        /* Auf schmalen Geraeten deckelt die FIGUR die Breite, nicht das Bild:
           sonst waere die Unterschrift breiter als das Bild darueber und die
           Zuordnung ginge verloren. */
        .etappe__body > .etappe__figur {
            max-width: min(340px, 100%)
        }
        .etappe__figur img {
            max-width: 100%
        }
        .etappe {
            padding-left: 54px
        }
        .timeline::before {
            left: 17px
        }
        .etappe::before {
            left: 10px
        }
    }/* Beraterin */
    .beraterin__grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 40px;
        align-items: start
    }
    .beraterin__figure img {
        border-radius: var(--radius);
        box-shadow: var(--shadow)
    }
    .beraterin__figure figcaption {
        margin-top: 12px;
        font-size: .9rem;
        color: var(--cream-80)
    }
    .beraterin__quote {
        border-left: 3px solid var(--gold);
        padding: 6px 0 6px 18px;
        margin: 18px 0;
        font-style: italic;
        max-width: 640px
    }
    .beraterin__text {
        font-size: .95rem;
        color: var(--cream-80);
        max-width: 640px
    }
    .beraterin__ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 22px
    }
    /* Feinausgleich (23.08.2026): gleicht die 19 px aus, die die Signatur
       ab 1024 px kostet, weil das 56-px-Bild dort hoeher ist als der
       zweizeilige Satz daneben. Nur oberhalb 1024 px – darunter kostet
       die Signatur nichts und der Abstand bleibt unveraendert. */
    @media (min-width: 1024px){
        .beraterin__ctas{ margin-top: 14px; }
        .beraterin__kanaele{ margin-top: 10px; }
    }
    @media (max-width: 860px) {
        .beraterin__grid {
            grid-template-columns:1fr
        }
        .beraterin__figure {
            max-width: 280px
        }
    }/* Bewertungen */
    .review-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 30px
    }
    .review-card {
        padding: 24px 26px;
    }
    .review-card blockquote {
        font-size: .93rem;
        font-style: italic;
        color: var(--ink-80)
    }
    /* Das Datum steht in der Signatur, traegt aber nicht deren Gewicht:
       Eine Jahresangabe ist ein Beleg, keine Aussage. */
    .review-card__datum {
        font-weight: 400;
        color: var(--ink-70);
    }
    /* Herkunft des Zitatblocks. Ruhig, unter dem Raster, ohne eigenen
       Verweis – den traegt der Knopf darunter. */
    .review-quelle {
        max-width: var(--measure);
        margin-top: 18px;
        font-size: .9rem;
        color: var(--ink-70);
    }
    .review-card cite {
        display: block;
        margin-top: 10px;
        font-style: normal;
        font-weight: 600;
        font-size: .88rem
    }
    .review-card__stars {
        color: var(--gold-deep);
        letter-spacing: 2px;
        font-size: .88rem;
        margin-top: 4px
    }
    @media (max-width: 860px) {
        .review-grid {
            grid-template-columns: 1fr
        }
    }/* FAQ */
    .faq-list {
        margin-top: 28px;
        max-width: var(--block);
        display: grid;
        gap: 12px;
    }
    .faq-item {
        overflow: hidden;
    }
    .faq-item summary {
        cursor: pointer;
        list-style: none;
        padding: 16px 20px;
        font-weight: 600;
        font-size: .98rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .faq-item summary::-webkit-details-marker {
        display: none
    }
    .faq-item summary::after {
        content: "+";
        font-family: var(--font-display);
        font-size: 1.3rem;
        color: var(--gold-deep);
        margin-left: auto;
    }
    .faq-item[open] summary::after {
        content: "–"
    }
    .faq-item p {
        padding: 14px 20px 18px;
        font-size: .95rem;
        color: var(--ink-80);
        border-top: 1px solid var(--line);
    }
    .faq-item p a {
        font-weight: 600;
        color: var(--plum)
    }/* Vorteile */
    .vorteil-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 30px
    }
    .vorteil-card {
        background: var(--cream-06);
        border: 1px solid var(--gold-25);
        border-radius: var(--radius);
        padding: 20px 18px;
        text-align: center;
    }
    .vorteil-card h3 {
        font-size: .92rem;
        font-family: var(--font-body);
        font-weight: 700;
        color: var(--gold);
        margin-top: 8px
    }
    .vorteil-card p {
        font-size: .82rem;
        color: var(--cream-80);
        margin-top: 6px
    }
    .vorteil-card__icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--gold);
        color: var(--ink);
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    @media (max-width: 1080px) {
        .vorteil-grid {
            grid-template-columns: 1fr 1fr
        }
    }/* Rechtsklarheit */
    .legal-box {
        padding: 30px 34px;
        max-width: var(--block);
    }
    .legal-box h2 {
        font-size: 1.5rem
    }
    .legal-box p {
        margin-top: 10px;
        font-size: .96rem;
        color: var(--ink-80)
    }/* Machbarkeitsprüfung */
    .pruef-intro {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: var(--block);
    }
    .pruef-schritt {
        margin-top: 18px;
        font-size: .92rem;
        color: var(--ink-70);
        max-width: var(--block);
    }
/* Formular */
    .formwrap {
        max-width: 900px
    }
    .tour-box {
        border-radius: var(--radius);
        padding: 20px 24px;
        margin-bottom: 26px;
        background: var(--plum);
        color: var(--cream);
        border: 1px solid var(--gold-45);
        box-shadow: var(--shadow);
    }
    .tour-box strong {
        color: var(--gold)
    }
    .tour-box p {
        font-size: .95rem
    }
    fieldset {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--card-bg);
        box-shadow: var(--shadow-soft);
        padding: 26px 26px 20px;
        margin-bottom: 24px;
        min-inline-size: 0;
    }
    legend {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.1rem;
        padding: 6px 16px;
        background: var(--plum);
        color: var(--cream);
        border-radius: var(--radius-sm);
    }
    .field {
        margin-bottom: 18px
    }
    .field label {
        display: block;
        font-weight: 600;
        font-size: .94rem;
        margin-bottom: 6px
    }
    /* Pflaume statt Gold: Der Stern steht auf hellen Feldflächen,
       Gold trägt dort nur 2,4:1 (Regel: Gold nie als Textfarbe auf Hell). */
    .req {
        color: var(--plum)
    }
    .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field input[type="number"], .field select, .field textarea {
        width: 100%;
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--ink);
        background: var(--card-bg);
        border: 1.5px solid var(--field-border);
        border-radius: var(--radius-sm);
        padding: 12px 14px;
        min-height: 48px;
    }
    .field textarea {
        min-height: 110px;
        resize: vertical
    }
    .field input:focus, .field select:focus, .field textarea:focus {
        outline: 3px solid var(--plum);
        outline-offset: 1px;
        border-color: var(--plum);
    }
    .field .help {
        font-size: .84rem;
        color: var(--plum);
        opacity: .85;
        margin-top: 5px
    }
    .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
        border-color: var(--gold-deep);
        border-width: 2.5px
    }
    .field .field-error {
        display: none;
        font-size: .85rem;
        font-weight: 600;
        background: var(--gold-12);
        border-left: 3px solid var(--gold-deep);
        padding: 6px 10px;
        margin-top: 6px;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .field.is-invalid .field-error {
        display: block
    }
    .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px
    }
    @media (max-width: 640px) {
        .field-row {
            grid-template-columns: 1fr
        }
    }
    .radio-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px
    }
    .radio-row label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        border: 1.5px solid var(--field-border);
        border-radius: var(--radius-sm);
        padding: 11px 16px;
        cursor: pointer;
        min-height: 48px;
    }
    .radio-row input {
        accent-color: var(--gold-deep);
        width: 18px;
        height: 18px
    }
    .check-label {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: .9rem;
        font-weight: 500
    }
    .check-label input {
        margin-top: 4px;
        width: 18px;
        height: 18px;
        accent-color: var(--gold-deep)
    }
    .form-errors {
        background: var(--card-bg);
        border: 2px solid var(--gold-deep);
        border-radius: var(--radius);
        padding: 16px 20px;
        margin-bottom: 22px;
        box-shadow: var(--shadow-soft);
    }
    .form-errors ul {
        padding-left: 20px;
        font-size: .93rem
    }
    .hp-field {
        position: absolute !important;
        left: -9999px !important;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden
    }
    .tour-box__sylvia {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 14px;
        border-top: 1px solid var(--gold-25);
        padding-top: 14px;
    }
    .tour-box__sylvia img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--gold)
    }
    .tour-box__sylvia p {
        font-size: .88rem;
        color: var(--cream-80)
    }
    .tour-box__sylvia strong {
        color: var(--gold)
    }
    /* Sanfte Conversion-Bruecke: warme Goldflaeche statt Karte, damit
       sie sich von den Paketkarten absetzt, ohne lauter zu werden. */
    .paket-unsicher {
        margin-top: 28px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 22px;
        background: var(--gold-12);
        border: 1px solid var(--gold-45);
        border-radius: var(--radius);
        padding: 22px 26px;
        max-width: var(--block);
    }
    .paket-unsicher p {
        font-size: .94rem;
        flex: 1;
        min-width: 240px
    }
    .submit-steps {
        list-style: none;
        display: grid;
        gap: 7px;
        margin: 0 0 20px
    }
    .submit-steps li {
        padding-left: 26px;
        position: relative;
        font-size: .9rem;
        color: var(--cream-80)
    }
    .submit-steps li::before {
        content: attr(data-step);
        position: absolute;
        left: 0;
        top: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--gold);
        color: var(--ink);
        font-size: .7rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .submit-zone {
        background: var(--plum);
        color: var(--cream);
        border: 1px solid var(--gold-45);
        border-radius: var(--radius);
        padding: 30px;
        box-shadow: var(--shadow);
    }
    .submit-zone h3 {
        color: var(--gold);
        margin-bottom: 12px
    }
    .submit-zone .btn {
        width: 100%;
        max-width: 420px
    }
    .submit-note {
        margin-top: 12px;
        font-size: .9rem;
        color: var(--cream-80)
    }
    /* Rueckmeldung nach dem Absenden. Steht in .submit-zone, also auf
       Pflaume - Farben deshalb aus der Cremefamilie, nicht aus --ink-*. */
    .submit-hinweis {
        margin-top: 12px;
        padding: 12px 14px;
        border: 1px solid var(--gold-45);
        border-radius: var(--radius-sm);
        background: var(--cream-06);
        font-size: .9rem;
        color: var(--cream);
    }/* Final CTA + Footer */
    .site-footer {
        background: var(--ink);
        color: var(--cream);
        border-top: 1px solid var(--gold-25);
        padding: 60px 0 110px;
        font-size: .92rem
    }
    .site-footer a {
        color: var(--cream);
        text-decoration: none
    }
    .site-footer a:hover {
        color: var(--gold)
    }
    .site-footer__claim {
        font-family: var(--font-display);
        font-size: 1.25rem;
        color: var(--gold);
        max-width: 700px;
        margin-bottom: 36px
    }
    .site-footer__grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
        gap: 32px;
        margin-bottom: 36px
    }
    .site-footer h3 {
        font-size: 1rem;
        color: var(--gold);
        margin-bottom: 14px;
        font-family: var(--font-body);
        font-weight: 700
    }
    .site-footer ul {
        list-style: none;
        display: grid;
        gap: 9px
    }
    .site-footer__legal {
        border-top: 1px solid var(--gold-25);
        padding-top: 22px;
        color: var(--cream-80);
        font-size: .85rem
    }
    @media (max-width: 980px) {
        .site-footer__grid {
            grid-template-columns: 1fr 1fr
        }
    }
    @media (max-width: 560px) {
        .site-footer__grid {
            grid-template-columns: 1fr
        }
    }/* Sticky-CTA mobil */
    .sticky-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        background: var(--plum);
        border-top: 1px solid var(--gold-45);
        padding: 10px 12px;
        display: none;
        align-items: center;
        gap: 8px;
        box-shadow: 0 -6px 20px rgba(30, 17, 34, .35);
    }
    .sticky-cta.is-visible {
        display: flex
    }
    .sticky-cta .btn {
        flex: 1;
        min-height: 44px;
        padding: 10px 8px;
        font-size: .85rem
    }
    .sticky-cta__close {
        background: transparent;
        border: 1px solid var(--gold-45);
        color: var(--cream);
        border-radius: var(--radius-sm);
        /* 44px in beiden Richtungen: Daumen-Zielgröße. Die 6px mehr
           Breite gehen zulasten der zwei flexiblen Buttons daneben. */
        min-width: 44px;
        min-height: 44px;
        cursor: pointer;
        font-size: 1rem;
    }
    @media (min-width: 861px) {
        .sticky-cta {
            display: none !important
        }
    }
    body.has-sticky {
        padding-bottom: 70px
    }
    @media (min-width: 861px) {
        body.has-sticky {
            padding-bottom: 0
        }
    }
    @media (prefers-reduced-motion: reduce) {
        * {
            transition: none !important;
            animation: none !important
        }
        html {
            scroll-behavior: auto
        }
    }

    /* =====================================================================
       KEROLINA W-1335 – REDESIGN-LAYER 2027 ("Quiet Travel Luxury")
       Nur visuelle Ergänzungen/Überschreibungen. Keine Textänderung.
       Nutzt ausschließlich die bestehenden CI-Farb-Tokens.
       ===================================================================== */
    :root{
        /* Schatten- und Linien-Tokens werden seit der Designsprache 2027
           zentral im ersten :root-Block gesetzt und hier nicht mehr
           ueberschrieben. */
        --kat-stadt: var(--plum-mid);
        --kat-natur: var(--gold-deep);
        --kat-kueste: var(--gold);
        --kat-fahrtag: #8a8391;      /* neutraler Grauton, nur f. Lesbarkeit */
        --kat-erholung: #b7a9c2;     /* helle Plum-Abstufung */
    }
    /* ---- Header: ruhigere Hierarchie, Rating/Social visuell abgesetzt ---- */
    .site-header{ background: var(--ink); }
    .site-header__logo img{ height: 50px; }
    .main-nav ul{ align-items:center; gap:2px 14px; }
    @media (min-width:1081px){
        .main-nav li.nav-item--rating{ margin-left:4px; padding-left:10px;
            border-left:1px solid var(--gold-25); }
        .main-nav li.nav-item--social a{ color: var(--cream-80); font-weight:500; }
        .main-nav li.nav-item--social a:hover{ color: var(--gold); }
        .main-nav li.nav-item--rating a{ letter-spacing:1px; font-size:.8rem; }
    }
    /* ---- Seitliche Inhaltsnavigation (nur sehr breite Screens) ----------
       Beschriftung = ausschließlich vorhandene H2-Überschriften (verbatim).

       Integration in die Seite: Sie nutzt exakt die Kartenwerte
       (weisse Flaeche, Haarlinie, Radius, weicher Schatten) und ist damit
       Teil der Kartenfamilie statt eines fremden gelben Kastens. Die
       weisse Flaeche haelt sie auch dann lesbar, wenn im Hintergrund
       gerade eine dunkle Pflaumensektion steht.

       Breakpoint: Der Inhalt ist maximal --maxw breit und mittig. Damit
       die Navigation nie Inhalt ueberdeckt, muss je Seitenrand
       (Viewport - maxw)/2 >= Navbreite + Abstaende sein:
       (1640 - 1200)/2 = 220 >= 180 + 20 + 14. */
    .jumpnav{ display:none; }
    @media (min-width:1640px){
        .jumpnav{
            display:block; position:fixed; top:108px; right:20px; z-index:80;
            width:180px; max-height:74vh; overflow:auto;
            padding:16px 14px;
            background: var(--card-bg);
            border:1px solid var(--line); border-radius: var(--radius);
            box-shadow: var(--shadow-soft);
        }
        /* Solange die Reiseleiste steht, endet die Navigation ueber
           ihr. 74vh allein reicht dafuer nicht: Bei flachen Fenstern
           liegt ihre Unterkante sonst in der Leiste (gemessen
           1920x650: 12 px Ueberschneidung). Der zweite Wert laesst
           108 px Kopfabstand, 73 px Leiste und 20 px Luft frei; bei
           hohen Fenstern gewinnt weiterhin 74vh, die Navigation
           bleibt dort unveraendert. Die Klasse body.hat-reiseleiste
           setzt /includes/reise-conversion-leiste.php. */
        .hat-reiseleiste .jumpnav{ max-height: min(74vh, calc(100vh - 201px)); }
        .jumpnav ul{ list-style:none; display:grid; gap:1px; }
        .jumpnav a{
            display:block; text-decoration:none; font-size:.73rem; line-height:1.4;
            color: var(--ink-70); padding:6px 8px 6px 12px;
            border-left:2px solid var(--line);
            transition: color .2s, border-color .2s, background .2s;
        }
        .jumpnav a:hover, .jumpnav a:focus-visible{
            color: var(--plum); background: var(--gold-12); border-left-color: var(--gold-deep);
        }
        /* Die aktive Markierung macht aus einer Zielliste eine Ortsangabe.
           Ohne sie beantwortet die Sprungnavigation nur "wohin kann ich",
           mit ihr zusaetzlich "wo bin ich" – und das ist auf einer Seite
           dieser Laenge die wichtigere der beiden Fragen.

           Bewusst OHNE Flaeche, obwohl :hover eine traegt: Der aktive
           Punkt steht dauerhaft, der Mauszeiger nur im Moment der
           Beruehrung. Zwei gleich aussehende Zustaende waeren nicht
           unterscheidbar. Gewicht, Farbe und die kraeftigere linke Kante
           genuegen und bleiben ruhig. */
        .jumpnav a[aria-current="true"]{
            color: var(--plum); font-weight: 600; border-left-color: var(--gold-deep);
        }
        @media (forced-colors: active){
            .jumpnav a[aria-current="true"]{ border-left-color: Highlight; }
        }
    }
    /* ---- Sylvia-Hinweis in der Orientierungszone ----
       Die Klasse heisst weiter .hero__sylvia: Sie ist an mehreren Stellen
       des Projekts als Baustein "kleiner Sylvia-Hinweis auf dunkler
       Flaeche" gesetzt und wird hier unveraendert weiterverwendet, nur an
       anderer Stelle im Dokument. */
    .hero__sylvia{
        margin-top:22px; display:flex; align-items:center; gap:12px;
        border-top:1px solid var(--gold-25); padding-top:16px;
    }
    .hero__sylvia img{ width:52px; height:52px; border-radius:50%;
        object-fit:cover; border:1px solid var(--gold-45); flex:0 0 auto; }
    .hero__sylvia figcaption{ font-size:.9rem; color: var(--cream);
        font-family: var(--font-display); }
    /* Hero-CTA-Hierarchie: primär dominant, sekundär zurückgenommen.
       Der Rahmen liegt seit 08/2026 auf gold-45 statt gold-25: Der
       sekundäre Button steht jetzt auf einem Foto, nicht auf einer
       flachen Fläche – bei gold-25 verschwand seine Kante darin. */
    .hero__ctas .btn--outline-light{ padding:10px 16px; font-size:.9rem;
        border-color: var(--gold-45); }
    /* ---- Mobiles CTA-Paar im Hero (08/2026) --------------------------
       Ausgangslage: Der Haupt-CTA war auf dem Telefon 89 px hoch (bei
       320 px sogar 117 px) und damit fast doppelt so hoch wie der
       sekundaere Button mit 48 px. Gemessene Ursachen:

       1. .btn--big ist ein Desktop-Modifier (1.05rem, padding 15/28) und
          wurde mobil nie zurueckgenommen.
       2. .btn setzt keine eigene Zeilenhoehe und erbt deshalb die 1.65
          des Fliesstextes. Bei 16,8 px sind das 27,7 px je Zeile – zwei
          Zeilen ergeben allein 55 px Textblock. Das ist der groesste
          Einzelposten der Bauhoehe, nicht die Schriftgroesse.
       3. 2x28 px seitlicher Innenabstand nehmen bei 346 px Buttonbreite
          16 % der Flaeche und erzwingen einen zu fruehen Umbruch.
       4. .hero__ctas hatte keine mobile Regel: Der Primaerbutton fuellt
          als erstes Flex-Element die Zeile (346 px), der Sekundaerbutton
          rutscht in die naechste Zeile und behaelt seine Inhaltsbreite
          (219 px) – daher die Treppenform.

       Loesung: gestapeltes Paar mit gleicher Breite, ruhigerer Zeilen-
       hoehe und kleinerem Innenabstand. Beide Buttons teilen Breite,
       Kante und Radius und lesen sich dadurch als ein Entscheidungspaar.

       Der Grenzwert 520 px ist derselbe, den der Hero fuer die Eyebrow
       benutzt – kein zusaetzlicher Umbruchpunkt im Seitenraster. */
    @media (max-width: 520px){
        .hero__ctas{
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            /* Deckel gegen die reine Flaechenwirkung: Ab etwa 470 px
               waere der Button sonst ueber 420 px breit und wirkte als
               Balken statt als Schaltflaeche. */
            max-width: 420px;
        }
        .hero__ctas .btn{
            width: 100%;
            font-size: .94rem;
            /* 1.35 statt der geerbten 1.65: In einer Schaltflaeche ist
               die weite Fliesstext-Zeilenhoehe die eigentliche Ursache
               der Bauhoehe. 1.35 bleibt gut lesbar und spart je Zeile
               rund 5 px. */
            line-height: 1.35;
            padding: 12px 16px;
            /* Touchflaeche: 52 px liegen sicher ueber den geforderten
               48 px, auch wenn der Text nur eine Zeile braucht. */
            min-height: 52px;
        }
        .hero__ctas .btn--outline-light{
            font-size: .9rem;
            padding: 11px 16px;
            min-height: 50px;
        }
    }
    /* Umbruchsteuerung des Haupt-CTA.

       Ohne Steuerung verteilt der Browser gierig: Gemessen ueber alle
       Breiten von 320 bis 540 px entsteht zwischen 440 und 490 px genau
       der gemeldete Zustand "… prüfen" / "lassen" – ein einzelnes Wort
       in der zweiten Zeile.

       text-wrap:balance loest das zwar, kennt aber erst Safari ab 17.5.
       Genau die aelteren WebViews sind der Facebook- und Instagram-
       In-App-Browser, aus dem ein grosser Teil des Verkehrs kommt.
       Deshalb steht der Umbruch fest im Markup statt in einer Eigen-
       schaft, die dort ausfaellt: <br class="hero__cta-umbruch">.

       Der Umbruch trennt an der inhaltlich richtigen Stelle – Gegenstand
       ("Diese Rundreise") oben, Zusage ("planen lassen")
       unten. Der Zugaenglichkeitsname bleibt unveraendert, weil <br> nur
       eine Zeilenschaltung ist und nichts zum Textinhalt hinzufuegt.

       Bruchpunkt zweimal neu gemessen am 13.08.2026, weil der Wortlaut
       sich zweimal geaendert hat: erst "unverbindlich pruefen lassen"
       zu "unverbindlich anfragen", dann zu "planen lassen". Der aktuelle
       Wortlaut traegt ab 321 px auf einer Zeile (gemessen 13.08.2026);
       mit derselben rund 10 % Reserve wie zuvor ergibt das 352 px.
       Damit bleibt der Umbruch praktisch nur noch fuer 320-px-Geraete
       aktiv - genau dort, wo der Text ohnehin zweizeilig laeuft und die
       Frage nur ist, WO er bricht. Die Reserve ist kein Puffer aus Vorsicht: Faellt Montserrat
       aus und greift Arial, wird der Wortlaut breiter – ohne Reserve
       braeche er dann ungesteuert und mit "anfragen" allein auf der
       zweiten Zeile. */
    .hero__cta-umbruch{ display: none; }
    @media (max-width: 352px){
        .hero__cta-umbruch{ display: inline; }
    }
    /* Karten-Grundwerte liegen im zentralen Kartensystem (Designsprache
       2027). Hier steht bewusst keine zweite Kartendefinition mehr. */
    /* ---- Umbruch der Hoehepunkte-Ueberschrift --------------------------
       Ohne Steuerung bricht der Browser "Die großen Momente dieser Route"
       nach "dieser" und laesst "Route" allein auf der zweiten Zeile stehen.
       Gemessen 11.08.2026 mit echter Playfair-Metrik, Zeilenbreiten:

         Breite      ohne Umbruch        mit <br>
         320/360 px  247 / 146 px        247 / 146 px   (identisch)
         375-447 px  324 /  69 px        247 / 146 px
         ab 460 px   399 px, einzeilig   247 / 146 px

       Betroffen sind damit genau die verbreitetsten Telefone (390, 412,
       430 px). Unter 375 px bricht der Browser von sich aus richtig, ab
       448 px traegt eine Zeile den vollen Wortlaut - der Haltepunkt 460 px
       liegt bewusst darueber und entspricht dem bereits vorhandenen
       .hero__cta-umbruch, also eine Zahl statt zweier.

       Gleiche Logik wie .tb-umbruch: Das <br> steht per Vorgabe im Markup
       und wird oberhalb ausgeblendet. display:none an einem <br> entfernt
       den Umbruch zuverlaessig; der umgekehrte Weg ist es nicht.
       Kein text-wrap: balance - In-App-Browser kennen es nicht.

       Das Leerzeichen VOR dem <br> im Markup ist Pflicht: Ohne es lautet
       der Accessible Name "Die großen MomentedieserRoute". Die h2 traegt
       das aria-labelledby der Sektion, der Fehler waere also hoerbar. */
    .hl-h-umbruch{ display: inline; }
    @media (min-width: 460px){
        .hl-h-umbruch{ display: none; }
    }
    /* ---- Highlights: redaktionelleres Raster (aufgelockert) ----
       Breite Akzentkarten werden ueber die Modifier-Klasse .hl-card--wide
       ausgezeichnet (nicht mehr ueber Positions-Selektoren), damit die
       Komponente auf weiteren Rundreise-Seiten frei einsetzbar bleibt.
       Die Karte spannt zwei Spalten; ihr Bildrahmen wird entsprechend
       breiter formatiert, ohne die Illustration zu beschneiden. */
    /* ---- Die Rolle gilt auch zwischen 561 und 1080 px --------------------
       Bis 10.08.2026 endete die Rollenkennzeichnung bei 560 px und begann
       erst wieder bei 1081 px. Dazwischen lief die Sektion als 2x4-Raster aus
       acht gleichen Kaesten – dasselbe Produktraster, das fuer Telefone
       bereits verworfen wurde. Schlimmer: der Lead war dort nicht nur
       unbetont, sondern KLEINER als die Passage.

       Ursache war nicht die fehlende Spaltenbreite, sondern der Rahmen.
       `--hl-media-ratio: 2 / 1` gab der breiten Karte ein Format, das kein
       Aquarell des Bestandes hat: die Zeichnungen liegen zwischen 0,54 und
       2,19 (417 Dateien, Median 1,17). `object-fit: contain` rechnet die
       Abweichung unmittelbar in verlorene Flaeche um, und ein hochformatiges
       Motiv verliert im 2/1-Rahmen mehr, als die doppelte Spaltenbreite ihm
       gibt. Gemessen 10.08.2026 bei 768 px, Lead gegen Passage:

         Seitenverhaeltnis   0,54   0,81   1,02   1,37   1,75   2,19
         vorher              0,47   0,71   0,89   1,16   0,91   0,72
         nachher             1,19   1,78   2,24   3,00   3,83   3,33

       Der breite Rahmen behaelt deshalb das Seitenverhaeltnis der Passage
       (4/3 von .hl-grid) und bekommt allein mehr HOEHE. Damit haengt die
       Betonung an einer Groesse, die fuer jedes Motiv gleich wirkt, statt an
       einem Format, das nur zu querformatigen Zeichnungen passt.

       Getragen wird beides von .hl-card--wide. Keine Regel je Reise, keine
       Positionsabfrage, keine Aenderung am Markup.

       Die Textspalte waechst NICHT mit der Karte mit. Eine breite Karte darf
       ein breites Bild tragen, aber keine breite Textzeile: bei 1024 px lief
       die Einordnung des Lead sonst ueber 934 px, also rund 127 Zeichen je
       Zeile (gemessen 10.08.2026) – weit ueber der Obergrenze aus
       02-design-system-2027.md, 3.3. Der Deckel haelt die Zeile bei rund 75
       Zeichen und entspricht damit zugleich der Textbreite, die dieselbe
       Karte auf dem Desktop ohnehin schon hatte (524 px). */
    .hl-card--wide .hl-card__body{ max-width: 560px; }
    @media (min-width:561px) and (max-width:1080px){
        .hl-card--wide{ grid-column: span 2; --hl-media-max: 400px; }
    }
    @media (min-width:1081px){
        .hl-grid{ grid-template-columns: repeat(4,1fr); grid-auto-rows:1fr; }
        .hl-card--wide{ grid-column: span 2; --hl-media-max: 300px; }
        /* Die abschliessende breite Karte steht mittig statt linksbuendig
           neben zwei leeren Rasterzellen. Damit endet das Raster als
           bewusster Schlussakzent und nicht als Luecke.
           Getragen von .hl-card--closing, nicht mehr von :last-child: Die
           Dramaturgie ist eine redaktionelle Entscheidung und darf nicht aus
           der Reihenfolge entstehen. Die Darstellung ist dieselbe. */
        .hl-card--closing{ grid-column: 2 / span 2; }
    }
    /* ---- Hoehepunkte auf Telefonen: Blatt statt Karte ------------------
       Bis 560 px stehen die acht Karten untereinander. Gemessen am
       10.08.2026 bei 390 px: Bildfeld 255 px, Titel nur 16 px (kleiner als
       der Fliesstext der Seite), Kartenhoehen 389 bis 412 px – die
       Abweichung liegt unter 6 %. Acht nahezu gleich hohe weisse Kaesten
       auf dem Papierton lesen sich dort als Produktraster und nicht als
       Reiseerzaehlung; die Gewichtung aus .hl-card--wide wirkt erst ab
       1081 px und fehlt mobil vollstaendig.

       Deshalb faellt auf Telefonen der Kasten weg, nicht das Bild: Die
       Zeichnung steht frei auf dem Papier, der Titel fuehrt.
       Alle acht Inhalte bleiben unveraendert.
       Ab 561 px aendert sich nichts – Tablet und Desktop sind nicht
       beruehrt (nachgemessen bei 640/768/1024/1440/1920 px).

       ---- Zweiter Schritt: Kuratierung statt Aufzaehlung ----------------
       Der Kasten war weg, der Takt nicht. Gemessen am 10.08.2026 bei
       430 px waren die Eintraege 2 bis 7 exakt gleich hoch (317 px), und
       der Groessenvorsprung der Leitmotive lag bei nur 1,63x – kaum mehr
       als die 1,35x, die allein aus den unterschiedlichen Seiten-
       verhaeltnissen der Zeichnungen entstehen. Die beabsichtigte
       Gewichtung ging also im Zufall unter, und eine Trennlinie nach jedem
       Eintrag zaehlte die acht Momente, statt sie zu gliedern.

       ---- Dritter Schritt: drei Rollen statt Reihenfolge ----------------
       Die Gliederung haing zunaechst an .hl-card--wide und an :last-child.
       Beides war falsch: --wide beschreibt eine Spaltenbreite auf dem
       Desktop, keine Dramaturgie, und :last-child leitet die Betonung aus
       der Reihenfolge ab. Auf 200 Rundreisen heisst das, dass die Betonung
       dorthin rutscht, wo zufaellig die letzte Karte steht.

       Die Sektion kennt deshalb drei ausdrueckliche Rollen:

         .hl-card--lead     Der Einstieg. Blatt, dann Titel und Einordnung.
                            Haarlinie darunter.
         ohne Modifier      Die Passage. Kompakt, linksbuendig, enger Takt,
                            ohne Trennlinie – ein zusammenhaengender Zug.
         .hl-card--closing  Der Abschluss. Haarlinie darueber, dann Blatt,
                            Titel und Einordnung – gleicher Aufbau wie Lead
                            und Passage, nur deutlich mehr Gewicht.

       Regeln fuer die Auszeichnung:
       - .hl-card--lead traegt GENAU EINE Karte je Sektion. Sie beantwortet
         die Frage, mit welchem Moment die Route eroeffnet werden soll.
         Das muss nicht die erste Karte sein.
       - .hl-card--closing traegt HOECHSTENS EINE Karte je Sektion, sinnvoll
         die letzte in der Leserichtung. Fehlt sie, endet die Sektion ruhig
         mit der Passage – bei kurzen Routen ist das der bessere Schluss.
       - Ohne .hl-card--lead laufen alle Karten als Passage. Zulaessig,
         aber dann ist die Sektion wieder eine Aufzaehlung.
       - Zwei Karten mit derselben Rolle sind ein Redaktionsfehler: sie
         werden beide betont, und der Bogen verliert seinen Punkt.

       Die Anzahl der Karten spielt keine Rolle. Der Takt der Passage haengt
       am Nachbarschaftsselektor (.hl-card + .hl-card), nicht an einer
       Position; deshalb gibt es weder einen ueberzaehligen Abstand am Ende
       noch eine Obergrenze. Sechs Hoehepunkte ergeben Lead + 4 + Closing,
       zehn ergeben Lead + 8 + Closing – ohne eine einzige Sonderregel.

       Gemessen 10.08.2026 bei 390 px: Lead und Closing tragen 3,96x mehr
       gezeichnete Flaeche als die Passage (2,73x bei 320 px). Zwei
       Haarlinien in der ganzen Sektion, beide markieren einen Rollenwechsel
       (11-component-library.md, 5.1). */
    @media (max-width: 560px){
        .hl-grid{ display: block; margin-top: 30px; }
        /* Nimmt den Kasten aus dem zentralen Kartensystem gezielt zurueck.
           Nur hier und nur mobil – das Kartensystem selbst bleibt gueltig. */
        .hl-card{
            background: none; border: 0; box-shadow: none; border-radius: 0;
            overflow: visible;
        }
        /* Die Aquarelle sind Vignetten auf Weiss. `multiply` legt ihren
           weissen Grund auf den Papierton (#fefefe x #fcfaf5 = #fbf9f3,
           ein Schritt von 1/255), dadurch braucht die Zeichnung keinen
           Rahmen mehr. Vier der acht Dateien tragen einen gemalten
           Hintergrund bis an den Rand; ohne Maske bleibt dort ein sichtbares
           Rechteck (gemessen 10.08.2026: Delta 3/255 bei Seattle und
           Redwood). Zwei gekreuzte Verlaeufe blenden die aeusseren 6 %
           weich aus und druecken die Abweichung auf Delta 1/255, also unter
           die Wahrnehmungsschwelle. Beschnitten wird nichts – die
           Zeichnung bleibt vollstaendig (13-image-guidelines.md, 1.2). */
        .hl-card img{
            display: block; width: auto; height: auto;
            aspect-ratio: auto;
            /* Der Hoehendeckel des Kartenrahmens (--hl-media-max) gilt hier
               nicht mehr: Auf Telefonen gibt es keinen Rahmen, die Zeichnung
               steht frei. Ohne diese Ruecknahme deckelt die Basisregel jede
               Blatthoehe stumm auf --hl-media-max, und die Hoehenangaben
               weiter unten waeren teilweise wirkungslos (gemessen 10.08.2026:
               `min(272px,70vw)` ergab ab 372 px Viewport konstant 260 px). */
            max-height: none;
            margin: 0 auto 16px; padding: 0; border: 0; background: none;
            object-fit: contain;
            mix-blend-mode: multiply;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                                linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
        }
        .hl-card__body{ padding: 0; }
        .hl-card p{ color: var(--ink-80); }

        /* Der Takt der Passage steht am Nachbarschaftsselektor. Dadurch
           entsteht kein ueberzaehliger Abstand hinter der letzten Karte,
           ohne dass eine Position abgefragt werden muesste – und die Regel
           gilt fuer sechs Karten genauso wie fuer zehn. */
        .hl-grid > .hl-card + .hl-card{ margin-top: 20px; }

        /* --- Passage ---------------------------------------------------
           Alles, was keine Rolle traegt. Ruhig, linksbuendig, ohne
           Trennlinie – der Zug zwischen Einstieg und Abschluss.

           Die Bildgroesse haengt an der HOEHE, nicht an der Spaltenbreite:
           ueber die Breite gesteuert fielen die Blaetter bei 320 px auf
           136 px und wurden wieder zu Marken (gemessen 13.473 px² statt
           21.000). Die feste Hoehe haelt die optische Gewichtung ueber alle
           Geraetebreiten gleich.

           Sie ist zugleich eine Layoutstabilitaets-Massnahme, kein
           Geschmack: Wenn an einem lazy geladenen Bild `height:auto` steht
           und `max-width` UND `max-height` gleichzeitig greifen, rechnet
           der Browser die Box nach dem Laden neu und der Abschnitt springt.
           Gemessen am 10.08.2026 bei 390 px und 1,6 Mbit/s: CLS 0,198 mit
           `height:auto`, CLS 0,0004 mit fester Hoehe. Wer hier auf `auto`
           zurueckgeht, holt den Sprung zurueck – auch bei Lead und
           Closing, deren Hoehe aus demselben Grund gesetzt ist. */
        .hl-grid > .hl-card:not(.hl-card--lead):not(.hl-card--closing) img{
            height: 128px; width: auto; max-width: 62%;
            margin: 0 0 11px;
        }
        .hl-grid > .hl-card:not(.hl-card--lead):not(.hl-card--closing) h3{
            font-size: 1.04rem; line-height: 1.32; margin-bottom: 5px;
        }
        .hl-grid > .hl-card:not(.hl-card--lead):not(.hl-card--closing) p{
            font-size: .93rem; line-height: 1.58;
        }

        /* --- Lead ------------------------------------------------------
           Der Einstieg: Abschnittsueberschrift, dann das Blatt, dann Titel
           und Einordnung – die Reihenfolge einer Magazinseite.

           Die textliche Einordnung VOR dem Bild wurde geprueft und wieder
           verworfen (Vergleichsrender 10.08.2026): Dann stossen zwei
           Playfair-Ueberschriften mit 30 px Abstand aufeinander – die
           Abschnittsueberschrift (2,15 rem) und der Kartentitel (1,55 rem).
           Der Leser kann nicht unterscheiden, ob der Titel eine
           Unterzeile des Abschnitts oder ein eigener Hoehepunkt ist.
           Die textliche Einordnung leistet bereits das Paar aus .eyebrow
           und h2; ein zweiter Textblock davor verdoppelt diese Rolle.
           Ausserdem rutschte das Aquarell dadurch von 187 px auf 352 px
           unter den Abschnittsanfang, also aus dem oberen Drittel des
           ersten Bildschirms in dessen untere Haelfte.

           Der Deckel aus min() haelt das Blatt auf schmalen Geraeten in
           Ruhe: ohne ihn belegt es bei 320 px 86 % der Spaltenbreite und
           die Sektion kippt ins Plakative. Der erste Wert ist der
           Rueckfall fuer Browser ohne min(). */
        .hl-grid > .hl-card--lead{
            padding-bottom: 30px;
            border-bottom: 1px solid var(--hairline);
        }
        .hl-grid > .hl-card--lead h3{ font-size: 1.55rem; line-height: 1.22; margin-bottom: 10px; }
        .hl-grid > .hl-card--lead p{ font-size: 1.05rem; line-height: 1.6; }
        .hl-grid > .hl-card--lead img{
            max-width: 100%;
            height: 260px;
            height: min(260px, 70vw);
            margin: 0 auto 18px;
        }

        /* --- Closing ---------------------------------------------------
           Derselbe Aufbau wie Lead und Passage: Blatt, Titel, Einordnung.
           Der Abschluss ist damit die Gegenklammer zum Lead, nicht dessen
           Spiegelbild.

           Die gespiegelte Reihenfolge (Titel, Text, dann Blatt) war
           gebaut und ist nach Vergleichsrender verworfen (10.08.2026):
           Sie wiederholt bei 320 px genau den Fehler, der im Lead schon
           korrigiert wurde – vor dem Bild stehen dort ein dreizeiliger
           Titel und vier Textzeilen, also rund 200 px Schrift, bevor
           ueberhaupt etwas Bildliches kommt. Ausserdem war sie die einzige
           Ausnahme im Lesemuster der Sektion: acht Karten, sieben gleich
           gebaut, eine verkehrt herum. Eine Anordnung, die der Betrachter
           erst entschluesseln muss, ist keine ruhige Anordnung.

           Der Abschluss braucht die Umkehr auch nicht. Er ist bereits
           sechsfach von der Passage abgesetzt: Haarlinie darueber, 36 px
           Abstand, 36 px Polster, Blatt 260 statt 128 px, zentriert statt
           linksbuendig, Titel 24,8 statt 16,6 px. Ein siebtes Merkmal
           haette nur die Konstruktion sichtbar gemacht.

           Damit stimmen in der ganzen Sektion Quelltext- und
           Anzeigereihenfolge wieder ueberein – keine order-Umkehr mehr. */
        .hl-grid > .hl-card + .hl-card--closing{ margin-top: 36px; }
        .hl-grid > .hl-card--closing{
            padding-top: 36px;
            border-top: 1px solid var(--hairline);
        }
        .hl-grid > .hl-card--closing img{
            max-width: 100%;
            height: 260px;
            height: min(260px, 70vw);
            margin: 0 auto 18px;
        }
        .hl-grid > .hl-card--closing h3{ font-size: 1.55rem; line-height: 1.22; margin-bottom: 10px; }
        .hl-grid > .hl-card--closing p{ font-size: 1.05rem; line-height: 1.6; }
    }
    /* Im Kontrastmodus des Betriebssystems werden Blendmodus und Maske
       zurueckgenommen – dort gilt die Systemfarbe, nicht die Papieroptik. */
    @media (forced-colors: active){
        .hl-card img{
            mix-blend-mode: normal;
            mask-image: none; -webkit-mask-image: none;
        }
    }
    /* ---- Route: Kategorie-Legende + farbige Marker (nur Orientierung) ---- */
    .route-legende{
        display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0 4px;
        padding:14px 18px; max-width: var(--block);
    }
    .route-legende .rl-item{ display:inline-flex; align-items:center; gap:8px;
        font-size:.85rem; font-weight:500; color: var(--ink-70); }
    .route-legende .rl-dot{ width:12px; height:12px; border-radius:50%;
        border:1px solid rgba(30,17,34,.15); flex:0 0 auto; }
    .rl-dot--stadt{ background: var(--kat-stadt); }
    .rl-dot--natur{ background: var(--kat-natur); }
    .rl-dot--kueste{ background: var(--kat-kueste); }
    .rl-dot--fahrtag{ background: var(--kat-fahrtag); }
    .rl-dot--erholung{ background: var(--kat-erholung); }
    /* Kategorie-Marker je Etappe: farbiger Punkt vor dem vorhandenen Kat-Text */
    .etappe__kat{ display:inline-flex; align-items:center; gap:7px; }
    .etappe__kat::before{ content:""; width:10px; height:10px; border-radius:50%;
        background: var(--gold-deep); border:1px solid rgba(30,17,34,.15); flex:0 0 auto; }
    .etappe[data-kat="Stadt"] .etappe__kat::before{ background: var(--kat-stadt); }
    .etappe[data-kat="Nationalpark"] .etappe__kat::before{ background: var(--kat-natur); }
    .etappe[data-kat="Küste"] .etappe__kat::before{ background: var(--kat-kueste); }
    .etappe[data-kat="Fahrtag"] .etappe__kat::before{ background: var(--kat-fahrtag); }
    .etappe[data-kat="Erholung"] .etappe__kat::before{ background: var(--kat-erholung); }
    /* farbige Etappen-Achsenmarker links */
    .etappe[data-kat="Stadt"]::before{ border-color: var(--kat-stadt); }
    .etappe[data-kat="Nationalpark"]::before{ border-color: var(--kat-natur); }
    .etappe[data-kat="Küste"]::before{ border-color: var(--kat-kueste); }
    .etappe[data-kat="Fahrtag"]::before{ border-color: var(--kat-fahrtag); }
    .etappe[data-kat="Erholung"]::before{ border-color: var(--kat-erholung); }
    /* ---- Pakete: bessere visuelle Vergleichbarkeit ohne Textänderung ---- */
    @media (min-width:981px){
        .paket-grid{ align-items:stretch; }
        .paket-card{ padding-top:30px; }
        .paket-card__pos{ min-height:3.2em; }
        .paket-card__preis{ padding:10px 0; border-top:1px solid var(--line);
            border-bottom:1px solid var(--line); margin-bottom:14px; }
        .paket-card ul{ margin-top:16px; }
    }
    .paket-card--best{ transform: translateY(-6px); }
    @media (max-width:980px){ .paket-card--best{ transform:none; } }
    /* ---- Empfehlungszeile der Komfortkarte -------------------------------
       Loest die goldene Kapsel ab, die ueber der Kartenkante schwebte. Zwei
       Gruende: Sie war fuer das kurze Wort "Bestseller" gebaut, brach mit
       "UNSERE EMPFEHLUNG" auf zwei Zeilen um und lag dann auf der
       Ueberschrift "Komfortpaket" - eine absolut positionierte Box wird bei
       left:50% nur halb so breit wie die Karte. Und sie war als Flaeche
       schwerer als der Paketname selbst, las sich also als Verkaufsmarker.

       Die Nachfolgerin ist die Abschnittskennung der Seite (.eyebrow) eine
       Stufe kleiner: Goldlinie plus Pflaume-Versalien. Sie steht im Fluss der
       Karte, kann deshalb nichts ueberdecken, und ordnet ein statt zu
       bewerben. Die Orientierung zur Mitte tragen weiterhin Goldrahmen und
       goldener CTA - die Zeile erklaert sie nur.

       Gold bleibt Linie, nie Schriftfarbe: auf hellem Grund traegt der
       Goldton nur 2,3:1 (siehe Kommentar bei .eyebrow). ------------------- */
    .paket-grid{ --empf-zeile: .7rem; --empf-hoehe: 1.4; --empf-abstand: 8px; }
    .paket-card__empfehlung{
        margin: 0 0 var(--empf-abstand);
        font-size: var(--empf-zeile);
        line-height: var(--empf-hoehe);
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--plum);
    }
    .paket-card__empfehlung::before{
        content: "";
        display: inline-block;
        width: 20px;
        height: 1px;
        background: var(--gold-deep);
        vertical-align: middle;
        margin-right: 10px;
        position: relative;
        top: -1px;
    }
    /* Nebeneinander stehende Karten: Die beiden anderen bekommen dieselbe
       Kopfzeile als leeren Platzhalter, damit Paketname und Preiszeile ueber
       alle drei Karten auf einer Linie bleiben. Hoehe und Abstand stammen aus
       denselben Variablen wie die Zeile selbst - eine Quelle, keine
       Zahl zum Nachpflegen. Untereinander (bis 980px) entfaellt der
       Platzhalter: Dort gibt es nichts auszurichten, und mobile Bildschirm-
       hoehe ist zu kostbar fuer reservierte Leere. */
    @media (min-width: 981px){
        .paket-card:not(.paket-card--best)::before{
            content: "";
            display: block;
            height: calc(var(--empf-zeile) * var(--empf-hoehe));
            margin-bottom: var(--empf-abstand);
        }
    }
    /* ---- Anfrage-Cockpit: Fieldsets als klare Abschnittskarten -----------
       Nutzt ausschließlich die vorhandenen Legenden ("1. Ihre Reise" usw.). */
    #anfrage-form fieldset{
        position:relative; padding:28px 28px 22px; margin-bottom:22px;
    }
    #anfrage-form legend{
        font-family: var(--font-display); font-size:1.15rem; color: var(--plum);
        padding:5px 16px; background: var(--card-bg); border:1px solid var(--gold-45);
        border-radius:999px; margin-left:-4px;
    }
    .formwrap .tour-box{ border-left:4px solid var(--gold); }
    @media (max-width:640px){
        #anfrage-form fieldset{ padding:20px 16px 18px; }
    }
    /* ---- Feste, nicht änderbare Formularangabe (z. B. Rundreise) ---- */
    .field input[readonly]{
        background: var(--plum-06);
        color: var(--ink);
        border-style: dashed;
        cursor: default;
        font-weight: 600;
    }
    .field input[readonly]:focus{
        outline: 3px solid var(--gold);
        outline-offset: 1px;
    }
    /* Der Wechsel der Sektionsflaechen laeuft jetzt ueber die
       Sektionstypen (.section / .section--warm / .section--plum) und
       braucht keine Sonderregel je Abschnitt mehr. */
    /* ---- Reduced Motion: neue Transforms neutralisieren ---- */
    @media (prefers-reduced-motion: reduce){
        .paket-card--best{ transform:none; }
        .jumpnav{ scroll-behavior:auto; }
    }
    /* =====================================================================
       UMBAU 08/2026 – Conversion-Reihenfolge
       Neue Klassen; ausschliesslich bestehende CI-Farb-Tokens.
       ===================================================================== */
    /* Die Preis-Einordnung im Hero ist seit 08/2026 der kompakte
       Preisanker (.hero__preis, siehe Hero-Block oben); das Preisdetail
       steht in der Orientierungszone (.orient__preisnote). Eine eigene
       Kartenflaeche braucht keine der beiden mehr. */
    /* Routenueberblick in vier Kapiteln (immer sichtbar, kein Accordion) */
    .ueberblick-grid{
        display:grid; grid-template-columns: repeat(4,1fr);
        gap:20px; margin-top:32px;
    }
    .ueberblick-card{
        padding:24px 22px;
    }
    .ueberblick-card__tag{
        display:inline-block; font-weight:700; font-size:.82rem;
        color: var(--cream); background: var(--plum);
        border-radius: var(--radius-sm); padding:4px 10px; margin-bottom:10px;
    }
    .ueberblick-card h3{ font-size:1rem; margin-bottom:8px; }
    .ueberblick-card p{ font-size:.9rem; }
    .ueberblick-card__meta{
        margin-top:10px; font-size:.82rem; font-weight:600; color: var(--gold-deep);
    }
    @media (max-width:1080px){ .ueberblick-grid{ grid-template-columns:1fr 1fr; } }
    @media (max-width:560px){ .ueberblick-grid{ grid-template-columns:1fr; } }
    /* Sylvia: Kontaktkanaele als abgestufte Textlinks statt Button-Reihe */
    .beraterin__kanaele{ margin-top:14px; font-size:.92rem; color: var(--cream-80); }
    .beraterin__kanaele a{ color: var(--gold); font-weight:600; text-decoration:none; }
    .beraterin__kanaele a:hover, .beraterin__kanaele a:focus-visible{ text-decoration:underline; }
    /* Sticky-CTA: ein dominanter Primaer-CTA */
    .sticky-cta .btn--gold{ flex:1.8; }

    /* =====================================================================
       DESIGNSPRACHE 2027 – gemeinsame Abstands- und Textbausteine
       ---------------------------------------------------------------------
       Ersetzt die frueheren Inline-Styles der einzelnen Abschnitte durch
       wenige wiederverwendbare Klassen. Dadurch ist der vertikale Rhythmus
       an einer Stelle gepflegt und ueberall identisch.
       ===================================================================== */
    .section .lead{ margin-top: 14px; }
    .lead--form{ margin: 14px 0 32px; }
    /* Aktionszeile am Ende einer Sektion (Buttons unter dem Inhalt). */
    .section-actions{
        margin-top: 30px; display:flex; flex-wrap:wrap; gap:13px;
    }
    /* Grosse Inhaltsbloecke setzen einheitlich unter der Ueberschrift an. */
    .fit-card, .legal-box{ margin-top: 28px; }
    .ueberblick-card p{ color: var(--ink-80); }
    /* Kennzahl der Karte: Gold traegt auf Weiss zu wenig Kontrast fuer
       eine echte Information. Der goldene Akzent bleibt als Trennlinie. */
    .ueberblick-card p.ueberblick-card__meta{
        color: var(--plum);
        border-top: 1px solid var(--hairline);
        padding-top: 10px;
    }
    /* Kategorie-Chip in der Etappenliste: lesbare Schrift, Goldrahmen und
       der farbige Punkt bleiben die Kennzeichnung. */
    .etappe__kat{ color: var(--plum); }
    /* Gruppenbeschriftung im Formular (Radiogruppe). */
    .field__grouplabel{
        display:block; font-weight:600; font-size:.94rem; margin-bottom:8px;
    }
    .check-label a{ font-weight:600; }
    /* .field label setzt font-weight:600 und schlaegt .check-label, weil
       "Klasse + Element" spezifischer ist als eine Klasse allein. Bei der
       einzelnen Datenschutzzeile fiel das nie auf. Die drei Zustimmungen
       des Planungsauftrags sind mehrzeilige Absaetze mit Rechtsfolge –
       durchgehend halbfett lasen sie sich wie eine Warnung und traten
       gegen den zahlungspflichtigen Button an, statt ihn vorzubereiten.
       Die Links darin behalten ihre 600 aus der Zeile darueber. */
    .field .check-label{ font-weight: 400; }
    .tour-box p + p{ margin-top: 4px; }
    .tour-box__sylvia a{ color: var(--gold); font-weight:600; }
    /* Vorteil-Karten auf der Pflaumenflaeche: gleiche Rundung und Ruhe wie
       die hellen Karten, aber ohne Schatten (auf Dunkel wirkungslos). */
    .vorteil-card{ padding: 24px 20px; box-shadow:none; }

    /* ---------------------------------------------------------------------
       Rasterschutz auf schmalen Geraeten
       ---------------------------------------------------------------------
       Lange deutsche Komposita ("Buchungsabsicherung", "USA-Reisekompetenz")
       setzen eine Mindestbreite, die eine 1fr-Spalte nicht unterschreiten
       kann. Dadurch ragten Rasterzellen bisher ueber den Bildschirmrand
       hinaus. Zwei zentrale Regeln loesen das fuer alle Raster der Seite:
       min-width:0 an den Rasterzellen und ein Umbruch fuer ueberlange
       Woerter im Fliesstext. */
    .hl-grid > *, .ueberblick-grid > *, .paket-grid > *, .review-grid > *,
    .vorteil-grid > *, .field-row > *, .trustbar__inner > *,
    .etappe__body > *, .beraterin__grid > *, .orient__grid > *,
    .orient__fakten > *, .fit-card ul > li, .paket-card ul > li,
    .etappe__body ul > li, .submit-steps > li, .site-footer ul > li{
        min-width: 0;
    }
    /* "anywhere" statt "break-word": nur so zaehlt die Umbruchmoeglichkeit
       auch bei der Mindestbreitenberechnung von Rasterzellen. Optisch
       identisch – gebrochen wird weiterhin erst, wenn ein Wort sonst
       nicht in die Zeile passt. */
    h1, h2, h3, p, li, dt, dd, blockquote, summary, legend, label, cite{
        overflow-wrap: anywhere;
    }
    /* Vier Vorteile stehen auf Telefonen untereinander statt in zwei zu
       schmalen Spalten. */
    @media (max-width: 620px){
        .vorteil-grid{ grid-template-columns: 1fr; }
    }
    /* Sehr schmale Geraete: Die Regel, die Logo und Menue-Schalter
       zusammenhaelt, stand bis zum 21.08.2026 hier – und wirkte deshalb
       auf keiner anderen Seite. Auf /merkzettel/ lief die Kopfzeile bei
       320 px ueber (36 px zu breit, Menueknopf zweizeilig, Kopfhoehe 80
       statt 64 px). Sie gehoert zur Kopfzeile und steht seitdem in
       /includes/hauptnavigation.php – einmal, fuer alle Seiten.
       Merkzettel-Header-Architektur 2027, Phase 10:
       Keine Rundreise traegt eigene Kopfzeilenlogik. */

    /* =====================================================================
       PAKETENTSCHEIDUNG AM FORMULAR (08/2026)
       ---------------------------------------------------------------------
       Gehoert sichtbar zur Kartenfamilie (weisse Flaeche, Haarlinie, gleicher
       Radius, weicher Schatten) und traegt die Goldkante der Akzentkarten.
       Bewusst ruhiger und kleiner als die vollstaendigen Paketkarten: Hier
       wird entschieden, nicht verglichen. Keine neue Akzentfarbe.
       ===================================================================== */
    .paketwahl{
        background: var(--card-bg);
        border: 1px solid var(--line);
        border-left: 3px solid var(--gold-deep);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        padding: 22px 24px;
        margin-bottom: 24px;
    }
    /* Sprungziel nach dem Klick auf eine Paketkarte. Der Fokus wird per
       Skript gesetzt – nach einem MAUSKLICK soll er keinen Rahmen
       erzeugen, denn der Zeiger ist dem Klick ohnehin gefolgt.

       KORREKTUR 20.08.2026: Hier stand `.paketwahl:focus{outline:none}`
       mit dem Kommentar, bei echter Tastaturnavigation greife
       :focus-visible weiterhin. Nachgemessen stimmte das nicht.
       `.paketwahl:focus` hat Spezifitaet 0-2-0 und schlaegt die globale
       Regel `:focus-visible{outline:3px solid}` (0-1-0) – auch dann,
       wenn Chrome den Fokus korrekt als Tastaturfokus einstuft
       (gemessen: paketwahl.matches(':focus-visible') === true,
       outlineStyle === "none").

       Wer per Tastatur ein Paket bestaetigte, sah also nicht, wohin der
       Fokus gesprungen war – Verstoss gegen WCAG 2.4.7.

       `:not(:focus-visible)` grenzt die Regel auf den Mausfall ein.
       Bei Tastaturbedienung greift jetzt die globale Regel. */
    .paketwahl:focus:not(:focus-visible){ outline: none; }
    .paketwahl__label{
        font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
        font-weight: 600; color: var(--plum);
    }
    .paketwahl__name{
        font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
        color: var(--plum); margin-top: 4px;
    }
    .paketwahl__merkmale{
        list-style: none; display: grid; gap: 6px; margin: 12px 0 0;
    }
    .paketwahl__merkmale li{
        padding-left: 22px; position: relative; font-size: .92rem; color: var(--ink-80);
    }
    .paketwahl__merkmale li::before{
        content: "✓"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700;
    }
    .paketwahl__fussnote{
        margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
        font-size: .82rem; color: var(--ink-70);
    }
    /* Sekundaere Aktion mit ruhiger Kante: Der Absende-Button bleibt der
       einzige laute Knopf im Formular. */
    .paketwahl__aendern{
        margin-top: 14px; background: var(--card-bg);
        border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
        color: var(--plum); font-family: var(--font-body);
        font-weight: 600; font-size: .9rem;
        padding: 9px 16px; min-height: 44px; cursor: pointer;
        transition: border-color .2s;
    }
    .paketwahl__aendern:hover{ border-color: var(--gold-deep); }
    /* Trennlinie nur, wenn die Zusammenfassung tatsaechlich darueber steht.
       :not([hidden]) ist noetig, weil hidden das Element im DOM belaesst. */
    .paketwahl__gewaehlt:not([hidden]) + .paketwahl__optionen{
        margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
    }
    .paketwahl__frage{ font-size: .95rem; color: var(--ink-80); margin-bottom: 12px; }
    .paketwahl__cards{
        display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr);
    }
    .paketwahl__cards > *{ min-width: 0; }
    @media (max-width: 860px){ .paketwahl__cards{ grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px){ .paketwahl__cards{ grid-template-columns: 1fr; } }
    /* Radio-Card mit sichtbarer, echter Radioeingabe. Der Zustand haengt nie
       allein an der Farbe - der gefuellte Radiopunkt zeigt ihn ebenfalls. */
    .paketwahl-card{
        display: flex; align-items: flex-start; gap: 10px;
        min-height: 48px; padding: 11px 14px;
        border: 1.5px solid var(--field-border); border-radius: var(--radius-sm);
        background: var(--card-bg); cursor: pointer;
        transition: border-color .2s, background .2s;
    }
    .paketwahl-card:hover{ border-color: var(--gold-deep); }
    .paketwahl-card:focus-within{ border-color: var(--plum); }
    .paketwahl-card input{
        accent-color: var(--gold-deep); width: 18px; height: 18px;
        margin-top: 2px; flex: 0 0 auto;
    }
    .paketwahl-card__text{ display: block; }
    .paketwahl-card__name{
        display: block; font-weight: 600; font-size: .92rem; color: var(--ink);
    }
    .paketwahl-card__preis{
        display: block; font-size: .84rem; color: var(--ink-70); margin-top: 2px;
    }
    /* Bewusst ohne text-transform: Der Paketkopf oben fuehrt "UNSERE
       EMPFEHLUNG" in Versalien, weil er eine Eyebrow ist - Versalien und
       Sperrung sind laut Designsystem allein der Eyebrow vorbehalten. Diese
       Auszeichnung hier ist keine Eyebrow, sondern Microcopy neben einem
       Paketnamen; sie bleibt in normaler Schreibweise und damit leiser als
       der Paketname, den sie begleitet.

       Und bewusst nur "Empfehlung" statt "Unsere Empfehlung": Die volle
       Formulierung steht im Paketbereich und ist dort gesetzt. Hier bricht
       sie im Vierspalten-Layout ab 861px auf zwei Zeilen um und wird wieder
       zur hohen Kapsel, die aus dem Paketkopf gerade entfernt wurde - plus
       14,6px Hoehe fuer alle vier Karten. Das kurze Wort traegt die
       Wiedererkennung und passt in eine Zeile. */
    .paketwahl-card__badge{
        display: inline-block; font-size: .66rem; font-weight: 700;
        letter-spacing: .08em;
        color: var(--plum); background: var(--gold-12);
        border: 1px solid var(--gold-45); border-radius: 999px;
        padding: 1px 8px; margin-left: 4px; vertical-align: middle;
    }
    .paketwahl-card.is-gewaehlt{
        border-color: var(--gold-deep); background: var(--gold-12);
    }
    .paketwahl__camper{ font-size: .92rem; color: var(--ink-80); }
    .paketwahl__camper strong{ color: var(--plum); }

    /* =====================================================================
       ENTSCHEIDUNGSHILFEN IN PAKETBLOCK UND ROUTE (08/2026)
       ---------------------------------------------------------------------
       Drei kleine Textbausteine, bewusst ohne Kasten und ohne neue Farbe:
       Sie sollen einordnen, nicht mit den Karten konkurrieren.
       ===================================================================== */
    /* Gemeinsame Grundlage: leitet die Karten ein, Lesebreite begrenzt. */
    .paket-grundlage,
    .paket-planungsauftrag{
        max-width: var(--measure);
        margin-top: 14px;
        font-size: .96rem;
        color: var(--ink-80);
    }
    .paket-grundlage strong,
    .paket-planungsauftrag strong{ color: var(--plum); }
    /* Steht direkt unter .paket-grundlage und rahmt die Karten mit ihr
       zusammen. Deshalb enger als der Standardabstand: Die beiden Zeilen
       sollen als eine Einleitung gelesen werden, nicht als zwei Absätze.
       Kein eigener Farb- oder Linienakzent - der Satz ist eine Information
       im Lesefluss, keine Warnung und kein Kleingedrucktes. */
    .paket-planungsauftrag{ margin-top: 8px; }
    /* Nicht enthaltene Kosten: eine Stufe grösser und dunkler als die
       Fussnote darunter, damit sie nicht als Kleingedrucktes gelesen wird.
       Die Goldlinie kennzeichnet sie als Hinweis, ohne zu warnen. */
    .paket-nichtenthalten{
        max-width: var(--block);
        margin-top: 26px;
        padding-left: 14px;
        border-left: 2px solid var(--gold-deep);
        font-size: .94rem;
        color: var(--ink-80);
    }
    /* Der Paket-Hinweis folgt direkt darunter und braucht seine eigene
       Trennlinie dann nicht mehr - zwei Linien nebeneinander wirken unruhig. */
    .paket-nichtenthalten + .paket-hinweis{
        margin-top: 18px;
        padding-top: 0;
        border-top: 0;
    }
    /* Einordnung langer Fahrtage. Ruhige Goldflaeche statt Warnfarbe: Der
       Hinweis soll helfen, nicht abschrecken. Steht textlich abgesetzt von
       den Sehenswuerdigkeiten der Etappe. */
    .etappe__fahrthinweis{
        margin-top: 14px;
        padding: 10px 14px;
        background: var(--gold-12);
        border-left: 2px solid var(--gold-deep);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        font-size: .88rem;
        color: var(--ink-80);
    }
    .etappe__fahrthinweis strong{ color: var(--plum); }
    /* Die Druckabbau-Bruecke traegt seit 08/2026 nur noch ihre Ueberschrift.
       Ohne Folgeabsatz wuerde deren margin-bottom als toter Raum in der
       Flaeche stehen bleiben. */
    .bridge h2:only-child{ margin-bottom: 0; }

    /* =====================================================================
       MACHBARKEITSPRÜFUNG – Prüfpunkte statt Häkchenliste (08/2026)
       ---------------------------------------------------------------------
       Die Passungskarte (.fit-card, Abschnitt "Für wen ist diese Reise
       ideal?") und die Machbarkeitsprüfung teilen sich Rahmen, Radius,
       Schatten und Goldkante – das bleibt so, die beiden Blöcke gehören
       sichtbar zusammen. Unterschiedlich ist ihre Aussage, und deshalb hier
       eine eigene Fassung der Liste:

       Die Passungskarte sagt "das trifft auf Sie zu" – dort ist das Häkchen
       richtig. Die Machbarkeitsprüfung sagt "das sehen wir uns an" – dort
       behauptet ein Häkchen etwas Falsches, nämlich Erledigung, und macht
       aus acht offenen Fragen eine abgehakte Checkliste. Es entfällt; der
       Eintrag hängt jetzt an seinem vorangestellten Thema.

       Gemessen 1280/1440/1920 px: acht Einträge zu je zwei Zeilen statt
       3/2/2/2/2/2/2/3 – 16 statt 18 Zeilen, ein ruhiges Raster statt eines
       ausgefransten Blocks. Der größere Zeilenabstand ersetzt die Marke als
       Trennung zwischen den Einträgen.

       Alle Regeln sind auf .fit-card--pruefung begrenzt; die Passungskarte
       behält ihr Häkchen unverändert.
       ===================================================================== */
    .fit-card--pruefung ul{ gap: 20px 40px; }
    .fit-card--pruefung li{ padding-left: 0; }
    .fit-card--pruefung li::before{ content: none; }
    /* Das Thema ist Auszeichnung, nicht Betonung: eine Stufe leichter als
       die Einleitung darüber (700), damit die Reihenfolge Einleitung →
       Thema → Erläuterung auch optisch stimmt. Keine eigene Farbe – Pflaume
       wäre auf Weiß heller als die Grundschrift und würde schwächen. */
    .fit-card--pruefung li strong{ font-weight: 600; }
    /* Eigennamen werden nicht getrennt. Ohne diese Regel bricht
       "Going-to-the-Sun" von 1024 bis 1920 px am Bindestrich um. */
    .fit-card--pruefung .eigenname{ white-space: nowrap; }

    /* =====================================================================
       REISEVERLAUF – Orientierung und Bedienbarkeit (08/2026)
       ---------------------------------------------------------------------
       Kartenlayout, Farben, Radien, Schatten und Bildgrößen der Etappen
       bleiben unverändert. Geändert wird nur, was gemessen im Weg stand.
       ===================================================================== */

    /* --- 1. Kapitelmarken in der Timeline ------------------------------
       21 Etappen ohne Zwischenstufe sind eine Liste, kein Ablauf. Die
       Gliederung in vier Kapitel steht bereits im Abschnitt "31 Tage in
       vier Kapiteln" – nur eben 3.402 px (1440) bzw. 6.783 px (390)
       weiter oben, mit fünf Sektionen dazwischen. Beim Lesen der Etappen
       ist sie nicht mehr im Blick. Die Marken wiederholen sie wortgleich
       an der Stelle, an der sie gebraucht wird: vier Haltepunkte statt
       21 gleichrangiger Zeilen.

       Bewusst ohne eigene Fläche, ohne Rahmen, ohne Linie und ohne neue
       Farbe – die Marke ist die Schrift selbst. Playfair für den Namen,
       Montserrat für den Tagesbereich, damit die Marke sichtbar zur
       Überschriftenfamilie und nicht zur Etappenfamilie gehört.
       Einrückung gleich der Etappenkarten, damit die Zeitachse
       ununterbrochen daneben durchläuft.

       Kosten: rund 300 px auf 29.400 px Seitenhöhe (390 px). */
    /* ---- Die Kapitelmarke bleibt stehen, solange ihr Kapitel laeuft ----
       Der laengste Abschnitt der Seite ist die Tagesroute: geschlossen
       5,9 Bildschirme auf dem Telefon, mit allen geoeffneten Etappen
       17,5 (gemessen 390x844; 1440x900: 3,6 bzw. 7,9). Die vier
       Kapitelmarken standen bisher einmal da und waren nach einem
       Wischen fort – mitten in "Tag 12" wusste niemand mehr, in welchem
       Landesteil er sich befindet.

       position: sticky macht aus der Marke das, was sie im Buch waere:
       den Kolumnentitel. Keine neue Komponente, kein Knopf, kein
       JavaScript, kein zusaetzlicher Klick – dieselbe Auszeichnung, nur
       an der Stelle sichtbar, an der sie gebraucht wird.

       top haengt an --kopfhoehe. Die Variable setzt der Skriptteil 8 aus
       der GEMESSENEN Kopfzeilenhoehe; der Rueckfallwert 71px ist die
       Hoehe ab 401px Breite. Damit gibt es keine zweite gepflegte
       Zahlenreihe neben scroll-padding-top, und ein Aufklappen des
       mobilen Menues verschiebt die Marke korrekt mit.

       Die Flaeche muss deckend sein, sonst laeuft die Zeitachse der
       Timeline durch den Text. --paper-warm ist die Flaeche der Sektion
       .section--warm, in der die Route steht.

       z-index: 2 – die Etappen darunter sind position: relative und
       wuerden als spaetere Geschwister sonst ueber der stehenden Marke
       gezeichnet. Ueber der Kopfzeile (100) liegt sie dadurch nicht.

       Die 10px padding-top sind der Abstand zur Kopfzeile im stehenden
       Zustand. Damit sich im ruhenden Zustand NICHTS verschiebt, gibt
       der obere Aussenabstand dieselben 10px ab: 34 -> 24. */
    .route-kapitel{
        position: sticky;
        top: var(--kopfhoehe, 71px);
        z-index: 2;
        background: var(--paper-warm);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 14px;
        margin: 24px 0 16px;
        padding: 10px 0 9px 66px;
        font-family: var(--font-display);
        font-size: 1.08rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--plum);
    }
    /* Die Marke des ERSTEN Kapitels hat keinen oberen Aussenabstand, von
       dem sie die 10px abgeben koennte. Der negative Wert nimmt sie
       genau dort wieder heraus, damit der gemessene Abstand zur Legende
       darueber unveraendert bleibt.
       Der Selektor nennt ausdruecklich den ersten Block: Seit jedes
       Kapitel in einem eigenen Block steht, waere jede der vier Marken
       ein :first-child. */
    .route-kapitel-block:first-child .route-kapitel{ margin-top: -10px; }
    /* Der Preis einer stehenden Marke: Sie liegt genau in dem Band, in
       das der Browser ein per Tastatur angesprungenes Element setzt.
       Gemessen bei 390px und Shift+Tab: fuenf von 21 Etappen landeten
       unter der Marke, bis zu 39px verdeckt – ein Verstoss gegen
       WCAG 2.2, 2.4.11 (Focus Not Obscured), den es vor dem Kleben
       nicht gab.

       scroll-margin-top loest das an genau einer Stelle, ohne
       scroll-padding-top der ganzen Seite anzufassen: Der Browser haelt
       beim Anspringen einer Etappe zusaetzlich die Hoehe der Marke frei.
       Den genauen Wert misst Skriptteil 8 (--markenhoehe), weil die
       Marke je nach Breite ein-, zwei- oder dreizeilig laeuft
       (gemessen: 42px ab 430, 62px bei 360–429, 85px bei 320).
       Der Rueckfall 85px ist der gemessene Groesstwert: ohne
       JavaScript lieber etwas zu viel Luft als ein verdeckter Fokus. */
    #route-liste summary{ scroll-margin-top: var(--markenhoehe, 85px); }
    .route-kapitel .rk-tage{
        font-family: var(--font-body);
        font-size: .8rem;
        font-weight: 600;
        color: var(--ink-70);
    }
    /* Gleiche Einrückung wie .etappe unterhalb von 720 px. */
    @media (max-width: 720px){
        .route-kapitel{ padding-left: 54px; }
    }

    /* --- 2. Legende ohne Kartencontainer -------------------------------
       Der Kommentar über dem Kartensystem zählt auf, wer dazugehört:
       Eignungsprüfung, Höhepunkte, Routenkapitel, Pakete,
       Machbarkeitsprüfung, FAQ, Etappen, Formularblöcke. Die Legende steht
       nicht darunter – sie ist Beschriftung zur folgenden Liste, nicht ein
       Inhaltsblock gleichen Ranges. Als weiße Karte mit Rahmen und Schatten
       stand sie unmittelbar über 21 gleich aussehenden Karten und las sich
       im Squint-Test als deren erster Eintrag.

       Gemessen: 117 → 57 px (320), 85 → 57 px (360–430), 52 → 24 px
       (ab 560). Die Punkte und ihre Textlabel bleiben unverändert; die
       Legende ist nach 06-accessibility.md 2.2 Pflicht und bleibt es. */
    .route-legende{
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 2px 0 0;
        margin: 14px 0 6px;
    }

    /* --- 3. Aufklapp-Zeichen sichtbar machen ---------------------------
       Das +/– trägt den Zustand der Etappe und ist damit ein
       Bedienelement. In --gold-deep auf weißer Karte erreichte es 2,40 : 1
       und verfehlte sowohl 4,5 : 1 (WCAG 1.4.3) als auch 3 : 1
       (WCAG 1.4.11). --ink-70 trägt 6,8 : 1 und ist dieselbe Farbe wie die
       Kilometerangabe daneben – die Zeile bleibt ruhig, das Zeichen wird
       lesbar. */
    .etappe summary::after{ color: var(--ink-70); }
    /* Erzeugter Text zaehlt zum Vorlesenamen: Screenreader lasen bisher
       "Tag 2 Las Vegas – Bryce Canyon ca. 421 km · 1 ÜN NATIONALPARK –
       erweitert" – das Zeichen am Ende ist dort nur Stoerung, den Zustand
       meldet <details> bereits selbst. Die Schreibweise content:"x" / ""
       setzt den Alternativtext auf leer. Browser ohne Unterstuetzung
       verwerfen genau diese eine Deklaration und behalten die Fassung
       weiter oben – das Zeichen bleibt dort sichtbar wie bisher. */
    .etappe summary::after{ content: "+" / ""; }
    .etappe details[open] summary::after{ content: "–" / ""; }
    /* Ab 721 px steht das Zeichen fest am rechten Rand statt als letztes
       Element im Textfluss. Vorher rutschte es bei umbrechenden Kopfzeilen
       allein auf eine eigene Zeile – gemessen bei 721 px zwei und bei
       768 px eine Etappe, mit einer leer wirkenden Zeile unter dem Text.
       Ab 860 px sinkt die Kopfhoehe dadurch von 66 auf 62 px, die
       geschlossene Liste von 2.105 auf 2.007 px.
       Nur oberhalb von 720 px: Auf Telefonen ist die Kopfzeile ohnehin
       mehrzeilig, und die reservierten 46 px wuerden dort von der
       Textbreite abgehen und zusaetzliche Umbrueche erzeugen. */
    @media (min-width: 721px){
        .etappe summary{ position: relative; padding-right: 46px; }
        .etappe summary::after{
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 0;
            line-height: 1;
        }
    }

    /* --- 4. Sammelschalter: Zielgröße ----------------------------------
       42 px lagen unter den 44 px, die 02-design-system-2027.md §8 als
       Mindestmaß für Berührungsziele setzt. */
    .route-toolbar button{ min-height: 46px; }

    /* ====================================================================
       Hinweis auf den KEROLINA Planungsauftrag (Stufe 2)
       --------------------------------------------------------------------
       BEWUSST OHNE EIGENE GESTALTUNG: keine Karte, kein Badge, keine
       Preistypografie, keine Leistungsliste. Der Planungsauftrag ist auf
       dieser Seite nicht erhaeltlich – er wird erst nach der
       administrativen Annahme der Anfrage individuell zugaenglich
       gemacht. Alles, was ihn wie ein hier kaufbares Produkt aussehen
       liesse, gehoert deshalb nicht hierher, sondern in den
       Auftragsblock (.claude/templates/pa49-auftragsblock.html).

       Der Baustein traegt nur den Prozess: was kostenlos bleibt (sich
       informieren), was die 49 EUR umfassen und wann sie zurueckgehen. Er benutzt ausschliesslich die vorhandene Textform der
       Seite (eyebrow, h2, Fliesstext auf Lesebreite) und braucht
       deswegen fast kein eigenes CSS.
       ==================================================================== */
    .pa49-hinweis{
        max-width: var(--measure);
    }
    .pa49-hinweis p + p{
        margin-top: 12px;
    }
    /* Letzte Zeile ruhiger: Sie grenzt ab und weist auf den spaeteren
       Zugang hin – eine Fussnote zum Absatz darueber, kein neuer Gedanke. */
    .pa49-hinweis__fuss{
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--hairline);
        font-size: .92rem;
        color: var(--ink-70);
    }
    .pa49-hinweis__fuss a{
        font-weight: 600;
        color: var(--plum);
    }

    /* ---- Bestellzusammenfassung im Formular --------------------------
       Sie steht im Planungsauftrag-Abschnitt unmittelbar über den drei
           Zustimmungen (dessen Nummer seit 23.08.2026 PHP setzt).
       (Die Nummer war seit einer früheren Umstellung veraltet und wurde
       am 17.08.2026 mit der Verschiebung des Terminbereichs berichtigt.)
       Warme Flaeche statt weisser Karte: Der Block sitzt bereits IN
       einem weissen fieldset; eine zweite weisse Flaeche darin waere
       unsichtbar. Die Goldkante links ordnet ihn derselben
       Akzentkartenfamilie zu wie .fit-card und .legal-box. */
    .pa49-summe{
        background: var(--paper-warm);
        border: 1px solid var(--line);
        border-left: 3px solid var(--gold-deep);
        border-radius: var(--radius);
        padding: 20px 24px;
        margin-bottom: 24px;
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 10px 22px;
    }
    .pa49-summe dt{
        font-weight: 700;
        font-size: .9rem;
        color: var(--plum);
    }
    .pa49-summe dd{
        margin: 0;
        font-size: .93rem;
        color: var(--ink-80);
    }
    .pa49-summe dd strong{
        font-family: var(--font-display);
        font-size: 1.25rem;
        color: var(--plum);
    }
    /* Elektronischer Widerruf unter dem Button. Bewusst ruhig und ohne
       Kartenschatten: Der Weg muss auffindbar sein, aber er ist nicht
       das Ziel dieser Seite.

       ACHTUNG BEIM AENDERN: Der Kasten sitzt INNERHALB von .submit-zone,
       und die ist eine Pflaumenflaeche. Mit der sonst ueblichen
       Textfarbe --ink-70 stand hier dunkler Text auf dunklem Grund und
       erreichte 1,13 : 1 (gemessen 13.08.2026). Alle Farben dieses
       Blocks gehoeren deshalb in die Cremefamilie. */
    .widerruf-box{
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid var(--gold-25);
        font-size: .92rem;
        color: var(--cream-80);
    }
    /* .submit-zone .btn zieht jeden Button auf 100 % / 420 px. Das ist fuer
       den zahlungspflichtigen Hauptbutton richtig und fuer den
       Widerrufsweg falsch: Zwei gleich breite Schaltflaechen untereinander
       lesen sich als zwei gleichrangige Angebote. */
    .widerruf-box .btn{ margin-top: 12px; width: auto; max-width: none; }
    /* 620 px: Darunter bleiben fuer den Wert weniger als 24 Zeichen und
       die laengeren Rueckerstattungszeilen brechen woertlich auf. */
    @media (max-width: 620px){
        .pa49-summe{
            grid-template-columns: 1fr;
            gap: 3px;
            padding: 18px 16px;
        }
        .pa49-summe dd + dt{ margin-top: 13px; }
    }
    @media (forced-colors: active){
        .pa49-summe{ border: 1px solid CanvasText; }
    }

    /* =====================================================================
       FREITEXT-HINWEIS (08/2026)
       ---------------------------------------------------------------------
       Eine Bitte, keine Warnung. Deshalb dieselbe Textform wie jeder andere
       Hilfetext des Formulars (.help) und nur EIN zusätzliches Mittel: eine
       feine Goldlinie links, dieselbe Marke, die .pa49-summe und
       .entwurf__karte als „hier steht etwas Eigenes" verwenden.

       BEWUSST NICHT: keine Farbfläche, kein Symbol, kein Rahmen, kein Rot.
       .field-error nebenan trägt Goldfläche plus 3px-Kante – der Hinweis
       muss davon unterscheidbar bleiben, sonst liest ihn jemand als Fehler.
       ===================================================================== */
    .help--hinweis{
        padding-left: 12px;
        border-left: 2px solid var(--hairline);
    }

    /* =====================================================================
       ZWEI EBENEN IM AUFTRAGSBLOCK (08/2026)
       ---------------------------------------------------------------------
       Zwischenzeitlich standen hier vier Kästchen; das vierte trug eine
       Einwilligung nach Art. 9 DSGVO. Es ist am 17.08.2026 entfallen,
       weil das Formular solche Angaben nicht mehr erhebt. Mit ihm ging
       .pa49-art9 samt Haarlinie und Überschrift.

       Was bleibt, sind zwei klar unterscheidbare Ebenen:

         1. die drei Vertragskästchen – Auftrag mit AGB, Rückerstattung,
            Leistungsbeginn
         2. .pa49-ds-hinweis – reine Information, kein Bedienelement
       ===================================================================== */
    /* Ebene 3 ruhiger als alles darüber: kein Kästchen, keine Kante,
       nur eine feine Linie und kleinere Schrift. --ink-70 auf der weißen
       Kartenfläche des fieldsets erreicht 6,78 : 1. */
    .pa49-ds-hinweis{
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
        font-size: .88rem;
        color: var(--ink-70);
    }
    .pa49-ds-hinweis a{
        font-weight: 600;
        color: var(--plum);
    }

    /* =====================================================================
       ENTWURF SPEICHERN UND FORTSETZEN (08/2026)
       ---------------------------------------------------------------------
       Der Block steht als erstes Element ueber dem Formular und hat zwei
       Zustaende, die einander ausschliessen.

       ZUSTAND A – das Angebot (.entwurf__optin). BEWUSST KEINE KARTE.
       Solange nichts gespeichert ist, ist das hier eine Fussnote zum
       Formular. Eine zweite Karte ueber der Paketentscheidung wuerde den
       Weg zum ersten Eingabefeld verstellen und die Seite unruhiger machen
       (10-agent-workflow.md, Schritt 6, Frage 5).

       ZUSTAND B – der gefundene Entwurf (.entwurf__karte). Jetzt eine
       Karte, denn jetzt ist eine Entscheidung zu treffen. Sie benutzt die
       vorhandene Kartenfamilie des Formulars – weisse Flaeche, Haarlinie,
       gleicher Radius, weicher Schatten, Goldkante links – und fuehrt
       keine neue Gestaltung ein. Massgabe ist .paketwahl direkt darunter.

       KEINE eigene Akzentfarbe, KEINE Animation, KEIN Overlay.
       ===================================================================== */
    .entwurf{
        margin-bottom: 24px;
    }

    /* --- Zustand A ---------------------------------------------------- */
    .entwurf__optin{
        max-width: var(--measure);
    }
    /* Die ganze Zeile ist das Beruehrungsziel, nicht nur das Kaestchen:
       18px lagen weit unter den 44px aus 02-design-system-2027.md §8.
       align-items zentriert die einzeilige Beschriftung; .check-label
       setzt fuer die mehrzeiligen Zustimmungen flex-start. */
    .entwurf__schalter{
        min-height: 44px;
        align-items: center;
        color: var(--plum);
        cursor: pointer;
    }
    /* 28px = 18px Kaestchen + 10px Spaltenabstand aus .check-label. Der
       Erklaersatz steht damit unter der Beschriftung und nicht unter dem
       Kaestchen. */
    .entwurf__hinweis{
        margin-top: 2px;
        padding-left: 28px;
        font-size: .82rem;
        color: var(--ink-70);
    }

    /* --- Zustand B ---------------------------------------------------- */
    .entwurf__karte{
        background: var(--card-bg);
        border: 1px solid var(--line);
        border-left: 3px solid var(--gold-deep);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        padding: 22px 24px;
    }
    .entwurf__label{
        font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
        font-weight: 600; color: var(--plum);
    }
    .entwurf__datum{
        font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
        color: var(--plum); margin-top: 4px;
    }
    /* In der Karte steht kein Kaestchen davor, also auch keine Einrueckung. */
    .entwurf__karte .entwurf__hinweis{
        margin-top: 10px;
        padding-left: 0;
    }
    .entwurf__aktionen{
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 12px; margin-top: 16px;
    }
    /* Bei 320px UND 200 % Textgroesse zugleich ist das Wort
       "wiederherstellen" allein breiter als die Karte: gemessen 75 px
       Ueberlauf, die Schaltflaeche stand aus der Karte heraus.
       max-width bindet sie an die Karte, hyphens laesst das Wort an
       einer Silbengrenze umbrechen statt hart abzuschneiden – die
       Seite traegt lang="de", die Trennstellen kennt der Browser
       deshalb selbst. -webkit- fuer Safari, das die Eigenschaft bis
       heute nur mit Praefix kennt. */
    .entwurf__aktionen .btn,
    .entwurf__aktionen .entwurf__loeschen{
        max-width: 100%;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    /* Loeschen bleibt eine Textschaltflaeche. Die Wiederherstellung ist der
       Weg, den fast jeder will; das Loeschen ist der Ausweg daneben. Zwei
       gleich schwere Schaltflaechen lesen sich als zwei gleichrangige
       Angebote – dieselbe Begruendung wie an .widerruf-box .btn. */
    .entwurf__loeschen{
        min-height: 44px; padding: 9px 4px;
        background: none; border: 0;
        font-family: var(--font-body); font-size: .9rem; font-weight: 600;
        color: var(--plum);
        text-decoration: underline; text-underline-offset: 3px;
        cursor: pointer;
    }
    /* KEIN Farbwechsel auf Gold: --gold-deep erreicht auf der weissen
       Karte 2,40 : 1 und faellt damit unter 4,5 : 1 (WCAG 1.4.3). Gold
       traegt in diesem Projekt Linien, keinen Text auf hellem Grund
       (02-design-system-2027.md, 2.2). Die Rueckmeldung kommt deshalb
       ueber die Strichstaerke. */
    .entwurf__loeschen:hover{
        text-decoration-thickness: 2px;
    }

    /* --- Rueckmeldung beider Zustaende -------------------------------- */
    .entwurf__status{
        margin-top: 12px;
        font-size: .88rem;
        color: var(--ink-80);
    }
    /* Leer heisst: nichts zu melden. Der Absatz bleibt im Dokument stehen –
       ein per display:none entfernter Live-Bereich wird von einem Teil der
       Screenreader nicht mehr vorgelesen, wenn er spaeter Text bekommt.
       Entfernt wird deshalb nur der Abstand, nicht das Element. */
    .entwurf__status:empty{
        margin-top: 0;
    }

    @media (forced-colors: active){
        .entwurf__karte{ border: 1px solid CanvasText; }
    }

    /* ================================================================
       Ihre Reise auf einen Blick (.kurzfassung)
       ----------------------------------------------------------------
       Der Kontrollblick unmittelbar vor dem kostenpflichtigen Auftrag.
       Er spiegelt ausschliesslich, was der Besucher oben eingetragen
       hat, und erhebt selbst nichts.

       BEWUSST KEINE KARTE UND KEINE NUMMER. Die fuenf Formular-
       abschnitte sind weisse Karten mit Schatten und einer
       nummerierten Legende in Pillenform. Traege dieser Block
       dieselbe Form, waere er der sechste Schritt eines Formulars,
       das gerade zu Ende geht - genau der Eindruck, den er nicht
       erzeugen darf.

       Stattdessen drei Unterschiede, die zusammen "Kurzfassung"
       statt "noch ein Schritt" sagen:
         1. Flaeche in Elfenbein (--paper) statt Kartenweiss
         2. kein Schatten
         3. eine einzige Goldlinie oben statt der Legendenpille
       Gold bleibt Linie, nie Flaeche und nie Schrift
       (02-design-system-2027.md, 2.2).

       Der Klassenname ist .kurzfassung und nicht .ueberblick:
       .ueberblick-grid und .ueberblick-card gehoeren bereits dem
       Routenueberblick weiter oben auf derselben Seite.
       ================================================================ */
    .kurzfassung{
        background: var(--paper);
        border: 1px solid var(--line);
        border-top: 2px solid var(--gold-deep);
        border-radius: var(--radius);
        padding: 28px 28px 22px;
        margin-bottom: 22px;
    }
    .kurzfassung h3{
        font-size: 1.35rem;
        color: var(--plum);
        margin-bottom: 8px;
    }
    /* 78ch statt 62ch: Die gekuerzte Einleitung passt damit auf dem
       Desktop auf EINE Zeile. Die Grenze bleibt, weil beide Absaetze
       auch bei sehr breiten Fenstern eine lesbare Zeilenlaenge
       behalten muessen - sie faellt nur dorthin, wo genau ein
       Umbruch weniger entsteht. */
    .kurzfassung__intro,
    .kurzfassung__leer{
        color: var(--ink-80);
        font-size: .95rem;
        max-width: 78ch;
        margin: 0;
    }
    .kurzfassung__intro{ margin-bottom: 18px; }

    /* ---- Gruppe ---------------------------------------------------
       KEINE Trennlinien. Vier waagerechte Linien auf fuenf Gruppen
       liessen den Block wie eine Tabelle lesen - genau das Gefuehl,
       das er nicht erzeugen darf. Die Versalzeile der Gruppe UND der
       groessere Abstand darueber trennen bereits deutlich genug; eine
       Linie zusaetzlich waere die dritte Trennung derselben Fuge.

       Der Abstand ist absichtlich groesser als der frueheren Summe
       aus Aussenabstand und Linienpolsterung wirkte: Weissraum
       gliedert ruhiger als Striche. */
    .kurzfassung__gruppe + .kurzfassung__gruppe{
        margin-top: 24px;
    }
    /* Kein space-between mehr: Rechtsbuendig am Blockrand hatte der
       Aendern-Verweis die staerkste Stelle der Zeile und wog optisch
       so schwer wie die Gruppenueberschrift. Direkt hinter dem Titel
       steht er im Windschatten der Versalzeile - auffindbar, aber
       nachrangig. */
    .kurzfassung__kopf{
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 14px;
        margin-bottom: 4px;
    }
    /* Kleine Versalzeile statt Ueberschriftenoptik: Die Gruppentitel
       gliedern, sie konkurrieren nicht mit "Ihre Reise auf einen
       Blick". Playfair bleibt der H3 vorbehalten - keine Playfair-Flut.
       Gewicht 700 -> 600 und Sperrung .11em -> .07em: Beides trug
       Aufmerksamkeit, die den Kundenangaben darunter gehoert.

       Die GROESSE bleibt bei .8rem und wird nicht mitgesenkt: Das ist
       die kleinste im Designsystem dokumentierte Schriftgroesse
       (02-design-system-2027.md, 2.3 – dieselbe wie .eyebrow, und
       ausdruecklich kein Grosstext). Ruhe wird ueber Gewicht, Sperrung
       und Farbe erreicht, nie durch Unterschreiten dieser Grenze -
       die Leser dieser Seite sind im Schnitt nicht jung. */
    .kurzfassung__kopf h4{
        font-family: var(--font-body);
        font-size: .8rem;
        letter-spacing: .07em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--plum-mid);
        margin: 0;
    }
    /* Textlink, kein Knopf-Aussehen: Ein zweiter Knopfsatz neben dem
       goldenen Absendeknopf wuerde um dieselbe Aufmerksamkeit
       konkurrieren. Aussehen deshalb exakt wie die uebrigen Fliesstext-
       links des Projekts - Pflaume, halbfett, unterstrichen
       (.pa49-hinweis__fuss a, .pa49-ds-hinweis a). Eine Goldlinie waere
       hier die schwaechere Marke: Sie traegt auf hellem Elfenbein nur
       2:1 und saehe nach Zierde statt nach Bedienelement aus.

       Die senkrechte Polsterung ist kein Weissraum, sondern die
       Zielgroesse: 13,6px Schrift ergeben rund 19px Zeilenhoehe, die
       Mindestgroesse betraegt 24px (WCAG 2.2, 2.5.8). Die
       Inline-Ausnahme greift nicht - der Verweis steht allein in der
       Gruppenzeile und nicht in einem Satz. */
    /* Zurueckgenommen wird ueber GROESSE und STELLUNG, nicht ueber die
       Linkkonvention: Pflaume, halbfett, unterstrichen bleibt, weil
       jeder andere Fliesstextlink des Projekts so aussieht und ein
       eigener Stil den Verweis fremd statt leise machte. Von .85rem
       auf .8rem - dieselbe Kleinstgroesse wie Label und Gruppentitel,
       eine einzige kleine Groesse im ganzen Block. */
    .kurzfassung__aendern,
    .kurzfassung__mehr{
        font-family: var(--font-body);
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--plum);
        background: none;
        border: 0;
        border-radius: 0;
        /* 12,8px mal 1,3 sind rund 17px Zeile; mit 2 mal 5px Polsterung
           misst das Ziel 27px und bleibt ueber den geforderten 24px
           (WCAG 2.2, 2.5.8). Die Polsterung ist unsichtbar - sie
           vergroessert die Trefferflaeche, nicht das Schriftbild. */
        padding: 5px 2px;
        min-height: 0;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .kurzfassung__aendern:hover,
    .kurzfassung__mehr:hover{ text-decoration-thickness: 2px; }
    .kurzfassung__mehr{ margin-top: 2px; }

    /* ---- Zeilen ---------------------------------------------------
       Label ueber Wert. Ab 561px stehen beide nebeneinander; darunter
       untereinander, weil eine zweite Spalte auf 320px den Wert auf
       fuenf Zeichen Breite zusammendraengen wuerde. Keine Tabelle,
       kein horizontaler Bildlauf. */
    .kurzfassung__liste{ margin: 0; }
    .kurzfassung__zeile{ padding: 3px 0; }
    /* Das Gefaelle zwischen Bezeichnung und Angabe ist der eigentliche
       Hebel dieses Blocks: Beim Ueberfliegen soll "2. September bis
       13. Oktober 2026" zuerst ankommen und "Reisezeit" erst danach.
       Deshalb wandert das Label auf .8rem in Normalschrift, waehrend
       die Angabe auf Gewicht 500 geht. 500 ist geladen (Montserrat
       400;500;600;700) und wird nicht vom Browser nachgebildet.
       Fett waere zu viel - 17 fette Zeilen sind wieder eine Tabelle. */
    .kurzfassung__zeile dt{
        font-size: .8rem;
        font-weight: 400;
        line-height: 1.45;
        color: var(--ink-70);
        margin: 0 0 1px;
    }
    /* Der Absatz der Zeile ohne Bezeichnung traegt dieselbe Schrift wie
       jeder andere Wert - er steht im Selektor mit, damit es keine
       zweite Stelle gibt, an der dieselben Werte gepflegt werden. */
    .kurzfassung__zeile dd,
    .kurzfassung__zeile--solo p{
        margin: 0;
        font-weight: 500;
        /* 1,5 statt der 1,65 des Fliesstextes. Der Block ist keine
           Lesestrecke, sondern eine Aufstellung kurzer Angaben; die
           engere Zeile bindet Bezeichnung und Wert sichtbar zusammen
           und spart ueber alle Zeilen spuerbar Hoehe. Fuer die langen
           Freitexte bleibt sie bequem lesbar. */
        line-height: 1.5;
        color: var(--ink);
        /* pre-line haelt Absaetze aus den Textfeldern; break-word
           faengt lange Ortsnamen ohne Leerzeichen ab. */
        white-space: pre-line;
        overflow-wrap: break-word;
    }
    /* Fehlende Pflichtangabe: gedaempft, nicht rot. Der Block ist eine
       Kontrolle, keine Fehlermeldung - die Pflichtpruefung des
       Formulars bleibt die einzige verbindliche Instanz. */
    /* Fehlende Pflichtangabe traegt kein Gewicht 500: Sie ist keine
       Angabe des Kunden, sondern deren Fehlen. */
    .kurzfassung__offen{ color: var(--ink-70); font-weight: 400; }
    /* "Noch keine Angaben." tritt an die Stelle der ganzen Zeilenliste
       einer Gruppe und uebernimmt deshalb deren Zeilenabstand. */
    .kurzfassung__gruppe > .kurzfassung__offen{ margin: 0; padding: 3px 0; }

    @media (min-width: 561px){
        /* Die Bezeichnungsspalte war mit 172px breiter als der
           laengste Wert sie braucht und nahm den Kundenangaben Platz.
           minmax(0, 152px) laesst sie schrumpfen, wo sie darf, und
           begrenzt sie dort, wo eine lange Bezeichnung sonst die
           Wertspalte zusammendrueckte. */
        .kurzfassung__zeile{
            display: grid;
            grid-template-columns: minmax(0, 152px) 1fr;
            gap: 0 24px;
            align-items: baseline;
        }
        .kurzfassung__zeile dt{ margin-bottom: 0; }
        /* Rasterspalten haben von sich aus die Mindestbreite ihres
           laengsten unteilbaren Inhalts. Eine sehr lange Zeichenkette
           ohne Umbruchstelle sprengte die Spalte deshalb ueber den
           Blockrand hinaus und erzeugte einen waagerechten Bildlauf der
           ganzen Seite - overflow-wrap allein verhindert das nicht,
           weil es die Mindestbreite nicht veraendert. min-width: 0
           erlaubt der Spalte zu schrumpfen; erst dann greift der
           Umbruch. (Bestandsfehler, gefunden und behoben am
           17.08.2026.) */
        .kurzfassung__zeile dd,
        .kurzfassung__zeile--solo p{ min-width: 0; }
        /* Ohne Bezeichnung bleibt die erste Rasterspalte leer, und der
           Wert rueckt per grid-column in die zweite - dieselbe Spalte,
           in der jeder andere Wert steht. Die gemeinsame linke Kante
           bleibt so erhalten, ohne dass die Spaltenbreite hier ein
           zweites Mal als Zahl auftauchen muesste. Unter 561px gibt es
           kein Raster; dort steht der Absatz wie jeder andere Wert
           einfach am linken Rand. */
        .kurzfassung__zeile--solo p{ grid-column: 2; }
    }
    /* Gleicher Wert wie #anfrage-form fieldset auf schmalen Geraeten. */
    @media (max-width: 640px){
        .kurzfassung{ padding: 20px 16px 18px; }
    }
    /* Im Kontrastmodus verschwinden Flaeche und Goldkante. Die
       Umrandung haelt den Block dann als eigenen Bereich zusammen; die
       Unterstreichung der Verweise traegt das System selbst. */
    @media (forced-colors: active){
        .kurzfassung{ border: 1px solid CanvasText; }
    }

    /* ================================================================
       Zum Seitenanfang (.zum-anfang) – Bedienhilfe, kein CTA.
       Begruendung, Messwerte und Verworfenes: 11-component-library.md, 7.4.

       Weiss statt Papier, weil er auch ueber Pflaume und Fusszeile
       steht; kein Gold, denn Gold traegt hier die Handlung.
       Sockel: 82px ueber dem Sticky-CTA (70+12), 75px ueber der
       Reiseleiste (59+16) – beide an den Klassen der Leisten selbst,
       also aendert eine andere Leistenhoehe den Abstand, nie die
       Ueberdeckung. z-index 90 ist der niedrigste aller schwebenden
       Elemente: Wo etwas kollidiert, verliert dieser Knopf.
       ================================================================ */
    .zum-anfang {
        position: fixed;
        right: 16px;
        bottom: 16px;
        /* Der Sockel ueber einer Leiste laeuft ueber --btt-hub und
           damit ueber transform, nicht ueber bottom: bottom kostet
           Layout, transform nicht – gleiche Wahl wie bei .reiseleiste. */
        --btt-hub: 0px;
        z-index: 90;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid var(--field-border);
        border-radius: 50%;
        background: var(--card-bg);
        color: var(--plum);
        box-shadow: var(--shadow-soft);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        /* visibility statt display: nimmt den Knopf aus Fokusweg und
           Vorlesesoftware und laesst sich trotzdem animieren. Deshalb
           auch KEIN aria-hidden – er ist fokussierbar. */
        visibility: hidden;
        opacity: 0;
        transform: translateY(calc(6px - var(--btt-hub)));
        transition: opacity .22s ease, transform .22s ease, visibility .22s,
                    border-color .2s;
    }
    /* Trefferflaeche quadratisch, Aussehen rund: Ein Kreis nimmt in den
       Ecken keine Zeigereingabe an, das groesste Quadrat im 48px-Kreis
       misst 33,9px. inset:-1px, weil der Bezug der Innenkasten ist. */
    .zum-anfang::before {
        content: "";
        position: absolute;
        inset: -1px;
    }
    .zum-anfang.ist-sichtbar {
        visibility: visible;
        opacity: 1;
        transform: translateY(calc(var(--btt-hub) * -1));
    }
    .zum-anfang:hover {
        border-color: var(--gold-deep);
    }
    .zum-anfang svg {
        display: block;
        width: 20px;
        height: 20px;
    }
    /* Zwei Ringe: Der Knopf schwebt ueber hellen UND dunklen Flaechen.
       Pflaume aussen traegt auf hell, Gold innen auf dunkel – einer von
       beiden erreicht immer die 3:1 aus WCAG 1.4.11. */
    .zum-anfang:focus-visible {
        outline: 3px solid var(--plum);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px var(--gold), var(--shadow-soft);
    }
    /* 66 = 82 - 16: Sockel ueber dem Sticky-CTA minus Grundabstand. */
    .has-sticky .zum-anfang {
        --btt-hub: 66px;
    }
    @media (min-width: 861px) {
        .zum-anfang {
            right: 24px;
            bottom: 24px;
        }
        /* 51 = 75 - 24. */
        .hat-reiseleiste .zum-anfang {
            --btt-hub: 51px;
        }
    }
    /* Rechts unten ist der erwartete Ort und bleibt der Normalfall.
       Nach links weicht der Knopf NUR aus, wenn die Sprungnavigation den
       Platz wirklich braucht – wann das der Fall ist, misst
       seiteWaehlen() in Skriptabschnitt 11. Die linke Spalte ist
       (100vw - --maxw)/2 breit und traegt kein Bedienelement, weil
       aller Inhalt in .wrap sitzt. */
    .zum-anfang.weicht-aus {
        right: auto;
        left: 24px;
    }
    @media (forced-colors: active) {
        .zum-anfang {
            border: 1px solid ButtonText;
        }
    }

    /* ============================================================
       CUSTOMER-JOURNEY-LAYER 2027 (uebernommen 22.08.2026).
       Steht am Ende des Redesign-Layers, damit nichts darueber
       ueberschrieben wird. Alle Groessen in rem/em, damit die drei
       Schriftstufen aus includes/kerolina-lesekomfort.php greifen.
       Farben ausschliesslich aus den Tokens; Gold traegt nur Linien,
       nie Text auf heller Flaeche (02-design-system-2027.md, 2.2).
       ============================================================ */

    /* --- Delegationsblock ------------------------------------- */
    .selbst-liste {
        list-style: none;
        margin: 1.1rem 0 1.4rem;
        padding: 0;
        max-width: var(--measure);
        display: grid;
        gap: .55rem;
    }
    .selbst-liste li {
        position: relative;
        padding: .1rem 0 .1rem 1.5rem;
        color: var(--ink-92);
    }
    /* Der Marker ist eine Linie, kein Symbol: Häkchen und Punkte
       tragen hier keine Information und erzeugen die Kartenoptik,
       die 17-roadmap.md 2.5 fuer die Vorteile bereits verworfen hat. */
    .selbst-liste li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .72em;
        width: .75rem;
        height: 1px;
        background: var(--gold-deep);
    }
    .selbst-liste strong { font-weight: 600; }
    .selbst-fazit {
        max-width: var(--measure);
        border-top: 1px solid var(--gold-25);
        padding-top: 1rem;
        color: var(--ink-92);
    }

    /* Die Kostenangabe bricht als GANZES um, nie zwischen Wort und
       Betrag. Ohne diese Regel stand auf 1440 px "· Planung" am
       Zeilenende und "49 €" allein in der zweiten Zeile (gemessen
       22.08.2026) – eine verwaiste Zahl im ruhigsten Block des Heros.
       Der Punkt wandert bewusst mit: Er ist das Trennzeichen zur
       Preisangabe davor und gehoert an den Anfang der neuen Zeile. */
    /* ZURUECKSETZEN, NICHT NEU AUSZEICHNEN.
       Der Hero-Block fuehrt bereits die Regel .hero__preis span mit
       display:block, eigener Schriftgroesse und Cremefarbe – sie ist
       fuer das Preisdetail unter den Knoepfen gedacht. Ein neuer <span>
       in der Ankerzeile erbt sie und bekommt dadurch eine EIGENE ZEILE:
       gemessen 22.08.2026 stand "· Planung 49 €" auf 375 und 390 px
       allein in einer dritten Zeile und schob den Haupt-CTA um 29 px
       unter die Falz. Diese Regel holt den Span in den Textfluss zurueck;
       Groesse und Farbe kommen wieder von der Ankerzeile.
       Spezifitaet 0,2,0 schlaegt die Bestandsregel 0,1,1 – bewusst ueber
       den Elternselektor und nicht ueber !important. */
    .hero__preis--anker .hero__preis-planung {
        display: inline;
        margin-top: 0;
        font-size: inherit;
        color: inherit;
    }
    /* NUR ab 700 px zusammenhalten. Auf Telefonen faellt der Umbruch
       ohnehin nach "6.932 €", dort steht "· Planung 49 €" von selbst
       geschlossen in der zweiten Zeile. Der Waisenfall – "· Planung"
       am Zeilenende, "49 €" allein darunter – tritt erst auf, wenn die
       Zeile lang genug ist, also ab Tablet. */
    @media (min-width: 700px) {
        .hero__preis--anker .hero__preis-planung { white-space: nowrap; }
    }

    /* Einzelne Aussage ohne Kartenraster: Der Abstand ersetzt die
       Kartenflaeche, damit die H3 nicht am H2 klebt. Keine Flaeche,
       kein Rahmen, kein Symbol. */
    .vorteil-einzeln { margin-top: 1.1rem; }

    /* --- Kompakter Paketvergleich (nur unter 1000 px) ---------- */
    .paket-kurzvergleich {
        list-style: none;
        margin: 0 0 1.6rem;
        padding: 0;
        display: grid;
        /* minmax(0,1fr) statt 1fr: Mit 1fr (= minmax(auto,1fr)) koennen
           die Spalten nicht unter ihre Inhaltsbreite schrumpfen. Gemessen
           bei 320 px: Inhalt 316 px in einem 272 px breiten Container –
           die Seite bekam dadurch waagerechten Ueberlauf. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        border: 1px solid var(--hairline);
        border-radius: var(--radius-sm);
        overflow: hidden;
        background: var(--card-bg);
    }
    .paket-kurzvergleich__item {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: .15rem;
        padding: .7rem .35rem .6rem;
        text-align: center;
        border-left: 1px solid var(--line);
    }
    .paket-kurzvergleich__item:first-child { border-left: 0; }
    /* Die Empfehlung traegt eine Goldkante oben, keine Flaeche:
       eine gefuellte Karte machte aus der Vergleichszeile ein
       zweites Paketraster. */
    .paket-kurzvergleich__item--empfehlung {
        box-shadow: inset 0 2px 0 0 var(--gold-deep);
        background: var(--paper-warm);
    }
    .paket-kurzvergleich__name {
        font-size: .78rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-70);
    }
    .paket-kurzvergleich__preis {
        font-weight: 600;
        color: var(--plum);
        font-variant-numeric: tabular-nums;
        /* KEIN nowrap: Reicht die Spalte nicht, bricht die Zeile nach "ab"
           um. Die Zahl selbst bleibt durch das &nbsp; vor dem Eurozeichen
           immer zusammen. Das ist die Sicherung gegen Ueberlauf auf sehr
           schmalen Geraeten – Information geht dabei nicht verloren. */
        font-size: .95rem;
    }
    .paket-kurzvergleich__rolle {
        font-size: .72rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--ink-70);
        min-height: 1em;
    }
    /* Ab 1000 px stehen die drei Ab-Preise im Raster 32 px
       auseinander (gemessen). Dort waere die Zeile eine reine
       Wiederholung. */
    @media (min-width: 1000px) {
        .paket-kurzvergleich { display: none; }
    }
    @media (max-width: 399px) {
        .paket-kurzvergleich__preis { font-size: .86rem; }
        .paket-kurzvergleich__name  { font-size: .74rem; }
        .paket-kurzvergleich__rolle { font-size: .68rem; }
        .paket-kurzvergleich__item  { padding-left: .2rem; padding-right: .2rem; }
    }
    @media (max-width: 339px) {
        .paket-kurzvergleich__preis { font-size: .78rem; }
    }


    /* ================================================================
       FORMULARBEREICH PREMIUM 2027 (23.08.2026)
       ----------------------------------------------------------------
       Punkt 1 der Design-2027-Umsetzung: weniger Formulargefühl,
       mehr Beratungseröffnung. Kein Wortlaut, kein Feld, keine
       Reihenfolge geändert – nur Gewicht, Weißraum und Auskunft.

       a) Abschnittsköpfe: Die Legenden trugen bis hierher eine
          Pillenform mit Goldrand („Anfrage-Cockpit“). Sie las sich als
          Bedienelement. Jetzt unterbricht der Titel die obere Kante
          des Abschnitts – die klassische redaktionelle Form. Der
          Goldanteil wandert von der Pille in die Kante selbst und
          bleibt damit Linie, nie Textfarbe (02-design-system-2027.md,
          2.2 – Gold nie als Textfarbe auf Hell).

       b) Weißraum: Schatten weg, Innen- und Außenabstände größer.
          Die Abschnitte stehen dadurch als Kapitel nebeneinander
          statt als gestapelte Karten.

       c) Fortschritt: siehe Abschnitt 12 des Seitenskripts. Das
          Markup baut das Skript selbst; ohne JavaScript existiert
          nichts davon und es fehlt auch nichts.
       ================================================================ */
    #anfrage-form fieldset{
        padding: 26px 30px 28px;
        margin-bottom: 34px;
        box-shadow: none;
        border-top: 2px solid var(--gold-45);
    }
    /* float:left nimmt der Legende die Kerbe in der Rahmenlinie und macht
       sie zu einem normalen Block INNERHALB der Karte. Ohne das steht der
       Titel je zur Hälfte auf warmem Papier und auf Weiß – die Schrift
       kreuzt dann eine Farbkante, was in der 3-fach-Vergrößerung sofort
       unruhig wirkt (gemessen 23.08.2026). Die Goldkante läuft dadurch
       ungebrochen über die volle Breite, der Titel bekommt seine eigene
       Haarlinie darunter: ein Kapitelkopf statt einer Pille.
       width:100% erzwingt, dass der folgende Inhalt darunter beginnt;
       `legend + *{clear:both}` sichert das auch bei kurzen Titeln. */
    #anfrage-form legend{
        float: left;
        width: 100%;
        font-family: var(--font-display);
        font-size: 1.32rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--plum);
        background: none;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        padding: 0 0 12px;
        margin: 0 0 12px;
    }
    #anfrage-form legend + *{ clear: both; }
    /* ---- Beratungsfortschritt ---------------------------------------
       Die Balkenfüllung ist Pflaume, nicht Gold: Gold erreicht auf der
       hellen Spur keine 3:1 und wäre als Bedeutungsträger zu schwach.
       Die Auskunft steht ohnehin im Text daneben, der Balken
       wiederholt sie nur – deshalb aria-hidden. */
    .fortschritt{ margin: 0 0 26px; }
    .fortschritt__zeile{
        display: flex; flex-wrap: wrap; align-items: baseline;
        gap: 2px 12px; margin: 0 0 10px;
    }
    .fortschritt__titel{
        font-family: var(--font-display); font-weight: 700;
        font-size: 1.02rem; color: var(--plum);
    }
    .fortschritt__stand{ font-size: .92rem; color: var(--ink-70); }
    .fortschritt__balken{
        height: 3px; border-radius: 999px;
        background: var(--plum-12); overflow: hidden;
    }
    .fortschritt__balken > span{
        display: block; height: 100%; width: 0;
        background: var(--plum-mid); border-radius: 999px;
        transition: width .35s ease;
    }
    /* Der Abschnittsstand sitzt unter der Legende und trägt seine
       Bedeutung im Wort, nicht in der Farbe (WCAG 1.4.1). */
    .fortschritt__abschnitt{
        margin: 0 0 18px;
        font-size: .86rem; color: var(--ink-70);
    }
    .fortschritt__abschnitt.is-fertig{
        color: var(--plum); font-weight: 600;
    }
    @media (prefers-reduced-motion: reduce){
        .fortschritt__balken > span{ transition: none; }
    }
    @media (max-width: 640px){
        #anfrage-form fieldset{ padding: 22px 18px 24px; margin-bottom: 26px; }
        #anfrage-form legend{ padding-bottom: 10px; margin-bottom: 10px; }
        /* 1,22rem statt 1,16rem: Mit 1,16 wäre die Legende auf dem Telefon
           bildpunktgleich zur alten Pille geblieben (20,7 → 20,88 px, +0,9 %)
           – der Editorial-Gewinn hätte ausschliesslich den Desktop erreicht,
           obwohl das Formular mobil fünfzehn Bildschirme lang ist. Gemessen
           am 23.08.2026. */
        #anfrage-form legend{ font-size: 1.22rem; padding-right: 12px; }
    }

    /* ================================================================
       VERTRAUENSBEREICH PREMIUM 2027 (23.08.2026)
       ----------------------------------------------------------------
       Punkt 2: persoenliche Verantwortung hochwertiger sichtbar.
       KEIN Wort geaendert, keine Aussage ergaenzt, kein Beleg beruehrt.

       Die POSITION des Abschnitts bleibt, wo sie ist. Gemessen wurde die
       Nachbarschafts-Redundanz (Inhaltswoerter ab 5 Zeichen, gemeinsame
       Woerter mit #beratung): planungsauftrag 5 · selbst-planen 8 ·
       machbarkeitspruefung 8 · pakete 8. Die beiden naheliegenden
       Umstellungen sind dadurch SCHLECHTER als der Bestand, nicht besser:

         - hinter #selbst-planen  -> dessen Schlusssatz endet auf
           "ist die Ansprechpartnerin dieselbe", die H2 beginnt mit
           "Ihre persoenliche Ansprechpartnerin". Dazu "Reisezeit" und
           "Tempo" in beiden Aufzaehlungen.
         - hinter #machbarkeitspruefung -> deren Lead sagt "eine Route,
           die auf dem Papier schoen aussieht", das Zitat sagt "ob eine
           Route schoen klingt"; und "keine automatisch erzeugte
           Kombination" trifft auf "nicht in einem automatischen System".

       Beide Paare stehen heute 3,7 Bildschirme auseinander und tragen
       dort; nebeneinander waeren sie eine sichtbare Doppelung.

       a) Bild: Karte -> Bild. Schatten und Radius weg, eine Goldhaarlinie
          fasst es – dieselbe Kante, die im Formular die Kapitel traegt.
       b) Zitat: Widget -> Pull-Quote. Der Goldstrich wandert von links
          nach oben, die Kursive weicht der Auszeichnungsschrift. Das
          Zitat ist die staerkste Aussage des Abschnitts und sieht jetzt
          auch so aus.
       c) Fliesstext und Bildunterschrift: cream-80 -> cream. Hoeherer
          Kontrast auf Pflaume, zugleich mehr Gewicht ohne mehr Hoehe.
       ================================================================ */
    .beraterin__figure img{
        border-radius: 0;
        box-shadow: none;
        border: 1px solid var(--gold-45);
    }
    /* Die Bildunterschrift wird zur Credit-Zeile: Versalien, gesperrt,
       kleiner. Zwei Werte sind GEMESSEN, nicht geschaetzt (23.08.2026):
       .78rem/.12em kostete auf 280 px eine zweite Zeile (+19 px), und
       .08em Sperrung brach den Text auf der 400-px-Spalte mitten im
       Kompositum um („SERVICECENTER-USA-/BUCHUNGEN“). Bei .74rem/.06em
       steht er ab 1200 px auf EINER Zeile (22 px statt 45 px). Unter
       1200 px bleibt es bei zwei Zeilen – so war es auch vorher. */
    .beraterin__figure figcaption{
        margin-top: 12px;
        font-size: .74rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--cream-80);
    }
    .beraterin__quote{
        border-left: 0;
        border-top: 1px solid var(--gold-45);
        padding: 16px 0 0;
        margin: 18px 0 16px;
        font-family: var(--font-display);
        font-style: normal;
        font-size: 1.3rem;
        line-height: 1.34;
        color: var(--cream);
    }
    /* Die Groesse bleibt bei .95rem. Der Gewinn kommt aus dem Kontrast
       (cream-80 -> cream) und kostet damit keinen Bildpunkt; 1rem haette
       die Textspalte um 37 px verlaengert und das Formular verschoben. */
    .beraterin__text{
        color: var(--cream);
    }
    /* Erst ab 1200 px ist die Textspalte auch nach der Verbreiterung
       noch breiter als ihre max-width von 640 px. Darunter wuerde das
       groessere Bild den Text schmaler und damit hoeher machen – die
       Vergroesserung waere dann nicht mehr umsonst. */
    @media (min-width: 1200px){
        .beraterin__grid{ grid-template-columns: 400px 1fr; gap: 48px; }
    }
    @media (max-width: 640px){
        .beraterin__quote{ font-size: 1.16rem; padding-top: 16px;
                           margin: 18px 0 16px; }
    }
    /* Zwischen 641 und 1023 px ist die Textspalte am schmalsten: ab 861 px
       teilt sie sich die Breite mit dem Portrait, bleibt aber unter den
       640 px max-width. Das Zitat bekommt dort die mobile Groesse – mit
       1,3rem wuchs der Abschnitt bei 861 px um 44 px. Gemessen 23.08.2026. */
    @media (min-width: 641px) and (max-width: 1023px){
        .beraterin__quote{ font-size: 1.18rem; }
    }
    /* Signatur unter den acht Pruefpunkten: Gesicht neben der Aussage,
       die von persoenlicher Pruefung spricht. */
    /* Das Bild steht IM Satz, nicht in einem eigenen Kasten.
       Zwei verworfene Fassungen, beide gemessen am 23.08.2026:
       - Flex-Zeile: der Satz verlor auf 320 px die halbe Zeilenbreite
         und wuchs auf 402 px; die Machbarkeitspruefung wurde 142 px hoeher.
       - eigener <div>-Wrapper: dessen Aussenabstand kam zu margin-top:22px
         von .fit-card__not hinzu und verschob das Formular um 23 px.
       Als gefloatetes Element im Absatz laeuft der Text um das Bild und
       faellt danach auf die volle Breite zurueck. Unter 1024 px ist der
       Satz ohnehin hoeher als 56 px – dort kostet die Signatur NICHTS. */
    .fit-card__not--signiert{ overflow: hidden; }
    .fit-card__not--signiert > picture,
    .fit-card__not--signiert > img{
        float: left; margin: 2px 14px 2px 0;
        border-radius: 50%; border: 1px solid var(--gold-45);
    }
    .fit-card__not--signiert > picture img{
        display: block; border-radius: 50%;
    }