/* BetreuungsDesk Design 2.7 – Petrol, helle Seitenleiste, Manrope. Wird NACH style.css, post-enterprise.css und theme.css geladen. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),url("/fonts/manrope-latin-wght-normal.woff2") format("woff2")}
:root,html[data-theme="light"]{
  --bg:#f4f5f7;--p:#ffffff;--ink:#1a1d22;--m:#59616d;--muted:#59616d;--line:#e1e4e9;--blue:#0b6874;
  --side:#eceef2;--head:#ffffff;--hover:#f0f2f5;--accent:#0b6874;--accentSoft:rgba(11,104,116,.12);--pop:#ffffff;
  --shadow:0 18px 50px rgba(20,25,35,.16);--onaccent:#ffffff;--radius:16px;
}
html[data-theme="dark"]{
  --bg:#2c2f34;--p:#35393f;--ink:#eef0f3;--m:#b4bac3;--muted:#b4bac3;--line:#454a52;--blue:#6fd0da;
  --side:#272a2e;--head:#33363c;--hover:#3e434a;--accent:#6fd0da;--accentSoft:rgba(111,208,218,.16);--pop:#3a3e45;
  --shadow:0 18px 50px rgba(0,0,0,.35);--onaccent:#06292d;
}
html body{font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg)!important;color:var(--ink)!important}
button,input,select,textarea{font-family:inherit}
a{color:var(--accent)}

/* ---------- Rahmen: Kopfleiste oben, Seitenleiste links ---------- */
.app{display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
.appbar{grid-column:1/-1;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--head);border-bottom:1px solid var(--line)}
.appbar-brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;cursor:pointer;color:var(--ink);flex:0 0 auto;border-radius:10px}
.brand-tile{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.brand-tile img{width:34px;height:34px;object-fit:contain}
.brand-word{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}.brand-word span{color:var(--accent)}
.appbar-search{position:relative;flex:1 1 260px;max-width:560px;margin:0 auto}
.appbar-search .search-go{position:absolute;left:2px;top:2px;width:36px;height:36px;border:0;background:transparent;border-radius:8px;color:var(--m);display:flex;align-items:center;justify-content:center;cursor:pointer}.appbar-search .search-go:hover{background:var(--hover);color:var(--accent)}
.appbar-search input{width:100%;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--bg)!important;color:var(--ink)!important;padding:0 14px 0 38px;font-size:15px;min-width:0!important}
.appbar-search input::placeholder{color:var(--m)}
.appbar .bd-icon,.appbar-actions .bd-icon{display:none}
.appbar-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.ib{width:44px;height:44px;border:0;background:transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent)}
.ib:hover,.ib[aria-expanded="true"]{background:var(--hover)}
.ib .avatar{width:36px;height:36px;border-radius:50%;background:var(--accentSoft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.ib:focus-visible,.nav button:focus-visible,.tile:focus-visible,.menuitem:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#themeToggle .ico-sun{display:none}html[data-theme="dark"] #themeToggle .ico-sun{display:block}html[data-theme="dark"] #themeToggle .ico-moon{display:none}
.popover{position:absolute;top:100%;margin-top:6px;background:var(--pop);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;z-index:60}
.popover.hidden{display:none!important}
#menuNew{right:116px;width:290px}#menuApps{right:64px;width:420px;max-width:calc(100vw - 24px);padding:18px;border-radius:18px}#menuProfile{right:12px;width:260px}
.pop-title{font-size:12px;font-weight:800;color:var(--m);padding:6px 10px 8px;text-transform:uppercase;letter-spacing:.06em}
.menuitem{width:100%;min-height:42px;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;gap:12px;padding:0 10px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.menuitem:hover{background:var(--accentSoft)}
.menuitem .chip{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tile{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:8px 4px;border-radius:14px;position:relative;color:var(--ink)}
.tile:hover{background:var(--hover)}
.tile .tile-ico{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.tile .tile-ico svg{width:28px;height:28px}
.tile .tile-label{font-size:13px;font-weight:600;color:var(--m);text-align:center;line-height:1.2}
.tile .tile-badge{position:absolute;top:2px;right:8px;min-width:22px;height:22px;border-radius:11px;background:#c62828;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--pop)}
.tile.hidden{display:none!important}
.tiles.big{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.tiles.big .tile-ico{width:64px;height:64px;border-radius:17px}.tiles.big .tile-ico svg{width:30px;height:30px}.tiles.big .tile-label{font-size:14px;color:var(--ink)}.tiles.big .tile-badge{border-color:var(--p);right:calc(50% - 40px)}
.pop-sep{border-top:1px solid var(--line);margin:12px 0 8px}
.pop-who{padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}.pop-who #meName{font-weight:800}.pop-who #meRole{color:var(--m);font-size:13px}

aside{background:var(--side)!important;color:var(--ink)!important;border-right:1px solid var(--line);padding:16px 12px!important;position:sticky;top:61px;height:calc(100vh - 61px)!important;display:flex;flex-direction:column;overflow:hidden}
aside .nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;padding-right:2px}
aside .nav .nav-group{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--m);padding:16px 12px 6px}
aside .nav .nav-group:first-child{padding-top:2px}
aside .nav button{width:100%;min-height:44px;border:0;background:transparent!important;color:var(--ink)!important;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 12px;font-size:16px;font-weight:500;text-align:left;cursor:pointer}
aside .nav button:hover{background:var(--hover)!important}
aside .nav button.active{background:var(--accentSoft)!important;font-weight:700}
aside .nav button .bd-icon{display:none}
aside .nav button .ico{width:22px;height:22px;color:var(--accent);opacity:1}
aside .sidebar-foot{margin-top:auto;padding:14px 12px 2px;color:var(--m);font-size:12px}
main{padding:0 28px 40px!important;min-width:0}

/* ---------- Bereichskopf ---------- */
.top{align-items:center;margin:0 0 18px;padding-top:24px}
.top>div:first-child{display:flex;align-items:center;gap:14px}
.top-ico{width:44px;height:44px;border-radius:12px;background:var(--accentSoft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.top-ico svg{width:24px;height:24px}
.top h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em}
.top p{margin:2px 0 0;color:var(--m);font-size:15px}

/* ---------- Karten, Kennzahlen, Formulare ---------- */
.card{background:var(--p)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;color:var(--ink)}
.card.metric{display:flex;align-items:center;gap:16px}
.metric-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}.metric-ico svg{width:26px;height:26px}
.metric-ico.c1{background:#0b6874}.metric-ico.c2{background:#b7791f}.metric-ico.c3{background:#6b5bd2}.metric-ico.c4{background:#2f855a}
.card.metric b{margin:0;font-size:28px;font-weight:800;line-height:1}.card.metric .metric-text{display:flex;flex-direction:column;gap:4px}.card.metric .metric-text .muted{font-size:14px;text-transform:none;letter-spacing:0}
.home-modules{margin-top:15px;grid-column:span 12}.home-modules h2{margin:0 0 10px;font-size:17px;font-weight:800}
.btn{border-radius:10px!important;background:var(--hover)!important;color:var(--ink)!important;font-weight:700;min-height:40px}
.btn:hover{background:var(--accentSoft)!important}
.btn.primary{background:var(--accent)!important;color:var(--onaccent)!important}.btn.primary:hover{filter:brightness(1.08)}
.btn.green{background:rgba(47,133,90,.14)!important;color:#1f6e49!important}.btn.red{background:rgba(198,40,40,.12)!important;color:#b02a2a!important}
html[data-theme="dark"] .btn.green{color:#62d29b!important}html[data-theme="dark"] .btn.red{color:#ff8f85!important}
.field input,.field select,.field textarea,input,select,textarea{border-radius:10px;border:1px solid var(--line);background:var(--p);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.badge{background:var(--accentSoft)!important;color:var(--accent)!important}.badge.green{background:rgba(47,133,90,.14)!important;color:#1f6e49!important}.badge.orange{background:rgba(183,121,31,.16)!important;color:#935f12!important}
html[data-theme="dark"] .badge.green{color:#62d29b!important}html[data-theme="dark"] .badge.orange{color:#f2b35c!important}
.notice{border-left:4px solid var(--accent)!important;background:var(--accentSoft)!important;color:var(--ink)}
th{color:var(--m)}td,th{border-bottom-color:var(--line)}
.client-row:hover,.tree-row:hover{background:var(--hover)!important}
.tree-row.selected,.post-count,.wizard-step.active,.pro-tabs button.active{background:var(--accentSoft)!important;color:var(--accent)!important}
.record-tabs,.pro-tabs{background:var(--p)!important;border-color:var(--line)!important}
.record-tabs button.active{background:var(--accent)!important;color:var(--onaccent)!important}
.record-tabs button,.pro-tabs button{color:var(--m)}
.item{border-color:var(--line);background:var(--p)}
.modal{background:var(--p)!important;color:var(--ink)}.modal-backdrop{background:rgba(10,14,20,.55)}
.toast{background:#1a1d22;color:#fff}
.pro-badge{background:var(--accent)!important;color:var(--onaccent)!important}
.completeness>span{background:linear-gradient(90deg,var(--accent),#2f855a)!important}
.sidebar-signet{display:none}

/* ---------- Anmeldung ---------- */
.login{background:var(--bg)}.loginbox{border-radius:20px!important;box-shadow:var(--shadow);background:var(--p)!important;border:1px solid var(--line)}
.loginbox h1{font-weight:800;letter-spacing:-.02em}
.loginbrand img{background:#fff;border-radius:14px;padding:10px;border:1px solid var(--line)}

/* ---------- Schmale Breite ---------- */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  aside{position:static;height:auto!important;border-right:0;border-bottom:1px solid var(--line)}
  aside .nav{flex-direction:row;overflow-x:auto}aside .nav .nav-group{display:none}aside .nav button{width:auto;white-space:nowrap}
  .appbar{flex-wrap:wrap}.appbar-search{order:3;flex:1 1 100%;max-width:none}
  #menuNew,#menuApps,#menuProfile{right:8px}
  main{padding:0 14px 30px!important}
}

/* ---------- Korrekturen nach TEST-Sicht ---------- */
aside .nav .pw-nav-group{display:none!important}
html[data-theme="dark"] .btn.primary{background:var(--accent)!important;color:var(--onaccent)!important}
html[data-theme="dark"] a{color:var(--accent)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--bg)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .appbar-search input{background:var(--bg)!important}
/* Dunkelmodus: Flächen, die per Inline-Stil oder aus Skripten weiß gesetzt werden */
html[data-theme="dark"] [style*="background:#fff"],html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#ffffff"],html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:white"],html[data-theme="dark"] [style*="background-color: white"]{background:var(--p)!important;color:var(--ink)!important}
html[data-theme="dark"] [style*="background:#f"],html[data-theme="dark"] [style*="background: #f"]{background:var(--hover)!important;color:var(--ink)!important}
html[data-theme="dark"] .brand-tile,html[data-theme="dark"] .brand-tile *{background:#fff!important}
html[data-theme="dark"] .tile .tile-ico,html[data-theme="dark"] .menuitem .chip,html[data-theme="dark"] .metric-ico{color:#fff!important}
html[data-theme="dark"] .tile .tile-ico[style],html[data-theme="dark"] .menuitem .chip[style]{background-clip:padding-box}
/* Beschriftungen und Kennzahlen im Dunkelmodus lesbar */
html[data-theme="dark"] .muted,html[data-theme="dark"] .small.muted,html[data-theme="dark"] th{color:var(--m)!important}

/* ---------- Klientenleiste, Suche, Listen ---------- */
.bd-client-context{top:61px!important;background:var(--accentSoft)!important;border:1px solid var(--line)!important;border-radius:14px!important;color:var(--ink);margin:14px 0 0}
html[data-theme="dark"] .bd-client-context{background:var(--accentSoft)!important;border:1px solid var(--line)!important}
.bd-client-context .btn.primary{background:var(--accent)!important;color:var(--onaccent)!important}
.list .item,.list .item *{min-width:0}.item strong,.item span{overflow-wrap:anywhere}
.item{align-items:center}
.bd-command-box{background:var(--pop)!important;color:var(--ink)}
.grid>.card{min-width:0}
.view .card h2{font-size:17px;font-weight:800;margin:0 0 10px}

/* ---------- Brotkrumen ---------- */
.bd-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:14px 0 0;font-size:14px;font-weight:600;color:var(--m);min-height:36px}
.bd-crumbs .crumb{border:0;background:transparent;color:var(--m);font:inherit;padding:4px 8px;border-radius:8px;cursor:default}
.bd-crumbs button.crumb{cursor:pointer;color:var(--accent)}
.bd-crumbs button.crumb:hover{background:var(--accentSoft)}
.bd-crumbs .crumb.current{color:var(--ink);font-weight:800}
.bd-crumbs .sep{color:var(--m);opacity:.7;display:inline-flex}
.bd-crumbs .sep svg{width:16px;height:16px}

/* ---------- Prozessschritte als Brotkrumen-Leiste ---------- */
html body .process-slider{display:flex;gap:0;overflow-x:auto;padding:2px 0 8px;margin-bottom:14px}
html body .process-slider .process-slide{position:relative;flex:1 1 0;min-width:132px;min-height:60px;margin-right:-8px;border:0;border-radius:0;padding:8px 20px 8px 28px;text-align:left;font-weight:800;font-size:15px;background:var(--hover)!important;color:var(--m)!important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%);box-shadow:none}
html body .process-slider .process-slide:first-child{border-radius:12px 0 0 12px;padding-left:18px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
html body .process-slider .process-slide:last-child{margin-right:0;border-radius:0 12px 12px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}
html body .process-slider .process-slide:first-child:last-child{clip-path:none;border-radius:12px}
html body .process-slider .process-slide small{display:block;font-size:12px;font-weight:600;margin-top:3px;opacity:.9}
html body .process-slider .process-slide.status-green{background:rgba(47,133,90,.16)!important;color:#1f6e49!important}
html body .process-slider .process-slide.status-orange{background:rgba(183,121,31,.18)!important;color:#935f12!important}
html body .process-slider .process-slide.status-red{background:rgba(198,40,40,.14)!important;color:#b02a2a!important}
html[data-theme="dark"] body .process-slider .process-slide.status-green{color:#62d29b!important}
html[data-theme="dark"] body .process-slider .process-slide.status-orange{color:#f2b35c!important}
html[data-theme="dark"] body .process-slider .process-slide.status-red{color:#ff8f85!important}
html body .process-slider .process-slide.active{background:var(--accent)!important;color:var(--onaccent)!important}
html body .process-slider .process-slide:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.process-editor,.process-preview-card{min-width:0}
.process-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Mobile Leiste unten ---------- */
html body .bd-mobile-dock{background:var(--head)!important;border-top:1px solid var(--line)!important}
html body .bd-mobile-dock button{background:var(--hover)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:10px}

/* ---------- VBVG-Abrechnung ---------- */
.vbvg-calc{grid-column:span 12;margin-top:8px}
.vbvg-table{width:100%;border-collapse:collapse;font-size:14px}.vbvg-table th,.vbvg-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.vbvg-table .num{text-align:right;font-variant-numeric:tabular-nums}.vbvg-table tfoot td{border-bottom:0;font-weight:700}.vbvg-table tr.grand td{border-top:2px solid var(--line);font-size:16px}
.level-row,.level-add{display:flex;align-items:center;gap:10px;margin:4px 0}.level-row span{flex:1}.level-add select,.level-add input{max-width:160px}