/* =============================================================================
   Thema Galabau Leipzig
   -----------------------------------------------------------------------------
   Angelegt am 05.10.2026 für den Hub der Garten- und Landschaftsbau Leipzig
   GmbH, `galabau-leipzig.wissenshub.de`.

   ES KOMMT NACH `hub.css` UND ÜBERSCHREIBT NUR, WAS ES NENNT. Ein Farb- und
   Schriftwechsel wie bei next learning, kein zweites Regelwerk. Aufbau und
   Begründungen der Fundamentstellen stehen ausführlich in
   `thema-next-learning.css` und werden hier nicht wiederholt.

   DIE WERTE SIND AM 05.10.2026 AUF galabau-leipzig.de GEMESSEN, aus den
   berechneten Stilen und aus dem SVG des Logos:

   * `#178741` ist das dunkle Grün des Schriftzugs „Galabau" im Logo. Weiß
     darauf sind nur 4,59 zu 1, und auf den hellen Flächen als Verweisfarbe
     4,23. Für die HANDLUNG steht deshalb `#157A3B`, eine Stufe dunkler aus
     derselben Familie: 5,41 auf Weiß, 5,0 auf `--flaeche`. Gerechnet.
   * `#8DCA3F` ist das helle Grün von „Leipzig" und dem Blatt. Es trägt keine
     Schrift, nur Flächen und Akzente.
   * `#155F33` trägt die Kopfleiste, abgeleitet aus `#178741`. Die Website hat
     keinen farbigen Kopf, sie legt das Logo auf Fotos. Weiß auf `#155F33`
     sind 7,73 zu 1, das helle Blattgrün darauf 3,92: das Zeichen steht.
   * `#ECF2E1` ist der helle Grünton der Website, dort 107 Mal als Fläche und
     Fußschrift. Hier die abgesetzten Flächen.
   * `#333333` ist dort der Fließtext und die Überschriften.

   DIE SCHRIFTEN SIND DIE DER WEBSITE: Bebas Neue für Überschriften, Roboto
   für Text. Bebas Neue hat nur Versalien und nur ein Gewicht; sie trägt
   deshalb Seitentitel, Modultitel und Kacheln, nicht die kleinen
   Zwischenüberschriften im Lesetext. Dort bleibt Roboto in 600, sonst stünde
   ein Lernschritt in Großbuchstaben da, und das liest sich wie Rufen.
   ========================================================================== */

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/bebasneue-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/roboto-latin.woff2") format("woff2");
}

:root {
  --gl-gruen:      #178741;   /* „Galabau" im Logo */
  --gl-handlung:   #157A3B;   /* eine Stufe dunkler, trägt weiße Schrift */
  --gl-blatt:      #8DCA3F;   /* „Leipzig" und das Blatt */
  --gl-kopf:       #155F33;   /* die Kopfleiste */
  --gl-text:       #333333;   /* Fließtext der Website */

  --akzent:     var(--gl-handlung);
  --navy:       var(--gl-handlung);
  --navy-tief:  var(--gl-kopf);
  --karmesin:   var(--gl-gruen);

  --flaeche:    #F4F7EE;
  --sand:       #EEF3E5;
  --sand-tief:  #E5EDD6;
  --linie:      #DCE5CF;
  --text:       var(--gl-text);
  --leise:      #4E5650;
  --leise-2:    #646E68;      /* 5,29 auf Weiß, 4,88 auf --flaeche */

  --schrift:       "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-titel: "Bebas Neue", "Roboto", "Arial Narrow", sans-serif;
}

/* Bebas Neue läuft schmal und in Versalien. Ein Stück mehr Größe, leichter
   Sperrsatz wie auf der Website, und kein künstliches Fetten: die Schrift hat
   nur 400, ein `font-weight: 700` würde der Browser rechnen. */
.blatt h1, .blatt h2,
.kachel .titel, .modulkopf h1 {
  color: var(--gl-text);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.08;
}
.blatt h1, .modulkopf h1 { font-size: 2.6rem; }
.blatt h2 { font-size: 1.9rem; }
.blatt h3 {
  font-family: var(--schrift);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gl-text);
}

/* Die rohen Blautöne des Fundaments, wie bei next learning abgefangen. */
.anmeldung button:hover,
.quizknopf:hover,
.uknopf:hover, .rumpf .uknopf:hover { background: #0F6630; border-color: #0F6630; }
.uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover {
  border-color: #C9DDB4; background: #F4F7EE;
}
.avatar { background: linear-gradient(140deg, #2E9B52, #155F33); }

/* Die Seiten unter „Gemeinsam" setzen Fettes in `--ws-signal`, im Fundament
   ein Rot. Neben Galabau-Grün liest sich das wie eine Warnung, deshalb hier das
   Handlungsgrün. Die Variable steht auf `.webseite`, nicht auf `:root`. */
.webseite { --ws-signal: var(--gl-handlung); --ws-signal-bg: #E5EDD6; }

/* Drei Deckeltöne für die Kachelwand: Handlungsgrün, Kopfgrün, Graphit wie im
   Fuß der Website (`#2C3033`). */
.kachel .deckel { background: linear-gradient(140deg, #2E9B52, #155F33); }
.kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #6FA834, #2F6B1F); }
.kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #3D4447, #1F2426); }

@media (prefers-color-scheme: dark) {
  :root {
    --grund:     #10161A;
    --papier:    #182026;
    --flaeche:   #0D1316;
    --sand:      #1D272B;
    --sand-tief: #243034;
    --linie:     #2B373A;
    --text:      #E7EDE8;
    --leise:     #A7B4AC;
    --leise-2:   #869489;

    /* Das Grün wird im Dunkeln aufgehellt: `#5BB86E` auf `#10161A` sind 7,4
       zu 1. Gefüllte Knöpfe tragen dann dunkle Schrift, wie im Fundament. */
    --navy:      #5BB86E;
    --akzent:    #5BB86E;
    --navy-tief: var(--gl-kopf);
  }
  .kurskopf .kweiter { color: #0E1317; }
  .webseite { --ws-signal: #8FD49C; --ws-signal-bg: #1A2A20; }
  .anmeldung button:hover,
  .quizknopf:hover,
  .uknopf:hover, .rumpf .uknopf:hover { background: #8FD49C; border-color: #8FD49C; }
  .uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover {
    background: #1A2A20; border-color: #3C5A44;
  }
  .uzeile { background: #141E19; border-color: #29392E; }
  .blatt h1, .blatt h2, .blatt h3,
  .kachel .titel, .modulkopf h1 { color: #9BD3A6; }
  .kachel .deckel { background: linear-gradient(140deg, #1E7A3E, #0E3D20); }
  .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #4F8A26, #22481A); }
  .kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #353C3F, #181C1E); }
}