/* ====================  css/kunden-portal.css  ====================
   Nur das Besondere des Kundenportals /kunden/ (V2, 11.10.2026). Rahmen, Karten, Board, Marken und Farben kommen aus
   konto-app.css, „Was jetzt?“, Fortschritt und Panel-Fußleisten aus kunden-admin.css, Formularfelder und Seitenpanel
   aus kundenportal.css. Hier: Zähler in der Seitenleiste, Nachrichten von René, „Etwas Neues?“, Freigabe einer Aufgabe
   und die Rückfrage vor dem verbindlichen Annehmen eines Angebots. */

.kpv-inhalt{ display: flex; flex-direction: column; gap: 16px }

/* Zahl neben einem Punkt der Seitenleiste (Freigaben, offene Angebote) */
.kpv-nav-zahl{ margin-left: 6px; font-style: normal; vertical-align: 1px; background: rgba(212,161,6,.18); color: #7a5300 }

/* ---------- Übersicht ---------- */
.kpv-nachricht{ display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid rgba(59,130,246,.38); background: rgba(59,130,246,.07); color: var(--ld-text); font: inherit }
.kpv-nachricht:hover{ border-color: rgba(59,130,246,.7); background: rgba(59,130,246,.12) }
.kpv-nachricht:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.kpv-nachricht-kopf{ font-size: 13px; font-weight: 600; color: #1d4ed8 }
.kpv-nachricht-text{ font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere }

.kpv-neues{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 6px; padding: 18px 20px;
  border-radius: 12px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.kpv-neues > div:first-child{ flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px }
.kpv-neues p{ margin: 0; color: var(--ld-text-2) }
.kpv-neues-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px }
.kpv-neues-knoepfe .ld-details{ width: auto; padding: 0 16px }
.kpv-neues-knoepfe .ld-neu-knopf{ margin-left: 0; text-decoration: none }
a.ld-neu-knopf{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box }
.kpv-kontakt{ flex: 1 1 100%; font-size: 14px }
.kpv-kontakt a{ color: var(--ld-link); font-weight: 600; text-decoration: none }
.kpv-kontakt a:hover{ text-decoration: underline; text-underline-offset: 3px }
.kpv-masterclass{ border-color: rgba(124,58,237,.45); background: color-mix(in srgb, #7c3aed 7%, var(--ld-flaeche)) }

/* Knöpfe links statt rechts (Leiste über einer Liste, leere Ansicht) */
.ld-neu-knopf.kpv-links{ margin-left: 0 }
.kpv-leiste-text{ margin: 0; flex: 1 1 320px; color: var(--ld-text-2); font-size: 14px }

/* ---------- Aufgaben ---------- */
.kpv-karte .ld-weiter--klein{ width: 100% }
/* Fünf Spalten passen ab etwa 1220 px Fensterbreite nebeneinander — sonst wie gewohnt seitlich wischen */
.kpv .kpa-brett .ld-spalte{ flex: 1 1 0; min-width: 168px }

/* ---------- Seitenpanel ---------- */
.kp-panel .kp-panel-marke{ margin: 0 0 14px }
.kpv-freigabe{ margin: 4px 0 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(212,161,6,.5); background: rgba(212,161,6,.07) }
.kp-panel .kpv-freigabe h3{ margin: 0 0 6px; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #7a5300 }
.kpv-freigabe > p{ margin: 0 0 10px; font-size: 14px }
.kpv-freigabe .kp-klein{ margin: 8px 0 0 }
/* Rechtstexte bestätigen & freigeben (René 11.11.2026): Liste mit Links, Wortlaut, Pflicht-Häkchen. Lange Namen und Adressen brechen um,
   der lange Knopf darf zweizeilig werden — am Handy schiebt nichts die Seite zur Seite (Felder 16 px über konto-app.css). */
.kpv-rt-liste{ margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px }
.kpv-rt-liste li{ display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ld-rand, rgba(128,128,128,.3)); background: var(--ld-flaeche, #fff) }
.kpv-rt-liste a, .kpv-rt-liste span{ font-weight: 600; overflow-wrap: anywhere }
.kpv-rt-entwurf{ font-size: 13px; line-height: 1.4; color: #7a5300 }
.kpv-rt-wortlaut{ margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--zk-akzent, #6a2cd8); border-radius: 0 10px 10px 0; background: var(--ld-flaeche-2, #f6f7fb) }
.kpv-rt-wortlaut p{ margin: 0 0 10px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere }
.kpv-rt-wortlaut p:last-child{ margin-bottom: 0 }
.kpv-rt-freigabe .kp-haken{ margin: 0 0 12px; font-weight: 600 }
.kpv-rt-freigabe .kp-haken input{ width: 20px; height: 20px; flex: 0 0 auto; margin: 2px 0 0 }
.kpv-rt-freigabe .kp-feld{ margin: 0 0 10px }
.kpv-rt-freigabe .kpa-mail-knoepfe{ flex-wrap: wrap }
.kpv-rt-freigabe .kpa-mail-knoepfe button{ max-width: 100%; white-space: normal; text-align: center }

/* Die Fußleiste ist flex — ohne diese Zeile bliebe sie trotz hidden sichtbar (Annehmen/Ablehnen-Knöpfe über der Rückfrage) */
.kpa-panel-fuss[hidden]{ display: none }

/* Rückfrage vor dem verbindlichen Annehmen bzw. Ablehnen eines Angebots */
.kpv-bestaetigen{ margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(124,58,237,.55); background: rgba(124,58,237,.08) }
.kpv-bestaetigen[hidden]{ display: none }
.kpv-bestaetigen p{ margin: 0 0 8px }
.kpv-bestaetigen a{ color: var(--ld-link) }
.kpv-bestaetigen .kpa-mail-knoepfe{ margin-top: 10px }

@media (max-width: 720px){
  .kp-panel .kpa-panel-fuss > button, .kpv-bestaetigen .kpa-mail-knoepfe > button{ flex: 1 1 auto }
  .kpv-neues{ padding: 16px }
  .kpv-neues-knoepfe{ width: 100% }
  .kpv-neues-knoepfe > *{ flex: 1 1 auto; justify-content: center; text-align: center }
}

/* ---------- Vorschau „So sieht es dein Kunde“ (Admin, /kunden/?als=…) ---------- */
.kpv-vorschau{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: 12px;
  border: 1px dashed rgba(8,145,178,.6); background: rgba(8,145,178,.07); color: #0e6a80; font-size: 14px }
.kpv-vorschau > span{ flex: 1 1 360px }
.kpv-vorschau .ld-details{ width: auto; padding: 0 16px; text-decoration: none }
.kpv-vorschau-hinweis{ margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; border: 1px dashed rgba(8,145,178,.6); background: rgba(8,145,178,.07); color: #0e6a80; font-size: 13px }
.kpv-als{ margin-top: 20px; text-align: left }
.kpv-als select{ width: 100% }

/* ==========  V3 (14.10.2026): einfach für Nicht-IT'ler — Start, Alle Schritte, Nachrichten, Einstellungen  ========== */
.kpv-inhalt h2{ margin: 0; font-size: 18px; font-weight: 700; color: var(--ld-text); text-transform: none; letter-spacing: -.01em }
.kpv-inhalt h3{ margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ld-text); text-transform: none; letter-spacing: 0 }
.kpv-leise{ margin: 0; color: var(--ld-text-2) }

/* „Das brauchen wir von dir“ — gelb, oben, nur was beim Kunden liegt */
.kpv-todo{ display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 14px;
  background: rgba(212,161,6,.07); border: 1px solid rgba(212,161,6,.45) }
.kpv-todo h2{ color: #7a5300; margin-bottom: 6px }
.kpv-todo > p{ margin: 0; color: var(--ld-text-2) }
.kpv-todo--leer{ background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.4) }
.kpv-todo--leer h2{ color: #146c35 }
.kpv-todo-zeile{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(212,161,6,.25) }
.kpv-todo-zeile:first-of-type{ border-top: 0 }
.kpv-todo-text{ margin: 0; font-size: 16px; font-weight: 600; color: var(--ld-text) }
.kpv-todo-frist{ margin: 2px 0 0; font-size: 14px; color: var(--ld-text-2) }
.kpv-todo-frist--zu{ color: #a51c1c; font-weight: 600 }
.kpv-todo-zeile > div{ flex: 1 1 auto; min-width: 0 }
.kpv-todo-zeile .ld-weiter{ flex: 0 0 auto; width: auto; min-width: 120px; padding: 0 18px }

/* Projektblöcke */
.kpv-projekt{ display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.kpv-projekt-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px }
.kpv-projekt-zahl{ font-size: 14px; color: var(--ld-text-2) }
.kpv-weiter{ margin: 0 }
.kpv-mehr{ margin: 4px 0 0; font-size: 14px; color: var(--ld-text-3) }

/* Phasen als Balken */
.kpv-phasen{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px }
.kpv-phase{ display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.kpv-phase-balken{ height: 8px; border-radius: 4px; background: var(--ld-flaeche-3) }
.kpv-phase--fertig .kpv-phase-balken{ background: #16a34a }
.kpv-phase--jetzt .kpv-phase-balken{ background: #7c3aed }
.kpv-phase-name{ font-size: 13.5px; line-height: 1.35; color: var(--ld-text-2) }
.kpv-phase--fertig .kpv-phase-name{ color: #146c35 }
.kpv-phase--jetzt .kpv-phase-name{ color: var(--ld-text); font-weight: 700 }
.kpv-phase-zeit{ font-size: 12.5px; color: var(--ld-text-3) }

.kpv-jetzt{ display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.kpv-jetzt-ziel{ margin: 0; color: var(--ld-text-2); font-size: 14.5px }

/* Schritte als Liste */
.kpv-schritte{ display: flex; flex-direction: column }
.kpv-schritt{ display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 6px;
  border: 0; border-top: 1px solid var(--ld-rand); background: none; color: var(--ld-text); font: inherit; text-align: left; cursor: pointer; border-radius: 0 }
.kpv-schritt:first-child{ border-top: 0 }
.kpv-schritt:hover{ background: var(--ld-flaeche-2) }
.kpv-schritt:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: -2px }
.kpv-schritt-zeichen{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; font-weight: 700; background: var(--ld-flaeche-3); color: var(--ld-text-2) }
.kpv-schritt-titel{ font-size: 15px; overflow-wrap: anywhere }
.kpv-schritt-stand{ font-size: 13.5px; color: var(--ld-text-2); text-align: right; white-space: nowrap }
.kpv-schritt--gruen .kpv-schritt-zeichen{ background: rgba(22,163,74,.18); color: #146c35 }
.kpv-schritt--gruen .kpv-schritt-titel{ color: var(--ld-text-2) }
.kpv-schritt--violett .kpv-schritt-zeichen{ background: rgba(124,58,237,.2); color: #5b21b6 }
.kpv-schritt--violett .kpv-schritt-stand{ color: #5b21b6 }
.kpv-schritt--gelb .kpv-schritt-zeichen{ background: rgba(212,161,6,.2); color: #7a5300 }
.kpv-schritt--gelb .kpv-schritt-stand{ color: #7a5300; font-weight: 600 }
.kpv-schritt--blau .kpv-schritt-zeichen{ background: rgba(59,130,246,.18); color: #1d4ed8 }
.kpv-phasen-block{ display: flex; flex-direction: column; gap: 4px; padding-top: 6px }
.kpv-phasen-block h3{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.kpv-phasen-stand{ font-size: 13px; font-weight: 500; color: var(--ld-text-3) }
.kpv-phasen-block--jetzt h3{ color: #5b21b6 }
.kpv-legende{ display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: 13.5px; color: var(--ld-text-2) }
.kpv-l--gruen{ color: #146c35 } .kpv-l--violett{ color: #5b21b6 } .kpv-l--gelb{ color: #7a5300 } .kpv-l--grau{ color: var(--ld-text-3) }

/* Nachrichten wie ein Chat */
.kpv-chat{ display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px }
.kpv-chat--kurz{ max-height: none; overflow: visible }
.kpv-blase{ max-width: 82%; padding: 10px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px }
.kpv-blase--rene{ align-self: flex-start; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.35); border-bottom-left-radius: 4px }
.kpv-blase--ich{ align-self: flex-end; background: var(--ld-flaeche-3); border: 1px solid var(--ld-rand-stark); border-bottom-right-radius: 4px }
.kpv-blase-kopf{ margin: 0; font-size: 12.5px; color: var(--ld-text-3) }
.kpv-blase-kopf .ld-link{ font-size: 12.5px }
.kpv-blase-text{ margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere }
.kpv-schreiben{ display: flex; gap: 10px; align-items: flex-end }
.kpv-schreiben textarea{ flex: 1; min-height: 46px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ld-rand-stark);
  background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 15px }
.kpv-schreiben textarea:focus{ outline: 2px solid #7c3aed; outline-offset: 0 }
.kpv-schreiben .ld-neu-knopf{ margin-left: 0; flex: 0 0 auto }
.kpv-schreiben-hinweis{ margin: -6px 0 0 }

/* Einstellungen */
.kpv-einstellungen{ display: flex; flex-direction: column; gap: 16px }
.kpv-wahl{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0 }
.kpv-wahl legend{ width: 100%; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--ld-text-2) }
.kpv-knopfwahl{ position: relative; cursor: pointer }
.kpv-knopfwahl input{ position: absolute; opacity: 0; inset: 0; cursor: pointer }
.kpv-knopfwahl span{ display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ld-rand-stark); color: var(--ld-text-2); font-size: 14.5px }
.kpv-knopfwahl input:checked + span{ background: rgba(124,58,237,.2); border-color: #7c3aed; color: var(--ld-text); font-weight: 600 }
.kpv-knopfwahl input:focus-visible + span{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.kpv-person{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--ld-rand) }
.kpv-person .ld-link{ justify-self: start; padding-bottom: 10px }
.kpv-mail-wahl{ display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--ld-rand); cursor: pointer }
.kpv-mail-wahl input{ width: 20px; height: 20px; margin-top: 2px; accent-color: #7c3aed; flex: 0 0 auto }
.kpv-mail-wahl span{ display: flex; flex-direction: column; gap: 2px }
.kpv-mail-wahl small{ font-size: 13.5px; color: var(--ld-text-2) }
.kpv-speichern{ position: sticky; bottom: 0; padding: 12px 0; background: var(--ld-grund); justify-content: space-between; align-items: center }

@media (max-width: 640px){
  .kpv-todo-zeile{ flex-direction: column; align-items: stretch }
  .kpv-schritt{ grid-template-columns: 24px minmax(0,1fr) }
  .kpv-schritt-stand{ grid-column: 2; text-align: left; white-space: normal }
  .kpv-blase{ max-width: 92% }
  .kpv-schreiben{ flex-direction: column; align-items: stretch }
}

/* ---------- Shop auf „Start“ und Dateien hochladen (14.10.2026) ---------- */
.kpv-shop{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 20px; border-radius: 14px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.kpv-shop > div{ flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.kpv-shop h2{ margin: 0; font-size: 18px }
.kpv-shop-knopf{ margin-left: 0; padding: 0 18px; text-decoration: none }

.kpv-ablage{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 18px; text-align: center; cursor: pointer;
  border: 2px dashed rgba(11,13,22,0.165); border-radius: 12px; transition: border-color .15s, background .15s }
.kpv-ablage:hover, .kpv-ablage--drueber{ border-color: rgba(59,130,246,.75); background: rgba(59,130,246,.07) }
.kpv-ablage:focus-within{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.kpv-ablage-gross{ font-size: 18px; font-weight: 600 }
.kpv-ablage-klein{ font-size: 13px; color: var(--ld-text-2) }
.kpv-ablage-knopf{ margin-left: 0; padding: 0 18px; pointer-events: none }
.kpv-ablage .kp-klein{ max-width: 46ch; margin-top: 4px }
.kpv-laufend{ display: flex; flex-direction: column; gap: 10px }
.kpv-laufend:empty{ display: none }
.kpv-upload{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px }
.kpv-upload-name{ overflow-wrap: anywhere; font-weight: 600 }
.kpv-upload-stand{ color: var(--ld-text-2); white-space: nowrap }
.kpv-upload-balken{ grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(11,13,22,0.06); overflow: hidden }
.kpv-upload-balken > span{ display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, #7c3aed); transition: width .2s }
.kpv-upload--fertig .kpv-upload-balken > span{ background: #16a34a }
.kpv-upload--fehler .kpv-upload-stand{ color: #a51c1c }
.kpv-upload--fehler .kpv-upload-balken > span{ background: #dc2626 }

/* ---------- Alle Schritte: Projektwahl, Liste/Board (14.10.2026) ---------- */
.kpv-schritte-leiste{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px }
.kpv-projektwahl{ display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100% }
.kpv-projektwahl span{ font-size: 13px; color: var(--ld-text-2) }
.kpv-projektwahl select{ min-width: 0; max-width: min(420px, 70vw); height: 38px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--ld-flaeche); color: var(--ld-text); border: 1px solid var(--ld-rand) }
.kpv-weiteres{ width: auto; margin-left: auto; padding: 0 16px }
.kpv-brett{ margin-top: 4px }
.kpv-brett .ld-karte .ld-weiter{ align-self: flex-start }
@media (max-width: 640px){ .kpv-weiteres{ margin-left: 0 } }

/* ---------- Dokumente und Freigaben (14.10.2026) ---------- */
.kpv-dok-filter{ align-self: flex-start }
.kpv-freigaben{ display: flex; flex-direction: column; gap: 6px }
.kp-panel .kpv-freigaben{ margin-bottom: 6px }
.kpv-datei-info .ld-marke{ margin-right: 4px; vertical-align: 1px }

/* ---------- Erklärvideo (15.10.2026) ---------- */
.kpv-videokarte{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 16px 20px; border-radius: 14px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.kpv-videokarte > div{ flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px }
.kpv-videokarte h2{ margin: 0; font-size: 18px }
.kpv-videokarte-bild{ position: relative; flex: 0 0 auto; display: block; width: 200px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ld-rand) }
.kpv-videokarte-bild img{ display: block; width: 100%; height: auto }
.kpv-videokarte-bild span{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff;
  background: rgba(5,6,12,.35); transition: background .15s }
.kpv-videokarte-bild:hover span{ background: rgba(5,6,12,.15) }
.kpv-videokarte-knoepfe{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 0 }
.kpv-videokarte-knoepfe .ld-neu-knopf{ margin-left: 0 }
.kpv-hilfe{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start }
.kpv-video{ display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #05060c }
.kpv-kapitel h2{ margin: 0 0 8px; font-size: 16px }
.kpv-kapitel ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.kpv-kapitel-knopf{ display: flex; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--ld-text);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer }
.kpv-kapitel-knopf:hover{ background: var(--ld-flaeche-2) }
.kpv-kapitel-knopf span{ flex: 0 0 38px; color: var(--ld-text-2); font-variant-numeric: tabular-nums }
/* Lernvideos „René Zugriff geben“ (15.10.2026) */
.kpv-zugaenge{ display: flex; flex-direction: column; gap: 10px; margin-top: 28px }
.kpv-zugaenge h2{ margin: 0; font-size: 20px }
.kpv-zugaenge-liste{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 6px }
.kpv-zugang{ margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px;
  background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.kpv-zugang .kpv-video{ border-radius: 10px }
.kpv-zugang figcaption{ display: flex; flex-direction: column; gap: 3px; padding: 0 4px 4px }
.kpv-zugang figcaption strong{ font-size: 16px }
.kpv-zugang figcaption span{ font-size: 14px; color: var(--ld-text-2) }
.kpv-zugang figcaption small{ font-size: 13px; color: var(--ld-text-2) }
@media (max-width: 960px){ .kpv-hilfe{ grid-template-columns: 1fr } }
.kpv-zugang-link{ align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 600; text-decoration: none }
.kpv-zugang-link:hover, .kpv-zugang-link:focus-visible{ text-decoration: underline }
@media (max-width: 960px){ .kpv-zugaenge-liste{ grid-template-columns: 1fr } }
@media (max-width: 560px){ .kpv-videokarte-bild{ width: 100% } }

/* ---------- Rechnungen: Zahlstand und Raten (16.10.2026) ---------- */
.kpv-rechnung{ border-left: 3px solid var(--ton); padding-left: 12px }
.kpv-re-summen{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px }
.kpv-re-summen > div{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.kpv-re-summen span{ font-size: 12px; color: var(--ld-text-2) }
.kpv-re-summen b{ font-size: 18px; font-variant-numeric: tabular-nums }
.kpv-re-raten-satz{ margin: 0 0 10px; font-weight: 600 }
.kpv-re-naechste{ display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(212,161,6,.45); background: rgba(212,161,6,.07) }
.kpv-re-ueber{ margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a5300 }
.kpv-re-naechste-zeile{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-size: 14px }
.kpv-re-naechste-zeile--erste{ font-size: 15.5px }
.kpv-re-alle summary{ cursor: pointer; font-weight: 600; color: var(--ld-text-2); margin: 4px 0 10px }
@media (max-width: 560px){ .kpv-re-summen{ grid-template-columns: 1fr } }

/* ---------- Nachrichten nach Themen (23.10.2026): Allgemein oben, darunter je Schritt ein Gespräch ----------
   Logik: themen()/themaHtml() in js/kundenportal.js. Neues von René: blauer Rand; zugeklappt eine Zeile Vorschau. */
.kpvg-liste{ display: flex; flex-direction: column; gap: 10px }
.kpvg{ border: 1px solid var(--ld-rand); border-left: 3px solid var(--ld-rand-stark); border-radius: 14px; background: var(--ld-flaeche); overflow: hidden }
.kpvg--neu{ border-left-color: #3b82f6; background: color-mix(in srgb, #3b82f6 5%, var(--ld-flaeche)) }
.kpvg-kopf{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 14px 18px; border: 0; background: transparent;
  color: var(--ld-text); font: inherit; text-align: left; cursor: pointer }
.kpvg-kopf:hover{ background: color-mix(in srgb, var(--ld-text) 4%, transparent) }
.kpvg-kopf:focus-visible{ outline: 2px solid #7c3aed; outline-offset: -2px }
.kpvg-titel{ display: inline-flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere }
.kpvg-titel svg{ width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ld-text-2); stroke-width: 1.8 }
.kpvg-marken{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px }
.kpvg-info{ font-size: 13px; color: var(--ld-text-3) }
.kpvg-vorschau{ font-size: 14.5px; line-height: 1.5; color: var(--ld-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere }
.kpvg-vorschau b{ color: var(--ld-text); font-weight: 600 }
.kpvg-koerper{ display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 16px; border-top: 1px solid var(--ld-rand) }
.kpvg-koerper .kpv-chat{ margin-top: 10px }
.kpvg-mehr{ align-self: center; margin-top: 10px; padding: 6px 14px; border: 1px solid var(--ld-rand-stark); border-radius: 999px; background: transparent;
  color: var(--ld-text-2); font: inherit; font-size: 13.5px; cursor: pointer }
.kpvg-fuss{ margin: 0; font-size: 14px }
@media (max-width: 640px){ .kpvg-kopf{ padding: 13px 14px } .kpvg-koerper{ padding: 4px 14px 14px } }
/* Zweiklang (30.10.2026): Reiter der Einstellungen, ruhige Dokumentzeilen, Liefern-Assistent, Vertrags-Schritte */
.kpv-einst-reiter{ align-self: flex-start; margin-bottom: 4px }
.kpv-datei--ruhig .kpv-datei-info{ color: var(--ld-text-2) }
.kpv-liefern{ margin: 6px 0 18px; padding: 18px; border-radius: 16px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche-2) }
.kpv-liefern .kpv-ablage{ margin-top: 10px }
.kvt-schritte .zk-stufen{ margin-top: 6px }
.kvt-schritte h3{ margin: 0 0 10px }

/* Hinweis „Großes Update“ (01.11.2026): einmaliges Fenster nach dem Zweiklang-Umbau */
.kpv-update{ width: min(480px, calc(100vw - 32px)); max-height: calc(100svh - 32px); box-sizing: border-box; overflow-y: auto; margin: auto; padding: 26px 26px 22px;
  border: 0; border-radius: 20px; background: #fff; color: var(--ld-text); box-shadow: var(--zk-schatten-hoch); font-family: var(--zk-schrift); font-size: 15.5px; line-height: 1.55 }
.kpv-update::backdrop{ background: rgba(11,13,22,.45) }
.kpv-update-marke{ display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; background: var(--zk-akzent-hell); color: var(--zk-akzent-h);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.kpv-update h2{ margin: 0 0 10px; font-family: var(--zk-titel); font-size: 22px; line-height: 1.25; text-wrap: balance }
.kpv-update p{ margin: 0 0 10px }
.kpv-update ul{ display: grid; gap: 8px; margin: 4px 0 14px; padding: 0 0 0 20px }
.kpv-update li::marker{ color: var(--zk-akzent) }
.kpv-update-leise{ color: var(--ld-text-2) }
.kpv-update-fuss{ display: flex; justify-content: flex-end; margin-top: 18px }
@media (max-width: 480px){ .kpv-update{ padding: 22px 18px 18px } .kpv-update-fuss .zk-knopf{ width: 100% } }

/* Anhänge an Nachrichten (René 09.11.2026) */
.kpv-anhaenge{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.kpv-anhaenge:empty{ display: none }
.kpv-anhang-chip{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ld-rand-stark); background: transparent; color: inherit; font: inherit; font-size: 13px; line-height: 1.3 }
button.kpv-anhang-chip{ cursor: pointer }
button.kpv-anhang-chip:hover{ border-color: #7c3aed }
.kpv-anhang-chip svg{ flex: 0 0 auto }
.kpv-anhang-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px }
.kpv-anhang-stand{ flex: 0 0 auto; opacity: .65; font-size: 12px }
.kpv-anhang-chip--weg{ opacity: .6 }
.kpv-anhang-chip--fehler{ border-color: #dc2626 }
.kpv-anhang{ flex: 1 0 100%; min-width: 0 }
.kpv-anhang-auf{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.kpv-anhang-weg{ border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer }
.kpv-schreiben{ flex-wrap: wrap }
.kpv-ablage--drueber.kpv-schreiben, form.kpv-ablage--drueber{ outline: 2px dashed #7c3aed; outline-offset: 4px }