/* =====================================================================================
   Vorlage 27 Optiker · Sehweite Optik, Krems · 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.
   Bautyp Sehtest-Tafel: weiße Tafeln mit schmalem schwarzem Rahmen auf hellem Grund, alles mittig,
   Schrift Atkinson Hyperlegible (gemacht für gute Lesbarkeit, siehe Tafel 0,9 auf der Seite).
   ===================================================================================== */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --schrift: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --bg: #eceef1;            /* heller Grund, wie die Wand hinter der Sehtafel */
  --surface: #ffffff;       /* die Tafeln */
  --surface-2: #f4f5f7;     /* abgesetzte Flächen in einer Tafel */
  --text: #111417;          /* 17,8 : 1 auf Weiß */
  --muted: #4b5560;         /* 7,3 : 1 auf Weiß */
  --accent: #0b5fa5;        /* der eine Akzent: Links, Marken, Maßlinien. Weiß darauf 6,6 : 1 */
  --on-accent: #ffffff;
  --accent-hell: #e4eef8;
  --border: #d5d9df;
  --rahmen: #111417;        /* Tafelrahmen */
  --error: #b42318;

  --himmel: #bddcf3;        /* gleich wie der Himmel in der Straßenzeichnung (Rand der weichen Ebene) */

  --radius: 6px;            /* Tafeln: fast eckig */
  --radius-klein: 4px;
  --rund: 999px;            /* Knöpfe: rund */

  --breite: 1040px;
  --abstand: clamp(40px, 5vw, 64px);
  --kopf: 72px;
}