/* AyInnovate · Gestaltungswerte
   Fünf Farben, zwei Schriften, ein Winkel. Mehr braucht das System nicht. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farbe */
  --papier: #F7F6F2;
  --tiefschwarz: #000000;
  --signal: #FD4E05;
  --grau: #6E6E68;
  --hairline: #E3E1DB;
  --hairline-invers: #3B3A36;
  --grau-invers: #8F8D86;

  /* Modul — Breite eines Balkens; wird von js/feld.js auf den Bildschirm gerechnet */
  --u: 12px;

  /* Oberkante der schwarzen Platte im Bildschirm; js/feld.js schreibt sie je Bild.
     Sie ist die einzige Grenze zwischen heller und dunkler Fassung. Als Länge,
     nicht als Anteil: sie verschiebt die Platte und beschneidet die helle Ebene. */
  --kante: 100vh;

  /* Raum */
  --rand: max(24px, 5vw);

  /* Schrift */
  --schrift: "Geist", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;

  /* Größen — auch die Höhe begrenzt: ein Abschnitt bleibt ein Bildschirm */
  --gross: clamp(2.2rem, min(6.4vw, 11vh), 5.9rem);
  --mittel: clamp(1.75rem, min(4vw, 7vh), 3.7rem);
  --zeile: clamp(1.15rem, min(2.1vw, 3.4vh), 1.9rem);
  --lauftext: clamp(1.075rem, 1.2vw, 1.25rem);
  --klein: 0.8125rem;
  --mini: 0.75rem;

  /* Bewegung — schneller Antritt, präzises Einrasten */
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}