/* 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-end { display: flex; align-items: center; gap: calc(37 * var(--u)); }
.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); }

/* Sprachwahl: zwei Segmente wie am Gerät, das gewählte liegt erhaben. */
.lang { display: flex; padding: 3px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--panel); }
.lang a { position: relative; padding: 7px 11px; border-radius: 7px; color: var(--dim); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: 0.4px; transition: color var(--switch), background-color var(--switch); }
.lang a::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.lang a:hover { color: var(--print); }
.lang a[aria-current="true"] { background: var(--raised); 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; }
.soon a { color: var(--print); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.25em; transition: text-decoration-color var(--switch); }
.soon a:hover { text-decoration-color: var(--print); }
.closing .go { margin-top: calc(30 * var(--u)); }
.go-row { display: flex; flex-wrap: wrap; column-gap: calc(14 * var(--u)); }

/* 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%; }

/* Der erste Blick endet mit der Zeitleiste. Reicht die Höhe des Fensters nicht für das volle Maß,
   wird er niedriger und sein Text im selben Verhältnis kleiner; das Foto behält seine Breite.
   236 = Kopf 96 + Abstand 56 + Zeitleiste 81 und etwas Luft. */
@media (min-width: 900px) {
  .hero {
    --hero-h: clamp(calc(430 * var(--u)), calc(100vh - 236 * var(--u)), calc(660 * var(--u)));
    --hero-u: min(var(--u), calc(var(--hero-h) / 640));
    height: var(--hero-h);
  }
  @supports (height: 100svh) {
    .hero { --hero-h: clamp(calc(430 * var(--u)), calc(100svh - 236 * var(--u)), calc(660 * var(--u))); }
  }
  .hero-copy { --u: var(--hero-u); }
  .hero-photo { height: calc(var(--hero-h) - 31 * var(--u)); }
}

/* 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); }

/* Was zu Plus gehört, trägt die kalte Lampe der App: ein Ring, nie Hitzerot. Das Zeichen führt zum Abschnitt Plus. */
.plus-mark { position: relative; display: flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: calc(8 * var(--u)); color: var(--print); }
.plus-mark::after { content: ""; position: absolute; left: -10px; right: -10px; top: -24px; bottom: -10px; }
.lamp { width: 12px; height: 12px; border: 1.5px solid var(--faint); border-radius: 50%; transition: border-color var(--switch); }
.plus-mark:hover .lamp { border-color: var(--print); }
.station-note { margin-top: calc(22 * var(--u)); max-width: 38em; color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1.45; text-wrap: balance; }

.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; text-wrap: balance; }
.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))); }

/* Videos: Vorschaubild mit Play-Knopf; erst der Klick holt den Player von YouTube. */
.videos { display: grid; gap: calc(56 * var(--u)); align-content: start; }
.video-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(17 * var(--u)); border: 1px solid var(--hairline); background: var(--panel); }
.video-frame img, .video-frame iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-frame img { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter var(--switch); }
.video-play { position: absolute; right: calc(28 * var(--u)); bottom: calc(28 * var(--u)); width: max(56px, calc(76 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: var(--heat); box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) var(--heat-glow); transition: box-shadow var(--switch), transform var(--switch); }
.video-play::after { content: ""; position: absolute; left: 39%; top: 50%; translate: 0 -50%; border-style: solid; border-width: 0.6em 0 0.6em 1em; border-color: transparent transparent transparent var(--on-heat); font-size: max(14px, calc(19 * var(--u))); }
.video-frame:hover img { transform: scale(1.015); filter: brightness(1.06); }
.video-frame:hover .video-play { box-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgb(255 91 53 / 0.38); transform: scale(1.04); }
.video-frame:active .video-play { transform: scale(0.98); }
.video-title { margin-top: calc(20 * var(--u)); font-weight: 600; font-size: max(20px, calc(26 * var(--u))); line-height: 1.2; }
.video-text { margin-top: calc(6 * var(--u)); max-width: 34em; color: var(--dim); }
.video-note { margin-top: calc(-30 * var(--u)); color: var(--faint); font-size: max(14px, calc(15 * 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; }
  /* Die Ziffern werden so groß, wie neben dem Etikett Platz bleibt. --tag ist dessen Breite bei 14px, je Sprache. */
  .clock { gap: 10px; flex-wrap: wrap; --tag: 58px; }
  .closing-clock { --tag: 38px; }
  :lang(en) .clock { --tag: 80px; }
  :lang(en) .closing-clock { --tag: 56px; }
  .clock-digits { font-size: min(38vw, 250px, (100vw - 2 * var(--gutter) - 10px - var(--tag)) / 1.83); }
  .closing-clock .clock-digits { font-size: min(38vw, 250px, (100vw - 2 * var(--gutter) - 10px - var(--tag)) / 2.14); }
  .clock-tag { font-size: 14px; }
  h1 { margin-top: 14px; max-width: 12em; font-size: clamp(32px, 9.4vw, 46px); text-wrap: balance; }
  .go { display: flex; justify-content: center; height: 52px; margin-top: 26px; border-radius: 12px; }
  .go-row { display: block; }
  .go-row .go + .go { margin-top: 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; }
  .station-note { margin-top: 18px; }
  .plus-mark { margin-bottom: 6px; }
  .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: minmax(0, 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; }

/* Kopfzeile: Die Sprungmarken bleiben Text; der Umrechner ist ein eigenes Werkzeug
   und trägt die Form der Sprachwahl. Ein Strich trennt beides. */
.top-nav { position: relative; padding-right: calc(37 * var(--u)); }
.top-nav::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: var(--hairline); }
.top-end { gap: calc(24 * var(--u)); }
.werkzeug { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--panel); color: var(--print); font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; transition: border-color var(--switch), background-color var(--switch); }
.werkzeug svg { flex: none; width: 17px; height: 17px; color: var(--dim); transition: color var(--switch); }
.werkzeug:hover { border-color: var(--faint); }
.werkzeug:hover svg, .werkzeug[aria-current="page"] svg { color: var(--print); }
.werkzeug[aria-current="page"] { background: var(--raised); border-color: var(--raised); }

/* Zutaten: eine Tasse, sechs Gewichte, und ein Feld zum Ausprobieren. */
.zutaten { margin-top: calc(200 * var(--u)); padding-inline: var(--gutter); }
.zutaten-kopf, .zutaten-buehne { display: grid; grid-template-columns: 5fr 7fr; column-gap: calc(60 * var(--u)); }
.zutaten-kopf { align-items: end; }
.zutaten h2 { max-width: 11em; font-weight: 600; font-size: calc(44 * var(--u)); line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }
.zutaten-lede { max-width: 30em; color: var(--dim); font-size: max(17px, calc(22 * var(--u))); line-height: 1.4; }
.zutaten-lede q { color: var(--print); }
.zutaten-buehne { margin-top: calc(48 * var(--u)); }

.tasse, .probe { padding-top: calc(18 * var(--u)); border-top: 1px solid var(--hairline); }
.tasse-oben { display: grid; grid-template-columns: auto 1fr; column-gap: calc(28 * var(--u)); align-items: end; margin-top: calc(10 * var(--u)); }
.tasse-svg { width: calc(150 * var(--u)); min-width: 92px; height: auto; color: var(--dim); }
.tasse-svg .fuellung { fill: var(--raised); }
.tasse-svg .strich { fill: none; stroke: var(--faint); }
.waage-wert { min-height: 1em; color: var(--heat); font-family: var(--numerals); font-weight: 600; font-size: calc(120 * var(--u)); line-height: 0.9; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.waage-wert small { margin-left: 0.08em; color: var(--dim); font-size: 0.42em; }
.waage-was { margin-top: calc(10 * var(--u)); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); }
.waage-was strong { color: var(--print); font-weight: 600; }

.gewichte { margin-top: calc(22 * var(--u)); }
.gewichte button, .gewichte li.zeile { display: grid; grid-template-columns: calc(130 * var(--u)) 1fr calc(70 * var(--u)); column-gap: calc(14 * var(--u)); align-items: center; width: 100%; min-height: 44px; padding: calc(6 * var(--u)) 0; border: 0; border-top: 1px solid var(--hairline); background: none; color: var(--dim); font: inherit; font-size: max(15px, calc(17 * var(--u))); text-align: left; transition: color var(--switch); }
.gewichte button { cursor: pointer; }
.gewichte li:last-child button, .gewichte li.zeile:last-child { border-bottom: 1px solid var(--hairline); }
.gewichte button:hover { color: var(--print); }
.gewichte .balken { height: 6px; border-radius: 3px; background: var(--off); overflow: hidden; }
.gewichte .balken i { display: block; width: calc(var(--anteil) * 100%); height: 100%; border-radius: 3px; background: var(--faint); transition: background-color var(--switch); }
.gewichte .g { text-align: right; color: var(--print); font-family: var(--numerals); font-weight: 600; font-size: max(20px, calc(26 * var(--u))); font-variant-numeric: tabular-nums lining-nums; }
.gewichte button[aria-pressed="true"], .gewichte li.ist-hier { color: var(--print); }
.gewichte button[aria-pressed="true"] .balken i, .gewichte li.ist-hier .balken i { background: var(--heat); }
.gewichte button[aria-pressed="true"] .g, .gewichte li.ist-hier .g { color: var(--heat); }

.probe-feld { display: flex; align-items: center; gap: 10px; margin-top: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--hairline); border-radius: 999px; background: var(--panel); transition: border-color var(--switch); }
.probe-feld:focus-within { border-color: var(--faint); }
.probe-feld input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--print); font: inherit; font-size: max(17px, calc(22 * var(--u))); outline: none; }
.probe-feld input::placeholder { color: var(--faint); }
.probe-feld .print { padding-right: 12px; white-space: nowrap; }
.beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(14 * var(--u)); }
.beispiele button { min-height: 40px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--dim); font: inherit; font-size: 15px; cursor: pointer; transition: color var(--switch), border-color var(--switch), background-color var(--switch); }
.beispiele button:hover { border-color: var(--faint); color: var(--print); }
.beispiele button[aria-pressed="true"] { border-color: var(--raised); background: var(--raised); color: var(--print); }

.ergebnis { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(24 * var(--u)); min-height: calc(170 * var(--u)); margin-top: calc(30 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)); border: 1px solid var(--hairline); border-radius: calc(17 * var(--u)); background: var(--panel); }
.ergebnis-seite .print { display: block; margin-bottom: calc(10 * var(--u)); }
.ergebnis-original { color: var(--dim); font-size: max(20px, calc(28 * var(--u))); line-height: 1.25; overflow-wrap: anywhere; }
.pfeil { width: calc(40 * var(--u)); min-width: 24px; color: var(--faint); }
.ergebnis-app { display: grid; grid-template-columns: auto auto 1fr; column-gap: 10px; align-items: baseline; }
.ergebnis-app .print, .ergebnis-app .grund { grid-column: 1 / -1; }
.ergebnis-app .amount { min-width: 1ch; color: var(--heat); font-family: var(--numerals); font-weight: 600; font-size: calc(64 * var(--u)); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.ergebnis-app .unit { color: var(--dim); font-size: max(17px, calc(22 * var(--u))); }
.ergebnis-app .name { font-weight: 500; font-size: max(20px, calc(28 * var(--u))); overflow-wrap: anywhere; }
.ergebnis-app .grund { margin-top: calc(10 * var(--u)); color: var(--faint); font-size: max(14px, calc(15 * var(--u))); }
.ergebnis.ist-unbekannt .amount { color: var(--print); }

.zum-umrechner { margin-top: calc(16 * var(--u)); font-size: max(15px, calc(17 * var(--u))); }
.zum-umrechner a { color: var(--print); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.25em; transition: text-decoration-color var(--switch); }
.zum-umrechner a:hover { text-decoration-color: var(--print); }
.zum-umrechner a::after { content: " →"; }

.belege { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); margin-top: calc(48 * var(--u)); }
.belege li { padding-top: calc(14 * var(--u)); border-top: 1px solid var(--hairline); color: var(--dim); font-size: max(15px, calc(17 * var(--u))); line-height: 1.45; }
.belege .zahl { display: block; margin-bottom: calc(6 * var(--u)); color: var(--print); font-family: var(--numerals); font-weight: 600; font-size: calc(52 * var(--u)); line-height: 1; font-variant-numeric: lining-nums; }
.belege .version { display: inline-flex; align-items: center; gap: 8px; margin-top: calc(8 * var(--u)); }
.belege .version .lamp { width: 8px; height: 8px; border-color: var(--heat); background: var(--heat); }

/* Umrechner: eigene Seite unter /umrechnen. */
.seite { padding: calc(56 * var(--u)) var(--gutter) 0; }
.krume { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.krume a { color: var(--dim); transition: color var(--switch); }
.krume a:hover { color: var(--print); }
.krume span[aria-hidden] { color: var(--faint); }
.seite h1 { margin-top: calc(18 * var(--u)); max-width: 15em; font-size: calc(64 * var(--u)); line-height: 1.04; text-wrap: balance; }
.seite-lede { margin-top: calc(18 * var(--u)); max-width: 34em; color: var(--dim); font-size: max(17px, calc(22 * var(--u))); line-height: 1.4; }

.rechner { margin-top: calc(40 * var(--u)); border: 1px solid var(--hairline); border-radius: calc(17 * var(--u)); background: var(--panel); }
.rechner-felder { display: grid; grid-template-columns: calc(150 * var(--u)) auto 1fr; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)); border-bottom: 1px solid var(--hairline); }
.feld { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld > .print { padding-left: 4px; }
.feld > label.print { cursor: default; }
.feld input { width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--glass); color: var(--print); font: inherit; font-size: max(18px, calc(22 * var(--u))); outline: none; transition: border-color var(--switch); }
.feld input:focus { border-color: var(--faint); }
.feld-menge input { font-family: var(--numerals); font-weight: 600; font-size: max(24px, calc(30 * var(--u))); font-variant-numeric: tabular-nums lining-nums; }
.masse { display: flex; height: 56px; padding: 4px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--glass); }
.masse button { min-width: 52px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--dim); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: color var(--switch), background-color var(--switch); }
.masse button:hover { color: var(--print); }
.masse button[aria-pressed="true"] { background: var(--raised); color: var(--print); }
.masse button:disabled { opacity: 0.35; cursor: default; }
.vorschlaege { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--raised); box-shadow: 0 18px 40px rgb(0 0 0 / 0.45); }
.vorschlaege[hidden] { display: none; }
.vorschlaege li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 8px; font-size: 16px; cursor: pointer; }
.vorschlaege li:hover, .vorschlaege li[aria-selected="true"] { background: var(--off); }
.vorschlaege small { color: var(--faint); font-size: 14px; }

.rechner-ergebnis { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: calc(40 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.haupt { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.haupt .amount { color: var(--heat); font-family: var(--numerals); font-weight: 600; font-size: calc(128 * var(--u)); line-height: 0.9; font-variant-numeric: tabular-nums lining-nums; }
.haupt .unit { color: var(--dim); font-size: max(20px, calc(30 * var(--u))); }
.haupt-satz { margin-top: calc(12 * var(--u)); color: var(--dim); font-size: max(15px, calc(18 * var(--u))); }
.neben { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--hairline); }
.neben div { padding: calc(12 * var(--u)) calc(14 * var(--u)) 0 0; }
.neben dt { color: var(--dim); font-weight: 600; font-size: 12px; letter-spacing: 0.9px; text-transform: uppercase; }
.neben dd { margin: 4px 0 0; font-family: var(--numerals); font-weight: 600; font-size: max(24px, calc(34 * var(--u))); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.rechner-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 0 calc(28 * var(--u)) calc(20 * var(--u)); color: var(--faint); font-size: 14px; }
.rechner-fuss a { color: var(--dim); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 0.25em; }
.tassen { display: flex; padding: 3px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--glass); }
.tassen button { min-height: 36px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: var(--dim); font: inherit; font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; transition: color var(--switch), background-color var(--switch); }
.tassen button:hover { color: var(--print); }
.tassen button[aria-pressed="true"] { background: var(--raised); color: var(--print); }
/* Ohne Skript rechnet nichts: Knöpfe des Umrechners und des Abschnitts sind dann nur Anzeige. */
html:not(.js) .masse button, html:not(.js) .tassen button, html:not(.js) .kachel, html:not(.js) .beispiele button, html:not(.js) .gewichte button { pointer-events: none; cursor: default; }

.block { margin-top: calc(110 * var(--u)); }
.block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: calc(14 * var(--u)); border-bottom: 1px solid var(--hairline); }
.block h2 { font-weight: 600; font-size: calc(36 * var(--u)); line-height: 1.1; }
.block-kopf p { color: var(--dim); font-size: max(15px, calc(17 * var(--u))); }
.kacheln { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); }
.kachel { display: block; width: 100%; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * 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); }
.kachel:hover { border-color: var(--faint); background: var(--panel); }
.kachel strong { display: block; font-weight: 600; font-size: max(17px, calc(20 * var(--u))); }
.kachel span { display: block; margin-top: calc(10 * var(--u)); color: var(--dim); font-size: 13px; }
.kachel b { color: var(--print); font-family: var(--numerals); font-weight: 600; font-size: max(26px, calc(34 * var(--u))); line-height: 1; font-variant-numeric: lining-nums; }
.zwei { display: grid; grid-template-columns: 5fr 7fr; column-gap: calc(60 * var(--u)); }
.zwei > p { max-width: 26em; padding-top: calc(22 * var(--u)); color: var(--dim); font-size: max(17px, calc(20 * var(--u))); line-height: 1.45; }
.quellen { max-width: 40em; margin-top: calc(18 * var(--u)); color: var(--dim); }
.app-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(28 * var(--u)); margin-top: calc(110 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)); border: 1px solid var(--hairline); border-radius: calc(17 * var(--u)); background: var(--panel); }
.app-band img { width: auto; height: calc(64 * var(--u)); min-height: 44px; border-radius: 22%; }
.app-band h2 { font-weight: 600; font-size: max(22px, calc(30 * var(--u))); line-height: 1.15; }
.app-band p { max-width: 36em; margin-top: 6px; color: var(--dim); font-size: max(15px, calc(17 * var(--u))); }
.app-band .go { margin-top: 0; white-space: nowrap; }
.seite-ende { height: calc(140 * var(--u)); }

@media (max-width: 899px) {
  .top-end { gap: 8px; }
  .wordmark { font-size: 20px; }
  .brand { gap: 10px; }
  .werkzeug { height: 36px; padding: 0 9px 0 7px; gap: 5px; font-size: 13px; }
  .werkzeug svg { width: 14px; height: 14px; }
  .lang a { padding: 7px 9px; }

  .zutaten { margin-top: 120px; }
  .zutaten-kopf, .zutaten-buehne { display: block; }
  .zutaten h2 { margin-bottom: 18px; font-size: clamp(30px, 8.4vw, 40px); }
  .probe { margin-top: 44px; }
  .waage-wert { font-size: clamp(72px, 22vw, 110px); }
  .gewichte button, .gewichte li.zeile { grid-template-columns: 110px 1fr 56px; }
  .probe-feld { padding-left: 16px; }
  .probe-feld .print { display: none; }
  .ergebnis { grid-template-columns: 1fr; gap: 14px; padding: 20px; border-radius: 16px; }
  .pfeil { width: 22px; transform: rotate(90deg); }
  .ergebnis-app .amount { font-size: 54px; }
  .belege { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  .belege li { padding: 16px 0; }
  .belege .zahl { font-size: 44px; }

  .seite { padding-top: 28px; }
  .seite h1 { font-size: clamp(32px, 9vw, 44px); }
  .rechner { border-radius: 16px; }
  .rechner-felder { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .rechner-felder > .feld-masse { grid-column: 1 / -1; grid-row: 2; }
  .masse button { flex: 1; min-width: 0; padding: 0 4px; }
  .rechner-ergebnis { grid-template-columns: 1fr; row-gap: 22px; padding: 20px; }
  .haupt .amount { font-size: clamp(64px, 20vw, 96px); }
  .neben { grid-template-columns: repeat(2, 1fr); }
  .neben div { padding-bottom: 10px; }
  .rechner-fuss { padding: 0 20px 18px; }
  .tassen { width: 100%; }
  .tassen button { flex: 1; padding: 0 4px; font-size: 12px; }
  .block { margin-top: 72px; }
  .block h2 { font-size: 26px; }
  .block-kopf { flex-direction: column; gap: 4px; }
  .kacheln { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .zwei { display: block; }
  .zwei > p { padding-top: 16px; }
  .app-band { grid-template-columns: 1fr; padding: 22px; border-radius: 16px; }
  .app-band .go { justify-content: center; }
}
/* Telefone unter 390 px (iPhone SE und mini, viele Android mit 360 px): nur das Zeichen,
   damit Umrechner und Sprache Platz haben. */
@media (max-width: 389px) {
  .wordmark { display: none; }
}