/*
 * LexCraft Arbeitsbereich – Premium Finish
 *
 * Diese Schicht ist absichtlich rein visuell und vollständig unter
 * `.builder-shell` bzw. `.execution-shell` gekapselt. Der Word-Export bleibt
 * dadurch unverändert; ebenso alle Geometrie- und Interaktionsregeln des
 * Arbeitsbereichs (Scrollcontainer, Menüs, Tabellen, Regeln und Eingaben).
 */

.builder-shell {
    --editor-premium-navy: #262b35;
    --editor-premium-navy-deep: #22262f;
    --editor-premium-panel: #f6f8f9;
    --editor-premium-surface: #ffffff;
    --editor-premium-surface-soft: #f8fafb;
    --editor-premium-line: #e1e6e9;
    --editor-premium-line-strong: #cfd7dc;
    --editor-premium-text: #27313a;
    --editor-premium-muted: #77828b;
    --editor-premium-accent: #119e94;
    --editor-premium-accent-dark: #087a72;
    --editor-premium-accent-soft: #e8f7f5;
    --editor-premium-danger: #a83a43;
    --editor-premium-shadow-soft:
        0 1px 2px rgba(22, 31, 38, .035),
        0 7px 22px rgba(22, 31, 38, .045);
    --editor-premium-shadow-menu:
        0 18px 42px rgba(23, 31, 39, .16),
        0 3px 9px rgba(23, 31, 39, .08);

    color: var(--editor-premium-text);
    background: #f2f4f5;
}

/* =========================================================
   KLICK-VERSCHIEBEMODUS
   ========================================================= */

.workspace-reorder-button,
.interview-reorder-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(16, 128, 119, 0.28);
    border-radius: 999px;
    background: #ffffff;
    color: #0b6f68;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.workspace-reorder-button svg,
.interview-reorder-button svg {
    width: 16px;
    height: 16px;
}

.workspace-reorder-button:hover,
.interview-reorder-button:hover,
.workspace-reorder-button.active,
.interview-reorder-button.active {
    border-color: #12a99d;
    background: #e8f8f5;
    color: #075d57;
}

/* Kompakte Anordnung der Verschiebewerkzeuge im Vorlageneditor. */
.builder-shell .workspace-reorder-button {
    height: 31px;
    min-height: 31px;
    margin-left: auto;
    padding: 0 12px;
    font-size: 10px;
}

.builder-shell .interview-reorder-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    margin-left: auto;
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

.builder-shell .interview-reorder-button svg {
    width: 16px;
    height: 16px;
}

.reorder-mode-hint {
    position: fixed;
    z-index: 130;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 12px;
    max-width: min(650px, calc(100vw - 40px));
    padding: 13px 15px;
    border: 1px solid rgba(39, 207, 192, 0.48);
    border-radius: 15px;
    background: rgba(4, 29, 59, 0.96);
    box-shadow: 0 18px 50px rgba(2, 19, 42, 0.28);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.document-reorder-hint {
    right: 24px;
    bottom: 24px;
}

/* Reserve space above the footer so the exit button remains accessible. */
.builder-shell .interview-reorder-hint {
    position: static;
    flex-shrink: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    max-width: none;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-color: #c5e6e1;
    border-radius: 12px;
    background: #eef8f7;
    box-shadow: none;
    backdrop-filter: none;
}

.builder-shell .interview-reorder-hint strong {
    color: #087f77;
    font-size: 12px;
    white-space: normal;
}

.builder-shell .interview-reorder-hint span {
    color: #48615f;
    font-size: 12px;
    line-height: 1.45;
}

.reorder-mode-hint strong {
    color: #41d8ca;
    white-space: nowrap;
}

.reorder-mode-hint span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.35;
}

.reorder-mode-hint button {
    border: 0;
    background: transparent;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.reorder-start-target {
    display: block;
    width: calc(100% - 24px);
    margin: 8px 12px 12px;
    padding: 9px 12px;
    border: 1px dashed #1ab8ac;
    border-radius: 9px;
    background: rgba(28, 197, 184, 0.08);
    color: #08766e;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.reorder-start-target:disabled {
    border-color: #cad6df;
    background: #f4f7f9;
    color: #8493a0;
    cursor: default;
}

.document-reorder-active .doc-row,
.interview-reorder-active .external-question,
.execution-reorder-active .preview-document-element {
    cursor: pointer;
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        outline-color 150ms ease,
        transform 150ms ease;
}

.document-reorder-active .doc-row > *,
.interview-reorder-active .external-question > *,
.execution-reorder-active .preview-document-element > * {
    pointer-events: none;
}

.document-reorder-active .doc-row:hover,
.interview-reorder-active .external-question:hover,
.execution-reorder-active .preview-document-element:hover {
    background: rgba(31, 199, 186, 0.09);
    box-shadow: inset 0 -3px 0 #18b9ad;
}

.execution-reorder-active .preview-layout {
    grid-template-columns: minmax(0, 1fr);
}

.execution-reorder-active .preview-interview-panel {
    display: none;
}

.doc-row.reorder-source,
.external-question.reorder-source,
.preview-document-element.reorder-source {
    outline: 3px solid #14bbae;
    outline-offset: 3px;
    background: rgba(29, 201, 188, 0.14) !important;
    box-shadow: 0 12px 26px rgba(10, 116, 108, 0.14);
}

.execution-reorder-controls {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 145;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.execution-reorder-fab {
    display: inline-flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: linear-gradient(145deg, #24cfc0, #0a9188);
    box-shadow: 0 15px 38px rgba(2, 38, 68, 0.34);
    color: #042345;
    cursor: pointer;
}

.execution-reorder-fab:hover,
.execution-reorder-controls.active .execution-reorder-fab {
    transform: translateY(-2px);
    background: #ffffff;
    color: #087d75;
}

.execution-reorder-fab svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

.execution-reorder-panel {
    display: grid;
    width: min(390px, calc(100vw - 120px));
    gap: 7px;
    padding: 15px 16px;
    border: 1px solid rgba(61, 220, 206, 0.36);
    border-radius: 16px;
    background: rgba(4, 27, 56, 0.96);
    box-shadow: 0 18px 50px rgba(2, 18, 39, 0.36);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.execution-reorder-panel strong {
    color: #43d9cb;
}

.execution-reorder-panel span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.4;
}

.execution-reorder-panel button {
    justify-self: start;
    padding: 3px 0;
    border: 0;
    border-bottom: 1px solid rgba(68, 218, 204, 0.48);
    background: transparent;
    color: #52ddcf;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .reorder-mode-hint {
        grid-template-columns: 1fr auto;
    }

    .reorder-mode-hint span {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.builder-shell .builder-topbar,
.builder-shell .interview-panel,
.builder-shell .editor-toolbar,
.builder-shell .document-footer-actions,
.execution-shell .execution-topbar,
.execution-shell .preview-interview-panel {
    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;
}

/* Kopfzeile */

.builder-shell .builder-topbar {
    display: grid;
    grid-template-columns:
        max-content minmax(0, 1fr) max-content;
    column-gap: 12px;
    border-bottom-color: #1f232b;
    background:
        linear-gradient(
            180deg,
            #10243d 0%,
            #091a31 100%
        );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 3px 12px rgba(20, 24, 30, .12);
}

.builder-shell .editor-title-group {
    position: static;
    min-width: 0;
    max-width: none;
    justify-content: center;
    overflow: hidden;
    transform: none;
}

.builder-shell .editor-title {
    min-width: 0;
    text-overflow: ellipsis;
}

.builder-shell .editor-actions {
    min-width: max-content;
    justify-content: flex-end;
}

.builder-shell .editor-title {
    color: #f5f7f8;
    font-size: 10.75px;
    font-weight: 760;
    letter-spacing: .065em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.builder-shell .editor-mode-badge {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    color: #e4e8eb;
    font-weight: 760;
    letter-spacing: .055em;
}

.builder-shell .topbar-button,
.builder-shell .topbar-primary {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    font-size: 9.75px;
    font-weight: 760;
    letter-spacing: .025em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .055) inset,
        0 1px 2px rgba(0, 0, 0, .08);
    transition:
        border-color .14s ease,
        background-color .14s ease,
        color .14s ease,
        box-shadow .14s ease;
}

.builder-shell .topbar-button {
    background: rgba(255, 255, 255, .1);
    color: #f1f4f5;
}

.builder-shell .topbar-button:hover,
.builder-shell .topbar-button.active {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .17);
    color: #ffffff;
}

.builder-shell .topbar-button:disabled,
.builder-shell .topbar-primary:disabled {
    cursor: wait;
    opacity: .58;
    box-shadow: none;
}

.builder-shell .topbar-primary,
.builder-shell .topbar-preview-button,
.builder-shell .topbar-options-button {
    border-color: rgba(97, 222, 211, .3);
    background: #159f98;
    color: #ffffff;
}

.builder-shell .topbar-primary:hover,
.builder-shell .topbar-preview-button:hover,
.builder-shell .topbar-options-button:hover,
.builder-shell .topbar-options-button.active {
    border-color: rgba(126, 235, 226, .42);
    background: #0e8e87;
}

.builder-shell .topbar-danger-button {
    border-color: rgba(235, 155, 162, .32);
    background: rgba(167, 54, 65, .2);
    color: #ffdfe2;
}

.builder-shell .topbar-danger-button:hover {
    border-color: rgba(247, 173, 180, .48);
    background: rgba(175, 55, 67, .34);
    color: #ffffff;
}

/* Interview – dieselbe Struktur, aber ruhigere Materialität */

.builder-shell .interview-panel {
    border-right-color: #dce2e6;
    background:
        linear-gradient(
            180deg,
            #f9fafb 0%,
            var(--editor-premium-panel) 100%
        );
}

/* Die Scrollleiste nutzt den äußeren Abstand neben den Interviewkarten. */
.builder-shell .interview-section-list {
    margin-right: -18px;
    padding: 0 20px 24px 1px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b7c3c9 transparent;
}

.builder-shell .interview-section-list::-webkit-scrollbar {
    width: 8px;
}

.builder-shell .interview-section-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b7c3c9;
    background-clip: padding-box;
}

.builder-shell .interview-section-list::-webkit-scrollbar-track {
    background: transparent;
}

.builder-shell .external-section-block {
    border-color: var(--editor-premium-line);
    border-radius: 10px;
    background: var(--editor-premium-surface);
    box-shadow: var(--editor-premium-shadow-soft);
}

.builder-shell .external-section-head {
    border-radius: 10px 10px 0 0;
    background:
        linear-gradient(
            180deg,
            #fbfcfc 0%,
            #f6f8f9 100%
        );
    transition: background-color .14s ease;
}

.builder-shell
.external-section-block:not(.open)
.external-section-head {
    border-radius: 10px;
}

.builder-shell .external-section-head:hover {
    background: #f2f6f6;
}

.builder-shell .external-section-block.open {
    border-color: #ccd9dd;
    box-shadow:
        0 1px 2px rgba(22, 31, 38, .04),
        0 10px 26px rgba(22, 31, 38, .055);
}

.builder-shell
.external-section-block.open
.external-section-head {
    box-shadow: inset 3px 0 0 var(--editor-premium-accent);
}

.builder-shell .interview-toggle {
    color: var(--editor-premium-accent);
    border-radius: 5px;
}

.builder-shell .interview-toggle:hover,
.builder-shell .interview-toggle:focus-visible {
    outline: none;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
}

.builder-shell .external-section-title-textarea {
    color: var(--editor-premium-text);
    font-weight: 740;
}

.builder-shell .external-section-title-textarea:focus {
    outline: none;
    box-shadow: 0 1px 0 var(--editor-premium-accent);
}

.builder-shell .external-question {
    border-color: #e4e8eb;
    border-radius: 8px;
    background: #fdfefe;
    box-shadow: 0 1px 2px rgba(24, 34, 42, .025);
    transition:
        border-color .14s ease,
        background-color .14s ease,
        box-shadow .14s ease;
}

.builder-shell
.external-question:not(.rule-target-active):not(.series-target-active):hover,
.builder-shell
.external-question:not(.rule-target-active):not(.series-target-active):focus-within {
    border-color: #cdd8dc;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(24, 34, 42, .045);
}

.builder-shell .external-question-kicker {
    color: #85919a;
    font-weight: 790;
}

.builder-shell .external-question-title {
    color: #28323a;
    font-weight: 660;
}

.builder-shell .external-question-title:focus {
    outline: none;
    background: #f8fbfb;
    box-shadow: 0 1px 0 rgba(17, 158, 148, .72);
}

.builder-shell .external-question-divider {
    background: #edf0f2;
}

.builder-shell .external-series-card {
    border: 1px solid #dfe5e8;
    border-radius: 7px;
    background: #f7f9fa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.builder-shell .external-series-symbol {
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(79, 59, 134, .14);
}

.builder-shell .interview-question-creator {
    margin: 0 12px 14px 8px;
}

.builder-shell .external-small-button.interview-question-create-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    margin: 0;
    border: 1px dashed #cbd8dc;
    border-radius: 8px;
    background: #f8fafb;
    color: var(--editor-premium-accent-dark);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: normal;
    box-shadow: none;
}

.builder-shell .external-small-button.interview-question-create-button > [aria-hidden] {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.builder-shell .external-small-button.interview-question-create-button:hover,
.builder-shell .external-small-button.interview-question-create-button[aria-expanded="true"] {
    border-color: #b9d8d3;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
}

.builder-shell .interview-question-creator .question-type-box {
    width: 100%;
    margin: 8px 0 0;
    padding: 8px;
    border: 1px solid #e1e7ea;
    border-radius: 10px;
    background: #f8fafb;
    box-shadow: none;
}

.builder-shell .interview-question-creator .question-type-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.builder-shell .interview-question-creator .question-type-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    height: auto;
    padding: 10px 6px;
    border: 1px solid #dce3e7;
    border-radius: 6px;
    background: #ffffff;
    color: var(--editor-premium-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

.builder-shell .interview-question-creator .question-type-tabs button:hover {
    border-color: #a6cfc8;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
}

.builder-shell .interview-question-creator button:focus-visible {
    outline: 2px solid var(--editor-premium-accent);
    outline-offset: 2px;
}

.builder-shell .external-choice-option-row,
.builder-shell .external-text-field-row {
    border-color: #dfe5e8;
    background: #f7f9fa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.builder-shell
.external-choice-option-row:not(.rule-selectable):hover,
.builder-shell
.external-choice-option-row:not(.rule-selectable):focus-within,
.builder-shell
.external-text-field-row:not(.rule-target-active):not(.series-target-active):hover,
.builder-shell
.external-text-field-row:not(.rule-target-active):not(.series-target-active):focus-within {
    border-color: #adc8c5;
    background: #fbfcfc;
    box-shadow:
        0 0 0 2px rgba(17, 158, 148, .065),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

.builder-shell .external-text-field-main {
    border-right-color: #e1e6e9;
}

.builder-shell .external-text-field-label,
.builder-shell .external-choice-option-input {
    color: #303a42;
}

.builder-shell .external-choice-control {
    border-color: #849098;
    background: #ffffff;
}

.builder-shell .external-choice-delete {
    border-radius: 5px;
    transition:
        background-color .12s ease,
        color .12s ease,
        opacity .12s ease;
}

.builder-shell .external-choice-delete:hover,
.builder-shell .external-choice-delete:focus-visible {
    outline: none;
    background: #fff0f1;
    color: var(--editor-premium-danger);
    opacity: 1;
}

.builder-shell .external-add-textfield {
    color: #5f6b73;
    font-weight: 680;
}

.builder-shell .external-add-textfield:hover {
    color: var(--editor-premium-accent-dark);
}

.builder-shell .external-small-button,
.builder-shell .external-section-button {
    border: 1px solid #d8dee2;
    border-radius: 6px;
    background: #eef1f3;
    color: #4f5b64;
    font-weight: 760;
    box-shadow: 0 1px 1px rgba(25, 34, 41, .035);
}

.builder-shell .external-small-button:hover,
.builder-shell .external-section-button:hover {
    border-color: #c3ced3;
    background: #e7ecee;
    color: #27323a;
}

.builder-shell .interview-footer {
    border-top-color: #e3e7ea;
    background: rgba(248, 250, 251, .97);
    box-shadow: 0 -8px 24px rgba(29, 38, 45, .025);
}

/* Aktionsbuttons */

.builder-shell .section-dots,
.builder-shell .external-text-field-dots,
.builder-shell .element-menu-button {
    border-color: #d7dee2;
    border-radius: 6px;
    background: #f3f6f7;
    color: #68747d;
    box-shadow: 0 1px 1px rgba(25, 34, 41, .025);
    transition:
        border-color .14s ease,
        background-color .14s ease,
        color .14s ease,
        box-shadow .14s ease;
}

.builder-shell .section-dots:hover,
.builder-shell .external-text-field-dots:hover,
.builder-shell .element-menu-button:hover,
.builder-shell .section-dots:focus-visible,
.builder-shell .external-text-field-dots:focus-visible,
.builder-shell .element-menu-button:focus-visible {
    border-color: #aebdc3;
    outline: none;
    background: #e9eff0;
    color: #25323a;
    box-shadow: 0 2px 5px rgba(25, 34, 41, .07);
}

.builder-shell .element-menu-button.linked {
    border-color: #83c9c3;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
}

.builder-shell .external-question-rule,
.builder-shell .external-question-series,
.builder-shell .element-rules-button {
    border: 1px solid #d2d9dd;
    border-radius: 5px;
    background: #e9edef;
    color: #5d6870;
    font-weight: 790;
    letter-spacing: .025em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
}

.builder-shell .external-question-rule:hover,
.builder-shell .external-question-rule.linked,
.builder-shell .element-rules-button:hover,
.builder-shell .element-rules-button.linked {
    border-color: #59b8b0;
    background: var(--editor-premium-accent);
    color: #ffffff;
}

/* Der rote Bearbeitungszustand besitzt funktionale Priorität vor dem
   türkisen Verknüpfungszustand. */

.builder-shell .element-rules-button.editing,
.builder-shell .element-rules-button.editing:hover,
.builder-shell .element-rules-button.linked.editing,
.builder-shell .element-rules-button.linked.editing:hover {
    border-color: #c34d57;
    background: #d85d66;
    color: #ffffff;
}

.builder-shell .external-question-series:hover,
.builder-shell .external-question-series.linked {
    border-color: #8b74c7;
    background: #8870c1;
    color: #ffffff;
}

.builder-shell .external-question-delete {
    border-radius: 4px;
}

.builder-shell .external-question-delete:hover {
    background: #fff1f2;
    color: var(--editor-premium-danger);
}

/* Interview-Fragetitel erhalten die volle Kartenbreite. Dynamische Inhalte
   brechen nur noch an Wortgrenzen; die Aktionen stehen ruhig darunter. */

.builder-shell .external-question-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 7px;
}

.builder-shell .external-question-title {
    width: 100%;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.builder-shell .external-question-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.builder-shell
.external-question-title-rich
.document-inline-rule,
.builder-shell
.external-question-title-rich
.document-placeholder {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.builder-shell
.external-question-title-rich
.document-inline-rule.linked {
    padding: 0 3px;
    border: 0;
    border-bottom: 1.5px solid #238d84;
    border-radius: 2px;
    background: #e9f5f3;
    color: #29423f;
}

.builder-shell
.external-question-title-rich
.document-placeholder {
    display: inline;
    margin: 0 2px;
    padding: 1px 5px;
    border-color: #b9c5cb;
    background: #eef1f3;
    color: #34414a;
}

.builder-shell:has(
    .document-placeholder.placeholder-selected
)
.external-text-field-row,
.builder-shell:has(
    .document-placeholder.placeholder-selected
)
.external-choice-options {
    border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(17, 158, 148, .12);
}

/* Sämtliche Drei-Punkte-Menüs teilen dieselbe visuelle Sprache.
   Position, Sichtbarkeit und Z-Index kommen weiterhin aus style.css. */

.builder-shell .section-actions-outside,
.builder-shell .text-field-actions,
.builder-shell .element-menu {
    border: 1px solid #dbe2e6;
    border-radius: 10px;
    background: rgba(255, 255, 255, .985);
    box-shadow: var(--editor-premium-shadow-menu);
}

.builder-shell .section-rule-button,
.builder-shell .section-delete-button,
.builder-shell .text-field-rule-button,
.builder-shell .text-field-delete-button,
.builder-shell .element-menu button {
    border-radius: 6px;
    color: #3c4851;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .02em;
}

.builder-shell .element-menu button:hover {
    background: #f0f5f5;
    color: #1d6f69;
}

.builder-shell .element-menu .danger-text,
.builder-shell .section-delete-button,
.builder-shell .text-field-delete-button {
    color: var(--editor-premium-danger);
}

.builder-shell .element-menu .danger-text:hover,
.builder-shell .section-delete-button:hover,
.builder-shell .text-field-delete-button:hover {
    background: #fff0f1;
    color: #8e2d36;
}

.builder-shell .element-menu .active-option,
.builder-shell .section-rule-button.linked,
.builder-shell .text-field-rule-button.linked {
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
}

/* Dokument-Toolbar */

.builder-shell .editor-document-area {
    background: #f4f6f7;
}

.builder-shell
.editor-document-area .editor-toolbar {
    border-bottom-color: #dfe5e8;
    background: rgba(255, 255, 255, .985);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .75) inset,
        0 3px 12px rgba(24, 33, 40, .045);
}

.builder-shell
.editor-document-area .toolbar-primary {
    border: 1px solid #0f9188;
    border-radius: 6px;
    background: #13a59b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 770;
    letter-spacing: .02em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .15) inset,
        0 2px 4px rgba(7, 102, 95, .12);
    transition:
        border-color .14s ease,
        background-color .14s ease,
        box-shadow .14s ease;
}

.builder-shell
.editor-document-area .toolbar-primary:hover {
    border-color: #087a72;
    background: #0d9188;
    box-shadow: 0 3px 8px rgba(7, 102, 95, .16);
}

.builder-shell
.editor-document-area .toolbar-icon {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #4b5760;
    transition:
        border-color .12s ease,
        background-color .12s ease,
        color .12s ease,
        box-shadow .12s ease;
}

.builder-shell
.editor-document-area .toolbar-icon:hover {
    border-color: #d7dfe3;
    background: #f1f5f6;
    color: #243139;
}

.builder-shell .editor-history-controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.builder-shell
.editor-document-area .editor-history-button:disabled,
.builder-shell
.editor-document-area .editor-history-button:disabled:hover {
    cursor: default;
    border-color: transparent;
    background: transparent;
    color: #aeb7bd;
    box-shadow: none;
    opacity: .62;
}

.builder-shell
.editor-document-area .toolbar-icon.active,
.builder-shell
.editor-document-area .toolbar-icon[aria-pressed="true"] {
    border-color: #9bd4cf;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
    box-shadow: inset 0 0 0 1px rgba(17, 158, 148, .08);
}

.builder-shell .toolbar-divider {
    background: #e1e6e9;
}

/* Dokumentfläche: kein Reflow, nur subtilere Zustände. */

.builder-shell .document-canvas-scroll {
    background: #f7f8f9;
}

.builder-shell .editor-paper {
    background: #ffffff;
    box-shadow:
        inset 1px 0 0 #edf0f2,
        inset -1px 0 0 #edf0f2,
        0 10px 30px rgba(27, 36, 43, .045);
}

.builder-shell .doc-row {
    border-radius: 5px;
    transition:
        background-color .1s ease,
        box-shadow .1s ease;
}

.builder-shell .doc-row:hover:not(.selected) {
    background-color: rgba(244, 247, 248, .72);
}

.builder-shell .doc-row.selected {
    background-color: #f1f7f6;
    box-shadow: inset 0 0 0 1px #cbdedb;
}

.builder-shell
.doc-row:has(.doc-element.paragraph).selected::before {
    border-color: #cbdedb;
    border-radius: 5px;
    background: #f1f7f6;
}

.builder-shell .doc-element {
    color: #2d363d;
}

.builder-shell .doc-element.paragraph {
    color: #343d44;
}

.builder-shell .doc-element:focus {
    outline: none;
}

.builder-shell .document-heading-toggle:hover,
.builder-shell .document-heading-toggle:focus-visible {
    outline: none;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
}

.builder-shell .document-footer-actions {
    border-top-color: #e1e6e9;
    background: rgba(255, 255, 255, .985);
    box-shadow: 0 -4px 16px rgba(27, 36, 43, .035);
}

.builder-shell .workspace-create-button {
    border: 1px solid #d5dde1;
    border-radius: 6px;
    background: #eef2f4;
    color: #4e5a63;
    font-weight: 770;
    box-shadow: 0 1px 2px rgba(24, 33, 40, .035);
    transition:
        border-color .13s ease,
        background-color .13s ease,
        color .13s ease,
        box-shadow .13s ease;
}

.builder-shell .workspace-create-button.secondary {
    background: #ffffff;
}

.builder-shell .workspace-create-button:hover,
.builder-shell .workspace-create-button.secondary:hover {
    border-color: #80c6c0;
    background: var(--editor-premium-accent-soft);
    color: var(--editor-premium-accent-dark);
    box-shadow: 0 3px 8px rgba(17, 121, 113, .08);
}

/* Tabellenwerkzeuge folgen der Oberfläche, ohne Tabellengeometrie,
   Zellzustände oder die Profilzuordnung zu verändern. */

.builder-shell .document-table-controls {
    border-color: #dce4e7;
    border-radius: 8px;
    background: #f7fafb;
    box-shadow: 0 3px 12px rgba(25, 35, 43, .04);
}

.builder-shell .document-table-design-panel {
    border-color: #d2e2e0;
    border-radius: 7px;
    box-shadow: 0 2px 7px rgba(25, 42, 46, .045);
}

.builder-shell .document-table-action {
    border-radius: 6px;
    transition:
        border-color .12s ease,
        background-color .12s ease,
        color .12s ease,
        box-shadow .12s ease;
}

.builder-shell .document-table-action:hover {
    box-shadow: 0 2px 5px rgba(17, 121, 113, .09);
}

/* Tokens und Statusanzeigen behalten ihre Bedeutung, wirken aber wie
   Bestandteile eines gemeinsamen Designsystems. */

.builder-shell .document-placeholder,
.builder-shell .document-inline-rule,
.builder-shell .document-value-field,
.builder-shell .lexcraft-function-token {
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}

.builder-shell .document-state-badge,
.builder-shell .external-field-badge,
.builder-shell .external-option-badge {
    border-radius: 999px;
    font-weight: 780;
    letter-spacing: .035em;
    box-shadow: inset 0 0 0 1px rgba(72, 84, 94, .06);
}

/* =========================================================
   AUSFÜHRUNG – RUHIGER, HOCHWERTIGER ARBEITSBEREICH
   Ausschließlich visuelle Zustände; Interviewlogik, Dokumentinhalt,
   Scrollposition und Export bleiben vollständig unangetastet.
   ========================================================= */

.execution-shell {
    --execution-premium-navy: #091a31;
    --execution-premium-ink: #21303c;
    --execution-premium-muted: #687985;
    --execution-premium-line: #e1e7ea;
    --execution-premium-line-strong: #cfd9de;
    --execution-premium-surface: #ffffff;
    --execution-premium-soft: #f7f9fa;
    --execution-premium-accent: #119e94;
    --execution-premium-accent-dark: #087a72;
    --execution-premium-accent-soft: #edf8f6;
    --execution-premium-shadow:
        0 1px 2px rgba(20, 29, 37, .035),
        0 12px 34px rgba(20, 29, 37, .085);

    color: var(--execution-premium-ink);
    background: #e9eef1;
}

.execution-shell .execution-topbar {
    border-bottom-color: #061426;
    background: #0b2038;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .045) inset,
        0 2px 10px rgba(7, 16, 29, .14);
}

.execution-shell .editor-title {
    color: #f4f8f9;
    font-weight: 770;
    letter-spacing: .055em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.execution-shell .execution-mode-badge {
    border: 1px solid rgba(110, 231, 220, .28);
    border-radius: 999px;
    background: #119e94;
    color: #ffffff;
    letter-spacing: .055em;
    box-shadow: none;
}

.execution-shell .topbar-button,
.execution-shell .topbar-primary {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 6px;
    color: #f4f7f8;
    font-weight: 760;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 1px 2px rgba(0, 0, 0, .1);
    transition:
        border-color .14s ease,
        background-color .14s ease,
        box-shadow .14s ease;
}

.execution-shell .topbar-button {
    background: rgba(255, 255, 255, .1);
}

.execution-shell .topbar-button:hover,
.execution-shell .topbar-button:focus-visible {
    border-color: rgba(255, 255, 255, .25);
    outline: none;
    background: rgba(255, 255, 255, .17);
}

.execution-shell .topbar-primary {
    border-color: rgba(93, 219, 209, .34);
    background: var(--execution-premium-accent);
}

.execution-shell .topbar-primary:hover,
.execution-shell .topbar-primary:focus-visible {
    border-color: rgba(125, 235, 227, .48);
    outline: none;
    background: var(--execution-premium-accent-dark);
    box-shadow: 0 3px 8px rgba(4, 90, 83, .2);
}

.execution-shell .preview-interview-panel {
    border-right-color: #dce4e8;
    background: #ffffff;
    scrollbar-color: #bdc8cd transparent;
    scrollbar-width: thin;
}

.execution-shell .preview-panel-heading {
    padding: 25px 24px 20px;
    border-bottom-color: #e2e8eb;
    background: rgba(255, 255, 255, .98);
    box-shadow: none;
    backdrop-filter: none;
}

.execution-shell .preview-panel-heading strong {
    color: #172535;
    font-size: 17px;
    font-weight: 740;
    letter-spacing: -.012em;
}

.execution-shell .preview-panel-eyebrow {
    color: var(--execution-premium-accent-dark);
    font-weight: 790;
    letter-spacing: .12em;
}

.execution-shell .preview-document-caption {
    color: var(--execution-premium-muted);
    font-weight: 760;
    letter-spacing: .1em;
}

.execution-shell .preview-interview-list {
    padding: 8px 20px 36px;
}

.execution-shell .preview-section {
    border-bottom-color: #e1e7ea;
}

.execution-shell .preview-section-header {
    position: relative;
    min-height: 56px;
    padding: 13px 8px;
    border-radius: 0;
    transition:
        background-color .13s ease,
        box-shadow .13s ease;
}

.execution-shell .preview-section-header:hover {
    background: #f5f8f9;
}

.execution-shell .preview-section.open .preview-section-header {
    border-radius: 6px;
    background: var(--execution-premium-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(17, 158, 148, .08);
}

.execution-shell .preview-section-arrow {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: var(--execution-premium-accent);
}

.execution-shell
.preview-section.open
.preview-section-arrow {
    background: transparent;
    color: var(--execution-premium-accent-dark);
}

.execution-shell .preview-section-title {
    color: #26333e;
    font-weight: 720;
}

.execution-shell
.preview-section.open
.preview-section-title {
    color: #0b625c;
    font-weight: 760;
}

.execution-shell .preview-section-content {
    padding: 18px 8px 26px 24px;
}

.execution-shell .preview-question {
    position: relative;
}

.execution-shell
.preview-question:not(:last-child) {
    padding-bottom: 22px;
    border-bottom: 1px solid #e7ecee;
}

.execution-shell .preview-question-title {
    margin-bottom: 13px;
    color: #1f2d38;
    font-weight: 710;
    line-height: 1.45;
}

.execution-shell .preview-field-label {
    color: #5b6873;
    font-weight: 650;
}

.execution-shell .mandate-field-status {
    min-height: 19px;
    padding-inline: 7px;
    font-size: 9.5px;
    letter-spacing: .055em;
    box-shadow: inset 0 0 0 1px rgba(64, 80, 91, .055);
}

.execution-shell .preview-field-input {
    border: 1px solid #d5dde1;
    border-radius: 7px;
    background: #fbfcfc;
    color: #26343e;
    box-shadow:
        inset 0 1px 1px rgba(25, 35, 43, .025),
        0 1px 1px rgba(255, 255, 255, .7);
    transition:
        border-color .13s ease,
        background-color .13s ease,
        box-shadow .13s ease;
}

.execution-shell .preview-field-input:hover {
    border-color: #bdc9ce;
    background: #ffffff;
}

.execution-shell .preview-field-input:focus,
.execution-shell .preview-field-input:focus-visible {
    border-color: #72bdb7;
    outline: none;
    background: #ffffff;
    box-shadow:
        0 0 0 3px rgba(17, 158, 148, .1),
        inset 0 1px 1px rgba(25, 35, 43, .02);
}

.execution-shell .preview-choice-list {
    gap: 8px;
}

.execution-shell .preview-choice-option {
    min-height: 42px;
    padding: 9px 12px;
    border-color: #d7e0e4;
    border-radius: 8px;
    background: #ffffff;
    color: #2c3943;
    box-shadow: 0 1px 1px rgba(22, 34, 43, .018);
    transition:
        border-color .13s ease,
        background-color .13s ease,
        color .13s ease,
        box-shadow .13s ease,
        transform .13s ease;
}

.execution-shell .preview-choice-option:hover {
    border-color: #a9c8c5;
    background: #fbfdfd;
    box-shadow: 0 2px 7px rgba(23, 42, 47, .045);
}

.execution-shell
.preview-choice-option:has(input:checked) {
    border-color: #77c5be;
    background: var(--execution-premium-accent-soft);
    color: #173e3a;
    box-shadow: 0 0 0 1px rgba(17, 158, 148, .055);
}

.execution-shell
.preview-choice-option:has(input:focus-visible) {
    border-color: var(--execution-premium-accent);
    outline: 2px solid rgba(17, 158, 148, .2);
    outline-offset: 2px;
}

.execution-shell .preview-choice-indicator {
    border-color: #7f8b94;
    box-shadow: 0 1px 2px rgba(25, 35, 43, .04);
}

.execution-shell
.preview-choice-option input:checked +
.preview-choice-indicator {
    border-color: var(--execution-premium-accent-dark);
    background: var(--execution-premium-accent);
}

.execution-shell .preview-choice-label {
    font-weight: 600;
    line-height: 1.4;
}

.execution-shell .preview-document-area {
    background: #edf1f3;
}

.execution-shell .preview-document-caption {
    margin-bottom: 11px;
    color: #687886;
}

.execution-shell .preview-paper {
    border-color: #dce3e7;
    box-shadow: var(--execution-premium-shadow);
}

.execution-shell .preview-document-focus {
    border-radius: 2px;
    background: rgba(17, 158, 148, .11);
    box-shadow:
        inset 3px 0 0 var(--execution-premium-accent),
        0 0 0 3px rgba(17, 158, 148, .055);
}

.execution-shell .preview-interview-list::-webkit-scrollbar,
.execution-shell .preview-document-area::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.execution-shell .preview-interview-list::-webkit-scrollbar-thumb,
.execution-shell .preview-document-area::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #bdc8cd;
    background-clip: padding-box;
}

.execution-shell .preview-interview-list::-webkit-scrollbar-track,
.execution-shell .preview-document-area::-webkit-scrollbar-track {
    background: transparent;
}

/* In Vorschau und Ausführung sind Platzhalter reiner Dokumentinhalt.
   Editor-Zustände wie verknüpft, leer oder ausgewählt dürfen dort keine
   grauen Flächen, Rahmen oder zusätzlichen Abstände erzeugen. */
.preview-document .document-placeholder {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: default;
}

/* =========================================================
   OPTIONALER FREITEXTMODUS

   Der Zustand wird ausschließlich über ein ausdrücklich gesetztes
   data-Attribut am einzelnen Platzhalter aktiviert. Normale und bereits
   vorhandene Platzhalter behalten dadurch exakt ihr bisheriges Verhalten.
   ========================================================= */

.builder-shell
.document-placeholder[data-lexcraft-free-text="true"] {
    border-bottom-color: #119e94;
    border-bottom-style: dashed;
    background: #e8f7f5;
    box-shadow: inset 0 -2px 0 rgba(17, 158, 148, .18);
}

.placeholder-free-text-menu {
    position: fixed;
    z-index: 2500;
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid #cbd8dc;
    border-radius: 10px;
    background: #ffffff;
    box-shadow:
        0 18px 42px rgba(23, 31, 39, .16),
        0 3px 9px rgba(23, 31, 39, .08);
    color: #27313a;
    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;
}

.placeholder-free-text-menu strong {
    color: #172535;
    font-size: 13px;
    font-weight: 800;
}

.placeholder-free-text-menu span {
    color: #66747f;
    font-size: 12px;
    line-height: 1.45;
}

.placeholder-free-text-menu button {
    justify-self: start;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(17, 158, 148, .34);
    border-radius: 6px;
    background: #e8f7f5;
    color: #087a72;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.placeholder-free-text-menu button:hover:not(:disabled),
.placeholder-free-text-menu button:focus-visible {
    border-color: #119e94;
    outline: 2px solid rgba(17, 158, 148, .18);
    outline-offset: 2px;
    background: #d9f2ef;
}

.placeholder-free-text-menu button:disabled {
    border-color: #d7dee2;
    background: #f4f6f7;
    color: #929ca4;
    cursor: default;
}

/* Nach dem allgemeinen Vorschau-Reset bewusst spezifischer gesetzt. */
.execution-shell
.preview-document
.document-placeholder.preview-free-text-trigger {
    display: inline;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-bottom: 1.5px dashed rgba(17, 158, 148, .82);
    border-radius: 2px;
    outline: 0;
    background: rgba(17, 158, 148, .07);
    color: inherit;
    box-shadow: none;
    white-space: break-spaces;
    cursor: text;
}

.execution-shell
.preview-document
.document-placeholder.preview-free-text-trigger:not(.preview-free-text-active):empty {
    display: inline-block;
    min-width: 2.5em;
    min-height: 1em;
}

.execution-shell
.preview-document
.document-placeholder.preview-free-text-trigger:not(.preview-free-text-active):empty::before {
    content: "\00a0";
}

.execution-shell
.preview-document
.document-placeholder.preview-free-text-trigger:hover,
.execution-shell
.preview-document
.document-placeholder.preview-free-text-trigger:focus-visible {
    border-bottom-color: #087a72;
    outline: 2px solid rgba(17, 158, 148, .18);
    outline-offset: 2px;
    background: rgba(17, 158, 148, .13);
}

.execution-shell.free-text-mode-active .preview-layout {
    grid-template-columns: minmax(0, 1fr);
}

.execution-shell.free-text-mode-active
.preview-interview-panel {
    display: none;
}

.execution-shell.free-text-mode-active
.preview-document-area {
    padding-right: clamp(28px, 8vw, 120px);
    padding-left: clamp(28px, 8vw, 120px);
}

.execution-shell.free-text-mode-active
.preview-document-frame {
    width: min(980px, 100%);
}

/* In Tabellen bleibt beim Wechsel in den fokussierten Freitextmodus die
   zuvor sichtbare Satzbreite erhalten. So veraendert die Eingabe weder
   Tabellen- noch Zellbreite; nur die Zeilenhoehe darf mitwachsen. */
.execution-shell.free-text-mode-active.free-text-table-mode-active
.preview-document-frame {
    width: min(
        var(
            --preview-free-text-table-frame-width,
            900px
        ),
        100%
    );
}

.execution-shell.free-text-mode-active
.execution-reorder-controls {
    display: none;
}

.execution-shell.free-text-mode-active
.preview-document
.preview-free-text-trigger:not(.preview-free-text-active) {
    border-bottom-color: transparent;
    outline: 0;
    background: transparent;
    pointer-events: none;
}

.execution-shell
.preview-document
.document-placeholder.preview-free-text-active {
    display: block;
    width: 100%;
    min-height: 1.5em;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    border-radius: 3px;
    outline: 2px solid #15b5a8;
    outline-offset: 4px;
    background: rgba(21, 181, 168, .075);
    color: inherit;
    box-shadow: 0 0 0 7px rgba(21, 181, 168, .045);
    white-space: break-spaces;
    word-break: break-word;
    caret-color: #087a72;
    cursor: text;
    user-select: text;
}

.execution-shell
.preview-document
.document-placeholder.preview-free-text-active.preview-free-text-inline {
    display: inline;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 2px 3px;
    border-radius: 2px;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(21, 181, 168, .04);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.execution-shell
.preview-document
.lexcraft-inline-table
.document-placeholder.preview-free-text-active {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.execution-shell
.preview-document
.document-placeholder.preview-free-text-active:focus {
    outline: 2px solid #0d9f94;
    background: rgba(21, 181, 168, .09);
}

.preview-free-text-toolbar {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 155;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: min(440px, calc(100vw - 56px));
    padding: 13px 14px 13px 16px;
    border: 1px solid rgba(61, 220, 206, .38);
    border-radius: 14px;
    background: rgba(4, 27, 56, .96);
    box-shadow: 0 18px 50px rgba(2, 18, 39, .36);
    color: #ffffff;
    font-family:
        Inter,
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;
    backdrop-filter: blur(12px);
}

.preview-free-text-toolbar > span {
    display: grid;
    gap: 2px;
}

.preview-free-text-toolbar strong {
    color: #43d9cb;
    font-size: 13px;
}

.preview-free-text-toolbar small {
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    line-height: 1.35;
}

.preview-free-text-toolbar button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(99, 231, 220, .46);
    border-radius: 6px;
    background: #119e94;
    color: #ffffff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.preview-free-text-toolbar button:hover,
.preview-free-text-toolbar button:focus-visible {
    border-color: rgba(255, 255, 255, .72);
    outline: 2px solid rgba(83, 217, 205, .28);
    outline-offset: 2px;
    background: #087a72;
}

@media (max-width: 760px) {
    .execution-shell.free-text-mode-active
    .preview-document-area {
        padding-right: 20px;
        padding-left: 20px;
    }

    .preview-free-text-toolbar {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}

/* Einheitlicher, sichtbarer Tastaturfokus ohne Layoutverschiebung. */

.builder-shell .topbar-button:focus-visible,
.builder-shell .topbar-primary:focus-visible,
.builder-shell .toolbar-primary:focus-visible,
.builder-shell .toolbar-icon:focus-visible,
.builder-shell .external-small-button:focus-visible,
.builder-shell .external-section-button:focus-visible,
.builder-shell .external-question-rule:focus-visible,
.builder-shell .external-question-series:focus-visible,
.builder-shell .element-rules-button:focus-visible,
.builder-shell .section-rule-button:focus-visible,
.builder-shell .section-delete-button:focus-visible,
.builder-shell .text-field-rule-button:focus-visible,
.builder-shell .text-field-delete-button:focus-visible,
.builder-shell .element-menu button:focus-visible {
    outline: 2px solid rgba(83, 202, 193, .82);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .builder-shell *,
    .builder-shell *::before,
    .builder-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   INTERVIEW-POLISH – RUHIGE KOMPONENTEN IM BEARBEITUNGSMODUS

   Diese Schicht veraendert ausschliesslich die Materialitaet des
   Interviewbereichs. Geometrie, Reihenfolge, Bedienlogik und die
   Dokumentansicht bleiben unveraendert.
   ========================================================= */

.builder-shell .interview-panel {
    background: #f7f9fa;
}

.builder-shell .external-section-block {
    border-color: #dde5e9;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(24, 34, 42, .025);
}

.builder-shell .external-section-block.open {
    border-color: #d6e0e4;
    box-shadow: 0 4px 16px rgba(24, 34, 42, .035);
}

.builder-shell .external-section-head,
.builder-shell
.external-section-block.open
.external-section-head {
    border-radius: 10px 10px 0 0;
    background: #fbfcfd;
    box-shadow: none;
}

.builder-shell
.external-section-block:not(.open)
.external-section-head {
    border-radius: 10px;
    background: #f8fafb;
}

.builder-shell
.external-section-block.open
.external-section-head {
    border-bottom: 1px solid #e8edef;
}

.builder-shell .external-section-head:hover {
    background: #f6f9fa;
}

.builder-shell .section-dots {
    border-color: transparent;
    background: transparent;
    color: #74818a;
    box-shadow: none;
}

.builder-shell .section-dots:hover,
.builder-shell .section-dots:focus-visible {
    border-color: #d9e1e5;
    background: #eef3f5;
    color: #26343d;
    box-shadow: none;
}

.builder-shell .external-question {
    padding: 10px 11px 13px;
    border: 0;
    border-bottom: 1px solid #e8edef;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.builder-shell
.external-question:not(.rule-target-active):not(.series-target-active):hover,
.builder-shell
.external-question:not(.rule-target-active):not(.series-target-active):focus-within {
    border-color: #e1e8eb;
    background: #fbfdfd;
    box-shadow: none;
}

.builder-shell .external-question-kicker {
    color: #74818a;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .085em;
}

.builder-shell .external-question-title {
    color: #26323b;
    font-weight: 680;
}

.builder-shell .external-question-rule,
.builder-shell .external-question-series {
    height: 24px;
    padding-inline: 8px;
    border: 1px solid #dbe2e6;
    border-radius: 5px;
    background: #f3f6f7;
    color: #65717a;
    box-shadow: none;
}

.builder-shell .external-question-rule:hover,
.builder-shell .external-question-rule.linked {
    border-color: #8acfc8;
    background: #eaf8f6;
    color: #087a72;
}

.builder-shell .external-question-series:hover,
.builder-shell .external-question-series.linked {
    border-color: #b9add8;
    background: #f3effa;
    color: #62508f;
}

.builder-shell .external-question-delete {
    color: #8d979e;
    opacity: .42;
}

.builder-shell .external-question-delete:hover,
.builder-shell .external-question-delete:focus-visible {
    background: #fff1f2;
    color: var(--editor-premium-danger);
    opacity: 1;
}

.builder-shell .external-text-field-row,
.builder-shell .external-choice-option-row {
    border-color: #dfe6e9;
    border-radius: 7px;
    background: #fafcfc;
    box-shadow: none;
}

.builder-shell
.external-text-field-row:not(.rule-target-active):not(.series-target-active):hover,
.builder-shell
.external-text-field-row:not(.rule-target-active):not(.series-target-active):focus-within,
.builder-shell
.external-choice-option-row:not(.rule-selectable):hover,
.builder-shell
.external-choice-option-row:not(.rule-selectable):focus-within {
    border-color: #a9cbc7;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(17, 158, 148, .07);
}

.builder-shell .external-text-field-main {
    border-right: 0;
}

.builder-shell .external-text-field-label {
    background: transparent;
    color: #2d3942;
}

.builder-shell .external-text-field-label:focus {
    background: #fbfdfd;
}

.builder-shell .external-text-field-dots {
    border-color: transparent;
    background: transparent;
    color: #748089;
    box-shadow: none;
}

.builder-shell .external-text-field-dots:hover,
.builder-shell .external-text-field-dots:focus-visible {
    border-color: #d9e1e4;
    background: #eef3f4;
    color: #26343d;
    box-shadow: none;
}

.builder-shell .external-choice-control {
    width: 13px;
    height: 13px;
    border-color: #8a969e;
    background: #ffffff;
}

.builder-shell .external-choice-option-input {
    color: #34414a;
    font-weight: 590;
}

.builder-shell .external-choice-delete {
    color: #939da4;
    opacity: .18;
}

.builder-shell
.external-choice-option-row:hover
.external-choice-delete,
.builder-shell .external-choice-delete:focus-visible {
    opacity: .85;
}

.builder-shell .external-add-textfield {
    color: #0b8178;
    font-size: 10.5px;
    font-weight: 720;
    letter-spacing: .005em;
    text-decoration: none;
}

.builder-shell .external-add-textfield:hover,
.builder-shell .external-add-textfield:focus-visible {
    color: #075f59;
    text-decoration: none;
}

.builder-shell .external-field-badge.date {
    border-color: #c5d8e8;
    background: #f1f7fb;
    color: #496b87;
}

.builder-shell .external-question-help {
    color: #748089;
    font-size: 10.25px;
    line-height: 1.45;
}

.builder-shell .external-series-card {
    border-color: #dfe6e9;
    border-radius: 7px;
    background: #fbfcfd;
    box-shadow: none;
}

.builder-shell .external-series-stepper {
    background: #7563ad;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.builder-shell .external-series-copy strong {
    margin-bottom: 3px;
    color: #303b44;
    font-size: 11.5px;
    font-weight: 760;
}

.builder-shell .external-series-copy span {
    color: #66737d;
    font-size: 10px;
    line-height: 1.42;
}

.builder-shell .external-question-divider {
    background: #e8edef;
}

.builder-shell .interview-footer {
    background: rgba(247, 249, 250, .97);
}

/* Individual choice answers use the same action menu as text fields. */
.builder-shell .external-choice-option-row {
    position: relative;
    grid-template-columns: 18px minmax(0, 1fr) auto;
}

.builder-shell .choice-option-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.builder-shell .choice-option-dots.linked {
    color: #168b81;
    background: #eaf5f3;
}

.builder-shell .choice-option-dots:disabled {
    opacity: .35;
    cursor: default;
}

.builder-shell .external-choice-option-row .choice-option-actions {
    top: calc(100% + 5px);
    right: 0;
    left: auto;
    z-index: 10050;
}

.builder-shell .external-choice-option-row:has(.choice-option-actions.open) {
    z-index: 10051;
}

.builder-shell .external-choice-option-row.rule-target-active {
    border-color: #58aaa2;
    background: #eef8f6;
    box-shadow: 0 0 0 2px rgba(17, 158, 148, .1);
}