/**
 * ios.css — Design-System für Food-Finder
 *
 * Eine Quelle für Farben, Abstände, Schriftgrössen und die
 * wiederkehrenden Bausteine (Knopf, Karte, Chip, Eingabefeld).
 *
 * Regeln, an die sich jede Seite hält:
 *
 *   Radien      genau drei: --r-s, --r-m, --r-pill. Keine Zwischenwerte.
 *   Abstände    Vielfache von 4 aus der Skala --sp1 … --sp7.
 *               Kein "13px hier, 15px da".
 *   Erhebung    Karten liegen flach und werden über eine Linie
 *               abgegrenzt, nicht über einen Schatten. Der einzige
 *               Schatten im System ist die harte Unterkante der Knöpfe.
 *   Farbe       Ein Akzent (Grün), ein Warnton (Rot), sonst Neutraltöne.
 *               Grün heisst immer "hier kannst du etwas tun".
 *   Verläufe    keine.
 *
 * Alle Textfarben sind gegen ihre Hintergründe auf mindestens 4.5:1
 * geprüft, Ränder und Umrisse auf 3:1 — in hell wie dunkel.
 */

:root {
  /* ── Flächen ── */
  --bg:          #101018;
  --surface:     #191922;   /* Karten, Listenzeilen */
  --surface-2:   #22222e;   /* eingelassen: Chips, Felder */
  --surface-3:   #2c2c3a;   /* gedrückt */

  /* ── Linien ──
     --line grenzt ab, --line-strong ist selbst das Bedienelement
     (Feldrand, Zweitknopf) und hält deshalb 3:1. */
  --line:        #2c2c3a;
  --line-strong: #6a6a84;

  /* ── Schrift ── */
  --text:        #f2f2f5;
  --text-2:      #a2a2b2;

  /* ── Akzent ──
     Auf der hellen Fläche steht dunkler Text, nicht weisser: Weiss auf
     Grün käme nur auf 2.5:1. --accent-text ist die Variante für Grün
     als Schriftfarbe, --accent-edge die Unterkante der Knöpfe. */
  --accent:      #2bbd5e;
  --accent-edge: #17743a;
  --accent-soft: #14261b;
  --accent-text: #3ddc78;
  --on-accent:   #08160d;

  --red:         #f26d6d;
  --red-edge:    #a52c2c;
  --red-soft:    rgba(242,109,109,.14);

  /* ── Abstände (Vielfache von 4) ──
     Bewusst --sp* und nicht --s*: karte.html benutzt --s2 seit jeher
     als Flächenton. Gleiche Namen mit anderer Bedeutung sind genau die
     Art Falle, die dieses System abschaffen soll. */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px;

  /* ── Radien ── */
  --r-s: 10px;      /* Chips, Felder, kleine Flächen */
  --r-m: 16px;      /* Karten, Knöpfe, Sheets */
  --r-pill: 999px;

  /* ── Schriftgrössen ── */
  --t-xl: 28px;   /* Seitentitel */
  --t-l:  20px;   /* Abschnittstitel */
  --t-m:  17px;   /* Fliesstext, Listenzeile */
  --t-s:  15px;   /* Zweitzeile */
  --t-xs: 13px;   /* Beschriftung */

  --nav-bg:  rgba(16,16,24,.92);
  --sai-t:   env(safe-area-inset-top, 0px);
  --sai-b:   env(safe-area-inset-bottom, 0px);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --spring: cubic-bezier(.32,.72,0,1);

  /* Altlasten: von Seiten benutzte Namen aus der Zeit vor dem System.
     Sie zeigen auf die neuen Werte, damit nichts hart bricht. */
  --cell: var(--surface); --cell-press: var(--surface-3); --fill: var(--surface-2);
  --sep: var(--line); --label: var(--text); --muted: var(--text-2);
  --label2: var(--text-2); --label3: var(--text-2); --faint: var(--text-2);
  --green: var(--accent-text); --green-d: var(--accent-edge);
  --red-bg: var(--red-soft); --thumb: var(--surface-3);
  --shadow: none; --fill2: var(--surface-2);
  /* karte.html: eigene Namen für Fläche, Rand und Kartenoverlay */
  --s2: var(--surface-2); --border: var(--line); --b2: var(--line);
  --glass-bg: var(--nav-bg); --sheet-shadow: none; --sai: var(--sai-b);
  --t-large: var(--t-xl); --t-title: var(--t-l); --t-body: var(--t-m);
  --t-sub: var(--t-s); --t-foot: var(--t-xs); --t-cap: 11px;
}

html[data-theme="light"] {
  --bg:          #f4f4f6;
  --surface:     #ffffff;
  --surface-2:   #eeeef2;
  --surface-3:   #e2e2e8;

  --line:        #e3e3e9;
  --line-strong: #86868f;

  --text:        #16161d;
  --text-2:      #63636f;

  --accent:      #28c765;
  --accent-edge: #15803d;
  --accent-soft: #e6f7ec;
  --accent-text: #0f7a37;
  --on-accent:   #08160d;

  --red:         #f26d6d;
  --red-edge:    #b91c1c;
  --red-soft:    rgba(220,38,38,.10);

  --nav-bg:      rgba(244,244,246,.92);
}

/* ══════════════════════════════════════════════════════════
   Grundlagen
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--t-m);
  /* kein height:100% — sonst schluckt border-box das padding-bottom
     und feste Leisten decken die letzten Elemente zu */
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a, button, input, select, textarea, label { touch-action: manipulation; }
img { -webkit-user-drag: none; user-drag: none; }
input, textarea, select, [contenteditable] {
  -webkit-user-select: text !important; user-select: text !important;
  -webkit-touch-callout: default !important;
  touch-action: auto !important;
}
/* mindestens 16px, sonst zoomt iOS Safari beim Fokus */
input, textarea, select { font-size: 16px; font-family: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes ffPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════
   Knopf — drei Stufen, und die Stufe sagt, wie laut er ist
   ══════════════════════════════════════════════════════════

   Stufe 1  .btn            Die eine Hauptaktion einer Ansicht.
                            Harte Unterkante, Versalien, gross.
                            Höchstens einmal pro Bildschirm.
   Stufe 2  .btn-inline     Aktionen im Zusammenhang, mehrere
                            nebeneinander (Restaurant, Route, Foto).
                            Flach, normal geschrieben, kleiner —
                            aber gleicher Radius, gleiches Gewicht,
                            damit man die Verwandtschaft sieht.
   Stufe 3  .btn-quiet      Nebenwege. Nur Text, keine Fläche.

   Vorher standen Stufe 1 und Stufe 2 unabgestimmt nebeneinander:
   dieselbe Rolle, aber unterschiedliche Schreibung, Grösse und
   Gewicht — sie sahen nicht aus, als gehörten sie zur selben App.
   Gemeinsam sind jetzt Radius, Gewicht 800 und die Farbrollen;
   verschieden sind nur Grösse, Versalien und die Unterkante. */

.btn, .btn-inline {
  --edge: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp2);
  border: 0; border-radius: var(--r-m);
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-weight: 800;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Stufe 1 ── */
.btn {
  min-height: 52px;
  padding: 0 var(--sp5);
  font-size: var(--t-s);
  letter-spacing: .8px; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .06s linear, box-shadow .06s linear, filter .15s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-2); color: var(--text-2);
  box-shadow: none; transform: none; cursor: default; opacity: .6;
}

/* ── Stufe 2 ──
   Keine Unterkante: vier Knöpfe nebeneinander, jeder mit eigener
   Tiefe, ergäben eine Wellblechwand. */
.btn-inline {
  min-height: 44px;
  padding: 0 var(--sp4);
  font-size: var(--t-s);
  letter-spacing: -.2px;
  transition: transform .13s var(--spring), opacity .12s;
}
.btn-inline:active { transform: scale(.95); opacity: .75; }

/* ── Farbrollen, für beide Stufen gleich ── */
.btn-primary   { background: var(--accent); color: var(--on-accent); --edge: var(--accent-edge); }
.btn-danger    { background: var(--red);    color: var(--on-accent); --edge: var(--red-edge); }
.btn-neutral   { background: var(--surface-2); color: var(--text); }

/* Zweitknopf: der Rand ist hier das Bedienelement, deshalb --line-strong.
   Die Unterkante liegt aussen am Rand, sonst wirkt der Knopf doppelt. */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--line-strong), 0 4px 0 var(--line-strong);
}
.btn-secondary:active { box-shadow: inset 0 0 0 2px var(--line-strong); }

/* ── Stufe 3 ── */
.btn-quiet {
  background: none; color: var(--accent-text);
  box-shadow: none; min-height: 44px; padding: 0 var(--sp3);
  letter-spacing: .4px;
}
.btn-quiet:active { transform: none; box-shadow: none; opacity: .55; }

.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 40px; padding: 0 var(--sp4); font-size: var(--t-xs); box-shadow: 0 3px 0 var(--edge); }
.btn-sm:active { transform: translateY(3px); }

/* ══════════════════════════════════════════════════════════
   Karte, Chip, Feld
   ══════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--sp4);
}

.chip {
  display: inline-flex; align-items: center; gap: var(--sp2);
  min-height: 40px; padding: 0 var(--sp4);
  border: 2px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--t-s); font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip[aria-pressed="true"], .chip.on {
  background: var(--accent-soft);
  border-color: var(--accent-text);
  color: var(--accent-text);
}

/* Eingabefeld. Bewusst .input und nicht .field: Start.html, auth.html
   und foto-upload.html benutzen .field seit jeher als Hülle um Label und
   Eingabe — beide Bedeutungen unter einem Namen hatten das Label in den
   grauen Kasten gezogen.
   Das Feld wird über seine Füllung erkennbar, nicht über einen dunklen
   Rahmen — der Rand markiert nur den Fokus. */
.input {
  width: 100%; min-height: 52px;
  padding: 0 var(--sp4);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--r-s);
  color: var(--text); font-size: 16px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.input::placeholder { color: var(--text-2); }
.input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent-text);
}

/* Abschnittsüberschrift über einer Liste. */
.sec-title {
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-2);
  padding: 0 var(--sp1) var(--sp2);
}

/* Bildplatzhalter. Steht überall dort, wo es zu einem Gericht noch kein
   freigegebenes Foto gibt — statt eines geratenen Stockfotos, das ein
   anderes Gericht zeigt. Die Grösse kommt vom umgebenden Rahmen, das
   Emoji skaliert mit; Seiten mit sehr grossen Flächen (die Wischkarte)
   setzen die Schriftgrösse selbst. */
.img-ph {
  width: 100%; height: 100%;
  background: var(--surface-2);
  display: grid; place-items: center;
}
.img-ph span { font-size: 26px; line-height: 1; opacity: .6; }