/* =========================================================================
DSS Nativer Konfigurator — New-Shades-Stil, regel-treu, Tab-Flow
Orange #DD6D0B · Anthrazit #1a1a1a · warme Manufaktur-Töne
========================================================================= */
.dss-konfig {
--dss-orange: #DD6D0B;
--dss-orange-dark: #b8570a;
--dss-ink: #211c15;
--dss-ink-soft: #6b6157;
--dss-line: #e7ded3;
--dss-bg: #fbf6f0;
--dss-bg-warm: #f4ece1;
--dss-white: #ffffff;
--dss-ok: #2f7d4f;
/* „Weiter"-Grün (Feedback 14.07.): warmer, gedämpfter Wald-/Salbeiton, der zum Amber/Creme-Shop passt
(kein Neon, kein Fremdkörper) und klar „jetzt geht's weiter" signalisiert — deutlicher als Orange. */
--dss-go: #2f7d4f;
--dss-go-dark: #256340;
--dss-go-soft: #edf5ef;
--dss-go-border: #c3dcc8;
--dss-radius: 14px;
--dss-shadow: 0 2px 10px rgba(40, 28, 12, .06);
--dss-shadow-lg: 0 12px 36px rgba(40, 28, 12, .14);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
gap: 40px;
align-items: start;
max-width: 1280px;
margin: 32px auto;
padding: clamp(20px, 3vw, 40px);
color: var(--dss-ink);
background: var(--dss-bg);
border: 1px solid var(--dss-line);
border-radius: 20px;
box-shadow: var(--dss-shadow);
font-family: inherit;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.dss-konfig.is-busy { cursor: progress; }
.dss-konfig *, .dss-infopop * { box-sizing: border-box; }
/* Reset gegen aggressive Theme-Button-Styles. MUSS das Theme (Spezifität ~0,1,1) schlagen → stark halten.
Die Komponenten-Buttons setzen ihr eigenes padding/font per (0,2,0)-Regeln weiter unten (Block „BUTTON-
LAYOUT DURCHSETZEN") wieder korrekt — sonst nagelt entweder der Reset (padding:0) ODER das Theme
(padding:10px 25px) alle Konfig-Buttons falsch. */
.dss-konfig button {
-webkit-appearance: none; appearance: none;
background: transparent; border: 0; margin: 0; padding: 0; font: inherit; color: inherit;
text-transform: none !important; letter-spacing: normal !important;
box-shadow: none; line-height: 1.3; min-height: 0; cursor: pointer;
}
.dss-konfig button::after, .dss-konfig button::before { content: none; }
/* ===== BUTTON-LAYOUT DURCHSETZEN (0,2,0 schlägt Reset 0,1,1 UND Theme 0,1,1) ===== */
.dss-konfig .dss-nav { padding: 13px 24px; font-size: 15px; line-height: 1.2; }
.dss-konfig .dss-konfig__addbtn { padding: 15px 18px; font-size: 16px; }
/* P1-04: Abstand CTA↔„Gratis-Muster" durchsetzen. Das margin-top:10px an .dss-konfig__sample (0,1,0)
verlor gegen den Button-Reset .dss-konfig button{margin:0} (0,1,1) → 0px „geklebt". (0,2,0) gewinnt. */
.dss-konfig .dss-konfig__sample { padding: 12px 16px; font-size: 14px; margin-top: 14px; }
.dss-konfig .dss-tab { padding: 9px 15px; font-size: 14px; }
.dss-konfig .dss-mp__attr { padding: 6px 12px; font-size: 13px; }
.dss-konfig .dss-option { padding: 12px 14px; font-size: 14px; min-height: 76px; }
.dss-konfig .dss-option__more { padding: 9px 14px; font-size: 12.5px; }
.dss-konfig .dss-mp__more { padding: 13px; font-size: 15px; }
.dss-konfig .dss-panel__readmore { padding: 3px 0; font-size: 13px; }
.dss-konfig .dss-readmore { padding: 4px 0; font-size: 13px; }
.dss-konfig .dss-area__guide { padding: 9px 13px; font-size: 13.5px; }
/* --- Overlays (Modal/Popup/Lightbox) liegen außerhalb .dss-konfig: eigene Tokens + Reset --- */
.dss-modal, .dss-infopop, .dss-lightbox {
--dss-orange: #DD6D0B; --dss-orange-dark: #b8570a; --dss-ink: #211c15; --dss-ink-soft: #6b6157;
--dss-line: #e7ded3; --dss-bg: #fbf6f0; --dss-bg-warm: #f4ece1; --dss-white: #fff; --dss-ok: #2f7d4f;
--dss-shadow: 0 2px 10px rgba(40,28,12,.06);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; color: var(--dss-ink);
}
.dss-modal *, .dss-infopop * { box-sizing: border-box; }
.dss-modal button, .dss-infopop button {
-webkit-appearance: none; appearance: none; background: transparent; border: 0; margin: 0; padding: 0; font: inherit; color: inherit;
text-transform: none !important; letter-spacing: normal !important; box-shadow: none; cursor: pointer; line-height: 1.3; min-height: 0;
}
/* Swatch-Karte muss den Button-Reset (border:0 / min-height:0) in BEIDEN Kontexten überschreiben.
Die min-height verhindert das Kollabieren der Grid-Zeile (Button-Intrinsic-Sizing-Quirk). */
.dss-mp .dss-swatch, .dss-modal .dss-swatch { border: 1.5px solid var(--dss-line); min-height: 188px; }
.dss-mp .dss-swatch.is-selected, .dss-modal .dss-swatch.is-selected { border-color: var(--dss-orange); }
.dss-modal button::after, .dss-modal button::before { content: none; }
/* Button-Layout in Overlays durchsetzen (0,2,0 schlägt Reset+Theme). Farb-Chips/Attribut-Chips/„Alle anzeigen".
.dss-mp__color & Co. kommen sowohl im Panel (.dss-konfig) als auch im Modal (.dss-modal) vor → beide Kontexte. */
.dss-modal .dss-modal__attr { padding: 7px 12px; font-size: 13px; }
.dss-modal .dss-sample__submit { padding: 12px 22px; font-size: 15px; }
.dss-konfig .dss-mp__color, .dss-modal .dss-mp__color { padding: 6px 12px 6px 8px; font-size: 13px; }
.dss-modal .dss-mp__more { padding: 13px; font-size: 15px; }
.dss-modal .dss-swatch, .dss-modal .dss-mp__color { background: #fff !important; }
.dss-modal :is(button, input, select):focus-visible { outline: 2px solid var(--dss-orange); outline-offset: 2px; }
/* --- A11y: sichtbarer Fokus (Button-Reset entfernt sonst jeden Fokus) --- */
.dss-konfig :is(button, a, select, input, [tabindex]):focus-visible {
outline: 2px solid var(--dss-orange); outline-offset: 2px; border-radius: 6px;
}
.dss-konfig :is(button, a, select, input):focus:not(:focus-visible) { outline: none; }
/* ---------- Linke Spalte: Galerie + Preis + Konfiguration ---------- */
.dss-konfig__visual { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
/* Galerie deckeln, damit Galerie + Preisbox in den sichtbaren Bereich passen und die
sticky-Preisbox beim Scrollen zuverlässig sichtbar bleibt (Desktop). */
@media (min-width: 901px) {
.dss-konfig__stage { max-height: 42vh; }
/* REGRESSIONS-FIX (Sticky-Preis): Die gesamte linke Spalte (Galerie+Preisbox+„Ihre Konfiguration")
ist EIN sticky Element. Mit wachsender Konfig-Übersicht (#52, mehrere Zeilen je gewähltem Schritt)
kann diese Spalte höher werden als der verfügbare Viewport — dann hat position:sticky keinen
Bewegungsspielraum mehr und die Preis+„In den Warenkorb"-Box wird beim Scrollen aus dem Bild
geschoben ("nicht mehr sticky"). Fix: die Spalte bekommt eine harte Obergrenze relativ zum
Viewport + eigenes Scrolling — Preis/CTA bleiben dadurch GARANTIERT innerhalb des sichtbaren
Bereichs, unabhängig davon, wie lang Galerie/Übersicht werden.
Trennung von Preis/CTA in ein EIGENES sticky-Element (ohne Galerie) wäre die Alternative, würde
aber mit der direkt darunterliegenden Konfig-Übersicht (gleicher Fluss, kein eigener Grid-Track)
optisch überlappen — bewusst NICHT gewählt (Regressionsschutz).) */
.dss-konfig__visual { max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
/* Der eigentliche „Bezahlbereich" darf nie schrumpfen — nur die wachsende Konfig-Übersicht
bekommt bei Bedarf ein eigenes Innen-Scrolling (siehe .dss-konfig__summary unten). */
.dss-konfig__pricebox { flex: 0 0 auto; }
}
.dss-konfig__stage {
background: var(--dss-bg-warm); border: 1px solid var(--dss-line);
border-radius: var(--dss-radius); overflow: hidden;
/* FB (Preview-Crop): die v6-Raumbilder sind QUADRATISch (1254×1254, ebenso das Doppelplissee-
Composite). Ein 4/3-Cover-Rahmen schnitt oben+unten ab (Fensteroberkante nicht sichtbar). 1/1
passt zum Quadrat-Original → das Bild füllt die Breite komplett; object-fit:contain garantiert
zusätzlich, dass NIE etwas abgeschnitten wird (falls ein Nicht-Quadrat-Detailbild durchläuft
oder max-height greift → Letterbox in bg-warm statt Crop). */
aspect-ratio: 1 / 1; max-height: 42vh; display: flex; align-items: center; justify-content: center;
box-shadow: var(--dss-shadow);
position: relative; /* v6-Carousel-Pfeile (Feedback 15.07.) */
}
.dss-konfig__main { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s ease; }
/* v6-Carousel: Pfeile + Dots im Preview (room/detail durchklicken). */
.dss-konfig__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.9); color: #1a1a1a; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 4; padding: 0; transition: background .15s; }
.dss-konfig__nav:hover { background: #fff; }
.dss-konfig__nav--prev { left: 10px; }
.dss-konfig__nav--next { right: 10px; }
.dss-konfig__navdots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; }
.dss-konfig__navdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.65); display: block; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dss-konfig__navdots i.is-active { background: var(--dss-orange, #db6d0b); }
.dss-konfig__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.dss-konfig__thumb {
width: 64px; height: 64px; border-radius: 10px; overflow: hidden; padding: 0;
border: 2px solid var(--dss-line); background: var(--dss-bg-warm); transition: border-color .15s;
}
.dss-konfig__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dss-konfig__thumb.is-active { border-color: var(--dss-orange); }
/* KF1b (16.07.): Galerie = GENAU 3 statische Kacheln des aktuellen Stoffs (Raum/Transparenz/Stoff),
kein Klick-Karussell mehr. .dss-konfig__nav/.dss-konfig__navdots-Regeln oben bleiben additiv
stehen (werden von der JS nicht mehr erzeugt) — reines Sicherheitsnetz gegen alte Cache-Stände. */
.dss-konfig__thumbs--fabric { margin-top: 14px; }
.dss-konfig__thumb--fabric {
width: 84px; height: auto; padding: 0; border: none; background: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dss-konfig__thumb--fabric img {
width: 84px; height: 84px; border-radius: 10px; object-fit: cover; display: block;
border: 2px solid var(--dss-line); background: var(--dss-bg-warm); transition: border-color .15s;
}
.dss-konfig__thumb--fabric small { font-size: 11.5px; font-weight: 600; color: var(--dss-ink-soft); text-align: center; }
.dss-konfig__thumb--fabric:hover img { border-color: var(--dss-orange); }
.dss-konfig__thumb--fabric.is-active img { border-color: var(--dss-orange); }
.dss-konfig__thumb--fabric.is-active small { color: var(--dss-orange); }
/* Preisbox */
.dss-konfig__pricebox {
background: var(--dss-white); border: 1px solid var(--dss-line);
border-radius: var(--dss-radius); padding: 18px 20px; box-shadow: var(--dss-shadow);
}
.dss-konfig__pricebox.is-flash { animation: dssflash .6s ease; }
@keyframes dssflash { 0%,100% { box-shadow: var(--dss-shadow); } 50% { box-shadow: 0 0 0 3px rgba(221,109,11,.35); } }
.dss-konfig__priceline { display: flex; align-items: baseline; justify-content: space-between; }
.dss-konfig__pricelabel { font-size: 14px; color: var(--dss-ink-soft); font-weight: 600; }
.dss-konfig__price { font-size: 30px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dss-konfig__pricehint { font-size: 12px; color: var(--dss-ink-soft); margin: 4px 0 14px; }
.dss-konfig__addbtn {
width: 100%; background: var(--dss-orange) !important; color: #fff !important;
font-size: 16px; font-weight: 700; padding: 15px 18px; border-radius: 11px;
display: flex; align-items: center; justify-content: center; gap: 10px;
transition: background .15s, transform .05s;
}
.dss-konfig__addbtn:hover:not(:disabled) { background: var(--dss-orange-dark) !important; }
.dss-konfig__addbtn:active:not(:disabled) { transform: translateY(1px); }
/* Disabled/gated: klar „ausstehend" statt kaputt — heller Rahmen + lesbarer Text (guter Kontrast).
FB06: .is-gated bleibt KLICKBAR (cursor:pointer) und führt zum offenen Schritt (keine Sackgasse);
der aktive Zustand ist klar primär-orange darüber. */
.dss-konfig__addbtn:disabled { background: #f0eae2 !important; color: var(--dss-ink-soft) !important; border: 1.5px solid var(--dss-line) !important; cursor: not-allowed; }
.dss-konfig__addbtn:disabled .dss-ic { opacity: .6; }
/* FB06: gated = klar UNTERSCHEIDBARE „Zwischen-Aktion" (Outline-Orange, klickbar → führt zum offenen
Schritt), NICHT das tote Grau von früher. Der aktive Zustand darüber ist solide primär-orange. */
.dss-konfig__addbtn.is-gated { background: #fff !important; color: var(--dss-orange-dark) !important; border: 1.6px solid var(--dss-orange) !important; cursor: pointer; box-shadow: none !important; }
.dss-konfig__addbtn.is-gated:hover { background: var(--dss-bg-warm) !important; border-color: var(--dss-orange-dark) !important; }
.dss-konfig__addbtn.is-gated .dss-ic { opacity: 1; color: var(--dss-orange) !important; }
/* Konfig-Überschriften/Texte nie im Blocksatz (Theme erzwingt sonst „ohne bohren"). */
.dss-konfig h1, .dss-konfig h2, .dss-konfig h3, .dss-konfig h4, .dss-konfig p, .dss-konfig__h2, .dss-konfig__lead, .dss-panel__desc, .dss-panel__desc-inner { text-align: left !important; }
.dss-konfig__addbtn.is-loading { opacity: .7; pointer-events: none; }
.dss-konfig__addbtn .dss-ic { width: 20px; height: 20px; }
.dss-konfig__sample {
display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
margin-top: 10px; padding: 12px 14px; border-radius: 11px;
border: 1.5px solid var(--dss-line) !important; background: #fff !important;
color: var(--dss-ink) !important; text-decoration: none; font-weight: 600; font-size: 14px;
transition: border-color .15s, background .15s;
}
/* #83/#93: klar als klickbare Aktion (nicht wie ein reiner Text-/Navigationslink) erkennbar — Rahmen,
Hintergrund UND ein leichter Schatten wechseln gemeinsam, damit der Hover eindeutig „hier passiert
etwas" statt „das ist nur ein Link" signalisiert. */
.dss-konfig__sample:hover { border-color: var(--dss-orange) !important; background: var(--dss-bg-warm) !important; box-shadow: 0 3px 10px rgba(40,28,12,.10); }
.dss-konfig__sample .dss-ic { width: 18px; height: 18px; color: var(--dss-orange); }
.dss-konfig__price.is-anchor { color: var(--dss-ink-soft); }
.dss-konfig__price.is-loading { opacity: .5; }
/* ---------- Bestell-Hinweis (P0-06: kollabierbar, auch mobil erreichbar) ---------- */
.dss-notewrap { margin: 14px 0 4px; }
.dss-konfig .dss-note__toggle {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
padding: 10px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
border: 1.5px dashed var(--dss-line) !important; border-radius: 11px;
background: var(--dss-bg) !important; color: var(--dss-ink-soft) !important;
transition: border-color .15s, color .15s, background .15s;
}
.dss-konfig .dss-note__toggle:hover { border-color: var(--dss-orange) !important; color: var(--dss-orange-dark) !important; background: var(--dss-bg-warm) !important; }
.dss-note__toggle .dss-ic { color: var(--dss-orange); flex: 0 0 auto; }
.dss-notewrap.is-open .dss-note__toggle { border-style: solid !important; }
.dss-note__body { margin-top: 10px; }
.dss-note__body[hidden] { display: none; }
.dss-note__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.dss-note__hint { font-size: 12.5px; opacity: .72; margin: 0 0 8px; line-height: 1.4; }
.dss-konfig .dss-note {
width: 100%; padding: 11px 13px !important; font: inherit; line-height: 1.45;
border: 1px solid var(--dss-line) !important; border-radius: 12px !important;
background: #fff !important; color: inherit; resize: vertical; min-height: 80px; box-sizing: border-box;
-webkit-appearance: none; appearance: none;
}
.dss-konfig .dss-note:focus { outline: 0; border-color: var(--dss-orange) !important; box-shadow: 0 0 0 3px rgba(221,109,11,.15); }
.dss-ic--sm { width: 15px; height: 15px; vertical-align: -3px; }
.dss-konfig__pricehint .dss-ic--sm { color: var(--dss-ok); margin: 0 2px; }
/* Trust-Leiste */
.dss-konfig__trust {
list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--dss-line);
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.dss-konfig__trust li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dss-ink-soft); font-weight: 600; }
.dss-konfig__trust .dss-ic--sm { color: var(--dss-orange); flex: 0 0 auto; width: 17px; height: 17px; }
/* Zusammenfassung */
.dss-konfig__summary:empty { display: none; }
.dss-konfig__summary {
background: var(--dss-white); border: 1px solid var(--dss-line);
border-radius: var(--dss-radius); padding: 16px 20px;
flex: 0 1 auto; min-height: 0;
}
/* Wächst mit jedem konfigurierten Schritt (#52) — auf Desktop intern scrollbar begrenzen, statt die
sticky-Spalte (Preis+CTA) unkontrolliert in die Höhe zu treiben (Regressionsfix Sticky-Preis). */
@media (min-width: 901px) {
.dss-konfig__sumlist { max-height: 220px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; }
}
.dss-konfig__sumtitle { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dss-ink-soft); margin: 0 0 10px; }
.dss-konfig__sumlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Zusammenfassungs-Zeile mit Bild + „Ändern"-Sprung (#52) */
.dss-sumrow { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--dss-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dss-sumrow:hover { border-color: var(--dss-orange); box-shadow: 0 2px 10px rgba(40,28,12,.07); }
.dss-sumrow__img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; background: var(--dss-bg-warm) center/cover no-repeat; border: 1px solid var(--dss-line); }
.dss-sumrow__img--empty { background: var(--dss-bg-warm); }
/* L7 (14.07.): Icon statt Bild (Maße/Stoff ohne Vorschaubild). */
.dss-sumrow__img--icon { display: flex; align-items: center; justify-content: center; background: var(--dss-bg-warm); color: var(--dss-amber, #db6d0b); }
.dss-sumrow__img--icon svg { width: 22px; height: 22px; }
.dss-sumrow__txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dss-sumrow__label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--dss-ink-soft); }
.dss-sumrow__val { font-size: 14px; font-weight: 600; color: var(--dss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dss-sumrow__edit { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--dss-orange); padding: 4px 8px; border-radius: 7px; }
.dss-sumrow:hover .dss-sumrow__edit { background: var(--dss-bg-warm); }
/* ---------- Rechte Spalte: Intro + Notice + Tabs + Panels ---------- */
/* L3 (14.07.): optische Trennung links (Vorschau/Preis) ↔ rechts (Konfiguration) — vertikaler Trenner. */
.dss-konfig__panel { min-width: 0; border-left: 1px solid var(--dss-line); padding-left: 40px; }
.dss-konfig__h2 { font-size: 25px; line-height: 1.2; margin: 0 0 6px; font-weight: 800; }
.dss-konfig__lead { color: var(--dss-ink-soft); font-size: 15px; margin: 0 0 20px; }
.dss-konfig__notice {
background: #fdecec; border: 1px solid #f2c2c2; color: #9a2b2b;
border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}
/* Tab-Navigation */
.dss-tabs {
display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px;
border-bottom: 1px solid var(--dss-line); scrollbar-width: thin;
}
.dss-tab {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
color: var(--dss-ink-soft); white-space: nowrap; transition: background .15s, color .15s;
}
.dss-tab:hover { background: var(--dss-bg-warm); }
.dss-tab[aria-selected="true"] { background: var(--dss-ink); color: #fff; }
/* #84/#92: JS setzt `tab.hidden = true` für nicht zutreffende/übersprungene Schritte (ruledOut/dss-skip),
damit sie NICHT in der Stepper-Leiste erscheinen und renumberTabs() sie bei der fortlaufenden
Nummerierung auslässt. Ohne diese Regel gewinnt `.dss-tab{display:inline-flex}` (Autor-Origin) gegen
das UA-Stylesheet `[hidden]{display:none}` bei gleicher Spezifität — der Tab blieb also SICHTBAR
(nur sein data-Attribut war korrekt gesetzt), wodurch nicht zutreffende Schritte weiter in der Leiste
auftauchten UND ihre (nicht mehr aktualisierte) alte Nummer stehen blieb → doppelte Schrittnummern. */
.dss-tab[hidden] { display: none !important; }
.dss-tab__no {
width: 22px; height: 22px; border-radius: 50%; background: var(--dss-bg-warm); color: var(--dss-ink);
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.dss-tab[aria-selected="true"] .dss-tab__no { background: rgba(255,255,255,.22); color: #fff; }
.dss-tab.is-complete .dss-tab__no { background: var(--dss-ok); color: #fff; }
.dss-tab.is-complete .dss-tab__mark::after { content: "✓"; color: var(--dss-ok); font-weight: 800; font-size: 13px; }
.dss-tab[aria-selected="true"].is-complete .dss-tab__mark::after { color: #fff; }
/* Panels */
.dss-panel { animation: dssfade .25s ease; }
.dss-panel[hidden] { display: none; }
@keyframes dssfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dss-panel__head { margin-bottom: 16px; }
.dss-panel__title { font-size: 20px; font-weight: 800; margin: 0; }
.dss-panel__desc { color: var(--dss-ink-soft); font-size: 14px; margin: 6px 0 0; }
.dss-panel__desc.dss-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dss-panel__desc.is-expanded { -webkit-line-clamp: unset; }
/* Langer Sektions-Text: eingeklappt mit weichem Fade + „mehr lesen" */
.dss-panel__desc--clamp { position: relative; margin: 6px 0 0; }
.dss-panel__desc--clamp .dss-panel__desc-inner { color: var(--dss-ink-soft); font-size: 14px; }
.dss-panel__desc--clamp.is-clamped .dss-panel__desc-inner { max-height: 3.1em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.dss-panel__readmore { display: inline-block; margin-top: 4px; padding: 2px 0; border: 0 !important; background: none !important; color: var(--dss-orange) !important; font-weight: 700; font-size: 13px; cursor: pointer; }
.dss-panel__readmore:hover { text-decoration: underline; }
.dss-panel__desc--clamp:not(.is-clamped) .dss-panel__readmore::after { content: ""; }
.dss-readmore { color: var(--dss-orange) !important; font-weight: 700; font-size: 13px; padding: 4px 0; background: none !important; }
.dss-readmore:hover { text-decoration: underline; }
.dss-panel__body { margin-bottom: 20px; }
/* Gebündelte Schritte (#33): mehrere Sektionen in einem Panel */
.dss-subsection { margin-bottom: 24px; }
.dss-subsection:last-of-type { margin-bottom: 0; }
.dss-panel--group .dss-subsection__title { font-size: 15px; font-weight: 700; color: var(--dss-ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--dss-line); }
.dss-subsection .dss-panel__body { margin-bottom: 0; }
/* Panel-Navigation (Zurück / Weiter) */
.dss-panel__nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--dss-line); }
.dss-nav { padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 15px; transition: background .15s, border-color .15s; }
.dss-nav--back { border: 1.5px solid var(--dss-line); color: var(--dss-ink-soft); background: var(--dss-white); }
.dss-nav--back:hover { border-color: var(--dss-ink-soft); }
.dss-nav--back[disabled] { opacity: .4; cursor: not-allowed; }
.dss-nav--back[disabled]:hover { border-color: var(--dss-line); }
/* „Weiter" (Feedback 14.07.): ZWEI Zustände. Noch nicht valide → heller Grün-Umriss, schwarze Schrift
(dezent, „hier geht's lang"). Sobald der Schritt gültig gewählt ist (.is-ready) → dunkelgrün gefüllt,
weiße Schrift — das klare, auffällige „jetzt weiter" (Orange wurde als Weiter-Signal nicht verstanden). */
.dss-nav--next {
margin-left: auto;
background: var(--dss-go-soft, #edf5ef) !important;
color: var(--dss-ink, #211c15) !important;
border: 1.5px solid var(--dss-go-border, #c3dcc8) !important;
transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.dss-nav--next:hover { background: #e5f0e8 !important; border-color: var(--dss-go, #2f7d4f) !important; }
.dss-nav--next.is-ready {
background: var(--dss-go, #2f7d4f) !important; color: #fff !important;
border-color: var(--dss-go, #2f7d4f) !important; box-shadow: 0 4px 14px rgba(47,125,79,.26);
}
.dss-nav--next.is-ready:hover { background: var(--dss-go-dark, #256340) !important; border-color: var(--dss-go-dark, #256340) !important; }
/* L6 (14.07.): Der Kauf-Button ist der letzte Schritt-Button (.dss-nav--next → „In den Warenkorb").
Der zusätzliche Button in der sticky Preisbox ist auf dem Desktop redundant + verwirrend (wechselt
„Maße eingeben"/„In den Warenkorb") → nur DESKTOP ausblenden. MOBIL bleibt #dss-addbtn der fixe
Bottom-CTA (s. Responsive-Block). #dss-addbtn bleibt im DOM (trägt Gating-/Preis-Anker-Zustand). */
@media (min-width: 901px) { #dss-cart #dss-addbtn { display: none !important; } }
/* End-CTA (letzter Schritt = „In den Warenkorb") deutlich als Abschluss hervorheben. */
.dss-nav--next.dss-nav--cart { padding-top: 15px; padding-bottom: 15px; box-shadow: 0 6px 18px rgba(219,109,11,.28); }
/* ---------- Options-Boxen (einheitlich) + (i)-Info ---------- */
.dss-panel__body:has(.dss-option-wrap) {
display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.dss-option-wrap {
position: relative; display: flex; flex-direction: column;
border: 1.5px solid var(--dss-line); background: #fff; border-radius: 12px; overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.dss-option-wrap:hover { border-color: #cdbfad; box-shadow: var(--dss-shadow); }
.dss-option-wrap:has(.dss-option.is-selected) { border-color: var(--dss-orange); box-shadow: 0 0 0 3px rgba(221,109,11,.16); }
/* Nicht verfügbare Optionen komplett ausblenden — nur zeigen, was wählbar ist. */
.dss-option-wrap:has(.dss-option.is-disabled), .dss-option.is-disabled { display: none !important; }
/* Kartenlayout (Feedback 14.07.): Spalte — Kopfzeile (Bild links + Titel rechts), Aufzählung
in voller Breite darunter, weniger Weißraum unten. Fußzeile (mehr erfahren + Auswählen) separat. */
.dss-option {
display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; flex: 1 1 auto;
border: 0 !important; background: transparent !important; box-shadow: none !important;
/* FB (Layout): weniger Bodenpolster → kleinerer Weißraum zwischen USP-Bullets und Fußzeile. */
padding: 12px 14px 6px; text-align: left;
}
.dss-option__head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 26px; }
.dss-option__img { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 8px; background: var(--dss-bg-warm) center/contain no-repeat; border: 1px solid var(--dss-line); }
.dss-option__img[data-empty] { display: none; }
/* P6 (Feedback 20.07.): Karten MIT echtem, zoombarem Bild (v.a. Modell-Auswahl) — Bild füllt den
Kachel-Kopf oben aus (großes Bild oben, Titel/Details darunter) statt Mini-Thumbnail. Gescopt via
:has(.dss-option__img--zoom), damit reine Text-/Icon-Optionen (Montageart etc.) unverändert bleiben. */
.dss-option__head:has(.dss-option__img--zoom) { flex-direction: column; align-items: stretch; gap: 10px; padding-right: 0; }
.dss-option__head:has(.dss-option__img--zoom) > .dss-option__img--zoom { width: 100%; height: 158px; border-radius: 10px; background: var(--dss-bg-warm); }
/* R27-1 (Team 27.07.): cover BESCHNITT hohe Quellbilder (Fensterformen, Modelle, Montage-Detailkreise,
Bedienstab) am Kachelrand — contain zeigt das Motiv vollstaendig auf warmem Grund. */
.dss-option__head:has(.dss-option__img--zoom) > .dss-option__img--zoom img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; padding: 4px; box-sizing: border-box; }
.dss-option__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dss-option__name { font-weight: 700; font-size: 14px; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.dss-option__desc {
font-size: 12px; color: var(--dss-ink-soft); line-height: 1.35; width: 100%; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dss-option__desc:empty { display: none; }
/* L10 (14.07.): 2-3 kompakte Modell-Merkmale als Merkmal-Liste — volle Breite unter der Kopfzeile. */
/* FB (Layout): engere Zeilen zwischen den Merkmalen. */
.dss-option__usps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.dss-option__usps li { position: relative; padding-left: 14px; font-size: 12px; line-height: 1.28; color: var(--dss-ink-soft); }
/* R26+R29 (29.07., Silke): KEINE Haken mehr in Options-BESCHREIBUNGEN. Die orangen ✓-Bullets
wirkten wie „bestätigte Auswahl" und standen im Widerspruch zu den Fließtext-Karten desselben
Schritts (uneinheitlich). Jetzt ein dezenter, einheitlicher Punkt-Bullet — gilt automatisch für
ALLE Konfiguratoren, weil konfigurator.css von allen Produktseiten geteilt wird.
WICHTIG: Häkchen an anderen Stellen bleiben unangetastet (Schrittleiste .dss-tab__mark,
„✓ Ausgewählt" auf .dss-option__select, .dss-option__check auf der Karte, Zusammenfassung). */
.dss-option__usps li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--dss-ink-soft, #6f6a63); font-weight: 700; }
/* L2 (14.07.): Schritt-Beschreibung ÜBER der Auswahl → Abstand nach unten statt nach oben. */
.dss-panel__desc--above { margin: 4px 0 14px !important; }
.dss-panel__desc--above.dss-panel__desc--clamp { margin: 4px 0 14px !important; }
.dss-option__check {
position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid var(--dss-line); color: #fff; display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s, background .15s; background: #fff; z-index: 2;
}
.dss-option.is-selected .dss-option__check { opacity: 1; background: var(--dss-orange); border-color: var(--dss-orange); }
.dss-option__check .dss-ic { width: 12px; height: 12px; }
/* Fußzeile (FB Layout 15.07.): Preis in EIGENER Zeile oben, darunter die Aktions-Zeile
(mehr erfahren / Messhinweise links, Auswählen rechts). Spart Weißraum, trennt Info von Aktion. */
/* R24 (29.07., Silke): Fußzeile war 12px eingerückt, der Kartentext (.dss-option, padding 12px 14px)
aber 14px → „mehr erfahren"/„Auswählen" standen 2px WEITER LINKS als Titel/Beschreibung/Bullets.
Gleiche Einrückung wie der Kartentext = eine gemeinsame linke Kante über die ganze Karte. */
.dss-option__foot { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--dss-line); }
/* Aktions-Zeile: die Buttons nebeneinander; „Auswählen" wird per margin-left:auto nach rechts geschoben. */
.dss-option__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Per-Option-„ab"-Preis (N-Opt): fett, amber-ink — wie die Hub-/Modell-Karte
(.dss-mfa-model__price / .dss-modell__price). Eigene Zeile über den Buttons. */
.dss-option__price {
margin: 0; font-weight: 800; font-size: 14px; white-space: nowrap;
color: var(--dss-deep, #b4530a); letter-spacing: .01em;
}
/* „mehr erfahren" als erkennbarer Outline-Button (Feedback 14.07.: Border drum, damit es als Button lesbar ist). */
.dss-option__more {
display: inline-flex; align-items: center; gap: 4px; width: auto; text-align: left; padding: 6px 13px !important; margin: 0;
border: 1.5px solid var(--dss-line) !important; border-top: 1.5px solid var(--dss-line) !important; border-radius: 9px !important;
background: var(--dss-white, #fff) !important; color: var(--dss-orange) !important; font-weight: 700; font-size: 12.5px; cursor: pointer;
transition: border-color .15s, background .15s;
}
.dss-option__more::before { content: "ⓘ "; font-style: normal; }
.dss-option__more:hover { background: var(--dss-bg-warm, #f7f1e8) !important; border-color: var(--dss-orange) !important; text-decoration: none; }
/* FB9: „Messhinweise"-Button (nur Montageart-Karten) — Outline-Chip mit Lineal-Icon, passend zu
„mehr erfahren". Öffnet das Rich-HTML-Info-Modal mit den Mess-Diagrammen. */
.dss-option__mess {
display: inline-flex; align-items: center; gap: 5px; width: auto; text-align: left; padding: 6px 12px !important; margin: 0;
border: 1.5px solid var(--dss-line) !important; border-radius: 9px !important;
background: var(--dss-white, #fff) !important; color: var(--dss-orange-dark, #b8570a) !important;
font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap;
transition: border-color .15s, background .15s;
}
.dss-option__mess .dss-ic { width: 15px; height: 15px; color: var(--dss-orange); flex: 0 0 auto; }
.dss-option__mess:hover { background: var(--dss-bg-warm, #f7f1e8) !important; border-color: var(--dss-orange) !important; text-decoration: none; }
/* „Auswählen"-Button: klein, auffällig (amber gefüllt); markiert bei Auswahl (deep amber + „✓ Ausgewählt"). */
.dss-option__select {
margin-left: auto !important; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
padding: 7px 15px !important; border: 0 !important; border-radius: 8px !important; cursor: pointer;
background: var(--dss-orange, #db6d0b) !important; color: #fff !important; font-weight: 800; font-size: 12.5px;
transition: background .15s; width: auto; flex: 0 0 auto;
}
.dss-option__select:hover { background: var(--dss-deep, #b4530a) !important; }
.dss-option__select .dss-ic { width: 13px; height: 13px; }
.dss-option__select-pick { display: inline-flex; align-items: center; }
.dss-option__select-done { display: none; align-items: center; gap: 5px; }
.dss-option-wrap:has(.dss-option.is-selected) .dss-option__select { background: var(--dss-deep, #b4530a) !important; }
.dss-option-wrap:has(.dss-option.is-selected) .dss-option__select-pick { display: none; }
.dss-option-wrap:has(.dss-option.is-selected) .dss-option__select-done { display: inline-flex; }
/* (i)-Popup */
.dss-infopop {
position: fixed; inset: 0; background: rgba(20,14,6,.5); z-index: 10000;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dss-infopop__box {
background: #fff; border-radius: 14px; max-width: 420px; width: 100%; padding: 24px 26px;
box-shadow: 0 20px 60px rgba(0,0,0,.3); position: relative;
font-family: inherit; color: var(--dss-ink);
}
.dss-infopop__box h4 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.dss-infopop__box p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dss-ink-soft); }
/* FB05: strukturierte Info-Modals statt roher key:value-Dump */
.dss-infopop__intro { margin: 0 0 12px !important; color: var(--dss-ink) !important; }
.dss-infopop__dl { margin: 0; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--dss-line); border-radius: 12px; overflow: hidden; background: var(--dss-line); }
.dss-infopop__row { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 10px 14px; background: #fff; align-items: baseline; }
.dss-infopop__row dt { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--dss-ink-soft); text-transform: uppercase; letter-spacing: .02em; }
.dss-infopop__row dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--dss-ink); line-height: 1.4; }
.dss-infopop__row--price { background: var(--dss-bg-warm); }
.dss-infopop__row--price dt { color: var(--dss-orange-dark); }
.dss-infopop__row--price dd { color: var(--dss-orange-dark); font-weight: 800; }
.dss-infopop__doc { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border: 1.5px solid var(--dss-line); border-radius: 10px; background: var(--dss-bg); color: var(--dss-orange-dark) !important; font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .15s, background .15s; }
.dss-infopop__doc:hover { border-color: var(--dss-orange); background: var(--dss-bg-warm); }
.dss-infopop__doc .dss-ic { width: 18px; height: 18px; color: var(--dss-orange); flex: 0 0 auto; }
/* Feedback 14.07.: „Auswählen" direkt aus dem Info-Popup — primärer, breiter amber-Button unten. */
.dss-infopop__foot { margin-top: 16px; }
.dss-infopop__select {
display: block; width: 100%; padding: 13px 18px !important; border: 0 !important; border-radius: 11px !important; cursor: pointer;
background: var(--dss-orange, #db6d0b) !important; color: #fff !important; font-weight: 800; font-size: 15px; text-align: center;
transition: background .15s;
}
.dss-infopop__select:hover { background: var(--dss-deep, #b4530a) !important; }
.dss-infopop__select.is-selected { background: var(--dss-deep, #b4530a) !important; }
/* FB05 (Erweiterung): kompakte Struktur für INLINE „mehr lesen"-Sektionstexte */
.dss-struct { margin: 6px 0 0; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--dss-line); border-radius: 10px; overflow: hidden; background: var(--dss-line); }
.dss-struct__row { display: grid; grid-template-columns: 38% 1fr; gap: 8px; padding: 7px 11px; background: #fff; align-items: baseline; }
.dss-struct__row dt { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--dss-ink-soft); }
.dss-struct__row dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--dss-ink); line-height: 1.4; }
.dss-struct__row--price { background: var(--dss-bg-warm); }
.dss-struct__row--price dt, .dss-struct__row--price dd { color: var(--dss-orange-dark); }
.dss-struct__intro { margin: 4px 0 8px !important; }
.dss-infopop__media { margin: 0 0 14px; border-radius: 12px; overflow: hidden; background: var(--dss-bg-warm); }
.dss-infopop__media img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.dss-infopop__media--svg { display: flex; align-items: center; justify-content: center; padding: 18px; color: var(--dss-orange); }
.dss-infopop__media--svg svg { width: 100%; max-width: 260px; height: auto; }
/* FB9: Rich-HTML-Messhinweise-Modal — etwas breiter + scrollbar (Text + 1–2 Beispiel-Diagramme). */
.dss-infopop--mess .dss-infopop__box { max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; }
.dss-infopop__mess { font-size: 14.5px; line-height: 1.55; color: var(--dss-ink); }
.dss-infopop__mess > :first-child { margin-top: 0; }
.dss-infopop__mess p { margin: 0 0 10px; }
.dss-infopop__mess p:last-child { margin-bottom: 0; }
.dss-infopop__mess br { line-height: 0.4; }
.dss-infopop__mess strong, .dss-infopop__mess b { color: var(--dss-ink); font-weight: 800; }
.dss-infopop__mess h3, .dss-infopop__mess h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 800; color: var(--dss-ink); }
.dss-infopop__mess ul, .dss-infopop__mess ol { margin: 0 0 10px; padding-left: 20px; }
.dss-infopop__mess li { margin: 0 0 4px; }
/* Beispiel-Diagramme responsiv, gerahmt, mittig — max-width:100% verhindert Overflow. */
.dss-infopop__mess img {
display: block; max-width: 100%; height: auto; margin: 12px auto 0;
border: 1px solid var(--dss-line); border-radius: 10px; background: var(--dss-bg-warm);
}
/* R12a (28.07., Feedback Silke — revidiert P17-19/20.07.): das Mess-Diagramm ist essenziell und muss
SOFORT + groß im Maß-Schritt sichtbar sein, nicht erst hinter dem Popup-Klick verborgen. P17-19
hatte .dss-area__messguide komplett auf display:none!important gesetzt (nur noch Klon-Quelle fürs
Popup) — das wird hier aufgehoben; Größe/Position s. Regelblock „Maße" weiter unten
(.dss-area__messguide/-diagram/-img). Der Button „So messen Sie richtig" (+Popup) bleibt zusätzlich
bestehen (klont weiterhin denselben, jetzt inline sichtbaren Body — unverändert in konfigurator.js). */
.dss-area__messbtn {
display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
padding: 11px 16px; border: 1.5px solid var(--dss-line); border-radius: 11px; background: #fff;
color: var(--dss-orange-dark, #b4530a); font-family: inherit; font-weight: 700; font-size: 14px;
cursor: pointer; transition: border-color .15s, background .15s;
}
.dss-area__messbtn:hover { border-color: var(--dss-orange, #db6d0b); background: var(--dss-bg-warm, #f7efe3); }
.dss-area__messbtn .dss-ic { width: 18px; height: 18px; color: var(--dss-orange, #db6d0b); flex: 0 0 auto; }
/* P14/P16 (Feedback 20.07.): „Fortsetzen oder neu?"-Prompt beim Laden mit gespeichertem Stand. */
.dss-resume { position: fixed; inset: 0; z-index: 10050; background: rgba(20,14,6,.55); display: flex; align-items: center; justify-content: center; padding: 22px; }
.dss-resume__box { background: #fff; border-radius: 16px; width: min(420px, 96vw); padding: 26px 26px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.35); font-family: inherit; color: var(--dss-ink); }
.dss-resume__title { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.dss-resume__text { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--dss-ink-soft); }
.dss-resume__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dss-resume__new, .dss-resume__resume { flex: 1 1 auto; padding: 13px 16px; border-radius: 11px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 14.5px; border: 1.5px solid var(--dss-line); }
.dss-resume__new { background: #fff; color: var(--dss-ink); }
.dss-resume__new:hover { border-color: #b8a98d; }
.dss-resume__resume { background: var(--dss-orange, #db6d0b); border-color: var(--dss-orange, #db6d0b); color: #fff; }
.dss-resume__resume:hover { background: var(--dss-deep, #b4530a); border-color: var(--dss-deep, #b4530a); }
/* Einheitlicher, dezenter Schließen-Button (kein oranger Blob mehr) */
.dss-infopop__close, .dss-modal__close {
position: absolute; top: 12px; right: 12px;
width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important;
display: inline-flex !important; align-items: center; justify-content: center;
border: 2px solid var(--dss-orange, #db6d0b) !important; border-radius: 50% !important; background: #fff !important;
color: var(--dss-orange-dark, #b4530a) !important; font-size: 21px; line-height: 1; cursor: pointer;
box-shadow: none !important; transition: background .15s, color .15s, border-color .15s;
}
.dss-infopop__close:hover, .dss-modal__close:hover { background: var(--dss-bg-warm, #f7efe3) !important; color: var(--dss-orange, #db6d0b) !important; border-color: var(--dss-orange, #db6d0b) !important; }
/* P3 (Feedback 20.07.): „mehr erfahren"-Popup scrollbar — die Basis-Box hatte kein max-height/overflow,
dadurch wurde Inhalt > Viewport oben+unten abgeschnitten (nur die --mess-Variante war scrollbar). */
.dss-infopop__box { max-height: calc(100vh - 40px); overflow-y: auto; }
/* Schließen-X bleibt beim Scrollen oben sichtbar (sticky statt absolute — sonst scrollt es mit weg). */
.dss-infopop .dss-infopop__box > .dss-infopop__close {
position: sticky; float: right; top: 2px; right: 2px; margin: -8px -8px 4px 10px;
}
/* ---------- Stoff-Modal ---------- */
.dss-modal { position: fixed; inset: 0; background: rgba(20,14,6,.55); z-index: 10002; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dss-modal__box { background: #fff; border-radius: 16px; width: min(900px, 96vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; }
.dss-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--dss-line); }
.dss-modal__head h3 { margin: 0; font-size: 19px; font-weight: 800; }
.dss-modal__close { position: static; }
.dss-modal__filters { padding: 14px 22px; border-bottom: 1px solid var(--dss-line); display: flex; flex-direction: column; gap: 12px; }
/* Suche mit Icon (kein „Windows-95"-Look mehr) */
.dss-modal__searchwrap { position: relative; display: flex; align-items: center; }
.dss-modal__searchic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px !important; height: 18px !important; min-width: 0; flex: none; color: var(--dss-ink-soft); pointer-events: none; }
/* padding-left !important: das Theme (app.css [type='search']{padding:.375rem}) hat gleiche Spezifität
und lädt später → würde das Left-Padding auf ~6px kollabieren, sodass die Lupe den Platzhalter überlappt. */
.dss-modal__search { margin: 0 !important; padding: 12px 14px 12px 42px !important; border: 1.5px solid var(--dss-line) !important; border-radius: 11px; font-size: 15px; line-height: 1.3; width: 100%; background: #fff; color: var(--dss-ink); -webkit-appearance: none; appearance: none; box-shadow: none; }
/* P8 (Feedback 20.07.): Such-Icon exakt auf die Feld-Mitte zentrieren. margin:0 am Input (Theme-Margin
machte den searchwrap höher als das Feld → Icon saß ~6px zu tief). Icon bleibt absolut top:50%. */
.dss-modal__search:focus { outline: 0; border-color: var(--dss-orange) !important; box-shadow: 0 0 0 3px rgba(221,109,11,.15); }
.dss-modal__filtergroup { display: flex; flex-direction: column; gap: 7px; }
.dss-modal__filterlabel { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dss-ink-soft); }
.dss-modal__attrs { display: flex; flex-wrap: wrap; gap: 8px; }
.dss-modal__attr { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--dss-line) !important; border-radius: 999px; background: #fff !important; font-size: 13px; font-weight: 600; color: var(--dss-ink) !important; cursor: pointer; transition: border-color .15s, background .15s; }
.dss-modal__attr:hover { border-color: #cdbfad !important; }
.dss-modal__attr.is-active { border-color: var(--dss-orange) !important; background: var(--dss-bg-warm) !important; color: var(--dss-orange) !important; }
.dss-modal__attr-ic { display: inline-flex; }
.dss-modal__attr-ic .dss-ic--xs { width: 15px; height: 15px; }
.dss-modal__count { font-size: 12.5px; color: var(--dss-ink-soft); font-weight: 600; }
.dss-modal__colors { display: flex; flex-wrap: wrap; gap: 8px; max-height: 92px; overflow-y: auto; }
.dss-modal__grid { padding: 18px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* P12 (Feedback 20.07.): Mobil war nur das Grid ein winziger Scroll-Streifen (Head+Filter+Foot fix
bei max-height:90vh → nur ~2cm sichtbar). Fix: die GANZE Box scrollt (dvh, Vollbild-Sheet), Head+Foot
bleiben sticky, Grid+Filter scrollen gemeinsam → „alles unter dem Header inkl. Filter" ist scrollbar.
Rein CSS, kein Markup-Umbau. */
@media (max-width: 900px) {
.dss-modal { padding: 0; align-items: stretch; }
.dss-modal__box { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dss-modal__head { position: sticky; top: 0; z-index: 4; background: #fff; }
.dss-modal__filters { position: static; }
.dss-modal__colors { max-height: none; overflow: visible; }
.dss-modal__grid { overflow: visible; flex: none; min-height: 0; padding-bottom: 10px; }
.dss-modal__foot { position: sticky; bottom: 0; z-index: 4; background: #fff; box-shadow: 0 -4px 14px rgba(20,14,6,.06); }
}
/* ---------- Gratis-Muster-Modal (FB06) ---------- */
.dss-modal__sub { margin: 3px 0 0; font-size: 13px; color: var(--dss-ink-soft); }
.dss-modal__head > div { min-width: 0; }
.dss-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--dss-line); flex: 0 0 auto; background: #fff; }
/* Feedback 14.07.: Preis-Footer im „Stoff & Farbe wählen"-Popup (wie Normalansicht). */
.dss-modal__foot--price { justify-content: flex-start; gap: 10px; align-items: baseline; }
.dss-modal__pricelabel { font-size: 13px; font-weight: 600; color: var(--dss-ink-soft); }
.dss-modal__pricenum { font-size: 22px; font-weight: 800; color: var(--dss-ink); letter-spacing: -.01em; }
.dss-sample__count { font-size: 14px; font-weight: 700; color: var(--dss-ink); font-variant-numeric: tabular-nums; }
.dss-sample__submit { background: var(--dss-orange) !important; color: #fff !important; font-weight: 700; border-radius: 11px; transition: background .15s; }
.dss-sample__submit:hover:not(:disabled) { background: var(--dss-orange-dark) !important; }
.dss-sample__submit:disabled { background: #e6ddd2 !important; color: var(--dss-ink-soft) !important; cursor: not-allowed; }
.dss-sample__submit.is-loading { opacity: .7; pointer-events: none; }
/* Mehrfach-Auswahl-Karten mit Häkchen-Badge */
.dss-swatch--pick { cursor: pointer; }
.dss-swatch__pick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1.5px solid var(--dss-line); color: transparent; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.14); transition: background .15s, color .15s, border-color .15s; }
.dss-swatch__pick .dss-ic { width: 14px; height: 14px; }
.dss-swatch--pick.is-checked .dss-swatch__pick { background: var(--dss-orange); border-color: var(--dss-orange); color: #fff; }
.dss-modal .dss-swatch--pick.is-checked { border-color: var(--dss-orange) !important; box-shadow: 0 0 0 3px rgba(221,109,11,.2); }
/* Feedback 14.07.: klarer Abstand vom Stoff-Grid + als wirklich hervorgehobener Button (weiß, kräftiger
Rahmen, Schatten) statt flacher Balken. */
.dss-mp__more {
margin-top: 26px !important; width: 100%; padding: 14px 16px !important; border: 2px solid var(--dss-orange) !important; background: #fff !important;
border-radius: 12px; font-weight: 800; font-size: 15px; color: var(--dss-orange-dark) !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 3px 12px rgba(219,109,11,.16);
}
.dss-mp__more:hover { background: var(--dss-orange) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(219,109,11,.30); }
.dss-mp__more .dss-ic--sm { color: currentColor; }
/* ---------- Farb-/Material-Picker ---------- */
.dss-mp__colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dss-mp__color {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px;
border: 1.5px solid var(--dss-line); background: #fff !important; border-radius: 999px; font-size: 13px; color: var(--dss-ink);
transition: border-color .15s, box-shadow .15s;
}
.dss-mp__color:hover { border-color: #cdbfad; }
.dss-mp__color.is-active { border-color: var(--dss-orange); box-shadow: 0 0 0 2px rgba(221,109,11,.15); }
.dss-mp__color.is-empty { opacity: .4; cursor: not-allowed; }
.dss-mp__colordot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto; }
/* Inline-Eigenschafts-Filter (FB08) — eigene Zeile unter den Farbchips */
.dss-mp__attrs { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.dss-mp__attrs:empty { display: none; }
/* P5 (Feedback 20.07.): Inline-Picker-Filter in einklappbaren Boxen (Komponente .dss-modal__filtergroup
liefert Summary+Chevron). Innerhalb der Box eigene Margins zurücksetzen; leere Eigenschaften-Box weg. */
.dss-mp__fgroup { margin: 0 0 10px; }
.dss-mp__fgroup > .dss-mp__colors { margin: 8px 0 0; }
.dss-mp__fgroup > .dss-mp__attrs { margin: 8px 0 0; }
.dss-mp__fgroup[data-attrgroup]:has(.dss-mp__attrs:empty) { display: none; }
.dss-mp__attr { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--dss-line) !important; border-radius: 999px; background: #fff !important; font-weight: 600; color: var(--dss-ink) !important; cursor: pointer; transition: border-color .15s, background .15s; }
.dss-mp__attr:hover { border-color: #cdbfad !important; }
.dss-mp__attr.is-active { border-color: var(--dss-orange) !important; background: var(--dss-bg-warm) !important; color: var(--dss-orange-dark) !important; }
.dss-mp__attr-ic { display: inline-flex; }
.dss-mp__attr-ic .dss-ic--xs { width: 15px; height: 15px; }
.dss-mp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; transition: opacity .2s; }
.dss-mp__grid.is-loading { opacity: .45; pointer-events: none; }
/* CLS-Fix 14.07.: noch nicht hydrierte (lazy) Stoff-Grids reservieren Höhe, damit der Schritt beim
Nachladen der Kacheln nicht aufspringt. */
.dss-mp[data-lazy] .dss-mp__grid, .dss-mp[data-lazy="1"] .dss-mp__grid { min-height: 300px; }
/* WICHTIG: BLOCK-Layout (kein Flex). Ein Flex-Column-Item in einem Grid-Track misst seine
Intrinsic-Höhe im Modal falsch (Zeile kollabiert auf 28px) → Karten überlappen. Block-Stapel
berichtet die Content-Höhe zuverlässig, egal ob im Panel-Grid oder im Modal-Grid. */
.dss-swatch {
display: block; min-height: 188px;
border: 1.5px solid var(--dss-line); background: #fff !important; border-radius: 12px; padding: 0; overflow: visible;
text-align: left; transition: border-color .15s, box-shadow .15s, transform .1s;
/* P10 (Feedback 20.07.): overflow:visible (statt hidden) lässt die Preiszeile bei Bedarf über
min-height:188px hinaus wachsen → nie mehr abgeschnitten (ersetzt die entfernte JS-scrollHeight-
Schleife, die synchrones Full-Layout ALLER Kacheln erzwang = Haupt-Ursache der „Browserüberlastung").
content-visibility bewusst NICHT gesetzt: es deprioritisiert `loading=lazy`-Kachelbilder (viele
naturalWidth=0 → beige statt Raumbild). Perf kommt aus Loop-Entfernung + Such-Debounce + decoding=async. */
}
/* Kein translateY-Lift mehr — der „Sprung" beim Hover irritiert bei Auswahlkarten. Nur Border+Schatten. */
.dss-swatch:hover { border-color: #cdbfad; box-shadow: var(--dss-shadow); }
.dss-swatch.is-selected { border-color: var(--dss-orange); box-shadow: 0 0 0 3px rgba(221,109,11,.18); }
.dss-swatch__imgwrap { position: relative; display: block; width: 100%; height: 104px; background: var(--dss-bg-warm); overflow: hidden; border-radius: 10.5px 10.5px 0 0; }
/* R8 (28.07., Feedback Silke): die v6-Raumfotos sind quadratisch (1254×1254) und tragen ihren
Störer/Label ("Halbtransparent" etc.) IMMER oben links eingebrannt ins Bild. Bei object-position
auf Default (= 50% 50%/center) schneidet object-fit:cover in diesem schmalen 104px-Fenster fast
die gesamte obere Bildhälfte weg (Kachelbreite > 104px → das Quadrat wird auf Breite skaliert und
oben+unten symmetrisch gekappt) → der Störer verschwindet bis auf einen 1-2px-Streifen, je breiter
die Kachel (Vorauswahl-Grid vs. „alle Stoffe"-Modal vs. mobil), desto vollständiger weg. Fix:
object-position:top verschiebt den Crop komplett auf die Unterseite (Sofa/Tisch im Raumfoto,
unkritisch) und zeigt den Störer + die obere Fensterkante auf JEDER Kachelbreite vollständig UND
einheitlich an (gilt gleich für SSR-Grid + „alle Stoffe"-Modal + PDP-Regression, eine Regel).
height:100% braucht !important: Elementor liefert global `.elementor img{height:auto;max-width:100%}`
(Spezifität 0,1,1) — schlägt unser einfaches `.dss-swatch__img` (0,1,0) NUR bei height, nicht bei
object-fit/-position/position (per CDP CSS.getMatchedStylesForNode verifiziert). Ohne !important
wird die Kachel dadurch quadratisch (Bildbreite×Bildbreite statt Bildbreite×104px) und ignoriert
den Crop-Rahmen komplett — object-position hätte dann gar keine Wirkung. */
.dss-swatch__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: top; }
.dss-swatch__img--empty { background: var(--dss-bg-warm); }
/* Lupe-Overlay: erscheint beim Hover oben rechts, öffnet Lightbox ohne den Stoff zu wählen */
/* Feedback 14.07.: Zoom-Lupe ZENTRIert auf der Kachel + auf Touch immer sichtbar (kein Hover → sonst
ist die Galerie mobil nicht erreichbar). Desktop: Hover blendet die zentrierte Lupe ein. */
.dss-swatch__zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.85); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--dss-ink); box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: 0; transition: opacity .15s, transform .15s; cursor: zoom-in; z-index: 2; }
.dss-swatch__zoom .dss-ic { width: 18px; height: 18px; }
.dss-swatch:hover .dss-swatch__zoom, .dss-swatch:focus-within .dss-swatch__zoom { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.dss-swatch__zoom:hover { background: #fff; color: var(--dss-orange); }
@media (hover: none) { .dss-swatch__zoom { opacity: .96; transform: translate(-50%,-50%) scale(1); } }
.dss-swatch__name { font-size: 12px; font-weight: 600; line-height: 1.25; padding: 7px 8px 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
/* Stoff-Eigenschafts-Icons (transparent/verdunkelnd/thermo/…) */
.dss-swatch__props { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 8px 2px; }
.dss-swatch__prop { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--dss-bg-warm); color: var(--dss-ink); }
.dss-swatch__prop .dss-ic--xs { width: 14px; height: 14px; }
.dss-mp__loading { grid-column: 1 / -1; color: var(--dss-ink-soft); font-size: 14px; padding: 20px 0; text-align: center; }
.dss-swatch__pg { font-size: 11px; color: var(--dss-ink-soft); padding: 2px 8px 8px; margin-top: auto; }
.dss-mp__empty { color: var(--dss-ink-soft); font-size: 14px; padding: 12px 0; grid-column: 1 / -1; }
/* ---------- Fortschritt ---------- */
.dss-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dss-progress__track { flex: 1; height: 6px; background: var(--dss-bg-warm); border-radius: 999px; overflow: hidden; }
.dss-progress__fill { display: block; height: 100%; width: 0; background: var(--dss-orange); border-radius: 999px; transition: width .35s ease; }
.dss-progress__label { font-size: 13px; font-weight: 700; color: var(--dss-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ---------- Maße ---------- */
.dss-area { display: flex; flex-direction: column; gap: 14px; }
.dss-area__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* P1 (29.07., Silke): Apto-Maß-Skizze (previewImage des aktiven MASSE-Elements) kompakt LINKS neben
den Maßfeldern. Nur wenn die Skizze wirklich existiert, wird .dss-area zur Zeile — ohne Skizze
bleibt das bisherige Spalten-Layout exakt erhalten (kein Regress, z.B. Dachfenster).
Der Messhinweis-TEXT bleibt per Z5 im Popup (.dss-area__messguide display:none) — hier steht
ausschließlich die Zeichnung. */
/* Breiten so gewählt, dass Skizze + Felder in der ~518px breiten Konfigurator-Spalte NEBENEINANDER
passen (190 + 18 + 240 = 448); in noch engeren Spalten bricht die Skizze automatisch nach oben um. */
.dss-area:has(.dss-area__sketch) { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.dss-area:has(.dss-area__sketch) > .dss-area__fields { flex: 1 1 240px; min-width: 0; }
/* „So messen Sie richtig"-Button in der Zeile auf eine eigene Zeile zwingen. */
.dss-area:has(.dss-area__sketch) > .dss-area__messbtn { flex: 0 0 100%; margin-top: 4px; }
.dss-area__sketch {
flex: 0 0 auto; width: 190px; max-width: 100%; margin: 0; cursor: zoom-in;
border: 1px solid var(--dss-line); border-radius: var(--dss-radius, 12px);
background: #fff; padding: 10px 10px 7px;
}
.dss-area__sketchimg { display: block; width: 100%; height: auto; border-radius: 6px; }
/* Bewusst OHNE text-transform:uppercase: „Maße" würde im Browser-Uppercase zu „MASSE" — genau die
Schreibweise, die im Kundentext ausdrücklich nicht auftauchen soll (#91 / LABEL_MAP). */
.dss-area__sketchcap { margin: 7px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--dss-ink-soft, #6f6a63); text-align: center; }
@media (max-width: 760px) {
/* Mobil: Skizze über den Feldern in voller Breite (Zeichnungen sind beschriftet und brauchen Platz). */
.dss-area__sketch { width: 100%; flex: 0 0 100%; }
}
.dss-area__guide { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--dss-orange) !important; font-weight: 700; font-size: 13.5px; padding: 8px 12px; border: 1.5px solid var(--dss-line); border-radius: 9px; background: var(--dss-bg) !important; }
.dss-area__guide:hover { border-color: var(--dss-orange); background: var(--dss-bg-warm) !important; }
.dss-area__guide .dss-ic--sm { color: var(--dss-orange); }
/* ---------- Bild-Zoom (Lightbox) ---------- */
.dss-konfig__main { cursor: zoom-in; }
.dss-lightbox { position: fixed; inset: 0; background: rgba(20,14,6,.9); z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.dss-lightbox__fig { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 95%; max-height: 95%; margin: 0; }
.dss-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
.dss-lightbox figcaption { color: #fff; font-size: 15px; font-weight: 600; text-align: center; }
.dss-lightbox__props { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; }
.dss-lightbox__prop { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; font-size: 12.5px; font-weight: 600; }
.dss-lightbox__close { position: absolute; top: -14px; right: -14px; width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; border: 0 !important; background: #fff !important; color: var(--dss-ink) !important; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35) !important; transition: background .15s, color .15s; }
.dss-lightbox__close:hover { background: var(--dss-orange) !important; color: #fff !important; }
.dss-area__field { display: flex; flex-direction: column; gap: 6px; }
.dss-area__label { font-size: 14px; font-weight: 600; }
.dss-area__inputwrap { display: flex; align-items: center; border: 1.5px solid var(--dss-line); border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.dss-area__inputwrap:focus-within { border-color: var(--dss-orange); box-shadow: 0 0 0 3px rgba(221,109,11,.15); }
/* FB09: EIN flaches Feld — Theme-Input-Styling (eigener Rahmen/Hintergrund/Padding → „Box in Box")
hart neutralisieren, damit nur der äußere .dss-area__inputwrap-Rahmen bleibt. */
.dss-konfig .dss-area__input, .dss-konfig .dss-float__input {
-webkit-appearance: none !important; appearance: none !important;
border: 0 !important; outline: 0 !important; box-shadow: none !important;
background: transparent !important; margin: 0 !important; border-radius: 0 !important;
padding: 13px 12px !important; height: auto !important; min-height: 0 !important; line-height: 1.2 !important;
font-size: 16px; width: 100%; color: var(--dss-ink);
}
/* Ungültiges Maß: laute rote Umrandung + Text, damit der Fehler nicht übersehen wird. */
.dss-area__inputwrap:has(.dss-area__input.is-invalid) { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.16); }
.dss-area__input.is-invalid { color: #c0392b; font-weight: 700; }
.dss-area__err { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: #c0392b; }
.dss-area__err[hidden] { display: none; }
.dss-area__suffix { padding: 0 12px; color: var(--dss-ink-soft); font-size: 14px; }
.dss-area__hint { font-size: 12px; color: var(--dss-ink-soft); }
/* R13 (28.07., Feedback Silke): unklar ob Komma oder Punkt für Dezimalmaße gilt → dezentes
Komma-Beispiel unter dem min/max-Hinweis, gleiche Optik wie .dss-area__hint (klein, grau),
fällt nicht zusätzlich auf. Generisch auf allen Produkten (PHP berechnet den Beispielwert je
Feld aus dessen echtem min/max). */
.dss-area__example { display: block; margin-top: 2px; font-size: 12px; color: var(--dss-ink-soft); }
/* L8 (14.07.): Live mm-Umrechnung unter dem cm-Feld, dezent. */
.dss-area__mm { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--dss-amber, #db6d0b); letter-spacing: -.01em; }
.dss-area__mm[hidden] { display: none; }
/* KF3 (16.07.): Messanleitung INLINE auf dem Maße-Schritt — ersetzt den alten Modal-Button
(.dss-area__guide, oben, bleibt additiv/ungenutzt stehen). Default = generisches Diagramm+Text
nebeneinander; sobald konfigurator.js (updateMessGuide()) das echte, montagespezifische
Apto-HTML einsetzt (.has-montage), wird der Body zur Fließtext-Struktur (Breite/Höhe/Wichtige
Hinweise + Diagramm-Bild) — dieselbe Rich-Text-Formatierung wie im (ex-)Messhinweise-Popup
(.dss-infopop__mess), hier nur inline statt im Modal.
R12a (28.07.): Block steht jetzt (PHP-Reihenfolge in render_area()) VOR .dss-area__fields statt
danach — "wie messe ich" gehört inhaltlich vor die Eingabe. Diagramm-Zielgröße ~300px (statt
220px) auf Desktop, s. .dss-area__messdiagram/-img unten; mobil weiterhin volle Breite. */
.dss-area__messguide {
border: 1px solid var(--dss-line); border-radius: var(--dss-radius, 12px);
background: var(--dss-bg-warm); padding: 18px 20px;
/* Z5 (29.07., Chris): Messhinweise NUR im „So messen Sie richtig"-Popup — der Inline-Block
(R12a) war zu dominant. Bleibt im DOM als Klon-Quelle fürs Popup (konfigurator.js liest
weiterhin diesen Body), wird aber nicht mehr auf der Seite gerendert. */
display: none !important;
}
.dss-area__messtitle { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--dss-ink); }
.dss-area__messtitle .dss-ic { color: var(--dss-orange); flex: 0 0 auto; }
.dss-area__messbody { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.dss-area__messguide.has-montage .dss-area__messbody { display: block; }
.dss-area__messdiagram { flex: 0 0 auto; width: 100%; max-width: 300px; color: var(--dss-orange-dark, #b8570a); }
.dss-area__messdiagram svg { display: block; width: 100%; height: auto; }
.dss-area__messimg { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 10px; border: 1px solid var(--dss-line); background: #fff; }
.dss-area__messtext { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--dss-ink-soft); }
/* Apto-Rich-HTML (nach dem Montage-Swap): identische Formatierung wie .dss-infopop__mess. */
.dss-area__messbody p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--dss-ink-soft); }
.dss-area__messbody p:last-child { margin-bottom: 0; }
.dss-area__messbody strong, .dss-area__messbody b { color: var(--dss-ink); font-weight: 800; }
.dss-area__messbody h3, .dss-area__messbody h4 { margin: 14px 0 6px; font-size: 14.5px; font-weight: 800; color: var(--dss-ink); }
.dss-area__messbody h3:first-child, .dss-area__messbody h4:first-child { margin-top: 0; }
.dss-area__messbody ul, .dss-area__messbody ol { margin: 0 0 10px; padding-left: 20px; }
.dss-area__messbody li { margin: 0 0 4px; font-size: 14px; color: var(--dss-ink-soft); }
.dss-area__messbody img { display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 10px; border: 1px solid var(--dss-line); background: #fff; }
@media (max-width: 620px) {
.dss-area__messbody { flex-direction: column; }
.dss-area__messdiagram, .dss-area__messimg { max-width: 100%; }
}
/* ---------- Dachfenster (RoofWindow) ---------- */
.dss-roof { display: flex; flex-direction: column; gap: 14px; }
.dss-roof__hint { font-size: 14px; color: var(--dss-ink-soft); margin: 0; }
.dss-roof__field { display: flex; flex-direction: column; gap: 6px; }
.dss-roof__label { font-size: 14px; font-weight: 600; }
.dss-roof__select {
padding: 12px 12px; border: 1.5px solid var(--dss-line); border-radius: 10px;
background: #fff; font-size: 15px; color: var(--dss-ink); width: 100%;
}
.dss-roof__select:focus { outline: 0; border-color: var(--dss-orange); box-shadow: 0 0 0 3px rgba(221,109,11,.15); }
.dss-roof__select:disabled { background: var(--dss-bg-warm); color: var(--dss-ink-soft); }
.dss-roof__dims { display: flex; gap: 18px; padding: 12px 14px; background: var(--dss-bg); border-radius: 10px; font-size: 14px; }
.dss-roof__dim b { font-variant-numeric: tabular-nums; }
/* Info-Text (custom-text) */
.dss-info { font-size: 14px; color: var(--dss-ink-soft); line-height: 1.5; background: var(--dss-bg); border-radius: 10px; padding: 12px 14px; }
/* Flash */
.dss-flash { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--dss-ink); color: #fff; padding: 13px 20px; border-radius: 10px; font-weight: 600; box-shadow: var(--dss-shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100; }
.dss-flash.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dss-flash.is-error { background: #c0392b; }
.dss-ic { display: inline-block; vertical-align: middle; width: 22px; height: 22px; }
/* ---------- Hover-Tooltip (FB07) — am , kein Clipping ---------- */
.dss-tip {
position: absolute; z-index: 10060; max-width: 240px;
background: #211c15; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 12.5px; font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; white-space: normal;
opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.dss-tip.is-visible { opacity: 1; transform: none; }
.dss-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #211c15; }
.dss-tip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #211c15; }
/* Eigenschafts-Icon fokussierbar für Tastatur-Tooltip */
.dss-swatch__prop { cursor: help; }
.dss-swatch__prop:focus-visible { outline: 2px solid var(--dss-orange); outline-offset: 1px; }
/* ---------- Options-Vorschaubild zoombar (FB04) ---------- */
.dss-option__img { position: relative; }
.dss-option__img--zoom { cursor: zoom-in; }
.dss-option__zoomic {
position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%;
background: var(--dss-ink); color: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,.28); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; pointer-events: none;
}
.dss-option__zoomic .dss-ic { width: 12px; height: 12px; }
.dss-option-wrap:hover .dss-option__zoomic, .dss-option__img--zoom:focus-visible .dss-option__zoomic { opacity: 1; transform: scale(1); }
/* P1 (Feedback 20.07.): Touch-Geräte haben keinen Hover → Lupe auf den Options-/Modell-Karten
dauerhaft sichtbar (analog .dss-swatch__zoom Z.644 + .dss-pdp-tile__zoom pdp.css). Fixt zugleich
P2/P9: mit sichtbarer Lupe tippt der Nutzer bewusst das Zoom-Element (öffnet Lupe OHNE Scroll)
statt versehentlich die Karte zu treffen (=Auswahl→Scroll zum Weiter-Button). */
@media (hover: none), (pointer: coarse) {
.dss-option__zoomic { opacity: 1; transform: scale(1); }
}
/* Weggeregelte Widgets (Picker/Maße/Dachfenster) komplett ausblenden */
.dss-hide { display: none !important; }
/* Trennlinie zwischen mehreren sichtbaren Pickern in einer Sektion */
.dss-mp + .dss-mp:not(.dss-hide) { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dss-line); }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
/* minmax(0,1fr) statt 1fr: „1fr" = minmax(auto,1fr), dessen auto-Min = min-content → die Spalte kann
NICHT unter ihre Content-Breite schrumpfen und läuft mobil aus dem Viewport (z.B. Dachfenster-
Konfigurator, .dss-konfig__visual 518px auf 390px). minmax(0,…) + min-width:0 erlauben das Schrumpfen. */
.dss-konfig { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 100%; }
.dss-konfig__visual, .dss-konfig__panel { min-width: 0; max-width: 100%; }
.dss-konfig__stage, .dss-konfig__main { max-width: 100%; }
/* MOBIL-REIHENFOLGE-FIX: Nutzer sah oben „IHRE KONFIGURATION" (Zusammenfassung), darunter erst den
eigentlichen Konfigurator/die Schritte — weil .dss-konfig__visual (Galerie+Preisbox+Zusammenfassung
als EIN Flex-Block) komplett vor .dss-konfig__panel (Schritte) stand. display:contents löst den
Visual-Wrapper optisch auf, sodass seine Kinder (Galerie/Preisbox/Zusammenfassung) wie direkte
Kinder des Grid-Containers behandelt werden und EINZELN per „order" einsortiert werden können:
Galerie zuerst (Produktbild), dann die Schritte, Zusammenfassung erst danach. Preisbox bleibt
unten fixiert (position:fixed, s.u.) — ihre Reihenfolge ist dadurch irrelevant. */
.dss-konfig__visual { display: contents; }
.dss-konfig__gallery, .dss-konfig__summary { min-width: 0; max-width: 100%; }
.dss-konfig__gallery { order: 1; }
.dss-konfig__panel { order: 2; padding-bottom: 128px; border-left: 0; padding-left: 0; }
/* Zusammenfassung ist jetzt ggf. das letzte sichtbare Element vor der fixen Preisleiste →
eigene Bodenfreiheit (statt sich nur auf das Panel davor zu verlassen). */
.dss-konfig__summary { order: 3; padding-bottom: 128px; }
/* FB (Preview-Crop): mobil ebenfalls quadratisch (Quell-Bilder sind 1/1) → volle Breite, keine
Fensteroberkante-Beschneidung; contain zeigt Nicht-Quadrat-Bilder vollständig (Letterbox). */
.dss-konfig__stage { aspect-ratio: 1 / 1; }
/* Preisbox als KOMPAKTE sticky Bottom-Leiste: nur Preis + Warenkorb (kein Überlappen mehr). */
/* Feedback 14.07.: kompakte Bodenleiste. WICHTIG: wpautop wickelt Notiz + Kauf-Button in ein
klassenloses — DAS ist die rechte Spalte (beide Buttons gestapelt). Wird es nicht platziert,
bläht das
Zeile 1 auf → Box ~50px zu hoch. LINKS: Preis (etwas hoch) + Wunschliste darunter.
RECHTS: Notiz + Kauf-Button mit symmetrischem Abstand oben/unten. Buttons ~10px flacher. */
.dss-konfig__pricebox {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(40,28,12,.16);
padding: 11px 15px calc(11px + env(safe-area-inset-bottom));
display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
align-items: center; gap: 2px 14px;
}
.dss-konfig__pricebox .dss-konfig__trust,
.dss-konfig__pricebox .dss-konfig__pricehint,
.dss-konfig__pricebox #dss-sample { display: none; } /* Trust/Muster raus aus der schmalen Bar (P0-06) */
/* Der wpautop-
-Wrapper (Notiz + Kauf-Button) = rechte Spalte, beide Zeilen, Buttons gestapelt. */
.dss-konfig__pricebox > p:not(.dss-konfig__pricehint) {
grid-column: 2; grid-row: 1; align-self: start; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.dss-konfig__pricebox .dss-konfig__priceline { grid-column: 1; grid-row: 1; align-self: end; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
.dss-konfig__pricebox .dss-wl-addrow { grid-column: 1; grid-row: 2; align-self: start; margin: 3px 0 0 !important; justify-content: flex-start !important; }
.dss-konfig__pricebox .dss-note__toggle { padding: 7px 12px !important; font-size: 12.5px; width: 100%; }
.dss-konfig__pricebox #dss-addbtn { padding: 9px 16px !important; min-height: 0 !important; margin: 0; }
.dss-konfig__price { font-size: 23px; }
/* P0-06: Fehler-Toast über die fixe Bottom-Bar heben (sonst überlappt er Preis/Warenkorb). */
.dss-flash { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30; }
}
@media (max-width: 520px) {
.dss-mp__grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.dss-area__fields { grid-template-columns: 1fr; }
.dss-panel__body:has(.dss-option-wrap) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.dss-panel, .dss-flash, .dss-konfig__main { animation: none; transition: none; }
}
/* Fallback-Warenkorb für Apto-Produkte ohne ladbare Konfiguration (z.B. Vorhänge) — kaufbar halten.
Liegt AUSSERHALB .dss-konfig → eigene Farbtokens nötig. */
.dss-simplecart { --dss-orange: #DD6D0B; --dss-orange-dark: #b8570a; --dss-ink: #211c15; --dss-ink-soft: #6b6157; --dss-line: #e7ded3; --dss-bg: #fbf6f0; --dss-bg-warm: #f4ece1; --dss-shadow: 0 2px 10px rgba(40,28,12,.06);
max-width: 520px; margin: 20px 0; padding: 20px 22px; border: 1.5px solid var(--dss-line); border-radius: 16px; background: var(--dss-bg); box-shadow: var(--dss-shadow); }
.dss-simplecart__main { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dss-simplecart__price { font-size: 26px; font-weight: 800; color: var(--dss-ink); }
.dss-simplecart__price del { color: var(--dss-ink-soft); font-weight: 500; font-size: 18px; margin-right: 6px; }
.dss-simplecart__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--dss-orange) !important; color: #fff !important; font-size: 16px; font-weight: 700; padding: 13px 22px; border-radius: 11px; text-decoration: none; transition: background .15s; }
.dss-simplecart__btn:hover { background: var(--dss-orange-dark) !important; color: #fff !important; }
.dss-simplecart__btn .dss-ic { width: 20px; height: 20px; }
.dss-simplecart__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--dss-line); }
.dss-simplecart__trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--dss-ink-soft); }
.dss-simplecart__trust .dss-ic { color: var(--dss-orange); }
/* =========================================================================
HERO-BAND — kompakte, hochwertige Startsection über dem Konfigurator.
Einheitlich auf allen Produktseiten. Liegt AUSSERHALB .dss-konfig → eigene Tokens.
========================================================================= */
.dss-hero { --dss-orange: #DD6D0B; --dss-orange-dark: #b8570a; --dss-ink: #211c15; --dss-ink-soft: #6b6157;
--dss-line: #e7ded3; --dss-bg: #fbf6f0; --dss-bg-warm: #f4ece1;
max-width: 1280px; margin: 14px auto 0; padding: 0 clamp(16px, 3vw, 40px);
font-family: inherit; color: var(--dss-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.dss-hero *, .dss-hero *::before, .dss-hero *::after { box-sizing: border-box; }
.dss-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(20px, 3vw, 40px);
align-items: center; background: linear-gradient(135deg, #fff, var(--dss-bg));
border: 1px solid var(--dss-line); border-radius: 20px; padding: clamp(18px, 2.4vw, 30px);
box-shadow: 0 2px 10px rgba(40, 28, 12, .05); }
.dss-hero__body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dss-hero__lead { margin: 0; font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.42; font-weight: 600;
color: var(--dss-ink); letter-spacing: -.01em; }
.dss-hero__cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dss-hero__price { font-size: clamp(1.4rem, 2.1vw, 1.85rem); font-weight: 800; color: var(--dss-ink);
letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 6px; }
.dss-hero__pricefrom { font-size: .6em; font-weight: 600; color: var(--dss-ink-soft); }
.dss-hero__price--inquiry { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; color: var(--dss-ink-soft); }
.dss-hero__cta { display: inline-flex; align-items: center; gap: 9px; background: var(--dss-orange) !important;
color: #fff !important; font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 11px;
text-decoration: none; line-height: 1; min-height: 44px; transition: background .15s, transform .15s; }
.dss-hero__cta:hover { background: var(--dss-orange-dark) !important; color: #fff !important; transform: translateY(-1px); }
.dss-hero__cta .dss-ic { width: 19px; height: 19px; }
.dss-hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; }
.dss-hero__pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--dss-line);
border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--dss-ink); }
.dss-hero__pill .dss-ic { width: 16px; height: 16px; color: var(--dss-orange); flex: none; }
.dss-hero__asks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 2px; }
.dss-hero__ask { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
color: var(--dss-ink-soft) !important; text-decoration: none; border-bottom: 1px dashed var(--dss-line);
padding-bottom: 1px; transition: color .15s, border-color .15s; }
.dss-hero__ask:hover { color: var(--dss-orange-dark) !important; border-color: var(--dss-orange); }
.dss-hero__ask .dss-ic { width: 15px; height: 15px; color: var(--dss-orange); flex: none; }
.dss-hero__media { position: relative; min-width: 0; }
/* CLS-Fix 14.07.: feste aspect-ratio reserviert die Bildhöhe VOR dem Laden → kein Springen mehr,
wenn das Hero-Bild (LCP) ankommt. object-fit:cover füllt, max-height kappt. */
.dss-hero__img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: 280px; object-fit: cover;
border-radius: 16px; border: 1px solid var(--dss-line); background: var(--dss-bg-warm); }
.dss-hero__badge { position: absolute; left: 12px; bottom: 12px; background: var(--dss-ink); color: #fff;
font-weight: 800; font-size: 1rem; padding: 8px 14px; border-radius: 999px;
box-shadow: 0 6px 18px rgba(40, 28, 12, .28); letter-spacing: -.01em; }
.dss-hero__badgefrom { font-weight: 600; opacity: .8; font-size: .72em; margin-right: 3px; }
@media (max-width: 900px) {
.dss-hero { margin-top: 6px; }
.dss-hero__grid { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
.dss-hero__media { order: -1; } /* Mobil: Bild zuerst (H1 → Bild → Nutzen → Trust) */
.dss-hero__img { max-height: 230px; }
}
@media (max-width: 520px) {
.dss-hero__cta-row { gap: 12px; }
.dss-hero__cta { flex: 1 1 auto; justify-content: center; }
.dss-hero__asks { gap: 4px 18px; }
.dss-hero__ask { min-height: 40px; } /* Touch-Target ≥ 40px */
}
@media (prefers-reduced-motion: reduce) {
.dss-hero__cta { transition: none; }
}
/* Feedback 14.07.: Orange-Blink um die Auswahl-Region, wenn der Kunde weiter will, aber noch wählen muss. */
@keyframes dssAttn {
0% { box-shadow: 0 0 0 0 rgba(219,109,11,0); }
18% { box-shadow: 0 0 0 4px rgba(219,109,11,.60); }
42% { box-shadow: 0 0 0 4px rgba(219,109,11,0); }
64% { box-shadow: 0 0 0 4px rgba(219,109,11,.60); }
100% { box-shadow: 0 0 0 4px rgba(219,109,11,0); }
}
.dss-panel__body.dss-attn { animation: dssAttn 1.4s ease; border-radius: 12px; }
/* Feedback 14.07.: Filter im Stoff-Popup als einklappbare Gruppen (Farbe zuerst offen, „Eigenschaften
Filter" darunter zu) — spart Platz, besonders mobil. */
details.dss-modal__filtergroup { margin: 0 0 4px; }
details.dss-modal__filtergroup > summary.dss-modal__filterlabel {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
padding: 8px 0; margin: 0; user-select: none;
}
details.dss-modal__filtergroup > summary.dss-modal__filterlabel::-webkit-details-marker { display: none; }
details.dss-modal__filtergroup > summary.dss-modal__filterlabel::after {
content: ''; width: 9px; height: 9px; border-right: 2px solid var(--dss-ink-soft); border-bottom: 2px solid var(--dss-ink-soft);
transform: rotate(45deg); transition: transform .2s; margin-left: 8px; flex: none; margin-bottom: 3px;
}
details.dss-modal__filtergroup[open] > summary.dss-modal__filterlabel::after { transform: rotate(-135deg); margin-bottom: -3px; }
details.dss-modal__filtergroup > .dss-modal__attrs,
details.dss-modal__filtergroup > .dss-modal__colors { margin-top: 6px; }
/* Feedback 14.07.: Bullet-Inhalte im „mehr erfahren"-Popup als saubere Liste (Lamellenvorhang & alle).
R26+R29 (29.07., Silke): auch hier KEIN ✓ mehr — das Popup zeigt dieselbe Options-BESCHREIBUNG
wie die Karte (data-text), also muss die Bullet-Optik identisch dezent sein. */
.dss-infopop__usps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dss-infopop__usps li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.4; color: var(--dss-ink); }
.dss-infopop__usps li::before { content: "•"; position: absolute; left: 2px; top: 0; color: var(--dss-ink-soft, #6f6a63); font-weight: 700; font-size: 15px; }
/* =========================================================================
FB (Preview-Crop) — AUTORITATIVE Übersteuerung. Grund: dss-konfig-refine.php
erzwingt für „-room"-Bilder (die quadratischen v6-Raum-/Composite-Bilder)
`object-fit:cover; object-position:50% 27%` !important (Spezifität 0,3,1) und
schneidet damit die Fensteroberkante ab. Hier mit +#id höherer Spezifität (1,3,1)
+ !important + spätere Quell-Position übersteuert: quadratische Bühne, das Bild
füllt sie via `contain` VOLLSTÄNDIG (Quadrat in Quadrat = randlos, kein Crop).
Nicht-quadratische Karussell-Detailbilder werden vollständig gezeigt (Letterbox
in bg-warm) statt beschnitten. Additiv/reversibel (nur dieser Block).
========================================================================= */
body.single-product #dss-konfig .dss-konfig__stage {
aspect-ratio: 1 / 1 !important; max-height: min(72vh, 620px) !important;
}
body.single-product #dss-konfig .dss-konfig__main,
body.single-product #dss-konfig .dss-konfig__main[src*="-room"] {
width: 100% !important; height: 100% !important; max-height: none !important;
aspect-ratio: auto !important; object-fit: contain !important; object-position: 50% 50% !important;
}
/* FB (Z-Index) — die Info-/Mess-Popups und Modals müssen IMMER über der fixen Desktop-Preis-/
Aktionsleiste liegen (mu-plugins/dss-konfig-deskbar.php: #dss-cart.dss-konfig__pricebox,
position:fixed; z-index:30). Sie liegen bereits darüber (10000+ > 30) — hier defensiv höher
festgeschrieben, damit ein künftiges Höherstufen der Bar sie nicht verdecken kann. */
.dss-infopop { z-index: 10040; }
.dss-modal { z-index: 10042; }
/* Z4 (29.07., Chris): „Farbe der Montageteile"-Chipzeile in den Options-Karten optisch fassen —
eigene Zeile mit Trennlinie zum Kartentext, Label gedämpft, Chips einheitlich gerundet mit
Abstand zur mehr-erfahren/Auswählen-Buttonzeile. Die Grundfarben der Chips kommen weiterhin
inline aus SSR/applyServerState (Selected-Zustand) — hier nur Layout/Spacing. */
/* R24 (29.07., Silke): Die Chip-Zeile ist ein GESCHWISTER von .dss-option (nicht dessen Kind) und
hatte daher KEINE horizontale Einrückung — sie begann an der Kartenkante, also 14px weiter links
als Titel/Beschreibung/Bullets (per Playwright gemessen: wrap 751px, Titel 766px, Chips 752px).
Dieselben 14px wie .dss-option (padding: 12px 14px) → linke Kante = Titel/Bullets. Die dashed
Trennlinie läuft dafür bewusst über die volle Kartenbreite (eigene Zeile, siehe Z4). */
.dss-option__boxes {
margin: 12px 0 10px !important;
padding: 12px 14px 0 !important;
border-top: 1px dashed var(--dss-line, #d9d9d9);
row-gap: 8px !important;
}
.dss-option__boxes .dss-option__boxes-label {
flex: 0 0 100%;
font-size: 12px !important;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--dss-ink-soft, #6f6a63) !important;
opacity: 1 !important;
}
.dss-option__boxes .dss-boxitem {
padding: 6px 14px !important;
border-radius: 999px !important;
font-size: 13px !important;
line-height: 1 !important;
}