* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            background: #f5f5f5;
        }

        /* ── Top-Bar ───────────────────────────────────────── */
        #top-bar {
            height: 42px;
            flex-shrink: 0;
            background: #1a2533;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0 10px;
            z-index: 9200;
            border-bottom: 1px solid #0d1a26;
            position: relative;
        }
        .tb-btn {
            background: rgba(255,255,255,0.1);
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 4px 10px;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
            height: 28px;
            line-height: 1;
        }
        .tb-btn:hover { background: rgba(255,255,255,0.2); }
        .tb-group {
            position: relative;
            display: flex;
            align-items: center;
        }
        .tb-group-right { margin-left: auto; gap: 4px; }
        .tb-meta-center {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            min-width: 0;
            padding: 0 10px;
            gap: 1px;
        }
        .tb-project-name {
            font-size: 15px;
            font-weight: 700;
            color: rgba(255,255,255,0.9);
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            line-height: 1.25;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .tb-project-name::after {
            content: '📝';
            font-size: 11px;
            opacity: 0.45;
            flex-shrink: 0;
            transition: opacity 0.15s;
        }
        .tb-project-name:hover { color: #fff; }
        .tb-project-name:hover::after { opacity: 0.85; }
        .tb-plan-name {
            font-size: 12px;
            font-weight: 400;
            color: #8bafc8;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            line-height: 1.2;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .tb-plan-name::after {
            content: '📝';
            font-size: 10px;
            opacity: 0.35;
            flex-shrink: 0;
            transition: opacity 0.15s;
        }
        .tb-plan-name:hover { color: #b8d4e8; }
        .tb-plan-name:hover::after { opacity: 0.75; }
        /* ── Metadata Modals ──────────────────────────────────────── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.45);
            z-index: 9500;
        }
        .meta-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9600;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 8px 40px rgba(0,0,0,.35);
            width: 430px;
            max-width: 95vw;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
        }
        .meta-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px 10px;
            border-bottom: 1px solid #e8e8e8;
            flex-shrink: 0;
        }
        .meta-modal-header h3 {
            margin: 0;
            font-size: 15px;
            color: #1a2533;
        }
        .meta-modal-close {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #888;
            padding: 2px 7px;
            border-radius: 4px;
            line-height: 1;
        }
        .meta-modal-close:hover { background: #f0f0f0; color: #333; }
        .meta-modal-body {
            padding: 14px 18px 18px;
            overflow-y: auto;
            flex: 1;
        }
        .meta-modal-body .control-group {
            margin-bottom: 10px;
        }
        .meta-modal-body .control-group label {
            display: block;
            font-size: 11px;
            color: #555;
            margin-bottom: 3px;
            font-weight: 600;
        }
        .meta-modal-body .control-group input,
        .meta-modal-body .control-group textarea,
        .meta-modal-body .control-group select {
            width: 100%;
            padding: 5px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            box-sizing: border-box;
        }
        .meta-modal-body .control-group textarea { resize: vertical; }
        .meta-two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .din-badge {
            display: inline-block;
            font-size: 9px;
            background: #e74c3c;
            color: #fff;
            padding: 1px 4px;
            border-radius: 3px;
            margin-left: 3px;
            vertical-align: middle;
            font-weight: 700;
        }
        .modal-timestamps {
            font-size: 10px;
            color: #aaa;
            margin-top: 6px;
        }
        .tb-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: #2c3e50;
            border: 1px solid #1a2533;
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0,0,0,.5);
            z-index: 9300;
            min-width: 210px;
            padding: 4px 0;
            margin-top: 2px;
        }
        .tb-dropdown-right { left: auto; right: 0; }
        .tb-menu-item {
            display: grid;
            grid-template-columns: 1.6em 1fr;
            align-items: center;
            gap: 0;
            width: 100%;
            background: none;
            border: none;
            color: #fff;
            padding: 7px 14px;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            text-decoration: none;
        }
        .tb-menu-item:hover { background: rgba(255,255,255,0.1); }
        .tbmi-icon { text-align: center; font-style: normal; line-height: 1; }
        .tbmi-cb { display: flex; align-items: center; gap: 5px; }
        .tb-menu-danger { color: #e74c3c; }
        .tb-menu-danger:hover { background: rgba(231,76,60,0.15); }
        .tb-menu-sep {
            height: 1px;
            background: rgba(255,255,255,0.12);
            margin: 4px 0;
        }

        /* ── Export-Auswahl-Dropdown ──────────────────────── */
        .export-select-dropdown {
            position: absolute;
            z-index: 9999;
            background: #1e232a;
            border: 1px solid #3498db;
            border-radius: 6px;
            padding: 10px;
            box-shadow: 0 4px 16px rgba(0,0,0,.5);
            color: #ecf0f1;
            min-width: 230px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .export-select-dropdown.hidden { display: none; }
        .export-select-dropdown label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 12px;
            padding: 2px 0;
        }
        .export-select-dropdown label:hover { color: #7fb3d3; }
        .export-select-dropdown .esd-sep {
            height: 1px;
            background: rgba(255,255,255,0.15);
            margin: 2px 0;
        }
        .export-select-dropdown .esd-group-header {
            font-size: 10px;
            font-weight: bold;
            color: #7fb3d3;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 6px 0 2px 0;
            border-bottom: 1px solid rgba(127,179,211,0.25);
            margin-bottom: 2px;
        }
        .export-select-dropdown .esd-group-header:first-child { padding-top: 0; }
        .export-select-dropdown button {
            background: #2c7be5;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 12px;
            width: 100%;
        }
        .export-select-dropdown button:hover { background: #1a60c8; }
        .export-select-dropdown button:disabled {
            background: #3d5166;
            cursor: not-allowed;
        }

        /* ── Kompakte Schrift/Symbol-Größen-Zeile ────────────── */
        .sb-size-row {
            display: grid;
            grid-template-columns: auto 60px auto 60px;
            align-items: center;
            gap: 4px 6px;
        }
        .sb-size-row label { font-size: 11px; color: #b0bec5; white-space: nowrap; }
        .sb-size-row input { padding: 3px 4px; font-size: 11px; }

        /* ── Symbol-Kategorie-Tabs ─────────────────────────── */
        #symbol-tabs {
            display: flex;
            flex-wrap: nowrap;
            gap: 3px;
            margin-bottom: 6px;
        }
        .sym-tab {
            background: #34495e;
            border: 1px solid #4a6278;
            border-radius: 4px;
            color: #fff;
            font-size: 13px;
            flex: 1;
            min-width: 0;
            height: 28px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sym-tab:hover { background: #3d566e; }
        .sym-tab.active {
            background: #2980b9;
            border-color: #3498db;
        }
        /* Warnzeichen: gelbes Dreieck */
        .sym-tab[data-cat="warnzeichen"] {
            background: #f0c000;
            border-color: #c8960a;
            color: #1a1a00;
        }
        .sym-tab[data-cat="warnzeichen"]:hover { background: #f5d020; }
        .sym-tab[data-cat="warnzeichen"].active  { background: #e6b800; border-color: #fff; outline: 2px solid #3498db; outline-offset: 1px; }
        /* Gebotszeichen: blauer Kreis mit weißem Rand */
        .sym-tab[data-cat="gebotszeichen"] {
            background: #0050a0;
            border: 2px solid #fff;
            border-radius: 50%;
            color: #fff;
        }
        .sym-tab[data-cat="gebotszeichen"]:hover { background: #0060c0; }
        .sym-tab[data-cat="gebotszeichen"].active { background: #0060c0; outline: 2px solid #3498db; outline-offset: 1px; }

        /* ── Gast-Modus Banner ─────────────────────────────── */
        #guest-mode-banner {
            background: #2c3e50;
            color: #ecf0f1;
            font-size: 12px;
            text-align: center;
            padding: 5px 16px;
            position: sticky;
            top: 0;
            z-index: 8000;
            border-bottom: 1px solid #e67e22;
            line-height: 1.4;
            flex-shrink: 0;
        }
        #guest-mode-banner strong { color: #e67e22; }
        body.logged-in #guest-mode-banner { display: none; }

        /* ── Offline-Banner ─────────────────────────────────── */
        #offline-banner {
            background: #fef9e7;
            color: #7d6608;
            font-size: 12px;
            text-align: center;
            padding: 5px 16px;
            position: sticky;
            top: 0;
            z-index: 8001;
            border-bottom: 2px solid #f39c12;
            line-height: 1.4;
            flex-shrink: 0;
        }
        #offline-banner strong { color: #d35400; }

        /* ── Cloud-abhängige Buttons im Offline-Modus ─────────── */
        .btn-cloud-disabled {
            opacity: .4 !important;
            pointer-events: none !important;
            cursor: not-allowed !important;
        }

        /* ── Cookie-Consent Banner ──────────────────────────── */
        #cookie-consent-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99000;
            background: #1a252f;
            color: #ecf0f1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 20px;
            font-size: 12px;
            border-top: 2px solid #e67e22;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
            flex-wrap: wrap;
        }
        #cc-text { flex: 1; min-width: 200px; line-height: 1.5; }
        #cc-text strong { color: #f39c12; }
        #cc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        #cc-accept-btn {
            background: #e67e22;
            color: #fff;
            border: none;
            padding: 6px 18px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
        }
        #cc-accept-btn:hover { background: #d35400; }
        #cc-privacy-link {
            color: #bdc3c7;
            font-size: 11px;
            text-decoration: underline;
            white-space: nowrap;
        }
        #cc-privacy-link:hover { color: #ecf0f1; }

        /* ── Haupt-Zeile (Sidebar + Canvas) ───────────────── */
        #main-row {
            flex: 1;
            display: flex;
            height: calc(100vh - 42px - 29px); /* 42px Top-Bar + 29px Gast-Banner */
            min-height: 0;
            overflow: hidden;
        }

        #sidebar {
            width: 300px;
            background: #2c3e50;
            color: white;
            padding: 20px 20px 80px;
            overflow-y: auto;
            flex-shrink: 0;
        }
        /* Gradient-Blende: verdeckt Sidebar-Scrollcontent hinter den Buttons */
        #floating-actions-left::before {
            content: '';
            position: fixed;
            bottom: 0;
            left: 0;
            width: 300px;
            height: 80px;
            background: linear-gradient(to bottom, transparent 0%, #2c3e50 55%);
            pointer-events: none;
            z-index: -1;
        }

        #sidebar h2 {
            font-size: 18px;
            margin-bottom: 15px;
            border-bottom: 2px solid #34495e;
            padding-bottom: 8px;
        }

        /* ── Sidebar Projektbibliothek-Button (Fix 4) ── */
        .sb-dashboard-btn {
            display: block;
            width: 100%;
            margin: -6px 0 8px;
            padding: 7px 10px;
            background: #1e3a5f;
            color: #90caf9;
            border: 1px solid #2a5080;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
        }
        .sb-dashboard-btn:hover { background: #2a4f7a; color: #fff; }

        /* ═══════════════════════════════════════════
           ACCORDION SIDEBAR
        ═══════════════════════════════════════════ */
        .acc-section {
            border-bottom: 1px solid #2c3e50;
        }
        .acc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 12px;
            cursor: pointer;
            user-select: none;
            font-size: 12px;
            font-weight: 700;
            color: #ecf0f1;
            background: linear-gradient(90deg, #2c3e50 0%, #243342 100%);
            letter-spacing: 0.4px;
            transition: background 0.15s;
        }
        .acc-header:hover {
            background: linear-gradient(90deg, #34495e 0%, #2c3e50 100%);
        }
        .acc-chevron {
            display: inline-block;
            transition: transform 0.25s ease;
            font-style: normal;
            font-size: 10px;
            opacity: 0.7;
        }
        .acc-section.acc-closed .acc-chevron {
            transform: rotate(-90deg);
        }
        .acc-body {
            overflow: hidden;
            max-height: 2000px;
            transition: max-height 0.3s ease, opacity 0.25s ease;
            opacity: 1;
        }
        .acc-section.acc-closed .acc-body {
            max-height: 0;
            opacity: 0;
        }
        .acc-body .control-group:last-child {
            border-bottom: none;
        }

        /* ═══════════════════════════════════════════
           FLOATING TOOLBAR (Glassmorphism)
        ═══════════════════════════════════════════ */
        #floating-toolbar {
            position: fixed;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9000;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: rgba(20, 30, 48, 0.55);
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
            border: 1px solid rgba(255,255,255,0.13);
            border-radius: 40px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 1.5px 0 rgba(255,255,255,0.08) inset;
        }
        #ftb-grip {
            width: 20px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            color: rgba(255,255,255,0.35);
            font-size: 16px;
            margin-right: 4px;
            user-select: none;
            flex-shrink: 0;
            touch-action: none;
        }
        #ftb-grip:hover { color: rgba(255,255,255,0.65); }
        .ftb-btn {
            width: 46px;
            height: 46px;
            border: none;
            border-radius: 50%;
            background: rgba(255,255,255,0.10);
            color: #ecf0f1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, transform 0.1s;
            outline: none;
        }
        .ftb-btn:hover {
            background: rgba(255,255,255,0.22);
            transform: scale(1.12);
        }
        .ftb-btn:active {
            background: rgba(255,255,255,0.08);
            transform: scale(0.95);
        }
        .ftb-btn svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
        }
        .ftb-sep {
            width: 1px;
            height: 22px;
            background: rgba(255,255,255,0.18);
            margin: 0 2px;
        }
        /* Move-Button: eingerasteter Zustand (aktiver Move-Modus) */
        .ftb-btn.ftb-toggle.active {
            background: rgba(52, 152, 219, 0.40);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.75);
            color: #5dade2;
        }
        .ftb-btn.ftb-toggle.active:hover {
            background: rgba(52, 152, 219, 0.55);
        }
        /* ═══════════════════════════════════════════
           KOMPOSITIONS-MODUS
        ═══════════════════════════════════════════ */

        /* Ghost-Layer: enthält Ghost-Images anderer Pläne – immer pointer-events:none außer im Edit-Modus */
        #comp-ghost-layer {
            position: absolute;
            top: 0; left: 0;
            pointer-events: none;
            z-index: 0;
        }
        #comp-ghost-layer.edit-mode {
            pointer-events: all;
        }
        /* Vorderer Ghost-Layer (z>0 compImages) – liegt vor #plan-image (z-index:2) */
        #comp-ghost-layer-front {
            position: absolute;
            top: 0; left: 0;
            pointer-events: none;
            z-index: 3;
        }

        /* Ghost-Bild eines anderen Plans in der normalen Ansicht */
        .comp-ghost-img {
            position: absolute;
            pointer-events: none;
            user-select: none;
            display: block;
            image-rendering: auto;
            opacity: 1;
        }

        /* Kompositions-Tile im Bearbeitungsmodus */
        .comp-tile {
            position: absolute;
            /* outline statt border: kein Layout-Effekt → imgDiv exakt so groß wie Tile
               (border+box-sizing:border-box würde content 4px kleiner machen → Versatz vs Ghost-Image) */
            outline: 2px dashed #888;
            cursor: move;
            background: rgba(255,255,255,0.04);
            /* Kein z-index – DOM-Reihenfolge bestimmt Stacking */
        }
        .comp-tile.is-active-plan {
            outline-color: #4a90d9;
            outline-width: 3px;
            cursor: default;
        }
        .comp-tile:not(.is-active-plan):hover {
            outline-color: #aaa;
        }
        .comp-tile-img {
            width: 100%;
            /* height: 100% – .comp-tile-bar ist position:absolute (kein Fluss-Effekt).
               Kein calc(100%-28px): imgDiv-Höhe = Tile-Höhe = Ghost-Image-Höhe → kein Positions-Versatz */
            height: 100%;
            overflow: hidden;
        }
        .comp-tile-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
        }
        .comp-tile-bar {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 28px;
            background: rgba(0,0,0,0.68);
            color: #fff;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 6px;
            pointer-events: all;
            box-sizing: border-box;
        }
        .comp-tile-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 6px;
        }
        .comp-tile-actions {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .comp-tile-actions button {
            background: none;
            border: 1px solid #666;
            color: #ddd;
            cursor: pointer;
            font-size: 11px;
            padding: 1px 5px;
            border-radius: 3px;
        }
        .comp-tile-actions button:hover {
            background: rgba(255,255,255,0.18);
        }
        /* Maßstab-Ruler im Tile (oben rechts) */
        .comp-scale-ruler {
            position: absolute;
            top: 4px; right: 4px;
            background: rgba(0,0,0,0.62);
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            pointer-events: all;
            cursor: ew-resize;
            user-select: none;
            white-space: nowrap;
        }
        .comp-scale-ruler:hover {
            background: rgba(40,90,180,0.75);
        }
        /* Plus-Button (Plan hinzufügen) */
        #comp-add-btn {
            position: absolute;
            bottom: 40px; right: 16px;
            cursor: pointer;
            background: #27ae60;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 36px; height: 36px;
            font-size: 22px;
            line-height: 36px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            pointer-events: all;
            z-index: 9999;
        }
        #comp-add-btn:hover {
            background: #2ecc71;
        }

        /* Radierer-Cursor */
        body.cursor-eraser,
        body.cursor-eraser * { cursor: cell !important; }

        /* DXF SVG-Overlay: Entitäten sind im Normalzustand unsichtbar */
        #dxf-svg-overlay {
            pointer-events: none;
            overflow: visible;
        }
        #dxf-svg-overlay .dxf-entity {
            fill: none;
            stroke: none;
            pointer-events: none;
        }
        /* Im Radierer-Modus: Entitäten erhalten 15px breiten unsichtbaren Hit-Bereich */
        body.cursor-eraser #dxf-svg-overlay .dxf-entity {
            stroke: rgba(0,0,0,0);
            stroke-width: 15;
            pointer-events: stroke;
            cursor: crosshair !important;
        }
        /* Hover: rote Markierung vor dem Klick */
        body.cursor-eraser #dxf-svg-overlay .dxf-entity:hover {
            stroke: rgba(220, 45, 15, 0.85);
            stroke-width: 3;
        }

        /* Center-Button: weiche Einblend-Transition */
        #ftb-center {
            transition: opacity 0.18s ease, transform 0.18s ease;
        }

        .control-group {
            margin-bottom: 25px;
        }

        .control-group label {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: bold;
        }

        .control-group select,
        .control-group input[type="file"],
        .control-group input[type="number"],
        .control-group button {
            width: 100%;
            padding: 8px;
            margin-bottom: 8px;
            border: none;
            border-radius: 4px;
            font-size: 13px;
        }

        .control-group button {
            background: #3498db;
            color: white;
            cursor: pointer;
            transition: background 0.3s;
        }

        .control-group button:hover {
            background: #2980b9;
        }

        .button-row {
            display: flex;
            gap: 8px;
        }

        .button-row button {
            flex: 1;
        }

        #symbol-library {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 10px;
            max-height: 400px;
            overflow-y: auto;
            /* Performance-Optimierung für flüssiges Scrollen */
            contain: layout style paint;
            will-change: scroll-position;
            transform: translateZ(0);  /* GPU-Beschleunigung */
        }

        .symbol-item {
            width: 70px;
            height: 70px;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 4px;
            padding: 4px;
            background: white;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Performance-Optimierung beim Scrollen */
            contain: layout style paint;
            backface-visibility: hidden;
            transform: translateZ(0);  /* GPU-Beschleunigung */
        }

        .symbol-item:hover {
            border-color: #3498db;
            transform: scale(1.05) translateZ(0);
        }

        .symbol-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            /* Browser-Optimierung für Bildrendering */
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        .symbol-item svg {
            max-width: 100%;
            max-height: 100%;
            /* GPU-Beschleunigung auch für SVG-Elemente */
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        #main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #toolbar {
            background: white;
            padding: 8px 16px;
            border-bottom: 1px solid #ddd;
            display: flex;
            gap: 12px;
            align-items: center;
        }

        #toolbar button {
            padding: 6px 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: #3498db;
            color: white;
            font-size: 12px;
        }

        #toolbar button:hover {
            background: #2980b9;
        }

        /* Icon-only Buttons (Undo/Redo) in der Toolbar */
        #toolbar .tb-icon-btn {
            padding: 5px 8px;
            background: #eee;
            color: #333;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #toolbar .tb-icon-btn:hover:not([disabled]) {
            background: #ddd;
        }

        #toolbar .tb-icon-btn svg {
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .toolbar-divider {
            width: 1px;
            height: 24px;
            background: #ddd;
        }

        #pp-title {
            font-size: 12px;
            color: #555;
        }

        #viewport {
            flex: 1;
            overflow: hidden;
            background: #e0e0e0;
            position: relative;
            cursor: default;
        }

        body.mode-master #viewport {
            background: #ffffff;
        }

        #viewport.panning {
            cursor: grab;
        }

        #world {
            transform-origin: 0 0;
            position: absolute;
        }

        #canvas-container {
            position: absolute;
            left: 40px;
            top: 40px;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            overflow: visible;   /* allow resize handles to protrude */
            z-index: 1;
        }

        #zoom-status {
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: white;
            background: rgba(0,0,0,0.55);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 11px;
            pointer-events: none;
            z-index: 9999;
            white-space: nowrap;
        }

        /* ═══════════════════════════════════════════
           NAV COMPASS WIDGET
        ═══════════════════════════════════════════ */

        #nav-compass {
            --nc-bg:       #2c3e50;
            --nc-bg-hover: #34495e;
            --nc-cross:    #1a252f;
            --nc-text:     #ffffff;
            --nc-accent:   #3498db;
            --nc-lbl-bg:   #111111;
            --nc-dim:      #bdc3c7;

            position: fixed;
            top: 120px;
            right: 18px;
            z-index: 8900;
            width: 260px;
            height: 240px;
            pointer-events: none;
            user-select: none;
            opacity: 0.7;
            transition: opacity 0.3s ease-in-out;
        }
        #nav-compass:hover { opacity: 1; }

        /* ── Kompass-Kern (4 Quadranten) ── */
        .compass-core {
            position: absolute;
            top: 20px; left: 20px;
            width: 180px; height: 180px;
            border-radius: 50%;
            background-color: var(--nc-cross);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 2px;
            border: 2px solid var(--nc-bg);
            z-index: 1;
        }
        .quadrant {
            background-color: rgba(44,62,80,0.98);
            cursor: pointer;
            pointer-events: auto;
            transition: background 0.2s;
        }
        .quadrant:hover  { background-color: var(--nc-bg-hover); }
        .quadrant:active { background-color: rgba(52,152,219,0.30); }

        /* ── Grad- und Zoom-Labels (Pills) ── */
        .nc-status-label {
            position: absolute;
            left: 110px;
            transform: translateX(-50%);
            background: var(--nc-lbl-bg);
            color: var(--nc-dim);
            padding: 2px 10px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            font-size: 10px;
            font-weight: bold;
            border: 1px solid #3d4f5f;
            z-index: 25;
            min-width: 35px;
            text-align: center;
            pointer-events: none;
        }
        .nc-pos-degree { top: 15px; }
        .nc-pos-zoom   { top: 187px; pointer-events: auto; cursor: pointer; }
        .nc-pos-zoom:hover { color: rgba(52,199,219,0.95); }

        #nc-rot-label.nc-nonzero { color: rgba(52,199,219,0.90); }

        /* ── SVG-Overlay (Himmelsrichtungen + Pfeile) ── */
        .nc-overlay-layer {
            position: absolute;
            top: 20px; left: 20px;
            width: 180px; height: 180px;
            pointer-events: none;
            z-index: 20;
        }
        .nc-cardinal {
            font-family: Arial, sans-serif;
            font-size: 13px;
            font-weight: 900;
            fill: var(--nc-text);
            pointer-events: none;
        }
        .nc-icon-path path,
        .nc-icon-path polyline,
        .nc-icon-path line {
            fill: none;
            stroke: var(--nc-text);
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .nc-north-tick {
            stroke: #e74c3c;
            stroke-width: 2.5;
            stroke-linecap: round;
            pointer-events: none;
        }

        /* ── Zentrum-Button ── */
        #nc-center-btn {
            position: absolute;
            top: 110px; left: 110px;
            transform: translate(-50%, -50%);
            width: 70px; height: 70px;
            border-radius: 50%;
            border: 2px solid #3d4f5f;
            background: var(--nc-bg);
            color: var(--nc-text);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
            outline: none;
            z-index: 10;
        }
        #nc-center-btn svg {
            width: 28px; height: 28px;
            fill: none; stroke: currentColor;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
            display: block; margin: 0;
            pointer-events: none;
        }
        #nc-center-btn:hover {
            border-color: var(--nc-accent);
            background: var(--nc-bg-hover);
        }
        #nc-center-btn:active { transform: translate(-50%, -50%) scale(0.96); }

        /* ── Satelliten-Buttons ── */
        .nc-satellite {
            position: absolute;
            width: 44px; height: 44px;
            background: var(--nc-bg);
            border: 2px solid #3d4f5f;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--nc-text);
            cursor: pointer;
            z-index: 30;
            pointer-events: auto;
            transition: border-color 0.2s, background 0.2s, transform 0.15s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .nc-satellite:hover {
            border-color: var(--nc-accent);
            background: var(--nc-bg-hover);
            transform: scale(1.1);
            z-index: 35;
        }
        .nc-satellite:active { transform: scale(0.95); }
        .nc-satellite svg {
            width: 20px; height: 20px;
            stroke: currentColor; fill: none;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
            display: block; margin: 0;
            pointer-events: none;
        }
        .nc-pos-pan    { top:  27px; left: 170px; }
        .nc-pos-center { top:  66px; left: 190px; }
        .nc-pos-scale  { top: 110px; left: 190px; }
        .nc-pos-fit    { top: 149px; left: 170px; }

        /* Pan aktiv → blaue Hervorhebung */
        #nc-pan-btn.active {
            background: rgba(52,152,219,0.45);
            border-color: rgba(52,152,219,0.75);
            color: #5dade2;
        }

        /* FTB-Buttons die im DOM bleiben aber unsichtbar sind */
        #ftb-rotate-left,
        #ftb-rotate-right,
        #ftb-zoom-in,
        #ftb-zoom-out,
        #ftb-move,
        #ftb-center { display: none !important; }

        /* ─────────────────────────────────────────── */

        #page-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Perf: Layout-Invalidierungen bleiben innerhalb dieses Containers */
            contain: layout style;
        }

        #header-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: none;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            z-index: 10;
            /* background + color werden per Layout-Typ in canvas.js gesetzt */
        }

        /* ── Blattrahmen: 4mm weißer Rand + schwarze Linie ── */
        #page-frame {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 15;  /* über header-bar (z-index: 10) */
            box-shadow:
                inset 0 0 0 4mm white,
                inset 0 0 0 calc(4mm + 1.5px) #000;
        }

        #plan-layer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 0 0;
            pointer-events: none;
            z-index: 2;
            /* Perf: transform wird per JS gesetzt → eigener GPU-Compositor-Layer.
               will-change statisch OK hier, weil #plan-layer IMMER transformiert wird. */
            will-change: transform;
        }

        #plan-layer.movable {
            pointer-events: auto;
            cursor: move;
        }
        /* Im Bewegen-Modus: plan-image fängt Klicks → bubbelt zu planLayer */
        #plan-layer.movable #plan-image {
            pointer-events: auto;
            cursor: move;
        }

        #paths-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }

        #plan-image {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            user-select: none;
            pointer-events: none;
            z-index: 2;
        }

        /* .movable wird nur auf #plan-layer gesetzt.
           plan-image ist pointer-events:none AUSSER im Bewegen-Modus
           (#plan-layer.movable #plan-image → pointer-events:auto).
           Dadurch sind Pfade normal durchklickbar, aber der Plan per Drag verschiebbar. */

        #symbols-container {
            position: relative;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 3;
            /* Perf: Layout-Invalidierungen durch Symbol-Bewegungen bleiben im Container */
            contain: layout style;
        }

        .path-element {
            position: absolute;
            background: #CDF0C8;
            cursor: move;
            pointer-events: auto;
            transform-origin: center center;
        }

        .path-element.selected {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
        }

        .symbol-element {
            position: absolute;
            cursor: move;
            pointer-events: auto;
            transform-origin: center center;
            user-select: none;
            z-index: 5; /* render above fl-area polygons (auch selected) */
        }

        .symbol-element img,
        .symbol-element svg {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
        }

        .symbol-element.selected {
            outline: 3px dashed #3498db;
            outline-offset: 2px;
        }

        /* Dashboard project cards */
        /* ── Profil-Overlay ── */
        #profile-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 10500;
            display: none;
            align-items: center; justify-content: center;
        }
        #profile-box {
            background: #fff; border-radius: 10px; padding: 36px 32px 28px;
            width: 380px; max-width: 95vw;
            box-shadow: 0 8px 32px rgba(0,0,0,0.22);
            text-align: center;
        }
        #profile-logo { font-size: 44px; margin-bottom: 10px; line-height: 1; }
        #profile-box h2 { margin: 0 0 6px; font-size: 17px; color: #2c3e50; font-weight: 700; }
        #profile-subtitle { font-size: 12px; color: #999; margin: 0 0 24px; }

        #profile-btn-login {
            width: 100%; padding: 11px 16px; margin-bottom: 8px;
            background: #e74c3c; color: #fff; border: none;
            border-radius: 6px; font-size: 14px; font-weight: 600;
            cursor: pointer; transition: background .15s;
        }
        #profile-btn-login:hover { background: #c0392b; }

        #profile-btn-register {
            width: 100%; padding: 11px 16px; margin-bottom: 4px;
            background: #fff; color: #e74c3c;
            border: 1.5px solid #e74c3c;
            border-radius: 6px; font-size: 14px; font-weight: 600;
            cursor: pointer; transition: all .15s;
        }
        #profile-btn-register:hover { background: #fdf0ef; }

        #profile-divider {
            display: flex; align-items: center; gap: 10px;
            margin: 16px 0 12px; color: #bbb; font-size: 12px;
        }
        #profile-divider::before,
        #profile-divider::after {
            content: ''; flex: 1; height: 1px; background: #e8e8e8;
        }

        #profile-btn-guest {
            width: 100%; padding: 9px 16px;
            background: #f0f0f0; color: #666;
            border: 1px solid #ddd;
            border-radius: 6px; font-size: 13px;
            cursor: pointer; transition: all .15s;
            margin-bottom: 12px;
        }
        #profile-btn-guest:hover { background: #e0e0e0; color: #444; }

        #profile-hint { font-size: 11px; color: #bbb; margin: 0; line-height: 1.5; }

        /* ── Dashboard: Sektionen & Recent Files ── */
        .db-loading { text-align: center; color: #999; padding: 40px; }
        .db-empty   { text-align: center; color: #999; padding: 16px 0; font-size: 13px; }
        .db-section { margin-bottom: 16px; }
        .db-section-title {
            font-size: 11px; font-weight: 700; color: #888;
            text-transform: uppercase; letter-spacing: 0.5px;
            padding: 0 0 6px; border-bottom: 1px solid #eee; margin-bottom: 8px;
        }
        .dashboard-project-card {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 6px;
        }
        .dashboard-project-card:hover { background: #f8f9fa; }
        .dpc-file { border-color: #d5e8f5; background: #f5faff; }
        .dpc-file:hover { background: #eaf4ff; }
        .dpc-name { font-weight: bold; font-size: 13px; }
        .dpc-meta { font-size: 11px; color: #888; margin-top: 2px; }
        .dpc-active { color: #27ae60; font-size: 10px; }
        .dpc-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .dpc-actions button {
            padding: 4px 10px; border: 1px solid #ccc; border-radius: 3px;
            background: #fff; cursor: pointer; font-size: 11px;
        }
        .dpc-open, .dpc-reopen { background: #27ae60 !important; color: #fff !important; border-color: #27ae60 !important; }
        .dpc-delete, .dpc-fhdelete { color: #e74c3c !important; border-color: #fcc !important; }
        .dpc-to-cloud { background: #eaf4ff !important; color: #2980b9 !important; border-color: #aad4f0 !important; }
        .dpc-to-cloud:hover { background: #d0eaff !important; }
        .dpc-export { color: #555 !important; }

        .dpc-badge {
            display: inline-block; padding: 1px 6px; border-radius: 3px;
            font-size: 10px; font-weight: 600; margin-right: 4px; vertical-align: middle;
        }
        .dpc-badge-cloud { background: #e8f4fd; color: #2980b9; border: 1px solid #aad4f0; }
        .dpc-badge-local { background: #f5f5f5; color: #888; border: 1px solid #ddd; }

        /* Rectangle selection */
        #rect-select {
            position: absolute;
            border: 1px dashed #3498db;
            background: rgba(52, 152, 219, 0.1);
            pointer-events: none;
            z-index: 9999;
        }

        /* Locked elements */
        [data-locked="true"] { cursor: not-allowed !important; }
        [data-locked="true"]::after {
            content: '🔒';
            position: absolute; top: -8px; right: -8px;
            font-size: 10px; background: rgba(255,255,255,0.9);
            border-radius: 50%; width: 16px; height: 16px;
            display: flex; align-items: center; justify-content: center;
            pointer-events: none; z-index: 100;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        [data-locked="true"].selected {
            outline-color: #e74c3c !important;
            outline-style: solid !important;
        }

        /* Element context menu */
        .ectx-item { padding: 6px 14px; cursor: pointer; }
        .ectx-item:hover { background: #f0f0f0; }
        .ectx-delete { color: #e74c3c; }
        .ectx-separator { border-top: 1px solid #eee; margin: 4px 0; }

        /* Context menu */
        #context-menu {
            display: none;
            position: fixed;
            z-index: 10000;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            min-width: 220px;
            padding: 0;
            font-size: 13px;
            /* overflow:hidden removed – it would clip .ctx-sub submenus */
        }

        /* ── Tab bar ── */
        .ctx-tab-bar {
            display: flex;
            border-bottom: 1px solid #dde;
            background: #f5f7fa;
            border-radius: 6px 6px 0 0; /* clip within the menu's own rounded corners */
            overflow: hidden;
        }
        .ctx-tab {
            flex: 1;
            padding: 7px 4px;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            color: #666;
            cursor: pointer;
            user-select: none;
            border-bottom: 2px solid transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .ctx-tab:hover { color: #2c7be5; background: #edf2ff; }
        .ctx-tab.ctx-tab-active {
            color: #2c7be5;
            border-bottom-color: #2c7be5;
            background: #fff;
        }

        /* ── Tab panels ── */
        .ctx-panel { padding: 4px 0; }

        .ctx-item {
            padding: 7px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ctx-item:hover { background: #e8f4fd; }
        .ctx-separator { height: 1px; background: #e0e0e0; margin: 3px 0; }
        .ctx-submenu-label { font-weight: bold; font-size: 11px; color: #888; padding: 5px 14px 2px; text-transform: uppercase; letter-spacing: 0.5px; }
        .ctx-sub { display: none; position: absolute; left: 100%; top: 0; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 180px; padding: 4px 0; max-height: 320px; overflow-y: auto; }
        .ctx-has-sub { position: relative; }
        .ctx-has-sub:hover > .ctx-sub { display: block; }
        .ctx-has-sub::after { content: '▸'; position: absolute; right: 10px; color: #aaa; }
        /* Untermenü nach links öffnen wenn rechts kein Platz */
        .ctx-flip .ctx-sub { left: auto; right: 100%; }
        .ctx-flip .ctx-has-sub::after { content: '◂'; left: 10px; right: auto; }
        .ctx-icon { width: 20px; height: 20px; flex-shrink: 0; }

        #lines-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: visible;
        }

        #lines-svg line[data-linestyle="dashed"] {
            stroke-dasharray: 5,5;
        }
        #lines-svg line[data-linestyle="dotted"] {
            stroke-dasharray: 1,4;
            stroke-linecap: round;
        }

        .endpoint-element {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            cursor: move;
            pointer-events: auto;
            transform-origin: center center;
            z-index: 4;
        }

        .endpoint-element.selected {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
        }

        /* ════ FEUERLÖSCHER – BADGE (auf dem Plan) ══════════════════════ */
        .fl-badge {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(160,0,28,0.88);
            color: #fff;
            font-size: 9px;
            font-family: sans-serif;
            font-weight: bold;
            white-space: nowrap;
            padding: 1px 4px;
            border-radius: 3px;
            pointer-events: none;
            z-index: 5;
            margin-top: 2px;
        }
        .fl-badge.fl-overdue {
            background: #e74c3c;
            box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e74c3c;
        }
        .fl-bez-label {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.72);
            color: #fff;
            font-size: 9px;
            font-family: sans-serif;
            white-space: nowrap;
            padding: 1px 5px;
            border-radius: 3px;
            pointer-events: none;
            z-index: 4;
            margin-top: 16px;
        }

        /* ════ MAßSTAB-ELEMENT (auf dem Blatt) ══════════════════════════ */
        .massstab-element {
            position: absolute;
            cursor: move;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 6px;
            font-family: sans-serif;
            font-size: 10px;
            color: #000;
            user-select: none;
            z-index: 6;
            box-sizing: border-box;
            background: rgba(255,255,255,0.88);
            border-radius: 3px;
            border: 1px solid rgba(0,0,0,0.25);
        }
        .massstab-element.selected { outline: 2px dashed #3498db; outline-offset: 2px; }
        .msb-text  { white-space: nowrap; font-size: 9px; color: #444; }
        .msb-bar   {
            height: 8px;
            background: #fff;
            border: 2px solid #000;
            position: relative;
            flex-shrink: 0;
        }
        .msb-bar::before, .msb-bar::after {
            content: '';
            position: absolute;
            top: -3px;
            width: 2px;
            height: 14px;
            background: #000;
        }
        .msb-bar::before { left: -2px; }
        .msb-bar::after  { right: -2px; }
        .msb-length { white-space: nowrap; font-size: 9px; font-weight: bold; }

        /* ════ REVISIONSBLOCK (auf dem Blatt) ════════════════════════════ */
        .revisionsblock-element {
            position: absolute;
            cursor: move;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #fff;
            border: 1px solid #000;
            box-sizing: border-box;
            z-index: 6;
            pointer-events: auto;
        }
        .revisionsblock-element.selected { outline: 2px dashed #3498db; outline-offset: 2px; }
        .rb-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            border-bottom: 1px solid #ccc;
        }
        .rb-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .rb-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 2px 4px;
            overflow: hidden;
        }
        .rb-row {
            display: flex;
            gap: 4px;
            font-size: 8px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
        }
        .rb-label {
            font-weight: bold;
            color: #444;
            flex-shrink: 0;
        }

        /* ════ LEGENDE ANGEPINNT (Seitenraum-Element) ═══════════════════ */
        .legend-pin-element {
            position: absolute;
            z-index: 6;
            pointer-events: auto;
            box-sizing: border-box;
            cursor: move;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .legend-pin-element.selected { outline: 2px dashed #3498db; outline-offset: 2px; }

        /* ════ KONFORMITÄTSCHECKLISTE ════════════════════════════════════ */
        .cl-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            border-bottom: 1px solid #eee;
            font-size: 12px;
        }
        .cl-row:last-child { border-bottom: none; }
        .cl-icon { font-size: 16px; flex-shrink: 0; }
        .cl-label { flex: 1; }

        /* ════ FEUERLÖSCHER – EIGENSCHAFTEN-PANEL ════════════════════════ */
        .fl-header {
            font-weight: bold;
            font-size: 12px;
            color: #a0001c;
            padding: 6px 10px 2px;
            border-bottom: 2px solid #a0001c;
            margin-bottom: 4px;
        }
        .fl-tabs {
            display: flex;
            gap: 2px;
            padding: 4px 6px 0;
        }
        .fl-tab {
            flex: 1;
            padding: 4px 2px;
            font-size: 10px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            color: #555;
        }
        .fl-tab.active {
            background: #fff;
            color: #a0001c;
            font-weight: bold;
            border-color: #a0001c;
        }
        .fl-panel {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 0 0 4px 4px;
            padding: 6px 8px;
            margin: 0 6px;
        }
        .fl-row {
            display: flex;
            flex-direction: column;
            margin-bottom: 6px;
        }
        .fl-row-hl {
            background: #fff8e1;
            padding: 4px 6px;
            border-radius: 4px;
            border: 1px solid #f0c040;
        }
        .fl-lbl {
            font-size: 10px;
            font-weight: bold;
            color: #666;
            margin-bottom: 2px;
        }
        .fl-input {
            width: 100%;
            box-sizing: border-box;
            padding: 3px 6px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 11px;
        }
        .fl-input.fl-short { width: 60px; }
        .fl-ta { resize: vertical; font-family: sans-serif; }
        .fl-inline {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        .fl-inline .fl-input { flex: 1; }
        .fl-btn-s {
            flex-shrink: 0;
            padding: 3px 7px;
            font-size: 10px;
            background: #3498db;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .fl-btn-s:hover { background: #2176ae; }
        .fl-check-group {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .fl-check {
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 2px;
        }
        .fl-unit {
            font-size: 10px;
            color: #888;
            white-space: nowrap;
        }
        .fl-sep {
            height: 1px;
            background: #e0e0e0;
            margin: 8px 6px 6px;
        }

        /* ── Standort-Element ──────────────────────────────────────── */
        .standort-element {
            position: absolute;
            width: 0;
            height: 0;
            overflow: visible;
            pointer-events: none;
        }
        .standort-element.selected .standort-dot {
            outline: 2px dashed #3498db;
            outline-offset: 3px;
        }
        .standort-element.selected .standort-label {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
        }
        .standort-dot {
            position: absolute;
            border-radius: 50%;
            cursor: move;
            pointer-events: auto;
        }
        .standort-label {
            position: absolute;
            border-radius: 3px;
            cursor: move;
            pointer-events: auto;
            user-select: none;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-family: sans-serif;
            transform-origin: center center;
        }

        .textbox-element {
            position: absolute;
            background: white;
            cursor: move;
            z-index: 5;
            padding: 8px;
            font-size: 14px;
            overflow: hidden;
            word-wrap: break-word;
        }

        .textbox-element.selected {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
            overflow: visible;
        }

        .textbox-white {
            border: 2px solid #ffffff !important;
        }

        .textbox-white:hover {
            outline: 1px dashed #bbb;
            outline-offset: 0;
        }

        .plan-textbox-element {
            position: absolute;
            background: transparent;
            cursor: move;
            pointer-events: auto;
            padding: 4px;
            font-size: 14px;
            color: #000;
            overflow: hidden;
            word-wrap: break-word;
            z-index: 5;
            border: 1px dashed #999;
        }

        .plan-textbox-element.selected {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
            overflow: visible;
        }

        /* Textbox im Bearbeitungsmodus (Doppelklick aktiviert) */
        .textbox-editing {
            cursor: text !important;
            outline: 2px dashed #3498db !important;
            outline-offset: 2px !important;
        }

        /* Formatting toolbar inside properties */
        .format-toolbar {
            display: flex;
            gap: 4px;
            margin-top: 4px;
        }

        .format-toolbar button {
            flex: 1;
            padding: 4px 6px;
            font-size: 13px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background: #f0f0f0;
            color: #333;
            cursor: pointer;
            min-width: 0;
        }

        .format-toolbar button:hover {
            background: #ddd;
        }

        .resize-handle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #3498db;
            border: 2px solid white;
            border-radius: 50%;
            z-index: 10;
        }

        .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
        .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
        .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
        .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
        .resize-handle.n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
        .resize-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
        .resize-handle.e { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
        .resize-handle.w { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }

        #warning-message {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: #e74c3c;
            color: white;
            padding: 12px 20px;
            border-radius: 4px;
            display: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            z-index: 10000;
        }

        .view-toggle {
            background: #27ae60 !important;
            font-weight: bold;
        }

        .view-toggle.print-view {
            background: #e67e22 !important;
        }

        /* ════ LEGENDE ════ */
        /* Styled like a plan legend box: gray border, light background, clean typography */
        #legend-panel {
            position: fixed;
            top: 80px;
            right: 20px;
            width: 230px;
            min-width: 160px;
            min-height: 80px;
            max-height: 80vh;
            background: #ffffff;           /* overridden by legendFormatStyle.bgColor */
            border: 1.5px solid #999999;   /* overridden by legendFormatStyle.borderColor */
            border-radius: 4px;
            box-shadow: 0 3px 14px rgba(0,0,0,0.22);
            font-size: 11px;
            font-family: sans-serif;
            z-index: 2000;
            overflow: auto;
            resize: both;
            user-select: none;
        }
        #legend-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            background: #f0f0f0;           /* slightly darker than body */
            cursor: grab;
            font-weight: bold;
            font-size: 12px;
            border-bottom: 1px solid #ccc;
        }
        #legend-title { color: #222; }
        #legend-header:active { cursor: grabbing; }
        #legend-header-btns { display: flex; gap: 4px; }
        #legend-header-btns button {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 12px;
            padding: 0 3px;
            line-height: 1;
        }
        #legend-header-btns button:hover { color: #222; }
        #legend-body {
            overflow-y: auto;
            max-height: calc(70vh - 34px);
            padding: 4px 2px;
        }

        /* ── Symbol table ── */
        .legend-table {
            display: block;
            width: 100%;
        }
        .legend-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .legend-icon-cell {
            flex-shrink: 0;
            width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .legend-sym-name {
            flex: 1;
            display: block;
            font-size: 11px;         /* overridden by legendFormatStyle */
            color: #222;             /* overridden by legendFormatStyle */
            line-height: 1.35;
            word-break: break-word;
        }
        .legend-row.sym-hidden .legend-icon-cell { opacity: 0.3; }
        .legend-row.sym-hidden .legend-sym-name  {
            opacity: 0.4;
            text-decoration: line-through;
        }

        /* Empty-state message */
        .legend-empty-msg {
            padding: 12px 10px;
            font-size: 11px;
            color: #888;
            text-align: center;
            font-style: italic;
        }

        /* Formatting controls bar */
        .legend-format-section {
            border-top: 1px solid rgba(0,0,0,0.10);
        }

        /* Hide symbol elements toggled off via legend */
        .symbol-element.legend-hidden { display: none !important; }

        /* State 1: Symbol auf 2mm-Punkt reduziert – Inhalt versteckt, DOM-Dot sichtbar */
        .symbol-element.legend-minimized > :not(.legend-dot) { visibility: hidden !important; }
        .legend-dot {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10;
        }

        #scale-bar {
            position: absolute;
            bottom: 40px;
            right: 30px;
            display: none;
            flex-direction: column;
            align-items: center;
            cursor: grab;
            user-select: none;
            z-index: 500;
            padding: 6px 10px;
        }
        #scale-bar:active { cursor: grabbing; }

        #scale-bar .sb-label {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            text-shadow:
                1px  1px 0 #000,
               -1px  1px 0 #000,
                1px -1px 0 #000,
               -1px -1px 0 #000,
                0    2px 3px rgba(0,0,0,0.7);
            letter-spacing: 0.02em;
            white-space: nowrap;
            line-height: 1.4;
        }
        .scale-bar-line {
            height: 8px;
            background: white;
            border: 2px solid black;
            border-top: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.4);
            margin: 2px 0;
            position: relative;
        }
        .scale-bar-line::before,
        .scale-bar-line::after {
            content: '';
            position: absolute;
            top: -6px;
            width: 2px;
            height: 14px;
            background: black;
        }
        .scale-bar-line::before { left: -2px; }
        .scale-bar-line::after  { right: -2px; }

        #legend-container {
            position: absolute;
            top: 100px;
            left: 20px;
            background: white;
            border: 2px solid #333;
            padding: 12px;
            min-width: 150px;
            font-size: 12px;
            cursor: move;
            z-index: 100;
        }

        #legend-container h3 {
            font-size: 14px;
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid #333;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin: 6px 0;
            gap: 8px;
        }

        .legend-item img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        #minimap-container {
            position: absolute;
            top: 20px;
            right: 20px;
            background: white;
            border: 2px solid #333;
            padding: 8px;
            cursor: move;
            z-index: 100;
        }

        #minimap-canvas {
            display: block;
            border: 1px solid #999;
        }

        #properties-panel {
            position: fixed;
            top: 80px;
            right: 20px;
            background: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.5);
            display: none;
            z-index: 9200;
            min-width: 220px;
            max-width: 300px;
        }

        #pp-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #1a2533;
            gap: 8px;
            cursor: move;
            user-select: none;
        }

        #pp-title {
            font-size: 13px;
            font-weight: 600;
            color: #ecf0f1;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #pp-close {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border: none;
            border-radius: 4px;
            background: transparent;
            color: #b0bec5;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        #pp-close:hover {
            background: #3d5166;
            color: #ecf0f1;
        }

        /* Disketten-Speicher-Indikator */
        .save-indicator { background:none; border:none; cursor:pointer; padding:4px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#999; opacity:0.5; transition:color 0.3s, opacity 0.3s; }
        .save-indicator:hover { opacity:1; background:rgba(0,0,0,0.06); }
        .save-indicator--dirty    { color:#f39c12; opacity:1; animation:save-pulse 2s ease-in-out infinite; }
        .save-indicator--saving   { color:#aaa; opacity:1; cursor:default; }
        .save-indicator--saved    { color:#27ae60; opacity:1; }
        .save-indicator--saved-dim{ color:#27ae60; opacity:0.4; }
        .save-indicator--offline  { color:#e74c3c; opacity:1; cursor:default; }
        .save-indicator--quota    { color:#e67e22; opacity:1; cursor:default; animation:save-pulse 1.5s ease-in-out infinite; }
        @keyframes save-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

        /* Logout-Bestätigungs-Dialog */
        #auth-logout-confirm { width:100%; margin-top:8px; padding:12px; background:#fdf6e3; border:1px solid #f0d080; border-radius:6px; font-size:12px; color:#555; box-sizing:border-box; }
        #auth-logout-confirm small { color:#999; }
        #auth-logout-unsaved-warn { background:#fde8e8; border:1px solid #f0a0a0; border-radius:4px; padding:8px 10px; margin:8px 0; font-size:11px; color:#c0392b; }
        #auth-logout-unsaved-list { margin:4px 0 0 16px; padding:0; font-size:11px; }
        .auth-logout-confirm__actions { display:flex; gap:8px; margin-top:10px; }
        .auth-logout-confirm__actions button { flex:1; font-size:12px; }

        .property-row {
            margin: 10px 0;
        }

        .property-row label {
            display: block;
            font-size: 12px;
            margin-bottom: 4px;
            font-weight: bold;
            color: #b0bec5;
        }

        .property-row input,
        .property-row select,
        .property-row textarea {
            width: 100%;
            padding: 6px;
            border: 1px solid #3d5166;
            border-radius: 4px;
            font-size: 12px;
            background: #1e2d3d;
            color: #ecf0f1;
        }

        .property-row button {
            width: 100%;
            padding: 6px;
            border: none;
            border-radius: 4px;
            background: #3498db;
            color: white;
            cursor: pointer;
            margin-top: 4px;
        }

        /* ── Rotation Control Widget ────────────────────────────── */
        .rotation-widget {
            display: flex;
            gap: 0;
            border-radius: 4px;
            border: 1px solid #555;
            overflow: hidden;
            background: #2c3e50;
            height: 28px;
            align-items: stretch;
            margin: 4px 0;
        }

        .rot-btn {
            flex: 1;
            padding: 4px 6px;
            font-size: 11px;
            font-weight: 500;
            border: none;
            border-right: 1px solid #555;
            background: #34495e;
            color: #ecf0f1;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .rot-btn:last-of-type {
            border-right: none;
        }

        .rot-btn:hover {
            background: #3498db;
            color: #fff;
        }

        .rot-btn-reset {
            background: #2c3e50;
            font-weight: bold;
        }

        .rot-btn-reset:hover {
            background: #27ae60;
            color: #fff;
        }

        .rot-display {
            font-size: 11px;
            font-weight: 500;
            color: #3498db;
            padding: 0 4px;
            display: flex;
            align-items: center;
            min-width: 50px;
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            background-color: #555;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 10002;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 11px;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* ── Master / Layout System ──────────────────────────────────── */

        .layout-card {
            background: #34495e;
            border-radius: 5px;
            padding: 6px 8px;
            margin-bottom: 5px;
            display: flex;
            align-items: flex-start;
            gap: 6px;
            cursor: pointer;
            transition: background 0.15s;
            border: 2px solid transparent;
        }
        .layout-card:hover { background: #3d566e; }
        .layout-card.active { border-color: white; background: #2c3e50; }
        .layout-card[data-type="flucht"].active        { border-color: #2ecc71; }
        .layout-card[data-type="feuerloescher"].active { border-color: #e74c3c; }
        .layout-card[data-type="feuerwehr"].active     { border-color: #3498db; }
        .layout-card[data-type="laufkarte"].active     { border-color: #e67e22; }

        .layout-card-icon {
            font-size: 15px;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .layout-card-info {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .layout-card-name {
            font-size: 11px;
            font-weight: bold;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }
        .layout-card-meta { font-size: 9px; color: #95a5a6; }
        .layout-card-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .layout-card-del {
            background: transparent;
            border: 1px solid #7f8c8d;
            border-radius: 3px;
            color: #95a5a6;
            padding: 2px 6px;
            font-size: 11px;
            cursor: pointer;
            line-height: 1;
            flex-shrink: 0;
        }
        .layout-card-del:hover { background: #c0392b; border-color: #c0392b; color: white; }
        .layout-card-settings {
            background: transparent;
            border: 1px solid #7f8c8d;
            border-radius: 3px;
            color: #bdc3c7;
            cursor: pointer;
            font-size: 10px;
            padding: 1px 3px;
            line-height: 1;
            flex-shrink: 0;
        }
        .layout-card-settings:hover { background: #3498db; border-color: #3498db; color: white; }

        /* Master card */
        .layout-card-master {
            background: #1a252f;
        }
        .layout-card-master.active { border-color: #95a5a6; }

        /* Drag-and-Drop Sortierung */
        .layout-card[draggable="true"] { cursor: grab; }
        .layout-card[draggable="true"]:active { cursor: grabbing; }
        .layout-card.dragging { opacity: 0.4; }
        .layout-card.drag-over {
            border-color: #3498db !important;
            box-shadow: 0 0 0 2px rgba(52,152,219,0.4);
        }

        #add-layout-form { background: #34495e; border-radius: 5px; padding: 10px; margin-top: 6px; display: none; }
        #add-layout-form select, #add-layout-form input {
            width: 100%; padding: 5px; border: none; border-radius: 3px; font-size: 12px;
            margin-bottom: 5px; background: #2c3e50; color: white;
        }
        #add-layout-form button { width: 100%; padding: 6px; border: none; border-radius: 3px; background: #27ae60; color: white; font-size: 12px; cursor: pointer; }

        .visibility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
        .visibility-chip { display: flex; align-items: center; gap: 4px; font-size: 11px; background: #f0f0f0; border-radius: 3px; padding: 3px 6px; cursor: pointer; }
        .visibility-chip input { margin: 0; cursor: pointer; }

        #view-mode-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 12px;
            height: 36px;
            background: #2c3e50;
            color: white;
            font-size: 13px;
            font-weight: bold;
            border-bottom: 3px solid #95a5a6;
            flex-shrink: 0;
        }
        #view-mode-banner.mode-flucht        { border-color: #2ecc71; background: #1a3a26; }
        #view-mode-banner.mode-feuerloescher { border-color: #a0001c; background: #a0001c; color: #ffffff; }
        #view-mode-banner.mode-feuerloescher .banner-format { color: rgba(255,255,255,0.75); }
        #view-mode-banner.mode-feuerwehr     { border-color: #3498db; background: #1a2a3a; }
        #view-mode-banner.mode-laufkarte     { border-color: #e67e22; background: #3a2a1a; }
        #view-mode-banner.mode-flexibel      { border-color: #7f8c8d; background: #7f8c8d; color: #fff; }
        #view-mode-banner .banner-format { font-size: 10px; color: #bdc3c7; font-weight: normal; }

        body.mode-master #canvas-container {
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
        }
        body.mode-master #header-bar { display: none !important; }

        /* ── Kalibrierung Floating Panel ────────────────────────────── */
        #calib-float-panel {
            position: fixed;
            top: 120px;
            right: 288px;   /* links neben nav-compass (18px + 260px + 10px) */
            width: 220px;
            background: #1a2533;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.45);
            z-index: 9200;
            display: none;
            overflow: hidden;
        }
        #calib-float-panel.cfp-open { display: block; }

        .cfp-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 12px 8px;
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            font-size: 12px;
            font-weight: 600;
            color: #ecf0f1;
            cursor: move;
            user-select: none;
        }
        #calib-float-close {
            background: none;
            border: none;
            color: #95a5a6;
            cursor: pointer;
            font-size: 13px;
            padding: 0 2px;
            line-height: 1;
        }
        #calib-float-close:hover { color: #e74c3c; }

        #calib-float-panel > #btn-calib-toggle {
            display: block;
            width: calc(100% - 20px);
            margin: 10px;
            padding: 7px;
            border: none;
            border-radius: 4px;
            background: #e67e22;
            color: white;
            font-size: 12px;
            cursor: pointer;
            text-align: center;
        }
        #calib-float-panel > #btn-calib-toggle:hover { background: #d35400; }

        .cfp-hint {
            font-size: 10px;
            color: #95a5a6;
            margin-bottom: 6px;
        }

        /* btn-calib-hide-lines: Inline-Style überschreiben */
        #btn-calib-hide-lines {
            display: none;
            width: 100%;
            margin-top: 6px;
            padding: 5px;
            border: none;
            border-radius: 4px;
            background: #34495e;
            color: #bdc3c7;
            font-size: 11px;
            cursor: pointer;
        }

        /* ── Calibration Loupe (magnifier near cursor) ─────────────── */
        #calib-loupe {
            position: fixed;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 3px solid #f39c12;
            box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.2);
            overflow: hidden;
            pointer-events: none;
            display: none;
            z-index: 9900;
            background: #1a252f;
        }
        #calib-loupe canvas {
            position: absolute;
            top: 0; left: 0;
        }
        /* Crosshair in centre of loupe */
        #calib-loupe::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 14px; height: 14px;
            border-radius: 50%;
            border: 2px solid #f39c12;
            box-shadow: 0 0 0 4px rgba(243,156,18,0.25);
            pointer-events: none;
        }
        /* Dot at exact center */
        #calib-loupe-dot {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #e74c3c;
            z-index: 1;
            pointer-events: none;
        }
        body.calibrating #calib-loupe { display: block; }
        /* Calibration overlay: hidden in layout mode (only meaningful in master) */
        body.mode-layout #calib-overlay { display: none !important; }
        /* Toggle finished measurement lines off via sidebar */
        #calib-overlay.lines-hidden .calib-finished { display: none; }

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

        #calib-panel {
            background: #1a252f;
            border-radius: 6px;
            padding: 10px;
            margin-top: 6px;
            display: none;
        }
        #calib-panel.active { display: block; }

        .calib-line-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: #bdc3c7;
            padding: 3px 0;
            border-bottom: 1px solid #2c3e50;
        }
        .calib-line-item:last-child { border-bottom: none; }
        .calib-line-px { flex: 1; }
        .calib-line-del {
            background: none; border: none; color: #e74c3c;
            cursor: pointer; font-size: 13px; padding: 0 2px;
        }

        #calib-inputs {
            display: flex;
            gap: 5px;
            margin-top: 8px;
            align-items: center;
        }
        #calib-real-val {
            flex: 1;
            padding: 5px;
            border-radius: 4px;
            border: none;
            font-size: 12px;
            background: #2c3e50;
            color: white;
            min-width: 0;
        }
        #calib-unit {
            padding: 5px;
            border-radius: 4px;
            border: none;
            font-size: 12px;
            background: #2c3e50;
            color: white;
            width: 55px;
        }
        #calib-apply {
            width: 100%;
            padding: 6px;
            border: none;
            border-radius: 4px;
            background: #27ae60;
            color: white;
            font-size: 12px;
            cursor: pointer;
            margin-top: 6px;
        }
        #calib-apply:disabled { background: #555; cursor: default; }
        #calib-result {
            font-size: 11px;
            color: #2ecc71;
            margin-top: 6px;
            min-height: 14px;
        }
        #calib-result.error { color: #e74c3c; }
        body.mode-layout #canvas-container { box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; }

        /* ═══════════════════════════════════════════
           PROJECT PANEL
        ═══════════════════════════════════════════ */
        .project-section-header {
            display: flex; align-items: center; justify-content: space-between;
            cursor: pointer; user-select: none; padding: 4px 0;
        }
        .project-section-header span { font-size: 11px; color: #95a5a6; }
        .project-section-header .chevron { transition: transform 0.2s; display: inline-block; font-size: 10px; }
        .project-section-header.collapsed .chevron { transform: rotate(-90deg); }
        .project-section-body.collapsed { display: none; }

        .project-field-group { margin-bottom: 6px; }
        .project-field-group label {
            font-size: 10px; color: #95a5a6; text-transform: uppercase;
            letter-spacing: 0.5px; display: block; margin-bottom: 2px;
        }
        .project-field-group input, .project-field-group textarea {
            width: 100%; box-sizing: border-box; padding: 4px 6px;
            background: #2c3e50; border: 1px solid #3d5166; border-radius: 3px;
            color: #ecf0f1; font-size: 12px; resize: none;
        }
        .project-field-group input:focus, .project-field-group textarea:focus {
            outline: none; border-color: #3498db;
        }
        .project-field-row { display: flex; gap: 4px; }
        .project-field-row .project-field-group { flex: 1; }

        #masterplan-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
        .mp-card {
            background: #2c3e50; border-radius: 6px; padding: 0;
            cursor: pointer; border: 2px solid transparent;
            display: flex; flex-direction: column;
            transition: border-color 0.15s; overflow: hidden;
            margin-bottom: 6px;
        }
        .mp-card:hover { border-color: #3498db; }
        .mp-card.active { border-color: #27ae60; background: #1e3a2e; }
        .mp-card:not(.active):hover .mp-card-header { background: #34495e; }

        /* Drag-and-Drop Sortierung Hauptpläne */
        .mp-card[draggable="true"] { cursor: grab; }
        .mp-card[draggable="true"]:active { cursor: grabbing; }
        .mp-card.dragging { opacity: 0.4; }
        .mp-card.drag-over {
            border-color: #3498db !important;
            box-shadow: 0 0 0 2px rgba(52,152,219,0.4);
        }

        /* Thumbnail strip */
        .mp-card-thumb {
            width: 100%; height: 64px;
            background: #1a252f;
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden; flex-shrink: 0;
        }
        .mp-card-thumb img {
            max-width: 100%; max-height: 100%; object-fit: contain;
        }
        .mp-card-thumb-placeholder {
            display: flex; flex-direction: column; align-items: center;
            gap: 3px; color: #4a6278; font-size: 10px; text-align: center;
            padding: 4px;
        }
        .mp-card-thumb-placeholder span { font-size: 22px; line-height: 1; }
        /* Upload overlay on thumb */
        .mp-card-upload-overlay {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(52,152,219,0.85); color: #fff;
            font-size: 11px; font-weight: 600; opacity: 0;
            transition: opacity 0.15s; cursor: pointer; gap: 4px;
        }
        .mp-card.active .mp-card-thumb:hover .mp-card-upload-overlay { opacity: 1; }
        .mp-card-upload-overlay.has-image {
            align-items: flex-end;
            padding-bottom: 4px;
            background: rgba(0,0,0,0.55);
            font-size: 10px;
        }
        .mp-card.active .mp-card-thumb:hover .mp-card-upload-overlay.has-image { opacity: 1; }
        .mp-card-upload-input { display: none; }

        /* Header row */
        .mp-card-header {
            display: flex; align-items: center; gap: 6px;
            padding: 6px 8px; min-width: 0;
        }
        .mp-card-body { flex: 1; min-width: 0; overflow: hidden; }
        .mp-card-name { font-size: 12px; font-weight: bold; color: #ecf0f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mp-card-meta { font-size: 10px; color: #95a5a6; margin-top: 1px; }
        .mp-card-actions { display: flex; gap: 3px; flex-shrink: 0; }
        .mp-card-actions button {
            background: none; border: 1px solid #3d5166; border-radius: 3px;
            color: #95a5a6; font-size: 11px; padding: 2px 5px; cursor: pointer; line-height: 1;
        }
        .mp-card-actions button:hover { background: #3d5166; color: #ecf0f1; }
        .mp-card-actions button.del:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

        /* ── Kompakt-Karte (inaktive Masterpläne) ─────────────────── */
        .mp-card--compact {
            background: #253545;
            border: 1px solid #3d5166;
            border-radius: 6px;
            cursor: pointer;
            margin-bottom: 4px;
            transition: border-color 0.15s;
        }
        .mp-card--compact:hover { border-color: #3498db; }
        .mp-card-compact-row {
            display: flex; align-items: center;
            justify-content: space-between;
            padding: 8px 10px; gap: 8px;
        }
        .mp-card-compact-name {
            font-size: 12px; color: #ecf0f1; flex: 1;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        /* ── Layout-Sub-Sektion (Akkordeon unter aktivem Plan) ────── */
        .mp-layout-sub {
            margin: -2px 0 8px 14px;
            border-left: 2px solid #3d5166;
            padding-left: 8px;
            display: flex; flex-direction: column; gap: 3px;
        }
        .mp-layout-hist-btn {
            background: none; border: none; cursor: pointer;
            color: #7fb3d3; font-size: 11px;
            align-self: flex-end; padding: 2px 4px;
        }
        .mp-layout-hist-btn:hover { color: #3498db; }
        .mp-layout-add-toggle {
            width: 100%; padding: 5px; margin-top: 2px;
            background: #6c3483; border: none; border-radius: 4px;
            color: white; font-size: 11px; cursor: pointer;
        }
        .mp-layout-add-toggle:hover { background: #7d3c98; }
        .mp-layout-add-form {
            display: flex; flex-direction: column; gap: 4px;
            padding: 6px; background: #1e2d3d;
            border-radius: 4px;
        }
        .mp-layout-add-form.hidden { display: none; }
        .mp-layout-add-form select,
        .mp-layout-add-form input {
            font-size: 11px; padding: 4px;
            background: #2c3e50; color: #ecf0f1;
            border: 1px solid #3d5166; border-radius: 3px;
        }
        .mp-layout-add-form button {
            background: #27ae60; border: none; border-radius: 4px;
            color: white; padding: 5px; cursor: pointer; font-size: 11px;
            margin-top: 2px;
        }
        .mp-layout-add-form button:hover { background: #2ecc71; }

        #plan-meta-section .pmr {
            display: flex; gap: 4px; align-items: center; margin-bottom: 4px;
        }
        #plan-meta-section .pmr label {
            font-size: 10px; color: #95a5a6; width: 86px; flex-shrink: 0;
        }
        #plan-meta-section .pmr input {
            flex: 1; padding: 3px 5px; background: #2c3e50; border: 1px solid #3d5166;
            border-radius: 3px; color: #ecf0f1; font-size: 12px;
        }
        #plan-meta-section .pmr input:focus { outline: none; border-color: #3498db; }

        /* ── Frame Handle (drag bar above the paper) ── */
        #frame-handle {
            position: absolute;
            top: -28px;
            left: 0;
            right: 0;
            height: 26px;
            background: #2c3e50;
            border-radius: 4px 4px 0 0;
            display: none;            /* shown only in layout mode */
            align-items: center;
            padding: 0 10px;
            gap: 8px;
            cursor: grab;
            user-select: none;
            z-index: 9000;
        }
        #frame-handle:active { cursor: grabbing; }
        #frame-handle .handle-icon { font-size: 13px; }
        #frame-handle .handle-label {
            font-size: 11px;
            font-weight: bold;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
        #frame-handle .handle-hint {
            font-size: 10px;
            color: #95a5a6;
            flex-shrink: 0;
        }
        body.mode-layout #frame-handle { display: flex; }
        body.mode-master #frame-handle  { display: none !important; }
        .frame-dragging #canvas-container { box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important; outline: 2px dashed #3498db; }

        /* ════ FL-FLÄCHEN WERKZEUG ════ */

        /* Drawing mode cursor */
        body.fl-area-drawing #viewport,
        body.fl-area-drawing #viewport * { cursor: crosshair !important; }
        body.fl-area-drawing .laufweg-element,
        body.fl-area-drawing .laufweg-element * { pointer-events: none !important; }
        body.fl-area-drawing .fl-area-element,
        body.fl-area-drawing .fl-area-element * { pointer-events: none !important; }
        body.fl-vertex-dragging * { cursor: grabbing !important; }
        body.fl-label-dragging  * { cursor: move    !important; }

        /* Area element – transparent overlay, rendered below symbols */
        .fl-area-element { pointer-events: none; z-index: 0; }
        .fl-area-element svg { pointer-events: none; }
        /* Individual polygon pointer-events are set in JS:
           .fl-poly-fill  → pointer-events:fill  (click target for the whole area)
           .fl-poly-stroke → pointer-events:none  (visual border, scale-compensated)
           Symbols inside remain clickable because .symbol-element has z-index:1  */
        .fl-area-element polygon { pointer-events: none; }

        /* Selected area: glow effect + bring to front for vertex editing */
        .fl-area-element.selected { z-index: 2; }
        .fl-area-element.selected svg {
            filter: drop-shadow(0 0 5px rgba(255,107,90,0.65));
        }

        /* Vertex handles – standardmäßig ausgeblendet, sichtbar bei Hover/Auswahl */
        .fl-vertex-handle {
            cursor: grab;
            transition: r 0.08s, opacity 0.1s;
            opacity: 0;
            pointer-events: none !important;
        }
        .fl-edge-midpoint {
            opacity: 0;
            pointer-events: none !important;
            transition: opacity 0.1s;
        }
        .fl-area-element.selected .fl-vertex-handle,
        .fl-area-element.fl-hovered .fl-vertex-handle,
        .fl-area-element.selected .fl-edge-midpoint,
        .fl-area-element.fl-hovered .fl-edge-midpoint {
            opacity: 1;
            pointer-events: all !important;
        }
        .fl-vertex-handle:hover {
            fill: #ffe082 !important;
        }

        /* Analysis label – wrap is the drag handle (pointer-events set inline) */
        .fl-area-label-wrap {
            position: absolute;
        }
        .fl-area-label {
            position: relative;
            display: block;
            transform: none;
            background: rgba(20, 25, 30, 0.85);
            color: #fff;
            font-size: 10px;
            line-height: 1.45;
            padding: 4px 8px;
            border-radius: 5px;
            white-space: nowrap;
            pointer-events: none;
            font-family: 'Courier New', monospace;
            border: 1px solid rgba(231, 76, 60, 0.55);
            min-width: 90px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.45);
        }

        /* Preview element (during drawing) */
        .fl-area-preview polygon { stroke-dasharray: 6 3; }

        /* FL-Draw loupe */
        #fl-draw-loupe {
            position: fixed;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 2px solid #e74c3c;
            overflow: hidden;
            pointer-events: none;
            z-index: 9100;
            box-shadow: 0 4px 16px rgba(0,0,0,0.5);
            display: none;
        }
        #fl-draw-loupe-canvas {
            display: block;
            width: 160px;
            height: 160px;
        }
        #fl-draw-loupe .fl-loupe-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(231, 76, 60, 0.6);
            pointer-events: none;
        }

        /* FL-Area properties panel */
        .fl-area-props {
            background: #1e232a;
            border: 1px solid #e74c3c;
            border-radius: 6px;
            padding: 8px 10px;
            margin-bottom: 8px;
            font-size: 11px;
        }
        .fl-area-props-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
        }
        .fl-area-props-lbl {
            color: #95a5a6;
            min-width: 100px;
            font-size: 10px;
        }
        .fl-area-props-val {
            color: #ecf0f1;
            font-weight: bold;
        }

        /* ── fl-area-props Pair-Layout (2 Spalten je Zeile) ── */
        .fl-area-props-pair {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px 10px;
            margin-bottom: 6px;
        }
        .fl-area-props-half {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .fl-area-props-half .fl-area-props-lbl { min-width: 0; }

        /* ── Banner Schrift/Symbol-Größen-Zeile ──────────────── */
        .banner-size-row {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: normal;
            flex-wrap: wrap;
        }
        .banner-size-row label { white-space: nowrap; color: rgba(255,255,255,0.75); cursor: default; }
        .banner-size-row input[type="number"] {
            width: 42px; padding: 1px 3px; font-size: 11px;
            border-radius: 3px; border: 1px solid rgba(255,255,255,0.2);
            background: rgba(0,0,0,0.25); color: inherit; text-align: center;
        }
        .banner-size-row .banner-unit { color: rgba(255,255,255,0.5); font-size: 9px; }

        /* ── Banner Format- und Maßstab-Gruppen ─────────────── */
        #banner-format-group,
        #banner-scale-group {
            display: flex; align-items: center; gap: 3px; margin-right: 6px;
        }
        #banner-format-group select,
        #banner-scale-group select {
            background: rgba(0,0,0,0.25); color: inherit;
            border: 1px solid rgba(255,255,255,0.2); border-radius: 3px;
            font-size: 10px; padding: 1px 3px;
        }
        #banner-format-group select { max-width: 80px; }
        #banner-scale-group select  { max-width: 55px; }
        #banner-scale-group input[type="number"] {
            width: 46px; padding: 1px 3px; font-size: 10px;
            border-radius: 3px; border: 1px solid rgba(255,255,255,0.2);
            background: rgba(0,0,0,0.25); color: inherit; text-align: center;
        }

        /* ── Symbol-Picker Dropdown (Toolbar) ───────────────── */
        #sym-picker-wrap { position: relative; display: inline-block; }
        #sym-picker-panel {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            width: 290px;
            max-height: 65vh;
            overflow-y: auto;
            z-index: 9100;
            border-radius: 10px;
            padding: 10px;
        }
        #sym-picker-panel.sym-picker-open { display: block; }
        #sym-picker-panel h2 { font-size: 13px; margin: 0 0 8px; }
        #sym-picker-panel #symbol-search { width: 100%; box-sizing: border-box; }

        /* ── Laufweg (Polylinie) ────────────────────────────── */
        .laufweg-element { position:absolute; overflow:visible; pointer-events:none; z-index:0; }
        .laufweg-element svg { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
        .laufweg-element .lw-hit { pointer-events:stroke; cursor:pointer; }
        .laufweg-element .lw-vertex { pointer-events:auto; cursor:move; display:none; }
        .laufweg-element .lw-edge-midpoint { opacity:0; pointer-events:none !important; transition:opacity 0.12s; }
        .laufweg-element.selected { z-index:2; }
        .laufweg-element.selected .lw-vertex { display:block; }
        .laufweg-preview polyline { stroke-dasharray: 6 3; }
        body.laufweg-drawing #viewport,
        body.laufweg-drawing #viewport * { cursor: crosshair !important; }
        body.laufweg-drawing .fl-area-element,
        body.laufweg-drawing .fl-area-element * { pointer-events: none !important; }
        body.lw-vertex-dragging * { cursor: grabbing !important; }

        /* ── Verbinderlinie-Werkzeug ── */
        body.linie-drawing #viewport,
        body.linie-drawing #viewport * { cursor: crosshair !important; }
        .linie-snap-highlight { outline: 2px solid #3498db !important; outline-offset: 3px !important; }
        .linie-handle { border-radius: 50%; }

        /* ── Laufweg Eigenschaften: Toggle-Buttons & Farb-Swatches ── */
        .lw-tb-row { display: flex; gap: 3px; width: 100%; }
        .lw-tb {
            display: inline-flex; align-items: center; justify-content: center;
            flex: 1; min-width: 0; height: 26px;
            background: #2c3440; border: 1px solid #4a5568; border-radius: 3px;
            cursor: pointer; padding: 2px; color: #cdd4de;
        }
        .lw-tb.active { background: #2c7be5; border-color: #2c7be5; color: #fff; }
        .lw-tb:hover:not(.active) { background: #3a4558; border-color: #5a6578; }
        .lw-tb svg { pointer-events: none; width: 32px; height: 14px; overflow: visible; }
        .lw-cs-row { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
        .lw-cs {
            display: inline-block; width: 18px; height: 18px;
            border-radius: 2px; border: 1px solid rgba(255,255,255,0.25);
            cursor: pointer; flex-shrink: 0;
        }
        .lw-cs:hover { outline: 2px solid #fff; outline-offset: 1px; }

        /* ── Symbol-verknüpfte Prüffläche (symbol-area) ──────── */
        body.symbol-area-drawing #viewport,
        body.symbol-area-drawing #viewport * { cursor: crosshair !important; }
        body.sa-vertex-dragging * { cursor: grabbing !important; }
        /* FL-Area-Elemente beim Zeichnen transparent für Mausereignisse */
        body.symbol-area-drawing .fl-area-element,
        body.symbol-area-drawing .fl-area-element * { pointer-events: none !important; }

        .symbol-area-element { pointer-events: none; z-index: 0; }
        .symbol-area-element svg { pointer-events: none; }
        .symbol-area-element polygon { pointer-events: none; }
        .symbol-area-element.selected { z-index: 2; }
        .symbol-area-element.selected svg {
            filter: drop-shadow(0 0 5px rgba(230,126,34,0.7));
        }

        /* Highlight-Animation bei Symbol-Klick */
        @keyframes sa-pulse {
            0%   { filter: drop-shadow(0 0 0px rgba(230,126,34,0)); }
            40%  { filter: drop-shadow(0 0 12px rgba(230,126,34,0.9)); }
            100% { filter: drop-shadow(0 0 0px rgba(230,126,34,0)); }
        }
        .symbol-area-element.sa-highlighted svg {
            animation: sa-pulse 1.5s ease-out;
        }

        /* Symbol-Fläche Handles – standardmäßig ausgeblendet, sichtbar bei Hover/Auswahl */
        .sa-vertex-handle {
            cursor: grab;
            transition: r 0.08s, opacity 0.1s;
            opacity: 0;
            pointer-events: none !important;
        }
        .sa-edge-midpoint {
            opacity: 0;
            pointer-events: none !important;
            transition: opacity 0.1s;
        }
        .symbol-area-element.selected .sa-vertex-handle,
        .symbol-area-element.sa-hovered .sa-vertex-handle,
        .symbol-area-element.selected .sa-edge-midpoint,
        .symbol-area-element.sa-hovered .sa-edge-midpoint {
            opacity: 1;
            pointer-events: all !important;
        }
        .sa-vertex-handle:hover {
            fill: #ffe082 !important;
        }

        .sa-label-wrap { position: absolute; }
        .sa-label {
            position: relative;
            display: block;
        }

        /* ── GBU-Auswertung ────────────────────────────────── */
        .gbu-summary-element {
            position: absolute;
            z-index: 6;
            cursor: move;
            display: flex;
            flex-direction: column;
            overflow: visible; /* Wichtig: Resize-Handles müssen sichtbar sein */
            background: #fff;
            border: 1px solid #999;
            box-sizing: border-box;
            pointer-events: auto;
            font-family: Arial, sans-serif;
        }
        .gbu-summary-element.selected {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
        }
        .gbu-summary-header {
            padding: 4px 6px;
            font-weight: bold;
            border-bottom: 1px solid;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gbu-summary-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10px;
        }
        .gbu-summary-table th {
            text-align: left;
            padding: 2px 4px;
            border-bottom: 1px solid;
            font-weight: bold;
            white-space: nowrap;
        }
        .gbu-summary-table td {
            padding: 2px 4px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            white-space: nowrap;
        }
        .gbu-summary-footer {
            padding: 3px 6px;
            font-size: 9px;
            font-weight: bold;
            border-top: 1px solid;
        }
        .gbu-summary-empty {
            padding: 8px;
            text-align: center;
            color: #999;
            font-style: italic;
            font-size: 10px;
        }

        /* ── Übersichtsplan ──────────────────────────────────── */
        /* ── Verschachteltes Layout (Plan in Plan) ──────────────────── */
        .nested-layout-element {
            position: absolute;
            box-sizing: border-box;
            cursor: move;
            overflow: hidden;
            background: #f9f9f9;
            min-width: 40px;
            min-height: 30px;
            border: 1px solid #ddd;
            z-index: 5;
        }
        .nested-layout-element:hover { outline: 2px solid #4a90d9; }
        .nested-layout-element.selected { outline: 2px dashed #3498db; outline-offset: 2px; }

        .uebersicht-element {
            position: absolute;
            cursor: move;
            z-index: 5;
            box-sizing: border-box;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .uebersicht-element.selected {
            outline: 2px dashed #3498db;
            outline-offset: 2px;
        }
        .ue-header {
            flex-shrink: 0;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px solid #ccc;
            background: white;
        }
        .ue-canvas {
            flex: 1;
            overflow: hidden;
            position: relative;
            background: #f5f5f5;
        }
        .ue-img {
            position: absolute;
            user-select: none;
            -webkit-user-drag: none;
            cursor: move;
            transform-origin: center center;
        }

        /* ════ DRUCKVORSCHAU ════ */
        #print-preview-overlay #pp-page svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* ── @media print: nur die Vorschau drucken ── */
        @media print {
            /* Alles ausblenden */
            body > * {
                display: none !important;
            }
            /* Nur das Preview-Overlay anzeigen */
            #print-preview-overlay {
                display: block !important;
                position: static !important;
                background: transparent !important;
                inset: auto !important;
            }
            /* Toolbar verstecken */
            #print-preview-overlay > div:first-child {
                display: none !important;
            }
            /* Container: kein Scroll, kein Padding */
            #pp-container {
                display: block !important;
                overflow: visible !important;
                padding: 0 !important;
            }
            /* Seite: volle Breite, kein Schatten, kein Zoom-Transform */
            #pp-page {
                box-shadow: none !important;
                transform: none !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
            }
            #pp-page svg,
            #pp-page img {
                width: 100% !important;
                height: auto !important;
            }
        }

        /* ════ GBU-WIZARD ════ */
        .gbu-wizard {
            background:#fff;max-width:640px;width:95%;border-radius:10px;
            display:flex;flex-direction:column;max-height:85vh;
            box-shadow:0 8px 40px rgba(0,0,0,0.45);overflow:hidden;
        }
        .gbu-wizard-header {
            padding:14px 20px;border-bottom:1px solid #eee;
            display:flex;align-items:center;
        }
        .gbu-step-nav {
            display:flex;align-items:center;justify-content:center;gap:0;
            padding:12px 20px 8px;background:#f8f9fa;border-bottom:1px solid #eee;
        }
        .gbu-step-dot {
            width:28px;height:28px;border-radius:50%;
            display:flex;align-items:center;justify-content:center;
            font-size:12px;font-weight:bold;color:#aaa;
            background:#e9ecef;border:2px solid #dee2e6;
            cursor:pointer;transition:all 0.2s;flex-shrink:0;
        }
        .gbu-step-dot.active {
            background:#3498db;color:#fff;border-color:#2980b9;
            box-shadow:0 0 0 3px rgba(52,152,219,0.25);
        }
        .gbu-step-dot.done { background:#27ae60;color:#fff;border-color:#1e8449; }
        .gbu-step-line {
            width:24px;height:2px;background:#dee2e6;flex-shrink:0;
        }
        .gbu-step-line.done { background:#27ae60; }
        .gbu-wizard-body {
            flex:1;overflow-y:auto;padding:16px 20px;min-height:200px;
        }
        .gbu-wizard-footer {
            padding:10px 20px;border-top:1px solid #eee;
            display:flex;align-items:center;gap:8px;
        }
        .gbu-btn {
            padding:7px 18px;border:none;border-radius:5px;
            font-size:12px;cursor:pointer;font-weight:600;
            transition:background 0.15s;
        }
        .gbu-btn-primary { background:#3498db;color:#fff; }
        .gbu-btn-primary:hover { background:#2980b9; }
        .gbu-btn-secondary { background:#ecf0f1;color:#555; }
        .gbu-btn-secondary:hover { background:#d5dbdb; }
        .gbu-btn-success { background:#27ae60;color:#fff; }
        .gbu-btn-success:hover { background:#1e8449; }
        .gbu-section-title {
            font-size:13px;font-weight:bold;color:#2c3e50;
            margin:12px 0 8px;padding-bottom:4px;border-bottom:1px solid #eee;
        }
        .gbu-section-title:first-child { margin-top:0; }
        .gbu-question {
            margin:8px 0;padding:8px 12px;background:#f8f9fa;
            border-radius:6px;border:1px solid #eee;
        }
        .gbu-question label {
            display:block;font-size:12px;color:#34495e;margin-bottom:4px;font-weight:500;
        }
        .gbu-toggle-group {
            display:flex;gap:6px;margin-top:4px;
        }
        .gbu-toggle-btn {
            padding:5px 14px;border:1px solid #ccc;border-radius:4px;
            background:#fff;font-size:11px;cursor:pointer;transition:all 0.15s;
        }
        .gbu-toggle-btn.active-yes { background:#e74c3c;color:#fff;border-color:#c0392b; }
        .gbu-toggle-btn.active-no { background:#27ae60;color:#fff;border-color:#1e8449; }
        .gbu-bk-group {
            display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;
        }
        .gbu-bk-chip {
            display:flex;align-items:center;gap:3px;
            padding:4px 10px;border:1px solid #ccc;border-radius:4px;
            font-size:11px;cursor:pointer;transition:all 0.15s;background:#fff;
        }
        .gbu-bk-chip.checked { background:#3498db;color:#fff;border-color:#2980b9; }
        .gbu-bk-chip input { display:none; }
        .gbu-warning-box {
            background:#fef9e7;border:1px solid #f0c800;border-radius:6px;
            padding:8px 12px;font-size:11px;color:#7d6608;line-height:1.5;margin:8px 0;
        }
        .gbu-danger-box {
            background:#fdedec;border:1px solid #e74c3c;border-radius:6px;
            padding:8px 12px;font-size:11px;color:#922b21;line-height:1.5;margin:8px 0;
        }
        .gbu-success-box {
            background:#eafaf1;border:1px solid #27ae60;border-radius:6px;
            padding:8px 12px;font-size:11px;color:#1a5e2e;line-height:1.5;margin:8px 0;
        }
        .gbu-info-box {
            background:#eaf2f8;border:1px solid #3498db;border-radius:6px;
            padding:8px 12px;font-size:11px;color:#1a5276;line-height:1.5;margin:8px 0;
        }
        .gbu-badge {
            display:inline-block;padding:2px 8px;border-radius:10px;
            font-size:10px;font-weight:bold;
        }
        .gbu-badge-normal { background:#eafaf1;color:#27ae60; }
        .gbu-badge-erhoeht { background:#fdedec;color:#e74c3c; }
        .gbu-badge-fehlt { background:#fef9e7;color:#f39c12; }
        .gbu-result-row {
            display:flex;align-items:center;gap:8px;
            padding:5px 0;font-size:12px;border-bottom:1px solid #f5f5f5;
        }
        .gbu-result-row:last-child { border-bottom:none; }
        .gbu-result-icon { font-size:14px;flex-shrink:0; }
        .gbu-input {
            width:100%;padding:5px 8px;border:1px solid #ccc;border-radius:4px;
            font-size:12px;box-sizing:border-box;
        }
        .gbu-input-short { width:80px; }
        .gbu-select {
            padding:5px 8px;border:1px solid #ccc;border-radius:4px;
            font-size:12px;background:#fff;
        }
        .gbu-slider-row {
            display:flex;align-items:center;gap:8px;margin-top:4px;
        }
        .gbu-slider-row input[type=range] { flex:1; }
        .gbu-slider-val {
            min-width:40px;text-align:center;font-size:12px;font-weight:bold;color:#2c3e50;
        }
        /* GBU-Status in FL-Area Properties */
        .gbu-status-block {
            margin:6px 0;padding:8px;background:#1a1f27;border:1px solid #333;
            border-radius:5px;
        }
        .gbu-status-missing {
            color:#f39c12;font-size:11px;font-weight:bold;margin-bottom:4px;
        }
        .gbu-status-ok {
            color:#27ae60;font-size:11px;font-weight:bold;margin-bottom:4px;
        }
        .gbu-status-erhoeht {
            color:#e74c3c;font-size:11px;font-weight:bold;margin-bottom:4px;
        
                /* ════════════════════════════════════════════════════════════════
                   SCALE INDICATOR (Auto-Kalibrierung) – Floating Toolbar
                ════════════════════════════════════════════════════════════════ */
        
                #scale-indicator {
                    background: #27ae60;        /* Grün: Auto-Kalibrierung erfolgreich */
                    transition: background 0.3s ease;
                }
        
                /* Unsichere Auto-Kalibrierung (Text-Heuristik bei PDF) */
                #scale-indicator.uncertain {
                    background: #f39c12;        /* Gelb/Orange: Warnung */
                }
        
                /* Manuelle Kalibrierung durch Nutzer */
                #scale-indicator.manual {
                    background: #3498db;        /* Blau: Manuell */
                }
        
                /* Fehler / Fallback (kein Auto-Maßstab gefunden) */
                #scale-indicator.error {
                    background: #e74c3c;        /* Rot: Fehler, manuelle Kalibrierung erforderlich */
                }
        
                #scale-icon {
                    font-size: 13px;
                    line-height: 1;
                }
        
                #scale-text {
                    font-family: 'Courier New', monospace;
                    letter-spacing: 0.5px;
                }
        
                #btn-recalibrate {
                    transition: background 0.2s;
                }
        
                #btn-recalibrate:hover {
                    background: rgba(255,255,255,0.4);
                }
        
                #btn-recalibrate:active {
                    background: rgba(255,255,255,0.6);
                }
        }

/* ════ BESTUHLUNGSPLAN (VStättV) ════════════════════════════════════════════ */

/* Seating-Block: unsichtbarer Anker-Div, SVG überläuft */
.seating-block-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
}

/* Bühnen-Element */
.buehne-element {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

/* ── Sitzplatz-Stile (SVG-Elemente innerhalb .sb-group) ─────────────────── */
.sb-seat {
    fill: #3498db;
    fill-opacity: 0.75;
    stroke: #2471a3;
    stroke-width: 0.6px;
}

.sb-seat-wc {
    /* Fill/Stroke werden inline durch ISA-Symbol-Rendering gesetzt */
    fill: none;
    stroke: none;
}

.sb-table {
    fill: #fdfefe;
    stroke: #aab7b8;
    stroke-width: 0.6px;
}

.sb-table-oval {
    fill: #fdfefe;
    stroke: #aab7b8;
    stroke-width: 0.6px;
}

.sb-aisle {
    fill: none;
    stroke: #e74c3c;
    stroke-width: 1px;
    stroke-dasharray: 4 2;
    opacity: 0.7;
}

.sb-label {
    font-family: Arial, sans-serif;
    fill: #2c3e50;
    font-weight: bold;
}

/* Selektierter Block */
.seating-block-element.selected .sb-group > rect:first-child {
    stroke: #f39c12 !important;
    stroke-width: 2px !important;
    opacity: 0.7 !important;
}

/* Stuhl-Konverter: Hover-Feedback */
.sb-seat:hover,
.sb-seat-wc:hover {
    opacity: 0.65;
    cursor: pointer;
}

/* Gangmaß-Messung */
.gm-measure-element {
    position: absolute;
    pointer-events: none;
    z-index: 400;
    overflow: visible;
}

/* ════════════════════════════════════════════════════════════
   BESTUHLUNGSPLAN – RECHTE INFO-SIDEBAR (seating_plan)
   Responsive Flexbox/Grid Layout
   ════════════════════════════════════════════════════════════ */
#seating-sidebar {
    display: none;           /* wird via JS auf flex gesetzt */
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    border-left: 1.5px solid #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #111;
    z-index: 8;
    pointer-events: none;
    overflow: hidden;
}

/* ── Abschnitte ── */
.sp-section {
    display: flex;
    flex-direction: column;
    border-bottom: 1.5px solid #000;
    box-sizing: border-box;
    overflow: hidden;
}
/* Übersichtsplan wächst proportional, max 2/6 der Sidebar-Höhe */
.sp-section-uebersicht {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 33.333%;
}
/* Legende + Hinweis: content-sized, kein Wachstum */
.sp-section-legende,
.sp-section-hinweis {
    flex: 0 0 auto;
}

/* Abschnitts-Titel */
.sp-label {
    flex: 0 0 auto;
    font-size: 8.5px;
    font-weight: bold;
    padding: 2px 5px;
    border-bottom: 0.5px solid #000;
    background: #f0f0f0;
    line-height: 1.3;
}

/* Sidebar anklickbar: Hover-Outline wie bei Elementen */
#seating-sidebar {
    cursor: pointer;
    pointer-events: all;
}
#seating-sidebar:hover {
    outline: 2px solid #4a90d9;
    outline-offset: -2px;
}
#seating-sidebar.sp-selected {
    outline: 2px solid #2071c5;
    outline-offset: -2px;
}

/* Übersichtsplan-Platzhalter + Hover-Overlay */
.sp-uebersicht-area {
    flex: 1 1 auto;
    background: #e8eaed;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 7.5px;
    min-height: 0;
}
.sp-uebersicht-area::after {
    content: 'Klicken zum Bearbeiten';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.sp-uebersicht-area:hover::after { opacity: 1; }

/* Legende */
.sp-legend-body {
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-leg-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    line-height: 1.3;
}
.sp-leg-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 2px;
}
.sp-leg-icon-rettung { background: #00855a; color: #fff; }
.sp-leg-icon-wc      { background: #005eb8; color: #fff; font-size: 9px; }

/* Hinweis */
.sp-hinweis-body {
    padding: 3px 5px 4px;
    font-size: 7.5px;
    line-height: 1.4;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── Info-Block (füllt verbleibenden Platz) ── */
.sp-infoblock {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Zeile 1: Variante + Besucherzahlen (3-Box-Layout) */
.sp-info-variante {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 5px;
    border-bottom: 1px solid #000;
    background: #f0f7ff;
}
.sp-variante-name {
    font-weight: bold;
    font-size: 9px;
    line-height: 1.2;
    word-break: break-word;
}
.sp-visitor-line {
    font-size: 8px;
    line-height: 1.2;
}
.sp-visitor-parens {
    font-size: 7.5px;
    color: #555;
    line-height: 1.2;
}
/* 3 Boxen: Sitzplätze / Stehplätze / Rollstuhlplätze */
.sp-count-boxes {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}
.sp-count-box {
    flex: 1 1 0;
    text-align: center;
    border: 0.5px solid #999;
    background: #fff;
    box-sizing: border-box;
    padding: 1px 2px;
}
.sp-count-top {
    font-weight: bold;
    font-size: 10px;
    line-height: 1.1;
}
.sp-count-bot {
    font-size: 8px;
    color: #555;
    line-height: 1.1;
}
.sp-count-lbl {
    font-size: 6.5px;
    color: #666;
    line-height: 1;
    border-top: 0.5px solid #ccc;
    margin-top: 1px;
    padding-top: 1px;
}

/* Zeile 2: Gebäude-Block (grauer Hintergrund) */
.sp-info-gebaeude-block {
    flex: 0 0 auto;
    background: #e8e8e8;
    border-bottom: 1px solid #000;
    padding: 3px 5px;
}
.sp-info-gebaeude {
    font-weight: bold;
    font-size: 10px;
    line-height: 1.2;
}
.sp-info-adresse {
    font-size: 7.5px;
    color: #222;
    line-height: 1.3;
    margin-top: 1px;
}

/* Zeilen 3 & 4: 2-spaltige CSS-Grid-Zeilen (Ebene|Maßstab / Planersteller|Stand) */
.sp-info-grid2 {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #000;
}
.sp-info-cell {
    padding: 2px 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
/* vertikaler Trennstrich zwischen den beiden Zellen */
.sp-info-cell + .sp-info-cell {
    border-left: 1px solid #000;
}
.sp-info-cell-lbl {
    font-size: 6.5px;
    color: #666;
    line-height: 1.1;
}
.sp-info-cell-val {
    font-size: 8px;
    font-weight: bold;
    line-height: 1.2;
    word-break: break-word;
}

/* Spacer: drückt Genehmigungsfeld nach unten */
.sp-info-spacer {
    flex: 1 1 0;
    min-height: 0;
}

/* ── Genehmigungsfeld – am absolut unteren Rand der Sidebar ── */
.sp-genehmigung {
    flex: 0 0 auto;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #000;
    box-sizing: border-box;
}

/* "Genehmigt" – feste Höhe 55mm, Text oben zentriert */
.sp-info-genehmigt {
    flex: 0 0 auto;
    min-height: 55mm;
    max-height: 60mm;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5px;
    font-size: 10px;
    font-weight: bold;
    color: #c0392b;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
}

/* Aktenzeichen / Genehmigungsvermerk – mind. 3cm, wächst mit Inhalt */
.sp-info-footer {
    flex: 0 0 auto;
    min-height: 3cm;
    height: auto;
    font-size: 6.5px;
    color: #2e7d32;
    padding: 3px 5px;
    line-height: 1.4;
    word-break: break-word;
    box-sizing: border-box;
}

/* Übersichtsplan-Bild in der Sidebar – Größe/Position/Rotation via inline-style aus JS */
.sp-uebersicht-area img {
    display: block;
}

/* ═══════════════════════════════════════════
   GRUNDRISS-ZEICHENMODUS – TOOLBAR (links)
═══════════════════════════════════════════ */
#draw-toolbar {
    position: fixed;
    left: 314px;   /* 300px Sidebar + 14px Abstand */
    top: 50%;
    transform: translateY(-50%);
    z-index: 8900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 16px;
    background: rgba(20, 30, 48, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.13);
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 1.5px 0 rgba(255,255,255,0.08) inset;
}
.dtb-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dtb-btn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #ecf0f1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    outline: none;
}
.dtb-btn:hover {
    background: rgba(255,255,255,0.22);
    transform: scale(1.12);
}
.dtb-btn:active {
    background: rgba(255,255,255,0.08);
    transform: scale(0.95);
}
.dtb-btn svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
}
.dtb-btn.dtb-toggle.active {
    background: rgba(52, 152, 219, 0.40);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.75);
    color: #5dade2;
}
.dtb-btn.dtb-toggle.active:hover {
    background: rgba(52, 152, 219, 0.55);
}
.dtb-sep-h {
    width: 80%;
    height: 1px;
    background: rgba(255,255,255,0.18);
    margin: 2px 0;
}

/* Maßanzeige-Tooltip beim Zeichnen */
#draw-measure-tooltip {
    position: fixed;
    z-index: 9500;
    padding: 4px 10px;
    background: rgba(20, 30, 48, 0.80);
    backdrop-filter: blur(8px);
    color: #ecf0f1;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    pointer-events: none;
    white-space: nowrap;
}

/* Leer-Canvas-Overlay */
#draw-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 8800;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#draw-start-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 28px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    pointer-events: all;
    position: relative;
}
#draw-start-close {
    position: absolute;
    top: 10px; right: 12px;
    background: none; border: none;
    font-size: 16px; color: #aaa;
    cursor: pointer; padding: 2px 6px;
    border-radius: 4px; line-height: 1;
}
#draw-start-close:hover { background: #f0f0f0; color: #555; }
.draw-start-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.12);
    background: #f5f6fa;
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.draw-start-btn:hover {
    background: #e8ecf5;
    border-color: rgba(52,152,219,0.5);
}
.draw-start-btn-primary {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52,152,219,0.4);
    color: #2471a3;
}
.draw-start-btn-primary:hover {
    background: rgba(52, 152, 219, 0.22);
}

/* Properties-Panel für Zeichenelemente */
.prop-group {
    margin-bottom: 8px;
}
.prop-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 3px;
}
.prop-input {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
}
.prop-input:focus {
    outline: none;
    border-color: #3498db;
}
.prop-btn {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
}
.prop-btn:hover { background: #e0e0e0; }
.prop-btn-danger {
    background: #fadbd8;
    border-color: #e74c3c;
    color: #c0392b;
}
.prop-btn-danger:hover { background: #f1948a; color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   AUTH – Account-Button + Modal
   ══════════════════════════════════════════════════════════════════ */

/* ── Account-Button ─────────────────────────────────────────────── */
#btn-account {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #34495e;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    position: relative;
    transition: background 0.2s, box-shadow 0.2s;
}
#btn-account:hover { background: #2c3e50; }
#btn-account svg { pointer-events: none; }
#btn-account-initial { display: none; font-size: 15px; font-weight: 700; }

#btn-account.logged-in {
    background: #27ae60;
    box-shadow: 0 2px 8px rgba(39,174,96,0.45);
}
#btn-account.logged-in:hover { background: #219a52; }
#btn-account.logged-in svg { display: none; }
#btn-account.logged-in #btn-account-initial { display: block; }

/* ── Auth-Modal Backdrop ─────────────────────────────────────────── */
/* ── Import-Konflikt-Modal ── */
#import-conflict-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10300;
    display: flex;
    align-items: center;
    justify-content: center;
}
#import-conflict-box {
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 480px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    font-family: sans-serif;
}
.icm-header {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #c0392b;
}
.icm-versions {
    background: #f7f7f7;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
}
.icm-version { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.icm-version:last-child { margin-bottom: 0; }
.icm-label { color: #888; min-width: 140px; }
.icm-date   { color: #555; font-size: 12px; }
.icm-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.icm-option {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: border-color 0.15s;
}
.icm-option:has(input:checked) { border-color: #3498db; background: #eaf4fd; }
.icm-option input { margin-top: 3px; accent-color: #3498db; }
.icm-option strong { font-size: 14px; display: block; margin-bottom: 2px; }
.icm-option p { font-size: 12px; color: #666; margin: 0; }
.icm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.icm-btn-replace {
    background: #3498db; color: #fff;
    border: none; border-radius: 6px;
    padding: 9px 22px; font-size: 14px; cursor: pointer;
}
.icm-btn-replace:hover { background: #2980b9; }
.icm-btn-cancel {
    background: #f0f0f0; color: #555;
    border: none; border-radius: 6px;
    padding: 9px 18px; font-size: 14px; cursor: pointer;
}
.icm-btn-cancel:hover { background: #e0e0e0; }

#auth-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Auth-Modal Box ──────────────────────────────────────────────── */
#auth-modal-box {
    background: #fff;
    border-radius: 10px;
    width: 460px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

#auth-guest-view,
#auth-logged-view {
    overflow-y: auto;
    flex: 1;
}

.auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.auth-modal-header span {
    font-weight: 700;
    font-size: 15px;
    color: #2c3e50;
}
.auth-modal-close {
    background: none; border: none;
    cursor: pointer; font-size: 16px;
    color: #999; padding: 2px 6px;
    border-radius: 4px;
}
.auth-modal-close:hover { background: #f0f0f0; color: #333; }

/* ── Session-Hinweis ─────────────────────────────────────────────── */
#auth-session-hint {
    background: #fff3cd;
    color: #856404;
    font-size: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid #ffc107;
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 0 14px;
    gap: 0;
    flex-wrap: nowrap;
}
.auth-tab {
    background: none; border: none;
    padding: 10px 10px;
    font-size: 12px;
    color: #7f8c8d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    flex-shrink: 0;
}
.auth-tab:hover { color: #2c3e50; }
.auth-tab.active {
    color: #e74c3c;
    border-bottom-color: #e74c3c;
    font-weight: 600;
}

/* ── Formular ────────────────────────────────────────────────────── */
.auth-panel {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.auth-panel label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
}
.auth-panel label small { font-weight: 400; color: #999; }
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.auth-panel input:focus {
    outline: none;
    border-color: #e74c3c;
}
.auth-remember {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 400 !important;
    color: #555 !important;
    cursor: pointer;
}
.auth-submit {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s;
}
.auth-submit:hover { background: #c0392b; }
.auth-submit:disabled { background: #ccc; cursor: not-allowed; }
.auth-btn-secondary {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    padding: 9px 16px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.auth-btn-secondary:hover { background: #e0e0e0; }

/* ── Nachrichten ─────────────────────────────────────────────────── */
.auth-message {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 4px;
    display: none;
}
.auth-message.success { background: #d4edda; color: #155724; display: block; }
.auth-message.error   { background: #f8d7da; color: #721c24; display: block; }

.auth-legal {
    font-size: 11px;
    color: #999;
    margin: 4px 0 0;
    line-height: 1.5;
}
.auth-legal a { color: #e74c3c; }

/* ── Consent-Checkbox ────────────────────────────────────────────── */
.auth-consent-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #444 !important;
    cursor: pointer;
    line-height: 1.5;
    margin: 2px 0;
}
.auth-consent-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #e74c3c;
    cursor: pointer;
}
.auth-consent-label a { color: #e74c3c; }

/* ── Eingeloggt-Ansicht ──────────────────────────────────────────── */
#auth-loggedin-view {
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.auth-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #27ae60;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-user-email {
    font-size: 13px;
    color: #555;
    word-break: break-all;
    text-align: center;
}
.auth-plan-badge {
    background: #eaf4fe;
    color: #2980b9;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.auth-logout-btn {
    background: #e74c3c;
    width: 100%;
    margin-top: 8px;
}

/* ── Passwort ändern (eingeloggt) ────────────────────────────────── */
#auth-changepw-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#auth-changepw-toggle {
    width: 100%;
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
}
#auth-changepw-toggle:hover { border-color: #aaa; color: #2c3e50; }
#auth-changepw-form {
    flex-direction: column;
    gap: 6px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
}
#auth-changepw-form label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
#auth-changepw-form label small { font-weight: 400; color: #999; }
#auth-changepw-form input[type="password"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    box-sizing: border-box;
}
#auth-changepw-form input:focus { outline: none; border-color: #e74c3c; }

/* ── Profil & E-Mail-Änderung (gemeinsame Basis = wie changepw) ──── */
#auth-profile-section,
#auth-changeemail-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#auth-profile-toggle,
#auth-changeemail-toggle {
    width: 100%;
    background: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, color 0.15s;
}
#auth-profile-toggle:hover,
#auth-changeemail-toggle:hover { border-color: #aaa; color: #2c3e50; }
#auth-profile-form,
#auth-changeemail-form {
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fafafa;
}
#auth-profile-form label,
#auth-changeemail-form label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
#auth-profile-form input,
#auth-changeemail-form input[type="email"],
#auth-changeemail-form input[type="password"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}
#auth-profile-form input:focus,
#auth-changeemail-form input:focus { outline: none; border-color: #2a6db5; }

/* ── Danger Zone (Export + Löschen) ─────────────────────────────── */
#auth-danger-zone {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #f0e0e0;
    padding-top: 10px;
    margin-top: 4px;
}
.auth-btn-danger {
    width: 100%;
    background: none;
    border: 1px solid #e8c0c0;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 13px;
    color: #c0392b;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.auth-btn-danger:hover { border-color: #c0392b; background: #fff5f5; }
#auth-delete-form {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #f5c6c6;
    border-radius: 5px;
    background: #fff8f8;
}
.auth-delete-warn {
    font-size: 12px;
    color: #7b2222;
    margin: 0;
    line-height: 1.5;
}
#auth-delete-form label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
#auth-delete-form input[type="password"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #f0c0c0;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}
#auth-delete-form input:focus { outline: none; border-color: #c0392b; }
.auth-submit--danger {
    background: #c0392b !important;
}
.auth-submit--danger:hover { background: #a93226 !important; }

/* ── Onboarding-Panel ───────────────────────────────────────────── */
.auth-onboarding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 8px 0;
}
.auth-onboarding__icon {
    font-size: 40px;
    line-height: 1;
}
.auth-onboarding h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
}
.auth-onboarding p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
.auth-onboarding__steps {
    text-align: left;
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    margin: 0;
    padding-left: 20px;
    width: 100%;
}

/* ── Aktive Sitzungen ────────────────────────────────────────────── */
#auth-sessions-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#auth-sessions-toggle {
    width: 100%;
    background: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, color 0.15s;
}
#auth-sessions-toggle:hover { border-color: #aaa; color: #2c3e50; }
#auth-sessions-list {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fafafa;
}
.auth-sessions-loading {
    font-size: 12px;
    color: #999;
}
.auth-session-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e8e8e8;
    font-size: 12px;
}
.auth-session-item.is-current {
    border-color: #2a6db5;
    background: #f0f6ff;
}
.auth-session-info { flex: 1; line-height: 1.5; }
.auth-session-browser { font-weight: 600; color: #222; }
.auth-session-meta { color: #888; }
.auth-session-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    background: #2a6db5;
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.auth-session-revoke {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    color: #c0392b;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.auth-session-revoke:hover { background: #fdf0f0; border-color: #c0392b; }

/* ── Speichern-Dialog ────────────────────────────────────────────── */
#auth-save-dialog {
    padding: 18px;
}
#auth-save-dialog p {
    font-size: 13px;
    color: #555;
    margin: 0 0 14px;
    line-height: 1.5;
}
.auth-save-actions {
    display: flex;
    gap: 8px;
}

/* ── View-only-Modus ──────────────────────────────────────────── */
body.view-only-mode #symbols-container,
body.view-only-mode #page-content         { pointer-events: none !important; }
body.view-only-mode .resize-handle,
body.view-only-mode .rotate-handle        { display: none !important; }
body.view-only-mode #canvas-viewport      { cursor: default; }

/* ── Progress Bar ─────────────────────────────────────────────── */
#pb-track {
    display: none; position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 10050; pointer-events: none;
}
#pb-bar {
    height: 100%; width: 0;
    background: #3498db;
    transition: width 0.25s ease, background-color 0.2s;
}
#pb-bar.pb-done  { background: #27ae60; }
#pb-bar.pb-error { background: #e74c3c; }
#pb-bar.pb-shimmer {
    background: linear-gradient(90deg, #2980b9 25%, #5dade2 50%, #2980b9 75%);
    background-size: 200% 100%;
    animation: pb-shimmer 1.4s infinite linear;
}
@keyframes pb-shimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}
#pb-overlay {
    display: none; position: fixed; inset: 0; z-index: 10048;
    background: rgba(255,255,255,0.75);
    align-items: center; justify-content: center;
    outline: none;
}
#pb-label-box {
    background: #fff; border-radius: 10px; padding: 16px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    font-family: sans-serif; font-size: 13px; color: #333;
    text-align: center; min-width: 200px;
}
#pb-label-text { display: block; }

        /* ── Help-Popup ───────────────────────────────────────────── */
        #help-popup {
            position: fixed;
            inset: 0;
            z-index: 11000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,.35);
            /* Kein pointer-events:none — Backdrop-Klick muss feuern können */
        }
        #help-card {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(16px);
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,.18);
            border: 1px solid rgba(0,0,0,0.08);
            padding: 28px 32px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            width: 360px;
            max-height: calc(100vh - 60px);
            overflow-y: auto;
            pointer-events: all;
            position: relative;
        }
        #help-card h3 {
            margin: 0 0 4px;
            font-size: 15px;
            font-weight: 700;
            color: #2c3e50;
        }
        #help-card p {
            margin: 0 0 6px;
            font-size: 12px;
            color: #666;
            line-height: 1.5;
        }
        #help-close {
            position: absolute;
            top: 10px; right: 12px;
            background: none; border: none;
            font-size: 16px; color: #aaa;
            cursor: pointer; padding: 2px 6px;
            border-radius: 4px; line-height: 1;
            font-family: inherit;
        }
        #help-close:hover { background: #f0f0f0; color: #555; }
        /* Views intern als vertikale Flex-Spalte → gap ersetzt Margins */
        #help-view-choice,
        #help-view-help,
        #help-view-report {
            flex-direction: column;
            gap: 8px;
        }
        .help-back-btn {
            align-self: flex-start;
            background: none; border: none;
            font-size: 12px; color: #888;
            cursor: pointer; padding: 0;
            font-family: inherit;
            margin-bottom: 4px;
        }
        .help-back-btn:hover { color: #2c3e50; }
        .help-form-label {
            font-size: 12px;
            color: #666;
            display: block;
            margin-bottom: 3px;
        }
        .help-form-input,
        .help-form-textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 7px 9px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 13px;
            font-family: inherit;
        }
        .help-form-textarea {
            min-height: 90px;
            resize: vertical;
        }
        .help-status {
            display: none;
            padding: 7px 10px;
            border-radius: 6px;
            font-size: 12px;
        }
        .help-status.success { background: #eafaf1; color: #1e8449; }
        .help-status.error   { background: #fdecea; color: #c0392b; }
        .help-btn-send {
            width: 100%;
            padding: 10px;
            background: #c0392b;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s;
        }
        .help-btn-send:hover { background: #a93226; }
        .help-btn-send:disabled { background: #e0a89f; cursor: default; }
        .help-log-pre {
            margin: 0;
            padding: 7px 9px;
            background: #1a2533;
            color: #a8d8a8;
            font-family: 'Courier New', monospace;
            font-size: 10px;
            line-height: 1.5;
            border-radius: 6px;
            max-height: 100px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }

/* ── Backup Recovery Panel ─────────────────────────────────────────── */
.backup-section-divider {
    height: 1px;
    background: #3a4558;
    margin: 12px 0 8px;
}
.backup-section-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #7a8a9a;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.backup-loading,
.backup-empty {
    font-size: 11px;
    color: #666;
    font-style: italic;
    display: block;
    padding: 4px 0;
}
.backup-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid #2c3440;
    font-size: 11px;
}
.backup-item:last-child { border-bottom: none; }
.backup-item--original  { opacity: .85; }
.backup-date {
    flex: 1;
    color: #cdd4de;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.backup-size {
    font-size: 10px;
    color: #566;
    white-space: nowrap;
}
.backup-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.backup-badge--auto     { background: #2c3e50; color: #85c1e9; }
.backup-badge--manual   { background: #1e3a2f; color: #58d68d; }
.backup-badge--original { background: #3e2a1a; color: #e59866; }
.backup-restore-btn {
    background: #2c3440;
    color: #aab7c4;
    border: 1px solid #4a5568;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.backup-restore-btn:hover { background: #3a4558; color: #cdd4de; }
.backup-download-row { padding: 8px 0 2px; }
.backup-dl-btn {
    width: 100%;
    background: #1e3a2f;
    color: #58d68d;
    border: 1px solid #27ae60;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
}
.backup-dl-btn:hover { background: #27ae60; color: #fff; }
.backup-dl-btn--source { background: #1a3a52; color: #7fb3d3; border-color: #2471a3; }
.backup-dl-btn--source:hover { background: #2471a3; color: #fff; }

/* ── FL-Area: Cursor-Feedback beim Verschieben ──────────────── */
.fl-area-element .fl-poly-fill                     { cursor: grab; }
.fl-area-element .fl-poly-fill:active              { cursor: grabbing; }
.fl-area-element[data-locked="true"] .fl-poly-fill { cursor: default; }
body.is-dragging-fl-area *                         { cursor: grabbing !important; }