/* kv-planungshilfen-seite.css — Sammelseiten Planungshilfen (planungshilfen.html Privat, gewerbe-planungshilfen.html Gewerbe).
   Aus dem eingebetteten <style> von planungshilfen.html gehoben (P69, Fabio 03.11.: beide Seiten gleicher Aufbau), byte-gleich.
   Nur auf diesen zwei Seiten laden, nach kv-kopf-objekt.css (überschreibt dessen Kopf-Raster). */
/* ══ P47/P33 Planungshilfen (Fabio 27.10. freigegeben, Mockup .work/mockups/planungshilfen-q/): jede Planungshilfe als
   Station wie die erste (Kostenrechner). Bühne abwechselnd links/rechts (.kvp-steck--rechts), Fläche abwechselnd Tafel
   (.section.highlight) und Grund (.section.flat) wie index.html; Renders freigestellt, Bühne ohne graue Fläche.
   Sprungzeile am Handy 2 Spalten statt Wischleiste (knopf_rand_test). FAQ-Kopf und -Fuß wie index.html #faq, Liste = Bento
   aus kv-tools.css, Schema = sichtbare FAQ. Trust-Leiste 1:1 index.html (vier Punkte, Flagge).
   Die Station-Form (.kvp-steck, .kvp-blatt, .ph-bed, .ph-weg) zieht beim Aufräumen als .kvp--steckbrief nach
   /css/kv-planungshilfen.css um (gewerbe-planungshilfen braucht sie auch). Nur Tokens, kein Rot außer der Flagge. */

body{font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.7;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
@media (prefers-reduced-motion:reduce){.page-hero-in>*{animation:none!important}}
/* #ambient-Drift (Dauerschleife nach Zeit) entfernt, P69 05.11.: beide Seiten haben kein #ambient mehr (design.md 3) */

/* ── Kopf: Kopf-Objekt Werkzeugkoffer (P32) rechts max. 480 px, am Handy rechts neben der H1 (kv-kopf-objekt.css .hk) ── */
.hero-illu--koffer{margin:0;justify-self:center;width:100%;max-width:480px}
/* Trust-Leiste bricht bis 1359 px um („Anfrage kostenlos & unverbindlich“ ist länger als auf index) → Trennpunkt bliebe
   am Zeilenanfang/-ende stehen (wie kv-kopf-objekt.css) */
@media (max-width:1359px){.page-hero-in--split>.hero-trust .mdot{display:none}}
@media (max-width:900px){.page-hero-in--split>.hero-illu--koffer{max-width:300px}}
.page-hero{padding-bottom:var(--s-10)}
@media (max-width:640px){.page-hero{padding-bottom:var(--s-6)}}
/* Trust-Leiste 1:1 index.html: .ti als Zeile mit 6 px Abstand Icon–Text (index: inline-flex, gap 6) */
.page-hero .hero-trust .ti{display:inline-flex;align-items:center;gap:6px}
.page-hero .hero-trust .ti>svg{margin:0}
/* Vier Punkte passen ab 1360 px in eine Zeile, wenn die Textspalte etwas breiter ist (Koffer bleibt ≤ 480 px) */
@media (min-width:1101px){.page-hero-in--split{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}}

/* ── Sprungzeile: Werkzeugnamen als Chips, nicht klebend (die Nav klebt schon) ── */
.pha-sprung{position:relative;z-index:2;padding:0 var(--section-px)}
.pha-sprung-in{max-width:var(--max-w);margin:0 auto;padding-top:var(--s-6);border-top:1px solid var(--border)}
.pha-sprung-l{display:block;margin:0 0 var(--s-3);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);
  text-transform:uppercase;line-height:1.5;color:var(--muted)}
.pha-sprung .kv-tasten{gap:var(--s-3)}
/* Handy: zwei Spalten statt waagrechter Wischleiste — alle sieben Tasten ganz sichtbar (knopf_rand_test) */
@media (max-width:640px){
  .pha-sprung .kv-tasten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
  .pha-sprung .kv-knopf--chip{width:100%;padding:0 var(--s-2);font-size:13px;letter-spacing:-.01em}
}
.ph-scroll-anker{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}

/* ── Station: Tafel (weiß) ODER Grund, Bühne sticky, rechts/links Kennung · Frage · Satz · Datenblatt · Knopf · Bedingungen ── */
.pha-st .section-in{max-width:var(--max-w)}
.pha-st.section.highlight{padding:var(--s-16) var(--s-10);margin:var(--s-8) var(--s-5);overflow:clip}
@media (min-width:641px){.pha-st.section.highlight.pha-st--erste{margin-top:var(--s-12)}}
.pha-st.section.flat{padding:var(--s-16) var(--section-px);overflow:clip}

.kvp-steck{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s-14);
  grid-template-areas:"bild k" "bild t" "bild s" "bild blatt" "bild aktion";grid-template-rows:auto auto auto auto 1fr;align-items:start}
.kvp-steck--rechts{grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  grid-template-areas:"k bild" "t bild" "s bild" "blatt bild" "aktion bild"}
.kvp-steck>.kvp-bild{grid-area:bild;position:sticky;top:calc(var(--nav-h) + var(--s-8))}
.kvp-steck>.kvp-k{grid-area:k}
.kvp-steck-t{grid-area:t;margin:var(--s-3) 0 0;font-size:var(--fs-5xl);font-weight:var(--fw-medium);line-height:1.1;letter-spacing:-.03em;color:var(--ink);text-wrap:balance;max-width:18ch}
.kvp-steck-s{grid-area:s;margin:var(--s-4) 0 0;font-size:var(--fs-xl);line-height:1.6;color:var(--muted);max-width:46ch;text-wrap:pretty}
.kvp-steck-s strong{color:var(--ink);font-weight:var(--fw-semibold)}
/* Datenblatt: 2-px-Ink-Linie oben wie .st-reg, Haarlinien-Zeilen */
.kvp-blatt{grid-area:blatt;margin:var(--s-8) 0 0;border-top:2px solid var(--ink)}
.kvp-blatt>div{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:var(--s-5);padding:var(--s-4) 0;border-bottom:1px solid var(--border)}
.kvp-blatt dt{padding-top:3px;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-wide);text-transform:uppercase;line-height:1.5;color:var(--ink)}
.kvp-blatt dd{margin:0;font-size:var(--fs-lg);line-height:1.6;color:var(--body);text-wrap:pretty}
.kvp-steck-aktion{grid-area:aktion;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-8)}
/* Bedingungen genau dieses Werkzeugs, eine Zeile neben/unter dem Hauptknopf */
.ph-bed{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--muted)}
.ph-bed b{color:var(--ink);font-weight:var(--fw-semibold)}
/* Rechenweg-Link im Datenblatt: Textaktion mit Pfeil, nicht unterstrichen */
.ph-weg{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-1);font-weight:var(--fw-semibold);color:var(--teal-d);text-decoration:none}
.ph-weg::after{content:"→";font-weight:var(--fw-regular);transition:transform var(--dur-base) var(--ease-smooth)}
@media (hover:hover){.ph-weg:hover{color:var(--ink)}.ph-weg:hover::after{transform:translateX(3px)}}
.ph-weg:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-1)}

/* Bühne freigestellt: keine graue Fläche hinter dem Objekt — weder auf Weiß noch auf dem Grund */
.kvp-steck .kvp-bild{background:transparent;overflow:visible}
/* Bilder 4:3 (werkzeug-*) und Maßband ganz zeigen statt beschneiden */
.kvp-steck .kvp-bild>img{object-fit:contain}
.kvp-steck .kvp-bild--rechner>img{object-fit:cover}
/* Stromkosten: freigestelltes Startbild 1,3-fach (wie in den Zeilen), Rand weich ausgeblendet; A+++-Anzeige bleibt
   (Ebene skaliert mit der Breite, kv-planungshilfen.css) */
.kvp-steck .kvp-bild--strom{overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
.kvp-steck .kvp-bild--strom>.kvp-strom{top:50%;left:0;width:100%;transform:translateY(-50%) scale(1.3);transition:none}

@media (max-width:1040px){
  .pha-st.section.highlight{padding:var(--s-12) var(--s-10)}
  .pha-st.section.flat{padding:var(--s-12) var(--section-px)}
  .kvp-steck{column-gap:var(--s-8)}
  .kvp-blatt>div{grid-template-columns:minmax(0,1fr);row-gap:var(--s-1)}
}
/* Handy: Objekt klein neben Kennung und Frage — auf der Seite, auf der es am Desktop steht */
@media (max-width:640px){
  .pha-st.section.highlight{padding:var(--s-8) var(--s-5);margin:var(--s-8) var(--s-3)}
  .pha-st.section.flat{padding:var(--s-8) calc(var(--s-3) + var(--s-5))}
  .kvp-steck{grid-template-columns:112px minmax(0,1fr);column-gap:var(--s-4);
    grid-template-areas:"bild k" "bild t" "s s" "blatt blatt" "aktion aktion";grid-template-rows:auto 1fr auto auto auto}
  .kvp-steck--rechts{grid-template-columns:minmax(0,1fr) 112px;
    grid-template-areas:"k bild" "t bild" "s s" "blatt blatt" "aktion aktion"}
  .kvp-steck>.kvp-bild{position:relative;top:auto;border-radius:var(--r-2)}
  .kvp-steck-t{margin-top:var(--s-2);font-size:var(--fs-3xl);line-height:1.2}
  .kvp-steck-s{margin-top:var(--s-3);font-size:var(--fs-lg)}
  .kvp-blatt{margin-top:var(--s-6)}
  .kvp-blatt>div{padding:var(--s-3) 0}
  .kvp-blatt dd{font-size:var(--fs-md)}
  .kvp-steck-aktion{margin-top:var(--s-6);gap:var(--s-3)}
  .kvp-steck-aktion>.kv-knopf{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ph-weg::after{transition:none}}

/* ── FAQ: Kopf und Fuß wie index.html #faq ── */
.hdr-center{text-align:center;margin-left:auto;margin-right:auto}
.ph-faq.section.flat{padding:var(--s-24) var(--section-px)}
.ph-faq .section-hdr{margin-bottom:0}
.ph-faq .section-hdr>.h-section{margin:0}
.bento-foot{margin-top:var(--s-10);display:flex;align-items:center;justify-content:center;gap:var(--s-3);font-size:var(--fs-md);color:var(--muted)}
@media (max-width:640px){
  .ph-faq.section.flat{padding:var(--s-16) var(--section-px)}
  .bento-foot{flex-direction:column;gap:var(--s-2)}
}