/* Seitengeruest Konfigurator, Darstellung B/C.
   Laedt nur auf Seiten des neuen Wegs (Bootstrap.php::seiteAufbauen haengt den <link> an),
   alle Regeln haengen zusaetzlich an body.pc-neu.
   Masse und Farben aus dem abgenommenen Entwurf (Flaeche V28, germes-shop-dev
   .claude/handoffs/2026-11-03-0900-konfigurator-design-material/flaeche/project/):
   Handy = Hybrid-B-Loungekissen / Hybrid-C-Abdeckung, Desktop = Seite-B / Seite-C.
   Nur das Geruest: Schritte, Leiste und Bedienelemente baut React in die Plaetze. */

body.pc-neu {
    --pc-text: #1a1a1a;
    --pc-rot: #990000;
    --pc-linie: #e7e4df;
    --pc-band: #f5f5f0;
    /* Kaufleiste im Entwurf: 10 px oben + 52 px Knopf + 24 px unten. */
    --pc-kaufleiste-h: 86px;
    /* Platzhalter-Hoehe der Bedienung bis React mountet. Der Client darf sie per
       style an #pc-panel nachziehen, wenn er die echte Hoehe kennt. */
    --pc-panel-h: 420px;
    /* Hoehe des klebenden Snackys-Kopfs (header: position sticky, top 0, z-index 10).
       Gemessen 03.11.2026 auf www (sitzkissen-taupe): 64 px bis 767 px Breite, 102 px ab
       768 px (gleich bei 768, 800, 991, 992, 1000, 1350). Buehne bzw. Bildspalte kleben
       darunter, sonst verdeckt der Kopf sie. Lokal ist der Kopf hoeher, weil dort das
       Logo-Bild fehlt und der Alt-Text umbricht - kein Massstab. */
    --pc-kopf-h: 64px;
    /* Frage 6 im Plan: 40svh, bei 844 px Hoehe 338 px = Entwurf (340 px). .pc-titel liegt genau darueber. */
    --pc-buehne-h: clamp(260px, 40svh, 440px);
    padding-bottom: calc(var(--pc-kaufleiste-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    body.pc-neu {
        --pc-kopf-h: 102px;
    }
}

/* <source> zaehlt sonst als leeres Rasterfeld bzw. Inline-Box: <picture> ist hier
   display: contents, und Chrome blendet <source> nicht von sich aus aus (lokal
   03.11.2026: jedes zweite Feld der Bildreihe leer). Die Bildauswahl wirkt trotzdem. */
body.pc-neu .pc-seite source {
    display: none;
}

/* Brotkrumen auf dem Handy aus (steht im Kopf, Snackys layout/header/default.tpl:48). */
@media (max-width: 767.98px) {
    body.pc-neu #bc-w {
        display: none;
    }
}

/* ---------- Handy (Grundfall): eine Spalte ---------- */

/* .pc-seite ist Flex-Kind der Snackys-Zeile .row.product-primary. */
body.pc-neu .pc-seite {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--pc-text);
}

/* Die Bildspalte loest sich auf dem Handy auf: Reihenfolge Buehne -> Bedienung ->
   weitere Bilder wie im Entwurf, und die Buehne klebt oben, solange die Bedienung
   scrollt (sticky braucht dafuer .pc-seite als gemeinsamen Elternblock). */
body.pc-neu .pc-spalte-bild {
    display: contents;
}

body.pc-neu .pc-buehne {
    order: 1;
    position: sticky;
    top: var(--pc-kopf-h);
    z-index: 3;
    height: var(--pc-buehne-h);
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--pc-linie);
}

body.pc-neu .pc-buehne picture {
    display: contents;
}

/* !important und #buy_form mit Absicht: Snackys setzt jedes img[width] auf
   "height: auto !important" (themes/base/css/elements/images.css, Spezifitaet 0,4,2).
   Ohne das war das Bild lokal 508 statt 329 px hoch - object-fit griff nie, die Buehne
   schnitt nur unten ab, und bei C (contain) fehlte die halbe Abdeckung. */
body.pc-neu #buy_form .pc-buehne-bild {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
}

/* C (Abdeckung): ganzes Produkt sichtbar, Luft fuer H1 oben und Leiste unten. */
body.pc-neu-C #buy_form .pc-buehne-bild {
    box-sizing: border-box;
    object-fit: contain;
    padding: 46px 12px 74px;
}

/* Platz fuer die 3D-Insel: absolut ueber dem Bild, leer. Die Insel fuellt 100 %. */
body.pc-neu .pc-buehne-3d {
    position: absolute;
    inset: 0;
    z-index: 1;
}

body.pc-neu .pc-buehne-3d:empty {
    pointer-events: none;
}

body.pc-neu .pc-buehne-3d > * {
    width: 100%;
    height: 100%;
}

/* H1-Ebene: auf dem Handy eine durchsichtige Schicht genau ueber der Buehne - gleiche Hoehe, gleiches
   sticky, darum klebt und scrollt sie mit ihr. Sie steht im DOM vor der Buehne (Entscheid Roman 04.11.:
   eine H1, Lage je Geraet per CSS); der negative Rand zieht die Buehne darunter. Klicks gehen durch. */
body.pc-neu .pc-titel {
    order: 1;
    position: sticky;
    top: var(--pc-kopf-h);
    z-index: 4;
    height: var(--pc-buehne-h);
    margin-bottom: calc(-1 * var(--pc-buehne-h));
    pointer-events: none;
}

/* H1 als Glas-Pille oben links auf dem Bild (Entwurf: top/left 10 px, 17 px Playfair).
   #buy_form im Selektor, weil Snackys mit "#buy_form h1.product-title" (1,1,1) die
   Schrift setzt (1.5rem, letter-spacing 2px) - ohne ID verloren wir das (lokal gemessen
   03.11.2026: 24 px statt 17 px). */
body.pc-neu #buy_form .pc-titel h1.product-title {
    pointer-events: auto;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--pc-text);
}

/* React: Schritte (B) bzw. Abschnitt-Leiste (C), unten auf dem Bild. */
body.pc-neu #pc-buehne-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
}

body.pc-neu .pc-spalte-bedienung {
    order: 2;
    min-width: 0;
    padding: 18px 16px 26px;
    background: var(--pc-band);
}

/* Mindesthoehe am Panel selbst, nicht nur am Platzhalter: React entfernt den Platzhalter beim Mounten,
   die Felder kommen erst mit den Daten. Dazwischen fiel das Panel auf 0 und zog .pc-bilder ins Bild
   (lokal gemessen 03.11.: CLS 0,49). So waechst das Panel nur nach unten, unter die Falz. */
body.pc-neu #pc-panel,
body.pc-neu .pc-platzhalter {
    min-height: var(--pc-panel-h);
}

/* Galerie: Geschwister von .pc-seite in der Snackys-Zeile, eigene volle Zeile darunter. */
body.pc-neu .pc-bilder {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding: 26px 16px 8px;
    background: #fff;
    border-top: 1px solid var(--pc-linie);
}

body.pc-neu .pc-bilder-titel {
    margin: 0 0 14px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--pc-text);
}

body.pc-neu .pc-bilder-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.pc-neu .pc-bilder picture {
    display: contents;
}

/* Jedes Bild ist ein Knopf (Klick = gross, Tastatur inklusive). Snackys-Knopfstile zuruecksetzen. */
body.pc-neu #buy_form .pc-bild {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

body.pc-neu .pc-bilder img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

/* Ungerade Zahl: das letzte Bild ueber beide Spalten, 4:3 (Entwurf, Ansicht 4).
   :last-child greift auch mit <picture>, weil jedes Bild genau einen Knoten belegt. */
body.pc-neu #buy_form .pc-bild:last-child:nth-child(odd) {
    grid-column: span 2;
}

body.pc-neu #buy_form .pc-bild:last-child:nth-child(odd) img {
    aspect-ratio: 4 / 3;
}

/* Kaufleiste fest unten; Platz dafuer haelt das body-Padding oben frei. */
.pc-kaufleiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    box-sizing: content-box;
    min-height: var(--pc-kaufleiste-h, 86px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--pc-linie, #e7e4df);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
}

/* Randlos auf dem Handy wie im Entwurf: Buehne, Bedienung und Bilder laufen ueber die
   Snackys-Seitenraender hinaus. 50% - 50vw statt eines festen Randmasses: die Zeile steht
   mittig, also ergibt das genau den Abstand zum Bildschirmrand. Erst unter 768 px, weil
   100vw auf dem Desktop die Scrollleiste mitzaehlt (horizontaler Scroll). */
@media (max-width: 767.98px) {
    body.pc-neu .pc-titel,
    body.pc-neu .pc-buehne,
    body.pc-neu .pc-spalte-bedienung,
    body.pc-neu .pc-bilder {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    /* Galerie ist Flex-Kind der Snackys-Zeile: 100 % allein laesst die negativen Raender nicht wirken. */
    body.pc-neu .pc-bilder {
        flex-basis: 100vw;
        max-width: 100vw;
    }
}

/* ---------- Desktop: zwei Spalten, Bildspalte klebt ---------- */

@media (min-width: 992px) {
    body.pc-neu {
        --pc-panel-h: 560px;
    }

    /* Entwurf "Band grau": grauer Streifen ueber die volle Fensterbreite hinter dem
       Produktbereich. Schatten + clip-path verbreitern den Hintergrund, ohne die
       Snackys-Spalte zu verlassen (kein horizontaler Scroll). */
    /* Zeile 1 rechts: H1 (Entwurf Seite-B/-C), Zeile 2 rechts: Bedienung. Die Bildspalte ueberspannt
       beide; ihre Ueberhoehe nimmt die 1fr-Zeile auf, nicht die H1-Zeile. */
    body.pc-neu .pc-seite {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 580px);
        grid-template-rows: auto 1fr;
        column-gap: 48px;
        align-items: start;
        padding: 20px 0 64px;
        background: var(--pc-band);
        box-shadow: 0 0 0 100vmax var(--pc-band);
        clip-path: inset(0 -100vmax);
    }

    body.pc-neu .pc-spalte-bild {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: sticky;
        top: calc(var(--pc-kopf-h) + 24px);
        min-width: 0;
    }

    body.pc-neu .pc-buehne {
        position: relative;
        top: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 720px;
        margin: 0;
        border: 1px solid #fff;
        border-radius: 4px;
    }

    body.pc-neu .pc-titel {
        grid-column: 2;
        grid-row: 1;
        position: static;
        height: auto;
        margin: 0;
        pointer-events: auto;
    }

    /* Entwurf Seite-B: Playfair 38 px, Zeilenhoehe 1,12, ohne Pille. */
    body.pc-neu #buy_form .pc-titel h1.product-title {
        position: static;
        max-width: none;
        margin: 4px 0 22px;
        padding: 0;
        border-radius: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        font-size: 38px;
        line-height: 1.12;
    }

    body.pc-neu .pc-spalte-bedienung {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    body.pc-neu .pc-bilder {
        padding: 48px 0 8px;
        border: 0;
    }

    body.pc-neu .pc-bilder-raster {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    body.pc-neu #buy_form .pc-bild:last-child:nth-child(odd) {
        grid-column: auto;
    }

    body.pc-neu #buy_form .pc-bild:last-child:nth-child(odd) img {
        aspect-ratio: 1 / 1;
    }
}

/* ---------- Bedienelemente (Plan-Abschnitt 6, Katalog-Bedienelemente.dc.html) ----------
   Das Markup baut der Client nur im neuen Weg (useNeuerWeg: LabelOptions, SeiteOptionen,
   SeiteSchieber), die Felder aus MUI bekommen hier nur Farben. Der Pop-up-Weg laedt diese Datei
   nicht. #pc-panel im Selektor schlaegt die MUI-Klassen (emotion, 0,1,0) und Snackys (#buy_form h6). */

body.pc-neu #pc-panel {
    --pc-grau: #8a857d;
    --pc-linie-stark: #cfcac2;
    --pc-rot-grund: #fdf2f2;
    --pc-rot-hof: #f3dede;
    font-family: Lato, system-ui, sans-serif;
}

/* Fokus (Tastatur) fuer alles: roter Rahmen 2 px mit 2 px Abstand. */
body.pc-neu #pc-panel :focus-visible,
body.pc-neu .pc-kaufleiste :focus-visible {
    outline: 2px solid var(--pc-rot);
    outline-offset: 2px;
}

/* Feld: Titel, Hinweis „?“, Fehler (Rot + „!“ + Text - Rot allein heisst „gewaehlt“). */
body.pc-neu #pc-panel .pc-feld {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
}

body.pc-neu #pc-panel .pc-label-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

body.pc-neu #pc-panel .pc-label {
    margin: 0;
    font-family: Lato, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pc-text);
}

body.pc-neu #pc-panel .pc-pflicht {
    margin-left: 2px;
    color: var(--pc-rot);
}

body.pc-neu #pc-panel .pc-qm {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1.5px solid var(--pc-text);
    border-radius: 50%;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--pc-text);
    cursor: pointer;
}

/* Tippflaeche 44 px um den 28-px-Kreis */
body.pc-neu #pc-panel .pc-qm::before {
    content: "";
    position: absolute;
    inset: -8px;
}

body.pc-neu #pc-panel .pc-qm.pc-an {
    background: var(--pc-text);
    color: #fff;
}

/* Hinweis zum „?“ (Seite/Hinweis.tsx): Fenster ueber dem Knopf (Desktop) bzw. Dialog (Handy). Beide haengen
   per Portal am <body>, darum ohne #pc-panel im Selektor. Der Text ist knfg-HTML mit eigenen Inline-Farben;
   im dunklen Kasten gilt Weiss. Entwurf Seite-C .qm .tip: 280 px, 14/16 px Innenabstand, Lato 13 px. */
body.pc-neu .pc-hinweis {
    box-sizing: border-box;
    max-width: min(300px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 6px;
    background: #1a1a1a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    font-family: Lato, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

body.pc-neu .pc-hinweis,
body.pc-neu .pc-hinweis * {
    color: #fff !important;
}

body.pc-neu .pc-hinweis img {
    max-width: 100%;
    height: auto;
}

/* Handy: der Dialog ist der dunkle Kasten selbst, breiter, mit Titel und Knopf „Schliessen“. */
body.pc-neu .pc-hinweis-dialog .MuiDialog-paper {
    margin: 16px;
    border-radius: 8px;
    background: #1a1a1a;
}

body.pc-neu .pc-hinweis-dialog .pc-hinweis {
    max-width: none;
    padding: 18px 18px 14px;
    box-shadow: none;
    font-size: 15px;
}

body.pc-neu .pc-hinweis-titel {
    margin: 0 0 8px !important;
    font-weight: 700;
}

body.pc-neu .pc-hinweis-zu {
    display: block;
    min-height: 44px;
    margin: 12px 0 0 auto;
    padding: 0 16px;
    border: 1px solid #fff;
    border-radius: 2px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
}

body.pc-neu .pc-hinweis p,
body.pc-neu #pc-panel .pc-untertitel p {
    margin: 0;
}

body.pc-neu #pc-panel .pc-untertitel {
    font-size: 14px;
    color: var(--pc-text-leise, #666);
}

body.pc-neu #pc-panel .pc-untertitel:empty {
    display: none;
}

body.pc-neu #pc-panel .pc-fehler {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pc-rot);
}

body.pc-neu #pc-panel .pc-ex {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pc-rot);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

/* Ueberschrift- und Trenn-Elemente aus knfg (data-typ setzt ConditionalLogic). */
body.pc-neu #pc-panel [data-typ="headline"] :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

body.pc-neu #pc-panel [data-typ="divider"] hr,
body.pc-neu #pc-panel .MuiDivider-root {
    border: 0;
    border-top: 1px solid var(--pc-linie);
    opacity: 1;
}

/* ----- Optionen (SeiteOptionen.tsx) ----- */

body.pc-neu #pc-panel .pc-opt {
    display: grid;
    gap: 10px;
    width: 100%;
}

body.pc-neu #pc-panel .pc-opt-platz {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
}

/* Trenner aus der knfg-Optionsliste: Zwischenueberschrift bzw. Linie ueber die ganze Zeile */
body.pc-neu #pc-panel .pc-opt-trenner {
    grid-column: 1 / -1;
    flex-basis: 100%;
    margin: 6px 0 0;
}

body.pc-neu #pc-panel p.pc-opt-trenner strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-grau);
}

body.pc-neu #pc-panel p.pc-opt-trenner span {
    display: block;
    font-size: 13px;
    color: var(--pc-grau);
}

body.pc-neu #pc-panel hr.pc-opt-trenner {
    border: 0;
    border-top: 1px solid var(--pc-linie);
    opacity: 1;
}

/* Menge je Option (knfg quantitySelector): unter der Option, unsichtbar bis gewaehlt (Platz bleibt, kein Springen) */
body.pc-neu #pc-panel .pc-opt-menge {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 6px;
}

body.pc-neu #pc-panel .pc-opt-menge .pc-pm {
    width: 32px;
    height: 32px;
    font-size: 17px;
}

body.pc-neu #pc-panel .pc-opt-menge output {
    min-width: 28px;
    font-weight: 700;
    text-align: center;
}

body.pc-neu #pc-panel :is(.pc-kachel, .pc-karte, .pc-zeile) {
    width: 100%;
    margin: 0;
    background: #fff;
    border: 1.5px solid var(--pc-linie);
    border-radius: 6px;
    font: inherit;
    color: var(--pc-text);
    cursor: pointer;
}

@media (hover: hover) {
    body.pc-neu #pc-panel :is(.pc-kachel, .pc-karte):hover {
        border-color: var(--pc-grau);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    }

    body.pc-neu #pc-panel .pc-zeile:hover {
        border-color: var(--pc-grau);
    }
}

/* Kachel mit Bild (Einfachwahl) */
body.pc-neu #pc-panel .pc-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px 10px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
}

/* Fester Platz fuer das Optionsbild: es laedt spaet nach (CLS, Uebergabe 04.11.). */
body.pc-neu #pc-panel .pc-opt-bild {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* ohne overflow waechst die Box mit hohen Bildern ueber 1:1 hinaus (min-height: auto), die Lupe saesse dann mitten im Bild (Roman 05.11.) */
    overflow: hidden;
}

body.pc-neu #pc-panel .pc-opt-bild img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: contain;
}

body.pc-neu #pc-panel :is(.pc-kachel, .pc-karte, .pc-zeile).pc-an {
    border: 2px solid var(--pc-rot);
}

body.pc-neu #pc-panel .pc-kachel.pc-an {
    color: var(--pc-rot);
    font-weight: 700;
}

body.pc-neu #pc-panel .pc-opt-preis:empty {
    display: none;
}

body.pc-neu #pc-panel .pc-opt-preis .MuiTypography-root {
    font-size: 12px;
}

/* Lupe (knfg showImageLightbox): unten rechts im Bild, 8 px vom Rand, in Kachel und Karte gleich (Roman 04.11.).
   Der Rahmen liegt genau auf der Bildflaeche (Rand + Innenabstand der Kachel, Seitenverhaeltnis wie .pc-opt-bild)
   und laesst Klicks durch; nur der Knopf faengt sie. Sichtbar 34 px, Tippflaeche 44 px. */
body.pc-neu #pc-panel .pc-lupe-rahmen {
    position: absolute;
    top: 9.5px;
    left: 7.5px;
    right: 7.5px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

body.pc-neu #pc-panel .pc-karte + .pc-lupe-rahmen {
    top: 1.5px;
    left: 1.5px;
    right: 1.5px;
}

body.pc-neu #pc-panel .pc-lupe {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pc-text);
    cursor: zoom-in;
    pointer-events: auto;
}

body.pc-neu #pc-panel .pc-lupe::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--pc-linie);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    transition: border-color .15s, box-shadow .15s;
}

body.pc-neu #pc-panel .pc-lupe svg {
    position: relative;
    display: block;
    margin: auto;
}

@media (hover: hover) {
    body.pc-neu #pc-panel .pc-lupe:hover {
        color: var(--pc-rot);
    }

    body.pc-neu #pc-panel .pc-lupe:hover::before {
        border-color: #8a857d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    }
}

body.pc-neu #pc-panel .pc-lupe:focus-visible {
    outline: none;
}

body.pc-neu #pc-panel .pc-lupe:focus-visible::before {
    outline: 2px solid var(--pc-rot);
    outline-offset: 2px;
}

/* Karte zum Ankreuzen (Mehrfachwahl mit Bild) */
body.pc-neu #pc-panel .pc-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 10px;
    overflow: hidden;
    font-size: 14px;
    text-align: left;
}

body.pc-neu #pc-panel .pc-karte :is(.pc-opt-name, .pc-opt-preis) {
    padding: 8px 10px 0;
}

body.pc-neu #pc-panel .pc-karte .pc-kaestchen {
    position: absolute;
    top: 8px;
    right: 8px;
}

body.pc-neu #pc-panel .pc-kaestchen {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--pc-grau);
    border-radius: 4px;
    background: #fff;
}

body.pc-neu #pc-panel .pc-an .pc-kaestchen {
    border-color: var(--pc-rot);
    background: var(--pc-rot);
}

/* Auswahlzeile (Einfachwahl mit Text, Mehrfachwahl mit Kaestchen) */
body.pc-neu #pc-panel .pc-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 8px 14px;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}

body.pc-neu #pc-panel .pc-punkt {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--pc-grau);
    border-radius: 50%;
}

body.pc-neu #pc-panel .pc-zeile.pc-an .pc-punkt {
    border-color: var(--pc-rot);
}

body.pc-neu #pc-panel .pc-zeile.pc-an .pc-punkt::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pc-rot);
}

/* Aufpreis als Plakette rechts */
body.pc-neu #pc-panel .pc-zeile .pc-opt-preis {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pc-band);
    white-space: nowrap;
}

body.pc-neu #pc-panel .pc-zeile .pc-opt-preis .MuiBox-root {
    padding: 0;
}

/* Farbkreis */
body.pc-neu #pc-panel .pc-opt--farbe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

body.pc-neu #pc-panel .pc-farbe {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ddd;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: transform .1s;
}

body.pc-neu #pc-panel .pc-farbe img {
    display: block;
    width: 44px;
    height: 44px !important;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
}

@media (hover: hover) {
    body.pc-neu #pc-panel .pc-farbe:hover {
        transform: scale(1.08);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    }
}

body.pc-neu #pc-panel .pc-farbe.pc-an {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pc-rot);
}

body.pc-neu #pc-panel .pc-farbe-name {
    flex-basis: 100%;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

body.pc-neu #pc-panel .pc-farbe-name :is(img, i) {
    display: none;
}

/* Vorschau am Farbkreis: Kreis 140 px, Name als Pille darunter (Roman 05.11.: statt Entwurf .pv, oben rund). Nur mit Maus; ohne Maus zeigt die Karte
   des gewaehlten Stoffs das grosse Bild. ponytail: am Zeilenrand ragt sie bis 48 px ueber das Panel hinaus,
   eine Randkorrektur erst, wenn das stoert. */
body.pc-neu #pc-panel .pc-farbe {
    position: relative;
}

body.pc-neu #pc-panel .pc-farbe-pv {
    display: none;
}

@media (hover: hover) {
    body.pc-neu #pc-panel .pc-farbe:is(:hover, :focus-visible) .pc-farbe-pv {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: absolute;
        z-index: 15;
        bottom: 54px;
        left: 50%;
        width: 140px;
        margin-left: -70px;
        pointer-events: none;
    }

    body.pc-neu #pc-panel .pc-farbe-pv :is(img, i) {
        display: block;
        box-sizing: border-box;
        width: 140px;
        height: 140px !important;
        max-width: none;
        border: 4px solid #fff;
        border-radius: 50%;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
        object-fit: cover;
    }

    body.pc-neu #pc-panel .pc-farbe-pv span {
        padding: 0 12px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        font-size: 13px;
        font-weight: 400;
        line-height: 26px;
        white-space: nowrap;
        color: var(--pc-text);
    }
}

@media (hover: none) {
    body.pc-neu #pc-panel .pc-farbe-name {
        order: -1;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px;
        border: 1px solid var(--pc-linie);
        border-radius: 6px;
        background: #fff;
        font-size: 16px;
    }

    body.pc-neu #pc-panel .pc-farbe-name :is(img, i) {
        display: block;
        flex: none;
        width: 76px;
        height: 76px !important;
        border-radius: 4px;
        object-fit: cover;
    }
}

/* Fehler: Rahmen fuer die ganze Gruppe, der Text steht einmal darunter (LabelOptions). */
body.pc-neu #pc-panel .pc-feld[data-fehler] :is(.pc-kachel, .pc-karte, .pc-zeile):not(.pc-an) {
    border-color: var(--pc-rot);
    background: var(--pc-rot-grund);
}

body.pc-neu #pc-panel .pc-feld[data-fehler] .pc-zeile .pc-punkt {
    border-color: var(--pc-rot);
}

/* ----- Schieber mit Wert-Pille (SeiteSchieber.tsx) ----- */

body.pc-neu #pc-panel .pc-schieber {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pc-neu #pc-panel .pc-pm {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--pc-linie-stark);
    border-radius: 50%;
    background: #fff;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    color: var(--pc-text);
    cursor: pointer;
}

@media (hover: hover) {
    body.pc-neu #pc-panel .pc-pm:hover:not(:disabled) {
        border-color: var(--pc-grau);
        background: var(--pc-band);
    }
}

body.pc-neu #pc-panel .pc-pm:disabled {
    border-color: var(--pc-linie);
    color: var(--pc-linie-stark);
    cursor: not-allowed;
}

body.pc-neu #pc-panel .pc-rng {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 52px;
}

body.pc-neu #pc-panel :is(.pc-spur, .pc-fuellung) {
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
}

body.pc-neu #pc-panel .pc-spur {
    right: 0;
    background: var(--pc-linie-stark);
}

body.pc-neu #pc-panel .pc-fuellung,
body.pc-neu #pc-panel .pc-punkt-mark.pc-an {
    background: var(--pc-rot);
}

body.pc-neu #pc-panel .pc-punkt-mark {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--pc-linie-stark);
}

/* Unsichtbares natives Schiebefeld ueber der ganzen Spur: ziehen, Pfeiltasten, Bildschirmleser.
   Sein Griff ist so breit wie die Pille (84 px), damit Fingerlage und Pille zusammenpassen. */
body.pc-neu #pc-panel .pc-rng input[type="range"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

body.pc-neu #pc-panel .pc-rng input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 84px;
    height: 40px;
}

body.pc-neu #pc-panel .pc-rng input[type="range"]::-moz-range-thumb {
    width: 84px;
    height: 40px;
    border: 0;
}

/* Die Pille zeigt nur an; Klicks gehen an das Schiebefeld darunter, auch beim Eingabefeld
   (das oeffnet SeiteSchieber bei Klick ohne Ziehen). */
body.pc-neu #pc-panel .pc-pille {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 84px;
    height: 40px;
    margin: -20px 0 0;
    padding: 0 6px;
    border: 1.5px solid var(--pc-linie-stark);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--pc-rot);
    white-space: nowrap;
    pointer-events: none;
    transition: transform .1s;
}

/* Eingabefeld-Pille: 16 px, sonst zoomt das Handy beim Antippen heran */
body.pc-neu #pc-panel input.pc-pille {
    font-size: 16px;
    text-align: center;
    outline: 0;
}

body.pc-neu #pc-panel .pc-rng input[type="range"]:focus-visible {
    outline: 0;
}

body.pc-neu #pc-panel .pc-rng input[type="range"]:focus-visible ~ .pc-pille,
body.pc-neu #pc-panel input.pc-pille:focus {
    border-color: var(--pc-rot);
    box-shadow: 0 0 0 3px var(--pc-rot-hof);
}

body.pc-neu #pc-panel .pc-rng input[type="range"]:active ~ .pc-pille {
    border-color: var(--pc-rot);
    box-shadow: 0 4px 14px rgba(153, 0, 0, .2);
    transform: scale(1.06);
}

body.pc-neu #pc-panel .pc-mm {
    display: flex;
    justify-content: space-between;
    margin: -2px 52px 0;
    font-size: 12px;
    color: var(--pc-text-leise, #666);
}

body.pc-neu #pc-panel .pc-mm.pc-mm-punkte {
    margin: -2px 0 0;
}

body.pc-neu #pc-panel .pc-feld[data-fehler] .pc-pille {
    border-color: var(--pc-rot);
    background: var(--pc-rot-grund);
}

/* ----- Textfeld, Auswahlliste (MUI OutlinedInput) ----- */

body.pc-neu #pc-panel .MuiOutlinedInput-root {
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
}

body.pc-neu #pc-panel .MuiInputBase-input {
    font-size: 16px;
}

body.pc-neu #pc-panel .MuiOutlinedInput-notchedOutline {
    border-width: 1px;
    border-color: var(--pc-linie-stark);
}

@media (hover: hover) {
    body.pc-neu #pc-panel .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
        border-color: var(--pc-grau);
    }
}

body.pc-neu #pc-panel .MuiOutlinedInput-root.Mui-focused {
    box-shadow: 0 0 0 3px var(--pc-rot-hof);
}

body.pc-neu #pc-panel .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
body.pc-neu #pc-panel .pc-feld[data-fehler] .MuiOutlinedInput-notchedOutline {
    border-width: 1px;
    border-color: var(--pc-rot);
}

body.pc-neu #pc-panel .pc-feld[data-fehler] .MuiOutlinedInput-root {
    background: var(--pc-rot-grund);
}

/* ---------- Optik nach dev (Roman 04.11.: Abweichungen vom Entwurf, Aufgabenliste Uebergabe 09:40) ---------- */

body.pc-neu .pc-hinweis p + p {
    margin-top: 8px;
}

/* Snackys-Zusatz-CSS setzt "#result-wrapper p { text-align: justify }" (lokal per CSSOM gefunden): im
   schmalen Panel reisst das Luecken in den knfg-Hinweis. Linksbuendig wie im Entwurf, ohne Silbentrennung.
   knfg-Ausrichtung per Inline-Style (Editor) gewinnt weiter. */
body.pc-neu #pc-panel p {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* B: Name des Schritts unter „Schritt 1 von 6“. Klasse statt MUI-Typography: Snackys setzt h2 mit
   letter-spacing (auf dev „S c h r i t t 1“). */
body.pc-neu #pc-panel .pc-schritt-name-h {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pc-text);
}

/* B: Verbindungslinie durch alle Schritte (Entwurf Hybrid-B): weiss mit Schatten, damit sie auf hellen und
   dunklen Fotos sichtbar ist, im erledigten Teil gruen. Mitte der 26-px-Kreise: 4 px Rand + 13 px. */
body.pc-neu .pc-schritte .pc-linie {
    display: block;
    position: absolute;
    top: 16px;
    height: 2px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 3px rgba(0, 0, 0, .35);
    pointer-events: none;
}

body.pc-neu .pc-schritte .pc-linie-gruen {
    right: auto;
    background: #2e7d32;
    box-shadow: 0 0 0 1.5px #fff, 0 0 4px rgba(0, 0, 0, .3);
    transition: width .3s;
}

/* B: Beschriftung unter dem Kreis mit weichem weissem Schein, der dem Text folgt (Roman 04.11.: kein Oval,
   „weicher weisser Schein statt Kasten“, Entwurf V22-24). Der Schein ist ein weichgezeichnetes Feld genau
   hinter dem Text; der Textschatten haelt die Buchstaben auch auf unruhigem Grund lesbar. */
body.pc-neu .pc-schritt-name {
    position: relative;
    z-index: 0;
    max-width: 100%;
    padding: 1px 6px;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}

body.pc-neu .pc-schritt-name::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 6px;
    background: rgba(255, 255, 255, .85);
    filter: blur(5px);
}

body.pc-neu .pc-schritt-name > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kennzeile und Preis stehen auf dem Desktop in .pc-titel (seite.tpl), auf dem Handy nicht:
   dort traegt das Bild die H1, der Preis steht in der Kaufleiste unten. */
body.pc-neu .pc-kennzeile,
body.pc-neu #pc-preis {
    display: none;
}

/* „nach Maß“ am Ende der H1: rot kursiv (Entwurf Seite-B/-C und Hybrid-B). */
body.pc-neu #buy_form .pc-titel h1 .pc-nach-mass {
    color: var(--pc-rot);
    font-style: italic;
}

/* Kaufleiste: auf dem Handy die feste Leiste, auf dem Desktop die Knoepfe am Ende der Spalte (Kaufleiste.tsx,
   art "spalte"). Von der Spalten-Form zeigt das Handy nur die Zeile „Nach Ihren Maßen gefertigt · Lieferzeit“. */
body.pc-neu #pc-panel .pc-kauf-spalte > :not(.pc-lieferzeile, .pc-servicezeile, .pc-zahlungsarten) {
    display: none;
}

body.pc-neu #pc-panel .pc-kauf-spalte {
    margin-top: 18px;
    padding-top: 0;
    border-top: 0;
}

body.pc-neu #pc-panel .pc-lieferzeile {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #444;
}

/* Entwurf: 14 px, Zeilenhoehe 2 (Tippflaeche am Handy), Links wie „Vermessungsanleitung“ */
body.pc-neu #pc-panel .pc-servicezeile {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 2;
    text-align: center;
    color: #444;
}

/* Zahlungsarten als Kacheln unter der Servicezeile (Roman 05.11.: sehen statt klicken und scrollen).
   Die Logos kommen aus dem Footer-Kasten (weiss fuer dunklen Grund), hier per Filter dunkelgrau. */
body.pc-neu #pc-panel .pc-zahlungsarten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

body.pc-neu #pc-panel .pc-zahlungsarten li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 44px;
    border: 1px solid var(--pc-linie);
    border-radius: 8px;
    background: #fff;
}

body.pc-neu #pc-panel .pc-zahlungsarten img {
    width: auto;
    max-width: 64px;
    height: auto;
    max-height: 24px;
    filter: brightness(0);
    opacity: .7;
}

/* „Unentschlossen? Stoffmuster bestellen“ unter jeder Stoffwahl (Roman 05.11.: ein Link fuer alle) */
body.pc-neu #pc-panel .pc-stoffmuster {
    grid-column: 1 / -1;
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--pc-text-leise, #666);
}

body.pc-neu #pc-panel .pc-stoffmuster a {
    margin-left: 6px;
    font-weight: 700;
    color: var(--pc-text);
    text-decoration: underline;
}

body.pc-neu #pc-panel .pc-servicezeile a {
    color: var(--pc-text);
    text-decoration: underline;    white-space: nowrap; /* umbrechen nur zwischen den Teilen, nicht in der Telefonnummer */
}

/* Handy: Consent-Knopf und Cookie-Hinweis stehen links unten fest und lagen auf dev ueber dem Preis.
   Sie ruecken ueber die Kaufleiste. */
@media (max-width: 991.98px) {
    body.pc-neu #consent-settings-btn,
    body.pc-neu #ws_eu-cookie-container > aside {
        bottom: calc(var(--pc-kaufleiste-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
}

@media (min-width: 992px) {
    /* keine feste Leiste auf dem Desktop, also auch kein Platz dafuer */
    body.pc-neu {
        padding-bottom: 0;
    }

    body.pc-neu .pc-kaufleiste {
        display: none;
    }

    body.pc-neu #pc-panel .pc-kauf-spalte {
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px solid var(--pc-linie);
    }

    body.pc-neu #pc-panel .pc-kauf-spalte > :not(.pc-lieferzeile, .pc-servicezeile, .pc-zahlungsarten) {
        display: flex;
    }

    /* Grauer Streifen direkt unter der Brotkrumen-Leiste (Entwurf: Brotkrumen, 20 px, Inhalt). Auf dev lagen
       77 px Weiss dazwischen, lokal gleich gemessen 04.11.: #bc-w margin-bottom 32 px, #content padding-top
       24 px, das unsichtbare hr.hr-sm im #result-wrapper 2 x 10 px. Die drei fallen auf diesen Seiten weg,
       .pc-seite behaelt ihre 20 px oben. */
    body.pc-neu #bc-w {
        margin-bottom: 0;
    }

    body.pc-neu #content {
        padding-top: 0;
    }

    body.pc-neu #result-wrapper > hr.invisible {
        display: none;
    }

    /* Kennzeile (Entwurf: Pille mit Rand, Versal 11 px) */
    body.pc-neu .pc-kennzeile {
        display: inline-block;
        padding: 5px 12px;
        border: 1px solid #ddd;
        border-radius: 999px;
        background: #fff;
        font-size: 11px;
        letter-spacing: 1.8px;
        line-height: 1.3;
        text-transform: uppercase;
        color: #666;
    }

    body.pc-neu #buy_form .pc-titel h1.product-title {
        margin: 14px 0 10px;
    }

    body.pc-neu #buy_form .pc-titel h1 .pc-nach-mass {
        display: block;
    }

    /* Preis unter der H1, Hoehe fest (kein Springen, wenn React ihn fuellt) */
    body.pc-neu #pc-preis {
        display: block;
        min-height: 40px;
        margin-bottom: 26px;
    }

    /* C: die Abschnitts-Leiste gehoert nur zum Handy-Entwurf; ohne sie braucht das Bild unten keine Luft. */
    body.pc-neu .pc-abschnitte {
        display: none;
    }

    body.pc-neu-C #buy_form .pc-buehne-bild {
        padding: 24px;
    }
}

/* Nichts liegt ueber der Bedienung (Roman 05.11., gemessen mit ueberdeckung.js auf dev):
   - Trustami-Siegel (iframe 110 x 184 links unten, am Handy dazu ein Band) deckte in B die Schrittleiste
     bis 1440 px und am Handy beim Scrollen Kacheln und Anzahl. Auf Konfigurator-Seiten aus. Das iframe selbst
     traegt inline „display: block !important“ und laesst sich nicht ueberstimmen, darum die Behaelter.
   - Shop-Symbole rechts (ul.sidebar-info, hidden-xs, fest ab Fensterbreite - 75 px) lagen bei 800 und 1280/1350 px
     ueber der Bedienung („Ändern“, „+“, „Weiter“, „Merken“, B-Schritt „Prüfen“). Die Seite rueckt rechts nach
     innen, bis 16 px Luft vor den Symbolen bleiben (Rand Snackys: 51 px Tablet, 35 px Desktop); ab 1440 px
     ist der Rand schon breit genug. */
body.pc-neu .widget_container_overlay,
body.pc-neu .widget_container_overlay_mobile,
body.pc-neu #taCloseBtnOverlay {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.pc-neu .pc-seite,
    body.pc-neu .pc-bilder {
        padding-right: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1439.98px) {
    body.pc-neu .pc-seite,
    body.pc-neu .pc-bilder {
        padding-right: 56px;
    }
}

/* ---------- Handy aufgeraeumt (Roman 05.11.): oben nur das Bild, unten nur die Bedienung ----------
   Werbezeile (#header-promo, 76 px) und Shop-Kopf (header#shop-nav, 64 px) kosteten am Handy 140 px vor dem Bild,
   die Schritt-/Abschnittsleiste auf dem Bild wiederholte, was die Bedienung ohnehin zeigt („Schritt 1 von 6“
   bzw. die Akkordeonkoepfe). Alles aus; was davon gebraucht wird, schwebt als Knopf auf dem Bild
   (SchwebeKnoepfe.tsx: Zurueck, Warenkorb, Übersicht). Tablet und Desktop bleiben wie abgenommen. */
body.pc-neu .pc-schwebe {
    display: none;
}

@media (max-width: 767.98px) {
    body.pc-neu {
        --pc-kopf-h: 0px;
        /* frei gewordene 140 px: ein Teil geht ans Bild, der Rest an die Bedienung (vorher 40svh) */
        --pc-buehne-h: clamp(260px, 44svh, 460px);
    }

    body.pc-neu #header-promo,
    body.pc-neu header#shop-nav,
    body.pc-neu .pc-schritte,
    body.pc-neu .pc-abschnitte {
        display: none !important;
    }

    /* Snackys #content hat oben 24 px Abstand zum (jetzt ausgeblendeten) Kopf */
    body.pc-neu #content {
        padding-top: 0;
    }

    /* C: ohne Leiste braucht das Bild unten keine 74 px Luft mehr; oben bleibt Platz fuer Pille und Knoepfe */
    body.pc-neu-C #buy_form .pc-buehne-bild {
        padding: 60px 12px 12px;
    }

    /* H1-Pille rueckt rechts neben den Zurueck-Knopf */
    body.pc-neu #buy_form .pc-titel h1.product-title {
        top: 14px;
        left: 62px;
        max-width: calc(100% - 124px);
    }

    body.pc-neu .pc-schwebe {
        display: block;
    }

    /* .pc-schwebe davor: .pc-schwebe-knopf (position: relative, weiter unten) darf das nicht ueberstimmen */
    body.pc-neu .pc-schwebe .pc-schwebe-zurueck {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 5;
    }

    body.pc-neu .pc-schwebe-rechts {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Glas wie die H1-Pille, 44 px Tippflaeche */
    body.pc-neu .pc-schwebe-knopf {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
        color: var(--pc-text);
        cursor: pointer;
        text-decoration: none;
    }

    body.pc-neu .pc-schwebe-knopf:active {
        transform: translateY(1px);
    }

    body.pc-neu .pc-schwebe-knopf:focus-visible {
        outline: 2px solid var(--pc-rot);
        outline-offset: 2px;
    }

    body.pc-neu .pc-schwebe-zahl {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--pc-rot);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }
}

/* ---------- Galerie gross (Roman 06.11.): natives <dialog>, liegt in der obersten Ebene ---------- */
.pc-lightbox {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(20, 18, 16, .95);
    color: #fff;
    overscroll-behavior: contain;
    /* Beim Blaettern gleitet das Bild 80 px seitlich hinaus; ohne hidden zeigt der Dialog kurz einen
       Scrollbalken, der unten Platz nimmt -> Bild ruckelt hoch und runter (Roman 06.11.). */
    overflow: hidden;
}

.pc-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-lightbox::backdrop {
    background: transparent;
}

/* Feste Flaeche statt natuerlicher Groesse: das kleine Vorschaubild steht beim Oeffnen sofort gross da,
   bis das scharfe Bild dekodiert ist (Skript in seite.tpl). */
.pc-lightbox img {
    width: calc(100% - 32px);
    height: calc(100% - 112px);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.pc-lightbox {
    touch-action: pan-y pinch-zoom;
}

/* Vorschaubilder heben sich unter der Maus leicht an. */
body.pc-neu #buy_form .pc-bild {
    overflow: hidden;
    border-radius: 4px;
}

body.pc-neu #buy_form .pc-bild img {
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) {
    body.pc-neu #buy_form .pc-bild:hover img {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.pc-neu #buy_form .pc-bild img {
        transition: none;
    }
}

body.pc-neu #buy_form .pc-lightbox button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

body.pc-neu #buy_form .pc-lightbox .pc-lightbox-zu {
    top: 12px;
    right: 12px;
}

body.pc-neu #buy_form .pc-lightbox .pc-lightbox-zurueck {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

body.pc-neu #buy_form .pc-lightbox .pc-lightbox-vor {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.pc-lightbox-zahl {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 15px;
    letter-spacing: .04em;
    pointer-events: none;
}

/* Seite hinter der grossen Ansicht scrollt nicht mit. */
body.pc-neu:has(.pc-lightbox[open]) {
    overflow: hidden;
}

@media (hover: hover) {
    body.pc-neu #buy_form .pc-lightbox button:hover {
        background: rgba(255, 255, 255, .24);
    }
}

/* Am Handy liegen die Pfeile unten neben der Zahl, damit sie das Bild nicht verdecken. */
@media (max-width: 767.98px) {
    body.pc-neu #buy_form .pc-lightbox .pc-lightbox-zurueck,
    body.pc-neu #buy_form .pc-lightbox .pc-lightbox-vor {
        top: auto;
        bottom: 6px;
        transform: none;
    }

    body.pc-neu #buy_form .pc-lightbox .pc-lightbox-zurueck {
        left: calc(50% - 96px);
    }

    body.pc-neu #buy_form .pc-lightbox .pc-lightbox-vor {
        right: calc(50% - 96px);
    }
}