/* ============================================================
   mobil.css - Korrekturen fuer die Handy-Ansicht (25.08.2026)

   Diese Datei wird auf jeder Seite als LETZTE Formatvorlage
   eingebunden. Sie ueberschreibt damit die Angaben in den
   einzelnen Seiten, ohne sie zu entfernen - alte Regeln bleiben
   nachlesbar, hier steht nur, was sich geaendert hat.

   Grundlage: Durchgang durch alle Seiten im iPhone-Viewport
   (390 x 664 px). Was hier steht, betrifft Bausteine, die auf
   jeder Seite vorkommen (Kopfleiste, Fusszeile). Seiten-
   spezifisches steht weiter in der jeweiligen Seite.
   ============================================================ */


/* ---------- 1. Kopfleiste ----------------------------------
   Bisher lag ueber dem Inhalt nur ein Verlauf, der nach unten
   ins Durchsichtige lief. Ueberschriften und Fliesstext liefen
   sichtbar dahinter durch. Jetzt eine deckende Leiste mit
   klarer Unterkante - der Inhalt verschwindet darunter, statt
   halbtransparent hindurchzuscheinen. */
@media (max-width: 900px) {
  .site-nav {
    background: rgba(var(--night-rgb), .95);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(var(--snow-rgb), .10);
  }
  .site-nav::before { opacity: 0 }

  /* Sprungmarken (#ausstattung, #preise ...) landeten bisher
     unter der Leiste. */
  html { scroll-padding-top: 84px }
}


/* ---------- 2. Fusszeile -----------------------------------
   Bisher brach die Fusszeile auf dem Telefon in eine einzige
   zentrierte Spalte um. Ergebnis: ueber zwei Bildschirmhoehen
   Linkliste, bei der jede Zeile an einer anderen Stelle
   beginnt. Zwei linksbuendige Spalten halbieren die Laenge und
   geben allem eine gemeinsame Kante. */
@media (max-width: 560px) {
  /* 19.09.2026: Fahrzeuge, Service und Kontakt stehen untereinander
     und klappen erst beim Antippen auf (siehe fusszeile.js). Aus neun
     Links am Stueck werden so drei Zeilen. */
  .foot4-grid {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .foot4-col { border-top: 1px solid rgba(var(--snow-rgb), .12) }
  .foot4-col h3 { margin: 0 }
  .foot4-col .foot4-auf {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    min-height: 60px; padding: 1.15rem 0;
    background: none; border: 0; cursor: pointer;
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
    text-align: left;
  }
  .foot4-col .foot4-auf svg {
    flex: 0 0 auto; width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .foot4-col.ist-auf .foot4-auf svg { transform: rotate(180deg) }
  /* Zugeklappt: Liste raus aus dem Fluss. Ohne Knopf (kein Skript)
     bleibt sie sichtbar - so geht nichts verloren. */
  .foot4-col[data-klappbar] ul { display: none }
  .foot4-col[data-klappbar].ist-auf ul { display: grid; gap: .35rem; padding: .1rem 0 1.4rem }
  .foot4-col a { font-size: .95rem; line-height: 1.4 }
  /* In der Kontaktspalte stehen auf dem Telefon nur noch die Angaben
     selbst - die Zeichen davor (Brief, Hoerer, Nadel) sind bei rund
     107 px Spaltenbreite nicht mehr zu erkennen und kosteten nur Platz.
     Am Rechner bleiben sie. */
  .foot4-ct svg { display: none }
  .foot4-ct a { gap: 0 }
  .foot4-ct span,
  .foot4-ct address { overflow-wrap: anywhere; font-size: .78rem; line-height: 1.3 }
  /* Der Pulsring am Telefonlink haengt am Zeichen - ohne Zeichen
     saesse er im Nichts. */
  .foot4-ct .foot4-pulse { display: none }
  .foot4-in { text-align: left }
  .foot4-brand,
  .foot4-social { justify-content: flex-start }
  .foot4-desc { margin-left: 0; margin-right: 0 }
  .foot4-col ul { justify-items: start }

  /* Der Markenblock steht ueber beiden Spalten - sonst wird der
     Beschreibungstext auf halber Breite zur Schlucht. */
  .foot4-grid > *:first-child { grid-column: 1 / -1; margin-bottom: 1.5rem }
  /* 19.09.2026: mehr Luft zwischen den Zeilen - die drei Titel
     stehen jetzt weiter auseinander, die Kontaktangaben ebenso. */
  .foot4-col.ist-auf .foot4-ct { gap: .75rem }
  .foot4-social { gap: .9rem; margin-top: 1.9rem }

  .foot4-bar {
    margin-top: 1.4rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    gap: .4rem 1.2rem;
  }
  /* "MIETBEDINGUNGEN" passte nicht mehr in die Zeile und rutschte in
     eine zweite - dort aber mit demselben grossen Abstand wie zwischen
     den Spalten, dadurch wirkte der Link verwaist. Zeilenabstand
     getrennt vom Spaltenabstand. */
  .foot4-bar nav { justify-content: flex-start; gap: .35rem 1.2rem }
}

/* Tippflaechen: die Links in der Fusszeile waren 20 px hoch.
   Empfohlen sind 44 px - das kostet hier keine Optik, weil der
   Abstand zwischen den Zeilen ohnehin gebraucht wird. */
@media (max-width: 780px) {
  .foot4-col ul { gap: .2rem }
  .foot4-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .foot4-ct a { align-items: center; min-height: 44px }
  .foot4-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .foot4-social a { min-width: 44px; min-height: 44px }

  /* Schriftgroessen: unter 12 px wird auf dem Geraet
     zusammengekniffen. */
  .foot4-bar,
  .foot4-bar a,
  .foot4-bar span { font-size: .75rem; letter-spacing: .1em }

  /* Das Logo oben links war 43 x 38 px - knapp unter der
     empfohlenen Mindestflaeche von 44 px. */
  .site-nav .nav-logo { min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center }
  .foot4-col h3 { font-size: .78rem }
  .footer-meta { font-size: .75rem; letter-spacing: .12em }
  .mini-footer { font-size: .75rem }
}


/* ---------- 3. Gemeinsame Kleinigkeiten --------------------- */
@media (max-width: 780px) {
  /* Kein Bild darf breiter sein als sein Kasten. Fing bisher
     einzelne Ausreisser nicht ab. */
  img, video, canvas, svg { max-width: 100% }

  /* Die englische Zwischenueberschrift stand auf dem Telefon
     ohne Luft ueber der Ziel-Liste. */
  .ca-inner { padding-top: 3.5rem; padding-bottom: 3.5rem }
}


/* ---------- 4. Hauptknoepfe ---------------------------------
   Die grossen Handlungsknoepfe waren inline gesetzt: sie endeten
   je nach Textlaenge 50 bis 65 px vor dem rechten Rand, waehrend
   die Karten darueber bis an den Rand reichten. Auf dem Telefon
   nehmen sie jetzt die volle Breite - das raeumt die Kante auf und
   vergroessert nebenbei die Tippflaeche. */
@media (max-width: 560px) {
  .btn-gold,
  .price-cta,
  .footer-cta,
  .flow-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 52px;
  }
}


/* ---------- 5. Einblendungen -------------------------------
   Bloecke, die von rechts hereinkommen, standen vor dem
   Einblenden 28 px zu weit rechts. Auf einem 390 px breiten
   Schirm ragen sie damit ueber die Kante hinaus, solange sie
   noch nicht sichtbar geworden sind. Auf dem Telefon kommen
   sie deshalb von unten. */
@media (max-width: 560px) {
  .reveal-right { transform: translateY(20px) }
  .reveal-right.visible { transform: none }
}


/* ---------- 6. Einheitlicher Seitenrand ---------------------
   Innerhalb einer Seite starteten Abschnitte bei 16, 24 und
   48 px. Auf dem Telefon gilt jetzt ueberall dieselbe Kante. */
@media (max-width: 560px) {
  /* Buchungsseite: der Kopfbereich stand bei 16 px, der Rest der
     Website bei 24 px. */
  .page-hero { padding-left: 24px; padding-right: 24px }
  .page-hero-inner { padding-left: 0; padding-right: 0 }
  /* Hinweis: auf buchung.html sitzt der "You can camp anywhere"-Block
     bei 48 statt 24 px, weil die Fusszeile 24 px mitbringt und der
     Block als <section> ueber design-tokens.css noch einmal 24 px
     bekommt. Diese Token-Regel traegt !important UND eine ID in einem
     :not() - sie laesst sich von hier aus nicht sauber ueberschreiben.
     Gehoert in design-tokens.css bzw. in der Fusszeile geloest. */
}


/* ---------- 7. Showroom und Pflichtlink-Leiste --------------
   Die drei Showroom-Seiten und die Rechtstexte benutzen eigene
   Bedienelemente. Dort lagen Schrift und Tippflaechen noch
   unter dem, was auf dem Telefon sicher zu treffen ist. */
@media (max-width: 780px) {
  .ansichten button {
    font-size: .76rem;
    padding: .72rem .85rem;
    min-height: 40px;
  }
  .show-close,
  .end-back {
    font-size: .76rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .show-head .eyebrow,
  .hint { font-size: .76rem }

  /* Die feste Pflichtlink-Leiste am unteren Rand hatte 11,8 px
     Schrift und nur 12 px Hoehe je Link. */
  .legal-bar { font-size: .78rem; padding: .35rem 1rem }
  .legal-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 .25rem;
    /* direkt auf dem Link, weil die Kurzform "font:" der Leiste in
       einem <style> im Body steht und sonst gewinnt */
    font-size: .78rem;
  }
}


/* ---------- 5. Menue schliessen ----------------------------
   Das Vollflaechen-Menue (z-index 70) lag ueber der Kopfleiste
   (z-index 60). Damit war das Menuezeichen nach dem Oeffnen
   verdeckt - schliessen ging nur ueber einen Link. Solange das
   Menue offen ist, rueckt die Kopfleiste darueber. */
@media (max-width: 900px) {
  body.menue-offen .site-nav { z-index: 80 }
}

/* ---------- 6. Reihenfolge in der Kopfleiste --------------
   Auf dem Telefon: Logo links, Menuezeichen in der Mitte,
   "Buchen" rechts aussen. */
@media (max-width: 900px) {
  .site-nav .nav-logo   { order: 1 }
  .site-nav .nav-burger { order: 2; margin-left: auto; margin-right: auto }
  .site-nav .nav-cta    { order: 3 }
}


/* ============================================================
   8. UX-Durchgang Handy (17.09.2026)
   Grundlage: Messung aller Kundenseiten bei 390 und 360 px.
   a) Tippflaechen mindestens 44 x 44 px
   b) Schrift mindestens 12 px
   c) Pfad "Buchung" war Dunkelgruen auf Schwarz (1,6:1)
   Sicherung der alten Dateien: _backup-mobil-ux-2026-09-17
   ============================================================ */

/* ---------- 8a. Tippflaechen ------------------------------- */
@media (max-width: 900px) {
  /* Bausteine mit eigener Flaeche: einfach hoeher machen */
  .site-nav .nav-cta,
  .foot4-bar nav a,
  .kontakt-kurz a,
  .clines .cline,
  .ansichten button,
  .legal-bar a { min-height: 44px }

  .foot4-social li { flex: none }
  .foot4-col ul a { min-width: 44px }

  /* Unterstrichene Textlinks: die Linie soll am Wort bleiben.
     Deshalb waechst nicht der Link, sondern nur seine (unsichtbare)
     Tippflaeche - das Layout bleibt, wie es war. */
  a.btn-ghost,
  .process-more a,
  .breadcrumb a,
  button.finale-link,
  button.menu-back { position: relative }
  a.btn-ghost::after,
  .process-more a::after,
  .breadcrumb a::after,
  button.finale-link::after,
  button.menu-back::after {
    content: "";
    position: absolute;
    left: -10px; right: -10px; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Routenplaner: Steuerknoepfe (body davor, weil die Seite nach
     mobil.css noch einen eigenen Stilblock hat) */
  body .route-raus { min-height: 44px }
  body .zoomctl .zoom-btn { width: 44px; height: 44px }
  /* Unten rechts ist neben dem Play-Knopf nur ~150 px Platz:
     volle 44 px Hoehe, in der Breite so viel wie hineinpasst. */
  body .hud-ctl { gap: 2px }
  body .hud-ctl .btn { min-width: 40px; min-height: 44px }
  body .hud-ctl #btnView { padding: 0 6px; letter-spacing: .5px }
  body .hud-ctl #btnSpeed { padding: 0 4px }
  body .rc .tile-btn { height: 44px }
  body .hinweis-reihe .hinweis { position: relative }
  body .hinweis-reihe .hinweis::before {
    content: ""; position: absolute; inset: -7px;
  }
  body .panel .pnl-schalter { min-height: 44px }
}

/* Schmale Telefone (360 px): Steuerleiste lief schon vorher unter
   den Play-Knopf. Etwas enger setzen, damit "1x" frei bleibt. */
@media (max-width: 380px) {
  body .hud-ctl { padding-left: 3px; padding-right: 3px; gap: 0 }
  body .hud-ctl .btn { min-width: 36px }
  body .hud-ctl #btnView { padding: 0 3px; letter-spacing: 0 }
}

/* ---------- 8b. Schrift mindestens 12 px ------------------- */
@media (max-width: 900px) {
  .bk-fuss span,
  .step-glas .step-no,
  .step-glas p,
  .kontakt-kurz a,
  .plan-card .cap,
  .feature-btn small,
  .rate-cell .k,
  .veh-info .veh-no,
  .veh-no .veh-tag,
  .veh-facts span,
  .cf-row span,
  .s-card .s-handle,
  .ptile .ptile-art,
  .ptile small,
  .ptile b small,
  .best b small,
  .atelier-karte .ak-n { font-size: 12px }

  .step-glas .step-no { letter-spacing: .06em }

  /* Routenplaner */
  body .stage-km,
  body .pnl-schalter span,
  body .hud-label,
  body .hud-value small,
  body .hud-ctl .btn,
  body .must-ort,
  body .menu-eyebrow,
  body .rc-desc,
  body .carousel-hint,
  body .menu-back,
  body #btnView,
  body #btnSpeed,
  body .hud-value small.unit { font-size: 12px }
  body .hud-label { letter-spacing: .4px }
}

/* ---------- 8c. Pfad auf der Buchungsseite ------------------
   Eine alte, automatisch erzeugte Regel (theme-generated.css)
   faerbte "Buchung" dunkelgruen auf schwarzem Grund - praktisch
   unsichtbar. Jetzt wieder das vorgesehene helle Blau (ca. 8:1).
   Gilt bewusst fuer Handy UND Desktop. */
body[data-fsc-page="buchung"] nav.breadcrumb > span.current[aria-current] {
  color: #9BB6C4 !important;
}


/* ---------- 9. Buchungsmaske gut lesbar (18.09.2026) -------
   Die Maske auf der Startseite war auch fuer normale Augen klein.
   Die Beschriftungen sind Versalien in schmaler Monoschrift - die
   brauchen mehr als das Mindestmass von 12 px. */
@media (max-width: 900px) {
  .qb-kopf .qb-label { font-size: 14px }
  .qb-form .qb-feld label { font-size: 13.5px; letter-spacing: .1em }
  /* 19.09.2026: etwas flacher, seit Abholung und Rueckgabe auf dem
     Telefon nebeneinander stehen. 54 px bleiben deutlich ueber dem
     Mindestmass von 44 px fuer Tippflaechen. */
  .qb-form .qb-feld select,
  .qb-form .qb-feld input { font-size: 16.5px; height: 54px }
  .qb-form .qb-btn { font-size: 14px; height: 54px }
  .qb-sub span { font-size: 16px }
  .qb-note { font-size: 15.5px }
}


/* ---------- 9. Kopfleiste zweizeilig (19.09.2026) ----------
   Auf dem Telefon standen Logo, Menuezeichen, Umschalter und
   "Buchen" in einer Reihe - vier Flaechen auf 390 px, jede zu
   dicht an der naechsten. Jetzt zwei Zeilen mit denselben
   Kanten: oben Logo links und "Buchen" rechts, darunter das
   Menuezeichen links und Hell/Dunkel rechts. Nur bis 560 px -
   am Rechner und auf dem Tablet bleibt die Leiste einzeilig. */
@media (max-width: 560px) {
  .site-nav {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    row-gap: .5rem;
    column-gap: 1rem;
    padding: .7rem clamp(1.2rem, 4vw, 2.5rem) .8rem;
  }
  .site-nav .nav-logo      { grid-column: 1; grid-row: 1; justify-self: start }
  .site-nav .nav-cta       { grid-column: 2; grid-row: 1; justify-self: end }
  .site-nav .nav-burger    { grid-column: 1; grid-row: 2; justify-self: start; margin: 0 }
  .site-nav .thema-schalter{ grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0 }

  /* Die Leiste ist jetzt hoeher - Sprungmarken muessen tiefer
     ansetzen, sonst landet die Ueberschrift dahinter. */
  html { scroll-padding-top: 142px }

  /* Mit der zweiten Zeile ist die Kopfleiste auf 127 px gewachsen.
     Der Seitenanfang begann aber weiter bei 112 px - die oberen
     Zeilen der Ueberschrift lagen dadurch hinter der Leiste.
     (19.09.2026) */
  .page-head { padding-top: 9.5rem }
}


/* ---------- 10. "You can camp anywhere" (19.09.2026) --------
   Der Block stand auf der Startseite schon zweispaltig - Claim
   oben, darunter der Camper links und die Staedte rechts daneben -
   auf allen anderen Seiten dagegen noch untereinander. Hier steht
   die Fassung der Startseite fuer alle Seiten; weil mobil.css als
   letzte Datei geladen wird, gilt sie ueberall gleich. */
@media (max-width: 900px) {
  .ca-row   { grid-template-columns: 1fr auto; gap: 1.2rem 1rem; align-items: center }
  .ca-claim { grid-column: 1 / -1; white-space: normal;
              font-size: clamp(1.8rem, 7vw, 2.6rem) }
  .ca-track { height: 74px; min-width: 90px }
  .ca-ticker{ font-size: clamp(1.35rem, 5.6vw, 2rem); height: 5.3em }
}
@media (max-width: 420px) {
  .ca-track { height: 64px; min-width: 70px }
  .ca-ticker{ font-size: 1.3rem }
}


/* ---------- 11. Kontaktkarte ohne grosse Bildmarke ----------
   (19.09.2026) Die Bildmarke stand auf dem Telefon 260 x 232 px
   ueber den Angaben - fast ein halber Bildschirm fuer ein Zeichen,
   das oben in der Kopfleiste ohnehin steht. Sie ist nur
   ausgeblendet, nicht entfernt; am Rechner bleibt sie. */
@media (max-width: 560px) {
  .card-logo { display: none }
  /* 19.09.2026: Antwort, Uebergabe und Standort stehen auf dem
     Telefon nicht mehr ueber dem Namen - dieselben drei Angaben
     stehen weiter oben auf der Seite schon einmal. Damit beginnt
     die Karte direkt mit "Anna Gante Reisemobile". Die gepunktete
     Trennlinie darunter geht mit: sie haette nichts mehr zu
     trennen. Beides nur ausgeblendet, am Rechner unveraendert. */
  .card-facts { display: none }
  .vcard-divider { display: none }
}


/* ---------- 12. Ablauf als Zeitleiste (19.09.2026) ----------
   Auf dem Telefon stand jeder der acht Schritte in einer eigenen
   Glaskarte mit Bild - acht Kaesten untereinander, ueber 5000 px.
   Hier steht stattdessen eine schlichte Zeitleiste: ein Quadrat mit
   der Nummer, eine duenne Linie von Schritt zu Schritt, daneben
   Ueberschrift und Text. Die Bilder sind nur ausgeblendet, nicht
   entfernt; ab 561 px bleibt der Ablauf wie er war. */
@media (max-width: 560px) {
  /* Die gestrichelte Linie ist am Rechner ein SVG hinter dem Zickzack -
     in einer Spalte hat sie nichts mehr zu verbinden. */
  .flow-svg { display: none }

  .flow-steps { display: block }
  .flow-step {
    position: relative;
    display: flex; align-items: flex-start; gap: 1.1rem;
    margin-bottom: 0; padding-bottom: 3rem;
  }
  .flow-step:last-child { padding-bottom: 0 }
  /* Die Verbindung: vom unteren Rand des Quadrats bis zum naechsten,
     mittig unter ihm (20 px = halbe Quadratbreite). */
  .flow-step::before {
    content: ""; position: absolute;
    left: 23.5px; top: 56px; bottom: 6px; width: 1px;
    background: rgba(var(--snow-rgb), .18);
  }
  .flow-step:last-child::before { display: none }

  /* Aus dem Kreis wird ein Quadrat - und darin steht das Bild des
     Schritts statt der Nummer (ablauf-handy.js schiebt es hierher).
     Die Nummer bleibt im Markup fuer den Fall, dass kein Bild da ist. */
  .flow-step .flow-dot {
    width: 48px; height: 48px; border-radius: 8px;
    background: rgba(var(--snow-rgb), .06);
    border: 1px solid rgba(var(--snow-rgb), .16);
    color: var(--snow); font-size: .9rem;
    overflow: hidden; padding: 0;
  }
  /* Pine als Grund, wie bei den Zeichenkreisen auf den anderen Seiten.
     Die Bilder sind freigestellt - deshalb ganz hineinpassen lassen
     (contain), nicht zuschneiden: das Objekt soll vollstaendig zu
     sehen sein, so wie am Rechner. */
  .flow-step .flow-dot.hat-bild {
    font-size: 0; background: var(--pine);
    border-color: rgba(var(--snow-rgb), .10);
    padding: 6px;
  }
  /* Die Seite gibt den Bildern in den geraden Schritten eine feste
     Hoehe (fuer die Karten am Rechner gedacht). In der Marke ragten
     sie damit unten heraus und sassen sichtbar schief. Der zweite
     Selektor sticht diese Regel, ohne sie zu aendern. */
  .flow-step .flow-dot.hat-bild {
    display: flex; align-items: center; justify-content: center;
  }
  /* Feste Masse statt Prozent: die Seite gibt den Bildern eigene
     Hoehen (fuer die Karten am Rechner gedacht), und eine
     Prozentangabe hat sich dagegen nicht durchgesetzt - die Objekte
     ragten aus der Marke heraus und sassen sichtbar schief. */
  .flow-step .flow-dot img,
  .flow-step:nth-child(even) .flow-dot img {
    display: block; width: 36px; height: 36px; min-height: 0;
    object-fit: contain; object-position: center;
    margin: 0; max-width: none; transform: none;
    filter: none;
  }
  /* Beim letzten Schritt steht eine Nadel statt einer Nummer - sie
     wuerde hinter dem Bild verschwinden. */
  .flow-step .flow-dot-pin.hat-bild svg { display: none }

  /* Die Karte wird zur reinen Textspalte - kein Glas, kein Schatten,
     keine Polsterung. */
  .flow-card {
    flex: 1 1 auto; min-width: 0; max-width: none;
    padding: 0; border-radius: 0; box-shadow: none;
  }
  .flow-card::before, .flow-card::after { display: none }
  /* Die Ueberschrift soll oben mit der Kachel abschliessen. Der
     Zeilenabstand legt ueber jede Zeile eine halbe Leerzeile
     ((1,3 - 1) x 16 px / 2 = 2,4 px); die wird hier abgezogen, damit
     die Oberkante der Buchstaben auf der Oberkante der Kachel
     sitzt und nicht die unsichtbare Zeilenbox. */
  .flow-card h2 { font-size: 1rem; font-weight: 600; line-height: 1.3;
                  margin: -2.4px 0 0 }
  .flow-card p  { font-size: .86rem; line-height: 1.55; margin-top: .4rem;
                  color: rgba(var(--snow-rgb), .62) }
  /* Nur die Bilder ausblenden, die noch in der Karte stehen - das in
     der Marke muss sichtbar bleiben. */
  .flow-card > .flow-shot, .flow-card > .flow-obj { display: none }

  /* Am Rechner tritt jeweils der Schritt hervor, der gerade im Bild
     steht - die anderen stehen auf 38 %. In der kompakten Zeitleiste
     liest sich das wie ausgegraute, nicht erreichbare Schritte.
     Hier stehen alle acht gleich hell. */
  .flow-track.is-live .flow-step { opacity: 1 }
}


/* ---------- 13. Menue faehrt von rechts herein (19.09.2026) ------
   Bisher deckte das Menue die ganze Flaeche ab - man verlor beim
   Oeffnen den Bezug zur Seite. Jetzt faehrt links eine Tafel von
   oben herunter, dahinter bleibt die Seite abgedunkelt sichtbar -
   die Tafel kommt dort heraus, wo auch das Menuezeichen steht.
   Geschlossen wird ueber das Kreuz oben links, die Esc-Taste oder
   einen der Punkte. Am Rechner aendert sich nichts - dort gibt es
   das Menue ohnehin nicht. */
@media (max-width: 700px) {
  .nav-menue {
    left: 0; right: auto; top: 0; bottom: 0;
    width: min(84vw, 340px);
    justify-content: flex-start;
    padding: 8.5rem clamp(1.4rem, 6vw, 2rem) 2.4rem;
    overflow-y: auto;
    background: rgba(var(--night-rgb), .98);
    border-right: 1px solid rgba(var(--snow-rgb), .10);
    box-shadow: 40px 0 70px -40px rgba(0, 0, 0, .9);
  }
  /* Die Abdunklung liegt hinter der Tafel und deckt den Rest des
     Bildschirms ab - so wird nichts versehentlich angetippt. */
  .nav-menue::before {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: nm-schleier .45s var(--lux, ease) both;
  }
  .nav-menue.ist-auf { animation: nm-tafel .5s cubic-bezier(.16, 1, .3, 1) both }
  /* Die Punkte stehen sofort - sie kommen mit der Tafel herein,
     statt einzeln nachzuflattern. */
  .nav-menue.ist-auf a { animation: nm-rein .4s var(--lux, ease) forwards }
  .nav-menue a { font-size: clamp(1.45rem, 6.5vw, 1.9rem) }
  /* "Camper buchen" stand in Gold - laut Markenrichtlinien bleibt
     Gold dem Zeichen und den Sternen vorbehalten. Weiss mit dunkler
     Schrift hebt sich auf der dunklen Tafel genauso deutlich ab. */
  .nav-menue .nm-cta {
    background: var(--snow);
    color: var(--night);
  }

  @keyframes nm-tafel   { from { transform: translateY(-100%) } to { transform: none } }
  @keyframes nm-schleier{ from { opacity: 0 } to { opacity: 1 } }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .nav-menue.ist-auf, .nav-menue::before { animation: none }
}