/* Vertriebssystem Amperatec. Design-System design/amperatec/ (Tiefblau, Inter, Geist Mono, 8/4/0 px, Linien statt Schatten).
   Layout: Seitenleiste in Tiefblau links, Arbeitsfläche auf neutralem Grund, weiße Karten mit 1-px-Linie. Ein heller Modus
   nach Festlegung des Design-Systems („Einen Dunkelmodus gibt es nicht“). */
:root {
  --bg: #f4f5f4; --surface: #ffffff; --surface-2: #f0f1f0; --surface-3: #eceeed;
  --line: #e3e4e2; --line-strong: #d0d3d0; --line-control: #868a94; --subtle: #bbbec4;
  --ink: #060712; --ink-2: #30333b; --muted: #5f636c;
  --accent: #102446; --accent-hover: #1a3766; --on-accent: #ffffff; --accent-a15: rgba(16, 36, 70, 0.15);
  --dark: #102446; --dark-2: #0c1d3a; --line-dark: #22385c; --on-dark: #ffffff; --on-dark-2: #dbdee5; --on-dark-muted: #aab4c6; --accent-on-dark: #a9c4ec;
  --ok: #1d7d3e; --ok-soft: #e6fae9; --alert: #be222a; --alert-soft: #ffefed; --warn: #8a5a00; --warn-soft: #fff4dc;
  --trace: #3b74c9; --trace-2: #a3a9b3;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "Inter", ui-monospace, SFMono-Regular, monospace;
  --r-card: 8px; --r-ctl: 4px;
  --leiste: 232px;
  color-scheme: light;
}
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a > svg, .kennzeilen svg, .fakt svg, .unter svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.leiste a.nav > svg { width: 18px; height: 18px; vertical-align: middle; margin-right: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 20px; line-height: 1.3; }
h2 { font-size: 16px; line-height: 1.4; }
h3 { font-size: 14px; line-height: 1.4; }
p { margin: 0; }
.mono, .zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.klein { font-size: 12px; }
.eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gerüst */
.app { display: grid; grid-template-columns: var(--leiste) 1fr; min-height: 100%; }
.leiste { background: var(--dark); color: var(--on-dark-2); display: flex; flex-direction: column; padding: 18px 12px; gap: 6px; position: sticky; top: 0; height: 100vh; }
.leiste .marke { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: var(--on-dark); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.leiste .marke svg { width: 22px; height: 22px; }
.leiste .marke small { display: block; font-weight: 400; font-size: 11px; color: var(--on-dark-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.leiste nav { display: flex; flex-direction: column; gap: 2px; }
.leiste .gruppe { padding: 14px 8px 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); }
.leiste a.nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--on-dark-2); font-weight: 500; font-size: 14px; }
.leiste a.nav:hover { background: var(--dark-2); text-decoration: none; color: var(--on-dark); }
.leiste a.nav.aktiv { background: var(--dark-2); color: var(--on-dark); box-shadow: inset 2px 0 0 var(--accent-on-dark); }
.leiste a.nav svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.9; }
.leiste a.nav .zaehler { margin-left: auto; font-family: var(--mono); font-size: 11px; background: var(--accent-on-dark); color: var(--dark); border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center; }
.leiste .unten { margin-top: auto; padding: 8px; font-size: 12px; color: var(--on-dark-muted); display: flex; flex-direction: column; gap: 6px; }
.leiste .unten .ich { display: flex; align-items: center; gap: 8px; color: var(--on-dark-2); }
.inhalt { min-width: 0; padding-block: 20px 56px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 16px; }
.kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kopf h1 { margin-right: auto; }
.kopf .datum { color: var(--muted); font-size: 13px; }

/* Festhalten-Zeile */
.festhalten { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 6px 6px 6px 12px; }
.festhalten svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.festhalten input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 6px 4px; font-size: 14px; }
.festhalten input:focus { outline: none; }
.festhalten .hinweis { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Karten, Tabellen, Knöpfe, Chips */
.karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.karte > .kk { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte > .kk h2 { margin-right: auto; }
.karte > .ki { padding: 12px 16px; }
.raster { display: grid; gap: 16px; }
.raster.zwei { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster > * { min-width: 0; }
.raster > div { grid-template-columns: minmax(0, 1fr); }
.karte, details.karte { min-width: 0; max-width: 100%; }
.knopf { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; line-height: 1.3; }
.knopf:hover { background: var(--surface-2); }
.knopf.primaer { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.knopf.primaer:hover { background: var(--accent-hover); }
.knopf.leise { border-color: transparent; background: transparent; color: var(--accent); }
.knopf.leise:hover { background: var(--surface-2); }
.knopf.klein { padding: 4px 8px; font-size: 12px; }
.knopf svg { width: 15px; height: 15px; }
.knopf:disabled { opacity: 0.5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-ctl); background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.alert { background: var(--alert-soft); color: var(--alert); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.dunkel { background: var(--accent); color: var(--on-accent); }
.chip.umriss { background: transparent; border: 1px solid var(--line-strong); }
.chip svg { width: 12px; height: 12px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--ink); font-size: 11px; font-weight: 600; flex: 0 0 auto; letter-spacing: 0.02em; }
.avatar.gross { width: 40px; height: 40px; font-size: 15px; }
.avatar.leo { background: var(--accent); color: var(--on-accent); }
.avatar.jascha { background: #d9e2f1; color: var(--accent); }
.avatar.ki { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line-control); }
.avatar.firma { border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
input.feld, select.feld, textarea.feld { width: 100%; border: 1px solid var(--line-control); border-radius: var(--r-ctl); padding: 7px 10px; background: var(--surface); font-size: 13px; }
input.feld:focus, select.feld:focus, textarea.feld:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15); }
textarea.feld { resize: vertical; min-height: 60px; }
.feldzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.klick { cursor: pointer; }
.tabelle tr.klick:hover td { background: var(--surface-2); }
.tabellenwrap { overflow-x: auto; }
.leer { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.leer strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* Stufenleiste (Pipeline-Fortschritt) */
.stufen { display: flex; gap: 3px; align-items: stretch; }
.stufen .s { flex: 1; min-width: 0; position: relative; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.stufen .s.erreicht { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stufen .s.jetzt { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: inset 0 -3px 0 var(--accent-on-dark); }
.stufen .s.verloren { background: var(--alert-soft); border-color: var(--alert-soft); color: var(--alert); }
.stufen.mini .s { height: 6px; padding: 0; font-size: 0; border-radius: 1px; }
.stufen.mini .s.jetzt { box-shadow: none; }

/* Pipeline-Zeile */
.pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pipeline .spalte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
.pipeline .spalte .n { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1; }
.pipeline .spalte .t { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pipeline .spalte .firmen { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.pipeline .spalte .firmen a { display: flex; align-items: center; gap: 6px; color: var(--ink-2); overflow: hidden; }
.pipeline .spalte .firmen a span.n { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-weight: 400; color: var(--ink-2); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); flex: 0 0 auto; }
.punkt.frisch { background: var(--ok); }
.punkt.alt { background: var(--warn); }
.punkt.still { background: var(--alert); }

/* Zeitstrahl */
.zeitstrahl { position: relative; padding-left: 34px; display: flex; flex-direction: column; gap: 0; }
.zeitstrahl::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); }
.zeitstrahl .tag { position: relative; padding: 14px 0 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.zeitstrahl .tag::before { content: ""; position: absolute; left: -26px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-control); box-sizing: border-box; }
.zeitstrahl .heute { position: relative; margin: 10px 0; border-top: 2px solid var(--accent); }
.zeitstrahl .heute span { position: absolute; left: -34px; top: -10px; background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; font-weight: 600; }
.eintrag { position: relative; display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: var(--r-ctl); }
.eintrag:hover { background: var(--surface); }
.eintrag .knoten { position: absolute; left: -28px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.eintrag .knoten svg { width: 10px; height: 10px; }
.eintrag.ki .knoten { border-style: dashed; color: var(--muted); }
.eintrag.offen .knoten { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.eintrag.ueberfaellig .knoten { background: var(--alert-soft); border-color: var(--alert); color: var(--alert); }
.eintrag.neu { box-shadow: inset 3px 0 0 var(--trace); }
.eintrag .wann { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; white-space: nowrap; }
.eintrag .was { min-width: 0; }
.eintrag .was .zeile1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.eintrag .was .zeile1 a.firma { font-weight: 600; color: var(--ink); }
.eintrag .was .zeile1 .person { color: var(--muted); font-size: 12px; }
.eintrag .was .satz { color: var(--ink-2); }
.eintrag .wer { display: flex; gap: 6px; align-items: center; }
.eintrag .quellen { display: flex; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.eintrag .quellen a { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.eintrag .quellen a svg { width: 11px; height: 11px; }
.eintrag details { margin-top: 4px; }
.eintrag details summary { cursor: pointer; font-size: 12px; color: var(--accent); list-style: none; }
.eintrag details summary::-webkit-details-marker { display: none; }
.eintrag .detail { margin-top: 6px; display: grid; gap: 8px; font-size: 13px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-ctl); }
.eintrag .detail h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.eintrag .detail ul { margin: 0; padding-left: 18px; }
.eintrag .detail blockquote { margin: 0; padding-left: 10px; border-left: 2px solid var(--line-strong); color: var(--ink-2); font-style: italic; }

/* Aufgabenzeilen */
.aufgabe { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.aufgabe:last-child { border-bottom: 0; }
.aufgabe input[type=checkbox] { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); }
.aufgabe .t { min-width: 0; }
.aufgabe .t .was { color: var(--ink); }
.aufgabe .t .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.aufgabe .bis { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.aufgabe .bis.ueberfaellig { color: var(--alert); font-weight: 500; }
.aufgabe .bis.heute { color: var(--warn); font-weight: 500; }
.aufgabe.erledigt .was { color: var(--muted); text-decoration: line-through; }

/* Firmenblatt */
.firmenkopf { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
.firmenkopf .titel h1 { font-size: 22px; }
.firmenkopf .titel .unter { color: var(--muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; align-items: center; }
.tabelle td.nowrap { white-space: nowrap; }
.kennzeilen { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; font-size: 13px; align-items: baseline; }
.kennzeilen dt { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.kennzeilen dd { margin: 0; color: var(--ink); }
.steckbrief .fakt { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: start; }
.steckbrief .fakt:last-child { border-bottom: 0; }
.steckbrief .fakt .q { font-size: 11px; color: var(--muted); white-space: nowrap; }
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.person-karte { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); align-items: center; cursor: pointer; }
.person-karte:hover { border-color: var(--line-control); }
.person-karte .n { font-weight: 600; color: var(--ink); }
.person-karte .r { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-karte .m { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* Anrufliste */
.anruf-abschnitt summary { cursor: pointer; padding: 10px 16px; display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--ink); list-style: none; }
.anruf-abschnitt summary::-webkit-details-marker { display: none; }
.anruf-abschnitt summary .n { font-family: var(--mono); font-weight: 500; color: var(--muted); font-size: 12px; }
.anruf-abschnitt summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s; }
.anruf-abschnitt[open] summary::before { transform: rotate(90deg); }
.anruf-sub { padding: 10px 16px 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--line-strong); }
.anruf-sub h3 { font-size: 13px; }
.anruf-sub .warum { font-size: 12px; color: var(--muted); }
.firmablock { border-top: 1px solid var(--line); }
.firmakopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 16px 7px; background: var(--surface-2); }
.firmakopf .fname { font-weight: 600; color: var(--ink); font-size: 14px; }
.firmakopf .prod { font-size: 12px; color: var(--muted); flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmakopf a[target] { font-size: 12px; white-space: nowrap; }
.fnotiz { padding: 0 16px 8px; font-size: 12px; color: var(--ink-2); background: var(--surface-2); }
.fnotiz b { color: var(--muted); font-weight: 500; }
.kontaktzeile { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(230px, auto) minmax(240px, 1.7fr) auto; gap: 10px 16px; align-items: start; padding: 10px 16px 10px 24px; border-top: 1px solid var(--line); }
.kontaktzeile .wer { min-width: 0; display: grid; gap: 3px; }
.kontaktzeile .wer .nz { display: flex; gap: 8px; align-items: center; }
.kontaktzeile .name { font-weight: 600; color: var(--ink); }
.kontaktzeile .rolle { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontaktzeile .rolle.chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; white-space: normal; }
.kontaktzeile .kontakt { display: grid; gap: 2px; }
.kontaktzeile .kontakt .ln { display: flex; gap: 6px; align-items: center; font-size: 12px; min-height: 24px; flex-wrap: wrap; }
.kontaktzeile .kontakt .k { width: 62px; flex: 0 0 auto; color: var(--muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.kontaktzeile .kontakt .none { color: var(--subtle); }
.kontaktzeile .kontakt .ok { color: var(--ok); }
.kontaktzeile .stand { min-width: 0; font-size: 12px; display: grid; gap: 4px; align-content: start; }
.kontaktzeile .stand .statuszeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kontaktzeile .stand .schritt { color: var(--accent); flex: 1 1 100%; }
.kontaktzeile .stand .schritt svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.kontaktzeile .stand .kurz { color: var(--ink); font-weight: 500; }
.kontaktzeile .stand .notizen { color: var(--ink-2); display: grid; gap: 2px; }
.kontaktzeile .stand .notizen.alle { margin-top: 4px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-ctl); }
.kontaktzeile .stand details summary { cursor: pointer; color: var(--accent); font-size: 12px; list-style: none; }
.kontaktzeile .stand details summary::-webkit-details-marker { display: none; }
.kontaktzeile .aktion { display: flex; gap: 6px; align-items: center; }
.kontaktzeile.erfasst { grid-template-columns: 1fr; background: var(--surface-2); }
.kontaktzeile .erfassen { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr auto; gap: 8px; align-items: start; }
.rel { font-family: var(--mono); font-size: 11px; width: 22px; height: 22px; border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); color: var(--muted); flex: 0 0 auto; }
.rel.A { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rel.B { background: var(--surface-3); color: var(--ink); }

/* Kopieren */
.kopierbar { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.kopierbar .v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); user-select: all; }
.kopier { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-ctl); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); padding: 0; flex: 0 0 auto; }
.kopier:hover { color: var(--accent); border-color: var(--line-control); }
.kopier.ok { color: var(--ok); border-color: var(--ok); }
.kopier svg { width: 12px; height: 12px; }

/* Kalender */
.kal { position: relative; height: calc(100vh - 200px); min-height: 420px; overflow: auto; }
.kal-mehr { display: flex; justify-content: center; padding: 6px; }
.kal-raster { min-width: 760px; }
.kal-kopf, .kal-woche { display: grid; grid-template-columns: 92px repeat(7, minmax(0, 1fr)); }
.kal-kopf { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line-strong); border-top: 1px solid var(--line); }
.kal-kopf > div { padding: 7px 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.kal-woche { border-bottom: 1px solid var(--line); min-height: 112px; }
.kal-woche.aktuell .kw { color: var(--accent); font-weight: 600; }
.kal-woche .kw { padding: 8px; border-right: 1px solid var(--line); display: grid; gap: 2px; align-content: start; font-size: 12px; color: var(--ink); background: var(--surface-2); }
.kal-tag { padding: 5px 5px 6px; border-right: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kal-tag:last-child { border-right: 0; }
.kal-tag.we { background: var(--surface-2); }
.kal-tag.vergangen .tagnr { color: var(--muted); }
.kal-tag.heute { background: #eef3fb; box-shadow: inset 0 2px 0 var(--accent); }
.kal-tag .d { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.kal-tag .tagnr { border: 0; background: transparent; font-family: var(--mono); font-size: 12px; color: var(--ink); cursor: pointer; padding: 1px 6px; border-radius: 10px; }
.kal-tag .tagnr:hover { background: var(--surface-3); }
.kal-tag.heute .tagnr { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.kal-e { display: flex; gap: 5px; align-items: center; font-size: 11.5px; line-height: 1.3; padding: 2px 5px; border-radius: 3px; color: var(--ink-2); min-width: 0; text-decoration: none; }
.kal-e:hover { text-decoration: none; filter: brightness(0.96); }
.kal-e .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kal-e svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--muted); }
.kal-e.termin { background: var(--accent); color: var(--on-accent); }
.kal-e.termin .z { font-family: var(--mono); font-size: 10.5px; opacity: 0.85; flex: 0 0 auto; }
.kal-e.aufgabe { background: var(--warn-soft); color: var(--warn); cursor: pointer; }
.kal-e.aufgabe.ueber { background: var(--alert-soft); color: var(--alert); }
.kal-e.aufgabe.erledigt { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }
.kal-e.aufgabe input { width: 12px; height: 12px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.kal-e.akt { background: var(--surface-3); }
.kal-e.akt.mail svg { color: var(--trace); }
.kal-e.akt.teams svg, .kal-e.akt.demo svg, .kal-e.akt.telefonat svg { color: var(--ok); }
.kal-e.akt.angebot svg { color: var(--warn); }
.kal-mehr-e { border: 0; background: transparent; color: var(--accent); font-size: 11px; cursor: pointer; text-align: left; padding: 1px 5px; }
.kal-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.kal-f { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-ctl); padding: 4px 9px; font-size: 12px; color: var(--muted); cursor: pointer; }
.kal-f i { width: 10px; height: 10px; border-radius: 2px; background: var(--subtle); }
.kal-f.an { color: var(--ink); }
.kal-f.an.termine i { background: var(--accent); }
.kal-f.an.aufgaben i { background: var(--warn); }
.kal-f.an.aktivitaeten i { background: var(--line-control); }
.kal-strahl { padding: 8px 16px 16px 50px; }
.kal-strahl .tag.istheute { color: var(--accent); }
.kal-strahl .luecke { font-size: 11px; color: var(--subtle); padding: 6px 0 2px; font-style: italic; }
.kal-strahl .strahl-aufgaben { margin: 2px 0 4px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.quellenstand { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quellenstand .text { flex: 1 1 320px; }
.quellenstand svg { width: 14px; height: 14px; flex: 0 0 auto; }
.quellenstand.still { padding: 0 2px; }

/* Eingang */
.vorschlag { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.vorschlag:last-child { border-bottom: 0; }
.vorschlag .typ { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.vorschlag .satz { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 12px; font-style: italic; }
.vorschlag .knoepfe { display: flex; gap: 6px; }

/* Übersicht: Trichter, Balken, Wochen */
.trichter { display: grid; gap: 6px; }
.trichter .stufe { display: grid; grid-template-columns: 130px 1fr 48px; gap: 10px; align-items: center; font-size: 12px; }
.trichter .balken { height: 18px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.trichter .balken i { display: block; height: 100%; background: var(--trace); border-radius: 2px; }
.trichter .n { font-family: var(--mono); text-align: right; color: var(--ink); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kachel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; }
.kachel .n { font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.kachel .t { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wochen { display: flex; gap: 4px; align-items: flex-end; height: 70px; }
.wochen .w { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 100%; }
.wochen .w i { display: block; width: 100%; background: var(--trace); border-radius: 2px 2px 0 0; min-height: 2px; }
.wochen .w i.j { background: var(--trace-2); }
.wochen .w span { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* Meldungen und Protokoll */
.meldung { padding: 10px 14px; border-radius: var(--r-ctl); font-size: 13px; border: 1px solid var(--line); background: var(--surface); }
.meldung.alert { border-color: var(--alert); background: var(--alert-soft); color: var(--alert); }
.meldung.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.meldung.warn { background: var(--warn-soft); border-color: var(--warn-soft); color: var(--warn); }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--ink); color: var(--on-dark); padding: 10px 14px; border-radius: var(--r-ctl); font-size: 13px; z-index: 50; max-width: 360px; }
.protokoll { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-ctl); max-height: 320px; overflow: auto; }
.fenster-hinter { position: fixed; inset: 0; background: rgba(6, 7, 18, 0.55); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fenster { background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--line-strong); width: min(640px, 100%); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; }
.fenster .kk { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.fenster .kk h2 { margin-right: auto; }
.fenster .ki { padding: 16px; display: grid; gap: 12px; }
.fenster .kf { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.formular { display: grid; gap: 10px; }
.formular label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.formular label > span { font-weight: 500; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Suche */
.suche { position: relative; }
.suche input { width: 260px; max-width: 100%; padding-left: 30px; }
.suche svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); }
.suchtreffer { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); margin-top: 4px; z-index: 30; max-height: 320px; overflow: auto; }
.suchtreffer a { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.suchtreffer a:last-child { border-bottom: 0; }
.suchtreffer a:hover { background: var(--surface-2); text-decoration: none; }

/* Heute: drei Spalten, Aufgaben zum Ziehen */
.spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spalte { min-width: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.spalte:last-child { border-right: 0; }
.spalte .sk { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.spalte .sk h3 { font-size: 13px; font-weight: 600; margin: 0; }
.spalte .sk .n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.spalte .sk .n.alert { color: var(--alert); }
.spalte .sk .u { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.spalte .sb { flex: 1; min-height: 180px; padding: 4px 6px 10px; border-radius: var(--r-ctl); transition: background 0.12s, box-shadow 0.12s; }
.spalte .sb.ziel { background: var(--accent-a15); box-shadow: inset 0 0 0 2px var(--accent); }
.spalte .sb .tagk { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 10px 6px 2px; }
.spalte .aufgabe { border-bottom: 0; border-radius: var(--r-ctl); padding: 7px 8px; }
.spalte .aufgabe:hover { background: var(--surface-2); }
.spalte .leer { padding: 18px 10px; }
.aufgabe.zieh { cursor: grab; }
.aufgabe.ziehend { opacity: 0.45; }
.aufgabe.termin { box-shadow: inset 3px 0 0 var(--accent); }
.aufgabe .tk { color: var(--accent); margin-top: 2px; display: inline-flex; }
.aufgabe .tk svg { width: 16px; height: 16px; }
.aufgabe.erledigt .t .was { text-decoration: line-through; color: var(--muted); }
button.bis { background: transparent; border: 1px solid transparent; border-radius: var(--r-ctl); padding: 2px 6px; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
button.bis:hover { border-color: var(--line-strong); background: var(--surface); }
button.bis.ueberfaellig { color: var(--alert); font-weight: 500; }
button.bis.heute { color: var(--accent); font-weight: 500; }
.hinweise { display: flex; gap: 8px; flex-wrap: wrap; }
.hinweis-chip { display: inline-flex; align-items: flex-start; gap: 6px; padding: 5px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--ink-2); max-width: 100%; }
.hinweis-chip .ic { display: inline-flex; margin-top: 2px; }
.hinweis-chip .txt { min-width: 0; line-height: 1.4; }
.hinweis-chip svg { width: 13px; height: 13px; color: var(--muted); }
.eintrag .chip { white-space: normal; text-align: left; }
.hinweis-chip.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.hinweis-chip.warn svg { color: var(--warn); }
.schnell { display: flex; gap: 6px; flex-wrap: wrap; }
.toast { display: flex; gap: 10px; align-items: center; }
.toast[hidden] { display: none; }
.toast .knopf { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* Umschalter */
.umschalter { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); overflow: hidden; }
.umschalter button { border: 0; background: var(--surface); padding: 5px 12px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--muted); }
.umschalter button.aktiv { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .leiste { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; overflow-x: auto; z-index: 20; }
  .leiste .marke { padding: 0 8px 0 0; }
  .leiste .marke small { display: none; }
  .leiste nav { flex-direction: row; }
  .leiste .gruppe, .leiste .unten { display: none; }
  .leiste a.nav { padding: 6px 8px; font-size: 13px; }
  .leiste a.nav span.t { display: none; }
  .inhalt { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .raster.zwei, .raster.drei, .zwei-spalten { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontaktzeile { grid-template-columns: 1fr; padding-left: 16px; }
  .kontaktzeile .erfassen { grid-template-columns: 1fr; }
  .kal { height: auto; max-height: 72vh; }
  .eintrag { grid-template-columns: 1fr; }
  .eintrag .wann { order: 2; }
  .firmenkopf { grid-template-columns: 1fr; }
  .festhalten .hinweis { display: none; }
  .suche input { width: 100%; }
  .spalten { grid-template-columns: 1fr; }
  .spalte { border-right: 0; border-bottom: 1px solid var(--line); }
  .spalte:last-child { border-bottom: 0; }
  .spalte .sb { min-height: 0; }
}

/* Anmeldung */
body.login-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--dark); }
.login { background: var(--surface); border-radius: var(--r-card); padding: 28px; width: min(360px, 92vw); display: grid; gap: 14px; }
.login .marke { display: flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.login .marke svg { width: 24px; height: 24px; }
.login .marke small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.login label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.login .knopf { justify-content: center; padding: 9px; }
.leiste a.nav.klein { font-size: 13px; padding: 6px 10px; }

/* Heute */
.termin-zeile { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.termin-zeile .zeit { font-size: 12px; color: var(--muted); }
.termin-zeile .was { color: var(--ink); }
.termin-zeile .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.still-zeile, .agent-zeile { display: flex; gap: 8px; align-items: center; padding: 7px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.still-zeile a, .agent-zeile a { font-weight: 500; }
.agent-zeile .typ { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); width: 72px; flex: 0 0 auto; }
.agent-zeile .t { flex: 1; min-width: 0; }
.karte.briefing { border-left: 3px solid var(--accent); }

/* Pipeline (Kanban) */
.kanban { display: grid; grid-template-columns: repeat(7, minmax(168px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ksp { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); min-height: 320px; display: flex; flex-direction: column; min-width: 0; }
.ksp.ziel { box-shadow: inset 0 0 0 2px var(--accent); }
.ksp > .kk { padding: 8px 10px; display: flex; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--line); }
.ksp > .kk .t { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksp > .kk .n { font-size: 14px; color: var(--ink); }
.ksp .kb { padding: 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kkarte { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: grid; gap: 5px; cursor: grab; }
.kkarte:hover { border-color: var(--line-control); }
.kkarte.ziehend { opacity: 0.45; }
.kkarte .kz1 { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.kkarte .kz1 .name { font-weight: 600; color: var(--ink); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kkarte .kz1 .avatar { width: 20px; height: 20px; font-size: 9px; }
.kkarte .kz2 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kkarte .kz2 .chip { padding: 0 6px; font-size: 11px; }
.kkarte .kz3 { display: flex; gap: 5px; align-items: flex-start; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 5px; }
.kkarte .kz3 svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.kkarte .kz3 .tx { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kkarte .kz3.ueber .mono { color: var(--alert); font-weight: 500; }
.kkarte .kz3.fehlt { color: var(--warn); }
.kkarte .kz3.fehlt svg { color: var(--warn); }

/* Übersicht: gestapelte Wochen */
.wochen .stapel { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-height: 2px; }
.wochen .stapel i { display: block; width: 100%; min-height: 0; }
.wochen .stapel i.l { background: var(--accent); border-radius: 2px 2px 0 0; }
.wochen .stapel i.j { background: #a9c4ec; }
.wochen .stapel i.a { background: var(--trace-2); }
.zahl.alert { color: var(--alert); font-weight: 600; }
.mono.alert { color: var(--alert); }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(7, 210px); } }