/* ck komplett – Samurai-Entwurf: Tusche, Zinnober, Washi */
:root{
  --ink:#f3eee4; --black:#0b0a0e; --night:#13111a; --mute:#aaa5b2; --dim:#8a8593;
  --acc:#d3202a; --acc-hi:#ff5e55; --acc-deep:#9d1119;
  --washi:#eee6d4; --washi2:#f6f1e5; --sumi:#17151c; --gray:#5d5865; --line:#d9cfb9; --dline:#2b2833;
  --light:#eee6d4; --white:#f6f1e5; --dark:#17151c;
  --ease:cubic-bezier(.16,1,.3,1);
  --brush:'Permanent Marker','Hanken Grotesk',sans-serif; --kanji:'Yuji Boku','Hiragino Mincho ProN','Yu Mincho',serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
::selection{background:var(--acc);color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc-hi);outline-offset:3px;border-radius:6px}

/* Navigation */
nav{position:fixed;inset:0 0 auto;z-index:30;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc(50% - 600px));background:linear-gradient(180deg,rgba(11,10,14,.92),rgba(11,10,14,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px;letter-spacing:.04em;border-bottom:1px solid rgba(211,32,42,.18)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand b{font-size:17px;font-weight:800;letter-spacing:-.01em}
nav ul{display:flex;gap:34px;list-style:none;padding:0;color:#cfcad6;text-transform:uppercase;font-size:12px;letter-spacing:.14em}
nav ul a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
nav ul a:hover,nav a[aria-current]{color:#fff;border-color:var(--acc)}
.hanko{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--acc);color:#fff;font:normal 20px/1 var(--kanji);transform:rotate(-4deg);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}

/* Buttons: runde Tinten-Pille, keine Ecken */
.pill{display:inline-flex;align-items:center;gap:.45em;background:var(--acc);color:#fff;border-radius:980px;padding:.78em 1.5em;font-weight:700;text-decoration:none;font-size:16px;border:0;cursor:pointer;font-family:inherit;letter-spacing:.01em;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 10px 30px -12px rgba(211,32,42,.8)}
.pill:hover{background:#e6303a}.pill:active{transform:scale(.97)}
.pill.sm{font-size:12.5px;padding:.55em 1.15em;box-shadow:none;letter-spacing:.06em;text-transform:uppercase}
.pill.inv{background:var(--black);color:#fff;box-shadow:none}.pill.inv:hover{background:#26232d}
.pill[disabled]{opacity:.55;cursor:wait}
.more{color:var(--ink);text-decoration:none;font-size:16px;border-bottom:1px solid var(--acc);padding-bottom:2px}.more:hover{color:#fff;border-color:#fff}
.eyebrow{display:block;color:var(--acc-hi);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.vert{position:absolute;writing-mode:vertical-rl;font:normal clamp(5rem,14vw,12rem)/1 var(--kanji);color:rgba(211,32,42,.14);pointer-events:none;user-select:none}

/* ---------- Hero ---------- */
@font-face{font-family:'Sedgwick Ave Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sedgwickavedisplay.ttf) format('truetype')}
@font-face{font-family:'Knewave';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/knewave.ttf) format('truetype')}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{--mx:0;--my:0;--sy:0;position:relative;isolation:isolate;height:max(100svh,720px);overflow:hidden;background:
  radial-gradient(55% 45% at 50% 100%,rgba(232,40,58,.75),rgba(150,18,36,.35) 45%,transparent 75%),
  radial-gradient(80% 70% at 0% 0%,rgba(46,52,110,.55),transparent 60%),
  radial-gradient(70% 60% at 100% 10%,rgba(40,30,80,.45),transparent 65%),
  linear-gradient(170deg,#0d0f22 0%,#181430 30%,#2b1230 60%,#5a1426 85%,#7a1728 100%)}
.layer{position:absolute;inset:0;pointer-events:none;transform:translate3d(calc(var(--mx)*var(--d,0)*1px),calc(var(--my)*var(--d,0)*1px + var(--sy)*var(--d,0)*.04px),0);will-change:transform}
.layer[data-d="-6"]{--d:-6}.layer[data-d="10"]{--d:10}.layer[data-d="16"]{--d:16}.layer[data-d="24"]{--d:24}.layer[data-d="38"]{--d:38}
.haze{position:absolute;left:50%;top:58%;width:min(70vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,70,80,.38),rgba(200,30,50,.16) 45%,transparent 70%);filter:blur(10px)}
.sw{position:absolute;display:block;background:#2b3270;-webkit-mask:url(/ink/stroke1.webp) center/100% 100% no-repeat;mask:url(/ink/stroke1.webp) center/100% 100% no-repeat;opacity:.55}
.sw1{left:-6%;top:14%;width:62%;aspect-ratio:1400/368;transform:rotate(-14deg)}
.sw2{right:-10%;top:6%;width:58%;aspect-ratio:1400/368;transform:rotate(168deg);-webkit-mask-image:url(/ink/stroke2.webp);mask-image:url(/ink/stroke2.webp);background:#33244f;opacity:.6}
.sw3{left:56%;top:64%;width:52%;aspect-ratio:1400/280;transform:rotate(-8deg);-webkit-mask-image:url(/ink/stroke3.webp);mask-image:url(/ink/stroke3.webp);background:#140c1a;opacity:.5}
.wm{display:flex;justify-content:center;align-items:flex-start;padding-top:calc(62px + 9svh)}
.mark{width:min(1180px,86vw,calc((100svh - 200px)*1.95));height:auto;overflow:visible;-webkit-mask:url(/ink/dry.svg) center/100% 100% no-repeat;mask:url(/ink/dry.svg) center/100% 100% no-repeat;filter:drop-shadow(0 18px 40px rgba(60,0,20,.45))}
.mark text{font-family:var(--wm-font,'Sedgwick Ave Display');font-size:300px;letter-spacing:-4px}
.mark .t1{font-size:300px}
.mark .t2{font-size:330px}
.figure{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(640px,88vw,calc((100svh - 70px)*.684));aspect-ratio:1100/1609;filter:drop-shadow(0 0 1.2px rgba(255,70,90,.8)) drop-shadow(0 0 22px rgba(255,40,60,.35)) drop-shadow(0 -10px 70px rgba(255,40,60,.3))}
.samurai{display:block;width:100%;height:auto;-webkit-mask:linear-gradient(180deg,#000 70%,transparent 98%);mask:linear-gradient(180deg,#000 70%,transparent 98%)}
.visor{position:absolute;left:39%;top:19.4%;width:22%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,60,70,.65),transparent);mix-blend-mode:screen;animation:visor 5.5s ease-in-out infinite}
@keyframes visor{0%,100%{opacity:.55}50%{opacity:1}}
.sp{position:absolute;display:block;opacity:.95}
.sp1{left:calc(50% - 360px);top:16%;width:300px;transform:rotate(-20deg)}
.sp2{left:calc(50% + 150px);top:10%;width:320px;transform:rotate(12deg);opacity:1}
.sp3{left:calc(50% + 210px);top:46%;width:240px;transform:rotate(40deg)}
.sp4{left:calc(50% - 400px);top:62%;width:180px;transform:rotate(200deg);opacity:1}
.slash{position:absolute;display:block;background:#ff3b4e;-webkit-mask:url(/ink/stroke3.webp) center/100% 100% no-repeat;mask:url(/ink/stroke3.webp) center/100% 100% no-repeat}
.s1{right:-2%;top:38%;width:160px;aspect-ratio:1400/280;transform:rotate(-24deg)}
.s2{left:3%;top:47%;width:120px;aspect-ratio:1400/280;transform:rotate(14deg);background:#ff5e6c;opacity:.85}
.petals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.fog{position:absolute;left:0;right:0;bottom:0;height:40%;background:radial-gradient(30% 70% at 50% 100%,rgba(255,50,70,.28),transparent 70%),linear-gradient(180deg,transparent,rgba(30,6,14,.5) 55%,rgba(14,6,12,.9));pointer-events:none}
.hero .vert{right:max(14px,3vw);top:96px;z-index:0;color:rgba(255,255,255,.05);font-size:clamp(4rem,9vw,8rem)}
.hero-copy,.stats,.round{z-index:3}
.hero-copy{position:absolute;right:max(24px,calc(50% - 640px));bottom:clamp(30px,6vh,64px);max-width:330px;text-align:left}
.hero-copy .hq{font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.word{display:inline-block;color:#ff6b72;min-width:1ch}
.word.swap{animation:swap .6s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(.25em);filter:blur(10px)}}
.hero-copy .a{color:#d8d0dc;margin-top:8px;font-size:15px}.hero-copy .a b{color:#fff}
.hero-copy .ctas{display:flex;gap:20px;align-items:center;margin-top:20px;flex-wrap:wrap}
.stats{position:absolute;left:max(24px,calc(50% - 640px));bottom:clamp(30px,6vh,64px);display:flex;gap:clamp(22px,3vw,48px)}
.stats dt{font:800 clamp(2.6rem,4.4vw,3.8rem)/1 'Hanken Grotesk',sans-serif;letter-spacing:-.03em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.stats dt::after{content:"";display:block;width:34px;height:3px;margin:12px 0 0;background:var(--acc-hi);border-radius:2px}
.stats dd{margin:10px 0 0;color:#cfc6d2;font-size:13px;max-width:10em;line-height:1.35}
.round{position:absolute;right:max(16px,calc(50% - 700px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.rb{width:50px;height:50px;display:grid;place-items:center;color:#1a0d14;background:#fff;-webkit-mask:url(/ink/round.svg) center/100% 100%;mask:url(/ink/round.svg) center/100% 100%;transition:transform .3s var(--ease),background .2s}
.rb:hover{transform:scale(1.08) rotate(-6deg);background:#ffd5d8}
.rb svg{width:20px;height:20px;fill:currentColor}

/* ---------- Arbeit ---------- */
.work{background:linear-gradient(180deg,#2a0f17 0,var(--black) 160px);padding:clamp(80px,9vw,120px) 0 clamp(70px,8vw,100px);text-align:center;position:relative;overflow-x:clip}
.sec-head{padding:0 20px;margin-bottom:34px}
.sec-head h2,.card h2,.ask h2,.price h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.reel{position:relative;height:clamp(320px,46vh,480px);margin-top:10px;touch-action:pan-y;user-select:none}
.tile{position:absolute;left:50%;top:0;height:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111;cursor:pointer;
  transform:translateX(calc(-50% + var(--x,0px))) scale(var(--s,1));opacity:var(--o,1);z-index:var(--z,1);
  transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s var(--ease);filter:saturate(var(--sat,1)) brightness(var(--br,1));outline:1px solid rgba(255,255,255,.08)}
.tile video,.tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tile.contain{background:#f4f1ea}.tile.contain img{object-fit:contain;padding:14px}
.tile.active{box-shadow:0 0 0 2px var(--acc),0 30px 70px -20px rgba(211,32,42,.55);cursor:default;outline:none}
.caption{margin-top:20px;min-height:3.2em;padding:0 20px}
.caption strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em}
.caption span{color:var(--mute);font-size:15px}
.caption.swap{animation:swap .6s var(--ease)}
.ctrl{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:22px}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid #3a3642;background:transparent;color:#f3eee4;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.arrow:hover{background:var(--acc);border-color:var(--acc)}
.arrow svg{width:18px;height:18px}
.dots{display:flex;gap:8px}
.dots i{width:7px;height:7px;border-radius:99px;background:#3a3642;transition:width .4s var(--ease),background .4s}
.dots i.on{width:26px;background:var(--acc)}

/* ---------- Stimme (Washi) ---------- */
.voice{position:relative;overflow:hidden;background:var(--washi);color:var(--sumi);padding:clamp(100px,13vw,170px) 20px;border-top:6px solid var(--acc)}
.voice .vert{right:max(8px,calc(50% - 640px));top:30px;color:rgba(211,32,42,.13)}
.voice p{position:relative;max-width:980px;margin:0 auto;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.13;letter-spacing:-.035em;font-weight:700}
.voice p span{color:#a59f93;transition:color .5s}
.voice p span.lit{color:var(--sumi)}
.sign{position:relative;max-width:980px;margin:48px auto 0;display:flex;gap:40px;align-items:center;flex-wrap:wrap;color:var(--gray);font-size:17px}
.sign b{color:var(--sumi);font-weight:700}
.sign a{color:var(--acc);font-weight:800;text-decoration:none;font-size:22px;letter-spacing:-.01em}

/* ---------- Karte ---------- */
.card{position:relative;background:var(--black);text-align:center}
.card .sticky{display:flex;flex-direction:column;align-items:center;padding:clamp(80px,10vw,130px) 20px;text-align:center}
.card h2{font-size:clamp(2.6rem,6vw,5.4rem)}
.card .sticky>p{color:var(--mute);font-size:clamp(1.1rem,1.5vw,1.4rem);margin-top:14px}
canvas{width:min(520px,92vw);aspect-ratio:3/2;cursor:grab;touch-action:pan-y}
.says{display:flex;justify-content:center;flex-wrap:wrap;gap:28px min(6vw,72px);margin-top:24px}
.says div{max-width:16rem;border-top:1px solid var(--acc);padding-top:14px}
.says b{display:block;font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.02em}
.says span{color:var(--mute);font-size:15px}

/* ---------- Anfrage ---------- */
.ask{background:var(--washi2);color:var(--sumi);padding:clamp(100px,12vw,160px) 20px}
.ask .in{max-width:900px;margin:0 auto}
.ask .eyebrow,.price .eyebrow{color:var(--acc)}
.ask h2{text-align:center}.ask .eyebrow{text-align:center}
.ask h2 em{font-style:normal;color:var(--gray)}
.box{margin-top:48px;border:2px solid var(--sumi);border-radius:18px;background:#fbf8ef;box-shadow:10px 10px 0 var(--acc);overflow:hidden;text-align:left}
.q{display:flex;align-items:center;gap:.35em;padding:22px 26px;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.03em;border-bottom:1px solid var(--line);font-weight:700}
.q label{color:var(--gray);white-space:nowrap;font-weight:500}
.q input{flex:1;min-width:0;border:0;outline:0;font:inherit;color:var(--sumi);background:transparent;letter-spacing:inherit;caret-color:var(--acc)}
.q input::placeholder{color:#bdb5a4}
.res{list-style:none;padding:10px;min-height:234px;margin:0}
.res li{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:15px 18px;border-radius:10px;animation:rise .45s var(--ease) both}
.res li:first-child{background:var(--washi)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.res strong{font-weight:700;font-size:17px;display:block}
.res small{color:var(--gray);font-size:14px}
.tag{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:99px;background:#f6d9d6;color:#8c1018;white-space:nowrap}
.tag.v{background:#e7e0cf;color:#3b362d}
.send{display:flex;gap:12px;padding:16px;border-top:1px solid var(--line);background:var(--washi);flex-wrap:wrap}
.send input{flex:1 1 200px;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font:500 16px 'Hanken Grotesk';color:var(--sumi);background:#fff}
.send input:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}

/* ---------- Preise ---------- */
.price{background:var(--night);padding:clamp(100px,12vw,160px) 20px;text-align:center;background-image:radial-gradient(60% 40% at 50% 0,rgba(211,32,42,.18),transparent 70%)}
.price .eyebrow{color:var(--acc-hi)}
.price h2 em{font-style:normal;color:var(--mute)}
.fan{max-width:640px;margin:44px auto 0;background:#000;border-radius:24px;overflow:hidden;padding:16px 14px 2px;border:1px solid var(--dline)}
.fan img{width:100%;display:block}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);max-width:1080px;margin:56px auto 0;border-top:1px solid var(--dline);border-bottom:1px solid var(--dline)}
.tiers>div{position:relative;padding:34px 22px 40px;text-align:left;overflow:hidden}
.tiers>div+div{border-left:1px solid var(--dline)}
.tiers .num{position:absolute;right:14px;top:6px;font:normal 6.5rem/1 var(--kanji);color:rgba(211,32,42,.2)}
.tiers h3{font-size:28px;letter-spacing:-.03em;position:relative}
.tiers p{color:var(--mute);margin-top:6px;position:relative}
.tiers strong{display:block;font:800 46px/1 "Hanken Grotesk",sans-serif;letter-spacing:-.04em;margin-top:20px;position:relative}
.tiers small{color:var(--mute);display:block;position:relative}
.tiers .pill{margin-top:22px;font-size:15px;position:relative}
.fine{color:var(--mute);font-size:14px;margin-top:40px}.fine a{color:var(--acc-hi)}

/* ---------- Schluss ---------- */
.end{position:relative;overflow:hidden;background:var(--acc);color:#fff;text-align:center;padding:clamp(110px,14vw,180px) 20px;background-image:radial-gradient(circle at 50% 120%,#7f0c13 0,transparent 60%)}
.end .vert{left:50%;top:50%;transform:translate(-50%,-50%);font-size:min(46vw,26rem);color:rgba(0,0,0,.14);writing-mode:horizontal-tb}
.end h2.brush{position:relative;top:auto;z-index:1;font-size:clamp(2.8rem,8.5vw,7rem);line-height:.95;max-width:1000px;margin:0 auto;background:none;-webkit-text-fill-color:#fff;color:#fff;text-wrap:balance}
.end p{position:relative;font-size:clamp(1.1rem,1.5vw,1.4rem);margin-top:26px;color:#ffe7e3}
.end .ctas{position:relative;display:flex;gap:28px;justify-content:center;align-items:center;margin-top:38px;flex-wrap:wrap}
.end .ctas a.tel{color:#fff;font-size:24px;font-weight:800;text-decoration:none;letter-spacing:-.01em;border-bottom:2px solid rgba(255,255,255,.5)}
footer{background:var(--black);border-top:1px solid #1d1b22;padding:22px max(20px,calc(50% - 600px));color:var(--dim);font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* Hero-Auftritt */
@media (prefers-reduced-motion:no-preference){
  .mark{animation:wmIn 1.6s var(--ease) .1s both}
  .samurai{animation:samIn 1.8s var(--ease) both}
  .visor{animation:visorOn 1.6s steps(1) .9s both,visor 5.5s ease-in-out 2.5s infinite}
  .sp{animation:spIn .9s var(--ease) both}.sp1{animation-delay:.7s}.sp2{animation-delay:.85s}.sp3{animation-delay:1s}.sp4{animation-delay:1.1s}
  .hero-copy,.stats,.round{animation:upIn 1.2s var(--ease) .9s both}
}
@keyframes wmIn{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-30px)}to{opacity:1;clip-path:inset(0 -5% 0 0);transform:none}}
@keyframes samIn{from{opacity:0;transform:translateY(60px) scale(1.04);filter:brightness(.2)}to{opacity:1;transform:none;filter:none}}
@keyframes visorOn{0%{opacity:0}30%{opacity:.9}36%{opacity:.1}44%{opacity:1}50%{opacity:.3}60%,100%{opacity:.8}}
@keyframes spIn{from{opacity:0;transform:scale(.4) rotate(-30deg)}}
@keyframes upIn{from{opacity:0;transform:translateY(24px)}}
.round{animation-name:none}

/* ---------- Polish: Korn, Trenner, Einblenden ---------- */
section{overflow-x:clip}
body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;background:url(/ink/grain.png);opacity:.09;mix-blend-mode:overlay;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
html.js [data-rv]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.js [data-rv].in{opacity:1;transform:none}
.hk{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:6px;background:var(--acc);color:#fff;font:normal 16px/1 var(--kanji);vertical-align:-7px;transform:rotate(-5deg);letter-spacing:0}
.eyebrow{letter-spacing:.24em}
.ul{position:relative;white-space:nowrap;display:inline-block}
.ul::after{content:"";position:absolute;left:-4%;right:-6%;bottom:-.16em;height:.32em;background:var(--acc);-webkit-mask:url(/ink/stroke2.webp) center/100% 100% no-repeat;mask:url(/ink/stroke2.webp) center/100% 100% no-repeat;z-index:-1}
.edge{position:absolute;left:0;right:0;top:-1px;height:clamp(34px,5vw,70px);pointer-events:none;z-index:1;-webkit-mask:url(/ink/edge1.svg) center/100% 100% no-repeat;mask:url(/ink/edge1.svg) center/100% 100% no-repeat}

/* Arbeit */
.work{background:radial-gradient(60% 50% at 50% 0,rgba(122,23,40,.55),transparent 70%),var(--black);isolation:isolate}
.work::before{content:"";position:absolute;inset:0 0 auto;height:420px;background:url(/ink/sei-dark.svg);background-size:56px 28px;-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.7),transparent);mask:linear-gradient(180deg,rgba(0,0,0,.7),transparent);z-index:-1;opacity:.55}
.work .vert{left:max(10px,calc(50% - 700px));top:60px;color:rgba(255,255,255,.035)}
.sec-head h2{position:relative;z-index:0}

/* Stimme */
.voice{border-top:0;background:url(/ink/washi.svg),var(--washi);padding-top:clamp(130px,15vw,200px)}
.voice .edge{background:var(--black)}
.vsplat{position:absolute;left:-60px;bottom:-80px;width:360px;opacity:.14;pointer-events:none}
.seal{display:inline-grid;place-items:center;width:64px;height:64px;border:3px solid var(--acc);color:var(--acc);border-radius:10px;font:normal 22px/1 var(--kanji);writing-mode:vertical-rl;transform:rotate(-6deg);opacity:.9}
.sign a{position:relative;z-index:0}
.sign a::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-.1em;height:.5em;background:rgba(211,32,42,.18);-webkit-mask:url(/ink/stroke1.webp) center/100% 100% no-repeat;mask:url(/ink/stroke1.webp) center/100% 100% no-repeat;z-index:-1}

/* Karte */
.card{overflow:hidden;isolation:isolate}
.card .edge{background:var(--washi);-webkit-mask-image:url(/ink/edge2.svg);mask-image:url(/ink/edge2.svg)}
.card .sticky{position:relative}
.card h2{position:relative}
.says div{border-top:0;padding-top:18px;position:relative}
.says div::before{content:"";position:absolute;left:0;top:0;width:70%;height:6px;background:var(--acc);-webkit-mask:url(/ink/stroke3.webp) left/100% 100% no-repeat;mask:url(/ink/stroke3.webp) left/100% 100% no-repeat}
.says{margin-top:40px}

/* Anfrage */
.ask{position:relative;background:url(/ink/washi.svg),var(--washi2);padding-top:clamp(130px,15vw,200px)}
.ask .edge{background:var(--black)}
.boxwrap{position:relative;margin-top:48px}
.bstroke{position:absolute;left:-7%;right:-7%;top:12%;bottom:-6%;background:var(--acc);-webkit-mask:url(/ink/stroke1.webp) center/100% 100% no-repeat;mask:url(/ink/stroke1.webp) center/100% 100% no-repeat;transform:rotate(-3deg);opacity:.95}
.box{position:relative;margin-top:0;box-shadow:0 30px 60px -30px rgba(40,10,10,.5);border-width:1.5px}

/* Preise */
.price{position:relative;background:#0b0a0e;background-image:radial-gradient(60% 40% at 50% 0,rgba(211,32,42,.22),transparent 70%);isolation:isolate;padding-top:clamp(130px,15vw,200px)}
.price .edge{background:var(--washi2)}
.price .sei{position:absolute;inset:auto 0 0;height:360px;background:url(/ink/sei-dark.svg);background-size:56px 28px;-webkit-mask:linear-gradient(0deg,rgba(0,0,0,.6),transparent);mask:linear-gradient(0deg,rgba(0,0,0,.6),transparent);z-index:-1;opacity:.6}
.fan{background:transparent;border:0;padding:0;border-radius:0;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.tiers{border:0;gap:18px}
.tiers>div{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));border:1px solid #23202a;border-radius:18px;padding:36px 28px 38px;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.tiers>div+div{border-left:1px solid #23202a}
.tiers>div:hover{transform:translateY(-6px);border-color:rgba(211,32,42,.55);box-shadow:0 30px 60px -30px rgba(211,32,42,.45)}
.tiers>div::before{content:"";position:absolute;left:22px;top:0;width:90px;height:8px;background:var(--acc);-webkit-mask:url(/ink/stroke3.webp) left/100% 100% no-repeat;mask:url(/ink/stroke3.webp) left/100% 100% no-repeat}
.tiers .num{font-size:7.5rem;right:18px;top:14px;color:rgba(211,32,42,.28)}
.tiers strong{font-size:50px}
html.js .tiers[data-rv]>div{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease),border-color .3s,box-shadow .5s}
html.js .tiers[data-rv]{opacity:1;transform:none}
html.js .tiers.in>div{opacity:1;transform:none}
.tiers.in>div:nth-child(2){transition-delay:.12s}.tiers.in>div:nth-child(3){transition-delay:.24s}

/* Schluss */
.end{isolation:isolate;background:radial-gradient(70% 80% at 50% 120%,#5e0910 0,transparent 70%),#c81d27;padding-top:clamp(140px,16vw,220px)}
.end .edge{background:#0b0a0e}
.end .sei{position:absolute;inset:0;background:url(/ink/sei-red.svg);background-size:64px 32px;-webkit-mask:radial-gradient(70% 70% at 50% 50%,transparent 30%,#000);mask:radial-gradient(70% 70% at 50% 50%,transparent 30%,#000);z-index:-1;opacity:.7}
.end .vert{z-index:-1}
.esplat{position:absolute;pointer-events:none;opacity:.5;z-index:-1}
.esplat.e1{left:-80px;top:22%;width:380px}.esplat.e2{right:-40px;bottom:-30px;width:420px;transform:rotate(160deg)}
.end h2.brush{font-family:'Sedgwick Ave Display','Permanent Marker',sans-serif;font-weight:400;font-size:clamp(3.2rem,9vw,8rem);letter-spacing:0;line-height:.98;transform:rotate(-2deg);text-shadow:0 8px 40px rgba(80,0,10,.35);filter:url(#rough)}
.end .pill.inv{background:#0b0a0e}
footer{position:relative}

@media (max-width:860px){
  .hero{height:auto;min-height:0;padding-bottom:34px;--stage:calc(62px + 150vw)}
  .hero .layer,.petals{bottom:auto;height:var(--stage)}
  .hero .layer{overflow:hidden}
  .samurai{-webkit-mask:linear-gradient(180deg,#000 55%,transparent 86%);mask:linear-gradient(180deg,#000 55%,transparent 86%)}
  .wm{padding-top:calc(62px + 8vw)}
  .mark{width:98vw}
  .figure{width:104vw;bottom:auto;top:calc(62px + 30vw)}
  .hero{background:radial-gradient(90% 50% at 50% 62%,rgba(232,40,58,.6),rgba(150,18,36,.3) 45%,transparent 75%),radial-gradient(80% 40% at 0% 0%,rgba(46,52,110,.55),transparent 60%),linear-gradient(180deg,#0d0f22 0%,#1d1434 25%,#3a1230 55%,#1a0a14 80%,#0f0710 100%)}
  .haze{top:calc(62px + 70vw);width:130vw}
  .sw1{width:120%;top:8%;left:-20%}.sw2{width:110%;top:30%;right:-30%}.sw3{display:none}
  .sp1{left:-14vw;top:calc(62px + 30vw);width:44vw}.sp2{left:66vw;top:calc(62px + 2vw);width:40vw}
  .sp3{left:70vw;top:calc(62px + 80vw);width:36vw}.sp4{left:-6vw;top:calc(62px + 104vw);width:30vw}
  .s1{width:22vw;top:calc(62px + 60vw)}.s2{width:18vw;top:calc(62px + 92vw)}
  .fog{top:calc(var(--stage) - 60vw);bottom:auto;height:60vw;background:linear-gradient(180deg,transparent,rgba(14,6,12,.85) 70%,#0f0710)}
  .hero .vert{display:none}
  .voice .vert{font-size:4.2rem;top:44px;right:6px;opacity:.6}
  .round{top:calc(62px + 64vw);right:12px;transform:none}
  .rb{width:46px;height:46px}
  .hero-copy{position:relative;right:auto;bottom:auto;margin:calc(var(--stage) - 34vw) 20px 0;max-width:none;text-align:center}
  .hero-copy .ctas{justify-content:center}
  .stats{position:relative;left:auto;bottom:auto;justify-content:center;gap:26px;margin:38px 20px 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
  .stats>div{text-align:center}.stats dt::after{margin:10px auto 0}
  .stats dt{font-size:2.6rem}.stats dd{max-width:7.5em;font-size:12.5px;margin-inline:auto}
  nav ul{display:none}
  .tiers{grid-template-columns:1fr}.tiers>div+div{border-left:0;border-top:1px solid var(--dline)}
  .says{flex-direction:column;align-items:center}
  .res li{grid-template-columns:1fr}.tag{justify-self:start}.q{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js [data-rv],html.js .tiers[data-rv]>div{opacity:1;transform:none}}

.card canvas{background:radial-gradient(circle at 50% 52%,rgba(200,29,39,.9) 0,rgba(163,18,28,.85) 30%,rgba(120,10,20,.0) 41%)}