/* ══════════════════════════════════════════════════
   v2 SURFACES — Card
   Destilliert aus Zeile 431-439 des Prototyps.
   ══════════════════════════════════════════════════ */
.card {
  background: var(--ms-card-bg);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-card-shadow);
  overflow: hidden;
  /* Der Innenabstand gehoert zur Karte. Er fehlte, und dadurch klebte in
     jeder Maske, die `.card` ohne eigenes Bauteil verwendet, der Inhalt an
     der Kante — aufgefallen beim Adressbuch (Formularfelder bis an den
     Kartenrand) und beim Aufbau der Verwaltungsmasken.

     Ueber ein eigenes Token, damit Bauteile den Wert VERWENDEN koennen,
     statt ihn zu erraten: `.card-header` zieht sich mit negativen
     Aussenabstaenden genau um diesen Betrag nach aussen, um bis an die
     Kartenkante zu reichen (data.css).

     Bauteile, die eine eigene Polsterung mitbringen, setzen sie selbst und
     stechen diese hier aus: .tile (Kachel des Kundendashboards) und
     .product-card > .card (Karte in der Karte, Artikelauswahl). */
  --ms-card-padding: var(--ms-space-5);
  padding: var(--ms-card-padding);
  transition: box-shadow var(--ms-transition-slow), transform var(--ms-transition-slow);
}

/* ── Ein Satz IN einer Karte ──
   Alles, was in einer Karte steht und KEIN Wertepaar ist: die leere Liste
   („Noch niemand freigegeben"), eine Meta-Zeile (Verfasser · Zeitpunkt), ein
   nachgereichter Hinweis.

   WOZU EIN BAUTEIL. Solche Saetze standen als blankes `<p>` da und erbten
   damit die Fliesstextgroesse. `--ms-text-body` ist FLUID (clamp 16–18px) und
   ergibt bei 1440px Fensterbreite 18px — in derselben Karte, in der ein Wert
   der Paarliste 16px hat (`.pair-list--stacked .pair dd`, data.css). Gemeldet
   am 2026-09-17 an der Karte „Freigaben": ein Satz in 18px neben Angaben in
   16px, und in den Aenderungsanfragen dieselbe Mischung.

   16px UND NICHT `--ms-text-body`, aus demselben Grund wie beim
   Bedienelement-Token (`--ms-control-font`, tokens.css): der fluide Wert
   aendert sich beim Ziehen am Fenster und ergibt gebrochene Groessen. Fuer
   Fliesstext ist das gewollt, fuer eine Kartenangabe nicht — sie steht neben
   Werten, die fest 16px sind.

   DIE FARBE KOMMT NICHT VON HIER. Wer den Satz daempfen will, stellt
   `.cell-muted` daneben (data.css) — dieselbe Zusammensetzung wie in den
   Tabellen, und die Karte fuehrt damit keine zweite Farbregel. */
.card-note { margin: 0; font-size: var(--ms-text-md); line-height: 1.5; }
.card-note + .card-note { margin-top: var(--ms-space-3); }

/* ── Karte mit klebender Fusszeile ──
   `.card` traegt `overflow: hidden` (die runden Ecken schneiden den Inhalt),
   und damit ist sie ein Rollbereich: ein `position: sticky` DARIN klebt an
   ihrem unteren Rand statt am Bildrand — also nie sichtbar. Diese Fassung
   verzichtet auf den Beschnitt. Sie gehoert an die Karte, deren Fusszeile
   kleben soll (heute die Neuanlage eines Katalogs, `.save-invite--sticky`),
   und NUR an die: ohne Beschnitt tritt alles heraus, was breiter ist als die
   Karte.

   Die Regel steht hier und nicht bei `.save-invite` in forms.css — dort war
   sie wirkungslos, weil forms.css VOR surfaces.css geladen wird und `.card`
   bei gleicher Spezifitaet gewinnt (gemessen 2026-09-09: `overflow` blieb
   `hidden`, das Band klebte nicht). */
.card--sticky-foot { overflow: visible; }
.card-hover:hover { box-shadow: var(--ms-card-shadow-hover); transform: translateY(-4px); }
.card-interactive { cursor: pointer; }

/* ── Lesebreite einer Formularkarte ──
   Seit die Verwaltungsmaske keine Obergrenze mehr hat (tokens-dense.css), ist
   die Flaeche frei. Frei ist richtig fuer eine Tabelle und falsch fuer ein
   Eingabefeld: ein Feld, das ueber 3300px laeuft, ist nicht besser bedienbar,
   sondern unlesbar — das Auge muss zwischen Beschriftung links und Eingabe
   rechts wandern, und bei zehn Feldern untereinander verliert man die Zeile.

   Die Grenze steht deshalb an der KARTE, in der getippt wird, nicht an der
   Seite. `:has(.form-group)` trifft genau das: eine Karte mit Formularfeldern
   ist eine Formularkarte, eine Karte mit einer Tabelle ist keine. Kein neues
   Merkmal im Markup, keine Bitte an kuenftige Masken, daran zu denken.

   Warum nicht am Feld selbst (`.form-group { max-width }`): dann stuenden die
   Felder links in einer sonst leeren, sehr breiten Karte — die Karte waere die
   Luege, nicht das Feld. Und in einem zweispaltigen Formularraster klafften
   zwischen den Spalten mehrere hundert Pixel.

   Die Suchleiste einer Uebersicht ist ausgenommen, ohne dass es hier stehen
   muss: sie benutzt `.search-box`, nicht `.form-group`.

   Wer eine breite Karte MIT Feldern braucht (Freitext ueber die ganze Breite,
   eine Auswahl mit vielen Spalten), setzt `.card--wide`.

   `.alert-add` gehoert dazu (2026-10-07): die Empfaengerlisten der
   Bestandswarnungen fuehren keine `.form-group`, sind aber ein Formular. In
   den Einstellungen lief ihre Karte deshalb ueber die ganze Arbeitsspalte —
   die Felder endeten bei 800px (`.alert-add__control`), der Papierkorb einer
   Zeile und „Speichern" standen 1200px weiter rechts, getrennt von dem, was
   sie betreffen. */
.card:has(.form-group),
.card:has(.alert-add) { max-width: var(--ms-content-medium); }
.card.card--wide { max-width: none; }

/* ── Zwei Karten nebeneinander ──
   Der Datensatz und was daneben gehoert (Zahlen auf einen Blick, Notizen).

   ZWEI GLEICHE HAELFTEN UEBER DIE GANZE BREITE. Das Paar muss mit den
   Sammelabschnitten darunter abschliessen — eine Maske hat EINE Kante rechts,
   nicht zwei. Hier stand `minmax(0, var(--ms-content-medium))`, also 800px je
   Zelle: das Kartenpaar endete auf einer 1950px-Arbeitsspalte bei 1616px,
   waehrend die Abschnitte darunter bis 1950 liefen, und die Stufe dazwischen
   sah aus wie ein Fehler.

   Damit gilt fuer eine Karte IM Raster die Lesebreite nicht mehr — sie fuellt
   ihre Haelfte. `> .card` hebt die Begrenzung aus `:has(.form-group)`
   ausdruecklich auf: zwei Grenzen um dieselbe Sache waeren eine zu viel, und
   die Entscheidung gehoert dem Raster. Die Lesebreite bleibt, wo sie hilft:
   bei der EINZELNEN Formularkarte einer Anlege- oder Bearbeitungsmaske ohne
   Abschnitte, die sonst ueber die ganze Fensterbreite liefe.

   GEMEINSAME UNTERKANTE (`align-items` bleibt bei der Rastervorgabe
   `stretch`). Hier stand `start`, und dann war die Firmenkarte 174px hoch,
   die Notizkarte daneben 351 — zwei Karten mit ausgefransten Unterkanten.
   Gestreckt trägt die kürzere Karte etwas Leerraum, und das liest sich als
   Absicht. Die Notizkarte nutzt die Hoehe (`flex-grow-1` am Textfeld); die
   Datenkarte bekommt sie, wenn die fehlenden Firmenfelder nachkommen.

   Unter 992px untereinander — dieselbe Schwelle wie in der Huelle
   (shell.css). `.form-grid-2` hat diesen Umbruch NICHT; das ist dort ein
   eigener Befund und nicht hier zu heilen. */
.card-grid-2 {
  display: grid;
  gap: var(--ms-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-grid-2 > .card { max-width: none; }
@media (max-width: 991.98px) {
  .card-grid-2 { grid-template-columns: minmax(0, 1fr); }
}