/* Schrift: Inter (gleiche Datei wie im Shop) */
@font-face { font-family: "Rio Inter"; src: url("/assets/rio2/fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Alte Oberfläche (app.css) nutzt „PT Sans“: dieselben Namen auf Inter umbiegen, damit überall Inter erscheint */
@font-face { font-family: "PT Sans"; src: url("/assets/rio2/fonts/Inter-var.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("/assets/rio2/fonts/Inter-var.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans Caption"; src: url("/assets/rio2/fonts/Inter-var.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans Caption"; src: url("/assets/rio2/fonts/Inter-var.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
/* =====================================================================
   RIO Konfigurator – neue Oberfläche
   Liegt über app.css/bootstrap.css des bestehenden Konfigurators.
   Die Rechenlogik (Configurator.js) bleibt unverändert; dieses Stylesheet
   ordnet nur die vorhandenen Elemente neu an.
   ---------------------------------------------------------------------
   Layout: Zeichenfläche links, Planungsspalte rechts (ab 900 px).
           Auf dem Handy Zeichenfläche oben, Planungsblatt unten mit Reitern.
   Bewusst nur ein helles Erscheinungsbild: Die Zeichenfläche (Wand/Boden)
   wird vom Konfigurator selbst hell gezeichnet.
   ===================================================================== */
:root {
    --ink: #231f1c; /* RIO Kopfzeile, Text, aktive Auswahl */
    --ink-2: #4b4440; /* Fließtext */
    --muted: #7b736c; /* Hinweise, Einheiten */
    --line: #e5e1dc; /* Trennlinien, Ränder */
    --wash: #f4f2ef; /* ruhige Flächen, Chips */
    --paper: #ffffff;
    --stage: #f6f6f5; /* hinter der Zeichenfläche */
    --go: #0d8500; /* Bestellen (RIO-Grün, abgedunkelt für Kontrast) */
    --go-hi: #10b200; /* RIO-Grün aus dem Claim */
    --warn: #c8201a; /* RIO-Rot, Fehlermeldungen */
    --focus: #10b200;

    --font: "Rio Inter", Inter, "Helvetica Neue", Arial, sans-serif;
    --t-xs: 12px;
    --t-s: 13px;
    --t-m: 15px;
    --t-l: 17px;
    --t-xl: 21px;
    --t-xxl: 30px;

    --panel-w: 392px;
    --sheet-h: 50%;
    --r-s: 6px;
    --r-m: 10px;
    --r-l: 16px;
    --shadow: 0 1px 2px rgba(35, 31, 28, 0.08), 0 8px 24px rgba(35, 31, 28, 0.1);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    color-scheme: light;
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--stage) !important;
    color: var(--ink-2);
    font-family: var(--font) !important;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
html,
body,
div,
span,
form,
input,
button,
label,
a,
img {
    font-weight: 400;
}
button,
input {
    font-family: var(--font);
}
:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px;
}

/* ---------- Grundgerüst: Zeichenfläche ---------- */
#configurator {
    position: fixed !important;
    left: 0;
    top: 0;
    width: calc(100% - var(--panel-w)) !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--stage);
}
#wrapper.wrapper {
    position: static;
    width: 100%;
    height: 100%;
    animation: none;
}
#main.main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#mainCanvas {
    display: block;
    touch-action: none;
}
#header.header,
footer.footer {
    display: none;
}

/* ---------- Planungsspalte ---------- */
#sideBarLeft.panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--panel-w) !important;
    z-index: 20 !important;
    background: var(--paper) !important;
    border: 0 !important;
    border-left: 1px solid var(--line) !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: 0;
    flex-direction: column;
    font-family: var(--font) !important;
}
#sideBarLeft.panel:not([style*="none"]) {
    display: flex !important;
}
.panel__grip {
    display: none;
}
/* Reiter auf allen Größen: Maße | Modul | Extras | Entwurf */
.panel__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    flex: none;
    margin: 16px 24px 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--wash);
}
.tab {
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: 400 var(--t-m) var(--font);
    color: var(--ink-2);
    cursor: pointer;
}
.tab.is-active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    box-shadow:
        0 1px 2px rgba(35, 31, 28, 0.12),
        0 0 0 1px var(--line);
}
.sec {
    display: none;
    border-bottom: 0 !important;
}
#sideBarLeft[data-tab="dims"] .sec[data-tab="dims"],
#sideBarLeft[data-tab="module"] .sec[data-tab="module"],
#sideBarLeft[data-tab="details"] .sec[data-tab="details"],
#sideBarLeft[data-tab="draft"] .sec[data-tab="draft"] {
    display: block;
}
.panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: var(--font) !important;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap-Akkordeon: alle Bereiche offen, Köpfe als Überschriften */
#sideBarLeft .accordion-group {
    border: 0;
    border-radius: 0;
    margin: 0;
}
#sideBarLeft .accordion-body.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
#sideBarLeft .accordion-inner {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
}
#sideBarLeft .accordion-toggle {
    pointer-events: none;
    text-decoration: none;
    display: block;
}
.sec {
    padding: 20px 24px 22px;
    border-bottom: 1px solid var(--line) !important;
}
.sec .accordion-heading,
#accordionHeadingCollapseTwo {
    background: none !important;
    border: 0 !important;
    padding: 0 0 14px !important;
    color: var(--ink) !important;
    font-size: var(--t-l) !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
    font-family: var(--font) !important;
}
.sec .lblAccordionHeading {
    display: none;
}
.sec__title {
    font: 700 var(--t-l)/1.2 var(--font);
    color: var(--ink);
}
.sec__title small {
    display: block;
    margin-top: 3px;
    font-size: var(--t-s);
    font-weight: 400;
    color: var(--muted);
}
.sec__note {
    margin: 0 0 12px;
    font-size: var(--t-s);
    color: var(--muted);
    line-height: 1.45;
}
.dynamicCell {
    padding: 0 !important;
}

/* Felder */
.field {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}
.field__label,
.groupTitle.field__label {
    float: none !important;
    padding: 0 !important;
    font: 700 var(--t-s)/1.2 var(--font) !important;
    color: var(--ink) !important;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.unit {
    font-weight: 400;
    color: var(--muted);
}
.colorname {
    font-weight: 400;
    color: var(--muted);
}

/* Modul zum Ziehen */
.brushConfigurator {
    height: auto !important;
}
.dims {
    display: contents;
}
.brush {
    display: grid;
    gap: 10px;
}
.brush__stage,
.selected__stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: 18px 12px 38px;
    border-radius: var(--r-m);
    background:
        linear-gradient(var(--wash), var(--wash)) padding-box,
        repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px) border-box;
    border: 1.5px dashed #cfc9c2;
}
.selected__stage {
    padding-bottom: 14px;
    border-style: solid;
    border-color: var(--line);
}
#brushConfiguratorCanvas {
    width: 217px;
    height: 109px;
    cursor: grab;
    touch-action: none;
}
#brushConfiguratorCanvas:active {
    cursor: grabbing;
}
.brush__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: var(--t-xs);
    color: var(--muted);
    pointer-events: none;
}
.brush__hint svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.brush__hint-touch {
    display: none;
}
.measures {
    display: grid;
    gap: 2px;
}
.outerMeasures,
.innerMeasures {
    margin: 0 !important;
    width: auto !important;
    font: 400 var(--t-xs)/1.35 var(--font) !important;
    color: var(--muted) !important;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.outerMeasures b,
.innerMeasures b {
    color: var(--ink-2);
    font-weight: 700;
}

/* Chips (Höhe, Tiefe, Blende, Scharniere) */
.radioGroup.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.radioGroup .buttonLabel,
.radioGroup .btIcon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 38px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--line) !important;
    outline: 0 !important;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink) !important;
    font: 400 var(--t-m)/1 var(--font) !important;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    vertical-align: middle;
    transition:
        background-color 0.15s var(--ease),
        border-color 0.15s var(--ease),
        color 0.15s var(--ease);
}
.radioGroup .buttonLabel:hover,
.radioGroup .btIcon:hover {
    border-color: var(--ink);
}
.radioGroup input[type="radio"]:checked + .buttonLabel,
.radioGroup input[type="radio"]:checked + .btIcon {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
    outline: 0 !important;
    font-weight: 700 !important;
}
.radioGroup input[type="radio"]:disabled + .buttonLabel,
.radioGroup input[type="radio"]:disabled + .btIcon {
    background: transparent !important;
    color: #b9b2ab !important;
    border-style: dashed !important;
    cursor: not-allowed;
    opacity: 1 !important;
}
.radioGroup .btIcon img {
    display: none;
}
.radioGroup .btIcon div {
    position: static !important;
    margin: 0 !important;
    height: auto !important;
}
.chips--sub {
    margin: 10px 0 0 48px;
}
.chips__label {
    float: none !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    font: 400 var(--t-s) var(--font) !important;
    color: var(--muted) !important;
    min-width: 64px;
}

/* Farbfelder: immer ausgeklappt */
.swatches {
    height: auto !important;
    padding: 0 !important;
}
.materialSelector {
    display: block !important;
    height: auto !important;
    z-index: auto !important;
}
.materialSelector .btToggle {
    display: none !important;
}
.materialSelector .materialGrid {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}
.materialSelector ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.materialSelector li {
    display: block !important;
}
.materialSelector .materialButton {
    position: relative;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(35, 31, 28, 0.18);
    cursor: pointer;
    transition: transform 0.15s var(--ease);
}
.materialSelector .materialButton img {
    display: none;
}
.materialSelector .materialButton:hover {
    transform: scale(1.06);
}
.materialSelector li .selected {
    outline: 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(35, 31, 28, 0.18),
        0 0 0 3px var(--paper),
        0 0 0 5px var(--ink);
}
.materialSelector li.disabled .materialButton,
.materialSelector .disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}
.swatches--small .materialSelector ul {
    gap: 8px;
}
.swatches--small .materialSelector .materialButton {
    width: 26px !important;
    height: 26px !important;
}
.fillWhite {
    background-color: #fbfbfa !important;
}
.fillSemiTransparent {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(214, 222, 226, 0.75)) !important;
}
.fillTransparent {
    background: linear-gradient(135deg, #fff 0 45%, #e3e8ea 45% 55%, #fff 55%) !important;
}

/* Maße: Spalten und Ebenen */
.sec__head {
    padding: 0 0 14px;
}
.seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--wash);
}
.seg__btn {
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: 400 var(--t-m) var(--font);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.seg__btn.is-on {
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    box-shadow:
        0 1px 2px rgba(35, 31, 28, 0.12),
        0 0 0 1px var(--line);
}
.seg--small .seg__btn {
    height: 28px;
    font-size: var(--t-s);
}
.steps {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "label val btns" "side side side";
    align-items: center;
    gap: 8px 12px;
    padding: 12px 12px 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--paper);
}
.step__label {
    grid-area: label;
    font: 700 var(--t-s) var(--font);
    color: var(--ink);
}
.step__val {
    grid-area: val;
    font: 400 var(--t-m) var(--font);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.step__btns {
    grid-area: btns;
    display: flex;
    gap: 8px;
}
.step__side {
    grid-area: side;
    justify-self: start;
    min-width: 170px;
}
.stepbtn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    cursor: pointer;
    transition:
        border-color 0.15s var(--ease),
        background-color 0.15s var(--ease);
}
.stepbtn:hover {
    border-color: var(--ink);
}
.stepbtn:active {
    background: var(--wash);
}
.stepbtn:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: var(--line);
}
.stepbtn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
}
.rswatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.rsw {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(35, 31, 28, 0.18);
}
.rsw.is-on {
    box-shadow:
        inset 0 0 0 1px rgba(35, 31, 28, 0.18),
        0 0 0 3px var(--paper),
        0 0 0 5px var(--ink);
}
.dims-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.dims-actions .btn.is-armed {
    border-color: var(--warn) !important;
    color: var(--warn) !important;
}
#rioBuildMsg {
    margin: 10px 0 0;
    color: var(--warn);
}
#rioBuildMsg:empty {
    display: none;
}

/* Schalter (Schublade, Tür, Optionen) */
.option {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.option__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#tblSelectors {
    display: contents;
}
.switch {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    position: static !important;
    width: auto !important;
    font-size: var(--t-m) !important;
}
.switch input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    margin: 0 !important;
    width: 40px;
    height: 24px;
    border-radius: 999px;
    background: #d9d4ce;
    cursor: pointer;
    transition: background-color 0.18s var(--ease);
}
.switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s var(--ease);
}
.switch input[type="checkbox"]:checked {
    background: var(--ink);
}
.switch input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}
.switch input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.switch input[type="checkbox"] + label,
.switch label {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    font: 400 var(--t-m)/1.25 var(--font) !important;
    color: var(--ink) !important;
    cursor: pointer;
    white-space: normal !important;
}
.switch .selectorTitleDark,
.switch label span {
    font: 400 var(--t-m)/1.25 var(--font) !important;
    color: inherit !important;
}
.switch input[type="checkbox"]:disabled + label {
    color: #b0a9a2 !important;
    cursor: not-allowed;
}
#bcBrowseLpsModule,
#cmBrowseLpsModule {
    position: static !important;
    display: flex !important;
}

/* Kabeldurchlass */
.cablehole {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}
.cablehole .field__label {
    width: 100%;
    margin: 0 !important;
}
.cablehole .selectorTitleDark {
    font: 700 var(--t-s) var(--font) !important;
    color: var(--ink) !important;
}
.cablehole .switch {
    float: none !important;
    margin: 0 !important;
}
.labelCableholeMeasuresBtWrapper {
    margin: 0 !important;
    padding: 0 !important;
}
.cableholeMeasuresBt {
    margin: 0 !important;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--wash);
    color: var(--ink-2) !important;
    font: 400 var(--t-s) var(--font) !important;
    font-variant-numeric: tabular-nums;
}

/* Ausgewähltes Modul */
.selected {
    display: grid;
    gap: 8px;
}
.selected__hint {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--muted);
    text-align: center;
}
#faceSelectorCanvas {
    width: 217px;
    height: 150px;
    touch-action: none;
}
.btTrash {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    border: 1px solid var(--line) !important;
    background: var(--paper)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8201a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E")
        center / 18px no-repeat !important;
}
.btTrash:hover {
    border-color: var(--warn) !important;
}

/* Ganzes Regal */
.regalOptions {
    padding: 0 !important;
    display: grid;
}
.regalOptionsTopRow,
.regalOptionsMediumRow,
.regalOptionsBottomRow {
    height: auto !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
.regalOptionsBottomRow {
    order: -1;
}
.labeledCheckboxes {
    float: none !important;
    position: static !important;
    width: auto !important;
    font-size: inherit !important;
}
.lblClosingBracketsType,
.cbBaseboardCutMeasures {
    float: none !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    font: 400 var(--t-s) var(--font) !important;
    color: var(--muted) !important;
    transform: none !important;
}
#punchHoleBtnWrapper {
    margin-left: auto;
    display: inline-flex !important;
}

.segmented {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    padding: 3px;
    border-radius: 999px;
    background: var(--wash);
}
.segmented .field__label {
    grid-column: 1 / -1;
    margin: 0 0 8px 2px !important;
}
.segmented .field__label:empty {
    display: none;
}
.segmented .btRegalTypeChange {
    float: none !important;
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    color: var(--ink-2) !important;
    font: 400 var(--t-m) var(--font) !important;
    cursor: pointer;
}
.segmented .btRegalTypeChange[style*="default"] {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    box-shadow:
        0 1px 2px rgba(35, 31, 28, 0.12),
        0 0 0 1px var(--line);
}

/* Schaltflächen */
.btn,
.btAccordionMainMenue,
#punchHoleButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    background: var(--paper) !important;
    color: var(--ink) !important;
    font: 400 var(--t-m) var(--font) !important;
    float: none !important;
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.15s var(--ease),
        background-color 0.15s var(--ease);
}
.btn:hover,
.btAccordionMainMenue:hover,
#punchHoleButton:hover {
    border-color: var(--ink) !important;
}
.btAccordionMainMenue:disabled,
.btAccordionMainMenue.clickable_disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.mainMenue {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 !important;
}
.mainMenue .btAccordionMainMenue {
    width: 100% !important;
    padding: 0 8px !important;
}
.mainMenue .btAccordionMainMenue:first-child,
.mainMenue .btAccordionMainMenue:last-child {
    margin: 0 !important;
}
.examples-open {
    margin-top: 12px !important;
    width: 100% !important;
}

/* ---------- Fuß: Maße, Preis, Bestellen ---------- */
.panel__foot {
    flex: none;
    background: var(--ink);
    color: #fff;
    padding: 16px 24px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    display: grid;
    gap: 4px;
}
.panel__foot .accordion-group {
    border: 0 !important;
    background: none !important;
}
.panel__foot .accordion-heading {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.panel__foot .accordion-body {
    display: none !important;
}
#accordionMeasuresWrapper {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #c9c1b9 !important;
}
.foot__label {
    font-size: var(--t-s);
    color: #c9c1b9;
}
#accordionMeasuresWrapper #lblOuterMeasures {
    float: none !important;
    margin: 0 !important;
    font: 400 var(--t-s) var(--font) !important;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}
#accordionPriceHeading {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none !important;
    border: 0 !important;
    padding: 2px 0 0 !important;
}
#lblPrice,
#lblPrice .summaryPrice {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    font: 700 var(--t-xxl)/1.05 var(--font) !important;
    color: #fff !important;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: opacity 0.2s var(--ease);
}
#btOrder {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--go);
    color: #fff !important;
    font: 700 var(--t-m) var(--font) !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background-color 0.15s var(--ease),
        transform 0.1s var(--ease);
}
#btOrder:hover {
    background: #0a7000;
}
#btOrder:active {
    transform: translateY(1px);
}
#accordionPriceGroup.is-empty #btOrder {
    background: #4a433e;
    color: #b9b1a9 !important;
    cursor: not-allowed;
}
#lblPriceInfo,
#lblPriceInfo .summaryPriceInfo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    font: 400 var(--t-xs)/1.4 var(--font) !important;
    color: #c9c1b9 !important;
}
#lblPriceInfo[style*="205, 23, 25"],
#lblPriceInfo[style*="cd1719"] {
    color: #ff9b95 !important;
}
#accordionPriceGroup.is-empty #lblPriceInfo {
    color: #c9c1b9 !important;
}

/* ---------- Werkzeugleiste ---------- */
.toolbar {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    pointer-events: none;
}
.toolbar > * {
    pointer-events: auto;
}
#systemBlock.systemBlock {
    position: static !important;
    width: auto !important;
}
#systemBlock:not([style*="none"]) {
    display: block !important;
}
.toolbar__group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.toolbar__sep {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--line);
}
.tool {
    position: static !important;
    width: auto !important;
    z-index: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s var(--ease);
}
.tool:hover {
    background: var(--wash);
}
.tool__icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    flex: none;
    cursor: pointer;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    opacity: 1;
}
.tool__label {
    position: static !important;
    margin: 0 !important;
    font: 400 var(--t-s) var(--font) !important;
    color: var(--ink) !important;
    cursor: pointer;
    white-space: nowrap;
}
.tool .clickable_disabled,
.tool .clickable_disabled + .tool__label {
    opacity: 0.35 !important;
}
#btUndo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 010 11H11'/%3E%3C/svg%3E") !important;
}
#btRedo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 000 11H13'/%3E%3C/svg%3E") !important;
}
#btTips {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0012 3z'/%3E%3C/svg%3E") !important;
}
#btPlay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M10 9.2v5.6l4.6-2.8z'/%3E%3C/svg%3E") !important;
}
#rioCenter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E") !important;
}

.zoom {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 40px;
    padding: 0 2px;
}
.zoom__btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.zoom__btn:hover {
    background: var(--wash);
}
.zoom__btn:disabled {
    opacity: 0.3;
    cursor: default;
    background: transparent;
}
.zoom__btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.8;
    stroke-linecap: round;
}
.zoom__val {
    display: inline-block;
    line-height: 1;
    min-width: 46px;
    text-align: center;
    font: 400 var(--t-s) var(--font);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
#mainCanvas {
    width: 100% !important;
    height: 100% !important;
}
#systemBlockArchive {
    position: static !important;
    width: auto !important;
}
#systemBlockArchive:not([style*="none"]) {
    display: block !important;
}
#btRegalArchive {
    width: auto !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 18px 0 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.94)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1c' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7.5' height='7.5'/%3E%3Crect x='13' y='3.5' width='7.5' height='7.5'/%3E%3Crect x='3.5' y='13' width='7.5' height='7.5'/%3E%3Crect x='13' y='13' width='7.5' height='7.5'/%3E%3C/svg%3E")
        14px center / 20px no-repeat !important;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#btRegalArchive:hover {
    background-color: #fff !important;
}
.lblBtRegalArchive {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    margin-left: 26px;
    font: 700 var(--t-m) var(--font) !important;
    color: var(--ink) !important;
}

/* Tipps (Sprechblase des Konfigurators) */
#bubble.bubble {
    left: 16px !important;
    right: auto !important;
    bottom: 16px !important;
    top: auto !important;
    width: auto !important;
    max-width: min(460px, calc(100% - 32px)) !important;
    display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px !important;
    border-radius: var(--r-m);
    background: var(--paper) !important;
    box-shadow: var(--shadow);
    z-index: 6;
}
#bubble[style*="inline"],
#bubble[style*="block"] {
    display: flex !important;
}
.bubble__icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d8500' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0012 3z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}
#bubble .bubbleTextArea,
#bubble .bubbleTextArea * {
    display: block !important;
    height: auto !important;
    font: 400 var(--t-s)/1.5 var(--font) !important;
    color: var(--ink-2) !important;
}
#bubble .btClose,
.dlg .btClose,
.iconbtn {
    flex: none;
    display: inline-grid !important;
    place-items: center;
    width: 32px !important;
    height: 32px !important;
    margin: -6px -6px 0 0;
    border: 0 !important;
    border-radius: 50%;
    padding: 0;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b736c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")
        center / 20px no-repeat !important;
    cursor: pointer;
}
#bubble .btClose:hover,
.dlg .btClose:hover,
.iconbtn:hover {
    background-color: var(--wash) !important;
}
.iconbtn svg {
    display: none;
}

/* Leerer Zustand */
.stagehint {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 48px));
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    color: var(--ink-2);
    font-size: var(--t-m);
    line-height: 1.45;
    padding: 22px 24px;
    border-radius: var(--r-l);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 2px rgba(35, 31, 28, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 2;
}
.stagehint[hidden] {
    display: none;
}
.stagehint strong {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.stagehint .btn {
    margin-top: 10px !important;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.9) !important;
}
.stagehint__touch {
    display: none;
}

/* Lücke einfügen */
.punchHoleBlock {
    position: absolute !important;
    left: 16px !important;
    top: 72px !important;
    width: auto !important;
    z-index: 6;
}
.holeSelectorBody {
    padding: 14px !important;
    border-radius: var(--r-m);
    background: var(--paper) !important;
    box-shadow: var(--shadow);
}
.holeSelectorBody #lblInstruction {
    display: block;
    max-width: 230px;
    margin: 0 0 10px !important;
    font: 400 var(--t-s)/1.45 var(--font);
    color: var(--ink-2);
}
.holegrid {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    gap: 6px;
    place-items: center;
}
.holegrid > * {
    display: block;
}
.holegrid button {
    border-radius: 4px;
}
.holegrid button:hover {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Rückmeldung beim Ziehen ("hier nicht möglich") */
.targetNotAllowedContainer {
    width: auto !important;
    max-width: 300px;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: var(--r-s);
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: var(--shadow) !important;
    z-index: 4000 !important;
}
.targetNotAllowedContainer table,
.targetNotAllowedContainer td {
    padding: 0 !important;
}
.targetNotAllowedIcon {
    display: none !important;
}
.ruleFeedbackInvalid,
.ruleFeedbackValid {
    font: 400 var(--t-s)/1.4 var(--font) !important;
    color: #fff !important;
}

/* ---------- Ladeanzeige ---------- */
.spinner {
    height: auto !important;
    padding: 22px 26px !important;
    border-radius: var(--r-m);
    background: var(--paper) !important;
    box-shadow: var(--shadow);
    display: grid;
    justify-items: center;
    gap: 12px;
}
.spinner__ring {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--ink);
    animation: rio-spin 0.8s linear infinite;
}
.loadingText {
    margin: 0 !important;
    font: 400 var(--t-s) var(--font) !important;
    color: var(--ink-2) !important;
}
@keyframes rio-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Dialoge des Konfigurators ---------- */
.dlgBkgBlocker {
    background: rgba(35, 31, 28, 0.5) !important;
    opacity: 1 !important;
    z-index: 4300 !important;
    animation: none !important;
}
.dlg {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(520px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: calc(100% - 32px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    border: 0 !important;
    border-radius: var(--r-l) !important;
    background: var(--paper) !important;
    box-shadow: 0 24px 64px rgba(35, 31, 28, 0.28) !important;
    z-index: 4345 !important;
    font-family: var(--font) !important;
}
.dlg[style*="none"] {
    display: none !important;
}
.dlg .dlgHead {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto !important;
    width: auto !important;
    padding: 20px 20px 4px 24px !important;
    background: none !important;
    border: 0 !important;
}
.dlg .dlgTitle,
.dlg #dlgTitle,
.dlg #lblTitle,
.dlg #dlgWelTitle {
    position: static !important;
    transform: none !important;
    top: auto !important;
    font: 700 var(--t-xl)/1.25 var(--font) !important;
    color: var(--ink) !important;
    letter-spacing: -0.01em;
}
.dlg .dlgBody {
    height: auto !important;
    margin: 0 !important;
    padding: 8px 24px 8px !important;
    font: 400 var(--t-m)/1.55 var(--font) !important;
    color: var(--ink-2) !important;
}
.dlg .dlgBody label,
.dlg .dlgBody span,
.dlg .dlgBody div {
    font-family: var(--font) !important;
}
.dlg .dlgFooter {
    position: static !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 24px 24px !important;
    background: none !important;
}
.dlg .dlgLabeledButton {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 120px;
    height: 44px !important;
    padding: 0 20px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    font: 400 var(--t-m) var(--font) !important;
    box-shadow: none !important;
    cursor: pointer;
}
.dlg .dlgLabeledButton:hover {
    border-color: var(--ink) !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
}
.dlg #btOk,
.dlg #btWelOk,
.dlg #btModify {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.dlg #btOk:hover,
.dlg #btWelOk:hover,
.dlg #btModify:hover {
    background: #000 !important;
    color: #fff !important;
}
.dlg .dlgSlotButton,
.dlg .dlgRegalTypeButton {
    display: flex;
    align-items: center;
    width: 100% !important;
    height: 48px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-m);
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font: 400 var(--t-m) var(--font) !important;
    text-align: left;
}
.dlg .dlgSlotButton:enabled:hover,
.dlg .dlgRegalTypeButton:hover {
    border-color: var(--ink) !important;
    color: var(--ink) !important;
    background: var(--wash) !important;
}
.dlg .dlgSlotButton:disabled {
    opacity: 0.45;
}
.dlg input[type="range"] {
    accent-color: var(--ink);
    width: 100%;
}
.dlg .regalTypeImage {
    width: 100%;
    border-radius: var(--r-s);
}
#dlgClosingBrackets {
    width: min(720px, calc(100vw - 32px)) !important;
}
.brackettype-cc {
    max-width: 40vw;
    max-height: 40vw;
    margin: 0 10px !important;
    border-radius: var(--r-m);
}
/* 1.34: Grafiken Abschlussleisten neu (Wunsch RIO): Schnitt durch Seitenwand, Böden und Leiste, flach im Stil der Oberfläche */
#dlgClosingBrackets .brackettype-cc {
    margin-top: 28px !important;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--line) !important;
}
#dlgClosingBrackets .brackettype-itemtitle {
    transform: translateY(-30px);
    font-weight: 700;
}
#dlgClosingBrackets .brackettype-cc.checked {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 2px var(--ink);
}
#dlgClosingBrackets .shortened {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjMwIDI4IDE2MCAxNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZiZmJmYyIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiNjZmQzZDciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4Zjk0OWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsbD0iI2Y1ZjNlZiIvPjxyZWN0IHg9IjAiIHk9Ijk4IiB3aWR0aD0iOTYiIGhlaWdodD0iMTIwIiBmaWxsPSIjZTZlM2RkIi8+PHJlY3QgeD0iMTI0IiB5PSI5OCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjEyMCIgZmlsbD0iI2U2ZTNkZCIvPjxyZWN0IHg9Ijk2LjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTAwLjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTA0LjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTA4LjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTEyLjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTE2LjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTIwLjAwIiB5PSI4MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTQwIiBmaWxsPSIjZWNkNWFlIi8+PGxpbmUgeTE9IjgwIiB5Mj0iMjIwIiB4MT0iMTAwLjAwIiB4Mj0iMTAwLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHkxPSI4MCIgeTI9IjIyMCIgeDE9IjEwNC4wMCIgeDI9IjEwNC4wMCIgc3Ryb2tlPSIjYjQ4YzU4IiBzdHJva2Utd2lkdGg9Ii41IiBvcGFjaXR5PSIuNzUiLz48bGluZSB5MT0iODAiIHkyPSIyMjAiIHgxPSIxMDguMDAiIHgyPSIxMDguMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeTE9IjgwIiB5Mj0iMjIwIiB4MT0iMTEyLjAwIiB4Mj0iMTEyLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHkxPSI4MCIgeTI9IjIyMCIgeDE9IjExNi4wMCIgeDI9IjExNi4wMCIgc3Ryb2tlPSIjYjQ4YzU4IiBzdHJva2Utd2lkdGg9Ii41IiBvcGFjaXR5PSIuNzUiLz48bGluZSB5MT0iODAiIHkyPSIyMjAiIHgxPSIxMjAuMDAiIHgyPSIxMjAuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PHBhdGggZD0iTTk2IDIyMFY4MGgyOFYyMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2EwN2Q0ZSIgc3Ryb2tlLXdpZHRoPSIuOCIvPjxyZWN0IHg9IjAiIHk9IjcwLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjAiIHk9Ijc0LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjAiIHk9Ijc4LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjAiIHk9IjgyLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjAiIHk9Ijg2LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjAiIHk9IjkwLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjAiIHk9Ijk0LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI3NC4wMCIgeTI9Ijc0LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI3OC4wMCIgeTI9Ijc4LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI4Mi4wMCIgeTI9IjgyLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI4Ni4wMCIgeTI9Ijg2LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI5MC4wMCIgeTI9IjkwLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI5NC4wMCIgeTI9Ijk0LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxyZWN0IHg9IjEyNCIgeT0iNzAuMDAiIHdpZHRoPSI5NiIgaGVpZ2h0PSI0LjA1IiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTI0IiB5PSI3NC4wMCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjQuMDUiIGZpbGw9IiNkZmMyOTYiLz48cmVjdCB4PSIxMjQiIHk9Ijc4LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjEyNCIgeT0iODIuMDAiIHdpZHRoPSI5NiIgaGVpZ2h0PSI0LjA1IiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTI0IiB5PSI4Ni4wMCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjQuMDUiIGZpbGw9IiNlY2Q1YWUiLz48cmVjdCB4PSIxMjQiIHk9IjkwLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjEyNCIgeT0iOTQuMDAiIHdpZHRoPSI5NiIgaGVpZ2h0PSI0LjA1IiBmaWxsPSIjZWNkNWFlIi8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijc0LjAwIiB5Mj0iNzQuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijc4LjAwIiB5Mj0iNzguMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9IjgyLjAwIiB5Mj0iODIuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijg2LjAwIiB5Mj0iODYuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9IjkwLjAwIiB5Mj0iOTAuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijk0LjAwIiB5Mj0iOTQuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PHBhdGggZD0iTTAgNzBoOTZ2MjhIME0yMjAgNzBoLTk2djI4aDk2IiBmaWxsPSJub25lIiBzdHJva2U9IiNhMDdkNGUiIHN0cm9rZS13aWR0aD0iLjgiLz48cmVjdCB4PSI5NiIgeT0iNzAiIHdpZHRoPSIyOCIgaGVpZ2h0PSIxMCIgcng9IjIiIGZpbGw9InVybCgjZykiIHN0cm9rZT0iIzZjNzE3NyIgc3Ryb2tlLXdpZHRoPSIuOCIvPjxwYXRoIGQ9Ik0zMCA3MGgxNjAiIHN0cm9rZT0iIzFmMWYxZiIgc3Ryb2tlLXdpZHRoPSIuOCIgc3Ryb2tlLWRhc2hhcnJheT0iMyAzIi8+PHRleHQgeD0iMTQ4IiB5PSI2MCIgZm9udC1zaXplPSIxMiIgZm9udC1mYW1pbHk9IkxhdG8sSGVsdmV0aWNhIE5ldWUsQXJpYWwsc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzFmMWYxZiI+cGxhbjwvdGV4dD48L3N2Zz4=");
}
#dlgClosingBrackets .unshortened {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjMwIDI4IDE2MCAxNjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZiZmJmYyIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiNjZmQzZDciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4Zjk0OWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsbD0iI2Y1ZjNlZiIvPjxyZWN0IHg9IjAiIHk9Ijk4IiB3aWR0aD0iOTYiIGhlaWdodD0iMTIwIiBmaWxsPSIjZTZlM2RkIi8+PHJlY3QgeD0iMTI0IiB5PSI5OCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjEyMCIgZmlsbD0iI2U2ZTNkZCIvPjxyZWN0IHg9Ijk2LjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTAwLjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTA0LjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTA4LjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTEyLjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTE2LjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTIwLjAwIiB5PSI3MCIgd2lkdGg9IjQuMDUiIGhlaWdodD0iMTUwIiBmaWxsPSIjZWNkNWFlIi8+PGxpbmUgeTE9IjcwIiB5Mj0iMjIwIiB4MT0iMTAwLjAwIiB4Mj0iMTAwLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHkxPSI3MCIgeTI9IjIyMCIgeDE9IjEwNC4wMCIgeDI9IjEwNC4wMCIgc3Ryb2tlPSIjYjQ4YzU4IiBzdHJva2Utd2lkdGg9Ii41IiBvcGFjaXR5PSIuNzUiLz48bGluZSB5MT0iNzAiIHkyPSIyMjAiIHgxPSIxMDguMDAiIHgyPSIxMDguMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeTE9IjcwIiB5Mj0iMjIwIiB4MT0iMTEyLjAwIiB4Mj0iMTEyLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHkxPSI3MCIgeTI9IjIyMCIgeDE9IjExNi4wMCIgeDI9IjExNi4wMCIgc3Ryb2tlPSIjYjQ4YzU4IiBzdHJva2Utd2lkdGg9Ii41IiBvcGFjaXR5PSIuNzUiLz48bGluZSB5MT0iNzAiIHkyPSIyMjAiIHgxPSIxMjAuMDAiIHgyPSIxMjAuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PHBhdGggZD0iTTk2IDIyMFY3MGgyOFYyMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2EwN2Q0ZSIgc3Ryb2tlLXdpZHRoPSIuOCIvPjxyZWN0IHg9IjAiIHk9IjcwLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjAiIHk9Ijc0LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjAiIHk9Ijc4LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjAiIHk9IjgyLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjAiIHk9Ijg2LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjAiIHk9IjkwLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjAiIHk9Ijk0LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI3NC4wMCIgeTI9Ijc0LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI3OC4wMCIgeTI9Ijc4LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI4Mi4wMCIgeTI9IjgyLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI4Ni4wMCIgeTI9Ijg2LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI5MC4wMCIgeTI9IjkwLjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxsaW5lIHgxPSIwIiB4Mj0iOTYiIHkxPSI5NC4wMCIgeTI9Ijk0LjAwIiBzdHJva2U9IiNiNDhjNTgiIHN0cm9rZS13aWR0aD0iLjUiIG9wYWNpdHk9Ii43NSIvPjxyZWN0IHg9IjEyNCIgeT0iNzAuMDAiIHdpZHRoPSI5NiIgaGVpZ2h0PSI0LjA1IiBmaWxsPSIjZWNkNWFlIi8+PHJlY3QgeD0iMTI0IiB5PSI3NC4wMCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjQuMDUiIGZpbGw9IiNkZmMyOTYiLz48cmVjdCB4PSIxMjQiIHk9Ijc4LjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2VjZDVhZSIvPjxyZWN0IHg9IjEyNCIgeT0iODIuMDAiIHdpZHRoPSI5NiIgaGVpZ2h0PSI0LjA1IiBmaWxsPSIjZGZjMjk2Ii8+PHJlY3QgeD0iMTI0IiB5PSI4Ni4wMCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjQuMDUiIGZpbGw9IiNlY2Q1YWUiLz48cmVjdCB4PSIxMjQiIHk9IjkwLjAwIiB3aWR0aD0iOTYiIGhlaWdodD0iNC4wNSIgZmlsbD0iI2RmYzI5NiIvPjxyZWN0IHg9IjEyNCIgeT0iOTQuMDAiIHdpZHRoPSI5NiIgaGVpZ2h0PSI0LjA1IiBmaWxsPSIjZWNkNWFlIi8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijc0LjAwIiB5Mj0iNzQuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijc4LjAwIiB5Mj0iNzguMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9IjgyLjAwIiB5Mj0iODIuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijg2LjAwIiB5Mj0iODYuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9IjkwLjAwIiB5Mj0iOTAuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PGxpbmUgeDE9IjEyNCIgeDI9IjIyMCIgeTE9Ijk0LjAwIiB5Mj0iOTQuMDAiIHN0cm9rZT0iI2I0OGM1OCIgc3Ryb2tlLXdpZHRoPSIuNSIgb3BhY2l0eT0iLjc1Ii8+PHBhdGggZD0iTTAgNzBoOTZ2MjhIME0yMjAgNzBoLTk2djI4aDk2IiBmaWxsPSJub25lIiBzdHJva2U9IiNhMDdkNGUiIHN0cm9rZS13aWR0aD0iLjgiLz48cmVjdCB4PSI5NiIgeT0iNjAiIHdpZHRoPSIyOCIgaGVpZ2h0PSIxMCIgcng9IjIiIGZpbGw9InVybCgjZykiIHN0cm9rZT0iIzZjNzE3NyIgc3Ryb2tlLXdpZHRoPSIuOCIvPjxwYXRoIGQ9Ik03MCA2MGgyME03MCA3MGgyMCIgc3Ryb2tlPSIjMWYxZjFmIiBzdHJva2Utd2lkdGg9Ii44IiBzdHJva2UtZGFzaGFycmF5PSIyIDIiLz48cGF0aCBkPSJNODAgNDR2MTVNODAgODZWNzEiIHN0cm9rZT0iIzFmMWYxZiIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48cGF0aCBkPSJNNzYuNSA1NWwzLjUgNC41IDMuNS00LjVNNzYuNSA3NWwzLjUtNC41IDMuNSA0LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFmMWYxZiIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjx0ZXh0IHg9IjM4IiB5PSI1NyIgZm9udC1zaXplPSIxMiIgZm9udC1mYW1pbHk9IkxhdG8sSGVsdmV0aWNhIE5ldWUsQXJpYWwsc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzFmMWYxZiI+MiBtbTwvdGV4dD48L3N2Zz4=");
}
.checked {
    border-color: var(--ink) !important;
}

/* Druckansicht des Konfigurators unberührt lassen */
#frame,
#frame * {
    font-family: var(--font);
}

/* ---------- Beispielregale ---------- */
.rx {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
}
.rx[hidden] {
    display: none;
}
.rx__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 28, 0.5);
}
.rx__sheet {
    position: relative;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-l);
    background: var(--paper);
    box-shadow: 0 24px 64px rgba(35, 31, 28, 0.28);
    padding: 22px 24px 8px;
}
.rx__head,
.rx__lead,
.rx__chips {
    flex: none;
}
.rx__chips {
    max-width: 100%;
}
.rx__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.rx__title {
    margin: 0;
    font: 700 var(--t-xl)/1.2 var(--font);
    color: var(--ink);
    letter-spacing: -0.01em;
}
.rx__lead {
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: var(--t-s);
    line-height: 1.45;
}
.rx__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
}
.rx__chips::-webkit-scrollbar {
    display: none;
}
.rx__chip {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--t-s) var(--font);
    cursor: pointer;
    white-space: nowrap;
}
.rx__chip[aria-selected="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 700;
}
.rx__list {
    list-style: none;
    margin: 0;
    padding: 4px 0 16px;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.rx__item {
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: var(--r-m);
    border: 1px solid var(--line);
    background: var(--paper);
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 2px;
    font-family: var(--font);
}
.rx__item:hover {
    border-color: var(--ink);
    background: var(--wash);
}
/* 1.27: Foto je Beispielregal (Wunsch RIO) */
.rx__list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.rx__item {
    padding: 0 0 10px;
    overflow: hidden;
    align-content: start;
    gap: 8px;
}
.rx__item .rx__name {
    padding: 0 12px;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rx__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--wash);
}
.rx__img--none {
    background: var(--wash) center / 42px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b1a9' stroke-width='1.4'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18M15 3v18'/%3E%3C/svg%3E");
}
.rx__name {
    font: 700 var(--t-m)/1.3 var(--font);
    color: var(--ink);
}
.rx__meta {
    font-size: var(--t-xs);
    color: var(--muted);
}
.rx__empty {
    grid-column: 1 / -1;
    padding: 24px 0;
    color: var(--muted);
    text-align: center;
}

/* ---------- Mittlere Breite: schmalere Spalte ---------- */
@media (max-width: 1180px) and (min-width: 900px) {
    :root {
        --panel-w: 360px;
    }
    .tool__label {
        display: none;
    }
    .tool {
        padding: 0 9px;
    }
}

/* ---------- Handy und Tablet hochkant ---------- */
@media (max-width: 899px) {
    :root {
        --panel-w: 0px;
        --sheet-h: 52%;
    }
    #configurator {
        width: 100% !important;
        height: 100% !important;
    } /* Bedienbereich liegt darüber */
    #sideBarLeft.panel {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: var(--sheet-h) !important;
        border-left: 0;
        border-top: 1px solid var(--line);
        border-radius: var(--r-l) var(--r-l) 0 0;
        box-shadow: 0 -8px 24px rgba(35, 31, 28, 0.08);
    }
    .panel__tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        margin: 10px 16px 0;
        padding: 3px;
        border-radius: 999px;
        background: var(--wash);
        flex: none;
    }
    .tab {
        height: 36px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        font: 400 var(--t-m) var(--font);
        color: var(--ink-2);
        cursor: pointer;
    }
    .tab.is-active {
        background: var(--paper);
        color: var(--ink);
        font-weight: 700;
        box-shadow:
            0 1px 2px rgba(35, 31, 28, 0.12),
            0 0 0 1px var(--line);
    }
    .sec {
        display: none;
        border-bottom: 0 !important;
        padding: 16px max(16px, env(safe-area-inset-left, 0px)) 20px max(16px, env(safe-area-inset-right, 0px));
    }
    #sideBarLeft[data-tab="dims"] .sec[data-tab="dims"],
    #sideBarLeft[data-tab="module"] .sec[data-tab="module"],
    #sideBarLeft[data-tab="details"] .sec[data-tab="details"],
    #sideBarLeft[data-tab="draft"] .sec[data-tab="draft"] {
        display: block;
    }
    .sec .accordion-heading,
    #accordionHeadingCollapseTwo {
        display: none !important;
    }
    .sec--module .sec__title {
        display: none;
    }
    .sec--dims .sec__head {
        display: none;
    }
    .steps {
        margin-top: 12px;
    }

    /* Modul-Bereich kompakt: links das Modul zum Ziehen, rechts Höhe und Tiefe.
       So bleibt fast die ganze Fläche zum Scrollen frei. */
    .brushConfigurator:not([style*="none"]) {
        display: grid !important;
        grid-template-columns: 154px minmax(0, 1fr);
        gap: 0 14px;
        align-items: start;
    }
    .brushConfigurator > .brush {
        grid-column: 1;
    }
    .brushConfigurator > .dims {
        grid-column: 2;
        display: grid;
        gap: 12px;
    }
    .brushConfigurator > .dims .field {
        margin-top: 0;
        gap: 6px;
    }
    .brushConfigurator > :not(.brush):not(.dims) {
        grid-column: 1 / -1;
    }
    /* Leinwand behält ihre Maße (der Konfigurator kopiert sie beim Ziehen), wird nur optisch verkleinert */
    #brushConfiguratorCanvas {
        transform: scale(0.62);
        transform-origin: 0 0;
        margin: 0 -82px -41px 0;
    }
    .brush__stage {
        padding: 10px 4px 28px;
        place-items: center;
    }
    .brush .measures {
        display: none;
    }
    .brush__hint {
        bottom: 6px;
        font-size: 11px;
    }
    .brush__hint-desktop {
        display: none;
    }
    .brush__hint-touch {
        display: inline;
    }
    .dims .radioGroup.chips {
        gap: 6px;
    }
    .dims .radioGroup .buttonLabel {
        min-width: 44px !important;
        height: 36px !important;
        padding: 0 9px !important;
        font-size: var(--t-s) !important;
    }
    .radioGroup .buttonLabel,
    .radioGroup .btIcon {
        min-width: 48px;
        height: 40px !important;
        padding: 0 12px !important;
    }

    .panel__foot {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        grid-template-columns: 1fr auto;
        gap: 2px 12px;
    }
    #accordionMeasuresGroup {
        grid-column: 1 / -1;
    }
    .foot__label {
        display: none;
    }
    #accordionMeasuresWrapper {
        justify-content: flex-start;
    }
    #accordionMeasuresWrapper #lblOuterMeasures {
        text-align: left !important;
        color: #c9c1b9 !important;
        font-size: var(--t-xs) !important;
    }
    #accordionPriceGroup {
        grid-column: 1 / -1;
    }
    #lblPrice,
    #lblPrice .summaryPrice {
        font-size: 24px !important;
    }
    #btOrder {
        height: 44px;
        padding: 0 18px;
    }
    #lblPriceInfo {
        display: none !important;
    }

    .toolbar {
        top: 10px;
        left: 10px;
        right: 10px;
    }
    .tool__label {
        display: none;
    }
    .tool {
        padding: 0 9px;
        height: 38px;
    }
    #btRegalArchive {
        height: 44px !important;
    }
    #bubble.bubble {
        left: 10px !important;
        bottom: calc(var(--sheet-h) + 10px) !important;
        max-width: calc(100% - 20px) !important;
        padding: 10px 10px 10px 12px !important;
    }
    .punchHoleBlock {
        left: 10px !important;
        top: 60px !important;
    }
    .stagehint {
        top: calc((100% - var(--sheet-h)) / 2 + 24px);
    }
    .stagehint strong {
        font-size: var(--t-l);
    }
    .stagehint__desktop {
        display: none;
    }
    .stagehint__touch {
        display: inline;
    }

    .rx {
        place-items: end center;
    }
    .rx__sheet {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: var(--r-l) var(--r-l) 0 0;
        padding: 18px 16px 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .rx__list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .rx__item .rx__name {
        padding: 0 8px;
        font-size: 14px;
    }
}
/* Handy: einklappbarer Bedienbereich, größere Ziele */
@media (max-width: 899px) {
    #sideBarLeft.panel {
        transition: height 0.25s var(--ease);
    }
    .panel__grip {
        display: grid;
        place-items: center;
        flex: none;
        width: 100%;
        height: 22px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
    }
    .panel__grip span {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #cfc9c2;
    }
    .panel__grip:hover span {
        background: var(--muted);
    }
    .panel__tabs {
        margin-top: 0;
    }
    :root.rio-sheet-collapsed {
        --sheet-h: 156px;
    }
    :root.rio-sheet-collapsed .panel__scroll {
        display: none;
    }
    :root.rio-sheet-collapsed .tab.is-active {
        background: transparent;
        box-shadow: none;
        font-weight: 400;
        color: var(--ink-2);
    }
    #faceSelectorCanvas {
        width: 232px;
        height: 160px;
    }
    #btPlayWrapper,
    .zoom__val {
        display: none !important;
    }
    .zoom__btn {
        width: 36px;
        height: 36px;
    }
    .selected__stage {
        padding: 6px 6px 8px;
    }
    .lbl-long {
        display: none;
    }
    #btRegalArchive {
        width: auto !important;
        padding: 0 14px 0 12px !important;
        background-position: 12px center !important;
    }
    .lblBtRegalArchive {
        position: static !important;
        width: auto !important;
        height: auto;
        overflow: visible;
        clip: auto;
        margin-left: 26px;
        font-size: var(--t-s) !important;
    }
}
/* Schmale Handys: Werkzeugleiste kompakter, damit "Beispiel" nicht abgeschnitten wird */
@media (max-width: 389px) {
    .toolbar {
        left: 8px;
        right: 8px;
        gap: 6px;
    }
    .toolbar__group {
        gap: 0;
        padding: 3px;
    }
    .tool {
        padding: 0 6px;
        height: 36px;
    }
    .tool__icon {
        width: 21px !important;
        height: 21px !important;
        background-size: 21px 21px !important;
    }
    .toolbar__sep {
        margin: 0 2px;
    }
    .zoom__btn {
        width: 32px;
        height: 32px;
    }
    #btRegalArchive {
        padding: 0 11px 0 9px !important;
        background-position: 9px center !important;
    }
    .lblBtRegalArchive {
        margin-left: 24px;
    }
}
@media (max-width: 351px) {
    #btRegalArchive {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        background-position: center !important;
    }
    .lblBtRegalArchive {
        position: absolute !important;
        width: 1px !important;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        margin: 0;
    }
}
@media (max-width: 899px) and (max-height: 560px) {
    :root {
        --sheet-h: 60%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation-duration: 0.01ms !important;
    }
}

/* 1.28: „Alle“ fünfspaltig nach Regalart (Wunsch RIO) */
.rx__sheet--wide {
    width: min(1180px, calc(100vw - 32px));
}
.rx__list--cols {
    grid-template-columns: repeat(var(--rx-cols, 5), minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.rx__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.rx__colitems {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rx__colhead {
    margin: 0 0 2px;
    font: 700 var(--t-m)/1.2 var(--font);
    color: var(--ink);
    position: sticky;
    top: 0;
    background: var(--paper);
    padding: 4px 0 6px;
    z-index: 1;
}
.rx__rest {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.rx__restitems {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.rx__list--cols .rx__item .rx__name {
    font-size: 14px;
}
@media (max-width: 1000px) {
    .rx__list--cols {
        grid-template-columns: 1fr;
    }
    .rx__colitems,
    .rx__restitems {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }
    .rx__colhead {
        position: static;
    }
}

/* 1.29: „Speichern“ im Hinweis „Ungesicherte Daten werden verworfen“, danach Auswahl der Speicherplätze (Wunsch RIO) */
.rio-savemsg {
    margin-top: 8px;
    font-size: 14px;
    color: #0a6e00;
    font-weight: 700;
    min-height: 0;
}
.rio-savemsg:empty {
    display: none;
}
.rio-savemsg.is-err {
    color: #b3261e;
}
.dlg.is-rio-slots > .dlgBody,
.dlg.is-rio-slots > .dlgFooter {
    display: none !important;
}
.rio-slots {
    padding: 0 24px 20px;
}
.rio-slots[hidden] {
    display: none;
}
.rio-slots__lead {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--ink-2, #4a433e);
}
.rio-slots__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rio-slots__slot {
    text-align: left;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--paper);
    font: 400 15px var(--font);
    color: var(--ink);
    cursor: pointer;
}
.rio-slots__slot:hover {
    border-color: var(--ink);
}
.rio-slots__slot.is-ask {
    border-color: #b3261e;
    color: #b3261e;
}
.rio-slots__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}