/* Seite «Erfassungsformulare» (Paket A, 29.9.2026) — nur Tokens der Seite (DESIGN.md), keine Rohfarben. */
/* [hidden] gewinnt gegen display:flex der Klassen (Optionen, Liste, Leerzustand) */
.page-wrap [hidden], .ef-dialog [hidden] { display: none !important; }
.ef-kopf h1 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.ef-untertitel { margin-top: var(--s2); color: var(--ink-2); font-size: 15px; max-width: 64ch; }
.ef-anleitung { margin-top: var(--s2); font-size: 14px; }
.ef-anleitung a { color: var(--gold-text); font-weight: 600; }
.ef-anleitung a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.rueckweg { margin-bottom: var(--s4); }
/* Sprunglink (UX-10) wie css/checkliste.css: unsichtbar bis zum Fokus, dann oben links über allem */
.sprung { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung:focus { position: fixed; top: var(--s2); left: var(--s2); z-index: 9500; width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip: auto; border-radius: var(--r-sm); background: var(--ink); color: var(--bg-card); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; box-shadow: var(--sh-lg); outline: 2px solid var(--gold-text); outline-offset: 2px; }
.page-wrap:focus { outline: none; }
/* Rollen ohne Zugang (UX-07): ein Satz, ein Weg */
.ef-kein-zugang { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); }
.ef-kein-zugang-text { color: var(--ink-2); font-size: 15px; }
.rueckweg-link { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); text-decoration: none; font-size: 14px; border-radius: var(--r-xs); }
.rueckweg-link:hover { color: var(--ink); }
.rueckweg-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Segmented Control (DESIGN.md) */
.ef-seg { display: inline-flex; gap: 4px; margin: var(--s6) 0 var(--s4); padding: 4px; background: var(--bg-inset);
  border: 1px solid var(--border-light); border-radius: var(--r-sm); max-width: 100%; }
.ef-seg-btn { border: 0; background: transparent; color: var(--ink-3); font: 500 14px/1 var(--font-body); padding: 10px 22px;
  border-radius: calc(var(--r-sm) - 4px); cursor: pointer; min-height: 40px;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.ef-seg-btn:hover { color: var(--ink-2); }
.ef-seg-btn[aria-selected="true"] { background: var(--bg-card); color: var(--ink); font-weight: 600; box-shadow: var(--sh-sm); }
.ef-seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Karte — füllt die Inhaltsbreite wie jede Karte im Rahmen (Befund EE 9.10.26: bei 1920 px blieb
   rechts ein Loch von 472 px; vorher 920 bzw. 1180 px). Lesetexte behalten ihre 60–70ch.
   Wächter: tests/app-rahmen.test.js «Inhaltsdeckel». */
.ef-karte { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--r-md); box-shadow: var(--sh-xs); padding: var(--s6); }
.ef-karte-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.ef-karte-kopftext { min-width: 0; flex: 1 1 320px; }
.ef-karte-titel { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.ef-karte-text { margin-top: var(--s1); color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.ef-karte-aktion { display: flex; align-items: center; gap: var(--s3); }
.ef-zaehler { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ef-hinweis { display: flex; gap: var(--s3); max-width: 80ch; margin: var(--s4) 0 var(--s5); padding: var(--s3) var(--s4); background: var(--gold-soft);
  border: 1px solid var(--gold-med); border-radius: var(--r-sm); color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.ef-hinweis strong { color: var(--ink); }
.ef-hinweis svg { flex-shrink: 0; color: var(--gold-text); margin-top: 2px; }
.ef-laden { color: var(--ink-3); font-size: 14px; padding: var(--s4) 0; }

/* Liste */
.ef-liste { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.ef-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4); border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--bg-card);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.ef-zeile:hover { border-color: var(--border-hover); box-shadow: var(--sh-sm); }
.ef-zeile:focus-within { border-color: var(--border-hover); }
.ef-zeile.ef-zieht { opacity: 0.5; }
.ef-zeile.ef-ziel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ef-griff { color: var(--ink-4); cursor: grab; display: flex; }
.ef-zeile-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ef-zeile-titel { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ef-zeile-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ef-marke { font-size: 12px; font-weight: 500; line-height: 1.5; padding: 1px 8px; border-radius: var(--r-full); background: var(--bg-inset); color: var(--ink-2); }
.ef-marke-sicht { background: var(--blue-soft); color: var(--blue-text); }
.ef-zeile-zahl { font-size: 12px; color: var(--ink-3); }
.ef-zeile-aktionen { display: flex; align-items: center; gap: 4px; }
.ef-knopf-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid transparent;
  background: transparent; border-radius: var(--r-xs); color: var(--ink-3); cursor: pointer; flex-shrink: 0;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.ef-knopf-icon:hover:not(:disabled) { background: var(--bg-inset); color: var(--ink); }
.ef-knopf-icon:disabled { opacity: 0.35; cursor: default; }
.ef-knopf-icon:focus-visible, .ef-karte .btn:focus-visible, .ef-dialog .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ef-entfernen { color: var(--coral-text); }

/* Leerzustand — konkrete Beispiele statt Illustration */
.ef-leer { padding: var(--s1) 0 var(--s2); }
.ef-leer-titel { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.ef-leer-text { font-size: 14px; color: var(--ink-2); margin-top: var(--s1); max-width: 60ch; }
.ef-beispiele { list-style: none; display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); max-width: 520px; }
.ef-beispiel { width: 100%; display: flex; align-items: center; gap: var(--s3); text-align: left; padding: var(--s3) var(--s4);
  background: var(--bg-card); border: 1px dashed var(--border-hover); border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
  font: inherit; min-height: 56px;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease); }
.ef-beispiel:hover { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }
.ef-beispiel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ef-beispiel-plus { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold-text); }
.ef-beispiel-text { min-width: 0; display: flex; flex-direction: column; }
.ef-beispiel-titel { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.ef-beispiel-meta { font-size: 12px; color: var(--ink-3); }
.ef-leer-fuss { font-size: 13px; color: var(--ink-3); margin-top: var(--s3); max-width: 60ch; }

/* Entfernte */
.ef-entfernte { margin-top: var(--s5); border-top: 1px solid var(--border-light); padding-top: var(--s4); }
.ef-entfernte summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: 14px; border-radius: var(--r-xs); width: fit-content; }
.ef-entfernte summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ef-entfernte-zahl { font-weight: 400; color: var(--ink-3); }
.ef-entfernte-text { font-size: 13px; color: var(--ink-3); margin: var(--s2) 0 var(--s3); max-width: 70ch; }
.ef-entfernte-liste { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.ef-entfernt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--bg-inset); color: var(--ink-2); font-size: 14px; }
.ef-entfernt-text { min-width: 0; overflow-wrap: anywhere; }
.ef-entfernt-titel { color: var(--ink-2); }
/* Endgültig löschen (Paket D Task 13) */
.ef-entfernt-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
#loeschenBestaetigungZeile { margin: var(--s3) 0; }

/* Standardfelder je Anstellungsart (Paket C, Task 10) — nur Tokens (DESIGN.md). Kontrast: Lesetext --ink/--ink-2,
   leiser Text --ink-leise (5,36 : 1), aktiver Zustand --gold-schrift auf --gold-soft, Feld- und Segmentrand
   --rand-feld (≥ 3 : 1). Etiketten tragen immer Text, Farbe nie allein. */
.sf-karte { margin-bottom: var(--s5); }
.sf-sprung { color: var(--gold-text); font-weight: 600; }
.sf-sprung:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.sf-demo { margin: var(--s4) 0 0; }
.sf-raster { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--s6); margin-top: var(--s5); align-items: start; }
.sf-eigene-hinweis { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border-light); font-size: 14px; color: var(--ink-2); }

/* Leiste der Anstellungsarten (Listbox) */
.sf-leiste { position: sticky; top: 76px; display: flex; flex-direction: column; max-height: calc(100vh - 76px - var(--s4)); }
/* Abnahme C2 (4.10.2026): Mit 12 Arten war die klebende Leiste höher als das Fenster — die letzten Arten und
   «+ Anstellungsart» kamen erst am Seitenende ins Bild, der Tastaturfokus stand unter der Kante. Die Liste rollt jetzt
   in sich (Titel und Knopf bleiben stehen); 4 px Polster halten den Fokusring (2 px + 2 px Abstand) im Bild. */
.sf-leiste-titel { font-size: 13px; font-weight: 600; color: var(--ink-leise, var(--ink-3)); margin-bottom: var(--s2); }
.sf-arten { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; margin: -4px; }
.sf-art { display: flex; flex-direction: column; gap: 4px; padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; position: relative; min-height: 44px; flex-shrink: 0;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.sf-art:hover { background: var(--bg-hover); border-color: var(--border-light); }
.sf-art[aria-selected="true"] { background: var(--gold-soft); border-color: var(--gold-med); }
.sf-art[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--gold); }
.sf-art:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-art-oben { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.sf-art-name { font-weight: 600; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.sf-art[aria-selected="true"] .sf-art-name { color: var(--gold-schrift, var(--gold-text)); }
.sf-art-punkt { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--gold); }
.sf-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: 13px; color: var(--ink-leise, var(--ink-3)); }
.sf-art-typ { font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 8px; border-radius: var(--r-full); background: var(--bg-inset); color: var(--ink-2); }
.sf-art-zahl { font-variant-numeric: tabular-nums; }
.sf-art-inaktiv { font-size: 12px; font-weight: 600; color: var(--ink-leise, var(--ink-3)); }
.sf-art--aus .sf-art-name { color: var(--ink-leise, var(--ink-3)); font-weight: 500; }

/* Kopf der Art */
.sf-art-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--border-light); }
.sf-art-kopftext { min-width: 0; flex: 1 1 320px; }
.sf-art-titel { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sf-art-satz { margin-top: 2px; font-size: 14px; color: var(--ink-2); max-width: 70ch; }
.sf-art-inaktiv-text { margin-top: var(--s2); font-size: 13px; color: var(--ink-2); background: var(--bg-inset); border-radius: var(--r-xs); padding: var(--s2) var(--s3); }
.sf-art-summe { margin-top: var(--s2); font-size: 13px; font-weight: 600; color: var(--ink-leise, var(--ink-3)); font-variant-numeric: tabular-nums; }
/* S-06 (Abnahme C2): Knöpfe umbrechen in ihrer Gruppe, ⋮ bleibt rechts oben; die Gruppe darf schmaler werden als ihr Inhalt */
.sf-art-aktionen { display: flex; align-items: flex-start; gap: var(--s2); margin-left: auto; min-width: 0; max-width: 100%; }
.sf-art-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); min-width: 0; }
.sf-art-knoepfe .btn { max-width: 100%; }

/* Werkzeuge: Suche und «Nur angepasste» */
.sf-werkzeuge { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s4); margin-top: var(--s4); }
.sf-wahl { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; max-width: 320px; }
.sf-wahl label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sf-suche input::-webkit-search-cancel-button { cursor: pointer; }
.sf-filter { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-full);
  border: 1px solid var(--rand-feld, var(--border-hover)); background: var(--bg-card); color: var(--ink-2); font: 500 14px/1 var(--font-body); cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.sf-filter:hover { border-color: var(--ink-3); color: var(--ink); }
.sf-filter[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-schrift, var(--gold-text)); font-weight: 600; }
.sf-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-filter-zahl { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; min-width: 22px; padding: 2px 6px; border-radius: var(--r-full); background: var(--bg-inset); color: var(--ink-2); text-align: center; }
.sf-zaehler { margin-top: var(--s3); color: var(--ink-leise, var(--ink-3)); font-size: 13px; font-variant-numeric: tabular-nums; min-height: 1.5em; }
.sf-laden { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0; }
.sf-skelett { display: block; height: 52px; border-radius: var(--r-sm); background: var(--bg-inset);
  background-image: linear-gradient(90deg, transparent, var(--bg-hover), transparent); background-size: 200% 100%;
  animation: sf-schimmer 1.4s ease-in-out infinite; }
@keyframes sf-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sf-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); padding: var(--s3) var(--s4);
  border: 1px solid var(--coral-med); background: var(--coral-soft); border-radius: var(--r-sm); color: var(--ink); font-size: 14px; }

/* Feldzeilen */
.sf-abschnitt { margin-top: var(--s5); }
.sf-abschnitt:first-child { margin-top: var(--s2); }
.sf-abschnitt-titel { font-size: 13px; font-weight: 600; color: var(--ink-leise, var(--ink-3));
  padding-bottom: var(--s2); border-bottom: 1px solid var(--border-light); margin-bottom: var(--s1); }
.sf-liste { list-style: none; }
.sf-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: start; gap: var(--s2) var(--s5);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border-light); }
.sf-zeile:last-child { border-bottom: 0; }
.sf-feld { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 10px; }
.sf-name { font-weight: 600; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.sf-zeile--aus .sf-name { color: var(--ink-leise, var(--ink-3)); font-weight: 500; }
.sf-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); }
.sf-chip { font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 8px; border-radius: var(--r-full); background: var(--gold-soft);
  color: var(--gold-schrift, var(--gold-text)); border: 1px solid var(--gold-med); }
.sf-vorgabe { border: 0; background: none; padding: 4px 2px; min-height: 32px; font: 500 13px/1.4 var(--font-body); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--r-xs); }
.sf-vorgabe:hover { color: var(--ink); }
.sf-vorgabe:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-zustand { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; container: sf-zustand / inline-size; }

/* Segmented Control (DESIGN.md) mit vier Zuständen */
.sf-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--bg-inset);
  border: 1px solid var(--rand-feld, var(--border-hover)); border-radius: var(--r-sm); }
.sf-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 4px 8px; border: 0;
  border-radius: calc(var(--r-sm) - 3px); background: transparent; color: var(--ink-2); font: 500 14px/1.2 var(--font-body);
  text-align: center; cursor: pointer; min-width: 0; overflow-wrap: break-word; hyphens: manual;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.sf-seg-btn:hover:not([aria-disabled="true"]):not([aria-checked="true"]) { color: var(--ink); background: var(--bg-hover); }
.sf-seg-btn[aria-checked="true"] { background: var(--bg-card); color: var(--gold-schrift, var(--gold-text)); font-weight: 600;
  box-shadow: var(--sh-sm), inset 0 0 0 1px var(--gold-med); }
.sf-seg-btn[aria-disabled="true"] { color: var(--ink-leise, var(--ink-3)); opacity: 0.6; cursor: not-allowed; }
.sf-seg-btn[aria-disabled="true"] svg { flex-shrink: 0; }
.sf-seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; position: relative; z-index: 1; }
/* UX-06 (Abnahme C1): «Vor Abschluss» auf einer Zeile ab 1000 px — aber nur, wenn die Gruppe breit genug ist (400 px ⇒
   rund 97 px je Segment, das Wort braucht bei 14 px etwa 90). Schmaler bricht es weiter zwischen den Wörtern um,
   statt über den Rand zu laufen. bewusst: Container-Abfrage statt nur Bildschirmbreite — bei 1024 px mit Leiste ist
   die Gruppe schmaler als bei 1366 px. */
@media (min-width: 1000px) {
  @container sf-zustand (min-width: 400px) {
    .sf-seg-btn { white-space: nowrap; padding-inline: 4px; }
  }
}
.sf-erklaerung { font-size: 13px; color: var(--ink-leise, var(--ink-3)); max-width: 62ch; }
.sf-sperrgrund { font-size: 13px; color: var(--ink-2); background: var(--bg-inset); border-radius: var(--r-xs); padding: var(--s2) var(--s3); }
.sf-etikett { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; min-height: 44px; }
.sf-etikett svg { flex-shrink: 0; }
.sf-etikett--fest { background: var(--bg-inset); color: var(--ink-2); align-self: flex-start; }
.sf-etikett--aus { background: transparent; border: 1px dashed var(--rand-feld, var(--border-hover)); color: var(--ink-leise, var(--ink-3)); font-weight: 500; align-self: flex-start; }

/* Unter der Zeile: Folge, Wirkung, Speichern, Fehler */
.sf-unter { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sf-unter:empty { display: none; }
.sf-folge-knopf { padding: 4px 2px; min-height: 32px; border: 0; background: none; font: 600 13px/1.4 var(--font-body);
  color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-xs); }
.sf-folge-knopf:hover { color: var(--ink); }
.sf-folge-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-folge { font-size: 13px; color: var(--ink-2); max-width: 70ch; padding: var(--s2) var(--s3); background: var(--bg-inset); border-radius: var(--r-xs); }
.sf-folge-hinweis { font-size: 13px; color: var(--ink); max-width: 70ch; padding: var(--s2) var(--s3); background: var(--amber-soft);
  border-left: 3px solid var(--amber); border-radius: var(--r-xs); }
.sf-wirkung { font-size: 13px; color: var(--ink); max-width: 70ch; padding: var(--s2) var(--s3); background: var(--blue-soft);
  border-left: 3px solid var(--blue); border-radius: var(--r-xs); }
.sf-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--teal-text); min-height: 0; }
.sf-status:empty { display: none; }
.sf-zeile-fehler { font-size: 13px; color: var(--coral-text); }
.sf-leer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4) 0; color: var(--ink-2); font-size: 14px; }

/* Rückmeldung mit «Rückgängig» (8 s) */
.sf-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: var(--s4);
  max-width: min(560px, calc(100vw - 32px)); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--ink); color: var(--bg-card); box-shadow: var(--sh-lg); font-size: 14px; }
.sf-toast[hidden] { display: none; }
.sf-toast-knopf { flex-shrink: 0; min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r-xs); background: transparent;
  color: inherit; font: 700 14px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-toast-knopf:hover { background: color-mix(in srgb, var(--bg-card) 14%, transparent); }
.sf-toast-knopf:focus-visible { outline: 2px solid var(--bg-card); outline-offset: 2px; }
.ue-text { font-size: 14px; color: var(--ink-2); margin-bottom: var(--s4); }

/* Ab 1024 px die Leiste, darunter die Auswahl (Spezifität über .sf-wahl) */
.sf-wahl.sf-art-wahl { display: none; }
/* Unter 1024 px: Auswahl statt Leiste */
@media (max-width: 1023px) {
  .sf-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .sf-leiste { display: none; }
  .sf-wahl.sf-art-wahl { display: flex; max-width: none; margin-bottom: var(--s4); }
}

/* Dialog */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  padding: var(--s4); background: var(--schleier); }
.modal-overlay.open { display: flex; }
body.ef-dialog-offen { overflow: hidden; }
.ef-dialog { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xl), var(--sh-glow-gold); padding: var(--s6); }
.ef-dialog-titel { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: var(--s4); }
.ef-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); border: 0; padding: 0; min-width: 0; }
.ef-feld > label, .ef-feld > legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.ef-optional { font-weight: 400; color: var(--ink-3); }
.ef-eingabe { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--r-xs); font: 16px/1.4 var(--font-body); color: var(--ink); }
textarea.ef-eingabe { min-height: 64px; resize: vertical; }
select.ef-eingabe:disabled { background: var(--bg-inset); color: var(--ink-2); opacity: 1; cursor: default; }
.ef-eingabe:focus { outline: none; border-color: var(--gold); box-shadow: var(--sh-glow-gold); }
.ef-eingabe[aria-invalid="true"] { border-color: var(--coral); }
.ef-hilfe { font-size: 12px; color: var(--ink-3); display: block; font-weight: 400; }
.ef-fehler { font-size: 13px; color: var(--coral-text); }
.ef-optionen { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ef-option { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: center; }
.ef-option-neu { align-self: flex-start; }
.ef-wahl { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.ef-wahl input { margin-top: 4px; accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }
.ef-wahl input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ef-wahl strong { display: block; font-weight: 600; }
.ef-fest { font-size: 13px; color: var(--ink-3); margin-bottom: var(--s3); }
.ef-demo { font-size: 13px; color: var(--amber-text); background: var(--amber-soft); border-radius: var(--r-xs); padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
.ef-dialog-fuss { display: flex; justify-content: flex-end; gap: var(--s2); position: sticky; bottom: calc(-1 * var(--s6));
  margin: 0 calc(-1 * var(--s6)) calc(-1 * var(--s6)); padding: var(--s3) var(--s6) var(--s6); background: var(--bg-card);
  border-top: 1px solid var(--border-light); }
/* K-03 (Abnahme C2): Dialogknöpfe 44 px hoch — Trefferfläche wie die Eingaben (vorher 39 px) */
.ef-dialog-fuss .btn { min-height: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Vorschau «So sieht es aus» (Task 11): Knopf im Kopf der Art, Dialog fast bildschirmgross, Rahmen 1100/390 px */
.sf-vorschau-knopf { display: inline-flex; align-items: center; gap: 6px; }
.sf-vorschau-knopf svg { color: var(--gold-text); }
.vs-dialog [hidden] { display: none !important; }
.vs-dialog { width: min(1240px, 100%); height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xl), var(--sh-glow-gold); }
.vs-kopf { flex: none; padding: var(--s5) var(--s6) var(--s4); border-bottom: 1px solid var(--border-light); }
.vs-kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.vs-titel { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.vs-zu { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px 0 0; border: 0;
  border-radius: var(--r-xs); background: transparent; color: var(--ink-3); cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.vs-zu:hover { background: var(--bg-inset); color: var(--ink); }
.vs-zu:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vs-hinweis { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.vs-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }
.vs-seg { margin: 0; }
.vs-seg .ef-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; min-height: 40px; }
.vs-seg .ef-seg-btn svg { opacity: 0.65; }
.ef-seg-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--ink); font-weight: 600; box-shadow: var(--sh-sm); }
.ef-seg-btn[aria-pressed="true"] svg, .ef-seg-btn[aria-selected="true"] svg { opacity: 1; color: var(--gold-text); }
.vs-wer { margin-top: var(--s3); font-size: 13px; color: var(--ink-3); }
.vs-buehne { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding: 16px;
  background: var(--bg-inset); overflow: hidden; }
.vs-rahmen { position: relative; flex: none; max-width: 100%; overflow: hidden; border-radius: var(--r-sm); background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border), var(--sh-md); transition: width var(--duration) var(--ease); }
/* Ring statt Rand: der Rahmen bleibt genau so breit wie die Seite darin. Eigenes Token (UX-05): im Dunkelmodus ein
   dunkler Gerätrand statt eines cremeweissen Lichtrands (Token in der Seite, erfassungsformulare.html) */
.vs-rahmen--handy { border-radius: var(--r-lg); box-shadow: 0 0 0 6px var(--geraet-rand, var(--ink)), var(--sh-md); margin-top: 6px; }
.vs-rahmen iframe { display: block; border: 0; background: var(--bg-card); transform-origin: 0 0; }
.vs-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px;
  color: var(--ink-3); background: var(--bg-card); }

@media (max-width: 767px) {
  .ef-karte { padding: var(--s4); }
  .sf-wahl { max-width: none; flex-basis: 100%; }
  .sf-filter { width: 100%; justify-content: center; }
  .sf-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .sf-feld { padding-top: 0; }
  /* Schmal: Schloss ÜBER dem Wort, Umbruch nur zwischen Wörtern («Vor / Abschluss»), nie mitten im Wort (Review M-1) */
  .sf-seg-btn { flex-direction: column; gap: 2px; padding: 4px 2px; font-size: 13px; }
  .sf-seg-btn svg { width: 12px; height: 12px; }
  .sf-toast { left: 16px; right: 16px; transform: none; max-width: none; bottom: 16px; }
  .ef-zeile { grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .ef-griff { display: none; }
  .ef-zeile-aktionen { flex-wrap: wrap; margin-left: -6px; }
  .ef-karte-aktion { width: 100%; justify-content: space-between; }
  .ef-dialog { padding: var(--s4); }
  .vs-overlay { padding: 0; }
  .vs-dialog { height: 100dvh; border-radius: 0; border: 0; }
  .vs-kopf { padding: var(--s4); }
  .vs-steuerung { margin-top: var(--s3); }
  .vs-seg { flex: 1 1 100%; }
  .vs-seg .ef-seg-btn { flex: 1 1 0; justify-content: center; padding: 10px 8px; }
  .vs-buehne { padding: 8px; }
  .ef-dialog-fuss { bottom: calc(-1 * var(--s4)); margin: 0 calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: var(--s3) var(--s4) var(--s4); }
  .ef-dialog-fuss .btn { flex: 1 1 0; }
  /* Politur C: der Dialog sitzt am Bildschirmrand, der Fuss steht bündig — kein 16-px-Streifen darunter */
  .modal-overlay:has(> .ef-dialog) { padding: 0; align-items: flex-end; }
  .modal-overlay > .ef-dialog { width: 100%; max-height: 100dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .ef-dialog-fuss { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
}
/* Unter 360 px (UX-06): 13 px bleiben (seit 767 px), die Breite kommt aus engeren Abständen — bei 320 px hatte jedes
   Segment 59 px und «Abschluss» berührte den Rand. Kein Querscroll. */
@media (max-width: 359px) {
  .ef-karte { padding: var(--s3); }
  .sf-seg { gap: 2px; padding: 2px; }
  .sf-seg-btn { font-size: 13px; padding: 4px 1px; letter-spacing: -0.01em; }
}
/* Eigene Anstellungsarten (Task 16): «+ Anstellungsart» unter der Leiste und neben der Auswahl, Dialoge mit
   Grundtyp-Karten. Nur Tokens (DESIGN.md), Dunkelmodus über dieselben Tokens; 44 px Trefferfläche, 16 px Eingaben. */
.sf-art-neu-feld { margin-top: var(--s3); }
.sf-art-neu { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: var(--s2) var(--s3);
  border: 1.5px dashed var(--rand-feld, var(--border-hover)); border-radius: var(--r-sm); background: transparent; color: var(--gold-schrift, var(--gold-text));
  font: 600 14px/1.3 var(--font-body); cursor: pointer; transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.sf-art-neu:hover { background: var(--gold-soft); border-color: var(--gold-med); }
.sf-art-neu:focus-visible, .sf-art-neu-schmal:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-art-neu[aria-disabled="true"], .sf-art-neu-schmal[aria-disabled="true"] { cursor: not-allowed; color: var(--ink-leise, var(--ink-3)); }
.sf-art-neu[aria-disabled="true"]:hover { background: transparent; border-color: var(--rand-feld, var(--border-hover)); }
.sf-art-neu-grund { margin-top: var(--s2); font-size: 12px; line-height: 1.45; color: var(--ink-leise, var(--ink-3)); }
.sf-art-wahl-zeile { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; }
.sf-art-wahl-zeile select { flex: 1 1 180px; }
.sf-art-neu-schmal { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; white-space: nowrap; }
.sf-art-eigen { font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 8px; border-radius: var(--r-full);
  background: var(--gold-soft); color: var(--gold-schrift, var(--gold-text)); }

.ad-dialog { width: min(640px, 100%); }
.ad-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.ad-karte { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3);
  border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease); }
.ad-karte:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.ad-karte:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.ad-karte:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.ad-karte-wahl { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); }
.ad-karte-wahl:focus-visible { outline: none; }
.ad-karte-symbol { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-xs);
  background: var(--bg-inset); color: var(--ink-2); }
.ad-karte:has(input:checked) .ad-karte-symbol { background: var(--bg-card); color: var(--gold-schrift, var(--gold-text)); }
.ad-karte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-karte-titel { font-size: 14px; font-weight: 600; color: var(--ink); }
.ad-karte-satz { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ad-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.ad-paar .ef-feld { margin-bottom: 0; }
.ad-satz { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--bg-inset);
  font-size: 14px; line-height: 1.5; color: var(--ink); }
.ad-satz:empty { display: none; }
/* K-02 (Abnahme C2): Satz im Fuss neben «Anlegen», ruhig statt als Kasten; schmal steht er über den Knöpfen */
.ad-fuss { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.ad-fuss .ad-satz { flex: 1 1 260px; margin: 0; padding: 0; background: none; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ad-fuss-knoepfe { display: flex; gap: var(--s2); margin-left: auto; }
@media (max-width: 767px) {
  .ad-paar { grid-template-columns: minmax(0, 1fr); }
  .ad-fuss-knoepfe { flex: 1 1 100%; }
  .ad-karte { grid-template-columns: auto minmax(0, 1fr); }
  .ad-karte-symbol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-art-neu, .ad-karte { transition: none; }
}
/* ⋮ der Arten: «Deaktivieren» bei der letzten aktiven Art gesperrt, mit Grund (UX-09) */
#sfArtMenu .menu-gesperrt { cursor: not-allowed; color: var(--ink-leise, var(--ink-3)); flex-wrap: wrap; align-items: flex-start; }
#sfArtMenu .menu-gesperrt:hover { background: transparent; }
#sfArtMenu .menu-grund { flex-basis: 100%; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--ink-leise, var(--ink-3)); white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .ef-zeile, .ef-seg-btn, .ef-beispiel, .ef-knopf-icon, .sf-art, .sf-seg-btn, .sf-filter, .vs-zu, .vs-rahmen { transition: none; }
  .sf-skelett { animation: none; }
}
/* Vorgaben für neue Eintritte je Art (Task C19, js/vorgaben-je-art.js) — ruhig unter dem Kopf der Art, nur Tokens */
.vj { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--bg-card); }
.vj-titel { font-size: 15px; font-weight: 600; color: var(--ink); }
.vj-text { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.vj-demo { margin-top: var(--s2); font-size: 13px; color: var(--amber-text); background: var(--amber-soft); border-radius: var(--r-xs); padding: var(--s2) var(--s3); }
.vj-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s4); margin-top: var(--s3); }
.vj-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vj-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.vj-zeile { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.vj-zahl { max-width: 104px; font-variant-numeric: tabular-nums; }
.vj-einheit { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.vj-unter { font-size: 12px; line-height: 1.45; color: var(--ink-leise, var(--ink-3)); }
.vj-unter:empty, .vj-status:empty { display: none; }
.vj-status { font-size: 12px; font-weight: 600; color: var(--teal-text); }
/* Felder ausserhalb des Grundtyps (Zusatzauftrag 3.10.2026): eine ruhige Zeile statt vieler grauer Zeilen */
.sf-fremd { margin-top: var(--s2); font-size: 13px; line-height: 1.5; color: var(--ink-leise, var(--ink-3)); }
.sf-fremd-knopf { border: 0; background: none; padding: 4px 2px; min-height: 32px; font: 600 13px/1.4 var(--font-body);
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--r-xs); }
.sf-fremd-knopf:hover { color: var(--ink); }
.sf-fremd-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#sfAbschnitte > .sf-fremd { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border-light); }

/* Paket D: Felddialog — Gilt für, Pensum, Ausfüllen, Zweck */
.ef-gilt-listen { display: grid; gap: var(--s3); margin-top: var(--s2); }
.ef-gilt-gruppe { border: 1px solid var(--rand-feld, var(--border)); border-radius: var(--r-md, 8px); padding: var(--s2) var(--s3); min-width: 0; margin: 0; }
.ef-gilt-gruppe legend { font-size: 14px; font-weight: 600; padding: 0 4px; color: var(--ink); }
.ef-gilt-suche { margin-top: var(--s2); }
.ef-gilt-suche .ef-hilfe { margin-top: var(--s1); min-height: 18px; }
.ef-gilt-zahl { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.ef-gilt-kaesten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--s4); }
.ef-gilt-text { display: flex; flex-direction: column; min-width: 0; }
.ef-gilt-bereich { font-size: 12px; color: var(--ink-3); }
.ef-gilt-wahl[hidden], .ef-gilt-gruppe[hidden] { display: none; }
.ef-gilt-name mark, .ef-gilt-bereich mark { background: var(--gold-med); color: var(--ink); border-radius: 3px; padding: 0 1px; }
.ef-gilt-mehr { margin-top: var(--s1); }
.ef-hinweis { margin: var(--s1) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm, 8px); background: var(--gold-soft); color: var(--ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ef-pensum-feld { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.ef-gilt-wahl { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 16px; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; cursor: pointer; }
.ef-gilt-wahl input { width: 20px; height: 20px; flex: none; accent-color: var(--gold); }
.ef-gilt-wahl input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ef-pensum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: 14px; color: var(--ink); }
.ef-pensum .ef-eingabe { width: auto; min-width: 96px; }
.ef-pensum .ef-pensum-wert { width: 80px; min-width: 80px; }
.ef-gilt-zusammen { margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md, 8px); background: var(--gold-soft); color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ef-wahl--fest { opacity: .75; cursor: default; }
.ef-zweck, .ef-hinweis { font-size: 14px; color: var(--ink-2); background: var(--bg-inset); border-radius: var(--r-md, 8px); padding: var(--s2) var(--s3); margin: var(--s2) 0 var(--s3); }
.ef-marke-gilt { max-width: 100%; overflow-wrap: anywhere; background: var(--gold-soft); color: var(--ink); }
.sf-chip--eigen { background: var(--bg-inset); color: var(--ink-2); }
@media (max-width: 400px) {
  .ef-gilt-kaesten { grid-template-columns: minmax(0, 1fr); }
}

/* Erinnerung am Datumsfeld (Fristen je Person, 10.10.2026): eingerückt unter «An Ablauf erinnern», gleiche Bausteine wie
   «Pensum» (Zahl mit Einheit) und «Wer füllt aus?» (Wahlzeilen). */
.ef-frist { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s2) 0 0 var(--s6, 24px); }
.ef-frist-tage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 14px; color: var(--ink); }
.ef-frist-tage .ef-pensum-wert { width: 80px; min-width: 80px; }
.ef-frist-wer { border: 0; margin: 0; padding: 0; min-width: 0; }
.ef-frist-wer legend { padding: 0; margin-bottom: var(--s1); font-size: 14px; font-weight: 600; color: var(--ink); }
.ef-frist-name { display: flex; flex-direction: column; gap: var(--s1); }
.ef-frist-name label { font-size: 14px; font-weight: 600; color: var(--ink); }
.ef-marke-frist { background: var(--gold-soft); color: var(--ink); }
@media (max-width: 480px) {
  .ef-frist { margin-left: 0; }
}