/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/layout.css
   Version: 0.1.0 · Build: 2026-09-20 · Benötigt: tokens.css
   VENDORED — READ-ONLY.

   Acht Klassen für die zehn Handgriffe, die auf jeder Seite vorkommen:
   etwas nebeneinander, etwas untereinander, eines davon wächst.

   WARUM SIE HIERHERGEHÖREN. Zwei Projekte haben unabhängig voneinander
   Namen für dieselben Aufgaben erfunden — der Team Hub .row/.stack/.grow
   (18 Klassen, 218 Vorkommen), das Ticketsystem .flex/.flex-col/.gap-*
   (19 Klassen). Beim dritten Projekt wären es siebzig Erfindungen für zehn
   Aufgaben.

   Die Belastbarkeit der beiden Belege ist NICHT gleich: Der Team Hub
   benutzt seine 18 Klassen durchgehend, das Ticketsystem seine 19 fast
   gar nicht (zwei Vorkommen ausserhalb der Randklassen). Der zweite Bedarf
   ist also durch ERFINDUNG belegt, nicht durch Benutzung — jemand hat
   dieselben zehn Aufgaben erkannt und benannt. Das trägt, aber es ist der
   schwächere Beleg, und das gehört hierhin statt in eine Fussnote.

   WAS BEWUSST NICHT MITGEKOMMEN IST
     .mt-1…4 / .mb-1…4   Randklassen. Ein Kind setzt keinen Außenrand
                         (DESIGN.md §0c) — sie machen den Verstoß bequem
     .gap-1/2/3 einzeln  Ein gap ohne Behälter ist sinnlos, und die
                         Trennung lädt ein, .flex OHNE Abstand zu schreiben
     .grow-1/-2          tragen Zauberzahlen (min-width: 160px/200px)
     .contents           nimmt das Element aus dem Baum der Hilfstechnik
     .spacer             ein einziges Vorkommen — eine Stelle, kein Bedarf
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nebeneinander ───────────────────────────────────────────────────────
   Umbruch ist der Standard, nicht die Ausnahme: Eine Reihe, die nicht
   umbricht, schiebt auf schmalen Schirmen ihren Inhalt aus dem Bild. Wer
   den Umbruch nicht will, nimmt .bh-nowrap am Kind.                      */
.bh-row {
  display: flex;
  align-items: center;
  gap: var(--bh-space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.bh-row--tight   { gap: var(--bh-space-2); }
.bh-row--end     { justify-content: flex-end; }
.bh-row--between { justify-content: space-between; }
.bh-row--center  { justify-content: center; }
/* Oben ausrichten statt mittig — sobald ein Kind zweizeilig wird, schwimmt
   alles andere sonst neben seiner Mitte. */
.bh-row--top     { align-items: flex-start; }

/* ── Untereinander ───────────────────────────────────────────────────────
   Der Stapel setzt den Abstand, nicht seine Kinder (DESIGN.md §0c). Das
   ist der ganze Zweck der Klasse: Wer sie benutzt, kann den margin am Kind
   weglassen — und soll es.                                               */
.bh-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-4);
  min-width: 0;
}
/* --tight statt --2: Die Ziffer sagte nicht, dass 8px gemeint sind. */
.bh-stack--tight { gap: var(--bh-space-2); }

/* ── Einzelne Kinder ─────────────────────────────────────────────────────
   min-width: 0 gehört dazu und ist der eigentliche Grund für die Klasse:
   Ein Flex-Kind schrumpft ohne sie nicht unter seine Inhaltsbreite, und
   ein langer Titel schiebt dann die Nachbarn aus der Reihe. Genau deshalb
   ist die frühere Klasse .narrow (die NUR min-width: 0 setzte) hier
   aufgegangen — sie war die halbe Klasse.                                */
.bh-grow { flex: 1; min-width: 0; }
.bh-none { flex: none; }

/* Nachträglicher Umbruch für Behälter, die keine .bh-row sind. */
.bh-wrap { flex-wrap: wrap; }