/* ===========================================================================
   BAUKASTEN 100.2.4 — wie die Bauteile aussehen.

   ┌───────────────────────────────────────────────────────────────────────┐
   │  IN DIESER DATEI STEHT KEIN FARBWERT, KEIN EIGENER WERT-NAME UND       │
   │  KEINE FESTE LÄNGE (ausser den Linienstärken 1 und 2 Bildpunkte).      │
   │                                                                       │
   │  Jede Farbe, jede Rundung, jede Schrift kommt als `var(--…)` aus dem  │
   │  ERSCHEINUNGSBILD (100.2.3); jede Länge ist ein Vielfaches der         │
   │  Grundgröße (Anhang A des Baukonzepts nennt die Maße des Entwurfs,    │
   │  hier stehen sie geteilt durch 16,5). Wird dort ein Wert getauscht,   │
   │  folgen alle Bauteile — ohne dass diese Datei angefasst wird.         │
   │                                                                       │
   │  Bewacht von `proben/test_baukasten_bauteile.py` (Sabotage-Probe A)   │
   │  und haus-weit von `…/rahmen/proben/test_keine_farbe_im_geruest.py`.  │
   └───────────────────────────────────────────────────────────────────────┘

   DREI REGELN AUS DER ABNAHME DES ENTWURFS (Konzept §3.2), hier gebaut:
     * HANDLUNGEN WERDEN NIE ABGESCHNITTEN. Die Handlungs-Zelle einer Tabelle
       trägt kein „Überstand verstecken" und kein Auslassungszeichen; wird es
       eng, rutschen die Knöpfe in eine zweite Zeile (Sabotage-Probe B).
     * NUR DER INHALT SCROLLT — das baut der Rahmen, nicht diese Datei.
     * EIN BAUTEIL SCROLLT IN SICH. Tabelle und begrenzte Karte haben ihren
       eigenen Scrollbalken; die Seite scrollt nie waagrecht.
   =========================================================================== */

/* --- Scrollbalken: schmal und dunkel, überall im Haus ---------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--balken-griff) var(--balken-bahn);
}
*:hover { scrollbar-color: var(--balken-griff-drueber) var(--balken-bahn); }
*::-webkit-scrollbar { width: var(--balken-breite); height: var(--balken-breite); }
*::-webkit-scrollbar-track { background: var(--balken-bahn); }
*::-webkit-scrollbar-thumb { background: var(--balken-griff);
                             border-radius: var(--rund-pille); }
*::-webkit-scrollbar-thumb:hover { background: var(--balken-griff-drueber); }

/* Was verborgen ist, bleibt verborgen — auch wenn ein Bauteil unten eine
   eigene Anzeige-Art setzt. */
[class^="bk-"][hidden], [class*=" bk-"][hidden] { display: none !important; }

/* --- Knopf ------------------------------------------------------------------ */

.bk-knopf {
  font: inherit;
  font-size: calc(var(--grundgroesse) * .88);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--grundgroesse) * .485);
  flex: none;
  box-sizing: border-box;
  height: calc(var(--grundgroesse) * 2.545);
  padding: 0 calc(var(--grundgroesse) * 1.09);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien);
  background: var(--knopf-grund);
  color: var(--schrift-1);
  white-space: nowrap;
  cursor: pointer;
}
.bk-knopf:hover { background: var(--zeile-drueber); border-color: var(--schrift-4); }
.bk-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bk-knopf:disabled { opacity: .4; cursor: not-allowed; }
.bk-knopf-haupt { background: var(--akzent); border-color: var(--akzent);
                  color: var(--auf-akzent); }
.bk-knopf-haupt:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }
.bk-knopf-gefahr { background: none; border-color: var(--kritisch-rand);
                   color: var(--kritisch); }
.bk-knopf-gefahr:hover { background: var(--kritisch-grund); border-color: var(--kritisch); }
.bk-knopf-klein { height: calc(var(--grundgroesse) * 2.06);
                  padding: 0 calc(var(--grundgroesse) * .79);
                  font-size: calc(var(--grundgroesse) * .8); }

/* --- Status-Pille -------------------------------------------------------------- */

.bk-pille {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--grundgroesse) * .424);
  box-sizing: border-box;
  max-width: 100%;
  height: calc(var(--grundgroesse) * 1.576);
  padding: 0 calc(var(--grundgroesse) * .667);
  border-radius: var(--rund-pille);
  font-size: calc(var(--grundgroesse) * .8);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.bk-pille::before {
  content: "";
  flex: none;
  width: calc(var(--grundgroesse) * .424);
  height: calc(var(--grundgroesse) * .424);
  border-radius: var(--rund-pille);
  background: currentColor;
}
.bk-pille-text { overflow: hidden; text-overflow: ellipsis; }
.bk-pille-gut { color: var(--gut); background: var(--gut-grund); }
.bk-pille-achtung { color: var(--achtung); background: var(--achtung-grund); }
.bk-pille-kritisch { color: var(--kritisch); background: var(--kritisch-grund); }
.bk-pille-neutral { color: var(--schrift-3); background: var(--neutral-grund); }

/* --- Formularfeld: Beschriftung ÜBER dem Feld, Hilfe DARUNTER --------------- */

.bk-feld { display: flex; flex-direction: column; gap: calc(var(--grundgroesse) * .424);
           min-width: 0; }
.bk-feld-beschriftung { font-size: calc(var(--grundgroesse) * .8); font-weight: 500;
                        color: var(--schrift-3); }
.bk-pflicht { color: var(--akzent); margin-left: calc(var(--grundgroesse) * .25); }
.bk-eingabe {
  font: inherit;
  font-size: calc(var(--grundgroesse) * .93);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: calc(var(--grundgroesse) * 2.667);
  padding: 0 calc(var(--grundgroesse) * .79);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien);
  background: var(--feld-grund);
  color: var(--schrift-1);
  color-scheme: var(--farbschema);
}
.bk-eingabe::placeholder { color: var(--schrift-4); }
.bk-eingabe:focus { outline: none; border-color: var(--akzent); }
.bk-eingabe-mehrzeilig { height: calc(var(--grundgroesse) * 5.82);
                         padding: calc(var(--grundgroesse) * .667) calc(var(--grundgroesse) * .79);
                         line-height: 1.45; resize: vertical; }
.bk-eingabe-zahl { font-family: var(--schriftart-zahlen); font-variant-numeric: tabular-nums; }
.bk-feld-fehler .bk-eingabe { border-color: var(--kritisch); }
.bk-hilfe { font-size: calc(var(--grundgroesse) * .75); color: var(--schrift-4); }
.bk-fehlertext { font-size: calc(var(--grundgroesse) * .78); color: var(--kritisch); }

/* Das Kästchen: die Beschriftung steht NEBEN ihm, nicht darunter. */
.bk-kaestchen {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--grundgroesse) * .6);
  min-height: calc(var(--grundgroesse) * 2.06);
  font-size: calc(var(--grundgroesse) * .88);
  color: var(--schrift-2);
  white-space: nowrap;
  cursor: pointer;
}
.bk-kaestchen-feld { flex: none; margin: 0; width: calc(var(--grundgroesse) * 1.09);
                     height: calc(var(--grundgroesse) * 1.09);
                     accent-color: var(--akzent); }

/* --- Raster: vier Spalten, ein Feld belegt 1, 2 oder alle 4 ------------------ */

.bk-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--grundgroesse) * 1.09) calc(var(--grundgroesse) * 1.21);
  align-items: start;
}
.bk-zelle { min-width: 0; }
.bk-breite-2 { grid-column: span 2; }
.bk-breite-4 { grid-column: 1 / -1; }
/* Ein Kästchen im Raster steht auf der Höhe der Eingabefelder daneben: es
   rückt um die Höhe einer Feld-Beschriftung nach unten. */
.bk-zelle > .bk-kaestchen { margin-top: calc(var(--grundgroesse) * 1.62);
                            min-height: calc(var(--grundgroesse) * 2.667); }

/* --- Karte mit Kopf ------------------------------------------------------------ */

.bk-karte {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grundgroesse) * 1.09);
  box-sizing: border-box;
  min-width: 0;
  padding: calc(var(--grundgroesse) * 1.333) calc(var(--grundgroesse) * 1.4545);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-flaeche);
  background: var(--karte);
}
.bk-karte-kopf { display: flex; align-items: center; flex-wrap: wrap;
                 gap: calc(var(--grundgroesse) * .727); }
.bk-karte-titelblock { min-width: 0; }
.bk-karte-titel { margin: 0; font-size: calc(var(--grundgroesse) * 1.05);
                  font-weight: 600; color: var(--schrift-1); }
.bk-karte-unterzeile { margin: calc(var(--grundgroesse) * .25) 0 0;
                       font-size: calc(var(--grundgroesse) * .85); color: var(--schrift-3); }
.bk-karte-handlungen { margin-left: auto; display: flex; align-items: center;
                       flex-wrap: wrap; gap: calc(var(--grundgroesse) * .727); }
/* Der Rumpf scrollt in sich, nie die Seite: eine zu breite Tabelle bekommt
   hier ihren eigenen Balken. */
.bk-karte-rumpf { display: flex; flex-direction: column; min-width: 0;
                  gap: calc(var(--grundgroesse) * 1.09); }
.bk-karte-begrenzt .bk-karte-rumpf { max-height: calc(var(--grundgroesse) * 24);
                                     overflow: auto; }
.bk-karte-rumpf pre { margin: 0; font-family: var(--schriftart-zahlen);
                      font-size: calc(var(--grundgroesse) * .85); line-height: 1.5;
                      color: var(--schrift-2); white-space: pre-wrap;
                      overflow-wrap: anywhere; }

/* --- Tabelle ---------------------------------------------------------------------- */

.bk-tabelle-rahmen { min-width: 0; overflow-x: auto; }
.bk-tabelle {
  width: 100%;
  min-width: calc(var(--grundgroesse) * 30);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--schrift-zelle);
}
.bk-breite-s { width: calc(var(--grundgroesse) * 5); }
.bk-breite-m { width: calc(var(--grundgroesse) * 8); }
.bk-breite-l { width: calc(var(--grundgroesse) * 10.5); }
.bk-breite-xl { width: calc(var(--grundgroesse) * 14); }
.bk-tabelle th {
  padding: 0 calc(var(--grundgroesse) * .848) calc(var(--grundgroesse) * .667);
  border-bottom: 1px solid var(--linie);
  text-align: left;
  font-size: calc(var(--grundgroesse) * .72);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--schrift-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-tabelle td {
  padding: calc(var(--grundgroesse) * .848);
  border-bottom: 1px solid var(--zeile-linie);
  vertical-align: middle;
  color: var(--schrift-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-tabelle tbody tr:hover td { background: var(--zeile-drueber); }
.bk-tabelle tr[data-bk-gewaehlt] td { background: var(--zeile-gewaehlt); }
.bk-tabelle tr[data-bk-gewaehlt] td:first-child {
  box-shadow: inset var(--rand-aktiv) 0 0 var(--akzent);
}
.bk-tabelle .bk-spalte-stark { color: var(--schrift-1); font-weight: 600; }
.bk-tabelle .bk-spalte-zahl { font-family: var(--schriftart-zahlen);
                              font-variant-numeric: tabular-nums; color: var(--schrift-3); }
.bk-zeile-oben, .bk-zeile-unten { display: block; overflow: hidden; text-overflow: ellipsis; }
.bk-zeile-unten { margin-top: calc(var(--grundgroesse) * .24); font-weight: 400;
                  font-size: calc(var(--grundgroesse) * .82); color: var(--schrift-3); }

/* DIE HANDLUNGS-ZELLE — Regel „Handlungen werden nie abgeschnitten". Sie hebt
   ausdrücklich auf, was jede andere Zelle trägt: kein Überstand verstecken,
   kein Auslassungszeichen, Umbruch erlaubt. Die Knöpfe rutschen in eine zweite
   Zeile, statt zu verschwinden. */
.bk-tabelle th.bk-spalte-handlungen { text-align: right; }
.bk-tabelle td.bk-spalte-handlungen { overflow: visible; text-overflow: clip;
                                      white-space: normal; }
.bk-handlungen { display: flex; flex-wrap: wrap; justify-content: flex-end;
                 gap: calc(var(--grundgroesse) * .485); }

/* Die Leer-Anzeige — statt einer leeren Tabelle. */
.bk-leer {
  margin: 0;
  padding: calc(var(--grundgroesse) * 1.576);
  border: 1px dashed var(--linie-karte);
  border-radius: var(--rund-bedien);
  text-align: center;
  font-size: calc(var(--grundgroesse) * .9);
  color: var(--schrift-3);
}

/* --- Rückfrage-Fenster ---------------------------------------------------------- */

/* KEINE Anzeige-Art am Fenster selbst: sie überstimmte die Regel des Browsers,
   die ein geschlossenes Fenster verbirgt. Die Anordnung trägt der Innenteil. */
.bk-fenster {
  box-sizing: border-box;
  width: calc(var(--grundgroesse) * 27.9);
  max-width: calc(100% - var(--luft-gross) * 2);
  padding: calc(var(--grundgroesse) * 1.4545);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-flaeche);
  background: var(--fenster-grund);
  color: var(--schrift-2);
  box-shadow: var(--tiefe-fenster);
}
.bk-fenster::backdrop { background: var(--fenster-schleier); }
.bk-fenster-form { display: flex; flex-direction: column; margin: 0;
                   gap: calc(var(--grundgroesse) * .848); }
.bk-fenster-titel { margin: 0; font-size: calc(var(--grundgroesse) * 1.05);
                    font-weight: 600; color: var(--schrift-1); }
.bk-fenster-text { margin: 0; line-height: 1.5; }
.bk-fenster-handlungen { display: flex; flex-wrap: wrap; justify-content: flex-end;
                         gap: calc(var(--grundgroesse) * .727); }

/* --- Seitenkopf: Titel und Einleitung oben im Inhaltsbereich ------------------ */

.bk-seitenkopf { display: flex; align-items: flex-end; flex-wrap: wrap;
                 gap: calc(var(--grundgroesse) * .97); }
.bk-seitenkopf-block { min-width: 0; flex: 1 1 auto; }
.bk-seitenkopf-titel { margin: 0; font-size: var(--schrift-grosszahl); font-weight: 700;
                       letter-spacing: -.01em; color: var(--schrift-1); }
.bk-seitenkopf-text { margin: calc(var(--grundgroesse) * .5) 0 0;
                      max-width: calc(var(--grundgroesse) * 55); line-height: 1.5;
                      color: var(--schrift-3); }
.bk-seitenkopf-handlungen { display: flex; align-items: center; flex-wrap: wrap;
                            gap: calc(var(--grundgroesse) * .727); }

/* --- Das Muster-Blatt (`/baukasten`) -------------------------------------------- */

.bk-muster-reihe { display: flex; flex-wrap: wrap; align-items: center;
                   gap: calc(var(--grundgroesse) * .727); }
.bk-muster-aufruf { font-family: var(--schriftart-zahlen);
                    font-size: calc(var(--grundgroesse) * .75); color: var(--schrift-4); }
.bk-muster-hinweis { margin: 0; font-size: calc(var(--grundgroesse) * .78);
                     color: var(--schrift-4); }

/* --- Schmale Fenster ------------------------------------------------------------- */

@media (max-width: 50rem) {
  .bk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}