/* Grundstile, Teil 5 von 8: Aufnahme (GCP/ArUco), Berichte, Farbfelder, Teilen, Audit-Log, Schnellaufnahme, Zeichenhilfen.
   Die acht Dateien unter css/base/ werden in dieser Reihenfolge
   eingebunden; bei gleicher Spezifitaet gewinnt die spaetere Regel.
   Neue Regeln an die Datei anhaengen, zu der sie fachlich gehoeren,
   und dabei pruefen, ob eine spaetere Datei sie ueberschreibt. */

/* ============================================================
 — 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-Live-Layer: Zeile von 3-Spalten-Grid auf Flex
 umgestellt - es gibt jetzt optional ein ArUco-Thumb vor der Nummer,
 einen Name+Koordinaten-Block und rechts die Aktions-Buttons
 (Edit / Quick-Foto / Entfernen). */
.gcp-list-row {
    display: flex;
    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 {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 1.05em;
    color: var(--c-primary-hi);
}
.gcp-list-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.gcp-list-name {
    font-weight: 600;
    font-size: 0.92em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gcp-list-coords {
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 0.85em;
}
.gcp-list-actions {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 4px;
}
/* Zeilenknoepfe 32 x 32 wie in allen Tabellen (DESIGN.md 4.5) */
.gcp-list-actions .icon-btn {
    width: 32px; height: 32px; min-width: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Mini-ArUco-Vorschau in der Listen-Zeile (nur ArUco-Modus). */
.gcp-list-aruco {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    background: #fff;
    padding: 2px; box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 3px;
}
/* Quick-Foto-Btn: Badge mit Bild-Anzahl oben rechts am Button. */
.gcp-photo-btn { position: relative; }
.gcp-photo-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 999px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    pointer-events: none;
}
/* ArUco-Map-Marker (features.js dropPinIcon, slug "aruco-N"):
 Mini-Version des echten ArUco-Markers, weisser Rand als Quiet-Zone,
 zentriert auf dem Messpunkt. */
.geolyser-aruco-pin img {
    display: block;
    width: 26px; height: 26px;
    background: #fff;
    padding: 2px; box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
    image-rendering: pixelated;
}
.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;
}
/* Das display:grid oben hat sonst das
 hidden-Attribut ueberstimmt — nach einer ArUco-Session blieben die
 Slots beim Re-Open in GCP-Modus sichtbar. */
.aruco-slots[hidden] { display: none; }
.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;
}
/* Footer-Layout: "Punkt aufnehmen" breit in der Mitte,
 * rechts Export und Speichern als Zeichen-Knoepfe 48 x 34 (DESIGN.md 4.5).
 * Drei Spalten, damit die Mitte wirklich die Mitte ist, auch wenn rechts
 * zwei Knoepfe stehen und links nichts. */
.gcp-capture-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}
.gcp-capture-footer-left { min-width: 0; }
.gcp-capture-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    grid-column: 3;
}
.modal .modal-footer.gcp-capture-footer .gcp-capture-add {
    grid-column: 2;
    min-width: 220px;
    height: 34px !important;
    padding: 0 18px !important;
    justify-content: center;
    gap: 8px;
}
.gcp-capture-add svg { width: 20px; height: 20px; }
.gcp-capture-export svg,
.gcp-capture-save svg { display: block; }
@media (max-width: 480px) {
    .modal .modal-footer.gcp-capture-footer .gcp-capture-add { min-width: 0; }
}

/* 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;
}
/* GCP-/ArUco-Icons sind jetzt inline-SVGs mit
 * currentColor (sidebar.js) und erben die Accent-Textfarben oben —
 * der fruehere [data-theme="dark"] img-Filter-Hack ist entfallen. */
.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;
}

/* Biotoptypenkartierung-Button — Signal-Gruen
   (docs/DESIGN.md par. 2.2) + Ökosystem-Icon via mask-image (currentColor,
   par. 8 Option 2), damit es sich in beiden Themes einfaerbt. */
/* Der Knopf traegt jetzt dieselbe Farbe wie der Kopf des Modus im
   rechten Panel: das Signal-Gruen aus den Tokens (--c-signal-dk /
   --c-signal-dim), nicht mehr ein eigenes #29bc84. Zwei Gruens fuer
   dieselbe Sache sahen nach Versehen aus. Aufbau Zeile fuer Zeile wie
   bei den Nachbarknoepfen (Vorlagen, Schnellaufnahme). */
.sidebar-biotope-accent {
    background: var(--c-signal-dim) !important;
    color: var(--c-signal-dk) !important;
    border-color: color-mix(in srgb, var(--c-signal-dk) 55%, transparent) !important;
}
/* expliziter Hover statt brightness-Filter — der
   war auf der Alpha-Flaeche praktisch unsichtbar. */
.sidebar-biotope-accent:hover {
    background: color-mix(in srgb, var(--c-signal-dk) 26%, transparent) !important;
    border-color: var(--c-signal-dk) !important;
}
/* Vorlagen. Indigo, damit der Knopf sich von Rose (GCP),
   Teal (ArUco), Gruen (Biotoptypen) und Lime (Platzvermessung)
   unterscheidet.

   Steht hier und NICHT im scoped <style> von js/vorlagen/mode.js: das
   entsteht erst beim ersten Oeffnen der Leiste, der Knopf sitzt aber
   von Anfang an in der Sidebar und war bis dahin grau. */
.sidebar-vorlagen-accent {
    background: rgba(79, 70, 229, 0.16) !important;
    color: #4338CA !important;
    border-color: rgba(79, 70, 229, 0.55) !important;
    --pulse-rgb: 79, 70, 229;
}
.sidebar-vorlagen-accent:hover {
    background: rgba(79, 70, 229, 0.30) !important;
    border-color: #4F46E5 !important;
}
[data-theme="dark"] .sidebar-vorlagen-accent { color: #A5B4FC !important; }
[data-theme="dark"] .sidebar-vorlagen-accent:hover { color: #C7D2FE !important; }

/* Akzent der Schnellaufnahme. Amber, weil die
   vier anderen Modi Gruen (Biotoptypen), Lime (Platzvermessung),
   Indigo (Vorlagen), Rose und Teal (GCP/ArUco) schon tragen. Aufbau
   Zeile fuer Zeile wie die Nachbarn darueber, damit alle Modus-Knoepfe
   dieselbe Optik haben und nur die Farbe sie unterscheidet. */
.sidebar-schnell-accent {
    background: rgba(217, 119, 6, 0.16) !important;
    color: #B45309 !important;
    border-color: rgba(217, 119, 6, 0.55) !important;
    --pulse-rgb: 217, 119, 6;
}
.sidebar-schnell-accent:hover {
    background: rgba(217, 119, 6, 0.30) !important;
    border-color: #D97706 !important;
}
[data-theme="dark"] .sidebar-schnell-accent { color: #FBBF24 !important; }
[data-theme="dark"] .sidebar-schnell-accent:hover { color: #FCD34D !important; }
/* Laeuft, ist aber nicht zu sehen: derselbe Puls wie bei den anderen. */
body.schnell-mode-open[data-schnell-view="app"] .sidebar-schnell-accent,
body.schnell-mode-open:has(#features-panel.features-panel--collapsed)
    .sidebar-schnell-accent {
    position: relative;
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
}
/* Laeuft, ist aber nicht zu sehen: derselbe Puls wie bei den anderen
   Modi (Keyframes weiter unten in dieser Datei). */
body.vorlagen-mode-open[data-vorlagen-view="app"] .sidebar-vorlagen-accent,
body.vorlagen-mode-open:has(#features-panel.features-panel--collapsed)
    .sidebar-vorlagen-accent {
    position: relative;
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
}

/* Stempel fuer die Vorlagen.
   Als MASKE und nicht als <img>: das SVG traegt eine feste Farbe
   (#111918 ueber eine eigene CSS-Klasse), ein <img> koennte den
   Indigo-Akzent des Knopfes also nicht annehmen. Ueber die Maske faellt
   `currentColor` durch - dasselbe Muster wie .bt-eco-icon darunter. */
.vl-stamp-icon {
    display: inline-block;
    width: 18px; height: 18px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url(/img/icons/stamp-svgrepo-com.svg) center / contain no-repeat;
    mask: url(/img/icons/stamp-svgrepo-com.svg) center / contain no-repeat;
}

.bt-eco-icon {
    display: inline-block;
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url(/img/icons/ecosystem-icon.svg) center / contain no-repeat;
    mask: url(/img/icons/ecosystem-icon.svg) center / contain no-repeat;
}

/* Scrollbalken app-weit im CI-Tuerkis
   (--c-cyan #3BBDE8, themen-invariant → gut sichtbar in Dark UND Light).
   Firefox via scrollbar-color, WebKit/Blink via ::-webkit-scrollbar. Die
   fruehere cyan-thin-Regel in .modal-card bleibt kompatibel (gleiche
   Farbfamilie). */
* { scrollbar-color: var(--c-cyan) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--c-cyan);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-primary-hi); }

/* "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;
}
/* Im Dark-Mode war die Font-Farbe zu dunkel — Icon im Folder-SVG nutzt currentColor und verschwand
 fast auf dem dunklen Hintergrund. */
[data-theme="dark"] .sidebar-load-accent {
    color: #c4a5e8 !important;
}
[data-theme="dark"] .sidebar-load-accent:hover {
    color: #ddc7f3 !important;
}

/* DSM-Surface-Modal mit Heatmap + 3D-Iso. */
.dsm-surface-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
/* Tab-Bar komplett wegblenden wenn nur ein einzelner Tab sichtbar ist
 (z. B. Das hidden-Attribut auf dem Element wird vom Browser per
 User-Agent CSS auf display:none gesetzt — explizit deklarieren,
 falls eine Spezi- fizitaetsregel oben das override. */
.dsm-surface-tabs[hidden] {
    display: none;
}
.dsm-surface-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 6px 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.92em;
    color: var(--muted-hi);
}
.dsm-contours-controls {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.dsm-contours-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.9em;
}
.dsm-contours-label input {
    width: 84px;
    padding: 4px 6px;
}
.dsm-contours-apply { padding: 5px 14px; }
.dsm-surface-tab.is-active {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
    font-weight: 600;
    margin-bottom: -1px;
}
.dsm-surface-tab:hover { color: var(--text); }
.dsm-surface-view {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated, rgba(0,0,0,0.04));
}
/* Footer-Bg fuer DSM-Oberflaeche +
 * Interpolierte 3D Flaeche analog Public-Help-Modal:
 * Dark : #272D31
 * Light: #E3ECF4
 * Border-top + Padding kommen ueber .modal-footer aus css/base/ schon
 * mit, wir ueberschreiben nur die Farbe (und die Default-Bgs aus den
 * generischen .modal-footer-Rules darueber). */
.dsm-surface-footer {
    display: flex !important;
    justify-content: flex-end;
    padding: 10px 14px !important;
    background: #E3ECF4 !important;
}
[data-theme="dark"] .dsm-surface-footer {
    background: #272D31 !important;
}
.dsm-surface-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
}
/* 3D-Mesh-Modus braucht explizite Hoehe, damit
 Three.js die Canvas-Groesse aus clientWidth/clientHeight liest.
 Etwas hoeher als die alte SVG-View (420 -> 460), damit die
 OrbitControls-Interaktion klar lesbar bleibt. */
.dsm-surface-view--mesh {
    width: 100%;
    height: 460px;
    max-height: 60vh;
    position: relative;
    user-select: none;
    touch-action: none;
    cursor: grab;
}
.dsm-surface-view--mesh:active { cursor: grabbing; }
.dsm-surface-view--mesh canvas {
    display: block;
    width: 100%;
    height: 100%;
}
/* Nordpfeil-Overlay im 3D-Mesh-Canvas. Rotation
 per JS auf das innere <svg>. Touch/Maus geht durch zur Canvas. */
.dsm-mesh-compass {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.dsm-mesh-compass svg {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    transition: transform 0.05s linear;
}
.dsm-surface-loading {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: var(--muted-hi);
    font-size: 0.92em;
    opacity: 0.8;
}

/* Stats-/Reporting-Panel unter den Tabs. */
.dsm-surface-stats {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elevated, rgba(0,0,0,0.025));
    font-size: 0.85em;
}
.dsm-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--text);
}
.dsm-stats-cache-chip {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(127, 205, 187, 0.22);
    color: var(--muted-hi);
    border: 1px solid rgba(127, 205, 187, 0.45);
    cursor: help;
}
/* Reporting-Sektionen (Volumen / Spitzen / Meta). */
.dsm-stats-section {
    margin-top: 6px;
}
.dsm-stats-section + .dsm-stats-section {
    margin-top: 10px;
    border-top: 1px dashed rgba(127, 127, 127, 0.22);
    padding-top: 6px;
}
.dsm-stats-section-title {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-hi);
    opacity: 0.85;
    margin-bottom: 4px;
}
.dsm-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 16px;
}
.dsm-stats-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(127, 127, 127, 0.18);
}
.dsm-stats-label {
    color: var(--muted-hi);
    opacity: 0.85;
}
.dsm-stats-value {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 500;
}
.dsm-stats-value--cut {
    color: #c0392b;
}
.dsm-stats-value--fill {
    color: #2980b9;
}
[data-theme="dark"] .dsm-stats-value--cut {
    color: #ff7e6a;
}
[data-theme="dark"] .dsm-stats-value--fill {
    color: #6bb5e6;
}

/* Dual-Slider-Legende. Track = volle Daten-Range, zwei
 Handles flankieren die aktive Pseudocolor-Fuellung; ziehst du den
 linken nach rechts, schrumpft das Minimum nach. Reset rechts daneben. */
.dsm-legend-slider {
    position: relative;
    /* mehr Abstand oben/unten — Picker, Slider + Hint im
     DSM-Modal waren zu gequetscht. */
    margin: 18px 28px 26px 8px;
    user-select: none;
    touch-action: none;
}
.dsm-legend-slider-track {
    position: relative;
    height: 14px;
    background: rgba(127, 127, 127, 0.18);
    border: 1px solid var(--border);
    border-radius: 3px;
}
.dsm-legend-slider-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
    pointer-events: none;
}
.dsm-legend-slider-handle {
    position: absolute;
    top: -4px;
    width: 12px;
    height: 22px;
    margin-left: -6px;
    /* --bg-card ist im Dark-Mode rgba mit
 3% Alpha → Handles waren durchsichtig. Solide Farben jetzt fest,
 Dark-Mode-Override darunter. */
    background: #ffffff;
    border: 1.5px solid #2b3845;
    border-radius: 3px;
    cursor: ew-resize;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    z-index: 2;
}
.dsm-legend-slider-handle::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1px;
    background: #2b3845;
    opacity: 0.65;
    margin-left: -0.5px;
}
[data-theme="dark"] .dsm-legend-slider-handle {
    background: #d8dee5;
    border-color: #0a0d10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .dsm-legend-slider-handle::after {
    background: #0a0d10;
    opacity: 0.7;
}
.dsm-legend-slider-handle:hover,
.dsm-legend-slider-handle:focus {
    border-color: var(--accent, #1d72b8);
    outline: none;
}
.dsm-legend-slider-value {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 4px;
    transform: translateX(-50%);
    font-size: 0.78em;
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0.92;
}
.dsm-legend-slider-reset {
    position: absolute;
    top: -4px;
    right: -26px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    color: var(--muted-hi);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    line-height: 20px;
    font-size: 0.95em;
}
.dsm-legend-slider-reset:hover {
    color: var(--text);
    border-color: var(--text);
}

/* Volume-Bodies-Legende (Cut/Fill als Chips). */
.dsm-volumes-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 4px;
    font-size: 0.85em;
    color: var(--text);
}
.dsm-volumes-chip {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}
.dsm-volumes-chip--cut  { background: rgb(200, 55, 40); }
.dsm-volumes-chip--fill { background: rgb(40, 128, 200); }
.dsm-volumes-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex: 0 0 auto;
}

/* Server-abhaengige Buttons im Offline-Modus sperren.
 body[data-offline] wird von js/online-status.js gesetzt. Volumen,
 DSM-Profil, DSM-Surface, Sample-Z brauchen alle den Server — ohne
 Verbindung lassen wir sie sichtbar (User sieht weiter dass die
 Funktion existiert) aber inaktiv mit Tooltip. */
body[data-offline="true"] [data-action="volume"],
body[data-offline="true"] [data-action="surface"],
body[data-offline="true"] [data-action="surface-plane"],
body[data-offline="true"] [data-action="profile"],
body[data-offline="true"] [data-action="retro-volume"],
body[data-offline="true"] [data-action="retro-surface"],
body[data-offline="true"] [data-action="retro-surface-plane"],
body[data-offline="true"] [data-action="retro-sample-z"],
body[data-offline="true"] [data-action="retro-profile"] {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}
/* Visueller Marker — kleines Cloud-Off-Icon rechts neben dem disabled
   Button, damit der User versteht warum das ausgegraut ist. */
body[data-offline="true"] [data-action="volume"]::after,
body[data-offline="true"] [data-action="surface"]::after,
body[data-offline="true"] [data-action="surface-plane"]::after,
body[data-offline="true"] [data-action="profile"]::after,
body[data-offline="true"] [data-action="retro-volume"]::after,
body[data-offline="true"] [data-action="retro-surface"]::after,
body[data-offline="true"] [data-action="retro-surface-plane"]::after,
body[data-offline="true"] [data-action="retro-sample-z"]::after,
body[data-offline="true"] [data-action="retro-profile"]::after {
    content: "⌀";
    margin-left: 0.35em;
    font-size: 0.92em;
    opacity: 0.7;
}
.dsm-surface-legend {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 6px;
    color: var(--text);
}
.measure-tool-btn--surface.is-active,
.measure-tool-btn--surface:hover,
.measure-tool-btn--surface-plane.is-active,
.measure-tool-btn--surface-plane:hover {
    border-color: rgba(0, 204, 255, 0.55) !important;
    color: #003848 !important;
}
[data-theme="dark"] .measure-tool-btn--surface:hover,
[data-theme="dark"] .measure-tool-btn--surface-plane:hover {
    color: #b8edff !important;
}

/* c Tag-Color-Picker-Popup beim Klick auf
 einen Tag-Chip im Feature-Edit. */
.tag-picker-chip-color {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.tag-picker-chip-color:hover { text-decoration: underline; }
.tag-color-popup {
    position: fixed;
    z-index: 2300;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ccc);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
    padding: 10px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tag-color-popup-title {
    font-size: 0.84em;
    font-weight: 600;
    color: var(--muted-hi);
    text-transform: lowercase;
}
/* Direkter Swatch-Picker ohne Speichern-Buttons. */
.tag-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.tag-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--swatch, #888);
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, border-color .12s ease;
}
.tag-color-swatch:hover { transform: scale(1.10); }
.tag-color-swatch.is-on {
    border-color: var(--text);
    box-shadow: 0 0 0 1px var(--bg-card) inset;
}
/* Clear-Swatch — leeres Farbfeld + Clear-Icon. */
.tag-color-swatch--clear {
    background: var(--input-bg, #fff);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tag-color-swatch--clear img {
    opacity: 0.6;
    pointer-events: none;
}
[data-theme="dark"] .tag-color-swatch--clear img {
    filter: invert(1);
}
.tag-color-swatch--clear.is-on {
    border-style: solid;
    border-color: var(--text);
}

/* Experimentelle Features – CSS-Suppression. SuperAdmin
 schaltet im Stammdaten-Tab ein/aus, das setzt body[data-exp-...]. */
body[data-exp-layer-share="off"] #invitations-bell,
body[data-exp-layer-share="off"] [data-action="share-layer"],
body[data-exp-layer-share="off"] [data-exp-feature="layer_share"] {
    display: none !important;
}
body[data-exp-location-share="off"] [data-action="toggle-location-share"],
body[data-exp-location-share="off"] [data-exp-feature="location_share"] {
    display: none !important;
}
body[data-exp-dsm-surface="off"] [data-action="retro-surface"],
body[data-exp-dsm-surface="off"] #measure-surface-btn,
body[data-exp-dsm-surface="off"] [data-exp-feature="dsm_surface"] {
    display: none !important;
}
[data-theme="dark"] .tag-color-popup {
    background: var(--surface-elevated, #1f2024);
    border-color: rgba(255,255,255,0.14);
}

/* Invitations-Liste im Modal. */
.invitations-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.invitations-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}
.invitations-row:last-child { border-bottom: none; }
.invitations-row-info {
    flex: 1 1 auto;
    min-width: 0;
}
.invitations-row-info strong {
    display: block;
    font-size: 1em;
    color: var(--text);
}
.invitations-row-info .sub {
    font-size: 0.84em;
    color: var(--muted-hi);
}
.invitations-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Feature-Modal-Footer-Buttons als kompakte 40x40 Icon-Btns
 (Loeschen, Cancel, Klonen, Speichern). Ersetzt die vorigen Text-
 Buttons. */
.feature-modal-footer { gap: 6px; align-items: center; }
.feature-modal-icon-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border);
}
.feature-modal-icon-btn svg { display: block; }
/* Loeschen bleibt ghost.danger (rot). Cancel ist
 jetzt amber, Save bleibt blau (Primary), Klon ist violett. */
.feature-modal-icon-btn.ghost.danger {
    background: var(--c-error-bg, rgba(220, 53, 69, 0.10));
    color: var(--c-error, #dc3545);
    border-color: var(--c-error, #dc3545);
}
.feature-modal-icon-btn.ghost.danger:hover {
    background: var(--c-error-bg, rgba(220, 53, 69, 0.20));
    color: var(--c-error, #dc3545);
}
/* Save-Btn (Primary) behaelt die globale .primary-Farbe (Cyan/Blau).
   Die .primary-Regel im Stylesheet setzt background+color — wir
   verstaerken das hier nur defensiv, weil .feature-modal-icon-btn
   sonst keine eigene Background-Definition mehr hat. */
.feature-modal-icon-btn.primary {
    background: var(--c-primary, #007FB4);
    color: #fff;
    border-color: transparent;
}
.feature-modal-icon-btn.primary:hover {
    background: var(--c-primary-hi, #00A0D2);
    color: #fff;
}
/* Cancel-Btn: amber (reversible Aktion), gleiche Geometrie.
   !important schuetzt gegen .modal-actions > button und .ghost-Default-
   Styles aus tieferen Layern. */
.feature-modal-icon-btn.btn-amber {
    background: rgba(201, 138, 0, 0.15) !important;
    color: var(--c-amber, #c98a00) !important;
    border-color: rgba(201, 138, 0, 0.55) !important;
}
.feature-modal-icon-btn.btn-amber:hover {
    background: rgba(201, 138, 0, 0.28) !important;
    border-color: rgba(201, 138, 0, 0.80) !important;
    color: #e6a627 !important;
}
/* Klon-Btn: violett. Konvention analog zu btn-success / btn-amber. */
.feature-modal-icon-btn.btn-violet,
.btn-violet {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
    border-color: rgba(155, 89, 182, 0.55);
}
.feature-modal-icon-btn.btn-violet {
    /* Explizit nochmal Geometrie, damit btn-violet ohne irgendeine
       andere Klasse trotzdem genau 40x40 bleibt — Defensive gegen
       Browser-Default-Padding und etwaige Drittsysteme. */
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
}
.feature-modal-icon-btn.btn-violet:hover,
.btn-violet:hover {
    background: rgba(155, 89, 182, 0.28);
    border-color: rgba(155, 89, 182, 0.80);
    color: #b478d0;
}
[data-theme="dark"] .feature-modal-icon-btn.btn-violet,
[data-theme="dark"] .btn-violet {
    color: #c89be0;
}

/* Pending-Invitations-Glocke in der Topbar. */
.invitations-bell {
    position: relative;
}
/* hidden-Attribut hart durchsetzen — der Btn ist im Topbar-
 Flex-Container, und ohne !important reicht ein .topbar-right .icon-btn
 width:36px;height:36px aus, um trotz [hidden] eine 36x36 Box zu
 reservieren. */
#invitations-bell[hidden] { display: none !important; }

/* Z: Onboarding-Tour. Spotlight + Tooltip-Overlay.
 Statt einem grossen box-shadow-Backdrop verwenden wir vier
 separate Overlay-Boxen (oben/unten/links/rechts vom Spotlight-Loch).
 Jede Box hat backdrop-filter:blur(3px) + Dunkelung — dadurch ist
 alles ausserhalb des Spotlights weichgezeichnet UND dunkler, das
 Spotlight-Element selber bleibt scharf. Vorteil gegenueber box-
 shadow: backdrop-filter funktioniert nur wenn das Element wirklich
 ueber dem zu filternden Inhalt liegt — geht mit separaten Divs
 perfekt, mit einem fullscreen-Loch-Trick nicht. */
#geolyser-tutorial-backdrop {
    position: fixed; inset: 0;
    z-index: 9000;
    background: transparent;
    /* Backdrop selbst transparent + pointer-events auf den Kindern. */
    pointer-events: none;
    display: none;
}
.geolyser-tutorial-mask {
    position: fixed;
    z-index: 9000;
    background: rgba(15, 18, 22, 0.55);
    backdrop-filter: blur(3px) saturate(0.85);
    -webkit-backdrop-filter: blur(3px) saturate(0.85);
    pointer-events: auto;
    transition: left .14s ease, top .14s ease,
                width .14s ease, height .14s ease;
}
/* Wenn der Browser kein backdrop-filter kennt (sehr alte Builds),
   fallback auf reine Verdunkelung — User-Wunsch "blurry" geht
   verloren aber Tour funktioniert noch. */
@supports not (backdrop-filter: blur(1px)) {
    .geolyser-tutorial-mask {
        background: rgba(15, 18, 22, 0.72);
    }
}
#geolyser-tutorial-spotlight {
    position: fixed;
    z-index: 9001;
    border-radius: 8px;
    background: transparent;
    /* Leichter Rahmen damit das Spotlight als Fokus erkennbar bleibt. */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55),
                0 4px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    transition: left .18s ease, top .18s ease,
                width .18s ease, height .18s ease;
    display: none;
}
#geolyser-tutorial-tooltip {
    position: fixed;
    z-index: 9100;
    background: var(--bg-card, #fff);
    color: var(--fg, #111);
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
    padding: 14px 14px 12px;
    width: 360px;
    max-width: calc(100vw - 24px);
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    display: none;
}
[data-theme="dark"] #geolyser-tutorial-tooltip {
    background: #1f2024;
    color: #e8e8e8;
    border-color: rgba(255, 255, 255, 0.10);
}
.geolyser-tutorial-tip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.geolyser-tutorial-tip-progress {
    font-size: 11px;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.geolyser-tutorial-tip-skip {
    background: transparent;
    border: none;
    color: var(--muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.geolyser-tutorial-tip-skip:hover { color: var(--fg, #111); }
.geolyser-tutorial-tip-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}
.geolyser-tutorial-tip-body {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
}
/* Symbol-Legende unter dem Text eines Tour-Schritts
   (js/tutorial.js, Feld `symbole`). Gezeigt wird das ECHTE Symbol aus
   der Oberflaeche: die eigenen Knoepfe bringen ein <svg> mit, die
   Geoman-Werkzeuge ein Hintergrundbild an ihrer Klasse. Fuer die
   zweite Art stehen Groesse und Skalierung hier, denn die Regeln von
   Geoman gelten nur innerhalb seiner Leiste. */
.geolyser-tutorial-symbole {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 12px;
}
.geolyser-tutorial-symbol-zeile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--border, rgba(0,0,0,0.18));
    border-radius: 999px;
    background: var(--bg-elevated, #f0f3f6);
    font-size: 12px;
    line-height: 1.2;
    max-width: 100%;
}
[data-theme="dark"] .geolyser-tutorial-symbol-zeile {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
.geolyser-tutorial-symbol {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    line-height: 0;
}
.geolyser-tutorial-symbol svg,
.geolyser-tutorial-symbol img {
    width: 18px;
    height: 18px;
    display: block;
}
.geolyser-tutorial-symbol-wort {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geolyser-tutorial-tip-nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.geolyser-tutorial-btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(0,0,0,0.18));
    background: var(--bg-elevated, #f0f3f6);
    color: var(--fg, #111);
    cursor: pointer;
    font-size: 13px;
    /* Wort plus Pfeil: der Pfeil steht bei "Zurueck" davor und bei
       "Weiter" dahinter, also in der Richtung, in die er zeigt. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.geolyser-tutorial-btn svg {
    flex: 0 0 auto;
    display: block;
}
.geolyser-tutorial-btn:hover:not(:disabled) {
    background: var(--input-bg, #e6ebef);
}
.geolyser-tutorial-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.geolyser-tutorial-btn.primary {
    background: var(--c-primary, #007FB4);
    color: #fff;
    border-color: transparent;
}
.geolyser-tutorial-btn.primary:hover:not(:disabled) {
    background: var(--c-primary-hi, #00A0D2);
}
.invitations-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg, #fff);
}
[data-theme="dark"] .invitations-bell-badge {
    box-shadow: 0 0 0 2px var(--bg, #181818);
}

/* Location-Share-Btn + Avatar-Marker. */
[data-action="gps-share-location"].is-active {
    background: rgba(0, 204, 255, 0.20);
    color: #003848;
    border-color: rgba(0, 204, 255, 0.55);
}
[data-theme="dark"] [data-action="gps-share-location"].is-active {
    background: rgba(0, 204, 255, 0.30);
    color: #b8edff;
}
.user-location-marker-wrap {
    background: transparent !important;
    border: none !important;
    pointer-events: auto;
}
.user-location-marker {
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4),
                0 0 0 2px #00CCFF;
    background: #fff;
    position: relative;
}
.user-location-marker svg {
    width: 100%; height: 100%;
    display: block;
}
/* hochgeladener Avatar bevorzugt; der Initialen-Fallback-SVG
 liegt darunter und wird sichtbar, falls das Bild nicht laedt
 (onerror -> img.display:none). */
.user-location-marker .user-location-avatar {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
    background: #fff;
}
.user-location-marker .user-location-avatar-fallback {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
.user-location-marker .user-location-avatar-fallback svg {
    width: 100%; height: 100%;
    display: block;
}

/* Sidebar-Presence-Liste Ladeanimation. Wird gerendert
 solange der presence-WS noch keinen ersten Snapshot geliefert hat —
 verhindert das irrefuehrende "0 weitere online" beim Pageload. */
.sidebar-presence-list .presence-loading,
[data-role="sidebar-presence-host"] .presence-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    color: var(--muted-hi, #666);
    font-size: 12px;
}
.presence-loading-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--border, rgba(0,0,0,0.14));
    border-top-color: var(--c-primary, #06829c);
    border-radius: 50%;
    animation: presence-loading-spin 0.9s linear infinite;
}
@keyframes presence-loading-spin {
    to { transform: rotate(360deg); }
}
[data-theme="dark"] .presence-loading-spinner {
    border-color: rgba(255,255,255,0.18);
    border-top-color: var(--c-primary, #4dd5ee);
}

/* Layer-Share-Modal Layout. */
.share-invite-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
}
.share-invite-form input,
.share-invite-form select {
    flex: 1 1 auto;
    min-width: 0;
    /* heller Sidepanel-Blauton (--bg-card = #eaf1f8 light)
 statt pure white. Hebt sich vom Modal-Hintergrund (--bg-elevated
 = #fff) ab. */
    background: var(--bg-card, #eaf1f8) !important;
    color: var(--fg, #111) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px;
    padding: 6px 10px;
}
[data-theme="dark"] .share-invite-form input,
[data-theme="dark"] .share-invite-form select {
    background: #2a2c30 !important;
    color: #eee !important;
    border-color: rgba(255,255,255,0.18) !important;
    color-scheme: dark;
}
.share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.share-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92em;
}
.share-row-name {
    font-weight: 600;
    color: var(--text);
}
.share-row-role {
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.share-row-status {
    font-size: 0.84em;
    color: var(--muted-hi);
}
.share-row-status.is-pending {
    color: var(--c-amber, #c98a00);
    font-style: italic;
}
/* Share-Modal-Umbau — Edit-Checkbox als Icon-Toggle. */
.share-invite-form .share-edit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    background: var(--bg-card, #eaf1f8);
    color: var(--muted-hi, #777);
    flex: 0 0 auto;
    transition: background 0.12s ease, color 0.12s ease;
}
.share-invite-form .share-edit-toggle input[type="checkbox"] {
    /* Visually hidden, semantisch nutzbar fuer Screen-Reader + Click-Hit. */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    border: 0;
}
.share-invite-form .share-edit-toggle:has(input:checked) {
    background: var(--c-primary, #06829c);
    color: #fff;
    border-color: var(--c-primary, #06829c);
}
.share-invite-form .share-edit-toggle:hover { filter: brightness(1.08); }
.share-invite-form .share-invite-btn {
    width: 36px; height: 36px;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .share-invite-form .share-edit-toggle {
    background: #2a2c30;
    border-color: rgba(255,255,255,0.18);
    color: #ccc;
}

/* Edit-Indikator im Member-Listeintrag — gefuellt wenn Editor, dezent
   wenn Viewer. */
/* share-row-edit ist jetzt ein <button> (Toggle), also
 Browser-Defaults neutralisieren + Hover-Affordance. */
.share-row .share-row-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 4px;
    color: var(--muted, #888);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.share-row .share-row-edit:hover {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .share-row .share-row-edit:hover {
    background: rgba(255, 255, 255, 0.08);
}
.share-row .share-row-edit.is-on {
    color: var(--c-primary, #06829c);
}
.share-row.share-row--viewer .share-row-name { color: var(--muted-hi); }

/* Layer-Snapshots / Versionen-Modal. Liste von Snapshots mit
 Notiz, Anzahl-Features, Actions (Restore + Loeschen). */
.snap-create-form {
    display: flex;
    gap: 8px;
    margin: 4px 0 12px;
}
.snap-create-form input[type="text"],
.snap-filter-row input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    /* Sidepanel-Blauton (--bg-card) statt pure white. */
    background: var(--bg-card, #eaf1f8) !important;
    color: var(--fg, #111) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px;
    padding: 6px 10px;
}
[data-theme="dark"] .snap-create-form input[type="text"],
[data-theme="dark"] .snap-filter-row input[type="date"] {
    background: #2a2c30 !important;
    color: #eee !important;
    border-color: rgba(255,255,255,0.18) !important;
    color-scheme: dark;
}
.snap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}
.snap-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--card-bg, var(--panel-bg));
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.snap-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.95em;
}
.snap-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}
.snap-name {
    font-weight: 600;
}
.snap-meta {
    font-size: 0.82em;
}
.snap-note {
    font-size: 0.9em;
    background: var(--input-bg, var(--panel-bg));
    border-radius: 6px;
    padding: 6px 8px;
    border-left: 3px solid var(--accent, #4a90e2);
    white-space: pre-wrap;
}
.snap-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.snap-actions button {
    font-size: 0.85em;
    padding: 4px 10px;
}

/* Audit-Log-Tabelle. */
.audit-toolbar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 8px;
}
.audit-table-wrap {
    overflow-x: auto;
    max-height: 60vh;
    overflow-y: auto;
}
.audit-table {
    font-size: 0.82em;
    width: 100%;
}
.audit-table th, .audit-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.audit-data {
    font-size: 0.78em;
    word-break: break-all;
    white-space: pre-wrap;
    display: block;
    max-width: 220px;
    color: var(--muted-hi, #666);
}

/* Mobile Bottom-Cutoff auf Samsung S24U + alle
 Smartphone-Browser mit dynamischer URL-Bar. Wir nutzen 100dvh statt
 100vh + safe-area-inset-bottom fuer Geraete mit Notch/Home-Indicator.
 Die JS-Hook setzt --vp-bottom-px auf window.visualViewport.height-
 diff, sodass das Map-Container-Layout exakt zur SICHTBAREN Hoehe
 passt - Locate/GPS-Tools/Status-Bar werden nicht mehr von der URL-
 Bar bzw. Tab-Bar abgeschnitten. */
:root {
    --vp-bottom-px: 0px;
}
html, body {
    /* dvh = dynamic viewport height (echte Hoehe ohne URL-Bar) */
    min-height: 100vh;
    min-height: 100dvh;
}
.map-shell {
    /* Topbar-Hoehe explizit abziehen, sonst rutscht die
 Karte ueber die Topbar drueber und der untere Kartenrand wird
 abgeschnitten. Beide Hoehenangaben (vh-Fallback + dvh) muessen
 --topbar-h abziehen. */
    height: calc(100vh - var(--topbar-h) - var(--vp-bottom-px));
    height: calc(100dvh - var(--topbar-h));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) {
    .leaflet-bottom {
        /* Locate/GPS-Tools/Scale-Bar nach oben schieben um die
           safe-area + die VP-Bottom-Differenz, sonst sitzen sie
           hinter der Tab-Bar von Chrome Mobile. */
        bottom: calc(env(safe-area-inset-bottom, 0px)
                     + var(--vp-bottom-px)) !important;
    }
    /* Map-Status NICHT mehr komplett ausblenden.
 * Auf Touch-Devices gibt es keinen Mouse-Cursor (Mausbewegung-Coords
 * erscheinen nicht), aber GPS-Accuracy vom Locate-Btn wird via
 * `map.on('locationfound', ...)` in `#map-status [data-role="accuracy"]`
 * gerendert und der User will den sehen.
 *
 * Position konfiguriert im 768px-Block weiter oben (oben mittig,
 * dunkler Hintergrund, hoher z-index). KEIN top:auto-Override mehr —
 * der hat zuvor die Top-Center-Position kaputt gemacht. */
    /* (Default-Position aus 768px-Block greift.) */
    /* Modals als echter Vollbild auf Mobile.
 100vw x 100dvh statt floating-Card. Header sticky damit das
 X-Schliessen immer sichtbar bleibt, egal wie weit der User
 scrollt. Scrollbar ohne maximale Hoehe (.modal-card hat sonst
 max-height: 90vh und versteckt Inhalte unter dem Scroll-Buffer). */
    .modal {
        align-items: stretch;
        padding: 0 !important;
    }
    .modal-card {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .modal-card > .modal-header,
    .modal-card > h3.modal-title {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bg-card, #fff);
        border-bottom: 1px solid var(--border);
        padding-top: env(safe-area-inset-top, 12px);
    }
    [data-theme="dark"] .modal-card > .modal-header,
    [data-theme="dark"] .modal-card > h3.modal-title {
        background: var(--surface-elevated, #1f2024);
    }
    .modal-card > .modal-body,
    .modal-card > .modal-form,
    .modal-card > [data-role="body"] {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-card > .modal-footer,
    .modal-card > .modal-actions {
        position: sticky;
        bottom: 0;
        background: var(--bg-card, #fff);
        border-top: 1px solid var(--border);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }
    [data-theme="dark"] .modal-card > .modal-footer,
    [data-theme="dark"] .modal-card > .modal-actions {
        background: var(--surface-elevated, #1f2024);
    }
    /* Listen mit langem Scroll: prominenter Scroll-Indikator, sonst
       merken Mobile-User nicht dass sie scrollen koennen. */
    .modal-body::-webkit-scrollbar,
    .modal-form::-webkit-scrollbar,
    [data-role="body"]::-webkit-scrollbar,
    .load-modal-list::-webkit-scrollbar,
    .bulk-edit-list::-webkit-scrollbar {
        width: 12px;
    }
    .modal-body::-webkit-scrollbar-thumb,
    .modal-form::-webkit-scrollbar-thumb,
    [data-role="body"]::-webkit-scrollbar-thumb,
    .load-modal-list::-webkit-scrollbar-thumb,
    .bulk-edit-list::-webkit-scrollbar-thumb {
        background: rgba(0, 204, 255, 0.40);
        border-radius: 6px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    .modal-body::-webkit-scrollbar-track,
    .modal-form::-webkit-scrollbar-track,
    [data-role="body"]::-webkit-scrollbar-track,
    .load-modal-list::-webkit-scrollbar-track,
    .bulk-edit-list::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.04);
    }

    /* ============================================================
 * Universelles Fullscreen-Modal-Pattern
 * ------------------------------------------------------------
 * mit dem Help-Modal als Vorlage: das
 * gleiche Pattern auf ALLE Mobile-Fullscreen-Modals anwenden.
 * - Card mit padding:0 + overflow:hidden, damit Header/Footer
 * von alleine edge-to-edge ohne negative Margins sitzen.
 * - Header und Footer mit explizit opaker var(--bg-elevated)
 * (das aeltere Sticky-Pattern oben nutzte --bg-card, das in
 * Dark-Theme nahezu transparent war → Text-Bleed-Through).
 * - Body/Form/Help-Shell uebernehmen den scrollbaren Mittel-
 * bereich mit min-height:0 + overflow-y:auto.
 * - Scrollbar auf ALLE scrollbaren Bereiche im Modal tuerkis
 * (--c-cyan #3BBDE8) und deutlich sichtbar.
 * Specificity hoch genug (!important) damit es die aelteren
 * Mobile-Regeln im selben @media-Block ueberlaeuft (CSS-Order
 * + !important). */
    .modal-card {
        padding: 0 !important;
        overflow: hidden !important;
    }
    .modal-card > .modal-header,
    .modal-card > h3.modal-title {
        margin: 0 !important;
        padding: 12px 16px !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        background: var(--bg-elevated) !important;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        position: relative;
        z-index: 3;
        width: 100%;
    }
    .modal-card > .modal-footer,
    .modal-card > .modal-actions {
        /* margin-top: auto schiebt den Footer ans untere Ende des
 * Flex-Container — auch wenn das Body-Content (z.B. .gcp-
 * capture-body, .load-modal-list) KEINE flex:1-Regel hat und
 * der Footer sonst mitten im Modal haengt. Sides + Bottom
 * bleiben 0. */
        margin: auto 0 0 0 !important;
        padding: 10px 12px !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        background: var(--bg-elevated) !important;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        position: relative;
        z-index: 3;
        width: 100%;
    }
    .modal-card > .modal-body,
    .modal-card > .modal-form,
    .modal-card > [data-role="body"] {
        margin: 0 !important;
        padding: 12px 16px !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0 !important;
    }
    /* Tuerkise Scrollbar auf ALLEN scrollbaren Bereichen innerhalb
     * eines Modals (egal ob standard-Body/-Form, [data-role="body"],
     * Help-TOC, Lade-Modal-Liste, Bulk-Tag-Liste oder eine custom
     * Table-Wrap-Klasse). */
    .modal-card,
    .modal-card * {
        /* scrollbar-color mit sichtbarem Track. */
        scrollbar-color: var(--c-cyan, #3BBDE8) rgba(0,0,0,0.10);
        scrollbar-width: thin;
    }
    .modal-card ::-webkit-scrollbar,
    .modal-card::-webkit-scrollbar {
        /* etwas breiter fuer bessere Touch-Greifbarkeit. */
        width: 12px;
        height: 12px;
    }
    .modal-card ::-webkit-scrollbar-track,
    .modal-card::-webkit-scrollbar-track {
        /* Sichtbarer Track damit User erkennen
 dass Content scrollbar ist. Subtile Faerbung statt transparent. */
        background: rgba(0, 0, 0, 0.10);
        border-radius: 6px;
    }
    [data-theme="dark"] .modal-card ::-webkit-scrollbar-track,
    [data-theme="dark"] .modal-card::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
    }
    .modal-card ::-webkit-scrollbar-thumb,
    .modal-card::-webkit-scrollbar-thumb {
        background: var(--c-cyan, #3BBDE8) !important;
        border-radius: 5px;
        /* Kein border-gap mehr — Thumb soll direkt sichtbar sein ohne
           2px-Rand der ihn optisch dünner macht. */
        min-height: 40px;
    }
    .modal-card ::-webkit-scrollbar-thumb:hover,
    .modal-card::-webkit-scrollbar-thumb:hover {
        background: #2aa6cf !important;
    }
    .modal-card ::-webkit-scrollbar-corner,
    .modal-card::-webkit-scrollbar-corner {
        background: rgba(0, 0, 0, 0.05);
    }

    /* ============================================================
 * Tab→Kapitel-Detail-Pattern fuer
 * Modals mit ueberlaufender Tab-Bar (aktuell admin-modal).
 * ------------------------------------------------------------
 * Anstatt die Tab-Bar im Header auf Mobile zu zeigen (wo sie
 * ueberlaeuft und Tabs unklickbar werden), rendern wir die Tabs
 * als grosse vertikale Kapitel-Liste in der Body-Area. Klick
 * triggert is-mobile-detail-mode auf .modal-card — dann sind die
 * Kapitel ausgeblendet und nur das aktive Pane sichtbar, plus
 * ein Zurueck-Pfeil oben links im Header.
 *
 * Standardmaessig (kein is-mobile-detail-mode): Kapitel-Liste,
 * keine Tab-Bar, keine Panes. is-mobile-detail-mode: Panes
 * sichtbar, Kapitel-Liste aus, Zurueck-Pfeil ein. */
    .modal-card .modal-header-tabs {
        display: none !important;
    }
    .modal-card .modal-mobile-chapter-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px 4px;
    }
    .modal-card.is-mobile-detail-mode .modal-mobile-chapter-list {
        display: none !important;
    }
    .modal-card:not(.is-mobile-detail-mode) [data-pane] {
        display: none !important;
    }
    .modal-card .modal-chapter-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: var(--bg-card, rgba(255,255,255,0.04));
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--fg);
        font: inherit;
        font-size: 1.05em;
        text-align: left;
        cursor: pointer;
        min-height: 48px;
    }
    .modal-card .modal-chapter-item:hover,
    .modal-card .modal-chapter-item:focus-visible {
        background: var(--bg-elevated);
        border-color: var(--c-cyan, #3BBDE8);
        outline: none;
    }
    .modal-card .modal-chapter-item.is-active {
        border-color: var(--c-cyan, #3BBDE8);
        color: var(--c-cyan, #3BBDE8);
        font-weight: 500;
    }
    .modal-card .modal-chapter-chevron {
        font-size: 1.6em;
        line-height: 0.9;
        opacity: 0.6;
        flex-shrink: 0;
    }
    /* Zurueck-Pfeil im Header (nur sichtbar via [hidden=false] aus JS). */
    .modal-card > .modal-header > .modal-back-btn {
        border: 0;
        background: transparent;
        color: var(--muted-hi);
        cursor: pointer;
        padding: 4px 8px;
        margin-right: 4px;
        border-radius: var(--radius-sm);
        line-height: 0;
        flex-shrink: 0;
    }
    .modal-card > .modal-header > .modal-back-btn:hover {
        background: var(--input-bg);
        color: var(--fg);
    }
    /* Wenn Kapitel-Liste sichtbar ist, soll der modal-body keinen
     * unnoetigen Top-Padding haben — Kapitel sitzen schon mit ihrem
     * Eigen-Padding richtig. */
    .modal-card:not(.is-mobile-detail-mode) > .modal-body {
        padding: 8px 12px !important;
    }
    /* Admin-Pane-Header (h3 oder h4)
 * NICHT mehr doppelt zeigen. Modal-Titel oben enthaelt schon den
 * Kapitel-Namen (siehe Title-Swap in admin-modal.js). Das
 * erste h3/h4 am Anfang jedes [data-pane] und auch im help-content
 * im Detail-Mode wird ausgeblendet. */
    .modal-card.is-mobile-detail-mode [data-pane] > h3:first-child,
    .modal-card.is-mobile-detail-mode [data-pane] > h4:first-child,
    .modal-card.is-mobile-detail-mode [data-pane] > p:first-child + h4,
    .modal-card.is-mobile-detail-mode [data-pane] > section > h4:first-child {
        display: none !important;
    }
}

/* Einheitlicher Minimize-Btn-Style fuer alle
 * Modals und Panels (gcp-capture-modal, measurement-panel). Cyan
 * (Geolyser-CI) damit man ihn vom roten Close-X unterscheidet.
 * nicht mehr .modal-close-btn als Basis (die zwingt rote
 * Border + roten Hintergrund via !important). Stattdessen kompletter
 * Standalone-Style — 32x32, cyan Border, cyan SVG. */
.modal-minimize-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated) !important;
    color: var(--c-cyan, #3BBDE8) !important;
    border: 1px solid var(--c-cyan, #3BBDE8) !important;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.modal-minimize-btn:hover,
.modal-minimize-btn:focus-visible {
    background: var(--c-cyan, #3BBDE8) !important;
    color: #fff !important;
    border-color: var(--c-cyan, #3BBDE8) !important;
    outline: none;
}
[data-theme="light"] .modal-minimize-btn {
    background: #e8f7fc !important;
    color: var(--c-cyan, #3BBDE8) !important;
    border-color: var(--c-cyan, #3BBDE8) !important;
}
[data-theme="light"] .modal-minimize-btn:hover {
    background: var(--c-cyan, #3BBDE8) !important;
    color: #fff !important;
}
.modal-minimize-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}
/* Minimize + Close-X immer am rechten Rand zusammen,
 * mit kleinem Gap. margin-left:auto schiebt die erste Right-Action
 * an den rechten Rand, alle nachfolgenden Buttons reihen sich
 * adjacent rechts an. */
.modal-header > .modal-minimize-btn {
    margin-left: auto;
}
.modal-header > .modal-minimize-btn + .modal-close-btn,
.modal-header > .modal-close-btn + .modal-minimize-btn {
    margin-left: 6px;
}
/* Wenn kein Minimize-Btn da ist, sitzt der Close-Btn alleine rechts. */
.modal-header > .modal-close-btn {
    margin-left: auto;
}
.modal-header > .modal-minimize-btn + .modal-close-btn {
    margin-left: 6px;
}
/* In-map-Panel (Mess-Tool) hat einen flex-Header (.geolyser-measure-
 * head) — gleicher Push-to-right-Trick. */
.geolyser-measure-head > .modal-minimize-btn {
    margin-left: auto;
}
.geolyser-measure-head > .modal-minimize-btn + .icon-btn,
.geolyser-measure-head > .icon-btn[data-action="close"] {
    margin-left: 6px;
}

/* .modal-mobile-chapter-list ist nur das
 * Smartphone-Pendant zur Header-Tab-Bar. Default GLOBAL ausblenden,
 * sonst rendert sie auch auf Tablet/Desktop sichtbar im modal-body
 * (Browser-Default fuer div = block). Die Kapitel-Listen-Regel im 768px-
 * Block ueberschreibt sie dort wieder auf display:flex. */
.modal-mobile-chapter-list {
    display: none;
}
/* Back-Pfeil im Modal-Header analog — nur
 * via JS auf Mobile sichtbar gemacht. Default: hidden-Attribut sitzt
 * im HTML, plus dieses CSS als Safety-Net falls das Attribut mal
 * verloren geht. */
.modal-back-btn[hidden] {
    display: none !important;
}

/* +N-Tag-Chip mit Hover-Popover, der alle
 versteckten Tags inkl. Farben als Liste zeigt. Vorher nur title-
 Tooltip ohne Tag-Farben. */
.popup-tag.tag--more.has-tag-popover {
    position: relative;
    cursor: help;
}
.tag-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 1300;
    padding: 6px 8px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ccc);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.20);
    max-width: 280px;
    white-space: normal;
    line-height: 1.7;
    /* Text-Groesse an die "echten" Listen-Tags angleichen,
 sonst wirkt das Hover-Popup wie ein abgeschnittener Tooltip. */
    font-size: 0.92em;
}
.tag-popover .popup-tag {
    font-size: 1em;
}
.popup-tag.tag--more.has-tag-popover:hover .tag-popover,
.popup-tag.tag--more.has-tag-popover:focus .tag-popover,
.popup-tag.tag--more.has-tag-popover:focus-within .tag-popover {
    display: block;
}
[data-theme="dark"] .tag-popover {
    background: var(--surface-elevated, #1f2024);
    border-color: rgba(255,255,255,0.14);
}

/* Retroaktive Mess-Tools im Feature-Edit-Modal.
 Liegt zwischen Form und Action-Bar, scaled per Buttons (sichtbar wenn
 data-action="retro-*" passt zum Geometrie-Typ). */
.feature-modal-retro-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 6px;
    border-top: 1px dashed var(--border);
    margin-top: 12px;
    /* align Items damit Retro-Btns + DSM-Source-Select
 auf gleicher Hoehe sitzen. */
    align-items: center;
}
.feature-modal-retro-tools[hidden] { display: none; }
/* Strikte Geometrie-Filter — Retro-Buttons sind je nach
 Geometrie-Typ ENTWEDER sichtbar ODER vollstaendig entfernt (keine
 leeren Slots). Funktioniert mit hidden-Attribut UND inline display. */
.retro-tool-btn[hidden],
.retro-tool-btn[style*="display: none"] { display: none !important; }
.retro-tool-btn {
    background: rgba(0, 204, 255, 0.10) !important;
    color: #003848 !important;
    border-color: rgba(0, 204, 255, 0.40) !important;
    font-size: 0.88em;
    padding: 6px 10px;
    /* einheitliche Groesse + Radius fuer ALLE
 Retro-Buttons — vorher wichen Inline-SVG-Buttons (18px-Icon) von den
 Mask-Icon-Buttons (22px → 44x36) sichtbar ab (i2i-Export-Btn). */
    width: 44px;
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.retro-tool-btn:hover {
    background: rgba(0, 204, 255, 0.22) !important;
    border-color: rgba(0, 204, 255, 0.65) !important;
}
[data-theme="dark"] .retro-tool-btn {
    background: rgba(0, 204, 255, 0.16) !important;
    color: #b8edff !important;
    border-color: rgba(0, 204, 255, 0.50) !important;
}
/* Retro-Werkzeuge, die nur der SuperAdmin sieht (i2i-Export), tragen
   Bernstein statt Cyan, damit sie als Sonderrolle erkennbar sind
   Dieselben Werte wie .btn-amber. */
.retro-tool-btn.retro-tool-btn--superadmin {
    background: rgba(201, 138, 0, 0.15) !important;
    color: #8a5d00 !important;
    border-color: rgba(201, 138, 0, 0.55) !important;
}
.retro-tool-btn.retro-tool-btn--superadmin:hover {
    background: rgba(201, 138, 0, 0.28) !important;
    border-color: rgba(201, 138, 0, 0.80) !important;
}
[data-theme="dark"] .retro-tool-btn.retro-tool-btn--superadmin {
    background: rgba(201, 138, 0, 0.18) !important;
    color: #e6a627 !important;
    border-color: rgba(201, 138, 0, 0.60) !important;
}

/* Tool-Exklusivitaet: waehrend ein Zeichen-/Edit-
 Modus aktiv ist (Geoman-Draw, Edit/Drag/Rotate/Removal, Scale-Mode),
 sperrt geoman-tool-lock.js alle anderen Toolbar-Buttons. Der aktive
 Button (.active) + seine Action-Leiste bleiben bedienbar. */
.geolyser-tool-locked .leaflet-pm-toolbar .button-container:not(.active) {
    pointer-events: none;
    opacity: .35;
    filter: grayscale(1);
}
/* waehrend JEDES aktiven Zeichen-/Edit-Modus (auch
 Verschieben/Rotieren/Loeschen/Skalieren) zusaetzlich: keine Feature-
 Popups (kein Weg in andere Modals) und alle Karten-Controls ausser
 Zoom/Attribution/der Geoman-Toolbar gesperrt — man kann nichts
 Falsches anklicken. Feature-Klicks selbst bleiben moeglich (Edit-/
 Removal-Modus braucht sie). */
.geolyser-tool-locked .leaflet-popup { display: none !important; }
/* Platzvermessung: waehrend der Aufnahme bleibt die
 KARTENAUSWAHL bedienbar. Eine andere Basemap zu waehlen ist Ansicht und
 kein Werkzeug — es nimmt der Vermessung keinen Kartenklick weg. Gesperrt
 bleiben Zeichnen, Bearbeiten, Messen und Standort. Die Regel greift nur
 ueber die Golf-Fahne am <body>; laeuft daneben ein echter Zeichen-Modus,
 gilt wieder die allgemeine Sperre darunter. */
body[data-geolyser-golf-active="true"] .geolyser-tool-locked .leaflet-control-layers,
body[data-geolyser-schnell-active="true"] .geolyser-tool-locked .leaflet-control-layers {
    /* !important, weil die Sperre darueber mit drei :not() eine hoehere
       Gewichtung hat als dieser Ausnahmefall — ohne das greift die
       Ausnahme nicht. */
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Schnellaufnahme: waehrend gemessen oder aufgezeichnet wird, ist alles
   gesperrt, was der Aufnahme in die Quere kommt. Nicht nur die
   Kartenwerkzeuge (das erledigt .geolyser-tool-locked eine Regel
   weiter oben), sondern auch die Wege AUS der Aufnahme heraus: der
   Wechsel in einen anderen Panel-Modus, der Projektumschalter und das
   Schliessen-Kreuz des Modus. Ein Projektwechsel laedt die Seite neu -
   mitten in einer Spur ist das der Verlust des abgegangenen Weges.
   Die Liste der Objektarten bleibt SICHTBAR, aber nicht waehlbar: was
   man aufnimmt, steht beim Start fest. */
body[data-geolyser-schnell-active="true"] .panel-modi-reiter,
body[data-geolyser-schnell-active="true"] .features-panel-head-tools,
body[data-geolyser-schnell-active="true"] .sn-banner .modus-kopf-btn--close,
body[data-geolyser-schnell-active="true"] .sn-banner .modus-kopf-btn--setup,
body[data-geolyser-schnell-active="true"] .sn-liste,
body[data-geolyser-schnell-active="true"] .sn-host .modus-fuss {
    pointer-events: none;
    opacity: .45;
    filter: grayscale(1);
}
/* Der Aufnahme-Knopf und seine beiden Drittel bleiben bedienbar - sie
   sind der einzige Weg, die Aufnahme zu beenden. */
body[data-geolyser-schnell-active="true"] .sn-fest {
    pointer-events: auto;
    opacity: 1;
    filter: none;
}
/* Die Standort-Werkzeuge liegen NEBEN der Karte, nicht darin: der
   Kasten #gps-tools ist ein Geschwister von #map. Die Sperre auf dem
   Kartencontainer (.geolyser-tool-locked, eine Regel weiter unten)
   erreicht sie deshalb nicht, und waehrend einer Aufnahme waren
   Punkt-, Linien- und Flaechen-Aufnahme der Karte weiter anklickbar -
   ein zweiter Weg in dieselbe Messung. Sie haengen darum an derselben
   Fahne am <body> wie der Rest.
   `pointer-events` und nicht `disabled`: die Schnellaufnahme startet
   ihre Aufnahme ueber genau diese Knoepfe (gpsKnopf() klickt sie
   programmatisch), und ein gesperrter Knopf nimmt auch keinen
   programmatischen Klick mehr an. */
body[data-geolyser-schnell-active="true"] .gps-tools,
body[data-geolyser-golf-active="true"] .gps-tools {
    pointer-events: none;
    opacity: .45;
    filter: grayscale(1);
}
/* Die Statuszeile daneben bleibt lesbar: sie sagt, was die Aufnahme
   gerade tut. */
body[data-geolyser-schnell-active="true"] .gps-tools-status,
body[data-geolyser-golf-active="true"] .gps-tools-status {
    opacity: 1;
    filter: none;
}
.geolyser-tool-locked .leaflet-control:not(.leaflet-control-zoom):not(.leaflet-control-attribution):not(.leaflet-pm-toolbar) {
    pointer-events: none;
    opacity: .35;
    filter: grayscale(1);
}

/* Kurvenradius-Panel beim Linien-Zeichnen:
 schwebt unten mittig ueber der Karte, solange das Linien-Tool laeuft. */
.line-radius-panel {
    position: fixed;
    left: 50%;
    /* hoeher platziert — ganz unten wurde die Leiste
 leicht uebersehen. */
    bottom: 120px;
    transform: translateX(-50%);
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    /* --input-bg statt --bg-card — bg-card ist im
 Dark-Mode quasi transparent (Panel wirkte durchsichtig). */
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    font-size: .9em;
}
.line-radius-panel[hidden] { display: none; }
/* Rechteck- und Kreis-Editor laufen seit dem Vorlagen-
   Zeichenfenster auch AUF einer Karte, die in einem Modal sitzt. Die
   schwebende Leiste haengt am body und laege mit ihren 1100 unter dem
   Modal-Overlay (2000) - unsichtbar, obwohl die Handles auf der Karte
   im Modal zu sehen sind. */
/* Mit `panelHost` haengt der Aufrufer sie stattdessen in die Kartenbox,
   und hier sitzen sie absolut darin. Die Klasse setzt der jeweilige
   Editor selbst, sobald ein `panelHost` uebergeben wurde (rect-,
   circle- und line-curve-editor). */
/* Jetzt beide Anker gesetzt, `width: max-content` fuer die volle Zeile
   und `margin: 0 auto` zum Zentrieren dazwischen. Umbrechen darf sie
   weiterhin, aber erst, wenn die ganze Box zu schmal ist. */
.line-radius-panel.panel-in-map {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    /* PFLICHT, auch wenn hier nichts verschoben werden soll: die
       Basisregel .line-radius-panel zentriert sich mit
       `left: 50%` PLUS `transform: translateX(-50%)`. Wir ersetzen
       oben nur das `left`; das transform bliebe sonst stehen und
       rueckte die fertig zentrierte Leiste noch einmal um ihre halbe
       Breite nach links aus dem Bild.
       Merksatz: wer eine Positionierung ueberschreibt, setzt JEDE
       Eigenschaft der Basis zurueck, nicht nur die auffaellige. */
    transform: none;
    z-index: 1000;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
}
/* Kein Umbruch INNERHALB einer Angabe, und Ziffern mit fester Breite.
   Ohne das wackelt die ganze Leiste beim Ziehen am Radius-Griff, weil
   jede neue Zahl eine andere Breite hat. */
.line-radius-panel .line-radius-title,
.line-radius-panel .rect-dim,
.line-radius-panel .lc-width,
.line-radius-panel > .sub {
    white-space: nowrap;
}
.line-radius-panel > .sub {
    font-variant-numeric: tabular-nums;
}
.line-radius-panel .line-radius-title { font-weight: 600; }
.line-radius-panel input[type="number"] {
    width: 72px;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
/* Kurven-Editor-Handles: runder Punkt (blau,
 weisse Kontur) — deutlich + auf jedem Untergrund lesbar. */
.line-curve-handle {
    cursor: grab;
    /* KEIN filter:drop-shadow hier —
 CSS-Filter auf per Drag bewegten Elementen erzwingen teure
 Repaints pro Frame. Schatten stattdessen als box-shadow am Dot. */
}
.line-curve-handle:active { cursor: grabbing; }
.line-curve-handle-dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007FB4;
    border: 2.5px solid #ffffff;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/* Vertex-Move-Handles im Mittellinien-Editor:
 weisse Quadrate mit blauem Rand — wie Geoman-Vertices. */
.line-vertex-handle { cursor: grab; }
.line-vertex-handle:active { cursor: grabbing; }
.line-vertex-handle-box {
    display: block;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid #007FB4;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* Einfuege-Handle: halbtransparentes kleineres Quadrat
 auf jeder Segment-Mitte der Mittellinie — Ziehen/Klicken fuegt dort
 einen neuen Punkt ein (wie Geomans Mittel-Marker beim Linien-Edit). */
.line-vertex-mid-box {
    width: 10px;
    height: 10px;
    opacity: 0.55;
}
.line-vertex-mid:hover .line-vertex-mid-box { opacity: 1; }
/* Kurven-Modus-Sperre: solange der Kurven-Editor
 laeuft (body.geolyser-curve-lock), sind Feature-Popups ausgeblendet
 (kein Weg in andere Modals) und alle Karten-Controls ausser Zoom +
 Attribution gesperrt — Draw-/Edit-Toolbar, Mess-Tool, Positions-
 Control. Ende des Modus (✓/✗) hebt alles wieder auf. */
.geolyser-curve-lock .leaflet-popup { display: none !important; }
.geolyser-curve-lock .leaflet-control:not(.leaflet-control-zoom):not(.leaflet-control-attribution) {
    pointer-events: none;
    opacity: .35;
    filter: grayscale(1);
}
/* waehrend des Kurven-/Korridor-Editors
 KEINE Hit-Tests gegen die Feature-Panes — der Browser prueft sonst bei
 jeder Mausbewegung alle interaktiven SVG-Pfade/Marker (skaliert mit der
 Feature-Anzahl auf der Karte). Popups sind in dem Modus ohnehin
 gesperrt. Die Editor-Handles (markerPane, .line-curve-handle) bleiben
 bedienbar. */
.geolyser-curve-lock .leaflet-overlay-pane,
.geolyser-curve-lock .leaflet-pane[class*="geolyser-layer-"] {
    pointer-events: none !important;
}
.geolyser-curve-lock .leaflet-marker-pane .geolyser-pin {
    pointer-events: none !important;
}
/* Korridor-Tool-Icon: geschwungener Weg als Inline-SVG-
 Data-URL, currentColor-los (Geoman-Toolbar tintet nicht) — dunkelgrau,
 Dark-Mode via Invert wie andere Toolbar-Img-Icons. */
.leaflet-pm-icon-corridor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21 Q6 12 12 9 T20 3' fill='none' stroke='%23333' stroke-width='5' stroke-linecap='round' opacity='0.45'/%3E%3Cpath d='M4 21 Q6 12 12 9 T20 3' fill='none' stroke='%23333' stroke-width='1.6' stroke-dasharray='3 3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}
[data-theme="dark"] .leaflet-pm-icon-corridor {
    filter: invert(0.85);
}
/* Zauberstab-Werkzeug (js/zauberstab.js): Symbol im Stil der anderen
 Zeichenwerkzeuge, Fadenkreuz auf der Karte, Leiste mit Umbruch. */
.leaflet-pm-icon-wand {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 14.5 9.5'/%3E%3Cpath d='M13 8l3 3'/%3E%3Cpath d='M17 2.5v3M15.5 4h3M20.5 7.5v2M19.5 8.5h2M9.5 3.5v2M8.5 4.5h2'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}
[data-theme="dark"] .leaflet-pm-icon-wand {
    filter: invert(0.85);
}
/* Polygon von Hand mit der Zauberstab-Leiste (Abrunden, Verrechnen):
   gestricheltes Vieleck mit Eckpunkten. */
.leaflet-pm-icon-handsel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17 3.5 8l7-4.5 9 3 1 8.5-7.5 4.5z' stroke-dasharray='2.6 2.2'/%3E%3Ccircle cx='5' cy='17' r='1.7' fill='%23333'/%3E%3Ccircle cx='3.5' cy='8' r='1.7' fill='%23333'/%3E%3Ccircle cx='10.5' cy='3.5' r='1.7' fill='%23333'/%3E%3Ccircle cx='19.5' cy='6.5' r='1.7' fill='%23333'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}
[data-theme="dark"] .leaflet-pm-icon-handsel {
    filter: invert(0.85);
}
.leaflet-container.wand-cursor,
.leaflet-container.wand-cursor .leaflet-interactive { cursor: crosshair; }
.leaflet-container.wand-busy { cursor: progress; }
/* Zauberstab-Leiste: Kopfzeile (Titel, Auswahlmodus, Aktionen), darunter
 ein Raster gleich gebauter Felder (Beschriftung oben, Eingabe mit
 Einheit darunter), unten die Statuszeile. Zahlenfelder und die Auswahl
 "Aufnahme" teilen sich EINEN Stil (.wand-input), damit nichts mehr
 nach Browser-Standard aussieht. */
.line-radius-panel.wand-panel {
    display: block;
    width: min(720px, calc(100vw - 24px));
    padding: 10px 12px 8px;
}
.wand-panel .wand-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.wand-panel .wand-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.wand-panel .wand-title-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.wand-panel .wand-modes {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated, transparent);
}
.wand-panel .wand-mode {
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--muted-hi);
}
.wand-panel .wand-mode:hover { color: var(--fg); }
.wand-panel .wand-mode.is-active {
    background: var(--c-accent, #007FB4);
    color: #fff;
}
.wand-panel .wand-field[hidden] { display: none; }
.wand-panel .wand-arten .wand-art.is-active {
    background: var(--c-accent, #007FB4);
    color: #fff;
}
.wand-panel .wand-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
}
.wand-panel .wand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px 10px;
}
.wand-panel .wand-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.wand-panel .wand-lbl {
    font-size: .78em;
    color: var(--muted-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wand-panel .wand-ctl {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
}
.wand-panel .wand-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    font: inherit;
    color: var(--fg);
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.wand-panel select.wand-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px 14px;
    cursor: pointer;
}
.wand-panel .wand-input:focus {
    outline: none;
    border-color: var(--c-accent, #007FB4);
    box-shadow: 0 0 0 2px rgba(0, 127, 180, .22);
}
.wand-panel .wand-unit { color: var(--muted-hi); font-size: .85em; }
.wand-panel .wand-apply { width: 30px; height: 30px; padding: 0; flex: 0 0 30px; }
.wand-panel .wand-check .wand-ctl { gap: 6px; cursor: pointer; white-space: nowrap; }
/* Schieberegler unter den Zahlenfeldern: gross genug fuer den Finger,
   touch-action none, damit ein seitlicher Wisch den Regler zieht und
   nicht die Seite verschiebt. */
.wand-panel .wand-range {
    width: 100%;
    height: 26px;
    margin: 2px 0 0;
    accent-color: var(--c-primary);
    touch-action: none;
    cursor: pointer;
}
@media (pointer: coarse) {
    .wand-panel .wand-range { height: 34px; }
}
/* Rand als Linie (js/polygon-rand.js): zwei breite Felder statt vieler
   schmaler. */
.wand-panel.rand-panel .rand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wand-panel .wand-check input { width: 16px; height: 16px; margin: 0; }
.wand-panel .wand-status {
    margin-top: 8px;
    min-height: 1.2em;
    text-align: center;
}
.wand-panel .wand-status.is-warn { color: var(--c-warn, #B45309); }
@media (max-width: 640px) {
    .line-radius-panel.wand-panel { bottom: 72px; }
    .wand-panel .wand-head { flex-wrap: wrap; }
    .wand-panel .wand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.line-radius-panel .lc-width input[type="number"] {
    width: 68px;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}


/* ---- Varianten-Plaetze der Classmap-Bemalung ---- */
.i2i-slots {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.i2i-slot-row { display: inline-flex; gap: 6px; }
/* Ein Platz ist gross genug fuer eine Ziffer und ein Icon; leer =
   gestrichelt wie die Bild-Slots am Feature, belegt = durchgezogen.
   Bewusst dieselbe Sprache wie .image-slot, damit man das Verhalten
   (klicken = belegen, Kreuz = leeren) nicht neu lernen muss. */
.i2i-slot { position: relative; display: inline-flex; }
.i2i-slot-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--muted-hi);
    line-height: 0;
}
.i2i-slot-btn:hover { border-color: var(--border-hi); color: var(--fg); }
.i2i-slot-n {
    position: absolute; top: 1px; left: 4px;
    font-size: 10px; line-height: 1; font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .75; pointer-events: none;
}
.i2i-slot.is-filled .i2i-slot-btn {
    border-style: solid;
    border-color: var(--border-hi);
    color: var(--c-primary);
}
.i2i-slot.is-filled .i2i-slot-btn:hover { border-color: var(--c-primary); }
.i2i-slot-x {
    position: absolute; top: -5px; right: -5px;
    width: 16px; height: 16px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-hi);
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--muted);
    font: 700 11px/1 sans-serif;
}
.i2i-slot-x:hover { color: var(--c-error); border-color: var(--c-error); }

/* Der Einstieg in den Mal-Modus ist der wichtigste Knopf des Modals und
   traegt deshalb die Primaerfarbe statt der Ghost-Optik. */
.i2i-paint-btn {
    padding: 0;
    line-height: 0;
}
/* Quadratische 40-px-Knoepfe im i2i-Fenster: Malen und
   Verwerfen stehen nebeneinander und sind gleich gross, ebenso Preset
   speichern und loeschen. */
.i2i-sq-btn {
    width: 40px; height: 40px;
    min-width: 40px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.i2i-sq-btn[hidden] { display: none; }

/* ---- Classmap-Mal-Modus ------------------------------
   Liegt UEBER dem i2i-Export-Modal (z 2000) und ueber den Toasts (2200),
   weil es aus jenem Modal heraus geoeffnet wird. Der Bestaetigungsdialog
   muss wiederum darueber liegen — siehe .modal--confirm weiter unten.
   Einziges optisches Sonderding: image-rendering: pixelated. Ein weich
   skaliertes Vorschaubild wuerde Klassenkanten vortaeuschen, die es in
   der Classmap gar nicht gibt. */
.modal.modal--clspaint { z-index: 2300; padding: 16px; }
/* Breite als 97vw hat die Karte ueber den Rand geschoben —
   vw schliesst die Scrollleiste ein, und .modal zentriert mit
   justify-content:center, wodurch der Ueberhang LINKS unerreichbar wurde
   (der Titel war angeschnitten). width:100% ist die Breite des bereits
   gepolsterten Flex-Containers und kann per Definition nicht ueberlaufen.
   Die HOEHE ist bewusst definit (nicht max-height): nur dann bekommt
   .clsp-stage mit flex-basis 0 ihre Endhoehe in einem Durchgang, statt
   sich ueber mehrere Frames von der min-height hochzuarbeiten. */
/* Zweiter Anlauf: `padding: 0` auf der Karte war der
   Fehler. .modal-header und .modal-footer ziehen sich mit NEGATIVEN
   Raendern (-24px links/rechts) ueber die Kartenpolsterung, damit sie
   randlos sitzen. Ohne diese Polsterung ragten beide 24 px links und
   rechts heraus — die Karte hat `overflow: hidden`, also wurde der linke
   Rand abgeschnitten und aus "Classmap bemalen" wurde "lassmap bemalen".
   Deshalb: Standardpolsterung der Karte behalten, keine eigenen Paddings
   fuer Kopf, Koerper und Fuss. */
.clsp-card {
    width: 100%;
    max-width: 1680px;
    height: calc(100dvh - 32px);
    max-height: none;
    display: flex;
    flex-direction: column;
}
.clsp-dim { margin-left: 10px; font-weight: 400; }
/* .modal-body hat von Haus aus KEIN flex — in einer Spalten-Flexbox mit
   fester Hoehe bleibt es dann inhaltsgross, und die Buehne mit
   `flex: 1 1 0` bekam Hoehe 0 (Zoom 0 %, kein Bild). */
.clsp-body {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

.clsp-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.clsp-group { display: inline-flex; align-items: center; gap: 7px; }
/* ⚠️ Jede Klasse, die hier `display` setzt, ueberstimmt damit das
   UA-`[hidden] { display: none }`. Das ist uns zweimal passiert (Deckkraft-
   Regler blieb sichtbar, "Ebene wird geladen …" verschwand nie). Deshalb
   gesammelt fuer ALLE .clsp-Klassen mit display — beim Anlegen einer neuen
   bitte hier eintragen. */
.clsp-body[hidden], .clsp-bar[hidden], .clsp-group[hidden],
.clsp-palette[hidden], .clsp-seg-row[hidden], .clsp-swatch[hidden],
.clsp-busy[hidden] { display: none; }
.clsp-spacer { flex: 1 1 auto; }
.clsp-lbl { font-size: .8em; color: var(--muted); white-space: nowrap; }
.clsp-num {
    font-size: .8em; color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 3ch; text-align: right;
}
.clsp-num--wide { min-width: 5ch; }

/* Farbwahl: der Rahmen sitzt aussen, die Farbe innen — so bleibt die
   Palettenfarbe unverfaelscht sichtbar und der Aktiv-Ring ueberdeckt sie
   nicht. */
.clsp-palette { display: flex; flex-wrap: wrap; gap: 5px; }
.clsp-swatch {
    width: 32px; height: 32px; padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    display: inline-flex;
}
.clsp-swatch > i { flex: 1; border-radius: 3px; display: block; }
.clsp-swatch:hover { border-color: var(--border-hi); }
.clsp-swatch.is-active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(0, 127, 180, 0.35);
}
.clsp-cls-name { font-size: .85em; color: var(--fg); }
/* Titel darf die Kopfzeile nicht aufblaehen (Bahnnamen koennen lang sein). */
.clsp-card .modal-title { min-width: 0; margin-bottom: 0; }

.clsp-src { max-width: 210px; }
.clsp-range { width: 150px; accent-color: var(--c-primary); }
.clsp-range:disabled { opacity: .4; }
/* Deckkraft behaelt ihren Platz, auch wenn sie nicht greift — sonst
   springt die Werkzeugleiste beim Umschalten des Hintergrunds. */
[data-role="clsp-opacity-wrap"]:has(.clsp-range:disabled) { opacity: .45; }
.clsp-range--sm { width: 96px; }
/* Punktvorschau der Pinselgroesse — massstabsgetreu bis 26 px. */
.clsp-preview {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--fg); opacity: .8;
    flex: 0 0 auto;
}

/* Segment-Umschalter fuer den Hintergrund (Classmap / Ortho / Basemap) */
.clsp-seg-row {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.clsp-seg {
    border: 0; background: var(--input-bg); color: var(--muted);
    padding: 5px 11px; font-size: .82em;
}
.clsp-seg + .clsp-seg { border-left: 1px solid var(--border); }
.clsp-seg:hover { color: var(--fg); }
.clsp-seg.is-active { background: var(--c-primary); color: #fff; }

.clsp-stage {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
}
.clsp-stage canvas { display: block; image-rendering: pixelated; }
.clsp-busy {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: var(--fg); font-size: .9em;
}
.clsp-hint { margin: 0; }
[data-role="clsp-erase"].is-active {
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(0, 127, 180, 0.22);
}

/* Der Bestaetigungsdialog wird auch aus dem Mal-Modus (2300) heraus
   geoeffnet und muss deshalb darueber liegen. */
.modal.modal--confirm { z-index: 2400; }

.i2i-select-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.i2i-class-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.i2i-class-swatch.is-empty {
    background:
        repeating-linear-gradient(45deg,
            transparent 0 3px, var(--border) 3px 5px);
}
/* ---- i2i-Export ----
   Sechs einklappbare Abschnitte (<details class="i2i-box">) mit Nummer,
   Titel und einer Kurzfassung rechts im Kopf. Alle Eingaben tragen .i2i-in
   und damit dieselbe Optik wie .field-Eingaben (Regel oben bei .field).
   Bewusst ohne Flaechenfuellung der Kaesten - nur Rahmen, sonst kippt der
   Dark Mode. */
.i2i-card { max-width: 720px; }
.i2i-card [hidden] { display: none !important; }
.i2i-body { display: flex; flex-direction: column; gap: 10px; }
.i2i-in {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    box-sizing: border-box;
    font: inherit;
    font-size: .92em;
    padding: 7px 10px;
}
select.i2i-in { padding-right: 28px; }
input.i2i-in[type="number"] { text-align: left; }
/* Datum/Uhrzeit: Kalender- und Uhr-Symbol im Dark Mode hell */
:root:not([data-theme="light"]) .i2i-in { color-scheme: dark; }
[data-theme="light"] .i2i-in { color-scheme: light; }
.i2i-in:disabled { opacity: .5; cursor: not-allowed; }
.i2i-in.is-changed { border-color: var(--c-warn); }

.i2i-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
}
.i2i-box[open] { border-color: var(--border-hi); }
.i2i-box-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    min-height: 44px;
    box-sizing: border-box;
}
.i2i-box-head::-webkit-details-marker { display: none; }
.i2i-box-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-hi);
    color: var(--muted-hi);
    font: 700 11px/1 sans-serif;
}
.i2i-box[open] .i2i-box-num {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.i2i-box-title { font-weight: 600; color: var(--fg); white-space: nowrap; }
.i2i-box-badge {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: .8em;
    color: var(--muted-hi);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.i2i-chev { flex: 0 0 auto; color: var(--muted-hi); transition: transform .15s; }
details[open] > summary > .i2i-chev { transform: rotate(180deg); }
.i2i-box-body {
    display: flex; flex-direction: column; gap: 12px;
    padding: 2px 12px 14px;
}

.i2i-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Zweizeilige Beschriftung darf die Felder einer Reihe nicht versetzen. */
.i2i-grid2 > .i2i-f, .i2i-grid3 > .i2i-f, .i2i-hole-grid > .i2i-f { justify-content: flex-end; }
.i2i-card .sub { font-size: .78em; color: var(--muted); }
.i2i-lbl {
    display: inline-flex; align-items: center;
    font-size: .8em; color: var(--muted);
}
.i2i-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.i2i-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; }
.i2i-hole-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px 14px;
}
.i2i-sub {
    font-size: .74em; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-hi);
    padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.i2i-note:empty { display: none; }
.i2i-check {
    display: flex; align-items: center; gap: 8px;
    min-height: 32px; cursor: pointer; font-size: .92em;
}
.i2i-check input { width: 18px; height: 18px; accent-color: var(--c-primary); flex: 0 0 auto; }
.i2i-bm { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.i2i-legend .sub { margin-top: 2px; }

/* Classmap-Liste in einklappbaren Gruppen */
.i2i-groups { display: flex; flex-direction: column; gap: 8px; }
.i2i-grp { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.i2i-grp-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; min-height: 40px; box-sizing: border-box;
    cursor: pointer; list-style: none; user-select: none;
    font-size: .88em;
}
.i2i-grp-head::-webkit-details-marker { display: none; }
.i2i-grp-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.i2i-grp[data-grp="hole"] .i2i-grp-dot { background: var(--c-primary); }
.i2i-grp[data-grp="shared"] .i2i-grp-dot { background: var(--muted-hi); }
.i2i-grp[data-grp="neighbour"] .i2i-grp-dot { background: var(--c-warn); }
.i2i-grp[data-grp="none"] .i2i-grp-dot {
    background: none; border: 1px dashed var(--muted);
}
.i2i-grp-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.i2i-grp-count {
    min-width: 24px; padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--border); text-align: center;
    font-size: .85em; font-variant-numeric: tabular-nums; color: var(--muted-hi);
}
.i2i-grp .i2i-map-table { width: 100%; border-collapse: collapse; }
/* Schalterleiste in einer Gruppe (Nachbarbahnen mitliefern) */
.i2i-grp-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--c-warn) 8%, transparent);
    font-size: .86em; cursor: pointer;
}
.i2i-grp-bar-text { display: inline-flex; align-items: center; flex: 1; min-width: 0; }
.i2i-switch { position: relative; flex: 0 0 auto; width: 34px; height: 20px; }
.i2i-switch input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.i2i-switch-track {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--border-hi); transition: background .15s;
    pointer-events: none;
}
.i2i-switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.i2i-switch input:checked + .i2i-switch-track { background: var(--c-primary); }
.i2i-switch input:checked + .i2i-switch-track::after { transform: translateX(14px); }
.i2i-switch input:focus-visible + .i2i-switch-track {
    box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.3);
}
.i2i-map-table td {
    padding: 6px 10px; vertical-align: middle;
    border-top: 1px solid var(--border);
}
.i2i-map-table td + td { padding-left: 0; }
.i2i-tagcell { width: 45%; max-width: 0; }
.i2i-rowname {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .92em;
}
.i2i-tagcell .sub {
    margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.i2i-clscell { width: 40%; }
.i2i-wcell { width: 82px; }
.i2i-in-w { width: 76px; }
.i2i-grp[data-grp="neighbour"] .i2i-rowname,
.i2i-grp[data-grp="none"] .i2i-rowname { color: var(--muted-hi); }

/* Mal-Modus + Varianten */
.i2i-paint { display: flex; flex-direction: column; gap: 6px; }
.i2i-paint-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Presets der bahnuebergreifenden Einstellungen, ueber dem ersten Abschnitt. */
.i2i-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.i2i-presets .i2i-lbl { flex: 0 0 auto; }
.i2i-presets select { flex: 1 1 200px; width: auto; }
/* Farben der Nachbarbahn-Klassen neben dem Schalter (nur Anzeige). */
.i2i-nb-swatches { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.i2i-nb-swatches .i2i-class-swatch { width: 12px; height: 12px; border-radius: 3px; }

/* Aufnahmedatum: Name | Datum, darunter die Herkunft */
.i2i-acq {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(150px, 2fr);
    grid-template-areas: "name date" ". src";
    gap: 4px 10px;
    align-items: center;
}
.i2i-acq + .i2i-acq { padding-top: 8px; border-top: 1px solid var(--border); }
.i2i-acq-name { grid-area: name; font-size: .9em; }
.i2i-acq [data-role="i2i-acq-date"] { grid-area: date; max-width: 220px; }
.i2i-acq-src { grid-area: src; font-size: .78em; color: var(--muted); min-height: 1em; }
.i2i-acq-tag {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--border-hi); color: var(--muted-hi);
}
.i2i-acq.is-unsure .i2i-acq-tag { border-color: var(--c-amber); color: var(--c-amber); }
.i2i-acq.is-off .i2i-acq-name { color: var(--muted); }
.i2i-acq-detail { margin-left: 4px; word-break: break-all; }
.i2i-link {
    background: none; border: 0; padding: 0; margin-left: 6px;
    color: var(--c-primary); font: inherit; cursor: pointer; text-decoration: underline;
}
.i2i-adv-foot { display: flex; justify-content: flex-end; }
.i2i-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
/* Warnung: Ziel-GSD wird wegen der Rastergrenze verfehlt. */
.i2i-warn {
    padding: 8px 10px;
    border: 1px solid var(--c-amber);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--c-amber) 12%, transparent);
    color: var(--fg);
    font-size: .86em;
}
.i2i-box.has-warn { border-color: var(--c-amber); }
.i2i-box.has-warn .i2i-box-badge { color: var(--c-amber); font-weight: 600; }
.i2i-foot-info.is-warn { color: var(--c-amber); font-weight: 600; }
.i2i-foot { display: flex; align-items: center; gap: 12px; }
.i2i-foot-info { flex: 1; font-size: .8em; color: var(--muted); }

@media (max-width: 560px) {
    .i2i-grid2, .i2i-grid3, .i2i-checks { grid-template-columns: 1fr; }
    .i2i-hole-grid { grid-template-columns: 1fr 1fr; }
    .i2i-bm { grid-template-columns: 1fr; }
    .i2i-acq {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "date" "src";
    }
    .i2i-box-badge { display: none; }
    .i2i-map-table tr { display: grid; grid-template-columns: 1fr auto; }
    .i2i-tagcell { grid-column: 1 / -1; max-width: none; width: auto; }
    .i2i-map-table td + td { padding-left: 10px; border-top: 0; }
    .i2i-clscell { width: auto; }
}
/* Erklaer-Tooltips fuer die Hillshade-Settings. Das "?"-
   Badge ist ein echter Button; der Tooltip ist ein JS-erzeugtes
   position:fixed-Element (.i2i-tip), damit er NICHT vom scrollenden
   .modal-body (overflow:auto) geclippt wird — das native title zeigte
   deshalb nichts. Tooltip erscheint bei Hover UND Klick/Focus. */
/* Global, nicht nur im i2i-Export, mit mehr Abstand zum Text
   und einer Flaeche, die in beiden Themes als Badge lesbar ist. */
.i2i-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid var(--border-hi);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--muted-hi);
    font: 700 10px/1 sans-serif;
    cursor: help;
    vertical-align: middle;
    flex: none;
    -webkit-appearance: none;
    appearance: none;
}
.i2i-hint:hover {
    color: var(--fg);
    border-color: var(--c-primary);
    background: var(--input-bg);
}
.i2i-hint:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
}
.i2i-tip {
    position: fixed;
    z-index: 13000;               /* ueber Modals (2000) + Popups (12000) */
    max-width: 280px;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: 400 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.i2i-tip.visible { opacity: 1; }
/* Die Blase fuer jedes `title` (js/titel-blase.js): dieselbe wie am
   Fragezeichen, Zeilenumbrueche im Titel bleiben stehen. */
.i2i-tip.titel-blase { white-space: pre-line; max-width: 320px; }

/* Layer-Import-Btn nur Icon (analog DB-Import).
 Icon-Tinting via filter, kein Text-Span mehr. */
.layer-import-btn {
    padding: 6px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.layer-import-btn img {
    transition: filter .12s;
}
[data-theme="dark"] .layer-import-btn img {
    filter: invert(1) brightness(2);
}
.layer-import-btn:hover img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(94%)
            saturate(2050%) hue-rotate(166deg) brightness(95%) contrast(101%);
}

/* Bulk-Export-Btn analog zum Import-Btn. Das
 cloud-download-Icon hat im SVG hart fill=#000000, dadurch waere es
 im Dark-Mode unsichtbar. Filter dreht die Farbe pro Theme, Hover
 bekommt den gleichen Cyan-Tint wie der Import-Btn. */
.layer-export-btn {
    padding: 6px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.layer-export-btn img {
    transition: filter .12s;
}
[data-theme="dark"] .layer-export-btn img {
    filter: invert(1) brightness(2);
}
.layer-export-btn:hover img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(94%)
            saturate(2050%) hue-rotate(166deg) brightness(95%) contrast(101%);
}

/* Cloud-Download-Icon der neuen Einzel-Export-
   Buttons (DB-Zeile, Feature-Edit-Modal, Public-View). Das SVG hat hart
   fill=#000000 -> im Dark-Mode invertieren, sonst unsichtbar. Neutral,
   keine eigene Akzentfarbe. */
.dl-cloud-icon { transition: filter .12s; }
[data-theme="dark"] .dl-cloud-icon { filter: invert(1) brightness(2); }

/* Per-Row Export-Cloud-Icon im Load-Layer-Modal ("Layers"-Modal) war im
   Dark-Mode dunkel — anders als der Bulk-Export-Btn (.layer-export-btn)
   hatte .load-modal-row-btn keinen Invert-Filter. */
[data-theme="dark"] .load-modal-row-btn img { filter: invert(1) brightness(2); }

/* Generische Bulk-/Cancel-Akzente
 fuer Modal-Buttons die sonst alle die gleiche ghost-Farbe wie der
 Hintergrund hatten. Werden in Tile-Export-Modal und Layer-Import-
 Duplikate-Modal genutzt. */
.bulk-select-accent {
    background: rgba(70, 170, 90, 0.16) !important;
    color: #1d6a30 !important;
    border-color: rgba(70, 170, 90, 0.55) !important;
}
.bulk-select-accent:hover {
    background: rgba(70, 170, 90, 0.30) !important;
    border-color: rgba(70, 170, 90, 0.80) !important;
}
[data-theme="dark"] .bulk-select-accent {
    background: rgba(70, 170, 90, 0.20) !important;
    color: #88dca0 !important;
}
.bulk-deselect-accent {
    background: rgba(150, 150, 160, 0.16) !important;
    color: #555 !important;
    border-color: rgba(120, 120, 130, 0.45) !important;
}
.bulk-deselect-accent:hover {
    background: rgba(150, 150, 160, 0.28) !important;
    border-color: rgba(120, 120, 130, 0.70) !important;
}
[data-theme="dark"] .bulk-deselect-accent {
    background: rgba(180, 180, 190, 0.10) !important;
    color: #c0c0c8 !important;
    border-color: rgba(180, 180, 190, 0.30) !important;
}
.cancel-accent {
    background: rgba(180, 80, 80, 0.10) !important;
    color: #884444 !important;
    border-color: rgba(180, 80, 80, 0.40) !important;
}
.cancel-accent:hover {
    background: rgba(180, 80, 80, 0.20) !important;
    border-color: rgba(180, 80, 80, 0.65) !important;
}
[data-theme="dark"] .cancel-accent {
    background: rgba(220, 130, 130, 0.10) !important;
    color: #d49b9b !important;
    border-color: rgba(220, 130, 130, 0.32) !important;
}
/* Compare-Modal Bulk-Aktionen als Radio-Pill-
 * Group statt 3 separater Buttons. Hidden native Radios, gestylte Labels
 * als pill-Segmente. Neutraler Default + getintete Accent-Farbe (grau/
 * blau/amber) wenn selected. Hover hebt den Tint dezent an. */
.cmp-bulk-radios {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cmp-bulk-legend {
    color: var(--muted-hi, var(--muted));
    font-size: 0.85em;
    margin-right: 6px;
    padding: 0;
    float: left;
    line-height: 30px;
}
.cmp-bulk-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--fg);
    font-size: 0.88em;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease,
                transform 0.08s ease;
}
.cmp-bulk-pill:hover {
    border-color: var(--border-hi, var(--border));
    background: var(--bg-elevated);
}
.cmp-bulk-pill:active {
    transform: translateY(1px);
}
/* Native Radio versteckt, Pill ist die Hitbox. */
.cmp-bulk-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.cmp-bulk-pill input[type="radio"]:focus-visible + .cmp-bulk-pill-dot {
    outline: 2px solid var(--c-cyan, #3BBDE8);
    outline-offset: 2px;
}
/* Mini-Dot links vom Label, signalisiert Radio-Charakter; fuellt sich
 * bei :checked mit der Pill-Akzent-Farbe. */
.cmp-bulk-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: transparent;
    flex: 0 0 auto;
    transition: background 0.12s ease, transform 0.12s ease;
}
.cmp-bulk-pill input[type="radio"]:checked ~ .cmp-bulk-pill-dot {
    background: currentColor;
    transform: scale(1.08);
}
.cmp-bulk-pill-label { white-space: nowrap; }

/* Skip (grau, neutral) */
.cmp-bulk-pill--skip {
    color: #555;
}
.cmp-bulk-pill--skip:has(input:checked),
.cmp-bulk-pill--skip.is-checked {
    background: rgba(150, 150, 160, 0.22);
    border-color: rgba(120, 120, 130, 0.55);
    color: #444;
    box-shadow: 0 0 0 1px rgba(120, 120, 130, 0.18) inset;
}
[data-theme="dark"] .cmp-bulk-pill--skip {
    color: #c0c0c8;
}
[data-theme="dark"] .cmp-bulk-pill--skip:has(input:checked) {
    background: rgba(180, 180, 190, 0.20);
    border-color: rgba(180, 180, 190, 0.45);
    color: #e0e0e8;
}

/* Rename / Beide behalten (blau) */
.cmp-bulk-pill--rename {
    color: #1f5485;
}
.cmp-bulk-pill--rename:has(input:checked),
.cmp-bulk-pill--rename.is-checked {
    background: rgba(80, 130, 200, 0.22);
    border-color: rgba(80, 130, 200, 0.65);
    color: #1f5485;
    box-shadow: 0 0 0 1px rgba(80, 130, 200, 0.20) inset;
}
[data-theme="dark"] .cmp-bulk-pill--rename {
    color: #88c0e8;
}
[data-theme="dark"] .cmp-bulk-pill--rename:has(input:checked) {
    background: rgba(80, 130, 200, 0.26);
    border-color: rgba(120, 170, 230, 0.70);
    color: #b3d8f5;
}

/* Replace / Ersetzen (amber, leicht warnend) */
.cmp-bulk-pill--replace {
    color: #8a5d10;
}
.cmp-bulk-pill--replace:has(input:checked),
.cmp-bulk-pill--replace.is-checked {
    background: rgba(232, 175, 64, 0.26);
    border-color: rgba(232, 175, 64, 0.75);
    color: #8a5d10;
    box-shadow: 0 0 0 1px rgba(232, 175, 64, 0.25) inset;
}
[data-theme="dark"] .cmp-bulk-pill--replace {
    color: #f0c270;
}
[data-theme="dark"] .cmp-bulk-pill--replace:has(input:checked) {
    background: rgba(232, 175, 64, 0.30);
    border-color: rgba(248, 200, 100, 0.80);
    color: #ffd58a;
}

/* clear-layers Btn ROT damit die destruktive
 Aktion (Drafts verwerfen + alle Layer aus Ansicht entfernen) sich klar
 vom Plus-Btn (gruen) und Load-Btn (lila) absetzt. */
.sidebar-clear-accent {
    background: rgba(220, 80, 80, 0.16) !important;
    color: #993030 !important;
    border-color: rgba(220, 80, 80, 0.45) !important;
}
.sidebar-clear-accent:hover {
    background: rgba(220, 80, 80, 0.32) !important;
    border-color: rgba(220, 80, 80, 0.75) !important;
    color: #7a1f1f !important;
}
.sidebar-clear-accent img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(2400%) hue-rotate(345deg) brightness(95%) contrast(95%);
}
[data-theme="dark"] .sidebar-clear-accent {
    background: rgba(220, 80, 80, 0.20) !important;
    color: #ee9090 !important;
    border-color: rgba(220, 80, 80, 0.55) !important;
}
[data-theme="dark"] .sidebar-clear-accent:hover {
    background: rgba(220, 80, 80, 0.36) !important;
    color: #ffaaaa !important;
}
[data-theme="dark"] .sidebar-clear-accent img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(45%) saturate(580%) hue-rotate(310deg) brightness(102%) contrast(95%);
}

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