/* ============================================================
   Praxishub – Produkt-UI-Kit (app.css)
   Die „Mini-App" in der Website: Sidebar-Navigation + echte
   Feature-Screens (Analytics, Posteingang, HKP, Aufgaben/QM,
   Anamnese, Online-Auftritt, Werbung, Bewertungen, Walletpass).
   Wird von Landing + Modul-/Feature-Seiten genutzt.
   Designsystem-Tokens kommen aus site.css.
   ============================================================ */

:root {
  --pa-bg: #F7F6F2;
  --pa-panel: #FFFFFF;
  --pa-line: #ECEAE2;
  --pa-line-2: #F2F0E9;
  --pa-sidebar: #FBFAF7;
  --win: #4F46E5; --win-soft: #EEF0FB;
  --bind: #1E7F4F; --bind-soft: #E7F3EC;
  --mgmt: #B45309; --mgmt-soft: #FBF1E3;
  --treat: var(--mgmt); --treat-soft: var(--mgmt-soft);
  --analytics: #2E4A6E; --analytics-soft: #E6EEF7;
}

/* ---------- Shell ---------- */
.pa { display: grid; grid-template-columns: 218px 1fr; height: 640px; background: var(--pa-bg); font-size: 13px; }
.pa-side { background: var(--pa-sidebar); border-right: 1px solid var(--pa-line); display: flex; flex-direction: column; padding: 12px 10px; overflow-y: auto; }
.pa-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; padding: 4px 8px 12px; }
.pa-brand img { width: 18px; height: 18px; }
.pa-search { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); background: #fff; border: 1px solid var(--pa-line); border-radius: 8px; padding: 7px 10px; margin: 0 2px 10px; }
.pa-search svg { width: 13px; height: 13px; stroke: var(--ink-3); fill: none; stroke-width: 2; }
.pa-search .kbd { margin-left: auto; font-size: 10px; color: var(--ink-3); border: 1px solid var(--pa-line); border-radius: 4px; padding: 1px 5px; }
.pa-group {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 10px 5px;
}
.pa-group::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; opacity: .9; }
.pa-group:not(.win):not(.bind):not(.analytics)::before { display: none; }
.pa-group.win { color: #4338CA; } .pa-group.win::before { background: var(--win); }
.pa-group.bind { color: #186b41; } .pa-group.bind::before { background: var(--bind); }
.pa-group.analytics { color: var(--analytics); } .pa-group.analytics::before { background: var(--analytics); }
.pa-sub {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #9A5B12; padding: 8px 10px 3px 21px;
}
.pa-nav { display: flex; flex-direction: column; gap: 1px; padding-left: 2px; }
.pa-nav.win { border-left: 2px solid rgba(79,70,229,.14); padding-left: 6px; margin-left: 2px; }
.pa-nav.bind { border-left: 2px solid rgba(30,127,79,.14); padding-left: 6px; margin-left: 2px; }
.pa-nav.analytics { border-left: 2px solid rgba(46,74,110,.16); padding-left: 6px; margin-left: 2px; }
.pa-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 7px; color: var(--ink-2); font-weight: 500; font-size: 12.5px;
  position: relative; transition: background .15s, color .15s;
}
.pa-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pa-item:hover { background: #F1EFE8; color: var(--ink); }
.pa-nav.win .pa-item:hover { background: #F3F2FC; }
.pa-nav.bind .pa-item:not(.treat):hover { background: #F0F8F4; }
.pa-item.treat:hover { background: #FCF6ED; }
.pa-nav.analytics .pa-item:hover { background: #F0F4FA; }
.pa-item .pa-badge { margin-left: auto; font-size: 9.5px; font-weight: 700; border-radius: 99px; padding: 1px 6px; background: var(--win); color: #fff; }
.pa-item .pa-badge.g { background: var(--bind); } .pa-item .pa-badge.a { background: var(--mgmt); }
.pa-item.act { background: var(--win-soft); color: var(--win); font-weight: 600; }
.pa-item.act::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--win); }
.pa-nav.bind .pa-item.act:not(.treat) { background: var(--bind-soft); color: var(--bind); }
.pa-nav.bind .pa-item.act:not(.treat)::before { background: var(--bind); }
.pa-item.treat.act { background: var(--treat-soft); color: var(--treat); }
.pa-item.treat.act::before { background: var(--treat); }
.pa-nav.mgmt .pa-item.act { background: var(--mgmt-soft); color: var(--mgmt); } .pa-nav.mgmt .pa-item.act::before { background: var(--mgmt); }
.pa-side-foot { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px 9px 2px; border-top: 1px solid var(--pa-line); }
.pa-side-foot .pa-av { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.pa-side-foot .pa-u { font-size: 11.5px; font-weight: 600; } .pa-side-foot .pa-u span { display: block; font-size: 10px; color: var(--ink-3); font-weight: 500; }

.pa-main { display: flex; flex-direction: column; min-width: 0; background: var(--pa-bg); }
.pa-top { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--pa-line); background: var(--pa-panel); }
.pa-top .pa-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.pa-top .pa-crumb { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.pa-top .pa-actions { margin-left: auto; display: flex; gap: 8px; }
.pa-pill { font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--pa-line); color: var(--ink-2); background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.pa-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.pa-pill.pri { background: var(--ink); color: #fff; border-color: var(--ink); }
.pa-pill.accent { background: var(--win); color: #fff; border-color: var(--win); }
.pa-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.pa-sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bind); box-shadow: 0 0 0 3px var(--bind-soft); }
.pa-sync b { color: var(--ink-2); font-weight: 600; }

.pa-railm { display: none; }

.pa-views { flex: 1; min-height: 0; position: relative; }
.pa-view { position: absolute; inset: 0; overflow-y: auto; padding: 20px; display: none; }
.pa-view.act { display: block; animation: paView .4s var(--ease); }
@keyframes paView { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pa-view.flush { padding: 0; }

/* ---------- Cards ---------- */
.pc { background: var(--pa-panel); border: 1px solid var(--pa-line); border-radius: 12px; }
.pc-pad { padding: 16px 18px; }
.pc-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13px; }
.pc-h .pc-sub { font-weight: 500; font-size: 11px; color: var(--ink-3); }
.pc-h .pc-r { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ---------- Analytics ---------- */
.kpi-c { background: var(--pa-panel); border: 1px solid var(--pa-line); border-radius: 12px; padding: 15px 16px; }
.kpi-c .kc-l { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi-c .kc-l .ic { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.kpi-c .kc-l .ic svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi-c b { font-family: var(--serif); font-weight: 550; font-size: 28px; letter-spacing: -.02em; display: block; line-height: 1; margin-top: 10px; }
.kpi-c .kc-d { font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.kc-d.up { color: var(--green); } .kc-d.down { color: var(--green); } .kc-d.warn { color: var(--amber); }
.kc-d svg { width: 11px; height: 11px; }

.bigchart svg { width: 100%; display: block; }
.chart-x { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-3); margin-top: 6px; padding: 0 2px; }
.chart-leg { display: flex; gap: 16px; font-size: 11px; color: var(--ink-2); }
.chart-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Donut */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(var(--win) 0 52%, #818CF8 52% 74%, var(--bind) 74% 100%); }
.donut::after { content: ""; position: absolute; inset: 16px; background: var(--pa-panel); border-radius: 50%; }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-c b { font-family: var(--serif); font-size: 20px; line-height: 1; } .donut-c span { font-size: 9px; color: var(--ink-3); }
.leg-list { display: flex; flex-direction: column; gap: 9px; }
.leg-list .lr { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.leg-list .lr i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.leg-list .lr b { margin-left: auto; font-weight: 700; }

/* Bar list (Behandler-Auslastung) */
.barl { display: flex; flex-direction: column; gap: 11px; }
.barl .br { display: grid; grid-template-columns: 84px 1fr 36px; align-items: center; gap: 10px; font-size: 11.5px; }
.barl .br .tk { height: 8px; background: var(--pa-line-2); border-radius: 99px; overflow: hidden; }
.barl .br .fl { height: 100%; border-radius: 99px; background: var(--win); }
.barl .br b { text-align: right; font-weight: 700; }

/* Heat (Stoßzeiten) */
.heat { display: grid; grid-template-columns: 26px repeat(10, 1fr); gap: 3px; font-size: 9px; color: var(--ink-3); }
.heat .hc { aspect-ratio: 1; border-radius: 3px; }
.heat .hlbl { display: flex; align-items: center; }

/* ---------- HKP Kanban ---------- */
.kan { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(184px, 1fr); gap: 12px; height: 100%; padding: 4px; }
.kan-col { background: #F4F2EC; border: 1px solid var(--pa-line); border-radius: 11px; display: flex; flex-direction: column; min-height: 0; }
.kan-h { display: flex; align-items: center; gap: 7px; padding: 11px 12px 8px; font-size: 11.5px; font-weight: 700; }
.kan-h .kc { width: 7px; height: 7px; border-radius: 50%; }
.kan-h .ksum { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-3); }
.kan-h .kn { background: #fff; border: 1px solid var(--pa-line); border-radius: 99px; font-size: 9.5px; font-weight: 700; color: var(--ink-3); padding: 0 6px; }
.kan-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.kard { background: #fff; border: 1px solid var(--pa-line); border-radius: 9px; padding: 9px 11px; box-shadow: 0 2px 6px -4px rgba(20,22,27,.15); }
.kard .kt { font-weight: 700; font-size: 11.5px; }
.kard .ks { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.kard .kf { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.kard .kval { font-weight: 700; font-size: 11.5px; }
.ktag { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; }
.ktag.wait { background: var(--win-soft); color: var(--win); }
.ktag.ok { background: var(--bind-soft); color: var(--bind); }
.ktag.warn { background: #FBF1E3; color: var(--amber); }
.ktag.done { background: #EEECE4; color: var(--ink-3); }
.kdot { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--ink-3); }
.kdot .ka { width: 16px; height: 16px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 700; }

/* ---------- Aufgaben / QM ---------- */
.tkcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tkcol-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; margin-bottom: 10px; }
.tkcol-h .tn { background: #fff; border: 1px solid var(--pa-line); border-radius: 99px; font-size: 10px; font-weight: 700; color: var(--ink-3); padding: 0 7px; margin-left: auto; }
.tcard { background: #fff; border: 1px solid var(--pa-line); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; box-shadow: 0 2px 6px -4px rgba(20,22,27,.12); }
.tcard.is-done { opacity: .62; }
.tcard-top { display: flex; align-items: flex-start; gap: 9px; }
.tchk { width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid #CFCCC2; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.tchk.on { background: var(--mgmt); border-color: var(--mgmt); }
.tchk svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tchk.on svg { opacity: 1; }
.tcard .tt { font-weight: 600; font-size: 12px; line-height: 1.35; }
.tcard.is-done .tt { text-decoration: line-through; color: var(--ink-3); }
.tcard .tmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }
.tmeta .chip { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: 2.5px 7px; background: #F2F0E9; color: var(--ink-3); }
.tmeta .chip.qm { background: var(--mgmt-soft); color: var(--mgmt); }
.tmeta .chip.auto { background: var(--win-soft); color: var(--win); }
.tmeta .chip.ext { background: #EDEBFB; color: #5B4FC9; }
.tmeta .chip.rep { background: var(--bind-soft); color: var(--bind); }
.tmeta .due { font-size: 10px; color: var(--ink-3); margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.tmeta .due svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.tmeta .ppl { display: flex; }
.tmeta .ppl .pp { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; margin-left: -5px; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* QM-Checkliste */
.qmbar { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-2); margin-top: 9px; }
.qmbar .qt { flex: 1; height: 6px; background: var(--pa-line-2); border-radius: 99px; overflow: hidden; }
.qmbar .qf { height: 100%; background: var(--mgmt); border-radius: 99px; }

/* ---------- Anamnese ---------- */
.anam { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.anam-doc { background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; overflow: hidden; }
.anam-head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--pa-line-2); }
.anam-head .av { width: 34px; height: 34px; border-radius: 50%; background: #6D28D9; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.anam-head .nm { font-weight: 700; font-size: 13px; } .anam-head .mt { font-size: 10.5px; color: var(--ink-3); }
.anam-head .lang { margin-left: auto; font-size: 11px; font-weight: 600; border: 1px solid var(--pa-line); border-radius: 7px; padding: 4px 9px; }
.anam-sec { padding: 12px 16px; border-bottom: 1px solid var(--pa-line-2); }
.anam-sec:last-child { border-bottom: none; }
.anam-sec .as-t { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.afield { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12px; }
.afield .k { color: var(--ink-3); } .afield .v { font-weight: 600; }
.afield.flag { background: #FCF6EC; margin: 0 -16px; padding: 7px 16px; }
.afield.flag .v { color: var(--amber); display: inline-flex; align-items: center; gap: 6px; }
.afield.flag .v svg { width: 13px; height: 13px; stroke: var(--amber); fill: none; stroke-width: 2.2; }
.aside-card { background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.sign-line { border: 1px dashed #CFCCC2; border-radius: 9px; padding: 12px; text-align: center; margin-top: 8px; }
.sign-line svg { height: 30px; }
.cost-row { display: flex; justify-content: space-between; font-size: 12px; padding: 7px 0; border-bottom: 1px dashed var(--pa-line); }
.cost-row:last-of-type { border-bottom: none; }
.cost-row .cv { font-weight: 700; }
.ai-q { display: flex; gap: 8px; align-items: flex-start; background: var(--win-soft); border-radius: 9px; padding: 10px 12px; font-size: 11.5px; color: #36318c; margin-top: 10px; line-height: 1.45; }
.ai-q .aiq-ic { width: 20px; height: 20px; border-radius: 6px; background: var(--win); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 12px; }

/* ---------- Online-Auftritt ---------- */
.profcard { background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; padding: 14px 16px; }
.profcard .pf-h { display: flex; align-items: center; gap: 10px; }
.profcard .pf-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profcard .pf-ic svg { width: 17px; height: 17px; }
.profcard .pf-n { font-weight: 700; font-size: 12.5px; } .profcard .pf-s { font-size: 10.5px; color: var(--ink-3); }
.profcard .pf-score { margin-left: auto; text-align: right; }
.profcard .pf-score b { font-family: var(--serif); font-size: 20px; line-height: 1; } .profcard .pf-score span { font-size: 9px; color: var(--ink-3); display: block; }
.opt-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--pa-line-2); font-size: 11.5px; margin-top: 4px; }
.opt-row:first-of-type { margin-top: 10px; }
.opt-row .oi { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.opt-row .oi svg { width: 10px; height: 10px; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.opt-row.done .oi { background: var(--bind-soft); } .opt-row.done .oi svg { stroke: var(--bind); }
.opt-row.live .oi { background: var(--win-soft); } .opt-row.live .oi svg { stroke: var(--win); }
.opt-row .ox { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.opt-row.done .ox { color: var(--bind); } .opt-row.live .ox { color: var(--win); }
.algo-note { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--ink-2); background: #F4F2EC; border-radius: 8px; padding: 9px 11px; line-height: 1.4; }
.algo-note .ad { width: 6px; height: 6px; border-radius: 50%; background: var(--win); margin-top: 5px; flex-shrink: 0; }

/* ---------- Werbung ---------- */
.camp-head { display: flex; align-items: center; gap: 11px; }
.tgp { display: flex; flex-wrap: wrap; gap: 6px; }
.tgp .t { font-size: 10.5px; font-weight: 600; color: var(--win); background: var(--win-soft); border: 1px solid #D4DCFA; border-radius: 99px; padding: 4px 10px; }
.camp-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--pa-line); border-radius: 10px; overflow: hidden; }
.camp-kpi > div { padding: 12px 14px; border-left: 1px solid var(--pa-line); }
.camp-kpi > div:first-child { border-left: none; }
.camp-kpi b { font-family: var(--serif); font-size: 20px; display: block; line-height: 1; } .camp-kpi span { font-size: 10px; color: var(--ink-3); display: block; margin-top: 5px; }

/* ---------- Werbung: Budget, Kanäle, Buchungen ---------- */
.budget-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 8px; }
.budget-top b { font-size: 13.5px; font-weight: 700; }
.budget-track { height: 10px; background: var(--pa-line-2); border-radius: 99px; overflow: hidden; }
.budget-fill { height: 100%; background: var(--win); border-radius: 99px; }
.budget-legend { display: flex; gap: 18px; margin-top: 9px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.budget-legend b { color: var(--ink); font-weight: 700; }
.budget-legend .ph-tag { color: var(--ink-2); }
.chrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--pa-line-2); }
.chrow:last-child { border-bottom: none; }
.chrow .chic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chrow .chn { font-weight: 700; font-size: 12.5px; } .chrow .chs { font-size: 10.5px; color: var(--ink-3); }
.chrow .chstats { display: flex; gap: 18px; text-align: right; }
.chrow .chstats div b { font-size: 13.5px; font-weight: 700; display: block; line-height: 1; }
.chrow .chstats div span { font-size: 9px; color: var(--ink-3); }
.book-row { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--pa-line-2); font-size: 12.5px; }
.book-row:last-child { border-bottom: none; }
.book-row .pn { display: flex; align-items: center; gap: 9px; }
.book-row .pn .pa-av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.book-row .nm { font-weight: 600; }
.src-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; border-radius: 5px; padding: 3px 8px; white-space: nowrap; }
.src-badge svg { width: 11px; height: 11px; }
.src-badge.g { background: #E8F0FE; color: #1A73E8; } .src-badge.ig { background: #FCE7F3; color: #C2185B; } .src-badge.fb { background: #E7F0FF; color: #1877F2; }
.book-row .when { text-align: right; color: var(--ink-3); font-size: 11.5px; }

/* ---------- Bewertungen ---------- */
.rv-top { display: flex; align-items: center; gap: 22px; }
.rv-big { text-align: center; } .rv-big b { font-family: var(--serif); font-size: 44px; line-height: 1; } .rv-big .st { color: #E8A413; font-size: 13px; letter-spacing: 1px; } .rv-big span { font-size: 10.5px; color: var(--ink-3); display: block; margin-top: 3px; }
.rvbars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rvbar { display: grid; grid-template-columns: 12px 1fr 28px; gap: 8px; align-items: center; font-size: 10.5px; color: var(--ink-3); }
.rvbar .tk { height: 6px; background: var(--pa-line-2); border-radius: 99px; overflow: hidden; } .rvbar .fl { height: 100%; background: #E8A413; border-radius: 99px; }
.rev { background: #fff; border: 1px solid var(--pa-line); border-radius: 10px; padding: 11px 13px; }
.rev .rh { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rev .st { color: #E8A413; font-size: 11px; } .rev .who { font-weight: 700; font-size: 11.5px; } .rev .src { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.rev p { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.rev-flow { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-top: 9px; }
.rev-flow .rstep { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; font-weight: 600; }
.rev-flow .rstep.pos { background: var(--bind-soft); color: var(--bind); }
.rev-flow .rstep.neg { background: #FBF1E3; color: var(--amber); }
.rev-flow .arr { color: var(--ink-3); }

/* ---------- Walletpass (Apple-Pass-Look) ---------- */
.pass-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; padding: 12px; background:
  radial-gradient(420px 280px at 50% 0%, rgba(79,70,229,.06), transparent 60%); }
.applepass { width: 290px; border-radius: 16px; overflow: hidden; position: relative; color: #fff;
  background: linear-gradient(160deg, #20232b 0%, #14161B 72%);
  box-shadow: 0 22px 55px -22px rgba(20,22,27,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.ap-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 11px; }
.ap-head img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.ap-head .org { font-size: 12px; font-weight: 600; } .ap-head .typ { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A5B4FC; }
.ap-strip { padding: 2px 16px 14px; }
.ap-strip .lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ap-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 9px; }
.ap-st { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.45); }
.ap-st.full { background: var(--win); border-color: var(--win); color: #fff; }
.ap-st.full svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-st.pop { animation: stPop .6s var(--ease); }
@keyframes stPop { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.ap-foot { display: flex; justify-content: space-between; align-items: flex-end; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.ap-foot .k { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .ap-foot .v { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.ap-qr { width: 38px; height: 38px; border-radius: 6px; background: repeating-conic-gradient(#14161B 0 25%, #fff 0 50%) 0 0 / 7px 7px; }
.ap-push { width: 290px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border: 1px solid var(--pa-line); border-radius: 14px; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 16px 38px -16px rgba(20,22,27,.3); opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ap-push.show { opacity: 1; transform: none; }
.ap-push .ic { width: 28px; height: 28px; border-radius: 7px; background: var(--ink); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ap-push .ic img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.ap-push .pt { font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; } .ap-push .pt span { font-weight: 500; color: var(--ink-3); }
.ap-push .pb { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }

/* ---------- Charts mit Achsen ---------- */
.chartwrap { display: flex; gap: 8px; align-items: stretch; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 9.5px; color: var(--ink-3); text-align: right; width: 26px; padding: 1px 0 16px; flex-shrink: 0; }
.chartwrap svg { flex: 1; min-width: 0; }
.chart-ax-t { font-size: 8.5px; fill: var(--ink-3); }

/* ---------- Listen (HKP / Anamnese-Detail) ---------- */
.lst { background: var(--pa-panel); border: 1px solid var(--pa-line); border-radius: 12px; overflow: hidden; }
.lst-h, .hkp-row { display: grid; grid-template-columns: 1.5fr 1.05fr 1.7fr 0.7fr; gap: 12px; align-items: center; padding: 11px 16px; }
.lst-h { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); background: var(--pa-sidebar); border-bottom: 1px solid var(--pa-line); }
.hkp-row { border-bottom: 1px solid var(--pa-line-2); font-size: 12.5px; }
.hkp-row:last-child { border-bottom: none; }
.hkp-row .pn { display: flex; align-items: center; gap: 9px; }
.hkp-row .pn .pa-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.hkp-row .nm { font-weight: 700; } .hkp-row .sub { font-size: 10.5px; color: var(--ink-3); }
.hkp-row .auto-t { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.hkp-row .auto-t b { color: var(--ink); font-weight: 600; }
.hkp-row .val { font-weight: 700; text-align: right; }
.st-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.st-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-badge.wait { background: var(--win-soft); color: var(--win); }
.st-badge.ok { background: var(--bind-soft); color: var(--bind); }
.st-badge.run { background: #FBF1E3; color: var(--mgmt); }
.st-badge.warn { background: #FCEBE6; color: #C2410C; }
.st-badge.done { background: #EEECE4; color: var(--ink-3); }

/* ---------- Anamnese (Liste + Detail) ---------- */
.anam2 { display: grid; grid-template-columns: 232px 1fr; height: 100%; }
.anam-list { border-right: 1px solid var(--pa-line); background: var(--pa-sidebar); overflow-y: auto; }
.anam-list .alh { padding: 12px 14px 8px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.anam-li { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--pa-line-2); transition: background .15s; }
.anam-li:hover { background: #F1EFE8; }
.anam-li.act { background: #fff; box-shadow: inset 3px 0 0 var(--mgmt); }
.anam-li .av { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.anam-li .nm { font-weight: 600; font-size: 12px; } .anam-li .sub { font-size: 10px; color: var(--ink-3); }
.anam-li .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.anam-detail { overflow-y: auto; padding: 18px 20px; }
.ad-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ad-head .av { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.ad-head .nm { font-weight: 700; font-size: 15px; } .ad-head .sub { font-size: 11.5px; color: var(--ink-3); }
.ad-head .lang { margin-left: auto; font-size: 11px; font-weight: 600; border: 1px solid var(--pa-line); border-radius: 7px; padding: 5px 10px; background: #fff; }
/* Zusammenfassung „Auf einen Blick" */
.ad-summary { background: #fff; border: 1px solid var(--pa-line); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.ad-summary .ss-t { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sum-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sum-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; padding: 7px 11px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.sum-chip svg { width: 13px; height: 13px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sum-chip small { font-weight: 500; opacity: .8; }
.sum-chip.alert { background: #FCEBE6; color: #C2410C; border-color: #F3D6CC; } .sum-chip.alert svg { stroke: #C2410C; }
.sum-chip.warn { background: #FBF1E3; color: var(--mgmt); border-color: #EFD9BC; } .sum-chip.warn svg { stroke: var(--mgmt); }
.sum-chip.ok { background: var(--bind-soft); color: var(--bind); border-color: #CFE8D8; } .sum-chip.ok svg { stroke: var(--bind); }
.sum-chip.neutral { background: var(--pa-bg); color: var(--ink-2); border-color: var(--pa-line); } .sum-chip.neutral svg { stroke: var(--ink-2); }
/* Detail-Abschnitte */
.ad-sec { border-top: 1px solid var(--pa-line); padding: 12px 0; }
.ad-sec .sech { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.qa { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--pa-line-2); }
.qa .q { color: var(--ink-2); } .qa .a { font-weight: 600; white-space: nowrap; }
.qa .a.yes { color: #C2410C; } .qa .a.no { color: var(--ink-3); }
.med-line { font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.med-line b { color: var(--ink); font-weight: 600; }
.ad-sign { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--pa-line); padding-top: 12px; margin-top: 4px; }
.ad-sign .sig { font-family: "Caveat", cursive; font-size: 30px; line-height: 1; color: #2a2d6b; }
.ad-sign .sig-l { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.ad-sign .pvs { font-size: 11px; font-weight: 600; color: var(--bind); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Anamnesen als Dokumentenliste (PDF-Look) ---------- */
.anam3 { display: grid; grid-template-columns: 312px 1fr; height: 100%; }
.anam-docs { border-right: 1px solid var(--pa-line); background: var(--pa-sidebar); overflow-y: auto; }
.adoc-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--pa-line); font-size: 11px; font-weight: 600; color: var(--ink-2); background: #fff; position: sticky; top: 0; z-index: 1; }
.adoc-head .sy { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--bind); }
.adoc-head .sy .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bind); box-shadow: 0 0 0 3px var(--bind-soft); }
.adoc { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--pa-line-2); align-items: start; transition: background .15s; }
.adoc:hover { background: #F1EFE8; }
.adoc.act { background: #fff; box-shadow: inset 3px 0 0 var(--bind); }
.adoc-ic { width: 34px; height: 42px; border-radius: 5px; background: #fff; border: 1px solid var(--pa-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; position: relative; box-shadow: 0 1px 3px -1px rgba(20,22,27,.12); }
.adoc-ic::before { content: ""; position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: #E7E4DB; border-right-color: #E7E4DB; border-top-right-radius: 5px; }
.adoc-ic svg { width: 14px; height: 14px; stroke: #C2410C; fill: none; stroke-width: 1.8; }
.adoc-ic .lbl { font-size: 6.5px; font-weight: 800; letter-spacing: .04em; color: #C2410C; }
.adoc-m { min-width: 0; }
.adoc-t { font-weight: 600; font-size: 12.5px; display: block; }
.adoc-s { font-size: 10.5px; color: var(--ink-3); display: block; margin-top: 1px; }
.adoc-sum { font-size: 10.5px; color: var(--ink-2); margin-top: 6px; display: block; line-height: 1.35; }
.adoc-sum .warn { color: #C2410C; font-weight: 600; }
.adoc-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.adoc-badges .dt { font-size: 10px; color: var(--ink-3); }
.pvs-badge { font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--bind); background: var(--bind-soft); border-radius: 5px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pvs-badge svg { width: 9px; height: 9px; stroke: var(--bind); fill: none; stroke-width: 2.6; }

/* PDF-Dokumentenseite */
.anam-page { overflow-y: auto; padding: 22px; background: var(--pa-bg); }
.pdfpage { background: #fff; border: 1px solid var(--pa-line); border-radius: 5px; box-shadow: 0 14px 44px -18px rgba(20,22,27,.28); max-width: 580px; margin: 0 auto; padding: 26px 30px 24px; }
.pdf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.pdf-org { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; }
.pdf-org img { width: 18px; height: 18px; }
.pdf-title { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-top: 9px; letter-spacing: -.01em; }
.pdf-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.pdf-pvs { flex-shrink: 0; font-size: 9.5px; font-weight: 700; color: var(--bind); background: var(--bind-soft); border: 1px solid #CFE8D8; border-radius: 6px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 5px; }
.pdf-pvs svg { width: 11px; height: 11px; stroke: var(--bind); fill: none; stroke-width: 2.2; }
.ai-sum { background: var(--win-soft); border: 1px solid #D4DCFA; border-radius: 9px; padding: 13px 15px; margin: 16px 0; }
.ai-sum-h { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--win); margin-bottom: 9px; }
.ai-sum-h .ic { width: 19px; height: 19px; border-radius: 5px; background: var(--win); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 11px; }
.ai-sum .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.ai-sum p { font-size: 12px; color: #36318c; line-height: 1.5; }
.pdf-sec { padding: 12px 0; border-bottom: 1px solid var(--pa-line-2); }
.pdf-sec .h { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.pdf-sign { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: flex-end; padding-top: 18px; }
.sign-field .nm { font-family: "Caveat", cursive; font-size: 32px; line-height: .8; color: #1d2b6b; }
.sign-field .ln { border-top: 1px solid var(--ink); margin-top: 5px; padding-top: 5px; font-size: 10.5px; color: var(--ink-3); }
.seal { width: 128px; flex-shrink: 0; border: 2px solid #1E7F4F; border-radius: 9px; padding: 8px 6px; text-align: center; color: #1E7F4F; transform: rotate(-5deg); box-shadow: inset 0 0 0 1px rgba(30,127,79,.22); background: rgba(231,243,236,.4); }
.seal .sc { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #1E7F4F; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; }
.seal .sc svg { width: 12px; height: 12px; stroke: #1E7F4F; fill: none; stroke-width: 2.6; }
.seal .l1 { font-size: 8.5px; font-weight: 800; letter-spacing: .07em; line-height: 1.25; }
.seal .l2 { font-size: 7px; color: #1E7F4F; opacity: .85; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.seal.pending { border-color: var(--amber); color: var(--amber); background: rgba(251,241,227,.5); transform: rotate(-3deg); }
.seal.pending .sc { border-color: var(--amber); } .seal.pending .sc svg { stroke: var(--amber); } .seal.pending .l2 { color: var(--amber); }

/* ---------- Interaktions-Hinweis ---------- */
.pa-hint { position: absolute; z-index: 6; left: 232px; top: 322px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(20,22,27,.45); pointer-events: none;
  animation: hintBob 1.8s ease-in-out infinite; }
.pa-hint::before { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right-color: var(--ink); border-left: none; }
.pa-hint svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; }
.pa-hint.hide { opacity: 0; transform: scale(.9); transition: opacity .4s, transform .4s; }
@keyframes hintBob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (max-width: 1020px) { .pa-hint { display: none; } }

/* ---------- Posteingang (im Produkt-Kontext) ---------- */
.inbox2 { display: grid; grid-template-columns: 280px 1fr; height: 100%; }
.inbox2 .app-list, .inbox2 #convList { overflow-x: hidden; }
.inbox2 .conv-prev { max-width: 100%; }

/* ---------- Analytics-Akzent (Sidebar) ---------- */
.pa-nav.analytics .pa-item.act { background: var(--analytics-soft); color: var(--analytics); }
.pa-nav.analytics .pa-item.act::before { background: var(--analytics); }

/* ---------- Cockpit-Agenda ---------- */
.ag { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--pa-line-2); font-size: 12.5px; }
.ag:last-child { border-bottom: none; }
.ag .agi { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ag .agi svg { width: 14px; height: 14px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ag .agt { flex: 1; min-width: 0; } .ag .agt b { font-weight: 600; display: block; } .ag .agt .s { font-size: 10.5px; color: var(--ink-3); }
.ag .agm { font-size: 10.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.appt { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pa-line-2); font-size: 12.5px; }
.appt:last-child { border-bottom: none; }
.appt .tm { font-weight: 700; } .appt .who { font-weight: 600; } .appt .tr { font-size: 10.5px; color: var(--ink-3); }
.appt .pa-av { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- Sichere elektronische Signatur ---------- */
.esig { border-top: 1px solid var(--pa-line); margin-top: 8px; padding-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.esig .sig { font-family: "Caveat", cursive; font-size: 32px; line-height: .9; color: #2a2d6b; }
.esig .sig-l { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.esig-box { border: 1px solid #CFE8D8; background: var(--bind-soft); border-radius: 10px; padding: 9px 12px; min-width: 188px; }
.esig-box .eh { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bind); }
.esig-box .eh svg { width: 12px; height: 12px; fill: none; stroke: var(--bind); stroke-width: 2; }
.esig-box .er { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--ink-2); margin-top: 5px; }
.esig-box .er b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Recall-Tags ---------- */
.ph-tag { font-size: 10px; font-weight: 600; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--hair); border-radius: 99px; padding: 2px 8px; }

/* ---------- HKP-Tabelle: Summenleiste + cleane Zeilen ---------- */
.hkp-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hkp-sum .hs { font-size: 11px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--pa-line); border-radius: 8px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 7px; }
.hkp-sum .hs .d { width: 7px; height: 7px; border-radius: 50%; }
.hkp-sum .hs b { font-weight: 700; color: var(--ink); }
.hkp-sum .hs.total { margin-left: auto; background: var(--ink); color: #fff; border-color: var(--ink); }
.hkp-sum .hs.total b { color: #fff; }
.lst-h, .hkp-row { grid-template-columns: 1.7fr 1.05fr 1.5fr 0.7fr; }
.hkp-row { min-height: 56px; }
.hkp-row .np { font-size: 10px; font-weight: 700; color: var(--win); background: var(--win-soft); border-radius: 5px; padding: 2px 7px; white-space: nowrap; margin-left: 6px; }
.hkp-row .auto-t .nx { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }

/* ---------- Responsive ---------- */
.anam-back { display: none; }
@media (max-width: 1020px) {
  .pa { grid-template-columns: 1fr; }
  .pa-side { display: none; }
  .pa-railm { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--pa-line); background: var(--pa-sidebar); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pa-railm::-webkit-scrollbar { display: none; }
  .pa-railm button { white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--pa-line); border-radius: 99px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .pa-railm button .d { width: 6px; height: 6px; border-radius: 50%; }
  .pa-railm button.act { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* Mini-App Mobile: Header & Layout */
  #pa .pa-top { padding: 10px 14px; align-items: flex-start; }
  #pa .pa-top .pa-crumb { display: none; }
  #pa:not([data-view-active="posteingang"]) .pa-actions { display: none; }
  #pa .pa-view:not(.flush) { padding: 12px 14px; }
  #pa .grid4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  #pa .grid3 { grid-template-columns: 1fr; gap: 10px; }
  #pa .grid2 { grid-template-columns: 1fr; gap: 10px; }
  #pa .pc-pad { padding: 12px 13px; }
  #pa .pc-h { font-size: 12px; flex-wrap: wrap; gap: 4px; line-height: 1.35; }
  #pa .pc-h .pc-sub,
  #pa .pc-h .pc-r { font-size: 10px; }
  #pa .chartwrap svg { height: 72px; }
  #pa .chart-x { padding-left: 28px !important; font-size: 9px; }

  /* Avatare & Initialen: nicht verzerren */
  #pa .pa-av,
  #pa .ava,
  #pa .book-row .pn .pa-av,
  #pa .hkp-row .pn .pa-av,
  #pa .thread-head .ava { flex-shrink: 0; aspect-ratio: 1; line-height: 1; }
  #pa .kpi-c .kc-l .ic,
  #pa .profcard .pf-ic,
  #pa .chrow .chic,
  #pa .ag .agi { flex-shrink: 0; }
  #pa .tmeta .ppl .pp { flex-shrink: 0; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; }

  #pa .kpi-c { padding: 10px 11px; }
  #pa .kpi-c .kc-l { font-size: 10px; gap: 5px; }
  #pa .kpi-c .kc-l .ic { width: 18px; height: 18px; min-width: 18px; }
  #pa .kpi-c .kc-l .ic svg { width: 10px; height: 10px; }
  #pa .kpi-c b { font-size: 20px; margin-top: 7px; }
  #pa .kpi-c .kc-d { font-size: 10px; }

  /* Posteingang: Chat-Ansicht */
  #pa .inbox2 { grid-template-columns: 1fr; height: 100%; }
  #pa .inbox2:not(.show-list) .app-list { display: none; }
  #pa .inbox2.show-list .app-thread { display: none; }
  #pa .inbox2 .t-back { display: inline-flex; }
  #pa .thread-head .t-window { display: none; }
  #pa .thread-head .t-meta { font-size: 10px; }

  /* Cockpit: KPIs + Kurzliste */
  #pa .pa-view[data-view="cockpit"] .grid2 > .pc:nth-child(2),
  #pa .pa-view[data-view="cockpit"] .grid2 .pc:first-child .ag:nth-child(n+4),
  #pa .pa-view[data-view="cockpit"] .grid2 .pc:first-child > p { display: none; }
  #pa .pa-view[data-view="cockpit"] .ag .agm { display: none; }

  /* Analytics: Kern-KPIs, Umsatz-/Neupatientengrafik + Auslastung */
  #pa .pa-view[data-view="analytics"] .grid2 > .pc:first-child { display: none; }
  #pa .pa-view[data-view="analytics"] .barl .br:nth-child(n+4) { display: none; }
  #pa .pa-view[data-view="analytics"] .barl .br { grid-template-columns: 1fr 1fr 32px; font-size: 11px; }

  /* Online-Auftritt: Kanäle + Score */
  #pa .pa-view[data-view="online"] .algo-note { font-size: 10px; padding: 8px 10px; margin-bottom: 10px !important; }
  #pa .pa-view[data-view="online"] .profcard { padding: 12px 13px; }
  #pa .pa-view[data-view="online"] .profcard .pf-n { font-size: 12px; }
  #pa .pa-view[data-view="online"] .profcard .pf-s { font-size: 10px; }
  #pa .pa-view[data-view="online"] .profcard .pf-score b { font-size: 17px; }
  #pa .pa-view[data-view="online"] .opt-row { display: none; }
  #pa .pa-view[data-view="online"] > .pc.pc-pad { display: none; }

  /* Werbung: Budget + KPIs */
  #pa .pa-view[data-view="werbung"] .tgp,
  #pa .pa-view[data-view="werbung"] .grid2,
  #pa .pa-view[data-view="werbung"] .lst,
  #pa .pa-view[data-view="werbung"] > p,
  #pa .pa-view[data-view="werbung"] .budget-legend .ph-tag,
  #pa .pa-view[data-view="werbung"] .camp-head .pa-pill { display: none; }
  #pa .pa-view[data-view="werbung"] .camp-head > span { font-size: 12px !important; }

  /* Bewertungen: Score + 2 Reviews */
  #pa .pa-view[data-view="bewertungen"] .grid2 > .pc:nth-child(2) { display: none; }
  #pa .pa-view[data-view="bewertungen"] .pc-h + .grid2 .rev:nth-child(n+3) { display: none; }
  #pa .pa-view[data-view="bewertungen"] .camp-kpi { grid-template-columns: repeat(3, 1fr); }

  /* Automationen: 3 Kern-Kampagnen */
  #pa .pa-view[data-view="automationen"] .auto-row:nth-child(n+4),
  #pa .pa-view[data-view="automationen"] .auto-row .ph-tag,
  #pa .pa-view[data-view="automationen"] .auto-row .toggle,
  #pa .pa-view[data-view="automationen"] > p { display: none; }
  #pa .pa-view[data-view="automationen"] .auto-row {
    display: grid; grid-template-columns: 1fr; gap: 6px;
    padding: 12px 14px; align-items: start;
  }
  #pa .pa-view[data-view="automationen"] .auto-row .ar-stat { display: block; text-align: left; margin-top: 4px; }

  /* Aufgaben: eine Spalte */
  #pa .pa-view[data-view="aufgaben"] .tkcols > div:nth-child(n+2) { display: none; }
  #pa .pa-view[data-view="aufgaben"] .tcard .qmbar { display: none; }

  /* HKP: KPIs + kompakte Liste */
  #pa .pa-view[data-view="hkp"] .grid3 .kpi-c:nth-child(3) { display: none; }
  #pa .pa-view[data-view="hkp"] .hkp-sum .hs:not(.total):nth-child(n+3) { display: none; }
  #pa .pa-view[data-view="hkp"] .hkp-row:nth-child(n+5) { display: none; }
  #pa .pa-view[data-view="hkp"] .lst-h,
  #pa .pa-view[data-view="hkp"] .hkp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; padding: 10px 12px; align-items: center;
  }
  #pa .pa-view[data-view="hkp"] .lst-h span:nth-child(2),
  #pa .pa-view[data-view="hkp"] .lst-h span:nth-child(3),
  #pa .pa-view[data-view="hkp"] .hkp-row > div:nth-child(2),
  #pa .pa-view[data-view="hkp"] .hkp-row .auto-t,
  #pa .pa-view[data-view="hkp"] .hkp-row .np { display: none; }
  #pa .pa-view[data-view="hkp"] .hkp-row .val { text-align: right; white-space: nowrap; }

  /* Anamnese: Liste ↔ Detail wie Posteingang */
  .anam3 { grid-template-columns: 1fr; height: 100%; }
  .anam3:not(.show-doc) .anam-page { display: none; }
  .anam3.show-doc .anam-docs { display: none; }
  .anam-page { padding: 10px 12px; }
  .anam-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--pa-line); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
  .anam-back:hover { border-color: var(--ink-3); color: var(--ink); }
  .pdfpage { padding: 16px 18px 18px; max-width: none; }
  .pdf-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pdf-title { font-size: 15px; }
  .pdf-meta { font-size: 10.5px; line-height: 1.45; }
  .ai-sum { padding: 11px 12px; margin: 12px 0; }
  .ai-sum p { font-size: 11px; }
  .qa-grid { grid-template-columns: 1fr; gap: 0; }
  .pdf-sign { grid-template-columns: 1fr; gap: 14px; }
  .seal { width: 118px; margin: 0 auto; }
  .adoc { padding: 11px 12px; }
  .adoc-sum { display: none; }
}
@media (max-width: 760px) {
  .pa { height: 580px; }
  #pa .grid4, #pa .grid3, #pa .camp-kpi { grid-template-columns: 1fr 1fr; }
  #pa .grid3 { grid-template-columns: 1fr; }
  .grid4, .grid3, .camp-kpi { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .tkcols { grid-template-columns: 1fr; }
  .anam { grid-template-columns: 1fr; }
  .anam2 { grid-template-columns: 1fr; }
  .anam2 .anam-list { display: none; }
  .inbox2 { grid-template-columns: 1fr; }
  .kan { grid-auto-columns: 78%; }
  .qa-grid { grid-template-columns: 1fr; }
  .lst-h, .hkp-row { grid-template-columns: 1.4fr auto; gap: 8px; }
  .lst-h span:nth-child(3), .hkp-row .auto-t { display: none; }
}

/* ===== Mockup: rahmenlose Karte (geteilt über alle Feature-Seiten) ===== */
.phone {
  width: 100%; max-width: 340px; margin: 0 auto;
}
.phone-scr {
  position: relative;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: 0 26px 56px -30px rgba(20,22,27,.32);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Telefon-Chrome (Statusleiste, Notch, Eingabezeile) in der Karte ausblenden */
.phone-notch, .ph-bar, .pc-input { display: none !important; }
/* Karte bekommt etwas Innenabstand */
.phone-scr { padding: 14px 14px 4px; }