/* Produktdetailseite: Galerie, Kaufleiste, Tabs, Cut-Lage, Cross-Sell.
 *
 * Quelle: design/handoff/Produktdetail V3.dc.html (<style>-Block). Karte,
 * Chips, Buttons und Sektionsgeruest stehen in css/komponenten.css.
 *
 * Die Referenz schaerft am Ende ihres Stylesheets eine eigene Typo-Ordnung
 * nach ("Skala 11.5/12.5/13/15/24/38") und ueberschreibt dabei Klassen, die
 * auf der Startseite anders aussehen: .eyebrow, .uvpline, .discb, .pname,
 * .pricebig, .basep, .pmeta. Hier stehen sie deshalb unter `.tw-pdp` — auf
 * der Startseite gilt weiter deren Fassung.
 */

/* NOVA polstert #content-wrapper oben mit 64px, die Referenz setzt 56px auf
   die erste Sektion. data-page="1" ist PAGE_ARTIKEL. */
body[data-page="1"] #content-wrapper{padding-top:0}
.pdtop{padding:56px 0 0}

/* ================= Kopfbereich ================= */
.pdgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:start;padding:52px 0 0}
/* Bildbuehne auf --product-stage gepinnt: die generierten Bilder tragen
   ihren Hintergrund gebacken (#ffffff bzw. #101b36), jede andere
   Flaechenfarbe stuende als Kante um das Bild. Rahmen bleibt Token. */
/* Sticky sitzt auf der Galerie, nicht auf dem Hauptbild: Buehne und
   Miniaturen wandern als Block. Auf dem Hauptbild allein schob sich die
   Karte beim Scrollen ueber die Reihe darunter. */
.pdgal{position:sticky;top:175px}
/* Buehne und Kacheln lagen auf 18px und 12px - beide neben der Radienskala
   aus DESIGN_SYSTEM.md (6/10/14/20/28). Sie sind als Paar gewaehlt, deshalb
   werden auch beide gehoben: 20 und 14. Die Kachel bleibt damit runder als
   die Buehne, wie vorher. */
.pdimg{background:var(--product-stage);border:1px solid var(--hair);border-radius:var(--radius-lg);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Schatten aus dem Template, siehe .pphoto in komponenten.css. Groessere
   Buehne als die Karte, deshalb groesserer Versatz bei gleicher Deckung. */
.pdimg img{width:100%;height:100%;object-fit:cover;display:block}
/* Miniaturen kennt die Referenz nicht - sie zeigt genau ein Bild. Echte
   Artikel haben mehrere; die Reihe erscheint erst ab dem zweiten.
   Raster statt fester Pixelbreite: die Reihe schliesst damit bei jeder
   Bildanzahl buendig mit der Buehne ab. --n kommt aus dem Template. */
.pdthumbs{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:12px;width:100%;margin-top:12px}
.pdthumb{aspect-ratio:1;width:100%;border-radius:var(--radius-md);border:1px solid var(--hair);background:var(--product-stage);overflow:hidden;padding:0;box-sizing:border-box;cursor:pointer}
.pdthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdthumb[aria-pressed="true"]{border-color:var(--sky-400);box-shadow:0 0 0 1px var(--sky-400)}
.pdthumb:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .pdthumb{border-color:rgba(160,218,254,.16)}

.pdcard{border:1px solid #e3e8ef;border-radius:16px;padding:32px 34px;background:var(--color-surface)}
[data-theme="dark"] .pdcard{border-color:rgba(160,218,254,.16)}
.tw-pdp .eyebrow{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8a97a9;opacity:1}
[data-theme="dark"] .tw-pdp .eyebrow{color:#8fa3c0}
.pdtitle{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3vw,38px);line-height:1.12;letter-spacing:.02em;margin:12px 0 4px;color:var(--color-ink);text-transform:uppercase;text-wrap:pretty}
[data-theme="dark"] .pdtitle{color:var(--color-text-inverse)}
.rstars{display:inline-flex;align-items:center;gap:9px;font:600 13px/1 var(--font-body);color:var(--color-text-muted);text-decoration:none;margin:8px 0 0}
.rstars:hover{color:var(--color-link)}
.rstars:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
.rstars .stars svg{width:15px;height:15px}
.tw-pdp .uvpline{font:400 12.5px/1.4 var(--font-body);color:var(--color-text-muted);margin-top:2px}
.tw-pdp .uvpline s{text-decoration:line-through}
.pdprice{font:700 24px/1 var(--font-body);color:var(--color-price);font-feature-settings:'tnum'}
.pdprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pdbase{font:500 12.5px/1.6 var(--font-body);color:var(--color-text-muted)}
.pdcard .pdbase{font-size:13px;line-height:1.65}
.tw-pdp .discb{font:700 11px/1 var(--font-body);padding:5px 8px}
.pdship{font:600 12.5px/1.5 var(--font-body);color:var(--color-success);display:inline-flex;align-items:center;gap:7px;margin-top:14px}
.pdship svg{width:15px;height:15px;flex:none}
.pdcard .sz{font:600 12.5px/1 var(--font-body)}
.pdcard .szrow{margin-top:22px}
.pdvar{margin-top:22px}
.pdvar + .pdvar{margin-top:14px}
.pdvarn{font:600 12px/1 var(--font-body);color:var(--color-text-muted);display:block;margin-bottom:8px}
/* Auf der Detailseite umbrechen statt seitlich scrollen: Wer 11 Gewichte
   hat, soll sie alle sehen. Die Scrollleiste aus .szrow ist fuer die
   schmale Produktkarte gedacht, hier ist Platz. */
.pdcard .pdvar .szrow{margin-top:0;flex-wrap:wrap;overflow-x:visible;row-gap:8px;padding-bottom:0;-webkit-mask-image:none;mask-image:none}

/* Menge und CTA. Die Zeile ist 54 px hoch - Referenz und harte Design-Regel. */
.qtyrow{display:flex;gap:10px;margin:22px 0 0}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);height:54px;box-sizing:border-box}
.qtyb{width:46px;height:100%;border:0;background:none;font:700 18px/1 var(--font-body);color:var(--navy-800);cursor:pointer;border-radius:var(--radius-pill)}
.qtyb:hover{background:var(--sky-50)}
.qtyb:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .qtyb{color:var(--navy-100)}
[data-theme="dark"] .qtyb:hover{background:rgba(160,218,254,.1)}
.qtyv{width:34px;text-align:center;font:600 15px/1 var(--font-body);border:0;background:none;color:inherit;-moz-appearance:textfield}
.qtyv::-webkit-outer-spin-button,.qtyv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtyv:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
.tw .qtyrow .btn-lg{height:54px;padding-top:0;padding-bottom:0;flex:1}
.tw .qtyrow .btn-lg[disabled]{opacity:.55;cursor:not-allowed}
.pdhint{font:500 12.5px/1.5 var(--font-body);color:var(--color-text-muted);margin:10px 0 0}
/* Mindestbestellwert unter der Kaufleiste (Befund 15, 15.09.2026). Ton wie
   .pdhint, aber eigene Klasse: der Hinweis steht auch dann, wenn alles in
   Ordnung ist, und soll nicht wie eine Fehlermeldung aussehen. */
.pdmin{font:500 12.5px/1.5 var(--font-body);color:var(--color-text-muted);margin:8px 0 0}

.paysec{margin-top:28px;padding-top:24px;border-top:1px solid var(--hair)}
.payh{font:700 11.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#6b7787;margin:0 0 12px}
[data-theme="dark"] .payh{color:#9db0c9}
.payline{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.pdusps{display:flex;gap:20px;flex-wrap:wrap;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--hair)}
.pdusps .vitem{font:400 12.5px/1.4 var(--font-body);color:var(--color-text-muted);gap:8px}
.pdusps .vitem svg{width:16px;height:16px;color:#93a0b2}
.pdq{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1 var(--font-body);color:var(--color-text-muted);margin-top:30px;text-decoration:none}
.pdq:hover{color:var(--color-link)}
.pdq:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
.pdq svg{width:15px;height:15px}

/* ================= Tabs ================= */
.pdtabs{padding:110px 0 0}
.tabbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:26px;background:#f5f9fd;border:1px solid var(--hair);border-radius:var(--radius-pill);padding:5px;width:max-content;max-width:100%}
[data-theme="dark"] .tabbar{background:#111c35;border-color:rgba(160,218,254,.14)}
.tabb{font:600 13.5px/1 var(--font-body);white-space:nowrap;flex:none;padding:12px 20px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--navy-800);cursor:pointer;transition:all var(--transition-fast)}
.tabb:hover{border-color:var(--navy-800)}
.tabb[aria-selected="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
/* Der gewaehlte Reiter braucht seinen eigenen Hover: .tabb:hover setzt nur
   die Rahmenfarbe, und die ueberschreibt die Zeile darueber - der aktive
   Reiter reagierte auf Ueberfahren gar nicht. Dasselbe Muster wie beim
   aktiven Groessen-Chip (.sz.on in komponenten.css); beides aufgefallen,
   seit ci-audit.mjs Zustaende misst (08.09.2026). */
.tabb[aria-selected="true"]:hover{background:var(--navy-800);border-color:var(--navy-800)}
[data-theme="dark"] .tabb[aria-selected="true"]:hover{background:var(--sky-200);border-color:var(--sky-200)}
.tabb:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .tabb{background:transparent;color:var(--navy-100)}
[data-theme="dark"] .tabb:hover{border-color:var(--sky-300)}
[data-theme="dark"] .tabb[aria-selected="true"]{background:var(--sky-300);border-color:var(--sky-300);color:var(--navy-900)}
.tabpanel{border:1px solid var(--hair);border-radius:16px;padding:34px;background:var(--color-surface)}
[data-theme="dark"] .tabpanel{border-color:rgba(160,218,254,.14)}
.tabpanel + .tabpanel{margin-top:14px}
/* Farbe und Schrift ausdruecklich: NOVAs globale h1..h6-Regel setzt
   color:#525252 und font-family:Montserrat - ein Grau, das in beiden Modi
   gleich bleibt und im Dunkelmodus auf --color-surface kaum lesbar ist, und
   eine Schrift, die hier gar nicht geladen wird. Die Tafeln zeigen HTML aus
   der Wawi, dort koennen h2 bis h4 vorkommen; sie brauchen dieselbe
   Behandlung wie die eigenen h3. Gleiche Falle wie bei .fcard h3 am
   28.08.2026, siehe content.css. */
.tabpanel h2,.tabpanel h3,.tabpanel h4{color:var(--color-text);font-family:var(--font-body)}
.tabpanel h2{font-size:19px;line-height:1.3;font-weight:800;margin:22px 0 10px}
.tabpanel h2:first-child{margin-top:0}
.tabpanel h4{font-size:15px;line-height:1.35;font-weight:700;margin:18px 0 8px}
.tabpanel h3{font:700 16px/1.3 var(--font-body);margin:0 0 12px;color:var(--color-text)}
.tabpanel p{font:400 15px/1.75 var(--font-body);color:var(--color-text-muted);margin:0 0 14px;max-width:720px}
.tabpanel p:last-child{margin-bottom:0}

/* ================= Cut-Lage ================= */
.pdcut{padding:110px 0 0}
.pdesc{font:400 15px/1.75 var(--font-body);color:var(--color-text-muted);max-width:660px;margin:0}
.cowbox{position:relative;max-width:660px;margin-top:26px}
.cowbox img{width:100%;display:block}
.cowbox img.cowd{display:none}
[data-theme="dark"] .cowbox img.cowl{display:none}
[data-theme="dark"] .cowbox img.cowd{display:block}
.cowdot{position:absolute;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--sky-500);border:3px solid #fff;box-shadow:0 0 0 4px rgba(66,166,230,.35);animation:cowpulse 2s ease-in-out infinite;box-sizing:border-box}
@keyframes cowpulse{0%,100%{box-shadow:0 0 0 4px rgba(66,166,230,.35)}50%{box-shadow:0 0 0 12px rgba(66,166,230,.1)}}
@media (prefers-reduced-motion:reduce){.cowdot{animation:none}}
.cowlbl{position:absolute;font:700 12px/1 var(--font-body);background:var(--navy-900);color:#fff;padding:8px 12px;border-radius:var(--radius-pill);white-space:nowrap}
[data-theme="dark"] .cowlbl{background:var(--sky-300);color:var(--navy-900)}

/* ================= Cross-Sell und Reviews ================= */
.pdxsell{padding:120px 0 0}
.rvwrite{margin-top:28px}
.tw-pdp .alert{margin:0 0 20px;padding:14px 18px;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font:400 14px/1.55 var(--font-body)}
.tw-pdp :is(.alert-danger,.alert-error){background:var(--color-error-surface);border-color:var(--color-error)}
.tw-pdp .pname{font:400 17px/1.15 var(--font-display)}
.tw-pdp .pricebig{font:700 15.5px/1 var(--font-body)}
.tw-pdp .basep{font:400 12px/1.4 var(--font-body)}
.tw-pdp .pmeta{font:400 12.5px/1.4 var(--font-body)}

/* ================= Responsive ================= */
@media (max-width:1024px){
.pdgrid{grid-template-columns:1fr;gap:44px}
.pdgal{position:static}
}
@media (max-width:640px){
.pdthumbs{gap:8px}
.pdthumb{border-radius:10px}
.tabbar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
.tabbar::-webkit-scrollbar{display:none}
.pdusps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qtyrow{flex-wrap:wrap}
.tw .qtyrow .btn-lg{flex:1 1 100%;min-width:0}
.qtyb{width:40px}
/* 28px reichten fuer die 15px-Ziffer; css/touch.css hebt das Feld unter
   900px auf 16px (iOS-Zoom), damit passte eine zweistellige Menge nicht
   mehr hinein. */
.qtyv{width:40px}
}

/* Weiterlesen-Link am Fuss eines Reiters (Versand -> Versandseite). */
.tabmehr{font:700 15px/1.5 var(--font-body);color:var(--color-link);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.tabmehr:hover{text-decoration:underline}
.tabmehr:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}

/* Lebensmittel-Pflichtangaben im Reiter "Produktinformationen" (24.09.2026).
   Zweispaltig ab Tablet, darunter Begriff ueber Wert. */
.lmiv{display:grid;grid-template-columns:1fr;gap:4px 24px;margin:0}
.lmiv dt{font:700 14px/1.4 var(--font-body);color:var(--color-text);margin-top:12px}
.lmiv dt:first-child{margin-top:0}
.lmiv dd{margin:0;color:var(--color-text-muted);font-size:15px;line-height:1.55}
@media (min-width:768px){
  .lmiv{grid-template-columns:minmax(160px,220px) 1fr}
  .lmiv dt,.lmiv dt:first-child{margin-top:0;padding:10px 0;border-top:1px solid var(--hair)}
  .lmiv dd{padding:10px 0;border-top:1px solid var(--hair)}
  .lmiv dt:first-of-type,.lmiv dt:first-of-type + dd{border-top:0}
}

/* ------------------------------------------------------------------
   Hinweis auf der Produktseite des Geschenkartikels
   (project/GESCHENK-AKTION.md). Steht direkt unter dem Preis: Dort
   faellt die Kaufentscheidung, und die Aussage dreht sie - man kauft
   diesen Cut nicht, man bekommt ihn.
   ------------------------------------------------------------------ */
.pdgift{display:flex;gap:12px;align-items:flex-start;margin:16px 0 4px;
        padding:13px 15px 13px 13px;border-radius:14px;
        background:var(--sky-50);border-left:3px solid var(--navy-600)}
[data-theme="dark"] .pdgift{background:#111c35;border-left-color:var(--color-cta)}

/* Das Zeichen in einer gefuellten Scheibe - dieselbe Rollenumkehr wie
   ueberall: hell Himmelblau als Flaeche mit Navy darin, dunkel Navy
   als Flaeche mit Hellblau darin. */
.pdgifti{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-pill);
         display:grid;place-items:center;
         background:var(--color-cta);color:var(--color-cta-ink)}
.pdgifti .ic18{width:18px;height:18px}

.pdgiftt{min-width:0}
.pdgiftt b{display:block;font:700 15px/1.25 var(--font-body);color:var(--color-text)}
.pdgiftt p{margin:3px 0 0;font:400 13px/1.45 var(--font-body);
           color:var(--color-text-muted)}
.pdgiftt p b{display:inline;font-weight:700;color:var(--color-text)}