/* Athletik und Gesundheit — Gestaltungswerte.

   Vorbild ist das Hero der Startseite von athletikundgesundheit.ch:
   ein dunkles Foto unter einem Overlay in #080F1A, weisse Schrift,
   das Markenblau #084484 auf den Knoepfen. Der Grund ist darum nicht
   neutrales Schwarz, sondern ein dunkles Blauschwarz.

   Das Markenblau selbst erreicht auf diesem Grund nur einen Kontrast
   von 1.98 und taugt dort weder fuer Schrift noch fuer Knopfflaechen.
   Es bleibt die tiefe Stufe fuer Verlaeufe (--akzent-tief), darueber
   liegen hellere Stufen, die gemessen lesbar sind.

   Die Namen sind Rollen, keine Farben: eine andere Farbwelt braucht
   nur diese Datei.

   Kontraste gegen --grund, gerechnet und nicht geschaetzt:
     --akzent 5.51   --akzent-mittel 7.18   --akzent-hell 11.22
     --stark 19.20   --mittel 9.15          --schwach 6.25 */

:root {
  /* Akzentrampe. --akzent-tief ist die Markenfarbe der Website und
     traegt nur Flaechen und Verlaeufe, nie Schrift auf dunklem Grund. */
  --akzent-tief: #084484;
  --akzent: #3d8ce0;
  --akzent-mittel: #5ba3e8;
  --akzent-hell: #9ccbf5;

  /* Flaechen. Sie liegen dicht beieinander; die Tiefe entsteht nicht
     aus dem Sprung der Helligkeit, sondern aus Verlauf, Lichtkante
     und Schatten (siehe --karte, --kante, --schatten). */
  --grund: #080f1a;
  --flaeche: #101a2b;
  --flaeche-2: #17233a;
  --linie: #24314a;

  /* Schrift. */
  --stark: #ffffff;
  --mittel: #a8b4c6;
  --schwach: #8794a8;
  --auf-akzent: #ffffff;

  /* Plastik: Verlaeufe, Lichtkanten und Schatten. Eine Flaeche ohne
     diese drei wirkt aufgeklebt statt erhoben. */
  --karte: linear-gradient(180deg, #16223a 0%, #0e1728 100%);
  --karte-tief: linear-gradient(180deg, #1a2740 0%, #131e30 100%);
  --kante: inset 0 1px 0 rgba(255, 255, 255, .06);
  --schatten: 0 2px 10px rgba(0, 0, 0, .35);
  --schatten-hoch: 0 12px 34px rgba(0, 0, 0, .5);
  --akzent-verlauf: linear-gradient(180deg, #2f7fd4 0%, #0a4f97 100%);
  --akzent-schein: 0 4px 14px rgba(8, 68, 132, .45);

  /* Kantig wie die Knoepfe der Website. */
  --r-4: 2px;  --r-8: 4px;  --r-12: 6px;  --r-16: 10px;

  --titel: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --text: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --weich: cubic-bezier(.25, .46, .45, .94);

  --tab-hoehe: 58px;
  --seitenleiste: 232px;
}