/* DS-Stand: design-system@e4acdc0 — AUSZUG aus css/components.css (Layout-Primitive
   .kachel-grid + .page--breit + deren box-sizing-Zeile), verbatim übernommen.
   Bewusst NICHT die volle components.css vendored: deren Komponenten-Klassen (.panel,
   .card, .btn, .badge, .chip, .topbar, …) kollidieren namensgleich mit dem gewachsenen
   Bestands-Look in components/ui.jsx + globals.css — ein Voll-Import würde ALLE calc-Seiten
   still umstylen (analog R4a-Begründung: public/ds/components.css liegt nur für Pin-Gleichlauf,
   wird NICHT geladen). Beim nächsten ds-Bump: Pin hier + ?v= im layout.js-Head mitziehen
   und den Auszug gegen css/components.css des neuen Stands diffen. */

.kachel-grid {
  box-sizing: border-box;
}

/* Breite Variante für Kachel-Grid-Seiten — erst ab >1200px sind mehrere Spalten
   überhaupt möglich; die schmalen Formular-/Editor-Seiten bleiben unverändert. */
.page--breit {
  max-width: 1800px;
}

/* ── Kachel-Grid (responsives Layout-Primitiv) ───────────────────────────── */

/* Kacheln (.panel/.card) nebeneinander auf großen Bildschirmen, automatisch
   ein-spaltig auf kleinen — ohne Media-Queries, ohne horizontales Scrollen:
   - auto-fit + minmax: so viele Spalten wie Platz, jede min. --kachel-min breit.
   - min(100%, …): unterhalb der Mindestbreite (Handy) kollabiert das Minimum
     auf die Containerbreite → 1 Spalte statt Overflow.
   - --kachel-min pro Container überschreibbar, z. B. style="--kachel-min: 480px".
   Breite Inhalte (Tabellen, lange Zeilen) müssen in der Kachel in einem EIGENEN
   overflow-x:auto-Wrapper scrollen — das bleibt App-Sache: .panel bekommt hier
   bewusst KEIN overflow, weil Panel-overflow ausklappende Inhalte (Comboboxen,
   Dropdowns) beschneiden würde. */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kachel-min, 380px)), 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Ohne min-width:0 erzwingen Inhalte (z. B. .table mit width:100%) die
   Spalten-Mindestbreite ihres Contents und sprengen das Grid. */
.kachel-grid > * {
  min-width: 0;
}