/* Backstube Morgengrau, showcase page. Tokens first; every value carries its derivation. */

:root {
  /* The sky of the hour. Derivation: the name Morgengrau is the grey before sunrise; the page runs through the night the dough rests in, the dawn the shop opens in, the day the bread is sold in and the evening the order closes in. Sampled against the generated Symbolbilder. */
  --night: oklch(0.22 0.03 265);      /* the cold room at 2 Uhr */
  --evening: oklch(0.31 0.045 262);   /* 18 Uhr, Bestellschluss */
  --dawn: oklch(0.87 0.014 245);      /* 6:30, Morgengrau */
  --day: oklch(0.975 0.006 220);      /* 12 Uhr, the shop window, a cool white, not cream */
  --ink: oklch(0.20 0.025 262);       /* night, two steps darker, for text on light grounds */
  --paper: oklch(0.965 0.008 230);    /* text on dark grounds */
  --muted-dark: oklch(0.80 0.02 240); /* secondary text on night and evening */
  --muted-light: oklch(0.42 0.02 250);/* secondary text on dawn and day */
  --sun: oklch(0.87 0.165 90);        /* first light on the crust at 6:30: one job, the order action and the jetzt marker */
  --crust: oklch(0.44 0.08 55);       /* the crust itself, low chroma, only inside the drawn breads */
  --crumb: oklch(0.92 0.035 85);      /* the crumb inside the pictograms */
  --line-dark: oklch(0.60 0.03 258);  /* boundaries on night and evening grounds, 3:1 against both */
  --line-light: oklch(0.56 0.02 250); /* boundaries on light grounds, 3:1 */

  /* craft.css reads these */
  --color-text: var(--ink);
  --color-bg: var(--day);
  --color-accent: var(--sun);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --scroll-offset: 4.5rem;

  /* Rhythm: three tiers, the hero gets air */
  --space-tight: 0.5rem;
  --space-section: clamp(3.5rem, 7vw, 6.5rem);
  --space-air: clamp(7rem, 15vw, 12rem);
  --gutter: clamp(1rem, 4vw, 3.5rem); /* side margin 16 to 56 px */
  --measure: 62ch;
  --radius-control: 0.25rem; /* a baker's dry voice: almost square */

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-wipe: cubic-bezier(.76, 0, .24, 1);
  --dur-quick: 160ms;
  --dur-state: 700ms;

  /* The hero state sets these (see [data-stunde]) */
  --hero-ground: var(--dawn);
  --hero-ink: var(--ink);
  --hero-muted: var(--muted-light);
  --hero-line: var(--line-light);
}

/* Hero states: the ground is the sky at that hour */
[data-stunde="frueh"] { --hero-ground: var(--night); --hero-ink: var(--paper); --hero-muted: var(--muted-dark); --hero-line: var(--line-dark); }
[data-stunde="morgen"] { --hero-ground: var(--dawn); --hero-ink: var(--ink); --hero-muted: var(--muted-light); --hero-line: var(--line-light); }
[data-stunde="mittag"] { --hero-ground: var(--day); --hero-ink: var(--ink); --hero-muted: var(--muted-light); --hero-line: var(--line-light); }
[data-stunde="abend"] { --hero-ground: var(--evening); --hero-ink: var(--paper); --hero-muted: var(--muted-dark); --hero-line: var(--line-dark); }

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.55;
  color: var(--ink);
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--day);
  color: var(--ink);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: var(--measure); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 0.95; word-spacing: 0.1em; }

/* micro-typography baseline (from the webdesigner craft.css) */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
body { font-optical-sizing: auto; font-kerning: normal; }
.zahl, td, time { font-variant-numeric: tabular-nums lining-nums; }
.preis, .uhr, .stempel, .held__zahl { font-variant-numeric: lining-nums; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
[data-stunde="morgen"] .held :focus-visible, [data-stunde="mittag"] .held :focus-visible,
.brote :focus-visible, .cafe :focus-visible, .zeiten :focus-visible { outline-color: var(--ink); }
[id] { scroll-margin-top: var(--scroll-offset); }
dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-inline-size: 0; }
ul[role="list"], ol[role="list"], nav ul { list-style: none; padding: 0; margin: 0; }

.skip-link {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  translate: 0 -200%; transition: translate 120ms ease-out;
  background: var(--sun); color: var(--ink); padding: 0.6rem 1rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus-visible { translate: 0 0; z-index: 1000; }

.nur-js { display: none; }
.js .nur-js { display: revert; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- links, buttons ---------- */
.textlink {
  text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 0.06em;
  font-weight: 600;
}
@media (hover: hover) {
  .textlink { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 0.06em; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 450ms var(--ease-out); }
  .textlink:hover { background-size: 0 0.06em; background-position: 100% 100%; transition-duration: 125ms; }
}
.knopf {
  appearance: none; border: 0; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--sun); color: var(--ink);
  padding: 0.95rem 1.5rem; border-radius: var(--radius-control);
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem;
  text-decoration: none; line-height: 1.1;
  transition: translate 125ms ease-out, box-shadow 125ms ease-out;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
}
.knopf:hover { translate: 0 -1px; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .6); transition-duration: 125ms; }
.knopf:active { translate: 0 1px; scale: 0.98; box-shadow: none; }
.knopf--ink { background: var(--ink); color: var(--sun); }
.knopf--rand { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }

/* ---------- header ---------- */
.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem var(--gutter);
  color: var(--hero-ink);
  transition: background-color 300ms ease-out, color 300ms ease-out;
}
.js .kopf { position: fixed; }
.kopf.gefuellt { background: var(--night); color: var(--paper); box-shadow: 0 1px 0 var(--line-dark); }
.marke { font-weight: 800; letter-spacing: -0.02em; text-decoration: none; font-size: 1.15rem; line-height: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.marke small { font-weight: 500; font-size: 0.8rem; letter-spacing: 0; opacity: 0.85; }
.kopf nav { margin-inline-start: 1.5rem; }
.kopf .knopf { margin-inline-start: auto; }
.kopf nav ul { display: flex; gap: 1.4rem; }
.kopf nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.kopf nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kopf .knopf { padding: 0.7rem 1.1rem; min-height: 2.6rem; }
@media (max-width: 760px) {
  .kopf nav { display: none; }
  .kopf .knopf { margin-inline-start: auto; }
}

/* ---------- hero: the page is set to now ---------- */
.held {
  position: relative; isolation: isolate;
  min-height: 100svh;
  background: var(--hero-ground); color: var(--hero-ink);
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.held__bild {
  position: absolute; inset: 0; z-index: -1; margin: 0;
}
.held__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%;
  opacity: 0; transition: opacity var(--dur-state) var(--ease-out);
}
[data-stunde="morgen"] .held__bild img[data-stunde="morgen"] { object-position: 58% 60%; }
[data-stunde="frueh"] .held__bild img[data-stunde="frueh"],
[data-stunde="morgen"] .held__bild img[data-stunde="morgen"],
[data-stunde="mittag"] .held__bild img[data-stunde="mittag"],
[data-stunde="abend"] .held__bild img[data-stunde="abend"] { opacity: 1; }
/* The scrim keeps the text zone readable: the ground colour from the left, the image free on the right */
.held__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--hero-ground) 0%, color-mix(in oklab, var(--hero-ground) 82%, transparent) 34%, color-mix(in oklab, var(--hero-ground) 20%, transparent) 60%, transparent 80%),
    linear-gradient(0deg, color-mix(in oklab, var(--hero-ground) 90%, transparent) 0%, transparent 38%);
  transition: background var(--dur-state) var(--ease-out);
}
.held__text {
  position: relative; z-index: 2;
  padding: calc(4.5rem + clamp(1.5rem, 4vw, 3.5rem)) var(--gutter) 0;
  max-width: min(37rem, 60vw); min-width: 0;
}
.held h1 {
  font-size: clamp(2.5rem, 4.6vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.92; word-spacing: 0.16em; text-wrap: pretty;
  margin-bottom: 0.35em;
}
.held__zeile { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.45; max-width: 36ch; margin-bottom: 1.2rem; }
.held__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.held__fakten { font-size: 0.9rem; color: var(--hero-muted); display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 0.15rem 1.6rem; margin: 0; max-width: none; }
@media (max-width: 760px) { .held__fakten { grid-template-columns: 1fr; } }
.held__fakten dt { display: inline; font-weight: 700; color: var(--hero-ink); }
.held__fakten dd { display: inline; }
.held__fakten div { display: inline; }

/* the hour as typographic image: 34vw, cropped by the left and the bottom edge, the loaf shows through it */
.held__stunde {
  position: relative; z-index: 1;
  padding: 0 var(--gutter);
  display: grid; align-content: end;
  margin-top: clamp(1rem, 2.5vw, 2rem);
  pointer-events: none;
}
.held__label {
  font-size: clamp(1.05rem, 1.7vw, 1.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin-bottom: 0.1em;
}
.held__label small { font-weight: 600; font-size: 0.72em; color: var(--hero-ink); opacity: 0.72; letter-spacing: 0; }
.held__zahl {
  font-size: clamp(7rem, 30vw, 30rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.75;
  margin-left: -0.12em; margin-bottom: -0.14em; /* the hour is bigger than the page: cut by two edges */
  color: var(--sun); white-space: nowrap; display: flex;
}
[data-stunde="morgen"] .held__zahl, [data-stunde="mittag"] .held__zahl { color: var(--ink); mix-blend-mode: multiply; opacity: 0.94; }
.held__zahl .ziffer { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ziffer-rollt { from { transform: translateY(0.45em); opacity: 0; } to { transform: none; opacity: 1; } }
  .held__zahl .ziffer { animation: ziffer-rollt 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 420ms); }
  @keyframes licht-wechsel { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
  .held.wechselt .held__wechsel { animation: licht-wechsel 1150ms var(--ease-wipe) both; }
  html.story .held__zahl .ziffer, html.story .held.wechselt .held__wechsel { animation: none; }
}
.held__wechsel { position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 3; background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--wechsel, var(--night)) 88%, transparent) 45%, color-mix(in oklab, var(--wechsel, var(--night)) 88%, transparent) 55%, transparent 100%); transform: translateY(-100%); pointer-events: none; }

/* caption bar: Symbolbild + the demo clock */
.held__leiste {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.55rem var(--gutter) 0.55rem 1rem;
  font-size: 0.8rem; line-height: 1.3;
  background: color-mix(in oklab, var(--night) 72%, transparent); color: var(--paper);
  max-width: min(100%, 38rem);
}
.held__leiste p { margin: 0; }
.held__leiste, .uhrdemo, .uhrdemo__gruppe { min-width: 0; }
.uhrdemo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; max-width: 100%; }
.uhrdemo__gruppe { display: inline-flex; border: 1px solid var(--line-dark); border-radius: var(--radius-control); overflow-x: auto; max-width: 100%; }
.uhrdemo span { margin-inline-end: 0.25rem; color: var(--muted-dark); }
.uhrdemo button {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-right: 1px solid var(--line-dark); background: transparent; color: var(--paper);
  padding: 0.3rem 0.65rem; min-height: 2rem; white-space: nowrap;
  transition: background-color var(--dur-quick) ease-out, color var(--dur-quick) ease-out;
}
.uhrdemo button:last-child { border-right: 0; }
.uhrdemo button[aria-pressed="true"] { background: var(--sun); color: var(--ink); }
.uhrdemo button:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 760px) {
  .held { min-height: 100svh; grid-template-rows: auto 1fr auto; }
  .held__text { max-width: none; padding-top: calc(4.2rem + 2rem); }
  .held h1 { font-size: clamp(2.3rem, 11vw, 3.5rem); }
  .held__bild img { object-position: 68% 72%; }
  .held__bild::after { background: linear-gradient(180deg, var(--hero-ground) 0%, color-mix(in oklab, var(--hero-ground) 85%, transparent) 42%, color-mix(in oklab, var(--hero-ground) 25%, transparent) 70%, color-mix(in oklab, var(--hero-ground) 75%, transparent) 100%); }
  .held__stunde { align-self: end; margin-top: 2rem; padding-bottom: 0.4rem; }
  .held__zahl { font-size: 40vw; margin-bottom: -0.1em; margin-left: -0.08em; line-height: 0.8; }
  .uhrdemo { flex-wrap: wrap; }
  .held__leiste { position: static; max-width: 100%; padding-inline: var(--gutter); }
}

/* ---------- the 36-hour line ---------- */
.zeitlinie {
  position: relative; color: var(--paper);
  background: linear-gradient(90deg, var(--evening) 0%, var(--night) 36%, var(--evening) 60%, oklch(0.58 0.06 255) 71%, var(--dawn) 79%, var(--dawn) 100%);
  padding: 2.4rem var(--gutter) 2rem;
  border-top: 1px solid var(--line-dark);
}
.zeitlinie__titel { font-size: 0.9rem; font-weight: 600; color: var(--muted-dark); margin: 0 0 2.6rem; max-width: none; }
.zeitlinie ol { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 1.2rem; }
.zeitlinie ol::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--paper); opacity: 0.55;
  transform-origin: left;
}
.zeitlinie li { position: relative; padding-left: 0; }
.zeitlinie li::before { content: ""; position: absolute; left: 0; top: -1.2rem; width: 2px; height: 0.9rem; background: var(--paper); }
.zeitlinie .uhr { display: block; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.4rem); letter-spacing: -0.03em; line-height: 1; }
.zeitlinie .tag { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted-dark); margin-bottom: 0.25rem; }
.zeitlinie .was { display: block; font-size: 0.95rem; margin-top: 0.3rem; }
.zeitlinie li:nth-child(4) { color: var(--ink); }
.zeitlinie li:nth-child(4) .tag { color: var(--muted-light); }
.zeitlinie li:nth-child(4)::before { background: var(--ink); }
.zeitlinie .jetzt {
  position: absolute; padding: 0; top: -1.55rem; left: var(--jetzt, 50%); translate: -0.4rem 0;
  display: flex; flex-direction: row; align-items: center; gap: 0.45rem; white-space: nowrap;
  color: var(--sun); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.01em;
}
.zeitlinie .jetzt::before { content: ""; position: static; top: auto; left: auto; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sun) 30%, transparent); }
.zeitlinie .jetzt span { position: static; }
.zeitlinie .jetzt:not(.ist-da) { display: none; }
@media (max-width: 760px) {
  .zeitlinie ol { grid-template-columns: 1fr; gap: 1.4rem; padding: 0.2rem 0 0.2rem 1.9rem; }
  .zeitlinie ol::before { top: 0; bottom: 0; left: 0.35rem; right: auto; width: 2px; height: auto; transform-origin: top; animation: none; }
  .zeitlinie li::before { top: 0.45rem; left: -1.9rem; width: 0.9rem; height: 2px; }
  .zeitlinie li { padding-top: 0; }
  .zeitlinie .jetzt { top: var(--jetzt-oben, 0); left: 0; right: 0; translate: 0 -50%; justify-content: space-between; }
  .zeitlinie .jetzt::before { margin-left: calc(1px - 0.05rem); }
  .zeitlinie .jetzt span { background: var(--night); padding: 0.1rem 0.4rem; border-radius: var(--radius-control); }
  .zeitlinie li:nth-child(4) { color: var(--paper); }
  .zeitlinie li:nth-child(4) .tag { color: var(--muted-dark); }
  .zeitlinie li:nth-child(4)::before { background: var(--paper); }
  .zeitlinie__titel { margin-bottom: 1.2rem; }
  .zeitlinie { background: linear-gradient(180deg, var(--evening), var(--night)); }
}
.jetzt-zeile { margin: 1.6rem 0 0; font-size: 0.9rem; color: var(--sun); font-weight: 700; }
@media (min-width: 761px) { .jetzt-zeile { display: none; } }

/* ---------- sections ---------- */
.abschnitt { padding: var(--space-section) var(--gutter); position: relative; }
.abschnitt__kopf { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0.5rem clamp(1rem, 3vw, 3rem); margin-bottom: clamp(2rem, 5vw, 4rem); }
.stempel {
  font-size: clamp(4rem, 9vw, 9.5rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap;
  margin-bottom: -0.04em;
}
.stempel small { display: block; font-size: 0.22em; font-weight: 600; letter-spacing: 0; line-height: 1.2; margin-top: 0.35em; }
.abschnitt h2 { font-size: clamp(1.9rem, 4.4vw, 4.2rem); letter-spacing: -0.03em; line-height: 0.95; word-spacing: 0.14em; max-width: 14em; padding-bottom: 0.15em; }
.abschnitt__lead { font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 48ch; }
@media (max-width: 760px) {
  .abschnitt__kopf { grid-template-columns: 1fr; align-items: start; gap: 1.6rem; }
  .stempel { font-size: clamp(4rem, 22vw, 7rem); }
}

/* Brote: dawn */
.brote { background: var(--dawn); color: var(--ink); }
.brote .stempel { color: var(--ink); }
.brotliste { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.brot {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0; border-bottom: 1px solid var(--line-light);
}
.brot__bild { width: 7.5rem; height: 7.5rem; transition: translate 450ms var(--ease-out); }
@media (hover: hover) { .brot:hover .brot__bild { translate: 0 -0.3rem; transition-duration: 160ms; } }
.brot h3 { font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.35rem; }
.brot p { margin: 0 0 0.4rem; max-width: 52ch; }
.brot__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.9rem; color: var(--muted-light); }
.brot__status { color: var(--ink); font-weight: 700; }
.brot__status::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--sun); margin-right: 0.4em; box-shadow: 0 0 0 1px var(--ink); }
.brot__status span { display: none; }
[data-stunde="frueh"] .brot__status [data-s="frueh"], [data-stunde="morgen"] .brot__status [data-s="morgen"],
[data-stunde="mittag"] .brot__status [data-s="mittag"], [data-stunde="abend"] .brot__status [data-s="abend"] { display: inline; }
[data-stunde="mittag"] .brot__status::before, [data-stunde="abend"] .brot__status::before { background: transparent; }
/* the board at noon: the slot is cleared, the bread is gone */
[data-stunde="mittag"] .brot__bild, [data-stunde="abend"] .brot__bild { opacity: 0.28; filter: grayscale(0.6); }
.brot__bild { transition: translate 450ms var(--ease-out), opacity 600ms var(--ease-out), filter 600ms var(--ease-out); }
.brot__plus { padding: 0.55rem 0.9rem; min-height: 2.5rem; font-size: 0.95rem; gap: 0.35rem; }
.brot__plus span { font-size: 1.3em; line-height: 0.6; font-weight: 800; }
.brot__rechts { text-align: right; display: grid; gap: 0.6rem; justify-items: end; }
.preis { font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.preis small { font-size: 0.5em; font-weight: 600; color: var(--muted-light); display: block; letter-spacing: 0; margin-top: 0.2rem; }
.brote__hinweis { margin-top: 2.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; align-items: start; }
.brote__hinweis p { max-width: 48ch; }
.brote__hinweis strong { font-weight: 800; }
@media (max-width: 760px) {
  .brot { grid-template-columns: 4.6rem 1fr; }
  .brot__bild { width: 4.6rem; height: 4.6rem; align-self: start; }
  .brot__rechts { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; }
  .brot__rechts .knopf { justify-self: end; }
  .brote__hinweis { grid-template-columns: 1fr; }
}

/* Vorbestellen: evening */
.bestellen { background: var(--evening); color: var(--paper); }
.bestellen .stempel { color: var(--sun); }
.bestellen .abschnitt__lead { color: var(--muted-dark); }
.formular { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.formular fieldset + fieldset { margin-top: 2.2rem; }
.formular legend { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.mengen { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.menge { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-dark); }
.menge label { font-weight: 600; }
.menge label small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted-dark); }
.zaehler { display: inline-flex; align-items: center; border: 1px solid var(--line-dark); border-radius: var(--radius-control); }
.zaehler button { font: inherit; font-weight: 700; font-size: 1.2rem; line-height: 1; cursor: pointer; background: transparent; color: var(--paper); border: 0; width: 2.75rem; height: 2.75rem; }
.zaehler button:hover { background: color-mix(in oklab, var(--paper) 12%, transparent); }
.zaehler input { font: inherit; font-weight: 700; width: 3.2rem; height: 2.75rem; text-align: center; border: 0; border-inline: 1px solid var(--line-dark); background: transparent; color: var(--paper); -moz-appearance: textfield; }
.zaehler input::-webkit-inner-spin-button, .zaehler input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.js .zaehler input { border-inline: 1px solid var(--line-dark); }
.zaehler:not(.js .zaehler) button { display: none; }
.feld { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.feld label { font-weight: 600; }
.feld .hinweis { font-size: 0.85rem; color: var(--muted-dark); }
.feld input, .feld textarea {
  font: inherit; color: var(--paper); background: color-mix(in oklab, var(--night) 55%, transparent);
  border: 1px solid var(--line-dark); border-radius: var(--radius-control); padding: 0.75rem 0.9rem; min-height: 3rem; width: 100%;
}
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-color: var(--sun); }
.wahl { display: grid; gap: 0.5rem; }
.wahl label { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--line-dark); border-radius: var(--radius-control); cursor: pointer; }
.wahl label:has(:checked) { border-color: var(--sun); background: color-mix(in oklab, var(--sun) 12%, transparent); }
.wahl label:has(:disabled) { opacity: 0.55; cursor: not-allowed; }
.wahl input { width: 1.2rem; height: 1.2rem; accent-color: var(--sun); margin: 0; }
.wahl small { display: block; font-size: 0.85rem; color: var(--muted-dark); }
.schluss { display: grid; gap: 0.3rem; margin: 2.4rem 0 2rem; }
.schluss__klein { font-weight: 700; font-size: 0.95rem; color: var(--sun); }
.schluss__gross { display: block; white-space: nowrap; font-size: clamp(2rem, 4.3vw, 4rem); font-weight: 900; letter-spacing: -0.045em; word-spacing: 0.18em; line-height: 0.9; color: var(--paper); }
.schluss__text { font-size: 0.95rem; color: var(--muted-dark); max-width: 42ch; }
.zettel { border: 1px solid var(--line-dark); padding: 1rem 1.2rem 1.2rem; border-radius: var(--radius-control); background: color-mix(in oklab, var(--night) 45%, transparent); max-width: 30rem; }
.zettel h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.zettel ul { display: grid; gap: 0.3rem; font-size: 0.95rem; }
.zettel li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line-dark); padding-bottom: 0.3rem; }
.zettel li.zettel__leer, .zettel li.zettel__fuss { border: 0; color: var(--muted-dark); }
.zettel li.zettel__fuss { margin-top: 0.4rem; color: var(--paper); font-weight: 600; }
.summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 2px solid var(--paper); padding-top: 0.8rem; margin: 1.2rem 0 1rem; font-weight: 700; }
.summe .preis { font-size: 2rem; }
.formular__fuss { display: grid; gap: 0.8rem; }
.formular__fuss .knopf { justify-self: start; font-size: 1.1rem; padding: 1.05rem 1.7rem; }
.demo-hinweis { margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--sun); color: var(--paper); font-weight: 600; max-width: none; }
.demo-hinweis:empty { display: none; }
.bestellen__notiz { color: var(--muted-dark); font-size: 0.9rem; max-width: 42ch; }
.formular > div { min-width: 0; }
@media (max-width: 860px) { .formular { grid-template-columns: 1fr; } .formular fieldset + fieldset { margin-top: 1.8rem; } }
@media (max-width: 760px) { .schluss__gross { white-space: normal; font-size: clamp(1.8rem, 9vw, 2.6rem); } }

/* 36 Stunden: the night, a full-bleed sticky scene; the sky and the still change with the step */
.stunden { background: var(--night); color: var(--paper); padding: var(--space-section) 0 0; }
.stunden .abschnitt__kopf { padding: 0 var(--gutter); }
.stunden .stempel { color: var(--sun); }
.stunden .abschnitt__lead { color: var(--muted-dark); }
.himmel {
  position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--himmel, var(--dawn));
  transition: background-color 1200ms var(--ease-out);
}
.himmel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 62%; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.himmel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, color-mix(in oklab, var(--night) 72%, transparent) 0%, transparent 45%),
              linear-gradient(90deg, transparent 50%, color-mix(in oklab, var(--night) 55%, transparent) 100%);
}
.himmel__stunde {
  position: absolute; left: var(--gutter); bottom: clamp(1.4rem, 5vh, 4rem); z-index: 1;
  font-size: clamp(5rem, 13vw, 13rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; color: var(--sun);
  display: grid;
}
.himmel__zahl { display: block; line-height: 0.85; }
.himmel__zahl::before { content: "Stunde "; font-size: 0.22em; font-weight: 700; letter-spacing: 0; display: block; margin-bottom: 0.3em; line-height: 1; color: var(--paper); }
.himmel__von { font-size: 0.16em; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--muted-dark); margin-top: 0.5em; }
.himmel__bildtext { position: absolute; right: var(--gutter); bottom: 0.8rem; z-index: 1; margin: 0; font-size: 0.75rem; color: var(--muted-dark); max-width: 30ch; text-align: right; }
.schritte { position: relative; z-index: 1; margin-top: -100svh; padding: 18vh var(--gutter) 22vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(1rem, 4vw, 4rem); }
.schritt {
  grid-column: 2; min-height: 72vh; display: grid; align-content: center;
}
.schritt__box {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.4rem; align-items: baseline;
  background: color-mix(in oklab, var(--night) 80%, transparent); padding: 1.6rem 1.8rem; border-left: 4px solid var(--sun); max-width: 34rem;
  backdrop-filter: blur(6px);
}
.schritt .uhr { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; color: var(--sun); grid-row: span 3; align-self: start; }
.schritt .uhr small { display: block; font-size: 0.42em; font-weight: 600; color: var(--muted-dark); letter-spacing: 0; margin-top: 0.3em; }
.schritt h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.03em; }
.schritt p { margin: 0; color: var(--paper); max-width: 40ch; }
.schritt .stunde-von { font-size: 0.85rem; color: var(--muted-dark); display: block; }
/* the sky per step (data-schritt on the section); resting state without JS is step 6 */
.stunden[data-schritt="1"] { --himmel: oklch(0.42 0.06 255); }
.stunden[data-schritt="2"] { --himmel: var(--evening); }
.stunden[data-schritt="3"] { --himmel: var(--night); }
.stunden[data-schritt="4"] { --himmel: oklch(0.15 0.02 265); }
.stunden[data-schritt="5"] { --himmel: oklch(0.40 0.07 255); }
.stunden[data-schritt="6"], .stunden:not([data-schritt]) { --himmel: var(--dawn); }
.stunden[data-schritt="1"] .himmel img[data-phase="abend"], .stunden[data-schritt="2"] .himmel img[data-phase="abend"],
.stunden[data-schritt="3"] .himmel img[data-phase="nacht"], .stunden[data-schritt="4"] .himmel img[data-phase="nacht"],
.stunden[data-schritt="5"] .himmel img[data-phase="morgen"], .stunden[data-schritt="6"] .himmel img[data-phase="morgen"],
.stunden:not([data-schritt]) .himmel img[data-phase="morgen"] { opacity: 1; }
.stunden[data-schritt="5"] .himmel img[data-phase="morgen"] { filter: brightness(0.75) saturate(1.2); }
.schritt.aktiv h3 { color: var(--sun); }
@media (max-width: 860px) {
  .schritte { grid-template-columns: 1fr; padding-top: 30vh; }
  .schritt { grid-column: 1; min-height: 78vh; align-content: end; }
  .schritt__box { padding: 1.1rem 1.1rem; }
  .himmel__stunde { top: 5.2rem; bottom: auto; font-size: clamp(4rem, 22vw, 7rem); }
  .himmel__bildtext { left: var(--gutter); right: auto; text-align: left; bottom: 0.5rem; max-width: 60vw; }
}

/* Café: day */
.cafe { background: var(--day); color: var(--ink); }
.cafe .stempel { color: var(--ink); }
.cafe__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.cafe figure { position: relative; margin: 0; }
.cafe figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 60%; filter: saturate(0.85); }
.bildtext {
  position: absolute; left: 0; bottom: 0; margin: 0; max-width: none;
  background: color-mix(in oklab, var(--night) 75%, transparent); color: var(--paper);
  font-size: 0.78rem; line-height: 1.3; padding: 0.45rem 0.8rem;
}
.karte { border-top: 2px solid var(--ink); }
.karte div { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-light); align-items: baseline; }
.karte dt { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.karte dt small { display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted-light); }
.karte dd { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.cafe__notiz { margin-top: 1.2rem; font-size: 0.9rem; color: var(--muted-light); }
@media (max-width: 860px) { .cafe__raster { grid-template-columns: 1fr; } }

/* Zeiten: dawn again */
.zeiten { background: var(--dawn); color: var(--ink); }
.zeiten .stempel { color: var(--ink); }
.tagband { position: relative; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 4.2rem 0 4.4rem; }
.tagband__balken {
  height: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: 999px; border: 2px solid var(--ink);
  background: linear-gradient(90deg, var(--night) 0%, var(--night) 20%, var(--dawn) 27%, var(--day) 36%, var(--day) 54%, var(--dawn) 70%, var(--evening) 77%, var(--night) 86%, var(--night) 100%);
}
.tagband__marken { position: absolute; inset: 0; }
.tagband__marken li {
  position: absolute; left: calc(var(--h) / 24 * 100%); top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; gap: 0.25rem; text-align: center; white-space: nowrap; font-size: 0.85rem; line-height: 1.15;
}
.tagband__marken li::before { content: ""; width: 2px; height: 2.9rem; background: var(--ink); }
.tagband__marken li.oben { flex-direction: column; }
.tagband__marken li.oben::before { order: 2; }
.tagband__marken li.oben { grid-template-rows: auto auto auto; }
.tagband__marken li.oben b { order: 0; } .tagband__marken li.oben span { order: 1; }
.tagband__marken li.unten::before { order: -1; }
.tagband__marken li b { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.tagband__marken li span { color: var(--muted-light); font-weight: 600; }
.tagband__marken li.oben { translate: -50% calc(-50% - 1.9rem); }
.tagband__marken li.unten { translate: -50% calc(-50% + 1.9rem); }
.tagband__marken li.oben::before, .tagband__marken li.unten::before { height: 2.6rem; }
.tagband__jetzt { display: none; }
.js .tagband__jetzt.ist-da { display: grid; translate: -50% -50%; z-index: 1; }
.tagband__jetzt::before { display: none; }
.tagband__jetzt b { background: var(--sun); color: var(--ink); padding: 0.25rem 0.55rem; border-radius: 999px; box-shadow: 0 0 0 2px var(--ink); font-size: 0.85rem; }
.zeiten .tagliste { display: grid; gap: 0.4rem; margin: 0 0 2.6rem; }
.tagliste b { font-weight: 800; display: inline-block; min-width: 5.5rem; }
@media (min-width: 761px) { .tagliste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 760px) { .tagband { display: none; } }
.zeiten__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.zeiten h3 { font-size: 1.25rem; margin-bottom: 0.7rem; }
.oeffnung { border-top: 2px solid var(--ink); }
.oeffnung div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-light); }
.oeffnung dd { font-weight: 700; }
.oeffnung .zu { color: var(--muted-light); font-weight: 600; }
.adresse { font-style: normal; }
.adresse p { margin-bottom: 0.4rem; }
.platzhalter { font-weight: 600; color: var(--muted-light); }
.zeiten__notiz { font-size: 0.95rem; }
.zeiten__notiz strong { font-weight: 800; }
@media (max-width: 860px) { .zeiten__raster { grid-template-columns: 1fr; } }

/* Footer: night */
.fuss { background: var(--night); color: var(--paper); padding: var(--space-section) var(--gutter) 1.5rem; }
.fuss__zeile { font-size: clamp(1.6rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; word-spacing: 0.16em; line-height: 0.95; max-width: 16em; margin-bottom: 2rem; }
.fuss__zeile span { color: var(--sun); }
.fuss__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: 0.9rem; color: var(--muted-dark); margin: 0; max-width: none; }
.fuss__meta a { color: var(--paper); }
.fuss__fiktiv { margin-top: 2.5rem; font-size: 0.78rem; color: var(--muted-dark); max-width: none; }

/* Motion: the state change and the line */
@media (prefers-reduced-motion: no-preference) {
  @keyframes linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @supports (animation-timeline: view()) {
    .zeitlinie ol::before { animation: linie 1000ms var(--ease-wipe) forwards; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
  html { scroll-behavior: auto; }
  .held, .held__bild img, .held__bild::after, .himmel, .himmel img, .zeitlinie .jetzt, .brot__bild, .kopf, .knopf, .textlink, .uhrdemo button { transition: none; }
  .held__zahl .ziffer, .held.wechselt .held__wechsel { animation: none; }
}

@media print {
  * { background: transparent; color: var(--ink); box-shadow: none; text-shadow: none; }
  .held__bild, .kopf .knopf, .uhrdemo, .zaehler button { display: none; }
  .held { min-height: 0; }
  .himmel { position: static; height: auto; }
  .schritte { margin-top: 0; }
  @page { margin: 2cm; }
}