/* ── Hero overflow fix (tape darf rausschauen) ── */
    .hero-wrap { overflow: visible; }

    /* ── Sponti-Begleiter: kleiner auf kurzen/Querformat-Viewports ── */
    @media (max-height: 700px) {
      :root { --companion-reserve: 190px; }
      /* Konstante neu berechnet für 190px-Figur, companion-left -1.4rem(-22.4px): -22.4+190+20=187.6 */
      .sponti-bubble       { right: calc(187.6px - 100vw); }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      :root { --companion-reserve: 110px; }
      .sponti-companion   { left: -.4rem; bottom: -.8rem; } /* ebenfalls 0.8rem weiter rechts als ursprünglich (-1.2rem) */
      /* Konstante neu berechnet für 110px-Figur + companion-left -.4rem(-6.4px): -6.4+110+20=123.6 */
      .sponti-bubble       { right: calc(123.6px - 100vw); }
    }

    /* ── Desktop Layout (≥ 860px): zwei Spalten ── */
    /* Handy/Tablet Querformat: Hero + Content nebeneinander */
    @media (orientation: landscape) and (max-height: 600px) {
      /* #screen-result.screen.active statt bloss #screen-result: eine
         ID-Regel ohne .active gewinnt sonst per Spezifität immer gegen
         .screen{display:none!important} — #screen-result war dadurch auf
         diesen Breakpoints IMMER sichtbar, unabhängig vom aktiven Screen
         (sobald einmal befüllt, z. B. nach showResult()), und überlagerte
         andere Screens wie #screen-skip. */
      #screen-result.screen.active {
        display: grid !important;
        grid-template-columns: 42% 1fr;
        gap: 1rem;
        align-items: start;
        padding: .5rem 1rem 1rem;
      }
      #hero-section { }
      .hero-wrap { margin: 1.5rem 0 0; }
      .result-meta-line { margin: 0; padding-bottom: 1.2rem; }
      .hero-shape, .gallery-stack { aspect-ratio: 3 / 2; min-height: unset; }
      .result-body { padding: 0; }
    }

    /* Zwei-Spalten-Layouts: Beschreibung unter Bild zeigen, im result-body verstecken */
    @media (min-width: 600px) {
      .hero-description { display: block; }
      .result-tagline   { display: none; }
      .hero-top-links   { display: block; }
      .result-top-links { display: none; }

      /* Bestätigungsseite: Beschreibung ausnahmsweise rechts bei Titel/
         Tourdaten statt links beim Bild (dort stehen ja die neuen Links). */
      #screen-result.is-pending-confirm .hero-description { display: none; }
      #screen-result.is-pending-confirm .result-tagline    { display: block; }
    }

    /* Tablet/Medium (600–859px) – alle Orientierungen */
    @media (min-width: 600px) and (max-width: 859px) {
      #screen-result.screen.active {
        display: grid !important;
        grid-template-columns: 48% 1fr;
        gap: 1.5rem;
        align-items: start;
        padding: 1rem 1.5rem 2rem;
      }
      #hero-section { }
      .hero-wrap { margin: 1.5rem 0 0; }
      .result-meta-line { margin: 0; padding-bottom: 1.2rem; }
      .hero-shape, .gallery-stack { aspect-ratio: 3 / 2; min-height: unset; }
      .result-body { padding: 0; }
    }

    /* ── Mobile Querformat (<500px hoch): Pro-Screen-Konzept ──
       Phones im Querformat haben zu wenig Höhe für das zentrierte
       Fixed-Layout (Figur überlagert Inhalte, Buttons werden geclippt).
       Lösung: body wird zum 2-Zeilen-Grid (Header/Inhalt); sobald die
       Companion-Figur sichtbar ist (Klasse is-idle, s. SPONTI_SCREENS in
       app.js), schaltet :has() zusätzlich auf 2 Spalten (Figur+Blase links,
       Screen-Inhalt rechts) — rein deklarativ, keine JS-Änderung nötig.
       Die 50%-Spaltengrenze verhindert hart, dass die Sprechblase je in
       die rechte Spalte hineinragen kann, unabhängig von der Textlänge.
       #screen-result bleibt hier unangetastet: die eigene Landscape-Grid-
       Regel weiter oben (max-height:600px, 42%/1fr) gilt unverändert für
       Ergebnis UND Bestätigung. Muss NACH den breitenbasierten Grid-Regeln
       (Querformat-600px, Tablet-600-859px) stehen, da gleiche Spezifität
       +!important per Quellreihenfolge entscheidet. */
    @media (orientation: landscape) and (max-height: 500px) {
      body {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
        height: 100%;
        overflow: hidden;
      }
      /* Ein gemeinsamer Hintergrund für beide Spalten (statt je einem
         eigenen Bild pro Spalte, was an der 50%-Grenze eine sichtbare Naht
         erzeugt) - das Topo-Bild kommt vom body als Grid-Container, beide
         Kind-Elemente bleiben selbst transparent. */
      body { background: url('/assets/img/bg-topo.png') center top / cover no-repeat scroll; }
      .app-header  { grid-column: 1 / -1; grid-row: 1; }
      .app-content { grid-row: 2; grid-column: 1 / -1; background: none; }
      .sponti-companion { display: none; }

      /* Sobald Figur sichtbar (is-idle), zweispaltig - links schmaler
         (~42%) statt exakt hälftig, da die rechte Spalte mit Formularen/
         Buttons mehr Raum braucht als Figur+Blase. */
      body:has(.sponti-companion.is-idle) { grid-template-columns: 42% 58%; }
      body:has(.sponti-companion.is-idle) .sponti-companion {
        display: flex;
        position: relative;
        bottom: auto;
        left: auto;
        grid-row: 2;
        grid-column: 1;
        /* flex-end+flex-start: Figur unten links in der Spalte, wie im
           Hochformat (dort fixed bottom-left) - statt vertikal zentriert. */
        align-items: flex-end;
        justify-content: flex-start;
        padding: 0 .5rem .75rem .75rem;
        background: none;
        overflow: visible;
      }
      body:has(.sponti-companion.is-idle) .app-content { grid-column: 2; }

      /* Figur deutlich grösser, aber Figur+Blase bleiben zusammen innerhalb
         der Spaltenbreite. Die Blase ist im DOM ein Kind von
         .sponti-figure-wrap (absolut positioniert, wie im Hochformat) statt
         ein Flex-Geschwister - deshalb hier weiterhin absolut, mit
         denselben Hochformat-Prinzipien neu verankert: wächst von Kopf-/
         Mundhöhe aus nach oben (bottom statt top+translateY), sitzt rechts
         neben statt über der Figur (left:78% statt 58%, da hier neben statt
         über dem Kopf positioniert). */
      .sponti-figure-wrap {
        width: clamp(170px, 50vh, 260px);
        height: clamp(170px, 50vh, 260px);
        flex-shrink: 0;
        overflow: visible;
      }
      .sponti-bubble {
        position: absolute;
        top: auto;
        bottom: 50%;
        /* 58% statt 78% - gleicher Wert wie im Hochformat (dort exakt für
           die Kopf-/Körperbreite der Figur berechnet, s. Kommentar an der
           Basis-Regel oben), rückt die Blase sichtbar näher an den Körper
           statt mit Lücke daneben zu schweben. */
        left: 58%;
        right: auto;
        margin-left: 0;
        transform: none;
        width: clamp(115px, 18vw, 160px);
        max-width: none;
        min-width: 0;
        font-size: .78rem;
        line-height: 1.28;
        padding: .45rem .6rem .55rem;
      }

      /* height:100% statt auto: füllt die volle Spaltenhöhe, erst dadurch
         zentriert justify-content:center (s.u.) den Inhalt tatsächlich
         vertikal - mit height:auto sass der Screen oben in .app-content
         ohne freien Raum zum Zentrieren ("klebt oben"). */
      .screen.active { height: 100% !important; min-height: unset !important; }
      #screen-start, #screen-loading { padding-bottom: 0; }

      #screen-start.screen.active,
      #screen-loading.screen.active,
      #screen-error.screen.active,
      #screen-no-routes.screen.active,
      #screen-weather-block.screen.active,
      #screen-donation-thanks.screen.active,
      #screen-guest-profile.screen.active {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Mehr Bottom- als Top-Padding statt exakt 50/50: bei wenig Inhalt
           (nur ein paar Buttons) verschiebt sich der zentrierte Block dadurch
           sichtbar nach oben statt exakt mittig zu wirken. Weniger Padding
           links als rechts, damit der Inhalt nicht mit grossem Leerraum von
           der Companion-Spalte abrückt. */
        padding: .75rem 2rem 4.5rem 1rem;
        gap: 1.5rem;
      }
      /* Buttons/Picker dürfen breiter werden als die mobile Portrait-
         Begrenzung (280-320px) - die rechte Spalte hat hier deutlich mehr
         Platz, sonst wirkt sie trotz Zentrierung leer. */
      #screen-start .btn-start-big, #screen-loading .btn-start-big,
      #screen-error .btn-start-big, #screen-no-routes .btn-start-big,
      #screen-weather-block .btn-start-big, #screen-guest-profile .btn-start-big,
      #screen-donation-thanks .btn-start-big {
        max-width: 400px;
      }

      #screen-skip.screen.active {
        display: flex !important;
        flex-direction: column;
        padding: .75rem 1rem;
      }

      /* Login: Hauptbutton links, Felder/Sekundär-Buttons rechts (kein
         Companion auf diesem Screen, eigene Spalten statt Grid-Spalte 2). */
      #screen-login.screen.active {
        display: flex !important;
        padding: .75rem 1.5rem;
      }
      #login-form {
        display: grid;
        grid-template-columns: 42% 1fr;
        grid-template-areas: "main core" "main actions";
        align-items: center;
        gap: 1.25rem 1.5rem;
      }
      .login-main { max-width: none; justify-self: center; }
      .login-core, .login-actions { max-height: 100%; overflow-y: auto; }
    }

    /* Desktop: zusätzlich min-height:600px, damit breite-aber-kurze
       Viewports (z.B. grosse Phones im Querformat, >860px breit aber <500px
       hoch) nicht das Zwei-Spalten-Grid mit 360px-Figur bekommen, sondern
       automatisch im mobilen Flex-Layout bzw. der eigenen Querformat-Regel
       weiter oben (orientation:landscape and max-height:600px) bleiben.
       600 statt 700 gewählt, weil die 700er-Schwelle eine Lücke zwischen
       600-700px Fensterhöhe offen liess, in die viele ganz normale (nicht
       maximierte) Desktop-Browserfenster fallen — die landeten fälschlich
       im mobilen Layout statt im Desktop-Grid. 600 schliesst direkt an die
       Querformat-Regel an, ohne erneut Phone-Querformat einzuschliessen
       (deren Höhe liegt klar darunter). */
    @media (min-width: 860px) and (min-height: 600px) {
      body { align-items: center; justify-content: center; }

      .app-header {
        max-width: 980px;
        width: 100%;
        margin: 0 auto;
        padding-left: 2rem;
        padding-right: 2rem;
      }

      .app-content {
        max-width: 980px;
        width: 100%;
        margin: 0 auto;
      }

      /* Profil-/Account-Menü hängt am Gast-/Profil-Chip im Header - der
         sitzt hier aber nicht mehr am Viewport-Rand, sondern an der rechten
         Kante der zentrierten 980px-Karte (s. .app-header oben). Ohne diese
         Anpassung bleibt .profile-switcher-overlay bei padding-right:1rem
         vom echten Viewport-Rand verankert und das Menü schwebt auf breiten
         Screens sichtbar losgelöst neben statt unter dem Chip. */
      .profile-switcher-overlay {
        padding-right: calc(max(0px, (100vw - 980px) / 2) + 2rem);
      }

      /* Sponti-Begleiter: nicht mehr am Viewport-Rand, sondern an der
         linken Kante der zentrierten 980px-Karte (wie Header/Content),
         passend zur Logo-Position. left-Offset 2rem entspricht dem
         Header-padding-left, damit die Figur unter dem Logo startet.
         Figur etwas grösser (300px statt 264px), aber bewusst als fixer,
         gekappter Wert statt vw-basiert — wächst nicht unbegrenzt auf sehr
         breiten Screens. --companion-reserve (statt nur .sponti-figure-wrap
         direkt) überschrieben, damit die padding-bottom-Reservierung auf
         #screen-start/#screen-loading (s. dort) automatisch mitskaliert —
         sonst reserviert das Layout zu wenig Platz und die Figur ragt in
         den Inhaltscontainer hinein. Sprechblase bleibt bewusst in der
         linken Spalte (max-width statt bis-zum-Header-Button, s. 4-Zonen-
         Komposition weiter unten). */
      :root { --companion-reserve: 300px; }
      .sponti-companion {
        left: calc(max(0px, (100vw - 980px) / 2) + 2rem);
      }
      /* Auf Mobile füllt width:auto den Raum zwischen left/right (beide
         explizit gesetzt) - eine feste, vom Text unabhängige Breite. Auf
         Desktop ist right:auto nötig (kein fixer Viewport-Rand-Bezug mehr,
         s. .sponti-companion oben); width:auto/fit-content würde dort aber
         zum Shrink-to-fit-Fall mit winzigem verfügbarem Platz (~126px
         innerhalb der nur 300px breiten .sponti-figure-wrap, links bei 58%,
         wegen der Kopf-Aussparung - s. Kommentar oben an .sponti-bubble)
         und sofort auf min-width 170px kollabieren. Deshalb explizite,
         feste Breite (300px, wie der mobile Richtwert) statt auto/fit-
         content - Box wächst bewusst über die Figur-Box hinaus
         (overflow:visible), genau wie die Blase generell schon immer nach
         oben über ihre Box hinauswächst. */
      .sponti-bubble {
        right: auto;
        width: 300px;
      }

      /* Start-Screen folgt bewusst demselben Aufbauprinzip wie auf Mobile
         (zentrierter Flex-Inhalt) — nur die Ergebnisseite hat ein eigenes,
         abweichendes Zwei-Spalten-Layout. Hier reicht die bereits oben
         vorhandene Karten-Zentrierung (.app-content max-width:980px) plus
         die grössere Figur/Sprechblase für den Desktop-Massstab. */

      /* Result: Hero links, Content rechts */
      #screen-result.screen.active {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
        padding: 1rem 2rem 2rem;
      }

      #hero-section { }
      .hero-wrap { margin: 1.5rem 0 0; }
      .result-meta-line { margin: 0; padding-bottom: 1.2rem; }

      .hero-shape, .gallery-stack {
        aspect-ratio: 3 / 2;
        min-height: unset;
      }

      .result-body { padding: 0; }

      /* Start + Loading: zentriert in Kartenmitte */
      #screen-start, #screen-loading {
        min-height: 70vh;
      }
    }