/* Produktseite — bewusst eine EIGENE Datei.

   Nutzt ausschließlich die Token aus style.css (Farben, Abstände,
   Schriftgrößen, Radien, Bewegung) und definiert keine eigenen Werte.

   Aufbau: Galerie und Abschnitte links, die Kaufbox klebt rechts daneben
   mit. Auf dem Telefon: Bild, Kaufbox, Abschnitte untereinander. */

.produkt-seite { padding-block: var(--space-5) var(--space-8); }
.produkt-seite > .container > .notice { margin-top: 0; }

.brotkrumen {
  font-size: var(--fs-300);
  color: var(--text-sec);
  margin-bottom: var(--space-4);
}
.brotkrumen a { color: var(--text-sec); }
.brotkrumen a:hover { color: var(--text); }

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  grid-template-areas:
    "galerie kauf"
    "inhalt  kauf";
  column-gap: var(--space-7);
  align-items: start;
}
.pd-galerie { grid-area: galerie; }
.pd-kaufbereich { grid-area: kauf; }
.pd-inhalt { grid-area: inhalt; }

/* Galerie: großes Bild auf ruhender Fläche. Die Dachschräge (oben rechts)
   ist die zweite und letzte Stelle der Diagonale. */
.pd-bild {
  margin: 0;
  border-radius: var(--radius-l);
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: var(--panel);
}
.pd-bild img { object-fit: contain; }
/* Telefon: flachere Bildfläche — Name und Preis sollen ohne Scrollen
   sichtbar werden, besonders solange nur der Platzhalter steht. */
@media (max-width: 640px) {
  .pd-bild { aspect-ratio: 16 / 9; }
  .pd-bild.shop-bild-leer { aspect-ratio: 3 / 1; }
}

/* Kaufbox: klebt unter der Kopfleiste mit, solange die Abschnitte laufen. */
.pd-kaufbereich {
  position: sticky;
  top: calc(var(--kopf-h-kompakt) + var(--space-4));
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--strich) solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-2);
}
.pd-kaufbereich h1 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  margin: 0;
}
.pd-kaufbereich .preis { font-size: var(--fs-h2); margin-top: var(--space-2); }
.pd-kaufbereich .btn { margin-top: var(--space-2); }
.pd-kaufbereich .notice { margin-top: var(--space-2); }

.pd-artikelnr { font-size: var(--fs-200); color: var(--text-sec); }
.pd-etikett { font-size: var(--fs-200); color: var(--text-sec); margin-top: var(--space-1); }

/* Abschnitte: eine Aussage je Block, groß gesetzt, blenden beim Scrollen
   ein (.einblenden aus style.css). */
.pd-block { padding-top: var(--space-7); }
.pd-block h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-4);
}
.pd-block > p,
.pd-block .pd-liste { max-width: var(--maxw-text); }

/* Abgrenzung: Warnfläche, nicht Fließtext — Fehlkäufe entstehen hier. */
.pd-warnung {
  background: var(--warn-bg);
  border-left: var(--strich-marke) solid var(--warn);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
}

.pd-liste { padding-left: 20px; }
.pd-liste li { margin-bottom: var(--space-1); }

/* Bestandteile als ruhige Kacheln */
.pd-bausteine {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pd-bausteine li {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border-radius: var(--radius-m);
  font-weight: 500;
}

/* Montage: nummerierte Schritte untereinander, die Nummer groß. */
.pd-schritte {
  list-style: none;
  padding: 0;
  counter-reset: schritt;
  display: grid;
  gap: var(--space-3);
}
.pd-schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  background: var(--panel);
  border-radius: var(--radius-m);
}
.pd-schritte li::before {
  content: counter(schritt);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-sec);
  font-variant-numeric: tabular-nums;
}

.pd-teil-titel {
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}

.pd-sicherheit-eintrag {
  display: grid;
  gap: var(--space-2);
  border-left: var(--strich-marke) solid var(--border);
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Technische Angaben: Merkmal, Wert, dann Bezugsgröße und Prüfnorm.
   Die dritte Spalte ist nicht schmückend — ein Wert ohne seine
   Bezugsgröße ist nicht überprüfbar. */
.pd-technik-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-300);
  margin-bottom: var(--space-2);
}
.pd-technik-tabelle th,
.pd-technik-tabelle td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--strich) solid var(--border);
}
.pd-technik-tabelle th { font-weight: 500; color: var(--text-sec); width: 40%; }
.pd-technik-tabelle td { font-variant-numeric: tabular-nums; }
.pd-zusatz { font-size: var(--fs-200); color: var(--text-sec); }

/* Breite Tabellen scrollen in sich selbst, statt die Seite zu sprengen. */
#pd-technik { overflow-x: auto; }

/* Telefon: Merkmal, Wert und Norm untereinander statt drei enger Spalten. */
@media (max-width: 640px) {
  .pd-technik-tabelle,
  .pd-technik-tabelle tbody,
  .pd-technik-tabelle tr { display: block; }
  .pd-technik-tabelle tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--strich) solid var(--border);
  }
  .pd-technik-tabelle th,
  .pd-technik-tabelle td { display: block; width: auto; padding: 0; border: 0; }
  .pd-technik-tabelle td:not(.pd-zusatz) { text-align: right; font-weight: 600; }
  .pd-technik-tabelle .pd-zusatz { grid-column: 1 / -1; margin-top: 2px; }
  .pd-technik-tabelle .pd-zusatz:empty { display: none; }
}

/* SDB-Downloads: jede Datei eine Zeile mit Dateityp, Titel und Pfeil. */
.pd-dokumente { list-style: none; padding: 0; display: grid; gap: var(--space-2); max-width: var(--maxw-text); }
.pd-dokumente a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--strich) solid var(--border);
  border-radius: var(--radius-m);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: border-color var(--dauer-schnell) var(--ease-out), transform var(--dauer-druck) var(--ease-out);
}
.pd-dokumente a::before {
  content: "PDF";
  padding: 4px 8px;
  border: var(--strich) solid var(--border-stark);
  border-radius: var(--radius-s);
  font-size: var(--fs-100);
  font-weight: 700;
  color: var(--text-sec);
}
.pd-dokumente a::after {
  content: "\2193";
  color: var(--marke-text);
  font-weight: 700;
}
.pd-dokumente a:hover { border-color: var(--border-stark); }
.pd-dokumente a:active { transform: scale(0.99); }

@media (max-width: 900px) {
  .pd-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "galerie" "kauf" "inhalt";
    row-gap: var(--space-5);
  }
  .pd-kaufbereich { position: static; box-shadow: none; }
}

/* `hidden` muss `display` aus Klassen schlagen. */
[hidden] { display: none !important; }