/* ============================================================
   KOBOLDMAN.DE — Produktseiten-Vorlage
   ------------------------------------------------------------
   Gehoert zu ops/produktseiten-bauen.py. Wird NUR von den fuenf
   Geraeteseiten (VK7, VR7, VG100+, VM7, VT300) geladen.
   Alle Klassen tragen das Praefix ps- — styles.css bleibt
   unangetastet, keine andere Seite veraendert sich.

   Reihenfolge der Abschnitte (Wow -> Entscheidung):
   Hero · Icon-Leiste · Einsatzbereiche · Moeglichkeiten ·
   Harry · Set/Preis · Technik · FAQ · Abschluss · Andere Modelle
   ============================================================ */

/* ---------- Hero ---------- */
.ps-hero{padding-block:20px 0}
.ps-crumbs + .ps-hero{padding-top:14px}
.ps-hero-stage{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(540px,48vw,640px);
  border-radius:var(--radius-lg);
  background:var(--cream);
}
.ps-hero-bild{position:absolute; inset:0; margin:0}
.ps-hero-bild img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--ps-fokus, 70% 60%);
}
/* Heller Verlauf von links: Text steht auf Papier, das Geraet
   (rechtes Bilddrittel) bleibt frei. */
.ps-hero-stage::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(251,250,246,.97) 0%,
    rgba(251,250,246,.93) 32%,
    rgba(251,250,246,.62) 47%,
    rgba(251,250,246,0) 62%);
}
.ps-hero-text{position:relative; z-index:2; padding:clamp(32px,4vw,56px); max-width:var(--ps-textbreite, 600px)}
.ps-h1{
  font-size:clamp(2.2rem,4.3vw,3.6rem); line-height:1.06;
  margin-bottom:18px; text-wrap:balance; color:var(--ink);
}
.ps-h1 .eyebrow{display:flex; width:max-content; margin-bottom:16px; font-size:.92rem}
.ps-h1-zeile{display:block}
.ps-sub{font-size:1.15rem; color:var(--ink-soft); max-width:44ch; margin-bottom:26px; text-wrap:pretty}
.ps-ctas{display:flex; gap:12px; flex-wrap:wrap}

/* Handschrift-Akzent (Caveat, max. zwei je Seite) */
.ps-hand{
  display:inline-block;
  font-family:'Caveat', cursive; font-weight:700;
  font-size:clamp(1.45rem,2.2vw,1.8rem); line-height:1.05;
  color:var(--green-deep);
  transform:rotate(-3deg);
}
.ps-hero-text .ps-hand{margin:0 0 18px 4px}

@media (max-width:900px){
  .ps-hero-stage{display:block; min-height:0; overflow:visible; background:none; border-radius:0}
  .ps-hero-stage::before{display:none}
  .ps-hero-bild{position:relative; aspect-ratio:3/2; border-radius:var(--radius-lg); overflow:hidden}
  .ps-hero-text{padding:26px 0 0; max-width:none}
}

/* ---------- Vertrauensleiste ---------- */
.ps-trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-top:16px; padding:0; list-style:none;
}
.ps-trust li{
  display:flex; gap:12px; align-items:center;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:14px 16px;
  font-size:.9rem; line-height:1.35; color:var(--ink-soft);
}
.ps-trust strong{display:block; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:1.02rem}
.ps-trust a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.ps-trust-ic{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-deep);
}
.ps-trust-ic svg{width:20px; height:20px}
.ps-trust .harry-avatar{width:38px; height:38px; flex:0 0 38px; border:1.5px solid var(--green)}
@media (max-width:900px){.ps-trust{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.ps-trust{grid-template-columns:1fr}}

/* Preis-Zusatz "inkl. MwSt." — steht NACH dem Preis-Textknoten,
   damit aktionen.js nur die Zahl tauscht und der Zusatz bleibt. */
.ps-mwst{font-family:var(--font-body); font-size:.76rem; font-weight:500; color:var(--muted); white-space:nowrap}
.ps-mwst-block{display:block; margin-top:2px}

/* ---------- Icon-Leiste ---------- */
.ps-icons{padding-block:clamp(40px,5vw,64px)}
.ps-icons-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; list-style:none; padding:0; margin:0}
.ps-icons-grid li{display:flex; flex-direction:column; gap:8px}
.ps-icon{
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-deep);
}
.ps-icon svg{width:24px; height:24px}
.ps-icons-grid h3{font-size:1.08rem; margin:6px 0 0; color:var(--ink)}
.ps-icons-grid p{font-size:.93rem; margin:0; color:var(--ink-soft)}
@media (max-width:900px){.ps-icons-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ps-icons-grid{grid-template-columns:1fr; gap:20px}}

/* ---------- Szenenbild / Platzhalter (gemeinsam) ---------- */
.ps-bild{display:block; width:100%; height:100%; margin:0}
.ps-bild img{width:100%; height:100%; object-fit:cover}
.ps-ph{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:18px; text-align:center;
  background:repeating-linear-gradient(135deg, var(--cream) 0 14px, var(--cream-warm) 14px 28px);
  color:var(--ink-soft);
}
.ps-ph-datei{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.76rem;
  color:var(--ink); background:rgba(255,255,255,.85);
  padding:3px 8px; border-radius:var(--radius-sm);
}
.ps-ph-motiv{font-size:.86rem; max-width:36ch; line-height:1.4}

/* ---------- Einsatzbereiche ---------- */
.ps-bereiche{background:var(--cream)}
.ps-bereiche-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:24px}
.ps-bereich{
  grid-column:span 3;
  display:flex; flex-direction:column;
  background:var(--paper); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.ps-anz-3 .ps-bereich{grid-column:span 2}
.ps-anz-5 .ps-bereich:nth-child(n+3){grid-column:span 2}
.ps-bereich-bild{position:relative; aspect-ratio:3/2; background:var(--cream-warm)}
.ps-bereich-label{
  position:absolute; left:14px; top:14px; z-index:1;
  background:rgba(251,250,246,.94); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:7px 12px; border-radius:var(--radius-full);
}
.ps-bereich-bild .ps-hand{position:absolute; left:18px; bottom:14px; z-index:1; background:rgba(251,250,246,.9); padding:2px 10px 4px; border-radius:var(--radius-md)}
.ps-bereich-body{padding:20px 22px 24px}
.ps-bereich-body h3{margin:0 0 10px; color:var(--ink)}
.ps-bereich-body p{margin:0; font-size:.96rem}
.ps-stichworte{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 12px}
.ps-stichworte li{
  font-size:.8rem; font-weight:600; color:var(--green-deep);
  background:var(--green-soft); padding:4px 10px; border-radius:var(--radius-full);
}
.ps-verweis{
  display:flex; gap:20px; align-items:center;
  margin-top:24px; padding:14px 22px 14px 14px;
  background:var(--paper); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  transition:border-color .18s ease;
}
.ps-verweis:hover{border-color:var(--green)}
.ps-verweis-bild{flex:0 0 180px; aspect-ratio:3/2; border-radius:var(--radius-md); overflow:hidden}
.ps-verweis strong{display:block; font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.08rem; margin-bottom:2px}
.ps-verweis span{font-size:.93rem}
.ps-verweis .lead-link{display:inline-block; margin-top:6px}
.ps-bereiche .frag-harry{margin:24px 0 0}
@media (max-width:900px){
  .ps-bereiche .ps-bereiche-grid .ps-bereich{grid-column:auto}
  .ps-bereiche-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .ps-bereiche-grid{grid-template-columns:1fr}
  .ps-verweis{flex-direction:column; align-items:flex-start; padding:14px}
  .ps-verweis-bild{flex:none; width:100%}
}

/* ---------- Moeglichkeiten ---------- */
.ps-moeg-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.ps-moeg-karte{
  display:flex; flex-direction:column;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  scroll-margin-top:100px;
}
.ps-moeg-bild{position:relative; aspect-ratio:4/3}
.ps-moeg-bild.product-media{border-radius:0}
.ps-moeg-body{padding:22px 24px 26px}
.ps-moeg-body h3{margin:0 0 8px; color:var(--ink)}
.ps-moeg-body p{margin:0; font-size:.98rem}
.ps-moeg-body .ps-klein{margin-top:10px; font-size:.88rem; color:var(--ink-soft)}
@media (max-width:700px){.ps-moeg-grid{grid-template-columns:1fr}}

/* ---------- Harry ---------- */
.ps-harry{background:var(--cream); overflow:hidden}
.ps-harry-grid{
  display:grid; grid-template-columns:minmax(240px,360px) 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.ps-harry-foto{position:relative; aspect-ratio:3/4}
.ps-harry-foto::before{
  content:""; position:absolute; left:6%; right:6%; bottom:4%;
  aspect-ratio:1/1; border-radius:50%; background:var(--green-soft);
}
.ps-harry-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 14px 20px rgba(60,50,20,.18));
}
.ps-zitat{margin:0 0 18px}
.ps-zitat p{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.4vw,1.9rem);
  font-weight:500; line-height:1.35; color:var(--ink); margin:0; text-wrap:pretty;
}
.ps-zitat p::before{content:"„"; color:var(--green); margin-right:2px}
.ps-zitat p::after{content:"“"; color:var(--green)}
.ps-sig{font-size:.92rem; color:var(--muted); margin-bottom:22px}
.ps-sig strong{display:block; color:var(--ink); font-family:var(--font-display); font-weight:600}
.ps-zitat-klein{
  border-left:3px solid var(--green); padding:4px 0 4px 16px; margin:0 0 26px;
  font-size:1.02rem; color:var(--ink-soft); font-style:italic;
}
.ps-passt-titel{font-size:1.08rem; margin:0 0 12px; color:var(--ink)}
.ps-passt{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; list-style:none; padding:0; margin:0}
.ps-passt li{display:flex; gap:10px; align-items:flex-start; font-size:.93rem; line-height:1.45}
.ps-passt li::before{content:"✓"; color:var(--green-deep); font-weight:700; flex:0 0 auto}
.ps-passt strong{color:var(--ink)}
.ps-passt-text{font-size:1rem; margin:0}
@media (max-width:780px){
  .ps-harry-grid{grid-template-columns:1fr}
  .ps-harry-foto{max-width:260px; width:100%; margin-inline:auto}
  .ps-passt{grid-template-columns:1fr}
}

/* ---------- Set / Preis ---------- */
.ps-set-wrap{max-width:860px; margin-inline:auto}
.ps-set-tabelle{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--paper); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.ps-set-tabelle th, .ps-set-tabelle td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
.ps-set-tabelle tr:last-child > *{border-bottom:0}
.ps-set-tabelle thead th{
  background:var(--cream-warm); color:var(--ink-soft);
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.ps-set-tabelle tbody th{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1rem}
.ps-set-tabelle .ps-fuer{font-size:.94rem; color:var(--ink-soft)}
.ps-set-tabelle .ps-preis{
  text-align:right; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.05rem;
}
.ps-set-tabelle thead .ps-preis{font-family:var(--font-body); font-size:.78rem; font-weight:600; color:var(--ink-soft)}
.ps-set-tabelle .ps-preis .ps-mwst{display:block}
.ps-set-tabelle .preis-hinweis{display:block; margin:6px 0 0 auto; width:max-content}
@media (max-width:640px){
  .ps-set-tabelle thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .ps-set-tabelle tbody tr{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:14px 16px; border-bottom:1px solid var(--border)}
  .ps-set-tabelle tbody tr:last-child{border-bottom:0}
  .ps-set-tabelle tbody th, .ps-set-tabelle tbody td{padding:0; border:0}
  .ps-set-tabelle tbody .ps-fuer{grid-column:1 / -1; grid-row:2}
}
.ps-hinweis{font-size:.9rem; color:var(--ink-soft); text-align:center; margin:14px auto 0; max-width:62ch}
.ps-einzeln{
  margin:22px 0 0; padding:16px 20px;
  background:var(--cream); border-radius:var(--radius-md);
  font-size:.93rem; line-height:1.7;
}
.ps-einzeln strong{color:var(--ink)}
.ps-sets .frag-harry{margin:24px 0 0}
.ps-sets .ps-zitat-klein{margin:28px 0 0}

.ps-preis-karte{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px);
}
.ps-preis-gross{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:clamp(2rem,3.4vw,2.6rem); line-height:1}
.ps-preis-gross .ps-ab{font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--muted); margin-right:6px}
.ps-preis-karte p{margin:10px 0 0; font-size:.96rem}
.ps-preis-karte .ps-ctas{justify-content:flex-end}
@media (max-width:700px){.ps-preis-karte{grid-template-columns:1fr} .ps-preis-karte .ps-ctas{justify-content:flex-start}}
.ps-preis-extra{margin-top:32px}

/* Aufklappbare Bloecke (Lieferumfang, Eigenschaften, Technik) */
.ps-auf{margin-top:22px; border:1.5px solid var(--border); border-radius:var(--radius-md); background:var(--paper)}
.ps-auf > summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 20px;
  font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.02rem;
}
.ps-auf > summary::-webkit-details-marker{display:none}
.ps-auf > summary::after{
  content:"+"; flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream); color:var(--green-deep); font-weight:700; font-size:1.2rem;
  transition:transform .25s ease;
}
.ps-auf[open] > summary::after{transform:rotate(45deg)}
.ps-auf > summary:focus-visible{outline:2px solid var(--green-deep); outline-offset:2px; border-radius:var(--radius-md)}
.ps-auf-inhalt{padding:0 20px 20px}
.ps-liste{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.ps-liste li{display:flex; gap:14px; align-items:flex-start; background:var(--cream); border-radius:var(--radius-md); padding:14px 16px}
.ps-liste .num{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:var(--green-deep); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
}
.ps-liste h3{font-family:var(--font-display); font-size:1rem; color:var(--ink); margin:0 0 2px; font-weight:600}
.ps-liste p{font-size:.9rem; color:var(--ink-soft); margin:0}

/* ---------- Technik ---------- */
.ps-technik{background:var(--cream)}
.ps-technik-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:48px; align-items:start}
.ps-specs-karte{background:var(--paper); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:6px 20px}
.ps-technik-grid .ps-auf{margin-top:14px}
.ps-specs{width:100%; border-collapse:collapse}
.ps-specs th, .ps-specs td{padding:12px 4px; text-align:left; border-bottom:1px solid var(--border); font-size:.94rem; vertical-align:top}
.ps-specs tr:last-child > *{border-bottom:0}
.ps-specs th{font-weight:500; color:var(--muted); width:40%; padding-right:16px}
.ps-specs td{color:var(--ink); font-weight:500}
.ps-technik .ps-extra{margin-top:18px; font-size:.98rem}
@media (max-width:900px){.ps-technik-grid{grid-template-columns:1fr; gap:28px}}

/* ---------- FAQ-Zusatz ---------- */
.ps-faq-hinweis{max-width:780px; margin:18px auto 0; font-size:.84rem; color:var(--muted); text-align:center}

/* ---------- Abschluss ---------- */
.ps-abschluss-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,64px);
  align-items:center; position:relative;
}
.ps-abschluss .final-copy h2{font-size:clamp(1.9rem,3.6vw,2.9rem); text-wrap:balance}
.ps-abschluss-bild{aspect-ratio:3/2; border-radius:var(--radius-lg); overflow:hidden; background:rgba(255,255,255,.08)}
.ps-abschluss .ps-ph{background:repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 14px, rgba(255,255,255,.04) 14px 28px); color:#d4e8c5}
.ps-abschluss .ps-ph-datei{background:rgba(255,255,255,.92); color:var(--ink)}
@media (max-width:900px){.ps-abschluss-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   SEO/GEO (29.09.2026)
   --------------------------------------------------------------- */

/* Kontrast: --muted (#888) erreicht auf Creme nur 3,1:1. #666 schafft
   auf allen Hintergruenden der Seite mind. 4,5:1 (#FFF 5,7 · #FBFAF6 5,5 ·
   #F4EFE6 5,0 · #EBE4D4 4,5). Nur fuer den Inhalt zwischen Header und
   Footer - die liegen nicht in einer body>section und bleiben unveraendert. */
body > section, body > .container{--muted:#666666}

/* Kurzfassung unter dem Hero: ruhiger Fliesstext, keine Karte */
.ps-kurz{padding-block:clamp(28px,4vw,44px) 0}
.ps-kurz h2{font-size:clamp(1.15rem,1.6vw,1.35rem); padding-bottom:0; margin:0 0 10px}
.ps-kurz p{max-width:65ch; margin:0; font-size:1rem; line-height:1.65; color:var(--ink-soft)}

/* Harry-Block: Label ist jetzt ein h2, sieht aus wie vorher das eyebrow */
.ps-harry-h2{line-height:normal; text-wrap:initial}
.ps-zitat-figur{margin:0}

/* h4 -> h3 in den Service- und Modellkarten, Groesse wie vorher */
.service-mini-card h3{font-size:1.1rem; margin:6px 0 4px}
.alt-card h3{font-size:1.1rem; margin:0 0 4px}

.ps-stand{font-size:.84rem; color:var(--muted); margin:10px 0 0}

/* VK7-Testkarte: Fliesstext stand in #d4e8c5 auf --green-deep (4,0:1).
   Die Regel steht im Inline-Style der Seite; hier nur fuer die Produktseiten
   auf --green-soft (#E8F5DC, 4,6:1) angehoben. Doppelte Klasse, weil der
   Inline-Style spaeter im Head steht und sonst gewinnt. */
.test-section .test-card p{color:var(--green-soft)}

/* Quellenzeile unter der Technik-Tabelle (z. B. Laufzeiten laut Vorwerk) */
.ps-quelle{font-size:.8rem; color:var(--muted); margin:10px 0 0}

/* ---------------------------------------------------------------
   Aktionshinweis (05.10.2026)
   ---------------------------------------------------------------
   Eine Zeile unter der Leiste im Hero. Sie steht NICHT im HTML:
   assets/aktionen.js haengt sie an, solange fuer die Seite eine
   Aktion laeuft (Quelle ops/aktionen/aktionen.json), und laesst sie
   danach von selbst weg. Orange wie die Frist-Marken auf /aktionen;
   #8F4403 auf #FDE9CF ergibt 6,4:1.
   --------------------------------------------------------------- */
.ps-aktion{margin:12px 0 0; text-align:center}
.ps-aktion a{
  display:inline-block; max-width:100%;
  padding:9px 18px; border-radius:var(--radius-lg);
  background:#FDE9CF; color:#8F4403;
  font-size:.94rem; font-weight:500; line-height:1.4; text-decoration:none;
  transition:background .18s ease;
}
.ps-aktion a:hover{background:#FBD9AE}
.ps-aktion strong{font-weight:700}
.ps-aktion small{font-size:.76rem}
.ps-aktion-mehr{font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}