/* =====================================================================
   Alternative „ruhiges Scrollen“ (Entwurf 25.10.2026, nur Branch alternative-scroll).
   Aktiv über <html data-variant="alt">. Höhepunkt: die helle Fläche schiebt sich über das stehende Landschaftsbild.
   ===================================================================== */

/* 1. Startbild bleibt stehen, der Inhalt schiebt sich darüber */
[data-variant="alt"] .hero { position: sticky; top: 0; z-index: 0; }
[data-variant="alt"] main { position: relative; z-index: 1; background: var(--paper); }
[data-variant="alt"] .about {
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px -20px rgba(40, 8, 26, 0.35);
  background: var(--paper);
}
[data-variant="alt"] .hero picture, [data-variant="alt"] .hero-copy { will-change: transform; }
[data-variant="alt"] .hero-veil { transition: none; }

/* 2. Navigation bleibt erreichbar: nach dem Startbild schmale helle Leiste mit Buchungsbutton */
[data-variant="alt"] .nav.is-hidden { transform: none; }
@media (min-width: 861px) {
  [data-variant="alt"] .nav.is-scrolled nav a:not(.nav-cta):not(.alt-keep) { display: none; }
  [data-variant="alt"] .nav.is-scrolled nav a.alt-keep { display: inline; }
}
[data-variant="alt"] .nav.is-scrolled { padding-top: 0.55rem; padding-bottom: 0.55rem; }
[data-variant="alt"] .nav.is-scrolled .nav-cta {
  background: var(--forest); color: var(--ivory); border: 0; border-radius: 999px;
  padding: 0.55rem 1.1rem; letter-spacing: 0.1em;
}
[data-variant="alt"] .nav.is-scrolled .nav-cta:hover { background: #4a0e2d; }

/* 3. Einführung: Frage links bleibt stehen, rechts ziehen Erklärung und Begriffe vorbei */
@media (min-width: 981px) {
  [data-variant="alt"] .about { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; row-gap: 1.6rem; }
  [data-variant="alt"] .about-head { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 8rem; align-self: start; }
  [data-variant="alt"] .about-body, [data-variant="alt"] .about > .about-names, [data-variant="alt"] .about-more, [data-variant="alt"] .alt-trial { grid-column: 2; }
  [data-variant="alt"] .about > .about-names { grid-template-columns: 1fr; margin-top: 0.4rem; }
  [data-variant="alt"] .about-more { justify-self: stretch; max-width: none; }
}
/* Abkürzung zum ersten Kurs */
.alt-trial { display: none; }
[data-variant="alt"] .alt-trial {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; grid-column: 1 / -1;
  margin: 0.6rem 0 0; padding: 1.1rem 1.4rem; border-left: 2px solid var(--sage); background: var(--card);
}
[data-variant="alt"] .alt-trial strong { font-family: Marcellus, serif; font-weight: 500; font-size: 1.45rem; color: var(--ink); }
[data-variant="alt"] .alt-trial a { color: var(--accent); text-decoration: none; letter-spacing: 0.06em; }
[data-variant="alt"] .alt-trial a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 4. Kurskarten: vorhandenes Einblenden, Verzögerung je Spalte statt je Karte (setzt das Skript) */

/* 5. Drei Schritte nacheinander hervorheben */
[data-variant="alt"] .steps li { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-variant="alt"] .steps.alt-steps li { opacity: 0.35; transform: translateY(8px); }
[data-variant="alt"] .steps.alt-steps li.is-lit { opacity: 1; transform: none; }
[data-variant="alt"] .steps li > span { transition: color 0.6s var(--ease); }
[data-variant="alt"] .steps li.is-lit > span { color: var(--accent); }

/* 6. Bild im Zitatkasten bewegt sich minimal in seinem Rahmen */
[data-variant="alt"] .preview { overflow: hidden; }
[data-variant="alt"] .preview > img { transform: translateY(var(--alt-shift, 0px)) scale(1.12); will-change: transform; }

/* 7. Handy: unten ein gut erreichbarer Button „Kostenlos ausprobieren“ */
.alt-mobile-cta { display: none; }
@media (max-width: 860px) {
  [data-variant="alt"] .alt-mobile-cta {
    display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
    text-align: center; background: var(--forest); color: var(--ivory); text-decoration: none; border-radius: 999px;
    padding: 0.95rem 1rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 10px 30px -10px rgba(40, 8, 26, 0.55); transform: translateY(160%); transition: transform 0.45s var(--ease);
  }
  [data-variant="alt"] .alt-mobile-cta.is-on { transform: none; }
  [data-variant="alt"] footer.site-footer { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-variant="alt"] .hero picture, [data-variant="alt"] .hero-copy, [data-variant="alt"] .preview > img { transform: none !important; }
  [data-variant="alt"] .steps.alt-steps li { opacity: 1; transform: none; transition: none; }
  [data-variant="alt"] .alt-mobile-cta { transition: none; }
}

/* Korrekturen aus der Prüfschleife */
[data-variant="alt"] footer.site-footer { position: relative; z-index: 1; }          /* Startbild darf hinter der Fußzeile nicht durchscheinen */
@media (min-width: 981px) { [data-variant="alt"] .about .alt-trial { grid-column: 2; } }
[data-variant="alt"] .preview-ui { position: relative; z-index: 1; background: var(--forest); }  /* bewegtes Bild bleibt unter der Textspalte */

/* =====================================================================
   Choreografie statt „alles auf einmal“ (25.10., Rückmeldung Marc)
   ===================================================================== */
/* Überschriften: Wörter steigen nacheinander aus einer unsichtbaren Kante auf */
[data-variant="alt"] .aw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
[data-variant="alt"] .aw > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--w, 0) * 55ms); }
[data-variant="alt"] .is-words .aw > span { transform: none; }
/* Texte folgen der Überschrift, etwas ruhiger und länger */
[data-variant="alt"].js [data-rv] { transition-duration: 1.1s; transition-delay: calc(var(--rv-i, 0) * 140ms + 260ms); }
/* Fotos öffnen sich wie ein Vorhang von unten und zoomen dabei leicht zurück */
[data-variant="alt"] .alt-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1); }
[data-variant="alt"] .alt-img img, [data-variant="alt"] img.alt-img { transform: scale(1.14); transition: transform 1.8s var(--ease-out), clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1); }
[data-variant="alt"] .alt-img.is-shown { clip-path: inset(0 0 0 0); }
[data-variant="alt"] .alt-img.is-shown img, [data-variant="alt"] img.alt-img.is-shown { transform: none; }
/* Schlusssatz: der Schriftzug schreibt sich selbst */
[data-variant="alt"] svg.wm-inline { display: inline-block; height: 1.9em; width: calc(1.9em * 1208 / 250); vertical-align: -0.62em; margin-left: 0.2em; overflow: visible; }
[data-variant="alt"] .wm-draw path[stroke] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
[data-variant="alt"] .wm-draw g[fill], [data-variant="alt"] .wm-draw circle { opacity: 0; transition: opacity 1.2s var(--ease); }
[data-variant="alt"] .wm-draw.is-drawn path[stroke] { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1.4s) cubic-bezier(0.45, 0, 0.25, 1) var(--del, 0s); }
[data-variant="alt"] .wm-draw.is-drawn g[fill] { opacity: 1; transition-delay: 0.9s; }
[data-variant="alt"] .wm-draw.is-drawn circle { opacity: 1; transition-delay: 2.9s; }
@media (prefers-reduced-motion: reduce) {
  [data-variant="alt"] .aw > span, [data-variant="alt"] .alt-img, [data-variant="alt"] .alt-img img, [data-variant="alt"] img.alt-img { transform: none; clip-path: none; transition: none; }
  [data-variant="alt"] .wm-draw path[stroke] { stroke-dashoffset: 0; } [data-variant="alt"] .wm-draw g[fill], [data-variant="alt"] .wm-draw circle { opacity: 1; }
}
/* Wortspannen erben die Überschrift (sonst greifen Regeln wie „.dates span“) */
[data-variant="alt"] .aw, [data-variant="alt"] .aw > span { font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; margin-top: 0; }

/* =====================================================================
   Runde 3 (25.10., nach Bildschirmaufnahme): Tempo, weniger Wiederholung, Kapitel
   ===================================================================== */
/* 1. Tempo: Inhalt ist da, wenn man ankommt. Kurz, kaum versetzt (Auslösen früher, siehe Skript) */
[data-variant="alt"].js [data-rv] { transform: translateY(12px); transition-duration: 0.7s; transition-delay: calc(var(--rv-i, 0) * 60ms); }
[data-variant="alt"] .aw > span { transition-duration: 0.8s; transition-delay: calc(var(--w, 0) * 35ms); }
[data-variant="alt"] .alt-img { transition-duration: 1s; }
[data-variant="alt"] .alt-img img, [data-variant="alt"] img.alt-img { transition-duration: 1.4s, 1s; }
[data-variant="alt"].js .reveal .tg { transition-duration: 0.8s; transition-delay: calc(var(--i, 0) * 70ms); }
[data-variant="alt"].js .reveal > :not(.tg) { transition-duration: 0.6s; transition-delay: calc(var(--i, 0) * 70ms + 180ms); }
/* 2. Ruhige Variante für alle übrigen Bilder: nur weich einblenden */
[data-variant="alt"] .alt-soft { opacity: 0; transform: scale(1.03); transition: opacity 0.7s var(--ease), transform 1.1s var(--ease-out); }
[data-variant="alt"] .alt-soft.is-shown { opacity: 1; transform: none; }
/* 3. Kapitel: kürzere Abstände und wechselnde Flächen (Creme, Rosé), das Streichholz bleibt der dunkle Moment */
[data-variant="alt"] .about, [data-variant="alt"] .practice, [data-variant="alt"] .live, [data-variant="alt"] .dates, [data-variant="alt"] .teachers,
[data-variant="alt"] .book, [data-variant="alt"] .blog-home, [data-variant="alt"] .reset-home { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
[data-variant="alt"] .statement { padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
[data-variant="alt"] .practice, [data-variant="alt"] .dates, [data-variant="alt"] .book { background: var(--card); }
[data-variant="alt"] .dates .sg-root .sg-next, [data-variant="alt"] .dates .sg-root .sg-flip:not(.is-next):not(.is-mine) .sg-front { background: var(--s3); }
[data-variant="alt"] .book .offer-card { background: var(--s3); }
[data-variant="alt"] .section-head { margin-bottom: 2.4rem; }
@media (prefers-reduced-motion: reduce) { [data-variant="alt"] .alt-soft { opacity: 1; transform: none; transition: none; } }

/* Weiches Scrollen (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }