/* Weser Theme – Block: Static Product Selector */
/* Farbwelt: Der Selektor läuft seit 1.33.0 über --color-accent, --color-cta und
   --color-cta-text. Auf den DE-RYCK-Seiten sind Aktivmarker, „Muster bestellen“
   und die Infomaterial-Pillen dadurch rot statt grün/blau. */
/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */
.block-static-product-selector {
    background-color: var(--color-white);
    overflow: hidden;
}

/* Größe aus H2 (typography.css) */
.product-selector-headline {
    margin-bottom: var(--space-lg);
}

/* Figma Desktop: „Entdecke unser Sortiment." 42px statt der globalen 40px */
@media (min-width: 1200px) {
    .product-selector-headline {
        font-size: 42px;
    }
}

/* ── Verlegeart (2.21.0, nur mit zweitem Sortiment) ─────────────────
   Figma 19.10. (User): Überschrift → Knöpfe 20, Knöpfe → Selektor 32,
   Knopf 10/16, Radius 8, Rand 1px, Abstand 10, Poppins 600 15 / 21,
   Symbol 14 × 14. Aktiv grün mit blauer Schrift, inaktiv blau mit grüner
   – wie die Knöpfe in den Kacheln des Verlegeart-Blocks. Rand transparent
   (Kunde 29.10.: keine Kontur auf Weiß, auch nicht beim Hover). */
.has-verlegeart .product-selector-headline {
    margin-bottom: 20px;
}

.ps-verlegeart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.ps-verlegeart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--color-dark);
    color: var(--color-green);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-semibold);
    line-height: 21px;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.ps-verlegeart-btn.is-active {
    background-color: var(--color-green);
    color: var(--color-dark);
}

/* Hover invertiert wie alle Knöpfe der Seite (buttons.css). Am aktiven
   Knopf nicht – er ist schon gewählt, ein Farbtausch sähe aus wie „aus“. */
.ps-verlegeart-btn:not(.is-active):hover,
.ps-verlegeart-btn:not(.is-active):focus-visible {
    background-color: var(--color-green);
    color: var(--color-dark);
}

.ps-verlegeart-btn:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

.ps-verlegeart-symbol {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* Tablet und Mobil (Figma 28.10., Werte vom User): beide Knöpfe teilen
   sich die Zeile, Inhalt mittig; mobil bricht der Text zweizeilig um.
   Knopf 8/16, min. 48 hoch, Poppins 600 16 / 100 %. Abstand der Knöpfe
   aus den Exporten gemessen: Tablet 8, Mobil 14. Überschrift auf Tablet
   wie „Welche Verlegeart …“ 25 / 35 (nur mit Verlegeart, im Export beide
   gleich groß). Mobil zweizeilig mit Zeilenhöhe 20 statt 100 %, sonst
   stehen die Zeilen zu eng (Chris 28.10.). */
@media (max-width: 1199.98px) {
    .ps-verlegeart {
        flex-wrap: nowrap;
        gap: 14px;
    }

    .ps-verlegeart-btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 48px;
        padding: 8px 16px;
        font-size: 16px;
        line-height: 1;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .ps-verlegeart-btn {
        line-height: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ps-verlegeart {
        gap: 8px;
    }

    .has-verlegeart .product-selector-headline {
        font-size: 25px;
        font-weight: var(--fw-semibold);
        line-height: 35px;
    }
}

/* Layout */
.ps-layout {
    align-items: stretch;
}

/* Left nav column */
.ps-nav-col {
    background-color: var(--color-light);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    /* Polsterung aus dem Figma-Desktop-Frame (User 2026-09-09):
       links 130, oben 24, rechts 0, unten 0.

       ⚠️ Die 130 sind hier NICHT einzutragen. Figmas Flaeche beginnt am
       Fensterrand (x = 0) und schiebt den Inhalt mit 130 Polsterung nach
       innen. Im Theme beginnt `.ps-nav-col` bereits an der Containerkante
       (= 130 auf Desktop, `--grid-margin`); das Grau links davon malt
       `::before`. Aus den 130 wird hier also 0 – plus 20, damit das gruene
       Quadrat der aktiven Kategorie (position:absolute, left:-20px) genau
       AUF der Containerkante sitzt und nicht davor.

       Rechts 0: Die Kategorien sind bei 20px SemiBold hoechstens 207,5px
       breit („Mauerabdeckungen", gemessen) – ab 992px bleiben mindestens
       216px, es passt also ohne eigene Polsterung. */
    padding: 24px 0 0 20px;
    position: relative;
}

/* Extends gray only leftward – top/bottom bound to col height, never bleeds over headline */
.ps-nav-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background-color: var(--color-light);
}

/* Rechts 20 wie links (Chris 2026-09-18). Die „rechts 0" oben galt für
   reine Textpunkte; Untertyp-Pillen („Mathios Grout Bucket") liefen damit
   bis an die Kante der grauen Fläche, statt vorher umzubrechen. */
.ps-nav {
    background-color: transparent;
    border-radius: 0;
    padding: 0 20px 0 0;
}

.ps-nav-item {
    margin-bottom: 24px;
    position: relative;
}

.ps-nav-item:last-child {
    margin-bottom: 0;
}

/* Gruenes Quadrat an der aktiven Kategorie.

   ⚠️ Es stand auf top: 3px und damit 6 px zu hoch – sichtbar aus der Achse
   der Textzeile. Damit die Rechnung stimmt, braucht die Beschriftung eine
   FESTE Zeilenhoehe: mit `line-height: normal` haengt sie an der Schriftart,
   und jede Ersatzschrift verschoebe das Quadrat wieder.

   30 px Zeilenhoehe (das, was Poppins bei 20 px ohnehin liefert),
   also (30 − 12) / 2 = 9 px von oben. */
.ps-nav-item.is-active::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 9px;
    width: 12px;
    height: 12px;
    background-color: var(--color-accent);
    border-radius: 2px;
}

/* Figma: 20px (auf Mobil 16px, siehe unten).
   Schnitt SemiBold – vom User am 2026-09-09 aus dem Desktop-Frame gelesen
   („Kategorie: 20px semibold poppins auto"). Stand vorher auf Medium.

   ⚠️ Die Zeilenhoehe bleibt bei FESTEN 30px und wird NICHT auf `normal`
   gestellt, obwohl Figma „auto" sagt: Poppins liefert bei 20px genau 30px
   (nachgemessen) – der Wert IST also Figmas auto. Fest steht er, weil das
   gruene Quadrat darauf rechnet (siehe .ps-nav-item.is-active::before);
   mit `normal` haengt seine Lage an der Schriftart und verrutscht, sobald
   eine Ersatzschrift einspringt. */
/* Seit 2.16.6 ein <button> (siehe Template): die Kategorie klappt ihre
   Produktpillen auf. Die Knopf-Eigenheiten des Browsers werden hier
   zurueckgenommen, damit die Zeile aussieht wie vorher das <span>. */
.ps-nav-label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 20px;
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    line-height: 30px;
    cursor: pointer;
    transition: color var(--transition);
}

/* Aktiv unterscheidet sich jetzt nur noch ueber die FARBE – der Schnitt ist
   seit 2026-09-09 ueberall SemiBold. */
.ps-nav-item.is-active > .ps-nav-label {
    color: var(--color-dark);
}

.ps-nav-label:hover,
.ps-nav-label:focus-visible {
    color: var(--color-dark);
}

/* Sub-type badges */
.ps-nav-sub-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);                      /* 16px – Entwurf */
    margin-top: 10px;
}

/* Zugeklappte Kategorie. Noetig, weil `display: flex` oben die
   Browservorgabe fuer [hidden] sonst ueberstimmt. */
.ps-nav-sub-types[hidden] {
    display: none;
}

.ps-nav-badge {
    display: inline-block;
    /* 16px Regular, Zeilenhoehe auto – vom User am 2026-09-09 aus dem
       Desktop-Frame gelesen („Produkte: poppins regular 16px auto").

       ⚠️ Das kehrt eine aeltere Entscheidung um. Hier stand 14px mit der
       Begruendung: „Mit 16px Schrift wurde sie 104 breit, und Satteldach fiel
       in die naechste Zeile – im Entwurf stehen alle drei nebeneinander."
       Der Figma-Stand vom 09.09. zeigt den Umbruch aber SELBST (Flach und
       Pultdach oben, Satteldach darunter). Der Umbruch ist also gewollt.

       Folge: Die Pille wird 44 statt 40 hoch (24 Zeile + 2×10). */
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: normal;
    font-weight: var(--fw-normal);
    padding: 10px 14px;
    border-radius: var(--radius-md);           /* 8px */
    background-color: var(--color-cta);
    color: var(--color-cta-text-accent);
    border: none;
    /* Lange Produktnamen („Pfeilerelement mit Briefkasten, Entnahme hinten")
       liefen mit nowrap über die Seitenleiste hinaus (Chris 2026-09-18).
       Jetzt bricht der Name IN der Pille um; kurze Namen („1/1", „Flach")
       bleiben einzeilig, weil sie die Breite nie erreichen. */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition), opacity var(--transition);
}

/* Hover invertiert – siehe Kopf von buttons.css. */
.ps-nav-badge:hover,
.ps-nav-badge:focus-visible {
    background-color: var(--color-cta-text-accent);
    color: var(--color-cta);
}

.ps-nav-badge.is-active {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: var(--fw-semibold);
}

/* Right content column */
.ps-content-col {
    padding-left: 40px;
}

/* Panels: all hidden, only active visible */
.ps-product-panel {
    display: none;
}

.ps-product-panel.is-active {
    display: block;
}

/* ── Bühne: Rahmen aus dem Code, Freisteller darüber ──────────
   Seit 2.7.0 (Kundenwunsch 2026-09-16). Bis dahin steckte der Rahmen
   in jedem Produktbild, und das Bild lief über die volle Spaltenbreite.

   ALLES HÄNGT AN EINER GRÖSSE: der Rahmenbreite --ps-f. Gemessen an
   den drei Entwürfen (Produkt_…-Desktop/Tablet/Mobile.png) sind die
   Verhältnisse auf allen Breiten dieselben:

                          Desktop   Tablet   Mobil
     Rahmenbreite           407      294     ~208
     links vom Rahmen      0,55 F   0,57 F   mittig
     Produkt links drüber  0,29 F   0,29 F   0,28 F
     Produkt rechts drüber 0,10 F   0,10 F   0,12 F
     Rahmen → Knopf        0,17 F   0,15 F   darunter

   Deshalb Prozente von F statt fester Pixel.

   --ps-f rechnet mit cqw: 100cqw = Breite von .ps-image-frame.
   Die dritte Schranke hält die Zeile samt Knopf in der Spalte:
   0,55 F + F + 0,16 F = 1,71 F, plus rund 240 px für den Knopf.
   Ohne sie liefe der Knopf zwischen 992 und 1199 px über den Rand. */
.ps-image-frame {
    container-type: inline-size;
    display: flex;
    align-items: center;
}

.ps-image-frame > * {
    --ps-f: min(409px, 40cqw, calc((100cqw - 240px) / 1.71));
}

.ps-stage {
    position: relative;
    flex: none;
    width: var(--ps-f);
    aspect-ratio: 408.63 / 559.62;
    margin-left: calc(var(--ps-f) * 0.55);
    color: var(--color-dark);
}

.ps-stage-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ps-stage-square {
    fill: var(--color-accent);
}

/* Das Bildfeld ist größer als der Rahmen: 29 % links, 10 % rechts
   darüber hinaus, in der Höhe 20–80 %. `contain` setzt den Freisteller
   darin mittig – ein flaches Produkt füllt die Breite, ein hohes die Höhe.
   Transparente Freisteller lassen den Rahmen um das Produkt herum sehen. */
.ps-product-img {
    position: absolute;
    z-index: 1;
    left: -29%;
    top: 20%;
    width: 139%;
    height: 60%;
    max-width: none;
    object-fit: contain;
    display: block;
}

/* ── „Muster bestellen" ──────────────────────────────────────
   ⚠️ Der Knopf sass als Pille unten links IM Bild. Der Entwurf
   setzt ihn RECHTS NEBEN das Bild, auf halber Hoehe, und als zwei
   getrennte Flaechen: ein gruener Kreis mit Klick-Symbol, daneben
   eine gruene Flaeche mit dunkler, fetter Beschriftung.

   Gemessen am Entwurf (Produkt_…-Desktop.png, 2,00x von 1728,
   Inhalt ab Bild-x 8): Kreis 48, Abstand 6, Flaeche 48 hoch,
   Radius 8.

   Seit 2.7.0 steht er in der Zeile neben der Bühne, nicht mehr
   absolut am rechten Spaltenrand – der Rahmen ist jetzt schmaler als
   die Spalte, und der Knopf gehört an den Rahmen. Die halbe Höhe
   liefert align-items: center an .ps-image-frame. */
.ps-badge {
    position: relative;
    flex: none;
    margin-left: calc(var(--ps-f) * 0.16);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    padding: 0;
    text-decoration: none;
    z-index: 2;
    white-space: nowrap;
}

.ps-badge-text {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--radius-md);           /* 8px */
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    transition: opacity var(--transition);
}

/* Hover invertiert statt nur blasser zu werden – siehe Kopf von buttons.css.
   Deckkraft allein senkt den Kontrast, statt ihn zu erhalten. */
.ps-badge:hover .ps-badge-text,
.ps-badge:focus-visible .ps-badge-text {
    background-color: var(--color-on-accent);
    color: var(--color-accent);
}

.ps-badge:hover .ps-badge-icon,
.ps-badge:focus-visible .ps-badge-icon {
    background-color: var(--color-on-accent);
    color: var(--color-accent);
}

/* DE RYCK: Die invertierte Fläche ist weiß – rote Kontur um Knopf und Kreis,
   damit beide auf der weißen Seite als Knopf erkennbar bleiben
   (Kundenfeedback 2026-10-01). 1 px wie .btn-blue und .btn-outline-light.
   Innenschatten statt border, weil Knopf und Kreis keinen Rahmen haben und
   ein border sie um 2 px vergrößern würde. */
body.scheme-deryck .ps-badge:hover .ps-badge-text,
body.scheme-deryck .ps-badge:focus-visible .ps-badge-text,
body.scheme-deryck .ps-badge:hover .ps-badge-icon,
body.scheme-deryck .ps-badge:focus-visible .ps-badge-icon {
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.ps-badge:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* Klick-Symbol im Kreis.
   Das Symbol ist seit 2026-09-09 das vom Kunden gelieferte Original
   (`.figma-ref/Kunden Feedback/muster-bestellen-icon.svg`, 46x46) und nicht
   mehr der Nachbau, mit dem der Block gebaut wurde.

   ⚠️ Uebernommen ist NUR der Symbolpfad, nicht der Kreis aus der Datei.
   Die Lieferung traegt ihn als `<circle fill="#6BE381">` fest eingebaut –
   damit stuende auf `/wandverblender/dion/` ein gruener Kreis, obwohl dort
   die DE-RYCK-Welt gilt. Der Kreis bleibt deshalb hier in CSS und folgt
   `--color-accent` (schemes.css: gruen / rot / blau je Farbwelt).

   Das SVG fuellt den Kreis ganz aus (48px bei viewBox 46), damit das Symbol
   genau die Groesse und Lage der Lieferung behaelt. `#050D22` ist die
   Tintenfarbe aus der Datei; dasselbe Schwarzblau steht schon an
   `.intro-feature-text`. */
.ps-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #050D22;
    line-height: 1;
    transition: opacity var(--transition);
}

.ps-badge-icon svg {
    width: 48px;
    height: 48px;
    display: block;
}

/* Info grid */
.ps-info-grid {
    margin-top: 32px;
    padding-top: 28px;
}

.ps-info-heading {
    font-size: 20px;
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
    margin-bottom: 16px;
}

/* Product details */
.ps-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Figma: 16px, Medium, durchgehend schwarz (Label war hellgrau) */
.ps-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: var(--fw-medium);
    color: var(--color-text);
    padding: 7px 0;
}

.ps-detail-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-detail-icon svg,
.ps-detail-icon img {
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 22px;
    object-fit: contain;
    display: block;
}

.ps-detail-label {
    color: var(--color-text);
    flex-shrink: 0;
    min-width: 72px;
}

.ps-detail-value {
    color: var(--color-text);
}

/* Color swatches */
.ps-color-name-label {
    font-size: 20px;
    color: var(--color-text);
    margin-bottom: 12px;
}

/* 5 Swatches pro Reihe (Desktop 5×2 bei 10 Farben) – max-width bindet genau 5 */
.ps-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: calc(50px * 5 + 8px * 4);   /* = 282px, fuenf je Reihe */
}

/* Entwurf: 50 px, 8 px Abstand, fuenf je Reihe. */
.ps-color-swatch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: var(--radius-sm);           /* 4px */
    border: 1px solid rgba(0,0,0,0.12);
    background: none;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Ohne JavaScript bleibt der Knopf deaktiviert – dann soll er auch
   nicht so aussehen, als liesse sich etwas anklicken. */
.ps-color-swatch:disabled {
    cursor: default;
}

.ps-color-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ⚠️ Die gewaehlte Kachel ist ausgenommen. Sonst gewinnt :hover ueber die
   Regel weiter unten (hoehere Spezifitaet), die Kachel springt beim Ueberfahren
   und der gruene Rahmen wandert mit. */
.ps-color-swatch:not(:disabled):not([aria-pressed="true"]):hover {
    transform: scale(1.15);
    border-color: var(--color-dark);
}

.ps-color-swatch:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

/* ⚠️ Der gruene Rahmen darf nicht das EINZIGE Auswahlsignal sein
   (WCAG 1.4.1) – deshalb der Haken. Und im gewaehlten Zustand kein
   scale: das kollidierte mit dem Hover und liesse die Kachel beim
   Verlassen der Maus springen. */
.ps-color-swatch[aria-pressed="true"] {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-accent);
    transform: none;
}

.ps-color-check {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.ps-color-swatch[aria-pressed="true"] .ps-color-check {
    display: flex;
}

.ps-color-check svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Infomaterial – dark pill buttons */
.ps-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-info-link {
    display: inline-block;
    font-size: 16px;
    line-height: normal;
    font-weight: var(--fw-medium);
    color: var(--color-cta-text-accent);
    background-color: var(--color-cta);
    border: 1px solid var(--color-cta);
    /* ⚠️ Radius war 20 und damit fast eine Pille. Der Entwurf zeigt
       dieselbe leicht gerundete Ecke wie ueberall sonst: 8. */
    padding: 8px 16px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: opacity var(--transition);
    white-space: nowrap;
}

/* Hover invertiert – siehe Kopf von buttons.css. Vom User am 2026-09-09
   nachgereicht: „die im produktselector invertieren noch nicht".
   Stand auf `opacity: 0.82`, was den Kontrast senkt statt ihn zu erhalten. */
.ps-info-link:hover,
.ps-info-link:focus-visible {
    background-color: var(--color-cta-text-accent);
    border-color: var(--color-cta);
    color: var(--color-cta);
}

/* Die Überschrift ist eine <h3> mit dem Button darin (Gliederung + Bedienbarkeit).
   Die h3 selbst darf dabei nichts beisteuern – sonst zieht sie Literata, 26px und
   Bootstraps .5rem Margin ein. Deshalb erbt sie alles vom Umfeld; die sichtbaren
   Werte setzt weiterhin ausschließlich .ps-info-heading am Button. */
.ps-info-title {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* ── Aufklappbare Info-Spalten (nur Mobil aktiv) ──
   Desktop/Tablet: Überschrift sieht aus wie vorher, Inhalt immer offen. */
.ps-info-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    font-family: var(--font-body);
}

.ps-info-arrow {
    display: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-text);
    transition: transform var(--transition);
}

.ps-info-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 991px) {
    /* Nav bleibt gestapelt wie auf Desktop (Figma), nur schmaler */
    .ps-nav-col {
        box-shadow: none;
        /* Figma-Mobilframe (User 2026-09-09): links 44, oben 16, unten 16.
           Wie oben gehen 24 davon an die Containerkante (`--grid-margin` ist
           hier 16) und 20 an das gruene Quadrat. */
        padding: 16px 0 16px 20px;
        margin-bottom: 0;
    }
    .ps-content-col {
        padding-left: 16px;
        padding-top: 32px;
    }
}

/* Tablet-Entwurf: Knopf nicht auf halber Höhe, sondern bei 70 %.
   20 % der Rahmenhöhe (1,3695 F) = 0,274 F. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ps-badge {
        transform: translateY(calc(var(--ps-f) * 0.274));
    }
}

@media (max-width: 767.98px) {
    /* Mobil: alle Texte in der Nav-Spalte 16px */
    .ps-nav-label {
        font-size: 16px;
        line-height: 24px;
    }

    /* Mitgezogen: (24 − 12) / 2 = 6 */
    .ps-nav-item.is-active::before {
        top: 6px;
    }

    /* Akkordeon: Pfeil sichtbar, geschlossene Gruppen ausgeblendet.
       Default offen ist nur die erste Gruppe (Produktdetails). */
    .ps-info-grid {
        /* 16px – Figma-Mobilframe (User 2026-09-09: „16px gap steht da in
           figma"). Kundenfeedback 01, M BILD 06: „Der textliche Abstand von
           Produktdetails und Farbvarianten ist zu eng" – gemeint war das
           Gegenteil, im Entwurf steht MEHR Luft als Figma vorgibt; der Wert
           kommt jetzt direkt aus dem Entwurf. Vorher 1.5rem = 24px. */
        --bs-gutter-y: 1rem;
    }
    /* Figma-Mobilframe, User 2026-09-16 (Kundenfeedback 01, Mobil 23):
       Poppins SemiBold 20/Auto, 16px zwischen den Akkordeons (das ist das
       Gutter oben), 15px von der Überschrift zum Inhalt. Vorher 10px
       Innenabstand je Seite plus 6px – die Zeilen standen dadurch 36px
       auseinander. */
    .ps-info-heading {
        cursor: pointer;
        margin-bottom: 0;
        padding: 0;
        line-height: normal;
    }
    .ps-info-arrow {
        display: block;
    }
    .ps-info-group.is-open .ps-info-arrow {
        transform: rotate(180deg);
    }
    .ps-info-group:not(.is-open) .ps-info-body {
        display: none;
    }
    .ps-info-group.is-open .ps-info-body {
        padding-top: 15px;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBIL – „Muster bestellen" steht unter dem Bild

   Der Entwurf (Produkt_Mobile.png, 2,00x von 390) setzt die
   Gruppe unter das Bild, nicht daneben. Auf 390 px waere rechts
   daneben ohnehin kein Platz.

   ⚠️ Mittig, nicht linksbuendig (nachgemessen 2026-09-16: Rahmen
   x 91–299, Knopf x 90–292 bei 390). Linksbuendig sah es nur aus,
   solange das Bild mit eingebranntem Rahmen die volle Breite hatte.
   Rahmen ~208 von 358 Inhaltsbreite = 58 %.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .ps-image-frame > * {
        --ps-f: min(58cqw, 300px);
    }

    .ps-stage {
        margin-left: 0;
    }

    .ps-badge {
        margin-left: 0;
        margin-top: 24px;
    }

    .ps-badge-icon {
        width: 40px;
        height: 40px;
    }

    .ps-badge-text {
        height: 40px;
        padding: 0 16px;
    }

    .ps-image-frame {
        flex-direction: column;
        align-items: center;
    }
}

/* ══ DE RYCK: ohne Rahmen, mit Logo (seit 2.9.0) ═══════════════════════════
   Figma-Stand 2026-09-16 (Dion_Serie*.png), User: „Rahmen weg".
   Das Produkt steht frei; ohne Rahmen darf sein Bildfeld höher sein als
   die 20–80 % der gerahmten Variante. Bühne, Knopf und Maße bleiben
   sonst gleich, damit beide Varianten auf derselben Rechnung stehen.
   Logo vom User: Desktop 178 × 146 · Tablet 135 × 111 · Mobil 68 × 56 –
   ab Tablet oben rechts in der Inhaltsspalte, mobil rechts über dem Produkt. */
.ps--deryck .ps-product-img {
    top: 8%;
    height: 84%;
}

.ps-brand-logo {
    display: block;
    height: auto;
}

@media (min-width: 768px) {
    .ps--deryck .ps-content-col {
        position: relative;
    }

    .ps-brand-logo {
        position: absolute;
        top: 24px;
        right: 0;
        width: 135px;
        z-index: 2;
    }
}

/* 178 erst ab 1440: Zwischen 1200 und 1439 ist die Inhaltsspalte so
   schmal, dass das große Logo in „Muster bestellen" hineinragte
   (bei 1200 um 24px, nachgemessen). */
@media (min-width: 1440px) {
    .ps-brand-logo {
        width: 178px;
    }
}

@media (max-width: 767.98px) {
    .ps-brand-logo {
        width: 68px;
        margin: 0 0 16px auto;
    }
}