/*
 * Mandantenportal und Kanzlei-Oberfläche.
 * Neutral in Grau; die Kanzlei bringt nur --kp-primaer (dunkel) und --kp-akzent (hell) mit (Inline-Style auf .kp-seite).
 */

/* ---------- Grundlagen ---------- */

body:has(.kp-seite) { margin: 0; background: #f4f5f7; }
body:has(.kp-seite) #wrapper, body:has(.kp-seite) #container, body:has(.kp-seite) .mod_article { margin: 0; padding: 0; width: auto; max-width: none; float: none; }

.kp-seite {
    --kp-primaer: #1f2a37;
    --kp-akzent: #3b82f6;
    --kp-primaer-zart: color-mix(in srgb, var(--kp-primaer) 7%, #fff);
    --kp-primaer-hell: color-mix(in srgb, var(--kp-primaer) 14%, #fff);
    --kp-akzent-zart: color-mix(in srgb, var(--kp-akzent) 10%, #fff);
    /* readable variant of the accent (text, hover background with white text); set per firm by Branding */
    --kp-akzent-dunkel: #2563eb;
    --kp-text: #101828;
    --kp-text-2: #344054;
    --kp-grau: #667085;
    --kp-linie: #e4e7ec;
    --kp-linie-2: #d0d5dd;
    --kp-flaeche: #fff;
    --kp-grund: #f4f5f7;
    --kp-warn: #b54708;
    --kp-warn-zart: #fffaeb;
    --kp-warn-linie: #fedf89;
    --kp-fehler: #b42318;
    --kp-fehler-zart: #fef3f2;
    --kp-gut: #067647;
    --kp-gut-zart: #ecfdf3;
    --kp-r: 12px;
    --kp-r-klein: 8px;
    --kp-schatten: 0 1px 2px rgba(16, 24, 40, .05);
    --kp-schatten-gross: 0 12px 32px -12px rgba(16, 24, 40, .18);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kp-grund);
    color: var(--kp-text);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.kp-seite *, .kp-seite *::before, .kp-seite *::after { box-sizing: border-box; }
.kp-seite a { color: var(--kp-primaer); }
.kp-seite :focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-akzent) 45%, transparent); outline-offset: 2px; }

/* ---------- Seitenkopf und -fuß ---------- */

.kp-seitenkopf { background: var(--kp-flaeche); border-bottom: 1px solid var(--kp-linie); box-shadow: inset 0 3px 0 var(--kp-primaer); }
.kp-seitenkopf__innen, .kp-seitenfuss__innen, .kp-seiteninhalt { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.kp-seitenkopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.kp-marke { display: inline-flex; align-items: center; text-decoration: none; color: var(--kp-text); }
.kp-marke img { display: block; height: auto; width: auto; max-height: 36px; max-width: min(360px, 100%); }
.kp-seitenkopf__titel { text-decoration: none; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kp-grau); }

.kp-seiteninhalt { flex: 1; padding-top: 40px; padding-bottom: 72px; }

.kp-seitenfuss { background: var(--kp-flaeche); border-top: 1px solid var(--kp-linie); font-size: .875rem; color: var(--kp-grau); }
.kp-seitenfuss__innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; padding-bottom: 28px; }
.kp-seitenfuss__innen > div, .kp-seitenfuss nav { display: flex; flex-direction: column; gap: 2px; }
.kp-seitenfuss strong { color: var(--kp-text-2); }
.kp-seitenfuss a { color: var(--kp-grau); text-decoration: none; }
.kp-seitenfuss a:hover { color: var(--kp-primaer); text-decoration: underline; }

/* ---------- Typografie ---------- */

.kp-portal h1, .kp-portal h2, .kp-portal h3 { color: var(--kp-text); margin: 0; letter-spacing: -.01em; }
.kp-portal h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.2; }
.kp-portal h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; }
.kp-portal h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.kp-ueberzeile { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kp-akzent); margin-bottom: .5rem; }
.kp-lead { font-size: 1.0625rem; color: var(--kp-text-2); max-width: 46rem; margin: .75rem 0 0; }
.kp-klein { font-size: .875rem; color: var(--kp-grau); }
.kp-portal p { margin: 0 0 .75rem; }

/* ---------- Bausteine ---------- */

.kp-karte { background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); box-shadow: var(--kp-schatten); padding: 28px; }
.kp-karte + .kp-karte { margin-top: 16px; }

.kp-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .6rem 1.15rem; border: 1px solid var(--kp-primaer); border-radius: var(--kp-r-klein);
    background: var(--kp-primaer); color: #fff !important; font: inherit; font-size: .9375rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: filter .15s, background .15s;
}
.kp-knopf:hover { filter: brightness(1.12); }
.kp-knopf:disabled { opacity: .55; cursor: progress; }
.kp-knopf--zweit { background: var(--kp-flaeche); color: var(--kp-text-2) !important; border-color: var(--kp-linie-2); }
.kp-knopf--zweit:hover { background: var(--kp-grund); filter: none; }
/* File picker button styled like the secondary button */
.kp-seite input[type=file] { font: inherit; font-size: .9375rem; color: var(--kp-grau); cursor: pointer; }
.kp-seite input[type=file]::file-selector-button {
    margin-right: .85rem; padding: .45rem .95rem; border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein);
    background: var(--kp-grund); color: var(--kp-text-2); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.kp-seite input[type=file]:hover::file-selector-button { background: var(--kp-primaer-zart); border-color: var(--kp-primaer-hell); }
.kp-knopf--still { background: none; border-color: transparent; color: var(--kp-grau) !important; padding-left: .5rem; padding-right: .5rem; }
.kp-knopf--still:hover { color: var(--kp-text) !important; filter: none; }
.kp-knopf--breit { width: 100%; }
.kp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.25rem 0 0; }

.kp-portal label, .kp-portal legend { display: block; font-weight: 600; color: var(--kp-text); margin: 0 0 .4rem; }
.kp-eingabe, .kp-portal input[type=text], .kp-portal input[type=email], .kp-portal input[type=tel], .kp-portal input[type=date], .kp-portal input[type=number], .kp-portal input[type=search], .kp-portal textarea {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein);
    background: var(--kp-flaeche); color: var(--kp-text); font: inherit; box-shadow: var(--kp-schatten); transition: border-color .15s, box-shadow .15s;
}
.kp-portal input:focus, .kp-portal textarea:focus { outline: none; border-color: var(--kp-akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kp-akzent) 18%, transparent); }
.kp-portal input[readonly], .kp-portal textarea[readonly] { background: var(--kp-grund); box-shadow: none; }
.kp-portal textarea { resize: vertical; min-height: 6rem; }
.kp-portal fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.kp-hinweis { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: var(--kp-r-klein); background: var(--kp-primaer-zart); color: var(--kp-text-2); font-size: .9375rem; }
.kp-hinweis--gut { background: var(--kp-gut-zart); color: #054f31; }
.kp-hinweis--warn { background: var(--kp-warn-zart); color: #7a2e0e; border: 1px solid var(--kp-warn-linie); }
.kp-fehler { color: var(--kp-fehler); font-size: .9375rem; }
.kp-fehler:empty { display: none; }
.kp-fehlerbox { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--kp-r-klein); background: var(--kp-warn-zart); border: 1px solid var(--kp-warn-linie); color: #7a2e0e; }
.kp-fehlerbox:empty { display: none; }
.kp-fehlerbox ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.kp-fehlerbox a { color: #7a2e0e; }

.kp-laden { display: flex; align-items: center; gap: .75rem; color: var(--kp-grau); padding: 48px 0; justify-content: center; }
.kp-spinner { width: 20px; height: 20px; border: 2px solid var(--kp-linie-2); border-top-color: var(--kp-primaer); border-radius: 50%; animation: kp-dreh 0.8s linear infinite; }
@keyframes kp-dreh { to { transform: rotate(360deg); } }

/* ---------- Anmeldung ---------- */

.kp-anmeldung { max-width: 440px; margin: 24px auto 0; }
.kp-anmeldung .kp-karte { padding: 36px 32px; box-shadow: var(--kp-schatten-gross); }
.kp-anmeldung h2 { margin-bottom: .5rem; }
.kp-anmeldung p { color: var(--kp-text-2); }
.kp-anmeldung form > label { margin-top: 1.25rem; }
.kp-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--kp-primaer-zart); color: var(--kp-primaer); margin-bottom: 1.25rem; }
.kp-symbol svg { width: 24px; height: 24px; }
#kp-code { font-size: 1.75rem; font-weight: 700; letter-spacing: .45em; text-align: center; padding-left: .45em; font-variant-numeric: tabular-nums; }
.kp-anmeldung .kp-knoepfe { flex-direction: column; }
.kp-anmeldung__fuss { margin-top: 1.25rem; text-align: center; }

/* ---------- Fragenübersicht ---------- */

.kp-held { margin-bottom: 32px; }
.kp-held__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.kp-kennzahlen { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.kp-kennzahl { background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); padding: 14px 18px; min-width: 150px; }
.kp-kennzahl strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--kp-primaer); line-height: 1.2; }
.kp-kennzahl span { font-size: .875rem; color: var(--kp-grau); }
.kp-uebersicht { display: grid; gap: 16px; }
.kp-uebersicht .kp-karte h3 { display: flex; align-items: baseline; gap: .75rem; }
.kp-nr { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--kp-primaer); color: #fff; font-size: .875rem; font-weight: 700; }
.kp-modulinfo { color: var(--kp-text-2); margin: .5rem 0 0; }
.kp-zustaendig { font-size: .875rem; color: var(--kp-grau); margin: .35rem 0 0; }
.kp-uebersicht-fragen { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: frage; border-top: 1px solid var(--kp-linie); }
.kp-uebersicht-fragen > li { counter-increment: frage; padding: .75rem 0 .75rem 2.25rem; border-bottom: 1px solid var(--kp-linie); position: relative; }
.kp-uebersicht-fragen > li::before { content: counter(frage); position: absolute; left: 0; top: .8rem; width: 1.6rem; text-align: right; color: var(--kp-grau); font-size: .875rem; font-variant-numeric: tabular-nums; }
.kp-uebersicht-fragen > li:last-child { border-bottom: 0; }
.kp-uebersicht-optionen { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0 0; padding: 0; list-style: none; }
.kp-uebersicht-optionen li { font-size: .8125rem; padding: 2px 10px; border: 1px solid var(--kp-linie); border-radius: 999px; color: var(--kp-text-2); background: var(--kp-grund); }
.kp-pflicht { color: var(--kp-akzent); font-weight: 700; }
.kp-bedingt { display: block; font-size: .8125rem; color: var(--kp-grau); margin-top: .35rem; }

/* ---------- Formular ---------- */

.kp-kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.kp-kopfzeile .kp-lead { margin-top: .35rem; font-size: 1rem; }
.kp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }

.kp-seitenleiste { position: sticky; top: 20px; display: grid; gap: 16px; }
.kp-seitenleiste .kp-karte { padding: 20px; }
.kp-gesamt { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.kp-gesamt strong { font-size: .9375rem; }
.kp-gesamt span { font-size: 1.25rem; font-weight: 800; color: var(--kp-primaer); }
.kp-balken { height: 8px; border-radius: 999px; background: var(--kp-linie); overflow: hidden; }
.kp-balken > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kp-primaer), var(--kp-akzent)); transition: width .4s ease; }
.kp-status { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .8125rem; color: var(--kp-grau); }
.kp-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kp-gut); flex: none; }
.kp-status.is-speichert::before { background: var(--kp-akzent); animation: kp-puls 1s ease-in-out infinite; }
.kp-status.is-fehler { color: var(--kp-fehler); }
.kp-status.is-fehler::before { background: var(--kp-fehler); }
@keyframes kp-puls { 50% { opacity: .3; } }

.kp-inhalt { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.kp-inhalt a { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: .5rem 8px; border-radius: var(--kp-r-klein); color: var(--kp-text-2); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.kp-inhalt a:hover { background: var(--kp-grund); color: var(--kp-text); }
.kp-inhalt a.is-aktiv { background: var(--kp-primaer-zart); color: var(--kp-primaer); font-weight: 600; }
.kp-inhalt__marke { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--kp-linie-2); font-size: .7rem; font-weight: 700; color: var(--kp-grau); }
.kp-inhalt a.is-fertig .kp-inhalt__marke { background: var(--kp-primaer); border-color: var(--kp-primaer); color: #fff; }
.kp-inhalt a.is-pflicht .kp-inhalt__marke { border-color: var(--kp-warn); color: var(--kp-warn); }
.kp-inhalt__zahl { font-size: .75rem; color: var(--kp-grau); font-variant-numeric: tabular-nums; }

.kp-hilfekarte { font-size: .875rem; color: var(--kp-text-2); }
.kp-hilfekarte strong { display: block; color: var(--kp-text); margin-bottom: .25rem; }
.kp-hilfekarte a { font-weight: 600; text-decoration: none; }

.kp-module { display: grid; gap: 20px; }
.kp-modul { scroll-margin-top: 20px; padding: 0; overflow: hidden; }
.kp-modul__kopf { padding: 24px 28px 20px; border-bottom: 1px solid var(--kp-linie); background: linear-gradient(180deg, var(--kp-primaer-zart), var(--kp-flaeche)); }
.kp-modul__kopf h3 { display: flex; align-items: baseline; gap: .75rem; font-size: 1.25rem; }
.kp-modul__fragen { padding: 8px 28px 16px; }

.kp-frage { padding: 20px 0; border-bottom: 1px solid var(--kp-linie); scroll-margin-top: 24px; }
.kp-frage:last-child { border-bottom: 0; }
.kp-frage.is-offen { margin: 0 -14px; padding-left: 14px; padding-right: 14px; background: var(--kp-warn-zart); border-radius: var(--kp-r-klein); }
.kp-frage__titel { display: block; font-weight: 600; font-size: 1rem; color: var(--kp-text); margin-bottom: .6rem; }
.kp-frage__zusatz { display: block; font-size: .8125rem; font-weight: 400; color: var(--kp-grau); margin-top: .15rem; }
.kp-hilfe { font-size: .875rem; color: var(--kp-grau); margin: .5rem 0 0; }

.kp-optionen { display: grid; gap: 8px; }
.kp-option {
    display: flex !important; align-items: flex-start; gap: .75rem; margin: 0 !important; padding: .7rem .9rem;
    border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein); background: var(--kp-flaeche);
    font-weight: 400 !important; cursor: pointer; transition: border-color .15s, background .15s;
}
.kp-option:hover { background: var(--kp-grund); }
.kp-option input { margin: .3rem 0 0; width: 16px; height: 16px; accent-color: var(--kp-primaer); flex: none; }
.kp-option.is-gewaehlt { border-color: var(--kp-primaer); background: var(--kp-primaer-zart); box-shadow: inset 0 0 0 1px var(--kp-primaer); }
.kp-option.is-unklar { color: var(--kp-grau); font-style: italic; }
.kp-option:has(input:disabled) { cursor: default; }
.kp-detail { margin-top: .75rem; padding-left: 1rem; border-left: 3px solid var(--kp-akzent); }
.kp-detail label { font-weight: 500; font-size: .9375rem; }
.kp-leeren { margin-top: .5rem; border: 0; background: none; padding: 0; color: var(--kp-grau); font: inherit; font-size: .8125rem; text-decoration: underline; cursor: pointer; }

.kp-absenden { border-top: 4px solid var(--kp-primaer); }
.kp-absenden .kp-modul__fragen { padding-top: 20px; padding-bottom: 28px; }
.kp-absenden input { max-width: 420px; }

/* ---------- Erfolg ---------- */

.kp-erfolg { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 24px; }
.kp-erfolg .kp-symbol { background: var(--kp-gut-zart); color: var(--kp-gut); margin: 0; flex: none; }

/* ---------- Responsiv und Druck ---------- */

@media (max-width: 960px) {
    .kp-layout { grid-template-columns: 1fr; }
    .kp-seitenleiste { position: static; }
    .kp-inhalt { display: none; }
}
@media (max-width: 600px) {
    .kp-seiteninhalt { padding-top: 24px; }
    .kp-karte, .kp-anmeldung .kp-karte { padding: 22px 18px; }
    .kp-modul__kopf, .kp-modul__fragen { padding-left: 18px; padding-right: 18px; }
    .kp-seitenkopf__titel { display: none; }
}
@media print {
    body:has(.kp-seite), .kp-seite { background: #fff; }
    .kp-seitenkopf { box-shadow: none; }
    .kp-knoepfe, .kp-seitenleiste, .kp-absenden, .kp-kopfzeile .kp-knopf, .kp-seitenfuss nav { display: none !important; }
    .kp-karte { box-shadow: none; break-inside: avoid-page; }
    .kp-layout { display: block; }
}
.kp-module .kp-karte + .kp-karte, .kp-uebersicht .kp-karte + .kp-karte, .kp-seitenleiste .kp-karte + .kp-karte { margin-top: 0; }

/* ---------- Kanzlei-Oberfläche ---------- */

/* Firm navigation in the white header bar */
.kp-kopfnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 20px; font-size: .9375rem; }
.kp-kopfnav a:not(.kp-knopf) { color: var(--kp-text-2); text-decoration: none; font-weight: 600; }
.kp-kopfnav a:not(.kp-knopf):hover { color: var(--kp-primaer); }
.kp-kopfnav__wer { color: var(--kp-grau); font-size: .875rem; }
.kp-kopfnav .kp-knopf { min-height: 38px; padding: .4rem .95rem; }
.kp-kopfnav__konto { display: inline-flex; align-items: center; gap: 12px; margin-left: 12px; padding-left: 20px; border-left: 1px solid var(--kp-linie); }
@media (max-width: 760px) { .kp-kopfnav__wer { display: none; } }
.kp-neu-raster { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 1fr); gap: 20px; align-items: start; }
.kp-neu-raster .kp-formular { max-width: none; }
@media (max-width: 900px) { .kp-neu-raster { grid-template-columns: 1fr; } }
.kp-seitenfuss__produkt { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px 20px; font-size: .8125rem; color: var(--kp-grau); }
.kp-formular > label { display: block; font-weight: 600; margin: 1rem 0 .4rem; }
/* Tabs inside settings */
.kp-reiter { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--kp-linie); }
.kp-reiter a { padding: .6rem .9rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--kp-text-2); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.kp-reiter a:hover { color: var(--kp-primaer); }
.kp-reiter a.is-aktiv { color: var(--kp-primaer); border-bottom-color: var(--kp-primaer); }
.kp-reiter .kp-zaehler { background: var(--kp-primaer); }
.kp-sortieren { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.kp-sortieren span { font-size: .7rem; opacity: .35; }
.kp-sortieren:hover, .kp-sortieren.is-aktiv { color: var(--kp-primaer); }
.kp-sortieren:hover span, .kp-sortieren.is-aktiv span { opacity: 1; }
/* 2FA module inside the settings frame: a normal card, not the centred login box */
.kp-seite .kp-einstellungsseite .mod_two_factor { max-width: none; margin: 0; box-shadow: var(--kp-schatten); }
.kp-seite .kp-einstellungsseite .mod_two_factor .submit_container { max-width: 360px; }
.kp-zurueck { margin: -8px 0 20px; }
.kp-zurueck a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein); background: var(--kp-flaeche); color: var(--kp-text-2); text-decoration: none; font-weight: 600; font-size: .9375rem; transition: background .15s; }
.kp-zurueck a:hover { background: var(--kp-primaer-zart); color: var(--kp-primaer); }

.kp-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kp-kachel { display: block; padding: 16px 18px; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); text-decoration: none; color: var(--kp-text); box-shadow: var(--kp-schatten); transition: border-color .15s, box-shadow .15s; }
.kp-kachel strong { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.15; color: var(--kp-primaer); font-variant-numeric: tabular-nums; }
.kp-kachel span { font-size: .8125rem; color: var(--kp-grau); }
.kp-kachel:hover { border-color: var(--kp-linie-2); }
.kp-kachel.is-aktiv { border-color: var(--kp-primaer); box-shadow: inset 0 -3px 0 var(--kp-primaer), var(--kp-schatten); }

.kp-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
/* Search gets the room, status filter stays compact */
.kp-werkzeuge input[type=search] { flex: 3 1 320px; max-width: 560px; }
.kp-werkzeuge select { flex: 0 1 200px; width: 200px; min-width: 160px; text-overflow: ellipsis; }
.kp-abstand { flex: 1; }
/* Custom arrow on a tinted chip, inset from the right edge */
select.kp-eingabe { appearance: none; -webkit-appearance: none; padding-right: 3.1rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='6' fill='%23eef0f3'/%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke='%23344054' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 28px 28px; }
select.kp-eingabe::-ms-expand { display: none; }

.kp-tabelle-rahmen { padding: 0; overflow-x: auto; }
.kp-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.kp-tabelle th { text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kp-grau); padding: 12px 18px; background: var(--kp-grund); border-bottom: 1px solid var(--kp-linie); white-space: nowrap; }
.kp-tabelle td { padding: 14px 18px; border-bottom: 1px solid var(--kp-linie); vertical-align: top; }
.kp-tabelle tr:last-child td { border-bottom: 0; }
.kp-tabelle tbody tr:hover { background: var(--kp-primaer-zart); }
.kp-tabelle small { display: block; color: var(--kp-grau); font-size: .8125rem; margin-top: 2px; }
.kp-tabelle__name { font-weight: 700; text-decoration: none; color: var(--kp-text) !important; }
.kp-tabelle__name:hover { color: var(--kp-primaer) !important; text-decoration: underline; }
.kp-balken--klein { width: 120px; height: 6px; margin-top: 8px; }
.kp-leer { text-align: center; color: var(--kp-grau); }

.kp-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; background: #f2f4f7; color: #344054; }
.kp-pill--eingeladen, .kp-pill--angesehen { background: var(--kp-akzent-zart); color: color-mix(in srgb, var(--kp-akzent) 70%, #000); }
.kp-pill--begonnen, .kp-pill--freigegeben, .kp-pill--ueberpruefung { background: #fffaeb; color: #b54708; }
.kp-pill--unvollstaendig { background: #fef3f2; color: #b42318; }
.kp-pill--abgesendet, .kp-pill--in_pruefung { background: var(--kp-primaer-hell); color: var(--kp-primaer); }
.kp-pill--abgeschlossen { background: #ecfdf3; color: #067647; }
.kp-pill--verzicht { background: #fffaeb; color: #b54708; }

.kp-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kp-raster .kp-karte + .kp-karte, .kp-neu-raster .kp-karte + .kp-karte { margin-top: 0; }
.kp-karte h3 + .kp-daten, .kp-karte h3 + ul { margin-top: .75rem; }
.kp-karte--warn { border-left: 4px solid var(--kp-warn); }
.kp-karte--warn ul { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--kp-text-2); }
/* Einschätzungen im Versandpaket: umformulieren in der Einzelansicht */
.kp-einschaetzungen { list-style: none; margin: 1rem 0 0; padding: 0; }
.kp-einschaetzung { padding: 1rem 0; border-top: 1px solid var(--kp-linie); }
.kp-einschaetzung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.kp-einschaetzung__text { margin: .35rem 0 .6rem; color: var(--kp-text-2); }
.kp-einschaetzung__bearbeiten > summary { display: inline-flex; list-style: none; padding: .35rem .8rem; font-size: .875rem; }
.kp-einschaetzung__bearbeiten > summary::-webkit-details-marker { display: none; }
.kp-einschaetzung__bearbeiten[open] > summary { margin-bottom: .75rem; }
.kp-einschaetzung__bearbeiten textarea { width: 100%; margin-top: .25rem; }
.kp-einschaetzung__geltung { border: 0; padding: 0; margin: .75rem 0 0; }
.kp-einschaetzung__geltung legend { padding: 0; margin-bottom: .35rem; }
.kp-einschaetzung__zurueck { margin-top: .5rem; }
.kp-option:has(input:checked) { border-color: var(--kp-primaer); background: var(--kp-primaer-zart); box-shadow: inset 0 0 0 1px var(--kp-primaer); }
span.kp-marke { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--kp-primaer-zart); color: var(--kp-primaer); border: 1px solid var(--kp-linie); }
/* Document preview dialog */
.kp-vorschau { width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none; padding: 0; border: 0; border-radius: var(--kp-r); box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .35); display: flex; flex-direction: column; overflow: hidden; }
.kp-vorschau:not([open]) { display: none; }
.kp-vorschau::backdrop { background: rgba(16, 24, 40, .6); }
.kp-vorschau__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--kp-linie); background: var(--kp-flaeche); }
.kp-vorschau__kopf strong { flex: 1 1 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-vorschau__kopf .kp-knopf { min-height: 38px; padding: .4rem .9rem; }
.kp-vorschau iframe { flex: 1; width: 100%; border: 0; background: #525659; }
/* Firm view: clearer hierarchy — bigger card headings, client master data calmer, answers emphasised, log folded */
.kp-kanzlei .kp-karte > h3, .kp-kanzlei .kp-karte > summary h3 { font-size: 1.375rem; letter-spacing: -.015em; }
.kp-karte--ruhig { background: var(--kp-primaer-zart); box-shadow: none; }
/* No column gap: each odd row is one continuous stripe, like .kp-antworten. */
.kp-karte--ruhig .kp-daten { grid-template-columns: max-content 1fr; gap: 0; }
.kp-karte--ruhig .kp-daten :is(dt, dd) { padding: 6px 0; }
.kp-karte--ruhig .kp-daten dt { padding-left: 10px; padding-right: 20px; border-radius: var(--kp-r-klein) 0 0 var(--kp-r-klein); }
.kp-karte--ruhig .kp-daten dd { padding-right: 10px; border-radius: 0 var(--kp-r-klein) var(--kp-r-klein) 0; }
.kp-karte--ruhig .kp-daten :is(dt, dd):nth-of-type(odd) { background: rgba(255, 255, 255, .7); }
.kp-abweichungen { margin: 0 0 1.25rem; padding: 10px 12px; border-left: 3px solid var(--kp-warn); background: rgba(255, 255, 255, .7); border-radius: var(--kp-r-klein); }
.kp-abweichungen > p { margin: 0 0 6px; }
.kp-abweichung .kp-knopf { padding: 4px 12px; min-height: 0; font-size: .875rem; }
.kp-abweichung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 4px 0; }
.kp-karte--wichtig { border-top: 3px solid var(--kp-primaer); }
.kp-karte--klappbar > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.kp-karte--klappbar > summary::-webkit-details-marker { display: none; }
.kp-karte--klappbar > summary h3::before { content: '›'; display: inline-block; width: 1.1rem; color: var(--kp-grau); transition: transform .15s; }
.kp-karte--klappbar[open] > summary h3::before { transform: rotate(90deg); }
.kp-karte--klappbar[open] > summary .kp-klein { visibility: hidden; }
.kp-gefahr { border-color: var(--kp-fehler-zart); }
.kp-gefahr h3 { color: var(--kp-fehler); }
.kp-gefahr__form label { display: block; font-weight: 600; margin: .75rem 0 .4rem; }
.kp-knopf--gefahr { background: var(--kp-fehler); border-color: var(--kp-fehler); }
span.kp-marke--kanzlei { background: var(--kp-akzent-zart); color: var(--kp-primaer); border-color: var(--kp-linie); margin-left: .5rem; white-space: nowrap; }
/* Firm edits an answer: link appears on hover, always visible on touch devices */
.kp-antworten dd:not(.kp-antwort-bearbeiten) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.kp-antworten .kp-antwort-text { flex: 1 1 auto; white-space: pre-line; }
.kp-antwort-stift { margin-left: auto; padding-left: 12px; font-size: .8125rem; font-weight: 600; font-style: normal; text-decoration: none; color: var(--kp-primaer); opacity: 0; transition: opacity .15s; }
.kp-antworten dd:hover .kp-antwort-stift, .kp-antwort-stift:focus { opacity: 1; }
@media (hover: none) { .kp-antwort-stift { opacity: 1; } }
.kp-antworten dd.kp-antwort-bearbeiten { background: var(--kp-akzent-zart); }
.kp-antwort-bearbeiten form { display: grid; gap: 10px; }
.kp-antwort-bearbeiten .kp-knoepfe { display: flex; gap: 8px; }
.kp-antwort-optionen { display: grid; gap: 6px; }
span.kp-marke--mandant { background: #fff7e6; color: #8a5a00; border-color: #f2d8a6; }
.kp-daten { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0 0 1.25rem; font-size: .9375rem; }
.kp-daten dt { color: var(--kp-grau); }
.kp-daten dd { margin: 0; overflow-wrap: anywhere; }

.kp-abschnitt { border-top: 1px solid var(--kp-linie); }
.kp-abschnitt:first-of-type { margin-top: .75rem; }
.kp-abschnitt summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; padding: .85rem 0; font-weight: 700; list-style: none; }
.kp-abschnitt summary::-webkit-details-marker { display: none; }
.kp-abschnitt summary::before { content: "›"; display: inline-block; width: 1rem; color: var(--kp-grau); transition: transform .15s; }
.kp-abschnitt[open] summary::before { transform: rotate(90deg); }
.kp-abschnitt summary span:first-child { flex: 1; }
.kp-antworten { display: grid; grid-template-columns: minmax(200px, 42%) 1fr; gap: 0; margin: 0 0 1rem 1rem; font-size: .9375rem; }
.kp-antworten dt { color: var(--kp-grau); padding: 7px 10px 7px 12px; border-radius: var(--kp-r-klein) 0 0 var(--kp-r-klein); }
.kp-antworten dd { margin: 0; padding: 7px 12px 7px 10px; border-radius: 0 var(--kp-r-klein) var(--kp-r-klein) 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Zebra rows: question and answer share one background so the eye can follow the line */
.kp-antworten :is(dt, dd):nth-of-type(odd) { background: var(--kp-grund); }
.kp-antworten dd.is-offen { color: var(--kp-warn); font-style: italic; }

.kp-verlauf { list-style: none; margin: .75rem 0 0; padding: 0; }
.kp-verlauf li { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; padding: .55rem 0; border-top: 1px solid var(--kp-linie); font-size: .9rem; }
.kp-verlauf time { color: var(--kp-grau); font-variant-numeric: tabular-nums; }
.kp-verlauf small { color: var(--kp-grau); }

.kp-formular { max-width: 760px; }
.kp-formraster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.kp-formraster__breit { grid-column: 1 / -1; }

/* Contao-Module auf Anmelde-, Zwei-Faktor- und Passwortseiten im Portal-Look */
.kp-seite .mod_login, .kp-seite .mod_two_factor, .kp-seite .mod_lostPassword { max-width: 440px; margin: 24px auto 0; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); box-shadow: var(--kp-schatten-gross); padding: 32px; }
.kp-seite .mod_login h1, .kp-seite .mod_login h2, .kp-seite .mod_two_factor h2, .kp-seite .mod_two_factor h3, .kp-seite .mod_lostPassword h2 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 800; }
.kp-seite :is(.mod_login, .mod_two_factor, .mod_lostPassword) label { display: block; font-weight: 600; margin: 1rem 0 .4rem; }
.kp-seite :is(.mod_login, .mod_two_factor, .mod_lostPassword) :is(input.text, input.password, input[type=text], input[type=password], input[type=email]) { width: 100%; padding: .7rem .85rem; border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein); font: inherit; box-sizing: border-box; }
.kp-seite :is(.mod_login, .mod_two_factor, .mod_lostPassword) :is(button, .submit) { margin-top: 1.25rem; width: 100%; min-height: 44px; border: 0; border-radius: var(--kp-r-klein); background: var(--kp-primaer); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.kp-seite :is(.mod_login, .mod_two_factor, .mod_lostPassword) .widget { margin: 0; }
.kp-seite :is(.mod_login, .mod_two_factor, .mod_lostPassword) .error, .kp-seite :is(.mod_login, .mod_two_factor) p.tl_error { color: var(--kp-fehler); }
.kp-seite .mod_two_factor img { display: block; margin: 1rem auto; max-width: 220px; }
/* Contao renders links as a.submit; make them real buttons, the second one in a row as secondary */
.kp-seite :is(.mod_login, .mod_two_factor, .mod_lostPassword) a.submit { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.kp-seite .mod_two_factor .submit_container { display: flex; flex-direction: column; gap: 10px; margin-top: 1.25rem; }
.kp-seite .mod_two_factor .submit_container .submit { margin-top: 0; }
.kp-seite .mod_two_factor .submit_container .submit + .submit { background: var(--kp-flaeche); color: var(--kp-text-2); border: 1px solid var(--kp-linie-2); }
.kp-seite .mod_two_factor .submit_container .submit + .submit:hover { background: var(--kp-grund); }
.kp-seite .mod_two_factor p { color: var(--kp-text-2); line-height: 1.6; }
.kp-seite .mod_two_factor h3 { margin: 1.75rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--kp-linie); font-size: 1.05rem; }
.kp-seite .mod_two_factor code { display: block; padding: .6rem .8rem; background: var(--kp-grund); border-radius: var(--kp-r-klein); font-size: .9rem; }
.kp-seite .mod_two_factor .qr-code { padding: 12px; border: 1px solid var(--kp-linie); border-radius: var(--kp-r-klein); }
.kp-seite .mod_two_factor .help { font-size: .85rem; color: var(--kp-grau); margin: .4rem 0 0; }
.kp-seite .mod_two_factor .message p { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--kp-r-klein); }
.kp-seite .mod_two_factor p.confirm { background: var(--kp-gut-zart); color: var(--kp-gut); font-weight: 600; }
.kp-seite .mod_two_factor p.info { background: var(--kp-warn-zart); color: var(--kp-warn); }
.kp-seite .mod_two_factor .backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; list-style: none; }
.kp-seite .mod_two_factor .backup-codes code { text-align: center; }
.kp-seite .mod_two_factor table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.kp-seite .mod_two_factor :is(th, td) { padding: 6px 4px; border-bottom: 1px solid var(--kp-linie); text-align: left; }
.kp-seite .kp-hilfslink { max-width: 440px; margin: 14px auto 0; text-align: center; font-size: .875rem; }

@media (max-width: 700px) {
    .kp-formraster, .kp-antworten { grid-template-columns: 1fr; }
    .kp-antworten dt { padding-bottom: 0; border-radius: var(--kp-r-klein) var(--kp-r-klein) 0 0; }
    .kp-antworten dd { padding: 2px 12px 7px; border-radius: 0 0 var(--kp-r-klein) var(--kp-r-klein); }
    .kp-daten, .kp-karte--ruhig .kp-daten { grid-template-columns: 1fr; }
    .kp-verlauf li { grid-template-columns: 1fr; gap: 0; }
}

/* Contao-Texte nur für Screenreader („Pflichtfeld“) */
.kp-seite .invisible { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kp-tabelle--dokumente { margin-top: .75rem; border: 1px solid var(--kp-linie); border-radius: var(--kp-r-klein); overflow: hidden; }
.kp-tabelle--dokumente td { vertical-align: middle; }

/* Verträge (AVV, § 62a) */
.kp-zaehler { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #b42318; color: #fff; font-size: .7rem; font-weight: 700; }
.kp-vertrag__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kp-vertrag__kopf h3 { margin: 0; }
.kp-vertrag__form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--kp-linie); }
.kp-vertragstext { max-height: 460px; overflow: auto; padding: 4px 18px 12px 2px; font-size: .9rem; line-height: 1.6; }
.kp-vertragstext h1 { font-size: 1.15rem; margin: .75rem 0 .25rem; }
.kp-vertragstext h2 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.kp-vertragstext .untertitel { color: var(--kp-grau); margin-top: 0; }
.kp-vertragstext table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.kp-vertragstext td, .kp-vertragstext th { border: 1px solid var(--kp-linie); padding: 8px 10px; vertical-align: top; text-align: left; }
.kp-vertragstext th { width: 30%; background: var(--kp-grund); }
.kp-vertragstext .rolle { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-grau); }

/* Eingänge */
.kp-eingang { display: grid; gap: 4px; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--kp-linie); }
.kp-eingang__zeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kp-eingang__zeile .kp-eingabe { flex: 1 1 220px; }
.kp-eingang__liste { margin: .75rem 0 0; padding-left: 1.1rem; }

/* KI-Ausfüllhilfe */
.kp-frage.has-ki { position: relative; padding-right: 44px; }
.kp-ki-knopf { position: absolute; top: 18px; right: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--kp-linie); background: var(--kp-flaeche); color: var(--kp-primaer); cursor: pointer; box-shadow: var(--kp-schatten); transition: background .15s, border-color .15s; }
.kp-ki-knopf:hover, .kp-ki-knopf:focus-visible { background: var(--kp-primaer-zart); border-color: var(--kp-primaer); }
.kp-ki-knopf svg { width: 17px; height: 17px; }
.kp-ki { position: fixed; z-index: 50; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .28); overflow: hidden; }
.kp-ki__kopf { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--kp-primaer); color: #fff; }
.kp-ki__kopf strong { display: block; font-size: .95rem; }
.kp-ki__frage { display: block; margin-top: 2px; font-size: .82rem; opacity: .85; line-height: 1.4; }
.kp-ki__zu { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.kp-ki__zu svg { width: 16px; height: 16px; }
.kp-ki__verlauf { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--kp-grund); }
.kp-ki__nachricht { margin: 0; max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.kp-ki__nachricht.is-hilfe { align-self: flex-start; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-bottom-left-radius: 4px; }
.kp-ki__nachricht.is-mandant { align-self: flex-end; background: var(--kp-primaer); color: #fff; border-bottom-right-radius: 4px; }
.kp-ki__nachricht.is-wartet { color: var(--kp-grau); font-style: italic; }
.kp-ki__nachricht.is-fehler { border-color: var(--kp-warn-linie); background: var(--kp-warn-zart); color: #7a2e0e; }
.kp-ki__vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.kp-ki__vorschlaege button { border: 1px solid var(--kp-linie); background: var(--kp-flaeche); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .8rem; color: var(--kp-text); cursor: pointer; }
.kp-ki__vorschlaege button:hover { border-color: var(--kp-primaer); color: var(--kp-primaer); }
.kp-ki__eingabe { display: flex; gap: 8px; align-items: flex-end; padding: 10px 18px; }
.kp-ki__eingabe textarea { flex: 1; resize: none; border: 1px solid var(--kp-linie); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: .9rem; }
.kp-ki__eingabe textarea:focus { outline: 2px solid var(--kp-primaer); outline-offset: -1px; }
.kp-ki__hinweis { margin: 0; padding: 0 18px 14px; font-size: .72rem; line-height: 1.45; color: var(--kp-grau); }
@media (max-width: 640px) {
    .kp-ki { left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; }
}

/* Hinweise auf der Fragenübersicht */
.kp-hinweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; }
@media (max-width: 640px) { .kp-hinweise { grid-template-columns: 1fr; } }
.kp-hinweiskarte { padding: 22px 24px; }
.kp-hinweiskarte h3 { margin: 0 0 .5rem; font-size: 1rem; }
.kp-hinweiskarte p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; color: var(--kp-text-2, #344054); }
.kp-hinweiskarte__kontakt { display: flex; align-items: center; gap: 8px; }
.kp-hinweiskarte__kontakt svg { width: 16px; height: 16px; color: var(--kp-primaer); flex: none; }
@media print { .kp-hinweise { display: none; } }
.kp-hinweise > .kp-karte { margin: 0; }

/* Hilfe-Assistent in der Kanzlei-Oberfläche */
.kp-hilfe-knopf { position: fixed; z-index: 49; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border: 0; border-radius: 999px; background: var(--kp-primaer); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .45); }
.kp-hilfe-knopf:hover, .kp-hilfe-knopf:focus-visible { filter: brightness(1.12); }
.kp-hilfe-knopf svg { width: 18px; height: 18px; }
.kp-ki--kanzlei { bottom: 78px; }
.kp-ki__neu { border: 0; background: none; padding: 0; font: inherit; color: var(--kp-primaer); text-decoration: underline; cursor: pointer; }
.kp-ki__kontakt { display: block; margin-top: 4px; }
@media (max-width: 640px) { .kp-ki--kanzlei { bottom: 0; } }
@media print { .kp-hilfe-knopf { display: none; } }
.kp-ki__vorschlaege[hidden] { display: none; }

/* Kosten vor dem Start */
.kp-kosten { max-width: 640px; }
.kp-kosten h2 { margin: .25rem 0 .75rem; }
.kp-kosten__betrag { margin: 0 0 .75rem; font-size: 2rem; font-weight: 800; color: var(--kp-primaer); letter-spacing: -.01em; }
.kp-kosten__form { display: grid; gap: 8px; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--kp-linie); }
.kp-kosten__form label[for="kp-kosten-name"] { margin-top: 6px; font-weight: 600; }
.kp-kosten__betrag small { font-size: .875rem; font-weight: 500; color: var(--kp-grau); letter-spacing: 0; }

/* Hinweis zur regelmäßigen Überprüfung über dem Formular */
.kp-ueberpruefung { border-left: 4px solid var(--kp-akzent); }
.kp-ueberpruefung h3 { margin: 0 0 .5rem; }
.kp-ueberpruefung p, .kp-ueberpruefung ul { margin: 0 0 .5rem; }
.kp-ueberpruefung ul { padding-left: 1.2rem; }

/* Show/hide button inside password fields (passwort.js) */
.kp-pwfeld { position: relative; display: block; }
.kp-pwfeld > input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.kp-pwknopf, .kp-seite .kp-pwfeld button.kp-pwknopf { position: absolute; top: 0; bottom: 0; right: 0; width: 42px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; min-height: 0; box-shadow: none; background: transparent; color: var(--kp-primaer); cursor: pointer; border-radius: 0 var(--kp-r-klein) var(--kp-r-klein) 0; }
.kp-pwknopf:hover, .kp-seite .kp-pwfeld button.kp-pwknopf:hover { background: var(--kp-primaer-zart); }

/* Kanzlei start: one tile per booked area (one number, one status line, one entry) */
.kp-reiter--bereiche { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.kp-bereichskacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kp-bereichskachel { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-top: 3px solid var(--kp-primaer); border-radius: var(--kp-r); box-shadow: var(--kp-schatten); }
.kp-bereichskachel h2 { font-size: 1.0625rem; }
.kp-bereichskachel__zahl { margin: 0; display: flex; align-items: baseline; gap: .5rem; color: var(--kp-grau); }
.kp-bereichskachel__zahl strong { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--kp-primaer); font-variant-numeric: tabular-nums; }
.kp-bereichskachel__status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .875rem; color: var(--kp-grau); }
.kp-bereichskachel__status strong { color: var(--kp-text-2); font-variant-numeric: tabular-nums; }
.kp-bereichskachel__folgt { margin: 0; color: var(--kp-grau); font-size: .9375rem; }
.kp-bereichskachel .kp-knopf { margin-top: auto; align-self: flex-start; }
.kp-bereichskachel__zahl.kp-ton--warn strong, .kp-bereichskachel__status .kp-ton--warn strong { color: var(--kp-warn); }
.kp-bereichskachel__zahl.kp-ton--gut strong, .kp-bereichskachel__status .kp-ton--gut strong { color: var(--kp-gut); }
.kp-bereichskachel__zahl.kp-ton--fehler strong, .kp-bereichskachel__status .kp-ton--fehler strong { color: var(--kp-fehler); }
/* "Heute zu tun": one box per area, entries as full-width rows */
.kp-heute { margin-top: 8px; }
.kp-heute__kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.kp-heute__kopf h2 { margin: 0; font-size: 1.25rem; }
.kp-heute__leer { display: flex; align-items: center; gap: 10px; padding: 18px 22px; background: var(--kp-flaeche); border: 1px dashed var(--kp-linie-2); border-radius: var(--kp-r); color: var(--kp-grau); }
.kp-heute__leer span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--kp-gut-zart); color: var(--kp-gut); font-weight: 800; }
.kp-heute__gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.kp-heute__gruppe { background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); box-shadow: var(--kp-schatten); overflow: hidden; }
.kp-heute__gruppenkopf { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--kp-linie); }
.kp-heute__gruppenkopf h3 { margin: 0; font-size: 1rem; }
.kp-heute__anzahl { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--kp-warn-zart); color: var(--kp-warn); font-size: .75rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.kp-heute__alle { margin-left: auto; font-size: .875rem; font-weight: 600; color: var(--kp-grau) !important; text-decoration: none; }
.kp-heute__alle:hover { color: var(--kp-primaer) !important; }
.kp-heute__liste { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }

/* A clickable row: status dot, who (bold) and what (grey), arrow */
.kp-aufgabe { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--kp-r-klein); color: var(--kp-text) !important; text-decoration: none !important; transition: background .15s ease; }
.kp-aufgabe:hover, .kp-aufgabe:focus-visible { background: var(--kp-grund); }
.kp-aufgabe__punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kp-warn); }
.kp-aufgabe--fehler .kp-aufgabe__punkt { background: var(--kp-fehler); }
.kp-aufgabe__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-aufgabe__text strong { font-weight: 700; overflow-wrap: anywhere; }
.kp-aufgabe__bei { color: var(--kp-grau); font-size: .8125rem; font-weight: 400; }
.kp-aufgabe__was { color: var(--kp-text-2); font-size: .875rem; overflow-wrap: anywhere; }
.kp-aufgabe__text strong + .kp-aufgabe__was, .kp-aufgabe__bei + .kp-aufgabe__was { color: var(--kp-grau); }
.kp-aufgabe__pfeil { flex: none; color: var(--kp-linie-2); font-weight: 700; transition: transform .15s ease, color .15s ease; }
.kp-aufgabe:hover .kp-aufgabe__pfeil { color: var(--kp-primaer); transform: translateX(3px); }

/* Client chooser (header search, "invite an employee", "request documents") */
.kp-kopfsuche .kp-eingabe { width: 220px; min-height: 38px; padding: .4rem .8rem; font-size: .9375rem; }
@media (max-width: 900px) { .kp-kopfsuche { flex: 1 1 100%; } .kp-kopfsuche .kp-eingabe { width: 100%; } }
.kp-werkzeuge__rechts { margin-left: auto; }
.kp-waehlen .kp-werkzeuge input[type=search] { max-width: none; }
.kp-waehlen__info { margin: 0 0 8px; }
.kp-mandantwahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kp-mandantwahl__kuerzel { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--kp-primaer-zart); color: var(--kp-primaer); font-weight: 800; }
.kp-tabelle__link { color: var(--kp-text-2) !important; text-decoration: none; }
.kp-tabelle__link:hover { color: var(--kp-primaer) !important; text-decoration: underline; }

/* Client overview: one card per booked area */
.kp-heute--mandant { margin: 0 0 24px; }
.kp-ueb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-bottom: 16px; }
.kp-ueb__karte { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-top: 3px solid var(--kp-primaer); border-radius: var(--kp-r); box-shadow: var(--kp-schatten); }
.kp-ueb__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kp-ueb__kopf h2 { margin: 0 auto 0 0; font-size: 1.0625rem; }
.kp-ueb__kopf h2 a { color: inherit; text-decoration: none; }
.kp-ueb__kopf h2 a:hover { color: var(--kp-primaer); text-decoration: underline; }
.kp-ueb__zahl { font-size: .8125rem; font-weight: 700; color: var(--kp-warn); }
.kp-ueb__zeile { margin: 0; }
.kp-ueb__liste { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.kp-ueb__liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--kp-r-klein); color: var(--kp-text) !important; text-decoration: none !important; }
.kp-ueb__liste a:hover { background: var(--kp-grund); }
.kp-ueb__name { font-weight: 600; overflow-wrap: anywhere; }
.kp-ueb__name small { display: block; color: var(--kp-grau); font-weight: 400; font-size: .8125rem; }
.kp-ueb__stand { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.kp-ueb__fortschritt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--kp-grau); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.kp-balken--mini { width: 72px; height: 5px; }
.kp-ueb__fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.kp-ueb__stamm .kp-daten { margin-bottom: .5rem; }
@media (max-width: 640px) {
    .kp-ueb__karte { padding: 18px; }
    .kp-ueb__liste a { grid-template-columns: minmax(0, 1fr) auto; }
    .kp-ueb__fortschritt { display: none; }
}
@media (max-width: 640px) { .kp-bereichskachel { padding: 18px; } }

/* Client start page: one card per area; extended form types (groups, uploads, declarations) */
.kp-startkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kp-startkarte { display: flex; flex-direction: column; gap: 10px; }
.kp-startkarte__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kp-startkarte h3 { margin: 0; font-size: 1.0625rem; }
.kp-startkarte .kp-knoepfe { margin-top: auto; }
.kp-status-pille { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--kp-primaer-zart); color: var(--kp-text-2); font-size: .75rem; font-weight: 700; }
.kp-status-pille--uebernahme, .kp-status-pille--abgeschlossen { background: var(--kp-gut-zart, #e7f2eb); color: var(--kp-gut, #1d6b3a); }
.kp-feld { margin-top: .85rem; }
.kp-feld:first-child { margin-top: 0; }
.kp-feldfehler { margin: .35rem 0 0; font-size: .875rem; color: #7a2e0e; }
.kp-feldfehler:empty { display: none; }
.kp-gruppe, .kp-upload, .kp-erklaerung { border: 0; padding: 0; margin: 0; min-width: 0; }
.kp-gruppe__eintrag { margin: .75rem 0; padding: 14px 16px; border: 1px solid var(--kp-linie); border-radius: var(--kp-r-klein); background: var(--kp-grund); }
.kp-gruppe__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.kp-dateien { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: 6px; }
.kp-dateien li { padding: 8px 12px; border: 1px solid var(--kp-linie); border-radius: var(--kp-r-klein); background: var(--kp-flaeche); }
.kp-dateien .kp-leeren { margin-left: .75rem; }
.kp-upload__zeile { margin: .5rem 0; }
.kp-wortlaut { margin: .5rem 0 .85rem; padding: 12px 16px; border-left: 4px solid var(--kp-linie-2); background: var(--kp-grund); color: var(--kp-text-2); font-size: .9375rem; }
.kp-muster { color: #8a5200; font-weight: 700; }
.kp-hinweisblock { padding: 14px 16px; border-left: 4px solid var(--kp-akzent); background: var(--kp-grund); border-radius: var(--kp-r-klein); }
.kp-hinweisblock p { margin: .35rem 0 0; }
.kp-teilbanner { border-left: 4px solid var(--kp-akzent); margin-bottom: 16px; }
.kp-teilbanner h3 { margin: 0 0 .5rem; }
.kp-teilbanner p, .kp-teilbanner ul { margin: 0 0 .5rem; }
.kp-teilbanner ul { padding-left: 1.2rem; }

/* ---------- Unterlagenanforderungen (Kanzlei und Mandant) ---------- */
.kp-inline { display: inline; }
.kp-pill--offen { background: #f2f4f7; color: #344054; }
.kp-pill--pausiert, .kp-pill--zurueckgezogen { background: #f2f4f7; color: #667085; }
.kp-pill--erledigt { background: #ecfdf3; color: #067647; }
.kp-pill--hochgeladen { background: var(--kp-primaer-hell); color: var(--kp-primaer); }
.kp-pill--nicht_vorhanden { background: #fffaeb; color: #b54708; }
.kp-pill--abgelehnt, .kp-pill--ueberfaellig { background: #fef3f2; color: #b42318; }
.kp-pill--pflicht { background: transparent; border: 1px solid #b54708; color: #b54708; font-size: .6875rem; padding: 1px 7px; }
.kp-anforderung--zu { opacity: .7; }
.kp-tabelle--unterlagen td { vertical-align: top; }
.kp-unt-aktionen { white-space: nowrap; }
.kp-unt-aktionen form { margin-bottom: 6px; }
.kp-unt-ablehnen summary, .kp-unt-neupos summary { cursor: pointer; display: inline-block; list-style: none; }
.kp-unt-ablehnen[open] form { display: grid; gap: 6px; margin-top: 6px; min-width: 240px; white-space: normal; }

/* Mandantenportal: Unterlagen */
.kp-unt-position { display: grid; gap: .5rem; }
.kp-unt-position + .kp-unt-position { margin-top: 1rem; }
.kp-unt-position__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; }
.kp-unt-position h4 { margin: 0; font-size: 1.0625rem; }
.kp-unt-position--erledigt { border-left: 6px solid #067647; }
.kp-unt-position--abgelehnt { border-left: 6px solid #b42318; }
.kp-unt-grund { padding: .75rem 1rem; border-radius: var(--kp-r-klein); background: #fef3f2; color: #7a271a; font-size: .9375rem; }
.kp-unt-dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kp-unt-dateien li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .5rem .75rem; background: var(--kp-grund); border-radius: var(--kp-r-klein); }
.kp-unt-zone { border: 2px dashed var(--kp-linie); border-radius: var(--kp-r-klein); padding: 1rem; text-align: center; }
.kp-unt-zone.is-ziehen { border-color: var(--kp-primaer); background: var(--kp-primaer-zart); }
.kp-unt-zone .kp-knopf { margin: .25rem; }
.kp-unt-nein { margin-top: .25rem; }
.kp-unt-nein summary { cursor: pointer; color: var(--kp-primaer); font-size: .9375rem; }
@media (max-width: 640px) { .kp-unt-zone { padding: .75rem; } .kp-unt-zone .kp-knopf { width: 100%; } }

/* Neue Beschäftigte: Status "In Arbeit" wie "begonnen", "Vollständig" wie "erledigt" */
.kp-pill--in_arbeit { background: #fffaeb; color: #b54708; }
.kp-pill--vollstaendig { background: #ecfdf3; color: #067647; font-weight: 700; }
.kp-unt-position__kopf .kp-pflicht-pille { margin-left: auto; margin-right: -.5rem; background: var(--kp-warn-zart, #fdf0e0); color: var(--kp-warn, #8a4b00); }

/* Area colour code: a hint of colour per area (overview tile, "Heute zu tun" box, client overview card) so the boxes
   below can be matched to the tiles above. Dot before the title, soft glow in the bottom right corner. */
.kp-bereich--vd { --kp-bereich: #3b6fd8; }
.kp-bereich--unterlagen { --kp-bereich: #0d9488; }
.kp-bereich--personal { --kp-bereich: #8b5cf6; }
.kp-bereich--onboarding { --kp-bereich: #db2777; }
.kp-bereichskachel[class*="kp-bereich--"], .kp-heute__gruppe[class*="kp-bereich--"], .kp-ueb__karte[class*="kp-bereich--"] {
    background-image: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--kp-bereich) 11%, transparent) 0%, color-mix(in srgb, var(--kp-bereich) 4%, transparent) 38%, transparent 70%);
    background-color: var(--kp-flaeche);
}
.kp-bereichskachel[class*="kp-bereich--"], .kp-ueb__karte[class*="kp-bereich--"] { border-top-color: var(--kp-bereich); }
.kp-heute__gruppe[class*="kp-bereich--"] { border-top: 3px solid var(--kp-bereich); }

.kp-heute__gruppe[class*="kp-bereich--"] .kp-heute__gruppenkopf { border-bottom-color: color-mix(in srgb, var(--kp-bereich) 18%, var(--kp-linie)); }
.kp-bereichskachel[class*="kp-bereich--"] h2, .kp-heute__gruppe[class*="kp-bereich--"] h3, .kp-ueb__karte[class*="kp-bereich--"] h2 { display: flex; align-items: baseline; }


/* Responsibilities (BAUPLAN §12): initials, assign form, "Meine | Ganze Kanzlei", personal overview */
.kp-zust { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--kp-primaer-hell); color: var(--kp-primaer); font-size: .6875rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.kp-zust--betreuer, .kp-zust--bereich { background: transparent; color: var(--kp-grau); box-shadow: inset 0 0 0 1px var(--kp-linie-2); }
.kp-zust--ohne { background: transparent; color: var(--kp-linie-2); }
.kp-ueb__name .kp-zust { margin-left: 4px; }
.kp-zustform { margin: .25rem 0 .75rem; }
.kp-zustform > summary { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: pointer; list-style: none; }
.kp-zustform > summary::-webkit-details-marker { display: none; }
.kp-zustform__aendern { color: var(--kp-grau); font-size: .8125rem; text-decoration: underline; text-underline-offset: 2px; }
.kp-zustform > summary:hover .kp-zustform__aendern { color: var(--kp-primaer); }
.kp-zustform__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; background: var(--kp-grund); border-radius: var(--kp-r-klein); }
.kp-zustform__form .kp-eingabe { width: auto; min-width: 200px; min-height: 36px; padding: .3rem .6rem; }
.kp-zustform__form .kp-knopf { min-height: 36px; padding: .35rem .85rem; }
.kp-zustform__form--liste { flex-direction: column; align-items: flex-start; }
.kp-zustform__form--liste .kp-option { margin: 0; }

.kp-uebersicht-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.kp-sicht { display: inline-flex; padding: 3px; background: var(--kp-flaeche); border: 1px solid var(--kp-linie-2); border-radius: 999px; }
.kp-sicht__knopf { border: 0; background: none; padding: .35rem .95rem; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 600; color: var(--kp-grau); cursor: pointer; }
.kp-sicht__knopf:hover { color: var(--kp-text); }
.kp-sicht__knopf.is-aktiv { background: var(--kp-primaer); color: #fff; }
.kp-sicht__hinweis { margin: 0; }
.kp-listenkopf { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.kp-anpassen { margin-left: auto; }
.kp-anpassen > summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--kp-text-2); }
.kp-anpassen[open] { flex: 1 1 100%; }
.kp-anpassen__form { margin-top: 10px; padding: 18px 20px; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: var(--kp-r); box-shadow: var(--kp-schatten); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 24px; }
.kp-anpassen__form fieldset, .kp-betreuerwahl { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.kp-anpassen__form legend, .kp-betreuerwahl legend { font-weight: 700; margin-bottom: 6px; }
.kp-anpassen__form .kp-knoepfe { grid-column: 1 / -1; margin: 0; }

.kp-betreuerwahl { margin: 4px 0 16px; }
.kp-bereichsmarke { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--kp-text-2); background: color-mix(in srgb, var(--kp-bereich, var(--kp-linie-2)) 14%, #fff); }
@media (max-width: 640px) { .kp-anpassen { margin-left: 0; } .kp-listenkopf { justify-content: flex-start; } }
.kp-anpassen__form fieldset, .kp-betreuerwahl { align-content: start; }
.kp-zustform__form select.kp-eingabe { flex: 0 1 260px; min-width: 230px; width: 260px; max-width: 100%; }
.kp-anpassen__zeile { display: flex; align-items: stretch; gap: 6px; }
.kp-anpassen__zeile .kp-option { flex: 1; }
.kp-anpassen__pfeil { flex: none; width: 36px; border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein); background: var(--kp-flaeche); color: var(--kp-text-2); font: inherit; font-weight: 700; cursor: pointer; }
.kp-anpassen__pfeil:hover:not(:disabled) { background: var(--kp-grund); color: var(--kp-primaer); }
.kp-anpassen__pfeil:disabled { opacity: .35; cursor: default; }
.kp-hinweismails { display: grid; gap: 8px; max-width: 640px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--kp-linie); }
.kp-hinweismails h3, .kp-hinweismails p { margin: 0; }

/* Firm logo (settings → Erscheinungsbild) */
.kp-logo-karte { display: grid; gap: 12px; }
.kp-logo-karte h3, .kp-logo-karte p { margin: 0; }
.kp-logo-vorschau { display: flex; flex-wrap: wrap; gap: 16px; }
.kp-logo-vorschau > div { display: grid; gap: 4px; }
.kp-logo-vorschau__flaeche { display: flex; align-items: center; min-height: 64px; padding: 12px 18px; background: #fff; border: 1px solid var(--kp-linie); border-radius: var(--kp-r-klein); }
.kp-logo-form { display: grid; gap: 8px; max-width: 520px; padding-top: 8px; border-top: 1px solid var(--kp-linie); }
.kp-logo-form .kp-knoepfe { margin: 0; }
.kp-ton--gut { color: var(--kp-gut); }
.kp-ton--warn { color: var(--kp-warn); }

/* Accent as signal and hover colour (Branding: --kp-akzent-dunkel is always readable with white and on white) */
.kp-ueberzeile, .kp-pflicht { color: var(--kp-akzent-dunkel); }
.kp-knopf:not(.kp-knopf--zweit):not(.kp-knopf--still):hover { background: var(--kp-akzent-dunkel); border-color: var(--kp-akzent-dunkel); filter: none; }
.kp-kopfnav a:not(.kp-knopf):hover, .kp-reiter a:hover, .kp-seitenfuss a:hover, .kp-tabelle__name:hover, .kp-tabelle__link:hover, .kp-heute__alle:hover, .kp-ueb__kopf h2 a:hover { color: var(--kp-akzent-dunkel) !important; }
.kp-zurueck a:hover { color: var(--kp-akzent-dunkel); }
.kp-knopf--zweit:hover { border-color: var(--kp-akzent); }
.kp-aufgabe:hover .kp-aufgabe__pfeil { color: var(--kp-akzent-dunkel); }
.kp-sicht__knopf.is-aktiv:hover { background: var(--kp-akzent-dunkel); }

/* Colours (settings → Erscheinungsbild) */
.kp-farben-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 24px; }
.kp-farben-form .kp-knoepfe, .kp-farben-vorschau { grid-column: 1 / -1; margin: 0; }
.kp-farbe { display: grid; gap: 6px; }
.kp-farbe label { font-weight: 700; }
.kp-farbe__eingabe { display: flex; gap: 8px; align-items: center; }
.kp-farbe__eingabe input[type=color] { width: 48px; height: 44px; padding: 2px; border: 1px solid var(--kp-linie-2); border-radius: var(--kp-r-klein); background: var(--kp-flaeche); cursor: pointer; }
.kp-farbe__eingabe .kp-eingabe { width: 130px; font-family: ui-monospace, monospace; }
.kp-farbe p { margin: 0; }
.kp-farbe__muster { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.kp-farben-vorschau { display: grid; gap: 6px; }
.kp-farben-vorschau__flaeche { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px; background: #fff; border: 1px solid var(--kp-linie); border-radius: var(--kp-r-klein); }
.kp-farben-karte { display: grid; gap: 12px; }
.kp-farben-karte h3, .kp-farben-karte > p { margin: 0; }
.kp-farbe { align-content: start; }


/* ==========================================================================
   Feinschliff 07.11.2026: Bereichs-Icons, klare Hierarchie, ruhigere Flächen (angelehnt an Apple HIG und das
   Gefahrstoffkataster: Systemschrift, viel Weißraum, eine Zahl – ein Status – ein Einstieg), mobile Kopfzeile.
   ========================================================================== */

/* Area icons: plain (tabs, lists) or as a chip (white glyph on the area colour, like system settings icons) */
.kp-icon { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--kp-bereich, var(--kp-grau)); }
.kp-icon svg { width: 100%; height: 100%; display: block; }
.kp-icon--chip { width: 30px; height: 30px; border-radius: 8px; background: var(--kp-bereich); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.kp-icon--chip svg { width: 19px; height: 19px; }
.kp-bereichskachel h2, .kp-heute__gruppenkopf h3, .kp-ueb__kopf h2 { display: flex !important; align-items: center; gap: 10px; }
.kp-heute__gruppenkopf .kp-icon--chip { width: 26px; height: 26px; border-radius: 7px; }
.kp-heute__gruppenkopf .kp-icon--chip svg { width: 16px; height: 16px; }
.kp-titel-mit-icon { display: flex; align-items: center; gap: 14px; }
.kp-titel-mit-icon .kp-icon--chip { width: 44px; height: 44px; border-radius: 12px; }
.kp-titel-mit-icon .kp-icon--chip svg { width: 26px; height: 26px; }
.kp-reiter a { display: inline-flex; align-items: center; gap: 7px; }
.kp-reiter a .kp-icon { width: 17px; height: 17px; }
.kp-anpassen__form .kp-option { align-items: center; }
.kp-anpassen__form .kp-option input { margin-top: 0; }

/* Calmer surfaces: Apple-like grey ground, softer cards, a little more radius */
.kp-seite { --kp-grund: #f5f5f7; --kp-r: 14px; --kp-schatten: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .18); }

/* Hierarchy: section titles clearly above group titles, group titles clearly above entries */
.kp-heute { margin-top: 36px; }
.kp-heute__kopf { margin-bottom: 14px; }
.kp-heute__kopf h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.kp-heute__gruppenkopf { background: color-mix(in srgb, var(--kp-bereich, var(--kp-primaer)) 6%, #fff); padding: 12px 16px; }
.kp-heute__gruppenkopf h3 { font-size: .9375rem; font-weight: 700; color: var(--kp-text); }
.kp-heute__gruppe[class*="kp-bereich--"] { background-image: none; }
.kp-aufgabe__text strong { font-weight: 600; font-size: .9375rem; }
.kp-aufgabe__was { font-size: .8125rem; }
.kp-bereichskachel h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.kp-bereichskachel__zahl strong { letter-spacing: -.03em; }
.kp-ueb__kopf h2 { font-size: 1rem; }

/* Header: wraps cleanly on narrow screens (logo row, then search and menu) */
@media (max-width: 900px) {
    .kp-seitenkopf__innen { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
    .kp-marke { max-width: 100%; }
    .kp-marke img { height: auto; max-height: 30px; max-width: 100%; }
    .kp-kopfnav { flex: 1 1 100%; justify-content: flex-start; gap: 8px 18px; }
    .kp-kopfsuche { flex: 1 1 100%; }
    .kp-kopfsuche .kp-eingabe { width: 100%; }
    .kp-kopfnav__konto { margin-left: auto; padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
    .kp-kopfnav { font-size: .875rem; gap: 6px 14px; }
    .kp-kopfnav .kp-knopf { min-height: 34px; padding: .3rem .75rem; }
}

/* Mobile: notices stack, tabs scroll sideways instead of wrapping, titles a bit smaller */
@media (max-width: 640px) {
    .kp-hinweis { flex-direction: column; gap: .35rem; }
    .kp-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -20px; margin-right: -20px; padding: 0 20px; }
    .kp-reiter::-webkit-scrollbar { display: none; }
    .kp-reiter a { white-space: nowrap; padding: .6rem .7rem; }
    .kp-titel-mit-icon .kp-icon--chip { width: 36px; height: 36px; border-radius: 10px; }
    .kp-titel-mit-icon .kp-icon--chip svg { width: 22px; height: 22px; }
    .kp-heute__gruppen, .kp-ueb, .kp-bereichskacheln { gap: 12px; }
    .kp-uebersicht-werkzeuge { gap: 10px; }
    .kp-seiteninhalt { padding-top: 24px; }
    .kp-karte { padding: 20px; }
    .kp-werkzeuge__rechts { margin-left: 0; }
    .kp-werkzeuge .kp-knopf, .kp-werkzeuge input[type=search] { flex: 1 1 100%; max-width: none; }
}
.kp-aufgabe { align-items: flex-start; }
.kp-aufgabe__punkt { margin-top: .55em; }
.kp-aufgabe__pfeil, .kp-mandantwahl__kuerzel { align-self: center; }

/* Lists as cards on phones (labels from the column headers, see kp_kanzlei.html.twig) */
@media (max-width: 640px) {
    .kp-tabelle--liste thead { display: none; }
    .kp-tabelle--liste, .kp-tabelle--liste tbody, .kp-tabelle--liste tr, .kp-tabelle--liste td { display: block; width: 100%; }
    .kp-tabelle--liste tr { padding: 14px 16px; border-bottom: 1px solid var(--kp-linie); }
    .kp-tabelle--liste tr:last-child { border-bottom: 0; }
    .kp-tabelle--liste td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0 !important; border: 0 !important; text-align: right; font-size: .875rem; }
    .kp-tabelle--liste td::before { content: attr(data-label); flex: none; color: var(--kp-grau); font-size: .8125rem; text-align: left; }
    .kp-tabelle--liste td:first-child { display: block; text-align: left; padding-bottom: 6px !important; font-size: 1rem; }
    .kp-tabelle--liste td:first-child::before { content: none; }
    .kp-tabelle--liste td small { display: block; }
    .kp-tabelle--liste td > div, .kp-tabelle--liste td > small, .kp-tabelle--liste td > span { margin-left: auto; }
    .kp-tabelle--liste .kp-balken--klein { width: 90px; margin-top: 0; }
    .kp-tabelle-rahmen:has(.kp-tabelle--liste) { overflow-x: visible; }
}
@media (max-width: 640px) {
    .kp-tabelle--liste td:not(:first-child) { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; justify-items: end; }
    .kp-tabelle--liste td:not(:first-child)::before { grid-row: 1 / span 6; justify-self: start; }
    .kp-tabelle--liste td:not(:first-child) > * { grid-column: 2; margin-left: 0; }
    .kp-tabelle--liste td small { text-align: right; }
}
@media (max-width: 640px) {
    .kp-tabelle--liste td:not(:first-child) { align-items: start; row-gap: 2px; }
    .kp-tabelle--liste td:not(:first-child)::before { grid-row: 1 / span 2; }
    .kp-tabelle--liste td:first-child small { text-align: left; }
    .kp-tabelle--liste .kp-pill { white-space: normal; text-align: right; }
}
@media (max-width: 700px) {
    /* data lists: label above value, no zebra stripes (they alternate oddly in one column) */
    .kp-karte--ruhig .kp-daten :is(dt, dd), .kp-karte--ruhig .kp-daten :is(dt, dd):nth-of-type(odd) { background: none; border-radius: 0; padding-left: 0; padding-right: 0; }
    .kp-daten dt { padding-top: 10px !important; padding-bottom: 0 !important; font-size: .8125rem; }
    .kp-daten dd { padding-top: 2px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--kp-linie); }
    .kp-daten dd:last-of-type { border-bottom: 0; }
}
@media (max-width: 640px) {
    /* client overview lists: name on its own line, status below */
    .kp-ueb__liste a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .kp-ueb__stand { justify-content: flex-start; }
    .kp-heute__alle { font-size: .8125rem; }
}

/* ==========================================================================
   Eine Farbfamilie (07.11.2026): Bereiche unterscheiden sich durch Icons, nicht durch Farben. Alles in der Leitfarbe der
   Kanzlei; Signalfarbe (Rot) nur für Dinge, die wirklich drängen (überfällig, Erinnerungen ausgeschöpft).
   ========================================================================== */
.kp-bereich--vd, .kp-bereich--unterlagen, .kp-bereich--personal, .kp-bereich--onboarding { --kp-bereich: var(--kp-primaer); }
.kp-bereichskachel[class*="kp-bereich--"], .kp-heute__gruppe[class*="kp-bereich--"], .kp-ueb__karte[class*="kp-bereich--"] { background-image: none; }
.kp-bereichskachel[class*="kp-bereich--"], .kp-ueb__karte[class*="kp-bereich--"], .kp-heute__gruppe[class*="kp-bereich--"] { border-top: 1px solid var(--kp-linie); }

/* Icon chip: tinted square in the main colour (calm, like grouped system icons) */
.kp-icon--chip { background: var(--kp-primaer-zart); color: var(--kp-primaer); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-primaer) 12%, transparent); }
.kp-reiter a .kp-icon, .kp-anpassen__form .kp-icon { color: var(--kp-grau); }
.kp-reiter a.is-aktiv .kp-icon, .kp-reiter a:hover .kp-icon { color: currentColor; }

/* Numbers: dark and quiet; zero greyed; only "fehler" keeps its signal colour */
.kp-bereichskachel__zahl strong, .kp-bereichskachel__zahl.kp-ton--warn strong, .kp-bereichskachel__zahl.kp-ton--gut strong { color: var(--kp-text); }
.kp-bereichskachel__zahl span { color: var(--kp-grau); }
.kp-bereichskachel__status .kp-ton--warn strong, .kp-bereichskachel__status .kp-ton--gut strong { color: var(--kp-text-2); }
.kp-bereichskachel__zahl.kp-ton--fehler strong, .kp-bereichskachel__status .kp-ton--fehler strong, .kp-bereichskachel__status .kp-ton--fehler { color: var(--kp-fehler); }
.kp-bereichskachel__zahl.kp-ton--neutral strong { color: var(--kp-text); }
.kp-bereichskachel__zahl:has(strong:is(:empty)) strong { color: var(--kp-linie-2); }

/* "Heute zu tun": neutral group heads, counter in the main colour, dots: main colour = to do, red = overdue */
.kp-heute__gruppenkopf { background: var(--kp-flaeche); }
.kp-heute__anzahl { background: var(--kp-primaer-zart); color: var(--kp-primaer); }
.kp-aufgabe__punkt { background: var(--kp-primaer); opacity: .55; }
.kp-aufgabe--fehler .kp-aufgabe__punkt { background: var(--kp-fehler); opacity: 1; }
.kp-ueb__zahl { color: var(--kp-text-2); }
.kp-bereichsmarke { background: var(--kp-primaer-zart); }
.kp-bereichskachel__zahl.is-null strong, .kp-bereichskachel__status .is-null, .kp-bereichskachel__status .is-null strong { color: #98a2b3 !important; }
.kp-bereichskachel__status li { color: var(--kp-grau); }
.kp-bereichskachel__status li.kp-ton--fehler:not(.is-null), .kp-bereichskachel__status li.kp-ton--fehler:not(.is-null) strong { color: var(--kp-fehler); }


/* ==========================================================================
   Kopfzeile neu (07.11.2026): Logo · breite Suche · „+ Mandant“ · Kontomenü (Initialen, Menü mit Einstellungen,
   Mitarbeiter, Zwei-Faktor, Support, Abmelden). Lange Namen stehen nur im Menü, nie in der Leiste.
   ========================================================================== */
.kp-seitenkopf__innen { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; }
.kp-kopfnav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.kp-kopfsuche { position: relative; flex: 1 1 auto; max-width: 440px; min-width: 0; }
.kp-kopfsuche .kp-eingabe { width: 100%; min-height: 40px; padding: .45rem .9rem .45rem 2.3rem; border-radius: 999px; background: var(--kp-grund); border-color: transparent; font-size: .9375rem; }
.kp-kopfsuche .kp-eingabe:focus { background: var(--kp-flaeche); }
.kp-kopfsuche__lupe { position: absolute; left: .85rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--kp-grau); pointer-events: none; }
.kp-kopf-neu { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--kp-primaer); color: #fff !important; font-weight: 600; font-size: .9375rem; text-decoration: none !important; white-space: nowrap; transition: background .15s; }
.kp-kopf-neu span[aria-hidden] { font-size: 1.25rem; line-height: 1; font-weight: 500; }
.kp-kopf-neu:hover { background: var(--kp-akzent-dunkel); }
.kp-konto { position: relative; flex: none; }
.kp-konto > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.kp-konto > summary::-webkit-details-marker { display: none; }
.kp-konto__kreis { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kp-primaer-zart); color: var(--kp-primaer); font-weight: 700; font-size: .875rem; letter-spacing: .02em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-primaer) 15%, transparent); transition: box-shadow .15s; }
.kp-konto > summary:hover .kp-konto__kreis, .kp-konto[open] .kp-konto__kreis { box-shadow: inset 0 0 0 2px var(--kp-akzent); }
.kp-konto__menue { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 280px; max-width: calc(100vw - 32px); padding: 6px; background: var(--kp-flaeche); border: 1px solid var(--kp-linie); border-radius: 14px; box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22); }
.kp-konto__wer { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--kp-linie); overflow-wrap: anywhere; }
.kp-konto__wer strong { color: var(--kp-text); font-size: .9375rem; }
.kp-konto__wer span { color: var(--kp-grau); font-size: .8125rem; }
.kp-konto__menue a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--kp-text-2) !important; text-decoration: none !important; font-size: .9375rem; }
.kp-konto__menue a:hover { background: var(--kp-grund); color: var(--kp-text) !important; }
.kp-konto__menue a.kp-konto__ab { margin-top: 4px; border-top: 1px solid var(--kp-linie); border-radius: 0 0 8px 8px; padding-top: 11px; color: var(--kp-fehler) !important; }
.kp-kopfnav__konto, .kp-kopfnav__wer { display: none; }

@media (max-width: 900px) {
    /* undo the earlier wrapping rules of the old header */
    .kp-seitenkopf__innen { flex-wrap: nowrap; }
    .kp-kopfnav { flex: none; gap: 10px; font-size: inherit; }
}
@media (max-width: 640px) {
    /* phones: logo and account on the first line, search and "+" on the second */
    .kp-seitenkopf__innen { grid-template-columns: minmax(0, 1fr) auto; padding-top: 10px; padding-bottom: 10px; }
    .kp-kopfnav { display: contents; }
    .kp-marke { grid-column: 1; grid-row: 1; min-width: 0; }
    .kp-konto { grid-column: 2; grid-row: 1; }
    .kp-kopfsuche { grid-column: 1; grid-row: 2; max-width: none; }
    .kp-kopf-neu { grid-column: 2; grid-row: 2; width: 40px; padding: 0; justify-content: center; }
    .kp-kopf-neu__text { display: none; }
}

/* VD list tiles: who has to act (with a short explanation under each number) */
.kp-kacheln--ablauf { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kp-kachel__titel { font-weight: 700; color: var(--kp-text); }
.kp-kachel__erklaerung { display: block; color: var(--kp-grau); font-size: .75rem; line-height: 1.35; margin-top: 2px; }
.kp-kachel__zusatz { display: block; color: var(--kp-primaer); font-size: .75rem; font-weight: 600; margin-top: 4px; }
.kp-kachel.is-null strong { color: #98a2b3; }
.kp-pill--unterschrift { background: var(--kp-primaer-zart); color: var(--kp-primaer); }

/* Date fields: same look as text fields, compact width, comfortable touch height (with the browser's calendar) */
.kp-portal input[type=date], .kp-seite input[type=date].kp-eingabe { width: 100%; max-width: 240px; min-height: 2.95rem; line-height: 1.3; -webkit-appearance: none; appearance: none; text-align: left; }
.kp-portal input[type=date]::-webkit-date-and-time-value { text-align: left; }
.kp-portal input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; padding: 2px; }
.kp-portal input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Trial and demo banner */
.kp-testbalken { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 20px; padding: 12px 16px; border-radius: var(--kp-r-klein); background: var(--kp-primaer-zart); color: var(--kp-text-2); border: 1px solid color-mix(in srgb, var(--kp-primaer) 18%, transparent); font-size: .9375rem; }
.kp-testbalken strong { color: var(--kp-primaer); }
.kp-testbalken a { margin-left: auto; font-weight: 600; }

/* Eigene Absenderadresse: DNS-Einträge zum Kopieren */
.kp-dns-liste { padding-left: 1.2rem; display: grid; gap: .9rem; margin: .8rem 0 1rem; }
.kp-dns-liste > li > p { margin: .3rem 0; }
.kp-dns-wert { display: flex; gap: .5rem; align-items: flex-start; margin: .2rem 0 .4rem; }
.kp-dns-wert code { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-all; background: var(--kp-flaeche, #f5f6f8); border-radius: 6px; padding: .45rem .6rem; font-size: .82rem; line-height: 1.4; }
.kp-dns-wert .kp-knopf { flex: none; }
.kp-absender-form { margin-top: 1rem; display: grid; gap: .4rem; max-width: 30rem; }