/* Freigegebene Startseiten-Bewegung, additive Produktionsdatei.
 * Alles steht unter html:not(.mc-off); mit .mc-off (Schalter oder ?motion=alt) gilt exakt das Original.
 * Regeln:
 *  - Keine neue Tokenwelt: vorhandene --ease-reveal / --t-* / --ease-ui werden genutzt. Einzige Ergänzung ist die
 *    starke Ausgangskurve aus der Animationsvorgabe (--mc-out), lokal auf html:not(.mc-off).
 *  - Keine zweite Transform-/Opacity-Animation auf einem Element, das schon eine hat: neue Bewegung läuft auf
 *    anderen Eigenschaften (clip-path, translate, scale) oder auf Elementen ohne Vorbesitz (Pseudo-Elemente, Zahl).
 *  - Hero-Effekte nur nach dem ersten Szenenwechsel (.hero:not(.hero-init)); Szene 1 + CTAs stehen beim Laden sofort.
 *  - Bewegung nur unter prefers-reduced-motion: no-preference; Hover nur unter (hover: hover) and (pointer: fine).
 */
html:not(.mc-off) { --mc-out: cubic-bezier(.23, 1, .32, 1); }
/* Verdeckte Folien dürfen beim Fokussieren keinen internen Scrollversatz des Bildrahmens erzeugen. */
html:not(.mc-off) .hero { overflow: clip; }

/* ------------------------------------------------------------------ Hero: Hintergrund
 * Original: Szenenbild skaliert 1.06 -> 1 in 9 s (ease fast linear). Neu: größerer Weg, starker Ausgang, 7 s:
 * zu Beginn der Szene deutlich sichtbarer Zug, danach ruhiges Einrasten. Gleiche Eigenschaft (transform) – ersetzt, konkurriert nicht. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mc-off) .hero-bg { transform: scale(1.12); transition: transform 7s var(--mc-out); }
  html:not(.mc-off) .hero-slide.is-on .hero-bg { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.mc-off) .hero-bg, html:not(.mc-off) .hero-slide.is-on .hero-bg { transform: none; transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------------------------------------------------------------- Hero: Szenenwechsel (ab Szene 2 / Wiederkehr)
   * 1) Lichtkante: schmales violettes Band läuft einmal über die neue Szene (Pseudo-Element, nur transform/opacity). */
  html:not(.mc-off) .hero:not(.hero-init) .hero-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, rgba(151, 119, 208, 0) 38%, rgba(151, 119, 208, .30) 50%, rgba(151, 119, 208, 0) 62%);
    transform: translateX(-100%); opacity: 0;
  }
  html:not(.mc-off) .hero:not(.hero-init) .hero-slide.is-on::before { animation: mc-sweep 1.2s var(--mc-out) .1s both; }

  /* 2) Titel: Wischreveal per clip-path (Eigenschaft ohne Vorbesitz; opacity/transform des Titels bleiben original).
   *    Großzügiger Ausschnitt, damit Kontur und text-shadow nicht beschnitten werden. fill backwards: Endzustand = Original. */
  html:not(.mc-off) .hero:not(.hero-init) .hero-slide.is-on .hero-title { animation: mc-wipe .95s var(--mc-out) .5s backwards; }

  /* 3) Konturzeile versetzt nachziehen: individuelle Eigenschaft translate auf dem inneren Span, Eltern-Transform unberührt. */
  html:not(.mc-off) .hero:not(.hero-init) .hero-slide.is-on .hero-outline { animation: mc-outline .9s var(--mc-out) .85s backwards; }

  /* 4) Szenenanzeige: Indikator federt über die vorhandene Breitenänderung ohne Ruck (nur Kurve ersetzt). */
  html:not(.mc-off) .hero-ind { transition: width .45s var(--mc-out); }
}
@keyframes mc-sweep { 0% { transform: translateX(-100%); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes mc-wipe { from { clip-path: inset(-14% 100% -14% -3%); } to { clip-path: inset(-14% -8% -14% -3%); } }
@keyframes mc-outline { from { translate: -.12em 0; } to { translate: 0 0; } }

/* Pausen zeigen lesbare Endzustände; keine halb verdeckten Titel beim Anhalten. */
html:not(.mc-off) .hero:not(.hero-init).is-paused .hero-slide.is-on::before,
html:not(.mc-off) .hero:not(.hero-init).is-paused .hero-slide.is-on .hero-title,
html:not(.mc-off) .hero:not(.hero-init).is-paused .hero-slide.is-on .hero-outline,
html.mc-hidden:not(.mc-off) .hero:not(.hero-init) .hero-slide.is-on::before,
html.mc-hidden:not(.mc-off) .hero:not(.hero-init) .hero-slide.is-on .hero-title,
html.mc-hidden:not(.mc-off) .hero:not(.hero-init) .hero-slide.is-on .hero-outline { animation: none; }
html:not(.mc-off) .hero.is-paused .hero-bg,
html.mc-hidden:not(.mc-off) .hero-bg { transition: none; }

/* ------------------------------------------------------------------ Hochzeitsszene (.hero-s2): Bildausschnitt
 * Ursache des Abschnitts: Original nutzt object-fit: cover mit "right center" ab 768 px und wählt das Bild nur nach
 * Breite. Bei Fensterformaten schmaler als das Desktopbild (4:3) fällt links Bild weg (Bräutigam), mobil (1154x2048,
 * Gesichter ca. x4–95 %) schneidet cover bei Seitenverhältnis < 0,5635 beidseitig, und der Hero-Zoom schneidet weiter.
 * Gemessen an den Originalbildern (Anteile der Bildgröße): Desktopbild Köpfe x23–80 %, y14–50 %; Hochformatbild Köpfe
 * x6–93 %, y12–35 %. Strategie nach Seitenverhältnis A des Fensters (Bildwahl im Release-Builder):
 *   A < 0,5635 (390x844, 360x800)   Hochformatbild, contain an der Oberkante, Unterkante weich ins Dunkel (Copy wie Original, mittig).
 *   0,5635 < A ≤ 1,5 und Breite ≤ 1279 px (768x1024, 780x810, 800x1000, 900x900, 1024x768 …)   [Block „M“, dritte Fassung]
 *                                   Desktopbild bildfüllend: Rahmen = voller Hero, nur bei sehr hohen Fenstern auf 1,18 x Breite
 *                                   begrenzt (damit seitlich nie mehr als x20–82 % des Bildes wegfällt; Rest weich ins Dunkel),
 *                                   cover, mittig (50 %), oben ausgerichtet, kein Zoom. Originaltitel dreizeilig, 60–72 px.
 *                                   Copy beginnt unter dem geschützten linken Kopfbereich (43,5 % der Bildhöhe) und steht links
 *                                   unter dem Bräutigam (Titel liegt schmaler als der Abstand zum mittleren Kopf), nicht unter allen Köpfen.
 *                                   Szenenregler rücken unter das Textende (nie über dem CTA); gilt für alle Szenen, damit er nicht springt.
 *   sonst (Breite ≥ 1279 px, A > 1,5) Desktopbild cover, 50,5 % 35 % wie bisher; ab 1280 px liegt die Copy laut Original tiefer.
 * Reduced Motion: bereits ohne Transform (siehe oben). */
html:not(.mc-off) .hero-s2 .hero-bg { inset: 0; }
html:not(.mc-off) .hero-s2 .hero-bg img { object-fit: cover; object-position: 50.5% 35%; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.mc-off) .hero-s2 .hero-bg { transform: scale(1.04); transform-origin: 50.5% 35%; }
}
@media (min-aspect-ratio: 1155/2048) and (max-aspect-ratio: 3/2) and (max-width: 1279px) {
  /* Maße (auf .hero, damit auch die Szenenregler sie nutzen; Hero-Höhe wie im Original max(100svh, 560px)):
   *  --mc-hf   Bildrahmenhöhe: voller Hero, höchstens 1,18 x Breite
   *  --mc-hd   tatsächliche Bildhöhe bei cover (bei breiten Fenstern wächst das Bild über den Rahmen, oben ausgerichtet)
   *  --mc-chin untere Grenze des geschützten Bräutigam-Kopfbereichs, einschließlich Abstand
   *  --mc-fs   Titelgröße 60–72 px (Original: --fs-hero 60–77 px)
   *  --mc-ch   Copy-Höhe: 135 px (Eyebrow, Untertitel, CTA, Abstände) + 3 Titelzeilen */
  html:not(.mc-off) .hero {
    --mc-hf: min(max(100svh, 560px), calc(100vw * 1.18));
    --mc-hd: max(var(--mc-hf), calc(100vw * .75));
    --mc-chin: calc(var(--mc-hd) * .435);
    --mc-fs: clamp(60px, 7.8vw, 72px);
    --mc-ch: calc(135px + 3 * var(--mc-fs));
  }
  html:not(.mc-off) .hero-s2 .hero-bg { inset: auto 0 auto 0; top: 0; height: var(--mc-hf); transform: none; transition: none; }
  html:not(.mc-off) .hero-s2 .hero-bg img { object-fit: cover; object-position: 50% 0; }
  /* Weicher Auslauf nur an der Rahmenunterkante (relevant, wenn der Rahmen kürzer als der Hero ist); Endfarbe so, dass
   * brightness(.8) (Original unter 768 px) wieder #0F0F10 ergibt. Kein Verlauf über das Motiv. */
  html:not(.mc-off) .hero-s2 .hero-bg::after { background: linear-gradient(to bottom, rgba(15, 15, 16, 0) 80%, var(--c-dark) 100%); }
  html:not(.mc-off) .hero-s2 .hero-copy { top: var(--mc-chin); bottom: auto; justify-content: flex-start; padding: 16px 0; }
  html:not(.mc-off) .hero-s2 .hero-title { font-size: var(--mc-fs); line-height: 1; }
  /* Der Button blendet ein, bewegt sich dabei aber nicht in die darunterliegenden Regler. */
  html:not(.mc-off) .hero-s2 .hero-action { transform: none; }
  /* Regler unter dem Textende (mindestens Originalposition), unabhängig von der Szene: kein Sprung beim Szenenwechsel. */
  html:not(.mc-off) .hero-inds { top: max(calc(50% + 213px), calc(var(--mc-chin) + var(--mc-ch) + 12px)); bottom: auto; }
  /* Bildnachweis rechts über dem Zähler; links bleibt die Reglerzeile frei. */
  html:not(.mc-off) .hero .dn-ki-badge { left: auto; right: 27px; bottom: 131px; }
}
@media (min-aspect-ratio: 1155/2048) and (max-aspect-ratio: 3/2) and (max-width: 767px) {
  html:not(.mc-off) .hero-s2 .hero-bg::after { background: linear-gradient(to bottom, rgba(19, 19, 20, 0) 80%, rgb(19, 19, 20) 100%); }
}
@media (min-aspect-ratio: 1155/2048) and (max-aspect-ratio: 3/2) and (min-width: 901px) and (max-width: 1279px) {
  html:not(.mc-off) .hero .dn-ki-badge { right: 63px; bottom: 176px; }
  /* Original hat die weiche Textabdunklung nur bis 900 px; hier derselbe Verlauf, begrenzt auf den Copy-Block (beginnt unter dem Kinn). */
  html:not(.mc-off) .hero-s2 .hero-copy::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side at 50% 50%, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 100%);
  }
}
@media (max-aspect-ratio: 1154/2048) {
  html:not(.mc-off) .hero-s2 .hero-bg { transform: none; transform-origin: 50% 0; transition: none; }
  /* Bildunterkante = Breite x 2048/1154; Ausblendung endet knapp davor (Rundung/Scrollbar), Endfarbe so gewählt, dass
   * brightness(.8) (Original unter 768 px) wieder #0F0F10 ergibt. */
  html:not(.mc-off) .hero-s2 .hero-bg img { object-fit: contain; object-position: 50% 0; }
  html:not(.mc-off) .hero-s2 .hero-bg::after {
    background: linear-gradient(to bottom, rgba(19, 19, 20, 0) calc(100vw * 1.7747 - 24vw), rgb(19, 19, 20) calc(100vw * 1.7747 - 2vw));
  }
}
@media (max-aspect-ratio: 1154/2048) and (min-width: 768px) {
  html:not(.mc-off) .hero-s2 .hero-bg::after {
    background: linear-gradient(to bottom, rgba(15, 15, 16, 0) calc(100vw * 1.7747 - 24vw), var(--c-dark) calc(100vw * 1.7747 - 2vw));
  }
}

@media (max-width: 480px) {
  /* Platz für die vorhandene 16px-Einblendung des Buttons vor den Szenenreglern. */
  html:not(.mc-off) .hero-s2 .hero-action { margin-top: 2px; transform: none; }
}

/* ------------------------------------------------------------------ Hero-Zähler (Szenennummer)
 * Der Wechsel selbst (Mutation) wird in candidate.js per WAAPI an <strong class="hero-num"> gespielt. Hier nur die Basis. */
html:not(.mc-off) .hero-num { display: inline-block; }

/* ------------------------------------------------------------------ Bedienreaktionen
 * Druck bleibt wie im Original (scale .96). Neu: Anheben beim Hovern über die getrennte Eigenschaft translate;
 * die Übergangsliste wird um translate erweitert (Reihenfolge der Dauern ersetzt die Originalliste vollständig). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mc-off) :is(.btn-lilac, .hero-btn.hero-btn) {
    transition-property: border-color, color, scale, translate;
    transition-duration: var(--t-hover), var(--t-hover), var(--t-release), var(--t-fast);
    transition-timing-function: var(--ease-ui), var(--ease-ui), var(--mc-out), var(--mc-out);
  }
  html:not(.mc-off) :is(.btn-lilac, .hero-btn.hero-btn):active {
    scale: .96; translate: 0 0;
    transition-duration: var(--t-hover), var(--t-hover), var(--t-press), var(--t-press);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.mc-off) :is(.btn-lilac, .hero-btn.hero-btn):hover { translate: 0 -2px; }
  html:not(.mc-off) :is(.btn-lilac, .hero-btn.hero-btn):active:hover { translate: 0 0; }
}

/* Galerie: Bild reagiert auf den Zeiger (nur feiner Zeiger). Kein Hover-Zoom auf Touch, kein Dauerloop. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.mc-off) .gl-slide img { transition: transform .7s var(--mc-out); }
  html:not(.mc-off) .gl-slide:hover img { transform: scale(1.04); }
}

/* ------------------------------------------------------------------ Abschnittsbild (Leistungskarten)
 * Scroll-gekoppeltes Einrasten des Bildes beim Eintritt: Eigenes Element (.s2-media img), kein Konflikt mit
 * .s2-t1/.s2-t2/.s2-dim (Eltern). Nur wo animation-timeline unterstützt wird; sonst bleibt das Bild statisch. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.mc-off) .s2-media img { animation: mc-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes mc-settle { from { transform: scale(1.08); } to { transform: scale(1); } }