/* KRUME · Sauerteigbäckerei · art direction: flour, crust, enamel cobalt */
:root{
  --canvas:#E9E6E0; --panel:#F4F2ED; --paper:#FBFAF7;
  --ink:#241C17; --muted:#655A52; --line:rgba(36,28,23,.14); --line-strong:rgba(36,28,23,.3);
  --accent:#2443C4; --accent-ink:#F4F2ED; --accent-muted:#C7D0F4;
  --crust:#7A3F17; --crumb:#E6D6B8; --board:#C99B62; --oven:#1E1511;
  --f-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --display-weight:800;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --pad:clamp(96px,13vw,190px);
  --grain:.05;
  color-scheme:light;
}
body{background:var(--canvas)}
main{position:relative;z-index:1}
.muted{color:var(--muted)}
.flour-dust{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.chapter{padding-block:var(--pad)}
.hero{padding-block:0}
h2{font-size:clamp(2.6rem,1.6rem + 4.6vw,6.2rem)}
h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:600;letter-spacing:-.01em;line-height:1.05}

/* header + logo */
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--accent)}
.logo svg{width:38px;height:38px}
.logo span{font-family:var(--f-display);font-weight:800;font-size:1.35rem;letter-spacing:.02em;color:var(--ink)}

/* dough blob used in process */
.dough{--s:1;width:calc(var(--s) * 220px);aspect-ratio:1.45;border-radius:52% 48% 44% 46%/62% 60% 40% 38%;background:radial-gradient(120% 90% at 35% 25%,#FAF3E4 0%,#EADBC0 55%,#D3BC93 100%);box-shadow:inset -10px -14px 28px rgba(140,100,50,.18),0 18px 30px -18px rgba(36,28,23,.35);transition:transform .6s var(--ease-out)}
.dough--baked{background:radial-gradient(110% 90% at 35% 25%,#DCA568 0%,#A9612A 55%,#5E2D10 100%);box-shadow:inset -10px -14px 28px rgba(40,14,2,.35),0 18px 30px -18px rgba(36,28,23,.45)}

/* ============ HERO A · Laib ============ */
.hA__pin{min-height:100svh;display:flex;align-items:center;padding:92px 0 28px}
.hA__grid{display:grid;gap:clamp(12px,2vw,28px);grid-template-columns:1fr;grid-template-areas:"kick" "title" "stage" "foot"}
.hA__kicker{grid-area:kick;color:var(--muted)}
.hA__title{grid-area:title;font-size:clamp(3.3rem,1.5rem + 8.4vw,10rem);line-height:.86;letter-spacing:-.045em}
.hA__title span{display:block}
.hA__l2{color:var(--accent)}
.hA__stage{grid-area:stage;position:relative;width:100%;aspect-ratio:5/3.6;max-height:56svh;margin-inline:auto}
.hA__stage canvas{position:absolute;inset:0;width:100%;height:100%}
.hA__steam{z-index:3;pointer-events:none}
.hA__heel{z-index:2}

.hA__knife{position:absolute;left:-6%;width:112%;top:0;z-index:4;pointer-events:none;opacity:0;filter:drop-shadow(0 6px 8px rgba(36,28,23,.18))}
.hA__knife svg{width:100%;height:auto}
.hA__foot{grid-area:foot;display:grid;gap:18px}
.hA__lead{max-width:34ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem)}
.hA__cta{display:flex;flex-wrap:wrap;gap:10px}
.hA__hint{display:none;color:var(--muted)}
.hA__hint span{color:var(--ink)}
@media (min-width:960px){
  .hA__grid{grid-template-columns:1.02fr 1fr;grid-template-areas:"kick stage" "title stage" "foot stage";align-items:end;column-gap:clamp(24px,4vw,72px)}
  .hA__stage{aspect-ratio:1/0.86;max-height:74svh;align-self:center}
  .hA__title{align-self:end}
  .hA__hint{display:block;position:absolute;left:50%;bottom:22px;transform:translateX(-50%)}
}

/* ============ HERO B · Emailschild ============ */
.hB__grid{min-height:100svh;display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:96px 0 48px;position:relative}
.hB__hang{position:relative;justify-self:center;width:min(560px,82vw);margin-top:12px;transform-origin:50% 0;padding-top:46px}
.hB__bracket{position:absolute;top:0;left:-4%;right:-4%;height:46px}
.hB__bracket::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-radius:5px;background:linear-gradient(#3a332e,#1d1815)}
.hB__bracket i{position:absolute;top:9px;width:3px;height:37px;background:repeating-linear-gradient(#5b524b 0 5px,#2a2420 5px 8px);left:22%}
.hB__bracket i+i{left:auto;right:22%}
.hB__sign{position:relative;aspect-ratio:1.28;border-radius:30px;background:radial-gradient(120% 90% at 30% 20%,#3a5ae0 0%,var(--accent) 45%,#1a33a0 100%);color:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;box-shadow:inset 0 0 0 12px rgba(0,0,0,0),inset 0 0 0 14px var(--panel),inset 0 0 0 16px rgba(0,0,0,.18),0 30px 50px -20px rgba(18,26,80,.55),0 2px 0 rgba(255,255,255,.5) inset;overflow:hidden}
.hB__word{font-family:var(--f-display);font-weight:800;font-size:clamp(3.4rem,13vw,7.6rem);line-height:.9;letter-spacing:.01em}
.hB__small{font-family:var(--f-mono);font-size:clamp(.7rem,.6rem + .4vw,.95rem);letter-spacing:.24em;text-transform:uppercase;opacity:.92}
.hB__screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#b9bec8 50%,#6b717c);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.hB__screw:nth-child(1){top:26px;left:26px}.hB__screw:nth-child(2){top:26px;right:26px}.hB__screw:nth-child(3){bottom:26px;left:26px}.hB__screw:nth-child(4){bottom:26px;right:26px}
.hB__screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:1.5px;background:rgba(0,0,0,.45);transform:rotate(35deg)}
.hB__shine{position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,0) 70%);width:60%;height:60%;left:var(--sx,10%);top:var(--sy,0%);pointer-events:none;mix-blend-mode:screen}
.hB__copy{display:grid;gap:18px;max-width:560px}
.hB__copy .mono{color:var(--muted)}
.hB__title{font-size:clamp(2.8rem,1.6rem + 5vw,6.4rem);line-height:.9;letter-spacing:-.04em}
.hB__lead{max-width:40ch;font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.hB__cta{display:flex;flex-wrap:wrap;gap:10px}
.hB__hours{display:grid;gap:6px;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.hB__hours div{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}
.hB__hours dt{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hB__hours dd{margin:0}
.hB__loaf{position:absolute;width:min(360px,58vw);aspect-ratio:3/2;left:max(0px,calc(50% - min(260px,44vw) - 20px));top:calc(96px + min(520px,88vw)/1.28 - 40px);z-index:2;pointer-events:none}
@media (min-width:960px){
  .hB__grid{grid-template-columns:1fr 1fr}
  .hB__hang{justify-self:center;width:min(560px,40vw)}
  .hB__loaf{left:calc(25% + min(560px,40vw) * .08);top:auto;bottom:max(4svh,40px);width:min(380px,28vw)}
}
@media (max-width:959px){.hB__copy{justify-self:center}}

/* ============ HERO C · Typo-Teig ============ */
.hC__inner{overflow-x:clip;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 0 clamp(28px,4vw,56px);gap:clamp(20px,3vw,40px)}
.hC__kicker{color:var(--muted)}
.hC__word{display:flex;justify-content:space-between;padding-inline:clamp(8px,2vw,32px);font-size:min(27vw,46svh);line-height:.8;letter-spacing:-.05em;color:var(--ink);user-select:none}
.hC__word span{display:inline-block;transform-origin:50% 100%;will-change:transform}
.hC__word span:nth-child(3){color:var(--accent)}
.hC__row{display:grid;gap:22px;grid-template-columns:1fr;align-items:end}
.hC__lead{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);max-width:30ch}
.hC__lead em{font-style:normal;color:var(--accent)}
.hC__cta{display:flex;flex-wrap:wrap;gap:10px}
.hC__badge{width:132px;height:132px;justify-self:end}
.hC__badge text{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;fill:var(--accent-ink)}
.hC__badge .hC__badge-n{font-family:var(--f-display);font-weight:800;font-size:34px;letter-spacing:-.02em}
@media (min-width:960px){.hC__row{grid-template-columns:1.2fr 1fr auto}.hC__cta{justify-content:flex-start}}
@media (max-width:959px){.hC__inner{justify-content:center}.hC__badge{position:absolute;right:16px;top:96px;width:104px;height:104px}}

/* ============ HALTUNG A · Drei Zutaten ============ */
.gA__grid{display:grid;gap:clamp(24px,4vw,56px)}
.gA__k{color:var(--muted)}
.gA__words{font-size:clamp(3.6rem,1.4rem + 10vw,12.5rem);line-height:.86;letter-spacing:-.05em}
.gA__w{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.gA__w > span{display:inline-block}
.gA__w--acc{color:var(--accent)}
.gA__p{max-width:42ch;font-size:clamp(1.05rem,1rem + .35vw,1.3rem)}
@media (min-width:960px){.gA__grid{grid-template-columns:1.6fr 1fr;align-items:end}.gA__k{grid-column:1/-1}}

/* ============ HALTUNG B · Brief ============ */
.gB__card{max-width:780px;margin-inline:auto;background:var(--paper);border-radius:28px;padding:clamp(28px,6vw,80px);box-shadow:0 40px 80px -50px rgba(36,28,23,.35),0 0 0 1px var(--line)}
.gB__k{color:var(--muted);margin-bottom:22px}
.gB__h{font-size:clamp(1.9rem,1.4rem + 2vw,3rem);letter-spacing:-.03em;margin-bottom:22px}
.gB__text{font-size:clamp(1.15rem,1rem + .8vw,1.75rem);line-height:1.5;letter-spacing:-.005em}
.gB__text .w{display:inline}
.gB__sig{width:min(240px,60%);margin-top:30px;color:var(--accent)}
.gB__who{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ============ HALTUNG C · Zahlen ============ */
.gC__h{font-size:clamp(2rem,1.4rem + 2.6vw,3.8rem);max-width:18ch;margin-bottom:clamp(36px,6vw,80px)}
.gC__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,48px)}
.gC__list li{position:relative;padding-top:22px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline}
.gC__list li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(var(--rule,1))}
.gC__n{font-family:var(--f-display);font-weight:800;font-size:clamp(6rem,4rem + 9vw,13rem);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.gC__list li:first-child .gC__n{color:var(--accent)}
.gC__u{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.gC__list p{grid-column:1/-1;max-width:32ch;margin-top:14px;color:var(--muted)}
@media (min-width:960px){.gC__list{grid-template-columns:repeat(3,1fr)}}

/* ============ ZEIT A · Zeitleiste ============ */
.zA{overflow:hidden}
.zeit:has(.zA:not([hidden])){padding-block:0}
.zA__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px);padding-top:72px}
.zA__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.zA__head h2{font-size:clamp(2.2rem,1.4rem + 3.4vw,5rem)}
.zA__clock{display:grid;justify-items:end;line-height:1}
.zA__hrs{font-family:var(--f-display);font-weight:800;font-size:clamp(3.2rem,2rem + 5vw,7rem);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.zA__bar{width:min(100% - 32px,1320px);margin-inline:auto;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.zA__bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.zA__track{list-style:none;margin:0;padding:0 max(16px,calc((100vw - 1320px)/2));display:flex;gap:clamp(16px,2vw,28px);width:max-content}
.zA__panel{width:min(84vw,560px);min-height:min(52svh,440px);background:var(--panel);border-radius:28px;padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 1px var(--line)}
.zA__panel .mono{color:var(--accent)}
.zA__panel h3{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.4rem + 2vw,3.4rem);letter-spacing:-.03em}
.zA__panel p{max-width:34ch;color:var(--muted)}
.zA__panel .dough{margin-top:auto;align-self:flex-end}
html.reduced .zA__pin{height:auto;padding-block:var(--pad)}
html.reduced .zA__track{flex-direction:column;width:auto}
html.reduced .zA__panel{width:auto}

/* ============ ZEIT B · Uhr ============ */
.zeit:has(.zB:not([hidden])){padding-block:0}
.zB__pin{min-height:100svh;display:flex;align-items:center;padding:84px 0 24px}
.zB__grid{display:grid;gap:clamp(18px,3vw,64px);align-items:center;grid-template-columns:1fr}
.zB__dial{position:relative;width:min(72vw,44svh,540px);aspect-ratio:1;justify-self:center}
.zB__dial svg{width:100%;height:100%;overflow:visible}
.zB__ring{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.zB__arc{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round}
.zB__ticks line{stroke:var(--ink);stroke-width:1.2;opacity:.45}
.zB__ticks line.major{stroke-width:2.4;opacity:1}
.zB__marks circle{fill:var(--panel);stroke:var(--ink);stroke-width:2}
.zB__marks circle.on{fill:var(--accent);stroke:var(--accent)}
.zB__marks text{font-family:var(--f-mono);font-size:13px;fill:var(--muted);letter-spacing:.04em}
.zB__hand{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.zB__center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none}
.zB__h{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,10vw,6.4rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.zB__center .mono{color:var(--muted)}
.zB__title{font-size:clamp(2.2rem,1.4rem + 3vw,4.8rem);margin-bottom:clamp(14px,3vw,36px)}
.zB__steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.zB__steps li{padding:12px 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .4s var(--ease-out)}
.zB__steps li.is-on{opacity:1}
.zB__steps li .mono{color:var(--accent)}
.zB__steps h3{margin:4px 0 4px}
.zB__steps p{color:var(--muted);max-width:40ch}
@media (min-width:960px){.zB__grid{grid-template-columns:1fr 1fr}.zB__dial{width:min(44vw,76svh,560px)}}
@media (max-width:959px){.zB__title{display:none}.zB__steps li{display:none}.zB__steps li.is-on{display:block;border-top:0;text-align:center}.zB__steps p{margin-inline:auto}}
html.reduced .zB__steps li{display:block;opacity:1}
html.reduced .zB__title{display:block}

/* ============ ZEIT C · Stapel ============ */
.zC__h{font-size:clamp(2.2rem,1.4rem + 3.4vw,5rem);max-width:14ch;margin-bottom:clamp(28px,5vw,64px)}
.zC__stack{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,3vh,28px)}
.zC__card{position:sticky;top:calc(92px + var(--i) * 16px);min-height:min(62svh,520px);border-radius:30px;background:var(--panel);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(36,28,23,.4);padding:clamp(22px,4vw,56px);display:grid;gap:20px;grid-template-columns:1fr;align-content:space-between;transform-origin:50% 0}
.zC__card:nth-child(even){background:var(--paper)}
.zC__card:last-child{background:var(--accent);color:var(--accent-ink)}
.zC__card:last-child p{color:color-mix(in srgb,var(--accent-ink) 82%,transparent)}
.zC__n{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,3rem + 9vw,11rem);line-height:.8;letter-spacing:-.06em}
.zC__n::after{content:" h";font-size:.3em;letter-spacing:0}
.zC__card h3{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,1.3rem + 2vw,3.2rem);letter-spacing:-.03em;margin-bottom:8px}
.zC__card p{max-width:36ch;color:var(--muted)}
.zC__card .dough{justify-self:end;align-self:end}
@media (min-width:960px){.zC__card{grid-template-columns:auto 1fr auto;align-items:end;column-gap:48px}}
html.reduced .zC__card{position:relative;top:auto}

/* ============ ANSCHNITT shared ============ */
.cut-canvas{width:100%;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:grab}
.board{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 3px,rgba(0,0,0,.03) 3px 7px),
  linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08)),
  linear-gradient(90deg,#C99B62,#D2A770 40%,#C3925A 70%,#CDA068);border-radius:32px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),0 30px 60px -36px rgba(80,40,10,.6)}
.seg{justify-self:start;display:inline-flex;padding:4px;border-radius:99px;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.seg button{min-width:64px;min-height:44px;padding:0 16px;border:0;border-radius:99px;background:transparent;font-weight:600;font-family:var(--f-mono);font-size:.9rem}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--canvas)}

/* ============ ANSCHNITT A · Bühne ============ */
.cA__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
.cA__copy{display:grid;gap:18px;align-content:start}
.cA__copy > .mono{color:var(--accent)}
.cA__copy > p:not(.mono){max-width:40ch}
.cA__read{display:grid;gap:0;margin:8px 0 0}
.cA__read div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.cA__read dt{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cA__read dd{margin:0;font-weight:600;text-align:right}
.cA__stagewrap{position:relative;padding:clamp(16px,3vw,40px);border-radius:32px}
.cA__canvas{aspect-ratio:5/4}
.cA__hint{position:absolute;top:clamp(20px,3vw,40px);left:50%;transform:translateX(-50%);color:rgba(36,28,23,.75);background:rgba(251,250,247,.75);padding:.35em .8em;border-radius:99px;pointer-events:none;transition:opacity .4s}
.cA__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.cA__btns .btn:not(.btn--ink){background:rgba(251,250,247,.7);border-color:transparent}
@media (min-width:960px){.cA__grid{grid-template-columns:5fr 7fr}}

/* ============ ANSCHNITT B · Vergleich ============ */
.cB__head{display:grid;gap:16px;margin-bottom:clamp(28px,4vw,56px);max-width:none}
.cB__head h2{max-width:13ch}
.cB__head p{max-width:46ch}
.cB__head .btn{justify-self:start}
.cB__grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
.cB__grid li{border-radius:28px;padding:14px 14px 0;display:grid}
.cB__grid canvas{aspect-ratio:4/3}
.cB__btn{display:grid;gap:4px;text-align:left;border:0;background:var(--paper);border-radius:0 0 20px 20px;margin:0 -14px;padding:16px 18px 20px;min-height:44px}
.cB__btn .mono{color:var(--muted)}
.cB__grid li:last-child .cB__btn .mono{color:var(--accent)}
.cB__btn strong{font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.02em;line-height:1.05}
.cB__btn span:last-child{color:var(--muted);font-size:.95rem}
@media (min-width:768px){.cB__grid{grid-template-columns:repeat(3,1fr)}.cB__head{grid-template-columns:1.2fr 1fr auto;align-items:end}}

/* ============ ANSCHNITT C · Lupe ============ */
.anschnitt:has(.cC:not([hidden])){padding-block:0}
.cC{background:var(--oven);color:#F2EDE6}
.cC__pin{position:relative;height:100svh;overflow:hidden}
.cC__canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.cC__ui{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:96px 0 28px;pointer-events:none}
.cC__copy{max-width:380px;display:grid;gap:12px}
.cC__copy .mono{color:#9fb1ff}
.cC__copy h2{font-size:clamp(2.4rem,1.6rem + 3vw,4.8rem)}
.cC__p{color:rgba(242,237,230,.8);max-width:34ch}
.cC__meter{align-self:flex-end;display:grid;justify-items:end;text-align:right;gap:2px}
.cC__h{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,2rem + 8vw,9rem);line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cC__desc{font-size:1.05rem;color:rgba(242,237,230,.8)}
@media (max-width:767px){.cC__copy{max-width:none}.cC__p{display:none}}

/* ============ SORTIMENT A · Regal ============ */
.sA__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.sA__head p{color:var(--muted)}
.sA__shelf{list-style:none;margin:0;padding:6px max(16px,calc((100vw - 1320px)/2)) 24px;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;perspective:1200px}
.sA__shelf::-webkit-scrollbar{display:none}
.bread{scroll-snap-align:start;background:var(--panel);border-radius:26px;padding:16px 18px 18px;display:grid;gap:4px;box-shadow:0 0 0 1px var(--line);transform-style:preserve-3d;will-change:transform;position:relative}
.bread::after{content:"";position:absolute;left:10px;right:10px;bottom:-12px;height:12px;border-radius:0 0 12px 12px;background:linear-gradient(#b98a52,#9a6f3e);opacity:.9}
.bread canvas{width:100%;aspect-ratio:3/2;margin-bottom:6px}
.bread h3{font-family:var(--f-display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em}
.bread p{color:var(--muted);font-size:.95rem}
.bread__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.85rem}
.bread__meta b{font-family:var(--f-display);font-size:1.3rem;font-weight:800}
@media (min-width:960px){.sA__shelf{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;width:min(100% - 64px,1320px);margin-inline:auto;padding:6px 0 24px;row-gap:44px;column-gap:24px}}

/* ============ SORTIMENT B · Tafel ============ */
.sB__board{background:radial-gradient(130% 100% at 20% 0%,#3556d8 0%,var(--accent) 45%,#1b34a3 100%);color:var(--accent-ink);border-radius:clamp(24px,3vw,40px);padding:clamp(24px,5vw,72px);box-shadow:inset 0 0 0 10px rgba(0,0,0,0),inset 0 0 0 12px rgba(244,242,237,.85),0 40px 80px -40px rgba(18,26,80,.6)}
.sB__top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,40px)}
.sB__top h2{font-size:clamp(2.4rem,1.4rem + 4vw,5.6rem)}
.sB__list{list-style:none;margin:0;padding:0}
.sB__list li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:end;gap:12px;padding:16px 0;border-top:1px solid rgba(244,242,237,.22);cursor:default}
.sB__thumb{width:64px;height:44px}
.sB__name{font-family:var(--f-display);font-weight:600;font-size:clamp(1.25rem,1rem + 1.2vw,2.1rem);letter-spacing:-.02em;line-height:1.05;display:grid}
.sB__name small{font-family:var(--f-body);font-weight:400;font-size:.88rem;letter-spacing:0;opacity:.8;margin-top:2px}
.sB__list i{display:none;border-bottom:2px dotted rgba(244,242,237,.5);transform:translateY(-.5em)}
.sB__list b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,1rem + 1.2vw,2.1rem);font-variant-numeric:tabular-nums}
.sB__list li:hover .sB__name{color:#fff}
.sB__foot{margin-top:18px;opacity:.8}
.sB__float{position:fixed;left:0;top:0;width:280px;height:190px;pointer-events:none;z-index:60;opacity:0}
@media (min-width:960px){.sB__list li{grid-template-columns:1fr minmax(40px,1fr) auto;padding:20px 0}.sB__thumb{display:none}.sB__list i{display:block}}
@media (pointer:coarse){.sB__float{display:none}}

/* ============ SORTIMENT C · Wochenplan ============ */
.sC__head{display:grid;gap:14px;margin-bottom:28px}
.sC__head h2{max-width:16ch}
.sC__head p{color:var(--muted);max-width:50ch}
.sC__tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px}
.sC__tabs button{min-width:64px;min-height:48px;border-radius:99px;border:1.5px solid var(--line-strong);background:transparent;font-family:var(--f-mono);font-weight:500;font-size:.95rem;letter-spacing:.04em}
.sC__tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sC__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{background:var(--panel);border-radius:22px;padding:12px 14px 16px;box-shadow:0 0 0 1px var(--line)}
.tile canvas{width:100%;aspect-ratio:3/2}
.tile h3{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,1rem + .5vw,1.45rem);letter-spacing:-.02em;margin-top:4px}
.tile span{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.tile.is-off{display:none}
@media (min-width:768px){.sC__grid{grid-template-columns:repeat(3,1fr);gap:18px}}

/* ============ ORDER A · Bon ============ */
.oA__grid{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.oA__copy{display:grid;gap:18px}
.oA__copy > .mono{color:var(--accent)}
.oA__copy p:not(.mono){max-width:38ch}
.oA__bon{position:relative;justify-self:center;width:min(460px,100%);background:var(--paper);padding:34px clamp(18px,4vw,32px) 34px;display:grid;gap:16px;filter:drop-shadow(0 30px 40px rgba(36,28,23,.18));
  -webkit-mask:radial-gradient(9px at 50% 0,#0000 98%,#000) 50% 0/18px 51% repeat-x,radial-gradient(9px at 50% 100%,#0000 98%,#000) 50% 100%/18px 51% repeat-x;
  mask:radial-gradient(9px at 50% 0,#0000 98%,#000) 50% 0/18px 51% repeat-x,radial-gradient(9px at 50% 100%,#0000 98%,#000) 50% 100%/18px 51% repeat-x}
.oA__bonhead{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1.5px dashed var(--line-strong)}
.oA__items{border:0;margin:0;padding:0;display:grid;gap:2px}
.qty{display:grid;grid-template-columns:1fr auto 52px;align-items:center;gap:10px;padding:6px 0;font-size:.98rem}
.qty div{display:flex;align-items:center;gap:2px}
.qty button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;font-size:1.1rem;line-height:1}
.qty output{min-width:26px;text-align:center;font-family:var(--f-mono);font-weight:500}
.qty b{font-family:var(--f-mono);font-weight:500;text-align:right}
.oA__sum{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1.5px dashed var(--line-strong);border-bottom:1.5px dashed var(--line-strong)}
.oA__total{font-family:var(--f-display);font-size:1.8rem;font-variant-numeric:tabular-nums}
.oA__fields{display:grid;gap:12px}
.oA__fields .field input,.oA__fields .field select{--field-bg:#fff}
.oA__submit{width:100%}
.oA__stamp{position:absolute;right:22px;top:58px;padding:.25em .6em;border:3px solid var(--accent);border-radius:10px;color:var(--accent);font-family:var(--f-display);font-weight:800;font-size:1.8rem;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-12deg);opacity:0;pointer-events:none}
.oA__bon.is-sent .oA__stamp{opacity:.9}
@media (min-width:960px){.oA__grid{grid-template-columns:1fr 1fr}}

/* ============ ORDER B · Split ============ */
.oB__grid{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.oB__h{font-size:clamp(3.2rem,1.6rem + 7vw,9rem);line-height:.86;letter-spacing:-.05em}
.oB__h em{font-style:normal;color:var(--accent)}
.oB__form{display:grid;gap:14px;background:var(--panel);border-radius:28px;padding:clamp(20px,4vw,44px);box-shadow:0 0 0 1px var(--line)}
.oB__two{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
.oB__form .btn{justify-self:start}
@media (min-width:960px){.oB__grid{grid-template-columns:1.2fr 1fr}}

/* ============ ORDER C · Ofenfenster ============ */
.oC__grid{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.oC__oven{position:relative;width:min(84vw,520px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--oven);justify-self:center;box-shadow:0 40px 80px -40px rgba(60,20,0,.6)}
.oC__fire{position:absolute;inset:0;width:100%;height:100%}
.oC__rim{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 16px #2b2420,inset 0 0 0 19px #6a6058,inset 0 0 0 22px #2b2420,inset 0 0 70px 20px rgba(0,0,0,.65)}
.oC__copy{display:grid;gap:18px}
.oC__copy > .mono{color:var(--accent)}
.oC__form{display:grid;gap:12px;max-width:460px}
.oC__form .btn{justify-self:start}
@media (min-width:960px){.oC__grid{grid-template-columns:1fr 1fr}}

/* ============ FOOTER ============ */
.site-foot{position:relative;z-index:1;background:var(--ink);color:var(--canvas);padding:clamp(64px,8vw,120px) 0 32px}
.foot__grid{display:grid;gap:28px}
.foot__word{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,2rem + 10vw,11rem);line-height:.8;letter-spacing:-.05em;display:block;margin-bottom:12px}
.site-foot .mono{opacity:.6;margin-bottom:6px}
.site-foot .muted{color:rgba(233,230,224,.65)}
.site-foot a{color:inherit}
.foot__legal{grid-column:1/-1;padding-top:24px;border-top:1px solid rgba(233,230,224,.15);font-size:.85rem;color:rgba(233,230,224,.65)}
@media (min-width:960px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}

/* variant chips sit below the fixed header */
.chapter .vchip{top:16px}
.hero .vchip{top:84px}

/* ================= v2 · modern layer ================= */
/* night tone for the 48-hour chapter: most of the work happens at night, in the cold */
.chapter[data-tone="night"]{--canvas:#121831;--panel:#1B2246;--paper:#212A52;--ink:#EEEBE4;--muted:#A9B0CC;--line:rgba(238,235,228,.13);--line-strong:rgba(238,235,228,.3);--accent:#93A6FF;--accent-ink:#121831;--accent-muted:#3A4890}
.chapter[data-tone="night"] .zA__panel,.chapter[data-tone="night"] .zC__card{box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(0,0,0,.7)}
.chapter[data-tone="night"] .dough{box-shadow:inset -10px -14px 28px rgba(140,100,50,.25),0 0 60px -10px rgba(255,236,200,.18)}
.site-head{--head-dark-ink:#EEEBE4}

/* hero A annotations */
.hA__notes{position:absolute;inset:0;z-index:5;pointer-events:none;display:none}
.note{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:flex-start}
.note i{flex:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}
.note em{position:relative;display:grid;gap:1px;margin:-.62em 0 0 46px;font-style:normal;font-size:.8rem;line-height:1.3;color:var(--muted);white-space:nowrap}
.note em::before{content:"";position:absolute;right:calc(100% + 6px);top:.62em;width:36px;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(var(--l,1))}
.note b{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.note--l{flex-direction:row-reverse}
.note--l i{margin:-5px -5px 0 0}
.note--l em{margin:-.62em 46px 0 0;text-align:right}
.note--l em::before{right:auto;left:calc(100% + 6px);transform-origin:right}
.note--b{flex-direction:column;align-items:center;transform:translateX(-50%)}
.note--b i{margin:-5px 0 0}
.note--b em{margin:26px 0 0;text-align:center;justify-items:center}
.note--b em::before{left:50%;right:auto;top:-22px;width:1px;height:18px;transform-origin:top;transform:scaleY(var(--l,1))}
@media (min-width:960px){.hA__notes{display:block}}

/* marquee band */
.band{position:relative;z-index:2;margin:clamp(-8px,-1vw,-4px) -24px 0;padding:clamp(14px,1.6vw,22px) 0;background:var(--accent);color:var(--accent-ink);transform:rotate(-1.4deg);box-shadow:0 24px 50px -30px rgba(18,26,80,.7)}
.band__item{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,1rem + 3.4vw,4rem);letter-spacing:-.03em;line-height:1;padding:0 .45em}
.band__sep svg{width:clamp(30px,3vw,46px);height:auto;display:block}
.band__sep path{fill:none;stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.band__sep .cut{stroke-width:2}

/* hero C: letters cut from real crumb */
.hC__word{position:relative;filter:drop-shadow(0 22px 26px rgba(36,28,23,.16))}
.hC__word.has-crumb span:not(:nth-child(3)){color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;-webkit-text-stroke:.016em #6a3413}

/* sortiment A: hover cuts the loaf open */
.bread{cursor:none}
@media (pointer:coarse){.bread{cursor:pointer}}
.bread__cut{position:absolute;left:18px;top:16px;width:calc(100% - 36px);aspect-ratio:3/2;clip-path:circle(0% at var(--cx,50%) var(--cy,50%));transition:clip-path .75s var(--ease-out);pointer-events:none;background:var(--panel);border-radius:14px}
.bread.is-cut .bread__cut{clip-path:circle(80% at var(--cx,50%) var(--cy,50%))}
.bread__hint{position:absolute;right:26px;top:24px;padding:.3em .6em;border-radius:99px;background:var(--ink);color:var(--canvas);font-size:.62rem;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s var(--ease-out)}
.bread.is-cut .bread__hint{opacity:1;transform:none}

/* footer: closing call and a wordmark that fills the width */
.foot__cta{display:grid;gap:14px;padding-bottom:clamp(40px,6vw,88px);margin-bottom:clamp(36px,5vw,64px);border-bottom:1px solid rgba(233,230,224,.15)}
.foot__big{display:flex;justify-content:space-between;align-items:center;gap:20px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,1.2rem + 6.4vw,8.4rem);line-height:.92;letter-spacing:-.045em;color:var(--canvas)}
.foot__bigt{background:linear-gradient(currentColor,currentColor) 0 100%/0% 4px no-repeat;padding-bottom:.06em;transition:background-size .7s var(--ease-out)}
.foot__big:hover .foot__bigt,.foot__big:focus-visible .foot__bigt{background-size:100% 4px}
.foot__arr{display:grid;place-items:center;flex:none;width:clamp(64px,8vw,120px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.5em;transition:transform .6s var(--ease-out)}
.foot__big:hover .foot__arr{transform:rotate(-45deg) scale(1.06)}
.foot__wordwrap{margin-top:clamp(36px,5vw,64px);overflow:hidden;line-height:.76}
.foot__word{font-family:var(--f-display);font-weight:800;letter-spacing:-.055em;color:rgba(233,230,224,.92);margin:0 0 -.12em;user-select:none}

/* phones: the wordmark keeps a margin to the right edge (portfolio build, 09.10) */
@media (max-width:420px){.hC__word{font-size:min(25vw,46svh)}}