/* =========================================================================
   Hero (clean) — Navy-Vollbild-Hero mit Akku-Video.
   Der Akku-Clip (transparentes VP9-Alpha-WebM + Standbild) liegt absolut im
   .heroB__media; seine Styles stehen in hero-video.css. Hier: Header über dem
   Navy-Hero, der Hintergrund im Messgerät-Look, die Überschrift (zwei Zeilen,
   die beim Burst wechseln) und der Scroll-Hinweis. Tokens aus styles.css.
   ========================================================================= */

/* ---------- Header: fixed, nahtlos im Navy-Hero, hell ---------- */
.logo__mark--light { display: none; }                 /* default: heller Mark aus */

.header--hero {
  position: fixed; top: 0; left: 0; right: 0;          /* über dem Hero, Navy reicht dahinter */
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
.header--hero .logo__name { color: #fff; }
.header--hero .nav__link { color: rgba(255,255,255,0.82); }
.header--hero .nav__link:hover, .header--hero .nav__link.is-active { color: #fff; }
.header--hero .header__tel { color: #fff; }
.header--hero .nav-toggle { color: #fff; }
.header--hero .logo__mark--dark { display: none; }
.header--hero .logo__mark--light { display: block; }

/* solider Zustand, sobald der Navy-Hero durchgescrollt ist */
.header--hero.is-solid {
  background: rgba(255,255,255,0.90);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}
.header--hero.is-solid .logo__name { color: var(--navy-900); }
.header--hero.is-solid .nav__link { color: var(--text-muted); }
.header--hero.is-solid .nav__link:hover, .header--hero.is-solid .nav__link.is-active { color: var(--navy-900); }
.header--hero.is-solid .header__tel { color: var(--navy-900); }
.header--hero.is-solid .nav-toggle { color: var(--navy-900); }
.header--hero.is-solid .logo__mark--light { display: none; }
.header--hero.is-solid .logo__mark--dark { display: block; }

/* mobiles Drawer (weiß) braucht dunkle Links, auch über dem Hero */
.header--hero.is-open:not(.is-solid) .nav__link { color: var(--text-secondary); }

/* ---------- Hero (eine Sektion, 100vh, Navy bis ganz oben) ---------- */
.heroB { position: relative; height: 100vh; min-height: 560px; background: var(--navy-900); overflow: hidden; }
.heroB__stage { position: relative; height: 100%; display: flex; align-items: center; }
/* Hintergrund im Messgerät-Look wie der Pricing-Rechner: dezenter Cyan-Radial-
   Gradient von oben rechts über Navy + subtile Kachel-Textur. */
.heroB__bg { position: absolute; inset: 0; background: radial-gradient(125% 80% at 85% -10%, rgba(22,202,212,0.14), transparent 60%), linear-gradient(180deg, #16233f 0%, var(--navy-900) 55%, #0a1029 100%); }
.heroB__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(115% 90% at 50% -5%, #000 35%, transparent 82%);
          mask-image: radial-gradient(115% 90% at 50% -5%, #000 35%, transparent 82%);
}

.heroB__inner {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}

/* Überschrift — zwei Zeilen überlagern sich, wechseln beim Burst */
.heroB__copy { position: relative; }
.heroB__title {
  position: relative; margin: 0; font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(34px, 5.4vw, 64px); line-height: 1.03; letter-spacing: -1.8px; text-wrap: balance;
}
.heroB__line { display: block; }
.heroB__line--1 { position: absolute; top: 0; left: 0; right: 0; transition: opacity .5s ease; }
.heroB__line--2 { position: relative; opacity: 0; transition: opacity .6s ease .22s; }
.heroB.is-burst .heroB__line--1 { opacity: 0; }
.heroB.is-burst .heroB__line--2 { opacity: 1; }

/* ---------- Akku-Medienbereich (Video + Standbild liegen absolut darin; Styles in hero-video.css) ---------- */
.heroB__media { position: relative; height: 46vh; min-height: 280px; }

/* dezenter Scroll-Hinweis (verschwindet beim Start) */
.heroB__hint { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); color: var(--text-on-dark-soft); transition: opacity .4s ease; }
.heroB__hint .icon { animation: heroBnudge 1.8s ease-in-out infinite; color: var(--cyan-400); }
.heroB.is-burst .heroB__hint { opacity: 0; }
@keyframes heroBnudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .heroB__inner { grid-template-columns: 1fr; gap: 12px; text-align: center; justify-items: center; }
  .heroB__copy { order: 2; max-width: 560px; }
  .heroB__media { order: 1; width: 100%; height: 34vh; min-height: 210px; }
  .heroB__title { font-size: clamp(28px, 8vw, 44px); letter-spacing: -1px; }
}

/* ---------- Reduced motion: statischer, sauberer Hero (kein Burst) ---------- */
@media (prefers-reduced-motion: reduce) {
  .heroB__hint { display: none; }
  .heroB__line--1, .heroB__line--2 { position: relative; opacity: 1 !important; transition: none; }
}