/* Kunden-Center · Gestaltung „Lebensbuch“: warmes Papier, Aubergine, Flieder, Serife (Cardo) nur für Titel, ruhige Karten
   mit gleichmäßigen Abständen. Alle Werte aus dem Token-Set in customer-center.css (--cc-*); ergänzt customer-center-layout.css. */
body.customer-center[data-experience="portal"]>.portal-header { background:rgba(255,253,254,.92); border-top:0; border-bottom:1px solid var(--cc-line); backdrop-filter:blur(10px); }
body.customer-center .portal-context strong { font-family:var(--cc-serif); font-weight:400; font-size:18px; color:var(--cc-plum-dark); }
body.customer-center .portal-context span { color:var(--cc-muted); }
.customer-center #portal-app { max-width:1140px; padding:26px 24px 48px; }

/* Kopfkarte */
body.customer-center .cc-heading { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) 120px minmax(280px,1fr); gap:20px 28px; align-items:center; margin:0 0 24px; padding:26px 30px; border:1px solid var(--cc-line); border-left:0; border-radius:var(--cc-radius-lg); background:var(--cc-card); box-shadow:var(--cc-shadow); overflow:hidden; }
body.customer-center .cc-heading::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,var(--cc-plum),var(--cc-lilac)); }
body.customer-center .cc-heading-plain { grid-template-columns:1fr; }
body.customer-center .cc-heading-text { min-width:0; }
body.customer-center .cc-heading h1 { margin:6px 0 8px; color:var(--cc-ink); font:400 var(--cc-fs-h1)/1.08 var(--cc-serif); letter-spacing:-.005em; overflow-wrap:anywhere; }
body.customer-center .cc-heading-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 12px; color:var(--cc-muted); font-size:var(--cc-fs-sm); }
body.customer-center .cc-heading-meta > span:first-child { letter-spacing:.06em; font-weight:600; }
body.customer-center .cc-heading-lead { margin:0; max-width:48ch; color:var(--cc-text); font-size:15.5px; line-height:1.6; }
body.customer-center .cc-logout { margin-top:10px; padding:6px 0; color:var(--cc-muted); font-weight:600; }
body.customer-center .cc-logout:hover { color:var(--cc-plum-dark); }
body.customer-center .cc-heading-symbol { width:120px; height:120px; justify-self:center; opacity:.9; filter:saturate(.9); }
body.customer-center .cc-status { min-width:0; padding:18px 18px 12px; border-radius:var(--cc-radius); background:linear-gradient(180deg,#f7f1fa,#fbf8fc); border:1px solid var(--cc-line); }
body.customer-center .cc-status h2 { margin:0 0 10px; }
body.customer-center .cc-status-step { display:grid; grid-template-columns:34px minmax(0,1fr) 16px; gap:10px; align-items:center; width:100%; margin:0 0 8px; padding:10px 12px; border:1px solid transparent; border-radius:12px; background:#fff; color:var(--cc-ink); text-align:left; font:inherit; cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; }
body.customer-center .cc-status-step:hover { border-color:var(--cc-line-strong); transform:translateY(-1px); box-shadow:0 8px 18px rgba(100,49,130,.10); }
body.customer-center .cc-status-step > svg:first-child { width:34px; height:34px; padding:8px; border-radius:var(--cc-radius-sm); background:var(--cc-lilac-soft); color:var(--cc-plum); }
body.customer-center .cc-status-step > svg:last-child { width:16px; height:16px; color:var(--cc-plum); transform:rotate(180deg); }
body.customer-center .cc-status-step span { display:grid; gap:1px; min-width:0; }
body.customer-center .cc-status-step small { color:var(--cc-muted); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
body.customer-center .cc-status-step strong { font-size:var(--cc-fs); line-height:1.35; overflow-wrap:anywhere; }
body.customer-center .cc-status-step em { color:var(--cc-muted); font-style:normal; font-size:12.5px; line-height:1.45; }
body.customer-center .cc-status-calm { cursor:default; grid-template-columns:34px minmax(0,1fr); }
body.customer-center .cc-status-calm:hover { transform:none; box-shadow:none; border-color:transparent; }
body.customer-center .cc-status-calm > svg:first-child { background:var(--cc-ok-soft); color:var(--cc-ok); }

/* Seitenleiste */
body.customer-center .cc-layout { grid-template-columns:220px minmax(0,1fr); gap:28px; }
body.customer-center .cc-sidebar { top:16px; padding-right:0; border-right:0; }
body.customer-center .cc-sidebar nav { gap:4px; }

/* Inhalt */
body.customer-center .cc-section-heading { margin-bottom:16px; }
body.customer-center .cc-priorities section, body.customer-center .cc-dereg-summary, body.customer-center .cc-areas { padding:var(--cc-card-pad); }
body.customer-center .cc-text-button { color:var(--cc-plum-dark); }
body.customer-center .cc-task-list li>.cc-text-button { border-radius:var(--cc-radius-sm); border-color:var(--cc-line); }
body.customer-center .cc-contact h3 { color:var(--cc-plum-dark); }
body.customer-center .cc-contact .button { min-height:46px; font-size:var(--cc-fs); }

/* Bereiche als Kacheln */
body.customer-center .cc-areas { margin-top:24px; }
body.customer-center .cc-areas>header { display:block; }
body.customer-center .cc-areas>header p { margin:4px 0 0; color:var(--cc-muted); font-size:14px; }
body.customer-center .cc-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
body.customer-center .cc-tile { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; min-height:172px; padding:18px 18px 16px; border:1px solid var(--cc-line); border-radius:var(--cc-radius); background:#fff; color:var(--cc-ink); text-align:left; font:inherit; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s; }
body.customer-center .cc-tile:hover, body.customer-center .cc-tile:focus-visible { transform:translateY(-3px); border-color:var(--cc-line-strong); box-shadow:var(--cc-shadow-lift); }
body.customer-center .cc-tile-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--cc-lilac-soft); color:var(--cc-plum); }
body.customer-center .cc-tile-icon svg { width:22px; height:22px; }
body.customer-center .cc-tile-text { display:grid; gap:5px; min-width:0; }
body.customer-center .cc-tile-text strong { font:600 var(--cc-fs-lg)/1.35 var(--cc-sans); color:var(--cc-ink); }
body.customer-center .cc-tile-text small { color:var(--cc-muted); font-size:var(--cc-fs-sm); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.customer-center .cc-tile-status { justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--cc-pill); background:var(--cc-soft); color:var(--cc-text); font-size:12.5px; font-weight:600; }
body.customer-center .cc-tile-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--cc-lilac); }
body.customer-center .cc-tile-status.open { background:var(--cc-warn-soft); color:var(--cc-warn); } body.customer-center .cc-tile-status.open::before { background:var(--cc-warn); }
body.customer-center .cc-tile-status.done { background:var(--cc-ok-soft); color:var(--cc-ok); } body.customer-center .cc-tile-status.done::before { background:var(--cc-ok); }
body.customer-center .cc-tile-status.muted { background:var(--cc-soft); color:var(--cc-muted); } body.customer-center .cc-tile-status.muted::before { background:#b8b0c0; }
body.customer-center .cc-tile:hover strong { color:var(--cc-plum-dark); }

/* Hilfe: vier Schritte in einer Zeile */
body.customer-center .cc-help { margin-top:24px; padding:var(--cc-card-pad); display:grid; gap:16px; }
body.customer-center .cc-help header h3 { margin:0 0 4px; font:400 24px/1.2 var(--cc-serif); }
body.customer-center .cc-help header p { margin:0; color:var(--cc-muted); font-size:14px; }
body.customer-center .cc-help-steps { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:none; }
body.customer-center .cc-help-steps li { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; padding:16px; border-radius:12px; background:var(--cc-soft); }
body.customer-center .cc-help-steps li>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--cc-plum); color:#fff; font:400 16px/1 var(--cc-serif); }
body.customer-center .cc-help-steps strong { display:block; font-size:var(--cc-fs); margin-bottom:4px; color:var(--cc-ink); }
body.customer-center .cc-help-steps p { margin:0; font-size:var(--cc-fs-sm); line-height:1.55; color:var(--cc-text); }
body.customer-center .cc-help-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body.customer-center .cc-help-topics a { display:grid; gap:6px; padding:16px 18px; border:1px solid var(--cc-line); border-radius:12px; background:#fff; color:inherit; text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s; }
body.customer-center .cc-help-topics a:hover, body.customer-center .cc-help-topics a:focus-visible { transform:translateY(-2px); box-shadow:0 12px 26px rgba(100,49,130,.10); border-color:var(--cc-line-strong); }
body.customer-center .cc-help-topics strong { font-size:var(--cc-fs); }
body.customer-center .cc-help-topics span { font-size:var(--cc-fs-sm); line-height:1.5; color:var(--cc-muted); }
body.customer-center .cc-help-topics small { display:inline-flex; align-items:center; gap:5px; color:var(--cc-plum-dark); font-weight:600; }
body.customer-center .cc-help-topics small svg { width:14px; height:14px; }
body.customer-center .cc-help-note { display:flex; gap:10px; align-items:flex-start; margin:0; padding:14px 16px; border-left:3px solid var(--cc-lilac); border-radius:12px; background:var(--cc-soft); color:var(--cc-text); font-size:var(--cc-fs-sm); line-height:1.55; }
body.customer-center .cc-help-note svg { width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--cc-plum); }

/* Anmeldung, Formulare, eingebettete Bereiche */
body.customer-center .cc-login { border-top:0; box-shadow:0 30px 70px rgba(100,49,130,.14); }
body.customer-center .cc-login-intro { margin:6px 0 22px; color:var(--cc-text); font-size:var(--cc-fs); line-height:1.65; }
body.customer-center .cc-login input { min-height:46px; font-size:16px; }
body.customer-center .cc-login .button { min-height:48px; font-size:16px; }
body.customer-center .cc-frame-loading { min-height:120px; }

@media (max-width:1050px) {
  body.customer-center .cc-heading { grid-template-columns:minmax(0,1fr) minmax(260px,.9fr); }
  body.customer-center .cc-heading-symbol { display:none; }
  body.customer-center .cc-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  body.customer-center .cc-help-steps { grid-template-columns:1fr 1fr; }
  body.customer-center .cc-help-topics { grid-template-columns:1fr; }
  body.customer-center .cc-layout { grid-template-columns:minmax(0,1fr); }
  body.customer-center .cc-sidebar { position:static; }
}
@media (max-width:650px) {
  .customer-center #portal-app { padding:16px 16px 32px; }
  body.customer-center .cc-heading { grid-template-columns:1fr; gap:14px; padding:20px 18px 18px 22px; margin-bottom:18px; border-radius:var(--cc-radius); }
  body.customer-center .cc-heading h1 { font-size:28px; }
  body.customer-center .cc-heading-lead { font-size:14.5px; }
  body.customer-center .cc-status { padding:14px 14px 8px; }
  body.customer-center .cc-tiles { grid-template-columns:1fr; gap:10px; }
  body.customer-center .cc-tile { min-height:0; grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto auto; gap:6px 14px; padding:14px; }
  body.customer-center .cc-tile-icon { grid-row:1 / span 2; }
  body.customer-center .cc-tile-text small { -webkit-line-clamp:2; }
  body.customer-center .cc-tile-status { grid-column:2; }
  body.customer-center .cc-help { padding:18px; }
  body.customer-center .cc-help-steps { grid-template-columns:1fr; }
  body.customer-center .cc-summary button strong { font-size:26px; }
  body.customer-center .cc-priorities section, body.customer-center .cc-areas, body.customer-center .cc-dereg-summary { padding:16px; border-radius:var(--cc-radius); }
}
@media (prefers-reduced-motion: reduce) {
  body.customer-center .cc-tile, body.customer-center .cc-status-step, body.customer-center .cc-summary button, body.customer-center .cc-help-topics a { transition:none; }
}