/* ══════════════════════════════════════════════════════════════════════════
   Vocaris — Gestaltungswerte. EINE Quelle für das ganze Produkt.
   ══════════════════════════════════════════════════════════════════════════

   Vorher lagen dieselben Farben an drei Stellen: styles.css (Kundenbereich
   und Rechtsseiten), assets/site.css (Marketingseiten) und noch einmal
   inline in index.html. Wer eine Farbe ändern wollte, musste sie dreimal
   finden — und hat die dritte übersehen.

   Jetzt stehen sie hier. Die alten Namen (--paper, --ink, --accent …) gibt
   es weiterhin, sie zeigen nur auf die neuen Werte. Dadurch wirken über 700
   bestehende Verwendungen sofort mit, ohne dass eine Datei angefasst werden
   muss. Wer ein neues Element baut, nimmt die neuen, sprechenderen Namen.

   ZUR FARBWAHL: Die Marke war Violett und ist jetzt Petrol — ein tiefes
   Blaugrün. Zwei Gründe. Fünf der siebzehn Branchen kommen aus dem
   Gesundheitsbereich (Praxis, Apotheke, Physiotherapie, Tierarzt, Pflege);
   dort liest sich Petrol sachlich, wo Violett verspielt wirkt. Und der
   Wettbewerb ist fast durchgehend blau oder violett — diese Farbe ist
   unterscheidbar, ohne laut zu sein.
   Das Logo trägt denselben Verlauf, sonst wäre es ein Fremdkörper.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Flächen ──────────────────────────────────────────────────────────────
     Ein Hauch Wärme bleibt im Seitengrund: Reines Kaltweiß sieht aus wie
     jedes andere Software-Angebot. Die getönten Flächen ziehen dagegen ins
     Petrol, damit Hero und Karten zur Marke gehören. */
  --flaeche-0:#F9FAFA;      /* Seitenhintergrund */
  --flaeche-1:#ffffff;      /* Karten, erhobene Flächen */
  --flaeche-2:#EEF5F7;      /* ruhige Füllung, Eingabefelder */
  --flaeche-tint:#E4F2F6;   /* der Lavendel-Waschgang, Hero */
  --flaeche-tint-2:#CBE9EF;

  /* ── Text ─────────────────────────────────────────────────────────────────
     Kräftiger als bisher. #1a1723 war auf hellem Grund weich; #14121c sitzt
     sauberer und liest sich auf Telefonen bei Sonnenlicht deutlich besser. */
  --text-1:#14121c;
  --text-2:#494458;
  --text-3:#75718a;
  --text-4:#9a96ab;

  /* ── Marke ────────────────────────────────────────────────────────────────
     Petrol: dunkel genug für weißen Text darauf, hell genug, um auf dunklem
     Grund zu leuchten. Beides musste dieselbe Farbe können. */
  --marke:#0E7C96;
  --marke-tief:#0A5B70;
  --marke-hell:#6FCEDE;
  --marke-zart:#DFF3F7;
  --marke-verlauf:linear-gradient(135deg,#12A0B8,#0A6A8C);

  /* ── Signalfarben ─────────────────────────────────────────────────────────
     Genau zwei, und beide bedeuten etwas: Grün, wenn etwas gelungen ist.
     Koralle für Zahlen, die einen Verlust zeigen. Nirgends dekorativ. */
  --gut:#16875a;
  --gut-hell:#5ee9a4;
  --gut-zart:#e6f6ee;
  --weh:#e0522f;
  --weh-hell:#ff9878;

  /* ── Linien ───────────────────────────────────────────────────────────────*/
  --linie:#E4EDEF;
  --linie-stark:#CFE4E9;
  --linie-dunkel:#23383F;

  /* ── Dunkle Flächen ───────────────────────────────────────────────────────*/
  --dunkel:#0E1A20;
  --dunkel-2:#15272F;
  --auf-dunkel:#9BB4BC;

  /* ── Erhebung ─────────────────────────────────────────────────────────────
     Drei Stufen, mehr braucht niemand. Alle mit petrolfarbenem Unterton
     statt neutralem Grau — dadurch wirkt der Schatten wie Licht auf dieser
     Seite und nicht wie eine aufgeklebte Wolke. */
  --hoch-1:0 1px 2px rgba(20,17,31,.05), 0 2px 8px -2px rgba(12,70,90,.08);
  --hoch-2:0 4px 12px -4px rgba(20,17,31,.08), 0 16px 40px -18px rgba(12,70,90,.22);
  --hoch-3:0 8px 20px -8px rgba(20,17,31,.10), 0 40px 90px -32px rgba(12,70,90,.34);

  /* ── Rundungen ────────────────────────────────────────────────────────────
     Großzügiger als vorher. Das ist der stärkste einzelne Hebel dafür, dass
     eine Oberfläche aktuell statt alt wirkt. */
  --rund-s:10px;
  --rund:14px;
  --rund-l:20px;
  --rund-xl:26px;
  --rund-voll:999px;

  /* ── Schrift ──────────────────────────────────────────────────────────────*/
  --disp:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Große Größen wachsen mit dem Fenster, kleine bleiben fest — sonst wird
     Fließtext auf großen Bildschirmen unangenehm groß. */
  --t-riesig:clamp(46px,6.4vw,78px);
  --t-gross:clamp(34px,4.4vw,54px);
  --t-mittel:clamp(24px,2.6vw,32px);
  --t-lede:clamp(17px,1.4vw,19px);
  --t-text:16px;
  --t-klein:14px;
  --t-mini:12.5px;

  /* ── Maße ─────────────────────────────────────────────────────────────────*/
  --maxw:1240px;
  --pad:64px;

  color-scheme:light;

  /* ══════════════════════════════════════════════════════════════════════
     Alte Namen, neue Werte. NICHT entfernen: Über 700 Stellen in
     styles.css, site.css, app.html, admin.html, kiosk.html und
     reservieren.html benutzen sie. Sie hier umzubiegen erneuert alles auf
     einmal, ohne eine einzige dieser Dateien anzufassen.
     ══════════════════════════════════════════════════════════════════════ */
  --paper:var(--flaeche-0);
  --lav:var(--flaeche-tint);
  --lav-2:var(--flaeche-tint-2);
  --bubble:var(--marke-zart);
  --cardfoot:#F4FAFB;
  --ink:var(--text-1);
  --t2:var(--text-2);
  --t3:var(--text-3);
  --ph:var(--text-4);
  --accent:var(--marke);
  --accent-2:var(--marke-hell);
  --on-dark:var(--auf-dunkel);
  --line:var(--linie);
  --line-lav:var(--linie-stark);
  --line-dark:var(--linie-dunkel);
  --ok:var(--gut);
  --ok-dark:var(--gut-hell);
}

@media (max-width:1000px){ :root{ --pad:28px; } }