/* pz: Startseite — Hero, Trust-Leiste, Kategorie-Kacheln (fluid-banner-Block)
   plus die Content-Sektionen. SOLL: mockup-startseite.html.
   Mobil (<992px) ist im Mockup nicht definiert — eigene Design-Entscheidungen,
   siehe Kommentare an den Media Queries.
   Version: siehe Marker --pz-css-startseite unten (muss mit layout/header.tpl uebereinstimmen) */

:root { --pz-css-startseite: "20260821-19"; }

/* ============ Hero ============ */

.pz-hero {
  background: var(--pz-ink);
  color: #f2ede4;
  position: relative;
  overflow: hidden;
}
.pz-hero .pz-wrap { position: relative; z-index: 2; }
.pz-hero-txt {
  width: 50%;
  min-height: 700px;
  padding: 120px 80px 120px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pz-hero-txt .pz-eyebrow { display: block; margin-bottom: 30px; }
/* pz: 21.08. — dunkle Hero-Buehne: <em>-Akzent bleibt Flaechen-Gold
   (6,32:1); die helle Basisregel waere hier 3,46:1. Siehe pz-base.css. */
.pz-hero h1 em { color: var(--pz-gold); }
.pz-hero h1 {
  font-size: 84px;
  line-height: .99;
  color: #f7f2e9;
  margin-bottom: 30px;
}
.pz-hero .pz-lead { color: #b3a89b; max-width: 44ch; font-size: 16px; }
.pz-hero-cta { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; }

/* pz: z-index 3 statt 1 (Review R3 — die Hero-Produktkarte war TOT).
   Gemessen 20.08. (1440): elementsFromPoint auf die Kartenmitte lieferte
   DIV.pz-wrap oben, darunter erst A.pz-hero-card. Ursache: .pz-hero-img
   oeffnet mit z-index:1 einen Stacking-Context, in dem die Karte mit ihrem
   z-index:3 GEFANGEN ist — verglichen wird also 1 (Bild) gegen 2 (.pz-wrap).
   Warum das Anheben gefahrlos ist: .pz-hero-img beginnt bei 50vw, die
   Textspalte .pz-hero-txt endet bei genau derselben Kante (50 % der
   1280er-Wrap-Spalte) — die beiden ueberlappen auf KEINER Breite. Der
   Alternativweg (pointer-events:none auf .pz-wrap) haette die Textauswahl
   im Hero mitgenommen. */
.pz-hero-img {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50vw;
  z-index: 3;
}
.pz-hero-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--pz-ink) 0%, rgba(18,16,13,.55) 26%, rgba(18,16,13,0) 62%);
}
.pz-hero-card {
  position: absolute;
  left: -46px;
  bottom: 72px;
  z-index: 3;
  background: rgba(20,17,13,.92);
  border: 1px solid rgba(185,141,79,.45);
  padding: 24px 28px;
  min-width: 300px;
  /* pz: 20.08. — seit die Karte ihren Namen aus den echten Artikeldaten zieht
     (A6), ist er kein handgesetzter Zweizeiler mehr. Ohne Deckel spannte der
     volle Wawi-Name die Karte auf 664px auf und lief ueber die rechte
     Bildkante hinaus (im Screenshot gesehen). Die Karte behaelt deshalb ihr
     Mockup-Mass, unabhaengig davon, wie lang der Artikel heisst. */
  max-width: 340px;
  display: block;
}
.pz-hero-card:hover { border-color: var(--pz-gold-lt); color: inherit; }
.pz-hero-card-k {
  display: block;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pz-gold-lt);
  margin-bottom: 11px;
}
.pz-hero-card-n {
  /* pz: zwei Zeilen wie im Mockup — der echte Artikelname ist laenger als der
     Mockup-Text und darf die Karte nicht in die Hoehe treiben. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--pz-serif);
  font-size: 21px;
  line-height: 1.22;
  color: #f2ede4;
  margin-bottom: 14px;
}
.pz-hero-card-p { display: flex; align-items: baseline; gap: 12px; }
.pz-hero-card-p b { font-size: 19px; font-weight: 600; color: #fff; }
.pz-hero-card-p s { font-size: 12.5px; color: #8c8175; }
.pz-hero-card-p i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--pz-gold-lt);
  border: 1px solid rgba(185,141,79,.5);
  padding: 3px 7px;
  margin-left: auto;
}

/* ============ Trust-Leiste ============ */

.pz-trust {
  border-bottom: 1px solid var(--pz-line);
  background: var(--pz-ivory);
}
.pz-trust .pz-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.pz-trust .pz-wrap > div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 34px 30px 34px 0;
  min-width: 0; /* pz: Lehre I.3 — Flex-/Grid-Kind schrumpft sonst nie unters laengste Wort */
}
.pz-trust .pz-wrap > div + div {
  padding-left: 34px;
  border-left: 1px solid var(--pz-line);
}
.pz-trust svg { width: 22px; height: 22px; color: var(--pz-gold); flex: none; }
.pz-trust-txt b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--pz-ink);
}
.pz-trust-txt > span { display: block; font-size: 12px; color: var(--pz-muted); margin-top: 2px; }

/* ============ Sektions-Kopf (wiederverwendet auf der Startseite) ============ */

.pz-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 64px;
}
.pz-sec-head .pz-eyebrow { display: block; margin-bottom: 22px; }
.pz-sec-head h2 { font-size: 50px; margin-bottom: 20px; }
.pz-sec-head .pz-lead { margin-bottom: 0; }

/* ============ Kategorie-Kacheln ============ */

/* pz: Ben 20.08. — "Abstand VOR der Sektion halbieren" (A2) und "Abstand NACH
   dem Kategoriegrid halbieren" (A3). Beides ist DASSELBE Polster dieser
   Sektion, deshalb eine Halbstufe statt zweier Einzelwerte.
   Gemessen vorher (1440): Trust-Leiste endet 1037, Kicker "DIE PERLEN-WELT"
   beginnt 1163 -> 126; Kachelgrid endet 2325, Sektion endet 2451 -> 126. */
.pz-cats-sek { padding: var(--pz-sek-halb) 0; background: var(--pz-ivory); }
.pz-cats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 272px 272px 340px;
  gap: 22px;
}
.pz-cat { position: relative; overflow: hidden; background: var(--pz-ink); display: block; }
.pz-cat img { width: 100%; height: 100%; object-fit: cover; opacity: .92; display: block; }
.pz-cat-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12,10,8,.88) 0%, rgba(12,10,8,.34) 44%, rgba(12,10,8,.04) 78%);
}
.pz-cat-txt {
  position: absolute;
  left: 32px; right: 32px; bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.pz-cat h3 { font-size: 31px; color: #f7f2e9; margin: 0; }
.pz-cat-sub {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pz-gold-lt);
  margin-top: 9px;
}
.pz-cat-arw {
  width: 40px; height: 40px;
  border: 1px solid rgba(247,244,238,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #f2ede4;
}
.pz-cat-arw svg { width: 15px; height: 15px; }
.pz-cat:hover .pz-cat-arw { border-color: var(--pz-gold-lt); color: var(--pz-gold-lt); }

.pz-cat-a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.pz-cat-a h3 { font-size: 46px; }
.pz-cat-a .pz-cat-txt { left: 40px; right: 40px; bottom: 36px; }
.pz-cat-b { grid-column: 8 / span 5; grid-row: 1; }
.pz-cat-c { grid-column: 8 / span 5; grid-row: 2; }
.pz-cat-d { grid-column: 1 / span 4; grid-row: 3; }
.pz-cat-e { grid-column: 5 / span 4; grid-row: 3; }
.pz-cat-f { grid-column: 9 / span 4; grid-row: 3; }

/* ============ "Beliebt bei unseren Kundinnen" — Produktgrid ============ */

/* pz: KEIN eigenes Sektions-Padding mehr — Kopf- und Fussmass kommen
   ausschliesslich aus der Skala in pz-base (.pz-section: pt 0 / pb --pz-sek).
   Vorher stand hier ein handverlesenes padding-bottom:126px am INNEREN
   Wrapper; genau solche Innen-Polster liessen die Grenzen stapeln
   (Reviewer F9: 252px vor dem Beratungs-Band). NOVAs 64px content-wrapper-
   Polster nullt jetzt ebenfalls pz-base. */

/* MwSt-Zeile der Karte (item_box.tpl) */
.pz-card-vat { font-size: 11px; color: var(--pz-muted); margin-top: 5px; }

.pz-prodgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 30px;
}
/* pz: Spaltenzahl folgt der Datenlage (Lehre A2/spanl) */
.pz-prodgrid-1 { grid-template-columns: minmax(0, 340px); }
.pz-prodgrid-2 { grid-template-columns: repeat(2, 1fr); }
.pz-prodgrid-3 { grid-template-columns: repeat(3, 1fr); }

/* Reihenabstand liegt am Grid-gap - Wrapper und Karte tragen KEINEN eigenen
   (Lehre F.5: nie zwei Ebenen stapeln, kein :last-child) */
.pz-prodgrid .product-wrapper { margin: 0; min-width: 0; }
.pz-prodgrid .productbox,
.pz-prodgrid .productbox-column { margin-bottom: 0; }
/* ⚠️ Hier standen bis 20.08. `border: 0; background: transparent` — beides ist
   entfallen, weil die Karte seit Ben/K6 eine eigene, leise Flaeche traegt
   (Kartenplatte generisch in pz-base.css unter .productbox-column, damit
   Startseite / Kategorie / Suche / Merkzettel dieselbe Karte zeigen —
   Fehlerregister 17). Wer sie hier wieder abschaltet, hat die Karte auf der
   Startseite erneut unsichtbar gemacht. */

/* Bildwechsel aus (Lehre F.4: NUR Opacity festnageln, Transforms der Bilder
   NIE anfassen). Rahmen/Schatten des Hovers gehoeren zur Kartenplatte und
   werden dort gesetzt — NOVAs eigener Hover-Schatten ist in pz-base
   ueber .productbox-inner::before abgeschaltet. */
.pz-prodgrid .productbox img.first { opacity: 1 !important; }
.pz-prodgrid .productbox img.second { opacity: 0 !important; }
.pz-prodgrid .productbox:hover img.first { opacity: 1 !important; }
.pz-prodgrid .productbox:hover img.second { opacity: 0 !important; }
.pz-prodgrid .productbox .productbox-variations { display: none !important; }

/* Bildbuehne (weiss + 1px, Seitenverhaeltnis 4/3) und die Abstandskette der
   Karte stehen seit 19.08. GENERISCH in pz-base.css unter .productbox -
   Fehlerregister 17: keine zweite Fassung desselben Fixes. */

/* Merken/Vergleichen-Overlay bleibt aus - die Mockup-Karte ist bewusst ruhig
   (Merkzettel bleibt auf der Artikelseite erreichbar) */
.pz-prodgrid .productbox-quick-actions { display: none !important; }

/* Typo der Karte */
.pz-prodgrid .productbox-caption .productbox-title,
.pz-prodgrid .productbox-caption a {
  font-family: var(--pz-serif);
  font-size: 20.5px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--pz-ink);
}
.pz-prodgrid .price,
.pz-prodgrid .price_wrapper .price {
  font-size: 19px;
  font-weight: 600;
  color: var(--pz-ink);
  font-family: var(--pz-sans);
}
.pz-prodgrid .price_wrapper .strike,
.pz-prodgrid .price_wrapper del {
  font-size: 13px;
  color: var(--pz-muted); /* pz: 21.08. heller Grund -> --pz-muted (muted-d misst hier 2,45:1) */
}
.pz-prodgrid .vat_info,
.pz-prodgrid .vat-info,
.pz-prodgrid small {
  font-size: 11px;
  color: var(--pz-muted);
}

/* pz: 20.08./E1 — der Karten-CTA steht jetzt GENERISCH in pz-base.css
   (Abschnitt "KARTEN-CTA ZUM ARTIKEL"), weil dieselbe Karte auf Startseite,
   Kategorie, Suche und Merkzettel rendert. Hier stand er bis heute als
   einzige Fassung; eine zweite daneben waere Fehlerregister 17. */

/* ============================================================================
   pz: SET-BAND (Mockup .setband, Z. 152-163 CSS / 435-481 Markup) — Neubau
   20.08., nachdem der Datenimport die Kategorie "Schmucksets" mit drei
   Artikeln gebracht hat. Markup + Datenweg: page/index.tpl.

   SEKTIONSKETTE (Skalen-Regel 3 aus pz-base: an einer HARTEN Farbkante
   behaelt jede Seite ihr eigenes Mass):
     "Aus dem Perlenzentrum"  --pz-sek-halb (64) --> | ivory -> ink |
     Set-Band                 --pz-sek-band (96) innen oben und unten
     | ink -> ivory-2 |       --pz-sek-halb (64) --> Vor-Ort-Band
   Das ist exakt das Kantenmuster, das diese Seite an ihrer anderen harten
   Kante schon traegt (Vor-Ort-Band 64 | ink | Footer 96) — und dasselbe
   Muster wie auf der Artikelseite um das dunkle Pflegeband. Nachbarsektionen
   bleiben deshalb UNVERAENDERT; das Band bringt sein Mass selbst mit.
   Das Band ist bewusst KEINE .pz-section: die Klasse erzwingt Kopfmass 0 +
   --pz-sek unten, ein Band traegt aber beidseitig sein Bandmass.

   INNENRHYTHMUS (76/36/30/24/16/11/20/5 px) sind die Mockup-Werte. Sie
   kommen bewusst NICHT aus der Sektions-Skala — die misst Sektionsgrenzen,
   nicht Karten- und Bandinnenleben (dieselbe Begruendung wie --pz-card-pad
   in pz-base.css). */

.pz-setband {
  background: var(--pz-ink);
  color: #f2ede4;
  padding: var(--pz-sek-band) 0;
}
.pz-setband h2 { color: #f7f2e9; }
/* pz: 21.08. — dunkles Band holt den Flaechen-Ton fuer den <em>-Akzent
   zurueck (6,32:1 auf --pz-ink); die Basisregel traegt --pz-gold-text,
   der auf dunklem Grund nur 3,46:1 misst. Siehe pz-base.css. */
.pz-setband h2 em { color: var(--pz-gold); }

.pz-setband-price { text-align: right; }
.pz-setband-big {
  display: block;
  font-family: var(--pz-serif);
  font-size: 100px;
  line-height: .88;
  color: var(--pz-gold);
  margin-bottom: 12px;
  white-space: nowrap;
}
.pz-setband-strike {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8c8175;
}
.pz-setband-strike s { margin-right: 10px; }

.pz-setgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* min-width:0 auf Grid-Kind UND Formular: der Artikelname ist unumbrechbar
   lang (Fehlerregister 15 / Lehre I.3) */
.pz-setcard { min-width: 0; }
.pz-setcard-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

/* Bildbuehne 1:1 auf --pz-ink-3.
   ⚠️ BEWUSST OHNE HOVER-ZOOM (Fehlerregister 2): die Rabatt-Fahne sitzt wie
   im Mockup in der Bildecke. Ohne Zoom und ohne Radius kann sie weder
   angeschnitten noch mitgerissen werden — nachgemessen im Ruhe- UND im
   Hover-Zustand. Wer hier je einen Zoom ergaenzt, rueckt zuerst die Fahne ein. */
.pz-setcard-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--pz-ink-3);
  overflow: hidden;
}
.pz-setcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-setcard-save {
  position: absolute;
  /* pz: FAHNE EINGERUECKT WIE DAS KARTEN-RIBBON (Ben 20.08./K5, Fixrunde 4:
     "die overlays muessen mehr nach innen eingedrueckt werden, von oben und
     von links / sonst sieht der uebergang zum rand hier scheisse aus").
     Der Rabatt-Wimpel des Set-Bandes war als einziges Overlay des Shops beim
     Flush-Stand 0/0 stehen geblieben — gemessen 20.08. (1440): top=0, left=0
     auf der Bildkante, waehrend `.productbox-ribbon.ribbon` (pz-base) auf
     JEDER anderen Seite 16px eingerueckt sitzt. Zwei Masse fuer denselben
     Baustein sind genau die Beliebigkeit aus Fehlerregister 3; zugleich ist
     ein Overlay AUF der Kante der Ruhezustand-Teil von Fehlerregister 2.
     Gleicher Token, gleiche Responsiv-Stufen (16/12/10) wie das Ribbon. */
  top: var(--pz-nav-halb); left: var(--pz-nav-halb);
  /* pz: Mockup-Wert ist rgba(15,13,10,.74) — BEWUSSTE ABWEICHUNG auf .92.
     Die Fahne liegt auf einem beliebigen Artikelfoto, ihr Grund ist also
     teiltransparent gegen unbekannten Untergrund. Nachgerechnet:
       Foto dunkel (heutige Set-Fotos, schwarzer Samt) -> ~9:1
       Foto hell/weisser Studiogrund -> effektiv #4d4c4a -> 4,07:1
     Der zweite Fall liegt UNTER AA, und die Fahne traegt 10px-Versalien
     (Kleinschrift, also 4,5:1 Pflicht). Mit .92 ist der Grund praktisch
     blickdicht: Worst Case #222221 -> 7,56:1, unabhaengig vom Foto.
     Optisch ist der Unterschied auf den heutigen Fotos nicht sichtbar —
     die Deckkraft ist eine Absicherung gegen kuenftige Bilder. */
  background: rgba(15, 13, 10, .92);
  /* pz: Die Kante lief bisher nur rechts und unten — das war die Logik einer
     Fahne, deren zwei andere Seiten die Bildkante SIND. Seit der Einrueckung
     schwebt sie frei; zwei von vier Kanten waeren dann ein halber Rahmen.
     Deshalb rundum, gleiche Staerke und gleicher Ton wie vorher. */
  border: 1px solid rgba(185, 141, 79, .6);
  color: var(--pz-gold-lt);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  padding: 7px 11px;
  white-space: nowrap;
}

.pz-setcard-lbl {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pz-gold-lt);
  margin: 24px 0 11px;
}
/* pz: FESTES Titelmass statt datenabhaengiger Hoehe (FEHLERMUSTER.md Zeile 4).
   Zwei Zeilen sind zugleich Deckel UND Mindestmass — Preis, MwSt-Zeile und
   CTA aller drei Karten stehen damit auf derselben Hoehe, egal wie lang der
   Artikel heisst. Mass und Zeilenzahl 1:1 aus dem Mockup (`min-height:52px`),
   Deckelung wie bei der Hero-Karte (line-clamp 2, Auslassungspunkte). Am
   lebenden Objekt geprueft: alle drei echten Wawi-Namen passen in zwei
   Zeilen; ein Drei-Zeilen-Reservoir liess in JEDER Karte eine Leerzeile
   stehen (im Screenshot gesehen).

   ⚠️ REGEL FUER JEDEN BREAKPOINT (Gate-Befund 20.08.): `-webkit-line-clamp`
   und `min-height` sind ein PAAR und muessen zusammen gesetzt werden.
   `line-clamp` setzt die Auslassungspunkte nach Zeile N — es SCHNEIDET aber
   nicht, das macht `overflow:hidden` gegen die Boxhoehe. Ist die Reserve
   groesser als N Zeilen, rendert Zeile N+1 sichtbar UNTER der schon
   gesetzten Ellipse ("Geisterzeile"); ist sie kleiner, entsteht Totflaeche.
   Wer unten eine Stufe ergaenzt, setzt deshalb beide Werte oder keinen. */
.pz-setcard-n {
  font-family: var(--pz-serif);
  font-size: 20.5px;
  line-height: 1.25;
  font-weight: 500;
  color: #f2ede4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px; /* 2 x 20.5px x 1.25, gerundet = Mockup-Mass */
}
.pz-setcard-n a { color: inherit; }
.pz-setcard-n a:hover { color: var(--pz-gold-lt); }
.pz-setcard-p {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-top: 16px;
}
.pz-setcard-p b { font-size: 19px; font-weight: 600; color: #fff; }
.pz-setcard-p s { font-size: 13px; color: #8c8175; }
.pz-setband .pz-card-vat { color: #8c8175; }
/* pz: Die dunkle Fassung des Karten-CTAs (.pz-cardcta-d) steht seit 20.08./E1
   bei der Grundform in pz-base.css.
   Die CTA-Zeile fuellt jetzt die Kartenbreite (vorher `align-self:flex-start`,
   also inhaltsbreit) und wird nach unten geschoben: die drei Set-Karten haben
   unterschiedlich lange Namen, ihre CTAs standen dadurch auf drei Hoehen.
   `margin-top:auto` in der gestreckten Flex-Spalte legt sie auf EINE Kante —
   und ist die zulaessige Form davon (Fehlerregister 5 warnt vor margin-BOTTOM
   am letzten Element, nicht vor dem Auto-Zwischenraum). */
.pz-setband .pz-cardcta-row { align-self: stretch; margin-top: auto; padding-top: 20px; }

.pz-setfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* 76px ist der Mockup-Wert UND exakt --pz-sek-lead — deshalb hier das
     Token: identische Desktop-Optik, aber die Mobilstufen (48/32) ziehen
     automatisch mit, ohne dritte Media-Query. */
  margin-top: var(--pz-sek-lead);
  padding-top: 36px;
  border-top: 1px solid var(--pz-line-d);
}
.pz-setfoot p { font-size: 13.5px; color: #9d9286; max-width: 56ch; margin: 0; min-width: 0; }
.pz-setfoot p b { color: var(--pz-gold-lt); font-weight: 600; }

/* Keine NOVA-Unterstriche im Band */
.pz-setcard a, .pz-setcard a *, .pz-setfoot a { text-decoration: none; }

/* ============ Beratungs-Band ============ */

.pz-advice { background: var(--pz-ivory-2); }
/* pz: 21.08. — `minmax(0, …)` statt blankem `fr` (Fehlerregister 15).
   Ein `1fr`-Track hat als Untergrenze die MIN-CONTENT-Breite seines Inhalts
   und schrumpft nie darunter. Hier steckt in der linken Spalte das
   Knopf-Raster mit `minmax(min(300px, 100%), 1fr)`; dessen `100%` ist
   waehrend der Intrinsic-Berechnung unbestimmt, also gewinnt die 300px-Seite
   und die Spalte meldet 303px Mindestbreite. Gemessen bei 320 (21.08.):
   Inhaltsspalte 20…300 (280px), Grid-Zelle 20…323 -> scrollWidth 323 bei
   clientWidth 320. Mit `minmax(0, …)` darf die Spalte unter ihre
   Min-Content-Breite und das Knopf-Raster rechnet sein `100%` gegen eine
   bestimmte Breite — dort greift dann `min()` wie beabsichtigt. */
.pz-advice .pz-advice-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 96px;
  align-items: center;
}
.pz-advice h2 { font-size: 50px; margin: 22px 0 26px; }
.pz-advice .pz-eyebrow { display: block; }
.pz-advice .pz-lead + .pz-lead { margin-top: 18px; }
.pz-advice-btns { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; }

.pz-infolist {
  background: var(--pz-ivory);
  border: 1px solid var(--pz-line);
  padding: 14px 40px;
  list-style: none;
  margin: 0;
}
.pz-infolist li {
  display: flex;
  gap: 22px;
  padding: 30px 0;
  align-items: flex-start;
}
.pz-infolist li + li { border-top: 1px solid var(--pz-line); }
.pz-infolist svg { width: 24px; height: 24px; color: var(--pz-gold); flex: none; margin-top: 3px; }
.pz-infolist li > div { min-width: 0; }
.pz-infolist b {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* pz: 21.08. Text-Gold statt Flaechen-Gold — .pz-infolist b 10,5px auf --pz-ivory:
     --pz-gold war 2,74:1, --pz-gold-text ist 5,01:1. Siehe pz-base.css. */
  color: var(--pz-gold-text);
  margin-bottom: 8px;
}
.pz-infolist-v {
  font-family: var(--pz-serif);
  font-size: 27px;
  color: var(--pz-ink);
  line-height: 1.15;
}
.pz-infolist span { display: block; font-size: 13.5px; color: var(--pz-muted); line-height: 1.6; }

/* ============ Responsive (Mockup ist Desktop-only — eigene Entscheidungen) ============ */

/* Tablet ~768: Hero stapelt, Trust 2x2, Kacheln 2-spaltig */
@media (max-width: 991.98px) {
  .pz-hero-txt {
    width: 100%;
    min-height: 0;
    padding: 64px 0;
  }
  .pz-hero h1 { font-size: 52px; }
  .pz-hero-img {
    position: relative;
    width: 100%;
    height: 340px;
  }
  .pz-hero-fade { background: linear-gradient(0deg, var(--pz-ink) 0%, rgba(18,16,13,0) 45%); }
  .pz-hero-card { left: 20px; right: 20px; bottom: 20px; min-width: 0; }

  .pz-trust .pz-wrap { grid-template-columns: 1fr 1fr; }
  .pz-trust .pz-wrap > div { padding: 22px 16px 22px 0; }
  .pz-trust .pz-wrap > div + div { padding-left: 0; border-left: 0; }
  .pz-trust .pz-wrap > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--pz-line); }

  .pz-sec-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
  .pz-sec-head h2 { font-size: 36px; }
  .pz-cats {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 220px;
  }
  .pz-cat { grid-column: auto; grid-row: auto; }
  /* pz: Review R3 / Fehlerregister 3b — der Vollbreiten-Spann von Kachel A
     machte aus 6 Kacheln die Reihenfolge [A][B C][D E][F] und liess F als
     WAISE mit 48 % Leerflaeche daneben stehen (gemessen 768).
     6 Kacheln in 2 Spalten sind 3 volle Reihen: die Spaltenzahl folgt der
     Item-Zahl, also faellt der Spann hier weg. */
  .pz-cat-a { grid-column: auto; }
  .pz-cat h3 { font-size: 24px; }
  /* Kachel A ist ab hier eine Kachel wie jede andere — ihre Desktop-
     Sonderwerte (46px h3, 40px Innenabstand) muessen mit weg, sonst traegt
     eine gleich grosse Kachel andere Masse als ihre Nachbarn. */
  .pz-cat-a h3 { font-size: 24px; }
  .pz-cat-txt,
  .pz-cat-a .pz-cat-txt { left: 20px; right: 20px; bottom: 18px; }
}

/* Tablet: Produktgrid 2-spaltig, Beratung stapelt */
@media (max-width: 991.98px) {
  .pz-prodgrid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }

  /* pz: SET-BAND TABLET — die Spaltenzahl folgt der Item-Zahl
     (Fehlerregister 3b): drei Sets in zwei Spalten liessen eine Waise mit
     50 % Leerflaeche stehen, deshalb bleiben es drei Spalten mit kleinerem
     Gap und kleinerer Titelschrift statt eines 2er-Rasters. */
  .pz-setgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* pz: 576-991 — drei Spalten auf Tabletbreite, Titelspalte nur noch 216px
     (gemessen 768). Die 60px Reserve standen hier schon, der Deckel blieb
     aber bei den 2 Zeilen der Basisregel: gemessen 20.08. bei 768 Ellipse in
     Zeile 2 UND Restwort sichtbar in Zeile 3, bei 900 stattdessen 20px
     Totflaeche. Beide Werte gehen jetzt auf DREI Zeilen.
     Warum 3 und nicht 2 (40px): die drei Set-Namen unterscheiden sich erst
     im letzten Drittel ("... 3-Farbig Rainbow/Tricolore/Top Luester") —
     gemessen brauchen 2 von 3 bei 216px Spaltenbreite genau 3 Zeilen. Ein
     Deckel bei 2 Zeilen wuerde also das unterscheidende Wort abschneiden und
     drei fast identische Titel erzeugen. Der Preis dafuer ist eine Leerzeile
     beim kuerzesten Namen — das ist die gewollte feste Reserve aus
     FEHLERMUSTER.md Zeile 4, nicht Totflaeche. */
  .pz-setcard-n {
    font-size: 16px;
    -webkit-line-clamp: 3;
    min-height: 60px; /* 3 x 16 x 1.25 */
  }
  .pz-setcard-lbl { margin: 16px 0 9px; }
  .pz-setcard-p b { font-size: 17px; }
  /* Der Grosspreis ist das einzige Element, das mobil aus dem Band laufen
     kann (nowrap, Serif 100px). Gemessen wird er deshalb auf jeder Breite
     gegen die Wrap-Kante. */
  .pz-setband-big { font-size: 64px; }
  .pz-setband-price { text-align: left; }
  .pz-setfoot { gap: 24px; }
  .pz-advice .pz-advice-wrap {
    grid-template-columns: minmax(0, 1fr); /* pz: 21.08. — s. o., 320px-Ueberlauf */
    gap: 48px;
  }
  .pz-advice h2 { font-size: 36px; }
  .pz-infolist { padding: 8px 24px; }
  .pz-infolist li { padding: 20px 0; }
}

/* Telefon ~390: einspaltig, kompakter */
@media (max-width: 575.98px) {
  .pz-prodgrid { grid-template-columns: 1fr; }
  .pz-advice h2 { font-size: 30px; }
  .pz-infolist-v { font-size: 22px; }
  .pz-hero h1 { font-size: 40px; }
  .pz-hero-txt { padding: 48px 0; }
  .pz-hero-img { height: 260px; }
  .pz-trust .pz-wrap { grid-template-columns: 1fr; }
  .pz-trust .pz-wrap > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .pz-trust .pz-wrap > div { padding: 14px 0; }
  .pz-trust .pz-wrap > div + div { border-top: 1px solid var(--pz-line); }
  .pz-cats { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .pz-sec-head h2 { font-size: 30px; }

  /* Set-Band einspaltig — drei volle Karten statt dreier Briefmarken */
  .pz-setgrid { grid-template-columns: 1fr; gap: 32px; }
  .pz-setcard-n { font-size: 20.5px; min-height: 0; -webkit-line-clamp: 4; }
  .pz-setcard-lbl { margin: 20px 0 10px; }
  .pz-setcard-p b { font-size: 19px; }
  .pz-setband-big { font-size: 52px; }
  .pz-setfoot { flex-direction: column; align-items: flex-start; }
}

/* pz: keine NOVA-Unterstriche in Hero-Card, Kacheln und Kartentiteln
   (mobil gemessen 19.08.: hero-card-Titel unterstrichen) */
/* ⚠️ Fixrunde 8b: `.pz-cardcta` ist aus dieser Liste raus — der Baustein
   bringt sein `text-decoration: none` seit dem Neubau selbst mit
   (pz-base.css, .pz-cardcta). Zwei Fassungen derselben Aussage sind
   Fehlerregister 17: wer die eine liest, haelt die Stelle fuer erklaert. */
.pz-hero-card, .pz-hero-card *,
.pz-cat, .pz-cat *,
.pz-prodgrid .productbox-caption a { text-decoration: none; }

/* pz: Die frueher hier stehende Mobil-Sonderregel fuer den Karten-CTA
   (min-height 44 + eigene Polster) ist mit dem Neubau in pz-base entfallen:
   der CTA traegt jetzt projektweit --pz-ctl-h-sm (46px) und ist damit auf
   JEDER Breite ein sicheres Tap-Ziel — eine Ausnahme weniger in der Kette. */

/* ============================================================================
   pz: MOBILE KNOPFPAARE — HERO (A2) UND BERATUNG (A3), Ben 20.08.
     A2 "passend gleichgross nebeneinander"      (Hero, ~390)
     A3 "gleichgross ueber containerbreite untereinander" (Beratung)

   BEFUND, gemessen 20.08. (390): beide Paare waren `display:flex; flex-wrap`
   mit inhaltsbreiten Knoepfen — also genau das Muster aus Fehlerregister 3b.
   Hero: 267px + 196px stapelten linksbuendig untereinander, rechts daneben
   blieben 83 bzw. 154px Weissflaeche stehen; Beratung dasselbe Bild mit
   303px/221px. Zwei Knoepfe einer Gruppe in zwei verschiedenen Breiten.

   BEIDE bekommen ein FUELLENDES RASTER, aber mit unterschiedlicher Spurregel —
   die Spaltenzahl folgt dem laengsten Text, nicht dem Gefuehl:
     Hero      2 feste Spalten. "Kunden-Liebling" ist kurz, "Sortiment
               entdecken" bricht auf zwei Zeilen um — beide Zellen sind
               trotzdem gleich breit UND gleich hoch, weil die Grid-Reihe die
               Hoehe traegt (Fehlerregister 11: EINE Hoehenquelle, nicht zwei
               Textumbruch-Hoehen).
     Beratung  auto-fit mit `minmax(min(300px,100%),1fr)`. 300px ist die
               gemessene Breite des laengsten Knopfs ("Ladengeschäft &
               Kontakt", 303px inkl. Polster und Pfeil — auf 300 abgelegt,
               weil das Polster mobil dasselbe bleibt). Ergebnis: ab ~616px
               Containerbreite zwei gleich breite Spalten (768: 2x356),
               darunter EINE Spalte ueber die volle Breite — genau Bens
               Vorgabe, ohne zweiten Breakpoint. `min()` verhindert den
               Ueberlauf auf sehr schmalen Geraeten (<340px).
   Die Knopfhoehe kommt in beiden Faellen aus --pz-ctl-h (pz-base). */
@media (max-width: 991.98px) {
  .pz-advice-btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
  }
  .pz-advice-btns .pz-btn { width: 100%; }
}
@media (max-width: 575.98px) {
  .pz-hero-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pz-hero-cta .pz-btn {
    width: 100%;
    padding: 0 12px;
    gap: 8px;
    /* Umbruch ausdruecklich erlaubt: die Zelle ist schmaler als die Zeile.
       Die Hoehe der Gruppe leidet nicht darunter (Grid-Reihe, s. o.). */
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}