/* ============================================================
   SUNlife DESK · Design-System
   ------------------------------------------------------------
   Eigenständige CI der SUNlife energy GmbH.
   Markengrün #7DC42A + Sonnengelb #F5B400 auf dunklem
   Grün-Schwarz. Bewusst KEIN JMEC-Bronze, KEIN Sonnenexpert-Blau.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --brand:        #7DC42A;
  --brand-soft:   #A9E060;
  --brand-deep:   #4E8317;
  --sun:          #F5B400;
  --sun-soft:     #FFD34D;

  /* Flächen: tieferes Grün-Schwarz für mehr Kontrast zu den Glas-Panels */
  --bg:           #040905;
  --bg-2:         #081209;
  --panel:        rgba(15, 30, 18, 0.78);
  --panel-solid:  #0E1D12;
  --panel-2:      rgba(10, 20, 12, 0.92);

  /* Text: hellere Stufen = deutlich mehr Kontrast */
  --text:         #F4FAF0;
  --muted:        #A9C0AA;
  --faint:        #7E9A79;

  /* Linien */
  --line:         rgba(125, 196, 42, 0.20);
  --line-strong:  rgba(125, 196, 42, 0.42);

  /* Status (Ampel-Fachlogik + Blau als Zwischenstatus) */
  --ok:           #4CAF50;
  --warn:         #E0B547;
  --bad:          #E0796A;
  --info:         #6AA9F4;

  /* Typo */
  --font:         "Inter", -apple-system, system-ui, sans-serif;
  --mono:         "Geist Mono", "SF Mono", monospace;

  /* Radien */
  --r:            14px;
  --r-sm:         9px;
  --r-pill:       999px;

  /* Tiefen-System: ein Schatten-Stack je Ebene (3D-Staffelung) */
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
    0 6px 14px -4px rgba(0, 0, 0, 0.45),
    0 22px 48px -18px rgba(0, 0, 0, 0.75);
  --shadow-float:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.5) inset,
    0 10px 22px -6px rgba(0, 0, 0, 0.55),
    0 34px 70px -22px rgba(0, 0, 0, 0.85),
    0 0 44px -12px rgba(125, 196, 42, 0.35);
  --glass-material: linear-gradient(135deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.025) 30%,
    rgba(255, 255, 255, 0.015) 65%,
    rgba(255, 255, 255, 0.07) 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Marken-Hintergrund: kräftigere Glow-Halos + feines Gitter für räumliche Tiefe */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1000px 560px at 88% -10%, rgba(125, 196, 42, 0.20), transparent 62%),
    radial-gradient(820px 520px at -8% 108%, rgba(125, 196, 42, 0.14), transparent 60%),
    radial-gradient(620px 420px at 55% 118%, rgba(245, 180, 0, 0.09), transparent 65%),
    linear-gradient(180deg, #071009 0%, var(--bg) 46%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(125, 196, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 196, 42, 0.05) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 75%);
  pointer-events: none;
}

a { color: var(--brand-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Sidebar-Layout (Struktur wie SOLARDESK/Sonnenexpert) ---------------- */
.sd-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
  width: 238px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 40%, transparent 100%),
    rgba(6, 13, 8, 0.94);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid var(--line-strong);
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.05) inset,
    14px 0 44px -18px rgba(0, 0, 0, 0.8),
    26px 0 70px -30px rgba(125, 196, 42, 0.18);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sd-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
/* Shimmer-Sweep: bewusst NUR hier (ein Element pro Seite) */
.sd-logo::before {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 55%; height: 100%;
  background: linear-gradient(110deg, transparent 0%,
    rgba(255, 255, 255, 0.14) 47%, rgba(169, 224, 96, 0.20) 50%,
    rgba(255, 255, 255, 0.14) 53%, transparent 100%);
  filter: blur(2px); pointer-events: none;
  animation: sd-logo-sweep 8s cubic-bezier(0.55, 0.05, 0.45, 0.95) infinite;
}
@keyframes sd-logo-sweep {
  0%   { transform: translateX(0%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  55%  { transform: translateX(420%) skewX(-18deg); opacity: 1; }
  58%  { opacity: 0; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}
.sd-logo img { height: 26px; width: auto; max-width: 150px; object-fit: contain; display: block; }
/* Marken-Logos haben sehr unterschiedliche Seitenverhältnisse: SUNlife ist eine
   flache Wortmarke, Stromfritzen ein rundes Emblem, JMEC ein hohes Signet.
   Höhe je Marke, damit alle drei etwa gleich präsent wirken. */
.sd-logo.marke-sf img   { height: 42px; }
.sd-logo.marke-jmec img { height: 38px; }
.sd-logo .sd-desk-tag {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--sun);
  border: 1px solid rgba(245, 180, 0, 0.45);
  border-radius: var(--r-pill);
  padding: 4px 8px 3px;
  white-space: nowrap;
}
.sd-nav { flex: 1 1 auto; padding: 10px 10px 16px; }
.sd-nav-group { margin-top: 16px; }
.sd-nav-group:first-child { margin-top: 4px; }
.sd-nav-group-label {
  font: 700 10.5px var(--font);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint);
  padding: 0 10px 6px;
  white-space: nowrap;
}
.sd-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font: 600 13.5px var(--font);
  white-space: nowrap;
  border-left: 2.5px solid transparent;
}
.sd-nav-item:hover { color: var(--text); background: rgba(125, 196, 42, 0.07); text-decoration: none; }
.sd-nav-item.active {
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(245, 180, 0, 0.10) 0%, rgba(125, 196, 42, 0.14) 40%, rgba(125, 196, 42, 0.05) 100%);
  border-left-color: var(--sun);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 22px -8px rgba(245, 180, 0, 0.5);
}
/* Die zugeklappte Gruppe "Seltener gebraucht". Sie ist ein <details>, damit sie
   ohne eine Zeile JavaScript auf- und zugeht und mit der Tastatur bedienbar
   bleibt. Der Pfeil ist selbst gezeichnet, weil die Standardmarkierung je nach
   Browser anders aussieht und links am Text klebt. */
.sd-nav-mehr { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.sd-nav-mehr > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  list-style: none;
  transition: color 0.15s ease;
}
.sd-nav-mehr > summary::-webkit-details-marker { display: none; }
.sd-nav-mehr > summary::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: auto; margin-right: 4px;
  transition: transform 0.18s ease;
}
.sd-nav-mehr[open] > summary::after { transform: rotate(45deg); }
.sd-nav-mehr > summary:hover { color: var(--muted); }

.sd-nav-item .sd-soon {
  margin-left: auto;
  font: 700 9px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--faint); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 3px 6px 2px;
}
.sd-side-user {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sd-side-user .sd-user-name { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zwei Knöpfe (Passwort, Abmelden) brechen bei schmaler Sidebar sauber um. */
.sd-side-user .sd-user-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.sd-side-user .sd-user-name strong { color: var(--text); font-weight: 600; }
.btn-logout {
  background: none; border: 1px solid var(--line-strong);
  color: var(--muted); border-radius: var(--r-pill);
  padding: 6px 12px; font: 600 12px var(--font);
  cursor: pointer; white-space: nowrap;
}
.btn-logout:hover { color: var(--text); border-color: var(--brand); }

/* Schlanke Topbar im Inhalt (mobil: Hamburger) */
.sd-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  margin-left: 238px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    rgba(5, 11, 6, 0.85);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 10px 30px -14px rgba(0, 0, 0, 0.7);
}
.sd-topbar .sd-crumb { font: 600 13px var(--font); color: var(--muted); }
.sd-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--glass-material);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text); font: 700 15px/1 var(--font);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.sd-back:hover { border-color: var(--brand); transform: translateX(-2px); }
.sd-burger {
  display: none;
  background: none; border: 1px solid var(--line-strong);
  color: var(--text); border-radius: var(--r-sm);
  padding: 7px 11px; font: 700 15px/1 var(--font); cursor: pointer;
}
.sd-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 65;
  background: rgba(2, 6, 3, 0.6);
}

/* ---------------- Layout ---------------- */
.sd-main { max-width: 1280px; margin-left: 238px; padding: 28px 24px 64px; }
.sd-main.sd-wide { max-width: none; }
.sd-page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 22px; }
.sd-page-head h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.sd-page-head .sub { color: var(--muted); font-size: 13.5px; }
.sd-page-head .spacer { flex: 1 1 auto; }

.panel {
  background: var(--glass-material), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* ---------------- KPI-Kacheln ---------------- */
.kpi-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 22px;
}
.kpi {
  padding: 16px 18px 14px;
  position: relative;
  overflow: hidden;
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.kpi::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle 190px at var(--mx) var(--my),
    rgba(255, 255, 255, 0.11) 0%, rgba(169, 224, 96, 0.06) 40%, transparent 72%);
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
}
.kpi:hover { box-shadow: var(--shadow-float); }
.kpi:hover::after { opacity: 1; }
.kpi .kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.kpi .kpi-value { font: 700 28px/1.15 var(--font); margin-top: 4px; letter-spacing: -0.02em; }
.kpi .kpi-value small { font-size: 15px; font-weight: 600; color: var(--muted); }
.kpi .kpi-note { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.kpi.accent .kpi-value { color: var(--brand-soft); text-shadow: 0 0 26px rgba(125, 196, 42, 0.45); }
.kpi.sun .kpi-value { color: var(--sun-soft); text-shadow: 0 0 26px rgba(245, 180, 0, 0.40); }

/* ---------------- Tabellen ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); scrollbar-width: thin; scrollbar-color: rgba(125, 196, 42, 0.5) rgba(255, 255, 255, 0.04); }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
/* Phase-Badge in Kanban-Karten: nur auf Mobil zeigen (dort fehlen die Spaltenköpfe) */
.kb-phase { display: none; }

/* ---------------- Globale Suche (Cmd/Strg+K) ---------------- */
.sd-such-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--muted); border-radius: var(--r-pill);
  font: 600 12.5px var(--font); padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.sd-such-btn:hover { color: var(--text); border-color: var(--brand); }
.sd-such-btn kbd {
  font: 600 10.5px var(--font); color: var(--faint);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
.sd-such-back {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 8, 5, 0.6); backdrop-filter: blur(4px);
  padding: 10vh 16px 0;
}
.sd-such-back.open { display: block; }
.sd-such {
  max-width: 640px; margin: 0 auto;
  background: var(--panel-solid, #0e1510);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px;
}
.sd-such .input { font-size: 15px; padding: 12px 14px; }
.sd-such-hinweis { color: var(--faint); font-size: 11px; margin: 8px 2px 4px; }
#sd-such-ergebnisse { max-height: 52vh; overflow-y: auto; }
.sd-such-gruppe {
  font: 700 10.5px var(--font); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint); margin: 12px 4px 4px;
}
.sd-such-zeile {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 9px; color: var(--text);
  text-decoration: none; font-size: 13.5px;
}
.sd-such-zeile:hover, .sd-such-zeile.aktiv { background: rgba(125, 196, 42, 0.12); }
.sd-such-typ { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.sd-such-leer { color: var(--muted); padding: 14px 6px; font-size: 13px; }

/* ---------------- Kalender (Monatsgrid) ---------------- */
.kal-wochentage {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 6px;
}
.kal-wochentage span {
  font: 700 10.5px var(--font); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); padding: 0 8px;
}
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-zelle {
  min-height: 96px; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 8px; background: rgba(255, 255, 255, 0.02);
}
.kal-zelle.leer { border: none; background: none; }
.kal-zelle.heute { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.kal-tag { font: 700 12px var(--font); color: var(--muted); margin-bottom: 4px; }
.kal-zelle.heute .kal-tag { color: var(--brand); }
.kal-e {
  display: block; font-size: 11px; line-height: 1.35;
  padding: 2px 6px; border-radius: 6px; margin-bottom: 3px;
  color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid transparent; background: rgba(255, 255, 255, 0.05);
}
.kal-e:hover { background: rgba(125, 196, 42, 0.14); }
.kal-e-aufgabe { border-left-color: var(--info); }
.kal-e-wv { border-left-color: var(--warn); }
.kal-e-rechnung { border-left-color: var(--bad); }
.kal-mehr { color: var(--faint); font-size: 10.5px; padding: 1px 6px; }
@media (max-width: 900px) {
  .kal-grid, .kal-wochentage { grid-template-columns: repeat(7, minmax(84px, 1fr)); }
  .kal-grid { overflow-x: auto; }
  .kal-wochentage { overflow-x: hidden; }
}

/* ---------------- Projekt-Import per Drag-and-drop ---------------- */
.pi-zone {
  border: 2px dashed var(--line-strong); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 16px; cursor: pointer;
  color: var(--muted); font-size: 13px; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pi-zone:hover, .pi-zone.aktiv {
  border-color: var(--brand); background: rgba(125, 196, 42, 0.07); color: var(--text);
}
.pi-zone.liest { border-color: var(--gold, #F5B400); }
.pi-datei {
  display: grid; grid-template-columns: 1fr auto 170px; gap: 10px;
  align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.pi-datei-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-datei-kb { color: var(--faint); font-size: 11px; white-space: nowrap; }
.pi-datei.zu-gross { opacity: 0.5; }
.pi-datei .input { padding: 5px 8px; font-size: 12px; }
@media (max-width: 760px) {
  .pi-datei { grid-template-columns: 1fr 140px; }
  .pi-datei-kb { display: none; }
}

/* Feldbezogener Fehlerhinweis: bleibt stehen, bis der Nutzer korrigiert */
.input.fehler {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(224, 121, 106, 0.16);
}
.feld-fehler {
  color: var(--bad); font-size: 12px; line-height: 1.4;
  margin-top: 5px; display: flex; gap: 6px; align-items: flex-start;
}
.feld-fehler::before { content: "!"; font-weight: 800; }

/* Dubletten-Hinweis unter dem Firma-Feld der Kundenanlage */
.kf-dub-titel { color: var(--warn); font-size: 11.5px; margin: 6px 0 3px; }
/* Hinweis über dem vorbefüllten Kundenformular und Fundzeilen im
   Projekt-Import: gelesene Werte sichtbar als Lesevorschlag kennzeichnen */
.kf-import-hinweis {
  color: var(--muted); font-size: 12px; padding: 8px 10px; margin: 4px 0 10px;
  border: 1px dashed var(--line); border-radius: 8px;
  background: rgba(106, 169, 244, 0.06);
}
.pi-fund-zeile { color: var(--muted); font-size: 12px; padding: 2px 0; }
.kf-dub-zeile {
  display: block; color: var(--muted); font-size: 12.5px;
  padding: 3px 0; text-decoration: none;
}
.kf-dub-zeile:hover { color: var(--brand-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Auswertung: Monats-Balken + Funnel ---------------- */
.aw-chart { overflow-x: auto; }
.aw-balken-reihe { display: flex; gap: 10px; align-items: flex-end; min-width: 560px; }
.aw-monat { flex: 1 1 0; text-align: center; min-width: 38px; }
.aw-balken-paar { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100px; }
.aw-balken {
  width: 14px; min-height: 2px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
}
.aw-balken.vor { background: rgba(255, 255, 255, 0.22); }
.aw-monat-label { color: var(--muted); font-size: 11px; margin-top: 6px; }
.aw-monat-wert { color: var(--faint); font-size: 10px; min-height: 13px; }
.aw-legende { display: flex; gap: 18px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.aw-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.aw-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.aw-funnel-zeile { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.aw-funnel-label { flex: 0 0 168px; font-size: 12.5px; color: var(--muted); }
.aw-funnel-balken { flex: 1 1 auto; height: 14px; background: rgba(255, 255, 255, 0.05); border-radius: 99px; overflow: hidden; }
.aw-funnel-balken > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); border-radius: 99px; }
.aw-funnel-zahl { flex: 0 0 76px; text-align: right; font-weight: 700; font-size: 13px; }
.aw-funnel-pct { color: var(--faint); font-weight: 500; font-size: 10.5px; margin-left: 5px; }
@media (max-width: 760px) {
  .aw-funnel-label { flex-basis: 118px; }
}
/* Aufgabenliste: Titel und Beschreibung begrenzen, damit Zeilen kompakt bleiben */
.t-titel {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.t-desc {
  color: var(--faint); font-size: 11.5px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
table.sd { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.sd th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--faint); padding: 12px 14px 9px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.sd td {
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.sd tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.016); }
table.sd tbody tr { cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease; }
table.sd tbody tr:hover {
  background: linear-gradient(90deg, rgba(125, 196, 42, 0.10), rgba(125, 196, 42, 0.03));
  box-shadow: 2.5px 0 0 var(--brand) inset;
}
table.sd td.num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

/* ---------------- Badges (nie umbrechen) ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--font);
  padding: 5px 10px; border-radius: var(--r-pill);
  white-space: nowrap; border: 1px solid transparent;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.badge.b-ok    { color: #A9E5AC; background: rgba(76, 175, 80, 0.13); border-color: rgba(76, 175, 80, 0.35); }
.badge.b-ok .dot { background: var(--ok); }
.badge.b-warn  { color: #F0D48A; background: rgba(224, 181, 71, 0.12); border-color: rgba(224, 181, 71, 0.35); }
.badge.b-warn .dot { background: var(--warn); }
.badge.b-bad   { color: #F0A99E; background: rgba(224, 121, 106, 0.12); border-color: rgba(224, 121, 106, 0.35); }
.badge.b-bad .dot { background: var(--bad); }
.badge.b-info  { color: #A9CCF6; background: rgba(106, 169, 244, 0.12); border-color: rgba(106, 169, 244, 0.35); }
.badge.b-info .dot { background: var(--info); }
.badge.b-brand { color: var(--brand-soft); background: rgba(125, 196, 42, 0.12); border-color: rgba(125, 196, 42, 0.35); }
.badge.b-brand .dot { background: var(--brand); }
.badge.b-mut   { color: var(--muted); background: rgba(150, 172, 151, 0.10); border-color: rgba(150, 172, 151, 0.28); }
.badge.b-mut .dot { background: var(--muted); }
/* Sphären-Tag Stromfritzen: Orange, klar unterscheidbar vom Ampel-Gelb */
.badge.b-sf    { color: #F6C177; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.42); }
.badge.b-sf .dot { background: #f59e0b; }

/* ---------------- Buttons / Inputs ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 45%, var(--brand-deep) 100%);
  color: #07110A; border: none; border-radius: var(--r-sm);
  font: 700 13.5px var(--font); padding: 10px 18px;
  cursor: pointer; white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -2px 0 rgba(0, 0, 0, 0.28) inset,
    0 4px 12px -3px rgba(125, 196, 42, 0.5),
    0 8px 22px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 0 rgba(0, 0, 0, 0.28) inset,
    0 7px 18px -4px rgba(125, 196, 42, 0.6),
    0 14px 30px -10px rgba(0, 0, 0, 0.7);
}
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 8px -2px rgba(0, 0, 0, 0.5); }
.btn.secondary {
  background: var(--glass-material);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.5);
}
.btn.secondary:hover { border-color: var(--brand); }
.btn.sun {
  background: linear-gradient(180deg, #FFE082 0%, var(--sun) 50%, #C79200 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 0 rgba(0, 0, 0, 0.3) inset,
    0 4px 14px -3px rgba(245, 180, 0, 0.55),
    0 8px 22px -8px rgba(0, 0, 0, 0.6);
}
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }

.input, select.input, textarea.input {
  width: 100%; background: rgba(6, 13, 8, 0.65);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--text); font: 400 14px var(--font);
  padding: 10px 13px; outline: none;
}
.input:focus { border-color: var(--brand); }
/* Roter Überfällig-Zähler in der Sidebar */
.sd-nav-alarm {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px;
  font: 700 10.5px/1 var(--mono);
  color: #FFD9D2; background: rgba(224, 121, 106, 0.25);
  border: 1px solid rgba(224, 121, 106, 0.55);
  border-radius: var(--r-pill);
}

/* Sichtbarer Fokus-Ring für Tastatur-Bedienung, portalweit. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.input::placeholder { color: var(--faint); }
label.f-label { display: block; font: 600 12px var(--font); color: var(--muted); margin: 14px 0 5px; }

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-row .input { width: 240px; }
.chip {
  background: none; border: 1px solid var(--line-strong);
  color: var(--muted); border-radius: var(--r-pill);
  font: 600 12.5px var(--font); padding: 7px 14px; cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--brand); }
.chip.active { color: #08130A; background: var(--brand); border-color: var(--brand); }

.pipeline-legende {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -8px 0 16px;
}

/* ---------------- Kanban ---------------- */
.kanban {
  display: grid; gap: 14px;
  grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr);
  overflow-x: auto; padding-bottom: 12px;
  /* stretch: alle Spalten laufen auf Höhe der längsten, das Board wirkt ruhig
     und kurze Spalten bleiben große Drop-Ziele */
  align-items: stretch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 196, 42, 0.5) rgba(255, 255, 255, 0.04);
}
/* Sichtbare, markenfarbene Scroll-Leiste: man SIEHT dass es weitergeht */
.kanban::-webkit-scrollbar { height: 9px; }
.kanban::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 99px; }
.kanban::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.kb-col { padding: 12px; min-height: 200px; }
.kb-col.dragover {
  outline: 2px dashed var(--brand); outline-offset: -4px;
  box-shadow: var(--shadow), 0 0 34px -6px rgba(125, 196, 42, 0.5);
}
/* Spaltenkopf: zentrierte, wertige Glas-Kapsel mit Marken-Unterlinie. */
.kb-col-head {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  padding: 12px 10px 12px; margin: -4px -4px 12px;
  font: 700 12.5px/1.3 var(--font);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgba(9, 16, 10, 0.55);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  position: relative;
}
.kb-col-head::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(125, 196, 42, 0.75), rgba(245, 180, 0, 0.55), transparent);
  border-radius: 2px;
}
/* Kartentyp auf einen Blick: Kunden tragen eine blaue, Projekte eine grüne Kante. */
.kb-card.kb-kunde { border-left: 3px solid rgba(106, 169, 244, 0.75); }
.kb-card.kb-projekt { border-left: 3px solid rgba(125, 196, 42, 0.75); }
.kb-col-head .count {
  color: var(--brand-soft); font: 700 11.5px var(--mono);
  background: rgba(125, 196, 42, 0.12);
  border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 2px 8px;
}
.kb-card {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 55%, transparent 100%),
    var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 12px; margin-bottom: 9px;
  cursor: grab; font-size: 13px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 3px 10px -3px rgba(0, 0, 0, 0.5);
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease, border-color 0.16s ease;
}
.kb-card:hover {
  transform: translateY(-3px) scale(1.012);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 14px 30px -10px rgba(0, 0, 0, 0.75),
    0 0 28px -8px rgba(125, 196, 42, 0.35);
}
.kb-card:active { cursor: grabbing; }
.kb-card .t { font-weight: 600; line-height: 1.35; }
a.t { display: block; color: inherit; text-decoration: none; }
a.t:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.td-clamp {
  max-width: 260px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-card .s { color: var(--muted); font-size: 12px; margin-top: 3px; }
.kb-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kb-card.dragging {
  opacity: 0.65;
  transform: rotate(2.5deg) scale(1.03);
  box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.9), 0 0 40px -8px rgba(125, 196, 42, 0.45);
}
/* Priorität am Kartenrand, unauffällig, nicht der Blickfang wie die Meta-Badges */
.kb-prio {
  margin-top: 8px; width: 100%; font-size: 11.5px; padding: 4px 6px;
  background: rgba(255, 255, 255, 0.03); border-color: var(--line);
}
/* Warteliste/Aussortiert: gedeckelte, gestrichelte Spalte statt Marken-Unterlinie,
   damit sie sich klar vom aktiven Prozess-Board absetzt (MM-Team-Termin 19.08.2026) */
.kb-col-warteliste { opacity: 0.88; }
.kb-col-warteliste .kb-col-head {
  background: rgba(9, 16, 10, 0.35);
  border-style: dashed;
}
.kb-col-warteliste .kb-col-head::after { background: repeating-linear-gradient(90deg, var(--muted) 0 6px, transparent 6px 12px); }
.kb-card .reason { color: var(--muted); font-size: 11.5px; font-style: italic; margin-top: 6px; }
/* Sichtung (Altbestand): eigene Spalte ganz links, blau abgesetzt statt Markengrün,
   damit klar bleibt: das ist noch keine Projektierung, sondern die Warteschlange
   der aus SharePoint übernommenen Bestandsakten (MM-Team-Termin 19.08.2026) */
.kb-col-sichtung .kb-col-head {
  background: rgba(9, 13, 20, 0.4);
}
.kb-col-sichtung .kb-col-head::after { background: rgba(106, 169, 244, 0.55); }
.kb-card .sich-actions { display: flex; gap: 6px; margin-top: 8px; }
.kb-card .sich-actions .btn { flex: 1; padding: 4px 8px; font-size: 12px; }

/* ---------------- Wiederkehrende Bausteine ---------------- */
.sd-head-search { width: 250px; }
.sd-check {
  width: 17px; height: 17px;
  accent-color: var(--brand);
  cursor: pointer;
}
.kpi[data-href] { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.kpi[data-href]:hover { border-color: var(--brand); transform: translateY(-1px); }

/* Prozess-Schritte und Aktivitätslog in der Projektakte */
.fo-step { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fo-step-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fo-step-label { flex: 1 1 160px; font-size: 13.5px; font-weight: 700; }
.fo-select { max-width: 150px; }
.fo-extra { max-width: 170px; }
.fo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.log-entry {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.log-entry .log-zeit { color: var(--faint); font-family: var(--mono); white-space: nowrap; }

/* ---------------- Modal ---------------- */
.modal-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2, 6, 3, 0.72);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 16px; overflow-y: auto;
}
.modal-back.open { display: flex; }
.modal {
  width: 100%; max-width: 560px;
  background:
    var(--glass-material),
    var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-float);
  padding: 22px 24px 24px;
  animation: sd-modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.modal.modal-lg { max-width: 680px; }
@keyframes sd-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h2 { margin: 0 0 4px; font-size: 18px; }
.modal .m-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.modal .m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.detail-list { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.detail-list li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.detail-list li span:first-child { color: var(--muted); flex: 0 0 auto; min-width: 0; }
/* Der Wert darf umbrechen statt aus der Zeile zu laufen. Ohne min-width:0
   weigert sich ein Flex-Kind zu schrumpfen, und lange Mailadressen oder
   Bezeichnungen ohne Leerzeichen ragen über den Rand hinaus. Am Telefon war
   das bei zwei von fünf Zeilen der Fall. */
.detail-list li span:last-child {
  text-align: right; min-width: 0; overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  /* Am Telefon untereinander: nebeneinander bleibt für den Wert kaum Platz. */
  .detail-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .detail-list li span:last-child { text-align: left; }
  /* Untereinander wird aus der Mindestbreite 240px eine Mindesthöhe (flex:1 1 240px steht
     inline in Anrufliste und Kundenliste). Das ließ am Handy je Zeile rund 200px Leerraum
     zwischen Nummer und Knöpfen (Befund 12.10.2026). */
  .detail-list li > span { flex-basis: auto !important; }
}

/* ---------------- Toast / Leer / Laden ---------------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 120; background: var(--panel-solid);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 18px; font: 600 13px var(--font);
  box-shadow: var(--shadow); display: none;
}
.toast.show { display: block; }
.toast.err { border-color: rgba(224, 121, 106, 0.6); color: #F0A99E; }
.empty { padding: 44px 20px; text-align: center; color: var(--faint); font-size: 13.5px; }
/* Leere Zustände bekommen ein dezentes Sonnen-Panel-Icon in CI-Grün. */
.empty::before {
  content: "";
  display: block; width: 46px; height: 46px; margin: 0 auto 12px;
  opacity: 0.55;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%237DC42A" stroke-width="2.2" stroke-linecap="round"><circle cx="24" cy="17" r="6"/><path d="M24 5v4M35 8l-2.6 2.6M13 8l2.6 2.6M39 17h4M5 17h4"/><path d="M10 43l5-12h18l5 12z"/><path d="M14.8 36h18.4M21 31l-2.5 12M27 31l2.5 12"/></svg>') center / contain no-repeat;
}
.loading { padding: 44px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
/* Lade-Zustand: pulsierende Panel-Balken statt nur Text. */
.loading::before {
  content: "";
  display: block; width: 120px; height: 8px; margin: 0 auto 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(125,196,42,0.10) 25%, rgba(125,196,42,0.45) 50%, rgba(125,196,42,0.10) 75%);
  background-size: 200% 100%;
  animation: sd-shimmer 1.1s linear infinite;
}
@keyframes sd-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ---------------- Login ---------------- */
/* Fotorealistischer Anlagen-Hintergrund (assets/login-hero.webp), stark
   abgedunkelt, damit die Glas-Karte und die CI-Farben führen. */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(4, 9, 5, 0.62) 0%, rgba(4, 9, 5, 0.78) 55%, rgba(4, 9, 5, 0.92) 100%),
    url("../assets/login-hero.webp") center / cover no-repeat fixed,
    var(--bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  padding: 38px 34px 34px;
  text-align: center;
}
.login-card img.logo { width: 210px; max-width: 80%; margin: 0 auto 6px; display: block; }
/* JMEC-Signet ist fast quadratisch, daher höhenbasiert statt breit */
.login-card img.logo.logo-jmec { width: auto; height: 76px; max-width: 60%; }
.login-card .desk-line {
  font: 700 11px/1 var(--mono); letter-spacing: 0.22em;
  color: var(--sun); margin: 10px 0 26px;
}
.login-card form { text-align: left; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 22px; padding: 12px; }
.login-err {
  margin-top: 14px; font-size: 13px; color: #F0A99E;
  background: rgba(224, 121, 106, 0.10);
  border: 1px solid rgba(224, 121, 106, 0.35);
  border-radius: var(--r-sm); padding: 10px 12px; display: none;
}
.login-foot { margin-top: 26px; font-size: 11.5px; color: var(--faint); }

/* ---------------- Sektionen ---------------- */
.section-title {
  font: 700 13px var(--font); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  margin: 26px 0 12px;
}
/* Erklärzeile unter einer Sektionsüberschrift, z. B. wofür der zweite
   Ansprechpartner gedacht ist. Sitzt bewusst dicht am Titel. */
.f-hinweis {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  margin: -6px 0 10px;
}
/* Trefferzusatz in der globalen Suche, wenn ein Kunde nur über den zweiten
   Kontakt gefunden wurde. */
.sd-such-ap2 { color: var(--muted); font-size: 11.5px; }
.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
/* Grid-Kinder dürfen schrumpfen, sonst sprengen breite Tabellen ihren
   Scroll-Container und die ganze Seite scrollt horizontal (Mobil-Falle). */
.two-col > section { min-width: 0; }
.m-grid > div { min-width: 0; }
.m-grid input, .m-grid select { min-width: 0; max-width: 100%; }
#mein-tag-liste li { flex-wrap: wrap; }
#mein-tag-liste li span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
#mein-tag-liste li > span:first-child { flex: 1 1 auto; }
#mein-tag-liste .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Automatik-Tabellen in der Akte scrollen im Panel, nie mit der Seite */
#netzanfragen-box { overflow-x: auto; }

/* ---------------- Bewegungs-Rücksicht ---------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-logo::before { animation: none; }
  .modal { animation: none; }
  .kpi, .kb-card, .btn, .sd-back { transition: none; }
  .kanban { scroll-behavior: auto; }
}

/* ---------------- Mobil ---------------- */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .sd-sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: 260px;
    box-shadow: var(--shadow);
  }
  body.sd-nav-open .sd-sidebar { transform: translateX(0); }
  body.sd-nav-open .sd-scrim { display: block; }
  .sd-topbar { margin-left: 0; padding: 0 14px; }
  .sd-burger { display: inline-flex; }
  .sd-main { margin-left: 0; padding: 18px 14px 56px; }
  .filter-row .input { width: 100%; }
  .m-grid { grid-template-columns: 1fr; }
  /* Touch-Ziele: Filter-Chips auf mindestens 44px Höhe */
  .chip { min-height: 44px; padding: 11px 14px; }
  /* Navigations-Gruppenlabels mit mehr Kontrast auf dem dunklen Slide-in */
  .sd-nav-group-label { color: var(--muted); }
  /* Breite Tabellen: Innenschatten rechts signalisiert horizontales Scrollen */
  .table-wrap { box-shadow: inset -18px 0 14px -14px rgba(0, 0, 0, 0.55); }
  /* Kanban-Karten zeigen ihre Phase, weil die Spaltenköpfe hier wegfallen */
  .kb-phase { display: inline-flex; }
  /* Projektdurchgang: Kopfzeile nur mit Name, Ampel und Frist-Alarm */
  .pd-b-neben { display: none; }
}

/* Projektdurchgang (wöchentliche Runde) */
.pd-row { border-bottom: 1px solid var(--line); }
.pd-row:last-child { border-bottom: none; }
.pd-row.pd-done .pd-name { opacity: 0.55; }
.pd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; flex-wrap: wrap;
}
.pd-head:hover { background: rgba(125, 196, 42, 0.05); }
.pd-name { font-weight: 600; color: inherit; text-decoration: none; }
.pd-name:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.pd-caret { color: var(--muted); font-size: 12px; width: 16px; text-align: center; }
.pd-panel { padding: 4px 16px 16px 44px; }
.pd-grid { display: grid; grid-template-columns: 1fr 260px; gap: 14px; }
.pd-selects { display: grid; gap: 10px; align-content: start; }
.pd-tasks { margin-top: 12px; display: grid; gap: 6px; }
.pd-task {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 7px 10px;
  background: rgba(255, 255, 255, 0.03); border-radius: 8px;
}
.pd-task .sub { color: var(--muted); white-space: nowrap; }
.pd-neu { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pd-neu input[name="titel"] { flex: 1; min-width: 200px; }
@media (max-width: 760px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-panel { padding-left: 16px; }
}

/* Inline-Ampel in der Projektliste: Select im Badge-Look */
.ampel-inline {
  appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  font: 600 11.5px var(--font);
  padding: 4px 22px 4px 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23A9C0AA'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ampel-inline.b-ok   { color: var(--ok);   border-color: rgba(76, 175, 80, 0.5); }
.ampel-inline.b-warn { color: var(--warn); border-color: rgba(224, 181, 71, 0.5); }
.ampel-inline.b-bad  { color: var(--bad);  border-color: rgba(224, 121, 106, 0.55); }
.ampel-inline.b-info { color: var(--info); border-color: rgba(106, 169, 244, 0.5); }
.ampel-inline option { background: var(--panel-solid); color: var(--text); }

/* Partnerfirmen-Verzeichnis */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.pf-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pf-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-float); }
.pf-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pf-stars { color: var(--sun); font-size: 13px; letter-spacing: 2px; }
.pf-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.pf-gewerke { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pf-notiz { color: var(--faint); font-size: 12px; margin-top: 8px; }

/* Typspezifische Projektierungs-Schritte in der Akte */
.fo-hinweis { color: var(--faint); font-size: 12px; margin: 2px 0 6px; }
.fo-schritt-notiz { font-size: 12.5px; padding: 6px 10px; margin-bottom: 4px; }

/* Fälligkeits-Gruppen im Aufgabenreiter */
.tr-gruppe td {
  font: 700 11px var(--font);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sun);
  background: rgba(245, 180, 0, 0.05);
  border-top: 1px solid var(--line-strong);
  padding: 7px 14px 6px;
}

/* Angebots-Positionszeilen im Modal */
.ag-pos {
  display: grid;
  grid-template-columns: 1fr 90px 70px 110px 38px;
  gap: 6px; margin-bottom: 6px; align-items: center;
}
@media (max-width: 760px) {
  .ag-pos { grid-template-columns: 1fr 70px 60px 90px 34px; }
}

/* ===== Wiedervorlagen-Melder in der Kopfzeile =========================
   Gebaut nach Frank Wesselys Sprachnachricht vom 21.08.2026: es soll etwas
   aufploppen, statt dass er ein Board nach roten Karten durchsucht. */
.wv-halter { position: relative; display: flex; align-items: center; }
.wv-glocke {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: var(--glass-material);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--muted); font: 600 12.5px var(--font);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wv-glocke:hover { color: var(--text); border-color: var(--brand); }
.wv-glocke .wv-icon { font-size: 13px; line-height: 1; filter: grayscale(1) opacity(.75); }
.wv-glocke.hat-heute { color: #F0D48A; border-color: rgba(224, 181, 71, .5); }
.wv-glocke.hat-heute .wv-icon { filter: none; }
.wv-glocke.hat-faellig {
  color: #FFD9D2; border-color: rgba(224, 121, 106, .75);
  background: rgba(224, 121, 106, .16);
}
.wv-glocke.hat-faellig .wv-icon { filter: none; }
.wv-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  font: 700 11px/1 var(--mono);
  background: rgba(224, 121, 106, .3);
  border: 1px solid rgba(224, 121, 106, .6);
  border-radius: var(--r-pill);
}
.wv-glocke.hat-heute .wv-zahl {
  background: rgba(224, 181, 71, .22); border-color: rgba(224, 181, 71, .55);
}
@keyframes wv-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 121, 106, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(224, 121, 106, .28); }
}
.wv-glocke.wv-puls { animation: wv-puls 1.1s ease-in-out 3; }

.wv-panel {
  position: absolute; top: 40px; right: 0; z-index: 120;
  width: min(430px, calc(100vw - 28px));
  max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px;
  background: rgba(10, 18, 11, .97);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .85);
  display: none;
}
.wv-panel.open { display: block; }
.wv-panel-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--line);
}
.wv-panel-head strong { font: 700 13.5px var(--font); color: var(--text); }
.wv-panel-sub { font: 500 11.5px var(--mono); color: var(--muted); }
.wv-liste { list-style: none; margin: 0; padding: 0; }
.wv-zeile { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.wv-zeile:last-child { border-bottom: none; }
.wv-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wv-firma { font: 700 13.5px var(--font); color: var(--text); }
.wv-sub { margin-top: 2px; font: 400 11.5px var(--font); color: var(--muted); }
.wv-schritt { margin-top: 2px; color: var(--faint); }
.wv-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.wv-btn {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  background: var(--glass-material);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--muted); font: 600 11.5px var(--font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.wv-btn:hover { color: var(--text); border-color: var(--brand); }
.wv-btn.wv-ruf {
  color: #0B1A05; background: var(--brand);
  border-color: var(--brand); font-weight: 700;
}
.wv-btn.wv-ruf:hover { filter: brightness(1.08); color: #0B1A05; }
.wv-btn.wv-leer { opacity: .55; cursor: default; }
.wv-leer-zeile { padding: 16px 12px; color: var(--faint); font-size: 12.5px; }
.wv-panel-fuss {
  display: flex; gap: 14px; padding: 9px 12px;
  border-top: 1px solid var(--line);
  font: 600 11.5px var(--font);
}
.wv-panel-fuss a { color: var(--muted); text-decoration: none; }
.wv-panel-fuss a:hover { color: var(--brand); }
@media (max-width: 700px) {
  .wv-glocke .wv-text { display: none; }
  .wv-panel { right: -8px; width: calc(100vw - 20px); }
  /* Kay Braune arbeitet zu 98 Prozent am iPhone (Messung 24.08.2026: 53 von 54
     Sitzungen). Auf 375 Pixeln brach der Pfad "Vertrieb (CRM) · Akquise-Board
     (Kunden)" auf vier Zeilen um und blähte die Kopfleiste von 52 auf 81 Pixel.
     Wo man herkommt, sagt am Telefon ohnehin der Zurück-Pfeil. */
  .sd-topbar .sd-crumb { display: none; }
  .sd-topbar { min-height: 52px; }
  /* Die Tastenkombination hilft nur, wer eine Tastatur hat. */
  .sd-such-btn kbd { display: none; }
  .sd-such-btn { padding: 0 12px; }
  /* Dialoge am Telefon: oben weniger Luft, und die Schaltflächen kleben unten
     am Dialog. Der Anruf-Dialog ist 877 Pixel hoch, bei 812 Pixel Bildschirm
     musste man sonst erst 138 Pixel scrollen, um speichern zu können. */
  .modal-back { padding: 2vh 10px 10px; }
  .modal { padding: 18px 16px 0; }
  .modal .m-actions {
    position: sticky; bottom: 0;
    margin: 16px -16px 0; padding: 12px 16px;
    background: linear-gradient(180deg, transparent 0%, var(--panel-solid) 22%);
    border-top: 1px solid var(--line);
  }
  .modal .m-actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Board am Telefon: eine Spalte fuellt den Bildschirm und rastet ein, statt
     dass zwei halbe nebeneinander stehen. Gewischt wird von Stufe zu Stufe. */
  .kanban {
    grid-auto-columns: minmax(86vw, 1fr);
    scroll-snap-type: x mandatory;
    gap: 10px;
  }
  .kanban .kb-col { scroll-snap-align: center; }
  .kb-card { font-size: 14px; }
  .kb-card .wv-btn { padding: 6px 11px; font-size: 12px; }
  .kb-wv-aktionen { gap: 7px; }
}

/* Telefonnummer ist überall eine Wählnummer, nicht nur ein Text. */
.sd-tel {
  color: var(--brand-soft); text-decoration: none;
  font: 500 12.5px var(--mono); white-space: nowrap;
}
.sd-tel:hover { text-decoration: underline; }
.kb-card .sd-tel { font-size: 11.5px; }

/* Karten, die jetzt dran sind, tragen die Farbe am Rand statt nur im Badge.
   Damit sieht man die Lage einer Spalte, ohne sie zu lesen. */
.kb-card.kb-wv-faellig {
  border-color: rgba(224, 121, 106, .6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    -3px 0 0 0 var(--bad) inset,
    0 3px 10px -3px rgba(0, 0, 0, .5);
}
.kb-card.kb-wv-heute {
  border-color: rgba(224, 181, 71, .5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    -3px 0 0 0 var(--warn) inset,
    0 3px 10px -3px rgba(0, 0, 0, .5);
}
.kb-wv-aktionen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kb-wv-aktionen .wv-btn { padding: 3px 8px; font-size: 10.5px; }
.kb-col-head .count.kb-count-wv {
  color: #F0A99E; background: rgba(224, 121, 106, .16);
  border-color: rgba(224, 121, 106, .45);
}
/* Filter-Chip, hinter dem etwas Fälliges liegt */
.chip.chip-alarm {
  color: #FFD9D2; border-color: rgba(224, 121, 106, .7);
  background: rgba(224, 121, 106, .14);
}
.chip.chip-alarm.active { color: #08130A; background: var(--bad); border-color: var(--bad); }
/* Nummer, die so nicht wählbar ist: sichtbar anders als eine echte Wählnummer,
   damit niemand sie versehentlich abtippt. */
.sd-tel-krumm {
  color: var(--warn); cursor: help;
  text-decoration: underline dotted rgba(224, 181, 71, .6);
  text-underline-offset: 3px;
}

/* ---------------- Kundenportfolio (Gesamt-Pipeline, Ansicht "Nach Kunde") ----------------
   Eine Zeile je Kunde mit den Gesamtwerten, aufklappbar zu einer Tabelle mit
   jedem Gebäude. Liegt auf denselben Daten wie das Stufen-Board. */

.ansicht-schalter { display: inline-flex; gap: 6px; align-items: center; }
.ansicht-schalter .chip { padding: 5px 12px; font-size: 12px; }

.btn.btn-klein { padding: 6px 12px; font-size: 12px; }

table.sd.kp-tabelle { min-width: 1080px; }
table.sd.kp-tabelle > thead > tr > th:first-child,
table.sd.kp-tabelle > tbody > tr.kp-kunde > td:first-child { max-width: 300px; }
table.sd.kp-sub select.kp-stufe { max-width: 168px; }
table.sd.kp-tabelle > tbody > tr.kp-kunde > td { vertical-align: top; }
tr.kp-kunde.auf { background: rgba(125, 196, 42, 0.07); box-shadow: 2.5px 0 0 var(--brand) inset; }
.kp-caret { display: inline-block; width: 14px; color: var(--brand); font-size: 11px; }
.kp-sub-text { color: var(--faint); font-size: 11.5px; margin-top: 3px; }
.kp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kp-tags:empty { display: none; }

/* Aufgeklappter Bereich: keine Klickzeile, kein Hover-Balken. */
tr.kp-detail { cursor: default; }
tr.kp-detail:hover { background: none; box-shadow: none; }
tr.kp-detail > td { padding: 4px 14px 18px; background: rgba(255, 255, 255, 0.02); }
.kp-detail-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 2px 8px; }
.kp-detail-summe { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.kp-leer { color: var(--faint); font-size: 13px; padding: 14px 2px; }
.kp-leer a { margin-left: 8px; }

table.sd.kp-sub { min-width: 1180px; font-size: 12.5px; }
table.sd.kp-sub th { padding: 9px 11px 7px; }
table.sd.kp-sub td { padding: 8px 11px; }
table.sd.kp-sub tbody tr { cursor: default; }
table.sd.kp-sub tbody tr:hover { box-shadow: 2px 0 0 var(--brand-deep) inset; }

/* Fortschritt über alle Gebäude eines Kunden: drei Blöcke des Wegs. */
.kp-bar {
  display: flex; width: 100%; min-width: 120px; height: 8px;
  border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.kp-bar > span { display: block; height: 100%; }
.kp-bar-start { background: rgba(169, 192, 170, 0.75); }
.kp-bar-lauf  { background: var(--info); }
.kp-bar-reif  { background: var(--brand); }

/* Die sieben Pflichtschritte als Punktreihe. */
.kp-dots { display: inline-flex; gap: 4px; align-items: center; }
.kp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid transparent; }
.kp-dot.ok    { background: var(--ok); }
.kp-dot.lauf  { background: var(--warn); }
.kp-dot.offen { background: rgba(255, 255, 255, 0.10); border-color: var(--line-strong); }
.kp-dot.aus   { background: none; border-color: rgba(150, 172, 151, 0.35); }

.kp-legende {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin: 12px 4px 0; font-size: 11.5px; color: var(--muted);
}
.kp-legende span { display: inline-flex; align-items: center; gap: 6px; }

/* Gebäude hängt nur über den Firmennamen am Kunden: ein Klick macht daraus
   eine feste Verknüpfung. */
.kp-verkn {
  margin-left: 8px; background: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--faint); font: 600 10.5px var(--font); padding: 2px 8px;
}
.kp-verkn:hover { color: var(--brand-soft); border-color: var(--brand); }

@media (max-width: 860px) {
  .ansicht-schalter { order: 3; width: 100%; margin-top: 4px; }
  .kp-detail-kopf { gap: 8px; }
}
/* "Danach erfassen" ist der Weg, den der Telefonvertrieb nach jedem Gespräch
   geht. Er steht deshalb vor den Verschiebe-Knöpfen und ist als einziger
   hervorgehoben. */
.wv-btn.wv-erfassen {
  color: #E7F6D6; background: rgba(125, 196, 42, .16);
  border-color: rgba(125, 196, 42, .55); font-weight: 700;
}
.wv-btn.wv-erfassen:hover { color: #08130A; background: var(--brand); border-color: var(--brand); }
#modal-anruf .filter-row { gap: 6px; }
#modal-anruf .chip { padding: 6px 11px; font-size: 12px; }
#an-zeitwahl .chip { font-family: var(--mono); font-size: 11.5px; padding: 5px 10px; }
/* Einmaliger Hinweis auf neue Funktionen. Unten rechts, wegklickbar, nie wieder. */
.wv-hinweis {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: min(360px, calc(100vw - 32px));
  padding: 15px 17px;
  background: rgba(10, 18, 11, .97);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(125, 196, 42, .45);
  border-radius: var(--r-md);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .85);
  animation: wv-hinweis-auf .35s cubic-bezier(.2, .7, .2, 1);
}
@keyframes wv-hinweis-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.wv-hinweis strong { display: block; font: 700 13.5px var(--font); color: var(--brand-soft); margin-bottom: 6px; }
.wv-hinweis p { margin: 0 0 7px; font: 400 12.5px/1.5 var(--font); color: var(--muted); }
.wv-hinweis p strong { display: inline; color: var(--text); font-size: inherit; }
.wv-hinweis-fuss { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.wv-hinweis-fuss .btn { padding: 7px 14px; font-size: 12.5px; }
/* Zwei Reihen: oben die beiden Wege, die im Gespräch zählen (anrufen und
   danach erfassen), darunter das Beiwerk. Vorher brach die Zeile um und der
   wichtigste Knopf stand irgendwo dazwischen. */
.wv-aktionen.wv-haupt { margin-top: 9px; }
.wv-aktionen.wv-neben { margin-top: 5px; }
.wv-aktionen.wv-neben .wv-btn { padding: 4px 9px; font-size: 11px; opacity: .85; }
.wv-aktionen.wv-neben .wv-btn:hover { opacity: 1; }
/* Zuständigkeit auf der Karte. Bei zwei Leuten weiß es jeder, ab dem dritten
   nicht mehr: das Kürzel steht deshalb auf jeder Karte, und "niemand" faellt
   auf, statt still zu bleiben. */
.badge.owner-badge { font-family: var(--mono); letter-spacing: .04em; }
.badge.owner-leer { opacity: .9; }
/* Schnellwahl unter Wiedervorlage und Uhrzeit im Erfassungsformular. Klein und
   ruhig: sie soll die Felder ergänzen, nicht mit ihnen konkurrieren. */
.wv-schnell { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.wv-schnell .chip { padding: 4px 9px; font-size: 11px; }
.wv-schnell .chip:not(.active) { color: var(--faint); border-color: var(--line); }
.wv-schnell .chip:hover { color: var(--text); border-color: var(--brand); }
/* Sichtung: Lagebild über dem Stapel und der Knopf für die nächste Portion.
   285 Karten auf einmal sind keine Liste, sondern eine Wand. */
.sicht-lage {
  margin: -6px 0 10px; padding: 6px 9px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); font: 500 11.5px var(--font); text-align: center;
}
.btn.sicht-mehr {
  width: 100%; margin-top: 4px; justify-content: center;
  font-size: 12px; padding: 9px 12px;
}
/* Schnelleintrag im Pflegestand: die fehlende Angabe steht in derselben Zeile,
   in der sie angemahnt wird. Der Weg über die Akte bleibt, er ist nur nicht
   mehr der einzige. */
.pf-zelle { white-space: nowrap; }
.pf-schnell { display: flex; align-items: center; gap: 5px; }
.pf-schnell .input.pf-in {
  height: 30px; padding: 3px 7px; font-size: 12px;
  min-width: 96px; max-width: 132px;
}
.pf-schnell .input.pf-in[type="text"] { min-width: 84px; }
.pf-schnell .btn.pf-save { padding: 5px 11px; font-size: 12px; white-space: nowrap; }
.pf-schnell .btn.pf-save:disabled { opacity: .55; cursor: default; }


/* ---------------- Leadkarte: Notizen als Verlauf, Felder direkt ändern (15.09.2026) ----------------
   Frank Wessely: Die Notiz stand als ein rechtsbündiger Absatz ohne Zeilenumbrüche in der Akte,
   bei 5.000 Zeichen "ein Buchstabe nach dem anderen". Jetzt Einträge untereinander, neueste oben. */
.nz-zahl { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.nz-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nz-werkzeug #ma-nz-neu { flex: 3 1 260px; width: auto; }
.nz-werkzeug #ma-nz-suche { flex: 1 1 160px; width: auto; }
.nz-werkzeug .btn { padding: 9px 14px; }
.nz-verlauf {
  margin-top: 8px; max-height: 52vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.nz-eintrag {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.nz-eintrag:last-child { border-bottom: 0; }
.nz-vorspann { background: rgba(255, 255, 255, 0.03); }
.nz-datum { color: var(--muted); font: 600 12.5px/1.5 var(--mono); }
.nz-datum small { display: block; font: 400 11px/1.35 var(--font); color: var(--faint); }
.nz-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; text-align: left; }
.nz-text.nz-zu {
  max-height: 9em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
.nz-auf { background: none; border: 0; padding: 4px 0 0; color: var(--brand); font: 600 12px var(--font); cursor: pointer; }
.nz-auf:hover { text-decoration: underline; }
.nz-eintrag mark { background: rgba(125, 196, 42, 0.32); color: inherit; border-radius: 2px; padding: 0 1px; }
.nz-hinweis, .nz-leer { color: var(--faint); }
.nz-hinweis { padding: 12px; }
@media (max-width: 700px) {
  .nz-eintrag { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nz-verlauf { max-height: none; }
}

/* Felder der Akte per Klick ändern. */
.detail-list li.ak-edit { cursor: text; }
.detail-list li.ak-edit:hover { background: rgba(255, 255, 255, 0.025); }
.ak-stift { font-style: normal; font-size: 11px; color: var(--brand); margin-left: 8px; opacity: 0; transition: opacity 0.12s ease; }
.detail-list li.ak-edit:hover .ak-stift, .detail-list li.ak-edit:focus-within .ak-stift { opacity: 1; }
.detail-list li .ak-input { width: min(340px, 100%); padding: 5px 9px; font-size: 13.5px; text-align: left; }
.detail-list li span:last-child:has(> .ak-input) { flex: 1 1 auto; }
.ak-speichert { font-style: normal; color: var(--faint); }
.detail-list li.ak-gespeichert span:last-child { color: var(--brand); }
@media (hover: none) { .ak-stift { opacity: 1; } }
@media (max-width: 700px) {
  /* Am Telefon stehen Name und Wert untereinander; das Eingabefeld nimmt die volle Breite. */
  .detail-list li span:last-child:has(> .ak-input) { align-self: stretch; }
  .detail-list li .ak-input { width: 100%; }
}

/* Kontaktzeile auf der geschlossenen Karte: Tel und Mobil immer mit Feld, leer zum Eintragen. */
.kb-card .kb-kontakt { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.kb-k { white-space: nowrap; }
.kb-k-feld { color: var(--faint); font-size: 11px; margin-right: 5px; }
.kb-leer {
  background: none; border: 1px dashed var(--line-strong); border-radius: 6px;
  color: var(--muted); font: 400 11.5px/1.5 var(--font); padding: 0 6px; cursor: pointer;
}
.kb-leer:hover { color: var(--text); border-color: var(--brand); }

/* Zuletzt geöffnet: die Karte bleibt nach dem Schließen auffindbar. */
.akq-zuletzt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
.akq-zuletzt-lbl { color: var(--muted); font-size: 12px; margin-right: 4px; }
.akq-zuletzt .chip-zuletzt-neu { border-color: var(--brand); color: var(--text); }
.kb-card.kb-zuletzt {
  border-color: rgba(125, 196, 42, 0.8);
  box-shadow: 0 0 0 1px rgba(125, 196, 42, 0.55), 0 0 22px -6px rgba(125, 196, 42, 0.55);
}

/* ---------------- Akte: Eintrag direkt ändern, Wiedervorlage unter der Notiz, Schriftgröße (16.09.2026) ----------------
   Frank Wessely: Notiz auf der Karte anklicken statt über "Bearbeiten", Termin gleich nach dem
   Eintrag setzen, Karte zum Lesen vergrößern. */
.nz-eintrag.nz-bearbeitbar .nz-text { cursor: text; border-radius: 6px; transition: background-color 0.12s ease; }
.nz-eintrag.nz-bearbeitbar .nz-text:hover { background: rgba(255, 255, 255, 0.045); }
.nz-aendern {
  display: block; background: none; border: 0; padding: 3px 0 0;
  color: var(--brand); font: 600 11.5px/1.4 var(--font); cursor: pointer;
  opacity: 0; transition: opacity 0.12s ease;
}
.nz-aendern:hover { text-decoration: underline; }
.nz-eintrag:hover .nz-aendern, .nz-eintrag:focus-within .nz-aendern { opacity: 1; }
@media (hover: none) { .nz-aendern { opacity: 1; } }
.nz-eintrag.nz-offen { background: rgba(125, 196, 42, 0.07); }
.nz-eintrag.nz-offen .nz-aendern { visibility: hidden; }
.nz-editor-box { display: grid; gap: 7px; }
textarea.input.nz-editor { resize: vertical; min-height: 4.2em; padding: 7px 9px; font: 400 13.5px/1.5 var(--font); text-align: left; }
.nz-editor-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.nz-editor-leiste .btn { padding: 6px 13px; font-size: 12.5px; }
.nz-editor-hinweis { color: var(--faint); font-size: 11.5px; }
.nz-werkzeug textarea.input#ma-nz-neu { flex: 1 1 100%; resize: none; min-height: 42px; line-height: 1.45; overflow-y: hidden; }

.nz-wv {
  margin-top: 8px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
}
.nz-wv-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.nz-wv-lbl { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-right: 4px; }
.nz-wv .input { width: auto; padding: 6px 9px; font-size: 13.5px; color-scheme: dark; }
.nz-wv #ma-wv-datum { flex: 0 1 150px; }
.nz-wv #ma-wv-zeit { flex: 0 1 104px; }
.nz-wv-stand { color: var(--faint); font-size: 12px; }
.nz-wv .wv-schnell { margin-top: 8px; align-items: center; }
.nz-wv-trenner { width: 1px; height: 16px; background: var(--line-strong); margin: 0 3px; }
.nz-wv.nz-wv-hinweis { animation: nz-wv-puls 1.6s ease-out 1; }
@keyframes nz-wv-puls {
  0%   { border-color: var(--brand); box-shadow: 0 0 0 0 rgba(125, 196, 42, 0.5); }
  100% { border-color: var(--line);  box-shadow: 0 0 0 12px rgba(125, 196, 42, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nz-wv.nz-wv-hinweis { animation: none; border-color: var(--brand); }
}
@media (max-width: 700px) {
  .nz-aendern { display: inline; margin-left: 10px; }
  .nz-wv-trenner { display: none; }
  .nz-werkzeug textarea.input#ma-nz-neu { min-height: 66px; }
}

/* Schriftgröße: A, A+, A++ vergrößern Akte, Formulare und Board-Karten maßstabsgetreu. */
.ak-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ak-kopf h2 { min-width: 0; overflow-wrap: anywhere; }
.groesse-wahl { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.groesse-wahl .chip { padding: 4px 9px; font-size: 12px; min-width: 36px; }
body.groesse-1 { --ak-z: 1.15; }
body.groesse-2 { --ak-z: 1.3; }
body.groesse-1 .modal, body.groesse-2 .modal,
body.groesse-1 .kb-card, body.groesse-2 .kb-card { zoom: var(--ak-z); }
body.groesse-1 .kanban { grid-auto-columns: minmax(300px, 1fr); }
body.groesse-2 .kanban { grid-auto-columns: minmax(340px, 1fr); }
@media (max-width: 700px) {
  body.groesse-2 { --ak-z: 1.18; }
}

/* ---------------- Wiedervorlage direkt auf der Karte (23.09.2026) ----------------
   Zusage #3166 an Frank Wessely: Datum und Uhrzeit setzen, ohne die Akte zu öffnen. Die Farbe der
   Kennung folgt dem Stand (fällig rot, heute gelb, später blau), wie vorher das WV-Abzeichen. */
.kb-wvset {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 8px; padding: 4px 5px 4px 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.025);
  cursor: default;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.kb-wvset:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(125, 196, 42, 0.22); }
.kb-wvset-lbl { flex: 0 0 auto; color: var(--faint); font: 700 10px var(--font); letter-spacing: 0.04em; }
.kb-wvset .input {
  width: auto; min-width: 0; padding: 3px 4px;
  font: 500 12px/1.3 var(--font); color-scheme: dark; cursor: text;
}
/* Datum nimmt den Rest der Zeile, darunter bricht lieber die Uhrzeit um, als dass das Jahr abreißt. */
.kb-wvset .kb-wvset-datum { flex: 1 1 0; min-width: 96px; }
.kb-wvset .kb-wvset-zeit { flex: 0 0 80px; }
.kb-wvset-faellig { border-color: rgba(224, 121, 106, 0.55); }
.kb-wvset-faellig .kb-wvset-lbl { color: var(--bad); }
.kb-wvset-heute { border-color: rgba(224, 181, 71, 0.5); }
.kb-wvset-heute .kb-wvset-lbl { color: var(--warn); }
.kb-wvset-kuenftig .kb-wvset-lbl { color: var(--info); }
.kb-wvset-speichert { opacity: 0.6; }
.kb-wvset-gespeichert { animation: kb-wvset-ok 1.4s ease-out 1; }
@keyframes kb-wvset-ok {
  0%   { border-color: var(--brand); box-shadow: 0 0 0 0 rgba(125, 196, 42, 0.5); }
  100% { box-shadow: 0 0 0 10px rgba(125, 196, 42, 0); }
}
@media (prefers-reduced-motion: reduce) { .kb-wvset-gespeichert { animation: none; border-color: var(--brand); } }
/* Am Telefon 16 Pixel Schrift: iOS vergrößert sonst beim Antippen die ganze Seite. */
@media (max-width: 700px) {
  .kb-wvset .input { font-size: 16px; padding: 5px 7px; }
  .kb-wvset .kb-wvset-datum { min-width: 128px; }
  .kb-wvset .kb-wvset-zeit { flex-basis: 98px; }
}

/* ---------------- Akte waagerecht für breite Bildschirme (25.09.2026) ----------------
   Frank Wessely am 23.09.2026 (Jarvis #4298): "Kann man es individuell anpassen, was die
   Fenstergröße und Darstellung angeht? Also aus senkrecht wird z.B. Waagerecht". Auf einem
   16:9-Monitor stand die Akte als 680 Pixel schmale Spalte in der Mitte, und alles unter den
   Stammdaten (Notizen, Wiedervorlage, Aufgaben, Aktivität) erreichte man nur durch Scrollen.
   Waagerecht stehen Stammdaten, Notizen und Aufgaben in drei Spalten nebeneinander, die Akte
   füllt die Fensterbreite und passt in die Höhe. Wird eine Spalte doch zu lang (sehr viele
   Notizen, Schriftgröße A++), scrollt nur diese Spalte, die Akte selbst steht.
   Umschalten per Schalter oben in der Akte (Auto, senkrecht, waagerecht), gemerkt je Konto in
   diesem Browser (crm.js, bindeAnsichtWahl). Auto heißt waagerecht ab 1600 Pixel Fensterbreite.
   Unter 1200 Pixel, also auf Tablet und Telefon, bleibt die Akte immer senkrecht wie bisher, und
   der Schalter wird ausgeblendet. Senkrecht sieht die Akte genauso aus wie vorher: die Hüllen
   .ak-koerper und .ak-spalte sind dann gewöhnliche Blöcke ohne Rand und Abstand. */
#ma-aufgaben { margin-top: 8px; max-height: 150px; overflow-y: auto; }
#ma-log { max-height: 180px; overflow-y: auto; }
.ak-nur-quer { display: none; }
.ak-kopf-wahl {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 6px 12px; flex: 0 0 auto;
}
.ansicht-wahl { display: inline-flex; gap: 4px; }
.ansicht-wahl .chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 9px; font-size: 12px; min-width: 36px;
}
.ansicht-wahl svg {
  width: 15px; height: 15px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round;
}
.ansicht-wahl .chip:focus-visible, .groesse-wahl .chip:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (max-width: 1199px) {
  .ansicht-wahl { display: none; }
}

body.akte-quer .ak-back { align-items: center; padding: 16px 24px; }
/* Die Schriftgrößen A+ und A++ vergrößern die Akte per zoom (Faktor --ak-z). Breite und Höhe
   werden deshalb durch denselben Faktor geteilt, sonst ragte die Akte über das Fenster. */
/* Kopf in einer Zeile: Name, dahinter die Stufe, rechts die Schalter. Darunter die Anrufleiste,
   dann die drei Spalten, unten die Knöpfe. Die mittlere Zeile nimmt die Resthöhe. */
body.akte-quer .ak-modal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "titel sub wahl" "ruf ruf ruf" "koerper koerper koerper" "aktionen aktionen aktionen";
  column-gap: 14px;
  width: calc((100vw - 48px) / var(--ak-z, 1));
  max-width: calc(1840px / var(--ak-z, 1));
  max-height: calc((100dvh - 32px) / var(--ak-z, 1));
  padding: 16px 24px 18px;
}
body.akte-quer .ak-modal .ak-kopf { display: contents; }
body.akte-quer .ak-modal .ak-kopf h2 { grid-area: titel; align-self: center; margin: 0; font-size: 20px; }
body.akte-quer .ak-modal .ak-kopf-wahl { grid-area: wahl; align-self: center; }
body.akte-quer .ak-modal > .m-sub { grid-area: sub; align-self: center; margin: 3px 0 0; font-size: 13.5px; }
body.akte-quer .ak-modal > .m-sub::before { content: "· "; color: var(--faint); }
body.akte-quer .ak-modal > #ma-anruf { grid-area: ruf; }
body.akte-quer .ak-modal > .m-actions { grid-area: aktionen; }
body.akte-quer .ak-koerper {
  grid-area: koerper; min-height: 0; margin-top: 10px;
  display: grid; gap: 0 32px;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
  grid-template-rows: minmax(0, 1fr);
}
body.akte-quer .ak-spalte {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; margin-right: -6px;
}
body.akte-quer .ak-nur-quer { display: block; }
body.akte-quer .ak-spalte > .section-title:first-child { margin-top: 0; }
body.akte-quer .ak-spalte > .section-title { margin: 22px 0 10px; }
/* Stammdaten in zwei Unterspalten: links Kontakt und Anschrift, rechts ab Objekttyp Objekt und Vertrieb. */
body.akte-quer #ma-list { margin-top: 0; columns: 2; column-gap: 32px; }
body.akte-quer #ma-list li { break-inside: avoid; padding: 6px 0; gap: 14px; }
body.akte-quer #ma-list li.ak-neue-spalte { break-before: column; }
/* Notizen: Eingabe und Wiedervorlage bleiben oben stehen, der Verlauf nimmt die Resthöhe. */
body.akte-quer .ak-notizen { display: flex; flex-direction: column; }
body.akte-quer .ak-notizen > * { flex: 0 0 auto; }
body.akte-quer #ma-notiz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.akte-quer #ma-notiz .nz-verlauf { flex: 1 1 auto; min-height: 110px; max-height: none; }
/* Aufgaben und Aktivität: die Aktivität nimmt die Resthöhe, Stufe wechseln steht unten. */
body.akte-quer .ak-ablauf { display: flex; flex-direction: column; }
body.akte-quer .ak-ablauf > * { flex: 0 0 auto; }
body.akte-quer #ma-log { flex: 1 1 auto; min-height: 90px; max-height: none; }
body.akte-quer #ma-log li, body.akte-quer #ma-aufgaben li { padding: 6px 0; }
/* Aufgabentitel stehen links, auch wenn sie in der schmaleren Spalte umbrechen. */
body.akte-quer #ma-aufgaben li > span:first-child span { text-align: left; }
body.akte-quer .ak-notizen .nz-eintrag { padding: 7px 12px; }
body.akte-quer .ak-ablauf .ak-stufe { padding-top: 4px; }
body.akte-quer .ak-modal .m-actions {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
/* Der schwebende Hilfe-Knopf (help.js) und der einmalige Hinweis auf die Glocke (wiedervorlage.js)
   liegen unten rechts über jedem Dialog. Senkrecht steht die Akte schmal in der Mitte und berührt die
   Ecke nicht, waagerecht reicht sie bis dorthin, und genau da sitzt "Schließen" (im Prüfstand am
   25.09.2026 verdeckt). Solange die waagerechte Akte offen ist, treten beide zurück. */
body.akte-quer:has(.ak-back.open) #desk-help-btn { display: none; }
body.akte-quer:has(.ak-back.open) .wv-hinweis { z-index: 80; }

/* Kundenliste (kunden.html): dieselbe Karte waagerecht in zwei Spalten, links die Stammdaten,
   rechts Notizen und Projekte. Sie hat weniger Zeilen als die Akte im Board und bleibt deshalb
   schmaler, sonst stünden Bezeichnung und Wert eine halbe Bildschirmbreite auseinander. */
body.akte-quer .ak-modal.ak-zwei { max-width: calc(1440px / var(--ak-z, 1)); }
body.akte-quer .ak-modal > #d-anruf { grid-area: ruf; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.akte-quer .ak-zwei .ak-koerper { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 36px; }
body.akte-quer #d-list { margin-top: 0; }
body.akte-quer #d-list li, body.akte-quer #d-projekte li { padding: 6px 0; }
body.akte-quer .ak-kd-rechts { display: flex; flex-direction: column; }
body.akte-quer .ak-kd-rechts > * { flex: 0 0 auto; }
body.akte-quer #d-notiz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.akte-quer #d-notiz .nz-verlauf { flex: 1 1 auto; min-height: 110px; max-height: none; }
body.akte-quer .ak-kd-rechts .nz-eintrag { padding: 7px 12px; }
body.akte-quer #d-projekte { max-height: 30%; overflow-y: auto; }