/* kv-kopf-objekt.css — Seitenkopf mit freigestelltem 3D-Objekt für die Werkzeugseiten der Linie A mit .hero
   (angebotscheck, angebotsvergleich, gewerbe-kostenrechner, gewerbe-fgas-check, gewerbe-astv-check,
   gewerbe-entscheidungsvorlage). P32, Fabio 24.10.: ein Objekt je Kopf, H1 / H2-Zeile / Untertext, Trust-Leiste wie
   schallcheck.html (kv-tools.css .page-hero-in--split). Aufbau: Text links, Objekt rechts (am Handy darunter, kleiner),
   das Werkzeug selbst als volle Zeile unter dem Kopf. Objekte stehen still (Fabio 26.10.). Lädt nach dem eingebetteten
   <style> der Seite. */

.hero-in.hero-in--objekt{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  grid-template-areas:"intro objekt" "trust objekt" "tool tool";column-gap:var(--s-12);row-gap:0;align-items:center}
.hero-in--objekt>.hero-intro{grid-area:intro;align-self:end}
.hero-in--objekt>.hero-trust{grid-area:trust;align-self:start;margin:var(--s-5) 0 0}
/* Objekt steht beim Laden sofort (design.md 3: nichts läuft nach Zeit ab; früher kvKopfEin, P69 05.11. entfernt) */
.hero-in--objekt>.hero-objekt{grid-area:objekt;justify-self:center;width:100%;max-width:460px;margin:0}
.hero-objekt img{display:block;width:100%;height:auto}
/* Breite des Werkzeugs legt die Seite fest (z. B. .ac-wrap 760 px) */
.hero-in--objekt>.hero-tool{grid-area:tool;width:100%;justify-self:center;margin-top:var(--s-16)}

/* Trust-Leiste — Werte 1:1 aus kv-tools.css (dort für .page-hero) */
.hero-in--objekt>.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);font-size:var(--fs-sm);
  color:var(--muted);font-weight:var(--fw-regular)}
.hero-in--objekt>.hero-trust strong{color:var(--ink);font-weight:var(--fw-semibold)}
.hero-in--objekt>.hero-trust .ti{display:inline-block;white-space:nowrap}
.hero-in--objekt>.hero-trust .ti>svg{display:inline-block;vertical-align:middle;margin:-2px 6px 0 0}
.hero-in--objekt>.hero-trust .mdot{width:3px;height:3px;border-radius:50%;background:var(--border);flex-shrink:0}
.hero-in--objekt>.hero-trust svg{color:var(--teal);flex-shrink:0}

/* Variante Gewerbe-Kostenrechner: .hero-in ist dort eine Flex-Spalte mit dem Rechner (.calc-shell) darunter →
   Intro (samt eigener Trust-Leiste) und Objekt als eigene Zeile darüber, wie .krk-kopf in kostenrechner.html */
.hero-top--objekt{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(260px,400px);column-gap:var(--s-12);align-items:center}
.hero-top--objekt>.hero-objekt{justify-self:end;width:100%;margin:0}
/* Ergebnisansicht des Handy-Assistenten blendet den Kopftext aus — das Objekt mit */
body.kv-wizard-on.wiz-show-result .hero-top--objekt>.hero-objekt{display:none}

@media (max-width:1100px){
  .hero-in.hero-in--objekt{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "objekt" "trust" "tool";row-gap:0}
  .hero-in--objekt>.hero-objekt{max-width:300px;margin:var(--s-6) auto 0}
  .hero-in--objekt>.hero-trust{max-width:640px;width:100%;margin:var(--s-5) auto 0}
  .hero-in--objekt>.hero-tool{margin-top:var(--s-10)}
  /* einspaltig bricht die Leiste um → Trennpunkt bliebe am Zeilenende stehen */
  .hero-in--objekt>.hero-trust .mdot{display:none}
  .hero-top--objekt{grid-template-columns:minmax(0,1fr)}
  .hero-top--objekt>.hero-objekt{justify-self:center;max-width:300px;margin-top:var(--s-6)}
}
@media (max-width:640px){
  .hero-in--objekt>.hero-trust{gap:var(--s-2) var(--s-3);font-size:var(--fs-xs)}
}
/* ══ Handy-Kopf bis 640 px — für ALLE Werkzeugköpfe mit 3D-Objekt (Fabio 26.10.: „alle Köpfe gleich“) ══════════════
   Gilt auch auf schallcheck, stromkostenrechner, dimensionierung, planungshilfen und kostenrechner (dort nach kv-tools.css
   bzw. dem Seiten-CSS eingebunden). 641 px und breiter: nichts davon wirkt (.hk-z bleibt Fließtext).
   - Objekt in festem Kasten --hk-bw × --hk-bh (84 × 112): das Sichtbare füllt ihn in einer Richtung, sichtbare rechte
     Kante = Inhaltskante (20 px vom Fensterrand), senkrecht mittig zu den H1-Zeilen daneben (Mitte --hk-m).
   - H1-Zeilen fest gesetzt: jede Zeile ein .hk-z (bis 640 px eigene Zeile, Schriftgröße bleibt); Zeilen neben dem
     Objekt zusätzlich .hk-n → halten Kasten + Abstand frei, keine Überlappung. Lange Einzelwörter stehen allein darüber/darunter.
   - Behälter .hk (Inline-Stil): --hk-z0 Zeilen über dem Objekt, --hk-zn Zeilen daneben, --hk-y0 H1-Oberkante im Behälter
     (Eyebrow davor), --hk-m eigene Mitte (Objekt neben der Unterzeile).
   - Objekt .hk-o (Inline-Stil): sichtbarer Bildteil im Element --hk-x1/--hk-x2/--hk-y1/--hk-y2 (Anteile 0…1) und
     Seitenverhältnis --hk-ar des Elements (Breite/Höhe) — gemessen mit tests/handy_kopf_test.py -v.
   - --hk-lh = Zeilenhöhe der H1 je Seitenart (Schrift × line-height des Seiten-CSS); ändert sich die H1-Schrift, hier
     nachziehen — tests/handy_kopf_test.py prüft Rand, Kasten, Mitte und Überlappung auf 360/375/390/430. */
.h-display .hk-z{display:inline}
@media (max-width:640px){
  /* --hk-lh = Handy-H1 aus kv-bausteine.css (bzw. gleichlautend inline in lexikon): clamp(36px,8.5vw,52px) × 1.06,
     ≤ 380 px clamp(30px,9vw,44px) × 1.06 — gilt seit P69 für alle Köpfe mit .hk */
  .hk{--hk-bw:84px;--hk-bh:112px;--hk-g:10px;--hk-lh:calc(clamp(36px,8.5vw,52px) * 1.06);position:relative;
    --hk-m:calc(var(--hk-y0,0px) + var(--hk-lh) * (var(--hk-z0,0) + var(--hk-zn,3) / 2))}
  .page-hero-in--split.hk,.krk-kopf.hk{display:block}
  .hk>.hero-intro,.hk .h-display{position:relative;z-index:2}
  .hk .h-display .hk-z{display:block}
  .hk .h-display .hk-n{padding-right:calc(var(--hk-bw) + var(--hk-g))}
  .hk .hk-o{--hk-ew:min(calc(var(--hk-bw) / (var(--hk-x2) - var(--hk-x1))),calc(var(--hk-bh) * (var(--hk-ar)) / (var(--hk-y2) - var(--hk-y1))));
    position:absolute;z-index:1;grid-area:auto;justify-self:auto;width:var(--hk-ew);max-width:none;margin:0;
    right:calc((var(--hk-x2) - 1) * var(--hk-ew));
    top:calc(var(--hk-m) - var(--hk-ew) / (var(--hk-ar)) * (var(--hk-y1) + var(--hk-y2)) / 2)}
}
@media (max-width:380px){.hk{--hk-lh:calc(clamp(30px,9vw,44px) * 1.06)}}

/* ══ Kopf-Objekt lebt (Fabio 06.11., design.md 3): fliegt beim Laden nach 0,35 s ein wie anfangs (kvKopfEin, vor P69),
   danach schwebt es dezent. Text bleibt fest. Eigene Kopf-Bewegungen bleiben unberührt: Schallcheck (Geräte-Einflug),
   Stromrechner (Video .hst), Fachbetriebe (Handy-Loop .fbh). Schweben über `translate`, damit `transform` der Seite
   (z. B. Drehung der Marke auf warum-wir) erhalten bleibt. */
.hk-o:not(.hero-illu--schall):not(.hst):not(.fbh){animation:kvKopfEin var(--dur-entrance) .35s var(--ease-out) backwards}
.hk-o:not(.hero-illu--schall):not(.hst):not(.fbh):not(.krk-objekt)>*{animation:kvKopfSchweben 7s ease-in-out 1s infinite}   /* krk schwebt selbst (krkSchweben) */
@keyframes kvKopfEin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kvKopfSchweben{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.hk-o,.hk-o>*{animation:none!important}}