/**
 * sections/abwesenheiten/abwesenheiten.css — Startseite „Abwesenheiten" (Modul hr).
 *
 * Self-scoped `.abw-*` unter der Section-Wurzel. NUR Layout und Rhythmus dieser
 * Fläche — jeder Baustein (AbsenceCalendar, Pills, EmptyState, PageToolbar,
 * app-cta-btn) bringt seine Optik selbst mit. Vier Breakpoints.
 *
 * KARTEN-SPRACHE: eine Karte = weiße Fläche mit Haarlinien-Rahmen und einem
 * UNGETÖNTEN Kopf (nur Trennlinie). Der frühere graue Kopfbalken stapelte auf
 * der ohnehin gerahmten Section-Fläche eine dritte Kastenebene — die Seite las
 * sich als Kästen-Raster statt als Inhalt. Whitespace trennt hier, nicht Farbe.
 *
 * Typo-Staffelung: Karten-Titel --fs-card-title/600, Meta --fs-meta, Inhalt
 * --fs-body. Ein Karten-Titel trägt NIE dieselbe Größe UND Stärke wie die
 * Zeilen darunter.
 */

.abw-wrap { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); }

/* ── Karte ────────────────────────────────────────────────────────────────── */
.abw-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #fff);
  overflow: hidden;
}
.abw-card-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--lod-gray-100);
}
.abw-card-titel {
  margin: 0; font-size: var(--fs-card-title, 14px); font-weight: var(--fw-semibold);
  color: var(--color-text); letter-spacing: -.01em; flex-shrink: 0;
}
.abw-card-meta {
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abw-card-body { flex: 1 1 auto; min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4); }
/* Leere Karte: den Empty-State in der verfügbaren Höhe zentrieren. Die beiden
   Spalten sind bewusst gleich hoch (stretch) — ein oben klebender Empty-State
   ließ darunter ~215px Nichts stehen und die Karte sah defekt aus, statt „hier
   ist nichts" zu sagen. */
.abw-card-body:has(> .empty-state) { display: flex; align-items: center; justify-content: center; }
/* Der Kalender bringt seinen eigenen Rahmen mit — doppelte Kanten vermeiden. */
.abw-card-body--flush { padding: var(--space-3); }

/* ── Anspruchs-Leiste ÜBER dem Kalender ───────────────────────────────────── */
/* Karte OHNE Kopf: die Kontonamen („Urlaub", „Sonderurlaub") sind die Beschriftung
   — ein zusätzlicher Titel „Mein Anspruch" wäre eine dritte Kastenebene über
   derselben Aussage und hätte den Kalender ~40px weiter nach unten gedrückt.
   Ziel ist EINE Zeile pro Konto (~56px), nicht eine Karte. */
.abw-anspruch-leiste {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #fff);
}
.abw-anspruch-note {
  margin: var(--space-2) 0 0; padding-top: var(--space-2);
  border-top: 1px solid var(--lod-gray-100);
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
}
/* In der breiten Leiste würde `margin-left: auto` das „von 57 Tagen" ~1000px
   von der Legende wegschieben und die Zeile in zwei Inseln reißen. Hier liest
   die Legende als EIN Satz: „24,50 genommen · 32,50 frei · von 57 Tagen". */
.abw-anspruch-leiste .abw-konto-von { margin-left: 0; }

/* ── Details-Zeile UNTER dem Kalender ─────────────────────────────────────── */
/* Zwei gleich hohe Spalten: „Wer fehlt" + „Meine Abwesenheiten". `stretch` ist
   die Kernkorrektur — sonst hängt die kürzere Karte in der Luft und die
   Unterkante der Zeile franst aus. */
.abw-details {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4);
  align-items: stretch; min-width: 0;
}

/* ── Entscheidungs-Band über dem Kalender ────────────────────────────────── */
/* Das EINZIGE, was über dem Kalender stehen darf, und nur wenn wirklich etwas
   offen ist: ein Wegweiser auf die Liste weiter unten. Bewusst eine Zeile hoch
   (~44px) statt einer Karte — eine Karte hätte den Kalender wieder nach unten
   gedrückt, genau das Problem, das der Umbau löst. */
/* `.app-scope`-Präfix ist PFLICHT: app-scope.css setzt `.app-scope button
   { border: none; background: none; padding: 0 }` — mit einer Klasse allein
   gewinnt diese Regel (gemessen: das Band war 17px statt 44px hoch). */
.app-scope .abw-todo-bar {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2-5, 10px) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--lod-amber-500) 45%, var(--lod-gray-200));
  border-left: 3px solid var(--lod-amber-500);
  border-radius: var(--radius-lg, 10px);
  background: color-mix(in srgb, var(--lod-amber-500) 8%, white);
  text-align: left;
  transition: background var(--duration-quick) var(--ease-standard);
}
.app-scope .abw-todo-bar:hover { background: color-mix(in srgb, var(--lod-amber-500) 14%, white); }
.app-scope .abw-todo-bar:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.abw-todo-bar .ui-ico img { opacity: .8; }
.abw-todo-bar-text {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abw-todo-bar-cta {
  display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0;
  font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold); color: var(--lod-amber-600);
}

/* Ziel-Hervorhebung nach dem Sprung: ohne sie landet man im Nirgendwo und
   weiß nicht, welcher Block gemeint war. */
.abw-card--todo.is-hervorgehoben {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lod-amber-500) 35%, transparent);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}

/* ── Toolbar-Controls (im PageToolbar-CENTER-Slot) ───────────────────────── */
/* Monats-Zeile kommt aus dem SSOT LoD.MonthSwitcher.buildNavRow (app-month-nav-row)
   — die frühere handgebaute .abw-monat-label-Fassung ist entfallen. */
.abw-controls { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; }

/* Zeilen-Filter „Nur Abwesende": Toggle im Ton der Toolbar-Knöpfe, aktiv in
   Markenfarbe (ein aktiver Filter MUSS sich vom Rest unterscheiden, sonst
   erklärt sich ein halb leeres Gitter nicht). Die Zahl ist eine Ziffernpille,
   damit sie nicht mit dem Label verschwimmt. */
.app-scope .abw-filter-pille { flex-shrink: 0; gap: var(--space-1-5); }
.app-scope .abw-filter-pille[disabled] { opacity: .5; cursor: default; }
.app-scope .abw-filter-pille.is-active {
  border-color: var(--brand-default); color: var(--lod-darkblue);
  background: color-mix(in srgb, var(--brand-default) 12%, white);
}
.abw-filter-zahl {
  font-size: var(--fs-caption, 11px); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; color: var(--color-text-muted);
  padding: 0 var(--space-1-5); border-radius: var(--radius-pill, 999px);
  background: var(--lod-gray-100);
}
.abw-filter-zahl:empty { display: none; }
.app-scope .abw-filter-pille.is-active .abw-filter-zahl {
  background: color-mix(in srgb, var(--brand-default) 22%, white); color: var(--lod-darkblue);
}

/* Der Split-CTA („Urlaub beantragen" + Chevron) kommt aus dem SSOT
   PageToolbar.buildPrimaryButton({ menu }) und steht kanonisch im Page-Header
   (SectionHeader.set) — die früheren bespoke `.abw-cta`-Regeln samt
   Spezifitäts-Begründung leben generisch als `.app-cta-split` in
   components/toolbar/toolbar.css weiter. */

/* ── Mein Anspruch: Balken je Anspruchskonto ─────────────────────────────── */
/* Zwei Zonen: links Identität + Held-Zahl, rechts Balken + Legende. Der Balken
   nimmt die Restbreite — genau dafür ist die Fläche da. (Vorher stand hier eine
   einzelne KPI-Kachel, deren Balken auf 1500px Breite in ~1000px Leerraum
   endete; die Kachel sah aus wie ein Grid mit fehlenden Elementen.) */
.abw-konto {
  display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  align-items: center; column-gap: var(--space-6); row-gap: var(--space-2);
}
.abw-konto + .abw-konto { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--lod-gray-100); }
.abw-konto-ident { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* Lange Kontonamen („UNBEZAHLTER SONDERURLAUB") brauchen Umbruch: Großschrift
   plus letter-spacing macht sie ~40% breiter als der Klartext, und ohne wrap
   quetschte der „unbezahlt"-Chip sie in eine unlesbare Spalte. */
.abw-konto-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold); line-height: 1.3;
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted);
}
.abw-konto-tag {
  padding: 1px var(--space-1-5); border-radius: var(--radius-pill-sm);
  background: var(--lod-gray-100); color: var(--lod-gray-600);
  font-size: var(--fs-badge, 11px); font-weight: var(--fw-medium);
  letter-spacing: 0; text-transform: none;
}
.abw-konto-hero { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
/* Held-Zahl in der KpiTiles-Sprache (gleiche Display-Schrift, Größe, Gewicht
   und Ton-Farben) — die Zahl darf sich nicht anders anfühlen als die
   Kennzahl-Kacheln der übrigen Tabs. Töne aus LoD.urlaubTone. */
.abw-konto-zahl {
  font-family: var(--lod-font-display, inherit);
  font-size: var(--kpi-value-lg, 26px); font-weight: var(--fw-bold); line-height: 1.05;
  color: var(--lod-darkblue-700); font-variant-numeric: tabular-nums;
}
.abw-konto-hero--success .abw-konto-zahl { color: var(--lod-turquoise-900); }
.abw-konto-hero--warning .abw-konto-zahl { color: var(--lod-amber-600); }
.abw-konto-hero--danger  .abw-konto-zahl { color: var(--lod-danger); }
.abw-konto-einheit { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); white-space: nowrap; }

.abw-konto-viz { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* Gestapelter Balken: Verbrauch von links, der REST ist die unbedeckte Spur.
   Die Segmente sitzen in einem Flex-Container und tragen ihre Breite als
   --w (Prozent des Anspruchs) — keine absolute Positionierung nötig. */
/* Höhe 6px statt 10px und ein aufgehelltes Grün (Kyle-QA: „zu krass"). Der
   Balken lief über die ganze Seitenbreite und war damit das farbstärkste Objekt
   der Fläche — er hat dem Kalender die Aufmerksamkeit weggenommen, obwohl DER
   die Seite ist. Die Aussage trägt die Held-Zahl, der Balken illustriert sie nur;
   die Semantik (Grün = verbraucht) bleibt, nur die Lautstärke sinkt. */
.abw-konto-bar {
  display: flex; align-items: stretch; overflow: hidden;
  height: 6px; border-radius: var(--radius-pill-sm);
  background: var(--lod-gray-200);
}
.abw-konto-seg { flex: 0 0 auto; width: var(--w, 0); min-width: 0; }
.abw-konto-seg--genommen  { background: color-mix(in srgb, var(--lod-success) 72%, white); }
.abw-konto-seg--verfallen { background: var(--lod-gray-400); }
/* Beantragt = noch nicht sicher → schraffiert, gleiche Sprache wie die
   beantragten Pills im Team-Kalender. */
.abw-konto-seg--beantragt {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--lod-success) 26%, white) 0 4px,
    color-mix(in srgb, var(--lod-success) 52%, white) 4px 8px);
}
.abw-konto-legende {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
  font-size: var(--fs-meta, 12px); color: var(--color-text-secondary);
}
.abw-konto-legende li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.abw-konto-von { margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.abw-konto-dot { width: 8px; height: 8px; border-radius: var(--radius-circular); flex-shrink: 0; }
/* Ton identisch zum Balken-Segment — Legende und Balken müssen dieselbe Farbe
   zeigen, sonst liest man sie nicht als dieselbe Größe. */
.abw-konto-dot--genommen  { background: color-mix(in srgb, var(--lod-success) 72%, white); }
.abw-konto-dot--verfallen { background: var(--lod-gray-400); }
.abw-konto-dot--frei      { background: var(--lod-gray-200); box-shadow: inset 0 0 0 1px var(--lod-gray-300); }
.abw-konto-dot--beantragt {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--lod-success) 26%, white) 0 2px,
    color-mix(in srgb, var(--lod-success) 52%, white) 2px 4px);
}

/* ── Segment-Umschalter (Heute / Diese Woche) ─────────────────────────────── */
.abw-seg { display: inline-flex; gap: 2px; padding: 2px; margin-left: auto; background: var(--lod-gray-100, #eef0f3); border-radius: var(--radius-md); flex-shrink: 0; }
.app-scope .abw-seg-btn {
  padding: var(--space-1) var(--space-2-5); border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-meta, 12px); font-weight: var(--fw-medium); color: var(--lod-gray-700);
  border-radius: var(--radius-sm);
}
.app-scope .abw-seg-btn:hover { color: var(--lod-darkblue); }
.app-scope .abw-seg-btn.is-active { background: var(--color-surface, #fff); color: var(--lod-darkblue); font-weight: var(--fw-semibold); box-shadow: var(--shadow-2, 0 1px 2px rgba(0,0,0,.08)); }

/* ── „Wer fehlt": Personen-Chips statt Langliste ─────────────────────────── */
/* Als vertikale Liste wuchs dieser Block mit jeder abwesenden Person und riss
   die Zeilenhöhe gegen den Nachbarblock auf. Als umbrechendes Chip-Raster
   bleibt er flach und vergleichbar. */
.abw-wer-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
}
.abw-wer-chip {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0;
  padding: var(--space-2); border-radius: var(--radius-md);
  background: var(--lod-gray-50);
}
/* Beantragt (noch nicht genehmigt) = gedämpft, damit „sicher weg" vom
   „vielleicht weg" unterscheidbar bleibt. */
.abw-wer-chip.is-beantragt { opacity: .66; }
.abw-wer-av { flex-shrink: 0; display: inline-flex; }
.abw-wer-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.abw-wer-name { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-wer-art {
  display: flex; align-items: center; gap: var(--space-1-5); min-width: 0;
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abw-wer-dot { width: 6px; height: 6px; border-radius: var(--radius-circular); background: var(--c, var(--lod-gray-400)); flex-shrink: 0; }

/* ── „Meine Abwesenheiten" ───────────────────────────────────────────────── */
.abw-meine-liste, .abw-gen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.abw-meine-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) var(--space-1);
  cursor: pointer; border-radius: var(--radius-md);
}
.abw-meine-row + .abw-meine-row, .abw-gen-row + .abw-gen-row { border-top: 1px solid var(--lod-gray-100); }
.abw-meine-row:hover, .abw-gen-row:hover { background: var(--lod-gray-50); }
.abw-meine-row:focus-visible, .abw-gen-row:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
/* Farbstrich in der Farbe der Abwesenheitsart (kommt aus dem Katalog). */
.abw-meine-strich { width: 4px; align-self: stretch; min-height: 30px; border-radius: var(--radius-pill-sm); background: var(--lod-gray-300); }
.abw-meine-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.abw-meine-titel { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abw-meine-zeit { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „und N weitere" führt zur Vollliste (Mein Bereich → Meine Anträge). War ein
   stummes <p>: die Startseite zeigt bewusst nur einen Ausschnitt (MAX) und der
   Export liegt drüben — ohne Weg dorthin endete die Liste im Nichts.
   PRÄFIX `.abw-wrap` ist PFLICHT, nicht Kosmetik: `.app-scope button` (0,1,1)
   plättet jede Ein-Klassen-Regel (0,1,0) und nähme dem Knopf Farbe und Polster
   (siehe audit:button-reset). */
.abw-wrap .abw-mehr {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin: var(--space-2) 0 0; padding: var(--space-1) 0;
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
  background: none; border: none; cursor: pointer; text-align: left;
}
.abw-wrap .abw-mehr:hover { color: var(--brand-default); text-decoration: underline; }
.abw-wrap .abw-mehr:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 2px; border-radius: var(--radius-sm, 4px); }

/* ── „Zu entscheiden": Aufgaben-Band mit Akzentkante ─────────────────────── */
/* Der Block ist eine PFLICHT, keine Information — deshalb als einziger Block
   der Seite farbig markiert (Amber-Kante links). Er erscheint nur, wenn
   wirklich etwas offen ist. */
.abw-card--todo { border-color: color-mix(in srgb, var(--lod-amber-500) 45%, var(--lod-gray-200)); }
.abw-card--todo .abw-card-head { background: color-mix(in srgb, var(--lod-amber-500) 8%, white); border-bottom-color: color-mix(in srgb, var(--lod-amber-500) 25%, white); }
.abw-gen-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  min-height: 52px; padding: var(--space-2) var(--space-1);
  cursor: pointer; border-radius: var(--radius-md);
}
.abw-gen-cta {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold); color: var(--lod-darkblue);
  white-space: nowrap;
}

/* ── Kalender-Kopf: Planungs-Hinweis ─────────────────────────────────────── */
.abw-plan-hint {
  display: inline-flex; align-items: center; gap: var(--space-1-5); margin-left: auto;
  padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-pill-sm);
  background: var(--lod-darkblue-50); color: var(--lod-darkblue);
  font-size: var(--fs-meta, 12px); font-weight: var(--fw-medium); white-space: nowrap; flex-shrink: 0;
}

/* ── Planungs-Popover (nach der Bereichs-Auswahl im Kalender) ────────────── */
.abw-plan-pop { display: flex; flex-direction: column; min-width: 0; }
.abw-plan-pop-kopf {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--space-2-5) var(--space-3); border-bottom: 1px solid var(--lod-gray-100);
}
.abw-plan-pop-zeit { font-size: var(--fs-body, 14px); font-weight: var(--fw-semibold); color: var(--color-text); }
.abw-plan-pop-tage { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.abw-plan-pop-liste { display: flex; flex-direction: column; padding: var(--space-1); }
/* KEIN `.app-scope`-Präfix: das Popover-Panel hängt an document.body (Popover-
   SSOT), außerhalb der App-Scope-Wurzel. Mit Präfix griff die Regel nicht und
   die Knöpfe fielen auf den Browser-Default zurück (graue Kästen mit Rahmen).
   Deshalb hier der vollständige Button-Reset, Optik = .app-popover-menu-item. */
.abw-plan-pop-art {
  display: flex; align-items: center; gap: var(--space-2-5); width: 100%;
  padding: var(--space-2) var(--space-3); border: none; background: transparent;
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--lod-gray-700);
}
.abw-plan-pop-art:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); }
.abw-plan-pop-art:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -2px; }
.abw-plan-pop-farbe { width: 10px; height: 10px; border-radius: var(--radius-circular); background: var(--c, var(--lod-gray-400)); flex-shrink: 0; }
.abw-plan-pop-rest {
  margin: 0; padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--lod-gray-100);
  font-size: var(--fs-meta, 12px); color: var(--color-text-muted);
}
.abw-plan-pop-leer { margin: 0; padding: var(--space-3); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); }
/* Team-Kapazität im gezogenen Zeitraum. Neutral = reine Auskunft, `is-verletzt`
   = eine Firmen-Obergrenze ist überschritten (gleicher Ton wie der Warn-Banner
   im Antrags-Drawer, damit dieselbe Aussage nicht zweimal aussieht). */
/* Steht ÜBER der Arten-Liste (Reihenfolge = Wichtigkeit), deshalb Trennlinie
   nach unten statt nach oben. */
.abw-plan-pop-konflikt {
  margin: 0; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--lod-gray-100);
  font-size: var(--fs-meta, 12px); color: var(--color-text-secondary);
}
.abw-plan-pop-konflikt.is-verletzt {
  background: var(--status-warning-bg); color: var(--status-warning-fg);
  font-weight: var(--fw-medium);
}

/* ── Notebook 1000–1399px ────────────────────────────────────────────────── */
@media (max-width: 1399px) {
  .abw-wrap { gap: var(--space-3); }
  .abw-details { grid-template-columns: 1.3fr 1fr; gap: var(--space-3); }
  .abw-konto { column-gap: var(--space-4); grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); }
  .abw-konto-zahl { font-size: var(--kpi-value-md, 22px); }

  .abw-wer-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ── Tablet 600–999px: die zwei Spalten stapeln ──────────────────────────── */
/* Ab hier wohnen die Kalender-Controls im Kalender-Kopf (JS: _placeControls) —
   `.abw-cal-controls` ist der Aufnahme-Slot und nimmt die ganze Restbreite. */
@media (max-width: 999px) {
  .abw-details { grid-template-columns: minmax(0, 1fr); }
  /* Zwei Reihen im Kalender-Kopf: Titel + Planungs-Hinweis oben, die Controls
     als eigene Reihe darunter. In EINER Reihe schoben sie sich gegenseitig aus
     dem Bild (gemessen bei 820px: Hinweis über dem Bereich-Filter). */
  .abw-card--kalender .abw-card-head { flex-wrap: wrap; }
  /* order dreht die DOM-Folge um: der Hinweis gehoert neben den Titel in Reihe 1,
     die 100%-breite Control-Reihe darunter. Ohne das landete der Hinweis HINTER
     der vollbreiten Control-Reihe und der Kopf war drei Reihen hoch. */
  .abw-card--kalender .abw-plan-hint { order: 1; margin-left: auto; }
  .abw-card--kalender .abw-cal-controls { order: 2; }
  /* Der Monat steht ab hier in der Nav direkt darunter — zweimal „Juli 2026"
     im selben Kopf ist Rauschen, und abgeschnitten („Juli …") sinnlos. */
  .abw-cal-monat { display: none; }
  .abw-cal-controls { display: inline-flex; align-items: center; width: 100%; min-width: 0; }
}
/* Über 999px ist der Slot leer und darf keinen Gap in der Kopfzeile aufreißen. */
.abw-cal-controls:empty { display: none; }

/* ── Mobile <600px: alles einspaltig, Held-Zahl über dem Balken ──────────── */
@media (max-width: 599px) {
  .abw-card-head { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .abw-card-meta { white-space: normal; }
  .abw-card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
  .abw-card-body--flush { padding: var(--space-2); }
  .abw-anspruch-leiste { padding: var(--space-3); }
  .abw-konto { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .abw-konto-legende { gap: var(--space-1) var(--space-3); }
  .abw-konto-von { margin-left: 0; width: 100%; }
  /* In der Anspruchs-Leiste NICHT auf eine eigene Zeile: „von 57 Tagen" gehört
     zum selben Satz wie die Legende und kostet sonst 20px über dem Kalender —
     auf 390px ist jede Zeile über dem Gitter teuer. */
  .abw-anspruch-leiste .abw-konto-von { width: auto; }
  .abw-wer-grid { grid-template-columns: minmax(0, 1fr); }
  /* Gleiche Spezifität wie die ≤999px-Regel, sonst gewinnt dort `margin-left:
     auto` und der Hinweis klebt in seiner eigenen Zeile am rechten Rand. */
  .abw-card--kalender .abw-plan-hint { margin-left: 0; white-space: normal; }
  .abw-seg { margin-left: 0; }
  /* Im Kalender-Kopf darf die Control-Reihe umbrechen und die volle Breite
     nehmen — auf 390px passen Monats-Nav, „Heute" und Bereich nicht in eine
     Zeile, und abgeschnitten wäre schlimmer als zweizeilig. */
  .abw-cal-controls { margin-left: 0; width: 100%; }
  .abw-controls { flex-wrap: wrap; width: 100%; }

  /* Band: die CTA-Beschriftung fällt weg, der Chevron bleibt — auf 390px ist
     die Zahl im Text die Aussage, „Anzeigen" wäre nur Breitenfresser. */
  .app-scope .abw-todo-bar { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .abw-todo-bar-text { white-space: normal; }
  .abw-todo-bar-cta { font-size: 0; gap: 0; }
  /* Der Filter darf hier die ganze Zeile nehmen statt neben „Heute" zu quetschen. */
  .app-scope .abw-filter-pille { flex: 1 1 auto; justify-content: center; }
}