/* werbekomplizen CRM — Basis-Stil */

* { box-sizing: border-box; }
/* Scrollbalken global ausblenden (Scrollen funktioniert weiter) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Icons global immer mittig — der Span (data-icon) ist eine zentrierende Flex-Box, das SVG ein Block
   (kein Grundlinien-Versatz). Damit sitzt JEDES Icon von oben und unten mittig, ohne dass man es je
   Stelle für Stelle nachziehen muss. Steht bewusst früh; spezifische Regeln (Größe usw.) gelten weiter. */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 0; }
[data-icon] > svg { display: block; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #111; background: #f6f7f9; line-height: 1.5;
  overscroll-behavior: none;
}
/* overflow-x nur auf body, NICHT auf html: sonst wird der HTML-Root in Chrome zum
   Scroll-Container und blockiert das vertikale Scrollen (Safari macht das nicht). Andreas 04.08.2026. */
body { overflow-x: hidden; }
/* Grundton dunkel, wenn beim letzten Mal der Login dran war (gesetzt vom Schnipsel im Kopf der
   index.html, noch vor dem ersten Zeichnen). Verhindert das helle Aufblitzen, waehrend das CRM
   beim Server nachfragt, ob man angemeldet ist. Wird in showApp wieder entfernt. */
html.start-login, html.start-login body { background: #0c1016; }
html { scroll-behavior: smooth; }
/* Solange ein 3-Punkte-Menü offen ist, Seite einfrieren (kein Scroll). Wird per JS gesetzt/entfernt. */
html.menu-offen { overflow: hidden; }
html.tb-noscroll { overflow: hidden; }
html.dok-vorschau-offen { overflow: hidden; }

/* Blaue Browser-Focus-Rahmen abschalten (auch Safari-Standard-Ring) */
input, select, textarea, button, a { outline: none !important; }
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], select, textarea, button {
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: #a0a4aa !important; box-shadow: none !important; }
button:focus, a:focus { box-shadow: none !important; }
input::-webkit-search-decoration, input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Ein eigenes Loesch-X (Andreas 16.07.2026: „bei suchfeldern ein x", danach „ich sehe kein x").
   Das EINGEBAUTE X wieder anzuschalten funktioniert hier NICHT: Die Zeile daruber nimmt allen
   Suchfeldern per `appearance: none` das native Aussehen — damit ist auch der eingebaute Loesch-Knopf
   weg, und er laesst sich einzeln nicht zurueckholen. Deshalb ein eigener Knopf.
   Er erscheint nur, wenn wirklich Text im Feld steht (die Oberflaeche setzt `hat-text`) — ein X an
   einem leeren Feld waere ein Knopf, der nichts tut. */
/* align-items: stretch, damit der Wrapper GENAU die Hoehe des Feldes hat. Bei `center` richtet
   er sich an der Textlinie aus und wird minimal hoeher — dann sitzt das X, das sich an der Mitte
   des Wrappers ausrichtet, sichtbar zu tief (Andreas 16.07.2026: „mittig von oben nach unten"). */
.such-wrap { position: relative; display: inline-flex; align-items: stretch; }
.such-wrap > input { padding-right: 28px; }
/* Nur ein feines Kreuz, kein grauer Kreis (Andreas 16.07.2026: „sieht unmöglich aus").
   Die Farbe kommt aus der Umgebung: In der dunklen Kopfleiste ist der Text weiss, im Mail-Kopf
   dunkel — ein fest eingestelltes Grau waere an einer der beiden Stellen immer falsch. */
.such-x { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: none;
  width: 16px; height: 16px; align-items: center; justify-content: center; border: none; padding: 0;
  margin: 0; background: none; color: inherit; opacity: .4; cursor: pointer; line-height: 0; }
.such-wrap.hat-text .such-x { display: inline-flex; }
.such-x:hover { opacity: .85; }
/* Das SVG darf keine Maus-Ereignisse annehmen (Andreas 16.07.2026: „bei hover keine hand").
   Sonst liegt der Zeiger auf dem Bild statt auf dem Knopf — und das Bild kennt keinen Zeiger-Stil,
   also bleibt es beim Pfeil. So gilt ueberall der Knopf mit seiner Hand. */
.such-x svg { pointer-events: none; display: block; }
/* Ein gezeichnetes Kreuz statt des Schriftzeichens „×" (Andreas 16.07.2026, zweimal: „sieht unmöglich
   aus", dann „sieht immer noch blöd aus"). Das Zeichen kommt aus der Schrift — es sitzt je nach
   Schriftart anders, ist mal zu fett, mal zu klein, und laesst sich nicht sauber zentrieren.
   Zwei gekreuzte Linien sind immer gleich. */
.such-x svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
/* Die globale Suche fuellt die Breite ihrer Leiste — der Wrapper darf sie nicht einschnueren. */
.tb-such-wrap { flex: 0 0 auto; }
.tb-such-wrap > .global-search { width: 420px; }
select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
/* Einheitliches Dropdown-Design fuer ALLE Selects (Andreas 29.07.) — UNTERSTRICH-PRINZIP ueberall:
   nur untere Linie, kein Kasten, transparenter Hintergrund; Pfeil bleibt. Klassenlose Selects
   bekommen so denselben Unterstrich wie die Modal-Felder. background-color statt Kurzform, damit
   der Chevron (background-image oben) erhalten bleibt. */
select {
  border: none;
  border-bottom: 1px solid #d0d3d8;
  border-radius: 0;
  background-color: transparent;
  color: #1d1d1f;
  font-size: 14px;
  font-family: inherit;
  padding: 8px 18px 8px 0;
  background-position: right 0 center;
  cursor: pointer;
}
/* Dropdown ohne Chevron (z. B. Rolle im Ansprechpartner-Fenster, Andreas 30.07.2026). Native Selects
   werden per selectToDd() in ein eigenes .k-dd umgewandelt — der sichtbare Chevron ist dort .k-dd-caret.
   Die Markierung „no-chevron" wird vom Select ans .k-dd durchgereicht; hier blenden wir den Caret aus. */
.k-dd.no-chevron .k-dd-caret { display: none !important; }
select.no-chevron { background-image: none !important; padding-right: 0 !important; }
/* Eigenes Dropdown (Knopf + kdOpenMenu) als Ersatz fuer <select> — Unterstrich-Optik, oeffnet das
   eigene helle Menue statt der System-Liste. Andreas 29.07. */
.k-dd { position: relative; width: 100%; }
.k-dd-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 38px; padding: 8px 0; border: none; border-bottom: 1px solid #d0d3d8; border-radius: 0;
  background: transparent; font-size: 14px; font-family: inherit; color: #1d1d1f; cursor: pointer; text-align: left;
}
.k-dd-btn:focus { outline: none; border-bottom-color: #0071e3; }
.k-dd-btn .k-dd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-dd-btn [data-icon], .k-dd-btn .k-dd-caret { flex: 0 0 auto; color: #7b828c; display: inline-flex; }
.k-dd-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Inline-Variante (Selects ausserhalb von .form-group, z.B. Filterleisten): passt sich der Breite an. */
.k-dd-inline { width: auto; display: inline-flex; vertical-align: middle; }
.k-dd-inline .k-dd-btn { width: auto; gap: 10px; height: auto; padding: 6px 0; }

/* SPA-Basis: App bleibt versteckt bis Auth-Status feststeht */
.app-hidden { visibility: hidden; }
/* kleiner und blasser (Andreas 15.07.) — es ist ein Zwischenzustand, kein Inhalt */
.loading { padding: 24px; text-align: center; color: #9aa0a8; font-size: 12.5px; }

/* ============ Layout: Topbar oben + darunter Sidebar + Main ============ */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }

.layout {
  display: block;
  width: 100%;
  min-height: calc(100vh - 56px);
}
/* Eingeklappt: schmal, nur Icons + Tooltips (statt komplett ausblenden) */
.sidebar { transition: width 0.18s ease; }
.app-shell.side-closed .sidebar { width: 64px; overflow: visible; }
.app-shell.side-closed .sidebar-nav { overflow: visible; }
.app-shell.side-closed .sn-item { justify-content: center; padding: 13px 0; position: relative; overflow: visible; }
.app-shell.side-closed .sn-item > span:not(.sn-icon) { display: none; }
.app-shell.side-closed .sn-item:hover::after {
  content: attr(data-label); position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  background: #292c31; color: #fff; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 7px;
  white-space: nowrap; pointer-events: none; z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

/* ------ Sidebar ------ */
.sidebar {
  background: #f9f9f9;
  border-right: 1px solid #e4e6ea;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  left: 0;
  width: 220px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 12px 0;
  z-index: 15;
}
.main { padding-left: 220px; transition: padding-left 0.18s ease; }
.app-shell.side-closed .main { padding-left: 64px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 18px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f0f1f3;
  margin-bottom: 8px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: #0071e3;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}
.brand-text {
  font-weight: 600;
  font-size: 14px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 2px;
}
.sn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  color: #292c31;
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  position: relative;
}
/* Offline: E-Mail-Modul ist online-only -> Eintrag ausgegraut und nicht klickbar (Andreas 25.08.2026). */
.sn-item.sn-offline { opacity: .38; pointer-events: none; cursor: default; }
/* Hinweis, wenn die E-Mail-Seite offline geoeffnet wird. */
.mail-offline { display: flex; align-items: center; justify-content: center; min-height: 40vh; padding: 24px; }
.mail-offline-inner { max-width: 420px; text-align: center; color: #6b7280; font-size: 15px; line-height: 1.5; }
/* Nur ein kleiner roter Punkt, keine Zahl (Andreas 16.07.2026). */
.sn-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  display: none;
}
.sn-badge { top: 0; right: 0; }   /* etwas weiter aufs Symbol (Andreas 16.07.2026) */
.sn-badge.is-visible { display: inline-flex; }

.sn-sub {
  display: none;
  gap: 6px;
  padding-left: 30px;
  font-size: 13px;
  color: #4f565f;
  margin-top: -4px;
}
.sn-sub .sn-icon svg { width: 16px; height: 16px; }
.sn-item[data-route="kunden"].active + .sn-sub { display: flex; }
.sn-item[data-route="deals"].active ~ .sn-sub[data-parent="deals"] { display: flex; }
.sn-item[data-route="start"].active ~ .sn-sub[data-parent="start"] { display: flex; }
.sn-item[data-route="buchhaltung"].active ~ .sn-sub[data-parent="buchhaltung"] { display: flex; }
.sn-item[data-route="projekte"].active ~ .sn-sub[data-parent="projekte"] { display: flex; }
.sn-sub.active { display: flex; background: #eeeeee; color: #111; font-weight: 400; }

.ka-zeitraum { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 8px; flex-wrap: wrap; }
.ka-zeitraum-btn {
  background: transparent;
  border: 1px solid #d0d3d8;
  color: #292c31;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.ka-zeitraum-btn:hover { background: #f4f6f8; }
.ka-zeitraum-btn.is-active { background: #0071e3; border-color: #0071e3; color: #fff; }

/* Deal-Auswertungen: Filter-Leiste */
.da-filter { display: flex; gap: 28px; margin: 0 0 20px; }
.da-field { display: flex; flex-direction: column; gap: 2px; }
.da-field label { font-size: 11.5px; color: #7b828c; }
.da-drop { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 2px 0; font-size: 15px; color: #1d1d1f; cursor: pointer; font-family: inherit; }
.da-drop .da-caret { display: inline-flex; color: #7b828c; }
.da-drop .da-caret svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Eigener Datepicker */
.modal-body .form-group.dp-field > label:first-child { top: 0; font-size: 11px; }
.modal-body .form-group.dp-field.k-pin-field .dp-control { padding-right: 26px; }
.dp-control { display: flex; align-items: center; gap: 8px; height: 38px; border-bottom: 1px solid #d0d3d8; cursor: pointer; }
.dp-control:hover { border-bottom-color: #a0a4aa; }
.dp-text { flex: 1 1 auto; font-size: 14px; color: #111; }
.dp-control.is-empty .dp-text { color: #9aa0a8; }
.dp-icon { display: inline-flex; color: #5e6772; }
.dp-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.dp-clear { background: none; border: none; color: #9aa0a8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; display: none; }
.dp-control:not(.is-empty):hover .dp-clear { display: inline-block; }
.dp-pop { background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 12px; width: 268px; z-index: 4000; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-size: 14px; font-weight: 600; color: #1d1d1f; }
.dp-nav { background: none; border: none; font-size: 20px; line-height: 1; color: #5e6772; cursor: pointer; padding: 2px 10px; border-radius: 6px; }
.dp-nav:hover { background: #f4f6f8; color: #111; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { margin-bottom: 4px; }
.dp-wdname { text-align: center; font-size: 11px; color: #9aa0a8; padding: 2px 0; }
.dp-cell { border: none; background: none; height: 32px; border-radius: 6px; font-size: 13px; color: #292c31; cursor: pointer; font-family: inherit; }
.dp-cell:hover { background: #eef2f6; }
.dp-cell.dp-empty { background: none; cursor: default; }
.dp-cell.is-today { color: #0071e3; font-weight: 600; }
.dp-cell.is-sel { background: #0071e3; color: #fff; }

.ka-charts { display: flex; flex-direction: column; gap: 8px; }
.ka-chart {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px 20px;
}
.ka-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ka-chart-head h3 { margin: 0; font-size: 15px; color: #222; }
.ka-chart-actions { display: flex; gap: 4px; }
.ka-view-btn {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: #4f565f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ka-view-btn:hover { background: #f4f6f8; }
.ka-view-btn.is-active { background: #0071e3; color: #fff; }
.ka-view-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ka-chart-body { min-height: 240px; display: flex; align-items: center; justify-content: center; }
.ka-empty { color: #5e6772; font-size: 13px; }
.ka-bars { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.ka-bar-row { display: flex; align-items: center; gap: 12px; }
.ka-bar-label { width: 110px; flex-shrink: 0; font-size: 13px; color: #444; }
.ka-bar-track { flex: 1; height: 20px; background: #f0f2f5; border-radius: 4px; overflow: hidden; }
.ka-bar-fill { height: 100%; background: #0071e3; border-radius: 4px; min-width: 2px; transition: width .3s; }
.ka-bar-value { width: 40px; flex-shrink: 0; text-align: right; font-size: 13px; color: #222; font-variant-numeric: tabular-nums; }

/* ==== Kontakt-Liste (D&P-Layout) ==== */
.k-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 8px 0 8px 4px;
}
.k-list-head-left  { display: flex; align-items: center; gap: 12px; position: relative; }
.k-list-head-right { display: flex; align-items: center; gap: 8px; position: relative; }
.kd-liz-tab .k-list-head { padding-top: 0; }

/* Modul-Limits im Artikel-Formular */
.kat-limits { margin-top: 16px; }
.kat-limits-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kat-limits-head span { font-size: 14px; color: #1d2126; }
.kat-limit-cols, .kat-limit-row { display: grid; grid-template-columns: 1fr 80px 140px 120px 30px; gap: 12px; align-items: center; }
.kat-limit-cols { font-size: 11px; color: #5e6772; margin-bottom: 2px; }
.kat-limit-row { margin-bottom: 4px; }
.kat-limit-row input:disabled { color: #b8bcc2; border-bottom-style: dashed; }
.kat-limit-row .k-toggle { display: flex; align-items: center; gap: 8px; position: relative; cursor: pointer; font-size: 13px; white-space: nowrap; color: #5e6772; }
.kl-del { border: none; background: none; font-size: 20px; color: #9aa0a8; cursor: pointer; line-height: 1; padding: 0; }
.kl-del:hover { color: #d33; }

/* Mail-Seite: zwei Karten — links die Mail-Sache (breit), rechts der Kalender (fest 340px, wie kd-side) */
.mail-seite { display: flex; gap: 8px; align-items: flex-start; }
/* gezielter als die allgemeine .kd-card-Regel (die steht spaeter und wuerde sonst 16px Innenabstand setzen) */
.mail-seite .mail-karte { flex: 1 1 auto; min-width: 0; padding: 0; overflow: hidden; }
.mail-rechts { flex: 0 0 300px; display: flex; flex-direction: column; gap: 16px; }
.mail-seite.rechts-zu .mail-rechts { display: none; }
/* Die Spiegelung galt dem Sidebar-Symbol (zeigte sonst zur falschen Seite). Seit dort das
   Kalender-Symbol steht (Andreas 15.07.2026), waere sie falsch — ein Kalender hat keine Richtung. */
/* drei feste Bereiche: links Schalter+Titel, MITTE die Aktionen (stehen fest), rechts Aktualisieren+Schalter */
.mail-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px; border-bottom: 1px solid #f2f2f2; }
.mail-kopf-links { display: flex; align-items: center; min-width: 0; }
.mail-kopf-rechts { display: flex; align-items: center; justify-content: flex-end; }
/* dezente, kleine Symbole statt dominanter Knoepfe */
.mail-kopf .k-icon-btn { width: 28px; height: 28px; min-width: 0; padding: 0; border: none; background: none; border-radius: 4px; color: #5e6772; }
.mail-kopf .k-icon-btn:hover { background: #f2f2f2; border-color: transparent; }
.mail-kopf .k-icon-btn svg { width: 16px; height: 16px; }
@keyframes mail-dreht { to { transform: rotate(360deg); } }
.mail-kopf .k-icon-btn.dreht svg { animation: mail-dreht .8s linear infinite; transform-origin: 50% 50%; }
/* Aktionen linksbuendig, aber mit Luft nach dem Sidebar-Schalter; Aktualisieren wird nach rechts geschoben */
.mail-kopf-akt { display: flex; align-items: center; gap: 8px; }
.mail-body { display: grid; grid-template-columns: 210px 240px minmax(0, 1fr); align-items: stretch; height: calc(100vh - 115px); }   /* Spalte 1: 190 -> 210px, Andreas 15.07.2026 */
.mail-body.ordner-zu { grid-template-columns: 0 240px minmax(0, 1fr); }
.mail-body.ordner-zu .mail-ordner { overflow: hidden; padding: 0; border-right: none; }

/* Ordner-Spalte (Struktur wie Apple Mail) */
.mail-ordner { border-right: 1px solid #f2f2f2; padding: 10px 6px; overflow-y: auto; }
.mo-gruppe { font-size: 11px; color: #9aa0a8; padding: 8px 8px 4px; text-transform: none; }
.mo-konto { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12.5px; color: #5e6772; margin-top: 20px; }   /* Postfachname 12.5px, Abstand 20px — Andreas 15./16.07.2026 */
/* Die Favoriten-Ueberschrift ist die erste Gruppe (auch mo-konto, seit sie aufklappbar ist) -> KEIN
   20px-Abstand darueber; der gilt nur ZWISCHEN den Postfaechern. Sonst haengt Favoriten zu tief. Andreas 28.08.2026. */
#mail-ordner .mo-konto:first-child { margin-top: 0; }
.mo-kname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-plus { border: none; background: none; padding: 0; width: 18px; height: 18px; border-radius: 4px; color: #9aa0a8; cursor: pointer; opacity: 0; display: flex; align-items: center; justify-content: center; }
.mo-konto:hover .mo-plus { opacity: 1; }
.mo-plus:hover { background: #eaeaea; color: #0071e3; }
.mo-plus svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.mo-pfeil svg { width: 12px; height: 12px; stroke: currentColor; fill: none; transition: transform .12s; }
.mo-pfeil.auf svg { transform: rotate(90deg); }
.mo-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 14px; color: #454c55; text-decoration: none; cursor: pointer; }   /* Ordner-Text 14px.
   Farbe liegt bewusst ZWISCHEN dem fast schwarzen Text (#1d2126) und dem grauen Postfachnamen
   (#5e6772, .mo-konto) — Andreas 15.07.2026: „heller, aber nicht so hell wie die postfachnamen".
   Die Rangfolge bleibt damit lesbar: Ordner sind wichtiger als die Ueberschrift darueber. */
.mo-zeile:hover { background: #f5f5f5; }
.mo-zeile.is-active { background: #eaf1fb; color: #0071e3; }
.mo-ic { display: flex; align-items: center; flex: 0 0 auto; }
.mo-ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; display: block; }
.mo-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-zahl { font-size: 11px; color: #9aa0a8; }
.mo-menu { border: none; background: none; padding: 0; width: 22px; height: 22px; border-radius: 5px; color: #9aa0a8; cursor: pointer; opacity: 0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mo-zeile:hover .mo-menu { opacity: 1; }
.mo-konto:hover .mo-menu { opacity: 1; }
.mo-menu:hover { background: #eaeaea; color: #0071e3; }
.mo-menu svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.mo-zeile.is-active .mo-zahl { color: #0071e3; }

/* Liste */
.mail-kopf-titel { display: flex; align-items: baseline; gap: 8px; margin-left: 22px; min-width: 0; }
.mkt-name { font-size: 13px; color: #1d2126; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-anz { font-size: 11px; color: #9aa0a8; white-space: nowrap; }
.mail-liste { border-right: 1px solid #f2f2f2; overflow-y: auto; }
.mail-row { padding: 10px 12px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.mail-row:last-child { border-bottom: none; }
.mail-row:hover { background: #f7f7f7; }
.mail-row.is-active { background: #eaf1fb; }
.mail-row.is-neu .mail-von span:first-child, .mail-row.is-neu .mail-betreff { font-weight: 700; color: #111; }
.mail-von { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #1d2126; }
/* align-items fehlte (Andreas 15.07.2026: „uhrzeit ist nicht auf der hoehe von empfaenger").
   Ohne die Angabe streckt Flexbox die Kinder ueber die volle Hoehe, und Name (13px) und
   Uhrzeit (11px) sitzen dadurch unterschiedlich hoch. */
.mail-von span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Das Schloss sitzt neben der Uhrzeit (Andreas 15.07.2026). margin-left:auto schiebt es mit
   Datum und Menue nach rechts; der Absender links schrumpft bei Bedarf. */
.mail-schloss { margin-left: auto; }
.mail-datum { font-size: 11px; color: #9aa0a8; white-space: nowrap; margin-left: auto; }
.mail-schloss + .mail-datum { margin-left: 0; }   /* steht ein Schloss davor, schiebt schon dieses */
.mail-menu { border: none; background: none; padding: 0; width: 22px; height: 22px; border-radius: 5px; color: #9aa0a8; cursor: pointer; opacity: 0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mail-row:hover .mail-menu { opacity: 1; }
.mail-menu:hover { background: #eaeaea; color: #0071e3; }
.mail-menu svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.mail-betreff-zeile { display: flex; align-items: center; gap: 6px; margin-top: 1px; }   /* enger, Andreas 15.07.2026 */
.mail-betreff { font-size: 13px; color: #5e6772; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mail-klammer svg { width: 13px; height: 13px; stroke: #9aa0a8; fill: none; }
.mail-fahne svg { width: 13px; height: 13px; stroke: #eb9a1f; fill: none; }
.mail-blockiert { display: inline-flex; flex: none; }
.mail-blockiert svg { width: 13px; height: 13px; stroke: #E24B4A; fill: none; stroke-width: 1.8; }
.mail-verlauf { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #0071e3; white-space: nowrap; }
.mail-verlauf svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.mail-vorschau { font-size: 12px; color: #9aa0a8; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mail-row.is-neu .mail-betreff { color: #1d2126; }
.mail-lese { padding: 16px; overflow-y: auto; }

/* Kalender rechts (Vorbild Outlook) */
.mk-kopf-btns { display: flex; align-items: center; gap: 2px; }
.mk-kopf-btns .mk-nav { width: 20px; height: 20px; min-width: 0; padding: 0; border: none; background: none; border-radius: 4px; }
.mk-kopf-btns .mk-nav:hover { background: #f2f2f2; }
.mk-kopf-btns .mk-nav svg { width: 12px; height: 12px; }
.mk-wochentage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.mk-wochentage span { text-align: center; font-size: 11px; color: #9aa0a8; }
.mk-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mk-tag { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 4px; font-size: 12px; color: #1d2126; cursor: pointer; }
.mk-tag:hover { background: #f2f2f2; }
.mk-tag.is-heute { background: #0071e3; color: #fff; }
.mk-tag.mk-leer { visibility: hidden; }
.mk-liste { margin-top: 14px; border-top: 1px solid #f2f2f2; padding-top: 10px; }
.mk-tagblock { margin-bottom: 10px; }
.mk-tagkopf { font-size: 12px; color: #1d2126; margin-bottom: 2px; }
.mk-leer-txt { font-size: 12px; color: #9aa0a8; }
/* Termin-/Erinnerungs-Zeilen in der 5-Tage-Liste (Andreas 19.07.2026, „Kalender verbinden") */
.mk-ev { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #1d2126; padding: 2px 0 2px 8px; border-left: 2px solid #0071e3; margin-bottom: 2px; cursor: pointer; border-radius: 0 4px 4px 0; }
.mk-ev:hover { background: #f0f3f7; }
.mk-ev-erinn { border-left-color: #e0a100; }
.mk-ev-zeit { flex: 0 0 auto; color: #7b828c; font-variant-numeric: tabular-nums; min-width: 34px; }
.mk-ev-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-lese-kopf { border-bottom: 1px solid #f2f2f2; padding-bottom: 10px; margin-bottom: 12px; }
.mail-lese-betreff { font-size: 16px; color: #111; margin-bottom: 4px; }
.mail-lese-meta { font-size: 12px; color: #5e6772; }
/* Mindesthoehe klein (Andreas 16.07.2026, zu viel Leerraum). Vorher 460px: bei einer kurzen Mail
   blieb das Fenster 460 hoch, der Rest leer. mailFrameHoehe() misst den echten Inhalt und setzt
   die Hoehe; die Mindesthoehe soll nur kurz beim Laden Flackern vermeiden. */
.mail-frame { width: 100%; min-height: 40px; border: none; background: #fff; }
/* Seit 16.07.2026 stehen hier ZWEI Knoepfe (nur diesmal / immer). space-between haette den Text
   links und die Knoepfe quer durch den Kasten verteilt - margin-right:auto am Text haelt die
   beiden rechts zusammen. flex-wrap, weil die Adresse im zweiten Knopf lang sein kann. */
.mail-bilder-hinweis { display: flex; align-items: center; gap: 8px; background: #fdf6e3; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; color: #6b5a1f; flex-wrap: wrap; }
.mail-bilder-hinweis > span:first-child { margin-right: auto; }
.mail-bilder-hinweis .btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.mail-anh { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mail-anh-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5e6772; border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px 8px; }
.mail-anh-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* E-Mail-Konten: Rueckmeldung vom Verbindungstest */
.mk-ok      { color: #1e7d32; }
.mk-fehler  { color: #c62828; }
/* Dritter Fall im Verbindungstest: nicht eingerichtet = kein Fehler (z. B. reines Empfangs-Postfach).
   Heisst bewusst NICHT .mk-leer — das ist schon der leere Kalendertag (siehe .mk-tag.mk-leer). */
.mk-neutral { color: #9aa0a8; }

/* Modul-Limits in der Lizenz (Standard vom Modul, hier pro Kunde aenderbar) */
.liz-limit-mod { margin-bottom: 10px; }
.liz-limit-modname { font-size: 13px; color: #1d2126; margin-bottom: 2px; }
.liz-limit-row { display: grid; grid-template-columns: 1fr 80px 140px 80px; gap: 12px; align-items: center; }
.liz-limit-name { font-size: 13px; color: #5e6772; }
.liz-limit-zeit { font-size: 12px; color: #9aa0a8; white-space: nowrap; }
.liz-limit-row input:disabled { color: #b8bcc2; border-bottom-style: dashed; }
.liz-limit-row .k-toggle { display: flex; align-items: center; gap: 8px; position: relative; cursor: pointer; font-size: 13px; white-space: nowrap; color: #5e6772; }
.deal-kpis { display: flex; align-items: baseline; gap: 18px; margin-right: 6px; color: #8a9098; font-size: 12px; white-space: nowrap; }
.deal-kpi b { color: #292c31; font-size: 15px; font-weight: 500; margin-right: 4px; }
.k-ansicht-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #111;
  padding: 4px 8px;
}
.k-ansicht-btn:hover { background: #f4f6f8; border-radius: 4px; }
.k-ansicht-btn.is-static { cursor: default; }
.k-ansicht-btn.is-static:hover { background: transparent; }
.k-ansicht-btn svg { width: 16px; height: 16px; stroke: #666; fill: none; stroke-width: 2; }
.k-ansicht-menu {
  position: absolute;
  top: -6px;
  left: -12px;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 6px;
  overflow: hidden;
  z-index: 30;
  padding: 6px 0;
}
.k-ansicht-menu a.is-active { color: #0071e3; font-weight: 600; }
.k-more-menu {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 6px;
  overflow: hidden;
  z-index: 30;
  padding: 6px 0;
}
.k-ansicht-menu a, .k-more-menu a {
  display: block;
  padding: 10px 16px;
  color: #292c31;
  text-decoration: none;
  font-size: 14px;
}
.k-ansicht-menu a:hover, .k-more-menu a:hover { background: #f4f6f8; }
.k-more-menu a.k-menu-danger { color: #c0261c; }
.k-more-menu a.k-menu-danger:hover { background: #fdeaea; }
/* Per Klick erzeugte Menues (kdOpenMenu, showCopyMenu) haengen am Seitenkoerper, nicht in der
   Liste. Ohne eigene Ebene lagen sie hinter jedem Modal (Ebene 100) — das Menue ging auf, war
   aber unsichtbar. Betraf JEDES Drei-Punkte-Menue in einem Modal, aufgefallen bei den E-Mail-Konten. */
.k-more-menu.kd-pop-menu { z-index: 200; }
.k-more-menu.ea-pop { max-height: 360px; overflow-y: auto; }
.kd-pop-menu a.is-current { color: #0071e3; font-weight: 600; }
.k-count-anzeige { color: #4f565f; font-size: 13px; margin-right: 4px; }
.k-count-anzeige b { color: #111; font-weight: 700; }
.k-icon-btn {
  width: 36px; height: 36px;
  border: 1px solid #aaaaaa;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.k-icon-btn:hover { background: #eeeeee; border-color: #a0a4aa; }
.k-icon-btn.is-active { background: #eaf1fb; border-color: #0071e3; color: #0071e3; }
.k-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.k-icon-more svg { width: 16px; height: 16px; }
.k-icon-btn-primary {
  background: #0071e3;
  border-color: #0071e3;
  color: #fff;
}
.k-icon-btn-primary:hover { background: #0062c4; border-color: #0062c4; }
.k-icon-btn-primary svg { stroke-width: 2; width: 22px; height: 22px; }
/* Kontakte-Kopfleiste: Buttons in Kalender-Groesse 30x30 (Andreas 19.07.2026) — nur diese Leiste */
.k-list-head-right .k-icon-btn, .kd-tl-right .k-icon-btn, .kd-vua-block-tools .k-icon-btn { width: 30px; height: 30px; }
/* Standard fuer ALLE Kopfleisten mit diesen Buttons (Andreas 19.07.2026): Icons zentriert (display:block,
   kein Grundlinien-Versatz) und etwas kleiner. Filter/Ansicht-Icons 18px, Plus 19px, Menue 16px. */
.k-list-head-right .k-icon-btn svg, .kd-tl-right .k-icon-btn svg, .kd-vua-block-tools .k-icon-btn svg { width: 18px; height: 18px; display: block; }
.k-list-head-right .k-icon-btn-primary svg, .kd-tl-right .k-icon-btn-primary svg, .kd-vua-block-tools .k-icon-btn-primary svg { width: 19px; height: 19px; }
.k-list-head-right .k-icon-more svg, .kd-tl-right .k-icon-more svg, .kd-vua-block-tools .k-icon-more svg { width: 16px; height: 16px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-dialog {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #3a4149;
}
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 500; color: #fff; }
.modal-close {
  background: none;
  border: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: #fff; opacity: 0.75; }
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
}
.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  color: #4f565f;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.modal-tab:hover { color: #111; }
.modal-tab.is-active { color: #0071e3; border-bottom-color: #0071e3; }
.modal-body {
  /* flex-basis auto (nicht 0): sonst klappt der Body in Dialogen mit Auto-Hoehe auf ~0 zusammen */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-dialog { min-height: 0; }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #eee;
}
/* Kosten erfassen/bearbeiten: Knöpfe rechts (nur dieses Fenster, ändert nichts global). */
#ak-modal .modal-foot { justify-content: flex-end; }
/* Der linke Bereich (Meldungen) nimmt den freien Platz — dadurch stehen die Knoepfe IMMER zusammen rechts. */
.modal-foot-left { flex: 1; min-width: 0; }
.k-neu-typ {
  display: flex;
  gap: 20px;
  margin-bottom: 4px;
}
.k-neu-typ label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Linksbuendig wie die Felder darueber — stand als einziges Element mittig (Andreas 29.07.2026). */
.nk-beispiel { font-size: 13px; color: #6b727b; margin-top: 4px; }
.nk-beispiel b { font-weight: 600; color: #292c31; }
.nk-list { display: flex; flex-direction: column; margin-top: -10px; }
.nk-row { display: flex; align-items: center; gap: 16px; padding: 11px 4px; border-bottom: 1px solid #f2f3f5; }
.nk-row:last-child { border-bottom: none; }
.nk-row-name { flex: 0 0 275px; font-weight: 400; font-size: 14px; color: #292c31; }
.nk-row-nr { flex: 1 1 auto; font-size: 13px; color: #6b727b; }
.nk-row-nr b { font-weight: 600; color: #292c31; }
.nk-row-edit { margin-left: auto; background: none; border: none; color: #8a9099; cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; align-items: center; }
.nk-row-edit:hover { background: #eef4fd; color: #0071e3; }
.nk-row-edit svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nk-gruppe-titel { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #8a9099; margin: 16px 4px 0; }
.nk-gruppe-titel:first-child { margin-top: 4px; }

/* Abschnitts-Ueberschrift NUR im Fenster „Angebote & Rechnungen" (Andreas 29.07.2026).
   Bewusste Kopie von .nk-gruppe-titel mit eigenen Abstaenden: dort folgt eine Liste, deren erste
   Zeile selbst Innenabstand hat — hier folgen Formularfelder ohne jeden Abstand. Deshalb Luft
   oben UND unten. Wirkt ausschliesslich in .ar-allg, kein anderes Fenster ist betroffen. */
.ar-allg .ar-sektion {
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: #8a9099; margin: 40px 0 14px;
}
.ar-allg .ar-sektion:first-child { margin-top: 0; }
.nk-list .nk-row:first-child { padding-top: 4px; }
.modal-sm { max-width: 460px; }
.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.form-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}
/* Schalter in einer Feldzeile sitzt auf Hoehe der Eingabefelder, nicht oben in der Spalte
   (die Felder daneben tragen ihre Beschriftung darueber). */
.ang-feldzeile .kat-checks { align-self: end; padding-bottom: 9px; }
.modal-body .form-group { display: flex; flex-direction: column; gap: 4px; }
.modal-body .form-group label { font-size: 12px; color: #4f565f; }
.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .form-group textarea,
.modal-body .kat-limit-row input:not([type=checkbox]),
.modal-body .kat-limit-row select,
.modal-body .liz-limit-row input:not([type=checkbox]) {
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #d0d3d8;
  border-radius: 0;
  font-size: 14px;
  color: #111;
  font-family: inherit;
  background-color: transparent;
}
.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .kat-limit-row input:not([type=checkbox]),
.modal-body .kat-limit-row select,
.modal-body .liz-limit-row input:not([type=checkbox]) { height: 38px; }
.modal-body .form-group textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
/* Aufgaben-Liste (To-Dos) an Erinnerungen — eigenstaendiger Block, erbt NICHT das Modal-Feld-CSS */
.erinn-todos-sec { margin: 16px 0 18px; }
.erinn-todos-label { font-size: 11px; color: #5e6772; letter-spacing: 0.02em; margin-bottom: 6px; }
.erinn-todos-sec .kd-todo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.erinn-todos-sec .kd-todo-check { width: 16px; height: 16px; flex-shrink: 0; accent-color: #0071e3; cursor: pointer; margin: 0; }
.erinn-todos-sec .kd-todo-check.is-hidden { display: none; }
.erinn-todos-sec .kd-todo-text { flex: 1 1 auto; box-sizing: border-box; height: 34px; padding: 6px 10px; border: 1px solid #d2d2d7; border-radius: 7px; font-size: 14px; font-family: inherit; color: #111; background: #fff; outline: none; }
.erinn-todos-sec .kd-todo-text:focus { border-color: #0071e3; }
.erinn-todos-sec .kd-todo-del { border: none; background: none; color: #b0b0b8; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; flex-shrink: 0; }
.erinn-todos-sec .kd-todo-del:hover { color: #ff3b30; }
.erinn-todos-sec .kd-todo-add { border: none; background: none; color: #0071e3; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.erinn-todos-sec .kd-todo-add svg { width: 13px; height: 13px; }
.wu-todos { display: flex; flex-direction: column; gap: 2px; margin: 5px 0 0; }
.wu-todo { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #444; cursor: pointer; align-self: flex-start; }
.wu-todo input { width: 15px; height: 15px; accent-color: #0071e3; cursor: pointer; flex-shrink: 0; }
.wu-todo.done span { text-decoration: line-through; color: #aaa; }
.modal-body .form-group input:focus,
.modal-body .form-group select:focus,
.modal-body .form-group textarea:focus,
.modal-body .kat-limit-row input:focus,
.modal-body .kat-limit-row select:focus,
.modal-body .liz-limit-row input:focus {
  border-bottom-color: #0071e3 !important;
  outline: none;
}
/* Dropdown-Pfeil (Chevron) fuer Selects im Modal wieder anzeigen */
.modal-body .kat-limit-row select,
.modal-body .form-group select {
  padding-right: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
}
.modal-body .form-group label {
  font-size: 11px;
  color: #5e6772;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.modal-body .form-group { padding-bottom: 0; margin-bottom: 0; }

.modal-dialog-wide { max-width: 815px; }
#k-neu-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#k-neu-content .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.k-neu-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 4px;
}
.form-group-inline { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.form-group-inline label { font-size: 12px; color: #4f565f; }

.k-neu-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.k-neu-col { display: flex; flex-direction: column; gap: 13px; }
/* Analyse-Block: abgesetzter Bereich mit Trenner UNTER den Kundendaten (Marketing-Felder) */
.k-analyse-block { margin-top: 20px; border-top: 1px solid #e5e8ec; padding-top: 16px; }
.k-analyse-head { font-weight: 600; font-size: 13px; color: #6a7280; margin-bottom: 12px; }
.k-analyse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; }
/* ============ Seite 3 „Marketing" (Agentur-Dashboard im CRM) — alle Klassen m3-, kollisionsfrei, Hausstil ============ */
/* Kundenliste = wie die Nav-Buttons der ersten Seite (.sn-item): eckig, volle Breite,
   kein Rand-Radius; Hover #eeeeee, Aktiv #e6e6e6 mit linkem Balken. Abstand oben
   wie Seite 1 (natuerliches sidebar- + sidebar-nav-Polster). */
.m3-kunden { display: flex; flex-direction: column; gap: 2px; padding: 0; }
.m3-kunde { display: flex; flex-direction: column; gap: 1px; padding: 11px 22px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.1s; }
.m3-kunde:hover { background: #eeeeee; }
.m3-kunde.is-active { background: #e6e6e6; border-left-color: #292c31; }
.m3-kunde-name { font-size: 13px; font-weight: 600; color: #1d2126; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-kunde-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; }
.m3-kunde-sub { font-size: 11px; color: #9aa0a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-kunde-score { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #9aa0a8; flex: none; }
.m3-kunde-dot { width: 6px; height: 6px; border-radius: 50%; background: #c3c8cf; flex: none; }
.m3-kunde-dot.is-green { background: #1a8f3a; }
.m3-kunde-dot.is-orange { background: #ea8a1a; }
.m3-kunde-dot.is-red { background: #d4341c; }
.m3-main { padding: 4px 2px; }
.m3-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.m3-hd-name { font-size: 22px; font-weight: 700; color: #1d2126; margin: 0; }
.m3-hd-sub { font-size: 13px; color: #9aa0a8; margin-top: 4px; }
.m3-empty { color: #9aa0a8; font-size: 14px; padding: 48px 0; text-align: center; }
.m3-card { border: 1px solid #e8ebef; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.m3-card-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa0a8; font-weight: 600; margin-bottom: 10px; }
/* Websites-Block (mehrere Adressen pro Kontakt) */
.k-web-block { display: flex; flex-direction: column; gap: 8px; margin-top: 58px; }
.k-web-head { font-size: 12px; color: #4f565f; }
.k-web-list { display: flex; flex-direction: column; gap: 8px; }
.k-web-row { display: flex; align-items: center; gap: 8px; }
.k-web-row.is-dragging { opacity: .45; }
.k-web-grip { display: inline-flex; align-items: center; color: #b0b4ba; cursor: grab; flex: 0 0 auto; }
.k-web-grip svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.k-web-adresse { flex: 1 1 auto; height: 38px; padding: 8px 0; border: none; border-bottom: 1px solid #d0d3d8; border-radius: 0; font-size: 14px; color: #111; font-family: inherit; background: transparent; }
.k-web-adresse:focus { border-bottom-color: #0071e3; outline: none; }
.k-web-del { flex: 0 0 auto; background: transparent; border: none; color: #9aa0a6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.k-web-del:hover { color: #d33; }
.k-web-add { align-self: flex-start; background: transparent; border: none; color: #0071e3; font-size: 13px; cursor: pointer; padding: 2px 0; }
.k-web-add:hover { text-decoration: underline; }

.k-neu-hint input,
.k-neu-hint select {
  background: transparent !important;
  color: #111 !important;
}

.k-pin-field { position: relative; }
/* Feld mit Nadel im Modal: Platz fuer die Nadel; bei Selects den Pfeil nach links neben die Nadel ruecken.
   Hoehere Spezifitaet als '.modal-body .form-group select', sonst sitzt der Pfeil wieder unter der Nadel. */
.modal-body .form-group.k-pin-field input { padding-right: 28px; }
.modal-body .form-group.k-pin-field select { padding-right: 44px; background-position: right 26px center; }
.k-pin-btn {
  position: absolute;
  right: 0; bottom: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #cdd0d5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.k-pin-btn:hover { color: #4f565f; }
.k-pin-btn.is-pinned { color: #7a7e84; }
.k-pin-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Datumsfeld: natives Kalender-Icon ausblenden (wie alle anderen Felder ohne Icon), Nadel bleibt normal */
.modal-body input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.modal-body input[type="date"]::-webkit-inner-spin-button { display: none; }

/* Eigenes Auswahlfeld (Land etc.) – einheitliches Type-Ahead statt Browser-Liste */
.k-combo { position: relative; }
.k-combo-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid #d0d3d8; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  max-height: 220px; overflow-y: auto; margin-top: 2px; padding: 4px 0;
}
.k-combo-list button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 12px; font-size: 14px; color: #222; cursor: pointer; font-family: inherit;
}
.k-combo-list button:hover { background: #f4f6f8; }

/* Felder, die spaeter mit einem Modul verknuepft werden (speichern noch nicht) */
.modal-body .k-feld-modul input,
.modal-body .k-feld-modul select { border-bottom-style: dashed; }

/* Floating-Labels wie D&P: Label liegt gross im leeren Feld, wandert klein hoch bei Fokus/Inhalt */
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline) {
  position: relative;
  padding-top: 16px;
}
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline) > label:first-child {
  position: absolute;
  left: 0;
  top: 22px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #5e6772;
  letter-spacing: 0;
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(input:focus) > label:first-child,
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(input:not(:placeholder-shown)) > label:first-child,
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(textarea:focus) > label:first-child,
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(textarea:not(:placeholder-shown)) > label:first-child,
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(.k-dd) > label:first-child,
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(select) > label:first-child {
  top: 0;
  font-size: 11px;
  color: #5e6772;
}

.k-neu-toggle { padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.k-neu-toggle > label:first-child { font-size: 11px; color: #5e6772; margin-bottom: 0; }
.modal-body .k-neu-toggle .k-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: #292c31; position: relative; }
.modal-body .k-neu-toggle .k-toggle-slider { display: block; }
.k-toggle input[type="checkbox"] { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.k-toggle-slider {
  flex-shrink: 0;
  width: 40px; height: 22px;
  background: #e0e3e8;
  border: 1px solid #c0c3c8;
  border-radius: 999px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.k-toggle-slider::after {
  content: '';
  position: absolute;
  top: 1px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border: 1px solid #b0b3b8;
  border-radius: 999px;
  transition: transform 0.15s;
}
.k-toggle input:checked + .k-toggle-slider { background: #0071e3; border-color: #0071e3; }
.k-toggle input:checked + .k-toggle-slider::after { transform: translateX(18px); border-color: #0071e3; }

.k-neu-info { color: #4f565f; font-size: 12px; margin: 0 12px; }

.modal-foot-left { display: flex; align-items: center; gap: 10px; position: relative; }
.k-weitere-menu {
  position: absolute;
  bottom: 48px; left: 0;
  min-width: 240px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 6px 0;
  z-index: 5;
}
.k-weitere-menu a {
  display: block;
  padding: 10px 16px;
  color: #292c31;
  text-decoration: none;
  font-size: 14px;
}
.k-weitere-menu a:hover { background: #f4f6f8; }
.k-weitere-menu {
  max-height: 400px;
  overflow-y: auto;
}
.k-weitere-sub {
  padding: 8px 16px 4px;
  font-size: 11px;
  color: #5e6772;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid #eee;
  margin-top: 4px;
}
.k-weitere-sub:first-child { border-top: none; margin-top: 0; }
.k-weitere-sub:first-child { border-top: none; margin-top: 0; }

.k-tab {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e9ebee;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
/* Im Modal ist die Karte schon das Fenster — die Tabelle darf dort keine zweite Karte bilden. */
.modal-body .k-tab { border: none; border-radius: 0; box-shadow: none; background: transparent; }
.k-tab thead th {
  text-align: left;
  padding: 12px 12px;
  color: #5e6772;
  font-weight: 400;
  font-size: 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.k-tab tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f4f5f7;
  font-size: 13.5px;
  color: #58595c;
  vertical-align: middle;
}
.k-tab tbody td.k-col-name { color: rgb(62, 66, 74); font-weight: 500; }
.k-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: #55606e; vertical-align: middle; margin-right: 10px; position: relative; }
/* Roter Punkt am Avatar, wenn der Kontakt etwas Offenes hat (Andreas 19.07.2026) */
.k-av-offen::after { content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: #E4574C; border: 2px solid #fff; }
.k-name-tx { display: inline-block; vertical-align: middle; max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tab th.k-th-sort { cursor: pointer; user-select: none; }
.k-tab th.k-th-sort:hover { color: #292c31; }
.k-tab tbody tr { cursor: pointer; transition: background 0.1s; }
.k-tab tbody tr:hover { background: #f9fafb; }
.k-col-more { width: 40px; text-align: right; color: #5e6772; }
.k-col-more svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
/* Stufe: fuellt die ganze Zelle (D&P-Optik), Text mittig, kein Pfeil, ganzes Feld klickbar */
.k-stufe-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #58595c;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
}
/* Zell-Hintergrund je Stufe (wechselt spaeter dynamisch) */
.k-stufecell { transition: background 0.15s; }
.k-stufecell.k-stufe-kunde       { background: #eef2f6; }
.k-stufecell.k-stufe-lead        { background: #fff6e6; }
.k-stufecell.k-stufe-interessent { background: #eaf1fb; }
.k-stufecell.k-stufe-lieferant   { background: #f3ecfb; }
.k-stufecell.k-stufe-absage      { background: #fdeaea; }
.k-stufecell.k-stufe-sonstiges   { background: #f2f3f5; }
/* Deal-Stufen-Farben (Liste) */
.k-stufecell.k-dealstufe-neu          { background: #f2f3f5; }
.k-stufecell.k-dealstufe-vorbereitung { background: #f2f3f5; }
.k-stufecell.k-dealstufe-angebot      { background: #eaf1fb; }
.k-stufecell.k-dealstufe-verhandlung  { background: #fff6e6; }
.k-stufecell.k-dealstufe-wartend      { background: #f3ecfb; }
.k-stufecell.k-dealstufe-abgelaufen   { background: #fdeddb; }
.k-stufecell.k-dealstufe-ruecktritt   { background: #fdeaea; }
.k-stufecell.k-dealstufe-pause        { background: #eef2f6; }
.k-stufecell.k-dealstufe-gewonnen     { background: #e6f6ea; }
.k-stufecell.k-dealstufe-verloren     { background: #fdeaea; }
.k-stufe-caret svg { width: 14px; height: 14px; stroke: #888; fill: none; stroke-width: 2; }
.k-tab td.k-col-more, .k-tab td.k-col-stufe { position: relative; overflow: visible; }
.k-tab td.k-col-stufe { padding: 0; }
.k-tab .k-col-stufe { width: 120px; }
.k-tab thead th.k-col-stufe { text-align: center; }
.k-more-btn { background: transparent; border: none; cursor: pointer; padding: 4px; color: #5e6772; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.k-more-btn:hover { background: #f4f6f8; color: #292c31; }
.k-more-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.k-row-menu { top: 100%; margin-top: 2px; }
.k-stufe-menu { left: 0; right: auto; min-width: 150px; }
.k-stufe-menu a.is-current { color: #0071e3; font-weight: 600; }

.k-neuer-btn {
  height: 36px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: #444;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.k-neuer-btn:hover { background: #f4f6f8; }

.k-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff8e1;
  border-radius: 8px;
  margin-bottom: 6px;
}
.k-bulk-count { font-size: 14px; color: #555; }
.k-bulk-count b { color: #111; }
.k-bulk-actions { display: flex; gap: 8px; }
.k-col-check { width: 44px; text-align: center; }
.k-col-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.k-row.is-select-mode { cursor: pointer; }
.k-more-menu a.is-current { color: #0071e3; font-weight: 600; }
.k-group-row td { background: #f4f6f8; padding: 8px 16px; font-size: 13px; }
.k-group-name { font-weight: 600; color: #111; }
.k-group-count { margin-left: 8px; color: #8a9099; font-variant-numeric: tabular-nums; }

.k-spalten-pop {
  position: absolute;
  top: 46px; right: 0;
  min-width: 260px;
  max-height: 480px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.k-spalten-items { padding: 8px 0; overflow-y: auto; }
.k-spalten-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
}
.k-spalten-item:hover { background: #f4f6f8; }
.k-spalten-item input { width: 18px; height: 18px; }
.k-spalten-foot { padding: 10px 16px; border-top: 1px solid #eee; text-align: right; }
.k-spalten-foot .btn { background: #0071e3; padding: 8px 20px; font-size: 13px; }
.k-spalten-foot .btn:hover { background: #0062c4; }

.k-filter-sidebar {
  position: fixed;
  top: 56px; right: 0;
  width: 360px;
  height: calc(100vh - 56px);
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  z-index: 40;
  animation: slideInRight 0.15s ease-out;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.k-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.k-filter-head h2 { margin: 0; font-size: 18px; color: #111; }
.k-filter-close {
  background: none; border: none;
  font-size: 28px; color: #4f565f; cursor: pointer;
  line-height: 1;
}
.k-filter-close:hover { color: #111; }
.k-filter-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.k-filter-body h3 {
  margin: 8px 0 12px;
  font-size: 14px;
  color: #444;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}
.k-filter-body label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: #4f565f;
}
.k-filter-body input,
.k-filter-body select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 0;
  height: 38px;
  line-height: 1.4;
  border: none;
  border-bottom: 1px solid #d0d3d8;
  border-radius: 0;
  font-size: 14px;
  color: #111;
  background-color: transparent;
  font-family: inherit;
}
.k-filter-body input:focus,
.k-filter-body select:focus { outline: none; border-bottom-color: #a0a4aa; }
.k-filter-hinweis {
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #fff8e1;
  border-left: 3px solid #d9a900;
  font-size: 12px;
  color: #6b5200;
  border-radius: 3px;
}
.k-filter-foot {
  padding: 14px 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
}
.k-filter-foot .btn { padding: 10px 20px; }
.sn-item:hover { background: #eeeeee; }
.sn-item.active {
  background: #e6e6e6;
  color: #111;
  border-left-color: #292c31;
  font-weight: 400;
}
.sn-icon {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center;
  justify-content: center;
  color: #4f565f;
  position: relative;
}
.sn-item.active .sn-icon { color: #292c31; }
.sn-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.sn-divider {
  height: 1px;
  background: #e6e8eb;
  margin: 4px 18px;
}
.sn-logout { color: #b00020; margin-top: auto; }

/* ------ Main-Bereich rechts ------ */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f4f5f7;
  min-height: calc(100vh - 56px);
}

/* ------ Topbar (volle Breite, fixed, dunkelgrau) ------ */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: #0a0a0a;
  color: #ffffff;
  border-bottom: 1px solid #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 56px;
}
.app-shell { padding-top: 56px; }
.tb-icon-btn {
  width: 38px; height: 38px;
  border: none;
  background: transparent;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tb-icon-btn:hover { background: rgba(255,255,255,0.1); }
.tb-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
#sidebar-toggle { top: 2px; left: 3px; }
#sidebar-toggle svg { position: relative; top: 2px; }
#view-app:not(.side-closed) #sidebar-toggle { background: rgba(255,255,255,0.1); }
#bell-btn, #user-badge, #tenant-btn, .tb-title { position: relative; top: 4px; }
/* Topbar: Zeiterfassung + Arbeitszeit groesser, zentriert, enger */
#zeit-btn svg, #arbeitszeit-btn svg { width: 24px; height: 24px; display: block; }
#arbeitszeit-btn { margin-left: -6px; }
#global-search { margin-left: -3px; }

.tb-title { font-size: 16px; font-weight: 600; color: #fff; margin-left: 6px; white-space: nowrap; }
.tb-spacer { flex: 1; }

/* Mandanten-Umschalter / Dashboards-Menü */
.tb-tenant-wrap { position: relative; margin-left: -2px; }
.tb-tenant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.tb-tenant:hover { background: rgba(255,255,255,0.12); }
/* Breite bleibt gleich, egal ob „werbekomplizen" oder das kuerzere „Agentur" drinsteht */
#tb-tenant-name { display: inline-block; min-width: 118px; text-align: left; }
.tb-tenant-caret { display: inline-flex; align-items: center; opacity: 0.85; }
.tb-tenant-caret svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.tb-tenant-menu {
  position: absolute;
  top: 46px; left: 0;
  background: #ffffff;
  color: #111;
  border: 1px solid #e4e6ea;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 200px;
  padding: 6px 0;
  z-index: 100;
}
.tb-tenant-menu a {
  display: block; padding: 10px 16px; color: #292c31; text-decoration: none; font-size: 14px;
}
.tb-tenant-menu a:hover { background: #f4f6f8; }
.tb-tenant-menu a.is-aktiv { color: #0071e3; font-weight: 600; }
.tb-menu-head { padding: 8px 16px 4px; font-size: 11px; text-transform: uppercase; color: #5e6772; letter-spacing: 0.06em; }
.tb-menu-empty { padding: 8px 16px 10px; font-size: 12px; color: #7b828c; }

.global-search {
  width: 420px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  font-size: 14px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  margin: 0 4px;
}
.global-search::placeholder { color: rgba(255,255,255,0.55); }
.global-search:focus {
  outline: none;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.35);
}

.tb-bell-badge {
  position: absolute;
  top: 7px; right: 9px;
  width: 7px;
  height: 7px;
  background: #ff3b30;
  border-radius: 50%;
  display: inline-flex;
}

.tb-datum-wrap { position: relative; flex: 0 0 auto; margin-right: 7px; }
.tb-datum { display: inline-flex; align-items: center; gap: 7px; height: 36px; box-sizing: border-box; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0 12px; cursor: pointer; color: #ccd0d6; font-family: inherit; }
.tb-datum:hover { background: rgba(255,255,255,0.11); }
.tb-datum-punkt { display: none; width: 8px; height: 8px; border-radius: 50%; background: #378add; flex: 0 0 auto; }
.tb-datum-punkt.is-blau   { background: #378add; box-shadow: 0 0 0 3px rgba(55,138,221,0.22); }
.tb-datum-punkt.is-orange { background: #f0a92b; box-shadow: 0 0 0 3px rgba(240,169,43,0.22); }
.tb-datum-punkt.is-rot    { background: #e24b4a; box-shadow: 0 0 0 3px rgba(226,75,74,0.22); }
.tb-datum-tag { font-size: 13px; font-weight: 400; }
.tb-datum-sep { color: #8a9099; font-size: 13px; }
.tb-datum-uhr { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.tb-meeter { position: absolute; top: 46px; left: 0; width: 300px; background: #fff; color: #111; border: 0.5px solid #e2e5e9; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); z-index: 200; overflow: hidden; }
.tbm-naechst { padding: 12px 14px 10px; border-bottom: 0.5px solid #eef0f2; cursor: pointer; }
.tbm-naechst:hover .tbm-naechst-titel { color: #0071e3; }
.tbm-label { font-size: 12px; color: #9aa0a8; }
.tbm-naechst-titel { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 15px; font-weight: 500; color: #1e2126; }
.tbm-dot { width: 9px; height: 9px; border-radius: 50%; background: #378add; flex: 0 0 auto; }
.tbm-dot.is-blau { background: #378add; } .tbm-dot.is-orange { background: #ba7517; } .tbm-dot.is-rot { background: #e24b4a; }
.tbm-naechst-zeit { font-size: 13px; color: #6b727b; margin-top: 2px; }
.tbm-liste { padding: 4px 14px 6px; }
.tbm-heute { font-size: 12px; color: #9aa0a8; padding: 8px 0 4px; }
.tbm-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 0.5px solid #eef0f2; cursor: pointer; }
.tbm-row:last-child { border-bottom: none; }
.tbm-row:hover .tbm-row-titel { color: #0071e3; }
.tbm-row-titel { font-size: 13px; color: #1e2126; }
.tbm-row.is-vorbei .tbm-row-titel, .tbm-row.is-vorbei .tbm-row-zeit { color: #a8adb4; }
.tbm-row-zeit { font-size: 13px; color: #6b727b; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.tbm-foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 0.5px solid #eef0f2; color: #0071e3; font-size: 13px; cursor: pointer; }
.tbm-foot:hover { background: #f5f8fd; }
.tbm-foot svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tbm-leer { padding: 16px 14px; font-size: 13px; color: #8a9099; text-align: center; }
.tb-bell-wrap { position: relative; }
.bell-panel {
  position: absolute;
  top: 46px; right: 0;
  width: 360px;
  max-height: 480px;
  background: #ffffff;
  color: #111;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.bell-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  font-weight: 700;
  font-size: 14px;
}
.bell-mark-all {
  background: none;
  border: none;
  color: #0071e3;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.bell-mark-all:hover { text-decoration: underline; }
.bell-head-actions { display: flex; align-items: center; gap: 12px; }
.bell-neu { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: #0071e3; cursor: pointer; border-radius: 6px; padding: 0; }
.bell-neu:hover { background: #eef4fd; }
.bell-neu svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.bell-panel-body { overflow-y: auto; }
.bell-empty { padding: 24px 14px; color: #5e6772; font-size: 13px; text-align: center; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f4f6f8;
  cursor: pointer;
  transition: background 0.1s;
}
.notif-item:hover { background: #f7f8fa; }
.notif-item.is-unread { background: #eff5fd; }
.notif-item.is-unread:hover { background: #e3edfa; }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #f0f1f3;
  display: flex; align-items: center; justify-content: center;
  color: #4f565f;
  flex-shrink: 0;
}
.notif-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.notif-item[data-typ="systemfehler"] .notif-icon { color: #d33a2f; }
.notif-item[data-typ="systemfehler"] .notif-title { color: #d33a2f; }
.inbox-list { display: flex; flex-direction: column; gap: 12px; }
.card.inbox-group { padding: 16px; border: 1px solid #f2f2f2; }
.inbox-item { display: flex; align-items: flex-start; gap: 10px; margin: 0 -16px; padding: 8px 16px; border-bottom: 1px solid #f4f5f7; cursor: pointer; }
.inbox-item:hover { background: #f9fafb; }
.inbox-group .inbox-entry:last-child .inbox-item,
.inbox-group .inbox-entry:last-child .inbox-expand { border-bottom: none; }
.inbox-ic { color: #e0a800; display: inline-flex; flex-shrink: 0; margin-top: 3px; }
.inbox-ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.inbox-ic.amp-rot    { color: #d92d20; }
.inbox-ic.amp-orange { color: #e0a800; }
.inbox-ic.amp-gruen  { color: #2f9e44; }
.inbox-ic.amp-grau   { color: #c3c8cf; }
/* gelesen = normal, ungelesen = fett (Regel weiter unten) — sonst sieht alles gleich schwer aus */
.inbox-titel { font-size: 14px; font-weight: 400; color: #3e424a; line-height: 1.3; }
.inbox-sub { font-size: 12px; color: #9aa0a8; margin-top: 1px; }
.inbox-tx { flex: 1; min-width: 0; }
.inbox-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.notif-body { flex: 1; min-width: 0; }
.notif-actions { margin-left: auto; display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.inbox-act, .notif-act { background: none; border: none; cursor: pointer; color: #9aa0a8; padding: 5px; border-radius: 6px; display: inline-flex; align-items: center; }
.inbox-act:hover, .notif-act:hover { background: #eceef1; color: #292c31; }
.inbox-act svg, .notif-act svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Inbox-Seite (Filter, Zeitgruppen, Aufklappen) – Reiter nutzen .kd-tabs/.kd-tab */
/* Filter rechts in der Tab-Zeile */
.inbox-tabbar { align-items: center; }
.inbox-tabbar .kd-tabs-scroll { flex: 0 0 auto; }
.inbox-filter { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.inbox-search { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e0e3e8; border-radius: 7px; padding: 6px 10px; width: 250px; }
.inbox-search span { display: inline-flex; color: #9aa0a8; }
.inbox-search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.inbox-search input { border: none; background: none; outline: none; font-size: 13px; font-family: inherit; color: #1d1d1f; width: 100%; }
.inbox-fdrop { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e0e3e8; border-radius: 7px; padding: 6px 10px; font-size: 13px; color: #1d1d1f; cursor: pointer; font-family: inherit; }
.inbox-fdrop:hover { border-color: #cdd2d9; }
.inbox-fdrop [data-icon] { color: #7b828c; display: inline-flex; }
.inbox-fdrop svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.inbox-group-head { font-size: 12px; font-weight: 600; color: #9aa0a8; text-transform: uppercase; letter-spacing: .03em; padding: 4px 0 8px; margin-bottom: 2px; border-bottom: 1px solid #eef0f2; }
.inbox-item.is-unread .inbox-titel { font-weight: 600; color: #1d1d1f; }
.inbox-item.is-open { background: #f9fafb; }
.inbox-actions { opacity: 0; transition: opacity .12s; }
.inbox-item:hover .inbox-actions, .inbox-item.is-open .inbox-actions { opacity: 1; }
.inbox-act.is-checked { color: #2f9e44; }
.inbox-expand { margin: 0 -16px; padding: 10px 16px 12px 40px; border-bottom: 1px solid #f4f5f7; }
.inbox-exp-text { font-size: 13px; color: #4f565f; margin-bottom: 10px; white-space: pre-wrap; }
.inbox-expand .wu-todos { margin-bottom: 14px; }
.inbox-exp-actions { display: flex; gap: 8px; }
.notif-body { flex: 1; min-width: 0; }
/* overflow-wrap: anywhere ist Pflicht (Andreas 16.07.2026: „da kann man bei den glockenhinweisen
   nach rechts scrollen, soll nicht so sein, ist wegen dem langen code oder so" — genau so war es).
   Ursache waren Texte OHNE Leerzeichen: eine Oracle-Tracking-URL und die Meldung eines Systemfehlers.
   So etwas kann nicht umbrechen und schiebt die ganze Liste in die Breite. min-width:0 am .notif-body
   allein reicht nicht — es erlaubt dem Kasten zu schrumpfen, zwingt aber den Text nicht zum Umbruch.
   Deshalb hier zusaetzlich; „anywhere" bricht notfalls mitten im Wort, was bei URLs richtig ist. */
.notif-title { font-size: 13px; font-weight: 600; color: #111; margin: 0 0 3px; overflow-wrap: anywhere; }
.notif-text  { font-size: 12px; color: #4f565f; margin: 0 0 3px; overflow-wrap: anywhere; }
.notif-time  { font-size: 11px; color: #5e6772; }
/* Sicherheitsnetz: Selbst wenn kuenftig etwas Unbrechbares dazukommt (ein Bild, eine Tabelle),
   darf der Kasten nicht seitlich wandern. */
.notif-item { overflow-x: hidden; }

.tb-user-wrap { position: relative; }
.user-badge {
  width: 34px; height: 34px;
  border: none;
  border-radius: 999px;
  background: #0071e3;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-badge:hover { background: #0062c4; }
.user-badge.has-avatar { padding: 0; overflow: hidden; background: #333; }
.user-badge.has-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.benutzer-avatar-row { display: flex; align-items: center; gap: 20px; }
.benutzer-avatar {
  width: 60px; height: 60px;
  border-radius: 999px;
  background: #0071e3;
  color: #ffffff;
  font-size: 22px; font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.benutzer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benutzer-avatar-buttons { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.benutzer-avatar-buttons .btn { padding: 5px 12px; font-size: 12.5px; font-weight: 500; }

.tb-user-menu {
  position: absolute;
  top: 46px; right: 0;
  background: #ffffff;
  color: #111;
  border: 1px solid #e4e6ea;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 180px;
  padding: 6px 0;
  z-index: 100;
}
.tb-user-menu a {
  display: block;
  padding: 10px 16px;
  color: #292c31;
  text-decoration: none;
  font-size: 14px;
}
.tb-user-menu a:hover { background: #f4f6f8; }
.tb-user-menu a#logout-link { color: #b00020; }

.content {
  padding: 8px;
  width: 100%;
}

/* Mobile / schmal */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    width: 220px;
    z-index: 20;
    transition: left 0.2s;
    box-shadow: 0 0 20px rgba(0,0,0,0.06);
  }
  .layout.side-open .sidebar { left: 0; }
  .content { padding: 20px 16px 60px; }
}

/* ============ Karten & Formulare (generisch) ============ */
.card {
  background: #ffffff;
  border: 1px solid #e4e6ea;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #d0d3d8;
  border-radius: 0;
  font-size: 14px;
  background-color: transparent;
  font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-bottom-color: #0071e3; background-color: transparent;
}

.btn {
  display: inline-block;
  padding: 6px 14px;
  background: #0071e3;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #0062c4; }
.btn-secondary { background: transparent; color: #292c31; border: 1px solid #d0d3d8; }
.btn-secondary:hover { background: #f4f6f8; }
.btn-danger { background: #b00020; }
.btn-danger:hover { background: #8a0018; }

.error {
  padding: 10px 14px;
  background: #ffe6e6;
  border: 1px solid #ffb3b3;
  color: #b00020;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.success { padding: 10px 14px; background: #e6ffe6; border: 1px solid #99cc99; color: #005a00; border-radius: 8px; margin: 10px 0; font-size: 14px; }
/* Akquise-Inline-Meldungen: nur roter Satz, kein Kasten (Andreas 18.08.2026). */
#akq-s-msg .error, #akq-r-msg .error, #akq-v-msg .error { padding: 0; background: none; border: none; border-radius: 0; margin: 8px 0 0; display: block; }
.empty { padding: 20px; text-align: center; color: #5e6772; font-size: 14px; }

h1 { font-size: 22px; margin: 0 0 20px; }
h2 { font-size: 17px; margin: 0 0 12px; }

/* Seiten-Kopf */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; }
.page-head h1 { margin: 0; }
.back-link { color: #4f565f; text-decoration: none; font-size: 13px; }
.back-link:hover { color: #0071e3; }
.meta-inline { color: #5e6772; font-size: 13px; margin-top: 4px; }
.section-head { margin: 22px 0 10px; font-size: 14px; color: #4f565f; text-transform: uppercase; letter-spacing: 0.04em; border-top: 1px solid #eee; padding-top: 14px; }

/* Filter-Leiste */
.filter-bar { display: flex; gap: 12px; padding: 14px; }
.filter-bar input[type="search"], .filter-bar select {
  padding: 8px 0; border: none; border-bottom: 1px solid #d0d3d8; border-radius: 0; font-size: 14px; background-color: transparent;
}
.filter-bar input[type="search"] { flex: 1; }
.filter-bar select { padding-right: 18px; }

/* Zeilen-Liste */
.row-list { display: flex; flex-direction: column; }
.row-link {
  display: block; padding: 14px 18px; border-bottom: 1px solid #eef0f2;
  text-decoration: none; color: inherit;
}
.row-link:last-child { border-bottom: none; }
.row-link:hover { background: #f4f6f8; }
.row-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.row-meta { color: #5e6772; font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.row-count { padding: 12px 18px; font-size: 12px; color: #5e6772; text-align: right; border-top: 1px solid #eef0f2; }

/* Badges */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-lead        { background: #fff7e0; color: #7a5a00; }
.badge-interessent { background: #e6f2ff; color: #003a75; }
.badge-kunde       { background: #e6ffe6; color: #005a00; }
.badge-lieferant   { background: #f0e6ff; color: #4a1a75; }
.badge-absage      { background: #ffe6e6; color: #b00020; }
.badge-sonstiges   { background: #eeeeee; color: #444; }

/* Formular-Grid */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kunde-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d0d3d8; border-radius: 8px; font-size: 14px; background: #fbfbfd; font-family: inherit; }
.kunde-form select { width: 100%; padding: 8px 0; border: none; border-bottom: 1px solid #d0d3d8; border-radius: 0; font-size: 14px; background-color: transparent; }

.form-actions { margin-top: 20px; display: flex; gap: 10px; align-items: center; }

/* ============ Einstellungen ============ */
.einst-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; margin-top: 8px; }
.einst-side { background: #ffffff; border: 1px solid #e4e6ea; border-radius: 12px; padding: 12px 0; max-height: calc(100vh - 180px); overflow-y: auto; position: sticky; top: 80px; }
.einst-side-group { padding: 6px 0; }
.einst-side-title { padding: 6px 18px; font-size: 11px; text-transform: uppercase; color: #5e6772; letter-spacing: 0.06em; }
.einst-side ul { list-style: none; margin: 0; padding: 0; }
.einst-side li a { display: block; padding: 8px 18px; color: #292c31; text-decoration: none; font-size: 13px; border-left: 3px solid transparent; }
.einst-side li a:hover { background: #f4f6f8; }
.einst-side li a.active { background: #eeeeee; border-left-color: #292c31; color: #111; font-weight: 600; }
.einst-side li a.disabled { color: #7b828c; }
.einst-side li a.disabled:hover { background: transparent; cursor: default; }
.einst-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; background: #eeeeee; color: #5e6772; border-radius: 4px; text-transform: uppercase; }

.einst-table { width: 100%; border-collapse: collapse; }
.einst-table th, .einst-table td { padding: 10px 12px; text-align: left; font-size: 14px; border-bottom: 1px solid #eef0f2; vertical-align: middle; }
.einst-table th { font-size: 12px; color: #5e6772; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.einst-table input[type="text"], .einst-table input[type="number"], .einst-table select {
  padding: 6px 0; border: none; border-bottom: 1px solid #d0d3d8; border-radius: 0; font-size: 13px; background-color: transparent;
}
.einst-table input[type="text"] { width: 100%; min-width: 120px; }
.einst-table tfoot { background: #f8f9fb; }
.nk-msg { margin-left: 10px; font-size: 12px; }
.hint { font-size: 12px; color: #5e6772; margin-top: 12px; }

/* Einstellungen: Kachel-Uebersicht wie D&P (neutral weiss, keine Farbflaechen) */
.einst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 0; align-items: stretch; }
.einst-card { background: #fff; border: 1px solid #e4e6ea; border-radius: 12px; padding: 6px 0 12px; }
.einst-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; }
.einst-card-title { font-size: 16px; font-weight: 600; color: #1d1f23; }
.einst-card-list { display: flex; flex-direction: column; }
.einst-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 20px; font-size: 14px; color: #292c31; text-decoration: none; }
a.einst-card-row:hover { background: #f4f6f8; }
.einst-card-row.is-disabled { color: #9aa0a6; cursor: default; }
.einst-detail-head { margin: 4px 0 12px; }
.einst-sd-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5e6772; margin: 6px 0 0; }
.einst-sd-sub:first-child { margin-top: 0; }
.nk-block { display: flex; flex-direction: column; gap: 14px; }
/* Kontakt Stufen: Farbe + Bezeichnung + Vorschau je Zeile */
.stufen-list { display: flex; flex-direction: column; gap: 12px; }
.stufe-row { display: flex; align-items: center; gap: 12px; }
.stufe-color { -webkit-appearance: none; appearance: none; width: 40px; height: 36px; padding: 0; border: none; border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
.stufe-color::-webkit-color-swatch-wrapper { padding: 0; }
.stufe-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.stufe-hex { flex: 0 0 92px; height: 38px; padding: 8px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #292c31; background: #fff; text-transform: uppercase; }
.stufe-hex:focus { border-color: #0071e3; outline: none; }
/* Generisches Listen-Modal (Merkmale etc.) */
.lm-list { display: flex; flex-direction: column; gap: 8px; }
.lm-row { display: flex; align-items: center; gap: 8px; }
.lm-text { flex: 1 1 auto; height: 38px; padding: 8px 10px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 14px; font-family: inherit; color: #111; background: #fff; }
.lm-text:focus { border-color: #0071e3; outline: none; }
.lm-farbe { width: 40px; height: 36px; padding: 0; border: 1px solid #d0d3d8; border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
.lm-sort { flex: 0 0 72px; height: 38px; padding: 8px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 14px; font-family: inherit; color: #111; background: #fff; }
.lm-del { flex: 0 0 auto; background: transparent; border: none; color: #9aa0a6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; }
.lm-del:hover { color: #d33; }
/* Knopf in einer Listenzeile, der einen laengeren Text in einem eigenen Fenster oeffnet
   (Auftragsarten -> E-Mail-Text). Gruen hinterlegt, sobald ein Text hinterlegt ist. */
.lm-detail { flex: 0 0 auto; border: 1px solid #d7dade; background: #fff; color: #5e6772;
  font-size: 12.5px; font-family: inherit; padding: 7px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.lm-detail:hover { background: #f4f6f8; border-color: #c3c7cd; }
.lm-detail.hat-text { background: #eaf7ee; border-color: #bfe3c9; color: #256b3a; }
/* Multiline-Variante (lange Texte, z.B. Auftragsbedingungen): Textarea statt einzeiligem Feld. */
.lm-row-ml { align-items: flex-start; }
.lm-textarea { height: auto; min-height: 56px; line-height: 1.45; resize: vertical; }
.lm-row-ml .lm-del { margin-top: 7px; }
/* Eigene Felder (Allgemein-Block) — Bereiche + Feldzeilen */
.ef-bereich { margin-bottom: 20px; }
.ef-bereich-head { font-size: 12px; font-weight: 600; color: #5e6772; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.ef-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ef-feld { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #ececee; border-radius: 8px; background: #fbfbfd; }
.ef-feld-typ { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-edit { flex: 0 0 auto; border: none; background: transparent; color: #0071e3; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.ef-edit:hover { text-decoration: underline; }
.ef-leer { font-size: 13px; color: #9aa0a8; padding: 4px 2px; }
.ef-add { border: none; background: transparent; color: #0071e3; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 0; }
.ef-add:hover { text-decoration: underline; }

/* Vorlagen Center */
.vc-block { margin-bottom: 24px; }
.vc-block-head { font-size: 13px; font-weight: 600; color: #1d1d1f; margin-bottom: 4px; }
.vc-block-sub { font-size: 12px; color: #7b828c; margin-bottom: 10px; }
.vc-soon { font-size: 13px; color: #9aa0a8; background: #f6f6f8; border: 1px dashed #d9dce1; border-radius: 8px; padding: 12px 14px; }
.vc-mail-liste { display: flex; flex-direction: column; gap: 6px; }
.vc-mail-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #ececee; border-radius: 8px; background: #fbfbfd; }
.vc-mail-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-mail-edit { flex: 0 0 auto; border: none; background: transparent; color: #0071e3; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.vc-mail-edit:hover { color: #0058b8; }

/* Begleit-E-Mail Editor — eine Spalte, Text fuellt das Modal, Platzhalter hinter Info-Button */
.bm-dialog { max-width: 720px; }
.bm-hint { font-size: 12px; color: #9aa0a8; margin-top: 6px; }

/* Platzhalter-Knopf sitzt ganz RECHTS in der Werkzeugleiste (Andreas 29.07.2026). */
.bm-ph-wrap { position: relative; margin-left: auto; }
.bm-ph-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d0d3d8; background: #fff; color: #4f565f; font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.bm-ph-btn:hover { background: #f6f6f8; }
.bm-ph-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #7b828c; color: #fff; font-size: 10px; font-style: italic; font-weight: 700; }
.bm-ph-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 380px; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 8px; }
.bm-ph-grp { font-size: 11px; font-weight: 600; color: #7b828c; text-transform: uppercase; letter-spacing: .03em; margin: 10px 6px 4px; }
.bm-ph-grp:first-child { margin-top: 4px; }
.bm-ph { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 5px 6px; border-radius: 6px; }
.bm-ph:hover { background: #f0f4fb; }
.bm-ph-t { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #0071e3; }
.bm-ph-d { font-size: 11px; color: #9aa0a8; }

/* Angebote & Rechnungen — Allgemein (Modal) */
.ar-dialog { max-width: 820px; }

.ar-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #1d1d1f; margin: 8px 0; cursor: pointer; }
.ar-chk input { width: 16px; height: 16px; flex: 0 0 auto; }
.ar-radio { display: flex; gap: 22px; margin: 8px 0; font-size: 14px; }
.ar-radio label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.ar-hint { font-size: 12px; color: #9aa0a8; margin: 4px 0 2px; }
.ar-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.ar-inline .ar-chk { margin: 0; }
.ar-inline input[type="text"] { border: none; border-bottom: 1px solid #d0d3d8; background: transparent; padding: 4px 2px; font-size: 14px; }
.ar-suffix { font-size: 13px; color: #6b7280; }
.ar-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 28px; padding-top: 16px; border-top: 1px solid #ececee; }
.ar-save-bar #arf-msg { font-size: 13px; color: #34a853; }
/* Deal-Modal: Kontakt-Suche */
.deal-radio-row { display: flex; gap: 22px; margin-bottom: 12px; }
.deal-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #292c31; cursor: pointer; }
.deal-radio input[type="radio"] { margin: 0; flex: 0 0 auto; }
.deal-radio span { line-height: 1; }
.deal-suche { width: 100%; height: 40px; padding: 8px 12px; border: 1px solid #d0d3d8; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111; background: #fff; }
.deal-suche:focus { border-color: #0071e3; outline: none; }
.deal-kunde-results { display: flex; flex-direction: column; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.deal-kunde-item { display: block; padding: 8px 10px; font-size: 14px; color: #292c31; text-decoration: none; border: 1px solid #edeef0; border-top: none; background: #fff; }
.deal-kunde-item:first-child { border-top: 1px solid #edeef0; border-radius: 6px 6px 0 0; }
.deal-kunde-item:last-child { border-radius: 0 0 6px 6px; }
.deal-kunde-item:hover { background: #f4f6f8; }
/* Beteiligte-Picker: Auswahl klappt erst bei Klick auf, schliesst bei Klick ins Leere (Andreas 06.08.2026) */
.abp-drop { margin-top: 6px; max-height: 240px; overflow-y: auto; }
.abp-drop[hidden] { display: none; }

/* Topbar-Suche: Live-Ergebnis-Dropdown (Andreas 05.08.2026) — Treffer nutzen .deal-kunde-item. */
.tb-such-wrap { position: relative; }
.global-search-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid #edeef0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 60vh; overflow-y: auto; z-index: 200; padding-bottom: 4px; }
.global-search-results .gs-grp { padding: 9px 12px 4px; font-size: 11.5px; font-weight: 600; color: #8a9099; text-transform: uppercase; letter-spacing: 0.03em; }
.global-search-results .gs-item { border-left: none; border-right: none; border-top: none; }
.global-search-results .gs-empty { padding: 12px; color: #8a9099; font-size: 14px; }
.global-search-results .gs-sub { color: #8a9099; }
.deal-kunde-empty { padding: 8px 10px; font-size: 13px; color: #7b828c; }
.deal-contact-hint { font-size: 13px; color: #4f565f; margin-top: 4px; }
/* Anfrage: Projektdaten-Felder im Wrapper genauso beabstanden wie die übrigen Modal-Felder (20px) */
#deal-projekt-wrap { display: flex; flex-direction: column; gap: 20px; }
/* Anfrage-Check (Andreas 14.08.2026): nachgebaut wie das Original-Tool – graue Zeilen mit echten
   Häkchen (Warnsignale) bzw. Auswahlknöpfen (Einstufung/Eindruck). Erbt NICHT das Floating-Label-CSS. */
.ac-field { margin-bottom: 18px; }
.ac-lbl { display: block; font-size: 11px; font-weight: 600; color: #5e6772; letter-spacing: 0.02em; margin-bottom: 8px; }
.modal-body .ac-in { width: 100%; box-sizing: border-box; border: 1.5px solid #d4d4d2; border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit; color: #1a1a1a; background: #fff; outline: none; resize: vertical; }
.modal-body .ac-in:focus { border-color: #1a6bff; }
.modal-body .ac-in::placeholder { color: #a7a7ad; }
.ac-grid { display: flex; flex-direction: column; gap: 8px; }
.ac-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #f5f5f7; border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color 0.12s; }
.ac-item:hover { border-color: #d4d4d2; }
.modal-body .ac-item input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; border: 1.5px solid #cfcfd4; border-radius: 5px; background: #fff; flex-shrink: 0; cursor: pointer; position: relative; transition: border-color 0.12s, background 0.12s; }
.modal-body .ac-item input:checked { border-color: #1a6bff; background: #1a6bff; }
.modal-body .ac-item input:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); }
.ac-item > span { font-size: 14px; color: #444; line-height: 1.35; }
.ac-txt { display: flex; flex-direction: column; gap: 2px; }
.ac-txt .ac-t { font-size: 14px; font-weight: 650; color: #1a1a1a; }
.ac-txt .ac-d { font-size: 12.5px; color: #888; line-height: 1.4; }

/* Hilfe (Andreas 14.08.2026): Karten-Übersicht + isolierter iframe für die Original-Hilfeseiten. */
.hilfe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.hilfe-karte { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 18px 20px; background: #fff; border: 1px solid #e5e5e3; border-radius: 14px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; font-family: inherit; }
.hilfe-karte:hover { border-color: #1a6bff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.hilfe-karte-titel { font-size: 15px; font-weight: 650; color: #1a1a1a; }
.hilfe-karte-sub { font-size: 12px; color: #888; }
.hilfe-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hilfe-bar-titel { font-size: 16px; font-weight: 650; color: #1a1a1a; }
.hilfe-frame { width: 100%; height: calc(100vh - 180px); min-height: 480px; border: 1px solid #e5e5e3; border-radius: 14px; background: #fff; }

/* Leads-Board (Akquise, Andreas 14.08.2026): Kanban Neu/Kontaktiert/Erledigt — VitalCode-Vorbild, unser Stil. */
.lead-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.lead-head h1 { margin: 0; }
.lk-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
/* Ab Desktop-Breite: Spalten auf volle Höhe, jede Spalte scrollt intern (Kopf bleibt oben). */
@media (min-width: 1201px) {
  .lk-board { height: calc(100vh - 72px); align-items: stretch; }
  .lk-col { height: 100%; min-height: 0; overflow: hidden; }
  .lk-col-body { flex: 1; min-height: 0; overflow-y: auto; }
}
@media (max-width: 1200px) { .lk-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .lk-board { grid-template-columns: 1fr; } }
.lk-col { background: #fafaf9; border: 1px solid #e5e5e3; border-radius: 12px; padding: 10px; min-height: 220px; display: flex; flex-direction: column; gap: 8px; transition: background 0.12s, border-color 0.12s; }
.lk-col.drag-over { background: #eef4ff; border-color: #1a6bff; }
.lk-col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 1px solid #e5e5e3; }
.lk-col-head .t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa0a6; }
.lk-col-head .t .dot { width: 8px; height: 8px; border-radius: 50%; }
.lk-col.neu .lk-col-head .t .dot { background: #1a6bff; }
.lk-col.kontaktiert .lk-col-head .t .dot { background: #ea8a1a; }
.lk-col.interessent .lk-col-head .t .dot { background: #1a8f3a; }
.lk-col.archiv .lk-col-head .t .dot { background: #8896a5; }
.lk-col-head .cnt { font-size: 11px; color: #888; background: #fff; border: 1px solid #e5e5e3; border-radius: 99px; padding: 1px 8px; min-width: 20px; text-align: center; }
.lk-col-body { display: flex; flex-direction: column; gap: 8px; }
.lk-empty { padding: 16px 8px; text-align: center; color: #a1a1a8; font-size: 12px; border: 1px dashed #dcdcd9; border-radius: 8px; }
.lk-card { background: #fff; border: 1px solid #e5e5e3; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; display: flex; flex-direction: column; gap: 4px; }
.lk-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-color: #d4d4d2; }
.lk-card[draggable="true"] { cursor: grab; }
.lk-card.dragging { opacity: 0.5; }
.lk-name { font-size: 14px; font-weight: 600; color: #565c64; line-height: 1.3; }
.lk-meta { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-reagiert { align-self: flex-start; max-width: 100%; font-size: 11px; font-weight: 600; color: #1c7a3f; background: #e7f6ec; border-radius: 6px; padding: 2px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.lk-card.lk-hat-reagiert { border-left: 3px solid #2fae62; }
.lk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.lk-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; min-width: 0; }
.lk-quelle { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: #5b7aa8; background: #eef3fb; padding: 2px 7px; border-radius: 99px; }
.lk-branche { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: #b0741f; background: #fbf0e0; padding: 2px 7px; border-radius: 99px; }
.lk-zeit { font-size: 11px; color: #a1a1a8; }
.lk-card.age-7 { border-left: 3px solid #ea8a1a; }
.lk-card.age-14 { border-left: 3px solid #e07b1a; background: #fffaf3; }
.lk-card.age-21 { border-left: 3px solid #d4341c; background: #fdf3f2; }

/* Akquise-Übersicht (Andreas 14.08.2026): Themen-Karten, 4 pro Reihe. */
.akq-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.akq-bar-lbl { font-size: 13px; color: #888; }
.modal-body .akq-in, .akq-in { border: 1.5px solid #d4d4d2; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-family: inherit; color: #1a1a1a; background: #fff; outline: none; }
.akq-in:focus { border-color: #1a6bff; }
.akq-in-num { width: 60px; }
.akq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
@media (max-width: 1200px) { .akq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .akq-grid { grid-template-columns: 1fr; } }
.akq-card { background: #fff; border: 1px solid #e5e5e3; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.akq-thema { font-size: 15px; font-weight: 650; color: #1a1a1a; }
.akq-stats { display: flex; flex-direction: column; gap: 8px; }
.akq-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9aa0a6; }
.akq-stat .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.akq-stat .l { flex: 1; }
.akq-stat .n { color: #9aa0a6; font-variant-numeric: tabular-nums; }
.akq-stat.neu .dot { background: #1a6bff; }
.akq-stat.kontaktiert .dot { background: #ea8a1a; }
.akq-stat.interessent .dot { background: #1a8f3a; }
.akq-stat.archiv .dot { background: #8896a5; }
.akq-actions { display: flex; gap: 8px; margin-top: 2px; }
.akq-actions .btn { flex: 1; color: #7c828b; }
.akq-actions .btn:hover { color: #444; }

/* Anfrage: „Links & Kanäle" (eigenständiger Block nach Vorbild der To-do-Liste, erbt NICHT das Feld-CSS) */
.deal-links-sec { margin: 6px 0 2px; }
.deal-links-label { font-size: 11px; color: #5e6772; letter-spacing: 0.02em; margin-bottom: 6px; }
.deal-links-sec #deal-links-liste { display: flex; flex-direction: column; gap: 6px; }
.deal-links-sec .deal-link-row { display: flex; align-items: center; gap: 8px; }
.deal-links-sec .deal-link-bez,
.deal-links-sec .deal-link-url { box-sizing: border-box; height: 36px; padding: 6px 10px; border: 1px solid #d2d2d7; border-radius: 7px; font-size: 14px; font-family: inherit; color: #111; background: #fff; outline: none; }
.deal-links-sec .deal-bez-combo { position: relative; width: 160px; flex: none; }
.deal-links-sec .deal-bez-combo .deal-link-bez { width: 100%; padding-right: 26px; }
.deal-links-sec .deal-bez-plain .deal-link-bez { padding-right: 10px; }
.deal-links-sec .deal-bez-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; border: none; background: none; padding: 2px; cursor: pointer; color: #888; }
.deal-links-sec .deal-bez-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid #d2d2d7; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; max-height: 240px; overflow-y: auto; }
.deal-links-sec .deal-bez-menu[hidden] { display: none; }
.deal-links-sec .deal-bez-menu.nach-oben { top: auto; bottom: calc(100% + 4px); }
.deal-links-sec .deal-bez-opt { padding: 7px 10px; border-radius: 6px; font-size: 14px; color: #111; cursor: pointer; }
.deal-links-sec .deal-bez-opt[hidden] { display: none; }
.deal-links-sec .deal-bez-opt:hover { background: #f0f4f9; }
.deal-links-sec .deal-link-url { flex: 1; min-width: 0; }
.deal-links-sec .deal-link-bez:focus,
.deal-links-sec .deal-link-url:focus { border-color: #0071e3; }
.deal-links-sec .deal-link-del { flex: none; border: none; background: none; color: #b0b0b8; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.deal-links-sec .deal-link-del:hover { color: #ff3b30; }
.deal-links-sec .deal-link-add { border: none; background: none; color: #0071e3; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 0; margin-top: 6px; }
.deal-links-sec .deal-link-add:hover { text-decoration: underline; }
/* Angebote-Modul (Layout wie D&P, Farben aus unserem Design) */
.ang-modal-dialog { max-width: 780px; }
/* Positions-Tabelle */
.ang-pos-wrap { margin: 16px 0; }
.ang-pos-head, .ang-pos-row { display: grid; grid-template-columns: 24px 1fr 56px 64px 78px 78px 20px; gap: 10px; align-items: center; }
.ang-pos-head { font-size: 11px; color: #8a9098; letter-spacing: 0.02em; padding-bottom: 6px; border-bottom: 1px solid #edeef0; }
.ang-pos-head .c-menge, .ang-pos-head .c-einheit, .ang-pos-head .c-netto, .ang-pos-head .c-gesamt { text-align: right; }
.ang-pos-row { padding: 9px 0; border-bottom: 1px solid #f2f3f5; cursor: pointer; }
.ang-pos-row:hover { background: #fafbfc; }
.ang-pos-row .c-menge, .ang-pos-row .c-einheit, .ang-pos-row .c-netto, .ang-pos-row .c-gesamt { text-align: right; font-size: 13.5px; color: #292c31; }
.ang-pos-row .c-bez { min-width: 0; display: flex; flex-direction: column; }
.ang-pos-row .c-bez b { font-size: 13.5px; color: #1d2126; font-weight: 500; }
.ang-pos-beschr { font-size: 11.5px; color: #8a9098; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ang-pos-rabatt { font-size: 11.5px; color: #8a9098; }
.ang-pos-row-text .c-bez { font-weight: 600; color: #5e6772; }
.ang-pos-grip { display: inline-flex; align-items: center; color: #c2c6cc; cursor: grab; }
.ang-pos-grip svg { width: 16px; height: 16px; fill: currentColor; }
/* Positionen per Drag & Drop umsortieren (Andreas 31.07.2026) */
.ang-pos-row.ang-pos-dragging { opacity: .45; }
.ang-pos-row.ang-pos-over { box-shadow: inset 0 2px 0 0 #0071e3; }
.ang-pos-del { border: none; background: none; color: #c8ccd2; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s; }
.ang-pos-row:hover .ang-pos-del { opacity: 1; }
.ang-pos-del:hover { color: #ff3b30; }
.ang-pos-btns { display: flex; gap: 20px; margin: 12px 0 4px; }
.ang-btn-neu, .ang-btn-mehr { border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 0; }
.ang-btn-neu { color: #0071e3; }
.ang-btn-mehr { color: #5e6772; }
/* Summen rechtsbündig */
.ang-summen { margin: 14px 0 4px auto; width: 270px; }
.ang-rabatt-link { display: block; text-align: right; font-size: 12px; color: #0071e3; text-decoration: none; margin-bottom: 8px; }
.ang-rabatt-link:hover { text-decoration: underline; }
.ang-sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: #5e6772; padding: 3px 0; }
.ang-sum-row b { color: #1d2126; }
.ang-sum-gewinn { color: #9aa0a8; font-size: 12.5px; }
/* Artikel-Fenster */
.ang-pick-dialog { max-width: 860px; }
.ang-pick-cols { display: grid; grid-template-columns: 1fr 220px; gap: 28px; }
.ang-pick-liste { max-height: 380px; overflow-y: auto; }
.ang-pick-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; min-height: 44px; padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.ang-pick-row:hover { background: #f0f4f9; }
.ang-pick-ic { color: #9aa0a8; display: inline-flex; }
.ang-pick-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ang-pick-bez { font-size: 14px; color: #1d2126; }
.ang-pick-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #eef2f7; color: #5e6772; font-size: 11px; vertical-align: middle; }
.ang-pick-nr { color: #9aa0a8; font-size: 12px; }
.ang-pick-end { min-width: 104px; display: inline-flex; justify-content: flex-end; align-items: center; }
.ang-pick-preis { color: #5e6772; font-size: 13px; white-space: nowrap; }
.ang-pick-btn { display: none; background: #0071e3; color: #fff; border: none; border-radius: 5px; padding: 4px 14px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ang-pick-row:hover .ang-pick-btn { display: inline-block; }
.ang-pick-row:hover .ang-pick-preis { display: none; }
.ang-pick-grp-h { font-size: 12px; color: #8a9098; margin-bottom: 8px; }
.ang-grp { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13.5px; color: #292c31; cursor: pointer; border-radius: 6px; }
.ang-grp:hover { background: #f4f6f8; }
.ang-grp-dot { width: 14px; height: 14px; border: 1.5px solid #c8ccd2; border-radius: 50%; flex: none; box-sizing: border-box; }
.ang-grp.is-on .ang-grp-dot { border-color: #0071e3; background: radial-gradient(#0071e3 42%, transparent 46%); }
.ang-pick-neu { margin-right: auto; font-size: 12px; color: #9aa0a8; align-self: center; }
/* Positions-Editor */
.ang-pe-dialog { max-width: 760px; }
.ang-pe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; align-items: end; margin-bottom: 6px; }
.ang-pe-bez { grid-column: 1 / -1; }
.ang-pe-out { text-align: right; }
.ang-pe-out span { display: block; font-size: 11px; color: #8a9098; }
.ang-pe-out b { font-size: 15px; color: #1d2126; }
.ang-pe-steuer { max-width: 200px; }
/* Beschreibungs-Editor = derselbe Editor wie bei Mail/Notiz (kd-hist-rte + kd-hist-tb), Leiste unten */
/* Einleitungs-/Abschlusstext: KEIN Kasten. Unterstrich wie jedes andere Feld im Modal
   (Andreas 29.07.2026 — der Rahmen war hier als einziger im CRM erfunden worden). */
/* Dreispaltige Zeilen im Beleg-Fenster, Aufteilung wie in D&P (Andreas 30.07.2026):
   links breit (Empfaenger / Bedingungen), Mitte schmal, rechts das Datum. */
.ang-zeile3 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 150px; gap: 18px; align-items: end; }
.ang-zeile3 > .ang-sp-schmal { max-width: 130px; }
@media (max-width: 720px) { .ang-zeile3 { grid-template-columns: 1fr; } }


/* Gesamtrabatt im Beleg-Fenster (Andreas 30.07.2026): nur Prozent, direkt ueber den Summen. */
.ang-rabatt-zeile { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 2px 0 8px; }
.ang-rabatt-zeile label { font-size: 13px; color: #5e6772; }
.ang-rabatt-zeile input { width: 74px; height: 28px; box-sizing: border-box; padding: 3px 8px; text-align: right;
  border: 1px solid #d4d7dc; border-radius: 6px; font-size: 13.5px; font-family: inherit; }
.ang-rabatt-zeile input:focus { border-color: #0071e3; outline: none; }

/* Leistungsdatum im Beleg-Fenster (Andreas 30.07.2026, wie D&P): geschlossen nur der Wert,
   ein Klick oeffnet die Auswahl Datum/Zeitraum mit Von und Bis. */
/* Im Beleg-Fenster darf ein langes Auswahlfeld die Spalten nicht sprengen: minmax(0,1fr) statt 1fr,
   sonst schiebt der Text der Zahlungsbedingung die Nachbarspalte auf null (Andreas 30.07.2026). */
.ang-modal-dialog .form-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ang-modal-dialog .form-grid-2 > * { min-width: 0; }
.ang-modal-dialog .form-group select { width: 100%; max-width: 100%; }

/* Die schwebende Beschriftung muss auch beim Leistungsdatum nach oben wandern — die vorhandene
   Regel kennt nur input/select, nicht unseren Anzeige-Knopf. */
.modal-body .form-group:not(.k-neu-toggle):not(.form-group-inline):has(.ang-leist-anzeige) > label:first-child {
  top: 0; font-size: 11px;
}

/* Der Anzeige-Knopf sieht aus wie ein Datumsfeld (.dp-control): gleiche Hoehe, gleicher Unterstrich —
   damit Rechnungsdatum und Leistungsdatum auf einer Linie sitzen. */
.ang-leist-anzeige { display: flex; align-items: center; width: 100%; height: 38px; text-align: left;
  background: none; border: none; border-bottom: 1px solid #d0d3d8; padding: 0; font-size: 14px;
  font-family: inherit; color: #1d2126; cursor: pointer; }
.ang-leist-anzeige:hover { border-bottom-color: #a0a4aa; }
/* Das Aufklapp-Feld haengt an <body> (das Fenster wuerde es abschneiden) und wird per JS platziert. */
.ang-leist-pop.ang-leist-pop-frei { position: fixed; z-index: 4300; width: 260px;
  background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 14px 16px 6px; }
.ang-leist-wahl { display: flex; gap: 22px; align-items: center; padding: 2px 0 8px; }
/* Schalter im Positions-Editor: Leistungszeitraum unter dem Text (Andreas 30.07.2026). */
.ang-pe-lz { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3a4149; cursor: pointer; margin: 4px 0 2px; }
.ang-pe-lz input { width: 16px; height: 16px; accent-color: #0071e3; margin: 0; }
/* Kleines Schloss vor der Belegnummer, wenn der Beleg festgeschrieben ist (GoBD, Andreas 30.07.2026). */
.beleg-lock { display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; opacity: .55; }
.beleg-lock svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ang-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #3a4149; cursor: pointer; }
.ang-radio input { width: 16px; height: 16px; accent-color: #0071e3; margin: 0; }

.ang-desc { border: none; border-bottom: 1px solid #d0d3d8; border-radius: 0; padding: 4px 0 6px; }
.ang-desc .kd-hist-rte { min-height: 150px; max-height: 340px; overflow-y: auto; padding: 10px 0; }
.ang-desc .kd-hist-tb { margin-top: 0; }
.ang-desc .kd-hist-rte h1 { font-size: 20px; margin: 0 0 8px; }
.ang-desc .kd-hist-rte h2 { font-size: 17px; margin: 0 0 8px; }
.ang-desc .kd-hist-rte h3 { font-size: 15px; margin: 0 0 6px; }
.ang-desc .kd-hist-rte h4 { font-size: 14px; margin: 0 0 6px; }
.ang-desc .kd-hist-rte ul, .ang-desc .kd-hist-rte ol { margin: 0 0 8px; padding-left: 22px; }
/* Angebot-Karte in der Anfrage-Übersicht (Aufbau wie D&P: Kopf + Positionen + E-Mailen/Herunterladen + Summe) */
.ang-ov { border: 1px solid #e3e6ea; border-radius: 10px; overflow: hidden; }
.ang-ov-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f2f3f5; color: #2a2d31; }
.ang-ov-ic { display: inline-flex; color: #6b727b; }
.ang-ov-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ang-ov-title { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ang-ov-acts { display: inline-flex; gap: 4px; }
.ang-ov-act { background: rgba(0,0,0,0.05); border: none; color: #5e6772; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ang-ov-act:hover { background: rgba(0,0,0,0.10); color: #2a2d31; }
.ang-ov-act svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ang-ov-pos { padding: 2px 16px; }
.ang-ov-row { display: grid; grid-template-columns: 28px 1fr 104px 104px; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #f2f3f5; font-size: 13.5px; color: #292c31; }
.ang-ov-row:last-child { border-bottom: none; }
.ang-ov-row .c-nr { color: #9aa0a8; }
.ang-ov-row .c-netto, .ang-ov-row .c-ges { text-align: right; }
.ang-ov-foot { display: flex; align-items: center; gap: 20px; padding: 12px 16px; border-top: 1px solid #edeef0; }
.ang-ov-link { color: #0071e3; text-decoration: none; font-size: 13px; font-weight: 500; }
.ang-ov-link:hover { color: #0a5bb0; text-decoration: none; }
.ang-ov-link.ang-ov-do { font-weight: 600; }
.ang-ov-total { margin-left: auto; font-weight: 600; font-size: 14px; color: #1d2126; }
/* Allgemein-Block (Textbausteine, Etappe 5) — gleiche Feld-Optik wie der Rest */
.ang-allg { margin-top: 4px; border-top: 1px solid #edeef0; padding-top: 16px; }
.ang-allg-titel { font-size: 15px; font-weight: 600; color: #222; margin-bottom: 4px; }
.ang-allg-hint { font-weight: 400; font-size: 12px; color: #9aa0a8; }
.ang-allg-h { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #8a9098; margin: 18px 0 2px; }
.ang-allg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.ang-allg-grid .full { grid-column: 1 / -1; }
.ang-vertraege { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.ang-vertrag { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #3a4149; cursor: pointer; }
.ang-vertrag input { width: 16px; height: 16px; accent-color: #0071e3; }
.ang-row-betrag { margin-left: auto; color: #5e6772; font-size: 13px; }
/* Statuskarte (Stufenleiste auf Aufgabe/Auftrag/Anfrage): nur diese Karte unten 10px statt 16px (Andreas 08.08.2026).
   Doppelte Klasse `.kd-card.kd-stufenbar-card` gewinnt gegen `.kd-card { padding:16px }` (höhere Spezifität). */
.kd-card.kd-stufenbar-card { padding-bottom: 10px; }

/* Workflows-Verwaltung (Einstellungen -> Kommunikation -> Workflows). */
.wf-tablewrap { overflow-x: auto; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wf-table th { text-align: left; font-weight: 600; color: #8a9099; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 10px 8px; border-bottom: 1px solid #e5e8ec; }
.wf-table td { padding: 10px; border-bottom: 1px solid #f2f3f5; color: #1a1a1a; vertical-align: middle; }
.wf-table tr.wf-inaktiv td { color: #9aa0a8; }
.wf-table .wf-sub { font-size: 12px; color: #8a9099; margin-top: 2px; }
.wf-td-act { text-align: right; white-space: nowrap; }
.wf-td-act .k-icon-btn { margin-left: 10px; }
.wf-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.wf-switch input { opacity: 0; width: 0; height: 0; }
.wf-switch span { position: absolute; inset: 0; cursor: pointer; background: #cfd4da; border-radius: 22px; transition: background .15s; }
.wf-switch span::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.wf-switch input:checked + span { background: #0071e3; }
.wf-switch input:checked + span::before { transform: translateX(16px); }
.wf-aus { font-size: 11px; color: #a01818; background: #fdecec; border-radius: 4px; padding: 1px 6px; margin-right: 8px; }
.wf-sec-titel { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #8a9099; font-weight: 600; margin: 0 0 8px; }
.wf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wf-grid2 .form-group { margin-bottom: 0; }
.wf-table .wf-sub2 { color: #5e6772; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-deal-meta { font-size: 13px; color: #5e6772; padding: 2px 0; }
.kd-deal-meta b { font-weight: 600; }
.kd-deal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f2f3f5; text-decoration: none; color: inherit; }
.kd-deal-row:last-child { border-bottom: none; }
.kd-deal-row:hover { color: #0071e3; }
.kd-deal-row .kd-deal-name { font-size: 14px; color: inherit; }
.kd-deal-row .kd-deal-meta { font-size: 12.5px; color: #7b828c; white-space: nowrap; padding: 0; }
.kd-hist-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stufe-label { flex: 1 1 auto; height: 38px; padding: 8px 10px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 14px; font-family: inherit; color: #111; background: #fff; }
.stufe-label:focus { border-color: #0071e3; outline: none; }
.stufe-preview { flex: 0 0 150px; text-align: center; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #6b727b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stufe-del { flex: 0 0 28px; width: 28px; height: 28px; border: none; background: none; color: #b0b4ba; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; }
.stufe-del:hover { color: #d92d20; background: #fbeaef; }
.stufe-action { flex: 0 0 66px; display: flex; align-items: center; justify-content: flex-end; }
.stufe-gruppe { flex: 0 0 110px; height: 38px; padding: 6px 8px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; font-family: inherit; color: #111; background: #fff; }
.stufe-gruppe:focus { border-color: #0071e3; outline: none; }
.stufe-grip { flex: 0 0 14px; cursor: grab; color: #b0b4ba; font-size: 16px; line-height: 1; user-select: none; text-align: center; }
.stufe-grip:active { cursor: grabbing; }
.stufe-row.dragging { opacity: .5; }
/* Stufen-Modals (Anfrage/Auftrag) breiter — nur hier, damit kein anderes Modal betroffen ist (Andreas 11.08.2026) */
#stufen-modal .modal-dialog { max-width: 980px; }
/* Gruppen-Auswahl (Beide/Service/Produktion) wird zu .k-dd umgewandelt: feste Breite, sonst „flattern" die Zeilen (Andreas 11.08.2026) */
.stufe-row .k-dd { flex: 0 0 110px; width: 110px; }
.stufe-lock { font-size: 11px; color: #9aa0a8; padding: 0 6px; white-space: nowrap; }
.stufen-add { margin-top: 14px; }
.stufen-hint { margin-top: 10px; font-size: 12px; color: #9aa0a8; }

/* Artikel-/Produkt-Katalog (Einstellungen) */
.einst-content-full { width: 100%; }
.kat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.kat-head h2 { margin: 0; }
.kat-badge { background: #e6f1fb; color: #0c447c; border-radius: 5px; padding: 2px 7px; font-size: 12px; font-weight: 600; }
.kat-inaktiv { color: #b0b4ba; font-size: 12px; }
.kat-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; cursor: pointer; }
.kat-check input { width: auto; }
.req { color: #d92d20; font-weight: 400; }
.kat-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.kat-checks .kat-check { margin: 0; }
.kat-checks .k-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: #292c31; position: relative; }
.plan-module-box { margin-top: 14px; padding-top: 4px; }
.plan-module-titel { font-size: 12.5px; font-weight: 600; color: #6b727b; margin-bottom: 6px; }
.plan-module-box .k-toggle .plan-mod-name { flex: 1; }
.plan-summe-box { margin: 14px 0 4px; }
.plan-summe-lbl { font-size: 11px; color: #5e6772; margin-bottom: 4px; }
.plan-summe-anz { font-size: 18px; font-weight: 600; color: #1d1d1f; }
.plan-mod-row { display: flex; align-items: center; gap: 8px; }
.plan-mod-row .plan-mod-toggle { flex: 1; }
.plan-mod-mengewrap { display: inline-flex; align-items: center; gap: 2px; color: #6b727b; font-size: 13px; white-space: nowrap; }
.plan-mod-menge { width: 46px; padding: 4px 6px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: center; background: #fff; }
/* Status Aktiv/Inaktiv: gefüllte Zelle wie die Stufe bei Kontakten/Deals */
.k-stufecell.k-aktiv-1 { background: #e6f6ea; }
.k-stufecell.k-aktiv-0 { background: #f2f3f5; }
.liz-nr-feld { background: #f2f3f5 !important; color: #6b727b !important; cursor: default; }
/* Lizenz-Status: grün/rot/grau */
.k-stufecell.k-lizstatus-aktiv      { background: var(--svc-aktiv, #e6f6ea); }
.k-stufecell.k-lizstatus-gesperrt   { background: var(--svc-gesperrt, #fdeaea); }
.k-stufecell.k-lizstatus-gekuendigt { background: #f2f3f5; }
/* Lizenz-Artikel-Spalte: zentrierter grüner Haken */
.k-tab th.k-col-liz, .k-tab td.k-col-liz { text-align: center; }
.liz-check { color: #2f9e44; display: inline-flex; }
.liz-check svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.kd-liz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.kd-liz-head h3 { margin: 0; font-size: 16px; }
.kd-liz-preis { color: #7b828c; font-size: 12.5px; margin-left: 6px; }
.plan-mod-row .plan-mod-mengewrap { justify-content: flex-end; min-width: 80px; }
.plan-mod-preiswrap { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; color: #6b727b; font-size: 13px; white-space: nowrap; min-width: 96px; margin-left: 8px; }
.plan-mod-preis { width: 74px; padding: 4px 6px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: right; background: #fff; }
.kd-liz-summe { margin-top: 12px; font-size: 14px; color: #292c31; }
.kd-liz-cardrow { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; margin: 0 -16px; border-bottom: 1px solid #f2f3f5; cursor: pointer; font-size: 14px; }
.kd-liz-cardrow:last-child { border-bottom: none; }
.kd-liz-cardrow:hover { background: rgba(158, 158, 158, 0.2); }
.kd-liz-cardname { flex: 1; font-size: 14px; }
.kd-liz-cardpreis { font-size: 12.5px; color: #7b828c; white-space: nowrap; }
.liz-extra-row { display: flex; align-items: center; gap: 12px; }
.liz-extra-row .kat-check { flex: 1; margin: 5px 0; }
.liz-extra-row .liz-extra-toggle { flex: 1; display: flex; align-items: center; gap: 10px; position: relative; cursor: pointer; font-size: 14px; color: #292c31; }
.liz-planmod-row { display: flex; align-items: center; gap: 12px; }
.liz-planmod-name { flex: 1; font-size: 14px; color: #292c31; }
.liz-mod-states { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.liz-preis-alt { text-decoration: line-through; color: #9aa0a8; font-size: 12.5px; margin-right: 4px; }
.liz-bez { flex: 1; min-width: 90px; padding: 7px 9px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 14px; font-family: inherit; color: #292c31; background: #fff; }
.liz-planmod-row { flex-wrap: wrap; row-gap: 4px; }
.liz-extra-row { flex-wrap: wrap; row-gap: 6px; }
.liz-extra-body { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; padding-left: 4px; }
.liz-besch { flex: 1 1 100%; margin-top: 3px; padding: 8px 10px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; line-height: 1.45; font-family: inherit; color: #3a3f45; background: #fff; resize: vertical; min-height: 70px; }
.liz-bez:disabled, .liz-besch:disabled { background: #f2f3f5; color: #9aa0a8; cursor: not-allowed; }
#svp-modal .modal-dialog { max-width: 900px; }
.svp-pos-row { border: 1px solid #e6e8ec; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: #fbfbfc; }
.svp-pos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.svp-pos-name { font-size: 15px; font-weight: 600; color: #1d2126; }
.svp-pos-head .svp-titel { flex: 1; min-width: 0; font-size: 15px; font-weight: 400; color: #1d2126; border: 1px solid #d8dbe0; border-radius: 7px; padding: 6px 9px; background: #fff; }
.svp-pos-head .svp-titel:focus { border-color: #0071e3; outline: none; }
.svp-pos-head .svp-titel::placeholder { color: #9aa0a8; font-weight: 500; }
.svp-kunde-kopf { margin-bottom: 14px; }
.svp-kunde-label { display: block; font-size: 12px; color: #4f565f; margin-bottom: 3px; }
.svp-kunde-name { font-size: 15px; font-weight: 400; color: #1d2126; }
.svp-pos-del { border: none; background: none; color: #c0392b; font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.svp-pos-del:hover { color: #a5281b; }
.svp-pos-fields { display: grid; grid-template-columns: 90px 150px 90px 150px; gap: 16px; margin-bottom: 16px; }
.svp-f { display: flex; flex-direction: column; gap: 6px; }
.svp-f > span, .svp-f-lbl { font-size: 11px; color: #5e6772; }
.svp-f input { padding: 8px 10px; border: 1px solid #d0d3d8; border-radius: 7px; font-size: 14px; font-family: inherit; background: #fff; }
.svp-pos-besch { margin-bottom: 16px; }
.svp-f-lbl { display: block; margin-bottom: 6px; }
.svp-besch { width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid #d0d3d8; border-radius: 7px; font-size: 14px; line-height: 1.5; font-family: inherit; color: #3a3f45; background: #fff; resize: vertical; }
.svp-pos-lim { margin-top: 4px; }
/* Servicepläne-Modul: Standard-Tabelle mit aufklappbaren Einzelleistungen */
.svc-tab .svc-r { text-align: right; }
.svc-grp-row { cursor: pointer; }
.svc-name { font-weight: 600; color: #1d2126; }
.svc-caret { display: inline-flex; margin-right: 7px; color: #9aa0a8; vertical-align: middle; transition: transform .15s; }
.svc-grp-row.offen .svc-caret { transform: rotate(90deg); }
.svc-pos-row > td { background: #fafbfc; padding: 12px 14px; font-size: 14px; color: #33383e; }
.svc-pos-row > td.k-col-stufe { padding: 0; }
.svc-pos-name { color: #33383e; }
.svc-pos-menge { color: #8a9099; font-size: 12.5px; }
.svc-pos-leer { color: #9aa0a8; font-style: italic; }
.k-stufecell.k-lizstatus-inaktiv { background: var(--svc-inaktiv, #f2f3f5); }
.liz-pos-menge, .liz-pos-preis, .liz-pos-rabatt { display: inline-flex; align-items: center; gap: 2px; color: #6b727b; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.liz-menge, .liz-preis, .liz-rabatt { width: 56px; padding: 6px 7px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: right; background: #fff; }
.liz-preis { width: 74px; }
.liz-rabatt { width: 52px; }
.liz-effektiv { color: #2f9e44; font-weight: 600; margin-left: 6px; }
.liz-sperr.k-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #7b828c; position: relative; white-space: nowrap; }

@media (max-width: 980px) {
  .einst-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .einst-layout { grid-template-columns: 1fr; }
  .einst-side { max-height: none; position: static; }
}

/* ============ Startseite: Widget-Grid wie D&P (6 Spalten, 240px, 322px Höhe) ============ */
.start-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 322px;
  gap: 8px;
  width: 100%;
}
.wgt-1x1 { grid-column: span 1; grid-row: span 1; }
.wgt-2x1 { grid-column: span 2; grid-row: span 1; }
.wgt-1x2 { grid-column: span 1; grid-row: span 2; }
.wgt-2x2 { grid-column: span 2; grid-row: span 2; }
.wgt-3x1 { grid-column: span 3; grid-row: span 1; }
.wgt-3x2 { grid-column: span 3; grid-row: span 2; }
.wgt-4x1 { grid-column: span 4; grid-row: span 1; }
.wgt-4x2 { grid-column: span 4; grid-row: span 2; }
/* Home-Startseite (Seite 1): feste Spalten — links / Mitte / rechts, die KPIs fuellen die Luecken.
   Bewusst nur .start-grid-home, damit die Agentur-Startseite (Seite 2) unberuehrt bleibt. */
.start-grid-home { grid-auto-flow: row dense; }
.start-grid-home .col-l { grid-column: 1 / span 2; }
.start-grid-home .col-m { grid-column: 3 / span 2; }
.start-grid-home .col-r { grid-column: 5 / span 2; }
.widget {
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.widget:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.widget h3 { margin: 0 0 14px; font-size: 15px; color: #222; font-weight: 600; flex-shrink: 0; }
.widget-body { flex: 1; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
#start-termine { cursor: pointer; }
.st-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #9aa0a8; margin: 10px 0 4px; }
.st-tag:first-child { margin-top: 0; }
.st-ev { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #1d2126; padding: 4px 6px 4px 8px; border-left: 2px solid #0071e3; margin-bottom: 2px; cursor: pointer; border-radius: 0 4px 4px 0; }
.st-ev:hover { background: #f0f3f7; }
.st-zeit { flex: 0 0 auto; color: #7b828c; font-variant-numeric: tabular-nums; min-width: 42px; }
.st-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Startseite „Meine Aufträge" — zweizeilig wie D&P: Ordner-Icon + Bezeichnung, darunter Stufe · Kunde */
/* Hover-Leiste ueber die volle Kartenbreite: horizontalen Karten-Innenabstand auf die Zeilen verlagern */
#start-auftraege, #start-anfragen, #start-aufgaben, #start-news { padding-left: 0; padding-right: 0; }
#start-auftraege h3, #start-anfragen h3, #start-aufgaben h3, #start-news h3 { padding: 0 22px; }
#start-auftraege .widget-body, #start-anfragen .widget-body, #start-aufgaben .widget-body, #start-news .widget-body { margin-right: 0; padding-right: 0; }
.sa-row { display: flex; align-items: center; gap: 10px; padding: 7px 22px; margin-bottom: 4px; border-radius: 0; cursor: pointer; }
.sa-row:hover { background: #f0f3f7; }
.sa-ic { flex: 0 0 auto; display: inline-flex; color: #98a0aa; }
.sa-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sa-tx { display: flex; flex-direction: column; min-width: 0; }
.sa-titel { font-size: 13px; font-weight: 600; color: #1d2126; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-sub { font-size: 11.5px; color: #7b828c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-vua-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; background: #f7f8fa; margin-bottom: 6px; }
.kd-vua-row:hover { background: #eef1f5; }
/* Ueber dem rechten Block (Status + Menue samt Umfeld) kein Zeilen-Hover — eigene klickbare Felder. */
.kd-vua-row:has(.kd-vua-actions:hover) { background: #f7f8fa; }
.kd-vua-ic { flex: 0 0 auto; display: inline-flex; color: #98a0aa; }
.kd-vua-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.kd-vua-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1c2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-vua-nr { color: #9aa0a8; font-weight: 400; }
.kd-vua-vol { flex: 0 0 auto; font-size: 13px; color: #5e6772; font-variant-numeric: tabular-nums; }
/* Status-Feld exakt wie in den Auftrags-Listen: eckig, fuellt die volle Zeilenhoehe (kein Abstand oben/unten),
   Farbe wird per JS je Stufe gesetzt. margin: -10px 0 hebt das Zeilen-Innenpolster (10px) auf. */
.kd-vua-actions { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; align-self: stretch; margin: -10px -12px -10px 0; padding-right: 12px; }
.kd-vua-stufe { flex: 0 0 auto; align-self: stretch; width: 120px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; font-size: 13px; color: #4a4c4f; white-space: nowrap; cursor: pointer; }
.kd-vua-menu { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 4px; border-radius: 6px; cursor: pointer; color: #98a0aa; }
.kd-vua-menu svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; display: block; }
.kd-vua-menu:hover { background: #e3e7ec; color: #5e6772; }
/* Reiter „Verhandlungen & Aufträge": zwei Blöcke (Verhandlungen oben, Aufträge unten) mit je eigener Tabelle. */
.kd-vua-block { margin-bottom: 26px; }
.kd-vua-block-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.kd-vua-block-tools { display: inline-flex; align-items: center; gap: 6px; }
.kd-vua-oben-label { cursor: default; }
.kd-vua-block-titel { font-size: 15px; font-weight: 600; color: #1c2430; }
.kd-vua-block-sum { font-size: 13px; color: #7b828c; }
.kd-vua-block-sum b { color: #3e424a; font-weight: 600; }
.kd-vua-listen .kd-empty { padding: 8px 2px; }
.widget .widget-empty { color: #7b828c; font-size: 13px; padding: 10px 0; }
/* Karte „Offene Posten" — Liste wie D&P (Betrag: Titel, darunter Kunde) */
/* Hover-Leiste ueber die volle Kartenbreite: horizontalen Karten-Innenabstand auf die Zeilen verlagern
   (gleiches Muster wie „Meine Aufträge") */
#start-offen-card { padding-left: 0; padding-right: 0; }
#start-offen-card h3 { padding: 0 22px; }
#start-offen-card .widget-body { margin-right: 0; padding-right: 0; }
#start-offen-card .widget-empty { padding-left: 22px; padding-right: 22px; }
.op-liste { display: flex; flex-direction: column; }
.op-item { padding: 7px 22px; margin-bottom: 4px; border-radius: 0; cursor: pointer; }
.op-item:hover { background: #f0f3f7; }
.op-item-top { font-size: 14px; color: #1d2129; }
.op-item-sub { font-size: 12px; color: #7b828c; margin-top: 2px; }

/* Klickbare Zeilen in Widgets (Termine, Aufgaben, Projekte, Deals) */
.w-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.w-row:hover { background: #f2f5f8; }
.w-row-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5e6772;
  margin-top: 2px;
}
.w-row-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.w-row-body { flex: 1; min-width: 0; }
.w-row-title { font-size: 14px; font-weight: 500; color: #222; line-height: 1.35; }
.w-row-meta { font-size: 12px; color: #5e6772; margin-top: 2px; line-height: 1.35; }
.w-row-date {
  font-size: 11px;
  color: #5e6772;
  font-weight: 500;
  min-width: 44px;
  padding-top: 2px;
}
.w-row-date strong { display: block; color: #222; font-size: 13px; font-weight: 600; }
/* Aufgaben-Check-Icon violett */
.w-row-icon.check { color: #7a4bd8; }

/* KPI-Kacheln rechts (2 Spalten) */
.start-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kpi {
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 18px 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}
.kpi:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.kpi-label { font-size: 15px; color: #222; font-weight: 600; letter-spacing: 0.01em; }
.kpi-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #d9dcdf;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: 40px;
  font-weight: 700;
}
.kpi-sub { font-size: 13px; color: #444; }
.kpi-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kpi-monat { font-size: 13px; color: #6b7280; font-weight: 500; }
.kpi-circle.kpi-circle-eur { font-size: 22px; }

/* Vollbreite Widget unter dem Grid */
.start-full {
  display: block;
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 22px 24px;
  margin-top: 8px;
  min-height: 220px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}
.start-full:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.start-full h3 { margin: 0 0 16px; font-size: 15px; color: #222; font-weight: 700; }

/* ==== Kontakt-Detailansicht (D&P-Stil) ==== */
.kd-tabs { display: flex; align-items: stretch; border-bottom: 1px solid #e5e7eb; margin-bottom: 20px; }
.kd-tabs-scroll { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.kd-gear { flex: 0 0 auto; align-self: center; background: transparent; border: none; cursor: pointer; padding: 6px 8px; margin-left: 8px; color: #5e6772; display: inline-flex; align-items: center; }
.kd-gear:hover { color: #292c31; }
.kd-gear svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
/* Zahnrad-Fenster: Ansicht anpassen (Tabs/Karten sortieren + ein-/ausschalten) */
.kd-lay-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5e6772; margin: 0 0 6px; }
.kd-lay-list { display: flex; flex-direction: column; gap: 6px; }
.kd-lay-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #edeef0; border-radius: 8px; background: #fff; cursor: grab; }
.kd-lay-item.is-dragging { opacity: .45; }
.kd-lay-grip { display: inline-flex; color: #b0b4ba; cursor: grab; }
.kd-lay-grip svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.kd-lay-label { flex: 1 1 auto; font-size: 14px; color: #292c31; }
.kd-lay-item .k-toggle { position: relative; flex: 0 0 auto; display: inline-flex; }
.kd-lay-numlbl { font-size: 12px; color: #9aa0a8; flex: 0 0 auto; }
.kd-lay-num { width: 52px; flex: 0 0 auto; padding: 4px 6px; border: 1px solid #d0d3d8; border-radius: 6px; font-size: 13px; font-family: inherit; text-align: center; background: #fff; }
.kd-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 12px 16px; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: #5e6772; cursor: pointer; white-space: nowrap; }
.kd-tab:hover { color: #292c31; }
.kd-tab.active { color: #111; border-bottom-color: #0071e3; }
.kd-layout { display: flex; gap: 16px; align-items: flex-start; }
.kd-main { flex: 1 1 auto; min-width: 0; }
.kd-side { flex: 0 0 340px; display: flex; flex-direction: column; gap: 16px; }
.kd-left-hint, .kd-tab-empty { color: #5e6772; font-size: 14px; padding: 40px 4px; }
.kd-main .kd-card { margin-bottom: 16px; }
.kd-kpis { display: flex; gap: 14px; margin-bottom: 16px; align-items: stretch; }
/* Innenabstand 12 statt 16: unter dem Betrag stand sonst zu viel Luft (Andreas 29.07.2026). */
.kd-kpi { flex: 0 0 auto; min-width: 150px; background: #fff; border: 1px solid #edeef0; border-radius: 10px; padding: 12px 18px; display: flex; flex-direction: column; gap: 4px; }
.kd-kpi-label { font-size: 13px; color: #5e6772; }
.kd-kpi-val { font-size: 22px; font-weight: 700; color: #1d2126; }
.kd-kpi-chart { flex: 1; background: #fff; border: 1px solid #edeef0; border-radius: 10px; display: flex; align-items: center; justify-content: center; min-height: 72px; }
/* Sobald die Umsatzentwicklung drin steht, braucht sie die ganze Flaeche statt der Zentrierung.
   Feste Hoehe fuer die Verlaufslinie, damit die Karte nicht hoeher wird als die Kennzahlen daneben
   (Andreas 29.07.2026). Legende rechts oben statt mittig. */
.kd-kpi-chart-voll { display: block; padding: 6px 12px 4px; overflow: hidden; }
.kd-kpi-chart-voll .us-legend { text-align: right; margin-bottom: 1px; font-size: 11px; }
.kd-kpi-chart-voll .us-leg { margin: 0 0 0 10px; }
.kd-kpi-chart-voll .us-chart { height: 44px; }
.kd-hist-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.kd-hist-act { background: #f4f6f8; border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; color: #4f565f; cursor: pointer; }
.kd-hist-act:hover { background: #e9ecef; }
/* Historie-Kopf: Auge links neben Titel, 6 Knöpfe + Filter rechts, alles auf einer Linie */
.kd-hist-head { align-items: center; }
.kd-hist-title { display: flex; align-items: center; gap: 6px; line-height: 1; }
.kd-hist-eye { background: none; border: none; cursor: pointer; color: #7b828c; display: inline-flex; align-items: center; padding: 2px; border-radius: 6px; }
.kd-hist-eye:hover { background: #f4f6f8; color: #292c31; }
.kd-hist-eye svg { width: 13px; height: 13px; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-hist-head-right { display: flex; align-items: center; gap: 8px; }
.kd-hist-head .kd-hist-actions { margin-bottom: 0; flex-wrap: nowrap; }
/* Mobil: Kopf darf umbrechen, damit nichts über den Rand läuft */
@media (max-width: 760px) {
  .kd-hist-head { flex-wrap: wrap; row-gap: 8px; }
  .kd-hist-head-right { flex-wrap: wrap; justify-content: flex-end; }
  .kd-hist-head .kd-hist-actions { flex-wrap: wrap; justify-content: flex-end; }
}
/* Historie: Editor + Einträge */
.kd-hist-editor:empty { display: none; }
/* Kein Abstand/Trennstrich mehr noetig: Solange geschrieben wird, ist die Historie darunter ganz
   ausgeblendet (Andreas 15.07.: „kann man die ausblenden, wenn email oder notiz erstellt wird, ist
   wirklich verwirrend"). Das ist die bessere Loesung als Luft zwischen zwei Dingen, die man
   ohnehin nicht gleichzeitig braucht. Siehe histListeUmschalten in app.js. */
.kd-hist-ed-box { border: none; padding: 4px 2px 0; margin-bottom: 14px; background: transparent; }
.kd-hist-ed-box.kd-hist-ed-wa { margin-bottom: 0; }   /* nur WhatsApp-Editor (Andreas 30.07.2026) */
.kd-hist-mailhead { margin-bottom: 8px; }
.kd-hist-mailrow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.kd-hist-mailrow label { font-size: 14px; color: #7b828c; min-width: 62px; }
.kd-hist-mailrow input, .kd-hist-mailrow select { flex: 1 1 auto; border: none; border-bottom: 1px solid #ececee; outline: none; font-size: 14px; background: transparent; font-family: inherit; color: #1d1d1f; min-width: 0; padding-bottom: 6px; }
.kd-hist-cc { background: none; border: none; color: #7b828c; font-size: 12px; cursor: pointer; padding: 2px 6px; }
.kd-hist-cc:hover { color: #292c31; }
.kd-hist-callhead { display: flex; align-items: center; gap: 10px; padding: 6px 2px; margin-bottom: 8px; }
.kd-hist-callsel { border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: #1d1d1f; cursor: pointer; }
.kd-hist-callkontakt { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: #1d1d1f; }
.kd-hist-mailrow select, .kd-hist-callsel, .kd-hist-callkontakt { appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b828c' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 18px; }
.kd-hist-callhead #anruf-richtung, .kd-hist-callhead #anruf-kontakt { border-bottom: 1px solid #ececee; padding-bottom: 6px; }
.kd-hist-callwhen { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kd-hist-planwrap { display: flex; align-items: center; gap: 8px; }
.kd-hist-planwrap .dp-control { min-width: 132px; }
.kd-hist-time { width: 56px; border: 1px solid #d0d3d8; border-radius: 6px; padding: 4px 6px; font-size: 13px; font-family: inherit; outline: none; text-align: center; }
.kd-hist-rte { min-height: 160px; border: none; padding: 12px 2px; font-size: 14px; background: transparent; outline: none; line-height: 1.45; }
.kd-hist-rte:empty:before { content: attr(data-ph); color: #9aa0a8; }
.kd-hist-rte a { text-decoration: none; }   /* Links generell ohne Unterstreichung (Andreas 30.07.2026) */
.kd-hist-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #ececee; }
.kd-hist-tb-sep { width: 1px; align-self: stretch; background: #e4e6ea; margin: 4px 4px; }
.kd-hist-tb-right { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* Mail-Editor UEBERALL (Fenster „Neue E-Mail"/Antworten/Weiterleiten UND Editor in der Kontakt-Historie):
   Kopf (Von/An/Betreff) steht fest oben, Werkzeugleiste steht fest unten, NUR der Textbereich scrollt.
   So laeuft nie Text unter die Leiste (Andreas 27.07.2026: „unter der Werkzeugleiste blitzt Text durch")
   und „Senden" bleibt immer erreichbar — beides ohne die frueher angeheftete (sticky) Leiste, bei der
   sich Text und Leiste ueberlappten. Der Editor deckelt sich selbst (max-height), damit der Textbereich
   intern scrollt; im Fenster fuellt er stattdessen die Modal-Hoehe. Notiz/Anruf bleiben unveraendert. */
.kd-hist-ed-mail { display: flex; flex-direction: column; min-height: 0; max-height: 68vh; }
.kd-hist-ed-mail .kd-hist-mailhead { flex: 0 0 auto; }
.kd-hist-ed-mail .kd-hist-rte { flex: 1 1 auto; min-height: 140px; overflow-y: auto; }
/* Schreibfenster immer einheitlich serifenlos + 14px anzeigen — egal welche Schrift/Groesse die
   zitierte Original-Mail mitbringt. Nur die ANZEIGE beim Schreiben; der Versand (rte.innerHTML mit
   den Inline-Stilen) bleibt unveraendert (Andreas 03.08.2026). */
.kd-hist-ed-mail .kd-hist-rte, .kd-hist-ed-mail .kd-hist-rte * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.kd-hist-ed-mail .kd-hist-tb { background: #fff; }
/* Im Fenster fuellt der Editor die Modal-Hoehe (bis 90vh), der Modal-Body scrollt selbst nicht mehr. */
#mail-neu-modal .modal-body { overflow: hidden; }
#mail-neu-modal .kd-hist-ed-mail { flex: 1 1 auto; max-height: none; margin-bottom: 0; }
.rte-btn { background: none; border: none; cursor: pointer; color: #5e6772; min-width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; padding: 0 4px; }
.rte-btn b, .rte-btn i, .rte-btn s { display: inline-flex; align-items: center; line-height: 1; }
.rte-btn:hover { background: #eef0f2; color: #292c31; }
.rte-btn.is-active { background: #eaf1fb; color: #0071e3; }
.rte-btn svg { width: 17px; height: 17px; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; }
#hist-msg { font-size: 12.5px; color: #7b828c; margin-top: 6px; }
.kd-hist-item { padding: 10px 2px; border-bottom: 1px solid #f2f3f5; }
.kd-hist-item.is-pinned { background: #fffdf3; border-radius: 8px; padding: 10px; }
.kd-hist-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.kd-hist-typ { font-size: 12px; font-weight: 600; color: #55606e; }
.kd-hist-item-date { font-size: 12px; color: #9aa0a8; margin-left: auto; }
.kd-hist-privat { font-size: 12px; color: #9aa0a8; }
.kd-hist-pin, .kd-hist-del { background: none; border: none; cursor: pointer; color: #b0b4ba; font-size: 15px; line-height: 1; padding: 2px 4px; }
.kd-hist-pin:hover, .kd-hist-del:hover { color: #292c31; }
.kd-hist-item.is-pinned .kd-hist-pin { color: #e0a800; }
.kd-hist-menu { background: none; border: none; cursor: pointer; color: #9aa0a8; padding: 2px 3px; line-height: 1; opacity: 0; transition: opacity .12s; display: inline-flex; align-items: center; }
.kd-hist-menu svg { width: 15px; height: 15px; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-hist-menu:hover { color: #292c31; }
.kd-hist-item:hover .kd-hist-menu { opacity: 1; }
.kd-hist-menu:hover { color: #292c31; }
.kd-hist-hasanhang .kd-hist-item-head, .kd-hist-hasanhang .kd-hist-text { cursor: pointer; }
.kd-hist-caret { color: #9aa0a8; display: inline-flex; align-items: center; transition: transform .12s; margin-left: -6px; margin-top: -1px; }
.kd-hist-caret svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kd-hist-item.is-open .kd-hist-caret { transform: rotate(90deg); }
.kd-hist-anhang-wrap { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }   /* mehrere Anhaenge nebeneinander (db/031, 16.07.2026) */
.kd-hist-anhang { display: inline-block; padding: 0; border: 1px solid #e4e6ea; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; max-width: 200px; line-height: 0; }
.kd-hist-anhang:hover { border-color: #c4c8ce; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kd-hist-anhang img, .kd-hist-anhang canvas { display: block; max-width: 200px; max-height: 240px; width: auto; height: auto; }
.kd-hist-anhang.is-bild img { max-height: 180px; }
.kd-hist-anhang-lade { display: inline-block; padding: 26px 20px; font-size: 12px; color: #9aa0a8; line-height: 1.4; }
.kd-hist-anhang-name { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; color: #55606e; line-height: 1.4; }
.kd-hist-anhang-name svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.kd-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #292c31; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 8px; z-index: 4000; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.kd-hist-text { font-size: 14px; color: #292c31; line-height: 1.45; }
/* Historie-Icons dezenter + 32x32 — NUR hier, nichts an den Listen-Icons ändern */
.kd-hist-head .k-icon-btn { width: 32px; height: 32px; border-color: #dcdfe3; color: #7b828c; padding: 0; }
.kd-hist-head .k-icon-btn span[data-icon] { display: inline-flex; }
.kd-hist-head .k-icon-btn svg { width: 17px; height: 17px; display: block; }
.kd-hist-head .k-icon-btn:hover { border-color: #b8bcc2; background: #f4f6f8; }
.kd-hist-input { border: 1px solid #e4e6ea; border-radius: 8px; padding: 12px 14px; color: #7b828c; font-size: 13.5px; cursor: text; }
.kd-hist-empty { padding: 16px 0 4px; }
.kd-tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
/* Eigenständige Aufgaben-Seite: Kopf-Abstände an den normalen Listen-Kopf (.k-list-head) angleichen,
   damit „Alle Aufgaben" auf gleicher Höhe sitzt wie „Aktive Aufträge". Nur die Vollseite (Klasse wird
   nur bei pdAufgabenCtx.alle gesetzt), nicht die eingebettete Rubrik. Andreas 04.08.2026. */
.kd-tl-head.kd-tl-head-seite { padding: 8px 0 8px 4px; margin-bottom: 6px; }
.kd-tl-right { display: flex; align-items: center; gap: 8px; position: relative; }
.kd-tl-sum { font-size: 13px; color: #5e6772; margin-right: 4px; white-space: nowrap; }
.kd-tl-sum b { color: #1d2126; font-weight: 700; }
.kd-dok-menusep { height: 1px; background: #eceef1; margin: 6px 0; }
.kd-dok-selcell { width: 42px; text-align: center; padding-left: 8px; }
.kd-dok-selcell input { cursor: pointer; width: 16px; height: 16px; }
.kd-dok-suche { height: 30px; box-sizing: border-box; padding: 4px 12px; border: 1px solid #aaaaaa; border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff; min-width: 260px; }
.kd-dok-suche:focus { border-color: #0071e3; outline: none; }
.kd-dok-tab .kd-dok-titel { font-weight: 400; }
.kd-dok-tab .kd-tl-empty { text-align: center; color: #9aa0a8; padding: 24px 0; }
/* Datum + Typ nicht umbrechen (sonst „E-\nMail") — Andreas 02.08.2026. */
.kd-dok-tab .kd-dok-datum, .kd-dok-tab .kd-dok-typ { white-space: nowrap; }
/* Titel-Spalte nicht zu breit: langer Titel wird begrenzt und ggf. mit … gekürzt (Andreas 02.08.2026). */
.kd-dok-tab .kd-dok-titel span { display: inline-block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* Ausblenden-Haken (Inbox-Stil) in der kleinen Vorgänge-Karte, rechts am Zeilenende, erst bei Hover. */
.kd-vorg-hide { margin-left: auto; flex: 0 0 auto; opacity: 0; transition: opacity .1s; }
.kd-row:hover .kd-vorg-hide, .kd-vorg-hide.is-checked { opacity: 1; }
/* Datenablage: Brotkrümel-Pfad + Ordner-Kacheln */
.kd-tl-left { display: flex; align-items: center; min-width: 0; }
.kd-brot-trenner { width: 1px; height: 16px; background: #dfe1e5; margin: 0 10px; flex: 0 0 auto; }
.kd-brot { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12.5px; }
.kd-brot-teil { color: #0071e3; text-decoration: none; cursor: pointer; }
.kd-brot-teil:hover { text-decoration: none; color: #0a5fc0; }
.kd-brot-sep { color: #9aa0a6; }
.kd-brot-akt { color: #111; font-weight: 600; }
.kd-ordner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kd-ordner { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 18px; box-sizing: border-box; background: #fff; border: 1px solid #e4e6ea; border-radius: 10px; cursor: pointer; text-align: left; font-size: 15.5px; color: #1c2430; transition: box-shadow .15s, border-color .15s; }
a.kd-ordner, a.kd-ordner-link { text-decoration: none; color: #1c2430; }
.kd-ordner:hover { border-color: #cfd4da; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kd-ordner-ic { color: #6e757e; display: inline-flex; flex: 0 0 auto; }
.kd-ordner-blass { opacity: 0.5; }
.kd-ordner-blass:hover { opacity: 0.75; }
.kd-ordner-ic svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kd-ordner-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* Globale Datenablage (Sidebar): Kontakt- und Allgemein-Kacheln gleich groß (13,5 px) */
#dbl-grid .kd-ordner, #dbl-allg .kd-ordner { font-size: 13.5px; }
/* Upload-Fortschrittsbalken (fixiert unten, für große Dateien) */
.dok-upbalken { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5000; width: 360px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #e4e6ea; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.dok-upb-name { font-size: 13px; color: #1c2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-upb-row { display: flex; align-items: center; gap: 10px; }
.dok-upb-track { flex: 1 1 auto; height: 6px; background: #eef0f2; border-radius: 3px; overflow: hidden; }
.dok-upb-fill { height: 100%; background: #0071e3; width: 0; transition: width .15s; }
.dok-upb-pct { flex: 0 0 auto; font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
/* Ordner-Verschieben-Dialog: Zielordner-Liste (eingerückt) */
.ovm-liste { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.ovm-ziel { display: block; padding: 8px 12px; border-radius: 6px; color: #1c2430; text-decoration: none; font-size: 14px; }
.ovm-ziel:hover { background: #f0f3f7; }
/* Datenablage-Landeseite: Bereichs-Überschriften „Allgemein" / „Kontakte" */
.dbl-sekt-titel { font-size: 12px; font-weight: 600; color: #9aa0a8; text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 10px; }
.dbl-allg-leer { color: #9aa0a8; font-size: 13px; padding: 2px 0 16px; }
.kd-ordner-nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-ordner-nr { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-ordner-bez { font-size: 12.5px; color: #7b828c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.kd-ordner-frg { flex: 0 0 auto; display: inline-flex; align-items: center; color: #2e9e5b; }
.kd-ordner-frg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-ordner-menu { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px; color: #9aa0a6; cursor: pointer; margin-right: -8px; opacity: 0; transition: opacity .12s; }
.kd-ordner:hover .kd-ordner-menu { opacity: 1; }
.kd-ordner-menu:hover { background: #eef0f2; color: #4f565f; }
.kd-ordner-menu svg { width: 18px; height: 18px; }
/* Datenablage: Vorschau-Ansicht (andere Ordner statt Tabelle) */
.kd-vorschau-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kd-vorschau-karte { border: 1px solid #e4e6ea; border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; transition: box-shadow .15s, border-color .15s; }
.kd-vorschau-karte:hover { border-color: #cfd4da; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.kd-vk-bild { height: 150px; background: #f5f6f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kd-vk-img { width: 100%; height: 100%; object-fit: cover; }
.kd-vk-pdf { width: 100%; height: 100%; border: none; pointer-events: none; background: #fff; }
.kd-vk-bild::after { content: ""; position: absolute; inset: 0; z-index: 3; cursor: pointer; }  /* deckt die Vorschau ab: kein Browser-PDF-Menue beim Hover; Klick oeffnet die Vorschau (Andreas 25.08.2026) */
.kd-vk-fallback { color: #9aa0a6; }
.kd-vk-fallback svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.kd-vk-fuss { display: flex; align-items: center; gap: 6px; padding: 8px 6px 8px 12px; }
.kd-vk-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-vorschau-menu { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px; color: #9aa0a6; cursor: pointer; opacity: 0; transition: opacity .12s; }
.kd-vorschau-karte:hover .kd-vorschau-menu { opacity: 1; }
.kd-vorschau-menu:hover { background: #eef0f2; color: #4f565f; }
.kd-vorschau-menu svg { width: 18px; height: 18px; }
.kd-dok-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.kd-dok-meta > div { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px solid #f2f3f5; padding-bottom: 6px; }
.kd-dok-meta span { color: #9aa0a8; }
.kd-dok-meta b { color: #292c31; font-weight: 500; text-align: right; margin-left: 12px; word-break: break-word; }
.kd-dok-tab .kd-dok-titel { cursor: pointer; }
.dok-vorschau-overlay { position: fixed; inset: 0; z-index: 4000; background: #525659; display: flex; flex-direction: column; }
/* Fenster, die AUS einer offenen Vorschau heraus aufgehen (Mail schreiben, Bestätigen, Bearbeiten),
   müssen darüber liegen — sonst klickt man ins Leere und es „passiert nichts" (Andreas 29.07.2026).
   Der Geschwister-Selektor greift, weil neue Fenster nach der Vorschau an <body> gehängt werden. */
.dok-vorschau-overlay ~ .modal-overlay { z-index: 4100; }
.dok-vorschau-overlay ~ .kd-menu, .dok-vorschau-overlay ~ .k-more-menu { z-index: 4200; }
.dok-vorschau-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #38393b; color: #fff; flex: 0 0 auto; }
.dok-vorschau-titel { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dok-vorschau-tools { display: flex; align-items: center; gap: 6px; }
.dv-tool { background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer; min-width: 30px; height: 30px; border-radius: 5px; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.dv-tool:hover { background: rgba(255,255,255,0.25); }
.dv-tool svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.dv-zoom { font-size: 13px; min-width: 46px; text-align: center; color: #e5e6e8; }
.dok-vorschau-btn { background: none; border: none; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 6px; display: inline-flex; align-items: center; text-decoration: none; }
.dok-vorschau-btn:hover { opacity: 0.75; }
.dok-vorschau-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Textknopf in der Vorschau-Leiste (Status, „Entwurf abschließen") — die Leiste ist sonst auf Symbole ausgelegt. */
.dok-vorschau-btn-text { font-size: 13px; padding: 5px 11px; border-radius: 6px; background: rgba(255,255,255,0.14); }
/* Status-Knopf farbig wie die Status-Zelle in den Listen (Andreas 29.07.2026). Heller Grund, dunkle Schrift. */
.dok-vorschau-btn-text[data-status] { color: #1c1c1c; font-weight: 500; }
.dok-vorschau-btn-text[data-status="offen"],
.dok-vorschau-btn-text[data-status="entwurf"]        { background: #f2f3f5; }
.dok-vorschau-btn-text[data-status="erinnert"]       { background: #ffe8cc; }
.dok-vorschau-btn-text[data-status="gemahnt"],
.dok-vorschau-btn-text[data-status="letzte_mahnung"],
.dok-vorschau-btn-text[data-status="storniert"]      { background: #fbdada; }
.dok-vorschau-btn-text[data-status="bezahlt"],
.dok-vorschau-btn-text[data-status="bestaetigt"],
.dok-vorschau-btn-text[data-status="versendet"]      { background: #cbe9d2; }
.dok-vorschau-btn-text[data-status="geplant"],
.dok-vorschau-btn-text[data-status="abgerechnet"]    { background: #eaf1fb; }
.dok-vorschau-btn-text[data-status="abgelehnt"],
.dok-vorschau-btn-text[data-status="weitergefuehrt"] { background: #e6e8eb; }
.dok-vorschau-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; }
.dok-vorschau-frame { width: 100%; height: 100%; border: none; }
.dok-vorschau-img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; padding: 20px; }
.dok-vorschau-video { max-width: 92%; max-height: 82vh; margin: auto; border-radius: 8px; background: #000; }
.dok-vorschau-audio { width: min(620px, 82%); margin: auto; }
.dok-vorschau-none { color: #fff; text-align: center; font-size: 14px; line-height: 1.8; margin: auto; }
.dok-vorschau-none a { color: #7db9ff; }
.dok-vorschau-text { width: 100%; max-width: 1000px; margin: 20px auto; background: #fff; color: #222; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; padding: 20px 24px; border-radius: 6px; box-sizing: border-box; align-self: flex-start; }
.kd-tl-empty { text-align: right; color: #7b828c; padding: 22px 12px; font-size: 14px; }
.kd-report-filters { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-end; margin-bottom: 26px; }
.kd-rf { display: flex; flex-direction: column; gap: 5px; }
.kd-rf label { font-size: 12px; color: #5e6772; }
.kd-rf-val { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #292c31; border-bottom: 1px solid #c8ccd1; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.kd-rf-val svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-report-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kd-report-head h3 { font-size: 16px; font-weight: 600; color: #1d2126; margin: 0; }
/* Reiter „Zeit & Kostenerfassung": Finanz-/Zeit-Tabelle unter der Kostenliste bekommt Abstand nach oben,
   sonst klebt sie direkt an der Liste (Andreas 10.08.2026). */
#pd-zeitkosten + .kd-report,
#kd-zeitkosten + .kd-report { margin-top: 28px; }
.k-tab th.ta-r, .k-tab td.ta-r { text-align: right; }
.k-tab th.k-col-kundennummer, .k-tab td.k-col-kundennummer { text-align: center; }
.kd-card { background: #fff; border: 1px solid #edeef0; border-radius: 10px; padding: 16px; }
.kd-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kd-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #222; }
.kd-title-ic { display: inline-flex; color: #4f565f; }
.kd-title-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-card-more { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: 6px; color: #5e6772; }
.kd-card-more:hover { background: #f4f6f8; }
.kd-card-more svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; display: block; }
.kd-card-head-actions { display: flex; align-items: center; gap: 4px; }
/* Rechte Karte: Pfeil im Kopf klappt die Extra-Einträge (über N hinaus) auf/zu */
.kd-card-collapse { background: transparent; border: none; cursor: pointer; padding: 0; margin-right: 6px; color: #9aa0a8; display: inline-flex; align-items: center; flex: 0 0 auto; transition: transform .15s ease; }
.kd-card-collapse svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.kd-card.is-expanded .kd-card-collapse { transform: rotate(180deg); }
.kd-card-collapse + .kd-card-title { margin-right: auto; }
.kd-whatsup-termin-btn svg { width: 15px; height: 15px; }
.kd-wu-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #f2f3f5; }
.kd-wu-item:last-child { border-bottom: none; }
.kd-wu-bell { color: #c8ccd2; flex: 0 0 auto; align-self: flex-start; margin-top: 4px; }
.kd-wu-bell svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-wu-item.is-due .kd-wu-bell { color: #d92d20; }
.kd-wu-bell--faellig { color: #e8912a; }
.kd-wu-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.kd-wu-tx b { font-weight: 500; color: #292c31; }
.kd-wu-tx span { font-size: 12px; color: #9aa0a8; }
.kd-wu-item.is-due .kd-wu-tx b, .kd-wu-item.is-due .kd-wu-tx span { color: #d92d20; }
.kd-wu-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.kd-wu-item:hover .kd-wu-actions { opacity: 1; }
.kd-wu-act { background: none; border: none; cursor: pointer; color: #9aa0a8; padding: 2px 3px; line-height: 1; display: inline-flex; align-items: center; }
.kd-wu-act svg { width: 15px; height: 15px; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-wu-act:hover { color: #292c31; }
.kd-erinn-row { display: flex; gap: 12px; }
.kd-erinn-row .form-group { flex: 1 1 auto; }
.kd-erinn-row .form-group:last-child { flex: 0 0 92px; }
#k-erinn-modal .modal-dialog { max-width: 440px; }
#k-erinn-modal .modal-foot { justify-content: flex-end; }
.kd-adr-item { padding: 8px 0; border-bottom: 1px solid #f2f3f5; }
.kd-adr-item:last-child { border-bottom: none; }
.kd-adr-head { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.kd-adr-typ { font-size: 12px; font-weight: 600; color: #55606e; }
.kd-adr-menu { background: none; border: none; cursor: pointer; color: #b0b4ba; padding: 2px 3px; line-height: 1; opacity: 0; transition: opacity .12s; }
.kd-adr-menu svg { width: 15px; height: 15px; display: block; }
.kd-adr-item:hover .kd-adr-menu { opacity: 1; }
.kd-adr-menu:hover { color: #292c31; }
.kd-adr-body { font-size: 13.5px; color: #292c31; line-height: 1.5; margin-top: 2px; user-select: none; -webkit-user-select: none; }
.kd-adr-anrede { display: flex; gap: 16px; }
.kd-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #292c31; cursor: pointer; }
#k-adr-modal .modal-foot { justify-content: flex-end; }
/* Verknüpfungen-Liste über die volle Kartenbreite (Hover randlos, wie bei den Vorgängen): das 16px-
   Karten-Padding ausgleichen, Inhalt per Padding wieder einrücken (Andreas 04.08.2026). */
#kd-vk-list { margin-left: -16px; margin-right: -16px; }
.kd-vk-group { margin-bottom: 2px; }
.kd-vk-grouptitle { font-size: 12px; color: #9aa0a8; padding: 6px 16px 2px; }
.kd-vk-group .kd-vk-item { padding-left: 16px; padding-right: 16px; }
.kd-vk-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.kd-vk-txt b { font-weight: 400; font-size: 14px; color: #292c31; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-vk-txt span { font-size: 12.5px; color: #9aa0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-vk-menu { background: none; border: none; cursor: pointer; color: #b0b4ba; padding: 2px 4px; line-height: 1; opacity: 0; transition: opacity .12s; flex: 0 0 auto; display: inline-flex; align-items: center; }
.kd-vk-item:hover .kd-vk-menu { opacity: 1; }
.kd-vk-menu:hover { color: #5e6772; }
.kd-vk-menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-vk-self { font-weight: 600; color: #292c31; margin-bottom: 4px; }
#k-vk-modal .modal-foot { justify-content: flex-end; }
.mk-field { position: relative; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chips:not(:empty) { margin-bottom: 6px; }
.mk-chip { display: inline-flex; align-items: center; gap: 4px; background: #eaf1fb; color: #185fa5; font-size: 12.5px; padding: 3px 4px 3px 9px; border-radius: 12px; }
.mk-chip-x { background: none; border: none; color: #185fa5; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.mk-chip-x:hover { color: #0c447c; }
.mk-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: #fff; border: 1px solid #dcdfe3; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; margin-top: 2px; }
.mk-drop a { display: block; padding: 8px 12px; font-size: 13.5px; color: #292c31; text-decoration: none; }
.mk-drop a:hover { background: #f4f6f8; }
.mk-drop a.mk-new { color: #185fa5; }
.kd-kv-head { display: flex; align-items: center; gap: 6px; }
.kd-ampel { width: 10px; height: 10px; border-radius: 50%; background: #fff;
  display: block; flex: 0 0 auto; border: none; padding: 0; cursor: pointer; transform: translate(4px, 1px); }
.kd-ampel.is-gruen { background: #45B491; }
.kd-ampel.is-gelb { background: #F0B25A; }
.kd-ampel.is-rot { background: #E67370; }
.kd-ampel-wrap { position: relative; display: inline-flex; align-items: center; }
/* 🏢-Icon neben dem Namen ist der Auslöser der kleinen Status-Karte (Andreas 09.08.2026, Ampel-Punkt entfällt). */
.kd-ampel-trigger { border: none; background: none; padding: 0; margin: 0; cursor: pointer; line-height: 0; }
.kd-ampel-pop { position: absolute; top: 26px; right: 0; left: auto; z-index: 40; width: 340px; background: #fff; border: 1px solid #e4e6ea; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.14); padding: 16px 18px; text-align: left; cursor: default; }
.kd-ampel-pop-head { display: flex; align-items: center; gap: 9px; }
.kd-ampel-pop-titel { font-size: 15.5px; font-weight: 600; color: #1d2126; }
.kd-ampel-pop-sub { font-size: 13.5px; color: #6b727b; margin: 5px 0 2px; }
.kd-ampel-pop-sec { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #9aa0a8; margin: 14px 0 7px; }
.kd-ampel-pop-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f3; }
.kd-ampel-pop-foot .btn { width: 100%; }
/* Mail „Zu Anfrage / Auftrag zuordnen"-Fenster (Andreas 31.07.2026) */
.mz-searchwrap { position: relative; }
.mz-searchwrap .mz-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa0a8; pointer-events: none; }
.mz-searchwrap input { width: 100%; height: 42px; padding: 0 12px 0 36px; border: 1px solid #d0d3d8; border-radius: 10px; font-size: 14px; box-sizing: border-box; background: #fff; }
.mz-searchwrap input:focus { outline: none; border-color: #0071e3; }
.mz-results { margin-top: 10px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mz-results .deal-kunde-item { text-align: left; padding: 9px 11px; border-radius: 8px; }
.mz-results .kd-empty { padding: 14px 4px; color: #9aa0a8; }
/* Zuordnen-/Verschieben-Modale (Mail + Beleg) etwas groesser, damit die Liste nicht beschnitten wirkt
   (Andreas 01.09.2026). Scoped auf .mz-dialog - andere Modale bleiben unberuehrt. */
.modal-dialog.mz-dialog { max-width: 620px; }
.mz-dialog .mz-results { max-height: 460px; }
.kd-ampel-faktor { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.kd-ampel-fname { font-size: 14px; font-weight: 400; color: #3a3f45; flex: 1; }
.kd-ampel-fwert { font-size: 13.5px; font-weight: 400; color: #7b828c; }
.kd-ampel-fdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #1D9E75; }
.kd-ampel-fdot.is-gruen { background: #1D9E75; }
.kd-ampel-fdot.is-gelb { background: #EF9F27; }
.kd-ampel-fdot.is-rot { background: #E24B4A; }
.kd-ampel-fdot.is-grau { background: #d4d7dc; }
.kd-ampel-pop-note { font-size: 13.5px; color: #7b828c; line-height: 1.45; }
.kd-klasse-badge { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; border: none; background: #E6F1FB; color: #0C447C; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 24px; }
.kd-klasse-badge.is-empty { background: #f1f2f4; color: #b0b4ba; }
.form-msg { color: #d92d20; font-size: 13px; margin-top: 6px; }
.kd-add-btn { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: 6px; color: #7b828c; }
.kd-add-btn:hover { background: #f4f6f8; color: #5e6772; }
.kd-add-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.kd-contact-nr { font-size: 14px; color: #5e6772; margin: 0 0 12px 26px; }
.kd-contact-card .kd-card-head { margin-bottom: 0; }
.kd-contact-card .kd-card-title { align-items: flex-start; }
.kd-contact-card .kd-title-ic { margin-top: 3px; }
.kd-contact-rows { display: flex; flex-direction: column; margin: 4px -16px 0; }
.kd-row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; font-size: 14.5px; color: #292c31; text-decoration: none; user-select: none; -webkit-user-select: none; }
.kd-rowlink { cursor: pointer; }
.kd-rowlink:hover { background: rgba(158, 158, 158, 0.2); }
.kd-row-top { align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
.kd-row-top .kd-row-ic { margin-top: 3px; }
.kd-row-ic { display: inline-flex; color: #5e6772; flex-shrink: 0; }
.kd-row-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.kd-empty { color: #5e6772; font-size: 14px; }
.kd-person { display: flex; align-items: center; gap: 10px; padding: 9px 0; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; }
.kd-avatar { width: 34px; height: 34px; border-radius: 50%; background: #e9edf2; color: #55606e; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kd-person-tx { display: flex; flex-direction: column; font-size: 14.5px; color: #222; }
.kd-person-tx b { font-weight: 500; }
.kd-person-tx span { color: #5e6772; font-size: 13.5px; }
.kd-person-caret { margin-left: 4px; display: inline-flex; color: #7b828c; transition: transform 0.15s; }
.kd-person-caret svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.kd-person-toggle.is-open .kd-person-caret { transform: rotate(180deg); }
.kd-person-more { margin-left: auto; opacity: 0; background: transparent; border: none; cursor: pointer; color: #7b828c; display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: 6px; transition: opacity 0.12s, background 0.12s; transform: translate(7px, 0); }
.kd-person-item:hover .kd-person-more { opacity: 1; }
.kd-person-more:hover { background: #f4f6f8; color: #292c31; }
.kd-person-more svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; display: block; }
.kd-person-detail { display: flex; flex-direction: column; margin: 4px -16px 4px; }
/* Projektdaten-Links: wie .kd-person-detail an die Kartenkante gezogen (kd-row hat padding 0 16px). */
.kd-deal-links { display: flex; flex-direction: column; margin: 4px -16px 0; }
.kd-person-item + .kd-person-item { border-top: 1px solid #f2f3f5; }


/* Eigene Rueckfrage / Eingabe (statt Browser-Dialog, den die Desktop-App unterdrueckt).
   Bewusst schlicht: heller Kopf, kompakt — eine Rueckfrage ist kein grosses Formular. */
#kd-best .modal-dialog, #kd-frage .modal-dialog { max-width: 420px; }
#kd-best .modal-head, #kd-frage .modal-head { background: #fff; border-bottom: none; padding-bottom: 0; }
#kd-best .modal-head h2, #kd-frage .modal-head h2 { color: #1d2126; font-size: 16px; }
#kd-best .modal-close, #kd-frage .modal-close { color: #9aa0a8; }
#kd-best .modal-body, #kd-frage .modal-body { padding-top: 8px; }
#kd-best .modal-foot, #kd-frage .modal-foot { border-top: none; gap: 8px; }
/* pre-line: Zeilenumbrueche im Text werden dargestellt. Ohne das lief z. B. die Aufzaehlung der
   betroffenen Postfaecher beim Papierkorb-Leeren als eine Textwurst durch. Wirkt auf alle Nachfragen —
   auch die, die schon \n\n im Text hatten (z. B. "Ordner anlegen?"), die sahen bisher gequetscht aus. */
.kb-text { font-size: 14px; color: #5e6772; line-height: 1.5; white-space: pre-line; }
.kb-gefahr { background: #c62828; }
.kb-gefahr:hover { background: #a81f1f; }

/* Kopier-Symbol in Kontakt-Zeilen — der EINZIGE Weg zum Kopieren, seit das Rechtsklick-Menue am
   15.07.2026 entfallen ist (die Desktop-App legt bei Links ihr eigenes Menue drueber; sie sperrt
   den Rechtsklick NICHT — das war eine falsche Annahme vom 14.07.). */
.kd-row { position: relative; }
.kd-copy { margin-left: auto; padding: 0 2px; opacity: 0; color: #9aa0a8; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; border-radius: 4px; }
.kd-row:hover .kd-copy { opacity: 1; }
.kd-copy:hover { color: #0071e3; }
.kd-copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

/* ===== Login mit Hintergrund-Video (Andreas 15.07.2026) =====
   Vorher hatte die Login-Seite gar keine eigene Gestaltung: eine weisse Karte, mittig, auf grau.
   Das Video liegt auf werbekomplizen.net (siehe Kommentar in index.html), das Standbild im CRM. */
/* Standbild liegt FEST als Hintergrund, das Video legt sich darueber und blendet auf
   (Andreas' Muster aus Webflow, 15.07.2026: „hg da, video legt sich über hg").
   Vorteil gegenueber dem poster-Attribut am Video: kein harter Umschlag Bild -> Video, und wenn
   das Video gar nicht startet (Browser verweigern Autoplay hin und wieder), bleibt das Bild stehen
   statt einer leeren Flaeche. */
.view-login {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: hidden;
  background: #0c1016 url(/assets/login-video-poster.jpg) center / cover no-repeat;
}
/* fixed statt absolute: fuellt zuverlaessig das ganze Fenster, auch wenn die Karte hoeher wird.
   object-fit: cover -> das Video fuellt immer aus, egal welches Seitenverhaeltnis das Fenster hat.
   opacity 0 -> das Bild darunter ist zu sehen; die Klasse "laeuft" setzt das Programm, sobald das
   Video wirklich spielt (siehe app.js, loginVideoStarten). */
.login-video    { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
                  opacity: 0; transition: opacity .8s ease; }
.login-video.laeuft { opacity: 1; }
/* Anmeldefenster im Glas-Stil (Andreas 15.07.2026: „apple liquid glass").
   KEIN Schleier ueber dem Video — stattdessen traegt die Karte selbst die Lesbarkeit.
   Wie das Glas entsteht:
     background  = dunkle, halbdurchsichtige Scheibe (die Szene schimmert durch, bleibt aber lesbar)
     blur        = was dahinter liegt, wird milchig — das macht den Glas-Eindruck
     saturate    = die durchschimmernden Farben bleiben kraeftig statt auszugrauen
     border      = feine helle Kante ringsum, wie eine Glaskante im Licht
     inset-Schatten oben = Lichtreflex auf der Oberkante
   Dunkles Glas + heller Text, weil die Strassenszene hell und bunt ist — helles Glas mit
   dunkler Schrift waere darauf nicht lesbar. */
.login-karte {
  position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 34px;
  background: rgba(18, 22, 30, 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
/* Rundes App-Logo ueber der Ueberschrift (Andreas 15.07.2026) — Gedanke wie beim
   macOS-Anmeldebildschirm: erst das Bild, dann der Name, dann die Felder.
   Das Icon bringt seinen eigenen dunklen Grund mit und fuellt den Kreis aus (cover);
   die helle Kante ringsum haelt es im Glas-Stil der Karte. */
.login-avatar {
  width: 76px; height: 76px; margin: 4px auto 16px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.login-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-karte h1 { color: #fff; margin-bottom: 24px; text-align: center; font-size: 22px; }
/* Beschriftung steht jetzt IM Feld — die Platzhalter-Schrift braucht deshalb genug Kontrast,
   darf aber nicht wie ein ausgefuellter Wert aussehen. */
.login-karte input::placeholder { color: rgba(255, 255, 255, 0.5); }
.login-karte input[type="email"],
.login-karte input[type="password"],
.login-karte input[type="text"] {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  /* Runde Ecken wie beim Anmelden-Knopf und Luft nach links, damit die Schrift nicht am Rand
     klebt (Andreas 30.07.2026). Gilt auch fuer das Feld des 2FA-Codes. */
  border-radius: 8px;
  padding: 9px 13px;
}
.login-karte input:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
/* Nur der Anmelden-Knopf wird hoeher (Standard sind 6px Polsterung, siehe .btn).
   Der Selektor greift ausschliesslich INNERHALB der Anmeldekarte — dort gibt es genau diesen
   einen Knopf. Alle anderen Knoepfe im CRM bleiben unberuehrt (Andreas 15.07.2026 ausdruecklich). */
.login-karte .btn { width: 100%; padding: 10px 14px; font-size: 15px; margin-top: 4px; }
/* Der Browser faerbt automatisch ausgefuellte Felder sonst gelb/weiss und zerschlaegt das Glas. */
.login-karte input:-webkit-autofill,
.login-karte input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(40, 44, 54, 0.92) inset;
  caret-color: #fff;
}

/* Zustand im Sidebar-Symbol (Andreas 15.07.2026): Leiste offen -> Flaeche dunkel, wie in macOS.
   Die Flaeche steckt immer im Symbol (ICONS.sidebar in app.js) und wird hier nur sichtbar geschaltet —
   das ist noetig, weil renderIcons ein bereits gezeichnetes Symbol nicht ersetzt.
   Muss `fill: none` aus `.k-icon-btn svg` schlagen, deshalb der laengere Selektor. */
.sb-fill { fill: none; stroke: none; }
/* Gilt fuer BEIDE Knopf-Sorten: .k-icon-btn (Mail-Kopf) und .tb-icon-btn (Topbar oben).
   Muss `fill: none` aus deren svg-Regeln schlagen, daher `button.is-offen`. */
button.is-offen .sb-fill { fill: currentColor; }

/* Klasse (A/B/C) und Potenzial (hoch/mittel/niedrig) im Ampel-Fenster (Andreas 15.07.2026).
   Drei Knoepfe statt Aufklappmenue — bei drei Moeglichkeiten sieht man den Stand sofort, ohne zu
   klicken (Andreas' Wahl). Nochmal auf den aktiven klicken setzt zurueck. */
.kd-wahl { display: flex; gap: 6px; }
.kd-wahl-btn {
  flex: 1; padding: 6px 0; font-size: 13px; cursor: pointer;
  border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; color: #5e6772;
}
.kd-wahl-btn:hover { background: #f4f6f8; }
.kd-wahl-btn.is-an { background: #0071e3; border-color: #0071e3; color: #fff; }

/* Ordner mit Unterordnern auf-/zuklappen (Andreas 15.07.2026).
   Gleiche Optik wie der Postfach-Pfeil (.mo-pfeil), nur kleiner und in der Zeile.
   .mo-upfeil-leer haelt bei Ordnern OHNE Unterordner denselben Platz frei — sonst springen
   deren Namen gegenueber den aufklappbaren nach links. */
.mo-upfeil { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; color: #9aa0a8; }
.mo-upfeil svg { width: 11px; height: 11px; stroke: currentColor; fill: none; transition: transform .12s; }
.mo-upfeil.auf svg { transform: rotate(90deg); }
.mo-upfeil:hover { color: #1d2126; }
.mo-upfeil-leer { flex: 0 0 auto; width: 11px; }

/* Anhaenge im Mail-Fenster (Andreas 15.07., „Weg 2"): Dokumente, die schon beim Kunden liegen.
   Chips unter dem Text, jedes mit Kreuz zum Entfernen. */
.mail-anh-leiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.mail-anh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px 6px 4px 8px;
  font-size: 12px; color: #5e6772; background: #fff; max-width: 260px;
}
.mail-anh-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex: 0 0 auto; }
.mail-anh-weg {
  border: none; background: none; cursor: pointer; color: #9aa0a8;
  font-size: 15px; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.mail-anh-weg:hover { color: #c62828; }

/* „Neue E-Mail" (Andreas 15.07.): breiteres Fenster als die Standard-Modale — der Editor braucht
   Platz, sonst schreibt man in einer Spalte von 420px. Nutzt denselben Inhalt wie das Mail-Fenster
   in der Kontakt-Historie (mailSchreibenRender). */
.modal-dialog.modal-breit { max-width: 760px; width: 100%; }

/* Dokument anhängen — Kacheln mit Vorschau (Andreas 15.07.: „brauche immer vorschau").
   Vorschaubilder kommen von dokument-thumb.php (~15 KB statt 2 MB Original) und werden
   per loading="lazy" nur geholt, wenn die Kachel sichtbar ist. */
.anh-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px;
  max-height: 54vh; overflow-y: auto; padding: 2px;
}
.anh-kachel { cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.anh-bild {
  position: relative; aspect-ratio: 4 / 3; border: 1px solid #e4e6ea; border-radius: 8px;
  background: #f7f8f9; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.anh-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.anh-kachel:hover .anh-bild { border-color: #b9bcc2; }
.anh-kachel.is-an .anh-bild { border-color: #0071e3; box-shadow: 0 0 0 2px rgba(0,113,227,0.25); }
/* Fallback-Symbol liegt UNTER dem Bild — fehlt die Vorschau, bleibt es sichtbar */
.anh-fallback { color: #b0b5bb; }
.anh-fallback svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.anh-haken {
  position: absolute; top: 6px; left: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%;
  background: #0071e3; color: #fff; display: none; align-items: center; justify-content: center;
}
.anh-kachel.is-an .anh-haken { display: inline-flex; }
.anh-haken svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; }
.anh-sicht {
  position: absolute; top: 6px; right: 6px; z-index: 2; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px; padding: 0;
  background: rgba(255,255,255,0.9); color: #5e6772; display: none; align-items: center; justify-content: center;
}
.anh-kachel:hover .anh-sicht { display: inline-flex; }
.anh-sicht:hover { background: #fff; color: #111; }
.anh-sicht svg { width: 14px; height: 14px; stroke: currentColor; fill: none; display: block; }
.anh-titel {
  font-size: 12px; color: #1d2126; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anh-meta { font-size: 11px; color: #9aa0a8; }

/* Mail auf einen Ordner ziehen (Andreas 15.07.2026).
   Nur Ordner desselben Postfachs sind gueltiges Ziel — fremde bekommen gar keinen Rahmen,
   weil der Server nicht ueber Postfachgrenzen verschieben kann. */
.mail-row.zieht { opacity: .45; }
.mo-zeile.drop-ziel { background: #eaf1fb; box-shadow: inset 0 0 0 1px #0071e3; }

/* Suche im Mail-Kopf (Andreas' Punkt 3 der Mail-Reihenfolge, 15.07.2026).
   Optik bewusst wie .kd-dok-suche (Dokumentenliste, Zeile ~1863) — dasselbe Element soll ueberall
   gleich aussehen. Nur schmaler und niedriger, weil der Kopf mit 28px-Symbolen arbeitet. */
.mail-suche { height: 28px; box-sizing: border-box; width: 240px; min-width: 0; margin-right: 8px;
  padding: 4px 10px; border: 1px solid #d8dbe0; border-radius: 6px; font-size: 13px; font-family: inherit;
  background: #fff; color: #1d2126; }
.mail-suche::placeholder { color: #8a929c; }
.mail-suche:focus { border-color: #0071e3; outline: none; }
/* Wo liegt der Treffer — nur in der Trefferliste sichtbar */
.mail-fundort { margin-top: 3px; font-size: 11.5px; color: #8a929c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-active .mail-fundort { color: #5e6772; }
.mail-leer { padding: 16px 12px; font-size: 13px; color: #8a929c; }

/* Zertifikat (S/MIME) im Konto-Fenster (Andreas 15.07.2026).
   Rot bewusst wie .k-menu-danger (#c0261c) — dieselbe Bedeutung, dieselbe Farbe. */
.smime-stand { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #292c31; margin-bottom: 10px; }
.smime-punkt { width: 8px; height: 8px; border-radius: 50%; background: #2e9e4f; flex: 0 0 auto; }
.smime-punkt.warn { background: #d98016; }
.smime-weg { margin-left: auto; border: none; background: none; padding: 2px 6px; border-radius: 4px;
  font-family: inherit; font-size: 13px; color: #c0261c; cursor: pointer; }
.smime-weg:hover { background: #fdeaea; }
.smime-msg { margin-top: 8px; font-size: 12.5px; color: #5e6772; min-height: 16px; }
/* Datei-Auswahl im Zertifikats-Block — eigener Knopf statt des englischen System-Knopfes */
/* Etwas mehr Luft unter dem Label als die ueblichen 6px (.form-group label): Ein gefuellter Knopf
   wirkt schwerer als ein Eingabefeld mit duennem Rahmen und klebt beim gleichen Abstand optisch
   am Text (Andreas 15.07.2026: „Zertifikatsdatei klebt ganz schoen am button"). */
.smime-datei { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.smime-dateiname { font-size: 13px; color: #8a929c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Digital signiert — nur im Gesendet-Ordner (Andreas 15.07.2026).
   Gruen wie der Punkt am Zertifikat: dieselbe Aussage, dieselbe Farbe. */
.mail-schloss { flex: 0 0 auto; display: inline-flex; }
.mail-schloss svg { width: 12px; height: 12px; stroke: #0071e3; fill: none; }   /* blau, Andreas 15.07.2026 */
/* Digital signiert in der geoeffneten Mail (Andreas 15.07.2026): nur das Symbol, direkt hinter dem
   Empfaenger. Klartext braucht es nicht — das Schloss steht in der Liste fuer dasselbe, und der
   Zeiger-Hinweis erklaert es bei Bedarf. */
/* Symbol neben Text: die ZEILE richtet beide aus (align-items), das Symbol wird nicht selbst
   verschoben. vertical-align:middle stand hier vorher und zielt auf die Mitte der Kleinbuchstaben —
   das sitzt bei einem 12px-Symbol neben 12px-Text sichtbar zu hoch (Andreas 15.07.2026: „ist nicht
   auf gleicher hoehe wie empfaenger, das muss beachtet werden, allgemein").
   Dieselbe Loesung wie bei .mail-von (Uhrzeit) — gleiche Ursache, gleicher Weg. */
.mail-lese-an { display: flex; align-items: center; gap: 5px; }
.mail-lese-an > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-lese-schloss { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mail-lese-schloss svg { width: 12px; height: 12px; stroke: #0071e3; fill: none; display: block; }
/* Ungelesen-Zaehler im Kopf — blau, weil es die Zahl ist, die zum Handeln auffordert */
.mkt-un { font-size: 11px; color: #0071e3; white-space: nowrap; font-weight: 600; }

/* Kontakt-Suche im Mail-Fenster (Andreas 15.07.2026).
   Nutzt die vorhandenen Treffer-Stile (.deal-kunde-item) — nur die Lage ist anders: In einer
   Formularzeile muss die Liste ueberlagern statt die Zeile auseinanderzuschieben. */
.mail-kontakt-wahl { position: relative; flex: 1 1 auto; min-width: 0; }
.mail-kontakt-wahl > input { width: 100%; }
.mail-kontakt-wahl .deal-kunde-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px;
  z-index: 30; background: #fff; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
/* Ablage-Dialog „Bei Dokumenten ablegen": Trefferliste im normalen Fluss statt als abgeschnittenes
   Dropdown (der Dialog ist niedrig + overflow:hidden). NUR dieser Dialog per #anh-ablegen-modal —
   die geteilte .mail-kontakt-wahl-Regel oben bleibt unveraendert (Andreas 19.08.2026). */
#anh-ablegen-modal .mail-kontakt-wahl .deal-kunde-results { position: static; box-shadow: none; margin-top: 6px; }
.mail-kontakt-weg { border: none; background: none; padding: 0; width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 4px; color: #9aa0a8; font-size: 16px; line-height: 1; cursor: pointer; }
.mail-kontakt-weg:hover { background: #f2f2f2; color: #c0261c; }

/* Signatur-Zeichen (Andreas 15.07.2026, db/025).
   Blau = geprueft und gueltig. Rot = es haengt eine Unterschrift dran, die NICHT aufgeht —
   das ist verdaechtiger als gar keine, deshalb faellt sie auf. */
.mail-schloss.sig-warn svg, .mail-lese-schloss.sig-warn svg { stroke: #c0261c; }
.mail-lese-an .sig-warn { cursor: help; }

/* Unterhaltungen in der Mail-Liste (Andreas' Punkt 4, 16.07.2026).
   Vorbild Outlook: Antworten eingerueckt unter dem Kopf, ohne eigenen Aufklapper. */
/* Klickziel gross genug (Andreas 16.07.2026: „man muss aber die kleine zahl treffen").
   Vorher 1px Luft — die Zahl selbst ist nur ~8px breit, danebengetippt oeffnete die Mail statt
   aufzuklappen. Jetzt ~26px hoch und mindestens 34px breit; negative Margins halten die Zeile
   trotzdem auf ihrer Hoehe, das Ziel waechst also nach aussen statt die Zeile aufzublaehen. */
.mail-verlauf { display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; padding: 5px 8px; margin: -5px -4px -5px 0; min-width: 34px;
  border-radius: 5px; font-family: inherit; font-size: 12px; color: #0071e3; cursor: pointer; flex: 0 0 auto; }
.mail-verlauf:hover { background: #eaf1fb; }
.mail-verlauf svg { transition: transform .12s ease; }
.mail-verlauf.auf svg { transform: rotate(90deg); }
.mail-row.mail-kind { padding-left: 26px; background: #fbfbfc; border-bottom-color: #f7f7f8; }
.mail-row.mail-kind:hover { background: #f5f6f7; }
.mail-row.mail-kind.is-active { background: #eaf1fb; }

/* Absender blockieren (Andreas' Punkt 5, 16.07.2026) */
.mb-adr { font-size: 14px; font-weight: 600; color: #1d2126; margin-bottom: 14px; word-break: break-all; }
.mb-wahl { display: flex; flex-direction: column; gap: 10px; }
.mb-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e3e5e8;
  border-radius: 8px; cursor: pointer; }
.mb-opt:hover { border-color: #c8ccd2; background: #fafbfc; }
.mb-opt input { margin-top: 2px; flex: 0 0 auto; }
.mb-opt b { display: block; font-size: 13.5px; font-weight: 600; color: #1d2126; }
.mb-opt small { display: block; margin-top: 3px; font-size: 12px; color: #5e6772; line-height: 1.45; }
.mb-opt.mb-aus { opacity: .6; cursor: not-allowed; background: #fafafa; }
.mb-opt.mb-aus:hover { border-color: #e3e5e8; background: #fafafa; }
.mb-msg { margin-top: 10px; font-size: 12.5px; color: #c0261c; min-height: 16px; }
.ms-alle { font-size: 11.5px; color: #8a929c; }

/* Unzustellbar (Andreas' Punkt 9, 16.07.2026).
   Rot = endgueltig gescheitert. Orange = verzoegert, der Server versucht es weiter — der Unterschied
   entscheidet, ob Andreas handeln muss oder nur warten. */
.mail-unzustell { flex: 0 0 auto; display: inline-flex; margin-left: auto; }
.mail-unzustell svg { width: 12px; height: 12px; stroke: #c0261c; fill: none; }
.mail-unzustell.ist-warten svg { stroke: #d98016; }
.mail-unzustell + .mail-schloss, .mail-unzustell + .mail-datum { margin-left: 6px; }
.mail-fehl-hinweis { display: flex; align-items: flex-start; gap: 9px; background: #fdeaea; border-radius: 6px;
  padding: 9px 12px; margin-bottom: 12px; font-size: 13px; color: #8a1f18; }
.mail-fehl-hinweis.ist-warten { background: #fdf3e3; color: #7a5210; }
.mail-fehl-hinweis svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex: 0 0 auto; margin-top: 1px; }
.mail-fehl-hinweis b { display: block; font-size: 13px; }
.mail-fehl-hinweis small { display: block; margin-top: 2px; font-size: 12px; opacity: .9; }

/* Anhang-Kacheln mit Vorschau (Andreas 16.07.2026).
   Optik bewusst wie die Dokumenten-Kacheln beim Kontakt — dasselbe Ding soll ueberall gleich aussehen. */
.mail-anh-kachel { position: relative; display: flex; flex-direction: column; gap: 4px; width: 108px;
  padding: 8px; border: 1px solid #e3e5e8; border-radius: 8px; text-decoration: none; background: #fff; }
.mail-anh-kachel:hover { border-color: #0071e3; background: #fafbfc; }
/* Bild UEBER dem Symbol (gleiches Muster wie .anh-bild beim Schreiben-Fenster): Faellt das Bild weg
   (onerror), liegt das Symbol darunter schon bereit — ohne Sprung, ohne leere Flaeche. */
.mail-anh-bild { position: relative; display: flex; align-items: center; justify-content: center; height: 62px;
  border-radius: 5px; background: #f5f6f7; overflow: hidden; color: #8a929c; }
.mail-anh-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mail-anh-fb { display: inline-flex; }
.mail-anh-bild svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.mail-anh-name { font-size: 11.5px; color: #1d2126; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-anh-gr { font-size: 11px; color: #8a929c; }
.mail-anh-dl, .mail-anh-ablegen { position: absolute; top: 5px; width: 20px; height: 20px; border-radius: 5px;
  background: rgba(255,255,255,.92); display: none; align-items: center; justify-content: center; color: #5e6772; }
.mail-anh-dl { right: 5px; }
.mail-anh-ablegen { right: 29px; }   /* links neben dem Download-Pfeil */
.mail-anh-kachel:hover .mail-anh-dl, .mail-anh-kachel:hover .mail-anh-ablegen { display: inline-flex; }
.mail-anh-nuronline { position: absolute; top: 5px; left: 5px; z-index: 2; font-size: 10px; line-height: 1;
  background: #f0f1f3; color: #8a929c; border: 1px solid #e0e0e0; border-radius: 5px; padding: 3px 6px; font-weight: 600; }
.mail-anh-kachel.is-nuronline { opacity: .88; cursor: default; }
.mail-anh-dl:hover, .mail-anh-ablegen:hover { background: #fff; color: #0071e3; }
.mail-anh-dl svg, .mail-anh-ablegen svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.aa-datei { font-size: 13.5px; font-weight: 600; color: #1d2126; margin-bottom: 14px; word-break: break-all; }

/* „An"-Feld: ein Tippfeld mit Adress-Vorschlaegen (Andreas 16.07.2026 — „email an ist echt noch eine
   katastrophe"). Ersetzt den Auswahlkasten + das winzige Tippfeld nebeneinander. */
.mail-an-wahl { position: relative; flex: 1 1 auto; min-width: 0; }
.mail-an-wahl > input { width: 100%; }
/* Pfeilchen im Feld, sobald der Kontakt MEHRERE Adressen hat (Andreas 17.07.2026). Seit die Liste
   zugeklappt startet, sieht man dem Feld sonst nicht an, dass es etwas zu waehlen gibt. Gleiche
   Grafik und Position wie beim „Von"-Feld darueber (~Zeile 1857) — dort bedeutet der Pfeil dasselbe.
   Bewusst nur Deko: der Klick ins Feld klappt die Liste ohnehin auf, ein eigener Knopf waere doppelt. */
.mail-an-wahl.hat-wahl > input { padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b828c' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; }
.mail-an-vorschlaege { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30;
  background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.10);
  max-height: 264px; overflow-y: auto; overflow-x: hidden; }
.mail-an-vorschlaege:empty { display: none; }
.mail-an-vor { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: none;
  background: none; padding: 8px 12px; font-family: inherit; cursor: pointer; border-bottom: 1px solid #f2f3f5; }
.mail-an-vor:last-child { border-bottom: none; }
.mail-an-vor:hover { background: #f0f4f9; }
.mail-an-vor-name { font-size: 14px; color: #1d2126; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-an-vor-mail { font-size: 12px; color: #8a9098; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Empfaenger-Chips (Andreas 19.07.2026): mehrere Adressen im „An"-Feld. Die Box ersetzt das einzelne
   Eingabefeld — Chips und Tippfeld liegen zusammen und brechen bei Bedarf um. */
.mail-an-box { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; border-bottom: 1px solid #ececee; padding-bottom: 6px; min-width: 0; }
.kd-hist-mailrow .mail-an-box > input { flex: 1 1 80px; border: none; border-bottom: none; outline: none; font-size: 14px; font-family: inherit; color: #1d1d1f; background: transparent; min-width: 80px; padding: 2px 0; }
.mail-an-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; background: #eef1f6; border-radius: 5px; padding: 2px 3px 2px 8px; font-size: 13px; color: #1d1d1f; }
.mail-an-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-an-chip-weg { border: none; background: none; cursor: pointer; color: #8a9099; font-size: 15px; line-height: 1; padding: 0 3px; }
.mail-an-chip-weg:hover { color: #d23b3b; }

/* Gespraechsverlauf unter der geoeffneten Mail (Andreas 16.07.2026, Punkt 16).
   Original und Antwort zusammen, ueber Ordnergrenzen. Eingeklappte Karten, Klick oeffnet. */
.mail-verlauf-box { border-top: 1px solid #eee; margin-top: 16px; padding-top: 4px; }
.mail-verlauf-titel { font-size: 12px; font-weight: 600; color: #8a929c; text-transform: uppercase; letter-spacing: .04em; padding: 12px 0 8px; }
/* Jede Verlauf-Nachricht als eigene KARTE (Andreas 16.07.2026: „kann man das nicht in karten machen,
   so kann man das auseinander halten"). Klarer Rahmen, damit man die Nachrichten unterscheidet;
   Kopfzeile leicht grau abgesetzt wie bei Apple. */
.mail-verlauf-titel { margin-bottom: 10px; }
.mail-thread-msg { border: 1px solid #e3e5e8; border-radius: 10px; margin-bottom: 12px; overflow: hidden; background: #fff; }
.mail-thread-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f7f8fa; border-bottom: 1px solid #eceef0; }
.mail-thread-von { font-size: 13px; font-weight: 600; color: #1d2126; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kleines Etikett fuer den Ort, Andreas 16.07.2026 (Gesendet war zu gross). */
.mail-verlauf-ort { font-size: 10.5px; font-weight: 500; color: #5e6772; background: #eceef1; border-radius: 4px; padding: 1px 6px; white-space: nowrap; flex: 0 0 auto; }
.mail-thread-datum { font-size: 11.5px; color: #9aa0a8; white-space: nowrap; margin-left: auto; }
.mail-thread-an { font-size: 12px; color: #8a929c; padding: 8px 14px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-thread-msg .mail-anh { padding: 8px 14px 0; }
.mail-thread-msg .mail-frame { width: 100%; min-height: 20px; border: none; padding: 8px 14px 12px; box-sizing: border-box; }
.mail-verlauf-lade { padding: 10px 14px; font-size: 12px; color: #9aa0a8; }

/* Mail-Eintraege in der Kontakt-Historie (Andreas 16.07.2026: Mail-Ablage am Kontakt) */
.kd-hist-mail { cursor: pointer; }
.kd-hist-mail .kd-hist-typ { font-weight: 400; font-size: 11px; }
.kd-hist-mail .kd-hist-item-head { margin-bottom: 1px; }
.kd-hist-clip { display: inline-flex; align-items: center; margin-left: 6px; }
.kd-hist-clip svg { width: 13px; height: 13px; stroke: #9aa0a8; fill: none; }
.kd-hist-mailbetreff { display: block; font-weight: 500; }
.kd-hist-mailwer { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
.kd-hist-mailvor { display: block; font-size: 12px; opacity: .55; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mail im vorhandenen Vorschau-Fenster (dok-vorschau-overlay): weisses Blatt auf grauem Grund */
.dok-vorschau-body.mail-vorschau-body { display: block; overflow: auto; padding: 30px 0; }
.mail-vorschau-blatt { max-width: 820px; width: 100%; margin: 0 auto; background: #fff; color: #1a1a1a;
  border-radius: 12px; padding: 30px 36px 36px; box-sizing: border-box; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.mail-vorschau-kopf { padding: 0 0 14px; margin-bottom: 18px; border-bottom: 1px solid #ececec; }
.mail-vorschau-kopf .mail-lese-meta { color: #555; font-size: 13px; line-height: 1.6; }
.mail-vorschau-frame { display: block; width: 100%; border: 0; background: #fff; }

/* Vorschau-Fenster: Scrollen bleibt im Fenster, springt nicht auf die CRM-Seite dahinter (Andreas 16.07.2026) */
.dok-vorschau-overlay, .dok-vorschau-body { overscroll-behavior: contain; }

/* Seiten-Scrollen sperren, solange die Mail-Vorschau offen ist (Andreas 16.07.2026) */
html.vorschau-offen { overflow: hidden; }

/* Potenzial-Zeichen in der Ampel-Pille leicht anheben, damit +/- optisch mittig steht (Andreas 16.07.2026) */
.kd-ampel-pot { position: relative; top: -1px; }

/* Sprachnotiz — Aufnahme-Editor + Abspieler in der Historie (Andreas 16.07.2026) */
.kd-sprach { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.kd-sprach-mount { display: flex; flex-direction: column; gap: 12px; }
.kd-sprach-status[hidden], .kd-sprach-player[hidden] { display: none !important; }
/* Der Sprachnotiz-Block hat kein Eingabefeld -> das Floating-Label-Muster (absolutes Label) passt hier
   nicht, sonst liegt der Aufnahme-Knopf unter dem Label (Andreas 17.07.2026). Label wieder normal setzen. */
.modal-body .form-group.kd-erinn-sprach:not(.k-neu-toggle):not(.form-group-inline) { padding-top: 0; }
.modal-body .form-group.kd-erinn-sprach:not(.k-neu-toggle):not(.form-group-inline) > label:first-child { position: static; top: auto; font-size: 11px; color: #5e6772; margin-bottom: 4px; pointer-events: auto; }
.kd-erinn-sprach-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.kd-erinn-sprach-alt audio { height: 34px; }
.kd-erinn-sprach-del { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; color: #E24B4A; cursor: pointer; border-radius: 6px; }
.kd-erinn-sprach-del:hover { background: #fbeceb; }
.kd-erinn-sprach-del svg { width: 15px; height: 15px; stroke: #E24B4A; fill: none; stroke-width: 1.8; }
.kd-erinn-sprach-hinweis { font-size: 12px; color: #8a94a6; }
.kd-wu-sprach { display: inline-flex; vertical-align: middle; margin-left: 4px; position: relative; top: -1px; }
.kd-wu-sprach svg { width: 12px; height: 12px; stroke: #8a94a6; fill: none; stroke-width: 1.8; }
.inbox-exp-audio { height: 34px; margin-top: 8px; max-width: 260px; display: block; }
.wdh-mark { display: inline-flex; vertical-align: middle; margin-left: 4px; position: relative; top: -1px; }
.wdh-mark svg { width: 12px; height: 12px; stroke: #8a94a6; fill: none; stroke-width: 1.8; }
.push-status { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; margin-bottom: 12px; }
.push-status.push-gruen { background: #e6f6ea; color: #1c7a3a; }
.push-status.push-gelb { background: #fdf3e0; color: #97640f; }
.push-status.push-rot { background: #fdeaea; color: #b0261c; }
.push-hilfe { font-size: 12.5px; color: #6b7480; line-height: 1.5; margin: 0; }
.kd-sprach-status { font-size: 13.5px; color: #55606e; }
.kd-sprach-status[hidden] { display: none; }
.kd-sprach-ctrl { display: flex; gap: 12px; align-items: center; }
.kd-sprach-ctrl .btn { display: inline-flex; align-items: center; gap: 7px; }
.kd-sprach-ctrl .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Bereit-Zustand: runder Aufnahme-Knopf (klein, ohne Hover-Effekt) */
.kd-sprach-recbtn { width: 34px; height: 34px; border-radius: 50%; border: none; background: #E24B4A; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kd-sprach-recbtn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.9; }
/* Aufnahme-Zustand: Wellenform-Pille wie bei WhatsApp */
.kd-sprach-live { display: flex; align-items: center; gap: 12px; width: 100%; background: #f4f6f9; border: 1px solid #e6e9ef; border-radius: 999px; padding: 7px 9px 7px 16px; }
.kd-sprach-dot { width: 9px; height: 9px; border-radius: 50%; background: #E24B4A; flex: none; animation: sprachPuls 1.1s ease-in-out infinite; }
.kd-sprach-live.is-paused .kd-sprach-dot { animation: none; opacity: .4; }
@keyframes sprachPuls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.75); } }
.kd-sprach-time { font-size: 13px; font-variant-numeric: tabular-nums; color: #3a424e; min-width: 34px; flex: none; }
.kd-sprach-wave { flex: 1 1 auto; height: 34px; min-width: 60px; display: block; }
.kd-sprach-btns { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.kd-sprach-ic { height: 30px; min-width: 30px; padding: 0 4px; border: none; background: transparent; color: #3a424e; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.kd-sprach-ic svg { width: 16px; height: 16px; stroke: none; fill: currentColor; }
.kd-sprach-ic-stop { color: #E24B4A; }
.kd-sprach-ic-stop svg { fill: #E24B4A; stroke: none; }
.kd-sprach-player { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kd-sprach-player audio { height: 36px; }
.kd-sprach-del { display: inline-flex; align-items: center; gap: 7px; }
.kd-sprach-del svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kd-sprach-neu { display: inline-flex; align-items: center; gap: 7px; }
.kd-sprach-neu svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kd-sprach-foot { display: flex; align-items: center; gap: 8px; }
.kd-sprach-foot-r { margin-left: auto; display: inline-flex; gap: 4px; }
.kd-hist-sprach .kd-hist-audio { width: 100%; max-width: 420px; height: 36px; margin-top: 6px; display: block; }

/* ===== Kalender — FullCalendar 6 (Andreas 17.07.2026): in einer Card wie die Kontakte ===== */
.kal-card { height: calc(100vh - 80px); padding: 14px 16px; overflow: hidden; display: flex; flex-direction: column; }
/* Social Media (Seite 2): eigene, vom Kalender unabhaengige volle-Hoehe-Karte */
.sm-card { height: calc(100vh - 80px); padding: 14px 16px; overflow: hidden; display: flex; flex-direction: column; }
/* Kalender-Filter ist jetzt ein Icon-Knopf in der Kopfzeile (siehe .fc-kalFilterBtn-button unten) */
.kal-fc { flex: 1; min-height: 0; --fc-border-color: #e8ebef; }
.kal-fc .fc-toolbar.fc-header-toolbar { margin-bottom: 12px; }
.kal-fc .fc-toolbar-title { font-size: 17px; font-weight: 600; color: #4a5563; }
/* Alle Toolbar-Buttons: hell, gleicher Radius, klein, einzeln (mit Lücke) */
.kal-fc .fc-button { font-size: 12px; padding: 5px 9px; border-radius: 8px !important; box-shadow: none; background: #f4f6f8 !important; border: none !important; color: #5e6772 !important; font-weight: 500; }
.kal-fc .fc-button:hover { background: #e7ebf0 !important; }
.kal-fc .fc-button:focus { box-shadow: none; }
.kal-fc .fc-button-primary:not(:disabled).fc-button-active { background: #0071e3 !important; color: #fff !important; }
.kal-fc .fc-button-group > .fc-button + .fc-button { margin-left: 5px; }
/* „Heute": auf der aktuellen Woche (deaktiviert) hell/dezent, in anderer Woche (klickbar) dunkler */
.kal-fc .fc-today-button { background: #f4f6f8 !important; color: #8a929c !important; opacity: 1 !important; }
.kal-fc .fc-today-button:not(:disabled) { background: #cdd4dc !important; color: #3a424c !important; }
.kal-fc .fc-today-button:hover:not(:disabled) { background: #bfc7d1 !important; }
/* Pfeile schmaler */
.kal-fc .fc-prev-button, .kal-fc .fc-next-button { padding: 5px 7px; }
/* „+" ganz rechts, blau; Plus als zentriertes Hintergrund-SVG (kein Text -> kein doppeltes „++") */
.kal-fc .fc-neuTermin-button { width: 30px; height: 30px; padding: 0 !important; margin-left: 8px !important; font-size: 0; background: #0071e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat !important; }
.kal-fc .fc-neuTermin-button:hover { background: #0063c6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat !important; }
.kal-fc .fc-kalFilterBtn-button { width: 30px; height: 30px; padding: 0 !important; margin-left: 10px !important; font-size: 0; border: none !important; background: #f4f6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e6772' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 9v7l-4-2v-5z'/%3E%3C/svg%3E") center/16px no-repeat !important; }
.kal-fc .fc-kalFilterBtn-button:hover { background: #e7ebf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e6772' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 9v7l-4-2v-5z'/%3E%3C/svg%3E") center/16px no-repeat !important; }
.kal-fc .fc-kalFilterBtn-button.is-active { background: #0071e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 9v7l-4-2v-5z'/%3E%3C/svg%3E") center/16px no-repeat !important; }
/* feste Stundenhöhe -> Kalender scrollt (Servicezeiten im Blick, Rest scrollen) */
.kal-fc .fc-timegrid-slot { height: 41px; }
/* heutiger Tag: statt Gelb ein ganz leichtes Blau */
.kal-fc .fc-day-today { background: rgba(0,113,227,.05) !important; }
/* nur die gepunktete Halbstunden-Linie in der Uhrzeit-Spalte weg; die Linie über der vollen Stunde bleibt */
.kal-fc .fc-timegrid-slot-label.fc-timegrid-slot-minor { border-top-style: none !important; }
/* Tages-Kopfzeile oben: ganz leichter Hintergrund */
.kal-fc .fc-col-header-cell { background: #f7f8fa; }
/* Uhrzeit-Spalte einen Tick breiter */
.kal-fc .fc-timegrid-axis-cushion, .kal-fc .fc-timegrid-slot-label-cushion { padding-left: 7px; padding-right: 11px; font-weight: 500; font-size: 14px; color: #7b828c; }
/* nur die Termin-Farben nach Status, sonst FullCalendar-Standard */
.kal-fc .fc-st-geplant          { background: #0071e3 !important; border-color: #0071e3 !important; color: #fff !important; }
.kal-fc .fc-st-wahrgenommen     { background: #1f9d5a !important; border-color: #1f9d5a !important; color: #fff !important; }
.kal-fc .fc-st-abgesagt         { background: #b0b8c1 !important; border-color: #b0b8c1 !important; color: #fff !important; }
.kal-fc .fc-st-nicht_erschienen { background: #d0473e !important; border-color: #d0473e !important; color: #fff !important; }
/* Buchungs-Zustaende (Andreas 18.07.2026): angefragt hellblau, privat grau, Abwesenheit schraffiert */
.kal-fc .fc-st-angefragt        { background: #a9cbf2 !important; border-color: #8fbaee !important; color: #123a63 !important; }
.kal-fc .fc-st-privat           { background: #b6bcc6 !important; border-color: #a7aeb9 !important; color: #ffffff !important; }
.kal-fc .fc-st-abwesenheit      { background: repeating-linear-gradient(45deg, #eaeef3, #eaeef3 7px, #dde2e9 7px, #dde2e9 14px) !important; border-color: #cbd0d8 !important; color: #2f343b !important; }
.kal-fc .fc-st-abwesenheit .fc-event-title, .kal-fc .fc-st-abwesenheit .fc-event-time { color: #2f343b !important; font-weight: 600; }
/* Termine sind anklickbar (Doppelklick oeffnet) — Hand-Cursor macht das sichtbar. */
.kal-fc .fc-event, .kal-fc .fc-event * { cursor: pointer; }
/* Etwas mehr Luft im Termin-Feld (Andreas 22.07.2026). */
.kal-fc .fc-timegrid-event .fc-event-main { padding: 4px 7px; }
/* Abgelaufene Termine (End-Uhrzeit vorbei) blasser (Andreas 22.07.2026). */
.kal-fc .fc-vergangen { opacity: .45; }

/* ==== Verfuegbarkeit Kalender (Einstellungen) — Andreas 18.07.2026 ==== */
.verf-dialog { width: 780px; max-width: 94vw; }
.verf-tage { display: flex; flex-direction: column; margin: 2px 0 6px; }
.verf-tag { display: flex; align-items: center; gap: 16px; padding: 9px 12px; border-radius: 9px; }
.verf-tag:not(:last-child) { border-bottom: 1px solid #f0f0f2; }
.verf-tag:hover { background: #f7f9fc; }
.verf-tag-name { flex: 0 0 92px; font-size: 14px; font-weight: 600; color: #2a2f36; }
.verf-slots { display: flex; flex-direction: column; gap: 6px; }
.verf-slot { display: flex; align-items: center; gap: 6px; }
.verf-zeit { width: 116px; padding: 6px 9px; border: 1px solid #dfe1e6; border-radius: 8px; font-size: 13px; color: #1a1a1a; background: #fff; font-variant-numeric: tabular-nums; }
.verf-zeit:hover { border-color: #c4c8cf; }
.verf-zeit:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }
.verf-sep { color: #b0b5bd; padding: 0 2px; }
.verf-del { border: none; background: none; width: 22px; height: 22px; border-radius: 6px; font-size: 15px; line-height: 1; color: #b0b5bd; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.verf-slot:hover .verf-del { opacity: 1; }
.verf-del:hover { background: #fbe9e8; color: #d0473e; }
.verf-zu { font-size: 13px; color: #a2a8b0; font-style: italic; }
.verf-add { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed #d3d7dd; background: none; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; color: #0071e3; cursor: pointer; white-space: nowrap; transition: border-color .12s, background .12s; }
.verf-add:hover { border-color: #0071e3; background: #eff6ff; }
.verf-add svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.verf-summe { margin-left: auto; flex: 0 0 auto; text-align: right; font-size: 12px; color: #98a0a9; font-variant-numeric: tabular-nums; }
.verf-regeln { margin: 16px 12px 2px; display: flex; flex-direction: column; gap: 10px; }
.verf-regel-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2a2f36; }
.verf-regel-row label { font-weight: 600; flex: 0 0 186px; }
.verf-regel-row input { width: 76px; padding: 7px 9px; border: 1px solid #dfe1e6; border-radius: 8px; font-size: 13px; text-align: center; }
.verf-regel-row input:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }
.verf-regel-row span { color: #6b727b; }
.verf-regel-meet input { width: 340px; max-width: 60vw; text-align: left; }
.verf-regel-watext input { flex: 1; min-width: 0; text-align: left; }

/* Termin-Fenster: Zustaende (Andreas 18.07.2026) */
.tm-modus { display: flex; gap: 6px; margin-bottom: 14px; background: #f0f1f3; padding: 3px; border-radius: 9px; }
.tm-modus-btn { flex: 1; border: none; background: none; padding: 7px 0; border-radius: 7px; font-size: 13px; font-weight: 600; color: #6b727b; cursor: pointer; }
.tm-modus-btn.is-active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.tm-hint { font-size: 12px; color: #86909a; margin: -4px 0 12px; line-height: 1.4; }
.tm-hint-akzent { color: #0071e3; }
.tm-privat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #2a2f36; margin-top: 6px; cursor: pointer; }
.tm-privat input { width: auto; margin: 0; }
.tm-privat span { color: #86909a; font-size: 12px; }
.tm-dialog { max-width: 680px; }
.tm-dialog .modal-body { padding-top: 6px; padding-bottom: 6px; }
button.deal-kunde-item { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.tm-dialog .modal-body .form-group { margin-bottom: 12px; }
.tm-dialog .modal-body .form-group-inline { gap: 14px; }

/* Termin-Fenster D&P-Layout (Andreas 18.07.2026) */
.tm-reiter { display: flex; border-bottom: 1px solid #e5e5e7; margin: -4px 0 16px; }
.tm-reiter-btn { flex: 1; border: none; background: none; padding: 10px 0; font-size: 14px; font-weight: 500; color: #86909a; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tm-reiter-btn.is-active { color: #0071e3; border-bottom-color: #0071e3; }
.tm-zeitzeile { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tm-zeitzeile .form-group { margin-bottom: 0; }
.tm-zeitzeile input[type=date] { width: 150px; }
.tm-zeitzeile input[type=time] { width: 96px; }
.tm-zeitzeile input.tm-uhr { width: 68px; }
.tm-zeitzeile .tm-dp .dp-control { height: 30px; width: 116px; }
.dp-control.dp-disabled { pointer-events: none; opacity: 0.55; }
.tm-bis { color: #9aa0a8; align-self: flex-end; height: 30px; display: inline-flex; align-items: center; margin: 0 6px; }
.tm-privat-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #2a2f36; padding-bottom: 8px; margin-left: auto; cursor: pointer; }
.tm-privat-inline input { width: auto; margin: 0; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tm-chips:empty { display: none; }
.tm-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2f7; border-radius: 14px; padding: 3px 6px 3px 11px; font-size: 13px; color: #2a2f36; }
.tm-chip button { border: none; background: none; color: #9aa0a8; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.tm-chip button:hover { color: #d0473e; }
.tm-ort-btn { width: 100%; text-align: left; border: none; border-bottom: 1px solid #d0d3d8; background: none; padding: 4px 0 6px; font-size: 14px; color: #1a1a1a; cursor: pointer; }
.tm-ort-btn:hover { border-bottom-color: #0071e3; }
.tm-ort-menu { border: 1px solid #e5e5e7; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); margin-top: 4px; overflow: hidden; background: #fff; }
.tm-ort-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 10px 14px; font-size: 13px; color: #1a1a1a; cursor: pointer; }
.tm-ort-menu button:hover { background: #f0f7ff; color: #0071e3; }
.tm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #2a2f36; margin: 4px 0 12px; cursor: pointer; }
.tm-check input { width: auto; margin: 0; }
.tm-wh-btn { border: 1px solid #d3d7dd; background: none; width: 28px; height: 28px; border-radius: 8px; color: #86909a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tm-wh-btn:hover { border-color: #0071e3; color: #0071e3; }
.tm-wh-btn.is-active { background: #0071e3; border-color: #0071e3; color: #fff; }
.tm-wh-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; display: block; }
.tm-wh-panel { display: flex; flex-wrap: wrap; gap: 14px; background: #f7f9fc; border-radius: 9px; padding: 12px 14px; margin-top: 6px; }
.tm-wh-next { flex: 1 1 100%; font-size: 12.5px; color: #6b727b; margin-top: 2px; }
.tm-wh-next:empty { display: none; }
.tm-wh-panel .form-group { margin-bottom: 0; flex: 1; }
/* Felder mit Chips/Button (Beteiligte, Deal, Ort): festes Label statt schwebend */
.modal-body .form-group.tm-fg-static { padding-top: 0 !important; gap: 2px; }
.modal-body .form-group.tm-fg-static > label:first-child { position: static !important; top: auto !important; font-size: 11px; color: #5e6772; pointer-events: auto; }
.modal-body .form-group.tm-fg-static input { height: 30px !important; padding: 0 0 1px; line-height: 28px; }
.modal-body .form-group.tm-fg-static select { height: 30px !important; line-height: 28px; padding: 0 2px 1px; }
.tm-label-hint { color: #a2a8b0; font-weight: 400; }

/* ==== Systemlog (Einstellungen) ==== */
#systemlog-modal .modal-dialog { max-width: 720px; }
.syslog-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.syslog-select { height: 32px; border: none; border-bottom: 1px solid #d7dde5; border-radius: 0; padding: 0; background-color: transparent; }
.syslog-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; }
.syslog-empty { color: #8a929c; padding: 18px 4px; text-align: center; }
.syslog-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; background: #f7f9fc; border-radius: 8px; }
.syslog-badge { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.syslog-langsam { background: #fdf0e0; color: #9a5b12; }
.syslog-serverfehler { background: #fbe4e4; color: #a12626; }
.syslog-browserfehler { background: #efe6fb; color: #6b3fb0; }
.syslog-main { flex: 1 1 auto; min-width: 0; }
.syslog-titel { font-size: 13px; color: #2a2f36; font-weight: 500; }
.syslog-det { font-size: 12px; color: #6a727c; margin-top: 2px; word-break: break-word; }
.syslog-zeit { flex: 0 0 auto; font-size: 11px; color: #99a1ab; white-space: nowrap; }

/* ==== Auftrags-Detailseite ==== */
.pd-card-stufe { margin-top: 12px; }
.pd-kunde-rows { margin-top: 12px; }
.pd-stufe-btn { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; padding: 2px 0; font-size: 14px; font-weight: 600; color: #2a2f36; cursor: pointer; }
.pd-stufe-btn:hover { color: #000; }
.pd-stufe-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.pd-stufe-btn [data-icon] { width: 15px; height: 15px; opacity: .5; }
/* Aufgaben-Detailseite: dezente ToDo-Eingabe (kleines Plus + rahmenloses Feld, wie D&P) */
.au-todo-add-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; border-bottom: 1px solid #e5e8ec; }
.au-todo-add-ic { border: none; background: none; padding: 0; color: #8a9099; cursor: pointer; display: flex; align-items: center; }
.au-todo-add-ic:hover { color: #2a2f36; }
.au-todo-add-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.au-todo-add-row input { flex: 1; border: none; background: none; padding: 6px 0; font-size: 14px; color: #2a2f36; }
.au-todo-add-row input:focus { outline: none; }
.au-todo-add-row input::placeholder { color: #b0b5bd; }
.au-todo { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
.au-todo-grip { display: inline-flex; color: #c4c8ce; cursor: grab; opacity: 0; transition: opacity .12s; }
.au-todo-grip svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.au-todo:hover .au-todo-grip { opacity: 1; }
.au-todo.dragging { opacity: .45; }
.au-todo.drag-over { box-shadow: inset 0 2px 0 #0071e3; }
.au-todo-tx { flex: 1; font-size: 14px; color: #2a2f36; }
.au-todo-erledigt { text-decoration: line-through; color: #8a9099; }
.au-todo-actions { display: inline-flex; align-items: center; gap: 12px; visibility: hidden; }
.au-todo:hover .au-todo-actions { visibility: visible; }
.au-todo-act { border: none; background: none; padding: 0; margin: 0; color: #8a9099; cursor: pointer; display: inline-flex; align-items: center; }
.au-todo-act:hover { color: #2a2f36; }
.au-todo-act svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.au-todo-edit-inp { flex: 1; border: none; border-bottom: 1px solid #0071e3; background: none; padding: 3px 0; font-size: 14px; color: #2a2f36; }
.au-todo-edit-inp:focus { outline: none; }
.pd-beschr { white-space: pre-wrap; margin-top: 6px; color: #5e6772; }
.tm-treffer-typ { margin-left: auto; padding-left: 10px; font-size: 11px; color: #9aa0a8; flex: 0 0 auto; }
.pd-bet-gruppe { margin-bottom: 4px; }
.pd-bet-rolle { font-size: 11px; font-weight: 600; color: #9aa0a8; text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 2px; }
/* Nur im Kontakt-Übersicht-Block „Angebote & Aufträge": ab der zweiten Gruppe (z. B. „Als Kunde") 8px mehr Luft oben. Geteilte Klasse .pd-bet-rolle bleibt sonst unberührt. */
#kd-deals-body .pd-bet-rolle:not(:first-child) { margin-top: 16px; }

/* WhatsApp-Verlauf im Historie-Editor — Variante 3 (segmentierte Karteikarten) */
.wa-karten { display: inline-flex; background: #eeeeee; border-radius: 10px; padding: 3px; gap: 2px; margin: 8px 2px 5px; max-width: 100%; overflow-x: auto; }
/* Ansprechpartner-Karten links, Chat-Löschen (Mülleimer) rechts auf gleicher Höhe (Andreas 27.08.2026). */
.wa-kartenzeile { display: flex; align-items: center; gap: 8px; }
.wa-chat-del { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; border: none; background: transparent; color: #c0392b; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.wa-chat-del:hover { background: #fdeaf0; }
.wa-chat-del [data-icon] svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.wa-kart { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; border-radius: 8px; background: transparent; color: #5e6772; font-size: 12.5px; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.wa-kart.active { background: #fff; color: #1c2430; font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,45,.1); }
.wa-pkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; flex: 0 0 auto; }
.wa-verlauf { display: flex; flex-direction: column; gap: 7px; max-height: 520px; overflow-y: auto; padding: 14px; background: #f4f5f7; border-radius: 10px; }
.wa-b { position: relative; max-width: 74%; padding: 7px 11px 5px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.wa-reakt { position: absolute; bottom: -9px; right: 8px; background: #fff; border: 1px solid #eceef0; border-radius: 11px; padding: 0 4px; font-size: 13px; line-height: 19px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wa-ablegen { display: inline-block; margin-top: 6px; padding: 3px 8px; font-size: 12px; font-family: inherit; color: #1a6bff; background: rgba(26,107,255,.08); border: none; border-radius: 7px; cursor: pointer; }
.wa-ablegen:hover { background: rgba(26,107,255,.15); }
.wa-ablegen.is-ok { color: #1a6b3a; background: rgba(26,160,80,.12); cursor: default; }
.wa-ablegen[disabled] { opacity: .6; cursor: default; }
.wa-b-ein { align-self: flex-start; background: #fff; color: #1c2430; border-bottom-left-radius: 3px; box-shadow: 0 1px 1px rgba(20,30,45,.05); }
.wa-b-aus { align-self: flex-end; background: #e9f2fd; color: #1c2430; border-bottom-right-radius: 3px; }
.wa-b-txt { white-space: pre-wrap; word-break: break-word; }
.wa-b-meta { font-size: 10.5px; color: #98a0aa; text-align: right; margin-top: 3px; }
.wa-b-meta .wa-status { margin-left: 5px; text-transform: capitalize; }
.wa-eingabe { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.wa-eingabe .wa-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; border: none; background: transparent; color: #5a636e; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.wa-eingabe .wa-icon-btn:hover { background: #eef1f4; }
.wa-eingabe .wa-icon-btn.is-rec { color: #e0245e; background: #fdeaf0; animation: waRecPuls 1s ease-in-out infinite; }
@keyframes waRecPuls { 50% { opacity: .55; } }
.wa-rec-box { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wa-rec-actions { display: flex; gap: 8px; justify-content: flex-end; }
.wa-eingabe textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; padding: 9px 12px; border: 1px solid #d5dae1; border-radius: 10px; font-family: inherit; font-size: 14px; line-height: 1.4; }
.wa-eingabe textarea:focus { outline: none; border-color: #1f5fd6; }
.wa-eingabe .btn { flex: 0 0 auto; align-self: stretch; }
.wa-img { max-width: 420px; max-height: 480px; border-radius: 8px; display: block; cursor: pointer; }
.wa-audio { max-width: 300px; display: block; }
.wa-dok { color: #1f5fd6; text-decoration: none; font-weight: 600; }
.wa-dok:hover { text-decoration: underline; }
.wa-cap { margin-top: 4px; }
.wa-media { color: #98a0aa; font-style: italic; }
.wa-media { color: #7a828c; font-style: italic; }

/* Rechnungen-Liste (Belege) */
.k-tab-rechnungen th.rech-num, .k-tab-rechnungen td.rech-num { text-align: right; font-variant-numeric: tabular-nums; }
.rech-proj { color: #9aa0a8; font-weight: 400; }
.rech-nr-geplant { color: #9aa0a8; }
.k-tab-rechnungen th.rech-versand, .k-tab-rechnungen td.rech-versand { text-align: center; }
.rech-versand [data-icon] svg { width: 16px; height: 16px; stroke: #7a828c; fill: none; stroke-width: 1.7; vertical-align: middle; }
/* Text-Buttons im Listenkopf (z. B. Angebote / Auftragsbestätigungen auf der Angebote-Seite) */
.k-txt-btn { background: #e7eaf0; border: none; border-radius: 8px; padding: 6px 12px; font-size: 13px; color: #3e424a; cursor: pointer; font-family: inherit; white-space: nowrap; }
.k-txt-btn:hover { background: #dde1e9; }
.k-txt-btn.is-active { background: #0071e3; color: #fff; }
/* Umsatzentwicklung-Karte (Dashboard) */
.us-legend { text-align: center; font-size: 12px; color: #7a828c; margin-bottom: 2px; }
/* Home-Startseite: Legende rechts oben auf Hoehe der Ueberschrift (Agentur-Seite bleibt zentriert) */
#start-umsatz-card, .us-card { position: relative; }
#start-umsatz-card .us-legend, .us-card .us-legend { position: absolute; top: 20px; right: 22px; margin: 0; text-align: right; }
#start-umsatz-card .us-leg:last-child, .us-card .us-leg:last-child { margin-right: 0; }
/* Diagramm unten in der Karte statt mittig schwebend */
#start-umsatz-card .widget-body, .us-card .widget-body { display: flex; flex-direction: column; justify-content: flex-end; }
.us-leg { display: inline-flex; align-items: center; gap: 5px; margin: 0 8px; }
.us-leg::before { content: ''; width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.us-leg-cur::before { background: #a9cce8; }
.us-leg-plan::before { background: #d8e9f6; }
.us-leg-vor::before { background: #d8d8d8; }
.us-chart { width: 100%; height: auto; display: block; }
/* Werte ueber den Balken: nur beim Ueberfahren des jeweiligen Balkens sichtbar.
   Die Zahlen liegen als letzte Ebene ueber allen Balken (SVG kennt kein z-index),
   .us-hit ist die unsichtbare Flaeche ueber dem Balken, die den Hover ausloest. */
.us-bar .us-hit { fill: transparent; pointer-events: all; }
.us-bar .us-val { opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.us-bar:hover .us-val { opacity: 1; }
.rech-kein-kunde { color: #c0392b; }
.rech-faellig { color: #66696c; }
.beleg-ueberfaellig .rech-faellig { color: #c0392b; font-weight: 600; }
/* Geplante + stornierte Belege blasser — Kunde und Status bleiben kräftig */
.k-tab-rechnungen tr.beleg-blass td { opacity: 0.72; }
.k-tab-rechnungen tr.beleg-blass td.k-col-name,
.k-tab-rechnungen tr.beleg-blass td.k-col-stufe { opacity: 1; }
/* Gemahnt/Erinnert: erste drei Spalten (Datum, Fällig, Nr.) rote Schrift */
.k-tab-rechnungen tr.beleg-mahnzeile td:nth-child(1),
.k-tab-rechnungen tr.beleg-mahnzeile td:nth-child(2),
.k-tab-rechnungen tr.beleg-mahnzeile td:nth-child(3) { color: #c0392b; }
/* Status-Zelle: gleiche Optik wie Deal-/Auftragsstufen (volle Zelle, farbiger Hintergrund) */
.k-stufecell.k-belegstatus-offen     { background: #f2f3f5; }
.k-stufecell.k-belegstatus-erinnert  { background: #ffe8cc; }
.k-stufecell.k-belegstatus-gemahnt   { background: #fbdada; }
.k-stufecell.k-belegstatus-letzte_mahnung { background: #fbdada; }
.k-stufecell.k-belegstatus-bezahlt   { background: #cbe9d2; }
.k-stufecell.k-belegstatus-geplant   { background: #eaf1fb; }
.k-stufecell.k-belegstatus-storniert { background: #fbdada; }
/* Angebote-Status (D&P: Bestätigt grün, Abgelehnt/Weitergeführt grau) */
.k-stufecell.k-belegstatus-bestaetigt     { background: #cbe9d2; }
.k-stufecell.k-belegstatus-abgelehnt      { background: #e6e8eb; }
.k-stufecell.k-belegstatus-beendet        { background: #d7dbe0; }
.k-stufecell.k-belegstatus-weitergefuehrt { background: #e6e8eb; }
.k-stufecell.k-belegstatus-abgerechnet    { background: #eaf1fb; }
.k-stufecell.k-belegstatus-entwurf        { background: #f2f3f5; }
.k-stufecell.k-belegstatus-erledigt       { background: #cbe9d2; }
.k-stufecell.k-belegstatus-teilbezahlt    { background: #fff3bf; }
/* Auftragsbestätigungen-Status (D&P: Versendet grün, Storniert grau) */
.k-stufecell.k-belegstatus-versendet      { background: #cbe9d2; }
/* Storno-Status „erstattet"/„verrechnet" wie „versendet" grün (Andreas 11.08.2026) */
.k-stufecell.k-belegstatus-erstattet      { background: #cbe9d2; }
.k-stufecell.k-belegstatus-verrechnet     { background: #cbe9d2; }
/* Auftrag-Status „Pause" (Andreas 11.08.2026) */
.k-stufecell.k-projektstufe-pause         { background: #eef2f6; }

/* ==== 2-Faktor-Anmeldung (Andreas 28.07.2026) ==== */
.bd-2fa { margin-top: 18px; border-top: 1px solid #ececee; padding-top: 14px; }
.bd-2fa-h { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #1d2126; }
.bd-2fa-status { font-size: 13.5px; color: #5e6772; margin-bottom: 10px; }
.bd-2fa-status.is-an { color: #1a8754; font-weight: 500; }
.bd-2fa-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tfa-flow:not(:empty) { margin-top: 12px; }
.tfa-setup p, .tfa-backup p, .tfa-pass p { font-size: 13.5px; color: #4f565f; margin: 8px 0 6px; }
.tfa-qr { display: flex; justify-content: center; margin: 4px 0 8px; }
.tfa-qr svg { width: 190px; height: 190px; }
.tfa-oder { font-size: 12.5px; color: #8a9098; text-align: center; margin: 4px 0 6px !important; }
.tfa-secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 1px; background: #f2f3f5; border-radius: 8px; padding: 10px 14px; text-align: center; user-select: all; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; background: #f2f3f5; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.tfa-msg { display: inline-block; margin-left: 10px; font-size: 13px; color: #a01818; }
.login-2fa-hinweis { font-size: 13.5px; color: #5e6772; margin: 0 0 10px; }

/* Standard-Anhang (AGB) in den Einstellungen Angebote & Rechnungen — eine ruhige Zeile
   mit Symbol links, Dateiname in der Mitte, Aktionen rechts. */
.ar-anhang {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: 2px 0 16px;
  border: 1px solid #e4e6ea; border-radius: 10px; background: #fbfbfc;
}
.ar-anhang-ic { display: inline-flex; color: #6b727b; }
.ar-anhang-ic.ist-leer { color: #c3c7cd; }
.ar-anhang-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ar-anhang-name { flex: 1 1 auto; font-size: 14px; color: #1d1d1f; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-anhang-leer { flex: 1 1 auto; font-size: 14px; color: #9aa0a8; }
.ar-anhang-akt { display: flex; gap: 8px; flex: 0 0 auto; }
.ar-anhang-btn {
  border: 1px solid #d7dade; background: #fff; color: #292c31;
  font-size: 13px; font-family: inherit; padding: 6px 12px; border-radius: 7px; cursor: pointer;
}
.ar-anhang-btn:hover { background: #f4f6f8; border-color: #c3c7cd; }
/* Haken-Zeile, die neben einem Feld steht: auf Feldhoehe ausrichten statt oben zu kleben. */
.ar-chk-zeile { display: flex; align-items: flex-end; padding-bottom: 8px; }

/* Aufgaben-Uebersicht beim Auftrag: Gruppen wie D&P, Aktionen erst bei Hover (Andreas 04.08.2026) */
/* Volle Kartenbreite nutzen (die kd-card hat 16px Innenabstand) -> Hover ohne weissen Rand links/rechts */
#pd-aufg-uebersicht { margin: 0 -16px -16px; }
.pd-aufg-grp { margin-bottom: 0; }
.pd-aufg-leer { min-height: 12px; }   /* leere Gruppe: kleiner Drop-Bereich, kein Hinweistext (Regel 15) */
.pd-aufg-grp:last-child { margin-bottom: 0; }
/* Flache Liste: Aufgaben-Zeilen weiss, nur bei Hover grau; der leichte Hintergrund liegt auf der Gruppenzeile */
.pd-aufg-grp .k-tab { border: none; border-radius: 0; box-shadow: none; background: transparent; }
.pd-aufg-grp .k-tab tbody td { border-bottom: 1px solid #edeff2; }
.pd-aufg-grp .k-tab tbody td:first-child { padding-left: 16px; }
.pd-aufg-grp .k-tab tbody td.k-col-more { padding-right: 16px; }
.pd-aufg-grp .k-tab tbody tr:last-child td { border-bottom: none; }
.pd-aufg-grp .k-tab tbody tr:hover { background: #f2f4f6; }
.pd-aufg-grphead { display: flex; align-items: center; gap: 2px; padding: 10px 16px; background: #f3f3f4; }
.pd-aufg-grptitel { flex: 1; font-weight: 600; font-size: 14.5px; color: #3a3f47; }
.pd-aufg-zr-lbl { color: #b3b8bf; font-size: 12px; }
.pd-aufg-zr-val { color: #8a9099; font-size: 12.5px; }
.pd-aufg-grpactions { display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity 0.12s; }
.pd-aufg-grphead:hover .pd-aufg-grpactions,
.pd-aufg-grphead:focus-within .pd-aufg-grpactions { opacity: 1; }
.pd-aufg-grpbtn { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: #8a9099; cursor: pointer; padding: 4px; border-radius: 5px; }
.pd-aufg-grpbtn svg { width: 17px; height: 17px; }
.pd-aufg-grpbtn.au-grp-up svg { transform: rotate(180deg); }
.pd-aufg-grpbtn:hover { background: #eef0f2; color: #333; }
.pd-aufg-grpbtn:disabled { opacity: 0.25; cursor: default; }
.pd-aufg-grpadd { border: none; background: none; color: #4b6cb7; font-size: 12.5px; cursor: pointer; padding: 2px 8px; white-space: nowrap; }
.pd-aufg-grpadd:hover { text-decoration: underline; }
.pd-aufg-zeitraum { color: #9aa0a8; font-size: 12.5px; white-space: nowrap; text-align: right; width: 1%; }
.pd-aufg-av { width: 1%; text-align: center; }
.pd-aufg-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e9edf2; color: #55606e; font-size: 10.5px; font-weight: 600; }
.pd-aufg-tr { cursor: pointer; }
.pd-aufg-tr.dragging { opacity: 0.4; }
.pd-aufg-tr.drag-over td { box-shadow: inset 0 2px 0 #4b6cb7; }

/* Soll-Gewinnvorgaben (Einstellungen) — unsere Hausform: Label über Feld, Unterstrich-Eingaben */
.su-dialog { max-width: 640px; }
.su-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.su-jahr-fg { max-width: 120px; }
.su-grid { row-gap: 18px; }
.su-euro { display: flex; align-items: center; gap: 6px; }
.su-euro input { flex: 1 1 auto; min-width: 0; }
.su-euro span { color: #8a9099; font-size: 13px; }
.su-summe { margin-top: 26px; padding-top: 14px; border-top: 1px solid #edeff2; text-align: right; font-size: 14px; color: #4f565f; }
.su-summe b { color: #292c31; font-weight: 600; }

/* Zeit- & Kostenerfassung am Auftrag: Status-Pille + Kosten-Maske */
/* Auftrags-Finanzen (eigener Reiter): die eine Zeile ist der Auftrag selbst — kein Klick-Cursor */
#pd-auswertung .k-tab tbody tr { cursor: default; }

/* Auswertung „Finanzen" — eine Zeile je Auftrag + Gesamt */
.ausw-row { cursor: pointer; }
.ausw-nr { color: #9aa0a8; font-size: 12.5px; }
.ausw-gewinn { color: #2e7d43; font-weight: 600; }
.ausw-total td { border-top: 2px solid #e4e6ea; font-weight: 600; }

/* Status-Zelle der Zeit-/Kostenerfassung — unser Standard-Stufen-Zellstil (füllt die Zelle farbig) */
.k-stufecell.k-akstatus-offen { background: #fdeede; }
.k-stufecell.k-akstatus-abgerechnet { background: #d9f0e0; }
.k-stufecell.k-akstatus-nicht_abrechenbar { background: #e7ebf0; }
.pdzk-row { cursor: pointer; }
.ak-chk { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: #3a3f45; }
.ak-chk input { width: 16px; height: 16px; accent-color: #0071e3; margin: 0; }

/* Auftrags-Auswertung: Finanzen-Subzeile + Deckungsbeitrag-Balken */
.pd-fin-sub { font-size: 12px; color: #9aa0a8; margin-top: 2px; font-weight: 400; }
.pd-fin-gewinn { color: #2e7d43; font-weight: 600; }
.pd-db { margin-top: 28px; max-width: 520px; }
.pd-db-title { font-size: 15px; font-weight: 600; color: #222; margin-bottom: 12px; }
.pd-db-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #eef0f3; }
.pd-db-seg.is-gewinn { background: #a9cce8; }
.pd-db-seg.is-kosten { background: #d9c3a9; }
.pd-db-legende { display: flex; gap: 22px; margin-top: 12px; font-size: 13px; color: #55606e; }
.pd-db-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pd-db-dot.is-gewinn { background: #a9cce8; }
.pd-db-dot.is-kosten { background: #d9c3a9; }

/* Gewinnvorschau-Karten (Startseite unten): drei Töpfe (abgerechnet/offen/geplant) mittig,
   unten grauer Balken + Prozent + Soll (Variante A, Andreas 20.08.2026) */
.kpi.vk { justify-content: space-between; align-items: stretch; gap: 12px; padding: 20px 18px 22px; }
.vk-title { font-size: 15px; color: #222; font-weight: 600; text-align: center; }
.vk-rows { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 11px; }
.vk-rows > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.vk-lbl { color: #8a9099; }
.vk-val { color: #4a4a4a; font-weight: 500; }
.vk-total { border-top: 0.5px solid #e4e8ee; padding-top: 10px; margin-top: 3px; }
.vk-total .vk-lbl, .vk-total .vk-val { color: #4a4a4a; font-weight: 500; }
.vk-foot { width: 100%; }
.vk-bar { width: 100%; height: 6px; border-radius: 4px; background: #e4e8ee; overflow: hidden; }
.vk-bar-fill { height: 100%; width: 0; background: #93a1af; transition: width 0.4s; }
.vk-gs { text-align: center; margin-top: 9px; font-size: 12px; color: #8a9099; }

/* Recherche-Reiter (KI-Recherche) — Andreas 20.08.2026 */
.rech-wrap { max-width: 900px; margin: 4px 0 8px; }
.rech-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rech-head h3 { margin: 0; font-size: 17px; }
.rech-head-r { display: flex; align-items: center; gap: 12px; }
.rech-am { font-size: 12px; color: #8a9099; }

/* Startfläche ohne Recherche */
.rech-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; background: #fafafc; border: 1px dashed #d3d8de; border-radius: 14px; }
.rech-empty-ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef1f6; margin-bottom: 14px; }
.rech-empty-ic [data-icon] svg { width: 22px; height: 22px; stroke: #7a828c; fill: none; stroke-width: 1.7; }
.rech-empty-h { font-size: 16px; font-weight: 600; color: #3a3f47; margin-bottom: 6px; }
.rech-empty-s { font-size: 13.5px; color: #8a9099; line-height: 1.55; max-width: 460px; margin: 0 auto 18px; }

/* Karte mit Ergebnissen */
.rech-card { background: #fff; border: 1px solid #e6e8eb; border-radius: 14px; padding: 6px 20px; }
.rech-sec { padding: 15px 0; border-top: 1px solid #eef0f2; }
.rech-sec:first-child { border-top: none; }
.rech-sec-t { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #9098a1; margin-bottom: 7px; }
.rech-txt { font-size: 14px; color: #3a3f47; line-height: 1.55; }
.rech-ul { margin: 0; padding-left: 18px; font-size: 14px; color: #3a3f47; line-height: 1.6; }
.rech-ul li { margin-bottom: 3px; word-break: break-word; }
.rech-q { color: #8a9099; font-size: 12px; }
.rech-leer { font-size: 13px; color: #a4a9b0; font-style: italic; }
.rech-hinweis { font-size: 12px; color: #a4a9b0; padding: 12px 0 2px; border-top: 1px solid #eef0f2; }

/* Eigene Notiz */
.rech-notizbox { margin-top: 18px; background: #fff; border: 1px solid #e6e8eb; border-radius: 14px; padding: 16px 20px; }
.rech-notiz { width: 100%; box-sizing: border-box; border: 1px solid #d7dbe0; border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; resize: vertical; }

/* Startseiten-Karte „News & mehr" — Bild-Newsfeed (Andreas 20.08.2026) */
.nw-liste { display: flex; flex-direction: column; }
.nw-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 22px; border-top: 1px solid #eef0f2; text-decoration: none; color: inherit; }
.nw-item:first-child { border-top: none; }
.nw-item:hover { background: #f0f3f7; }
.nw-thumb { position: relative; flex: 0 0 50px; width: 50px; height: 45px; border-radius: 8px; overflow: hidden; background: var(--nw-kat, #8a9099); }
.nw-thumb::after { content: attr(data-kat); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .9; }
.nw-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nw-titel { font-size: 13px; font-weight: 600; color: #2f343b; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-kurz { font-size: 12px; color: #8a9099; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; color: #a4a9b0; }
.nw-punkt { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }

/* Recherche-Block im „Neuen Kontakt anlegen"-Fenster (Andreas 20.08.2026) */
.k-rech-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6e8eb; }
.k-rech-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.k-rech-titel { font-size: 14px; font-weight: 600; color: #2f343b; }

/* Einnahmen → Auswertungen (Umsatz-/Gewinn-Report, Andreas 10.08.2026) */
.ea-kacheln { display: flex; flex-wrap: wrap; gap: 16px; }
.ea-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 150px; height: 120px; border: 1px solid #e2e5e9; border-radius: 12px; background: #fff; color: #292c31; text-decoration: none; font-size: 15px; }
.ea-kachel:hover { border-color: #c8ccd1; background: #f7f8fa; }
.ea-kachel-ic svg { width: 30px; height: 30px; stroke: #4a4a4a; fill: none; stroke-width: 1.6; }
.ea-filters { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; margin-bottom: 22px; }
.ea-fg { display: flex; flex-direction: column; gap: 5px; }
.ea-fg > label { font-size: 12px; color: #8a9099; }
.ea-kpis { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 26px; }
.ea-block { margin-bottom: 34px; }
.ea-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ea-vtoggle { display: flex; gap: 4px; }
.ea-vbtn { width: 32px; height: 30px; border: 1px solid #e2e5e9; border-radius: 7px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ea-vbtn svg { width: 16px; height: 16px; stroke: #8a9099; fill: none; stroke-width: 1.7; }
.ea-vbtn.is-active { background: #4a4a4a; border-color: #4a4a4a; }
.ea-vbtn.is-active svg { stroke: #fff; }
.ea-svg { width: 100%; height: auto; }
.ea-legend { display: flex; gap: 22px; justify-content: center; margin-bottom: 8px; font-size: 13px; color: #6a7078; }
.ea-legend .ea-lg { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.ea-lg-j { background: #5aa469; }
.ea-lg-v { background: #cfd4d9; }
.ea-hbars { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.ea-hbar { display: grid; grid-template-columns: 200px 1fr 90px; align-items: center; gap: 14px; font-size: 14px; }
.ea-hbar-lbl { color: #292c31; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-hbar-track { background: #eef1f3; border-radius: 5px; height: 22px; }
.ea-hbar-fill { display: block; height: 100%; background: #8fbf4d; border-radius: 5px; }
.ea-hbar-val { text-align: right; color: #4a4a4a; }
/* Auswertung: alles als Liste in Karten (Hausstil). Karten-Body nicht zentrieren, Tabelle voll breit. */
.ka-chart-body.ea-cardbody { display: block; min-height: 0; }
.ka-chart-body.ea-cardbody .k-tab { width: 100%; }
.ka-chart .ea-filters { margin-bottom: 28px; }
/* Filter-Werte links bündig zum Label (Standard-Button hat 8px links) + etwas kleiner. */
.ka-chart .ea-filters .k-ansicht-btn { padding-left: 0; font-size: 14px; }
.ka-chart .ea-filters .k-ansicht-btn:hover { background: transparent; }
/* Auswertungs-Listen sind nicht anklickbar → kein Hand-Cursor, kein Zeilen-Hover. */
.ka-chart-body.ea-cardbody .k-tab tbody tr { cursor: default; }
.ka-chart-body.ea-cardbody .k-tab tbody tr:hover { background: transparent; }

/* ===== SEITE 3 MARKETING — Agentur-Dashboard, gescopt unter .m3d (Nachbau agentur-dashboard.html) ===== */

  .m3d{
    --bg:#fafaf9; --bg-card:#fff; --border:#e5e5e3; --border-strong:#d4d4d2;
    --text:#1a1a1a; --text2:#444; --muted:#888;
    --blue:#1a6bff; --green:#1a8f3a; --orange:#ea8a1a; --red:#d4341c;
    --indigo:#5a4eea; --teal:#0fa9b6; --gray:#999;
    --green-lt:#e7f5eb; --orange-lt:#fdf0e0; --red-lt:#fbe7e3; --blue-lt:#e6efff;
    --indigo-lt:#ebeaff; --surface:#fff; --surface2:#fafaf9;
    --radius:14px; --radius-sm:10px;
    --sidebar-w:300px;
  }
  .m3d *{box-sizing:border-box}
  .m3d, .m3d{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

  /* Layout */
  .m3d .app{display:flex;min-height:100vh}
  .m3d .sidebar{width:var(--sidebar-w);background:#fff;border-right:1px solid var(--border);padding:20px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0}
  .m3d .main{flex:1;padding:28px 36px;max-width:calc(100% - var(--sidebar-w))}

  /* Sidebar */
  .m3d .sb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .m3d .sb-logo{font-weight:600;font-size:13px;letter-spacing:0.02em}
  .m3d .sb-add{width:28px;height:28px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;padding:0;position:relative;transition:background 0.15s}
  .m3d .sb-add:hover{background:#0954d4}
  .m3d .sb-add::before, .m3d .sb-add::after{content:"";position:absolute;top:50%;left:50%;background:#fff;border-radius:1px}
  .m3d .sb-add::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
  .m3d .sb-add::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
  .m3d .sb-search{flex:1;margin-left:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:#f5f5f4;}
  .m3d .sb-search:focus{outline:none;border-color:var(--blue);background:#fff}
  .m3d .sb-section{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin:18px 0 8px;font-weight:600}
  .m3d .sb-item{padding:10px 12px;border-radius:8px;cursor:pointer;margin-bottom:6px;border:1px solid transparent;background:#f9f9f8}
  .m3d .sb-item:hover{background:#f0f0ee}
  .m3d .sb-item.active{background:#f5f8ff;border-color:#cfe0ff}
  .m3d .sb-item-name{font-weight:600;font-size:13px;margin-bottom:3px}
  .m3d .sb-item-meta{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
  .m3d .sb-item{position:relative}
  .m3d .sb-item.archived{opacity:0.55}
  .m3d .sb-actions-trigger{position:absolute;top:8px;right:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;color:var(--muted);background:transparent;border:1px solid transparent;font-size:14px;line-height:1;padding:0}
  .m3d .sb-actions-trigger:hover{background:var(--surface2);color:var(--text);border-color:var(--border)}
  .m3d .sb-actions{position:absolute;top:32px;right:8px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,0.1);min-width:140px;z-index:10;display:none;flex-direction:column;padding:4px}
  .m3d .sb-actions.open{display:flex}
  .m3d .sb-actions button{background:none;border:none;padding:8px 12px;text-align:left;cursor:pointer;font-size:12px;color:var(--text);white-space:nowrap;border-radius:4px;font-family:inherit}
  .m3d .sb-actions button:hover{background:var(--surface2)}
  .m3d .sb-actions button.danger{color:var(--red)}
  .m3d .sb-actions button.danger:hover{background:var(--red-lt)}

  /* Modal "Neuer Kunde" */
  .m3d .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:100}
  .m3d .modal-overlay.open{display:flex}
  .m3d .modal-box{background:#fff;border-radius:18px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.18)}
  .m3d .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .m3d .modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);padding:0;line-height:1;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}
  .m3d .modal-close:hover{background:var(--surface2);color:var(--text)}
  .m3d .modal-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5}
  .m3d .add-modal-list{display:flex;flex-direction:column;gap:6px}
  .m3d .add-modal-item{padding:14px 16px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background 0.15s,border-color 0.15s}
  .m3d .add-modal-item:hover{background:var(--surface2);border-color:var(--blue)}

  /* Markierung: Vorschlag zum Entfernen (rot, mit Label) */
  .m3d .mark-remove{border:2px solid var(--red)!important;position:relative;}
  .m3d .mark-remove::after{content:"Vorschlag: entfernen";position:absolute;top:-11px;right:14px;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:100px;letter-spacing:0.05em;z-index:5;}
  .m3d .sb-trend{display:inline-flex;align-items:center;gap:3px;position:relative;cursor:help}
  .m3d .sb-trend[data-info]:hover::after, .m3d .info-term[data-info]:hover::after{content:attr(data-info);position:absolute;bottom:calc(100% + 6px);left:0;background:#1a1a1a;color:#fff;font-size:11px;font-weight:400;padding:8px 10px;border-radius:6px;white-space:normal;width:240px;line-height:1.4;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
  .m3d .sb-trend[data-info]:hover::after{left:auto;right:0}
  .m3d .info-term{position:relative;cursor:help}
  .m3d .sb-trend-up{color:var(--green)}
  .m3d .sb-trend-down{color:var(--red)}
  .m3d .sb-trend-flat{color:var(--gray)}
  .m3d .sb-pill{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600}
  .m3d .sb-pill-ads{background:var(--green-lt);color:var(--green)}
  .m3d .sb-pill-no-ads{background:#f0f0ee;color:var(--muted)}
  .m3d .sb-pill-opt{background:var(--blue-lt);color:var(--blue)}
  .m3d .sb-pill-ao{background:var(--indigo-lt);color:var(--indigo)}

  /* Header */
  .m3d .hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:20px;flex-wrap:wrap}
  .m3d .hd-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:4px}
  .m3d .hd h1{margin:0;font-size:30px;letter-spacing:-0.02em;font-weight:700}
  .m3d .hd-sub{color:var(--text2);font-size:14px;margin-top:6px}
  .m3d .hd-actions{display:flex;gap:8px;align-items:center}
  .m3d .btn{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text);text-decoration:none;display:inline-block}
  .m3d .hd-actions .btn{padding:6px 11px;font-size:11.5px;line-height:1}
  .m3d .btn:hover{background:#f5f5f4}
  .m3d .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
  .m3d .btn-primary:hover{background:#0954d4}
  .m3d .btn-link{background:transparent;border:none;color:var(--blue);text-decoration:none;font-size:13px;padding:9px 8px}
  .m3d .btn-link:hover{text-decoration:underline}
  .m3d .btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
  .m3d .btn-danger{background:#fbe7e3;color:var(--red);border-color:#f5c5bb}
  .m3d .btn-danger:hover{background:#f5c5bb}
  /* Range-Picker — Optik wie .hd-actions .btn (eckig, dezent) */
  .m3d .range-picker{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .m3d .range-btn{padding:6px 11px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:11.5px;font-weight:600;cursor:pointer;transition:all 0.12s}
  .m3d .range-btn:hover{background:#f5f5f4;color:var(--text)}
  .m3d .range-btn[data-active="true"]{background:var(--blue);color:#fff;border-color:transparent}
  /* Claude-Chat (rechts unten, ein-/ausklappbar) */
  .m3d .wk-chat-fab{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,#5a4eea 100%);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(26,107,255,0.35);display:flex;align-items:center;justify-content:center;z-index:9000;transition:transform 0.15s;padding:0;animation:wk-chat-glow 5s infinite ease-in-out}
  .m3d .wk-chat-fab:hover{transform:scale(1.06);box-shadow:0 6px 22px rgba(90,78,234,0.55);animation:none;filter:none}
  .m3d .wk-chat-fab svg{width:20px;height:20px}
  .m3d .wk-chat-fab svg .wk-spark-main{animation:wk-chat-spin 30s infinite linear, wk-chat-pulse 3s infinite ease-in-out;transform-origin:center;transform-box:fill-box}
  .m3d .wk-chat-fab svg .wk-spark-accent{animation:wk-chat-twinkle 3s infinite ease-in-out;transform-origin:center;transform-box:fill-box}
  @keyframes wk-chat-pulse{0%,100%{scale:1}50%{scale:1.08}}
  @keyframes wk-chat-spin{from{rotate:0deg}to{rotate:360deg}}
  @keyframes wk-chat-twinkle{0%,100%{opacity:0.7;scale:1}40%{opacity:0.25;scale:0.85}60%{opacity:1;scale:1.05}}
  @keyframes wk-chat-glow{0%,100%{box-shadow:0 4px 18px rgba(26,107,255,0.35);filter:hue-rotate(0deg)}50%{box-shadow:0 6px 24px rgba(90,78,234,0.5);filter:hue-rotate(12deg)}}
  .m3d .wk-chat-panel{position:fixed;bottom:90px;right:20px;width:400px;max-width:calc(100vw - 40px);height:600px;max-height:calc(100vh - 120px);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.15);display:none;flex-direction:column;overflow:hidden;z-index:9000}
  .m3d .wk-chat-panel.open{display:flex}
  .m3d .wk-chat-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg)}
  .m3d .wk-chat-title{font-weight:650;font-size:14px}
  .m3d .wk-chat-sub{font-size:11px;color:var(--muted);margin-top:2px}
  .m3d .wk-chat-close{background:transparent;border:none;font-size:20px;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px}
  .m3d .wk-chat-close:hover{background:var(--surface2);color:var(--text)}
  .m3d .wk-chat-messages{flex:1;overflow-y:auto;padding:14px 14px 4px 14px;display:flex;flex-direction:column;gap:10px;background:var(--surface2)}
  .m3d .wk-chat-msg{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;max-width:85%;white-space:pre-wrap;word-wrap:break-word}
  .m3d .wk-chat-msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
  .m3d .wk-chat-msg.assistant{align-self:flex-start;background:#fff;border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px}
  .m3d .wk-chat-msg.thinking{align-self:flex-start;color:var(--muted);font-style:italic;background:transparent;border:none;padding:4px 12px}
  .m3d .wk-chat-empty{color:var(--muted);font-size:12px;text-align:center;padding:20px;line-height:1.6}
  .m3d .wk-chat-input-wrap{padding:10px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;background:#fff}
  .m3d .wk-chat-input{flex:1;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px;font-family:inherit;resize:none;outline:none;min-height:36px;max-height:120px;line-height:1.4}
  .m3d .wk-chat-input:focus{border-color:var(--blue)}
  .m3d .wk-chat-send{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:0 14px;font-size:13px;font-weight:600;cursor:pointer;height:36px}
  .m3d .wk-chat-send:disabled{opacity:0.4;cursor:not-allowed}
  .m3d .wk-chat-counter{font-size:10px;color:var(--muted);text-align:right;padding:0 12px 6px 12px}
  /* Globales Loading-Overlay (lange Aktionen: Analyse, Kunde anlegen, Range mit Cache-Miss) */
  .m3d .wk-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:9999}
  .m3d .wk-overlay.active{display:flex}
  .m3d .wk-overlay-box{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,0.12);padding:24px 28px;min-width:320px;max-width:420px;text-align:center}
  .m3d .wk-overlay-main{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
  .m3d .wk-overlay-sub{font-size:12px;color:var(--muted);margin-bottom:16px}
  .m3d .wk-overlay-bar{height:6px;background:#eef0f3;border-radius:3px;overflow:hidden;position:relative}
  .m3d .wk-overlay-bar.indeterminate::after{content:'';position:absolute;left:-30%;top:0;width:30%;height:100%;background:var(--blue);border-radius:3px;animation:wk-bar 1.4s infinite ease-in-out}
  .m3d .wk-overlay-fill{height:100%;width:0%;background:var(--blue);border-radius:3px;transition:width 0.4s linear}
  @keyframes wk-bar{0%{left:-30%}100%{left:100%}}
  /* Range-Mode: Live-Karten (nicht range-abhaengig) abdunkeln, range-aware Block bleibt voll */
  /* Range-Mode: nur tagesaktuelle "Live"-Karten ausblenden — Rest scharf wie im Master.
     LIVE_PATHS-Liste wird unten via JS automatisch auf Karten mit Live-Daten gesetzt. */
  .m3d.range-not-current .live-only{display:none !important}

  /* Status-Badges */
  .m3d .badges{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
  .m3d .badge{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
  .m3d .badge-ok{background:var(--green-lt);color:var(--green)}
  .m3d .badge-warn{background:var(--orange-lt);color:var(--orange)}
  .m3d .badge-err{background:var(--red-lt);color:var(--red)}
  .m3d .badge-off{background:#f0f0ee;color:var(--muted)}
  .m3d .badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

  /* Job-Status */
  .m3d .job-status{margin-top:18px;padding:12px 16px;background:var(--blue-lt);border:1px solid #cfe0ff;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
  .m3d .job-status.idle{background:#fafaf9;border-color:var(--border);color:var(--muted)}

  /* Cards / Grids */
  .m3d .gap{height:24px}
  .m3d .gap-xl{height:48px}
  .m3d .grid{display:grid;gap:14px}
  .m3d .cols-4{grid-template-columns:repeat(4,1fr)}
  .m3d .cols-3{grid-template-columns:repeat(3,1fr)}
  .m3d .cols-2{grid-template-columns:repeat(2,1fr)}
  .m3d .card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
  /* Demo-Markierung: Karten die NEU im Agentur-Dashboard sind (nicht im Kunden-Dashboard) */
  .m3d .card-new-agentur{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
  /* Demo-Markierung: Karten mit API-Problem (kein Endpoint / nur UI) */
  .m3d .card-problem{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
  .m3d .card-sm{padding:14px}
  .m3d .card-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:14px}
  .m3d .section-title{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin:0 0 6px}
  .m3d .section-sub{color:var(--muted);font-size:13px;margin-bottom:18px}

  .m3d .kpi-label{font-size:12px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:5px}
  .m3d .kpi-dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}
  .m3d .kpi-value{font-size:26px;font-weight:700;letter-spacing:-0.02em;line-height:1}
  /* Kleiner Wert (Text statt Zahl) + Sub-Text — vorher nirgends definiert, fielen auf Browser-Default zurück */
  .m3d .kpi-value-sm{font-size:18px;font-weight:700;letter-spacing:-0.01em;line-height:1.2}
  .m3d .kpi-sub{font-size:11px;color:var(--muted);margin-top:4px}
  /* Stat-Tile: kleine KPI-Kachel mit Label oben + Wert unten (FB+IG-Karte, Meta-Ads-Karte, CrUX, Sitemap) */
  .m3d .wk-stat-tile{position:relative;padding:10px 12px;background:var(--surface2);border-radius:10px}
  .m3d .wk-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
  .m3d .wk-stat-value{font-size:22px;font-weight:700;color:var(--text);margin-top:2px}
  .m3d .kpi-blue .kpi-dot, .m3d .kpi-blue .kpi-value{color:var(--blue)} .m3d .kpi-blue .kpi-dot{background:var(--blue)}
  .m3d .kpi-green .kpi-value{color:var(--green)} .m3d .kpi-green .kpi-dot{background:var(--green)}
  .m3d .kpi-orange .kpi-value{color:var(--orange)} .m3d .kpi-orange .kpi-dot{background:var(--orange)}
  .m3d .kpi-red .kpi-value{color:var(--red)} .m3d .kpi-red .kpi-dot{background:var(--red)}
  .m3d .status-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;margin:2px 2px 2px 0}
  .m3d .status-pill-active{background:#d1fae5;color:#065f46}
  .m3d .status-pill-paused{background:#fef3c7;color:#92400e}
  .m3d .status-pill-removed{background:#fee2e2;color:#991b1b}

  /* Empfehlungs-Tabelle (das Kern-Element für Agentur) */
  .m3d .rec-table{width:100%;border-collapse:collapse;font-size:13px}
  .m3d .rec-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600}
  .m3d .rec-table tbody td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:top}
  .m3d .rec-table tbody tr:last-child td{border-bottom:none}
  .m3d .rec-prio{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600}
  /* Worker-Empfehlungen (Liste): rec-item / rec-body / Pills (kompatibel zu master-dashboard) */
  .m3d .rec-list{display:flex;flex-direction:column;gap:10px}
  .m3d .rec-list .rec-item{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;background:var(--surface2);border-radius:var(--radius-sm);border:1px solid var(--border)}
  .m3d .rec-list .rec-prio{flex-shrink:0;padding:0;background:transparent;border-radius:0;font-size:inherit;font-weight:inherit}
  .m3d .rec-list .rec-body{flex:1}
  .m3d .rec-list .rec-title{font-size:14px;font-weight:650;margin-bottom:4px;color:var(--text)}
  .m3d .rec-list .rec-desc{font-size:13px;color:var(--text2);line-height:1.6}
  .m3d .pill{display:inline-flex;align-items:center;border-radius:100px;font-size:12px;font-weight:650;padding:2px 9px}
  .m3d .pill-green{background:var(--green-lt);color:#1a7a35} .m3d .pill-red{background:var(--red-lt);color:#c0231a}
  .m3d .pill-gray{background:#ebebf0;color:#48484a} .m3d .pill-blue{background:var(--blue-lt);color:#0055a8}
  .m3d .pill-orange{background:var(--orange-lt);color:#8a5000} .m3d .pill-indigo{background:var(--indigo-lt);color:#3b39a0}
  .m3d .rec-list-empty{padding:14px 16px;color:var(--muted);font-size:13px;text-align:center;background:var(--surface2);border-radius:var(--radius-sm);border:1px solid var(--border)}
  .m3d .rec-prio-h{background:var(--red-lt);color:var(--red)}
  .m3d .rec-prio-m{background:var(--orange-lt);color:var(--orange)}
  .m3d .rec-prio-l{background:#f0f0ee;color:var(--muted)}
  .m3d .rec-titletext{font-weight:600;margin-bottom:3px}
  .m3d .rec-desc{color:var(--text2);font-size:12px;line-height:1.5}
  .m3d .rec-aufwand{color:var(--text2);font-weight:600;white-space:nowrap}
  .m3d .rec-preis{color:var(--green);font-weight:700;white-space:nowrap}
  .m3d .rec-status select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
  .m3d .rec-status select:focus{border-color:var(--border-strong)}
  .m3d .rec-status select.s-offen{color:var(--text2)}
  .m3d .rec-status select.s-angeboten{color:var(--blue);border-color:#cfe0ff;background:var(--blue-lt)}
  .m3d .rec-status select.s-umsetzung{color:var(--orange);border-color:#f5d8a8;background:var(--orange-lt)}
  .m3d .rec-status select.s-erledigt{color:var(--green);border-color:#c2e6cd;background:var(--green-lt)}
  .m3d .rec-status select.s-ignoriert{color:var(--muted)}
  .m3d .rec-list .rec-item.rec-erledigt{opacity:0.4}

  /* Meta-Daten Bereich */
  .m3d .meta-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
  .m3d .meta-list{list-style:none;padding:0;margin:0}
  .m3d .meta-list li{padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
  .m3d .meta-list li:last-child{border-bottom:none}
  .m3d .meta-date{font-size:11px;color:var(--muted);margin-bottom:2px}
  .m3d .meta-empty{color:var(--muted);font-size:13px;font-style:italic}
  .m3d textarea.meta-textarea{width:100%;min-height:120px;padding:10px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:13px;resize:vertical}

  /* Mobile: nur Logo mittig, kein Dashboard */
  .m3d .mobile-only{display:none}
  @media (max-width:900px){
    .m3d .app{display:none}
    .m3d .mobile-only{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:#fff;padding:40px;text-align:center}
    .m3d .mobile-only .logo-text{font-size:24px;font-weight:600;letter-spacing:-0.01em;color:var(--text)}
    .m3d .mobile-only .logo-sub{font-size:13px;color:var(--muted);margin-top:8px}
  }

  /* Pfeile */
  .m3d .arr{font-size:11px;font-weight:600}
  .m3d .arr-up{color:var(--green)}
  .m3d .arr-down{color:var(--red)}
  .m3d .arr-flat{color:var(--gray)}
  .m3d .pos-arrow{font-size:11px;font-weight:600;margin-left:3px}
  .m3d .pos-up{color:var(--green)}
  .m3d .pos-down{color:var(--red)}
  .m3d .pos-flat{color:var(--gray)}

  /* Info-Icon + Popover (Klick öffnet Erklärung) */
  .m3d .card{position:relative}
  .m3d .info-icon{position:absolute;bottom:10px;right:10px;width:18px;height:18px;border:1px solid var(--muted);border-radius:50%;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;font-family:Georgia,serif;font-style:italic;padding:0;z-index:3}
  .m3d .info-icon:hover{background:rgba(0,0,0,0.06)}
  .m3d .info-popover{display:none;position:absolute;bottom:34px;right:10px;width:260px;background:#1a1a1a;color:#fff;border-radius:8px;padding:14px 16px;font-size:12px;font-weight:400;line-height:1.5;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,0.18)}
  .m3d .info-popover.open{display:block}
  .m3d .info-popover-title{font-weight:700;margin-bottom:6px;font-size:13px}
  .m3d .info-popover-source{margin-top:8px;font-size:11px;color:#999;font-style:italic}
  .m3d .info-popover-close{position:absolute;top:8px;right:10px;width:18px;height:18px;background:transparent;border:none;color:#999;cursor:pointer;font-size:16px;line-height:1;padding:0}
  .m3d .info-popover-close:hover{color:#fff}

    /* TEMP: Lösch-Kandidaten rot markieren — wird wieder entfernt */
    .m3d .wk-delete-mark{outline:2px dashed #d4341c !important;outline-offset:4px;background:rgba(212,52,28,0.04) !important;position:relative}
    .m3d .wk-delete-mark::before{content:"RAUS-Kandidat";position:absolute;top:-12px;left:12px;background:#d4341c;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:0.04em;text-transform:uppercase;z-index:5}
    .m3d .wk-delete-banner{background:#fef2f0;border:1px solid #d4341c;border-radius:10px;padding:14px 18px;margin:14px 0;font-size:13px;color:#8a1a0a}
    .m3d .wk-delete-banner strong{color:#d4341c}
    .m3d .wk-kundensicht-frame{outline:2px dashed #0071e3;outline-offset:4px;position:relative}

    /* === KUNDENSICHT CSS (aus Webflow-Export) === */
.m3d .wk-chat-fab{
  background-image:linear-gradient(135deg,#2563eb 0%,#5a4eea 100%) !important;
  animation:wk-chat-glow 5s infinite ease-in-out;
}
.m3d .wk-chat-fab:hover{
  transform:scale(1.06);
  box-shadow:0 6px 22px rgba(90,78,234,0.55) !important;
  animation:none;
}
.m3d .wk-chat-fab svg{
  animation:wk-chat-pulse 3s infinite ease-in-out;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes wk-chat-glow{
  0%,100%{box-shadow:0 4px 16px rgba(26,107,255,0.35)}
  50%{box-shadow:0 4px 24px rgba(90,78,234,0.55)}
}
@keyframes wk-chat-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
/* Fokus-Ring auf Chat- und Kontakt-Eingaben unterdrücken */
.m3d .wk-chat-input:focus, .m3d [data-wk-id="wkChatInput"]:focus, .m3d [data-wk-id="wkContactName"]:focus, .m3d [data-wk-id="wkContactEmail"]:focus, .m3d [data-wk-id="wkContactMessage"]:focus{
  border-radius:10px !important;
  outline:none !important;
  box-shadow:none !important;
  border-color:#97b7fe !important;
}
.m3d .wk-loading-sub{ margin: 0px; }
.m3d .wk-row[data-fill-src="rankingChanges.detailHtml"] .wk-cell-num{
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}
.m3d .wk-cell-num{text-align: center;}
.m3d .wk-row[data-fill-src="localPackHtml"] .wk-cell-num{
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}
.m3d .wk-row[data-fill-src="ga4.utmCampaignsHtml"] .wk-cell-num{
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}
.m3d .wk-row[data-fill-src="ga4.geographyHtml"] .wk-cell-num{
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}
.m3d .wk-row[data-fill-src="ga4.topPagesHtml"] .wk-cell-num{
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}
.m3d{
  --red: #ff3b30;
  --green: #30d158;
  --orange: #ff9f0a;
  --muted: #8e8e93;
  --text: #1c1c1e;
  --text2: #3a3a3c;
  --border: rgba(0,0,0,0.07);
}
.m3d [data-fill="localSentiment.positive"]{ color: #1a7a35; }
.m3d [data-fill="localSentiment.neutral"]{ color: #48484a; }
.m3d [data-fill="localSentiment.negative"]{ color: #c0231a; }
.m3d .wk-row{ display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; align-items: center; }
.m3d .wk-row:last-child{ border-bottom: none; }
.m3d .wk-cell{ flex: 1; font-size: 1rem;}
.m3d .wk-cell:first-child{ flex: 2; font-weight: 300; }
.m3d .wk-cell-full{ flex: 1 1 100% !important; text-align: center; color: var(--_base---global-style--content-font); padding: 16px 0; }
.m3d .wk-row-header{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #8e8e93; border-bottom: 1px solid #e5e5e7; padding: 8px 0; }
.m3d .wk-row-header .wk-cell{ font-weight: 600; font-size: 11px; }
.m3d .rsa-row{ display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid var(--border); }
.m3d .rsa-row-label{ font-size: 15px; color: var(--muted); }
.m3d .rsa-row-val{ font-size: 16px; font-weight: 650; color: var(--text); white-space: nowrap; flex-shrink: 0; }
/* kw-Listen (Kanal, UTM, Geografie, Top-Pages) — Name links, Wert rechts */
.m3d .kw-list{ list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0; }
.m3d .kw-item{ display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.m3d .kw-item:first-child{ border-top: none; padding-top: 0; }
.m3d .kw-name{ font-size: 1rem; font-weight: 300;}
.m3d .kw-val{ font-size: 1rem; font-weight: 300; text-align: right; white-space: nowrap; flex-shrink: 0; }
.m3d .wk-chart-slot{ min-height: 200px; position: relative; }
/* Kundensicht-Tabellen */
.m3d .ks-tbl{ width:100%;border-collapse:collapse;font-size:13px }
.m3d .ks-tbl th{ padding:0 0 7px 0;font-size:11px;font-weight:400;color:var(--muted);border-bottom:1px solid #e5e5e7;text-align:left }
.m3d .ks-tbl th.wk-cell-num{ text-align:right;padding-left:28px }
.m3d .ks-tbl td{ padding:6px 0;border-bottom:1px solid var(--border);vertical-align:middle }
.m3d .ks-tbl tr:last-child td{ border-bottom:none }
.m3d .ks-tbl td.wk-cell-num{ text-align:right;font-weight:600;white-space:nowrap;padding-left:28px;min-width:60px }
.m3d [data-range][data-active="true"]{ background: #1c1c1e !important; color: #fff !important; }
.m3d .wk-ads-picker-select:focus, .m3d #wkAdsCampaign:focus, .m3d #wkAdsAd:focus{ outline: 0 !important; box-shadow: none !important; border: 1px solid #d1d1d6 !important; }
.m3d .wk-score-badge.score-orange{ background: rgba(255,159,10,0.15) !important; }
.m3d .wk-score-badge.score-orange .wk-score-label, .m3d .wk-score-badge.score-orange .wk-score-value{ color: #8a5000 !important; }
.m3d .wk-score-badge.score-red{ background: rgba(255,59,48,0.15) !important; }
.m3d .wk-score-badge.score-red .wk-score-label, .m3d .wk-score-badge.score-red .wk-score-value{ color: #c0231a !important; }


/* Seite 3 Marketing: Kopf enger (Andreas 13.08.2026) — weniger Luft Eyebrow/Name/Untertitel */
.m3d .hd h1 { line-height: 1.12; }
.m3d .hd-eyebrow { margin-bottom: 2px; }
.m3d .hd-sub { margin-top: 2px; }

/* Erledigt-Haken bei Empfehlungen: unser dezentes Grau statt Grün (Andreas 13.08.2026) */
.m3d .wk-rec-done-btn { color: #9aa0a8 !important; }
.m3d .wk-rec-done-btn:hover { color: #6b7178 !important; }

/* ===== Tracking Website (Andreas 16.08.2026) — Layout wie VitalCode, Farben im wk-Style ===== */
.tw-filter{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:12px;justify-content:flex-end}
.tw-pills{display:inline-flex;align-items:center;background:#dce1e6;border-radius:10px;padding:3px;gap:2px}
.tw-pills button{background:transparent;border:0;color:#5b636d;font:inherit;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:7px;cursor:pointer}
.tw-pills button.active{background:#fff;color:#16181c;font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.10)}
.tw-monat{display:inline-flex;align-items:center;gap:4px;background:#dce1e6;border-radius:10px;padding:3px}
.tw-monat button{background:transparent;border:0;color:#5b636d;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:13px;line-height:1}
.tw-monat .lbl{font-size:12.5px;font-weight:600;color:#2f363d;min-width:100px;text-align:center;padding:0 6px}
.tw-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
@media(max-width:700px){.tw-kpis{grid-template-columns:repeat(2,1fr)}}
.tw-kpi{background:#fff;border-radius:12px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07)}
.tw-kpi-lbl{font-size:11px;font-weight:600;color:#6b7480;letter-spacing:.04em;text-transform:uppercase}
.tw-kpi-val{font-size:28px;font-weight:700;color:#16181c;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.tw-chart{background:#fff;border-radius:12px;padding:8px 20px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);margin-bottom:12px}
.tw-chart-legend{display:flex;justify-content:flex-end;gap:14px;font-size:12px;color:#2f363d;margin-bottom:6px}
.tw-chart-legend .li{display:inline-flex;align-items:center;gap:6px}
.tw-chart-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.tw-chart-legend .sw.a{background:#1a6bff}
.tw-chart-legend .sw.b{background:#ea8a1a}
.tw-seite{background:#fff;border-radius:12px;padding:22px 24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);margin-bottom:12px}
.tw-seite-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tw-seite-name{font-size:18px;font-weight:700;color:#16181c;margin:0}
.tw-seite-pfad{font-size:12px;color:#6b7480;background:#eef0f2;padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.tw-seite-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
@media(max-width:700px){.tw-seite-kpis{grid-template-columns:repeat(2,1fr)}}
.tw-seite-kpi-lbl{font-size:10.5px;font-weight:600;color:#6b7480;text-transform:uppercase;letter-spacing:.04em}
.tw-seite-kpi-val{font-size:22px;font-weight:700;color:#16181c;margin-top:3px;font-variant-numeric:tabular-nums}
.tw-seite-devices{font-size:13px;color:#6b7480;margin:4px 0 16px}
.tw-seite-devices b{color:#2f363d;font-weight:600}
.tw-sub{margin-top:14px}
.tw-sub-title{font-size:11px;font-weight:600;color:#6b7480;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.tw-rows{display:flex;flex-direction:column;gap:4px}
.tw-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f4f6f8;border-radius:8px;font-size:13px;color:#2f363d;gap:12px}
.tw-row .vwr-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-row .vwr-num{font-weight:600;color:#16181c;font-variant-numeric:tabular-nums;flex-shrink:0}
.tw-cookie{background:#fff;border-radius:12px;padding:22px 24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);margin-bottom:12px}
.tw-cookie-head{font-size:18px;font-weight:700;color:#16181c;margin:0 0 14px}
.tw-cookie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.tw-cookie-grid{grid-template-columns:1fr}}
.tw-cookie-kpi{padding:14px 16px;background:#f4f6f8;border-radius:10px}
.tw-cookie-kpi .lbl{font-size:11px;font-weight:600;color:#6b7480;text-transform:uppercase;letter-spacing:.04em}
.tw-cookie-kpi .val{font-size:22px;font-weight:700;color:#16181c;margin-top:3px;font-variant-numeric:tabular-nums}
.tw-cookie-kpi .val .pct{font-size:13px;font-weight:500;color:#6b7480;margin-left:4px}
.tw-journey{background:#fff;border-radius:12px;padding:22px 24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07)}
.tw-journey-head{font-size:18px;font-weight:700;color:#16181c;margin:0 0 14px}
.tw-jrow{background:#f4f6f8;border-radius:10px;padding:16px 18px;margin-bottom:12px}
.tw-jmeta{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px;font-size:13px;color:#2f363d}
.tw-jmeta .datum{font-weight:700;font-size:14px;color:#16181c}
.tw-jmeta .lbl{color:#6b7480}
.tw-jmeta b{color:#16181c;font-weight:600}
.tw-jsteps{display:flex;flex-direction:column}
.tw-jstep{display:grid;grid-template-columns:14px 60px 160px 1fr;gap:12px;align-items:center;position:relative;font-size:13px}
.tw-jstep .dot-col{align-self:stretch;position:relative;display:flex;align-items:center}
.tw-jstep .dot{width:10px;height:10px;border-radius:50%;background:#1a6bff;position:relative;z-index:1}
.tw-jstep .line{position:absolute;left:4px;top:0;bottom:0;width:2px;background:#d7dee5;z-index:0}
.tw-jstep:first-child .line{top:50%}
.tw-jstep:last-child .line{bottom:50%}
.tw-jstep .zeit{color:#6b7480;padding:9px 0;font-variant-numeric:tabular-nums}
.tw-jstep .typ{color:#16181c;font-weight:500;padding:9px 0}
.tw-jstep .detail{color:#6b7480;padding:9px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tw-jconv{margin-top:10px;padding:8px 12px;background:#e6efff;color:#1a6bff;border-radius:8px;font-size:13px;font-weight:600}
.tw-zus{background:#f4f6f8;border-radius:12px;padding:16px 18px;margin-top:16px}
.tw-zus-title{font-size:12px;font-weight:600;color:#6b7480;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px}
.tw-zus-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.tw-zus-grid{grid-template-columns:1fr}}
.tw-zus-col-title{font-size:11px;font-weight:600;color:#6b7480;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.tw-zus-list{display:flex;flex-direction:column;gap:4px}
.tw-zus-row{display:flex;justify-content:space-between;padding:8px 10px;background:#fff;border-radius:8px;font-size:13px}
.tw-zus-row .l{color:#6b7480}
.tw-zus-row .v{font-weight:600;color:#16181c;font-variant-numeric:tabular-nums}
.tw-zus-row .v.gruen{color:#1a6bff}
.tw-leer{font-size:13px;color:#9aa0a8}

/* ===== Funnel-/Landingpage-Auswertung (Akquise) ===== */
.fn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fn-head h3{font-size:18px;font-weight:700;color:#16181c;margin:0}
.fn-gesamt{font-size:13px;color:#6b7480;margin-bottom:18px}
.fn-gesamt b{color:#16181c;font-weight:700}
.fn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.fn-grid{grid-template-columns:1fr}}
.fn-funnel{border:1px solid #eef0f2;border-radius:10px;padding:16px 18px}
.fn-name{font-size:15px;font-weight:700;color:#16181c;margin-bottom:12px}
.fn-name-sub{font-size:12px;font-weight:500;color:#6b7480}
.fn-trichter{display:flex;flex-direction:column;gap:6px}
.fn-stufe{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:10px;font-size:13px}
.fn-stufe-lbl{color:#6b7480}
.fn-bar{height:18px;background:#f4f6f8;border-radius:5px;overflow:hidden}
.fn-bar i{display:block;height:100%;background:#1a6bff;border-radius:5px;transition:width .3s ease}
.fn-stufe-n{text-align:right;font-weight:600;color:#16181c;font-variant-numeric:tabular-nums}
.fn-antworten{margin-top:14px;border-top:1px solid #f0f2f4;padding-top:12px}
.fn-antw-frage{margin-bottom:10px}
.fn-antw-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#8a8f98;margin-bottom:4px}
.fn-antw-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#2f363d;padding:2px 0}

/* ===== Startseite: Mini-Auswertungs-Karten (Website / Landingpages) ===== */
#start-tw, #start-kanal{display:flex;flex-direction:column;padding:16px 18px;text-decoration:none}
#start-tw .kpi-head, #start-kanal .kpi-head{margin:0}
#start-tw .kpi-label, #start-kanal .kpi-label{font-size:15px;font-weight:600;color:#222}
#start-tw .kpi-value, #start-kanal .kpi-value{flex:1;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:500;color:#565f6a;line-height:1;margin:0;font-variant-numeric:tabular-nums}
#start-tw .kpi-sub, #start-kanal .kpi-sub{font-size:12.5px;color:#6b7480}
.start-mini-list{margin-top:10px;display:flex;flex-direction:column;gap:3px}
.start-mini-list-lg{margin-top:6px}
.smi-row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:#6b7480}
.smi-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smi-n{font-weight:600;color:#2f363d;font-variant-numeric:tabular-nums;flex-shrink:0}

/* ===== „Mein Tag"-Karte (Startseite Übersicht) ===== */
.mt-kopf{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mt-chip{flex:1;min-width:110px;background:#f7f7f7;border-radius:8px;padding:10px 12px;font-size:12.5px;color:#6b7480;text-decoration:none;text-align:center}
.mt-chip b{display:block;font-size:22px;font-weight:700;color:#16181c;margin-bottom:2px;font-variant-numeric:tabular-nums}
.mt-block{margin-bottom:14px}
.mt-block:last-child{margin-bottom:0}
.mt-block-t{font-size:13px;color:#2f363d;font-weight:600;margin-bottom:2px}
.mt-leer{padding:0}
#start-uebersicht{cursor:default}
.mt-tipps{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.mt-tipp{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7f7f7;border-radius:8px;padding:11px 13px;text-decoration:none}
.mt-chip:hover,.mt-tipp:hover{background:#eef0f2}
.mt-tipp-text{font-size:13px;color:#2f363d;line-height:1.4;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-tipp-cta{font-size:12px;font-weight:600;color:#16181c;white-space:nowrap;flex-shrink:0}
.mt-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0;font-size:13px;text-decoration:none;border-bottom:1px solid #f0f2f4}
.mt-row:last-child{border-bottom:none}
.mt-name{color:#2f363d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-tag{color:#8896a5;font-size:11px;flex-shrink:0}
.mt-leer{font-size:13px;color:#9aa0a8;padding:2px 0}