/*
  Nachbau der Komponenten — 1:1 aus dem Figma-Frame ausgelesen.

  Alle Werte stammen aus `get_design_context` auf
  0.0 Landingpage [Ö] · Desktop 1728 (1047:1191) und · Mobil 390 (1101:12614).
  Nichts hier ist geschätzt. Wo Desktop und Mobil sich unterscheiden, stehen
  beide Werte; Mikro ist die Grundlage, Ultra kommt per Media Query darüber.

  Breakpoints: Mikro < 600 · Ultra ≥ 1600 (siehe MESSWERTE.md).
*/

/* ============================================================ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stzh-color-white);
  color: var(--stzh-color-primary70);
  font-family: "HelveticaNeueLTW01_55Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img { display: block; max-width: 100%; }

/* Inhalt: Mikro pad 32/20/64/20 gap 64 · Ultra pad 48/190/96/190 gap 64 */
.inhalt {
  display: flex; flex-direction: column; gap: 64px;
  padding: 32px 20px 64px;
}
@media (min-width: 1600px) {
  .inhalt { padding: 48px 190px 96px; }
}

/* ============================================================ Kopfbereich */
/*
  Mikro: Kopfzeile 66 (Fläche #0f05a0, weisse Zone 308 mit pl 20, Logozone 288 pt 14)
         Navigationsleiste 56, Fläche #c5efff, pad 16, gap 16
  Ultra: Logo-Section 135 (Fläche #0f05a0, weisse Zone pl 190, Logozone 553 pt 28)
         App-Navigation 64, Fläche #f4f7f9
*/

.kopfbereich { display: flex; flex-direction: column; }

.logostreifen { background: var(--stzh-color-primary70); display: flex; }
.logostreifen__weisse-zone {
  background: var(--stzh-color-white);
  width: 308px; padding-left: 20px;
  display: flex; flex-direction: column;
}
.logozone { height: 66px; padding-top: 14px; overflow: hidden; }
.logozone__logo { height: 29px; width: auto; }

@media (min-width: 1600px) {
  .logostreifen__weisse-zone { width: 743px; padding-left: 190px; }
  .logozone { height: 135px; width: 553px; padding-top: 28px; }
  /*
    60 px, nicht 83: Der Logo-Rahmen im Frame misst 468 × 83, die Vektoren darin
    füllen aber nur 321 × 60 — links oben ausgerichtet, der Rest ist leer.
    Unser SVG ist auf den sichtbaren Inhalt beschnitten.
  */
  .logozone__logo { height: 60px; }
}

/* Navigationsleiste — Mikro: Burger und Bereichstitel auf Hellblau */
.navleiste {
  height: 56px; background: #c5efff;
  display: flex; align-items: center; gap: 16px; padding: 16px;
}
.navleiste__burger {
  width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.navleiste__burger span {
  display: block; width: 20px; height: 2px; background: var(--stzh-color-primary70);
}
.navleiste__bereich {
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 26px; color: var(--stzh-color-primary70);
}
/* Ultra: graue App-Navigation, Konto rechts */
.navleiste__konto { display: none; }
@media (min-width: 1600px) {
  .navleiste {
    height: 64px; background: var(--stzh-color-coolgrey10);
    padding: 0 190px; gap: 8px; justify-content: flex-end;
  }
  .navleiste__burger, .navleiste__bereich { display: none; }
  .navleiste__konto { display: flex; align-items: center; gap: 8px; }
}
.navleiste__konto-text {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-grey90);
  text-decoration: none; white-space: nowrap;
}
.navleiste__konto-icon { width: 20px; height: 20px; color: var(--stzh-color-black); }
/* Angemeldet steht der Name in 85 Heavy, abgemeldet «Anmelden/Registrieren» in 65 Medium */
.navleiste__konto-text--angemeldet {
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============================================================ Typografie */
/* Titel: Mikro 40/48 · Ultra 90/108, tracking −1.8px, Farbe #0a8df6 */
.seitenkopf { display: flex; flex-direction: column; gap: 24px; }
.seitenkopf__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px; line-height: 48px; letter-spacing: -0.8px;
  color: var(--stzh-color-cobaltblue50);
}
/* Lead: Mikro 32/41.6 · Ultra 56/67.2, tracking −1.12px, Farbe #0f05a0 */
.seitenkopf__lead {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px; line-height: 41.6px; letter-spacing: -0.32px;
  color: var(--stzh-color-primary70);
}
/* Einleitung: 18/27, 65 Medium, SCHWARZ, Ultra auf 860 px begrenzt */
.seitenkopf__einleitung {
  margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 27px; color: var(--stzh-color-black);
}
@media (min-width: 1600px) {
  .seitenkopf__titel { font-size: 90px; line-height: 108px; letter-spacing: -1.8px; }
  .seitenkopf__lead { font-size: 56px; line-height: 67.2px; letter-spacing: -1.12px; }
  .seitenkopf__einleitung { width: 860px; }
}

/* Abschnittstitel: Mikro 20/24 · Ultra 32/38, tracking −0.3px */
.abschnitt { display: flex; flex-direction: column; gap: 24px; }
.abschnitt__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; color: var(--stzh-color-primary70);
}
@media (min-width: 1600px) {
  .abschnitt__titel { font-size: 32px; line-height: 38px; letter-spacing: -0.3px; }
}

/* ============================================================ Filterzeile */
/* Mikro: VERTICAL gap 16 · Ultra: HORIZONTAL gap 16, zentriert */
.filterzeile { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1600px) {
  .filterzeile { flex-direction: row; align-items: center; }
}

/* Ansichtswechsel: aktiv 56×56 auf #0f05a0 mit weissem Icon,
   inaktiv weiss mit 2px Rand #7c7c7c */
.ansichtswechsel { display: flex; }
.ansichtswechsel__knopf {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--stzh-color-white);
  box-shadow: inset 0 0 0 2px var(--stzh-color-grey70);
}
.ansichtswechsel__knopf--aktiv {
  background: var(--stzh-color-primary70); box-shadow: none;
}
.ansichtswechsel__knopf .icon { width: 24px; height: 24px; color: var(--stzh-color-primary70); }
.ansichtswechsel__knopf--aktiv .icon { color: var(--stzh-color-white); }

/* Suche: 300 px, weiss, Icon in 32er-Box mit 12 px Polster, Text #606060 */
.suche {
  display: flex; align-items: center; background: var(--stzh-color-white);
  width: 100%;
  /* Rahmen wie bei Dropdown und Datumsfeld — Stand Filterkonzept (1119:43392) */
  box-shadow: inset 0 0 0 2px var(--stzh-color-grey70);
}
@media (min-width: 1600px) { .suche { width: 300px; } }
.suche__knopf {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; border: 0; background: transparent; cursor: pointer;
}
.suche__knopf span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.suche__knopf .icon { width: 24px; height: 24px; color: var(--stzh-color-grey80); }
.suche__eingabe {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-grey80);
}
.suche__eingabe::placeholder { color: var(--stzh-color-grey80); opacity: 1; }

/* ============================================================ Chip · Filter */
/* Höhe 40, Polster 0/16, Radius 20, Schrift 14/21 · gewählt: #0f05a0 mit
   weisser Schrift und Schliessen-Icon 20 px */
.chipgruppe { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--stzh-color-secondary30);
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 21px; color: var(--stzh-color-primary70);
  white-space: nowrap;
}
.chip--gewaehlt { background: var(--stzh-color-primary70); color: var(--stzh-color-white); }
/* Als Verweis genutzt (Bereichswechsel der Stammdaten) ohne Unterstreichung */
a.chip { text-decoration: none; }
.chip__schliessen { width: 20px; height: 20px; }

/* ============================================================ Angebotskarte */
/* Fläche #f4f4f4, 313 × 454 fix, Polster 16, gap 12, Bild 158 */
.angebotsraster { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1600px) {
  .angebotsraster { flex-direction: row; flex-wrap: wrap; gap: 32px; }
}
.angebotskarte {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--stzh-color-grey10);
}
@media (min-width: 1600px) {
  .angebotskarte { width: 313px; height: 454px; }
}
.angebotskarte__bild {
  height: 158px; width: 100%; object-fit: cover;
  background: var(--stzh-color-grey20);
}
.angebotskarte__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 25px; color: var(--stzh-color-primary70);
}
@media (min-width: 1600px) { .angebotskarte__titel { height: 50px; overflow: hidden; } }
/* Termin: 14/22 Heavy schwarz, tracking 0.14 */
.angebotskarte__termin {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 22px; letter-spacing: 0.14px; color: var(--stzh-color-black);
}
/* Standort: 14/22 Roman schwarz, füllt den Rest */
.angebotskarte__standort {
  margin: 0; flex: 1;
  font-family: "HelveticaNeueLTW01_55Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 22px; letter-spacing: 0.14px; color: var(--stzh-color-black);
}
.angebotskarte__kurztext {
  margin: 0;
  font-family: "HelveticaNeueLTW01_55Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 22px; color: var(--stzh-color-black);
}

/* Aktion in der Karte: Secondary-Button, Polster 10/20, Text 16/24 Heavy */
.aktion-secondary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px 20px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--stzh-color-secondary30);
}
.aktion-secondary__label {
  display: flex; align-items: center; justify-content: center; height: 24px;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-primary70);
  white-space: nowrap;
}
.aktion-secondary__icon { width: 24px; height: 24px; margin-left: 8px; color: var(--stzh-color-primary70); }

/* ============================================================ FAQ */
/* Eintrag: 8 px Abstand oben, Fläche #88cfff, Polster 24/32,
   Text 18/27 Medium, Icon plus-add 32 px */
.fragenliste { display: flex; flex-direction: column; }
.frage { padding-top: 8px; }
.frage__box {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 0 32px; border: 0; cursor: pointer; text-align: start;
  background: var(--stzh-color-secondary30);
}
.frage__titel {
  flex: 1; min-width: 0; padding: 24px 0; margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 27px; color: var(--stzh-color-primary70);
}
.frage__icon { width: 32px; height: 32px; color: var(--stzh-color-primary70); }

/* ============================================================ Fussleiste */
/* Fläche #070030, Polster 24/126/32, links Copyright 16/24 weiss,
   rechts Links 14/21 in Weiss 70 %, gap 32, Zeilenhöhe 44 */
.fussleiste { background: var(--stzh-color-footer-color2, #070030); }
.fussleiste__inner {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px 32px;
}
.fussleiste__zeile { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.fussleiste__copyright {
  display: flex; align-items: center; height: 44px; margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-white);
  white-space: nowrap;
}
.fussleiste__links { display: flex; align-items: center; justify-content: flex-end; gap: 32px; flex-wrap: wrap; }
.fussleiste__link {
  display: flex; align-items: center; height: 44px; text-decoration: none;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 21px; color: rgb(255 255 255 / 0.7);
  white-space: nowrap;
}
.fussleiste__link:hover { color: var(--stzh-color-white); }
@media (min-width: 1600px) {
  .fussleiste__inner { padding: 24px 126px 32px; }
  .fussleiste__zeile { flex-direction: row; }
}

/* ==================================== Anwendungsseiten (angemeldet) [F/K] */
/*
  Quelle: 2.0 Angebote – Liste [F] · Desktop 1728 (1065:2488) und · Mobil 390.
  Alle Werte 1:1 aus dem Frame ausgelesen — Farben, Masse, Schriftschnitte,
  Icon-Grössen und Icon-Farben.

  Inhalt: Mikro pad 32/20/64/20 gap 24 · Ultra pad 48/190/64/190 gap 32.
  (Die öffentlichen Seiten haben unten 96 und dazwischen 64 — darum eine
  eigene Ausprägung statt einer Änderung an `.inhalt`.)
*/
.inhalt--app { gap: 24px; }
@media (min-width: 1600px) {
  .inhalt--app { padding: 48px 190px 64px; gap: 32px; }
}

/* --- App-Navigation: Menüpunkte, nur Ultra ------------------------------ */
/* Menü beginnt bei x 190, Abstand 48; Eintrag Icon 24 + Label 16/24, gap 8.
   Inaktiv 65 Medium #404040, aktiv 85 Heavy #0f05a0 — Icon in Textfarbe. */
.navleiste__menue { display: none; }
@media (min-width: 1600px) {
  .navleiste__menue {
    display: flex; align-items: center; gap: 48px;
    margin: 0 auto 0 0; padding: 0; list-style: none;
  }
}
.navleiste__eintrag {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-grey90);
  white-space: nowrap;
}
.navleiste__eintrag .icon { width: 24px; height: 24px; color: currentColor; }
.navleiste__eintrag--aktiv {
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--stzh-color-primary70);
}

/* --- Seitenzeile: Titel und Hauptaktion --------------------------------- */
/*
  Ein Muster für alle Übersichten. Quelle ist der Muster-Frame «Inhalt»
  (1137:60453): Titel und Aktion stehen in **einer** Zeile, 44 hoch — so hoch
  wie die Aktion —, Abstand Mikro 24 · Ultra 16, der Titel nimmt den Rest.

  **Der Seitentitel ist immer Primary 70**, auf beiden Breakpoints:
  Mikro 24/31 Heavy LS −0.24 · Ultra 32/38 Heavy LS −0.3.

  **Die Aktion «Neu …» führt nur die Rolle Koordination [K].** In der Rolle
  Freiwillige [F] steht in der Zeile nur der Titel. Einzelne Frames zeigen es
  anders (2.0 hat auf Ultra eine Aktion, 3.0 und 3.2 eine unsichtbare mit
  Deckkraft 0) — es gilt die Regel, nicht der einzelne Frame.
*/
.seitenzeile { display: flex; align-items: center; gap: 24px; min-height: 44px; }
.seitentitel {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px; line-height: 31px; letter-spacing: -0.24px;
  color: var(--stzh-color-primary70);
}
@media (min-width: 1600px) {
  .seitenzeile { gap: 16px; }
  .seitentitel { font-size: 32px; line-height: 38px; letter-spacing: -0.3px; }
}

/* Primary-Button, kleine Grösse: 44 hoch, Polster 10/20, Label 16/24 Heavy */
.aktion-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 10px 20px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--stzh-color-primary70);
}
.aktion-primary__label {
  display: flex; align-items: center; height: 24px;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-white);
  white-space: nowrap;
}
.aktion-primary .icon { width: 24px; height: 24px; margin-right: 8px; color: var(--stzh-color-white); }

/* --- Filterleiste: ein Muster für alle Übersichten --------------------- */
/*
  Quelle: 2.0 Angebote – Liste [F] für Ultra und der Muster-Frame «Inhalt»
  (1137:60453) für Mikro. **Diese Leiste gilt für jede Tabellen- und
  Rasterübersicht** — auch dort, wo ein Frame eine andere Zusammenstellung
  zeigt (3.2 etwa führt im File nur «Filter», Status, Standort, Suche und
  Sortierung in einer Zeile).

  Ultra: Zeile 1 (56) Ansichtswechsel 112 · Suche 300 · «Filter einklappen»
         rechts; Zeilenabstand 12; Zeile 2 (56) drei Auswahlfelder 200 und der
         Zeitraum «Gültig von» / «bis» mit Feldern 170.
  Mikro: eine Spalte, Abstand 16 — «Filter einklappen» rechts, Suche, die drei
         Auswahlfelder über die ganze Breite, und die beiden Datumsfelder
         nebeneinander (je halbe Breite, Beschriftung darüber). Der
         Ansichtswechsel entfällt.
  Die Sortierung ist auf beiden Breakpoints eine **eigene Zeile im Inhalt**.
  Die Zeilen lösen sich auf Mikro mit `display: contents` auf, damit `order`
  die Reihenfolge des Muster-Frames herstellt.
*/
.filterleiste { display: flex; flex-direction: column; gap: 12px; }
.filterleiste__filter { display: flex; flex-direction: column; gap: 16px; }
.filterreihe { display: contents; }
@media (min-width: 1600px) {
  .filterleiste__filter { display: contents; }
  .filterreihe { display: flex; flex-direction: row; align-items: center; gap: 16px; }
}

/* Reihenfolge auf Mikro */
.filterknopf-huelle { order: 1; }
.suche { order: 2; }
.feldgruppe--dropdown { order: 3; }
.zeitraum { order: 4; }
/* Auf Ultra ordnen die Zeilen selbst */
@media (min-width: 1600px) {
  .filterknopf-huelle, .suche, .feldgruppe--dropdown, .zeitraum { order: 0; }
}

/* Feld (Dropdown, Datum): 56 hoch, weiss, 2 px Rand #7c7c7c, Einzug 16,
   Wert 16/24 Medium #606060, Knopf 56 × 56 mit Icon 24 */
.feld {
  display: flex; align-items: center; width: 100%; height: 56px;
  padding-left: 16px; background: var(--stzh-color-white);
  box-shadow: inset 0 0 0 2px var(--stzh-color-grey70);
}
.feld__wert {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-grey80);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feld__wert::placeholder { color: var(--stzh-color-black); opacity: 1; }
.feld__knopf {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 12px; border: 0; background: transparent; cursor: pointer;
}
.feld__knopf .icon { width: 24px; height: 24px; color: var(--stzh-color-primary70); }
/* Kalender-Icon im Datumsfeld ist grau, nicht blau — und die Schaltfläche
   steht auf beiden Breakpoints (Muster-Frame 1137:60453). */
.feld__knopf--datum { display: flex; }
.feld__knopf--datum .icon { color: var(--stzh-color-grey80); }

/* Beschriftung über dem Feld (Mikro) bzw. daneben (Ultra): 14/21 Heavy #0f05a0 */
.feldgruppe { display: flex; flex-direction: column; gap: 2px; }
.feldgruppe__label {
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 21px; color: var(--stzh-color-primary70);
}
@media (min-width: 1600px) {
  .feldgruppe--dropdown { width: 200px; }
  .feldgruppe--datum { flex-direction: row; align-items: center; gap: 16px; }
  .feldgruppe--datum .feldgruppe__label { white-space: nowrap; }
  .feldgruppe--datum .feld { width: 170px; }
}
/* Zeitraum: Mikro die beiden Datumsfelder nebeneinander (je halbe Breite,
   Beschriftung darüber), Ultra eine Zeile mit «Gültig von», Feld, «bis», Feld.
   «bis» als eigenes Wort führt nur Ultra; auf Mikro trägt das zweite Feld die
   Beschriftung «Bis» über sich. */
.zeitraum { display: flex; align-items: flex-end; gap: 16px; }
.zeitraum .feldgruppe--datum { flex: 1 1 0; min-width: 0; }
.zeitraum__bis { display: none; }
@media (min-width: 1600px) {
  .zeitraum { align-items: center; }
  .zeitraum .feldgruppe--datum { flex: 0 0 auto; }
  .feldgruppe--bis .feldgruppe__label { display: none; }
  .zeitraum__bis {
    display: inline;
    font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; line-height: 21px; color: var(--stzh-color-primary70);
  }
}

/* Textknopf «Filter einklappen»: Polster 4 oben/unten, Icons 24 in #0f05a0.
   Steht auf beiden Breakpoints rechts (Muster-Frame 1137:60453). */
.filterknopf-huelle { display: flex; justify-content: flex-end; margin-left: auto; }
.textknopf {
  display: inline-flex; align-items: center; padding: 4px 0;
  border: 0; background: transparent; cursor: pointer;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-primary70);
  white-space: nowrap;
}
.textknopf .icon { width: 24px; height: 24px; color: currentColor; }
.textknopf__icon-links { margin-right: 8px; }
.textknopf__icon-rechts { margin-left: 8px; }

/* Dropdown Chip «Angebotsarten»: 40 hoch, Radius 20, Fläche #88cfff,
   Label 14/21 Medium #0f05a0, Knopf 40 × 40 mit plus 16 */
.angebotsarten { display: none; }
@media (min-width: 1600px) { .angebotsarten { display: flex; align-items: center; padding-right: 24px; } }
.dropchip {
  display: inline-flex; align-items: center; gap: 16px;
  height: 40px; padding: 0 0 0 16px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--stzh-color-secondary30);
}
.dropchip__label {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 21px; color: var(--stzh-color-primary70);
  white-space: nowrap;
}
.dropchip__knopf {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 0 20px 20px 0;
}
.dropchip .icon { width: 16px; height: 16px; color: var(--stzh-color-primary70); }

/* Sortierung: eigene Zeile im Inhalt — Mikro über die ganze Breite,
   Ultra rechtsbündig mit 320 px. */
.sortierzeile { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
@media (min-width: 1600px) { .sortierzeile .feld { width: 320px; } }

/* --- Angebotskarte in der Anwendung ------------------------------------- */
/* Wie die öffentliche Karte, aber 445 statt 454 hoch, mit Helferpool-Badge,
   Trennlinie und Belegung. */
/* 445 hoch in beiden Fassungen; der Titel belegt fix zwei Zeilen (50) */
.angebotskarte--app { height: 445px; }
.angebotskarte--app .angebotskarte__titel { height: 50px; overflow: hidden; }
.angebotskarte__bildbox { position: relative; height: 158px; width: 100%; overflow: hidden; }
.angebotskarte__bildbox .angebotskarte__bild { height: 158px; }
/* Badge: Mikro 20 hoch, Ultra 24; Fläche #06751e, Radius 12, Icon 16 weiss */
.badge-helferpool {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 12px;
  background: var(--stzh-color-success70); color: var(--stzh-color-white);
}
@media (min-width: 1600px) { .badge-helferpool { height: 24px; } }
.badge-helferpool__label {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 20px; white-space: nowrap;
}
.badge-helferpool .icon { width: 16px; height: 16px; color: currentColor; }

.angebotskarte__art {
  margin: 0; flex: 1;
  font-family: "HelveticaNeueLTW01_55Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 22px; letter-spacing: 0.14px; color: var(--stzh-color-black);
}
.trennlinie { height: 1px; width: 100%; background: var(--stzh-color-grey20); }

/* Belegung: Status links (rot #a31413 / grün #06751e), Plätze rechts */
.belegung { display: flex; align-items: center; justify-content: space-between; }
.belegung__status {
  margin: 0;
  font-family: "HelveticaNeueLTW01_55Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 22px; letter-spacing: 0.14px;
}
.belegung__status--offen { color: var(--stzh-color-error70); }
.belegung__status--voll { color: var(--stzh-color-success70); }
.belegung__plaetze { display: flex; align-items: center; gap: 8px; }
.belegung__punkt { width: 8px; height: 8px; border-radius: 50%; }
.belegung__punkt--offen { background: var(--stzh-color-error70); }
.belegung__punkt--voll { background: var(--stzh-color-success70); }
.belegung__anzahl {
  margin: 0;
  font-family: "HelveticaNeueLTW01_55Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 22px; letter-spacing: 0.14px; color: var(--stzh-color-black);
}

/* --- Was nur in einer Fassung vorkommt ---------------------------------- */
/* Der Ansichtswechsel steht nur auf Ultra — auf Mikro führt ihn kein Frame. */
.ansichtswechsel--ab-ultra { display: none; }
@media (min-width: 1600px) { .ansichtswechsel--ab-ultra { display: flex; } }

/* ================================================== Filterkonzept (Zustände) */
/*
  Quelle: Frame «Filterconcept» (1119:43392). Vier Zustände der Filterleiste.
  Gegenüber 2.0 Angebote unterscheidet sich: die Sortierung steht in der ersten
  Zeile neben der Suche, das Suchfeld hat einen Rahmen, und «Alle Filter
  zurücksetzten» ist ein roter Textknopf mit Schliessen-Icon.
*/
.zustand { display: flex; flex-direction: column; gap: 12px; }
.zustand__zeile { display: flex; align-items: center; gap: 16px; }
.zustand__zeile--knopf { gap: 10px; height: 44px; }
.zustand .suche { width: 300px; flex: 0 0 auto; }
.zustand .sortierung { width: 320px; flex: 0 0 auto; }
.zustand .feldgruppe--dropdown { display: flex; width: 200px; }
.zustand .feldgruppe--datum { flex-direction: row; align-items: center; gap: 16px; }
.zustand .feldgruppe--datum .feld { width: 170px; }
.zustand .feld__knopf--datum { display: flex; }
.zustand .feldgruppe--datum .feld { padding-right: 0; }
.zustand__arten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 24px; }

/* Roter Textknopf: «Alle Filter zurücksetzten», Icon close 24 */
.textknopf--rot { color: var(--stzh-color-red60, #dc030e); }


/* ============================================ Seite 2.2 Angebote [K] */
/*
  Quelle: 2.2 Angebote – Liste [K] · Desktop 1728 (1071:3304) und · Mobil 390
  (1102:11833). Die Tabelle kommt aus der Bibliothek: `assets/stzh-table.css`
  ist die unveränderte Datei aus `@oiz/stzh-components` — Zellpolster 12/16,
  Zebra ab der zweiten Zeile in Grau 10, Kopfzeile in 85 Heavy und Primary 80,
  Umschaltung auf die Listenfassung unter 1260 px. Wir schreiben nur das
  Markup, das Aussehen bringt die Komponente mit.
*/

/* Spaltenbreiten aus dem Frame (Angebot 300 · Mandant 200 · Standort 230 ·
   Start 110 · Ende 110 · Stunden 120 · Status 150 · Menü 40) */
/* Die Kopfzeile bleibt einzeilig (im Frame 48 hoch); die Spaltenbreiten aus
   dem Frame wirken als Vorschlag, damit «Rapportierte H» nicht umbricht. */
.angebotstabelle th { white-space: nowrap; }
.angebotstabelle .spalte-menue { text-align: left; }
/* Der Chip sitzt oben in der Zelle wie der übrige Zelleninhalt */
.stzh-table .chip-tag { vertical-align: top; }

/* Chip · Tag (DS): 24 hoch auf Ultra, 20 auf Mikro, Radius 12, Icon 16,
   Text 13/20 in Weiss. Typ Default = Grau 90, Typ Erfolg = Success 70. */
.chip-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 12px;
  color: var(--stzh-color-white); white-space: nowrap;
}
@media (min-width: 1600px) { .chip-tag { height: 24px; } }
.chip-tag__label {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 20px;
}
.chip-tag .icon { width: 16px; height: 16px; color: currentColor; }
.chip-tag--default { background: var(--stzh-color-grey90); }
.chip-tag--erfolg { background: var(--stzh-color-success70); }

/* Listenfassung der Tabelle (Mikro): je Datensatz ein Block, Polster 12,
   Abstand 4, jede zweite Zeile in Coolgrey 10 — so steht es im Frame. */
.tabellenliste__zeile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px;
}
.tabellenliste__zeile:nth-child(even) { background: var(--stzh-color-coolgrey10); }
.tabellenliste__wert {
  margin: 0; align-self: stretch;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-black);
}

/* ------------------------------------------------- Status (Bibliothek) */
/*
  `assets/stzh-status.css` ist die unveränderte Datei aus dem Paket. Sie ist
  allerdings für das Shadow DOM geschrieben: die Farbe je Typ steht in
  `:host[type=…]`, was im Light DOM nicht greift. Die vier Zeilen unten sind
  genau diese Regeln, auf das Element übertragen — Werte unverändert.
  default = Grundfarbe · success = Success 70 · warning = Warning 90 ·
  error = Error 70 · info = Midnightblue 70.
*/
stzh-status { display: inline-block; --bar-height: 0.25rem; --color: var(--stzh-base-color); --min-width: none; }
stzh-status[type="success"] { --color: var(--stzh-color-success70); }
stzh-status[type="warning"] { --color: var(--stzh-color-warning90); }
stzh-status[type="error"] { --color: var(--stzh-color-error70); }
stzh-status[type="info"] { --color: var(--stzh-color-midnightblue70); }

/* ======================================= Seite 2.1 Angebot – Detail [F] */
/*
  Quelle: 2.1 Angebot – Detail [F] · Desktop 1728 (1067:2960) und · Mobil 390
  (1102:11304), dazu der Baukasten «Pool-Status» (1131:55299) mit den drei
  Ausprägungen Default, Pendent und Member. Alle Werte 1:1 aus
  `get_design_context`; Mikro ist die Grundlage, Ultra kommt per Media Query.
*/

/* --- Breadcrumb (DS) ---------------------------------------------------- */
/* home 24, danach je angle-right 20 + Label 16/24 in Primary 70; der letzte
   Eintrag in 85 Heavy. Polster Mikro 20/20/16 · Ultra 40/190/32.
   Auf Mikro steht der Breadcrumb im Frame ausserhalb des Inhalts, auf Ultra
   als erster Block darin — darum trägt er sein Polster selbst. */
.brotkrumen { background: var(--stzh-color-white); padding: 20px 20px 16px; }
.brotkrumen__pfad { display: flex; align-items: center; min-width: 0; }
.brotkrumen__start { display: flex; align-items: center; padding-right: 4px; color: var(--stzh-color-primary70); }
.brotkrumen__start .icon { width: 24px; height: 24px; }
.brotkrumen__eintrag {
  display: flex; align-items: center; gap: 4px; text-decoration: none;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-primary70);
  white-space: nowrap;
}
.brotkrumen__eintrag .icon { width: 20px; height: 20px; color: currentColor; }
.brotkrumen__eintrag--aktiv {
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-width: 0;
}
/* Mikro: der Pfad bleibt einzeilig (60 px hoch wie im Frame), der aktive
   Eintrag wird gekürzt. Der Mobil-Frame belegt dazu nichts — er trägt dort
   noch den Vorgabetext «Level aktiv». */
.brotkrumen__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Stufe «Angebote» führt nur der Desktop-Frame */
.brotkrumen__eintrag--ab-ultra { display: none; }
@media (min-width: 1600px) {
  .brotkrumen { padding: 40px 190px 32px; }
  .brotkrumen__eintrag--ab-ultra { display: flex; }
}

/* --- Inhalt der Detailseite --------------------------------------------- */
/* Mikro: Polster 24/20/64, Abstand 24 (Titel → Hauptspalte).
   Ultra: Polster 20/190/64 — die 20 oben sind der Abstand des Inhalts zum
   Breadcrumb-Block —, Abstand 32 (Titelzeile → Zweispalter). */
.inhalt--detail { gap: 24px; padding: 24px 20px 64px; }
@media (min-width: 1600px) {
  .inhalt--detail { gap: 32px; padding: 20px 190px 64px; }
}

/* --- Aufbau: Mikro eine Spalte, Ultra 968 + 348 ------------------------- */
/* Mikro: Angaben · Pool-Status/Infobox · Einsätze, Abstand 48; die Seitenspalte
   selbst hat innen 24. Dass sie dort zwischen den Angaben und den Einsätzen
   steht, macht `display: contents` an der Hauptspalte plus `order` möglich —
   dieselbe Lösung wie bei der Filterleiste.
   Ultra: Hauptspalte 968 (Abstand 56) links, Seitenspalte 348 (Abstand 20)
   rechts, Spaltenabstand 32 — 968 + 32 + 348 = 1348. */
.detailraster { display: flex; flex-direction: column; gap: 48px; }
.detailraster__hauptspalte { display: contents; }
.detailraster__spalte { display: flex; flex-direction: column; gap: 24px; order: 1; }
.detailraster__einsaetze { order: 2; }
@media (min-width: 1600px) {
  .detailraster { flex-direction: row; align-items: flex-start; gap: 32px; }
  .detailraster__hauptspalte { display: flex; flex-direction: column; gap: 56px; width: 968px; }
  .detailraster__spalte { width: 348px; order: 0; gap: 20px; }
}

/* --- Angaben ------------------------------------------------------------ */
/* Überschrift 18/22 Heavy Primary 70, Wert 16/24 Medium schwarz.
   Abstand Überschrift → Wert: Mikro 4 · Ultra 8 — nicht ableitbar, gemessen.
   Blockabstand Mikro 24 in einer Spalte · Ultra 20 mit zwei Angaben je Zeile. */
.angaben { display: flex; flex-direction: column; gap: 24px; }
.angabenzeile { display: flex; flex-direction: column; gap: 24px; }
.angabe { display: flex; flex-direction: column; gap: 4px; }
.angabe__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 22px; letter-spacing: -0.04px;
  color: var(--stzh-color-primary70);
}
.angabe__wert {
  margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-black);
}
/* «Start: 21.04.2026   Ende: 17.03.2027» steht im Frame als eine Zeile */
.angabe__wert--zeitraum { white-space: pre-wrap; }
@media (min-width: 1600px) {
  .angaben { gap: 20px; }
  .angabenzeile { flex-direction: row; gap: 20px; }
  .angabenzeile > * { flex: 1 1 0; min-width: 0; }
  .angabe { gap: 8px; }
}

/* Chip · Tag, Ausprägung Neutral: Fläche Grau 20, Text Grau 90 — und auf
   beiden Breakpoints 24 hoch, anders als die farbigen Fassungen. */
.chip-tag--neutral {
  height: 24px;
  background: var(--stzh-color-grey20);
  color: var(--stzh-color-grey90);
}
/* Ausprägung Warnung: Fläche Warning 50, Text Warning 90 (Pool-Status Pendent) */
.chip-tag--warnung {
  background: var(--stzh-color-warning50);
  color: var(--stzh-color-warning90);
}

/* --- Pool-Status (eigen, 1131:55299) ----------------------------------- */
/* Fläche Coolgrey 10, Polster 20, Abstand 12; im Frame 346 breit und
   Default 196 · Pendent/Member 208 hoch. Die Ausprägungen unterscheiden sich
   nur im Inhalt, nicht in Polster oder Abstand. */
.pool-status {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; background: var(--stzh-color-coolgrey10);
}
.pool-status__titel {
  margin: 0; padding-bottom: 8px;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; letter-spacing: -0.05px;
  color: var(--stzh-color-black);
}
.pool-status__plaetze {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-black);
}
.pool-status__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pool-status__datum, .pool-status__hinweis {
  margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 20px; color: var(--stzh-color-grey70);
}
/* Der Status-Chip bleibt hier auch auf Mikro 24 hoch — die Komponente ist
   auf beiden Breakpoints dieselbe Instanz (346 × 208). */
.pool-status .chip-tag { height: 24px; }

/* --- Infobox (eigen, 1133:55577) --------------------------------------- */
/* Kopf 72 hoch auf Secondary 30, Titel 20/24 Heavy in Primary 70;
   darunter die Angaben auf Secondary 10, Polster 20, Abstand 24. */
.infobox { display: flex; flex-direction: column; }
.infobox__kopf {
  display: flex; align-items: center; min-height: 72px; padding: 20px;
  background: var(--stzh-color-secondary30);
}
.infobox__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; letter-spacing: -0.05px;
  color: var(--stzh-color-primary70);
}
.infobox__inhalt {
  display: flex; flex-direction: column; gap: 24px;
  padding: 20px; background: var(--stzh-color-secondary10);
}
/* Zwei Aktionen nebeneinander, zusammen 261 breit, Polster 4/16 */
.infobox__aktionen { display: flex; gap: 16px; width: 261px; max-width: 100%; }
.infobox__aktionen .aktion-secondary { flex: 1 1 0; padding: 4px 16px; }
.infobox__karte { display: flex; flex-direction: column; gap: 8px; }
/* In der Infobox stehen Überschrift und Wert auf beiden Breakpoints 4 px
   auseinander — anders als die Angaben der Hauptspalte, die auf Ultra 8 haben. */
@media (min-width: 1600px) { .infobox .angabe { gap: 4px; } }
/* Kartenplatzhalter 308 × 180 auf beiden Breakpoints — darum feste Höhe und
   kein Seitenverhältnis: die Infobox ist im Frame 348 breit, in unserer
   Mikro-Spalte 350, und über `aspect-ratio` würde der Platzhalter dort 181
   hoch. Die Fläche steht im Frame als roher Wert #dee0e5, dafür gibt es
   kein Token. */
.kartenplatzhalter { height: 180px; background: #dee0e5; }

/* --- Block mit Titelzeile («Einsätze») --------------------------------- */
/* Icon 24 + Abstand 8, Polster unten 16; Titel Mikro 20/24 · Ultra 24/29. */
.blockzeile { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; }
.blockzeile .icon { width: 24px; height: 24px; color: var(--stzh-color-primary70); }
.blockzeile__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; letter-spacing: -0.05px;
  color: var(--stzh-color-primary70);
}
@media (min-width: 1600px) {
  .blockzeile__titel { font-size: 24px; line-height: 29px; letter-spacing: -0.25px; }
}

/* --- Einsatzkarte (eigen, 1069:3066) ---------------------------------- */
/* Fläche Coolgrey 10, Polster 16, Abstand 12, 358 hoch.
   Mikro: eine Spalte, Karte 350 breit, Abstand 24.
   Ultra: drei je Zeile, Karte 301 breit, Abstand 32 (3 × 301 + 2 × 32 = 967). */
.einsatzraster { display: flex; flex-direction: column; gap: 24px; }
.einsatzkarte {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--stzh-color-coolgrey10);
}
.einsatzkarte__info { display: flex; flex-direction: column; gap: 8px; }
.einsatzkarte__angebot {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-primary70);
}
/* Datum und Zeit stehen ohne Abstand untereinander */
.einsatzkarte__zeitblock { display: flex; flex-direction: column; }
.einsatzkarte__datum {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px; line-height: 29px; letter-spacing: -0.25px;
  color: var(--stzh-color-primary70);
}
.einsatzkarte__zeit {
  margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 30px; color: var(--stzh-color-black);
}
.einsatzkarte__ort {
  margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-grey70);
}
@media (min-width: 1600px) {
  .einsatzraster { flex-direction: row; flex-wrap: wrap; gap: 32px; }
  .einsatzkarte { width: 301px; }
}

/* Link (DS) mit Icon links: download 16, Abstand 4, Label 14/21 Medium */
.textlink {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 21px; color: var(--stzh-color-primary70);
}
.textlink .icon { width: 16px; height: 16px; margin-right: 4px; color: currentColor; }
/* `Link` in der grossen Fassung. Im Storybook gemessen
   (`components-link--with-icon`, Dichte default): Farbe Primary 70, **ohne
   Unterstreichung**, Icon-Box **24** vor dem Text, Abstand 4. Die Schrift
   erbt der Link; hier 16/24 Medium. */
.textlink--gross { font-size: 16px; line-height: 24px; text-decoration: none; }
.textlink--gross .icon { width: 24px; height: 24px; margin-right: 4px; }

/* Aktionen in Karten füllen die Breite; die dritte Stufe (Tertiary) hat
   dasselbe Polster wie Primary, aber keine Fläche. */
.aktion-primary--breit { display: flex; width: 100%; }
/* Secondary mit Icon links statt rechts (Infobox, Pool-Status Member) */
.aktion-secondary__icon--links { margin-left: 0; margin-right: 8px; }
.aktion-primary--rot { background: var(--stzh-color-error60); }
.aktion-tertiary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px 20px; border: 0; cursor: pointer; text-decoration: none;
  background: transparent;
}
/* In der Titelzeile steht die dritte Stufe nicht über die ganze Breite und
   trägt ihr Icon links, wie die Primary-Aktion (Icon 24 in Primary 70). */
.aktion-tertiary--schmal { width: auto; }
.aktion-tertiary .icon { width: 24px; height: 24px; margin-right: 8px; color: var(--stzh-color-primary70); }
.aktion-tertiary__label {
  display: flex; align-items: center; justify-content: center; height: 24px;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-primary70);
  white-space: nowrap;
}

/* ======================================= Seite 3.0 Einsätze – Grid [F] */
/*
  Quelle: 3.0 Einsätze – Grid [F] · Desktop 1728 (1078:4792) und · Mobil 390
  (1103:12614) — der Mobil-Frame heisst dort noch «Liste» —, dazu der
  Baukasten «Einsatzkarte – Ausprägungen» (1125:46297). Werte 1:1 aus
  `get_design_context`; Mikro ist die Grundlage, Ultra kommt per Media Query.
*/

/* Inhalt: Mikro Polster 32/20/64 · Ultra 48/190/64 — und der Abstand bleibt
   auf beiden Breakpoints 24 (anders als auf 2.0/2.2, wo Ultra 32 hat). */
.inhalt--einsaetze { gap: 24px; padding: 32px 20px 64px; }
@media (min-width: 1600px) {
  .inhalt--einsaetze { gap: 24px; padding: 48px 190px 64px; }
}

/* --- Gruppen je Angebot ------------------------------------------------ */
/* Gruppenabstand 48, Titel → Raster 12. Titel: Ultra 24/29 Heavy LS −0.25,
   Mikro 16/24 Heavy — beides in Primary 70, mit Pfeil-Icon 24 davor (im
   Frame ein BreadcrumbItem des Design Systems, hier als Gruppentitel). */
.einsatzgruppen { display: flex; flex-direction: column; gap: 48px; }
.einsatzgruppe { display: flex; flex-direction: column; gap: 12px; }
.gruppentitel { display: flex; align-items: flex-start; gap: 8px; }
.gruppentitel .icon { width: 24px; height: 24px; color: var(--stzh-color-primary70); }
.gruppentitel__text {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-primary70);
}
@media (min-width: 1600px) {
  .gruppentitel { align-items: center; }
  .gruppentitel__text { font-size: 24px; line-height: 29px; letter-spacing: -0.25px; }
}

/* Raster dieser Seite: Mikro eine Spalte mit Abstand 32 (auf 2.1 sind es 24),
   Ultra vier Karten je Zeile — 4 × 313 + 3 × 32 = 1348. */
.einsatzraster--grid { gap: 32px; }
@media (min-width: 1600px) {
  .einsatzraster--grid .einsatzkarte { width: 313px; }
}
/* Die zweite Gruppe führt auf Ultra sechs Karten, auf Mikro nur die ersten
   drei. So steht es im File — die drei letzten bleiben darum auf Mikro aus. */
.einsatzkarte--ab-ultra { display: none; }
@media (min-width: 1600px) { .einsatzkarte--ab-ultra { display: flex; } }

/* --- Einsatzkarte, Ausprägung «Vergangen» ------------------------------ */
/* Statt Aktion ein Hinweis auf die eigene Teilnahme: Chip in Grau 20 mit
   user 16 und Text in Success 70, in einem 44 hohen zentrierten Block —
   so hoch wie die Aktion, die er ersetzt. */
.teilnahme { display: flex; align-items: center; justify-content: center; height: 44px; }
.chip-tag--teilnahme {
  height: 24px;
  background: var(--stzh-color-grey20);
  color: var(--stzh-color-success70);
}
/* ICS und Belegung stehen in dieser Ausprägung im File mit Deckkraft 0 —
   der Platz bleibt also erhalten. Genau so ist es nachgebaut. */
.einsatzkarte__verdeckt { opacity: 0; }

/* ============================== Verwaltungsseiten [K]: Nutzer, Stammdaten */
/*
  Quellen: 5.0 Nutzer – Liste [K] (1089:6924), 6.0 Stammdaten – Mandanten [K]
  (1089:7247) und 6.6 Stammdaten – FAQ verwalten [K] (1096:9677).
  Aufbau, Titelzeile, Filterleiste und Tabelle sind dieselben wie auf 2.2/3.2 —
  aus Figma kommen nur Wortlaute und Tabelleninhalte.
*/

/* --- Bereichswechsel der Stammdaten ------------------------------------ */
/*
  Der Frame zeichnet dafür eine eigene Reiterzeile (Text 16/24, aktiv 85 Heavy
  mit 3 px Unterstrich in Grau 20). Das Design System kennt **keine** Tabs;
  gebaut ist darum die DS-Komponente **Chipselect** mit einfacher Auswahl —
  drei `Chip · Filter`, der aktive in `State=Active` (Primary 70, weisse
  Schrift). Dieselbe Zusammenstellung wie die Angebotsarten auf 0.0.
  Auf Mikro passen die drei Chips in eine Zeile (350); das Design System hätte
  dafür auch die Fassung «Dropdown on mobile».
*/
.bereichswechsel { margin: 0; padding: 0; list-style: none; }

/* --- FAQ verwalten ----------------------------------------------------- */
/* Einleitungstext: Textarea des Design Systems, 96 hoch, Polster 8/12/8/16,
   auf Ultra 800 breit. Beschriftung 14/21 Heavy in Primary 70, dahinter
   «(optional)» in 13/20 Medium. */
.textfeld { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1600px) { .textfeld { width: 800px; } }
.textfeld__label { display: flex; align-items: center; gap: 8px; }
.textfeld__zusatz {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 20px; color: var(--stzh-color-primary70);
}
.textfeld__eingabe {
  width: 100%; height: 96px; padding: 8px 12px 8px 16px; resize: vertical;
  border: 0; box-shadow: inset 0 0 0 2px var(--stzh-color-grey70);
  background: var(--stzh-color-white);
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; color: var(--stzh-color-black);
}

/* Fragenliste: Titel 20/24 Heavy in Primary 70, Abstand 8. Die Fragen stehen
   in derselben Tabelle wie überall (`stzh-table`), nur **ohne Kopfzeile** —
   die drei Spalten (Frage, Status, Zeilenmenü) brauchen keine Beschriftung. */
.faqverwaltung { display: flex; flex-direction: column; gap: 8px; }
.faqverwaltung__titel {
  margin: 0;
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; letter-spacing: -0.05px;
  color: var(--stzh-color-primary70);
}

/* ------------------------------------------- Checkbox (Bibliothek) */
/*
  `assets/stzh-checkbox.css` ist die unveränderte Datei aus dem Paket. Sie ist
  für das Shadow DOM geschrieben: die Variablen stehen in `:host`, was im Light
  DOM nicht greift. Die Zeilen unten sind genau diese Regeln, auf das Element
  übertragen — Werte unverändert. Kästchen 24 × 24, Rand 2 px schwarz, Häkchen
  in Primary; im Hover und im gewählten Zustand Rand und Häkchen in Primary 70.
*/
stzh-checkbox {
  display: inline-block;
  --label-color: var(--stzh-base-color);
  --label-hover-color: var(--stzh-color-primary70);
  --label-hover-checked-color: var(--stzh-color-primary90);
  --check-color: var(--stzh-color-primary);
  --invalid-color: var(--stzh-color-error60);
  --disabled-color: var(--stzh-color-grey50);
}

/* Auswahlspalte der Tabellen mit Bulk Action: 40 breit, Kästchen 24 */
.spalte-auswahl { width: 40px; }
.stzh-table .spalte-auswahl { vertical-align: top; }
/* In der Listenfassung (Mikro) steht das Kästchen als erste Zeile im Block */
.tabellenliste__zeile stzh-checkbox { margin-bottom: 4px; }

/* ================================ Seite 2.4 Angebot – Erfassen [K] */
/*
  Quelle: 2.4 Angebot – Erfassen [K] · Desktop 1728 (1075:3938) für Aufbau und
  Masse, dazu die Abnahme-Screenshots für Felder und Hilfetexte.

  Bausteine aus dem Design System: `Fieldset` für die Gruppen (Datei
  `assets/stzh-fieldset.css` unverändert), `Actions` für die Aktionszeile
  (`assets/stzh-actions.css` unverändert), dazu Input, Dropdown, Datumauswahl,
  Textarea, Chipselect und Checkbox wie auf den übrigen Seiten.

  Formular 800 breit, Gruppenabstand 32, Feldabstand 16, Hilfetext 16 unter
  dem Feld. Kein «Publizieren» — die Erfassung endet als Entwurf.
*/
/* Abstand zwischen den Blöcken: 48 (der Frame hat 32 — auf Wunsch mehr Luft) */
.formular { display: flex; flex-direction: column; gap: 48px; width: 100%; }
@media (min-width: 1600px) { .formular { width: 800px; } }
.formular__felder { display: flex; flex-direction: column; gap: 16px; }

/* Fieldset (DS): Legende und Rahmen zurückgesetzt, Legende als Gruppentitel.
   Das Paket holt die Grösse aus `--stzh-font-curve-h4-*`; unser Token-Satz
   führt diese Kurve nicht, darum stehen hier die Werte aus dem Frame
   (20/24 Heavy). Farbe wie im Paket: Primary 70 — der Frame zeichnet sie
   schwarz. */
.stzh-fieldset__legend {
  font-family: "HelveticaNeueLTW05_85Heavy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; letter-spacing: -0.05px;
  color: var(--stzh-color-primary70);
  margin-bottom: 16px;
}
.stzh-fieldset__wrapper { display: block; }

/* Feld-Beschriftung: «(optional)» steht 8 px hinter der Beschriftung */
.feldgruppe__label-zeile { display: flex; align-items: center; gap: 8px; }
.feldgruppe__zusatz {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 20px; color: var(--stzh-color-primary70);
}
/* Hilfetext unter dem Feld. Im Storybook gemessen
   (`components-input--error-message`, Dichte default): die Meldung steht
   **2 px** unter dem Feld — nicht 16, wie der Frame es mit einem eigenen
   Absatz zeichnet. Schrift 13/19.5 Medium in Grau 70. Die 2 px kommen aus
   dem Abstand der Feldgruppe, darum kein eigener Aussenabstand. */
.feldhinweis {
  margin: 0;
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 19.5px; color: var(--stzh-color-grey70);
}

/* Gefülltes Feld: die Bibliothek zeigt den Wert in **Cobaltblue 60**
   (#0353dc), nicht in Grau 80 — im Storybook an `components-input--default`
   gemessen. Grau 80 gilt für den Platzhalter der Filterfelder, wie in den
   Frames der Übersichten belegt. */
.feld__wert--gefuellt { color: var(--stzh-color-cobaltblue60); }

/* Zwei Felder nebeneinander (Gültigkeit, Koordinaten): je 392 auf Ultra */
.feldpaar { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1600px) {
  .feldpaar { flex-direction: row; }
  .feldpaar > .feldgruppe { flex: 1 1 0; min-width: 0; }
}

/* Gesperrtes Feld (readonly/disabled der Bibliothek): Fläche Grau 10,
   Text, Rand und Beschriftung in Grau 70 */
.feld--gesperrt {
  background: var(--stzh-color-grey10);
  box-shadow: inset 0 0 0 2px var(--stzh-color-grey70);
}
.feld--gesperrt .feld__wert { color: var(--stzh-color-grey70); }
.feld--gesperrt .feld__knopf .icon { color: var(--stzh-color-grey70); }
.feldgruppe--gesperrt .feldgruppe__label,
.feldgruppe--gesperrt .feldgruppe__zusatz { color: var(--stzh-color-grey70); }

/* --- Upload (Bibliothek) ------------------------------------------------ */
/*
  `assets/stzh-upload.css` ist die unveränderte Datei aus dem Paket. Im
  Storybook gemessen (`components-upload--default`): Klickfläche **Grau 10**
  mit gestricheltem Rand (border-image, 8 px), Polster 16/20/0, rund 102 hoch;
  darin ein Knopf in der Grösse *tiny* (32 hoch, Polster 4/16, Secondary 30 mit
  Primary 70) und die Anweisung in 13/19.5 Grau 70. Die Beschriftung ist
  dieselbe wie bei den übrigen Feldern (14/21 Heavy Primary 70).
*/
.stzh-upload__clickarea { min-height: 102px; }
.stzh-upload__instructions {
  font-family: "HelveticaNeueLTW05_65Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; line-height: 19.5px; color: var(--stzh-color-grey70);
}
/* Knopf in der Grösse *tiny*: 32 hoch, Polster 4/16 */
.aktion-secondary--tiny {
  width: auto; height: 32px; padding: 4px 16px;
}

/* Kartenplatzhalter im Geostandort: mit pin-location 24 in Grau 50 */
.kartenplatzhalter--pin { display: flex; align-items: center; justify-content: center; }
.kartenplatzhalter--pin .icon { width: 24px; height: 24px; color: var(--stzh-color-grey50); }

.chipauswahl { display: flex; flex-direction: column; gap: 8px; }

/* Auswahl-Chips im Formular (`Chipselect`). Farben und Masse wie in der
   Bibliothek, in der **kleinen** Fassung — im Storybook gemessen
   (`components-chipselect--default`, Ausprägung *filter*, Grösse *small*):
   24 hoch, Radius 12, Polster 0/8, Schrift 13/19.5, Icon 16.
   Nicht gewählt Secondary 30 mit Primary 70, gewählt Primary 70 mit weisser
   Schrift und dem Zeichen close. Die grosse Fassung (40 hoch, Radius 20,
   Polster 0/16, 14/21) steht in `components-chip--filter-large` und ist im
   Filterkonzept belegt — dort wird sie verwendet. */
.chipgruppe--auswahl .chip {
  height: 24px; padding: 0 8px; border-radius: 12px; gap: 4px;
  background: var(--stzh-color-secondary30);
  color: var(--stzh-color-primary70);
  font-size: 13px; line-height: 19.5px;
}
.chipgruppe--auswahl .chip--gewaehlt {
  background: var(--stzh-color-primary70);
  color: var(--stzh-color-white);
}
.chipgruppe--auswahl .chip .icon { width: 16px; height: 16px; color: currentColor; }

/* --- Aktionszeile: sticky am unteren Rand ------------------------------- */
/*
  `assets/stzh-actions.css` ist die unveränderte Datei aus dem Paket
  (Ausprägung *form*: dritte Stufe links, sekundär und primär rechts). Die
  `::slotted`-Regeln greifen nur im Shadow DOM — die zwei Zeilen unten sind
  genau diese Regeln, auf die Kinder übertragen (Abstand 16 = 2 × 8).
  Das Paket führt für das Kleben `stzh-sticky` mit Javascript; auf einer
  Spezifikationsseite steht dafür `position: fixed`. Alle Erfassungs-Ansichten
  bekommen diese Leiste.
*/
stzh-actions { display: block; }
.stzh-actions__primary-actions > *,
.stzh-actions__secondary-actions > *,
.stzh-actions__tertiary-actions > * { margin: 8px; }
.formularleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--stzh-color-white);
  border-top: 1px solid var(--stzh-color-grey20);
  padding: 12px 20px;
}
@media (min-width: 1600px) { .formularleiste { padding: 12px 190px; } }
/* «Abbrechen» ist auf allen Erfassungsseiten ein **Secondary**-Knopf (Fläche
   Secondary 30, Text Primary 70) — nicht die dritte Stufe. Er sitzt weiterhin
   im linken Slot der Actions-Komponente, damit er auf Ultra am linken Rand der
   800 steht und der primäre Knopf am rechten.
   Auf Mikro stehen beide Aktionen **nebeneinander** statt gestapelt: je halbe
   Breite, Beschriftung darf umbrechen, Polster schmaler — sonst passen
   «Erfassung abbrechen» und «Als Entwurf speichern» nicht in 350. Die
   Bibliothek stapelt sie unter 600 px (`flex-direction: column-reverse`). */
.formularleiste .stzh-actions__actions { flex-direction: row; align-items: stretch; }
.formularleiste .stzh-actions__wrapper { display: contents; }
.formularleiste .stzh-actions__tertiary-actions,
.formularleiste .stzh-actions__primary-actions { flex: 1 1 0; min-width: 0; }
.formularleiste .aktion-secondary,
.formularleiste .aktion-primary { width: 100%; height: auto; min-height: 44px; padding: 10px 8px; }
.formularleiste .aktion-secondary__label,
.formularleiste .aktion-primary__label { height: auto; white-space: normal; text-align: center; }
@media (min-width: 1600px) {
  /* Die Aktionen laufen nicht breiter als das Formular (800) — sie stehen
     linksbündig darüber, dritte Stufe links, primär am rechten Rand der 800. */
  .formularleiste stzh-actions { display: block; width: 800px; }
  .formularleiste .stzh-actions__actions { justify-content: space-between; }
  .formularleiste .stzh-actions__tertiary-actions,
  .formularleiste .stzh-actions__primary-actions { flex: 0 0 auto; }
  .formularleiste .aktion-secondary,
  .formularleiste .aktion-primary { width: auto; height: 44px; padding: 10px 20px; }
  .formularleiste .aktion-secondary__label,
  .formularleiste .aktion-primary__label { height: 24px; white-space: nowrap; }
}
/* Die schwebenden Spezifikations-Schaltflächen sitzen sonst auf der Leiste;
   auf Seiten mit Aktionsleiste rutschen sie darüber. */
body:has(.formularleiste) .spez-leiste { bottom: 105px; }
@media (min-width: 1600px) { body:has(.formularleiste) .spez-leiste { bottom: 81px; } }

/* Damit die Leiste den Seitenfuss nicht verdeckt */
.inhalt--formular { padding-bottom: 132px; }
@media (min-width: 1600px) { .inhalt--formular { padding-bottom: 132px; } }

/* ================================ Seite 3.4 Einsatz – Erfassen [K] */
/*
  Aufbau, Feldmuster und Aktionsleiste wie auf 2.4 Angebot – Erfassen.
  Über dem Formular stehen die Angaben des Angebots, aus dem der Einsatz
  entsteht — als **Infobox** wie auf 2.1: Kopf in Secondary 30 mit dem Titel in
  Primary 70, darunter die Angaben auf Secondary 10. Neu ist nur, dass sie über
  die ganze Formularbreite geht und die Angaben auf Ultra nebeneinander stehen.
*/
/* Die Angaben stehen **seitlich** wie die Infobox auf 2.1: auf Ultra rechts
   neben dem Formular (800 + 32 + 348 = 1180), auf Mikro darüber. Im Kopf steht
   rechts der Verweis «Im Angebot ändern». */
.formularraster { display: flex; flex-direction: column; gap: 48px; }
/* Abstände im Kasten: die vier Angaben mit 24 untereinander, danach die Chips
   und die Aktion — wie in der Infobox auf 2.1. Der Verweis «Im Angebot ändern»
   steht in der schmalen Spalte **unter** den Angaben (im Kopf hätte er neben
   dem Titel keinen Platz, 308 innen) und ist ein Secondary-Knopf. */
.infobox__werte { display: flex; flex-direction: column; gap: 24px; }
.infobox__inhalt > .aktion-secondary { width: auto; align-self: flex-start; }
@media (min-width: 1600px) {
  .formularraster { flex-direction: row; align-items: flex-start; gap: 32px; }
  .formularraster .formular { order: 1; width: 800px; }
  .formularraster > .infobox { order: 2; flex: 0 0 348px; width: 348px; }
}