/* Kundenportal: gemeinsame Gestaltung. Die Seiten behalten ihre Layout- und
   Zustandslogik; diese Datei wird danach geladen und vereinheitlicht die UI. */
:root {
  --color-primary: #2d599f; --color-primary-hover: #254a86;
  --color-navy: #12234f; --color-text: #09122a; --color-text-muted: #5c6473;
  --color-bg-soft: #fcfcfd; --color-bg-muted: #f7f7f8;
  --color-divider-soft: #e5e7ec; --color-primary-softer: #edf2f9;
  --font-sans: 'Poppins', 'Segoe UI', sans-serif;
  --radius-md: 12px; --radius-lg: 16px;
  /* Bestehende Seitentokens bleiben kompatibel. */
  --font: var(--font-sans); --sans: var(--font-sans); --serif: var(--font-sans);
  --brand: var(--color-primary); --brand-dark: var(--color-primary-hover);
  --primary: var(--color-primary); --primary-hover: var(--color-primary-hover);
  --navy: var(--color-navy); --ink: var(--color-text); --text: var(--color-text);
  --muted: var(--color-text-muted); --muted-soft: #707989;
  --bg: var(--color-bg-soft); --bg-soft: var(--color-bg-soft); --bg-muted: var(--color-bg-muted);
  --card: #fff; --card-bg: #fff; --card-border: var(--color-divider-soft);
  --line: var(--color-divider-soft); --divider: var(--color-divider-soft);
  --softer: var(--color-primary-softer); --brand-softer: var(--color-primary-softer);
  --primary-softer: var(--color-primary-softer); --bot-bg: #fff; --bot-border: #e5e7ec;
  --accent: var(--color-primary); --accent-dark: var(--color-primary-hover);
  --ok: #247249; --ok-ink: #247249; --ok-bg: #edf6f0;
  --bad: #b43737; --bad-ink: #b43737; --bad-bg: #fff5f5;
  --warn-ink: #8c6026; --warn-bg: #fcf6ec; --warn-soft: #fcf6ec;
  --urgent: #b43737; --urgent-bg: #fff5f5; --soon: #8c6026; --soon-bg: #fcf6ec;
  --radius: 16px; --shadow: none; --sh: none; --sh-md: none;
}
.portal-ui, .portal-ui * { box-sizing: border-box; }
body.portal-ui { margin: 0; background: var(--color-bg-soft); color: var(--color-text); font: 14px/1.6 var(--font-sans); }
.portal-ui button, .portal-ui input, .portal-ui select, .portal-ui textarea { font-family: inherit; }
.portal-ui :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #b0caf2; outline-offset: 3px; }
.portal-ui :is(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
.portal-ui .wrap { max-width: 960px; margin: auto; padding: 12px 2px 24px; }
.portal-ui .portal-title { margin: 0 0 8px; color: var(--color-navy); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.portal-ui .intro { margin: 0 0 24px; color: var(--color-text-muted); font-size: 13px; line-height: 1.65; max-width: 76ch; }
.portal-ui h3 { color: var(--color-navy); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.portal-ui :is(.grp-title, .gruppe-titel, .section-title, .vd-section-label, .sec) { color: var(--color-navy); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.portal-ui :is(.card, .doc, .fr, .sc, .mitg, .form-card, .uploader, .beleg, .chat, .karte, .sc-panel) {
  background: #fff; border-color: var(--color-divider-soft); border-radius: var(--radius-lg); box-shadow: none;
}
.portal-ui :is(.card, .sc, .form-card, .uploader) { padding: 22px; }
.portal-ui :is(.doc, .beleg, .fr, .mitg) { padding: 18px; margin-bottom: 12px; }
.portal-ui :is(.doc, .mitg, .card-clickable):hover { background: var(--color-bg-soft); border-color: #aabbd4; box-shadow: none; }
.portal-ui .card-clickable:active { transform: translateY(1px); }
.portal-ui :is(.sparte-title, .vnr, .doc-name, .b-titel, .mitg-name, .fr-title, .sc-title, .k-titel) { color: var(--color-navy); font-weight: 600; font-size: 14px; line-height: 1.5; }
.portal-ui :is(.count, .doc-meta, .b-meta, .fr-detail, .sc-sub, .mitg-meta, .gesellschaft) { font-weight: 400; color: var(--color-text-muted); }
.portal-ui :is(.status-pill, .badge, .pill) { font-size: 11px; font-weight: 500; }
.portal-ui .fr.urgent { border-left-color: var(--urgent); }
.portal-ui .fr.soon { border-left-color: var(--soon); }
.portal-ui .fr.ok { border-left-color: var(--ok); }
.portal-ui :is(.doc-cat, .b-kat, .mitg-tag) { background: var(--color-primary-softer); color: var(--color-primary); font-weight: 500; letter-spacing: 0; text-transform: none; }
.portal-ui :is(.info-grid, .vd-detail-grid) { gap: 14px 20px; }
.portal-ui :is(.info-grid, .vd-detail-grid) strong { font-weight: 500; }
.portal-ui :is(.lbl, .police-row, .hint, .fuss) { color: var(--color-text-muted); }
.portal-ui :is(.btn, .btn-primary, .btn-secondary, .btn-widerruf, .fr-btn, .esc-btn, .send, .ai-btn, .sc-btn, .pv-btn, .b-btn, .doc-dl, .mitg-del, a.dl) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 16px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500; line-height: 1.5; box-shadow: none;
  transition: background .18s, border-color .18s; text-decoration: none;
}
.portal-ui :is(.btn-primary, .btn-success, .send, .sc-btn-primary, .ai-btn) { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); }
.portal-ui :is(.btn-primary, .btn-success, .send, .sc-btn-primary, .ai-btn):hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.portal-ui :is(.btn-secondary, .btn-ghost, .fr-btn, .esc-btn, .sc-btn-secondary, .b-btn, .doc-dl, .pv-x) { background: #fff; color: var(--color-navy); border: 1px solid #d6dce5; }
.portal-ui :is(.btn-secondary, .btn-ghost, .fr-btn, .esc-btn, .sc-btn-secondary, .b-btn, .doc-dl, .pv-x):hover { background: var(--color-bg-muted); border-color: #aabbd4; color: var(--color-navy); }
.portal-ui :is(.btn, .btn-primary, .btn-secondary, .fr-btn, .sc-btn):active { transform: translateY(1px); }
.portal-ui :is(button, .btn):disabled { cursor: not-allowed; opacity: .6; transform: none; }
.portal-ui :is(.b-btn, .doc-dl) { min-width: 44px; width: 44px; padding: 0; }
.portal-ui .btn-widerruf { color: #8c6026; border: 1px solid #dcc9ae; }
.portal-ui .btn-widerruf:hover { background: var(--warn-bg); color: #8c6026; }
.portal-ui :is(.field label, .form-row label, .up-row label, .wr-field label, .sc-field label, .row label) { color: var(--color-navy); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.portal-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]), select, textarea),
.portal-ui :is(.field, .form-row, .up-row, .wr-field, .sc-field, .filter, .filter-bar) :is(input:not([type=checkbox]):not([type=file]), select, textarea) {
  min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid #c8cdd5;
  border-radius: var(--radius-md); background: #fff; color: var(--color-text); font-size: 13px; line-height: 1.5;
}
.portal-ui textarea { width: 100%; }
.portal-ui input[readonly] { background: var(--color-bg-muted); color: var(--color-text-muted); }
.portal-ui input::placeholder, .portal-ui textarea::placeholder { color: #747d8c; opacity: 1; }
.portal-ui input[type=file] { max-width: 100%; min-width: 0; font-size: 12px; color: var(--color-text-muted); }
.portal-ui input[type=file]::file-selector-button { font: 500 12px var(--font-sans); padding: 11px 14px; border: 1px solid #d6dce5; border-radius: var(--radius-md); background: #fff; color: var(--color-navy); cursor: pointer; margin-right: 10px; }
.portal-ui :is(.form-row, .up-row, .field-row, .row) { gap: 16px; }
.portal-ui :is(.form-row, .up-row, .field, .wr-field, .sc-field) { margin-bottom: 16px; }
.portal-ui :is(.form-row, .up-row, .field-row, .row) > * { min-width: 0; }
.portal-ui :is(.filter-bar, .filter, .filterbar) { gap: 10px; margin-bottom: 18px; }
.portal-ui .fchip { border-radius: 12px; min-height: 40px; font-weight: 500; background: #fff; border-color: #d6dce5; }
.portal-ui .fchip.active { color: var(--color-primary); background: var(--color-primary-softer); border-color: #b9cae2; }
.portal-ui :is(.state, .empty, .leer) { padding: 32px 20px; background: var(--color-bg-muted); border: 1px solid var(--color-divider-soft); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: 13px; }
.portal-ui :is(.state .big, .done-card .big, .wr-ok .big) { display: block; color: var(--color-primary); margin-bottom: 12px; }
.portal-ui :is(.state .big, .done-card .big, .wr-ok .big) .portal-icon { width: 30px; height: 30px; }
.portal-ui .skel { border: 1px solid var(--color-divider-soft); border-radius: var(--radius-lg); background: var(--color-bg-muted); animation: none; }
.portal-ui .portal-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.portal-ui :is(.doc-icon, .b-icon, .ai-icon, .scan-ico, .vd-service-btn .ico) { color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.portal-ui :is(.doc-icon, .b-icon, .ai-icon, .scan-ico) .portal-icon { width: 26px; height: 26px; }
.portal-ui :is(.modal, .pv-box, .dlg) { border: 1px solid #c7d4e7; border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(9,18,42,.12); }
.portal-ui .modal h3, .portal-ui .dlg-titel { font-size: 18px; font-weight: 600; }
.portal-ui :is(#vdOverlay, #modalOverlay) .modal { box-shadow: 0 8px 30px rgba(9,18,42,.12); }
.portal-ui :is(.modal-x, .vd-close, .sc-x) { border: 1px solid var(--color-divider-soft); border-radius: 10px; width: 40px; height: 40px; min-width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--color-text-muted); }
.portal-ui :is(.modal-actions, .form-actions, .up-actions, .actions) { gap: 10px; flex-wrap: wrap; }
.portal-ui :is(.scan-drop, .wr-contract, .sc-summary, .sc-desc) { background: var(--color-bg-muted); border-color: var(--color-divider-soft); border-radius: var(--radius-md); }
.portal-ui .scan-drop { border-style: solid; }
.portal-ui .scan-cta { color: var(--color-navy); font-weight: 600; }
.portal-ui .scan-cta strong { font-weight: 600; }
.portal-ui .scan-cta .scan-sub { font-weight: 400; }
.portal-ui .manual-toggle { border-color: var(--color-divider-soft); border-radius: var(--radius-md); font-weight: 500; color: var(--color-primary); }
.portal-ui .card-widerruf { border-top-style: solid; }
.portal-ui .vd-service-btn { border: 1px solid var(--color-divider-soft); background: #fff; border-radius: var(--radius-md); }
.portal-ui .vd-service-btn .t { font-weight: 500; }
.portal-ui .vd-service-btn:hover { background: var(--color-bg-muted); border-color: #aabbd4; }
.portal-ui .vd-service-btn.danger .ico { color: var(--bad-ink); }
.portal-ui .vd-services { gap: 12px; }
.portal-ui :is(.vd-soon, .vd-loesch-hint) { border-radius: var(--radius-md); }
.portal-ui .pv-head { padding: 14px 16px; }
.portal-ui .pv-title { font-weight: 500; }
.portal-ui .sc-panel { padding: 22px; }
.portal-ui .sc-title { font-size: 15px; }
.portal-ui .sc-capture-ico { background: var(--color-primary-softer); border-radius: var(--radius-md); }
.portal-ui .fr { border-left-width: 3px; }
.portal-ui .fr-main { min-width: 0; flex-basis: 180px; }
.portal-ui .sc-head { flex-wrap: wrap; }
.portal-ui .step.current .dot { box-shadow: none; }
.portal-ui .step .lbl { font-size: 11px; }
.portal-ui .step.current .lbl { font-weight: 500; }
.portal-ui .step::before, .portal-ui .step::after { height: 2px; }
.portal-ui .inbox { background: var(--color-primary-softer); border-color: #d6e0ee; border-radius: var(--radius-lg); padding: 20px; }
.portal-ui .inbox-row { border-color: var(--color-divider-soft); border-radius: var(--radius-md); }
.portal-ui .einl { border-color: var(--color-divider-soft); border-radius: var(--radius-md); padding: 16px; flex-wrap: wrap; }
.portal-ui .e-mail { overflow-wrap: anywhere; }
.portal-ui .mitg-head { flex-wrap: wrap; }
.portal-ui .mitg-name { min-width: 110px; }
.portal-ui .mitg-detail .vrow { flex-wrap: wrap; border-radius: 10px; background: var(--color-bg-muted); }
.portal-ui .ai-card { background: var(--color-primary-softer); border: 1px solid #d6e0ee; color: var(--color-navy); padding: 22px; border-radius: var(--radius-lg); flex-wrap: wrap; }
.portal-ui .ai-card .ai-title { font-size: 14px; font-weight: 600; }
.portal-ui .ai-card .ai-sub { color: var(--color-text-muted); opacity: 1; }
.portal-ui .ai-card .ai-btn { backdrop-filter: none; }
.portal-ui .sw input:checked + span { background: var(--color-primary); }
.portal-ui .sw:focus-within { outline: 3px solid #b0caf2; outline-offset: 4px; border-radius: 999px; }
.portal-ui .opt + .opt { margin-top: 20px; padding-top: 20px; }
.portal-ui .opt-titel { color: var(--color-navy); font-weight: 500; }
.portal-ui .disclaimer { background: var(--color-bg-muted); border-color: var(--color-divider-soft); color: var(--color-text-muted); border-radius: var(--radius-md); padding: 16px; line-height: 1.65; }
.portal-ui .disclaimer a { color: var(--color-primary); }
.portal-ui .chat { background: var(--color-bg-muted); padding: 20px 20px 6px; }
.portal-ui .bubble { font-size: 13px; line-height: 1.7; padding: 14px 16px; }
.portal-ui .bubble em { color: inherit; opacity: .8; }
.portal-ui .ex { border-radius: var(--radius-md); min-height: 40px; font-size: 12px; }
.portal-ui .input-row { gap: 10px; }
.portal-ui .input-row textarea { min-width: 0; }
.portal-ui .portal-back { border: 0; background: none; color: var(--color-primary); cursor: pointer; font: 500 13px var(--font-sans); min-height: 44px; padding: 0; margin-bottom: 12px; }
.portal-ui .portal-chat-label { display: block; font-size: 12px; font-weight: 500; color: var(--color-navy); margin-top: 18px; }
.portal-ui .hero { text-align: left; padding: 0; margin-bottom: 24px; }
.portal-ui .hero h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 8px; }
.portal-ui .hero p { margin: 0; max-width: 72ch; font-size: 13px; line-height: 1.65; }
.portal-ui .hero .eyebrow { letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--color-text-muted); }
.portal-ui .tile { background: #fff; border-radius: var(--radius-lg); padding: 20px; border-color: var(--color-divider-soft); box-shadow: none; min-height: 150px; }
.portal-ui .tile:hover { background: var(--color-bg-muted); border-color: #aabbd4; }
.portal-ui .tile.active { background: var(--color-primary-softer); border-color: var(--color-primary); }
.portal-ui .tile .ic { width: 28px; height: 28px; margin-bottom: 14px; border-radius: 0; background: none; }
.portal-ui .tile .ic .portal-icon { width: 26px; height: 26px; }
.portal-ui .tile b { font-size: 13px; font-weight: 500; line-height: 1.5; }
.portal-ui .tile .d { font-size: 12px; margin-top: 4px; }
.portal-ui .tile .chev .portal-icon { width: 16px; height: 16px; }
.portal-ui .tile-danger b { color: var(--color-navy); }
.portal-ui .tile-danger .ic { color: var(--bad-ink); }
.portal-ui .grp { margin-top: 24px; }
.portal-ui .panel { margin-top: 16px; }
.portal-angebote { max-width: 960px; margin: auto !important; padding: 12px 2px 24px !important; }
.portal-angebote .portal-title { margin-bottom: 24px; }
.portal-ui :is(.k-icon, .logo-init) { background: var(--color-primary-softer); }
.portal-ui :is(.spar-z, .summe b, .dlg-summe b) { font-weight: 600; }
.portal-ui .spar { background: #f0f6f2; border: 1px solid #dce9e0; }
.portal-ui .spar.mehr { background: var(--color-primary-softer); border-color: #d6e0ee; }
.portal-ui .k-kopf, .portal-ui .k-inner { padding: 20px; }
.portal-ui .dlg { animation: none; }
.portal-ui .portal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.portal-ui .portal-kopf .portal-title { margin: 0; }
/* Die Signaturseite erhält Mandantenfarben zur Laufzeit aus der Token-Antwort. */
.portal-sign { --color-primary: var(--brand); --color-primary-hover: var(--brand-dark); --color-navy: var(--navy); }
.portal-sign .wrap { max-width: 820px; padding: 24px 16px 330px; }
.portal-sign .title { font-size: 20px; font-weight: 600; color: var(--color-navy); }
.portal-sign .hdr { font-weight: 600; }
.portal-sign .sigbar { border-color: var(--color-divider-soft); box-shadow: 0 -4px 18px rgba(9,18,42,.05); }
.portal-sign .sig-pad-wrap { border-style: solid; border-color: #c8cdd5; border-radius: var(--radius-md); }
.portal-konto-loeschen .wrap { max-width: 720px; }
.portal-konto-loeschen :is(h1, h2) { font-size: 20px; }
.portal-konto-loeschen .lead { font-size: 14px; }
.portal-konto-loeschen .warn { color: #8c6026; font-size: 13px; background: var(--warn-bg); border-color: #e8d9c4; }
.portal-onboarding :is(.card, .pane) { box-shadow: none; }
.portal-onboarding .card { padding: 0; border: 0; background: transparent; }
.portal-onboarding .brand { background-image: none; }
.portal-onboarding .brand::before, .portal-onboarding .brand::after { display: none; }
.portal-onboarding .resume { background: var(--color-primary-softer); border-radius: var(--radius-md); border-color: #d6e0ee; }
.portal-onboarding .fld label { font-weight: 500; }
.portal-onboarding .btn { min-height: 46px; }
@media (max-width: 540px) {
  .portal-ui :is(.card, .sc, .form-card, .uploader, .sc-panel, .inbox, .ai-card) { padding: 18px 16px; }
  .portal-ui :is(.doc, .beleg, .fr, .mitg) { padding: 16px; }
  .portal-ui :is(.form-row, .up-row, .field-row) { grid-template-columns: minmax(0, 1fr); }
  .portal-ui :is(.btn, .btn-primary, .btn-secondary, .fr-btn, .esc-btn, .send) { padding-inline: 12px; font-size: 12px; }
  .portal-ui .beleg { flex-wrap: wrap; }
  .portal-ui .b-actions { margin-left: auto; }
  .portal-ui .fr-btn { flex: 1 0 100%; }
  .portal-ui .modal-overlay { padding: 12px; }
  .portal-ui .modal { padding: 18px 16px; }
  .portal-ui .vd-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-ui .scan-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-ui .chat { padding: 16px 12px 2px; }
  .portal-ui .bubble { max-width: 94%; padding: 12px; }
  .portal-ui .pv-head { flex-wrap: wrap; }
  .portal-ui .pv-title { flex-basis: 100%; }
  .portal-ui .tile { min-height: 135px; padding: 18px 16px; }
  .portal-ui .k-kopf, .portal-ui .k-inner { padding: 16px; }
  .portal-ui .k-kopf { flex-wrap: wrap; }
  .portal-ui .k-rechts { margin-left: auto; }
  .portal-ui :is(.dlg-kopf, .dlg-body, .dlg-fuss) { padding-left: 16px; padding-right: 16px; }
  .portal-ui :is(.neu, .alt) { flex-wrap: wrap; }
  .portal-ui .neu-p { margin-left: auto; }
  .portal-ui .portal-kopf { align-items: flex-start; }
  .portal-ui .step .lbl { font-size: 10px; overflow-wrap: anywhere; }
  .portal-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea),
  .portal-ui :is(.field, .form-row, .up-row, .wr-field, .sc-field, .filter, .filter-bar) :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-ui *, .portal-ui *::before, .portal-ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}