/* ===== RESET & BASIS ===== */
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: #b0bec5; margin: 0; padding: 10px; font-size: 11px; color: #fff; }

        /* ===== KOPFZEILE ===== */
        .ui-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #111;
            color: #00ffcc;
            padding: 10px 20px;
            border-radius: 8px 8px 0 0;
            font-size: 13px;
            gap: 8px;
        }
        .header-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
        .btn-export {
            background: #00ffcc; color: #000; border: none; padding: 8px 22px;
            font-weight: bold; cursor: pointer; border-radius: 4px;
            text-transform: uppercase; font-size: 12px; letter-spacing: .05em;
        }
        .btn-export:hover { background: #00e6b8; }
        .btn-settings {
            background: #263238; color: #00ffcc; border: 1px solid #37474f;
            padding: 8px 14px; font-weight: bold; cursor: pointer; border-radius: 4px;
            font-size: 12px; letter-spacing: .05em; white-space: nowrap;
        }
        .btn-settings:hover { background: #37474f; }

        /* ===== PANEL-TOGGLE-LEISTE ===== */
        /*
         * Vollbreiter Balken direkt unter der Kopfzeile.
         * Klick klappt das Panel ein/aus.
         * Beim Eingeklappt-Zustand: panel-wrapper hat height:0 + overflow:hidden.
         */
        .panel-toggle-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #0d1f26;
            color: #546e7a;
            font-size: 10px;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: 5px 0;
            cursor: pointer;
            user-select: none;
            border-bottom: 2px solid #000;
            transition: background .15s;
        }
        .panel-toggle-bar:hover { background: #1a3040; color: #00ffcc; }
        .panel-toggle-bar .toggle-arrow { font-size: 12px; transition: transform .2s; }
        .panel-toggle-bar.collapsed .toggle-arrow { transform: rotate(180deg); }

        /* ===== PANEL (scrollbar, Höhe per Resize-Handle anpassbar) ===== */
        .panel-wrapper {
            background: #1a1a1a;
            border-bottom: 4px solid #000;
            resize: vertical;
            overflow: hidden;
            min-height: 80px;
            max-height: 90vh;
            height: 48vh;
            position: relative;
            transition: height .25s ease;
        }
        .panel-wrapper.collapsed {
            height: 0 !important;
            min-height: 0;
            border-bottom: none;
            resize: none;
        }
        /* Resize-Griff – volle Breite, deutlich sichtbar */
        .panel-wrapper::after {
            content: '⠿ Höhe ziehen';
            display: block;
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 14px;
            background: #111;
            color: #546e7a;
            font-size: 9px;
            letter-spacing: .1em;
            text-align: center;
            line-height: 14px;
            cursor: ns-resize;
            user-select: none;
        }
        .panel {
            background: #1a1a1a;
            color: #fff;
            padding: 12px 12px 20px 12px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
            height: 100%;
            overflow-y: auto;
        }

        /* ===== GRUPPEN ===== */
        .group { background: #263238; padding: 10px 12px; border-radius: 6px; border: 1px solid #37474f; align-self: start; }
        .group h4 { margin: 0 0 8px 0; color: #00ffcc; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; border-bottom: 1px solid #444; padding-bottom: 4px; }
        .group hr { border: none; border-top: 1px solid #37474f; margin: 7px 0; }
        .sub-label { color: #90a4ae; font-size: 10px; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; }

        /* ===== REGLER-ZEILE ===== */
        .ctrl-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
        .ctrl-row .ctrl-label { flex: 0 0 auto; min-width: 90px; color: #cfd8dc; font-size: 10.5px; }
        .ctrl-row input[type="range"] { flex: 1; min-width: 0; accent-color: #00ffcc; cursor: pointer; height: 4px; }
        .ctrl-row .ctrl-num {
            flex: 0 0 50px; width: 50px;
            background: #37474f; color: #00ffcc;
            border: 1px solid #546e7a; border-radius: 3px;
            padding: 2px 4px; font-size: 11px; text-align: right;
            -moz-appearance: textfield;
        }
        .ctrl-row .ctrl-num::-webkit-inner-spin-button,
        .ctrl-row .ctrl-num::-webkit-outer-spin-button { -webkit-appearance: none; }
        .ctrl-row .ctrl-unit { flex: 0 0 auto; color: #546e7a; font-size: 10px; min-width: 14px; }

        /* Farb-Zeile */
        .color-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
        .color-row .ctrl-label { flex: 0 0 auto; min-width: 90px; color: #cfd8dc; font-size: 10.5px; }
        input[type="color"] { border: none; width: 32px; height: 22px; cursor: pointer; background: none; padding: 0; flex-shrink: 0; border-radius: 3px; }

        /* Select-Zeile */
        .sel-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
        .sel-row .ctrl-label { flex: 0 0 auto; min-width: 90px; color: #cfd8dc; font-size: 10.5px; }
        select { background: #37474f; color: #fff; border: 1px solid #546e7a; font-size: 11px; padding: 3px 5px; border-radius: 3px; cursor: pointer; }
        select.font-select { width: 100%; padding: 6px 8px; font-size: 12px; margin-bottom: 8px; }

        /* ===== EINGABE-KARTEN ===== */
        .cards-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0; }
        .card { background: #fff; color: #333; padding: 10px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 6px; }
        .card-title { font-size: 10px; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: .05em; }
        .card select { width: 100%; font-weight: bold; font-size: 11px; color: #333; background: #f5f5f5; border: 1px solid #ccc; }
        .card textarea { width: 100%; height: 65px; border: 1px solid #ddd; padding: 5px; font-size: 11px; resize: vertical; font-family: sans-serif; color: #333; }

        /* ===== LOKALE LINIEN-STEUERUNG ===== */
        .local-lines-ui { background: #eceff1; padding: 7px 8px; border-radius: 4px; font-size: 10px; color: #333; }
        .local-lines-ui .ll-title { font-weight: bold; color: #455a64; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; font-size: 9px; }
        .ll-grid, .ll-grid2 {
            display: grid;
            grid-template-columns: auto 44px auto 44px;
            gap: 3px 6px;
            align-items: center;
            margin-bottom: 5px;
        }
        .ll-grid label, .ll-grid2 label { color: #546e7a; font-size: 10px; }
        .ll-grid input[type="number"],
        .ll-grid2 input[type="number"] {
            width: 44px; background: #fff; color: #333;
            border: 1px solid #bbb; border-radius: 3px;
            padding: 2px 4px; font-size: 10px; -moz-appearance: textfield;
        }
        .ll-grid input[type="number"]::-webkit-inner-spin-button,
        .ll-grid input[type="number"]::-webkit-outer-spin-button,
        .ll-grid2 input[type="number"]::-webkit-inner-spin-button,
        .ll-grid2 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

        /* Ausrichtungs-Buttons für Linien */
        .ll-align-row {
            display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
        }
        .ll-align-row label { color: #546e7a; font-size: 10px; flex: 0 0 auto; }
        .ll-align-btns { display: flex; gap: 3px; }
        .ll-align-btn {
            background: #dde3e7; color: #455a64; border: 1px solid #bbb;
            border-radius: 3px; padding: 2px 7px; font-size: 10px;
            cursor: pointer; transition: background .1s;
        }
        .ll-align-btn.active { background: #455a64; color: #fff; border-color: #455a64; }
        .ll-align-btn:hover:not(.active) { background: #cfd8dc; }

        .ll-color-row { display: flex; align-items: center; gap: 6px; }
        .ll-color-row label { color: #546e7a; font-size: 10px; }
        .ll-color-row input[type="color"] { width: 28px; height: 20px; }

        /* ===== LINIEN-WRAPPER ===== */
        .line-wrap { position: relative; width: 100%; }

        /* ===== PIXELRASTER-OVERLAY ===== */
        #grid-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; }

        /* ===== BÜHNE ===== */
        .stage-area { position: relative; background: #fff; min-height: 1500px; overflow: hidden; border-radius: 0 0 8px 8px; box-shadow: 0 15px 50px rgba(0,0,0,.3); }
        #blueprint-img { position: absolute; left: var(--bg-x); top: var(--bg-y); width: var(--bg-size); opacity: var(--bg-op); clip-path: inset(var(--bg-ct) var(--bg-cr) var(--bg-cb) var(--bg-cl)); z-index: 1; pointer-events: none; transform-origin: top left; display: none; }
        .stoer { position: absolute; z-index: 3; pointer-events: none; }
        #stoer-L { left: 0; top: 0; width: var(--box-l-w); height: var(--box-l-h); background: var(--box-l-bg); opacity: var(--box-l-op); }
        #stoer-R { right: 0; top: 0; width: var(--box-r-w); height: var(--box-r-h); background: var(--box-r-bg); opacity: var(--box-r-op); }
        .text-layer { position: relative; z-index: 2; padding: 60px var(--view-mr) 60px var(--view-ml); width: 100%; display: flex; flex-direction: column; }

        /* ===== RENDER-BLÖCKE ===== */
        .render-block { width: 100%; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; }
        .preview-h1      { font-family: var(--font-family); font-size: var(--h1-size);  font-weight: var(--h1-weight);  color: var(--h1-color);  margin-top: var(--h1-mt);  margin-bottom: var(--h1-mb);  text-transform: var(--h1-case);  line-height: var(--h1-lh); }
        .preview-h2      { font-family: var(--font-family); font-size: var(--h2-size);  font-weight: var(--h2-weight);  color: var(--h2-color);  margin-top: var(--h2-mt);  margin-bottom: var(--h2-mb);  text-transform: var(--h2-case);  line-height: var(--h2-lh); }
        .preview-p       { font-family: var(--font-family); font-size: var(--p-size);   font-weight: var(--p-weight);   color: var(--p-color);   margin-top: var(--p-mt);   margin-bottom: var(--p-mb);   line-height: var(--p-lh); }
        .preview-caption { font-family: var(--font-family); font-size: var(--cap-size); font-weight: var(--cap-weight); color: var(--cap-color); margin-top: var(--cap-mt); margin-bottom: var(--cap-mb); text-transform: var(--cap-case); line-height: var(--cap-lh); border-left: 3px solid #ccc; padding-left: 10px; }

        /* ===== EXPORT/IMPORT-MODAL ===== */
        #modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; overflow-y: auto; }
        .modal-body { background: #111; color: #00ffcc; width: 90%; max-width: 1000px; margin: 30px auto; padding: 25px; border-radius: 8px; border: 1px solid #333; }
        .modal-body h3 { margin-top: 0; color: #00ffcc; }
        .modal-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
        .modal-tab { background: #263238; color: #90a4ae; border: 1px solid #37474f; padding: 7px 18px; cursor: pointer; border-radius: 4px; font-size: 12px; }
        .modal-tab.active { background: #00ffcc; color: #000; border-color: #00ffcc; font-weight: bold; }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }
        .btn-close { background: #333; color: #00ffcc; border: 1px solid #555; padding: 7px 18px; cursor: pointer; border-radius: 4px; font-size: 12px; margin-bottom: 12px; }
        .btn-close:hover { background: #444; }
        .btn-import-apply { background: #00ffcc; color: #000; border: none; padding: 8px 22px; font-weight: bold; cursor: pointer; border-radius: 4px; font-size: 12px; margin-top: 8px; }
        .btn-import-apply:hover { background: #00e6b8; }
        #export-text { width: 100%; height: 55vh; background: #000; color: #00ffcc; font-family: 'Courier New', monospace; font-size: 12px; border: 1px solid #444; padding: 15px; margin-top: 8px; resize: vertical; }
        #import-text { width: 100%; height: 40vh; background: #000; color: #aaffee; font-family: 'Courier New', monospace; font-size: 12px; border: 1px solid #444; padding: 15px; margin-top: 8px; resize: vertical; }
        .import-hint { color: #546e7a; font-size: 11px; margin-top: 6px; }