/* Grundstile, Teil 3 von 8: Feinschliff der Fenster, Anmeldeseite, GPS-Werkzeuge.
   Die acht Dateien unter css/base/ werden in dieser Reihenfolge
   eingebunden; bei gleicher Spezifitaet gewinnt die spaetere Regel.
   Neue Regeln an die Datei anhaengen, zu der sie fachlich gehoeren,
   und dabei pruefen, ob eine spaetere Datei sie ueberschreibt. */

/* === Polish ============================================== */

/* Login: Submit-Button mehr Abstand zum Passwort-Feld */
.login-actions {
    margin-top: 18px;
    display: flex;
    justify-content: stretch;
}
.login-actions .primary { width: 100%; padding: 12px 18px; }

/* Map-Error: fester Hintergrund (war transparent durch backdrop-blur) */
.map-error {
    background: var(--bg-elevated) !important;
    color: var(--c-error);
    border: 1px solid var(--c-error);
    padding: 8px 14px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

/* Features-Panel: Header-Buttons gleich gross. Die Richtung (Spalte,
   zwei Reihen) steht weiter oben und darf hier NICHT wieder auf `row`
   fallen - sonst stuende die Reiterzeile wieder neben den Knoepfen. */
.features-panel-head {
    display: flex;
    gap: 6px;
}
.features-panel-collapse,
.features-panel-fullscreen,
.features-panel-rail-toggle,
.features-panel-rail-db {
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-hi);
    cursor: pointer;
}
.features-panel-collapse:hover,
.features-panel-fullscreen:hover,
.features-panel-rail-toggle:hover,
.features-panel-rail-db:hover {
    background: var(--bg-card);
    color: var(--fg);
}

.features-panel-filters {
    padding: 0 var(--panel-rand) 8px;
}

/* Resize-Grip: ein paar Pixel weiter weg vom Rand */
.resizable-handle--right { right: -5px; }
.resizable-handle--left  { left:  -5px; }

/* Datenbank-List-Item: Layout fix - Punkt + Vollname + Tags inline */
.features-panel-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.features-panel-item:hover { background: var(--bg-card); }
.features-panel-item.is-active { background: var(--bg-card); border-left: 2px solid var(--c-primary-hi); }
.features-panel-checkbox { margin: 0; }
.features-panel-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.features-panel-item-body {
    min-width: 0;
}
.features-panel-name {
    font-size: 0.95em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Layer/@-Zeile bleibt in der DOM, wird aber nicht angezeigt. */
.features-panel-item .features-panel-meta { display: none; }
/* Tags im DB-Sidepanel sind strikt einzeilig. Was nicht
 reinpasst, wandert in einen +N-Chip (siehe fitTagsOneLine in
 features-panel.js). Daher flex-wrap:nowrap + overflow:hidden. */
.features-panel-tags {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 4px;
    margin-top: 2px;
    min-width: 0;
    max-width: 100%;
}
.features-panel-tag {
    font-size: 0.75em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--muted-hi);
    white-space: nowrap;
    flex: 0 0 auto;
}
.features-panel-tag[hidden] { display: none !important; }
.features-panel-tag-more {
    font-size: 0.75em;
    color: var(--muted);
    font-style: italic;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Layer-Tree: expandierte Sub-Liste nicht ueber den Buttons - Layer-Row als
 * grid mit klar getrennten Zeilen (Toggle-Reihe oben, Sub-Liste darunter).
 * l: zusaetzliche Spalte ganz links fuer den Drag-Handle. */
.layer-row {
    display: grid;
    /* zusaetzliche Spalte "presence" zwischen meta
 und toggles fuer den Avatar-Stack der Coworker, die diesen Layer
 offen haben. Spalte ist "auto" - leer = 0 px breit, mit Inhalt
 waechst sie auf Stack-Breite. */
    grid-template-columns: auto auto auto 1fr auto auto auto;
    /* zusaetzliche Reihe "agg" fuer das Layer-Aggregat
 (Σ Flaeche, Σ Volumen ...). Ohne diese Reihe wandert das Aggregat
 per Auto-Placement in den ersten freien Slot und schiebt Expand-
 Btn + Name aus der ersten Zeile raus. */
    /* menu DIREKT unter dem Header-Row, vor
 * der features-Liste — sonst muss man bei expanded Layer durch die
 * gesamte Feature-Liste scrollen um zum Menu zu kommen. Reihen-
 * folge: header → menu → features → agg. */
    grid-template-areas:
        "drag expand swatch name meta presence toggles"
        "menu   menu   menu   menu   menu   menu   menu"
        "features features features features features features features"
        "agg    agg    agg    agg    agg    agg    agg";
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    position: relative;
}
.layer-row .layer-drag-handle { grid-area: drag; }
.layer-row .layer-expand   { grid-area: expand; }
.layer-row .layer-swatch   { grid-area: swatch; }
.layer-row .layer-name     { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; background: transparent; border: 0; color: inherit; padding: 0; cursor: pointer; }
.layer-row .layer-meta     { grid-area: meta; color: var(--muted); font-size: 0.85em; }
.layer-row .layer-presence-stack { grid-area: presence; }
.layer-row .layer-toggles  { grid-area: toggles; display: inline-flex; gap: 2px; }
.layer-row .layer-menu     { grid-area: menu; }
.layer-row .layer-features { grid-area: features; margin: 4px 0 6px 28px; }
.layer-row .layer-features-aggregate { grid-area: agg; }
.layer-row .layer-active-users        { grid-area: agg; }

/* Avatar-Stack der Coworker, die einen Layer
 aktuell geoeffnet haben. Verwendet in der Sidebar (.layer-row) UND
 im Lade-Modal (.load-modal-row). Chips ueberlappen um -6px (gestapelt
 mit zarter weisser Border, OneNote-Style). Bei mehr als drei aktiven
 Coworkern wird ein "+N"-Pille angehaengt. */
.layer-presence-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 0 2px 0 4px;
    margin: 0;
    /* Stack-Optik: jeder Chip nach dem ersten haengt -6px in den
       vorherigen rein. */
}
.layer-presence-stack:empty { display: none; }
.layer-presence-chip {
    width: 22px; height: 22px;
    border-width: 2px;
    /* OneNote-Stack-Look: kleine weisse Border um den Chip, damit der
       Overlap als sauberer Stack lesbar bleibt - auch im Dark-Theme. */
    box-shadow: 0 0 0 1.5px var(--bg-card, #fff);
    margin-left: -6px;
    transition: transform 0.12s ease;
}
.layer-presence-chip:first-child { margin-left: 0; }
.layer-presence-chip:hover {
    transform: translateY(-1px) scale(1.06);
    z-index: 2;
}
.layer-presence-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.08));
    color: var(--muted-hi, #555);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid var(--bg-card, #fff);
    box-shadow: 0 0 0 1px var(--border, rgba(0, 0, 0, 0.12));
    cursor: help;
}
[data-theme="dark"] .layer-presence-chip {
    box-shadow: 0 0 0 1.5px var(--surface-elevated, #2a2a2a);
}
[data-theme="dark"] .layer-presence-more {
    background: var(--surface-elevated, #2a2a2a);
    color: #b8c0c8;
    border-color: var(--surface-elevated, #2a2a2a);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* Mobile: schmalere Chips (analog zur Topbar-Presence-Bar). */
@media (max-width: 768px) {
    .layer-presence-chip,
    .layer-presence-more {
        width: 18px; height: 18px;
        min-width: 18px;
        font-size: 9px;
    }
    .layer-presence-chip { margin-left: -5px; }
    .layer-presence-more { margin-left: -5px; padding: 0 5px; }
}

/* Sprach-Toggle in der Topbar. Zeigt die Flagge der
 * aktuell aktiven Sprache; Klick toggelt. */
.lang-toggle .lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.lang-toggle .lang-flag svg {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Service-Worker-Update: die kleine Info unten.
 *
 * Das Update wird jetzt von selbst uebernommen, sobald nichts mehr
 * offen ist (js/sw-register.js), und braucht darum keinen Knopf mehr
 * und niemandem den Weg zu versperren. Uebrig bleibt eine Meldung im
 * Stil der uebrigen Toasts, nur unten statt oben, damit sie sich nicht
 * mit ihnen stapelt.
 *
 * `pointer-events: none`: sie hat nichts zum Anklicken und darf
 * deshalb auch nichts abfangen, was darunter liegt. */
.sw-update-info {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1900;
    pointer-events: none;
    max-width: min(520px, 92vw);
    width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    /* --bg-elevated statt --bg-card: im dunklen Thema ist --bg-card nur
       ein Hauch Weiss (0.03 Alpha), die Meldung stand dort ohne
       Hintergrund ueber der Karte. --text war ein Phantom-Token. */
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--c-cyan, #3BBDE8);
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    font-size: 0.92em;
    animation: sw-update-info-in .25s ease-out;
}
.sw-update-info.is-leaving {
    animation: sw-update-info-out .5s ease-in forwards;
}
/* Der Punkt links pulst, solange die Meldung steht. Er sagt ohne Worte,
 * dass etwas laeuft und nicht etwa haengt. */
.sw-update-info-punkt {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-cyan, #3BBDE8);
    animation: sw-update-info-punkt 1.6s ease-in-out infinite;
}
.sw-update-info-text { flex: 1 1 auto; }
/* Mit Aktualisieren-Knopf (sw-register.js): die Meldung nimmt dann Klicks an. */
.sw-update-info.mit-knopf { pointer-events: auto; padding-right: 6px; }
.sw-update-info-knopf {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--c-primary);
    cursor: pointer;
}
.sw-update-info-knopf:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
@keyframes sw-update-info-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sw-update-info-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, 12px); }
}
@keyframes sw-update-info-punkt {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
/* Auf schmalen Geraeten ueber die Breite, damit der Satz nicht in
 * vier Zeilen bricht. */
@media (max-width: 560px) {
    .sw-update-info {
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-width: none;
        animation: sw-update-info-in-schmal .25s ease-out;
    }
    .sw-update-info.is-leaving {
        animation: sw-update-info-out-schmal .5s ease-in forwards;
    }
    @keyframes sw-update-info-in-schmal {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sw-update-info-out-schmal {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(12px); }
    }
}

/* n: Touch-Marker-Helper. Crosshair wird genau ueber der Karten-
 * Mitte fixiert; das Pin-Icon-Anchor des Markers landet dann genau auf
 * dem Karten-Center, das via map.getCenter abgeholt wird. */
.touch-marker-helper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* von 650 auf 1600 — ueber GPS-Tools (700),
     * Geoman-Toolbars und Toasts der Karte, unter Modals (2000) und
     * SW-Update-Info (1900). Nichts soll den Setzen-Knopf ueberlagern. */
    z-index: 1600;
}
.touch-marker-crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--c-error, #d8493b);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.touch-marker-place-btn {
    position: absolute;
    left: 50%;
    /* mittig im unteren Drittel statt am unteren Rand
     * (kollidierte mit Geoman-/GPS-Leisten). */
    bottom: 16.5vh;
    transform: translateX(-50%);
    padding: 12px 22px;
    border: 1px solid var(--c-error, #d8493b);
    background: var(--c-error, #d8493b);
    color: var(--c-light, #fff);
    border-radius: 999px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
}
.touch-marker-place-btn:active { transform: translateX(-50%) scale(0.97); }
/* zweiter "Fertig"-Button fuer Linie/
 * Polygon. Wenn sichtbar (has-finish), rueckt der Setzen-Button nach
 * links neben die Mitte, "Fertig" nach rechts. */
.touch-marker-helper.has-finish .touch-marker-place-btn {
    transform: translateX(calc(-100% - 6px));
}
.touch-marker-helper.has-finish .touch-marker-place-btn:active {
    transform: translateX(calc(-100% - 6px)) scale(0.97);
}
.touch-marker-finish-btn {
    position: absolute;
    left: 50%;
    bottom: 16.5vh;   /* wie .touch-marker-place-btn (unteres Drittel). */
    transform: translateX(6px);
    padding: 12px 22px;
    border: 1px solid var(--c-primary, #007FB4);
    background: var(--c-primary, #007FB4);
    color: var(--c-light, #fff);
    border-radius: 999px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
}
.touch-marker-finish-btn:active { transform: translateX(6px) scale(0.97); }

/* Geomans Hinweis-Marker beim Zeichnen auf Touch-Geraeten unsichtbar
 * (map.js, hinweisMarkerAus). Ohne Maus stand er als "Scheinpunkt"
 * unter dem Fadenkreuz. Spezifischer als Geomans .cursor-marker.visible. */
.leaflet-container .leaflet-marker-icon.geolyser-hinweis-aus {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Messwerkzeug ohne Maus (js/measurement-tool.js, Touch-Helfer).
 * Fadenkreuz wie beim Zeichnen; darunter Anzeige und Knoepfe als eine
 * Gruppe im unteren Drittel, auf derselben Hoehe wie "Punkt setzen"
 * beim Zeichnen. Der Rahmen selbst laesst Wischen auf die Karte durch.
 * Schrift ausdruecklich: der Helfer sitzt in der Karte, und Leaflet
 * setzt dort 12 px; der Knopf waere sonst kleiner als beim Zeichnen. */
.messen-touch {
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.4;
}
/* Tablet: das Mess-Fenster steht offen in der Karte (z-index 850). Der
 * Helfer liegt darunter, sonst malte sich das Fadenkreuz ueber die
 * Werte, sobald die Kartenmitte unter dem Fenster liegt. Auf dem
 * Smartphone ist das Fenster zu oder bildschirmfuellend (2050), dort
 * bleibt es bei 1600 wie beim Zeichnen. */
@media (min-width: 769px) {
    .touch-marker-helper.messen-touch { z-index: 840; }
}
.messen-touch-unten {
    position: absolute;
    left: 50%;
    bottom: 16.5vh;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 24px);
    pointer-events: none;
}
.messen-touch-knoepfe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.messen-setzen-btn,
.messen-gps-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 1em;
    font-weight: 500;
    color: var(--c-light, #fff);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.messen-setzen-btn {
    border: 1px solid var(--c-error, #d8493b);
    background: var(--c-error, #d8493b);
}
.messen-gps-btn {
    padding: 12px 16px;
    border: 1px solid var(--c-primary, #007FB4);
    background: var(--c-primary, #007FB4);
}
.messen-gps-btn[hidden] { display: none; }
.messen-setzen-btn:active,
.messen-gps-btn:active { transform: scale(0.97); }
.messen-gps-btn.is-busy { opacity: 0.8; cursor: progress; }
.messen-gps-btn.is-busy svg { animation: messen-gps-puls 1s ease-in-out infinite; }
@keyframes messen-gps-puls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .messen-gps-btn.is-busy svg { animation: none; }
}
/* Kleine Anzeige: nur solange das Mess-Fenster zu ist (zeigt-anzeige
 * setzt measurement-tool.js). Dunkel in beiden Themes wie der
 * Live-Tooltip beim Zeichnen, damit sie auf jeder Karte lesbar bleibt. */
.messen-anzeige {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    border-radius: 12px;
    background: rgba(20, 30, 40, 0.92);
    color: #fff;
    font-size: 0.95em;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}
[data-theme="dark"] .messen-anzeige { background: rgba(0, 0, 0, 0.85); }
.messen-touch.zeigt-anzeige .messen-anzeige { display: flex; }
.messen-anzeige-werte {
    display: grid;
    gap: 2px;
    min-width: 150px;
}
.messen-anzeige-zeile {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
}
.messen-anzeige-k { color: rgba(255, 255, 255, 0.7); }
.messen-anzeige-v { font-weight: 600; }
.messen-anzeige-zeile.is-leise { font-size: 0.85em; opacity: 0.8; }
.messen-anzeige-zeile.is-leise .messen-anzeige-v { font-weight: 500; }
.messen-anzeige-hinweis {
    padding-right: 6px;
    text-align: center;
    white-space: normal;
}
.messen-anzeige-undo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.messen-anzeige-undo:active { background: rgba(255, 255, 255, 0.15); }

/* l: Drag-Handle + Drop-Indikator. */
.layer-drag-handle {
    background: transparent;
    border: 0;
    color: var(--muted);
    width: 18px;
    height: 22px;
    padding: 0;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    touch-action: none;   /* Pointer-Events sollen NICHT als Scroll gewertet werden. */
}
.layer-row:hover .layer-drag-handle,
.layer-drag-handle:focus-visible { opacity: 1; }
.layer-drag-handle:active { cursor: grabbing; }

.layer-row.is-dragging {
    opacity: 0.55;
    background: var(--bg-card);
}
.sidebar-list.is-reordering { user-select: none; }
.layer-row.is-drop-before::before,
.layer-row.is-drop-after::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    background: var(--c-primary, #2c8ee0);
    border-radius: 2px;
    pointer-events: none;
}
.layer-row.is-drop-before::before { top: -1px; }
.layer-row.is-drop-after::after   { bottom: -1px; }

/* Drag&Drop fuer Features in der Sidebar. Drag-Handle
 pro Feature-Item; Drop-Indikatoren in der Feature-Liste; Hervorhebung
 des Ziel-Layers wenn ein Feature in einen anderen Layer gezogen wird;
 Cursor + Copy-Indikator wenn Strg/Cmd gedrueckt ist. */
.layer-feature-drag-handle {
    background: transparent;
    border: 0;
    color: var(--muted, #888);
    cursor: grab;
    padding: 2px;
    margin-right: 2px;
    line-height: 0;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}
.layer-feature-drag-handle:hover { color: var(--fg); background: var(--bg-card); }
.layer-feature.is-feat-dragging {
    opacity: 0.55;
    cursor: grabbing;
}
.layer-features.is-feat-reordering .layer-feature { transition: transform 0.08s ease; }
.layer-feature.is-drop-before { box-shadow: 0 -2px 0 var(--c-primary, #06829c) inset; }
.layer-feature.is-drop-after  { box-shadow: 0 2px 0 var(--c-primary, #06829c) inset; }
.layer-row.is-drop-feature-target {
    outline: 2px dashed var(--c-primary, #06829c);
    outline-offset: -2px;
    background: rgba(0, 204, 255, 0.06);
}
body.is-feat-reordering,
.layer-features.is-feat-reordering.is-feat-copy {
    cursor: copy;
}
/* Immortal-Checkbox + Clone-Btn-Zeile im Feature-Modal. */
.feature-modal-immortal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
    border-bottom: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
    margin: 8px 0;
}
.feature-modal-immortal-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--muted-hi, #555);
    font-size: 0.9em;
}
.feature-modal-immortal-label input[type="checkbox"]:checked + span {
    color: var(--c-primary, #06829c);
    font-weight: 600;
}
#feature-modal-clone-btn {
    /* KEIN margin-left:auto mehr — der Btn ist jetzt im
 Footer und soll direkt neben dem Cancel-Btn stehen, nicht durch
 einen auto-margin nach ganz rechts geschoben. */
    display: inline-flex;
    gap: 6px;
    align-items: center;
    width: auto;
    height: auto;
}

.layer-features.is-feat-copy::after {
    content: "+ Kopieren (Strg/Cmd)";
    position: fixed;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-primary, #06829c);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 1500;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ---- Confirm-Dialog im App-Design ---- */
.modal-card--sm {
    width: min(420px, 92vw);
}
/* Konflikt-Modal — etwas breiter als confirm, damit
 die Diff-Tabelle zwei Spalten (lokal / Server) sauber nebeneinander
 bekommt. */
.modal-card--md {
    width: min(640px, 96vw);
}
.modal--conflict .conflict-card {
    padding: 22px 22px 18px;
    position: relative;
}
.modal--conflict .conflict-subtitle {
    margin-top: 2px;
    color: var(--muted-hi, #555);
}
.modal--conflict .conflict-version {
    margin: 6px 0 12px;
    font-size: 0.85em;
    color: var(--muted);
}
.modal--conflict .conflict-diff-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px;
    font-size: 0.92em;
}
.modal--conflict .conflict-diff-table th,
.modal--conflict .conflict-diff-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    vertical-align: top;
    word-break: break-word;
}
.modal--conflict .conflict-diff-table thead th {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-hi);
    background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
}
.modal--conflict .conflict-diff-row.is-same .conflict-diff-local,
.modal--conflict .conflict-diff-row.is-same .conflict-diff-server {
    color: var(--muted);
}
.modal--conflict .conflict-diff-local {
    background: rgba(255, 200, 80, 0.10);
}
.modal--conflict .conflict-diff-server {
    background: rgba(80, 180, 255, 0.10);
}
[data-theme="dark"] .modal--conflict .conflict-diff-local {
    background: rgba(255, 200, 80, 0.16);
}
[data-theme="dark"] .modal--conflict .conflict-diff-server {
    background: rgba(80, 180, 255, 0.16);
}
.modal--conflict .conflict-diff-null {
    color: var(--muted);
    font-style: italic;
}
.modal--conflict .conflict-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.modal--conflict .conflict-actions .conflict-btn-cancel {
    margin-right: auto;
}
@media (max-width: 540px) {
    .modal--conflict .conflict-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .modal--conflict .conflict-actions .conflict-btn-cancel {
        margin-right: 0;
    }
}
.confirm-card {
    padding: 22px 24px 18px;
}
.confirm-card .modal-title {
    font-size: 1.08em;
    margin-bottom: 0;
}
/* Modal-Header in .confirm-card: kein doppeltes Margin (.modal-header
   pullt sich schon -22px hoch, das reicht). */
.confirm-card .modal-header {
    margin-bottom: 14px;
}
.confirm-card .confirm-message {
    color: var(--muted-hi);
    margin: 0 0 18px 0;
    line-height: 1.45;
    white-space: pre-wrap;
}
.confirm-card .modal-actions {
    margin-top: 0;
}
/* c-rev: optionale Bestaetigungs-Checkbox im Confirm-Dialog. */
.confirm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px 0;
    color: var(--fg);
    font-size: 0.92em;
    line-height: 1.4;
    cursor: pointer;
}
.confirm-checkbox input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--c-error, #d8493b);
    flex-shrink: 0;
}
/* Danger-Variante (rot) fuer destruktive Bestaetigungen.
 * Greift auf .primary, damit die Hover/Disabled-Logik bestehen bleibt. */
.primary.danger {
    background: var(--c-error);
    border-color: var(--c-error);
    color: var(--c-light);
}
.primary.danger:hover {
    background: var(--c-error-bg, var(--c-error));
    filter: brightness(1.1);
}
.primary.danger:disabled {
    background: var(--c-error);
    opacity: 0.6;
}

/* ---- DB-Modal-Filter-Bar ---- */
/* kein eigener background mehr — die Filter-Bar liegt
 bewusst transparent ueber dem Modal-Hintergrund. Padding links/rechts
 raus, damit das Such-Input direkt an die Modal-Card-Innenkante schliesst
 (= buendig mit der Tabelle darunter). */
.db-filter-bar {
    position: relative;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.db-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.db-filter-search {
    flex: 1 1 220px;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font: inherit;
}
.db-filter-search:focus {
    outline: none; border-color: var(--border-hi);
    box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
.db-filter-popover {
    position: absolute;
    top: calc(100% - 4px);
    left: 16px;
    right: 16px;
    z-index: 50;
    max-height: 360px;
    overflow: auto;
}

/* ---- Features-Panel Item-Actions + Popover-Suche ---- */
.features-panel-item-actions {
    display: inline-flex;
    gap: 2px;
    align-self: start;
}
.features-panel-item-edit, .features-panel-item-delete {
    padding: 4px;
    line-height: 0;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-hi);
    cursor: pointer;
}
.features-panel-item-edit:hover, .features-panel-item-delete:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border);
}
.features-panel-item-delete:hover { color: var(--c-error); }
.features-panel-popover-search {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 8px;
    font: inherit;
}
.features-panel-popover-search:focus {
    outline: none; border-color: var(--border-hi);
    box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}

/* DB-Item-Layout (erweitert): Actions am Ende der Zeile */
.features-panel-item {
    grid-template-columns: auto auto 1fr auto;
}

/* ---- Map-Status-Leiste (Cursor-Coords + GPS-Genauigkeit) Unten, eine
 * Zeile ueber der Attribution, und mittig ueber der SICHTBAREN Karte
 * Beides rechnet js/leisten-lage.js aus und setzt es
 * als --map-status-x / --map-status-unten; liegt dort ein Knopf der
 * Karte, geht die Leiste ueber ihn hinweg. Ohne Skript gilt die Mitte
 * des Kartenbereichs. */
.map-status {
    position: absolute;
    left: var(--map-status-x, 50%);
    top: auto;
    bottom: var(--map-status-unten, 22px);
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-elevated, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted-hi);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0.9;
    box-shadow: var(--shadow-card);
}
.map-status-coords:empty { display: none; }
.map-status-accuracy { color: var(--c-primary-hi); }
/* Nichts anzuzeigen (Touch ohne Zeiger, GPS aus): kein leeres Kaestchen
   unten auf der Karte. */
.map-status:has(> .map-status-coords:empty):has(> .map-status-accuracy[hidden]) {
    display: none !important;
}

/* ============================================================
 UI-Feinschliff
 ============================================================ */

/* ---- Modal-Kontrast: Header + Footer haben anderen Hintergrund als Body */
.modal-header {
    background: var(--bg-card);
}
.modal-footer {
    background: var(--bg-card);
    align-items: center;
}
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
    background: var(--bg);
}

/* Modal-Footer: Auswaehl-Counter rechtsbuendig + vertikal zentriert */
.modal-footer [data-role="sel-count"] {
    margin-left: auto;
    margin-right: 4px;
    align-self: center;
    font-size: 0.85em;
    color: var(--muted-hi);
}
.modal-footer [data-role="row-count"] {
    align-self: center;
    font-size: 0.85em;
    color: var(--muted);
}

/* Modal-Buttons: Default zentriert; Footer-Buttons rechts mit Trenner */
.modal-actions { justify-content: center; }
.modal-actions--stack { align-items: stretch; }
.modal-card .modal-form > .modal-actions {
    /* Submit-Form-Buttons bleiben zentriert (Standard von ) */
}

/* Buttons im Modal-Footer/Actions: kleine Bg-Differenzierung (ghost
 * sichtbarer auf dem hellen Footer-Hintergrund) */
.modal-footer .ghost {
    background: var(--bg-elevated);
}
.modal-footer .ghost:hover {
    background: var(--bg-card);
}

/* Bulk-Edit-Footer — Anwenden (primary, Haken) +
   Rueckgaengig (amber, Undo-Pfeil) mit Icon+Text nebeneinander.
   Rueckgaengig traegt jetzt .ghost.btn-amber und bekommt damit
   dieselbe Form (Radius/Padding/Font) wie der primary-Button; nur die
   Hintergrund-Overrides von .modal-footer .ghost muessen wieder auf
   die Amber-Toenung zurueckgesetzt werden (Spezifitaet). */
.bulk-edit-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
}
.bulk-edit-footer button svg { flex-shrink: 0; }
.bulk-edit-footer button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.bulk-edit-footer .ghost.btn-amber {
    background: rgba(201, 138, 0, 0.15);
}
.bulk-edit-footer .ghost.btn-amber:hover:not([disabled]) {
    background: rgba(201, 138, 0, 0.28);
}

/* ---- Active-Layer Toggle: GRUEN (signal) statt blau ---- */
.layer-row .layer-toggle[data-action="toggle-active"].is-on {
    color: var(--c-signal-dk);
    background: var(--c-signal-dim);
    border-color: var(--c-signal-dk);
}
[data-theme="light"] .layer-row .layer-toggle[data-action="toggle-active"].is-on {
    color: #007a3a;
    background: rgba(2, 254, 137, 0.18);
    border-color: #007a3a;
}
.layer-row.layer-row--active {
    background: rgba(2, 254, 137, 0.06);
}

/* ---- Empty-Trash Button HERVORGEHOBEN rot/pink ---- */
[data-action="empty-trash"] {
    background: var(--c-error) !important;
    color: var(--c-light) !important;
    border-color: var(--c-error) !important;
    font-weight: 500;
}
[data-action="empty-trash"]:hover {
    filter: brightness(1.12);
}

/* ---- DB Bulk-Delete Button rot wenn aktiv ---- */
[data-action="bulk-delete"]:not(:disabled) {
    background: var(--c-error) !important;
    color: var(--c-light) !important;
    border-color: var(--c-error) !important;
}
[data-action="bulk-delete"]:not(:disabled):hover {
    filter: brightness(1.12);
}

/* ---- Resize-Indikator: doppelte Linie, dezent permanent sichtbar ---- */
.resizable-handle--right { right: -6px; }
.resizable-handle--left  { left:  -6px; }
.resizable-handle::before,
.resizable-handle::after {
    content: "";
    position: absolute;
    top: 35%; bottom: 35%;
    width: 2px;
    border-radius: 1px;
    background: var(--border-hi);
    opacity: 0.55;
    transition: opacity .12s ease;
}
.resizable-handle::before { left: 50%; transform: translateX(-3px); }
.resizable-handle::after  { left: 50%; transform: translateX(1px); }
.resizable-handle:hover::before,
.resizable-handle:hover::after,
.resizable-handle:focus-visible::before,
.resizable-handle:focus-visible::after {
    opacity: 1;
    background: var(--c-primary-hi);
}

/* ---- Image-Slot-Remove: roter Kreis, oben rechts, mittig ---- */
.image-slot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-error);
    color: var(--c-light);
    border: 1px solid var(--c-error);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.image-slot-remove:hover { filter: brightness(1.1); }

/* ---- Login-Form: mehr Abstand zwischen Eingabefeldern ---- */
.login-form { gap: 14px; }
.login-form .field + .field { margin-top: 4px; }

/* ---- Features-Panel: Action-Bar nach unten, kleiner ---- */
.features-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.features-panel-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
/* Die Aktionsleiste der Datenbank-Ansicht ist dieselbe Leiste wie die
   Fussleisten der Panel-Modi: sie traegt zusaetzlich `.modus-fuss`
   (js/panel-modi.js), von dort kommen Polsterung, Trennlinie,
   Anordnung und die Knopfgroesse. Hier bleibt nur, was sie von den
   anderen unterscheidet: sie KLEBT am unteren Rand der Liste, statt
   fest im Panel zu stehen. */
.features-panel-actionbar {
    order: 99;
    position: sticky;
    bottom: 0;
    background: var(--bg-panel);
    /* Rechts KEIN negativer Rand: der Koerper hat rechts kein Polster
       (.features-panel .features-panel-body setzt nur links 12 px), die
       Leiste ragte sonst 2 px ueber das Panel hinaus (Breitentest,
       "0 ausgewaehlt [675..1026]" bei 1024 px). */
    margin: 0 0 -8px calc(-1 * var(--panel-rand));
    font-size: 0.85em;
    z-index: 5;
}
/* Die Leiste bleibt stehen, auch wenn nichts ausgewaehlt ist; ihre
   Knoepfe sind dann gesperrt (js/features-panel.js, renderActionBar).
   Eine Leiste, die kommt und geht, schoebe die Liste darueber bei jeder
   Auswahl hoch und runter. */
.features-panel-actionbar.ist-leer .modus-fuss-zahl { opacity: .55; }
.features-panel-actionbar button[disabled] {
    opacity: .4;
    cursor: default;
}
/* Eine Zeile, auch bei der Vorgabebreite von 300 px. Die Leiste
   brach in de, es und pt in zwei Zeilen um ("0 ausgewählt" ist laenger
   als "0 selected"); der Papierkorb rutschte dann allein in eine zweite
   Zeile. Jetzt gibt die Zahl nach (Auslassungspunkte), die Knoepfe
   bleiben stehen. Zwei Klassen, weil .modus-fuss zur Laufzeit aus
   js/panel-modi.js kommt und bei gleicher Spezifitaet gewinnen wuerde. */
.features-panel-actionbar.modus-fuss { flex-wrap: nowrap; gap: .3rem; }
.features-panel-actionbar .modus-fuss-links {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: .3rem;
}
.features-panel-actionbar .modus-fuss-rechts { flex: 0 0 auto; flex-wrap: nowrap; gap: .3rem; }
.features-panel-actionbar .modus-fuss-links > button,
.features-panel-actionbar .modus-fuss-rechts > button { flex: 0 0 auto; }
.features-panel-actionbar .modus-fuss-zahl { flex: 0 1 auto; min-width: 0; }
.features-panel-actionbar .gp-proxy-trash { flex: 0 0 auto; }

/* Der Kopf der Datenbank-Ansicht. Form und Farben kommen aus
   .modus-kopf (js/panel-modi.js), hier steht nur seine Lage: er sitzt
   zwischen Panel-Kopf und Suchfeld und haelt denselben Seitenabstand
   wie das Suchfeld darunter. */
.features-panel-banner { margin: 8px var(--panel-rand) 0; }

/* Zwei Klassen, mit Absicht.
   `.modus-kopf` (js/panel-modi.js) setzt `margin:0 0 8px` und wird zur
   LAUFZEIT eingehaengt, also nach css/base/. Bei gleicher Spezifitaet
   entscheidet die Reihenfolge, und die einklassige Regel oben verlor
   jedes Mal: die Kaesten sassen buendig am Panelrand, waehrend
   Kopfreihe, Suchfeld und Filterzeile zehn Pixel weiter innen standen.
   Mit zwei Klassen (0,2,0)
   gewinnt wieder die Lage, die das Panel vorgibt - unabhaengig davon,
   welches Stylesheet zuletzt eingehaengt wurde. */
.features-panel-banner.modus-kopf { margin: 8px var(--panel-rand) 0; }
.sidebar-banner.modus-kopf { margin: 0 var(--panel-rand) 8px; }
/* Dieselbe Lage fuer die Koepfe der Modi. Sie sitzen in ihrem eigenen
   Host (.vl-host, .sn-host, .fk-host, .bt-host), der keinen Seitenabstand hat -
   ohne diese Zeile stehen auch sie buendig am Rand. */
.vl-banner.modus-kopf,
.sn-banner.modus-kopf,
.fk-banner.modus-kopf,
.bt-banner.modus-kopf,
.golf-panel-head.modus-kopf { margin: 8px var(--panel-rand); }

/* Derselbe Kasten links in der Layer-Leiste. Er steht zwischen
   Knopfreihe und Layer-Liste und haelt denselben Seitenabstand wie die
   Knopfreihe darueber. */
.sidebar-banner { margin: 0 var(--panel-rand) 8px; }

/* Taktung der GPS-Spur in den Stammdaten. Zwei schmale Zahlenfelder und
   der Ruecksetz-Knopf in einer Reihe, darueber die Erklaerung. */
.ws-gps-track {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: 12px;
}
.ws-gps-track legend {
    padding: 0 6px;
    font-size: 0.9em;
    color: var(--muted-hi);
}
.ws-gps-track-hint {
    margin: 0 0 10px;
    font-size: 0.82em;
}
.ws-gps-track-reihe {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.ws-gps-track-reihe .field { flex: 0 0 150px; width: 150px; margin: 0; }
.ws-gps-track-reihe button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    white-space: nowrap;
}
.features-panel-actionbar [data-role="action-count"] {
    font-size: 0.85em;
    color: var(--muted-hi);
}

/* ---- Bug/Feedback Btn ---
 Vorher orange (var(--c-warn)), aber das matcht nicht mit dem
 geolyser-tuerkis-Brand. Jetzt #00CCFF (Geolyser-Akzent) damit der
 Button sich ins Restdesign einreiht. */
.help-modal-bug-btn {
    background: #00CCFF;
    color: #002b3d;
    border: 1px solid #00bfee;
    font-weight: 600;
}
.help-modal-bug-btn:hover {
    background: #1ad6ff;
    border-color: #00a8d4;
    color: #001a26;
}
[data-theme="dark"] .help-modal-bug-btn {
    background: #00bfee;
    color: #001a26;
    border-color: #009ec7;
}
[data-theme="dark"] .help-modal-bug-btn:hover {
    background: #1ad6ff;
    color: #00131c;
}

/* ---- Hard-Reload-Button : rose, 40×40 px ----
 Sitzt im help-modal-footer neben dem Feedback-Btn. Rose signalisiert
 "letzter Ausweg / Reset" ohne destruktiv (rot/danger) zu wirken. */
#hard-reload-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.45);
    color: #f43f5e;
    flex-shrink: 0;
}
#hard-reload-btn:hover {
    background: rgba(244, 63, 94, 0.22);
    border-color: rgba(244, 63, 94, 0.7);
    color: #fb7185;
}
[data-theme="dark"] #hard-reload-btn {
    background: rgba(244, 63, 94, 0.18);
    border-color: rgba(244, 63, 94, 0.5);
    color: #fb7185;
}
[data-theme="dark"] #hard-reload-btn:hover {
    background: rgba(244, 63, 94, 0.30);
    border-color: #f43f5e;
    color: #fda4af;
}

/* ---- Geolyser-Logo im Login (Vorbereitung ) ---- */
.login-shell .login-logo {
    display: block;
    margin: 0 auto 16px auto;
    max-width: 120px;
    height: auto;
}

/* ============================================================
 — Bugfixes: Modal-Ecken + Button-Differenzierung
 ============================================================ */

/* Modal-Card: overflow:hidden damit Header/Footer-Backgrounds an die
 * abgerundeten Ecken angepasst werden. */
.modal-card {
    overflow: hidden;
}
/* Header und Footer brauchen oben/unten gerundete Ecken, damit ihre
 * Hintergrundfarbe nicht ueber die Card-Rundung hinausragt. */
.modal-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.modal-footer {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* ---- Buttons mit Differenzierung gegen den Container-Hintergrund ---- */

/* Features-Panel Rail-Toggle + Search-Btn (sind in der Rail) */
.features-panel-rail-toggle,
.features-panel-rail-db {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted-hi);
    border-radius: var(--radius-sm);
}
.features-panel-rail-toggle:hover,
.features-panel-rail-db:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}

/* Sidebar-Rail-Toggles + Add */
.sidebar-rail-toggle,
.sidebar-rail-add,
.sidebar-rail-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted-hi);
    border-radius: var(--radius-sm);
}
.sidebar-rail-toggle:hover,
.sidebar-rail-add:hover,
.sidebar-rail-btn:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}
/* Knoepfe der Schiene ausser Auf-/Zuklappen und Neuer Layer (Laden und
 * die Erweiterten Funktionen, js/sidebar.js railKnopf) - gleiche
 * Geometrie wie sidebar-rail-add. Die Farbe kommt aus derselben
 * Akzent-Klasse wie im Kopf (.sidebar-gcp-accent usw.). */
.sidebar-rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    /* Kein extra margin-top — .sidebar-rail hat bereits `gap: 4px`
     * zwischen allen Kindern. */
    margin-top: 0;
    cursor: pointer;
}
.sidebar-rail-btn img,
.sidebar-rail-btn svg {
    display: block;
}
/* Viele Knoepfe passen im Querformat nicht untereinander: die Schiene
   rollt dann, statt Knoepfe unter den Rand zu schieben. */
.sidebar--collapsed .sidebar-rail {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.sidebar-rail-btn,
.sidebar-rail-toggle,
.sidebar-rail-add { flex: 0 0 auto; }

/* Pulsations-Effekt fuer GCP/ArUco-Btns
 * wenn ein Capture-State minimiert ist (siehe sidebar.js
 * setGcpMinimizedState). Cyan-Outline-Glow analog zu Location-Share-
 * Pulse aber etwas dezenter. Wirkt sowohl im expanded Sidebar-Header
 * als auch im collapsed Rail. */
.is-state-pulse {
    position: relative;
    animation: geolyser-state-pulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(59, 189, 232, 0.6);
    border-color: var(--c-cyan, #3BBDE8) !important;
}
@keyframes geolyser-state-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 189, 232, 0.55);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 189, 232, 0);
    }
}

/* Features-Panel Filter-Chips (Layer/Tags) */
.features-panel-chip {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--fg);
}
.features-panel-chip:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
}
.features-panel-chip.is-active {
    background: rgba(0, 127, 180, 0.18);
    border-color: var(--c-primary-hi);
    color: var(--c-primary-hi);
}

/* Features-Panel Header-Buttons (collapse / fullscreen) */
.features-panel-collapse,
.features-panel-fullscreen {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted-hi);
    border-radius: var(--radius-sm);
}
.features-panel-collapse:hover,
.features-panel-fullscreen:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}

/* Sidebar-Head Aktion-Buttons (Plus / Pfeil) */
.sidebar-head-actions .ghost {
    background: var(--bg-elevated);
}
.sidebar-head-actions .ghost:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
}

/* Tristate-Buttons im Filter-Popover differenziert */
.features-panel-tristate-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.features-panel-tristate-btn:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
}
.features-panel-tristate-btn.is-active {
    background: rgba(0, 127, 180, 0.22);
    border-color: var(--c-primary-hi);
    color: var(--c-primary-hi);
}

/* Topbar-Icon-Buttons */
.topbar .icon-btn,
.topbar .ghost {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.topbar .icon-btn:hover,
.topbar .ghost:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
}

/* Modal-Header Close-Button: subtle differenziert */
.modal-header .modal-close-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.modal-header .modal-close-btn:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
}

/* DB-Filter-Bar Search + Chips ebenfalls sichtbar */
.db-filter-search {
    /* schon definiert; hier nur die Border anheben damit sichtbar */
    border-color: var(--border-hi);
}
[data-theme="light"] .db-filter-search {
    background: #F1F4F7;
    border-color: #c8cfd6;
}
[data-theme="light"] .db-filter-search:focus {
    background: #fff;
}
.db-filter-bar .features-panel-chip {
    background: var(--bg-elevated);
}

/* Light-Mode-Adjustments: bg-elevated ist hier #ffffff, was auf weisser
 * modal-card unsichtbar ist. Nehme bg-card statt elevated. */
[data-theme="light"] .features-panel-rail-toggle,
[data-theme="light"] .features-panel-rail-db,
[data-theme="light"] .sidebar-rail-toggle,
[data-theme="light"] .sidebar-rail-add,
[data-theme="light"] .sidebar-rail-btn,
[data-theme="light"] .features-panel-chip,
[data-theme="light"] .features-panel-collapse,
[data-theme="light"] .features-panel-fullscreen,
[data-theme="light"] .sidebar-head-actions .ghost,
[data-theme="light"] .features-panel-tristate-btn,
[data-theme="light"] .topbar .icon-btn,
[data-theme="light"] .topbar .ghost,
[data-theme="light"] .modal-header .modal-close-btn {
    background: var(--bg);
    border-color: var(--border);
}
[data-theme="light"] .features-panel-rail-toggle:hover,
[data-theme="light"] .features-panel-rail-db:hover,
[data-theme="light"] .sidebar-rail-toggle:hover,
[data-theme="light"] .sidebar-rail-add:hover,
[data-theme="light"] .sidebar-rail-btn:hover,
[data-theme="light"] .features-panel-chip:hover,
[data-theme="light"] .features-panel-collapse:hover,
[data-theme="light"] .features-panel-fullscreen:hover,
[data-theme="light"] .sidebar-head-actions .ghost:hover,
[data-theme="light"] .features-panel-tristate-btn:hover,
[data-theme="light"] .topbar .icon-btn:hover,
[data-theme="light"] .topbar .ghost:hover,
[data-theme="light"] .modal-header .modal-close-btn:hover {
    background: var(--bg-card);
    border-color: var(--c-primary-hi);
}

/* ============================================================
 Detach-Button
 ============================================================ */

/* ---- Layer-Feature Sub-Liste: Item ist Flex mit Detach-Button rechts ---- */
.layer-features {
    list-style: none;
    margin: 4px 0 6px 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.layer-feature {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
}
.layer-feature-name {
    flex: 1 1 auto;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--muted-hi);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-feature-name:hover {
    background: var(--bg-card);
    color: var(--fg);
}
/* Teilezahl einer gesetzten Vorlage in der Layer-Featureliste.
 *
 * Die Vorlage steht dort als EINE Zeile. Diese Zahl sagt, dass mehrere
 * Formen dahinterstecken, und dass Auge, Entfernen und Ziehen sie alle
 * meinen. Dieselbe Optik wie die Teilezahl in der Feature-Liste rechts
 * und in der Datenbank-Vollansicht (.features-panel-gruppe, .db-gruppe);
 * eigene Regel, weil die Zeile hier engere Abstaende hat. */
.layer-feature-gruppe {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    font-size: .75em;
    line-height: 1.5;
    min-width: 1.4em;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--muted);
    vertical-align: baseline;
}
.layer-feature-detach {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 3px;
    border-radius: var(--radius-sm);
    line-height: 0;
    opacity: 0.6;
    transition: opacity .12s, background .12s, color .12s;
}
.layer-feature:hover .layer-feature-detach { opacity: 1; }
.layer-feature-detach:hover {
    background: var(--c-error-bg);
    color: var(--c-error);
    border-color: var(--c-error);
}
/* Edit-Btn in der Sidebar-Feature-Liste, links neben Detach.
 Gleiche Geometrie wie .layer-feature-detach, aber Hover in Primary-Blau
 (analog zum Pencil-Btn im rechten Datenbank-Panel) statt in Error-Rot. */
.layer-feature-edit {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 3px;
    border-radius: var(--radius-sm);
    line-height: 0;
    opacity: 0.6;
    transition: opacity .12s, background .12s, color .12s;
}
.layer-feature:hover .layer-feature-edit { opacity: 1; }
.layer-feature-edit:hover {
    background: rgba(0, 127, 180, 0.14);
    color: var(--c-primary-hi);
    border-color: var(--c-primary-hi);
}
/* Pencil-Icon ist im ICONS-Objekt mit 16x16 definiert — wir skalieren es
   hier auf 14x14 runter, damit Edit + Detach exakt gleich gross wirken. */
.layer-feature-edit svg { width: 14px; height: 14px; }

/* Eye-Toggle pro Feature in der Sidebar-Liste. Hat zwei
 Zustaende: sichtbar (eye_on, dezent) und versteckt (eye_off, amber).
 Geometrie deckt sich mit den anderen layer-feature-Action-Btns. */
.layer-feature-visible {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 3px;
    border-radius: var(--radius-sm);
    line-height: 0;
    opacity: 0.7;
    transition: opacity .12s, background .12s, color .12s;
}
.layer-feature:hover .layer-feature-visible { opacity: 1; }
.layer-feature-visible:hover {
    background: rgba(0, 127, 180, 0.10);
    color: var(--c-primary-hi);
}
/* Wenn das Feature ausgeblendet ist (data-checked=0), nimmt der Btn die
   Amber-Optik an — analog zum Layer-Eye-Off Pattern. */
.layer-feature-visible[data-checked="0"] {
    color: var(--c-amber, #c98a00);
    opacity: 1;
}
.layer-feature-visible[data-checked="0"]:hover {
    background: rgba(201, 138, 0, 0.14);
}
.layer-feature-visible svg { width: 14px; height: 14px; }

/* Hot-Spot zum Entfernen des letzten Vertex waehrend
 Geoman-Drawing. Wird vom geoman-vertex-remove.js absolute im
 map-container positioniert (left/top per JS gesetzt, der halbe
 Durchmesser ist dort schon abgezogen). pointer-events:auto damit der
 Klick uns trifft und nicht direkt an Leaflet-Map durchfaellt.

 Die Groesse MUSS zu HOT_DIAMETER in
 geoman-vertex-remove.js passen (36). Sie stand hier auf 28,
 waehrend das Skript mit 36 positionierte: der sichtbare Kreis sass
 vier Pixel links-oberhalb des Stuetzpunkts und war mit Radius 14
 deutlich kleiner als die Zone (22), in der er aufleuchtet. Klicks,
 bei denen der rote Minus-Marker zu sehen war, landeten dadurch auf
 der Karte und setzten einen NEUEN Stuetzpunkt, statt den letzten zu
 entfernen — genau die Beschwerde, die im Kopf des Moduls steht und
 damals mit einer groesseren Zone statt der Markergroesse
 "behoben" wurde. */
.geolyser-vertex-remove-hot {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ef3b3b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(239, 59, 59, 0.32),
                0 2px 6px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
    cursor: pointer;
    z-index: 1100;
    pointer-events: auto;
    transition: transform .12s ease-out;
    /* Leichtes Pulsieren, damit das Element als "klickbar" auffaellt. */
    animation: geolyser-vertex-remove-pulse 1.4s ease-in-out infinite;
}
.geolyser-vertex-remove-hot:hover {
    transform: scale(1.12);
}
.geolyser-vertex-remove-hot svg { display: block; }
@keyframes geolyser-vertex-remove-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(239, 59, 59, 0.32),
                    0 2px 6px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(239, 59, 59, 0.20),
                    0 2px 6px rgba(0, 0, 0, 0.35);
    }
}
/* User mit prefers-reduced-motion bekommen das Pulse nicht — der rote
   Marker mit Minus reicht da alleine als Hinweis. */
@media (prefers-reduced-motion: reduce) {
    .geolyser-vertex-remove-hot { animation: none; }
}

/* Drag-Handle ueber alten Vertices (alle ausser dem
 letzten). Blau, mit Move-Cursor, kein Pulse — der Drag ist eine
 ruhige Aktion (im Gegensatz zu "Delete"). */
.geolyser-vertex-drag-hot {
    position: absolute;
    /* gleiche Groesse wie HOT_DIAMETER (36), sonst
       faellt der mousedown neben dem sichtbaren Kreis durch und der
       Drag startet nicht. */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3b8eef;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(59, 142, 239, 0.32),
                0 2px 6px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
    cursor: move;
    z-index: 1099;
    pointer-events: auto;
    transition: transform .12s ease-out;
}
.geolyser-vertex-drag-hot:hover { transform: scale(1.12); }
.geolyser-vertex-drag-hot svg { display: block; }

/* "+"-Marker zum Fortsetzen einer Linie/Korridor-Mittellinie im
 globalen Edit-Modus (line-continue.js). Gruen = Hinzufuegen
 (btn-success-Semantik); L.divIcon, Leaflet positioniert den Marker
 selbst — daher hier KEIN position/left/top. Feste Map-Marker-Farben
 wie bei den Vertex-Hot-Spots oben (kein Theme-Token noetig). */
.line-continue-plus {
    box-sizing: border-box;
    border-radius: 50%;
    background: #2e9e5b;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.30),
                0 2px 6px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
    cursor: pointer;
}
/* Plus exakt mittig: absolut zentriert statt Flex — Leaflet setzt
 width/height inline und positioniert den Marker selbst per
 transform, daher hier WEDER transform noch transition am
 Marker-Root (ein Hover-Scale wuerde Leaflets translate3d
 ueberschreiben und den Marker verspringen lassen). */
.line-continue-plus svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.line-continue-plus:hover { filter: brightness(1.12); }

/* ---- Allgemeine Button-Differenzierung gegen Container-Hintergrund ---- */
/* Catchall fuer alle .ghost / .ghost-btn / .icon-btn ohne explizite bg.
 * Nimmt --bg-elevated im Dark, --bg im Light (siehe oben). */
.ghost-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted-hi);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    transition: background .12s, border-color .12s, color .12s;
}
.ghost-btn:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}
[data-theme="light"] .ghost-btn {
    background: var(--bg);
}
[data-theme="light"] .ghost-btn:hover {
    background: var(--bg-card);
}

/* Layer-Toggles und Layer-Color-Pick ebenfalls heller als Row */
.layer-toggle:not(.is-on) {
    background: var(--bg-elevated);
    border-color: var(--border);
}
[data-theme="light"] .layer-toggle:not(.is-on) {
    background: var(--bg);
}

/* Tag-Picker im Feature-Modal: Chip + Suggestions */
.tag-picker {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
}
[data-theme="light"] .tag-picker {
    background: var(--bg);
}
.tag-picker-chip {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
[data-theme="light"] .tag-picker-chip {
    background: var(--bg-card);
}

/* Trash-Modal Tabelle: Zeilen-Hover bg-card */
.trash-table tbody tr:hover {
    background: var(--bg-card);
}

/* Image-Slot: leerer Slot (data-action="img-add") sichtbar gegen modal-bg */
.image-slot {
    background: var(--bg-card);
    border: 1px dashed var(--border);
}
.image-slot.is-filled {
    background: transparent;
    border-style: solid;
}

/* Field-Label-Spans heller fuer Light-Mode-Lesbarkeit */
[data-theme="light"] .field-label { color: var(--muted-hi); }

/* Sidebar-Empty: Plus-Indicator-Box */
.sidebar-empty-plus {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    margin: 0 2px;
}

/* ============================================================
 — Bugfixes Resize-Handle + Filter-Click + Aria
 ============================================================ */

/* Resize-Handle wieder bedienbar: nicht mehr rein nach aussen, sondern
 * grossteils im Panel. Width 8px, half-overlap nur 2px. */
.resizable-handle--right { right: -2px !important; }
.resizable-handle--left  { left:  -2px !important; }
.resizable-handle {
    width: 8px !important;
}

/* Sidebar-Paddings aus zurueckgenommen, sonst klebt der Inhalt
 * nicht mehr am Resize-Bereich und der Klick wird abgefangen. */
.sidebar { padding-right: 0 !important; }
.features-panel { padding-left: 0 !important; }

/* Doppellinie etwas duenner und hoeher z-index, damit sie auch ueber
 * dem ::before des Panels nicht klemmt. */
.resizable-handle { z-index: 6 !important; }

/* Klicks auf Tristate-Buttons + Popover-Inhalt MUESSEN durch sein, damit
 * der Filter-Klick wirklich den Listener erreicht. */
.features-panel-popover,
.features-panel-popover * {
    pointer-events: auto;
}
.features-panel-tristate-btn { cursor: pointer; }
/* SVG-Icons in Tristate-Buttons sauber zentrieren. */
.features-panel-tristate-btn { display: inline-flex; align-items: center; justify-content: center; }
.features-panel-tristate-btn svg { display: block; }

/* Bug-Modal: Focus weg vom Senden-Button beim Schliessen, sonst
 * "Blocked aria-hidden on focused element"-Warnung. */
#bug-modal:not([hidden]) [data-action="bug-send"]:focus { outline: none; }

/* Sidebar-Plus-Button: + zentrieren in der Rail */
.sidebar-rail-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

/* ---- Image-Slot-Placeholder fuer noch-nicht-gespeicherte Features ---- */
.image-slot.is-placeholder {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    cursor: not-allowed;
    color: var(--muted);
    font-size: 0.7em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-slot-hint {
    opacity: 0.6;
}

/* ============================================================
 — Resize-Innenabstand + Temp-Feature
 ============================================================ */

/* Innenabstand zum Resize-Handle: Content der Sidebar nicht direkt am Rand. */
.sidebar .sidebar-body {
    padding-right: 12px;
}
.features-panel .features-panel-body {
    padding-left: 12px;
}
[data-theme="light"] .sidebar .sidebar-body { padding-right: 12px; }
[data-theme="light"] .features-panel .features-panel-body { padding-left: 12px; }

/* ============================================================
 — Login-Screen Redesign (Logo + blurred Hintergrund-Karte)
 ============================================================ */

.login-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}
.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    filter: blur(8px) brightness(0.45) saturate(0.85);
    pointer-events: none;
    /* Etwas ueber den Viewport hinaus, damit der Blur-Rand nicht hineinragt. */
    margin: -20px;
}
.login-bg-tint {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(0, 127, 180, 0.10) 0%, rgba(0, 0, 0, 0.55) 70%),
        linear-gradient(180deg, rgba(24, 27, 29, 0.35) 0%, rgba(24, 27, 29, 0.65) 100%);
}
.login-page main {
    position: relative;
    z-index: 2;
}
.login-card {
    background: rgba(24, 27, 29, 0.78) !important;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
    color: var(--c-light);
    width: min(420px, 90vw);
    padding: 28px 28px 22px !important;
}
[data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 96, 141, 0.18) !important;
    color: var(--fg);
}
.login-card .login-logo {
    display: block;
    margin: 0 auto 14px auto;
    width: 96px;
    height: auto;
    max-height: 96px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
.login-card h1 {
    text-align: center;
    margin: 0 0 6px 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
}
.login-card .sub {
    text-align: center;
    margin: 0 0 18px 0;
    font-size: 0.9em;
}
.login-card .field {
    margin-bottom: 14px;
}
.login-card .field label {
    display: block;
    margin-bottom: 4px;
    font-size: .85em;
    color: var(--muted-hi);
}
.login-card .field input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font: inherit;
}
.login-card .field input:focus {
    outline: none;
    border-color: var(--c-primary-hi);
    box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
[data-theme="light"] .login-card .field input {
    background: var(--bg);
    color: var(--fg);
}
.login-card .login-actions {
    margin-top: 20px;
    display: flex;
    justify-content: stretch;
}
.login-card .login-actions .primary {
    width: 100%;
    padding: 12px 18px;
    font-size: 1rem;
}
.login-card .login-footer {
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: .8em;
}
.login-card .login-footer a {
    color: var(--c-primary-hi);
    text-decoration: none;
}

/* Leaflet-Default-Tiles in der bg-Karte: Kontroll-Elemente ganz weg. */
.login-bg .leaflet-control-container,
.login-bg .leaflet-control-attribution {
    display: none !important;
}
.login-bg .leaflet-tile-pane {
    /* etwas zusaetzlicher Tint ueber den Tiles selbst */
    filter: contrast(1.1);
}

/* ============================================================
 — GPS-Draw-Tools (links unten, ueber Locate)
 ============================================================ */

.gps-tools {
    position: absolute;
    /* Locate-Plugin hat seinen Knopf bottomleft - wir sitzen direkt darueber.
     * Standard-Leaflet-Bottomleft-Container ist ca 30px hoch + 10px Abstand. */
    left: 10px;
    bottom: 56px;
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    /* Der Container darf die Karte NICHT
     * blockieren. Auf Smartphones setzen Media-Queries left+right
     * gleichzeitig -> der (unsichtbare) Flex-Container spannte sich
     * ueber die volle Breite und schluckte Karten-Gesten. Leerflaeche
     * jetzt click-transparent, nur die Kinder fangen Events. */
    pointer-events: none;
}
.gps-tools > * { pointer-events: auto; }
.gps-tools-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.gps-tools-btn:hover:not(:disabled) {
    /* solider Hover-Hintergrund - var(--bg-card) ist im Dark-
 * Mode fast transparent (3% Weiss), das blutet ueber der Karte aus. */
    background: var(--bg-elevated);
    border-color: var(--c-primary-hi);
    color: var(--c-primary-hi);
}
[data-theme="dark"] .gps-tools-btn:hover:not(:disabled) {
    background: #2b3338;
    border-color: var(--c-primary-hi);
    color: var(--c-primary-hi);
}
.gps-tools-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.gps-tools-btn.is-recording {
    background: var(--c-error);
    color: var(--c-light);
    border-color: var(--c-error);
    animation: gps-pulse 1.2s ease-in-out infinite;
}
@keyframes gps-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 101, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 92, 101, 0); }
}
/* Location-Share-Btn pulsiert pink/rose und ist sehr deutlich
 sichtbar wenn aktiv. */
.gps-tools-btn.is-active[data-action="gps-share-location"] {
    background: #e84d8a !important;     /* pink/rose */
    color: #fff !important;
    border-color: #c43671 !important;
    animation: gps-share-pulse 1.4s ease-in-out infinite;
}
@keyframes gps-share-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 77, 138, 0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(232, 77, 138, 0); }
}
[data-theme="dark"] .gps-tools-btn.is-active[data-action="gps-share-location"] {
    background: #ff66a3 !important;
    border-color: #e84d8a !important;
}
.gps-tools-status {
    /* Status-Badge horizontal RECHTS neben dem aktiven Button - per absolute
     * Positionierung abseits vom Button-Stack. */
    position: absolute;
    left: 44px;
    bottom: 0;
    white-space: nowrap;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    max-width: 240px;
}
.gps-tools-status[data-level="warn"] {
    background: var(--c-error-bg);
    color: var(--c-error);
    border-color: var(--c-error);
}
.gps-tools-status[data-level="ok"] {
    color: var(--c-signal-dk, #00c76a);
    border-color: var(--border-hi);
}

/* Wenn der Status per JS direkt in #map gehangen wird, zeigen
 * wir ihn gross + mittig im unteren Viertel der Karte. Eigene Klasse
 * damit die alten Stack-Regeln (left:44px etc) nicht greifen. */
.gps-tools-status.gps-tools-status--center {
    position: absolute;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%);
    /* die alten Regeln aushebeln */
    top: auto;
    right: auto;
    /* Groesse + Lesbarkeit */
    font-size: 1.05em;
    padding: 10px 18px;
    border-radius: var(--radius-md, 8px);
    border-width: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    /* ueber Leaflet-Tooltip (650) und -Popup (700), unter
 * Modals (1000+). Leaflet-Controls liegen bei 800-1000, daher 1000. */
    z-index: 1000;
    max-width: min(80%, 540px);
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.01em;
}

[data-theme="light"] .gps-tools-btn {
    background: var(--bg-elevated);
    color: var(--fg);
}
/* d: Aktiv-State (Tracking laeuft) muss in Light + Dark rot sein.
 * Die generische [data-theme="light"] .gps-tools-btn-Regel oben ueber-
 * schrieb sonst den is-recording-Hintergrund auf var(--bg-elevated).
 * Hoehere Spezifitaet via .is-recording macht das Rot wieder sichtbar. */
[data-theme="light"] .gps-tools-btn.is-recording,
[data-theme="dark"] .gps-tools-btn.is-recording {
    background: var(--c-error);
    color: var(--c-light);
    border-color: var(--c-error);
}

/* Map-Status ist jetzt oben mittig (siehe +67-Regel),
 * Bottom-Override gestrichen. */

/* ============================================================
 — Filter-Popover-Bug + GPS-Tools-Sichtbarkeit
 ============================================================ */

/* Popover wird mit position:absolute + top:100% gerendert. Anker MUSS
 * .features-panel-filters sein (nicht .features-panel, sonst wird er
 * durch overflow:hidden weggeclippt). */
.features-panel-filters {
    position: relative;
    /* Popover darf nach unten ueber die Chips raushaengen, nicht clippen. */
    overflow: visible;
}
/* Auch das Body darf den Popover nach unten zeigen lassen. */
.features-panel:not(.features-panel--collapsed) {
    overflow: visible;
}
/* Aber Liste selbst soll scrollbar bleiben - das macht .features-panel-list
 * weiter unten sowieso schon. */

/* Popover bekommt jetzt klaren z-index und Schatten, damit er ueber der
 * Liste liegt. */
.features-panel-popover {
    z-index: 50 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    /* Auf Top der gesamten Filter-Bar verankert, nicht bottom. */
    top: 100% !important;
    margin-top: 4px;
}

/* GPS-Tools-Sichtbarkeit: Container mit display + position relativ
 * sicherstellen, falls overflow oder z-index ihn versteckt. */
#gps-tools.gps-tools {
    display: flex !important;
    z-index: 1500 !important;
}

/* ============================================================
 b — GPS-Tools jetzt als L.Control im leaflet-bottom-left
 ============================================================ */

/* Innerhalb des Leaflet-Bottom-Left-Containers braucht .gps-tools KEIN
 * absolute mehr - der Leaflet-Container stackt seine Children selbst. */
.leaflet-bottom .gps-tools {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 0 6px 0;
    flex-direction: column;
    pointer-events: auto;
}
.leaflet-bottom .gps-tools .gps-tools-status {
    position: absolute;
    left: calc(100% + 6px);
    bottom: 0;
    /* der Status-Badge bleibt absolut, damit er nicht in den Stack
     * integriert ist - die Tools-Box behaelt feste Hoehe. */
}
/* Standard-Leaflet-Bottom-Container hat margin von 10px - GPS-Tools liegen
 * dann ca 70-90px ueber dem unteren Rand (Locate + Scale dazwischen). */
.leaflet-bottom.leaflet-left {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}
.leaflet-bottom.leaflet-left .leaflet-control {
    margin: 4px 10px 0 10px;
}

/* Die Buttons selbst nicht zu klein, ueberlappen Locate-Plugin nicht. */
.leaflet-bottom .gps-tools-btn {
    /* Leaflet-typischer Schatten / Border passend zu anderen Controls. */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* ============================================================
 b — GPS-Tools Visibility-Toggle + Stack-Reihenfolge
 ============================================================ */

/* Default unsichtbar, nur wenn Locate-Plugin aktiv ist anzeigen. */
#gps-tools.gps-tools {
    display: flex !important;
    z-index: 1500 !important;
}
#gps-tools.gps-tools.is-hidden {
    display: none !important;
}

/* Stack-Reihenfolge im leaflet-bottom-left:
 * Wir wollen von UNTEN nach OBEN: scale-line, locate-arrow, gps-tools.
 * Standard-Leaflet-Insertion mit position:bottomleft ist:
 *   scale (added 1st)  -> data-rolle in normaler Reihenfolge
 *   locate (added 2nd) -> darueber
 *   gps-tools (added 3rd, post-boot) -> ganz oben
 * Mit normaler flex-direction (column) waere insertion-order = vertical.
 * Default Leaflet hat KEIN flex auf dem Container, sondern stackt block.
 * Block-Layout: scale oben, locate mittig, gps-tools unten. Falsch.
 * Daher: flex-column-reverse erzwingen. */
.leaflet-bottom.leaflet-left {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start;
}

/* ============================================================
 — Stack-Reihenfolge der Leaflet-Controls
 ============================================================ */

/* LINKS UNTEN (von unten nach oben):
 *   1. leaflet-control-locate  (location-arrow)
 *   2. gps-tools               (Punkt / Linie / Polygon)
 * Insertion-order: locate (in setupMap), dann gps-tools (post-boot).
 * column-reverse macht "first inserted = bottom" → locate unten, GPS oben. */
.leaflet-bottom.leaflet-left {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start;
}

/* RECHTS UNTEN (von oben nach unten):
 *   1. leaflet-control-zoom    (Zoom +/-)
 *   2. leaflet-control-scale   (Massstab darunter)
 * Default-Block-Layout reicht hier - zoom (1st) oben, scale (2nd) darunter.
 * KEINE flex-direction-reverse, sonst dreht sich das wieder um. */
.leaflet-bottom.leaflet-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end;
}
.leaflet-bottom.leaflet-right .leaflet-control {
    margin: 4px 10px;
}

/* ============================================================
 b — Leaflet-Default-Stack zurueck, GPS-Tools absolut
 ============================================================ */

/* Flex-Hacks auf den Leaflet-Bottom-Containern komplett zuruecknehmen.
 * Leaflet stackt seine Controls per Default sauber via block - das war ok. */
.leaflet-bottom.leaflet-left,
.leaflet-bottom.leaflet-right {
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
}
.leaflet-bottom.leaflet-left .leaflet-control,
.leaflet-bottom.leaflet-right .leaflet-control {
    margin: 10px;
}

/* GPS-Tools werden NICHT in den Leaflet-Container gesteckt, sondern
 * als absolut positioniertes Overlay im map-shell, sodass der Locate-Button
 * seine feste Position behaelt. */
#gps-tools.gps-tools {
    position: absolute !important;
    left: 10px !important;
    bottom: 90px !important;   /* ueber dem Locate-Button (~30px hoch + 10px margin + Luft) */
    top: auto !important;
    z-index: 1500 !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    pointer-events: auto;
}
#gps-tools.gps-tools.is-hidden {
    display: none !important;
}
#gps-tools .gps-tools-status {
    position: absolute !important;
    left: calc(100% + 6px);
    bottom: 0;
}

/* ============================================================
 c — GPS-Tools im #map-Element + Position relativ dazu
 ============================================================ */

/* #gps-tools wird per JS in #map verschoben, damit absolute positioning
 * relativ zum Karten-Container ist (#map hat position:relative durch Leaflet).
 * left:10px liegt damit am linken Karten-Rand, nicht am linken Bildrand.
 * bottom:56px platziert die Tools ueber dem Locate-Button (Locate ~40px hoch
 * + 10px margin-bottom, also Top-Edge bei ~50px von Karte-Bottom). */
#map > #gps-tools.gps-tools {
    position: absolute !important;
    left: 10px !important;
    bottom: 56px !important;
    top: auto !important;
    z-index: 1500 !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    pointer-events: auto;
}
#map > #gps-tools.gps-tools.is-hidden {
    display: none !important;
}

/* Auf Smartphone
 * (max-width: 768px) schoben sich die GPS-Tools-Buttons + Locate
 * ueber das aufgeklappte Sidepanel (Sidebar/Features-Panel sind auf
 * z-index: 1200 in der Mobile-Spec). Analog zur map-status-Regel
 * jetzt unter Sidebar-Level absenken: Sidepanel offen → GPS-Tools
 * verdeckt. !important + ID-Selektor (Spezifitaet 1,2,1) gewinnt
 * gegen die mehrfachen `z-index: 1500 !important`-Regeln oben. */
@media (max-width: 768px) {
    #gps-tools.gps-tools,
    #map > #gps-tools.gps-tools,
    .leaflet-bottom .gps-tools,
    .leaflet-bottom .leaflet-control-locate,
    .leaflet-bottom.leaflet-left {
        z-index: 1100 !important;
    }
}