/* The native meal card expands from its photo, then returns as one object. */
.meal-object{width:400px;height:89px;overflow:hidden;border-radius:12px;background:transparent}
.meal-object>.meal{pointer-events:none}
.photo-object{z-index:6}
.enhanced:not(.reduced) #einkauf{min-height:100svh}
.recipe-phone-story{grid-column:1/-1;position:relative;height:310svh;scroll-margin-top:88px}
.recipe-phone-stage{position:sticky;top:88px;height:calc(100svh - 88px);display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;overflow:hidden}
.recipe-phone-caption{max-width:410px}
.recipe-phone-caption h3{font-size:clamp(32px,3.6vw,54px);line-height:1.07;margin:18px 0}
.recipe-phone-caption>p{font-size:18px;line-height:1.65;color:#52604b}
.recipe-progress{display:flex;gap:10px;margin-top:26px}
.recipe-progress i{height:3px;width:38px;background:#c5ceb8;border-radius:4px}
.recipe-progress i.active{background:#dd642e}
.recipe-device{justify-self:center;width:min(360px,100%,calc((100svh - 138px)*.51));aspect-ratio:320/640;padding:9px;border-radius:36px;background:linear-gradient(115deg,#818781,#343a35 12%,#151b16 80%,#5e635d);box-shadow:18px 25px 35px #28372525,3px 5px 0 #727970;position:relative}
.recipe-device-display{width:100%;height:100%;border-radius:28px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 28px);background:#171918;position:relative}
.recipe-device-bar{height:48px;display:flex;align-items:center;gap:10px;padding:12px 18px;color:#f4f5f1;background:#171918;font-size:14px;border-bottom:1px solid #353a36}
.recipe-device-bar img{width:24px;height:24px}
.recipe-device-viewport{position:absolute;inset:48px 0 0;overflow:hidden}
.recipe-device-content{display:block;width:calc(100% - 24px);max-width:none;margin:12px;will-change:transform}
.recipe-rich .recipe-cookbook>summary{font-size:22px}
@media(max-width:960px){.recipe-phone-story{height:300svh;scroll-margin-top:72px}.recipe-phone-stage{top:72px;height:calc(100svh - 72px);grid-template-columns:1fr;grid-template-rows:210px minmax(0,1fr);gap:20px;padding:22px 0 26px}.recipe-phone-caption{max-width:580px;align-self:start}.recipe-phone-caption h3{font-size:29px;margin:10px 0}.recipe-phone-caption>p{font-size:15px;line-height:1.5}.recipe-progress{margin-top:14px}.recipe-device{height:100%;width:auto;max-width:100%;max-height:550px}.recipe-phone-caption .recipe-eyebrow{font-size:10px}}
@media(max-width:360px){.recipe-phone-stage{grid-template-rows:238px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.recipe-phone-story{height:auto}.recipe-phone-stage{position:relative;top:auto;height:750px}.recipe-device-viewport{overflow-y:auto;overscroll-behavior:contain}.recipe-device-content{transform:none!important;will-change:auto}.recipe-progress{display:none}}
@media(min-width:961px){.enhanced:not(.reduced) #tage .copy{top:max(104px,calc(50svh + 14px - var(--copy-height,500px)/2))}}
@media(min-width:961px){.enhanced:not(.reduced) #statistik .copy{top:max(104px,calc(50svh + 14px - var(--copy-height,500px)/2))}}
@media(min-width:961px){
  .enhanced:not(.reduced) #statistik .copy{padding-top:clamp(16px,calc(6svh - 26px),28px);padding-bottom:clamp(18px,calc(5svh - 17px),28px)}
  #statistik .copy h2{font-size:clamp(45px,min(5vw,calc(11svh - 24px)),82px)}
  #statistik .copy p{font-size:clamp(18px,calc(1.5svh + 7.5px),21px);margin-top:clamp(14px,calc(6svh - 28px),26px)}
  #statistik .stats-companion{margin-top:clamp(14px,calc(4svh - 14px),22px);padding-top:clamp(10px,calc(2svh - 4px),14px)}
}
@media(min-width:961px) and (max-width:1100px){#statistik .copy p{font-size:clamp(16px,calc(1.5svh + 7.5px),18px)}}

.header .brand-mark{width:42px;height:42px;flex:none}
@media(max-width:960px){.header .brand-mark{width:32px;height:32px}}
.enhanced .stage{transition:opacity .24s ease}
.story-pending .stage{opacity:0}
.story-pending .chapter:not(.hero){opacity:0}
.story-pending .chapter:not(.hero) .copy{visibility:hidden}
@media(prefers-reduced-motion:reduce){.enhanced .stage{transition:none}}

/* The captured ring label has a fixed 97px width; live font metrics can wrap it. */
.phone-live-ring .calories > span,.live-ring .calories > span{width:max-content!important;white-space:nowrap}

/* Captured number geometry belongs to 87; let 630 keep its own centered width. */
.phone-live-ring .calories > b,.live-ring .calories > b{width:max-content!important;white-space:nowrap;text-align:center!important;padding-left:.065em!important}