/* kv-planungshilfen.css — Baustein Planungshilfen .kvp (P31, Fabio 25.10.: Richtung 1 „Zeilen“, Mockup
   .work/mockups/planungshilfen-baustein/). Eine Vorlage, zwei Fassungen (Privat / Gewerbe), drei Orte:
     .kvp--unter   Startseite, im #calc unter dem Rechner-Widget (Haarlinie oben); dort und im Kostenrechner als
                   Fassung .kvp--reihe (nebeneinander, Fabio 26.10.)
     .kvp-tafel    Ratgeber-Hubs blog.html / blog/thema-gewerbe.html, als Tafel .kvb-flaeche (kv-b.css)
     .kvp--frei    gewerbe.html, im Abschnitt auf dem Grund
   Kopf links 5 : Liste rechts 7. Jede Zeile: Bühne 4:3 mit dem freigestellten 3D-Objekt des Werkzeugs (Standbild, keine
   Animation — Fabio 25.10.), Kennung, Frage, Satz, Pfeil. Grund der Bühne #F5F5F3 = Hintergrund der Kopf-Renders.
   Schall-Bögen still aus /css/kv-schall.css (.hs-still). Schriftgrade und Abstände nur Tokens, kein Rot. */

.kvp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s-16);align-items:start;font-family:var(--f);color:var(--ink)}
.kvp a{-webkit-tap-highlight-color:transparent}

/* Kopf */
.kvp-kopf{min-width:0}
.kvp-liste{container-type:inline-size;min-width:0}
.kvp-k{display:block;margin:0;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wider);text-transform:uppercase;line-height:1.5;color:var(--teal-d)}
.kvp-t{margin:var(--s-3) 0 0;font-size:var(--fs-4xl);font-weight:var(--fw-medium);line-height:1.18;letter-spacing:-.03em;color:var(--ink);text-wrap:balance;max-width:16ch}
.kvp-s{margin:var(--s-4) 0 var(--s-6);font-size:var(--fs-xl);line-height:1.6;color:var(--muted);max-width:40ch;text-wrap:pretty}
.kvp-kopf .kv-knopf--text{font-size:var(--fs-lg)}

/* Liste: Gruppen mit Kennzeile, Haarlinien statt Karten */
.kvp-gruppe+.kvp-gruppe{margin-top:var(--s-12)}
.kvp-l{margin:0 0 var(--s-3);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--tr-wider);text-transform:uppercase;line-height:1.5;color:var(--muted)}
.kvp-zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.kvp-zeilen li{border-bottom:1px solid var(--border)}
.kvp-z{display:grid;grid-template-columns:184px minmax(0,1fr) auto;column-gap:var(--s-6);align-items:center;padding:var(--s-5) 0;color:inherit;text-decoration:none;border-radius:var(--r-3)}
.kvp-txt{display:block;min-width:0}
.kvp-txt b{display:block;margin-top:6px;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--tr-base);color:var(--ink);text-wrap:balance;transition:color var(--dur-base) var(--ease-smooth)}
.kvp-txt>span{display:block;margin-top:6px;font-size:var(--fs-lg);line-height:1.55;color:var(--muted);text-wrap:pretty;max-width:52ch}
.kvp-txt em{display:block;margin-top:var(--s-1);font-style:normal;font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--ink)}
.kvp-pfeil{width:16px;height:16px;flex:none;color:var(--teal-d);transition:transform var(--dur-base) var(--ease-smooth)}
@media (hover:hover){
  .kvp-z:hover .kvp-txt b{color:var(--teal-d)}
  .kvp-z:hover .kvp-pfeil{transform:translateX(3px)}
  .kvp-z[href$=".pdf"]:hover .kvp-pfeil{transform:translateY(2px)}
}
.kvp-z:focus-visible{outline:2px solid var(--teal);outline-offset:6px}
.kvp-z:focus-visible b{color:var(--teal-d)}

/* Bühne: Standbild des Werkzeug-Objekts */
.kvp-bild{position:relative;display:block;overflow:hidden;background:#F5F5F3;border-radius:var(--r-3);isolation:isolate;aspect-ratio:4/3}
.kvp-bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Innengerät füllt im Render nur gut die Hälfte der Breite → 1,3-fach, damit es neben den anderen Objekten gleich wiegt */
.kvp-bild--strom>img{transform:scale(1.3)}
/* Kostenrechner (nur Ratgeber-Hub): Kopf-Render Rechner mit eigener Schattenebene, Display leer */
.kvp-bild--rechner>img{transform:scale(1.05)}
/* Schall: Außengerät freigestellt, Größe über die Bühnenhöhe (74 %), rechts der Mitte, Bögen nach links */
.kvp-hs{--hs-fx:25.3%;--hs-fy:46.3%;position:absolute;z-index:1;top:50%;left:50%;height:74%;width:auto;aspect-ratio:1200/1556;transform:translate(-30%,-50%)}
.kvp-hs img{display:block;width:100%;height:auto}

/* Orte */
.kvp--unter{max-width:1140px;margin:var(--s-12) auto 0;padding-top:var(--s-10);border-top:1px solid var(--border)}
.kvp--frei{max-width:1140px;margin:0 auto}
/* Auf dem Grund #F5F5F3 verschwände die graue Bühne → dort weiß (Renders sind freigestellt). Grau bleibt sie nur auf
   weißen Flächen: Startseite #calc (.kvp--unter) und Tafel der Ratgeber-Hubs (.kvp-tafel). P49: Werkzeugseiten auf dem Grund. */
.kvp:not(.kvp--unter):not(.kvp-tafel .kvp) .kvp-bild{background:var(--white)}
/* Strom-Startbild ist nicht freigestellt (Grund #F5F5F3 im Bild) → auf Weiß aufhellen (255/240, mit Reserve
   für den warmen Ton), sonst graues Rechteck (wie kostenrechner.html .kr-weiter) */
.kvp:not(.kvp--unter):not(.kvp-tafel .kvp) .kvp-strom>img{filter:brightness(1.0625)}
.kvp-tafel{padding:var(--s-14);scroll-margin-top:calc(var(--nav-h) + var(--s-3))}
#werkzeuge{scroll-margin-top:calc(var(--nav-h) + var(--s-3))}

/* Karten nie unterstrichen (Fabio 26.10.: keine unterstrichenen Texte); „Alle Planungshilfen“ entfällt (P49) */
.kvp .kvp-z:hover{text-decoration:none}

/* Fassung „Reihe“ .kvp--reihe (Startseite + Kostenrechner, Fabio 26.10.: Mockup planungshilfen-dezent A, „dezent,
   Symbole kleiner“): Kopf kompakt einspaltig (Kennung, Titel, Satz), sechs Werkzeuge nebeneinander, je Gruppe drei; Bühne
   2:1 mit dem Objekt auf 76 % der Höhe (Fabio 26.10.: „immer noch zu groß“), darunter nur Kennung + Frage, kein Satz, kein Pfeil.
   Handy: zwei Spalten über alle sechs, Gruppenzeilen entfallen. */
.kvp.kvp--reihe{display:block}
.kvp--reihe .kvp-kopf{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "t" "s";
  align-items:baseline;margin-bottom:var(--s-8)}
.kvp--reihe .kvp-kopf>.kvp-k{grid-area:k}
.kvp--reihe .kvp-kopf>.kvp-t{grid-area:t;margin-top:var(--s-2);font-size:var(--fs-3xl);line-height:1.25;letter-spacing:var(--tr-snug);max-width:none}
.kvp--reihe .kvp-kopf>.kvp-s{grid-area:s;margin:var(--s-2) 0 0;font-size:var(--fs-lg);line-height:1.6;max-width:64ch}
.kvp--reihe .kvp-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
.kvp--reihe .kvp-gruppe+.kvp-gruppe{margin-top:0}
.kvp--reihe .kvp-l{margin:0 0 var(--s-5);padding-bottom:var(--s-3);border-bottom:1px solid var(--border);font-size:var(--fs-xs)}
.kvp--reihe .kvp-zeilen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-5);border-top:0}
.kvp--reihe .kvp-zeilen li{border:0}
.kvp--reihe .kvp-z{display:block;padding:0}
.kvp--reihe .kvp-bild{aspect-ratio:2/1}
.kvp--reihe .kvp-bild>img{inset:12% 0;height:76%;object-fit:contain;transition:transform var(--dur-slow) var(--ease-out)}
/* Gleiches Gewicht in der flachen Bühne: Außengerät kleiner, Innengerät größer als in den Zeilen */
.kvp--reihe .kvp-hs{height:62%;transition:transform var(--dur-slow) var(--ease-out)}
/* Maßband (P33) ist flach und schmal → 1,3-fach wie das Innengerät, sonst wirkt es neben Klemmbrett und Lupe zu leicht */
.kvp--reihe .kvp-bild>img[src*="massband"]{transform:scale(1.3)}
/* Stromkosten (Fabio 26.10.): Startbild mit dem grünen A+++ auf der Gerätefront wie im Kopf stromkostenrechner.html,
   statisch (Stand .hst.is-ende). .kvp-strom = Feld des Startbilds (960 × 736) an der Stelle, an der object-fit:contain
   es zeigte: Höhe 76 % der 2:1-Bühne → Breite 76 % × ½ × 960/736 = 49,565 %. Ebene wie .hst-ebene (kv-tools.css),
   matrix3d einmal aus data-front/data-feld von stromkostenrechner.html gerechnet (Rechenweg /js/kv-kopf-strom.js);
   bei neuer Kamera dort nachmessen und hier neu rechnen. Ohne tan(atan2()) bleibt die Anzeige weg. */
.kvp-strom{position:absolute;top:12%;left:25.2175%;width:49.565%;aspect-ratio:960/736;container-type:inline-size;
  transform:scale(1.5);transition:transform var(--dur-slow) var(--ease-out)}
.kvp-strom>img{display:block;width:100%;height:100%}
.kvp-strom-ebene{display:none;position:absolute;left:0;top:0;width:960px;height:736px;transform-origin:0 0;
  transform:scale(tan(atan2(100cqw,960px)));mix-blend-mode:multiply;pointer-events:none}
@supports (width:calc(1px * tan(atan2(1px, 2px)))){.kvp-strom-ebene{display:block}}
.kvp-strom-anz{position:absolute;left:0;top:0;width:520px;height:190px;transform-origin:0 0;
  transform:matrix3d(0.08881446,-0.03941329,0,-0.00005754,-0.0047857,0.1266026,0,-0.00000709,0,0,1,0,549.26334057,376.09765697,0,1);
  font-family:var(--f);font-weight:var(--fw-medium);font-style:normal;font-size:205px;line-height:190px;letter-spacing:-.01em;
  white-space:nowrap;color:var(--green);filter:blur(4px);backface-visibility:hidden;opacity:.5;
  text-shadow:0 0 18px rgba(61,139,122,.4),0 0 56px rgba(61,139,122,.3)}
.kvp-strom-anz>span{display:inline-block;font-size:.86em;margin-left:-.03em;vertical-align:.04em}
.kvp--reihe .kvp-txt{margin-top:var(--s-3)}
.kvp--reihe .kvp-txt .kvp-k{letter-spacing:var(--tr-wide)}
.kvp--reihe .kvp-txt b{margin-top:var(--s-1);font-size:var(--fs-lg);line-height:1.4;letter-spacing:var(--tr-normal);text-wrap:pretty}
.kvp--reihe .kvp-txt em{margin-top:var(--s-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.5;color:var(--muted)}
.kvp--reihe .kvp-pfeil{display:none}
@media (hover:hover){
  .kvp--reihe .kvp-z:hover .kvp-bild>img{transform:scale(1.04)}
  .kvp--reihe .kvp-z:hover .kvp-bild>img[src*="massband"]{transform:scale(1.35)}
  .kvp--reihe .kvp-z:hover .kvp-strom{transform:scale(1.56)}
  .kvp--reihe .kvp-z:hover .kvp-hs{transform:translate(-30%,-50%) scale(1.04)}
}
.kvp--reihe .kvp-z:focus-visible{outline-offset:4px}
/* Alle sieben Werkzeuge (blog.html: .kvp-liste--stapel, Gruppen untereinander, je Gruppe vier Spalten) bzw. vier + zwei
   (Angebots-Check/-Vergleich: .kvp-liste--4-2, Gruppen nebeneinander im Verhältnis 2 : 1), damit keine Gruppe 3 + 1 umbricht
   und die Bühnen etwa gleich breit bleiben. */
.kvp--reihe .kvp-liste--stapel{grid-template-columns:minmax(0,1fr);row-gap:var(--s-8)}
.kvp--reihe .kvp-liste--stapel .kvp-zeilen,.kvp--reihe .kvp-liste--4-2 .kvp-zeilen{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:1041px){
  .kvp--reihe .kvp-liste--4-2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .kvp--reihe .kvp-liste--4-2 .kvp-gruppe+.kvp-gruppe .kvp-zeilen{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Schmale Listenspalte (Tafel auf blog.html): kleinere Bühne, damit der Text Platz behält */
@container (max-width:600px){
  .kvp-z{grid-template-columns:144px minmax(0,1fr) auto;column-gap:var(--s-5)}
}
@media (max-width:1040px){
  .kvp{grid-template-columns:minmax(0,1fr);row-gap:var(--s-8)}
  .kvp-t{max-width:24ch}
}
@media (max-width:900px){
  .kvp-tafel{padding:var(--s-10)}
}
/* Handy: Kopf oben, Zeilen mit kleiner Bühne, nur Kennung + Frage, Preiszeile bleibt */
@media (max-width:640px){
  .kvp{row-gap:var(--s-6)}
  .kvp--unter{margin-top:var(--s-8);padding-top:var(--s-8)}
  .kvp-tafel{padding:var(--s-8) var(--s-5)}
  .kvp-t{margin-top:var(--s-2);font-size:var(--fs-3xl);line-height:1.2}
  .kvp-s{margin:var(--s-3) 0 var(--s-4);font-size:var(--fs-lg)}
  .kvp-kopf .kv-knopf--text{font-size:var(--fs-md)}
  .kvp-gruppe+.kvp-gruppe{margin-top:var(--s-8)}
  .kvp-z{grid-template-columns:112px minmax(0,1fr) auto;column-gap:var(--s-4);padding:var(--s-4) 0}
  /* Tafel hat Innenabstand → schmalere Textspalte, Bühne kleiner, damit die Frage höchstens zwei Zeilen braucht */
  .kvp-tafel .kvp-z{grid-template-columns:96px minmax(0,1fr) auto;column-gap:var(--s-3)}
  .kvp-tafel .kvp-txt b{text-wrap:pretty}
  .kvp-bild{border-radius:var(--r-2)}
  .kvp-txt b{margin-top:2px;font-size:var(--fs-lg);line-height:1.35}
  .kvp-txt>span{display:none}
  .kvp-txt em{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--muted)}
}
/* Reihe: Tablet Gruppen untereinander (je drei nebeneinander), Handy zwei Spalten über alle sechs */
@media (max-width:1040px){
  .kvp--reihe .kvp-liste{grid-template-columns:minmax(0,1fr);row-gap:var(--s-8)}
}
@media (max-width:640px){
  .kvp--reihe .kvp-kopf{margin-bottom:var(--s-6)}
  .kvp--reihe .kvp-kopf>.kvp-t{font-size:var(--fs-2xl);line-height:1.3}
  /* Satz „Geschätzt aus Ihren Angaben …“ am Handy weg (Fabio 26.10.) */
  .kvp--reihe .kvp-kopf>.kvp-s{display:none}
  .kvp--reihe .kvp-liste{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4);row-gap:var(--s-6)}
  .kvp--reihe .kvp-gruppe,.kvp--reihe .kvp-zeilen,.kvp--reihe .kvp-zeilen li{display:contents}
  .kvp--reihe .kvp-l{display:none}
  .kvp--reihe .kvp-txt{margin-top:var(--s-2)}
  .kvp--reihe .kvp-txt b{font-size:var(--fs-md);line-height:1.4}
}
/* Auftritt (P49, Fabio 26.10.): Karten nacheinander über den Reveal der jeweiligen Seite — kv-reveal.js (data-rv/data-rv-i,
   eigene Regel für reduzierte Bewegung) bzw. das alte .reveal mit gestaffelter transition-delay (Angebots-Check/-Vergleich).
   Dessen Seiten-CSS kennt keine reduzierte Bewegung → hier für den Baustein: Karten erscheinen ohne Bewegung. */
@media (prefers-reduced-motion:reduce){
  .kvp-txt b,.kvp-pfeil,.kvp--reihe .kvp-bild>img,.kvp--reihe .kvp-hs,.kvp-strom,.kvp .reveal{transition:none}
}

/* Fassung „Reihe, ungleiche Gruppen“ .kvp--b (Gewerbe-Werkzeugseiten, Fabio 26.10.): vier Einträge in zwei Gruppen mit je 1–3
   Zeilen. Ab Desktop stehen die Gruppen nebeneinander, Breite nach Anzahl (inline --n an .kvp-gruppe), die Zeilen füllen sie
   ohne leere Spalte. Tablet und Handy erben .kvp--reihe unverändert. */
@media (min-width:1041px){
  .kvp--b .kvp-liste{display:flex;column-gap:var(--s-8)}
  .kvp--b .kvp-gruppe{flex:var(--n,1) 1 0;min-width:0}
  .kvp--b .kvp-zeilen{grid-template-columns:repeat(var(--n,1),minmax(0,1fr))}
}