/*
 * Mensa — Struktur- und Zustands-Stile des Frontends.
 *
 * REGELN, DIE HIER GELTEN (docs/03-designsystem.md):
 *
 * 1. Keine Hex-Werte, keine festen Pixel, wo eine ACSS-Variable existiert. Farben,
 *    Abstände, Radien und Typografie kommen ausschließlich aus Automatic CSS —
 *    eine `:root`-Variable in einer Plugin- oder Theme-Datei findet in der
 *    ACSS-Oberfläche und im Bricks-Farbwähler niemand.
 * 2. Zustandsfarben sind Rampenstufen der CI-Farben, keine eigenen Werte. Definiert
 *    ein Child-Theme eigene `--zsm-status-*`, gewinnen sie — sonst greift die
 *    ACSS-Stufe als Vorgabe. Deshalb steht überall
 *    `var(--zsm-status-…, var(--acss-stufe))`.
 * 3. Diese Datei macht Struktur und Zustand, nicht Gestaltung. Alles, was ein
 *    Redakteur ändern soll, gehört in eine Bricks-Global-Class auf denselben
 *    BEM-Klassen — dafür sind sie da.
 *
 * ZWEI BEWUSSTE AUSNAHMEN, weil ACSS dafür keine Variable hat:
 * - Pillen nutzen `border-radius: 100vmax` statt `999px` — dieselbe Wirkung, keine
 *   feste Pixelzahl.
 * - Der ruhige Karten-Schatten des Entwurfs steht als Fallback in `--box-shadow-s`;
 *   liefert ACSS ihn, gewinnt ACSS.
 *
 * `tabular-nums` gilt für JEDE Tometen-Zahl im Projekt (04-frontend Kap. 3) — ohne
 * das wandern die Ziffern in Nunito Sans und eine Zahlenspalte wirkt schief.
 */

.zsm-zahl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Hinweisband ─────────────────────────────────────────────────────────────
 * Dauerhaft sichtbar, nicht erst bei Mouseover: es ist das `aria-describedby`-Ziel
 * der inaktiven Bedienelemente (04-frontend Kap. 2). Kontrast bleibt deshalb voll,
 * ohne Transparenz.
 */
.zsm-hinweisband {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--neutral-trans-10);
  border-radius: var(--radius-m);
  background-color: var(--neutral-ultra-light);
  color: var(--neutral-dark);
  font-size: var(--text-s);
}

.zsm-hinweisband--kompakt {
  padding: var(--space-xs) var(--space-s);
}

.zsm-hinweisband__text {
  margin: 0;
}

.zsm-hinweisband__aktion,
.zsm-navigation__anmelden {
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  background-color: var(--action);
  color: var(--white);
  text-decoration: none;
}

.zsm-hinweisband__aktion:hover,
.zsm-navigation__anmelden:hover {
  /* NICHT --primary-hover: das liefert in ACSS 3.3.6 Fast-Schwarz (docs/03 Kap. 1). */
  background-color: var(--primary-semi-dark);
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.zsm-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.zsm-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
}

.zsm-navigation__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zsm-navigation__ziel {
  display: inline-block;
  padding: var(--space-xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background-color: transparent;
  color: var(--neutral-dark);
  font-family: inherit;
  font-size: var(--text-m);
  text-decoration: none;
  cursor: pointer;
}

.zsm-navigation__ziel--aktiv {
  background-color: var(--primary-ultra-light);
  color: var(--primary-dark);
  font-weight: 700;
}

/*
 * Inaktive Ziele sind echte `<button disabled>`. `opacity: .45` würde den Kontrast
 * unter 3:1 drücken; stattdessen eine ruhige Fläche mit der dunklen Graustufe des
 * CI — messbar über 4,5:1 und für Screenreader ohnehin über `disabled` angesagt.
 */
.zsm-navigation__ziel--inaktiv {
  background-color: var(--neutral-ultra-light);
  color: var(--neutral-semi-dark);
  cursor: not-allowed;
}

.zsm-navigation__nutzer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  font-size: var(--text-s);
}

.zsm-navigation__umschalter,
.zsm-navigation__abmelden {
  color: var(--action);
}

/* ── Punktestand ─────────────────────────────────────────────────────────── */
.zsm-punktestand__verweis {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  text-decoration: none;
}

.zsm-punktestand__pille {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-m);
  border: 1px solid transparent;
  border-radius: 100vmax;
  background-color: var(--neutral-ultra-light);
  color: var(--fg-muted, var(--neutral-semi-dark));
}

/* 0 Tometen bleibt neutral — eine rote Pille mit „0" liest sich wie ein Guthaben. */
.zsm-punktestand__pille--null {
  background-color: var(--neutral-ultra-light);
  color: var(--fg-muted, var(--neutral-semi-dark));
}

.zsm-punktestand__pille--gefuellt,
.zsm-punktestand__pille--gross {
  background-color: var(--zsm-accent-soft, var(--accent-ultra-light));
  border-color: var(--zsm-accent-soft-border, var(--accent-light));
  color: var(--accent-dark);
}

/* Mindestbreite auf vier Stellen — bewusst in JEDEM Zustand, nicht erst bei
 * `--gross`. Reserviert man die Breite erst ab 1000, springt die Kopfzeile genau
 * bei dem Wechsel 999 → 1000, den 04-frontend Kap. 3 verhindern will. Die Breite
 * muss vorher schon stehen. `ch` statt Pixel: sie skaliert mit der Schriftgröße.
 */
.zsm-punktestand__zahl {
  min-width: 4ch;
  text-align: right;
  font-size: var(--text-l);
  font-weight: 300;
}

.zsm-punktestand__einheit {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Der Ladeplatzhalter ist genauso breit wie der geladene Wert (4ch) — mit 3ch
 * würde die Pille beim Eintreffen des Saldos doch noch springen.
 */
.zsm-punktestand[aria-busy="true"] .zsm-punktestand__zahl {
  min-width: 4ch;
  border-radius: var(--radius-s);
  background-color: var(--neutral-trans-10);
}

.zsm-punktestand__ausstehend {
  margin: var(--space-xs) 0 0;
  color: var(--zsm-status-freigabe-text, var(--accent-dark));
  font-size: var(--text-xs);
}

/* ── Status-Pillen ───────────────────────────────────────────────────────── */
.zsm-status {
  display: inline-block;
  padding: var(--space-xxs, var(--space-xs)) var(--space-s);
  border-radius: 100vmax;
  background-color: var(--neutral-ultra-light);
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
  font-weight: 700;
}

.zsm-status--freigabe {
  background-color: var(--zsm-status-freigabe-flaeche, var(--accent-ultra-light));
  color: var(--zsm-status-freigabe-text, var(--accent-dark));
}

.zsm-status--freigegeben {
  background-color: var(--zsm-status-freigegeben-flaeche, var(--success-ultra-light));
  color: var(--zsm-status-freigegeben-text, var(--success-dark));
}

.zsm-status--abgelehnt {
  background-color: var(--zsm-status-abgelehnt-flaeche, var(--neutral-ultra-light));
  color: var(--zsm-status-abgelehnt-text, var(--neutral-semi-dark));
}

.zsm-status--warnung {
  background-color: var(--zsm-status-warnung-flaeche, var(--warning-ultra-light));
  color: var(--zsm-status-warnung-text, var(--warning-dark));
}

/* ── Leerzustände ────────────────────────────────────────────────────────── */
.zsm-leer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-m);
  border: 1px dashed var(--neutral-light);
  border-radius: var(--radius-m);
  color: var(--neutral-semi-dark);
}

.zsm-leer__text {
  margin: 0;
}

.zsm-leer__aktion {
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  background-color: var(--action);
  color: var(--white);
  text-decoration: none;
}

/* ── Kontoauszug ─────────────────────────────────────────────────────────── */
.zsm-konto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-l);
  align-items: start;
}

/*
 * Kopfbalken und Zeile sind zwei getrennte Raster — mit `auto`-Spalten stünden die
 * Überschriften deshalb NICHT über ihren Werten. Der Entwurf gibt
 * `1fr 130px 130px 130px` vor; hier als `rem`, weil feste Pixel verboten sind
 * (docs/03) und ein Nutzer mit größerer Schrift sonst abgeschnittene Spalten sieht.
 */
.zsm-auszug__kopf,
.zsm-auszug__zeile {
  display: grid;
  grid-template-columns: 1fr repeat(3, 8rem);
  gap: var(--space-m);
  align-items: baseline;
}

.zsm-auszug__kopf {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--neutral-light);
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-auszug__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zsm-auszug__zeile {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--neutral-trans-10);
}

.zsm-auszug__feld--betrag,
.zsm-auszug__feld--saldo,
.zsm-auszug__feld--datum {
  text-align: right;
}

.zsm-auszug__zeile--gutschrift .zsm-auszug__feld--betrag .zsm-auszug__wert {
  color: var(--zsm-status-gutschrift, var(--success));
}

.zsm-auszug__zeile--abbuchung .zsm-auszug__feld--betrag .zsm-auszug__wert {
  color: var(--zsm-status-abbuchung, var(--action));
}

/*
 * Die Labels der Karten-Ansicht stehen im Markup und werden hier ausgeblendet —
 * nicht per JavaScript nachgeschoben. Auf breiten Schirmen sagt der Kopfbalken,
 * was in welcher Spalte steht; unter `48rem` gibt es keinen Kopfbalken mehr.
 */
.zsm-auszug__label,
.zsm-meine-beitraege__label,
.zsm-warenkorb__positionslabel {
  display: none;
}

.zsm-auszug__vorgang,
.zsm-auszug__begruendung {
  display: block;
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
}

/* ── Kassenbon ───────────────────────────────────────────────────────────── */
.zsm-kassenbon {
  position: sticky;
  top: var(--space-l);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background-color: var(--white);
  box-shadow: var(--box-shadow-s, 0 1px 2px var(--neutral-trans-10));
  font-family: var(--monospace-font-family, monospace);
  text-align: center;
}

.zsm-kassenbon__marke {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-kassenbon__trenner {
  border: 0;
  border-top: 1px dashed var(--neutral-light);
}

.zsm-kassenbon__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: center;
}

.zsm-kassenbon__label {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.zsm-kassenbon__wert {
  font-size: var(--text-l);
  font-weight: 300;
}

.zsm-kassenbon__sterne {
  color: var(--neutral-light);
}

/* ── Beitragskarten und Speisekarte ──────────────────────────────────────── */
.zsm-beitraege__liste,
.zsm-gang__liste,
.zsm-meine-beitraege__liste,
.zsm-freigaben__liste,
.zsm-warenkorb__liste {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zsm-beitraege__liste {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.zsm-beitrag-karte,
.zsm-posten {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background-color: var(--white);
  /* Ruhige Schatten — keine Karte darf schweben (04-frontend Kap. 9). */
  box-shadow: var(--box-shadow-s, 0 1px 2px var(--neutral-trans-10));
}

.zsm-beitrag-karte__titel,
.zsm-posten__titel {
  margin: 0;
}

.zsm-beitrag-karte__zahl,
.zsm-beitrag-karte__spanne {
  font-size: var(--h3);
  font-weight: 300;
}

.zsm-beitrag-karte__einheit,
.zsm-posten__einheit {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-beitrag-karte__varianten {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zsm-beitrag-karte__variante {
  display: flex;
  gap: var(--space-s);
  justify-content: space-between;
}

.zsm-beitrag-karte__hinweis,
.zsm-posten__versand {
  margin: 0;
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
}

.zsm-beitrag-karte__aktion,
.zsm-posten__aktion,
.zsm-sonstiger-beitrag__aktion,
.zsm-anfrage__aktion,
.zsm-warenkorb__einloesen,
.zsm-freigabe__aktion {
  align-self: flex-start;
  padding: var(--space-xs) var(--space-m);
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--action);
  color: var(--white);
  font-family: inherit;
  font-size: var(--text-s);
  text-decoration: none;
  cursor: pointer;
}

.zsm-beitrag-karte__aktion[disabled],
.zsm-posten__aktion[disabled],
.zsm-sonstiger-beitrag__aktion[disabled],
.zsm-warenkorb__einloesen[disabled],
.zsm-freigabe__aktion[disabled] {
  background-color: var(--neutral-light);
  color: var(--neutral-dark);
  cursor: not-allowed;
}

/*
 * Der Punkte-Führungspunkt zwischen Bezeichnung und Preis, wie auf einer echten
 * Karte. Er steht als leeres, `aria-hidden` Element im Markup — ein Screenreader
 * soll keine Punktereihe vorlesen.
 */
.zsm-posten__kopf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-xs);
  align-items: baseline;
}

.zsm-posten__fuehrung {
  border-bottom: 1px dotted var(--neutral-light);
  transform: translateY(-0.2em);
}

.zsm-posten__bild {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-s);
}

/* ── „Ihre Beiträge" ─────────────────────────────────────────────────────────
 * Vier Spalten wie der Kontoauszug, derselbe Kopfbalken, dieselben Labels in der
 * Kartenansicht — 04-frontend Kap. 5 verlangt ausdrücklich EIN Muster für jede
 * mehrspaltige Liste.
 */
.zsm-meine-beitraege__kopf,
.zsm-meine-beitraege__zeile {
  display: grid;
  grid-template-columns: 1fr repeat(3, 8rem);
  gap: var(--space-m);
  align-items: baseline;
}

.zsm-meine-beitraege__kopf {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--neutral-light);
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-meine-beitraege__nummer {
  display: block;
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
}

/* ── Warenkorb, Formularfelder ───────────────────────────────────────────── */
.zsm-warenkorb__position,
.zsm-meine-beitraege__zeile {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--neutral-trans-10);
}

.zsm-warenkorb__position {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-m);
  align-items: center;
}

.zsm-warenkorb__summe {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-m);
  margin: var(--space-m) 0 0;
}

.zsm-warenkorb__summe dt,
.zsm-warenkorb__summe dd {
  margin: 0;
}

.zsm-warenkorb__wert {
  text-align: right;
}

.zsm-warenkorb__hinweise {
  margin: var(--space-s) 0 0;
  padding-inline-start: var(--space-m);
  color: var(--neutral-semi-dark);
  font-size: var(--text-s);
}

.zsm-feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs, var(--space-xs));
  margin-block: var(--space-s);
}

.zsm-feld__label {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-feld__eingabe,
.zsm-feld__auswahl {
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: var(--text-m);
}

.zsm-feld__eingabe[aria-invalid="true"] {
  border-color: var(--danger);
}

.zsm-feld--kurz {
  max-width: 12rem;
}

/* Formularbezogene Fehler: Band oben, Text in der dunklen Gefahrenstufe (04-frontend Kap. 6). */
.zsm-warenkorb__fehler,
.zsm-freigaben__fehler,
.zsm-freigabe__rueckmeldung[data-zsm-fehler] {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background-color: var(--danger-ultra-light);
  color: var(--danger-dark);
}

/* ── Freigabe-Postfach ───────────────────────────────────────────────────── */
.zsm-freigaben__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block: var(--space-m);
}

.zsm-freigaben__filter-knopf {
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--neutral-light);
  border-radius: 100vmax;
  background-color: transparent;
  font-family: inherit;
  font-size: var(--text-s);
  cursor: pointer;
}

.zsm-freigaben__filter-knopf--aktiv {
  border-color: var(--action);
  background-color: var(--primary-ultra-light);
  color: var(--primary-dark);
}

.zsm-freigabe {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background-color: var(--white);
  box-shadow: var(--box-shadow-s, 0 1px 2px var(--neutral-trans-10));
}

/* Überfällige Vorgänge tragen eine Markierung in der Warnfarbe und sortieren nach oben. */
.zsm-freigabe--ueberfaellig {
  border-inline-start: 4px solid var(--warning);
}

/*
 * Eine entschiedene Zeile verschwindet nicht — sie tritt zurück. Verschwände sie,
 * wüsste der Freigeber nicht, ob sein Klick angekommen ist, und der nächste Filter-
 * wechsel entfernt sie ohnehin.
 */
.zsm-freigabe--erledigt {
  border-inline-start-color: var(--neutral-light);
  background-color: var(--neutral-ultra-light);
}

.zsm-freigabe--erledigt .zsm-freigabe__aktionen,
.zsm-freigabe--erledigt .zsm-freigabe__begruendung,
.zsm-freigabe--erledigt .zsm-freigabe__hinweis,
.zsm-freigabe--erledigt .zsm-freigabe__teilgutschrift {
  display: none;
}

.zsm-freigabe__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-m);
}

.zsm-freigabe__label {
  display: block;
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-freigabe__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.zsm-freigabe__aktion--nein,
.zsm-freigabe__aktion--ergebnislos {
  background-color: var(--neutral-ultra-light);
  color: var(--neutral-dark);
}

.zsm-freigabe__teilgutschrift,
.zsm-freigabe__hinweis,
.zsm-freigabe__nutzdaten {
  margin: 0;
  color: var(--neutral-semi-dark);
  font-size: var(--text-xs);
}

/* ── Bestätigungsseite ───────────────────────────────────────────────────── */
.zsm-bestaetigung {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-l);
  text-align: center;
}

/*
 * Das Logo ist unverlinkt und bewusst klein: die Seite hat keine Navigation, und
 * der Absender soll erkennbar sein, ohne die Frage zu überstrahlen.
 */
.zsm-bestaetigung__logo {
  align-self: center;
  max-width: min(100%, 12rem);
  height: auto;
}

.zsm-bestaetigung__marke {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zsm-bestaetigung__formular {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}

.zsm-bestaetigung__aktion {
  padding: var(--space-s) var(--space-l);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-s);
  background-color: var(--white);
  font-family: inherit;
  font-size: var(--text-m);
  cursor: pointer;
}

.zsm-bestaetigung__aktion--ja {
  border-color: transparent;
  background-color: var(--action);
  color: var(--white);
}

.zsm-bestaetigung__fussnote {
  color: var(--neutral-semi-dark);
  font-size: var(--text-s);
}

/* ── Karten statt Spalten unter 48rem ────────────────────────────────────────
 * Waagerecht scrollen ist keine Option: der Saldo wäre die Spalte ganz rechts und
 * damit unsichtbar — bei einem Kontoauszug genau die wichtigste Information
 * (04-frontend Kap. 5). Spalten weglassen ist keine Option: Spec 7.3.1 fordert alle
 * vier. Also eine Karte pro Buchung, und dasselbe Muster für JEDE mehrspaltige
 * Liste.
 */
@media (max-width: 48rem) {
  .zsm-konto {
    grid-template-columns: 1fr;
  }

  /* Kein Kopfbalken in der Kartenansicht — die Labels stehen in der Karte. */
  .zsm-auszug__kopf,
  .zsm-meine-beitraege__kopf {
    display: none;
  }

  .zsm-auszug__zeile,
  .zsm-warenkorb__position,
  .zsm-meine-beitraege__zeile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs) var(--space-s);
    padding: var(--space-m);
    border: 1px solid var(--neutral-trans-10);
    border-radius: var(--radius-m);
    margin-block-end: var(--space-s);
  }

  /*
   * Der Kopf einer Freigabe-Zeile bekommt KEINEN eigenen Rahmen: `.zsm-freigabe`
   * ist bereits die Karte, und eine Karte in einer Karte liest sich wie ein
   * Darstellungsfehler.
   */
  .zsm-freigabe__kopf {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs) var(--space-s);
  }

  .zsm-auszug__feld--name,
  .zsm-warenkorb__bezeichnung,
  .zsm-meine-beitraege__feld--bezeichnung,
  .zsm-freigabe__feld--beitrag {
    grid-column: 1 / -1;
  }

  .zsm-auszug__label,
  .zsm-meine-beitraege__label,
  .zsm-warenkorb__positionslabel {
    display: block;
    color: var(--neutral-semi-dark);
    font-size: var(--text-xs);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .zsm-auszug__feld--datum,
  .zsm-auszug__feld--betrag,
  .zsm-auszug__feld--saldo {
    text-align: start;
  }

  /* Der Kassenbon ist eine Zusammenfassung, keine Navigation: kein sticky, unter die Liste. */
  .zsm-kassenbon {
    position: static;
    order: 2;
  }
}