/* Rentique Weiß — Produktseite.
   ————————————————————————————————————————————————————————————————————————
   Ergänzt /css/site.css (.pdp*) und /css/rentique.css um das, was dort für
   die Vorlage src/templates/geraet.html fehlt. Fünf Punkte, mehr nicht.
   Nur Token, keine festen Farben, Abstände oder Radien.
   ———————————————————————————————————————————————————————————————————————— */

/* ————————————————————————————————— 1 · Bild im Rahmen

   tools/build.py liefert jedes Foto als <picture><source><img></picture>.
   Die Regel aus ds/components/media/media.css lautet aber

       .rw-imgframe > img { width:100%; height:100%; object-fit:cover }

   und trifft damit nicht mehr: das <img> ist Enkel des Rahmens, nicht Kind.
   Ohne die Zeilen hier fällt object-fit aus, das feste Seitenverhältnis des
   Rahmens gilt nicht mehr, und ein 3:2-Foto lässt im 4:3-Vorschaurahmen einen
   Streifen Navy stehen.

   Behoben wird das hier nur für die Produktseite — dieselbe Stelle trifft
   auch die Produktkacheln auf Start und Sortiment. Die saubere Lösung wäre
   eine Zeile in /css/rentique.css; die gehört mir nicht, deshalb steht sie
   im Bericht. */
.pdp .rw-imgframe > picture{display:block;width:100%;height:100%}
.pdp .rw-imgframe picture > img{width:100%;height:100%;
  object-fit:cover;object-position:center}

/* ————————————————————————————————— 2 · Vorschaubilder

   Der Bildwechsel ist reine JavaScript-Arbeit. Ohne JS wären die Knöpfe der
   Bildstrecke Bedienelemente, die ins Leere laufen — genau das, was die
   Architektur verbietet. Deshalb steht die Leiste erst da, wenn JS läuft:
   basis.js setzt .js auf <html>. Ohne JS bleibt das erste, große Bild, und
   das ist es, was die Seite tragen muss.

   Kein display:none auf den Knöpfen selbst, sondern auf der Leiste: so ist
   auch nichts mehr in der Tabreihenfolge. */
.pdp__thumbs{display:none}
.js .pdp__thumbs{display:grid}

/* ————————————————————————————————— 3 · Sprung zum Kalender

   Unter 980 px steht die rechte Spalte ganz unten — der Kalender liegt dann
   eine sehr lange Strecke hinter dem Text. Ab 980 px steht er daneben, dann
   ist der Sprung überflüssig.

   Der Kaufartikel hat keinen Kalender (.rw-cal fehlt); dort wäre die
   Beschriftung falsch, also fällt der Knopf weg. :has() ist im
   Design-System bereits im Einsatz (forms.css, .rw-option). */
.pdp__jump{margin-top:var(--space-4)}
@media (min-width:980px){.pdp__jump{display:none}}
.pdp:not(:has(.rw-cal)) .pdp__jump{display:none}

/* ————————————————————————————————— 4 · Fließtext

   site.css setzt den Abstand nur ZWISCHEN zwei Blöcken (.pdp__block +
   .pdp__block). Der erste Block folgt aber auf die Bildstrecke und stünde
   sonst direkt am Bild. Zwei Fälle: mit Bildern liefert der Generator
   .pdp__gallery (auch bei nur einem Bild), ohne Bilder den nackten
   Platzhalter-Rahmen. */
.pdp__gallery + .pdp__block,
.rw-imgframe + .pdp__block{margin-top:var(--space-8)}
.pdp__text > .rw-eyebrow{display:block;margin-bottom:var(--space-3)}
.pdp__text > p:last-child{margin-bottom:0}

/* Der Kaufartikel trägt weder „nur 1×" noch eine Kaution — dann bleibt die
   Chipreihe leer und soll auch keinen Platz beanspruchen. */
.pdp__chips:empty{display:none}

/* ————————————————————————————————— 5 · Vergrößern (Bildbetrachter)

   Das große Bild ist ein Link auf die größte Bilddatei (tools/build.py,
   bild_gross). Ohne JS öffnet der Browser das Foto, mit JS baut produkt.js
   beim ersten Klick ein natives <dialog> im Vollbild — opak in Navy, damit
   ::backdrop (das keine Token erbt) keine Farbe braucht. Fokusrahmen kommen
   aus ds/base/base.css über .rw-on-dark am Dialog. Bewegung nur über die
   Motion-Token, die unter prefers-reduced-motion ohnehin 0 ms sind. */
.pdp__zoom{position:relative;display:block;color:inherit;text-decoration:none;
  cursor:zoom-in;border-radius:var(--r-card)}
.pdp__zoom-hint{position:absolute;top:var(--space-3);right:var(--space-3);
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  padding:0 var(--space-3);border-radius:var(--r-pill);
  border:var(--bw-hair) solid var(--steel-500);background:var(--navy-900);
  color:var(--steel-300);font-size:var(--fs-micro);letter-spacing:.05em;
  text-transform:uppercase;pointer-events:none;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.pdp__zoom:hover .pdp__zoom-hint{color:var(--copper-glow);border-color:var(--copper)}

.pdp-lb-offen{overflow:hidden}

.pdp__lb{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--surface-dark);color:var(--text-on-dark)}
.pdp__lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;
  animation:pdp-lb-ein var(--dur) var(--ease-out)}
.pdp__lb::backdrop{background:transparent}
@keyframes pdp-lb-ein{from{opacity:0}}

.pdp__lb-figure{display:grid;grid-template-rows:minmax(0,1fr) auto;
  min-height:0;margin:0;padding:var(--space-4)}
.pdp__lb-figure picture{display:grid;grid-template-rows:minmax(0,1fr);
  place-items:center;min-height:0}
/* <source> darf keine Rasterzeile bilden, sonst sitzt das Bild in einer
   auto-Zeile und max-height:100% läuft ins Leere. */
.pdp__lb-figure source{display:none}
.pdp__lb-figure img{display:block;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain}
.pdp__lb-cap{display:flex;justify-content:center;gap:var(--space-4);
  padding:var(--space-3) 0 0;font-size:var(--fs-xs);letter-spacing:.05em;
  color:var(--text-on-dark-muted);min-height:1.5em}
.pdp__lb-cap [hidden]{display:none}

.pdp__lb-btn{position:absolute;z-index:1;display:grid;place-items:center;
  width:var(--tap-min);height:var(--tap-min);padding:0;border-radius:var(--r-pill);
  border:var(--bw-hair) solid var(--steel-500);background:var(--surface-dark-2);
  color:var(--text-on-dark);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.pdp__lb-btn:hover{border-color:var(--copper);color:var(--copper-glow)}
.pdp__lb-btn[hidden]{display:none}
.pdp__lb-close{top:var(--space-4);right:var(--space-4)}
.pdp__lb-prev,.pdp__lb-next{top:50%;transform:translateY(-50%)}
.pdp__lb-prev{left:var(--space-4)}
.pdp__lb-next{right:var(--space-4)}
/* Auf schmalen Bildschirmen liegen die Pfeile sonst über dem Bild —
   dort rücken sie nach unten neben den Zähler. */
@media (max-width:639px){
  .pdp__lb-prev,.pdp__lb-next{top:auto;bottom:var(--space-3);transform:none}
  .pdp__lb-figure{padding-bottom:calc(var(--space-3) + var(--tap-min) + var(--space-3))}
}

/* ————————————————————————————————— 6 · Kaufen (Kaufartikel, z. B. Pumphosen)

   Das Formular steht in der Bestellübersicht des Kaufartikels und bleibt
   versteckt, bis produkt.js vom Server erfährt, dass die Zahlung an ist.
   Honigtopf wie in buchung.css: aus dem Sichtfeld, nicht display:none. */
.kauf{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.kauf .rw-field{margin:0}
.kauf__topf{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.kauf [data-kauf-fehler]{margin:0}

/* ————————————————————————————————— 7 · Nächster freier Termin
   Schreibt /js/produkt.js neben die Verfügbarkeitszeile, wenn das Gerät heute
   belegt ist. Ohne JS bleibt die Zeile weg — sie wäre sonst geraten. */
.pdp__naechster{display:block;margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted)}