/* Cook & Repeat – cookandrepeat.app
   Die Welt der App: Ceranglas, Aufdruck, Geräteziffern. Hitzerot nur für das, was gerade lebt. */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --glass: #121314;
  --panel: #1B1D1F;
  --raised: #26292C;
  --hairline: #32363A;
  --off: #2B2E31;
  --print: #E8E6E1;
  --dim: #9A9DA1;
  --faint: #878B90;
  --heat: #FF5B35;
  --on-heat: #1A0A05;
  --heat-glow: rgb(255 91 53 / 0.2);

  --numerals: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ein Maß für die ganze Seite: 1 bei 1440 px Breite. */
  --u: min(calc(100vw / 1440), 1.2px);
  --gutter: calc(113 * var(--u));
  --switch: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

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

html { background: var(--glass); scroll-behavior: smooth; scroll-padding-top: calc(96 * var(--u)); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--glass);
  color: var(--print);
  font-family: var(--text);
  font-size: max(17px, calc(19 * var(--u)));
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--heat-glow); color: var(--print); }
:focus-visible { outline: 2px solid var(--heat); outline-offset: 3px; border-radius: 4px; }

html { scrollbar-color: var(--hairline) var(--glass); }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }

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

main, .top { width: min(100%, calc(1440 * var(--u))); margin-inline: auto; }

/* Kopf */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(96 * var(--u));
  padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; gap: calc(20 * var(--u)); color: var(--print); }
.mark { display: block; height: calc(52 * var(--u)); width: auto; }
.wordmark { font-family: var(--numerals); font-weight: 500; font-size: calc(33.6 * var(--u)); line-height: 1; letter-spacing: 0.005em; }

.top-nav { display: flex; gap: calc(37 * var(--u)); }
.top-nav a { color: var(--dim); font-size: max(16px, calc(21 * var(--u))); line-height: 1; padding-block: max(0.65em, 16px); transition: color var(--switch); }
.top-nav a:hover { color: var(--print); }

/* Erster Blick: 18:42 */

.hero { position: relative; height: calc(660 * var(--u)); padding-inline: var(--gutter); }

.hero-copy { position: relative; z-index: 1; width: calc(453 * var(--u)); padding-top: calc(32 * var(--u)); }

.clock { display: flex; align-items: baseline; gap: calc(16 * var(--u)); white-space: nowrap; }
.clock-digits {
  font-family: var(--numerals);
  font-weight: 600;
  font-size: calc(241 * var(--u));
  line-height: 1;
  letter-spacing: -0.004em;
  font-variant-numeric: lining-nums;
}
.clock-tag {
  font-family: var(--numerals);
  font-weight: 600;
  font-size: calc(24.6 * var(--u));
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dim);
}

h1 {
  margin-top: calc(30 * var(--u));
  max-width: calc(430 * var(--u));
  font-weight: 600;
  font-size: calc(57 * var(--u));
  line-height: 1.06;
  letter-spacing: -0.005em;
}

.go {
  display: inline-flex;
  align-items: center;
  height: max(48px, calc(50 * var(--u)));
  margin-top: calc(36 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--heat);
  color: var(--on-heat);
  font-weight: 600;
  font-size: max(16px, calc(18 * var(--u)));
  line-height: 1;
  box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) var(--heat-glow);
  transition: box-shadow var(--switch), transform var(--switch);
}
.go:hover { box-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgb(255 91 53 / 0.38); }
.go:active { transform: translateY(1px); box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) var(--heat-glow); }

.soon { margin-top: calc(14 * var(--u)); color: var(--dim); font-size: max(15px, calc(16 * var(--u))); line-height: 1.3; }

/* Das Foto liegt unter dem Glas: es läuft links und unten in den Grund aus. */
.hero-photo {
  position: absolute;
  left: calc(526 * var(--u));
  top: calc(31 * var(--u));
  width: calc(842 * var(--u));
  height: calc(629 * var(--u));
  border-radius: 0 calc(17 * var(--u)) calc(17 * var(--u)) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }

/* Die Zeitleiste: vier Stationen, eine lebt. */

.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: calc(56 * var(--u));
  padding: calc(14 * var(--u)) var(--gutter) 0;
}
/* Ceranglas auf 86 % mit Unschärfe, wie die Kompaktleiste der App. Im Ruhezustand liegt Glas auf Glas. */
.rail::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: rgb(18 19 20 / 0.86);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.rail ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(19 * var(--u));
  padding-bottom: calc(25 * var(--u));
  border-bottom: 1px solid var(--hairline);
}
.rail a { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(14 * var(--u)); color: var(--dim); }
/* Die Station ist als Tippziel nie niedriger als 48 px, auch wenn sie schmaler gezeichnet ist. */
.rail a::after { content: ""; position: absolute; left: 0; right: 0; top: min(0px, calc((100% - 48px) / 2)); bottom: min(0px, calc((100% - 48px) / 2)); }
.rail-seg { flex: 0 0 100%; height: calc(5 * var(--u)); min-height: 3px; margin-bottom: calc(4 * var(--u)); border-radius: 2px; background: var(--off); transition: background-color var(--switch), box-shadow var(--switch); }
.rail-time { font-family: var(--numerals); font-weight: 600; font-size: calc(32 * var(--u)); line-height: 1; color: var(--print); font-variant-numeric: lining-nums; transition: color var(--switch); }
.rail-label { font-size: max(15px, calc(19 * var(--u))); line-height: 1; transition: color var(--switch); }
.rail a[data-state="done"] .rail-seg { background: var(--dim); }
.rail a[data-state="live"] .rail-seg { background: var(--heat); box-shadow: 0 1px calc(8 * var(--u)) var(--heat-glow); }
.rail a[data-state="live"] .rail-time,
.rail a[data-state="live"] .rail-label { color: var(--heat); }
.rail a:hover .rail-label { color: var(--print); }
.rail a[data-state="live"]:hover .rail-label { color: var(--heat); }
.rail a[data-state="live"] .rail-time { animation: roll-in 170ms cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes roll-in { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
.rail-time { display: inline-block; }

/* Stationen */

.station {
  display: grid;
  grid-template-columns: calc(308 * var(--u)) 1fr;
  column-gap: calc(43 * var(--u));
  padding: calc(52 * var(--u)) var(--gutter) 0;
}
.station-time {
  font-family: var(--numerals);
  font-weight: 600;
  font-size: calc(171 * var(--u));
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.station-body { padding-top: calc(29 * var(--u)); }
.station-lede { color: var(--dim); font-size: max(17px, calc(22 * var(--u))); line-height: 1.4; }

.chat { margin-top: calc(28 * var(--u)); border: 1px solid var(--hairline); border-radius: calc(17 * var(--u)); background: var(--panel); overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--hairline); }
.chat-tab { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-width: calc(190 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--raised); font-weight: 500; font-size: max(15px, calc(17 * var(--u))); line-height: 1; }
.chat-dot { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: var(--dim); }
.chat-title { flex: 1; color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1; }
.chat-example { padding-right: calc(8 * var(--u)); }

.print { font-family: var(--text); font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: 0.9px; text-transform: uppercase; color: var(--dim); }

.station + .station { margin-top: calc(150 * var(--u)); }
.station-time { position: sticky; top: calc(96 * var(--u)); align-self: start; white-space: nowrap; }
.station-lede { max-width: 44em; }

/* 17:40 Chat: Sprechblasen, wie man sie kennt. Die eigene Nachricht rechts, die KI links. */
.chat-log { display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
.msg { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); max-width: 78%; }
.msg p { margin: 0; }
.msg-user { align-self: flex-end; }
.msg-user p { padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(5 * var(--u)) calc(20 * var(--u)); background: var(--raised); }
.msg-ai { align-self: flex-start; }
.msg-ai p { padding-top: calc(3 * var(--u)); }
.msg-who { flex: none; display: grid; place-items: center; width: max(28px, calc(32 * var(--u))); height: max(28px, calc(32 * var(--u))); border: 1px solid var(--hairline); border-radius: 50%; color: var(--dim); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.6px; }
.chat-saved { display: flex; align-items: center; justify-content: space-between; gap: calc(40 * var(--u)); min-width: min(100%, calc(460 * var(--u))); padding: calc(14 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--hairline); border-radius: calc(14 * var(--u)); background: var(--glass); }
.chat-saved-what { color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1.35; }
.chat-saved-what strong { display: block; color: var(--print); font-weight: 600; font-size: max(17px, calc(19 * var(--u))); }
.chat-saved-version { font-family: var(--numerals); font-weight: 600; font-size: calc(40 * var(--u)); line-height: 1; transition: color 1400ms ease-out; }
.chat-saved.is-new .chat-saved-version { color: var(--heat); transition-duration: 0ms; }
.chat-input { display: flex; align-items: center; justify-content: space-between; margin: 0 calc(16 * var(--u)) calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--hairline); border-radius: 999px; background: var(--glass); color: var(--faint); font-size: max(15px, calc(17 * var(--u))); line-height: 1; }
.chat-input svg { box-sizing: content-box; width: 16px; height: 16px; padding: max(8px, calc(10 * var(--u))); border-radius: 50%; background: var(--raised); color: var(--dim); }
/* Die Nachrichten kommen nacheinander, wenn der Chat ins Bild rückt. */
.js .chat .msg, .js .chat .chat-input { transition: opacity 260ms ease-out, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--n, 4) * 520ms); }
.js .chat.is-waiting .msg, .js .chat.is-waiting .chat-input { opacity: 0; transform: translateY(10px); transition-delay: 0ms; }

.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); margin-top: calc(32 * var(--u)); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1.45; }
.notes li { padding-top: calc(14 * var(--u)); border-top: 1px solid var(--hairline); }

/* Echte Bildschirme der App */
.screen { margin-top: calc(28 * var(--u)); }
.screen img { width: 100%; height: auto; border: 1px solid var(--hairline); background: var(--panel); }
.screen-tablet img { border-radius: calc(14 * var(--u)); }
.screen-phone img { border-radius: calc(26 * var(--u)); }
.screen figcaption { margin-top: calc(16 * var(--u)); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1.45; }

/* 18:42 Die Bedienelemente der App, zum Anfassen */
.instruments { display: grid; grid-template-columns: 1fr 1fr; gap: calc(43 * var(--u)); margin-top: calc(40 * var(--u)); }
.instrument { padding-top: calc(18 * var(--u)); border-top: 1px solid var(--hairline); }
.instrument-note { margin-top: calc(22 * var(--u)); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1.45; max-width: 26em; }

.portions-head { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.portions-count { flex: 1; font-family: var(--numerals); font-weight: 600; font-size: calc(64 * var(--u)); line-height: 1; font-variant-numeric: tabular-nums lining-nums; transition: color var(--switch); }
.stepper { position: relative; width: 48px; height: 48px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--print); cursor: pointer; transition: border-color var(--switch), background-color var(--switch); }
.stepper:hover { border-color: var(--faint); background: var(--panel); }
.stepper:active { background: var(--raised); }
.stepper span::before, .stepper-plus span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: currentColor; }
.stepper-plus span::after { transform: rotate(90deg); }

.portions-track { position: relative; height: 44px; margin-top: calc(6 * var(--u)); }
.portions-segs { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.portions-segs i { flex: 1; height: 16px; border-radius: 1.5px; background: var(--off); transition: background-color 120ms linear; }
.portions-segs i.is-on { background: var(--print); }
.portions-segs i.is-base { height: 22px; }
.portions-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.portions-track:has(.portions-range:focus-visible) { outline: 2px solid var(--heat); outline-offset: 4px; border-radius: 4px; }
.portions.is-live .portions-count { color: var(--heat); }
.portions.is-live .portions-segs i.is-on { background: var(--heat); }

.amounts { margin-top: calc(14 * var(--u)); }
.amounts li { display: grid; grid-template-columns: calc(84 * var(--u)) calc(52 * var(--u)) 1fr; column-gap: calc(10 * var(--u)); align-items: baseline; padding: calc(7 * var(--u)) 0; }
.amount { overflow: hidden; text-align: right; font-family: var(--numerals); font-weight: 600; font-size: calc(34 * var(--u)); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.amount span { display: inline-block; }
.amount .is-rolling-up { animation: roll-up 170ms cubic-bezier(0.33, 1, 0.68, 1); }
.amount .is-rolling-down { animation: roll-down 170ms cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes roll-up { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes roll-down { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
.amounts .unit { color: var(--dim); font-size: max(15px, calc(17 * var(--u))); }
.amounts .name { font-size: max(17px, calc(20 * var(--u))); }

.timer-row { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u)); }
.timer { flex: 1 1 calc(180 * var(--u)); min-width: 150px; padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--hairline); border-radius: calc(14 * var(--u)); background: var(--glass); color: var(--print); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--switch), background-color var(--switch), color var(--switch); }
.timer:hover { border-color: var(--faint); }
.timer-name { display: block; font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: 0.9px; text-transform: uppercase; color: var(--dim); transition: color var(--switch); }
.timer-time { display: block; margin-top: calc(4 * var(--u)); font-family: var(--numerals); font-weight: 600; font-size: calc(52 * var(--u)); line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; }
.timer-bar { display: block; height: 3px; margin-top: calc(6 * var(--u)); border-radius: 2px; background: var(--off); overflow: hidden; }
.timer-bar i { display: block; width: 100%; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(var(--left, 1)); }
.timer.is-fresh .timer-bar i { opacity: 0; }
.timer.is-running { border-color: rgb(255 91 53 / 0.6); color: var(--heat); }
.timer.is-running:hover { border-color: var(--heat); }
.timer.is-running .timer-name { color: var(--heat); }
.timer.is-done { border-color: var(--heat); background: var(--heat); color: var(--on-heat); animation: timer-done 2s steps(1, end) infinite; }
.timer.is-done .timer-name { color: inherit; }
@keyframes timer-done { 50% { background: var(--heat-glow); color: var(--heat); } }

/* 21:10 Protokoll */
.log { margin-top: calc(28 * var(--u)); }
.log-top { display: grid; grid-template-columns: 1fr calc(250 * var(--u)); gap: calc(28 * var(--u)); align-items: stretch; }
.log-top .screen { margin-top: 0; }
.scene { height: 100%; border-radius: 0 calc(17 * var(--u)) calc(17 * var(--u)) 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%); }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.log .rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(43 * var(--u)); margin-top: calc(36 * var(--u)); }
.log .rows > div { display: block; }
.log .rows > div:nth-last-child(2) { border-bottom: 1px solid var(--hairline); }
.log .rows dt { padding: 0 0 calc(8 * var(--u)); }

.rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; }
.rating button { width: 40px; height: 22px; padding: 0; border: 1px solid var(--faint); border-radius: 2px; background: var(--raised); cursor: pointer; transition: background-color 140ms linear, border-color 140ms linear; }
.rating button::before { content: ""; display: block; margin: -12px 0; height: 46px; }
.rating button.is-on { border-color: var(--heat); background: var(--heat); }
.rating button:hover { border-color: var(--print); }
.rating output { margin-left: 10px; font-family: var(--numerals); font-weight: 600; font-size: calc(26 * var(--u)); min-width: 4.2em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }

.rows > div { display: block; }
.log .rows > div:nth-last-child(2) { border-bottom: 1px solid var(--hairline); }
.log .rows dt { padding: 0 0 calc(8 * var(--u)); }

.rows > div { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; column-gap: calc(16 * var(--u)); padding: calc(20 * var(--u)) 0; border-top: 1px solid var(--hairline); }
.rows > div:last-child { border-bottom: 1px solid var(--hairline); }
.rows dt { padding-top: 0.5em; font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: 0.9px; text-transform: uppercase; color: var(--dim); }
.rows dd { margin: 0; max-width: 34em; }

/* v2 Vorher auf dem Start, nachher in den Versionen: zwei Bildschirme im selben Maßstab */
.versions { display: grid; grid-template-columns: repeat(2, calc(300 * var(--u))); gap: calc(43 * var(--u)); align-items: start; margin-top: calc(4 * var(--u)); }
.screen-cut img { border-bottom: 0; border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }

/* Nach dem Abend */
.chapter { display: grid; grid-template-columns: 5fr 7fr; column-gap: calc(60 * var(--u)); margin-top: calc(200 * var(--u)); padding-inline: var(--gutter); }
.chapter h2 { max-width: 11em; font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }
.rows-wide > div { grid-template-columns: calc(170 * var(--u)) 1fr; }
.chapter-stack { display: block; }
.chapter-stack h2 { max-width: 18em; }

.tiers { display: grid; grid-template-columns: 5fr 7fr; column-gap: calc(60 * var(--u)); margin-top: calc(48 * var(--u)); }
.tier { padding-top: calc(22 * var(--u)); border-top: 1px solid var(--hairline); }
.tier h3 { font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; letter-spacing: -0.005em; }
.tier-lede { margin-top: calc(14 * var(--u)); max-width: 30em; }
.tier ul { margin-top: calc(22 * var(--u)); color: var(--dim); }
.tier li { position: relative; padding: calc(7 * var(--u)) 0 calc(7 * var(--u)) 26px; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 12px; height: 3px; border-radius: 1.5px; background: var(--faint); }
.tier dl { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)) calc(36 * var(--u)); margin-top: calc(26 * var(--u)); }
.tier dt { font-weight: 600; }
.tier dd { margin: calc(4 * var(--u)) 0 0; color: var(--dim); font-size: max(16px, calc(18 * var(--u))); line-height: 1.45; }
.tier-foot { margin-top: calc(28 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--hairline); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); }

/* Schluss: die Uhr des Besuchers */
.closing { display: grid; grid-template-columns: auto 1fr; column-gap: calc(80 * var(--u)); align-items: end; margin-top: calc(220 * var(--u)); padding: 0 var(--gutter) calc(150 * var(--u)); }
.closing-clock .clock-digits { min-width: 1.6em; font-variant-numeric: tabular-nums lining-nums; }
.closing-clock.is-live .clock-digits { color: var(--heat); text-shadow: 0 2px calc(22 * var(--u)) rgb(255 91 53 / 0.35); }
.closing-body { max-width: calc(520 * var(--u)); padding-bottom: calc(26 * var(--u)); }
.closing h2 { font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }

/* Fuß */
.foot { width: min(100%, calc(1440 * var(--u))); margin-inline: auto; padding: calc(36 * var(--u)) var(--gutter) calc(56 * var(--u)); display: grid; grid-template-columns: 1fr auto; gap: calc(14 * var(--u)) calc(40 * var(--u)); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); border-top: 1px solid var(--hairline); }
.foot-brand { display: flex; align-items: center; gap: calc(16 * var(--u)); color: var(--print); }
.foot-brand .mark { height: calc(34 * var(--u)); min-height: 28px; }
.foot-note { grid-column: 1; max-width: 40em; }
.foot-nav { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: calc(28 * var(--u)); align-items: center; }
.foot-nav a { padding-block: max(0.8em, 15px); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 0.3em; transition: color var(--switch), text-decoration-color var(--switch); }
.foot-nav a:hover { color: var(--print); text-decoration-color: var(--faint); }

/* Fotos blenden weich auf, Ziffern rollen herein: nur wenn das Skript läuft. */
.js .hero-photo img, .js .scene img { opacity: 0; transition: opacity 420ms ease-out; }
.js .hero-photo img.is-loaded, .js .scene img.is-loaded { opacity: 1; }
.digit { display: inline-block; }
.js .station-time.is-waiting .digit { opacity: 0; transform: translateY(38%); }
.js .station-time .digit { transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out; transition-delay: calc(var(--i) * 18ms); }

/* Schmale Bildschirme */
@media (max-width: 899px) {
  :root { --u: 0.72px; --gutter: 20px; }
  html { scroll-padding-top: 84px; }
  .top { height: 64px; }
  .mark { height: 34px; }
  .wordmark { font-size: 24px; }
  .top-nav { display: none; }

  .hero { height: auto; padding-inline: 0; display: flex; flex-direction: column; }
  .hero-copy { width: auto; padding: 8px var(--gutter) 0; }
  .clock { gap: 10px; }
  .clock-digits { font-size: min(38vw, 250px); }
  .clock-tag { font-size: 14px; }
  h1 { margin-top: 14px; max-width: 12em; font-size: clamp(32px, 9.4vw, 46px); }
  .go { display: flex; justify-content: center; height: 52px; margin-top: 26px; border-radius: 12px; }
  .soon { margin-top: 12px; }
  .hero-photo { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 28px; border-radius: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero-photo img { aspect-ratio: 5 / 4; object-position: 42% 50%; }

  .rail { margin-top: 4px; padding: 10px var(--gutter) 0; }
  .rail ol { gap: 8px; padding-bottom: 12px; }
  .rail a { column-gap: 0; }
  .rail-seg { height: 4px; margin-bottom: 6px; }
  .rail-time { font-size: 24px; }
  .rail-label { flex-basis: 100%; margin-top: 4px; font-size: 12px; line-height: 1.25; }

  .station { display: block; padding: 44px var(--gutter) 0; }
  .station + .station { margin-top: 88px; }
  .station-time { position: static; font-size: min(34vw, 190px); }
  .station-body { padding-top: 10px; }
  .chat { border-radius: 16px; margin-top: 22px; }
  .chat-bar { padding: 12px; gap: 12px; }
  .chat-tab { min-width: 0; padding: 9px 12px; border-radius: 9px; gap: 8px; }
  .chat-dot { width: 9px; height: 9px; }
  .chat-log { gap: 12px; padding: 18px 14px 16px; }
  .msg { max-width: 92%; gap: 10px; }
  .msg-user p { padding: 10px 14px; border-radius: 18px 18px 5px 18px; }
  .chat-saved { flex-wrap: wrap; gap: 6px 16px; min-width: 0; padding: 12px 14px; border-radius: 14px; }
  .chat-saved-version { font-size: 34px; }
  .chat-input { margin: 0 12px 12px; padding: 6px 6px 6px 16px; }
  .notes { grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
  .notes li { padding: 14px 0; }

  .screen { margin-top: 22px; }
  .screen-tablet { margin-inline: calc(-1 * var(--gutter)); }
  .screen-tablet img { border-radius: 0; border-inline: 0; }
  .screen-phone img { border-radius: 22px; }
  .screen figcaption { margin-top: 12px; }

  .instruments { grid-template-columns: 1fr; gap: 40px; margin-top: 34px; }
  .instrument { padding-top: 16px; }
  .portions-count { font-size: 56px; }
  .amounts li { grid-template-columns: 76px 44px 1fr; padding: 6px 0; }
  .amount { font-size: 30px; }
  .timer { padding: 12px 14px 10px; border-radius: 14px; }
  .timer-time { font-size: 44px; }

  .log { margin-top: 22px; }
  .log-top { grid-template-columns: 1fr; gap: 22px; }
  .log-top .screen-phone { max-width: 300px; }
  .scene { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .scene { height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
  .scene img { height: auto; aspect-ratio: 1 / 1; object-position: 88% 50%; }
  .log .rows { grid-template-columns: 1fr; margin-top: 26px; }
  .log .rows > div:nth-last-child(2) { border-bottom: 0; }
  .rows > div, .rows-wide > div { grid-template-columns: 1fr; row-gap: 6px; padding: 16px 0; }
  .rows dt { padding-top: 0; }
  .rating output { font-size: 24px; }

  .versions { grid-template-columns: 1fr; gap: 32px; margin-top: 0; }
  .versions .screen-phone { max-width: 300px; }
  .screen-cut img { border-radius: 22px 22px 0 0; }

  .chapter { display: block; margin-top: 120px; }
  .chapter h2 { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 26px; }
  .tiers { grid-template-columns: 1fr; row-gap: 44px; margin-top: 0; }
  .tier h3 { font-size: 36px; }
  .tier dl { grid-template-columns: 1fr; gap: 18px; }

  .closing { display: block; margin-top: 120px; padding-bottom: 90px; }
  .closing-body { max-width: none; padding: 14px 0 0; }
  .closing h2 { font-size: clamp(30px, 8.4vw, 40px); }

  .foot { grid-template-columns: 1fr; padding: 28px var(--gutter) 44px; }
  .foot-brand .mark { height: 28px; }
  .foot-nav { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .timer.is-done { animation: none; }
}

/* Rechtliches */
.legal { width: min(100%, calc(1440 * var(--u))); margin-inline: auto; padding: calc(60 * var(--u)) var(--gutter) calc(140 * var(--u)); }
.legal h1 { margin-top: 0; max-width: none; }
.legal h2 { margin-top: 2.2em; font-weight: 600; font-size: max(20px, calc(26 * var(--u))); line-height: 1.2; }
.legal p, .legal address { margin-top: 0.9em; max-width: 38em; font-style: normal; }
.legal .todo { margin-top: 1.6em; padding: 16px 20px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel); color: var(--dim); }
.legal a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.25em; }