/* Bäckerei Sonnenkorn – Musterseite von AS Webdesign & Entwicklung (fiktiver Betrieb) */
:root{
  --cream:#f7efe2; --cream-2:#efe2cc; --flour:#fffaf2; --crust:#9a5524; --crust-d:#5b2f12; --oven:#1d130b; --oven-2:#2b1c11;
  --honey:#e9a43c; --sun:#f6c453; --ink:#2b1d13; --muted:#7c6656; --sage:#6f7f58; --line:rgba(43,29,19,.14);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --hand:"Segoe Script","Bradley Hand","Brush Script MT",cursive;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.7,0,.84,0); --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--honey);color:var(--oven)}
.wrap{width:min(1240px,100% - 40px);margin:0 auto}
.serif{font-family:var(--serif)}
.hand{font-family:var(--hand);color:var(--crust)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(2.3rem,5.4vw,4.4rem)}
h2 em,h1 em{font-style:italic;font-weight:400;color:var(--crust)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--crust);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}
section{position:relative}
.sec{padding:clamp(80px,12vw,160px) 0}
.grain::after{content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Buttons */
.btn{--bg:var(--crust);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;border:0;background:var(--bg);color:var(--flour);font-weight:700;font-size:.98rem;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--oven);transform:translateY(101%);border-radius:inherit;transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{box-shadow:0 18px 40px -16px rgba(91,47,18,.7)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn.light{--bg:var(--flour);color:var(--ink)}
.btn.light::before{background:var(--honey)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost::before{background:currentColor;opacity:.12}
.btn.honey{--bg:var(--honey);color:var(--oven)}
.btn.honey::before{background:var(--flour)}
.btn.sm{padding:11px 18px;font-size:.88rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--honey);outline-offset:3px}

/* Musterhinweis: feste Leiste oben mit Weg zurück zur Agentur-Website */
:root{--bar:40px}
.demobar{position:fixed;left:0;right:0;top:0;height:var(--bar);z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;background:#0b0c0f;color:#eef1f6;font:600 .8rem/1 "Segoe UI",system-ui,sans-serif;letter-spacing:0}
.demobar a{color:inherit;text-decoration:none;white-space:nowrap}
.demobar .db-back{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);transition:background .25s}
.demobar .db-back:hover{background:rgba(255,255,255,.16)}
.demobar .db-mid{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;flex:1;opacity:.85;font-weight:500}
.demobar .db-back,.demobar .db-go{flex:0 0 auto}
.demobar .db-mid span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demobar b{background:linear-gradient(100deg,#0055ff,#00d9ff);color:#fff;border-radius:999px;padding:4px 9px;font-size:.64rem;letter-spacing:.14em}
.demobar .db-go{color:#00d4ff}
.demobar .db-go:hover{text-decoration:underline}
@media (max-width:980px){ .demobar .db-mid span{display:none} }
@media (max-width:560px){ .demobar .db-back span,.demobar .db-go span{display:none} }
.drawer .panel{top:var(--bar)}

/* Vorlader */
.pl{position:fixed;inset:0;z-index:10000;background:var(--oven);display:grid;place-items:center;color:var(--cream);transition:clip-path 1s var(--ease)}
.pl.done{clip-path:inset(0 0 100% 0)}
.pl-in{text-align:center}
.pl svg{width:180px;height:auto;overflow:visible}
.pl .sun{transform-origin:90px 110px;animation:plsun 1.6s var(--ease) forwards}
.pl .rays{transform-origin:90px 110px;animation:plrays 6s linear infinite}
.pl .loaf{animation:plloaf 1.4s var(--ease) .2s both}
.pl p{margin:18px 0 0;font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em}
.pl .deg{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--honey);margin-top:8px;font-variant-numeric:tabular-nums}
@keyframes plsun{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes plrays{to{transform:rotate(360deg)}}
@keyframes plloaf{from{transform:scale(.6,.4) translateY(30px);opacity:0}60%{transform:scale(1.05,1.1)}to{transform:none;opacity:1}}

/* Seitenwechsel */
.curtain{position:fixed;inset:0;z-index:9999;background:var(--honey);pointer-events:none;transform:translateY(100%);display:grid;place-items:center}
.curtain svg{width:110px;opacity:0;transition:opacity .3s}
.curtain.in{transform:none;transition:transform .55s var(--ease-in)}
.curtain.in svg{opacity:1}
.curtain.out{transform:translateY(-100%);transition:transform .7s var(--ease)}

/* Cursor + Mehlspur */
.cur,.cur-dot{position:fixed;left:0;top:0;z-index:9997;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cur{width:38px;height:38px;border:1.5px solid var(--crust);transition:width .35s var(--ease),height .35s var(--ease),background .3s,border-color .3s;display:grid;place-items:center}
.cur span{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--oven);opacity:0;transition:opacity .2s}
.cur.big{width:86px;height:86px;background:var(--honey);border-color:var(--honey)}
.cur.big span{opacity:1}
.cur.hov{width:58px;height:58px;background:rgba(233,164,60,.18)}
.cur-dot{width:6px;height:6px;background:var(--crust)}
#flour{position:fixed;inset:0;width:100%;height:100%;z-index:9996;pointer-events:none}
@media (pointer:coarse){.cur,.cur-dot,#flour{display:none}}

/* Kopf */
.hd{position:fixed;left:0;right:0;top:var(--bar);z-index:800;transition:transform .5s var(--ease),background .4s,box-shadow .4s}
.hd .wrap{display:flex;align-items:center;gap:26px;height:88px;transition:height .4s var(--ease)}
.hd.solid{background:rgba(247,239,226,.86);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.hd.solid .wrap{height:70px}
.hd.hide{transform:translateY(calc(-100% - var(--bar)))}
.hd.dark:not(.solid){color:var(--cream)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.logo svg{width:44px;height:44px;transition:transform .8s var(--ease)}
.logo:hover svg{transform:rotate(-25deg)}
.logo b{font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:-.01em;line-height:1}
.logo small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-top:3px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{position:relative;text-decoration:none;font-weight:600;font-size:.94rem;padding:10px 14px;border-radius:999px;transition:background .3s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--honey);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.cartbtn{position:relative;display:inline-flex;align-items:center;gap:8px;border:0;background:var(--oven);color:var(--cream);padding:11px 18px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.9rem;transition:transform .3s var(--ease)}
.hd.dark:not(.solid) .cartbtn{background:var(--cream);color:var(--oven)}
.cartbtn svg{width:19px;height:19px}
.cartbtn .n{min-width:22px;height:22px;border-radius:999px;background:var(--honey);color:var(--oven);font-size:.75rem;display:grid;place-items:center;padding:0 6px;transition:transform .4s var(--ease)}
.cartbtn.bump{animation:bump .6s var(--ease)}
@keyframes bump{30%{transform:scale(1.18) rotate(-4deg)}60%{transform:scale(.95)}}
.burger{display:none;border:0;background:none;width:44px;height:44px;cursor:pointer;position:relative;margin-left:auto}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.menu-open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){top:22px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:790;background:var(--oven);color:var(--cream);clip-path:circle(0 at calc(100% - 42px) 84px);transition:clip-path .8s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:100px 28px 40px}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 42px) 84px)}
.mmenu a{font-family:var(--serif);font-size:clamp(2.2rem,9vw,3.4rem);text-decoration:none;line-height:1.25;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--ease)}
.menu-open .mmenu a{opacity:1;transform:none}
.mmenu a:nth-child(2){transition-delay:.06s}.mmenu a:nth-child(3){transition-delay:.12s}.mmenu a:nth-child(4){transition-delay:.18s}.mmenu a:nth-child(5){transition-delay:.24s}.mmenu a:nth-child(6){transition-delay:.3s}
.mmenu p{margin-top:30px;color:var(--honey);font-size:.9rem}

/* Startbild */
.hero{min-height:100svh;display:flex;align-items:flex-end;color:var(--cream);background:var(--oven);overflow:hidden;padding:130px 0 70px}
.hero-bg{position:absolute;inset:-6%;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate;transform-origin:70% 40%}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.16) translate(-1.5%,1%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,12,6,.88) 0%,rgba(20,12,6,.55) 45%,rgba(20,12,6,.1) 100%),linear-gradient(0deg,rgba(20,12,6,.8),transparent 45%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
.hero .wrap{position:relative;z-index:3}
.hero h1{font-size:clamp(3.2rem,9.4vw,8.6rem);line-height:.92;letter-spacing:-.03em;font-weight:500;max-width:11ch}
.hero h1 em{color:var(--sun)}
.hero .lead{color:rgba(247,239,226,.82);margin:28px 0 36px}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(255,250,242,.1);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,250,242,.18);font-size:.86rem;margin-bottom:28px}
.live i{width:10px;height:10px;border-radius:50%;background:#5ad07a;box-shadow:0 0 0 0 rgba(90,208,122,.7);animation:pulse 2s infinite}
.live.off i{background:var(--honey);box-shadow:0 0 0 0 rgba(233,164,60,.7)}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(90,208,122,0)}100%{box-shadow:0 0 0 0 rgba(90,208,122,0)}}
.hero-side{position:absolute;right:max(20px,calc((100vw - 1240px) / 2));bottom:70px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}
.hero-side::after{content:"";width:1px;height:80px;background:linear-gradient(var(--cream),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.split .ch{display:inline-block;transform:translateY(110%) rotate(8deg);opacity:0;transition:transform 1s var(--ease),opacity .6s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split.go .ch{transform:none;opacity:1}

/* Laufbänder */
.mq{position:relative;height:200px;overflow:hidden;background:var(--cream);margin:-40px 0}
.mq .band{position:absolute;left:-5%;right:-5%;top:50%;padding:18px 0;white-space:nowrap;font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.6rem);font-style:italic}
.mq .b1{background:var(--oven);color:var(--cream);transform:translateY(-50%) rotate(-3deg);z-index:2}
.mq .b2{background:var(--honey);color:var(--oven);transform:translateY(-50%) rotate(2.4deg)}
.mq .track{display:inline-flex;gap:40px;padding-left:40px;animation:mq 40s linear infinite}
.mq .b2 .track{animation-direction:reverse;animation-duration:52s}
.mq .track span{display:inline-flex;align-items:center;gap:40px}
.mq .track span::after{content:"✺";font-style:normal;color:var(--honey);font-size:.8em}
.mq .b2 .track span::after{color:var(--crust)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Brot des Tages */
.bdt{background:var(--cream);overflow:hidden}
.bdt .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.bdt-stage{position:relative;aspect-ratio:1;display:grid;place-items:center}
.bdt-stage .burst{position:absolute;inset:4%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(233,164,60,.32) 0 6deg,transparent 6deg 15deg);animation:spin 40s linear infinite;mask:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%)}
.bdt-stage .disc{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sun),var(--honey) 55%,var(--crust) 100%);box-shadow:0 40px 80px -30px rgba(91,47,18,.6)}
.bdt-stage img{position:relative;width:78%;filter:drop-shadow(0 34px 30px rgba(43,29,19,.4));animation:float 6s ease-in-out infinite;transition:transform .3s}
.bdt-stage .tag{position:absolute;right:4%;top:8%;width:120px;height:120px;border-radius:50%;background:var(--oven);color:var(--cream);display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:1.4rem;line-height:1.05;transform:rotate(12deg);animation:wobble 5s ease-in-out infinite}
.bdt-stage .tag small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--honey)}
.bdt h2 .day{display:block;font-family:var(--hand);font-size:.5em;color:var(--crust);font-style:normal;margin-bottom:6px}
.bdt .facts{display:flex;gap:28px;margin:26px 0 34px;flex-wrap:wrap}
.bdt .facts div{border-left:2px solid var(--honey);padding-left:14px}
.bdt .facts b{display:block;font-family:var(--serif);font-size:1.8rem;line-height:1}
.bdt .facts span{font-size:.82rem;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-16px) rotate(-3deg)}}
@keyframes wobble{50%{transform:rotate(-6deg) scale(1.05)}}

/* Vom Korn zum Laib (Scroll-Geschichte) */
.story{background:var(--oven);color:var(--cream)}
.story .head{padding-top:clamp(80px,10vw,140px);padding-bottom:40px}
.story .head h2 em{color:var(--honey)}
.story-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:70px}
.story-pics{position:sticky;top:12vh;height:76vh;border-radius:var(--r);overflow:hidden}
.story-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease),transform 1.6s var(--ease);transform:scale(1.15)}
.story-pics img.on{clip-path:inset(0 0 0 0);transform:scale(1)}
.story-pics .clock{position:absolute;left:22px;bottom:22px;z-index:2;display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:999px;background:rgba(29,19,11,.75);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}
.story-pics .clock svg{width:34px;height:34px}
.story-pics .clock b{font-family:var(--serif);font-size:1.5rem}
.story-pics .hand-h,.story-pics .hand-m{transform-origin:17px 17px;transition:transform 1.2s var(--ease)}
.story-steps{padding:6vh 0 30vh;position:relative}
.story-steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(247,239,226,.15)}
.story-steps .bar{position:absolute;left:0;top:0;width:2px;background:var(--honey);height:0}
.step{min-height:62vh;padding-left:48px;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s}
.step.on{opacity:1}
.step .no{font-family:var(--hand);color:var(--honey);font-size:1.6rem}
.step h3{font-size:clamp(2rem,3.6vw,3rem);margin:6px 0 16px}
.step p{color:rgba(247,239,226,.75);max-width:44ch;margin:0}
.step .chip{display:inline-block;margin-top:18px;padding:6px 14px;border-radius:999px;background:rgba(233,164,60,.15);color:var(--honey);font-size:.8rem;font-weight:700;align-self:flex-start}

/* Waagrechte Produktschau */
.hs{height:340vh;background:var(--cream-2)}
.hs-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}
.hs-track{display:flex;gap:28px;padding-left:max(20px,calc((100vw - 1240px) / 2));will-change:transform}
.hs-progress{height:3px;background:var(--line);margin-top:40px;border-radius:3px;overflow:hidden}
.hs-progress i{display:block;height:100%;width:0;background:var(--crust)}
.pcard{flex:0 0 min(340px,78vw);border-radius:28px;padding:26px;background:var(--flour);position:relative;transform-style:preserve-3d;transition:box-shadow .4s;box-shadow:0 30px 60px -40px rgba(43,29,19,.5)}
.pcard:hover{box-shadow:0 40px 80px -36px rgba(43,29,19,.6)}
.pcard .pic{aspect-ratio:1;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,var(--bgc,var(--cream-2)),transparent 72%);margin-bottom:18px;transform:translateZ(40px)}
.pcard .pic img{width:86%;filter:drop-shadow(0 22px 18px rgba(43,29,19,.35));transition:transform .6s var(--ease)}
.pcard:hover .pic img{transform:scale(1.08) rotate(-6deg)}
.pcard h3{font-size:1.5rem;margin-bottom:4px}
.pcard p{margin:0;color:var(--muted);font-size:.9rem;min-height:3em}
.pcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.pcard .price{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.pcard .price small{font-family:var(--sans);font-size:.75rem;color:var(--muted);font-weight:400}
.add{width:50px;height:50px;border-radius:50%;border:0;background:var(--oven);color:var(--cream);cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease),background .3s}
.add:hover{transform:rotate(90deg) scale(1.08);background:var(--crust)}
.add svg{width:22px;height:22px}
.badge{position:absolute;top:22px;left:22px;z-index:2;padding:5px 11px;border-radius:999px;background:var(--honey);color:var(--oven);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.badge.sage{background:var(--sage);color:#fff}

/* Zahlen */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.ring{position:relative;width:min(190px,100%);aspect-ratio:1;margin:0 auto 16px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--crust);stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 2s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600}
.stats p{margin:0;color:var(--muted);font-size:.95rem}

/* Zitat mit Breze */
.quote{background:var(--oven);color:var(--cream);overflow:hidden}
.quote .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.quote .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;position:relative}
.quote .ph img{width:100%;height:120%;object-fit:cover;position:absolute;top:-10%}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.15;font-style:italic}
.quote cite{display:block;margin-top:24px;font-style:normal;font-size:.9rem;color:var(--honey);letter-spacing:.12em;text-transform:uppercase}
.brezel{width:min(320px,70%);margin-bottom:30px}
.brezel path{fill:none;stroke:var(--honey);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.brezel .salt{fill:var(--cream);opacity:0;transition:opacity .4s}
.brezel.done .salt{opacity:1}

/* Filialen-Karten */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bcard{border-radius:var(--r);overflow:hidden;background:var(--flour);box-shadow:0 30px 60px -45px rgba(43,29,19,.6);text-decoration:none;display:block;transition:transform .5s var(--ease)}
.bcard:hover{transform:translateY(-8px)}
.bcard .ph{aspect-ratio:4/3;overflow:hidden;position:relative}
.bcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bcard:hover .ph img{transform:scale(1.08)}
.bcard .tx{padding:22px 24px 26px}
.bcard h3{font-size:1.6rem;margin-bottom:6px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(111,127,88,.14);color:#4b5a37}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#5ab36b}
.status.closed{background:rgba(154,85,36,.12);color:var(--crust)}
.status.closed::before{background:var(--crust)}
.status.soon::before{background:var(--honey);animation:pulse 2s infinite}

/* Stimmen */
.reviews{overflow:hidden}
.rv-track{display:flex;gap:24px;cursor:grab;user-select:none;padding:10px 0 30px}
.rv-track.drag{cursor:grabbing}
.rv{flex:0 0 min(420px,82vw);padding:34px;border-radius:var(--r);background:var(--flour);box-shadow:0 24px 50px -40px rgba(43,29,19,.6)}
.rv .stars{color:var(--honey);letter-spacing:4px;margin-bottom:12px}
.rv p{font-family:var(--serif);font-size:1.3rem;line-height:1.35;margin:0 0 18px;font-style:italic}
.rv small{color:var(--muted)}

/* Bestellschluss */
.cta{background:var(--honey);color:var(--oven);overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.cta h2 em{color:var(--oven)}
.count{display:flex;gap:14px}
.count div{flex:1;background:var(--oven);color:var(--cream);border-radius:20px;padding:20px 10px;text-align:center}
.count b{display:block;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}
.count span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--honey)}
.cta .note{margin-top:14px;font-size:.88rem}
.cta .sunbg{position:absolute;right:-12vw;top:-30vw;width:60vw;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.18) 0 8deg,transparent 8deg 18deg);animation:spin 60s linear infinite;pointer-events:none}

/* Fuß */
.ft{background:var(--oven);color:var(--cream);padding:0 0 40px;overflow:hidden}
.ft-big{font-family:var(--serif);font-size:clamp(4rem,15vw,15rem);line-height:.85;letter-spacing:-.04em;white-space:nowrap;padding:60px 0 40px;color:var(--oven-2);-webkit-text-stroke:1px rgba(233,164,60,.5)}
.ft-big span{display:inline-block;animation:mq 30s linear infinite}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(247,239,226,.12)}
.ft h4{font-family:var(--sans);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--honey);margin-bottom:16px}
.ft a{text-decoration:none;opacity:.85}
.ft a:hover{opacity:1;color:var(--honey)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
.ft-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.82rem;opacity:.75}
.newsletter{display:flex;gap:8px;margin-top:16px}
.newsletter input{flex:1;min-width:0;border:0;border-radius:999px;padding:13px 18px;background:rgba(247,239,226,.1);color:var(--cream);font:inherit;font-size:.9rem}

/* Warenkorb */
.drawer{position:fixed;inset:0;z-index:950;pointer-events:none}
.drawer .shade{position:absolute;inset:0;background:rgba(20,12,6,.5);opacity:0;transition:opacity .5s}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--flour);transform:translateX(100%);transition:transform .6s var(--ease);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
.drawer.open{pointer-events:auto}
.drawer.open .shade{opacity:1}
.drawer.open .panel{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:24px 26px;border-bottom:1px solid var(--line)}
.drawer header h3{font-size:1.7rem}
.x{border:0;background:var(--cream-2);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.3rem;transition:transform .4s var(--ease)}
.x:hover{transform:rotate(90deg)}
.drawer .items{flex:1;overflow:auto;padding:10px 26px}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line);animation:slidein .5s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}}
.ci img{width:64px;height:64px;object-fit:contain;background:var(--cream);border-radius:14px}
.ci b{display:block;font-family:var(--serif);font-size:1.1rem}
.ci small{color:var(--muted)}
.qty{display:inline-flex;align-items:center;gap:4px;background:var(--cream);border-radius:999px;padding:3px}
.qty button{width:30px;height:30px;border:0;border-radius:50%;background:var(--flour);cursor:pointer;font-weight:700}
.qty span{min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.drawer footer{padding:22px 26px 28px;border-top:1px solid var(--line)}
.sum{display:flex;justify-content:space-between;font-family:var(--serif);font-size:1.5rem;margin-bottom:16px}
.empty{text-align:center;padding:60px 10px;color:var(--muted)}
.empty svg{width:90px;margin:0 auto 14px;opacity:.6}
.fly{position:fixed;z-index:9990;pointer-events:none;width:90px;height:90px;object-fit:contain}
.crumb{position:fixed;z-index:9990;pointer-events:none;width:7px;height:7px;border-radius:40% 60% 50% 50%;background:var(--crust)}
.toast{position:fixed;left:50%;bottom:26px;z-index:960;transform:translate(-50%,140%);background:var(--oven);color:var(--cream);padding:14px 22px;border-radius:999px;font-weight:600;font-size:.92rem;transition:transform .5s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0)}

/* Einblenden beim Scrollen */
[data-reveal]{opacity:0;transform:translateY(50px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease);transition-delay:var(--d,0s)}
[data-reveal="clip"].in{clip-path:inset(0)}
[data-reveal="scale"]{transform:scale(.85)}
.parallax{will-change:transform}

/* Unterseiten-Kopf */
.phead{padding:170px 0 80px;background:var(--oven);color:var(--cream);overflow:hidden;position:relative}
.phead h1{font-size:clamp(3rem,8vw,7rem);font-weight:500;letter-spacing:-.03em}
.phead h1 em{color:var(--honey)}
.phead .lead{color:rgba(247,239,226,.75);margin-top:22px}
.phead .bgimg{position:absolute;inset:0;opacity:.35}
.phead .bgimg img{width:100%;height:100%;object-fit:cover}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--oven) 25%,transparent)}
.phead .wrap{position:relative;z-index:2}
.crumbs{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:20px}
.crumbs a{text-decoration:none}

/* Sortiment */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:40px}
.chip{border:0;padding:11px 20px;border-radius:999px;background:var(--flour);cursor:pointer;font-weight:600;font-size:.92rem;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,transform .3s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--oven);color:var(--cream);box-shadow:none}
.search{margin-left:auto;position:relative}
.search input{border:0;border-radius:999px;padding:12px 18px 12px 44px;background:var(--flour);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:.92rem;width:240px;max-width:60vw}
.search svg{position:absolute;left:16px;top:50%;width:18px;transform:translateY(-50%);opacity:.5}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px}
.pgrid .pcard{flex:none}
.pgrid .pcard .more{position:absolute;inset:auto 18px 92px 18px;padding:14px 16px;border-radius:16px;background:rgba(29,19,11,.9);color:var(--cream);font-size:.8rem;line-height:1.5;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease);pointer-events:none}
.pgrid .pcard:hover .more,.pgrid .pcard:focus-within .more{opacity:1;transform:none}
.allerg{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.allerg span{font-size:.66rem;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:6px;background:var(--cream-2);color:var(--muted)}
.noresult{grid-column:1/-1;text-align:center;padding:60px;color:var(--muted)}
.torte{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.torte .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.torte .ph img{width:100%;height:100%;object-fit:cover}

/* Vorbestellen */
.steps-nav{display:flex;gap:10px;margin-bottom:40px;counter-reset:s;flex-wrap:wrap}
.steps-nav span{counter-increment:s;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:var(--flour);font-weight:600;font-size:.9rem;color:var(--muted);transition:.4s}
.steps-nav span::before{content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cream-2);font-size:.8rem}
.steps-nav span.on{background:var(--oven);color:var(--cream)}
.steps-nav span.on::before{background:var(--honey);color:var(--oven)}
.steps-nav span.done::before{content:"✓";background:var(--sage);color:#fff}
.ostep{display:none;animation:stepin .7s var(--ease)}
.ostep.on{display:block}
@keyframes stepin{from{opacity:0;transform:translateX(40px)}}
.order-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.mini button{border:0;background:var(--flour);border-radius:20px;padding:14px;cursor:pointer;text-align:left;position:relative;transition:transform .35s var(--ease),box-shadow .3s}
.mini button:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(43,29,19,.6)}
.mini img{width:100%;aspect-ratio:1;object-fit:contain}
.mini b{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.2}
.mini small{color:var(--muted)}
.mini .q{position:absolute;top:10px;right:10px;min-width:26px;height:26px;border-radius:999px;background:var(--honey);display:grid;place-items:center;font-weight:800;font-size:.8rem;padding:0 6px;transform:scale(0);transition:transform .4s var(--ease)}
.mini .q.on{transform:scale(1)}
.side{position:sticky;top:100px;background:var(--flour);border-radius:var(--r);padding:26px;box-shadow:0 30px 60px -45px rgba(43,29,19,.6)}
.side h3{font-size:1.5rem;margin-bottom:12px}
.side .lines{max-height:280px;overflow:auto;margin-bottom:14px}
.side .lines div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:30px}
.choice label{display:block;cursor:pointer;border-radius:20px;background:var(--flour);padding:20px;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
.choice label:hover{transform:translateY(-3px)}
.choice input{position:absolute;opacity:0}
.choice input:checked+label{box-shadow:inset 0 0 0 2.5px var(--crust)}
.choice input:focus-visible+label{outline:3px solid var(--honey);outline-offset:2px}
.choice b{display:block;font-family:var(--serif);font-size:1.25rem}
.choice small{color:var(--muted)}
.days{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:24px}
.days button,.times button{border:0;flex:0 0 auto;border-radius:16px;background:var(--flour);padding:12px 16px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);text-align:center;transition:.3s}
.days button b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.days button small{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.days button[aria-pressed="true"],.times button[aria-pressed="true"]{background:var(--oven);color:var(--cream);box-shadow:none}
.days button[aria-pressed="true"] small{color:var(--honey)}
.days button:disabled,.times button:disabled{opacity:.35;cursor:not-allowed}
.times{display:flex;flex-wrap:wrap;gap:10px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font-size:.85rem;font-weight:600}
.form .full{grid-column:1/-1}
.form input,.form textarea,.form select{border:0;border-radius:14px;padding:14px 16px;background:var(--flour);box-shadow:inset 0 0 0 1.5px var(--line);font:inherit;font-size:.98rem;font-weight:400}
.form input:focus,.form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--crust)}
.form .err{color:#b3261e;font-size:.85rem;font-weight:600}
.done-box{text-align:center;padding:40px 0}
.done-box svg{width:120px;margin:0 auto 20px}
.done-box .ck{stroke-dasharray:60;stroke-dashoffset:60;animation:ck .8s var(--ease) .3s forwards}
.done-box circle{stroke-dasharray:320;stroke-dashoffset:320;animation:ck 1s var(--ease) forwards}
@keyframes ck{to{stroke-dashoffset:0}}
.pickup{display:inline-grid;grid-template-columns:auto auto;gap:24px;align-items:center;text-align:left;padding:24px;border-radius:var(--r);background:var(--flour);margin:20px 0}
.pickup .code{font-family:var(--serif);font-size:2.6rem;letter-spacing:.06em}
.demo{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:12px;background:rgba(233,164,60,.18);font-size:.85rem}

/* Filialen */
.map-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.map{position:sticky;top:100px;border-radius:var(--r);overflow:hidden;background:#efe4cf;aspect-ratio:1/1.05;box-shadow:inset 0 0 0 1px var(--line)}
.map svg{width:100%;height:100%}
.map .river{fill:none;stroke:#9fc3c9;stroke-width:14;stroke-linecap:round}
.map .road{fill:none;stroke:#fffaf2;stroke-width:5}
.map .pin{cursor:pointer;transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:50% 100%}
.map .pin:hover,.map .pin.on{transform:scale(1.25) translateY(-4px)}
.map .pin .pulse{transform-box:fill-box;transform-origin:center;animation:mappulse 2.4s infinite}
@keyframes mappulse{from{transform:scale(.4);opacity:.7}to{transform:scale(2.2);opacity:0}}
.map text{font-family:var(--serif);font-size:15px;fill:var(--ink)}
.blist{display:grid;gap:22px}
.bfull{border-radius:var(--r);background:var(--flour);overflow:hidden;display:grid;grid-template-columns:200px 1fr;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .4s,transform .4s var(--ease)}
.bfull.on{box-shadow:inset 0 0 0 2.5px var(--crust);transform:translateX(-6px)}
.bfull img{width:100%;height:100%;object-fit:cover}
.bfull .tx{padding:22px}
.bfull h3{font-size:1.5rem;margin:8px 0 4px}
.hours{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:12px}
.hours td{padding:4px 0;border-bottom:1px dashed var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:800;color:var(--crust)}

/* Über uns */
.timeline{position:relative;padding:40px 0}
.timeline .line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.timeline .line i{display:block;width:100%;background:linear-gradient(var(--honey),var(--crust));height:0}
.tl{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:90px;position:relative}
.tl::before{content:"";position:absolute;left:50%;top:14px;width:22px;height:22px;border-radius:50%;background:var(--cream);border:4px solid var(--crust);transform:translateX(-50%);z-index:2}
.tl .yr{font-family:var(--serif);font-size:clamp(3.4rem,7vw,6rem);line-height:.9;color:var(--crust);text-align:right}
.tl:nth-child(even) .yr{order:2;text-align:left}
.tl h3{font-size:1.8rem;margin-bottom:10px}
.tl p{margin:0;color:var(--muted)}
.compare{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;user-select:none;touch-action:pan-y;--p:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .top{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.compare .top img{filter:sepia(.5) contrast(1.05)}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--cream);transform:translateX(-50%)}
.compare .handle::after{content:"⟷";position:absolute;top:50%;left:50%;width:54px;height:54px;border-radius:50%;background:var(--cream);color:var(--oven);display:grid;place-items:center;transform:translate(-50%,-50%);font-size:1.3rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.compare input{position:absolute;inset:0;opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0}
.compare .lbl{position:absolute;bottom:16px;padding:6px 12px;border-radius:999px;background:rgba(29,19,11,.75);color:var(--cream);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.compare .l1{left:16px}.compare .l2{right:16px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value{padding:34px;border-radius:var(--r);background:var(--flour);position:relative;overflow:hidden}
.value .big{font-family:var(--serif);font-size:5rem;line-height:.8;color:var(--cream-2);position:absolute;right:20px;top:20px}
.value h3{font-size:1.6rem;margin:60px 0 10px}
.value p{margin:0;color:var(--muted)}
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:50px;border-radius:32px;background:var(--oven);color:var(--cream);overflow:hidden;position:relative}
.jobs h2 em{color:var(--honey)}
.jobs ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.jobs li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;border-radius:18px;background:rgba(247,239,226,.07);transition:background .3s,transform .4s var(--ease)}
.jobs li:hover{background:rgba(233,164,60,.18);transform:translateX(8px)}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.photo{border-radius:var(--r);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.wide{border-radius:0;height:min(70vh,640px);overflow:hidden;position:relative}
.wide img{width:100%;height:130%;object-fit:cover;position:absolute;top:-15%}
.wide .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 0;background:linear-gradient(transparent,rgba(20,12,6,.75));color:var(--cream)}
.wide .cap p{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.8rem);font-style:italic;margin:0;max-width:24ch}

/* Responsive */
@media (max-width:1000px){
  .nav,.hd .cartbtn .lbl{display:none}
  .burger{display:block;margin-left:0}
  .hd .cartbtn{margin-left:auto}
  .hd .wrap{gap:10px}
  .bdt .wrap,.quote .wrap,.cta .wrap,.story-grid,.torte,.order-grid,.map-wrap,.split-2,.jobs{grid-template-columns:1fr}
  .story-pics{position:sticky;top:76px;height:42vh;z-index:2}
  .step{min-height:78vh;padding-left:30px;justify-content:flex-end;padding-bottom:8vh}
  .stats{grid-template-columns:repeat(2,1fr)}
  .branches,.values{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .map,.side{position:relative;top:0}
  .tl{grid-template-columns:1fr;gap:10px;padding-left:46px}
  .tl .yr,.tl:nth-child(even) .yr{order:0;text-align:left}
  .timeline .line,.tl::before{left:12px}
  .hs{height:auto}
  .hs-sticky{position:relative;height:auto;padding:90px 0}
  .hs-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:20px;padding-bottom:10px;transform:none!important}
  .hs-track .pcard{scroll-snap-align:start}
  .hs-progress{display:none}
  .hero-side{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .hd .wrap{height:72px}
  .hero{padding-bottom:90px}
  .form{grid-template-columns:1fr}
  .bfull{grid-template-columns:1fr}
  .bfull img{aspect-ratio:16/9}
  .jobs{padding:30px 22px}
  .ft-grid{grid-template-columns:1fr}
  .count b{font-size:2rem}
  .search{margin-left:0;width:100%}
  .search input{width:100%;max-width:none}
  .mb span{display:none}
  .pickup{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;clip-path:none}
  .split .ch{transform:none;opacity:1}
}
.shot{--bar:0px}.shot .demobar{display:none}

.shot *,.shot *::before,.shot *::after{transition:none!important}