/* Kunden-Center · Gemeinsames Token-Set und Grundbausteine (Gestaltung „Lebensbuch“, 27.09.2026).
   Gilt für die Kunden-Center-Hülle (body.customer-center) und die eingebetteten Bereiche (body.cc-embedded, außer der
   Gedenkseite „Lebensbuch“, die ihre eigenen Regeln behält). Farben: Aubergine #643182/#4e2555, Flieder #b394cc/#7a5697,
   Papier #f9f6f8. Serife (Cardo) nur für Titel, Fließtext in Segoe UI. Datumsangaben mit führenden Nullen.
   Modul-Stile (customer-center-layout/-warm/-embedded, family-*, portal-music, portal-deregistration, portal-expansion)
   greifen ausschließlich auf die Variablen --cc-* zu. */
body.customer-center, body.cc-embedded {
  /* Farben */
  --cc-plum:#643182; --cc-plum-dark:#4e2555; --cc-plum-deep:#3d1c47; --cc-lilac:#b394cc; --cc-lilac-dark:#7a5697; --cc-lilac-soft:#f1e9f5;
  --cc-paper:#f9f6f8; --cc-card:#fffdfe; --cc-soft:#f6f1f9; --cc-line:#e6dcec; --cc-line-strong:#d9c6e3;
  --cc-ink:#2b2432; --cc-text:#4a3d52; --cc-muted:#6f667a; --cc-eyebrow:#7a5697;
  --cc-ok:#2f6a55; --cc-ok-soft:#eaf3ee; --cc-ok-line:#cfe3d6;
  --cc-warn:#8a5a1b; --cc-warn-soft:#fbf1e4; --cc-warn-line:#efdcc0;
  --cc-danger:#9c3131; --cc-danger-soft:#fbeeee; --cc-danger-line:#efcdcd;
  /* Radien, Schatten */
  --cc-radius-lg:18px; --cc-radius:14px; --cc-radius-sm:10px; --cc-radius-xs:8px; --cc-pill:999px;
  --cc-shadow:0 10px 30px rgba(100,49,130,.07); --cc-shadow-soft:0 6px 18px rgba(100,49,130,.05); --cc-shadow-lift:0 14px 28px rgba(100,49,130,.12); --cc-shadow-dialog:0 24px 70px rgba(47,36,54,.28);
  /* Schrift */
  --cc-serif:"Cardo",Georgia,"Times New Roman",serif; --cc-sans:"Segoe UI",Arial,sans-serif;
  --cc-fs-xs:12px; --cc-fs-sm:13.5px; --cc-fs:15px; --cc-fs-lg:16px; --cc-fs-h3:20px; --cc-fs-h2:28px; --cc-fs-h1:clamp(30px,3.4vw,42px);
  /* Abstände, Bedienelemente */
  --cc-space-1:6px; --cc-space-2:10px; --cc-space-3:14px; --cc-space-4:18px; --cc-space-5:24px; --cc-card-pad:22px;
  --cc-control:44px; --cc-focus:3px solid var(--cc-plum);
  /* Aliase älterer Variablen (Layout, Warm, Embedded) */
  --cc-primary:var(--cc-plum); --cc-primary-soft:var(--cc-lilac-soft); --cc-green:var(--cc-ok); --cc-green-soft:var(--cc-ok-soft); --cc-blue:var(--cc-lilac-dark); --cc-blue-soft:var(--cc-lilac-soft);
  --cc-warm-line:var(--cc-line); --cc-warm-soft:var(--cc-soft);
  --ce-line:var(--cc-line); --ce-soft:var(--cc-soft); --ce-primary:var(--cc-plum); --ce-muted:var(--cc-muted); --ce-ink:var(--cc-ink);
  background:var(--cc-paper); color:var(--cc-ink); font-family:var(--cc-sans);
}
/* Eingebettete Bereiche: Variablen von portal.css auf das Token-Set legen (Gedenkseite ausgenommen). */
body.cc-embedded:not([data-portal=memorial]) { --primary:var(--cc-plum); --primary-dark:var(--cc-plum-dark); --gold:var(--cc-lilac); --line:var(--cc-line); --muted:var(--cc-muted); --ink:var(--cc-ink); --surface:#fff; --sage:var(--cc-lilac-dark); }

/* ---------- Grundlagen ---------- */
.customer-center #portal-app { max-width:1440px; margin:0 auto; padding:28px 24px; min-height:75vh; }
.cc-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; }
.cc-layout > .cc-sidebar svg { width:20px; height:20px; }
.cc-main { min-width:0; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) #portal-app a { color:var(--cc-plum-dark); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :focus-visible { outline:var(--cc-focus); outline-offset:3px; border-radius:6px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(input,select,textarea):focus-visible { outline-offset:2px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) hr, .cc-divider { height:1px; margin:18px 0; border:0; background:var(--cc-line); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) svg { flex:none; }

/* Abschnittstitel: Eyebrow + Serifen-Titel + Begleitsatz (wie in der Kopfkarte) */
.cc-eyebrow, .cc-section-heading > div > span, .cc-status h2 {
  display:block; margin:0; color:var(--cc-eyebrow); font:700 11px/1.4 var(--cc-sans); letter-spacing:.18em; text-transform:uppercase;
}
.cc-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.cc-heading h1 { font:400 var(--cc-fs-h1)/1.08 var(--cc-serif); margin:5px 0; color:var(--cc-ink); }
.cc-heading p, .cc-note { color:var(--cc-muted); font-size:var(--cc-fs-sm); line-height:1.55; }
.cc-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.cc-section-heading > div { min-width:0; }
.cc-section-heading h2 { margin:2px 0 5px; color:var(--cc-ink); font:400 var(--cc-fs-h2)/1.15 var(--cc-serif); overflow-wrap:anywhere; }
.cc-section-heading p { margin:0; color:var(--cc-muted); font-size:14.5px; line-height:1.55; }

/* ---------- Schaltflächen ---------- */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--cc-control); padding:9px 18px; box-sizing:border-box;
  border:1px solid var(--cc-line-strong); border-radius:12px; background:#fff; color:var(--cc-plum-dark);
  font:600 14.5px/1.3 var(--cc-sans); letter-spacing:0; text-decoration:none; cursor:pointer; box-shadow:none;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button svg { width:18px; height:18px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button:hover { background:var(--cc-soft); border-color:var(--cc-plum); color:var(--cc-plum-dark); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.button.primary, button[type=submit].button, button.primary) { background:var(--cc-plum); border-color:var(--cc-plum); color:#fff; box-shadow:0 8px 18px rgba(100,49,130,.2); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.button.primary, button[type=submit].button, button.primary):hover { background:var(--cc-plum-dark); border-color:var(--cc-plum-dark); color:#fff; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button.small, :is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button.compact { min-height:36px; padding:6px 13px; font-size:13px; border-radius:var(--cc-radius-sm); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button.small svg { width:15px; height:15px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.button:disabled, .button[aria-disabled=true], button:disabled) { opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:16px; }
.cc-text-button { display:inline-flex; align-items:center; gap:7px; padding:8px 0; border:0; background:transparent; color:var(--cc-plum-dark); font:600 13.5px/1.4 var(--cc-sans); text-align:left; cursor:pointer; }
.cc-text-button:hover { text-decoration:underline; text-underline-offset:3px; }
.cc-text-button svg { width:16px; height:16px; }
.cc-text-button svg:last-child, .cc-help-topics small svg { transform:rotate(180deg); }

/* ---------- Formulare ---------- */
/* :where() hält die Spezifität niedrig, damit Modul- und Bausteinregeln (z. B. select, Suchfeld) greifen. */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], .cc-auth input), select, textarea) {
  width:100%; min-width:0; max-width:100%; min-height:var(--cc-control); padding:10px 14px; box-sizing:border-box;
  border:1px solid var(--cc-line-strong); border-radius:var(--cc-radius-sm); background:#fff; color:var(--cc-ink);
  font:400 var(--cc-fs)/1.4 var(--cc-sans); outline:none; box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(input, select, textarea)::placeholder { color:#9a90a3; opacity:1; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :where(input:not([type=checkbox], [type=radio], [type=file], .cc-auth input), select, textarea):focus { border-color:var(--cc-plum); box-shadow:0 0 0 3px var(--cc-lilac-soft); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(input, select, textarea):disabled { background:var(--cc-soft); color:var(--cc-muted); cursor:not-allowed; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) textarea { min-height:110px; resize:vertical; line-height:1.5; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) select {
  appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5697' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px 18px;
}
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) select[multiple] { background-image:none; padding-right:14px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(input[type=date], input[type=time], input[type=datetime-local]) { padding-right:12px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) input::-webkit-calendar-picker-indicator { opacity:.65; cursor:pointer; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) input[type=search]::-webkit-search-cancel-button { cursor:pointer; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) input[type=file] {
  display:block; width:100%; min-width:0; max-width:100%; padding:8px; box-sizing:border-box; border:1px dashed var(--cc-line-strong); border-radius:var(--cc-radius-sm); background:var(--cc-soft); color:var(--cc-text); font:400 13.5px/1.4 var(--cc-sans); cursor:pointer;
}
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) input[type=file]::file-selector-button {
  margin-right:12px; padding:7px 14px; border:1px solid var(--cc-line-strong); border-radius:var(--cc-radius-xs); background:#fff; color:var(--cc-plum-dark); font:600 13px/1.3 var(--cc-sans); cursor:pointer;
}
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) input[type=file]:hover::file-selector-button { border-color:var(--cc-plum); background:var(--cc-lilac-soft); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(input[type=checkbox], input[type=radio]) { width:18px; height:18px; min-width:18px; margin:0; flex:0 0 18px; accent-color:var(--cc-plum); cursor:pointer; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(input[type=checkbox], input[type=radio]):disabled { cursor:not-allowed; }
/* Auswahlzeilen (Checkbox/Radio mit Text) */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.cc-check, .px-task, .px-check, .heir-check, .family-feedback-consent, .print-approval-consent, .proposal-mail-option, .cc-form label:has(> input[type=checkbox])) {
  display:flex !important; align-items:flex-start; gap:10px !important; margin:0; padding:0; color:var(--cc-ink); font:400 14.5px/1.5 var(--cc-sans); text-transform:none; letter-spacing:0; cursor:pointer;
}
:is(.cc-check, .px-task, .px-check, .heir-check, .family-feedback-consent, .print-approval-consent, .proposal-mail-option) > input { margin-top:3px; }
/* Beschriftungen, Felder, Feldgruppen */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :where(label:not(.family-slot, .family-scope-tile, .px-task, .px-check, .cc-check, .heir-check, .family-file-upload, .portal-id-upload, .family-feedback-consent, .print-approval-consent, .proposal-mail-option, .cc-auth-field), .field > label, .cc-form label, .cc-login label) { color:var(--cc-muted); font:600 13.5px/1.4 var(--cc-sans); letter-spacing:0; text-transform:none; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.cc-form label, .cc-login label, .cc-visibility label, [data-invite-result] label, .portal-expansion label, .px-dialog label, .family-feedback-field) { display:grid; gap:7px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .field { margin-top:12px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .field > label { display:block; margin-bottom:6px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .field > small { display:block; margin-top:6px; color:var(--cc-muted); font-size:var(--cc-fs-xs); line-height:1.45; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 18px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .form-grid .full { grid-column:1 / -1; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) fieldset { min-width:0; margin:14px 0; padding:14px 16px 16px; border:1px solid var(--cc-line); border-radius:12px; background:transparent; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) fieldset > legend { padding:0 8px; color:var(--cc-eyebrow); font:700 11px/1.4 var(--cc-sans); letter-spacing:.14em; text-transform:uppercase; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) fieldset > :is(.cc-check, .px-check, .heir-check) + :is(.cc-check, .px-check, .heir-check) { margin-top:10px; }
.cc-form, .cc-login form { display:grid; gap:16px; }
.cc-form { max-width:620px; }
.cc-form fieldset { margin:0; }
/* Datei-Ablagefelder */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload) { position:relative; min-height:82px; display:flex; align-items:center; gap:14px; padding:18px 20px; border:2px dashed var(--cc-line-strong); border-radius:12px; background:var(--cc-soft); color:var(--cc-text); cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400; transition:border-color .15s, background .15s; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload):hover { border-color:var(--cc-plum); background:var(--cc-lilac-soft); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload):focus-within { outline:var(--cc-focus); outline-offset:3px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload) input[type=file] { position:absolute; width:1px; height:1px; top:0; left:0; padding:0; border:0; opacity:0; pointer-events:none; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload) > span { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:12px; background:var(--cc-plum); color:#fff; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload) svg { width:20px; height:20px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload) strong { display:block; color:var(--cc-ink); font-size:14.5px; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.family-file-upload, .portal-id-upload) small { display:block; margin-top:3px; color:var(--cc-muted); font-size:var(--cc-fs-xs); }

body.customer-center .cc-auth-input input { width:100%; box-sizing:border-box; }

/* ---------- Karten, Listen ---------- */
.cc-card, .cc-login, .cc-priorities section, .cc-areas, .cc-help, .cc-dereg-summary { background:var(--cc-card); border:1px solid var(--cc-line); border-radius:var(--cc-radius-lg); box-shadow:var(--cc-shadow-soft); }
.cc-login { max-width:460px; margin:40px auto; padding:34px; box-sizing:border-box; }
.cc-login h1 { margin:0 0 6px; color:var(--cc-ink); font:400 32px/1.15 var(--cc-serif); }
.cc-members { margin:0 0 28px; padding:0; list-style:none; }
.cc-members li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--cc-line); }
.cc-members li > div { min-width:0; }
.cc-members strong { font-size:var(--cc-fs); color:var(--cc-ink); }
.cc-members span, .cc-members small { display:block; margin-top:4px; color:var(--cc-muted); font-size:var(--cc-fs-sm); overflow-wrap:anywhere; }
.cc-members li > .button { flex:none; }
.cc-members li:has(> .button + .button) { flex-wrap:wrap; }
.cc-visibility { margin-bottom:20px; }
.cc-visibility form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.cc-visibility form > label { flex:1 1 220px; max-width:320px; }
.cc-visibility [role=alert] { width:100%; }

/* ---------- Reiter, Chips, Abzeichen ---------- */
.cc-chip, .cc-pill { display:inline-flex; align-items:center; gap:6px; min-height:0; padding:4px 11px; border:1px solid var(--cc-line-strong); border-radius:var(--cc-pill); background:#fff; color:var(--cc-plum-dark); font:600 12.5px/1.4 var(--cc-sans); }
.cc-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border:1px solid var(--cc-line-strong); border-radius:var(--cc-pill); background:#fff; color:var(--cc-plum-dark); font:600 12.5px/1.4 var(--cc-sans); }
.cc-badge svg { width:14px; height:14px; }
.cc-badge-staff { background:var(--cc-lilac-soft); }
/* Statusabzeichen: neutral (Flieder), erledigt (Grün), Handlung nötig (Bernstein), abgelehnt (Rot) */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .status { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--cc-pill); background:var(--cc-lilac-soft); color:var(--cc-plum-dark); font:700 12px/1.4 var(--cc-sans); letter-spacing:0; text-transform:none; white-space:nowrap; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.status.success, .status.done, .cc-tile-status.done) { background:var(--cc-ok-soft); color:var(--cc-ok); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.status.warning, .status.open, .cc-tile-status.open) { background:var(--cc-warn-soft); color:var(--cc-warn); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.status.danger, .status.declined) { background:var(--cc-danger-soft); color:var(--cc-danger); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.status.purple, .status.neutral, .status.muted) { background:var(--cc-lilac-soft); color:var(--cc-plum-dark); }
.cc-count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 7px; border-radius:var(--cc-pill); background:var(--cc-plum); color:#fff; font:700 11.5px/1 var(--cc-sans); }

/* ---------- Hinweis-, Fehler-, Erfolgskästen ---------- */
.cc-notice, .cc-preview-notice, .staff-preview-notice, :is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .info-box {
  display:flex; align-items:flex-start; gap:10px; margin:0 0 18px; padding:12px 16px; border:0; border-left:3px solid var(--cc-lilac); border-radius:12px; background:var(--cc-soft); color:var(--cc-text); font:400 14px/1.55 var(--cc-sans);
}
:is(.cc-notice, .cc-preview-notice, .staff-preview-notice) > svg, :is(.cc-notice, .cc-preview-notice, .staff-preview-notice) > span:first-child { width:18px; height:18px; flex:none; margin-top:2px; color:var(--cc-plum); }
:is(.cc-notice, .cc-preview-notice, .staff-preview-notice) > span:first-child svg { width:18px; height:18px; }
:is(.cc-notice, .cc-preview-notice, .staff-preview-notice) strong { display:block; margin-bottom:2px; color:var(--cc-ink); font-size:14.5px; }
:is(.cc-notice, .cc-preview-notice, .staff-preview-notice) p { margin:0; }
.cc-notice.success, .cc-notice.is-success { border-left-color:var(--cc-ok); background:var(--cc-ok-soft); color:var(--cc-ok); }
.cc-notice.warning, .cc-notice.is-warning { border-left-color:var(--cc-warn); background:var(--cc-warn-soft); color:var(--cc-warn); }
.cc-notice.error, .cc-notice.is-error { border-left-color:var(--cc-danger); background:var(--cc-danger-soft); color:var(--cc-danger); }
/* Formularfehler (leere Meldungen bleiben unsichtbar) */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(p, div)[role=alert]:not(:empty):not(.cc-auth *) { margin:0; padding:10px 14px; border-left:3px solid var(--cc-danger); border-radius:12px; background:var(--cc-danger-soft); color:var(--cc-danger); font:600 13.5px/1.5 var(--cc-sans); overflow-wrap:anywhere; }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(p, div)[role=alert]:empty:not(.cc-auth *) { display:none; }

/* ---------- Leerzustände, Ladeanzeige ---------- */
.cc-empty, :is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) :is(.music-empty, .family-empty, .empty) { margin:12px 0; padding:14px 16px; border-left:3px solid var(--cc-lilac); border-radius:12px; background:var(--cc-soft); color:var(--cc-text); font:400 14.5px/1.6 var(--cc-sans); max-width:none; }
.cc-empty-complete { border-left-color:var(--cc-ok); background:var(--cc-ok-soft); color:var(--cc-ok); }
.cc-loading, .cc-frame-loading, .cc-dereg-summary p[role=status], .cc-contact p[role=status], [data-condolence-entries][role=status] {
  display:flex; align-items:center; gap:12px; min-height:56px; margin:0; padding:14px 18px; border-radius:12px; background:var(--cc-soft); color:var(--cc-muted); font:400 14px/1.5 var(--cc-sans);
}
:is(.cc-loading, .cc-frame-loading, .cc-dereg-summary p[role=status], .cc-contact p[role=status], [data-condolence-entries][role=status])::before { content:""; width:18px; height:18px; flex:none; border:2px solid var(--cc-line-strong); border-top-color:var(--cc-plum); border-radius:50%; animation:cc-spin .9s linear infinite; }
@keyframes cc-spin { to { transform:rotate(360deg); } }

/* ---------- Dialoge ---------- */
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) dialog { border:0; border-radius:var(--cc-radius-lg); background:var(--cc-card); color:var(--cc-ink); box-shadow:var(--cc-shadow-dialog); }
:is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) dialog::backdrop { background:rgba(47,36,54,.45); backdrop-filter:blur(2px); }
dialog.cc-login { width:min(460px, calc(100vw - 24px)); margin:auto; padding:28px; }
dialog.cc-login h2 { margin:0 0 16px; color:var(--cc-ink); font:400 26px/1.2 var(--cc-serif); }
dialog.cc-login .cc-form { gap:12px; }
dialog.cc-login .cc-form .button { width:100%; }

/* ---------- Toast ---------- */
body.customer-center .portal-toast { right:18px; bottom:18px; max-width:360px; padding:13px 16px; border:0; border-left:4px solid var(--cc-lilac) !important; border-radius:14px; background:var(--cc-plum-deep); color:#fff; font:500 14px/1.5 var(--cc-sans); box-shadow:0 16px 40px rgba(47,36,54,.3); }
body.customer-center .portal-toast.error { border-left-color:#e08a8a !important; }

/* ---------- Kunden-Center-Hülle: Rahmen, Vorschau, Druckstudio ---------- */
.customer-center .cc-preview-notice { display:flex; }
.cc-portal-frame { width:100%; min-height:900px; height:calc(100vh - 240px); border:0; display:block; background:#fff; }
body.cc-embedded > .portal-header, body.cc-embedded > footer, body.cc-embedded .portal-hero { display:none !important; }
body.cc-embedded #portal-app { max-width:none; margin:0; padding:0; }
body.cc-embedded { background:transparent; }
body.cc-embedded .portal-content { padding:12px; gap:20px; }
body.cc-print-studio-open { overflow:hidden; }
body.cc-print-studio-open .cc-portal-frame { position:fixed; inset:0; z-index:3000; width:100vw; height:100dvh; min-height:0; margin:0; border:0; border-radius:0; background:white; }

@media (max-width:850px) {
  .customer-center #portal-app { padding:18px 12px; }
  .cc-members li { align-items:flex-start; flex-direction:column; }
  .cc-members li > .button { width:100%; }
  .cc-portal-frame { min-height:800px; }
}
@media (max-width:640px) {
  :is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .form-grid { grid-template-columns:minmax(0,1fr); }
  :is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button-row { flex-direction:column; }
  :is(body.customer-center, body.cc-embedded:not([data-portal=memorial])) .button-row .button { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.customer-center, body.cc-embedded) * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}