/* =====================================================================
   Geolyser-MapApp - Geolyser Brand Base
   Phase 5: + linke Sidebar (OneNote-Style)
   ===================================================================== */

/* ---- Web-Fonts (self-hosted) ---- */
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-style: normal; font-display: swap;
    src: url("/fonts/IBMPlexSans-Light.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
    src: url("/fonts/IBMPlexSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("/fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-style: normal; font-display: swap;
    src: url("/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"); }

/* ---- Brand-Tokens ---- */
:root {
    --c-dark:        #181B1D;
    --c-dark-soft:   #1f2426;
    --c-graphite:    #394043;
    --c-light:       #FFFFFF;

    --c-primary:     #007FB4;
    --c-primary-hi:  #00A0D2;
    --c-cyan:        #3BBDE8;
    --c-cyan-soft:   #9BD9F5;
    --c-primary-dk:  #00608D;
    --c-primary-xdk: #004161;

    --c-signal:      #02FE89;
    --c-signal-dim:  rgba(2, 254, 137, 0.18);
    --c-signal-dk:   #00c76a;

    --c-error:       #ff5c65;
    --c-error-bg:    rgba(255, 92, 101, 0.08);
    --c-warn:        #ffc04a;

    --bg:            var(--c-dark);
    --bg-elevated:   #20262a;
    --bg-panel:      #1c2126;       /* Sidebars / Topbar-Body */
    --bg-card:       rgba(255, 255, 255, 0.03);
    --border:        rgba(155, 217, 245, 0.10);
    --border-hi:     rgba(59, 189, 232, 0.35);
    --fg:            #eef3f6;
    --muted:         #8a979e;
    --muted-hi:      #b8c3c9;
    --input-bg:      #0d1214;
    --input-bg-ro:   #0a0d0f;
    --map-info-bg:   rgba(24, 27, 29, 0.82);

    --radius-sm:     6px;
    --radius:        10px;
    --radius-lg:     16px;

    --shadow-card:   0 10px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.02) inset;
    --shadow-lift:   0 14px 50px rgba(0, 127, 180, 0.18);

    --map-surface:       #0a0d0f;
    --map-control-bg:    rgba(24, 27, 29, 0.85);
    --map-control-bg-lo: rgba(24, 27, 29, 0.82);
    --topbar-bg:         rgba(24, 27, 29, 0.7);

    --sidebar-rail-w:    52px;
    --sidebar-w:         300px;
    --topbar-h:          56px;

    --body-gradient:
        radial-gradient(1200px 600px at 80% -10%, rgba(0, 127, 180, 0.14), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(2, 254, 137, 0.06), transparent 60%),
        var(--bg);

    --font-ui:       "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display:  "Space Grotesk", "IBM Plex Sans", sans-serif;

    color-scheme: dark;
}

:root[data-theme="light"] {
    /* Phase 17-Tuning + Phase 70 polish runde 9: bluer-grey-Palette
     * (frueher zu neutral-grau, JP wollte den waermeren blau-grau-
     * Eindruck, den die rechte Sidebar in Runde 7 bekommen hat,
     * App-weit). Skala (von dunkel nach hell):
     *   --bg          : Body-Hintergrund    (blau-grau)
     *   --bg-card     : Sidebar-Innenhuelle (etwas heller als --bg)
     *   --bg-elevated : Modal-Card / Topbar (weiss + leichte Tönung)
     *   --input-bg    : Inputs / Selects    (rein weiss)
     */
    --bg:            #e3ecf4;
    --bg-elevated:   #ffffff;
    --bg-panel:      #eaf1f8;       /* Sidebars: leicht bluer als Modal-Card */
    --bg-card:       #eaf1f8;
    --border:        #c1ced9;       /* solider blau-grau-Rand */
    --border-hi:     #8fa6b8;
    --fg:            #161b1e;
    --muted:         #566168;
    --muted-hi:      #2a3438;
    --input-bg:      #ffffff;
    --input-bg-ro:   #e8eef4;
    --map-info-bg:   rgba(255, 255, 255, 0.88);
    --c-signal:      #00b368;
    --c-signal-dim:  rgba(0, 179, 104, 0.14);
    --c-signal-dk:   #009458;
    --shadow-card:   0 10px 30px rgba(0, 40, 60, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    --shadow-lift:   0 14px 50px rgba(0, 127, 180, 0.15);
    --map-surface:       #e4ecf0;
    --map-control-bg:    rgba(255, 255, 255, 0.92);
    --map-control-bg-lo: rgba(255, 255, 255, 0.88);
    --topbar-bg:         rgba(255, 255, 255, 0.85);
    --body-gradient:
        radial-gradient(1200px 600px at 80% -10%, rgba(0, 127, 180, 0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(0, 179, 104, 0.05), transparent 60%),
        var(--bg);
    color-scheme: light;
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font-ui);
    color: var(--fg);
    background: var(--body-gradient);
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em 0; }
a { color: var(--c-primary-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

/* ---- Topbar ---- */
.topbar {
    height: var(--topbar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: var(--topbar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.customer-logo { height: 28px; width: auto; display: block; }
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; }
#user-pill {
    color: var(--muted-hi);
    font-size: .85em;
    /* Phase 70 polish runde 4: gleiche Hoehe wie die Icon-Buttons in der
       Topbar (36px), damit der Pill optisch in einer Linie sitzt. */
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    /* Phase 68b: jetzt klickbarer Button (Profil-Modal). */
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: border-color .12s, background .12s, color .12s;
}
#user-pill:hover {
    border-color: var(--c-primary-hi);
    color: var(--c-primary-hi);
}
#user-pill:focus-visible {
    outline: 2px solid var(--c-primary-hi);
    outline-offset: 2px;
}
#user-pill.role-admin       { color: var(--c-signal); border-color: var(--c-signal-dim); }
#user-pill.role-editor      { color: var(--c-primary-hi); border-color: var(--border-hi); }
#user-pill.role-contributor { color: var(--c-cyan); }
#user-pill.role-viewer      { color: var(--muted); }

/* ---- Buttons ---- */
.primary, .ghost {
    border-radius: var(--radius);
    padding: 8px 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    text-align: center;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.primary {
    background: var(--c-primary);
    color: var(--c-light);
    border-color: var(--c-primary-dk);
}
.primary:hover { background: var(--c-primary-hi); }
.primary:disabled { background: var(--c-primary-dk); }
.ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--border);
}
.ghost:hover { background: var(--bg-card); border-color: var(--border-hi); }
.icon-btn { padding: 6px; line-height: 0; }
.icon-btn .icon { display: block; }

/* Theme toggle - Phase 16-Fix: beide Modi explizit, damit nicht im Dark-Mode
 * beide Icons sichtbar sind, wenn data-theme noch nicht gesetzt ist. */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }

/* ---- Map shell layout ---- */
.page--map { overflow: hidden; }
.map-shell {
    position: relative;
    display: flex;
    height: calc(100vh - var(--topbar-h));
    min-height: 0;
}
.map-canvas {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--map-surface);
}

/* ---- Sidebar (OneNote-Style) -------------------------------------- */
.sidebar {
    position: relative;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: row;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    transition: width .18s ease, flex-basis .18s ease;
    overflow: hidden;
    /* ueber Leaflet-Controls (z 1000), damit der Mobile-Overlay-Modus
       (siehe @media unten) die Karten-Controls korrekt verdeckt. */
    z-index: 1100;
}
.sidebar--collapsed {
    flex-basis: var(--sidebar-rail-w);
    width: var(--sidebar-rail-w);
}
.sidebar-rail {
    flex: 0 0 var(--sidebar-rail-w);
    width: var(--sidebar-rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
    border-right: 1px solid var(--border);
}
.sidebar:not(.sidebar--collapsed) .sidebar-rail { display: none; }
.sidebar-rail-toggle, .sidebar-rail-add {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent; border: 1px solid transparent;
    color: var(--fg);
}
.sidebar-rail-toggle:hover, .sidebar-rail-add:hover {
    background: var(--bg-card); border-color: var(--border-hi);
}
.sidebar-rail-count {
    margin-top: auto;
    font-size: .75em;
    color: var(--muted);
    padding: 4px 0;
}
.sidebar-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sidebar--collapsed .sidebar-body { display: none; }

.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.sidebar-title { font-size: .95rem; margin: 0; font-family: var(--font-display); }
.sidebar-head-actions { display: flex; gap: 4px; }

.sidebar-list {
    list-style: none;
    margin: 0; padding: 4px 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-empty {
    margin: 16px 12px;
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
    line-height: 1.5;
}
.sidebar-empty-plus {
    display: inline-flex;
    width: 22px; height: 22px;
    align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--c-primary-hi);
    vertical-align: -5px;
}

/* Layer-Row */
.layer-row {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 10px 6px 8px;
    border-left: 3px solid transparent;
    cursor: default;
}
.layer-row + .layer-row { border-top: 1px solid var(--border); }
.layer-row:hover { background: var(--bg-card); }
.layer-row--draw { border-left-color: var(--c-signal); background: var(--c-signal-dim); }
.layer-row--draft .layer-name-text { font-style: italic; }
.layer-row.is-flash { animation: flash-row .8s ease; }
@keyframes flash-row {
    0%   { background: var(--c-signal-dim); }
    100% { background: transparent; }
}

.layer-swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
    background: var(--swatch, var(--c-primary));
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
.layer-name {
    text-align: left;
    background: transparent; border: 0; padding: 2px 0;
    color: var(--fg);
    font-size: .92rem;
    overflow: hidden;
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
}
.layer-name-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto;
}
.layer-name-edit {
    width: 100%;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: .9rem;
}
.layer-badge {
    font-size: .7em;
    background: var(--c-warn);
    color: #1f1500;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
}
.layer-meta {
    color: var(--muted);
    font-size: .75em;
    min-width: 1.5em;
    text-align: right;
}
.layer-toggles {
    display: flex; gap: 2px;
    align-items: center;
}
.layer-toggle {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--muted);
}
.layer-toggle:hover { color: var(--fg); background: var(--bg-card); border-color: var(--border); }
.layer-toggle.is-on { color: var(--c-primary-hi); background: rgba(0, 160, 210, 0.10); border-color: var(--border-hi); }
.layer-row--draw .layer-toggle[data-action="toggle-draw"].is-on {
    color: var(--c-signal); background: var(--c-signal-dim); border-color: var(--c-signal-dim);
}

/* Layer-Menu (dropdown) */
.layer-menu {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 4px 0 6px 0;
    box-shadow: var(--shadow-card);
}
.layer-menu hr {
    border: 0; border-top: 1px solid var(--border);
    margin: 4px 0;
}
.layer-menu button[role="menuitem"] {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    background: transparent; border: 0; color: var(--fg);
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: .9rem;
}
.layer-menu button[role="menuitem"]:hover { background: var(--bg-card); }
.layer-menu button[role="menuitem"].is-destructive { color: var(--c-error); }
.layer-menu button[role="menuitem"].is-destructive:hover { background: var(--c-error-bg); }
.layer-menu-colors {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px 6px 6px 6px;
}
.layer-color-pick {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--swatch, var(--c-primary));
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.20) inset;
}
.layer-color-pick.is-on { border-color: var(--fg); }
.layer-color-pick:hover { transform: scale(1.06); }

/* ---- Features-Panel (rechte Sidebar) -------------------------------- */
/* Spiegelbild zur linken Sidebar - dieselben Tokens (--sidebar-w,
   --sidebar-rail-w), Border auf der LINKEN statt rechten Kante. */
.features-panel {
    position: relative;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: row-reverse;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    transition: width .18s ease, flex-basis .18s ease;
    overflow: hidden;
    z-index: 1100;
}
.features-panel--collapsed {
    flex-basis: var(--sidebar-rail-w);
    width: var(--sidebar-rail-w);
}
.features-panel-rail {
    flex: 0 0 var(--sidebar-rail-w);
    width: var(--sidebar-rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
    border-left: 1px solid var(--border);
}
.features-panel:not(.features-panel--collapsed) .features-panel-rail { display: none; }
.features-panel-rail-toggle, .features-panel-rail-search {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent; border: 1px solid transparent;
    color: var(--fg);
}
.features-panel-rail-toggle:hover, .features-panel-rail-search:hover {
    background: var(--bg-card); border-color: var(--border-hi);
}
.features-panel-rail-count {
    margin-top: auto;
    font-size: .75em;
    color: var(--muted);
    padding: 4px 0;
}
.features-panel-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.features-panel--collapsed .features-panel-body { display: none; }

.features-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.features-panel-title { font-size: .95rem; margin: 0; font-family: var(--font-display); }
.features-panel-collapse {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--fg);
}
.features-panel-collapse:hover {
    background: var(--bg-card); border-color: var(--border-hi);
}

.features-panel-search {
    position: relative;
    margin: 8px 10px;
}
.features-panel-search-icon {
    position: absolute; top: 50%; left: 8px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    line-height: 0;
}
.features-panel-search-input {
    width: 100%;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 28px 6px 30px;
    font-size: .9rem;
}
.features-panel-search-input:focus {
    border-color: var(--border-hi); outline: none;
}
.features-panel-search-clear {
    position: absolute; top: 50%; right: 4px;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: var(--muted);
    border-radius: 999px;
}
.features-panel-search-clear:hover { color: var(--fg); background: var(--bg-card); }

.features-panel-filterbar {
    position: relative;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 0 10px 8px 10px;
    border-bottom: 1px solid var(--border);
}
.features-panel-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-hi);
    font-size: .8rem;
}
.features-panel-chip:hover { color: var(--fg); border-color: var(--border-hi); }
.features-panel-chip.is-active {
    color: var(--c-primary-hi);
    border-color: var(--border-hi);
    background: rgba(0, 160, 210, 0.10);
}
.features-panel-popover {
    position: absolute;
    top: calc(100% - 4px);
    left: 10px; right: 10px;
    z-index: 5;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    max-height: 280px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.features-panel-popover-list {
    list-style: none; margin: 0; padding: 4px 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.features-panel-popover-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: .85rem;
}
.features-panel-popover-row:hover { background: var(--bg-card); }
.features-panel-popover-row input { accent-color: var(--c-primary); }
.features-panel-popover-empty {
    padding: 10px; color: var(--muted); font-size: .85rem; text-align: center;
}
.features-panel-popover-foot {
    border-top: 1px solid var(--border);
    padding: 4px;
    display: flex; justify-content: flex-end;
}
.ghost-btn {
    background: transparent; border: 0;
    color: var(--muted-hi);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: .8rem;
}
.ghost-btn:hover { color: var(--fg); background: var(--bg-card); }

.features-panel-status {
    padding: 6px 12px;
    font-size: .75em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.features-panel-list {
    list-style: none;
    margin: 0; padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}
.features-panel-empty {
    padding: 16px 12px;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}
.features-panel-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    align-items: start;
}
.features-panel-item:hover { background: var(--bg-card); }
.features-panel-item.is-active {
    background: rgba(0, 160, 210, 0.10);
    border-left: 3px solid var(--c-primary-hi);
    padding-left: 9px;
}
.features-panel-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.30) inset;
}
.features-panel-item-body { min-width: 0; }
.features-panel-name {
    font-size: .92rem; color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.features-panel-meta {
    margin-top: 2px;
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: .72em; color: var(--muted);
}
.features-panel-cat { color: var(--muted-hi); }
.features-panel-layer::before { content: "@ "; opacity: .6; }
.features-panel-tags {
    margin-top: 4px;
    display: flex; flex-wrap: wrap; gap: 3px;
}
.features-panel-tag, .features-panel-tag-more {
    font-size: .7em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted-hi);
    padding: 1px 5px;
    border-radius: 999px;
}
.features-panel-tag-more { color: var(--muted); font-style: italic; }

/* Mobile-Overlay-Modus */
@media (max-width: 700px) {
    .sidebar:not(.sidebar--collapsed) {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: min(86vw, 340px);
        flex-basis: min(86vw, 340px);
        box-shadow: 8px 0 32px rgba(0,0,0,0.35);
    }
    .sidebar--collapsed .sidebar-rail { background: var(--bg-elevated); }

    .features-panel:not(.features-panel--collapsed) {
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: min(86vw, 340px);
        flex-basis: min(86vw, 340px);
        box-shadow: -8px 0 32px rgba(0,0,0,0.35);
    }
    .features-panel--collapsed .features-panel-rail { background: var(--bg-elevated); }
}

/* ---- Loading-Overlay ---- */
.map-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
    /* ueber Leaflet-Controls (z 1000), aber unter dem Modal (z 2000). */
    z-index: 1200;
    pointer-events: none;
}
.map-loading[hidden] { display: none; }
.map-loading-card {
    pointer-events: auto;
    background: var(--map-info-bg);
    border: 1px solid var(--border);
    color: var(--fg);
    padding: 14px 22px;
    border-radius: var(--radius);
    display: flex; gap: 12px; align-items: center;
    box-shadow: var(--shadow-card);
}
.spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-hi);
    border-top-color: var(--c-primary-hi);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Error-Banner / Toast ---- */
/*
 * Wichtig zur z-index-Ordnung: Leaflet setzt .leaflet-top und .leaflet-bottom
 * (Container fuer Zoom, Layer-Control, Geoman-Toolbar etc.) auf z-index 1000.
 * Damit unsere Overlays nicht von der Geoman-Toolbar oder dem Layer-Control
 * verdeckt werden, liegen sie hoeher.
 */
.map-error {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    background: var(--c-error-bg);
    color: var(--c-error);
    border: 1px solid var(--c-error);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    z-index: 1500;
    font-size: .9rem;
    max-width: 80%;
}
.map-toast {
    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: var(--map-info-bg);
    color: var(--fg);
    border: 1px solid var(--border-hi);
    padding: 8px 14px;
    border-radius: var(--radius);
    z-index: 1500;
    font-size: .9rem;
    box-shadow: var(--shadow-card);
}
.map-toast[hidden] { display: none; }

/* ---- Modal (generisch) ---- */
/* z-index 2000: ueber Leaflet-Controls (z 1000) und ueber unseren toasts.
 * Phase 14: backdrop-filter blur, damit Karte/UI hinter dem Modal weich
 * unscharf wird ("aus, aber sichtbar"). */
.modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    padding: 24px;
}
.modal[hidden] { display: none; }
.modal-card {
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    max-width: 460px; width: 100%;
    padding: 22px 24px;
    position: relative;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}
.modal-card--wide  { max-width: 760px; }
.modal-card--wider { max-width: 980px; }

/* Phase 76: scrollbares Inneres fuer das External-Tileset-Form,
 * damit der Speichern-Button auch im WMS-Modus mit allen Feldern
 * (inkl. Spring-Punkt + Auth-Akkordeon) immer sichtbar bleibt. */
.xt-create-form {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    /* Etwas Innenabstand damit Form nicht direkt an der Scroll-Edge klebt. */
    padding-right: 4px;
}

/* Phase 76: Fly-to-Pfeil-Knopf im Layer-Control (.geolyser-fly-to). */
.geolyser-fly-to {
    border: none;
    background: transparent;
    cursor: pointer;
    margin-left: 8px;
    padding: 2px 4px;
    color: var(--accent, #3BBDE8);
    vertical-align: middle;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.12s ease, transform 0.12s ease;
}
.geolyser-fly-to:hover {
    background: rgba(59, 189, 232, 0.12);
    transform: translateY(-1px);
}
.geolyser-fly-to img,
.geolyser-fly-to svg {
    display: block;
    width: 18px;
    height: 18px;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin: -22px -24px 12px -24px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.modal-header .modal-title { margin: 0; }
.modal-header-tabs {
    display: flex; gap: 4px;
}
.modal-header-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-hi);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.modal-header-tab:hover {
    background: var(--bg-card);
    color: var(--fg);
}
/* Phase 26.1: aktiver Tab klar erkennbar im Light- UND Dark-Mode. */
.modal-header-tab.is-active {
    background: var(--c-primary);
    color: var(--c-light);
    border-color: var(--c-primary-dk);
    font-weight: 500;
}
.modal-close-btn {
    border: 0;
    background: transparent;
    color: var(--muted-hi);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    line-height: 0;
}
.modal-close-btn:hover { background: var(--input-bg); color: var(--fg); }
.modal-body {
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
}
.modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    border-top: 1px solid var(--border);
    margin: 16px -24px -22px -24px;
    padding: 12px 18px;
}
.modal-title { margin: 0 0 12px 0; }
.modal-text { margin: 0 0 16px 0; color: var(--muted-hi); }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: .8em; color: var(--muted); }
.field input, .field select, .field textarea {
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--border-hi);
    box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
.form-error { color: var(--c-error); margin: 0; font-size: .85em; }

/* Phase 68a-Hotfix: Status-Linie im Bug-Report- und aehnlichen Modals.
 * data-kind = info | ok | error setzt die Farbe. */
.modal-status {
    margin: 6px 0 0;
    font-size: .88em;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-card);
    color: var(--fg);
}
.modal-status[data-kind="info"]  { color: var(--muted-hi); }
.modal-status[data-kind="ok"]    { color: var(--c-signal-dk, #00a04f); }
.modal-status[data-kind="error"] { color: var(--c-error); background: var(--c-error-bg); }
.modal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 8px;
}
.modal-actions--stack { flex-direction: column; }
.modal-actions--stack .primary, .modal-actions--stack .ghost {
    width: 100%; padding: 12px 14px;
    flex-direction: column; align-items: flex-start;
}
.modal-action-hint {
    font-size: .8em;
    color: var(--muted-hi);
    font-weight: 400;
    margin-top: 2px;
}

/* ---- Login / Dashboard / Trash / Index (gemeinsame Hilfsklassen) ---- */
.page--center {
    min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px;
}
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
    max-width: 460px;
    width: 100%;
}
.dashboard, .trash {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}
table.simple {
    width: 100%; border-collapse: collapse;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
table.simple th, table.simple td {
    padding: 8px 10px; text-align: left;
    border-bottom: 1px solid var(--border);
}
table.simple tr:last-child td { border-bottom: 0; }
table.simple th { color: var(--muted); font-weight: 500; font-size: .85em; }

/* ---- Leaflet-Anpassungen ---- */
.leaflet-container { background: var(--map-surface); font-family: var(--font-ui); }
.leaflet-control-attribution {
    background: var(--map-info-bg) !important;
    color: var(--muted-hi) !important;
    border-radius: 6px 6px 0 0;
    font-size: 11px;
}
.leaflet-control-attribution a { color: var(--c-primary-hi) !important; }
/* Phase 67: Attribution wird per JS aus dem leaflet-bottom-right
 * Container raus geloest und direkt in #map gehaengt - dann positioniert
 * sie sich relativ zur ganzen Karte und kann unten mittig stehen. */
.leaflet-control-attribution.attribution-bottom-center {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 600;
    pointer-events: auto;
    padding: 2px 8px;
    border-radius: 6px 6px 0 0;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Phase 67: Leaflet-Bar-Buttons (Zoom +/-, Locate) analog zu GPS-Tools:
 * solider dunkler Hintergrund, weisses Icon im Dark-Mode, beim Hover
 * Icon + Border in Tuerkis (c-primary-hi). Default (Light) bleibt ein
 * heller Card-Hintergrund. */
/* Phase 67e: Buttons in Zoom-Control + Geoman-Toolbar 4px auseinander
 * ziehen, damit die Border (besonders der tuerkise Hover/Aktiv-Border)
 * sauber rund um jeden einzelnen Button sichtbar ist. Default-Leaflet
 * stackt sie sonst direkt aneinander mit Shared-Border. */
.leaflet-bar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.leaflet-bar a {
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px) !important;
    margin-bottom: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.leaflet-bar a:last-child {
    margin-bottom: 0;
}
.leaflet-bar a:hover {
    background: var(--bg-elevated);
    color: var(--c-primary-hi);
    border-bottom-color: var(--c-primary-hi);
    border-color: var(--c-primary-hi);
}
.leaflet-bar a.leaflet-disabled {
    background: var(--bg-elevated);
    color: var(--muted);
    opacity: 0.55;
}
[data-theme="dark"] .leaflet-bar a {
    background: #20262a;
    color: #ffffff;
    border-color: var(--border);
}
[data-theme="dark"] .leaflet-bar a:hover {
    background: #2b3338;
    color: var(--c-primary-hi);
    border-color: var(--c-primary-hi);
    border-bottom-color: var(--c-primary-hi);
}
.leaflet-control-scale-line {
    background: var(--map-control-bg-lo) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
    /* Phase 66: Leaflet-Default packt einen weissen Text-Shadow drum,
     * der im Dark-Mode wie ein Glow wirkt. Plain Text ohne Schatten. */
    text-shadow: none !important;
}
[data-theme="dark"] .leaflet-control-scale-line {
    color: #ffffff !important;
}
/* Phase 67i: Scale-Line muss ueber den Legal-Links (.map-legal-links)
 * sitzen, sonst ueberdeckt sie unten rechts den Datenschutz/Impressum-
 * Hinweis. Etwa 26px Reserve = Hoehe der Legal-Pill + 4px Luft. */
.leaflet-control-scale {
    margin-bottom: 28px !important;
}

/* ============================================================
 * Phase 67b — Locate-Plugin + Layers-Control im Dark-Mode
 * ============================================================ */

/* Locate-Icon: Default-Sprite ist schwarz. Im Dark-Mode wollen wir es
 * weiss; im Hover tuerkis. Beim Aktiv-State eingebauter Pulse-Effekt
 * (siehe .gps-tools-btn.is-recording als Vorlage). */
[data-theme="dark"] .leaflet-control-locate a .leaflet-control-locate-location-arrow {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
}
/* Phase 67c: Hover -> Icon tuerkis, in beiden Themes. */
.leaflet-control-locate a:hover .leaflet-control-locate-location-arrow {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%2300A0D2" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>') !important;
}
/* Aktiv-State (Locate eingeschaltet): tuerkiser Hintergrund, dunkles
 * Icon, pulsierende tuerkise Border - aehnlich .gps-tools-btn.is-
 * recording. Wirkt in Light + Dark konsistent. */
.leaflet-control-locate.active a {
    background: var(--c-primary-hi) !important;
    border-color: var(--c-primary-hi) !important;
    animation: locate-pulse 1.4s ease-in-out infinite;
}
.leaflet-control-locate.active a .leaflet-control-locate-location-arrow {
    /* Plugin-Default faerbt das Icon im aktiv-State blau (rgb 32,116,182).
     * Wir ueberschreiben auf Dunkelgrau, damit es auf der tuerkisen
     * Flaeche gut lesbar ist. */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23222a30" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>') !important;
}
@keyframes locate-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 160, 210, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 160, 210, 0); }
}

/* Aktiv-Default fuer alle leaflet-bar-Buttons (Zoom, etc): heller grauer
 * Hintergrund + dunkles Icon. Locate-Active hat oben Vorrang via Spezi-
 * fitaet. */
.leaflet-bar a.active {
    background: #d6dee3;
    color: #222a30;
    border-color: #d6dee3;
}

/* Layers-Control (Basemap-Switcher) - im Vendor-CSS Default weiss; wir
 * faerben Light + Dark passend zum Rest der UI ein. */
.leaflet-control-layers {
    background: var(--bg-elevated) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm, 6px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
.leaflet-control-layers-toggle {
    background-color: var(--bg-elevated) !important;
}
.leaflet-control-layers-list,
.leaflet-control-layers label {
    color: var(--fg);
}
.leaflet-control-layers-separator {
    border-top-color: var(--border) !important;
}
.leaflet-control-layers:hover {
    border-color: var(--border-hi) !important;
}
[data-theme="dark"] .leaflet-control-layers,
[data-theme="dark"] .leaflet-control-layers-expanded {
    background: #20262a !important;
    color: #ffffff !important;
}
[data-theme="dark"] .leaflet-control-layers-toggle {
    background-color: #20262a !important;
    /* Phase 67f: Filter:invert wuerde auch den Hintergrund umdrehen
     * (heller statt dunkler), deshalb tauschen wir lieber direkt das
     * Sprite gegen eine weisse Inline-SVG aus. */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path fill="white" d="M13 3 L23 8 L13 13 L3 8 Z"/><path d="M3 12 L13 17 L23 12 M3 16 L13 21 L23 16" stroke="white" stroke-width="1.5" fill="none" stroke-linejoin="round"/></svg>') !important;
    background-size: 22px 22px !important;
}
/* Hover: gleiches Sprite, aber tuerkis. */
[data-theme="dark"] .leaflet-control-layers-toggle:hover {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path fill="%2300A0D2" d="M13 3 L23 8 L13 13 L3 8 Z"/><path d="M3 12 L13 17 L23 12 M3 16 L13 21 L23 16" stroke="%2300A0D2" stroke-width="1.5" fill="none" stroke-linejoin="round"/></svg>') !important;
    background-color: #2b3338 !important;
    border-color: var(--c-primary-hi) !important;
}
/* Auch im Light-Mode wollen wir Hover-Tuerkis fuers Toggle-Icon. */
.leaflet-control-layers-toggle:hover {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path fill="%2300A0D2" d="M13 3 L23 8 L13 13 L3 8 Z"/><path d="M3 12 L13 17 L23 12 M3 16 L13 21 L23 16" stroke="%2300A0D2" stroke-width="1.5" fill="none" stroke-linejoin="round"/></svg>') !important;
    background-size: 22px 22px !important;
    border-color: var(--c-primary-hi) !important;
}
[data-theme="dark"] .leaflet-control-layers-list,
[data-theme="dark"] .leaflet-control-layers label {
    color: #ffffff !important;
}
[data-theme="dark"] .leaflet-control-layers-separator {
    border-top-color: rgba(155, 217, 245, 0.18) !important;
}

/* Phase 67: Geoman-Toolbar analog zu Zoom/Locate/GPS-Tools.
 * Geoman benutzt PNG-Sprites als Icons; im Dark-Mode invertieren wir die
 * dunklen Icons zu hell. Beim Hover wird die Border tuerkis. */
.leaflet-pm-toolbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.leaflet-pm-toolbar a {
    background-color: var(--bg-elevated);
    color: var(--fg);
    /* Phase 67e: 4px Abstand + volle Border + eigene Box-Shadow je
     * Button, damit der tuerkise Hover-Border sauber rund um jeden
     * einzelnen Button sichtbar ist. */
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm, 6px) !important;
    margin-bottom: 4px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.leaflet-pm-toolbar a:last-child {
    margin-bottom: 0 !important;
}
.leaflet-pm-toolbar a:hover {
    background-color: var(--bg-elevated);
    color: var(--c-primary-hi);
    border-color: var(--c-primary-hi) !important;
}
.leaflet-pm-toolbar a.active,
.leaflet-pm-toolbar a.active:hover {
    background-color: var(--c-primary);
    color: var(--c-light);
    border-color: var(--c-primary) !important;
}
[data-theme="dark"] .leaflet-pm-toolbar a {
    background-color: #20262a;
}
[data-theme="dark"] .leaflet-pm-toolbar a:hover {
    background-color: #2b3338;
    border-color: var(--c-primary-hi) !important;
}
/* Geoman-Icons sind dunkle PNG-Sprites - im Dark-Mode invertieren, damit
 * sie auf dem dunklen Button-Hintergrund sichtbar werden. */
[data-theme="dark"] .leaflet-pm-toolbar a .control-icon,
[data-theme="dark"] .leaflet-pm-toolbar a > .control-icon,
[data-theme="dark"] .leaflet-pm-icon-marker,
[data-theme="dark"] .leaflet-pm-icon-polyline,
[data-theme="dark"] .leaflet-pm-icon-rectangle,
[data-theme="dark"] .leaflet-pm-icon-polygon,
[data-theme="dark"] .leaflet-pm-icon-circle,
[data-theme="dark"] .leaflet-pm-icon-circle-marker,
[data-theme="dark"] .leaflet-pm-icon-edit,
[data-theme="dark"] .leaflet-pm-icon-drag,
[data-theme="dark"] .leaflet-pm-icon-cut,
[data-theme="dark"] .leaflet-pm-icon-rotate,
[data-theme="dark"] .leaflet-pm-icon-delete {
    filter: invert(1) hue-rotate(180deg) brightness(1.05);
}
/* Active-State: Icon bleibt invertiert (weiss auf c-primary-Hintergrund). */

/* Phase 67c: Hover -> Geoman-Icons werden tuerkis. Da die Icons PNG-
 * Sprites sind, faerben wir sie via Filter ein (Approximation an
 * #00A0D2 = c-primary-hi). Funktioniert in Light + Dark, weil die
 * Filterkette vom schwarzen Quell-PNG ausgeht und unsere Dark-Mode-
 * Inversion via !important uebersteuert. */
.leaflet-pm-toolbar a:hover .control-icon,
.leaflet-pm-toolbar a:hover > .control-icon,
.leaflet-pm-toolbar a:hover [class*="leaflet-pm-icon"],
[data-theme="dark"] .leaflet-pm-toolbar a:hover .control-icon,
[data-theme="dark"] .leaflet-pm-toolbar a:hover > .control-icon,
[data-theme="dark"] .leaflet-pm-toolbar a:hover [class*="leaflet-pm-icon"] {
    filter: brightness(0) saturate(100%) invert(54%) sepia(80%) saturate(2240%) hue-rotate(170deg) brightness(95%) contrast(101%) !important;
}

/* ---- Feature-Popup (Leaflet-Popup, gestylt) ----------------------- */
.leaflet-popup-content-wrapper {
    background: var(--bg-elevated) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-card);
}
.leaflet-popup-tip { background: var(--bg-elevated) !important; }
.feature-popup-card { font-family: var(--font-ui); min-width: 180px; }
.feature-popup-name { font-weight: 600; margin-bottom: 4px; }
.feature-popup-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.popup-tag {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted-hi);
    font-size: .75em;
    padding: 2px 6px;
    border-radius: 999px;
}
.feature-popup-actions {
    display: flex; gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.feature-popup-actions button {
    flex: 1 1 auto;
    background: transparent; color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: .85em;
}
.feature-popup-actions button:hover { background: var(--bg-card); border-color: var(--border-hi); }
.feature-popup-actions button.is-destructive { color: var(--c-error); border-color: var(--c-error-bg); }
.feature-popup-actions button.is-destructive:hover { background: var(--c-error-bg); }

/* === Tag-Picker (Feature-Modal, Phase 12) ============================ */
.tag-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 8px;
    background: var(--c-bg-input, var(--c-bg-elev));
    min-height: 42px;
}
.tag-picker:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px var(--c-accent-soft, rgba(0,120,212,.18));
}
.tag-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-accent-soft, rgba(0,120,212,.14));
    color: var(--c-accent, currentColor);
    font-size: 0.85rem;
    line-height: 1.6;
}
.tag-picker-chip-remove {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}
.tag-picker-chip-remove:hover { opacity: 1; }
.tag-picker-input {
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    width: 100%;
    min-height: 24px;
    font: inherit;
}

/* === Tag-Picker (continued) ========================================== */
.tag-picker-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    max-height: 220px;
    overflow-y: auto;
    z-index: 30;
}
.tag-picker-suggestion {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.9rem;
}
.tag-picker-suggestion:hover,
.tag-picker-suggestion.is-active {
    background: var(--input-bg);
    color: var(--fg);
}
.tag-picker-suggestion .hint {
    opacity: 0.6;
    font-style: italic;
    margin-left: 6px;
}

/* === Trash-Modal-Tabelle (Phase 14) ================================= */
.trash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.trash-table th,
.trash-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.trash-table th {
    background: var(--input-bg);
    color: var(--muted-hi);
    font-weight: 600;
}
.trash-table tbody tr:hover td {
    background: var(--input-bg);
}
.trash-table .popup-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--input-bg);
    font-size: 0.78rem;
    color: var(--muted-hi);
    margin-right: 4px;
}
/* Phase 70 polish runde 4: kleiner Farbpunkt vor dem Layer-Namen im
   Layer-Trash-Tab. */
.trash-table .layer-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid var(--border);
}

/* Status-Zeile in Modals (info / error). */
.form-info {
    margin: 0 0 8px 0;
    font-size: 0.85em;
    color: var(--muted-hi);
}
.form-info[data-kind="error"] { color: var(--c-error); }
.form-info[hidden] { display: none; }

/* === Topbar (Phase 14) =============================================== */
.topbar-spacer {
    flex: 1 1 auto;
    min-width: 12px;
}
.topbar-right .icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
}
.topbar-right .icon-btn svg { display: block; }

/* === Admin-Users-Pane (Phase 13) ==================================== */
.admin-users-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.admin-users-table select {
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
}
.admin-users-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.admin-users-row-actions .ghost {
    padding: 4px 8px;
    font-size: 0.85rem;
}
.admin-users-row-actions .danger {
    color: var(--c-error);
    border-color: var(--c-error-bg);
}

.admin-kv th {
    text-align: left;
    font-weight: 500;
    color: var(--muted);
    width: 160px;
    padding: 4px 8px;
}
.admin-kv td {
    padding: 4px 8px;
}

/* === Resizable Sidebar Handles (Phase 15) =========================== */
.resizable-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    z-index: 5;
    transition: background 0.15s ease;
}
.resizable-handle--right { right: -3px; }
.resizable-handle--left  { left:  -3px; }
.resizable-handle:hover,
.resizable-handle:focus-visible {
    background: var(--border-hi);
    outline: none;
}
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing iframe { pointer-events: none; }
@media (max-width: 720px) {
    .resizable-handle { display: none; }
}

/* === Help-Modal (Phase 17) =========================================== */
.help-modal-card {
    height: calc(100vh - 96px);
    max-height: 720px;
}
.help-shell {
    flex: 1 1 auto;
    display: flex;
    gap: 16px;
    margin: 8px -8px 0 -8px;
    padding: 0 8px 8px 8px;
    min-height: 0;
}
.help-toc {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid var(--border);
}

/* === Help-Modal (Phase 17) =========================================== */
.help-modal-card {
    height: calc(100vh - 96px);
    max-height: 720px;
}
.help-shell {
    flex: 1 1 auto;
    display: flex;
    gap: 16px;
    margin: 8px -8px 0 -8px;
    padding: 0 8px 8px 8px;
    min-height: 0;
}
.help-toc {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid var(--border);
}
.help-toc-item {
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--muted-hi);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
}
.help-toc-item:hover {
    background: var(--bg-card);
}
.help-toc-item.is-active {
    background: var(--bg-card);
    color: var(--fg);
    font-weight: 500;
}
.help-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 8px;
}
.help-content h4 {
    margin-top: 0;
    font-size: 1.05em;
}
.help-content ul {
    margin: 8px 0 12px 0;
    padding-left: 20px;
}
.help-content li {
    margin-bottom: 4px;
}
.help-content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .help-shell {
        flex-direction: column;
    }
    .help-toc {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
    }
}

/* === Tristate-Filter (Phase 20) ===================================== */
.features-panel-popover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
}
.features-panel-popover-label {
    flex: 1 1 auto;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.features-panel-tristate {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex: 0 0 auto;
}
.features-panel-tristate-btn {
    border: 0;
    background: transparent;
    color: var(--muted-hi);
    padding: 2px 8px;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    min-width: 24px;
    border-right: 1px solid var(--border);
}
.features-panel-tristate-btn:last-child { border-right: 0; }
.features-panel-tristate-btn:hover { background: var(--bg-card); }
.features-panel-tristate-btn.is-active {
    background: var(--c-primary);
    color: var(--c-light);
}
.features-panel-tristate-btn.is-active[data-state="not"] {
    background: var(--c-error);
}

/* === Resizable-Grip (Phase 22.4) ===================================== */
.resizable-handle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.resizable-grip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0.35;       /* Phase 26.6: permanent dezent sichtbar */
    transition: opacity 0.2s ease;
}
.resizable-handle:hover .resizable-grip,
.resizable-handle:focus-visible .resizable-grip {
    opacity: 0.85;
}
.resizable-grip span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fg);
}

/* === Layer-Tree (Phase 21.1) ========================================= */
.layer-expand {
    border: 0;
    background: transparent;
    color: var(--muted-hi);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    flex: 0 0 24px;
    border-radius: var(--radius-sm);
    transition: background .12s ease, color .12s ease;
}
.layer-expand:hover {
    color: var(--fg);
    background: var(--bg-card);
}

/* === Feature-Bilder (Phase 28) ====================================== */
.image-slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.image-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    cursor: pointer;
    overflow: hidden;
    color: var(--muted-hi);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4em;
}
.image-slot:hover { background: var(--bg-card); border-color: var(--border-hi); }
.image-slot.is-filled { cursor: default; border-style: solid; }
.image-slot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.image-slot-remove {
    position: absolute;
    top: 2px; right: 2px;
    width: 22px; height: 22px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,0.55);
    color: white;
    cursor: pointer;
    line-height: 1;
    font-size: 0.85em;
    padding: 0;
}

/* Popup: Thumbnail-Reihe unter description */
.feature-popup-images {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 8px;
}
.feature-popup-images img {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
}

/* Lightbox */
#image-lightbox.modal { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); }
.lightbox-card {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-card img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 80px rgba(0,0,0,0.7);
}
.lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    color: white;
    z-index: 10;
}
.lightbox-close:hover { background: rgba(0,0,0,0.85); }

/* Phase 68a: Inhalt-melden-Button im Lightbox - links oben, dezent rot. */
.lightbox-report {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: 1px solid rgba(255, 92, 101, 0.7);
    border-radius: var(--radius-sm, 6px);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    cursor: pointer;
    z-index: 10;
}
.lightbox-report:hover {
    background: var(--c-error, #ff5c65);
    border-color: var(--c-error, #ff5c65);
}
.lightbox-report svg { display: block; }
/* Phase 68a-Hotfix2: Visueller Lock-State, wenn das Bild bereits gemeldet
 * ist. Der Button bleibt sichtbar, aber gruengrau und nicht klickbar. */
.lightbox-report.is-reported,
.lightbox-report.is-reported:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
}
.lightbox-report.is-sending,
.lightbox-report.is-sending:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.3);
    cursor: wait;
}

/* === Phase 30 - 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 + collapse links statt rechts */
.features-panel-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.features-panel-collapse,
.features-panel-fullscreen,
.features-panel-rail-toggle,
.features-panel-rail-search {
    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-search:hover {
    background: var(--bg-card);
    color: var(--fg);
}
/* collapse links vom Title platzieren (per order) */
.features-panel-head .features-panel-collapse { order: -1; }
.features-panel-head .features-panel-title { flex: 1 1 auto; }

/* Filter-Bar mehr Abstand zum Rand */
.features-panel-filters {
    padding: 0 12px 8px 12px;
}

/* 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 aber ist optional sichtbar - JP wollte sie weg */
.features-panel-item .features-panel-meta { display: none; }
/* Tags inline statt untereinander */
.features-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.features-panel-tag {
    font-size: 0.75em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--muted-hi);
    white-space: nowrap;
}
.features-panel-tag-more {
    font-size: 0.75em;
    color: var(--muted);
    font-style: italic;
}

/* Layer-Tree: expandierte Sub-Liste nicht ueber den Buttons - Layer-Row als
 * grid mit klar getrennten Zeilen (Toggle-Reihe oben, Sub-Liste darunter).
 * Phase 68l: zusaetzliche Spalte ganz links fuer den Drag-Handle. */
.layer-row {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto;
    grid-template-areas:
        "drag expand swatch name meta toggles"
        "features features features features features features"
        "menu    menu    menu    menu    menu    menu";
    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-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; }

/* Phase 70: 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);
}

/* Phase 68o: Service-Worker-Update-Toast. */
.sw-update-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1900;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    padding: 8px 8px 8px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: sw-update-toast-in .25s ease-out;
}
.sw-update-toast.is-leaving {
    animation: sw-update-toast-out .22s ease-in forwards;
}
@keyframes sw-update-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sw-update-toast-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, 12px); }
}
.sw-update-toast-text { font-size: 0.95em; }
.sw-update-toast-action {
    border: 0;
    background: var(--c-primary, #2c8ee0);
    color: var(--c-light, #fff);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.92em;
    font-weight: 500;
    cursor: pointer;
}
.sw-update-toast-action:hover { filter: brightness(1.07); }
.sw-update-toast-close {
    border: 0;
    background: transparent;
    color: var(--muted-hi);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1.2em;
    line-height: 1;
}
.sw-update-toast-close:hover { color: var(--fg); }

/* Phase 68n: 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;
    z-index: 650;       /* ueber den Tiles, unter Modals (2000). */
}
.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%;
    bottom: 24px;
    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); }

/* Phase 68l: 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; }

/* ---- Phase 31: Confirm-Dialog im App-Design ---- */
.modal-card--sm {
    width: min(420px, 92vw);
}
.confirm-card {
    padding: 22px 22px 18px;
}
.confirm-card .modal-title {
    font-size: 1.08em;
    margin-bottom: 8px;
}
.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;
}
/* Phase 68c-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;
}

/* ---- Phase 33: DB-Modal-Filter-Bar ---- */
.db-filter-bar {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.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;
}

/* ---- Phase 35: 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 (Phase 30 erweitert): Actions am Ende der Zeile */
.features-panel-item {
    grid-template-columns: auto auto 1fr auto;
}

/* ---- Phase 37 + 67: Map-Status-Leiste (Cursor-Coords + GPS-Genauigkeit)
 *   Phase 67: oben mittig statt unten (unten ist jetzt die Attribution). */
.map-status {
    position: absolute;
    left: 50%;
    top: 8px;
    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); }

/* ============================================================
   Phase 39 — UI-Polish-Batch
   ============================================================ */

/* ---- 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 Phase 39) */
}

/* 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);
}

/* ---- 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;
}
.features-panel-actionbar {
    order: 99;
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    padding: 6px 10px;
    margin: 0 -10px -8px -10px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.85em;
    z-index: 5;
}
.features-panel-actionbar [data-role="action-count"] {
    font-size: 0.85em;
    color: var(--muted-hi);
}
.features-panel-actionbar .primary,
.features-panel-actionbar .ghost {
    padding: 4px 10px;
    font-size: 0.85em;
}

/* ---- Bug-Report Highlight (Phase 44 vorbereitet) ---- */
.help-modal-bug-btn {
    background: var(--c-warn);
    color: var(--c-dark);
    border: 1px solid var(--c-warn);
    font-weight: 500;
}
.help-modal-bug-btn:hover { filter: brightness(1.05); }

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

/* ============================================================
   Phase 49 — 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-search {
    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-search:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}

/* Sidebar-Rail-Toggles + Add */
.sidebar-rail-toggle,
.sidebar-rail-add {
    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 {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-hi);
}

/* 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);
}
.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-search,
[data-theme="light"] .sidebar-rail-toggle,
[data-theme="light"] .sidebar-rail-add,
[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-search:hover,
[data-theme="light"] .sidebar-rail-toggle:hover,
[data-theme="light"] .sidebar-rail-add: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);
}

/* ============================================================
   Phase 50 — Detach-Button + Button-Polish-Runde 2
   ============================================================ */

/* ---- 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);
}
.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);
}

/* ---- 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;
}

/* ============================================================
   Phase 52 — 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 Phase 39 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; }
/* Phase 66: 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;
}

/* ---- Phase 52: 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;
}

/* ============================================================
   Phase 53 — 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; }

/* ============================================================
   Phase 54 — 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);
}

/* ============================================================
   Phase 54 — 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;
}
.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) {
    /* Phase 67: 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); }
}
.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);
}

/* Phase 67: 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);
    /* Phase 67: 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);
}
/* Phase 67d: 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);
}

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

/* ============================================================
   Phase 56 — 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;
}

/* ============================================================
   Phase 56b — 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);
}

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

/* Phase 57: Default unsichtbar, nur wenn Locate-Plugin aktiv ist anzeigen.
 * Vorher hatten wir "display:flex !important" was das Verstecken brach. */
#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;
}

/* ============================================================
   Phase 58 — 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;
}

/* ============================================================
   Phase 58b — 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;
}

/* ============================================================
   Phase 58c — 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;
}

/* ============================================================
   Phase 61 — 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;
}

/* ---- Features-Panel: Such-Button hellgrau ---- */
.features-panel-rail-search {
    background: rgba(160, 168, 173, 0.20) !important;
    color: #555c61 !important;
    border-color: rgba(160, 168, 173, 0.50) !important;
}
.features-panel-rail-search:hover {
    background: rgba(160, 168, 173, 0.34) !important;
    color: #2a2f33 !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 ---- */
.features-panel-item-add {
    background: rgba(2, 254, 137, 0.14) !important;
    color: #007a3a !important;
    border-color: rgba(2, 254, 137, 0.40) !important;
    /* Phase 61-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;
}
.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 (Phase 70 polish runde 5) ----------------------
   Cancel/Close: NEUTRAL grau, damit sie sich deutlich von destruktiven
   Aktionen (Verwerfen, Loeschen) abheben. Frueher waren beide rot und
   sahen identisch aus. 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"] .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"] .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;
}
/* Phase 70 polish runde 9: 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;
}
[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;
}
[data-theme="dark"] .features-panel-rail-search {
    color: #b8c3c9 !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; }

/* ============================================================
   Phase 68b — 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; }

.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);
}

/* Phase 68c: 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);
}

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

.legal-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    /* Ueber Topbar/Sidebars (1100-1500), unter Modals (2000) - so kann
     * der User auch Datenschutz im Help-Modal lesen ohne dass der Banner
     * davor liegt. */
    z-index: 1800;
    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; }

/* 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%; }
}

/* ============================================================
   Phase 62 — 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);
}

/* ============================================================
   Phase 63 + 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; }

/* ============================================================
   Phase 64 — 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; }

/* ============================================================
   Phase 68k — 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) {
        /* Wenn der User explizit aufklappt, soll die Sidebar mehr Platz
         * fressen (~40% statt 25%) damit der Inhalt lesbar ist. */
        width: 40% !important;
        flex-basis: 40% !important;
        max-width: 360px;
    }

    /* Modals: mehr Hoehe, weniger Padding. */
    .modal-card {
        max-width: 96vw;
        max-height: 92vh;
        margin: 16px auto;
    }
    .modal-body, .modal-form {
        padding: 14px;
    }

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

    /* Zoom-Buttons + Locate + GPS-Tools groesser fuer Touch (44 px ist
     * der Apple-/Android-Empfehlungs-Wert). */
    .leaflet-bar a {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 22px !important;
    }
    .gps-tools-btn {
        width: 44px;
        height: 44px;
    }
    .leaflet-control-locate a .leaflet-control-locate-location-arrow {
        width: 22px; height: 22px; margin: 9px;
    }

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

    /* Layers-Toggle: groesser. */
    .leaflet-control-layers-toggle {
        width: 44px !important;
        height: 44px !important;
        background-size: 26px 26px !important;
    }
}

/* Smartphone-Range: ≤ 540 px */
@media (max-width: 540px) {
    /* Sidebars auf 90% wenn aufgeklappt (verdrucken die Karte komplett -
     * das ist Absicht, weil sonst nichts mehr lesbar ist). */
    .sidebar:not(.sidebar--collapsed),
    .features-panel:not(.features-panel--collapsed) {
        width: 92% !important;
        flex-basis: 92% !important;
        max-width: none;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1200;
    }
    .sidebar:not(.sidebar--collapsed) { left: 0; }
    .features-panel:not(.features-panel--collapsed) { right: 0; }

    /* Modals fast vollbild. */
    .modal-card {
        max-width: 98vw;
        max-height: 96vh;
        margin: 8px auto;
        border-radius: var(--radius-sm, 6px);
    }

    /* 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 (Cursor-Coords) auf Smartphone unsinnig - ausblenden. */
    .map-status { display: none !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;
    }

    /* Resize-Indikatoren: auf Touch-Geraeten ist Drag fast immer Fehl-
     * aktion -> verstecken. */
    .resizable-handle { display: none !important; }

    /* 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); }

    /* Sidebar-Resize-Indikatoren aus. */
    .resizable-handle { display: none !important; }
}

/* ---------------------------------------------------------------------
 * Phase 70: Layer-Lade-Modal
 * ------------------------------------------------------------------- */
.load-modal-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0 12px;
}
/* Phase 70 polish runde 5: 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;
}
.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;
    grid-template-columns: 14px 1fr auto auto auto;
    gap: 10px; align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--c-border);
}
.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;
    /* Phase 70 polish runde 9: 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;
}
.load-modal-actions { display: flex; gap: 6px; align-items: center; }
/* Phase 70 polish runde 8: 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%; }

/* 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; }

/* Phase 70: 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;
}

/* ---------------------------------------------------------------------
 * Phase 70 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;
}

/* ---------------------------------------------------------------------
 * Phase 70 polish: 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"] {
    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;
}
.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;
}

/* ============================================================
   Phase 70 polish runde 7 - Design-Polish-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.
   Phase 70 polish runde 9: 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 aus Runde 5. */
.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;
}

/* 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 - JP wollte sie weg vom rechten Rand.
   Phase 70 polish runde 9: 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;
}

/* Phase 70 polish runde 9: 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;
}

/* ============================================================
   Phase 71 — GCP- + ArUco-Capture-Modal
   ============================================================ */
.gcp-capture-body {
    display: flex; flex-direction: column; gap: 14px;
    padding: 12px 0;
}
.gcp-capture-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 50vh; overflow-y: auto;
    border-top: 1px solid var(--border);
}
.gcp-list-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px; align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}
.gcp-list-row:last-child { border-bottom: none; }
.gcp-list-num {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--c-primary-hi);
}
.gcp-list-coords {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 0.85em;
}
.gcp-capture-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--muted);
    font-style: italic;
}

/* ArUco-Slot-Grid: 3 Spalten x 2 Zeilen, klickbare Bilder. */
.aruco-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px;
}
.aruco-slot {
    position: relative;
    background: var(--bg-page);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    transition: border-color .12s, transform .08s;
}
.aruco-slot:hover { border-color: var(--c-primary-hi); }
.aruco-slot:active { transform: scale(0.97); }
.aruco-slot.is-filled {
    border-color: var(--c-primary);
    background: rgba(0, 179, 104, 0.10);
}
.aruco-slot img {
    display: block;
    width: 100%; height: auto;
    pointer-events: none;
}
.aruco-slot-num {
    position: absolute;
    top: 4px; left: 6px;
    background: var(--bg-elevated);
    color: var(--fg);
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.aruco-slot-check {
    position: absolute;
    bottom: 4px; right: 6px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
[data-theme="light"] .aruco-slot {
    background: #f1f4f7;
}
.gcp-capture-add {
    border-color: var(--c-primary) !important;
    color: var(--c-primary-hi) !important;
}
.gcp-capture-add:hover {
    background: rgba(0, 179, 104, 0.10) !important;
}

/* Phase 71 - Sidebar-Buttons fuer GCP + ArUco-Capture-Modi.
   Farben matched die Layer-Farben der angelegten Sets (siehe
   gcp-capture-modal.js): rose fuer GCP, teal fuer ArUco. */
.sidebar-gcp-accent {
    /* rose / pink - matched Palette-Slug "rose" #EC4899 */
    background: rgba(236, 72, 153, 0.16) !important;
    color: #be185d !important;
    border-color: rgba(236, 72, 153, 0.45) !important;
}
.sidebar-gcp-accent:hover {
    background: rgba(236, 72, 153, 0.28) !important;
    color: #9d174d !important;
}
[data-theme="dark"] .sidebar-gcp-accent {
    color: #f9a8d4 !important;
}
[data-theme="dark"] .sidebar-gcp-accent:hover {
    color: #fbcfe8 !important;
}
.sidebar-aruco-accent {
    /* teal - matched Palette-Slug "teal" #14B8A6 */
    background: rgba(20, 184, 166, 0.16) !important;
    color: #0f766e !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
}
.sidebar-aruco-accent:hover {
    background: rgba(20, 184, 166, 0.28) !important;
    color: #115e59 !important;
}
[data-theme="dark"] .sidebar-aruco-accent {
    color: #5eead4 !important;
}
[data-theme="dark"] .sidebar-aruco-accent:hover {
    color: #99f6e4 !important;
}

/* Phase 70 polish runde 9: "Gespeicherte Layer laden"-Btn (Folder-Icon
   in der Sidebar + im collapsed Rail) violett akzentuiert, damit er
   sich vom Plus-Btn (Layer erstellen, gruen-neutral) klar abhebt.
   Der Klick oeffnet das Lade-Modal mit allen DB-Layern. */
.sidebar-load-accent {
    background: rgba(155, 90, 200, 0.16) !important;
    color: #6a3aa0 !important;
    border-color: rgba(155, 90, 200, 0.45) !important;
}
.sidebar-load-accent:hover {
    background: rgba(155, 90, 200, 0.32) !important;
    border-color: rgba(155, 90, 200, 0.75) !important;
    color: #5a2a90 !important;
}
[data-theme="light"] .sidebar-load-accent {
    background: #efe2fa !important;
    color: #5a2a90 !important;
    border-color: #b58fdc !important;
}
[data-theme="light"] .sidebar-load-accent:hover {
    background: #e0caf5 !important;
    color: #401a78 !important;
    border-color: #8a55c8 !important;
}

/* "Entfernen" im Lade-Modal: amber-getoenter Akzent damit die Aktion
   klar von "Laden" (gruen/primary) und "Loeschen" (rot/danger)
   abgegrenzt ist - "remove from view" ist reversibel, kein Loeschen.
   Im Hover wird das Amber kraeftiger. */
.load-modal-unload {
    color: var(--c-amber, #c98a00) !important;
    border-color: rgba(201, 138, 0, 0.45) !important;
    background: rgba(201, 138, 0, 0.08) !important;
}
.load-modal-unload:hover {
    background: rgba(201, 138, 0, 0.18) !important;
    border-color: rgba(201, 138, 0, 0.75) !important;
    color: #b07900 !important;
}
[data-theme="light"] .load-modal-unload {
    color: #8a5d00 !important;
    border-color: #d8b15c !important;
    background: #fff4dc !important;
}
[data-theme="light"] .load-modal-unload:hover {
    background: #ffe7b3 !important;
    border-color: #b48430 !important;
    color: #6a4500 !important;
}

/* Trash-Modal Multi-Select Header-Checkbox + Hover-Optik. */
.trash-table thead th .trash-select-all {
    cursor: pointer;
    accent-color: var(--c-primary);
}
.trash-table tbody tr.is-selected td {
    background: rgba(0, 160, 210, 0.10);
}
[data-theme="light"] .trash-table tbody tr.is-selected td {
    background: rgba(0, 160, 210, 0.16);
}

/* ===================================================================
   Phase 72: Sync-Pill in der Topbar + Sync-Modal.
   Pill ist sichtbar nur wenn pending>0 (hidden=true via JS sonst).
   Counter-Badge sitzt rechts oben am Icon. Bei failed-Items kriegt
   die Pill einen Amber-Tint, damit der User merkt "da ist was".
   =================================================================== */
/* Phase 72 polish: coral als Akzentfarbe (Wunsch JP) - hebt sich von
   den anderen Topbar-Icons (neutral/gruen/violett/amber) klar ab.
   [hidden] muss explizit erzwungen werden weil .icon-btn ein
   display: inline-flex setzt das den User-Agent-Default
   display: none ueberschreibt - ohne diese Regel waere der Pill
   sichtbar obwohl JS hidden=true gesetzt hat. */
.sync-pill[hidden] {
    display: none !important;
}
.sync-pill {
    position: relative;
    color: #ff7f50 !important;
}
.sync-pill:hover {
    color: #e55934 !important;
    background: rgba(255, 127, 80, 0.14);
}
[data-theme="dark"] .sync-pill { color: #ff8c66 !important; }
[data-theme="dark"] .sync-pill:hover { color: #ffaa88 !important; }

.sync-pill--has-failed {
    /* Bei Failures kraeftiger und pulsierend, damit der User die
       Aufmerksamkeit kriegt - immer noch im Coral-Spektrum statt
       hartem rot. */
    color: #d8421e !important;
    animation: sync-pulse 2s ease-in-out infinite;
}
[data-theme="dark"] .sync-pill--has-failed { color: #ff6a3a !important; }

@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.sync-pill-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: currentColor;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--bg, #1a1d21);
    pointer-events: none;
}
[data-theme="light"] .sync-pill-count {
    box-shadow: 0 0 0 1.5px var(--bg-elevated, #fff);
}
.sync-pill-count::after {
    /* Damit der Counter-Text in der akzentfarbe der Pill bleibt aber
       die Schrift im Counter weiss ist - currentColor wird hier
       als Hintergrund genommen. */
    content: "";
}

/* Sync-Modal Body + Liste. */
.sync-modal-body {
    padding: 0 18px 12px;
    max-height: 60vh;
    overflow-y: auto;
}
.sync-modal-status {
    margin: 4px 0 12px;
    font-size: 0.92em;
}
.sync-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sync-list-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated, #20242a);
    border: 1px solid var(--border, #2c333c);
    border-radius: 8px;
}
.sync-list-row-main {
    flex: 1;
    min-width: 0;
}
.sync-list-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 500;
    word-break: break-word;
}
.sync-list-row-meta {
    margin-top: 2px;
    font-size: 0.85em;
}
.sync-list-row-err {
    margin-top: 4px;
    font-size: 0.85em;
    color: #ef4444;
    word-break: break-word;
}
[data-theme="dark"] .sync-list-row-err { color: #fca5a5; }
.sync-list-row-actions {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}
.sync-empty {
    text-align: center;
    padding: 20px 0 8px;
    opacity: 0.7;
}

/* Status-Badges in der Liste: queued (grau), sending (blau), failed (rot). */
.sync-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sync-badge--queued {
    background: rgba(148, 163, 184, 0.18);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.4);
}
.sync-badge--sending {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}
.sync-badge--failed {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.45);
}
[data-theme="light"] .sync-badge--queued { color: #475569; }
[data-theme="light"] .sync-badge--sending { color: #1d4ed8; }
[data-theme="light"] .sync-badge--failed { color: #b91c1c; }