/* Taco Ranch SOT – Gestaltung
 *
 * Leitidee: alles auf Weiß wie bei McDonald's, Karten mit feinem Rand; das Essen ist die Farbe.
 * (Jan, 12.11.2026 abends: alle Hintergründe weiß, alle Kacheln gleich groß, sichtbare Scrollleiste.)
 *   Gold  #D1A054  genau eine Hauptaktion je Screen, aktive Kategorie, Fortschritt. Text darauf immer dunkel.
 *   Oliv  #757A4E  Auswahlzustand und die Labels vegetarisch / vegan.
 *   Sonst Graustufen und ein gedecktes Rot für Fehler. Keine Verläufe, keine Texturen.
 * Touch-Ziele mindestens 72 x 72 px mit 12 px Abstand.
 * Kopf wie bei McDonald's (Jan, 13.11.2026): das Logo groß oben links über der Kategorieleiste, rechts
 * daneben die Überschrift in großer Schrift; bedienbar ist im Kopf nur die Sprachwahl.
 * Schrift wie auf tacoranch.de: Barlow 900 für Überschriften, DM Sans für Text.
 */

@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: block; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500 600; font-display: block; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700 900; font-display: block; }
/* Weitere Sprachen (tools/sot-schriften.mjs, Dateien in sot/assets/fonts). Jede Datei wird erst geladen, wenn ein Zeichen
   aus ihrem Bereich auf dem Bildschirm steht. Polnisch und Türkisch: dieselben beiden Schriften mit erweitertem Latein.
   Kyrillisch gibt es von Barlow und DM Sans nicht: Sofia Sans für Überschriften, Manrope für Text. Arabisch: Noto Sans
   Arabic. Japanisch, Chinesisch, Koreanisch: Noto Sans JP, SC, KR mit den Zeichen unserer Texte. */
@font-face { font-family: 'Barlow'; src: url('/sot/assets/fonts/barlow-latin-ext-900-normal.woff2') format('woff2'); font-weight: 900; font-display: block; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; src: url('/sot/assets/fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; src: url('/sot/assets/fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2'); font-weight: 500 600; font-display: block; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; src: url('/sot/assets/fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2'); font-weight: 700 900; font-display: block; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans'; src: url('/sot/assets/fonts/sofia-sans-cyrillic-900-normal.woff2') format('woff2'); font-weight: 900; font-display: block; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/sot/assets/fonts/manrope-cyrillic-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/sot/assets/fonts/manrope-cyrillic-500-normal.woff2') format('woff2'); font-weight: 500 600; font-display: block; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/sot/assets/fonts/manrope-cyrillic-700-normal.woff2') format('woff2'); font-weight: 700 900; font-display: block; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('/sot/assets/fonts/noto-sans-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400 500; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('/sot/assets/fonts/noto-sans-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 600 800; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('/sot/assets/fonts/noto-sans-arabic-arabic-900-normal.woff2') format('woff2'); font-weight: 900; font-display: block; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Sans JP'; src: url('/sot/assets/fonts/noto-sans-jp-kiosk.woff2') format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: 'Noto Sans SC'; src: url('/sot/assets/fonts/noto-sans-sc-kiosk.woff2') format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: 'Noto Sans KR'; src: url('/sot/assets/fonts/noto-sans-kr-kiosk.woff2') format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7AF, U+FF00-FFEF; }

:root {
  /* Schriftfolgen: zuerst unsere beiden Schriften, dann die Schriften der weiteren Sprachen (siehe oben). */
  --font-text: 'DM Sans', 'Manrope', 'Noto Sans KR', 'Noto Sans Arabic', Arial, sans-serif;
  --font-head: 'Barlow', 'Sofia Sans', 'Noto Sans KR', 'Noto Sans Arabic', 'Arial Narrow', Arial, sans-serif;
  --white: #ffffff;
  --paper: #f5f3ef;
  --paper-2: #ebe8e1;
  --gold: #d1a054;
  --gold-press: #c2924a;
  --olive: #757a4e;
  --olive-ink: #575c38;
  --ink: #2b2825; /* Schrift: warmes Anthrazit statt vollem Schwarz (Jan, 14.11.2026) */
  --ink-2: #55524c;
  --ink-3: #6b6862;
  --line: #e2ded6;
  --line-2: #c9c4ba;
  --error: #a8402f;
  /* Farben aus dem Logo: Gelb und Grün. Für Flächen und Schmuck, nicht für Knöpfe (die bleiben Gold und Oliv). */
  --sun: #fdc300;
  --leaf: #37aa32;
  --sun-soft: #fff3c2;
  --leaf-soft: #e0f3dd;
  /* Unsere Handschrift: das tiefe Oliv der Menütafeln und des Schaufensters, dazu Creme. Als Fläche für die
     wenigen Markenmomente (Hinweis aufs Menü, Menü-Szene, Banner), nicht für Knöpfe. */
  --ranch: #55673c;
  --ranch-deep: #46552f;
  --cream: #f4efe2;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Weiße Karte auf weißem Grund: feiner Rand und ein sehr weicher Schatten. */
  --lift: 0 0 0 2px var(--line), 0 8px 22px rgba(40, 36, 28, 0.06);
  --lift-press: 0 0 0 2px var(--line-2);
  /* Jede Produktkachel ist überall gleich groß. */
  --card-w: 258px;
  --card-h: 360px;
  /* Auch jede Auswahl-Kachel (Abwahl, Extra, Topping) hat überall dieselbe Höhe. */
  --tile-w: 190px;
  --tile-h: 262px;
  /* Kopf und linke Spalte (Kategorien, Schritte eines Menüs) sind auf jedem Screen gleich groß. */
  --head-h: 200px;
  --rail-w: 216px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
body { font-family: var(--font-text); font-size: 26px; line-height: 1.3; color: var(--ink); -webkit-font-smoothing: antialiased; cursor: default; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: none; }
button:disabled { cursor: default; }
img { -webkit-user-drag: none; pointer-events: none; }
h1, h2 { font-family: var(--font-head); font-weight: 900; line-height: 1.05; letter-spacing: -0.005em; }
h1 { font-size: 64px; }
h2 { font-size: 46px; }
h3 { font-size: 28px; font-weight: 700; }
.muted { color: var(--ink-2); }
.chev { font-weight: 400; font-size: 1.25em; line-height: 0.8; }

#stage { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform-origin: center center; transform: translate(-50%, -50%); background: var(--white); overflow: hidden; }
.stage-inner { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; background: transparent; }

/* Icons: ein Raster, eine Strichstärke, Farbe und Größe vom Text. */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* Kein Nachziehen: Jeder Wechsel ist sofort da. Es gibt keine Überblendung zwischen Screens, kein
   Ein- und Ausblenden von Blättern, Rückfragen oder Listen und keine weichen Farbwechsel nach dem
   Tippen. Geblieben ist nur das kurze Eindrücken eines Knopfes, solange der Finger darauf liegt.
   (Jan, 12.11.2026) */

/* ---------- Screen-Gerüst ---------- */

/* Bildsprache: warmes Papier (Kopf und Kategorienleiste) und darauf ein weißes Blatt mit dem Inhalt. */
/* Screenwechsel: reine Überblendung über dem alten Screen, wie in der McDonald's-Referenz. */
.screen { position: absolute; inset: 0; display: grid; grid-template-rows: var(--head-h) minmax(0, 1fr) auto; background: var(--white); }

/* Kopf: links das Logo, so breit wie die Kategorieleiste darunter; daneben die Überschrift, rechts die Sprachwahl. */
.head { background: var(--white); padding: 0 30px 0 0; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) auto; align-items: center; }
.head-brand { display: grid; place-items: center; height: 100%; padding: 8px 0 0 10px; }
.head-logo { width: 184px; height: auto; pointer-events: auto; }
/* Bestellart als ruhige Zeile unter dem Titel, nicht als Marke darüber. */
.head-sub { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink-2); font-size: 24px; line-height: 1.2; }
.head-side { display: flex; align-items: center; gap: 22px; }
.head-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.head-tag .ic { width: 24px; height: 24px; vertical-align: 0; }
.head-text { min-width: 0; padding: 6px 22px 0 24px; }
/* Die Überschrift bleibt in einer Zeile; main.js macht sie kleiner, wenn sie sonst nicht passt (data-fit). */
.head-text h1 { font-size: 68px; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; }
.head-text h1.is-wrap { white-space: normal; overflow-wrap: break-word; }
.progress[data-fit] { white-space: nowrap; overflow: hidden; }

.body { position: relative; min-height: 0; overflow: hidden; background: var(--white); }
.body-ground { background: var(--white); }
.body-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 40px 48px; }

.foot { padding: 18px 32px 18px; border-top: 1px solid var(--line); background: var(--white); }
.foot-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 92px; }
.foot-back { min-width: 190px; }
.foot-mid { min-height: 84px; }
.foot-primary { justify-self: end; display: flex; }
.foot-primary .btn { min-width: 380px; }
.foot-help { text-align: center; color: var(--ink-2); font-size: 22px; margin-top: 12px; }
/* Mit Bestellleiste steht der Hinweis rechts in der Zeile, das spart dem Katalog Höhe. */
.foot-help-side { margin: 0; text-align: right; padding-right: 8px; }

/* ---------- Knöpfe ---------- */

.btn { min-height: 84px; padding: 0 32px; border-radius: 22px; font-weight: 600; font-size: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; transition: transform 90ms ease-out; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.38; }
.btn-primary { background: var(--gold); color: var(--ink); font-weight: 700; }
.btn-primary:active:not(:disabled) { background: var(--gold-press); }
/* Kontrast nach Apple HIG (accessibility.md › Color and effects: fette Schrift mindestens 3:1, bis 17 pt 4.5:1).
   Gold #d1a054 mit Schrift #2b2825: 6,2:1, gedrückt 5,2:1 – passt. Deaktiviert war es nur blass (38 % Deckkraft):
   1,7:1, zu schwach. Jetzt ein helles Gold mit dunklerer Schrift: 6,3:1, bleibt erkennbar "noch nicht bereit". */
.btn-primary:disabled { opacity: 1; background: #efe6d6; color: #5c5040; }
@media (prefers-contrast: more) { .btn-primary { color: #000; } .btn-primary:disabled { color: #3d3428; } }
.btn-quiet { background: var(--paper-2); }
.btn-quiet:active:not(:disabled) { background: var(--line-2); }
.btn-outline { background: var(--white); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn-outline:active:not(:disabled) { background: var(--paper); }
.btn-outline.is-on { box-shadow: inset 0 0 0 3px var(--olive); }
.btn-dark { background: #4a4741; color: var(--white); }
.btn-dark:active:not(:disabled) { background: #36332f; }
.btn-pill { min-height: 72px; padding: 0 26px 0 20px; border-radius: 999px; background: var(--paper); font-size: 23px; font-weight: 600; gap: 10px; }
.btn-pill:active:not(:disabled) { background: var(--paper-2); }
.btn-text { color: var(--ink-2); font-weight: 500; min-height: 76px; padding: 0 14px; font-size: 25px; }
.btn-text:active { background: var(--paper); }
.btn-s { min-height: 72px; font-size: 24px; padding: 0 24px; border-radius: 18px; }
.btn-xl { min-height: 132px; font-size: 44px; padding: 0 72px; border-radius: 34px; }
.btn-grow { flex: 1; }

.qty { display: inline-flex; align-items: center; border-radius: 22px; box-shadow: inset 0 0 0 2px var(--line-2); background: var(--white); }
.qty-btn { min-width: 84px; min-height: 84px; font-size: 40px; font-weight: 500; padding: 0; border-radius: 22px; }
.qty-btn:active:not(:disabled) { background: var(--paper); }
.qty-n { min-width: 56px; text-align: center; font-weight: 700; font-size: 32px; font-variant-numeric: tabular-nums; }
.qty-s .qty-btn { min-width: 76px; min-height: 72px; font-size: 34px; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.chip { min-height: 72px; padding: 0 30px; border-radius: 999px; font-weight: 600; font-size: 24px; box-shadow: inset 0 0 0 2px var(--line-2); background: var(--white); }
.chip.is-on { background: var(--olive); color: var(--white); box-shadow: none; }

.lang { display: inline-flex; gap: 12px; }
.lang-btn { min-height: 78px; min-width: 190px; padding: 0 34px; border-radius: 999px; font-weight: 600; font-size: 26px; box-shadow: inset 0 0 0 2px var(--line-2); background: var(--white); }
.lang-btn.is-on { background: var(--olive); color: var(--white); box-shadow: none; }
/* Im Kopf: zwei kurze Knöpfe, jeder ein volles Touch-Ziel. */
.lang-mini .lang-btn { min-width: 76px; min-height: 72px; padding: 0; border-radius: 20px; font-size: 24px; font-weight: 700; }
/* Sprachwahl: Weltkugel und Kürzel; ein Tipp öffnet die Liste aller Sprachen. */
.lang-open { display: inline-flex; align-items: center; gap: 10px; min-height: 72px; padding: 0 22px 0 18px; border-radius: 20px; font-size: 24px; font-weight: 700; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-2); white-space: nowrap; }
.lang-open .ic { width: 32px; height: 32px; color: var(--olive-ink); }
.lang-open:active { background: var(--paper); }
.lang-open-xl { min-height: 84px; padding: 0 30px 0 26px; border-radius: 999px; font-size: 28px; gap: 14px; }
.lang-open-xl .ic { width: 36px; height: 36px; }
.lang-open-xl .ic:last-child { width: 26px; height: 26px; color: var(--ink-2); }
.dialog-lang { width: 880px; max-width: 880px; }
.dialog-lang h2 { display: flex; align-items: center; justify-content: center; gap: 14px; }
.dialog-lang h2 .ic { width: 44px; height: 44px; color: var(--olive-ink); }
.lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.lang-pick { min-height: 92px; padding: 0 12px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-2); font-size: 30px; font-weight: 600; }
.lang-pick.is-on { background: var(--olive); color: var(--white); box-shadow: none; }
.lang-pick:active { background: var(--paper); }
.lang-pick.is-on:active { background: var(--olive-ink); }
/* Japanisch und Chinesisch teilen sich viele Zeichen, die je Sprache etwas anders aussehen: Darum gilt die Schrift
   der Sprache, in der der Kiosk gerade spricht (und am Knopf der Sprache in der Sprachwahl). */
.stage-inner[lang="ja"], .stage-inner [lang="ja"] { --font-text: 'DM Sans', 'Noto Sans JP', Arial, sans-serif; --font-head: 'Barlow', 'Noto Sans JP', 'Arial Narrow', Arial, sans-serif; font-family: var(--font-text); }
.stage-inner[lang="zh"], .stage-inner [lang="zh"] { --font-text: 'DM Sans', 'Noto Sans SC', Arial, sans-serif; --font-head: 'Barlow', 'Noto Sans SC', 'Arial Narrow', Arial, sans-serif; font-family: var(--font-text); }
/* Arabisch: Der Aufbau bleibt von links nach rechts, jeder Text läuft für sich von rechts nach links. */
.stage-inner.is-rtl :is(h1, h2, h3, p, li, button, span, strong, b, small, dt, dd) { unicode-bidi: plaintext; }

/* ---------- Startseite: Kacheln zu Kategorien, darunter Banner mit Film ---------- */

.shelf-home .home { display: grid; gap: 16px; padding: 10px 18px 28px 16px; }
.home-title { font-family: var(--font-head); font-weight: 900; font-size: 42px; line-height: 1.05; margin: 4px 2px 0; }
.home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Ruhige, einheitliche Kachel: Name groß links oben, das freigestellte Bild rechts unten. Das Bild bleibt ganz. */
.home-tile { position: relative; height: 290px; border-radius: 30px; overflow: hidden; text-align: left; background: var(--paper); transition: transform 90ms ease-out; }
.home-tile:active { transform: scale(0.98); }
.home-tile-name { position: absolute; left: 26px; top: 24px; z-index: 1; max-width: 58%; font-family: var(--font-head); font-weight: 900; font-size: 44px; line-height: 1.02; letter-spacing: -0.01em; overflow-wrap: break-word; }
.home-tile-pic { position: absolute; right: 12px; bottom: 10px; width: 64%; height: 76%; display: flex; align-items: flex-end; justify-content: flex-end; }
.home-tile-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Ohne freigestelltes Bild: das Foto des ersten Artikels; sein weißer Grund nimmt die Farbe der Kachel an. */
.home-tile-pic.is-photo img { mix-blend-mode: multiply; }

.home-banners { display: grid; gap: 14px; }
.banner { position: relative; border-radius: 30px; overflow: hidden; text-align: left; color: var(--ink); transition: transform 90ms ease-out; }
.banner:active { transform: scale(0.985); }
/* Banner mit Film: so breit wie die Fläche und genau so hoch wie der Film (1280 x 548), nichts wird beschnitten.
   Zu sehen ist das Standbild (letztes Bild des Films). Der Film selbst erscheint nur, während er läuft; die Filme
   laufen nacheinander (main.js). Beginnt ein Film mit Nahaufnahmen, steht die Schrift erst, sobald links Platz ist. */
.banner-film { display: block; width: 100%; aspect-ratio: 1280 / 548; background: var(--paper); }
.banner-media, .banner-poster, .banner-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner-poster, .banner-video { display: block; object-fit: contain; pointer-events: none; }
.banner-video { visibility: hidden; }
.banner-film.is-playing .banner-video { visibility: visible; }
.banner-film.no-text .banner-text { visibility: hidden; }
/* Die Schrift schiebt sich Zeile für Zeile aus ihrer Kante hoch: eine Bewegung, kein Einblenden. */
.banner-title, .banner-clip { display: block; overflow: hidden; }
.banner-title { padding-bottom: 6px; margin-bottom: -6px; }
.banner-title > span { display: block; }
.banner-clip { border-radius: 999px; }
.banner-film.text-in .banner-title > span { animation: banner-rise 480ms var(--ease) both; }
.banner-film.text-in .banner-go { animation: banner-rise 480ms var(--ease) 90ms both; }
@keyframes banner-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
.banner-text { position: relative; z-index: 2; display: grid; gap: 16px; justify-items: start; }
.banner-film .banner-text { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); max-width: 44%; }
/* Hinter der Schrift ein weiches helles Feld: Der Titel bleibt auch vor Pflanzen und Bänken gut lesbar. Es erscheint und
   verschwindet mit der Schrift (ohne Überblendung). */
.banner-film .banner-text::before { content: ''; position: absolute; z-index: -1; left: -150px; right: -120px; top: -90px; bottom: -90px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62) 55%, rgba(255, 255, 255, 0)); pointer-events: none; }
.banner-title { font-family: var(--font-head); font-weight: 900; font-size: 60px; line-height: 0.98; letter-spacing: -0.01em; overflow-wrap: break-word; }
.banner-go { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 23px; white-space: nowrap; }
.banner-go .ic { width: 22px; height: 22px; stroke-width: 3; vertical-align: 0; }
/* Banner ohne Film: ruhiger Grund, rechts die Produktbilder, vollständig und unbewegt. */
.banner-creme, .banner-gelb, .banner-gruen, .banner-oliv { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); align-items: center; height: 326px; padding-left: 34px; }
.banner-creme { background: var(--paper); }
.banner-gelb { background: var(--sun); }
.banner-gruen { background: var(--leaf); }
.banner-oliv { background: var(--olive); color: var(--white); }
.banner-oliv .banner-go { background: var(--white); color: var(--ink); }
.banner-art { align-self: stretch; min-width: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; padding: 20px 22px 16px 0; }
.banner-pic { min-width: 0; max-height: 286px; max-width: 100%; object-fit: contain; }
.banner-n2 .banner-pic { max-width: 46%; }
.banner-n3 .banner-pic { max-width: 31%; }

/* ---------- Bilder: jede Bildart hat überall dieselbe Fläche, nie beschnitten ---------- */

.pic { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.pic-empty { background: var(--white); }
/* Abwahl ohne eigenes Bild: Verbotszeichen wie auf den "ohne …"-Bildern. */
.pic-none { display: grid; place-items: center; color: #c9271e; }
.pic-none .ic { width: 62%; height: 62%; stroke-width: 1.7; }
.card-pic, .sheet-pic, .head-pic, .line-pic, .over-pic, .adapt-pic { display: block; aspect-ratio: 3 / 2; background: var(--white); border-radius: 14px; overflow: hidden; }
.tile-pic { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--white); border-radius: 10px; overflow: hidden; }

/* ---------- Start ---------- */

.screen-attract { display: block; background: var(--white); }
.attract-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Start-Loop: sechs Gerichte aus den Originalen, groß, ruhig überblendet. */
.hero { position: absolute; left: 40px; right: 40px; top: 170px; height: 800px; }
/* Negative Startzeit: Das erste Motiv steht sofort voll da, nicht erst nach dem Einblenden. */
.hero-pic { position: absolute; inset: 0; opacity: 0; animation: hero 36s ease-in-out infinite; animation-delay: -2s; }
.hero-n1 { animation-delay: 4s; }
.hero-n2 { animation-delay: 10s; }
.hero-n3 { animation-delay: 16s; }
.hero-n4 { animation-delay: 22s; }
.hero-n5 { animation-delay: 28s; }
@keyframes hero { 0% { opacity: 0; transform: scale(0.97); } 2.5% { opacity: 1; transform: scale(1); } 16.6% { opacity: 1; transform: scale(1.02); } 19% { opacity: 0; transform: scale(1.03); } 100% { opacity: 0; } }
.attract-brand { position: absolute; left: 0; right: 0; top: 1080px; display: grid; place-items: center; }
.attract-logo { width: 460px; height: auto; pointer-events: auto; }
.attract-cta { position: absolute; left: 0; right: 0; top: 1330px; display: grid; place-items: center; }
.attract-cta .btn { min-width: 700px; min-height: 150px; font-size: 48px; border-radius: 40px; }
.attract-cta .btn { animation: breathe 2600ms ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.screen-attract .lang { position: absolute; left: 0; right: 0; top: 1650px; justify-content: center; }
/* Mit dem Lama-Video: Logo oben im Himmel, Aufforderung im weißen unteren Drittel des Videos. */
.has-video .attract-brand { top: 92px; }
.has-video .attract-logo { width: 500px; }
.has-video .attract-cta { top: 1560px; }
.has-video.screen-attract .lang { top: 1756px; }

/* Über den beiden Kacheln kann das Maskottchen sitzen (Einstellung im Backend). Es steht still. */
.body-type { position: relative; gap: 28px; }
.type-mascot { height: 400px; width: auto; flex: none; }

/* Zwei Kacheln nebeneinander mit rundem Symbol, wie am bisherigen Kiosk und bei McDonald's. */
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; width: 100%; margin-bottom: 36px; }
.choice { height: 580px; padding: 40px 24px; border-radius: 40px; background: var(--white); box-shadow: var(--lift); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; text-align: center; transition: transform 90ms ease-out; }
.choice:active { transform: scale(0.98); box-shadow: var(--lift-press); }
/* Gezeichnetes Bild der Bestellart; fehlt es, das Linien-Icon im Kreis. */
.choice-pic { width: 300px; height: 300px; flex: none; display: grid; place-items: center; }
.choice-pic img { width: 100%; height: 100%; object-fit: contain; }
.choice-icon { width: 230px; height: 230px; flex: none; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: 108px; color: var(--ink); }
.choice-icon .ic { stroke-width: 1.6; }
.choice-title { font-family: var(--font-head); font-weight: 900; font-size: 66px; line-height: 1.02; letter-spacing: -0.01em; overflow-wrap: break-word; }

.screen-closed { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; padding: 96px; }
.screen-closed p { font-size: 34px; color: var(--ink-2); max-width: 760px; }
.closed-logo { height: 280px; margin-bottom: 40px; pointer-events: auto; }

/* ---------- Katalog ---------- */

.body-catalog { display: grid; grid-template-columns: 216px minmax(0, 1fr); background: var(--white); }
.rail { position: relative; background: var(--white); border-right: 2px solid var(--line); display: grid; grid-auto-rows: minmax(0, 1fr); padding: 0 0 6px 12px; }
/* Markierung der gewählten Kategorie: ein Feld, das zur angetippten Kategorie gleitet (main.js setzt Lage und Höhe). */
.rail-mark { position: absolute; left: 12px; right: 0; top: 0; height: 0; z-index: 0; border-radius: 22px 0 0 22px; background: var(--sun-soft); pointer-events: none; transition: transform 260ms cubic-bezier(0.645, 0.045, 0.355, 1); will-change: transform; }
.rail-mark::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 6px; border-radius: 6px; background: var(--gold); }
.rail-mark.is-instant { transition: none; }
.rail-mark.is-hidden { display: none; }
.rail-item > * { position: relative; z-index: 1; }
.rail-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; text-align: left; font-size: 20px; font-weight: 500; line-height: 1.15; color: var(--ink-2); }
.rail-item::after { content: ''; position: absolute; left: 14px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.rail-item:last-child::after, .rail-item.is-on::after { display: none; }
.rail-item:active { background: var(--paper-2); }
/* Aktive Kategorie: leicht getönt, mit goldenem Balken. */
.rail-item.is-on { color: var(--ink); font-weight: 700; }
.rail-item:active { transform: scale(0.97); }
.rail-icon { display: grid; place-items: center; font-size: 34px; color: var(--ink-2); }
.rail-home.is-on .rail-icon { color: var(--ink); }
.rail-pic { width: 58px; height: 58px; flex: none; object-fit: contain; transition: transform 240ms cubic-bezier(0.3, 1.35, 0.6, 1); transform-origin: 50% 55%; }
/* Die gewählte Kategorie wird etwas größer: Bild und Name (nur transform, nichts verschiebt sich in der Leiste). */
.rail-item.is-on .rail-pic { transform: scale(1.24); }
/* Der Name bleibt, wo er ist (Jan, 15.11.2026: lange Namen gingen beim Antippen über den Rand). Gewählt: fett, das Bild
   größer, dahinter die Markierung. Ein Wort, das nicht in die Zeile passt, wird mit Trennstrich getrennt. */
@media (prefers-reduced-motion: reduce) { .rail-mark, .rail-pic { transition: none; } }
.rail-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

.shelf { display: flex; flex-direction: column; min-height: 0; padding: 0 12px 0 8px; }
/* Rand innen, damit der Schatten der Karten nicht abgeschnitten wird. */
.shelf .grid, .stepview .grid { padding: 8px 16px 26px; }
.shelf .chips { padding: 8px 16px 0; margin-bottom: 12px; }
.shelf > .scroll { flex: 1; }
.shelf .chips { gap: 10px; flex-wrap: nowrap; }
.shelf .chip { padding: 0 22px; font-size: 23px; white-space: nowrap; }
.scroll { position: relative; min-height: 0; overflow: hidden; }
.scroll > div { will-change: transform; padding-bottom: 24px; }
/* Scrollleiste: sichtbar, sobald der Inhalt nicht ganz passt. Schmal, rund, am rechten Rand; die Bahn
   nur angedeutet. Lage und Länge setzt sot/stage.js (--bar-top, --bar-size). */
.scroll.is-scrollable::before { content: ''; position: absolute; top: 12px; bottom: 12px; right: 4px; width: 8px; border-radius: 8px; background: rgba(26, 26, 26, 0.06); z-index: 2; }
.scroll.is-scrollable::after { content: ''; position: absolute; top: var(--bar-top, 12px); right: 4px; width: 8px; height: var(--bar-size, 84px); border-radius: 8px; background: rgba(26, 26, 26, 0.42); z-index: 3; }
/* Weiche Kanten (Jan, 15.11.2026: "das die produkte kurz weich auslaufen statt direkt gecuttet zu werden"): Geht es
   oben oder unten weiter, läuft der Inhalt dort ins Weiß aus. Kein Übergang beim Tippen, nur die feste Kante.
   Der schmale Streifen der Scrollleiste rechts bleibt scharf (erste Maske, 14 px). */
.scroll.can-up, .scroll.can-down {
  --fade-top: 0px;
  --fade-bottom: 0px;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  mask-image: linear-gradient(#000, #000), linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  -webkit-mask-size: 14px 100%, 100% 100%;
  mask-size: 14px 100%, 100% 100%;
  -webkit-mask-position: right top, left top;
  mask-position: right top, left top;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.scroll.can-up { --fade-top: 56px; }
.scroll.can-down { --fade-bottom: 72px; }

.grid { display: grid; gap: 16px; align-items: stretch; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, var(--card-w)); grid-auto-rows: var(--card-h); justify-content: center; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Weiße Karte mit feinem Rand, überall gleich groß; Name und Preis mittig unter dem Foto. */
.card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 13px; border-radius: 24px; background: var(--white); box-shadow: var(--lift); text-align: center; min-height: 72px; transition: transform 90ms ease-out; }
.card:active:not(:disabled) { transform: scale(0.97); box-shadow: var(--lift-press); }
.card .card-pic { aspect-ratio: 4 / 3; border-radius: 16px; }
.card .labels { justify-content: center; }
.card-name { font-weight: 700; font-size: 23px; line-height: 1.16; overflow-wrap: break-word; margin-top: 2px; }
.card-desc { font-size: 20px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { margin-top: auto; padding-top: 2px; font-weight: 600; font-size: 23px; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 30px; }
.card-deposit { display: block; font-size: 19px; color: var(--ink-3); }
.grid-3 { column-gap: 14px; row-gap: 14px; }
.card.is-out { opacity: 0.45; }
.card.is-out .card-price { font-size: 20px; }
/* Auswahl markiert die ganze Karte samt Bildfläche. Die Bildfläche bleibt weiß. */
.tile.is-on { box-shadow: inset 0 0 0 4px var(--olive); }
.card.is-on { box-shadow: inset 0 0 0 4px var(--olive), var(--lift); }
.card-option .card-price { min-height: 0; }
.card-option .tile-on { align-self: center; }

.labels { display: flex; flex-wrap: wrap; gap: 6px; }
.label { display: inline-flex; align-items: center; gap: 5px; font-size: 19px; font-weight: 600; line-height: 1; padding: 5px 11px 5px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); white-space: nowrap; }
.label .ic { width: 19px; height: 19px; vertical-align: 0; }
.label-plant { padding-left: 11px; }
.label-vegan, .label-vegetarian { color: var(--olive-ink); box-shadow: inset 0 0 0 1.5px var(--olive); }

/* Bestellleiste über dem Fuß: Bilder, Anzahl, Summe und der eine goldene Knopf. */
.cartbar { width: 100%; min-height: 100px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 8px 8px 8px 20px; margin-bottom: 12px; border-radius: 28px; background: var(--sun-soft); text-align: left; }
button.cartbar:active { background: var(--paper-2); }
.cartbar-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.cartbar-label { font-weight: 700; font-size: 25px; }
.cartbar-sum { font-size: 36px; font-weight: 700; margin-right: 6px; }
.cartbar-go { min-height: 84px; padding: 0 30px; }
.cartbar-thumbs { display: flex; }
.cartbar-thumb { width: 64px; height: 64px; border-radius: 50%; background: var(--white); overflow: hidden; margin-left: -18px; box-shadow: 0 0 0 3px var(--sun-soft); }
.cartbar-thumb:first-child { margin-left: 0; }
.cartbar-thumb .pic { background: transparent; }
.cartbar-count { font-size: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; transform-origin: left center; animation: bump 360ms var(--ease) both; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cartbar-sum { font-variant-numeric: tabular-nums; }
.cartbar-arrow { display: grid; place-items: center; width: 56px; font-size: 34px; color: var(--ink-2); }
.cartbar-empty { display: flex; justify-content: center; gap: 12px; color: var(--ink-3); font-size: 25px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); }

/* ---------- Einzelartikel: Blatt von unten ---------- */

.overlay { position: absolute; inset: 0; z-index: 10; }
.overlay-top { z-index: 20; }
.backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.46); }
.sheet { position: absolute; left: 0; right: 0; top: var(--head-h); bottom: 0; background: var(--white); border-radius: 36px 36px 0 0; display: flex; flex-direction: column; }
.sheet-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 32px 40px 18px; align-items: center; }
.sheet-info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sheet-text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Wenige Auswahlkacheln: das Gericht groß, Name und Beschreibung mittig wie am bisherigen Kiosk. */
.sheet-top.is-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; padding-top: 24px; text-align: center; }
.sheet-top.is-hero .sheet-pic { width: 520px; aspect-ratio: 4 / 3; }
.sheet-top.is-hero .sheet-info, .sheet-top.is-hero .sheet-text { width: 100%; align-items: center; }
.sheet-top.is-hero .labels { justify-content: center; }
.sheet-top.is-hero h2 { font-size: 54px; }
.sheet-desc { color: var(--ink-2); font-size: 24px; max-width: 820px; }
/* Preis mittig zwischen zwei Linien; links die Infos, rechts die Menge. */
.sheet-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 40px 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Lange Namen ("Аллергены и пищевая ценность") brechen im Knopf in eine zweite Zeile um, statt in den Preis zu laufen. */
.sheet-bar .btn-pill { justify-self: start; max-width: 100%; white-space: normal; text-align: start; line-height: 1.15; padding-block: 8px; }
/* Arabisch: Der Text steht rechtsbündig, das Zeichen gehört an seinen Anfang (rechts), sonst klafft dazwischen eine Lücke. */
.stage-inner.is-rtl .sheet-bar .btn-pill { flex-direction: row-reverse; padding: 8px 20px 8px 26px; }
.sheet-bar .qty { justify-self: end; }
.sheet-price { font-size: 44px; font-weight: 700; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; }
.sheet-price .muted { display: block; font-size: 21px; font-weight: 400; }
/* Hinweis aufs Menü: olivgrünes Feld mit den beiden Streifen vom Schaufenster (Gold und Creme), links das
   Menü-Symbol, rechts der Aufpreis als goldene Marke wie "Im Menü +…" auf den Menütafeln. */
.menu-offer { position: relative; margin: 0 40px 20px; min-height: 116px; padding: 14px 18px 14px 54px; border-radius: 26px; background: var(--ranch); color: var(--cream); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; text-align: left; overflow: hidden; transition: transform 90ms ease-out; }
.menu-offer::before, .menu-offer::after { content: ''; position: absolute; top: 0; bottom: 0; }
.menu-offer::before { left: 16px; width: 9px; background: var(--gold); }
.menu-offer::after { left: 31px; width: 5px; background: var(--cream); }
.menu-offer:active { transform: scale(0.985); background: var(--ranch-deep); }
.menu-offer-mark { width: 76px; height: 76px; border-radius: 50%; background: var(--cream); color: var(--ranch-deep); display: grid; place-items: center; font-size: 46px; }
.menu-offer-mark .ic { stroke-width: 1.9; vertical-align: 0; }
.menu-offer-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.menu-offer-text strong { font-family: var(--font-head); font-weight: 900; font-size: 34px; line-height: 1.05; letter-spacing: -0.005em; overflow-wrap: break-word; }
.menu-offer-text span { font-size: 22px; line-height: 1.2; color: #e9e4d4; }
.menu-offer-price { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.menu-offer-plus { padding: 7px 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 27px; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; transform-origin: right center; }
.menu-offer-from { font-size: 20px; color: #e9e4d4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-offer-go { font-size: 34px; display: grid; place-items: center; }
/* Alle paar Sekunden: Das Symbol wackelt kurz, die Marke springt einmal auf. Nur Bewegung, kein Verblassen. */
.menu-offer.is-lively .menu-offer-mark { animation: offer-tilt 5200ms var(--ease) 900ms infinite; }
.menu-offer.is-lively .menu-offer-plus { animation: offer-pop 5200ms var(--ease) 1150ms infinite; }
@keyframes offer-tilt { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-13deg); } 91% { transform: rotate(10deg); } 96% { transform: rotate(-4deg); } }
@keyframes offer-pop { 0%, 84%, 100% { transform: scale(1); } 90% { transform: scale(1.15); } 96% { transform: scale(0.98); } }
.sheet-scroll { flex: 1; margin: 0 12px 0 40px; padding-right: 28px; } /* Scrollleiste im Rand, nicht über den Kacheln */
.sheet-groups { display: grid; gap: 28px; }
/* Unten zwei große Knöpfe nebeneinander: dunkel schließen, golden hinzufügen. */
.sheet-foot { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 32px 30px; border-top: 1px solid var(--line); }
.sheet-foot .btn { min-height: 108px; font-size: 31px; border-radius: 26px; }
.sheet-foot .btn-grow { width: 100%; }

/* Gruppentitel mittig, der Hinweis als kleine Marke daneben. */
.group-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.group-hint { font-size: 20px; color: var(--ink-2); padding: 6px 14px; border-radius: 10px; background: var(--paper-2); }
.group-hint.is-required { background: var(--ink); color: var(--white); font-weight: 600; }
.group-hint.is-full { color: var(--ink); font-weight: 700; }
/* Feste Breite und Höhe: jede Kachel und ihre Bildfläche sind überall gleich groß. Reihen stehen mittig. */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tile { width: var(--tile-w); height: var(--tile-h); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 10px; min-height: 72px; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); transition: transform 90ms ease-out; }
.tile:active { transform: scale(0.96); }
.tile-name { font-weight: 600; font-size: 20px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.tile-price { font-size: 20px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile-on { margin-top: auto; font-size: 19px; font-weight: 700; color: var(--olive-ink); min-height: 22px; display: inline-flex; align-items: center; gap: 4px; }
.tile-on .ic { width: 18px; height: 18px; stroke-width: 3; vertical-align: 0; }
.step-dot .ic { width: 20px; height: 20px; stroke-width: 3.2; vertical-align: 0; }
.toast-mark .ic { width: 22px; height: 22px; stroke-width: 3.2; vertical-align: 0; }
.qty-btn .ic { width: 30px; height: 30px; stroke-width: 2.6; }
.key .ic { width: 46px; height: 46px; stroke-width: 2; }
.tile.is-dim { opacity: 0.38; }
/* "Das ist drin": Die Zutat steht mit ihrem Bild da. Abgewählt zeigt sie das durchgestrichene Bild, einen
   gestrichelten Rand und "Raus"; die Kachel selbst bleibt gleich groß und an ihrem Platz. */
.tile-inside .tile-on { color: var(--olive-ink); }
.tile-inside.is-off { box-shadow: none; outline: 3px dashed var(--line-2); outline-offset: -3px; }
.tile-inside.is-off .tile-name { color: var(--ink-2); }
.tile-inside.is-off .tile-on { color: var(--ink-2); }
.pic-in { display: grid; place-items: center; color: var(--olive); }
.pic-in .ic { width: 46%; height: 46%; stroke-width: 2; }

/* ---------- Menü: Schritte links, Auswahl rechts (wie bei McDonald's) ---------- */

.screen-builder .head-text h1 { font-size: 52px; }
/* In der Übersicht steht der Name des Menüs so groß wie eine Kategorie im Katalog. */
.screen-builder.is-over .head-text h1 { font-size: 64px; }
.running { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); margin-left: 6px; }

/* Links die Schritte in der Spalte der Kategorieleiste: Kreis, Name des Schritts, darunter das Gewählte. */
.body-builder { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.body-builder.is-overview { grid-template-columns: minmax(0, 1fr); }
.steps { display: flex; flex-direction: column; gap: 4px; padding: 0 0 0 12px; border-right: 2px solid var(--line); background: var(--white); }
.step { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 104px; padding: 14px 8px 14px 16px; text-align: left; font-size: 22px; font-weight: 500; line-height: 1.15; color: var(--ink-3); border-radius: 22px 0 0 22px; }
.step:disabled { opacity: 1; }
.step:active:not(:disabled) { background: var(--paper-2); }
.step-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px var(--line-2); display: grid; place-items: center; font-size: 19px; font-weight: 700; color: var(--white); }
.step.is-done .step-dot { background: var(--olive); box-shadow: none; }
.step.is-now .step-dot { background: var(--white); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 9px var(--white), inset 0 0 0 20px var(--gold); }
.step.is-now { background: var(--sun-soft); color: var(--ink); font-weight: 700; }
.step.is-now::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 6px; border-radius: 6px; background: var(--gold); }
.step.is-done { color: var(--ink-2); }
.step-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-label { overflow-wrap: break-word; }
/* Der Name des Gewählten steht ganz da, notfalls über mehrere Zeilen. */
.step-pick { font-size: 19px; line-height: 1.15; color: var(--ink-2); font-weight: 400; overflow-wrap: anywhere; }

.stepview { padding: 4px 12px 0 8px; }
.body-builder.is-overview .stepview { padding: 0 28px; }
.body-builder .step-title, .body-builder .chips, .body-builder .adapt-item { margin-left: 16px; margin-right: 16px; }
.body-builder .over-title { margin-left: 0; margin-right: 0; }
.body-builder .sheet-groups { padding: 0 16px; }
.stepview { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.stepview > .scroll { flex: 1; }
.step-title { margin-bottom: 22px; font-size: 50px; }
.adapt-item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 24px; font-size: 28px; }
.adapt-item strong { display: block; margin-bottom: 8px; }

/* Übersicht: oben das zusammengestellte Menü als Szene im Raum. Lage und Größe jedes Produkts rechnet
   core/sot/scene.js (echte Größe je Bestandteil, in Ebenen hintereinander, hinten kleiner); hier nur Farbe, Schatten
   und die kurze Bewegung beim Erscheinen. Die Produkte sind Freisteller der echten Fotos. */
.over { display: grid; gap: 22px; padding: 0 16px 8px; }
.scene { display: block; }
.scene-art { display: block; width: 100%; height: auto; overflow: visible; }
.scene-body, .scene-cast, .scene-smear { transform-box: fill-box; transform-origin: 50% 100%; }
/* Schatten, damit nichts schwebt. Das Licht kommt wie beim gerenderten Tablett von vorn links oben, die Schatten
   fallen nach hinten rechts (Lage und Länge rechnet core/sot/scene.js, views.js legt sie hin):
   - .scene-cast: der Umriss eines Getränks, auf den Boden gelegt; .scene-foot: der dunkle Fleck an seiner Standfläche,
   - .scene-smear: der Umriss eines liegenden Gerichts, über den Boden gezogen (mehrere Lagen, zusammen eine Fläche),
   - Kontaktschatten: direkt unter der unteren Kante jedes Produkts eine schmale dunkle Linie, die der Form des
     Produkts folgt (Jan: "der kontaktschatten zum boden fehlt noch damit es aufliegend aussieht"). Sie ist eng und
     streut kaum (Jan danach: "muss enger sein und weniger strahlen").
   Alle zusammen gehen durch einen Filter (views.js, #scene-shade: schwarz und gleich weich) und bekommen hier einen
   Ton: Jeder Schatten ist so hart und so dunkel wie jeder andere (Jan, 15.11.2026). Sie enden am Rand des Tabletts;
   nur wenn im Backend eingestellt, laufen sie hell auf dem weißen Grund weiter (.scene-off-tray). */
.scene-foot { fill: #000; transform-box: fill-box; transform-origin: 50% 50%; }
.scene-on-tray { opacity: 0.46; }
.scene-off-tray { opacity: 0.16; }
.scene-body-main, .scene-body-side, .scene-body-drink { filter: drop-shadow(0 2px 1.2px rgba(3, 5, 0, 0.85)) drop-shadow(0 3px 2px rgba(3, 5, 0, 0.4)); }
.scene-schlicht .scene-on-tray { opacity: 0.32; }
.scene-schlicht .scene-body { filter: drop-shadow(0 2px 1.2px rgba(40, 36, 28, 0.45)) drop-shadow(0 4px 3px rgba(40, 36, 28, 0.2)); }
/* Ohne Freisteller steht das Foto mit seinem weißen Grund da; dann ohne Schatten. */
.scene .scene-body.scene-photo { filter: none; }
/* Tablett: normalerweise das gerenderte 3D-Modell (Bild). Dies ist nur der Ersatz, falls das Bild fehlt. */
.scene-tray { fill: var(--ranch); }
/* Die Produkte landen nacheinander auf ihrem Platz: nur Bewegung, kein Verblassen. */
.scene.is-lively .scene-body, .scene.is-lively .scene-cast, .scene.is-lively .scene-smear { animation: scene-land 460ms cubic-bezier(0.2, 1.25, 0.35, 1) both; }
/* Der Fleck an der Standfläche wächst, während das Getränk landet. */
.scene.is-lively .scene-foot { animation: scene-foot 460ms cubic-bezier(0.2, 1.25, 0.35, 1) both; }
@keyframes scene-foot { from { transform: scale(0.4); } to { transform: scale(1); } }
.scene.is-lively .scene-n1 { animation-delay: 90ms; }
.scene.is-lively .scene-n2 { animation-delay: 180ms; }
.scene.is-lively .scene-n3 { animation-delay: 270ms; }
.scene.is-lively .scene-n4 { animation-delay: 360ms; }
.scene.is-lively .scene-n5 { animation-delay: 450ms; }
@keyframes scene-land { from { transform: translateY(-58px) scale(0.9); } to { transform: translateY(0) scale(1); } }
.over-title { margin: 0; }
/* Darunter jeder Bestandteil: Name und kleines Bild, darunter der Knopf zum Ändern. */
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; align-items: stretch; }
.part { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 14px 18px; border-radius: 24px; background: var(--white); box-shadow: var(--lift); }
.part-head { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; align-items: start; }
.part-pic { display: block; aspect-ratio: 4 / 3; }
.part-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.part-label { font-size: 19px; color: var(--ink-2); }
.part-text strong { font-size: 23px; line-height: 1.15; overflow-wrap: break-word; }
.part-changes { font-size: 19px; line-height: 1.25; color: var(--ink-2); }
.part-extra { font-size: 20px; font-variant-numeric: tabular-nums; }
.part .btn { width: 100%; }
.over-qty { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 20px; font-size: 26px; font-weight: 600; }

/* ---------- Warenkorb ---------- */

.body-cart { display: flex; flex-direction: column; padding: 8px 40px 0; }
/* Die Scrollleiste steht im Rand neben den Zeilen, nicht über Preisen und "Entfernen" (Jan, 15.11.2026). */
.body-cart > .scroll { flex: 1; margin-right: -28px; padding-right: 28px; }
/* Wischen (Jan, 15.11.2026, korrigiert: "nach links ist entfernen und nach rechts hinzufügen"): Die Zeile folgt dem
   Finger; dahinter steht rechts "Entfernen" (nach links wischen) bzw. links "+1" (nach rechts wischen). Ab 150 px wird das Zeichen größer: Loslassen führt es aus. */
.line-wrap { position: relative; overflow: hidden; }
.line-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; visibility: hidden; font-size: 26px; font-weight: 700; }
.line-back > span { display: flex; align-items: center; gap: 10px; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.line-back .ic { width: 36px; height: 36px; }
.line-wrap.is-swiping .line-back { visibility: visible; }
.line-wrap[data-dir="left"] .line-back { background: #f6e0dc; color: #a3271d; }
.line-wrap[data-dir="left"] .line-back-add, .line-wrap[data-dir="right"] .line-back-del { visibility: hidden; }
.line-wrap[data-dir="right"] .line-back { background: #e8ebd9; color: var(--olive-ink); }
.line-wrap.is-armed[data-dir="left"] .line-back-del, .line-wrap.is-armed[data-dir="right"] .line-back-add { transform: scale(1.18); }
.line { position: relative; background: var(--white); touch-action: pan-y; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.line-pic { align-self: start; }
.line-top { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.line-name { font-size: 27px; line-height: 1.15; }
.line-price { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-short, .line-changes, .line-deposit { font-size: 22px; color: var(--ink-2); margin-top: 6px; }
/* "Details anzeigen": die Bestandteile des Menüs mit Bild, darunter der Knopf zum Anpassen. */
.line-detail { grid-column: 1 / -1; display: grid; gap: 18px; padding: 20px 20px 18px; border-radius: 26px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); }
.detail-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.detail-part { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.detail-pic { display: block; width: 100%; max-width: 250px; aspect-ratio: 4 / 3; margin-bottom: 6px; }
.detail-label { font-size: 19px; color: var(--ink-2); }
.detail-name { font-size: 23px; line-height: 1.15; overflow-wrap: break-word; }
.detail-part .line-changes { margin: 2px 0 0; font-size: 20px; }
.line-detail > .btn { justify-self: start; }
.line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; margin-top: 14px; }
.line-actions .qty { margin-left: auto; }
.line-actions .btn-s { padding: 0 16px; gap: 8px; }
.line-actions .btn-text { padding: 0 10px; font-size: 23px; }
.empty { padding: 120px 0; text-align: center; color: var(--ink-2); font-size: 30px; }
.undo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 26px; margin: 10px 0 0; border-radius: 22px; background: var(--paper); font-size: 24px; }
.totals { padding: 18px 0 22px; }
.total-row { display: flex; justify-content: space-between; font-size: 24px; color: var(--ink-2); padding: 4px 0; font-variant-numeric: tabular-nums; }
.total-sum { font-size: 38px; font-weight: 700; color: var(--ink); padding-top: 10px; }
.total-sum small { font-size: 21px; font-weight: 400; color: var(--ink-2); margin-left: 8px; }

/* ---------- Noch was dazu? ---------- */

/* Vorschläge: dieselben Kacheln wie im Katalog, mittig; "Nein, danke" als eigener Knopf darunter. */
.upsell-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 840px; }
.upsell-grid .card { width: var(--card-w); height: var(--card-h); }
.upsell-no { min-width: 420px; }
/* Vorschläge in Gruppen: kurze Überschrift, darunter eine Reihe kleinerer Kacheln. Kleine Gruppen stehen nebeneinander
   (Getränk neben den Snacks), damit alles ohne Scrollen auf einen Blick passt; die Reihenfolge legt views.js fest. */
.offer-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 40px; width: 100%; max-width: 1010px; }
/* Überschrift unten bündig, damit die Kacheln nebeneinanderstehender Gruppen auf einer Höhe beginnen. Eine lange
   Überschrift macht die Gruppe nicht breiter, sie bricht um. */
.offer-group { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 12px; justify-items: center; }
.offer-group-title { inline-size: 0; min-inline-size: 100%; text-wrap: balance; font-family: var(--font-text); font-size: 30px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; line-height: 1.2; text-align: center; }
.offer-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.offer-row .card { position: relative; width: 228px; height: 300px; }
/* Gewählt: Häkchen springt auf, dann fährt die Kachel klein zusammen hinaus (nur Bewegung, keine Überblendung). Die
   übrigen rücken danach nach (main.js). */
.card.is-leaving { pointer-events: none; animation: offer-leave 520ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes offer-leave { 0% { transform: scale(1); } 30% { transform: scale(1.04); } 55% { transform: scale(1.04); } 100% { transform: scale(0.001); } }
.card-added { position: absolute; top: 10px; left: 12px; right: 12px; aspect-ratio: 4 / 3; display: grid; place-items: center; pointer-events: none; z-index: 3; /* vor den Bildern der Getränke-Kachel */ }
.card-added .ic { width: 104px; height: 104px; padding: 22px; border-radius: 50%; background: var(--olive); color: var(--white); stroke-width: 3; animation: added-pop 240ms cubic-bezier(0.3, 1.35, 0.6, 1) both; }
/* Geht die ganze Reihe (Getränk), fährt die Gruppe mit ihrer Überschrift hinaus; die Kachel darin zeigt nur das Häkchen. */
.offer-group.is-leaving { pointer-events: none; animation: offer-leave 520ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.offer-group.is-leaving .card.is-leaving { animation: none; }
@media (prefers-reduced-motion: reduce) { .card.is-leaving, .card-added .ic, .offer-group.is-leaving { animation: none; } }
/* Bild aus mehreren Artikeln: echte Höhen zueinander (fan-h50 … fan-h100 = Anteil am größten). */
.card-fan .fan-h50 { height: 45%; } .card-fan .fan-h55 { height: 49.5%; } .card-fan .fan-h60 { height: 54%; } .card-fan .fan-h65 { height: 58.5%; } .card-fan .fan-h70 { height: 63%; } .card-fan .fan-h75 { height: 67.5%; } .card-fan .fan-h80 { height: 72%; } .card-fan .fan-h85 { height: 76.5%; } .card-fan .fan-h90 { height: 81%; } .card-fan .fan-h95 { height: 85.5%; } .card-fan .fan-h100 { height: 90%; }
.offer-row .card .card-name { font-size: 21px; }
.offer-row .card .card-price { font-size: 21px; }
/* Empfehlung: Die Überschrift steht mittig direkt über den Produkten, nicht oben im Kopf. */
.offer-title { font-size: 64px; text-align: center; max-width: 900px; }
.offer-head { display: grid; gap: 8px; justify-items: center; }
/* Schnelle Auswahl in der Empfehlung: dieselben Kacheln wie im Artikel-Blatt, fünf je Zeile. */
.quick-tiles { width: 100%; max-width: 1000px; }
.offer-sub { font-size: 30px; color: var(--ink-2); text-align: center; }
.head-text h1:empty { display: none; }
/* Vorschlag mit mehreren Sorten: eine Kachel, darunter der Hinweis, dass man wählt. */
.card-hint { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; font-weight: 600; color: var(--olive-ink); line-height: 1.2; }
.card-hint svg { width: 20px; height: 20px; }
.card-fan { position: relative; }
.card-fan img { position: absolute; left: 50%; bottom: 6%; height: 80%; width: auto; max-width: none; }
/* Mitte vorn der erste, links und rechts dahinter die anderen, leicht verdeckt. Abstand nach der Breite des Bildes,
   nicht des Artikels, damit eine schmale Flasche nicht hinter dem Becher verschwindet. */
.card-fan .fan-0 { transform: translateX(-50%); z-index: 2; }
.card-fan .fan-1 { left: 28%; transform: translateX(-50%); }
.card-fan .fan-2 { left: 72%; transform: translateX(-50%); }
.card-no { display: grid; place-items: center; }
.card-no-text { font-size: 34px; font-weight: 600; }

/* ---------- Pager ---------- */

/* Pager-Seite: Bild des Pagers mit seiner Nummer am Schild (die getippten Ziffern erscheinen dort). */
.screen-pager .body-center { gap: 22px; }
.pager-pic { position: relative; width: 310px; height: 310px; }
.pager-pic img { width: 100%; height: 100%; object-fit: contain; }
.pager-tag { position: absolute; left: 252px; top: 6px; display: flex; align-items: baseline; gap: 10px; padding: 6px 24px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 26px; font-weight: 600; white-space: nowrap; }
.pager-tag b { font-family: var(--font-head); font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.pager-intro { text-align: center; max-width: 880px; }
.pager-intro h2 { font-size: 50px; }
.pager-intro p { color: var(--ink-2); font-size: 28px; margin-top: 12px; }

/* Die Nummer in einem Feld: Es gibt ein-, zwei- und dreistellige Pager. */
.pager-number { min-width: 420px; height: 160px; padding: 0 44px; border-radius: 24px; box-shadow: inset 0 0 0 3px var(--line-2); display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 112px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pager-number.is-error { box-shadow: inset 0 0 0 4px var(--error); }
.pager-display { display: flex; gap: 18px; }
.pager-digit { width: 128px; height: 160px; border-radius: 24px; box-shadow: inset 0 0 0 3px var(--line-2); display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 104px; font-variant-numeric: tabular-nums; }
.pager-display.is-error .pager-digit { box-shadow: inset 0 0 0 4px var(--error); }
/* Feste Höhe: Die Meldung verschiebt nichts. */
.pager-error { height: 72px; width: 100%; text-align: center; color: var(--error); font-size: 25px; font-weight: 600; }
.keypad { display: grid; grid-template-columns: repeat(3, 190px); gap: 16px; }
.key { height: 132px; border-radius: 28px; background: var(--paper-2); font-size: 54px; font-weight: 600; font-variant-numeric: tabular-nums; }
.key:active { background: var(--line-2); }
.key-del { background: var(--white); box-shadow: inset 0 0 0 2px var(--line-2); font-size: 44px; }
.keypad-s { grid-template-columns: repeat(3, 150px); margin: 24px auto 0; justify-content: center; }
.keypad-s .key { height: 96px; font-size: 40px; }

/* ---------- Zahlung ---------- */

.pay-amount { font-family: var(--font-head); font-weight: 900; font-size: 150px; line-height: 1; font-variant-numeric: tabular-nums; }
.pay-state { text-align: center; min-height: 190px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pay-state p { font-size: 30px; color: var(--ink-2); max-width: 820px; }
.pay-actions { display: flex; gap: 16px; min-height: 92px; }
.pay-actions .btn { min-width: 300px; }
/* Wofür man zahlt, direkt unter dem Betrag. */
.pay-summary { margin-top: -22px; font-size: 30px; font-weight: 600; color: var(--ink-2); }
/* Fortschritt über die letzten Seiten, als eigene Zeile im Kopf: der laufende Schritt mit olivem Ring (Auswahl),
   erledigte mit Haken. Der Kopf wird dafür um diese Zeile höher. */
.screen:has(> .head > .progress) { grid-template-rows: auto minmax(0, 1fr) auto; }
.head:has(> .progress) { grid-template-rows: var(--head-h) auto; }
/* Die kurze Meldung ("Hinzugefügt") rückt unter die Leiste, statt sie zu verdecken. */
.screen:has(> .head > .progress) ~ .toast { top: calc(var(--head-h) + 96px); }
.progress { grid-column: 1 / -1; list-style: none; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 30px 22px; font-size: 26px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.progress li { display: flex; align-items: center; gap: 10px; }
.progress li + li::before { content: ''; width: 38px; height: 3px; border-radius: 2px; background: var(--line-2); margin-right: 4px; }
.progress-dot { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--line-2); display: grid; place-items: center; font-size: 24px; font-variant-numeric: tabular-nums; }
.progress .is-on, .progress .is-done { color: var(--ink); }
.progress .is-on .progress-dot { border-color: var(--olive); }
.progress .is-done .progress-dot { border-color: var(--olive); background: var(--olive); color: var(--white); }
/* Karte und Pfeil zeigen dorthin, wo das Terminal sitzt (Einstellung im Backend): unten, rechts oder links. */
.pay-arrow { height: 280px; display: grid; justify-items: center; align-content: center; gap: 26px; }
.pay-card { font-size: 110px; line-height: 0; color: var(--ink); }
.pay-card .ic { stroke-width: 1.4; }
.pay-chev { width: 84px; height: 84px; border-right: 14px solid var(--gold); border-bottom: 14px solid var(--gold); border-radius: 6px; transform: rotate(45deg); animation: point 1500ms ease-in-out infinite; }
.pay-arrow-right, .pay-arrow-left { position: absolute; top: 50%; margin-top: -60px; height: auto; grid-auto-flow: column; align-items: center; gap: 34px; }
.pay-arrow-right { right: 56px; }
.pay-arrow-left { left: 56px; }
.pay-arrow-right .pay-chev { transform: rotate(-45deg); animation-name: point-x; }
.pay-arrow-left .pay-chev { transform: rotate(135deg); animation-name: point-x; order: -1; }
@keyframes point-x { 0%, 100% { translate: -18px 0; opacity: 0.55; } 50% { translate: 18px 0; opacity: 1; } }
@keyframes point { 0%, 100% { translate: 0 -18px; opacity: 0.55; } 50% { translate: 0 18px; opacity: 1; } }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 7px solid var(--line); border-top-color: var(--gold); animation: spin 900ms linear infinite; margin-top: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-declined h2, .pay-timeout h2, .pay-unclear h2, .pay-order_failed h2, .pay-unavailable h2 { color: var(--error); }

/* ---------- Erfolg ---------- */

.screen-success, .screen-closed { background: var(--white); }
.screen-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 84px 60px 64px; gap: 18px; }
.success-logo { height: 230px; margin-bottom: 20px; }
.screen-success h1 { font-size: 96px; }
.success-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; margin-top: 24px; }
.success-numbers > div { background: var(--paper); border-radius: 32px; padding: 30px 20px 36px; display: flex; flex-direction: column; gap: 6px; }
.success-numbers strong { font-family: var(--font-head); font-weight: 900; font-size: 170px; line-height: 1; font-variant-numeric: tabular-nums; }
/* Was jetzt passiert: drei Schritte nebeneinander, jeder mit Bild auf Oliv. */
.success-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; margin-top: 22px; }
.success-steps li { display: grid; justify-items: center; align-content: start; gap: 12px; font-size: 28px; font-weight: 700; line-height: 1.2; }
.step-ic { width: 104px; height: 104px; border-radius: 50%; background: var(--ranch); color: var(--cream); display: grid; place-items: center; font-size: 54px; line-height: 0; }
/* Unterer Teil bis an die Ränder des Bildschirms: Hier kommt der Bon heraus, und aus einer Ecke schaut das Lama. */
.success-out { flex: 1; min-height: 0; position: relative; align-self: stretch; margin: 14px -60px -64px; overflow: hidden; }
/* Das Lama: Anker ist die untere Ecke. Das Bild liegt mit seiner Mitte knapp vor der Ecke und ist um den Winkel
   aus dem Backend zur Bildmitte geneigt, sodass Kopf und Schultern groß ins Bild ragen. Es schiebt sich einmal herein. */
.success-peek { position: absolute; bottom: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
.peek-right { right: 0; --peek-turn: calc(var(--peek-angle, 35deg) * -1); }
.peek-left { left: 0; --peek-turn: var(--peek-angle, 35deg); }
.success-peek img { position: absolute; left: 0; top: 0; height: var(--peek-size, 1250px); width: auto; max-width: none; transform: translate(-50%, -50%) rotate(var(--peek-turn)) translateY(calc(var(--peek-size, 1250px) * -0.12)); animation: peek-in 700ms var(--ease) 250ms both; }
@keyframes peek-in { from { transform: translate(-50%, -50%) rotate(var(--peek-turn)) translateY(calc(var(--peek-size, 1250px) * 0.62)); } }
@media (prefers-reduced-motion: reduce) { .success-peek img { animation: none; } }

/* ---------- Quittung: erscheint aus dem Schlitz und läuft den Bildschirm hinunter zum Drucker ---------- */
/* Mit Bon rückt der Kopf enger zusammen, damit der Bon einen langen Weg nach unten hat. */
.screen-success.has-bon { padding-top: 56px; gap: 14px; }
.has-bon .success-logo { height: 136px; margin-bottom: 0; }
.screen-success.has-bon h1 { font-size: 76px; }
.has-bon .success-numbers { margin-top: 4px; }
.has-bon .success-numbers > div { padding: 12px 20px 16px; gap: 0; }
.has-bon .success-numbers strong { font-size: 128px; }
.has-bon .success-steps { margin-top: 6px; }
.has-bon .success-steps li { font-size: 25px; gap: 8px; }
.has-bon .step-ic { width: 84px; height: 84px; font-size: 44px; }
/* Direkt unter dem Schlitz, wo das Lama nicht hinreicht. Nie breiter als der Bon: Solange der Bon darüberliegt, schaut vom Hinweis nichts hervor. */
.success-receipt { position: absolute; left: 50%; top: 84px; width: 530px; margin-left: -265px; display: grid; justify-items: center; gap: 14px; font-size: 36px; font-weight: 700; line-height: 1.15; }
.success-arrow { width: 40px; height: 40px; border-right: 9px solid var(--gold); border-bottom: 9px solid var(--gold); border-radius: 4px; transform: rotate(45deg); animation: point 1500ms ease-in-out infinite; }
/* Der Schlitz: oliv wie unser Tablett, mit den beiden Streifen. */
.bon-slot { position: absolute; left: 50%; top: 0; width: 612px; height: 32px; margin-left: -306px; border-radius: 16px; z-index: 3; background: linear-gradient(to bottom, var(--ranch) 0 10px, var(--gold) 10px 14px, var(--cream) 14px 17px, var(--ranch-deep) 17px 100%); }
.bon-lane { position: absolute; inset: 14px 0 0; overflow: hidden; z-index: 2; pointer-events: none; }
/* Zwei Bewegungen, beide nur Verschieben: Der Bon fährt als Papier aus dem Schlitz, das untere Ende voran, der
   Inhalt wandert mit (bon-window). Nach einer Pause läuft er unten aus dem Bild (bon-feed). */
.bon-feed { width: 540px; margin: 0 auto; filter: drop-shadow(0 0 1px rgba(40, 36, 28, 0.55)) drop-shadow(0 10px 20px rgba(40, 36, 28, 0.2)); animation: bon-feed var(--bon-feed, 2200ms) cubic-bezier(0.5, 0, 0.85, 0.65) calc(var(--bon-print, 2000ms) + var(--bon-hold, 1800ms)) both; }
.bon-window { animation: bon-window var(--bon-print, 2000ms) linear both;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 24px 12px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 24px 12px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 24px) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 24px 12px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 24px 12px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 24px) no-repeat; }
@keyframes bon-window { from { transform: translateY(-100%); } }
@keyframes bon-feed { to { transform: translateY(1460px); } }
@media (prefers-reduced-motion: reduce) { .bon-lane { display: none; } }
/* Der Bon selbst: nur Schwarz auf Papier, wie ihn ein Thermodrucker druckt. */
.bon { zoom: 0.9; background: #fdfcf9; color: #000; padding: 46px 38px 44px; font-size: 22px; line-height: 1.28; text-align: left; }
.bon p { overflow-wrap: anywhere; }
.bon-logo { display: block; width: 240px; margin: 0 auto 16px; filter: brightness(0); }
.bon-head { text-align: center; font-size: 21px; }
.bon-head.is-first { font-size: 24px; font-weight: 700; }
/* Unsere beiden Streifen, in Schwarz: ein dicker und ein dünner. */
.bon-stripes { height: 14px; margin: 22px 0 20px; border-top: 7px solid #000; border-bottom: 2px solid #000; }
.bon-number { display: grid; justify-items: center; }
.bon-number span { font-size: 22px; font-weight: 700; }
.bon-number strong { font-family: var(--font-head); font-weight: 900; font-size: 172px; line-height: 0.96; font-variant-numeric: tabular-nums; }
.bon-number em { font-style: normal; margin-top: 10px; padding: 4px 26px 7px; border-radius: 999px; background: #000; color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 38px; line-height: 1.1; }
.bon-meta, .bon-item, .bon-total, .bon-pair { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.bon-meta span, .bon-item span, .bon-total span, .bon-pair span { min-width: 0; }
.bon-meta b, .bon-item b, .bon-total b, .bon-pair b { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bon-meta { margin-top: 22px; }
.bon-meta span { font-weight: 700; }
.bon-meta b, .bon-pair b { font-weight: 500; }
.bon-rule { margin: 16px 0 4px; border-top: 2px dashed #000; }
.bon-item { margin-top: 12px; font-size: 25px; font-weight: 700; }
.bon-part { padding-left: 28px; font-size: 21px; }
.bon-total { margin-top: 14px; font-family: var(--font-head); font-weight: 900; font-size: 54px; line-height: 1.05; }
.bon-pair { margin-top: 6px; }
.bon-tax { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 19px; font-variant-numeric: tabular-nums; }
.bon-tax th { padding: 0 0 3px; border-bottom: 2px solid #000; font-weight: 700; text-align: right; }
.bon-tax td { padding: 4px 0 0; text-align: right; }
.bon-tax th:first-child, .bon-tax td:first-child { text-align: left; }
.bon-tse { margin-top: 18px; font-size: 15px; line-height: 1.3; }
.bon-tse div { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; }
.bon-tse dd { overflow-wrap: anywhere; }
.bon-note { margin-top: 20px; text-align: center; font-size: 21px; }
.bon-thanks { text-align: center; font-family: var(--font-head); font-weight: 900; font-size: 36px; line-height: 1.1; }
.bon-foot { margin-top: 6px; text-align: center; }
.bon-sample { margin-top: 24px; padding: 5px 10px 7px; border: 2px dashed #000; border-radius: 10px; text-align: center; font-size: 18px; font-weight: 700; }

/* ---------- Rückfragen ---------- */

.dialog { position: absolute; left: 80px; right: 80px; bottom: 420px; background: var(--white); border-radius: 36px; padding: 52px 48px 44px; }
.dialog p { font-size: 28px; color: var(--ink-2); margin-top: 14px; }
.dialog-item { font-weight: 700; color: var(--ink) !important; }
.dialog-actions { display: flex; gap: 14px; margin-top: 36px; }
.info-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 22px; }
.info-none { font-size: 32px !important; font-weight: 700; color: var(--ink) !important; margin-top: 28px !important; }
.info-list { margin: 24px 0 0 28px; font-size: 26px; display: grid; gap: 6px; }
.dialog-wide { left: 40px; right: 40px; bottom: 260px; }
.dialog-service .pager-display { justify-content: center; margin-top: 28px; }
.dialog-service .pager-digit { width: 84px; height: 100px; font-size: 54px; }
.service-scroll { height: 900px; margin-top: 20px; }
.service-body { display: grid; gap: 14px; }
.service-body p { margin: 0; font-size: 22px; }
.service-row { display: flex; flex-wrap: wrap; gap: 12px; }
.service-list { list-style: none; display: grid; gap: 10px; font-size: 20px; color: var(--ink-2); }

/* ---------- Bestätigung nach dem Hinzufügen ---------- */

/* Ganzer Screen in Weiß wie bei McDonald's: Tablett oder Tüte, ein Haken springt auf, darunter die neue Summe.
   Der Screen selbst steht sofort da und ist sofort wieder weg; bewegt wird nur das Bild mit dem Haken. */
.added { position: absolute; inset: 0; z-index: 15; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 90px 180px; text-align: center; }
.added-art { position: relative; width: 320px; height: 320px; margin-bottom: 34px; animation: added-pop 420ms var(--ease) both; }
.added-art img { width: 100%; height: 100%; object-fit: contain; }
.added-icon { width: 100%; height: 100%; display: grid; place-items: center; font-size: 190px; }
.added-check { position: absolute; right: -4px; top: -4px; width: 96px; height: 96px; border-radius: 50%; background: var(--leaf); color: var(--white); display: grid; place-items: center; font-size: 54px; animation: added-check 520ms var(--ease) 860ms both; }
/* Das bestellte Produkt erscheint über dem Bild, fliegt hinein (aufs Tablett bzw. in die Öffnung der Tüte) und wird
   dabei klein; das Bild federt kurz, dann springt der Haken auf. Nur Bewegung, keine Überblendung. */
.added-art .added-fly { position: absolute; left: 50%; top: -270px; width: 250px; height: 250px; margin-left: -125px; object-fit: contain; z-index: 2; pointer-events: none; animation: added-fly 860ms cubic-bezier(0.55, 0, 0.45, 1) both; }
@keyframes added-fly { 0% { transform: scale(0.86); visibility: visible; } 22% { transform: scale(1); } 46% { transform: translateY(0) scale(1); } 99% { transform: translateY(330px) scale(0.16); visibility: visible; } 100% { transform: translateY(330px) scale(0.16); visibility: hidden; } }
.added-art.is-bag .added-fly { animation-name: added-fly-bag; }
@keyframes added-fly-bag { 0% { transform: scale(0.86); visibility: visible; } 22% { transform: scale(1); } 46% { transform: translateY(0) scale(1); } 99% { transform: translateY(250px) scale(0.12); visibility: visible; } 100% { transform: translateY(250px) scale(0.12); visibility: hidden; } }
.added-art > img:not(.added-fly), .added-art > .added-icon { animation: added-take 320ms cubic-bezier(0.23, 1, 0.32, 1) 820ms both; transform-origin: 50% 80%; }
@keyframes added-take { 0% { transform: none; } 45% { transform: scale(1.07, 0.95); } 100% { transform: none; } }
.added-check .ic { stroke-width: 3.2; vertical-align: 0; }
.added-check::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 6px solid var(--sun); animation: added-ring 720ms ease-out 260ms both; }
@keyframes added-pop { from { transform: scale(0.84); } to { transform: scale(1); } }
@keyframes added-check { from { transform: scale(0); } 60% { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes added-ring { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.added h2 { font-size: 64px; max-width: 840px; }
.added-item { font-size: 30px; font-weight: 600; max-width: 840px; overflow-wrap: break-word; }
.added-sub { font-size: 26px; color: var(--ink-2); margin-top: 34px; }
.added-sum { font-family: var(--font-head); font-weight: 900; font-size: 92px; line-height: 1; font-variant-numeric: tabular-nums; }

/* Direkt unter der Kopfleiste: verdeckt weder Titel noch Sprachwahl und ist nach 1,5 s wieder weg. */
/* Auf Augenhöhe, etwa in der Mitte des Bildschirms (Jan, 15.11.2026), nicht oben unter dem Kopf. */
.toast { position: absolute; left: 50%; top: 900px; transform: translateX(-50%); z-index: 30; box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18); display: flex; align-items: center; gap: 12px; padding: 12px 30px 12px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 26px; pointer-events: none; animation: toast 1500ms steps(1, end) both; }
.toast-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--olive); display: grid; place-items: center; font-size: 22px; }
/* Die Meldung steht sofort da und ist nach 1,5 Sekunden sofort weg, ohne Ein- und Ausblenden. */
@keyframes toast { from { visibility: visible; } to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* "Allergene & Nährwerte": Spuren, Hinweis, Nährwerttabelle (je Portion, je 100 g). */
.info-head { font-size: 26px; margin: 18px 0 6px; }
.info-traces, .info-note { font-size: 23px; color: var(--ink-2); margin-top: 10px; }
.info-nut { width: 100%; border-collapse: collapse; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.info-nut th, .info-nut td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.info-nut th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; }
.info-nut thead th { font-size: 19px; color: var(--ink-2); font-weight: 600; }
.info-nut tr.is-sub th[scope="row"] { padding-left: 28px; font-weight: 500; color: var(--ink-2); }
.info-small { font-size: 19px; color: var(--ink-3); margin-top: 8px; }

/* Geräte-Freigabe: nur die Code-Eingabe (sot/main.js, deviceGate). */
.screen-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0 120px; text-align: center; background: var(--white); }
.screen-lock h1 { font-size: 60px; }
.screen-lock p { font-size: 28px; color: var(--ink-2); }
.lock-boxes { display: flex; gap: 14px; }
.lock-box { width: 96px; height: 120px; border-radius: 20px; box-shadow: inset 0 0 0 3px var(--line-2); display: grid; place-items: center; font-family: var(--font-head); font-size: 64px; font-weight: 900; }
.lock-box.is-set { box-shadow: inset 0 0 0 3px var(--olive); }
.lock-error { min-height: 36px; color: #a3271d !important; font-weight: 600; }
.lock-keys { display: grid; grid-template-columns: repeat(3, 180px); gap: 16px; }
.lock-key { height: 120px; border-radius: 24px; background: var(--white); box-shadow: var(--lift); font-size: 48px; font-weight: 700; color: var(--ink); }
.lock-key:active:not(:disabled) { transform: scale(0.97); }
.lock-ok { background: var(--gold); font-size: 30px; }
.lock-ok:disabled { background: var(--paper-2); color: var(--ink-3); }

/* Bei reduzierter Bewegung: die Meldung steht 1,5 s da (sonst wäre sie nach 1 ms weg). */
@media (prefers-reduced-motion: reduce) { .toast { animation: toast 1500ms steps(1, end) both !important; } }