/* Wiedervorlage: Kalender-Dialog, Statusleiste im Fall, Uebersichts-Reiter.
   Der Kalender uebernimmt die Klassennamen aus antrag/style.css, damit er sich
   auf beiden Seiten gleich anfuehlt - hier nur an die Manager-Farben gebunden. */

/* ---- Kalender-Dialog ---------------------------------------------------- */
body.date-picker-offen { overflow: hidden; }
.date-picker-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  background: rgba(6, 25, 30, .55);
}
.date-picker-overlay[hidden] { display: none; }
.date-picker-dialog {
  width: min(100%, 420px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 16px;
  border-radius: 18px;
  background: var(--vm-surface);
  color: var(--vm-text);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .3);
  -webkit-overflow-scrolling: touch;
}
.date-picker-top {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center; gap: 6px;
}
.date-picker-title {
  overflow: hidden;
  font-weight: 700; font-size: 17px; text-align: center;
  white-space: nowrap; text-overflow: ellipsis;
}
.date-picker-nav {
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--vm-primary-soft); color: var(--vm-primary);
  font-size: 34px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.wv-schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.wv-schnellwahl button {
  padding: 7px 12px; border: 1px solid var(--vm-border); border-radius: 999px;
  background: var(--vm-surface-3); color: var(--vm-text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.wv-schnellwahl button:hover { background: var(--vm-primary-soft); border-color: var(--vm-primary); }
.date-picker-selects { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin: 10px 0; }
.date-picker-selects select {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface); color: var(--vm-text); font: inherit;
}
.date-picker-weekdays,
.date-picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.date-picker-weekdays span {
  padding: 7px 0; color: var(--vm-muted);
  font-size: 13px; font-weight: 700; text-align: center;
}
.date-picker-day {
  min-width: 0; min-height: 43px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--vm-text);
  font: inherit; cursor: pointer; touch-action: manipulation;
}
.date-picker-day:hover { background: var(--vm-primary-soft); }
.date-picker-day.ausserhalb { color: var(--vm-muted); opacity: .6; }
.date-picker-day.vergangen { opacity: .55; }
.date-picker-day.heute { box-shadow: inset 0 0 0 2px var(--vm-accent); }
.date-picker-day.ausgewaehlt {
  background: var(--vm-primary); color: #fff; font-weight: 800; box-shadow: none; opacity: 1;
}
.wv-notiz-feld { margin-top: 12px; }
.wv-notiz-feld label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--vm-muted); }
.wv-notiz-feld input {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface); color: var(--vm-text); font: inherit;
}
.wv-picker-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wv-picker-aktionen button {
  flex: 1 1 auto; min-height: 46px; padding: 10px 12px;
  border: 0; border-radius: 10px;
  background: var(--vm-surface-2); color: var(--vm-text);
  font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.wv-picker-aktionen .wv-btn-ok { background: var(--vm-primary); color: #fff; }
.wv-picker-aktionen .wv-btn-weg { background: #f6e2df; color: #8c2318; flex: 1 1 100%; }
.wv-picker-aktionen .wv-btn-weg[hidden] { display: none; }

/* ---- Abschluss-Dialog (Erfolgreich / Nicht erfolgreich) ----------------- */
.vm-abschluss { width: min(100%, 460px); }
.vm-abschluss .date-picker-title { text-align: left; font-size: 19px; }
.vm-transfer { width: min(100%, 420px); }
.vm-transfer .date-picker-title { text-align: left; font-size: 19px; margin-bottom: 12px; }
.vm-abschluss-text { margin: 8px 0 14px; color: var(--vm-muted); font-size: 14px; line-height: 1.5; }
.vm-abschluss-text b { color: var(--vm-text); font-size: 15px; }
.vm-abschluss-wahl { display: flex; flex-direction: column; gap: 10px; }
.vm-wahl {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 2px solid var(--vm-border); border-radius: 12px;
  background: var(--vm-surface); color: var(--vm-text);
  font: inherit; text-align: left; cursor: pointer;
}
.vm-wahl b { display: block; font-size: 15px; margin-bottom: 2px; }
.vm-wahl span span { font-size: 12.5px; color: var(--vm-muted); line-height: 1.45; }
.vm-wahl-ic {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 17px; font-weight: 900; color: #fff;
}
.vm-wahl-erfolg .vm-wahl-ic { background: #1e7a46; }
.vm-wahl-kein .vm-wahl-ic { background: #6c7680; }
.vm-wahl-erfolg:hover { border-color: #1e7a46; background: color-mix(in srgb, #1e7a46 8%, var(--vm-surface)); }
.vm-wahl-kein:hover { border-color: #6c7680; background: var(--vm-surface-3); }

/* ---- Statusleiste im Fall ---------------------------------------------- */
/* Vorgang und Verwalten sind zwei Zeilen desselben Blocks. Die Beschriftungen
   stehen in einer festen Spalte untereinander - dadurch liest sich der Block als
   Tabelle statt als Knopfteppich, und das Auge findet den Anfang jeder Zeile. */
.vm-statusleiste {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--vm-border);
}
/* min-width statt fester Breite: die Labels stehen normal in einer Spalte
   untereinander, laufen bei groesserer Schrift aber nicht unter den Knopf. */
.vm-statusleiste-label {
  flex: none; min-width: 92px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--vm-muted);
}
/* Zweite Leiste unter "Vorgang": Archivieren und Löschen räumen den Fall weg,
   sie gehören nicht zwischen die Arbeitsschritte. Deshalb eigene, schmalere Zeile. */
.vm-verwaltenleiste { margin-top: 10px; padding-top: 12px; margin-bottom: 20px; }
/* Trennt Speichern von Archivieren/Löschen - sichern und wegräumen sind
   verschiedene Absichten und sollen nicht als ein Block wirken. */
.vm-verwalten-trenner {
  width: 1px; height: 20px; margin: 0 4px;
  background: var(--vm-border);
}
.vm-abgeschlossen-info { font-weight: 700; color: #0f5132; }
.vm-abgeschlossen-info.vm-kein { color: var(--vm-muted); }
:root[data-theme="dark"] .vm-abgeschlossen-info { color: #6ee7b7; }
:root[data-theme="dark"] .vm-abgeschlossen-info.vm-kein { color: var(--vm-muted); }

/* Hinweis "von X übernommen" oben im Fall, sitzt vor der Vorgangsleiste. */
.vm-uebernommen-info {
  margin-top: 14px; padding: 10px 14px;
  background: var(--vm-primary-soft); border-left: 4px solid var(--vm-primary);
  border-radius: 8px; font-size: 13.5px;
}
.vm-uebernommen-info span { display: block; margin-top: 4px; color: var(--vm-muted); }
.ropt-btn.vm-btn-warte, .topt-btn.vm-btn-warte { background: #a9741a; }
.ropt-btn.vm-btn-wv, .topt-btn.vm-btn-wv { background: #1f5fa8; }
.ropt-btn.vm-btn-wv-faellig, .topt-btn.vm-btn-wv-faellig { background: #b42318; }

/* Zusatz-Pillen in den Fall-Listen (Basis-Look kommt von .ropt-pill/.topt-pill) */
.vm-st-warte { background: #a9741a; }
.vm-st-wv { background: #1f5fa8; }
.vm-st-wv-faellig { background: #b42318; }
.vm-st-kein { background: #6c7680; }
.vm-st-uebernommen { background: #1f5fa8; }

/* Fall-Listen: die Status-Spalte bekam durch die neuen Pillen zu wenig Platz und
   brach um, waehrend rechts Weissraum stand. Die Aktions-Spalte schrumpft jetzt
   auf ihren Inhalt (width:1% ist der uebliche Kniff dafuer), der Rest geht an
   Kunde und Status. */
.ropt-fallliste td:last-child, .ropt-fallliste th:last-child,
.topt-fallliste td:last-child, .topt-fallliste th:last-child,
.eink-fallliste td:last-child, .eink-fallliste th:last-child { width: 1%; white-space: nowrap; }
/* Rentenliste: Kunde | Art | Status | Geändert | Aktionen.
   Tarifliste:  Kunde | Status | Positionen | Geändert | Aktionen.
   Alle Spalten schrumpfen auf ihren Inhalt, nur die Status-Spalte dehnt sich.
   Vorher hing der gesamte Rest an der Kunden-Spalte - daher die grosse Luecke
   zwischen Name und Art. */
.ropt-fallliste td:nth-child(1), .ropt-fallliste th:nth-child(1),
.topt-fallliste td:nth-child(1), .topt-fallliste th:nth-child(1),
.eink-fallliste td:nth-child(1), .eink-fallliste th:nth-child(1) {
  width: 1%; white-space: nowrap; padding-right: 22px;
}
.ropt-fallliste td:nth-child(2), .ropt-fallliste th:nth-child(2) { width: 1%; white-space: nowrap; }
/* Status ist die einzige Spalte, die umbrechen darf. Stand hier nowrap, zwang sie
   die Tabelle auf ihre volle Inhaltsbreite und schob die Aktionsknoepfe ueber den
   Kartenrand. Die Knoepfe bleiben dadurch immer einzeilig. */
.ropt-fallliste td:nth-child(3), .topt-fallliste td:nth-child(2),
.eink-fallliste td:nth-child(2) { white-space: normal; }
.ropt-fallliste td:nth-child(4), .ropt-fallliste th:nth-child(4),
.topt-fallliste td:nth-child(4), .topt-fallliste th:nth-child(4),
.eink-fallliste td:nth-child(3), .eink-fallliste th:nth-child(3) { width: 1%; white-space: nowrap; }

/* Senkrechte Spaltentrenner in allen Manager-Tabellen - derselbe dezente
   Strich, der die Knopfgruppen in den Aktionsspalten trennt. Die letzte Spalte
   bekommt keinen, sonst entstuende ein Rahmen am Tabellenrand. */
.ue-tabelle th:not(:last-child), .ue-tabelle td:not(:last-child),
.ropt-tabelle th:not(:last-child), .ropt-tabelle td:not(:last-child),
.topt-tabelle th:not(:last-child), .topt-tabelle td:not(:last-child),
.eink-tabelle th:not(:last-child), .eink-tabelle td:not(:last-child),
.kdb-tabelle th:not(:last-child), .kdb-tabelle td:not(:last-child) {
  border-right: 1px solid var(--vm-surface-2);
}
:root[data-theme="dark"] .ue-tabelle th:not(:last-child),
:root[data-theme="dark"] .ue-tabelle td:not(:last-child),
:root[data-theme="dark"] .ropt-tabelle th:not(:last-child),
:root[data-theme="dark"] .ropt-tabelle td:not(:last-child),
:root[data-theme="dark"] .topt-tabelle th:not(:last-child),
:root[data-theme="dark"] .topt-tabelle td:not(:last-child),
:root[data-theme="dark"] .eink-tabelle th:not(:last-child),
:root[data-theme="dark"] .eink-tabelle td:not(:last-child),
:root[data-theme="dark"] .kdb-tabelle th:not(:last-child),
:root[data-theme="dark"] .kdb-tabelle td:not(:last-child) {
  border-right-color: var(--vm-border);
}

/* Art der Rentenanalyse — eigenes Symbol und eigene Farbe je Art. */
.ropt-art {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 8px;
  border-left: 3px solid currentColor;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; letter-spacing: .2px;
}
.ropt-art-ic { font-size: 13px; line-height: 1; }
.ropt-art-riester  { color: #1f5fa8; background: #e6eefa; }
.ropt-art-neu      { color: #8a5a00; background: #fbf0d9; }
.ropt-art-bestand  { color: #0f6b45; background: #dff2e8; }
:root[data-theme="dark"] .ropt-art-riester { color: #93c0f5; background: #16324f; }
:root[data-theme="dark"] .ropt-art-neu     { color: #f0c778; background: #402f11; }
:root[data-theme="dark"] .ropt-art-bestand { color: #7fdcb0; background: #10382a; }
@media (max-width: 1100px) {
  /* Schmal: lieber umbrechen als die Tabelle sprengen. */
  .ropt-fallliste td:nth-child(3), .topt-fallliste td:nth-child(2) { white-space: normal; }
  .ropt-fallliste td:last-child, .topt-fallliste td:last-child { white-space: normal; }
  .ropt-list-actions, .ropt-list-actions-primary, .ropt-list-actions-secondary { flex-wrap: wrap; }
}

/* ---- Uebersichts-Reiter ------------------------------------------------- */
.ue-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ue-stat {
  flex: 1 1 150px; padding: 12px 14px;
  border: 1px solid var(--vm-border); border-radius: 12px;
  background: var(--vm-surface); box-shadow: var(--vm-card-shadow);
  color: var(--vm-text); font: inherit; text-align: left;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ue-stat b { display: block; font-size: 26px; line-height: 1.15; }
.ue-stat span { font-size: 12px; color: var(--vm-muted); }
.ue-stat.warn b { color: var(--vm-danger); }
.ue-stat.gold b { color: var(--vm-accent); }
.ue-stat.gruen b { color: #1e7a46; }
.ue-stat:hover { border-color: var(--vm-primary); transform: translateY(-1px); }
.ue-stat.aktiv {
  border-color: var(--vm-primary);
  background: var(--vm-primary-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vm-primary) 30%, transparent), var(--vm-card-shadow);
}
.ue-stat:focus-visible { outline: 3px solid color-mix(in srgb, var(--vm-primary) 35%, transparent); outline-offset: 2px; }
:root[data-theme="dark"] .ue-stat.gruen b { color: #6ee7b7; }

/* Karte und Tabelle sehen aus wie die Fall-Listen in Tarif- und
   Rentenoptimierung (.topt-listenkarte / .topt-tabelle): gleicher Innenrand,
   gleiche Rundung, gleicher Farbstrich oben, gleiche Titelzeile. */
.ue-karte {
  position: relative;
  padding: 22px 24px; border: 1px solid var(--vm-border); border-radius: 18px;
  background: var(--vm-surface); box-shadow: var(--vm-card-shadow);
}
.ue-karte::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px;
  border-radius: 0 0 8px 8px; opacity: .8;
  background: linear-gradient(90deg, var(--vm-primary), transparent 72%);
}
.ue-karte h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; }
/* PC-Ansicht: Die Tabelle bleibt vollstaendig in der verfuegbaren Breite.
   Spalten und Inhalte werden lieber schmaler bzw. mehrzeilig, statt einen
   waagerechten Scrollbereich zu erzeugen. */
.ue-tabelle-wrap { overflow-x: visible; margin-top: 10px; }
/* Feste Prozentanteile ueberstimmen die alten Inline-Pixelbreiten im Markup.
   Zusammen ergeben sie exakt 100 Prozent; table-layout:fixed verhindert,
   dass lange Inhalte eine Spalte und damit die ganze Tabelle aufziehen. */
.ue-tabelle {
  width: 100%; margin: 10px 0;
  border: 1px solid var(--vm-border); border-radius: 13px;
  border-collapse: separate; border-spacing: 0;
  background: var(--vm-surface);
  font-size: 13px; table-layout: fixed;
}
.ue-tabelle th:nth-child(1), .ue-tabelle td:nth-child(1),
.ue-tabelle th:nth-child(2), .ue-tabelle td:nth-child(2),
.ue-tabelle th:nth-child(3), .ue-tabelle td:nth-child(3) { white-space: normal; }
.ue-tabelle th:nth-child(1), .ue-tabelle td:nth-child(1) { width: 18% !important; }
.ue-tabelle th:nth-child(2), .ue-tabelle td:nth-child(2) { width: 19% !important; }
.ue-tabelle th:nth-child(3), .ue-tabelle td:nth-child(3) { width: 22% !important; }
.ue-tabelle th:nth-child(4), .ue-tabelle td:nth-child(4) { width: 16% !important; }
.ue-tabelle th:nth-child(5), .ue-tabelle td:nth-child(5) { width: 25% !important; }
/* Name und Notiz duerfen umbrechen, damit lange Kundennamen die Tabelle nicht
   breiter als die Ansicht machen. */
.ue-kunde { white-space: normal; }
.ue-notiz { white-space: normal; }
.ue-tabelle th {
  padding: 10px 11px; border: 0; border-bottom: 1px solid var(--vm-border);
  color: var(--vm-text); background: var(--vm-surface-2);
  text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .015em; white-space: nowrap;
}
/* Ecken der Titelzeile mitrunden - sonst steht ihr Hintergrund über den Rahmen. */
.ue-tabelle tr:first-child th:first-child,
.ropt-tabelle tr:first-child th:first-child,
.topt-tabelle tr:first-child th:first-child,
.eink-tabelle tr:first-child th:first-child,
.kdb-tabelle tr:first-child th:first-child { border-top-left-radius: 12px; }
.ue-tabelle tr:first-child th:last-child,
.ropt-tabelle tr:first-child th:last-child,
.topt-tabelle tr:first-child th:last-child,
.eink-tabelle tr:first-child th:last-child,
.kdb-tabelle tr:first-child th:last-child { border-top-right-radius: 12px; }
.ue-tabelle td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--vm-border); vertical-align: middle; }
.ue-tabelle tr:hover td { background-color: var(--vm-surface-2); }

/* Sortierbare Spaltenkoepfe */
.ue-sort {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; margin: -4px -6px;
  border: 0; border-radius: 6px; background: none;
  color: inherit; font: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .015em; cursor: pointer; white-space: nowrap;
}
.ue-sort:hover { background: var(--vm-surface-3); color: var(--vm-text); }
.ue-sort.an { color: var(--vm-primary); }
.ue-sortpfeil { font-size: 10px; opacity: .65; }
.ue-sort.an .ue-sortpfeil { opacity: 1; }
.ue-filter-zahl {
  padding: 1px 6px; border-radius: 999px;
  background: var(--vm-primary); color: #fff; font-size: 10px; line-height: 1.6;
  font-weight: 800;
}

/* Bereichs-Filter: Panel am Spaltenkopf.
   position: fixed statt absolute — der Tabellen-Container scrollt waagerecht
   (overflow-x: auto), und das erzeugt auch senkrecht einen Beschnitt. Bei einer
   kurzen Tabelle waere das Panel sonst unsichtbar abgeschnitten. Die Position
   setzt uebersicht.js beim Oeffnen aus der Lage des Knopfes. */
.ue-filter { position: relative; display: inline-flex; align-items: center; gap: 2px; }
/* Kleiner Trichter direkt rechts neben dem Sortier-Titel. */
.ue-filter-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 5px; border: 0; border-radius: 6px; background: none;
  color: var(--vm-muted); cursor: pointer; line-height: 0;
}
.ue-filter-btn:hover { background: var(--vm-surface-3); color: var(--vm-text); }
.ue-filter-btn.an { color: var(--vm-primary); }
.ue-filter-panel {
  position: fixed; z-index: 300;
  width: max-content; min-width: 250px; padding: 10px;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface); box-shadow: 0 14px 34px rgba(15, 55, 65, .22);
  text-transform: none; letter-spacing: 0;
}
.ue-filter-panel[hidden] { display: none; }
.ue-filter-panel label {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px;
  color: var(--vm-text); font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;   /* "Rentenoptimierung" darf nicht umbrechen */
}
.ue-filter-panel label:hover { background: var(--vm-surface-3); }
.ue-filter-panel input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--vm-primary); }
.ue-filter-panel .ue-btn { width: 100%; margin-top: 8px; }
.ue-tabelle tr:last-child td { border-bottom: none; }
.ue-gruppe {
  font-weight: 800; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--vm-muted); background: var(--vm-surface-3); padding: 6px 8px;
}
.ue-frist {
  min-width: 0; overflow: hidden;
  font-weight: 800; line-height: 1.3; white-space: normal;
}
.ue-frist.rot { color: var(--vm-danger); }
.ue-frist.gold { color: #a9741a; }
.ue-frist.grau { font-weight: 500; color: var(--vm-muted); }
.ue-frist.erledigt { color: #1e7a46; }
:root[data-theme="dark"] .ue-frist.erledigt { color: #6ee7b7; }
/* Bereichs-Label: eigenes Symbol und eigene Farbe je Bereich. Der farbige
   Balken links traegt die Unterscheidung auch dann, wenn Emoji auf einem
   Geraet blass gerendert werden. */
.ue-modul {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 8px;
  border-left: 3px solid currentColor;
  font-size: 11.5px; font-weight: 800; line-height: 1.2;
  white-space: normal; letter-spacing: .2px;
}
.ue-modul-ic { font-size: 13px; line-height: 1; filter: saturate(1.15); }
.ue-modul-antrag { color: #1f5fa8; background: #e6eefa; }
.ue-modul-topt   { color: #8a5a00; background: #fbf0d9; }
.ue-modul-ropt   { color: #0f6b45; background: #dff2e8; }
.ue-modul-aufgabe { color: #63538f; background: #eee9f8; }
.ue-modul-eink   { color: #055d67; background: #ddeff1; }
.ue-modul-kuend  { color: #8c2318; background: #fbe3df; }
:root[data-theme="dark"] .ue-modul-antrag { color: #93c0f5; background: #16324f; }
:root[data-theme="dark"] .ue-modul-topt   { color: #f0c778; background: #402f11; }
:root[data-theme="dark"] .ue-modul-ropt   { color: #7fdcb0; background: #10382a; }
:root[data-theme="dark"] .ue-modul-aufgabe { color: #c7b8f1; background: #302744; }
:root[data-theme="dark"] .ue-modul-eink   { color: #032326; background: var(--vm-primary); }
:root[data-theme="dark"] .ue-modul-kuend  { color: #f3a89c; background: #47201c; }
.ue-kunde { font-weight: 700; }
.ue-notiz { display: block; font-size: 12px; color: var(--vm-muted); }
.ue-pill {
  display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px;
  padding: 2px 9px; font-size: 11px; font-weight: 850; color: #fff;
  justify-content: center; text-align: center; white-space: normal;
}
.ue-pill-aufgabe { background: #63538f; }
.ue-pill-erledigt { background: #1e7a46; }
/* Bereich- und Status-Marke fuellen ihre Spalte: unterschiedlich lange Woerter
   ("Tarifoptimierung" / "Rentenoptimierung") sollen die Liste nicht unruhig
   machen - jede Zeile zeigt dieselbe Breite. */
.ue-tabelle td .ue-modul, .ue-tabelle td .ue-pill {
  display: flex; width: 100%; box-sizing: border-box;
}
/* Die Aktionszelle begrenzt ihre Inhalte; die Flexgruppe darunter darf dafuer
   mehrzeilig werden und bleibt vollstaendig erreichbar. */
.ue-tabelle td:last-child { overflow: hidden; }
/* flex-start, nicht flex-end: wird die Spalte zu schmal (Browser-Zoom, grosse
   Schrift), schneidet der Ueberlauf sonst links den "Öffnen"-Knopf ab. */
.ue-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
.ue-btn {
  min-height: 30px; padding: 5px 11px; border: 0; border-radius: 8px;
  background: var(--vm-primary); color: #fff;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ue-btn.grau { background: var(--vm-surface-2); color: var(--vm-text); }
.aufgabe-dialog-aktionen .aufgabe-btn-erledigt { color: #fff; background: #1e7a46; }
.ue-btn:hover { filter: brightness(1.07); }
/* Knopf, der nur ein Symbol traegt (interne Vorschau): quadratisch statt breit. */
.ue-btn-ic {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px; text-decoration: none;
}
.ue-ic {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Notiz-Symbol: reine Information (kein Klick-Ziel), deshalb "cursor:help" statt
   Pointer und ein dezenter Goldton statt der neutralen Aktionsknopf-Farbe. */
.ue-telefon-link { color: #0b5f52; font-weight: 800; text-decoration: none; }
.ue-telefon-link:hover { text-decoration: underline; }
:root[data-theme="dark"] .ue-telefon-link { color: #7fdcb0; }
.ue-notiz-ic { color: #a9741a; }
:root[data-theme="dark"] .ue-notiz-ic { color: #e8c06a; }
.ue-leer { padding: 22px 8px; color: var(--vm-muted); text-align: center; }
.ue-leer .ue-btn { margin-top: 12px; }

/* ---- Meine naechsten Termine (Kalender-Modul) --------------------------- */
/* Termine als Chips nebeneinander statt Zeile fuer Zeile - spart Hoehe fuer
   die Aufgabentabelle darunter. Bei vielen Terminen bricht die Leiste um. */
.ue-termine-leiste { display: flex; flex-wrap: wrap; gap: 8px; }
.ue-termin-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 10px; border-radius: 12px;
  border: 1px solid var(--vm-border); background: var(--vm-surface-3);
}
.ue-termin-chip .ue-termin-zeit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding-right: 9px; border-right: 1px solid var(--vm-border); white-space: nowrap;
}
.ue-termin-tag { font-size: 10px; font-weight: 700; color: var(--vm-muted); text-transform: uppercase; letter-spacing: .02em; }
.ue-termin-chip .ue-termin-zeit .zeit { font-size: 13.5px; font-weight: 800; color: var(--vm-primary-strong); }
.ue-termin-wer { display: flex; flex-direction: column; min-width: 0; }
.ue-termin-wer b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.ue-termin-wer span { font-size: 11px; color: var(--vm-muted); display: flex; align-items: center; gap: 4px; }
.ue-termin-orticon { font-size: 11px; line-height: 1; opacity: .8; }
.ue-termin-chip-naechster { border-color: var(--vm-primary); background: var(--vm-primary-soft); }
.ue-termin-chip-naechster .ue-termin-zeit { border-right-color: color-mix(in srgb, var(--vm-primary) 40%, transparent); }

/* ---- Manuelle Aufgabe --------------------------------------------------- */
.aufgabe-dialog { width: min(100%, 620px); padding: 22px; }
.aufgabe-dialog-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.aufgabe-dialog-kopf h3 { margin: 2px 0 0; font-size: 21px; }
.aufgabe-dialog-kicker {
  color: var(--vm-primary); font-size: 10px; font-weight: 850;
  letter-spacing: .09em; text-transform: uppercase;
}
.aufgabe-dialog-schliessen {
  flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--vm-surface-2); color: var(--vm-muted);
  font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
.aufgabe-feld + .aufgabe-feld { margin-top: 13px; }
.aufgabe-feld label {
  display: block; margin-bottom: 5px;
  color: var(--vm-text); font-size: 12px; font-weight: 800;
}
.aufgabe-feld label span { color: var(--vm-muted); font-weight: 500; }
.aufgabe-feld input, .aufgabe-feld textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface-3); color: var(--vm-text); font: inherit;
}
.aufgabe-feld .aufgabe-datum {
  width: 100%; min-height: 44px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface-3); color: var(--vm-text);
  font: inherit; text-align: left; cursor: pointer;
}
.aufgabe-datum.leer span { color: var(--vm-muted); }
.aufgabe-datum svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.aufgabe-feld textarea { resize: vertical; min-height: 82px; }
.aufgabe-feld input:focus, .aufgabe-feld textarea:focus, .aufgabe-datum:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vm-primary) 22%, transparent);
  border-color: var(--vm-primary);
}
.aufgabe-feld-klein { max-width: 230px; }
.aufgabe-fehler { min-height: 20px; margin: 8px 0 0; color: var(--vm-danger); font-size: 12px; }
.aufgabe-dialog-aktionen { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.aufgabe-dialog-aktionen button {
  min-height: 44px; padding: 9px 14px; border: 0; border-radius: 10px;
  background: var(--vm-surface-2); color: var(--vm-text);
  font: inherit; font-size: 13px; font-weight: 750; cursor: pointer;
}
.aufgabe-dialog-aktionen .aufgabe-btn-loeschen { margin-right: auto; color: var(--vm-danger); background: #f6e2df; }
.aufgabe-dialog-aktionen .aufgabe-btn-speichern { color: #fff; background: var(--vm-primary); }
.aufgabe-dialog-aktionen button:disabled { cursor: wait; opacity: .6; }
:root[data-theme="dark"] .aufgabe-dialog-aktionen .aufgabe-btn-loeschen {
  color: #ff9f96; background: #492824;
}

/* Anhaenge einer manuellen Aufgabe (Dialog + Chips in der Tabelle) */
.aufgabe-anhang-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aufgabe-anhang-waehlen {
  min-height: 40px; padding: 8px 13px; border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface-2); color: var(--vm-text);
  font: inherit; font-size: 13px; font-weight: 750; cursor: pointer;
}
.aufgabe-anhang-hinweis { color: var(--vm-muted); font-size: 12px; }
.aufgabe-anhang-liste { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.aufgabe-anhang {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--vm-border); border-radius: 9px; background: var(--vm-surface-3);
}
.aufgabe-anhang.neu { border-style: dashed; }
.aufgabe-anhang-name {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--vm-text); font: inherit; font-size: 13px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aufgabe-anhang button.aufgabe-anhang-name { cursor: pointer; text-decoration: underline; }
.aufgabe-anhang-name span { color: var(--vm-muted); font-size: 11px; }
.aufgabe-anhang-auge, .aufgabe-anhang-weg {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: var(--vm-surface-2); color: var(--vm-muted);
  font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
}
.aufgabe-anhang-auge { font-size: 15px; }
.aufgabe-anhang-auge:hover, .aufgabe-anhang-weg:hover { color: var(--vm-text); }
/* Waehrend Anhaenge hochgeladen werden. */
.aufgabe-anhang-liste.laedt { opacity: .5; pointer-events: none; }

/* Leitfaden-Auswahl im Aufgabendialog */
.aufgabe-feld select {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface-3); color: var(--vm-text); font: inherit;
}
.aufgabe-feld select:focus {
  outline: 3px solid color-mix(in srgb, var(--vm-primary) 22%, transparent);
  border-color: var(--vm-primary);
}
.aufgabe-leitfaden-hinweis { margin: 7px 0 0; color: var(--vm-muted); font-size: 12px; line-height: 1.45; }

/* Telefonkontakt erscheint nur, wenn ein Telefonleitfaden gewaehlt ist. */
.aufgabe-kontakt {
  min-width: 0; margin: 16px 0 0; padding: 15px;
  border: 1px solid color-mix(in srgb, var(--vm-primary) 35%, var(--vm-border));
  border-radius: 13px; background: color-mix(in srgb, var(--vm-primary) 5%, var(--vm-surface));
}
.aufgabe-kontakt[hidden] { display: none; }
.aufgabe-kontakt legend {
  padding: 0 6px; color: var(--vm-primary); font-size: 13px; font-weight: 850;
}
.aufgabe-kontakt-hinweis,
.aufgabe-kunde-status {
  margin: 0; color: var(--vm-muted); font-size: 12px; line-height: 1.45;
}
.aufgabe-kontakt > .aufgabe-feld { margin-top: 12px; }
.aufgabe-kunde-status { min-height: 18px; margin-top: 6px; }
.aufgabe-kunden-combobox { position: relative; }
.aufgabe-kunden-combobox > input { padding-right: 50px; }
.aufgabe-kunden-combobox.offen > input {
  border-color: var(--vm-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-primary) 14%, transparent);
}
.aufgabe-kunden-toggle {
  position: absolute; z-index: 2; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--vm-text); cursor: pointer;
}
.aufgabe-kunden-toggle:hover { background: var(--vm-primary-soft); color: var(--vm-primary); }
.aufgabe-kunden-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vm-primary) 22%, transparent);
}
.aufgabe-kunden-toggle svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease;
}
.aufgabe-kunden-combobox.offen .aufgabe-kunden-toggle svg { transform: rotate(180deg); }
.aufgabe-kunden-liste {
  position: relative; z-index: 10; width: 100%; max-height: min(38vh, 300px);
  margin-top: 7px; padding: 7px; overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--vm-primary) 26%, var(--vm-border));
  border-radius: 14px; background: var(--vm-surface);
  box-shadow: 0 18px 40px rgba(6, 32, 36, .18);
  scrollbar-color: color-mix(in srgb, var(--vm-primary) 42%, transparent) transparent;
  scrollbar-width: thin;
}
.aufgabe-kunden-liste[hidden] { display: none; }
.aufgabe-kunden-option {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center; gap: 10px; width: 100%; min-height: 58px;
  padding: 9px 11px; border: 0; border-radius: 10px;
  background: transparent; color: var(--vm-text); font: inherit; text-align: left; cursor: pointer;
}
.aufgabe-kunden-option[hidden] { display: none; }
.aufgabe-kunden-option:hover,
.aufgabe-kunden-option.aktiv { background: var(--vm-primary-soft); color: var(--vm-primary); }
.aufgabe-kunden-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--vm-accent) 18%, var(--vm-surface));
}
.aufgabe-kunden-person {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--vm-primary) 12%, var(--vm-surface)); font-size: 16px;
}
.aufgabe-kunden-text { min-width: 0; }
.aufgabe-kunden-text strong,
.aufgabe-kunden-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aufgabe-kunden-text strong { font-size: 14px; line-height: 1.35; }
.aufgabe-kunden-text small { margin-top: 2px; color: var(--vm-muted); font-size: 11px; line-height: 1.3; }
.aufgabe-kunden-haken { visibility: hidden; color: var(--vm-success, #1e7a46); font-size: 18px; font-weight: 850; }
.aufgabe-kunden-option[aria-selected="true"] .aufgabe-kunden-haken { visibility: visible; }
.aufgabe-kunden-leer { margin: 0; padding: 14px 12px; color: var(--vm-muted); font-size: 13px; line-height: 1.45; }
.aufgabe-kontakt-grid {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 12px; margin-top: 12px;
}
.aufgabe-kontakt-grid .aufgabe-feld { min-width: 0; margin-top: 0; }
.aufgabe-kontakt-name,
.aufgabe-kontakt-email { grid-column: 1 / -1; }
.aufgabe-feld input.ungueltig {
  border-color: var(--vm-danger);
  outline: 3px solid color-mix(in srgb, var(--vm-danger) 18%, transparent);
}
.aufgabe-feld-fehler {
  display: block; min-height: 16px; margin-top: 4px;
  color: var(--vm-danger); font-size: 11px; line-height: 1.35;
}

/* Einstellungen der Erinnerungsmail (im Profil-Dialog) */
.wv-einstellungen { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vm-border); }
.wv-einstellungen h4 { margin: 0 0 4px; font-size: 14px; }
.wv-einstellungen p.hinweis { margin: 0 0 10px; font-size: 12px; color: var(--vm-muted); }
.wv-einst-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.wv-einst-zeile label { flex: 0 0 auto; font-size: 13px; }
.wv-einst-zeile input[type="email"] { flex: 1 1 220px; }

@media (max-width: 700px) {
  .ue-tabelle th, .ue-tabelle td { padding: 6px 4px; font-size: 12px; }
  .vm-statusleiste { gap: 6px; }
  .aufgabe-dialog { padding: 17px; }
  .aufgabe-feld-klein { max-width: none; }
  .aufgabe-kontakt-grid { grid-template-columns: 1fr; }
  .aufgabe-kontakt-name, .aufgabe-kontakt-email { grid-column: auto; }
  .aufgabe-kunden-liste { max-height: min(34vh, 250px); }
  .aufgabe-dialog-aktionen { align-items: stretch; flex-direction: column; }
  .aufgabe-dialog-aktionen button { width: 100%; }
  .aufgabe-dialog-aktionen .aufgabe-btn-loeschen { margin: 0; order: 3; }
  .aufgabe-dialog-aktionen .aufgabe-btn-erledigt { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .aufgabe-kunden-toggle svg { transition: none; }
}

/* Übersicht-spezifische Anpassung: Rahmen/Karte entfernen, damit die
   Übersichtsansicht keinen separaten weißen Zwischenrahmen hat. */
#uebersichtBox .ue-karte {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
#uebersichtBox .ue-karte::before { display: none; }
/* Tabellen-Karte ohne Titel: Rand links/rechts wie bei den Kacheln darueber,
   kein Leerraum von der frueheren Ueberschrift. */
#uebersichtBox .ue-karte-tabelle { padding: 0; }
#uebersichtBox .ue-karte-tabelle .ue-tabelle-wrap { margin-top: 0; }

/* Entferne die äußere Card, die standardmäßig auf Sections angewendet wird,
   damit die Übersicht wie andere Reiter ohne zusätzlichen weißen Rahmen wirkt. */
.app > main > section#uebersichtBox {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0; /* Inhalt steuert Abstände selbst */
}

.ue-tabelle tr.ue-mail-ziel td {
  background: #dff5f1;
  box-shadow: inset 0 2px 0 #20a697, inset 0 -2px 0 #20a697;
}