/* =====================================================================================
   Vorlage 45 Uhrmacher · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Die Farben kommen aus dem Material einer Uhr: Tiefschwarz (Gehäuseinneres), Roségold (Gehäuse, Zeiger),
   Stahlblau (gebläute Schrauben und Sekundenzeiger), Rubinrot (Lagersteine), Elfenbein (Zifferblatt).
   Kontraste stehen hinter jeder Textfarbe; gerechnet nach WCAG, mindestens 4,5 : 1.
   ===================================================================================== */
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Dunkle Abschnitte */
  --nacht: #09090b;           /* Tiefschwarz, Grund der Bühnen */
  --nacht-2: #121216;         /* Karten auf Schwarz */
  --nacht-3: #1b1b21;         /* Felder, Linien auf Schwarz */
  --hell-text: #f3eee6;       /* 17,6 : 1 auf --nacht */
  --hell-leise: #aaa39a;      /* 7,6 : 1 auf --nacht, 6,9 : 1 auf --nacht-2 */
  --haar-dunkel: rgba(243, 238, 230, .14);

  /* Helle Abschnitte */
  --elfenbein: #f4efe6;       /* Zifferblatt-Elfenbein */
  --elfenbein-2: #e9e1d3;     /* abgesetzte Flächen */
  --tinte: #17151a;           /* 16,3 : 1 auf --elfenbein */
  --leise: #5c564e;           /* 6,4 : 1 auf --elfenbein, 5,7 : 1 auf --elfenbein-2 */
  --haar-hell: rgba(23, 21, 26, .16);

  /* Material */
  --rose: #dca88c;            /* Roségold auf Schwarz: 9,4 : 1 */
  --rose-hell: #f3d3bf;
  --rose-tief: #8f5139;       /* Roségold-Text auf Elfenbein: 5,3 : 1 */
  --stahl: #2c55c9;           /* gebläuter Stahl auf Elfenbein: 5,6 : 1 */
  --stahl-hell: #86a3f4;      /* gebläuter Stahl auf Schwarz: 7,9 : 1 */
  --stahl-tief: #0d1530;      /* Grund des Abschnitts Jobs */
  --rubin: #b3123c;           /* Rubin auf Elfenbein: 5,9 : 1 */
  --rubin-hell: #ff7c95;      /* Rubin auf Schwarz: 7,5 : 1 */
  --ankauf: #17100d;          /* warmes Schwarz, Abschnitt Ankauf */

  /* Brücke zur Web-App */
  --bg: var(--nacht);
  --surface: var(--nacht-2);
  --text: var(--hell-text);
  --muted: var(--hell-leise);
  --accent: var(--rose);
  --on-accent: #1d110b;       /* 9,0 : 1 auf --rose */
  --border: var(--haar-dunkel);
  --error: #ff8d8d;

  --radius: 14px;
  --radius-gross: 26px;
  --radius-klein: 8px;

  --breite: 1160px;
  --rand: 24px;               /* Seitenrand; ab 1200 px Platz für das Zifferblatt rechts */
  --abstand: clamp(96px, 12vw, 168px);
  --kopf: 64px;
  --weich: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 1200px) {
  :root { --rand: 156px; }
}