/* Refinement of the original cinematic design; the original scene structure stays intact. */
.sorte{padding:14px 14px 22px;border:1px solid rgba(92,80,65,.15);border-radius:5px;box-shadow:0 8px 24px -18px rgba(31,26,19,.28)}
.sorte .pic{aspect-ratio:1/1;margin:0 0 18px;border-radius:3px}
.sorte h3,.sorte p{margin-left:6px;margin-right:6px}
.sorte .vegan{margin-left:6px;font-size:11px;letter-spacing:.1em}
.sorte p{font-size:15px;line-height:1.6}
.h-track{perspective:1400px}
.anim .sorte{transform:translateY(calc((1 - var(--c,0))*22px)) rotateY(calc(var(--lean,0)*-6deg)) scale(calc(.965 + .035*var(--c,0)));transform-origin:50% 50%}
.sorte:hover{box-shadow:0 22px 42px -25px rgba(31,26,19,.4)}
.split-q .qw{display:inline-block;white-space:nowrap}
.rail-controls{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
html:not(.anim) .rail-controls{display:none}
.rail-controls button{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(79,106,40,.4);border-radius:50%;background:transparent;color:var(--accent-deep);font:20px Archivo,sans-serif;cursor:pointer;transition:background .18s}
.rail-controls button:hover{background:rgba(111,138,63,.1)}
.h-track:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-5px}
@media(min-width:721px) and (max-height:780px){.sorte .pic{aspect-ratio:4/3}.pin-head{margin-bottom:22px}.pin-foot{margin-top:20px}.pin-head .angolo{width:30px;height:30px;margin-bottom:12px}}
@media(max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .h-track,.anim .h-track{overflow-x:auto;transform:none;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:thin;padding-bottom:20px;perspective:none}
  .sorte,.anim .sorte{scroll-snap-align:start;transform:none}.anim .sorte .pic img{transform:none}
  .pin-foot{flex-wrap:wrap}.rail-controls{margin-left:0}.rail-controls button{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.sorte .pic img{transition:none}.rail-controls button{transition:none}}

/* Shorter opening, one stable lighting layer, no moving black text panels. */
:root{--tshadow:0 2px 12px rgba(18,12,6,.32)}
#hero{height:calc(var(--vh) + min(100vh,900px))}
.band::before,.band.settle::before{content:none}
.scrim{background:linear-gradient(90deg,rgba(18,12,6,.44),rgba(18,12,6,.16) 42%,transparent 72%)}
.bands{display:block;padding:0}
.band{left:max(6vw,calc((100vw - 1180px)/2));top:49%;width:min(560px,43vw);transform:translateY(calc(-50% - var(--leave,0)*22px));}
.band .inner{font-size:clamp(40px,5.2vw,74px);max-width:14ch;line-height:1.06;letter-spacing:-.035em}
.band:nth-child(2) .inner{font-size:clamp(36px,4.1vw,60px);max-width:none;line-height:1.14}
.band[data-fx] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*24px));}
.band .settle-k{background:none;border:0;border-radius:0;padding:0;text-shadow:inherit;font-size:11px;letter-spacing:.2em}
.settle-frame{display:none}
#theke::after{background:linear-gradient(180deg,rgba(18,12,6,.20),transparent 28%,transparent 55%,rgba(18,12,6,.46))}
.theke-cap{text-shadow:0 2px 12px rgba(18,12,6,.35)}
.sticky-col figure,.sticky-col img{transition:none}
.sticky-col{background:var(--canvas-2);isolation:isolate}
.sticky-col figure{will-change:opacity,transform}
.sticky-col figure{transform-origin:85% 65%;box-shadow:-12px 8px 32px rgba(31,26,19,.16)}
.sticky-col img{object-position:50% 50%}

/* Two spacious photographic panels replace the illustrated scoop widget. */
#kugel.ingredient-story{padding:0;overflow:visible;background:var(--deep);color:var(--on-deep);scroll-margin-top:72px}
.ingredient-stage{overflow:hidden;position:relative}
.ingredient-track{display:flex;flex-direction:column}
.ingredient-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw;padding:80px max(6vw,calc((100vw - 1180px)/2));min-width:100%;box-sizing:border-box}
.ingredient-copy h2{font:700 clamp(36px,4.5vw,66px)/1.05 Fraunces,serif;letter-spacing:-.03em;margin:22px 0}
.ingredient-copy h2 em{color:var(--accent-hi);font-style:italic}
.ingredient-copy>p:not(.kicker){max-width:32ch;color:var(--on-deep-soft);font-size:18px;line-height:1.65}
.ingredient-copy .kicker{color:var(--accent-hi)}
.ingredient-panel figure{margin:0;overflow:hidden;aspect-ratio:1/1;max-height:65vh}
.ingredient-panel img{width:100%;height:100%;object-fit:cover}
.ingredient-direction{display:flex;align-items:center;gap:24px;margin-top:44px;font:10px 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.15em;color:var(--on-deep-soft)}
.ingredient-direction span{font:32px Archivo,sans-serif;color:var(--accent-hi)}
.ingredient-detail{background:#343322}
.ingredient-detail dl{margin-top:32px}
.ingredient-detail dl>div{border-top:1px solid rgba(242,232,216,.2);padding:18px 0;display:grid;grid-template-columns:64px 1fr;gap:20px}
.ingredient-detail dt{font:11px 'Space Mono',monospace;text-transform:uppercase;color:var(--accent-hi)}
.ingredient-detail dd{margin:0;font-size:16px;line-height:1.5;color:var(--on-deep)}
.ingredient-progress{display:none}
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
 .anim #kugel.ingredient-story{height:220vh}
 .anim .ingredient-stage{position:sticky;top:0;height:var(--vh)}
 .anim .ingredient-track{height:100%;flex-direction:row;transform:translate3d(calc(var(--journey,0)*-100%),0,0);will-change:transform}
 .anim .ingredient-panel{height:100%;flex:0 0 100%;padding-top:85px;padding-bottom:60px}
 .anim .ingredient-progress{display:block;position:absolute;bottom:28px;left:6vw;right:6vw;height:1px;background:rgba(242,232,216,.18)}
 .ingredient-progress i{display:block;width:100%;height:100%;background:var(--accent-hi);transform:scaleX(calc(.08 + var(--journey,0)*.92));transform-origin:left}
}
@media(max-width:1024px){.ingredient-panel{padding:56px 24px;gap:32px}.ingredient-direction{display:none}}
@media(max-width:720px){.ingredient-panel{grid-template-columns:1fr}.ingredient-panel figure{aspect-ratio:4/3;max-height:none}.ingredient-copy h2{font-size:40px}.ingredient-detail figure{order:-1}}
@media(prefers-reduced-motion:reduce){.ingredient-direction{display:none}.sticky-col figure{transform:none!important}.sticky-col img{transform:none!important}}

/* Continuous section edges; lighting belongs to the frame, never to text. */
#theke{background:var(--canvas-2)}
#theke .poster,#theke video{transform:scale(calc(1.035 - var(--entry,1)*.035));transform-origin:center}
#theke::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(var(--canvas-2),rgba(236,226,208,0) 90px);opacity:1}
#theke{border-radius:calc((1 - var(--entry,1))*24px) calc((1 - var(--entry,1))*24px) 0 0}
.ingredient-detail{background:var(--deep)}
#kugel.ingredient-story::after{content:none}
#kugel.ingredient-story{position:relative}
#handwerk{position:relative;padding-top:clamp(96px,14vh,140px)}
#handwerk::after{content:none}
#espresso::before{content:none}
.esp-grid{transform:none}
@media(prefers-reduced-motion:reduce){#theke::before,#espresso::before{display:none}.esp-grid,#theke video,#theke .poster{transform:none}}

/* Center both end cards, using measured center-to-center travel. */
@media(min-width:721px) and (prefers-reduced-motion:no-preference){
 .pin-h{height:190vh}
 .h-track{padding-inline:calc((100% - clamp(210px,25vw,268px))/2)}
}
.hw-dissolve{position:absolute;inset:0;background:#faf7f0;border-radius:20px;overflow:hidden;will-change:transform;box-shadow:0 18px 42px -24px rgba(51,43,30,.32),0 0 0 1px rgba(255,255,255,.45)}
.sticky-col{overflow:visible;background:none;perspective:none;isolation:auto}
.sticky-col figure{backface-visibility:visible;transform-origin:center;box-shadow:none;overflow:hidden;border-radius:20px;background:transparent}
.hw-mobile{border-radius:18px;box-shadow:0 16px 32px -24px rgba(51,43,30,.35)}
.hw-mobile img{display:block;width:100%;height:auto}
.sticky-col img{transform:none!important}
/* The coffee frame opens cleanly; no added gradient at either boundary. */
@media(prefers-reduced-motion:no-preference){
 .anim #espresso{clip-path:inset(0 calc((1 - var(--entry,1))*3%) 0 round calc((1 - var(--entry,1))*22px))}
}
@media(max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
 .pin-h{height:auto}.h-track{padding-inline:calc((100% - clamp(210px,25vw,268px))/2);scroll-padding-inline:calc((100% - clamp(210px,25vw,268px))/2)}
}