:root{
  --ink:#1c1a16; --ink-soft:#5c584d; --paper:#f7f5f0; --surface:#ffffff;
  --border:#e7e0d1; --accent:#16283f; --accent-ink:#ffffff; --wa:#1f6f5c; --wa-soft:#e3ede7;
  --ok:#2e7a4d; --ok-soft:#e5f1ea; --danger:#a13a2e; --danger-soft:#f5e6e2;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Public Sans', system-ui, sans-serif;}
a{color:var(--accent); text-decoration-color:var(--border);}
a:hover{color:#0f1a2b;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; margin:0;}
.wrap{max-width:1120px; margin:0 auto; padding:0 40px;}
.wrap-narrow{max-width:640px;}
.nav{border-bottom:1px solid var(--border); background:var(--paper);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:84px;}
.brand{font-family:'Fraunces'; font-weight:600; font-size:1.3rem; letter-spacing:-0.01em; color:var(--ink); text-decoration:none;}
.brand .dot{color:var(--accent);}
.step-label{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; color:var(--ink-soft);}
.eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); margin:0 0 14px;}
.progress{display:flex; gap:8px; margin-bottom:28px;}
.progress > div{flex:1; height:4px; border-radius:2px; background:var(--border);}
.progress > div.done{background:var(--accent);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Public Sans'; font-weight:600; font-size:0.95rem; padding:13px 24px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:transform 150ms cubic-bezier(0.23,1,0.32,1), filter 150ms ease, background-color 150ms ease;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-whatsapp{background:var(--wa); color:#fff;}
.btn:disabled{opacity:0.55; cursor:not-allowed;}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{filter:brightness(0.94);}
  .btn-ghost:hover{background:#f1ece0;}
  .btn-whatsapp:hover{filter:brightness(0.93);}
}
.field{border:1px solid var(--border); border-radius:8px; padding:12px 14px; background:var(--surface); font-size:0.94rem; width:100%; font-family:inherit; color:var(--ink);}
.field:focus{outline:2px solid var(--accent); outline-offset:1px;}
label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:32px;}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--ok-soft); color:var(--ok); font-size:0.8rem; font-weight:600; padding:6px 12px; border-radius:20px;}
.error-box{background:var(--danger-soft); color:var(--danger); border-radius:8px; padding:10px 14px; font-size:0.85rem; margin-top:14px; display:none;}
.error-box.show{display:block;}
.dropzone{border:1.5px dashed var(--border); border-radius:12px; padding:28px; display:flex; flex-direction:column; align-items:center; gap:10px; background:#fafaf8; text-align:center; cursor:pointer;}
.dropzone:hover{background:#f3f1ea;}
.file-row{margin-top:12px; display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--surface);}
.avatar{border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-weight:600; flex-shrink:0; overflow:hidden;}
.avatar img{width:100%; height:100%; object-fit:cover;}
.footer-note{text-align:center; color:var(--ink-soft); font-size:0.85rem; margin:36px 0 0;}

/* =====================================================================
   Kundenbereich-Shell (Dashboard, Meine Infos, Kalender, Rechnungen,
   Einstellungen, WhatsApp-Bot) — Sidebar-Layout, eigene Farbrollen,
   scoped unter .shell-app damit die restliche (Onboarding-/Marketing-)
   Seite unverändert bleibt. Unterstützt Light/Dark über [data-theme] auf
   .shell-app selbst (siehe shell.js), unabhängig vom Rest der Site.
   ===================================================================== */
.shell-app{
  --s-page:        var(--paper);
  --s-surface:     var(--surface);
  --s-surface-2:   #f2efe6;
  --s-border:      var(--border);
  --s-ink:         var(--ink);
  --s-ink-soft:    var(--ink-soft);
  --s-ink-muted:   #8c8676;
  --s-accent:      var(--accent);
  --s-accent-ink:  var(--accent-ink);
  --s-wa:          var(--wa);
  --s-wa-soft:     var(--wa-soft);
  --s-good:        var(--ok);
  --s-good-bg:     var(--ok-soft);
  --s-warning:     #b9790f;
  --s-warning-bg:  #fdf1dd;
  --s-critical:    var(--danger);
  --s-critical-bg: var(--danger-soft);
  --s-gold:        #8a6d00;
  --s-gold-bg:     #fbf3d9;
  --s-lock-bg:     #f3f1eb;
  --s-lock-ink:    #7a6a3a;
  --s-shadow:      0 1px 2px rgba(11,11,11,0.04), 0 8px 24px rgba(11,11,11,0.06);
  display:flex; min-height:100vh; background:var(--s-page); color:var(--s-ink);
}
.shell-app[data-theme="dark"]{
  --s-page:        #0d0d0d;
  --s-surface:     #17171a;
  --s-surface-2:   #1c1c1f;
  --s-border:      rgba(255,255,255,0.10);
  --s-ink:         #ffffff;
  --s-ink-soft:    #c3c2b7;
  --s-ink-muted:   #8b8a84;
  --s-accent:      #4d6b93;
  --s-accent-ink:  #ffffff;
  --s-wa:          #3fa383;
  --s-wa-soft:     rgba(63,163,131,0.14);
  --s-good:        #33c26a;
  --s-good-bg:     rgba(51,194,106,0.14);
  --s-warning:     #e0a53a;
  --s-warning-bg:  rgba(224,165,58,0.14);
  --s-critical:    #e66767;
  --s-critical-bg: rgba(230,103,103,0.14);
  --s-gold:        #e0c34a;
  --s-gold-bg:     rgba(224,195,74,0.14);
  --s-lock-bg:     #1f1f21;
  --s-lock-ink:    #c9bd8f;
  --s-shadow:      0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
}

.s-sidebar{ width:236px; flex-shrink:0; background:var(--s-surface); border-right:1px solid var(--s-border); display:flex; flex-direction:column; padding:22px 16px; }
.s-brand{ font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; padding:6px 10px 22px; color:var(--s-ink); text-decoration:none; display:block; }
.s-brand .dot{ color:var(--s-wa); }
.s-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.s-nav a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--s-ink-soft); font-size:0.88rem; font-weight:500; padding:9px 10px; border-radius:8px; }
.s-nav a svg{ width:16px; height:16px; flex-shrink:0; }
.s-nav a.active{ background:var(--s-accent); color:var(--s-accent-ink); }
.s-nav a:not(.active):hover{ background:var(--s-surface-2); }
.s-sidebar-foot{ border-top:1px solid var(--s-border); padding-top:14px; display:flex; align-items:center; gap:10px; }
.s-avatar-sm{ width:32px; height:32px; border-radius:8px; background:var(--s-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:600; flex-shrink:0; overflow:hidden; }
.s-avatar-sm img{ width:100%; height:100%; object-fit:cover; }
.s-who{ font-size:0.8rem; line-height:1.3; }
.s-who b{ display:block; font-weight:600; }
.s-who span{ color:var(--s-ink-muted); font-size:0.72rem; }
.s-theme-toggle{ margin-left:auto; width:28px; height:28px; border-radius:7px; border:1px solid var(--s-border); background:var(--s-surface-2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--s-ink-soft); flex-shrink:0; }
.s-theme-toggle svg{ width:14px; height:14px; }

.s-main{ flex:1; min-width:0; padding:34px 42px 60px; }
.s-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; gap:24px; flex-wrap:wrap; }
.s-header h1{ font-family:'Fraunces', serif; font-weight:600; font-size:1.7rem; margin:0 0 6px; }
.s-header p{ margin:0; color:var(--s-ink-soft); font-size:0.92rem; max-width:52ch; line-height:1.5; }
.s-chip{ flex-shrink:0; background:var(--s-wa-soft); color:var(--s-wa); border-radius:10px; padding:9px 14px; font-size:0.78rem; font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.s-chip.warn{ background:var(--s-warning-bg); color:var(--s-warning); }
.s-chip.critical{ background:var(--s-critical-bg); color:var(--s-critical); }

.s-stat-row{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:14px; margin-bottom:26px; }
.s-stat-card{ background:var(--s-surface); border:1px solid var(--s-border); border-radius:14px; padding:20px; box-shadow:var(--s-shadow); }
.s-stat-hero{ display:flex; flex-direction:column; justify-content:center; }
.s-stat-label{ font-size:0.76rem; color:var(--s-ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px; }
.s-stat-value{ font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:-0.01em; font-family:'Fraunces', serif; }
.s-stat-value.small{ font-size:1.4rem; font-family:inherit; font-weight:700; }
.s-stat-sub{ margin-top:8px; font-size:0.8rem; color:var(--s-ink-soft); display:flex; align-items:center; gap:6px; }
.s-stat-sub.good{ color:var(--s-good); }
.s-stat-sub.warn{ color:var(--s-warning); }
.s-stat-card .s-bar{ margin-top:12px; height:6px; border-radius:4px; background:var(--s-surface-2); overflow:hidden; }
.s-stat-card .s-bar > div{ height:100%; background:var(--s-wa); border-radius:4px; }

.s-achievements{ background:var(--s-surface); border:1px solid var(--s-border); border-radius:14px; box-shadow:var(--s-shadow); padding:16px 20px; margin-bottom:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.s-achievements .s-a-label{ font-size:0.72rem; color:var(--s-ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; flex-shrink:0; }
.s-a-chip{ display:inline-flex; align-items:center; gap:8px; border-radius:99px; padding:6px 13px 6px 10px; font-size:0.8rem; font-weight:600; }
.s-a-chip.done{ background:var(--s-gold-bg); color:var(--s-gold); }
.s-a-chip.todo{ background:var(--s-surface-2); color:var(--s-ink-muted); }
.s-a-chip .s-ico{ font-size:1rem; line-height:1; }

.s-panel{ background:var(--s-surface); border:1px solid var(--s-border); border-radius:14px; box-shadow:var(--s-shadow); margin-bottom:26px; overflow:hidden; }
.s-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--s-border); }
.s-panel-head h2{ font-size:1rem; font-weight:600; margin:0; font-family:'Fraunces', serif; }
.s-panel-body{ padding:22px; }
.s-panel table{ width:100%; border-collapse:collapse; }
.s-panel th{ text-align:left; font-size:0.72rem; color:var(--s-ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; padding:11px 22px; border-bottom:1px solid var(--s-border); }
.s-panel td{ padding:13px 22px; font-size:0.86rem; border-bottom:1px solid var(--s-border); vertical-align:middle; color:var(--s-ink); }
.s-panel tr:last-child td{ border-bottom:none; }
.s-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:99px; font-size:0.74rem; font-weight:600; }
.s-badge svg{ width:11px; height:11px; }
.s-badge.good{ background:var(--s-good-bg); color:var(--s-good); }
.s-badge.warn{ background:var(--s-warning-bg); color:var(--s-warning); }
.s-badge.muted{ background:var(--s-surface-2); color:var(--s-ink-muted); }
.s-empty{ padding:32px 22px; text-align:center; color:var(--s-ink-muted); font-size:0.86rem; }

.s-card{ background:var(--s-surface); border:1px solid var(--s-border); border-radius:14px; padding:26px; box-shadow:var(--s-shadow); margin-bottom:20px; }
.s-card h2{ font-size:1.05rem; margin:0 0 6px; font-family:'Fraunces', serif; }
.s-card > p.s-desc{ color:var(--s-ink-soft); font-size:0.88rem; margin:0 0 20px; line-height:1.55; }
.s-field{ border:1px solid var(--s-border); border-radius:8px; padding:11px 13px; background:var(--s-page); font-size:0.9rem; width:100%; font-family:inherit; color:var(--s-ink); }
.s-field:focus{ outline:2px solid var(--s-accent); outline-offset:1px; }
.s-label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--s-ink); }
.s-lock-note{ display:flex; align-items:flex-start; gap:9px; background:var(--s-lock-bg); color:var(--s-lock-ink); border-radius:10px; padding:12px 14px; font-size:0.8rem; line-height:1.5; margin-top:16px; }
.s-lock-note svg{ flex-shrink:0; margin-top:1px; width:15px; height:15px; }

.s-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Public Sans'; font-weight:600; font-size:0.88rem; padding:11px 18px; border-radius:8px; border:1px solid transparent; cursor:pointer; background:var(--s-accent); color:var(--s-accent-ink); }
.s-btn.ghost{ background:transparent; color:var(--s-ink); border-color:var(--s-border); }
.s-btn.wa{ background:var(--s-wa); color:#fff; }
.s-btn:disabled{ opacity:0.55; cursor:not-allowed; }

@media (max-width: 980px){
  .s-stat-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .s-sidebar{ display:none; }
  .s-main{ padding:24px 20px 50px; }
}