/* ============================================================
   Potree Standalone Viewer – Custom Styles
   shadcn/ui Design Tokens (Weg A – Vanilla CSS)
   ============================================================ */

/* ── Custom Fonts ───────────────────────────────────────────── */
@font-face {
    font-family: "PP Mori";
    src: url("/assets/PPMoriSquare-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PP Mori";
    src: url("/assets/PPMoriSquare-Italic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "PP Mori";
    src: url("/assets/PPMoriSquare-Bold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sohne Mono";
    src: url("/assets/SohneMono-Buch.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Zinc dark palette (shadcn "New York" / dark) */
    --background: 240 10% 5%; /* #0c0c12 */
    --card: 240 6% 10%; /* #181820 */
    --card-elevated: 240 6% 13%; /* #1f1f28 */
    --border: 240 4% 19%; /* #2c2c3a */
    --input: 240 4% 16%; /* #252533 */
    --muted: 240 4% 22%; /* #333342 */
    --muted-fg: 240 5% 56%; /* #858599 */
    --foreground: 0 0% 92%; /* #ebebeb */
    --foreground-dim: 240 5% 70%; /* #aaabbb */
    --primary: 221 83% 63%; /* #4a8fe8 */
    --primary-fg: 0 0% 98%; /* #fafafa */
    --destructive: 0 72% 50%; /* #e63232 */
    --success: 142 70% 45%; /* #22c55e — Status „gut"; war zuvor an ~10 Stellen einzeln hingeschrieben */
    --ring: 221 83% 63%; /* #4a8fe8 */
    --accent-orange: 25 100% 55%; /* #ff8c00 */

    --radius-sm: 0.25rem; /* 0.25em  */
    --radius: 0.375rem; /* 0.375em  */
    --radius-md: 0.5rem; /* 0.5em  */
    --radius-lg: 0.5rem; /* 0.75em */

    --font-sans:
        "PP Mori", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    /* System-Mono ZUERST (Legibilität vor Marke): In manchen Umgebungen
       (z.B. Safari hinter TLS-inspizierenden Firmen-Proxys) wird die eigene
       "Sohne Mono"-woff2 beschädigt/geblockt geladen; Safari nutzt die kaputte
       Schrift dann trotzdem und rendert ALLE Glyphen inkl. Ziffern als "?"-
       Notdef, ohne zurückzufallen. Kritische Zahl-Readouts (z.B. .measure-label
       für Maße in der Pointcloud) dürfen davon nicht abhängen. "Sohne Mono"
       bleibt nur als späte, kosmetische Option. NICHT nach vorne sortieren. */
    --font-mono:
        ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas,
        "Sohne Mono", monospace;

    --shadow-sm: 0 0.0625em 0.1875em hsl(240 15% 2% / 0.5);
    --shadow-md:
        0 0.25em 0.75em hsl(240 15% 2% / 0.5),
        0 0.125em 0.25em hsl(240 15% 2% / 0.3);
    --shadow-lg:
        0 0.5em 2em hsl(240 15% 2% / 0.65),
        0 0.125em 0.5em hsl(240 15% 2% / 0.4);

    --transition: 0.15s ease;

    /* ── Z-INDEX-EBENEN (Stapel-Reihenfolge) ────────────────────────────────
       EIN dokumentiertes Modell für alle viewport-weiten Ebenen. Reihenfolge
       unten → oben. Für React gibt es die Spiegelung in src/styles/zLayers.ts
       (Z) — beide MÜSSEN übereinstimmen. Neue schwebende Fläche? Passendes
       Token nehmen, KEINE freien Zahlen. Nested/lokale Stacking-Contexts
       (innerhalb einer Karte/eines Panels) brauchen das nicht.
         Canvas 0 · 3D-Overlays (Marker/Cluster/Cursor) 10000er ·
         Viewer-Chrome (Szenen-Pille, Docks, Leisten) 12000 ·
         Panels/Editoren 30000 · Modals/Dialoge 100000 · Toasts 100100 */
    --z-canvas: 0;
    --z-overlay: 10000;         /* Basis 3D-verankerte Overlays */
    --z-overlay-cluster: 10050;
    --z-overlay-marker: 10100;
    --z-overlay-marker-active: 10200;
    --z-overlay-cluster-hover: 10300;
    --z-overlay-cluster-badge: 10400;
    --z-cursor: 10900;          /* Cursor/Presence anderer Nutzer (über Markern) */
    --z-cursor-top: 11050;      /* Follow-Rahmen/Banner (oberste Presence-Schicht) */
    --z-chrome: 12000;          /* Viewer-Chrome: Szenen-Pille, Tab-/Detail-Leisten */
    --z-panel: 30000;           /* Seiten-Panels, Editoren, Presence-Leiste, ModellDock (rechte Seitenspalte) */
    --z-tour: 30500;            /* Onboarding-Tour (Karte + Ring; über Panels, unter Modals) */
    --z-modal: 100000;          /* Vollbild-Modals, Dialoge */
    --z-toast: 100100;          /* Toasts/Hinweise über allem */
}

html {
    font-size: 16px; /* em anchor — alle em-Werte basieren auf diesem Root-Wert */
}

/* ── Reset ─────────────────────────────────────────────────── */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-size: clamp(1.0625rem, 0.7813rem + 0.375vw, 1.25rem);
    -webkit-font-smoothing: antialiased;
}

/* ── Potree Container ───────────────────────────────────────── */
.potree_container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition:
        left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#potree_render_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* React root — base positioning (left/right/width aus CSS, damit doc-panel-active override greift) */
#react-root {
    left: 0;
    right: 0;
    width: 100%;
    transition:
        left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════
   DOC-PANEL-ACTIVE: LEGACY — Ersetzt durch AppShell (shell-panel-open).
   AppShell entfernt body.doc-panel-active aktiv. Regeln deaktiviert.
   ══════════════════════════════════════════════════════════════ */
:root {
    --doc-panel-w: 30em; /* noch von .doc-panel CSS verwendet */
}

/* ── Einstellungs-Panel: Ziehgriff, Suche, zweispaltiger Inhalt ──────────── */
.vsp-resize {
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    cursor: ew-resize;
    z-index: 1;
}
.vsp:hover .vsp-resize { background: rgba(255, 255, 255, 0.14); }
.vsp-resize:hover, .vsp-resize.is-drag { background: rgba(99, 102, 241, 0.6); }

.vsp-search {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vsp-search input {
    width: 100%;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 10px;
}
.vsp-search input::placeholder { color: rgba(255, 255, 255, 0.3); }
.vsp-search input:focus { outline: none; border-color: rgba(99, 102, 241, 0.7); }

/* Trefferzeile „auch in …" — führt in den anderen Tab, Filter bleibt stehen */
.vsp-other {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    padding-bottom: 2px;
}
.vsp-other button {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    font: inherit;
    font-size: 9px;
    padding: 1px 7px;
    cursor: pointer;
}
.vsp-other button:hover { color: #fff; border-color: rgba(99, 102, 241, 0.7); }
.vsp-noHit { color: rgba(255, 255, 255, 0.3); font-size: 10px; padding: 6px 0; }

/* Zweispaltig ab ausreichender Breite. Bewusst GRID statt CSS-Spalten:
   der Body scrollt vertikal (max-height 80vh) — echte Spalten würden bei zu
   langem Inhalt eine dritte Spalte nach rechts anlegen und waagerecht
   überlaufen. Im Grid bleiben Überschriften, Trenner, Hinweise und
   Wolken-Blöcke über die volle Breite, ihre Zeilen stehen zu zweit. */
.vsp--wide .vsp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    align-content: start;
}
/* Eine Einstellung = eine Einheit: die Zeile und ihr Hinweistext stecken in
   einem .vsp-item (setzt script.js nach jedem Rendern). Nur diese Einheiten
   stehen zu zweit; alles andere (Überschriften, Trenner, Wolken-Blöcke,
   Suchzeile) nimmt die volle Breite. Umgekehrte Regel statt Ausnahmeliste —
   ein übersehener Wrapper riss sonst das Raster auseinander. */
.vsp-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vsp-item > .vsp-hint { padding-top: 0 !important; padding-bottom: 0 !important; }
.vsp--wide .vsp-body > * { grid-column: 1 / -1; }
.vsp--wide .vsp-body > .vsp-item,
.vsp--wide .vsp-body > .vsp-row { grid-column: auto; }
/* Einheiten oben ausrichten, damit kurze neben langen nicht mittig schweben */
.vsp--wide .vsp-body { align-items: start; }
.vsp--wide .vsp-row label { min-width: 96px; font-size: 10.5px; }
.vsp--wide .vsp-val { min-width: 52px; font-size: 9.5px; }
/* Breite Tabs nicht auf die ganze Zeile strecken — sonst stehen sechs
   Beschriftungen einsam in sehr breiten Feldern. */
.vsp--wide .vsp-tabs { justify-content: flex-start; }
.vsp--wide .vsp-tab { flex: 0 0 auto; font-size: 10.5px; padding: 7px 20px; }

/* Nav cube overlay (inside potree_render_area — already shifts with .potree_container) */

/* DIN panels: Input Card bleibt rechts, kein Shift nötig */
/* DIN Report Panel: überlagert doc-panel → z-index regelt das */

/* ══════════════════════════════════════════════════════════════
   APP SHELL — Neues 3-Spalten-Layout
   NavRail (56px) | ContentPanel (400px) | MainArea (rest)
   ══════════════════════════════════════════════════════════════ */
:root {
    --nav-rail-w: 60px;              /* Sidebar collapsed */
    --sidebar-expanded-w: 280px;     /* Sidebar expanded */
    --content-panel-w: 400px;
    --shell-offset: var(--nav-rail-w);  /* default: nur Sidebar collapsed */
}

/* Nav-rail bleibt immer schmal — Labels nur als Hover-Tooltip */
body.shell-sidebar-expanded {
    --nav-rail-w: 60px;
}

/* When content panel is open, shift everything */
body.shell-panel-open {
    --shell-offset: calc(var(--nav-rail-w) + var(--content-panel-w));
}

/* Widen content panel when DocumentEditor is inline-active (+1/3) */
body.shell-editor-active {
    --content-panel-w: 533px;
}

/* Always shift potree by nav-rail (minimum), and by content-panel when open */
.potree_container {
    left: var(--shell-offset) !important;
    width: calc(100% - var(--shell-offset)) !important;
}

#react-root {
    left: 0 !important;
    width: 100% !important;
}

/* Hide potree + annotation markers when viewing docs or whiteboard.
   Die Szenen-/View-Nav-Pille sitzt ebenfalls in #viewer-shell und muss
   mitverschwinden — sonst leckt sie (z.B. „SZENEN · Test") beim Rücksprung
   Gebäude → Whiteboard/Board über die aktive Szene ins Board. */
body.shell-viewer-hidden .potree_container,
body.shell-viewer-hidden #bottom-dock,
body.shell-viewer-hidden #view-nav-pill,
body.shell-viewer-hidden .annotation-layer {
    display: none !important;
}

/* Potree maximieren wenn Viewer-Overlay aktiv (Scene/Audit aus Whiteboard) */
body.shell-viewer-overlay .potree_container {
    left: var(--nav-rail-w) !important;
    width: calc(100% - var(--nav-rail-w)) !important;
    z-index: 10060;
}
/* React-root ueber Potree heben, damit Overlay-Buttons sichtbar bleiben */
body.shell-viewer-overlay #react-root {
    z-index: 10070 !important;
}

/* Detail-Leiste (script.js, z-index 1200) im Viewer-Overlay über den
   angehobenen Potree-Container (10060) heben — Audit-Sprung-Ankunft */
body.shell-viewer-overlay #detail-edit-bar {
    z-index: 10075 !important;
}

/* Dock-Pill im Viewer-Overlay: Ansichts-Tabs ausblenden,
   Toolbox + Toggle bleiben, mittig auf Potree-Area */
body.shell-viewer-overlay #view-tabs,
body.shell-viewer-overlay .dock-sep {
    display: none !important;
}

body.shell-viewer-overlay #bottom-dock {
    left: calc(var(--nav-rail-w) + (100% - var(--nav-rail-w)) / 2) !important;
}

/* Viewer-Overlay: Annotation-Layer an Potree-Container ausrichten */
body.shell-viewer-overlay .annotation-layer {
    left: var(--nav-rail-w) !important;
    width: calc(100% - var(--nav-rail-w)) !important;
}

/* Pin taucht aus einem sich auflösenden Cluster auf (Felix 2026-09-18):
   Überfährt man in der Liste eine Zeile, deren Marker im Cluster steckt, weicht
   die Scheibe und die Pins treten mit Namen hervor. Die Animation läuft auf dem
   Marker-INHALT, nicht auf seiner Hülle — deren Deckkraft und Transform setzt
   die Positionier-Schleife in jedem Bild neu. */
@keyframes orto-pin-auftauchen {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    [data-component="AnnotationMarker"] { animation: none !important; }
}

/* ── Marker-Vorschau aus der Liste (Felix 2026-09-18) ──────────────────────
   Überfährt man in der Seitenleiste eine Zeile, deren Marker gerade NICHT zur
   Ansicht gehört (andere Szene, außerhalb des Ausschnitts), blendet der
   Renderview ihn samt Label kurz ein. Der gestrichelte Ring sagt: das ist eine
   Vorschau, kein Bestandteil der Ansicht — sobald die Maus die Zeile verlässt,
   ist er wieder weg. Der Ring sitzt um den 12-px-Punkt, dessen linke obere Ecke
   die Marker-Position ist (Versatz -6px/-50% steckt im Transform des Wrappers). */
.annotation-layer [data-peek="true"]::after {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    width: 22px;
    height: 22px;
    border: 1px dashed rgba(17, 24, 39, 0.55);
    border-radius: 50%;
    pointer-events: none;
}

/* Annotation-Overlay: Marker-Layer ueber Potree + Whiteboard-Overlay heben —
   aber UNTER der rechten Seitenspalte (.modell-dock = --z-panel), sonst schienen
   Marker/Labels durch das Panel (Felix 2026-09-07). 29999 > Whiteboard-Panel 29998. */
body.shell-annotation-overlay .annotation-layer {
    z-index: calc(var(--z-panel, 30000) - 1) !important;
    pointer-events: auto;
}

/* Shift header, loading, bottom-dock accordingly */
body.shell-panel-open #app-header {
    left: calc(var(--shell-offset) + 1.25em);
}

body.shell-panel-open #bottom-dock {
    left: calc(var(--shell-offset) + (100% - var(--shell-offset)) / 2);
}
body.shell-panel-open #status-bar {
    left: calc(var(--shell-offset) + 9em);
    opacity: 0;
    pointer-events: none;
}

body.shell-panel-open #brand-logo {
    left: calc(var(--shell-offset) + 1em);
}

/* When only nav-rail (no panel open), still shift */
body:not(.shell-panel-open) #app-header {
    left: calc(var(--nav-rail-w) + 1.25em);
}

body:not(.shell-panel-open) #bottom-dock {
    left: calc(var(--nav-rail-w) + (100% - var(--nav-rail-w)) / 2);
}

body:not(.shell-panel-open) #brand-logo {
    left: calc(var(--nav-rail-w) + 1em);
}

/* Modell-Dock offen: Pillen mittig im verbleibenden Potree-Bereich
   (rechts um --modell-dock-w verkürzt). Greift nur mit dieser Body-Klasse. */
body.shell-modell-dock-open #toast-stack,
body.shell-modell-dock-open #bottom-dock,
body.shell-modell-dock-open #view-nav-pill,
body.shell-modell-dock-open #detail-edit-bar,
body.shell-modell-dock-open .pano-overlay,
body.shell-modell-dock-open #rb-mode-toggle,
body.shell-modell-dock-open .gw-bar {
    left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + (100% - var(--shell-offset, var(--nav-rail-w, 60px)) - var(--modell-dock-w, 440px)) / 2);
}

/* ── Project Title Bar (top-left, next to sidebar) ──────────── */
.project-title-bar {
    position: fixed;
    top: 0.95em;
    left: calc(var(--nav-rail-w) + 1em);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-sans);
    font-size: 0.78125em;
    color: #666;
    user-select: none;
    pointer-events: auto;
    /* Spiegel von src/style.css (Merge stefan 13.09. hatte nur dort geändert).
       src/style.css wird NACH dieser Datei geladen und gewinnt ohnehin — der
       Block hier deckt den ersten Anstrich ab, bevor React montiert ist. Beide
       Stellen müssen gleich bleiben, sonst blitzt beim Laden die alte Optik auf. */
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    padding: 0.275em 0.75em 0.2em;
    border-radius: 1em;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* title-bar bleibt immer direkt neben der Sidebar, unabhaengig vom Content-Panel */

body.shell-viewer-hidden .project-title-bar {
    display: none;
}

.project-title-bar__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.286em;
    height: 2.286em;
    border: none;
    background: rgba(245, 245, 245, 0.75);
    backdrop-filter: blur(0.25em);
    border-radius: 0.35em;
    color: #777;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.project-title-bar__back:hover {
    background: rgba(235, 235, 235, 0.9);
    color: #000;
}

.project-title-bar__name {
    font-weight: 500;
    color: #555;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14em;
}

/* ══════════════════════════════════════════════════════════════
   DEV MODE — Layout-Overrides (müssen hier stehen weil src/style.css
   nach public/style.css geladen wird und !important-Regeln hat)
   ══════════════════════════════════════════════════════════════ */
body.dev-mode {
    --nav-rail-w: 0px;
    --content-panel-w: 0px;
    --shell-offset: 0px;
}

/* ── Dev Mode Header ──────────────────────────────────────────── */
#dev-mode-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    display: none; /* shown via body.dev-mode */
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    background: rgba(15, 15, 18, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 11000;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    overflow: visible;
    white-space: nowrap;
}
body.dev-mode #dev-mode-header {
    display: flex;
}

/* ── Raumbuch-Editor (snap-engine): fokussierte Zeichen-Umgebung ──
   Nur die Topbar bleibt; alle weiteren Overlays werden ausgeblendet,
   und aus der Topbar entfallen Punktwolken-/Ansicht-/Geschoss-Switcher. */
body.dev-mode[data-dev-page="snap-engine"] #view-nav-pill,
body.dev-mode[data-dev-page="snap-engine"] #svg-nav-cube,
body.dev-mode[data-dev-page="snap-engine"] .minimap-panel,
body.dev-mode[data-dev-page="snap-engine"] .dock-layer-chips,
body.dev-mode[data-dev-page="snap-engine"] #dev-cloud-switcher,
body.dev-mode[data-dev-page="snap-engine"] #dev-view-switcher,
body.dev-mode[data-dev-page="snap-engine"] #dev-fp-switcher {
    display: none !important;
}

/* ── Raumbuch Floating-Toggle Grundriss|3D (snap-engine) ──
   Deutlicher Moduswechsel: Grundriss = zeichnen, 3D = Kontrolle.
   Unten mittig schwebend, unabhängig von der Topbar. */
#rb-mode-toggle {
    position: fixed;
    bottom: 24px;
    /* Mitte des RENDER-VIEW, nicht des Viewports — dieselbe Rechnung wie
       #view-nav-pill / #bottom-dock / #toast-stack (sonst sitzt der
       Moduswechsel um die halbe Navigationsleiste versetzt). */
    left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + (100% - var(--shell-offset, var(--nav-rail-w, 60px))) / 2);
    transform: translateX(-50%);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-chrome, 12000);
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(24, 26, 30, 0.92);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.rb-mode-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.rb-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.rb-mode-btn.active {
    background: #fff;
    color: #1a1c20;
}
.rb-mode-btn svg {
    width: 18px;
    height: 18px;
}

/* Bodenzentrierte Modus-Leisten liegen alle an derselben Stelle
   (.gw-bar und #bottom-dock auf bottom: 1.15em). Führt ein Modus, tritt der
   Grundriss|3D-Umschalter zurück, statt sich zu überlagern:
   gw-active = Grundriss-Wizard · sw-inplace = Schnitt zeichnen ·
   kub-floors = Geschoss-Ansicht einer Kubatur (BAR-11). */
body.gw-active #rb-mode-toggle,
body.sw-inplace #rb-mode-toggle,
body.kub-floors #rb-mode-toggle { display: none !important; }


.dev-hdr-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.dev-hdr-back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.dev-hdr-title {
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dev-hdr-desc {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.dev-hdr-status {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.dev-hdr-status--wip {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.dev-hdr-status--done {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}
.dev-hdr-status--archived {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
}

.dev-hdr-spacer {
    flex: 1;
    min-width: 4px;
}

.dev-hdr-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dev-hdr-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}
.dev-hdr-btn--highlight {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.1);
    color: rgba(165, 180, 252, 0.9);
}
.dev-hdr-btn--highlight:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
}

.dev-hdr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.dev-hdr-fps {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    color: #34d399;
}

/* ── Cloud / Rooms / Layer Dropdown ───────────────────────────── */
.dev-hdr-cloud-switcher {
    position: relative;
    flex-shrink: 0;
}

.dev-cloud-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    padding: 6px;
    background: rgba(25, 25, 30, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 11100;
    font-size: 11px;
}
.dev-cloud-dropdown.open {
    display: block;
}

.dev-cloud-dropdown button,
.dev-cloud-dropdown .dev-dd-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.dev-cloud-dropdown button:hover,
.dev-cloud-dropdown .dev-dd-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.dev-cloud-dropdown .dev-dd-active {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.1);
}

.dev-cloud-dropdown .dev-dd-section {
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dev-cloud-dropdown .dev-dd-divider {
    height: 1px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.06);
}

/* Per-cloud settings inside dropdown */
.dev-cloud-dropdown .dev-dd-settings {
    padding: 6px 8px;
    font-size: 10px;
}
.dev-cloud-dropdown .dev-dd-settings label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 0;
    color: rgba(255, 255, 255, 0.5);
}
.dev-cloud-dropdown .dev-dd-settings input[type="range"] {
    width: 80px;
    accent-color: #6366f1;
}
.dev-cloud-dropdown .dev-dd-settings select {
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-family: inherit;
}

/* Rooms dropdown (wider) */
.dev-rooms-dropdown {
    min-width: 300px;
    max-height: 500px;
}

/* ── Dev Log Sidebar ──────────────────────────────────────────── */
/* Log-Sidebar entfernt — Logging nur noch via Browser-Konsole */

/* ── Dev Dashboard Overlay ────────────────────────────────────── */
/* ── Dev Dashboard (harmoniert mit Command Palette) ──────── */
#dev-dashboard-overlay {
    position: fixed;
    inset: 0;
    background: hsl(var(--background) / 0.7);
    backdrop-filter: blur(12px);
    z-index: 12000;
    display: none;
    overflow-y: auto;
    padding: 48px 24px;
}
#dev-dashboard-overlay.open {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    animation: cmd-backdrop-in 0.15s ease-out;
}

.dev-dash {
    width: 35em;
    max-width: calc(100vw - 3em);
    background: hsl(var(--card) / 0.97);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg),
        0 0 0 0.0625em hsl(var(--border) / 0.4);
    overflow: hidden;
    animation: cmd-palette-in 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.dev-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8125em 1em;
    border-bottom: 0.0625em solid hsl(var(--border));
}
.dev-dash h2 {
    font-size: 0.875em;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin: 0;
    font-family: var(--font-sans);
}
.dev-dash-sub {
    padding: 0.7619em 0.9524em 0.2857em;
    font-size: 0.6562em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: hsl(var(--muted-fg));
    font-family: var(--font-sans);
    user-select: none;
    margin: 0;
}
.dev-dash-close {
    width: 1.75em;
    height: 1.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: hsl(var(--muted-fg));
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.dev-dash-close:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.dev-dash-cards {
    display: flex;
    flex-direction: column;
    padding: 0.375em 0.375em 0.5em;
    max-height: 24.375em;
    overflow-y: auto;
}
.dev-dash-cards::-webkit-scrollbar {
    width: 0.25em;
}
.dev-dash-cards::-webkit-scrollbar-track {
    background: transparent;
}
.dev-dash-cards::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 0.125em;
}
.dev-dash-card {
    display: flex;
    align-items: center;
    gap: 0.6875em;
    padding: 0.4375em 0.625em;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
}
.dev-dash-card:hover {
    background: hsl(var(--muted));
}
.dev-dash-card-body {
    flex: 1;
    min-width: 0;
}
.dev-dash-card-hdr {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.dev-dash-card-title {
    font-size: 0.8125em;
    font-weight: 500;
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    line-height: 1.3;
}
.dev-dash-card p {
    font-size: 0.6875em;
    font-weight: 400;
    color: hsl(var(--muted-fg));
    font-family: var(--font-sans);
    line-height: 1.3;
    margin: 0.0909em 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dev-dash-card-tags {
    display: none;
}
.dev-dash-card-shortcut {
    flex-shrink: 0;
    font-size: 0.625em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    background: hsl(var(--muted));
    border: 0.1em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    padding: 0.2em 0.6em;
    line-height: 1.6;
}

/* ── Viewer Settings Panel (Shift+<) ─────────────────────────────── */
.vsp {
    position: fixed;
    top: 50px;
    right: 16px;
    /* Breite ziehbar (Griff links, Mechanik wie am rechten Dock):
       --vsp-w wird von script.js aus localStorage gesetzt, 320–760.
       Ab --vsp-wide-min läuft der Inhalt zweispaltig (.vsp--wide). */
    width: var(--vsp-w, 360px);
    /* Nie breiter als das Fenster (kleine Laptops, schmale Fenster) */
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    /* Über der rechten Seitenspalte (.modell-dock = --z-panel, seit 2026-09-07
       im Panel-Band) — das Einstellungs-Panel liegt oben rechts DARÜBER. */
    z-index: calc(var(--z-panel, 30000) + 10);
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}
.vsp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vsp-header:active { cursor: grabbing; }
.vsp-title {
    font-weight: 600;
    font-size: 12px;
    color: #fff;
}
.vsp-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    cursor: pointer;
}
.vsp-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.vsp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vsp-tab {
    flex: 1;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s, background 0.15s;
}
.vsp-tab:hover { color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.03); }
.vsp-tab--active {
    color: #fff;
    background: rgba(99, 102, 241, 0.15);
    box-shadow: inset 0 -2px 0 rgba(99, 102, 241, 0.7);
}
.vsp-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.vsp-body::-webkit-scrollbar { width: 4px; }
.vsp-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.vsp-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vsp-row label {
    flex-shrink: 0;
    min-width: 70px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}
.vsp-row input[type="range"] {
    flex: 1;
    height: 3px;
    accent-color: #6366f1;
}
.vsp-row input[type="checkbox"] {
    accent-color: #6366f1;
}
.vsp-row select {
    flex: 1;
    padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 10px;
}
.vsp-row input[type="color"] {
    width: 32px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.vsp-val {
    min-width: 38px;
    text-align: right;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}
.vsp-num {
    flex: 1;
    width: 60px;
    padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.vsp-section-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
    padding-bottom: 2px;
}
.vsp-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 0;
}
.vsp-empty {
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 20px 0;
}
/* ── Color Swatches (per-cloud) ── */
.vsp-color-row {
    padding: 2px 0 4px;
}
.vsp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.vsp-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}
.vsp-swatch:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.4);
}
.vsp-color-native {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    background: transparent;
}
/* ── Cloud Accordion ── */
.vsp-cloud {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 2px;
}
.vsp-cloud-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.12s;
}
.vsp-cloud-header:hover { background: rgba(255, 255, 255, 0.05); }
.vsp-cloud-name {
    flex: 1;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vsp-reg-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.vsp-reg-badge--active {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
.vsp-reg-badge--none {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}
.vsp-reg-detail {
    padding: 4px 8px 6px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.vsp-reg-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.vsp-reg-label--none {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 400;
    font-style: italic;
    text-transform: none;
}
.vsp-reg-row {
    display: flex;
    gap: 6px;
    font-size: 9px;
    line-height: 1.4;
}
.vsp-reg-key {
    color: rgba(255, 255, 255, 0.35);
    min-width: 22px;
    font-weight: 500;
}
.vsp-reg-val {
    color: rgba(255, 255, 255, 0.55);
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 8.5px;
}
.vsp-chevron {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.15s;
}
.vsp-eye {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.vsp-eye:hover { color: #fff; }
.vsp-cloud-body {
    padding: 6px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Registration Panel ───────────────────────────────────────── */
.reg-panel {
    position: fixed;
    top: 50px;
    left: 16px;
    width: 260px;
    padding: 12px;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 11200;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reg-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    user-select: none;
}
.reg-panel-header:active {
    cursor: grabbing;
}
.reg-panel-title {
    font-weight: 600;
    font-size: 12px;
    color: #fff;
}
.reg-panel-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 12px;
}
.reg-panel-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.reg-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reg-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 6px;
}
.reg-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.reg-select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
}

.reg-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.reg-mode-btns {
    display: flex;
    gap: 4px;
}
.reg-mode-btn {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.reg-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.reg-mode-btn.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}
.reg-hint {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
}

.reg-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.reg-axis-label {
    font-size: 10px;
    font-weight: 600;
    width: 12px;
    text-align: center;
}
.reg-input {
    flex: 1;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    text-align: right;
}

.reg-actions {
    flex-direction: row;
    gap: 6px;
}
.reg-btn {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.reg-btn--reset {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}
.reg-btn--reset:hover {
    background: rgba(255, 255, 255, 0.12);
}
.reg-btn--confirm {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}
.reg-btn--confirm:hover {
    background: rgba(52, 211, 153, 0.35);
}

/* ── Dev Rooms Table ──────────────────────────────────────────── */
.dev-rooms-table-overlay {
    position: fixed;
    top: 36px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 14, 0.9);
    backdrop-filter: blur(12px);
    z-index: 11300;
    overflow-y: auto;
    padding: 16px;
    display: none;
}
.dev-rooms-table-overlay.open {
    display: block;
}
.dev-rooms-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
}
.dev-rooms-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    background: rgba(15, 15, 20, 0.95);
}
.dev-rooms-table td {
    padding: 5px 8px;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dev-rooms-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* ── Cloud Dropdown Items ─────────────────────────────────────── */
.dev-cloud-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.dev-cloud-item:hover { background: rgba(255, 255, 255, 0.08); }
.dev-cloud-item.active { color: #a5b4fc; background: rgba(99, 102, 241, 0.1); }

.dev-cloud-item-wrap {
    display: flex;
    flex-direction: column;
}
.dev-cloud-item-row {
    display: flex;
    align-items: center;
}
.dev-cloud-item-row .dev-cloud-item { flex: 1; }

.dev-cloud-sub { padding-left: 22px; }
.dev-cloud-cb { font-size: 12px; flex-shrink: 0; width: 14px; }
.dev-cloud-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0; display: inline-block;
}
.dev-cloud-check {
    margin-left: auto; color: #4ade80; font-size: 11px; flex-shrink: 0;
}
.dev-cloud-section {
    padding: 6px 8px 2px;
    font-size: 9px; font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.dev-cloud-gear {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border: none; border-radius: 4px;
    background: transparent; color: rgba(255, 255, 255, 0.3);
    cursor: pointer; flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.dev-cloud-gear:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* Accordion (expandable settings) */
.dev-cloud-accordion {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 6px 8px;
    border: none; border-radius: 5px;
    background: transparent; color: rgba(255, 255, 255, 0.5);
    font-size: 10px; font-family: inherit; cursor: pointer;
    transition: background 0.12s;
}
.dev-cloud-accordion:hover { background: rgba(255,255,255,0.06); }
.dev-cloud-accordion-chevron {
    transition: transform 0.2s; flex-shrink: 0;
}
.dev-cloud-accordion-body {
    display: none; padding: 4px 6px 8px;
}
.dev-cloud-accordion-body.open { display: block; }

/* ── Grundriss-Dropdown ──────────────────────────────────── */
.dev-fp-dropdown { min-width: 260px; }
.dev-fp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 18px 12px 10px; text-align: center;
    color: rgba(255,255,255,0.35); font-size: 11px;
}
.dev-fp-empty-hint { font-size: 9px; color: rgba(255,255,255,0.2); margin-top: 2px; }
.dev-fp-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.dev-fp-item:last-of-type { border-bottom: none; }
.dev-fp-item--active { background: rgba(74,222,128,0.06); }
.dev-fp-item-header {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px; cursor: pointer; border-radius: 4px;
    transition: background 0.12s;
}
.dev-fp-item-header:hover { background: rgba(255,255,255,0.05); }
.dev-fp-item-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dev-fp-item-name {
    flex: 1; min-width: 40px;
    background: hsl(0 0% 12%); border: 1px solid hsl(0 0% 22%); border-radius: 3px;
    color: #e4e4e7; font-size: 11px; font-weight: 600; padding: 2px 6px; font-family: inherit;
    transition: border-color 0.15s; cursor: text;
}
.dev-fp-item-name:hover { border-color: rgba(255,255,255,0.25); }
.dev-fp-item-name:focus { border-color: hsl(215 80% 55%); outline: none; background: hsl(0 0% 8%); }
.dev-fp-item-meta { font-size: 9px; color: rgba(255,255,255,0.3); white-space: nowrap; }
.dev-fp-item-del {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; border-radius: 3px;
    background: transparent; color: rgba(255,255,255,0.2); cursor: pointer;
    transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.dev-fp-item-del:hover { background: rgba(239,68,68,0.15); color: #f87171; }
.dev-fp-item-settings {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 6px 5px 18px; font-size: 10px;
}
.dev-fp-item-settings label { color: rgba(255,255,255,0.3); font-size: 9px; }
.dev-fp-input {
    width: 52px; background: hsl(0 0% 10%); color: #e4e4e7;
    border: 1px solid hsl(0 0% 20%); border-radius: 3px;
    padding: 1px 4px; font-size: 10px; font-family: inherit;
}
.dev-fp-input:focus { border-color: hsl(215 80% 55%); outline: none; }
.dev-fp-input-unit { color: rgba(255,255,255,0.2); font-size: 9px; }
.dev-fp-create-btn {
    display: block; width: calc(100% - 8px); margin: 6px 4px 4px;
    padding: 6px 12px; border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 5px; background: transparent;
    color: rgba(255,255,255,0.5); font-size: 11px; font-family: inherit;
    cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dev-fp-create-btn:hover { background: rgba(255,255,255,0.05); color: #e4e4e7; border-color: rgba(255,255,255,0.25); }
.dev-fp-create-btn--cancel { border-color: rgba(239,68,68,0.3); color: rgba(239,68,68,0.7); }
.dev-fp-create-btn--cancel:hover { background: rgba(239,68,68,0.1); color: #f87171; border-color: rgba(239,68,68,0.5); }

/* Workflow Overlay */
.dev-fp-workflow-overlay {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 11200; min-width: 280px; max-width: 360px;
    background: rgba(20, 20, 28, 0.95); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    padding: 12px 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    font-size: 11px; color: #e4e4e7;
}
.dev-fp-wf-step {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.dev-fp-wf-step-num {
    background: hsl(215 80% 55%); color: white; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 8px;
}
.dev-fp-wf-step-title { font-weight: 600; font-size: 12px; }
.dev-fp-wf-hint { color: rgba(255,255,255,0.5); font-size: 11px; line-height: 1.5; margin-bottom: 10px; }
.dev-fp-wf-hint b { color: rgba(255,255,255,0.8); }
.dev-fp-wf-warn {
    background: rgba(234,179,8,0.12); border: 1px solid rgba(234,179,8,0.3);
    color: hsl(45 90% 65%); font-size: 11px; padding: 5px 8px; border-radius: 4px;
    margin-bottom: 8px; line-height: 1.4;
}
.dev-fp-wf-info {
    font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 8px;
    padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dev-fp-wf-height-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.dev-fp-wf-height-row label { color: rgba(255,255,255,0.4); font-size: 10px; min-width: 42px; }
.dev-fp-wf-input {
    flex: 1; background: hsl(0 0% 10%); color: #e4e4e7;
    border: 1px solid hsl(0 0% 22%); border-radius: 4px;
    padding: 4px 8px; font-size: 11px; font-family: inherit;
}
.dev-fp-wf-input:focus { border-color: hsl(215 80% 55%); outline: none; }
.dev-fp-wf-measure-btn {
    display: flex; align-items: center; gap: 3px;
    padding: 3px 8px; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px; background: transparent;
    color: rgba(255,255,255,0.5); font-size: 10px; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.dev-fp-wf-measure-btn:hover { background: rgba(255,255,255,0.06); color: #e4e4e7; }
.dev-fp-wf-actions {
    display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end;
}
.dev-fp-wf-cancel {
    padding: 4px 10px; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px; background: transparent;
    color: rgba(255,255,255,0.4); font-size: 10px; font-family: inherit;
    cursor: pointer; transition: background 0.12s;
}
.dev-fp-wf-cancel:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.dev-fp-wf-ok {
    padding: 4px 12px; border: none; border-radius: 4px;
    background: hsl(215 80% 50%); color: white;
    font-size: 10px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background 0.12s;
}
.dev-fp-wf-ok:hover { background: hsl(215 80% 60%); }
.dev-fp-wf-next {
    padding: 4px 12px; border: 1px solid hsl(150 60% 40%); border-radius: 4px;
    background: transparent; color: hsl(150 60% 60%);
    font-size: 10px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background 0.12s;
}
.dev-fp-wf-next:hover { background: rgba(74,222,128,0.1); }

/* Per-cloud settings */
.dev-pc-settings { display: flex; flex-direction: column; gap: 4px; }
.dev-cloud-setting {
    display: flex; flex-direction: column; gap: 2px;
}
.dev-cloud-setting-label {
    font-size: 9px; color: rgba(255, 255, 255, 0.4);
}
.dev-cloud-setting-row {
    display: flex; align-items: center; gap: 6px;
}
.dev-cloud-range {
    flex: 1; height: 3px; accent-color: #6366f1; cursor: pointer;
}
.dev-cloud-setting-val {
    min-width: 34px; text-align: right;
    font-size: 10px; color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}
.dev-cloud-select {
    width: 100%; padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff; font-size: 10px; font-family: inherit;
}

/* Color swatches */
.dev-cloud-color-row {
    display: flex; padding: 4px 0;
}
.dev-cloud-color-swatches {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.dev-cloud-swatch {
    width: 18px; height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px; cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
}
.dev-cloud-swatch:hover { transform: scale(1.15); }
.dev-cloud-swatch.active { border-color: #a5b4fc; box-shadow: 0 0 4px rgba(99,102,241,0.4); }
.dev-cloud-swatch-picker {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
    font-size: 12px; position: relative; overflow: hidden;
}
.dev-cloud-color-native {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

/* ── Geo-Anchor Panel ─────────────────────────────────────────── */
.dev-geo-panel {
    padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.dev-geo-row {
    display: flex; align-items: center; gap: 6px;
}
.dev-geo-label {
    font-size: 9px; color: rgba(255,255,255,0.4); min-width: 30px;
}
.dev-geo-input {
    flex: 1; padding: 3px 6px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
    background: rgba(255,255,255,0.04); color: #fff;
    font-size: 10px; font-family: inherit; text-align: right;
}
.dev-geo-slider {
    flex: 1; accent-color: #6366f1; cursor: pointer;
}
.dev-geo-num {
    min-width: 34px; text-align: right;
    font-size: 10px; color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
}
.dev-geo-unit {
    font-size: 9px; color: rgba(255,255,255,0.3);
}
.dev-geo-btn {
    padding: 4px 10px;
    border: 1px solid rgba(99,102,241,0.3); border-radius: 4px;
    background: rgba(99,102,241,0.1); color: #a5b4fc;
    font-size: 10px; font-family: inherit; cursor: pointer;
}
.dev-geo-btn:hover { background: rgba(99,102,241,0.2); }
.dev-geo-info {
    font-size: 9px; color: rgba(255,255,255,0.3); line-height: 1.4;
}

/* ── WMS Layer Filters ────────────────────────────────────────── */
.dev-layer-wrap { display: flex; flex-direction: column; gap: 2px; }
.dev-layer-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
}
.dev-layer-filters {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px;
}
.dev-layer-filter-btn {
    padding: 2px 8px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.5); font-size: 9px;
    font-family: inherit; cursor: pointer;
}
.dev-layer-filter-btn:hover { background: rgba(255,255,255,0.08); }
.dev-layer-filter-btn.active {
    background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3);
    color: #a5b4fc;
}
.dev-layer-remove-btn {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    padding: 0; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.45); font-size: 11px; line-height: 1;
    font-family: inherit; cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dev-layer-remove-btn:hover {
    background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35);
    color: #fca5a5;
}
.dev-layers-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dev-layers-clear-btn {
    padding: 2px 8px; border: 1px solid rgba(239,68,68,0.25);
    border-radius: 4px; background: rgba(239,68,68,0.08);
    color: #fca5a5; font-size: 9px; font-weight: 600;
    font-family: inherit; cursor: pointer; text-transform: none; letter-spacing: 0;
    transition: background 0.12s, border-color 0.12s;
}
.dev-layers-clear-btn:hover {
    background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.45);
}
.dev-filter-row {
    display: flex; align-items: center; gap: 6px; padding: 2px 8px;
}
.dev-filter-label {
    font-size: 9px; color: rgba(255,255,255,0.4); min-width: 50px;
}
.dev-filter-slider { flex: 1; accent-color: #6366f1; }
.dev-filter-val {
    min-width: 30px; text-align: right;
    font-size: 10px; color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
}
.dev-filter-toggle {
    padding: 2px 8px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5); font-size: 9px;
    font-family: inherit; cursor: pointer;
}
.dev-filter-toggle.active {
    background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.3);
    color: #34d399;
}

/* ── Rooms Dropdown ───────────────────────────────────────────── */
.rooms-empty {
    padding: 16px 12px; text-align: center;
    color: rgba(255,255,255,0.35);
}
.rooms-empty-icon {
    font-size: 22px; margin-bottom: 6px; opacity: 0.5;
}
.rooms-empty-text { font-size: 11px; }
.rooms-empty-actions {
    display: flex; gap: 6px; justify-content: center; margin-top: 10px;
}

/* Layer-Mode Pill (Punktwolke / Überlagert / Raumbuch) */
.rooms-layer-pill {
    display: flex; gap: 2px; padding: 6px 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rooms-layer-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 0; border: none; border-radius: 5px;
    font-size: 10px; font-weight: 500; cursor: pointer;
    background: transparent; color: rgba(255,255,255,0.4);
    transition: background 0.15s, color 0.15s;
}
.rooms-layer-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.rooms-layer-btn--active {
    background: rgba(255,255,255,0.1); color: #fff; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.rooms-actions-bar {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rooms-action-btn {
    display: flex; align-items: center; gap: 3px;
    padding: 3px 8px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.6); font-size: 10px;
    font-family: inherit; cursor: pointer;
    transition: background 0.12s;
}
.rooms-action-btn:hover { background: rgba(255,255,255,0.08); }
.rooms-action-btn--primary {
    border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.1);
    color: #a5b4fc;
}
.rooms-action-btn--primary:hover { background: rgba(99,102,241,0.2); }
.rooms-action-btn--warn {
    border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.08);
    color: #fbbf24;
}
.rooms-action-btn--warn:hover { background: rgba(251,191,36,0.18); }
.rooms-action-btn--cyan {
    border-color: rgba(34,211,238,0.3); background: rgba(34,211,238,0.08);
    color: #22d3ee;
}
.rooms-action-btn--cyan:hover { background: rgba(34,211,238,0.18); }

.rooms-opacity-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rooms-opacity-label {
    font-size: 9px; color: rgba(255,255,255,0.4);
}
.rooms-opacity-slider { flex: 1; accent-color: #6366f1; }
.rooms-opacity-value {
    min-width: 30px; text-align: right;
    font-size: 10px; color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
}

.rooms-summary {
    padding: 5px 8px; font-size: 10px;
    color: rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rooms-item {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rooms-item--active { background: rgba(99,102,241,0.06); }
.rooms-item--isolated { background: rgba(251,191,36,0.06); }

.rooms-item-header {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; cursor: pointer;
    transition: background 0.12s;
}
.rooms-item-header:hover { background: rgba(255,255,255,0.04); }

.rooms-item-id {
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.7); min-width: 30px;
}
.rooms-item-name {
    flex: 1; padding: 1px 4px;
    border: 1px solid transparent; border-radius: 3px;
    background: transparent; color: rgba(255,255,255,0.65);
    font-size: 10px; font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.rooms-item-name:focus {
    border-color: rgba(99,102,241,0.4);
    background: rgba(255,255,255,0.04);
    outline: none;
}
.rooms-item-area, .rooms-item-vol {
    font-size: 9px; color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rooms-item-edit, .rooms-item-isolate {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border: none; border-radius: 3px;
    background: transparent; color: rgba(255,255,255,0.3);
    cursor: pointer; flex-shrink: 0; font-size: 11px;
}
.rooms-item-edit:hover, .rooms-item-isolate:hover {
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
}
.rooms-item-chevron {
    color: rgba(255,255,255,0.25);
    transition: transform 0.2s; flex-shrink: 0;
}

.rooms-detail {
    display: none; padding: 4px 8px 8px 36px;
    flex-direction: column; gap: 4px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.rooms-detail--open { display: flex; }
.rooms-detail-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; color: rgba(255,255,255,0.55);
}
.rooms-detail-unit { font-size: 9px; color: rgba(255,255,255,0.3); }

.rooms-floor-select {
    padding: 2px 6px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; background: rgba(255,255,255,0.04);
    color: #fff; font-size: 10px; font-family: inherit;
}
.rooms-height-input, .rooms-zbasis-input {
    width: 60px; padding: 2px 6px; text-align: right;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
    background: rgba(255,255,255,0.04); color: #fff;
    font-size: 10px; font-family: inherit;
}

.rooms-walls-hdr {
    font-size: 9px; color: rgba(255,255,255,0.3);
    padding-top: 4px; font-weight: 600;
}
.rooms-wall-item {
    display: flex; align-items: center; gap: 8px;
    padding: 1px 0; font-size: 10px;
}
.rooms-wall-id { color: rgba(255,255,255,0.5); min-width: 24px; }
.rooms-wall-len { color: rgba(255,255,255,0.4); }
.rooms-wall-area { color: rgba(255,255,255,0.4); }
.rooms-wall-add-opening {
    background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
    color: rgba(255,255,255,0.5); cursor: pointer; padding: 1px 3px; margin-left: auto;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.rooms-wall-add-opening:hover { color: #4a8fe8; border-color: #4a8fe8; }

/* ── Öffnungen (Fenster/Türen) pro Wand ── */
.rooms-opening-item {
    display: flex; align-items: center; gap: 6px;
    padding: 1px 0 1px 16px; font-size: 10px;
}
.rooms-opening-type { color: rgba(255,255,255,0.6); min-width: 36px; }
.rooms-opening-dim { color: rgba(255,255,255,0.5); }
.rooms-opening-sill { color: rgba(255,255,255,0.35); font-size: 9px; }
.rooms-opening-delete {
    background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer;
    padding: 0 2px; margin-left: auto; transition: color 0.15s;
}
.rooms-opening-delete:hover { color: #e44; }

/* ── Volume Info Badge (Detail-Card bei aktivem Raum) ──────────── */
.vol-info-badge {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10005;
    min-width: 140px;
    background: hsl(215 30% 12%);
    border: 1px solid hsl(215 50% 35%);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: #e4e4e7;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    pointer-events: none;
}
.vol-info-id {
    font-weight: 700;
    font-size: 13px;
    color: hsl(215 80% 65%);
    margin-bottom: 5px;
    text-align: center;
    letter-spacing: 0.5px;
}
.vol-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-bottom: 1px solid hsla(215 50% 30% / 0.25);
}
.vol-info-row:last-child { border-bottom: none; }
.vol-info-row span:first-child { color: hsl(215 30% 60%); }
.vol-info-row span:last-child { color: #e4e4e7; font-variant-numeric: tabular-nums; }

/* Kubatur-Detailkarte: Name, Geschoss- und Schnitt-Blöcke (BAR-11-Kontext) */
.vol-info-namerow input.vol-info-name {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
    background: hsla(215 50% 12% / 0.9);
    border: 1px solid hsla(215 50% 40% / 0.4);
    border-radius: 4px;
    color: #e4e4e7;
    font: inherit;
    font-size: 11px;
    padding: 2px 5px;
}
.vol-info-namerow input.vol-info-name:focus {
    outline: none;
    border-color: hsl(221 83% 63%);
}
.vol-info-grouphdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    padding-top: 5px;
    border-top: 1px solid hsla(215 50% 30% / 0.45);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(215 30% 62%);
}
.vol-info-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vol-info-stepper b {
    min-width: 1.1em;
    text-align: center;
    color: #e4e4e7;
    font-variant-numeric: tabular-nums;
}
.vol-info-btn--mini {
    padding: 1px 7px;
    font-size: 10px;
    line-height: 1.5;
}
.vol-info-row.vol-info-sub span:first-child {
    color: hsl(215 25% 72%);
}
.vol-info-row.vol-info-sub {
    padding-left: 8px;
    border-bottom-color: hsla(215 50% 30% / 0.15);
}

/* Raumbuch-Editor: Aktions-Buttons in der Detail-Card */
.vol-info-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid hsla(215 50% 30% / 0.35);
    pointer-events: auto;
}
.vol-info-btn {
    flex: 1;
    pointer-events: auto;
    padding: 5px 8px;
    border: 1px solid hsla(215 40% 50% / 0.4);
    border-radius: 6px;
    background: hsla(215 40% 25% / 0.5);
    color: #e4e4e7;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.vol-info-btn:hover {
    background: hsla(215 40% 35% / 0.6);
    border-color: hsla(215 40% 60% / 0.6);
}
.vol-info-btn--primary {
    background: hsl(215 65% 45%);
    border-color: hsl(215 65% 50%);
}
.vol-info-btn--primary:hover {
    background: hsl(215 65% 52%);
    border-color: hsl(215 65% 58%);
}
.vol-info-walls {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid hsla(215 50% 35% / 0.4);
}
.vol-info-wall-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 1px 0;
    font-size: 10px;
}
.vol-info-wall-row span:first-child { color: rgba(255,255,255,0.45); }
.vol-info-wall-row span:last-child { color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }

/* ── Kompaktes Raum-Label (inaktiv) ──────────────────────── */
.vol-info-label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10004;
    display: flex;
    align-items: center;
    gap: 6px;
    background: hsla(215 30% 12% / 0.80);
    border: 1px solid hsla(215 50% 35% / 0.5);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: #e4e4e7;
    pointer-events: none;
    white-space: nowrap;
}
.vol-label-id { font-weight: 600; color: hsl(215 80% 65%); }
.vol-label-floor {
    color: rgba(255,255,255,0.4); font-size: 9px; margin-left: 2px;
    background: rgba(255,255,255,0.08); padding: 0 3px; border-radius: 2px;
}
.vol-label-area { color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.vol-info-floor-select {
    background: rgba(255,255,255,0.08); color: #e4e4e7; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px; font-size: 10px; padding: 1px 4px; cursor: pointer; outline: none;
    max-width: 90px; pointer-events: auto;
}
.vol-info-floor-select:hover { border-color: rgba(255,255,255,0.25); }
.vol-info-floor-select:focus { border-color: hsl(215 80% 55%); }

/* ── Kubatur-Varianten ──────────────────────────────────── */
.vol-info-badge--building { border-color: hsl(25 80% 45%); }
.vol-info-badge--building .vol-info-id { color: hsl(25 90% 65%); }
.vol-info-label--building { border-color: hsla(25 80% 45% / 0.5); }
.vol-info-label--building .vol-label-id { color: hsl(25 90% 65%); }

@keyframes vol-badge-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Rooms Table Panel (rtbl-*) ───────────────────────────────── */
.rooms-table-panel {
    position: fixed; top: 36px; left: 0; right: 0; bottom: 0;
    background: rgba(12, 12, 16, 0.95);
    backdrop-filter: blur(16px);
    z-index: 11300; display: flex; flex-direction: column;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px; color: rgba(255,255,255,0.8);
}

.rtbl-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.rtbl-tabs { display: flex; gap: 4px; }
.rtbl-tab {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 12px; border: none; border-radius: 5px;
    background: transparent; color: rgba(255,255,255,0.45);
    font-family: inherit; font-size: 11px; cursor: pointer;
}
.rtbl-tab:hover { background: rgba(255,255,255,0.06); }
.rtbl-tab--active {
    background: rgba(99,102,241,0.15); color: #a5b4fc;
}
.rtbl-tab-count {
    padding: 0 5px; border-radius: 8px;
    background: rgba(255,255,255,0.08); font-size: 9px;
}
.rtbl-close-btn {
    margin-left: auto; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 5px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
    cursor: pointer; font-size: 13px;
}
.rtbl-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.rtbl-scroll {
    flex: 1; overflow: auto; padding: 0 12px 12px;
}
.rtbl-scroll::-webkit-scrollbar { width: 5px; }
.rtbl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.rtbl-table {
    width: 100%; border-collapse: collapse;
}
.rtbl-table th {
    padding: 6px 8px; text-align: left; font-weight: 600;
    font-size: 9px; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky; top: 0;
    background: rgba(12, 12, 16, 0.98);
    white-space: nowrap;
}
.rtbl-empty {
    padding: 24px; text-align: center;
    color: rgba(255,255,255,0.3); font-size: 12px;
}
.rtbl-footer {
    padding: 6px 12px; border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 10px; color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

/* Table column widths */
.rtbl-th-cb { width: 28px; }
.rtbl-th-id { width: 50px; }
.rtbl-th-name { min-width: 120px; }
.rtbl-th-notes { min-width: 100px; }
.rtbl-th-usage { width: 100px; }
.rtbl-th-floor { width: 80px; }
.rtbl-th-vol { width: 70px; text-align: right; }
.rtbl-th-area { width: 70px; text-align: right; }
.rtbl-th-height { width: 60px; text-align: right; }
.rtbl-th-zbasis { width: 60px; text-align: right; }

/* Floor groups */
.rtbl-group { margin-top: 2px; }
.rtbl-group-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; cursor: pointer;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s;
}
.rtbl-group-hdr:hover { background: rgba(255,255,255,0.05); }
.rtbl-group-cb { accent-color: #6366f1; }
.rtbl-group-label {
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.65);
}
.rtbl-group-count {
    font-size: 9px; color: rgba(255,255,255,0.35);
    padding: 0 5px; border-radius: 8px;
    background: rgba(255,255,255,0.06);
}
.rtbl-group-area {
    margin-left: auto; font-size: 10px;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
}

/* Table rows */
.rtbl-row {
    display: table-row;
}
.rtbl-row:hover td { background: rgba(255,255,255,0.02); }
.rtbl-row--sel td { background: rgba(99,102,241,0.06); }

.rtbl-table td {
    padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
}
.rtbl-row-cb { accent-color: #6366f1; }

.rtbl-cell-id {
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.5); cursor: pointer;
}
.rtbl-cell-id--cyan { color: #22d3ee; }
.rtbl-cell-num {
    text-align: right; font-variant-numeric: tabular-nums;
    font-size: 10px; color: rgba(255,255,255,0.55);
}

/* Editable cells */
.rtbl-edit {
    width: 100%; padding: 2px 5px;
    border: 1px solid transparent; border-radius: 3px;
    background: transparent; color: rgba(255,255,255,0.7);
    font-size: 10px; font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.rtbl-edit:focus {
    border-color: rgba(99,102,241,0.4);
    background: rgba(255,255,255,0.04);
    outline: none;
}
.rtbl-edit-name { min-width: 100px; }
.rtbl-edit-notes { min-width: 80px; }
.rtbl-edit-usage, .rtbl-edit-floor {
    padding: 2px 4px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 3px;
    background: rgba(255,255,255,0.04); color: #fff;
    font-size: 10px; font-family: inherit;
}
.rtbl-edit-num {
    width: 55px; text-align: right;
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 3px;
    background: rgba(255,255,255,0.04); color: #fff;
    font-size: 10px; font-family: inherit;
}
.rtbl-edit-height, .rtbl-edit-zbasis { width: 50px; }

/* Bulk action bar */
.rtbl-bulk-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 6px 12px;
    background: rgba(99,102,241,0.08);
    border-bottom: 1px solid rgba(99,102,241,0.15);
}
.rtbl-bulk-count {
    font-size: 10px; color: #a5b4fc; font-weight: 600;
    margin-right: 4px;
}
.rtbl-bulk-num {
    width: 55px; padding: 3px 6px; text-align: right;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
    background: rgba(255,255,255,0.06); color: #fff;
    font-size: 10px; font-family: inherit;
}
.rtbl-bulk-floor {
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
    background: rgba(255,255,255,0.06); color: #fff;
    font-size: 10px; font-family: inherit;
}
.rtbl-bulk-apply {
    padding: 3px 10px; border: none; border-radius: 4px;
    background: rgba(99,102,241,0.25); color: #a5b4fc;
    font-size: 10px; font-family: inherit; cursor: pointer;
}
.rtbl-bulk-apply:hover { background: rgba(99,102,241,0.4); }
.rtbl-bulk-delete {
    padding: 3px 10px; border: none; border-radius: 4px;
    background: rgba(239,68,68,0.15); color: #f87171;
    font-size: 10px; font-family: inherit; cursor: pointer;
}
.rtbl-bulk-delete:hover { background: rgba(239,68,68,0.3); }
.rtbl-bulk-isolate {
    padding: 3px 10px; border: none; border-radius: 4px;
    background: rgba(251,191,36,0.12); color: #fbbf24;
    font-size: 10px; font-family: inherit; cursor: pointer;
}
.rtbl-bulk-isolate:hover { background: rgba(251,191,36,0.25); }
.rtbl-bulk-clear {
    padding: 3px 10px; border: none; border-radius: 4px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
    font-size: 10px; font-family: inherit; cursor: pointer;
}
.rtbl-bulk-clear:hover { background: rgba(255,255,255,0.12); }

/* Hide React sidebar + content panel in dev mode */
body.dev-mode .sidebar {
    display: none !important;
}
body.dev-mode .nav-rail {
    display: none !important;
}
body.dev-mode .content-panel {
    display: none !important;
}
body.dev-mode .app-shell {
    pointer-events: none !important;
}

body.dev-mode .potree_container {
    left: 0 !important;
    width: 100% !important;
    top: 36px !important;
    height: calc(100% - 36px) !important;
}

body.dev-mode #potree_render_area {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

body.dev-mode #app-header {
    top: calc(36px + 1.25em) !important;
    left: 1.25em !important;
}


body.dev-mode #bottom-dock,
body.dev-mode #dock-pill {
    display: none !important;
}
body.dev-mode #status-bar {
    display: none !important;
}
body.dev-mode #brand-logo {
    display: none !important;
}
body.dev-mode [data-component="ProjectTitleBar"] {
    display: none !important;
}
body.dev-mode .annotation-layer,
body.dev-mode [data-component="AnnotationLayer"] {
    display: none !important;
}

/* ZoomTierIndicator unter den Dev-Header schieben */
body.dev-mode [data-component="ZoomTierIndicator"] {
    top: calc(36px + 1em) !important;
}

/* ── Alle Nicht-Dev App-Panels im Dev-Modus unterdrücken ──
   Verhindert, dass Gebäude-Panel, Raumbuch, Audit-Dialoge,
   Toolbox, Viewer-Overlays etc. im Dev-Modus erscheinen. */
body.dev-mode #toolbox-panel,
body.dev-mode #view-tabs,
body.dev-mode #doc-viewer-overlay,
body.dev-mode:not([data-dev-page="snap-engine"]) .rooms-table-panel,
/* audit-dialog bewusst NICHT im dev-mode versteckt — soll immer sichtbar sein */
body.dev-mode .building-float,
body.dev-mode [data-component="BuildingPanel"],
body.dev-mode [data-component="RaumbuchPanel"],
body.dev-mode [data-component="AuditPanel"],
body.dev-mode [data-component="ScanPanel"],
body.dev-mode .raumbuch-overlay,
body.dev-mode .whiteboard-panel,
body.dev-mode [data-component="BoardPanel"] {
    display: none !important;
}

/* ── Animations-Prototyp: nur das Animationstool (AnimationBar) zeigen ──
   Die restliche App-Chrome ist bereits über body.dev-mode ausgeblendet;
   diese drei schwebenden Elemente sind dort nicht erfasst und würden sonst
   über der Bühne stehen bleiben. Nur im Animationsmodus ausblenden, damit
   andere Dev-Prototypen View-Pill/Minimap weiter nutzen können. */
body.dev-mode[data-dev-page="animation"] #view-nav-pill,
body.dev-mode[data-dev-page="animation"] .dock-layer-chips,
body.dev-mode[data-dev-page="animation"] .minimap-panel {
    display: none !important;
}

/* ── Snap-Panel (PolygonDrawTool) ────────────────────────────── */
.snap-panel {
    position: fixed; left: 12px; bottom: 12px; width: 260px;
    background: rgba(12, 12, 16, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    z-index: 11200;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px; color: rgba(255,255,255,0.8);
    padding: 0; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}
.snap-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.snap-panel-title { font-weight: 600; font-size: 11px; color: rgba(255,255,255,0.7); }
.snap-panel-close {
    background: none; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px;
}
.snap-panel-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.snap-section { padding: 4px 10px 0; }
.snap-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.35); font-weight: 600; margin-bottom: 2px; }
.snap-toggle-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px; font-size: 10px; color: rgba(255,255,255,0.7);
}
.snap-toggle-row label { cursor: pointer; flex: 1; }
.snap-toggle-row input[type="checkbox"] { accent-color: #4a8fe8; width: 13px; height: 13px; }
.snap-toggle-row input[type="range"] { flex: 1; accent-color: #4a8fe8; height: 3px; }
.snap-toggle-val { font-size: 10px; color: rgba(255,255,255,0.4); min-width: 36px; text-align: right; font-family: 'SF Mono', monospace; }
.snap-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
.snap-status-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px; font-size: 10px;
}
.snap-status-badge {
    padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
}
.snap-status-badge.point { background: rgba(74,143,232,0.15); color: #4a8fe8; }
.snap-status-badge.edge { background: rgba(251,191,36,0.15); color: #fbbf24; }
.snap-status-badge.grid { background: rgba(34,197,94,0.15); color: #22c55e; }
.snap-status-badge.angle { background: rgba(168,85,247,0.15); color: #a855f7; }
.snap-pos-label { font-family: 'SF Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.3); }
.snap-axis-badge {
    padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); min-width: 20px; text-align: center;
}
.snap-axis-badge.h { background: rgba(239,68,68,0.15); color: #ef4444; }
.snap-axis-badge.v { background: rgba(34,197,94,0.15); color: #22c55e; }
.snap-dist-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px; font-size: 10px;
}
.snap-dist-val { font-family: 'SF Mono', monospace; font-size: 13px; font-weight: 700; color: #4a8fe8; }
.snap-actions {
    display: flex; gap: 4px; padding: 6px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.snap-actions button {
    flex: 1; padding: 5px 0; border: none; border-radius: 5px;
    font-size: 10px; font-weight: 600; cursor: pointer;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
    transition: background 0.15s;
}
.snap-actions button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.snap-actions button.snap-btn-primary { background: rgba(74,143,232,0.2); color: #4a8fe8; }
.snap-actions button.snap-btn-primary:hover { background: rgba(74,143,232,0.35); }
.snap-vertex-count {
    padding: 3px 10px; font-size: 10px; color: rgba(255,255,255,0.3);
    font-family: 'SF Mono', monospace;
}

/* ── AppShell Container ──────────────────────────────────────── */
.app-shell {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    pointer-events: none;
    z-index: 10050;
    font-family: var(--font-sans);
}

.app-shell > * {
    pointer-events: auto;
}

/* ── NavRail ─────────────────────────────────────────────────── */
.nav-rail {
    width: var(--nav-rail-w);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border-right: 1px solid #eaeaea;
    z-index: 10600;
    flex-shrink: 0;
    padding: 6px 0;
    box-sizing: border-box;
    overflow: visible;
}

.nav-rail__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    padding: 6px 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    border-radius: 8px;
    position: relative;
    gap: 2px;
    overflow: visible;
}

.nav-rail__btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #374151;
}

.nav-rail__btn--action {
    min-height: 40px;
    color: #9ca3af;
}

.nav-rail__btn--action:hover {
    color: #374151;
}

.nav-rail__btn--nav.is-active,
.nav-rail__btn--action.is-active {
    color: #ffffff !important;
    background: #1a1a1a;
}

.nav-rail__indicator {
    display: none;
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #3b82f6;
    border-radius: 0 2px 2px 0;
}

.nav-rail__btn--nav.is-active .nav-rail__indicator {
    display: none;
}

.nav-rail__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-rail__btn--nav::after,
.nav-rail__btn--action::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: #1a1a1a;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
    z-index: 10700;
}

.nav-rail__btn--nav:hover::after,
.nav-rail__btn--action:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.nav-rail__groups {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-top: 8px;
}

.nav-rail__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.nav-rail__group--gap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid transparent;
}


/* ── Doc Preview (replaces viewer) ───────────────────────────── */
.app-shell__doc-preview {
    position: absolute;
    top: 0;
    left: var(--shell-offset);
    right: 0;
    bottom: 0;
    z-index: 10060;
    background: #4a4a4a;
    display: flex;
    align-items: stretch;
}

/* ── Hide old app-header (burger now in NavRail) ─────────────── */
#app-header {
    display: none !important;
}

/* ── DocumentEditor Inline Mode ──────────────────────────────── */
.doc-panel--inline {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.8125em;
}

.doc-panel--inline .doc-panel-header {
    padding: 1em 0.95em;
}

.doc-panel-inline-toolbar {
    border-bottom: 1px solid #eaeaea;
    padding: 4px 8px;
    background: #ffffff;
    flex-shrink: 0;
}

/* ── Quick Buttons (Potree) ─────────────────────────────────── */
/*
 * #potree_quick_buttons lebt in #potree_render_area (z-index: 1, eigener
 * Stacking-Context). Die Status-Bar hat z-index: 10000 im Root-Context und
 * malt deshalb ÜBER alles in #potree_render_area, unabhängig vom lokalen
 * z-index. bottom: 12px würde den Button hinter der 26px-hohen Status-Bar
 * verstecken → bottom: 34px schiebt ihn sicher darüber.
 */
#potree_quick_buttons {
    top: auto !important;
    bottom: 2.125em !important; /* 1.625em Status-Bar + 0.5em Luft */
    left: 0.75em !important;
}

/* #btn-din-form — old dark-theme styles removed; now styled via .top-action-btn */


/* ============================================================
   SCHNITT- & GRUNDRISS-SYSTEM
   ============================================================ */

/* ── Achslinien-Beschriftung (Bubble) ────────────────────── */
.axis-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875em;
    font-weight: 700;
    font-family: var(--font-mono);
    color: hsl(167 52% 85%);
    background: hsl(167 52% 18% / 0.92);
    border: 0.1364em solid hsl(167 52% 45%);
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
    cursor: context-menu;
    user-select: none;
    white-space: nowrap;
    transition: opacity 0.08s linear;
}

.axis-bubble:hover {
    border-color: hsl(167 52% 65%);
    background: hsl(167 52% 22% / 0.95);
}

/* ── Section Labels im 3D-Raum ──────────────────────────────── */
.section-label {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    display: flex;
    align-items: center;
    gap: 0.3125em;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.section-marker {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: hsl(var(--primary));
    border: 0.0938em solid hsl(0 0% 98%);
    flex-shrink: 0;
    transition: background var(--transition);
    box-shadow: 0 0 0 0.125em hsl(var(--primary) / 0.25);
}

.section-name {
    font-size: 0.6875em;
    font-family: var(--font-sans);
    font-weight: 600;
    color: hsl(var(--primary-fg));
    background: hsl(var(--primary) / 0.88);
    padding: 0.1818em 0.7273em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    letter-spacing: 0.025em;
    transition: background var(--transition);
    min-width: 2.1818em;
    outline: none;
    box-shadow: var(--shadow-sm);
}

.section-name.editing {
    background: hsl(var(--card));
    border: 0.0625em solid hsl(var(--accent-orange));
    color: hsl(var(--foreground));
    cursor: text;
    border-radius: var(--radius-sm);
}

.section-label.active .section-marker {
    background: hsl(var(--accent-orange));
    box-shadow: 0 0 0 0.125em hsl(var(--accent-orange) / 0.3);
}
.section-label.active .section-name {
    background: hsl(var(--accent-orange) / 0.88);
}

/* ── Vorschau-Dot ───────────────────────────────────────────── */
.section-preview-dot {
    position: absolute;
    width: 0.625em;
    height: 0.625em;
    border-radius: 50%;
    background: hsl(var(--accent-orange));
    border: 0.125em solid hsl(0 0% 98%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10001;
    box-shadow: 0 0 0 0.1875em hsl(var(--accent-orange) / 0.25);
}

/* ── Grundriss-Labels ───────────────────────────────────────── */
.floorplan-label {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        font-size 0.3s ease;
    gap: 0; /* kein gap nötig ohne marker-dot */
}
.floorplan-label .section-name {
    background: rgba(20, 20, 24, 0.85);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75em;
    font-weight: 700;
    padding: 0.2em 0.6em;
    letter-spacing: 0.04em;
    transition:
        opacity 0.3s ease,
        font-size 0.3s ease;
}
.floorplan-label.active .section-name {
    background: hsl(20 100% 50% / 0.92);
}

/* Geschosslinien-Labels in der Schnittansicht */
.section-geschoss-label,
.grundriss-schnitt-label {
    cursor: pointer;
    pointer-events: all;
    transition: none;
    transform-origin: 100% 50%;   /* Rotation pivotiert um right-center (Label-Anchor) */
}
.section-geschoss-label .section-name,
.grundriss-schnitt-label .section-name {
    font-family: var(--font-mono);
    border-radius: 3px;
    border: 1px solid;            /* Farbe pro Typ unten */
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    letter-spacing: 0.04em;
    padding: 0.5em 1em;
    font-size: 0.5em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(20, 20, 24, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* Border-Farbe = Hover-Farbe pro Typ, mit 0.5 Opazität */
.section-geschoss-label .section-name {
    border-color: rgba(74, 222, 128, 0.5);   /* Grundriss-Grün */
}
.grundriss-schnitt-label .section-name {
    border-color: rgba(96, 165, 250, 0.5);   /* Schnitt-Blau */
}
/* Hover Schnitt-Tab Geschoss-Label → Grundriss-Grün */
.section-geschoss-label:hover .section-name {
    background: rgb(74, 222, 128);
    color: rgba(20, 20, 24, 0.95);
    border-color: rgb(74, 222, 128);
}
/* Hover Grundriss-Tab Schnitt-Label → Schnitt-Blau */
.grundriss-schnitt-label:hover .section-name {
    background: rgb(96, 165, 250);
    color: rgba(20, 20, 24, 0.95);
    border-color: rgb(96, 165, 250);
}
/* Beim Inline-Umbenennen: neutrales Editier-Aussehen statt „aktiv"-Hover */
.section-name.editing {
    background: rgba(20, 20, 24, 0.95) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    cursor: text;
}
/* Schnitt-Tab: Höhenlabel links neben dem Geschoss-Namen.
   Look wie eine Höhenkote (.measure-label), aber grün passend zum Geschoss-
   Label; nur bei Hover eingeblendet; mit Abstand zum Namen. */
/* Höhere Spezifität (.section-label.section-geschoss-label) + !important, weil
   eine spätere .section-label-Regel (auch aus src/style.css) den gap sonst auf 0 setzt. */
.section-label.section-geschoss-label {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;   /* [Höhe] [Name] — Name bleibt am rechten Anchor */
    gap: 18px !important;             /* deutliche Fuge zwischen Höhenlabel und Geschoss-Label */
    column-gap: 18px !important;
}
.section-geschoss-label .section-height {
    font-family: var(--font-mono);
    font-size: 0.45em;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.16em 0.45em;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    line-height: 1.25;
    background: hsl(142 60% 8% / 0.92);
    color: hsl(142 70% 70%);
    border: 1px solid hsl(142 70% 45% / 0.55);
    opacity: 0;            /* nur bei Hover einblenden */
    transition: opacity 0.12s ease;
}
.section-geschoss-label:hover .section-height { opacity: 1; }
/* Blickrichtung-Schalter am Grundriss-Schnitt-Label: zwei Dreiecke (▲▼),
   aktive Seite ausgefüllt. Immer sichtbar (zeigt die Richtung). */
.grundriss-schnitt-label {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-direction: row-reverse;   /* Schalter links vom Namen (Richtung Linie) */
}
/* Schalter überspannt die Linie vertikal: ▲ über, ▼ unter der Linie.
   Das Label ist auf der Linie zentriert → Widget-Mitte = Linie. Jede
   Pfeil-Klickfläche füllt ihre Hälfte bis zur Linie (flex:1). */
.grundriss-schnitt-dir {
    display: flex;
    flex-direction: column;
    height: 52px;
    align-self: center;
}
.gsd-tri {
    flex: 1;                 /* je halbe Höhe → Klickfläche bis zur Linie */
    display: flex;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 6px;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.32);   /* inaktiv: dezent grau */
    transition: color 0.12s;
}
.gsd-tri.gsd-up   { align-items: center; }   /* Pfeil über der Linie */
.gsd-tri.gsd-down { align-items: center; }   /* Pfeil unter der Linie */
.gsd-tri.is-active { color: #fff; }          /* aktive Blickrichtung: hell */
.gsd-tri:hover { color: #60a5fa; }

/* Grundriss „+ Schnitt"-Hover-Knopf (#grundriss-add-section) entfernt 2026-09-16 — s. Anlegen-Chip (splitview.css). */
/* Overlay-Labels: keine Position-Animation (sonst Pan-Lag durch
   Semantic-Zoom-Transition unten) — höhere Spezifität gewinnt regardless
   of Source-Order */
.section-label.section-geschoss-label,
.section-label.grundriss-schnitt-label {
    transition: none !important;
}

/* ── Semantic Zoom Transitions ────────────────────────────────── */
.section-label {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* ── Hint-Overlay ───────────────────────────────────────────── */
#section-hint {
    position: absolute;
    bottom: 6.8333em;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75em;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.5833em 1.3333em;
    border-radius: 0.8333em;
    border: none;
    pointer-events: none;
    z-index: 10600;
    display: none;
    backdrop-filter: blur(0.6667em);
    -webkit-backdrop-filter: blur(0.6667em);
    box-shadow: 0 0.1667em 0.8333em rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

/* Toast-Benachrichtigung — EIN Stapel für showToast() und showUndoToast().
   Position, Ebene, Farben und Verhalten leben nur hier; das JS setzt
   ausschließlich Klassen. Vier Typen: success · info · warning · error
   (siehe Kopfkommentar von showToast in script.js). */
#toast-stack {
    position: fixed;
    /* 70px = 16px (view-nav-pill top) + ~40px (Pille height) + 14px Abstand */
    top: 70px;
    /* Mittig im Render-View, nicht im Fenster — dieselbe Rechnung wie
       #view-nav-pill / #bottom-dock / .pano-overlay: links um --shell-offset
       (NavRail + ggf. Kontext-Panel) eingerückt, rechts ggf. um den Modell-Dock
       verkürzt (body.shell-modell-dock-open, siehe oben bei den Pillen).
       So steht der Toast immer unter der Pille, egal welche Spalte offen ist. */
    left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + (100% - var(--shell-offset, var(--nav-rail-w, 60px))) / 2);
    transform: translateX(-50%);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-toast, 100100); /* Toast-Band — nie von Panels verdeckt */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    max-width: min(90vw, 46em);
    pointer-events: none; /* Kinder schalten sich einzeln frei */
}
.save-toast {
    display: flex;
    align-items: center;
    gap: 0.75em;
    max-width: 100%;
    /* Maße in em, damit die Pille mit der Schrift wächst (Entscheidung
       2026-09-08: Toasts bleiben em-basiert). Bei 12px entspricht das
       exakt .gw-tip: 5px 12px, Radius 7px, Punkt 7px. */
    padding: 0.4167em 1em;
    border-radius: 0.5833em;
    font-size: 0.75em;
    font-family: var(--font-sans);
    font-weight: 500;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.25s ease;
    white-space: nowrap;
    /* Fläche der Helfer-Familie — dieselbe wie .gw-tip (Helfer an der Maus)
       und .gw-bar: EIN Aussehen für alles, was über der Bühne schwebt.
       Der Typ steckt im farbigen Punkt, nicht in der Fläche; ein unbekannter
       Typ bekommt deshalb nur einen grauen Punkt und bleibt lesbar. */
    background: rgba(24, 24, 27, 0.95);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.save-toast__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Typ-Punkt: die einzige Farbe im Toast, immer aus den Tokens. */
.save-toast__punkt {
    flex: none;
    width: 0.5833em;
    height: 0.5833em;
    border-radius: 50%;
    background: hsl(var(--muted-fg));
}
.save-toast-success .save-toast__punkt { background: hsl(var(--success)); }
.save-toast-info .save-toast__punkt { background: hsl(var(--primary)); }
.save-toast-warning .save-toast__punkt { background: hsl(var(--accent-orange)); }
.save-toast-error .save-toast__punkt { background: hsl(var(--destructive)); }
.save-toast__zahl {
    flex: none;
    font-size: 0.8333em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.14);
    border-radius: 1em;
    padding: 0.1em 0.5em;
}
.save-toast__zu {
    flex: none;
    padding: 0 0 0 0.1667em;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    opacity: 0.45;
    cursor: pointer;
}
.save-toast__zu:hover {
    opacity: 0.9;
}
/* Nur Warnung, Fehler und Aktions-Toasts nehmen Klicks an — Erfolg und Info
   bleiben klickdurchlässig über der Szene. */
.save-toast--klickbar {
    pointer-events: auto;
}
/* Ältere Meldungen im Stapel treten zurück (neueste steht oben). */
.save-toast--alt {
    opacity: 0.72;
    transform: scale(0.97);
}
.save-toast--alt2 {
    opacity: 0.45;
    transform: scale(0.94);
}
/* Toast mit Aktionsknopf (showUndoToast) — Knopf-Optik wie .gw-btn--ghost. */
.save-toast--aktion {
    padding-right: 0.5em;
}
.save-toast__btn {
    flex: none;
    padding: 0.25em 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.5em;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.save-toast__btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ============================================================
   VOLUME TRANSFORM DIALOG
   (shadcn Card / Dialog Ästhetik)
   ============================================================ */

#volume-transform-dialog {
    position: fixed;
    /* frei positioniert (JS) → über der rechten Seitenspalte, aber unter
       Objekt-Kontextmenü (.obj-ctx 50000) / Positions-Dialog (.obj-pos-dlg 45000). */
    z-index: calc(var(--z-panel, 30000) + 10);
    background: hsl(var(--card) / 0.97);
    border: 0.0769em solid hsl(var(--border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 23.0769em;
    font-family: var(--font-sans);
    font-size: 0.8125em;
    color: hsl(var(--foreground));
    overflow: hidden;
    backdrop-filter: blur(0.9231em);
    -webkit-backdrop-filter: blur(0.9231em);
}

/* ── Dialog Header ──────────────────────────────────────────── */
.vtd-header {
    background: hsl(var(--card-elevated) / 0.98);
    padding: 0.7619em 1.1429em;
    font-size: 0.8077em;
    font-weight: 600;
    color: hsl(var(--muted-fg));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 0.0952em solid hsl(var(--border));
    user-select: none;
    -webkit-user-select: none;
}

/* ── Section ────────────────────────────────────────────────── */
.vtd-section {
    padding: 0.6154em 0.9231em 0.4615em;
    border-bottom: 0.0769em solid hsl(var(--border) / 0.6);
}

.vtd-section:last-of-type {
    border-bottom: none;
}

/* ── Label (shadcn <Label>) ─────────────────────────────────── */
.vtd-label {
    font-size: 0.7692em;
    font-weight: 600;
    color: hsl(var(--muted-fg));
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

/* ── Row ────────────────────────────────────────────────────── */
.vtd-row {
    display: flex;
    gap: 0.4615em;
    flex-wrap: nowrap;
}

.vtd-row label {
    display: flex;
    align-items: center;
    gap: 0.4545em;
    font-size: 0.8462em;
    font-weight: 500;
    color: hsl(var(--muted-fg));
    flex: 1;
    white-space: nowrap;
}

.vtd-row label.vtd-active {
    color: hsl(var(--primary));
}

/* ── Input (shadcn <Input>) ─────────────────────────────────── */
.vtd-row input[type="number"] {
    width: 100%;
    height: 2.3333em;
    padding: 0 0.5em;
    font-size: 0.9231em;
    font-family: var(--font-mono);
    background: hsl(var(--input));
    color: hsl(var(--foreground));
    border: 0.0833em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
    -moz-appearance: textfield;
}

.vtd-row input[type="number"]::-webkit-outer-spin-button,
.vtd-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.vtd-row input[type="number"]:hover {
    border-color: hsl(var(--muted-fg) / 0.4);
}

.vtd-row input[type="number"]:focus {
    border-color: hsl(var(--ring));
    box-shadow:
        0 0 0 0.1538em hsl(var(--background)),
        0 0 0 0.3077em hsl(var(--ring) / 0.3);
    color: hsl(var(--foreground));
    background: hsl(var(--input));
}

.vtd-row label.vtd-active input[type="number"] {
    border-color: hsl(var(--primary) / 0.45);
    background: hsl(var(--primary) / 0.07);
    color: hsl(var(--foreground));
}

.vtd-row label.vtd-active input[type="number"]:focus {
    border-color: hsl(var(--ring));
    box-shadow:
        0 0 0 0.1538em hsl(var(--background)),
        0 0 0 0.3077em hsl(var(--ring) / 0.35);
}

/* Gesperrte Positions-Felder bei aktivem Anchor */
.vtd-pos-locked input {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Buttons (shadcn <Button>) ──────────────────────────────── */
.vtd-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.4615em;
    padding: 0.6154em 0.9231em 0.7692em;
    background: hsl(var(--card-elevated) / 0.5);
    border-top: 0.0769em solid hsl(var(--border) / 0.5);
}

.vtd-buttons button {
    height: 2.3333em;
    padding: 0 1.1667em;
    font-size: 0.9231em;
    font-weight: 500;
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 0.0833em solid transparent;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

/* Ghost / Outline */
#vtd-cancel {
    background: transparent;
    color: hsl(var(--muted-fg));
    border-color: hsl(var(--border));
}

#vtd-cancel:hover {
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--foreground));
    border-color: hsl(var(--muted-fg) / 0.4);
}

/* Primary */
#vtd-apply {
    background: hsl(var(--primary));
    color: hsl(var(--primary-fg));
    border-color: hsl(var(--primary));
}

#vtd-apply:hover {
    background: hsl(221 83% 70%);
    border-color: hsl(221 83% 70%);
}

/* Save */
.vtd-save-btn {
    display: flex;
    align-items: center;
    gap: 0.3846em;
    background: hsl(var(--card-elevated));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
    margin-right: auto; /* schiebt sich nach links, Apply/Cancel rechts */
}

.vtd-save-btn:hover {
    background: hsl(142 71% 20%);
    color: hsl(142 71% 75%);
    border-color: hsl(142 71% 35%);
}

#vtd-apply:focus-visible,
#vtd-cancel:focus-visible,
.vtd-save-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.1538em hsl(var(--background)),
        0 0 0 0.3077em hsl(var(--ring) / 0.4);
}

/* ── Anchor / Fixpunkt Selector ─────────────────────────────── */
.vtd-anchor-wrap {
    display: flex;
    align-items: center;
    gap: 0.7692em;
    padding-bottom: 0.1538em;
}

/* XZ-Block: Spalte mit Label oben, mittlere Zeile, Label unten */
.vtd-anchor-xz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2308em;
}

/* Mittlere Zeile: seitliche Labels + Raster */
.vtd-axis-middle {
    display: flex;
    align-items: center;
    gap: 0.3846em;
}

/* Achsbezeichner oben/unten */
.vtd-axis-top,
.vtd-axis-bottom {
    font-size: 0.6923em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg) / 0.6);
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1;
}

/* Achsbezeichner links/rechts */
.vtd-axis-side {
    font-size: 0.6923em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg) / 0.6);
    letter-spacing: 0.03em;
    width: 1.7778em;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

/* 9-Punkt-Raster */
.vtd-dot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1.3846em);
    grid-template-rows: repeat(3, 1.3846em);
    gap: 0.2308em;
    background: hsl(var(--input));
    border: 0.0769em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    padding: 0.3077em;
    position: relative;
}

/* Kreuz-Hilfslinien */
.vtd-dot-grid::before,
.vtd-dot-grid::after {
    content: "";
    position: absolute;
    background: hsl(var(--muted-fg) / 0.12);
    pointer-events: none;
}
.vtd-dot-grid::before {
    width: 0.0769em;
    top: 0.3077em;
    bottom: 0.3077em;
    left: calc(50% - 0.0385em);
}
.vtd-dot-grid::after {
    height: 0.0769em;
    left: 0.3077em;
    right: 0.3077em;
    top: calc(50% - 0.0385em);
}

/* Dot-Buttons */
.vtd-anc {
    width: 1.3846em;
    height: 1.3846em;
    border-radius: 50%;
    background: hsl(var(--muted) / 0.6);
    border: 0.1154em solid hsl(var(--border));
    cursor: pointer;
    padding: 0;
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
    position: relative;
    z-index: 1;
}

.vtd-anc:hover {
    background: hsl(var(--muted));
    border-color: hsl(var(--muted-fg) / 0.5);
}

.vtd-anc.vtd-anc-active {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    box-shadow:
        0 0 0 0.1538em hsl(var(--background)),
        0 0 0 0.3077em hsl(var(--ring) / 0.4);
}

/* Y-Achse Buttons */
.vtd-anchor-y {
    display: flex;
    flex-direction: column;
    gap: 0.2308em;
}

.vtd-anc-y {
    width: 3.1111em;
    height: 3.1111em;
    font-size: 0.6923em;
    font-family: var(--font-mono);
    font-weight: 700;
    background: hsl(var(--input));
    color: hsl(var(--muted-fg));
    border: 0.1111em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

.vtd-anc-y:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    border-color: hsl(var(--muted-fg) / 0.4);
}

.vtd-anc-y.vtd-anc-active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-fg));
    border-color: hsl(var(--primary));
    box-shadow:
        0 0 0 0.1538em hsl(var(--background)),
        0 0 0 0.3077em hsl(var(--ring) / 0.35);
}

/* ============================================================
   STATUS BAR (bottom strip)
   ============================================================ */

#status-bar {
    position: fixed;
    bottom: 1.75em;
    /* An die Sidebar gekoppelt: NavRail (60px) + 72px Versatz = 132px (= bisher
       12em). Bei ausgeblendeter Sidebar (--nav-rail-w:0) wandert es mit nach
       links; die left-Transition unten sorgt fürs sanfte Mitgleiten. */
    left: calc(var(--nav-rail-w) + 72px);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1.5em;
    font-family: var(--font-mono);
    font-size: 0.6875em;
    color: #888;
    user-select: none;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    right: unset;
}

/* Statusleiste ausblenden (Toggle im Szenerie-Tab, Default: aus).
   Body-Klasse greift auch, wenn #status-bar erst später gemountet wird. */
body.statusbar-hidden #status-bar {
    display: none !important;
}

#sb-cursor {
    display: none !important;
}

#sb-clip-info,
#sb-stats {
    background: rgba(245, 245, 245, 0.75);
    backdrop-filter: blur(0.25em);
    border-radius: 0.35em;
    padding: 0.5em 1em;
    pointer-events: auto;
}

#sb-clip-info {
    display: flex;
    align-items: baseline;
    gap: 0;
}

#sb-clip-info {
    display: none;
}

#sb-stats {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 0 auto;
}

.sb-label {
    font-family: var(--font-sans);
    font-size: 0.9091em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
    margin-right: 0.5em;
}

.sb-axis {
    color: #888;
    font-size: 0.9091em;
    margin-left: 0.9em;
    margin-right: 0.15em;
}

.sb-axis:first-of-type {
    margin-left: 0;
}

.sb-val {
    min-width: 3.25em;
    color: #666;
    font-size: 1em;
    margin-right: 1em;
    text-align: right;
}

#sb-pts,
#sb-fps {
    color: #555;
    font-size: 1em;
    white-space: nowrap;
    padding: 0 !important;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border: none;
}

/* ── Point Budget Anzeige (gedimmt) ──────────────────────────────────── */
#sb-budget {
    color: #555;
    font-size: 1em;
    white-space: nowrap;
    font-weight: 400;
}

/* ============================================================
   CLOUD INFO PANEL
   ============================================================ */

/* ---- Cloud Info – inline in der Command Palette ---- */

/* ── Zwei-Spalten-Header: Punktwolke + Git ──────────────────────────────────── */
.cmd-info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    padding: 0.5em 0.5em 0.125em;
}

.cmd-cloud-info-clickable {
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
}
.cmd-cloud-info-clickable:hover {
    background: hsl(var(--muted) / 0.7);
    border-color: hsl(var(--primary) / 0.35);
}
.cmd-cloud-switch-link {
    color: hsl(var(--accent-orange) / 0.9);
}
.cmd-cloud-switch-link svg {
    color: hsl(var(--accent-orange) / 0.9);
}

/* ── Punktwolken-Karte (inline in Info-Columns) ─────────────────────────────── */
.cmd-cloud-switch-card {
    padding: 0.5em 0.5em 0.5em;
    overflow-y: auto;
}
.cmd-cloud-switch-card-header {
    font-size: 0.68em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: hsl(var(--muted-fg));
    margin-bottom: 0.4em;
    padding: 0 0.25em;
}
.cmd-cloud-switch-list-inline {
    gap: 0.25em;
}
.cmd-cloud-switch-list-inline .cmd-cloud-switch-row {
    padding: 0.35em 0.5em;
}

/* ── Cloud-Switcher-Ansicht ─────────────────────────────────────────────────── */
.cmd-cloud-switch-list {
    display: flex;
    flex-direction: column;
    gap: 0.375em;
}
.cmd-cloud-switch-row {
    padding: 0.5em 0.625em;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card-elevated) / 0.5);
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
}
.cmd-cloud-switch-row:not(.cmd-cloud-switch-active):hover {
    background: hsl(var(--muted) / 0.7);
    border-color: hsl(var(--primary) / 0.4);
}
.cmd-cloud-switch-active {
    border-color: hsl(var(--accent-orange) / 0.5);
    background: hsl(var(--accent-orange) / 0.08);
    cursor: default;
}
.cmd-cloud-switch-name {
    font-size: 0.75em;
    font-weight: 500; /* inaktiv: medium */
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1.4;
}
.cmd-cloud-switch-active .cmd-cloud-switch-name {
    font-weight: 600; /* aktiv: semibold */
}
.cmd-cloud-switch-badge {
    font-size: 0.625em; /* 10px at 16px */
    font-weight: 500;
    font-family: var(--font-sans);
    padding: 0.15em 0.5em;
    border-radius: 9.9em; /* Pill: 99px/10px */
    background: hsl(var(--accent-orange) / 0.18);
    color: hsl(25 100% 65%);
    letter-spacing: 0.03em;
    line-height: 1.6;
}
.cmd-cloud-switch-meta {
    font-size: 0.6875em; /* 11px — lesbar ohne zu dominieren */
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    margin-top: 0.25em;
    letter-spacing: 0.01em;
}
.cmd-cloud-switch-hint {
    font-size: 0.6875em; /* 11px — konsistent mit meta */
    font-family: var(--font-sans);
    font-weight: 500;
    color: hsl(var(--primary));
    margin-top: 0.3em;
    opacity: 0.75;
    letter-spacing: 0.01em;
}
.cmd-cloud-switch-row:not(.cmd-cloud-switch-active):hover
    .cmd-cloud-switch-hint {
    opacity: 1;
}

/* Label */
.cmd-pip-lbl {
    font-size: 0.625em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
    width: 7.4em;  /* 74px at own 10px font-size */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Pip-Spur: 8 Quadrate nebeneinander */
.cmd-pip-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.125em; /* 2px at 16px */
}

/* Zahlenwert */
.cmd-pip-val {
    font-size: 0.6875em;
    font-weight: 600;
    font-family: var(--font-mono);
    color: hsl(var(--foreground));
    width: 1.2727em; /* 14px at own 11px font-size */
    text-align: right;
    flex-shrink: 0;
}

.cmd-cloud-info-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1875em;
}

/* Chips – gleiche Varianten wie vorher, jetzt über Palette zugänglich */
.cip-chip {
    font-size: 0.625em;
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
    padding: 0.2em 0.7em;
    border-radius: 99.9em;
    border: 0.1em solid;
    white-space: nowrap;
}

.cip-chip-geo {
    color: hsl(var(--muted-fg));
    background: hsl(var(--muted) / 0.5);
    border-color: hsl(var(--border));
}

.cip-chip-color {
    color: hsl(221 83% 75%);
    background: hsl(221 83% 63% / 0.12);
    border-color: hsl(221 83% 63% / 0.3);
}

.cip-chip-intensity {
    color: hsl(35 95% 68%);
    background: hsl(35 95% 55% / 0.12);
    border-color: hsl(35 95% 55% / 0.3);
}

.cip-chip-class {
    color: hsl(142 70% 55%);
    background: hsl(142 70% 40% / 0.12);
    border-color: hsl(142 70% 40% / 0.3);
}

.cip-chip-scan {
    color: hsl(280 60% 70%);
    background: hsl(280 60% 50% / 0.12);
    border-color: hsl(280 60% 50% / 0.3);
}

/* ============================================================
   COMMAND PALETTE – DATENSATZ-DETAILANSICHT
   ============================================================ */

/* Wrapper – füllt den scrollbaren List-Bereich */
.cmd-detail-wrap {
    padding: 0.125em 0.125em 0.5em;
}

/* Zurück-Button */
.cmd-detail-back {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.6667em;
    margin-bottom: 0.3333em;
    font-size: 0.75em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
    border-radius: var(--radius);
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition);
    user-select: none;
}
.cmd-detail-back:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}
.cmd-detail-back svg {
    width: 0.75em;
    height: 0.75em;
    flex-shrink: 0;
}

/* Hero-Bereich */
.cmd-detail-hero {
    display: flex;
    align-items: center;
    gap: 0.625em;
    padding: 0.5em 0.625em 0.625em;
    margin-bottom: 0.25em;
    background: hsl(var(--card-elevated) / 0.5);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
}
.cmd-detail-hero-icon {
    flex-shrink: 0;
    width: 2.125em;
    height: 2.125em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--primary) / 0.1);
    border: 0.0625em solid hsl(var(--primary) / 0.25);
    border-radius: var(--radius);
    color: hsl(var(--primary));
}
.cmd-detail-hero-icon svg {
    width: 1.125em;
    height: 1.125em;
}
.cmd-detail-hero-name {
    font-size: 0.875em;
    font-weight: 600;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    line-height: 1.3;
}
.cmd-detail-hero-sub {
    font-size: 0.6875em;
    font-family: var(--font-sans);
    font-weight: 400;
    color: hsl(var(--muted-fg));
    margin-top: 0.25em;
    letter-spacing: 0.01em;
}

/* Abschnitt */
.cmd-detail-section {
    margin-top: 0.375em;
}
.cmd-detail-section-title {
    padding: 0.6em 1em 0.3em;
    font-size: 0.625em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-fg));
    font-family: var(--font-sans);
    user-select: none;
}

/* Key-Value-Grid */
.cmd-detail-kv {
    padding: 0 0.25em;
}
.cmd-detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.1875em 0.375em;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.cmd-detail-row:hover {
    background: hsl(var(--muted) / 0.5);
}
.cmd-dk {
    flex-shrink: 0;
    width: 12.8696em;
    font-size: 0.7188em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
}
.cmd-dv {
    flex: 1;
    font-size: 0.7188em;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    word-break: break-all;
}
.cmd-dv-mono {
    font-family: var(--font-mono);
    font-size: 0.6875em;
}

/* Attribut-Tabelle */
.cmd-detail-attr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6875em;
    font-family: var(--font-sans);
    margin-top: 0.1818em;
}
.cmd-detail-attr-table thead th {
    padding: 0.4em 0.8em 0.3em;
    text-align: left;
    font-size: 0.625em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-fg));
    border-bottom: 0.1em solid hsl(var(--border));
}
.cmd-detail-attr-table tbody td {
    padding: 0.25em 0.5em;
    color: hsl(var(--foreground));
    border-bottom: 0.0625em solid hsl(var(--border) / 0.4);
    vertical-align: middle;
}
.cmd-detail-attr-table tbody tr:last-child td {
    border-bottom: none;
}
.cmd-detail-attr-table tbody tr:hover td {
    background: hsl(var(--muted) / 0.4);
}
.cmd-detail-range {
    color: hsl(var(--muted-fg));
    font-size: 0.6562em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15.2381em;
}

/* ============================================================
   NAVIGATIONCUBE – HTML-Label-Overlay
   ============================================================ */

#nav-cube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9500;
}

.nav-cube-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.6875em;
    font-weight: 700;
    font-family: var(--font-sans);
    color: #000;
    line-height: 1;
    pointer-events: none;
    letter-spacing: 0.02em;
    transition: opacity 0.08s linear;
}
/* Grundriss-/Schnitt-Tab: NavCube-Labels matchen #status-bar Farbe */
body.view-nav-cube-greyed .nav-cube-label {
    color: #888;
}

/* SVG-NavCube (ersetzt den 3D-Cube in Grundriss/Schnitt) */
#svg-nav-cube {
    position: absolute;
    bottom: 1em;
    left: 1em;
    width: 60px;
    height: 60px;
    z-index: 9501;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}
#svg-nav-cube.hidden {
    display: none !important;
}
#svg-nav-cube svg {
    width: 100%;
    height: 100%;
    display: block;
    /* Rotation wird inline via JS gesetzt (transform: rotate(...)) */
    transform-origin: center center;
}
#svg-nav-cube:hover svg rect {
    stroke: #aaa;
}
#svg-nav-cube:hover svg text {
    fill: #aaa;
}
/* Im Grundriss/Schnitt-Tab: 3D-NavCube + HTML-Labels verstecken */
body.view-svg-cube-active #nav-cube-overlay {
    display: none !important;
}

/* ============================================================
   COMMAND PALETTE (Spotlight-Style)
   ============================================================ */

#cmd-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40000;
    background: hsl(240 15% 2% / 0.55);
    backdrop-filter: blur(0.25em);
    -webkit-backdrop-filter: blur(0.25em);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    animation: cmd-backdrop-in 0.1s ease;
}

#cmd-palette-backdrop.cmd-hidden {
    display: none;
}

@keyframes cmd-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#cmd-palette {
    width: 35em;
    max-width: calc(100vw - 3em);
    background: hsl(var(--card) / 0.97);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow:
        var(--shadow-lg),
        0 0 0 0.0625em hsl(var(--border) / 0.4);
    overflow: hidden;
    animation: cmd-palette-in 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cmd-palette-in {
    from {
        opacity: 0;
        transform: translateY(-0.625em) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- Input row ---- */
#cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.625em;
    padding: 0.8125em 1em;
    border-bottom: 0.0625em solid hsl(var(--border));
}

#cmd-input-wrap > svg {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    color: hsl(var(--muted-fg));
}

#cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: hsl(var(--foreground));
    font-size: 0.875em;
    font-family: var(--font-sans);
    font-weight: 400;
    caret-color: hsl(var(--primary));
}

#cmd-input::placeholder {
    color: hsl(var(--muted-fg));
}

.cmd-badge {
    flex-shrink: 0;
    font-size: 0.625em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    background: hsl(var(--muted));
    border: 0.1em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    padding: 0.2em 0.7em;
    line-height: 1.6;
    white-space: nowrap;
}

/* ---- List area ---- */
#cmd-list-wrap {
    max-height: 24.375em;
    overflow-y: auto;
    padding: 0.375em 0.375em 0.5em;
    scroll-behavior: smooth;
}

#cmd-list-wrap::-webkit-scrollbar {
    width: 0.25em;
}
#cmd-list-wrap::-webkit-scrollbar-track {
    background: transparent;
}
#cmd-list-wrap::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 0.125em;
}

/* ---- Group label ---- */
.cmd-group-label {
    padding: 0.7619em 0.9524em 0.2857em;
    font-size: 0.6562em;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: hsl(var(--muted-fg));
    font-family: var(--font-sans);
    user-select: none;
}

/* ---- Separator between groups ---- */
.cmd-separator {
    height: 0.0625em;
    background: hsl(var(--border));
    margin: 0.375em 0.25em;
}

/* ---- Command item ---- */
.cmd-item {
    display: flex;
    align-items: center;
    gap: 0.6875em;
    padding: 0.4375em 0.625em;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
}

.cmd-item:hover,
.cmd-item.cmd-item-active {
    background: hsl(var(--muted));
}

.cmd-item-icon {
    flex-shrink: 0;
    width: 1.875em;
    height: 1.875em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--card-elevated));
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    color: hsl(var(--foreground-dim));
}

.cmd-item-icon svg {
    width: 0.875em;
    height: 0.875em;
}

.cmd-item-text {
    flex: 1;
    min-width: 0;
}

.cmd-item-title {
    font-size: 0.8125em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    line-height: 1.3;
}

.cmd-item-desc {
    font-size: 0.6875em;
    font-weight: 400;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
    margin-top: 0.0909em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-item-shortcut {
    flex-shrink: 0;
    font-size: 0.625em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    background: hsl(var(--muted));
    border: 0.1em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    padding: 0.2em 0.6em;
    line-height: 1.6;
}

/* ---- Empty state ---- */
#cmd-empty {
    text-align: center;
    padding: 2.7692em 1.2308em;
    color: hsl(var(--muted-fg));
    font-size: 0.8125em;
    font-family: var(--font-sans);
}

/* ============================================================
   DOKUMENTENABLAGE — Expanded Palette Mode
   ============================================================ */

/* Backdrop: weniger padding-top, zentrierter */
#cmd-palette-backdrop.cmd-expanded-backdrop {
    padding-top: 2em;
    padding-bottom: 2em;
    align-items: stretch;
}

/* Palette: expandiert auf fast-fullscreen */
#cmd-palette.cmd-expanded {
    width: calc(100vw - 8em);
    max-width: 66em;
    height: calc(100vh - 8em);
    max-height: calc(100vh - 8em);
    display: flex;
    flex-direction: column;
    margin: auto;
    animation: cmd-expand-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cmd-expand-in {
    from {
        width: 35em;
        height: auto;
        max-height: 26em;
        opacity: 0.7;
    }
    to {
        width: calc(100vw - 8em);
        height: calc(100vh - 8em);
        max-height: calc(100vh - 8em);
        opacity: 1;
    }
}

#cmd-palette.cmd-expanded #cmd-list-wrap {
    max-height: none;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-top: 0;
}
/* When viewing a doc, list-wrap and list must stretch full height */
#cmd-palette.cmd-expanded.cmd-viewing #cmd-list-wrap {
    overflow: hidden;
}
#cmd-palette.cmd-expanded.cmd-viewing #cmd-list {
    height: 100%;
}

/* ---- Back button ---- */
.cmd-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border: none;
    background: none;
    color: hsl(var(--muted-fg));
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.cmd-back-btn:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--muted));
}
.cmd-back-btn svg {
    width: 1em;
    height: 1em;
}

/* ---- Dokumentenablage Header ---- */
.dok-header {
    padding: 0.5em 0.75em 0.25em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    border-bottom: 0.0625em solid hsl(var(--border));
    position: sticky;
    top: 0;
    background: hsl(var(--card) / 0.97);
    backdrop-filter: blur(0.5em);
    z-index: 2;
}

/* Sort Row */
.dok-sort-row {
    display: flex;
    gap: 0.375em;
}
.dok-sort-btn {
    font-size: 0.6875em;
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.3em 0.75em;
    border-radius: 1em;
    border: 0.0625em solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--muted-fg));
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.dok-sort-btn:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}
.dok-sort-btn.dok-sort-active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-fg, 0 0% 100%));
    border-color: hsl(var(--primary));
}

/* Tag Filter Chips */
.dok-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    padding-bottom: 0.25em;
}
.dok-tag-chip {
    font-size: 0.6875em;
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.35em 0.6em 0.25em 0.6em;
    border-radius: 0.75em;
    border: 0.0625em solid transparent;
    background: hsl(var(--muted));
    color: hsl(var(--muted-fg));
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.dok-tag-chip:hover {
    opacity: 0.85;
    background: var(--tag-bg);
    color: var(--tag-fg);
}
.dok-tag-chip.dok-tag-chip-active {
    background: var(--tag-bg);
    color: var(--tag-fg);
    border-color: var(--tag-bg);
    box-shadow: 0 0 0 1px var(--tag-bg);
}

/* ---- Document Grid (2 columns) ---- */
.dok-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;
    padding: 0.75em;
}

/* ---- Tag Group (when sorted by tags) ---- */
.dok-tag-group {
    display: contents;
}
.dok-tag-group-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.25em 0;
}
.dok-tag-group-header:not(:first-child) {
    margin-top: 0.75em;
    padding-top: 0.75em;
    border-top: 0.0625em solid hsl(var(--border) / 0.5);
}
.dok-tag-group-label {
    font-size: 0.6875em;
    font-family: var(--font-sans);
    font-weight: 600;
    padding: 0.25em 0.6em 0.15em 0.6em;
    border-radius: 0.35em;
    white-space: nowrap;
    line-height: 1.5;
}
.dok-tag-group-count {
    font-size: 0.5625em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
}

/* ---- Document Card (horizontal: cover left, content right) ---- */
.dok-card {
    display: flex;
    flex-direction: row;
    background: hsl(var(--card-elevated) / 0.6);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    min-height: 7em;
}
.dok-card:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 2px 8px hsl(var(--primary) / 0.1);
    transform: translateY(-1px);
}

/* Thumbnail — full page view on the left */
.dok-card-thumb {
    position: relative;
    width: 11em;
    min-width: 11em;
    background: hsl(var(--muted) / 0.5);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.dok-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    background: hsl(0 0% 100% / 0.05);
}

/* Favorite Button (overlay on thumb) */
.dok-fav-btn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: hsl(0 0% 0% / 0.45);
    color: hsl(0 0% 80%);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    backdrop-filter: blur(4px);
}
.dok-fav-btn:hover {
    background: hsl(0 0% 0% / 0.7);
    color: hsl(45 100% 60%);
    transform: scale(1.15);
}
.dok-fav-btn.dok-fav-active {
    color: hsl(45 100% 55%);
}
.dok-fav-btn svg {
    width: 1em;
    height: 1em;
}

/* Card Body — right side, split into top + bottom */
.dok-card-body {
    padding: 0.5em 0.625em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}
.dok-card-top {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}
.dok-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    margin-top: 0.35em;
}
.dok-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}
.dok-card-tag {
    font-size: 0.6875em;
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.25em 0.6em 0.15em 0.6em;
    border-radius: 0.35em;
    white-space: nowrap;
    line-height: 1.5;
    margin-bottom: 0.75em;
}
.dok-card-title {
    font-size: 0.75em;
    font-weight: 600;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dok-card-summary {
    font-size: 0.625em;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@keyframes dok-ai-appear {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes dok-ai-skeleton-shimmer {
    from { background-position: 130% 0, 0 0; }
    to   { background-position: -30% 0,  0 0; }
}
@keyframes dok-ai-skeleton-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes dok-ai-icon-pulse {
    0%   { opacity: 0;    transform: scale(0.55) rotate(-18deg); }
    60%  { opacity: 1;    transform: scale(1.18) rotate(5deg);   }
    100% { opacity: 0.65; transform: scale(1)    rotate(0deg);   }
}
@keyframes dok-ai-text-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dok-card-ai-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    margin-top: 1em;
    font-size: 0.625em;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
    line-height: 1.4;
    animation: dok-ai-appear 0.3s ease-out 0.1s both;
    flex-direction: column;
}
.dok-card-ai-icon {
    flex-shrink: 0;
    margin-top: 0.15em;
    opacity: 0.65;
    animation: dok-ai-icon-pulse 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0.85s both;
}
.dok-card-ai-body {
    position: relative;
    flex: 1;
    min-height: 2.6em;
}
.dok-card-ai-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    pointer-events: none;
    background-image:
        linear-gradient(90deg,
            transparent            0%,
            hsl(var(--muted-fg) / 0.22) 50%,
            transparent            100%
        ),
        repeating-linear-gradient(
            to bottom,
            hsl(var(--muted-fg) / 0.13) 0px,
            hsl(var(--muted-fg) / 0.13) 8px,
            transparent                 8px,
            transparent                 14px
        );
    background-size: 300% 100%, 100% 100%;
    animation:
        dok-ai-skeleton-shimmer 1.1s ease-in-out 0.15s 1,
        dok-ai-skeleton-out     0.4s ease-in      1.2s  both;
}
.dok-card-ai-summary span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: dok-ai-text-in 0.55s ease-out 1.2s both;
}
.dok-card-notes {
    font-size: 0.5625em;
    font-family: var(--font-sans);
    color: hsl(var(--primary) / 0.7);
    font-style: italic;
}
.dok-card-meta {
    font-size: 0.685em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
}

/* ---- Document Count ---- */
.dok-count {
    text-align: center;
    padding: 0.75em;
    font-size: 0.6875em;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
}

/* ---- Inline Document Viewer ---- */
.dok-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.dok-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0.75em;
    border-bottom: 0.0625em solid hsl(var(--border));
    flex-shrink: 0;
}
.dok-viewer-back {
    display: flex;
    align-items: center;
    gap: 0.25em;
    background: none;
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    font-size: 0.6875em;
    font-family: var(--font-sans);
    padding: 0.4em 0.6em;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.1;
}
.dok-viewer-back:hover {
    background: hsl(var(--muted) / 0.5);
    border-color: #333;
}
.dok-viewer-info {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.dok-viewer-tags {
    display: flex;
    gap: 0.15em;
    flex-shrink: 0;
}
.dok-viewer-title {
    font-size: 0.75em;
    font-weight: 600;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dok-viewer-meta {
    font-size: 0.685em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    white-space: nowrap;
    flex-shrink: 0;
}
.dok-viewer-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    padding: 0.3em;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.dok-viewer-fullscreen:hover {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--primary));
}
.dok-viewer-download {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    padding: 0.3em;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    flex-shrink: 0;
}
.dok-viewer-download:hover {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--primary));
}
.dok-viewer-embed {
    flex: 1;
    min-height: 0;
    background: hsl(var(--muted) / 0.3);
}
.dok-viewer-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.dok-viewer-embed:fullscreen {
    background: hsl(0 0% 10%);
}
.dok-viewer-embed:fullscreen iframe {
    width: 100vw;
    height: 100vh;
}

/* ---- Global Document Viewer Overlay ---- */
#doc-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(0 0% 0% / 0.6);
    backdrop-filter: blur(6px);
    padding: 2em;
    animation: doc-overlay-in 0.2s ease;
}
#doc-viewer-overlay.doc-viewer-hidden {
    display: none;
}
@keyframes doc-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#doc-viewer-panel {
    width: 100%;
    max-width: 72em;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: hsl(var(--card));
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 40px hsl(0 0% 0% / 0.4);
}
#doc-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.75em;
    border-bottom: 0.0625em solid hsl(var(--border));
    flex-shrink: 0;
}
#doc-viewer-content {
    flex: 1;
    min-height: 0;
    position: relative;     /* anchor for summary box */
    overflow: auto;
    display: flex;
}
/* Bild-Anzeige im Doc-Viewer */
.doc-viewer-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    padding: 1em;
    cursor: default;
    user-select: none;
}

/* ============================================================
   DEV-VIEWER OVERLAY (Strukturgraph)
   ============================================================ */
#dev-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(0 0% 0% / 0.6);
    backdrop-filter: blur(6px);
    padding: 2em;
    animation: doc-overlay-in 0.2s ease;
}
#dev-viewer-overlay.dev-viewer-hidden {
    display: none;
}
#dev-viewer-panel {
    width: 100%;
    max-width: 90em;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: hsl(var(--card));
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 40px hsl(0 0% 0% / 0.4);
}
#dev-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0.75em;
    border-bottom: 0.0625em solid hsl(var(--border));
    flex-shrink: 0;
}
#dev-viewer-content {
    flex: 1;
    min-height: 0;
}
#dev-viewer-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================
   OBJEKT-KONTEXTMENÜ (Rechtsklick auf Schnitt / Grundriss / Achse)
   ============================================================ */

.obj-ctx {
    position: fixed;
    z-index: 50000;
    min-width: 10.5em;
    background: hsl(var(--card) / 0.98);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.25em;
    font-family: var(--font-sans);
    backdrop-filter: blur(0.625em);
    -webkit-backdrop-filter: blur(0.625em);
    animation: ctx-in 0.08s ease;
    user-select: none;
}

@keyframes ctx-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.obj-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.72em;
    padding: 0.48em 0.8em;
    font-size: 0.7812em;
    font-weight: 500;
    color: hsl(var(--foreground));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}

.obj-ctx-item:hover {
    background: hsl(var(--muted));
}

.obj-ctx-item svg {
    width: 0.8125em;
    height: 0.8125em;
    flex-shrink: 0;
    color: hsl(var(--muted-fg));
}

.obj-ctx-sep {
    height: 0.0625em;
    background: hsl(var(--border));
    margin: 0.1875em 0;
}

.obj-ctx-item.obj-ctx-danger {
    color: hsl(var(--destructive));
}

.obj-ctx-item.obj-ctx-danger svg {
    color: hsl(var(--destructive) / 0.75);
}

.obj-ctx-item.obj-ctx-danger:hover {
    background: hsl(var(--destructive) / 0.1);
}

/* Ebenen/Labels permanent ausgeblendet (überschreibt inline display vom Render-Loop) */
.layer-hidden {
    display: none !important;
}
.clip-hidden {
    display: none !important;
}

/* Deaktivierter Menüeintrag (kein Punkt geladen o. ä.) */
.obj-ctx-item.obj-ctx-disabled {
    opacity: 0.38;
    pointer-events: none;
    cursor: default;
}

/* Sekundärer/gedimmter Menüeintrag */
.obj-ctx-item.obj-ctx-muted {
    color: hsl(var(--muted-fg));
}

.obj-ctx-item.obj-ctx-muted svg {
    color: hsl(var(--muted-fg) / 0.65);
}

.obj-ctx-item.obj-ctx-destructive {
    color: hsl(var(--destructive));
}

.obj-ctx-item.obj-ctx-destructive svg {
    color: hsl(var(--destructive) / 0.8);
}

/* Sektions-Überschrift im Kontextmenü */
.obj-ctx-section-label {
    font-size: 0.625em;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: hsl(var(--muted-fg));
    padding: 0.5em 0.8em 0.2em;
    user-select: none;
}

/* Label-Span füllt die Zeile, damit Hint/Pfeil rechts sitzen */
.obj-ctx-label {
    flex: 1 1 auto;
    white-space: nowrap;
}

/* Betonte Primär-Aktion pro Kontext */
.obj-ctx-item.obj-ctx-primary {
    color: hsl(var(--primary));
}
.obj-ctx-item.obj-ctx-primary svg {
    color: hsl(var(--primary));
}

/* Hinweis-Badge (z.B. "auto" auf der vorgeschlagenen Detail-Stufe) */
.obj-ctx-hint {
    font-size: 0.82em;
    color: hsl(var(--muted-fg));
    padding-left: 0.6em;
    flex-shrink: 0;
}

/* Submenu (Flyout), z.B. Detail-extrahieren-Stufen */
.obj-ctx-sub-arrow {
    margin-left: auto;
    padding-left: 0.5em;
    color: hsl(var(--muted-fg));
    font-size: 1.05em;
    line-height: 1;
    flex-shrink: 0;
}
.obj-ctx-has-sub {
    position: relative;
}
.obj-ctx-has-sub > .obj-ctx-sub {
    display: none;
    position: absolute;
    top: -0.3125em;
    left: 100%;
    min-width: 10.5em;
    background: hsl(var(--card) / 0.98);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.25em;
    backdrop-filter: blur(0.625em);
    -webkit-backdrop-filter: blur(0.625em);
    z-index: 1;
}
.obj-ctx-has-sub:hover > .obj-ctx-sub {
    display: block;
}
.obj-ctx.sub-left .obj-ctx-has-sub > .obj-ctx-sub {
    left: auto;
    right: 100%;
}

/* ── Renderview-Menüs (obj-ctx): HELL — exakt die Styling-Vorgaben des
   Whiteboard-Kontextmenüs (.app-menu/.board-menu-Tokens, board.css:
   bg #fff · fg #1f2937 · border #e5e7eb · shadow 0 8px 28px /18% ·
   hover #f1f1fb + Akzent #4242F5 · Section 10px/600/uppercase #9ca3af ·
   Sep #f0f0f4 · Danger #dc2626 auf #fef2f2). Felix 2026-07-25.
   WICHTIG: Block muss in src/style.css UND public/style.css stehen
   (src lädt via Vite NACH public; Token-Basis --card ist dunkel). ── */
.obj-ctx,
.obj-ctx-has-sub > .obj-ctx-sub {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    color: #1f2937;
    min-width: 170px;
    padding: 6px;
}
.obj-ctx-item {
    color: #1f2937;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 400;
}
.obj-ctx-item svg {
    width: 16px;
    height: 16px;
    color: inherit;
}
.obj-ctx-item:hover {
    background: #f1f1fb;
    color: #4242F5;
}
.obj-ctx-sep {
    background: #f0f0f4;
    margin: 4px 6px;
}
.obj-ctx-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 6px 10px 3px;
}
.obj-ctx-sub-arrow,
.obj-ctx-hint {
    color: #9ca3af;
}
.obj-ctx-item.obj-ctx-primary,
.obj-ctx-item.obj-ctx-primary svg {
    color: #4242F5;
}
.obj-ctx-item.obj-ctx-primary:hover {
    background: #f1f1fb;
}
.obj-ctx-item.obj-ctx-danger,
.obj-ctx-item.obj-ctx-danger svg,
.obj-ctx-item.obj-ctx-destructive,
.obj-ctx-item.obj-ctx-destructive svg {
    color: #dc2626;
}
.obj-ctx-item.obj-ctx-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}
.obj-ctx-item.obj-ctx-muted,
.obj-ctx-item.obj-ctx-muted svg {
    color: #6b7280;
}

/* ============================================================
   OBJEKT-POSITIONS-DIALOG (Lage / Höhe anpassen)
   ============================================================ */

.obj-pos-dlg {
    position: fixed;
    z-index: 45000;
    min-width: 20.7692em;
    background: hsl(var(--card) / 0.98);
    border: 0.0769em solid hsl(var(--border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: 0.8125em;
    color: hsl(var(--foreground));
    overflow: hidden;
    backdrop-filter: blur(0.9231em);
    -webkit-backdrop-filter: blur(0.9231em);
    animation: cmd-palette-in 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.opd-header {
    background: hsl(var(--card-elevated) / 0.98);
    padding: 0.7619em 0.9524em 0.7619em 1.1429em;
    font-size: 0.8077em;
    font-weight: 600;
    color: hsl(var(--muted-fg));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 0.0952em solid hsl(var(--border));
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7619em;
}

.opd-close {
    width: 1.5385em;
    height: 1.5385em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: hsl(var(--muted-fg));
    background: transparent;
    border: none;
    transition:
        background var(--transition),
        color var(--transition);
    padding: 0;
}

.opd-close svg {
    width: 0.9231em;
    height: 0.9231em;
}

.opd-close:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.opd-body {
    padding: 0.7692em 0.9231em 0.6154em;
    display: flex;
    flex-direction: column;
    gap: 0.4615em;
}

.opd-group-label {
    font-size: 0.7308em;
    font-weight: 600;
    color: hsl(var(--muted-fg) / 0.7);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 0.3158em;
    border-bottom: 0.1053em solid hsl(var(--border) / 0.5);
    margin-top: 0.4211em;
    margin-bottom: 0.2105em;
}

.opd-group-label:first-child {
    margin-top: 0;
}

.opd-row {
    display: flex;
    align-items: center;
    gap: 0.4615em;
}

.opd-axis-lbl {
    font-size: 0.7692em;
    font-weight: 600;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    min-width: 1.4em;
    text-align: center;
    flex-shrink: 0;
}

.opd-input {
    flex: 1;
    height: 2.2609em;
    padding: 0 0.5217em;
    font-size: 0.8846em;
    font-family: var(--font-mono);
    background: hsl(var(--input));
    color: hsl(var(--foreground));
    border: 0.087em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
    -moz-appearance: textfield;
}

.opd-input::-webkit-outer-spin-button,
.opd-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.opd-input:hover {
    border-color: hsl(var(--muted-fg) / 0.4);
}

.opd-input:focus {
    border-color: hsl(var(--ring));
    box-shadow:
        0 0 0 0.1538em hsl(var(--background)),
        0 0 0 0.3077em hsl(var(--ring) / 0.3);
}

.opd-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.4615em;
    padding: 0.6154em 0.9231em 0.7692em;
    background: hsl(var(--card-elevated) / 0.5);
    border-top: 0.0769em solid hsl(var(--border) / 0.5);
}

.opd-btn {
    height: 2.1667em;
    padding: 0 1em;
    font-size: 0.9231em;
    font-weight: 500;
    font-family: var(--font-sans);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 0.0833em solid transparent;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.opd-btn-cancel {
    background: transparent;
    color: hsl(var(--muted-fg));
    border-color: hsl(var(--border));
}

.opd-btn-cancel:hover {
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--foreground));
}

.opd-btn-apply {
    background: hsl(var(--primary));
    color: hsl(var(--primary-fg));
    border-color: hsl(var(--primary));
}

.opd-btn-apply:hover {
    background: hsl(221 83% 70%);
    border-color: hsl(221 83% 70%);
}

/* ============================================================
   DRAG-EDIT HANDLES + EDIT-BAR
   ============================================================ */

.drag-handle-pt {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.875em;
    height: 0.875em;
    border-radius: 50%;
    border: 0.1562em solid hsl(0 0% 98% / 0.9);
    box-shadow:
        0 0 0 0.125em hsl(240 15% 2% / 0.35),
        var(--shadow-sm);
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 10002;
    pointer-events: auto;
    transition:
        width 0.1s ease,
        height 0.1s ease,
        box-shadow 0.1s ease,
        opacity 0.08s linear;
    user-select: none;
}

.drag-handle-pt:hover {
    width: 1.125em;
    height: 1.125em;
    box-shadow:
        0 0 0 0.1875em hsl(240 15% 2% / 0.3),
        0 0 0 0.375em hsl(var(--ring) / 0.2),
        var(--shadow-sm);
}

.drag-handle-pt.dragging {
    cursor: grabbing;
    width: 1.25em;
    height: 1.25em;
    box-shadow:
        0 0 0 0.1875em hsl(240 15% 2% / 0.3),
        0 0 0 0.4375em hsl(var(--ring) / 0.3),
        var(--shadow-md);
    transition: none;
}

/* Farbcodierung nach Typ */
.drag-handle-pt[data-role="section-start"],
.drag-handle-pt[data-role="section-end"] {
    background: hsl(var(--primary));
}

.drag-handle-pt[data-role="axis-start"],
.drag-handle-pt[data-role="axis-end"] {
    background: hsl(167 52% 45%);
    border-color: hsl(167 52% 80% / 0.9);
}

.drag-handle-pt[data-role="floorplan-z"] {
    background: hsl(var(--accent-orange));
    width: 1em;
    height: 1em;
}

/* Verbindungslinie zwischen den zwei Handles (section / axis) */
.drag-handle-line {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10001;
    overflow: visible;
}

/* Edit-Mode-Leiste (oben zentriert) */
.obj-edit-bar {
    position: fixed;
    top: 0.75em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10004;
    display: flex;
    align-items: center;
    gap: 0.5em;
    background: hsl(var(--card) / 0.97);
    border: 0.0625em solid hsl(var(--accent-orange) / 0.5);
    border-radius: var(--radius);
    padding: 0.3125em 0.5em 0.3125em 0.75em;
    box-shadow:
        var(--shadow-md),
        0 0 0 0.0625em hsl(var(--accent-orange) / 0.12);
    backdrop-filter: blur(0.625em);
    -webkit-backdrop-filter: blur(0.625em);
    font-family: var(--font-sans);
    white-space: nowrap;
    animation: ctx-in 0.1s ease;
}

.obj-edit-bar-icon {
    flex-shrink: 0;
    color: hsl(var(--accent-orange));
    display: flex;
    align-items: center;
}

.obj-edit-bar-icon svg {
    width: 0.8125em;
    height: 0.8125em;
}

.obj-edit-bar-label {
    font-size: 0.75em;
    font-weight: 400;
    color: hsl(var(--muted-fg));
}

.obj-edit-bar-name {
    font-size: 0.75em;
    font-weight: 600;
    color: hsl(var(--foreground));
    max-width: 16.6667em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obj-edit-bar-sep {
    width: 0.0625em;
    height: 0.875em;
    background: hsl(var(--border));
    flex-shrink: 0;
    margin: 0 0.125em;
}

.obj-edit-bar-coords {
    height: 2.2609em;
    padding: 0 0.8696em;
    font-size: 0.7188em;
    font-weight: 500;
    font-family: var(--font-sans);
    background: transparent;
    color: hsl(var(--muted-fg));
    border: 0.087em solid hsl(var(--border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition);
}

.obj-edit-bar-coords:hover {
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--foreground));
}

.obj-edit-bar-done {
    height: 2.1667em;
    padding: 0 1em;
    font-size: 0.75em;
    font-weight: 600;
    font-family: var(--font-sans);
    background: hsl(var(--primary));
    color: hsl(var(--primary-fg));
    border: 0.0833em solid hsl(var(--primary));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}

.obj-edit-bar-done:hover {
    background: hsl(221 83% 70%);
    border-color: hsl(221 83% 70%);
}

/* ============================================================
   DIN CO₂-BERECHNUNGSPANEL — 3-Panel-Architektur
   ============================================================ */

/* ── 1. INPUT CARD (bottom-right, compact) ──────────────────── */
.din-ic {
    position: fixed;
    bottom: 15%;
    right: 15%;
    width: 27.3333em;
    z-index: 10500;
    background: #f0f0f0;
    backdrop-filter: blur(0.8333em);
    -webkit-backdrop-filter: blur(0.8333em);
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: 0.75em;
    color: #ebebeb;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.din-ic-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.din-ic-closed {
    opacity: 0;
    transform: translateY(1.6667em);
    pointer-events: none;
}

.din-ic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8333em 1.1667em;
    border-bottom: 0.1em solid #e3e3e3;
    cursor: grab;
    user-select: none;
}
.din-ic-header:active {
    cursor: grabbing;
}
.din-ic-title {
    font-size: 1.1667em;
    font-weight: 600;
    color: #555;
}
.din-ic-close {
    width: 1.8333em;
    height: 1.8333em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #898994;
    padding: 0;
    border-radius: 0.3333em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition),
        color var(--transition);
}
.din-ic-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ebebeb;
}
.din-ic-close svg {
    width: 0.8333em;
    height: 0.8333em;
}

.din-ic-body {
    padding: 1em 1.1667em 1.1667em;
}

.din-ic-section-title {
    display: none;
    font-size: 1em;
    letter-spacing: 0.015em;
    text-transform: none;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    color: #27272b;
    border-bottom: 0.1em solid #e3e3e3;
    margin-top: 1.5em;
}

.din-ic-row {
    margin-bottom: 0.6316em;
}
.din-ic-row-half {
    max-width: calc(50% - 0.1667em);
}
.din-ic-row-4col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.3333em;
    margin-bottom: 0.5em;
}
.din-ic-field {
    display: flex;
    flex-direction: column;
    gap: 0.1667em;
}

.din-ic-label {
    font-size: 0.95em;
    font-weight: normal;
    font-family: var(--font-mono);
    color: #8b8a96;
    display: flex;
    margin-bottom: 0.75em;
}

.din-ic-input,
.din-ic-select {
    -webkit-appearance: none;
    height: 2.5455em;
    padding: 0 0.7273em;
    color: #2a2a2e;
    background: #e7e7e7;
    border-radius: 0.3636em;
    font-family: var(--font-mono);
    font-size: 0.9167em;
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
    width: 100%;
    box-sizing: border-box;
    border: none;
}
.din-ic-select {
    font-family: var(--font-sans);
    font-size: 0.9167em;
}
.din-ic-input:focus,
.din-ic-select:focus {
    border-color: transparent;
    box-shadow: none;
}

.din-ic-calc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4615em;
    margin-top: 0.9231em;
    width: 100%;
    height: 2.6154em;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 0.4615em;
    font-family: var(--font-sans);
    font-size: 1.0833em;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition:
        background var(--transition),
        opacity var(--transition);
}
.din-ic-calc-btn svg {
    stroke: #fff;
}
.din-ic-calc-btn:hover {
    background: #111;
}
.din-ic-calc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.din-ic-error {
    background: rgba(230, 50, 50, 0.12);
    border: 0.0909em solid rgba(230, 50, 50, 0.35);
    color: #db7070;
    border-radius: 0.3636em;
    padding: 0.7273em 0.9091em;
    font-size: 0.9167em;
    margin-top: 0.7273em;
}

/* ── Measure-Hint (links neben IC) — Dock style ─────── */
.din-measure-hint {
    position: fixed;
    z-index: 10501;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0.5em);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}
.din-measure-hint-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.din-mh-pill {
    display: flex;
    align-items: center;
    gap: 0;
    background: hsl(var(--card) / 0.94);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    border: 0.0625em solid hsl(var(--border));
    border-radius: 0.75em;
    padding: 0.1875em;
    box-shadow: var(--shadow-md);
}
.din-mh-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125em;
    width: 2.75em;
    height: 2.625em;
    background: transparent;
    border: none;
    border-radius: 0.5625em;
    color: hsl(var(--muted-fg));
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.din-mh-btn span {
    font-family: var(--font-sans);
    font-size: 0.5625em;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}
.din-mh-btn:hover {
    background: hsl(var(--card-elevated));
    color: hsl(var(--foreground));
}
.din-mh-btn svg {
    flex-shrink: 0;
}

/* ── 2. REPORT PANEL (left, light theme) ────────────────────── */
.din-rp {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 36.9231em; /* 480px at font-size 0.8125em */
    z-index: 10500;
    background: #f0f0f0;
    color: #1a1a1a;
    font-family: var(--font-sans);
    font-size: 0.8125em;
    display: flex;
    flex-direction: column;
    box-shadow: 0.3077em 0 1.8462em rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.din-rp-open {
    transform: translateX(0);
}
.din-rp-closed {
    transform: translateX(-100%);
}

/* ── Embedded mode: din-ic (Input Card) inside ContentPanel ────── */
.din-ic.din-ic--embedded {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    z-index: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    transition: none;
    transform: none;
    color: #333;
}
.din-ic.din-ic--embedded.din-ic-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.din-ic.din-ic--embedded.din-ic-closed {
    opacity: 0;
    transform: none;
    pointer-events: none;
    display: none;
}
.din-ic.din-ic--embedded .din-ic-header {
    display: none; /* ContentPanel already has a header */
}
.din-ic.din-ic--embedded .din-ic-body {
    padding: 0.75em 1em 1.25em;
}
.din-ic.din-ic--embedded .din-ic-label {
    color: #555;
}
.din-ic.din-ic--embedded .din-ic-input,
.din-ic.din-ic--embedded .din-ic-select {
    background: #fff;
    color: #111;
    border-color: #d1d5db;
}
.din-ic.din-ic--embedded .din-ic-section-title {
    color: #888;
}

/* ── din-ic inside ContentPanel (#din-ic-mount) ─────────────────────────── */
#din-ic-mount .din-ic.din-ic--embedded {
    font-size: 1em;                         /* 14px — gleich wie ContentPanel-Basis */
    color: #111;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
#din-ic-mount .din-ic-body {
    padding: 0.857em 0.929em 1.143em;       /* 12 13 16 ÷ 14 */
}
#din-ic-mount .din-ic-row {
    margin-bottom: 0.571em;                 /* 8 ÷ 14 */
}
#din-ic-mount .din-ic-row-half {
    max-width: 50%;
}
#din-ic-mount .din-ic-section-title {
    display: block;                         /* sichtbar im ContentPanel */
    font-size: 0.714em;                     /* 10px ÷ 14 */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bbb;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.5em;
    margin-top: 1.071em;                    /* 15 ÷ 14 */
    margin-bottom: 0.714em;                 /* 10 ÷ 14 */
}
#din-ic-mount .din-ic-section-title:first-child {
    margin-top: 0;
}
#din-ic-mount .din-ic-label {
    font-family: var(--font-sans);
    font-size: 0.857em;                     /* 12px ÷ 14 */
    color: #999;
    margin-bottom: 0.286em;
    font-weight: 400;
}
#din-ic-mount .din-ic-input,
#din-ic-mount .din-ic-select {
    background: #fafafa;
    border: 1px solid #eaeaea;
    color: #111;
    border-radius: 0.357em;                 /* 5px ÷ 14 */
    height: 2em;                            /* 28px */
    font-family: var(--font-sans);
    font-size: 0.929em;                     /* 13px ÷ 14 */
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s ease;
}
#din-ic-mount .din-ic-input:focus,
#din-ic-mount .din-ic-select:focus {
    border-color: #555;
    box-shadow: none;
    outline: none;
}
/* 4-Spalten → 2×2 Grid im schmalen Panel */
#din-ic-mount .din-ic-row-4col {
    grid-template-columns: 1fr 1fr;         /* 2 Spalten statt 4 */
    gap: 0.357em 0.571em;                   /* 5 8 ÷ 14 */
    margin-bottom: 0.571em;
}
#din-ic-mount .din-ic-calc-btn {
    background: #111;
    color: #fff;
    border-radius: 0.357em;
    height: 2.143em;                        /* 30px ÷ 14 */
    font-size: 0.929em;                     /* 13px */
    font-weight: 600;
    margin-top: 1em;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
}
#din-ic-mount .din-ic-calc-btn:hover {
    background: #000;
}
#din-ic-mount .din-ic-calc-btn svg {
    stroke: #fff;
}
#din-ic-mount .din-ic-error {
    font-size: 0.857em;
    border-radius: 0.357em;
    margin-top: 0.571em;
}

/* ── DinPanel — Accordion-Container im ContentPanel ─────────────────────── */
.din-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size: 1em;                         /* inherits 14px from .content-panel — gleich wie .ghost-panel */
    -webkit-font-smoothing: antialiased;
}

.din-panel__section {
    border-bottom: 1px solid #eaeaea;
}
.din-panel__section--result {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.din-panel__fold-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.615em 1em;                   /* 8 13 ÷ 13 */
    border: none;
    background: #fafafa;
    color: #999;
    cursor: pointer;
    font-size: 0.692em;                     /* ~9px */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}
.din-panel__fold-header:hover {
    background: #f0f0f0;
    color: #555;
}
.din-panel__fold-header--static {
    cursor: default;
    pointer-events: none;
}
.din-panel__fold-header--static:hover {
    background: #fafafa;
    color: #999;
}

.din-panel__chevron {
    flex-shrink: 0;
    color: #ccc;
    transform: rotate(0deg);
    transition: transform 0.18s ease;
}
.din-panel__chevron--open {
    transform: rotate(180deg);
}

/* Smooth accordion via grid trick (keine fixe Höhe nötig) */
.din-panel__fold-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s ease;
}
.din-panel__fold-body--collapsed {
    grid-template-rows: 0fr;
}
.din-panel__fold-inner {
    overflow: hidden;
}

/* ── #din-rp-mount im DinPanel ───────────────────────────────────────────── */
#din-rp-mount .din-rp.din-rp--embedded {
    height: auto;
    font-size: 0.923em;                     /* ~12px */
}
#din-rp-mount .din-rp.din-rp--embedded .din-rp-body {
    padding: 0.923em 1em 1.231em;
    overflow-x: hidden;
}

/* ── Embedded mode: din-rp inside ContentPanel ─────────────────── */
.din-rp.din-rp--embedded {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    z-index: auto;
    box-shadow: none;
    transition: none;
    transform: none;
    background: transparent;
}
.din-rp.din-rp--embedded.din-rp-open {
    transform: none;
}
.din-rp.din-rp--embedded.din-rp-closed {
    transform: none;
    display: none;
}
.din-rp.din-rp--embedded .din-rp-header {
    display: none; /* ContentPanel already has a header */
}
.din-rp.din-rp--embedded .din-rp-body {
    padding: 0.75em 1em 1.25em;
}

.din-rp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3846em 1.5385em;
    border-bottom: 1px solid #eaeaea;
    flex-shrink: 0;
}
.din-rp-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.1538em;
    min-width: 0;
}
.din-rp-title {
    font-size: 1.23em;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.din-rp-subtitle {
    font-size: 0.8462em;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.din-rp-close {
    width: 2.1538em;
    height: 2.1538em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #555;
    padding: 0;
    border-radius: 0.375em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition),
        color var(--transition);
}
.din-rp-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}
.din-rp-close svg {
    width: 0.9231em;
    height: 0.9231em;
}

.din-rp-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2308em 1.5385em 1.8462em;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.din-rp-body::-webkit-scrollbar {
    width: 0.3846em;
}
.din-rp-body::-webkit-scrollbar-track {
    background: transparent;
}
.din-rp-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0.2308em;
}

.din-rp-section {
    margin-bottom: 1.5385em;
}
.din-rp-section-title {
    font-size: 0.8462em;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 0.9091em;
    padding-bottom: 0.5455em;
    border-bottom: 0.0909em solid #e0e0e0;
    margin: 1em 0 2em;
}

/* ── Ergebnis-Bereich (dunklerer Hintergrund) ── */
.din-rp-results {
    background: #f0f0f0;
    margin: 0 -1.5385em;
    padding: 1.3846em 1.5385em 0.1538em;
    border-top: 0.0769em solid #ddd;
}
.din-rp-results .din-rp-section-title {
    color: #444;
    border-bottom-color: #d0d0d0;
}

/* ── Report: Editable Input Form ─── */
.din-rp-form {
    display: flex;
    flex-direction: column;
    gap: 0.6154em;
}
.din-rp-form-row {
    display: flex;
    align-items: center;
    gap: 0.6154em;
}
.din-rp-form-row-4col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.6154em;
}
.din-rp-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.1538em;
}
.din-rp-form-label {
    font-size: 0.8462em;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    min-width: 7.2727em;
    flex-shrink: 0;
}
.din-rp-form-row-4col .din-rp-form-label {
    min-width: unset;
}
.din-rp-form-input,
.din-rp-form-select {
    flex: 1;
    -webkit-appearance: none;
    height: 2.5455em;
    padding: 0 0.7273em;
    color: #2a2a2e;
    background: #e7e7e7;
    border-radius: 0.3636em;
    font-family: var(--font-mono);
    font-size: 0.9167em;
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
    width: 100%;
    box-sizing: border-box;
    border: none;
}

.din-rp-form-input {
    padding: 0.75em 0.7273em;
}
.din-rp-form-input:focus,
.din-rp-form-select:focus {
    outline: none;
    border-color: #4a8fe8;
    box-shadow: 0 0 0 0.1667em rgba(74, 143, 232, 0.15);
}

/* ── Report: Collapsible sections ── */
.din-rp-collapsible {
    border: 0.0769em solid #e0e0e0;
    border-radius: 0.4615em;
    margin-bottom: 0.9231em;
    overflow: hidden;
    background: #fff;
}
.din-rp-collapsible-summary {
    display: flex;
    align-items: center;
    gap: 0.4615em;
    height: 2.7692em;
    padding: 0 0.9231em;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a1a;
    user-select: none;
    list-style: none;
    transition: background var(--transition);
}
.din-rp-collapsible-summary::-webkit-details-marker {
    display: none;
}
.din-rp-collapsible-summary:hover {
    background: rgba(0, 0, 0, 0.03);
}

.din-rp-chevron {
    width: 0.7692em;
    height: 0.7692em;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    color: #888;
}
.din-rp-collapsible[open] .din-rp-chevron {
    transform: rotate(180deg);
}

.din-rp-collapsible-body {
    padding: 0.9231em;
    border-top: 0.0769em solid #e0e0e0;
}

.din-rp-form-row.din-rp-form-row-4col {
    margin-top: 1em;
}

/* (Geometrie uses din-table layout like Bauteil-Breakdown) */

/* ── Report: Actions row (Recalc + Downloads) ───── */
.din-rp-actions {
    display: flex;
    gap: 0.4615em;
    align-items: stretch;
}
.din-rp-recalc-btn,
.din-rp-dl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4615em;
    height: 3.0615em;
    border-radius: 0.4615em;
    font-family: var(--font-sans);
    font-size: 0.8462em;
    font-weight: 600;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
    white-space: nowrap;
    box-sizing: border-box;
}
.din-rp-recalc-btn {
    flex: 1;
    background: #333;
    color: #fff;
    border: none;
    padding: 0 0.7692em;
}
.din-rp-recalc-btn svg {
    stroke: #fff;
}
.din-rp-recalc-btn:hover {
    background: #111;
}
.din-rp-dl-btn {
    padding: 0 0.7692em;
    background: #f0f0f0;
    color: #444;
    border: 0.0769em solid #d0d0d0;
}
.din-rp-dl-btn:hover {
    background: #e4e4e4;
    border-color: #bbb;
}

.din-rp-download-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.9231em;
    color: #4a8fe8;
    text-decoration: none;
    cursor: pointer;
}
.din-rp-download-link:hover {
    text-decoration: underline;
}

/* ── 2b. PDF-VIEWER PANEL (right side) ──────────────────────── */
.din-pdf {
    position: fixed;
    left: 32.23077em;
    top: 0;
    bottom: 0;
    width: 55em;
    background: #f8f8f8;
    color: #1a1a1a;
    font-family: var(--font-sans);
    font-size: 0.8125em;
    z-index: 10499;
    display: flex;
    flex-direction: column;
    box-shadow: 0.3077em 0 1.8462em rgba(0, 0, 0, 0.12);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.din-pdf-open {
    transform: translateX(0);
}
.din-pdf-closed {
    transform: translateX(-300%);
}

.din-pdf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3846em 1.5385em;
    border-bottom: 1px solid #eaeaea;
    flex-shrink: 0;
}
.din-pdf-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.1538em;
    min-width: 0;
}
.din-pdf-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.din-pdf-subtitle {
    font-size: 0.8em;
    color: #888;
    font-weight: 400;
}
.din-pdf-close {
    width: 2.1538em;
    height: 2.1538em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #555;
    padding: 0;
    border-radius: 0.375em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition),
        color var(--transition);
}
.din-pdf-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}
.din-pdf-close svg {
    width: 0.9231em;
    height: 0.9231em;
}

.din-pdf-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    background: #eee;
}
.din-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.din-pdf-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.3125em; /* 5px at 16px */
    bottom: 0;
    cursor: ew-resize;
    background: transparent;
    z-index: 1;
    transition: background 0.15s;
}
.din-pdf-resize:hover,
.din-pdf-resize.active {
    background: hsl(221 83% 63% / 0.4);
}

/* ── 3. CHAT WINDOW (centered, draggable) ───────────────────── */
.din-cw {
    position: fixed;
    top: 50%;
    left: calc(50% + 30px);             /* +30px: Mitte der Fläche rechts der Sidebar (60px) */
    /* Zentriert — wird durch dinChatOpen(posRect) überschrieben wenn Koordinaten übergeben */
    transform: translateY(-50%) translateX(-50%);
    width: 35.3333em;
    height: 40em;
    min-height: 25em;
    z-index: 10600;
    background: hsl(var(--card) / 0.94);
    backdrop-filter: blur(0.8333em);
    -webkit-backdrop-filter: blur(0.8333em);
    border: 0.0833em solid hsl(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: 0.75em;
    color: #ebebeb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.din-cw-open {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%);
    pointer-events: auto;
}
.din-cw-closed {
    opacity: 0;
    transform: translateY(calc(-50% + 1.6667em)) translateX(-50%);
    pointer-events: none;
}
.din-cw-minimized {
    height: auto !important;
    min-height: unset !important;
    top: auto !important;
    bottom: 1.3333em !important;
    right: 25.8333em !important;
    left: auto !important;
    transform: none !important;
    width: 21.6667em;
}
.din-cw-minimized .din-cw-body {
    display: none;
}

.din-cw-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9154em 1.25em;
    border-bottom: 0.0769em solid hsl(var(--border));
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    background: hsl(var(--card-elevated));
}
.din-cw-titlebar:active {
    cursor: grabbing;
}

.din-cw-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #ebebeb;
}
.din-cw-buttons {
    display: flex;
    gap: 0.3333em;
}
.din-cw-minimize,
.din-cw-close {
    width: 1.8333em;
    height: 1.8333em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #898994;
    padding: 0;
    border-radius: 0.3333em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition),
        color var(--transition);
}
.din-cw-minimize:hover,
.din-cw-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ebebeb;
}
.din-cw-minimize svg,
.din-cw-close svg {
    width: 0.8333em;
    height: 0.8333em;
}

.din-cw-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.din-cw-body #din-chat-mount {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── SHARED: Bauteil/Layer styles (used in report panel) ────── */
.din-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    margin-bottom: 0.5em;
}
.din-field {
    display: flex;
    flex-direction: column;
    gap: 0.2308em;
}

.din-label {
    font-size: 0.7692em;
    font-weight: 400;
    color: #898994;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.din-input,
.din-select {
    height: 2.1538em;
    padding: 0 0.6154em;
    background: #27272a;
    border: 0.0769em solid #2f2f32;
    border-radius: 0.3077em;
    color: #ebebeb;
    font-family: var(--font-mono);
    font-size: 0.8462em;
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
    width: 100%;
    box-sizing: border-box;
}
.din-select {
    font-family: var(--font-sans);
    font-size: 0.8462em;
}
.din-input:focus,
.din-select:focus {
    border-color: hsl(var(--ring));
    box-shadow:
        0 0 0 0.1538em rgba(24, 24, 27, 1),
        0 0 0 0.3077em hsl(var(--ring) / 0.3);
}

/* Report panel overrides for shared form elements */
.din-rp .din-input,
.din-rp .din-select {
    background: #fff;
    border-color: #ddd;
    color: #1a1a1a;
}
.din-rp .din-input:focus,
.din-rp .din-select:focus {
    border-color: #4a8fe8;
    box-shadow:
        0 0 0 0.1538em #f8f8f8,
        0 0 0 0.3077em rgba(74, 143, 232, 0.3);
}
.din-rp .din-label {
    color: #666;
}

/* ── Bauteil-Accordion ───────────── */
.din-bauteil {
    border: 0.0769em solid #2f2f32;
    border-radius: 0.3077em;
    margin-bottom: 0.3846em;
    background: rgba(11, 11, 14, 0.5);
    overflow: hidden;
}
.din-rp .din-bauteil {
    border-color: #e0e0e0;
    background: #fff;
}

.din-bauteil-summary {
    display: flex;
    align-items: center;
    gap: 0.5em;
    height: 2.5em;
    padding: 0 0.8333em;
    cursor: pointer;
    font-size: 0.9231em;
    font-weight: 400;
    color: #afafb6;
    user-select: none;
    list-style: none;
    transition: background var(--transition);
}
.din-bauteil-summary::-webkit-details-marker {
    display: none;
}
.din-bauteil-summary:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ebebeb;
}
.din-bauteil[open] > .din-bauteil-summary {
    color: #ebebeb;
}

.din-rp .din-bauteil-summary {
    color: #555;
}
.din-rp .din-bauteil-summary:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #1a1a1a;
}
.din-rp .din-bauteil[open] > .din-bauteil-summary {
    color: #1a1a1a;
}

.din-chevron {
    width: 0.7692em;
    height: 0.7692em;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.din-bauteil[open] .din-chevron {
    transform: rotate(180deg);
}

.din-bauteil-body {
    padding: 0.7692em 0.7692em 0.9231em;
    border-top: 0.0769em solid #2f2f32;
    background: rgba(24, 24, 27, 0.6);
}
.din-rp .din-bauteil-body {
    border-top-color: #e0e0e0;
    background: #fafafa;
}

/* ── Layer-Rows ──────────────────── */
.din-layers-label {
    font-size: 0.7692em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #898994;
    margin: 0.6154em 0 0.4615em;
}
.din-rp .din-layers-label {
    color: #666;
}

.din-layer-row {
    display: grid;
    grid-template-columns: 1fr 6.1538em 1.6923em;
    gap: 0.3846em;
    align-items: center;
    margin-bottom: 0.3077em;
}

.din-remove-layer {
    width: 1.375em;
    height: 1.375em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #898994;
    padding: 0.25em;
    border-radius: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition),
        color var(--transition);
}
.din-remove-layer:hover {
    background: rgba(230, 50, 50, 0.15);
    color: #e63232;
}
.din-remove-layer svg {
    width: 0.625em;
    height: 0.625em;
}

.din-add-layer {
    margin-top: 0.4615em;
    padding: 0.3846em 0.7692em;
    border: 0.0769em dashed #2f2f32;
    background: transparent;
    border-radius: 0.3077em;
    color: #898994;
    font-size: 0.8462em;
    cursor: pointer;
    width: 100%;
    transition:
        border-color var(--transition),
        color var(--transition),
        background var(--transition);
}
.din-add-layer:hover {
    border-color: rgba(74, 143, 232, 0.5);
    color: #4a8fe8;
    background: rgba(74, 143, 232, 0.05);
}
.din-rp .din-add-layer {
    border-color: #ccc;
    color: #888;
}
.din-rp .din-add-layer:hover {
    border-color: #4a8fe8;
    color: #4a8fe8;
    background: rgba(74, 143, 232, 0.05);
}

/* ── SHARED: KPI-Kacheln ─────────── */
.din-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4615em;
    margin-bottom: 0.3077em;
}
.din-kpi {
    border-radius: 0.4615em;
    padding: 0.7692em 0.7692em 0.6154em;
    border: 0.0769em solid;
    height: 4.1538em;
    box-sizing: border-box;
}
.din-kpi-val {
    font-size: 1.3846em;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.1;
}
.din-kpi-label {
    font-size: 0.6923em;
    font-weight: 400;
    color: #898994;
    margin-top: 0.3333em;
    letter-spacing: 0.03em;
}

.din-kpi-speicher {
    background: #303136;
}
.din-kpi-speicher .din-kpi-val {
    color: #70db97;
}

.din-kpi-rest {
    background: #303136;
}
.din-kpi-rest .din-kpi-val {
    color: #85b3e0;
}

.din-kpi-verrot {
    background: #303136;
}
.din-kpi-verrot .din-kpi-val {
    color: #edb25e;
}

.din-kpi-neubau {
    background: #303136;
}
.din-kpi-neubau .din-kpi-val {
    color: #db7070;
}

/* ── SHARED: Breakdown-Tabelle ───── */
.din-table-wrap {
    overflow-x: auto;
}
.din-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9231em;
}
.din-table th {
    font-size: 0.7692em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #898994;
    height: 1.8462em;
    padding: 0 0.4615em;
    text-align: right;
    border-bottom: 0.0769em solid #2f2f32;
}

.din-table th:first-child {
    text-align: left;
}

.din-table td {
    height: 2.1538em;
    padding: 0 0.4615em;
    border-bottom: 0.0769em solid rgba(47, 47, 50, 0.5);
    color: #afafb6;
}
.din-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}
.din-table td.din-num {
    font-family: var(--font-sans);
    text-align: right;
    color: #ebebeb;
}

/* Report panel table overrides */
.din-rp .din-table th {
    color: #666;
    border-bottom-color: #ddd;
    padding-bottom: 0.25em;
}
.din-rp .din-table td {
    color: #444;
    border-bottom-color: #eee;
}
.din-rp .din-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}
.din-rp .din-table td.din-num {
    color: #1a1a1a;
}

/* ── SHARED: Fehler / Loading ────── */
.din-error {
    background: rgba(230, 50, 50, 0.12);
    border: 0.0769em solid rgba(230, 50, 50, 0.35);
    color: #db7070;
    border-radius: 0.3077em;
    padding: 0.6154em 0.7692em;
    font-size: 0.8462em;
    margin-top: 0.6154em;
}
.din-loading {
    display: flex;
    align-items: center;
    gap: 0.6154em;
    color: #898994;
    font-size: 0.9231em;
    padding: 0.9231em 0;
}
@keyframes din-spin {
    to {
        transform: rotate(360deg);
    }
}
.din-spin {
    animation: din-spin 0.9s linear infinite;
}

/* ── Messwerkzeug-Toolbar ────────────────────────────────────────────────── */
#measure-toolbar {
    position: absolute;
    bottom: 2.25em; /* knapp über dem Status-Bar */
    left: 0.75em;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.25em;
    background: hsl(var(--card) / 0.92);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    border: 0.0625em solid hsl(var(--border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.25em 0.375em;
    pointer-events: auto;
}

.measure-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4348em;
    height: 2.4348em;
    padding: 0 0.7826em 0 0.6087em;
    background: transparent;
    border: 0.087em solid transparent;
    border-radius: var(--radius-sm);
    color: hsl(var(--foreground-dim));
    font-size: 0.7188em;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
    opacity: 0.85;
}
.measure-btn:hover {
    background: hsl(var(--muted) / 0.6);
    color: hsl(var(--foreground));
    opacity: 1;
}
.measure-btn.active {
    background: hsl(var(--accent-orange) / 0.15);
    color: hsl(25 100% 68%);
    border-color: hsl(var(--accent-orange) / 0.55);
    opacity: 1;
}
.measure-btn.active:hover {
    background: hsl(var(--accent-orange) / 0.22);
}
/* Erster-Punkt-gesetzt Indikator (horizontale Messung) */
.measure-btn.measure-btn-first-pt {
    background: hsl(var(--primary) / 0.18);
    border-color: hsl(var(--primary) / 0.55);
    color: hsl(var(--primary));
    opacity: 1;
}

/* Löschen-Schaltfläche – nur Icon, keine Text */
.measure-btn-clear {
    padding: 0 0.6087em;
    color: hsl(var(--muted-fg));
}
.measure-btn-clear:hover {
    color: hsl(var(--destructive));
    background: hsl(var(--destructive) / 0.1);
}

.measure-divider {
    width: 0.0625em;
    height: 1.125em;
    background: hsl(var(--border));
    margin: 0 0.125em;
    flex-shrink: 0;
}

/* ── Mess-Labels (3D-Beschriftungen) ───────────────────────────────────── */
.measure-label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
    z-index: 10002;
    font-family: var(--font-mono);
    font-size: 0.55em;           /* Messwerte noch etwas kleiner */
    font-weight: 500;
    white-space: nowrap;
    padding: 0.16em 0.45em;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    line-height: 1.4;
    letter-spacing: 0.02em;
    transition: opacity 0.12s ease;
}

/* Größe/Look mit höherer Spezifität erzwingen (schlägt die ältere .measure-label-Regel
   aus src/style.css, die via Vite zusätzlich geladen wird). */
#potree_render_area .measure-label {
    font-size: 0.55em;
    font-weight: 500;
    padding: 0.16em 0.45em;
    line-height: 1.25;
}

/* Uniformer minimalistischer Look: weiße Mono-Schrift auf solidem Schwarz,
   kein farbiger Rand. Typ wird über die (farbige) Linie/das Crosshair vermittelt.
   Höhere Spezifität (2 Klassen) + später definiert → schlägt die Typ-Farben unten. */
.measure-label.measure-label-horiz,
.measure-label.measure-label-vert,
.measure-label.measure-label-free,
.measure-label.measure-label-elev,
.measure-label.measure-label-area-h,
.measure-label.measure-label-area-v {
    background: hsl(0 0% 7% / 0.92);
    color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 100% / 0.12);
}

/* Höhenkote – orange */
.measure-label-elev {
    background: hsl(25 100% 12% / 0.88);
    color: hsl(25 100% 72%);
    border: 0.0909em solid hsl(var(--accent-orange) / 0.45);
}

/* Horizontale Messung – blau */
.measure-label-horiz {
    background: hsl(221 50% 12% / 0.88);
    color: hsl(221 83% 78%);
    border: 0.0909em solid hsl(var(--primary) / 0.45);
}

/* Vertikale Messung (Höhe) – grün */
.measure-label-vert {
    background: hsl(142 60% 8% / 0.88);
    color: hsl(142 70% 65%);
    border: 0.0909em solid hsl(142 70% 45% / 0.45);
}

/* Freie Messung (3D) – lila */
.measure-label-free {
    background: hsl(270 50% 12% / 0.88);
    color: hsl(270 80% 75%);
    border: 0.0909em solid hsl(270 80% 60% / 0.45);
}

/* ── TBX-4 Winkelmessung ───────────────────────────────────────────────
   Eigene Trefferflaeche: Klick auf das Label kippt zwischen kleinem und
   ueberstumpfem Winkel. Deshalb pointer-events aktiv + Cursor-Hinweis.
   Die Boegen liegen als ein SVG-Overlay eine Ebene darunter. */
.measure-label.measure-label-angle {
    background: hsl(0 0% 7% / 0.92);
    color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 100% / 0.12);
    cursor: pointer;
    user-select: none;
}
.measure-label.measure-label-angle:hover {
    border-color: hsl(0 0% 100% / 0.4);
}
.measure-angle-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* darf den Canvas nicht blockieren */
    z-index: 10001;         /* direkt unter .measure-label (10002) */
    overflow: visible;
}
.measure-angle-arc {
    fill: none;
    stroke: hsl(0 0% 100% / 0.85);
    stroke-width: 1.25;
    transition: opacity 0.12s ease;
}

/* Snap-Vorschau-Label – einheitlich weiß, Güte nur als ±mm-Text */
.snap-preview-label {
    background: hsl(0 0% 8% / 0.82);
    color: hsl(0 0% 100%);
    border: 0.0909em solid hsl(0 0% 100% / 0.5);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    letter-spacing: 0.02em;
}

/* ── Internes Snap-Benchmark-Panel ─────────────────────────────────────── */
#snap-bench-panel {
    position: fixed;
    right: 1em;
    top: 4.5em;
    width: 19em;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 100000;
    background: hsl(0 0% 9% / 0.96);
    color: hsl(0 0% 92%);
    border: 1px solid hsl(0 0% 100% / 0.14);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#snap-bench-panel .sb-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55em 0.7em; border-bottom: 1px solid hsl(0 0% 100% / 0.1);
}
#snap-bench-panel .sb-title { font-weight: 700; letter-spacing: 0.02em; }
#snap-bench-panel .sb-close { background: transparent; border: 0; color: hsl(0 0% 70%); cursor: pointer; font-size: 13px; }
#snap-bench-panel .sb-close:hover { color: #fff; }
#snap-bench-panel .sb-body { padding: 0.6em 0.7em; }
#snap-bench-panel .sb-sec { padding: 0.5em 0; border-bottom: 1px solid hsl(0 0% 100% / 0.08); }
#snap-bench-panel .sb-sec:last-child { border-bottom: 0; }
#snap-bench-panel .sb-sec-title { font-weight: 700; margin-bottom: 0.4em; display: flex; justify-content: space-between; align-items: center; }
#snap-bench-panel .sb-dev { color: hsl(0 0% 60%); line-height: 1.4; margin-bottom: 0.5em; }
#snap-bench-panel .sb-row { display: flex; flex-direction: column; gap: 0.2em; margin-bottom: 0.5em; }
#snap-bench-panel .sb-select { background: hsl(0 0% 14%); color: #fff; border: 1px solid hsl(0 0% 100% / 0.15); border-radius: 4px; padding: 0.3em; font-family: inherit; font-size: 11px; }
#snap-bench-panel .sb-btns { display: flex; gap: 0.4em; flex-wrap: wrap; margin: 0.3em 0; }
#snap-bench-panel .sb-btn { flex: 1; background: hsl(210 80% 45%); color: #fff; border: 0; border-radius: 4px; padding: 0.45em 0.5em; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; }
#snap-bench-panel .sb-btn:hover { background: hsl(210 80% 52%); }
#snap-bench-panel .sb-btn:disabled { opacity: 0.5; cursor: default; }
#snap-bench-panel .sb-mini { background: hsl(0 0% 18%); color: #ddd; border: 1px solid hsl(0 0% 100% / 0.12); border-radius: 4px; padding: 0.3em 0.5em; cursor: pointer; font-family: inherit; font-size: 10px; }
#snap-bench-panel .sb-mini:hover { background: hsl(0 0% 24%); }
#snap-bench-panel .sb-danger { color: #f88; border-color: hsl(0 60% 50% / 0.4); }
#snap-bench-panel .sb-status { color: hsl(140 60% 65%); margin: 0.35em 0; min-height: 1.2em; }
#snap-bench-panel .sb-muted { color: hsl(0 0% 55%); font-weight: 400; }
#snap-bench-panel .sb-table { width: 100%; border-collapse: collapse; font-size: 10px; }
#snap-bench-panel .sb-table th, #snap-bench-panel .sb-table td { text-align: right; padding: 0.15em 0.3em; border-bottom: 1px solid hsl(0 0% 100% / 0.07); }
#snap-bench-panel .sb-table th:first-child, #snap-bench-panel .sb-table td:first-child { text-align: left; color: hsl(0 0% 70%); }
#snap-bench-panel .sb-slider { display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 0.4em; margin-bottom: 0.3em; }
#snap-bench-panel .sb-slider span { color: hsl(0 0% 70%); }
#snap-bench-panel .sb-slider output { color: #fff; min-width: 2.5em; text-align: right; }
#snap-bench-panel .sb-slider input[type=range] { width: 100%; }
#snap-bench-panel .sb-notes { width: 100%; box-sizing: border-box; background: hsl(0 0% 13%); color: #fff; border: 1px solid hsl(0 0% 100% / 0.15); border-radius: 4px; padding: 0.4em; font-family: var(--font-mono); font-size: 11px; resize: vertical; }
#snap-bench-panel .sb-collapser { cursor: pointer; user-select: none; }
#snap-bench-panel .sb-collapser:hover { color: #fff; }
#snap-bench-panel .sb-caret { display: inline-block; width: 1em; color: hsl(0 0% 60%); }
#snap-bench-panel .sb-next-list { margin: 0.2em 0 0.4em; padding-left: 1.1em; color: hsl(0 0% 72%); line-height: 1.45; }
#snap-bench-panel .sb-next-list li { margin-bottom: 0.35em; }
#snap-bench-panel .sb-next code { background: hsl(0 0% 16%); padding: 0 0.3em; border-radius: 3px; color: hsl(210 80% 75%); }
#snap-bench-panel .sb-next em { font-style: normal; color: hsl(0 0% 88%); }

#snap-bench-panel .sb-tabs { display: flex; border-bottom: 1px solid hsl(0 0% 100% / 0.1); }
#snap-bench-panel .sb-tab { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; color: hsl(0 0% 60%); cursor: pointer; padding: 0.5em; font-family: var(--font-mono); font-size: 11px; }
#snap-bench-panel .sb-tab:hover { color: #fff; }
#snap-bench-panel .sb-tab-active { color: #fff; border-bottom-color: hsl(210 80% 55%); }
#snap-bench-panel .ux-task { padding: 0.35em 0; border-bottom: 1px solid hsl(0 0% 100% / 0.06); }
#snap-bench-panel .ux-task-h { display: flex; justify-content: space-between; align-items: center; gap: 0.4em; }
#snap-bench-panel .ux-task-t { color: #eee; }
#snap-bench-panel .ux-done .ux-task-t { color: hsl(140 60% 65%); }
#snap-bench-panel .ux-task-i { color: hsl(0 0% 55%); font-size: 10px; line-height: 1.35; margin-top: 0.15em; }
#snap-bench-panel .ux-obs-card { border: 1px solid hsl(0 0% 100% / 0.1); border-radius: 5px; padding: 0.4em; margin-bottom: 0.45em; }
#snap-bench-panel .ux-obs-h { display: flex; justify-content: space-between; gap: 0.4em; margin-bottom: 0.3em; }
#snap-bench-panel .ux-thumb { width: 100%; border-radius: 3px; display: block; margin-bottom: 0.3em; }
#snap-bench-panel .ux-obs-row { display: flex; gap: 0.4em; align-items: center; margin-bottom: 0.3em; }
#snap-bench-panel .ux-sev { flex: 1; background: hsl(0 0% 14%); color: #fff; border: 1px solid hsl(0 0% 100% / 0.15); border-radius: 4px; padding: 0.25em; font-family: inherit; font-size: 10px; }
#snap-bench-panel .ux-note { width: 100%; box-sizing: border-box; background: hsl(0 0% 13%); color: #fff; border: 1px solid hsl(0 0% 100% / 0.15); border-radius: 4px; padding: 0.3em; font-family: var(--font-mono); font-size: 10px; }
#snap-bench-panel .ux-recording { background: hsl(0 70% 45%); }
#snap-bench-panel .ux-recording:hover { background: hsl(0 70% 52%); }
#snap-bench-chip {
    /* [stefan_10_06] unten links, direkt rechts neben dem SVG-NavCube (left:1em + 60px breit) */
    position: fixed; left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + 84px); right: auto; bottom: 1em; z-index: 99999;
    background: hsl(0 0% 12% / 0.9); color: hsl(0 0% 85%);
    border: 1px solid hsl(0 0% 100% / 0.18); border-radius: 999px;
    padding: 0.4em 0.8em; font-family: var(--font-mono); font-size: 11px;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
#snap-bench-chip:hover { background: hsl(0 0% 18% / 0.95); color: #fff; }
/* Präsentation/Follow-Show: Dev-Chip nie über der Steuer-Pille (Felix 2026-09-17) */
body.board-presenting #snap-bench-chip { display: none !important; }

/* Plan HR/Block 3: klassische Messwerkzeuge (vertikal/horizontal/Flächen-Gruppe) standardmäßig
   ausgeblendet — reaktivierbar über Einstellungen → Messen („Klassische Messwerkzeuge") */
body:not(.classic-meas-tools) .tbx-classic { display: none !important; }

/* Dock: deaktivierte Werkzeuge (Winkel, Notiz, Audit, Marker — „in Arbeit") */
.tbx-btn:disabled {
    opacity: 0.35;
    cursor: default;
    filter: grayscale(1);
}

/* Plan I: Mess-Shortcut-HUD — Snap-Bench-Position/-Stil, kontextabhängige Tasten-Hilfe */
#measure-key-hud {
    position: fixed; right: 1em; bottom: 1em; z-index: 99998;
    display: flex; align-items: center; gap: 1em;
    background: hsl(0 0% 12% / 0.9); color: hsl(0 0% 85%);
    border: 1px solid hsl(0 0% 100% / 0.18); border-radius: 999px;
    padding: 0.4em 0.9em; font-family: var(--font-mono); font-size: 11px;
    pointer-events: none; user-select: none; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
#measure-key-hud .hud-item { display: inline-flex; align-items: center; gap: 0.4em; color: hsl(0 0% 70%); }
#measure-key-hud kbd {
    font-family: inherit; font-size: 10px; color: hsl(0 0% 90%);
    border: 1px solid hsl(0 0% 100% / 0.25); border-bottom-width: 2px;
    border-radius: 4px; padding: 0 0.45em; line-height: 1.5;
    background: hsl(0 0% 18%);
}
#measure-key-hud .hud-on { color: hsl(213 76% 70%); }
#measure-key-hud .hud-on kbd {
    border-color: hsl(213 76% 60%); color: hsl(213 90% 80%);
    background: hsl(213 60% 25%);
}

/* Plan H: Ebenen-Angebot-Chip („⏚ Ebene · gefittet — Y"), folgt dem Cursor */
#plane-lock-chip {
    position: absolute; left: 0; top: 0; z-index: 10010;
    pointer-events: auto;
    background: hsl(0 0% 12% / 0.85); color: hsl(0 0% 85%);
    border: 1px solid hsl(0 0% 100% / 0.18); border-radius: 999px;
    padding: 0.25em 0.7em; font-family: var(--font-mono); font-size: 10px;
    cursor: pointer; white-space: nowrap; user-select: none;
}
#plane-lock-chip.plane-lock-chip--active {
    background: hsl(213 76% 56% / 0.92); color: #fff;
    border-color: hsl(213 76% 70%);
}

/* Snap-Vorschau-Ring – bildschirmfester, kamerazugewandter Marker am exakten Snap-Punkt */
.snap-preview-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid hsl(0 0% 100%);
    box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.55), inset 0 0 0 1px hsl(0 0% 0% / 0.35);
    background: transparent;
    pointer-events: none;
    z-index: 10003;
}

/* Horizontale Fläche – cyan/teal */
.measure-label-area-h {
    background: hsl(180 50% 10% / 0.88);
    color: hsl(180 80% 65%);
    border: 0.0909em solid hsl(180 70% 45% / 0.45);
}

/* Vertikale Fläche (3D) – gold/gelb */
.measure-label-area-v {
    background: hsl(45 60% 10% / 0.88);
    color: hsl(45 90% 65%);
    border: 0.0909em solid hsl(45 80% 50% / 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   NEW UI v2 – Screenshot-Style (light gray inactive / black active)
   ═══════════════════════════════════════════════════════════════ */

/* ── App Header ─────────────────────────────────────────────── */
#app-header {
    position: absolute;
    top: 1.25em;
    left: 1.25em;
    z-index: 10500;
    display: flex;
    align-items: center;
    gap: 0.75em;
    pointer-events: auto;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    background: transparent;
    border: none;
    padding: 0;
    color: #111;
    cursor: pointer;
    border-radius: 0.25em;
    transition: color 0.12s ease;
    flex-shrink: 0;
}
#btn-hamburger:hover {
    color: #555;
}

#app-title {
    font-family: var(--font-sans);
    font-size: 0.9375em;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.015em;
    white-space: nowrap;
    line-height: 1;
}


/* ── Brand Logo ─────────────────────────────────────────────── */
#brand-logo {
    display: none;
}

#brand-logo a {
    display: block;
    cursor: pointer;
}

#brand-logo img {
    width: 100%;
    height: auto;
    display: block;
}

body.shell-viewer-hidden #brand-logo {
    display: none;
}

/* ── Bottom Dock wrapper ────────────────────────────────────── */
/* Während des Projekt-Ladens (Overlay opak + Fade) die untere Dock-Pill und
   die obere View-Nav-Pill ausblenden — erscheinen erst, wenn das Overlay
   vollständig weg ist. */
body.orto-project-loading #bottom-dock,
body.orto-project-loading #view-nav-pill {
    display: none !important;
}

/* ── Dock-Tooltip (data-label) ────────────────────────────────────────
   Dasselbe Hover-Label wie in der Detail-Leiste beim Extrahieren
   (.detail-pill__btn[data-label]::after, src/styles/detail-bar.css):
   gleiches Attribut, gleiche Fläche, gleiche Schrift, gleiches Auf-Blenden,
   gleicher Abstand (16 px). Einziger Unterschied: hier ist es EIN eigenes
   Element statt eines Pseudo-Elements am Knopf, weil #dock-pill und
   #toolbox-panel für die Einklapp-Animation beide overflow:hidden tragen
   und ein ::after dort abgeschnitten würde. script.js hängt es als Kind von
   #bottom-dock ein (_dockTooltipsInit) und setzt links/unten beim Überfahren
   — senkrecht immer über der GANZEN Pille, damit es das Dock nie berührt.
   Ebene: #bottom-dock ist ein eigener Stacking-Context → lokaler z-index. */
#dock-tip {
    position: absolute;
    left: 0;
    bottom: 100%;
    transform: translateX(-50%) translateY(4px);
    z-index: 2;
    white-space: nowrap;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 6px 10px;
    border-radius: 7px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}

#dock-tip.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#bottom-dock {
    position: absolute;
    bottom: 1.15em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10400;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    pointer-events: auto;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Main dock pill ─────────────────────────────────────────── */
#dock-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(30, 30, 30, 0.65);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.919em;
    border-radius: 0.8em;
    padding: 0.3em;
    gap: 0;
    overflow: hidden;
    box-shadow: none;
}

/* Tab-Zeile + Toggle innerhalb der Pill */
.dock-pill__row {
    display: flex;
    align-items: center;
    padding: 0.2em;
    gap: 0;
    justify-content: center;
}

/* Rechte Luft = obere/untere Luft (Felix 2026-09-20).
   Waagerecht wirken nur die beiden Polster (Pille 0,3em + Zeile 0,2em),
   senkrecht kommt die Zentrierung dazu: die Ansichts-Tabs sind 1,4 px höher
   als der Icon-Knopf, macht 0,7 px Luft oben UND unten obendrauf. Ohne
   Zuschlag säße der Werkzeug-Knopf rechts genau um diese 0,7 px knapper —
   sichtbar, weil die Pille dort mit 0,8em Radius einrundet.
   ⚠ Der Zuschlag gilt nur, solange die Tabs in der Zeile stehen. Im Mini-Dock
   (Bauteil geöffnet / 3D-Board-Fenster) sind Tabs und Trenner aus, dort ist
   der Icon-Knopf selbst das höchste Kind → keine Zentrier-Luft, also auch
   kein Zuschlag, sonst kippt es in die andere Richtung. */
.dock-pill__row {
    padding-right: calc(0.2em + 0.7px);
}

body.shell-detail-tools .dock-pill__row,
body.shell-board-window-3d .dock-pill__row {
    padding-right: 0.2em;
}

/* view tabs */
#view-tabs {
    display: flex;
    align-items: center;
    gap: 0.125em;
}

.view-tab {
    font-size: 0.82em;
    height: 2.4em;
    padding: 0 1.2em;
    background: transparent;
    border: none;
    border-radius: 0.55em;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-sans);
    font-weight: 550;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.view-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
.view-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

/* separator */
.dock-sep {
    width: 1px;
    height: 1.4em;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.3em;
    flex-shrink: 0;
}

/* Grid / toolbox toggle button */
.dock-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    background: transparent;
    border: none;
    border-radius: 0.4em;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
    flex-shrink: 0;
}
.dock-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
.dock-icon-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   Raum-Detail-Toolbar — Dock-Style Pill
   ══════════════════════════════════════════════════════════════════ */
#room-detail-toolbar {
    position: absolute;
    bottom: 1.15em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10500;
    pointer-events: auto;
    animation: dt-fadeIn 0.2s ease-out;
}
@keyframes dt-fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dt-pill {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(30, 30, 30, 0.70);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8em;
    padding: 0.3em;
    overflow: hidden;
}
.dt-row {
    display: flex;
    align-items: center;
    padding: 0.2em;
    gap: 0;
    justify-content: center;
}
.dt-btn {
    font-size: 0.82em;
    height: 2.4em;
    padding: 0 1.2em;
    background: transparent;
    border: none;
    border-radius: 0.55em;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-sans);
    font-weight: 550;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.dt-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
.dt-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
}
.dt-btn--exit {
    color: rgba(255, 120, 120, 0.5);
}
.dt-btn--exit:hover {
    background: rgba(255, 80, 80, 0.15);
    color: rgba(255, 120, 120, 0.9);
}
.dt-sep {
    width: 1px;
    height: 1.4em;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.3em;
    flex-shrink: 0;
}
/* Opacity slider inline */
.dt-opacity {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.6em;
    cursor: default;
}
.dt-opacity-label {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-sans);
    font-weight: 500;
    white-space: nowrap;
}
.dt-opacity-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 5em;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.dt-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.15s ease;
}
.dt-opacity-slider::-webkit-slider-thumb:hover {
    background: rgba(255, 255, 255, 0.9);
}
.dt-opacity-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
}

/* ── Raum-Detail Floating Label (oben rechts, draggable) ────── */
#room-detail-label {
    position: absolute;
    z-index: 10500;
    pointer-events: auto;
    background: rgba(12, 12, 16, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-family: var(--font-sans);
    min-width: 220px;
    animation: dt-fadeIn 0.2s ease-out;
}
.rdl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: grab;
    user-select: none;
}
.rdl-header:active { cursor: grabbing; }
.rdl-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.rdl-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 12px 8px;
}
.rdl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    gap: 12px;
}
.rdl-row > span:first-child {
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}
.rdl-row > span:last-child {
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-weight: 600;
    text-align: right;
}
.rdl-walls {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rdl-wall-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1px 0;
    font-size: 10px;
    gap: 12px;
}
.rdl-wall-id {
    color: rgba(255, 255, 255, 0.35);
}
.rdl-wall-val {
    font-family: var(--font-mono, 'SF Mono', monospace);
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}
.rdl-opening-row {
    display: flex;
    align-items: baseline;
    padding: 1px 0 1px 12px;
    font-size: 9.5px;
    gap: 4px;
}
.rdl-opening-icon {
    font-size: 9px;
    flex-shrink: 0;
}
.rdl-opening-val {
    font-family: var(--font-mono, 'SF Mono', monospace);
    color: rgba(255, 255, 255, 0.40);
}

/* ── Öffnungs-Panel (Raum-Detail: Öffnungs-Modus) ───────────── */
#opening-panel {
    position: absolute;
    z-index: 10500;
    pointer-events: auto;
    background: rgba(12, 12, 16, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-family: var(--font-sans);
    min-width: 240px;
    max-width: 300px;
    animation: dt-fadeIn 0.2s ease-out;
}
.op-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.op-header:active { cursor: grabbing; }
.op-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.op-count {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 1px 7px;
}
.op-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}
.op-empty {
    padding: 12px;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

/* Accordion row */
.op-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.op-accordion:last-child { border-bottom: none; }

.op-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.15s;
}
.op-row-header:hover {
    background: rgba(255, 255, 255, 0.04);
}
.op-row-icon { font-size: 11px; flex-shrink: 0; }
.op-row-id {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.op-row-dims {
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.op-row-wall {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}
.op-row-chevron {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.op-row-inherit-tag {
    font-size: 9px;
    color: #6cc;
    background: rgba(102, 204, 204, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}
.op-inherited .op-row-header {
    border-left: 2px solid rgba(102, 204, 204, 0.4);
}
.op-accordion.open .op-row-chevron {
    transform: rotate(90deg);
}

/* Edit fields (inside accordion) */
.op-row-edit {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 6px 12px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.op-accordion.open .op-row-edit {
    display: flex;
}
.op-edit-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.op-edit-field label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    white-space: nowrap;
}
.op-edit-field input,
.op-edit-field select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-family: var(--font-mono, 'SF Mono', monospace);
    padding: 2px 6px;
    width: 90px;
    text-align: right;
}
.op-edit-field select {
    width: auto;
    min-width: 70px;
    text-align: left;
}
.op-btn-delete {
    background: rgba(220, 60, 60, 0.15);
    color: #e55;
    border: 1px solid rgba(220, 60, 60, 0.2);
    border-radius: 4px;
    font-size: 10px;
    padding: 3px 10px;
    cursor: pointer;
    align-self: flex-end;
    margin-top: 2px;
    transition: background 0.15s;
}
.op-btn-delete:hover {
    background: rgba(220, 60, 60, 0.3);
}

/* Footer */
.op-footer {
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.op-btn-measure {
    background: rgba(74, 143, 232, 0.15);
    color: #6ab0f7;
    border: 1px solid rgba(74, 143, 232, 0.2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
    width: 100%;
}
.op-btn-measure:hover {
    background: rgba(74, 143, 232, 0.25);
}

/* Measure status */
.op-measure-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 0;
    flex-wrap: wrap;
}
.op-status-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: op-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.op-status-dot--p1 { background: #ff8800; }
.op-status-dot--p2 { background: #44aaff; }
@keyframes op-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.op-btn-confirm {
    background: #4a8fe8;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 10px;
    margin-left: auto;
}
.op-btn-confirm:hover { background: #5a9ef0; }
.op-btn-reset {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 10px;
}
.op-btn-reset:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Toolbox panel (innerhalb der dock-pill) ─────────────────── */
#toolbox-panel {
    display: flex;
    align-items: flex-end;
    gap: 1em;                   /* Gruppen-/Trennlinien-Abstand */
    padding: 0.75em 0.5em 0.75em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    max-height: 10em;           /* generous room for bigger buttons */
    opacity: 1;
    transition:
        max-height 0.22s ease,
        opacity 0.18s ease,
        padding 0.22s ease;
    background: none;
}
#toolbox-panel.toolbox-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

/* each group inside toolbox */
.tbx-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125em; /* 5px — Figma: label ↔ pill gap */
}
.tbx-label {
    font-family: var(--font-sans);
    font-size: 0.6875em;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    line-height: 1;
}
.tbx-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.1875em;
    box-shadow: none;
}
/* Vertikale Trennlinie zwischen den Gruppen (Messung | Ansicht) */
.tbx-group-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.tbx-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875em;
    width: 3.75em;
    height: 3em;
    padding: 0.375em 0.5em;
    background: transparent;
    border: none;
    border-radius: 0.5em;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
/* Mess-Zeichen aus dem Entwurf bringen eigene Seitenverhältnisse mit — die
   Quadrat-Regel darunter würde sie verzerren. Spiegelung aus src/style.css. */
.tbx-btn svg.tbx-ico-mess {
    width: auto;
    height: auto;
}

.tbx-btn svg {
    width: 21px;
    height: 21px;
}

.tbx-btn span {
    font-family: var(--font-sans);
    font-size: 0.804em;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}
.tbx-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
/* active measure tool */
.tbx-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.tbx-btn.active:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* Auge-Icon: aktiv = Maße sichtbar → Auge offen; inaktiv = ausgeblendet → Auge zu */
#btn-toggle-measurements .ico-eye-on { display: none; }
#btn-toggle-measurements.active .ico-eye-on { display: block; }
#btn-toggle-measurements.active .ico-eye-off { display: none; }
/* first-point set — subtle blue accent */
.tbx-btn.measure-btn-first-pt {
    background: #2563eb;
    color: #fff;
}
/* danger (clear/trash) */
.tbx-btn-danger:hover {
    background: rgba(220, 50, 50, 0.15) !important;
    color: #ff6b6b !important;
}
/* separator inside pills */
.tbx-sep {
    width: 1px;
    height: 1.125em;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.125em;
    flex-shrink: 0;
}

/* ── Hide old/superseded elements ───────────────────────────── */
#measure-toolbar {
    display: none !important;
}
#tools-dock {
    display: none !important;
}

/* ── Status bar ──────────────────────────────────────────────── */

#status-bar:hover {
    opacity: 1;
}

/* ── Cloud-Menu (Hamburger Dropdown) ────────────────────────── */
#cloud-menu {
    position: absolute;
    top: 3.25em;
    left: 1.25em;
    z-index: 10600;
    display: flex;
    flex-direction: column;
    min-width: 11.25em;
    background: #f3f3f3;
    border: 0.0625em solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75em;
    padding: 0.25em;
    box-shadow:
        0 0.25em 1.25em rgba(0, 0, 0, 0.12),
        0 0.0625em 0.25em rgba(0, 0, 0, 0.06);
    animation: cloud-menu-in 0.12s ease;
}

@keyframes cloud-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.25em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cloud-menu-item {
    display: block;
    width: 100%;
    padding: 0.6923em 1.0769em;
    background: transparent;
    border: none;
    border-radius: 0.6154em;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.8125em;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition:
        background 0.12s ease,
        color 0.12s ease;
}
.cloud-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
}
.cloud-menu-item.active {
    background: #333;
    color: #fff;
    font-weight: 600;
}
.cloud-menu-item.active:hover {
    background: #444;
}

/* ── CO₂ Button (top-right, standalone) ─────────────────────── */
.top-action-btn {
    position: absolute;
    top: 1.6667em;
    right: 1.6667em;
    z-index: 10500;
    display: flex;
    align-items: center;
    gap: 0.6667em;
    height: 2.8333em;
    padding: 0 1.1667em 0 0.8333em;
    background: #e8e8e8;
    border: 0.0833em solid rgba(0, 0, 0, 0.06);
    border-radius: 0.8333em;
    color: #666;
    font-family: var(--font-sans);
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.0833em 0.6667em rgba(0, 0, 0, 0.07);
    transition:
        background 0.15s ease,
        color 0.15s ease;
    pointer-events: auto;
}
.top-action-btn:hover {
    background: #ddd;
    color: #333;
}
.top-action-btn:active {
    background: #ccc;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIN-CHATBOT  (.dc-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.din-chat-section {
    margin-top: 1.8462em;
    padding-top: 1.8462em;
    border-top: 0.0769em solid #2f2f32;
}
/* When chatbot is inside the chat window, remove borders/margins */
.din-cw .dc-wrap {
    border: none;
    border-radius: 0;
    background: transparent;
}
.din-cw .dc-hdr {
    display: none;
} /* titlebar is in the window itself */

.dc-wrap {
    font-size: 0.75em;
    background: #131720;
    border: 0.0833em solid #242940;
    border-radius: 0.6667em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Header — einzeilig, kompakt */
.dc-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6667em 1em;
    background: #0d1020;
    border-bottom: 0.0833em solid #242940;
    flex-shrink: 0;
}
.dc-title {
    font-size: 0.9167em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}
.dc-session-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #34c78a;
    box-shadow: 0 0 0.4167em #34c78a;
    animation: dc-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Nachrichten */
.dc-msgs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8333em 0.8333em 0.3333em;
    display: flex;
    flex-direction: column;
    gap: 0.6667em;
    scrollbar-width: thin;
    scrollbar-color: #242940 transparent;
}
.dc-row {
    display: flex;
}
.dc-u-row {
    justify-content: flex-end;
}
.dc-b-row {
    justify-content: flex-start;
}

.dc-bubble {
    max-width: 100%;
    padding: 0.5833em 0.8333em;
    display: flex;
    flex-direction: column;
    gap: 0.3333em;
    animation: dc-msg-in 0.18s ease-out;
}
.dc-u-bub {
    background: #364b60;
    border: 0.0833em solid #2a4060;
    border-radius: 0.8333em 0.8333em 0.1667em 0.8333em;
}
.dc-b-bub {
    background: #303136;
    border: none;
    border-radius: 0.8333em 0.8333em 0.8333em 0.1667em;
}
.dc-btext {
    font-size: 1.35em;
    line-height: 1.4;
    color: #e8eaf0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Formular-Trigger */
.dc-form-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.9em;
    background: rgba(212, 146, 42, 0.1);
    border: 0.1em solid rgba(212, 146, 42, 0.22);
    border-radius: 0.5em;
    color: #d4922a;
    font-size: 0.8333em;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition);
    align-self: flex-start;
    font-family: var(--font-sans);
}
.dc-form-btn:hover {
    background: rgba(212, 146, 42, 0.2);
}

/* Follow-Up Question Buttons */
.dc-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.dc-followup-btn {
    display: inline-block;
    padding: 0.381em 0.9524em;
    background: rgba(74, 143, 232, 0.1);
    border: none;
    border-radius: 1.1429em;
    color: #85b3e0;
    font-size: 1.35em;
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
    font-family: var(--font-sans);
    text-align: left;
    line-height: 1.35;
}
.dc-followup-btn:hover {
    background: rgba(74, 143, 232, 0.2);
    border-color: rgba(74, 143, 232, 0.45);
}

/* Topic-Chips (initiale Themenauswahl) */
.dc-topics {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 1.25em;
}
.dc-topic-btn {
    display: block;
    width: 100%;
    padding: 0.55em 1em;
    background: hsl(var(--card-elevated));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    font-size: 1.25em;
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
    font-family: var(--font-sans);
    text-align: left;
    line-height: 1.35;
}
.dc-topic-btn:hover {
    background: hsl(var(--primary) / 0.12);
    border-color: hsl(var(--primary) / 0.45);
    color: hsl(var(--primary));
}

/* Bullet-Liste in Bot-Antworten */
.dc-bullets {
    margin: 0.75em 0 0.25em 0;
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}
.dc-bullets li {
    font-size: inherit;
    line-height: 1.45;
    color: hsl(var(--foreground-dim));
}

/* Follow-Up Sentence */
.dc-follow-sentence {
    margin: 0.85em 0 0 0;
    font-style: italic;
    color: hsl(var(--muted-fg));
    font-size: inherit;
    line-height: 1.45;
}

/* Typing-Dots */
.dc-typing {
    flex-direction: row !important;
    gap: 0.4167em !important;
    padding: 0.8333em 1em !important;
    align-items: center;
}
.dc-tdot {
    width: 0.4167em;
    height: 0.4167em;
    border-radius: 50%;
    background: #d4922a;
    display: inline-block;
    animation: dc-dot-bounce 1.2s ease-in-out infinite;
}

/* Footer / Input */
.dc-ftr {
    border-top: 0.0833em solid #242940;
    padding: 0.6667em 0.8333em;
    flex-shrink: 0;
    background: #131720;
}
.dc-input-row {
    display: flex;
    gap: 0.5833em;
    align-items: flex-end;
}
.dc-textarea {
    flex: 1;
    background: #0f1117;
    border: none;
    border-radius: 0.5em;
    color: #e8eaf0;
    font-family: var(--font-sans);
    font-size: 1.35em;
    line-height: 1.5;
    padding: 0.5833em 0.75em;
    resize: none;
    outline: none;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
    min-height: 3em;
}
.dc-textarea:focus {
    box-shadow: 0 0 0 0.1667em rgba(212, 146, 42, 0.12);
}
.dc-textarea::placeholder {
    color: #92949b;
}
.dc-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dc-send-btn {
    width: 3em;
    height: 3em;
    border-radius: 0.5em;
    background: #e8e8e8;
    border: none;
    color: #0c0e14;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background var(--transition),
        transform 0.1s;
    flex-shrink: 0;
}
.dc-send-btn:hover:not(.dc-send-dis) {
    background: #e8e8e8;
    transform: scale(1.05);
}
.dc-send-dis {
    background: rgba(212, 146, 42, 0.15) !important;
    color: #7b82a0 !important;
    cursor: not-allowed !important;
}

/* Spinner */
.dc-spin {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.1667em solid rgba(12, 14, 20, 0.3);
    border-top-color: #0c0e14;
    border-radius: 50%;
    animation: dc-spin-anim 0.7s linear infinite;
}

/* Animationen */
@keyframes dc-msg-in {
    from {
        opacity: 0;
        transform: translateY(0.25em);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes dc-dot-bounce {
    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.4;
    }
    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}
@keyframes dc-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}
@keyframes dc-spin-anim {
    to {
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════════════════════════
   Ökobilanz FAB (bottom-right)
   ══════════════════════════════════════════════════════════════ */
/* ── Clip-Box Face Editor ──────────────────────────────────── */

/* Maß-Label während Drag (bottom-center des Canvas) */
.cbe-dim-label {
    display: none; /* Nicht mehr sichtbar – Anzeige läuft über #sb-camera */
}

/* Clip-Info: sichtbar während Drag, #sb-drag-val hervorgehoben */
#sb-clip-info #sb-drag-val {
    color: #555;
    font-weight: 400;
    min-width: 5em;
}

.oeko-fab {
    position: fixed;
    bottom: 2.3333em;
    right: 1.3333em;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.6667em;
    padding: 0 1.1667em;
    background: #e8e8e8;
    border: none;
    border-radius: var(--radius-lg);
    color: #666;
    font-family: var(--font-sans);
    font-size: 0.75em;
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}
.oeko-fab:hover {
    background: #dcdcdc;
    color: #444;
}

/* ── Element-Inspektor ───────────────────────────────────────────────────────
   Aktiv via body.inspect-mode (Toggle: Taste "?")
   ─────────────────────────────────────────────────────────────────────────── */

/* CI-Blau für den Element-Inspektor */
:root {
    --inspect-ci: #4242f5;
    --inspect-ci-55: #4242f5cc; /* ~55% alpha */
    --inspect-ci-12: #4242f51f; /* ~12% alpha */
}

/* Blauer 0.3125em-Rahmen (= 5px at 16px) um den gesamten Viewport */
body.inspect-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    border: 0.3125em solid var(--inspect-ci);
    z-index: 2147483647;
    pointer-events: none;
    box-sizing: border-box;
    animation: inspect-pulse 2s ease-in-out infinite;
}

@keyframes inspect-pulse {
    0%,
    100% {
        border-color: var(--inspect-ci);
    }
    50% {
        border-color: var(--inspect-ci-55);
    }
}

/* Subtiler CI-Outline auf dem aktuell gehovertem Element */
body.inspect-mode *:not(#inspect-tooltip):not(#inspect-tooltip *):hover {
    outline: 0.09375em solid var(--inspect-ci-55) !important; /* 1.5px at 16px */
    outline-offset: 0.0625em; /* 1px at 16px */
}

/* ── Tooltip ──────────────────────────────────────────────────── */
#inspect-tooltip {
    position: fixed;
    z-index: 2147483646;
    pointer-events: none;
    display: none;
    flex-direction: column;
    gap: 0.3em;
    min-width: 11.25em; /* 180px at 16px */
    max-width: 20em;    /* 320px at 16px */
    background: hsl(var(--card) / 0.97);
    border: 1px solid var(--inspect-ci-55);
    border-radius: var(--radius-md);
    padding: 0.55em 0.8em;
    box-shadow:
        var(--shadow-md),
        0 0 0 1px var(--inspect-ci-12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--font-sans);
}

#inspect-tooltip.isp-visible {
    display: flex;
}

.isp-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--inspect-ci);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isp-desc {
    font-size: 0.67rem;
    color: hsl(var(--foreground-dim));
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   DOCUMENT PANEL — din-rp style (light, left-side, full-height)
   ══════════════════════════════════════════════════════════════ */

.doc-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 36.9231em; /* 480px at font-size 0.8125em */
    z-index: 10500;
    background: #ffffff;
    color: #1a1a1a;
    font-family: var(--font-sans);
    font-size: 0.8125em;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border-right: 1px solid #e0e0e0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.doc-panel-open {
    transform: translateX(0);
    pointer-events: auto;
}
.doc-panel-closed {
    transform: translateX(-100%);
    pointer-events: none;
}

/* ── Header ── */
.doc-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.3846em 1.5385em;
    border-bottom: 1px solid #eaeaea;
    flex-shrink: 0;
    flex-direction: column;
    gap: 1.5em;
    font-size: 1.15em;
}
.doc-panel-header-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.1538em;
    min-width: 0;
    flex: 1;
    padding: 0 0.4em;
}
.doc-panel-title {
    font-size: 1.23em;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
    border: none;
    background: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    flex: 1;
    min-width: 0;
}
.doc-panel-title::placeholder {
    color: #bbb;
}
.doc-panel-title:focus {
    color: #000;
}
.doc-panel-subtitle {
    font-size: 0.8462em;
    color: #666;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

/* ── Save indicator ──────────────────────────────────────────────────────── */
.doc-save-indicator {
    margin-left: 1em;
    font-size: 0.929em;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #999;
    white-space: nowrap;
    transition: color 0.3s ease, opacity 0.3s ease;
}
.doc-save-indicator--saved {
    color: #30cf79;
}
.doc-save-indicator--error {
    color: #eb4d4b;
}
.doc-panel-close {
    width: 3em;
    height: 3em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #555;
    padding: 0;
    border-radius: 0.375em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition),
        color var(--transition);
    flex-shrink: 0;
    position: absolute;
    top: 1em;
    right: 1em;
}
.doc-panel-close:hover {
    background: #f5f5f5;
    color: #111;
}
.doc-panel-close svg {
    width: 40%;
    height: 40%;
}

/* ── Header buttons row ── */
.doc-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex-shrink: 0;
    width: 60%;
    justify-content: flex-end;
}

/* ── Header action buttons (Export, Bearbeiten, Lesen) ── */
.doc-panel-header-btn {
    display: flex;
    align-items: center;
    gap: 0.615em;                               /* 8 ÷ 13 — mirrors sidebar__item */
    height: 2.462em;                            /* 32 ÷ 13 */
    padding: 0 0.923em;                         /* 0 12 ÷ 13 */
    border: none;
    background: transparent;
    color: #666;
    font-size: 1em;                             /* inherits 13px from .doc-panel */
    font-weight: 400;
    border-radius: 0.462em;                     /* 6 ÷ 13 */
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    font-family: var(--font-sans);
    transition: background 0.15s, color 0.15s;
}
.doc-panel-header-btn:hover {
    background: #f5f5f5;
    color: #111;
}

/* ── Header export dropdown ── */
.doc-panel-header-export-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.3em;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 0.5em;
    padding: 0.25em;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    min-width: 10em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    z-index: 20;
}
.doc-panel-header-export-dropdown__item {
    display: block;
    width: 100%;
    padding: 0.4em 0.65em;
    border: none;
    background: transparent;
    color: #444;
    font-size: 0.82em;
    font-family: var(--font-sans);
    text-align: left;
    border-radius: 0.3em;
    cursor: pointer;
}
.doc-panel-header-export-dropdown__item:hover {
    background: #f5f5f5;
    color: #111;
}


/* ── Floating Toolbar — schwebt rechts vom doc-panel, folgt Cursor vertikal ── */
.doc-panel-floating-toolbar {
    position: fixed;
    left: calc(var(--shell-offset, 456px) + 0.625em);
    top: -3em;                            /* Anker; Position via transform gesetzt */
    z-index: 10600;
    font-size: 1em;
    /* Kein eigenes background/border/shadow — übernimmt .doc-panel-toolbar */
    transition: transform 0.5s ease;
    will-change: transform;
    pointer-events: auto;
}

/* ── Floating Toolbar Container — transparent, Styling übernimmt die Toolbar selbst */
.doc-panel-floating-toolbar {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ── Toolbar — Dark Pill Style, 2-zeilig ────────────���───────────────────── */
.doc-panel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: 0.4em 0.6em;
    background: #1c1c1e;
    border-radius: 0.5em;
    box-shadow:
        0 0.5em 1.5em rgba(0, 0, 0, 0.35),
        0 0.125em 0.375em rgba(0, 0, 0, 0.25),
        inset 0 0.0625em 0 rgba(255, 255, 255, 0.06);
    position: relative;
    flex-shrink: 0;
    align-items: flex-start;
    border-bottom: none;
}

/* Einzelne Zeile */
.doc-panel-toolbar-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.1em;
}

/* Trennlinie zwischen den zwei Zeilen */
.doc-panel-toolbar-row + .doc-panel-toolbar-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.15em;
}

/* Einzelner Button */
.doc-panel-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1em;
    height: 2.1em;
    padding: 0;
    border-radius: 0.35em;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
    flex-shrink: 0;
}
.doc-panel-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.doc-panel-toolbar-btn.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.doc-panel-toolbar-btn:disabled {
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
}
.doc-panel-toolbar-btn--labeled {
    width: auto;
    padding: 0 0.55em;
    gap: 0.5em;
    font-size: 0.75em;
    letter-spacing: 0;
    padding-top: 0.25em;
}

/* Trennstrich zwischen Gruppen */
.doc-panel-toolbar-divider {
    width: 1px;
    height: 1.1em;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 0.25em;
    flex-shrink: 0;
}

/* ── Export Menu ── */
.doc-panel-export-menu {
    position: absolute;
    bottom: calc(100% + 0.5em);
    right: 0;
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5em;
    padding: 0.25em;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 10em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 10;
}

.doc-panel-export-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.6em;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82em;
    border-radius: 0.3em;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.doc-panel-export-menu__item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── Scroll-Nav hint bar ── */
.doc-panel-scroll-hint {
    padding: 0.4615em 1.2308em;
    background: rgba(74, 143, 232, 0.08);
    border-bottom: 0.0769em solid rgba(74, 143, 232, 0.15);
    font-size: 0.8077em;
    color: #2563eb;
    display: none;
    align-items: center;
    flex-shrink: 0;
}

/* ── Body (scrollable content) ── */
.doc-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Nachlauf-Polster (Bugfix 2026-09-08): die Scroll-Navigation zieht ihre
       aktive Zone mit `rootMargin: 0 0 -50% 0` auf die OBERE HÄLFTE des
       Rollbehälters zusammen (ScrollNavigator.tsx). Ohne Polster endet das
       Scrollen, bevor ein Verweis im letzten halben Behälter die Zone
       erreichen kann — der letzte Verweis eines Dokuments feuerte nie.
       55vh liegt sicher über 50% der Behälterhöhe (die ist immer kleiner als
       das Fenster), damit JEDER Verweis nach oben durchgescrollt werden kann. */
    padding: 1.2em 1.2em 55vh;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    font-size: 1.25em;
}
.doc-panel-body::-webkit-scrollbar {
    width: 0.3846em;
}
.doc-panel-body::-webkit-scrollbar-track {
    background: transparent;
}
.doc-panel-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0.2308em;
}

/* ── Editor typography (inside body) ── */
.doc-panel-body .tiptap {
    outline: none;
}
.doc-panel-body .tiptap h1 {
    font-size: 1.6923em;
    font-weight: 800;
    margin: 1.5385em 0 0.7692em;
    color: #1a1a1a;
}
.doc-panel-body .tiptap h2 {
    font-size: 1.3077em;
    font-weight: 700;
    margin: 1.2308em 0 0.6154em;
    color: #1a1a1a;
}
.doc-panel-body .tiptap h3 {
    font-size: 1.0769em;
    font-weight: 600;
    margin: 0.9231em 0 0.4615em;
    color: #333;
}
.doc-panel-body .tiptap p {
    margin: 0 0 0.7692em;
    font-size: 1.0385em;
    line-height: 1.7;
    color: #1a1a1a;
}
.doc-panel-body .tiptap ul,
.doc-panel-body .tiptap ol {
    padding-left: 1.5385em;
    margin: 0 0 0.7692em;
}
.doc-panel-body .tiptap li {
    margin-bottom: 0.3077em;
    line-height: 1.6;
}
.doc-panel-body .tiptap blockquote {
    border-left: 0.2308em solid #ddd;
    margin: 0.7692em 0;
    padding: 0.4615em 1.0769em;
    color: #555;
    font-style: italic;
}
.doc-panel-body .tiptap pre {
    background: #f5f5f5;
    border: 0.0769em solid #e0e0e0;
    border-radius: 0.3846em;
    padding: 0.7692em 0.9231em;
    font-family: var(--font-mono);
    font-size: 0.9231em;
    overflow-x: auto;
    margin: 0.7692em 0;
}
.doc-panel-body .tiptap code {
    background: #f0f0f0;
    border-radius: 0.2308em;
    padding: 0.1154em 0.3077em;
    font-family: var(--font-mono);
    font-size: 0.9231em;
}
/* ── Links ── */
.doc-panel-body .tiptap a {
    color: inherit !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    cursor: pointer;
}
/* Anchor links: kleiner Pfeil ↘ */
.doc-panel-body .tiptap a[href^="#"]::after {
    content: " ↘";
    font-size: 0.75em;
    opacity: 0.65;
    display: inline-block;
    text-decoration: none;
}

.doc-panel-body .tiptap img {
    max-width: 100%;
    height: auto;
    border-radius: 0.3077em;
    margin: 0.7692em 0;
}
.doc-panel-body .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #bbb;
    position: absolute;
    pointer-events: none;
    font-style: italic;
}

/* ── Annotation links inside editor ── */
.doc-panel-body [data-type="annotation-link"] {
    background: rgba(74, 143, 232, 0.1);
    border: 0.0769em solid rgba(74, 143, 232, 0.25);
    border-radius: 0.2308em;
    padding: 0.0769em 0.3846em;
    color: #2563eb;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}
.doc-panel-body [data-type="annotation-link"]:hover {
    background: rgba(74, 143, 232, 0.18);
    border-color: rgba(74, 143, 232, 0.4);
}
.doc-panel-body [data-type="annotation-link"].is-active,
.doc-panel-body [data-type="view-snapshot"].is-active {
    outline: 0.1538em solid #3b82f6;
    outline-offset: 0.1538em;
    background: rgba(74, 143, 232, 0.14);
    border-color: rgba(74, 143, 232, 0.5);
    box-shadow: 0 0 0.6154em rgba(59, 130, 246, 0.2);
}


/* ── Action buttons (din-rp style) ── */
.doc-panel-actions {
    display: flex;
    gap: 0.4615em;
    padding: 0.7692em 1.5385em;
    border-top: 0.0769em solid #e0e0e0;
    flex-shrink: 0;
    background: #f0f0f0;
}
.doc-panel-btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4615em;
    height: 2.7692em;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 0.4615em;
    font-family: var(--font-sans);
    font-size: 0.8462em;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}
.doc-panel-btn-primary:hover {
    background: #111;
}
.doc-panel-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4615em;
    height: 2.7692em;
    padding: 0.5077em 0.6154em 0.3077em 0.6154em !important;
    background: #f0f0f0;
    color: #444;
    border: 0.0769em solid #d0d0d0;
    border-radius: 0.4615em;
    font-family: var(--font-sans);
    font-size: 0.85em !important;
    font-weight: 600;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition);
    white-space: nowrap;
}
.doc-panel-btn-secondary:hover {
    background: #e4e4e4;
    border-color: #bbb;
}

/* ── Scroll-Nav toggle (in header) ── */
.doc-panel-toggle-btn {
    height: 2.462em;                            /* 32 ÷ 13 — matches sidebar__item */
    padding: 0 0.923em;                         /* 0 12 ÷ 13 */
    border-radius: 0.462em;                     /* 6 ÷ 13 */
    border: none;
    background: transparent;
    color: #999;
    font-size: 1em;                             /* inherits 13px */
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.615em;                               /* 8 ÷ 13 */
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-sans);
    font-weight: 400;
    white-space: nowrap;
    box-sizing: border-box;
}
.doc-panel-toggle-btn.is-active {
    background: #ebebeb;
    color: #444;
}
.doc-panel-toggle-btn:hover {
    background: #f5f5f5;
    color: #444;
}

/* ── Link-Input — dark, passend zum Toolbar-Pill ── */
.doc-panel-link-input {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    padding: 0.5em 0.1em 0.1em;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 0.1em;
    width: 100%;
}

.doc-panel-link-input__field {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75em 0.65em;
    border-radius: 0.35em;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75em;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-panel-link-input__field::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.doc-panel-link-input__field:focus {
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.doc-panel-link-input__actions {
    display: flex;
    gap: 0.3em;
}

.doc-panel-link-input__btn {
    padding: 0.65em 0.7em 0.45em;
    border-radius: 0.4em;
    font-size: 0.8;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    border: none;
    transition: background 0.12s ease, opacity 0.12s ease;
    white-space: nowrap;
    background: transparent;
}

/* Setzen */
.doc-panel-link-input__btn--confirm {
    background: none;
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
}
.doc-panel-link-input__btn--confirm:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Entfernen */
.doc-panel-link-input__btn--remove {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}
.doc-panel-link-input__btn--remove:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* ✕ Schließen */
.doc-panel-link-input__btn--cancel {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.25);
    margin-left: auto;
}
.doc-panel-link-input__btn--cancel:hover {
    color: rgba(255, 255, 255, 0.55);
}

/* ── Anchor heading list inside link input ─────────────────────────────── */
.doc-panel-link-anchors {
    display: flex;
    flex-direction: column;
    max-height: 11em;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 0.15em;
    padding-top: 0.1em;
}
.doc-panel-link-anchors__item {
    display: flex;
    align-items: center;
    gap: 0.55em;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82em;
    font-weight: 400;
    font-family: var(--font-sans);
    padding: 0.8em 0.75em;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s ease;
}
.doc-panel-link-anchors__item:last-child {
    border-bottom: none;
}
.doc-panel-link-anchors__item:hover {
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.95);
}
.doc-panel-link-anchors__level {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    width: 1.6em;
}

/* ── Annotation Picker — dark dropdown, Screenshot-Stil ──────────────────── */
.doc-panel-annotation-picker {
    position: absolute;
    bottom: unset;   /* öffnet nach oben, über der Toolbar */
    left: 0;
    z-index: 10700;
    width: 16em;
    background: #242428;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.65em;
    box-shadow:
        0 1em 2.5em rgba(0, 0, 0, 0.5),
        0 0.25em 0.5em rgba(0, 0, 0, 0.3);
    font-family: var(--font-sans);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    top: calc(100% + 0.5em);
}

/* Suche */
.doc-panel-annotation-picker__search {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 0.75em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}
.doc-panel-annotation-picker__search-icon {
    width: 0.85em;
    height: 0.85em;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.doc-panel-annotation-picker__search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85em;
    font-family: var(--font-sans);
}
.doc-panel-annotation-picker__search-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Item-Liste */
.doc-panel-annotation-picker__list {
    overflow-y: auto;
    max-height: 13em;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.doc-panel-annotation-picker__empty {
    padding: 0.75em;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.doc-panel-annotation-picker__item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 0.75em;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.1s ease;
}
.doc-panel-annotation-picker__item:last-child {
    border-bottom: none;
}
.doc-panel-annotation-picker__item:hover {
    background: rgba(255, 255, 255, 0.075);
}

/* Kleiner Farbpunkt links */
.doc-panel-annotation-picker__item-dot {
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: rgb(244, 230, 132, 0.7);
    flex-shrink: 0;
}

.doc-panel-annotation-picker__item-body {
    flex: 1;
    min-width: 0;
}
.doc-panel-annotation-picker__item-title {
    font-size: 0.85em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-panel-annotation-picker__item-sub {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.1em;
}

/* Footer */
.doc-panel-annotation-picker__footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.75em 0.75em 0.65em;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}
.doc-panel-annotation-picker__footer-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
    transition: color 0.12s ease, background 0.12s ease;
}
.doc-panel-annotation-picker__footer-btn:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(139, 92, 246, 0.12);
}

/* ── Document list (sidebar integration) ── */
/* ── Dokumente-Liste — alle em-Werte (doc-panel hat font-size: 0.8125em = 13px) ── */
.doc-panel-list-header {
    display: flex;
    align-items: center;
    gap: 0.6154em;        /* 8px/13px */
    padding: 0.7692em 1.0769em; /* 10px/13px, 14px/13px */
    border-bottom: 1px solid #eaeaea;
    flex-shrink: 0;
}
.doc-panel-list-count {
    font-size: 0.8462em;  /* 11px/13px */
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    flex: 1;
}
.doc-panel-list-new-btn {
    padding: 0.3636em 1.0909em; /* 4px/11px, 12px/11px */
    border-radius: 0.3636em;    /* 4px/11px */
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    font-size: 0.8462em;        /* 11px/13px */
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.doc-panel-list-new-btn:hover {
    background: rgba(59, 130, 246, 0.14);
}

.doc-panel-list-item {
    display: flex;
    gap: 0.7692em;        /* 10px/13px */
    padding: 0.6923em 1.0769em; /* 9px/13px, 14px/13px */
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
    transition: background 0.15s ease;
}
.doc-panel-list-item:hover {
    background: rgba(0, 0, 0, 0.025);
}
.doc-panel-list-item:hover .doc-panel-list-delete {
    opacity: 1;
}

.doc-panel-list-icon {
    color: #9ca3af;
    flex-shrink: 0;
    margin-top: 0.1538em; /* 2px/13px */
}
.doc-panel-list-icon svg {
    width: 1.0769em;  /* 14px/13px */
    height: 1.0769em;
}

.doc-panel-list-item-body {
    flex: 1;
    min-width: 0;
}
.doc-panel-list-item-title {
    font-size: 0.9231em;  /* 12px/13px */
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.1667em; /* 2px/12px */
}
.doc-panel-list-item-meta {
    display: flex;
    align-items: center;
    gap: 0.4615em; /* 6px/13px */
    margin-top: 0;
}
.doc-panel-list-item-date {
    font-size: 0.8462em; /* 11px/13px */
    color: #9ca3af;
}
.doc-panel-list-badge {
    font-size: 0.6923em;        /* 9px/13px */
    padding: 0.1111em 0.5556em; /* 1px/9px, 5px/9px */
    border-radius: 0.3333em;    /* 3px/9px */
    background: rgba(59, 130, 246, 0.07);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.18);
}
.doc-panel-list-delete {
    padding: 0.1818em 0.5455em; /* 2px/11px, 6px/11px */
    border-radius: 0.3636em;    /* 4px/11px */
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 0.8462em;        /* 11px/13px */
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.doc-panel-list-delete:hover {
    color: #dc2626;
}

.doc-panel-list-empty {
    padding: 1.8462em 1.0769em; /* 24px/13px, 14px/13px */
    text-align: center;
    color: #6b7280;
    font-size: 0.9231em; /* 12px/13px */
}

/* ── New doc form (inline) ── */
.doc-panel-new-form {
    padding: 0.6154em 0.7692em; /* 8px/13px, 10px/13px */
    border-bottom: 1px solid #eaeaea;
    display: flex;
    gap: 0.4615em; /* 6px/13px */
    flex-shrink: 0;
}
.doc-panel-new-form input {
    flex: 1;
    padding: 0.4167em 0.6667em; /* 5px/12px, 8px/12px */
    border-radius: 0.3333em;    /* 4px/12px */
    border: 1px solid #d1d5db;
    background: #f5f5f7;
    color: #111827;
    font-size: 0.9231em; /* 12px/13px */
    outline: none;
    font-family: inherit;
}
.doc-panel-new-form input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.1667em rgba(59, 130, 246, 0.12); /* 2px/12px */
}

/* ══════════════════════════════════════════════════════════════
   ANNOTATION LINK CHIP  (TipTap NodeView — doc-panel)
   Dynamische Farben (background, border, color) bleiben inline,
   da sie zur Laufzeit vom Annotationstyp bestimmt werden.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   EMBED DROP CURSOR — visible line when dragging embeds
   ═══════════════════════════════════════════════════════════════ */

/* Custom Embed Drop Indicator — eigenes Drag-System (EmbedDragPlugin) */
.embed-drop-indicator {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: hsl(221 83% 53%);
    border-radius: 1px;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 4px hsl(221 83% 53% / 0.4);
}
.embed-drop-indicator::before,
.embed-drop-indicator::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(221 83% 53%);
}
.embed-drop-indicator::before { left: -4px; }
.embed-drop-indicator::after  { right: -4px; }

/* ProseMirror dropcursor: override default to full-width blue line */
.ProseMirror .embed-dropcursor,
.ProseMirror .ProseMirror-dropcursor {
    background: hsl(221 83% 53%) !important;
    height: 2px !important;
    border-radius: 1px;
    margin: 2px 0;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SLASH COMMAND POPUP
   ═══════════════════════════════════════════════════════════════ */

.slash-cmd-popup {
    position: absolute;
    left: 0;
    top: 0.25em;
    z-index: 200;
    min-width: 220px;
    max-width: 300px;
    background: hsl(220 13% 18%);
    border: 1px solid hsl(220 13% 28%);
    border-radius: 0.5em;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 0.25em;
    font-family: var(--font-sans, system-ui);
    font-size: 0.85em;
}

.slash-cmd-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 0.6em;
    border-radius: 0.35em;
    cursor: pointer;
    transition: background 0.1s;
    color: hsl(220 13% 80%);
}

.slash-cmd-item:hover,
.slash-cmd-item--active {
    background: hsl(221 83% 53% / 0.18);
    color: hsl(220 13% 95%);
}

.slash-cmd-icon {
    font-size: 1.1em;
    flex-shrink: 0;
    width: 1.5em;
    text-align: center;
}

.slash-cmd-text {
    display: flex;
    flex-direction: column;
    gap: 0.05em;
    min-width: 0;
}

.slash-cmd-label {
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
}

.slash-cmd-desc {
    font-size: 0.78em;
    color: hsl(220 13% 55%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   LESE-MODUS: ViewSnapshot-Nodes im Report ausblenden
   Die Elemente behalten 1px Höhe damit IntersectionObserver
   weiterhin feuert und die Kameranavigation funktioniert.
   ═══════════════════════════════════════════════════════════════ */

[data-component="DocumentEditor"]:not([data-mode="edit"]) .node-viewSnapshot {
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   SNAPSHOT TRAIL — Rechter Bildschirmrand
   Fixed overlay, wirkt wie eine visuelle Scrollbar.
   Thumbnails als Wegmarken, Scroll-Indikator bewegt sich
   kontinuierlich mit der Report-Scroll-Position.
   ═══════════════════════════════════════════════════════════════ */

.snapshot-trail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10300;
    pointer-events: none;
}

/* ── Scroll-Indikator (bewegt sich mit Scroll) ─────────────── */

.snapshot-trail__indicator {
    position: absolute;
    right: 0.5em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #6366f1;
    transform: translateY(calc(-50% - 0.7em));
    box-shadow: 0 0 0.4em rgba(99, 102, 241, 0.5);
    z-index: 2;
    pointer-events: none;
    will-change: top;
}

/* ── Stop: ein Snapshot-Marker ─────────────────────────────── */

.snapshot-trail__stop {
    position: absolute;
    right: 1.25em;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
}

/* ── Thumbnail-Karte ────────────────────────────────────────── */

.snapshot-trail__card {
    display: flex;
    align-items: center;
    gap: 0.5em;
    opacity: 0.4;
    transition: opacity 0.25s ease;
    flex-direction: column;
    width: 4.5em;
}

.snapshot-trail__stop:hover .snapshot-trail__card {
    opacity: 0.85;
}

.snapshot-trail__stop.is-active .snapshot-trail__card {
    opacity: 1;
}

.snapshot-trail__thumb {
    width: 3.5em;
    height: 2.25em;
    object-fit: cover;
    border-radius: var(--radius, 0.375em);
    border: 1px solid #ddd;
    background: #f0f0f0;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.snapshot-trail__thumb--empty {
    background: #e8e8e8;
}

.snapshot-trail__stop:hover .snapshot-trail__thumb {
    border-color: #999;
}

.snapshot-trail__stop.is-active .snapshot-trail__thumb {
    border-color: #6366f1;
    box-shadow: 0 0 0 1.5px rgba(99, 102, 241, 0.3);
}

.snapshot-trail__label {
    font-family: var(--font-sans);
    font-size: 0.6875em;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    max-width: 6em;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: color 0.2s ease;
}

.snapshot-trail__stop:hover .snapshot-trail__label {
    color: #444;
}

.snapshot-trail__stop.is-active .snapshot-trail__label {
    color: #111;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   EMBED INLINE — Lese-Modus: kompakte Inline-Referenzen
   Minimale Darstellung die im Lesefluss aufgeht.
   ═══════════════════════════════════════════════════════════════ */

.embed-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.1em 0.45em 0.15em;
    border-radius: 0.25em;
    border-bottom: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-size: 0.92em;
    font-weight: 500;
    font-family: var(--font-sans, system-ui);
    line-height: 1.5;
    vertical-align: baseline;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
}

.embed-inline:hover {
    text-decoration: none;
}

.embed-inline__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28em;
}

.embed-inline__badge {
    font-size: 0.72em;
    font-weight: 600;
    padding: 0.1em 0.4em;
    border-radius: 0.25em;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.embed-inline__dim {
    font-size: 0.78em;
    opacity: 0.55;
    font-weight: 400;
    flex-shrink: 0;
}

.embed-inline__thumb {
    width: 1.3em;
    height: 1.6em;
    object-fit: cover;
    border-radius: 0.15em;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.12);
}

/* Paperless-Dokument: Lese-Modus Card (Cover + Titel + Autor + Tags) */
.embed-doc-read {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0.6em 0;
    border-radius: 0.5em;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    font-family: var(--font-sans, system-ui);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.embed-doc-read:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.embed-doc-read__cover {
    flex-shrink: 0;
    width: 64px;
    background: hsl(220 14% 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.embed-doc-read__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.embed-doc-read__cover--fallback {
    color: hsl(220 14% 70%);
}

.embed-doc-read__body {
    flex: 1;
    min-width: 0;
    padding: 0.55em 0.75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15em;
}

.embed-doc-read__title {
    font-weight: 600;
    font-size: 0.88em;
    color: hsl(220 14% 20%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.embed-doc-read__author {
    font-size: 0.78em;
    color: hsl(220 10% 48%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.embed-doc-read__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin-top: 0.15em;
}

.embed-doc-read__tag {
    font-size: 0.68em;
    font-weight: 500;
    padding: 0.1em 0.45em 0.15em;
    border-radius: 0.75em;
    background: hsl(220 14% 88%);
    color: hsl(220 14% 40%);
    white-space: nowrap;
}

/* Annotation-Chip im Lese-Modus: noch schlanker als Edit */
.ann-embed-chip--read {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.05em 0.35em 0.1em;
    border-radius: 0.2em;
    border: none;
    border-bottom: 1.5px solid transparent;
    cursor: pointer;
    font-size: 0.92em;
    font-weight: 500;
    transition: background 0.12s;
    vertical-align: baseline;
    white-space: nowrap;
}

.ann-embed-chip--read .ann-embed-chip__dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   EMBED CARDS — shared styles for all embed node types
   (AnnotationLink, AuditLink, PaperlessDocLink, ViewSnapshot)
   ═══════════════════════════════════════════════════════════════ */

.embed-card {
    display: flex;
    align-items: stretch;
    margin: 0.5em 0;
    border-radius: 0.375em;
    border: 1px solid;
    transition: all 0.15s ease;
    font-family: var(--font-sans, system-ui);
    overflow: hidden;
    /* borderLeft, background, borderColor: set inline per type */
}

/* Drag grip — left edge */
.embed-card__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.15s ease;
    opacity: 0;
}
.embed-card:hover .embed-card__grip {
    opacity: 1;
}
.embed-card__grip:active {
    cursor: grabbing;
}

/* Prevent ProseMirror text-selection on the whole card */
.embed-card {
    user-select: none;
    -webkit-user-select: none;
}

/* Main content area */
.embed-card__body {
    flex: 1;
    min-width: 0;
    padding: 0.5em 0.6em;
    cursor: pointer;
}

/* Header row: icon + title + badges */
.embed-card__header {
    display: flex;
    align-items: center;
    gap: 0.4em;
    line-height: 1.4;
}

.embed-card__dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    flex-shrink: 0;
}

.embed-card__title {
    font-size: 0.8125em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.embed-card__badge {
    font-size: 0.625em;
    font-weight: 600;
    padding: 0.15em 0.55em;
    border-radius: 0.3em;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

/* Meta row: detail fields */
.embed-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 0.75em;
    margin-top: 0.3em;
    line-height: 1.5;
}

.embed-card__meta-item {
    font-size: 0.6875em;
    color: hsl(0 0% 40%);
}

.embed-card__meta-label {
    font-weight: 600;
    color: hsl(0 0% 55%);
    margin-right: 0.25em;
    font-size: 0.92em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.embed-card__meta-dim {
    color: hsl(0 0% 60%);
}

.embed-card__meta-tags {
    display: inline-flex;
    gap: 0.3em;
    align-items: center;
}

.embed-card__tag {
    font-size: 0.9em;
    padding: 0 0.4em;
    border-radius: 0.25em;
    background: hsl(0 0% 0% / 0.06);
    color: hsl(0 0% 45%);
    white-space: nowrap;
}

/* Actions column — right edge */
.embed-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;
    flex-shrink: 0;
    gap: 0.25em;
}

/* Thumbnail area — left of body, after grip */
.embed-card__thumb {
    width: 64px;
    min-height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-right: 1px solid hsl(0 0% 0% / 0.06);
    cursor: pointer;
    background: hsl(0 0% 0% / 0.03);
}
.embed-card__thumb img {
    display: block;
}

/* Inline edit input */
.embed-card__edit-input {
    font-size: 0.8125em;
    font-weight: 600;
    border: 1px solid hsl(221 83% 53% / 0.4);
    border-radius: 0.25em;
    padding: 0.1em 0.35em;
    outline: none;
    background: white;
    color: inherit;
    flex: 1;
    min-width: 0;
    font-family: inherit;
}
.embed-card__edit-input:focus {
    border-color: hsl(221 83% 53%);
    box-shadow: 0 0 0 2px hsl(221 83% 53% / 0.15);
}

.embed-card__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 0.25em;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    background: transparent;
    color: hsl(0 0% 45%);
}
.embed-card__action-btn:hover {
    background: hsl(0 0% 0% / 0.06);
}
.embed-card__action-btn--danger:hover {
    background: hsl(0 80% 95%);
    color: hsl(0 70% 45%);
}

/* Edit-Button direkt im Header (neben Titel) */
.embed-card__action-btn--inline {
    width: 1.4em;
    height: 1.4em;
    border-radius: 0.2em;
    color: hsl(0 0% 60%);
    flex-shrink: 0;
}

/* ── Doc-Panel: Geist Light embed-card ─────────────────────── */

/* Card base */
.doc-panel-body .tiptap .embed-card {
    flex-wrap: wrap;
    border-radius: 0.5em;
    transition: background 0.12s, border-color 0.12s;
}

/* Title */
.doc-panel-body .tiptap .embed-card__title {
    font-size: 0.875em;
    font-weight: 600;
    color: #111;
    padding-top: 0.15em;
}

/* Badge — Geist pill */
.doc-panel-body .tiptap .embed-card__badge {
    font-size: 0.65em;
    font-weight: 500;
    padding: 0.2em 0.55em;
    border-radius: 0.35em;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #eaeaea;
}

/* Meta */
.doc-panel-body .tiptap .embed-card__meta-item {
    font-size: 0.72em;
    color: #666;
}
.doc-panel-body .tiptap .embed-card__meta-label {
    color: #999;
    font-size: 0.9em;
}
.doc-panel-body .tiptap .embed-card__meta-dim {
    color: #aaa;
}

/* Thumbnail border */
.doc-panel-body .tiptap .embed-card__thumb {
    border-right: 1px solid #eaeaea;
    background: #f9f9f9;
}

/* Actions row — flush bottom, proper padding */
.doc-panel-body .tiptap .embed-card__actions {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35em;
    padding: 0.4em 0.6em;
    border-top: 1px solid #eaeaea;
    background: #fafafa;
    box-sizing: border-box;
}
.doc-panel-body .tiptap .embed-card__action-btn {
    width: 1.6em;
    height: 1.6em;
    border-radius: 0.3em;
    color: #999;
}
.doc-panel-body .tiptap .embed-card__action-btn:hover {
    background: #f0f0f0;
    color: #333;
}
.doc-panel-body .tiptap .embed-card__action-btn--danger:hover {
    background: #fff0f0;
    color: #c00;
}
.doc-panel-body .tiptap .embed-card__checkbox-label {
    gap: 0.35em;
    margin-right: auto;
}
.doc-panel-body .tiptap .embed-card__checkbox-label input[type="checkbox"] {
    width: 0.85em;
    height: 0.85em;
}

.embed-card__checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.embed-card__checkbox-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #6366f1;
}
.embed-card__checkbox-text {
    font-size: 0.8em;
    font-weight: 500;
    color: #777;
    padding-top: 0.1em;
}
.embed-card__checkbox-label.is-active .embed-card__checkbox-text {
    color: hsl(0 0% 35%);
}

/* ── Tooltip-Wrapper um das Checkbox-Label ── */
.embed-card__tooltip-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: auto;
}
.embed-card__tooltip {
    position: absolute;
    bottom: calc(100% + 0.5em);
    left: 0;
    z-index: 10900;
    background: #1a1a1a;
    color: #f5f5f5;
    font-size: 0.72em;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.4;
    padding: 0.45em 0.7em;
    border-radius: 0.4em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.embed-card__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 1em;
    border: 0.3em solid transparent;
    border-top-color: #1a1a1a;
}
.embed-card__tooltip-wrap:hover .embed-card__tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   ANNOTATION EMBED CHIP — enhanced inline with drag grip
   ═══════════════════════════════════════════════════════════════ */

.ann-link-wrapper {
    display: inline;
}

.ann-embed-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.15em 0.6em 0.2em 0.2em;
    border-radius: 0.35em;
    font-size: 0.8em;
    font-weight: 600;
    cursor: default;
    user-select: none;
    vertical-align: middle;
    transition: all 0.15s ease;
    font-family: var(--font-sans, system-ui);
    line-height: 1.6;
    white-space: nowrap;
    position: relative;
}

.ann-embed-chip__grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9em;
    cursor: grab;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}
.ann-embed-chip__grip:active {
    cursor: grabbing;
}

.ann-embed-chip__main {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
}

.ann-embed-chip__dot {
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    flex-shrink: 0;
}

.ann-embed-chip__badge {
    font-size: 0.8em;
    padding: 0 0.45em;
    border-radius: 0.25em;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Vorlauftext — sichtbar nach dem Label */
.ann-embed-chip__vorlauf {
    display: inline;
    margin-left: 0.3em;
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22em;
}

/* Inline edit input for annotation chip */
.ann-embed-chip__edit-input {
    font-size: 0.9em;
    font-weight: 600;
    border: 1px solid hsl(221 83% 53% / 0.4);
    border-radius: 0.2em;
    padding: 0 0.25em;
    outline: none;
    background: white;
    color: inherit;
    width: 8em;
    font-family: inherit;
}

.ann-embed-chip__toggle--danger:hover {
    color: hsl(0 70% 45%) !important;
    background: hsl(0 80% 95%) !important;
}

.ann-embed-chip__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    border-radius: 0.25em;
    margin-left: 0.15em;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.ann-embed-chip__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    margin-left: 0.15em;
    opacity: 0.4;
    flex-shrink: 0;
}

.doc-panel-link-input__btn:hover {
    background: transparent;
}

/* ── Projekt-Wolken-Liste in der Info-Karte (cmd-palette) ────────────────── */
.cmd-proj-cloud-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 2px;
}
.cmd-proj-cloud-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875em;
    font-family: var(--font-sans);
    line-height: 1.5;
}
.cmd-proj-cloud-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cmd-proj-cloud-name {
    font-weight: 500;
    color: hsl(var(--foreground));
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmd-proj-cloud-pts {
    margin-left: auto;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    font-size: 0.9em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Info-Karten Layout (cmd-palette) ────────────────────────────────────── */
.cmd-info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    padding: 0.5em 0.5em 0.125em;
}
.cmd-cloud-info {
    padding: 0.625em;
    background: hsl(var(--card-elevated) / 0.6);
    border-radius: var(--radius);
    border: 0.0625em solid hsl(var(--border));
    min-width: 0;
    min-height: 5.75em;
    display: flex;
    flex-direction: column;
}
.cmd-cloud-info-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.1875em;
}
.cmd-cloud-info-name {
    font-size: 0.8125em;
    font-weight: 600;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
}
.cmd-cloud-info-pts {
    font-size: 0.6875em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    white-space: nowrap;
}
.cmd-cloud-info-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.6875em;
    font-family: var(--font-mono);
    color: hsl(var(--muted-fg));
    margin-bottom: 0.5em;
    line-height: 1.5;
}
.cmd-cloud-info-meta-crs {}
.cmd-cloud-info-meta-sp {
    margin-left: auto;
}
.cmd-cloud-info-actions {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-top: auto;
    padding-top: 0.5em;
}
.cmd-cloud-info-expand {
    display: flex;
    align-items: center;
    gap: 0.381em;
    font-size: 0.6562em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: hsl(var(--primary));
    letter-spacing: 0.01em;
}
.cmd-cloud-info-expand svg {
    width: 0.625em;
    height: 0.625em;
    color: hsl(var(--primary));
    transform: rotate(-90deg);
}
.cmd-cloud-action-link {
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--transition);
}
.cmd-cloud-action-link:hover {
    opacity: 1;
}

/* ── Pip-Matrix in der Cloud-Karte ───────────────────────────────────────── */
.cmd-cloud-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.5em;
}
.cmd-pip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 14px;
}
.cmd-pip-lbl {
    font-size: 0.625em;
    font-weight: 500;
    font-family: var(--font-sans);
    color: hsl(var(--muted-fg));
    width: 74px;
    flex-shrink: 0;
    white-space: nowrap;
}
.cmd-pip-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
}
.cmd-pip {
    width: 6px;
    height: 6px;
    border-radius: 1.5px;
    background: hsl(var(--border));
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.cmd-pip-on {
    background: hsl(var(--primary));
}
.cmd-pip-val {
    font-size: 0.6875em;
    font-weight: 600;
    font-family: var(--font-mono);
    color: hsl(var(--foreground));
    width: 14px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.cmd-separator {
    height: 0.0625em;
    background: hsl(var(--border));
    margin: 0.375em 0.25em;
}

/* ══════════════════════════════════════════════════════════════════════════
   BuildingDataPanel (DIN-Spec style)
   ══════════════════════════════════════════════════════════════════════════ */

.bdp {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

/* ── Header ── */
.bdp-header {
    padding: 0.625em 1em;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.bdp-header__count {
    font-size: 0.75em;
    color: #9ca3af;
}
.bdp-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    border-radius: 0.25em;
}
.bdp-header__toggle:hover {
    background: #f3f4f6;
    color: #374151;
}

/* ── Scrollable body ── */
.bdp-body {
    overflow-y: auto;
    flex: 1;
    padding: 0.75em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.85em;
}

/* ── Row (side-by-side fields) ── */
.bdp-row {
    display: flex;
    gap: 0.75em;
}
.bdp-row > .bdp-field {
    flex: 1;
    min-width: 0;
}

/* ── Field cell ── */
.bdp-field {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.bdp-field__label {
    font-size: 0.72em;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.01em;
}

/* ── Input / Select (edit mode) ── */
.bdp-field__input {
    width: 100%;
    font-size: 0.85em;
    font-weight: 500;
    padding: 0.55em 0.7em;
    border: none;
    border-radius: 0.5em;
    background: #f3f4f6;
    color: #1f2937;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: background 0.15s, box-shadow 0.15s;
}
.bdp-field__input:focus {
    background: #eaeaea;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.bdp-field__input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Select arrow adjustment */
.bdp-field__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6em center;
    padding-right: 2em;
}

/* ── Read-only value ── */
.bdp-field__value {
    font-size: 0.85em;
    font-weight: 500;
    padding: 0.55em 0.7em;
    border-radius: 0.5em;
    background: #f3f4f6;
    color: #1f2937;
    min-height: 1.2em;
}
.bdp-field__value--empty {
    color: #9ca3af;
    font-weight: 400;
}

/* ── Hint text ── */
.bdp-field__hint {
    font-size: 0.62em;
    color: #b0b5bf;
    line-height: 1.3;
    margin-top: 0.1em;
}



[data-component="ZoomTierIndicator"] {
    top: 0.75em;
}

.ghost-tag {
    border-radius: 0.35em;
    padding: 0.367em 0.667em 0.167em 0.667em;
    margin: 1em 0 0.5em;
}

.dok-card-summary,
.dok-card-ai-summary {
    font-size: 0.805em;
    line-height: 1.3;
}

.dok-sort-btn,
.dok-tag-chip {
    border-radius: 0.35em;
}

#doc-viewer-summary-text {
    font-size: 1.1em;
}

#doc-viewer-panel .dok-card-tag {
    margin-bottom: 0;
}

.doc-viewer-summary__notes-header {
    padding: 0.35em 0;
}



.doc-panel-toolbar-row:nth-child(2) {
    gap: .325em;
    padding-top: 0.25em;
    width: 100%;
    justify-content: space-between;
}

#brand-logo:hover {
    opacity: 1;
}

/* ── Audit 3D-Marker Labels ───────────────────────────────────────────── */
.audit-label {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    font-family: var(--font-sans, 'PP Mori', system-ui, sans-serif);
    font-size: 11px;
    line-height: 1.3;
    color: #111827;
    white-space: nowrap;
    transition: box-shadow 0.15s ease, background 0.15s ease;
    transform-origin: center bottom;
}

.audit-label:hover {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.audit-label-icon {
    display: flex;
    align-items: center;
    color: #6b7280;
    flex-shrink: 0;
}

.audit-label-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
}

.audit-label-title {
    font-weight: 600;
    font-size: 11px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.audit-label-detail {
    font-weight: 400;
    font-size: 9.5px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.audit-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 2px;
}

.audit-label-dot-yes {
    background: #10b981;
}

.audit-label-dot-no {
    background: #ef4444;
}

.audit-label-dot-maybe {
    background: #f59e0b;
}

/* ── Audit-Status-Badge (Viewer-Label + Liste) ────────────────────────── */
.audit-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.4;
}
.audit-label .audit-status-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 1px 5px;
    margin-left: 2px;
}
.audit-status-badge-entwurf      { color: #6b7280; background: #6b728018; border-color: #6b728040; }
.audit-status-badge-vollstaendig { color: #2563eb; background: #2563eb15; border-color: #2563eb40; }
.audit-status-badge-geprueft     { color: #10b981; background: #10b98115; border-color: #10b98140; }

/* ── Audit-Status-Steuerung im Formular ───────────────────────────────── */
.audit-status-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fafafa;
}
.audit-status-ctrl-label { font-size: 12px; color: #666; font-weight: 500; }
.audit-status-ctrl-spacer { flex: 1 1 auto; }
.audit-status-ctrl .audit-status-badge { font-size: 11px; font-weight: 500; padding: 2px 8px; }
.audit-btn-status { font-size: 11px; padding: 4px 9px; }
.audit-btn-save-next { background: #2563eb; border-color: #2563eb; }
.audit-btn-save-next:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ── Audit-Übersicht: Feedback bei leerem (gefiltertem) Satz ──────────── */
.audit-ao-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 120;
}
.audit-ao-empty__box {
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    /* Typo-Fix 2026-07-25: ohne font-family erbte die Box die Serifenschrift
       der Render-Area — jetzt App-Sans wie alle Overlays. */
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ── Audit-Übersicht: Hover-Detailpanel (Kerninfos) ───────────────────── */
.audit-ao-card {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 120;
    min-width: 150px;
    max-width: 240px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    font-family: var(--font-sans, 'PP Mori', system-ui, sans-serif);
    color: #111827;
}
.audit-ao-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.audit-ao-card__title {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.25;
    color: #111827;
    flex: 1 1 auto;
    min-width: 0;
}
.audit-ao-card__badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    color: #fff;
}
.audit-ao-card__badge--yes   { background: #16a34a; }
.audit-ao-card__badge--no    { background: #dc2626; }
.audit-ao-card__badge--maybe { background: #f59e0b; }
/* Beschreibung (Feld `begruendung`) — ohne Label direkt unter dem Titel,
   max. 3 Zeilen, dann Ellipse (Felix 2026-07-26). */
.audit-ao-card__desc {
    font-size: 11.5px;
    line-height: 1.45;
    color: #374151;
    margin: 3px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* Bauteil-Ebene, Regel D (#18, 2026-09-16): markierte Karte bekommt eine Fußzeile
   mit „Öffnen"; nur dann ist die Karte anklickbar (pointer-events setzt script.js). */
.audit-ao-card__foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}
.audit-ao-card__open {
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
    border: 1px solid #111827; background: #111827; color: #fff; cursor: pointer;
}
.audit-ao-card__open:hover { background: #1f2937; }
.audit-ao-card__hint { font-size: 11px; color: #6b7280; white-space: nowrap; }

.audit-ao-card__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    line-height: 1.5;
}
.audit-ao-card__k { color: #9ca3af; flex-shrink: 0; }
.audit-ao-card__v {
    color: #374151;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pointer-Dreieck unterhalb des Labels */
.audit-label::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.88);
}

.audit-btn-link-doc {
    font-size: 0.9875em;
    padding: 0.75em 0.75em 0.65em 0.75em;
    border: 1.5px dashed #535353;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.audit-doc-picker-item {
    font-size: 1.2em;
}

.audit-doc-thumb-sm {
    width: 3.25em;
    height: 3.25em;
}

.audit-doc-picker-date {
    font-size: 0.7875em;
}

/* ── Audit Fotos ──────────────────────────────────────────────────────── */
.audit-foto-section {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin-top: 0.25em;
}
.audit-foto-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}
.audit-foto-list:empty {
    display: none;
}
.audit-foto-item {
    position: relative;
    width: 4em;
    height: 4em;
}
.audit-foto-thumb {
    width: 4em;
    height: 4em;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    display: block;
}
.audit-foto-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.audit-foto-remove:hover {
    background: #b91c1c;
}
.audit-foto-list--view .audit-foto-thumb {
    width: 5em;
    height: 5em;
}
/* Upload-Kachel (Edit): gestricheltes Quadrat mit „+", gleiche Größe wie Thumbs */
.audit-foto-add {
    box-sizing: border-box;
    font: inherit;            /* sonst rechnet em auf der Button-Default-Schrift → falsche Größe */
    width: calc(4em + 2px);   /* exakt = Thumb-Außenmaß (4em + 1px Rand beidseitig) */
    height: calc(4em + 2px);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.audit-foto-add:hover {
    border-color: #6b7280;
    color: #374151;
    background: rgba(0, 0, 0, 0.03);
}

/* ── Dokumente (Edit): Karten in Deckblatt-Ratio + „+"-Kachel (wie Fotos) ── */
.audit-doc-section { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: flex-start; }
.audit-doc-section .audit-linked-docs { display: contents; }
.audit-doc-section .audit-doc-picker { flex: 1 0 100%; margin-top: 0.3em; }
.audit-doc-card--edit { position: relative; width: calc(4em + 2px); flex: 0 0 auto; }
.audit-doc-card--edit .audit-doc-thumb {
    width: calc(4em + 2px);
    height: calc(4em * 1.414 + 2px);   /* Deckblatt-Ratio (1 : √2) */
    object-fit: cover;
    object-position: top;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f3f4f6;
    display: block;
    box-sizing: border-box;
}
.audit-doc-card--edit .audit-doc-info,
.audit-doc-card--edit .audit-doc-open { display: none; }
.audit-doc-add {
    box-sizing: border-box;
    font: inherit;
    width: calc(4em + 2px);
    height: calc(4em * 1.414 + 2px);   /* exakt wie die Doc-Karte */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.audit-doc-add:hover { border-color: #6b7280; color: #374151; background: rgba(0, 0, 0, 0.03); }

/* ── Dokument-Picker als modales Popover (Whiteboard-Stil) ── */
.audit-doc-picker {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.35);
    padding: 16px;
}
.audit-doc-picker__dialog {
    width: 500px;
    max-width: 100%;
    max-height: 70vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans);
}
.audit-doc-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.audit-doc-picker__head h3 { margin: 0; font-size: 14px; font-weight: 500; color: #111827; }
.audit-doc-picker__close { border: none; background: transparent; color: #9ca3af; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.audit-doc-picker__close:hover { color: #111827; }
.audit-doc-picker__head-actions { display: flex; align-items: center; gap: 8px; }
.audit-doc-picker__upload {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12.5px; font-weight: 500;
    color: #fff; background: #161b26; border: none; border-radius: 6px;
    padding: 6px 10px; cursor: pointer; transition: background 0.15s ease;
}
.audit-doc-picker__upload:hover { background: #272e3d; }
.audit-doc-picker__upload:disabled { opacity: 0.6; cursor: default; }
.audit-doc-picker__upload svg { flex: 0 0 auto; }
.audit-doc-picker-search { padding: 12px 14px 8px; }
.audit-doc-picker-search .audit-inp { width: 100%; box-sizing: border-box; font-size: 13px; }
.audit-doc-picker-list { padding: 4px 8px 10px; overflow-y: auto; }
.audit-doc-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #111827;
}
.audit-doc-picker-item:hover { background: #f9fafb; }
.audit-doc-picker-item.is-linked { background: #f0fdf4; }
.audit-doc-picker-item .audit-doc-thumb-sm {
    width: 34px;
    height: 48px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
    object-position: top;
    background: #f3f4f6;
    flex: 0 0 auto;
}
.audit-doc-picker-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.audit-doc-picker-title { font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-doc-picker-date { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.audit-doc-picker-linked-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    padding: 2px 8px;
}
.audit-doc-picker-empty { padding: 18px 14px; text-align: center; color: #9ca3af; font-size: 13px; }

.audit-lbl {
    margin-bottom: 0.25em;
}

.audit-inp {
    font-size: 1em;
    padding: 0.8em 0.625em 0.6em;
}

/* ── Audit Floating Dialog (View + Edit) ──────────────────────────────── */
.audit-dialog {
    position: fixed;
    top: 80px;
    right: 24px;
    width: 400px;
    max-height: 75vh;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    /* Frei schwebend (nicht gedockt) → über der rechten Seitenspalte
       (.modell-dock = --z-panel, seit 2026-09-07 im Panel-Band). */
    z-index: calc(var(--z-panel, 30000) + 5);
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans, 'PP Mori', system-ui, sans-serif);
    font-size: 13px;
    color: #111827;
    overflow: hidden;
}

.audit-dialog--embedded {
    position: static;
    width: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.audit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.audit-header:active {
    cursor: grabbing;
}

.audit-title {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Titel = Bezeichnung (2026-07-26): im freischwebenden Fallback-Panel ist der
   Titel ein Eingabefeld. Im Dock liefert das die React-Kopfzeile. */
.audit-title-inp {
    flex: 1;
    min-width: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 2px 5px;
    margin: -2px 0;
}
.audit-title-inp:hover { background: #f3f4f6; }
.audit-title-inp:focus {
    outline: none;
    background: #fff;
    border-color: #d1d5db;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.audit-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.audit-close:hover {
    color: #111827;
    background: #f3f4f6;
}

.audit-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.audit-view-body {
    padding: 8px 12px;
}

.audit-lbl {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
}

.audit-inp {
    font-size: 12px;
    font-family: inherit;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fafafa;
    color: #111827;
    outline: none;
    transition: border-color 0.15s;
}

.audit-inp:focus {
    border-color: #3b82f6;
    background: #fff;
}

.audit-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.audit-ta {
    resize: vertical;
    min-height: 40px;
}

.audit-num {
    font-variant-numeric: tabular-nums;
}

/* Bezeichnung/Titel als hervorgehobenes Eingabefeld — geteilt von Annotations-
   und Bauteil-Editor (Board-Dock). Spiegel zu src/style.css. */
.audit-title-field {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f4f4f7;
    color: #111827;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.audit-title-field::placeholder {
    color: #9ca3af;
    font-weight: 500;
}
.audit-title-field:focus {
    border-color: #3b82f6;
    background: #fff;
}
.audit-title-field[readonly] {
    border-color: transparent;
    background: transparent;
    padding-left: 0;
}

.audit-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
/* Menge + Einheit: die Einheit braucht nur Platz für „m²"/„Stk" (Felix 2026-07-30). */
.audit-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5em;
    gap: 6px;
    align-items: end;
}

/* Kompakter Vorlage-Picker oben rechts in der Status-Zeile (statt vollbreitem Dropdown) */
/* [stefan_10_06] gleicher Stil wie .audit-inp.audit-select (Rahmen, Radius, Chevron) */
.audit-template-select {
    flex: 0 0 auto;
    max-width: 150px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #111827;
    padding: 7px 32px 7px 11px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6.4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
}
.audit-template-select:hover { border-color: #c4c4c4; }

/* Progressive Disclosure: „Mehr Details" */
.audit-more {
    margin-top: 4px;
    border-top: 1px solid #eee;
    padding-top: 8px;
}
.audit-more-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    padding: 4px 2px;
    user-select: none;
}
.audit-more-summary::-webkit-details-marker { display: none; }
.audit-more-summary:hover { color: #111; }
.audit-more-chevron { transition: transform .15s ease; flex: 0 0 auto; color: #999; }
.audit-more[open] > .audit-more-summary .audit-more-chevron { transform: rotate(90deg); }
.audit-more-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
}

.audit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.audit-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.audit-btn:hover {
    background: #f9fafb;
}

.audit-btn-save {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.audit-btn-save:hover {
    background: #1f2937;
}

.audit-btn-cancel {
    background: transparent;
}

.audit-footer-spacer {
    flex: 1 1 auto;
}

/* ── Split-Speichern-Button (Bauteil + Annotation, gemeinsam) ───────── */
.audit-save-split {
    position: relative;
    display: inline-flex;
}
.audit-btn-save-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.audit-btn-save-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(255, 255, 255, 0.22);
}
.audit-btn-save-toggle svg {
    transition: transform 0.15s ease;
}
.audit-save-toggle--open svg {
    transform: rotate(180deg);
}
.audit-save-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 4px;
    z-index: 40;
}
.audit-save-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
}
.audit-save-menu-item:hover {
    background: #f3f4f6;
}
.audit-save-menu-item--danger {
    color: #dc2626;
}
.audit-save-menu-item--danger:hover {
    background: #fef2f2;
}

.audit-btn-clip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4b5563;
}

.audit-btn-clip svg {
    flex-shrink: 0;
}

/* ── View-Modus Zeilen (Stil wie Mess-Tab: Sektionen + Key/Value) ───────── */
/* Sektions-Sublabel (analog Mess-Tab-Sublabels) */
/* Sektions-Band — angeglichen an .ml-band (Mess-Liste) */
.audit-view-sec {
    display: flex;
    align-items: center;
    margin: 8px -12px 0;       /* randbündig über das Body-Padding (12px) */
    padding: 8px 12px;
    background: #f9fafb;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #9ca3af;
}
.audit-view-sec:first-child { margin-top: 0; }

.audit-view-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14.4px; /* wie .ml-name (Mess-Liste) */
}

.audit-view-row:last-child {
    border-bottom: none;
}
/* Letzte Zeile vor einem Sektions-Band ohne untere Linie (kein Doppelstrich) */
.audit-view-row:has(+ .audit-view-sec) {
    border-bottom: none;
}

.audit-view-row-dim {
    opacity: 0.5;
}

.audit-view-key {
    font-weight: 500;
    color: #6b7280;
    font-size: 11px;
    flex-shrink: 0;
}

.audit-view-val {
    color: #111827;
    word-break: break-word;
    width: 100%;
    text-align: left; /* Inhalte linksbündig unter dem Feldtitel */
}

.audit-view-val--mono {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
}

/* Status-Pille (z.B. Potentiale) */
.audit-view-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 999px;
}

/* Verknüpfte Dokumente in der Ansicht: gleiche Breite wie Foto-Thumbnails,
   gleiche Rundung, aber Deckblatt-Ratio (A4 hoch ~ 1:1.414). */
.audit-view-row .audit-linked-docs { display: flex; flex-wrap: wrap; gap: 0.4em; }
.audit-doc-card--view {
    width: 5em;
    cursor: pointer;
}
.audit-doc-card--view .audit-doc-thumb {
    width: 5em;
    height: 7.07em;            /* Deckblatt-Ratio (1 : √2) */
    object-fit: cover;
    object-position: top;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f3f4f6;
    display: block;
}
.audit-doc-card--view .audit-doc-info,
.audit-doc-card--view .audit-doc-open { display: none; }

/* ── View-Aktionen ──────────────────────── */
.audit-view-action {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.audit-view-action:hover {
    color: #111827;
    background: #f3f4f6;
}

.audit-back-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.audit-back-btn:hover {
    color: #111827;
}

.audit-doc-picker-search .audit-inp {
    font-size: 0.95em;
}

/* ══════════════════════════════════════════════════════════════════════════
   Potree Splash — pulsierendes Logo-Overlay beim Laden
   ══════════════════════════════════════════════════════════════════════════ */

/* Voll deckendes Viewport-Overlay, identisch zum React-Ladeoverlay
   (.loading-screen), damit beim Übergang zwischen beiden kein Logo-Sprung
   und kein Flackern der Sidebar/Minimap entsteht. */
#potree-splash {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#potree-splash.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#potree-splash__logo {
    /* Größe + sanfter Puls exakt wie .loading-screen__logo */
    width: 138px;
    height: auto;
    animation: splash-pulse 2s ease-in-out infinite;
}

@keyframes splash-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

.doc-panel-toggle {
    display: none;
}

#status-bar > div {
    background: transparent;
    backdrop-filter: none;
}

#sb-pts,
#sb-fps {
    padding-right: 1em !important;
    border-right: 1px solid #ccc;
}


/* ============================================================
   Loading Screen
   ============================================================ */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-screen__logo {
    width: 138px;
    height: auto;
    animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ============================================================
   Project Selector — Ghost-Theme Typography (PP Mori)
   ============================================================ */

/* ── Navbar ─────��────────────��───��─��─────────────────────── */

/* ── Main ────────────────────────────────────────────────── */

/* ── Project Map ─────────────────────────────────────────── */

/* POI: dot + city label */

/* Tooltip */

/* Override Leaflet defaults inside our map */

/* ── Header ──────────────────────────────────────────────── */

/* ── Filter Bar ──────────────────────────────────────────── */

/* ── Error / Empty ───────────────────────────────────────── */

/* ── Status Badges (Grid) ────────────────────────────────── */

/* ── Status Dots (List) ──────────────────────────────────── */

/* ── Grid View ───────────────────────────────────────────── */

/* ── Risikobewertung ─────────────────────────────────────── */

/* ── List View ───────────────────────────────────────────── */

/* ── Profile Overlay ─────────────────────────────────────── */

/* ============================================================
   Login Page — Fullscreen Animation + Glass Pane (Light)
   ============================================================ */

.login-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
    font-family: var(--font-sans);
    background: #f8f8f8;
    overflow: hidden;
}

/* ── Fullscreen Background Animation ─────────────────────────── */

.login-page__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.login-page__bg canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ── Logo (top-left) ─────────────────────────────────────────── */

.login-page__logo-wrap {
    position: absolute;
    top: 2em;
    left: 2.5em;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1em;
}

.login-page__logo {
    height: 1.3em;
    display: block;
}

.login-page__version {
    font-size: 0.6em;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #aaa;
    text-transform: uppercase;
}

/* ── Claims (bottom-left) ────────────────────────────────────── */

.login-page__claim {
    position: absolute;
    bottom: 2.5em;
    left: 2.5em;
    max-width: calc(100% - 55em);
    z-index: 10;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.login-page__claim--visible {
    opacity: 1;
    transform: translateY(0);
}

.login-page__claim-text {
    margin: 0;
    font-size: 1.75vw;
    font-weight: 450;
    line-height: 1.25;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0;
}

.login-page__claim-source {
    display: inline-block;
    margin-top: 1em;
    font-size: 0.7em;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.25);
}

/* ── Glass Pane (bottom-right) ───────────────────────────────── */

.login-page__pane {
    position: absolute;
    bottom: 1.75em;
    right: 1.75em;
    z-index: 10;
    width: 30em;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.035);
    backdrop-filter: blur(0.2em);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: none;
    border-radius: 0.5em;
    box-shadow: none;
    overflow: hidden;
}

/* ── Form ────────────────────────────────────────────────────── */

.login-page__form {
    display: flex;
    flex-direction: column;
    padding: 1.15em 1.75em 1em;
}

.login-page__fields {
    display: flex;
    gap: 0.75em;
    margin-bottom: 0.5em;
}

.login-page__footer-link {
    color: #aaa;
    text-decoration: none;
    transition: color 0.15s ease;
}
.login-page__footer-link:hover {
    color: #555;
}

.login-page__input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.7em 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    background: none;
    color: #111;
    font-size: 0.88em;
    font-family: var(--font-sans);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.login-page__input::placeholder {
    color: rgba(0, 0, 0, 0.7);
}
.login-page__input:focus,
.login-page__input:active,
.login-page__input:hover {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background: none;
    box-shadow: none;
    outline: none;
}
.login-page__input:-webkit-autofill,
.login-page__input:-webkit-autofill:hover,
.login-page__input:-webkit-autofill:focus,
.login-page__input:-webkit-autofill:active {
    -webkit-text-fill-color: #111;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.login-page__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8em 1em;
    margin-top: 0.2em;
    border-radius: 0.5em;
    border: none;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.88em;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.login-page__submit:hover {
    background: #4242F5;
}
.login-page__submit:active {
    transform: scale(0.985);
}
.login-page__submit:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

.login-page__divider {
    display: none;
    align-items: center;
    gap: 0.8em;
    margin: 1.2em 0;
    color: #ccc;
    font-size: 0.78em;
}
.login-page__divider::before,
.login-page__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

.login-page__sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    width: 100%;
    padding: 0.75em 1em;
    border-radius: 0.5em;
    border: none;
    background: #ddd;
    color: #444;
    font-size: 0.82em;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.login-page__sso:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: #d1d1d1;
}

.login-page__error {
    padding: 0.6em 0.85em;
    margin-bottom: 1.1em;
    border-radius: 0.45em;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.15);
    color: #b91c1c;
    font-size: 0.8em;
    text-align: center;
}

/* ── Pane Footer ─────────────────────────────────────────────── */

.login-page__pane-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5em 2em;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.65em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #aaa;
}

.login-page__status {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.login-page__status-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #30cf79;
    flex-shrink: 0;
}

.login-page__footer-links {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.login-page__footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.15s ease;
}
.login-page__footer-links a:hover {
    color: #555;
}

/* ── Responsive ──────────────────────────────────────────────── */@media (max-width: 860px) {
    .login-page__logo-wrap {
        top: 1.5em;
        left: 1.5em;
    }
}

.login-page__sso,
.login-page__submit {
    margin-top: 1em;
    border-radius: 0.5em;
}

.login-page__footer-link,
.login-page__footer-links a {
    color: #999 !important;
}

/* Anker der Marke (Befund #13, 15.09.): Das „o" soll beim Wechsel
   Projektübersicht → Projekt NICHT springen. In der Übersicht sitzt es durch die
   Navigationsleiste (Höhe 54 px + 1 px Linie, Logo senkrecht zentriert) mit seiner
   Mitte auf y ≈ 28,8. Die eingeklappte Leiste kam auf 23,8 — die 5 px Zugabe oben
   heben sie auf denselben Punkt. Bewusst als calc() mit festem px-Anteil: der
   Abgleich ist eine Pixel-Aussage gegen eine fremde Leiste, kein Größenverhältnis
   innerhalb der Leiste. Gegenstück: .ps__navbar padding-left. */
.sidebar--collapsed {
    padding: calc(0.55em + 5px) 0 0.85em;
}

#sb-pts,
#sb-fps {
    border-right: 1px solid rgba(0,0,0,0.2);
}

/* ============================================================
   Presentation Dock — Bottom-Right Image Strip
   ============================================================ */

.pres-dock {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 10200;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em;
    background: transparent;
    backdrop-filter: blur(0.75em);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: none;
    border-radius: 0.5em;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.3s ease;
}

/* ── Scrollable thumb strip ──────────────────────────────────── */

.pres-dock__scroll {
    display: flex;
    align-items: center;
    gap: 0.4em;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pres-dock__scroll::-webkit-scrollbar {
    display: none;
}

.pres-dock__more {
    flex-shrink: 0;
    width: 1.6em;
    height: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.3em;
    color: #888;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pres-dock__more:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #444;
}

.pres-dock--hidden {
    transform: translateY(calc(100% + 1.5em));
    pointer-events: none;
}

.pres-dock--drag-over {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ── Plus Button ─────────────────────────────────────────────── */

.pres-dock__add {
    width: 3em;
    height: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(0, 0, 0, 0.15);
    border-radius: 0.35em;
    background: none;
    color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pres-dock__add:hover {
    border-color: rgba(0, 0, 0, 0.3);
    color: #555;
    background: rgba(0, 0, 0, 0.03);
}

/* ── Thumbnails ──────────────────────────────────────────────── */

.pres-dock__thumb-wrap {
    position: relative;
    width: 3em;
    height: 2.1em;
    flex-shrink: 0;
    border-radius: 0.35em;
    overflow: hidden;
    cursor: grab;
    border: 1.5px solid transparent;
    transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.pres-dock__thumb-wrap:active {
    cursor: grabbing;
}
.pres-dock__thumb-wrap:hover {
    border-color: rgba(0, 0, 0, 0.15);
}
.pres-dock__thumb-wrap.is-active {
    border-color: #6366f1;
    box-shadow: 0 0 0 1.5px rgba(99, 102, 241, 0.25);
}
.pres-dock__thumb-wrap--drop-target {
    border-color: #6366f1;
    transform: scale(1.08);
}

.pres-dock__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ── Remove Button ───────────────────────────────────────────── */

.pres-dock__remove {
    position: absolute;
    top: 0.15em;
    right: 0.15em;
    width: 1.2em;
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    padding: 0;
    line-height: 1;
}
.pres-dock__thumb-wrap:hover .pres-dock__remove {
    opacity: 1;
}
.pres-dock__remove:hover {
    background: #4242F5;
}

/* ── Confirm Delete Popover ───────────────────────────────────── */

.pres-dock__confirm {
    position: absolute;
    bottom: calc(100% + 0.5em);
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.5em 0.25em 0.5em;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: 0.35em;
    box-shadow: none;
    white-space: nowrap;
    font-family: var(--font-sans);
    animation: pres-dock-confirm-in 0.15s ease;
}

@keyframes pres-dock-confirm-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pres-dock__confirm-text {
    font-size: 0.72em;
    font-weight: 500;
    color: #555;
}

.pres-dock__confirm-yes,
.pres-dock__confirm-no {
    padding: 0.2em 0.55em;
    border: none;
    border-radius: 0.3em;
    font-size: 0.68em;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease;
}

.pres-dock__confirm-yes {
    background: #4242F5;
    color: #fff;
}
.pres-dock__confirm-yes:hover {
    background: #3333d4;
}

.pres-dock__confirm-no {
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}
.pres-dock__confirm-no:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* ── Slideshow Overlay ────────────────────────────────────────── */

.pres-slider {
    position: fixed;
    inset: 0;
    z-index: 10150;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: pres-slider-in 0.2s ease;
}

@keyframes pres-slider-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pres-slider__stage {
    position: absolute;
    inset: 4em 5em 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.pres-slider__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.5em;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    user-select: none;
    pointer-events: none;
}

.pres-slider__arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10151;
    width: 2.5em;
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.25em;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.15s ease, color 0.15s ease;
}
.pres-slider__arrow:hover {
    background: #fff;
    color: #111;
}

.pres-slider__arrow--prev {
    left: 1.5em;
}
.pres-slider__arrow--next {
    right: 1.5em;
}

.pres-dock__confirm-yes,
.pres-dock__confirm-no {
    font-weight: 600;
}

.pres-dock__confirm-yes,
.pres-dock__confirm-no {
    padding: 0.3em 0.55em 0.2em 0.55em;
}


/* ══════════════════════════════════════════════════════════════
   AnimationBar — Bottom-Bar für Präsentations-Playback
   ══════════════════════════════════════════════════════════════ */

.anim-bar {
  position: fixed;
  bottom: 0;
  left: var(--nav-rail-w, 60px);
  right: 0;
  display: flex;
  flex-direction: column;
  background: rgba(24, 24, 27, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10100; /* über .app-shell (10050) und dev-header (11000) */
  font-family: var(--font-mono, 'Sohne Mono', monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.25s, transform 0.25s;
}
.anim-bar--presentation {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  left: 0; /* kein nav-rail offset im Präsentationsmodus */
}
.anim-bar__bottom {
  position: relative;                       /* Anker für Help-Button */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  /* 28 (filmstrip padding-top) + 56 (slide) + 6 (gap) + 38 (slot) + 4 (Atemraum) = 132px */
  min-height: 132px;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.anim-bar__bottom--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

/* ── Instant Tooltips (data-tip, above button) ── */
.anim-bar [data-tip] {
  position: relative;
}
.anim-bar [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #1a1a1a;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-sans);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 10;
}
.anim-bar [data-tip]:hover::after {
  opacity: 1;
}

/* ── Transport Controls ── */
.anim-bar__transport {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Separator ── */
.anim-bar__sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Scene buttons (speichern + hinzufügen) ── */
.anim-bar__scene-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.anim-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.anim-bar__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.anim-bar__btn--play {
  width: 36px;
  height: 36px;
  background: rgba(99, 102, 241, 0.5);
}
.anim-bar__btn--play:hover {
  background: rgba(99, 102, 241, 0.7);
}
.anim-bar__btn--close {
  background: rgba(239, 68, 68, 0.15);
}
.anim-bar__btn--close:hover {
  background: rgba(239, 68, 68, 0.35);
}

/* ── Filmstrip ── */
.anim-bar__filmstrip {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0 4px;
  scroll-behavior: smooth;
}
.anim-bar__filmstrip::-webkit-scrollbar { height: 3px; }
.anim-bar__filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── "Szene anlegen" Button in der Filmstrip ── */
.anim-bar__filmstrip-add {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.anim-bar__filmstrip-add:hover {
  border-color: rgba(99, 102, 241, 0.5);
  color: rgba(99, 102, 241, 0.9);
  background: rgba(99, 102, 241, 0.08);
}

/* ── Transition-Indikator zwischen Slides (read-only) ── */
.anim-bar__transition-dot {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
  padding: 2px;
  height: 56px;
}
.anim-bar__transition-dot__icon {
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
}
.anim-bar__transition-dot__label {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  line-height: 1;
}

/* (Transition-Popover entfernt — jetzt Teil des kombinierten Slide-Popovers) */
/* ── Hold-Badge auf dem Slide (read-only) ── */
.anim-bar__slide-hold {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
}

.anim-bar__empty {
  display: flex;
  align-items: center;
  height: 56px;
  gap: 6px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.anim-bar__quick-start {
  padding: 6px 12px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.15);
  color: rgba(165, 180, 252, 0.9);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.anim-bar__quick-start:hover {
  background: rgba(99, 102, 241, 0.3);
}

/* ── Slide Column (wraps scene card + ovl-slot + txt-slot) ── */
.anim-bar__slide-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  width: 88px;
  position: relative;
}

/* ── Slide Card ── */
.anim-bar__slide {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 56px;
  border-radius: 5px;
  overflow: visible;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
  background: rgba(255, 255, 255, 0.04);
}
.anim-bar__slide:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.anim-bar__slide--active {
  border-color: rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
}

.anim-bar__slide-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.anim-bar__slide-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.anim-bar__slide-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 4px;
  height: 12px;
  font-size: 8px;
  line-height: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anim-bar__slide-transition {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.anim-bar__slide-settings {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s, color 0.15s;
}
.anim-bar__slide-settings:hover {
  background: rgba(99, 102, 241, 0.5);
  color: #fff;
}

/* ── Popover (Slide Settings) ── */
.anim-bar__popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 10px;
  background: rgba(30, 30, 35, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 910;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anim-bar__popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.anim-bar__popover-row label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.anim-bar__popover-row input[type="number"],
.anim-bar__popover-row select {
  width: 70px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 10px;
  font-family: inherit;
}
.anim-bar__popover-row input[type="checkbox"] {
  accent-color: #6366f1;
}
.anim-bar__popover-delete {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.12);
  color: rgba(239, 68, 68, 0.85);
  font-size: 10px;
  cursor: pointer;
}
.anim-bar__popover-delete:hover {
  background: rgba(239, 68, 68, 0.25);
}
.anim-bar__popover-section-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}
.anim-bar__popover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

/* ── Actions (right side) ── */
.anim-bar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Animation Switcher Dropdown ── */
.anim-bar__anim-switcher {
  position: relative;
}
.anim-bar__anim-switcher-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  transition: background 0.15s;
}
.anim-bar__anim-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.anim-bar__anim-switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.anim-bar__anim-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-width: 280px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
  overflow: hidden;
}
.anim-bar__anim-dropdown-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}
.anim-bar__anim-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.anim-bar__anim-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.anim-bar__anim-dropdown-item--active {
  background: rgba(255, 255, 255, 0.12);
}
.anim-bar__anim-dropdown-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.anim-bar__anim-dropdown-item-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anim-bar__anim-dropdown-item-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}
.anim-bar__anim-dropdown-item-del {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.anim-bar__anim-dropdown-item-del:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}
.anim-bar__anim-dropdown-create {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.anim-bar__anim-dropdown-create:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}
.anim-bar__counter {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 30px;
  text-align: center;
}

/* ── Auto-Save Indicator ── */
.anim-bar__autosave {
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  transition: opacity 0.3s, color 0.3s;
}
.anim-bar__autosave--pending {
  color: rgba(255, 255, 255, 0.35);
  animation: anim-autosave-pulse 1.5s ease-in-out infinite;
}
.anim-bar__autosave--saving {
  color: #60a5fa;
  animation: anim-autosave-spin 0.8s linear infinite;
  display: inline-block;
}
.anim-bar__autosave--saved {
  color: #4ade80;
}
.anim-bar__autosave--error {
  color: #f87171;
}
@keyframes anim-autosave-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes anim-autosave-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Scene Picker (portal) ── */
.anim-bar__scene-picker {
  position: fixed;
  width: 220px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(30, 30, 35, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 910;
}
.anim-bar__scene-picker-title {
  padding: 4px 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.anim-bar__scene-picker-empty {
  padding: 12px 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}
.anim-bar__scene-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}
.anim-bar__scene-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.anim-bar__scene-picker-thumb {
  width: 40px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Expanded Panel ── */
.anim-bar--expanded {
  /* panel adds ~260px above the 72px bottom bar */
}

.anim-panel {
  display: flex;
  flex-direction: column;
  height: 260px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.anim-panel__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.anim-panel__tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.anim-panel__tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
.anim-panel__tab--active {
  background: rgba(99, 102, 241, 0.15);
  color: rgba(165, 180, 252, 0.95);
}

.anim-panel__scene-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.anim-panel__scene-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.anim-panel__scene-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.anim-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
.anim-panel__content::-webkit-scrollbar { width: 4px; }
.anim-panel__content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ── Grid layout for key-value rows ── */
.anim-panel__grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 10px;
  align-items: center;
}
.anim-panel__grid--wide {
  grid-template-columns: 100px 1fr;
}
.anim-panel__grid label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.anim-panel__grid select {
  width: 100%;
  max-width: 160px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 10px;
  font-family: inherit;
}
.anim-panel__grid input[type="checkbox"] {
  accent-color: #6366f1;
  width: 14px;
  height: 14px;
  justify-self: start;
}

.anim-panel__range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.anim-panel__range-row input[type="range"] {
  flex: 1;
  height: 3px;
  accent-color: #6366f1;
  cursor: pointer;
}
.anim-panel__range-row span {
  min-width: 38px;
  text-align: right;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ── Clouds list ── */
.anim-panel__clouds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anim-panel__cloud {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
}
.anim-panel__cloud-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.anim-panel__cloud-header:hover {
  background: rgba(255, 255, 255, 0.04);
}
.anim-panel__cloud-name {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anim-panel__vis-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.anim-panel__vis-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.anim-panel__chevron {
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.anim-panel__chevron--open {
  transform: rotate(180deg);
}
.anim-panel__cloud-body {
  padding: 6px 8px 10px 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Camera tab ── */
.anim-panel__vec {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.anim-panel__small-btn {
  padding: 4px 10px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.1);
  color: rgba(165, 180, 252, 0.9);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.anim-panel__small-btn:hover {
  background: rgba(99, 102, 241, 0.25);
}
.anim-panel__small-btn--active {
  background: rgba(99, 102, 241, 0.35);
  border-color: rgba(99, 102, 241, 0.6);
  color: #a5b4fc;
}
.anim-panel__turntable-row {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
}
.anim-panel__turntable-row input[type="range"] {
  flex: 1;
  accent-color: #6366f1;
  height: 4px;
}
.anim-panel__turntable-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 48px;
  text-align: right;
}

/* Turntable button in transport */
.anim-bar__btn--turntable {
  position: relative;
}
.anim-bar__btn--active {
  color: #a5b4fc !important;
  background: rgba(99, 102, 241, 0.2);
}
.anim-bar__btn--active:hover {
  background: rgba(99, 102, 241, 0.35);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 2s linear infinite;
}

.anim-panel__empty {
  padding: 20px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
}

/* ── Drag & Drop indicator ── */
.anim-bar__slide--drop {
  border-color: rgba(99, 102, 241, 0.6) !important;
  background: rgba(99, 102, 241, 0.08);
}

/* ── Popover actions row ── */
.anim-bar__popover-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.anim-bar__popover-dup {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: rgba(165, 180, 252, 0.85);
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}
.anim-bar__popover-dup:hover {
  background: rgba(99, 102, 241, 0.25);
}

/* ── Portal-based popover (MUST come after .anim-bar__popover rules to win cascade) ── */
.anim-bar__popover--portal {
  position: fixed;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: 999999;
  font-family: var(--font-mono, 'Sohne Mono', monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  -webkit-font-smoothing: antialiased;
}
.anim-bar__popover--portal .anim-bar__popover-row label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.anim-bar__popover--portal .anim-bar__popover-row input[type="number"],
.anim-bar__popover--portal .anim-bar__popover-row select {
  width: 70px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 10px;
  font-family: inherit;
}
.anim-bar__popover--portal .anim-bar__popover-row input[type="checkbox"] {
  accent-color: #6366f1;
}

/* ── Context Menu (portal on body) ── */
.anim-bar__ctx-menu {
  position: fixed;
  z-index: 999999;
  min-width: 170px;
  padding: 4px;
  background: rgba(24, 24, 27, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono, 'Sohne Mono', monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.anim-bar__ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.anim-bar__ctx-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.anim-bar__ctx-item--danger {
  color: rgba(239, 68, 68, 0.85);
}
.anim-bar__ctx-item--danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.anim-bar__ctx-sep {
  height: 1px;
  margin: 3px 6px;
  background: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════════
   AnimationBar — Overlay-Bilder (von stefan portiert)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   Overlay-Strip — Bild-Slots 1:1 unter Filmstrip-Slides
   ══════════════════════════════════════════════════════════════ */

/* ── Inline Overlay Slot (below each scene card) ── */
.ovl-slot {
  width: 88px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.ovl-slot:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(255, 255, 255, 0.04);
}
.ovl-slot--active {
  border-color: rgba(99, 102, 241, 0.5);
  border-style: solid;
}
.ovl-slot--dragging {
  opacity: 0.4;
}
.ovl-slot--drop-target {
  border-color: rgba(99, 102, 241, 0.8) !important;
  border-style: solid !important;
  background: rgba(99, 102, 241, 0.15) !important;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.3);
}
/* Span: stretch over neighbor slide-cols (col 88px + gap 6px + dot ~10px + gap 6px = ~110px per extra) */
.ovl-slot--span2 { width: calc(88px * 2 + 24px); z-index: 2; }
.ovl-slot--span3 { width: calc(88px * 3 + 48px); z-index: 2; }

.ovl-slot__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ovl-slot__empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  line-height: 0;       /* kein Inline-Box-Padding um das Icon */
}
.ovl-slot__count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.8);
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  padding: 0 2px;
}
.ovl-slot__span-badge {
  position: absolute;
  bottom: 1px;
  left: 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(234, 179, 8, 0.7);
  color: #000;
  font-size: 8px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Text-Overlay Slots (3. Zeile unter Bild-Slots)
   ══════════════════════════════════════════════════════════════ */
.txt-slot {
  width: 88px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.txt-slot:hover {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(255, 255, 255, 0.04);
}
.txt-slot--active {
  border-color: rgba(168, 85, 247, 0.5);
  border-style: solid;
}
.txt-slot--dragging { opacity: 0.4; }
.txt-slot--drop-target {
  border-color: rgba(168, 85, 247, 0.8) !important;
  border-style: solid !important;
  background: rgba(168, 85, 247, 0.15) !important;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.3);
}
.txt-slot--span2 { width: calc(88px * 2 + 24px); z-index: 2; }
.txt-slot--span3 { width: calc(88px * 3 + 48px); z-index: 2; }
.txt-slot__preview {
  font-family: 'PP Mori', sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  max-width: 100%;
}
.txt-slot__empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  line-height: 0;
}
.txt-slot__count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.8);
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  padding: 0 2px;
}
.txt-slot__span-badge {
  position: absolute;
  bottom: 1px;
  left: 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(234, 179, 8, 0.7);
  color: #000;
  font-size: 8px;
  font-weight: 600;
}

/* ── Text Popover ── */
.txt-popover__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.txt-popover__item:last-child { border-bottom: none; }
.txt-popover__textarea {
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'PP Mori', sans-serif;
  font-size: 11px;
  resize: vertical;
}
.txt-popover__textarea:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.5);
}
.txt-popover__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.txt-popover__color-row {
  flex-wrap: nowrap !important;
}
.txt-popover__color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.12s;
}
.txt-popover__color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
.txt-popover__color-swatch--active {
  border-color: rgba(99, 102, 241, 0.8);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4);
}

/* ── Text-Overlay über dem Canvas ── */
.txt-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: visible;
}
.txt-overlay {
  position: absolute;
  font-family: 'PP Mori', sans-serif;
  font-weight: 400;
  white-space: pre-line;
  width: max-content;
  text-shadow: none;
  transition: opacity 0.5s ease;
  transform: translate(-50%, -50%);
}
.txt-overlay--hidden {
  opacity: 0 !important;
}

/* ── Popover: Images header ── */
.imgstrip__popover-images-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 2px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
}
.imgstrip__popover-upload-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 9px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.imgstrip__popover-upload-btn:hover {
  border-color: rgba(99, 102, 241, 0.5);
  color: #fff;
}

.imgstrip__popover-empty {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  padding: 6px 0;
  text-align: center;
}

.imgstrip__popover-images-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.imgstrip__popover-image-item {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.imgstrip__popover-image-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

button.imgstrip__popover-reupload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px dashed #fbbf24;
  border-radius: 4px;
  cursor: pointer;
  font-size: 8px;
  line-height: 1.1;
  padding: 2px;
  transition: background 0.15s, border-color 0.15s;
}
button.imgstrip__popover-reupload:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: #f59e0b;
}

.imgstrip__popover-image-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.imgstrip__popover-image-name {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Vec3 / Vec2 inline inputs ── */
.imgstrip__popover-vec3,
.imgstrip__popover-vec2 {
  display: flex;
  align-items: center;
  gap: 3px;
}
.imgstrip__popover-vec3 label,
.imgstrip__popover-vec2 label {
  width: 28px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.imgstrip__popover-vec3 input,
.imgstrip__popover-vec2 input {
  width: 48px;
  padding: 1px 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-family: inherit;
}

.imgstrip__pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  flex-shrink: 0;
}
.imgstrip__pick-btn:hover {
  border-color: rgba(99, 102, 241, 0.5);
  color: #fff;
}

.imgstrip__popover-img-remove {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border: none;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.7);
  font-size: 9px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 2px;
  transition: background 0.15s, color 0.15s;
}
.imgstrip__popover-img-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ── Help-Button (Tastenkürzel-Anzeige) ─────────────────────── */
/* ── Drag-Modus Indikator ── */
.anim-bar__drag-mode {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(255, 105, 180, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  pointer-events: none;
  animation: anim-bar__drag-mode-in 0.15s ease-out;
}
@keyframes anim-bar__drag-mode-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.anim-bar__help-wrap {
  position: absolute;
  top: -36px;
  left: 12px;
  z-index: 10;
}
.anim-bar__help-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.85);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.anim-bar__help-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}
.anim-bar__help-box {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 210px;
  padding: 10px 12px;
  background: rgba(24, 24, 27, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono, 'Sohne Mono', monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anim-bar__help-title {
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}
.anim-bar__help-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.anim-bar__help-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.anim-bar__help-row span {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Panorama Overlay ───────────────────────────────────── */
/* ── Panorama Lade-Animation ──────────────────────────────────── */
.pano-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.pano-loader-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: pano-spin 0.8s linear infinite;
}
@keyframes pano-spin {
  to { transform: rotate(360deg); }
}
.pano-loader-text {
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

.pano-overlay {
  position: fixed;
  top: 16px;
  /* Mittig im Render-View (wie #view-nav-pill): links um --shell-offset eingerückt,
     rechts ggf. um den Modell-Dock verkürzt (body.shell-modell-dock-open, s.u.). */
  left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + (100% - var(--shell-offset, var(--nav-rail-w, 60px))) / 2);
  transform: translateX(-50%);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 20, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 14px 8px 18px;
  pointer-events: auto;
  animation: pano-fade-in 0.3s ease-out;
}
@keyframes pano-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pano-overlay-name {
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.pano-overlay-name::before {
  content: '360°';
  display: inline-block;
  background: rgba(0, 180, 220, 0.25);
  color: rgb(0, 200, 240);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Geschoss-Chip — hebt das Geschoss im Pano-Titel (Overlay-Pille + Hover-Tooltip)
   deutlich hervor. Kräftiges Gelb (wie Kugel-Default) auf dunklem Text. */
.pano-floor-chip {
  display: inline-block;
  background: rgb(255, 214, 0);
  color: #15151a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pano-pt-name {
  vertical-align: middle;
}
/* Optik wie der „Abbrechen"-Button der View-Nav-Pille (nativer heller
   Button): weißer Pill, dunkler Text, dezenter Rand + Schatten. */
.pano-overlay-exit {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  color: #1d1d1f;
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pano-overlay-exit:hover {
  background: #f2f2f2;
  border-color: rgba(0, 0, 0, 0.22);
  color: #1d1d1f;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}
.pano-overlay-exit:active {
  background: #e6e6e6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Foto-Navigation im schwebenden 3D-Fenster (Hover-Fenster): die globale
   Pano-UI liegt sonst unter dem Fenster (z-index 40000+) und mittig zum
   ganzen Render-View. Im Board-3D-Fenster-Kontext:
   • Hover-Tooltip (Sphere-Label) nach ganz oben heben, damit es sichtbar ist.
   • Die große Pano-Pille ausblenden — der Exit sitzt stattdessen als kleiner
     Button oben mittig IM Fenster (BoardWindows.tsx, .board-window__pano-exit). */
body.shell-board-window-3d #pano-hover-tooltip { z-index: 1000000 !important; }
body.shell-board-window-3d .pano-overlay { display: none !important; }

/* ── Panorama Marker: jetzt 3D-Kugeln (kein CSS nötig) ──────── */
/* Hover-Tooltip wird inline via JS gestylt (#pano-hover-tooltip) */

/* ──────────────────────────────────────────────────────────────
   View-Navigation-Pille  —  #view-nav-pill
   Schwebende Pille oben mittig im Render-View.
   Wechsel zwischen Grundrissen / Schnitten / Modell-Ansichten.
   Stilvorlage: .pano-overlay
   ────────────────────────────────────────────────────────────── */
#view-nav-pill {
  position: fixed;
  top: 16px;
  /* Mittig im Potree-Render-View: links um --shell-offset (NavRail + ggf.
     ContentPanel) eingerückt, rechts ggf. um den Modell-Dock (Klasse
     body.shell-modell-dock-open, s.u.) verkürzt. */
  left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + (100% - var(--shell-offset, var(--nav-rail-w, 60px))) / 2);
  transform: translateX(-50%);
  /* Wie #bottom-dock: sanft mitwandern statt springen, wenn sich der
     Render-View (Sidebar/Panel/Dock) ändert. */
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Viewer-Chrome: über dem 3D-Overlay-Band (Marker/Cursor), unter Panels/Modals.
     Zuvor 9990 → Marker/Cursor lagen davor. Token: siehe :root. */
  z-index: var(--z-chrome);
  display: flex;
  align-items: stretch;            /* stretch, damit Arrow-Stack volle Höhe nutzt */
  gap: 0;
  /* Farblich an die untere Dock-Pill (#dock-pill) angeglichen */
  background: rgba(30, 30, 30, 0.65);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  pointer-events: auto;
  animation: view-nav-fade-in 0.25s ease-out;
  font-family: var(--font-sans, system-ui);
}
#view-nav-pill.hidden {
  display: none !important;
}

/* Untere Detail-Leiste: mittig im Render-View (wie #view-nav-pill), wandert
   mit Shell-Offset + Modell-Dock mit. left/transform NICHT inline setzen. */
#detail-edit-bar {
  left: calc(var(--shell-offset, var(--nav-rail-w, 60px)) + (100% - var(--shell-offset, var(--nav-rail-w, 60px))) / 2);
  transform: translateX(-50%);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes view-nav-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Arrow-Stack: Up + Down vertikal mit horizontalem Divider,
   rechts begrenzt durch vertikalen Separator zum Label */
.view-nav-pill__arrow-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 24px;
  margin-right: 4px;
  padding-right: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
/* Up/Down-Pfeile im Stack */
.view-nav-pill__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.view-nav-pill__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
.view-nav-pill__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Klickbares Label-Element (öffnet Dropdown) */
.view-nav-pill__label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 0;
}
.view-nav-pill__label:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Mess-Schubladen-Button auf der Pille (szenengekoppelt) */
.view-nav-pill__measure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  margin-left: 2px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-nav-pill__measure:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
.view-nav-pill__measure.is-active {
  background: rgba(74, 143, 232, 0.35);
  color: #fff;
}
.view-nav-pill__measure-count {
  font-size: 10px;
  font-weight: 700;
}
.view-nav-pill__measure-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Auto-Hide Sidebar („Sidepanel ausblenden") ──────────────── */
/* Render-Area gewinnt die Sidebar-Breite (NavRail = 0).
   --shell-offset wird auf :root aus var(--nav-rail-w) aufgelöst und vererbt
   diesen festen Wert — daher muss es hier direkt überschrieben werden,
   sonst rückt die Render-Area nicht nach links. */
body.shell-sidebar-hidden { --nav-rail-w: 0px; }
body.shell-sidebar-hidden:not(.shell-panel-open) { --shell-offset: 0px; }

/* Sidebar im Hidden-Zustand komplett ausgefahren. Hover am linken Streifen
   entfernt per JS die Klasse → volle Wiederherstellung (wie Checkbox aus). */
body.shell-sidebar-hidden .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
  /* kein Schatten: die ausgefahrene Sidebar hinterließe sonst eine
     sichtbare Schattenkante am linken Viewport-Rand */
  box-shadow: none;
}

/* Linker Hover-Streifen — Trigger zum Wieder-Einblenden */
#sidebar-peek-strip { display: none; }
body.shell-sidebar-hidden #sidebar-peek-strip {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 30850;
}

/* Schwebender Burger (Projektübersicht) — nur bei ausgeblendeter Sidebar.
   Geometrie exakt wie der echte Sidebar-Burger (/* Logo-Kurzform in der Seitenleiste (Livetest 15.09., Befund #13).
   Die Marke steht in ihrer eigenen Farbe (#0d0d0d aus favicon.svg / logo_black.svg),
   nicht im Grau der Werkzeug-Icons — und sie wechselt sie beim Überfahren auch
   nicht: ein Logo ist kein Bedienelement unter anderen. Der Hover-Grund des
   Knopfes bleibt unverändert, nur das Zeichen hält seine Farbe. */
.sidebar__logo {
    color: #0d0d0d;
}

.sidebar__icon-btn--back):
   36×36, border-radius 8px, links 12px (zentriert in 60px), top 6.3px
   (0.45em Padding × 14px) → liegt bei der Transition deckungsgleich darüber. */
#sidebar-hidden-burger { display: none; }
body.shell-sidebar-hidden #sidebar-hidden-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 3px;
  left: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  z-index: 30900;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #666;
  cursor: pointer;
}
body.shell-sidebar-hidden #sidebar-hidden-burger:hover { background: #f5f5f5; color: #000; }
/* Projekttitel NICHT verschieben: trotz --nav-rail-w:0 auf der normalen
   Position halten (wie bei eingeblendeter Sidebar = 60px + 1em). */
body.shell-sidebar-hidden .project-title-bar { left: calc(60px + 1em); }

/* Mess-Lasche durch die Layer-Chips (DockLayerChips) ersetzt → ausgeblendet. */
#view-nav-pill-measure { display: none !important; }

/* Mess-Lasche: eigenständig, vertikal zentriert am rechten Browserrand */
#view-nav-pill-measure {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9985;
  flex-direction: column;
  gap: 3px;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 11px 7px;
  margin: 0;
  background: rgba(20, 20, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: rgba(255, 255, 255, 0.72);
}
#view-nav-pill-measure:hover {
  color: #fff;
}
/* Bei offenem Dock: Lasche an die linke Dock-Kante (um Dock-Breite eingerückt),
   wie ein Reiter am Panel. Folgt dem Resizer über --modell-dock-w. */
body.shell-modell-dock-open #view-nav-pill-measure {
  right: var(--modell-dock-w, 440px);
}

/* Blickrichtung-Flip — als Segment in der Nav-Pille (oben angedockt) */
#view-nav-pill-flip {
  display: none;            /* per JS auf flex, wenn Schnitt aktiv */
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  margin-left: 2px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#view-nav-pill-flip:hover {
  background: rgba(74, 143, 232, 0.35);
  color: #fff;
}

/* Typ-Badge (Langform: "Grundriss" / "Schnitt" / "Modell") */
.view-nav-pill__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
}
.view-nav-pill__badge[data-view-type="modell"] {
  background: rgba(251, 191, 36, 0.20);
  color: rgb(251, 191, 36);
}
.view-nav-pill__badge[data-view-type="grundriss"] {
  background: rgba(74, 222, 128, 0.18);
  color: rgb(74, 222, 128);
}
.view-nav-pill__badge[data-view-type="schnitt"] {
  background: rgba(96, 165, 250, 0.18);
  color: rgb(96, 165, 250);
}

/* Aktiver Eintrags-Name (mit Crossfade-Animation) */
.view-nav-pill__name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s ease-out;
}
.view-nav-pill__name.is-fading {
  opacity: 0;
}

.view-nav-pill__caret {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

/* Dropdown — öffnet sich unter der Pille */
.view-nav-pill__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  /* FESTE Breite (Figma-Frame 28:111 ≈ 301px): lange Titel werden per
     Ellipsis abgeschnitten — auch wenn der Hover-Handle sie nach rechts
     schiebt — statt das Popup zu verbreitern. */
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(20, 20, 24, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.view-nav-pill__dropdown.open {
  display: flex;
}

/* Einzel-Item im Dropdown */
.view-nav-pill__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  transition: background 0.12s;
  user-select: none;
}
.view-nav-pill__item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.view-nav-pill__item--active {
  background: rgba(255, 255, 255, 0.10);
}
.view-nav-pill__item--active:hover {
  background: rgba(255, 255, 255, 0.13);
}
.view-nav-pill__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* Zusatz-Sektion: aktive Dock-Liste (Audits/Annotationen) */
.view-nav-pill__dock-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  transition: background 0.12s;
  user-select: none;
}
.view-nav-pill__dock-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.view-nav-pill__item-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.view-nav-pill__item-name-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.95);
  padding: 2px 6px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
}
.view-nav-pill__item-name-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
}
.view-nav-pill__item-meta {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.view-nav-pill__item-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.view-nav-pill__item:hover .view-nav-pill__item-del {
  opacity: 1;
}
.view-nav-pill__item-del:hover {
  background: rgba(248, 113, 113, 0.18);
  color: rgb(248, 113, 113);
}

/* Bookmark-Button (gespeicherte Kamera) — nur im Schnitt-Tab */
.view-nav-pill__item-bookmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s, transform 0.12s;
}
.view-nav-pill__item:hover .view-nav-pill__item-bookmark {
  opacity: 1;
}
.view-nav-pill__item-bookmark:hover {
  background: rgba(96, 165, 250, 0.14);
  color: rgb(96, 165, 250);
}
.view-nav-pill__item-bookmark--active {
  opacity: 1 !important;
  color: rgb(96, 165, 250);
}
.view-nav-pill__item-bookmark--active:hover {
  background: rgba(96, 165, 250, 0.22);
  transform: scale(1.05);
}

/* Stern-Button (Standard-Ansicht) — nur im Grundriss-Tab */
.view-nav-pill__item-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s, transform 0.12s;
}
.view-nav-pill__item:hover .view-nav-pill__item-star {
  opacity: 1;
}
.view-nav-pill__item-star:hover {
  background: rgba(251, 191, 36, 0.14);
  color: rgb(251, 191, 36);
}
.view-nav-pill__item-star--active {
  opacity: 1 !important;
  color: rgb(251, 191, 36);
}
.view-nav-pill__item-star--active:hover {
  background: rgba(251, 191, 36, 0.22);
  transform: scale(1.05);
}

/* Sektions-Header im Dropdown (für leeren Modell-Tab etc.) */
.view-nav-pill__section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  padding: 8px 10px 4px 10px;
}

/* Sektions-Header mit Aktions-Icon (z.B. ⚙ rechts) */
.view-nav-pill__section--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.view-nav-pill__section-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.view-nav-pill__section-settings:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

/* Drag-Handle für Szenen — reine Affordanz (die GANZE Zeile ist dragbar).
   Fährt bei Hover von 0 auf Breite aus, der Titel schiebt sich nach rechts. */
.view-nav-pill__item-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 20px;
  margin-right: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.30);
  cursor: grab;
  opacity: 0;
  transition: width 0.15s ease, margin-right 0.15s ease, opacity 0.15s ease, color 0.12s;
  flex-shrink: 0;
  user-select: none;
}
.view-nav-pill__item:hover .view-nav-pill__item-drag {
  width: 14px;
  margin-right: 2px;
  opacity: 1;
}
.view-nav-pill__item-drag:active {
  cursor: grabbing;
}
.view-nav-pill__item-drag:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* ★-Marker der Startszene (reine Anzeige — Umschalten läuft übers ⋯-Menü) */
.view-nav-pill__item-starmark {
  flex-shrink: 0;
  color: #f59e0b;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* ⋯-Menü-Button pro Szenen-Zeile (Pattern der Messungs-Liste, .ml-more) */
.view-nav-pill__item-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.view-nav-pill__item:hover .view-nav-pill__item-menu {
  opacity: 1;
}
.view-nav-pill__item-menu:hover {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

/* Drag-State */
.view-nav-pill__item--dragging {
  opacity: 0.4;
}
.view-nav-pill__item--drop-target {
  background: rgba(96, 165, 250, 0.14) !important;
  box-shadow: inset 0 2px 0 0 rgba(96, 165, 250, 0.55);
}
/* Einfüge-Grenze beim Listen-Drag (Felix 2026-08-19): blaue Linie an der
   EXAKTEN Zielposition — obere Zeilenhälfte = davor, untere = danach.
   Einheitliches Muster mit Ablauf-Panel, Board-Seiten, Checklisten, Slides. */
.view-nav-pill__item--drop-before {
  box-shadow: inset 0 2px 0 0 #4242F5 !important;
}
.view-nav-pill__item--drop-after {
  box-shadow: inset 0 -2px 0 0 #4242F5 !important;
}

/* ── Szenen-Gruppen im Dropdown (SZENE_GRUPPEN_PLAN.md, 2026-08-12) ────
   Ersetzt das Pin-Management-Modal: Zuklappen = aus der Pfeil-Rotation. */
.view-nav-pill__section--group {
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
}
.view-nav-pill__section--group:hover {
  background: rgba(255, 255, 255, 0.05);
}
.view-nav-pill__section-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-nav-pill__section-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.view-nav-pill__group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.15s ease;
}
.view-nav-pill__group-chevron.is-collapsed {
  transform: rotate(180deg);
}
.view-nav-pill__group-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.view-nav-pill__section--group:hover .view-nav-pill__group-del {
  opacity: 1;
}
.view-nav-pill__group-del:hover {
  background: rgba(248, 113, 113, 0.16);
  color: rgb(248, 113, 113);
}
.view-nav-pill__group-name-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.95);
  padding: 2px 6px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  outline: none;
}
.view-nav-pill__group-name-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
}
/* Leere (aufgeklappte) Gruppe — zugleich Drop-Ziel */
.view-nav-pill__group-empty {
  padding: 6px 10px 8px 24px;
  font-size: 11px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.35);
  border: 1px dashed transparent;
  border-radius: 6px;
}
/* Drop-Ziel-Markierung für Header/leere Gruppen (Drag auf Gruppe = ans Ende) */
.view-nav-pill__section--drop-target {
  background: rgba(96, 165, 250, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.55);
}
/* Footer: „+ Neue Szene" | „+ Neue Gruppe" — klebt bei langer Liste unten
   (sticky im scrollenden Dropdown; -6px überspannt dessen Innen-Padding) */
.view-nav-pill__footer {
  position: sticky;
  bottom: -6px;
  z-index: 1;
  display: flex;
  gap: 6px;
  margin: 4px -6px -6px -6px;
  padding: 6px;
  background: rgba(20, 20, 24, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.view-nav-pill__footer .view-nav-pill__create {
  flex: 1 1 0;
  margin-top: 0;
}
/* Scroll-Hinweis: Verlauf über dem Footer, nur wenn Liste scrollbar und
   nicht am Ende (JS toggelt .has-scroll-fade am Dropdown) */
.view-nav-pill__dropdown.has-scroll-fade .view-nav-pill__footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(20, 20, 24, 0), rgba(20, 20, 24, 0.95));
  pointer-events: none;
}
/* Drop-Ziel-Markierung: Gruppe auf den Footer ziehen = ans Ende */
.view-nav-pill__footer--drop-target {
  box-shadow: inset 0 2px 0 0 rgba(96, 165, 250, 0.55);
}
/* Gezogener Gruppen-Header */
.view-nav-pill__section--dragging {
  opacity: 0.4;
}
/* ⋯-/„Verschieben nach…"-Menü (am body verankert, über allem).
   font-family explizit — am body würde sonst die Serifen-Default-Schrift erben */
.view-nav-pill__move-menu {
  position: fixed;
  z-index: var(--z-modal, 100000);
  min-width: 170px;
  max-width: 240px;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(20, 20, 24, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.view-nav-pill__move-menu-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  padding: 6px 10px 4px 10px;
}
.view-nav-pill__move-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-nav-pill__move-menu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.view-nav-pill__move-menu-item.is-current {
  opacity: 0.4;
  cursor: default;
}
.view-nav-pill__move-menu-item--new {
  color: hsl(150 70% 62%);
  font-weight: 600;
}
.view-nav-pill__move-menu-item--danger {
  color: rgb(248, 113, 113);
}
.view-nav-pill__move-menu-item--danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.14);
}
.view-nav-pill__move-menu-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 4px 6px;
}

/* "+ Neu anlegen"-Button am Ende */
.view-nav-pill__create {
  margin-top: 4px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.view-nav-pill__create:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.95);
}

/* ── Shortcut Overlay ──────────────────────────────────────────── */
.sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sc-overlay-inner {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  width: 90%;
  max-width: 680px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px 28px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.sc-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sc-overlay-title {
  font-family: var(--font-sans, system-ui);
  font-size: 16px;
  font-weight: 600;
  color: #eee;
  letter-spacing: 0.01em;
}
.sc-overlay-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: #999;
  font-size: 13px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font-sans, system-ui);
  transition: background 0.15s, color 0.15s;
}
.sc-overlay-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ccc;
}
.sc-overlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}@media (max-width: 600px) {
  .sc-overlay-grid { grid-template-columns: 1fr; }
}
.sc-group {
  break-inside: avoid;
}
.sc-group-title {
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  gap: 10px;
}
.sc-keys {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.sc-keys kbd {
  display: inline-block;
  font-family: var(--font-sans, system-ui);
  font-size: 11px;
  font-weight: 500;
  color: #ccc;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}
.sc-desc {
  font-family: var(--font-sans, system-ui);
  font-size: 12px;
  color: #999;
  text-align: right;
}

/* ── C1: Zurück-zum-Raumbuch-Button (Raum-Isolationsmodus oben links) ── */
.rd-back-raumbuch-btn {
  position: fixed;
  top: 16px;
  left: 78px;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: var(--font-sans, 'PP Mori', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.12s, border-color 0.12s;
}
.rd-back-raumbuch-btn:hover {
  background: #fff;
  border-color: #9ca3af;
}
.rd-back-raumbuch-btn svg {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Messpunkte-Panel — Glass-Pane, dockt an .building-float an
   ══════════════════════════════════════════════════════════════════════════ */

#measure-list-pane {
    position: fixed;
    /* Fallback-Position wenn .building-float nicht da ist */
    right: 1em;
    bottom: 22em;
    width: 26.25em;
    max-height: 22em;
    z-index: 9991;
    display: none;
    overflow: hidden;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    /* Gleiche Basis-Größenskala wie .building-float damit die ganze Hierarchie
       konsistent ist (em-basierte Skalierung der Kinder). */
    font-size: 0.875em;
    color: #111827;
    /* Glass-Pane wie .building-float */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75em;
    box-shadow:
        0 0.75em 2.5em rgba(0, 0, 0, 0.12),
        0 0.25em 0.75em rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Hinweis: Die alte freischwebende Rechts-Schublade (--docked/--sidebar/--open)
   wurde entfernt. Die Messliste lebt ausschließlich im rechten Modell-Dock
   (Mess-Tab) — Styling dort via .measure-list-pane--in-modell-dock (splitview.css). */

/* F4: Such-/Sortier-Leiste */
.measure-list-pane__tools {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.857em;
    background: rgba(245, 245, 247, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
}
.measure-list-pane__search {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.375em;
    padding: 0.35em 0.5em;
    font-size: 0.82em;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    outline: none;
}
.measure-list-pane__search:focus {
    border-color: #4a8fe8;
}
/* Im Modell-Dock übernimmt die einheitliche Kopf-Suche (modell-dock__search)
   die Textsuche → interne Pane-Suche ausblenden, Sortierung bleibt. */
.measure-list-pane--in-modell-dock .measure-list-pane__search {
    display: none;
}
/* Im Dock: Szenen-Titel-Zeile (Header) entfernen — der Dock-Tab hat bereits
   einen Kopf. */
.measure-list-pane--in-modell-dock .measure-list-pane__header {
    display: none;
}
/* Anzahl der eingebetteten Objekte der aktiven Szene — steht im Dock anstelle
   des Suchfelds; außerhalb des Docks ausgeblendet (dort gibt es die Pane-Suche). */
.measure-list-pane__scenecount {
    display: none;
}
.measure-list-pane--in-modell-dock .measure-list-pane__scenecount {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8em;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* [stefan_10_06] gleicher Stil wie .audit-template-select.audit-status-select */
.measure-list-pane__sort {
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: 14px;
    color: #111827;
    padding: 7px 32px 7px 11px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6.4px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
}

/* Header — analog zu .building-float__header (gleiches Padding, gleicher BG) */
.measure-list-pane__header {
    padding: 0.714em 0.857em 0.5em;
    background: rgba(245, 245, 247, 0.45);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    user-select: none;
}

/* Titel "Messpunkte" — analog zu .building-float__title */
.measure-list-pane__title {
    font-size: 0.929em;          /* ~13px wie Gebäude-Titel */
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: 0.005em;
}

/* Exakt analog zu .building-float__minimize (Größe, Farben, Hover) */
.measure-list-pane__minimize {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;  /* wie #view-nav-pill-measure */
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.measure-list-pane__minimize:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}

/* SVG-Größe in ALLEN Toggle-Buttons (Gebäude + Messpunkte + Übersicht) erzwingen,
   damit das Icon pixel-perfekt identisch rendert — unabhängig von den
   width/height-Attributen die im SVG-Markup stehen. */
.building-float__minimize > svg,
.measure-list-pane__minimize > svg,
.minimap-pane__minimize > svg {
    width: 1.125em;
    height: 1.125em;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   Übersicht-Panel (Minimap) — Glass-Pane, gleiche Optik wie Gebäude/Messpunkte
   ══════════════════════════════════════════════════════════════════════════ */

#minimap-container {
    position: fixed;
    right: 1em;
    bottom: 1em;
    width: 26.25em;             /* gleiche Breite wie .building-float */
    z-index: 9990;
    display: none;
    overflow: hidden;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 0.875em;         /* gleicher Skalierungs-Anker */
    color: #111827;
    /* Glass-Pane analog .building-float */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75em;
    box-shadow:
        0 0.75em 2.5em rgba(0, 0, 0, 0.12),
        0 0.25em 0.75em rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.minimap-pane__header {
    padding: 0.714em 0.857em 0.5em;
    background: rgba(245, 245, 247, 0.45);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    user-select: none;
}

.minimap-pane__title {
    font-size: 0.929em;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: 0.005em;
}

.minimap-pane__minimize {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 0.25em;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.minimap-pane__minimize:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
}

.minimap-pane__canvas {
    display: block;
    cursor: pointer;
    width: 100%;                /* skaliert auf Container-Breite */
    height: auto;
    /* Gleiche Opazität wie .minimap-pane__header — visuell durchgängiger Look */
    background: rgba(245, 245, 247, 0.45);
}

/* Liste — Schrift im selben Größenbereich wie .view-layer-pill__btn
   damit beide Tool-Panels visuell konsistent wirken. */
.measure-list-pane__list {
    overflow-y: auto;
    padding: 0.375em 0.625em 0.625em;
    font-size: 0.85em;           /* gleich wie view-layer-pill__btn */
}

/* Letzte Mess-Zeile ohne Border-Bottom (sauberer Listen-Abschluss).
   !important schlägt den Inline-Border aus der IIFE-Row-Erstellung. */
.measure-list-pane__list > div:last-child {
    border-bottom: 0 !important;
}


/* ── Gebäudedaten-Panel Styles (aus stefan) ────────────────────────────── */

.building-float__address {
    font-size: 0.929em;
}

.gebaeude-tabs__btn,
.building-float__body .ghost-field__hint {
    color: #0f172a;
    font-size: 0.829em;
}

/* ============================================================
   DEV: Tile-Renderer-Panel (Plandaten-Prototyp)
   ============================================================ */
.dev-render-panel {
    position: fixed;
    top: 64px;
    right: 14px;
    z-index: 850;
    width: 212px;
    background: hsl(0 0% 8%);
    border: 1px solid hsl(0 0% 20%);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    color: #eee;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    overflow: hidden;
    user-select: none;
}

.dev-render-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: hsl(0 0% 12%);
    border-bottom: 1px solid hsl(0 0% 18%);
}
.dev-render-panel-title {
    font-weight: 600;
    font-size: 11px;
    color: #fff;
}
.dev-render-panel-close {
    border: none;
    background: none;
    color: hsl(0 0% 55%);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.dev-render-panel-close:hover {
    color: #fff;
}

.dev-render-preview {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 10px auto 8px;
    background: hsl(0 0% 5%);
    border: 1px solid hsl(0 0% 18%);
    border-radius: 4px;
    overflow: hidden;
}
.dev-render-preview canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.dev-render-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.dev-render-grid-cell {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dev-render-grid-cell.done {
    background: rgba(59, 130, 246, 0.18);
}
.dev-render-grid-cell.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.35);
}

.dev-render-progress-bar {
    height: 3px;
    margin: 0 10px;
    background: hsl(0 0% 16%);
    border-radius: 2px;
    overflow: hidden;
}
.dev-render-progress-fill {
    height: 100%;
    width: 0%;
    background: #3b82f6;
    transition: width 0.15s;
}

.dev-render-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px 3px;
    font-size: 10px;
    color: hsl(0 0% 60%);
}
.dev-render-pct {
    font-variant-numeric: tabular-nums;
    color: hsl(0 0% 75%);
}

.dev-render-lod-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 6px;
}
.dev-render-lod-label {
    font-size: 9px;
    color: hsl(0 0% 45%);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.dev-render-lod-pips {
    display: flex;
    gap: 4px;
}
.dev-render-lod-pip {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    background: hsl(0 0% 14%);
    color: hsl(0 0% 45%);
    border: 1px solid transparent;
}
.dev-render-lod-pip.active {
    border-color: #3b82f6;
    color: #93c5fd;
}
.dev-render-lod-pip.done {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.dev-render-btn-row {
    display: flex;
    padding: 0 10px 6px;
}
.dev-render-btn-row:last-of-type {
    padding-bottom: 10px;
}
.dev-render-btn {
    flex: 1;
    padding: 5px 0;
    border: 1px solid hsl(0 0% 22%);
    border-radius: 5px;
    background: hsl(0 0% 14%);
    color: #ddd;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.dev-render-btn:hover:not(:disabled) {
    background: hsl(0 0% 19%);
    border-color: hsl(0 0% 30%);
}
.dev-render-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.dev-render-btn.primary {
    background: #2563eb;
    border-color: #3b82f6;
    color: #fff;
}
.dev-render-btn.primary:hover:not(:disabled) {
    background: #3b82f6;
}

/* ════════════════════════════════════════════════════════════════════════
   GRUNDRISS-WIZARD — geführtes Anlegen aller Grundrisse
   ════════════════════════════════════════════════════════════════════════ */

/* Fadenkreuz am Pickpunkt */
.gw-crosshair {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    pointer-events: none;
    z-index: 10004;
    transition: opacity 0.08s linear;
}
.gw-crosshair::before,
.gw-crosshair::after {
    content: "";
    position: absolute;
    background: hsl(150 90% 55%);
    box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.55);
}
.gw-crosshair::before {
    left: 50%;
    top: 0;
    width: 1.5px;
    height: 100%;
    transform: translateX(-50%);
}
.gw-crosshair::after {
    top: 50%;
    left: 0;
    height: 1.5px;
    width: 100%;
    transform: translateY(-50%);
}

/* Dock-Pille im Wizard-Modus ausblenden (Bar übernimmt deren Platz).
   Die obere View-Nav-Pille bleibt sichtbar — sie trägt den „Geschosse
   bearbeiten"-Toggle, mit dem man den Modus auch wieder verlässt. */
body.gw-active #bottom-dock { display: none !important; }
/* Pille im Wizard-Modus sichtbar erzwingen (trägt den Bearbeiten-Toggle). */
body.gw-active #view-nav-pill { display: flex !important; }

/* Fokus-Modus: linke Sidebar, rechte Panels/Dock ausblenden, View voll. */
body.gw-active .sidebar,
body.gw-active .nav-rail,
body.gw-active .content-panel,
body.gw-active .modell-dock { display: none !important; }
body.gw-active .app-shell { pointer-events: none !important; }
body.gw-active .dock-layer-chips { display: none !important; }
/* Layer-Chips im Grundriss-/Schnitt-Tab: NICHT mehr komplett aus (bis 2026-09-16).
   Variante B (Felix, bestätigt 2026-09-17): nur Maße-Chip + Anlegen-Chip — keine
   Bauteil-/Annotationsinfos im Plan (2D braucht eigene Regeln, noch offen).
   Entscheidet React (DockLayerChips planOnly), dort entfallen auch Pille 0/1. */
body.gw-active {
    --shell-offset: 0px !important;
    --nav-rail-w: 0px !important;
    --content-panel-w: 0px !important;
    --modell-dock-w: 0px !important;
}
body.gw-active .potree_container { left: 0 !important; width: 100% !important; }

/* Im Wizard: Prev/Next-Pfeile der Pille ausblenden (kein Durchblättern). */
body.gw-active .view-nav-pill__arrow-stack { display: none !important; }

/* Schnitt-Wizard (sw-active) — gleicher Fokus-Modus wie gw-active. */
body.sw-active #bottom-dock { display: none !important; }
body.sw-active #view-nav-pill { display: flex !important; }
body.sw-active .sidebar,
body.sw-active .nav-rail,
body.sw-active .content-panel,
body.sw-active .modell-dock { display: none !important; }
body.sw-active .app-shell { pointer-events: none !important; }
body.sw-active .dock-layer-chips { display: none !important; }
body.sw-active {
    --shell-offset: 0px !important;
    --nav-rail-w: 0px !important;
    --content-panel-w: 0px !important;
    --modell-dock-w: 0px !important;
}
body.sw-active .potree_container { left: 0 !important; width: 100% !important; }
body.sw-active .view-nav-pill__arrow-stack { display: none !important; }

/* Schnitt-Wizard: Zeichen-Overlay (Linie) + Readout */
/* In-Place-Schnitt-Zeichnen auf dem Grundriss: Chrome (Dock-Pill) ausblenden,
   View bleibt unverändert (anders als sw-active). */
body.sw-inplace #bottom-dock,
body.sw-inplace .dock-layer-chips { display: none !important; }

.sw-draw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10006;
}
.sw-draw-line {
    stroke: #1a73e8;
    stroke-width: 2;
    stroke-dasharray: 7 5;
    stroke-linecap: round;
}
/* Editier-Ebene: alle Schnitte als Handles (rein visuell, Hit-Test in JS) */
.sw-edit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10005;
    overflow: visible;
}
.sw-edit-line {
    stroke: #4f86d6;
    stroke-width: 2;
    stroke-linecap: round;
}
.sw-edit-line--hover { stroke: #7fb0ef; stroke-width: 3; }
.sw-edit-line--sel { stroke: #fff; stroke-width: 3; }
.sw-edit-arrow {
    stroke: #f5a623;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}
.sw-edit-arrow--sel { stroke: #ffb938; stroke-width: 2.5; opacity: 1; }
.sw-edit-handle {
    fill: #fff;
    stroke: #1a73e8;
    stroke-width: 2.5;
}
.sw-readout {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10007;
    padding: 3px 8px;
    background: rgba(24, 24, 27, 0.95);
    color: #fff;
    border-radius: 6px;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.08s linear;
}

/* Cursor-Tooltip (folgt der Maus, phasenabhängige Kurzanweisung) */
.gw-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10006;
    padding: 4px 9px;
    background: rgba(24, 24, 27, 0.95);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: opacity 0.08s linear;
}

/* Geschoss-Liste im Pill-Dropdown (Wizard) */
.view-nav-pill__dropdown .gw-row { width: 100%; box-sizing: border-box; }

/* Ausrichten/Rahmen — SVG-Zeichen-Overlay (Bildschirm) */
.gw-draw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10006;
}
.gw-draw-line {
    stroke: #34d399;
    stroke-width: 2.5;
    stroke-dasharray: 7 5;
    stroke-linecap: round;
}
.gw-draw-rect {
    fill: rgba(52, 211, 153, 0.12);
    stroke: #34d399;
    stroke-width: 2;
}
/* „An Wand ausrichten" — scharf-geschalteter Zustand */
.gw-btn--armed {
    background: hsl(150 70% 30%);
    box-shadow: 0 0 0 2px hsl(150 80% 55%);
}

/* Kontext-Label in der View-Nav-Pille (links, nicht klickbar) — benennt den
   Dropdown-Inhalt (Szenen/Geschosse/Schnitte/Audits/Räume …). */
.view-nav-pill__context {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 9px;
    margin-right: 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-sans, system-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    pointer-events: none;
}
.view-nav-pill__context:empty { display: none; }

/* Eingebettete „Geschosse bearbeiten"-Aktion im Dropdown — leicht betont */
.view-nav-pill__create--edit {
    color: hsl(150 70% 62%);
    font-weight: 600;
}

/* Label am Geschoss-Pickpunkt */
.gw-pick-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 8px;
    background: hsl(150 70% 38%);
    color: #fff;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 10004;
    transition: opacity 0.08s linear;
}

/* Steuer-Bar — haargenau auf der Position von #bottom-dock */
.gw-bar {
    position: absolute;
    bottom: 1.15em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10400;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 16px;
    background: rgba(24, 24, 27, 0.94);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    font-family: var(--font-sans, system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.9);
}
.gw-bar__hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.gw-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gw-slider {
    width: 160px;
    accent-color: hsl(150 80% 50%);
    cursor: pointer;
}
.gw-slider-val {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
    min-width: 48px;
    text-align: right;
}
.gw-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: hsl(150 70% 42%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gw-btn:hover { background: hsl(150 70% 48%); }
.gw-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
.gw-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Live-Panel oben rechts */
.gw-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10005;
    width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    background: rgba(24, 24, 27, 0.94);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    font-family: var(--font-sans, system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.9);
}
.gw-panel__head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.gw-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
}
.gw-row:hover { background: rgba(255, 255, 255, 0.05); }
.gw-row--empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-style: italic;
}
.gw-row__name {
    flex: 1;
    font-size: 13px;
    min-width: 0;
    outline: none;
    border-radius: 4px;
    padding: 1px 3px;
}
.gw-row__name:focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px hsl(150 70% 45%);
}
.gw-row__z {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.5);
}
.gw-row__del {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.gw-row__del:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Benenn-Dialog */
.gw-dialog {
    position: fixed;
    z-index: 10010;
    width: 250px;
    padding: 12px;
    background: rgba(24, 24, 27, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
    font-family: var(--font-sans, system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.9);
}
.gw-dialog__title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}
.gw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
/* Grundriss-Dialog: Umschalter Gebäude | Gelände (Ortsentscheidung 2026-09-19).
   Eigene Zeile über den Geschoss-Chips, etwas ruhiger als diese. */
.gw-chips--scope {
    margin-bottom: 0.35em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid hsl(0 0% 100% / 0.10);
}
.gw-chips--scope .gw-chip {
    font-size: 0.9166em;
    opacity: 0.75;
}
.gw-chips--scope .gw-chip--sel { opacity: 1; }

.gw-chip {
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.gw-chip:hover { background: rgba(255, 255, 255, 0.08); }
.gw-chip--sel {
    background: hsl(150 70% 42%);
    border-color: hsl(150 70% 42%);
    color: #fff;
}
.gw-chip--used {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}
.gw-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 10px;
}
.gw-input:focus {
    outline: none;
    border-color: hsl(150 70% 45%);
}
.gw-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Whiteboard-Präsentationsmodus (BoardPresentation setzt body.board-presenting):
   schwebenden Projektübersicht-Burger UND Sidebar-Peek-Streifen ausblenden —
   während der Show soll nichts aus der App-Navigation hereinragen. */
body.board-presenting #sidebar-hidden-burger { display: none !important; }
body.board-presenting #sidebar-peek-strip { display: none !important; }


/* ── Fassadenansicht (Dev-Seite „fassade", Inkrement 1) ──────────────────
   Abgeleitet von .reg-panel; z-index über das Token, nicht als freie Zahl. */
.fac-panel {
    position: fixed;
    top: 50px;
    left: 16px;
    width: 296px;
    padding: 12px;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: var(--z-panel);
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 8px;    /* Der Kopf ist der Ziehgriff und bleibt stehen; nur der Körper rollt. */
    max-height: calc(100vh - 96px);
}
.fac-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* nicht in den Viewer durchscrollen */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    margin-right: -6px;             /* Rollbalken außerhalb des Rasters */
    padding-right: 6px;
}
/* Dieselbe Falle wie bei `.pb-body` (dort steht die Messung): ohne das
   schrumpfen die Abschnitte, statt dass der Behälter rollt. Hier war es
   bisher nur nicht aufgefallen, weil `.fac-sec` kein `overflow: hidden` hat
   und deshalb nicht sichtbar abschneidet — gerollt hätte es trotzdem nicht,
   sobald der Inhalt das Panel überschreitet. */
.fac-body > * { flex-shrink: 0; }
.fac-body::-webkit-scrollbar { width: 7px; }
.fac-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
.fac-body::-webkit-scrollbar-track { background: transparent; }


.fac-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    user-select: none;
}
.fac-hd:active { cursor: grabbing; }

.fac-title { font-weight: 600; font-size: 12px; color: #fff; }

.fac-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}
.fac-close:hover { color: #fff; }

.fac-sec { display: flex; flex-direction: column; gap: 5px; }

.fac-lb {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fac-dv { height: 1px; background: rgba(255, 255, 255, 0.06); }

.fac-pick {
    width: 100%;
    padding: 6px 9px;
    border: 1px dashed rgba(74, 143, 232, 0.55);
    border-radius: 6px;
    background: rgba(74, 143, 232, 0.10);
    color: #9CC6F5;
    font-family: inherit;
    font-size: 10.5px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.fac-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.fac-pick.active { border-style: solid; background: rgba(74, 143, 232, 0.26); color: #CFE3FA; }

.fac-todo {
    font-size: 9px;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.fac-list { display: flex; flex-direction: column; gap: 3px; }

.fac-empty {
    padding: 9px 7px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.30);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    text-align: center;
}

/* Eine Zeile je Fläche: Kürzel · Name · Relief · Entfernen.
   Feste Spalten — sonst springen die Zahlen von Zeile zu Zeile. */
.fac-item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 34px 14px;
    gap: 7px;
    align-items: center;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 10.5px;
    cursor: pointer;
}
.fac-item > * { min-width: 0; }
.fac-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.85); }
.fac-rms { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.40); }
.fac-del { text-align: center; color: rgba(255, 255, 255, 0.28); line-height: 1; }
.fac-del:hover { color: #ff8080; }
.fac-det {
    grid-column: 1 / -1;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 9.5px;
    color: rgba(207, 227, 250, 0.75);
    font-variant-numeric: tabular-nums;
}
.fac-legend {
    display: flex; align-items: center; gap: 6px; margin-top: 5px;
    font-size: 9.5px; color: rgba(255, 255, 255, 0.35);
}

.fac-item:hover { background: rgba(255, 255, 255, 0.06); }
.fac-dot { width: 9px; height: 9px; border-radius: 2px; background: #4A8FE8; }
.fac-nm { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-rms { font-size: 9px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.fac-del { color: rgba(255, 255, 255, 0.30); font-size: 11px; padding: 0 2px; cursor: pointer; }
.fac-del:hover { color: #ff6b6b; }
.fac-item.sel { border-color: rgba(74, 143, 232, 0.55); background: rgba(74, 143, 232, 0.14); }
.fac-item { cursor: pointer; }
.fac-nm em { font-style: normal; color: rgba(255, 255, 255, 0.35); }


.fac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Grid-Kinder haben min-width:auto und schrumpfen deshalb NICHT unter ihren
   Inhalt — genau daran lief die Justage-Zeile rechts aus dem Panel. */
.fac-row > * { min-width: 0; }
.fac-row--3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.fac-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; }

/* Kürzel in der Liste (W1, D2 …) — dieselbe Zeichenfolge steht im Modell */
/* Kürzel in der Liste (W1, D2 …) — dieselbe Zeichenfolge steht im Modell.
   Es trägt zugleich die Farbe: blau = gewachsen, orange = Ersatzausdehnung.
   Ein separater Punkt daneben kostete Breite und erklärte sich nicht. */
.fac-tg {
    display: block;
    width: 26px;
    padding: 2px 0;
    border-radius: 4px;
    background: rgba(74, 143, 232, 0.28);
    color: #CFE3FA;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
.fac-tg--roh { background: rgba(255, 136, 0, 0.30); color: #FFCE9B; }

.fac-item.sel .fac-tg { background: rgba(74, 143, 232, 0.75); color: #fff; }
.fac-item.sel .fac-tg--roh { background: rgba(255, 136, 0, 0.75); color: #241505; }
.fac-adj { font-style: normal; color: rgba(155, 225, 255, 0.75); }

/* Bezeichner im Modell. Liegt über dem Canvas, nimmt keine Klicks an. */
.fac-labels {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-panel);
}
.fac-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 136, 0, 0.55);
    background: rgba(20, 20, 24, 0.82);
    color: #FFCE9B;
    font: 700 10.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fac-tag--sel { border-color: rgba(74, 143, 232, 0.9); background: rgba(20, 34, 56, 0.92); color: #CFE3FA; }
.fac-tag--hov { border-color: rgba(155, 225, 255, 0.9); background: rgba(24, 44, 56, 0.92); color: #DFF6FF; }

/* Fixpunkte: vier Ecken und die Mitte der ausgewählten Fläche. Der Behälter
   nimmt keine Klicks an — diese Punkte schon. */
.fac-anch {
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid rgba(74, 143, 232, 0.95);
    background: rgba(12, 16, 24, 0.75);
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.1s, transform 0.1s, box-shadow 0.1s;
}
.fac-anch:hover { background: rgba(155, 225, 255, 0.55); }
.fac-anch--on {
    background: #4a8fe8;
    border-color: #DCEBFC;
    box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.28);
}
#fac-tf-anchor { margin-top: 6px; }

/* Ansicht: Bezugsfläche-Zeile */
.fac-refrow {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.fac-refrow > span { color: rgba(255, 255, 255, 0.45); font-size: 10px; }
.fac-refrow > * { min-width: 0; }

/* Auswahlkästchen in der Flächenliste — nur sichtbar, solange eine Ansicht
   aktiv ist. Die Zeile bleibt einzeilig, das Kästchen ist die erste Spalte. */
.fac-item--cb { grid-template-columns: 13px 26px minmax(0, 1fr) 34px 14px; }
.fac-cb {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}
.fac-cb:hover { border-color: rgba(155, 225, 255, 0.7); }
.fac-cb.on {
    background: #4a8fe8;
    border-color: #4a8fe8;
    box-shadow: inset 0 0 0 2px rgba(20, 20, 25, 0.9);
}
/* Bezugsfläche: gibt die Blickrichtung — im Rand markiert, nicht mit Text */
.fac-item.ref { border-left: 2px solid rgba(155, 225, 255, 0.85); }

/* Hüllen-Leiste: Auswahl + drei schmale Knöpfe */
.fac-hullbar { display: grid; grid-template-columns: 1fr auto auto auto; gap: 5px; align-items: stretch; }
.fac-hullbar > * { min-width: 0; }
.fac-hullbar .fac-side { padding: 5px 8px; flex: 0 0 auto; }
.fac-sel {
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}
.fac-sel:focus { border-color: rgba(74, 143, 232, 0.5); }
.fac-side {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fac-side:hover { background: rgba(255, 255, 255, 0.07); }
.fac-side.active {
    border-color: rgba(74, 143, 232, 0.55);
    background: rgba(74, 143, 232, 0.20);
    color: #CFE3FA;
}
#fac-viewstate { margin-top: 6px; }
#fac-shaderstate { margin-top: 4px; font-variant-numeric: tabular-nums; }
.fac-state--warn {
    border-color: rgba(240, 160, 60, 0.45);
    background: rgba(240, 160, 60, 0.12);
    color: #F3C98B;
}


.fac-inp {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 10px;
}
.fac-inp {
    min-width: 0;
    overflow: hidden;
}
.fac-inp span {
    color: rgba(255, 255, 255, 0.45);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fac-inp em { font-style: normal; color: rgba(255, 255, 255, 0.35); flex: 0 0 auto; }
/* Am Rad drehbar — sichtbar durch den Cursor, nicht nur durch den Tooltip */
.fac-inp input[data-wheel] { cursor: ns-resize; }
.fac-inp:focus-within { border-color: rgba(74, 143, 232, 0.5); background: rgba(74, 143, 232, 0.10); }
.fac-inp input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.fac-inp input:focus { outline: none; }
.fac-inp input::-webkit-outer-spin-button,
.fac-inp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fac-state {
    font-size: 10px;
    line-height: 1.5;
    padding: 5px 8px;
    border-radius: 5px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.45);
}
.fac-state--on {
    border-left-color: #2FD3BD;
    background: rgba(47, 211, 190, 0.08);
    color: #B7EFE7;
}
/* Hinweis INNERHALB einer Zustandszeile — die Zeile bleibt grün, nur das
   eine Wort warnt (z. B. „verkürzt" bei geneigtem Bezug im Aufriss). */
.fac-state b.fac-warn {
    color: #FFC46B;
    font-weight: 600;
}

.fac-btn {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.fac-btn:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.fac-perf {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.30);
    font-variant-numeric: tabular-nums;
}

.fac-hint {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.28);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   PLANBILD — Dev-Seite „planbild" (Stufe A)
   Panel-Optik bewusst identisch zu .fac-panel, damit die Dev-Seiten
   untereinander wiedererkennbar bleiben. Ebenen über die --z-Tokens.
   ══════════════════════════════════════════════════════════════════════ */
.pb-panel {
    position: fixed;
    top: 50px;
    left: 16px;
    width: 310px;
    padding: 12px;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: var(--z-panel);
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 96px);
}
.pb-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* ⚠ Die Zeile, die das Rollen möglich macht, ist `> * { flex-shrink: 0 }`
       weiter unten — NICHT `min-height: 0`.

       Ohne sie schrumpft Flexbox die KINDER, statt den Behälter rollen zu
       lassen: jedes Akkordeon wird auf einen Streifen gequetscht (im Test
       14 statt 29 px), sein `overflow: hidden` schneidet den Inhalt ab (450
       px sichtbar von 975 px Inhalt), und weil der Inhalt dadurch immer
       hineinpasst, entsteht nie ein Rollbalken. Genau dieses Doppelbild —
       kollabierte Höhen UND kein Scrollen — hat Felix am 2026-08-30
       gemeldet.

       Nachgemessen mit einem Nachbau in Chromium (7 Akkordeons, eines
       offen, 583 px Panelhöhe):
         ohne beides        scrollHeight 583 = clientHeight, maxScrollTop 0
         nur min-height:0   scrollHeight 583 — UNVERÄNDERT, wirkt hier nicht
         nur flex-shrink:0  scrollHeight 1226, maxScrollTop 643 — behoben
       `min-height: 0` bleibt trotzdem stehen: es ist die übliche Absicherung
       für einen Flex-Rollbehälter und greift, sobald das Panel eine feste
       Höhe bekommt. Es ist hier aber NICHT die Ursache — wer es für den Fix
       hält, sucht beim nächsten Mal an der falschen Stelle. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* nicht in den Viewer durchscrollen */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    padding-right: 2px;
}
.pb-body > * { flex-shrink: 0; }
.pb-body::-webkit-scrollbar { width: 7px; }
.pb-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
.pb-body::-webkit-scrollbar-track { background: transparent; }
.pb-hd { display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; }
.pb-hd:active { cursor: grabbing; }
.pb-title { font-weight: 600; font-size: 12px; color: #fff; }
.pb-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.45); font-size: 13px; line-height: 1; padding: 2px 4px;
}
.pb-close:hover { color: #fff; }
.pb-sec { display: flex; flex-direction: column; gap: 5px; }
.pb-lb {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.38);
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.pb-dv { height: 1px; background: rgba(255, 255, 255, 0.06); }
/* Der produktive Durchlauf steht ÜBER den Schritten und ist deshalb optisch
   abgesetzt: die Schritte sind die Werkbank, dieser Block ist die Ausgabe. */
.pb-aus {
    display: flex; flex-direction: column; gap: 5px;
    padding: 9px 10px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(74, 143, 232, 0.32);
    border-radius: 7px;
    background: rgba(74, 143, 232, 0.07);
}
.pb-aus .pb-erkl { margin: 0 0 2px; }
.pb-aus .pb-btn--go { margin-top: 3px; }
.pb-state { font-size: 10px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }
.pb-mono { font-variant-numeric: tabular-nums; }
.pb-dim { color: rgba(255, 255, 255, 0.35); }
.pb-warn { color: #ffb454; }
.pb-scope {
    font-size: 9px; letter-spacing: 0; text-transform: none;
    padding: 1px 6px; border-radius: 4px;
    background: rgba(74, 143, 232, 0.24); color: #CFE3FA;
}
.pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-row > * { min-width: 0; }
.pb-btn, .pb-side {
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font: inherit; font-size: 10.5px; cursor: pointer; text-align: center;
}
.pb-btn:hover, .pb-side:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.pb-btn--go { border-color: rgba(74, 143, 232, 0.55); background: rgba(74, 143, 232, 0.20); color: #DCEBFC; }
.pb-sel, .pb-inp input {
    min-width: 0; padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 5px;
    background: rgba(255, 255, 255, 0.04); color: #fff; font: inherit; font-size: 10.5px;
}
.pb-inp { display: flex; align-items: center; gap: 5px; }
.pb-inp > span { color: rgba(255, 255, 255, 0.45); font-size: 9.5px; white-space: nowrap; }
.pb-inp input { flex: 1 1 auto; width: 100%; }
.pb-inp em { font-style: normal; color: rgba(255, 255, 255, 0.35); font-size: 9.5px; }
.pb-chk { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255, 255, 255, 0.65); cursor: pointer; }

/* Regler: Name, Schiene, Zahl — die Zahl ist die belastbare Angabe,
   die Schiene nur der schnelle Weg dorthin. */
.pb-sl { display: grid; grid-template-columns: 82px 1fr 52px 14px; align-items: center; gap: 6px; }
.pb-sl > span { font-size: 9.5px; color: rgba(255, 255, 255, 0.45); }
.pb-sl input[type="range"] { width: 100%; min-width: 0; accent-color: #4a8fe8; }
.pb-sl input[type="number"] {
    min-width: 0; width: 100%; padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 4px;
    background: rgba(255, 255, 255, 0.04); color: #fff; font: inherit; font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.pb-sl em { font-style: normal; font-size: 9px; color: rgba(255, 255, 255, 0.3); }
.pb-hint { font-size: 9px; line-height: 1.4; color: rgba(255, 255, 255, 0.30); }

/* Vorschau als kleines Bild IM Panel. Bewusst kein Deckel über dem Viewer:
   das Rezept („dichte" = schwarzer Grund, 2% Deckkraft) darf die 3D-Ansicht
   nicht im unsichtbaren Zustand stehen lassen. */
.pb-prev {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    image-rendering: auto;
}
#pb-prevbox { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }

/* Ergebnis-Fenster (Probe, Planbild, Naht-Test) */
.pb-result {
    position: fixed;
    inset: 40px;
    z-index: var(--z-modal);
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px;
    background: rgba(16, 16, 20, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
}
.pb-result-hd { display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #fff; font-size: 12px; }
.pb-result-info { font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.pb-result-body { flex: 1 1 auto; overflow: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.pb-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-fig canvas { background: #fff; border: 1px solid rgba(255, 255, 255, 0.12); max-width: 100%; height: auto; }
.pb-fig figcaption { font-size: 9.5px; color: rgba(255, 255, 255, 0.45); }

/* Planbild: „Fläche antippen" im aktiven Zustand — gleiche Sprache wie .fac-pick */
.pb-btn.active {
    border-color: rgba(74, 143, 232, 0.55);
    background: rgba(74, 143, 232, 0.26);
    color: #CFE3FA;
}
#pb-pickhint { min-height: 13px; margin-top: 3px; }

/* Farbwähler in der Planbild-Zeile — soll wie die anderen Felder wirken */
.pb-inp input[type="color"] {
    padding: 2px;
    height: 22px;
    min-width: 44px;
    cursor: pointer;
}

/* ── Planbild: Akkordeon je Arbeitsschritt ─────────────────────────────── */
.pb-acc {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}
.pb-acc > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.88);
    user-select: none;
}
.pb-acc > summary::-webkit-details-marker { display: none; }
.pb-acc > summary::after {
    content: "▸";
    margin-left: auto;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.12s;
}
.pb-acc[open] > summary::after { transform: rotate(90deg); }
.pb-acc > summary:hover { background: rgba(255, 255, 255, 0.04); }
.pb-nr {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
    font-size: 9px; font-weight: 700;
}
.pb-acc[open] .pb-nr { background: rgba(74, 143, 232, 0.45); color: #fff; }
.pb-chip {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.pb-chip.ok { background: rgba(52, 211, 153, 0.16); color: #8ee8c4; }
.pb-chip.offen { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.40); }
.pb-accbody {
    display: flex; flex-direction: column; gap: 6px;
    padding: 2px 9px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Erklärung: sagt, WOZU der Schritt da ist — nicht, welcher Knopf was tut. */
.pb-erkl {
    margin: 6px 0 2px;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.48);
}
.pb-erkl b { color: rgba(255, 255, 255, 0.72); font-weight: 600; }

/* Stufenmodell: „einfach" blendet alles Feinjustierbare aus */
.pb-panel[data-modus="einfach"] .pb-detail { display: none !important; }

/* Einfach-Modus = Zweckwahl: die Schritt-Akkordeons gehören dem Detail-Modus
   (der Ausgabe-Block bleibt in beiden); umgekehrt verschwindet die Zweckwahl. */
.pb-panel[data-modus="einfach"] .pb-body > details.pb-acc { display: none !important; }
.pb-panel[data-modus="detail"] #pb-zweck { display: none !important; }
.pb-seg-grp { display: flex; gap: 2px; margin-left: auto; margin-right: 6px; }
.pb-seg {
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.42);
    font: inherit; font-size: 9.5px; cursor: pointer;
}
.pb-seg:hover { color: #fff; }
.pb-seg.active { background: rgba(74, 143, 232, 0.24); border-color: rgba(74, 143, 232, 0.5); color: #CFE3FA; }

/* ⓘ am Regler — Erklärung klappt darunter auf, statt als Tooltip zu verschwinden.
   Der Slider-Wrapper ist `display: contents`, damit Regler und Hilfe direkte
   Kinder des Akkordeon-Flexes bleiben und der Abstand stimmt. */
.pb-slwrap { display: contents; }
.pb-i {
    width: 13px; height: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.40);
    font: 700 8px/1 ui-monospace, monospace;
    cursor: pointer;
    flex: 0 0 auto;
}
.pb-i:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.pb-i.an { background: rgba(74, 143, 232, 0.30); border-color: rgba(74, 143, 232, 0.6); color: #CFE3FA; }
/* Der Hinweis hängt am body (nicht im Panel), sonst schneidet ihn das
   overflow:auto des Panelkörpers ab. Position wird in JS gesetzt. */
.pb-tip {
    position: fixed;
    display: none;
    max-width: 260px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(24, 24, 30, 0.98);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    font-size: 10px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    z-index: var(--z-toast);
    pointer-events: none;
}
.pb-sl { grid-template-columns: 82px 1fr 52px 14px 15px; }
.pb-zwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.pb-zwrap > .pb-inp { flex: 1 1 auto; min-width: 0; }
.pb-zwrap > .pb-help { flex: 1 0 100%; }


/* ── Dev-Seite „planbild": Chrome der Hauptanwendung zurücknehmen ────────
   NUR für diese Seite (body.dev-mode[data-dev-page="planbild"]) — dasselbe
   Muster, das snap-engine und animation schon benutzen. Rein additiv: keine
   bestehende Regel wird angefasst, nichts wirkt außerhalb dieser Seite. */
body.dev-mode[data-dev-page="planbild"] .minimap-panel,
body.dev-mode[data-dev-page="planbild"] .dock-layer-chips {
    display: none !important;
}
/* Die Szenen-Pille bleibt bedienbar, rutscht aber unter den Dev-Header
   (36 px hoch, s.o.) statt ihn zu überdecken. */
body.dev-mode[data-dev-page="planbild"] #view-nav-pill {
    top: 48px;
}

/* ── Planbild: Voreinstellungen (Endergebnisse der Rundenspiele) ────────── */
.pb-vor {
    display: grid; grid-template-columns: 56px 1fr; gap: 8px;
    align-items: start; padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px; margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.02);
}
.pb-vor.aktiv { border-color: rgba(74, 143, 232, 0.55); background: rgba(74, 143, 232, 0.10); }
.pb-vor img {
    width: 56px; height: auto; display: block; border-radius: 3px;
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.3);
}
.pb-vor-kein {
    width: 56px; height: 34px; border-radius: 3px; font-size: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05);
}
.pb-vor-txt { min-width: 0; }
.pb-vor-nm {
    font-size: 10.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.88);
    overflow-wrap: anywhere;
}
.pb-vor-std {
    font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 3px; white-space: nowrap;
    background: rgba(46, 160, 110, 0.26); color: #A9E6C9;
}
.pb-vor-sub { font-size: 9.5px; color: rgba(255, 255, 255, 0.42); margin-top: 2px; }
.pb-vor-fremd { color: #E0B15A; }
.pb-vor-btn {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: 1fr 1fr 1fr 26px; gap: 4px; margin-top: 2px;
}
.pb-vor-btn.ohne-weg { grid-template-columns: 1fr 1fr 1fr; }
.pb-vor-btn .pb-side { font-size: 9.5px; padding: 4px 4px; }
.pb-vor.werk { border-color: rgba(46, 160, 110, 0.35); background: rgba(46, 160, 110, 0.05); }
.pb-vor.werk .pb-vor-kein {
    background: rgba(46, 160, 110, 0.20); color: #A9E6C9;
    font-size: 9px; letter-spacing: 0.06em;
}
.pb-vor-warum {
    grid-column: 1 / -1; font-size: 9.5px; line-height: 1.5;
    color: rgba(255, 255, 255, 0.5); margin-top: 2px;
}
.pb-vor-warum > summary { cursor: pointer; color: rgba(255, 255, 255, 0.66); }
.pb-vor-warum p { margin: 4px 0 0; }
.pb-vor-warum b { color: rgba(255, 255, 255, 0.82); font-weight: 500; }

/* ── Planbild: Übersicht der erzeugten Dateien ─────────────────────────────
   Nach dem Durchlauf liegen ein Dutzend Dateien vor. Eine Liste von Namen
   sagt nicht, ob das Blatt stimmt — deshalb Kacheln mit echter Vorschau und
   ein Klick auf Vollbild. */
.pb-ueb {
    position: fixed;
    inset: 32px;
    z-index: var(--z-modal);
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px 16px;
    background: rgba(16, 16, 20, 0.975);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
}
.pb-ueb-hd { display: flex; align-items: baseline; gap: 12px; color: #fff; font-size: 13px; }
.pb-ueb-hd .pb-close { margin-left: auto; align-self: center; }
.pb-ueb-sub { font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.42); }
.pb-ueb-grid {
    flex: 1 1 auto; overflow: auto;
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    align-content: start;
}
.pb-ueb-karte {
    position: relative;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    overflow: hidden;
}
.pb-ueb-karte:hover, .pb-ueb-karte:focus-visible {
    border-color: rgba(74, 143, 232, 0.55);
    background: rgba(74, 143, 232, 0.10);
    outline: none;
}
.pb-ueb-schau {
    height: 132px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    overflow: hidden;
}
.pb-ueb-schau img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pb-ueb-schau pre {
    margin: 0; padding: 7px 9px;
    width: 100%; height: 100%;
    overflow: hidden;
    font-size: 7.5px; line-height: 1.35;
    color: #333; background: #f6f6f4;
    white-space: pre; text-align: left;
}
.pb-ueb-marke {
    font-size: 22px; font-weight: 700; letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.30);
}
/* Liegt ein Bild darunter, wird aus der Marke ein Aufkleber in der Ecke. */
.pb-ueb-schau { position: relative; }
.pb-ueb-marke.klein {
    position: absolute; right: 6px; bottom: 6px;
    font-size: 10px; letter-spacing: 0.08em;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(16, 16, 20, 0.82); color: #fff;
}
.pb-ueb-karte figcaption {
    display: flex; flex-direction: column; gap: 2px;
    padding: 7px 9px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pb-ueb-karte figcaption b { color: #fff; font-size: 10.5px; font-weight: 600; word-break: break-all; }
.pb-ueb-gr { color: rgba(255, 255, 255, 0.45); font-size: 9.5px; }
.pb-ueb-zw { color: rgba(255, 255, 255, 0.38); font-size: 9.5px; line-height: 1.4; }
.pb-ueb-dl {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px;
    border: 0; border-radius: 5px;
    background: rgba(16, 16, 20, 0.72); color: #fff;
    font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity 0.12s;
}
.pb-ueb-karte:hover .pb-ueb-dl, .pb-ueb-karte:focus-within .pb-ueb-dl { opacity: 1; }
.pb-ueb-dl:hover { background: rgba(74, 143, 232, 0.85); }

/* Vollbild — eine Datei, so groß wie der Bildschirm hergibt. */
.pb-voll {
    position: fixed; inset: 0;
    z-index: calc(var(--z-modal) + 1);
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px 16px;
    /* Deckend, nicht fast deckend: durch 3 % Transparenz schimmert die
       Kachelübersicht darunter durch und macht Text unlesbar. */
    background: #0b0b0e;
    font-family: var(--font-mono, 'Sohne Mono', monospace);
    color: rgba(255, 255, 255, 0.82); font-size: 11px;
}
.pb-voll-link { color: #8fbdf5; }
/* Kleiner Textknopf in einer Statuszeile — bewusst unauffällig, er hebt eine
   Gewohnheit auf und soll nicht mit dem Ausgabe-Knopf konkurrieren. */
.pb-mini {
    margin-left: 6px; padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 4px;
    background: none; color: rgba(255, 255, 255, 0.55);
    font: inherit; font-size: 9.5px; cursor: pointer;
}
.pb-mini:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.pb-voll-hd { display: flex; align-items: baseline; gap: 12px; color: #fff; font-size: 12px; }
.pb-voll-hd .pb-close { margin-left: auto; align-self: center; font-size: 16px; }
.pb-voll-body {
    flex: 1 1 auto; min-height: 0;
    overflow: auto;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}
/* „eingepasst" zeigt das ganze Blatt, ein Klick schaltet auf 1:1 — bei einem
   43-Megapixel-Planbild braucht man beides. */
.pb-voll-body img { display: block; background: #fff; cursor: zoom-in; }
.pb-voll-body img.eingepasst { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-out; }
.pb-voll-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pb-voll-text {
    align-self: stretch; margin: 0; padding: 14px 18px;
    width: 100%; overflow: auto;
    font-size: 11px; line-height: 1.5;
    color: rgba(255, 255, 255, 0.78); white-space: pre;
}

/* ── Änderungsverlauf eines Datensatzes (Ink. 3c) ─────────────────────────
   Liste unter „Zuletzt geändert" in der Annotations- und Bauteil-Leseansicht:
   je Zeile Datum/Uhrzeit · Name · Rolle · was geändert wurde.
   Quelle ist das zentrale Änderungs-Audit (Admin → Änderungsverlauf).
   ACHTUNG: identisch in orto/src/style.css und orto/public/style.css —
   beide Sheets liegen im selben Dokument, Änderungen bitte in beiden. */
.rec-hist {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}
/* Kopfzeile ist der Aufklapper (Chevron rechts). Standardmäßig zu. */
.rec-hist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    text-align: left;
}
.rec-hist__head:hover {
    color: #111827;
}
.rec-hist__body {
    margin-top: 6px;
}
.rec-hist__note {
    padding: 4px 0;
    font-size: 11px;
    color: #9ca3af;
}
.rec-hist__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 8px;
    padding: 4px 0;
    font-size: 11px;
    line-height: 1.35;
    border-top: 1px solid #f3f4f6;
}
/* Erstes Element im Aufklapp-Bereich ohne Trennlinie — gleich, ob das eine
   Verlaufszeile oder ein Hinweis („Wird geladen …") ist. */
.rec-hist__body > :first-child {
    border-top: none;
}
.rec-hist__when {
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rec-hist__who {
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rec-hist__role {
    color: #6b7280;
    white-space: nowrap;
}
.rec-hist__what {
    grid-column: 1 / -1;
    color: #6b7280;
}
/* Eine Zeile je tatsächlich geändertem Feld: Feldname, alter Wert → neuer Wert */
.rec-hist__change {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 8px;
    color: #6b7280;
}
.rec-hist__field {
    color: #9ca3af;
}
.rec-hist__field::after {
    content: ":";
}
.rec-hist__from {
    text-decoration: line-through;
    color: #9ca3af;
}
.rec-hist__arrow {
    color: #d1d5db;
}
.rec-hist__to {
    color: #111827;
}
/* Geometrie/Kamera/Rich-Text: ein Satz statt Zahlenpaaren */
.rec-hist__summary {
    color: #6b7280;
}
.rec-hist__fields {
    color: #9ca3af;
}
.rec-hist__more {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font-size: 11px;
    cursor: pointer;
}
.rec-hist__more:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   KUBATUR-KARTE UND -LABEL IM ORTO-STIL (Felix 2026-09-19)
   Gleiche Sprache wie die Bauteil-Karte (.audit-ao-card): helle Fläche,
   Blur, PP Mori, dunkler Primär-Knopf. Nur die GEBÄUDE-Varianten —
   die Raum-Karten behalten vorerst ihren dunklen Stand.
   ══════════════════════════════════════════════════════════════════════ */
.vol-info-badge--building {
    min-width: 236px;
    max-width: 272px;
    padding: 10px 12px 11px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    font-family: var(--font-sans, 'PP Mori', system-ui, sans-serif);
    font-size: 12px;
    color: #111827;
    /* Die Karte schluckt ihre eigenen Klicks — sonst deaktiviert der
       VolumeManager dahinter die Auswahl und die Karte verschwindet. */
    pointer-events: auto;
}
.vol-info-badge--building .vol-info-id {
    color: #111827;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
.vol-info-badge--building .vol-info-row {
    border-bottom: none;
    font-size: 11.5px;
    line-height: 1.55;
    padding: 1px 0;
}
.vol-info-badge--building .vol-info-row span:first-child { color: #9ca3af; }
.vol-info-badge--building .vol-info-row span:last-child { color: #374151; }
.vol-info-badge--building .vol-info-grouphdr {
    color: #6b7280;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    font-size: 9.5px;
    margin-top: 8px;
    padding-top: 6px;
}
.vol-info-badge--building .vol-info-stepper b { color: #111827; }
.vol-info-badge--building .vol-info-row.vol-info-sub {
    border-bottom-color: transparent;
    padding-left: 0;
}
.vol-info-badge--building .vol-info-row.vol-info-sub span:first-child { color: #4b5563; }
.vol-info-badge--building .vol-info-namerow input.vol-info-name {
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 5px;
    color: #111827;
    font-size: 11.5px;
    pointer-events: auto;
}
.vol-info-badge--building .vol-info-namerow input.vol-info-name:focus { border-color: #111827; }
.vol-info-badge--building .vol-info-namerow input.vol-info-name::placeholder { color: #9ca3af; }
.vol-info-badge--building .vol-info-actions { border-top: 1px solid rgba(17, 24, 39, 0.08); }
.vol-info-badge--building .vol-info-btn {
    border: 1px solid rgba(17, 24, 39, 0.16);
    background: #fff;
    color: #111827;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
}
.vol-info-badge--building .vol-info-btn:hover {
    background: #f3f4f6;
    border-color: rgba(17, 24, 39, 0.28);
}
.vol-info-badge--building .vol-info-btn--primary {
    background: #111827;
    border-color: #111827;
    color: #fff;
}
.vol-info-badge--building .vol-info-btn--primary:hover { background: #1f2937; }
.vol-info-badge--building .vol-info-btn--mini {
    flex: 0 0 auto;
    padding: 1px 8px;
    font-size: 10.5px;
}
/* Geschossname in der Zeile: sieht wie Text aus, ist ein Knopf */
.vol-info-badge--building .vol-info-rowbtn {
    flex: 0 0 auto;
    padding: 0 3px;
    margin-left: -3px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 11.5px;
    font-weight: 500;
    text-align: left;
}
.vol-info-badge--building .vol-info-rowbtn:hover {
    background: rgba(17, 24, 39, 0.06);
    border: none;
    color: #111827;
    text-decoration: underline;
}

/* Hover-Label der Kubatur (kompakt) — wie .audit-label */
.vol-info-label--building {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    font-family: var(--font-sans, 'PP Mori', system-ui, sans-serif);
    color: #111827;
}
.vol-info-label--building .vol-label-id { color: #111827; font-weight: 600; }
.vol-info-label--building .vol-label-area { color: #6b7280; }
.vol-info-label--building .vol-label-floor {
    color: #6b7280;
    background: rgba(17, 24, 39, 0.06);
}

/* Geschoss-Ansicht einer Kubatur: fremde Gebäude blass und unantastbar */
.section-geschoss-label.geschoss-label--fremd {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Außenraster-Overlay (NAV-21 „Raster", 2026-09-21) ─────────────────────
   Bezeichner des Zellrasters im 3D-Bild: Achsschlüssel im Feld, Buchstabe/
   Zahl an den Achsen. Die Linien selbst sind THREE-
   Geometrie (script.js, `_rasterOverlay`), hier liegt nur die Beschriftung.
   Behälter nimmt keine Klicks an — das Modell bleibt bedienbar. */
.raster-ov {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-overlay, 10000);
}
.raster-ov__feld,
.raster-ov__achse {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    /* Kein text-shadow: die Beschriftung soll wie eine Bodenmarkierung wirken,
       nicht wie ein schwebendes Etikett (Felix 2026-09-21). */
    /* Sohne Mono wie im Raster-Fenster, damit Plan und Modell dieselbe
       Beschriftung tragen (Felix 2026-09-22). Der Schnitt hat nur eine
       Stärke — statt synthetischem Fettdruck trägt die Farbe den
       Unterschied zwischen Feld und Achse. */
    font-family: "Sohne Mono", var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.06em;
}
/* Im Feld: zurückhaltend — es liegt über dem Modell und darf es nicht zudecken.
   Der Bezeichner des Feldes, in dem die Kamera steht, wird ganz ausgeblendet
   (script.js, `_eigenesFeld`). */
.raster-ov__feld {
    color: #9aa0a6;
}
/* An der Achse: die Leseanker, etwas heller und größer als die Felder. */
.raster-ov__achse {
    color: #c3c7cc;
    font-size: 12px;
}