/* =============================================================================
   Thema AZAV Wissenshub
   -----------------------------------------------------------------------------
   Angelegt am 28.09.2026 für `azav.wissenshub.de`, den neunten Hub. Betrieben
   von der tkohns UG, verlinkt vom AZAV Wissensportal der Pfeil Concepts GmbH.

   ES KOMMT NACH `hub.css` UND ÜBERSCHREIBT NUR, WAS ES NENNT. Wie die Themen
   davor: Farben, Schrift, und diesmal die Knöpfe.

   DIE WERTE STAMMEN AUS DEM PORTAL und nicht aus einer eigenen Idee, damit
   der Sprung vom Portal in den Hub nicht nach einem Umzug aussieht. Quelle ist
   `Website/azav-portal/assets/portal.css` im Ordner `Kooperationen/AZAV
   Wissensportal`, Stand 28.09.2026:

   * `#0b1d3a` Tinte. Auf dem Portal die Farbe der Schrift und des Zeichens.
     Hier der RAHMEN, also die Kopfleiste, und die Farbe der Überschriften.
   * **Seit dem 29.09.2026 ist die HANDLUNG das Tintenblau** (Thomas: das
     helle Königsblau `#1f4fd1` biss sich mit dem Dunkelblau des Logos).
     Knöpfe, Beschriftungen und Verweise tragen `#0b1d3a`, Gold ist der
     einzige Farbakzent. Dazu `--az-hell` `#2b78b8`, ein Hellblau, das Wörter
     abhebt: 4,7 zu 1 auf Weiß, also auch für kleine Schrift. Gerechnet.
   * `#7cc0ea` Himmel und `#d9a441` Gold tragen auf dem Portal Striche und
     Hervorhebungen, nie Text. Hier ebenso: Gold nur als Linie.
   * `#f6f8fb` der Grund des Portals, hier `--flaeche`.

   DIE SCHRIFT IST PLUS JAKARTA SANS, dieselbe Datei wie auf dem Portal
   (`jakarta-latin.woff2`, veränderlich 400 bis 800). Sie liegt neben dem Hub,
   kein Abruf bei einem Dritten.

   DIE KNÖPFE SIND PILLEN MIT GLANZSTREIFEN, wie auf dem Portal, das die Werte
   von next-learning.de hat: 50 Prozent breit, 20 Grad geneigt, 1,4 Sekunden.
   **Das erreicht nicht jeden Knopf.** Das Fundament setzt die Rundung an gut
   zwanzig Stellen einzeln (siehe den Kasten im Thema next learning). Hier
   stehen die gefüllten Knöpfe, die ein Mitglied tatsächlich sieht; die
   Verwaltung bleibt eckig, dort ist es gleichgültig.
   ========================================================================== */

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

:root {
  /* Die Marke, mit der Herkunft im Namen. */
  --az-tinte:  #0b1d3a;
  --az-blau:   #1f4fd1;   /* bis 29.09.2026 die Handlung, jetzt nur noch Rückfall */
  --az-hell:   #2b78b8;
  --az-tief:   #12306f;   /* das Blau beim Überfahren, auf dem Portal `--primary-deep` */
  --az-himmel: #7cc0ea;
  --az-gold:   #d9a441;

  --akzent:    var(--az-tinte);
  --navy:      var(--az-tinte);
  --navy-tief: var(--az-tinte);
  /* **`--karmesin` ist im Fundament die zweite Markenfarbe**, nicht nur die
     Warnfarbe: Randstriche vor Überschriften, Zähler, Marken, gut zwanzig
     Stellen. Auf dem Portal trägt diese Rolle das Gold. `#d9a441` selbst trägt
     keine Schrift (2,3 zu 1 auf Weiß); `#8f6210` ist dasselbe Gold, tief genug
     für Schrift und für Weiß darauf, beides 5,35 zu 1. Gerechnet.
     **Fehler und Löschen bleiben rot**, siehe `--az-warn` weiter unten: ein
     Fehler in Gold sieht nach Hinweis aus. */
  --karmesin:  #8f6210;
  --az-warn:   #b3401c;   /* das Rot des Portals, eine Stufe dunkler: 5,7 zu 1 */

  --flaeche:   #f6f8fb;
  --sand:      #eef3fa;
  --sand-tief: #e3ecf7;
  --linie:     #e2e8f1;
  --text:      #26344d;
  --leise:     #5d6b82;
  /* Das Portal hat hier dasselbe `#5d6b82`. Auf der hellsten Fläche 5,1 zu 1;
     `#66748a` lag bei 4,46 und damit knapp darunter, gerechnet. */
  --leise-2:   #5d6b82;
  --rundung:   14px;

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

/* Fehler und Löschen in Rot, nicht im Gold von `--karmesin`. */
.reg-fehler { color: var(--az-warn); }
.anmeldung input[aria-invalid="true"] { border-color: var(--az-warn); }
.pf-konto { border-color: var(--az-warn); }
.reihe button.warnknopf { color: var(--az-warn); border-color: var(--az-warn); }

/* Die Überschriften wie auf dem Portal: Tinte, kräftig, eng gesetzt. */
.blatt h1, .blatt h2, .blatt h3,
.kachel .titel, .modulkopf h1 {
  color: var(--az-tinte);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.blatt h1, .modulkopf h1 { font-size: 2.05rem; }
.blatt h2 { font-size: 1.5rem; }

/* --- Pillen mit Glanz -------------------------------------------------------
   Die Liste ist die der gefüllten Knöpfe im Fundament, die ein Mitglied
   sieht: Anmeldung und Registrierung, die Suche, „Weiter“ im Kurskopf und im
   Band, das Quiz, die Unterlagen, die Profilknöpfe und die Knöpfe der
   Webseiten unter „Gemeinsam“. */
.anmeldung button,
.suchform button,
.quizknopf,
.weiterband .knopf,
.naechstes .knopf.hell,
.abschlusskarte .knopf.hell,
.knopf.voll,
.pf-tun button,
.uknopf, .rumpf .uknopf,
.kurskopf .kweiter,
.ws-dok-knopf,
.wunschform button {
  border-radius: 999px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.anmeldung button::before,
.quizknopf::before,
.weiterband .knopf::before,
.knopf.voll::before,
.pf-tun button::before,
.kurskopf .kweiter::before,
.ws-dok-knopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  transform: skew(-20deg);
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25) 45%,
              rgba(255,255,255,.45), rgba(255,255,255,.25) 55%, transparent);
  transition: left 1.4s cubic-bezier(.2,.7,.2,1);
}
.anmeldung button:hover::before, .anmeldung button:focus-visible::before,
.quizknopf:hover::before, .quizknopf:focus-visible::before,
.weiterband .knopf:hover::before, .weiterband .knopf:focus-visible::before,
.knopf.voll:hover::before, .knopf.voll:focus-visible::before,
.pf-tun button:hover::before, .pf-tun button:focus-visible::before,
.kurskopf .kweiter:hover::before, .kurskopf .kweiter:focus-visible::before,
.ws-dok-knopf:hover::before, .ws-dok-knopf:focus-visible::before {
  left: 125%;
}
/* Der zweitrangige Knopf ist hell und schimmert deshalb dunkel, wie auf dem Portal. */
.anmeldung button.zweitrangig::before {
  background: linear-gradient(120deg, transparent, rgba(4,9,34,.05) 45%,
              rgba(4,9,34,.11), rgba(4,9,34,.05) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .anmeldung button::before, .quizknopf::before, .weiterband .knopf::before,
  .knopf.voll::before, .pf-tun button::before, .kurskopf .kweiter::before,
  .ws-dok-knopf::before { transition: none; }
}

/* Die rohen Blautöne des Fundaments beim Überfahren, auf das tiefe Blau des
   Portals gezogen. Dieselben Stellen wie im Thema next learning. */
.anmeldung button:hover,
.quizknopf:hover,
.uknopf:hover, .rumpf .uknopf:hover { background: var(--az-tief); border-color: var(--az-tief); }
.uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover {
  border-color: #cfd8e6; background: #eef3fa;
}
.avatar { background: linear-gradient(140deg, #2b78b8, #0b1d3a); }

/* Die Kacheldeckel: Blau, Tinte und ein dritter Ton, damit die Wand nicht
   zweifarbig wird. Auf dem Portal läuft derselbe Weg vom Blau ins Tintenblau. */
.kachel .deckel { background: linear-gradient(140deg, #1c2f55, #0b1d3a); }
.kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #24406e, #0b1d3a); }
.kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #2b78b8, #12306f); }

/* Der Goldstrich unter dem Kicker der Webseiten, wie die Linien auf dem Portal. */
.ws-kicker { color: var(--az-hell); }
.ws-kopf { border-bottom-color: var(--az-gold); }

/* --- Die Beiträge von Pfeil Concepts, seit dem 28.09.2026 ------------------
   Die Übersicht und die Seite je Beitrag, gebaut von
   `technik/baue-azav-beitraege.py`. Nur in diesem Hub gibt es die Klassen. */
/* Die Karten tragen `ws-zeile`, damit Filter und Suche der Webseiten sie
   finden (`webseitenskript()` sucht `.ws-zeile[data-prio]`). Das Raster der
   Anforderungsliste, das an dieser Klasse haengt, wird hier zurueckgenommen. */
.webseite .ws-bereich.bt-bereich {
  background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 1rem;
}
.webseite .ws-zeile.bt-karte {
  display: flex; grid-template-columns: none; grid-template-areas: none;
  padding: 0 0 1.1rem; gap: .55rem; overflow: hidden;
  border: 1px solid var(--linie); border-radius: 16px;
}
.webseite .ws-zeile.bt-karte > :not(img) { margin-left: 1.15rem; margin-right: 1.15rem; }
.bt-kartenbild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: .35rem; }
.bt-bild { margin: 1.4rem 0 0; }
.bt-bild img { display: block; width: 100%; max-width: 46rem; height: auto; border-radius: 16px; }
.bt-auszug { max-width: 46rem; margin-top: 1.2rem; }
.bt-gliederung { max-width: 46rem; }
.bt-zurueck { margin: .6rem 0 0; font-weight: 600; }
.bt-raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  margin: 1rem 0 0;
}
.bt-karte {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 1.2rem 1.15rem; border: 1px solid var(--linie); border-radius: 16px;
  background: var(--papier, #fff); text-decoration: none; color: var(--text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.bt-karte:hover { border-color: #cfd8e6; box-shadow: 0 14px 40px rgba(11,29,58,.09); transform: translateY(-2px); }
.bt-karte h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; color: var(--az-tinte); overflow-wrap: anywhere; hyphens: auto; }
.bt-karte p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--leise); }
.bt-kat {
  align-self: flex-start; padding: .28em .8em; border-radius: 999px;
  background: #e6f0f8; color: #1f5f93; font-size: .78rem; font-weight: 700;
}
.bt-fuss { margin-top: auto; font-size: .82rem; color: var(--leise); }
.bt-kopfzeile { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; color: var(--leise); font-size: .9rem; }
.bt-gliederung { margin: 1.4rem 0; padding: 1.1rem 1.3rem; border-radius: 16px; background: var(--sand); }
.bt-gliederung h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.bt-gliederung ol { margin: 0; padding-left: 1.3rem; }
.bt-gliederung li { margin: .25rem 0; overflow-wrap: anywhere; }
.bt-auszug p { font-size: 1.02rem; line-height: 1.65; }
.bt-weiter { margin: 1.6rem 0 .4rem; }
.bt-hinweis { font-size: .88rem; color: var(--leise); }

/* =============================================================================
   Im Dunkeln
   -----------------------------------------------------------------------------
   Dieselbe Regel wie bei den anderen Themen: die Flächen drehen, die Marke
   wird aufgehellt. Gerechnet: `#8aabf2` auf `#171d29` 7,4 zu 1, Tintenblau
   darauf als Knopfschrift 7,3; `#f0936f` als Warnfarbe auf `#10151f` 7,9.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --grund:     #10151f;
    --papier:    #171d29;
    --flaeche:   #0d121b;
    --sand:      #1c2433;
    --sand-tief: #232d3f;
    --linie:     #2a3547;
    --text:      #e6ebf2;
    --leise:     #a9b6c9;
    --leise-2:   #8794a8;
    --navy:      #8cc4ea;
    --akzent:    #8cc4ea;
    --navy-tief: var(--az-tinte);
    --karmesin:  #e0b25c;   /* das Gold, aufgehellt: 8,6 zu 1 */
    --az-warn:   #f0936f;
    --auf-navy:     #0b1d3a;
    --auf-akzent:   #0b1d3a;
    --auf-karmesin: #0b1d3a;
  }
  .kurskopf .kweiter { color: #0b1d3a; }
  .blatt h1, .blatt h2, .blatt h3,
  .kachel .titel, .modulkopf h1 { color: #c9d7f7; }
  .anmeldung button:hover,
  .quizknopf:hover,
  .uknopf:hover, .rumpf .uknopf:hover { background: #b6dcf3; border-color: #b6dcf3; }
  .uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover { background: #1c2433; border-color: #3a4a66; }
  .avatar { background: linear-gradient(140deg, #5b86e0, #1c3a7a); }
  .kachel .deckel { background: linear-gradient(140deg, #1d3f9e, #0b1d3a); }
  .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #24406e, #0a1428); }
  .kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #2f64b0, #14306a); }
  .ws-kicker { color: #8cc4ea; }
  .bt-karte { background: var(--papier); }
  .bt-karte:hover { border-color: #3a4a66; box-shadow: none; }
  .bt-karte h3 { color: #c9d7f7; }
  .bt-kat { background: #1c2c52; color: #b3c8f6; }
}