/* ====================  css/kunden-admin.css  ====================
   Nur das Besondere des Kunden-Admins /kunden/admin/ (V2, 11.10.2026). Rahmen, Karten, Board, Marken, Meldungen und
   Farben kommen aus konto-app.css (gilt für alle Seiten hinter dem Login); Formularfelder und Seitenpanel aus
   kundenportal.css. Hier: Kopf eines Kunden, „Was jetzt?“, die Rückfrage vor jeder Mail, das Aufgaben-Board mit fünf
   Spalten, das schnelle Anlegen einer Aufgabe, die Vorlagen für „Neues Projekt“ und die Fußleisten der Panels. */

.kpa-arbeit{ display: flex; flex-direction: column; gap: 16px }

/* Knöpfe aus konto-app.css, die hier nicht die ganze Breite nehmen sollen */
.kpa-aktionen .ld-details, .kpa-panel-fuss .ld-details, .kpa-mail-knoepfe .ld-details, .kpa-reiter-knopf,
.kpa-pos-neu .ld-details, .kpa-schnellform .ld-details, .kpa-hinweis .ld-weiter, .kpa-stand .ld-weiter,
.kpa-panel-fuss .ld-weiter, .kpa-mail-knoepfe .ld-weiter{ width: auto; padding: 0 16px }
.kpa-panel-fuss .ld-neu-knopf, .kpa-mail-knoepfe .ld-neu-knopf, .kpa-aktionen .ld-neu-knopf{ margin-left: 0 }

/* ---------- Kundenliste ---------- */
.kpa-schnell--anfragen{ --s: #3b82f6 }
.kpa-schnell--kommentare{ --s: #7c3aed }
.kpa-schnell--freigabe{ --s: #d4a106 }
.kpa-schnell--zugang{ --s: #ea6c10 }
.kpa-abschnitt{ display: flex; flex-direction: column; gap: 10px; margin-top: 6px }
.ld-app .kpa-abschnitt-titel{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-family: inherit;
  font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.kpa-zuruecksetzen{ font-size: 13px; font-weight: 500 }
.kpa-kz--klein{ padding-top: 12px; padding-bottom: 12px }
.kpa-kz--klein .ld-kz-haupt{ gap: 6px }

/* ---------- Kopf eines Kunden ---------- */
.kpa-brot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px }
.kpa-brot .ld-link{ font-size: 14px; font-weight: 600; text-decoration: none }
.kpa-brot .ld-link:hover{ text-decoration: underline }
.kpa-brot .kpa-wechsel{ display: block; margin: 0; flex: 0 1 300px }   /* kundenportal.css blendet .kpa-wechsel aus (alter Admin) */
.kpa-wechsel select{
  width: 100%; min-height: 40px; padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid var(--ld-rand-stark); border-radius: 10px; color: var(--ld-text); font: inherit; font-size: 14px;
  background: var(--ld-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c8d0e4' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.kpa-wechsel select option{ background: var(--ld-flaeche); color: var(--ld-text) }
.kpa-kopf{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px }
.kpa-kopf-text{ min-width: 0; display: flex; flex-direction: column; gap: 8px }
.ld-app .kpa-kopf h1{ margin: 0; font-family: inherit; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--ld-text); overflow-wrap: anywhere }
.kpa-kopf .ld-kz-meta a{ color: var(--ld-text); font-weight: 500 }
.kpa-aktionen{ display: flex; flex-wrap: wrap; gap: 8px }
.kpa-notiz{ margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--ld-rand-stark); color: var(--ld-text-2); font-size: 14px }
.kpa-notiz svg{ margin-top: 3px }

/* ---------- Was jetzt? ---------- */
/* Zweiklang (30.10.2026): ruhige Liste in einer Karte (Trennlinien statt farbiger Kästen), Standfarbe nur im Punkt */
.kpa-jetzt{ display: flex; flex-direction: column; gap: 0; padding: 16px 20px 10px; border-radius: 18px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: var(--zk-schatten) }
.kpa-jetzt .kpa-abschnitt-titel{ margin-bottom: 6px }
.kpa-jetzt-zeile{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-top: 1px solid var(--ld-rand) }
.kpa-jetzt-zeile:first-of-type{ border-top: 0 }
.kpa-jetzt-text{ flex: 1 1 320px; min-width: 0; font-weight: 600; overflow-wrap: anywhere }
.kpa-jetzt-zeile .ld-weiter{ width: auto; flex: none; padding: 0 16px }
.kpa-jetzt-leer{ margin: 0; color: var(--ld-text-2) }
.kpa-jetzt-info{ margin: 2px 0 0; display: flex; align-items: center; gap: 8px; color: var(--ld-text-2); font-size: 14px }
.kpa-jetzt-info--klein{ font-size: 13px }

/* ---------- Rückfrage vor jeder Mail (Renés Regel: nie eine Mail ohne sichtbaren Hinweis) ---------- */
.kpa-mail{ padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(220,38,38,.55); background: rgba(220,38,38,.09) }
.kpa-mail[hidden]{ display: none }
.kpa-mail-kopf{ margin: 0; display: flex; align-items: center; gap: 9px; font-weight: 700; color: #a51c1c }
.kpa-mail-kopf svg{ width: 18px; height: 18px }
.kpa-mail-daten{ margin: 10px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 14px }
.kpa-mail-daten dt{ color: var(--ld-text-2) }
.kpa-mail-daten dd{ margin: 0; overflow-wrap: anywhere }
.kpa-mail-knoepfe{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px }
.kpa-bestaetigen{ margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(220,38,38,.45); background: rgba(220,38,38,.07) }
.kpa-bestaetigen[hidden]{ display: none }
.kpa-bestaetigen p{ margin: 0 }

/* ---------- Aufgaben ---------- */
.kpa-sprintwahl{ margin-bottom: 4px }
.kpa-projektwahl{ max-width: 460px; margin: 0 0 10px }
.kpa-schnellform{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 6px }
.kpa-schnellform label{ display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ld-text-2) }
.kpa-schnellform-titel{ flex: 1 1 320px; min-width: 0 }
.kpa-schnellform-projekt{ flex: 0 1 280px; min-width: 0 }   /* lange Projektnamen dürfen das Feld nicht breiter machen */
.kpa-schnellform input, .kpa-schnellform select{
  width: 100%; min-height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--ld-rand-stark); border-radius: 10px;
  background: var(--ld-flaeche); color: var(--ld-text); font: inherit; font-size: 14.5px; font-weight: 400;
}
.kpa-schnellform select{ appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background: var(--ld-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c8d0e4' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center }
.kpa-schnellform select option{ background: var(--ld-flaeche); color: var(--ld-text) }
.kpa-schnellform input:focus, .kpa-schnellform select:focus{ outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.22) }
.kpa-schnellform .ld-details{ min-height: 42px }
.kpa-brett .ld-spalte{ flex-basis: 250px }
.kpa-neu{ display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #3b82f6; vertical-align: 1px }
.kpa-karte-projekt{ color: var(--ld-text-2) }
.kpa-karte-warten{ margin-top: 6px; font-size: 12.5px; color: #7a5300 }
.kpa-platz{ height: 4px; margin: 2px 0; border-radius: 2px; background: #7c3aed }
.kpa-fortschritt{ height: 6px; border-radius: 3px; background: var(--ld-flaeche-3); overflow: hidden; max-width: 420px }
.kpa-fortschritt span{ display: block; height: 100%; border-radius: 3px; background: #16a34a }

/* ---------- Hinweise ---------- */
.kpa-hinweis{ margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); color: var(--ld-text-2); font-size: 14px }
.kpa-hinweis p{ margin: 0 0 8px }
.kpa-hinweis ul{ margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px }
.kpa-hinweis--gelb{ background: rgba(212,161,6,.08); border-color: rgba(212,161,6,.45); color: #fdecb3 }
.kpa-hinweis--gruen{ background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.4); color: #d6f5e0 }

/* ---------- Seitenpanel ---------- */
.kpa-panel-fuss{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px }
.kpa-panel-fuss--links{ justify-content: flex-start }
.kpa-panel-fuss-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.kpa-gefahr{ color: #a51c1c }
.kpa-stand{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--ton) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ton) 40%, transparent); font-size: 14px }
.kpa-stand > span{ flex: 1 1 240px }
.kpa-zeile{ display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer }
.kpa-zeile:hover{ border-color: var(--ld-rand-stark) }
.kpa-vorlagen{ margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.kpa-vorlagen legend{ margin-bottom: 8px; font-weight: 700 }
.kpa-vorlage{ display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche-2); cursor: pointer }
.kpa-vorlage:has(input:checked){ border-color: #7c3aed; box-shadow: inset 3px 0 0 #7c3aed }
.kpa-vorlage input{ margin-top: 4px; accent-color: #6a2cd8 }
.kpa-vorlage span{ display: flex; flex-direction: column }
.kpa-vorlage small{ color: var(--ld-text-2); font-size: 12.5px }
.kpa-pos-neu{ display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px }
.kp-panel .kpa-pos input[inputmode="decimal"]{ text-align: right }

/* ---------- Verkauf & Umsatz (11.10.2026) ---------- */
.kp-feld[hidden]{ display: none }
.kpa-umsatz .ld-zahl-wert{ font-size: 24px }
.kpa-umsatz-ueber{ margin: 4px 0 -6px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ld-text-2) }
.kpa-geld{ margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ld-text); font-variant-numeric: tabular-nums }
.kpa-ohne-betrag{ color: var(--ld-text-3); font-style: italic }
.kpa-verkauf-brett .ld-spalte{ flex: 1 1 0; min-width: 138px }
/* Schmale Spalten: Stufennamen umbrechen statt abschneiden („Warte auf Rückmeldung“) */
.kpa-verkauf-brett .ld-spalte-kopf{ align-items: flex-start; padding: 10px 10px 4px; font-size: 13px; line-height: 1.3 }
.kpa-verkauf-brett .ld-spalte-kopf > span:first-child{ align-items: flex-start; white-space: normal; overflow: visible; -webkit-hyphens: auto; hyphens: auto }
.kpa-verkauf-brett .ld-spalte-kopf .ld-punkt{ margin-top: 4px }
.kpa-verkauf-brett .ld-spalte-tun{ padding-left: 10px; padding-right: 10px }
.kpa-chance .ld-karte-titel{ overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto }
.kpa-spalte-summe{ font-weight: 700; color: var(--ld-text); font-variant-numeric: tabular-nums }
.kpa-marke-wert{ --m: var(--ld-text); --m-text: var(--ld-text); font-variant-numeric: tabular-nums }
.kpa-abgelegt{ margin: 0; font-size: 13.5px; color: var(--ld-text-2) }
.kpa-umsatz-jahr{ display: flex; flex-direction: column }
.ld-app .kpa-umsatz-kopf{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--ld-rand); font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.kpa-umsatz-kopf b{ font-variant-numeric: tabular-nums }
.kpa-umsatz-zeile{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px }
.kpa-umsatz-titel{ display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere }
.kpa-umsatz-wann{ color: var(--ld-text-2); font-size: 13px }
.kpa-umsatz-betrag{ font-variant-numeric: tabular-nums; text-align: right; min-width: 96px }

@media (max-width: 720px){
  .kpa-vorlagen{ grid-template-columns: minmax(0, 1fr) }
  .kpa-aktionen{ width: 100% }
  .kpa-aktionen > *{ flex: 1 1 auto }
  .kpa-brot .kpa-wechsel{ flex: 1 1 100% }
  .kpa-schnellform-titel, .kpa-schnellform-projekt{ flex: 1 1 100% }
  .kpa-umsatz-zeile{ grid-template-columns: minmax(0, 1fr) auto }
  .kpa-umsatz-wann{ grid-column: 1 / -1; grid-row: 2 }
}

/* Erreichbarkeit aus den Einstellungen des Kunden (14.10.2026) */
.kpa-erreichbar{ display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 14px; color: var(--ld-text-2) }
.kpa-erreichbar svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8 }

/* Knopf „Kundenansicht“ (Link, sieht aus wie die Knöpfe daneben) */
a.kpa-als-kunde{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none }

/* ---------- Shop-Passwort, Shop-Knöpfe, Dateiliste (14.10.2026; auch im Kundenportal geladen) ---------- */
.kp-pw{ display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 10px; border-radius: 8px;
  background: rgba(11,13,22,0.03); border: 1px solid var(--ld-rand); vertical-align: middle }
.kp-pw-feld{ flex: 1 1 auto; min-width: 0; width: 15ch; padding: 6px 0; border: 0; background: none; color: var(--ld-text);
  font: 500 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em }
.kp-pw-feld:focus{ outline: none }
.kp-pw:focus-within{ border-color: rgba(11,13,22,0.262) }
.kp-pw-knopf{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--ld-text-2); cursor: pointer }
.kp-pw-knopf svg{ width: 17px; height: 17px }
.kp-pw-knopf:hover{ background: rgba(11,13,22,0.06); color: var(--ld-text) }
.kp-pw-knopf:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 1px }
.kp-pw-knopf--an{ color: #1d4ed8 }
.kp-pw-knopf--ok{ color: #146c35 }
.kp-feld .kp-pw{ display: flex; width: 100%; box-sizing: border-box }
.kp-feld .kp-pw-feld{ width: auto }

.kpa-shop{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0 }
.kpa-shop .ld-details{ width: auto; padding: 0 14px; text-decoration: none; display: inline-flex; align-items: center }
.kpa-shop-felder{ display: flex; flex-direction: column; gap: 12px; margin: 4px 0; padding: 12px 14px 14px; border: 1px solid var(--ld-rand); border-radius: 10px }
.kpa-shop-felder legend{ padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ld-text-2) }
/* Weitere Ansprechpartner in den Stammdaten (20.10.2026) */
.kpa-leute{ display: flex; flex-direction: column }
.kpa-person{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--ld-rand) }
.kpa-person:first-child{ border-top: 0; padding-top: 0 }
.kpa-person .ld-link{ justify-self: start; padding-bottom: 10px }
.kpa-person-neu{ align-self: flex-start }

.kpv-dateien{ display: flex; flex-direction: column }
.kpv-datei{ display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name knoepfe" "info knoepfe"; gap: 2px 14px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--ld-rand) }
.kpv-datei:first-child{ border-top: 0 }
.kpv-datei-name{ grid-area: name; font-weight: 600; overflow-wrap: anywhere }
.kpv-datei-info{ grid-area: info; font-size: 13px; color: var(--ld-text-2) }
.kpv-datei-knoepfe{ grid-area: knoepfe; display: flex; align-items: center; gap: 12px }
.kpv-datei-knoepfe .ld-details{ width: auto; padding: 0 14px }
@media (max-width: 560px){
  .kpv-datei{ grid-template-columns: 1fr; grid-template-areas: "name" "info" "knoepfe" }
  .kpv-datei-knoepfe{ margin-top: 6px }
}
/* Mini-Vorschau und Umbenennen (02.11.2026, Kundenfeedback): Kundenportal und Admin teilen sich die Zeile */
.kpv-datei--bild{ grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "bild name knoepfe" "bild info knoepfe"; column-gap: 14px }
.kpv-datei-bild{ grid-area: bild; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--ld-rand); border-radius: 10px; background: var(--ld-flaeche-2, rgba(11,13,22,.04)); color: var(--ld-text-2); font: inherit }
.kpv-datei-bild:focus-visible{ outline: 2px solid var(--ld-akzent, #4f46e5); outline-offset: 2px }
.kpv-datei-bild img{ width: 100%; height: 100%; object-fit: cover; display: block }
.kpv-datei-bild span{ font-size: 11px; font-weight: 700; letter-spacing: .04em }
.kpv-datei-bild--pdf{ background: #fdecec; color: #b42318; border-color: #f6caca }
.kpv-datei-bild--archiv{ background: #fff4e0; color: #9a5b00; border-color: #f3dcb1 }
.kpv-datei-bild--video, .kpv-datei-bild--audio{ background: #efeafe; color: #5b3fc4; border-color: #dcd2fb }
.kpv-datei-bild--text{ background: #e8f0fe; color: #1d4fb8; border-color: #c9dafb }
.kpv-datei-bild--tabelle{ background: #e6f6ec; color: #17733f; border-color: #c4e8d1 }
.kpv-datei-bild--folien{ background: #fff0e8; color: #b5441b; border-color: #f6d3c1 }
.kpv-datei-umbenennen{ grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0 }
.kpv-datei-feld{ display: flex; align-items: center; flex: 1 1 220px; min-width: 0; height: 38px; border: 1px solid var(--ld-rand-stark, var(--ld-rand)); border-radius: 9px; background: var(--ld-flaeche, #fff); overflow: hidden }
.kpv-datei-feld input{ flex: 1; min-width: 0; height: 100%; border: 0; padding: 0 10px; background: transparent; color: var(--ld-text); font: inherit; font-size: 16px; outline: 0 }
.kpv-datei-feld span{ padding: 0 10px 0 2px; color: var(--ld-text-2); font-size: 14px; white-space: nowrap }
.kpv-datei-feld:focus-within{ border-color: var(--ld-akzent, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.15) }
.kpv-datei-umbenennen-knoepfe{ display: flex; align-items: center; gap: 12px }
.kpv-datei-umbenennen-knoepfe .ld-details{ width: auto; padding: 0 14px }
.kpv-datei-umbenennen .kp-meldung:empty{ display: none }
.kpv-datei-umbenennen .kp-meldung{ flex-basis: 100%; margin: 0 }
@media (max-width: 560px){
  .kpv-datei--bild{ grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "bild name" "bild info" "knoepfe knoepfe" }
  .kpv-datei--bild .kpv-datei-bild{ width: 56px; height: 56px }
  .kpv-datei--bild .kpv-datei-knoepfe{ justify-content: flex-start; gap: 10px }
  .kpv-datei--bild .kpv-datei-knoepfe .ld-link{ font-size: 14px }     /* drei Knöpfe passen in eine Zeile (375 px) */
}
/* Lightbox für Fotos (03.11.2026): dunkle Fläche, Bild so groß wie möglich, Leiste mit Name und Knöpfen unten */
.kpv-lb-offen{ overflow: hidden }
.kpv-lb{ position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 12, 18, .94); color: #fff; display: flex; flex-direction: column }
.kpv-lb:not([open]){ display: none }
.kpv-lb::backdrop{ background: transparent }
.kpv-lb-buehne{ flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 64px }
.kpv-lb-bild{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: filter .2s }
.kpv-lb-bild--klein{ width: min(100%, 960px); filter: blur(2px) }
.kpv-lb-pfeil{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1 }
.kpv-lb-pfeil:hover{ background: rgba(255, 255, 255, .26) }
.kpv-lb-pfeil--zurueck{ left: 12px }
.kpv-lb-pfeil--weiter{ right: 12px }
.kpv-lb-leiste{ display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .35) }
.kpv-lb-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; opacity: .9 }
.kpv-lb-knoepfe{ display: flex; gap: 8px; flex-shrink: 0 }
.kpv-lb-knoepfe .ld-details{ width: auto; min-height: 36px; padding: 0 14px; margin: 0 }
.kpv-lb-zu{ min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer }
.kpv-lb-zu:hover{ background: rgba(255, 255, 255, .12) }
.kpv-lb button:focus-visible{ outline: 2px solid #fff; outline-offset: 2px }
@media (max-width: 560px){
  .kpv-lb-buehne{ padding: 8px }
  .kpv-lb-pfeil{ display: none }                       /* am Handy wird gewischt */
  .kpv-lb-leiste{ flex-wrap: wrap }
  .kpv-lb-name{ flex-basis: 100% }
  .kpv-lb-knoepfe{ width: 100% }
  .kpv-lb-knoepfe > *{ flex: 1 }
}

/* Aufgaben-Wünsche der Kunden (06.11.2026): im Projekt beim Kunden, im Admin über dem Board */
.kw-block{ margin: 0 0 14px }
.kw-block .kpa-abschnitt-titel{ margin: 0 0 8px }
.kw-liste{ display: grid; gap: 8px; margin: 0 0 12px }
.kw-wunsch{ padding: 12px 14px; border: 1px solid var(--ld-rand-stark); border-left: 3px solid #4f6bdc; border-radius: 10px; background: var(--ld-flaeche) }
.kw-wunsch--abgelehnt{ border-left-color: #b98a2e }
.kw-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px }
.kw-kopf h3{ margin: 0; font-size: 15px }
.kw-stand{ font-size: 13px; color: var(--ld-text-3) }
.kw-text{ margin: 6px 0 0; font-size: 14px; color: var(--ld-text-2); white-space: pre-line }
.kw-wunsch .ld-link{ margin-top: 6px; font-size: 14px }
.kw-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.kw-knoepfe .ld-neu-knopf, .kw-knoepfe .ld-details{ width: auto; min-height: 38px; margin: 0; padding: 0 14px }
.kw-haken{ display: flex; align-items: flex-start; gap: 8px; font-size: 14px }
.kw-haken input{ width: auto; margin: 3px 0 0 }
.kpv-weiteres + .kpv-weiteres{ margin-left: 0 }

/* Zugänge (03.11.2026): Passwortmanager — je Zugang eine Karte, Passwort verborgen, Formular in der Liste */
.kz .kpv-projekt-kopf{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px }      /* im Admin fehlen die Portal-Stile */
.kz .kpv-projekt-kopf h2{ margin: 0; font-size: 18px; line-height: 1.3 }
.kz .kpv-projekt-zahl{ font-size: 13px; color: var(--ld-text-3) }
.kz .kpv-projekt-kopf .ld-neu-knopf{ margin-left: auto; width: auto; padding: 0 14px }
.kz-codes--admin{ margin-top: 40px }                     /* Auth-Codes im Admin: Abstand zu den Zugängen darüber (René 11.11.2026) */
.kz-liste{ display: grid; gap: 10px }
.kz-tresor{ display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--ld-rand-stark); border-radius: 12px; background: var(--ld-flaeche-2) }
.kz-tresor p{ flex: 1 1 260px; margin: 0; font-size: 14px }
.kz-tresor .ld-neu-knopf, .kz-tresor .ld-details{ width: auto; min-height: 38px; margin: 0; padding: 0 14px }
.kz-tresor--offen{ border-color: #2e9e6b; background: rgba(46, 158, 107, .10) }
.kz-tresor-warnung{ margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #8a1c1c; background: rgba(200, 40, 40, .10) }
.kz-zugang{ border: 1px solid var(--ld-rand); border-radius: 12px; padding: 14px 16px; background: var(--ld-flaeche) }
.kz-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.kz-kopf h3{ margin: 0; font-size: 16px }
.kz-link{ font-size: 14px; overflow-wrap: anywhere }
.kz-text{ margin: 6px 0 0; color: var(--ld-text-2); font-size: 14px }
.kz-daten{ display: grid; gap: 6px; margin: 10px 0 0 }
.kz-daten > div{ display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 8px }
.kz-daten dt{ font-size: 13px; color: var(--ld-text-3) }
.kz-daten dd{ margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0 }
.kz-daten code{ font-size: 14px; padding: 2px 6px; border-radius: 6px; background: var(--ld-flaeche-2); overflow-wrap: anywhere }
.kz-punkte{ letter-spacing: 2px; color: var(--ld-text-3) }
.kz-daten .ld-link{ font-size: 14px }
.kz-fuss{ margin: 10px 0 0; font-size: 12px; color: var(--ld-text-3) }
.kz-knoepfe{ display: flex; gap: 12px; align-items: center; margin-top: 10px }
.kz-knoepfe .ld-details{ width: auto; min-height: 36px; padding: 0 14px; margin: 0 }
.kz-form{ border: 1px solid var(--ld-rand-stark); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; background: var(--ld-flaeche-2) }
.kz-form h2{ margin: 0 0 10px; font-size: 16px }
.kz-pw-feld{ display: flex; align-items: center; gap: 8px }
.kz-pw-feld input{ flex: 1; min-width: 0 }
.kz-pw-feld .ld-link{ flex-shrink: 0; font-size: 14px }
.kz-form textarea{ resize: vertical }
.kz-schloss{ margin: 8px 0 0 }
.kz-form-knoepfe{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px }
.kz-form-knoepfe .ld-neu-knopf{ width: auto; padding: 0 18px }
.kz-form .kp-meldung:empty{ display: none }
@media (max-width: 560px){
  .kz-daten > div{ grid-template-columns: 1fr; gap: 2px }
  .kz-form .kp-form-zeile{ grid-template-columns: 1fr }
}

/* ---------- Freigaben und Dokumente im Admin (14.10.2026) ---------- */
.kpa-freigaben{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px }
.kpa-freigabe{ padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ld-rand); background: rgba(11,13,22,0.015) }
.kpa-freigabe p{ margin: 0 }
.kpa-freigabe-kopf{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 4px !important }
.kpa-freigabe-knoepfe{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important }
.kpa-freigabe-knoepfe:empty{ display: none }
.kpa-fg-knoepfe{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
/* Projektboard: „9 Projekte“ stand rechts abgeschnitten (18.10.2026) — die Leiste darf schmaler werden, die Zahl bricht nicht */
.ld-werkzeug{ min-width: 0; max-width: 100% }
.ld-werkzeug .ld-suche{ min-width: 0 }
.ld-werkzeug .ld-treffer{ margin: 0; flex: none; white-space: nowrap }
.kpa-fg-knoepfe .ld-details{ width: auto; padding: 0 14px }
.kpa-fg-hinweis{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px }
.kpa-fg-hinweis p{ margin: 0; flex: 1 1 260px }
.kpa-fg-hinweis .ld-details{ width: auto; padding: 0 14px }
.kpa-dok-filter{ margin-bottom: 12px }
.kpa-dok-tag{ height: 34px; padding: 0 8px; border-radius: 8px; font: inherit; font-size: 13px; background: var(--ld-flaeche); color: var(--ld-text); border: 1px solid var(--ld-rand) }
.kpv-datei-knoepfe{ flex-wrap: wrap; justify-content: flex-end }

/* ---------- Mail-Vorschau (15.10.2026) ---------- */
.kpa-mail-vorschau:empty{ display: none }
.kpa-mail-vorschau{ margin: 12px 0 4px }
.kpa-mail-betreff{ margin: 0 0 8px; font-size: 14px; color: var(--ld-text) }
.kpa-mail-betreff span{ display: inline-block; min-width: 56px; margin-right: 8px; font-size: 12px; color: var(--ld-text-2) }
.kpa-mail-rahmen{ display: block; width: 100%; height: 640px; border: 1px solid var(--ld-rand); border-radius: 10px; background: #fff }
.kpa-mail-dialog{ width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 16px; border: 1px solid var(--ld-rand); border-radius: 14px;
  background: var(--ld-seite, var(--ld-seite)); color: var(--ld-text) }
.kpa-mail-dialog::backdrop{ background: rgba(11,13,22,0.192) }
.kpa-mail-dialog-kopf{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px }
.kpa-mail-dialog-kopf .ld-details{ width: auto; padding: 0 14px }

/* ---------- Rechnungen: Zahlstand und Raten (16.10.2026) — Admin und gemeinsame Teile ---------- */
.kpv-datei-knoepfe .ld-weiter{ width: auto; min-height: 36px; padding: 0 14px; margin: 0 }
.kpa-lex-leiste{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche) }
.kpa-lex-leiste > div{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px }
.kpa-lex-leiste .ld-neu-knopf{ margin-left: 0 }
.kpa-lex-text{ margin: -2px 0 6px }
.kpa-re-balken, .kpv-re-balken{ max-width: none; height: 8px; margin: -6px 0 14px }
.kpa-re-rate, .kpv-re-zeile{ cursor: default; flex-wrap: wrap }
.kpa-re-rate small{ color: var(--ld-text-2) }
.kpa-re-rate .ld-weiter{ width: auto; min-height: 34px; padding: 0 12px; margin: 0 }
.kpa-re-form[hidden]{ display: none }
.kpa-re-wahl{ display: flex; flex-wrap: wrap; gap: 6px 18px }
.kpa-re-zeile{ align-items: end }
.kpa-re-zeile .ld-link{ margin-bottom: 12px }
.kpa-re-falsch{ color: #a51c1c }
.kpa-re-hand{ margin-top: 14px }
.kpa-re-hand summary{ cursor: pointer; font-weight: 600; color: var(--ld-text-2); margin-bottom: 10px }
/* Automatische Zahlungserinnerung im Rechnungs-Panel und Reiter „Rechnungen“ je Kunde (16.10.2026) */
.kpa-re-erinnerung{ margin: 2px 0 14px }
.kpa-re-erinnerung--aus{ border-color: var(--ld-rand-stark); background: var(--ld-flaeche-2) }
.kpa-re-erinnerung--aus .kpa-mail-kopf{ color: var(--ld-text-2) }
.kpa-re-erinnerung .kp-klein{ margin: 8px 0 0 }
.kpa-re-keine{ display: flex; align-items: center; gap: 8px; margin: 0 0 14px }
.kpa-re-keine svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8 }
.kpa-re-gesendet{ margin: 10px 0 0; overflow-wrap: anywhere }
.kpa-re-karte .kpa-re-balken{ max-width: 420px; height: 6px; margin: 10px 0 8px }
.kpa-re-plan{ display: flex; flex-direction: column; gap: 6px }
/* Ausgeblendete Rechnungen („gehört nicht zur Agentur“, 16.10.2026) */
.kpa-re-aus{ margin-top: 8px; padding: 10px 14px; border: 1px dashed var(--ld-rand-stark); border-radius: 12px }
.kpa-re-aus summary{ cursor: pointer; font-weight: 600; color: var(--ld-text-2) }
.kpa-re-aus .kp-klein{ margin: 8px 0 10px }
.kpa-re-aus .ld-details{ width: auto; padding: 0 14px }
/* Kontaktwahl: Rechnungen je Empfänger (16.10.2026) */
.kpa-lex-gruppe small{ display: block; margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere }
.kpa-lex-gruppe > span{ min-width: 0; flex: 1 1 260px }

/* ---------- Projektboard über alle Projekte (17.10.2026, Umbau Abschnitt 3) ---------- */
.kpa-pb-ansichten{ margin: 4px 0 16px }
.kpa-pb-erw{ margin-left: 14px }
.ld-liste .kpa-pb-erw{ margin-left: 22px }
.kpa-pb-stamm{ font-size: 11.5px; color: var(--ld-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kpa-pb-mehr{ align-self: center; font-size: 12.5px }
.kpa-pb-brett .ld-karte .ld-weiter--klein{ margin-top: 4px }
/* Abrechnungsplan und Vorlage im Projekt-Panel */
.kpa-ab-wahl{ align-items: flex-end }
.kpa-ab-wahl .ld-details{ width: auto; padding: 0 14px; flex: 0 0 auto; margin-bottom: 2px }
.kpa-ab-betrag{ white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ld-text-2) }
.kpa-ab-zeile{ flex-wrap: nowrap }
.kpa-ab-zeile > span:first-child{ flex: 1 1 auto; min-width: 0 }
@media (max-width: 560px){ .kpa-ab-zeile{ flex-wrap: wrap } }
/* Abrechnungsplan bearbeiten (Abschnitt 4) */
.kpa-pe-zeile{ margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--ld-rand); border-radius: 10px; background: var(--ld-flaeche-2) }
.kpa-pe-zeile .kp-feld{ margin-bottom: 8px }
.kpa-pe-summe{ font-size: 14px; color: var(--ld-text-2) }
.kpa-avis{ margin: 0 0 10px }
/* lexoffice-Kontakt neu anlegen (Paket 2, Abschnitt 5) */
.kpa-lex-neu{ margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--ld-rand); border-radius: 10px }
.kpa-lex-neu summary{ cursor: pointer; font-weight: 600 }
.kpa-lex-neu[open] summary{ margin-bottom: 10px }
/* Zweiklang (30.10.2026): Bereiche der Kundenseite, „Noch N weitere“ unter „Was jetzt?“ */
.kpa-bereiche{ margin-top: 4px }
.kpa-jetzt-mehr{ margin-top: 8px; font-size: 14.5px }

/* Schalter „Abgeschlossene & abgerechnete zeigen“ im Projektboard (02.11.2026) — gleich wie im Verkauf (kundenportal-leads.css) */
.ld-schalter{
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--ld-rand-stark); border-radius: 12px; background: var(--ld-flaeche); color: var(--ld-text); font: inherit; font-size: 14px;
}
.ld-schalter:focus-visible{ outline: none; border-color: var(--zk-akzent); box-shadow: 0 0 0 3px rgba(106,44,216,.18) }
.ld-schalter-bahn{ position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--ld-rand-stark); transition: background .18s }
.ld-schalter-bahn::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(11,13,22,.25); transition: transform .18s }
.ld-schalter[aria-checked="true"] .ld-schalter-bahn{ background: var(--zk-akzent) }
.ld-schalter[aria-checked="true"] .ld-schalter-bahn::after{ transform: translateX(14px) }

/* Rechts-Checkliste im Projekt-Panel (09.11.2026) */
.kpa-ck-arten { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--kp-linie, rgba(128, 128, 128, .35)); border-radius: 10px; }
.kpa-ck-arten[hidden] { display: none; }
.kpa-ck-arten legend { padding: 0 6px; font-size: .85em; }
.kpa-ck-arten label { display: flex; gap: 8px; align-items: flex-start; }
.kpa-ck-block { margin: 10px 0; border-top: 1px solid var(--kp-linie, rgba(128, 128, 128, .35)); padding-top: 8px; }
.kpa-ck-block > summary { cursor: pointer; font-weight: 600; }
.kpa-ck-block > summary small { font-weight: 400; opacity: .7; margin-left: 6px; }
.kpa-ck-punkt { padding: 10px 0; border-bottom: 1px dashed var(--kp-linie, rgba(128, 128, 128, .25)); }
.kpa-ck-punkt[data-status="erledigt"] b { opacity: .65; }
.kpa-ck-text small { display: block; opacity: .7; margin-top: 2px; }
.kpa-ck-eingabe { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.kpa-ck-eingabe select, .kpa-ck-eingabe input { min-height: 40px; padding: 0 10px; border: 1px solid var(--kp-linie, rgba(128, 128, 128, .45)); border-radius: 10px; font: inherit; background: transparent; color: inherit; }
.kpa-ck-knoepfe { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { .kpa-ck-eingabe { grid-template-columns: minmax(0, 1fr); } }
/* 10.11.2026: neue Punkte, Friedas Ergebnis am Punkt, Hilfe zur Produktart */
.kpa-ck-marke { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .78em; font-weight: 600; background: rgba(230, 180, 40, .18); border: 1px solid rgba(230, 180, 40, .55); }
.kpa-ck-auto { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kpa-ck-auto small { opacity: .8; }
.kpa-ck-auto[data-auto-ton="fund"] small { opacity: 1; }
.kpa-ck-hilfe { display: block; opacity: .7; font-size: .85em; margin-top: 2px; }
/* 11.11.2026: Rechtstexte beim Kunden bestätigen lassen — Stand am Punkt und Dialog (Fieldset ohne Mindestbreite: lange Adressen schieben nichts zur Seite) */
.kpa-rt { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--kp-linie, rgba(128, 128, 128, .35)); border-radius: 10px; min-width: 0; }
.kpa-rt p { margin: 0 0 6px; }
.kpa-ck-punkt[data-status="erledigt"] .kpa-rt b { opacity: 1; }   /* erledigte Punkte sind blass, der Stand der Bestätigung bleibt lesbar */
.kpa-rt-stand--gut b { color: #146c35; }
.kpa-rt-stand--frage b { color: #b42318; }
.kpa-rt-stand, .kpa-rt-liste, .kpa-rt-vorschau p { overflow-wrap: anywhere; }
.kpa-rt-liste { margin: 2px 0 6px; padding-left: 18px; font-size: .9em; }
.kpa-rt-dialog { display: grid; gap: 10px; margin-top: 8px; min-width: 0; }
.kpa-rt-text { margin: 0; padding: 10px 12px; min-width: 0; display: grid; gap: 8px; border: 1px solid var(--kp-linie, rgba(128, 128, 128, .35)); border-radius: 10px; }
.kpa-rt-text input[type="url"] { min-width: 0; max-width: 100%; }
.kpa-rt-haken { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.kpa-rt-haken input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.kpa-rt .kpa-rt-warn { margin: 0; color: #8a5a00; }
.kpa-rt-vorschau { padding: 10px 12px; border-left: 3px solid var(--zk-akzent, #6a2cd8); border-radius: 0 10px 10px 0; background: var(--ld-flaeche-2, rgba(128, 128, 128, .08)); }
.kpa-rt-vorschau p:last-child { margin-bottom: 0; }
.kpa-rt-legende { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* für Bildschirmleser, sichtbar steht der Name am Häkchen */
.kpa-ck-vermerk { margin: 6px 0 0; color: #146c35; }

/* Portal-Kette in der Kundenakte (René 11.11.2026: „gestalte den bereich portal kette schöner und schreib dazu was das genau ist“) */
.kpa-kette{ margin-top: 30px }
.kpa-kette .kpg-abschnitt-titel{ margin: 0 }
.kpa-kette-einleitung{ margin: 0 0 6px; max-width: 80ch; color: var(--ld-text-2); font-size: 14.5px; line-height: 1.6 }
.kpa-kette-raster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px }
.kpa-kette-karte{ display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--ld-rand); border-radius: 12px; background: var(--ld-flaeche) }
.kpa-kette-karte-kopf{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px }
.kpa-kette-karte h4{ margin: 0; font-size: 15.5px; line-height: 1.3; color: var(--ld-text) }
.kpa-kette-karte > p{ margin: 0; color: var(--ld-text-2); font-size: 14px; line-height: 1.55 }
.kpa-kette-knopf{ margin-top: auto; padding-top: 4px }
.kpa-kette-knopf .ld-details{ width: auto; min-height: 38px }
.kpa-kette-antwort{ font-size: 13.5px; line-height: 1.5 }
.kpa-theme-weg .kp-feld{ margin: 4px 0 0; max-width: 520px }

/* Pauls Entwurf im Angebotsfenster und Umfangsblatt im Projekt (René 12.11.2026, Schritt 5) */
.kpa-paul{ display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(212,161,6,.6); background: rgba(212,161,6,.09); font-size: 14px; overflow-wrap: anywhere }
.kpa-paul p{ margin: 0 }
.kpa-paul ul{ margin: 0; padding-left: 18px; display: grid; gap: 4px }
.kpa-paul-kopf{ font-weight: 700; color: #7a5300 }
.kpa-paul-ohne li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px }
.kpa-paul-wunsch{ white-space: pre-line; margin: 6px 0 0 }
.kpa-paul-haken{ margin-top: 4px; font-weight: 600 }
.kum{ display: grid; gap: 8px }
.kum-titel{ margin: 6px 0 2px; font-weight: 600; font-size: 13.5px }
.kum-liste{ margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px }
.kum-stand{ margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px }
.kum-form{ display: grid; gap: 8px }
.kum-hand summary{ cursor: pointer; font-size: 13.5px; color: var(--ld-text-2) }
.kum-hand[open]{ display: grid; gap: 8px }
.kum-auslesen{ align-items: end }