/* Design-Grundlage von WebOfTime: alle Farben, Abstände, Radien und die Schrift als CSS-Variablen.
   style.css benutzt nur diese Werte. Herkunft und Regeln: docs/design.md (Stand 28.10.2026).
   Nur dunkel, sachlich nach dem Vorbild einer großen Finanz-App: zwei Grautöne für Flächen,
   zwei Schriftfarben, Ember-Orange nur für die Hauptaktion, Violett nur für Privat. */

/* IBM Plex Sans liegt selbst auf dem Server (Datenschutz: kein Google-Fonts-Abruf). Lizenz: fonts/OFL.txt */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Flächen */
  --bg: #181b20;        /* Grauton 1: Hintergrund */
  --karte: #23272e;     /* Grauton 2: Karten, Flächen */
  --feld: #2c313a;      /* Knöpfe und Eingabefelder auf Karten */
  --linie: #2e333b;     /* Trennlinien */

  /* Schrift */
  --text: #f1eee8;      /* aktiv: Creme-Weiß */
  --leise: #858d98;     /* klein und inaktiv */
  --auf-farbe: #fff;    /* Schrift auf Orange, Violett, Rot */

  /* Bedeutungsfarben */
  --glut: #d2581f;      /* Ember-Orange: nur die wichtigste Aktion */
  --glut2: #f5a524;     /* Bernstein: „läuft“, geändert */
  --gruen: #2fa866;     /* erledigt, hinzugefügt */
  --rot: #e0483e;       /* Gefahr, Fehler, Auflegen */
  --blau: #5b8def;      /* Links, eigene Redebeiträge */
  --privat: #8b6cf0;    /* Privat: Schrift und Fläche, lesbar auf beiden Grautönen */
  --privat-hell: #cdbcff;   /* Privat auf dunklem Grund (Emblem vorn, Hinweis im Anruf) */
  --privat-dunkel: #6e5aa8; /* Privat, hintere Punkte des Emblems */
  --schleier: color-mix(in srgb, #000 55%, transparent); /* hinter Blättern von unten */

  /* Anruf-Bildschirm: ganz schwarz */
  --anruf-bg: #000;
  --anruf-text: #f3ede6;
  --anruf-leise: #ffffff80;
  --anruf-zwischen: #ffffffa0;
  --anruf-flaeche: #ffffff14;
  --anruf-flaeche-hover: #ffffff22;
  --anruf-rand: #ffffff1f;
  --anruf-feld: #ffffff10;
  --anruf-feldrand: #ffffff26;
  --anruf-knopf-hell: #ffffffe6;

  /* Schrift */
  --schrift: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-groesse: 15px;
  --schrift-klein: 13px;
  --schrift-mini: 11px;

  /* Abstände (4er-Raster) */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 20px;
  --a6: 24px;
  --rand-seite: 16px;   /* Seitenrand auf dem Handy */

  /* Radien */
  --radius-knopf: 8px;
  --radius-karte: 12px;
  --radius-blatt: 16px;
  --radius-rund: 999px;
}