/* pairwise.ski v5 – ein Stylesheet, Richtung "Der Satz ist das Layout" (design-taste-frontend, Seed 74537392).
   Eine Schrift (Archivo, variabel, selbst gehostet), eine Grundfarbe, eine Tinte, ein Akzent.
   Formen: Knöpfe und Chips rund (Pille), Bildrahmen 24 px. Keine Linien, keine Verläufe, keine Schatten. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#FFFFFF;--surface:#F2F3F5;--mist:#F4F6F9;--ink:#0B0F14;--muted:#5B6473;--snow:#D5DCE4;
  --accent:#1F4FE0;--accent-ink:#FFFFFF;--accent-strong:#1740BE;
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --step-small:.875rem;
  --step-body:clamp(1.0625rem,1rem + .3vw,1.1875rem);--step-body__f:clamp(1.0625rem,1rem + calc(.3vw / var(--zv,1)),1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.5rem);--step-lead__f:clamp(1.25rem,1.1rem + calc(.7vw / var(--zv,1)),1.5rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);--step-head__f:clamp(2.5rem,1.2rem + calc(5vw / var(--zv,1)),5.5rem);
  --step-display:clamp(4.25rem,10.4vw,10.5rem);--step-display__f:clamp(4.25rem,calc(10.4vw / var(--zv,1)),10.5rem);
  --margin:clamp(1rem,2.2vw,2rem);--margin__f:clamp(1rem,calc(2.2vw / var(--zv,1)),2rem);--gutter:clamp(1rem,2vw,2rem);--gutter__f:clamp(1rem,calc(2vw / var(--zv,1)),2rem);--section:clamp(6rem,12vw,13rem);--section__f:clamp(6rem,calc(12vw / var(--zv,1)),13rem);
  --r:24px;--pill:999px;--top:88px;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.76,0,.24,1);--ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;--t-hover:180ms;--t-ui:240ms;--t-reveal:800ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-body__f);line-height:1.5;font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
ul[class],ol[class]{padding:0;list-style:none}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:target{scroll-margin-top:calc(var(--top) + 16px)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Schrift ---------- */
h1,h2,h3{font-weight:600;text-wrap:balance;hyphens:none}
.display{font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.86}
.head{font-size:var(--step-head__f)}
.lead{font-size:var(--step-lead__f);line-height:1.35;text-wrap:pretty}
.muted{color:var(--muted)}
p{text-wrap:pretty}
.link{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease,color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.link:hover{color:var(--accent)}}

/* ---------- Rahmen ---------- */
.wrap{padding-inline:var(--margin);max-width:1680px;margin-inline:auto}
.pvbar{background:var(--accent);color:#fff;font-size:var(--step-small);line-height:1.4;padding:8px var(--margin);text-align:center}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:var(--pill);background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.button:active{transform:scale(.97)}
.button svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.button:hover{background:var(--accent-strong)}}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--pill);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--step-body__f);white-space:nowrap;transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.chip.on{background:var(--accent);color:#fff}
.chip.off{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.chip[aria-pressed=false]:hover{background:var(--snow)}}

/* Kopf */
.top{background:var(--bg)}
.top .in{display:flex;align-items:center;gap:24px;min-height:var(--top);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand .fig{width:40px;height:48px}
.brand .wm{width:118px;height:25px}
.search{flex:1 1 240px;max-width:440px;position:relative}
.sfield{position:relative}
.sfield svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--ink)}
.sfield input{width:100%;height:48px;padding:0 16px 0 46px;border:0;border-radius:var(--pill);background:var(--surface);color:var(--ink);appearance:none;-webkit-appearance:none;font-size:max(1rem,var(--step-body__f))}
.sfield input::placeholder{color:var(--muted)}
.sfield input::-webkit-search-decoration,.sfield input::-webkit-search-cancel-button{-webkit-appearance:none}
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:#fff;border-radius:var(--r);padding:8px;box-shadow:0 12px 40px rgba(11,15,20,.14)} /* taste-skill-ignore: Suchmenü, ein echtes Overlay */
.sres li{display:grid;gap:2px;padding:10px 14px;border-radius:16px;cursor:pointer}
.sres li b{font-weight:600}
.sres li span{font-size:var(--step-small);color:var(--muted)}
.sres li.hl,.sres li:hover{background:var(--surface)}
.nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav a{text-decoration:none;font-weight:500;padding:10px 14px;border-radius:var(--pill);min-height:44px;display:inline-flex;align-items:center}
.nav a[aria-current=page]{background:var(--surface)}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:var(--surface)}}
.nav .ig{gap:8px;background:var(--ink);color:#fff;padding:0 18px 0 14px}
.nav .ig svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.nav .ig:hover{background:var(--accent)}}
.sbtn{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:var(--surface)}
.sbtn svg{width:20px;height:20px}

/* ---------- Hero: der Satz ist das Layout ---------- */
.hero .wrap{min-height:calc(100svh - var(--top));display:grid;grid-template-rows:auto 1fr auto;padding-block:16px 32px}
.sent{font-size:var(--step-display__f);max-width:100%;align-self:center;margin-block:24px}
.sent .slot{display:inline-block;vertical-align:baseline;width:3em;height:.72em;margin:0 .06em 0 .02em;border-radius:.16em;background:var(--surface);overflow:hidden;position:relative;top:.02em}
.pairs{display:grid;grid-template-rows:1fr 1fr;align-items:center;gap:4%;padding:7% 4%;position:absolute;inset:0}
.pairs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity 160ms ease}
.pairs.sw img{opacity:0}
.pairs .none{display:block}
br.m,.slot-m{display:none}
.live{font-size:var(--step-lead__f);margin-top:8px}
.live b{font-weight:600}
.live .link{margin-left:.4em}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hfoot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-top:56px}
.hfoot .lead{grid-column:6/10;max-width:36ch}
.hfoot .acts{grid-column:10/13;justify-self:end;display:flex;align-items:center;gap:24px}

/* ---------- Showcase: Objekt vor Schrift ---------- */
.show{position:relative;overflow:clip;padding-block:var(--section) calc(var(--section) * .8)}
.show .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);position:relative}
.stack{grid-column:1/-1}
.stack .ln{font-size:var(--step-display__f);white-space:nowrap;line-height:.88;margin:0}
.obj{position:absolute;right:var(--margin);top:-1vw;width:44vw;rotate:-5deg;z-index:2;pointer-events:none}
.obj .pairs{position:static;display:grid;grid-template-rows:auto auto;gap:1.2vw;padding:0}
.obj img{width:100%;height:auto;mix-blend-mode:multiply}
.facts{grid-column:8/13;margin-top:56px;font-size:var(--step-lead__f);line-height:1.35}
.facts p+p{margin-top:.9em}

/* ---------- So prüfen wir: drei Vollbilder ---------- */
.how{overflow:clip}
.panel{position:relative;height:140svh;overflow:clip;background:var(--ink)}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.panel .hold{position:sticky;top:0;height:100svh;display:grid;place-items:center;z-index:1}
.panel .verb{text-align:center;font-size:clamp(6rem,calc(17vw / var(--zv,1)),19rem);color:#fff;margin:0;padding:.08em 0}
.panel[data-ink=ink] .verb{color:var(--ink)}
.panel .cap{position:absolute;left:var(--margin);bottom:28px;z-index:2;max-width:44ch;padding:14px 18px;background:rgba(11,15,20,.62);color:#fff;border-radius:var(--r);font-size:var(--step-body__f);line-height:1.45}
.panel[data-ink=ink] .cap{background:rgba(255,255,255,.78);color:var(--ink)}
.panel .tags{position:absolute;right:var(--margin);bottom:28px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:40%}
.panel .tags li{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--pill);background:#fff;color:var(--ink);font-weight:500}

/* ---------- Liste: Statement, Tabelle rechts ---------- */
.list{padding-block:var(--section)}
.list .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.list h2{grid-column:1/-1;font-size:clamp(2.25rem,calc(4vw / var(--zv,1)),3.75rem);line-height:.95;max-width:16ch}
.list .pic{grid-column:1/5;margin-top:72px;align-self:start;position:sticky;top:24px}
.list .pic img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.list .word{grid-column:7/8;margin-top:96px;font-size:var(--step-small);color:var(--muted)}
.list .tbl{grid-column:6/13;margin-top:72px}
.grp+.grp{margin-top:44px}
.gh{font-size:var(--step-lead__f);font-weight:600;margin-bottom:14px}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"img name val" "img kind val";column-gap:24px;align-items:center;text-decoration:none;color:var(--ink);padding:8px 12px;margin-inline:-12px;border-radius:20px;transition:background-color var(--t-hover) ease}
.row+.row{margin-top:10px}
.row img{grid-area:img;width:64px;height:150px;object-fit:contain;mix-blend-mode:multiply}
.row .nopic{grid-area:img;width:64px;height:150px}
.row .rn{grid-area:name;align-self:end;font-weight:600;font-size:var(--step-lead__f);line-height:1.2}
.row .rk{grid-area:kind;align-self:start;margin-top:4px;color:var(--muted);font-size:var(--step-body__f);line-height:1.3}
.row .rv{grid-area:val;justify-self:end;text-align:right;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;color:var(--ink);font-size:var(--step-body__f)}
.row .rv svg{width:22px;height:22px;color:var(--ink);transition:translate var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.row:hover{background:var(--surface)}.row:hover .rv svg{translate:4px 0}}
.more{margin-top:40px}

/* ---------- Gründer: Porträt als Initiale ---------- */
.about{padding-block:var(--section)}
main>.wrap+.about{padding-top:40px}
.about .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.about h2.head{grid-column:1/-1;margin-bottom:56px}
.about .facts{grid-column:1/3;font-size:var(--step-small);display:grid;gap:8px;align-content:start;padding-top:.4em}
.about .bio{grid-column:3/13;font-size:clamp(1.375rem,1rem + calc(1.7vw / var(--zv,1)),2.125rem);line-height:1.2;letter-spacing:-.01em}
.about .bio img{float:left;width:3.6em;height:3.6em;object-fit:cover;object-position:50% 18%;margin:.12em .5em .2em 0;border-radius:var(--r)}
.about .bio b{font-weight:600}
.about .bio p+p{margin-top:1.1em;color:var(--muted)}

/* ---------- FAQ: breite Überschrift, eingerückte Fragen ---------- */
.faq{padding-block:0 var(--section)}
.faq .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.faq h2{grid-column:1/-1;font-size:var(--step-head__f);max-width:14ch;line-height:.9}
.faq .qs{grid-column:5/13;margin-top:80px}
.faq details{padding:20px min(24px,var(--margin));margin-inline:calc(-1 * min(24px,var(--margin)));border-radius:var(--r);transition:background-color var(--t-ui) ease}
.faq details+details{margin-top:-4px}
.faq details[open]{background:var(--surface)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:var(--step-lead__f);line-height:1.3;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.chev{flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;margin-right:6px;transition:rotate var(--t-ui) var(--ease-out)}
details[open] .chev{rotate:225deg}
.faq details p{margin-top:16px;max-width:48ch;font-size:var(--step-body__f)}

/* ---------- Kontakt und Fuß: die Mailadresse als Display, der Name angeschnitten ---------- */
.foot{background:var(--ink);color:#fff;overflow:clip;position:relative}
.foot .wrap{display:flex;flex-direction:column;padding-top:72px}
.foot--home .wrap{min-height:100svh}
.foot .ask{font-size:var(--step-lead__f);font-weight:400;max-width:30ch;line-height:1.3}
.foot .mail{display:block;font-size:clamp(2.4rem,calc(9.3vw / var(--zv,1)),10.4rem);line-height:1;letter-spacing:-.04em;font-weight:400;text-decoration:none;color:#fff;margin-block:clamp(40px,8vh,96px) clamp(40px,8vh,88px);white-space:nowrap;transition:color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.foot .mail:hover{color:var(--snow);text-decoration:underline;text-underline-offset:.1em;text-decoration-thickness:.05em}}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;margin-top:auto}
.inv{grid-column:1/8}
.invh{font-size:var(--step-head__f);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;max-width:16ch;margin-bottom:28px}
.flinks{grid-column:10/13;display:grid;gap:10px;align-content:start;font-size:var(--step-body__f)}
.flinks a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.flinks a:hover{text-decoration:underline;text-underline-offset:.18em}}
.credits{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:var(--step-small);color:var(--snow);margin-top:72px}
.again{display:block;width:100%;max-width:none;height:auto;margin:56px 0 var(--margin);pointer-events:none;user-select:none}

/* ---------- Unterseiten: Kopfzeile, Pfad ---------- */
.path{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--step-small);color:var(--muted);padding-top:24px}
.path a{color:var(--muted);text-decoration:none}
.path a:hover{color:var(--ink);text-decoration:underline}
.path>*+*::before{content:"/";margin-right:10px}
main>.wrap>h1,.check h1,.cat h1,.brands h1{font-size:clamp(3.5rem,calc(9vw / var(--zv,1)),10rem);margin-top:12px}
main>.wrap>h1{padding-top:24px}
.ctl{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:28px;align-items:center}
.seg{display:inline-flex;padding:4px;background:var(--surface);border-radius:var(--pill);position:relative}
.seg input,.cpick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--pill);font-weight:500;cursor:pointer;color:var(--ink);transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.seg input:checked+label{background:var(--ink);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Vorjahres-Check (Modellseite) ---------- */
.check{padding-block:0 var(--section)}
.headrow{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px 40px;padding-top:32px}
.headrow .ctl{margin:0 0 .6em}
.vpanel{margin-top:32px}
.check:has(.vpick input:nth-of-type(1):checked) .vpanel:not([data-v="1"]){display:none}
.check:has(.vpick input:nth-of-type(2):checked) .vpanel:not([data-v="2"]){display:none}
.check:has(.vpick input:nth-of-type(3):checked) .vpanel:not([data-v="3"]){display:none}
.verdict{max-width:40ch}
.verdict b{font-weight:600}
.stage{margin-top:32px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:40px 24px 28px;background:var(--surface);border-radius:var(--r)}
.pair.single{grid-template-columns:1fr}
.ski{display:grid;justify-items:center;text-align:center;gap:20px;margin:0;min-width:0}
/* Kippen Oberseite/Belag als flaches Spiegeln (scaleX 1 → −1): kein 3D-Kontext, damit multiply den weißen Fotogrund schluckt */
.flip{position:relative;height:min(70vh,820px);aspect-ratio:132/1600;transition:transform .8s var(--ease-in-out)}
.face{position:absolute;inset:0;display:block}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .12s linear .34s}
.face img.b{opacity:0;transform:scaleX(-1)}
.check:has(.spick input[value=base]:checked) .flip{transform:scaleX(-1)}
.check:has(.spick input[value=base]:checked) .face img.f{opacity:0}
.check:has(.spick input[value=base]:checked) .face img.b{opacity:1}
.ski.nopic .flip{aspect-ratio:auto;width:100%;height:auto;min-height:200px;display:grid;place-items:center;color:var(--muted);font-size:var(--step-small)}
.ski figcaption b{display:block;font-weight:600;font-size:var(--step-body__f);line-height:1.3}
.ski figcaption span{display:block;color:var(--muted);font-size:var(--step-small)}
.cpick{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;position:relative}
.cpick label{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--pill);background:#fff;cursor:pointer;font-size:var(--step-small);color:var(--ink)}
.cpick label.dot::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--c)}
.cpick label span{color:inherit;font-size:inherit}
.cpick input:checked+label{background:var(--ink);color:#fff}
.cpick input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}
.ski:has(.cpick input:nth-of-type(1):checked) .face:not([data-ci="1"]){display:none}
.ski:has(.cpick input:nth-of-type(2):checked) .face:not([data-ci="2"]){display:none}
.ski:has(.cpick input:nth-of-type(3):checked) .face:not([data-ci="3"]){display:none}
.ski:has(.cpick input:nth-of-type(4):checked) .face:not([data-ci="4"]){display:none}
.crit{margin-top:64px}
.crit h2{margin-bottom:24px}
.rows{display:grid;gap:10px}
.rhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 92px;gap:16px;padding:0 24px 4px;font-size:var(--step-small);color:var(--muted)}
.crow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 92px;grid-template-areas:"rn old new chip";gap:16px;align-items:center;min-height:76px;padding:14px 24px;background:var(--surface);border-radius:38px}
.rows.one .rhead,.rows.one .crow{grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-areas:"rn new"}
details.crow{display:block;padding:0}
details.crow summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 92px 20px;grid-template-areas:"rn old new chip chev";gap:16px;align-items:center;min-height:76px;padding:14px 24px;cursor:pointer;list-style:none}
.rows.one details.crow summary{grid-template-columns:minmax(0,1fr) minmax(0,2fr) 20px;grid-template-areas:"rn new chev"}
details.crow summary::-webkit-details-marker{display:none}
.crow .rn{grid-area:rn}
.crow .rn b{display:block;font-weight:600;line-height:1.25}
.crow .rn i{display:block;font-style:normal;color:var(--muted);font-size:var(--step-small);line-height:1.3}
.crow .rv{font-variant-numeric:tabular-nums;line-height:1.3}
.crow .rv.old{grid-area:old}
.crow .rv.new{grid-area:new}
.crow .chip{grid-area:chip;min-height:36px;padding:0 14px;font-size:var(--step-small);justify-self:end}
.crow .chev{grid-area:chev;justify-self:end}
.crow .note{padding:0 24px 20px;max-width:64ch;color:var(--ink)}
.rec{margin-top:64px;padding:40px;background:var(--mist);border-radius:var(--r)}
.rec h2{font-size:var(--step-lead__f);font-weight:600}
.rec p{margin-top:16px;font-size:var(--step-lead__f);line-height:1.3;max-width:48ch}
.hints{margin-top:48px}
.hints h2{font-size:var(--step-lead__f);font-weight:600}
.hints ul{margin-top:12px;display:grid;gap:8px;padding-left:1.2em;list-style:disc}
.src{margin-top:48px;color:var(--muted);max-width:72ch}
.pn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.pn a{display:grid;gap:4px;padding:20px 24px;background:var(--surface);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:background-color var(--t-hover) ease}
.pn a span{font-size:var(--step-small);color:var(--muted)}
.pn a b{font-weight:600}
@media (hover:hover) and (pointer:fine){.pn a:hover{background:var(--snow)}}

/* ---------- Faction-Übersicht ---------- */
.cat{padding-block:0 var(--section)}
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--pill);text-decoration:none;font-weight:500;background:var(--surface)}
@media (hover:hover) and (pointer:fine){.jump a:hover{background:var(--snow)}}
.cat .tbl{margin-top:56px;max-width:900px}
.cat:has(.season input:nth-of-type(1):checked) [data-s="2"]{display:none}
.cat:has(.season input:nth-of-type(2):checked) [data-s="1"]{display:none}
.cat .grp+.grp{margin-top:64px}
.cat .gh{font-size:var(--step-head__f);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;color:var(--ink);margin-bottom:20px}
.cat .none{color:var(--muted)}

/* ---------- Marken ---------- */
.brands{padding-block:0 var(--section)}
.brands h1{padding-top:24px}
.bcard{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);margin-top:48px;text-decoration:none;color:var(--ink);align-items:end}
.bcard img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.bcard .bt b{display:block;font-size:var(--step-head__f);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9}
.bcard .bt span{display:block;margin-top:16px;font-size:var(--step-lead__f);color:var(--muted);max-width:30ch}
.brands .lead{margin-top:64px;max-width:52ch}

/* ---------- Über uns ---------- */
.meth{padding-block:var(--section) 0}
.meth h2{font-size:var(--step-head__f)}
.meth .lead{margin-top:24px;max-width:52ch}
.crits{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px 40px;margin-top:48px;counter-reset:none}
.crits li b{display:block;font-weight:600;font-size:var(--step-lead__f)}
.crits li p{margin-top:6px;max-width:40ch}
.mnote{margin-top:40px;max-width:60ch;color:var(--muted)}
.meth h3{margin-top:72px;font-size:var(--step-head__f)}
.verds{display:grid;gap:20px;margin-top:32px;max-width:900px}
.verds li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.verds li p{max-width:60ch}
.plan{padding-block:var(--section) 0}
.plan h2{font-size:var(--step-head__f)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:40px}
.step{padding:32px;border-radius:var(--r);background:var(--surface)}
.step.on{background:var(--accent);color:#fff}
.step b{display:block;font-size:var(--step-lead__f);font-weight:600}
.step p{margin-top:12px}
.step .link,.step .muted{display:inline-block;margin-top:16px}
.step.on .link{color:#fff}
.step .muted{color:var(--muted)}

/* ---------- Impressum, Datenschutz ---------- */
.prose{max-width:72ch;padding-block:24px var(--section)}
.prose h1{font-size:var(--step-head__f);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9}
.prose h2{font-size:var(--step-lead__f);font-weight:600;margin-top:36px}
.prose p{margin-top:12px}
.prose .meta{color:var(--muted);font-size:var(--step-small);margin-top:32px}

/* ---------- Bewegung: einmaliges Einblenden beim Hereinscrollen (site.js setzt .is-in), kurz und ohne Nachlauf ---------- */
.shutter{overflow:clip}
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:.35;translate:0 20px;transition:opacity 380ms var(--ease-out),translate 560ms var(--ease-out);transition-delay:calc(var(--i,0) * 55ms)}
  .js [data-reveal].is-in{opacity:1;translate:0 0}
  .js .shutter[data-reveal]{opacity:1;translate:0 0;clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease-in-out)}
  .js .shutter[data-reveal] img{transform:scale(1.12);transition:transform 1300ms var(--ease-soft)}
  .js .shutter[data-reveal].is-in{clip-path:inset(0)}
  .js .shutter[data-reveal].is-in img{transform:none}
  @supports (animation-timeline:view()){
    .panel img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes drift{from{translate:0 -4%;scale:1.08}to{translate:0 4%;scale:1.08}}
  }
}
@media (prefers-reduced-motion:reduce){
  .flip,.face img,.pairs img,.chev,.button,.chip,.row,.panel img{transition:none;animation:none}
}

/* ---------- Breiten ---------- */
@media (max-width:1100px){
  .hfoot .lead{grid-column:1/8}
  .hfoot .acts{grid-column:8/13}
  .list .word{display:none}
  .list .pic{grid-column:1/5}
  .list .tbl{grid-column:6/13}
  .faq .qs{grid-column:4/13}
}
@media (max-width:959px){
  .search{display:none;order:3;flex-basis:100%;max-width:none;margin:0 0 12px}
  .top.open .search{display:block}
  .sbtn{display:inline-flex}
  .obj{position:relative;right:auto;top:auto;width:78vw;margin:32px 0 0 auto;grid-column:1/-1;rotate:-4deg}
  .facts{grid-column:1/-1;margin-top:24px}
  .list .pic{grid-column:1/-1;position:static;margin-top:56px;max-width:420px}
  .list .tbl{grid-column:1/-1;margin-top:48px}
  .about .facts{grid-column:1/-1;grid-auto-flow:column;grid-auto-columns:max-content;gap:24px;order:2;margin-top:32px}
  .about .bio{grid-column:1/-1}
  .faq .qs{grid-column:1/-1;margin-top:48px}
  .inv{grid-column:1/-1}
  .flinks{grid-column:1/-1;grid-auto-flow:column;grid-auto-columns:max-content;gap:20px;overflow-x:auto}
  .crits{grid-template-columns:1fr 1fr}
}
@media (max-width:719px){
  :root{--top:72px}
  .brand .fig{width:34px;height:41px}
  .nav a:not(.ig){padding:10px 12px}
  .nav .ig span{display:none}
  .nav .ig{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .sent{font-size:clamp(3.2rem,calc(12.6vw / var(--zv,1)),4.9rem);margin-block:8px 0}
  .sent .slot,br.d{display:none}
  br.m{display:inline}
  .slot-m{display:block;position:relative;aspect-ratio:3.2;margin-top:20px;border-radius:var(--r);background:var(--surface);overflow:hidden}
  .live{margin-top:20px;font-size:var(--step-body__f)}
  .live .link{display:inline-block;margin-left:0}
  .top .in{flex-wrap:nowrap;gap:12px}
  .top.open .in{flex-wrap:wrap}
  .nav{gap:2px}
  .chips{gap:8px}
  .chip{min-height:40px;padding:0 14px}
  .panel .tags{left:var(--margin);right:var(--margin);bottom:auto;top:24px;max-width:none;justify-content:flex-start}
  .panel .tags li{min-height:36px;padding:0 12px;font-size:var(--step-small)}
  .hfoot{display:grid;grid-template-columns:1fr;gap:24px;margin-top:40px}
  .hfoot .lead,.hfoot .acts{grid-column:auto;justify-self:start}
  .hfoot .acts{flex-wrap:wrap;gap:16px}
  .stack .ln{font-size:clamp(3.2rem,calc(12.6vw / var(--zv,1)),4.9rem)}
  .panel .verb{font-size:calc(24vw / var(--zv,1))}
  .panel .cap{left:var(--margin);right:var(--margin);bottom:20px;max-width:none}
  .list h2{text-indent:0;font-size:var(--step-head__f)}
  .row{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"img name" "img kind" "img val";row-gap:2px;column-gap:16px}
  .row img,.row .nopic{width:48px;height:112px}
  .row .rv{justify-self:start;text-align:left}
  .about .bio{font-size:var(--step-lead__f);line-height:1.25}
  .about .bio p+p{font-size:var(--step-body__f)}
  .about .bio img{width:4.5em;height:4.5em}
  .about .facts{grid-auto-flow:row;gap:8px}
  .faq h2{font-size:var(--step-head__f)}
  .faq details{padding:16px var(--margin);margin-inline:calc(var(--margin) * -1);border-radius:0}
  .faq summary{font-size:var(--step-lead__f)}
  .foot .wrap{padding-top:56px}
  .foot--home .wrap{min-height:86svh}
  .foot .mail{font-size:calc(11.5vw / var(--zv,1));white-space:normal;word-break:break-all;line-height:1.05}
  .invh{font-size:var(--step-head__f)}
  .inv .button{width:100%}
  .credits{margin-top:48px}
  .again{margin-top:40px}
  .pair{gap:16px;padding:28px 12px 20px}
  .flip{height:min(62vh,560px)}
  .rhead{display:none}
  .crow,details.crow summary{grid-template-columns:1fr auto;grid-template-areas:"rn chip" "old old" "new new";gap:6px 12px;padding:16px 20px;border-radius:var(--r)}
  details.crow summary{grid-template-areas:"rn chip" "old chev" "new chev"}
  .rows.one .crow,.rows.one details.crow summary{grid-template-columns:1fr auto;grid-template-areas:"rn rn" "new chev"}
  .crow .rv.old::before{content:"Vorjahr: ";color:var(--muted)}
  .crow .rv.new::before{content:"Neu: ";color:var(--muted)}
  .rows.one .crow .rv.new::before{content:""}
  .crow .note{padding:0 20px 16px}
  .rec{padding:28px 20px}
  .pn{grid-template-columns:1fr}
  .bcard{grid-template-columns:1fr}
  .crits{grid-template-columns:1fr}
  .verds li{grid-template-columns:1fr;gap:8px}
}
@media (max-width:420px){
  .brand .wm{display:none}
  .sent{font-size:calc(12.8vw / var(--zv,1))}
}

/* ---------- Hero v6: helle Fläche, Satz, Vergleichskarte + Methodik-Kachel ---------- */
body.home .top,.hero{background:var(--mist)}
.hero .wrap{display:block;min-height:0;padding-block:32px var(--section)}
.hero .sent{margin-block:32px 0}
.hero .lead{max-width:36ch;margin-top:32px}
.hgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);margin-top:64px;align-items:stretch}
.cmp{grid-column:1/9;display:flex;flex-direction:column;gap:20px;padding:clamp(20px,3vw,44px);background:#fff;border-radius:var(--r);color:var(--ink);text-decoration:none;overflow:clip}
.cmp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.cmp-t{font-size:var(--step-lead__f);line-height:1.2}
.cmp-t b{font-weight:600}
.cmp .obj{position:relative;right:auto;top:auto;width:100%;max-width:760px;align-self:center;rotate:-3deg;margin:8px 0 12px;pointer-events:none}
.crit4{display:grid;gap:8px}
.crit4 li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;min-height:60px;padding:10px 20px;border-radius:30px;background:var(--mist)}
.crit4 li b{font-weight:600}
.crit4 li span{color:var(--muted);text-align:right}
.crit4 .chip{min-height:36px;padding:0 14px;font-size:var(--step-small);font-style:normal}
.cmp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted)}
.cmp-foot .link{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.cmp:hover .cmp-foot .link{color:var(--accent)}}
.method{grid-column:9/13;display:flex;flex-direction:column;gap:28px;padding:clamp(20px,3vw,44px);background:var(--ink);color:#fff;border-radius:var(--r)}
.method h2{font-size:clamp(2rem,calc(3.4vw / var(--zv,1)),3.5rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9}
.mlist{display:flex;flex-wrap:wrap;gap:10px}
.mlist li{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:var(--pill);font-size:var(--step-lead__f);font-weight:500;transition:transform var(--t-press) var(--ease-out)}
.mlist .core{background:#fff;color:var(--ink)}
.mlist .soft{background:#2A313D;color:#fff}
.mkey{color:var(--snow);max-width:32ch}
.mverd{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.method .chip{background:#2A313D;color:#fff;min-height:36px;padding:0 14px;font-size:var(--step-small)}
.method .chip.on{background:var(--accent)}
.method .link{color:#fff}
@media (max-width:959px){.cmp,.method{grid-column:1/-1}.hgrid{margin-top:40px}}
@media (max-width:719px){.crit4 li{grid-template-columns:1fr auto;row-gap:2px}.crit4 li span{grid-row:2;text-align:left}.crit4 li .chip{grid-row:1/3;grid-column:2}}

/* ---------- 3D-Ansicht auf der Modellseite (check.js aus v4) ---------- */
.stage.duo{margin-top:32px;padding:16px 8px 12px;background:var(--surface);border-radius:var(--r)}
.gl{display:block;position:relative;z-index:1;width:100%;height:clamp(380px,58vh,640px);touch-action:pan-y;cursor:grab}
.gl:active{cursor:grabbing}
.gl-fallback{margin:24px 16px}
.caps{position:relative;z-index:1;height:140px;margin-top:-4px}
.caps>div{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;line-height:1.35;text-align:center}
.caps .nm{display:block;font-weight:600}
.caps .se{display:block;font-size:var(--step-small);color:var(--muted)}
.pick{display:flex;justify-content:center;gap:10px;margin-top:8px}
.dots button{width:28px;height:28px;border-radius:50%;background:var(--c);position:relative}
.dots button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:3px}
.dots button::after{content:"";position:absolute;inset:-10px}
.seg2{display:flex;width:max-content;max-width:100%;margin:8px auto 0;padding:4px;background:#fff;border-radius:var(--pill)}
.seg2 button{min-height:40px;padding:0 16px;border-radius:var(--pill);font-weight:500;color:var(--ink);transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.seg2 button[aria-pressed=true]{background:var(--ink);color:#fff}
.viewrow{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;padding-bottom:8px}
.viewrow .seg2{margin:0}
.hint2{font-size:var(--step-small);color:var(--muted);transition:opacity .5s}
.vpanel[hidden]{display:none}
.check .wrap>h1{padding-top:24px}
@media (max-width:719px){.gl{height:clamp(340px,54vh,480px)}.caps{height:150px}}

/* ---------- Kriterien auf der Modellseite: nur das Geänderte groß, Gleiches in einer Zeile ---------- */
.chgs{display:grid;gap:12px}
.chg{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px 32px;align-items:start;padding:clamp(22px,2.6vw,36px);background:var(--surface);border-radius:var(--r)}
.chg .cn{font-size:var(--step-lead__f);font-weight:500}
.chg .cd{font-size:clamp(2rem,calc(3.6vw / var(--zv,1)),3.5rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.95;color:var(--accent)}
.chg .cv{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:14px;font-size:var(--step-lead__f);line-height:1.3}
.chg .cv span:first-child{color:var(--muted)}
.chg .cv i{font-style:normal}
.chg .cnote{margin-top:12px;max-width:56ch;color:var(--muted)}
.same-line{margin-top:28px;font-size:var(--step-lead__f);color:var(--muted);max-width:52ch}
.same-line b{color:var(--ink);font-weight:600}
.same-all{font-size:var(--step-lead__f)}
.facts1{display:grid;gap:12px}
.facts1 li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px 32px;align-items:baseline;padding:clamp(18px,2vw,26px) clamp(22px,2.6vw,36px);background:var(--surface);border-radius:var(--r)}
.facts1 span{font-size:var(--step-lead__f);font-weight:500;color:var(--muted)}
.facts1 b{font-size:var(--step-lead__f);font-weight:600}
@media (max-width:719px){.chg,.facts1 li{grid-template-columns:1fr}}

/* ---------- Hero v6: die 3D-Ski sind das Erste ---------- */
.hero.check{padding-bottom:0}
.hero .lead{margin-top:20px}
.hero .stage.duo{margin-top:28px}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.hrow .hname{font-size:var(--step-lead__f)}
.hrow .hname b{font-weight:600}
.hrow .button{margin-left:auto}
@media (max-width:719px){.hrow .button{margin-left:0;width:100%}}

.panel .hold.hold-low{place-items:end center;padding-bottom:10svh}
.list .pic img{aspect-ratio:3/4;object-position:38% 50%}
.sent .soft{color:#828C9E}
.button.dark{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.button.dark:hover{background:var(--accent)}}
.hrow .button.dark{margin-left:0}
.hrow .button:not(.dark){margin-left:auto}
@media (max-width:719px){.hrow .button,.hrow .button:not(.dark){width:100%;margin-left:0}}

/* Hinweis auf der Nahtstelle zum ersten Vollbild + Bild, das sich beim Scrollen aus einem abgerundeten Block aufzieht */
.hero.check{position:relative;z-index:3;padding-bottom:72px}
.cue{position:absolute;left:50%;bottom:0;translate:-50% 50%;display:inline-flex;align-items:center;gap:14px;min-height:68px;padding:0 30px 0 34px;border-radius:var(--pill);background:var(--ink);color:#fff;font-size:var(--step-lead__f);font-weight:500;text-decoration:none;white-space:nowrap;z-index:4;transition:background-color var(--t-hover) ease}
.cue svg{width:26px;height:26px}
@media (hover:hover) and (pointer:fine){.cue:hover{background:var(--accent)}}
@media (prefers-reduced-motion:no-preference){
  .cue svg{animation:cue-bob 1.8s var(--ease-soft) infinite}
  @keyframes cue-bob{0%,100%{translate:0 -3px}50%{translate:0 4px}}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .panel:first-child{animation:pgrow linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes pgrow{from{clip-path:inset(16vh 7vw 0 round var(--r))}to{clip-path:inset(0 0 0 round 0)}}
  }
}
.panel .hold.hold-tl{place-items:start start;padding:10svh var(--margin) 0}
.panel .hold.hold-tl .verb{text-align:left}

/* ---------- Marken-Abschnitt auf der Startseite ---------- */
.brandsec{padding-block:var(--section)}
.brandsec h2{font-size:clamp(2.25rem,calc(4vw / var(--zv,1)),3.75rem);line-height:.95;max-width:16ch}
.bgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);margin-top:56px;align-items:end}
.bgrid .bcard{grid-column:1/9;margin-top:0}
.bgrid .bt .go{display:inline-block;margin-top:20px;color:var(--ink);font-size:var(--step-body__f);text-decoration:underline;text-underline-offset:.18em}
.bside{grid-column:9/13;display:grid;gap:28px;align-content:end}
.bside .button{justify-self:start}
.bside .button svg{width:22px;height:22px}
@media (max-width:959px){.bgrid .bcard,.bside{grid-column:1/-1}}

/* vs zwischen den beiden Skipaaren */
.stage.duo{position:relative}
.vs{position:absolute;left:50%;top:calc(clamp(380px,58vh,640px) / 2 + 16px);translate:-50% -50%;z-index:2;width:68px;height:68px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:var(--step-lead__f);font-weight:600;letter-spacing:.02em;pointer-events:none}
@media (max-width:719px){.vs{width:52px;height:52px;top:calc(clamp(340px,54vh,480px) / 2 + 16px)}}

/* Urteil und Knöpfe unter den 3D-Ski: größer, klarer geordnet */
.hero.check{padding-bottom:112px}
.hrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px var(--gutter);align-items:center;margin-top:48px}
.hrow .vtxt{grid-column:1/9}
.hrow .vbig{font-size:clamp(3.75rem,calc(9vw / var(--zv,1)),9.5rem);color:var(--accent);line-height:.84}
.hrow .vsub{margin-top:20px;font-size:var(--step-lead__f);max-width:34ch}
.hrow .button{grid-column:9/13;justify-self:end;margin-left:0}
.button.big{min-height:84px;padding:0 48px;font-size:clamp(1.25rem,1.1rem + calc(.7vw / var(--zv,1)),1.5rem)}
.cue{min-height:84px;padding:0 40px 0 44px;font-size:clamp(1.375rem,1.1rem + calc(1vw / var(--zv,1)),1.75rem);gap:18px}
.cue svg{width:32px;height:32px}
@media (max-width:959px){.hrow .vtxt,.hrow .button{grid-column:1/-1}.hrow .button{justify-self:stretch}}
@media (max-width:719px){.cue{min-height:68px;padding:0 28px 0 32px;font-size:1.25rem}.cue svg{width:26px;height:26px}.button.big{min-height:68px}}

/* VS als Gestaltungselement: riesig, schräg, in Blau, hinter den Ski */
.vs{width:auto;height:auto;border-radius:0;background:none;color:var(--accent);display:block;z-index:0;
  top:calc(clamp(380px,58vh,640px) / 2 + 16px);font-size:clamp(7rem,calc(15vw / var(--zv,1)),15rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.8;letter-spacing:-.02em;rotate:-8deg}
.gl{z-index:1}
@media (prefers-reduced-motion:no-preference){
  .vs{animation:vs-pop 900ms var(--ease-out) 300ms both}
  @keyframes vs-pop{from{opacity:0;scale:.55;rotate:-22deg}60%{scale:1.08}to{opacity:1;scale:1;rotate:-8deg}}
}
@media (max-width:719px){.vs{font-size:clamp(5rem,calc(26vw / var(--zv,1)),8rem);top:calc(clamp(340px,54vh,480px) / 2 + 16px)}}

/* Alle Vollbild-Wörter weiß; ein leichter dunkler Film sichert die Lesbarkeit auf jedem Bild */
.panel::after{content:"";position:absolute;inset:0;background:rgba(11,15,20,.34);z-index:0;pointer-events:none}
.panel[data-ink] .verb{color:#fff}

/* Eine Karte: 3D-Ski, Urteil, Satz und Knopf gehören zusammen */
.stagecard{margin-top:28px;background:var(--surface);border-radius:var(--r);padding:clamp(12px,2vw,24px)}
.hero .stagecard .stage.duo{margin-top:0;padding:8px 0 0;background:none;border-radius:0}
.hero .hrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:16px;padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,32px);background:#fff;border-radius:var(--r)}
.hero .hrow .vchip{min-height:56px;padding:0 24px;font-size:var(--step-lead__f);font-weight:600}
.hero .hrow .vsub{flex:1 1 280px;margin:0;font-size:var(--step-lead__f);max-width:none}
.hero .hrow .button{margin-left:auto;min-height:64px;padding:0 36px;font-size:var(--step-lead__f)}
@media (max-width:719px){.hero .hrow .button{width:100%;margin-left:0}}

/* Urteil = Aussage (Text), Check = Aktion (Knopf) */
.hero .hrow .vtxt{flex:1 1 320px;min-width:0}
.hero .hrow .vline{display:flex;align-items:center;gap:12px;font-size:var(--step-lead__f);margin:0}
.hero .hrow .vline span{color:var(--muted)}
.hero .hrow .vline b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(2rem,calc(3.4vw / var(--zv,1)),3.25rem);line-height:.9;letter-spacing:-.01em}
.hero .hrow .vline .dot{width:16px;height:16px;border-radius:50%;background:var(--accent);flex:none}
.hero .hrow .vsub{margin-top:8px;color:var(--muted)}
.hero .hrow .button.cta{gap:16px;min-height:72px;padding:0 40px 0 44px;margin-left:auto}
.hero .hrow .button.cta svg{width:26px;height:26px;transition:translate var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hero .hrow .button.cta:hover svg{translate:6px 0}}
@media (max-width:719px){.hero .hrow .button.cta{width:100%;justify-content:center}}

/* Prüfer-Nachbesserungen */
.hero .hint2{display:none}
.check .wrap>.hsub{margin-top:16px}
.flinks{display:flex;flex-wrap:wrap;gap:10px 22px}
@media (max-width:959px){.flinks{grid-column:1/-1;display:flex;flex-wrap:wrap;overflow:visible;grid-auto-flow:unset}}
@media (max-width:719px){.sent{font-size:calc(11.4vw / var(--zv,1))}}
@media (max-width:719px){.hero .sent{font-size:calc(11.2vw / var(--zv,1))}}

/* Urteil als Skala mit drei Stellen; die aktive ist gefüllt */
.vscale{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.vscale li{display:inline-flex;align-items:center;min-height:56px;padding:0 24px;border-radius:var(--pill);background:var(--surface);color:var(--muted);font-size:var(--step-lead__f);font-weight:500}
.vscale li.on{background:var(--accent);color:#fff;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(1.5rem,1.2rem + calc(1vw / var(--zv,1)),2rem);padding:0 32px;letter-spacing:-.005em}
.hero .hrow .vsub{margin-top:14px;color:var(--ink)}
.hero .hrow .vtxt{flex:1 1 420px}
@media (max-width:719px){.vscale li{min-height:48px;padding:0 18px;font-size:1rem}.vscale li.on{font-size:1.375rem;padding:0 22px}}

/* Untereinander: Skala, Satz, Knopf über die ganze Breite, darunter der Hinweis zu den Bildern */
.hero .hrow{display:block}
.hero .hrow .vtxt{flex:none}
.hero .hrow .button.cta{display:flex;width:100%;justify-content:center;margin:24px 0 0;min-height:76px}

/* Abzweigung oben: selbst drehen oder direkt zum ganzen Check */
.hero .fork{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:20px}
.hero .fork .lead{margin:0;max-width:34ch}
.hero .fork .button.cta{display:inline-flex;width:auto;margin:0;min-height:72px;padding:0 40px 0 44px}
.hero .hrow .vsub{margin-bottom:0}
@media (max-width:719px){.hero .fork .button.cta{width:100%}}

/* ---------- Mysteriös: dunkle Karte, verdeckte Felder, Ski im Dunkeln ---------- */
.hero .teaser{margin-top:20px;max-width:34ch}
.stagecard.dark{background:var(--ink);color:#fff;padding:clamp(16px,2.4vw,32px)}
.hero .stagecard.dark .stage.duo{background:none;padding:12px 0 0;margin:0}
.dark .caps .nm{color:#fff}
.dark .caps .se,.dark .hint2{color:var(--snow)}
.dark .seg2{background:#1b2230}
.dark .seg2 button{color:#fff}
.dark .seg2 button[aria-pressed=true]{background:#fff;color:var(--ink)}
.dark .dots button[aria-pressed=true]{outline-color:#fff}
.dark .gl{--lit:0;filter:brightness(calc(.14 + var(--lit) * .86));transition:filter .8s var(--ease-soft)}
.dark .gl-fallback{color:#fff}
.qhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.qcount{font-size:var(--step-lead__f);color:var(--snow)}
.qcount b{color:#fff;font-weight:800;font-stretch:62%;font-size:1.4em;margin-right:.15em}
.qall{min-height:48px;padding:0 22px;border-radius:var(--pill);background:#1b2230;color:#fff;font-weight:500;transition:background-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.qall:hover{background:#2A313D}}
.qpills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin-top:20px}
.qp{width:100%;min-height:104px;display:grid;grid-template-columns:1fr auto;align-content:space-between;gap:6px 12px;padding:18px 20px;border-radius:var(--r);background:#161c27;color:#fff;text-align:left;transition:background-color .25s ease,transform var(--t-press) var(--ease-out)}
.qp:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.qp[aria-pressed=false]:hover{background:#1f2735}}
.qp .qn{font-size:var(--step-lead__f);font-weight:500;grid-column:1}
.qp .qa{grid-column:2;grid-row:1;font-size:2.5rem;line-height:.8;font-stretch:62%;font-weight:800;color:var(--accent)}
.qp .qr{display:none;grid-column:1/-1;gap:2px}
.qp .qr b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(1.5rem,1.2rem + calc(.9vw / var(--zv,1)),2rem);line-height:.9}
.qp .qr b.d{color:#7FA0FF}
.qp .qr b.s{color:var(--snow)}
.qp .qr i{font-style:normal;color:var(--snow);font-size:var(--step-body__f);line-height:1.25}
.qp[aria-pressed=true]{background:#232c3c}
.qp[aria-pressed=true] .qa{display:none}
.qp[aria-pressed=true] .qr{display:grid}
.no-js-q .qp .qr,.qp:not([aria-pressed]) .qr{display:grid}
html:not(.js) .qp .qa{display:none}
html:not(.js) .qp .qr{display:grid}
.stagecard.dark .hrow{background:#161c27;color:#fff;margin-top:16px}
.stagecard.dark .hrow .vsub{color:#fff}
.stagecard.dark .vscale li{background:#232c3c;color:var(--snow)}
.stagecard.dark .vscale li.on{background:var(--accent);color:#fff}
.hrow.reveal{animation:q-in .6s var(--ease-out) both}
@keyframes q-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.hero .acts{display:flex;justify-content:center;margin-top:20px}
.hero .acts .button.cta{display:inline-flex;min-height:76px;padding:0 44px 0 48px;font-size:var(--step-lead__f);gap:16px}
@media (max-width:719px){.hero .acts .button.cta{width:100%;justify-content:center}.qp{min-height:88px}}
.hrow[hidden]{display:none!important}

/* ---------- Die Ski sprechen für sich; das Technische ist die Frage ---------- */
.dark .gl{--lit:1;filter:none}
.hero .stagecard.dark{margin-top:28px;padding:clamp(18px,2.6vw,36px)}
.ask{display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(20px,3vw,40px) 0 clamp(6px,1vw,12px)}
.ask-a{font-size:clamp(2rem,calc(4.4vw / var(--zv,1)),4.5rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;color:#fff}
.ask-b{font-size:clamp(2rem,calc(4.4vw / var(--zv,1)),4.5rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;color:#7FA0FF}
.ask-q{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.ask-q li{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 20px 0 24px;border-radius:var(--pill);background:#161c27;color:#fff;font-size:var(--step-lead__f);font-weight:500}
.ask-q li b{font-size:1.6em;line-height:1;font-stretch:62%;font-weight:800;color:var(--accent)}
.ask .button.cta{margin-top:28px;min-height:76px;padding:0 44px 0 48px;font-size:var(--step-lead__f);gap:16px}
.ask .button.cta svg{width:26px;height:26px}
@media (max-width:719px){.ask .button.cta{width:100%;justify-content:center}.ask-q li{min-height:48px;padding:0 16px 0 18px;font-size:1rem}}

/* ---------- Sachlicher Anfang ---------- */
.hero .hrow.ask2{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:16px}
.hero .hrow.ask2 .asktxt{flex:1 1 380px;margin:0;font-size:var(--step-lead__f);line-height:1.35;max-width:52ch}
.hero .hrow.ask2 .asktxt b{font-weight:600}
.hero .hrow.ask2 .button.cta{margin-left:auto;min-height:72px;padding:0 40px 0 44px}
@media (max-width:719px){.hero .hrow.ask2 .button.cta{width:100%;justify-content:center;margin-left:0}}

.hero .hrow.ask2 .asktxt{display:grid;gap:8px}
.hero .hrow.ask2 .ask1{margin:0;font-size:clamp(1.75rem,1.2rem + calc(2vw / var(--zv,1)),2.75rem);font-weight:600;line-height:1.1;letter-spacing:-.015em;max-width:24ch}
.hero .hrow.ask2 .ask2t{margin:0;font-size:var(--step-lead__f);color:var(--muted);max-width:44ch}

/* ---------- Typografie-Skizze: Neue Grafik → Was steckt im Kern? ---------- */
.hero .hrow.ask2{display:block}
.sk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding:clamp(8px,2vw,24px) 0 clamp(12px,2vw,28px)}
.sk p{margin:0;font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-size:clamp(2.75rem,calc(8.5vw / var(--zv,1)),8.5rem);max-width:none}
.sk-a{grid-column:1/9;grid-row:1;color:var(--ink)}
.sk-arrow{grid-column:5/9;grid-row:1/3;width:100%;height:clamp(72px,10vw,150px);margin:clamp(24px,4vw,56px) 0 0;color:var(--ink);align-self:start;justify-self:start;margin-left:clamp(20px,22vw,320px)}
.sk-b{grid-column:3/13;grid-row:2;text-align:right;color:var(--accent);margin-top:clamp(8px,2vw,24px)}
.kern{position:relative;display:inline-block;padding:0 .08em}
.sk-ring{position:absolute;left:-12%;right:-12%;top:-14%;bottom:-18%;width:124%;height:132%;color:var(--ink);overflow:visible;pointer-events:none}
.sk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:8px}
.sk-foot .ask2t{flex:1 1 360px;margin:0;font-size:var(--step-lead__f);color:var(--muted);max-width:44ch}
.sk-foot .button.cta{margin-left:auto;min-height:72px;padding:0 40px 0 44px}
.js .sk path{stroke-dasharray:1;stroke-dashoffset:1}
.sk.is-in path{animation:sk-draw .9s var(--ease-out) forwards}
.sk.is-in .sk-arrow path:nth-child(2){animation-delay:.7s;animation-duration:.4s}
.sk.is-in .sk-ring path{animation-delay:1.2s;animation-duration:.8s}
@keyframes sk-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.js .sk path{stroke-dashoffset:0;stroke-dasharray:none}.sk.is-in path{animation:none}}
@media (max-width:719px){
  .sk{grid-template-columns:1fr;row-gap:6px}
  .sk-a{grid-column:1;grid-row:1}
  .sk-arrow{grid-column:1;grid-row:2;width:clamp(60px,26vw,110px);height:clamp(60px,26vw,110px);margin:4px 0 0 12vw;justify-self:start;transform:rotate(0)}
  .sk-b{grid-column:1;grid-row:3;text-align:left;font-size:clamp(2.5rem,calc(13vw / var(--zv,1)),4rem)}
  .sk-foot .button.cta{width:100%;justify-content:center;margin-left:0}
}

/* Skizze: der Pfeil bekommt eine eigene Zeile zwischen den beiden Wörtern */
.sk{row-gap:0}
.sk-a{grid-column:1/9;grid-row:1}
.sk-arrow{grid-column:3/7;grid-row:2;margin:0;margin-left:0;justify-self:start;width:100%;height:clamp(56px,7vw,110px);align-self:center}
.sk-b{grid-column:2/13;grid-row:3;margin-top:0}
.kern{padding:0 .02em}
.sk-ring{left:-8%;right:-8%;width:116%}
@media (max-width:719px){
  .sk-arrow{grid-column:1;grid-row:2;width:clamp(56px,22vw,96px);height:clamp(48px,16vw,80px);margin-left:14vw}
  .sk-b{grid-column:1;grid-row:3}
}

/* Skizze: Zeilen steigen aus einer Maske, Pfeil und Ring werden danach gezeichnet */
.sk .m{display:block;clip-path:inset(0)}
.sk .m>span{display:block}
.js .sk .m>span{transform:translateY(105%)}
.js .sk .sk-arrow path{animation-duration:.8s;animation-delay:.55s}
.js .sk.is-in .m>span{animation:sk-rise .85s var(--ease-out) forwards}
.js .sk.is-in .m{animation:sk-open 0s linear 1s forwards}
.js .sk.is-in .sk-b .m>span{animation-delay:1.3s}
.js .sk.is-in .sk-b .m{animation-delay:2.3s}
.js .sk.is-in .sk-arrow path:nth-child(2){animation-delay:1.25s;animation-duration:.35s}
.js .sk.is-in .sk-ring path{animation-delay:2.35s;animation-duration:.9s}
@keyframes sk-rise{to{transform:none}}
@keyframes sk-open{to{clip-path:inset(-50% -20% -50% -20%)}}
@media (prefers-reduced-motion:reduce){.js .sk .m>span{transform:none}.js .sk.is-in .m>span,.js .sk.is-in .m{animation:none}}

/* Abfolge: Neue Grafik -> Was steckt im Kern? -> Button */
.sk-foot{justify-content:flex-end;margin-top:clamp(12px,2vw,28px)}
.sk-foot .button.cta{margin-left:0}
.js .sk-foot .button.cta{opacity:0;transform:translateY(16px)}
.js .sk-foot.is-in .button.cta{animation:sk-cta .6s var(--ease-out) 3.2s forwards}
@keyframes sk-cta{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .sk-foot .button.cta{opacity:1;transform:none}.js .sk-foot.is-in .button.cta{animation:none}}
@media (max-width:700px){.sk-foot{justify-content:stretch}}

/* ===== Kapitel "Kern": Scrollfortschritt --p (0..1) steuert alles; ohne Skript und bei reduzierter Bewegung steht der Endzustand ===== */
.hero.check{padding-bottom:0}
.hero.check .wrap{padding-bottom:clamp(32px,4vw,56px)}
.seq{--p:1;--g:clamp(0,calc((var(--p) - .06)/.22),1);--ar:clamp(0,calc((var(--p) - .08)/.2),1);--ah:clamp(0,calc((var(--p) - .26)/.07),1);--tb:clamp(0,calc((var(--p) - .30)/.18),1);--ex:clamp(0,calc((var(--p) - .40)/.26),1);--lb:clamp(0,calc((var(--p) - .64)/.1),1);--lg:clamp(0,calc((var(--g) - .7)*3.4),1);--rg:clamp(0,calc((var(--p) - .72)/.16),1);--cta:clamp(0,calc((var(--p) - .86)/.1),1);
  position:relative;background:var(--ink);color:#fff;height:340svh}
.seq-pin{position:sticky;top:0;height:100svh;display:grid;align-items:center}
.seq-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:var(--gutter);row-gap:clamp(12px,3svh,32px);align-items:center;padding-block:clamp(48px,8svh,88px) clamp(20px,4svh,40px)}
.seq-t{--fs:clamp(2.75rem,min(9vw,16svh),10rem);--fs__f:clamp(2.75rem,min(calc(9vw / var(--zv,1)),calc(16svh / var(--zv,1))),10rem);display:grid;justify-items:start}
.seq-t p{margin:0;font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-size:var(--fs__f);max-width:none}
.seq .m{display:block}
.seq .m>span{display:block}
.sq-a .m{clip-path:inset(0)}
.sq-arrow{width:calc(var(--fs)*.9);height:calc(var(--fs)*.9);margin:calc(var(--fs)*.04) 0 calc(var(--fs)*.04) calc(var(--fs)*.55);color:#fff;overflow:visible}
.sq-arrow path{stroke-dasharray:1;vector-effect:non-scaling-stroke;stroke-width:3px}
.sq-arrow path:nth-child(1){stroke-dashoffset:calc(1 - var(--ar));opacity:clamp(0,calc(var(--ar)*60),1)}
.sq-arrow path:nth-child(2){stroke-dashoffset:calc(1 - var(--ah));opacity:clamp(0,calc(var(--ah)*60),1)}
.sq-b{padding-left:calc(var(--fs)*1.1);color:#fff}
.sq-b .m{clip-path:inset(-40% -20% calc(-40% + (1 - var(--tb))*140%) -20%)}
.sq-b .m>span{transform:translateY(calc((1 - var(--tb))*100%))}
.seq .kern{position:relative;display:inline-block;color:var(--accent);padding:0 .03em}
.sq-ring{position:absolute;left:-9%;width:118%;top:-14%;height:132%;color:#fff;overflow:visible;pointer-events:none}
.sq-ring path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--rg));opacity:clamp(0,calc(var(--rg)*60),1);stroke-width:3px}
.kv{position:relative;margin:0;width:min(100%,calc(54svh*600/360));aspect-ratio:600/360;justify-self:end}
.kv svg{width:100%;height:100%;overflow:visible}
.kv figcaption{position:absolute;left:0;right:0;bottom:-26px;font-size:var(--step-small);color:var(--snow);opacity:calc(var(--lb)*.7)}
.lay{transform:translateY(calc((var(--s) + var(--dy)*var(--k))*1px));transition:transform .12s linear,opacity .12s linear}
.lay-gr{--k:var(--g);opacity:calc(1 - var(--g)*.78)}
.lay-ti,.lay-ke,.lay-ba{--k:var(--ex)}
.lay-ti,.lay-ba{opacity:calc(1 - var(--rg)*.6)}
.lay-gr .tp{fill:#1F4FE0}.lay-gr .sd1{fill:#1741B8}.lay-gr .sd2{fill:#123392}
.lay-ti .tp{fill:#B9C3D1}.lay-ti .sd1{fill:#97A3B5}.lay-ti .sd2{fill:#7C889B}
.lay-ke .tp{fill:#F4F6F9}.lay-ke .sd1{fill:#DFE4EB}.lay-ke .sd2{fill:#BFC7D3}
.lay-ba .tp{fill:#4B5668}.lay-ba .sd1{fill:#353E4E}.lay-ba .sd2{fill:#2A3240}
.wv path{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:3;stroke-linecap:round}
.gl{stroke:#fff;stroke-opacity:.7;stroke-width:1.5}
.gn{stroke:#0B0F14;stroke-opacity:.2;stroke-width:1.2}
.hl{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-opacity:var(--rg)}
.ld{stroke:#fff;stroke-opacity:.45;stroke-width:1.2;opacity:var(--lb)}
.lay-gr .ld{opacity:var(--lg)}
.kl{position:absolute;left:calc(100%*458/600);top:calc(var(--ly)*1%);transform:translateY(-50%);color:#fff;font-size:clamp(.8125rem,calc(1.35vw / var(--zv,1)),1.0625rem);line-height:1.15;font-weight:500;opacity:var(--lb);transition:opacity .12s linear}
.kl-gr{opacity:var(--lg)}
.kl-ti,.kl-ba{opacity:calc(var(--lb)*(1 - var(--rg)*.55))}
.kl-ke{font-weight:700}
.kl i{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:var(--pill);background:var(--accent);font-style:normal;font-size:.8em}
.seq-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;opacity:var(--cta);transform:translateY(calc((1 - var(--cta))*24px))}
.seq-cta:focus-within{opacity:1;transform:none}
.seq-cta .button.cta{margin:0;min-height:72px;padding:0 40px 0 44px}
.js .sq-a .m>span{transform:translateY(105%)}
.js .seq.on .sq-a .m>span{animation:sk-rise .85s var(--ease-out) forwards}
@media (max-width:899px){
  .seq{height:300svh}
  .seq-in{grid-template-columns:1fr}
  .seq-t{--fs:clamp(2.5rem,min(14vw,9.5svh),5rem);--fs__f:clamp(2.5rem,min(calc(14vw / var(--zv,1)),calc(9.5svh / var(--zv,1))),5rem)}
  .kv{justify-self:center;width:min(100%,calc(30svh*600/360))}
  .seq-cta .button.cta{width:100%;justify-content:center}
  }
@media (prefers-reduced-motion:reduce){
  .seq{--p:1!important;height:auto}
  .seq-pin{position:static;height:auto}
  .js .sq-a .m>span{transform:none}
  .lay,.kl{transition:none}
}
.kv{margin-bottom:30px}
@media (min-width:900px){.seq-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.kl{font-size:clamp(.875rem,calc(1.15vw / var(--zv,1)),1.125rem)}}
.seq-t{--fs:clamp(2.75rem,min(8.2vw,15svh),9.5rem);--fs__f:clamp(2.75rem,min(calc(8.2vw / var(--zv,1)),calc(15svh / var(--zv,1))),9.5rem)}
.sq-b{padding-left:calc(var(--fs)*.7);white-space:nowrap}
.sq-arrow{margin-left:calc(var(--fs)*.3)}
@media (max-width:899px){.seq-t{--fs:clamp(2.5rem,min(14vw,9.5svh),5rem);--fs__f:clamp(2.5rem,min(calc(14vw / var(--zv,1)),calc(9.5svh / var(--zv,1))),5rem)}.sq-b{padding-left:calc(var(--fs)*.8)}.sq-arrow{margin-left:calc(var(--fs)*.5)}}
/* Feinschliff 1: frühere Phasen, jede Zeile steigt einzeln auf, Stapel startet größer */
.seq{--g:clamp(0,calc((var(--p) - .02)/.22),1);--ar:clamp(0,calc((var(--p) - .03)/.17),1);--ah:clamp(0,calc((var(--p) - .21)/.07),1);--tb1:clamp(0,calc((var(--p) - .26)/.12),1);--tb2:clamp(0,calc((var(--p) - .33)/.12),1);--ex:clamp(0,calc((var(--p) - .40)/.24),1);--lb:clamp(0,calc((var(--p) - .62)/.1),1);--rg:clamp(0,calc((var(--p) - .70)/.16),1);--cta:clamp(0,calc((var(--p) - .84)/.1),1);--z:clamp(0,calc(var(--p)/.45),1)}
.sq-b .m{--o:0;clip-path:inset(calc(-40%*var(--o)) calc(-20%*var(--o)) calc(-40%*var(--o)) calc(-20%*var(--o)))}
.sq-b .m1{--tb:var(--tb1);--o:clamp(0,calc((var(--tb1) - .96)*25),1)}
.sq-b .m2{--tb:var(--tb2);--o:clamp(0,calc((var(--tb2) - .96)*25),1)}
.sq-b .m>span{transform:translateY(calc((1 - var(--tb))*105%))}
.kv svg{transform:scale(calc(1.3 - .3*var(--z)));transform-origin:38% 50%;transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.kv svg{transform:none;transition:none}}
/* Feinschliff 2: Ring größer und mit Abstand zu den Buchstaben */
.seq .kern{margin:0 .2em 0 .16em}
.sq-ring{left:-12%;width:124%;top:-16%;height:132%}
.sq-ring path{stroke-width:3.5px}
.sq-b .m2{margin-top:.1em}
.sq-ring{max-width:none}
/* Feinschliff 3: kein seitliches Überlaufen, kürzerer Scrollweg */
.seq{overflow-x:clip;height:300svh}
@media (max-width:899px){.seq{height:280svh}}
@media (prefers-reduced-motion:reduce){.seq{height:auto}}
/* Aufbau des echten Dancer 99 TI über die ganze Länge: fünf Lagen */
.kv{width:min(100%,calc(54svh*740/355));aspect-ratio:740/355}
.kv svg{transform:scale(calc(1.18 - .18*var(--z)));transform-origin:40% 50%}
.lay-gr{opacity:calc(1 - var(--g)*.62)}
.lay-t1,.lay-t2,.lay-ke,.lay-ba{--k:var(--ex)}
.lay-t1,.lay-t2,.lay-ba{opacity:calc(1 - var(--rg)*.6)}
.lay-ke{opacity:1}
.hl{fill:none;stroke:#fff;stroke-width:3px;stroke-linejoin:round;stroke-opacity:var(--rg);vector-effect:non-scaling-stroke}
.kl{left:calc(100%*606/740);font-size:clamp(.8125rem,calc(1.15vw / var(--zv,1)),1.0625rem)}
.kl small{display:block;margin-top:2px;font-size:.78em;font-weight:400;color:var(--snow)}
.kl-gr{opacity:var(--lg)}
.kl-t1,.kl-t2,.kl-ba{opacity:calc(var(--lb)*(1 - var(--rg)*.55))}
.kl-ke{opacity:var(--lb);font-weight:700}
.kl-ke small{font-weight:400}
@media (max-width:899px){.kv{width:100%}.kl small{display:none}.kl{font-size:.8125rem}}
.kv{width:min(100%,calc(58svh*740/445));aspect-ratio:740/445}
.lay-gr{opacity:calc(1 - var(--g)*.42)}
.seq-in{width:100%}
@media (min-width:900px){.seq-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
/* 3D-Aufbau (kern3d.js): Canvas über der Zeichnung, die Zeichnung bleibt als Rückfall */
.kv canvas.k3{display:none;position:absolute;inset:0;width:100%;height:100%}
.kv.gl-on canvas.k3{display:block}
.kv.gl-on>svg{display:none}
.kv.gl-on .kl{top:var(--ty,50%)}
.kv.gl-on .kl::before{content:"";position:absolute;right:calc(100% + 6px);top:50%;width:var(--lw,20px);height:1px;background:rgba(255,255,255,.45)} /* taste-skill-ignore: Hilfslinie von der Lage zur Beschriftung in der Grafik */
.kv{width:min(100%,calc(58svh*740/420));aspect-ratio:740/420}
@media (max-width:899px){.kv{width:100%}}
.kl small{font-size:max(13px,.78em)}
.js .seq:not(.end) .seq-cta,.js .seq:not(.end) .seq-cta *{pointer-events:none}
.js .seq:not(.end) .seq-cta:focus-within,.js .seq:not(.end) .seq-cta:focus-within *{pointer-events:auto}
/* Safari: Zeichen-Striche ohne feste Linienstärke (pathLength und non-scaling-stroke vertragen sich dort nicht) */
.sq-arrow path{vector-effect:none;stroke-width:3.6}
.sq-ring path{vector-effect:none;stroke-width:2}
/* "So prüfen wir" sitzt wieder auf der Kante zum ersten großen Bild */
.seq{position:relative;z-index:3}
.seq>.cue{background:var(--ink);color:#fff;border:2px solid rgba(255,255,255,.4);z-index:5}
@media (hover:hover) and (pointer:fine){.seq>.cue:hover{background:#1A2230;border-color:rgba(255,255,255,.75)}}
/* Höhe begrenzen, damit alles in einen Bildschirm passt; unten Platz für den Knopf auf der Kante */
.seq-in{padding-bottom:clamp(64px,10svh,104px)}
@media (max-width:899px){.kv{width:min(100%,calc(34svh*740/420))}}
@media (max-width:899px){
  .seq-in{padding-block:clamp(40px,6svh,72px) clamp(56px,8svh,88px)}
  .seq-t{--fs:clamp(2.5rem,min(14vw,8.5svh),5rem);--fs__f:clamp(2.5rem,min(calc(14vw / var(--zv,1)),calc(8.5svh / var(--zv,1))),5rem)}
  .kv{width:min(100%,calc(30svh*740/420));margin-bottom:24px}
}
.kv{margin-bottom:0}
/* Dritter Schritt: Pfeil vom Fragezeichen zum Knopf, Knopf groß in der Textspalte */
.seq-t{position:relative}
.sq-arrow3{position:absolute;left:calc(var(--fs)*2.9);bottom:calc(var(--fs)*-.78);width:calc(var(--fs)*.62);height:calc(var(--fs)*.62);margin:0;--a3:clamp(0,calc((var(--p) - .78)/.1),1);--a3h:clamp(0,calc((var(--p) - .87)/.05),1)}
.sq-arrow3 path:nth-child(1){stroke-dashoffset:calc(1 - var(--a3));opacity:clamp(0,calc(var(--a3)*60),1)}
.sq-arrow3 path:nth-child(2){stroke-dashoffset:calc(1 - var(--a3h));opacity:clamp(0,calc(var(--a3h)*60),1)}
@media (min-width:900px){
  .seq-cta{grid-column:1;margin-top:calc(var(--fs)*.7)}
  .seq-cta .button.cta{width:100%;min-height:clamp(76px,10svh,96px);font-size:clamp(1.25rem,1rem + calc(.9vw / var(--zv,1)),1.75rem);gap:16px}
  .seq-cta .button.cta svg{width:28px;height:28px}
}
@media (max-width:899px){.sq-arrow3{display:none}}
@media (min-width:900px){.seq-cta{margin-top:calc(clamp(2.75rem,min(8.2vw,15svh),9.5rem)*.7)}}
@media (max-width:1199px){.kl small{display:none}}
/* ===== Modellseite wie v4: Ski links, rechts Urteil, Pills und die blaue Empfehlung ===== */
.model-check{display:grid;gap:32px;margin-top:24px}
.model-check .stage.duo{margin-top:0}
.model-check .vpanel{margin-top:0}
@media (min-width:960px){
  .model-check{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .model-check .stagecol{grid-column:span 7}
  .model-check .detail{grid-column:span 5}
}
.vtitle{margin:0}
.vtitle b{display:block;font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(2.75rem,calc(5vw / var(--zv,1)),4.75rem);line-height:.9;letter-spacing:-.01em;color:var(--accent)}
.vtitle .was{display:block;margin-top:10px;font-size:var(--step-lead__f);font-weight:600;line-height:1.25}
.edition{margin-top:16px;font-size:var(--step-small);max-width:56ch}
.pills{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.pill{background:var(--surface);border-radius:32px}
.pill>button{appearance:none;border:0;background:transparent;font:inherit;width:100%;display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px 8px 8px;border-radius:32px;cursor:pointer;text-align:left;color:var(--ink)}
.plus{position:relative;flex:none;width:32px;height:32px}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--ink);transition:transform .22s ease}
.plus::after{transform:rotate(90deg)}
.pill.open .plus::after{transform:rotate(0)}
.pl{flex:1;font-size:1.125rem;font-weight:700;line-height:1.3}
.pl small{display:block;font-size:var(--step-small);font-weight:400}
.pl small.d{color:var(--accent);font-weight:600}
.badge{font-size:var(--step-small);font-weight:600;line-height:1.4;padding:2px 12px;border-radius:999px;background:#fff;color:var(--ink)}
.badge.anders{background:var(--accent);color:#fff}
.pp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.pill.open .pp{grid-template-rows:1fr}
.pi{overflow:hidden;min-height:0}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 16px 0 52px}
.vals.one{grid-template-columns:1fr}
.vals small{display:block;font-size:var(--step-small);color:var(--muted)}
.vals b{display:block;font-size:1.125rem;font-weight:600}
.vals .d b{color:var(--accent)}
.vals:last-child{padding-bottom:16px}
.pi p{padding:8px 16px 16px 52px;font-size:1.0625rem;line-height:1.45}
.pill.advice-card{background:var(--accent);color:#fff}
.pill.advice-card>button,.pill.advice-card .pl small,.pill.advice-card .pi,.pill.advice-card .pi p{color:#fff}
.pill.advice-card>button{padding-left:12px}
.pill.advice-card .fig{flex:none;width:40px;height:48px}
.pill.advice-card .plus::before,.pill.advice-card .plus::after{background:#fff}
.pill.advice-card .pi a{color:#fff}
.pill.advice-card .pi p{padding-left:16px}
.pill.advice-card :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.pp,.plus::before,.plus::after{transition:none}}
/* Saison über den Ski, nur im Kopf der Startseite */
.hero .stage.duo{position:relative;padding-top:52px}
.seas{position:absolute;left:0;right:0;top:12px;z-index:2;pointer-events:none}
.sea{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:clamp(1.0625rem,.95rem + calc(.6vw / var(--zv,1)),1.5rem);font-weight:400;color:var(--muted)}
.sea b{font-weight:700;color:var(--ink)}
.hero .caps .se{display:none}
/* So prüfen wir, ausführlich: die drei Wörter aus den Bildern als Spalten */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px var(--gutter);margin-top:56px}
.mcol{min-width:0}
.mverb{margin:0;font-size:clamp(2.5rem,calc(4.6vw / var(--zv,1)),4.5rem);line-height:.9;margin-top:0}
.meth .mverb{margin-top:0;font-size:clamp(2.5rem,calc(4.6vw / var(--zv,1)),4.5rem)}
.msub{margin-top:14px;color:var(--muted);font-size:var(--step-lead__f);line-height:1.25;max-width:26ch}
.mitems{display:grid;gap:28px;margin-top:36px}
.mitems li b{display:block;font-weight:600;font-size:var(--step-lead__f)}
.mitems li p{margin-top:6px;max-width:40ch}
.mcol .verds{margin-top:36px;gap:28px}
.mcol .verds li{grid-template-columns:1fr;gap:10px;justify-items:start}
.mcol .mnote{margin-top:28px;font-size:var(--step-small);max-width:34ch}
.madvice{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:64px;padding:20px 24px 20px 20px;background:var(--accent);color:#fff;border-radius:44px}
.madvice .fig{flex:none;width:40px;height:48px}
.madvice p{flex:1 1 320px;margin:0;font-size:var(--step-lead__f);line-height:1.3}
.madvice p b{display:block;font-weight:700}
.madvice .button{background:#fff;color:var(--ink);margin-left:auto}
.meth-home{padding-block:clamp(72px,9vw,140px) 0}
@media (max-width:959px){.mgrid{grid-template-columns:1fr;gap:56px}.madvice .button{margin-left:0;width:100%}}
/* Saison deutlich über den Ski */
.hero .stage.duo{padding-top:clamp(84px,8vw,112px)}
.seas{top:clamp(24px,2.6vw,36px)}
.hero .stagecard .stage.duo{padding-top:clamp(84px,8vw,112px)}
/* ===== Footer neu: ein Raster, eine Handlung, das Wortzeichen zuletzt ===== */
.ft{background:var(--ink);color:#fff;overflow:clip;position:relative;display:flex;flex-direction:column}
.ft--home{min-height:min(100svh,960px)}
.ft-in{flex:1;display:flex;flex-direction:column;padding-top:clamp(72px,9vw,128px)}
.ft-top{display:grid;gap:clamp(24px,3vw,40px);justify-items:start}
.ft-q{margin:0;font-size:clamp(2.75rem,calc(7.2vw / var(--zv,1)),7.5rem);line-height:.9;max-width:14ch}
.ft-mail{display:inline-flex;align-items:center;gap:.4em;font-size:clamp(1.5rem,calc(3.4vw / var(--zv,1)),3.25rem);line-height:1.1;letter-spacing:-.02em;color:#fff;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.16em;text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color var(--t-ui) var(--ease-out)}
.ft-mail svg{width:.8em;height:.8em;flex:none;transition:translate var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ft-mail:hover{text-decoration-color:#fff}.ft-mail:hover svg{translate:.12em -.12em}}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gutter);margin-top:clamp(56px,8vw,112px);align-items:start}
.ft-brand{grid-column:1/6;display:grid;gap:16px;justify-items:start}
.ft-brand .fig{width:40px;height:48px}
.ft-brand p{margin:0;max-width:34ch;color:var(--snow);font-size:var(--step-body__f);line-height:1.4}
.ft-col{grid-column:span 2}
.ft-c1{grid-column:7/9}
.ft-c2{grid-column:9/11}
.ft-c3{grid-column:11/13}
.ft-h{margin:0 0 14px;font-size:var(--step-small);color:#9AA3AF}
.ft-col ul{display:grid;gap:10px}
.ft-col a:not(.button){color:#fff;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;text-decoration-thickness:.06em;transition:text-decoration-color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ft-col a:not(.button):hover{text-decoration-color:#fff}}
.ft-ig{min-height:48px;padding:0 20px}
.ft-credits{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin:clamp(48px,7vw,96px) 0 0;font-size:var(--step-small);color:#9AA3AF}
.ft-mark{margin-top:clamp(40px,6vw,88px);padding:0 var(--margin) var(--margin);overflow:hidden}
.ft-mark img{display:block;width:100%;max-width:none;height:auto;pointer-events:none;user-select:none}
.js .ft-mark[data-reveal]{opacity:1;translate:none;transition:none}
.js .ft-mark img{transform:translateY(105%)}
.js .ft-mark.is-in img{transform:none;transition:transform 1.1s var(--ease-out)}
@media (max-width:959px){
  .ft-brand{grid-column:1/-1}
  .ft-c1{grid-column:1/7}
  .ft-c2{grid-column:7/13}
  .ft-c3{grid-column:1/-1}
}
@media (max-width:640px){.ft-q{font-size:clamp(2.5rem,calc(14vw / var(--zv,1)),4rem)}.ft-credits{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.js .ft-mark img{transform:none;transition:none}.ft-mail,.ft-mail svg,.ft-col a{transition:none}}
.ft-col ul{list-style:none;padding:0;margin:0}
.ft-q{max-width:11em}
/* Auftakt im Kopf der Startseite: Überschrift steigt aus der Maske, dann Satz, Saison und Namen */
.hero .sent .w{display:inline-block;overflow:clip;vertical-align:bottom;padding-block:.06em;margin-block:-.06em}
.hero .sent .w>span{display:inline-block}
.js .hero .sent .w>span{transform:translateY(112%);animation:h-rise .95s var(--ease-out) calc(.05s + var(--k)*.13s) forwards}
.js .hero .lead.teaser{opacity:0;translate:0 14px;animation:h-fade .8s var(--ease-out) .5s forwards}
.js .hero .seas .sea{opacity:0;translate:0 10px;animation:h-fade .8s var(--ease-out) 1.15s forwards}
.js .hero .caps{opacity:0;translate:0 10px;animation:h-fade .8s var(--ease-out) 1.25s forwards}
.js .hero .viewrow{opacity:0;animation:h-fade .8s var(--ease-out) 1.4s forwards}
@keyframes h-rise{to{transform:none}}
@keyframes h-fade{to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  .js .hero .sent .w>span{transform:none;animation:none}
  .js .hero .lead.teaser,.js .hero .seas .sea,.js .hero .caps,.js .hero .viewrow{opacity:1;translate:none;animation:none}
}
@media (max-width:640px){.ft-q{font-size:clamp(1.9rem,calc(9.6vw / var(--zv,1)),3rem);max-width:none}}
/* Die großen Wörter der Bilder passen immer in die Breite (Vergleichen war auf dem Handy abgeschnitten) */
@media (max-width:719px){.panel .verb{font-size:min(calc(24vw / var(--zv,1)),calc((calc(100vw / var(--zv,1)) - 2*var(--margin__f))/(var(--n,8)*.45)))}}
/* Durchgehende 3D-Szene: ein durchsichtiges Fenster über der ganzen Seite (kern3d.js) */
.k3-fixed{position:fixed;left:0;top:0;pointer-events:none;z-index:40;visibility:hidden}

/* Auftakt: die Einblendung füllt nur vorher; danach darf --skiT (Übergabe an die Szene) die Beschriftung des neuen Paars ausblenden */
.js .hero .seas .sea{opacity:1;translate:0 0;animation:h-in .8s var(--ease-out) 1.15s backwards}
.js .hero .caps{opacity:1;translate:0 0;animation:h-in .8s var(--ease-out) 1.25s backwards}
.js .hero .viewrow{opacity:1;animation:h-in .8s var(--ease-out) 1.4s backwards}
@keyframes h-in{from{opacity:0;translate:0 10px}}
.hero .sea-new,.hero .cap-new{opacity:clamp(0,calc(1 - var(--skiT,0)*3),1)}
@media (prefers-reduced-motion:reduce){.js .hero .seas .sea,.js .hero .caps,.js .hero .viewrow{animation:none}}
/* Ebenen: Kapitelhintergrund unter dem 3D-Fenster (z 40), Texte und Beschriftungen des Kapitels darüber */
.seq{z-index:auto}
.seq-pin{z-index:41}
.seq>.cue{z-index:45}
/* Handy: sichtbarer Knopf im ersten Bildschirm; Überschrift "Wer pairwise.ski macht" in zwei Zeilen */
.hero-cta{display:none}
@media (max-width:719px){
  .hero-cta{display:inline-flex;width:100%;min-height:56px;margin-top:20px;justify-content:center}
  .js .hero .hero-cta{animation:h-in .8s var(--ease-out) .7s backwards}
  main>.wrap>h1.h1-fit{font-size:min(56px,calc(11.2vw / var(--zv,1)))}
}
@media (prefers-reduced-motion:reduce){.js .hero .hero-cta{animation:none}}
/* ===== So prüfen wir als ein Zug: Bild, großes Wort, Karten mit der genauen Erklärung; am Ende nur die Empfehlung ===== */
.how-intro{padding-block:clamp(72px,9vw,140px) clamp(40px,6vw,72px)}
.how-intro h2{font-size:var(--step-head__f)}
.how-intro .lead{margin-top:24px;max-width:52ch}
.how-end{padding-block:clamp(56px,7vw,100px) 0}
.panel.pex{--pp:1;--pa:clamp(0,calc((var(--pp) - .05)/.18),1);--ps:clamp(0,calc((var(--pp) - .14)/.14),1);height:230svh}
.panel.pex .hold{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(14px,2.6svh,32px);padding:clamp(24px,5svh,56px) var(--margin) clamp(20px,4svh,44px)}
.panel.pex .verb{font-size:clamp(4.5rem,min(calc(13vw / var(--zv,1)),calc(21svh / var(--zv,1))),12rem);padding:0;translate:0 calc((1 - var(--pa))*var(--vs,13svh))}
.pexp{width:min(100%,1180px);display:grid;gap:clamp(12px,2svh,22px)}
.psub{margin:0;text-align:center;color:#fff;font-size:var(--step-lead__f);line-height:1.25;max-width:60ch;justify-self:center;opacity:var(--ps)}
.pcards{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:clamp(10px,1.4vw,16px);list-style:none;margin:0;padding:0}
.pcards li{--o:clamp(0,calc((var(--pp) - .2 - var(--k)*.1)/.14),1);opacity:var(--o);translate:0 calc((1 - var(--o))*26px);background:rgba(11,15,20,.68);color:#fff;border-radius:var(--r);padding:clamp(16px,2.4svh,26px) clamp(18px,2vw,28px);display:grid;gap:8px;align-content:start;justify-items:start}
.pcards li b{font-weight:600;font-size:var(--step-lead__f);line-height:1.15}
.pcards li p{margin:0;font-size:clamp(.9375rem,.85rem + calc(.3vw / var(--zv,1)),1.0625rem);line-height:1.4;max-width:46ch}
.pcards .chip{pointer-events:none}
.panel.pex[style*="--c:2"] .pexp{width:min(100%,820px)}
@media (max-width:719px){
  .panel.pex{height:300svh}
  .panel.pex .hold{justify-content:flex-start;padding-top:clamp(28px,7svh,64px);gap:12px}
  .panel.pex .verb{font-size:min(calc(20vw / var(--zv,1)),calc(14svh / var(--zv,1)),calc((calc(100vw / var(--zv,1)) - 2*var(--margin__f))/(var(--n,8)*.45)));--vs:6svh;--vs__f:calc(6svh / var(--zv,1))}
  .pcards{grid-template-columns:1fr;gap:8px}
  .pcards li{padding:12px 16px;gap:4px;border-radius:20px}
  .pcards li b{font-size:1.0625rem}
  .pcards li p{font-size:.875rem;line-height:1.35}
  .psub{font-size:1rem;text-align:left;justify-self:start}
}
@media (prefers-reduced-motion:reduce){.panel.pex .verb,.pcards li{translate:none}}
/* Einleitung: Überschrift links, Satz rechts; liegt über dem 3D-Fenster */
.how-intro{position:relative;z-index:41;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:24px;align-items:end}
.how-intro h2{grid-column:1/8}
.how-intro .lead{grid-column:8/13;margin:0;max-width:44ch}
@media (max-width:959px){.how-intro h2,.how-intro .lead{grid-column:1/-1}}
/* Modellseite: Titel und Pills laufen ruhig ein (auch beim Wechsel der Ausführung) */
.js .vpanel:not([hidden]) .vtitle{animation:h-in .7s var(--ease-out) .1s backwards}
.js .vpanel:not([hidden]) .pill{animation:h-in .6s var(--ease-out) calc(.2s + var(--i,0)*70ms) backwards}
@media (prefers-reduced-motion:reduce){.js .vpanel:not([hidden]) .vtitle,.js .vpanel:not([hidden]) .pill{animation:none}}

/* ===== Fragen als Pills (wie auf den Modellseiten), Überschrift bleibt links stehen, der Footer schiebt sich als Karte darunter ===== */
.faq{--fr:clamp(32px,4.4vw,64px);--fr__f:clamp(32px,calc(4.4vw / var(--zv,1)),64px);background:var(--mist);padding-block:var(--section) calc(var(--section)*.55 + var(--fr))}
.faq-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px var(--gutter);align-items:start}
.faq .faq-head{grid-column:1/6;position:sticky;top:48px;display:grid;gap:32px;justify-items:start}
.faq .faq-head h2{grid-column:auto;max-width:9ch;font-size:var(--step-head__f);line-height:.9}
.faq-ask{min-height:60px;padding:0 26px 0 28px;text-align:left}
.faq-list{grid-column:6/13;display:grid;gap:10px;list-style:none;margin:0;padding:0}
.faq .pill{background:#fff;border-radius:40px}
.faq .pill>button{min-height:88px;padding:12px 30px 12px 16px;gap:20px;border-radius:40px}
.faq .pl{font-size:var(--step-lead__f);font-weight:600;line-height:1.25}
.faq .plus{width:48px;height:48px;border-radius:50%;background:var(--surface);transition:background-color var(--t-ui) var(--ease-out)}
.faq .plus::before,.faq .plus::after{width:16px;margin-left:-8px}
.faq .pill.open .plus{background:var(--accent)}
.faq .pill.open .plus::before,.faq .pill.open .plus::after{background:#fff}
@media (hover:hover) and (pointer:fine){.faq .pill:not(.open)>button:hover .plus{background:var(--snow)}}
.faq .pi p{padding:2px 30px 28px 84px;font-size:var(--step-body__f);line-height:1.5;max-width:62ch}
html:not(.js) .faq .pp{grid-template-rows:1fr}
.ft--home{--fr:clamp(32px,4.4vw,64px);--fr__f:clamp(32px,calc(4.4vw / var(--zv,1)),64px);margin-top:calc(var(--fr) * -1);border-radius:var(--fr) var(--fr) 0 0;position:relative;z-index:2}
@media (max-width:959px){
  .faq .faq-head{grid-column:1/-1;position:static}
  .faq-list{grid-column:1/-1}
  .faq .pill>button{min-height:72px;padding:10px 20px 10px 12px;gap:14px}
  .faq .plus{width:40px;height:40px}
  .faq .pi p{padding:2px 20px 22px 66px}
}
@media (prefers-reduced-motion:reduce){.faq .plus{transition:none}}
.faq .faq-head h2{max-width:none}
@media (max-width:640px){.faq-ask{white-space:normal;max-width:100%;justify-content:space-between;gap:12px;padding:0 22px}}
/* ===== Ergebnis des Zugs: die pairwise-Empfehlung, groß und blau, mit einem echten Beispiel ===== */
.result{background:var(--accent);color:#fff;padding-block:clamp(80px,11vw,170px)}
.result-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:56px;align-items:center}
.res-l{grid-column:1/8;display:grid;gap:clamp(18px,2.4vw,32px);justify-items:start}
.res-l .fig{width:clamp(48px,5vw,76px);height:auto}
.res-l h2{margin:0;font-size:clamp(3.5rem,calc(9.4vw / var(--zv,1)),10rem);line-height:.86;color:#fff}
.res-l .lead{margin:0;max-width:24ch;color:#fff}
.res-card{grid-column:8/13;background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(24px,3vw,44px);display:grid;gap:clamp(14px,1.8vw,22px);justify-items:start}
.rc-top{margin:0;font-size:var(--step-lead__f);color:var(--muted);line-height:1.25}
.rc-top b{color:var(--ink);font-weight:700}
.rc-v{margin:0}
.rc-v .chip{min-height:48px;padding:0 22px;font-size:var(--step-lead__f);pointer-events:none}
.rc-d{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.rc-d li{padding:6px 14px;border-radius:var(--pill);background:var(--surface);color:var(--accent);font-weight:600;font-size:var(--step-body__f)}
.rc-t{margin:0;font-size:var(--step-body__f);line-height:1.5;max-width:44ch}
.res-card .button{margin-top:6px}
@media (max-width:959px){.res-l,.res-card{grid-column:1/-1}.res-card{padding:22px}}
/* Karten auf den Bildern größer: Text, Titel, Chips und Breite wachsen mit dem Bildschirm */
@media (min-width:720px){
  .pexp{width:min(100%,1340px)}
  .panel.pex[style*="--c:2"] .pexp{width:min(100%,1040px)}
  .psub{font-size:clamp(1.25rem,1.05rem + calc(.9vw / var(--zv,1)),1.9rem);max-width:44ch}
  .pcards{gap:clamp(12px,1.6vw,22px)}
  .pcards li{padding:clamp(20px,3svh,34px) clamp(22px,2.4vw,36px);gap:12px;border-radius:28px}
  .pcards li b{font-size:clamp(1.375rem,1.1rem + calc(1.1vw / var(--zv,1)),2rem)}
  .pcards li p{font-size:clamp(1.0625rem,.95rem + calc(.5vw / var(--zv,1)),1.375rem);line-height:1.42;max-width:48ch}
  .pcards .chip{min-height:46px;padding:0 20px;font-size:clamp(1.0625rem,.95rem + calc(.5vw / var(--zv,1)),1.375rem)}
}

/* Suche jetzt: Überschrift steigt aus der Maske (wie der Auftakt oben), das Suchfeld fliegt danach von rechts ein */
.find{background:#fff;padding-block:clamp(72px,11vw,150px) clamp(88px,12vw,170px);overflow-x:clip}
.find .wrap{display:grid;justify-items:start;gap:clamp(28px,4vw,48px)}
.find-h{margin:0;max-width:100%}
.find-h .w{display:inline-block;overflow:clip;vertical-align:bottom;padding-block:.06em;margin-block:-.06em}
.find-h .w>span{display:inline-block}
.js .find-h .w>span{transform:translateY(112%)}
.js .find-h.is-in .w>span{animation:h-rise .95s var(--ease-out) calc(.05s + var(--k)*.13s) forwards}
.js .find-h[data-reveal]{opacity:1;translate:none;transition:none}
.fsearch{position:relative;z-index:6;width:min(100%,780px)}
.fsearch .sfield svg{left:26px;width:26px;height:26px}
.fsearch .sfield input{height:76px;padding:0 24px 0 68px;font-size:var(--step-lead__f)}
.js .fsearch[data-reveal]{opacity:0;translate:min(14vw,120px) 0;transition:opacity .5s var(--ease-out) .5s,translate 1s var(--ease-expo) .5s}
.js .fsearch[data-reveal].is-in{opacity:1;translate:0 0}
.find-alt{font-size:var(--step-body__f)}
@media (max-width:719px){.fsearch .sfield input{height:64px;padding-left:58px}.fsearch .sfield svg{left:20px;width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){
  .js .find-h .w>span{transform:none}
  .js .find-h.is-in .w>span{animation:none}
  .js .fsearch[data-reveal]{opacity:1;translate:none;transition:none}
}

/* Das Wort Kern und die Beschriftung Holzkern haben die Farbe des Holzkerns im Ski (Lightweight Poplar) */
:root{--wood:#E2BC7F}
.seq .kern{color:var(--wood)}
.kl-ke{color:var(--wood)}

/* Über mich: eine runde Geschichte. Die Frage groß, dann wer dahinter steht, am Ende die Antwort an einem Beispiel */
.story{padding-block:var(--section)}
.story-q{margin:0;font-size:clamp(2.6rem,calc(7.4vw / var(--zv,1)),6.75rem);max-width:100%}
.story-q .w{display:inline-block;overflow:clip;vertical-align:bottom;padding-block:.06em;margin-block:-.06em}
.story-q .w>span{display:inline-block}
.js .story-q .w>span{transform:translateY(112%)}
.js .story-q.is-in .w>span{animation:h-rise .95s var(--ease-out) calc(.05s + var(--k)*.13s) forwards}
.js .story-q[data-reveal]{opacity:1;translate:none;transition:none}
.story-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(40px,6vw,88px)}
.story-photo{position:sticky;top:calc(var(--top) + 24px);margin:0;max-width:440px}
.story-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--r)}
.story-photo figcaption{position:absolute;left:14px;bottom:14px;padding:6px 14px;border-radius:var(--pill);background:#fff;color:var(--ink);font-size:var(--step-small);font-weight:600}
.story-text{max-width:40rem}
.story-text .ch-in{margin:0;font-size:var(--step-lead__f);line-height:1.35}
.story-text b{font-weight:600}
.ch{margin-top:clamp(56px,7vw,112px)}
.ch h3{margin:0 0 16px;font-size:clamp(1.75rem,1.2rem + calc(1.9vw / var(--zv,1)),2.75rem);line-height:1.08;letter-spacing:-.015em;font-weight:600;max-width:20ch}
.ch p{margin:0;font-size:var(--step-lead__f);line-height:1.4;max-width:34em}
.ch .ch-fig{display:block;width:clamp(72px,8vw,104px);height:auto;margin:0 0 20px}
.ch-end .button{margin-top:clamp(28px,3.4vw,44px)}
.regal{display:grid;gap:10px;margin-top:clamp(24px,3vw,36px);padding:clamp(16px,2vw,24px);border-radius:var(--r);background:var(--mist)}
.regal figure{margin:0;display:grid;gap:6px}
.regal figure span{font-size:var(--step-small);font-weight:600;color:var(--muted)}
.regal figure:last-child span{color:var(--accent)}
.regal img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.regal-a{margin-top:20px!important;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.regal-a .vchip{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:var(--pill);background:var(--accent);color:#fff;font-weight:600;font-size:var(--step-body__f)}
.regal-a b{font-weight:600}
.sign{display:grid;gap:4px;margin-top:clamp(40px,5vw,64px)!important;font-size:var(--step-body__f)!important}
.sign b{font-size:clamp(1.5rem,1.2rem + calc(1vw / var(--zv,1)),2rem)}
.sign span{color:var(--muted)}
.story .facts{display:flex;gap:24px;margin:clamp(56px,7vw,96px) 0 0;padding:0;list-style:none;font-size:var(--step-small)}
@media (max-width:899px){
  .story-body{grid-template-columns:1fr;gap:28px}
  .story-photo{position:relative;top:auto;max-width:320px}
  .ch p,.story-text .ch-in{font-size:var(--step-body__f)}
  .ch-end .button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .js .story-q .w>span{transform:none}
  .js .story-q.is-in .w>span{animation:none}
}

/* Was ich baue: Jetzt, Als Nächstes, Später mit Status; eine Reihenfolge ohne Termine */
.plan-note{margin:16px 0 0;font-size:var(--step-body__f);color:var(--muted)}
.steps.rm{list-style:none;padding:0}
.steps.rm .step{display:flex;flex-direction:column;align-items:flex-start}
.steps.rm .st{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--pill);background:#fff;color:var(--ink);font-size:var(--step-small);font-weight:600;margin-bottom:20px}
.steps.rm .step.on .st{color:var(--accent)}
.steps.rm .step.later{color:var(--muted)}
.steps.rm .step.later b{color:var(--ink)}
/* Kopfzeile mit drei Reitern auf schmalen Handys: Logo behält seine Breite, Reiter rücken enger */
@media (max-width:719px){
  .brand{flex:none}
  .nav a:not(.ig){padding:10px 9px}
}
@media (max-width:420px){
  .nav a:not(.ig){padding:10px 7px;font-size:.9375rem}
  .nav .ig,.nav .sbtn{width:40px;height:40px}
  .top .in{gap:6px}
  .brand .fig{width:30px;height:36px}
}
main>.wrap+.meth{padding-top:clamp(24px,4vw,48px)}
@media (min-width:860px){.steps.rm{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Über mich: Geschichte und "Was ich baue" rücken zusammen, die Karten bekommen Luft zum Footer */
.story{padding-bottom:clamp(24px,4vw,56px)}
.story+.plan{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,120px)}

/* ---------- Marken und Modellübersicht: Shop-Raster ---------- */
.vc{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--pill);font-size:var(--step-small);font-weight:600;line-height:1;white-space:nowrap}
.vc-new{background:var(--accent);color:#fff}
.vc-same{background:#fff;color:var(--ink)}
.vc-fresh{background:var(--ink);color:#fff}
.vc-gone,.vc-prev{background:#fff;color:var(--muted)}
.mc[hidden],.grp[hidden],.cat-none[hidden]{display:none}
.crumb{display:flex;align-items:center;gap:10px;padding-top:24px;font-size:var(--step-small);color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a::after{content:"/";margin-left:10px}
@media (hover:hover) and (pointer:fine){.crumb a:hover{color:var(--ink)}}
.cat-sub{margin:12px 0 0;font-size:var(--step-lead__f);color:var(--muted)}
.cat-sub b{color:var(--ink);font-weight:700}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px;padding-block:12px;background:var(--bg);z-index:30}
@media (min-width:900px){.bar{position:sticky;top:0}}
.fgroup{display:flex;flex-wrap:wrap;gap:8px}
.fgroup[hidden]{display:none}
.fc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--pill);background:var(--surface);color:var(--ink);font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.fc i{font-style:normal;font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums}
.fc.on{background:var(--ink);color:#fff}
.fc.on i{color:rgba(255,255,255,.7)}
.fc.zero:not(.on){opacity:.45}
@media (hover:hover) and (pointer:fine){.fc:not(.on):hover{background:var(--snow)}}
.fc:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gall{margin-top:24px}
.cat .tbl{max-width:none}
.cat .gh .gn{display:inline-block;margin-left:14px;font-size:var(--step-lead__f);font-stretch:100%;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:32px 16px}
.mc{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.mc-img{position:relative;aspect-ratio:1/1.08;overflow:hidden;border-radius:var(--r);background:var(--mist);transition:background-color .3s ease}
.mc-img img{position:absolute;left:50%;top:50%;height:104%;width:auto;max-width:none;translate:-50% -50%;rotate:28deg;mix-blend-mode:multiply;transition:rotate .7s var(--ease-out),scale .7s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mc:hover .mc-img img{rotate:21deg;scale:1.05}.mc:hover .mc-img{background:var(--surface)}}
.mc:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--r)}
.mc-w{position:absolute;left:16px;top:14px;font-weight:600;font-variant-numeric:tabular-nums}
.mc-img .vc{position:absolute;left:12px;bottom:12px}
.mc-nopic{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(4rem,calc(9vw / var(--zv,1)),6rem);font-stretch:62%;font-weight:800;color:var(--snow)}
.mc-n{margin-top:14px;font-size:var(--step-lead__f);font-weight:600;line-height:1.2}
.mc-k{margin-top:4px;color:var(--muted);font-size:var(--step-body__f);line-height:1.3}
.mc-l{margin-top:2px;font-size:var(--step-body__f);font-variant-numeric:tabular-nums}
.cat-none{padding:48px 0;text-align:center}
.cat-none p{margin:0 0 20px;font-size:var(--step-lead__f);color:var(--muted)}
@media (max-width:640px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.fc{padding:0 14px}.mc-n{font-size:1.0625rem}}
.bfeat{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);align-items:center;margin-top:48px}
.bfeat-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.bk{margin:0;font-size:var(--step-lead__f);color:var(--muted)}
.bfeat h2{margin:8px 0 0;font-size:clamp(3.5rem,calc(9vw / var(--zv,1)),9rem);line-height:.9}
.bfeat h2 a{color:inherit;text-decoration:none}
.bn{margin:20px 0 0;font-size:var(--step-lead__f)}
.bn b{font-weight:700}
.bstats{list-style:none;margin:28px 0 36px;padding:0;display:grid;gap:10px;max-width:520px}
.bstats a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 18px 10px 10px;border-radius:var(--pill);background:var(--surface);color:var(--ink);text-decoration:none;transition:background-color .2s ease}
.bstats b{justify-self:end;font-size:var(--step-lead__f);font-variant-numeric:tabular-nums}
.bstats svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.bstats a:hover{background:var(--snow)}}
.btl-grid{list-style:none;margin:clamp(32px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.btl{display:block;color:inherit;text-decoration:none}
.btl-img{display:block;overflow:hidden;border-radius:var(--r)}
.btl-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:scale .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btl:hover .btl-img img{scale:1.03}}
.btl-n{display:block;margin-top:16px;font-size:clamp(2rem,calc(3.4vw / var(--zv,1)),3.25rem);line-height:.9}
.btl-c{display:block;margin-top:8px;font-size:var(--step-lead__f);color:var(--muted)}
@media (max-width:899px){.btl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.btl-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.btl-img img{transition:none}}
.bnext{margin-top:clamp(40px,6vw,72px);max-width:760px;padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--surface)}
.bnext h2{margin:6px 0 12px;font-size:var(--step-lead__f);font-weight:600}
.bnext p:not(.bk){margin:0 0 16px;max-width:52ch}
@media (max-width:899px){.bfeat{grid-template-columns:1fr}.bfeat-img img{aspect-ratio:4/3}}
.mc-img .vc{left:auto;right:12px}
.mc-img img{height:100%}
/* Kopfzeile bis 959 px: Instagram nur als Symbol, damit Logo und drei Reiter in eine Zeile passen */
@media (max-width:959px){
  .top:not(.open) .in{flex-wrap:nowrap}
  .nav .ig span{display:none}
  .nav .ig{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
}

/* ---------- Kriterien: Ski-Animationen ---------- */
.kr{padding-bottom:var(--section)}
.kr-lead{max-width:46ch}
.kr-act{padding-top:clamp(56px,8vw,112px)}
.kr-head{margin-bottom:clamp(8px,2vw,24px)}
.kr-verb{margin:0;font-size:var(--step-head__f)}
.kr-sub{margin:12px 0 0;font-size:var(--step-lead__f);color:var(--muted)}
.scene{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(28px,4vw,56px)}
.scene:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.scene:nth-of-type(even) .sc-s{order:-1}
.sc-t h3{margin:0 0 6px;font-size:var(--step-lead__f);font-weight:600;color:var(--accent)}
.sc-q{margin:0 0 20px;font-size:clamp(1.9rem,1.2rem + calc(2.6vw / var(--zv,1)),3.25rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.95}
.sc-t p:not(.sc-q){margin:0 0 14px;max-width:46ch}
.sc-t .sc-n{font-size:var(--step-small);color:var(--muted)}
.sc-s{position:relative;margin:0;padding:clamp(16px,3vw,32px);border-radius:var(--r);background:var(--mist)}
.st{position:relative}
.st svg{display:block;width:100%;height:auto;max-width:none;overflow:visible}
.st .lb{position:absolute;display:block;font-size:var(--step-small);line-height:1.25;white-space:nowrap}
.st .lb b{display:block;font-size:clamp(1.125rem,calc(2.2vw / var(--zv,1)),1.625rem);font-weight:700;font-variant-numeric:tabular-nums}
.st .lb small{display:block;color:var(--muted)}
.st .lb em{display:block;font-style:normal;color:var(--muted)}
.st-n{margin:16px 0 0;font-size:var(--step-small);color:var(--muted)}
.tog{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tog button{min-height:44px;padding:0 16px;border-radius:var(--pill);background:#fff;color:var(--ink);font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.tog button.on{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.tog button:not(.on):hover{background:var(--snow)}}
.tog button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Maße */
.st-a .fill{fill:#fff}
.st-a .line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.st-a .mz line{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.st-a .lb{translate:-50% 0;text-align:center}
.st-a .lb-tip,.st-a .lb-tail{top:0}
.st-a .lb-waist{bottom:0}
/* Profil */
.st-b .floor{stroke:var(--snow);stroke-width:3}
.st-b .pski{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.st-b .gl{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.st-b .ct{fill:var(--accent)}
.st-b .lb-tailr{left:4%;top:34%;color:var(--accent);font-weight:600}
.st-b .lb-tipr{right:3%;top:22%;color:var(--accent);font-weight:600}
.st-b .lb-cam{left:50%;top:84%;translate:-50% 0;text-align:center}
.st-b .lb-cam b{display:inline;font-size:inherit}
/* Bauweise */
.st-c .lb-ly{left:76%;translate:0 -50%}
.st-c .lb-ly b{font-size:var(--step-body__f);font-weight:600}
/* Gewicht */
.scl{position:relative;height:clamp(140px,22vw,200px)}
.plate{position:absolute;left:6%;right:6%;bottom:0;height:34px;border-radius:17px;background:var(--ink);transform-origin:50% 100%}
.lcd{position:absolute;left:50%;bottom:6px;z-index:2;translate:-50% 0;display:flex;align-items:baseline;gap:6px;padding:2px 16px;border-radius:10px;background:#16241B;color:#B7F2C5;font-size:clamp(1.25rem,calc(2.6vw / var(--zv,1)),1.75rem);font-weight:600;font-variant-numeric:tabular-nums}
.lcd span{font-size:.7em}
.onscale{position:absolute;left:10%;width:80%;height:auto;bottom:34px;mix-blend-mode:multiply}
.rng{margin-top:20px}
.rg{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:10px;font-size:var(--step-small)}
.rbar{position:relative;display:block;height:14px;border-radius:7px;background:#fff}
.rbar i{position:absolute;top:0;bottom:0;border-radius:7px;background:var(--accent);transform-origin:0 50%}
.rg.old .rbar i{background:var(--snow)}
.rv{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Längen */
.lad{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ld{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:12px;align-items:center;font-variant-numeric:tabular-nums}
.lbar{display:block;height:14px}
.lbar i{display:block;width:var(--w);height:100%;border-radius:7px;background:var(--ink)}
.ld-new .lbar i{background:var(--accent)}
.ld-gone .lbar i{background:transparent;box-shadow:inset 0 0 0 2px var(--muted);background-image:repeating-linear-gradient(90deg,transparent 0 6px,var(--mist) 6px 10px)} /* taste-skill-ignore: gestrichelte Länge, die entfällt */
.ld-gone .ln{text-decoration:line-through;color:var(--muted)}
.ld-new .lt{color:var(--accent);font-weight:600}
.lt{font-size:var(--step-small);color:var(--muted)}
/* Ergebnis */
.st-f svg{margin-top:20px}
.st-f .old path{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-dasharray:9 7}
.st-f .neu path{fill:var(--ink);fill-opacity:.92}
.st-f g{transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s var(--ease-out),opacity .5s ease}
.st-f[data-case="new"] .neu{transform:scaleY(1.22)}
.st-f[data-case="fresh"] .old{opacity:0}
.st-f .lb-old{left:0;top:0;color:var(--muted)}
.st-f .lb-neu{left:0;top:26px;font-weight:600}
.vres{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0 0}
.vres .vc{min-height:40px;padding:0 18px;font-size:var(--step-body__f)}
.vres .vt{max-width:46ch}
.kr-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(48px,7vw,96px)}
.kr-end .mnote{margin:0;max-width:46ch;color:var(--muted)}
@media (max-width:899px){
  .scene,.scene:nth-of-type(even){grid-template-columns:1fr}
  .scene:nth-of-type(even) .sc-s{order:0}
  .st-a .lb b{font-size:1.0625rem}
  .st-c .lb-ly{left:74%}
}
/* Bewegung: nur mit Skript; ohne Skript steht jedes Bild im Endzustand */
.js .scene.armed .st-a .line{stroke-dasharray:var(--len);transition:stroke-dashoffset 1.8s var(--ease-in-out)}
.js .scene.armed:not(.play) .st-a .line{stroke-dashoffset:var(--len)}
.js .scene.armed .st-a .fill{transition:opacity .8s ease 1.4s}
.js .scene.armed:not(.play) .st-a .fill{opacity:0}
.js .scene.armed .st-a .mz{transform-box:fill-box;transform-origin:50% 50%;transition:transform .5s var(--ease-out) calc(1.5s + var(--q)*.45s),opacity .4s ease calc(1.5s + var(--q)*.45s)}
.js .scene.armed:not(.play) .st-a .mz{transform:scaleY(0);opacity:0}
.js .scene.armed .st-a .lb{transition:opacity .5s ease calc(1.7s + var(--q)*.45s),translate .5s var(--ease-out) calc(1.7s + var(--q)*.45s)}
.js .scene.armed:not(.play) .st-a .lb{opacity:0;translate:-50% 8px}
.js .scene.armed .st-b .lb,.js .scene.armed .st-b .gauge,.js .scene.armed .st-b .ct{transition:opacity .6s ease .9s}
.js .scene.armed:not(.play) .st-b .lb,.js .scene.armed:not(.play) .st-b .gauge,.js .scene.armed:not(.play) .st-b .ct{opacity:0}
.js .scene.armed .st-c .ly{transition:transform 1.3s var(--ease-expo) calc(.25s + var(--q)*.06s);transform:translateY(var(--y))}
.js .scene.armed:not(.play) .st-c .ly{transform:translateY(var(--y0))}
.js .scene.armed .st-c .lb-ly{transition:opacity .6s ease calc(1.1s + var(--q)*.1s)}
.js .scene.armed:not(.play) .st-c .lb-ly{opacity:0}
.js .scene.armed .onscale{transition:translate .7s cubic-bezier(.3,1.5,.5,1) .1s}
.js .scene.armed:not(.play) .onscale{translate:0 -90px}
.js .scene.armed .plate{transition:transform .25s ease .6s}
.js .scene.armed:not(.play) .plate{transform:none}
.js .scene.armed.play .plate{animation:plate-dip .5s ease .55s}
@keyframes plate-dip{40%{transform:scaleY(.82)}}
.js .scene.armed .rbar i{transition:transform .9s var(--ease-out) .9s}
.js .scene.armed:not(.play) .rbar i{transform:scaleX(0)}
.js .scene.armed .ld{transition:opacity .45s ease calc(.15s + var(--q)*.09s),translate .6s var(--ease-out) calc(.15s + var(--q)*.09s)}
.js .scene.armed:not(.play) .ld{opacity:0;translate:-18px 0}
@media (prefers-reduced-motion:reduce){
  .js .scene.armed *{transition:none!important;animation:none!important}
}
.st-b .sv,.st-c .sv{position:relative}
.st-f .old path{stroke:var(--accent);stroke-width:3}
.st-f .lb-old{color:var(--accent);font-weight:600}
.kr-lead{margin-top:clamp(16px,3vw,32px)}
.st-a{display:flex;align-items:center;min-height:clamp(210px,40vw,300px)}
.st-a svg{flex:none}
.st .lb small,.st .lb em{font-size:var(--step-small)}
.st-c .lb-ly{white-space:normal;max-width:30%}
.cat-sub{max-width:44ch}
.cat-count{margin:12px 0 0;font-size:var(--step-body__f);color:var(--muted)}
.cat-count b{color:var(--ink);font-weight:700}
.gall{margin-top:12px}
.js .mc{animation:mc-in .6s var(--ease-out) both;animation-delay:calc(var(--k,0)*45ms)}
@keyframes mc-in{from{opacity:0;translate:0 16px}}
@media (prefers-reduced-motion:reduce){.js .mc{animation:none}}
.brands-sub{margin:16px 0 0;max-width:46ch}
.bstats a{grid-template-columns:48px auto 1fr auto;padding:8px 18px 8px 8px}
.bth{position:relative;display:block;width:48px;height:48px;overflow:hidden;border-radius:14px;background:var(--mist)}
.bth img{position:absolute;left:50%;top:50%;height:128%;width:auto;max-width:none;translate:-50% -50%;rotate:28deg;mix-blend-mode:multiply}
.bstats li{animation:mc-in .6s var(--ease-out) both;animation-delay:calc(.2s + var(--q)*90ms)}
@media (prefers-reduced-motion:reduce){.bstats li{animation:none}}
.bareas{list-style:none;margin:28px 0 36px;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.bareas a{text-decoration:none}

/* ---------- Kriterien in 3D: ein Ski in fester Bühne, die Haltung wechselt mit dem Text ---------- */
.kr3[hidden]{display:none}
.k3 .kr2{display:none}
.k3-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start;padding-top:clamp(8px,2vw,24px)}
.k3-step{display:flex;flex-direction:column;justify-content:center;min-height:92vh;padding-block:7vh}
.k3-step h3{margin:0 0 6px;font-size:var(--step-lead__f);font-weight:600;color:var(--accent)}
.k3-step .sc-q{margin:0 0 20px;font-size:clamp(1.9rem,1.2rem + calc(2.6vw / var(--zv,1)),3.25rem);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.95}
.k3-step p:not(.sc-q):not(.kr-sub){margin:0 0 14px;max-width:46ch}
.k3-step .sc-n{font-size:var(--step-small);color:var(--muted)}
.k3-verb{margin:0 0 6px;font-size:var(--step-head__f)}
.k3-step .kr-sub{margin:0 0 clamp(28px,5vw,56px)}
.k3-stage{position:sticky;top:3vh;display:flex;align-items:center;height:94vh}
.k3-box{position:relative;width:100%;height:min(72vh,640px);border-radius:var(--r);background:var(--mist);overflow:hidden}
.k3-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.k3-ov{position:absolute;inset:0;pointer-events:none}
.ov{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.k3-stage[data-step="masse"] .ov-masse,.k3-stage[data-step="profil"] .ov-profil,.k3-stage[data-step="bau"] .ov-bau,.k3-stage[data-step="gewicht"] .ov-gewicht,.k3-stage[data-step="laengen"] .ov-laengen,.k3-stage[data-step="urteil"] .ov-urteil{opacity:1}
.dm .dl{position:absolute;left:var(--x,0);top:calc(var(--y1,0px) - 10px);width:2px;height:calc(var(--y2,0px) - var(--y1,0px) + 20px);margin-left:-1px;background:var(--accent);transform:scaleY(0);transition:transform .6s var(--ease-out)}
.dm .dl::before,.dm .dl::after{content:"";position:absolute;left:-6px;width:14px;height:2px;background:var(--accent)}
.dm .dl::before{top:0}
.dm .dl::after{bottom:0}
.k3-stage[data-step="masse"] .dm .dl{transform:scaleY(1);transition-delay:.35s}
.k3-stage[data-step="masse"] .dm-waist .dl{transition-delay:.6s}
.k3-stage[data-step="masse"] .dm-tail .dl{transition-delay:.85s}
.dm .dt{position:absolute;left:var(--x,0);translate:-50% 0;text-align:center;white-space:nowrap;font-size:var(--step-small);line-height:1.25}
.dm-tip .dt,.dm-tail .dt{top:calc(var(--y1,0px) - 84px)}
.dm-waist .dt{top:calc(var(--y2,0px) + 22px)}
.dm .dt b{display:block;font-size:clamp(1.125rem,calc(2.2vw / var(--zv,1)),1.625rem);font-weight:700;font-variant-numeric:tabular-nums}
.dm .dt small{display:block;color:var(--muted)}
.dm .dt em{display:block;font-style:normal;color:var(--muted)}
.ov-profil .fl{position:absolute;left:4%;right:4%;top:var(--y,50%);height:2px;background:var(--snow)}
.ov-profil .gl{position:absolute;left:var(--x,50%);top:var(--y1,0px);height:calc(var(--y2,0px) - var(--y1,0px));width:3px;margin-left:-1.5px;background:var(--accent);border-radius:2px}
.ov-profil .gt{position:absolute;left:var(--x,50%);top:calc(var(--y2,0px) + 14px);translate:-50% 0;white-space:nowrap;font-size:var(--step-small)}
.ov-profil .gt b{font-weight:700}
.rk{position:absolute;left:var(--x,0);top:var(--y,0);translate:-50% 0;color:var(--accent);font-weight:600;font-size:var(--step-small)}
.ov-bau .ll{position:absolute;left:var(--x,0);top:var(--y,0);translate:0 -50%;white-space:nowrap;font-size:var(--step-small);line-height:1.2}
.ov-bau .ll b{display:block;font-size:var(--step-body__f);font-weight:600}
.ov-bau .ll small{display:block;color:var(--muted)}
.lcd3{position:absolute;left:var(--x,50%);top:var(--y,60%);translate:-50% 0;display:flex;align-items:baseline;gap:6px;padding:4px 18px;border-radius:12px;background:#16241B;color:#B7F2C5;font-size:clamp(1.5rem,calc(3vw / var(--zv,1)),2.25rem);font-weight:600;font-variant-numeric:tabular-nums}
.lcd3 span{font-size:.65em}
.rl,.ov-urteil .pl{position:absolute;left:var(--x,0);top:var(--y,0);translate:-50% 0;text-align:center;font-size:var(--step-small);line-height:1.2;white-space:nowrap}
.rl b{display:block;font-size:var(--step-body__f);font-weight:600;font-variant-numeric:tabular-nums}
.rl em{font-style:normal;color:var(--muted)}
.rl-new b,.rl-new em{color:var(--accent)}
.rl-gone b{color:var(--muted);text-decoration:line-through}
.ov-urteil .pl{font-weight:600}
.ov-urteil .pl-old{color:var(--muted)}
.k3-ctls{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.k3-ctls [data-for]{display:none}
.k3-stage[data-step="profil"] .tg[data-for="profil"],.k3-stage[data-step="gewicht"] .tg[data-for="gewicht"],.k3-stage[data-step="urteil"] .tg[data-for="urteil"]{display:flex}
.k3-stage[data-step="urteil"] .vres[data-for="urteil"]{display:flex}
.tg{flex-wrap:wrap;gap:8px}
.tg button{min-height:44px;padding:0 16px;border-radius:var(--pill);background:#fff;color:var(--ink);font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.tg button.on{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.tg button:not(.on):hover{background:var(--snow)}}
.tg button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.k3-ctls .vres{margin:0}
@media (max-width:899px){
  .k3-grid{grid-template-columns:1fr;gap:0}
  .k3-stage{order:-1;top:0;z-index:5;height:48vh;margin-inline:calc(var(--margin) * -1)}
  .k3-box{height:100%;border-radius:0 0 var(--r) var(--r)}
  .k3-step{min-height:72vh;padding-block:5vh}
  .dm .dt b{font-size:1.0625rem}
  .k3-ctls{left:10px;right:10px;bottom:10px}
  .tg button{min-height:40px;padding:0 12px}
}
@media (prefers-reduced-motion:reduce){.ov,.dm .dl{transition:none}}
.ov-bau .ll{white-space:normal;max-width:calc(100% - var(--x,0px) - 12px)}
.vt-live{display:none}
@media (max-width:899px){
  .k3-ctls .vt{display:none}
  .vt-live{display:block;margin:0 0 14px;padding:12px 14px;border-radius:var(--r);background:var(--surface)}
  .tg button{font-size:.875rem;padding:0 10px}
  .ov-bau .ll small{display:none}
}
.ov-urteil .pl-old{translate:-100% 0;padding-right:10px;text-align:right}
.ov-urteil .pl-neu{translate:0 0;padding-left:10px;text-align:left}
.ov-urteil .pl{white-space:normal;max-width:110px}
@media (max-width:899px){.k3-ctls .vres{display:none!important}}

/* Messlinien enden genau auf den Skikanten, Wippe mit Bier */
.dm .dl{top:var(--y1,0px);height:calc(var(--y2,0px) - var(--y1,0px))}
.dm .dl::before{top:-1px}
.dm .dl::after{bottom:-1px}
.dm-tip .dt,.dm-tail .dt{top:calc(var(--y1,0px) - 74px)}
.dm-waist .dt{top:calc(var(--y2,0px) + 14px)}
.bl{position:absolute;left:var(--x,50%);top:var(--y,60%);translate:-50% 0;text-align:center;white-space:nowrap;font-size:var(--step-small);line-height:1.25}
.bl b{font-size:clamp(1.125rem,calc(2.2vw / var(--zv,1)),1.5rem);font-weight:700}
.bl small{display:block;color:var(--muted)}
.tg-bier button{background:var(--surface)}
.bl.none b{opacity:.4}
.lcd3{translate:-50% -50%}

/* ---------- Was ich baue: Schiene mit Fortschritt und Vorschau-Film des Finders ---------- */
.rail{position:relative;display:none;height:30px;margin:36px 0 12px}
@media (min-width:860px){.rail{display:block}}
.rail::before{content:"";position:absolute;left:16.66%;right:16.66%;top:14px;height:2px;border-radius:1px;background:var(--snow)}
.rail-fill{position:absolute;left:16.66%;top:14px;height:2px;width:0;border-radius:1px;background:var(--accent);transition:width 1.5s var(--ease-out) .4s}
.rail.is-in .rail-fill{width:33.34%}
.rn{position:absolute;top:6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--snow);opacity:0;transform:scale(.6);transition:transform .5s var(--ease-expo),opacity .4s ease,background-color .4s ease}
.rn1{left:16.66%}.rn2{left:50%}.rn3{left:83.34%}
.rail.is-in .rn{opacity:1;transform:scale(1)}
.rail.is-in .rn1{background:var(--accent);transition-delay:.2s}
.rail.is-in .rn2{background:#fff;box-shadow:inset 0 0 0 4px var(--accent);transition-delay:1.5s} /* taste-skill-ignore: Knoten "in Arbeit" als Ring */
.rail.is-in .rn3{transition-delay:1.9s}
.rail.is-in .rn2::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--accent);opacity:.18;animation:rn-pulse 2.2s ease-in-out 2s infinite}
@keyframes rn-pulse{50%{transform:scale(1.5);opacity:0}}
.steps.rm .step{transition:translate .35s var(--ease-out),background-color .3s ease}
@media (hover:hover) and (pointer:fine){.steps.rm .step:hover{translate:0 -6px}.steps.rm .step:not(.on):hover{background:var(--snow)}}
.steps.rm .step.later .link{color:var(--accent);margin-top:auto;padding-top:14px}
@media (prefers-reduced-motion:reduce){
  .rail-fill,.rn{transition:none!important}
  .rail.is-in .rn2::after{animation:none}
}

/* Balkenwaage */
.ov-gewicht{pointer-events:none}
.ov-gewicht.gs-on .bsc,.ov-gewicht.gs-on .ok-chip{display:none}
.k3-stage:has(.gs-on) .tg[data-for="gewicht"]{display:none!important}
.gs{position:absolute;inset:clamp(16px,3vw,40px) clamp(16px,3vw,40px) clamp(16px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.gs-h{margin:0 0 clamp(14px,2vw,24px);font-size:var(--step-body__f);line-height:1.3}
.gs-h b{color:var(--accent);font-weight:600}
.gs-rows{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3px,.5vw,6px)}
.gs-r{display:grid;grid-template-columns:minmax(78px,26%) minmax(0,1fr);align-items:center;gap:12px;min-height:var(--rh,26px)}
.gs-n{font-size:var(--step-body__f);line-height:1.1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-b{position:relative;height:12px}
.gs-b i{position:absolute;left:var(--a);width:var(--w);top:0;bottom:0;border-radius:99px;background:var(--snow);transform-origin:0 50%}
.gs-r.sel .gs-n{color:var(--ink);font-weight:600}
.gs-r.sel .gs-b{height:18px}
.gs-r.sel .gs-b i{background:var(--accent)}
.gs-v{position:absolute;top:calc(100% + 6px);left:var(--a);font-style:normal;font-weight:600;font-size:var(--step-body__f);white-space:nowrap;color:var(--accent)}
.gs-v.left{left:auto;right:calc(100% - var(--a) - var(--w))}
.gs-r.sel{margin-bottom:clamp(20px,3.2vh,28px)}
.gs-ax{position:relative;height:22px;margin:12px 0 0 calc(26% + 12px);font-size:13px;color:var(--muted)}
.gs-ax span{position:absolute;top:0;translate:-50% 0}
.gs-ax small{position:absolute;right:calc(100% + 30px);top:0;font-size:13px;white-space:nowrap}
@keyframes gs-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes gs-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gs-fade{from{opacity:0}to{opacity:1}}
.k3-stage[data-step="gewicht"] .gs-r{animation:gs-in .5s var(--ease-out) both;animation-delay:calc(.15s + var(--q) * 40ms)}
.k3-stage[data-step="gewicht"] .gs-b i{animation:gs-bar .7s var(--ease-expo) both;animation-delay:calc(.2s + var(--q) * 40ms)}
.k3-stage[data-step="gewicht"] .gs-r.sel .gs-b i{animation-delay:calc(.2s + var(--q) * 40ms + .5s)}
.k3-stage[data-step="gewicht"] .gs-v{animation:gs-fade .5s ease 1.5s both}
@media (prefers-reduced-motion:reduce){.k3-stage[data-step="gewicht"] .gs-r,.k3-stage[data-step="gewicht"] .gs-b i,.k3-stage[data-step="gewicht"] .gs-v{animation:none}}
@media (max-width:899px){.gs-r{grid-template-columns:minmax(84px,32%) minmax(0,1fr);gap:8px}.gs-n{font-size:var(--step-small)}.gs-ax{margin-left:calc(32% + 8px)}.gs-ax small{right:calc(100% + 24px)}}
.gv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--mist)}
.ov-gewicht.gv-on .bsc,.ov-gewicht.gv-on .ok-chip{display:none}
.k3-stage:has(.gv-on) .tg[data-for="gewicht"]{display:none!important}
.ov-gewicht.gv-on:has(.gv[controls]){pointer-events:auto}
.bsc{position:absolute;inset:0;width:100%;height:calc(100% - 96px)}
.b-base,.b-post,.b-pv{fill:var(--ink)}
.b-pv2{fill:var(--accent)}
.b-beam rect{fill:var(--ink)}
.b-beam circle{fill:var(--accent)}
.b-ind{fill:var(--snow);transition:fill .3s ease}
.bsc.level .b-ind{fill:var(--accent)}
.b-str{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.b-pan{fill:var(--ink)}
.b-lcd rect{fill:#16241B}
.b-lcd text{fill:#B7F2C5;font-weight:600;font-variant-numeric:tabular-nums}
.b-lcd .n{font-size:46px}
.b-lcd .u{font-size:28px}
.b-lab .t1{fill:var(--ink);font-size:40px;font-weight:700}
.b-lab .t1 .bt2{font-size:28px;font-weight:500}
.b-lab .t2{fill:var(--muted);font-size:24px}
.ok-chip{position:absolute;left:50%;top:6%;translate:-50% 8px;padding:8px 18px;border-radius:var(--pill);background:var(--accent);color:#fff;font-weight:600;font-size:var(--step-body__f);opacity:0;transition:opacity .35s ease,translate .5s var(--ease-expo)}
.bsc.level ~ .ok-chip{opacity:1;translate:-50% 0}
@media (max-width:899px){.bsc{height:calc(100% - 62px)}.ok-chip{font-size:.875rem;padding:6px 14px}}
.b-ski image{mix-blend-mode:multiply}

/* ---------- Prelaunch-Film (Finder): Keynote-Stil, Spuren in film.js ---------- */
.finder{margin-top:clamp(56px,8vw,112px);display:grid;gap:clamp(20px,2.4vw,32px)}
.fd-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px clamp(24px,5vw,72px);align-items:end}
.fd-k{grid-column:1/-1;margin:0;font-size:var(--step-lead__f);font-weight:600;color:var(--accent)}
.fd-h{margin:0;font-size:clamp(2.5rem,1.2rem + calc(4.4vw / var(--zv,1)),5.5rem)}
.fd-lead{margin:0;max-width:46ch}
.film{display:grid;gap:16px}
.fs{position:relative;container-type:inline-size;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;--acd:#5B86FF}
.fs-in{position:absolute;inset:0;pointer-events:none}
.fs-in>*,.g7>*{position:absolute}
.fs:not(.go) .fs-in{display:none}
.fs.go .poster{display:none}
.poster{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2cqw;text-align:center}
.poster b{display:flex;align-items:flex-end;font-size:calc(26cqw / var(--zc,1));line-height:.8}
.poster i{width:4.2cqw;aspect-ratio:1;border-radius:50%;background:var(--accent);margin:0 0 3cqw 1.4cqw}
.poster span{font-size:calc(2.6cqw / var(--zc,1));font-weight:600;color:rgba(255,255,255,.8)}
.tb{margin:0;font-size:var(--fz__f,calc(5cqw / var(--zc,1)));z-index:2}
.ln{display:block;overflow:hidden;padding:.16em 0 .06em;margin:-.16em 0 -.06em}
.li{display:block;will-change:transform}
.hud{left:3cqw;right:3cqw;top:2.4cqw;z-index:20;display:flex;justify-content:space-between;align-items:center;font-size:max(13px,calc(1.12cqw / var(--zc,1)));font-weight:600;letter-spacing:.03em}
.hud span{display:inline-flex;align-items:center;gap:.7cqw}
.hud-l{display:block;width:max(88px,11cqw);aspect-ratio:118/25;background:currentColor;-webkit-mask:url(/pairwise-wortmarke.svg) no-repeat left center/contain;mask:url(/pairwise-wortmarke.svg) no-repeat left center/contain}
.hud-m{position:absolute;left:50%;translate:-50% 0}
.hud .hud-r{display:none}
.slab{inset:0;clip-path:inset(0 0 0 100%)}
.sl-1{z-index:3;background:var(--mist)}
.sl-2{z-index:5;background:var(--ink);clip-path:inset(0 0 100% 0)}
.sl-3{z-index:7;background:var(--accent);clip-path:inset(100% 0 0 0)}
.sl-4{z-index:9;background:var(--mist);clip-path:inset(0 100% 0 0)}
.sl-5{z-index:11;background:var(--ink)}
/* Schläge: Blitz und Ankerpunkte für das Einschlagen von Zeilen */
.flash{inset:0;z-index:40;background:#fff;opacity:0}
.c-2b,.c-7c{transform-origin:0 60%}
.bald,.c-1b{transform-origin:50% 55%}
/* 0 Vorspann */
.c-0a{left:0;right:0;top:50%;translate:0 -50%;text-align:center;--fz:6.4cqw;--fz__f:calc(6.4cqw / var(--zc,1));z-index:30}
.c-0a .ln:nth-child(2){color:rgba(255,255,255,.5)}
/* 1 Die Frage */
.wall{inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:.6cqw;overflow:hidden}
.wr{display:flex;flex:none;gap:3.2cqw;width:max-content;font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.9;font-size:calc(7.2cqw / var(--zc,1));white-space:nowrap;opacity:.12;will-change:transform,opacity}
.c-1a,.c-1b{left:4cqw;right:4cqw;top:50%;translate:0 -50%;text-align:center;--fz:8.6cqw;--fz__f:calc(8.6cqw / var(--zc,1))}
.c-1b i{font-style:normal;color:var(--acd)}
/* 2 Die Antwort */
.c-2a{left:6cqw;top:10cqw;--fz:7.4cqw;--fz__f:calc(7.4cqw / var(--zc,1))}
.c-2b{left:6cqw;top:26cqw;--fz:11.4cqw;--fz__f:calc(11.4cqw / var(--zc,1));color:var(--acd)}
/* 3 Perfect Pair Finder */
.disc{z-index:4;left:0;top:0;width:46cqw;aspect-ratio:1;border-radius:50%;background:#DCE5FB}
.pr{z-index:4;left:0;top:0;width:9.6cqw;height:auto;aspect-ratio:225/1200;mix-blend-mode:multiply}
.pr-fx{position:absolute;width:0;height:0}
.pr img{position:absolute;inset:0;width:100%;height:100%}
.pr-g{filter:url(#pr-edge)}
.pr-r{clip-path:inset(0 0 100% 0)}
.pr-b{position:absolute;left:-55%;right:-55%;top:0;bottom:0;border-bottom:.38cqw solid var(--accent);opacity:0;transform:translateY(-100%)}
.pr-b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5cqw;background:rgba(31,79,224,.13)}
.c-3a{left:6cqw;top:8.5cqw;--fz:12.4cqw;--fz__f:calc(12.4cqw / var(--zc,1));color:var(--ink);z-index:4}
.c-3b{left:6cqw;top:46cqw;--fz:2.5cqw;--fz__f:calc(2.5cqw / var(--zc,1));color:var(--ink);font-weight:500;z-index:4}
/* 4 Fahrstil */
.c-4a{left:6cqw;top:11cqw;--fz:10.6cqw;--fz__f:calc(10.6cqw / var(--zc,1));z-index:6}
.c-4b{left:6cqw;top:36cqw;--fz:2.3cqw;--fz__f:calc(2.3cqw / var(--zc,1));max-width:34cqw;color:rgba(255,255,255,.72);font-weight:500;z-index:6}
.bars{left:50cqw;right:6cqw;top:54%;translate:0 -50%;z-index:6;margin:0;padding:0;list-style:none;display:grid;gap:5cqw}
.bars li{display:grid;grid-template-columns:1fr auto;gap:.9cqw 2cqw;align-items:baseline}
.fbn{font-size:max(14px,calc(2.6cqw / var(--zc,1)));font-weight:500}
.bv{min-width:3ch;text-align:right;font-size:max(14px,calc(2.6cqw / var(--zc,1)));font-weight:700;font-variant-numeric:tabular-nums;color:var(--acd)}
.fbt{grid-column:1/-1;height:1.6cqw;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.fbt i{display:block;height:100%;border-radius:99px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
/* 5 Du */
.c-5a{left:6cqw;top:8cqw;--fz:9cqw;--fz__f:calc(9cqw / var(--zc,1));z-index:8}
.c-5b{left:6cqw;top:19cqw;--fz:2.3cqw;--fz__f:calc(2.3cqw / var(--zc,1));font-weight:500;z-index:8}
.num{z-index:8;top:26cqw;width:40cqw}
.n1{left:6cqw}.n2{left:54cqw}
.nl{display:block;margin-bottom:.4cqw;font-size:max(13px,calc(1.8cqw / var(--zc,1)));font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.nn{display:flex;align-items:baseline;gap:1cqw;font-stretch:62%;font-weight:800;line-height:.86;text-transform:uppercase;font-size:calc(16.5cqw / var(--zc,1));font-variant-numeric:tabular-nums}
.nn small{font-size:calc(3.8cqw / var(--zc,1));font-stretch:100%;font-weight:700}
.ruler{position:relative;height:4.4cqw;margin-top:2cqw;overflow:hidden}
.ruler::after{content:"";position:absolute;left:50%;top:0;width:.5cqw;height:100%;margin-left:-.25cqw;border-radius:99px;background:#fff}
.rt{position:absolute;left:50%;top:0;height:100%}
.rt s{position:absolute;bottom:0;width:.18cqw;height:1.6cqw;margin-left:-.09cqw;background:rgba(255,255,255,.55);text-decoration:none}
.rt s.k5{height:2.6cqw;background:rgba(255,255,255,.8)}
.rt s.k10{height:3.6cqw;background:#fff}
.lvl{left:6cqw;right:6cqw;bottom:4cqw;z-index:8;height:5.4cqw;display:grid;grid-template-columns:repeat(3,1fr);border-radius:99px;background:rgba(255,255,255,.2)}
.lvl i{position:absolute;left:0;top:0;bottom:0;width:33.3333%;border-radius:99px;background:#fff}
.lvl span{position:relative;display:grid;place-items:center;font-size:max(13px,calc(1.9cqw / var(--zc,1)));font-weight:600}
/* 6 Dein Paar */
.c-6a{left:6cqw;top:8cqw;--fz:8cqw;--fz__f:calc(8cqw / var(--zc,1));color:var(--ink);z-index:10}
.c-6b{left:6cqw;top:20cqw;--fz:2.3cqw;--fz__f:calc(2.3cqw / var(--zc,1));max-width:28cqw;color:var(--ink);font-weight:500;z-index:10}
.lineup{left:42cqw;right:6cqw;top:7cqw;bottom:4.5cqw;z-index:10;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:2cqw}
.lu{display:grid;grid-template-rows:minmax(0,1fr) auto auto 3.2cqw;justify-items:center;align-items:center;gap:.6cqw;text-align:center;background:var(--mist);color:var(--ink)}
.lp{position:relative;align-self:stretch;justify-self:stretch;min-height:0}
.lp img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lu b{font-size:calc(2cqw / var(--zc,1));font-weight:700;line-height:1.15}
.lu small{font-size:max(13px,calc(1.45cqw / var(--zc,1)));line-height:1.2;color:var(--muted)}
.lc,.ls{align-self:start;margin-top:.4cqw;font-size:max(13px,calc(1.4cqw / var(--zc,1)));font-style:normal;font-weight:600}
.lc{padding:.7cqw 1.6cqw;border-radius:99px;background:var(--accent);color:#fff}
.ls{padding:.7cqw 0;color:var(--muted)}
/* 7 Vorjahres-Check */
.g7{inset:0;z-index:12}
.c-7a{left:6cqw;top:8cqw;--fz:8.6cqw;--fz__f:calc(8.6cqw / var(--zc,1))}
.c-7a .q{color:var(--acd)}
.fcrit{left:6cqw;top:26cqw;margin:0;padding:0;list-style:none;display:grid;gap:.6cqw}
.fcrit li{display:flex;align-items:center;gap:1.2cqw;font-size:max(13px,calc(1.9cqw / var(--zc,1)));font-weight:500}
.ck{display:grid;place-items:center;width:2.5cqw;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16);color:#fff}
.ck svg{width:62%}
.vch{left:6cqw;top:43.5cqw;display:flex;gap:1cqw}
.c-7c{left:6cqw;top:27cqw;--fz:16cqw;--fz__f:calc(16cqw / var(--zc,1));color:var(--acd)}
.vrs{left:6cqw;top:47.5cqw;margin:0;font-size:max(15px,calc(2.8cqw / var(--zc,1)));font-weight:600}
.vrs b{color:var(--acd)}
.vch span{padding:.7cqw 1.5cqw;border-radius:99px;background:rgba(255,255,255,.14);font-size:max(13px,calc(1.45cqw / var(--zc,1)));font-weight:600}
.fcmp{left:52cqw;top:6cqw;width:42cqw;height:44cqw;border-radius:2.4cqw;overflow:hidden;background:#fff;color:var(--ink)}
.cp{position:absolute;top:0;bottom:0;width:50%;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:3cqw 0 2cqw}
.cpi{position:relative;align-self:stretch;justify-self:stretch;min-height:0}
.cp-a{left:0}.cp-b{left:50%}
.cpi img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cpl{margin-top:1.4cqw;font-size:max(13px,calc(1.6cqw / var(--zc,1)));font-weight:600;color:var(--muted)}
.cp-b .cpl{color:var(--accent)}
.scn{position:absolute;left:0;top:0;bottom:0;width:.5cqw;background:var(--accent)}
.scf{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(31,79,224,.08);transform-origin:0 50%}
/* 8 Bald */
.bald{left:0;right:0;top:9cqw;z-index:12;display:flex;justify-content:center;align-items:flex-end;font-size:calc(30cqw / var(--zc,1));line-height:.86}
.bald .bdot{flex:none;width:4.6cqw;aspect-ratio:1;border-radius:50%;background:var(--accent);margin:0 0 3.4cqw 1.8cqw}
.c-8b{left:0;right:0;top:40cqw;--fz:5cqw;--fz__f:calc(5cqw / var(--zc,1));text-align:center;font-weight:700;z-index:12}
.c-8c{left:0;right:0;top:47.5cqw;margin:0;text-align:center;font-size:max(13px,calc(1.8cqw / var(--zc,1)));font-weight:500;color:rgba(255,255,255,.65);z-index:12}
/* Steuerung */
.fm-ctl{display:flex;align-items:center;gap:16px}
.fm-play{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.fm-play:active{transform:scale(.94)}
.fm-play svg{width:20px;height:20px;fill:currentColor}
.fm-play .p-play{display:none}
.fm-play[aria-pressed="true"] .p-play{display:block}
.fm-play[aria-pressed="true"] .p-pause{display:none}
@media (hover:hover) and (pointer:fine){.fm-play:hover{background:var(--accent)}}
.fm-ch{flex:1;min-width:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.fm-ch button{display:flex;align-items:center;width:100%;min-height:44px;padding:0;color:var(--muted);cursor:pointer}
.fm-ch i{display:block;width:100%;height:5px;border-radius:3px;background:var(--snow);overflow:hidden;transition:height var(--t-hover) ease}
.fm-ch i b{display:block;height:100%;border-radius:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.fm-ch span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fm-ch li.on i{height:7px}
@media (hover:hover) and (pointer:fine){.fm-ch button:hover i{height:7px}}
.fm-ch button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fm-tc{display:none;flex:none;margin-top:14px;font-size:var(--step-small);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.fd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fd-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;padding:20px;border-radius:var(--r);background:var(--surface)}
.fd-steps b{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;font-weight:700}
.fd-steps span{align-self:end;font-weight:600;line-height:1.2}
.fd-steps small{align-self:start;font-size:var(--step-small);line-height:1.35;color:var(--muted)}
.fd-n{margin:0;max-width:62ch;font-size:var(--step-small);color:var(--muted)}
@media (max-width:1019px){.fd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:859px){.fd-head{grid-template-columns:1fr}}
@media (max-width:859px){
  .fs{aspect-ratio:4/5}
  .hud{top:4.2cqw;left:5cqw;right:5cqw;font-size:max(13px,calc(3cqw / var(--zc,1)));gap:2cqw}
  .wr{font-size:calc(12.5cqw / var(--zc,1));gap:5cqw}
  .c-1a,.c-1b{left:6cqw;right:6cqw;--fz:13.6cqw;--fz__f:calc(13.6cqw / var(--zc,1))}
  .c-2a{top:11cqw;--fz:12cqw;--fz__f:calc(12cqw / var(--zc,1))}
  .c-2b{top:34cqw;--fz:19cqw;--fz__f:calc(19cqw / var(--zc,1))}
  .disc{width:66cqw}
  .pr{width:11cqw}
  .c-3a{left:6cqw;top:10cqw;--fz:17.5cqw;--fz__f:calc(17.5cqw / var(--zc,1))}
  .c-3b{left:6cqw;top:64cqw;--fz:4.6cqw;--fz__f:calc(4.6cqw / var(--zc,1));max-width:52cqw}
  .c-4a{top:10cqw;--fz:12cqw;--fz__f:calc(12cqw / var(--zc,1))}
  .c-4b{top:33cqw;--fz:4.4cqw;--fz__f:calc(4.4cqw / var(--zc,1));max-width:88cqw}
  .bars{left:6cqw;right:6cqw;top:46cqw;translate:0 0;gap:8cqw}
  .bars li{gap:1.2cqw 3cqw}
  .fbn,.bv{font-size:max(14px,calc(4.6cqw / var(--zc,1)))}
  .fbt{height:3cqw}
  .c-5a{top:11cqw;--fz:14cqw;--fz__f:calc(14cqw / var(--zc,1))}
  .c-5b{top:28cqw;--fz:4.6cqw;--fz__f:calc(4.6cqw / var(--zc,1))}
  .num{width:88cqw;top:39cqw}
  .n1{left:6cqw}.n2{left:6cqw;top:71cqw}
  .nl{font-size:max(13px,calc(3.4cqw / var(--zc,1)))}
  .nn{font-size:calc(15cqw / var(--zc,1))}
  .nn small{font-size:calc(5cqw / var(--zc,1))}
  .ruler{height:6cqw}
  .ruler::after{width:.9cqw;margin-left:-.45cqw}
  .rt s{width:.3cqw;margin-left:-.15cqw;height:2.4cqw}
  .rt s.k5{height:4cqw}
  .rt s.k10{height:5.4cqw}
  .lvl{bottom:6cqw;height:10cqw}
  .lvl span{font-size:max(13px,calc(3.6cqw / var(--zc,1)))}
  .c-6a{top:11cqw;--fz:14cqw;--fz__f:calc(14cqw / var(--zc,1))}
  .c-6b{top:28cqw;--fz:4.6cqw;--fz__f:calc(4.6cqw / var(--zc,1));max-width:88cqw}
  .lineup{left:5cqw;right:5cqw;top:42cqw;bottom:6cqw;gap:3cqw}
  .lu{grid-template-rows:minmax(0,1fr) auto auto 7cqw;gap:1.2cqw}
  .lu b{font-size:max(14px,calc(3.8cqw / var(--zc,1)))}
  .lu small{font-size:max(13px,calc(2.8cqw / var(--zc,1)))}
  .lc,.ls{font-size:max(13px,calc(2.8cqw / var(--zc,1)))}
  .lc{padding:1.2cqw 2.4cqw}
  .c-7a{top:10cqw;--fz:12cqw;--fz__f:calc(12cqw / var(--zc,1))}
  .fcmp{left:6cqw;width:88cqw;top:33cqw;height:42cqw;border-radius:5cqw}
  .cp{padding:4cqw 0 3cqw}
  .cpl{font-size:max(13px,calc(3.4cqw / var(--zc,1)))}
  .scn{width:1cqw}
  .c-7c{top:79cqw;--fz:21cqw;--fz__f:calc(21cqw / var(--zc,1))}
  .fcrit li{font-size:max(13px,calc(3.4cqw / var(--zc,1)));gap:1.6cqw}
  .ck{width:4.4cqw}
  .vch{top:96cqw;left:6cqw;right:6cqw;flex-wrap:wrap}
  .vch span{font-size:max(13px,calc(3cqw / var(--zc,1)))}
  .vrs{top:103cqw;font-size:max(15px,calc(4.8cqw / var(--zc,1)))}
  .bald{top:30cqw;font-size:calc(41cqw / var(--zc,1))}
  .bald .bdot{width:7cqw;margin:0 0 5cqw 2.4cqw}
  .c-8b{top:76cqw;--fz:10cqw;--fz__f:calc(10cqw / var(--zc,1))}
  .c-8c{top:92cqw;font-size:max(13px,calc(3.6cqw / var(--zc,1)))}
  .fm-ch span,.fm-tc{display:none}
}
@media (max-width:719px){.fd-steps{grid-template-columns:1fr}}

/* Video "Im Laden" im ersten Kapitel von Über mich */
.laden{margin:clamp(24px,3vw,36px) 0 0;border-radius:var(--r);overflow:hidden;background:var(--mist);aspect-ratio:8/5}
.laden-v{display:block;width:100%;height:100%;object-fit:cover}

/* Gewicht als Reihe: Rang, große Zahl, eine Reihe Felder von leicht nach schwer */
.gb{position:absolute;inset:clamp(16px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.6vw,18px)}
.gb p{margin:0}
.gb-h{font-size:var(--step-body__f);line-height:1.3}
.gb-h b{color:var(--accent);font-weight:600}
.gb-n{font-size:clamp(2.4rem,1.4rem + calc(4vw / var(--zv,1)),4.6rem);line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.gb-r{list-style:none;margin:clamp(10px,1.6vw,20px) 0 0;padding:0;display:flex;align-items:center;gap:clamp(4px,.8vw,8px);height:34px}
.gb-r li{flex:1;height:14px;border-radius:99px;background:var(--snow)}
.gb-r li.sel{height:34px;background:var(--accent)}
.gb-e{display:flex;justify-content:space-between;font-size:var(--step-small);color:var(--muted)}
.k3-stage[data-step="gewicht"] .gb-h,.k3-stage[data-step="gewicht"] .gb-n{animation:gs-fade .5s ease .1s both}
.k3-stage[data-step="gewicht"] .gb-r li{animation:gs-fade .4s ease both;animation-delay:calc(.3s + var(--q) * 50ms)}
.k3-stage[data-step="gewicht"] .gb-r li.sel{animation:gb-pop .5s var(--ease-expo) .7s both}
.k3-stage[data-step="gewicht"] .gb-e{animation:gs-fade .5s ease 1.1s both}
@keyframes gb-pop{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.k3-stage[data-step="gewicht"] .gb-h,.k3-stage[data-step="gewicht"] .gb-n,.k3-stage[data-step="gewicht"] .gb-r li,.k3-stage[data-step="gewicht"] .gb-e{animation:none}}
/* Antwort-Animation im letzten Kapitel von Über mich */
.ant-card{position:relative;overflow:hidden}
/* Die Ski-Bilder haben weißen Grund und werden mit multiply auf die Karte gelegt; in der bewegten Gruppe fehlt der Untergrund dafür, also bringt jede Gruppe ihren eigenen mit */
.ant-card figure{background:var(--mist)}
.ant-chk{list-style:none;margin:clamp(14px,2vw,22px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ant-chk li{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--pill);background:#fff;font-size:var(--step-small);white-space:nowrap}
.ant-chk i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff}
.ant-chk i svg{width:14px;height:14px}
.ant-chk b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ant-chk small{margin-left:auto;color:var(--muted);font-size:inherit}
.ant-img{position:relative;display:block}
.ant-b .ant-img{border-radius:12px;outline:0 solid var(--accent);outline-offset:9px}
.ant-chk li.chg{background:var(--accent);color:#fff}
.ant-chk li.chg i{background:#fff}
.ant-chk li.chg i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ant-chk li.chg small{color:#fff}
.ant-scan{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--accent);opacity:0;pointer-events:none}
.ant-re{margin-left:auto;min-height:40px;padding:0 16px;border:0;border-radius:var(--pill);background:var(--mist);color:var(--ink);font:inherit;font-size:var(--step-small);font-weight:400;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.ant.done .ant-re{opacity:1;pointer-events:auto}
.ant-re:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* nur mit Skript, und erst vor dem Start versteckt; ohne Skript und bei reduzierter Bewegung steht sofort alles da */
@media (prefers-reduced-motion:no-preference){
.ant.ready:not(.play) .ant-a,.ant.ready:not(.play) .ant-b,.ant.ready:not(.play) .ant-chk li,.ant.ready:not(.play) .regal-a{opacity:0}
.ant.play .ant-a{animation:ant-l .7s var(--ease-expo) both}
.ant.play .ant-b{animation:ant-r .7s var(--ease-expo) .15s both}
.ant.play .ant-scan{animation:ant-scan 1.7s linear .9s both}
.ant.play .ant-g{animation:ant-contour 2.7s linear .9s both}
.ant.ready .ant-brk{display:block}
.ant.play .ant-brk{animation:ant-lock .5s var(--ease-expo) .55s both}
.ant.ready:not(.play) .ant-brk{opacity:0}
.ant.play .ant-chk li{animation:ant-pop .45s var(--ease-expo) both;animation-delay:calc(1.0s + var(--k) * .3s)}
.ant.play .ant-chk li:not(.chg) i svg path{stroke-dasharray:20;animation:ant-draw .35s ease both;animation-delay:calc(1.15s + var(--k) * .3s)}
.ant.play .ant-b .ant-img{animation:ant-ring .6s var(--ease-expo) 3.4s both}
.ant.play .regal-a .vchip{animation:ant-chip .55s var(--ease-expo) 3.7s both}
.ant.play .regal-a{animation:gs-fade .5s ease 3.6s both}
}
@keyframes ant-l{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes ant-r{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes ant-scan{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
@keyframes ant-pop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ant-draw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes ant-ring{from{outline-width:0}to{outline-width:3px}}
@keyframes ant-chip{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@media (max-width:640px){.ant-chk{grid-template-columns:repeat(2,minmax(0,1fr))}}

.laden{position:relative}
.laden-ctl{display:none;position:absolute;right:12px;bottom:12px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);place-items:center;cursor:pointer}
.laden.has-ctl .laden-ctl{display:grid}
.laden-ctl svg{width:22px;height:22px;fill:currentColor}
.laden-ctl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.laden.is-playing .lc-play,.laden:not(.is-playing) .lc-pause{display:none}
.laden:not(.is-playing) .laden-ctl{right:50%;bottom:50%;width:72px;height:72px;margin:0 -36px -36px 0;background:var(--accent);color:#fff}
.laden:not(.is-playing) .laden-ctl svg{width:30px;height:30px}
.laden-v{cursor:pointer}

/* Tonknopf unter dem Film: aus, bis er gedrückt wird */
.fm-snd{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--snow);color:var(--ink);cursor:pointer;transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.fm-snd:active{transform:scale(.94)}
.fm-snd svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fm-snd .sn-sp{fill:currentColor;stroke:none}
.fm-snd[aria-pressed="true"]{background:var(--accent);color:#fff}
.fm-snd[aria-pressed="true"] .sn-off,.fm-snd[aria-pressed="false"] .sn-on{display:none}
.fm-snd:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.fm-snd[aria-pressed="false"]:hover{background:var(--ink);color:#fff}}
@media (prefers-reduced-motion:reduce){.fm-snd{display:none}}

/* Handy: Beschriftung von Ende und Schaufel rückt vom Bildschirmrand weg (Prüfung vor dem Livegang: 2 und 7 px Abstand) */
@media (max-width:899px){.dm-tail .dt{translate:-30% 0}.dm-tip .dt{translate:-72% 0}}

/* Scan im Vorjahres-Check: Klammern wie ein Sucher und die Kontur der Ski hinter dem Strahl */
.cpi{position:relative}
.cp-g{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:url(#cp-edge);mix-blend-mode:normal!important;pointer-events:none}
.brk{position:absolute;top:3.5%;bottom:15%;width:42%;pointer-events:none}
.brk-a{left:4%}.brk-b{left:54%}
.brk b{position:absolute;width:1.9cqw;height:1.9cqw;border:0 solid var(--accent)}
.brk b:nth-child(1){left:0;top:0;border-width:.32cqw 0 0 .32cqw;border-top-left-radius:.7cqw}
.brk b:nth-child(2){right:0;top:0;border-width:.32cqw .32cqw 0 0;border-top-right-radius:.7cqw}
.brk b:nth-child(3){left:0;bottom:0;border-width:0 0 .32cqw .32cqw;border-bottom-left-radius:.7cqw}
.brk b:nth-child(4){right:0;bottom:0;border-width:0 .32cqw .32cqw 0;border-bottom-right-radius:.7cqw}
@media (max-width:859px){.brk b{width:5cqw;height:5cqw;border-width:inherit}.brk b:nth-child(1){border-width:.8cqw 0 0 .8cqw}.brk b:nth-child(2){border-width:.8cqw .8cqw 0 0}.brk b:nth-child(3){border-width:0 0 .8cqw .8cqw}.brk b:nth-child(4){border-width:0 .8cqw .8cqw 0}}

/* Unter dem Film nur noch Pause und Ton; die Leiste mit den Abschnitten entfällt (Corbi: unnötig) */
.fm-ch{display:none}
.fm-ctl{justify-content:flex-start;gap:12px}
.fm-snd.pend{background:var(--snow);color:var(--ink)}

/* Ton im Laden-Video: Knopf unten links, nur mit Skript; grau, solange der Browser noch auf eine Berührung wartet */
.laden-snd{display:none;position:absolute;left:12px;bottom:12px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);place-items:center;cursor:pointer}
.laden.has-ctl .laden-snd{display:grid}
.laden-snd svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.laden-snd .sn-sp{fill:currentColor;stroke:none}
.laden-snd[aria-pressed="false"] .sn-on,.laden-snd[aria-pressed="true"] .sn-off{display:none}
.laden-snd.pend{color:var(--muted)}
.laden-snd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.laden-snd{display:none!important}}

/* Antwort-Scanner wie im Film: Klammern rasten ein, der Strahl zieht die Kontur der Ski nach, danach blenden Kontur und Klammern aus */
.ant-g{position:absolute;inset:0;width:100%;height:100%;filter:url(#cp-edge);mix-blend-mode:normal!important;opacity:0;pointer-events:none}
.ant-brk{display:none;position:absolute;inset:-8px -10px;pointer-events:none}
.ant-brk b{position:absolute;width:16px;height:16px;border:0 solid var(--accent)}
.ant-brk b:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-top-left-radius:6px}
.ant-brk b:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-top-right-radius:6px}
.ant-brk b:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px;border-bottom-left-radius:6px}
.ant-brk b:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0;border-bottom-right-radius:6px}
.ant-scan::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:56px;background:rgba(31,79,224,.1)}
@keyframes ant-contour{0%{opacity:.45;clip-path:inset(0 100% 0 0)}63%{opacity:.45;clip-path:inset(0 0 0 0)}74%{opacity:.35;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes ant-lock{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ant-g,.ant-brk{display:none}}

/* Dezenter (Corbi 26.10.2026: Scanner zu krass): dünnere Linien, hellere Bänder, Kontur nur als Hauch, kleinere Klammern, kein Rahmen um "Neu" */
.pr-b{border-bottom-width:.2cqw}
.pr-b::after{height:3.4cqw;background:rgba(31,79,224,.07)}
.pr-g{opacity:.55}
.scn{width:.26cqw}
.scf{background:rgba(31,79,224,.05)}
.cp-g{opacity:.4}
.brk b{width:1.2cqw;height:1.2cqw}
.brk b:nth-child(1){border-width:.16cqw 0 0 .16cqw}.brk b:nth-child(2){border-width:.16cqw .16cqw 0 0}.brk b:nth-child(3){border-width:0 0 .16cqw .16cqw}.brk b:nth-child(4){border-width:0 .16cqw .16cqw 0}
.ant-scan{width:2px}
.ant-scan::before{width:40px;background:rgba(31,79,224,.06)}
.ant-brk{inset:-6px -8px}
.ant-brk b{width:11px;height:11px;opacity:.7}
.ant-brk b:nth-child(1){border-width:2px 0 0 2px}.ant-brk b:nth-child(2){border-width:2px 2px 0 0}.ant-brk b:nth-child(3){border-width:0 0 2px 2px}.ant-brk b:nth-child(4){border-width:0 2px 2px 0}
.ant.play .ant-b .ant-img{animation:none}
@media (max-width:859px){.brk b{width:3.4cqw;height:3.4cqw}.brk b:nth-child(1){border-width:.45cqw 0 0 .45cqw}.brk b:nth-child(2){border-width:.45cqw .45cqw 0 0}.brk b:nth-child(3){border-width:0 0 .45cqw .45cqw}.brk b:nth-child(4){border-width:0 .45cqw .45cqw 0}}

/* Laden-Animation live: Canvas über dem Standbild; ohne Skript oder bei reduzierter Bewegung bleibt das Standbild */
.laden-poster{display:block;width:100%;height:100%;object-fit:cover}
.laden-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.laden.live .laden-poster{visibility:hidden}

/* Antwort-Scanner als Schneewisch (Canvas, pw-swap.js): Klammern, Kontur, Strahl und Rahmen sind entfallen */
.ant-cv{display:block;width:100%;height:clamp(84px,14vw,118px)}
.ant-a,.ant-b,.ant-scan,.ant-brk,.ant-g,.ant-img{display:none}

/* Schneewisch im Film: Canvas in der Vergleichskarte und Staub über der Bühne */
.fcv{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:859px){.fcmp{top:38cqw;height:23cqw}.c-7c{top:68cqw}.vrs{top:94cqw}}


@media (min-width:860px){.fcmp{left:62cqw;width:30cqw}}

/* Gewichtsschrift: Zahl so fett und breit, wie der Ski schwer ist (Archivo hat die Achsen Stärke und Breite) */
.gw{position:relative;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2.4cqw,22px);--fs:clamp(1.6rem,7.2cqw,3.8rem);--fs__f:clamp(1.6rem,calc(7.2cqw / var(--zc,1)),3.8rem)}
.gw.gw-dense{--fs:clamp(1.4rem,5.6cqw,3rem);--fs__f:clamp(1.4rem,calc(5.6cqw / var(--zc,1)),3rem)}
.ov-gewicht .gw{position:absolute;inset:clamp(16px,3vw,40px);container-type:size;--fs:min(clamp(1.6rem,7.2cqw,3.8rem),calc((100cqh - 112px) / (var(--n) * 1.55 + .2)));--fs__f:min(clamp(1.6rem,calc(7.2cqw / var(--zc,1)),3.8rem),calc((calc(100cqh / var(--zc,1)) - 112px) / (var(--n) * 1.55 + .2)))}
.ov-gewicht .gw.gw-dense{--fs:min(clamp(1.4rem,5.6cqw,3rem),calc((100cqh - 112px) / (var(--n) * 1.55 + .2)));--fs__f:min(clamp(1.4rem,calc(5.6cqw / var(--zc,1)),3rem),calc((calc(100cqh / var(--zc,1)) - 112px) / (var(--n) * 1.55 + .2)))}
.gw p{margin:0}
.gw-h{font-size:var(--step-body__f);line-height:1.3}
.gw-h b{color:var(--accent);font-weight:600}
.gw-rows{list-style:none;margin:0;padding:0}
.gw-r{display:grid;grid-template-columns:minmax(72px,24cqw) minmax(0,1fr);align-items:baseline;min-height:calc(var(--fs) * 1.55)}
.gw-n{font-size:clamp(.8rem,calc(2.1cqw / var(--zc,1)),1.05rem);font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-r.sel .gw-n{color:var(--accent)}
.gw-v{font-size:var(--fs__f);line-height:1.2;white-space:nowrap;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gw-r:not(.sel) .gw-v{opacity:.72}
.gw-r.sel .gw-v{color:var(--accent)}
.gw-lo{font-weight:var(--wl);font-stretch:var(--sl)}
.gw-hi{font-weight:var(--wh);font-stretch:var(--sh)}
.gw-u{font-size:.42em;font-weight:500;font-stretch:100%;letter-spacing:0}
.gw-k{font-size:var(--step-small);color:var(--muted)}
@keyframes gw-grow{from{font-weight:100;font-stretch:72%}}
.k3-stage[data-step="gewicht"] .gw-h{animation:gs-fade .5s ease .1s both}
.k3-stage[data-step="gewicht"] .gw-r{animation:gs-fade .4s ease both;animation-delay:calc(.2s + var(--q) * 160ms)}
.k3-stage[data-step="gewicht"] .gw-lo,.k3-stage[data-step="gewicht"] .gw-hi{animation:gw-grow 1.3s var(--ease-out) both;animation-delay:calc(.3s + var(--q) * 160ms)}
.k3-stage[data-step="gewicht"] .gw-k{animation:gs-fade .5s ease 1.4s both}
@media (prefers-reduced-motion:reduce){.k3-stage[data-step="gewicht"] .gw-h,.k3-stage[data-step="gewicht"] .gw-r,.k3-stage[data-step="gewicht"] .gw-lo,.k3-stage[data-step="gewicht"] .gw-hi,.k3-stage[data-step="gewicht"] .gw-k{animation:none}}