/* =====================================================================
   rio-regalsystem – Produktdetailseite (neues Design ab 11/2026)
   Nach Entwurf tokato-media.com/rio/pdp. Alle Werte aus rio-design.css (--rio-…),
   gemeinsame Bausteine (Knöpfe, Abschnitte) aus rio-seite.css. Nur unter .pdp gültig.
   Kein Rot für Handlungen (Rot nur Logo, Zähler, Fehler, Fokus).
   ===================================================================== */
.pdp { --pdp-kopf: 112px; --pdp-grund: var(--rio-band); }
@media (max-width: 1023.98px) { .pdp { --pdp-kopf: 64px; } }
.pdp .eyebrow { font: 600 var(--rio-fs-xs)/1.3 var(--rio-font-head); letter-spacing: var(--rio-tracking-caps); text-transform: uppercase; color: var(--rio-muted); margin: 0; }
.pdp .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Brotkrumen */
.pdp-krumen { padding-block: 22px 18px; font-size: var(--rio-fs-sm); color: var(--rio-muted); }
.pdp-krumen ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pdp-krumen li + li::before { content: "/"; margin-right: 4px; color: var(--rio-line); }
.pdp-krumen a { color: inherit; text-decoration: none; }
.pdp-krumen a:hover { color: var(--rio-ink); text-decoration: underline; }

/* Kopfbereich: Galerie, Kaufbox, Überblick */
.pdp-hero { display: grid; gap: 28px; padding-bottom: 56px; grid-template-areas: "galerie" "kauf" "blick"; }
.pdp-galerie { grid-area: galerie; min-width: 0; }
.pdp-kauf { grid-area: kauf; }
.pdp-blick { grid-area: blick; }
@media (min-width: 960px) {
  .pdp-hero { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "galerie kauf" "blick kauf"; gap: 40px 56px; align-items: start; padding-bottom: 80px; }
  .pdp-kauf { position: sticky; top: calc(var(--pdp-kopf) + 24px); }
}

/* Galerie (Scroll-Snap, geht auch ohne JS) */
.pdp-buehne { position: relative; }
.pdp-spur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; border-radius: var(--rio-radius); background: var(--pdp-grund); }
.pdp-spur::-webkit-scrollbar { display: none; }
.pdp-folie { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.pdp-folie > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-folie--ganz { background: var(--rio-surface); display: grid; place-items: center; }
.pdp-folie--ganz > img, .pdp-folie--ganz > svg { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.pdp-folie figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px 4px; border-radius: var(--rio-radius); background: rgba(255,255,255,.92); font: 600 .74rem/1.2 var(--rio-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--rio-ink); }
.pdp-zaehler { position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: 12px; background: rgba(23,20,18,.72); color: #fff; font-size: .78rem; }
.pdp-pfeil { position: absolute; top: 50%; translate: 0 -50%; display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer; color: var(--rio-ink); }
.pdp-pfeil--zurueck { left: 12px; }
.pdp-pfeil--weiter { right: 12px; }
@media (hover: hover) and (min-width: 768px) { .pdp-pfeil { display: inline-flex; } }
.pdp-daumen { display: flex; gap: 8px; margin: 10px 0 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.pdp-daumen button { position: relative; display: block; width: 86px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--rio-radius); background: var(--rio-surface); cursor: pointer; overflow: hidden; }
.pdp-daumen button[aria-current="true"] { border-color: var(--rio-ink); }
.pdp-daumen img, .pdp-daumen svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-daumen .ist-video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(23,20,18,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pdp-video { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.pdp-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.pdp-video span { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 12px; border-radius: var(--rio-radius); background: var(--rio-cta); color: var(--rio-cta-text); font: 600 .9rem/1 var(--rio-font-head); letter-spacing: .06em; }
.pdp-video small { position: absolute; bottom: 12px; color: #fff; font-size: .78rem; }
.pdp-folie iframe { width: 100%; height: 100%; border: 0; }
.pdp-mass { font-family: var(--rio-font-body); }

/* Kaufbox */
.pdp-kauf h1 { margin: 6px 0 8px; font-size: var(--rio-fs-h1); }
.pdp-eckdaten { margin: 0 0 10px; color: var(--rio-ink-soft); }
.pdp a.pdp-sterne-link, .pdp a.pdp-sterne-link:hover { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; text-decoration: none; color: var(--rio-muted); }
.pdp a.pdp-sterne-link:hover { color: var(--rio-ink); }
.pdp-sterne { color: #c99a2e; letter-spacing: 2px; }
.pdp-preisblock { margin: 22px 0 18px; padding-top: 20px; border-top: 1px solid var(--rio-line); }
.pdp-preis { font: 600 2.1rem/1 var(--rio-font-head); color: var(--rio-ink); }
.pdp-preis-hinweis { margin: 6px 0 0; font-size: .88rem; color: var(--rio-muted); }
.pdp-preis-hinweis a { color: inherit; }
.pdp-farben { margin: 0 0 18px; padding: 0; border: 0; }
.pdp-farben legend { margin-bottom: 10px; padding: 0; font-size: .95rem; }
.pdp-farbliste { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.pdp-farbe { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; font-size: .78rem; text-align: center; cursor: pointer; }
.pdp-farbe input { position: absolute; opacity: 0; }
.pdp-punkt { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); box-shadow: inset 0 0 0 3px var(--rio-paper); }
.pdp-farbe input:checked + .pdp-punkt { outline: 2px solid var(--rio-ink); outline-offset: 2px; }
.pdp-farbe input:focus-visible + .pdp-punkt { outline: 2px solid var(--rio-red); outline-offset: 2px; }
.pdp-lieferung { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .95rem; }
.pdp-lieferung::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rio-ok); box-shadow: 0 0 0 4px rgba(46,125,79,.15); }
.pdp-knoepfe { display: grid; gap: 14px; }
.pdp-nebenlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; font-size: .92rem; }
.pdp .pdp-nebenlinks a { display: inline-flex; align-items: center; gap: 6px; color: var(--rio-ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp .pdp-nebenlinks a:hover { color: var(--rio-cta-dunkel); }
.pdp-nebenlinks .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.pdp-knoepfe .rs-btn { text-align: center; padding-block: 14px; }
.pdp-vertrauen { display: grid; gap: 10px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rio-line); list-style: none; font-size: .92rem; }
.pdp-vertrauen li { display: flex; gap: 10px; align-items: flex-start; }
.pdp-vertrauen .icon { color: var(--rio-birch-dark); margin-top: 1px; }
.pdp-rat { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 16px; border-radius: var(--rio-radius); background: var(--rio-birch); font-size: .9rem; }
.pdp-rat .icon { width: 28px; height: 28px; }
.pdp-rat strong { display: block; font-family: var(--rio-font-head); font-size: 1rem; color: var(--rio-ink); }
.pdp-rat a { font-weight: 700; }

/* Auf einen Blick */
.pdp-blick h2 { margin: 0 0 12px; font-size: 1.25rem; }
.pdp-liste { margin: 0; border-top: 1px solid var(--rio-line); }
.pdp-liste div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rio-line); }
.pdp-liste dt { padding-top: .25em; font: 600 .76rem/1.4 var(--rio-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--rio-muted); }
.pdp-liste dd { margin: 0; color: var(--rio-ink); }

/* Sprungnavigation */
.pdp-sprung { position: sticky; top: calc(var(--pdp-kopf) + 6px); z-index: 20; background: var(--rio-surface); border-block: 1px solid var(--rio-line); }
.pdp-sprung ul { display: flex; margin-inline: -12px; gap: 4px; overflow-x: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: none; }
.pdp-sprung a { display: block; padding: 14px 12px 12px; white-space: nowrap; text-decoration: none; font: 600 .82rem/1 var(--rio-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--rio-muted); }
.pdp-sprung a:hover, .pdp-sprung a[aria-current="true"] { color: var(--rio-ink); background: var(--rio-ply) bottom / 100% 4px no-repeat; }

/* Abschnitte */
.pdp-abschnitt { padding-block: 56px; }
.pdp-abschnitt + .pdp-abschnitt { border-top: 1px solid var(--rio-line); }
.pdp-abschnitt--weiss { background: var(--rio-surface); }
.pdp-abschnitt h2 { margin-bottom: var(--rio-space-5); }
.pdp-abschnitt h2::before { content: ""; display: block; width: 36px; height: var(--rio-ply-h); margin-bottom: 16px; background: var(--rio-ply); }
.pdp-split { display: grid; gap: 36px; }
@media (min-width: 960px) { .pdp-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.pdp-text { max-width: 68ch; }
.pdp-text h3 { margin-top: 1.6em; }
.pdp-text p + p { margin-top: 1em; }
.pdp-bild { margin: 0; }
.pdp-bild img { width: 100%; border-radius: var(--rio-radius); }

/* Beschreibung aus dem Backend (alter Editor-Inhalt): Überschriften und Größen vereinheitlichen */
.pdp-beschreibung > h2 { margin-bottom: var(--rio-space-5); }
.pdp-beschreibung :is(h1, h2, h3, h4, h5):not(:first-child),
.pdp-beschreibung :is(p, span, div)[class*="text-2xl"], .pdp-beschreibung :is(p, span, div)[class*="text-3xl"],
.pdp-beschreibung :is(p, span, div)[class*="text-4xl"], .pdp-beschreibung :is(p, span, div)[class*="text-5xl"] {
  font: 600 var(--rio-fs-h3)/1.3 var(--rio-font-head); color: var(--rio-ink); margin: 1.4em 0 .5em; letter-spacing: 0; text-transform: none; }
.pdp-beschreibung :is(h1, h2, h3, h4, h5):not(:first-child)::before { display: none; }
.pdp-beschreibung p { margin: 0 0 1em; }
.pdp-beschreibung a { font-weight: 600; }
.pdp-beschreibung img { max-width: 100%; height: auto; }

/* Material (dunkel) */
.pdp-material { background: var(--rio-ink); color: #e9e2d8; }
.pdp-material h2 { color: #fff; }
.pdp-material .pdp-split { align-items: center; }
.pdp-fakten { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.pdp-fakten strong { display: block; color: #fff; font: 600 1.1rem/1.3 var(--rio-font-head); }
.pdp-lagen { width: 100%; height: auto; }

/* Technische Daten */
.pdp-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pdp-tabelle th, .pdp-tabelle td { padding: 11px 0; border-bottom: 1px solid var(--rio-line); text-align: left; vertical-align: top; }
.pdp-tabelle th { width: 42%; padding-right: 16px; font-weight: 400; color: var(--rio-muted); }

/* Lieferung */
.pdp-karten { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pdp-karte { padding: 24px; border: 1px solid var(--rio-line); border-radius: var(--rio-radius); background: var(--rio-surface); }
.pdp-karte h3 { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.pdp-karte .icon { width: 24px; height: 24px; color: var(--rio-birch-dark); }
.pdp-karte ul { margin: 0 0 12px; padding-left: 1.1em; }
.pdp-karte li { margin-bottom: 6px; }
.pdp-hinweisbox { display: grid; gap: 18px; margin-top: 28px; padding: 28px; border-radius: var(--rio-radius); background: var(--rio-birch); }
@media (min-width: 768px) { .pdp-hinweisbox { grid-template-columns: 1fr auto; align-items: center; } }

/* Fragen */
.pdp-fragen { max-width: 820px; }
.pdp-fragen details { border-bottom: 1px solid var(--rio-line); }
.pdp-fragen summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font: 600 1.08rem/1.35 var(--rio-font-head); color: var(--rio-ink); }
.pdp-fragen summary::-webkit-details-marker { display: none; }
.pdp-fragen summary::after { content: "+"; font: 400 1.5rem/1 var(--rio-font-body); color: var(--rio-ink); }
.pdp-fragen details[open] summary::after { content: "–"; }
.pdp-fragen details > div { margin: 0 0 18px; max-width: 68ch; }

/* Google-Bewertungen */
.pdp-bewertungen { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .pdp-bewertungen { grid-template-columns: 300px 1fr; gap: 40px; } }
.pdp-bew-summe { padding: 28px; border-radius: var(--rio-radius); background: var(--rio-band); }
@media (min-width: 900px) { .pdp-bew-summe { position: sticky; top: 120px; } }
.pdp-bew-summe p { margin: 0 0 12px; }
.pdp-note { font: 600 3.4rem/1 var(--rio-font-head); color: var(--rio-ink); }
.pdp-note span { margin-left: 6px; font-size: 1rem; font-weight: 400; color: var(--rio-muted); }
.pdp-sterne--gross { font-size: 1.5rem; letter-spacing: 4px; }
.pdp-bew-anzahl { font-weight: 600; }
.pdp-bew-summe .rs-btn { width: 100%; text-align: center; margin: 8px 0 4px; }
.pdp-bew-summe .pdp-klein { margin: 8px 0 0; }
.pdp-bew-liste { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1100px) { .pdp-bew-liste { grid-template-columns: 1fr 1fr; } }
.pdp-bew { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; border: 1px solid var(--rio-line); border-radius: var(--rio-radius); background: var(--rio-surface); }
.pdp-bew::before { content: "\201C"; position: absolute; top: 6px; right: 20px; font: 600 4.5rem/1 Georgia, serif; color: var(--rio-line); pointer-events: none; }
.pdp-bew .pdp-sterne { margin: 0; font-size: 1rem; }
.pdp-bew blockquote { flex: 1; margin: 0; }
.pdp-bew blockquote p { margin: 0; line-height: 1.6; }
.pdp-bew footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rio-line); font-size: .85rem; color: var(--rio-muted); }
.pdp-bew footer strong { display: block; font-size: .95rem; color: var(--rio-ink); }
.pdp-bew-initiale { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--rio-ink); color: #fff; font: 600 1rem/1 var(--rio-font-head); }
.pdp-klein { font-size: var(--rio-fs-sm); color: var(--rio-muted); }

/* Passt dazu */
.pdp-produkte { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pdp-produkt a { display: block; text-decoration: none; color: inherit; }
.pdp-produkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rio-radius); background: var(--pdp-grund); transition: opacity .2s; }
.pdp-produkt a:hover img { opacity: .88; }
.pdp-produkt h3 { margin: 12px 0 4px; font-size: 1.05rem; }
.pdp-produkt p { margin: 0; color: var(--rio-muted); font-size: .92rem; }

/* Kaufleiste unten (Handy) */
.pdp-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--rio-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--rio-surface); box-shadow: 0 -6px 20px rgba(0,0,0,.1); translate: 0 110%; transition: translate .2s; }
.pdp-leiste.ist-sichtbar { translate: 0 0; }
.pdp-leiste .pdp-preis { font-size: 1.3rem; }
.pdp-leiste small { display: block; color: var(--rio-muted); font-size: .75rem; }
@media (min-width: 960px) { .pdp-leiste { display: none; } }

/* Schnittgrafik Birkenschichtholz im Material-Abschnitt */
.pdp-material .rio-schichtholz { width: 100%; max-width: 520px; height: auto; justify-self: center; font-family: var(--rio-font-body, inherit); }
/* Zubehör aus dem Backend */
.pdp-zubehoer + .pdp-zubehoer { margin-top: 20px; }
.pdp-zubehoer p { margin: 0 0 8px; }
.pdp-zubehoer ul { padding-left: 1.2em; }
.pdp-bew-summe .rs-btn { padding-inline: 12px; }
/* Handy: drei Bewertungen reichen, sonst wird die Seite sehr lang */
@media (max-width: 699px) { .pdp-bew-liste .pdp-bew:nth-child(n+4) { display: none; } }

/* ---------- Korrekturen Arnd 05.11.2026 ---------- */
/* Keine beigen Schriften: Nebentexte, Labels und Symbole neutral grau */
.pdp { --rio-muted: #666666; }
.pdp-vertrauen .icon, .pdp-karte .icon { color: #555555; }
.pdp-material { color: #e6e6e6; }
/* Persönliche Beratung und Hinweisbox: leichtes Grau mit schwarzem Rahmen statt Birke */
.pdp-rat, .pdp-hinweisbox { background: #f2f2f1; border: 1px solid var(--rio-ink); }
/* Konfigurator: eigener, größerer Knopf unter „In den Warenkorb“ */
.pdp a.pdp-konfig-knopf, .pdp .rs-btn.pdp-konfig-knopf { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; text-align: left; padding-block: 14px; font-size: 1.02rem; border-width: 2px; }
.pdp-konfig-knopf .icon { flex: 0 0 20px; display: inline-block; margin: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* Foto der Schnittkante */
.pdp-schnitt { margin: 0; align-self: center; }
.pdp-schnitt img { display: block; width: 100%; height: auto; border-radius: var(--rio-radius); }
.pdp-schnitt figcaption { margin-top: 10px; font-size: .9rem; color: #e6e6e6; }
/* Aufbau-Karte: Video- und Anleitungslinks */
.pdp-karte-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.pdp-linkknopf { padding: 0; border: 0; background: none; font: inherit; color: var(--rio-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdp-linkknopf:hover { color: var(--rio-cta); }
.pdp-videofenster { width: min(960px, 94vw); padding: 0; border: 0; border-radius: var(--rio-radius); background: #000; overflow: visible; }
.pdp-videofenster::backdrop { background: rgba(0,0,0,.7); }
.pdp-videofenster-bild { aspect-ratio: 16 / 9; }
.pdp-videofenster-bild iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdp-videofenster-zu { position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }