@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'),url(fonts/bricolage-grotesque-latin-opsz-normal.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:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations'),url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2');unicode-range:U+0100-0130,U+0132-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:600 700;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}
:root{--accent:#FF8A66}
html{scroll-behavior:smooth;scroll-padding-top:72px}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #2A2233;outline-offset:3px}
body{margin:0;background:#FFF6E9}
a{color:#2A2233}a:hover{color:#5A4E63}
input::placeholder{color:#76697F}
@media (max-width: 880px){.nav-links{display:none !important}}
.field:focus-within{box-shadow:0 0 0 2px #2A2233}
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-0.045em;line-height:.95}
@keyframes wz-intro{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.intro>*{animation:wz-intro 1s cubic-bezier(.16,.8,.2,1) both}
.intro>*:nth-child(2){animation-delay:.1s}
.intro>*:nth-child(3){animation-delay:.2s}
.intro>*:nth-child(4){animation-delay:.3s}
.intro>*:nth-child(5){animation-delay:.4s}
@keyframes wz-mark{from{background-size:0% 34%}to{background-size:100% 34%}}
.mark{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 88%;background-size:100% 34%;animation:wz-mark 1s .7s cubic-bezier(.16,.8,.2,1) both}
@keyframes wz-words{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-20%)}50%,68%{transform:translateY(-40%)}75%,93%{transform:translateY(-60%)}100%{transform:translateY(-80%)}}
.words{animation:wz-words 10s cubic-bezier(.7,0,.2,1) infinite}
@keyframes wz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:wz-marquee 48s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes wz-up{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes wz-rise{from{opacity:0;transform:translateY(80px) scale(.94)}to{opacity:1;transform:none}}
@keyframes wz-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes wz-bar{from{left:0%}to{left:100%}}
@keyframes wz-old-label{0%,40%{opacity:1}60%,100%{opacity:0}}
@keyframes wz-new-label{0%,40%{opacity:0}60%,100%{opacity:1}}
@keyframes wz-frame{from{transform:scale(.86) rotate(-2deg)}30%{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(0)}}
@keyframes wz-scrub{from{background-position:0 100%}to{background-position:0 0}}
@keyframes wz-right{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
@keyframes wz-left{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes wz-zoom{from{transform:scale(.7);opacity:.2}to{transform:none;opacity:1}}
@keyframes wz-shrink{from{transform:none}to{transform:scale(.92);filter:brightness(.92)}}
@keyframes wz-float{from{transform:translateY(-60px)}to{transform:translateY(80px)}}
@supports (animation-timeline: view()){
.reveal{animation:wz-up linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.rise{animation:wz-rise linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
.morph{view-timeline-name:--morph}
.wipe{animation:wz-wipe linear both;animation-timeline:--morph;animation-range:contain 20% contain 80%}
.bar{animation:wz-bar linear both;animation-timeline:--morph;animation-range:contain 20% contain 80%}
.old-label{animation:wz-old-label linear both;animation-timeline:--morph;animation-range:contain 20% contain 80%}
.new-label{animation:wz-new-label linear both;animation-timeline:--morph;animation-range:contain 20% contain 80%}
.frame{animation:wz-frame linear both;animation-timeline:--morph;animation-range:contain 0% contain 60%}
.stack{animation:wz-shrink linear both;animation-timeline:view();animation-range:exit-crossing 0% exit-crossing 100%}
.scrub{background:linear-gradient(to bottom,#FFF6E9 0 50%,#5E5368 50% 100%);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wz-scrub linear both;animation-timeline:view();animation-range:entry 40% cover 60%}
.from-right{animation:wz-right linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.from-left{animation:wz-left linear both;animation-timeline:view();animation-range:entry 15% cover 45%}
.zoom{animation:wz-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
.blob{animation:wz-float linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
.process .layer{opacity:0}
.process .layer.s1{opacity:1}
@media (max-width: 900px){.proc-list{display:none !important}}
@keyframes wz-in-out{0%{opacity:0;transform:translateY(50px) scale(.96)}22%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-50px) scale(.98)}}
@keyframes wz-out{0%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-50px) scale(.98)}}
@keyframes wz-in{0%{opacity:0;transform:translateY(50px) scale(.96)}22%,100%{opacity:1;transform:none}}
@keyframes wz-lit{0%{opacity:.3}22%,78%{opacity:1}100%{opacity:.3}}
@keyframes wz-lit-first{0%,78%{opacity:1}100%{opacity:.3}}
@keyframes wz-lit-last{0%{opacity:.3}22%,100%{opacity:1}}
@keyframes wz-card-in{from{opacity:0;transform:translateY(60px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes wz-progress{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes wz-blink{50%{opacity:0}}
@keyframes wz-tap{0%,55%{transform:translate(30px,30px)}70%{transform:translate(0,0)}78%{transform:translate(0,0) scale(.85)}86%,100%{transform:translate(0,0)}}
@keyframes wz-press{0%,74%{transform:none}78%{transform:scale(.94)}84%,100%{transform:none}}
@keyframes wz-pop{0%,8%{opacity:0;transform:translateY(12px) scale(.8)}18%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wz-build{0%,6%{opacity:0;transform:scale(.92);filter:grayscale(1)}20%{opacity:1;transform:none;filter:grayscale(1)}35%,90%{filter:none;opacity:1}100%{opacity:0}}
@keyframes wz-stamp{0%,20%{opacity:0;transform:scale(1.7) rotate(-14deg)}28%,92%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:rotate(-8deg)}}
@keyframes wz-designer{0%{transform:translate(0,0)}30%{transform:translate(160px,30px)}60%{transform:translate(60px,150px)}100%{transform:translate(0,0)}}
@keyframes wz-load{0%{width:0}70%,100%{width:100%}}
.caret{animation:wz-blink 1s steps(1) infinite}
.tap{animation:wz-tap 3.2s ease-in-out infinite}
.press{animation:wz-press 3.2s ease-in-out infinite}
.chip{animation:wz-pop 4.5s ease-out infinite}
.chip.c2{animation-delay:.25s}.chip.c3{animation-delay:.5s}.chip.c4{animation-delay:.75s}.chip.c5{animation-delay:1s}.chip.c6{animation-delay:1.25s}
.build{animation:wz-build 5s ease-out infinite}
.build.b2{animation-delay:.3s}.build.b3{animation-delay:.6s}.build.b4{animation-delay:.75s}.build.b5{animation-delay:.9s}
.stamp{animation:wz-stamp 4s ease-out infinite}
.designer{animation:wz-designer 6s ease-in-out infinite}
.load{animation:wz-load 3.5s ease-in-out infinite}
@supports (animation-timeline: view()){
.process{view-timeline-name:--proc}
.process .layer,.process .pstep{animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;animation-timeline:--proc}
.layer.s1{animation-name:wz-out;animation-range:contain 0% contain 14%}
.layer.s2{animation-name:wz-in-out;animation-range:contain 10% contain 26%}
.layer.s3{animation-name:wz-in-out;animation-range:contain 22% contain 38%}
.layer.s4{animation-name:wz-in-out;animation-range:contain 34% contain 50%}
.layer.s5{animation-name:wz-in-out;animation-range:contain 46% contain 62%}
.layer.s6{animation-name:wz-in-out;animation-range:contain 58% contain 74%}
.layer.s7{animation-name:wz-in;animation-range:contain 70% contain 84%}
.s7b{animation:wz-card-in linear both;animation-timeline:--proc;animation-range:contain 78% contain 90%}
.pstep.p1{animation-name:wz-lit-first;animation-range:contain 0% contain 14%}
.pstep.p2{animation-name:wz-lit;animation-range:contain 10% contain 26%}
.pstep.p3{animation-name:wz-lit;animation-range:contain 22% contain 38%}
.pstep.p4{animation-name:wz-lit;animation-range:contain 34% contain 50%}
.pstep.p5{animation-name:wz-lit;animation-range:contain 46% contain 62%}
.pstep.p6{animation-name:wz-lit;animation-range:contain 58% contain 74%}
.pstep.p7{animation-name:wz-lit-last;animation-range:contain 70% contain 84%}
.progress{animation:wz-progress linear both;animation-timeline:--proc;animation-range:contain 0% contain 100%}
}
@media (prefers-reduced-motion: reduce){
.process .layer,.process .pstep,.progress,.s7b,.caret,.tap,.press,.chip,.build,.stamp,.designer,.load{animation:none !important}
.load{width:100%}
.intro>*,.mark,.words,.marquee,.reveal,.rise,.wipe,.bar,.old-label,.new-label,.frame,.stack,.from-right,.from-left,.zoom,.blob{animation:none !important}
.scrub{animation:none !important;background:none;color:#FFF6E9}
.wipe{clip-path:inset(0 0 0 50%)}.bar{left:50%}
}
@keyframes wz-par-slow{from{opacity:0;transform:translateY(80px)}25%{opacity:1}to{opacity:1;transform:translateY(-40px)}}
@keyframes wz-par-fast{from{opacity:0;transform:translateY(220px)}25%{opacity:1}to{opacity:1;transform:translateY(-120px)}}
@supports (animation-timeline: view()){
.par-slow,.par-fast{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 0% exit 60%}
.par-slow{animation-name:wz-par-slow}
.par-fast{animation-name:wz-par-fast}
}
@media (prefers-reduced-motion: reduce){.par-slow,.par-fast{animation:none !important}}
@media (max-width: 600px){.founders .par-fast{margin-top:0 !important}}
@media (max-width: 600px){.par-fast{animation-name:wz-par-slow}}

/* ---------- Mobile: Vorher/Nachher skaliert, Ablauf als gestapelte Karten ---------- */
.fit{transform-origin:0 0}
@media (max-width: 999px){
  #verwandlung{height:1900px !important}
}
@media (max-width: 700px){
  #ablauf{height:auto !important;padding-bottom:96px !important}
  #ablauf > div{position:static !important}
  #ablauf .stage{height:auto !important;overflow:visible !important;box-shadow:none !important;background:none !important;border-radius:0 !important;display:flex;flex-direction:column;gap:16px}
  #ablauf .layer{position:relative !important;inset:auto !important;opacity:1 !important;transform:none !important;animation:none !important;border-radius:28px;padding:24px !important;min-height:0}
  #ablauf .layer .display{font-size:32px !important}
  #ablauf .layer > div{flex-wrap:wrap}
  #ablauf .layer.s2 > div > div:first-child{flex:1 1 100% !important;height:180px !important}
  #ablauf .layer.s2 > div > svg{transform:rotate(90deg)}
  #ablauf .layer.s3 > div,#ablauf .layer.s5 > div{min-height:300px}
  #ablauf .layer.s4 > div{min-height:220px}
  #ablauf .layer.s5 > div > div{flex:1 1 100% !important}
  #ablauf .layer.s5 > div > div:first-child{min-height:260px}
  #ablauf .s7-stack{overflow:visible !important;display:flex !important;flex-direction:column;gap:14px}
  #ablauf .s7a,#ablauf .s7b{position:relative !important;inset:auto !important;top:0 !important;transform:none !important;animation:none !important;box-shadow:none !important;min-height:300px}
}
@media (max-width: 700px){
  #preis span.display{font-size:clamp(64px, 20vw, 96px) !important;white-space:nowrap}
  #preis h2{font-size:clamp(32px, 9.4vw, 52px) !important}
  #preis{padding:88px 20px 80px !important}
  #verwandlung{height:1400px !important}
  #faq h2{font-size:clamp(32px, 9.4vw, 52px) !important}
  #ablauf .layer.s1 > div{flex-wrap:nowrap}
  #ablauf .layer.s1 > div > span:first-child{font-size:15px !important;padding:12px 10px !important;text-overflow:ellipsis}
}
@media (max-width: 420px){
  h1,h2,h3{overflow-wrap:break-word}
  header nav a:last-child{padding:9px 14px !important;font-size:14px !important}
  header a[href="#top"] > span{font-size:22px !important}
}