/* Kuendigungsmanager im Adminbereich - gleicher Baukasten wie
   einkommenssicherung.css/tarifoptimierung.css, eigener Namensraum .kuend-*. */
#kuendBox {
  flex-direction: column;
  --kuend-petrol: #087985;
  --kuend-petrol-dunkel: #055d67;
  --kuend-gold: #e5b74b;
  --kuend-gruen: #08763f;
  --kuend-rot: #a12c26;
  --kuend-linie: #d7dfdb;
  --kuend-text-2: #5c6874;
  --kuend-shadow: 0 12px 34px rgba(8, 53, 59, .09);
  min-width: 0;
  color: #172330;
}
#kuendBox * { box-sizing: border-box; }

.kuend-unternav {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 7px;
  border: 1px solid var(--kuend-linie); border-radius: 16px; background: #fff;
  box-shadow: 0 7px 22px rgba(8, 31, 58, .06);
}
.kuend-unternav .kuend-btn {
  min-height: 42px; padding: 9px 18px; border: 0; border-radius: 11px;
  color: #172330; background: transparent; font-size: 14px; font-weight: 750;
}
.kuend-unternav .kuend-btn:hover { filter: none; background: #eef3f6; }
.kuend-unternav .kuend-btn.an {
  color: #fff; background: linear-gradient(135deg, var(--kuend-petrol-dunkel), var(--kuend-petrol));
  box-shadow: 0 7px 18px rgba(8, 53, 59, .18);
}

.kuend-platzhalter { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 16px; }
.kuend-platzhalter button {
  padding: 4px 10px; border: 1px dashed var(--kuend-petrol); border-radius: 999px;
  background: #eef7f7; color: var(--kuend-petrol-dunkel); font-size: 12px; font-weight: 750; cursor: pointer;
}
.kuend-platzhalter button:hover { background: #dcedee; }
.kuend-feld textarea {
  width: 100%; min-height: 60px; padding: 8px 10px; border: 1px solid var(--kuend-linie);
  border-radius: 9px; background: #f7fafb; font: inherit; resize: vertical;
}

/* Zurueck-Navigation ist ein Weg, keine Aktion: schlichter Textlink statt
   Knopf-Optik, linksbuendig und ohne Kasten (sonst konkurriert er optisch mit
   den echten Aktionsknoepfen der Seite). */
.kuend-zurueck,
#kuendBox .kuend-btn.kuend-zurueck {
  display: inline-flex; align-items: center; justify-content: flex-start; width: auto; margin: 0 0 14px;
  padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--kuend-text-2); font-size: 13.5px; font-weight: 750; text-align: left;
}
#kuendBox .kuend-btn.kuend-zurueck:hover {
  background: none; color: var(--kuend-petrol-dunkel); text-decoration: underline;
}
.kuend-treffer { padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; }
.kuend-treffer:hover { background: #e3f2f3; }

.kuend-hinweis { color: var(--kuend-text-2); font-size: 13px; }
.kuend-fehler { color: var(--kuend-rot); font-weight: 750; }

.kuend-karte {
  margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--kuend-linie); border-radius: 20px;
  background: #fff; box-shadow: var(--kuend-shadow);
}
/* flex-wrap:wrap fehlte hier (anders als bei .topt-karte h3/.ropt-karte h3) -
   der Titel "Kündigungsfälle" musste sich mit der Aktuelle/Archiv-Knopfgruppe
   eine Zeile teilen und brach am Handy mitten im Wort um ("Kündigungsf älle"),
   waehrend Beratung/Rente den Titel sauber auf eine eigene Zeile werfen. */
.kuend-karte h3 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; font-size: 18px; }
.kuend-karte > strong { display: block; margin: 18px 0 10px; font-size: 13px; color: var(--kuend-petrol-dunkel); }
.kuend-karte > strong:first-of-type { margin-top: 0; }
.kuend-listenkarte h3 { margin-bottom: 14px; }

/* 1:1 wie .topt-tabelle (Antraege/Beratung & Angebote) - direkt mit den
   Manager-Theme-Variablen statt eigenen Modul-Farben, damit es unabhaengig
   von manager-ui.css exakt gleich aussieht. Kein overflow:hidden mehr -
   das hat in Chrome den sichtbaren Aussenrahmen der Tabelle mit
   verschluckt. Stattdessen die obere linke/rechte Ecke gezielt am
   th-Hintergrund abrunden, dort wo er sonst eckig ueber den runden
   Tabellenrahmen ragt. */
.kuend-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); color: var(--vm-text); font-size: 14px;
}
.kuend-tabelle th {
  padding: 10px 11px; border: 0; border-bottom: 1px solid var(--vm-border); border-right: 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;
}
.kuend-tabelle th:last-child { border-right: 0; }
.kuend-tabelle thead tr:first-child th:first-child { border-top-left-radius: 12px; }
.kuend-tabelle thead tr:first-child th:last-child { border-top-right-radius: 12px; }
.kuend-tabelle td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--vm-border); border-right: 1px solid var(--vm-border); vertical-align: middle; }
.kuend-tabelle td:last-child { border-right: 0; }
.kuend-tabelle tr:last-child td { border-bottom: 0; }
.kuend-tabelle tr:hover td { background-color: var(--vm-surface-2); }

/* Gesellschaften-Tabelle: feste Spaltenbreiten, sonst verteilt Auto-Layout
   nach den input-Breiten statt nach verfuegbarem Platz. */
.kuend-ges-tabelle { table-layout: fixed; }
.kuend-ges-tabelle th:nth-child(1), .kuend-ges-tabelle td:nth-child(1) { width: 21%; }
.kuend-ges-tabelle th:nth-child(2), .kuend-ges-tabelle td:nth-child(2) { width: 26%; }
.kuend-ges-tabelle th:nth-child(3), .kuend-ges-tabelle td:nth-child(3) { width: 28%; }
.kuend-ges-tabelle th:nth-child(4), .kuend-ges-tabelle td:nth-child(4) { width: 9%; }
.kuend-ges-tabelle th:nth-child(5), .kuend-ges-tabelle td:nth-child(5) { width: 9%; }
.kuend-ges-tabelle th:nth-child(6), .kuend-ges-tabelle td:nth-child(6) { width: 7%; text-align: center; }
.kuend-ges-tabelle td:nth-child(6) .kuend-btn { padding: 4px 8px; min-height: 28px; }
.kuend-ges-tabelle th button.ue-sort {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer;
}
.kuend-ges-tabelle th .ue-sortpfeil { font-size: 10px; opacity: .6; }
/* Bewusst kein eigener Rahmen/Kasten pro Feld - sonst verdeckt die Box die
   Tabellen-Trennlinien und die Zeile sieht nach eigenem Design statt nach
   normaler Tabelle aus (wie in den anderen Reitern). Rahmen erst bei Fokus. */
.kuend-ges-feld {
  width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; font: inherit;
}
.kuend-ges-feld:hover { background: #f7fafb; }
.kuend-ges-feld:focus { border-color: var(--kuend-petrol); background: #fff; outline: none; }
.kuend-ges-feld:disabled { color: var(--kuend-text-2); }

.kuend-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 850; vertical-align: middle; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.kuend-st-entwurf { background: #6c7680; }
.kuend-st-signiert { background: var(--kuend-petrol-dunkel); }
.kuend-st-gesendet { background: #a67c1e; }
.kuend-st-bestaetigt { background: #1e7a46; }
.kuend-st-abgelehnt { background: var(--kuend-rot); }
.kuend-st-archiviert { color: #46515b; background: #dce1df; }
.kuend-nachfass-bald { color: #3a2c05; background: var(--kuend-gold); }
.kuend-nachfass-faellig { background: var(--kuend-rot); }

/* Telefonnummer prominent, damit der Nachfass-Anruf ohne Suchen geht. */
.kuend-telefon {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px;
  padding: 9px 13px; border: 1px solid #bfe1e2; border-radius: 10px;
  background: #eef7f7; color: var(--kuend-petrol-dunkel);
  font-size: 14px; font-weight: 800; text-decoration: none;
}
.kuend-telefon:hover { background: #dcedee; }
.kuend-telefon-zeile { display: flex; align-items: center; gap: 8px; }
.kuend-telefon-zeile input { flex: 1; }
.kuend-telefon-zeile .kuend-telefon { margin-bottom: 0; white-space: nowrap; }

.kuend-statusleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--kuend-linie);
}
.kuend-statuslabel {
  margin-right: 4px; color: var(--kuend-text-2);
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}

.kuend-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 8px 15px; border: 1px solid var(--kuend-petrol); border-radius: 10px; color: #fff;
  background: var(--kuend-petrol-dunkel); font-weight: 800; font-size: 13px; cursor: pointer;
  text-decoration: none; transition: filter .15s ease, transform .15s ease;
}
.kuend-btn:hover { filter: brightness(1.06); }
.kuend-btn:active { transform: scale(.98); }
.kuend-btn:disabled { opacity: .5; cursor: not-allowed; }
.kuend-btn.klein { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.kuend-btn.grau { color: #172330; border-color: var(--kuend-linie); background: #fff; }
.kuend-btn.gruen { border-color: var(--kuend-gruen); background: var(--kuend-gruen); }
.kuend-btn.rot { border-color: var(--kuend-rot); background: var(--kuend-rot); }
.kuend-btn.gold { color: #082d32; border-color: #d5a032; background: linear-gradient(135deg, #f4ce70, #dea735); }

.kuend-editor-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.kuend-editor-top h3 { margin: 0; }
.kuend-editor-top-rechts { display: flex; align-items: center; gap: 12px; }
.kuend-editor-top-rechts .kuend-telefon { margin-bottom: 0; }
.kuend-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 8px; }
.kuend-vertrag-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.kuend-feld { min-width: 0; }
.kuend-feld.wide { grid-column: span 2; }
.kuend-feld label { display: block; margin-bottom: 5px; color: var(--kuend-text-2); font-size: 11px; font-weight: 800; }
.kuend-feld input, .kuend-feld select {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--kuend-linie);
  border-radius: 9px; background: #f7fafb; font: inherit;
}
.kuend-statusleiste + .kuend-vertragsdaten { margin-top: 30px; }
.kuend-feld input:focus-visible, .kuend-feld select:focus-visible {
  border-color: var(--kuend-petrol); outline: 3px solid rgba(8, 121, 133, .16); outline-offset: 1px;
}

/* Frei beschreibbare Versicherungsart mit eigener Vorschlagsliste. Native
   Datalists sind je Browser dunkel/unterschiedlich und lassen sich weder
   verlaesslich stylen noch hoeher machen. */
.kuend-combobox { position: relative; }
.kuend-combobox > input { min-height: 44px; padding-right: 52px; }
.kuend-combobox.offen > input { border-color: var(--kuend-petrol); box-shadow: 0 0 0 3px rgba(8, 121, 133, .12); }
.kuend-combobox-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: 9px;
  background: transparent; color: #172330; cursor: pointer;
}
.kuend-combobox-toggle:hover { background: #e6f1f2; color: var(--kuend-petrol-dunkel); }
.kuend-combobox-toggle:focus-visible { outline: 3px solid rgba(8, 121, 133, .2); }
.kuend-combobox-toggle svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.kuend-combobox.offen .kuend-combobox-toggle svg { transform: rotate(180deg); }
.kuend-combobox-liste {
  position: absolute; z-index: 80; top: calc(100% + 7px); left: 0;
  width: max(100%, 360px); max-width: min(460px, calc(100vw - 32px));
  max-height: min(52vh, 420px); padding: 7px; overflow-x: hidden; overflow-y: auto;
  border: 1px solid #bfd2d3; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 44px rgba(6, 32, 36, .2);
  scrollbar-color: #9eb8ba transparent; scrollbar-width: thin;
}
.kuend-combobox-liste[hidden] { display: none; }
.kuend-combobox-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: #172330; font-family: inherit;
  font-size: clamp(11px, 1vw, 13.5px); font-weight: 700; line-height: 1.3;
  text-align: left; cursor: pointer;
}
.kuend-combobox-option[hidden] { display: none; }
.kuend-combobox-option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kuend-combobox-option:hover, .kuend-combobox-option.aktiv { background: #e8f3f3; color: var(--kuend-petrol-dunkel); }
.kuend-combobox-option[aria-selected="true"] { background: #fff4d4; color: #4a3807; }
.kuend-combobox-haken { visibility: hidden; flex: 0 0 auto; color: var(--kuend-gruen); font-size: 18px; }
.kuend-combobox-option[aria-selected="true"] .kuend-combobox-haken { visibility: visible; }
.kuend-combobox-leer { margin: 0; padding: 14px 12px; color: var(--kuend-text-2); font-size: 13px; line-height: 1.45; }
.kuend-editor-aktionen { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kuend-linie); flex-wrap: wrap; }
.kuend-vertragsdaten[inert] { pointer-events: none; }
.kuend-zustimmung { display: flex; align-items: center; gap: 11px; font-size: 16px; line-height: 1.45; font-weight: 650; cursor: pointer; }
.kuend-zustimmung input { width: auto; min-height: auto; transform: scale(1.12); }
.kuend-zustimmung:has(input:disabled) { cursor: default; }

/* Kuendigungs-Assistent (Level 2): Grund-Kacheln statt aller Fristfelder auf
   einmal - Details bleiben fuer Sonderfaelle (z.B. Veraeusserung) erreichbar.
   Echte Kacheln statt flacher Balken: Icon-Chip + Label, mehr Hoehe/Luft. */
.kuend-vertragsdaten > strong.kuend-grund-frage { display: block; font-size: 19px; font-weight: 800; }
#kfGesKontaktBox + .kuend-grund-frage { display: block; margin-top: 36px; }
/* Gleiche Groesse wie die Grund-Frage darueber ("Warum soll der Vertrag
   gekuendigt werden?") - vorher wirkten "Vertrag"/"Gesellschaft" wie
   Kleingedrucktes neben den viel groesseren Kacheln/Fragen im selben Formular. */
.kuend-vertragsdaten > strong.kuend-abschnitt-titel { display: block; font-size: 19px; font-weight: 800; color: #172330; }
.kuend-grund-grid {
  display: grid; grid-template-columns: repeat(2, minmax(280px, 400px));
  justify-content: start; gap: 10px; margin-top: 4px;
}
.kuend-grund-btn {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 10px 14px;
  text-align: left; border-radius: 16px; border: 1.5px solid transparent;
  background: var(--kuend-petrol-dunkel); color: #fff; font: inherit; cursor: pointer;
  box-shadow: 0 3px 10px rgba(6, 32, 36, .14);
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kuend-grund-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(6, 32, 36, .22); }
.kuend-grund-btn:focus-visible { outline: 3px solid rgba(8, 121, 133, .25); outline-offset: 3px; }
.kuend-grund-btn.sel {
  border: 3px solid var(--kuend-gold); padding: 8.5px 12.5px;
  background: linear-gradient(135deg, #fff8e5, #ffefbd); color: #17343a;
  box-shadow: 0 0 0 3px rgba(229, 183, 75, .2), 0 8px 22px rgba(87, 65, 12, .17);
}
.kuend-grund-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.kuend-grund-icon svg { width: 26px; height: 26px; }
.kuend-grund-btn.sel .kuend-grund-icon { background: var(--kuend-gold); color: #082d32; }
.kuend-grund-label { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.25; }
.kuend-grund-status {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 8px; border-radius: 999px; background: var(--kuend-gold);
  color: #17343a; font-size: 11px; font-weight: 850; white-space: nowrap;
}
.kuend-grund-status svg { width: 15px; height: 15px; }

@media (max-width: 1120px) {
  .kuend-grund-grid { grid-template-columns: minmax(0, 400px); }
}
@media (max-width: 640px) {
  .kuend-editor-grid { grid-template-columns: 1fr; }
  .kuend-feld.wide { grid-column: auto; }
  .kuend-grund-grid { grid-template-columns: 1fr; }
  .kuend-grund-status span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kuend-combobox-toggle svg, .kuend-ges-aufklapper svg, .kuend-grund-btn { transition: none; }
  .kuend-grund-btn:hover { transform: none; }
}
/* Groesse im Verhaeltnis zu den Grund-Kacheln darueber (kuend-grund-label
   17px) - vorher wirkte dieser Block mit 11px-Feldlabel/17px-Ergebnis wie ein
   nachtraeglich angeflanschtes Kleingedrucktes statt Teil desselben Schritts. */
.kuend-wiz-folge label { font-size: 15.5px; font-weight: 800; color: #172330; margin-bottom: 7px; }
.kuend-wiz-folge input { min-height: 54px; font-size: 22px; font-weight: 800; color: #172330; }
.kuend-wiz-ergebnis {
  display: inline-flex; align-items: baseline; gap: 12px; margin-top: 16px; padding: 13px 18px;
  border-radius: 12px; background: #e5f3ea; border: 1px solid var(--kuend-gruen);
}
.kuend-wiz-termin-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--kuend-text-2); font-weight: 800; }
.kuend-wiz-termin-wert { font-size: 22px; font-weight: 800; color: var(--kuend-gruen); }
.kuend-details-toggle {
  display: block; margin-top: 14px; background: none; border: none; color: var(--kuend-petrol-dunkel);
  font: inherit; font-size: 14.5px; font-weight: 750; cursor: pointer; padding: 0;
}

/* Kompakte Statuszeile in der Karte (statt fluechtigem Toast) - bleibt
   stehen, bis der Kunde unterschrieben oder abgebrochen hat, siehe
   startePolling(). Das eigentliche grosse Pop-up ist .kuend-qr-dialog. */
.kuend-warte-zeile {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  padding: 12px 14px; border-radius: 12px;
  background: #e9f2f2; color: var(--kuend-petrol-dunkel); font-weight: 750; font-size: 13.5px;
}
.kuend-feld input[aria-invalid="true"] {
  border-color: var(--kuend-rot); box-shadow: 0 0 0 3px rgba(161, 44, 38, .14);
}
.kuend-warte-punkt {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--kuend-gold);
  animation: kuend-puls 1.6s ease-in-out infinite;
}
@keyframes kuend-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.kuend-warte-zeile > span:nth-child(2) { flex: 0 1 auto; min-width: 160px; }
.kuend-warte-link { font-family: ui-monospace, monospace; font-size: 12px; opacity: .85; word-break: break-all; }

/* Grosses Pop-up mit dem QR-Code, springt automatisch auf und bleibt offen,
   solange die Unterschrift noch aussteht (kuendQrPopupOeffnen in kuendigung.js).
   Gleiches <dialog>-Muster wie .vm-dialog (manager-ui.css), eigene Optik. */
.kuend-qr-dialog {
  border: 0; padding: 28px 30px; border-radius: 20px; max-width: min(92vw, 400px);
  color: #172330; background: #fff;
  box-shadow: 0 30px 80px rgba(6, 32, 36, .3); text-align: center;
}
.kuend-qr-dialog::backdrop { background: rgba(6, 32, 36, .55); }
.kuend-qr-dialog-titel { margin: 0 0 8px; font-size: 20px; font-weight: 850; color: var(--kuend-petrol-dunkel); }
.kuend-qr-dialog-text { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--kuend-text-2); }
.kuend-qr-dialog-code {
  display: inline-block; padding: 12px; border-radius: 14px; background: #fff;
  border: 1px solid var(--kuend-linie); line-height: 0;
}
.kuend-qr-dialog .kuend-warte-link { display: block; margin: 14px 0 0; }
.kuend-qr-dialog-aktionen { display: flex; gap: 10px; margin-top: 20px; }
.kuend-qr-dialog-aktionen .kuend-btn { flex: 1; }

/* Letzte Versandkontrolle: echtes PDF plus Vertrag/Empfaenger in einem
   bewusst grossen, aber responsiven Dialog. */
.kuend-versand-dialog {
  width: min(96vw, 1120px); max-width: none; max-height: min(92vh, 880px);
  padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  color: #172330; background: #fff; box-shadow: 0 30px 80px rgba(6, 32, 36, .32);
}
.kuend-versand-dialog::backdrop { background: rgba(6, 32, 36, .62); }
.kuend-versand-dialog-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 20px 22px 16px; background: #e5f1f2; border-bottom: 1px solid var(--kuend-linie);
}
.kuend-versand-dialog-kopf h2 { margin: 0; color: var(--kuend-petrol-dunkel); font-size: 22px; }
.kuend-versand-dialog-kopf p { margin: 7px 0 0; color: var(--kuend-text-2); font-size: 13.5px; }
.kuend-dialog-schliessen {
  flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px;
  background: var(--kuend-petrol); color: #fff; font: inherit; font-size: 26px; line-height: 1; cursor: pointer;
}
.kuend-dialog-schliessen:focus-visible { outline: 3px solid rgba(8, 121, 133, .25); outline-offset: 2px; }
.kuend-versand-dialog-inhalt {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr); gap: 18px;
  padding: 18px 22px; min-height: 480px;
}
.kuend-versand-dialog-inhalt iframe {
  width: 100%; height: min(62vh, 650px); border: 1px solid var(--kuend-linie);
  border-radius: 12px; background: #f3f6f6;
}
.kuend-versand-dialog-inhalt aside {
  align-self: start; padding: 16px; border: 1px solid var(--kuend-linie);
  border-radius: 14px; background: #f7f9f9;
}
.kuend-versand-dialog-inhalt aside h3 { margin: 0 0 14px; font-size: 18px; }
.kuend-versand-daten { display: grid; gap: 4px; margin: 0; }
.kuend-versand-daten dt { margin-top: 10px; color: var(--kuend-text-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.kuend-versand-daten dt:first-child { margin-top: 0; }
.kuend-versand-daten dd { margin: 0; font-size: 15px; font-weight: 750; overflow-wrap: anywhere; }
.kuend-versand-warnung {
  margin-top: 18px; padding: 12px; border-radius: 10px; border-left: 4px solid var(--kuend-gold);
  background: #fff5d8; color: #604916; font-size: 13px; line-height: 1.45;
}
.kuend-versand-dialog-aktionen {
  display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 20px;
}

@media (max-width: 760px) {
  .kuend-versand-dialog { width: 96vw; max-height: 96vh; }
  .kuend-versand-dialog-inhalt { grid-template-columns: 1fr; min-height: 0; max-height: 68vh; overflow-y: auto; }
  .kuend-versand-dialog-inhalt iframe { height: 48vh; min-height: 320px; }
  .kuend-versand-dialog-aktionen .kuend-btn { flex: 1; }
}

/* Versandbeleg-Pop-up: teilt sich Rahmen/Backdrop mit .kuend-qr-dialog, ist
   aber breiter und linksbuendig (Datenliste statt zentriertem QR-Code). */
.kuend-beleg-dialog { max-width: min(94vw, 540px); text-align: left; }
.kuend-beleg-dialog .kuend-qr-dialog-titel { text-align: center; margin-bottom: 18px; }
.kuend-beleg-inhalt { max-height: 60vh; overflow-y: auto; }
.kuend-beleg-eintrag {
  padding: 14px 16px; border-radius: 14px; background: #f4f8f8;
  border: 1px solid var(--kuend-linie);
}
.kuend-beleg-eintrag + .kuend-beleg-eintrag { margin-top: 12px; }
.kuend-beleg-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 13px; font-weight: 750; color: var(--kuend-text-2);
}
/* Zweispaltig: Label links, Wert rechts. Lange Werte (Message-ID, Pruefsumme)
   duerfen umbrechen, sonst sprengen sie das Pop-up. */
.kuend-beleg-liste {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0;
  font-size: 13px; line-height: 1.45;
}
.kuend-beleg-liste dt { color: var(--kuend-text-2); font-weight: 700; }
.kuend-beleg-liste dd { margin: 0; overflow-wrap: anywhere; }
.kuend-beleg-technisch { font-family: ui-monospace, monospace; font-size: 11.5px; opacity: .85; }

/* Kontaktdaten-Kontrolle unter der Gesellschaftsauswahl (gesKontaktBlock in
   kuendigung.js) - eigene Box, damit sie sich optisch von den Eingabefeldern
   darueber abhebt (reine Anzeige + einklappbarer Override). */
.kuend-ges-kontakt {
  width: fit-content; min-width: min(520px, 100%); max-width: min(720px, 100%);
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: #f4f8f8; border: 1px solid var(--kuend-linie);
}
.kuend-ges-kontakt .kuend-beleg-liste { font-size: 13px; }
.kuend-ges-kontakt .kuend-hinweis { margin: 8px 0 0; }
.kuend-ges-aufklapper {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: auto; min-height: 40px; margin-top: 10px; padding: 8px 11px;
  border: 1px solid #bdd0d2; border-radius: 9px; background: #fff;
  color: var(--kuend-petrol-dunkel); font: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer;
}
.kuend-ges-aufklapper:hover { border-color: var(--kuend-petrol); background: #eaf4f4; }
.kuend-ges-aufklapper:focus-visible { outline: 3px solid rgba(8, 121, 133, .2); outline-offset: 2px; }
.kuend-ges-aufklapper svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease;
}
.kuend-ges-aufklapper[aria-expanded="true"] svg { transform: rotate(90deg); }
.kuend-beleg-fussnote {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--kuend-linie);
  color: var(--kuend-text-2); font-size: 12px; line-height: 1.5;
}

/* Luft unter der letzten Karte: sonst klebt sie am Rand des Scrollbereichs
   und es sieht aus, als waere die Seite abgeschnitten. */
#kuendBox { padding-bottom: 40px; }

/* ===========================================================================
   Vorlagen-Editor: Einstellungen links, Live-Vorschau rechts (Muster
   Rentenoptimierungs-Mail-Editor). Vorschau bleibt beim Scrollen stehen.
   =========================================================================== */
.kuend-vorlage-splitscreen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.kuend-vorlage-vorschau { position: sticky; top: 16px; }
.kuend-vorschau-label {
  display: block; margin-bottom: 12px; color: var(--kuend-text-2);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.kuend-vorschau-unbekannt { color: var(--kuend-rot); font-weight: 800; }
.kuend-vorschau-aktionen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kuend-linie); text-align: right; }

@media (max-width: 980px) {
  .kuend-vorlage-splitscreen { grid-template-columns: 1fr; }
  .kuend-vorlage-vorschau { position: static; }
}

/* Der Brief ist jetzt ein einziger freier Textblock (Brieftext-Feld) - die
   Vorschau zeigt ihn deshalb 1:1 mit Zeilenumbruechen (pre-wrap), keine
   Positions-Annaeherung mehr noetig. Nur die Signatur bleibt ein eigener,
   mechanisch angehaengter Block (Bild+Linie+Name), wie im PDF. */
.kv-vorschau-brief {
  padding: 26px 24px; border: 1px solid var(--kuend-linie); border-radius: 10px;
  background: #fff; box-shadow: 0 2px 10px rgba(8, 53, 59, .06);
  font-size: 12.5px; line-height: 1.55; color: #1a1a1a;
}
.kv-vs-text > div { overflow-wrap: break-word; min-height: 1.2em; }
.kv-vs-text > .kv-vs-trennlinie {
  min-height: 0; height: .8em; margin-bottom: .4em; border-bottom: 1px solid #333;
}
.kv-vs-signatur { margin-top: 26px; }
.kv-vs-sig-bild { font-size: 26px; margin-bottom: 2px; }
.kv-vs-sig-linie { width: 55mm; max-width: 60%; border-top: 1px solid #333; margin-bottom: 4px; }
.kv-vs-signatur p { font-size: 11px; margin: 0; }

/* Dark Mode: gleiche Manager-Flaechen wie in allen anderen Reitern. Die
   Brief-/PDF-Vorschau bleibt als echtes weisses Dokument erhalten. */
html[data-theme="dark"] #kuendBox,
html[data-theme="dark"] .kuend-qr-dialog,
html[data-theme="dark"] .kuend-versand-dialog {
  --kuend-petrol: var(--vm-primary);
  --kuend-petrol-dunkel: var(--vm-primary-strong);
  --kuend-linie: var(--vm-border);
  --kuend-text-2: var(--vm-muted);
  --kuend-shadow: var(--vm-card-shadow);
  color: var(--vm-text);
}
html[data-theme="dark"] #kuendBox .kuend-unternav,
html[data-theme="dark"] #kuendBox .kuend-karte,
html[data-theme="dark"] .kuend-qr-dialog,
html[data-theme="dark"] .kuend-versand-dialog {
  color: var(--vm-text);
  border-color: var(--vm-border);
  background: var(--vm-surface);
  box-shadow: var(--vm-card-shadow);
}
html[data-theme="dark"] #kuendBox .kuend-unternav .kuend-btn,
html[data-theme="dark"] #kuendBox .kuend-vertragsdaten > strong.kuend-abschnitt-titel,
html[data-theme="dark"] #kuendBox .kuend-wiz-folge label,
html[data-theme="dark"] #kuendBox .kuend-combobox-toggle,
html[data-theme="dark"] #kuendBox .kuend-combobox-option {
  color: var(--vm-text);
}
html[data-theme="dark"] #kuendBox .kuend-unternav .kuend-btn:hover,
html[data-theme="dark"] #kuendBox .kuend-treffer:hover,
html[data-theme="dark"] #kuendBox .kuend-combobox-toggle:hover,
html[data-theme="dark"] #kuendBox .kuend-combobox-option:hover,
html[data-theme="dark"] #kuendBox .kuend-combobox-option.aktiv,
html[data-theme="dark"] #kuendBox .kuend-ges-feld:hover,
html[data-theme="dark"] #kuendBox .kuend-ges-aufklapper:hover {
  color: var(--vm-text);
  background: var(--vm-surface-2);
}
html[data-theme="dark"] #kuendBox .kuend-unternav .kuend-btn.an {
  color: #032326;
  background: var(--vm-primary);
}
html[data-theme="dark"] #kuendBox .kuend-btn.grau,
html[data-theme="dark"] #kuendBox .kuend-ges-aufklapper {
  color: var(--vm-text);
  border-color: var(--vm-border);
  background: var(--vm-surface-3);
}
html[data-theme="dark"] #kuendBox .kuend-feld input,
html[data-theme="dark"] #kuendBox .kuend-feld select,
html[data-theme="dark"] #kuendBox .kuend-feld textarea,
html[data-theme="dark"] #kuendBox .kuend-wiz-folge input,
html[data-theme="dark"] #kuendBox .kuend-ges-feld {
  color: var(--vm-text);
  border-color: var(--vm-border);
  background: var(--vm-surface-3);
}
html[data-theme="dark"] #kuendBox .kuend-ges-feld:focus {
  color: var(--vm-text);
  background: var(--vm-surface-2);
}
html[data-theme="dark"] #kuendBox .kuend-combobox-liste,
html[data-theme="dark"] #kuendBox .kuend-beleg-eintrag,
html[data-theme="dark"] #kuendBox .kuend-ges-kontakt,
html[data-theme="dark"] .kuend-versand-dialog-kopf,
html[data-theme="dark"] .kuend-versand-dialog-inhalt aside {
  color: var(--vm-text);
  border-color: var(--vm-border);
  background: var(--vm-surface-2);
}
html[data-theme="dark"] #kuendBox .kuend-combobox-option[aria-selected="true"] {
  color: #fff2c6;
  background: #4a3a0d;
}
html[data-theme="dark"] #kuendBox .kuend-platzhalter button,
html[data-theme="dark"] #kuendBox .kuend-telefon {
  color: var(--vm-primary);
  border-color: var(--vm-border);
  background: var(--vm-primary-soft);
}
html[data-theme="dark"] .kuend-versand-dialog-kopf h2,
html[data-theme="dark"] .kuend-qr-dialog-titel {
  color: var(--vm-primary);
}
html[data-theme="dark"] .kuend-versand-warnung {
  color: #ffe9ac;
  background: #402f11;
}