@charset "UTF-8";

:root {
    /* --header-bg ist die dunkle Slate-Akzentfarbe, die quer durch die UI
       als Button-/Highlight-Hintergrund wiederverwendet wird (Primary-
       Buttons, Side-Panel-Header, Result-Table-Header etc.) — bleibt
       deshalb dunkel. Für die oberste App-Leiste selbst gibt es davon
       getrennt --app-header-bg/--app-header-fg, damit die Top-Bar leicht
       wirkt, ohne die Akzent-Farbe der Buttons mitzuziehen. */
    --header-bg: #1f2d3d;
    --header-fg: #ffffff;
    --app-header-bg: #f8f9fa;
    --app-header-fg: #1f2d3d;
    --footer-bg: #f8f9fa;
    --footer-fg: #5f6368;
    --link-fg: #2563eb;
    --error-fg: #c5221f;
    --accent:   #2563eb;
    --accent-soft: #e8efff;    /* helles Akzent-Blau für aktive Buttons */
    /* Header bewusst genauso schlank wie der Footer — schmale obere/untere
       Leisten ohne visuelles Übergewicht. Karten-Bereich gewinnt dadurch
       sichtbar mehr Platz. */
    --header-height: 30px;
    --footer-height: 30px;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.10);
    --shadow-2: 0 2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.10);
    --shadow-3: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.12);
    /* Einheitlicher feiner Rahmen für alle Fenster (Side-Panels, Modals,
       Result-Table, Popover). Zentral hier umschaltbar. */
    --window-border: rgba(95, 99, 104, 0.6);
}

* { box-sizing: border-box; }

/* hidden-Attribut soll alle Eigenstyles überschreiben */
[hidden] { display: none !important; }

/* Spinner — Größe per --spinner-size steuerbar (default 24px) */
.spinner {
    --spinner-size: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent, #1a73e8);
}
.spinner--inline { flex-direction: row; gap: 0.4rem; }
.spinner-svg {
    width: var(--spinner-size);
    height: var(--spinner-size);
    animation: spinner-rotate 0.9s linear infinite;
}
.spinner-svg circle {
    stroke: currentColor;
    stroke-dasharray: 70, 100;
    stroke-dashoffset: 0;
    animation: spinner-dash 1.4s ease-in-out infinite;
}
.spinner-label { font-size: 0.875rem; color: #5f6368; line-height: 1; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@keyframes spinner-dash {
    0%   { stroke-dasharray: 5, 100;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 70, 100; stroke-dashoffset: -25; }
    100% { stroke-dasharray: 5, 100;  stroke-dashoffset: -95; }
}

.spinner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    z-index: 50;
    pointer-events: auto;
}

/* Drag-Handle (Titelleisten ziehbarer Fenster) */
.drag-handle { cursor: move; user-select: none; touch-action: none; }
.drag-handle button, .drag-handle input { cursor: auto; }
.is-dragging { opacity: 0.92; }

.window-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
}
.window-reset-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
}
.window-reset-btn svg { width: 14px; height: 14px; }
.window-reset-btn:hover { color: #000; }

.resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    color: #999;
    cursor: nwse-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.resize-handle:hover { color: #444; }
.resize-handle svg { width: 14px; height: 14px; }
.is-resizing { user-select: none; }

/* Horizontale Resize-Variante — Handle mittig am rechten Rand */
.resize-handle--horizontal {
    top: 50%;
    right: 0;
    bottom: auto;
    transform: translateY(-50%);
    width: 8px;
    height: 38px;
    cursor: ew-resize;
}
.resize-handle--horizontal svg { width: 5px; height: 18px; }

/* Vertikale Resize-Variante — Handle mittig am unteren Rand */
.resize-handle--vertical {
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 38px;
    height: 8px;
    cursor: ns-resize;
}
.resize-handle--vertical svg { width: 18px; height: 5px; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #222;
    background: #f7f7f7;
}

body {
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);
    min-height: 100vh;
}

#app-header {
    background: var(--app-header-bg);
    color: var(--app-header-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    /* Schatten weg → der Header wirkt nicht mehr stärker als der Rest.
       Stattdessen eine dünne Border-Bottom in derselben Farbe wie die
       Fenster-Rahmen, damit die Trennlinie zur Karte erkennbar bleibt. */
    border-bottom: 1px solid var(--window-border);
    /* relative damit der zentrierte Tool-Status absolut positioniert werden kann */
    position: relative;
}

/* Zentrierte Anzeige des aktiven Karten-Tools mit Beenden-Button.
 * Liegt absolut über dem Header, kollidiert nicht mit Logo / Header-Buttons.
 * Wird via JS-Helper setActiveTool() / clearActiveTool() ein-/ausgeblendet. */
#header-active-tool {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.02rem 0.35rem 0.02rem 0.55rem;
    /* Heller Akzent-Pill auf hellem Header — dezent abgesetzt durch
       Accent-Soft-Background + dünner Border in window-border-Ton. */
    background: var(--accent-soft);
    border: 1px solid var(--window-border);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--app-header-fg);
    pointer-events: auto;
}
#header-active-tool[hidden] { display: none; }
.header-tool-label {
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.header-tool-close {
    background: transparent;
    color: var(--app-header-fg);
    border: none;
    cursor: pointer;
    padding: 0 0.3rem;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 50%;
}
.header-tool-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

#app-title {
    /* Auf Footer-Schrift abgestimmt, damit der Header in 30px-Höhe nicht
       überquillt. Vorher 1.125rem (≈18px) → jetzt 0.875rem (≈14px). */
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

.header-btn {
    /* Heller Header → Buttons brauchen jetzt dunkle Linie + dunklen Text,
       sonst wären sie unsichtbar (vorher hatten sie weiße rgba-Schichten,
       die auf dunklem Header funktionierten).
       Padding bewusst klein damit der 30px-Header nicht aufgebläht wird. */
    background: transparent;
    color: var(--app-header-fg);
    border: 1px solid var(--window-border);
    border-radius: 3px;
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: pointer;
}
.header-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.header-btn--admin {
    /* Goldener Admin-Knopf — auf hellem Header etwas dunkler getönt,
       damit der Akzent sichtbar bleibt. */
    background: #fff4cc;
    border-color: #d9a91f;
    color: #7a5800;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.header-btn--admin:hover {
    background: #ffe89a;
    color: #5a3f00;
}
/* Admin-Modal: feste Default-Größe + resizable. Min-Werte verhindern
   ein zerquetschtes Layout, max-Werte halten es im Viewport. */
.login-modal--admin {
    width: min(1000px, 94vw);
    height: min(820px, 92vh);
    max-height: none;
    min-width: 760px;
    min-height: 520px;
    max-width: 96vw;
    overflow: hidden;
    resize: both;
    display: flex;
    flex-direction: column;
}
.login-modal--admin > .chart-modal-header { flex: 0 0 auto; }
.login-modal--admin > .admin-body { flex: 1 1 auto; min-height: 0; }
/* Optik orientiert am GismoPortal admin-dashboard.css:
 * Brand-Color #005084, Cards mit border-radius 14px + Shadow, Tabs
 * mit aktivem Brand-Underline, leicht grauer Modal-Body-Hintergrund. */
.admin-body {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    min-height: 0;
    overflow: hidden;
    background: #f1f3f4;
}
.admin-body .btn-primary { width: auto; }
.admin-action-btn {
    background: #005084;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.admin-action-btn:hover { background: #003e66; }
.admin-action-btn--ghost {
    background: transparent;
    color: #005084;
    border: 1px solid #005084;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.admin-action-btn--ghost:hover { background: rgba(0, 80, 132, 0.08); }
/* Linke, vertikale Navigations-Seitenleiste mit Gruppen-Überschriften.
   Eigene Scrollspur, damit lange Gruppenlisten unabhängig vom Inhalt scrollen. */
.admin-nav {
    flex: 0 0 210px;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #d8dbe2;
    padding: 0.5rem 0.4rem;
}
.admin-nav-group { margin-bottom: 0.6rem; }
.admin-nav-group-title {
    color: #80868b;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 0.6rem 0.25rem;
}
/* Tab-Buttons im Sidebar-Kontext: volle Breite, linke Akzentkante statt
   Unterstrich. Klasse/Attribut bleiben für die JS-Umschaltung unverändert. */
.admin-nav .admin-tab {
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    color: #5f6368;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    margin: 1px 0;
    transition: color 0.15s, background 0.15s, border-left-color 0.15s;
    /* Icon + Label nebeneinander; Icon nimmt currentColor → Brand-Farbe bei aktiv. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    text-align: left;
}
.admin-tab-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}
.admin-nav .admin-tab:hover { color: #005084; background: rgba(0,0,0,0.03); }
.admin-nav .admin-tab.is-active {
    color: #005084;
    border-left-color: #005084;
    background: rgba(0, 80, 132, 0.08);
    font-weight: 700;
}
/* Rechter Inhaltsbereich: Toolbar oben, dann das aktive Panel, dann Statuszeile. */
.admin-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-content-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.3rem 0.5rem;
    flex: 0 0 auto;
}
/* Toolbar einklappen, wenn der einzige Inhalt (Refresh-Button) ausgeblendet
   ist (Aktionen/iframe-Tabs) — kein leerer Streifen über dem Panel. */
.admin-content-toolbar:has(> .admin-tab-refresh[hidden]) { display: none; }
.admin-tab-refresh {
    background: transparent;
    border: 1px solid #d8dbe2;
    border-radius: 6px;
    color: #5f6368;
    cursor: pointer;
    padding: 0.2rem 0.55rem;
    font-size: 1rem;
}
.admin-tab-refresh:hover { background: rgba(0,0,0,0.04); color: #005084; }
.admin-tab-panel {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.85rem;
}
.admin-tab-panel--log {
    /* Eigene Layout-Variante: die Section muss flexen, damit das iframe
     * den verbleibenden Platz ausfüllt — sonst kollabiert das iframe. */
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
}
.admin-log-frame-inline {
    flex: 1 1 auto;
    width: 100%;
    border: 1px solid #d8dbe2;
    border-radius: 8px;
    background: #fff;
    min-height: 0;
}
.admin-section {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.admin-section h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #005084;
    border-bottom: 2px solid #005084;
    padding-bottom: 0.4rem;
}
.admin-section-desc {
    margin: 0 0 0.7rem;
    color: #5f6368;
    font-size: 0.8125rem;
    line-height: 1.4;
}
/* Editor-Forms innerhalb der Sections */
.admin-edit-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.85rem;
    align-items: center;
}
.admin-edit-row {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.85rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.admin-edit-label {
    font-size: 0.8125rem;
    color: #5f6368;
    font-weight: 600;
}
.admin-edit-input {
    padding: 0.4rem 0.6rem;
    background: #f1f3f4;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.admin-edit-input:focus {
    outline: none;
    border-color: #005084;
    background: #fff;
}
.admin-edit-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    font-size: 0.875rem;
    cursor: pointer;
}
/* Berechtigungen-Gruppe — sitzt in der input-Spalte einer admin-edit-row
   und legt die 3 Checkboxen horizontal nebeneinander. */
.admin-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
}
/* Radio-Gruppe (Update-Intervall) — vertikal in der input-Spalte. */
.admin-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.admin-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    cursor: pointer;
}
/* Deaktivierte Eingabefelder (kontextabhängig, z.B. Wochentag bei „täglich")
   sichtbar ausgrauen — analog zum Desktop-Dialog. */
.admin-edit-input:disabled {
    color: #9aa0a6;
    background: #e8eaed;
    cursor: not-allowed;
}
/* Volle Breite mit Label oberhalb — für Felder wo das Grid-Label-Input-Layout
   zu eng wäre (Collections-Picker, Textarea-Inputs). */
.admin-edit-row--full {
    display: block;
    margin-bottom: 0.8rem;
}
.admin-edit-row--full > .admin-edit-label {
    display: block;
    margin-bottom: 0.35rem;
}
.admin-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.85rem;
}
.admin-edit-hint {
    font-size: 0.75rem;
    color: #b06814;
    background: #fff7e6;
    border-left: 3px solid #f59e0b;
    padding: 0.35rem 0.6rem;
    margin: 0.4rem 0 0;
    border-radius: 4px;
}
/* User-Tabelle: kompaktere Action-Buttons */
.admin-action-btn--small {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    border-radius: 6px;
}
.admin-action-btn--danger {
    background: #c0392b;
}
.admin-action-btn--danger:hover { background: #962b1f; }
.admin-action-btn:disabled,
.admin-action-btn--small:disabled {
    background: #b4b4b4;
    cursor: not-allowed;
}

/* ── Spalten-Profile-Tab ─────────────────────────────────────────────
   Zwei-Spalten-Layout: links Profil-Liste, rechts Editor mit Drag&Drop. */
.admin-colprof-root {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1rem;
    padding: 0.5rem 0;
}
.admin-colprof-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* Sub-Überschrift innerhalb der .admin-section-Karte: schlicht halten, nicht
   das große Brand-Underline der Section-Header erben. */
.admin-colprof-list h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #1f2d3d;
    border-bottom: 0;
    padding-bottom: 0;
}
.admin-colprof-profiles { list-style: none; padding: 0; margin: 0; }
.admin-colprof-profile-item {
    border-bottom: 1px solid #e5e7eb;
}
.admin-colprof-profile-item.is-active {
    background: var(--accent-soft);
}
.admin-colprof-profile-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    color: #1f2d3d;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.admin-colprof-profile-btn:hover { background: rgba(0,0,0,0.04); }
.admin-colprof-user-badge {
    background: rgba(95,99,104,0.18);
    color: #475569;
    border-radius: 999px;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    line-height: 1.4;
    min-width: 1.5em;
    text-align: center;
}
.admin-colprof-editor { min-width: 0; }
.admin-colprof-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.admin-colprof-editor-head h3 {
    margin: 0;
    font-size: 1rem;
    color: #1f2d3d;
    border-bottom: 0;
    padding-bottom: 0;
}
.admin-colprof-head-actions { display: inline-flex; gap: 0.4rem; }

/* Spalten-Liste = horizontaler Scroll-Container, damit bei zu schmalem
   Admin-Modal die Tabelle scrollbar bleibt statt zu zerreißen. Der User
   kann das Modal selbst mit dem unten-rechts-Resize-Handle weiter aufziehen,
   und wenn das nicht reicht, schiebt der scroll der Reihe nach Spalten ins
   Sichtfeld. */
.admin-colprof-cols-scroll {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--window-border);
    border-radius: 4px;
    margin: 0.5rem 0;
}
.admin-colprof-cols {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Mindestbreite damit der horizontale Scroll wirkt sobald der
       Container kleiner ist als die fix-breiten Zellen + flexible Title-
       Spalte. */
    min-width: max-content;
}
/* Pro Zeile dasselbe Grid mit denselben FIXEN Pixel-Breiten — so
   richten sich die Spalten von Zeile zu Zeile sauber aus (statt mit
   fr-Anteilen unterschiedlich zu stretchen).

   handle | title-input | md-key | format-select | ellipsis | visible-cb | remove */
.admin-colprof-col-row {
    display: grid;
    grid-template-columns: 24px minmax(180px, 1fr) 180px 180px 70px 90px 28px;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.55rem;
    border-bottom: 1px solid #eee;
    background: #fff;
    min-width: max-content;
}
.admin-colprof-col-row:last-child { border-bottom: 0; }
.admin-colprof-col-row.is-dragging { opacity: 0.4; }
.admin-colprof-col-row.is-drag-over { background: var(--accent-soft); }
.admin-colprof-handle {
    cursor: grab;
    color: #94a3b8;
    user-select: none;
    font-weight: bold;
    letter-spacing: -1px;
}
.admin-colprof-handle:active { cursor: grabbing; }
.admin-colprof-title-input {
    padding: 0.15rem 0.4rem;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    font-size: 0.85rem;
    min-width: 0; /* damit das input im grid schrumpfen darf */
}
.admin-colprof-title-input:placeholder-shown {
    /* leerer Custom-Titel → optisch dezenter (zeigt den Default als
       Placeholder, der gleich der lokalisierte Standard-Titel ist) */
    color: #6b7280;
}
.admin-colprof-col-key {
    color: #94a3b8;
    font-size: 0.72rem;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.admin-colprof-format {
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    min-width: 0;
}
.admin-colprof-format:disabled {
    background: #f1f3f4;
    color: #94a3b8;
    cursor: not-allowed;
}
.admin-colprof-ellipsis {
    width: 60px;
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    text-align: right;
}
.admin-colprof-ellipsis:disabled {
    background: #f1f3f4;
    color: #94a3b8;
    cursor: not-allowed;
}
.admin-colprof-vis {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #475569;
    white-space: nowrap;
}
.admin-colprof-remove {
    background: transparent;
    border: 1px solid transparent;
    color: #c5221f;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
}
.admin-colprof-remove:hover {
    border-color: #c5221f;
    background: rgba(197,34,31,0.06);
}

/* Suchoptionen-Tab: einfache Facetten-Checkbox-Liste. */
.admin-facets-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.6rem 0;
    max-width: 420px;
}
.admin-facet-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--window-border);
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}
.admin-facet-row:hover { background: rgba(0,0,0,0.03); }
.admin-facet-label { font-size: 0.9rem; color: #1f2d3d; }
.admin-facet-key {
    color: #94a3b8;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-colprof-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem 0;
    flex-wrap: wrap;
    position: relative;
}
.admin-colprof-save { margin-top: 0.4rem; }

/* Multi-Select-Popover für den Spalten-Picker. fixed positioniert mit
   JS-Koordinaten (oben/links — Flip nach oben am Viewport-Rand). */
.admin-colprof-picker-popover {
    background: #fff;
    border: 1px solid var(--window-border);
    border-radius: 6px;
    box-shadow: var(--shadow-3);
    padding: 0.6rem;
    min-width: 360px;
    max-width: 480px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    /* Höher als Admin-Modal-Overlay (.login-overlay üblicherweise z-index 20–50),
       damit das Picker-Popover sicher oben liegt, auch wenn es sich aus dem
       Admin-Modal heraus an den body anhängt. */
    z-index: 300;
}
.admin-colprof-picker-head { margin-bottom: 0.4rem; }
.admin-colprof-picker-search {
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    font-size: 0.85rem;
}
.admin-colprof-picker-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.admin-colprof-picker-group {
    border: 0;
    padding: 0.2rem 0;
    margin: 0 0 0.4rem 0;
}
.admin-colprof-picker-group legend {
    font-weight: 600;
    font-size: 0.78rem;
    color: #5f6368;
    padding: 0 0 0.15rem 0;
}
.admin-colprof-picker-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.85rem;
}
.admin-colprof-picker-item:hover { background: rgba(0,0,0,0.04); }
.admin-colprof-picker-item code {
    color: #94a3b8;
    font-size: 0.72rem;
}
.admin-colprof-picker-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid #e5e7eb;
}
.admin-colprof-picker-counter {
    flex: 1;
    color: #475569;
    font-size: 0.78rem;
}
.admin-user-table td { vertical-align: middle; }
/* Status-Badges (Admin/Aktiv/Download) — kompakt mit Farb-Codierung. */
.admin-user-status { white-space: nowrap; }
.admin-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin-right: 0.25rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.6;
    background: #e8efff;
    color: #2563eb;
}
.admin-badge--admin    { background: #fde8e8; color: #c0392b; }
.admin-badge--active   { background: #e6f7e9; color: #1f7a36; }
.admin-badge--download { background: #f1f3f4; color: #5f6368; }

/* Aktions-Zelle der User-Tabelle: Icon-Buttons nebeneinander. */
.admin-user-actions { white-space: nowrap; }
.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 0.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #5f6368;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-icon-btn:hover {
    background: #f1f3f4;
    color: #005084;
    border-color: #d8dbe2;
}
.admin-icon-btn:disabled {
    color: #c0c4ca;
    cursor: not-allowed;
}
.admin-icon-btn:disabled:hover {
    background: transparent;
    color: #c0c4ca;
    border-color: transparent;
}
.admin-icon-btn--danger:hover {
    color: #c0392b;
    border-color: #f5c6c0;
    background: #fdf3f2;
}
.admin-icon-btn svg { width: 18px; height: 18px; }

/* User-Edit-Dialog (Modal-Overlay über dem Admin-Modal). */
.admin-user-edit-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.admin-user-edit-dialog {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-3);
    width: min(560px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-user-edit-body {
    padding: 1rem 1.25rem 0.5rem;
    overflow: auto;
}
.admin-user-edit-dialog .admin-edit-actions {
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid #eee;
    background: #fafafa;
    margin-top: 0;
}
.admin-edit-hint--info {
    background: #eaf2ff;
    color: #1f4ce8;
    border-left-color: #2563eb;
}
/* Abbrechen-Button im Edit-Dialog — bewusst nicht gerundet, damit er sich
   visuell vom Primär-Button (Speichern, abgerundet) abhebt. Ghost-Look:
   nur Border, transparent, kein Background. */
.admin-cancel-btn {
    background: transparent;
    color: #5f6368;
    border: 1px solid #d8dbe2;
    border-radius: 0;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-cancel-btn:hover {
    background: #f1f3f4;
    border-color: #9aa0a6;
    color: #202124;
}

/* wmsPass-Box im Edit-Dialog: Wert + Regenerate-Button nebeneinander */
.admin-wmspass-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-wmspass-box code {
    flex: 1;
    background: #f1f3f4;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    overflow-x: auto;
}
.admin-user-pw,
.admin-user-wmspass {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: #5f6368;
}
.admin-user-collections {
    font-size: 0.75rem;
    color: #5f6368;
}
/* Collections-Picker (Create-Form + Popover) */
.admin-edit-row--top { align-items: start; }
.admin-collections-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    max-height: 8rem;
    overflow: auto;
    padding: 0.4rem 0.6rem;
    background: #f1f3f4;
    border: 2px solid transparent;
    border-radius: 6px;
}
.admin-collection-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
}
/* Popover für Collection-Edit pro User-Zeile */
.admin-popover {
    background: #fff;
    border: 1px solid #d8dbe2;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 0.6rem 0.7rem;
    z-index: 200;
    min-width: 240px;
    max-width: 320px;
}
.admin-popover-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #005084;
    margin-bottom: 0.4rem;
}
.admin-popover-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 10rem;
    overflow: auto;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eceef2;
    margin-bottom: 0.5rem;
}
.admin-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}
.admin-empty {
    color: #5f6368;
    font-style: italic;
    padding: 0.5rem 0;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eceef2;
    vertical-align: top;
}
.admin-table th {
    background: #f8f9fb;
    color: #5f6368;
    font-weight: 600;
}
.admin-table td:first-child { font-family: ui-monospace, Consolas, monospace; }
.admin-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.85rem;
    margin: 0;
}
.admin-dl dt { color: #5f6368; }
.admin-dl dd {
    margin: 0;
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
}

/* (Server-Log-Modal-Regeln stehen am Ende der Datei, damit sie die
   späteren `.chart-modal`-Defaults überschreiben — siehe unten.) */

/* „In neuem Tab öffnen"-Link in Modal-Headern (z.B. Server-Log) — kompakt,
   gleiche Grundoptik wie der Schließen-Button. */
.header-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    color: #666;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    border-radius: 3px;
    cursor: pointer;
}
.header-link-btn:hover {
    color: #222;
    background: #f0f0f0;
}

#app-footer .footer-left {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

#map-status {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #475569;
    padding: 0.1rem 0.6rem;
    line-height: 1.2;
    pointer-events: none;
    font-size: 0.75rem;
}

#map-scale-line {
    display: inline-flex;
}

/* ScaleLine im Footer statt overlay auf der Karte */
#map-scale-line .ol-scale-line {
    position: static;
    background: transparent;
    padding: 0;
}
#map-scale-line .ol-scale-line-inner {
    color: #64748b;
    border-color: #94a3b8;
    border-width: 1px;
    font-size: 0.7rem;
    line-height: 1.3;
    padding: 0 0.25rem;
}

.custom-mouse-position {
    font-family: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
    font-size: 0.7rem;
    color: #64748b;
    min-width: 20ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Umschalter für das Koordinaten-Anzeigeformat (WGS84/GMS ↔ UTM 32N).
   #map-status hat pointer-events:none — hier wieder aktivieren, sonst
   ist der Button nicht klickbar. */
.coord-format-toggle {
    pointer-events: auto;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    line-height: 1.3;
    color: #475569;
    background: #eef1f4;
    border: 1px solid #cdd3da;
    border-radius: 4px;
    padding: 0 0.4rem;
    white-space: nowrap;
}
.coord-format-toggle:hover { background: #e2e8f0; color: #005084; }

.copyright {
    color: #5f6368;
}

/* Search-Bar oben (Google-Maps-Stil: pillenförmig, mit Schatten) */
.map-search-bar {
    position: absolute;
    top: 0.75rem;
    left: 4rem;           /* rechts neben Map-Dock */
    z-index: 6;
    width: min(440px, calc(100% - 5rem));
}
.map-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 999px;
    padding: 0.55rem 0.6rem 0.55rem 1.1rem;
    box-shadow: var(--shadow-2);
    transition: box-shadow 0.2s ease;
}
.map-search-form:focus-within {
    border-color: rgba(37,99,235,0.4);
    box-shadow: var(--shadow-3);
}
.map-search-submit {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    color: #5f6368;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.map-search-submit:hover { background: #f1f3f4; color: #202124; }
.map-search-icon {
    width: 18px;
    height: 18px;
    color: currentColor;
    flex-shrink: 0;
}
.map-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: #202124;
    min-width: 0;
}
.map-search-input::placeholder { color: #5f6368; }
.map-search-options {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    color: #5f6368;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.map-search-options:hover { background: #f1f3f4; color: #202124; }
.map-search-options[aria-expanded="true"] { color: #1a73e8; background: #e8f0fe; }
.map-search-options svg { width: 16px; height: 16px; opacity: 0.78; }
.map-search-options:hover svg,
.map-search-options[aria-expanded="true"] svg { opacity: 1; }

/* Aktive-Filter-Pille: kleines rundes Badge, leicht über dem Filter-Icon
 * sitzend (nur die obere-rechte Ecke des Icons überlappt). Signalisiert,
 * dass eine Quick-Search heimlich gefilterte Treffer liefert. */
.map-search-options-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border: 1.5px solid #fff;
    box-sizing: content-box;
    pointer-events: none;
}
.map-search-options-badge[hidden] { display: none; }

.map-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 320px;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    z-index: 7;
}
.map-search-suggestions li {
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #202124;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.map-search-suggestions li:hover,
.map-search-suggestions li[aria-selected="true"] {
    background: #f1f3f4;
}
.map-search-suggestions .suggestion-empty {
    cursor: default;
    color: #5f6368;
    font-style: italic;
}

/* Vertikales Dock rechts (Werkzeuge) — kompakt, Icons-only */
.map-dock {
    position: absolute;
    top: 4rem;          /* unter Map-Bar */
    left: 0.5rem;
    z-index: 3;         /* unter Side-Panels (5) + Modals (10) — Headings
                           wie „INTERAKTIV" sind breiter als die Buttons und
                           ragen sonst in die Dialog-Spalte rechts hinein */
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    align-items: flex-start;
}
.map-dock-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
}
.map-dock-heading {
    margin: 0 0 0.15rem 0.1rem;
    padding: 0 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1f2937;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    background: transparent;
}

.map-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 0;
    width: 38px;
    height: 38px;
    color: #475569;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.15s, color 0.15s, background 0.15s, transform 0.06s;
    position: relative;
}
.map-dock-btn:hover {
    box-shadow: var(--shadow-2);
    color: #1f2d3d;
    /* Etwas dunklerer Hintergrund beim Hover, damit der Button auch ohne
     * Fokus sichtbar reagiert. Inaktive Buttons werden hellgrau, aktive
     * Buttons (mit Akzent-Hintergrund) behalten ihr `--accent-soft`. */
    background: #eef2f6;
}
.map-dock-btn.is-active:hover,
.map-dock-btn[aria-pressed="true"]:hover,
.map-dock-btn[aria-expanded="true"]:hover {
    /* Aktive Buttons leicht dunklerer Akzent-Ton beim Hover */
    background: color-mix(in srgb, var(--accent-soft) 85%, #000);
}
.map-dock-btn:active { transform: scale(0.95); }
.map-dock-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Labels in der Sidebar nicht mehr darstellen — Tooltip reicht */
.map-dock-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Aktive Map-Dock-Buttons: einheitliche Hervorhebung mit Stroke + Glow,
 * unabhängig vom Tool. Ersetzt die zuvor uneinheitlichen Einzelregeln
 * (z.B. Mask hatte als einziger inset-Stroke, Pan/Rect-Zoom nur Akzent-BG).
 * `box-shadow: inset 2px Akzent + 6px Glow` macht den aktiven Zustand auf
 * jedem Hintergrund auf einen Blick erkennbar. */
.map-dock-btn.is-active,
.map-dock-btn[aria-pressed="true"],
.map-dock-btn[aria-expanded="true"] {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow:
        inset 0 0 0 2px var(--accent),
        0 0 6px rgba(37, 99, 235, 0.35);
}

/* Map-Dock-Group: nur logisches Mutex, visuell wie normale Button-Liste
 * (gleiche Abstände wie andere Section-Buttons). */
.map-dock-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* Buttons mit Klick-Pointer-Hinweis (Zeitreihe, Profilschnitt, Info) — gleiche
 * Optik wie andere Dock-Buttons. Der kleine Pfeil-Cursor ist schon im SVG. */
.map-dock-btn--draw[aria-pressed="true"] svg { color: var(--accent); }
/* Maskierungs-Tool — aktiver Zustand in Mask-Magenta, damit es sich farblich
 * vom Akzentblau der anderen Draw-Tools absetzt. */
/* Maskierung — visuelle Sonderbehandlung damit der Button sich farblich
 * vom Akzent-Blau der anderen Draw-Tools (Zeitreihe / Profilschnitt / Info)
 * abgrenzt. Auch im INAKTIVEN Zustand bereits dezent magenta, damit der
 * Maskierungs-Zweck klar erkennbar ist. */
.map-dock-btn--mask svg { color: rgba(120, 20, 140, 0.70); }
.map-dock-btn--mask:hover svg { color: rgba(120, 20, 140, 0.95); }
.map-dock-btn--mask[aria-pressed="true"] svg { color: rgba(120, 20, 140, 1); }
/* Mask-Aktiv überschreibt den generischen Akzent-Stroke mit Magenta —
 * konsistent zur Mask-Farbcodierung. Glow analog zum generischen Pattern. */
.map-dock-btn--mask[aria-pressed="true"] {
    border-color: rgba(232, 52, 235, 0.6);
    box-shadow:
        inset 0 0 0 2px rgba(232, 52, 235, 0.6),
        0 0 6px rgba(232, 52, 235, 0.35);
}
.map-control-btn:hover {
    background: #fff;
    border-color: #888;
}
.map-control-btn[aria-expanded="true"] {
    background: var(--header-bg);
    color: var(--header-fg);
    border-color: var(--header-bg);
}

/* Side-Panel (Layer-Tree + Suche, Google-Maps-Stil) */
.side-panel {
    position: absolute;
    top: 4.5rem;
    z-index: 5;
    width: 320px;
    max-height: calc(100% - 5.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--window-border);
    border-radius: 10px;
    box-shadow: var(--shadow-3);
}
.side-panel-header { flex-shrink: 0; }
.side-panel > *:not(.side-panel-header) {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
/* Layer-Tree/Legende/Downloads: gleicher Links-Anker wie Erweiterte
   Suche, aber schmaler (300 px Standard) — sie sind sekundäre Werkzeuge.
   Default-Position unter der Map-Bar. Class-Name `--right` ist historisch
   (HTML-Refactor wäre größer als nötig) — heute heißt's „rechts der
   Map-Dock-Spalte", praktisch identisch zur left-Variante. */
.side-panel--right { left: 4rem; right: auto; width: 300px; }
/* Erweiterte Suche: initial 540 px breit (Container ~516 px → 2-Spalten-
   Grid triggert sicher), Initial-Höhe 60% − 5.25rem so dass das Panel die
   Result-Table-Zone (untere 40 %) freihält. `height` (nicht `max-height`),
   damit der User per Resize-Handle größer ziehen kann — max-height aus
   .side-panel (calc(100% − 5.5rem)) gilt weiterhin als oberes Limit. */
.side-panel--left  { left: 4rem; width: 540px; height: calc(60% - 5.25rem); }

/* Legende: linksbündig mit Erweiterter Suche / Layer-Tree, etwas breiter
   als der Layer-Tree weil Legenden-Einträge oft längere Labels haben. */
#legend-panel.side-panel--right {
    left: 4rem;
    right: auto;
    width: 360px;
    max-height: 50vh;
}

.side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
}
.side-panel-header h2 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
}
.side-panel-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    /* Klickfläche bewusst großzügig: das X selbst ist nur ~14×14 px,
       aber die Hitbox ist 28×24 px — Treffer geht auch knapp daneben. */
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 3px;
}
.side-panel-close:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.06);
}

/* Search-Form */
#search-content {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#search-content form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.5rem;
}
/* .search-filters ist nur noch ein vertikaler Flex-Container: die Filter-
   Reihen (FTS, Geom, Zeit) sitzen oben mit fester Höhe; der Multi-Filter-
   Bereich darunter dehnt sich auf den restlichen Platz. So wachsen bei
   Frame-Resize ausschließlich die <select multiple>-Elemente — Abstände
   und Reihen-Höhen bleiben konstant.

   container-type: size sitzt HIER (nicht auf .search-filters-multi),
   weil @container-Queries die Größe des nächsten *Vorfahren*-Containers
   lesen. Hätte ich's auf .search-filters-multi gesetzt, würde die Query
   dessen Eltern abfragen (was wir nicht wollen). */
#search-content .search-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;     /* Scroll erfolgt drinnen im Multi-Grid, falls nötig */
    container-type: size;
}
/* Multi-Filter-Bereich: Grid. Rows mit `minmax(110px, 1fr)` — jede Row ist
   mindestens 110 px (Label + minimaler Select), sodass Inhalt nicht aus der
   Zelle in die nachfolgende rauslappt. Extra-Platz wird als 1fr verteilt,
   sodass die Selects gleichmäßig wachsen wenn der Frame größer wird. */
#search-content .search-filters-multi {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(110px, 1fr);
    gap: 0.5rem 0.6rem;
    overflow: auto;
}
/* Wide-Panel: ab 440 px Container-Breite (= .search-filters) 2 Spalten,
   ab 720 px 3 Spalten. Auf 540 px Default-Panel → Container ~516 px →
   2-Spalten triggert sicher. */
@container (min-width: 440px) {
    #search-content .search-filters-multi { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 720px) {
    #search-content .search-filters-multi { grid-template-columns: repeat(3, 1fr); }
}
/* Schmal + niedrig (typisch compact-mode mit 300 px Panel-Breite): es
   würde sonst vertikal scrollen. Datenart + Unterkategorie wandern als
   Paar nebeneinander, Datensammlung + Datenbank bleiben volle Breite —
   die beiden haben den meisten Inhalt und brauchen die Breite zum Lesen. */
@container (max-width: 439px) and (max-height: 400px) {
    #search-content .search-filters-multi {
        grid-template-columns: 1fr 1fr;
    }
    #search-content .search-filters-multi > [data-key="collection"],
    #search-content .search-filters-multi > [data-key="database"] {
        grid-column: 1 / -1;
    }
}
.search-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.6rem;
}
.search-row #search-input {
    grid-column: 1 / -1;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 0.875rem;
}
.search-row #search-submit {
    grid-column: 1 / -1;
}
.btn-primary {
    background: var(--header-bg);
    color: var(--header-fg);
    border: 1px solid var(--header-bg);
    border-radius: 3px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.btn-primary:hover {
    filter: brightness(1.1);
}
/* Sekundär-Button im Login-Dialog: schlicht-outlined, klar als Alternative
   zur Primärfarbe erkennbar. Sitzt unter dem „Anmelden"-Submit. */
.login-cancel-btn {
    margin-top: 0.4rem;
    width: 100%;
    background: transparent;
    color: #5f6368;
    border: 1px solid #cdd3da;
    border-radius: 3px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.login-cancel-btn:hover { background: #f1f3f4; color: #1f2d3d; }
/* Kein eigener Rahmen — der Side-Panel-Header ist bereits sichtbares Tile. */
.search-filters {
    border: none;
    padding: 0;
    margin: 0;
}
.search-filters legend { display: none; }
.filter-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0;
    font-size: 0.8125rem;
}
.filter-row select, .filter-row input[type="date"] {
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0.3rem;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    font-size: 0.8125rem;
}
.filter-row .dash { color: #888; }

/* Aktions-Reihe unterhalb der Filter — Reset links, Suche rechts. */
.search-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.search-actions .btn-secondary {
    background: transparent;
    color: #5f6368;
    border: 1px solid #d8dbe2;
    border-radius: 4px;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.search-actions .btn-secondary:hover {
    background: #f1f3f4;
    border-color: #9aa0a6;
}

/* Shake-Animation für „0 Treffer" — Such-Panel kurz horizontal wackeln. */
@keyframes search-shake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-8px); }
    30%  { transform: translateX(7px); }
    45%  { transform: translateX(-5px); }
    60%  { transform: translateX(4px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.side-panel.is-shake { animation: search-shake 0.42s ease; }

/* Hervorhebung der Filter, die zur leeren Trefferliste beigetragen haben.
 * Greift sowohl auf einzelne `.filter-row`-Filter als auch auf die
 * Multi-Select-Container. Verschwindet beim nächsten Suchstart oder bei
 * der ersten Änderung an der zugehörigen Checkbox. */
.filter-row.is-empty-warn,
.filter-multi.is-empty-warn {
    background: #fff7e6;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    padding-left: 0.5rem;
    transition: background 0.25s;
}

/* In einer Grid-Zelle des .search-filters-multi. Flex-Column intern: Label
   + (optional Suchfeld) + Select. Select bekommt flex:1 → wächst, wenn die
   Grid-Zelle wächst. Andere Elemente behalten ihre intrinsische Höhe. */
.filter-multi {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0.25rem;
}
/* Abstand Checkbox-Label → Liste halbiert (gegen das alte 0.5 rem). */
.filter-multi > .filter-row {
    margin-bottom: 0;
}
.filter-multi select[multiple] {
    width: 100%;
    flex: 1;
    min-height: 80px;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 0.15rem;
    font-size: 0.8125rem;
    background: #fff;
}
.filter-multi select[multiple] option:checked {
    background: #1a73e8 linear-gradient(0deg, #1a73e8 0%, #1a73e8 100%);
    color: #fff;
}
.filter-multi input[type="search"] {
    width: 100%;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 0.25rem 0.45rem;
    font-size: 0.8125rem;
}

.search-status {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    min-height: 1.2em;
}
.search-status.busy  { color: #666; }
.search-status.ok    { color: #155724; }
.search-status.warn  { color: #856404; }
.search-status.error { color: #721c24; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Ergebnis-Tabelle (Bottom-Panel) — linksbündig mit Map-Bar/Erweiterter
   Suche. Breite vom Inhalt bestimmt, gekappt an Viewport. */
.result-table-panel {
    position: absolute;
    left: 4rem;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 5rem);
    bottom: 0.75rem;
    z-index: 5;
    height: 40%;
    min-height: 200px;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--window-border);
    border-radius: 10px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.result-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
}
.result-table-header h2 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
}
#result-table-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.result-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: 0.8125rem;
    min-width: 0;
}
.result-toolbar > * { flex-shrink: 0; }
.result-search { flex: 1 1 200px; min-width: 0; }
.result-search input { width: 100%; min-width: 0; }
.result-info { color: #555; }
.result-spacer { flex: 1; }
.result-search {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    overflow: hidden;
}
.result-search input {
    padding: 0.2rem 0.4rem;
    border: none;
    font-size: 0.8125rem;
    outline: none;
    flex: 1;
    min-width: 0;
}
.result-filter-col {
    border: none;
    border-left: 1px solid #d8d8d8;
    background: #fafafa;
    font-size: 0.75rem;
    padding: 0 0.4rem;
    max-width: 7em;
    cursor: pointer;
}
.result-filter-col:focus { outline: none; background: #fff; }

.result-table-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
.result-table {
    width: 100%;
    /* `separate` statt `collapse` — sonst greift `position: sticky` auf
     * einzelnen <th>-Zellen in Chrome/Edge nicht zuverlässig (bekannter
     * Renderer-Bug). Mit border-spacing:0 sieht es weiterhin wie ein
     * Collapse-Layout aus. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}
/* Sticky-Header: doppelt abgesichert — einmal auf <thead> (moderne
 * Browser, robust gegen Cell-Level-Bugs) und auf <th> (Fallback für
 * Browser, die `position:sticky` auf <thead> ignorieren). Beide auf
 * `top:0`, damit beim vertikalen Scroll die Header in der scrollenden
 * Tabellen-Wrapper-Box hängen bleiben. */
.result-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}
.result-table thead tr {
    position: sticky;
    top: 0;
    z-index: 3;
}
.result-table thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    /* Mit border-collapse:separate werden Borders nicht mehr automatisch
     * geteilt — daher hier oben + unten explizit setzen. */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ccc;
    /* Box-Shadow nach unten als Trennlinie, die auch bei Sub-Pixel-
     * Rounding kein durchscheinendes Body-Pixel zulässt. */
    box-shadow: inset 0 -1px 0 #ccc;
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    color: #333;
    z-index: 3;
    white-space: nowrap;
    user-select: none;
}
.result-table thead th.sortable {
    cursor: pointer;
    padding-right: 1.4rem;
    position: relative;
}
.result-table thead th.sortable:hover {
    background: #f0f0f0;
}
/* Sort-Indikator als SVG (data-URI) — robust gegen Charset-Probleme.
 * Default: neutrale Doppelpfeile (grau), aktiv: hoch oder runter (dunkel). */
.result-table thead th.sortable::after {
    content: "";
    position: absolute;
    right: 0.45rem;
    top: 50%;
    width: 10px;
    height: 12px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    /* Doppelpfeil (neutral) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='%23bbb'><path d='M5 0 L1 4 H9 Z M5 12 L1 8 H9 Z'/></svg>");
}
.result-table thead th.sort-asc::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='%23333'><path d='M5 1 L1 6 H9 Z'/></svg>");
}
.result-table thead th.sort-desc::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='%23333'><path d='M5 11 L1 6 H9 Z'/></svg>");
}

.result-loading {
    color: #777;
    font-size: 0.8125rem;
    font-style: italic;
}
.result-table tbody td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.result-table tbody tr {
    cursor: pointer;
}
.result-table tbody tr:hover { background: #f5f8fa; }
.result-table tbody tr.is-selected { background: #e7f1f9; }
.result-table tbody tr.is-selected:hover { background: #d6e7f4; }

/* Horizontal sticky: Auswahl-Spalte fixiert am linken Rand, Aktion-Spalte
 * am rechten Rand. So bleiben Checkbox und Aktions-Buttons immer sichtbar,
 * wenn der User horizontal durch viele Spalten scrollt. Hintergrund muss
 * gesetzt sein, damit Inhalte unter den sticky-Zellen nicht durchscheinen.
 * z-index: 1 reicht für tbody-td (über den nicht-sticky tds), thead th
 * benötigt z-index: 3 (über horizontal-sticky tbody-tds). */
.result-table th.col-selection,
.result-table td.col-selection {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: inset -1px 0 0 #e6e6e6;
}
.result-table th.col-actions,
.result-table td.col-actions {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 1;
    box-shadow: inset 1px 0 0 #e6e6e6;
}
/* Header-Sticky-Ecken: sticky horizontal × sticky vertical — beide
 * Eigenschaften müssen aktiv sein; z-index erhöhen, damit die Ecken über
 * den anderen Headern UND den horizontal-sticky tbody-Zellen liegen. */
.result-table thead th.col-selection,
.result-table thead th.col-actions {
    background: #fafafa;
    /* MUSS höher sein als `.result-table thead th { z-index: 3 }` — sonst
     * werden die Ecken beim horizontalen Scroll von anderen Header-Zellen
     * verdeckt. */
    z-index: 5;
}
/* Hintergrund-Synchronisation für selektierte/hover-Zeilen, damit die
 * sticky-Spalten denselben Zeilen-Hintergrund haben wie der Rest. */
.result-table tbody tr:hover td.col-selection,
.result-table tbody tr:hover td.col-actions {
    background: #f5f8fa;
}
.result-table tbody tr.is-selected td.col-selection,
.result-table tbody tr.is-selected td.col-actions {
    background: #e7f1f9;
}
.result-table tbody tr.is-selected:hover td.col-selection,
.result-table tbody tr.is-selected:hover td.col-actions {
    background: #d6e7f4;
}
.result-table tbody tr.row-highlight td.col-selection,
.result-table tbody tr.row-highlight td.col-actions {
    background: #fff3c4;
}
.result-table tbody tr.row-highlight {
    background: #fff3c4 !important;
    box-shadow: inset 3px 0 0 #f5c842;
}

.result-vis-select {
    width: 180px;
    max-width: 180px;
    padding: 0.15rem 0.35rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background: #fff;
    font-size: 0.8125rem;
    color: #333;
    box-sizing: border-box;
}
.result-vis-select:disabled { color: #999; background: #f4f4f4; }

/* Titel-Zelle nimmt restlichen Platz, andere Spalten sind so schmal wie möglich */
.result-table { table-layout: auto; }
.result-table td.result-title-cell {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.result-table th, .result-table td { white-space: nowrap; }
/* Datum-Spalten: garantierte Min-Breite, damit auch das längste Format
 * (dd.MM.yyyy / yyyy-MM-dd = 10 Zeichen) inkl. Padding hineinpasst und
 * nicht abgeschnitten wird. */
.result-table th.col-date,
.result-table td.result-date-cell {
    min-width: 6.5em;
    font-variant-numeric: tabular-nums;
}
.result-table th.col-title, .result-table td.result-title-cell { white-space: nowrap; }
.result-table td.result-actions { white-space: nowrap; }
.result-table th.col-geom-num,
.result-table td.result-geom-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: #475569;
    white-space: nowrap;
    padding-left: 0.3rem;
    padding-right: 0.5rem;
    /* min-width hält die Spalte breit genug für Werte wie „1567 Mio" plus
       Sort-Indikator. Sonst springt der TH-Button beim Klick (Spalte rendert
       neu sortiert mit kürzeren/längeren Zahlen → Header-Position wandert). */
    min-width: 5rem;
}
.result-actions { white-space: nowrap; }

.result-btn, .result-action-btn {
    background: #f4f4f4;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: #333;
}

.result-cols-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* „Nur ausgewählte"-Filter in der Toolbar — Checkbox + Label, kompakt. */
.result-only-selected {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82em;
    color: #555;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.result-only-selected input { cursor: pointer; }
.result-only-selected:hover { color: #222; }

.result-md-vis { display: inline-flex; align-items: center; gap: 0.35rem; }
.result-md-vis-label {
    font-size: 0.82em;
    color: #555;
    white-space: nowrap;
}
.result-md-select {
    padding: 0.2rem 0.4rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background: #fff;
    font-size: 0.8125rem;
    color: #333;
    min-width: 8.5em;
    cursor: pointer;
}
.result-cols-caret {
    width: 6px;
    height: 4px;
    color: #5f6368;
    flex-shrink: 0;
}

.result-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}
.result-tool-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.25rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.result-tool-btn:hover {
    background: #f1f3f4;
    color: #1f2d3d;
    border-color: rgba(0,0,0,0.05);
}
.result-tool-btn svg { width: 18px; height: 18px; }

.result-change-popover {
    position: absolute;
    z-index: 25;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
    padding: 0.25rem 0;
    min-width: 160px;
}
.result-change-popover button {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: #333;
}
.result-change-popover button:hover { background: #f1f3f4; }

.result-btn:hover, .result-action-btn:hover {
    background: #fff;
    border-color: #888;
}
.result-action-btn {
    padding: 0.2rem 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    margin-right: 2px;
    color: #444;
}
.result-action-btn svg {
    width: 16px;
    height: 16px;
    color: currentColor;
}
.result-action-btn:hover { color: #1a73e8; border-color: #1a73e8; }
/* Aktive Solo-Button-Markierung — oranger Ring + Hintergrund.
 * Signalisiert "Solo-Modus aktiv auf dieser Zeile"; zweiter Klick stellt
 * den vorherigen Zustand wieder her. */
.result-action-btn.is-active {
    color: #d97706;
    border-color: #d97706;
    background: #fef3c7;
    box-shadow: inset 0 0 0 1px #d97706;
}

.result-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid #eee;
    font-size: 0.8125rem;
}
.result-pagination button {
    background: #f4f4f4;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    font-size: 0.8125rem;
}
.result-pagination button:disabled {
    color: #bbb;
    cursor: not-allowed;
}

/* Chart-Modal (Zeitreihe, Transect) */
.chart-modal {
    position: absolute;
    top: 4.5rem;        /* gleiche y-Linie wie Side-Panel — Map-Bar darüber */
    left: 4rem;         /* rechts neben Map-Dock, linksbündig wie alles andere */
    z-index: 10;
    width: min(720px, calc(100% - 5rem));
    max-height: calc(100% - 5.5rem);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    /* Border + Radius + Shadow konsistent mit .side-panel / .result-table-panel.
       overflow: hidden damit Header-Hintergrund die runden Ecken nicht überlappt. */
    border: 1px solid var(--window-border);
    border-radius: 10px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.chart-modal--offset {
    top: 6rem;
    left: calc(4rem + 30px);
}
.chart-modal-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;   
    color: #5f6368;
    font-size: 0.8125rem;
}
.chart-nav-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
}
.chart-nav-btn:hover:not(:disabled) { background: #f1f3f4; color: #1f2d3d; }
.chart-nav-btn:disabled { color: #c0c4ca; cursor: not-allowed; }
.chart-nav-btn svg { width: 14px; height: 14px; pointer-events: none; }
/* Löschen-Button in der Profil-Navigation — Hover in Warnrot. */
.chart-nav-btn--danger:hover:not(:disabled) { background: #fdeceb; color: #c0392b; }

/* Toggle-Popover-Button im Chart-Header (Profilschnitt + Zeitreihe).
 * Optik analog zu .chart-nav-btn, aber mit Hover-Akzent. */
.chart-toggle-btn {
    background: transparent;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
    margin-right: 0.4rem;
}
.chart-toggle-btn:hover {
    background: #f1f3f4;
    color: #1f2d3d;
}
/* Toggle-Zustände als An/Aus-Schalter (kein durchgestrichener Strich mehr):
   AN  = brand-getönt + leicht „erhaben" (klar aktiv),
   AUS = ausgegraut + leicht eingelassen („etched"), gedämpftes Icon. */
.chart-toggle-btn[aria-pressed="true"] {
    color: #005084;
    background: rgba(0, 80, 132, 0.12);
    border-color: #005084;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 132, 0.22);
}
.chart-toggle-btn[aria-pressed="false"] {
    color: #aab2bd;
    background: #eef0f2;
    border-color: #e2e6ea;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);   /* eingelassen */
}
.chart-toggle-btn { position: relative; }
/* SVG für Pointer-Events durchlässig: so ist immer der Button das Maus-Ziel
   → cursor:pointer greift zuverlässig und Klicks landen auf dem Button,
   nicht auf dem <path>. */
.chart-toggle-btn svg { width: 16px; height: 16px; pointer-events: none; }
.chart-nav-index { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.chart-modal--info {
    width: min(520px, calc(100% - 5rem));
    /* top übernimmt von .chart-modal (4.5rem) */
}
.chart-modal-body--scroll {
    overflow: auto;
    height: auto;
    max-height: 50vh;
    padding: 0.5rem 0.75rem 0.85rem;
}

.geom-info-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #eee;
}
.geom-info-label { font-size: 0.8125rem; color: #5f6368; }
.geom-info-dataset {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.45rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 0.875rem;
    background: #fff;
}

.geom-info-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem 0;
    border-bottom: 1px solid #eee;
}
.geom-info-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #5f6368;
    margin-bottom: -1px;
}
.geom-info-tab:hover { color: #202124; }
.geom-info-tab.is-active {
    color: #1a73e8;
    border-color: #e0e0e0 #e0e0e0 #fff;
    background: #fff;
    font-weight: 600;
}

.geom-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.geom-info-table th,
.geom-info-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.geom-info-table th {
    background: #fafafa;
    font-weight: 600;
    color: #333;
    position: sticky;
    top: 0;
}
.geom-info-table td:last-child { font-family: ui-monospace, Consolas, monospace; }
.geom-info-empty { padding: 1rem; color: #5f6368; text-align: center; font-style: italic; }

.metadata-popover {
    position: fixed;
    z-index: 40;
    width: min(540px, 90%);
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--window-border);
    border-radius: 10px;
    box-shadow: var(--shadow-3);
}

.result-cols-popover {
    /* position+top+left werden in JS gesetzt (fixed im body, mit Flip-Logik
       am Viewport-Rand). z-index hoch genug für alle Stacking-Contexts
       inkl. modal-overlay (.chart-modal z-index 10, .side-panel 5). */
    position: fixed;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--window-border);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    padding: 0.4rem 0;
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
}
.result-cols-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.result-cols-list li { padding: 0.25rem 0.85rem; font-size: 0.8125rem; }
.result-cols-list label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.result-cols-list input[disabled] + * { color: #999; }
/* Datumsformat-Section am Ende des Spalten-Popovers. Hairline-Border oben
 * trennt visuell die Format-Auswahl von der Spalten-Liste. */
.result-cols-datefmt {
    margin: 0.5rem 0.85rem 0.2rem 0.85rem;
    padding: 0.45rem 0 0.1rem 0;
    border: none;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8125rem;
}
.result-cols-datefmt legend {
    padding: 0 0.3rem 0 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
/* Farb-Quadrat in der optionalen „Farbe"-Spalte der Ergebnistabelle.
 * Pro LayerGroup-Name eine deterministische HSL-Farbe — wird in
 * result-table.js via colorForLayerName() berechnet. */
.result-color-cell {
    text-align: center;
    padding: 0.2rem 0.4rem;
}
.result-color-square {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    vertical-align: middle;
}

.result-cols-datefmt label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    cursor: pointer;
}
.result-geometry {
    font-family: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: #475569;
    white-space: nowrap;
}
.metadata-popover-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.metadata-popover-body {
    overflow: auto;
    padding: 0;
}
.metadata-table-wrap {
    padding: 0.4rem 0.6rem 0.8rem;
}
/* Attribut-Subsections unter den Standard-Metadaten — pro Geometrie-Typ
 * (Punkt/Polygon/Element) ein eigener Block mit eigenem Titel und Mini-Tabelle. */
.metadata-attr-section {
    margin-top: 0.9rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}
.metadata-attr-title {
    margin: 0 0 0.35rem 0;
    font-size: 0.82em;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.metadata-attr-open {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    font-size: 0.78em;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 3px;
    cursor: pointer;
}
.metadata-attr-open:hover {
    background: #dbeafe;
}
.metadata-attr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78em;
}
.metadata-attr-table th,
.metadata-attr-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
.metadata-attr-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
}

/* Attribut-Tabelle (eigenes Modal) ----------------------------------- */
.chart-modal--attribute {
    width: min(900px, calc(100% - 5rem));
    height: min(640px, calc(100% - 5.5rem));
    min-width: 480px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.attribute-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    flex: 0 0 auto;
}
.attribute-table-search {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}
.attribute-table-search input[type=search] {
    font-size: 0.8125rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    min-width: 160px;
}
#attribute-table-status {
    font-size: 0.75rem;
    color: #475569;
    margin-left: 0.5rem;
    white-space: nowrap;
    padding: 0;
    border-bottom: 0;
    min-height: 0;
    background: transparent;
    display: inline-block;
}
.chart-modal--attribute .window-tool-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.2rem 0.3rem;
    margin-right: 0.25rem;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
}
.chart-modal--attribute .window-tool-btn:hover {
    border-color: #1a73e8;
    color: #1a73e8;
    background: #eff6ff;
}
.chart-modal--attribute .window-tool-btn svg { width: 16px; height: 16px; }
.attribute-table-tabs {
    display: inline-flex;
    gap: 0.2rem;
}
.attribute-table-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    padding: 0.2rem 0.7rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: #5f6368;
    border-radius: 4px 4px 0 0;
}
.attribute-table-tab:hover { background: #f1f3f4; color: #1f2d3d; }
.attribute-table-tab.is-active {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    background: #eff6ff;
}
.attribute-table-only-fts {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8em;
    color: #555;
    cursor: pointer;
    user-select: none;
    margin-right: 0.6rem;
}
.attribute-table-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
.attribute-table { width: 100%; }
.attribute-table tbody tr.fts-hit {
    background: #fef9c3;
}
.attribute-table tbody tr.fts-hit:hover {
    background: #fde68a;
}
.attribute-table td.col-idx,
.attribute-table th.col-idx {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    width: 4em;
}
.attribute-table-zoom {
    background: transparent;
    border: 1px solid #d0d4da;
    border-radius: 3px;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
}
.attribute-table-zoom svg { width: 14px; height: 14px; }
.attribute-table-zoom:hover { color: #1a73e8; border-color: #1a73e8; }
.metadata-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.metadata-table th,
.metadata-table td {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    text-align: left;
}
.metadata-table th {
    background: #f4f4f4;
    color: #333;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.metadata-table tbody tr:nth-child(odd) td { background: #fafafa; }
.metadata-table td:first-child {
    color: #5f6368;
    width: 38%;
    font-weight: 500;
}
.metadata-table td:last-child {
    color: #202124;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    word-break: break-word;
}

/* Login-Modal */
.login-modal {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 320px;
    background: #fff;
    border: 1px solid var(--window-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Login-Overlay — vollflächiger Backdrop, der den Login-Wechsel als klare
   Schnittstelle markiert und die Karte gegen Fehl-Interaktionen sperrt. */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(20, 28, 46, 0.55);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.login-overlay[hidden] { display: none; }
/* Forced-Mode: User MUSS sich einloggen (Default-User deaktiviert). Close-X
   ausblenden + Cursor signalisiert keinen Outside-Click-Exit. */
.login-overlay[data-forced="1"] .login-close { display: none; }
.login-overlay[data-forced="1"] { cursor: not-allowed; }
.login-overlay[data-forced="1"] .login-modal { cursor: auto; }
/* Innerhalb des Overlays sitzt das Modal mittig und größer. */
.login-modal--fullscreen {
    position: static;          /* Overlay übernimmt das Zentrieren */
    transform: none;
    width: min(440px, 92vw);
    max-height: 90vh;
    overflow: auto;
    border-radius: 8px;
    border-color: #888;
    box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}
/* Kombi-Override: Wenn das Admin-Modal innerhalb des Login-Overlays gerendert
   wird (forced-login → "Sie sind nicht eingeloggt"-Variante mit zusätzlicher
   --fullscreen-Klasse), würde die obige --fullscreen-Regel die Admin-Breite
   auf 440 px drücken. Spezifität 2 Klassen schlägt beide Einzelregeln. */
.login-modal--fullscreen.login-modal--admin {
    width: min(1280px, 94vw);
    height: min(820px, 92vh);
    max-height: 92vh;
    overflow: hidden;
}
.login-intro {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    margin: 0 0 0.3rem 0;
    background: #f7f7f4;
    border-left: 3px solid #c8b15a;
    padding: 0.5rem 0.6rem;
    border-radius: 3px;
}
.login-modal form {
    padding: 0.85rem;
    display: grid;
    gap: 0.6rem;
}
.login-row {
    display: grid;
    gap: 0.25rem;
}
.login-row span {
    font-size: 0.8125rem;
    color: #555;
}
.login-row input {
    padding: 0.4rem 0.5rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 0.875rem;
}

.upload-dropzone {
    display: block;
    border: 2px dashed #c0c0c0;
    border-radius: 4px;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: #555;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.upload-dropzone:hover { border-color: #888; background: #f4f4f4; }
.upload-dropzone.is-dragging {
    border-color: var(--header-bg);
    background: #eef4fa;
    color: var(--header-bg);
}
.upload-dropzone-hint {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
}
.upload-dropzone-hint small { color: #999; }
.upload-dropzone-files {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #155724;
    word-break: break-all;
}
.chart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
}
.chart-modal-header h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}
.chart-modal-status {
    padding: 0.3rem 0.85rem;
    font-size: 0.8125rem;
    color: #666;
    border-bottom: 1px solid #eee;
    min-height: 1.2em;
}
.chart-modal-status.ok    { color: #155724; }
.chart-modal-status.warn  { color: #856404; }
.chart-modal-status.error { color: #721c24; }
.chart-modal-status.busy  { color: #666; }

/* ────────────── Transect: Analyse-Panel (klappt unter dem Header auf) ────────────── */
.transect-analyse-panel {
    padding: 0.4rem 0.85rem;
    background: #f6f6f8;
    border-top: 1px solid #e2e2e7;
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* STABILE 260px-Höhe, hart per height + overflow hidden. Ohne das hat
     * der Browser die Panel-Höhe doch wieder dem Inhalt der Tabelle folgen
     * lassen → Tabelle erdrückte den Chart, Summary war erst nach
     * Modal-Vergrößern sichtbar. */
    flex: none;
    height: 260px;
    max-height: 260px;
    box-sizing: border-box;
    overflow: hidden;
}
.transect-analyse-panel .analyse-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.transect-analyse-panel .analyse-row--order {
    align-items: flex-start;
    flex-wrap: nowrap;
}
.transect-analyse-panel .analyse-label {
    flex-shrink: 0;
    color: #555;
    padding-top: 2px;
}
.transect-analyse-panel .analyse-check,
.transect-analyse-panel .analyse-ref-wrap,
.transect-analyse-panel .analyse-alpha-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}
.transect-analyse-panel .analyse-check input[type="checkbox"] {
    margin: 0;
}
.transect-analyse-panel select,
.transect-analyse-panel input[type="range"] {
    font-size: 0.8125rem;
}
.transect-analyse-panel input[type="range"] {
    width: 100px;
    vertical-align: middle;
}
.transect-analyse-panel .analyse-mono {
    font-variant-numeric: tabular-nums;
    color: #555;
    min-width: 3em;
    display: inline-block;
}
.analyse-order-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 120px;
    overflow-y: auto;
    flex: 1;
    border: 1px solid #dadde2;
    border-radius: 3px;
    background: #fff;
    padding: 2px;
}
.analyse-order-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    background: #fafbfc;
    border-radius: 2px;
    line-height: 1.3;
}
.analyse-order-list .order-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.analyse-order-list .order-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}
.analyse-order-list .order-date {
    color: #666;
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.analyse-order-list button {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0 6px;
    font-size: 0.85rem;
    color: #555;
    line-height: 1;
    border-radius: 2px;
}
.analyse-order-list button:hover:not(:disabled) {
    background: rgba(0,0,0,0.06);
    color: #000;
}
.analyse-order-list button:disabled {
    opacity: 0.3;
    cursor: default;
}
.analyse-order-list li.is-hidden .order-label {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Z-Ray-Sektion (Wanderdistanz aus Schnittpunkten mit horizontalen z-Strahlen) */
.transect-analyse-panel .analyse-row--zray {
    flex-wrap: wrap;
}
.transect-analyse-panel .analyse-num {
    width: 60px;
    font-size: 0.78rem;
    padding: 1px 4px;
    font-variant-numeric: tabular-nums;
}
.transect-analyse-panel .analyse-num--small { width: 44px; }
.transect-analyse-panel .analyse-num--year  { width: 70px; }

/* Fieldset-Gruppierung im Analyse-Panel: Titled-Border, kompakt. */
.transect-analyse-panel fieldset.analyse-fieldset {
    border: 1px solid #cfd3da;
    border-radius: 4px;
    padding: 2px 0.6rem 0.35rem;
    margin: 0 0 0.25rem;
    background: #fbfbfd;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    min-inline-size: 0;
}
.transect-analyse-panel fieldset.analyse-fieldset > legend {
    padding: 0 0.4rem;
    font-size: 0.72rem;
    color: #555;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
}
.transect-analyse-panel .analyse-spacer { flex: 1 1 auto; }
.transect-analyse-panel .zray-btn {
    padding: 2px 8px;
    font-size: 0.78rem;
    border: 1px solid #c6c8cc;
    border-radius: 3px;
    background: #fff;
    color: #333;
    line-height: 1.4;
    height: auto;
    width: auto;
}
.transect-analyse-panel .zray-btn:hover { background: #f0f0f3; }
.zray-result {
    /* Füllt den verbleibenden Platz im Analyse-Panel; teilt sich intern
     * in scrollbaren Tabellen-Bereich (oben) + sticky Summary-Zeile (unten).
     * `flex-basis: 0` erzwingt, dass der Inhalt NICHT das Panel ausdehnen
     * kann — die Tabelle scrollt stattdessen intern. */
    flex: 1 1 0;
    min-height: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #dadde2;
    border-radius: 3px;
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.zray-table-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.zray-summary {
    flex: 0 0 auto;
    border-top: 1px solid #dadde2;
    padding: 4px 6px;
    background: #f8f8fa;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    align-items: center;
    line-height: 1.4;
}
.zray-summary-label { font-weight: 600; color: #555; }
.zray-summary-stat  { color: #333; white-space: nowrap; }
.zray-summary-stat .pos { color: #2ec27e; }
.zray-summary-stat .neg { color: #dc3545; }
.zray-summary-stat .zero { color: #888; }
.zray-table .cb-col {
    width: 24px;
    text-align: center;
    padding: 2px 0;
}
.zray-table input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.zray-table thead th { z-index: 1; }
.zray-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.zray-table th,
.zray-table td {
    padding: 2px 6px;
    text-align: right;
    border-bottom: 1px solid #eef0f3;
    white-space: nowrap;
}
.zray-table th:first-child,
.zray-table td:first-child {
    text-align: left;
}
.zray-table th {
    background: #f5f6f8;
    font-weight: 600;
    color: #555;
    position: sticky;
    top: 0;
}
.zray-table tr:last-child td { border-bottom: 0; }
.zray-table td.pos { color: #2ec27e; }
.zray-table td.neg { color: #dc3545; }
.zray-table td.zero { color: #888; }
.zray-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.zray-table tbody tr:hover { background: #f7f9fb; }
.zray-table tbody tr.is-active {
    background: #fff3cd;
    box-shadow: inset 3px 0 0 #ffb84d;
}
.zray-table tbody tr.is-active td.pos { color: #1c8c5a; }
.zray-table tbody tr.is-active td.neg { color: #b02a37; }
.zray-table .zray-delta {
    color: #888;
    font-size: 0.92em;
    font-weight: 400;
    margin-left: 2px;
}

.chart-modal-body {
    position: relative;
    /* Chart füllt den verbleibenden Raum im Modal. `min-height` verhindert,
     * dass er bei großem Analyse-Panel unter eine sinnvolle Größe schrumpft. */
    flex: 1 1 auto;
    min-height: 200px;
    padding: 0.5rem 0.75rem;
}
.chart-modal-body canvas {
    width: 100% !important;
    height: 100% !important;
}
.chart-modal-body--layered { position: relative; }
.chart-overlay {
    position: absolute;
    inset: 0.5rem 0.75rem;
    pointer-events: none;
    width: auto !important;
    height: auto !important;
}

/* ───────────── Zeitreihe: ausklappbarer Analyse-Bereich ───────────── */
.ts-analysis {
    flex: 0 0 auto;
    max-height: 46%;
    overflow: auto;
    border-top: 1px solid var(--window-border);
    background: #fafbfc;
    padding: 0.4rem 0.6rem 0.6rem;
}
.ts-analysis-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.4rem;
}
/* Segment-Auswahl Punkte/Linien/Spline */
.ts-seg { display: inline-flex; border: 1px solid #cdd3da; border-radius: 6px; overflow: hidden; }
.ts-seg-opt { position: relative; }
.ts-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ts-seg-opt span {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    color: #475569;
    cursor: pointer;
    border-left: 1px solid #cdd3da;
}
.ts-seg-opt:first-child span { border-left: 0; }
.ts-seg-opt input:checked + span { background: #005084; color: #fff; }
.ts-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: #475569; cursor: pointer; }

/* Statistik-Leiste */
.ts-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: 0.45rem; }
.ts-stat {
    font-size: 0.78rem; color: #475569;
    background: #eef1f4; border-radius: 4px; padding: 0.1rem 0.45rem;
    font-variant-numeric: tabular-nums;
}
.ts-stat small { color: #80868b; }
.ts-stat-muted { color: #80868b; font-size: 0.8rem; }
.ts-stat-outl { background: #fdeceb; color: #c0392b; }
.ts-trend {
    font-size: 0.85rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.ts-trend--up   { background: #e6f7e9; color: #1f7a36; }
.ts-trend--down { background: #fdeceb; color: #c0392b; }
.ts-trend--flat { background: #eef1f4; color: #5f6368; }
/* Trend-Pille als Karten-Marker am Klickpunkt der Zeitreihe (ol/Overlay). */
.ts-map-trend {
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    font-size: 0.78rem;
}
.ts-map-trend small { font-weight: 600; opacity: 0.85; }

/* Punkt-Tabelle */
.ts-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ts-table th, .ts-table td { padding: 0.2rem 0.45rem; text-align: left; border-bottom: 1px solid #eef0f2; }
.ts-table th { color: #80868b; font-weight: 600; position: sticky; top: 0; background: #fafbfc; }
.ts-table td.ts-num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-table tr.is-hover { background: #fff3cd; }
.ts-table tr.ts-row--off td { color: #aab0b8; }
.ts-table tr.ts-row--outlier td.ts-num { color: #c0392b; text-decoration: line-through; }
.ts-series { white-space: nowrap; }
.ts-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.35rem; vertical-align: -1px; }

.layer-tree-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.5rem;
}
.layer-tree-list .layer-tree-list {
    padding: 0.2rem 0 0.2rem 1.25rem;
}
.layer-tree-item {
    margin: 0.15rem 0;
}
.layer-tree-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
    border-radius: 2px;
}
.layer-tree-row:hover {
    background: #eef2f5;
}
.layer-tree-group > .layer-tree-row > .layer-tree-title {
    font-weight: 600;
}
.layer-tree-title {
    font-size: 0.8125rem;
    color: #222;
    flex: 1;
    min-width: 0;
}
.layer-tree-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.layer-tree-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: auto;
}
.layer-tree-action-btn {
    background: transparent;
    border: none;
    color: #5f6368;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.layer-tree-action-btn:hover {
    background: #f1f3f4;
    color: #1f2d3d;
}
.layer-tree-action-btn svg { width: 14px; height: 14px; }

main {
    position: relative;
    overflow: hidden;
}

.map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Karten-Cursor je nach aktivem Modus.
 *  pan   → Hand zum Verschieben
 *  draw  → Crosshair für Punkt/Linie-Setzen
 *  rect  → Crosshair zum Aufziehen */
body.mode-pan  .map { cursor: grab; }
body.mode-pan  .map:active { cursor: grabbing; }
body.mode-draw .map,
body.mode-rect .map { cursor: crosshair; }

/* Wenn Maus über UI-Element ist: Map-Cursor neutral + OL-Sketch verbergen,
 * damit kein Draw-Hinweis "irgendwo am Cursor" sichtbar bleibt. */
body.ui-hover .map { cursor: default !important; }
body.ui-hover .ol-overlaycontainer-stopevent,
body.ui-hover .ol-overlaycontainer { pointer-events: none; }

/* Default-Karten-Cursor: Hand (Pan-Modus) */
.map { cursor: grab; }
.map:active { cursor: grabbing; }

#app-footer {
    position: relative;
    background: var(--footer-bg);
    color: var(--footer-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    font-size: 0.8125rem;
    border-top: 1px solid #d0d0d0;
}

/* Lade-Indikator mittig im Footer */
.footer-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #4a5260;
    font-size: 0.78rem;
    line-height: 1;
    min-width: 0;
    max-width: 36vw;
}
.footer-progress[hidden] { display: none; }
.footer-progress-bar {
    position: relative;
    width: 150px;
    height: 6px;
    background: #e1e4ea;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.footer-progress-fill {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(31, 76, 232, 0)   0%,
        rgba(31, 76, 232, 1)  50%,
        rgba(31, 76, 232, 0) 100%);
    animation: footer-progress-slide 1.2s linear infinite;
}
@keyframes footer-progress-slide {
    0%   { left: -45%; }
    100% { left: 100%; }
}
.footer-progress-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#footer-links {
    display: flex;
    gap: 0.75rem;
}

.subpages-link {
    color: var(--link-fg);
    text-decoration: none;
}

.subpages-link:hover {
    text-decoration: underline;
}

/* Button-Variante von subpages-link — wird als <button> für „Dienste"
 * verwendet, soll aber visuell wie ein Link aussehen. */
.subpages-link--button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--link-fg);
}
.subpages-link--button:hover { text-decoration: underline; }

.copyright {
    color: #888;
}

/* Legenden-Panel */
.legend-content {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.legend-empty {
    color: #777;
    font-size: 0.9em;
    padding: 0.5rem 0.25rem;
    line-height: 1.4;
}
.legend-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.legend-section-title {
    font-size: 0.85em;
    font-weight: 600;
    margin: 0;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 0.25rem;
}
.legend-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.legend-entry {
    margin: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.legend-entry-caption {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.legend-entry-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #222;
    word-break: break-word;
}
.legend-entry-sublabel {
    font-size: 0.78em;
    color: #777;
    margin-top: 0.1rem;
}
.legend-entry-image {
    max-width: 100%;
    height: auto;        /* Höhe folgt der Breite — bewahrt das Aspect-Ratio */
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    padding: 2px;
}
.legend-entry-error {
    font-size: 0.8em;
    color: #b94a3c;
    font-style: italic;
}

/* Downloads-Panel + Dialog ------------------------------------------------- */

/* Downloads: linksbündig wie die anderen sekundären Panels. Breite an die
   Map-Bar angeglichen (440 px) — Download-Listen-Einträge zeigen längere
   Titel und brauchen den Platz. */
#downloads-panel.side-panel--right {
    left: 4rem;
    right: auto;
    width: 440px;
    max-height: 60vh;
}
.downloads-content {
    padding: 0.5rem 0.75rem 0.75rem;
    overflow: auto;
}
.downloads-empty {
    color: #777;
    font-size: 0.9em;
    line-height: 1.4;
    padding: 0.25rem;
}
.downloads-section {
    margin-bottom: 0.9rem;
}
.downloads-section h3 {
    margin: 0 0 0.35rem 0;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 0.2rem;
}
/* Warenkorb-Sektion: Kopfzeile mit Titel + inline Aktionen
 *   (Konfiguration, Wiederherstellen, Leeren). */
.downloads-section--cart .downloads-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #e6e6e6;
    flex-wrap: wrap;
}
.downloads-section--cart h3 {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.downloads-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
/* Cart-Einträge: gedeckter Akzent-Streifen links, damit der Korb-Block
 * sich optisch von Vorbereitung/Fertig abhebt. */
.downloads-item--cart {
    background: #f5f7fb;
    border-color: #d8dee8;
    box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}

/* Visuelles Feedback nach Klick auf „Zum Warenkorb hinzufügen":
 *   kurzer Akzent-Blink am Button. */
@keyframes cart-add-flash {
    0%   { background: var(--accent, #2563eb); color: #fff; }
    100% { background: transparent; color: inherit; }
}
.result-action-btn.is-added,
.result-tool-btn.is-added {
    animation: cart-add-flash 600ms ease-out;
}
.downloads-list, .downloads-list-root {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.downloads-item {
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fafafa;
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* „Fertig" — abholbereit, noch nicht heruntergeladen. Akzentfarbiger
 * Streifen links, damit User direkt sieht, was noch zu tun ist. */
.downloads-item--done {
    background: #f3faf3;
    border-color: #d6ead6;
    box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}
/* „Heruntergeladen" — schon abgeholt. Visuell gedeckter, ohne Akzentstreifen. */
.downloads-item--fetched {
    background: #f6f7f9;
    border-color: #e0e3e8;
    color: #4a5159;
}
.downloads-item--fetched .downloads-item-name { color: #4a5159; }
.downloads-item--error   { background: #fbf3f1; border-color: #ecd0c8; }

/* Aktions-Buttons-Gruppe rechts in der Item-Head. */
.downloads-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.downloads-item-btn--icon {
    min-width: 26px;
    height: 24px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: #475569;
}
/* Kleiner Count-Stempel neben dem Icon (z.B. „Wiederherstellen (27)").
 * Wird nur gerendert, wenn der Icon-Button einen Zähler braucht. */
.downloads-item-btn-count {
    font-size: 0.78em;
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

/* Inline-Share-Box: Textfeld mit Download-URL + Kopier-Button. Fällt
 * auf manuelles Kopieren zurück, wenn Clipboard-API nicht verfügbar
 * (z.B. http-Intranet ohne secure context). */
.downloads-share {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #d6dadc;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.downloads-share-row {
    display: flex;
    gap: 0.3rem;
    align-items: stretch;
}
.downloads-share-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.78em;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    background: #fff;
    color: #222;
}
.downloads-share-input:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: -1px;
}
.downloads-share-copy { flex-shrink: 0; }
.downloads-share-status {
    font-size: 0.75em;
    color: #666;
    line-height: 1.3;
}
.downloads-share-status.is-ok   { color: #15803d; }
.downloads-share-status.is-warn { color: #b45309; }
.downloads-item-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.downloads-item-name {
    flex: 1;
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.downloads-item-btn {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-size: 0.82em;
    cursor: pointer;
    text-decoration: none;
}
.downloads-item-btn:hover { background: #f3f3f3; }
.downloads-item-btn--primary {
    background: var(--header-bg, #1f4ce8);
    border-color: var(--header-bg, #1f4ce8);
    color: #fff;
}
/* Beim Hover NICHT vom generischen `.downloads-item-btn:hover {background:#f3f3f3}`
 * überschrieben werden lassen — sonst hatte der Primary-Button hellgrauen
 * Hintergrund mit weißer Schrift = kein Kontrast. Hier explizit den
 * Akzent-Hintergrund halten und etwas dunkler statt heller machen, damit
 * der weiße Text deutlich lesbar bleibt. */
.downloads-item-btn--primary:hover {
    background: color-mix(in srgb, var(--header-bg, #1f4ce8) 85%, #000);
    border-color: color-mix(in srgb, var(--header-bg, #1f4ce8) 85%, #000);
    color: #fff;
    filter: none;
}
.downloads-item-meta {
    font-size: 0.78em;
    color: #666;
}
.downloads-item-meta--error { color: #b94a3c; }
.downloads-progress {
    height: 6px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
}
.downloads-progress-fill {
    height: 100%;
    background: var(--header-bg, #1f4ce8);
    transition: width 250ms ease-out;
}

/* Status-Pille oben-rechts auf dem Dock-Button. Job-Lifecycle:
 *   --done    → grün (abholbereit)
 *   --active  → gelb (in Vorbereitung)
 *   --fetched → grau (heruntergeladen)
 * Default-Rot bleibt als Fallback, sollte normalerweise nicht greifen.
 */
.downloads-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    background: #d63b1f;
    color: #fff;
    border-radius: 7px;
    font-weight: 700;
    box-shadow: 0 0 0 1.5px #fff;
}
.downloads-badge--done    { background: #15803d; }  /* Grün — abholbereit */
.downloads-badge--active  { background: #c08000; color: #fff; }  /* Gelb-Orange — läuft */
.downloads-badge--fetched { background: #6b7280; }  /* Grau — heruntergeladen */

/* Generische Map-Dock-Pille (z.B. Zeit-Filter aktiv am Zeitleiste-Toggle).
 * Visuelle Sprache wie die Downloads-Pille: kleiner Punkt am Button-Eck,
 * weißer Halo damit er auf jedem Hintergrund klar ist. */
.map-dock-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    background: #d97706;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #fff;
}

/* Warenkorb-Pille unten-links: Anzahl der vorgemerkten Datensätze.
 * Neutrale Akzent-Farbe, deutlich als zweite Pille erkennbar. */
.downloads-cart-badge {
    position: absolute;
    bottom: 1px;
    left: 1px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    background: var(--accent, #2563eb);
    color: #fff;
    border-radius: 7px;
    font-weight: 700;
    box-shadow: 0 0 0 1.5px #fff;
}
.map-dock-btn { position: relative; }

/* Optionen-Dialog */
.chart-modal--download {
    width: 720px;
    max-width: calc(100vw - 8rem);
    height: auto;
    max-height: 80vh;
}
.chart-modal--download .chart-modal-body--scroll {
    overflow: auto;
    padding: 0.5rem 0.75rem;
}

/* „Dienste"-Dialog: WMS/WFS-Service-URLs mit Copy-Button. Layout
 * parallel zu chart-modal--download (gleiche Größe, gleicher Scroll). */
.chart-modal--services {
    width: 640px;
    max-width: calc(100vw - 8rem);
    height: auto;
    max-height: 80vh;
}
.chart-modal--services .chart-modal-body--scroll {
    overflow: auto;
    padding: 0.6rem 0.9rem 0.9rem;
}

/* Hilfe-Dialog: schmaler als Services, mehr Höhe (How-Tos sind lang). */
.chart-modal--help {
    width: min(880px, calc(100vw - 6rem));
    max-width: calc(100vw - 6rem);
    height: auto;
    max-height: 85vh;
    /* Spalten-Layout (Toolbar + TOC + Content) braucht intern Flex-Column. */
    display: flex;
    flex-direction: column;
}
.chart-modal--help .chart-modal-body--scroll {
    overflow: auto;
    padding: 0.7rem 1rem 1rem;
}

/* Toolbar oben im Help-Dialog: Suchfeld + Tag-Chips, sticky unter dem Header. */
.help-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--window-border);
    background: #fafbfc;
}
.help-search {
    flex: 1 1 220px;
    min-width: 160px;
    padding: 0.3rem 0.55rem;
    border: 1px solid #cdd3da;
    border-radius: 6px;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
}
.help-search:focus { outline: none; border-color: #005084; box-shadow: 0 0 0 2px rgba(0,80,132,0.15); }

.help-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.help-tag-chip {
    background: #eef1f4;
    color: #475569;
    border: 1px solid #d8dbe2;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.74rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    line-height: 1.5;
}
.help-tag-chip:hover { background: #e2e8f0; color: #1f2d3d; }
.help-tag-chip.is-active {
    background: rgba(0,80,132,0.12);
    color: #005084;
    border-color: #005084;
    font-weight: 600;
}

/* Zwei-Spalten-Layout: TOC links, Content rechts. Auf engen Viewports
   einspaltig untereinander. */
.help-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 0;
    overflow: hidden;
}
.help-toc {
    overflow-y: auto;
    border-right: 1px solid var(--window-border);
    padding: 0.4rem 0.3rem;
    background: #fff;
    font-size: 0.82rem;
}
.help-toc-item {
    display: block;
    padding: 0.35rem 0.55rem;
    color: #475569;
    text-decoration: none;
    border-radius: 4px;
    border-left: 3px solid transparent;
    line-height: 1.3;
}
.help-toc-item:hover { background: rgba(0,0,0,0.04); color: #1f2d3d; }
.help-toc-item.is-active {
    background: rgba(0,80,132,0.08);
    color: #005084;
    border-left-color: #005084;
    font-weight: 600;
}
.help-content {
    overflow-y: auto;
    padding: 0.7rem 1rem 1rem;
}
/* Damit ein gescrolltes Topic nicht unter dem Toolbar-Padding endet. */
.help-content .help-topic { scroll-margin-top: 0.5rem; }

/* Such-Treffer-Hervorhebung im Topic-Body. */
mark.help-mark {
    background: #fff3a3;
    color: #5b4500;
    padding: 0 0.1em;
    border-radius: 2px;
}

/* Glossar — Definitionsliste mit klarer Trennung. */
.help-glossary dl { margin: 0.4rem 0 0; }
.help-glossary dt {
    font-weight: 700;
    color: #1f2d3d;
    margin-top: 0.6rem;
    padding-top: 0.35rem;
    border-top: 1px solid #eef0f2;
    scroll-margin-top: 0.5rem;
}
.help-glossary dt:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.help-glossary dd { margin: 0.15rem 0 0; color: #475569; font-size: 0.88rem; line-height: 1.45; }

/* Querverweis aus anderen Topics ins Glossar (subtiler Link-Stil). */
.help-glossary-ref {
    color: #005084;
    text-decoration: none;
    border-bottom: 1px dotted #94a3b8;
}
.help-glossary-ref:hover { border-bottom-color: #005084; }

/* Schmaler Viewport: TOC einklappen (oben) statt links. */
@media (max-width: 720px) {
    .help-layout { grid-template-columns: 1fr; }
    .help-toc {
        max-height: 38vh;
        border-right: 0;
        border-bottom: 1px solid var(--window-border);
    }
}

/* Drucken / als PDF: printHelp() klont die Topics in einen frischen
   Container #help-print-root direkt an <body>. So umgehen wir alle Modal-
   Container-Constraints (overflow:hidden, max-height) und der Browser
   paginiert sauber über alle Seiten. */
@media print {
    body > *:not(#help-print-root) { display: none !important; }
    #help-print-root {
        display: block !important;
        padding: 0;
        background: #fff;
        color: #000;
        font: 11pt/1.45 ui-sans-serif, system-ui, sans-serif;
    }
    #help-print-root h1 {
        font-size: 1.4em;
        margin: 0 0 0.8em;
        padding-bottom: 0.3em;
        border-bottom: 1px solid #888;
    }
    /* Topic-Titel als normale Überschriften drucken (kein Chevron, kein
       interaktiver Stil). */
    #help-print-root details { display: block; margin: 0.6em 0; }
    #help-print-root details > summary {
        list-style: none;
        font-weight: 700;
        font-size: 1.1em;
        margin: 0.6em 0 0.3em;
        cursor: default;
    }
    #help-print-root details > summary::-webkit-details-marker { display: none; }
    #help-print-root details > summary::before { content: '' !important; display: none !important; }
    #help-print-root .help-topic-body { padding-left: 0; }
    #help-print-root .help-topic,
    #help-print-root details { page-break-inside: avoid; break-inside: avoid; }
    #help-print-root mark.help-mark {
        background: none !important; color: inherit !important;
    }
    /* Inline-Icons sind im PDF nutzlos (winzige SVGs, oft Leerraum) — der
       umgebende Text benennt das jeweilige Werkzeug ohnehin eindeutig.
       Komplett ausblenden, damit der Fließtext sauber liest. */
    #help-print-root svg.help-ico { display: none !important; }
    /* Glossar: dt/dd lesbar drucken. */
    #help-print-root .help-glossary dt { font-weight: 700; margin-top: 0.5em; }
    #help-print-root .help-glossary dd { margin: 0 0 0.4em 1em; }
}
.help-intro {
    font-size: 0.86em;
    color: #5f6368;
    line-height: 1.4;
    margin: 0 0 0.8rem;
}
.help-topic {
    border-bottom: 1px solid #eceef2;
    padding: 0.1rem 0;
}
.help-topic:last-child { border-bottom: 0; }
.help-topic-title {
    cursor: pointer;
    list-style: none;
    padding: 0.55rem 0.2rem 0.55rem 1.4rem;
    position: relative;
    font-size: 0.9rem;
    font-weight: 600;
    color: #202124;
    user-select: none;
}
.help-topic-title::-webkit-details-marker { display: none; }
.help-topic-title::before {
    content: '›';
    position: absolute;
    left: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: #5f6368;
    transition: transform 0.15s;
}
.help-topic[open] > .help-topic-title::before {
    transform: translateY(-50%) rotate(90deg);
    color: #1a73e8;
}
.help-topic-title:hover { color: #1a73e8; }
.help-topic-body {
    padding: 0 0.3rem 0.65rem 1.4rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #202124;
}
.help-topic-body p { margin: 0 0 0.4rem; }
.help-topic-body ol,
.help-topic-body ul {
    margin: 0 0 0.4rem;
    padding-left: 1.1rem;
}
.help-topic-body li { margin-bottom: 0.25rem; }
.help-topic-body kbd {
    display: inline-block;
    background: #f1f3f4;
    border: 1px solid #d8dbe2;
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    color: #5f6368;
}
.help-topic-body em {
    font-style: normal;
    background: #f1f7ff;
    border-radius: 2px;
    padding: 0 0.2rem;
    color: #1a73e8;
}
.help-ico {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -0.18em;
    color: #5f6368;
    margin: 0 0.15em;
}
.help-kbd-list { list-style: none; padding-left: 0; }
.help-kbd-list li { padding: 0.15rem 0; }
/* Akkordeon innerhalb eines Hilfe-Topics — z.B. um Volltext-Suchsyntax in
   „Volltext-Suche" + „Attribut-Suche" zu untergliedern. */
.help-subtopic {
    margin: 0.4rem 0 0.6rem;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.help-subtopic > summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: #1f2937;
    list-style: none;
    margin: -0.2rem -0.2rem 0.3rem;
    padding: 0.2rem 0.2rem;
}
.help-subtopic > summary::-webkit-details-marker { display: none; }
.help-subtopic > summary::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    color: #1a73e8;
    transition: transform 0.15s;
}
.help-subtopic[open] > summary::before { content: '▾'; }
/* Tabellen mit Syntax-Beispielen — eingaben-spalte fixe Breite, monospace */
.help-syntax-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.3rem 0 0.4rem;
    font-size: 0.82rem;
}
.help-syntax-table th,
.help-syntax-table td {
    text-align: left;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid #e8eaed;
    vertical-align: top;
}
.help-syntax-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f6368;
    font-weight: 600;
}
.help-syntax-table tr:last-child td { border-bottom: none; }
.help-syntax-table td:first-child { white-space: nowrap; width: 35%; }
.help-syntax-table code {
    background: #fff;
    border: 1px solid #d8dbe2;
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    color: #1f2937;
}
/* Kurze Hinweis-Zeile in Topic-Body (kleinere, gedämpfte Farbe). */
.help-hint {
    font-size: 0.78rem;
    color: #5f6368;
    background: #f1f3f4;
    border-left: 3px solid #d8dbe2;
    padding: 0.3rem 0.55rem;
    margin: 0.4rem 0;
    border-radius: 3px;
}
.services-intro,
.services-warn {
    font-size: 0.86em;
    color: #555;
    line-height: 1.4;
    margin: 0 0 0.8rem 0;
}
.services-warn {
    color: #b45309;
    margin-top: 0.4rem;
    margin-bottom: 0;
}
.services-block {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.7rem;
    background: #fafafa;
}
.services-block-title {
    margin: 0 0 0.2rem 0;
    font-size: 0.92em;
    font-weight: 600;
    color: #222;
}
.services-block.is-beta {
    border-left: 3px solid #d97706;
}
.services-beta-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 1px 6px;
    font-size: 0.65em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #92400e;
    background: #fde68a;
    border-radius: 3px;
    vertical-align: middle;
}
.services-block-desc {
    margin: 0 0 0.4rem 0;
    font-size: 0.78em;
    color: #666;
}
.services-block-row {
    display: flex;
    gap: 0.35rem;
    align-items: stretch;
}
.services-block-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.78em;
    padding: 0.3rem 0.45rem;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    background: #fff;
    color: #1f2d3d;
}
.services-block-input:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: -1px;
}
.services-block-status {
    margin-top: 0.3rem;
    font-size: 0.76em;
    color: #666;
    line-height: 1.35;
}
.services-block-status.is-ok   { color: #15803d; }
.services-block-status.is-warn { color: #b45309; }
.download-form-head {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.8rem;
}
.download-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85em;
}
.download-field > span:first-child {
    color: #555;
    font-weight: 600;
}
.download-field input[type=text],
.download-field select,
.download-select {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font: inherit;
    background: #fff;
}
.download-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}
.download-field--checkbox > span:first-child { order: 2; font-weight: 400; color: #333; }
.download-field--checkbox > input            { order: 1; }
.download-type-section {
    margin-bottom: 0.9rem;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
}
.download-type-section h3 {
    margin: 0;
    padding: 0.35rem 0.55rem;
    background: #f5f5f5;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #444;
}
.download-layer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    /* `fixed` zwingt die Spalten in die unten via colgroup-/th-Breiten
     * gesetzten Verhältnisse — sonst gibt jede Sektion (TINS, GRIDS,
     * TILES) ihrer Tabelle eigene Spaltenbreiten auf Basis des Inhalts,
     * die zwischen den Sektionen nicht miteinander fluchten. */
    table-layout: fixed;
}
.download-layer-table th,
.download-layer-table td {
    padding: 0.3rem 0.55rem;
    border-top: 1px solid #f0f0f0;
    text-align: left;
    /* Lange Strings im Datensatz-Namen kürzen statt umzubrechen; die
     * `title`-Attribute auf den TDs zeigen den vollen Namen im Tooltip. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Gleiche vertikale Lage der Selects in allen Sektionen. */
    vertical-align: middle;
}
.download-layer-table th {
    background: #fafafa;
    color: #555;
    font-weight: 600;
}
/* Spaltenbreiten: Datensatz nimmt den meisten Platz, Format mittel,
 * Option am schmalsten. Über alle Sektionen identisch → bündig. */
.download-layer-table th:nth-child(1),
.download-layer-table td:nth-child(1) { width: 46%; }
.download-layer-table th:nth-child(2),
.download-layer-table td:nth-child(2) { width: 34%; }
.download-layer-table th:nth-child(3),
.download-layer-table td:nth-child(3) { width: 20%; }
.download-layer-table select {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    background: #fff;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}
.download-form-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}
.download-tou {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85em;
    color: #444;
}
.download-tou-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.download-tou-link:hover {
    color: #0b4cad;
}
.download-empty {
    color: #888;
    font-style: italic;
    padding: 0.5rem;
}

/* Wartungsmodus — vollflächiger Overlay, der die gesamte App ersetzt.
   Wird via JS in `main.js` eingefügt, wenn /api/config maintenance:true meldet. */
.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(180deg, #f7f7f4 0%, #e8e9ec 100%);
    display: grid;
    place-items: center;
    padding: 2rem;
}
.maintenance-card {
    max-width: 520px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
}
.maintenance-card h1 {
    margin: 0 0 0.8rem 0;
    font-size: 1.3rem;
    color: #333;
}
.maintenance-card p {
    margin: 0.4rem 0;
    color: #555;
    line-height: 1.5;
}
.maintenance-countdown {
    margin-top: 1.2rem !important;
    font-size: 0.85rem;
    color: #888;
}
.maintenance-countdown span {
    font-weight: 600;
    color: #1f4ce8;
}
/* Dezenter Admin-Login-Link oben rechts im Wartungs-Overlay. */
.maintenance-admin-link {
    position: absolute;
    top: 0.9rem;
    right: 1.2rem;
    font-size: 0.78rem;
    color: #888;
    text-decoration: none;
    border-bottom: 1px dotted #bbb;
    padding-bottom: 1px;
}
.maintenance-admin-link:hover {
    color: #1f4ce8;
    border-bottom-color: #1f4ce8;
}

/* Banner für den Admin-Bypass-Modus während der Wartung */
.maintenance-admin-banner {
    background: #fff3cd;
    border-bottom: 1px solid #ffb84d;
    color: #5a4400;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.maintenance-admin-banner strong { color: #4a3500; }
.maintenance-admin-banner .maintenance-admin-reload {
    color: #1f4ce8;
    text-decoration: underline;
    margin-left: 0.4rem;
}
body.maintenance-admin-mode #map {
    display: none;
}

/* Zeitleiste-Modal — feste Höhe 300px (User-Wunsch: nicht vertikal
   änderbar). Horizontale Breite default 960px, per Handle veränderbar. */
.chart-modal--timeline {
    width: min(960px, calc(100% - 5rem));
    height: 300px;
    max-height: 300px;
    /* top übernimmt von .chart-modal (4.5rem) — Override entfernt, weil
       4rem unter der Map-Bar visuell zu eng war. */
}
.timeline-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: #fff;
}
.timeline-body .timeline-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.timeline-svg { display: block; font-family: inherit; }
.timeline-axis {
    font-size: 10px;
    fill: #777;
}
.timeline-edge {
    font-size: 12px;
    font-weight: 600;
    fill: #222;
}
.timeline-edge--left  { text-anchor: start; }
.timeline-edge--right { text-anchor: end; }
.timeline-grid {
    stroke: #ececef;
    stroke-width: 1;
}
.timeline-plot-bg {
    stroke: #d0d4dc;
    stroke-width: 1;
}
.timeline-bar {
    cursor: pointer;
    transition: filter 80ms ease, stroke 80ms ease, stroke-width 80ms ease;
}
.timeline-bar:hover {
    filter: brightness(1.2) saturate(1.15);
    stroke: #111 !important;
    stroke-width: 1.6 !important;
}

/* HTML-Tooltip — schneller und auffälliger als das Browser-Default
   <title>-Element. Wird vom JS positioniert (absolute innerhalb des
   timeline-body). */
.timeline-body { position: relative; }
.timeline-tooltip {
    position: absolute;
    z-index: 10;
    background: #222;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    max-width: 280px;
    pointer-events: none;
    white-space: normal;
}
.timeline-tooltip[hidden] { display: none; }
.timeline-tooltip-dates {
    color: #bbd;
    font-variant-numeric: tabular-nums;
}
.timeline-tooltip-db {
    color: #aaa;
    font-style: italic;
}

/* Cursor-Linie an der Maus-Position */
.timeline-cursor-line {
    stroke: #d63b1f;
    stroke-width: 1;
    stroke-dasharray: 3, 3;
    pointer-events: none;
}
.timeline-cursor-label-bg {
    fill: rgba(214, 59, 31, 0.92);
    pointer-events: none;
}
.timeline-cursor-label-text {
    fill: #fff;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.timeline-hover-area { cursor: crosshair; }

/* Slider — Track + aktiver Range + Handles */
.timeline-slider-track {
    fill: #e1e4ea;
}
.timeline-slider-range {
    fill: rgba(31, 76, 232, 0.35);
    pointer-events: auto;
    cursor: grab;
}
.timeline-slider-range:hover {
    fill: rgba(31, 76, 232, 0.5);
}
.timeline-slider-range.is-dragging {
    cursor: grabbing;
    fill: rgba(31, 76, 232, 0.6);
}
.timeline-slider-handle {
    fill: #fff;
    stroke: #555;
    stroke-width: 1;
    cursor: ew-resize;
}
.timeline-slider-handle:hover,
.timeline-slider-handle.is-dragging {
    fill: #1f4ce8;
    stroke: #1f4ce8;
}

/* Server-Log-Modal — wie ein normales chart-modal (draggable, resizable),
   nur größer und mit 4:3-Default-Größe. Wir nehmen den jeweils kleineren
   der beiden Werte, damit weder Breite (95 vw) noch Höhe (90 vh) den
   Viewport sprengt. Die `aspect-ratio` wirkt nur, solange der User das
   Fenster nicht selber resized — danach gewinnen die Inline-Styles.
   Diese Regeln stehen ABSICHTLICH am Dateiende, damit sie .chart-modal
   überschreiben (Spezifität ist gleich, also gewinnt die spätere Regel). */
.chart-modal--admin-log {
    display: flex;
    flex-direction: column;
    width:  min(95vw, calc(90vh * 4 / 3));
    height: min(90vh, calc(95vw * 3 / 4));
    max-height: 95vh;
    aspect-ratio: 4 / 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.admin-log-frame {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}

/* =========================================================================
   Adaptive Layouts: Compact (kleine Laptops / 720p) + Ultrawide (21:9 / 32:9)
   ------------------------------------------------------------------------
   Reine CSS-Anpassungen via Media-Queries, automatisch. Keine Verhaltens-
   änderung — User behält alle Fenster gleichzeitig wenn er will.
   ========================================================================= */

/* --- Compact: 720p, 1440×900, 1366×768 ---------------------------------- */
@media (max-height: 820px), (max-width: 1366px) {
    :root {
        --header-height: 24px;
        --footer-height: 24px;
    }

    .map-search-bar { top: 0.5rem; }
    .map-dock       { top: 3.5rem; gap: 0.7rem; }

    /* Side-Panels schmaler + dichter unter dem Header */
    .side-panel        { width: 280px; top: 3.6rem; max-height: calc(100% - 4.6rem); }
    .side-panel--right { width: 270px; }
    /* Erweiterte Suche: schmaler (kein 2-Spalten-Grid auf compact wegen
       <440 px Container — Pair-Mode für Datenart+Unterkategorie triggert
       bei Höhen-Engpass). Initial-Höhe an die compact-Tabelle (50 %) +
       reduzierten Top-Offset angepasst. */
    .side-panel--left  { width: 300px; height: calc(50% - 4.35rem); }

    /* Legende + Downloads: max-height runter, damit sie sich nicht mit der
       Result-Table am Bildschirmrand schlagen. Selektor-Spezifität muss
       der Base-Regel (#…-panel.side-panel--right) entsprechen, sonst greift
       die Compact-Variante nicht. */
    #legend-panel.side-panel--right    { width: 300px; max-height: 45vh; }
    #downloads-panel.side-panel--right { width: 280px; max-height: 50vh; }

    /* Result-Table bekommt auf compact mehr vertikalen Platz (Tabelle ist
       die wichtigste Sicht). Position/Breite kommt vom Base — links neben
       Map-Dock, Breite vom Inhalt bestimmt. */
    .result-table-panel {
        height: 50%;
        min-height: 160px;
    }

    /* Chart-Modal-Body darf mehr Höhe nutzen — Geom-Info-Tabellen waren bei
       50vh schon nach 4 Zeilen abgeschnitten */
    .chart-modal-body--scroll { max-height: 60vh; }

    /* Timeline hat fixe Höhe — auf 720p ist 300 px zu viel */
    .chart-modal--timeline { height: 220px; max-height: 220px; }
}

/* Map-Dock-Labels nur auf 720p ausblenden — auf 1366×768 stört es weniger,
   bei <=720 wird's eng */
@media (max-height: 720px) {
    .map-dock-label { display: none; }
}

/* Footer-Seiten-Editor (Admin: Pages / Page_Titel_* / Page_Filename_*).
   Zwei Inputs + Entfernen-Button pro Zeile. */
.admin-pages-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.3rem 0 0.5rem; }
.admin-pages-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

/* ───────────────────────── DataCollections-Verwaltung ─────────────────────
   Admin-Tab „Datensammlungen": Kopfzeile pro Sammlung mit Name + Status-Badge
   + Aktionen (Deaktivieren/Entfernen); Hinzufügen-Sektion (String → Vorschau →
   Speichern); deaktivierte Sammlungen optisch abgesetzt. */
.admin-coll-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.admin-coll-head h3 {
    margin: 0;
    flex: 0 1 auto;
}
.admin-coll-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.admin-coll-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.6;
    background: #e8efff;
    color: #2563eb;
}
.admin-coll-badge--off {
    background: #fdeceb;
    color: #c0392b;
}

/* Deaktivierte Sammlung: ausgegraut + linker Warnstreifen, bleibt aber lesbar. */
.admin-section--disabled {
    opacity: 0.62;
    border-left: 3px solid #d9a441;
    padding-left: 0.7rem;
    background: rgba(217, 164, 65, 0.04);
}
.admin-section--disabled:hover { opacity: 0.85; }

/* Hinzufügen-Sektion */
.admin-coll-add { border-top: 2px dashed var(--window-border); padding-top: 0.8rem; }
.admin-coll-textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0.4rem 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--window-border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    resize: vertical;
    background: #fff;
}
.admin-coll-textarea:focus {
    outline: none;
    border-color: #005084;
    box-shadow: 0 0 0 2px rgba(0, 80, 132, 0.12);
}
.admin-coll-preview {
    margin-top: 0.8rem;
    padding: 0.7rem;
    border: 1px solid var(--window-border);
    border-radius: 6px;
    background: #f8f9fa;
}
.admin-coll-save { margin-top: 0.6rem; }