/* Platzlicht (früher Arbeitstitel Mochi) – Design-Tokens (gemeinsam für App und Gäste-Buchung) */
/* Libre Caslon Text, selbst gehostet (keine Verbindung zu Google). Lizenz: SIL OFL 1.1, siehe shared/fonts/OFL.txt */
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/libre-caslon-text-400-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/libre-caslon-text-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/libre-caslon-text-400-italic-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/libre-caslon-text-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/libre-caslon-text-700-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/libre-caslon-text-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Figtree (Variable 300–900), selbst gehostet. Ähnlich zu Onepage „Circular“. Lizenz: SIL OFL 1.1, siehe shared/fonts/OFL-figtree.txt */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/figtree-latin-ext-wght.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/figtree-latin-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* Neutrale Flächen */
  /* Stil nach onepage.io (Min-Vorgabe 14.10.2026): reines Weiß, hellgraue Flächen, kaum Schatten; Farbe bleibt Platzlicht-Braun */
  --bg: #FFFFFF;            /* App-Grund */
  --bg-sunken: #F4F3F3;     /* Seitenleiste, Werkzeugleisten, Umschalter */
  --surface: #FFFFFF;       /* Karten, Panels */
  --surface-hover: #F7F7F7;
  --line: #EAE9E9;
  --line-strong: #D6D5D5;

  /* Text */
  --ink: #1D1D1B;
  --ink-2: #63636A;         /* sekundär, 6.0:1 auf Weiß, 5.4:1 auf --bg-sunken */
  --ink-3: #6A6A71;         /* Platzhalter, 5.3:1 auf Weiß */
  --ink-inverse: #FFFFFF;

  /* Marke: Platzlicht-Braun (Hojicha), seit 14.10.2026 im Onepage-Stil */
  --brand: #9B6B43;         /* nur Logo/Deko, nicht für Text */
  --brand-strong: #6F4628;  /* Text, Links, Auswahl (8.4:1 auf Weiß, 7.6:1 auf --bg-sunken) */
  --brand-tint: #F5EDE5;
  --brand-tint-2: #E8D6C5;

  /* Primäraktion: Tinten-Schwarz, flach wie bei Onepage (Weiß darauf 17:1). Braun nur als Akzent (Min-Vorgabe 14.10.2026) */
  --primary: #1D1D1B;
  --primary-hover: #3A3A37;
  --primary-ink: #FFFFFF;

  /* Tisch-Status */
  --st-free: #1B7432;       --st-free-bg: #EAF8EE;       /* frei */
  --st-reserved: #6F4628;   --st-reserved-bg: #F5EDE5;   /* reserviert (Markenfarbe) */
  --st-seated: #3634A3;     --st-seated-bg: #EEEEFB;     /* Gast sitzt */
  --st-soon: #C93400;       --st-soon-bg: #FFF1E0;       /* bald frei */
  --st-blocked: #55555C;    --st-blocked-bg: #EAE9E9;    /* gesperrt / nicht online */

  /* Feedback */
  --danger: #D70015;  --danger-bg: #FDECEA;
  --success: #1B7432; --success-bg: #EAF8EE;

  /* Typo: Systemschrift (Apple SF auf Mac/iOS) */
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Libre Caslon Text", "Baskerville", Georgia, "Times New Roman", serif; /* nur noch für die Schriftwahl „Klassisch“ der Restaurants (Buchungsseite, Widget, Aufsteller); Platzlicht selbst nutzt seit 14.10.2026 Figtree */
  --font-display-weight: 700;
  --font-display-tracking: -0.025em;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 */
  --fs-lg: 1.0625rem; /* 17 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */

  /* Abstände (4er-Raster) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Radien */
  --r-sm: 6px; --r-md: 8px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;

  /* Tiefe */
  --shadow-1: 0 0 0 0 transparent; /* Onepage: flach, keine Schatten auf Karten und Buttons */
  --shadow-2: 0 4px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-3: 0 24px 64px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.06);

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 150ms; --t-med: 220ms;

  --focus: 0 0 0 3px rgba(111,70,40,.30);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--brand-tint-2); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
input, select, textarea, button { font: inherit; color: inherit; }
/* Gehobener Stil: Überschriften in klassischer Serifenschrift, Bedienung bleibt in der Systemschrift */
/* Onepage-Stil: Überschriften sehr fett und eng gesetzt */
h1, h2, h3, .serif { font-family: var(--font); font-weight: var(--font-display-weight); letter-spacing: var(--font-display-tracking); }
h3 { font-weight: 700; letter-spacing: -0.01em; }
.tabular { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Gemeinsame Bausteine */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s4); border-radius: var(--r-sm);
  border: 1px solid transparent; background: rgba(0,0,0,.05); color: var(--ink);
  font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
  box-shadow: var(--shadow-1); user-select: none; -webkit-user-select: none;
}
/* Hover dunkelt jeden Knopf leicht ab und behält seine Farbe (sonst würden farbige Knöpfe mit weißer Schrift hell, Min-Hinweis 13.10.) */
@media (hover: hover) { .btn:hover { background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06)); } }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
@media (hover: hover) { .btn-primary:hover { background: var(--primary-hover); } }
.btn-brand { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (hover: hover) { .btn-brand:hover { background: var(--primary-hover); } }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
@media (hover: hover) { .btn-ghost:hover { background: var(--bg-sunken); } }
.btn-lg { height: 48px; padding: 0 var(--s6); font-size: 1rem; border-radius: var(--r-sm); }
.btn svg { width: 16px; height: 16px; }

.field { display: grid; gap: 6px; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: 16px; /* verhindert iOS-Zoom */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { height: auto; min-height: 88px; padding: var(--s3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-strong); box-shadow: var(--focus); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-free { color: var(--st-free); background: var(--st-free-bg); }
.badge-reserved { color: var(--st-reserved); background: var(--st-reserved-bg); }
.badge-seated { color: var(--st-seated); background: var(--st-seated-bg); }
.badge-soon { color: var(--st-soon); background: var(--st-soon-bg); }
.badge-blocked { color: var(--st-blocked); background: var(--st-blocked-bg); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }

/* Schalter im Apple-Stil */
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background var(--t-med) var(--ease-out); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform var(--t-med) var(--ease-out); }
.switch input:checked + span { background: var(--brand-strong); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: var(--focus); }

/* Segmentierte Auswahl (Apple) */
.segmented { display: inline-flex; padding: 3px; border-radius: var(--r-md); background: var(--bg-sunken); gap: 2px; }
.segmented button { border: 0; background: transparent; height: 30px; padding: 0 var(--s3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }