/* STILDER v5 «Film v2» — layout. Spec: docs/site-v5-film-spec.md */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body { margin: 0; background: var(--stl-bg); color: var(--stl-text); font: var(--t-body); }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
a { color: var(--stl-accent); text-underline-offset: .15em; }
a:hover { color: var(--stl-accent-hover); }
:focus-visible { outline: 3px solid var(--stl-focus); outline-offset: 3px; border-radius: var(--stl-r-sm); }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: .5rem 1rem; background: var(--stl-text); color: var(--stl-bg); border-radius: var(--stl-r-full); }
.skip-link:focus { top: .5rem; color: var(--stl-bg); }

/* text styles: only these */
.t-h1, .t-h2 { color: var(--stl-text); letter-spacing: -.02em; hyphens: none; text-wrap: balance; }
.t-h1 { font: var(--t-h1); }
.t-h2 { font: var(--t-h2); }
.t-body { font: var(--t-body); max-width: 520px; }
.t-small { font: var(--t-small); color: var(--stl-small-color); max-width: 520px; }
.t-display { font: var(--t-display); color: var(--stl-accent); letter-spacing: -.03em; }
.t-h1 + .t-body, .t-h2 + .t-body, .t-display + .t-body, .t-h2 + .t-display { margin-top: var(--sp-hb); }
.t-body + .t-body { margin-top: .75em; }
.t-body + .t-small, .t-small + .t-small, .t-body + .callouts, .t-small + .callouts { margin-top: var(--sp-bs); }
.t-small a { color: inherit; }
sup { font-size: .6em; line-height: 0; }

/* button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: var(--stl-r-full); border: 0;
  font: 700 16px/1.2 var(--stl-font); text-decoration: none; text-align: center;
  background: var(--stl-coral); color: var(--stl-on-coral);
}
.btn { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .25s ease; animation: btn-pulse 6s ease-out 1.8s infinite; }
/* visible without hover (desktop + touch): soft pulse ring + light sweep; press = scale */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transform: translateX(-110%); animation: btn-shine 6s ease-in-out 1.4s infinite;
}
@keyframes btn-shine { 0%, 60% { transform: translateX(-110%); } 82%, 100% { transform: translateX(110%); } }
@keyframes btn-pulse { 0%, 50% { box-shadow: 0 0 0 0 rgba(255,107,90,.55); } 85%, 100% { box-shadow: 0 0 0 14px rgba(255,107,90,0); } }
.btn:hover { color: var(--stl-on-coral); transform: translateY(-2px); animation: none; box-shadow: 0 10px 24px rgba(255,107,90,.35), inset 0 0 0 2px var(--stl-on-coral); }
.btn:active { transform: scale(.95); transition-duration: .08s; }
/* entrance: when a scene's text appears (desktop scene CTA) / on every scene change (mobile floating button) */
@keyframes btn-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } 60% { opacity: 1; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes btn-fade { from { opacity: 0; } to { opacity: 1; } }
html.film-motion .scene.is-shown .cta .btn, .cta-float .btn.pop { animation: btn-pop .7s cubic-bezier(.2,.7,.2,1) .25s backwards, btn-pulse 6s ease-out 2s infinite; }
.btn--sm { min-height: 44px; padding: .5rem 1.125rem; font-size: 15px; animation: none; }
.cta { margin-top: var(--sp-btn); }
.cta .t-small { margin-top: 12px; }
.cta + .t-small { margin-top: var(--sp-bs); }

/* header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter); transition: opacity .3s, background-color .3s;
}
.wordmark { font: 800 26px/1 var(--stl-font); letter-spacing: -.03em; color: var(--stl-text); text-decoration: none; }
.wordmark:hover { color: var(--stl-text); }
html.past-film .site-header { background: rgba(244,239,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-top: 12px; padding-bottom: 12px; }
/* soft edge under the header: content fades in below it instead of a hard cut (Anna 19.10) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: linear-gradient(to bottom, rgba(244,239,255,.94), rgba(244,239,255,0)); }
html.past-film .site-header::after, .site-header--solid::after { opacity: 1; }
/* desktop Figma: header only on K1 and after the film */
/* 17.10 Anna: logo always visible (was K1 only) */

/* ---------- film ---------- */
.film { position: relative; background: var(--stl-bg); }
.scene { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; --pos: 62%; }
.scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos) 50%; z-index: 1; }
.scene__content { position: relative; z-index: 3; width: 100%; max-width: calc(600px + var(--gutter)); padding: 96px 0 96px var(--gutter); }
/* H1 scenes: manual line breaks, lines must not wrap on desktop (88px) */
.scene--k1 .scene__content, .scene--k7 .scene__content { max-width: calc(760px + var(--gutter)); }
.scene .t-h1 { white-space: nowrap; }
.scene .t-h1.is-personal { white-space: normal; }

.steps3 { list-style: none; padding: 0; margin-top: var(--sp-hb); display: grid; gap: 16px; counter-reset: s; max-width: 520px; }
.steps3 li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.steps3 li::before { content: counter(s); font: var(--t-h2); font-size: 1.4em; line-height: 1; color: var(--stl-accent); }
.steps3 strong { font-weight: 700; }
.callouts { list-style: none; padding: 0; display: grid; gap: 8px; }
.callouts li { display: flex; align-items: center; gap: 10px; font: var(--t-small); font-weight: 600; color: var(--stl-text); }
.callouts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stl-coral); flex: none; }

/* scroll film (task 11): JS on, no reduced motion. Tall section (film.js sets --film-units = scroll length in
   viewport heights), sticky full-screen stage with the canvas; scenes are text layers over it. Native scrolling. */
html.film-motion .film { height: calc((var(--film-units, 10) + 1) * 100vh); }
html.film-motion .film__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; }
.film__canvas, .film__blur { display: none; }
html.film-motion .film__canvas { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
/* scenes do not form stacking contexts: canvas, posters and text are layered across scenes */
html.film-motion .scene { position: absolute; inset: 0; min-height: 0; }
/* posters: only until the canvas has its first frame (K1 poster = first paint = first film frame); never faded */
html.film-motion .scene__bg { display: none; z-index: 2; }
html.film-motion .scene.show-poster .scene__bg { display: block; }
html.film-motion .scene__content { z-index: 4; visibility: hidden; transition: visibility 0s .3s; }
html.film-motion .scene.is-shown .scene__content { visibility: visible; transition: none; }
/* text entrance: each line fades up, staggered */
html.film-motion .scene__content > * { opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
html.film-motion .scene.is-shown .scene__content > * {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms);
}
.scene__content > :nth-child(2) { --i: 1; } .scene__content > :nth-child(3) { --i: 2; } .scene__content > :nth-child(4) { --i: 3; }
.scene__content > :nth-child(5) { --i: 4; } .scene__content > :nth-child(6) { --i: 5; }

.film__dots { display: none; }
html.film-motion .film__dots {
  display: flex; flex-direction: column; position: absolute; z-index: 5;
  right: 32px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0;
}
.film__dot { width: 44px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.film__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(27,19,64,.25); transition: transform .2s, background-color .2s; }
.film__dot[aria-current="step"]::before { background: var(--stl-accent); transform: scale(1.3); }

/* floating CTA (mobile only) */
.cta-float { display: none; }

/* ---------- blocks after the film ---------- */
.block { padding: 72px var(--gutter); }
.block + .block { padding-top: 0; }
/* first block after the film starts below the fixed header (Anna 19.10: heading was cut at the top) */
.film + .block { padding-top: 120px; }
html { scroll-padding-top: 84px; }
.block__inner { max-width: 1040px; margin: 0 auto; }
.card { background: var(--stl-surface); border-radius: var(--stl-r-lg); padding: 56px 64px; box-shadow: 0 20px 60px rgba(27,19,64,.06); }
details.more { margin-top: var(--sp-btn); }
details.more > summary, .faq summary { cursor: pointer; font: 700 17px/1.4 var(--stl-font); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
details.more > summary { display: inline-flex; color: var(--stl-accent); justify-content: flex-start; }
details.more > summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
details.more > summary::after, .faq summary::after { content: "+"; font: 700 22px/1 var(--stl-font); color: var(--stl-accent); flex: none; }
details.more[open] > summary::after, .faq details[open] summary::after { content: "–"; }
.table-wrap { overflow-x: auto; margin: 16px 0; border-radius: var(--stl-r-md); background: var(--stl-surface); }
.fees { width: 100%; min-width: 34rem; border-collapse: collapse; font: var(--t-small); color: var(--stl-text); font-size: 15px; font-variant-numeric: tabular-nums; }
.fees th, .fees td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--stl-border); vertical-align: top; }
.fees tbody tr:last-child > * { border-bottom: 0; }
.fees thead th { font-weight: 700; }
.fees tbody th { font-weight: 500; }
.fees thead th:nth-child(2), .fees td:nth-child(2) { background: rgba(255,107,90,.1); font-weight: 700; }
.anna { display: grid; gap: 40px; align-items: start; }
.anna__photo { width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--stl-r-lg); }
@media (min-width: 768px) and (min-aspect-ratio: 4/5) { .anna { grid-template-columns: 360px 1fr; gap: 64px; } }
.faq { margin-top: var(--sp-hb); border-top: 1px solid var(--stl-border); }
.faq details { border-bottom: 1px solid var(--stl-border); padding: 8px 0; }
.faq details .t-body { padding: 4px 40px 12px 0; max-width: 640px; }
.finale { max-width: 1040px; text-align: center; }
.finale .t-body, .finale .t-small { max-width: 640px; margin-left: auto; margin-right: auto; }
#einladung { padding-bottom: 72px; }
.finale .signature { margin-top: 12px; font: 700 20px/1.4 var(--stl-font); }
/* finale path (task 13, Anna 17.10 «визуально без текста»): icon timeline. Desktop: one row, line between the
   nodes; phones: vertical rail. First step = coral (dark icon on coral). Labels = the original list text. */
.path { --node: 56px; list-style: none; padding: 0; margin: var(--sp-btn) auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 8px; max-width: 880px; font: var(--t-small); color: var(--stl-text); counter-reset: none; }
.path li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.path__node { flex: none; position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center;
  background: var(--stl-surface); color: var(--stl-text); box-shadow: inset 0 0 0 2px var(--stl-border), 0 6px 18px rgba(27,19,64,.07); }
.path__ico { width: 28px; height: 28px; overflow: visible; }
.path__ico .a { stroke: var(--stl-accent); }
.path__ico .f { fill: var(--stl-surface); }
.path li:first-child .path__node { background: var(--stl-coral); box-shadow: 0 0 0 6px rgba(255,107,90,.18), 0 8px 22px rgba(255,107,90,.3); }
.path li:first-child .path__ico .a { stroke: var(--stl-on-coral); }
.path li:first-child .path__label { font-weight: 700; }
.path__label { max-width: 15ch; font-weight: 600; line-height: 1.35; }
/* connector: from this node's centre to the next one's (gap included) */
.path li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--node) / 2 - 1px); left: 50%; width: calc(100% + 8px); height: 2px;
  background: linear-gradient(90deg, var(--stl-coral), var(--stl-accent)); opacity: .55; transform-origin: 0 50%; }
.path li:not(:first-child):not(:last-child)::after { background: var(--stl-accent); opacity: .35; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .path { --node: 44px; grid-template-columns: 1fr; gap: 12px; max-width: none; margin-left: 0; }
  .path li { flex-direction: row; text-align: left; gap: 14px; }
  .path__ico { width: 24px; height: 24px; }
  .path__label { max-width: none; }
  .path li:first-child .path__node { box-shadow: 0 0 0 4px rgba(255,107,90,.18), 0 6px 16px rgba(255,107,90,.25); }
  .path li:not(:last-child)::after { top: var(--node); left: calc(var(--node) / 2 - 1px); width: 2px; height: 12px;
    background: linear-gradient(180deg, var(--stl-coral), var(--stl-accent)); transform-origin: 50% 0; }
  .path li:not(:first-child):not(:last-child)::after { background: var(--stl-accent); }
}
/* reveal (fx.js adds .in to the list when it scrolls into view): nodes pop in one after another, the line draws */
html.fx .path.rv { transform: none; }
html.fx .path .path__node, html.fx .path .path__label { opacity: 0; transform: translateY(10px) scale(.85); }
html.fx .path li:not(:last-child)::after { transform: scaleX(0); }
html.fx .path.in .path__node { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.9,.3,1.35); transition-delay: calc(.15s + var(--pi, 0) * .22s); }
html.fx .path.in .path__label { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.25s + var(--pi, 0) * .22s); }
html.fx .path.in li:not(:last-child)::after { transform: none; transition: transform .35s ease-in-out; transition-delay: calc(.3s + var(--pi, 0) * .22s); }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  html.fx .path li:not(:last-child)::after { transform: scaleY(0); }
  html.fx .path.in li:not(:last-child)::after { transform: none; }
}
.path li:nth-child(2) { --pi: 1; } .path li:nth-child(3) { --pi: 2; } .path li:nth-child(4) { --pi: 3; } .path li:nth-child(5) { --pi: 4; }
@media (prefers-reduced-motion: reduce) {
  html.fx .path .path__node, html.fx .path .path__label, html.fx .path li::after { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* K1: the conditions line links to block 8 (fx.js scrolls there smoothly and opens «Alle Konditionen im Detail») */
.t-small a.to-terms { color: var(--stl-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.to-terms__ico { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.t-small a.to-terms:hover .to-terms__ico { transform: translateY(2px); transition: transform .2s ease; }
.quiet { margin-top: var(--sp-bs); }

.site-footer { background: var(--stl-text); color: var(--stl-bg); padding: 40px var(--gutter); font: var(--t-small); font-size: 14px; }
.site-footer p { max-width: 900px; line-height: 2; }
.site-footer a { color: var(--stl-bg); display: inline-block; }

/* legal pages */
.site-header--solid { background: rgba(244,239,255,.94); box-shadow: 0 1px 0 var(--stl-border); }
.page-legal .site-header .btn { display: inline-flex; }
.legal { padding: 140px var(--gutter) 96px; min-height: 60vh; }
.legal address { font-style: normal; margin-top: var(--sp-hb); }


/* ---------- code animations (fx.js); prefers-reduced-motion: see the end of the file ---------- */
.w { display: inline-block; }
html.fx .words .w { opacity: 0; transform: translateY(.45em) rotate(1.5deg); transition: opacity .2s ease, transform .2s ease; }
html.fx .scene.is-shown .words .w, html.fx .words.in .w {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: calc(120ms + var(--wi, 0) * 75ms);
}
html.fx .rv { opacity: 0; transform: translateY(28px); }
html.fx .rv.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--ri, 0) * 90ms); }
html.fx .anna__photo.rv { transform: translateY(28px) scale(.96); }
html.fx .anna__photo.rv.in { transform: none; }

/* soft moving background behind blocks 8–12 (lavender/coral blobs) */
main::before, main::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108,59,255,.16), rgba(108,59,255,0));
  left: -20vmax; top: 10vh; animation: blob-a 26s ease-in-out infinite alternate;
}
main::after { background: radial-gradient(closest-side, rgba(255,107,90,.16), rgba(255,107,90,0)); left: auto; right: -25vmax; top: 35vh; animation: blob-b 32s ease-in-out infinite alternate; }
@keyframes blob-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes blob-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-22vw, -18vh) scale(.95); } }

/* K1 countdown: the number ticks */
.tick { display: inline-block; font-weight: 700; color: var(--stl-text); animation: tick 4s ease-in-out 1.5s infinite; }
@keyframes tick { 0%, 86%, 100% { transform: none; } 90% { transform: translateY(-3px) scale(1.12); } 95% { transform: translateY(1px); } }

/* K3: tap + ripple + check on «Kaufen» (position from film.js) */
.tapfx { position: absolute; z-index: 4; width: var(--bw, 60px); height: var(--bh, 28px); transform: translate(-50%, -50%); pointer-events: none; visibility: hidden; }
.tapfx.run { visibility: visible; }
.tapfx__ring { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(255,107,90,.7); opacity: 0; }
.tapfx__dot { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(27,19,64,.35), inset 0 0 0 2px rgba(27,19,64,.15); opacity: 0; }
.tapfx__check { position: absolute; left: 50%; bottom: calc(100% + 10px); width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--stl-coral); box-shadow: 0 6px 18px rgba(27,19,64,.2); opacity: 0; }
.tapfx.run .tapfx__dot { animation: tap-dot 1.3s cubic-bezier(.2,.7,.2,1) .35s both; }
.tapfx.run .tapfx__ring { animation: tap-ring .9s ease-out 1.15s both; }
.tapfx.run .tapfx__check { animation: tap-check .6s cubic-bezier(.2,.9,.3,1.4) 1.45s both; }
@keyframes tap-dot { 0% { opacity: 0; transform: translate(70px, 60px); } 25% { opacity: 1; } 60% { opacity: 1; transform: none; } 70% { transform: scale(.7); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes tap-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,107,90,.75); } 100% { opacity: 0; box-shadow: 0 0 0 26px rgba(255,107,90,0); } }
@keyframes tap-check { from { opacity: 0; transform: translateY(8px) scale(.5); } to { opacity: 1; transform: none; } }

/* K4: 85 % counts up (fx.js) + meter */
.t-display .meter { display: block; width: min(320px, 70%); height: 8px; margin-top: 12px; border-radius: 99px; background: rgba(108,59,255,.15); overflow: hidden; }
.t-display .meter::after { content: ""; display: block; height: 100%; width: 85%; border-radius: inherit; background: linear-gradient(90deg, var(--stl-accent), var(--stl-coral));
  transform-origin: left; transform: scaleX(0); transition: transform .3s ease; }
.scene.is-shown .t-display .meter::after { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.3,.7,.2,1) .45s; }

/* K5: callouts slide in one by one; small product cards drift beside the phone */
.scene.is-shown .callouts li { animation: callout-in .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.55s + var(--ci, 0) * .18s); }
.callouts li:nth-child(2) { --ci: 1; } .callouts li:nth-child(3) { --ci: 2; } .callouts li:nth-child(4) { --ci: 3; }
@keyframes callout-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.fcards { display: none; }
html.film-motion .fcards { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fcards img { position: absolute; border-radius: 10px; box-shadow: 0 12px 30px rgba(27,19,64,.18); opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .3s, transform .3s; }
.fcards img:nth-child(1) { right: 6vw; top: 18%; }
.fcards img:nth-child(2) { right: 13vw; top: 46%; }
.fcards img:nth-child(3) { right: 4vw; top: 64%; }
.scene.is-shown .fcards img { opacity: 1; transform: none; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); animation: card-drift 7s ease-in-out 1s infinite alternate; }
.scene.is-shown .fcards img:nth-child(2) { transition-delay: .2s; animation-duration: 8.5s; }
.scene.is-shown .fcards img:nth-child(3) { transition-delay: .4s; animation-duration: 6.5s; }
@keyframes card-drift { from { translate: 0 0; rotate: -2deg; } to { translate: -10px -16px; rotate: 2deg; } }

/* K6: steps 1–2–3 in sequence, coral line draws from step to step */
.steps3 { --gap: 16px; gap: var(--gap); }
.steps3 li { position: relative; align-items: start; }
.steps3 li::before { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--stl-font);
  background: var(--stl-bg); box-shadow: inset 0 0 0 2px var(--stl-coral); color: var(--stl-text); position: relative; z-index: 1; }
.steps3 li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: calc(-1 * var(--gap)); width: 2px; background: var(--stl-coral);
  transform-origin: top; transform: scaleY(0); }
.scene.is-shown .steps3 li { animation: step-in .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.35s + var(--si, 0) * .6s); }
.scene.is-shown .steps3 li::before { animation: step-dot .6s cubic-bezier(.2,.9,.3,1.4) backwards; animation-delay: calc(.35s + var(--si, 0) * .6s); }
.scene.is-shown .steps3 li:not(:last-child)::after { transform: scaleY(1); transition: transform .5s ease-in-out; transition-delay: calc(.75s + var(--si, 0) * .6s); }
.steps3 li:nth-child(2) { --si: 1; } .steps3 li:nth-child(3) { --si: 2; }
@keyframes step-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes step-dot { from { transform: scale(0); box-shadow: inset 0 0 0 20px var(--stl-coral); } to { transform: none; } }

/* buttons: header button shines too */
.btn--sm::after { animation-delay: 3s; }

/* details: table rows stagger in on open */
details.opened .fees tbody tr { animation: row-in .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.1s + var(--ri, 0) * .08s); }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
details.opened > :not(summary), .faq details.opened > p { animation: fade-in .5s ease .05s backwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- mobile 390 ---------- */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .site-header { padding: 16px var(--gutter); }
  .site-header .btn { display: none; }
  .scene br { display: none; }
  .scene .t-h1 { white-space: normal; }
  .scene { align-items: flex-end; }
  .scene__content { max-width: none; }
  .scene--k1 .scene__content, .scene--k7 .scene__content { --cta-space: 136px; }
  .scene .cta, .scene .callouts { display: none; }
  .film__dots, html.film-motion .film__dots { display: none; }
  
  .cta-float {
    display: block; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom)); text-align: center;
    transition: opacity .25s, visibility .25s, background-color .25s, box-shadow .25s;
  }
  /* outside the film: a solid bar, text scrolls under it (never shows through) */
  html:not(.in-film) .cta-float { background: #F4EFFF; }
  /* soft edge: text fades out above the bar instead of being cut by a hard line (Anna 19.10) */
  .cta-float::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: linear-gradient(to top, #F4EFFF, rgba(244,239,255,0)); }
  html:not(.in-film) .cta-float::before { opacity: 1; }
  .cta-float .btn { width: 100%; }
  .cta-float { animation: float-in .7s cubic-bezier(.2,.7,.2,1) .5s backwards; }
  @keyframes float-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .cta-float .t-small { margin: 8px auto 0; display: none; }
  html.in-film[data-scene="1"] .cta-float .t-small,
  html.in-film[data-scene="7"] .cta-float .t-small { display: block; }
  html.finale-visible .cta-float { opacity: 0; visibility: hidden; }
  /* no extra bottom space: the floating bar hides at the finale card, so nothing is covered */

  .block { padding: 48px var(--gutter); }
  .film + .block { padding-top: 96px; }
  .finale { text-align: left; }
  .card { padding: 28px 20px; }
  #einladung { padding-bottom: 40px; }
  .faq details .t-body { padding-right: 0; }
  .steps3 { --gap: 10px; }
  .scene .t-display .meter { margin-top: 8px; height: 6px; }
  .fcards img { width: 52px; height: auto; }
  .fcards img:nth-child(1) { right: auto; left: 5vw; top: 13%; }
  .fcards img:nth-child(2) { right: 5vw; top: 12%; }
  .fcards img:nth-child(3) { right: 7vw; top: 34%; }
}
/* reduced motion: no video, no zoom/slide/pulse; posters and text only fade */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  html.film-motion .scene.is-shown .cta .btn, .cta-float .btn.pop, .cta-float { animation: btn-fade .6s ease .2s backwards !important; }
  .btn::after { display: none; }
  .btn:hover, .btn:active { transform: none; }
  html.film-motion .scene__content > * { transform: none !important; }
  html.fx .words .w, html.fx .rv, .fcards img, .tapfx__dot { transform: none !important; translate: none !important; rotate: none !important; }
  .tapfx.run .tapfx__check { animation: fade-in .6s ease .3s both !important; }
  details.opened .fees tbody tr, details.opened > :not(summary) { animation: fade-in .4s ease backwards !important; }
  .steps3 li:not(:last-child)::after { transform: none !important; opacity: 0; transition: opacity .6s ease .4s !important; }
  .scene.is-shown .steps3 li:not(:last-child)::after { opacity: 1; }
  .t-display .meter::after { transform: none !important; opacity: 0; transition: opacity .6s ease .3s !important; }
  .scene.is-shown .t-display .meter::after { opacity: 1; }
}

/* ---------- 17.10 Anna: film full screen, no lavender, no haze. Text on a frosted-glass panel over the film ---------- */
.scene__content {
  background: rgba(255,255,255,.58) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border-radius: 28px; box-shadow: 0 20px 60px rgba(27,19,64,.12);
}
@media (min-width: 768px) and (min-aspect-ratio: 4/5) {
  .scene__content { padding: 36px 40px; max-width: min(580px, 42vw); margin-left: calc(var(--gutter) - 44px); }
  /* 17.10 PM: no zoom of the film. Cover with the crop at 62 % (film.js POSX = --pos) keeps the phone right of the
     glass panel on screens narrower than 16:9; the panel may overlap the phone edge. */
  .scene .t-h1 { font-size: clamp(44px, 4.6vw, 80px); }
  .scene .t-h2 { font-size: clamp(36px, 3.6vw, 56px); }
}
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .scene__content { margin: 0 10px 10px; padding: 22px 18px var(--cta-space, 96px) !important; border-radius: 24px; }
}

/* 17.10 Anna: the mobile button stays fixed at the bottom — no blinking on scroll, never moves.
   The line under it (K1/K7 only) fades in/out in a reserved space, so the button does not shift. */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .cta-float, .cta-float .btn, .cta-float .btn.pop { animation: none !important; } /* no entrance / re-pop */
  .cta-float .t-small { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s, visibility .3s; }
  html.in-film[data-scene="1"] .cta-float .t-small,
  html.in-film[data-scene="7"] .cta-float .t-small { visibility: visible; opacity: 1; pointer-events: auto; }
  .scene .scene__content { --cta-space: 136px; }
}

/* 17.10 Anna: designer's logo M1 (Manrope 800, coral dot over i) — assets/img/brand/stilder-logo.svg */
.wordmark { display: inline-flex; align-items: center; line-height: 0; }
.wordmark img { display: block; height: 26px; width: auto; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) { .wordmark img { height: 24px; } }

/* 17.10 Anna: scroll hint (no words) — mouse with a rolling wheel on desktop, bouncing chevrons on phones */
.scrollhint { position: absolute; z-index: 6; left: 50%; bottom: 28px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity .5s ease, transform .5s ease; }
.scrollhint.on { opacity: 1; transform: translate(-50%, 0); }
html:not(.in-film) .scrollhint { opacity: 0; }
.scrollhint__mouse { display: block; width: 32px; height: 50px; border: 2.5px solid var(--stl-text, #1B1340); border-radius: 14px; position: relative;
  background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(27,19,64,.12); }
.scrollhint__mouse i { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #FF6B5A;
  height: 10px; animation: hint-wheel 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes hint-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.scrollhint__chev { display: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  /* phones: right edge, middle of the free video area above the text panel */
  .scrollhint { left: auto; right: 14px; bottom: auto; top: 34%; top: 34svh; transform: translateY(8px); }
  .scrollhint.on { transform: none; }
  .scrollhint__mouse { display: none; }
  .scrollhint__chev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 44px; height: 56px; border-radius: 22px;
    background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(27,19,64,.14); }
  .scrollhint__chev b { display: block; width: 12px; height: 12px; border-right: 3px solid #1B1340; border-bottom: 3px solid #1B1340; transform: rotate(-135deg);
    margin: -2px 0; animation: hint-chev 1.4s ease-in-out infinite; }
  .scrollhint__chev b + b { animation-delay: .18s; border-color: #FF6B5A; }
  @keyframes hint-chev { 0%, 100% { opacity: .25; translate: 0 6px; } 50% { opacity: 1; translate: 0 -2px; } }
}
@media (prefers-reduced-motion: reduce) { .scrollhint__mouse i, .scrollhint__chev b { animation: none; opacity: 1; } }

/* ---------- task 11 (Anna 17.10): phones show the WHOLE 16:9 film frame at full width (sharp, never magnified);
   around it the same frame, enlarged and strongly blurred. Text panel below the film band. ---------- */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .film, .film__stage { --band-top: 64px; }
  /* band: canvas (film.js) and stop-frame posters (first paint / reduced motion / no JS) */
  html.film-motion .film__canvas { top: var(--band-top); height: auto; aspect-ratio: 16 / 9; }
  .scene__bg { top: var(--band-top); bottom: auto; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
  /* blurred background: a tiny canvas enlarged by CSS (ctx.filter does not work in Safari) */
  /* the blur is applied at 1/4 size and then scaled up x4 (1/16 of the pixels to filter: cheap on phones) */
  html.film-motion .film__blur {
    display: block; position: absolute; z-index: 0; left: -60px; top: -60px; width: calc((100% + 120px) / 4); height: calc((100% + 120px) / 4);
    transform: scale(4); transform-origin: 0 0; -webkit-filter: blur(6px) saturate(1.15); filter: blur(6px) saturate(1.15);
  }
  /* posters: the same blurred frame behind them (CSS image, same file as the poster) */
  .scene::after {
    content: ""; position: absolute; z-index: 0; inset: -60px; pointer-events: none;
    background: var(--poster) center / cover no-repeat; -webkit-filter: blur(22px) saturate(1.15); filter: blur(22px) saturate(1.15);
  }
  html.film-motion .scene::after { display: none; }
  html.film-motion .scene.show-poster::after { display: block; }
  .scene--k1 { --poster: url(../img/film/k1-1288.webp); }
  .scene--k2 { --poster: url(../img/film/k2-1288.webp); }
  .scene--k3 { --poster: url(../img/film/k3-1288.webp); }
  .scene--k4 { --poster: url(../img/film/k4-1288.webp); }
  .scene--k5 { --poster: url(../img/film/k5-1288.webp); }
  .scene--k6 { --poster: url(../img/film/k6-1288.webp); }
  .scene--k7 { --poster: url(../img/film/k7-1288.webp); }
  /* scroll hint: right edge, at the lower end of the film band */
  .scrollhint { top: calc(var(--band-top) + 56.25vw - 64px); }
}

/* 17.10 Anna (iPhone screenshots): no blurred gap between film and text — the panel sits right under the film band */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  html.film-band .scene { align-items: flex-start; }
  html.film-band .scene .scene__content {
    margin: calc(var(--band-top) + 56.25vw + 12px) 10px 0; padding: 20px 18px 22px !important; /* margin-top refined by film.js fitPanels */
  }
  html.film-band .site-header { background: linear-gradient(to bottom, rgba(244,239,255,.92), rgba(244,239,255,.6)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* 17.10 19:16 Anna: no blurred background on phones — only the video (band) on the plain page background */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  html.film-motion .film__blur, html.film-band .film__blur { display: none !important; }
  .scene::after, html.film-motion .scene.show-poster::after { display: none !important; }
  .film, .film__stage { background: var(--stl-bg, #F4EFFF); }
}

/* 17.10 Anna: H1 «Video-Shopping für unabhängige Labels.» (t51, variant C); the invitation (#fuer=) is a small line above it */
.t-eyebrow { margin: 0 0 10px; font: 700 15px/1.35 var(--stl-font); letter-spacing: .01em; color: #6C3BFF; }
.t-eyebrow.is-personal { color: #1B1340; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) { .t-eyebrow { font-size: 13px; margin-bottom: 6px; } }

/* AI Act Art. 50 (decision 14.10, Lawyer 17.10): permanent «KI-generiert» label on the film itself */
.kibadge { position: absolute; z-index: 7; right: 20px; bottom: 20px; margin: 0; padding: 4px 10px; border-radius: 999px;
  font: 600 11px/1.3 var(--stl-font); letter-spacing: .02em; color: #1B1340; background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .kibadge { right: 8px; bottom: auto; top: calc(var(--band-top, 64px) + 56.25vw - 28px); font-size: 10px; padding: 3px 8px; }
}
/* new H1 is longer than the old manual line breaks: let it wrap inside the glass panel */
.scene .t-h1#hero-title { white-space: normal; text-wrap: balance; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .kibadge { right: auto; left: 8px; top: calc(var(--band-top, 64px) + 8px); }
}

/* 17.10: «Drei Zahlen, drei Gründe» (rates 0–10–15) */
.reasons { margin: 8px 0 20px; padding-left: 1.1em; }
.reasons li { margin: 6px 0; }
.reasons strong { color: #6C3BFF; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .fees { min-width: 0; font-size: 13px; }
  .fees th, .fees td { padding: 10px 8px; }
  .fees thead th { font-size: 12px; }
}
.rates-note { margin-top: 8px; }

/* 17.10: legal texts (Datenschutz v2, Impressum) — readable column */
.legal > * { max-width: 760px; }
.legal .legal__h2 { font: 700 22px/1.3 var(--stl-font); margin: 36px 0 8px; }
.legal .legal__h3 { font-weight: 700; margin: 20px 0 4px; }
.legal p, .legal li { margin: 8px 0; }
.legal ul { padding-left: 1.2em; }
.legal__note { margin-top: 28px; }

/* ---------- language switcher (task 14): DE · FR · IT · EN ---------- */
.langs { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 16px; font: 700 14px/1 var(--stl-font); letter-spacing: .02em; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; padding: 0 4px; color: var(--stl-text); text-decoration: none; border-radius: 8px; opacity: .72; }
.langs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.langs a[aria-current] { opacity: 1; color: var(--stl-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.langs span { opacity: .4; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .langs { margin-right: -4px; font-size: 13px; gap: 0; }
  .langs a { min-width: 30px; }
}
/* task 14: phone panels with longer translations shrink to fit (film.js fitPanels); German fits without */
.scene__content.fit-1 { zoom: .92; }
.scene__content.fit-2 { zoom: .84; }
.scene__content.fit-3 { zoom: .76; }
/* task 14: other languages have other line lengths: the desktop H1 may wrap (German keeps its fixed breaks) */
html:not([lang^="de"]) .scene .t-h1 { white-space: normal; overflow-wrap: break-word; }

/* ---------- 18.10 preview (t59, ?layout=a|b): desktop film in a frame (≤ 1280 px), lavender page around it ---------- */
html.film-frame .film__stage { background: var(--stl-bg); }
html.film-frame.film-motion .film__canvas { right: auto; bottom: auto; border-radius: 24px; box-shadow: 0 24px 64px rgba(27,19,64,.18); background: #1B1340; }
html.film-frame.film-motion .scene__bg { inset: auto; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); border-radius: 24px; }
html.film-frame .film__dots { right: 12px; }
html.film-frame-b .scene__content { background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  max-width: var(--tcol, 480px); margin-left: 64px; padding: 0; }
html.film-frame-b .scene .t-h1 { white-space: normal; font-size: clamp(36px, 3.4vw, 60px); }
html.film-frame-b .scene .t-h2 { font-size: clamp(30px, 2.8vw, 48px); }
html.film-frame-b .scene br { display: none; }
/* 18.10 (t60): legal pages in 4 languages have the language switcher; on phones it gets its own row under logo + button */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .page-legal .site-header { flex-wrap: wrap; row-gap: 4px; padding-bottom: 6px; }
  .page-legal .site-header .langs { order: 3; flex: 0 0 100%; margin: 0 0 0 -6px; }
  .page-legal .legal { padding-top: 168px; }
}

/* 18.10 17:57 Anna: phones — film full screen (portrait frames, film.js), glass text panel at the bottom over it, no band */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  html.film-motion .film__canvas { top: 0; height: 100%; aspect-ratio: auto; }
  .scene__bg { top: 0; bottom: 0; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
  .scrollhint { top: 84px; bottom: auto; }
  .scene { align-items: flex-end; }
  .scene .scene__content { margin: 0 10px var(--cta-space, 128px) !important; padding: 18px 18px 18px !important; background: rgba(255,255,255,.72) !important; }
  .scene--k1 .scene__content .t-h1 { font-size: 34px; }
}

/* 18.10 Anna: one scroll = one scene (film hold zones) / one block after the film */
/* no CSS scroll-snap: film.js pages wheel, keys and touch swipes itself (Anna 18.10 21:37) */
.film__snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }


/* Anna 18.10 19:36: film as a real video (film.js VIDEO mode) */
html.film-motion video.film__video { object-fit: cover; background: #1B1340; }
/* Anna 18.10: K3 (AI phone film) — the phone is left of centre, so the text card sits on the right (desktop) */
@media (min-width: 768px) and (min-aspect-ratio: 4/5) {
  .scene--k3 { justify-content: flex-end; }
  .scene--k3 .scene__content { margin-left: auto; margin-right: calc(var(--gutter) + 8px); } /* same card as the other scenes, just on the right */
}

/* K1 hero loop (film.js): above the film video, fades out on the first scroll */
html.film-motion video.film__hero { z-index: 1; transition: opacity .6s ease; }
html.film-motion video.film__hero.off { opacity: 0; }
/* Anna 19.10: soft light-to-transparent veil behind logo + languages, readable on any video frame */
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 56px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244,239,255,.88) 0%, rgba(244,239,255,.62) 45%, rgba(244,239,255,.22) 75%, rgba(244,239,255,0) 100%); transition: opacity .3s; }
html.past-film .site-header::before, .site-header--solid::before { opacity: 0; }