/*
 * samoOrder. Design-System (base.css)
 * Welt der Shishabar: Nachtblau, Champagner-Gold, Rauch.
 * Kein Cyber/Neon, kein Cream-Terracotta-Template.
 */


:root {
  /* Farben */
  --bg: #0C1220;
  --flaeche: #131B2E;
  --flaeche-2: #1B2540;
  --linie: #263252;
  --text: #EDF1F9;
  --text-2: #93A0BC;
  --akzent: #D9A83F;
  --akzent-hell: #F0C75E;
  --gut: #6FBF8B;
  --warn: #E4B04A;
  --fehler: #D65A52;

  /* Schrift auf Akzentflächen. Stand bisher an ~20 Stellen als „#0C1220“ hart
     im CSS, als Token wird dieselbe Farbe themefähig. */
  --auf-akzent: #0C1220;
  /* Halbtransparenter Grund für klebende Leisten (Kategorie-Nav, Kopfzeilen). */
  --bg-schleier: rgba(12, 18, 32, 0.92);

  /* Zwei Rollen, die im klassischen Design beide der Akzent erfüllt. Das Theme
     „samolabs“ trennt sie: „ruf“ = ein Tisch wartet, „tat“ = nächster Griff. */
  --ruf: var(--akzent);
  --auf-ruf: var(--auf-akzent);
  --ruf-glanz: 217, 168, 63;
  --tat: var(--akzent);
  --tat-hell: var(--akzent-hell);
  --auf-tat: var(--auf-akzent);
  --radius: 14px;
  --radius-klein: 10px;
  --radius-gross: 20px;

  /* Typografie. Arial, auf ausdrueckliche Vorgabe.
     Arial ist auf jedem Zielgeraet vorhanden: Kein Nachladen, kein Umbruch-
     sprung beim Schriftwechsel, und die Oberflaeche steht auch dann richtig,
     wenn das Theken-Tablet ohne Netz startet. Helvetica faengt macOS/iOS ab,
     Liberation Sans die Linux-Kioske. Beide sind metrisch deckungsgleich,
     der Umbruch bleibt also ueberall derselbe. */
  --font-display: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --font-body: Arial, Helvetica, 'Liberation Sans', sans-serif;

  /* Motion */
  --dauer: 180ms;
  --ease: ease-out;

  /* Abstände */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;

  /* Schatten */
  --schatten-karte: 0 2px 10px rgba(0, 0, 0, 0.28);
  --schatten-sheet: 0 -8px 30px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 0.01ms; }
}

/* ══════════════════════════════════════════════════════════════════════
   Kachel-Toene fuer die Direktverkaufs-Kasse (Kategorie-Raster + Favoriten).
   Zwoelf feste Toene statt freier Farbwahl je Kategorie, damit niemand eine
   Kachel in Bar-Akzentfarbe oder in Fehlerrot anlegen kann. Eigene Variablen,
   NICHT ueber --akzent/--tat: die beiden werden in setzeDesign (js/ui.js)
   zwischen den Themes klassisch/samolabs umgeschaltet, eine Kachelfarbe muss
   aber unabhaengig vom Theme dieselbe Kategorie bleiben.
   Kontrast Kachel-Grund zu --kachel-N-text, nachgerechnet nach WCAG (Ziel
   mindestens 4.5:1, tatsaechlich ueberall mindestens 4.6:1):
     1  6.1:1   2  7.5:1   3  8.6:1   4  9.4:1   5  9.1:1   6  9.3:1
     7  8.9:1   8  7.1:1   9  5.6:1  10  4.9:1  11  5.6:1  12  5.8:1
   Es sind jeweils die vollen Pastelltoene (helle Flaeche, dunkle Schrift aus
   --auf-akzent), weil hier der App-Grund dunkel ist und die Kachel bewusst
   als heller Farbfleck dagegen steht, wie auf dem Referenzfoto. */
:root {
  --kachel-1: #C58277; --kachel-1-text: var(--auf-akzent);
  --kachel-2: #C59C77; --kachel-2-text: var(--auf-akzent);
  --kachel-3: #C5AE77; --kachel-3-text: var(--auf-akzent);
  --kachel-4: #98C577; --kachel-4-text: var(--auf-akzent);
  --kachel-5: #77C59E; --kachel-5-text: var(--auf-akzent);
  --kachel-6: #77C5B5; --kachel-6-text: var(--auf-akzent);
  --kachel-7: #77BEC5; --kachel-7-text: var(--auf-akzent);
  --kachel-8: #77A5C5; --kachel-8-text: var(--auf-akzent);
  --kachel-9: #778BC5; --kachel-9-text: var(--auf-akzent);
  --kachel-10: #8B77C5; --kachel-10-text: var(--auf-akzent);
  --kachel-11: #B177C5; --kachel-11-text: var(--auf-akzent);
  --kachel-12: #C577A5; --kachel-12-text: var(--auf-akzent);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* iOS: kein grauer Tap-Highlight-Kasten auf antippbaren Elementen (global) */
html { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
/* iOS zoomt beim Fokussieren in Felder mit font-size < 16px hinein, 16px ist die Untergrenze */
input, textarea, select { font: inherit; color: inherit; font-size: max(16px, 1em); }

/* [hidden] muss IMMER gewinnen. Sonst überschreiben Klassen mit eigenem
   display (z. B. .banner {display:flex}) das Ausblenden per gleicher Spezifität. */
[hidden] { display: none !important; }

::selection { background: var(--akzent); color: var(--auf-akzent); }

/* Sichtbarer Fokus-Ring überall */
:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

/* Zahlen/Preise: tabellarisch */
.zahl, .preis {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Typografie-Hilfsklassen ──────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.display-bold { font-weight: 700; }
.text-2 { color: var(--text-2); }
.text-akzent { color: var(--akzent-hell); }

/* ── Wortmarke (Logo-Ersatz, siehe marketing/samoorder/visitenkarte-samoorder.html) ──
   „samo“ in Textfarbe + „Order“ in Gold + kleiner Gold-Punkt. Kein Icon. Skaliert
   über font-size des umgebenden Elements (em-basiert), daher überall einsetzbar
   (Kopfzeilen wie auf gedruckten QR-Karten). */
.wm { position: relative; display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; line-height: 1; white-space: nowrap; }
.wm-samo { color: var(--text); font-size: 0.8em; letter-spacing: -0.01em; }
.wm-order { color: var(--akzent-hell); letter-spacing: -0.01em; }
.wm-dot { position: absolute; top: 0.30em; right: -0.20em; width: 0.16em; height: 0.16em; border-radius: 30%; background: var(--akzent-hell); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 44px;
  padding: 0 var(--raum-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dauer) var(--ease), transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), opacity var(--dauer) var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { background: color-mix(in srgb, var(--flaeche-2) 88%, var(--text)); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primär {
  background: var(--tat);
  color: var(--auf-tat);
  border-color: var(--tat);
}
.btn-primär:hover { background: var(--tat-hell); border-color: var(--tat-hell); }

.btn-geist {
  background: transparent;
  border-color: var(--linie);
  color: var(--text);
}
.btn-geist:hover { background: var(--flaeche); }

.btn-klein {
  min-height: 36px;
  padding: 0 var(--raum-3);
  font-size: 14px;
  border-radius: var(--radius-klein);
}

/* ── Karten / Flächen ─────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Banner / Hinweise ────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--flaeche-2);
  color: var(--text);
  font-size: 14px;
}
.banner-warn { border-color: rgb(124, 107, 78); border-color: color-mix(in srgb, var(--warn) 45%, var(--linie)); }
.banner-warn svg { color: var(--warn); flex-shrink: 0; }
.banner-fehler { border-color: rgb(117, 68, 82); border-color: color-mix(in srgb, var(--fehler) 45%, var(--linie)); }
.banner-fehler svg { color: var(--fehler); flex-shrink: 0; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast-stapel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--raum-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  animation: toast-ein var(--dauer) var(--ease);
}
.toast-fehler { border-color: rgb(135, 72, 82); border-color: color-mix(in srgb, var(--fehler) 55%, var(--linie)); }
.toast button {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent-hell);
  cursor: pointer;
  min-height: 32px;
}
@keyframes toast-ein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.toast { animation: none; }
}

/* ── Footer (überall) ─────────────────────────────────────────────────── */
.marken-footer {
  padding: var(--raum-6) var(--raum-4);
  text-align: center;
  color: var(--text-2);
  font-size: 12.5px;
}
.marken-footer a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.marken-footer a:hover { color: var(--text); }

/* ── Scrollbar (dezent, dunkel) ───────────────────────────────────────── */
* { scrollbar-color: var(--linie) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════
   Theme „samolabs“. Die Farbwelt der Dachmarke.
   Wird pro Betrieb unter Einstellungen gewählt (bars.design) und von den
   Seiten als data-theme am <html> gesetzt. Ohne das Attribut bleibt alles
   exakt beim klassischen Nachtblau/Gold. Hier wird nichts ersetzt.

   Zwei Farben, zwei Aufgaben, keine dritte:
     --ruf  (Gelb)   ein Tisch wartet auf dich. Nur dort, nie als Schmuck.
     --tat  (Indigo) der nächste Griff: Bestellknopf, Kassieren, Speichern.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="samolabs"] {
  --bg: #121316;
  --flaeche: #1B1C1E;
  --flaeche-2: #26282C;
  --linie: #33363B;
  --text: #F2F3F5;
  --text-2: #A3A9B2;

  --akzent: #818CF8;
  --akzent-hell: #9AA3FA;
  --auf-akzent: #141519;
  --bg-schleier: rgba(18, 19, 22, 0.92);

  --gut: #46BEAA;
  --warn: #FFD24A;
  --fehler: #F2555A;

  --ruf: #FFEB78;
  --auf-ruf: #1B1C1E;
  --ruf-glanz: 255, 232, 120;
  --tat: #818CF8;
  --tat-hell: #9AA3FA;
  --auf-tat: #141519;

  --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.35);
  --schatten-sheet: 0 -8px 30px rgba(0, 0, 0, 0.55);
}

:root[data-theme="samolabs"] .wm { font-weight: 800; }
:root[data-theme="samolabs"] .wm-samo { font-size: 0.86em; }
:root[data-theme="samolabs"] .wm-order { font-weight: 300; color: var(--tat); }
:root[data-theme="samolabs"] .wm-dot { background: var(--tat); }

/* Kachel-Toene, gedaempfte Fassung derselben zwoelf Farbfamilien fuer das
   Theme samolabs (niedrigere Sattheit/Helligkeit als im klassischen Theme,
   passend zur nuechternen Indigo-Welt statt der warmen Nachtblau/Gold-Welt).
   Kontrast wieder gegen die eigenen Theme-Tokens nachgerechnet (mind. 4.6:1):
     1  4.6:1(hell)  2  5.0:1  3  5.8:1  4  6.4:1  5  6.3:1  6  6.4:1
     7  6.0:1  8  4.7:1  9  4.7:1(hell)  10  5.2:1(hell)  11  4.7:1(hell)
     12  4.8:1(hell). "Hell" heisst Schrift aus --text statt --auf-akzent,
   weil die dunkleren Toene 9-12 mit dunkler Schrift keine 4.5:1 mehr
   schaffen. */
:root[data-theme="samolabs"] {
  --kachel-1: #9C5D54; --kachel-1-text: var(--text);
  --kachel-2: #A67D59; --kachel-2-text: var(--auf-akzent);
  --kachel-3: #A68F59; --kachel-3-text: var(--auf-akzent);
  --kachel-4: #79A659; --kachel-4-text: var(--auf-akzent);
  --kachel-5: #59A680; --kachel-5-text: var(--auf-akzent);
  --kachel-6: #59A696; --kachel-6-text: var(--auf-akzent);
  --kachel-7: #599FA6; --kachel-7-text: var(--auf-akzent);
  --kachel-8: #5986A6; --kachel-8-text: var(--auf-akzent);
  --kachel-9: #576AA2; --kachel-9-text: var(--text);
  --kachel-10: #6C59A6; --kachel-10-text: var(--text);
  --kachel-11: #9057A2; --kachel-11-text: var(--text);
  --kachel-12: #9C547E; --kachel-12-text: var(--text);
}

/* ── Im Haus oder außer Haus ────────────────────────────────────────────────
   Zwei Flächen nebeneinander statt eines Hakens: am Tresen wird im Stehen
   getippt, und was gerade gilt, muss man sehen können, ohne hinzusehen. */
.bestellen-wohin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.bestellen-wohin-btn {
  appearance: none; font: inherit; font-size: 15px; font-weight: 600;
  min-height: 52px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--linie, #D9DCE0); background: transparent;
  color: var(--text, #1B1C1E); cursor: pointer;
}
.bestellen-wohin-btn.ist-gewaehlt {
  border-color: var(--akzent, #4338CA); color: var(--akzent, #4338CA);
  box-shadow: inset 0 0 0 1px var(--akzent, #4338CA);
}