:root {
    --bg: #0b0d10;
    --fg: #e8edf2;
    --muted: #8d99a6;
    --panel: rgba(12, 16, 21, 0.78);
    --warn: #b4381f;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    /* `100%` folgt der ein- und ausfahrenden Safari-Leiste nicht: im Querformat
       blieb unterhalb der Karte ein schwarzer Streifen stehen. `dvh` ist genau
       dafür gemacht; die Zeile darüber bleibt als Rückfall für ältere Browser. */
    height: 100dvh;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    overscroll-behavior: none;
}

/* touch-action: none — sonst behandelt Safari die Zwei-Finger-Geste als
   Seiten-Zoom, den `user-scalable=no` unterdrückt: das Pinch-Zoom der Karte
   kam am iPad gar nicht erst an. */
#map { position: absolute; inset: 0; touch-action: none;
    /*
     * **Flächenfarbe hinter der Karte, statt Verlauf.**
     *
     * MapLibre zeichnet den Himmel nur bis zum ungepolsterten Horizont. Seit
     * die optische Mitte per `padding` nach unten geschoben wird, klafft
     * darunter eine durchsichtige Lücke — bei `anchor: 1` (Standard) liegt
     * `padding.top` bei rund 90 % der Bildhöhe, die Lücke bestimmt also den
     * grössten Teil des sichtbaren „Himmels". Ein Verlauf dort wirkte als
     * Dunst; eine einzelne Farbe füllt dieselbe Lücke ohne den Dunst-Effekt,
     * ohne das schwarze Band von vorher wieder einzuführen (bei 75° und 85°
     * Neigung geprüft).
     */
    background: #a9c3e0;
}

.hud {
    /* Rechts Platz für den Anfasser, der aufgeklappt im Panel sitzt. */
    padding: 8px 46px 8px 10px;
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(8px);
}

.hud[hidden] { display: none; }

.hud-row { display: flex; gap: 8px; align-items: baseline; }
.hud-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; min-width: 56px; }
.hud-value { font-variant-numeric: tabular-nums; }

.banner {
    position: absolute;
    top: calc(var(--safe-top) + 10px);
    right: 10px;
    left: 10px;
    /* Über dem Start-Overlay (5): ein Fehler beim Kartenaufbau tritt auf,
       solange das Overlay noch steht — dort muss die Meldung lesbar und
       antippbar bleiben, nicht gedimmt dahinter liegen. */
    z-index: 6;
    /* Unter Quellenblock und Anfasser — sonst fängt eine Meldung die
       Klicks auf den Anfasser ab. */
    margin-top: 96px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--warn);
    color: #fff;
    /* Antippen blendet die Meldung aus (main.js). */
    cursor: pointer;
}

/* Der rechtliche Dauerhinweis sitzt direkt über dem Quellenvermerk: beide
   bleiben während der Fahrt sichtbar, ohne das HUD zu verbreitern. */
.disclaimer-fixed {
    position: absolute;
    left: 10px;
    /* Der Knopfstapel steht jetzt darüber, nicht daneben — der Hinweis darf
       die Breite nutzen und muss nicht mehr umbrechen. */
    right: 10px;
    /* **Oben statt unten (7.9.2026).** Unten verdeckten die drei Zeilen genau
       den Streifen, in dem der eigene Standort sitzen soll; der Anker musste
       deshalb vor ihnen haltmachen. Oben ist der Platz ohnehin Himmel. */
    top: calc(var(--safe-top) + 8px);
    z-index: 2;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--panel);
    color: var(--fg);
    font-size: 11px;
    font-weight: 600;
}

/* ⓘ in der Hinweiszeile: klappt die Quellen auf, der rechtliche Hinweis
   bleibt stehen. */
.quellen-toggle {
    display: inline-flex;
    vertical-align: -3px;
    margin: 0 2px 0 6px;
    padding: 0;
    appearance: none;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.quellen-toggle[aria-expanded="true"] { color: var(--fg); }
.quellen { color: var(--muted); }
.quellen[hidden] { display: none; }


/* MapLibres eigene Attribution bleibt sichtbar (Source-Attributions), der fixe
   Hinweis links daneben ist der geforderte dauerhafte Quellenvermerk. */
.maplibregl-ctrl-bottom-left { display: none; }
/* MapLibres eigener Vermerk ist ausgeblendet; sein Inhalt steht in der
   zusammengefassten Hinweiszeile oben (siehe main.js). */
.maplibregl-ctrl-bottom-right { display: none; }

/* --- Phase 2: Start-Overlay, Folgen-Schalter --- */

.start-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 8, 11, 0.86);
    backdrop-filter: blur(6px);
}

.start-overlay[hidden] { display: none; }

.start-card {
    max-width: 340px;
    text-align: center;
}

.start-card h1 { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.start-card p { margin: 0 0 16px; color: var(--muted); }

/* Rechtlicher Hinweis vor dem Start: bewusst in Vordergrundfarbe und über dem
   Knopf — wer startet, hat ihn gelesen. */
.start-disclaimer {
    color: var(--fg) !important;
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--warn);
}

.start-button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 14px 28px;
    background: var(--fg);
    color: #0b0d10;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.start-button:disabled { opacity: 0.5; }

.start-hint { margin-top: 16px !important; font-size: 12px; }

/* Sitzt über den Modi: nach dem Herumschauen im Manuell-Modus ist das der
   kürzeste Weg zurück, ohne den Modus zu wechseln. */
.recenter {
    /* Stapel von unten: Modi 44, „Zu mir" 88, Layer-Knopf 132, Panel 176. */
    position: absolute;
    right: 10px;
    bottom: calc(var(--safe-bottom) + 88px);
    z-index: 3;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

.recenter[hidden] { display: none; }

/* Kompass: nur im Manuell-Modus. Im Tracking bestimmt der Frame-Loop die
   Ausrichtung, dort waere der Knopf wirkungslos. Steht links neben „Zu mir",
   auf gleicher Hoehe — rechts von 240px ist frei, dort endet der Hinweistext. */
.compass {
    position: absolute;
    right: 64px;
    bottom: calc(var(--safe-bottom) + 88px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

.compass[hidden] { display: none; }

/* Die Nadel dreht mit der Karte, das Zifferblatt nicht. */
.compass svg { transition: transform 120ms linear; }

/* Rund und randlos: der Knopf trägt nur noch das Standardsymbol. */
.recenter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
}

/* Antippen-Info: unten über die volle Breite, damit lange Regeltexte lesbar
   bleiben. Über allem ausser dem Startbildschirm, aber unter dem Banner. */
.info-panel {
    /* Bewusst nicht über die volle Breite und nicht bis unten: rechts stehen
       Modi, „Zu mir" und das Layer-Panel, links unten Kameralage, Hinweis und
       Quellenvermerk. Ein Panel darüber macht die Knöpfe unerreichbar — im
       Test genau so aufgefallen. */
    position: absolute;
    left: 10px;
    /* Nicht über die halbe Breite: auf dem iPad lief der Text sonst quer über
       das Bild, und lange Regeltexte lesen sich in schmalen Spalten besser. */
    right: auto;
    max-width: min(420px, calc(100vw - 140px));
    bottom: calc(var(--safe-bottom) + 250px);
    z-index: 4;
    max-height: 34vh;
    overflow-y: auto;
    padding: 12px 40px 12px 14px;
    border-radius: 12px;
    background: var(--panel);
    backdrop-filter: blur(10px);
}

.info-panel[hidden] { display: none; }

.info-close {
    position: absolute;
    top: 8px;
    right: 8px;
    appearance: none;
    border: 0;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

.info-layer { margin: 12px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); }
.info-layer:first-child { margin-top: 0; }
.info-title { margin: 1px 0 4px; font-size: 14px; font-weight: 600; }
.info-title:first-child { margin-top: 0; }
/* Beschriftung und Wert nebeneinander, wie in der amtlichen Darstellung. Die
   Spalte ist schmal gehalten: im Cockpit zaehlt der Wert, nicht das Etikett. */
.info-row { display: grid; grid-template-columns: minmax(0, 88px) 1fr; gap: 8px;
    margin: 0 0 3px; font-size: 12px; line-height: 1.35; }
.info-key { color: var(--muted); overflow-wrap: anywhere; }
.info-value { color: var(--fg); overflow-wrap: anywhere; }
.info-value a { color: #7fb2ff; }
.info-detail { margin: 0 0 2px; font-size: 12px; color: var(--fg); line-height: 1.35; }
.info-empty { margin: 0; font-size: 12px; color: var(--muted); }
.info-warn { margin: 4px 0 0; font-size: 12px; color: #ff9d8a; font-weight: 600; }

/* Luftlinienmessung: Menü an der Long-Press-/Rechtsklick-Position (links/oben
   werden von measure.js gesetzt), Distanzanzeige oben links, wo sonst nichts
   steht. */
.measure-menu {
    position: absolute;
    z-index: 7;
    display: grid;
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(10px);
}

.measure-menu[hidden] { display: none; }

.measure-menu button {
    appearance: none;
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.measure-menu button:active { background: rgba(255, 255, 255, 0.12); }

.measure-panel {
    position: absolute;
    left: 10px;
    top: calc(var(--safe-top) + 40px);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(8px);
    font-variant-numeric: tabular-nums;
}

.measure-panel[hidden] { display: none; }

.measure-clear {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

/* Distanz je Streckenabschnitt, am Mittelpunkt der Linie (measure.js). */
.measure-label {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--panel);
    backdrop-filter: blur(6px);
    color: var(--fg);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

/* Kameralage: links unten, weil rechts die Modi und das Layer-Panel stehen. */
.anchor-control {
    display: grid;
    gap: 4px;
    /* Rechts Platz für den Anfasser (siehe .panel-block). */
    padding: 8px 46px 8px 12px;
    border-radius: 14px;
    background: var(--panel);
    backdrop-filter: blur(8px);
}

.anchor-control[hidden] { display: none; }

.camera-row { display: flex; align-items: center; gap: 8px; }

.anchor-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; min-width: 34px; }
.anchor-range { width: 110px; accent-color: var(--fg); }
.anchor-value { color: var(--fg); font-size: 11px; min-width: 62px; }

/* Zwei Modi statt eines Schalters: im Fahrzeug muss auf einen Blick klar sein,
   ob die Karte gerade selbst führt oder dem Finger gehört. */
.modes {
    position: absolute;
    right: 10px;
    bottom: calc(var(--safe-bottom) + 44px);
    z-index: 3;
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--panel);
}

.modes[hidden] { display: none; }

.mode-button {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.mode-button[aria-pressed="true"] {
    background: var(--fg);
    color: #0b0d10;
    font-weight: 600;
}

/* --- Phase 4a: Layer-Panel --- */

/* Rundes Icon statt Textknopf, wie die übrigen Knöpfe im Stapel. */
.layers-toggle {
    /* Unten rechts über den Modi: oben liegt das HUD, dessen Breite vom Inhalt
       abhängt — dort würde das Panel Zeilen verdecken. */
    position: absolute;
    right: 10px;
    bottom: calc(var(--safe-bottom) + 132px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

/* Gleicher Knopf wie .layers-toggle, nur im Manuell-Modus sichtbar (siehe
   setMode in main.js) — Position kommt vom Fluss des Knopfstapels. */
.shadow-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

.shadow-toggle[hidden] { display: none; }

/* Gleiches Muster wie .layers-panel: mittig und aus dem Knopfstapel
   herausgelöst, damit das Aufklappen die übrigen Knöpfe nicht verschiebt. */
.shadow-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: min(260px, calc(100vw - 40px));
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(8px);
    display: grid;
    gap: 10px;
}

.shadow-panel[hidden] { display: none; }

.shadow-row { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.shadow-row input { accent-color: var(--fg); }

.shadow-datetime {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--muted);
    background: transparent;
    color: var(--fg);
    font: inherit;
    color-scheme: dark;
}

/*
 * Mittig statt am Knopfstapel: die Liste ist inzwischen zu lang für eine feste
 * Ecke, und `position: fixed` (nicht `absolute`) entzieht sie bewusst dem
 * `.controls`-Stapel — sonst schöbe sie beim Aufklappen alle Knöpfe darunter
 * weg (siehe `.controls > *` unten). Eigenes Scrollen (`overflow-y`) statt
 * über den Bildschirmrand zu wachsen.
 */
.layers-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: min(300px, calc(100vw - 40px));
    max-height: min(75vh, 640px);
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(8px);
    display: grid;
    align-content: start;
    gap: 8px;
}

.layers-panel[hidden] { display: none; }

/* Gruppenüberschrift — derselbe Stil wie die Layer-Herkunft im Antippen-Panel. */
.layer-group {
    margin: 10px 0 -2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.layer-group:first-child { margin-top: 0; }

.layer-row {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.layer-row input { accent-color: var(--fg); }


/* --- Einklappbare Panels -------------------------------------------------
   HUD und Kameralage sind im Fahrbetrieb selten gebraucht und verdecken die
   Karte. Sie starten eingeklappt; sichtbar bleibt nur ein kleines Eck, dessen
   Pfeil zur Bildschirmmitte zeigt. Aufgeklappt dreht der Pfeil zurück. */
.panel-toggle {
    /* Sitzt in der Reihe neben seinem Panel, nicht darüber — siehe
       .panel-block. Dadurch steht der Pfeil immer am äusseren Ende des
       Menüs, auch wenn dessen Breite mit dem Inhalt wechselt. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Schmaler, hoher Griff statt quadratischem Knopf — er liest sich als
       Lasche am Rand des Menüs, nicht als eigener Knopf. */
    width: 26px;
    height: 54px;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 9px;
    background: var(--panel);
    backdrop-filter: blur(8px);
    color: var(--muted);
    cursor: pointer;
}

.panel-toggle[hidden] { display: none; }
/*
 * Panel und Anfasser als eine Reihe.
 *
 * `pointer-events` wie beim Knopfstapel: der Block spannt sich über die volle
 * Breite, darf die Karte darunter aber nicht blockieren — nur seine Kinder
 * nehmen Berührungen an.
 */
.panel-block {
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    /*
     * **Verankert an der Mitte des Griffs, nicht an der Oberkante.**
     *
     * Sonst wandert der Griff beim Auf- und Zuklappen: eingeklappt sass er am
     * oberen Rand des Blocks, aufgeklappt in der Mitte des Panels — gemessen
     * ein Sprung von 57 Pixeln. Mit der Verschiebung um die halbe eigene Höhe
     * bleibt der Griff stehen, und das Menü klappt symmetrisch um ihn herum
     * auf. Das erfüllt beide Vorgaben: mittig zum Menü und ortsfest.
     */
    transform: translateY(-50%);
}

.panel-block > * { pointer-events: auto; }

/*
 * **Beide Griffe am rechten Bildschirmrand.**
 *
 * Vorher sass der Griff direkt hinter dem Panel und wanderte mit dessen Breite
 * — oben stand er woanders als unten. Die Reihe ist deshalb rechtsbündig: die
 * rechte Kante des Menüs liegt am Bildschirmrand, der Griff darin ebenso, und
 * beide Griffe stehen übereinander.
 *
 * **Rechtsbündig und nicht über die volle Breite**: ein Menü über die ganze
 * Breite deckte den Streifen der Karte darunter ab und fing dessen
 * Berührungen ab — der Smoke-Test hat genau das gefunden.
 */
.panel-block { justify-content: flex-end; }

/*
 * **Aufgeklappt sitzt der Anfasser im Panel, eingeklappt steht er allein.**
 *
 * Der Zustand steckt am Panel (`hidden`), der Anfasser folgt ihm im DOM — ein
 * Geschwisterselektor genügt, es braucht keine zweite Zustandshaltung. Im
 * Panel bekommt er dessen Hintergrund und wird per negativem Aussenabstand
 * über den reservierten Rand gezogen.
 */
.hud:not([hidden]) ~ .panel-toggle,
.anchor-control:not([hidden]) ~ .panel-toggle {
    /* Um einen Rand ins Menü gezogen; mittig richtet ihn der Block aus. */
    margin-left: -40px;
    margin-right: 0;
    background: transparent;
    backdrop-filter: none;
}

/* Die Werte bezeichnen die Mitte des Griffs, nicht die Oberkante des
   Menüs — das Menü reicht von dort aus je zur Hälfte nach oben und unten.
   Genug Abstand zum Quellenblock, damit das aufgeklappte Menü darunter
   bleibt. */
.panel-block-top { top: calc(var(--safe-top) + 145px); }
.panel-block-bottom {
    /* Über dem Knopfstapel: der beginnt bei 744 von 966 px, und seit das Menü
       bis zum rechten Rand reicht, lagen beide übereinander. */
    bottom: calc(var(--safe-bottom) + 265px);
    transform: translateY(50%);
}

/* Aufgeklappt zeigt der Pfeil zurück nach aussen. */
.panel-toggle svg { transition: transform 140ms ease; }
.panel-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.panel-toggle[aria-expanded="true"] { color: var(--fg); }

/* --- Knopfstapel rechts ---------------------------------------------------
   Von oben nach unten: eigene Position, Kompass, Layer, Modi. Als Flex-Spalte
   statt mit festen Abständen, weil einzelne Knöpfe je nach Modus verschwinden
   und sonst Lücken im Stapel blieben. */
.controls {
    position: absolute;
    right: 10px;
    /* Nah am unteren Rand, nur der sichere Bereich (Home-Indikator) bleibt
       frei — der Puffer von früher war ein Rest aus der Zeit, als der
       Dauerhinweis noch unten sass (jetzt oben, siehe .disclaimer-fixed). */
    bottom: calc(var(--safe-bottom) + 16px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    /* Der Container spannt ein Rechteck über alle Knöpfe — samt der Lücken
       dazwischen. Ohne das hier fingen diese Lücken Fingerkontakte ab, und die
       Karte liess sich in einem breiten Streifen rechts unten nicht mehr
       schieben. Die Knöpfe selbst nehmen ihre Ereignisse wieder an. */
    pointer-events: none;
    /* Bei Inaktivität dezent zurücktreten, ohne unerreichbar zu werden —
       ein Fingertipp irgendwo (siehe main.js) holt die volle Deckkraft
       sofort zurück. */
    transition: opacity 500ms ease;
}

.controls > * { pointer-events: auto; }

.controls.idle { opacity: 0.35; }

/*
 * Die Kinder sitzen jetzt im Fluss des Stapels, nicht mehr absolut.
 * `.layers-panel` bewusst ausgenommen: die bleibt fest positioniert
 * (Bildschirmmitte), sonst schöbe sie beim Aufklappen die übrigen Knöpfe
 * im Stapel weg — bei der inzwischen langen, gruppierten Liste störend.
 */
.controls > .recenter,
.controls > .compass,
.controls > .layers-toggle,
.controls > .shadow-toggle,
.controls > .modes {
    position: static;
    right: auto;
    bottom: auto;
}


/* --- Querformat auf dem Telefon ------------------------------------------
   Hier ist die Höhe die knappe Grösse: aufrecht belegen die Bedienelemente
   18 % der Höhe, quer waren es 39 %. Alles wird kompakter, damit von der Karte
   etwas übrig bleibt. Der rechtliche Hinweis bleibt sichtbar — er ist
   freigabepflichtig und darf nicht wegfallen, nur kleiner werden. */
@media (max-height: 520px) {
    .controls {
        gap: 5px;
        bottom: calc(var(--safe-bottom) + 8px);
    }

    .recenter,
    .compass,
    .layers-toggle,
    .shadow-toggle {
        width: 36px;
        height: 36px;
    }

    .mode-button { padding: 6px 14px; }

    .disclaimer-fixed {
        /* Im Querformat ist die Höhe knapp: kleiner setzen, aber weiterhin
           oben — unten sitzt der eigene Standort. */
        top: calc(var(--safe-top) + 4px);
        font-size: 10px;
        padding: 2px 6px;
    }


    /* Anfasser und Panels rücken mit nach unten bzw. oben. */
    .panel-block-bottom { bottom: calc(var(--safe-bottom) + 118px); }
    .panel-block-top { top: calc(var(--safe-top) + 132px); }
    .info-panel {
        bottom: calc(var(--safe-bottom) + 96px);
        max-height: 40vh;
    }
}


/* Vollbild-Knopf: erscheint nur, wo der Browser die Fullscreen-API auch
   anbietet. Auf dem iPhone tut Safari das nicht (dort nur für Video) — der Weg
   dorthin führt über „Zum Home-Bildschirm", siehe .install-hint. */
.fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--panel);
    color: var(--fg);
    cursor: pointer;
}

.fullscreen[hidden] { display: none; }

@media (max-height: 520px) {
    .fullscreen { width: 36px; height: 36px; }
}

/* Hinweis auf die Home-Bildschirm-Installation, nur im Browser sichtbar. */
.install-hint {
    margin-top: 12px !important;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.install-hint[hidden] { display: none; }