/* ============================================================
   mobile.css — Handy-Optik (≤ 768 px) für index.php, new_tour.php, planner.php.
   Scope-Notiz: „Mobile-Ready" (Scope: Optik, nicht Funktion; Arbeitsplatz bleibt Desktop).

   DOPPELTE ABSICHERUNG:
   1. Die Datei wird in allen drei Seiten mit media="(max-width: 768px)" im <link> eingebunden —
      am Desktop wendet der Browser sie gar nicht an.
   2. Jede Regel steht ZUSÄTZLICH im @media-Block unten — selbst ein späteres Einbinden ohne
      Media-Attribut träfe den Desktop nicht.
   Ladereihenfolge: der <link> steht in JEDER Seite NACH app.css/landing.css UND nach dem
   seitenlokalen Inline-<style> (new_tour.php, index.php) — sonst verlören gleich-spezifische
   Regeln hier gegen die Inline-Regeln (Kaskade: später gewinnt).
   Regeln, die app.css im eigenen ≤768-Block schon trägt (Stapel Karte/Inhalt, Roadbook-Mobile,
   Etappen-Card, Trip-Pass-Popover-Grid), werden hier NICHT wiederholt.
   Farben nur über bestehende Tokens, kein neues Hex. Kein Verhalten — reine Optik.
   Tokenizer-Falle: keine Glob-Muster wie „x-star-slash" in Kommentaren.
   ============================================================ */

@media (max-width: 768px) {

    /* ---------- Landing (index.php, .ld-*) ---------- */
    /* Kopfzeile: Tagline unter die Marke, Links + CTA in eine eigene, umbrechende Zeile
       (Screens IMG_6643-6646: nowrap lief rechts aus dem Viewport). */
    .ld a.ld-brand { flex-wrap: wrap; gap: 6px 14px; }
    .ld-brand span { flex: 1 1 100%; border-left: 0; padding-left: 0; white-space: normal; }
    .ld-nav { width: 100%; flex-wrap: wrap; white-space: normal; gap: 12px 18px; justify-content: space-between; }
    /* FAQ: die Seitenspalte steht am Handy ÜBER der Liste — sticky ließ sie über den Fragen kleben. */
    .ld-faq-side { position: static; }

    /* ---------- Site-Footer (lib/site_footer.php, alle Seiten) ---------- */
    /* Zeilen untereinander, alle linksbündig (Screen IMG_6663: versetzte Umbrüche). */
    .site-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
    .site-footer .sf-links { gap: 6px 18px; }

    /* ---------- Anlege-Flow (new_tour.php, .nt-*) ---------- */
    /* Übernachtungs-Kacheln einspaltig (Screen IMG_6648: rechte Spalte lief aus der Karte —
       1fr-Spalten können nicht unter die Inhaltsbreite schrumpfen). */
    .nt-otiles { grid-template-columns: 1fr; }
    /* Schnitt-Screen: Liste oben, Karte unten (Screen IMG_6649: Karte war ein 30-px-Streifen).
       Die Karte wird beim Öffnen erzeugt und passt sich per fitBounds dem Container an. */
    .nt-cut { flex-direction: column; }
    .nt-cut-rail { flex: 0 0 55%; max-height: 55%; }
    .nt-cut-map { flex: 1 1 auto; height: auto; min-height: 0; }
    /* iOS-Auto-Zoom-Stopp: Eingabefelder < 16 px lassen Safari beim Fokus hineinzoomen und die Seite
       seitlich versetzt stehen (Screens IMG_6657/6661). bewusste Typo-Abweichung. */
    .nt-act, .nt-date, .nt-datefield input, .nt-cut-row-search input { font-size: 16px; }

    /* ---------- Planer (planner.php, app.css) ---------- */
    /* Kopf: Titel neben dem Badge in voller Breite, Kennzahl-Chips als eigene, umbrechende Zeile darunter
       (Screen IMG_6651: .v10-facts flex:none + margin-left:auto quetschten den Titel auf Wortbreite). */
    .tour-title-bar { flex-wrap: wrap; }
    .v10-ttl { flex: 1 1 0; }
    .v10-facts { flex: 1 1 100%; margin-left: 0; }
    /* Segmentierte Zeitraum/Reisende-Karte darf umbrechen statt rechts hinauszulaufen. */
    .v10-eck { display: flex; flex-wrap: wrap; max-width: 100%; }
    .v10-eck .v10-fact { flex: 1 1 auto; min-width: 0; }
    /* An-/Abreise- und Parkplatz-Tür (.pkc-*): nichts läuft seitlich hinaus; Suchfelder in Feldbreite. */
    .pkc-rail { overflow-x: hidden; }
    .txc-field-row .txc-field { min-width: 0; }
    .txc-field input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; }
    /* Abreise-Popover „Abreise erfolgt" (Screen IMG_6662): rechtsbündig, nie breiter als der Viewport. */
    .mk-st-menu { left: auto; right: 0; max-width: calc(100vw - 32px); }
    /* Maxi-Map (Lupe auf der Etappen-Mini-Karte, Screen IMG_6665): am Handy ohne Nutzen — aus. */
    button.mk-mzoom.mk-lupe { display: none; }
    /* iOS-Auto-Zoom-Stopp (s. o.) für die Planer-Felder. */
    .modal input, .pk-input, .mk-openinput { font-size: 16px; }

    /* Runde 2 ---------- */
    /* 1) Kopf: Aktivitäts-Icon aus (Platz) — damit entfällt der 46-px-Einzug von Titel UND Kennzahl-Chips
       (die Chips sitzen im Titel-Block .v10-ttl). Zeitraum/Reisende-Karte kompakter; sie öffnet beim Tippen
       bereits ihr Popover (openDatePop/openReisendePop) — kein neues Dropdown nötig. */
    .v10-badge { display: none; }
    .v10-eck .v10-fact { padding: 6px 9px; gap: 7px; }
    .v10-eck .v10-fpen { margin-left: 0; }
    /* 2+3) Verbindungszeile (Trip-Editieren UND Tür „Verbindung wählen"): das feste Raster (146/132 + 104/96 + 34 + 16 px)
       ist breiter als die Handy-Karte → Fahrrad-Chip und Pfeil wurden hinausgeschoben bzw. in den „+"-Knopf.
       Uhrzeit und Umstiege-Symbole teilen sich den Platz, Dauer/Fahrrad/Pfeil bleiben fest. Icon bleibt.
       Beide Varianten (Liste 146/104, Tür-Zeile 132/96) bewusst auf EIN Handy-Raster vereint (Review-Hinweis). */
    .tr-hd, .tr-row .tr-hd { grid-template-columns: minmax(96px, 1.2fr) minmax(0, 1fr) auto 30px 16px; column-gap: 9px; padding: 12px 12px; }
    .tr-row .pkc-bind { margin: 0 8px 0 0; }
    /* 4) Trip-Pass-Popover: Schild im Gold-Button größer (Text ist am Handy zweizeilig, 18 px wirkte winzig). */
    .tpw-cta svg { width: 24px; height: 24px; flex: none; }
    /* 5) Roadbook: Etappen-Navi über der Karte deutlicher — gleicher Farbwert wie app.css (rgba 35,38,26 = --rbs-stage-2),
       nur dichter (88 % → 55 % statt 62 % → 0 %). Spezifität wie das Original (body.rbs-dark .rbs-navbar). */
    body.rbs-dark .rbs-navbar { background: linear-gradient(rgba(35,38,26,.88), rgba(35,38,26,.55)); }
    /* 6) Unterlagen: der Inhaltsbereich stand per order:-1 ÜBER dem Menü und kollabierte auf ~130 px, weil der
       Inline-Style in planner.php (.unterlagen-pane flex:1) den Mobile-Stapel aus app.css (flex:none; height:60vh)
       überstimmt. Jetzt: Bereich in voller Inhaltshöhe (keine innere Scroll-Box) ÜBER dem Menü (order -1 wie im
       app.css-Stapel — der Site-Footer sitzt in der Menü-Spalte, „unter dem Menü" hieße „unter dem Footer");
       ulPaneScroll() (app.js) scrollt nach dem Menü-Tipp hinauf zum Bereich. */
    .unterlagen-pane { order: -1; flex: none; height: auto; min-width: 0; margin: 0 0 16px; }
    /* overflow:hidden der Pane (planner.php Inline-Style) bleibt bewusst stehen: bei height:auto wächst die Box mit dem
       Inhalt, nichts wird geschnitten (Review-Hinweis — wer je wieder eine feste Höhe setzt, muss das mitdenken). */
    .unterlagen-pane .ul-rb, .unterlagen-pane .ul-detail { flex: none; overflow: visible; }
    .unterlagen-pane .ul-rb { padding: 22px 18px 20px; }
    /* Leerzustand „Wähle links einen Bereich" (flex:1 in planner.php) hätte bei height:auto keinen Raum mehr —
       praktisch unsichtbar, weil switchTab sofort das Roadbook öffnet; defensiv trotzdem eine Mindesthöhe. */
    .unterlagen-pane .up-default { min-height: 30vh; }

}