/* =============================================================================
   Thema Simplex
   -----------------------------------------------------------------------------
   Angelegt am 02.09.2026 für den Kundenhub der Simplex GmbH, Remshalden.

   ES KOMMT NACH `hub.css` UND ÜBERSCHREIBT NUR, WAS ES NENNT. Zweites Thema
   nach WAXTUM500, und es hält sich an dieselbe Regel: ein Farb- und
   Schriftwechsel, kein zweites Regelwerk.

   DIE WERTE SIND GEMESSEN UND NICHT GESCHÄTZT. Sie stehen in
   `06 Operations/Simplex Media/05 Medien Simplex/_STYLEGUIDE_SIMPLEX.md`, dort
   im Nachtrag vom 24.08.2026: berechnete Stile im Browser ausgelesen, nachdem
   die erste Runde die Farben aus Bildschirmfotos geschätzt hatte und in einem
   entscheidenden Punkt danebenlag.

   SIMPLEX FÜHRT DREI FARBEN UND NICHT EINE:
   * Grün `#5D8427` ist die Farbe der Knöpfe, nicht der Überschriften. Es wird
     hier der Akzent und trägt damit Knöpfe, Fortschrittsbalken und aktive
     Zeilen, also genau das, was es auf simplex.media auch trägt.
   * Dunkles Blaugrün `#04515C` sind die Überschriften. Es wird der Rahmen,
     also die Kopfleiste, und es bleibt die Farbe der Überschriften.
   * Orange `#EE4E1E` ist die Vorzeile über der Überschrift und der stärkste
     Knopf. Es wird der Hinweis, im Fundament heißt diese Rolle Karmesin: das
     Band „Mach weiter, wo du warst" und die Merkzeichen. **Sparsam ist Teil
     der Marke**, zwei orange Flächen auf einem Bildschirm wären eine zu viel.

   DIE SCHRIFT IST KHAND und nicht Gryphon Rock. Gryphon Rock ist
   lizenzpflichtig, Khand ist die zweite echte Simplex-Schrift und steht auf
   derselben Seite in den Knöpfen und den Vorzeilen. Sie liegt als Datei neben
   dem Hub und wird nicht von Google geladen: ein Lernender soll seine Adresse
   nicht an einen Dritten schicken müssen, nur weil er eine Überschrift liest.
   Der Fließtext bleibt Inter, die liegt ohnehin da und passt zu Khand.

   DAS LOGO IST WEISS. `logo-simplex.png` trägt nur die Wortmarke, das Quadrat
   darüber wäre bei 34 Pixeln Höhe ein Punkt. Weiß, weil die Kopfleiste dunkel
   ist: das Logogrün `#5D7328` auf `#04515C` wäre kaum zu sehen. Erzeugt aus
   `simplex-logo.svg` mit `baue_simplex_marke.py`, nicht abgezeichnet.
   ========================================================================== */

@font-face {
  font-family: "Khand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/khand-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Khand";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/khand-latin-600.woff2") format("woff2");
}

:root {
  /* Die Marke, mit den Namen aus dem Styleguide. */
  --simplex-gruen:    #5D8427;   /* Knöpfe auf simplex.media */
  --simplex-blaugruen:#04515C;   /* Überschriften */
  --simplex-orange:   #EE4E1E;   /* Vorzeile und stärkster Knopf */
  --simplex-blaugrau: #EBF0F3;   /* abgesetzte Abschnitte */

  /* Die Rollen im Hub. `--akzent` und `--navy` sind im Fundament zwei Blautöne
     für dieselbe Sache, Handlung. Beide bekommen deshalb das Grün. Das
     Blaugrün trägt nur den Rahmen, und der Rahmen ist die Kopfleiste. */
  --akzent:     var(--simplex-gruen);
  --navy:       var(--simplex-gruen);
  --navy-tief:  var(--simplex-blaugruen);
  --karmesin:   var(--simplex-orange);
  --gruen:      var(--simplex-gruen);

  /* Die Flächen verlieren den Blaustich des Fundaments nicht ganz, sondern
     nehmen den Ton, den Simplex selbst für abgesetzte Abschnitte benutzt. */
  --sand:       #EBF0F3;
  --sand-tief:  #E1E8ED;
  --flaeche:    #F2F6F8;
  --linie:      #D6D6D6;
  --text:       #141414;
  --leise:      #55646B;
  --leise-2:    #8A979D;

  --schrift:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Khand", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Im Dunkeln dieselbe Regel wie im Fundament: die Flächen drehen, die
   Markenfarben bleiben. Wer eine Farbvariable einführt, dreht sie im selben
   Zug mit, sonst steht sie eines Tages hell auf hell. Das ist der Fehler, der
   am 28.08.2026 zweimal an einem Tag passiert ist. */
@media (prefers-color-scheme: dark) {
  :root {
    --sand:      #172023;
    --sand-tief: #1F2A2E;
    --flaeche:   #131B1E;
    --linie:     #2C383C;
    --text:      #E8EDEF;
    --leise:     #A3B0B5;
    --leise-2:   #7C8A8F;
  }
}

/* DIE ÜBERSCHRIFTEN STEHEN IM DUNKLEN BLAUGRÜN, so wie auf simplex.media. Sie
   sind die einzige Stelle, an der die zweite Markenfarbe im Text auftaucht.
   Khand läuft schmal und wirkt bei gleicher Größe kleiner als Literata,
   deshalb einen Tick mehr Größe und eine engere Zeile: eine zweizeilige
   Überschrift in Khand mit normaler Zeilenhöhe fällt auseinander. */
.blatt h1, .blatt h2, .blatt h3,
.kachel .titel, .modulkopf h1 {
  color: var(--simplex-blaugruen);
  letter-spacing: .005em;
  line-height: 1.12;
}
.blatt h1, .modulkopf h1 { font-size: 2.05rem; }
.blatt h2 { font-size: 1.55rem; }

/* Im Dunkeln kippt das Blaugrün auf eine helle Fassung. Ohne diese Zeile
   stünde die Überschrift fast unlesbar auf dunklem Grund, und zwar genau der
   Fehler, den das Fundament schon einmal hatte. */
@media (prefers-color-scheme: dark) {
  .blatt h1, .blatt h2, .blatt h3,
  .kachel .titel, .modulkopf h1 { color: #8FD3DE; }
}