/* Shared motion engine (21.10, Anna: "the home page must move EXACTLY like the labels page").
   One stylesheet for /labels/ and the buyer home (/), loaded before the page's own layout CSS (base.css or home.css).
   The rules below were MOVED unchanged from base.css (labels), so both pages run the same CSS and the same JS:
   - film.js: scroll film (sticky stage, one scroll = one scene, dots, scroll hint, .is-shown / .is-active per scene)
   - fx.js: word-by-word headings (.words .w), reveal on scroll (.rv / .in), <details> open/close, count-ups
   Only additions: selectors for the home's button class (.btn-cta) and media per scene (.film--scenes, .scene--single).
   Look (glass, colours, sizes, positions) stays in base.css / home.css + motion.css. */

/* ---------- buttons: pulse ring + light sweep (visible without hover), hover lift, press scale, pop entrance ---------- */
.btn, .btn-cta { 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, .btn-cta::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-cta:hover { transform: translateY(-2px); animation: none; }
.btn:active, .btn-cta: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, html.film-motion .scene.is-shown .btn-cta, .cta-float .btn.pop { animation: btn-pop .7s cubic-bezier(.2,.7,.2,1) .25s backwards, btn-pulse 6s ease-out 2s infinite; }
html.film-motion .scene.is-shown .btn-cta:hover { animation: none; }

/* ---------- film ---------- */
.film { position: relative; background: var(--stl-bg); }

/* 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 .film .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); }

/* ---------- media per scene (home, 21.10): each scene has its own background (.scene__media: poster + video).
   The active scene's media fades in over the previous one (.6s ease = the labels hero -> film crossfade);
   the previous one stays underneath until the fade is done. Scene text = exactly the labels scene panel above. ---------- */
html.film-motion .film--scenes .scene__media { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0s .6s; pointer-events: none; }
html.film-motion .film--scenes .scene.is-active .scene__media { z-index: 2; opacity: 1; transition: opacity .6s ease; }
/* hidden panels stay readable for screen readers and reachable by Tab (opacity instead of visibility: same look and
   timing; film.js moves to a scene when the keyboard focus enters it) */
html.film-motion .film--scenes .scene__content, html.film-motion .scene--single .scene__content { visibility: visible; opacity: 0; pointer-events: none; transition: opacity 0s .3s; }
html.film-motion .film--scenes .scene.is-shown .scene__content, html.film-motion .scene--single.is-shown .scene__content { opacity: 1; pointer-events: auto; transition: none; }

/* ---------- 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); }
/* keyboard focus reached a block before it appeared (fx.js, UX audit Ж1): show it at once */
html.fx .rv.rv-now.in, html.fx .words.rv-now.in .w, html.fx .rv-now .words.in .w, html.fx .rv-now.in .steps__n, html.fx .rv-now.in p { transition-duration: .15s !important; transition-delay: 0s !important; }

/* K5: callouts slide in one by one */
.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; } }

/* details (fx.js animates the height): content fades in on open */
details.opened > :not(summary), .faq details.opened > p { animation: fade-in .5s ease .05s backwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 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; } }
  .film__dots, html.film-motion .film__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scrollhint__mouse i, .scrollhint__chev b { animation: none; opacity: 1; } }

/* ---------- phones (Anna 22.10 07:15): progress rail for every paging stop + one-time swipe cue (film.js initRail) ----------
   Rail: right edge, in the 10px gutter next to the glass panels (dots never over panel text); the 24px tap targets reach
   invisibly over the panel padding. Active stop = accent pill. White ring = visible over dark video too. Desktop: hidden
   (desktop keeps its film dots). The old round chevron hint (.scrollhint) is replaced on phones by the swipe cue. */
.pager, .swipehint { display: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .scrollhint { display: none; }
  .pager:not([hidden]) { display: flex; flex-direction: column; align-items: flex-end; position: fixed; z-index: 35; right: calc(6px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
    transition: opacity .3s ease, visibility .3s; }
  /* 22.10 (Anna, iPhone): the rail sat at right: 0 and iOS clipped the dots to half circles -> whole rail inside the
     viewport: 6 px + safe-area inset from the edge (dot 8–14 px from the edge, white ring included); tap areas unchanged. */
  /* UX audit В1 (22.10): tap area 44 × 44 px with 8 px between dots (the visible dot is unchanged, at the right edge). film.js
     places the rail between the header (home: below the video button) and the floating button (labels) and sets the height
     (--pager-h): 44 px where it fits, less on short screens / many dots (never below 24 px); the gap stays 8 px.
     Where a 44 px wide area would cover a button / link / field underneath, film.js narrows that dot to 20 px. */
  .pager__dot { display: flex; align-items: center; justify-content: flex-end; width: 44px; height: var(--pager-h, 24px);
    margin: 4px 0; padding: 0 2px 0 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pager__dot.is-narrow { width: 20px; }
  .pager__dot::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(27,19,64,.5); /* .32 → .5: ≥ 3:1 on the light scrim (22.10) */
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); transition: height .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
  .pager__dot[aria-current="true"]::before { height: 20px; background: var(--stl-accent, #6C3BFF); }
  .pager__dot:focus-visible { outline: none; }
  .pager__dot:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--stl-accent, #6C3BFF); } /* Ж10: 3 px ring */
  html.consent-open .pager, html.consent-open .swipehint { opacity: 0; visibility: hidden; pointer-events: none; }

  .swipehint:not([hidden]) { display: flex; align-items: center; gap: 8px; position: fixed; z-index: 34; left: 50%; top: 40%;
    padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(27,19,64,.14); color: var(--stl-text, #1B1340); font: 700 14px/1 Manrope, system-ui, sans-serif; letter-spacing: .01em;
    opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .5s ease, transform .5s ease, visibility .5s; visibility: hidden; }
  .swipehint.on { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
  .swipehint.nofit { display: none !important; }
  .swipehint__chev { display: flex; flex-direction: column; align-items: center; width: 14px; height: 20px; justify-content: center; }
  .swipehint__chev b { display: block; width: 9px; height: 9px; border-left: 2.5px solid var(--stl-text, #1B1340); border-top: 2.5px solid var(--stl-text, #1B1340);
    transform: rotate(45deg); margin: -1px 0; animation: swipe-up 1.6s ease-in-out infinite; }
  .swipehint__chev b + b { border-color: var(--stl-coral, #FF6B5A); animation-delay: .15s; }
  @keyframes swipe-up { 0% { opacity: 0; translate: 0 6px; } 40% { opacity: 1; } 80%, 100% { opacity: 0; translate: 0 -6px; } }
}
@media (prefers-reduced-motion: reduce) {
  .swipehint__chev b { animation: none !important; opacity: 1; translate: none; }
  .swipehint, .pager__dot::before { transition: none !important; }
}

/* 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; }

/* 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; }
/* 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; }

/* reduced motion (labels): no zoom/slide/pulse; texts and buttons only fade. base.css / home.css add the page-wide "no animation" rule. */
@media (prefers-reduced-motion: reduce) {
  html.film-motion .scene.is-shown .cta .btn, html.film-motion .scene.is-shown .btn-cta, .cta-float .btn.pop, .cta-float { animation: btn-fade .6s ease .2s backwards !important; }
  .btn::after, .btn-cta::after { display: none; }
  .btn:hover, .btn:active, .btn-cta:hover, .btn-cta:active { transform: none; }
  html.film-motion .scene__content > * { transform: none !important; }
  html.fx .words .w, html.fx .rv { transform: none !important; translate: none !important; rotate: none !important; }
  details.opened > :not(summary) { animation: fade-in .4s ease backwards !important; }
}

/* ---------- 22.10 17:11 Anna (variant A): NO glass box. Text sits directly on the full-screen video, readable thanks to a
   soft scrim in the page background colour (#F4EFFF) on the text side. One scrim per scene (::before, under the text, over the
   media); in the film it shows with the scene's text (.is-shown), so the video runs clear between two scenes.
   Text column (desktop): left edge = the header logo edge (80 / 48 px, max 1440 px centred = --stl-tx); width --tw (the old
   panel text width at ≤ 1600 px) grows on wider screens (+30 % of the extra width, max 720 px); the scrim's dense part follows
   the text's right edge. Phones: text at the bottom, vertical scrim from the bottom. Stops tuned per scene for WCAG AA over
   real video frames (checks/2026-10-22-scrim/contrast.json). ---------- */
/* --stl-tx = the header's own column edge (same variables as .site-header below: --hp padding, --hcol max width);
   the % resolves where it is used (scene / stage width = header width) */
:root { --scrim-c: 244,239,255; --stl-tx: max(var(--hp), calc(50% - var(--hcol) / 2 + var(--hp))); }
.scene { --tw: 480px;
  --tw-now: max(var(--tw), min(var(--tw-max, 720px), calc(var(--tw) + (100vw - 1600px) * .3)));
  /* 22.10 evening (Anna: "no washing out"): the scrim is dense behind the text and fades out within 96 px after it, so it
     never lies over the subject next to the text (was: fade over 448 px + 38 % / 70 % minimum — that washed the subject out).
     Home hero keeps its own values (motion.css). */
  --scrim-a: calc(var(--stl-tx) + var(--tw-now) - 16px); --scrim-b: calc(var(--stl-tx) + var(--tw-now) + 80px);
  --scrim: linear-gradient(var(--scrim-dir, 90deg), rgba(var(--scrim-c), var(--scrim-o0, .96)) 0%, rgba(var(--scrim-c), var(--scrim-o1, .85)) var(--scrim-a), rgba(var(--scrim-c), 0) var(--scrim-b)); }
.scene::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--scrim); }
html.film-motion .scene::before { z-index: 3; opacity: 0; transition: opacity .3s ease; }
html.film-motion .scene.is-shown::before { opacity: 1; transition: opacity .5s ease; }
/* phones: the text block sits at the bottom and its height differs per scene and language (FR/IT lines wrap more), so the
   vertical scrim is attached to the text block itself: from the block's top edge down to the screen bottom .88 → .97, fading
   to 0 over 30vh above it (= spec 0deg, .97 / .88 / 0). Full screen width (the block has 10 px side margins). */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .scene::before { display: none; }
  /* 22.10 evening (Anna: "no washing out"): the fade above the block is short (32 px instead of 30vh), so the subject above
     the text keeps its original look; the dense part stays where the text is */
  .scene .scene__content::before { content: ""; display: block; position: absolute; z-index: -1; left: -10px; right: -10px; top: -48px; bottom: -480px;
    width: auto; height: auto; margin: 0; border: 0; border-radius: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--scrim-c), 0) 0, rgba(var(--scrim-c), .88) 32px, rgba(var(--scrim-c), .97) 248px); }
  /* home hero: unchanged (Anna 22.10: the hero is good) */
  .vsec--hero .scene__content::before { top: -30vh;
    background: linear-gradient(180deg, rgba(var(--scrim-c), 0) 0, rgba(var(--scrim-c), .88) calc(30vh - 16px), rgba(var(--scrim-c), .97) calc(30vh + 200px)); }
}

/* ---------- ONE shared header on every page (Anna 22.10: "make everything consistent") ----------
   home ×4, /labels/ ×4, legal ×8: [logo] ……… [secondary pill] [languages] [coral CTA]. Only the texts differ per page.
   Logo = the home size (113 × 28, phones 92 × 23), left edge = the home column (80 / 48 px, max 1440 px centred; phones 24 px).
   Fixed at the top on every page: light veil over the film; solid lavender glass once the page is past the film
   (html.past-film, film.js) or scrolled (html.hdr-scrolled, consent.js, pages without film). */
/* the header column (shared with the scene text, film.css .scene --stl-tx): padding --hp, max width --hcol, centred */
:root { --hp: 80px; --hcol: 1440px; }
@media (max-width: 1100px) { :root { --hp: 48px; } }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px max(var(--hp), calc(50% - var(--hcol) / 2 + var(--hp))); transition: padding .3s, background-color .3s; }
/* Anna 23.10: ONE header look everywhere (every page, scene, scrolled or not): a light haze of the page colour fading to
   transparent, from the top of the header to --hdr-fade below it. No blur, no hard edge, no solid band, always the dark logo.
   Alphas measured over the real frames (checks/2026-10-23-section-gap/result.md): logo >= 3:1 over the darkest (Problem wall). */
:root { --hdr-fade: 32px; --hdr-a0: .85; --hdr-a1: .55; }
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--hdr-fade)); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,239,255,var(--hdr-a0)) 0%, rgba(244,239,255,var(--hdr-a1)) 55%, rgba(244,239,255,0) 100%); }
.site-header::after { display: none; }
html.past-film .site-header, html.hdr-scrolled .site-header { padding-top: 12px; padding-bottom: 12px; }
.site-header .wordmark { display: inline-flex; flex: none; align-items: center; min-height: 44px; line-height: 0; text-decoration: none; border-radius: 8px; }
.site-header .wordmark img { display: block; width: 113px; height: 28px; max-width: none; }
.site-header__end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site-header__nav { display: flex; }

/* secondary pill (outline, approved 22.10 decision A): «Für Labels →» / «← Zur Startseite» */
.hpill { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--stl-r-full); white-space: nowrap;
  background: rgba(255,255,255,.6); color: var(--stl-text); border: 1.5px solid var(--stl-text); text-decoration: none; font: 700 16px/1 var(--stl-font);
  transition: border-color .2s, color .2s, background .2s, transform .2s; }
.hpill:hover { color: var(--stl-accent); border-color: var(--stl-accent); background: rgba(255,255,255,.8); transform: translateY(-2px); }
.hpill:active { transform: scale(.95); transition-duration: .08s; }
.hpill:focus-visible { outline: 3px solid var(--stl-accent); outline-offset: 3px; }
.hpill__arrow { transition: transform .2s; }
.hpill:hover .hpill__arrow { transform: translateX(3px); }
.hpill--back:hover .hpill__arrow { transform: translateX(-3px); }
.hpill__short { display: none; }
.hpill::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* outline pill: soft violet sweep */
  background: linear-gradient(105deg, transparent 32%, rgba(108,59,255,.14) 50%, transparent 68%); transform: translateX(-110%); }

/* language switcher: inline «DE · FR · IT · EN» in a small glass pill (desktop / tablet), «DE ▾» menu on phones */
.langsw { display: flex; }
.langs { display: flex; align-items: center; padding: 0 6px; border-radius: var(--stl-r-full); background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 14px/1 var(--stl-font); letter-spacing: .02em; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; border-radius: 8px;
  color: var(--stl-text); text-decoration: none; opacity: .72; }
.langs a:hover { color: var(--stl-text); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.langs a[aria-current] { opacity: 1; color: var(--stl-accent-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.langs span { display: inline-block; width: 8px; text-align: center; opacity: .4; }
.langmenu { display: none; position: relative; }
.langmenu__btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 18px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--stl-text); border-radius: var(--stl-r-full); background: rgba(255,255,255,.6); color: var(--stl-text); font: 700 16px/1 var(--stl-font); }
.langmenu__btn::-webkit-details-marker { display: none; }
.langmenu__btn img { width: 16px; height: 16px; transition: transform .2s; }
.langmenu[open] .langmenu__btn img { transform: rotate(180deg); }
.langmenu__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: var(--stl-white);
  box-shadow: 0 20px 50px rgba(27,19,64,.18), 0 0 0 1px var(--stl-border); }
.langmenu__list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--stl-text); text-decoration: none; font: 600 16px/1 var(--stl-font); }
.langmenu__list a:hover { color: var(--stl-text); background: var(--stl-bg); }
.langmenu__list a[aria-current] { color: var(--stl-accent-ink); font-weight: 800; }

/* primary CTA (coral, labels .btn--sm look): sweep only, no pulse ring */
.site-header .hdr-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--stl-r-full);
  background: var(--stl-coral); color: var(--stl-on-coral); text-decoration: none; white-space: nowrap; font: 700 15px/1.2 var(--stl-font); animation: none; }
.site-header .hdr-cta::after { animation-delay: 3s; }
.site-header .hdr-cta:hover { color: var(--stl-on-coral); }
@media (max-width: 1023px) { .site-header .hdr-cta { display: none; } } /* tablets in landscape: logo + pill + languages only */

@media (prefers-reduced-motion: no-preference) { .hpill::after { animation: btn-shine 6s ease-in-out 3s infinite; } }
@media (prefers-reduced-motion: reduce) {
  .hpill::after { display: none; }
  .hpill:hover, .hpill:active, .hpill:hover .hpill__arrow { transform: none; }
  .site-header, .site-header::before, .site-header::after { transition: none; }
}

/* phones (≤ 767 px or portrait): one row — logo, short pill, «DE ▾»; the CTA is in the page (hero / floating button) */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .site-header, html.past-film .site-header, html.hdr-scrolled .site-header { padding: 12px 16px 12px 24px; }
  .site-header .wordmark img { width: 92px; height: 23px; }
  .hpill { gap: 6px; padding: 0 14px; font-size: 15px; background: rgba(255,255,255,.7); }
  .hpill__long { display: none; }
  .hpill__short { display: inline; }
  .langs { display: none; }
  .langmenu { display: block; }
  .langmenu__btn { padding: 0 10px 0 14px; font-size: 15px; background: rgba(255,255,255,.7); }
  .site-header .hdr-cta { display: none; }
}
@media (max-width: 379px) { /* 360 px phones: longer FR/IT pill texts still fit in the row */
  .site-header, html.past-film .site-header, html.hdr-scrolled .site-header { padding-left: 20px; padding-right: 12px; }
  .hpill { padding: 0 12px; font-size: 14px; }
  .langmenu__btn { padding: 0 8px 0 12px; font-size: 14px; }
}

/* ---------- .scene-panel (shared home + /labels/, moved here from motion.css 22.10 late): ONE light panel behind a scene's
   text instead of any gradient / scrim. Page colour .92, rounded, NO border / outline, NO blur, very soft shadow, dark text.
   .scene-panel = on every screen size (home Problem, Sortiment, final); .scene-panel--m = the same panel on phones /
   portrait tablets only (home hero + Vorteile, /labels/ K1–K7: their desktop layouts stay as they are).
   Phones (Anna 22.10 late, iPhone: "no washing out anywhere"): NO light fade over any video, the panel is the only surface;
   16 px gutter to the screen edges (the progress dots sit in it). ---------- */
.scene-panel { --sp-pad: 48px; }
.scene-panel, .scene .scene-panel { background: rgba(244,239,255,.92); border: 0; outline: 0; border-radius: 28px;
  box-shadow: 0 24px 80px rgba(27,19,64,.12); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--stl-text); }
@media (max-width: 1100px) { .scene-panel { --sp-pad: 32px; } } /* header column padding is 48 px here: keep 16 px of video left of the panel */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .scene-panel, .scene-panel--m { --sp-pad: 14px; }
  .scene-panel, .scene .scene-panel, .scene .scene-panel--m { background: rgba(244,239,255,.92); border: 0; outline: 0; border-radius: 24px;
    box-shadow: 0 12px 40px rgba(27,19,64,.14); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--stl-text); }
  .scene .scene__content.scene-panel::before, .scene .scene__content.scene-panel--m::before { display: none; }
}

/* line breaks (Anna 22.10 night): scene headings balanced (no clumsy last word), lead paragraphs «pretty» (no single-word last
   line). Home + /labels/ scenes. Short fixed pairs («in Bewegung.») are kept together with a no-break space in the HTML. */
.scene h1, .scene h2 { text-wrap: balance; }
.scene .lead, .scene .scene__content .t-body { text-wrap: pretty; }

/* ---------- desktop like phones (Anna 22.10 night: "desktop exactly like the phones"): NO scrim / gradient / fade over any
   video on any screen size. Home hero and /labels/ K1–K7 put their text in ONE .scene-panel on desktop too (the same
   .scene-panel--m markup gets the panel look here; home Vorteile keeps its own desktop layout: small heading panel + solid
   cards). Layout per page: home.css (hero) and base.css (/labels/). ---------- */
@media (min-width: 768px) and (min-aspect-ratio: 4/5) {
  .scene::before, html.film-motion .scene::before { display: none; }
  .scene .scene__content.scene-panel--m:not(.vorteile) { --sp-pad: 48px; background: rgba(244,239,255,.92); border: 0; outline: 0; border-radius: 28px;
    box-shadow: 0 24px 80px rgba(27,19,64,.12); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--stl-text); }
  /* in the film the panel surface fades with its scene text (the lines inside keep their own staggered entrance) */
  html.film-motion .scene .scene__content.scene-panel--m:not(.vorteile) { opacity: 0; transition: opacity .3s ease, visibility 0s .3s; }
  html.film-motion .scene.is-shown .scene__content.scene-panel--m:not(.vorteile) { opacity: 1; transition: opacity .35s ease; }
}
@media (min-width: 768px) and (max-width: 1100px) and (min-aspect-ratio: 4/5) {
  .scene .scene__content.scene-panel--m:not(.vorteile) { --sp-pad: 32px; } /* header column padding is 48 px here */
}

/* ---------- header (Anna 23.10): the same light haze (::before, above) on every page, scene and scroll state; no glass, no
   solid band, no hairline; the pills and the language switch keep their solid light fills.
   --hdr-h = the compact header height (film.js puts block stops below it; anchors use it as scroll margin). */
:root { --hdr-h: 68px; --stop-gap: 64px; } /* --stop-gap (Anna 23.10): air between the header and a block's first heading at its stop */
@media (max-width: 767px), (max-aspect-ratio: 4/5) { :root { --stop-gap: 36px; } }
.site-header, html.past-film .site-header, html.hdr-scrolled .site-header { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) { :root { --hdr-fade: 24px; } }
.hpill, .langmenu__btn { background: rgba(255,255,255,.94); }
.hpill:hover { background: #fff; }
.langs { background: rgba(255,255,255,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* small glass elsewhere -> solid light fills */
.scrollhint__mouse { background: rgba(255,255,255,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .site-header, html.past-film .site-header, html.hdr-scrolled .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .scrollhint__chev, .swipehint:not([hidden]) { background: rgba(255,255,255,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hpill, .langmenu__btn { background: rgba(255,255,255,.94); }
}
/* anchors / jump targets land below the fixed header (sections after the film; the full-screen scenes are not affected) */
main > section[id]:not(.scene), main > .sec[id]:not(.scene), main [id].block, .block [id], .legal [id], main h2[id]:not(.scene *) { scroll-margin-top: calc(var(--hdr-h) + var(--stop-gap)); }

/* ---------- QA 22.10 (4): ONE alignment rule everywhere: the TEXT edge = the header logo edge ----------
   Desktop: --stl-tx (logo edge, header column). Phones: logo 24 px from the edge (20 px ≤ 379 px), the header's right inset =
   its left inset; text panels sit in an 8 px gutter (6 px ≤ 379 px) with 16 px (14 px) padding, so their text starts on the
   logo edge too. --ph-x = phone text edge, --ph-g = phone panel gutter, --ph-p = phone panel padding. */
:root { --ph-x: 24px; --ph-g: 8px; --ph-p: 16px; }
@media (max-width: 379px) { :root { --ph-x: 20px; --ph-g: 6px; --ph-p: 14px; } }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .site-header, html.past-film .site-header, html.hdr-scrolled .site-header { padding-left: var(--ph-x); padding-right: var(--ph-x); }
}
@media (max-width: 379px) { .site-header__end { gap: 6px; } .hpill { padding: 0 10px; } .langmenu__btn { padding: 0 8px 0 10px; } } /* FR/IT row fits with 20 / 20 */

/* ---------- QA 22.10 (5): ONE footer on all 16 pages (markup: tools/footer.mjs) = the home footer (light, wordmark, legal links,
   cookie settings, languages, Instagram + TikTok, note). Moved here from home.css so /labels/ and the legal pages share it.
   Its text starts on the logo edge (--stl-tx; phones --ph-x). ---------- */
.h-footer { padding: 64px var(--stl-tx) 56px; background: var(--stl-bg); }
.h-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--stl-text); }
.h-wordmark { display: inline-flex; line-height: 0; border-radius: 8px; }
.h-wordmark img { display: block; width: 113px; height: 28px; max-width: none; }
.h-footer__links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.h-footer__links > a, .h-footer .consent-open-btn { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 14px; color: var(--stl-text); text-decoration: none; font: 600 16px/1 var(--stl-font); }
.h-footer .consent-open-btn { border: 0; background: none; cursor: pointer; }
.h-footer__links > a:hover, .h-footer .consent-open-btn:hover { text-decoration: underline; color: var(--stl-accent-ink); }
.h-footer__links > a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.h-footer__langs { display: flex; gap: 8px; padding-left: 24px; }
.h-footer__langs a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--stl-text); text-decoration: none; font: 700 15px/1 var(--stl-font); }
.h-footer__langs a:hover { background: var(--stl-white); }
.h-footer__langs a[aria-current] { background: var(--stl-text); color: var(--stl-white); }
.h-footer__note { margin: 32px 0 0; max-width: 900px; font: 400 16px/1.5 var(--stl-font); color: var(--stl-text-muted); }
.social { display: flex; align-items: center; gap: 8px; }
.social__a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--stl-text); transition: color .15s; }
.social__a svg { width: 24px; height: 24px; display: block; }
.social__a:hover { color: var(--stl-accent-ink); }
.social__a:focus-visible { outline: 3px solid var(--stl-focus); outline-offset: 2px; border-radius: 50%; }
.h-footer .social { margin-right: -10px; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .h-footer { padding: 48px var(--ph-x) 48px; }
  .h-footer__row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .h-footer__links { flex-direction: row; gap: 8px; margin-left: -10px; }
  .h-footer__links > a, .h-footer .consent-open-btn { padding: 0 10px; }
  .h-footer__langs { flex-basis: 100%; padding: 8px 0 0 10px; }
  .h-footer__note { font-size: 15px; }
  .h-footer .social { margin: -8px 0 0 -10px; }
}
/* short legal pages: the footer sits at the bottom of the screen (no strip of page colour under it) */
body:has(> main.legal) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body:has(> main.legal) > main { flex: 1 0 auto; }

/* QA 22.10 (10): tap areas ≥ 44 × 44 px (visible dots unchanged): phone rail dots always 44 px wide and tall (film.js sets the
   gap --pager-g, 0–8 px), desktop film dots 44 × 44 */
.film__dot { height: 44px; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .pager__dot, .pager__dot.is-narrow { width: 44px; height: 44px; margin: calc(var(--pager-g, 8px) / 2) 0; }
}
/* card video buttons inside a shrunk panel (fit-1..3 zoom) keep their 44 px */
.scene__content.fit-1 .vbtn--card { zoom: 1.087; } .scene__content.fit-2 .vbtn--card { zoom: 1.191; } .scene__content.fit-3 .vbtn--card { zoom: 1.316; }
.h-wordmark { min-height: 44px; align-items: center; }
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }

/* (Anna 23.10: the per-scene logo pill / light logo are gone: one header with a haze, always the dark logo) */
@media (max-width: 767px), (max-aspect-ratio: 4/5) { /* header row on phones: buttons never squeezed (24 / 24 insets) */
  .site-header .wordmark, .langmenu__btn, .hpill { flex: none; }
  .site-header__end { gap: 6px; }
  .hpill { padding: 0 12px; gap: 5px; }
  .langmenu__btn { padding: 0 9px 0 12px; gap: 4px; }
}
@media (max-width: 379px) { .site-header__end { gap: 5px; } .hpill { padding: 0 9px; gap: 4px; font-size: 14px; } .langmenu__btn { padding: 0 7px 0 10px; font-size: 14px; } }