/* Vertriebscockpit: dunkle Kopfzeile, darunter je Rolle eine Arbeitsfläche (Liste links, Detail rechts) */
:root {
  --bg: #F2F3EF; --surface: #FFFFFF; --surface2: #F6F7F4; --line: #DADDD5; --line2: #A9B0A8;
  --fg: #18211D; --fg2: #3A4640; --muted: #5A655F;
  --accent: #0B5D4B; --accent-fg: #FFFFFF; --accent-soft: #E3EFEA;
  --warn-bg: #F6E7B8; --warn-fg: #4A3300; --bad-bg: #F7E3DB; --bad-fg: #8A2E12;
  --bar: #14201B; --bar-fg: #FFFFFF; --bar-muted: #C3CDC7; --bar-active: #2A3A33; --bar-line: #5E6E66;
  --c1f: #1A4F8C; --c1b: #E1EBF7; --c1s: #1F5FA8;
  --c2f: #8A4208; --c2b: #FAE9D8; --c2s: #D98A3A;
  --c3f: #5B348C; --c3b: #EEE6F6; --c3s: #B79BD6;
  --c4f: #0B5D4B; --c4b: #DDEFE9; --c4s: #3E9B82;
  --c5f: #8C2A52; --c5b: #F8E3EC; --c5s: #C96A92;
  --o-au: #0B5D4B; --o-an: #3E9B82; --o-te: #9AD3C2; --o-wv: #E0B458; --o-ne: #C9CEC7; --o-ab: #B5532F; --o-df: #5A655F;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111714; --surface: #19211D; --surface2: #202A25; --line: #2F3A34; --line2: #55635B;
  --fg: #E6ECE8; --fg2: #C5CEC9; --muted: #9CA9A2;
  --accent: #4DB89C; --accent-fg: #06241C; --accent-soft: #1B3A31;
  --warn-bg: #4A3B10; --warn-fg: #F3DFA0; --bad-bg: #4A2318; --bad-fg: #F2B8A4;
  --bar: #0B100E; --bar-fg: #FFFFFF; --bar-muted: #B4C0BA; --bar-active: #24322C; --bar-line: #55635B;
  --c1f: #A9CBF2; --c1b: #17304D; --c1s: #5B96D6;
  --c2f: #F2C596; --c2b: #47290C; --c2s: #D98A3A;
  --c3f: #D3BCEE; --c3b: #33214D; --c3s: #9C7CC4;
  --c4f: #9FDCCB; --c4b: #12392F; --c4s: #3E9B82;
  --c5f: #F0B3CB; --c5b: #47182C; --c5s: #C96A92;
  --o-au: #4DB89C; --o-an: #2F8A72; --o-te: #1F5A4B; --o-wv: #E0B458; --o-ne: #55635B; --o-ab: #D0704A; --o-df: #9CA9A2;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #111714; --surface: #19211D; --surface2: #202A25; --line: #2F3A34; --line2: #55635B;
  --fg: #E6ECE8; --fg2: #C5CEC9; --muted: #9CA9A2;
  --accent: #4DB89C; --accent-fg: #06241C; --accent-soft: #1B3A31;
  --warn-bg: #4A3B10; --warn-fg: #F3DFA0; --bad-bg: #4A2318; --bad-fg: #F2B8A4;
  --bar: #0B100E; --bar-fg: #FFFFFF; --bar-muted: #B4C0BA; --bar-active: #24322C; --bar-line: #55635B;
  --c1f: #A9CBF2; --c1b: #17304D; --c1s: #5B96D6;
  --c2f: #F2C596; --c2b: #47290C; --c2s: #D98A3A;
  --c3f: #D3BCEE; --c3b: #33214D; --c3s: #9C7CC4;
  --c4f: #9FDCCB; --c4b: #12392F; --c4s: #3E9B82;
  --c5f: #F0B3CB; --c5b: #47182C; --c5s: #C96A92;
  --o-au: #4DB89C; --o-an: #2F8A72; --o-te: #1F5A4B; --o-wv: #E0B458; --o-ne: #55635B; --o-ab: #D0704A; --o-df: #9CA9A2;
  color-scheme: dark }
* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.45 }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance }
h1 { font-size: 24px } h2 { font-size: 17px } h3 { font-size: 15px }
p { margin: 0 }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.bar { background: var(--bar); color: var(--bar-fg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 8px 20px }
.brand { font-weight: 600; font-size: 16px } .brand span { font-weight: 400; color: var(--bar-muted) }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto }
.nav button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--bar-muted); font-weight: 500; cursor: pointer }
.nav button[aria-current="page"] { background: var(--bar-active); color: var(--bar-fg) }
.who { display: flex; align-items: center; gap: 8px; color: var(--bar-muted) }
.find { flex: 0 1 280px; min-width: 160px } .find[hidden] { display: none }
.find input { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--bar-line); background: var(--bar-active); color: var(--bar-fg); font: inherit }
.find input::placeholder { color: var(--bar-muted); opacity: 1 }
.who select { min-height: 44px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--bar-line); background: var(--bar-active); color: var(--bar-fg); max-width: 100% }
.wrap { max-width: 1360px; margin: 0 auto; padding-block: 24px; padding-inline: 20px; display: flex; flex-direction: column; gap: 20px }
.row { display: flex; flex-wrap: wrap; gap: 16px } .col { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.between { justify-content: space-between; align-items: center }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px }
.soft { background: var(--surface2); border-radius: 8px; padding: 14px 16px }
.note { background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: 12px 14px }
.muted { color: var(--muted) } .fg2 { color: var(--fg2) } .small { font-size: 13px } .num { font-variant-numeric: tabular-nums } .b { font-weight: 600 }
.eyebrow { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.btn { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line2); background: var(--surface); cursor: pointer; font-weight: 500 }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600 }
.btn.on { background: var(--fg); border-color: var(--fg); color: var(--bg) }
.btn.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-fg) }
.btn:disabled { opacity: .55; cursor: not-allowed }
.pill { border-radius: 999px }
.chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px }
.chip.ok { background: var(--accent-soft); color: var(--accent) } .chip.warn { background: var(--warn-bg); color: var(--warn-fg) } .chip.bad { background: var(--bad-bg); color: var(--bad-fg) }
.chip.done { background: var(--accent); color: var(--accent-fg); font-weight: 600 } .chip.plain { background: var(--line); color: var(--fg) }
.cc1 { color: var(--c1f); background: var(--c1b) } .cc2 { color: var(--c2f); background: var(--c2b) } .cc3 { color: var(--c3f); background: var(--c3b) } .cc4 { color: var(--c4f); background: var(--c4b) } .cc5 { color: var(--c5f); background: var(--c5b) }
.cb1 { background: var(--c1s) } .cb2 { background: var(--c2s) } .cb3 { background: var(--c3s) } .cb4 { background: var(--c4s) } .cb5 { background: var(--c5s) }
.inp { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 6px; background: var(--surface); width: 100% }
textarea.inp { resize: vertical; display: block }
.f { display: flex; flex-direction: column; gap: 4px; font-weight: 500; min-width: 0 }
table { border-collapse: collapse; width: 100% }
th { font-weight: 500; color: var(--muted); font-size: 13px; text-align: left; padding: 6px 10px }
td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top }
.r { text-align: right } th.r { text-align: right }
.scroll { overflow-x: auto }
.meter { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden } .meter > i { display: block; height: 100%; background: var(--accent) }
.stack { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--line) } .stack > i { display: block; height: 100% }
.qi { text-align: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--surface) }
.qi[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft) }
.qi .nm { font-weight: 600; display: block } .qi .sc { font-size: 18px; font-weight: 600 }
.hook { background: var(--accent-soft); border-radius: 8px; padding: 18px 20px } .hook ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px } .hook li { font-size: 17px; line-height: 1.4 } .hook li::marker { color: var(--accent) }
.mx { border-collapse: separate; border-spacing: 3px } .mx td, .mx th { border: 0; padding: 6px 6px; text-align: right } .mx th:first-child, .mx td:first-child { text-align: left }
.mx td.f1 { background: var(--accent-soft); border-radius: 4px; font-weight: 500 } .mx tr.sum td { border-top: 2px solid var(--fg); font-weight: 600 }
.kpi { flex: 1 1 170px } .kpi .v { font-size: 28px; font-weight: 600; line-height: 1.2 }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 6px }
.srcbtn { text-align: left; flex: 1 1 260px; min-height: 68px; padding: 12px 14px; border-radius: 8px; cursor: pointer; border: 2px solid var(--line); background: var(--surface) }
.srcbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
ul.plain, ol.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: 8px; max-width: min(92vw, 560px); z-index: 10 }
input[type="range"] { accent-color: var(--accent); min-height: 44px; flex: 1 1 auto; min-width: 0 }
@media (prefers-reduced-motion: no-preference) { .meter > i { transition: width .2s } }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; min-height: 100vh }
[hidden] { display: none !important }
.bar[hidden] { display: none }
.me { display: flex; align-items: center; gap: 8px; color: var(--bar-muted) }
.me button { min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--bar-line); background: transparent; color: var(--bar-fg); cursor: pointer; font-weight: 500 }
.login { max-width: 440px; width: 100%; margin: 8vh auto 0 }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace }