/* Q4 Taxi — Token-Schicht der Kundenstrecke und des Praxis-Portals.
   (Visuelles Redesign, _docs/ux/redesign-kunde.md §2.4.1)

   Wird NUR von app/_seite.php geladen, und zwar NACH assets/style.css:
   dadurch uebersteuert sie den Backoffice-Grundstock, ohne ihn zu aendern.
   inc/layout.php (Backoffice) laedt diese Datei nie — dort bleibt alles
   bitgenau wie bisher.

   Partner-Branding kommt als <style>-Block DANACH und uebersteuert wiederum
   die Farb-Tokens (nur die, siehe inc/tenant.php).

   Harte Regel: --akzent erscheint NIE in color/border-color/outline.
   Marke als Schrift oder Linie heisst --akzent-text. Begruendung: die
   Markenfarbe des ersten echten Kunden ist ein helles Gelb (1,4:1 auf Creme). */

/* Selbst gehostet statt Google Fonts: kein Fremdrequest im kritischen Pfad
   und keine IP-Uebertragung in die USA (LG Muenchen I, 20.01.2022,
   3 O 17493/20). Latin-Teilmenge aus dem offiziellen rsms/inter-Release 4.1,
   variabel von 100 bis 900. font-display:swap — der erste Aufbau rendert in
   system-ui und tauscht nach. */
@font-face{
  font-family:'InterApp';
  src:url('/assets/fonts/inter-var-latin.woff2') format('woff2') tech(variations);
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,
                U+2122,U+2192,U+2713;
}

:root{
  /* ── Flaechen / Schrift ─────────────────────────────────── */
  --grund:#F2F3F5; --flaeche:#E9EBEF; --karte:#FFFFFF;
  --ink:#14161A; --ink-soft:#40454D; --ink-mute:#656C76;
  --linie:#E2E5EA; --linie-stark:#767C86;
  --ink-rgb:20 22 26;

  /* ── Akzent: vier Rollen ────────────────────────────────── */
  --akzent:#14161A;        /* NUR background/fill */
  --akzent-ink:#FFFFFF;    /* Schrift AUF --akzent */
  --akzent-text:#14161A;   /* Marke als Schrift/Linie auf hell */
  --btn:#14161A; --btn-ink:#FFFFFF;
  --fokus:#1B57D6;

  /* ── Semantik ───────────────────────────────────────────── */
  --gut:#146B3C; --warn:#8A5A00; --fehler:#A32020;
  --gut-flaeche:color-mix(in srgb, var(--gut) 10%, var(--karte));
  --warn-flaeche:color-mix(in srgb, var(--warn) 10%, var(--karte));
  --fehler-flaeche:color-mix(in srgb, var(--fehler) 8%, var(--karte));

  /* ── Typo ───────────────────────────────────────────────── */
  --font:'InterApp', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-display:clamp(1.875rem, 7vw, 2.5rem);
  --t-xl:1.375rem; --t-l:1.125rem; --t-m:1rem;
  --t-s:.875rem;   --t-xs:.8125rem; --t-caps:.75rem;

  /* ── Abstaende ──────────────────────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:56px; --s16:80px;

  /* ── Radien (Preset "normal") ───────────────────────────── */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px; --r-voll:999px;

  /* ── Schatten ───────────────────────────────────────────── */
  --sch-1:0 1px 2px rgb(var(--ink-rgb)/.04), 0 2px 8px -4px rgb(var(--ink-rgb)/.08);
  --sch-2:0 2px 6px rgb(var(--ink-rgb)/.06), 0 12px 28px -14px rgb(var(--ink-rgb)/.20);
  --sch-3:0 24px 48px -26px rgb(var(--ink-rgb)/.34);

  /* ── Masse ──────────────────────────────────────────────── */
  --h-feld:52px; --h-knopf:52px; --h-knopf-gross:56px;
  --spalte:640px; --spalte-breit:1080px;

  /* Ruecklinks auf die Alt-Namen aus style.css, damit noch nicht
     umgebaute Stellen nicht ins Leere greifen. */
  --text:var(--ink); --text-leise:var(--ink-mute); --radius:var(--r-l);
}

/* Radius-Preset "gross" (Branding setzt data-radius am <html>) */
html[data-radius="gross"]{
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
}

body{ font-family:var(--font); background:var(--grund); color:var(--ink);
      font-size:var(--t-m); line-height:1.6;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      /* Lange Strassennamen und 200-%-Zoom brechen die Zeile, nicht das Layout. */
      overflow-wrap:break-word; }

h1,h2,h3{ color:var(--ink); }
h1{ font-size:var(--t-display); font-weight:700; letter-spacing:-.03em; line-height:1.08; }
h2{ font-size:var(--t-xl);      font-weight:650; letter-spacing:-.02em; line-height:1.2;  }
h3{ font-size:var(--t-l);       font-weight:600; letter-spacing:-.01em; line-height:1.3;  }

/* Links tragen NIE die Markenflaeche als Schrift (--akzent waere bei Lillo
   Gelb auf Creme = 1,42:1). --akzent-text ist die Rolle dafuer und immer
   dunkel genug. */
a{ color:var(--akzent-text); text-underline-offset:3px; }

/* Ein Fokusring fuer alles — sichtbar auf jedem Grund, nie --akzent.
   Ohne :where(), weil style.css denselben Selektor mit (0,1,1) traegt und
   ein :where()-Ring dagegen verlieren wuerde. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--fokus); outline-offset:2px;
}

/* Eingaben ausserhalb von .feld (Portal, Backoffice-Erbe) sollen wenigstens
   die richtige Flaeche und einen Rahmen mit >=3:1 tragen. */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=time],
input[type=datetime-local], select, textarea{
  background:var(--karte); border-color:var(--linie-stark); color:var(--ink);
}

/* Zahlenflaechen laufen nicht in der Breite. */
.betrag, .fahrt-nr, .eta, .kennz, .zeit, .mask, .zaehler,
.preis dd, .kennzahl .zahl{ font-variant-numeric:tabular-nums; }

@media (prefers-contrast: more){
  .block, .karte, .feld input, .feld select, .feld textarea{ border:1px solid var(--ink); }
}