/* NO–DESIGNER · Website v4
   Bewegungsprinzip: Schärfe ziehen. Alles kommt beim Scrollen von unscharf zu scharf.
   Ohne JavaScript und bei reduzierter Bewegung gilt immer der fertige Zustand. */

/* ---------- Schriften ---------- */
@font-face{font-family:"Mg12";src:url(fonts/mg12-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mg12";src:url(fonts/mg12-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Mg12";src:url(fonts/mg12-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Mg12";src:url(fonts/mg12-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Grafier";src:url(fonts/pp-grafier-display.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --tiefe:#203659; --grund:#317162; --weite:#9994FF; --mint:#A5F9BD; --raum:#FFFFFF;
  --ink:#203659; --ink-2:rgba(32,54,89,.74); --ink-3:rgba(32,54,89,.42); --hair:rgba(32,54,89,.14);
  --tint:#F4F5F9; --bg:var(--raum);
  --verlauf:linear-gradient(90deg,var(--grund),var(--weite));
  /* Verläufe wie im Deck, immer zwei Markenfarben */
  --v-kapitel:linear-gradient(125deg,var(--grund) 20%,var(--weite) 120%);
  --v-hell:linear-gradient(135deg,var(--mint) 0%,var(--weite) 100%);
  --v-mint-grund:linear-gradient(180deg,var(--mint) 0%,var(--grund) 45%);
  --v-weite-tiefe:linear-gradient(180deg,var(--weite) 0%,var(--tiefe) 80%);
  --f-text:"Mg12",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-disp:"Grafier","Mg12",Georgia,serif;
  --gut:clamp(16px,5vw,64px); --max:1320px; --nav-h:72px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --fs-b:clamp(17px,.95rem + .25vw,19px);
  --fs-l:clamp(19px,1rem + .6vw,24px);
  --fs-h3:clamp(26px,1rem + 2vw,44px);
  --fs-h2:clamp(36px,1.1rem + 3.6vw,76px);
  --sec:clamp(96px,13vw,200px);
  --radius:clamp(14px,1.6vw,24px);
  color-scheme:light;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h);overflow-x:clip;background:var(--raum)}
body{margin:0;background:var(--raum);color:var(--ink);font:400 var(--fs-b)/1.6 var(--f-text);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern"}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em}
em{font-style:normal}
button{font:inherit;color:inherit}
::selection{background:var(--weite);color:#fff}
:focus-visible{outline:2px solid var(--weite);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.nobr,.hero__lead strong{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.on-dark{color:#fff;--ink-2:rgba(255,255,255,.8);--ink-3:rgba(255,255,255,.45);--hair:rgba(255,255,255,.18)}
section{position:relative}

.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--tiefe);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;transition:top .3s}
.skip:focus{top:16px}

/* ---------- Typo ---------- */
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:clamp(18px,2vw,28px);font-size:13px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--grund)}
.kicker::before{content:"";flex:none;width:24px;height:2px;background:var(--weite)}
.on-dark .kicker{color:var(--mint)}
h2{font-weight:500;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
h3{font-weight:500;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.lead{font-size:var(--fs-l);line-height:1.45;color:var(--ink-2)}
.label{margin-bottom:14px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grund)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:1px solid transparent;border-radius:999px;background:var(--tiefe);color:#fff;font-weight:500;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .35s,color .35s,border-color .35s,transform .5s var(--ease)}
.btn:hover{background:var(--grund)}
.btn:active{transform:scale(.97)}
.btn--mint{background:var(--mint);color:var(--tiefe)}
.btn--mint:hover{background:#fff}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:transparent;border-color:var(--weite);color:inherit}
.btn__arr{transition:transform .5s var(--ease)}
.btn:hover .btn__arr{transform:translateX(4px)}
.link{display:inline-flex;gap:10px;font-weight:500;font-size:18px;text-decoration:none;padding-bottom:4px;background:linear-gradient(var(--weite),var(--weite)) 0 100%/100% 2px no-repeat;transition:background-size .5s var(--ease)}
.link:hover{background-size:40% 2px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--tiefe);font:500 14px/1 var(--f-text);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .3s}
.pill:hover{background:#fff}
.pill[aria-pressed="true"]{background:var(--mint)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags li{padding:9px 14px;border-radius:999px;background:var(--tint);font-size:14px;line-height:1.2;color:var(--ink)}
.preview-flag{display:inline-block;margin-bottom:28px;padding:8px 14px;border:1px dashed var(--weite);border-radius:8px;background:rgba(153,148,255,.08);font-size:13px;font-weight:500;color:var(--tiefe)}

/* ---------- Fortschritt ---------- */
.progress{position:fixed;inset:0 0 auto;z-index:70;height:3px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--verlauf);transform-origin:0 50%;transform:scaleX(var(--s,0))}
html:not(.js) .progress{display:none}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;color:var(--ink);view-transition-name:nav;transition:background-color .45s,color .45s,box-shadow .45s}
.nav__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,40px);height:var(--nav-h)}
.nav.is-solid{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 rgba(32,54,89,.1)}
.nav.is-dark{color:#fff}
.nav.is-dark.is-solid{background:rgba(255,255,255,.1);-webkit-backdrop-filter:saturate(1.2) blur(18px);backdrop-filter:saturate(1.2) blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.16)}
.nav__logo{display:block;width:clamp(124px,13vw,170px);margin-right:auto;padding:8px 0}
.wm{width:100%;height:auto;overflow:visible}
.wm path{fill:currentColor}
.wm .wm__dash{fill:var(--weite);transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease)}
.lg{display:block;width:100%;height:auto;overflow:visible}
/* Navigationslogo: vier Haltungen des Zeichens, ab „Haltung“ die Bildmarke 1 O 1 */
.nav{--lg-ink:var(--grund);--lg-mark:var(--weite);--lg-bar2:var(--weite);--lg-g1:var(--grund);--lg-g2:var(--weite)}
.nav.is-dark,html.menu-open .nav{--lg-ink:#fff;--lg-bar2:#fff;--lg-g1:#fff;--lg-g2:#fff}
.lg-ink{fill:var(--lg-ink);transition:fill .45s}
.lg-mark{fill:var(--lg-mark)}
.lg-bar2{fill:var(--lg-bar2);transition:fill .45s}
.lg-s1{stop-color:var(--lg-g1);transition:stop-color .45s}
.lg-s2{stop-color:var(--lg-g2);transition:stop-color .45s}
.nav__menu ul{display:flex;gap:clamp(20px,2.6vw,40px)}
.nav__menu a{position:relative;display:block;padding:8px 0;font-size:15px;font-weight:500;text-decoration:none}
.nav__menu a::after{content:"";position:absolute;inset:auto 0 2px;height:2px;background:var(--weite);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav__menu a:hover::after,.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}
.btn--nav{min-height:42px;padding:9px 20px;font-size:15px}
.nav.is-dark .btn--nav{background:#fff;color:var(--tiefe)}
.nav.is-dark .btn--nav:hover{background:var(--mint)}
.nav__toggle{display:none}

@media (max-width:860px){
  :root{--nav-h:64px}
  .btn--nav{min-height:38px;padding:8px 14px;font-size:14px}
  .nav__toggle{position:relative;z-index:2;display:grid;place-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;cursor:pointer}
  .nav__toggle i{display:block;width:22px;height:2px;background:currentColor;transition:transform .45s var(--ease)}
  .nav__toggle[aria-expanded="true"] i:first-of-type{transform:translateY(4px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
  .nav__menu{position:fixed;inset:0;z-index:1;display:flex;align-items:center;padding:calc(var(--nav-h) + 24px) var(--gut) 40px;background:var(--v-kapitel);color:#fff;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
  .nav__menu ul{flex-direction:column;gap:8px}
  .nav__menu a{font-size:clamp(34px,10vw,48px);letter-spacing:-.02em;padding:4px 0}
  .nav__menu a::after{bottom:0}
  .nav__logo,.btn--nav{position:relative;z-index:2}
  html.menu-open{overflow:hidden}
  html.menu-open .nav,html.menu-open .nav.is-solid,html.menu-open .nav.is-dark.is-solid{color:#fff;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.menu-open .nav__menu{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
  html.menu-open .btn--nav{background:var(--mint);color:var(--tiefe)}
  html:not(.js) .nav__menu,html:not(.js) .nav__toggle{display:none}
}

/* ---------- Intro ---------- */
.intro{display:none}
html.intro-on .intro{position:fixed;inset:0;z-index:100;display:block;animation:introGone .4s linear 2.8s forwards}
.intro__half{position:absolute;inset-inline:0;height:50.2%;background:var(--raum)}
.intro__half--t{top:0;animation:halfUp 1s var(--ease-io) 1.95s forwards}
.intro__half--b{bottom:0;animation:halfDown 1s var(--ease-io) 1.95s forwards}
.intro__line{position:absolute;inset-inline:0;top:50%;height:3px;margin-top:-1.5px;background:var(--weite);transform:scaleX(0);animation:lineGrow .75s var(--ease) 1.3s forwards,fadeOut .5s linear 2.3s forwards}
.intro__mark{position:absolute;inset:0;display:grid;place-items:center;padding:var(--gut);color:var(--tiefe)}
.intro__mark .wm{width:min(78vw,760px)}
.intro .wm__no{animation:focusIn .9s var(--ease) .1s both,slideL .8s var(--ease-io) 1.25s forwards}
.intro .wm__designer{animation:focusIn .9s var(--ease) .25s both,slideR .8s var(--ease-io) 1.25s forwards}
.intro .wm__dash{animation:dashIn .55s var(--ease) .8s both,fadeOut .2s linear 1.35s forwards}
.intro__skip{position:absolute;right:var(--gut);bottom:var(--gut);z-index:2;min-height:44px;padding:10px 18px;border:1px solid var(--hair);border-radius:999px;background:var(--raum);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;animation:fadeOut .3s linear 1.9s forwards}
.intro__skip:hover{border-color:var(--weite)}
@keyframes introGone{to{opacity:0;visibility:hidden}}
@keyframes halfUp{to{transform:translateY(-101%)}}
@keyframes halfDown{to{transform:translateY(101%)}}
@keyframes lineGrow{to{transform:scaleX(1)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes focusIn{from{opacity:0;filter:blur(10px)}}
@keyframes slideL{to{transform:translateX(-26px);opacity:0;filter:blur(6px)}}
@keyframes slideR{to{transform:translateX(26px);opacity:0;filter:blur(6px)}}
@keyframes dashIn{from{transform:scaleX(0)}}

/* ---------- Szenen (sticky) ---------- */
/* .is-scene setzt das Script nur, wenn Bewegung erlaubt ist und der Bildschirm passt. */

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--weite) 0%,var(--grund) 100%)}
.hero__sticky{position:relative;height:100vh;height:100svh;min-height:580px;overflow:hidden}
.hero.is-scene{height:185vh;height:185svh}
.hero.is-scene .hero__sticky{position:sticky;top:0}
.hero__media{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(var(--p,0) * 8%) calc(var(--p,0) * 4%) round calc(var(--p,0) * 28px))}
.hero__video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - var(--p,0) * .06))}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(49,113,98,.9) 0%,rgba(49,113,98,.74) 38%,rgba(49,113,98,.4) 62%,rgba(49,113,98,.1) 84%,rgba(153,148,255,.18) 100%),linear-gradient(0deg,rgba(49,113,98,.62) 0%,rgba(49,113,98,0) 34%)}
@media (max-width:700px){.hero__media::after{background:linear-gradient(0deg,rgba(49,113,98,.94) 0%,rgba(49,113,98,.74) 46%,rgba(49,113,98,.2) 74%,rgba(153,148,255,.2) 100%)}}
.hero__content{position:absolute;inset:auto 0 clamp(76px,12vh,140px);transform:translateY(calc(var(--p,0) * -3vh));opacity:calc(1 - var(--p,0) * .35)}
.hero__title{margin:0 0 clamp(20px,3vh,36px) -.03em;font-family:var(--f-disp);font-weight:400;font-size:clamp(56px,min(11vw,20vh),200px);line-height:.9;letter-spacing:-.012em}
.hero__title span{display:block}
.hero__lead{max-width:38ch;font-size:var(--fs-l);line-height:1.45;color:rgba(255,255,255,.9)}
.hero__lead strong{font-weight:500;color:#fff}
.hero__caption{position:absolute;inset:auto 0 22px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:600px){.hero__caption{font-size:11px;letter-spacing:.08em}}
@media (prefers-reduced-motion:no-preference){
  html.js .hero__content>*{animation:heroIn 1.4s var(--ease) both;animation-delay:var(--hd,.1s)}
  html.js .hero__content>:nth-child(2){animation-delay:calc(var(--hd,.1s) + .12s)}
  html.js .hero__content>:nth-child(3){animation-delay:calc(var(--hd,.1s) + .26s)}
  html.intro-on{--hd:2.15s}
}
@keyframes heroIn{from{opacity:0;filter:blur(14px);transform:translateY(32px)}}

/* ---------- Haltung ---------- */
.haltung,.drei{background:var(--grund)}
.haltung__sticky,.drei__sticky{background:linear-gradient(calc(165deg - var(--p,1) * 40deg),var(--grund) calc(30% - var(--p,1) * 10%),var(--weite) 125%)}
.haltung__sticky{padding-block:var(--sec)}
.haltung.is-scene{height:190vh;height:190svh}
.haltung.is-scene .haltung__sticky,.drei.is-scene .drei__sticky{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;height:100vh;height:100svh;padding-block:var(--nav-h) 0}
.haltung__a{max-width:17ch;font-size:clamp(36px,1rem + 4.6vw,96px);line-height:1.04;letter-spacing:-.035em}
.haltung__line{display:block;width:min(240px,40vw);height:3px;margin-block:clamp(28px,6vh,64px);background:var(--weite);transform-origin:left;transform:scaleX(var(--l,1))}
.haltung__b{max-width:30ch;font-size:clamp(22px,1rem + 1.5vw,38px);line-height:1.25;letter-spacing:-.015em;color:rgba(255,255,255,.92);opacity:var(--b2,1);filter:blur(calc((1 - var(--b2,1)) * 10px));transform:translateY(calc((1 - var(--b2,1)) * 24px))}
.haltung__b em{color:var(--mint)}

/* ---------- Schritt-Szenen (Fokus) ---------- */
[data-steps] [data-step]{transition:none}
.is-scene[data-steps="focus"] [data-step]{opacity:var(--f,1);filter:blur(calc((1 - var(--f,1)) * 12px));transform:translateY(calc(var(--d,0) * -64px));pointer-events:none}
.is-scene[data-steps="focus"] [data-step].is-active{pointer-events:auto}

/* ---------- Für wen: alle vier Fragen auf einen Blick ---------- */
.fuerwen{padding-block:clamp(88px,10vw,150px)}
.fuerwen h2{font-size:clamp(34px,1rem + 2.6vw,62px)}
.fuerwen__head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,52px)}
.fuerwen__head .kicker{margin-bottom:4px}
@media (min-width:900px){.fuerwen__head{grid-template-columns:7fr 5fr;align-items:end;column-gap:clamp(48px,6vw,112px)}.fuerwen__head .kicker{grid-column:1/-1}}
.fuerwen__intro{font-size:var(--fs-l);line-height:1.45;color:var(--ink-2)}
.fuerwen__list{display:grid;column-gap:clamp(32px,4.4vw,72px)}
@media (min-width:760px){.fuerwen__list{grid-template-columns:1fr 1fr}}
.q{position:relative;padding-block:clamp(20px,2.2vw,28px) clamp(24px,2.6vw,36px);border-top:1px solid var(--hair)}
.q::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--weite)}
.q__who{margin-bottom:12px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grund)}
.q__ask{font-size:clamp(25px,1rem + 1.5vw,38px);line-height:1.1;letter-spacing:-.025em}
.q__ctx{max-width:38ch;margin-top:12px;line-height:1.5;color:var(--ink-2)}

/* ---------- Die drei A (Startseite): Stufen wie im Deck ---------- */
.treppe{padding-bottom:var(--sec)}
.treppe h2{max-width:22ch}
.stufen{display:grid;gap:12px;margin-top:clamp(36px,5vw,64px)}
@media (min-width:900px){.stufen{grid-template-columns:repeat(3,1fr);align-items:end;gap:clamp(10px,1.2vw,16px)}}
.stufe{--i:0;display:flex;clip-path:inset(calc((1 - clamp(0, var(--p,1) * 2.4 - var(--i) * .55, 1)) * 100%) 0 0 0 round var(--radius));transition:transform .6s var(--ease)}
.stufe--2{--i:1}
.stufe--3{--i:2}
@media (min-width:900px){.stufe--1{height:clamp(260px,35vh,350px)}.stufe--2{height:clamp(350px,47vh,470px)}.stufe--3{min-height:clamp(440px,60vh,600px)}}
.stufe:hover{transform:translateY(-6px)}
.stufe>a,.stufe__card{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px;padding:clamp(24px,2.6vw,40px);border-radius:var(--radius);color:var(--tiefe);text-decoration:none}
.stufe--1>a{background:var(--v-hell)}
.stufe--2>a{background:var(--v-mint-grund);color:#fff}
.stufe__card{background:linear-gradient(180deg,var(--weite) 0%,var(--tiefe) 45%);color:#fff}
.stufe__no{font-family:var(--f-disp);font-size:clamp(48px,4.6vw,76px);line-height:.85;color:var(--grund)}
.stufe--3 .stufe__no{color:#fff}
.stufe__name{margin-bottom:6px;font-size:clamp(24px,1rem + 1.1vw,34px)}
.stufe__txt{line-height:1.4;opacity:.92}
.stufe__go{display:inline-block;margin-top:14px;font-size:22px;line-height:1;transition:transform .5s var(--ease)}
.stufe>a:hover .stufe__go,.stufe__more:hover .stufe__go{transform:translateX(6px)}
/* Karte 03: drei Arbeiten als Beleg, jeweils mit Leitfrage */
.stufe__cases{display:grid;gap:12px}
.stufe__cases a{display:grid;grid-template-columns:clamp(88px,7.4vw,112px) 1fr;gap:14px;align-items:center;font-size:14px;line-height:1.35;color:#fff;text-decoration:none}
.stufe__cases img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:box-shadow .4s}
.stufe__cases a:hover img,.stufe__cases a:focus-visible img{box-shadow:0 0 0 2px var(--mint)}
.stufe__cases a:hover>span{text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:3px}
.stufe__more{color:#fff;text-decoration:none}

/* ---------- Arbeitsweise-Seite: Einstieg „Die drei A“ ---------- */
.dreia{display:flex;align-items:center;min-height:88vh;min-height:88svh;padding-block:calc(var(--nav-h) + clamp(40px,7vw,96px)) clamp(56px,8vw,112px);background:var(--v-hell)}
.dreia__tag{display:inline-block;margin-bottom:clamp(28px,4vw,48px);padding:10px 18px;border:2px solid var(--grund);font-size:clamp(13px,.4rem + .5vw,16px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grund)}
.dreia__t{counter-reset:a;font-family:var(--f-disp);font-weight:400;font-size:clamp(50px,10.5vw,168px);line-height:1;letter-spacing:-.01em}
.dreia__line{display:block;counter-increment:a}
.dreia__line::after{content:"0" counter(a);display:inline-block;margin-left:.35em;font-family:var(--f-text);font-size:.13em;font-weight:500;letter-spacing:.12em;vertical-align:super;color:var(--grund)}
.dreia__line a{text-decoration:none;background:linear-gradient(var(--weite),var(--weite)) 0 94%/0 .045em no-repeat;transition:background-size .7s var(--ease)}
.dreia__line a:hover,.dreia__line a:focus-visible{background-size:100% .045em}
.dreia__a{color:var(--grund)}
@media (prefers-reduced-motion:no-preference){
  html.js .dreia__tag,html.js .dreia__line{animation:heroIn 1.3s var(--ease) both}
  html.js .dreia__line:nth-child(1){animation-delay:.12s}
  html.js .dreia__line:nth-child(2){animation-delay:.24s}
  html.js .dreia__line:nth-child(3){animation-delay:.36s}
}

/* ---------- Arbeitsweise ---------- */
.weise__intro{padding-top:var(--sec)}
.weise__cols{display:grid;gap:20px;max-width:1080px;margin-top:clamp(24px,3vw,40px);font-size:var(--fs-l);line-height:1.5;color:var(--ink-2)}
@media (min-width:900px){.weise__cols{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}}
.weise__scene{padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,80px)}
.weise__sticky{display:grid;gap:clamp(40px,6vw,64px)}
@media (min-width:900px){.weise__sticky{grid-template-columns:1fr 1fr;align-items:center;column-gap:clamp(48px,6vw,120px)}}
.weise__scene.is-scene{height:360vh;height:360svh;padding:0}
.weise__scene.is-scene .weise__sticky{position:sticky;top:0;height:100vh;height:100svh;padding-top:var(--nav-h)}
.weise__scene.is-scene .fields{gap:0}
.weise__scene.is-scene .field{grid-area:1/1;min-height:min(600px,calc(100vh - var(--nav-h) - 96px))}

.cycle svg{width:min(100%,540px);height:auto;margin-inline:auto;overflow:visible}
.c-track{fill:none;stroke:var(--hair);stroke-width:2}
.c-arc{fill:none;stroke:url(#cycle-g);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--a,1))}
.c-arc--0,.c-arrow--0{--a:var(--a0,1)}
.c-arc--1,.c-arrow--1{--a:var(--a1,1)}
.c-arc--2,.c-arrow--2{--a:var(--a2,1)}
.c-arrow{fill:none;stroke:var(--weite);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:calc((var(--a,1) - .92) * 12.5)}
.c-arrow--0{stroke:#7F9FC6}
.c-center{font:400 46px var(--f-disp);fill:var(--ink)}
.c-center-sub{font:500 13px var(--f-text);letter-spacing:.18em;text-transform:uppercase;fill:var(--grund)}
.c-label{font:500 19px var(--f-text);letter-spacing:.14em;fill:var(--ink);transition:fill .5s}
.c-sub{font:400 16px var(--f-text);fill:var(--ink-2)}
.c-dot{fill:#fff;stroke:var(--tiefe);stroke-width:2;transition:fill .5s,stroke .5s}
.c-halo{fill:var(--weite);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .5s,transform .6s var(--ease)}
.c-node.is-active .c-dot{fill:var(--weite);stroke:var(--weite)}
.c-node.is-active .c-halo{opacity:.22;transform:none}
.c-node.is-active .c-label{fill:var(--grund)}
.c-node[data-node="0"].is-active .c-dot{fill:var(--mint);stroke:var(--grund)}
.c-node[data-node="0"].is-active .c-halo{fill:var(--mint);opacity:.6}
.c-node[data-node="1"].is-active .c-dot{fill:var(--grund);stroke:var(--grund)}
.c-node[data-node="1"].is-active .c-halo{fill:var(--grund)}

.fields{display:grid;gap:clamp(14px,2vw,24px)}
.field{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,7vh,88px);min-height:clamp(380px,50vh,560px);padding:clamp(26px,3.2vw,48px);border-radius:var(--radius);color:var(--tiefe)}
.field--1{background:var(--v-hell)}
.field--2{background:var(--v-mint-grund);color:#fff}
.field--3{background:var(--v-weite-tiefe);color:#fff}
.field__no{font-family:var(--f-disp);font-size:clamp(64px,7vw,112px);line-height:.85;color:var(--grund)}
.field--3 .field__no{color:#fff}
.field h3{margin:0 0 12px}
.field__body>p{max-width:40ch;font-size:var(--fs-l);line-height:1.45;opacity:.92}
.field .tags li{background:rgba(255,255,255,.55);color:var(--tiefe)}
.field--2 .tags li,.field--3 .tags li{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}

/* Kapiteltrenner */
.seam{padding-block:clamp(72px,11vw,170px);overflow:hidden}
.seam__text{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);padding-inline:var(--gut);font-weight:500;font-size:clamp(30px,1rem + 4.4vw,92px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.seam__a,.seam__b{display:block;opacity:calc(.15 + var(--p,1) * .85);filter:blur(calc((1 - var(--p,1)) * 10px))}
.seam__a{transform:translateX(calc((1 - var(--p,1)) * -12vw))}
.seam__b{transform:translateX(calc((1 - var(--p,1)) * 12vw))}
.seam__line{display:block;flex:none;width:calc(.5em + (1 - var(--p,1)) * 22vw);height:.085em;background:var(--weite)}
@media (max-width:700px){
  .seam__text{flex-direction:column;gap:18px;white-space:normal;text-align:center}
  .seam__a,.seam__b{transform:none}
  .seam__line{width:calc(1.2em + (1 - var(--p,1)) * 50vw)}
}

/* ---------- Ablauf ---------- */
.ablauf{--bg:var(--tint);background:var(--bg);padding-top:var(--sec)}
.ablauf__lead{max-width:44ch;margin-top:clamp(20px,2.4vw,32px)}
.facts{display:grid;gap:36px;margin-top:clamp(48px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--hair)}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}}
.facts li>span{display:block}
.facts__num{width:max-content;font-family:var(--f-disp);font-size:clamp(68px,8.4vw,136px);line-height:.85;letter-spacing:-.01em;font-variant-numeric:tabular-nums;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts__unit{margin-top:18px;font-weight:500;font-size:19px}
.facts__txt{color:var(--ink-2);font-size:16px}

.flow{margin-top:clamp(72px,10vw,140px)}
.flow__head{margin-bottom:clamp(28px,4vw,48px)}
.flow__tag{display:inline-flex;padding:8px 14px;border:1px dashed var(--ink-3);border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.flow__track{position:relative;width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.flow__rail{position:absolute;top:10px;bottom:10px;left:calc(var(--gut) + 7px);width:2px;background:var(--hair)}
.flow__rail span{position:absolute;inset:0;background:linear-gradient(180deg,var(--grund),var(--weite));transform-origin:0 0;transform:scaleY(var(--fill,1))}
.flow__stops{display:grid;gap:clamp(36px,5vw,48px);padding-left:44px}
.stop{position:relative}
.stop__dot{position:absolute;top:5px;left:-44px;width:16px;height:16px;border:2px solid var(--grund);border-radius:50%;background:var(--grund);transition:background-color .4s,border-color .4s,transform .5s var(--ease)}
.stop--m .stop__dot{border-color:var(--weite);border-radius:3px;background:var(--weite);transform:rotate(45deg) scale(.92)}
.stop--after .stop__dot{border-style:dashed;background:var(--bg)}
.stop__when{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grund)}
.stop__m{padding:3px 9px;border-radius:999px;background:var(--weite);color:#fff;font-size:11px;letter-spacing:.12em}
.stop__title{margin:8px 0 8px;font-size:clamp(22px,1rem + .9vw,30px)}
.stop__txt{max-width:36ch;font-size:16px;line-height:1.55;color:var(--ink-2)}
.stop--after{margin-top:20px}
.stop--after::before{content:"";position:absolute;left:-44px;top:-64px;width:16px;height:62px;background:var(--bg) linear-gradient(var(--ink-3) 55%,transparent 0) 50% 0/2px 9px repeat-y}
.flow.is-live .stop:not(.is-on) .stop__dot{background:var(--bg);border-color:var(--ink-3)}
.flow.is-live .stop:not(.is-on) .stop__when,.flow.is-live .stop:not(.is-on) .stop__title,.flow.is-live .stop:not(.is-on) .stop__txt{opacity:.38}
.stop__when,.stop__title,.stop__txt{transition:opacity .5s}
.flow__legend{display:flex;gap:14px;align-items:baseline;margin-top:clamp(40px,5vw,56px);font-size:15px;line-height:1.5;color:var(--ink-2)}
.flow__legend strong{font-weight:500;color:var(--ink)}
.flow__legend-icon{flex:none;width:12px;height:12px;border-radius:2px;background:var(--weite);transform:rotate(45deg) translateY(-1px)}

/* horizontaler Zeitstrahl ab Desktop */
.flow.is-scene .flow__sticky{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;height:100vh;height:100svh;padding-top:var(--nav-h);overflow:hidden}
.flow.is-scene .flow__track{width:max-content;max-width:none;margin:0;padding-inline:max(var(--gut),calc((100vw - var(--max)) / 2)) 20vw;will-change:transform}
.flow.is-scene .flow__rail{top:7px;bottom:auto;left:max(var(--gut),calc((100vw - var(--max)) / 2));right:20vw;width:auto;height:2px}
.flow.is-scene .flow__rail span{background:var(--verlauf);transform:scaleX(var(--fill,1));transform-origin:0 0}
.flow.is-scene .flow__stops{display:flex;gap:0;padding-left:0}
.flow.is-scene .stop{flex:none;width:clamp(250px,22vw,330px);padding:48px 40px 0 0}
.flow.is-scene .stop__dot{top:0;left:0}
.flow.is-scene .stop--after{margin:0 0 0 72px}
.flow.is-scene .stop--after::before{left:-72px;top:0;width:68px;height:16px;background:var(--bg) linear-gradient(90deg,var(--ink-3) 55%,transparent 0) 0 50%/9px 2px repeat-x}

/* Moodboard */
.moodboard{padding-block:clamp(72px,10vw,140px) var(--sec)}
.moodboard__img{overflow:hidden;border-radius:var(--radius);background:var(--tint);clip-path:inset(calc((1 - var(--p,1)) * 44%) calc((1 - var(--p,1)) * 4%) round var(--radius))}
.moodboard__img img{width:100%;aspect-ratio:3/2;object-fit:cover;transform:scale(calc(1.14 - var(--p,1) * .14))}
.moodboard figcaption,.teaser figcaption{margin-top:18px;max-width:60ch;font-size:15px;color:var(--ink-2)}
.moodboard figcaption em{font-weight:500;color:var(--ink)}

/* ---------- Arbeiten ---------- */
.arbeiten{padding-block:var(--sec)}
.arbeiten__lead{margin-top:clamp(20px,2.4vw,32px)}
.case{padding-top:clamp(88px,11vw,170px)}
.case__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:clamp(16px,2vw,24px);font-size:16px;color:var(--ink-2)}
.case__meta strong{font-weight:500;color:var(--ink)}
.case__no{font-family:var(--f-disp);font-size:24px;line-height:1;color:var(--weite)}
.case__q{max-width:21ch;font-size:clamp(30px,1rem + 3.2vw,70px);line-height:1.05;letter-spacing:-.035em}
.case__media{margin-top:clamp(32px,5vw,64px)}
.case__frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--v-kapitel);clip-path:inset(calc((1 - var(--p,1)) * 46%) calc((1 - var(--p,1)) * 6%) round var(--radius))}
.case__video{width:100%;height:100%;object-fit:cover}
.case__frame.is-auto .case__video{cursor:zoom-in}
.case__ctrl{position:absolute;left:clamp(10px,1.6vw,20px);bottom:clamp(10px,1.6vw,20px);z-index:2;display:flex;gap:8px}
.case__frame:not(.is-auto) .case__ctrl{top:clamp(10px,1.6vw,20px);bottom:auto}
html:not(.js) .case__ctrl{display:none}
.case__body{display:grid;gap:clamp(28px,4vw,48px);margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){.case__body{grid-template-columns:7fr 5fr;column-gap:clamp(48px,6vw,112px)}}
.case__a{max-width:38ch;font-size:var(--fs-l);line-height:1.5}
.case__l .tags{margin-top:0}

/* Lightbox */
.lightbox{width:min(92vw,1600px);max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(18,28,48,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox__video{width:100%;max-height:84vh;border-radius:14px;background:#000}
.lightbox__close{position:absolute;right:0;top:-54px}
.lightbox[open]{animation:lbIn .5s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}}

/* ---------- Markenband ---------- */
/* Ohne JS oder bei reduzierter Bewegung: ruhige, umbrechende Zeile. Mit JS: Band läuft durch. */
.marken{padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--hair);overflow:hidden}
.marken__t{max-width:none;margin-bottom:clamp(24px,3vw,40px);font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--ink-2)}
.marken__band{position:relative}
.marken__track{display:flex;justify-content:center;padding-inline:var(--gut)}
.marken__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px clamp(24px,3.4vw,52px);max-width:1080px;font-weight:500;font-size:clamp(19px,1rem + .7vw,28px);line-height:1.2;letter-spacing:-.01em;color:#0f1726}
.marken__list li{display:flex;align-items:center;white-space:nowrap}
.marken__list img{display:block;height:clamp(22px,2.2vw,30px);width:auto;filter:brightness(0)}
.marken__pause{display:none}
.marken__band{--pz:calc(var(--gut) + 36px)}
.marken__band.is-running .marken__view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(32px,8%,140px),#000 calc(100% - var(--pz) - 140px),transparent calc(100% - var(--pz)));mask-image:linear-gradient(90deg,transparent 0,#000 clamp(32px,8%,140px),#000 calc(100% - var(--pz) - 140px),transparent calc(100% - var(--pz)))}
.marken__band.is-running .marken__track{justify-content:flex-start;width:max-content;padding:8px 0;animation:marquee var(--marquee-dur,50s) linear infinite;will-change:transform}
.marken__band.is-running .marken__list{flex-wrap:nowrap;max-width:none;gap:0}
.marken__band.is-running .marken__list li::after{content:"";flex:none;width:.6em;height:2px;margin-inline:clamp(18px,2.6vw,40px);background:var(--weite)}
.marken__band.is-running .marken__view:hover .marken__track,.marken__band.is-paused .marken__track,.marken__band.is-offscreen .marken__track{animation-play-state:paused}
.marken__band.is-running .marken__pause{position:absolute;right:max(8px,calc(var(--gut) - 18px));top:50%;z-index:2;display:flex;align-items:center;justify-content:center;gap:3px;width:36px;height:36px;margin-top:-18px;padding:0;border:1px solid var(--hair);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .3s}
.marken__pause:hover{border-color:var(--weite)}
.marken__pause::before,.marken__pause::after{content:"";width:3px;height:12px;border-radius:1px;background:currentColor}
.marken__pause[aria-pressed="true"]::after{display:none}
.marken__pause[aria-pressed="true"]::before{width:0;height:0;margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;border-radius:0;background:none}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- Kundenstimme (Vorschau) ---------- */
.stimme{padding-block:clamp(80px,10vw,150px);background:var(--v-hell)}
.stimme__q p{max-width:30ch;font-size:clamp(24px,1rem + 2vw,44px);line-height:1.22;letter-spacing:-.02em;font-style:italic}
.stimme__who{margin-top:24px;color:var(--ink-2)}
.stimme__who strong{font-weight:500;color:var(--ink)}

/* ---------- Über-mich-Teaser ---------- */
.teaser{padding-block:var(--sec)}
.teaser__grid{display:grid;gap:clamp(40px,6vw,64px);align-items:center}
@media (min-width:900px){.teaser__grid{grid-template-columns:5fr 7fr;column-gap:clamp(48px,7vw,128px)}}
.teaser__img,.bekommt__img,.opener__img{overflow:hidden;border-radius:var(--radius);background:var(--tint)}
.teaser__img{aspect-ratio:4/5;clip-path:inset(0 calc((1 - var(--p,1)) * 48%) round var(--radius))}
.teaser__img img,.opener__img img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p,1) * .12))}
.teaser .lead{margin-top:clamp(20px,2.4vw,32px)}
.stations{margin-top:28px;font-weight:500}
.stations span,.opener__facts span{margin-inline:6px;color:var(--weite)}
.teaser__txt .link{margin-top:36px}

/* ---------- Kurz gesagt ---------- */
.faq{padding-bottom:var(--sec)}
.faq__box{border-block:1px solid var(--hair)}
.faq summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:clamp(24px,3vw,36px) 48px clamp(24px,3vw,36px) 0;list-style:none;cursor:pointer;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary h2{font-size:clamp(26px,1rem + 1.5vw,40px)}
.faq__sub{color:var(--ink-2)}
.faq summary i{position:absolute;right:0;top:50%;width:36px;height:36px;margin-top:-18px;border:1px solid var(--hair);border-radius:50%;transition:transform .5s var(--ease),border-color .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:currentColor}
.faq summary i::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
.faq summary:hover i{border-color:var(--weite)}
.faq__box[open] summary i::after{transform:rotate(0)}
.faq__list{display:grid;gap:28px;padding-bottom:clamp(32px,4vw,56px)}
@media (min-width:900px){.faq__list{grid-template-columns:1fr 1fr;column-gap:64px}}
.faq__list dt{margin-bottom:6px;font-weight:500;font-size:19px}
.faq__list dd{color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq__box::details-content{height:0;overflow:clip;transition:height .6s var(--ease),content-visibility .6s allow-discrete}
  .faq__box[open]::details-content{height:auto}
}

/* ---------- Kontakt ---------- */
.kontakt{padding-block:var(--sec);background:var(--v-hell);overflow:hidden}
.kontakt__word{margin-bottom:clamp(40px,6vw,80px);font-family:var(--f-disp);font-size:clamp(56px,10vw,156px);line-height:.88;color:var(--tiefe)}
.kontakt__grid{display:grid;gap:clamp(48px,6vw,80px)}
@media (min-width:900px){.kontakt__grid{grid-template-columns:7fr 5fr;column-gap:clamp(48px,7vw,128px);align-items:start}}
.kontakt h2{margin-bottom:clamp(20px,2.4vw,32px)}
.kontakt__text{max-width:36ch;font-size:var(--fs-l);line-height:1.5;color:var(--ink)}
.mark{padding:0 .22em;border-radius:5px;background:#fff;color:var(--tiefe);font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kontakt__steps{margin-top:clamp(28px,3vw,40px);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kontakt__steps span{margin-inline:6px;color:var(--grund)}
.kontakt__principle{margin-top:12px;font-weight:500;font-size:18px}
.kontakt__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,48px)}
.kontakt__note{margin-top:16px;font-size:15px;color:var(--ink-2)}
.kontakt__side dl{display:grid;gap:28px;padding-top:28px;border-top:1px solid rgba(32,54,89,.2)}
.kontakt__side dt{margin-bottom:6px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grund)}
.kontakt__side dd{color:var(--ink)}
.kontakt__side a{font-size:19px;text-decoration:none;background:linear-gradient(var(--tiefe),var(--tiefe)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.copy{display:inline-flex;margin:10px 0 0;padding:7px 14px;border:1px solid rgba(32,54,89,.3);border-radius:999px;background:transparent;font-size:13px;font-weight:500;cursor:pointer;transition:border-color .3s,background-color .3s}
.copy:hover{border-color:var(--tiefe)}
.copy.is-done{background:var(--tiefe);border-color:var(--tiefe);color:#fff}

/* ---------- Footer: Menü noch einmal, darunter Absender ---------- */
.footer{padding-block:clamp(56px,7vw,96px) 40px;font-size:15px;border-top:1px solid var(--hair)}
.footer__nav ul{display:flex;flex-wrap:wrap;gap:4px clamp(24px,3.6vw,56px);margin-bottom:clamp(32px,4vw,48px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--hair)}
@media (max-width:759px){.footer__nav ul{flex-direction:column}}
.footer__nav a{display:inline-block;padding:4px 0;font-weight:500;font-size:clamp(28px,1rem + 2.2vw,52px);line-height:1.15;letter-spacing:-.025em;text-decoration:none;background:linear-gradient(var(--weite),var(--weite)) 0 100%/0 3px no-repeat;transition:background-size .6s var(--ease)}
.footer__nav a:hover,.footer__nav a[aria-current="page"]{background-size:100% 3px}
.footer__grid{display:grid;gap:24px 40px}
@media (min-width:760px){.footer__grid{grid-template-columns:auto 1fr auto auto;align-items:start}}
.footer__logo{display:block;width:150px;padding-top:4px;color:var(--grund)}
.footer__about p{color:var(--ink-2)}
.footer__links{display:grid;gap:6px}
.footer__links a,.legal a{text-decoration:none;background:linear-gradient(var(--weite),var(--weite)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.footer__links a:hover,.legal a:hover{background-size:100% 2px}
.footer__copy{color:var(--ink-3)}

/* ---------- Über mich ---------- */
.opener{padding-block:calc(var(--nav-h) + clamp(32px,6vw,96px)) var(--sec)}
.opener__grid{display:grid;gap:clamp(40px,6vw,64px);align-items:end}
@media (min-width:900px){.opener__grid{grid-template-columns:5fr 7fr;column-gap:clamp(48px,7vw,128px)}}
.opener__img{aspect-ratio:4/5}
.opener h1{font-weight:500;font-size:clamp(40px,1.1rem + 4.2vw,92px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.opener .lead{margin-top:clamp(20px,2.4vw,32px);max-width:40ch}
.opener__facts{margin-top:28px;font-weight:500}
@media (prefers-reduced-motion:no-preference){
  html.js .opener__img{animation:openLine 1.6s var(--ease) .1s both}
  html.js .opener__img img{animation:zoomOut 2s var(--ease) .1s both}
  html.js .opener__txt>*{animation:heroIn 1.3s var(--ease) both}
  html.js .opener__txt>:nth-child(2){animation-delay:.1s}
  html.js .opener__txt>:nth-child(3){animation-delay:.22s}
  html.js .opener__txt>:nth-child(4){animation-delay:.34s}
}
@keyframes openLine{from{clip-path:inset(0 49% round var(--radius))}to{clip-path:inset(0 0 round var(--radius))}}
@keyframes zoomOut{from{transform:scale(1.14)}to{transform:scale(1)}}

.drei__sticky{padding-block:var(--sec)}
.drei__in{display:grid;gap:clamp(8px,1.4vw,18px)}
.drei__s{font-weight:500;font-size:clamp(30px,1rem + 3.6vw,80px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.drei__s em{color:var(--mint)}
.drei.is-scene{height:300vh;height:300svh}

.drei.is-scene .drei__s{opacity:calc(.12 + var(--f,1) * .88);filter:blur(calc((1 - var(--f,1)) * 10px));transform:translateY(calc((1 - var(--f,1)) * 20px))}

.warum{padding-block:var(--sec)}
.warum__grid{display:grid;gap:clamp(48px,6vw,80px);margin-top:clamp(40px,5vw,72px);align-items:center}
@media (min-width:900px){.warum__grid{grid-template-columns:5fr 7fr;column-gap:clamp(48px,7vw,128px)}}
.warum__mark{max-width:420px}
.b101{width:100%;height:auto;overflow:visible}
.b101__l{transform:translateX(calc((1 - var(--p,1)) * -10px));opacity:calc(var(--p,1) * 1.4)}
.b101__r{transform:translateX(calc((1 - var(--p,1)) * 10px));opacity:calc(var(--p,1) * 1.4)}
.b101__o{transform-box:fill-box;transform-origin:center;transform:rotate(calc((1 - var(--p,1)) * -180deg)) scale(calc(.7 + var(--p,1) * .3));opacity:calc(var(--p,1) * 1.6)}
.warum__101{display:grid;grid-template-columns:2.49fr 1.41fr 15.84fr 1.42fr 2.49fr;margin-top:18px;font-family:var(--f-disp);font-size:clamp(22px,2.4vw,32px);line-height:1;color:var(--ink-2);opacity:calc((var(--p,1) - .7) * 3.4)}
.warum__101 span{text-align:center}
.warum__101 span:nth-child(2){grid-column:3}
.warum__101 span:nth-child(3){grid-column:5}
.warum__mark figcaption{margin-top:20px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grund)}
.warum__txt{display:grid;gap:20px;color:var(--ink-2);font-size:var(--fs-l);line-height:1.5}
.warum__txt .lead{color:var(--ink)}

.weg{--bg:var(--tint);padding-block:var(--sec);background:var(--bg)}
.weg__lead{margin-top:clamp(20px,2.4vw,32px)}
.weg__list{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--hair)}
.weg__item{position:relative;display:grid;gap:6px 32px;padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--hair)}
@media (min-width:900px){.weg__item{grid-template-columns:3fr 4fr 6fr;align-items:baseline}}
.weg__item::before{content:"";position:absolute;left:0;top:-1px;width:72px;height:2px;background:var(--weite)}
.weg__when{font-family:var(--f-disp);font-size:clamp(22px,2vw,30px);line-height:1.1;color:var(--grund)}
.weg__what{font-size:clamp(20px,1rem + .8vw,28px);line-height:1.2}
.weg__desc{color:var(--ink-2)}
.weg__item--now .weg__when{color:var(--weite)}
.weg__extra{margin-top:28px;font-size:15px;color:var(--ink-2)}

.bekommt{padding-block:var(--sec)}
.bekommt__grid{display:grid;gap:clamp(48px,6vw,80px);align-items:center}
@media (min-width:900px){.bekommt__grid{grid-template-columns:6fr 6fr;column-gap:clamp(48px,7vw,128px)}}
.bekommt .lead{margin-top:clamp(20px,2.4vw,32px)}
.points{margin-top:clamp(32px,4vw,48px);counter-reset:pt}
.points li{display:grid;grid-template-columns:56px 1fr;padding-block:18px;border-top:1px solid var(--hair);font-size:var(--fs-l);line-height:1.4;font-weight:500}
.points li::before{counter-increment:pt;content:"0" counter(pt);font-family:var(--f-disp);font-weight:400;color:var(--weite)}
.bekommt__img{aspect-ratio:4/5;clip-path:inset(calc((1 - var(--p,1)) * 46%) 0 round var(--radius))}
.bekommt__img img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p,1) * .14))}

/* ---------- Rechtliches / 404 ---------- */
.legal{padding-block:calc(var(--nav-h) + clamp(48px,8vw,120px)) var(--sec)}
.legal__in{max-width:calc(820px + 2 * var(--gut));margin-inline:0 auto}
@media (min-width:1200px){.legal__in{margin-inline:auto}}
.legal h1,.nf h1{margin-bottom:clamp(32px,5vw,56px);font-weight:500;font-size:clamp(40px,1.1rem + 4vw,88px);line-height:1.02;letter-spacing:-.035em}
.legal h2{margin:40px 0 10px;font-size:clamp(19px,1rem + .4vw,23px);letter-spacing:-.01em}
.legal p{max-width:66ch;color:var(--ink-2)}
.legal a{color:var(--ink);background-size:100% 1px}
.nf{display:grid;align-content:center;min-height:100vh;min-height:100svh;padding-block:calc(var(--nav-h) + 40px) 80px}
.nf h1{margin-bottom:24px}
.nf__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* ---------- Scharfstellen beim Scrollen ---------- */
html.js [data-reveal]{opacity:0;filter:blur(10px);transform:translateY(28px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease)}
html.js [data-reveal].is-in{opacity:1;filter:none;transform:none}
@supports (animation-timeline:view()){
  html.js [data-reveal]{opacity:1;filter:none;transform:none;transition:none;animation:sharpen linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
@keyframes sharpen{from{opacity:0;filter:blur(10px);transform:translateY(28px)}to{opacity:1;filter:blur(0);transform:none}}

/* ---------- Seitenwechsel ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .4s var(--ease) both}
::view-transition-new(root){animation:vtIn .7s var(--ease) both}
@keyframes vtOut{to{opacity:0;filter:blur(8px)}}
@keyframes vtIn{from{opacity:0;filter:blur(8px)}}

/* ---------- Reduzierte Bewegung: fertiger Zustand ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html.js [data-reveal]{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
  .marken__band.is-running .marken__track{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}