/* Das Labor (seit 14.09.2026) - **Wegwerf**, bis Sven entschieden hat.

   Jeder Schalter ist ein Attribut am Wurzelelement (`data-labor-<name>`),
   gesetzt vor dem ersten Malen (Kopfskript in base.html) aus dem
   Browserspeicher (`fahrbase-labor`, Seite /stil/labor). Was gewinnt, wandert
   nach tokens.css bzw. in die Bausteine; der Rest wird geloescht.

   **Am 15.09.2026 aufgeraeumt** (Sven: "bleiben sollen nur noch der Schalter
   fuer die helle Leiste und ... der Zeitungsvorschlag und gerne noch 1-2 neue").
   Gebaut und aus dem Labor entfernt: Gruppen, Papier, Verkehrsblau, Pflaume,
   flach, ohne Serife, Schriftskala, Ein Blatt, Strassen-Zeichen; verworfen:
   Signal Gelb, Teal, die erste Zeichnung, das Lenkrad.

   **Am 15.09.2026 nachts**: die Leiste im Dunkelmodus als eigene Frage (fuenf
   Vorschlaege zu Graphit), der Knopf zum Labor in der Kopfleiste. **Am Morgen
   entschieden**: Navy, Kohle, Moos und Aubergine sind Themen des Dunkelmodus
   (heute themen.css, Wahl auf "Mein Konto"), die Leiste darin "tief" -
   Flaechen- und Leistenfragen sind raus, Graphit, Espresso, Stahl verworfen.

   **Am 15.09.2026 nachmittags** getoent gebaut (Sven: "Getoent umgesetzt ...
   ein Mix aus Getoent und Ein Blatt"); Zeitung und Randtitel sind damit
   beantwortet und raus. Neu: die Leiste gegenlaeufig und Graphit fuer den
   Dunkelmodus ("vll ist also die Farbe im Darkmode der rechten Seite eher
   das Problem").

   **Am 15.09.2026, spaet am Nachmittag** entschieden: "weich" fuer Navy, Moos
   und Aubergine, "Glanz" fuer Kohle; die Themen haben seither eine helle und
   eine dunkle Fassung (themen.css). Kalk lebt als Kohle hell weiter - beide
   Fragen sind raus.

   **Am 15.09.2026 abends alles entschieden** (Sven: "Leiste hell: Dunkel
   (gebaut) - Auswahl: Gemischt (gebaut) - Kacheln: Kante - Klassen: Band -
   Flaechen: Mix (gebaut) - Feldzeichen: Mit (gebaut)"). Kante und Band stehen
   seither in components.css; alle Frageregeln sind raus. Was bleibt, ist die
   Mechanik fuer die naechste Frage: Kopfskript, labor.js, die Seite und der
   Knopf in der Kopfleiste (verschwindet ohne Fragen von selbst). */

/* Der Knopf zum Labor in der Kopfleiste (partials/labor_knopf.html): ein
   stilles Zeichen vor der Suche, mit der Zahl offener Fragen. */
.fb-topbar__labor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: var(--fb-space-2);
  border-radius: var(--fb-radius);
  color: var(--fb-gray-600);
}

.fb-topbar__labor:hover,
.fb-topbar__labor[aria-current="page"] {
  background: var(--fb-flaeche-innen);
  color: var(--fb-gray-800);
}

.fb-topbar__labor-zahl {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  padding: 0 var(--fb-space-1);
  transform: translate(35%, -20%);
  box-shadow: 0 0 0 2px var(--fb-flaeche);
  border-radius: 999px;
  background: var(--fb-marke-tint);
  color: var(--fb-marke-text);
  font-size: var(--fb-text-xs);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

@media (max-width: 760px) {
  .fb-topbar__labor {
    display: none;
  }
}

/* Die Laborseite selbst. */
.fb-labor {
  display: grid;
  gap: var(--fb-space-4);
}

.fb-labor__frage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--fb-space-3) var(--fb-space-5);
  align-items: start;
}

.fb-labor__titel {
  margin: 0 0 var(--fb-space-1);
  font-family: var(--fb-font-titel);
  font-size: var(--fb-text-xl);
  font-weight: 500;
}

.fb-labor__satz {
  margin: 0;
  color: var(--fb-gray-600);
  font-size: var(--fb-text-s);
}

.fb-labor__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fb-space-2) var(--fb-space-4);
  align-items: baseline;
  padding: var(--fb-space-3) var(--fb-space-4);
  border-radius: var(--fb-radius);
  background: var(--fb-flaeche-innen);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .fb-labor__frage {
    grid-template-columns: minmax(0, 1fr);
  }
}