/*
 * Gestaltungswerte wirksam.werden
 *
 * Grundlage: Design System, Wissensdatenbank-Artikel 2642.
 * Die Markenfarben sind gegen media/wirksamwerden - Design & Farben.pdf
 * geprueft und stimmen damit ueberein.
 *
 * Zur Barrierefreiheit, gepruefte Kontraste gegen --paper:
 *   magenta  5,8:1  -> als Textfarbe geeignet
 *   orange   3,3:1  -> nur grosse Schrift und Flaechen
 *   gruen    2,2:1  -> nicht als Textfarbe
 *   gold     1,7:1  -> nicht als Textfarbe
 * Deshalb tragen farbige Elemente ihre Bedeutung nie ueber die Farbe allein:
 * Kategorien stehen immer als Text in der Pille, die Farbe kommt hinzu.
 */

:root {
  /* Markenfarben, unveraenderlich */
  --magenta: #b70d7f;
  --gold: #fab911;
  --orange: #ea5b0c;
  --gruen: #95b422;
  --ink: #1d1d1b;

  /* Flaechen */
  --paper: #fbf8f3;
  --soft: #f4efe7;
  --linie: #ded6c9;
  --gedaempft: #5e5a53;

  /* Kategorie-Farbwelten: kraeftiger Akzent, sehr leichte Flaeche,
     etwas kraeftigere Pille. Text darauf ist immer --ink. */
  --kat-magenta-akzent: #b70d7f;
  --kat-magenta-flaeche: #f6e5ea;
  --kat-magenta-pille: #efcede;

  --kat-gold-akzent: #fab911;
  --kat-gold-flaeche: #fbf3e0;
  --kat-gold-pille: #fbedc7;

  --kat-orange-akzent: #ea5b0c;
  --kat-orange-flaeche: #faebe1;
  --kat-orange-pille: #f8dcc9;

  --kat-gruen-akzent: #95b422;
  --kat-gruen-flaeche: #f3f3e2;
  --kat-gruen-pille: #e9eccd;

  /*
   * Dieselben Werte wie "neutral" - das Design kennt nur diesen einen
   * Grauton, geprueft mit 5,24:1 gegen --paper. "grau" ist trotzdem ein
   * eigener Name: "neutral" bleibt der Ersatzwert fuer Karten ohne
   * Kategorie, "grau" ist eine bewusst zugewiesene Kategorienfarbe (siehe
   * kategorienfarben.json). Beides denselben Namen tragen zu lassen wuerde
   * beim Lesen von kategorienfarben.json den Eindruck erwecken, die
   * Kategorie sei keine.
   */
  --kat-grau-akzent: #6b6862;
  --kat-grau-flaeche: #e9e6e2;
  --kat-grau-pille: #d3d1cc;

  --kat-neutral-akzent: #6b6862;
  --kat-neutral-flaeche: #e9e6e2;
  --kat-neutral-pille: #d3d1cc;

  /*
   * Rueckmeldung in der Quiz-Auswertung: gruener Haken, oranges Kreuz.
   * Beide Farben stammen aus der Projektpalette, die Flaechen sind
   * dieselben wie bei den Kategorien Gruen und Orange.
   *
   * Das Marken-Gruen (#95b422) bleibt mit 2,2:1 deutlich unter jeder
   * Kontrastschwelle und waere als Zeichen kaum zu erkennen - deshalb hier
   * abgedunkelt. Das Marken-Orange kommt unveraendert zum Einsatz: 3,3:1
   * reicht fuer das fett gesetzte Zeichen und fuer Rahmen und Flaechen.
   * Gegen --paper geprueft:
   *   richtig  5,6:1  -> auch als Textfarbe geeignet
   *   falsch   3,3:1  -> grosse, fette Schrift sowie Rahmen und Flaechen
   * Die Farbe steht ohnehin nie allein: Zeichen und Satz im Klartext
   * tragen dieselbe Aussage.
   */
  --richtig-akzent: #5a6f15;
  --richtig-flaeche: #f3f3e2;
  --falsch-akzent: #ea5b0c;
  --falsch-flaeche: #faebe1;

  /* Schrift */
  --schrift-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift-text: "Barlow Semi Condensed", system-ui, -apple-system, sans-serif;
  --zeilenhoehe: 1.55;
  --zeilenhoehe-eng: 1.2;

  /* 4px-Raster */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-6: 1.5rem;
  --raum-8: 2rem;
  --raum-12: 3rem;
  --raum-16: 4rem;

  --rund-klein: 4px;
  --rund-mittel: 10px;
  --rund-gross: 20px;

  --breite-text: 68ch;
  --breite-seite: 76rem;

  --regung: 180ms;
  --regung-kurve: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --regung: 1ms;
  }
}

/*
 * Schriften liegen lokal. Es wird nichts von fremden Servern nachgeladen -
 * weder Schriften noch Skripte noch Bilder. Barlow steht unter der SIL Open
 * Font License und darf selbst ausgeliefert werden.
 */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../schriften/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../schriften/barlow-semicondensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../schriften/barlow-semicondensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*
 * Ohne diesen Schnitt wuerde der Browser Fettdruck (z.B. <strong> im
 * Fliesstext, ".empfehlung__knopf") aus dem 600er-Schnitt selbst
 * hochrechnen ("synthetisches Fett") - das wirkt bei einer schmal
 * laufenden Schrift wie Barlow Semi Condensed schnell klobig/pixelig.
 */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../schriften/barlow-semicondensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}