/* Hero: Videohoehe nach unten begrenzen.
   Der Entwurf setzt das Videofeld auf feste 68 % der Hoehe, waehrend der Text
   darunter bei top: min(57%, 100% - 450px) sitzt. Auf hohen Schirmen passt
   das; auf Laptophoehen laeuft der Fliesstext in das Foto hinein — gemessen
   -11 px bei 900, -15 px bei 864 und -63 px bei 768. min() laesst alles ab
   etwa 1094 px Fensterhoehe unveraendert und greift nur darunter.
   Bewusste, kleine Abweichung vom Entwurf. */
[data-m3="video"]{height:min(68%, calc(100% - 350px)) !important}

/* 3D-Abschnitt auf dem Handy: die Textbloecke sichtbar machen.
   Im Entwurf haengen sie mit bottom:0 an einem Kasten, der auf dem Handy per
   top:96px/bottom:auto umgestellt wird. Der Kasten hat damit die Hoehe 0, und
   die Bloecke wachsen nach OBEN aus dem Bild heraus (gemessen -148..96 px).
   Sichtbar blieb nur das Fahrzeug, darueber eine grosse Leere.
   Also auf dem Handy von oben verankern — die Absicht des Entwurfs
   (Text oben, Fahrzeug darunter) bleibt, nur eben im Bild. */
@media (max-width: 860px){
  [data-h3d="text"] [data-step]{bottom:auto !important;top:0 !important}
  [data-h3d="stage"]{top:34% !important}
}

/* APANI auf dem Handy: Kasten flacher, damit vom querformatigen Foto mehr
   als nur Scheibe und Haube sichtbar bleibt. */
@media (max-width: 760px){
  [data-laser]{height:clamp(260px, 42vh, 380px) !important}
}

/* Falls die Startseiten-Logik nicht anlaeuft: Hero trotzdem zeigen.
   Der Abzug steht im Anfangszustand des Auftritts (Video ausserhalb, Logo und
   Text auf 0) — ohne Skript bliebe davon nur Schwarz uebrig. */
.hero-fallback [data-m3="video"],
.hero-fallback [data-m3-vidinner],
.hero-fallback [data-m3="img"]{transform:none!important}
.hero-fallback [data-m3-logo]{opacity:1!important;width:min(40vw,700px)!important;position:static!important;margin:0 auto!important}
.hero-fallback [data-i3],
.hero-fallback [data-m3="about"],
.hero-fallback [data-m3="nav"]{opacity:1!important;pointer-events:auto!important}

/* Aus style-hover des Entwurfs erzeugt — im Export wertet das niemand aus.
   !important, weil die Grundwerte als style-Attribut am Element haengen.
   Nur bei echtem Zeigergeraet, damit auf dem Handy kein Zustand klebenbleibt. */
.mo [data-h]{opacity:0}
@media (hover:hover){
  [data-hv="1"]:hover{background-size:100% 1px, 100% 100% !important;color:#fff !important}
  [data-hv="2"]:hover{background-size:100% 100%, auto !important;color:#fff !important;gap:22px !important;box-shadow:0 0 0 1px #fff inset !important}
  [data-hv="3"]:hover{border-color:#3a3f4d !important;transform:translateY(-6px) !important;color:#fff !important}
  [data-hv="4"]:hover{background-size:100% 1px, 100% 100%, auto !important;border-color:#2c4a63 !important;transform:translateY(-6px) !important;box-shadow:0 20px 50px -20px rgba(143,211,255,0.25) !important}
  [data-hv="5"]:hover{background-size:100% 100%, auto !important;color:#090A0E !important;gap:22px !important}
  [data-hv="6"]:hover{background:rgba(20,22,30,0.92) !important}
  [data-hv="7"]:hover{animation-play-state:paused !important}
  [data-hv="8"]:hover{opacity:1 !important}
  [data-hv="9"]:hover{color:#c9ccd6 !important}
  [data-hv="10"]:hover{color:#fff !important}
  [data-hv="11"]:hover{border-color:#fff !important;background:#12141b !important}
  [data-hv="12"]:hover{background-size:100% 100%, auto !important;color:#fff !important;box-shadow:0 0 0 1px #fff inset !important}
  [data-hv="13"]:hover{border-color:#fff !important;transform:translateY(-6px) !important;color:#fff !important}
  [data-hv="14"]:hover{transform:scale(1.06) !important}
  [data-hv="15"]:hover{background-size:100% 1px !important;gap:20px !important}
  [data-hv="16"]:hover{background:#fff !important;border-color:#fff !important;color:#090A0E !important}
  [data-hv="17"]:hover{background:#1c1f28 !important;color:#fff !important}
  [data-hv="18"]:hover{background:#d9dce4 !important;color:#090A0E !important}
  [data-hv="19"]:hover{background-size:100% 1px !important;color:#fff !important}
  [data-hv="20"]:hover{background:#10121a !important}
  [data-hv="21"]:hover{transform:scale(1.05) !important}
  [data-hv="22"]:hover{background:#fff !important;color:#090A0E !important;border-color:#fff !important}
  [data-hv="23"]:hover{background:#fff !important;color:#090A0E !important}
  [data-hv="24"]:hover{opacity:0.8 !important}
  [data-hv="25"]:hover{background-size:100% 100%, auto !important;color:#090A0E !important}
  [data-hv="26"]:hover{background-size:100% 100%, auto !important;color:#090A0E !important;gap:20px !important;border-color:#fff !important}
  [data-hv="27"]:hover{background-size:100% 1px !important}
  [data-hv="28"]:hover{gap:18px !important;color:#fff !important}
  [data-hv="29"]:hover{background-size:100% 1px !important;gap:20px !important;color:#fff !important}
  [data-hv="30"]:hover{background-size:100% 1px !important;gap:18px !important;color:#fff !important}
  [data-hv="31"]:hover{background:#151820 !important;border-color:#3a3e4a !important;transform:translateY(-4px) !important}
  [data-hv="32"]:hover{background-size:100% 1px !important;padding-left:14px !important;color:#fff !important}
  [data-hv="33"]:hover{background-size:100% 2px !important;color:#fff !important}
}
/* Tastatur-Bedienung: gleiche Hervorhebung bei Fokus */
[data-hv="1"]:focus-visible{background-size:100% 1px, 100% 100% !important;color:#fff !important}
[data-hv="2"]:focus-visible{background-size:100% 100%, auto !important;color:#fff !important;gap:22px !important;box-shadow:0 0 0 1px #fff inset !important}
[data-hv="3"]:focus-visible{border-color:#3a3f4d !important;transform:translateY(-6px) !important;color:#fff !important}
[data-hv="4"]:focus-visible{background-size:100% 1px, 100% 100%, auto !important;border-color:#2c4a63 !important;transform:translateY(-6px) !important;box-shadow:0 20px 50px -20px rgba(143,211,255,0.25) !important}
[data-hv="5"]:focus-visible{background-size:100% 100%, auto !important;color:#090A0E !important;gap:22px !important}
[data-hv="6"]:focus-visible{background:rgba(20,22,30,0.92) !important}
[data-hv="7"]:focus-visible{animation-play-state:paused !important}
[data-hv="8"]:focus-visible{opacity:1 !important}
[data-hv="9"]:focus-visible{color:#c9ccd6 !important}
[data-hv="10"]:focus-visible{color:#fff !important}
[data-hv="11"]:focus-visible{border-color:#fff !important;background:#12141b !important}
[data-hv="12"]:focus-visible{background-size:100% 100%, auto !important;color:#fff !important;box-shadow:0 0 0 1px #fff inset !important}
[data-hv="13"]:focus-visible{border-color:#fff !important;transform:translateY(-6px) !important;color:#fff !important}
[data-hv="14"]:focus-visible{transform:scale(1.06) !important}
[data-hv="15"]:focus-visible{background-size:100% 1px !important;gap:20px !important}
[data-hv="16"]:focus-visible{background:#fff !important;border-color:#fff !important;color:#090A0E !important}
[data-hv="17"]:focus-visible{background:#1c1f28 !important;color:#fff !important}
[data-hv="18"]:focus-visible{background:#d9dce4 !important;color:#090A0E !important}
[data-hv="19"]:focus-visible{background-size:100% 1px !important;color:#fff !important}
[data-hv="20"]:focus-visible{background:#10121a !important}
[data-hv="21"]:focus-visible{transform:scale(1.05) !important}
[data-hv="22"]:focus-visible{background:#fff !important;color:#090A0E !important;border-color:#fff !important}
[data-hv="23"]:focus-visible{background:#fff !important;color:#090A0E !important}
[data-hv="24"]:focus-visible{opacity:0.8 !important}
[data-hv="25"]:focus-visible{background-size:100% 100%, auto !important;color:#090A0E !important}
[data-hv="26"]:focus-visible{background-size:100% 100%, auto !important;color:#090A0E !important;gap:20px !important;border-color:#fff !important}
[data-hv="27"]:focus-visible{background-size:100% 1px !important}
[data-hv="28"]:focus-visible{gap:18px !important;color:#fff !important}
[data-hv="29"]:focus-visible{background-size:100% 1px !important;gap:20px !important;color:#fff !important}
[data-hv="30"]:focus-visible{background-size:100% 1px !important;gap:18px !important;color:#fff !important}
[data-hv="31"]:focus-visible{background:#151820 !important;border-color:#3a3e4a !important;transform:translateY(-4px) !important}
[data-hv="32"]:focus-visible{background-size:100% 1px !important;padding-left:14px !important;color:#fff !important}
[data-hv="33"]:focus-visible{background-size:100% 2px !important;color:#fff !important}

/* style-focus: Hervorhebung der Eingabefelder beim Tippen */
[data-hf="1"]:focus{border-bottom-color:#fff !important}