/* ============================================================
   P8 — Produktdetailseite (PDP) · Lagertechnik Direkt
   Baut auf den Tokens aus site.css auf. Keine Fremdbilder.
   ============================================================ */

.pdp{padding:clamp(20px,3vw,36px) 0 70px}
.pdp-crumbs{margin-bottom:clamp(16px,2.5vw,26px)}
.pdp-crumbs .sep{color:var(--line-2);margin:0 .15rem}
.pdp-crumbs [aria-current]{color:var(--muted-2)}

/* ---------- Top: Galerie + Kaufbox ---------- */
.pdp-top{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(22px,3.5vw,52px);align-items:start}
.pdp-top > *{min-width:0}

/* ----- Galerie ----- */
.pdp-gallery{position:sticky;top:88px;display:flex;flex-direction:column;gap:12px}
.pdp-views{display:flex;gap:.4rem}
.pdp-view-tab{
  padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--muted-2);font:var(--fw-semibold) var(--fs-sm)/1 'Inter';
  cursor:pointer;transition:.2s var(--ease)
}
.pdp-view-tab:hover{color:var(--text);border-color:var(--steel)}
.pdp-view-tab.is-active{background:var(--red);border-color:var(--red);color:#fff}

.pdp-stage{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:1/1;display:grid;place-items:center;
  /* Refresh 2026-07-16: Blueprint-Raster + Panel-Verlauf raus → ruhige Fläche.
     Tiefe trägt der drop-shadow am .pdp-photo, kein Ersatz-Bodenschatten. */
  background:var(--panel);
}
/* hidden-Attribut muss site.css (img{display:block}) + display-Regeln unten schlagen */
.pdp-photo[hidden],.pdp-rack[hidden],.pdp-3d-slot[hidden]{display:none}
.pdp-rack{width:72%;display:grid;place-items:center;color:var(--steel-2)}
.pdp-rack svg{width:100%;height:auto;filter:drop-shadow(0 30px 44px rgba(16,24,40,.16));transition:color .25s var(--ease)}
/* W3 (Ludwig): width:84% liess hochformatige Renders (z.B. 530x750) die 1:1-Stage
   sprengen -> overflow:hidden beschnitt oben/unten. Absolut positioniert, damit die
   %-Maxima gegen die Stage-Hoehe definit sind (im Grid+aspect-ratio sonst ignoriert). */
/* Audit 2026-07-24 (#49): schmale/hochformatige Renders (z. B. Einzel-Ständer) schwammen mit breiten
   Leerrändern in der 1:1-Stage, weil die Höhe (max-height:88%) die bindende Grenze war. Maxima angehoben
   (84→90 % Breite, 88→94 % Höhe), damit höhenbegrenzte Motive mehr Präsenz gewinnen; object-fit:contain +
   die dokumentierten W3-Overflow-Gründe bleiben (Motiv sprengt die Stage nicht, wird nur größer skaliert). */
.pdp-photo{position:absolute;inset:0;margin:auto;max-width:90%;max-height:94%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 30px 44px rgba(16,24,40,.16))}
.pdp-s3{z-index:2}
.pdp-stage-tag{
  position:absolute;top:16px;right:16px;font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(16,24,40,.6);padding:.36rem .66rem;border-radius:999px
}
.pdp-3d-slot{
  display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;padding:30px;
  color:var(--muted-2);max-width:32ch
}
.pdp-3d-slot svg{color:var(--steel-2)}
.pdp-3d-slot b{color:var(--text)}
/* Per-Produkt-3D (viewer3d) füllt die quadratische Stage absolut aus (statt zentriertem Platzhalter). */
.pdp-3d-live{position:absolute;inset:0;width:100%;height:100%;max-width:none;padding:0;display:block}
.pdp-3d-live .v3d__stage{height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent}
.pdp-3d-live .v3d__hint{display:none}

.pdp-thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.pdp-thumb{
  display:flex;align-items:center;gap:.5rem;padding:.42rem .7rem .42rem .5rem;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--muted-2);
  font:var(--fw-medium) var(--fs-sm)/1 'Inter';cursor:pointer;transition:.18s var(--ease)
}
.pdp-thumb:hover{border-color:var(--line-2);color:var(--text)}
.pdp-thumb.is-selected{border-color:var(--red);color:var(--red-text);background:rgba(226,0,26,.08)}
.pdp-thumb-sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line-2);flex:none}

/* ----- Kaufbox ----- */
.pdp-eyebrow{display:inline-block;font:var(--fw-semibold) var(--fs-xs)/var(--lh-caps) 'Inter';letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--steel-2);margin-bottom:.6rem}/* Refresh 2026-07-16: Eyebrow ist kein Kauf-Signal → Rot raus, --steel-2 (6,2:1 AA) */
.pdp-title{font-size:var(--fs-title)}
.pdp-sub{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:var(--fs-ms);margin-top:.7rem}
.pdp-sub b{color:var(--muted-2);font-weight:var(--fw-semibold)}
.pdp-variant-count{border:1px solid var(--line-2);border-radius:999px;padding:.18rem .6rem;color:var(--steel-2)}

.pdp-pricebox{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;flex-wrap:wrap}
.pdp-price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.pdp-now{font-family:'Sora';font-weight:var(--fw-black);font-size:var(--fs-2xl);color:var(--text);line-height:var(--lh-tight)}
.pdp-was{color:var(--muted);font-size:var(--fs-xs)}
.pdp-was s{color:var(--muted)}
/* 2026-07-24: entpillt (Doktrin flat/„Rot nur Signal") — der rosa Pill wirkte billig. Flacher, fetter roter Rabatt-Text neben dem durchgestrichenen UVP; Rot bleibt = echtes Preis-Signal. */
.pdp-discount{color:var(--red-text);font-weight:var(--fw-black);font-size:var(--fs-base)}
.pdp-vat{color:var(--muted);font-size:var(--fs-xs);margin-top:.5rem}
.pdp-vat span{color:var(--muted-2)}
/* P2 (Audit 2026-07-05): Bruttopreis + Frachthinweis unter dem Nettopreis. */
.pdp-gross{color:var(--muted-2);font-size:var(--fs-base);margin-top:.35rem}
.pdp-gross b{color:var(--text);font-weight:var(--fw-bold)}
.pdp-gross .pdp-freight{color:var(--muted)}
/* P2: Foto-Galerie-Thumbnails (Ansichten wechseln das Hauptbild). */
.pdp-photo-thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.pdp-photo-thumb{width:64px;height:64px;padding:4px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel);cursor:pointer;overflow:hidden;transition:.16s}
.pdp-photo-thumb img{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#fff}
.pdp-photo-thumb:hover{border-color:var(--steel)}
.pdp-photo-thumb.is-active{border-color:var(--red);box-shadow:0 0 0 2px rgba(226,0,26,.18)}

/* Variantenmatrix */
.pdp-variants{margin-top:1.6rem;display:flex;flex-direction:column;gap:1.05rem}
.pdp-axis-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.pdp-axis-head span:first-child{font:var(--fw-semibold) var(--fs-xs)/var(--lh-caps) 'Inter';letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted-2)}
.pdp-axis-val{color:var(--text);font-weight:var(--fw-semibold);font-size:var(--fs-base)}
/* Erklärtext unter einer Achsen-Überschrift (z. B. Kabeltrommel-Achsen). */
.pdp-axis-hint{margin:-.15rem 0 .7rem;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);max-width:54ch}
/* Kabeltrommel-Achsen: die beschreibenden Labels sind lang → als linksbündiger Stapel statt Chips. */
.pdp-axis[data-axis="axles"] .pdp-opts{flex-direction:column;align-items:stretch}
.pdp-axis[data-axis="axles"] .pdp-opt{text-align:left;line-height:1.35;min-width:0}
/* Overflow-Audit 2026-07-24: synthetische „Genaue Variante"-Achse hat bis ~93 Zeichen lange Labels — wie axles linksbündig stapeln + line-height, sonst kleben umbrechende Zeilen (Basis-.pdp-opt hat line-height:1). */
.pdp-axis[data-axis="variant"] .pdp-opts{flex-direction:column;align-items:stretch}
.pdp-axis[data-axis="variant"] .pdp-opt{text-align:left;line-height:1.35;min-width:0}
.pdp-opts{display:flex;gap:.5rem;flex-wrap:wrap}
.pdp-opt{
  min-width:54px;padding:.6rem .85rem;border-radius:var(--r);border:1px solid var(--line-2);/* Design-Refresh 2026-07-16 P6: entpillt/tokenisiert (11px→--r) */
  background:var(--panel);color:var(--muted-2);font:var(--fw-semibold) var(--fs-base)/1 'Inter';cursor:pointer;
  transition:.16s var(--ease);position:relative
}
.pdp-opt:hover{color:var(--text);border-color:var(--steel)}
/* Audit 2026-07-24 (#51): der gewählte Varianten-Zustand trug Signal-Rot (rosa Füllung + roter Rahmen)
   und las sich wie ein Validierungsfehler. Neutrale „gewählt"-Optik im Marken-Look: dunkler Rahmen +
   subtiler Panel-Füllton + Innen-Ring in currentColor. Rot bleibt echten Signalen/Warnungen vorbehalten.
   Gilt für JEDE Achse auf JEDER PDP (Höhe/Tiefe/Breite/Oberfläche/Ausführung/Genaue Variante). */
.pdp-opt.is-selected{border-color:var(--ink);color:var(--text);background:var(--panel-2);box-shadow:0 0 0 1px currentColor inset}
.pdp-opt:disabled,.pdp-opt.is-disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through;text-decoration-color:var(--muted)}
.pdp-opts-finish .pdp-opt{display:inline-flex;align-items:center;gap:.5rem;padding-left:.6rem}
.pdp-opt-sw .sw{width:16px;height:16px;border-radius:5px;border:1px solid var(--line-2);flex:none}

/* Aktionen */
.pdp-actions{display:flex;gap:.7rem;align-items:stretch;flex-wrap:wrap;margin-top:1.7rem}
.pdp-qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);overflow:hidden}
.pdp-qty-btn{width:42px;align-self:stretch;border:none;background:transparent;color:var(--muted-2);font-size:var(--fs-xl);cursor:pointer;transition:.15s}
.pdp-qty-btn:hover{color:var(--text);background:rgba(0,0,0,.04)}
.pdp-qty input{width:48px;border:none;background:transparent;color:var(--text);text-align:center;font:var(--fw-semibold) var(--fs-md) 'Inter';-moz-appearance:textfield}
.pdp-qty input::-webkit-outer-spin-button,.pdp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-add,.pdp-quote{flex:1;min-width:200px}
.pdp-add.added{background:var(--good)!important;box-shadow:none}
.pdp-quote-hint{color:var(--muted-2);font-size:var(--fs-ms);margin-top:.7rem;background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px;padding:.7rem .85rem}

.pdp-usp{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.55rem}
.pdp-usp li{display:flex;align-items:center;gap:.6rem;color:var(--muted-2);font-size:var(--fs-base)}
.pdp-usp li svg{color:var(--good);flex:none}
/* P2 (Audit 2026-07-05): Icon-Trust-Leiste als kompakte Chip-Reihe unter den Kauf-Buttons. */
.pdp-trustbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.pdp-trustbar li{gap:.45rem;font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:.4rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)}
.pdp-trustbar li svg{color:var(--steel-2)}
.pdp-trustbar li a{display:inline-flex;align-items:center;gap:.45rem;color:inherit}
.pdp-trustbar li a:hover{color:var(--red-text)}

/* ---------- Detail: Beschreibung + Specs ---------- */
.pdp-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,52px);margin-top:clamp(40px,6vw,80px);align-items:start}
.pdp-detail h2{font-size:var(--fs-3xl);margin-bottom:1rem}
.pdp-desc p{color:var(--muted-2);margin-bottom:.9rem;max-width:62ch}
.pdp-desc b{color:var(--text)}
/* GPSR/Hersteller-Pflichtblock — Visual-Audit 2026-07-06 (#22): war ungestylt, <address> rendert
   sonst kursiv (UA-Default) und bricht Typografie + Fluchtlinie der Beschreibungsspalte. */
.pdp-manufacturer{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.pdp-manufacturer h2{font-size:var(--fs-xl);margin-bottom:.5rem}
.pdp-mfr-note{color:var(--muted-2);margin-bottom:.6rem;max-width:62ch}
.pdp-mfr-address{font-style:normal;color:var(--muted-2);margin:.4rem 0 .9rem;line-height:1.6;max-width:62ch}
.pdp-mfr-address strong{color:var(--text)}
.pdp-mfr-address a{color:var(--red-text)}
.pdp-mfr-safety{color:var(--muted);font-size:var(--fs-base);max-width:62ch}
.pdp-downloads{margin-top:1.4rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.pdp-dl-head{font:var(--fw-semibold) var(--fs-xs)/var(--lh-caps) 'Inter';letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.pdp-dl{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted-2);font-size:var(--fs-base);padding:.4rem 0}
.pdp-dl[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.pdp-dl em{font-style:normal;font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.05rem .35rem}

/* A8 (UX-Scout 2026-07-14): kontextbezogener Ratgeber-Link im Beschreibungsbereich */
.pdp-guide-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.1rem;color:var(--muted-2);font-size:var(--fs-base)}
.pdp-guide-link a{color:var(--red-text);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px}
.pdp-guide-link a:hover{color:var(--text)}

.pdp-specs{overflow-x:auto}/* W4m-3: lange Zellwerte auf sehr schmalen Screens scrollbar statt geclipt */
.pdp-specs table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pdp-specs th,.pdp-specs td{text-align:left;padding:.7rem .9rem;font-size:var(--fs-base);border-top:1px solid var(--line);vertical-align:top}
.pdp-specs tr:first-child th,.pdp-specs tr:first-child td{border-top:none}
.pdp-specs th{color:var(--muted);font-weight:var(--fw-medium);width:46%;background:var(--panel-2)}
.pdp-specs td{color:var(--text);font-weight:var(--fw-semibold)}
.pdp-specs-note{margin-top:.55rem;font-size:var(--fs-sm);color:var(--muted)}/* E3 Traglast-Vorbehalt (2026-07-11) */

/* ---------- Cross-Selling ---------- */
.pdp-cross{margin-top:clamp(44px,6vw,86px)}
.pdp-cross .section-head{margin-bottom:clamp(20px,3vw,32px)}
.pdp-cross .section-head h2{font-size:var(--fs-title)}
.pdp-cross-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pdp-cross-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:.25s var(--ease)}
.pdp-cross-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}/* Refresh 2026-07-16: Karten-Doktrin — Zustand nur über Rahmen+Schatten, kein translateY */
.pdp-cross-art{position:relative;aspect-ratio:5/4;display:grid;place-items:center;color:var(--steel-2);border-bottom:1px solid var(--line);background:var(--panel-2)}/* Design-Refresh 2026-07-16 P6: Sichtachse an Katalogkarten (.pcard-art 5/4) angeglichen */
.pdp-cross-art svg{width:48%}
/* Badge-Semantik (Audit 2026-07-24, #45): das S3-Kürzel auf den „Weitere …"-Cross-Karten neutral
   halten — Signal-Rot bleibt Rabatt/CTA vorbehalten. Scoped, damit die globale .s3-badge (site.css)
   auf Katalog-/Listing-/Home-Karten unangetastet bleibt (das ist eine separate, site-weite Entscheidung). */
.pdp-cross .s3-badge{background:var(--panel-2);color:var(--muted-2);border:1px solid var(--line)}
.pdp-cross-art.has-photo{background:#fff}
.pdp-cross-art.has-photo .pdp-cross-photo{width:100%;height:100%;object-fit:contain;padding:10px}
.pdp-cross-body{padding:13px 14px;display:flex;flex-direction:column;flex:1}
.pdp-cross-sys{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--steel-2);font-weight:var(--fw-semibold)}
/* Audit 2026-07-24 (#54): 2-Zeilen-Clamp kappte lange META-Namen mitten im unterscheidenden Suffix
   (RAL-Nummer / Bauform), sodass ähnliche Varianten gleich aussahen. Auf 3 Zeilen gelockert +
   overflow-wrap:anywhere, damit RAL-Codes/Suffixe umbrechen statt hart abzuschneiden. min-height wächst
   auf ~3 Zeilen, damit die Grid-Zeilen bündig bleiben. */
.pdp-cross-body h3{font:var(--fw-semibold) var(--fs-base)/1.32 'Inter';margin:.35rem 0 0;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.4em}
.pdp-cross-price{margin-top:auto;padding-top:10px;font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-xl);color:var(--text)}
.pdp-cross-price small{font-family:'Inter';font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--muted);margin-left:.3rem}
/* Audit 2026-07-24 (#56): neutrale „Nächster-Schritt"-Affordanz auf den Cross-Karten (die ganze Karte
   ist der Link). Optik wie .reco-quote: gerahmt, gedämpft, volle Breite; Rot bleibt Kauf-CTAs vorbehalten.
   Der Pfeil rückt beim Karten-Hover leicht nach — signalisiert Klickbarkeit ohne Farb-Signal. */
.pdp-cross-cta{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:12px;
  padding:.55rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:var(--fw-semibold) var(--fs-ms)/1 'Inter';color:var(--muted-2);transition:border-color var(--t),color var(--t)}
.pdp-cross-cta svg{transition:transform var(--t)}
.pdp-cross-card:hover .pdp-cross-cta{border-color:var(--line-2);color:var(--text)}
.pdp-cross-card:hover .pdp-cross-cta svg{transform:translateX(2px)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .pdp-top{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .pdp-detail{grid-template-columns:1fr}
  /* Conversion-Audit 2026-07-24 (#116): einspaltig stapelt die Medienspalte (inkl. der Oberflächen-
     Swatch-Leiste .pdp-thumbs) ÜBER Titel/Preis — der Oberflächen-Selektor stand damit verwaist vor
     dem Produktnamen. Die Leiste auf Mobil ausblenden; die Oberfläche bleibt voll wählbar über die
     .pdp-axis[data-axis="finish"] in der Kaufbox (unter Titel/Preis). pdp.js hält beide Selektoren
     synchron, es geht keine Funktion verloren. Desktop behält die Leiste neben dem Bild. */
  .pdp-thumbs{display:none}
}
@media (max-width:560px){
  .pdp-actions{flex-direction:column}
  .pdp-add,.pdp-quote{min-width:0;width:100%}
  .pdp-qty{align-self:flex-start}
  .pdp-specs th{width:50%}
  /* Mobile-Audit 2026-07-11 (P2-4): Mengen-Stepper (Haupt-Kaufcontrol) unter Touch-Minimum.
     +/-/Input auf ≥44px (wie der Warenkorb-Stepper). Varianten-Buttons ≥44px hoch. */
  .pdp-qty-btn{width:44px;min-height:44px}
  .pdp-qty input{width:52px;height:44px}
  .pdp-opt{min-height:44px}
}

/* A9 (UX-Scout 2026-07-14): mobile Sticky-Kaufleiste — Kaufbox liegt bei ~1.500px,
   PDPs sind 10.000px+ lang. Erscheint ≤760px, sobald die Kaufbox nach oben aus dem
   Viewport gescrollt ist (IntersectionObserver in pdp.js steuert das hidden-Attribut). */
.pdp-mobilebar{display:none}
@media (max-width:760px){
  .pdp-mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;gap:.8rem;
    padding:.6rem .95rem calc(.6rem + env(safe-area-inset-bottom));
    background:var(--ink);border-top:1px solid var(--line-2);
    box-shadow:0 -8px 22px rgba(0,0,0,.38)}
  .pdp-mobilebar[hidden]{display:none}
  .pmb-price{display:flex;align-items:baseline;gap:.3rem;white-space:nowrap;
    font-family:'Sora',sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-lg);color:var(--text)}
  .pmb-price small{font-family:'Inter';font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--muted)}
  .pmb-btn{flex:1;justify-content:center;min-height:46px}
}

/* ---------- Konfigurator-Sektion ---------- */
/* Refresh 2026-07-16: klare Kapiteltrennung UNTER Galerie/Kaufbox — der Embed liegt als
   eigene Sektion darunter (nicht zusammengelegt, nicht verschoben). Keine Überschrift/kein
   Eyebrow: der .shop-cfg-widget bringt seinen eigenen Kopf mit. */
.pdp-configurator{margin-top:clamp(40px,6vw,80px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}