/* Hero „Hafen“ (v2, Marcel 04.11.2026: final, unverändert übernommen aus mk-hero-test-v2.vercel.app). Alles hier hängt
   an .hv2, damit der Rest der Seite unberührt bleibt. Der Hell/Dunkel-Modus gilt nur für den Hero (data-hv2-modus).
   Die Kopfnavigation, das Menü und die schwebende Leiste der Testvariante fehlen bewusst: die Seite hat beides schon. */
.hv2 {
  --akzent: #e0660a;
  --akzent-hover: #ec7418;
  --titel: "Space Grotesk", system-ui, sans-serif;
  --fliess: "Inter", system-ui, sans-serif;
  --betont: "Instrument Serif", Georgia, serif;
  --rand: clamp(20px, 5.5vw, 88px);
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
  font: 400 1rem/normal var(--fliess); color: var(--tinte); -webkit-font-smoothing: antialiased; text-align: left;
}
/* Dunkel: wie die heutige Seite, Blaue Stunde läuft in Anthrazit aus */
.hv2[data-hv2-modus="dunkel"] {
  color-scheme: dark;
  --grund: #111214;
  --flaeche: #1b1d21;
  --tinte: #f4f2ef;
  --text: #c4c8ce;
  --leise: #9ba1a9;
  --linie: rgba(255, 255, 255, 0.11);
  --akzent-text: #f07a24;
  --pille: rgba(27, 29, 33, 0.72);
  --pille-rand: rgba(255, 255, 255, 0.10);
  --pille-hover: rgba(255, 255, 255, 0.08);
  --schatten: 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  --ki-grund: rgba(17, 18, 20, 0.72);
}
/* Hell: warmes Papier, Foto als Karte, Kopf ragt heraus */
.hv2[data-hv2-modus="hell"] {
  color-scheme: light;
  --grund: #f7f3ee;
  --flaeche: #efe9e1;
  --tinte: #1b1d21;
  --text: #3d4148;
  --leise: #5f646c;
  --linie: #e2dbd2;
  --akzent-text: #ad4c09;   /* 4,98:1 auf --grund (vorher #b8520a mit 4,47:1, Codex 04.11.2026) */
  --pille: rgba(255, 255, 255, 0.84);
  --pille-rand: rgba(27, 29, 33, 0.09);
  --pille-hover: rgba(27, 29, 33, 0.06);
  --schatten: 0 10px 30px -14px rgba(60, 35, 15, 0.35);
  --ki-grund: rgba(255, 255, 255, 0.88);
}
.hv2 *, .hv2 *::before, .hv2 *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* der Hauptknopf behält seine dunkle Schrift auf akzent (sonst 3,09:1) */
.hv2 a:not(.hv2-knopf) { color: inherit; }
.hv2 :focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.hv2 img { max-width: none; }

/* ============ Kopf ============ */
.hv2-kopf {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px; height: 68px;
  padding: 0 var(--rand); padding-top: env(safe-area-inset-top);
}
.hv2-marke { display: grid; gap: 2px; text-decoration: none; border-radius: 6px; margin-right: auto; }
.hv2-marke b { font: 700 1.0625rem/1 var(--titel); letter-spacing: -0.01em; color: var(--tinte); }
.hv2-marke b i { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--akzent); }
.hv2-marke span { display: none; font-size: 0.75rem; color: var(--leise); }
.hv2-pille {
  background: var(--pille);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--pille-rand);
  box-shadow: var(--schatten);
  border-radius: 999px;
}
@media (prefers-reduced-transparency: reduce) { .hv2-pille { background: var(--flaeche); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.hv2-modus {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0;
  font: 500 0.9375rem/1 var(--titel); color: var(--tinte); cursor: pointer; width: 44px;
}
.hv2-modus svg { width: 18px; height: 18px; }
.hv2[data-hv2-modus="dunkel"] .hv2-modus .hv2-mond, .hv2[data-hv2-modus="hell"] .hv2-modus .hv2-sonne { display: none; }
.hv2-modus:hover { background: var(--pille-hover); }
/* Navigation oben rechts (Marcel 04.11.2026, wie auf seinen Bildern). Beim Scrollen blendet sie aus (held.js), weiter unten
   erscheint die Leiste der Seite in der Mitte unten. */
.hv2-nav { display: flex; align-items: center; gap: 2px; padding: 4px; margin-right: 6px; }
.hv2-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px; color: var(--tinte); font: 500 0.9375rem/1 var(--titel);
  text-decoration: none; white-space: nowrap; }
.hv2-nav a:hover { background: var(--pille-hover); }
.hv2-nav a:focus-visible { outline-offset: -2px; }
@media (max-width: 1099px) { .hv2-marke span { display: none !important; } .hv2-nav a { padding: 0 11px; } }
/* Passt die Pille neben Name und Schalter nicht (große Schrift), entfällt sie; die Leiste unten steht dann gleich da (held.js) */
.hv2.hv2-eng .hv2-nav { display: none; }
.hv2-modus { flex: none; }
/* Am Handy trägt die Kopfleiste der Seite Name, Modus und Menü: der eigene Kopf des Heros entfällt dort */
@media (max-width: 759px) { .hv2-kopf { display: none; } }

/* ============ Hero ============ */
.hv2 {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: 100svh; background: var(--grund);
}

/* Bühne mit den Ebenen. Jede Ebene trägt dasselbe Quadrat, so liegen alle deckungsgleich */
.hv2-buehne { position: relative; container-type: size; }
.hv2-ebene { position: absolute; inset: 0; pointer-events: none; }
.hv2-quadrat {
  --s: max(100cqw, 100cqh);
  position: absolute; width: var(--s); height: var(--s);
  left: calc((100cqw - var(--s)) * var(--ox, 0.55));
  top: calc((100cqh - var(--s)) * var(--oy, 0.4));
}
.hv2-quadrat img, .hv2-quadrat picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hv2-karte, .hv2-personrahmen { position: absolute; inset: 0; }
.hv2-karte { overflow: hidden; }
.hv2-drift { position: absolute; inset: 0; }
.hv2-glanz img { opacity: 0.7; }
.hv2-glanz img + img { opacity: 0; }
.hv2-licht {
  position: absolute; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 160, 0.55), rgba(255, 180, 110, 0.18) 45%, transparent);
  mix-blend-mode: screen; opacity: 0.75;
}
.hv2-licht.hv2-klein { width: 3.4%; opacity: 0.6; }
.hv2-schleier { position: absolute; inset: 0; background: var(--grund); opacity: 0; pointer-events: none; }
.hv2-ki {
  position: absolute; z-index: 3; padding: 4px 10px; border-radius: 999px;
  background: var(--ki-grund); color: var(--tinte);
  font: 500 0.75rem/1.2 var(--titel); letter-spacing: 0.01em;
  translate: 0 calc(-1 * var(--hv2-ki-hub, 0px));   /* nur gegen die Leiste der Seite, siehe held.js */
}

.hv2-text { position: relative; z-index: 4; padding: 0 var(--rand); }
.hv2 h1 { font: 700 clamp(2.1rem, 10.8vw, 3.1rem)/1.06 var(--titel); letter-spacing: -0.035em; color: var(--tinte); }
.hv2 h1 .hv2-zeile { display: block; width: fit-content; white-space: nowrap; }
.hv2 h1 em { font-family: var(--betont); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.12em; line-height: 0.9; color: var(--akzent-text); }
.hv2-satz { margin-top: 14px; max-width: 30rem; font-size: 1.0625rem; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.hv2-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  background: var(--akzent); color: #1b1d21;
  font: 700 1.0625rem/1.1 var(--titel); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(201, 90, 8, 0.7);
  transition: background 160ms ease, transform 160ms ease;
}
.hv2-knopf:hover { background: var(--akzent-hover); }
.hv2-knopf:active { transform: scale(0.98); }
.hv2-knopf svg { width: 18px; height: 18px; flex: none; transition: transform 160ms ease; }
.hv2-knopf:hover svg { transform: translateX(3px); }
.hv2-aktion { margin-top: 22px; }
@media (max-width: 599px) { .hv2-aktion .hv2-knopf { width: 100%; padding: 0 18px; gap: 10px; font-size: min(1.0625rem, 4.3vw); } }
.hv2-fakten { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; font-size: 0.875rem; line-height: 1.3; color: var(--text); }
.hv2-fakten li { display: inline-flex; align-items: center; gap: 8px; }
.hv2-fakten svg { width: 16px; height: 16px; flex: none; color: var(--akzent-text); }
.hv2-fakten strong { font-weight: 600; color: var(--tinte); }

/* ---- Mobil dunkel: Bild oben über die volle Breite, Text greift weich hinein ---- */
.hv2 { grid-template-rows: auto auto; align-content: start; }
.hv2[data-hv2-modus="dunkel"] .hv2-buehne { height: min(66svh, 150vw); min-height: 330px; }
.hv2[data-hv2-modus="dunkel"] .hv2-buehne .hv2-quadrat { --oy: 0.25; }
.hv2[data-hv2-modus="dunkel"] .hv2-karte {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%); mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}
.hv2[data-hv2-modus="dunkel"] .hv2-personrahmen { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%); mask-image: linear-gradient(180deg, #000 62%, transparent 97%); }
.hv2[data-hv2-modus="dunkel"] .hv2-text { margin-top: -16svh; padding-bottom: 32px; }
.hv2[data-hv2-modus="dunkel"] .hv2-ki { right: 12px; top: 76px; }
.hv2[data-hv2-modus="dunkel"] .hv2-buehne::after { content: ""; position: absolute; inset: 0 0 auto; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(17, 18, 20, 0.9), rgba(17, 18, 20, 0.5) 45%, transparent); }

/* ---- Mobil hell: Karte unter dem Kopf, Kopf ragt über die Kante ---- */
.hv2[data-hv2-modus="hell"] .hv2-buehne { height: min(48svh, 118vw); min-height: 280px; margin: 68px 12px 0; }
.hv2[data-hv2-modus="hell"] .hv2-buehne .hv2-quadrat { --oy: 0; }
.hv2[data-hv2-modus="hell"] .hv2-karte { clip-path: inset(21% 0 0 0 round 24px); background: #2a3a55; }
.hv2[data-hv2-modus="hell"] .hv2-personrahmen { clip-path: inset(-40% 0 1px 0 round 0 0 24px 24px); }
.hv2[data-hv2-modus="hell"] .hv2-schleier { clip-path: inset(21% 0 0 0 round 24px); }
.hv2[data-hv2-modus="hell"] .hv2-ki { left: 12px; bottom: 12px; }
.hv2[data-hv2-modus="hell"] .hv2-text { margin-top: 22px; padding-bottom: 32px; }
@media (max-height: 700px) { .hv2[data-hv2-modus="hell"] .hv2-buehne { height: 42svh; } }

@media (min-width: 600px) {
  .hv2-marke span { display: block; }
  .hv2 h1 { font-size: clamp(3.2rem, 8vw, 4.2rem); }
  .hv2-satz { font-size: 1.1875rem; margin-top: 18px; }
  .hv2-aktion { margin-top: 28px; }
  .hv2-fakten { margin-top: 22px; font-size: 0.9375rem; }
}

/* ---- Desktop, Querformat ---- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hv2-kopf { height: 88px; }
  .hv2 { grid-template-rows: 1fr; align-content: stretch; }
  .hv2-buehne { grid-area: 1 / 1; }
  .hv2-text { grid-area: 1 / 1; align-self: center; padding: 88px var(--rand) 4svh; margin: 0 !important; }
  .hv2-text > * { max-width: min(37rem, 50vw - var(--rand) - 24px); }
  .hv2-satz { max-width: min(27rem, 50vw - var(--rand) - 24px); }
  .hv2-fakten { display: grid; gap: 8px; }
  .hv2 h1 { font-size: clamp(3.4rem, 4.9vw, 5.1rem); }

  .hv2[data-hv2-modus="dunkel"] .hv2-buehne { height: auto; min-height: 0; margin-left: 44vw; }
  .hv2[data-hv2-modus="dunkel"] .hv2-buehne .hv2-quadrat { --ox: 0.5; --oy: 0.3; }
  .hv2[data-hv2-modus="dunkel"] .hv2-karte {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.45) 16%, #000 38%), linear-gradient(180deg, #000 72%, transparent 99%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.45) 16%, #000 38%), linear-gradient(180deg, #000 72%, transparent 99%);
    mask-composite: intersect;
  }
  .hv2[data-hv2-modus="dunkel"] .hv2-personrahmen { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%); }
  .hv2[data-hv2-modus="dunkel"] .hv2-ki { top: auto; right: 22px; bottom: 20px; }
  .hv2[data-hv2-modus="dunkel"] .hv2-buehne::after { height: 22%; background: linear-gradient(180deg, rgba(17, 18, 20, 0.6), transparent); }

  .hv2[data-hv2-modus="hell"] .hv2-buehne { height: auto; min-height: 0; margin: 92px var(--rand) 4svh auto; width: min(46vw, 820px); }
  .hv2[data-hv2-modus="hell"] .hv2-buehne .hv2-quadrat { --ox: 0.5; --oy: 0; }
  .hv2[data-hv2-modus="hell"] .hv2-karte, .hv2[data-hv2-modus="hell"] .hv2-schleier { clip-path: inset(22% 0 0 0 round 30px); }
  .hv2[data-hv2-modus="hell"] .hv2-personrahmen { clip-path: inset(-40% 0 1px 0 round 0 0 30px 30px); }
  .hv2[data-hv2-modus="hell"] .hv2-ki { left: 18px; bottom: 18px; }
}

/* ============ Lebender Hintergrund (nur ohne Bewegungsreduktion) ============ */
@media (prefers-reduced-motion: no-preference) {
  .hv2-drift { animation: hv2-wolken 38s ease-in-out infinite alternate; }
  .hv2-glanz img { animation: hv2-glanz-a 5.5s ease-in-out infinite alternate; }
  .hv2-glanz img + img { animation-name: hv2-glanz-b; }
  .hv2-licht { animation: hv2-atmen 4.2s ease-in-out infinite alternate; }
  .hv2-licht:nth-of-type(2n) { animation-duration: 5.1s; animation-delay: -1.7s; }
  .hv2-licht:nth-of-type(3n) { animation-duration: 3.6s; animation-delay: -0.8s; }
  .hv2.hv2-ruht .hv2-drift, .hv2.hv2-ruht .hv2-glanz img, .hv2.hv2-ruht .hv2-licht { animation-play-state: paused; }
  .hv2-text > * { animation: hv2-hoch 760ms var(--weich) both; }
  .hv2-text > :nth-child(2) { animation-delay: 90ms; }
  .hv2-text > :nth-child(3) { animation-delay: 180ms; }
  .hv2-text > :nth-child(4) { animation-delay: 270ms; }
  .hv2-person img { animation: hv2-ein 1200ms var(--weich) both; }
}
@keyframes hv2-wolken { from { transform: scale(1.08) translateX(-1.6%); } to { transform: scale(1.08) translateX(1.6%); } }
@keyframes hv2-glanz-a { from { opacity: 0.85; } to { opacity: 0.15; } }
@keyframes hv2-glanz-b { from { opacity: 0.1; } to { opacity: 0.85; } }
@keyframes hv2-atmen { from { opacity: 0.5; transform: scale(0.92); } to { opacity: 0.9; transform: scale(1.08); } }
@keyframes hv2-hoch { from { opacity: 0; transform: translateY(14px); } }
@keyframes hv2-ein { from { opacity: 0; transform: translateY(10px); } }
.hv2-animiert { will-change: transform; }
/* Dunkel endet der Kopf im Grundton des ersten Abschnitts, ohne Farbkante; unter der Schrift und dem Etikett */
.hv2[data-hv2-modus="dunkel"]::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 72px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ton-grund)); }