/* Espressly · site.css
   Schriften: Big Shoulders Display, Caveat Brush (SIL OFL 1.1, selbst gehostet) */

@font-face{font-family:"Big Shoulders Display";src:url("../fonts/big-shoulders-display.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat Brush";src:url("../fonts/caveat-brush.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --roest:#0E0906;--espresso:#2B1B12;--crema:#E8D6BC;--schaum:#F4EBDD;--orange:#D5621D;--orange-dunkel:#A4470F;--muted:#B8A58C;--muted-hell:#6B5747;
  --gutter:clamp(20px,4.4vw,64px);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-write:cubic-bezier(.6,.1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--roest);color:var(--crema);font-family:system-ui,-apple-system,"SF Pro Text","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--crema)}
a:hover{color:var(--orange)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:4px}

.disp{font-family:"Big Shoulders Display","Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;margin:0}
.hand{font-family:"Caveat Brush","Bradley Hand",cursive;font-weight:400;line-height:.95}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--orange);color:var(--roest);padding:12px 18px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:16px;color:var(--roest)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:6px;background:var(--orange);color:var(--roest);font-weight:650;font-size:1rem;text-decoration:none;transition:transform .25s var(--ease-out),background-color .2s ease}
.btn:hover{color:var(--roest);background:#E4732E;transform:translateY(-2px)}
.btn:focus-visible{outline-color:var(--crema)}
.btn-ghost{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1.5px rgba(232,214,188,.45);min-height:46px;padding:0 20px}
.btn-ghost:hover{background:rgba(232,214,188,.08);color:var(--crema)}

/* Navigation */
.nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px var(--gutter)}
.nav-logo{display:block}
.nav-logo img{display:block;height:26px;width:auto}
.nav-links{display:flex;gap:clamp(16px,3vw,40px);list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.95rem;color:var(--muted);padding:10px 0;display:inline-block}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--crema)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;min-height:calc(130px + min(19.5vw,22rem)*.52 + clamp(240px,21vw,310px)*2.12)}
.giant-wrap{position:absolute;left:0;right:0;top:118px;will-change:transform}
.giant{text-align:center;font-size:min(19.5vw,22rem);
  background:linear-gradient(180deg,#E8D6BC 0%,rgba(232,214,188,.55) 48%,rgba(232,214,188,.06) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;animation:rise 1.1s var(--ease-out) both}
.stage{position:absolute;z-index:3;left:50%;top:calc(118px + min(19.5vw,22rem)*.5);width:clamp(240px,21vw,310px);transform:translateX(-50%)}
.stage-par{will-change:transform}
.tilt{perspective:1200px}
.tilt-in{transform:rotateX(calc(var(--my,0)*-6deg)) rotateY(calc(var(--mx,0)*8deg));transition:transform .6s var(--ease-out);transform-style:preserve-3d}
.phone{position:relative;border-radius:16.5% / 7.6%;padding:3.6%;background:#18110D;
  box-shadow:inset 0 0 0 1.5px #3A2B21,0 2px 0 #4A382B,0 50px 90px rgba(0,0,0,.7),0 12px 30px rgba(0,0,0,.5);
  transform:rotate(-3deg);animation:phoneIn 1.3s .15s var(--ease-out) both}
.phone img{display:block;width:100%;height:auto;border-radius:13.5% / 6.2%}
.phone::after{content:"";position:absolute;inset:3.6%;border-radius:13.5% / 6.2%;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,240,220,.10) 50%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-position:120% 0;animation:sheen 2.4s 1.4s ease-in-out both}
.island{position:absolute;top:4.6%;left:50%;width:30%;height:3.3%;transform:translateX(-50%);border-radius:999px;background:#000}
.s{position:absolute;z-index:4;white-space:nowrap;color:var(--orange);font-size:clamp(2.1rem,5.4vw,5.4rem);text-shadow:0 2px 18px rgba(14,9,6,.55);
  clip-path:inset(-20% 100% -20% 0);animation:write 1.1s var(--ease-write) forwards}
.s1{right:60%;top:21%;transform:rotate(-6deg);animation-delay:.9s}
.s2{left:70%;top:29%;transform:rotate(-4deg);animation-delay:1.55s}
.s3{right:76%;top:40%;transform:rotate(-5deg);color:var(--crema);font-size:clamp(1.5rem,2.6vw,2.6rem);animation-delay:2.2s}
.intro{position:absolute;z-index:5;left:var(--gutter);bottom:56px;max-width:390px;animation:rise 1s .5s both}
.intro h1{font-size:clamp(2.6rem,3.4vw,3.4rem);margin:0 0 18px;color:var(--crema)}
.intro p{margin:0 0 28px;font-size:1.06rem;line-height:1.55;color:var(--muted)}
.note{position:absolute;z-index:5;right:var(--gutter);bottom:110px;width:300px;margin:0;color:var(--crema);font-size:1.9rem;transform:rotate(-3deg);animation:rise 1s 2.6s both}
.note svg{position:absolute;left:-150px;top:-70px;width:160px;height:100px;overflow:visible}
.note path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s 3s var(--ease-write) forwards}

/* ---------- Problem ---------- */
.problem{position:relative;background:var(--schaum);color:var(--espresso);padding:clamp(96px,11vw,170px) var(--gutter) clamp(96px,10vw,150px)}
.problem h2{font-size:clamp(3.2rem,9.2vw,9.6rem);max-width:12ch}
.scribble{position:absolute;right:clamp(20px,8vw,140px);top:clamp(110px,14vw,230px);margin:0;color:var(--orange-dunkel);font-size:clamp(2rem,4.2vw,4.4rem);transform:rotate(-7deg)}
.scribble svg{position:absolute;left:8%;top:100%;width:min(220px,60%);height:auto;overflow:visible}
.problem .lead{max-width:34ch;margin:clamp(64px,8vw,120px) 0 0 auto;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.45}

/* ---------- So geht's ---------- */
.how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--espresso);min-height:780px}
.how-text{padding:clamp(80px,9vw,140px) var(--gutter);display:flex;flex-direction:column;justify-content:center}
.how h2{color:var(--orange);font-size:clamp(2rem,3vw,3rem);margin:0 0 28px;transform:rotate(-3deg);transform-origin:left}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,20px)}
.steps li{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,24px)}
.steps .n{font-family:"Caveat Brush",cursive;color:var(--orange);font-size:clamp(2.2rem,3.6vw,3.6rem);min-width:1ch}
.steps .disp{font-size:clamp(2.6rem,4.6vw,5.2rem)}
.how-text p{max-width:32ch;margin:clamp(36px,4vw,56px) 0 0;font-size:1.06rem;line-height:1.6;color:var(--muted)}
.photo{position:relative;margin:0;min-height:520px;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transform:scale(var(--ps,1));transform-origin:70% 55%;will-change:transform}
.tag{position:absolute;color:var(--orange);font-family:"Caveat Brush",cursive;font-size:clamp(1.6rem,2.3vw,2.4rem);text-shadow:0 0 14px rgba(244,235,221,.95),0 0 3px rgba(244,235,221,.95);transform:rotate(-5deg);white-space:nowrap}
.tag svg{position:absolute;overflow:visible}
.t1{left:7%;top:50%}
.t1 svg{left:64px;top:-26px;width:70px;height:40px}
.t2{right:4%;top:43%}
.t2 svg{left:30px;top:44px;width:40px;height:60px}
.t3{right:25%;top:8%}
.t3 svg{left:150px;top:-28px;width:60px;height:36px}

/* ---------- Formel ---------- */
.formula{padding:clamp(110px,12vw,190px) var(--gutter);background:var(--roest);overflow:hidden}
.formula h2{font-size:clamp(2rem,3.2vw,3.2rem);color:var(--orange);margin:0 0 clamp(28px,3vw,44px);transform:rotate(-2.5deg);transform-origin:left}
.eq{display:flex;flex-wrap:wrap;align-items:center;column-gap:clamp(14px,2.2vw,36px);row-gap:.06em;font-size:clamp(3.6rem,8.6vw,9.6rem)}
.eq .op{font-family:"Caveat Brush",cursive;color:var(--orange);font-size:.9em;line-height:.7;transform:translateY(-.04em)}
.eq .res{position:relative;color:var(--roest);-webkit-text-stroke:2px var(--crema)}
.eq .res svg{position:absolute;left:-5%;top:-22%;width:112%;height:140%;overflow:visible;pointer-events:none}
.formula-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(56px,6vw,96px);max-width:1100px}
.formula-copy p{margin:0;font-size:1.06rem;line-height:1.6;color:var(--muted)}
.formula-copy strong{display:block;color:var(--crema);font-weight:650;margin-bottom:6px}

/* ---------- Preise ---------- */
.pricing{background:var(--schaum);color:var(--espresso);padding:clamp(100px,11vw,170px) var(--gutter)}
.pricing h2{font-size:clamp(3rem,7vw,7.4rem);max-width:15ch}
.plans{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(24px,3vw,48px);margin-top:clamp(56px,6vw,96px);align-items:end}
.plan{padding:clamp(28px,3vw,48px)}
.plan h3{margin:0 0 18px;font-size:1.1rem;font-weight:650;letter-spacing:.01em}
.price{font-family:"Big Shoulders Display",sans-serif;font-weight:900;line-height:.85;font-size:clamp(4rem,7vw,7.6rem);margin:0}
.price small{display:inline-block;white-space:nowrap;font-family:system-ui,-apple-system,sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:0;margin-left:10px}
.plan ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:1.06rem;line-height:1.4}
.plan li{padding-top:12px;border-top:1px solid rgba(43,27,18,.16)}
.free{border:1.5px solid rgba(43,27,18,.25);border-radius:6px}
.pro{position:relative;background:var(--roest);color:var(--crema);border-radius:6px;padding-top:clamp(40px,4vw,64px)}
.pro li{border-top-color:rgba(232,214,188,.16)}
.pro .alt{margin:14px 0 0;color:var(--muted)}
.save{position:absolute;right:clamp(20px,3vw,44px);top:clamp(-30px,-2vw,-22px);margin:0;color:var(--orange-dunkel);font-size:clamp(1.7rem,2.4vw,2.4rem);transform:rotate(-6deg);background:var(--schaum);padding:2px 14px 6px;border-radius:4px}
.pricing .fine{margin:28px 0 0;font-size:.95rem;color:var(--muted-hell)}

/* ---------- Finale ---------- */
.finale{padding:clamp(110px,12vw,190px) var(--gutter) clamp(110px,10vw,170px);background:var(--roest)}
.finale h2{font-size:clamp(3.6rem,12.4vw,14rem);color:var(--crema)}
.finale .cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:clamp(40px,4vw,64px)}
.finale .cta p{margin:0;color:var(--muted)}

/* ---------- Footer ---------- */
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:32px clamp(40px,6vw,96px);align-items:start;padding:72px var(--gutter) 40px;background:var(--roest);border-top:1px solid rgba(232,214,188,.14);font-size:.95rem;color:var(--muted)}
.foot-brand img{display:block;height:26px;width:auto}
.foot-brand p{margin:16px 0 0}
.foot-nav ul{list-style:none;margin:-10px 0 0;padding:0;display:flex;flex-direction:column}
.foot a{display:inline-block;padding:10px 0;text-decoration:none;color:var(--crema)}
.foot a:hover,.foot a[aria-current="page"]{color:var(--orange)}
.foot-mail{margin-top:-10px}
.foot-copy{grid-column:1/-1;margin:24px 0 0;padding-top:24px;border-top:1px solid rgba(232,214,188,.1);font-size:.85rem}

/* ---------- Unterseiten ---------- */
.page-head{position:relative;overflow:hidden;padding:0 0 clamp(72px,9vw,140px)}
.page-head .head-inner{padding:clamp(48px,8vw,120px) var(--gutter) 0}
.page-head h1{font-size:clamp(3.2rem,8.6vw,9rem);max-width:13ch;color:var(--crema)}
.page-head .lede{max-width:46ch;margin:clamp(28px,3vw,40px) 0 0;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;color:var(--muted)}
.page-head .ghost{position:absolute;right:-.04em;bottom:-.14em;font-size:clamp(8rem,24vw,26rem);color:transparent;-webkit-text-stroke:1.5px rgba(232,214,188,.12);pointer-events:none;user-select:none}
.page-body{background:var(--schaum);color:var(--espresso);padding:clamp(72px,9vw,140px) var(--gutter)}
.page-body a{color:var(--orange-dunkel)}
.page-body a:hover{color:var(--espresso)}
.prose{max-width:68ch;font-size:1.06rem;line-height:1.65}
.prose h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.5rem);line-height:.95;margin:clamp(48px,5vw,72px) 0 16px;scroll-margin-top:32px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 18px}
.prose strong{font-weight:650}
.prose .stand{margin-top:48px;color:var(--muted-hell);font-size:.95rem}
.address{font-style:normal;font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;margin:0 0 40px}
.address strong{font-weight:900}

.mail-big{position:relative;display:inline-block;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:clamp(2.6rem,8vw,8rem);line-height:.9;text-decoration:none;color:var(--espresso)!important;padding-bottom:.18em;word-break:break-word}
.mail-big svg{position:absolute;left:0;bottom:0;width:100%;height:.22em;overflow:visible}
.mail-big path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease-write)}
.mail-big:hover path,.mail-big:focus-visible path{stroke-dashoffset:0}
.mail-note{margin:18px 0 0;font-size:1.06rem;color:var(--muted-hell)}

.legal-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(32px,5vw,96px);align-items:start}
.toc{position:sticky;top:32px}
.toc p{margin:0 0 12px;font-family:"Caveat Brush",cursive;font-size:1.8rem;color:var(--orange-dunkel);transform:rotate(-3deg);transform-origin:left}
.toc ol{margin:0;padding:0 0 0 1.4em;font-size:.95rem;line-height:1.4}
.toc li{padding:5px 0}
.toc a{text-decoration:none;color:var(--espresso)!important}
.toc a:hover{color:var(--orange-dunkel)!important}

.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,80px) clamp(32px,5vw,96px);margin-top:clamp(72px,8vw,120px);max-width:1180px}
.help-grid h2{margin-top:0}

/* ---------- Animation: Grundzustand ---------- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translateY(90px) rotate(2deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes write{to{clip-path:inset(-20% -5% -20% 0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sheen{to{background-position:-60% 0}}

/* Scroll-Reveals: nur mit JS, sonst ist alles sofort sichtbar */
.mask{display:block;clip-path:inset(0 -100vw);padding:.2em 0 .08em;margin:-.2em 0 -.08em}
.mask>span{display:block}
.js [data-reveal] .mask>span{transform:translateY(108%);transition:transform 1s var(--ease-out)}
.js [data-reveal].is-in .mask>span{transform:none}
.js [data-reveal] .mask:nth-child(2)>span{transition-delay:.12s}
.js [data-reveal] .mask:nth-child(3)>span{transition-delay:.24s}

.js [data-reveal] .w{clip-path:inset(-25% 100% -25% 0);transition:clip-path 1.1s var(--ease-write)}
.js [data-reveal].is-in .w{clip-path:inset(-25% -5% -25% 0)}

.js [data-reveal] .draw path,.js [data-reveal] .draw ellipse{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-write)}
.js [data-reveal].is-in .draw path,.js [data-reveal].is-in .draw ellipse{stroke-dashoffset:0}

.js [data-reveal] .fade{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-reveal].is-in .fade{opacity:1;transform:none}

/* Problem */
.js .problem .scribble .w{transition-delay:.5s}
.js .problem .scribble .draw path{transition-delay:1.3s}
.js .problem .lead.fade{transition-delay:.3s}

/* Schritte */
.js .steps li:nth-child(1) .n{transition-delay:.1s}
.js .steps li:nth-child(1) .mask>span{transition-delay:.2s}
.js .steps li:nth-child(2) .n{transition-delay:.5s}
.js .steps li:nth-child(2) .mask>span{transition-delay:.6s}
.js .steps li:nth-child(3) .n{transition-delay:.9s}
.js .steps li:nth-child(3) .mask>span{transition-delay:1s}
.js .how-text .fade{transition-delay:1.3s}
.js .photo .tag{opacity:0;transform:rotate(-5deg) translateY(10px) scale(.92);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .photo.is-in .tag{opacity:1;transform:rotate(-5deg)}
.js .photo .t3,.js .photo .t3 path{transition-delay:.4s}
.js .photo .t1,.js .photo .t1 path{transition-delay:.8s}
.js .photo .t2,.js .photo .t2 path{transition-delay:1.2s}

/* Formel: die Gleichung baut sich auf und die Lösung wird eingekreist */
.js .eq>span{opacity:0;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.js .eq .a{transform:translateX(-60px)}
.js .eq .b{transform:translateX(60px);transition-delay:.45s}
.js .eq .op{clip-path:inset(-30% 100% -30% 0);opacity:1;transition:clip-path .6s var(--ease-write)}
.js .eq .op1{transition-delay:.3s}
.js .eq .op2{transition-delay:.8s}
.js .eq .res{transform:scale(.86);transition-delay:1.05s}
.js .eq.is-in>span{opacity:1;transform:none}
.js .eq.is-in .op{clip-path:inset(-30% -10% -30% 0);transform:translateY(-.04em)}
.js .eq .res ellipse{transition-delay:1.6s;transition-duration:1.2s}
.js .formula-copy .fade:nth-child(2){transition-delay:.12s}
.js .formula-copy .fade:nth-child(3){transition-delay:.24s}

/* Preise */
.js .plans .fade:nth-child(2){transition-delay:.15s}
.js .save{opacity:0;transform:rotate(-16deg) scale(1.6);transition:opacity .25s ease .75s,transform .5s cubic-bezier(.3,1.6,.5,1) .75s}
.js .plans.is-in .save{opacity:1;transform:rotate(-6deg) scale(1)}

/* Finale */
.js .finale .cta.fade{transition-delay:.45s}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .hero{min-height:0;padding-bottom:72px;display:flex;flex-direction:column;align-items:center}
  .giant-wrap{position:relative;top:auto;left:auto;right:auto;margin-top:20px;align-self:stretch}
  .giant{font-size:21.5vw}
  .stage{position:relative;left:auto;top:auto;transform:none;margin-top:-7vw;width:clamp(230px,44vw,330px)}
  .intro{position:relative;left:auto;bottom:auto;max-width:560px;margin:56px var(--gutter) 0;align-self:stretch}
  .note{display:none}
  .s1{right:auto;left:-30%;top:7%}
  .s2{left:38%;top:73%}
  .s3{display:none}
  .how{grid-template-columns:minmax(0,1fr)}
  .photo{order:-1;min-height:0;aspect-ratio:4/3}
  .formula-copy{grid-template-columns:minmax(0,1fr);max-width:560px}
  .plans{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .pro{margin-top:24px}
  .legal-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
}
@media (max-width:760px){
  .help-grid{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:640px){
  .nav-links{display:none}
  .scribble{position:relative;right:auto;top:auto;display:block;margin-top:18px}
  .scribble svg{display:none}
  .problem .lead{margin-left:0}
  .t3{display:none}
  .eq .res{-webkit-text-stroke:1.5px var(--crema)}
}
@media (hover:none){.tilt-in{transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .s,.w,.eq .op{clip-path:none!important}
  .note path,.draw path,.draw ellipse{stroke-dashoffset:0!important}
  .js [data-reveal] .mask>span,.js [data-reveal] .fade,.js .eq>span,.js .photo .tag,.js .save{opacity:1!important;transform:none!important}
  .js .save{transform:rotate(-6deg)!important}
  .js .photo .tag{transform:rotate(-5deg)!important}
  .mail-big path{stroke-dashoffset:0}
  .photo img{transform:none}
  .tilt-in,.stage-par,.giant-wrap{transform:none!important}
}