/* Lichtraum: beautiXverse Brand Kit über der CompanyOS-Vorlage.
   Verbindliche Spec: beautixverse/projekte/261028-ui-kit/DESIGN.md. Keine neuen Farben, Radien oder Schatten erfinden.
   Aufbau: 1. Schriften  2. Tokens (Lichtraum) und Abbildung der Vorlagen-Variablen  3. Bausteine, die die Vorlage überschreiben. */

/* ════════ 1. Schriften (lokal, damit die Marke auch ohne Google Fonts erkennbar bleibt) ════════ */
@font-face { font-family: 'Archivo'; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-latin.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 300 500; font-display: swap; src: url('/fonts/martian-mono-latin.woff2') format('woff2'); }

/* ════════ 2. Tokens ════════ */
:root {
  /* Tag */
  --canvas: #F4F2F3; --canvas-2: #EAE7EA; --surface: #FCFBFC; --well: #ECE9EC;
  --ink: #100E1C; --ink-2: #47425A; --mute: #5E596F; --on-ink: #F6F4F7;
  --line: rgba(16,14,28,.09); --line-strong: rgba(16,14,28,.5);
  --signal: #E0207B; --focus: #11009E;
  --ok: #276541; --ok-bg: #DFEFE5; --warn: #A3460C; --warn-bg: #FDEDE2; --bad: #B4232F; --bad-bg: #FBE4E6;
  --glaze: linear-gradient(180deg, #2A2638, #100E1C);
  --grad-text: linear-gradient(90deg, #D61F76, #8E1C9C 50%, #3F2FE0);
  /* Marke */
  --mag: #FD3493; --vio: #8E1C9C; --ind: #11009E; --ind-lite: #4B3BFF;
  --grad: linear-gradient(90deg, #FD3493, #A02CC0 50%, #4B3BFF);
  --pearl: radial-gradient(circle at 32% 28%, #ffd3ea 0, #FD3493 22%, #8E1C9C 58%, #11009E 100%);
  --night: #0B0A17; --on-night: #F4F1FA; --night-mute: #A49DB8; --night-line: rgba(255,255,255,.14);
  /* Bereichsfarben */
  --c-umsatz: #FD3493; --c-umsatz-bg: #FDE8F2; --c-umsatz-ink: #C2186B;
  --c-ziel: #8E1C9C; --c-ziel-bg: #F3E6F7; --c-ziel-ink: #7A1786;
  --c-kunde: #4B3BFF; --c-kunde-bg: #E9E7FF; --c-kunde-ink: #3427D6;
  /* Form */
  --r-input: 16px; --r-kerbe: 34px; --r-img: 24px;
  --sh: 0 1px 2px rgba(30,20,50,.06), 0 12px 32px -12px rgba(40,25,70,.18);
  --sh-lift: 0 2px 4px rgba(30,20,50,.06), 0 24px 48px -16px rgba(40,25,70,.26);
  --inset: inset 2px 2px 6px rgba(60,40,80,.12), inset -2px -2px 6px rgba(255,255,255,.9);
  --ease: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1);

  /* Vorlagen-Variablen auf Lichtraum abgebildet, damit alle bestehenden Ansichten mitziehen */
  --green: var(--ink); --green-mid: #2A2638; --green-dark: var(--ink);
  --white: var(--surface); --black: var(--ink);
  --cyan: var(--ind-lite); --cyan-bright: #FF5AA8; --cyan-deep: var(--c-kunde-ink);
  --text-56: var(--mute); --text-32: #6F6A80;
  --border-light: var(--line); --tint: var(--canvas-2); --tint-deep: var(--well);
  --grad-green-cyan-d: linear-gradient(160deg, #0B0A17 0%, #16142A 60%, #2A1F4A 100%);
  --r-card: 28px; --r-control: 16px; --r-chip: 999px; --r-pill: 999px;
  --card-shadow: var(--sh);
  --ease-smooth: var(--ease); --ease-spring: var(--spring);
  --meta: var(--c-kunde-ink); --meta-bg: var(--c-kunde-bg);
  --google: var(--c-ziel-ink); --google-bg: var(--c-ziel-bg);
  --organic: var(--ok); --organic-bg: var(--ok-bg);
  --nl: var(--c-umsatz-ink); --nl-bg: var(--c-umsatz-bg);
}

/* ════════ 3. Bausteine ════════ */
html { font-family: 'Archivo', system-ui, sans-serif; }
body { background: var(--canvas); color: var(--ink); }
.mono, .w .l .n, .w.tablew .head .n { font-family: 'Martian Mono', monospace; font-feature-settings: "tnum"; }

/* Akzentwort statt Serif-Kursive: ein Wort im Verlauf (DESIGN.md, „Fein und kräftig“) */
.serif {
  font-family: 'Archivo', sans-serif; font-style: normal; font-weight: inherit; font-size: 1em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Seitenkopf: Eyebrow, Titel als breite leichte Versalien */
.page-header { padding: 2rem 2rem 0.4rem; border-bottom: 0; background: transparent; }
.page-header h1 {
  font-stretch: 125%; font-weight: 300; text-transform: uppercase; letter-spacing: -0.028em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05;
}
.page-header h1 .serif { color: transparent; }
.page-header p { color: var(--mute); font-size: 0.86rem; margin-top: 0.35rem; }
.eyebrow { font-family: 'Martian Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.5rem; display: block; }

/* Seitenleiste hell (Referenz app-farbe/navigation.html) */
.sb { background: var(--surface); color: var(--ink-2); box-shadow: 1px 0 0 var(--line); padding-top: 1.4rem; }
.sb::before { display: none; }
.sb-brand { padding: 0 1.4rem; margin-bottom: 1.6rem; }
.sb-logo { height: 28px; width: auto; display: block; }
.sb-produkt { font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 0.4rem; }
.sb-grouphead { font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--mute); padding: 0 1.4rem; margin: 0.9rem 0 0.4rem; text-transform: uppercase; font-weight: 400; }
.sb-nav { padding: 0 0.75rem; gap: 0.2rem; }
.sb-nav a { color: var(--ink-2); border-radius: 999px; padding: 0.42rem 0.75rem 0.42rem 0.45rem; gap: 0.7rem; font-size: 0.92rem; }
.sb-nav a:hover { background: var(--canvas); color: var(--ink); }
.sb-nav a.active { background: var(--well); box-shadow: var(--inset); color: var(--ink); font-weight: 600; }
.sb-nav a.active::after { display: none; }
.sb-nav .nic { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; }
.sb-nav .nic img { width: 20px; height: 20px; }
.sb-nav .nic img.an { display: none; width: 32px; height: 32px; }
.sb-nav a.active .nic img.aus { display: none; }
.sb-nav a.active .nic img.an { display: block; }
.sb-nav a .bald { margin-left: auto; font-family: 'Martian Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.sb-nav a .zahl { background: var(--ink); color: var(--on-ink); font-family: 'Martian Mono', monospace; font-size: 11px; border-radius: 999px; }
.sb-user { border-top: 1px solid var(--line); color: var(--ink); }
.sb-user span { color: var(--mute); }
.sb-logout { color: var(--mute); }
.sb-logout:hover { color: var(--ink); }
.avatar { background: var(--ink); color: var(--on-ink); font-family: 'Martian Mono', monospace; }

/* Karten: erhaben, 28 px */
.w { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); border: 0; }
.w:hover { box-shadow: var(--sh-lift); }
.w .l { font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: .12em; font-weight: 400; color: var(--mute); }
.w .l .ic { color: var(--c-kunde-ink); }
.w .v { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 220; letter-spacing: -0.03em; font-feature-settings: "tnum"; }
.w.hero { background: var(--night) url('/img/nebel-dunkel.jpg') center / cover; color: var(--on-night); }
.w.hero .v .euro, .w.hero .l .ic { color: #FF5AA8; }

/* Buttons: Pille, Primär mit Glasur und Perle */
.btn { height: 46px; border-radius: 999px; padding: 0 1.2rem; font-family: 'Archivo', sans-serif; font-stretch: 108%; font-weight: 500; font-size: 0.9rem; gap: 0.6rem; }
.btn-primary { background: var(--glaze); color: var(--on-ink); padding-left: 0.4rem; }
.btn-primary:hover { background: var(--glaze); transform: translateY(-2px); box-shadow: var(--sh-lift); }
.btn-primary .ic {
  width: 34px; height: 34px; border-radius: 50%; background: var(--pearl); color: #fff; font-size: 1rem;
  box-shadow: inset -3px -4px 8px rgba(0,0,0,.35), inset 3px 3px 6px rgba(255,255,255,.35);
}
.btn-secondary { background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--sh); }
.btn-secondary:hover { border-color: var(--ind-lite); color: var(--ink); }
.btn-ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn:focus-visible, .seg button:focus-visible, .sb-nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }

/* Segment-Reiter: weiße Leiste, aktiver Reiter eingeprägt mit Perle */
.seg { background: var(--surface); border-radius: 999px; padding: 5px; box-shadow: var(--sh); border: 1px solid var(--line); }
.seg button { border-radius: 999px; padding: 0.45rem 0.95rem; color: var(--ink-2); font-size: 0.84rem; }
.seg button.active { background: var(--well); box-shadow: var(--inset); color: var(--ink); font-weight: 600; }
.seg button.active::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--pearl); margin-right: 0.45rem; vertical-align: -1px; }

/* Felder: Mulde mit Kontur */
.search, .feld input, .feld select, .feld textarea, .sel {
  background: var(--well); border: 0; border-radius: var(--r-input);
  box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); color: var(--ink);
}
.search { border-radius: 999px; }
.search:focus-within, .feld input:focus, .feld select:focus, .feld textarea:focus {
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); outline: none;
}

/* Tabellen neutral */
.w.tablew .head .hl { font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: .12em; font-weight: 400; color: var(--mute); }
.w.tablew .head .hl .ic { color: var(--ink); }

/* Status-Pillen: Farbe nur mit Wort */
.pill { font-size: 0.72rem; }
.pill.st-aktiv { background: var(--ok-bg); color: var(--ok); }
.pill.st-onboarding { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.pill.st-interessent { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.pill.st-pausiert { background: var(--warn-bg); color: var(--warn); }
.pill.st-gekuendigt { background: var(--well); color: var(--mute); }
.pill.st-test { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }

/* Chip mit X-Schnitt (Bereiche, Produkte) */
.bx-chip {
  --cut: 7px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px;
  font: 400 10px 'Martian Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  background: var(--canvas-2); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); white-space: nowrap;
}
.bx-chip.b-ck-consulting { background: var(--c-umsatz-bg); color: var(--c-umsatz-ink); }
.bx-chip.b-beautixverse { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.bx-chip.b-praxisboost { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* Modal und Leadpanel */
.modal, .leadpanel { background: var(--surface); border-radius: var(--r-card); }
.leadpanel { border-radius: var(--r-card) 0 0 var(--r-card); }
.modal-kopf h2 { font-stretch: 125%; font-weight: 300; text-transform: uppercase; letter-spacing: -0.02em; }

/* Toast in Tinte */
.toast { background: var(--ink); color: var(--on-ink); border-radius: 999px; }

/* Bühne: Nacht-Band für die Hauptkennzahlen (DESIGN.md „Farbe in der App“, Referenz index.html .bx-stage) */
.w.bx-stage { grid-column: span 12; position: relative; overflow: hidden; border-radius: var(--r-card); padding: 30px 150px 30px 32px;
  color: var(--on-night); background: var(--night) url('/img/nebel-dunkel.jpg') center / cover; box-shadow: var(--sh); }
.w.bx-stage:hover { box-shadow: var(--sh); }
.w.bx-stage::before { content: ""; position: absolute; inset: -40% 40% auto -10%; height: 140%; background: radial-gradient(closest-side, rgba(253,52,147,.35), transparent); pointer-events: none; }
.w.bx-stage::after { content: ""; position: absolute; inset: auto -10% -60% 50%; height: 140%; background: radial-gradient(closest-side, rgba(75,59,255,.35), transparent); pointer-events: none; }
.w.bx-stage > * { position: relative; z-index: 1; }
.w.bx-stage .ring { position: absolute; z-index: 0; right: -110px; top: -170px; width: 280px; height: 280px; border-radius: 50%; border: 1.5px solid transparent;
  background: conic-gradient(from 180deg, #4B3BFF 0deg, #A02CC0 45deg, #FD3493 90deg, #4B3BFF 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.w.bx-stage .ring-pearl { position: absolute; z-index: 0; right: 60px; top: 98px; width: 14px; height: 14px; border-radius: 50%; background: var(--pearl); box-shadow: 0 0 12px rgba(253,52,147,.6); }
.w.bx-stage .eyebrow { color: var(--night-mute); margin: 0; }
.w.bx-stage .cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.w.bx-stage .cols > div { border-left: 1px solid var(--night-line); padding-left: 20px; min-width: 0; }
.w.bx-stage .cols > div:first-child { border: 0; padding: 0; }
.w.bx-stage .n { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 250; letter-spacing: -.02em; font-size: clamp(24px, 2.3vw, 38px);
  line-height: 1.1; white-space: nowrap; font-feature-settings: "tnum"; }
.w.bx-stage .s { color: #BEB7CF; font-size: 14px; margin-top: 4px; }
.w.bx-stage .cols .eyebrow { margin-top: 6px; }
.bx-gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1250px) {
  .w.bx-stage .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .w.bx-stage .cols > div:nth-child(3n+1) { border: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .w.bx-stage { padding-right: 32px; }
  .w.bx-stage .ring, .w.bx-stage .ring-pearl { display: none; }
  .w.bx-stage .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w.bx-stage .cols > div { border-left: 1px solid var(--night-line); padding-left: 20px; }
  .w.bx-stage .cols > div:nth-child(odd) { border: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ════════ Einheitliche Höhe in Werkzeugleisten (Wunsch Corinna 2026-11-01) ════════
   Segment-Reiter, Suchfeld und Auswahl stehen in einer Reihe gleich hoch (48 px) mit gleicher Schriftgröße. */
.filters { align-items: center; }
.seg { height: 48px; align-items: stretch; box-sizing: border-box; }
.seg button { display: inline-flex; align-items: center; font-size: 15px; }
.filters .search, .filters .sel, .filters select { height: 48px; box-sizing: border-box; font-size: 15px; }
.search { padding: 0 18px; gap: 10px; min-width: 300px; }
.search input { font-size: 15px; height: 100%; color: var(--ink); }
.search input::placeholder { color: var(--mute); }
.sel { min-width: 200px; padding: 0 44px 0 18px; border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E596F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; }
.sel:focus { background-color: var(--surface); }

/* ════════ Aufgaben: Pipeline, Karten, Detail (Paket 1, 2026-11-01) ════════ */
.a-pipe { display: grid; grid-template-columns: repeat(5, minmax(205px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.a-spalte { background: var(--well); box-shadow: var(--inset); border-radius: var(--r-card); padding: 14px 10px 10px; min-height: 240px; transition: box-shadow .2s var(--ease); }
.a-spalte.ueber { box-shadow: var(--inset), inset 0 0 0 1.5px var(--ink); }
.a-spalte header { display: flex; align-items: center; gap: 8px; padding: 0 6px 12px; }
.a-spalte header .eyebrow { margin: 0; }
.a-spalte header .icon-btn { margin-left: auto; }
.a-zahl { background: var(--ink); color: var(--on-ink); font: 400 11px 'Martian Mono', monospace; border-radius: 999px; padding: 1px 8px; }
.a-karten { display: grid; gap: 10px; min-height: 60px; }
.a-leer { border: 1.5px dashed var(--line-strong); border-radius: var(--r-input); padding: 18px 10px; text-align: center; font-size: 13px; color: var(--mute); }
.a-karte { background: var(--surface); border-radius: var(--r-input); box-shadow: var(--sh); padding: 12px 14px; cursor: grab; display: grid; gap: 8px;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease); position: relative; overflow: hidden; }
.a-karte:hover { box-shadow: var(--sh-lift); transform: translateY(-1px); }
.a-karte:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.a-karte.zieht { opacity: .45; cursor: grabbing; }
.a-karte.prio-dringend::before, .a-karte.prio-hoch::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bad); }
.a-karte.prio-hoch::before { background: var(--warn); }
.a-karte > * { min-width: 0; }
.a-titel { overflow-wrap: anywhere; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink); }
.a-zeile { display: flex; flex-wrap: wrap; gap: 4px; }
.a-zeile:empty { display: none; }
.a-zeile { min-width: 0; }
.a-zeile .bx-chip { max-width: 100%; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 24px; white-space: nowrap; }
.a-fuss { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.a-fuss > .mono { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.a-fuss .rechts { flex-shrink: 0; }
.a-fuss .rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.a-fuss .mono, .ap-zeile .mono { font-family: 'Martian Mono', monospace; font-size: 11px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 3px; }
.mono.leise { color: var(--mute); }
.mono.ueberfaellig { color: var(--bad); }
.mono.heute { color: var(--warn); }
.avatar.mini { width: 24px; height: 24px; border-radius: 50%; font-size: 9px; display: inline-grid; place-items: center; flex-shrink: 0; }
.avatar.mini.pruef { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.a-prio { font: 400 10px 'Martian Mono', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.a-prio.dringend { background: var(--bad-bg); color: var(--bad); }
.a-prio.hoch { background: var(--warn-bg); color: var(--warn); }
.a-prio.niedrig { background: var(--canvas-2); color: var(--mute); }
.a-unter { display: inline-flex; align-items: center; gap: 6px; }
.a-unter .track { width: 64px; height: 6px; border-radius: 999px; background: var(--well); box-shadow: var(--inset); overflow: hidden; }
.a-unter .track i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.a-unter .mono { font-family: 'Martian Mono', monospace; font-size: 11px; color: var(--ink-2); }
.a-status { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--canvas-2); color: var(--ink-2); white-space: nowrap; }
.a-status.st-in_arbeit { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.a-status.st-wartet_kunde { background: var(--canvas-2); color: var(--ink-2); }
.a-status.st-pruefung { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.a-status.st-erledigt { background: var(--ok-bg); color: var(--ok); }
tr[data-oeffnen] { cursor: pointer; }

.leadpanel.breit { width: min(620px, 96vw); }
.ap-head { align-items: flex-start; }
.ap-kette { font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ap-kette a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.ap-titel { width: 100%; border: 0; background: transparent; font: 600 20px 'Archivo', sans-serif; color: var(--ink); padding: 4px 6px; margin-left: -6px; border-radius: var(--r-input); }
.ap-titel:hover { background: var(--canvas); }
.ap-titel:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.ap-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ap-raster label { display: grid; gap: 4px; font: 400 10px 'Martian Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ap-raster select, .ap-raster input, .ap-text, .ap-neu input, .ap-neu select, .ap-komneu textarea, .ap-beob select {
  font: 400 14px 'Archivo', sans-serif; color: var(--ink); background: var(--well); border: 0; border-radius: var(--r-input);
  box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); padding: 9px 12px; width: 100%; text-transform: none; letter-spacing: 0; }
.ap-raster select:focus, .ap-raster input:focus, .ap-text:focus, .ap-neu input:focus, .ap-komneu textarea:focus {
  outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.ap-raster input.ist-ueberfaellig { box-shadow: inset 0 0 0 1.5px var(--bad), 0 0 0 4px var(--bad-bg); }
.ap-bezug { font: 400 14px 'Archivo', sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 9px 0; }
.ap-hinweis { margin-top: 10px; font-size: 13px; color: var(--bad); }
.ap-portal { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink); }
.ap-portal input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--ink); }
.ap-ziel { margin-top: 12px; align-items: end; }
.ap-ziel-hilfe { padding-bottom: 12px; }
.ap-hoch { justify-self: start; }
.ap-text { resize: vertical; min-height: 90px; line-height: 1.5; }
.ap-liste { display: grid; gap: 6px; }
.ap-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-input); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ap-zeile .tx { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-zeile.fertig .tx { text-decoration: line-through; color: var(--mute); }
.ap-neu { display: flex; gap: 6px; align-items: center; }
.ap-neu input[name="titel"] { flex: 2; }
.ap-neu select, .ap-neu input[name="url"] { flex: 1.4; }
.ap-beob { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-beob select { width: auto; flex: 1; min-width: 160px; }
.ap-person { display: inline-flex; align-items: center; gap: 4px; background: var(--c-kunde-bg); color: var(--c-kunde-ink); border-radius: 999px; padding: 3px 4px 3px 12px; font-size: 13px; }
.ap-person button { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: inherit; }
.ap-person button:hover { background: var(--surface); }
.ap-kommentare { display: grid; gap: 12px; }
.ap-kom { display: flex; gap: 10px; }
.ap-kom .m { font-size: 12px; color: var(--mute); }
.ap-kom .m a { color: var(--mute); text-decoration: underline; }
.ap-kom .t { font-size: 14px; white-space: pre-wrap; color: var(--ink); margin-top: 2px; }
.ap-komneu { display: grid; gap: 6px; justify-items: end; }
@media (max-width: 900px) { .ap-raster { grid-template-columns: 1fr; } .ap-neu { flex-wrap: wrap; } }

/* ════════ Kundenlogos (von der Website geholt, sonst Initialen) ════════ */
.k-logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-input); background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  display: inline-grid; place-items: center; overflow: hidden; }
.k-logo img { max-width: 78%; max-height: 78%; object-fit: contain; display: block; }
.k-logo.ohne { background: var(--canvas-2); box-shadow: none; font: 400 11px 'Martian Mono', monospace; color: var(--ink-2); letter-spacing: .04em; }
.k-logo.gross { width: 64px; height: 64px; }
.k-logo.gross.ohne { font-size: 15px; }
.k-logo.mini { width: 22px; height: 22px; border-radius: 50%; }
.k-logo.mini.ohne { font-size: 8px; }
.k-name { display: flex; align-items: center; gap: 12px; }
.k-kopf { display: flex; align-items: center; gap: 20px; }
.k-logozeile { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-zeile { align-items: center; }
.a-kunde { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }

/* ════════ Marke je Kunde: Logos, Farben, Schriften ════════ */
.w .l .n { text-transform: none; letter-spacing: 0; }
.m-werkzeug { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 18px; }
.m-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.m-logo { margin: 0; border-radius: var(--r-input); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: grid; }
.m-logo.haupt { box-shadow: inset 0 0 0 1.5px var(--ink); }
.m-vorschau { height: 140px; display: grid; place-items: center; background: #fff; padding: 20px; border-bottom: 1px solid var(--line); }
.m-logos.dunkel .m-vorschau { background: var(--night); }
.m-vorschau img { max-width: 100%; max-height: 100px; object-fit: contain; }
.m-logo figcaption { padding: 12px 14px 14px; display: grid; gap: 6px; }
.m-name { border: 0; background: transparent; font: 600 14px 'Archivo', sans-serif; color: var(--ink); padding: 4px 6px; margin-left: -6px; border-radius: 10px; width: 100%; }
.m-name:hover { background: var(--canvas); }
.m-name:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.m-aktionen { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.m-aktionen > :first-child { margin-right: auto; }
.m-haupt { display: inline-flex; align-items: center; gap: 8px; font: 400 10px 'Martian Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.m-perle { width: 14px; height: 14px; border-radius: 50%; background: var(--pearl); box-shadow: inset -2px -2px 4px rgba(0,0,0,.3), inset 2px 2px 3px rgba(255,255,255,.35); }
.m-ablage { min-height: 230px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-input); background: var(--well); box-shadow: var(--inset);
  display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 20px; cursor: pointer; transition: box-shadow .2s var(--ease); }
.m-ablage .ic { font-size: 22px; color: var(--ink-2); }
.m-ablage b { font-size: 14px; color: var(--ink); }
.m-ablage.ueber { box-shadow: var(--inset), inset 0 0 0 1.5px var(--ink); }
.m-streifen { display: flex; height: 44px; border-radius: var(--r-input); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); margin: 14px 0 16px; }
.m-streifen span { flex: 1; }
.m-streifen .leer-streifen { display: grid; place-items: center; font-size: 13px; color: var(--mute); background: var(--well); }
.m-farben { display: grid; gap: 8px; }
.m-farbe { display: grid; grid-template-columns: 44px 110px 1fr 150px 32px; gap: 8px; align-items: center; }
.m-farbe input[type="color"] { width: 44px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px; }
.m-farbe input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.m-farbe input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.m-farbe input:not([type="color"]), .m-farbe select, .m-form input, .m-form textarea, .m-form select {
  font: 400 14px 'Archivo', sans-serif; color: var(--ink); background: var(--well); border: 0; border-radius: var(--r-input);
  box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); padding: 10px 12px; width: 100%; min-width: 0; box-sizing: border-box; }
.m-farbe input.mono { font-family: 'Martian Mono', monospace; font-size: 12px; }
.m-farbe input:focus, .m-farbe select:focus, .m-form input:focus, .m-form textarea:focus, .m-form select:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.m-form { display: grid; gap: 14px; margin-top: 14px; }
.m-form label { display: grid; gap: 6px; font: 400 10px 'Martian Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.m-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 1100px) { .m-farbe { grid-template-columns: 44px 1fr 32px; } .m-farbe input[data-feld="name"], .m-farbe select { grid-column: 2 / 3; } }

/* Eigene Icons statt Remix (DESIGN.md „Icons“): die Remix-Klassen bleiben im Code, das Motiv kommt per Maske aus public/icons/
   und nimmt die Textfarbe an. Klassen ohne Zeile hier zeigen weiter das Remix-Motiv (heute nur Markenzeichen: Meta, Google, TikTok, LinkedIn). */
i.ri-add-line::before { --bx-src: url('/icons/plus-inaktiv.svg'); }
i.ri-delete-bin-line::before { --bx-src: url('/icons/loeschen-inaktiv.svg'); }
i.ri-delete-bin-6-line::before { --bx-src: url('/icons/loeschen-inaktiv.svg'); }
i.ri-edit-line::before { --bx-src: url('/icons/bearbeiten-inaktiv.svg'); }
i.ri-check-line::before { --bx-src: url('/icons/haken-inaktiv.svg'); }
i.ri-checkbox-circle-line::before { --bx-src: url('/icons/haken-inaktiv.svg'); }
i.ri-save-line::before { --bx-src: url('/icons/haken-inaktiv.svg'); }
i.ri-task-line::before { --bx-src: url('/icons/haken-inaktiv.svg'); }
i.ri-user-add-line::before { --bx-src: url('/icons/benutzer-inaktiv.svg'); }
i.ri-user-follow-line::before { --bx-src: url('/icons/benutzer-inaktiv.svg'); }
i.ri-user-shared-line::before { --bx-src: url('/icons/benutzer-inaktiv.svg'); }
i.ri-user-heart-line::before { --bx-src: url('/icons/herz-inaktiv.svg'); }
i.ri-contacts-book-line::before { --bx-src: url('/icons/kundin-inaktiv.svg'); }
i.ri-filter-3-line::before { --bx-src: url('/icons/filter-inaktiv.svg'); }
i.ri-coins-line::before { --bx-src: url('/icons/finance-inaktiv.svg'); }
i.ri-price-tag-3-line::before { --bx-src: url('/icons/preis-inaktiv.svg'); }
i.ri-sticky-note-line::before { --bx-src: url('/icons/dokument-inaktiv.svg'); }
i.ri-file-copy-line::before { --bx-src: url('/icons/dokument-inaktiv.svg'); }
i.ri-survey-line::before { --bx-src: url('/icons/dokument-inaktiv.svg'); }
i.ri-folder-user-line::before { --bx-src: url('/icons/dokument-inaktiv.svg'); }
i.ri-folder-shared-line::before { --bx-src: url('/icons/dokument-inaktiv.svg'); }
i.ri-links-line::before { --bx-src: url('/icons/teilen-inaktiv.svg'); }
i.ri-share-forward-line::before { --bx-src: url('/icons/teilen-inaktiv.svg'); }
i.ri-external-link-line::before { --bx-src: url('/icons/pfeil-rechts-inaktiv.svg'); }
i.ri-arrow-left-line::before { --bx-src: url('/icons/pfeil-rechts-inaktiv.svg'); transform: scaleX(-1); }
i.ri-file-text-line::before { --bx-src: url('/icons/dokument-inaktiv.svg'); }
i.ri-lock-line::before { --bx-src: url('/icons/schloss-inaktiv.svg'); }
i.ri-image-line::before { --bx-src: url('/icons/kamera-inaktiv.svg'); }
i.ri-arrow-left-right-line::before { --bx-src: url('/icons/pfeil-rechts-inaktiv.svg'); }
i.ri-flashlight-line::before { --bx-src: url('/icons/orbit-inaktiv.svg'); }
i.ri-refresh-line::before { --bx-src: url('/icons/orbit-inaktiv.svg'); }
i.ri-apps-line::before { --bx-src: url('/icons/studio-app-inaktiv.svg'); }
i.ri-apps-2-line::before { --bx-src: url('/icons/studio-app-inaktiv.svg'); }
i.ri-verified-badge-line::before { --bx-src: url('/icons/stern-inaktiv.svg'); }
i.ri-trophy-line::before { --bx-src: url('/icons/ranking-inaktiv.svg'); }
i.ri-upload-2-line::before { --bx-src: url('/icons/hochladen-inaktiv.svg'); }
i.ri-upload-cloud-2-line::before { --bx-src: url('/icons/hochladen-inaktiv.svg'); }
i.ri-download-2-line::before { --bx-src: url('/icons/herunterladen-inaktiv.svg'); }
i.ri-search-line::before { --bx-src: url('/icons/suche-inaktiv.svg'); }
i.ri-user-search-line::before { --bx-src: url('/icons/suche-inaktiv.svg'); }
i.ri-mail-line::before { --bx-src: url('/icons/nachricht-inaktiv.svg'); }
i.ri-mail-open-line::before { --bx-src: url('/icons/nachricht-inaktiv.svg'); }
i.ri-chat-smile-2-line::before { --bx-src: url('/icons/nachricht-inaktiv.svg'); }
i.ri-chat-3-line::before { --bx-src: url('/icons/chat-inaktiv.svg'); }
i.ri-eye-line::before { --bx-src: url('/icons/auge-inaktiv.svg'); }
i.ri-send-plane-line::before { --bx-src: url('/icons/pfeil-rechts-inaktiv.svg'); }
i.ri-arrow-go-back-line::before { --bx-src: url('/icons/pfeil-links-inaktiv.svg'); }
i.ri-history-line::before { --bx-src: url('/icons/uhr-inaktiv.svg'); }
i.ri-time-line::before { --bx-src: url('/icons/uhr-inaktiv.svg'); }
i.ri-error-warning-line::before { --bx-src: url('/icons/warnung-inaktiv.svg'); }
i.ri-close-line::before { --bx-src: url('/icons/schliessen-inaktiv.svg'); }
i.ri-calendar-check-line::before { --bx-src: url('/icons/kalender-inaktiv.svg'); }
i.ri-team-line::before { --bx-src: url('/icons/team-inaktiv.svg'); }
i.ri-group-line::before { --bx-src: url('/icons/team-inaktiv.svg'); }
i.ri-seedling-line::before { --bx-src: url('/icons/wachstum-inaktiv.svg'); }
i.ri-rocket-2-line::before { --bx-src: url('/icons/wachstum-inaktiv.svg'); }
i.ri-line-chart-line::before { --bx-src: url('/icons/wachstum-inaktiv.svg'); }
i.ri-bar-chart-2-line::before { --bx-src: url('/icons/analyse-inaktiv.svg'); }
i.ri-donut-chart-line::before { --bx-src: url('/icons/analyse-inaktiv.svg'); }
i.ri-presentation-line::before { --bx-src: url('/icons/analyse-inaktiv.svg'); }
i.ri-radar-line::before { --bx-src: url('/icons/ziel-inaktiv.svg'); }
i.ri-phone-line::before { --bx-src: url('/icons/telefon-inaktiv.svg'); }
i.ri-information-line::before { --bx-src: url('/icons/info-inaktiv.svg'); }
i.ri-lock-password-line::before { --bx-src: url('/icons/schloss-inaktiv.svg'); }
i.ri-building-line::before { --bx-src: url('/icons/branche-inaktiv.svg'); }
i.ri-more-line::before { --bx-src: url('/icons/menue-inaktiv.svg'); }
i.ri-arrow-down-line::before { --bx-src: url('/icons/pfeil-runter-inaktiv.svg'); }
i.ri-arrow-down-s-line::before { --bx-src: url('/icons/pfeil-runter-inaktiv.svg'); }
i.ri-graduation-cap-line::before { --bx-src: url('/icons/akademie-inaktiv.svg'); }
i.ri-megaphone-line::before { --bx-src: url('/icons/kampagne-inaktiv.svg'); }
i.ri-stack-line::before { --bx-src: url('/icons/stapel-inaktiv.svg'); }
i.ri-webhook-line::before { --bx-src: url('/icons/verbindung-inaktiv.svg'); }
i.ri-add-line::before,
i.ri-delete-bin-line::before,
i.ri-delete-bin-6-line::before,
i.ri-edit-line::before,
i.ri-check-line::before,
i.ri-checkbox-circle-line::before,
i.ri-save-line::before,
i.ri-task-line::before,
i.ri-user-add-line::before,
i.ri-user-follow-line::before,
i.ri-user-shared-line::before,
i.ri-user-heart-line::before,
i.ri-contacts-book-line::before,
i.ri-filter-3-line::before,
i.ri-coins-line::before,
i.ri-price-tag-3-line::before,
i.ri-sticky-note-line::before,
i.ri-file-copy-line::before,
i.ri-survey-line::before,
i.ri-folder-user-line::before,
i.ri-folder-shared-line::before,
i.ri-links-line::before,
i.ri-share-forward-line::before,
i.ri-external-link-line::before,
i.ri-arrow-left-line::before,
i.ri-file-text-line::before,
i.ri-play-line::before,
i.ri-arrow-up-line::before,
i.ri-graduation-cap-line::before,
i.ri-lock-line::before,
i.ri-image-line::before,
i.ri-arrow-left-right-line::before,
i.ri-flashlight-line::before,
i.ri-refresh-line::before,
i.ri-apps-line::before,
i.ri-apps-2-line::before,
i.ri-verified-badge-line::before,
i.ri-trophy-line::before,
i.ri-upload-2-line::before,
i.ri-upload-cloud-2-line::before,
i.ri-download-2-line::before,
i.ri-search-line::before,
i.ri-user-search-line::before,
i.ri-mail-line::before,
i.ri-mail-open-line::before,
i.ri-chat-smile-2-line::before,
i.ri-chat-3-line::before,
i.ri-eye-line::before,
i.ri-send-plane-line::before,
i.ri-arrow-go-back-line::before,
i.ri-history-line::before,
i.ri-time-line::before,
i.ri-error-warning-line::before,
i.ri-close-line::before,
i.ri-calendar-check-line::before,
i.ri-team-line::before,
i.ri-group-line::before,
i.ri-seedling-line::before,
i.ri-rocket-2-line::before,
i.ri-line-chart-line::before,
i.ri-bar-chart-2-line::before,
i.ri-donut-chart-line::before,
i.ri-presentation-line::before,
i.ri-radar-line::before,
i.ri-phone-line::before,
i.ri-information-line::before,
i.ri-lock-password-line::before,
i.ri-building-line::before,
i.ri-more-line::before,
i.ri-arrow-down-line::before,
i.ri-arrow-down-s-line::before,
i.ri-graduation-cap-line::before,
i.ri-megaphone-line::before,
i.ri-stack-line::before,
i.ri-webhook-line::before {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; background: currentColor;
  -webkit-mask: var(--bx-src) center / contain no-repeat; mask: var(--bx-src) center / contain no-repeat; }

.m-aktionen .btn { height: 34px; padding: 0 14px; font-size: 13px; }

/* Marke: Status Vorschlag oder bestätigt. Hinweis ist keine Warnung (DESIGN.md): weiße Card, Verlaufskante links, Icon im Ziel-Violett */
.w.m-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; overflow: hidden; padding-left: 28px; }
.w.m-status::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.w.m-status.st-bestaetigt::before { background: var(--ok); }
.m-status-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ziel-bg); color: var(--c-ziel-ink); font-size: 18px; flex-shrink: 0; }
.st-bestaetigt .m-status-ic { background: var(--ok-bg); color: var(--ok); }
.m-status-tx { display: grid; gap: 2px; flex: 1; min-width: 260px; }
.m-status-tx b { font-size: 15px; color: var(--ink); }
.m-status-knopf { display: flex; gap: 8px; flex-wrap: wrap; }
.m-farbe { position: relative; }
.m-quelle { grid-column: 2 / -1; font: 400 10px 'Martian Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ziel-ink); margin-top: -2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ════════ Tickets ════════ */
.t-status { font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; background: var(--canvas-2); color: var(--ink-2); }
.t-status.st-neu { background: var(--c-umsatz-bg); color: var(--c-umsatz-ink); }
.t-status.st-in_arbeit { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.t-status.st-erledigt { background: var(--ok-bg); color: var(--ok); }
.t-frist { font: 400 11px 'Martian Mono', monospace; color: var(--ink-2); white-space: nowrap; }
.t-frist.leise { color: var(--mute); }
.t-frist.bald { color: var(--warn); }
.t-frist.ueber { color: var(--bad); }
tr[data-ticket] { cursor: pointer; }
tr.ist-ueber td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
.t-snippet { white-space: normal; font-family: 'Archivo', sans-serif !important; font-size: 13px !important; color: var(--mute) !important; }
.t-kunde { display: inline-flex; align-items: center; gap: 8px; }
.t-ohne { font-size: 13px; color: var(--c-umsatz-ink); }
.t-hinweise { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.t-hinweise:empty { display: none; }
.t-filterchip { border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 6px 14px; font: 400 14px 'Archivo', sans-serif; color: var(--ink-2); cursor: pointer; }
.t-filterchip.an { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.t-betreff { font-size: 20px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.t-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.t-verlauf { display: grid; gap: 12px; }
.t-msg { border-radius: var(--r-input); padding: 12px 14px; background: var(--canvas); max-width: 92%; }
.t-msg.team { background: var(--c-kunde-bg); justify-self: end; }
.t-msg.notiz { background: var(--surface); box-shadow: inset 0 0 0 1.5px dashed; box-shadow: inset 0 0 0 1px var(--line-strong); justify-self: end; }
.t-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.t-kopf .klein { margin-left: auto; }
.t-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--ink); }
.t-intern { font: 400 10px 'Martian Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--well); border-radius: 999px; padding: 1px 8px; }
.t-versand { margin-top: 8px; font-size: 12px; color: var(--warn); }
.t-system { text-align: center; font-size: 12px; color: var(--mute); }
.t-antwort { margin-top: 18px; display: grid; gap: 10px; }
.t-antwort textarea { font: 400 14px 'Archivo', sans-serif; color: var(--ink); background: var(--well); border: 0; border-radius: var(--r-input);
  box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); padding: 12px; width: 100%; resize: vertical; }
.t-antwort textarea:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.t-antwort.ist-notiz textarea { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.t-art { justify-self: start; }
.t-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.t-anhang { padding: 10px; margin: 0; }
.t-anhang.kunde { justify-self: start; }
.t-anhang img, .t-anhang video { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; margin: 6px 0; }
.t-datei { margin-right: auto; cursor: pointer; }

/* Hilfe-Button einbinden */
.h-code { background: var(--night); color: var(--on-night); border-radius: var(--r-input); padding: 16px 18px; font: 400 12px/1.6 'Martian Mono', monospace; white-space: pre-wrap; word-break: break-all; }
.h-code.h-text { word-break: normal; max-height: 420px; overflow: auto; }
.h-liste { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.h-liste li { background: var(--canvas); border-radius: 999px; padding: 6px 14px; font-size: 12px; }

/* Freischaltung der Apps in der Kundenakte */
.p-app { background: var(--canvas); border-radius: var(--r-input); padding: 14px 16px; }
.p-app-titel { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.p-module { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.p-modul { display: inline-flex !important; align-items: center; gap: 8px; font: 400 14px 'Archivo', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.p-modul input { width: auto !important; accent-color: var(--ink); }
.p-knoepfe { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.p-knoepfe .btn { height: 30px; padding: 0 12px; font-size: 12px; }

/* Apps anbinden */
.an-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.an-app { display: grid; gap: 8px; justify-items: start; text-align: left; border: 0; cursor: pointer; padding: 16px; border-radius: var(--r-input); background: var(--canvas); font: inherit; color: var(--ink); }
.an-app b { font-size: 17px; }
.an-app.an { background: var(--well); box-shadow: var(--inset), inset 0 0 0 1.5px var(--ink); }
.an-text { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 1100px) { .an-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Roadmap in der Kundenakte und Vorlagen */
.rm-start { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rm-start.gross { margin-top: 4px; justify-content: center; }
.rm-start .sel { min-width: 260px; height: 44px; flex: 0 0 auto; }
.rm-kopf { display: flex; align-items: center; gap: 18px; }
.rm-titel { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rm-titel h3 { font-size: 20px; font-weight: 600; }
.rm-schalter { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
/* Schalter aus dem Design-Kit (.bx-toggle) */
.bx-toggle { width: 60px; height: 34px; flex: none; border-radius: 999px; position: relative; cursor: pointer; border: 0; background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); }
.bx-toggle::after { content: ""; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh); transition: transform .5s var(--spring), background .3s; }
.bx-toggle[aria-checked="true"]::after { transform: translateX(26px); background: var(--pearl); }
.bx-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.rm-strecke { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 22px 0 8px; }
.rm-etappe { display: grid; gap: 8px; min-width: 0; }
.rm-etappe span { font: 400 10px 'Martian Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-etappe.aktiv span { color: var(--ink); }
.rm-etappe.fertig span { color: var(--ink-2); }
.rm-balken { height: 6px; border-radius: 999px; background: var(--well); box-shadow: var(--inset); overflow: hidden; }
.rm-balken i { display: block; height: 100%; background: var(--c-ziel); border-radius: 999px; }
.rm-etappe.fertig .rm-balken i { background: var(--ink); }
.rm-phasen { display: grid; gap: 10px; margin-top: 18px; }
.rm-phase { border-radius: var(--r-input); background: var(--canvas); }
.rm-phase.aktiv { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rm-phase summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.rm-phase summary::-webkit-details-marker { display: none; }
.rm-phase summary b { font-size: 16px; flex: 1; }
.rm-phase summary > i { transition: transform .2s; color: var(--mute); }
.rm-phase[open] summary > i { transform: rotate(180deg); }
.rm-nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 400 11px 'Martian Mono', monospace; flex-shrink: 0; }
.rm-phase.fertig .rm-nr { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.rm-zahl { font: 400 11px 'Martian Mono', monospace; color: var(--mute); }
.rm-stand { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--canvas-2); color: var(--ink-2); }
.rm-phase.aktiv .rm-stand { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.rm-phase.fertig .rm-stand { background: var(--ok-bg); color: var(--ok); }
.rm-schritte { padding: 0 16px 12px 58px; display: grid; }
.rm-schritt { display: grid; grid-template-columns: auto 1fr 70px 190px 30px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rm-schritt .tx { min-width: 0; }
.rm-schritt.fertig .tx { color: var(--mute); text-decoration: line-through; }
.rm-wer { justify-self: start; font: 400 9px 'Martian Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--canvas-2); color: var(--ink-2); }
.rm-wer.kunde { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.rm-meta { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.rm-weg { opacity: 0; transition: opacity .15s; }
.rm-schritt:hover .rm-weg, .rm-weg:focus-visible { opacity: 1; }
.rm-plus { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); font: 400 13px 'Archivo', sans-serif; padding: 10px 0 2px; cursor: pointer; }
.rm-plus:hover { color: var(--ink); }
.rm-schritt-neu { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.rm-schritt-neu input, .rm-schritt-neu select { font: 400 13px 'Archivo', sans-serif; background: var(--surface); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); padding: 7px 10px; }
.rm-schritt-neu input { flex: 1; min-width: 0; }
.rv-name { font-size: 20px; font-weight: 600; margin: 8px 0 4px; }
.rv-text { font-family: 'Martian Mono', monospace !important; font-size: 13px !important; line-height: 1.7 !important; }
.rv-vorschau { display: grid; gap: 12px; margin-top: 10px; }
.rv-ph b { font-size: 14px; }
.rv-sch { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; margin-top: 4px; }
@media (max-width: 1100px) { .rm-kopf { flex-wrap: wrap; } .rm-schritt { grid-template-columns: auto 1fr 64px 30px; } .rm-meta { display: none; } .rm-schritte { padding-left: 16px; } }

/* Auswahlfelder nach Kit (.bx-select): eigener Pfeil mit 16 px Abstand zum Rand, gilt für alle Selects ohne eigene Gestaltung */
select:not([multiple]):not(.sel) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E596F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px !important; }

/* ════════ Datei-Box im Team (js/dateibox.js) ════════ */
.db-drive { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.db-drive-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--canvas); display: grid; place-items: center; flex-shrink: 0; }
.db-drive-ic img { width: 22px; height: 22px; }
.db-drive-tx { flex: 1; min-width: 260px; display: grid; gap: 2px; }
.db-drive-tx b { font-size: 15px; }
.db-drive-form { display: flex; gap: 8px; flex: 1 1 100%; }
.db-drive-form input { flex: 1; height: 46px; border: 0; border-radius: var(--r-input); padding: 0 18px; font: 400 15px 'Archivo', sans-serif; color: var(--ink); background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); outline: none; }
.db-drive-form input:focus { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.db { position: relative; min-height: 320px; }
.db-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.db-pfad { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--mute); }
.db-pfad button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font: 400 15px 'Archivo', sans-serif; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.db-pfad button:hover, .db-pfad button.ueber { background: var(--canvas-2); color: var(--ink); }
.db-pfad button.an { color: var(--ink); font-weight: 600; }
.db-pfad img { width: 20px; height: 20px; }
.db-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.db-hinweis { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-2); background: var(--canvas); border-radius: 999px; padding: 8px 14px; width: fit-content; }
.db-ordner { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 18px; }
.db-ordner-k { position: relative; border-radius: var(--r-input); background: var(--canvas); transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.db-ordner-k:hover { background: var(--canvas-2); }
.db-ordner-k.ueber { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); transform: scale(1.02); }
.db-ordner-auf { display: grid; gap: 2px; width: 100%; text-align: left; border: 0; background: transparent; padding: 16px; cursor: pointer; font: inherit; color: var(--ink); }
.db-ordner-auf img { width: 24px; height: 24px; margin-bottom: 10px; }
.db-ordner-k .db-chip { position: absolute; top: 14px; right: 44px; }
.db-mehr { position: absolute; top: 10px; right: 8px; opacity: 0; transition: opacity .15s; }
.db-ordner-k:hover .db-mehr, .db-mehr:focus-visible { opacity: 1; }
.db-chip { font: 400 9px 'Martian Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--night); color: var(--on-night); white-space: nowrap; }
.db-chip.neu { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.db-chip.warn { background: var(--bad-bg); color: var(--bad); }
.db-dateien { display: grid; margin-top: 14px; }
.db-datei { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 12px; cursor: grab; }
.db-datei:hover { background: var(--canvas); }
.db-datei:active { cursor: grabbing; }
.db-datei .icon-btn { opacity: .55; }
.db-datei:hover .icon-btn { opacity: 1; }
.db-bild { width: 48px; height: 48px; border-radius: 12px; background: var(--canvas); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.db-bild img { width: 100%; height: 100%; object-fit: cover; }
.db-bild img.ic { width: 22px; height: 22px; object-fit: contain; }
.db-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.db-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-leer { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 48px 16px; color: var(--ink-2); }
.db-leer img { width: 28px; height: 28px; margin-bottom: 6px; }
.db-drop { position: absolute; inset: 8px; border-radius: var(--r-card); border: 2px dashed var(--ink); background: rgba(255,255,255,.85); display: none; place-items: center; align-content: center; gap: 10px; font-size: 16px; color: var(--ink); pointer-events: none; }
.db-drop img { width: 28px; height: 28px; }
.db.zieht .db-drop { display: grid; }
.db-kunde { display: inline-flex; align-items: center; gap: 10px; }

.db-nr { font: 400 11px 'Martian Mono', monospace; color: var(--mute); margin-right: 8px; }

/* Ablagefeld (Mulde aus dem Design-Kit: eingeprägt, gestrichelte Kontur, Icon in flacher Mulde). In ORBIT und Team-Datei-Box.
   Groß, wenn der Ordner leer ist, sonst schmale Leiste. Beim Hineinziehen (Elternelement .zieht) hebt es sich zu Weiß. */
.bx-mulde { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 14px 20px 14px 14px; border: 0; border-radius: var(--r-input);
  background: var(--well); box-shadow: var(--inset); outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; color: var(--ink-2);
  font: 400 14px 'Archivo', sans-serif; cursor: pointer; transition: background .25s var(--ease), outline-color .25s, transform .25s var(--ease), box-shadow .25s; }
.bx-mulde:hover { background: var(--surface); outline-color: var(--ink-2); }
.bx-mulde:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.bx-mulde-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); box-shadow: var(--sh); transition: transform .4s var(--spring); }
.bx-mulde-ic img { width: 22px; height: 22px; }
.bx-mulde-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bx-mulde-tx b { font-size: 15px; color: var(--ink); font-weight: 600; }
.bx-mulde-tx u { text-underline-offset: 3px; color: var(--ink); }
.bx-mulde-typen { font: 400 10px 'Martian Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.bx-mulde.gross { flex-direction: column; justify-content: center; text-align: center; gap: 12px; min-height: 260px; padding: 32px; }
.bx-mulde.gross .bx-mulde-ic { width: 64px; height: 64px; }
.bx-mulde.gross .bx-mulde-ic img { width: 26px; height: 26px; }
.bx-mulde.gross .bx-mulde-tx { flex: none; }
.bx-mulde.gross .bx-mulde-tx b { font-size: 18px; }
.zieht .bx-mulde { background: var(--surface); outline: 2px dashed var(--ink); outline-offset: -2px; box-shadow: var(--sh); transform: scale(1.01); }
.zieht .bx-mulde .bx-mulde-ic { transform: translateY(-4px) scale(1.06); }
@media (max-width: 700px) { .bx-mulde-typen { display: none; } }
.db-ordner + .bx-mulde { margin-top: 14px; }
.db-kopf + .bx-mulde, .db-hinweis + .bx-mulde { margin-top: 18px; }

/* Maske beim Ablegen (Team) */
.am { display: grid; gap: 14px; }
.am-zeile { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.am-zeile .db-bild { width: 64px; height: 64px; }
.am-felder { flex: 1; min-width: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.am-kampagne label, .am-felder label { min-width: 0; }
.am-kampagne { display: grid; grid-template-columns: 90px 110px 1fr; gap: 8px; }
.db-neu-k { position: absolute; top: 14px; right: 44px; }
.db-ordner-k .db-chip.neu + .db-ordner-auf + .db-chip { right: 110px; }
.db-beschr { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-zuletzt-kopf { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
.db-zuletzt-kopf b { font-size: 15px; }

/* Datei-Box: Auswahl, Teilen, Freigaben */
.db-wahl { width: 18px; height: 18px; flex: none; accent-color: var(--ink); opacity: .35; transition: opacity .15s; }
.db-datei:hover .db-wahl, .db-wahl:checked { opacity: 1; }
.db-bild[data-ansehen] { cursor: zoom-in; }
.db-name { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.db-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.db-chip.geteilt { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.db-ordner-k .db-chip.geteilt { position: absolute; top: 14px; right: 44px; }
.db-auswahl { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--sh), inset 0 0 0 1px var(--line); font-size: 14px; }
.db-frei-liste { display: grid; margin-top: 8px; }
.db-frei-z { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); }
.db-frei-z.aus { opacity: .55; }
.td-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line); width: fit-content; }
.td-opt { position: relative; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.td-opt input { position: absolute; opacity: 0; pointer-events: none; }
.td-opt span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font: 400 14px 'Archivo', sans-serif; color: var(--ink-2); }
.td-opt input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh); }
.td-link { display: flex; gap: 8px; align-items: center; }
.td-link input { flex: 1; font-family: 'Martian Mono', monospace !important; font-size: 12px !important; }

/* Akademie im Team */
.ak-frei { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.ak-frei-k { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-input); background: var(--canvas); cursor: pointer; }
.ak-frei-k.an { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ak-frei-k input { width: 20px; height: 20px; accent-color: var(--ink); margin-top: 2px; }
.ak-frei-k > span { display: grid; gap: 2px; }
.akt-kurs { text-decoration: none; color: var(--ink); display: block; }
.akt-kurs-link { display: block; text-decoration: none; color: var(--ink); }
.akt-kurs-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.akt-kurs.aus .akt-kurs-link { opacity: .6; }
.akt-modul { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.akt-kopf { display: flex; align-items: center; gap: 12px; }
.akt-kopf b { flex: 1; }
.akt-lek { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 24px; font-size: 14px; }
.akt-lek .tx { flex: 1; min-width: 0; }
.akt-lek.aus .tx { color: var(--mute); }
.o-toggle-klein { width: 44px; height: 26px; }
.o-toggle-klein::after { width: 18px; height: 18px; }
.o-toggle-klein[aria-checked="true"]::after { transform: translateX(18px); }
i.ri-graduation-cap-line::before { --bx-src: url('/icons/akademie-inaktiv.svg'); }

/* Folien-Studio */
.fs { display: grid; grid-template-columns: 196px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.fs-liste { display: grid; gap: 10px; max-height: calc(100vh - 200px); overflow: auto; padding: 2px; position: sticky; top: 16px; }
.fs-mini { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; text-align: left; }
.fs-mini .fs-bild { display: block; width: 172px; margin-left: 20px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), var(--sh); }
.fs-mini.an .fs-bild { box-shadow: 0 0 0 2px var(--ink), var(--sh); }
.fs-nr { position: absolute; left: 0; top: 2px; font: 400 10px 'Martian Mono', monospace; color: var(--mute); }
.fs-ohne { position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-umsatz); box-shadow: 0 0 0 2px var(--surface); }
.fs-plus { justify-self: start; margin-left: 20px; }
.fs-mitte { display: grid; gap: 12px; min-width: 0; }
.fs-gross { width: 100%; border-radius: 16px; overflow: hidden; box-shadow: var(--sh); background: var(--surface); }
.fs-gross .pr-rahmen, .fs-mini .pr-rahmen { overflow: hidden; }
.fs-mitte-leiste { display: flex; align-items: center; gap: 4px; }
.fs-platz { flex: 1; }
.fs-notiz { display: grid; gap: 6px; }
.fs-notiz textarea { width: 100%; font: 400 15px/1.6 'Archivo', sans-serif; color: var(--ink); background: var(--well); border: 0; border-radius: var(--r-input); box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); padding: 14px 16px; resize: vertical; }
.fs-form { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); padding: 18px; display: grid; gap: 12px; position: sticky; top: 16px; max-height: calc(100vh - 140px); overflow: auto; }
.fs-leer { grid-column: 1 / -1; }
.fs-leer-k { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.fs-skript textarea { min-height: 52vh; }
.akt-neu { margin: 10px 0 0 24px; }
.lnk-still { color: inherit; text-decoration: none; }
.lnk-still:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1250px) { .fs { grid-template-columns: 160px minmax(0, 1fr); } .fs-mini .fs-bild { width: 136px; } .fs-form { grid-column: 1 / -1; position: static; max-height: none; } }
i.ri-play-line::before { --bx-src: url('/icons/pfeil-rechts-inaktiv.svg'); }
i.ri-arrow-up-line::before { --bx-src: url('/icons/pfeil-runter-inaktiv.svg'); transform: rotate(180deg); }

/* ---------- Chat mit Kunden (Seite „Chats“, Reiter „Chat“, Freischaltung im Reiter ORBIT) ---------- */
.c-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.c-layout > .w { min-height: 0; }
.c-spalte { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 16px; height: calc(100vh - 210px); min-height: 480px; }
.c-suche { width: 100%; min-width: 0; height: 48px; box-sizing: border-box; font-size: 15px; }
.c-suche input { flex: 1; min-width: 0; }
.c-liste { overflow-y: auto; display: grid; align-content: start; gap: 4px; margin: 0 -6px; padding: 0 6px; }
.c-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-input); color: var(--ink); text-decoration: none; }
.c-eintrag:hover { background: var(--canvas); }
.c-eintrag.an { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.c-eintrag-tx { display: grid; gap: 2px; min-width: 0; }
.c-eintrag-tx b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-eintrag-tx .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-eintrag.neu .c-eintrag-tx b, .c-eintrag.neu .c-eintrag-tx .klein { color: var(--ink); font-weight: 600; }
.c-eintrag-rechts { display: grid; justify-items: end; gap: 4px; }
.c-zahl { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font: 600 12px/22px 'Archivo', sans-serif; text-align: center; }
.c-rechts { padding: 0; height: calc(100vh - 210px); min-height: 480px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.c-rechts > [data-fenster] { grid-row: 2; min-height: 0; display: grid; }
.c-zurueck { display: none; margin: 0; padding: 14px 20px 0; }
.c-akte { padding: 0; height: calc(100vh - 290px); min-height: 480px; display: grid; overflow: hidden; }
.c-fenster { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; height: 100%; }
.c-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.c-kopf > div:first-child { display: grid; gap: 2px; }
.c-name { font-size: 16px; font-weight: 500; color: var(--ink); }
.c-team { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.c-person { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.c-verlauf { overflow-y: auto; padding: 20px; display: grid; align-content: start; gap: 10px; }
.c-verlauf > .leer { align-self: center; }
.c-tag { display: flex; align-items: center; gap: 12px; margin: 8px 0; font: 400 11px 'Martian Mono', monospace; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.c-tag::before, .c-tag::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.c-msg { position: relative; max-width: min(640px, 82%); }
.c-msg.kunde { justify-self: start; }
.c-bild { display: block; max-width: 100%; max-height: 300px; border-radius: 12px; margin: 6px 0; }
.c-haken { color: var(--mute); }
.c-haken.gelesen { color: var(--c-kunde-ink); }
.c-aktionen { display: none; gap: 4px; margin-top: 6px; }
.c-msg:hover .c-aktionen, .c-msg:focus-within .c-aktionen { display: flex; }
.c-eingabe { border-top: 1px solid var(--line); padding: 12px 20px 14px; }
.c-eingabe .btn-primary { height: 40px; }
.c-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.c-zeile textarea { font: 400 14px/1.5 'Archivo', sans-serif; color: var(--ink); background: var(--well); border: 0; border-radius: var(--r-input); padding: 12px 14px; resize: none; min-height: 48px; max-height: 180px; }
.c-zeile textarea:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.c-datei { cursor: pointer; align-self: center; }
.c-anh { display: flex; flex-wrap: wrap; gap: 6px; }
.c-tipp { margin: 0; }
.c-zu { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.c-frei { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.c-frei .rm-schalter > span { display: grid; gap: 2px; white-space: normal; }
.c-bis { display: inline-flex; align-items: center; gap: 10px; }
.c-bis input { font: 400 14px 'Archivo', sans-serif; color: var(--ink); background: var(--well); border: 0; border-radius: var(--r-input); padding: 10px 12px; }
.c-bis input:disabled { opacity: .5; }
.c-frei-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
@media (max-width: 1100px) { .c-frei-raster { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .c-layout { grid-template-columns: 1fr; }
  .c-layout.hat-chat .c-spalte { display: none; }
  .c-layout:not(.hat-chat) .c-rechts { display: none; }
  .c-zurueck { display: block; }
  .c-msg { max-width: 92%; }
  .c-eingabe .btn .txt { display: none; }
  .c-kopf { flex-wrap: wrap; }
}

/* ---------- Freigaben im Team (kundenfreigaben.js) ---------- */
.fg-st { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 500 12px 'Archivo', sans-serif; white-space: nowrap; background: var(--canvas-2); color: var(--ink-2); }
.fg-st.st-pruefung { background: var(--c-ziel-bg); color: var(--c-ziel-ink); }
.fg-st.st-beim_kunden { background: var(--c-kunde-bg); color: var(--c-kunde-ink); }
.fg-st.st-aenderung { background: var(--warn-bg); color: var(--warn); }
.fg-st.st-freigegeben, .fg-st.st-erledigt { background: var(--ok-bg); color: var(--ok); }
.fg-kopfrechts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fg-nachricht { font-size: 0.95rem; line-height: 1.6; max-width: 80ch; margin: 0 0 16px; }
.fg-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.fg-teile { display: grid; gap: 6px; padding: 16px; position: sticky; top: 16px; }
.fg-teil { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: var(--r-input); background: transparent; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.fg-teil:hover { background: var(--canvas); }
.fg-teil.an { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fg-mini { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--canvas-2); display: grid; place-items: center; font: 400 10px 'Martian Mono', monospace; text-transform: uppercase; color: var(--ink-2); }
.fg-mini img { width: 100%; height: 100%; object-fit: cover; }
.fg-teil-tx { display: grid; gap: 2px; min-width: 0; }
.fg-teil-tx b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-teil-tx span { font-size: 12px; color: var(--mute); }
.fg-dazu { margin-top: 6px; }
.fg-haupt { padding: 20px; display: grid; gap: 14px; min-width: 0; }
.fg-teilkopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fg-teilkopf h2 { font: 300 22px 'Archivo', sans-serif; margin: 0 0 6px; }
.fg-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fg-versionen { display: flex; gap: 4px; }
.fg-v { height: 32px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--canvas); color: var(--ink-2); font: 500 13px 'Archivo', sans-serif; cursor: pointer; }
.fg-v.an { background: var(--ink); color: var(--on-ink); }
.fg-banner { padding: 12px 16px; border-radius: var(--r-input); font-size: 14px; line-height: 1.5; }
.fg-banner.warn { background: var(--warn-bg); color: var(--ink); }
.fg-banner.ok { background: var(--ok-bg); color: var(--ink); }
.fg-aktionen { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.fg-mulde { display: grid; place-items: center; min-height: 96px; padding: 16px; text-align: center; cursor: pointer; }
.fg-mulde.zieht { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.fg-verlauf { margin-top: 0; }
.fg-orbit-k { margin-top: 12px; }
@media (max-width: 1000px) { .fg-layout { grid-template-columns: 1fr; } .fg-teile { position: static; } }

/* ---------- Formulare und Dialoge nach Kit (DESIGN.md „Feld“, `.bx-label`, `.bx-check`, `.bx-dialog`), für alle Masken im Team ---------- */
.felder { gap: 20px 16px; }
.feld label, .feld > .feld-titel { display: block; margin-bottom: 8px; font: 500 13px 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .feld select, .feld textarea {
  width: 100%; height: 50px; border: 0; border-radius: var(--r-input); padding: 0 18px; font: 400 16px 'Archivo', sans-serif; color: var(--ink);
  background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); outline: none; transition: box-shadow .25s var(--ease), background-color .25s; }
.feld textarea { height: auto; min-height: 110px; padding: 14px 18px; line-height: 1.55; resize: vertical; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E596F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { background-color: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(75,59,255,.14); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--mute); }
.feld .hilfe, .feld-hilfe { font-size: 13px; color: var(--mute); margin-top: 6px; line-height: 1.45; }
/* Häkchen und Auswahlpunkte wie .bx-check */
.modal input[type="checkbox"], .modal input[type="radio"], .ak-frei-k input, .p-modul input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; margin: 1px 0 0; border-radius: 7px; cursor: pointer;
  background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); display: inline-grid; place-items: center; transition: background .25s; }
.modal input[type="radio"] { border-radius: 50%; }
.modal input[type="checkbox"]:checked, .modal input[type="radio"]:checked, .ak-frei-k input:checked, .p-modul input:checked { background: var(--glaze); box-shadow: none; }
.modal input[type="checkbox"]:checked::after, .ak-frei-k input:checked::after, .p-modul input:checked::after {
  content: ""; width: 10px; height: 5px; border-left: 2px solid var(--on-ink); border-bottom: 2px solid var(--on-ink); transform: translateY(-1px) rotate(-45deg); }
.modal input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pearl); }
.modal input:disabled, .ak-frei-k input:disabled { opacity: .55; cursor: default; }
.p-modul { display: inline-flex !important; align-items: flex-start; gap: 12px; font: 400 15px 'Archivo', sans-serif !important; color: var(--ink) !important; line-height: 1.45; cursor: pointer; }
/* Dialog */
.modal { border-radius: 30px; box-shadow: var(--sh-lift), inset 0 0 0 1px var(--line); }
.modal-kopf { padding: 28px 30px 8px; border-bottom: 0; }
.modal-kopf h2 { font: 300 22px 'Archivo', sans-serif; font-stretch: 125%; letter-spacing: -0.022em; text-transform: uppercase; color: var(--ink); }
.modal-kopf h2 .serif { font-weight: 700; font-stretch: 112%; letter-spacing: -0.035em; color: var(--ink); }
.modal-inhalt { padding: 16px 30px 8px; gap: 20px; }
.modal-fuss { padding: 16px 30px 26px; border-top: 0; justify-content: flex-end; gap: 10px; }
.modal-fuss .btn { height: 46px; }
.modal-fuss .links { margin-right: auto; }
/* Abschnitte in langen Masken: Eyebrow mit Haarlinie */
.feld-abschnitt { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 400 11px 'Martian Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.feld-abschnitt::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.feld-abschnitt:first-child { margin-top: 0; }
/* Auswahl als Pillen statt Dropdown, wenn es wenige Möglichkeiten sind (wie .bx-seg): eine (Radio) oder mehrere (Checkbox) */
.k-wahl { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line); width: fit-content; max-width: 100%; }
.k-wahl label { position: relative; margin: 0 !important; cursor: pointer; }
.k-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.k-wahl span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font: 400 14px 'Archivo', sans-serif; color: var(--ink-2); transition: background .3s, color .3s, box-shadow .3s; white-space: nowrap; }
.k-wahl label:hover span { color: var(--ink); }
.k-wahl input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh); }
.k-wahl input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-wahl.mehrfach input:checked + span::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--pearl); flex: none; }

/* ---------- Kundenakte: Kopf, Seiten-Reiter, Übersicht (DESIGN.md „App“, „Seiten-Reiter“, „Segment-Reiter“, „Eckdaten in Karten“) ---------- */
.k-kopfzeile { align-items: center; }
.k-kopf h1 { margin: 4px 0 10px; }
.k-kopf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.k-kopf-tx { font-size: 14px; color: var(--ink-2); }
.k-kopf p.k-kopf-tx { margin: 10px 0 0; }
.pill.k-neutral { background: var(--canvas-2); color: var(--ink-2); }
.pill.k-neutral .pdot { background: var(--mute); }
.k-reiter { display: grid; grid-template-columns: repeat(12, minmax(84px, 1fr)); gap: 2px; padding: 6px; margin-bottom: 20px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh); overflow-x: auto; scrollbar-width: none; }
.k-reiter::-webkit-scrollbar { display: none; }
.k-reiter button { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 64px; padding: 8px 6px; border: 0; border-radius: 22px; background: transparent; color: var(--ink-2); font: 400 13px 'Archivo', sans-serif; cursor: pointer; transition: background .25s, color .25s; }
.k-reiter button:hover { color: var(--ink); background: var(--canvas); }
.k-reiter .k-r-ic img { width: 20px; height: 20px; display: block; opacity: .9; }
.k-reiter .k-r-perle { display: none; width: 16px; height: 16px; margin: 2px 0; border-radius: 50%; background: var(--pearl); box-shadow: inset -2px -3px 5px rgba(0,0,0,.3), inset 2px 2px 4px rgba(255,255,255,.35); }
.k-reiter button.active { background: var(--well); box-shadow: var(--inset); color: var(--ink); font-weight: 600; }
.k-reiter button.active .k-r-ic { display: none; }
.k-reiter button.active .k-r-perle { display: block; }
.k-reiter .k-r-tx { white-space: nowrap; }
.k-reiter button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Eckdaten: eingeprägte Leiste, 3 × 2, Haarlinien zwischen den Feldern */
.k-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border-radius: 18px; background: var(--well); box-shadow: var(--inset); padding: 4px; }
.k-fakt { display: grid; gap: 6px; align-content: start; padding: 14px 16px; min-width: 0; }
.k-fakt:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.k-fakt:nth-child(n + 4) { border-top: 1px solid var(--line); }
.k-fakt-l { font: 400 10px 'Martian Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.k-fakt-w { font-size: 15px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-fakt-w .lnk { color: var(--ink); }
.k-fehlt { font-size: 14px; font-weight: 400; color: var(--mute); }
.k-fehlt .lnk, .w .l .n .lnk { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; color: var(--c-kunde-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.w .l .n .lnk { margin: 0; font: 400 12px 'Archivo', sans-serif; letter-spacing: 0; text-transform: none; }
/* Marke: Logo auf ruhiger Bühne, Farbstreifen */
.k-marke { display: grid; gap: 14px; align-content: start; text-align: left; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
.k-marke:hover { box-shadow: var(--sh-lift); }
.k-marke .l .n .pill { font-family: 'Archivo', sans-serif; letter-spacing: 0; text-transform: none; }
.k-marke-buehne { display: grid; place-items: center; height: 120px; border-radius: 18px; background: var(--canvas); box-shadow: var(--inset); padding: 16px; }
.k-marke-buehne img { max-width: 100%; max-height: 88px; object-fit: contain; }
.k-marke-leer { font-size: 14px; color: var(--mute); }
.k-farben { display: flex; gap: 6px; align-items: center; min-height: 28px; }
.k-farbe { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
/* Ruhige Kennzahl-Karten, antippbar (erhaben) */
.k-zahl { display: grid; gap: 4px; text-align: left; border: 0; cursor: pointer; font: inherit; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
.k-zahl:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }
.k-zahl .l { display: flex; align-items: center; gap: 10px; }
.k-zahl-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); }
.k-zahl-ic img { width: 17px; height: 17px; }
.k-zahl .v { font-size: 44px; line-height: 1.05; margin-top: 10px; }
.k-zahl-sub { font-size: 13px; color: var(--mute); }
.k-zahl.betont .k-zahl-sub { color: var(--bad); }
/* Gebucht, Notiz, Ablage */
.k-zeilen { display: grid; gap: 8px; margin-top: 14px; }
.k-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 48px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--canvas); }
.k-zeile b { font-weight: 600; font-size: 14px; }
.k-zeile .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-leer-tx { margin: 14px 0 0; font-size: 14px; color: var(--mute); }
.k-karten-knopf { margin-top: 16px; }
.k-notiz { margin: 14px 0 0; white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-height: 220px; overflow: auto; }
.k-ablage { display: grid; gap: 10px; justify-items: start; margin-top: 14px; }
@media (max-width: 1250px) {
  .k-uebersicht > .w[style*="span 8"], .k-uebersicht > .k-marke { grid-column: span 12 !important; }
  .k-uebersicht > .k-zahl { grid-column: span 6 !important; }
  .k-uebersicht > .w[style*="span 5"], .k-uebersicht > .w[style*="span 4"], .k-uebersicht > .w[style*="span 3"] { grid-column: span 12 !important; }
}
@media (max-width: 900px) {
  .k-reiter { grid-template-columns: repeat(12, 84px); border-radius: 24px; }
  .k-kopfzeile .k-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
  .k-kopfzeile .k-logo.gross { width: 52px; height: 52px; }
  .k-fakten { grid-template-columns: 1fr 1fr; }
  .k-fakt:not(:nth-child(3n + 1)) { border-left: 0; }
  .k-fakt:nth-child(2n) { border-left: 1px solid var(--line); }
  .k-fakt:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .k-uebersicht > .k-zahl { grid-column: span 12 !important; }
  .k-wahl { border-radius: 24px; }
}
/* Reiter Marke: Felder nach Kit wie in den Masken (Label Archivo 13 px, Feld 50 px, Radius 16) */
.m-form { display: grid; gap: 16px; }
.m-form > label { display: grid; gap: 8px; font: 500 13px 'Archivo', sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.m-form input, .m-form textarea { height: 50px; border-radius: var(--r-input); padding: 0 18px; font: 400 16px 'Archivo', sans-serif; color: var(--ink); background: var(--well); box-shadow: var(--inset), inset 0 0 0 1px var(--line-strong); border: 0; }
.m-form textarea { height: auto; min-height: 110px; padding: 14px 18px; line-height: 1.55; }
.m-form .klein { font-size: 13px; color: var(--mute); }
.m-fuss { display: flex; justify-content: flex-end; }
.m-farbe input:not([type="color"]), .m-farbe select { height: 44px; border-radius: 14px; }