/* Grundstile, Teil 4 von 8: Farbschema der Knoepfe, Profil, Datenschutz-Banner, Symbolwahl, Smartphone und Tablet.
   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. */

/* ============================================================
 — Komplettes Farbschema fuer Buttons (Light + Dark)
 ============================================================ */

/* ---- Sidebar links: Neuer Layer (Plus) ---- */
.sidebar-rail-add,
.sidebar-head-actions [data-action="create"] {
    background: rgba(2, 254, 137, 0.18) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.45) !important;
}
.sidebar-rail-add:hover,
.sidebar-head-actions [data-action="create"]:hover {
    background: rgba(2, 254, 137, 0.30) !important;
    color: #006a2c !important;
}

/* ---- Sidebar links: Einklappen / Aufklappen (Pfeile) - hellblau ---- */
.sidebar-rail-toggle,
.sidebar-head-actions [data-action="toggle"] {
    background: rgba(0, 160, 210, 0.16) !important;
    color: #006a8d !important;
    border-color: rgba(0, 160, 210, 0.45) !important;
}
.sidebar-rail-toggle:hover,
.sidebar-head-actions [data-action="toggle"]:hover {
    background: rgba(0, 160, 210, 0.28) !important;
    color: #004161 !important;
}

/* ---- Features-Panel rechts: gleiche Pfeil-Buttons hellblau ---- */
.features-panel-rail-toggle,
.features-panel-collapse {
    background: rgba(0, 160, 210, 0.16) !important;
    color: #006a8d !important;
    border-color: rgba(0, 160, 210, 0.45) !important;
}
.features-panel-rail-toggle:hover,
.features-panel-collapse:hover {
    background: rgba(0, 160, 210, 0.28) !important;
    color: #004161 !important;
}

/* Rail-DB-Button im selben Gruen wie der
 * expandierte .features-panel-fullscreen-Btn — konsistente Visual-Sprache
 * fuer "DB-Vollansicht oeffnen", egal ob collapsed oder expanded. */
.features-panel-rail-db {
    background: rgba(2, 254, 137, 0.18) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.45) !important;
}
.features-panel-rail-db:hover {
    background: rgba(2, 254, 137, 0.30) !important;
    color: #006a2c !important;
}

/* ---- Features-Panel: Datenbank-Vollansicht-Button gruen (analog Plus links) ---- */
.features-panel-fullscreen {
    background: rgba(2, 254, 137, 0.18) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.45) !important;
}
.features-panel-fullscreen:hover {
    background: rgba(2, 254, 137, 0.30) !important;
    color: #006a2c !important;
}

/* ---- Filter-Chips im rechten Panel: Layer = grün, Tags = blau ---- */
.features-panel-chip[data-popover="layers"] {
    background: rgba(2, 254, 137, 0.14) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.40) !important;
}
.features-panel-chip[data-popover="layers"]:hover,
.features-panel-chip[data-popover="layers"].is-active {
    background: rgba(2, 254, 137, 0.30) !important;
    border-color: #00c76a !important;
}
.features-panel-chip[data-popover="tags"] {
    background: rgba(0, 160, 210, 0.14) !important;
    color: #006a8d !important;
    border-color: rgba(0, 160, 210, 0.40) !important;
}
.features-panel-chip[data-popover="tags"]:hover,
.features-panel-chip[data-popover="tags"].is-active {
    background: rgba(0, 160, 210, 0.28) !important;
    border-color: #00A0D2 !important;
}

/* ---- Action-Bar: Auswahl leeren = weisser Hintergrund ---- */
.features-panel-actionbar [data-action="clear-selection"] {
    background: var(--c-light) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
}
[data-theme="light"] .features-panel-actionbar [data-action="clear-selection"] {
    background: var(--c-light) !important;
    color: #2a2f33 !important;
    border-color: rgba(0, 96, 141, 0.30) !important;
}
.features-panel-actionbar [data-action="clear-selection"]:hover {
    background: var(--bg-card) !important;
}

/* ---- Per-Item-Action-Buttons im rechten Panel ---- */
/* Plus-Variante (add-to-layer) bleibt im Standard-Gruen. Wenn das Feature
   schon im aktiven Layer haengt, kommt zusaetzlich .btn-amber drauf —
   der Selektor weiter unten dreht dann auf Amber/Minus. */
.features-panel-item-add {
    background: rgba(2, 254, 137, 0.14) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.40) !important;
    /* Fix: + zentrieren */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.features-panel-item-add:hover {
    background: rgba(2, 254, 137, 0.28) !important;
}
/* Toggle-Override fuer den Remove-Btn (Minus). Wenn das
 Feature schon im aktiven Layer ist, traegt der Btn zusaetzlich
 .btn-amber — wir uebersteuern dann die Gruen-Werte aus dem Basis-
 Style auf Amber, behalten aber die identische Geometrie. */
.features-panel-item-add.btn-amber {
    background: rgba(201, 138, 0, 0.14) !important;
    color: var(--c-amber, #c98a00) !important;
    border-color: rgba(201, 138, 0, 0.40) !important;
}
.features-panel-item-add.btn-amber:hover {
    background: rgba(201, 138, 0, 0.28) !important;
}
.features-panel-item-edit {
    background: rgba(0, 160, 210, 0.14) !important;
    color: #006a8d !important;
    border-color: rgba(0, 160, 210, 0.40) !important;
}
.features-panel-item-edit:hover {
    background: rgba(0, 160, 210, 0.28) !important;
}
.features-panel-item-delete {
    background: var(--c-error-bg) !important;
    color: var(--c-error) !important;
    border-color: rgba(255, 92, 101, 0.40) !important;
}
.features-panel-item-delete:hover {
    background: rgba(255, 92, 101, 0.30) !important;
}

/* ---- Modal-Buttons ---------------------- Cancel/Close: NEUTRAL grau,
 damit sie sich deutlich von destruktiven Aktionen (Verwerfen, Loeschen)
 abheben. Das X im Modal-Header bleibt im neutralen Stil. Destruktive
 Aktionen (.ghost.danger oder data-action=discard/delete) sind im
 naechsten Block solid-rot definiert. ----------------------- */
.modal-actions [data-action="cancel"],
.modal-footer [data-action="cancel"],
.modal-actions [data-action="close-modal"],
.modal-footer [data-action="close-modal"],
.modal-close-btn {
    background: var(--bg-elevated) !important;
    color: var(--muted-hi) !important;
    border: 1px solid var(--border) !important;
}
.modal-actions [data-action="cancel"]:hover,
.modal-footer [data-action="cancel"]:hover,
.modal-actions [data-action="close-modal"]:hover,
.modal-footer [data-action="close-modal"]:hover,
.modal-close-btn:hover {
    background: var(--bg-card) !important;
    color: var(--fg) !important;
    border-color: var(--border-hi) !important;
}

/* Destruktive Aktionen: solid-rot, klar als "Achtung" markiert. */
.modal-actions .ghost.danger,
.modal-footer .ghost.danger,
.modal-actions [data-action="discard"],
.modal-actions [data-action="delete"],
.modal-actions [data-action="bulk-delete"] {
    background: var(--c-error) !important;
    color: var(--c-light) !important;
    border: 1px solid var(--c-error) !important;
    font-weight: 500;
}
.modal-actions .ghost.danger:hover,
.modal-footer .ghost.danger:hover,
.modal-actions [data-action="discard"]:hover,
.modal-actions [data-action="delete"]:hover,
.modal-actions [data-action="bulk-delete"]:hover {
    filter: brightness(1.1);
}

/* ---- Modal-Inputs im hellen Modus: heller Grau-Hintergrund ---- */
[data-theme="light"] .modal-card .field input,
[data-theme="light"] .modal-card .field select,
[data-theme="light"] .modal-card .field textarea,
[data-theme="light"] .modal-card .i2i-in,
[data-theme="light"] .modal-card .clsp-src,
[data-theme="light"] .login-card .field input {
    background: #f0f3f6 !important;
    color: var(--fg) !important;
    border: 1px solid rgba(0, 96, 141, 0.18) !important;
}
[data-theme="light"] .modal-card .field input:focus,
[data-theme="light"] .modal-card .field select:focus,
[data-theme="light"] .modal-card .field textarea:focus,
[data-theme="light"] .modal-card .i2i-in:focus,
[data-theme="light"] .modal-card .clsp-src:focus,
[data-theme="light"] .login-card .field input:focus {
    border-color: var(--c-primary-hi) !important;
}

/* ---- Tristate-Buttons ---- */
.features-panel-tristate-btn[data-state="all"] {
    color: #007a3a;
    border-color: rgba(2, 254, 137, 0.40);
}
.features-panel-tristate-btn[data-state="all"]:hover,
.features-panel-tristate-btn[data-state="all"].is-active {
    background: rgba(2, 254, 137, 0.28) !important;
    color: #006a2c;
    border-color: var(--c-signal-dk);
}
.features-panel-tristate-btn[data-state="any"] {
    color: #006a8d;
    border-color: rgba(0, 160, 210, 0.40);
}
.features-panel-tristate-btn[data-state="any"]:hover,
.features-panel-tristate-btn[data-state="any"].is-active {
    background: rgba(0, 160, 210, 0.28) !important;
    color: #004161;
    border-color: var(--c-primary-hi);
}
.features-panel-tristate-btn[data-state="not"] {
    color: var(--c-error);
    border-color: rgba(255, 92, 101, 0.40);
}
.features-panel-tristate-btn[data-state="not"]:hover,
.features-panel-tristate-btn[data-state="not"].is-active {
    background: rgba(255, 92, 101, 0.22) !important;
    border-color: var(--c-error);
}

/* ---- Topbar-Icons: jeder Knopf eine eigene Farbe ---- */
.topbar #admin-btn {
    background: rgba(59, 189, 232, 0.18) !important;
    color: #06829c !important;
    border-color: rgba(59, 189, 232, 0.45) !important;
}
.topbar #admin-btn:hover {
    background: rgba(59, 189, 232, 0.32) !important;
    color: #034f5f !important;
}
.topbar #trash-btn {
    background: rgba(255, 192, 74, 0.18) !important;
    color: #b87a00 !important;
    border-color: rgba(255, 192, 74, 0.55) !important;
}
.topbar #trash-btn:hover {
    background: rgba(255, 192, 74, 0.34) !important;
    color: #8a5a00 !important;
}
.topbar #help-btn {
    background: rgba(0, 160, 210, 0.16) !important;
    color: #006a8d !important;
    border-color: rgba(0, 160, 210, 0.45) !important;
}
.topbar #help-btn:hover {
    background: rgba(0, 160, 210, 0.30) !important;
    color: #004161 !important;
}
/* Theme-Toggle visuell als Vorschau auf das
 Ziel-Theme. Im hellen Modus zeigt der Btn das Mond-Icon (Klick =
 dunkles Theme aktivieren) und ist dunkel mit hellem Icon. Im dunklen
 Modus zeigt der Btn das Sonnen-Icon (Klick = helles Theme aktivieren)
 und ist hell mit dunklem Icon. So sieht der User schon vor dem Klick
 was passiert. */
.topbar #theme-toggle {
    border-color: var(--border-hi) !important;
}
:root[data-theme="light"] .topbar #theme-toggle {
    /* Klick aktiviert dunkles Theme -> Btn-Vorschau: dunkel + hell */
    background: #1f2428 !important;
    color: #f1f4f7 !important;
    border-color: #1f2428 !important;
}
:root[data-theme="light"] .topbar #theme-toggle:hover {
    background: #2c3439 !important;
}
:root[data-theme="dark"] .topbar #theme-toggle {
    /* Klick aktiviert helles Theme -> Btn-Vorschau: hell + dunkel */
    background: #f1f4f7 !important;
    color: #1f2428 !important;
    border-color: #d0d7de !important;
}
:root[data-theme="dark"] .topbar #theme-toggle:hover {
    background: #ffffff !important;
}
.topbar #logout-btn {
    background: rgba(155, 90, 200, 0.20) !important;
    color: #6a3aa0 !important;
    border-color: rgba(155, 90, 200, 0.50) !important;
}
.topbar #logout-btn:hover {
    background: rgba(155, 90, 200, 0.36) !important;
    color: #4a2a78 !important;
}

/* Dark-Mode-Adjustments fuer alle obigen Color-Buttons: Hintergruende
 * etwas heller, Schriftfarbe Pastell statt dunkel. */
[data-theme="dark"] .sidebar-rail-add,
[data-theme="dark"] .sidebar-head-actions [data-action="create"],
[data-theme="dark"] .features-panel-fullscreen,
[data-theme="dark"] .features-panel-item-add,
[data-theme="dark"] .features-panel-chip[data-popover="layers"] {
    color: #6dffb4 !important;
}
/* Remove-Variante (Minus) bleibt auch im Dark-Mode
 amber-pastell — uebersteuert die gemeinsame Gruen-Regel oben. */
[data-theme="dark"] .features-panel-item-add.btn-amber {
    color: #f5c869 !important;
}
[data-theme="dark"] .sidebar-rail-toggle,
[data-theme="dark"] .sidebar-head-actions [data-action="toggle"],
[data-theme="dark"] .features-panel-rail-toggle,
[data-theme="dark"] .features-panel-collapse,
[data-theme="dark"] .features-panel-item-edit,
[data-theme="dark"] .features-panel-chip[data-popover="tags"],
[data-theme="dark"] .topbar #help-btn {
    color: #9bd9f5 !important;
}
/* Dark-Mode pastel-Gruen analog
 * .features-panel-fullscreen (Zeile 6321), damit Light + Dark identische
 * Visual-Sprache haben. */
[data-theme="dark"] .features-panel-rail-db {
    color: #6dffb4 !important;
}
[data-theme="dark"] .topbar #admin-btn { color: #6ed6f4 !important; }
[data-theme="dark"] .topbar #trash-btn { color: #ffc04a !important; }
[data-theme="dark"] .topbar #logout-btn { color: #c79be3 !important; }

/* ============================================================
 b — Profil-Modal (Self-Service-Account-Daten + Export)
 ============================================================ */

.profile-modal-body { display: flex; flex-direction: column; gap: 14px; }
.profile-modal-body h4 {
    margin: 8px 0 4px;
    font-size: 1em;
    font-weight: 500;
    color: var(--c-primary-hi);
}
.profile-modal-body h4:first-child { margin-top: 0; }
/* Abschnitte in Mein Konto als gerahmte Gruppen wie im Arbeitsplatz
   der Einstellungen: Rahmen mit Titel in der
   Linie, innen dieselbe Spalte mit 12 px Abstand. */
.profile-gruppe {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.profile-gruppe > legend {
    padding: 0 6px;
    font-size: 0.9em;
    color: var(--muted-hi);
}
/* Der Abstand kommt allein aus gap, eigene Raender der Kinder (p.sub,
   .modal-actions) liessen die Gruppen oben ungleich hoch aussehen. */
.profile-gruppe > :not(legend) { margin-top: 0; margin-bottom: 0; }

.profile-data {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 0.92em;
}
.profile-data dt {
    color: var(--muted-hi);
    font-weight: 400;
}
.profile-data dd {
    margin: 0;
    color: var(--fg);
    word-break: break-all;
}
.profile-data code {
    font-size: 0.88em;
    color: var(--muted-hi);
}

/* c: Quota-Anzeige + Self-Service-Loeschung. */
.quota-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.quota-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-deep, rgba(0, 0, 0, 0.18));
    border-radius: 4px;
    overflow: hidden;
}
.quota-bar > span {
    display: block;
    height: 100%;
    background: var(--c-primary, #2c8ee0);
    transition: width .3s ease;
}
.quota-bar > span[data-warn="true"] {
    background: var(--c-error, #d8493b);
}
.quota-label { margin: 0; }

.delete-account-form {
    border: 1px solid var(--c-error);
    background: var(--c-error-bg, rgba(216, 73, 59, 0.06));
    border-radius: var(--radius-md, 8px);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.delete-account-form .form-warning {
    margin: 0;
    color: var(--c-error);
}
.delete-account-form .field { margin: 0; }

.form-ok {
    color: var(--c-signal-dk, #00a04f);
    font-size: 0.92em;
    margin: 4px 0 0;
}
.ghost.danger {
    color: var(--c-error);
    border-color: var(--c-error);
}
.ghost.danger:hover {
    background: var(--c-error-bg);
}

/* ============================================================
 g — DSGVO-Cookie-Banner + Legal-Links
 ============================================================ */

/* Mehrfach-Nutzungs-Badge in "Tilesets von anderen Nutzern". */
.from-others-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 160, 210, 0.18);
    color: var(--c-primary, #007FB4);
    font-size: 0.78em;
    font-weight: 600;
    cursor: help;
    border: 1px solid rgba(0, 160, 210, 0.4);
}
[data-theme="dark"] .from-others-badge {
    background: rgba(59, 189, 232, 0.2);
    color: #3BBDE8;
}

/* Import-Compare-Modal (Duplikat-Pruefung beim Layer-Import). */
.import-compare-card {
    width: min(960px, 100vw);
    max-width: 100vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.import-compare-card .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
}
.cmp-toolbar {
    display: flex;
    /* War flex-end -> die zweite Spalte hat ein
 sub-Hint UNTER dem Input, was den Label-Container höher macht; bei
 flex-end werden die Boxen am unteren Rand ausgerichtet und der
 Input der zweiten Spalte rutscht NACH OBEN gegenüber dem ersten
 Input. flex-start richtet die Boxen oben aus, die Inputs landen
 auf derselben Y-Achse, der sub-Hint hängt sauber unten dran. */
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
    border-radius: 6px;
}
.cmp-toolbar .field { flex: 1 1 200px; }
.cmp-bulk {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cmp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cmp-row {
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: var(--bg-card, #fff);
}
.cmp-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
}
.cmp-row-head:hover {
    background: var(--bg-elevated, rgba(0, 0, 0, 0.03));
}
.cmp-row-name {
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmp-row-meta { font-size: 0.85em; }
.cmp-row-toggle {
    color: var(--muted, #6b7280);
    font-size: 1.1em;
}
.cmp-row-body {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg, #fafafa);
}
[data-theme="dark"] .cmp-row-body { background: rgba(255, 255, 255, 0.02); }
.cmp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
.cmp-side {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    background: var(--bg-card, #fff);
}
.cmp-side h4 {
    margin: 0 0 8px;
    font-size: 0.95em;
    color: var(--muted-hi, #4b5563);
}
.cmp-side--old h4 { color: #b91c1c; }
.cmp-side--new h4 { color: #166534; }
.cmp-props { margin-top: 6px; }
.cmp-props summary { cursor: pointer; font-size: 0.85em; }
.cmp-props pre {
    max-height: 180px;
    overflow: auto;
    font-size: 0.8em;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
    padding: 6px;
    border-radius: 4px;
    margin: 6px 0 0;
}
.cmp-minimap {
    height: 200px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 10px;
    background: #eef;
}
.cmp-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
    border-radius: 4px;
}
.cmp-actions label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cmp-badge {
    display: inline-block;
    font-size: 0.72em;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cmp-badge--dup {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.cmp-badge--new {
    background: rgba(22, 101, 52, 0.12);
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.35);
}
@media (max-width: 700px) {
    .cmp-grid {
        grid-template-columns: 1fr;
    }
}

/* Toast-Notifikation. Toasts werden in einem Stack-Container
 untereinander gerendert. Neue Toasts kommen oben rein, aeltere
 ruecken nach; das Fade-out laeuft ueber 1s. */
.geolyser-toast-stack {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;        /* Container fangt keine Klicks */
    max-width: min(520px, 92vw);
    width: max-content;
}
.geolyser-toast {
    pointer-events: auto;        /* Einzelner Toast schon */
    background: var(--bg-card, #fff);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--c-primary, #007FB4);
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    font-size: 0.92em;
    animation: geolyser-toast-in .25s ease-out;
}
.geolyser-toast--success { border-left-color: #10B981; }
.geolyser-toast--error   { border-left-color: #ef4444; }
.geolyser-toast--info    { border-left-color: var(--c-primary, #007FB4); }
/* Toast-Avatar-Variante (Coworker-Aenderungs-Toasts).
 Avatar links neben Text, Maske bei Incognito. */
.geolyser-toast--with-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.geolyser-toast-avatar {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--user-color, #06829c);
    color: var(--user-color, #06829c);
    border: 2px solid var(--user-color, #06829c);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.geolyser-toast-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.geolyser-toast-avatar--incognito {
    background: rgba(125, 129, 138, 0.18);
    color: #7d818a;
    border-color: rgba(125, 129, 138, 0.55);
}
.geolyser-toast-initial {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.geolyser-toast-text {
    flex: 1 1 auto;
}
.geolyser-toast.is-leaving {
    animation: geolyser-toast-out 1s ease-in forwards;
}
@keyframes geolyser-toast-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes geolyser-toast-out {
    from { opacity: 1; max-height: 200px; padding: 10px 16px;
           margin-top: 0; margin-bottom: 0; }
    to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0;
           margin-top: 0; margin-bottom: -8px; }
}
[data-theme="dark"] .geolyser-toast {
    background: #1f242b;
    color: #e5e7eb;
}

/* Passwort-Toggle (Klartext-Eye). */
.geolyser-pw-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.geolyser-pw-wrap > input[type="password"],
.geolyser-pw-wrap > input[type="text"] {
    flex: 1;
    padding-right: 38px !important;
}
.geolyser-pw-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--muted, #6b7280);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
}
.geolyser-pw-toggle:hover {
    color: var(--text, #111);
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .geolyser-pw-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Random-Icon im uc-generate-password-Btn
 * (User-Create-Modal). Per CSS mask getintet, damit es den Btn-Color
 * (currentColor) traegt — in Light-Mode dunkel, in Dark-Mode hell. */
.uc-random-btn .uc-random-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("/img/icons/random-svgrepo-com.svg") center / contain no-repeat;
    mask: url("/img/icons/random-svgrepo-com.svg") center / contain no-repeat;
}

.legal-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    /* Wenn das Notice aus dem Help-Modal heraus geoeffnet
 * wird, soll es DARUEBER liegen damit der User es lesen kann.
 * Modals haben z-index 2000, also setzen wir 2100. */
    z-index: 2100;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: legal-notice-in .25s ease-out;
}
.legal-notice.is-leaving {
    animation: legal-notice-out .22s ease-in forwards;
}
@keyframes legal-notice-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes legal-notice-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}
.legal-notice-card {
    pointer-events: auto;
    max-width: 720px;
    width: 100%;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.legal-notice-text {
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--fg);
}
.legal-notice-text strong { font-weight: 500; }
.legal-notice-text a {
    color: var(--c-primary-hi);
    text-decoration: underline;
}
.legal-notice-text a:hover { color: var(--c-primary); }
.legal-notice-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.legal-notice-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid transparent;
    font: inherit;
    cursor: pointer;
}
.legal-notice-btn.primary {
    background: var(--c-primary);
    color: var(--c-light, #ffffff);
    border-color: var(--c-primary);
}
.legal-notice-btn.primary:hover {
    background: var(--c-primary-hi);
    border-color: var(--c-primary-hi);
}

/* Permanente Legal-Links (Login-Footer + Map-Bottom-Bar). */
.legal-links {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 0.85em;
    color: var(--muted-hi);
}
.legal-links a {
    color: var(--muted-hi);
    text-decoration: none;
}
.legal-links a:hover {
    color: var(--c-primary-hi);
    text-decoration: underline;
}
.legal-links .sep {
    opacity: 0.55;
    user-select: none;
}

/* Auf der Map sitzen die Legal-Links rechts neben der Attribution
 * unten mittig, in der gleichen Zeile. */
.map-legal-links {
    position: absolute;
    right: 8px;
    bottom: 0;
    z-index: 600;
    background: var(--map-info-bg);
    color: var(--muted-hi);
    border-radius: 6px 6px 0 0;
    padding: 2px 8px;
    font-size: 11px;
    pointer-events: auto;
}
.map-legal-links a {
    color: var(--c-primary-hi);
    text-decoration: none;
}
.map-legal-links a:hover { text-decoration: underline; }

/* ist die Karte zu schmal
 * fuer eine gemeinsame Zeile, rueckt die Pille eine Zeile hoeher, statt
 * sich mit der Namensnennung von OpenStreetMap zu ueberlappen. Wer das
 * entscheidet, ist `untenOrdnen()` in map.js: dort wird gemessen, weil
 * weder die Breite der Steuerung links noch die der Pille feststeht.
 *
 * 22 px = Hoehe der Namensnennungszeile plus zwei Pixel Luft. Die
 * abgerundeten Ecken wandern dabei nach unten mit, sonst saehe die
 * Pille aus, als klebte sie am Rand. */
#map.map-unten-zweizeilig .map-legal-links {
    bottom: 22px;
    border-radius: 6px;
}
/* Die Massstabsleiste sitzt mit ihrem 28-px-Abstand bereits in dieser
 * zweiten Zeile, nur links. Solange sie und die Pille zusammen schmaler
 * sind als die Karte, teilen sie sich die Zeile. Wird es enger, blendet
 * `untenOrdnen()` in map.js die Leiste aus: auf 250 px Kartenbreite
 * misst niemand mehr etwas ab, die Pflichtangaben muessen aber lesbar
 * bleiben. */
#map.map-unten-ohne-massstab .leaflet-control-scale {
    display: none !important;
}

/* Mobile: Banner laesst Schaltflaechen unter dem Text einrasten. */
@media (max-width: 540px) {
    .legal-notice { left: 8px; right: 8px; bottom: 8px; }
    .legal-notice-card { padding: 12px; }
    .legal-notice-actions { justify-content: stretch; }
    .legal-notice-btn.primary { width: 100%; }
}

/* ============================================================
 — Tristate-BG-Tint, Center-Inputs links, Clear-Selection-Dark,
 Login-Topbar-Buttons
 ============================================================ */

/* Tristate: Hintergrund-Tint statt Text-Tint */
.features-panel-tristate-btn[data-state="all"] {
    background: rgba(2, 254, 137, 0.18) !important;
    color: var(--fg) !important;
    border-color: rgba(2, 254, 137, 0.45) !important;
}
.features-panel-tristate-btn[data-state="all"]:hover,
.features-panel-tristate-btn[data-state="all"].is-active {
    background: rgba(2, 254, 137, 0.42) !important;
    border-color: var(--c-signal-dk) !important;
    color: var(--fg) !important;
}
.features-panel-tristate-btn[data-state="any"] {
    background: rgba(0, 160, 210, 0.18) !important;
    color: var(--fg) !important;
    border-color: rgba(0, 160, 210, 0.45) !important;
}
.features-panel-tristate-btn[data-state="any"]:hover,
.features-panel-tristate-btn[data-state="any"].is-active {
    background: rgba(0, 160, 210, 0.40) !important;
    border-color: var(--c-primary-hi) !important;
    color: var(--fg) !important;
}
.features-panel-tristate-btn[data-state="not"] {
    background: rgba(255, 92, 101, 0.18) !important;
    color: var(--fg) !important;
    border-color: rgba(255, 92, 101, 0.45) !important;
}
.features-panel-tristate-btn[data-state="not"]:hover,
.features-panel-tristate-btn[data-state="not"].is-active {
    background: rgba(255, 92, 101, 0.42) !important;
    border-color: var(--c-error) !important;
    color: var(--fg) !important;
}

/* Default-Center-Inputs (im Admin-Modal) linksbuendig - per default
 * sind type=number rechtsbuendig in vielen Browsern. */
.modal-card .field input[type="number"] {
    text-align: left !important;
}

/* Clear-Selection im Dark-Mode: dunkler Grauton statt weiss */
[data-theme="dark"] .features-panel-actionbar [data-action="clear-selection"] {
    background: #2a3036 !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .features-panel-actionbar [data-action="clear-selection"]:hover {
    background: #353c43 !important;
    border-color: var(--border-hi) !important;
}

/* Login-Topbar-Buttons (Help + Theme rechts oben) */
.login-topbar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    gap: 8px;
}
.login-topbar .icon-btn {
    width: 36px; height: 36px;
    background: rgba(24, 27, 29, 0.55);
    color: var(--c-light);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.login-topbar .icon-btn:hover {
    background: rgba(0, 160, 210, 0.32);
    border-color: var(--c-primary-hi);
}
[data-theme="light"] .login-topbar .icon-btn {
    background: rgba(255, 255, 255, 0.85);
    color: #2a2f33;
    border-color: rgba(0, 96, 141, 0.18);
}
/* Hard-Reset-Button im Login-Topbar. Rose signalisiert "letzter Ausweg /
   Reset" (analog #hard-reload-btn im Hilfe-Footer), ohne destruktiv
   (rot/danger) zu wirken. */
.login-topbar .login-hard-reset-btn:hover {
    background: rgba(244, 63, 94, 0.28);
    border-color: #fb7185;
    color: #fb7185;
}
[data-theme="light"] .login-topbar .login-hard-reset-btn:hover {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.55);
    color: #e11d48;
}

/* ============================================================
 + 65 — Marker-Icon-Picker im Feature-Modal
 Jedes Icon ist eigenstaendig (24x32) in der Layer-Farbe,
 ${COLOR} -> currentColor fuer die Vorschau im Picker.
 ============================================================ */

.marker-icon-picker {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: 4px 0;
}
.marker-icon-pick {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    color: var(--c-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
}
.marker-icon-pick:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
}
.marker-icon-pick.is-active {
    background: rgba(0, 127, 180, 0.18);
    border-color: var(--c-primary-hi);
}
[data-theme="light"] .marker-icon-pick {
    background: var(--bg);
    color: var(--c-primary-dk);
}
[data-theme="light"] .marker-icon-pick.is-active {
    background: rgba(0, 127, 180, 0.20);
}
.marker-icon-pick svg { display: block; }

/* kompakter Icon-Picker + Custom-Icon-Vollmenue. */
.marker-icon-pick--more { color: var(--text-muted); font-weight: 700; }
.marker-icon-pick--custom img { width: 26px; height: 26px; object-fit: contain; }
.icon-menu-section-label {
    font-size: 12px;
    color: var(--text-muted);
    margin: 10px 0 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.icon-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.icon-menu-grid--custom { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.icon-menu-custom-tile { position: relative; display: inline-flex; }
.icon-menu-custom-tile .marker-icon-pick { width: 100%; }
.icon-menu-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--c-danger, #b91c1c);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}
.icon-menu-del:hover { filter: brightness(1.1); }
.icon-menu-empty, .icon-menu-loading {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 2px;
}
.icon-menu-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius-sm);
    color: var(--c-primary);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.icon-menu-upload:hover { background: var(--bg-card); border-color: var(--c-primary); }
.geolyser-custom-pin img { width: 30px; height: 30px; object-fit: contain; display: block; }
/* Symbol-Generator (js/marker-icon-generator.js). Der Einstieg im
   Symbol-Fenster sieht aus wie "Eigenes Symbol hochladen" daneben. */
button.icon-menu-gen {
    background: transparent;
    font: inherit;
    margin-left: 8px;
}
.mgen-card { max-width: 640px; width: min(640px, calc(100vw - 24px)); }
.mgen-body {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 20px;
    align-items: start;
}
.mgen-vorschau {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
}
/* Karo-Grund, damit Transparenz und weisse Rahmen sichtbar sind. */
.mgen-gross,
.mgen-klein canvas {
    background-color: var(--bg-elevated);
    background-image:
        linear-gradient(45deg, var(--border) 25%, transparent 25%),
        linear-gradient(-45deg, var(--border) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border) 75%),
        linear-gradient(-45deg, transparent 75%, var(--border) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.mgen-gross { width: 150px; height: 150px; }
.mgen-klein { display: flex; align-items: center; gap: 8px; }
.mgen-felder { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mgen-abschnitt {
    font-weight: 600;
    color: var(--muted-hi);
    margin-top: 4px;
}
.mgen-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mgen-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mgen-lbl { font-size: 0.86em; color: var(--muted); }
.mgen-in {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--fg);
    font: inherit;
    width: 100%;
}
.mgen-range { width: 100%; height: 36px; }
.mgen-check > span:last-child { display: inline-flex; align-items: center; gap: 6px; height: 36px; }
.mgen-swatch {
    width: 100%;
    height: 36px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    cursor: pointer;
}
.mgen-swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius-sm) - 2px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.mgen-formen { display: flex; flex-wrap: wrap; gap: 6px; }
.mgen-form { width: 40px; height: 40px; padding: 0; display: inline-flex;
             align-items: center; justify-content: center; }
.mgen-form.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.mgen-status { margin-right: auto; }
/*: mehrzeiliger Text, Freihand-Form */
textarea.mgen-in.mgen-text { height: auto; min-height: 56px; padding: 6px 10px; resize: vertical; line-height: 1.3; }
.mgen-freihand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mgen-freihand[hidden] { display: none; }
.mgen-freihand .btn-with-icon { height: 34px; }
.mgen-gross.ist-zeichenflaeche { cursor: crosshair; touch-action: none; outline: 2px dashed var(--c-primary-hi, var(--c-primary)); outline-offset: 2px; }
.mgen-felder :disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
    .mgen-body { grid-template-columns: 1fr; }
    .mgen-vorschau { position: static; flex-direction: row; justify-content: center; }
}

/* ============================================================
 — Help-Btn gruen, brand-name groesser, etc.
 ============================================================ */

/* Help-Button gruen statt blau */
.topbar #help-btn {
    background: rgba(2, 254, 137, 0.18) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.45) !important;
}
.topbar #help-btn:hover {
    background: rgba(2, 254, 137, 0.32) !important;
    color: #006a2c !important;
}
[data-theme="dark"] .topbar #help-btn {
    color: #6dffb4 !important;
}

/* brand-name etwas groesser */
.topbar .wordmark, #brand-name {
    font-size: 1.18em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Login-Topbar Help-Btn ist raus - nur Theme bleibt. Falls noch im DOM,
 * ausblenden. */
#login-help-btn { display: none !important; }

/* ============================================================
 k — Mobile- und Tablet-Optimierung
 Hauptziel Tablet (≤ 1024 px), Smartphone (≤ 540 px) als
 "Funktioniert auch". Sidebars werden automatisch collapsed,
 Modals nutzen mehr Bildschirm, Touch-Targets vergroessert.
 ============================================================ */

/* Tablet-Range: 540 - 1024 px */
@media (max-width: 1024px) {
    /* Sidebar-Defaults auf "collapsed" - User kann sie aufklappen wenn
     * gebraucht, aber Karte hat erstmal Vorrang. */
    .sidebar { flex-basis: var(--sidebar-rail-w); width: var(--sidebar-rail-w); }
    .features-panel { flex-basis: var(--sidebar-rail-w); width: var(--sidebar-rail-w); }
    .sidebar:not(.sidebar--collapsed),
    .features-panel:not(.features-panel--collapsed) {
        /* Aufgeklappt: rund 40 %, hoechstens 360 px, als Vorgabe. OHNE
         * !important: sonst schlaegt diese Regel die Breite, die der
         * Griff (js/resizable.js) inline setzt, und das Ziehen im
         * Querformat bewegt nichts. Die
         * Obergrenze beim Ziehen ist das andere Panel
         * (js/leisten-lage.js maxBreite). Im Hochformat gilt der Block
         * "Hochformat bis 1024 px" weiter unten. */
        width: min(40%, 360px);
        flex-basis: min(40%, 360px);
    }

    /* Modals im Mobile auf echtem Vollbild
 * ohne abgerundete Ecken. Vorher 96vw mit 16px Margin -> "halb-
 * abgerundet" mit Schwebe-Effekt, der bei Touch-Bedienung im Weg ist.
 * Jetzt: 100vw x 100dvh, border-radius: 0, kein margin. modal-body
 * scrollt intern, damit Header + Footer-Buttons immer sichtbar bleiben.
 *
 * `.modal`-Wrapper hatte noch `padding: 24px`
 * + Backdrop, dadurch war die Modal-Card nicht direkt am Screen-Rand
 * sondern hatte 24px-Outer-Margin. Modal soll den Screen
 * direkt ausfuellen, kein sichtbarer Backdrop-Ring. */
    .modal {
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .modal-card {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-card > .modal-header,
    .modal-card > .modal-footer {
        flex-shrink: 0;
    }
    .modal-card > .modal-body,
    .modal-card > .modal-form {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 14px;
    }

    /* Topbar: schmaler, Brand-Wordmark gekuerzt. */
    .topbar { padding: 6px 10px; }
    .topbar #brand-name { font-size: 1em; }

    /* Touch-Target-Werte von 40/44 px auf 32 px reduziert. Knapp unter
 * Apple-Empfehlung 44pt, aber fuer den taeglichen Daumen-Tap
 * komfortabel. Falls zu klein -> Wert pro Klasse erhoehen, ohne den
 * ganzen Block zu invalidieren. */
    .leaflet-bar a {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 18px !important;
    }
    .gps-tools-btn {
        width: 32px;
        height: 32px;
    }
    .leaflet-control-locate a .leaflet-control-locate-location-arrow {
        width: 18px; height: 18px; margin: 7px;
    }

    /* Geoman-Toolbar: kleinere Buttons. */
    .leaflet-pm-toolbar a {
        width: 32px !important;
        height: 32px !important;
    }

    /* Layers-Toggle: kleiner. */
    .leaflet-control-layers-toggle {
        width: 32px !important;
        height: 32px !important;
        background-size: 20px 20px !important;
    }
}

/* Smartphone-Range: ≤ 540 px */
@media (max-width: 540px) {
    /* Breite und Lage der aufgeklappten Panels: Block "Hochformat bis
     * 1024 px" weiter unten, er gilt unter 541 px in jeder Lage. */

    /* <=540px erbt jetzt die Vollbild-
 * Werte aus dem 768px-Block (oben). Hier nur noch Touch-spezifische
 * Anpassungen. */

    /* Topbar: Logo + Wordmark + minimaler Abstand. Username-Pill muss
     * trotzdem klickbar bleiben. */
    .topbar { padding: 4px 6px; gap: 4px; }
    .topbar #brand-name { display: none; }
    .topbar .icon-btn {
        width: 36px; height: 36px;
    }

    /* Login-Card padding auf Smartphone reduzieren. */
    .login-card {
        max-width: 92vw;
        padding: 24px 18px;
    }

    /* GPS-Status oberhalb statt unteres Viertel mittig - damit kein
     * Overlap mit den GPS-Tools links unten. */
    .gps-tools-status.gps-tools-status--center {
        bottom: 28%;
        max-width: 92%;
        font-size: 0.95em;
        padding: 8px 12px;
    }

    /* Map-Status (Coords + GPS-Accuracy): Lage wie auf dem
 * Schreibtisch (unten, mittig ueber der sichtbaren Karte, siehe
 * .map-status oben), hier mit dunklerem Hintergrund fuer Lesbarkeit
 * und hohem z-Index, damit sie ueber den Leaflet-Controls liegt. */
    .map-status {
        font-size: 11px !important;
        padding: 3px 10px !important;
        top: auto !important;
        left: var(--map-status-x, 50%) !important;
        right: auto !important;
        bottom: var(--map-status-unten, 22px) !important;
        transform: translateX(-50%) !important;
        background: rgba(0, 0, 0, 0.65) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        pointer-events: none !important;
        /* z-index unter den auf 1200 sitzenden
 * Sidebars (.sidebar / .features-panel) — die GPS-Status-Pille schien
 * vorher durch das aufgeklappte Sidepanel durch. */
        z-index: 1100 !important;
    }
    .map-status-coords { color: #fff !important; }
    .map-status-accuracy { color: #4cd2ff !important; }

    /* Image-Slots (Feature-Edit-Modal) auf Smartphone in 3 Spalten,
     * sonst zu schmal. */
    .image-slots {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Marker-Icon-Picker: 4 Spalten statt 6. */
    .marker-icon-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    /* Circle-Button-Versuch zurueckgenommen — sah komisch aus, war
 * dauer-eingeblendet, und Drag funktionierte trotzdem nicht.
 * Im 768px-Block bewusst KEINE .resizable-handle-Regel mehr —
 * Default-Style greift (kleiner Original-Handle mit 3-Punkten).
 * Tablet-Anpassung (groessere Touch-Zone): siehe @media-Block
 * (min-width:541px) and (max-width:1024px) weiter unten.
 * Smartphone (<540px) Handle-Hide: separater Block weiter unten. */

    /* Datenschutz/Impressum-Pill rechts unten: kleiner, weiter weg. */
    .map-legal-links {
        font-size: 10px;
        padding: 1px 6px;
    }
}

/* Touch-spezifische Tweaks (kein Hover) */
@media (hover: none) {
    /* Hover-States verwirren auf Touch-Geraeten oft - reduzieren. */
    .leaflet-bar a:hover { background: var(--bg-elevated); }
    .gps-tools-btn:hover:not(:disabled) { background: var(--bg-elevated); }

    /* Resize-Handle-Circle-Btn aus einem frueheren Anlauf
 * rueckgaengig gemacht (sah komisch aus). Kein ::before-Override
 * mehr noetig. Tablet-Touch-Resize wird unten in
 * (min-width:541px) and (max-width:1024px) Touch-tauglich gemacht;
 * Smartphone-Range (<540px) wird Resize komplett deaktiviert. */
}

/* Smartphone (<540px) — Resize-Handle komplett
 * aus, spart den 24px-Rand. Drag wird sowieso vom Daumen oft falsch
 * getriggert; Sidebars haben auf Smartphones eh feste Width (siehe
 * 540px-Block, .sidebar:not(.sidebar--collapsed) { width: 92% }).
 * zusaetzlich Map-Search-Toggle auf 28px
 * verkleinert (Desktop/Tablet bleibt 32, Smartphone braucht es kompakter). */
@media (max-width: 540px) {
    .resizable-handle {
        display: none !important;
    }
    /* Smartphone-Override fuer Map-Search-Toggle
 * wurde rueckgaengig gemacht — Default-Groesse 32x32 gilt jetzt
 * ueberall (siehe Default-Block der `.map-search-toggle`). */
}

/* Tablet-Range (541-1024px) — Resize-Handle
 * sichtbar, etwas breiter als Desktop-Default fuer Touch-Treffer mit
 * dem Finger. Die ORIGINAL .resizable-grip mit den 3 Punkten bleibt
 * sichtbar als visuelles Signal. */
@media (min-width: 541px) and (max-width: 1024px) {
    .resizable-handle {
        width: 16px !important;
        /* Ganz IN der Leiste: .sidebar schneidet mit overflow:hidden ab,
           ein Griff bei -8 px war nur zur Haelfte (8 px) zu treffen. */
        right: 0 !important;
        touch-action: none;
    }
    .resizable-handle--left {
        right: auto !important;
        left: -8px !important;
    }
    .resizable-grip {
        opacity: 0.55 !important;
    }
}

/* Hochformat bis 1024 px, und unter 541 px in jeder Lage. Dieselbe Abfrage steht in js/leisten-lage.js
 * (MQ_HOCHKANT) und js/zeichen-dock.js.
 *
 * Ein aufgeklapptes Panel legt sich ueber die Karte und reicht bis an
 * die Schiene des anderen; nur diese bleibt sichtbar. Es ist immer nur
 * eines offen, das andere klappt js/leisten-lage.js zu. Gezogen wird
 * hier nichts, der Griff ist aus. */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 540px) {
    .sidebar:not(.sidebar--collapsed),
    .features-panel:not(.features-panel--collapsed) {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1200;
        width: calc(100% - var(--sidebar-rail-w)) !important;
        flex-basis: calc(100% - var(--sidebar-rail-w)) !important;
        max-width: none !important;
    }
    .sidebar:not(.sidebar--collapsed) { left: 0; right: auto; }
    .features-panel:not(.features-panel--collapsed) { right: 0; left: auto; }
    .resizable-handle { display: none !important; }
}

/* ---------------------------------------------------------------------
 * Layer-Lade-Modal
 * ------------------------------------------------------------------- */
.load-modal-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0 12px;
    /* position:relative, damit die absolut positionierten
 Filter-Popover (.lm-filter-popover) sich auf die Toolbar als
 containing block beziehen — nicht aufs naechste position:relative
 Eltern-Element irgendwo weiter oben. */
    position: relative;
}
/* Lade-Modal-Filter-Popover unterhalb des Chips,
 ueber der Liste schwebend. */
.lm-filter-popover {
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    z-index: 1300;
    min-width: 380px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
    padding: 12px;
}
/* Dark-Mode-Hintergrund fuer Filter-Popover analog zum
 Modal-Header/Footer . Gilt sowohl fuer das Layers-Modal-
 Filter-Popover als auch das DB-Modal-Filter-Popover, damit das Layout
 ueberall einheitlich ist. var(--bg-card) ist im Dark-Mode oft semi-
 transparent — das wirkte hier mit der semi-transparenten Modal-Card
 doppelt durchscheinend. */
[data-theme="dark"] .lm-filter-popover,
[data-theme="dark"] .features-panel-popover.db-filter-popover {
    background: #272D31;
    border-color: rgba(255, 255, 255, 0.12);
}
/* Search-Input hatte den selben BG wie das
 Modal - das war im hellen UND dunklen Theme schwer zu unterscheiden.
 Jetzt ein Tick dunkler/heller als die Modal-Card, damit das Input
 visuell klar als interaktives Element auftaucht. */
.load-modal-search {
    flex: 1 1 auto;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    background: var(--bg-page);
    color: var(--fg);
    font-size: 14px;
    transition: border-color .12s ease, background .12s ease;
}
.load-modal-search:hover { border-color: var(--c-primary-hi); }
.load-modal-search:focus {
    outline: 2px solid var(--c-primary);
    outline-offset: -1px;
    border-color: var(--c-primary);
}
[data-theme="light"] .load-modal-search {
    background: #f1f4f7;
    border-color: #c8cfd6;
}
[data-theme="light"] .load-modal-search:focus {
    background: #fff;
}
[data-theme="dark"] .load-modal-search {
    background: #0D1214;
    border-color: rgba(255, 255, 255, 0.18);
}
.load-modal-count { white-space: nowrap; }
.load-modal-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 60vh; overflow-y: auto;
    border-top: 1px solid var(--c-border);
}
.load-modal-row {
    display: grid;
    /* alle Spalten ausser Name auf FIXE px-Breite, damit
 die Action-Buttons und das Datum ueber alle Zeilen exakt vertikal
 ausgerichtet sind — egal ob die Zeile Coworker-Avatare hat, ob
 der Layer-Name lang oder kurz ist, oder ob das Feature-Count eine
 oder mehrere Stellen hat. fr-Spalten waren das Problem: ihr
 min-content vergroessert die Spalte automatisch, was die
 nachfolgenden Spalten verschoben hat.
 Spalten: checkbox / swatch / name (flex) / creator / meta(N
 Features) / datum / presence / actions. */
    /* Breiten per Ziehgriff in der Kopfzeile einstellbar: js/load-layer-modal.js setzt --lm-w-<spalte> an der
       Liste. Ohne Wert gelten die bisherigen Breiten. */
    grid-template-columns: 18px 14px var(--lm-w-name, minmax(140px, 1fr))
        var(--lm-w-creator, 100px) var(--lm-w-meta, 100px)
        var(--lm-w-date, 140px) 96px var(--lm-w-akt, 112px);
    min-width: fit-content;
    gap: 10px; align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
/* Spalte "Projekt". Sie steht nur bei aktiver
 * Projekt-Funktion, sonst stuende in jeder Zeile dasselbe Wort. Die
 * Spaltenzahl haengt deshalb an einem Merkmal der LISTE
 * (load-layer-modal.js setzt data-projektspalte) und nicht an einer
 * zweiten Klasse pro Zeile - so bleibt die Grundregel darueber die
 * einzige Stelle, an der die Breiten fuer den Normalfall stehen.
 * Reihenfolge: checkbox / swatch / name / Ersteller / Projekt /
 * meta / Datum / Presence / Aktionen. */
.load-modal-list[data-projektspalte="ja"] .load-modal-row {
    grid-template-columns:
        18px 14px var(--lm-w-name, minmax(120px, 1fr)) var(--lm-w-creator, 100px)
        var(--lm-w-project, 120px) var(--lm-w-meta, 100px)
        var(--lm-w-date, 140px) 96px var(--lm-w-akt, 112px);
}
/* Kopfzelle mit Ziehgriff am rechten Rand. */
.load-modal-list { overflow-x: auto; }
.lm-hcell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    align-self: stretch;
}
.lm-hcell > .load-modal-sort-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lm-col-resize {
    position: absolute;
    top: -4px; bottom: -4px;
    right: -9px;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    z-index: 1;
}
.lm-col-resize::after {
    content: "";
    position: absolute;
    left: 3px; top: 25%; bottom: 25%;
    width: 2px;
    border-radius: 1px;
    background: var(--border);
}
.lm-col-resize:hover::after,
.lm-col-resize.is-dragging::after { background: var(--c-primary); top: 0; bottom: 0; }
.load-modal-project {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Kettensymbol an einem nur verknuepften Layer. */
.load-modal-linkmark { opacity: 0.7; }
.load-modal-row:not(.load-modal-row--header):hover {
    background: var(--input-bg);
}
.load-modal-row .layer-presence-stack {
    justify-self: start;
    overflow: hidden;
    max-width: 100%;
}
/* globaler `:empty { display: none }` (Z3270) wuerde
 den leeren Presence-Placeholder im Layers-Modal unsichtbar machen,
 wodurch die Grid-Spalte zusammenbricht und die Action-Buttons in
 die Presence-Spalte rutschen. Im Layers-Modal-Kontext ueberschreiben
 wir das, sodass auch leere Placeholder ihren Spalten-Slot halten. */
.load-modal-row .layer-presence-stack:empty {
    display: inline-flex;
    min-width: 1px;
}
/* Action-Spalte ist 80px breit, beide 28x28-Btns + 4px Gap
 passen gerade rein. Rechtsbuendig damit der Trash- bzw. Cloud-Btn
 immer am rechten Rand der Spalte sitzt. */
.load-modal-row .load-modal-actions {
    display: inline-flex;
    gap: 4px;
    justify-self: end;
    /* die Knopf-Spalte bleibt fest rechts sichtbar, auch
       wenn breitere Spalten die Zeile ueber das Fenster hinaus ziehen. */
    position: sticky;
    right: 0;
    z-index: 1;
    padding-left: 6px;
    background: var(--bg-elevated);
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.35);
}
.load-modal-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.load-modal-name-cell .load-modal-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.load-modal-date {
    font-size: 0.85em;
    color: var(--muted, #888);
    white-space: nowrap;
}
/* Per-Row-Action-Buttons im Layer-Modal — kompakte
 28x28 Icon-Btns, einheitliche Optik (Load=+, Unload=-, Export=Cloud-
 Download). Damit ist die Action-Spalte schmal und stoert das Spalten-
 Layout nicht. !important weil .ghost und .icon-btn-Pads sonst die
 Box durch hohe Spezifizierungs-Konkurrenz vergroessern. */
.load-modal-row-btn,
.load-modal-actions .load-modal-row-btn,
button.load-modal-row-btn.ghost.icon-btn {
    /* 32 x 32 wie alle Knoepfe in Tabellenzeilen (DESIGN.md 4.5) */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
.load-modal-row-btn img,
.load-modal-row-btn svg {
    display: block;
}
/* Button-Farb-Modifier. is-success = grünlich,
 is-coral = orangerot. Werden u.a. fuer Load (gruen) und Unload (coral)
 im Layers-Modal sowie row-attach-active (gruen) im DB-Modal genutzt. */
.btn-success,
button.btn-success.ghost.icon-btn {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    border-color: rgba(76, 175, 80, 0.55);
}
.btn-success:hover,
button.btn-success.ghost.icon-btn:hover {
    background: rgba(76, 175, 80, 0.28);
    border-color: rgba(76, 175, 80, 0.80);
    color: #67c66a;
}
/* Amber-Variante (Remove-from-Layer im DB-Panel) analog
 zu btn-success. Gleicher Amber-Ton wie bei layer-badge--dirty. */
.btn-amber,
button.btn-amber.ghost.icon-btn {
    background: rgba(201, 138, 0, 0.15);
    color: var(--c-amber, #c98a00);
    border-color: rgba(201, 138, 0, 0.55);
}
.btn-amber:hover,
button.btn-amber.ghost.icon-btn:hover {
    background: rgba(201, 138, 0, 0.28);
    border-color: rgba(201, 138, 0, 0.80);
    color: #e6a627;
}
/* .ghost.btn-amber ueberall sonst. */
.ghost.btn-amber,
[data-theme="dark"] .ghost.btn-amber {
    background: rgba(201, 138, 0, 0.15);
    color: var(--c-amber, #c98a00);
    border-color: rgba(201, 138, 0, 0.55);
}
.ghost.btn-amber:hover:not([disabled]),
[data-theme="dark"] .ghost.btn-amber:hover:not([disabled]) {
    background: rgba(201, 138, 0, 0.28);
    border-color: rgba(201, 138, 0, 0.80);
    color: #e6a627;
}
/* Orangener Zweit-Knopf in Bestaetigungs-Dialogen. Gemessen im Browser
   ueber die tatsaechlich greifenden Regeln, nicht geraten. */
.modal-actions .ghost.btn-amber,
.modal-footer .ghost.btn-amber,
[data-theme="dark"] .modal-actions .ghost.btn-amber,
[data-theme="dark"] .modal-footer .ghost.btn-amber {
    background: rgba(201, 138, 0, 0.15);
    color: var(--c-amber, #c98a00);
    border-color: rgba(201, 138, 0, 0.55);
}
.modal-actions .ghost.btn-amber:hover:not([disabled]),
.modal-footer .ghost.btn-amber:hover:not([disabled]),
[data-theme="dark"] .modal-actions .ghost.btn-amber:hover:not([disabled]),
[data-theme="dark"] .modal-footer .ghost.btn-amber:hover:not([disabled]) {
    background: rgba(201, 138, 0, 0.28);
    border-color: rgba(201, 138, 0, 0.80);
    color: #e6a627;
}
.btn-coral,
button.btn-coral.ghost.icon-btn {
    background: rgba(255, 127, 80, 0.15);
    color: #ff7f50;
    border-color: rgba(255, 127, 80, 0.55);
}
.btn-coral:hover,
button.btn-coral.ghost.icon-btn:hover {
    background: rgba(255, 127, 80, 0.28);
    border-color: rgba(255, 127, 80, 0.80);
    color: #ff9670;
}
/* Cyan-Variante (Edit/BulkEdit im DB-Modal)
 * analog zu btn-success/btn-amber. Geolyser-CI-Cyan #3BBDE8. Wird
 * fuer Edit-Aktionen genutzt — Konsistenz mit Sidebar/Sidepanel. */
.btn-cyan,
button.btn-cyan.ghost.icon-btn {
    background: rgba(59, 189, 232, 0.15);
    color: var(--c-cyan, #3BBDE8);
    border-color: rgba(59, 189, 232, 0.55);
}
.btn-cyan:hover,
button.btn-cyan.ghost.icon-btn:hover {
    background: rgba(59, 189, 232, 0.28);
    border-color: rgba(59, 189, 232, 0.80);
    color: #5acef0;
}
/* klickbare Variante des Color-Swatch im Lade-Modal. */
.load-modal-swatch--btn {
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.load-modal-swatch--btn:hover { outline: 2px solid var(--c-primary, #06829c); }
.load-modal-recolor-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1500;
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 6px;
    /* deckend, es schwebt ueber der Liste (siehe .sw-update-info) */
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}
.load-modal-recolor-pick {
    width: 18px; height: 18px;
    border-radius: 3px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.load-modal-recolor-pick.is-active { border-color: #000; }
[data-theme="dark"] .load-modal-recolor-pick.is-active { border-color: #fff; }
/* Klickbarer Name -> Inline-Rename. */
.load-modal-name--btn {
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.load-modal-name--btn:hover {
    background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .load-modal-name--btn:hover {
    background: rgba(255,255,255,0.06);
}
.load-modal-name-edit {
    /* War weiss-auf-weiss im Dark-Mode.
 Root-cause: --bg-input existiert nicht (richtiger Name ist
 --input-bg), also griff der Fallback #fff. Und color war
 nicht gesetzt, daher inheritance vom Parent (light text im
 dark theme) -> weiss auf weiss. Fix: korrekter Variable-Name
 + expliziter Fallback #0d1214, plus color: var(--fg). */
    font: inherit;
    padding: 2px 4px;
    border: 1px solid var(--c-primary, #06829c);
    border-radius: 3px;
    background: var(--input-bg, #0d1214) !important;
    color: var(--fg, #eef3f6) !important;
}
/* Creator-Name als kleine Spalte. */
.load-modal-creator {
    font-size: 0.85em;
    color: var(--muted, #888);
    white-space: nowrap;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.load-modal-row.is-checked {
    background: rgba(0, 204, 255, 0.10);
}
/* Header-Row mit sortierbaren Spalten — Background +
 Color angeglichen an .trash-table th. Sticky bleibt, damit beim
 Scrollen die Spalten-Header sichtbar bleiben. */
.load-modal-row--header {
    background: var(--input-bg);
    color: var(--muted-hi);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}
.load-modal-row--header .load-modal-swatch--header {
    background: transparent;
    border: none;
}
.load-modal-sort-btn {
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font: inherit;
    font-weight: 600;
}
.load-modal-sort-btn:hover {
    background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .load-modal-sort-btn:hover {
    background: rgba(255,255,255,0.06);
}
/* Lade-Modal-Variante des Avatar-Stacks: gleiche Chip-Optik, nur ohne
   den linken Innenabstand der Sidebar (Grid-Gap reicht hier). */
.load-modal-row .load-modal-presence {
    padding: 0;
    margin: 0;
}
.load-modal-row:last-child { border-bottom: none; }
.load-modal-swatch {
    width: 14px; height: 14px;
    border-radius: 3px;
    background: var(--swatch, var(--c-primary));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.load-modal-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600;
}
.load-modal-meta { font-size: 12px; color: var(--c-fg-muted); white-space: nowrap; }
.load-modal-badge {
    font-size: 11px; padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-success-bg, rgba(46, 160, 67, .15));
    color: var(--c-success-fg, #2ea043);
    font-weight: 600;
    /* feste Breite damit das Layout beim
 Toggle stabil bleibt - "geladen" ist 7 Zeichen, ~64px reicht. */
    min-width: 64px; text-align: center;
}
.load-modal-badge.is-hidden {
    visibility: hidden;
}
/* "fremd"-Badge fuer Workspace-Layer anderer User. */
.load-modal-badge.load-modal-badge--foreign {
    background: var(--bg-elevated, rgba(0, 0, 0, 0.08));
    color: var(--muted-hi, #666);
    margin-left: 6px;
    font-style: italic;
    font-weight: 500;
}
[data-theme="dark"] .load-modal-badge.load-modal-badge--foreign {
    background: rgba(255, 255, 255, 0.12);
    color: #ccc;
}
.load-modal-row--foreign .load-modal-swatch {
    opacity: 0.7;
}
.load-modal-actions { display: flex; gap: 6px; align-items: center; }
/* Laden- und Entfernen-Btn auf identische
 Breite + Hoehe normieren, damit der Layer-Eintrag beim Toggle
 nicht visuell springt. */
.load-modal-actions [data-action="load"],
.load-modal-actions [data-action="unload"] {
    min-width: 110px;
    height: 32px;
    padding: 0 12px;
    justify-content: center;
}
.load-modal-empty { padding: 20px; text-align: center; }

.modal-actions--column {
    flex-direction: column !important;
    align-items: stretch;
    gap: 8px;
}
.modal-actions--column > button { width: 100%; }

/* Export-Format-Modal: Buttons (".geolyser ZIP", "GeoJSON", "GPKG"
   etc.) sollen in Dark- und Light-Mode klar lesbar sein. .primary hat
   bereits color: var(--c-light) (weiss), aber wir setzen es explizit
   damit kein anderer Selektor das ueberschreibt. */
#export-format-modal .modal-actions button.primary {
    color: var(--c-light, #fff);
}
#export-format-modal .modal-actions button.primary:hover {
    color: var(--c-light, #fff);
}

/* Sidebar-Rail "Layer laden"-Button. */
.sidebar-rail-load {
    border: none; background: transparent; cursor: pointer;
    color: var(--c-fg-muted);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    margin-top: 4px;
}
.sidebar-rail-load:hover { background: var(--bg-elevated); color: var(--c-fg); }

/* Layer-Sharing-Tab (Admin-Modal): "schon vorhanden" abgedimmt. */
.trash-table tr.is-disabled { opacity: 0.55; }

/* Bulk-Tags-Bar im DB-Modal-Footer. */
.db-bulk-tags-bar {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--bg-elevated);
}
.db-bulk-tags-bar label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--c-fg-muted);
}
.db-bulk-tags-bar input[type="text"] {
    height: 32px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 4px;
    background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
    font-size: 13px; min-width: 220px;
}
.db-export-format {
    height: 32px; padding: 0 8px;
    border: 1px solid var(--c-border); border-radius: 4px;
    background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
    font-size: 13px;
}
.db-import-tags {
    height: 32px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 4px;
    background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
    font-size: 13px;
}

/* ---------------------------------------------------------------------
 * Polish: Admin-Tabellen vertikal zentriert, Profile-Modal
 * breiter, Buttons in den Tabellen kompakter.
 * ------------------------------------------------------------------- */

/* Profile-Modal default so breit wie das Admin-Einstellungen-Modal. */
#profile-modal .modal-card {
    max-width: 980px;
    width: 95%;
}

/* Admin-Tabellen: alle Zellen vertikal mittig, gleiche Hoehe ueber
   Text/Icons/Buttons/Checkboxes/Selects. */
#admin-modal .trash-table th,
#admin-modal .trash-table td,
#admin-modal .admin-users-table th,
#admin-modal .admin-users-table td {
    vertical-align: middle;
    padding: 8px 10px;
    line-height: 1.4;
}
#admin-modal .trash-table td button,
#admin-modal .trash-table td select,
#admin-modal .trash-table td input[type="checkbox"],
#admin-modal .admin-users-table td button,
#admin-modal .admin-users-table td select,
#admin-modal .admin-users-table td input[type="checkbox"] {
    vertical-align: middle;
}

/* Tabellen-Buttons kompakter: nur das wichtigste, kein riesiges Padding. */
#admin-modal .trash-table td .ghost,
#admin-modal .trash-table td .primary,
#admin-modal .trash-table td .ghost.danger,
#admin-modal .admin-users-table td .ghost,
#admin-modal .admin-users-table td .primary,
#admin-modal .admin-users-table td .ghost.danger {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Action-Cell mit mehreren Buttons: gleichmaessiger Abstand, kein Wrap. */
.admin-users-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}

/* Code-URL nicht ueberlaufen. */
#admin-modal .trash-table td code {
    font-size: 12px;
    word-break: break-all;
}

/* Active-Checkbox in Users-Tabelle in der Mitte zentrieren. */
.admin-users-table td:has(input[type="checkbox"]) {
    text-align: center;
}

/* ---------------------------------------------------------------------
 * DB-Modal-Refactor (3 Buttons unter Liste, Import
 * separat, Auswahl-editieren / Export / Import als eigene Modals).
 * ------------------------------------------------------------------- */

.db-import-row {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--c-border);
}
.modal-footer--compact {
    padding: 10px 16px;
    gap: 8px;
}
.modal-footer--compact .ghost,
.modal-footer--compact .primary {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

.bulk-edit-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-border);
}
.bulk-edit-toolbar label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--c-fg-muted);
}
.bulk-edit-toolbar input[type="text"],
.bulk-edit-toolbar select,
.bulk-edit-toolbar input[type="date"] {
    height: 32px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 4px;
    /* explizit input-bg + fg, sonst hatten Inputs im
 Dark-Mode fast denselben Hintergrund wie der Body und waren
 schwer lesbar. */
    background: var(--input-bg, var(--bg-elevated, #fff));
    color: var(--fg, #111);
    font-size: 13px; min-width: 220px;
}
.bulk-edit-toolbar button.ghost,
.bulk-edit-toolbar button.primary {
    background: var(--bg-card);
    color: var(--fg);
    border: 1px solid var(--border);
}
.bulk-edit-toolbar button.primary {
    background: var(--c-primary, #007fb4);
    color: #fff;
    border-color: var(--c-primary, #007fb4);
}
.bulk-edit-color-tiles {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 4px;
}
/* Bulk-Add-Block symmetrisch zum Remove-Block - Chips
 oben, Input-Feld darunter. */
.bulk-edit-add-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
    min-width: 200px;
}
.bulk-edit-add-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-height: 32px;
    padding: 4px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: var(--input-bg, var(--bg-elevated, #fff));
}
.bulk-edit-add-chip {
    display: inline-flex;
    align-items: stretch;
    background: var(--c-primary, #007fb4);
    color: #fff;
    border-radius: 999px;
    font-size: 0.85em;
    overflow: hidden;
}
.bulk-edit-add-chip-body {
    background: transparent;
    color: inherit;
    border: none;
    padding: 2px 4px 2px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bulk-edit-add-chip-body:hover { filter: brightness(1.1); }
.bulk-edit-add-chip-x {
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
    border: none;
    padding: 2px 8px;
    cursor: pointer;
    font-weight: bold;
}
.bulk-edit-add-chip-x:hover { background: rgba(0, 0, 0, 0.32); }
.bulk-edit-add-chip-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
}
.bulk-edit-add-chip-swatch--none {
    background:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.3) 0 2px,
            rgba(0,0,0,0.0) 2px 4px);
}
.bulk-edit-add-input {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg, var(--bg-elevated, #fff));
    color: var(--fg, #111);
    font-size: 13px;
}
.bulk-edit-list,
.import-preview-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 60vh; overflow-y: auto;
}
.bulk-edit-list li,
.import-preview-list li {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 10px; align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-border);
}
.bulk-edit-list li:last-child,
.import-preview-list li:last-child { border-bottom: none; }
.import-preview-name {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500;
}
.import-preview-name input[type="text"] {
    flex: 1; min-width: 240px;
    height: 28px; padding: 0 8px;
    border: 1px solid transparent; border-radius: 4px;
    background: transparent; color: var(--c-fg);
    font-size: 14px;
}
.import-preview-name input[type="text"]:hover,
.import-preview-name input[type="text"]:focus {
    border-color: var(--c-border);
    background: var(--bg-input, var(--bg-elevated));
    outline: none;
}
.import-preview-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
    font-size: 12px;
}
.import-modal-settings {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border);
}
.import-modal-settings label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--c-fg-muted);
}
.import-modal-settings input[type="text"] {
    height: 32px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 4px;
    background: var(--bg-input, var(--bg-elevated)); color: var(--c-fg);
    font-size: 13px; max-width: 320px;
}

/* ============================================================
 Design-Sammelblock
 ============================================================ */

/* Bulk-Edit "Tags entfernen" als Chip-Picker (statt Free-Text). */
.bulk-edit-remove-block {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1 1 220px;
}
.bulk-edit-remove-block > span {
    font-size: 0.85em; color: var(--muted-hi);
}
.bulk-edit-remove-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    align-items: center;
}
[data-theme="light"] .bulk-edit-remove-chips {
    background: #f1f4f7;
    border-color: #c8cfd6;
}
.bulk-edit-remove-chip {
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.bulk-edit-remove-chip:hover {
    border-color: var(--c-error);
    color: var(--c-error);
}
.bulk-edit-remove-chip.is-active {
    background: var(--c-error);
    color: var(--c-light);
    border-color: var(--c-error);
}

/* Modal-Close-Btn (X oben rechts): klar als Button hervorgehoben in
 beiden Themes - frueher unauffaellig grau.
 ROT-Outline schon im Ruhezustand damit der
 Btn eindeutig als "Schliessen"-Aktion lesbar ist. */
.modal-close-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-error-bg) !important;
    color: var(--c-error) !important;
    border: 1px solid var(--c-error) !important;
    transition: background .12s, color .12s, border-color .12s;
}
.modal-close-btn:hover {
    background: var(--c-error) !important;
    color: var(--c-light) !important;
    border-color: var(--c-error) !important;
}
[data-theme="light"] .modal-close-btn {
    background: #ffe5e7 !important;
    color: #b00020 !important;
    border-color: #b00020 !important;
}
[data-theme="light"] .modal-close-btn:hover {
    background: #b00020 !important;
    color: #fff !important;
    border-color: #b00020 !important;
}

/* Import-Modal Inputs: deutlich anderer BG als das Modal selbst -
   gleich wie der Lade-Modal-Search-Input. */
.import-modal-settings input[type="text"] {
    border: 1px solid var(--border-hi);
    background: var(--bg-page);
}
.import-modal-settings input[type="text"]:focus {
    outline: 2px solid var(--c-primary);
    outline-offset: -1px;
    border-color: var(--c-primary);
}
[data-theme="light"] .import-modal-settings input[type="text"] {
    background: #f1f4f7;
    border-color: #c8cfd6;
}
[data-theme="light"] .import-modal-settings input[type="text"]:focus {
    background: #fff;
}
[data-theme="dark"] .import-modal-settings input[type="text"] {
    background: #0D1214;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Save-Options-Modal: Buttons in column-layout sind alle konsistent
   gross + zentriert. Die Discard-Action liegt visuell separiert vom
   Speichern-Block durch margin-top. Die "Original verwerfen"-Checkbox
   sitzt direkt unter den Save-Buttons als Modifier. */
#save-options-modal .modal-actions--column { gap: 8px; }
#save-options-modal .modal-actions--column > button {
    height: 40px;
    width: 100%;
    justify-content: center;
    padding: 0 14px;
}
#save-options-modal #save-options-discard-original-row {
    margin: 4px 0 4px 4px;
    font-size: 0.9em;
    color: var(--muted-hi);
    display: flex; align-items: center; gap: 6px;
}
/* Verwerfen-Button durch Margin-Abstand separiert (nicht durch
   border auf dem Btn selbst, das macht das Padding kaputt). */
#save-options-modal [data-action="discard"] {
    margin-top: 14px;
    position: relative;
}
#save-options-modal [data-action="discard"]::before {
    content: "";
    position: absolute;
    top: -8px; left: 0; right: 0;
    border-top: 1px solid var(--border);
}

/* Confirm-Card (zB "Nutzer loeschen?", "Papierkorb leeren?"): Buttons
 zentriert, etwas groesser - sie sollen weg vom rechten Rand.
 justify-content: center statt flex-end. */
.confirm-card .modal-actions {
    margin-top: 20px;
    gap: 12px;
    justify-content: center;
}
.confirm-card .modal-actions button {
    min-width: 120px;
    height: 38px;
}

/* Right Sidepanel (Datenbank) im Light-Mode etwas blauer, damit
   sich die Sidebar visuell vom Map-Hintergrund abhebt. */
[data-theme="light"] .features-panel {
    background: linear-gradient(180deg, #eaf1f8 0%, #e3ecf4 100%);
    border-left: 1px solid #c1ced9;
}
[data-theme="light"] .features-panel-rail {
    background: #dde7f0;
    border-left: 1px solid #c1ced9;
}
[data-theme="light"] .features-panel-head {
    border-bottom: 1px solid #c1ced9;
}

/* Mini-Map fuer Geometrie-Edit im Feature-
 Modal. Aspect-Ratio + dunklerer Border damit der Map-Block sich
 klar von den anderen Form-Feldern absetzt. Geoman-Toolbar wird
 ueber pmIgnore/Klick-Toggle gesteuert (siehe map.js). */
.feature-geomedit-mini {
    width: 100%;
    height: 220px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-hi);
    background: var(--bg-page);
    overflow: hidden;
    margin-top: 4px;
}
.feature-geomedit-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted-hi);
    padding: 2px 8px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.feature-geomedit-toggle:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}
.feature-geomedit-toggle.is-active {
    background: var(--c-primary);
    color: var(--c-light);
    border-color: var(--c-primary-dk);
}
.feature-geomedit-hint { color: var(--muted); }

/* DB-Vollansicht "Mehr laden"-Btn am Tabellenende. */
.db-load-more-wrap {
    display: flex; justify-content: center;
    padding: 14px 0 6px;
}
.db-load-more {
    min-width: 200px;
}