/* ladenkit.de, ported from playground/sketches/landing-10.js (round 6, kept). */
*{box-sizing:border-box}
:root{
  --cream:#f5f2e8; --paper:#fbfaf4; --ink:#1e1c1d; --green:#0d5b4b; --green-2:#72aa98;
  --orange:#cf7b47; --orange-2:#f05a00; --yellow:#ffad16; --blue:#bfe7e8; --lav:#8788d2;
  --line:#d9d4c8; --muted:#65625c;
  --serif:"Gelasio",Georgia,"Times New Roman",serif;
  --sans:"Epilogue",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px; --pad:2rem; --max:74rem;
  --e-out:cubic-bezier(.23,1,.32,1);
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
p{margin:0}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.06em;text-wrap:balance}
.serif{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.05em}
.wrap{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.kicker{font:800 .875rem/1.5rem var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:.75rem}
.h2{font-size:clamp(2.5rem,5.4vw,4.25rem);line-height:.95;margin-bottom:1rem}
.intro{color:var(--muted);max-width:38rem;font-size:1.0625rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:8px;padding:.75rem 1.25rem;border:1px solid var(--ink);
  font:700 1rem/1.5rem var(--sans);transition:transform 200ms var(--e-out),background 160ms ease,color 160ms ease;cursor:pointer}
.btn.dark{background:var(--ink);color:#fff}
.btn.orange{background:var(--orange-2);border-color:var(--orange-2);color:var(--ink)}
.btn.ghost{background:transparent}
.btn .arr{display:inline-block;transition:transform 200ms var(--e-out)}
.btn:active{transform:scale(.97)}

/* header */
.nav{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0}
.brand{display:inline-flex;align-items:baseline;font:900 1.625rem/2rem var(--sans);letter-spacing:-.075em;white-space:nowrap}
.brand .serif{color:var(--green);letter-spacing:-.04em;display:inline-block;transition:transform 500ms var(--e-out)}
.brand:hover .serif{transform:rotate(-6deg) translateY(-2px)}
.links{display:none;gap:2rem;font-size:.9375rem;color:#57544f}
.links a{position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 260ms var(--e-out)}
.links a:hover{color:var(--ink)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}

/* 1 Ankommen */
.hero{text-align:center;padding-top:3rem}
.eyebrow{font:800 .875rem/1.5rem var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:1rem}
h1{font-size:3.375rem;line-height:3rem;letter-spacing:-.075em;max-width:62rem;margin:0 auto 1.5rem}
.claim{font-size:1.25rem;line-height:1.75rem;font-weight:700;letter-spacing:-.02em;max-width:34rem;margin:0 auto .5rem;text-wrap:balance}
.hero .sub{color:var(--muted);max-width:34rem;margin:0 auto 1.5rem;font-size:1rem;text-wrap:balance}
/* a sentence stays on one line where it fits, so the break falls between sentences */
.hero .sub .satz{display:inline-block}
.actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.field{position:relative;overflow:hidden;background:var(--orange-2);margin-top:3.5rem;min-height:28rem;--wt:5rem}
.ripple{position:absolute;inset:-20%;background-color:var(--orange-2);
  background-image:repeating-radial-gradient(ellipse at 15% 50%,transparent 0 40px,var(--blue) 42px 64px,transparent 66px 105px);
  opacity:.95}
.ripple.tilt{transform:rotate(-7deg) translate3d(0,var(--py,0px),0)}
.window{position:absolute;left:calc(var(--pad) + 1rem);right:calc(var(--pad) + 1rem);top:var(--wt);max-width:56rem;margin-inline:auto;background:#f3f1e8;border:5px solid var(--ink);border-radius:15px;
  box-shadow:0 18px 0 rgba(0,0,0,.12);overflow:hidden;text-align:left}
.bar{height:2.75rem;border-bottom:1px solid #cbc7bc;display:flex;align-items:center;gap:.5rem;padding:0 1rem;background:#fffdf7}
.dot{width:8px;height:8px;border-radius:50%;background:#c6c2b7}
.url{display:none;margin-left:auto;font-size:.875rem;color:#6f6b64}
.wbody{padding:1rem;display:grid;gap:1rem}
.mock{background:#fff;border:1px solid #c9c4b9;border-radius:9px;padding:1rem}
.mock-title{font:800 1.125rem/1.5rem var(--sans);letter-spacing:-.03em;margin-bottom:.5rem;height:1.5rem;overflow:hidden}
.cycle{display:block}
.cycle span{display:block;height:1.5rem}
html:not(.motion) .cycle span:not(:first-child){visibility:hidden}
.mrow{min-height:2.5rem;border-top:1px solid #e5e1d8;display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.875rem}
.tick{flex:none;display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .5rem;border-radius:999px;background:#e3efe8;color:var(--green);font-weight:800;font-size:.875rem}
.mside{display:none;position:relative;min-height:11rem}
.mside .mock{background:#ebe8df}
.blatt{position:absolute;inset:0;display:grid;align-content:start;gap:.75rem;opacity:0}
.blatt .ui{width:100%;box-shadow:0 8px 18px rgba(30,28,29,.10);transform:none}
.blatt .ui .t{font-size:.9375rem}
html:not(.motion) .blatt:not(:first-child){display:none}
html:not(.motion) .blatt:first-child{opacity:1}
.line{height:9px;border-radius:99px;background:#d8d4ca;margin:.5rem 0}
.line.s{width:58%}
.badge{position:absolute;left:calc(var(--pad) - .75rem);top:calc(var(--wt) - 1.5rem);z-index:2;background:#fffdf5;border:2px solid var(--ink);padding:.375rem .75rem;border-radius:9px;max-width:calc(100% - 2 * var(--pad) - 2rem);
  font:800 .875rem/1.5rem var(--sans);transform:rotate(-5deg);box-shadow:5px 5px 0 var(--ink);transition:transform 300ms var(--e-out),box-shadow 300ms var(--e-out)}
.field:hover .badge{transform:rotate(-2deg) translateY(-2px);box-shadow:7px 7px 0 var(--ink)}

/* promises under the hero */
.promises{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem;padding:2rem 0;border-bottom:1px solid var(--line)}
.promise b{display:block;font:900 1.125rem/1.5rem var(--sans);letter-spacing:-.03em}
.promise span{font-size:.9375rem;color:var(--muted)}

section.sec{padding:5rem 0}

/* 2 Für wen: chips that fill with the trade's pattern */
.chips{display:grid;gap:.75rem;margin:2.5rem 0 1.5rem;list-style:none;padding:0}
.chip{position:relative;overflow:hidden;isolation:isolate;padding:1.25rem 1.25rem;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font:800 1.125rem/1.25 var(--sans);letter-spacing:-.02em;min-height:5rem;background:var(--c);color:var(--ink);cursor:default}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pat) 0 0/84px 84px repeat;
  clip-path:circle(0% at calc(100% - 2.75rem) 50%);transition:clip-path 620ms var(--e-out)}
.chip span{position:relative;text-shadow:0 0 2px var(--c),0 0 8px var(--c),0 0 14px var(--c)}
.tile{flex:none;width:2.75rem;height:2.75rem;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;transition:transform 500ms var(--e-out),border-radius 400ms var(--e-out)}
.tile svg{width:1.5rem;height:1.5rem}
.chip:hover::before,.chip:focus-within::before{clip-path:circle(150% at calc(100% - 2.75rem) 50%)}
.chip:hover .tile{transform:rotate(-12deg) scale(1.08);border-radius:50%}
/* each trade's pattern is a tile of four of its own motifs (Phosphor, vendored in _icons.js) */
.t1{--c:var(--blue)}.t2{--c:var(--yellow)}.t3{--c:var(--lav)}.t4{--c:var(--green-2)}.t5{--c:var(--blue)}.t6{--c:#f3b8a0}
.out{color:var(--muted)}

/* 3 Was Ihre Kunden gerade nicht finden */
.gruen{background:var(--green);color:#fff}
.gruen .kicker{color:var(--blue)}
.gruen .intro{color:rgba(255,255,255,.82)}
.fragen{display:grid;gap:.75rem;margin-top:2.5rem}
.frage{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:1.5rem;position:relative}
.frage .q{font:italic 500 1.25rem/1.75rem var(--serif);color:var(--blue);margin-bottom:.5rem}
.frage .a{font:800 1.5rem/2rem var(--sans);letter-spacing:-.04em;position:relative}
.frage .leer{display:none}
html.motion .frage .leer{display:block;position:absolute;left:1.5rem;bottom:1.5rem;font:500 1rem/2rem var(--sans);color:rgba(255,255,255,.6);transition:opacity 300ms ease calc(var(--reveal-delay,0ms) + 500ms)}
html.motion .frage .leer::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--orange-2);transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--e-out) calc(var(--reveal-delay,0ms) + 300ms)}
html.motion .frage .a{clip-path:inset(0 100% 0 0);transition:clip-path 700ms var(--e-out) calc(var(--reveal-delay,0ms) + 700ms)}
html.motion .frage.is-visible .leer{opacity:0}
html.motion .frage.is-visible .leer::after{transform:scaleX(1)}
html.motion .frage.is-visible .a{clip-path:inset(0 0 0 0)}

/* 4 Was die Seite tun soll: the deck */
.stack{display:grid;gap:1rem;margin-top:2.5rem}
.card{position:sticky;top:calc(6rem + var(--i) * .75rem);z-index:var(--i);border-radius:var(--r);padding:1.5rem;overflow:hidden;isolation:isolate;
  display:grid;gap:1.5rem;color:#fff;box-shadow:0 -8px 24px rgba(30,28,29,.08);
  background:radial-gradient(32rem circle at var(--cx) var(--cy),rgba(var(--glow),var(--ga)),transparent 65%),var(--bg);
  --glow:255,255,255;transition:--cx 500ms var(--e-out),--cy 500ms var(--e-out),--ga 400ms ease}
/* the glow: CSS draws it, the pointer only moves it (registered so it eases instead of jumping) */
@property --cx{syntax:"<length-percentage>";inherits:false;initial-value:80%}
@property --cy{syntax:"<length-percentage>";inherits:false;initial-value:15%}
@property --ga{syntax:"<number>";inherits:false;initial-value:.1}
.card:hover{--ga:.2}
.card.base{--bg:var(--paper);--glow:13,91,75;color:var(--ink);border:1px solid var(--ink)}
.card.k1{--bg:#3f4b83}.card.k2{--bg:#2f4860}.card.k3{--bg:#a73d2c}.card.k4{--bg:#5c5eae}
.card h3{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.05em}
.card .zeile{font:italic 500 1.25rem/1.75rem var(--serif);margin-top:.5rem;opacity:.92}
.card ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.5rem}
.card li{padding-left:1.5rem;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.5rem;width:.5rem;height:.5rem;border-radius:2px;background:currentColor;opacity:.6;transform:rotate(45deg)}
.ui{background:var(--paper);color:var(--ink);border-radius:10px;padding:1rem;box-shadow:0 18px 30px rgba(0,0,0,.18);align-self:center;
  transition:transform 500ms var(--e-out)}
.card.base .ui{box-shadow:none;border:1px solid var(--line)}
.card:hover .ui{transform:rotate(-1.5deg) translateY(-4px)}
.ui .t{font:800 1rem/1.5rem var(--sans);letter-spacing:-.02em;margin-bottom:.5rem}
.ui .mrow b{font-weight:700}
.search{border:1px solid #c9c4b9;border-radius:999px;padding:.25rem .75rem;font-size:.875rem;margin-bottom:.75rem;color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.slot{border:1px solid #c9c4b9;border-radius:6px;text-align:center;font-size:.875rem;padding:.25rem 0}
.slot.on{background:var(--green);border-color:var(--green);color:#fff}
.stars{font-size:1.25rem;letter-spacing:.2em;color:var(--orange-2)}
.gutschein{border:2px dashed var(--ink);border-radius:8px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.875rem}
.gutschein b{font:italic 500 1.5rem/2rem var(--serif)}

/* 5 Wie das läuft */
.dunkel{background:var(--ink);color:#f8f5ea}
.dunkel .kicker{color:#7ec7b0}
.dunkel .intro{color:#aaa59d}
.steps{margin-top:3rem}
.step{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem 1.5rem;padding:2.5rem 0;border-top:1px solid #3b393a;align-items:center}
.step:last-child{border-bottom:1px solid #3b393a}
.num{width:2rem;height:2rem;border:1px solid #77736d;border-radius:7px;display:grid;place-items:center;font-size:.875rem;align-self:start;transition:background 240ms ease,color 240ms ease,border-color 240ms ease,transform 400ms var(--e-out)}
.step:hover .num{background:var(--orange-2);border-color:var(--orange-2);color:var(--ink);transform:rotate(-8deg)}
.step h3{font-size:1.75rem;line-height:1;letter-spacing:-.045em}
.dauer{font:italic 500 1.125rem/1.5rem var(--serif);color:#7ec7b0;margin:.25rem 0 .75rem}
.step p.txt{color:#bdb8ae;max-width:24rem}
.ihr{margin-top:.75rem;font-weight:700;color:#fff}
.vis{grid-column:2;min-height:11.5rem;border:1px solid #4a4849;border-radius:10px;padding:1.5rem;background:#242223;position:relative;overflow:hidden}
.vis::before{content:"";position:absolute;inset:-25%;background:repeating-radial-gradient(ellipse at 30% 30%,transparent 0 30px,#2faaa0 32px 47px,transparent 49px 76px);opacity:.5;transform:rotate(-8deg);transition:transform 2.6s cubic-bezier(.4,0,.2,1)}
/* one ripple, three movements: 01 turns, 02 slides against it, 03 opens outward */
.step:nth-child(1) .vis:hover::before{transform:rotate(4deg) scale(1.08);transition-duration:1.4s}
.step:nth-child(2) .vis::before{background:repeating-radial-gradient(ellipse at 75% 65%,transparent 0 30px,#2faaa0 32px 47px,transparent 49px 76px);transform:rotate(6deg)}
.step:nth-child(2) .vis:hover::before{transform:rotate(-4deg) translate(-5%,3%);transition-duration:1.8s}
.step:nth-child(3) .vis::before{background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 30px,#2faaa0 32px 47px,transparent 49px 76px);transform:none}
.step:nth-child(3) .vis:hover::before{transform:scale(1.16) rotate(-2deg);transition-duration:1.1s}
.screen{position:relative;background:#f4f1e5;color:#222;border-radius:9px;padding:1rem;box-shadow:0 10px 20px rgba(0,0,0,.22)}
.screen .mrow:first-of-type{border-top:0}
.wave{display:flex;align-items:center;gap:3px;height:2.5rem;margin-top:.5rem}
.wave i{flex:1;background:var(--green);border-radius:2px;height:var(--h)}
html.motion .step.is-visible .wave i{animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -110ms)}
@keyframes wave{to{transform:scaleY(.35)}}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.75rem}
.boxes div{height:3.5rem;border:1px solid #d3cec2;border-radius:6px;background:#ebe7da}
html.motion .boxes div{transform:scale(.6);opacity:0;transition:transform 500ms var(--e-out),opacity 300ms ease}
html.motion .step.is-visible .boxes div{transform:none;opacity:1}
html.motion .step.is-visible .boxes div:nth-child(2){transition-delay:120ms}
html.motion .step.is-visible .boxes div:nth-child(3){transition-delay:240ms}
html.motion .checks .tick{transform:scale(0);transition:transform 400ms cubic-bezier(.34,1.56,.64,1)}
html.motion .step.is-visible .checks .mrow:nth-child(1) .tick{transform:none;transition-delay:400ms}
html.motion .step.is-visible .checks .mrow:nth-child(2) .tick{transform:none;transition-delay:700ms}
html.motion .step.is-visible .checks .mrow:nth-child(3) .tick{transform:none;transition-delay:1000ms}

/* 6 Arbeiten: the dragged strip */
.phead{display:grid;gap:1rem;margin-bottom:2rem}
.strip-wrap{position:relative}
.strip{display:flex;align-items:flex-start;gap:1rem;padding:.5rem var(--pad) 2rem;scroll-padding-left:var(--pad)}
.strip::-webkit-scrollbar{height:4px}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.shot{flex:none;margin:0;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);transition:transform 300ms var(--e-out),box-shadow 300ms var(--e-out)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 700ms var(--e-out);pointer-events:none}
.shot.hoch{width:13rem}.shot.hoch img{aspect-ratio:390/620}
.shot.quer{width:22rem}.shot.quer img{aspect-ratio:16/9}
.shot:nth-child(4n+2){margin-top:2.5rem}.shot:nth-child(4n+3){margin-top:1rem}.shot:nth-child(4n+4){margin-top:3.5rem}
.label{flex:none;width:15rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);scroll-snap-align:start}
.label .art{height:7rem;background:var(--lc);position:relative;overflow:hidden}
.label .art::before{content:"";position:absolute;inset:14% 10%;border:3px solid var(--ink);border-radius:10px;background:#f6f1e7;transform:rotate(-3deg);transition:transform 500ms var(--e-out)}
.label .art::after{content:"";position:absolute;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--green);left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 8px rgba(255,255,255,.7)}
.label:hover .art::before{transform:rotate(3deg)}
.label .copy{padding:1rem 1.25rem 1.25rem;display:grid;gap:.25rem}
.label h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.03em;font-weight:800}
.label .cat{color:var(--muted)}
.label .kind{font-weight:700;font-size:.875rem;color:var(--green)}
.label .credit{font-size:.875rem;color:var(--muted)}
.label .go{justify-self:start;margin-top:.25rem;font-weight:700;border-bottom:1px solid currentColor}
.label .go:hover{color:var(--green)}
.cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;width:4.5rem;height:4.5rem;margin:-2.25rem 0 0 -2.25rem;border-radius:50%;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;font:800 .875rem/1 var(--sans);transform:translate(var(--mx,0),var(--my,0)) scale(0);transition:transform 260ms var(--e-out)}
.strip-wrap.on .cursor{transform:translate(var(--mx,0),var(--my,0)) scale(1)}
.strip-wrap:has(.is-dragging) .cursor{transform:translate(var(--mx,0),var(--my,0)) scale(.8)}

/* 7 Stimmen */
.qrow{display:grid;gap:.75rem;margin-top:3rem}
.qlabel{background:var(--green);color:#fff;border-radius:var(--r);padding:2rem;font:italic 500 clamp(2.25rem,4vw,3.5rem)/.95 var(--serif);letter-spacing:-.05em;display:flex;align-items:flex-end;min-height:12rem}
.qcard{border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:2rem;display:grid;gap:1.5rem;min-width:0}
.qtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:2rem}
.qtrack::-webkit-scrollbar{display:none}
.qtrack figure{flex:0 0 100%;margin:0;scroll-snap-align:start;display:grid;gap:1.5rem;align-content:space-between}
.qtrack blockquote{margin:0;font:400 clamp(1.5rem,3vw,2.5rem)/1.1 var(--serif);letter-spacing:-.03em}
.qtrack blockquote.lang{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.3}
.qby{display:flex;align-items:center;gap:.75rem;font-weight:800;font-size:.9375rem}
.avatar{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--ink);flex:none}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1rem}
.qnav .n{color:var(--muted);font-size:.9375rem}
.qnav button{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--ink);background:transparent;cursor:pointer;transition:background 160ms ease,color 160ms ease,transform 200ms var(--e-out)}
.qnav button:hover{background:var(--ink);color:#fff}
.qnav button:active{transform:scale(.92)}
.qnote{margin-top:1rem;color:var(--muted);font-size:.9375rem}

/* 8 Einwände */
.faq{display:grid;gap:2rem}
.faq-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.25)}
details{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
details:last-child{border-bottom:0}
details::details-content{block-size:0;overflow:hidden;transition:block-size 380ms var(--e-out),content-visibility 380ms allow-discrete}
details[open]::details-content{block-size:auto}
summary{cursor:pointer;list-style:none;padding:1.25rem;font-weight:700;display:flex;justify-content:space-between;gap:1.25rem;transition:background 160ms ease}
summary:hover{background:rgba(255,255,255,.5)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-size:1.25rem;line-height:1.5rem;transition:transform 300ms var(--e-out)}
details[open] summary::after{transform:rotate(45deg)}
.ans{padding:0 1.25rem 1.25rem;color:var(--muted);max-width:38rem}

/* 9 Wer das macht */
.wer{display:grid;gap:2rem;align-items:center}
.pframe{position:relative;border-radius:var(--r);overflow:hidden;background:var(--orange-2);aspect-ratio:4/5;max-width:26rem;width:100%;isolation:isolate}
.pframe .ripple{inset:-30%;transform:rotate(12deg) translate3d(0,var(--py,0px),0)}
.pframe img{position:relative;width:100%;height:100%;object-fit:cover}
.initials{position:absolute;inset:0;display:grid;place-items:center;font:italic 500 clamp(6rem,24vw,10rem)/1 var(--serif);letter-spacing:-.06em;color:var(--ink)}
.initials span{background:var(--cream);border:5px solid var(--ink);border-radius:50%;width:1.6em;height:1.6em;display:grid;place-items:center;box-shadow:0 12px 0 rgba(0,0,0,.12);transition:transform 600ms var(--e-out)}
.pframe:hover .initials span{transform:rotate(-6deg) scale(1.03)}
.foto-folgt{position:absolute;right:1rem;bottom:1rem;background:#fffdf5;border:2px solid var(--ink);border-radius:9px;padding:.25rem .75rem;font:800 .875rem/1.5rem var(--sans);transform:rotate(3deg);box-shadow:4px 4px 0 var(--ink)}
.hallo{position:absolute;left:1rem;top:1rem;z-index:2;background:var(--yellow);border-radius:999px;padding:.375rem 1rem;font:italic 500 1.5rem/2rem var(--serif);transform:rotate(-6deg);transition:transform 500ms cubic-bezier(.34,1.56,.64,1)}
.pframe:hover .hallo{transform:rotate(4deg) scale(1.08)}
.wer .name{font-size:clamp(3rem,7vw,5.5rem);line-height:.9;letter-spacing:-.075em;margin:.5rem 0 1rem}
.wer .role{font-weight:700;margin-bottom:1rem}
.bio{max-width:34rem;font-size:1.0625rem}
.bio p+p{margin-top:.75rem}
.bio-leer{max-width:34rem;border:1px dashed #9a958b;border-radius:10px;padding:1rem 1.25rem;color:var(--muted)}
.direkt{margin-top:2rem;border-top:1px solid var(--line);max-width:34rem;list-style:none;padding:0}
.direkt li{border-bottom:1px solid var(--line)}
.direkt a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;font-weight:700}
.direkt a span:first-child{color:var(--muted);font-weight:500;min-width:6rem}
.direkt a .v{flex:1}
.direkt a .arr{transition:transform 260ms var(--e-out)}
.direkt a:hover .arr{transform:translateX(6px)}
.direkt a:hover .v{color:var(--green)}
.wer .mehr{display:inline-flex;margin-top:1.5rem}

/* 10 Das Geschenk */
.band{padding:2rem 0;background:var(--yellow);position:relative;overflow:hidden}
.band .ripple{inset:-25%;background:repeating-radial-gradient(ellipse at 20% 50%,transparent 0 45px,var(--blue) 47px 64px,transparent 66px 100px);mix-blend-mode:normal;opacity:.9;transform:rotate(-8deg)}
html.motion .band .ripple{animation:drift 30s linear infinite alternate}
@keyframes drift{to{transform:rotate(-2deg) translateX(-6%)}}
.gift{position:relative;background:var(--green);color:#fff;border-radius:11px;padding:2rem 1.5rem;display:grid;gap:2rem}
.gift h2{font:500 clamp(3rem,6vw,5rem)/.85 var(--serif);letter-spacing:-.065em;margin-top:.5rem}
.gift h2 .serif{font-style:italic}
.gift .lead{margin-top:1rem;max-width:26rem;font-size:1.0625rem;color:rgba(255,255,255,.86)}
.gift .kicker{color:var(--blue)}
.gift .btn.ghost{border-color:#fff;color:#fff}
form.intake,.intake.danke{display:grid;gap:1rem;max-width:28rem}
.intake.danke{align-content:start}
.feld{display:grid;gap:.25rem}
.feld label{font-weight:700}
.feld input{padding:.75rem .875rem;border:1px solid var(--ink);box-sizing:border-box;border-radius:8px;background:#fffdf5;color:var(--ink);font-size:1.0625rem;transition:box-shadow 200ms var(--e-out)}
.feld input:focus{outline:none;box-shadow:4px 4px 0 var(--orange-2)}
.feld input::placeholder{color:#716c63}
form.intake .btn{justify-self:start}
.retention{font-size:.9375rem;color:rgba(255,255,255,.78)}
.flowers{display:flex;gap:.5rem;flex-wrap:wrap}
.flowers .tile{width:3.5rem;height:3.5rem;border-radius:16px}
.flowers .tile:nth-child(1){background:#565aa0}.flowers .tile:nth-child(2){background:#e34d2e}.flowers .tile:nth-child(3){background:var(--ink)}.flowers .tile:nth-child(4){background:var(--yellow);color:var(--ink)}
.flowers .tile:hover{transform:rotate(-14deg) scale(1.1);border-radius:50%}
.oder{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}

/* footer: full bleed, typographic. After Studio Kay (columns under one rule) and Désourdy (the name, edge to edge) */
footer{padding:4rem var(--pad) 1.5rem;background:var(--cream);overflow:hidden}
.fgrid{display:grid;gap:2.5rem}
.fuss{font-size:1rem;color:var(--muted);max-width:22rem}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.5rem;border-top:2px solid var(--ink);padding-top:1.25rem}
.fcol{display:grid;align-content:start;gap:.5rem;font-size:1rem}
.fcol strong{font:800 .875rem/1.5rem var(--sans);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.25rem}
.fcol a{justify-self:start;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 260ms var(--e-out)}
.fcol a:hover{background-size:100% 1px}
.wordmark{display:block;margin:2.5rem 0 0;font:900 calc((100vw - 2 * var(--pad)) * .2515)/1.2 var(--sans);letter-spacing:-.075em;white-space:nowrap;color:var(--ink)}
.wordmark .serif{letter-spacing:-.04em;color:var(--green);display:inline-block;transition:transform 600ms var(--e-out)}
.wordmark:hover .serif{transform:rotate(-4deg) translateY(-2%)}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem}
.fbase a:hover{color:var(--ink)}
.fbase span a+a{margin-left:1rem}

/* hover lifts only where a pointer can hover; touch gets no sticky hover */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover .arr{transform:translateX(3px)}
  .btn.dark:hover{background:var(--green);border-color:var(--green)}
  .btn.orange:hover{background:var(--yellow);border-color:var(--yellow)}
  .btn.ghost:hover{background:var(--ink);color:#fff}
  .shot:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(30,28,29,.14)}
  .shot:hover img{transform:scale(1.04)}
}
@media (hover:none){
  /* phones: the trade pattern arrives as the chip scrolls in */
  html.motion .chip.is-visible::before{clip-path:circle(150% at calc(100% - 2.75rem) 50%);transition-delay:calc(var(--reveal-delay,0ms) + 400ms)}
  .cursor{display:none}
}

/* hero entrance */
html.motion .rise{animation:rise 900ms var(--ease-paper,cubic-bezier(.22,1,.36,1)) both;animation-delay:calc(var(--i,0) * 90ms)}
html.motion .window{animation:lift 1100ms cubic-bezier(.22,1,.36,1) 350ms both}
@keyframes rise{from{opacity:0;transform:translateY(.4em)}}
@keyframes lift{from{opacity:0;transform:translateY(48px) rotate(1.5deg)}}
html.motion .field .tick{animation:pop 420ms cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(1200ms + var(--k) * 180ms)}
@keyframes pop{from{transform:scale(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation:none!important}
  .cycle{transform:none!important}
}

@media (min-width:56rem){
  :root{--pad:4rem}
  .nav .wrap{padding:1.25rem 0}
  .links{display:flex}
  .hero{padding-top:4.5rem}
  h1{font-size:clamp(4.5rem,7.3vw,6.25rem);line-height:.88}
  .claim{font-size:1.5rem;line-height:2rem}
  .hero .sub{font-size:1.0625rem}
  .field{min-height:29rem}
  .wbody{padding:1.5rem;grid-template-columns:1.2fr .8fr}
  .mside{display:grid}
  .window{left:var(--pad);right:var(--pad)}
  .badge{max-width:none;left:calc(max(var(--pad),(100% - 56rem) / 2) - 2.5rem)}
  .field{--wt:4.5rem}
  .url{display:inline}
  .promises{grid-template-columns:repeat(4,1fr);gap:2rem;padding:2rem 0}
  section.sec{padding:7.5rem 0}
  .chips{grid-template-columns:repeat(3,1fr);margin:3.5rem 0 1.5rem}
  .fragen{grid-template-columns:1fr 1fr;gap:1rem}
  .frage{padding:2rem}
  html.motion .frage .leer{left:2rem;bottom:2rem}
  .card{padding:2.5rem;grid-template-columns:1.1fr .9fr;gap:3rem;min-height:24rem;align-items:center;top:calc(7rem + var(--i) * 1rem)}
  .ui{width:88%;justify-self:center}
  .step{grid-template-columns:2.5rem 1fr 1.25fr;gap:2rem}
  .vis{grid-column:auto}
  .phead{grid-template-columns:1fr 1fr;align-items:end;gap:3rem}
  .strip{gap:1.5rem;padding:.5rem var(--pad) 3rem}
  .shot.hoch{width:17rem}.shot.quer{width:34rem}
  .label{width:18rem}
  .qrow{grid-template-columns:.55fr 1.45fr;gap:1rem}
  .qlabel{padding:2.5rem;min-height:18rem}
  .qcard{padding:2.5rem}
  .faq{grid-template-columns:.8fr 1.2fr;gap:5rem}
  .wer{grid-template-columns:.85fr 1.15fr;gap:5rem}
  .band{padding:3rem 0 3.5rem}
  .gift{padding:3rem;grid-template-columns:1fr 1fr;gap:3rem;align-items:end}
  .fgrid{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}
  .fcols{grid-template-columns:repeat(3,1fr);gap:2rem}
}
  
/* Impressum and Datenschutz: the same type, nothing more */
.legal-page{padding:4rem 0 5rem}
.legal-page .anschrift{font-style:normal;display:grid;gap:.25rem;margin:1.5rem 0 2rem;font-size:1.0625rem}
.legal-page .rechtstext{max-width:40rem;display:grid;gap:1rem}
.legal-page .rechtstext h2,.legal-page .rechtstext h3{letter-spacing:-.03em;font-weight:800;font-size:1.25rem;margin-top:1rem}

/* header end: the language switch sits quietly before the call button */
.nav-end{display:flex;align-items:center;gap:1rem}
.lang{font:700 .875rem/1.5rem var(--sans);letter-spacing:.08em;color:#57544f;padding:.5rem .25rem}
.lang:hover{color:var(--ink)}

/* the request form: the trap stays out of sight and out of the tab order */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{background:var(--paper);color:#8f2f16;border-radius:8px;padding:.75rem 1rem;font-weight:700}
.danke .danke-gross{font:italic 500 clamp(1.75rem,4vw,2.5rem)/1.1 var(--serif);margin-bottom:.75rem}