/* MORGEN – freely designed demo for an invented village bakery. The page works like the board in the shop: dark board green, chalk white,
   crust brown for prices. Photos carry it (hero.jpg, bild-2.jpg, bild-3.jpg, see BILDER-AUFTRAG.md); a missing photo leaves a calm board-coloured field.
   The start page scrolls this page inside its film and cards, so all scroll motion below also plays there. */
@font-face{font-family:DM;src:url('/assets/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--board:#18221d;--board-2:#202d26;--chalk:#f4f1e8;--muted:#a9b5aa;--crust:#d9964a;--butter:#f0c752;--rule:#f4f1e826;--side:clamp(20px,5.5vw,96px);--serif:Charter,'Iowan Old Style','Palatino Linotype',Georgia,serif;--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--board);color:var(--chalk);font:400 17px/1.6 DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--butter);outline-offset:4px}
::selection{background:var(--butter);color:var(--board)}
.skip{position:fixed;top:-60px;left:16px;z-index:50;padding:10px 16px;background:var(--chalk);color:var(--board)}
.skip:focus{top:10px}

/* Bar: name left, whether the shop is open right now in the middle (morgen.js), the four places of the page right. */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;min-height:68px;padding:0 var(--side);background:#18221df2;border-bottom:1px solid var(--rule);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:.28em;min-height:44px;margin-right:auto;font-family:var(--serif);font-size:22px;text-decoration:none}
.brand b{font-weight:400;font-style:italic;color:var(--crust)}
.open-now{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.open-now i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.open-now.is-open{color:var(--chalk)}
.open-now.is-open i{background:var(--butter)}
.bar nav{display:flex;gap:26px;font-size:15px}
.bar nav a{padding:10px 0;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.bar nav a:hover{border-color:var(--crust)}
.menu-toggle{display:none;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer}

/* Opening: the bread fills the screen's width, the sentence sits on its calm lower part, the day's offer hangs at the edge like a note on the counter. */
.hero{position:relative;display:grid;align-items:end;min-height:clamp(440px,48vw,700px);isolation:isolate}
.photo{position:relative;overflow:hidden;background:var(--board-2)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo.no-photo img{visibility:hidden}
.photo.no-photo:after{content:'Foto folgt';position:absolute;right:16px;bottom:12px;font-size:12px;color:var(--muted)}
.hero-photo{position:absolute;inset:0;z-index:-1}
.hero-photo:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#18221d00 35%,#18221de6 92%)}
.hero-text{max-width:760px;padding:0 var(--side) clamp(36px,5vw,72px)}
.hero h1{font-size:clamp(40px,6vw,92px);line-height:1.02}
.hero-text p{max-width:520px;margin-top:20px;font-size:clamp(17px,1.35vw,20px);color:#e4e0d4}
.ticket{position:absolute;right:var(--side);bottom:-38px;z-index:2;width:min(300px,calc(100% - 2*var(--side)));padding:20px 22px 22px;background:var(--chalk);color:var(--board);border-radius:4px;box-shadow:0 18px 40px -18px #000c;transform:rotate(-1.4deg)}
.ticket-day{font-size:13px;color:#4c5a50}
.ticket-item{margin-top:6px;font-family:var(--serif);font-size:26px;line-height:1.15}
.ticket-note{margin-top:10px;font-size:15px;font-variant-numeric:tabular-nums;color:#7a4a17}

/* The board: what lies in the display case today, with prices like on the shop's board. */
.board{padding:clamp(90px,10vw,150px) var(--side) clamp(60px,7vw,110px)}
.board-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 60px;align-items:end;padding-bottom:34px;border-bottom:1px solid var(--rule)}
.board h2,.hours h2{font-size:clamp(30px,3.6vw,54px);line-height:1.08}
.board-head p{max-width:420px;color:var(--muted)}
.board-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(28px,4vw,70px);margin-top:40px}
.board h3{margin-bottom:14px;font:italic 400 22px/1.2 var(--serif);color:var(--crust)}
.prices li{display:flex;align-items:baseline;gap:10px;padding:9px 0}
.prices i{flex:1;min-width:18px;border-bottom:1px dotted #f4f1e855;transform:translateY(-4px)}
.prices b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Bakehouse and ordering: photo and text side by side, mirrored the second time. */
.bakehouse,.order{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(40px,5vw,80px) var(--side)}
.bakehouse .photo,.order .photo{aspect-ratio:4/3;border-radius:4px}
.bakehouse h2,.order h2{font-size:clamp(28px,3.2vw,48px);line-height:1.1}
.bakehouse-text p,.order-text p{max-width:520px;margin-top:20px;color:#dcd8cb}
.facts{margin-top:26px;border-top:1px solid var(--rule)}
.facts li{padding:12px 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.facts b{font-weight:500;color:var(--chalk)}
.order-text .phone{margin-top:28px;font-family:var(--serif);font-size:clamp(34px,4.4vw,64px);line-height:1;font-variant-numeric:tabular-nums;color:var(--crust)}

/* Opening hours with today marked (morgen.js), and where to find the shop. */
.hours{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px clamp(30px,5vw,90px);padding:clamp(60px,7vw,110px) var(--side);border-top:1px solid var(--rule)}
.hours h2{grid-column:1/-1}
.hours table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours th,.hours td{padding:13px 0;border-bottom:1px solid var(--rule);font-weight:400;text-align:left}
.hours td{text-align:right;color:var(--muted)}
.hours tr.is-today th,.hours tr.is-today td{color:var(--butter)}
.hours tr.is-today th:after{content:' · heute';font-size:13px}
.hours address{font-style:normal;line-height:1.8;color:#dcd8cb}

/* The designer's word at the end, in the look of the Dopamine Dept page. */
.studio{padding:clamp(60px,7vw,110px) var(--side);background:#080808;color:#f3f2ed}
.studio h2{max-width:900px;font:800 clamp(30px,4vw,60px)/1 DM,Arial,sans-serif;letter-spacing:-.05em;text-transform:uppercase}
.studio p{max-width:560px;margin-top:22px;color:#c8c8c8}
.studio-link{display:inline-flex;align-items:center;gap:26px;min-height:56px;margin-top:30px;padding:0 28px;border:1px solid #f3f2ed;border-radius:999px;text-decoration:none;transition:background .3s,color .3s}
.studio-link svg{width:22px;height:22px}
.studio-link:hover{background:#f3f2ed;color:#080808}
.demo-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px var(--side) 22px;background:#080808;color:#a6a6a6;font-size:13px;border-top:1px solid #ffffff2e}

/* Motion, soft and warm (values from demo.js: --p travel through the screen, --in arrival, --v scroll speed): the bread drifts slower than the page,
   the note on the counter sways when the page moves, the dotted lines of the price board draw themselves row by row and the prices follow,
   the two photos open from below like an oven door, today's row in the opening hours slides in last. */
.hero-photo img{transform:translateY(calc((var(--p,.5) - .5)*-14%)) scale(1.14)}
.ticket{transform:rotate(calc(-1.4deg + var(--v,0)*6deg));transform-origin:50% -40px;transition:transform .5s var(--ease)}
.animated .ticket{animation:ticket-hang 1.6s var(--ease) .5s backwards}
@keyframes ticket-hang{0%{opacity:0;transform:rotate(-9deg) translateY(-18px)}45%{opacity:1;transform:rotate(3deg)}70%{transform:rotate(-2.4deg)}100%{transform:rotate(-1.4deg)}}
.prices li{--row:clamp(0,calc((var(--in,1) - var(--k,0)*.13)*2.4),1)}
.prices li:nth-child(2){--k:1}
.prices li:nth-child(3){--k:2}
.prices li:nth-child(4){--k:3}
.prices span{opacity:var(--row);transform:translateX(calc((1 - var(--row))*-14px))}
.prices i{transform:translateY(-4px) scaleX(var(--row));transform-origin:0 50%}
.prices b{opacity:var(--row)}
.door{clip-path:inset(calc((1 - var(--in,1))*100%) 0 0 0 round 4px)}
.door img{transform:scale(calc(1.18 - .18*var(--in,1)))}
.hours tr{opacity:clamp(0,calc((var(--in,1) - var(--d,0)*.09)*3),1)}
.hours tr:nth-child(2){--d:1}.hours tr:nth-child(3){--d:2}.hours tr:nth-child(4){--d:3}.hours tr:nth-child(5){--d:4}.hours tr:nth-child(6){--d:5}.hours tr:nth-child(7){--d:6}

/* Arrival (demo.js sets .waiting below the fold); everything stops with "Bewegung pausieren" and reduced motion. */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.waiting{opacity:0;transform:translateY(34px)}
.still{scroll-behavior:auto}
.still *,.still *:before,.still *:after{animation:none!important;transition:none!important}
.still .waiting{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.reveal.waiting{opacity:1;transform:none}}

@media(max-width:1000px){.bar nav{gap:18px;font-size:14px}
.board-head{grid-template-columns:minmax(0,1fr)}
.board-lists{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.bar{flex-wrap:wrap;gap:0 14px;min-height:60px;padding-top:8px}
.open-now{order:3;width:100%;padding-bottom:12px;font-size:13px}
.menu-toggle{display:block}
.bar nav{order:4;display:grid;gap:0;width:100%;padding-bottom:10px;font-size:17px}
.bar nav a{padding:12px 0;border-bottom:1px solid var(--rule)}
.hero{min-height:0;padding-top:64vw}
.hero-photo{inset:0 0 auto;height:78vw}
.hero-text{padding-top:20px}
.ticket{position:relative;right:auto;bottom:auto;margin:6px var(--side) 0;width:auto;transform:rotate(-1deg)}
.board{padding-top:60px}
.board-lists{grid-template-columns:minmax(0,1fr);gap:30px}
.bakehouse,.order,.hours{grid-template-columns:minmax(0,1fr)}
.order .photo{order:-1}}