/* Thema «Lebendig»: sieht aus wie «Klar», fühlt sich aber bewegter an. Nur für <html data-theme="lebendig…">.
   Regeln: kurz (meist unter 300 ms), kräftiges Auslaufen, nur transform und opacity, jede Bewegung hat einen Grund.
   Kasse, Warenkorb und Bestellseite bleiben ruhig (dort setzt motion.js nichts in Gang). */

html[data-theme^="lebendig"] {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Seitenwechsel: weiches Überblenden statt hartem Sprung (Browser, die das können). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

/* --- Knöpfe: geben beim Drücken nach ------------------------------------------------------ */
html[data-theme^="lebendig"] .btn { transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease; }
html[data-theme^="lebendig"] .btn:hover { transform: none; }
html[data-theme^="lebendig"] .btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    html[data-theme^="lebendig"] .btn:hover { transform: translateY(-1px); }
    html[data-theme^="lebendig"] .btn:active { transform: scale(0.97); }
}

/* --- Startbereich: baut sich beim Öffnen der Seite auf, Zeile für Zeile --------------------- */
html[data-theme^="lebendig"] .hero__text > *:not(h1) { animation: lebendig-rise 700ms var(--ease-out) both; }
html[data-theme^="lebendig"] .hero__text > *:nth-child(2) { animation-delay: 120ms; }
html[data-theme^="lebendig"] .hero__text > *:nth-child(3) { animation-delay: 420ms; }
html[data-theme^="lebendig"] .hero__text > *:nth-child(4) { animation-delay: 520ms; }
html[data-theme^="lebendig"] .hero__text > *:nth-child(n + 5) { animation-delay: 620ms; }
html[data-theme^="lebendig"] .hero .signup { animation: lebendig-rise 700ms var(--ease-out) 200ms both; }
@keyframes lebendig-rise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

/* Überschrift: Wort für Wort aus einer Maske (motion.js zerlegt sie). Bis dahin unsichtbar; ohne Skript erscheint sie nach kurzer Zeit von selbst. */
html[data-theme^="lebendig"] .hero h1 { animation: lebendig-fade 400ms ease 1100ms both; }
html[data-theme^="lebendig"] .hero h1.is-split { animation: none; opacity: 1; transform: none; }
html[data-theme^="lebendig"] .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
html[data-theme^="lebendig"] .hero h1 .w > span { display: inline-block; transform: translateY(110%); animation: lebendig-word 800ms var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 55ms); }
@keyframes lebendig-word { from { transform: translateY(110%); } to { transform: none; } }

/* Bild im Startbereich: fährt leicht herein. */
html[data-theme^="lebendig"] .hero__portrait { animation: lebendig-glide 900ms var(--ease-out) 200ms both; }
@keyframes lebendig-glide { from { opacity: 0; transform: translateY(26px) scale(1.03); } to { opacity: 1; transform: none; } }

/* --- Abschnitte: steigen beim Scrollen einmal sanft ein ----------------------------------- */
/* motion.js markiert nur, was beim Laden unterhalb des Bildschirms liegt – oben blitzt nichts auf. */
html[data-theme^="lebendig"] .reveal { opacity: 0; transform: translateY(36px); filter: blur(6px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html[data-theme^="lebendig"] .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Bilder: fahren ganz leicht herein (kurzer Weg, minimal grösser); Bilder in Kacheln kommen leicht näher. */
html[data-theme^="lebendig"] img.reveal { transform: translateY(22px) scale(1.03); filter: none; transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html[data-theme^="lebendig"] img.reveal.is-in { transform: none; }
html[data-theme^="lebendig"] .reveal .entry__image { transform: scale(1.12); transition: transform 1200ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html[data-theme^="lebendig"] .reveal.is-in .entry__image { transform: none; }

/* Überschriften der Abschnitte: darunter zieht sich ein gelber Strich – das Erkennungszeichen dieses Themas. */
html[data-theme^="lebendig"] .section__head { position: relative; padding-bottom: 16px; }
html[data-theme^="lebendig"] .section__head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: var(--accent); transform-origin: left; }
html[data-theme^="lebendig"] .section__head.reveal::after { transform: scaleX(0); transition: transform 700ms var(--ease-in-out); transition-delay: 260ms; }
html[data-theme^="lebendig"] .section__head.reveal.is-in::after { transform: none; }

/* Lesefortschritt: ein feiner gelber Strich unter der Kopfleiste wächst mit dem Scrollen. */
html[data-theme^="lebendig"] .scrollbar { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--accent-strong); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* --- Kopfleiste: bekommt beim Scrollen einen feinen Schatten ------------------------------- */
html[data-theme^="lebendig"] .site-header::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 18px; pointer-events: none; opacity: 0; transition: opacity 200ms ease;
    background: linear-gradient(rgba(13, 27, 42, .09), transparent); transform: translateY(100%); }
html[data-theme^="lebendig"] .site-header.is-scrolled::after { opacity: 1; }

/* --- Bücher: das Cover kommt beim Überfahren ein Stück nach vorne ---------------------------- */
html[data-theme^="lebendig"] .product-card__cover img { transition: transform 280ms var(--ease-out); transform-origin: 50% 60%; }
html[data-theme^="lebendig"] .product-card:hover .product-card__cover img { transform: none; }
@media (hover: hover) and (pointer: fine) {
    html[data-theme^="lebendig"] .product-card:hover .product-card__cover img { transform: scale(1.05); }
    html[data-theme^="lebendig"] .entry { transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out); }
    html[data-theme^="lebendig"] .entry:hover { transform: translateY(-7px); box-shadow: 0 2px 4px rgba(13, 27, 42, .06), 0 28px 50px -18px rgba(13, 27, 42, .32); }
    html[data-theme^="lebendig"] .entry__image { transition: transform 500ms var(--ease-out); }
    html[data-theme^="lebendig"] .entry:hover .entry__image { transform: scale(1.05); }
}
html[data-theme^="lebendig"] .entry:active { transform: scale(0.985); }

/* --- Ablauf-Listen: die Linie zeichnet sich von oben nach unten ---------------------------- */
html[data-theme^="lebendig"] .agenda__list li.reveal::before { transform: scaleY(0); transform-origin: top; transition: transform 600ms var(--ease-in-out); transition-delay: calc(var(--reveal-delay, 0ms) + 160ms); }
html[data-theme^="lebendig"] .agenda__list li.reveal.is-in::before { transform: none; }

/* --- Links mit Pfeil: der Pfeil rückt ein Stück vor --------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    html[data-theme^="lebendig"] .entry__more::after,
    html[data-theme^="lebendig"] .link-arrow::after { display: inline-block; transition: transform 200ms var(--ease-out); }
    html[data-theme^="lebendig"] .entry:hover .entry__more::after,
    html[data-theme^="lebendig"] .link-arrow:hover::after { transform: translateX(4px); }
}

/* --- Variante «Scheinwerfer»: ein weicher Lichtkegel wandert langsam über den Startbereich --- */
html[data-theme="lebendig-licht"] .hero { position: relative; overflow: hidden; isolation: isolate; }
html[data-theme="lebendig-licht"] .hero::before { content: ""; position: absolute; z-index: -1; top: -40%; left: 30%; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(250, 189, 107, .42), rgba(250, 189, 107, .14) 52%, transparent 72%);
    animation: lebendig-licht 12s ease-in-out infinite alternate; will-change: transform; }
@keyframes lebendig-licht {
    from { transform: translate(-28%, 6%) scale(0.95); }
    to { transform: translate(22%, -8%) scale(1.08); }
}

/* --- Wer am Gerät «Bewegung reduzieren» gewählt hat: nur noch sanftes Einblenden, keine Wege --- */
@media (prefers-reduced-motion: reduce) {
    html[data-theme^="lebendig"] .hero__text > *,
    html[data-theme^="lebendig"] .hero__portrait,
    html[data-theme^="lebendig"] .hero .signup { animation: lebendig-fade 300ms ease both; animation-delay: 0ms; }
    html[data-theme^="lebendig"] .reveal { transform: none; filter: none; transition: opacity 300ms ease; transition-delay: 0ms; }
    html[data-theme^="lebendig"] .reveal .entry__image { transform: none; transition: none; }
    html[data-theme^="lebendig"] .hero h1 .w > span { transform: none; animation: none; }
    html[data-theme^="lebendig"] .hero__portrait { animation: lebendig-fade 300ms ease both; }
    html[data-theme^="lebendig"] .section__head.reveal::after { transform: none; transition: none; }
    html[data-theme^="lebendig"] .scrollbar { display: none; }
    html[data-theme^="lebendig"] .agenda__list li.reveal::before { transform: none; transition: none; }
    html[data-theme^="lebendig"] .btn:active, html[data-theme^="lebendig"] .entry:active,
    html[data-theme^="lebendig"] .product-card:hover .product-card__cover img, html[data-theme^="lebendig"] .entry:hover { transform: none; }
    html[data-theme="lebendig-licht"] .hero::before { animation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@keyframes lebendig-fade { from { opacity: 0; } to { opacity: 1; } }

/* Scheinwerfer, der dem Mauszeiger folgt: ein eigenes Element, damit nur dieses bewegt wird. */
html[data-theme="lebendig-licht"] .hero > .licht { position: absolute; z-index: -1; top: 0; left: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 500ms ease;
    background: radial-gradient(closest-side, rgba(250, 189, 107, .38), rgba(250, 189, 107, .12) 50%, transparent 72%); will-change: transform; }
html[data-theme="lebendig-licht"] .hero.is-lit > .licht { opacity: 1; }
html[data-theme="lebendig-licht"] .hero.is-lit::before { animation-play-state: paused; opacity: .35; transition: opacity 500ms ease; top: -40%; left: 30%; margin: 0; }

/* --- Schrittfolgen (Seminartag 1–4, Strategie 1–6): Die Seite hält kurz an, und beim Weiterscrollen
       kommt Schritt für Schritt dazu. motion.js setzt .seq auf die Liste und .is-on auf die erreichten Schritte. --- */
html[data-theme^="lebendig"] .seq-pin > .wrap { position: sticky; top: var(--seq-top, 110px); }
html[data-theme^="lebendig"] .seq > li { opacity: .22; transform: translateY(12px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), border-color 300ms ease, box-shadow 300ms ease; }
html[data-theme^="lebendig"] .seq > li.is-on { opacity: 1; transform: none; }
/* Ablauf an der Linie: Die Nummer füllt sich, die Linie läuft zum nächsten Schritt. */
html[data-theme^="lebendig"] .seq .process__no { transition: transform 450ms var(--ease-out), background-color 300ms ease; transform: scale(0.82); }
html[data-theme^="lebendig"] .seq > li.is-on .process__no { transform: none; }
html[data-theme^="lebendig"] .seq.process > li::after { content: ""; position: absolute; top: 21px; left: 0; right: -28px; height: 2px; background: var(--accent-strong); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-in-out); }
html[data-theme^="lebendig"] .seq.process > li:last-child::after { right: auto; width: 44px; }
html[data-theme^="lebendig"] .seq.process > li.is-on::after { transform: none; }
/* Schmale Bildschirme: Die Schritte stehen untereinander – dort läuft die gelbe Linie senkrecht an den Nummern entlang, nicht quer über den Text. */
@media (max-width: 800px) {
    html[data-theme^="lebendig"] .seq.process > li::after,
    html[data-theme^="lebendig"] .seq.process > li:last-child::after { top: 0; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
    html[data-theme^="lebendig"] .seq.process > li:last-child::after { display: none; }
    html[data-theme^="lebendig"] .seq.process > li.is-on::after { transform: none; }
}
/* Themenliste (untereinander): Die Linie läuft von Nummer zu Nummer nach unten. */
html[data-theme^="lebendig"] .seq.agenda__list > li::after { content: ""; position: absolute; top: 44px; bottom: 0; left: 21px; width: 2px; background: var(--accent-strong); transform: scaleY(0); transform-origin: top; transition: transform 600ms var(--ease-in-out); }
html[data-theme^="lebendig"] .seq.agenda__list > li:last-child::after { display: none; }
html[data-theme^="lebendig"] .seq.agenda__list > li.is-on::after { transform: none; }
/* Kästen: Der erreichte Kasten hebt sich ab, seine Nummer springt kurz an. */
html[data-theme^="lebendig"] .seq.module-grid > li.is-on { border-color: #c5d0dc; box-shadow: var(--shadow); }
html[data-theme^="lebendig"] .seq .module__no { transition: transform 450ms var(--ease-out); transform: scale(0.8); }
html[data-theme^="lebendig"] .seq > li.is-on .module__no { transform: none; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme^="lebendig"] .seq > li, html[data-theme^="lebendig"] .seq .process__no, html[data-theme^="lebendig"] .seq .module__no { opacity: 1; transform: none; transition: none; }
    html[data-theme^="lebendig"] .seq.process > li::after, html[data-theme^="lebendig"] .seq.agenda__list > li::after { display: none; }
}
/* --- Bild der Bühnenpräsenz-Strategie: entsteht Teil für Teil, beginnend oben bei «Authentizität».
       motion.js legt das Bild mehrfach übereinander; jede Lage zeigt nur ein Teil (Kreis, Ringstück, Beschriftung)
       und bewegt sich für sich: Der Ring zeichnet sich zum nächsten Kreis, der Kreis kommt, dann die Beschriftung.
       Masse aus dem Bild: Mitte des Rings 47 % / 49,2 %, Ring 19–22,4 % der Bildbreite (cqw). Schaltbar am Baustein. --- */
@property --arc { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-theme^="lebendig"] .wheel { position: relative; display: block; container-type: inline-size; }
html[data-theme^="lebendig"] .wheel > img { opacity: 0; transform: none; filter: none; display: block; }
html[data-theme^="lebendig"] .wheel__part { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
/* Mitte: steht von Anfang an */
html[data-theme^="lebendig"] .wheel__core { clip-path: inset(35% 40.1% 42% 35.35%); }
/* Kreise mit Zeichen: kommen aus ihrer Mitte heraus */
html[data-theme^="lebendig"] .wheel__icon { clip-path: circle(6.95cqw at var(--x) var(--y)); transform-origin: var(--x) var(--y); opacity: 0; transform: scale(0.5); transition: opacity 180ms ease, transform 180ms ease; }
html[data-theme^="lebendig"] .wheel__icon.is-on { opacity: 1; transform: none; transition: opacity 300ms ease, transform 520ms cubic-bezier(0.34, 1.32, 0.64, 1); transition-delay: var(--wait, 0ms); }
/* Ringstücke: zeichnen sich im Uhrzeigersinn zum nächsten Kreis */
html[data-theme^="lebendig"] .wheel__arc, html[data-theme^="lebendig"] .wheel__joint {
    -webkit-mask-image: radial-gradient(circle at 47% 49.2%, transparent 18.85cqw, #000 19cqw, #000 22.5cqw, transparent 22.65cqw), conic-gradient(from var(--from) at 47% 49.2%, #000 0 var(--arc), transparent 0);
    mask-image: radial-gradient(circle at 47% 49.2%, transparent 18.85cqw, #000 19cqw, #000 22.5cqw, transparent 22.65cqw), conic-gradient(from var(--from) at 47% 49.2%, #000 0 var(--arc), transparent 0);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-theme^="lebendig"] .wheel__arc { --arc: 0deg; transition: --arc 200ms ease; }
html[data-theme^="lebendig"] .wheel__arc.is-on { --arc: var(--span); transition: --arc 560ms var(--ease-in-out); transition-delay: var(--wait, 0ms); }
/* Die kurzen Ringstücke direkt am Kreis: erscheinen, sobald der Kreis da ist */
html[data-theme^="lebendig"] .wheel__joint { --arc: 40deg; opacity: 0; transition: opacity 150ms ease; }
html[data-theme^="lebendig"] .wheel__joint.is-on { opacity: 1; transition: opacity 220ms ease; transition-delay: var(--wait, 0ms); }
/* Beschriftungen: rücken ein kleines Stück nach aussen an ihren Platz */
html[data-theme^="lebendig"] .wheel__label { clip-path: inset(var(--t) var(--r) var(--b) var(--l)); opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); transition: opacity 160ms ease, transform 160ms ease; }
html[data-theme^="lebendig"] .wheel__label.is-on { opacity: 1; transform: none; transition: opacity 380ms ease, transform 480ms var(--ease-out); transition-delay: var(--wait, 0ms); }