/* =========================================================================
   Startseite – Hero v2 (Wallpaper-Look: Navy-Verlauf, Laufbahn, Laeufer, Fotokarte)
   Wirkt nur mit body.hero-v2 (Testseite /vorschau/startseite/). Andere Seiten
   und die Live-Startseite bleiben unberuehrt. Akzente nur Navy/Blau.
   ========================================================================= */

.hero-v2 {
  --hh2-ink: #ffffff;
  --hh2-soft: #b7c5d3;       /* Fliesstext auf Navy: ~10:1 */
  --hh2-muted: #8b9db0;      /* Tagline/Rolle: ~6:1 */
  --hh2-blue: #4a78ad;
  --hh2-blue-light: #a9c3e0;
  --hh2-navy: #0a1b26;
  --hh2-panel: #1b3852;      /* Tropfen/Untermenue der Navigation */
  /* Hoehe der Laufbahn: 20.84vw = volles Seitenverhaeltnis (1920:400); begrenzt durch die Viewport-Hoehe
     (Laptops) und nach oben (2560 px). Ist sie flacher als 20.84vw, wird die Bahn unten angeschnitten. */
  --hh2-track-h: clamp(190px, min(20.84vw, 34svh), 480px);
  --hh2-track-focus: 50%;    /* welche Stelle der Bahn (Anteil der SVG-Breite) mittig steht */
}

/* ---------- Header ueber dem Hero ---------- */
.hero-v2 .site-header {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.hero-v2 .site-header.is-scrolled {
  background: rgba(9, 21, 31, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
}
.hero-v2 .site-header__logo img { filter: brightness(0) invert(1); }
.hero-v2 .main-nav__link,
.hero-v2 .main-nav__sub-toggle { color: var(--hh2-ink); }
.hero-v2 .main-nav__link:hover,
.hero-v2 .main-nav__link.is-active,
.hero-v2 .nav-fx .main-nav__link:hover,
.hero-v2 .nav-fx .main-nav__link.is-active { color: var(--hh2-blue-light); }
.hero-v2 .nav-fx .main-nav__row.is-blob .main-nav__link,
.hero-v2 .nav-fx .main-nav__row.is-blob .main-nav__sub-toggle { color: #fff; }
.hero-v2 .nav-fx .main-nav__goo { filter: url(#nav-goo) drop-shadow(0 14px 24px rgba(0, 0, 0, .3)); }
.hero-v2 .nav-fx .main-nav__blob,
.hero-v2 .nav-fx .main-nav__panel,
.hero-v2 .nav-fx .main-nav__neck { background: var(--hh2-panel); }
.hero-v2 .nav-toggle__bars,
.hero-v2 .nav-toggle__bars::before,
.hero-v2 .nav-toggle__bars::after { background: #fff; }
.hero-v2.nav-open .nav-toggle__bars { background: transparent; }

/* Fokus: weiss statt Orange; in der Navigation umschliesst der Ring Text und Pfeil (ganze Zeile) */
.hero-v2 .site-header :focus-visible { outline-color: #fff; }
.hero-v2 .hh2 :focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.hero-v2 .hh2__link:focus-visible { border-radius: 4px; }
@supports selector(:has(*)) {
  .hero-v2 .main-nav__row > :focus-visible { outline: none; }
  .hero-v2 .main-nav__row:has(> :focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
}

@media (min-width: 1000px) {
  .hero-v2 .main-nav__sub { background: var(--hh2-panel); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
  .hero-v2 .nav-fx .main-nav__sub { background: transparent; box-shadow: none; }
  .hero-v2 .main-nav__sub a:hover,
  .hero-v2 .main-nav__sub a:focus-visible,
  .hero-v2 .main-nav__sub a.is-active { color: var(--hh2-blue-light); }
}

/* Mobil: Menue-Overlay dunkel statt hell, damit das weisse Logo lesbar bleibt */
@media (max-width: 999px) {
  .hero-v2 .main-nav { background: var(--hh2-navy); }
  .hero-v2.nav-open .site-header { background: var(--hh2-navy); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07); }
  .hero-v2 .main-nav__item { border-bottom-color: rgba(255, 255, 255, .1); }
  .hero-v2 .main-nav__sub a { color: var(--hh2-soft); }
  .hero-v2 .main-nav__sub a:hover,
  .hero-v2 .main-nav__sub a.is-active { color: #fff; }
}

/* ---------- Hero ---------- */
.hh2 {
  position: relative; isolation: isolate; overflow: hidden;
  /* liegt unter dem (transparenten) Sticky-Header */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(2rem, .5rem + 3.5vw, 4.5rem)) var(--gutter) calc(var(--hh2-track-h) + clamp(1.75rem, 1rem + 2vw, 3rem));
  color: var(--hh2-ink);
  background-color: #0a1822;
  background-image:
    radial-gradient(70% 60% at 100% 0%, rgba(24, 56, 80, .55), rgba(24, 56, 80, 0) 70%),
    linear-gradient(90deg, #070f16 0%, #08131b 16%, #0a1722 36%, #0b1a25 50%, #0c1e2b 68%, #0f2536 83%, #112a3c 92%, #12293b 100%);
}

/* Laufbahn: Hoehe fest, Breite aus dem Seitenverhaeltnis (1920:400 = 4.8). Schmale Schirme schneiden
   seitlich an (--hh2-track-focus), sehr breite unten (preserveAspectRatio YMin) - die Kante oben bleibt ganz. */
.hh2__stage {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: var(--hh2-track-h); overflow: hidden; pointer-events: none;
}
.hh2-track {
  position: absolute; top: 0; left: 50%; display: block;
  height: 100%; width: calc(var(--hh2-track-h) * 4.8); min-width: 100%; overflow: visible;
  transform: translateX(calc(-1 * var(--hh2-track-focus)));
}
.hh2-track__lines path { stroke: #c4d3e1; stroke-opacity: .16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hh2-track__lines .hh2-track__edge { stroke-opacity: .2; }
.hh2-track__inner { stroke: var(--hh2-blue); stroke-width: 1.6; stroke-opacity: .95; vector-effect: non-scaling-stroke; }
.hh2-track__marks { stroke: #7f8e9c; stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: butt; }
.hh2-track__nums text {
  fill: #56687a; font-family: var(--font); font-size: 18px; font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
}

/* Laeufer: Punkt + Spur sind Strich-Muster auf derselben Bahnlinie (<use> auf #hh2-lane4/6, pathLength 1000);
   die vererbte stroke-dashoffset-Animation bewegt beide synchron. Sichtbar ist die Bahn etwa von 800 bis 1300
   (rechte Kurve -> Gerade -> linke Kurve); der verdeckte Rest laeuft schneller. Jede Runde beginnt und endet
   an der Ruheposition auf der Geraden; nach zwei Runden bleiben die Punkte dort stehen (WCAG 2.2.2).
   Pause ausserhalb des Viewports / bei verdecktem Tab: .is-paused aus js/pages/home-hero-v2.js. */
.hh2-runner { animation: var(--run) var(--lap) linear 0s 2 both; }
.hh2-runner--a { --run: hh2-run-a; --lap: 44s; stroke-dashoffset: -1029; }
.hh2-runner--b { --run: hh2-run-b; --lap: 52s; stroke-dashoffset: -990; }
@keyframes hh2-run-a {
  0% { stroke-dashoffset: -1029; }
  43.36% { stroke-dashoffset: -1300; }
  63.36% { stroke-dashoffset: -1800; }
  100% { stroke-dashoffset: -2029; }
}
@keyframes hh2-run-b {
  0% { stroke-dashoffset: -990; }
  49.6% { stroke-dashoffset: -1300; }
  69.6% { stroke-dashoffset: -1800; }
  100% { stroke-dashoffset: -1990; }
}
.hh2.is-paused .hh2-runner { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hh2-runner { animation: none; }
}
.hh2-runner__dot { stroke: #fff; stroke-width: 16; stroke-linecap: round; }
.hh2-runner__trail { stroke: #e6eef6; stroke-width: 4; stroke-opacity: .2; stroke-linecap: butt; }
@media (min-width: 600px) {
  .hh2-runner__dot { stroke-width: 13; }
  .hh2-runner__trail { stroke-width: 3; }
}
@media (min-width: 1000px) {
  .hh2-runner__dot { stroke-width: 14; }
  .hh2-runner__trail { stroke-width: 2.5; stroke-opacity: .22; }
}

/* ---------- Inhalt ---------- */
.hh2__inner {
  width: 100%; max-width: 64rem; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.hh2__tagline {
  display: flex; align-items: center; justify-content: center; gap: 1.1em;
  margin: 0 0 clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  font-size: clamp(.6875rem, .64rem + .2vw, .8125rem); font-weight: 600; line-height: 1;
  letter-spacing: .3em; text-transform: uppercase; color: var(--hh2-muted);
}
.hh2__tagline span { margin-right: -.3em; } /* Sperrung nach dem letzten Buchstaben ausgleichen */
.hh2__tagline::before,
.hh2__tagline::after { content: ""; flex: none; width: clamp(24px, 1.2rem + 1.5vw, 44px); height: 1px; background: var(--hh2-blue); }

.hh2__title {
  margin: 0; max-width: 18.5em;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.032em;
  color: var(--hh2-ink); text-wrap: balance;
}

.hh2__lead {
  margin: clamp(1.1rem, .9rem + .6vw, 1.5rem) 0 0; max-width: 32em;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.6;
  color: var(--hh2-soft); text-wrap: balance;
}

.hh2__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 2rem; margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}
.hh2__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 54px; padding: .9rem 1.75rem; border-radius: 8px;
  background: var(--accent); color: var(--navy-900);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.hh2__btn:hover { background: var(--accent-hover, var(--accent)); }
.hh2__btn-icon { flex: none; transition: transform .25s var(--ease); }
.hh2__btn:hover .hh2__btn-icon { transform: translateX(3px); }
.hh2__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1rem; font-weight: 600; color: #dfe7ef;
  text-decoration: underline; text-decoration-color: rgba(169, 195, 224, .5);
  text-decoration-thickness: 1px; text-underline-offset: .35em;
  transition: color .2s, text-decoration-color .2s;
}
.hh2__link:hover { color: #fff; text-decoration-color: #fff; }
/* Leiser Nachsatz unter dem CTA: was nach den 5 Fragen passiert */
.hh2__note {
  margin: 1rem 0 0; max-width: 44em;
  font-size: .875rem; font-weight: 500; line-height: 1.5; color: var(--hh2-muted); text-wrap: balance;
}

.hh2__coach {
  display: flex; align-items: center; gap: .85rem;
  margin: clamp(2rem, 1.5rem + 1.6vw, 3rem) 0 0; text-align: left;
}
.hh2__coach-img {
  flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}
.hh2__coach-text { display: flex; flex-direction: column; gap: .2rem; }
.hh2__coach-name { font-size: .9375rem; font-weight: 700; line-height: 1.25; color: #fff; }
.hh2__coach-role { font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--hh2-muted); }

/* ---------- Breakpoints ---------- */
@media (min-width: 1920px) {
  .hh2__title { font-size: clamp(3.75rem, 1rem + 2.3vw, 4.25rem); }
}
/* Kurze Desktop-Viewports (Laptops): enger setzen, damit Bahn und Laeufer im ersten Bild bleiben */
@media (min-width: 1000px) and (max-height: 820px) {
  .hh2 { padding-top: calc(var(--header-h) + clamp(1.25rem, 3svh, 2.5rem)); padding-bottom: calc(var(--hh2-track-h) + 1.5rem); }
  .hh2__tagline { margin-bottom: 1.25rem; }
  .hh2__title { font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); }
  .hh2__lead { margin-top: .9rem; font-size: 1.0625rem; }
  .hh2__actions { margin-top: 1.5rem; }
  .hh2__note { margin-top: .75rem; }
  .hh2__coach { margin-top: 1.5rem; }
}
@media (max-width: 999px) {
  .hh2 { --hh2-track-focus: 62%; }
}
@media (max-width: 599px) {
  .hero-v2 { --hh2-track-h: 210px; }
  /* Handy: Bahn kleiner skaliert (ueber die Breite), damit die Kurve rechts ganz sichtbar ist; die Zeichnung
     laeuft unterhalb des viewBox weiter (overflow: visible) und fuellt die Buehne bis zur Hero-Unterkante. */
  .hh2 { --hh2-track-focus: 76%; }
  .hh2-track { width: 200vw; height: calc(200vw * 400 / 1920); min-width: 0; }
  .hh2-track__nums { display: none; }
  .hh2-runner__dot { stroke-width: 22; }
  .hh2-runner__trail { stroke-width: 5; }
  .hh2__actions { flex-direction: column; gap: .5rem; width: 100%; }
  .hh2__btn { width: 100%; max-width: 22rem; }
}
/* Handy quer: nur Kern (H1, Text, CTA), kompakt */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 999px) {
  .hero-v2 { --hh2-track-h: 150px; }
  .hh2 { padding-top: calc(var(--header-h) + .75rem); padding-bottom: calc(var(--hh2-track-h) + 1.25rem); }
  .hh2__tagline, .hh2__coach, .hh2__note { display: none; }
  .hh2__title { font-size: 1.75rem; }
  .hh2__lead { margin-top: .6rem; font-size: 1rem; line-height: 1.5; }
  .hh2__actions { margin-top: 1rem; }
  .hh2__btn { min-height: 48px; padding-block: .7rem; }
}

/* Untertitel: ab Tablet je Satz eine Zeile (Umbruch am Punkt statt mitten im Satz) */
@media (min-width: 700px) {
  .hero-v2 .hh2__lead { max-width: 40em; }
  .hero-v2 .hh2__lead > span { display: block; }
}