/* ========================================================================= 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). */ /* R42 (03.08., Silke: „Bilder/Kacheln versetzt"): min-height 188 → 214. Grund: mu-plugins/ dss-konfigurator.php erzwingt `body.single-product .dss-mp .dss-swatch,.dss-modal .dss-swatch {height:100% !important}` — die Kachel bekommt damit eine DEFINITE Höhe aus der Grid-Zeile, und die Grid-Zeile fiel im „alle Stoffe"-Modal auf genau diese min-height zurück (gemessen: alle 179 Kacheln offsetHeight=188 bei scrollHeight bis 237). Ergebnis: Inhalt lief unten aus der Kachel heraus (Preiszeile 13–50px außerhalb, 5. Eigenschafts-Icon in der Nachbarzeile) → optisch „versetzte" Kacheln. 214px = Bild 118 + Name 39 + Icon-Zeile 27 + Preiszeile 23 + Rahmen 3 (+ Reserve) → Inhalt passt vollständig, alle Kacheln exakt gleich hoch. */ .dss-mp .dss-swatch, .dss-modal .dss-swatch { border: 1.5px solid var(--dss-line); min-height: 214px; } .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 */ /* R-JS / J13 (07.08., Philipp: „Im Grunde dauert es überall ein wenig zu lange, bis etwas ausgewählt wird inkl. der Weiterleitung zu ‚weiter'. Das sollte man noch verkürzen."): Die Einblende-Animation lief bei JEDEM Schrittwechsel 250 ms, bevor der neue Schritt voll sichtbar war — spürbare Verzögerung ohne Informationswert. 130 ms bleibt als Orientierungshilfe erkennbar (der Schritt „kommt herein"), halbiert aber die Wartezeit. Reduced-Motion schaltet sie weiterhin ganz ab (s. @media unten). */ .dss-panel { animation: dssfade .13s 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; /* R-JS / J13: Auswahl-Rahmen schneller sichtbar (.15s → .09s). Rein visuelle Dauer — die Markierung selbst setzt selectOption() unverändert synchron beim Klick. */ transition: border-color .09s, box-shadow .09s; } .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; } /* R43 (04.08., Philipp): Bildbox von 158px auf 200px. Grund: R43 stellt object-fit:contain tatsaechlich her (vorher gewann ein Inline-Style mit cover, s. u.) — mit contain in einer 158px-Box wuerden quadratische/hohe Motive (Profilfarbe 612x612, Kindersicherheit 299x536) auf 150px Kantenlaenge schrumpfen und die eingebrannten Beschriftungen erst recht unlesbar. 200px sorgt dafuer, dass alle liegenden Motive (AR >= 1.25, die Mehrheit: Montageart 1600x1138, Modelle 750x553 …) die Kachelbreite VOLL ausnutzen und trotzdem vollstaendig sichtbar sind. Hoehe bleibt FIX (nicht aspect-ratio), damit Silkes R42-Wunsch „alle Bilder an der gleichen Stelle" gilt. */ .dss-option__head:has(.dss-option__img--zoom) > .dss-option__img--zoom { width: 100%; height: 200px; 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. R43 (04.08., Philipp): dieser contain-Fix war seit dem 27.07. WIRKUNGSLOS. render_option() (class-dss-konfig-product-page.php) schreibt `style="…object-fit:cover…"` als INLINE-Style aufs — Inline gewinnt gegen jede Stylesheet-Regel ohne !important. Messung (Playwright, getComputedStyle) auf allen Konfiguratoren: object-fit war ueberall `cover`, mit 5–66 % weg- geschnittener Bildflaeche (schlimmste Faelle: SunDeal Kassettenrollo 25 751x1000 = 54 %, Kindersicherheit EN 13120 299x536 = 66 %, Alu-Lamelle 816x208 = 59 %). Deshalb hier `!important`: damit greift contain auch dann, wenn irgendwo noch HTML mit dem alten Inline-cover ausgeliefert wird (Seiten-Cache). Der Inline-Style selbst ist zusaetzlich auf contain umgestellt. */ .dss-option__head:has(.dss-option__img--zoom) > .dss-option__img--zoom img, img.dss-option__imgtag { width: 100%; height: 100%; object-fit: contain !important; object-position: 50% 50% !important; display: block; border-radius: 10px; padding: 3px; 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; /* R-JS / J13: Häkchen erscheint schneller (.15s → .09s). */ opacity: 0; transition: opacity .09s, background .09s; 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); } /* J9 (04.08., Philipp): Popup-Bild war mit object-fit:cover oben/unten beschnitten (Hochformat- Piktogramme wie Kindersicherheit EN 13120 299x536 → nur ~50 % sichtbar; gemessen 0.48–0.56). contain + moderate max-Höhe + Zentrierung: Bild IMMER komplett sichtbar, Querformat unverändert randfüllend. !important als Cache-Sicherung (gleiche Lehre wie R43 bei den Options-Karten: der JS-Builder setzt denselben Fix zusätzlich inline). */ .dss-infopop__media img { display: block; width: 100%; max-height: 300px; object-fit: contain !important; object-position: center; } .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; } /* R38 (03.08., Silke: „die wichtigsten, wie die Filter für die Transparenz, mit zu den Farben packen"): Transparenzgrad-Chips als IMMER SICHTBARE Zeile direkt unter der Farb-Chip-Reihe. Kein eigener Filter-State — es sind dieselben .dss-mp__attr-Buttons, nur in einem anderen Container (die restlichen Gruppen bleiben im aufklappbaren „Eigenschaften Filter"). Optisch an die Farbzeile gezogen: kein Chevron, gleiches Label-Format, enger Abstand nach oben. */ .dss-mp__fgroup--transp { margin: -4px 0 12px; } .dss-mp__fgroup--transp > .dss-modal__filterlabel { padding: 0 0 2px; display: block; } .dss-mp__fgroup--transp > .dss-mp__transp { margin: 0; flex-wrap: wrap; } .dss-mp__fgroup--transp:has(.dss-mp__transp: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: 214px; /* R42: siehe Kommentar an .dss-mp .dss-swatch (Zeile ~86) */ border: 1.5px solid var(--dss-line); background: #fff !important; border-radius: 12px; padding: 0; overflow: visible; /* R-JS / J13: Stoff-Kachel-Auswahl schneller sichtbar (.15s → .09s). */ text-align: left; transition: border-color .09s, box-shadow .09s, 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); } } /* R42: min-height 2.4em → 2.5em = GENAU zwei Zeilen (line-height 1.25 × 2). Vorher war ein einzeiliger Stoffname 28,8px hoch, ein zweizeiliger 30px → 1,2px Inhaltsdifferenz. Ein