/* bausteine.css – die Bausteine, die es nur in ICT-Inventar gibt, und die
   wenigen Abweichungen von Dashboard-Style.

   Reihenfolge der Stilvorlagen: grund.css, Schriften, ds.css,
   view-transitions.css, thema.css, bausteine.css, rahmen.css, Seiten-CSS.
   Alle gemeinsamen Bausteine (Knopf, Karte, Kachel, Feld, Tabelle, Status,
   Banner, Leerzustand, Spinner, Loader, Skelett, Fortschritt, Chips,
   Plakette, Schalter und Schalterliste, Kästchenliste, Zeilenliste,
   Zeitachse, Diagramme …) kommen aus Dashboard-Style 2.0 mit ihren
   .ds-*-Klassen und werden von bausteine.js (UI.*) gebaut.

   Kaskaden-Ebenen: Dashboard-Style liegt in @layer ds.*, diese Datei in
   keiner Ebene – jede Regel hier gewinnt gegen jede Regel von Dashboard-
   Style, gleich wie spezifisch. Darum überschreibt sie nur, was ICT
   wirklich anders will (Abschnitt 1, je mit Grund), und ändert gemeinsame
   Bausteine sonst nur über ihre Hooks (--ds-stack-gap, --ds-btn-* …).
   Grundregeln, die Bausteine NICHT schlagen dürfen (Ränder 0 der
   ICT-Blöcke, die Lage des Sinnbilds .icon), stehen in grund.css in der
   Ebene «grund» vor «ds».

   Regeln wie in Dashboard-Style: nur Tokens (--ds-* und die ICT-Tokens aus
   thema.css), keine Farb-, Radius-, Schrift-, Dauer- oder Kurven-Literale,
   keine @keyframes (die stehen nur in vendor/dashboard-style/css/motion.css;
   hier werden sie nur beim Namen genannt). Hover-Regeln in
   @media (hover: hover), und Hover bewegt nie etwas. Code/Pruefe-Frontend.ps1
   prüft die Literale.

   ------------------------------------------------------------------
   INHALT
   ------------------------------------------------------------------
   1. Abweichungen von Dashboard-Style (je mit Grund)
   2. Tonklassen, Ergebniszahl (.t-* .anzahl; das Sinnbild .icon in grund.css)
   3. Raster (.karten .karte-breit .karte-inhalt .karte-kopf-aktionen)
   4. Datenzeilen (.datenzeile-neben .datenzeile-zeile)
   5. Hinweisliste (.hinweise)
   6. Formulare (.eingabe-schmal .hinweis-platz)
   7. Liste über die ganze Seite (.tabelle-rahmen .tabelle-kopf-text .name-link)
   8. Zahlmarke (.zahlmarke .karte-marke)
   9. Zeitachse (.zeitachse-still)
   ------------------------------------------------------------------ */


/* ==================================================================
   1. Abweichungen von Dashboard-Style
   Jede Regel hier ändert einen gemeinsamen Baustein bewusst. Neue
   Abweichungen nur mit Grund – und lieber in Dashboard-Style selbst,
   wenn sie für jedes Projekt gelten (STYLEGUIDE.md, Abschnitt 5).
   ================================================================== */

/* Inhaltsbereich einer Karte (UI.karte → .inhalt): Seiten füllen ihn,
   nachdem die Karte gebaut ist, und die Fusszeile bleibt trotzdem
   zuletzt. Seine Kinder sind keine Kinder von .ds-card, darum trägt er
   den Kartenrhythmus von Dashboard-Style (.ds-card > * + *, Zwischentitel,
   Unterabschnitt, Fehler unter einer Reihe, Fakten) selbst nach. Die
   Karte gibt ihm, wie jedem Kind, die 16 px darüber. */
.karte-inhalt > * + * { margin-top: var(--ds-space-4); }
.karte-inhalt > .ds-card__subtitle:not(:first-child) { margin-top: var(--ds-space-6); }
.karte-inhalt > .ds-card__subtitle:first-child { margin-top: 0; }
.karte-inhalt > .ds-card__subtitle + * { margin-top: var(--ds-space-2); }
.karte-inhalt > .ds-subsection { margin-top: var(--ds-space-2); }
.karte-inhalt > .ds-inline-form + .ds-field__hint--error { margin-top: var(--ds-space-1); }

.karte-inhalt > .ds-facts:not(:first-child),
.ds-card > .karte-inhalt:not(:first-child):has(> .ds-facts:first-child) {
  margin-top: var(--ds-space-5);
}

/* Ein Zwischentitel ausserhalb einer Karte (Blatt, Dialog) hat keinen
   eigenen Rand: dort setzt der Körper den Abstand (gap). */
:is(.ds-sheet__body, .ds-dialog__body) > .ds-card__subtitle { margin: 0; }


/* Stapel: 20 px auf Seitenebene, auch verschachtelt (die Bereiche der
   Detailseiten sind Stapel in einem Stapel); in einer Karte 16 px. Nur
   über den Hook von Dashboard-Style (--ds-stack-gap). */
.ds-stack { --ds-stack-gap: var(--ds-space-5); }
.ds-card .ds-stack { --ds-stack-gap: var(--ds-space-4); }

/* Status-Chip: ein langer Text bricht im Chip um. */
.status-text { min-width: 0; overflow-wrap: anywhere; }

/* Feldfehler (UI.feldFehler) unter einer Datenzeile oder Suche: 4 px
   Luft; im Feld (UI.feld) übernimmt dessen Abstand. */
.ds-field__hint--error { margin-top: var(--ds-space-1); }
.ds-field > .ds-field__hint--error { margin-top: 0; }


/* ==================================================================
   2. Tonklassen, Ergebniszahl (das Sinnbild .icon steht in grund.css)
   ================================================================== */

/* Tonklassen für Text und Sinnbilder; Status immer zusammen mit Sinnbild
   oder Wort, nie Farbe allein. «Info» ist neutral – es gibt kein Blau. */
.t-erfolg  { color: var(--ds-success); }
.t-warnung { color: var(--ds-warning); }
.t-gefahr  { color: var(--ds-error); }
.t-leise   { color: var(--ds-text-2); }
.t-still   { color: var(--ds-text-3); }
.t-info    { color: var(--ds-text-2); }
.t-stark   { color: var(--ds-text); font-weight: var(--ds-weight-label); }

/* Ergebniszahl einer Liste («47 von 163 ADMIN-Clients»); schliesst eine
   Leiste oder Chipreihe rechts ab. */
.anzahl {
  color: var(--ds-text-2);
  font: var(--ds-font-body);
  font-variant-numeric: tabular-nums;
}

.ds-action-bar > .anzahl,
.ds-chips > .anzahl { margin-left: auto; }


/* ==================================================================
   3. Raster
   ================================================================== */

/* Kartenraster: so viele Spalten, wie 420 px breit Platz haben. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--ds-space-5);
  min-width: 0;
}

.karten > .karte-breit,
.ds-grid-2 > .karte-breit { grid-column: 1 / -1; }

/* Karten nebeneinander teilen eine Höhe; ihre Fusszeilen liegen unten auf
   einer Linie, und auch die höchste Karte behält 16 px vor ihrer
   Fusszeile – wie .ds-grid-2 in Dashboard-Style (seit 2.1.0), hier fürs
   .karten. */
.karten > .ds-card:has(> .ds-card__links) {
  display: flex;
  flex-direction: column;
}

.karten > .ds-card > .ds-card__links { margin-top: auto; }
.karten > .ds-card > :has(+ .ds-card__links) { margin-bottom: var(--ds-space-4); }

/* Inhaltsbereich einer Karte (UI.karte): ein leerer nimmt keinen Platz. */
.karte-inhalt:empty { display: none; }

/* Aktionen rechts neben dem Kartentitel; bricht die Zeile um, stehen sie
   links unter dem Titel. Ohne Titel stehen sie trotzdem rechts. */
.karte-kopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
}

.ds-card__row > .karte-kopf-aktionen:only-child { margin-left: auto; }

/* Ein Text-Knopf am Ende der Kopfzeile hängt sein Polster rechts hinaus. */
:is(.ds-card__row, .karte-kopf-aktionen) > .ds-btn--text:last-child { margin-right: calc(-1 * var(--ds-space-3)); }


/* ==================================================================
   4. Datenzeilen
   Lesen ist .ds-facts--rows, Bearbeiten .ds-form--rows von Dashboard-
   Style (UI.datenzeilen, UI.feldZeile, UI.formZeile). Hier nur, was ICT
   dazu legt.
   ================================================================== */

/* Klein und leise neben dem Wert («vor 3 Tagen»). */
.datenzeile-neben {
  margin-left: var(--ds-space-2);
  color: var(--ds-text-2);
  font: var(--ds-font-meta);
  font-variant-numeric: tabular-nums;
}

/* Knopfzeile unter einem Feld («Vorschlag übernehmen»); ein Text-Knopf am
   Zeilenanfang fluchtet mit dem Feld darüber. */
.datenzeile-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-1);
}

.datenzeile-zeile > .ds-btn--text:first-child { margin-left: calc(-1 * var(--ds-space-3)); }


/* ==================================================================
   5. Hinweisliste (UI.hinweise): Befunde als .ds-alert--plain von
      Dashboard-Style untereinander, ohne Lücke (die Haarlinien trennen).
   ================================================================== */

.hinweise { display: grid; }


/* ==================================================================
   6. Formulare
   Die Mehrfachauswahl (UI.mehrfach) ist .ds-check-list von
   Dashboard-Style, die Suche mit Kürzel .ds-search__key.
   ================================================================== */

.eingabe-schmal { width: min(100%, 200px); }

/* Im Seitenblatt (Filter) zeigt die Mehrfachauswahl alle Einträge: das
   Blatt rollt schon, eine zweite Rollfläche darin wäre eine Falle. Nur
   über den Hook von Dashboard-Style. */
.ds-sheet__body { --ds-check-list-max-height: none; }

/* Platz für einen Hinweis, der am Getippten hängt (UI.hinweisPlatz): ohne
   Inhalt verborgen (hidden, .ds-base), sonst 8 px unter Feld und Hinweis. */
.ds-field > .hinweis-platz { margin-top: var(--ds-space-2); }


/* ==================================================================
   7. Liste über die ganze Seite (UI.tabellenRahmen)
   Der Rahmen ist .ds-table-wrap--fill mit .ds-table--pin-first von
   Dashboard-Style: eigener Scroller, Kopf und erste Spalte kleben, Zellen
   brechen nicht um und enden mit «…». Hier nur die Masse: die Tabelle
   ist so breit wie ihr Inhalt (mindestens wie der Rahmen), damit auch die
   Spaltenköpfe auf schmalen Bahnen nicht umbrechen, und die erste Spalte
   (der Name, über den die Zeile öffnet) mindestens 180 px.
   ================================================================== */

.tabelle-rahmen > .ds-table {
  width: max-content;
  min-width: 100%;
}

.tabelle-rahmen > .ds-table :is(th, td):first-child { min-width: 180px; }

/* Text eines nicht sortierbaren Kopfs mit Erklärung: ein Tabstopp für den
   Tooltip (UI.tabellenKopf); der Ring folgt dem Radius des Sortierknopfs. */
.tabelle-kopf-text { border-radius: var(--ds-radius-xs); }

/* Name, der die Detailseite öffnet: ein Link wie jeder (.ds-base), in 500. */
.name-link { font-weight: var(--ds-weight-label); }


/* ==================================================================
   8. Zahlmarke (UI.zahlmarke) und Karte mit Zahlmarke (UI.karte({ marke }))
   Die Zeilenliste (UI.listenZeile, UI.zeilenliste) ist .ds-list von
   Dashboard-Style; die aktuelle Zeile tönt --ds-list-current-bg
   (thema.css).
   ================================================================== */

/* Zahlmarke: 32 px rund, 500 tabellarisch, tonal nach Dringlichkeit. Die
   Dringlichkeit steht zusätzlich als Wort in der Zeile. */
.zahlmarke {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--ds-space-2);
  border-radius: var(--ds-radius-action);
  background: var(--ds-surface-high);
  color: var(--ds-text-2);
  font: var(--ds-font-label);
  font-variant-numeric: tabular-nums;
}

.zahlmarke.ton-warnung { background: var(--ds-warning-container); color: var(--ds-on-warning-container); }
.zahlmarke.ton-gefahr { background: var(--ds-error-container); color: var(--ds-on-error-container); }

@media (forced-colors: active) {
  .zahlmarke { border: 1px solid CanvasText; }
}

/* Karte mit Zahlmarke (UI.karte({ marke })): vorne die Marke über beide
   Zeilen, daneben Titel und Beschreibung, rechts die Aktionen (Status
   «Dringend»). Die Kopfzeile der Karte löst sich ins Raster auf; ihr
   Überhang für Knöpfe gilt hier nicht (Marke und Status stehen mittig).
   Abweichung, STYLEGUIDE.md Abschnitt 5. */
.karte-marke {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--ds-space-3);
}

.karte-marke > .ds-card__row { display: contents; }
.karte-marke > .ds-card__row > * { margin-block: 0; }
.karte-marke > .ds-card__row > .zahlmarke { grid-row: 1 / span 2; }
.karte-marke .ds-card__title { grid-column: 2; grid-row: 1; }
.karte-marke .karte-kopf-aktionen { grid-column: 3; grid-row: 1 / span 2; }
.karte-marke > .ds-muted { grid-column: 2; grid-row: 2; margin-top: 0; }

/* ==================================================================
   9. Zeitachse (UI.zeitachse): .ds-timeline von Dashboard-Style.
   Abgleich-Einträge und alte Zeitstempel tragen einen grauen statt eines
   grünen Punkts (der Hook auf dem Eintrag; das Wort steht im Eintrag
   bzw. im Kartentext).
   ================================================================== */

.zeitachse-still { --ds-timeline-dot-color: var(--ds-line-2); }