/* benachrichtigungen.css — Mein-Bereich Benachrichtigungen-Tab (Paket E5.3 Redesign)

   Quelle: extrahiert aus mein-bereich.css ("Benachrichtigungen"-Block).
   Inhalt 1:1.

   Konsumenten: web/js/sections/benachrichtigungen.js — Section gemounted
   im `#tab-content-benachrichtigungen`. Zeigt Notifikations-Kategorien als
   Cards (.kat-card aus components.css mit notif-Variante) plus Bulk-Menu
   im Header.

   Kategorie-Farben-Mapping ist hier `data-kat`-basiert (Dataverse-OptionSet-IDs).
   Mention-Kategorie (636509007) hat eigene Akzentfarbe in mentions.css.

   Matrix-Tabelle (`.benachr-matrix*`) liegt separat in
   benachrichtigungen-matrix.css (eigene Sub-Komponente innerhalb der
   Section).
   ========================================================================== */

/* Wrapper: Flex-Spalte, eigener Scroll-Container.
   Leitstand-Prinzip: das Grau (--color-bg) ist AUSSCHLIESSLICH Gutter/Negativ-
   raum zwischen weissen Karten und traegt NIE Text. Jedes textfuehrende Element
   (Krone, Rail, Buehne, jede Zeile) sitzt auf --color-surface — "dunkler Text
   auf grau" ist damit strukturell unmoeglich. */
.benachr-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* Sticky Header: bleibt beim Scrollen oben.
 Paket position: sticky + z-index ergaenzt —
 vorher behauptete der CSS-Kommentar zwar "Sticky Header", aber die
 sticky-Property fehlte. Auf Desktop ohnehin egal (Header scrollt nicht weg,
 weil .benachr-content den Scroll uebernimmt), auf Mobile kritisch (Panel
 scrollt, Header rutscht sonst mit dem Content nach oben raus). */
.benachr-header {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.benachr-header-text { flex: 1; min-width: 240px; }
.benachr-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.benachr-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.benachr-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Save-Button mit Änderungs-Badge */
.benachr-save-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1-5);
  margin-left: var(--space-1);
  border-radius: var(--radius-circular);
  background: rgba(255, 255, 255, 0.25);
  color: var(--brand-text-on);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.fk-buchen[disabled] .benachr-save-badge { display: none; }

/* Scroll-Container: nimmt restliche Höhe, scrollt intern */
.benachr-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-5) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scrollbar-width: thin;
}
.benachr-content::-webkit-scrollbar { width: 10px; }
.benachr-content::-webkit-scrollbar-track { background: transparent; }
.benachr-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-circular);
  border: 3px solid var(--color-bg);
}
.benachr-content::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* Kategorie-Akzentfarben — data-kat sind die String-Keys aus EVENT_UI_
   KATEGORIEN. Rail-Eintrag, Kategorie-Bühne und Abweichungs-Zeile teilen sich
   das Mapping: --kat-accent (Linksleiste/Punkt/Icon) + --kat-accent-bg (Chip). */
[data-kat="zugang"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)         { --kat-accent: var(--status-info-fg);    --kat-accent-bg: var(--status-info-bg); }
[data-kat="aufgabe"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)        { --kat-accent: var(--lod-amber-700);     --kat-accent-bg: var(--lod-amber-50); }
[data-kat="mention"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)        { --kat-accent: var(--lod-violet-700);    --kat-accent-bg: var(--lod-violet-50); }
[data-kat="anfrage"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)        { --kat-accent: var(--status-success-fg); --kat-accent-bg: var(--status-success-bg); }
[data-kat="verkaufschance"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row) { --kat-accent: var(--brand-default);     --kat-accent-bg: var(--brand-light); }
[data-kat="vertrag"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)        { --kat-accent: var(--status-danger-fg);  --kat-accent-bg: var(--status-danger-bg); }
[data-kat="kpi"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)            { --kat-accent: var(--lod-violet-700);    --kat-accent-bg: var(--lod-violet-50); }
[data-kat="personal"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)       { --kat-accent: var(--status-success-fg); --kat-accent-bg: var(--status-success-bg); }
[data-kat="fuhrpark"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)       { --kat-accent: var(--lod-amber-700);     --kat-accent-bg: var(--lod-amber-50); }
[data-kat="projekt"]:is(.benachr-rail-item, .benachr-katview, .benachr-abw-row)        { --kat-accent: var(--status-info-fg);    --kat-accent-bg: var(--status-info-bg); }

/* ══ Leitstand: Krone (spannt) + Rail + Bühne ═══════════════════════════
   Drei weisse Karten auf grauem Gutter. Das Skelett wird EINMAL gebaut;
   Interaktionen fassen nur einzelne Knoten an (kein Springen). */
.benachr-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.benachr-context { grid-column: 1 / -1; }
.benachr-context,
.benachr-rail,
.benachr-stage {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Krone: Profil-Status (links) + Ruhezeiten (rechts) ── */
.benachr-context {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  flex-wrap: wrap;
}
.benachr-crown-profil {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 240px;
  min-width: 0;
  padding: var(--space-1-5) var(--space-2);
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background var(--duration-fast);
}
.benachr-crown-profil:hover { background: var(--brand-light); }
.benachr-crown-profil-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand-light);
}
.benachr-crown-profil-icon img { width: 19px; height: 19px; }
.benachr-crown-profil-texts { display: flex; flex-direction: column; min-width: 0; }
.benachr-crown-caption {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.benachr-crown-value {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benachr-crown-dev {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-default);
  background: var(--brand-light);
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-circular);
}
.benachr-crown-profil-go { margin-left: auto; flex-shrink: 0; display: inline-flex; opacity: 0.45; }
.benachr-crown-profil-go img { width: 18px; height: 18px; }

/* ── Rail: sticky Navigation ── */
.benachr-rail {
  position: sticky;
  top: var(--space-2);
  align-self: start;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-px);
  min-height: 0;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.benachr-rail-group { display: flex; flex-direction: column; gap: var(--space-px); }
.benachr-rail-group + .benachr-rail-group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.benachr-rail-caption {
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.benachr-rail-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-1-5) var(--space-2);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: left;
  transition: background var(--duration-fast);
}
.benachr-rail-item:hover { background: var(--brand-light); }
.benachr-rail-item.is-active {
  background: var(--kat-accent-bg, var(--brand-light));
  border-left-color: var(--kat-accent, var(--brand-default));
  font-weight: var(--fw-semibold);
}
.benachr-rail-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circular);
  background: var(--kat-accent, var(--color-text-muted));
}
/* Einheitliches Rail-Icon-Chip: neutrales Chip für Profil/Geräte, akzent-
   getintetes für Kategorien (.is-kat). Ersetzt die frühere Punkt-vs-Icon-
   Mischung — die Rail liest sich jetzt als eine hochwertige Navigations-Liste. */
.benachr-rail-iconchip {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  transition: background var(--duration-fast);
}
.benachr-rail-iconchip img { width: 16px; height: 16px; opacity: 0.75; }
.benachr-rail-iconchip.is-kat {
  background: var(--kat-accent-bg, var(--color-bg-muted));
}
/* Volles Icon auf getinteter Kategorie-Fläche — dieselbe Optik wie das Icon-Chip
   im Kategorie-Kopf (.benachr-katview-icon). */
.benachr-rail-iconchip.is-kat img { opacity: 1; }
.benachr-rail-item.is-active .benachr-rail-iconchip { background: var(--kat-accent-bg, var(--brand-light)); }
.benachr-rail-item.is-active .benachr-rail-iconchip img { opacity: 1; }
.benachr-rail-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.benachr-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benachr-rail-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benachr-rail-count {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.benachr-rail-dirty {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circular);
  background: var(--brand-default);
  display: none;
}
.benachr-rail-item.has-dirty .benachr-rail-dirty { display: inline-block; }

/* ── Bühne: genau eine Seite ── */
.benachr-stage { padding: var(--space-4); min-width: 0; }
.benachr-stage-head { margin-bottom: var(--space-3); }
.benachr-stage-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.benachr-stage-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Kategorie-Titelzeile in der Bühne: getintetes Icon-Chip trägt die Kategorie-
   Identität (kein zusätzlicher Akzent-Balken — das war doppelt gemoppelt), eine
   Hairline nach unten setzt den Kopf sauber von der Matrix ab. */
.benachr-katview-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.benachr-katview-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--kat-accent-bg, var(--color-bg-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kat-accent, var(--color-border)) 22%, transparent);
}
.benachr-katview-icon img { width: 20px; height: 20px; }
.benachr-katview-titles { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.benachr-katview-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.benachr-katview-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

/* Kanal-Zusammenfassung in der Kategorie-Titelzeile: welche Kanaele sind fuer
   wie viele Ereignisse aktiv. Akzent-getint (Kategorie-Farbe). */
.benachr-kat-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
}
.benachr-kat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-circular);
  background: var(--kat-accent-bg, var(--color-bg-muted));
  color: var(--kat-accent, var(--color-text-muted));
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.benachr-kat-chip img { width: 12px; height: 12px; opacity: 0.75; }
.benachr-kat-chip--stumm {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: var(--fw-medium);
}

/* Mention-Kategorie (636509007) hat eigene Akzentfarbe — siehe mentions.css */


/* Kategorie-weite Sammel-Aktionen laufen ueber die Tri-State-Spalten-Toggles
   im Matrix-Kopf (mb-benachrichtigungen-matrix.css, .benachr-col-toggle) —
   das fruehere "Alle Ereignisse…"-Bulk-Dropdown ist entfernt. */

/* ──────────────────────────────────────────────────────────────────────
 Benachrichtigungen V2.0: Abschnitts-Kopf, Preset-Karten, Ruhezeiten,
 Dringend-Badge. Presets sind der Hauptbedienweg (Ein-Klick-Profil),
 die Matrix darunter die Feinjustierung.
 ────────────────────────────────────────────────────────────────────── */

.benachr-section-head { margin-top: var(--space-2); }
.benachr-section-head:first-child { margin-top: 0; }
.benachr-section-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.benachr-section-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Preset-Karten: 4er-Grid, Karte = Radio-Button */
.benachr-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.benachr-preset-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.benachr-preset-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-4);
}
.benachr-preset-card.is-active {
  border-color: var(--brand-default);
  box-shadow: 0 0 0 1px var(--brand-default);
  background: color-mix(in srgb, var(--brand-default) 4%, var(--color-surface));
}
.benachr-preset-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}
/* Icon-Tints pro Profil — dezenter Farbanker gegen die Weiss-in-Weiss-Flaeche */
.benachr-preset-card[data-preset="alles"] .benachr-preset-icon     { background: var(--brand-light); }
.benachr-preset-card[data-preset="empfohlen"] .benachr-preset-icon { background: var(--lod-amber-50); }
.benachr-preset-card[data-preset="wichtig"] .benachr-preset-icon   { background: var(--status-danger-bg); }
.benachr-preset-card[data-preset="ruhe"] .benachr-preset-icon      { background: var(--status-info-bg); }
.benachr-preset-card.is-active .benachr-preset-icon {
  background: color-mix(in srgb, var(--brand-default) 12%, transparent);
}
.benachr-preset-icon img { width: 20px; height: 20px; }
.benachr-preset-texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.benachr-preset-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.benachr-preset-dev {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  color: var(--brand-default);
  white-space: nowrap;
}
.benachr-preset-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.benachr-preset-check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: none;
}
.benachr-preset-check img { width: 18px; height: 18px; }
.benachr-preset-card.is-active .benachr-preset-check { display: inline-flex; }

/* Ruhezeiten-Zeile — lebt in der Krone (rechts), durch Hairline vom Profil-
   Status getrennt. Kompakt: Icon + Label + Zeitfelder + Switch. */
.benachr-ruhezeit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 340px;
  min-width: 0;
  padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-4);
  border-left: 1px solid var(--color-border);
}
.benachr-ruhezeit-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}
.benachr-ruhezeit[data-active="true"] .benachr-ruhezeit-icon {
  background: var(--brand-light);
}
.benachr-ruhezeit-icon img { width: 19px; height: 19px; }
.benachr-ruhezeit-texts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.benachr-ruhezeit-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.benachr-ruhezeit-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.benachr-ruhezeit-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Ruhezeit-Zeitfelder sind jetzt der app-eigene TimePicker (pickers.css) —
   die Hosts brauchen nur Shrink-Verhalten im Controls-Flex. */
.benachr-ruhezeit-timehost { flex-shrink: 0; }
.benachr-ruhezeit-sep {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.benachr-ruhezeit-toggle { margin-left: var(--space-2); }

/* ══ Profil-Cockpit (Benachrichtigungen V3) ═════════════════════════════
   Die Profil-Bühne ist ein vertikaler Stapel aus Sektionen (Presets →
   Abweichungen → Kanäle → Zusammenfassungen → Kategorien). Leere Sektions-
   Container (z.B. keine Abweichungen) verschwinden aus dem Fluss. */
.benachr-profil {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.benachr-profil > [data-bnp-sec]:empty { display: none; }

/* Pings-Schätzung in der Preset-Karte: EINE ruhige Kennzahl-Pille (Icon + Text),
   die frühere Fünf-Chip-Kanalaufschlüsselung ist entfallen. */
.benachr-preset-pings {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: var(--space-px) var(--space-1-5) var(--space-px) var(--space-1);
  border-radius: var(--radius-circular);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary, var(--color-text-muted));
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.benachr-preset-pings img { width: 12px; height: 12px; opacity: 0.65; }
.benachr-preset-card.is-active .benachr-preset-pings {
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
}
.benachr-preset-card.is-active .benachr-preset-pings img {
  opacity: 0.9;
}

/* Diff-Streifen unter dem Preset-Grid: reservierte Zeile (min-height), damit
   der Hover-Wechsel NIE Layout schiebt. */
.benachr-preset-diffstrip {
  min-height: 32px;
  display: flex;
  align-items: center;
  margin-top: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.benachr-diffstrip-hint { color: var(--color-text-muted); }
.benachr-diffstrip-active { color: var(--color-text-muted); }
.benachr-diffstrip-diff { color: var(--color-text); }
.benachr-diffstrip-diff b { font-weight: var(--fw-semibold); }

/* Abweichungs-Liste: eine Zeile pro abweichendem Ereignis */
.benachr-abw-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1-5);
  margin-left: var(--space-1);
  border-radius: var(--radius-circular);
  background: var(--brand-light);
  color: var(--brand-default);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
}
.benachr-abw-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.benachr-abw-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  flex-wrap: wrap;
}
.benachr-abw-texts {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.benachr-abw-title {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.benachr-abw-diffs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.benachr-abw-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-circular);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.7;
}
.benachr-abw-chip.is-plus { background: var(--brand-light); color: var(--brand-default); }
.benachr-abw-chip.is-minus { background: var(--color-bg-muted); color: var(--color-text-muted); }
.benachr-abw-revert {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.benachr-abw-revert:hover {
  background: var(--brand-light);
  border-color: var(--brand-default);
  color: var(--brand-default);
}

/* Reichweite: EINE leise Fußzeile statt Kachel-Raster + Puls-Box.
   Rahmenlos, nur eine Hairline nach oben trennt sie vom Rest. Betonte Zahl,
   gedämpftes Label — Situations-Info, die das Auge nicht festhält. */
.benachr-reach {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light, var(--color-border));
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.benachr-reach-lead {
  font-weight: var(--fw-medium);
}
.benachr-reach-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.benachr-reach-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.benachr-reach-stat img { width: 13px; height: 13px; opacity: 0.55; }
.benachr-reach-stat b {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.benachr-reach-stat.is-leer { opacity: 0.5; }
.benachr-reach-stat.is-leer b { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.benachr-reach-puls {
  margin-left: auto;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-light, var(--color-border));
  white-space: nowrap;
}

/* Zustellzeiten der Zusammenfassungen */
.benachr-zustell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.benachr-zustell-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  flex-wrap: wrap;
}
.benachr-zustell-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}
.benachr-zustell-icon img { width: 19px; height: 19px; }
.benachr-zustell-texts {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.benachr-zustell-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.benachr-zustell-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.benachr-zustell-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
/* Zeitfelder = app-eigener TimePicker (pickers.css); hier nur noch der native
   Wochentag-<select>. */
.benachr-zustell-timehost { flex-shrink: 0; }
.benachr-zustell-controls select {
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.benachr-zustell-controls select:hover { border-color: var(--color-border-hover); }
.benachr-zustell-controls select:focus-visible {
  outline: none;
  border-color: var(--brand-default);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 15%, transparent);
}

/* Die Kategorien-Minimap ist entfallen (Dopplung der Rail-Navigation) —
   ihre Optik (Akzent-Icon-Chip) lebt jetzt in den Rail-Kategorie-Einträgen. */

/* Dringend-Badge in der Ereignis-Zeile (Prioritaet HOCH) */
.benachr-row-prio {
  display: inline-block;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────────
 Responsive (extrahiert aus mein-bereich.css "Responsive"-Block,
 ).
 ────────────────────────────────────────────────────────────────────── */

/* Notebook (≤1399px): Content kompakter, Presets 2-spaltig */
@media (max-width: 1399px) {
  .benachr-content { padding: var(--space-4) var(--space-4) var(--space-6); }
  .benachr-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bühne wird schmaler (Rail bleibt 240px) — Text-Mindestbreiten reduzieren,
     damit Chips/Controls nicht vorzeitig umbrechen */
  .benachr-abw-texts { min-width: 160px; }
  .benachr-zustell-texts { min-width: 160px; }
}

/* Tablet (≤999px): Krone stapelt (Profil oben, Ruhezeit darunter ohne
   Hairline), Leitstand wird einspaltig — Rail als volle Liste über der Bühne
   (kein Springen, nur vertikaler Stapel). */
@media (max-width: 999px) {
  .benachr-header { padding: var(--space-3) var(--space-4); }
  .benachr-content { padding: var(--space-3) var(--space-3) var(--space-6); gap: var(--space-3); }
  .benachr-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .benachr-context { flex-direction: column; align-items: stretch; }
  /* Im Spaltenlayout dürfen die Krone-Kinder NICHT vertikal wachsen
     (flex-grow würde die Karte auf ~600px aufblähen) — natürliche Höhe. */
  .benachr-crown-profil,
  .benachr-context .benachr-ruhezeit { flex: 0 0 auto; }
  .benachr-ruhezeit { border-left: 0; border-top: 1px solid var(--color-border); padding-left: var(--space-2); flex-wrap: wrap; }
  .benachr-ruhezeit-controls { width: 100%; justify-content: flex-end; }
  .benachr-shell { grid-template-columns: 1fr; }
  .benachr-rail {
    position: static;
    max-height: none;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .benachr-rail-group { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
  .benachr-rail-group + .benachr-rail-group { margin-top: 0; padding-top: 0; border-top: 0; }
  .benachr-rail-caption { display: none; }
  .benachr-rail-item { min-height: 44px; }
  .benachr-rail-sub { display: none; }
  .benachr-zustell-controls { width: 100%; justify-content: flex-end; }
  /* Controls stehen jetzt auf eigener Zeile — Texte brauchen keine Mindestbreite */
  .benachr-abw-texts { min-width: 0; }
  .benachr-zustell-texts { min-width: 0; }
}

/* Mobile (<600px): Header vertikal stapeln, Presets einspaltig */
@media (max-width: 599px) {
  .benachr-header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
  }
  .benachr-header-actions { justify-content: flex-end; }
  .benachr-content { padding: var(--space-3) var(--space-2) var(--space-6); }
  .benachr-presets { grid-template-columns: 1fr; }
  .benachr-preset-card { padding: var(--space-3); }
  .benachr-stage { padding: var(--space-3); }
  /* Kanal-Chips brauchen Platz — auf Mobile traegt die Titelzeile nur Name+Meta */
  .benachr-kat-summary { display: none; }
  /* Reichweite-Puls unter die Stat-Zeile statt rechts angedockt */
  .benachr-reach-puls { margin-left: 0; padding-left: 0; border-left: 0; }
  /* Abweichungs-Revert unter die Zeile, Controls touch-tauglich */
  .benachr-abw-revert { width: 100%; min-height: 40px; }
  .benachr-zustell-controls select,
  .benachr-zustell-timehost .app-time-picker-trigger,
  .benachr-ruhezeit-timehost .app-time-picker-trigger { min-height: 40px; }
}