/* produkte.css — Produktgruppen-Seiten (gastronomie, backbetriebe, pfanne).
   Lädt nach tokens.css + global.css + home.css + technologie.css. */

/* ---- Intro mit Sprungnavigation ---- */
.produkt-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start;}
.produkt-intro h2{font-size:clamp(1.8rem,3vw,var(--fs-2xl));margin-bottom:var(--space-6);line-height:1.15;}
.produkt-intro p{color:var(--color-text-muted);margin-bottom:var(--space-4);}
.produkt-intro-media img{width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:var(--radius-md);display:block;}
.sprungnav{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);}
.sprungnav a{display:inline-block;font-family:var(--font-heading);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-ink);border:1px solid var(--color-border);padding:var(--space-2) var(--space-4);text-decoration:none;transition:border-color .2s,color .2s;}
.sprungnav a:hover{border-color:var(--color-accent);color:var(--color-accent);}

/* ---- Produkt-Sektionen ---- */
.produkt{scroll-margin-top:var(--space-8);}
.produkt-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start;}
.produkt-text h2{font-size:clamp(1.6rem,2.6vw,var(--fs-xl));margin-bottom:var(--space-3);line-height:1.15;}
.produkt-sub{font-family:var(--font-heading);font-size:var(--fs-sm);color:var(--color-accent);letter-spacing:.3px;margin-bottom:var(--space-6);}
.produkt-text p{color:var(--color-text-muted);margin-bottom:var(--space-4);}
.produkt-text .linkacc{margin-top:var(--space-6);}
.vorteil-liste{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-2);}
.vorteil-liste li{position:relative;padding-left:var(--space-4);font-size:var(--fs-sm);color:var(--color-text);line-height:var(--lh-body);}
.vorteil-liste li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--color-accent);}
.produkt-media{margin:0;}
.produkt-media img{width:100%;aspect-ratio:4 / 3;object-fit:cover;object-position:center;border-radius:var(--radius-md);background:var(--color-white);display:block;}
.produkt-media img.img--freisteller{aspect-ratio:auto;height:auto;object-fit:fill;border:1px solid var(--color-border);}
.produkt-media figcaption{font-family:var(--font-heading);font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-3);}

/* ---- Varianten / Technische Daten ---- */
.varianten{margin-top:var(--space-12);border-top:1px solid var(--color-border);}
.varianten-title{font-family:var(--font-heading);font-weight:var(--fw-regular);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-text-muted);padding:var(--space-6) 0 var(--space-2);}
.variante{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-6);padding:var(--space-6) 0;border-bottom:1px solid var(--color-border);}
.variante h3{font-family:var(--font-heading);font-weight:var(--fw-regular);font-size:var(--fs-base);letter-spacing:var(--ls-heading);color:var(--color-ink);line-height:1.3;}
.variante h3 .tag{display:inline-block;margin-top:var(--space-2);font-size:var(--fs-xs);letter-spacing:.3px;color:var(--color-accent);border:1px solid var(--color-accent);padding:2px var(--space-2);}
.variante dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) var(--space-6);margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);}
.variante dt{color:var(--color-text-muted);}
.variante dd{margin:0;color:var(--color-text);}
.hinweis{font-family:var(--font-heading);font-size:var(--fs-xs);color:var(--color-text-muted);letter-spacing:.3px;margin-top:var(--space-6);max-width:70ch;}
.hinweis a{color:var(--color-accent);}

/* ---- Kennzahlen (Pfanne) ---- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);}
.stat{border-top:2px solid var(--color-accent);padding-top:var(--space-6);}
.stat .stat-number{font-size:clamp(2.4rem,4vw,var(--fs-4xl));display:block;margin-bottom:var(--space-3);}

/* ---- Zitat ---- */
.zitat{margin:0;padding-left:var(--space-6);border-left:3px solid var(--color-accent);max-width:70ch;}
.zitat p{font-family:var(--font-heading);font-size:var(--fs-md);line-height:var(--lh-heading);color:var(--color-ink);margin-bottom:var(--space-3);}
.zitat cite{font-style:normal;font-size:var(--fs-xs);color:var(--color-text-muted);}
.section--dark .zitat p{color:var(--color-off-white);}
.section--dark .zitat cite{color:rgba(252,252,252,.6);}
.zitat-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;}
.zitat-block p.zitat-text{color:rgba(252,252,252,.8);margin-bottom:var(--space-6);}
.zitat-links{display:flex;flex-wrap:wrap;gap:var(--space-4);}

/* ---- Fachhändler ---- */
.haendler-title{font-size:clamp(1.6rem,2.6vw,var(--fs-xl));margin-bottom:var(--space-4);line-height:1.15;}
.haendler-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);}
.haendler{border-top:1px solid var(--color-border);padding-top:var(--space-4);}
.haendler h3{font-family:var(--font-heading);font-weight:var(--fw-regular);font-size:var(--fs-sm);letter-spacing:var(--ls-heading);color:var(--color-ink);margin-bottom:var(--space-2);line-height:1.35;}
.haendler p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--color-text-muted);margin:0;}
.haendler a{color:var(--color-ink);text-decoration:none;border-bottom:1px solid var(--color-border);}
.haendler a:hover{color:var(--color-accent);border-color:var(--color-accent);}

/* ---- Katalog & Bezug ---- */
.bezug-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start;}
.bezug-grid h3{font-family:var(--font-heading);font-weight:var(--fw-regular);font-size:var(--fs-lg);letter-spacing:var(--ls-heading);color:var(--color-ink);margin-bottom:var(--space-4);}
.bezug-grid p{color:var(--color-text-muted);margin-bottom:var(--space-6);}
.katalog{display:flex;gap:var(--space-6);align-items:flex-start;}
.katalog img{width:150px;height:auto;flex-shrink:0;border-radius:var(--radius-sm);box-shadow:var(--shadow-raised);display:block;}
.katalog-meta{font-family:var(--font-heading);font-size:var(--fs-xs);color:var(--color-text-muted);letter-spacing:.3px;display:block;margin-top:var(--space-3);}

/* ---- Buttons: Rahmen für Sekundär-Button (global.css setzt border transparent) ---- */
.btn--secondary{border-color:var(--color-ink);}

/* ---- CTA ---- */
.produkt-cta h2{font-size:clamp(1.8rem,3vw,var(--fs-2xl));margin-bottom:var(--space-4);line-height:1.15;}
.produkt-cta p{color:rgba(252,252,252,.8);max-width:60ch;margin-bottom:var(--space-8);}
.produkt-cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}
.section:not(.section--dark) .produkt-cta p{color:var(--color-text-muted);}

/* ---- Responsive ---- */
@media(max-width:900px){
  .haendler-grid{grid-template-columns:1fr 1fr;}
  .produkt-intro,.produkt-layout,.bezug-grid,.zitat-block{grid-template-columns:1fr;gap:var(--space-8);}
  .produkt-media img{max-width:100%;}
  .stat-grid{grid-template-columns:1fr;gap:var(--space-6);}
}
@media(max-width:760px){
  .haendler-grid{grid-template-columns:1fr;}
  .variante{grid-template-columns:1fr;gap:var(--space-3);}
  .variante dl{grid-template-columns:1fr;gap:0;}
  .variante dt{margin-top:var(--space-2);}
  .katalog{flex-direction:column;}
}