/* ══════════════════════════════════════════════════════════════════════════
   POLITIS.AI — neues Erscheinungsbild (Redesign, 25.09.2026)

   **Liegt ÜBER `stil.css`, nicht an seiner Stelle.** Jede Regel hier gilt nur
   unter `body.neu`; ohne die Klasse ist die Oberfläche unverändert. Das hält
   die alte Ansicht für Kunden intakt, bis eine Variante freigegeben ist.

   Aufbau:
     1. Tokens (8-pt-Raster, Radien, Schatten, Farben — hell und dunkel)
     2. Rahmen: Kopfleiste, Seite, Fusszeile, Politis-AI-Knopf
     3. Basiskomponenten: Karte, Knopf, Pill, Badge, Info-Popover, Leerzustand
     4. Dashboard
     5. Getönte Kacheln, Banner (aus Variante C)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
body.neu {
  /* SSC-CI */
  --n-lime: #C9D738;
  --n-lime-2: #BDCD00;
  --n-oliv: #8A9A20;
  --n-oliv-text: #5F6B0C;        /* Oliv für Text: 5,9:1 auf Weiss (AA) */
  --n-text: #3C3C3B;
  --n-text-2: #5C5758;
  --n-text-3: #6D6869;           /* CI-Grau; #929292 ist auf Weiss 3,1:1 — für Text zu hell (axe) */

  /* Flächen */
  --n-bg: #F6F6F3;
  --n-surface: #FFFFFF;
  --n-surface-2: #F1F1EC;
  --n-hair: rgba(60, 60, 59, .10);
  --n-hair-2: rgba(60, 60, 59, .16);
  --n-glass: rgba(255, 255, 255, .72);
  --n-glas-kante: rgba(255, 255, 255, .7);

  /* Statusfarben — semantisch wie bisher */
  --n-gruen: #6E8A10;   --n-gruen-bg: rgba(201, 215, 56, .20);   /* Erster Kontakt */
  --n-orange: #C8661E;  --n-orange-bg: rgba(232, 128, 48, .13);  /* Nachfassen */
  --n-orange-text: #A04B0E;  /* Orange als Schrift: 5,4:1 auf der getönten Fläche */
  --n-rot: #C2402F;     --n-rot-bg: rgba(214, 72, 52, .10);      /* überfällig */
  --n-blau: #2F6CB8;    --n-blau-bg: rgba(47, 108, 184, .10);    /* Geplant */
  --n-petrol: #13777A;  --n-petrol-bg: rgba(19, 119, 122, .10);  /* Interesse */

  /* Raster, Radien, Schatten */
  --n-1: 8px; --n-2: 16px; --n-3: 24px; --n-4: 32px; --n-5: 40px; --n-6: 48px;
  --n-r-s: 10px; --n-r: 16px; --n-r-l: 20px;
  --n-schatten: 0 0 0 1px var(--n-hair), 0 1px 2px rgba(20, 20, 18, .04),
                0 4px 14px rgba(20, 20, 18, .045);
  --n-schatten-hoch: 0 0 0 1px var(--n-hair), 0 2px 4px rgba(20, 20, 18, .05),
                     0 12px 32px rgba(20, 20, 18, .09);
  --n-fokus: 0 0 0 3px rgba(189, 205, 0, .55);

  --n-schrift: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --n-feder: cubic-bezier(.34, 1.36, .64, 1);   /* Spring */
  --n-sanft: cubic-bezier(.2, .8, .2, 1);

  /* Die alten Variablen mitziehen, damit Bausteine aus stil.css passen */
  --grund: var(--n-bg); --flaeche: var(--n-surface-2); --rand: var(--n-hair-2);
  --text: var(--n-text); --gedaempft: var(--n-text-2);
  --akzent: var(--n-oliv-text); --r: var(--n-r);
  --schrift: var(--n-schrift);

  background: var(--n-bg);
  color: var(--n-text);
  font-family: var(--n-schrift);
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -.006em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu {
    --n-text: #EDEDEA; --n-text-2: #B4B0AE; --n-text-3: #8F8B89;
    --n-oliv-text: #D3E05A;
    --n-bg: #111212; --n-surface: #1C1D1E; --n-surface-2: #242527;
    --n-hair: rgba(255, 255, 255, .08); --n-hair-2: rgba(255, 255, 255, .14);
    --n-glass: rgba(28, 29, 30, .72);
    --n-glas-kante: rgba(255, 255, 255, .1);
    --n-gruen: #C9D738; --n-gruen-bg: rgba(201, 215, 56, .14);
    --n-orange: #F0994F; --n-orange-bg: rgba(240, 153, 79, .14); --n-orange-text: #FFB27A;
    --n-rot: #F07A68; --n-rot-bg: rgba(240, 122, 104, .14);
    --n-blau: #7EB0F0; --n-blau-bg: rgba(126, 176, 240, .14);
    --n-petrol: #52C1C3; --n-petrol-bg: rgba(82, 193, 195, .14);
    --n-schatten: 0 0 0 1px var(--n-hair), 0 1px 2px rgba(0, 0, 0, .3);
    --n-schatten-hoch: 0 0 0 1px var(--n-hair-2), 0 12px 32px rgba(0, 0, 0, .45);
  }
}
:root[data-thema="dunkel"] body.neu {
  --n-text: #EDEDEA; --n-text-2: #B4B0AE; --n-text-3: #8F8B89;
  --n-oliv-text: #D3E05A;
  --n-bg: #111212; --n-surface: #1C1D1E; --n-surface-2: #242527;
  --n-hair: rgba(255, 255, 255, .08); --n-hair-2: rgba(255, 255, 255, .14);
  --n-glass: rgba(28, 29, 30, .72);
  --n-glas-kante: rgba(255, 255, 255, .1);
  --n-gruen: #C9D738; --n-gruen-bg: rgba(201, 215, 56, .14);
  --n-orange: #F0994F; --n-orange-bg: rgba(240, 153, 79, .14); --n-orange-text: #FFB27A;
  --n-rot: #F07A68; --n-rot-bg: rgba(240, 122, 104, .14);
  --n-blau: #7EB0F0; --n-blau-bg: rgba(126, 176, 240, .14);
  --n-petrol: #52C1C3; --n-petrol-bg: rgba(82, 193, 195, .14);
  --n-schatten: 0 0 0 1px var(--n-hair), 0 1px 2px rgba(0, 0, 0, .3);
  --n-schatten-hoch: 0 0 0 1px var(--n-hair-2), 0 12px 32px rgba(0, 0, 0, .45);
}

body.neu .n-zahl, body.neu .n-wert-zahl, body.neu .n-kachel-zahl,
body.neu .n-score, body.neu time { font-variant-numeric: tabular-nums; }

body.neu :focus-visible { outline: none; box-shadow: var(--n-fokus); border-radius: 8px; }

/* ── 2. Rahmen ─────────────────────────────────────────────────────────── */
body.neu .kopf {
  height: 64px; gap: var(--n-3); padding: 0 var(--n-3);
  background: transparent; color: var(--n-text);
  border-bottom: 1px solid var(--n-hair);
}
/* **Das Glas liegt auf einem Pseudo-Element, nicht auf der Leiste.**
   `backdrop-filter` macht ein Element zum Bezugsrahmen für `position: fixed`
   — der Politis-AI-Knopf, der in der Leiste steht, klebte sonst oben links
   statt unten am Fenster. */
body.neu .kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--n-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
body.neu .kopf .marke { color: var(--n-text); }
/* Logo als Vektorgrafik (Logopaket „POLITIS-AI_Logo 2"): hell auf der
   hellen Leiste, Negativfassung im Dunkelmodus. Die PNGs der alten Leiste
   bleiben im HTML und sind hier aus. */
body.neu .kopf .marke-wortbild { height: 40px; width: auto; }
body.neu .kopf .marke-wortbild:not(.marke-fuer-hell):not(.marke-fuer-dunkel),
body.neu .kopf .marke-fuer-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu .kopf .marke-fuer-dunkel { display: block; }
  :root:not([data-thema="hell"]) body.neu .kopf .marke-fuer-hell { display: none; }
}
:root[data-thema="dunkel"] body.neu .kopf .marke-fuer-dunkel { display: block; }
:root[data-thema="dunkel"] body.neu .kopf .marke-fuer-hell { display: none; }

body.neu .kopf nav { gap: 2px; font-size: 14px; align-items: center; }
body.neu .kopf nav a,
body.neu .kopf nav details.navmenue > summary {
  color: var(--n-text-2); padding: 8px 14px; border: 0; border-radius: 999px;
  font-weight: 500; transition: background .15s ease, color .15s ease;
}
body.neu .kopf nav a:hover,
body.neu .kopf nav details.navmenue > summary:hover {
  color: var(--n-text); background: var(--n-hair); border: 0;
}
body.neu .kopf nav a[aria-current],
body.neu .kopf nav details.navmenue > summary[aria-current] {
  color: #1E1F10; background: var(--n-lime); font-weight: 600; border: 0;
  box-shadow: 0 1px 2px rgba(110, 125, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.neu .kopf nav .navmenueinhalt {
  top: calc(100% + 8px); background: var(--n-surface); border: 0;
  border-radius: 14px; padding: 6px; box-shadow: var(--n-schatten-hoch);
}
body.neu .kopf nav .navmenueinhalt a { color: var(--n-text); border-radius: 9px; padding: 9px 12px; }
body.neu .kopf nav .navmenueinhalt a:hover,
body.neu .kopf nav .navmenueinhalt a[aria-current] {
  background: var(--n-surface-2); color: var(--n-text); box-shadow: none;
}

body.neu .kopfsuche { position: relative; }
@media (min-width: 1101px) { body.neu .kopfsuche { flex-basis: 260px; } }
body.neu .kopfsuche input {
  height: 38px; box-sizing: border-box; font-size: 14px; color: var(--n-text);
  border: 1px solid transparent; background-color: rgba(118, 118, 128, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6869' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E");
  padding: 0 44px 0 34px; border-radius: 12px;
}
body.neu .kopfsuche input::placeholder { color: var(--n-text-3); }
body.neu .kopfsuche input:focus {
  background-color: var(--n-surface); border-color: var(--n-lime-2); box-shadow: var(--n-fokus);
}
body.neu .kopfsuche::after {
  content: "/"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 600; color: var(--n-text-3); pointer-events: none;
  border: 1px solid var(--n-hair-2); border-radius: 6px; padding: 1px 5px;
  background: var(--n-surface);
}
body.neu .kopfsuche:focus-within::after { opacity: 0; }
body.neu .kopffilter > summary {
  width: 38px; height: 38px; border-color: transparent; color: var(--n-text-2);
  background: rgba(118, 118, 128, .12); border-radius: 12px;
}
body.neu .kopffilter > summary:hover, body.neu .kopffilter[open] > summary {
  background: var(--n-gruen-bg); color: var(--n-text);
}
body.neu .benutzermenue > summary {
  border: 1px solid var(--n-hair-2); background: var(--n-surface); min-height: 38px;
  box-sizing: border-box;
}
body.neu .mandantname { color: var(--n-text); }
body.neu .werkbank { border-radius: 6px; }

body.neu main { max-width: 1200px; padding: var(--n-4) var(--n-3) 96px; }
body.neu .fuss { border-top-color: var(--n-hair); background: transparent; }

/* Politis AI — schwebender Assistent mit kurzem Hinweis, wobei er hilft */
body.neu .politisknopf {
  left: 24px; bottom: 24px; padding: 8px 18px 8px 8px; gap: 10px;
  background: var(--n-glass); color: var(--n-text);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--n-schatten-hoch); flex-wrap: wrap;
  transition: transform .35s var(--n-feder), box-shadow .2s ease;
}
body.neu .politisknopf:hover { transform: translateY(-3px) scale(1.02); }
body.neu .politiszeichen { width: 36px; height: 36px; background: var(--n-lime); color: #1E1F10; }
body.neu .politisname { display: block; line-height: 1.2; font-size: 14px; }
body.neu .politishinweis {
  display: block; font-size: 12px; color: var(--n-text-2); margin-top: -2px;
  flex-basis: 0; order: 3; white-space: nowrap;
}
body.neu .politisknopf { display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; }
body.neu .politiszeichen { grid-row: 1 / 3; }
body.neu .politisname { align-self: end; }
body.neu .politishinweis { align-self: start; grid-column: 2; }

/* ── 3. Basiskomponenten ──────────────────────────────────────────────── */
body.neu .n-seite { display: flex; flex-direction: column; gap: var(--n-2); }

body.neu .n-karte {
  background: var(--n-surface); border-radius: var(--n-r-l);
  box-shadow: var(--n-schatten); padding: var(--n-3);
  min-width: 0;
}
body.neu .n-karte-kopf {
  display: flex; align-items: center; gap: var(--n-1); margin-bottom: var(--n-2);
}
body.neu .n-karte-kopf h3 {
  margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  text-transform: none; color: var(--n-text);
  display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
body.neu .n-karte-kopf h3 .ic { color: var(--n-oliv); }
body.neu .n-karte-kopf h3 em { font-style: normal; font-weight: 400; color: var(--n-text-3); font-size: 14px; }
body.neu .n-link {
  display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 550;
  color: var(--n-oliv-text); text-decoration: none; padding: 6px 8px; border-radius: 8px;
  min-height: 32px; box-sizing: border-box;
}
body.neu .n-link:hover { background: var(--n-gruen-bg); }

body.neu .n-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; box-sizing: border-box; border-radius: 12px;
  font: 600 14px/1 var(--n-schrift); text-decoration: none; white-space: nowrap;
  background: var(--n-surface-2); color: var(--n-text); border: 0; cursor: pointer;
  transition: transform .3s var(--n-feder), background .15s ease, box-shadow .15s ease;
}
body.neu .n-knopf:hover { transform: translateY(-1px); background: var(--n-hair-2); }
body.neu .n-knopf:active { transform: scale(.97); }
body.neu .n-knopf-primaer { background: var(--n-lime); color: #1E1F10;
  box-shadow: 0 1px 2px rgba(110, 125, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }
body.neu .n-knopf-primaer:hover { background: var(--n-lime-2); }
body.neu .n-knopf-rot { background: var(--n-rot); color: #fff; }
body.neu .n-knopf-rot:hover { background: var(--n-rot); filter: brightness(1.08); }
/* Im Dunkeln ist das Rot hell — dann dunkle Schrift (7,4:1 statt 2,8:1) */
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) body.neu .n-knopf-rot, :root:not([data-thema="hell"]) body.neu .n-banner-ico { color: #2A0F0A; } }
:root[data-thema="dunkel"] body.neu .n-knopf-rot, :root[data-thema="dunkel"] body.neu .n-banner-ico { color: #2A0F0A; }

body.neu .n-rundknopf {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: var(--n-gruen-bg); color: var(--n-oliv-text);
  transition: transform .3s var(--n-feder), background .15s ease;
}
body.neu .n-rundknopf:hover { background: var(--n-lime); color: #1E1F10; transform: scale(1.06); }

body.neu .n-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--n-surface-2); color: var(--n-text-2);
}
body.neu .n-badge-warn { background: var(--n-rot-bg); color: var(--n-rot); }

body.neu .n-score {
  flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 28px;
  padding: 0 6px; box-sizing: border-box; border-radius: 9px;
  font-size: 14px; font-weight: 700;
}
body.neu .n-score[data-stufe="hoch"] { background: var(--n-lime); color: #1E1F10; }
body.neu .n-score[data-stufe="mittel"] { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .n-score[data-stufe="tief"] { background: var(--n-surface-2); color: var(--n-text-2); }

body.neu .n-tag {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--n-text-2); background: var(--n-surface-2); border-radius: 999px;
  padding: 4px 9px; cursor: help;
}
body.neu .n-tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  width: 220px; padding: 10px 12px; border-radius: 12px; z-index: 5;
  background: #2B2B2A; color: #F4F4F0; font-size: 12.5px; font-weight: 450;
  letter-spacing: 0; text-transform: none; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .2s var(--n-sanft);
}
body.neu .n-tag:hover .n-tip, body.neu .n-tag:focus .n-tip { opacity: 1; transform: translate(-50%, 0); }

/* (i)-Popover: max. ein Satz sichtbar, Details auf Klick */
body.neu .n-info { margin-top: var(--n-2); font-size: 13px; color: var(--n-text-2); }
body.neu .n-info > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 10px; margin-left: -10px; border-radius: 8px; min-height: 32px; box-sizing: border-box;
}
body.neu .n-info > summary::-webkit-details-marker { display: none; }
body.neu .n-info > summary:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-info > p {
  margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; line-height: 1.55;
  background: var(--n-surface-2); max-width: 70ch;
}

body.neu .n-leer {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: var(--n-3); border-radius: var(--n-r); background: var(--n-surface-2);
  color: var(--n-text-2); font-size: 14px; line-height: 1.5;
}
body.neu .n-leer p { margin: 0; }
body.neu .n-leer .n-knopf { background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .n-leer b { color: var(--n-text); display: block; margin-bottom: 2px; }
body.neu .n-leer-ico {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--n-surface); color: var(--n-oliv); box-shadow: var(--n-schatten);
}

body.neu .n-leise { font-size: 13px; color: var(--n-text-2); margin: 4px 0 0; }

/* Klappköpfe: ganze Zeile klickbar, Chevron statt Dreieck */
body.neu .klappkopf {
  margin: var(--n-3) 0 12px; font-size: 20px; font-weight: 700;
  letter-spacing: -.02em; color: var(--n-text);
}
body.neu .klappkopf em { font-size: 14px; font-weight: 450; color: var(--n-text-3); }
body.neu .klappknopf { align-items: center; padding: 4px 8px 4px 0; min-height: 44px; }
body.neu .klappknopf:hover { color: var(--n-text); }
body.neu .klapppfeil {
  font-size: 0; width: 20px; height: 20px; display: inline-grid; place-items: center;
  border-radius: 6px; background: var(--n-surface-2); transition: transform .3s var(--n-feder);
}
body.neu .klapppfeil::before {
  content: ""; width: 10px; height: 10px;
  background: currentColor; color: var(--n-text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.neu .klappknopf[aria-expanded="false"] .klapppfeil { transform: rotate(-90deg); }
body.neu .klappinhalt { animation: n-einblenden .35s var(--n-sanft); }
@keyframes n-einblenden { from { opacity: 0; transform: translateY(6px); } }

/* ── 4. Dashboard ─────────────────────────────────────────────────────── */

/* Kopf */
body.neu .n-held {
  display: flex; align-items: center; justify-content: space-between; gap: var(--n-3);
  padding: var(--n-1) 0 var(--n-2);
}
body.neu .n-held-text { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
body.neu .n-datum {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-text-3);
}
body.neu .n-gruss { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 750; letter-spacing: -.03em; }
body.neu .n-statpills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; }
body.neu .n-statpills li {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px;
  border-radius: 999px; background: var(--n-surface); box-shadow: var(--n-schatten);
  font-size: 14px; color: var(--n-text-2);
}
body.neu .n-statpills b { color: var(--n-text); font-weight: 700; }
body.neu .n-pill-ico {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--n-gruen-bg); color: var(--n-oliv-text);
}
body.neu .n-heute {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--n-text);
  background: var(--n-blau-bg); font-size: 14px;
}
body.neu .n-heute .ic:first-child { color: var(--n-blau); }

/* Tagesring im Apple-Fitness-Stil */
body.neu .n-ring {
  position: relative; flex: none; display: grid; justify-items: center; gap: 8px;
  cursor: default; border-radius: 20px; padding: 4px;
}
body.neu .n-ring > svg { display: block; overflow: visible; }
body.neu .n-ring .n-ring-grund, body.neu .n-miniring .n-ring-grund {
  fill: none; stroke: var(--n-gruen-bg); stroke-width: 12;
}
body.neu .n-ring .n-ring-voll, body.neu .n-miniring .n-ring-voll {
  fill: none; stroke: var(--n-lime); stroke-width: 12; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(201, 215, 56, .45));
}
body.neu .n-ring .n-ring-voll { animation: n-ring 1.1s var(--n-sanft) both; }
@keyframes n-ring { from { stroke-dasharray: 0 326.73; } }
body.neu .n-ring-zahl {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 120px; display: grid; place-content: center; text-align: center;
}
body.neu .n-ring-zahl b { font-size: 34px; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
body.neu .n-ring-zahl small { font-size: 12.5px; color: var(--n-text-2); margin-top: 2px; }
body.neu .n-ring-marke { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-ring-teile {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; width: 260px;
  padding: 14px 16px; border-radius: 16px; background: var(--n-surface);
  box-shadow: var(--n-schatten-hoch); font-size: 13.5px;
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
  pointer-events: none; transition: opacity .18s ease, transform .3s var(--n-feder);
}
body.neu .n-ring:hover .n-ring-teile, body.neu .n-ring:focus-within .n-ring-teile,
body.neu .n-ring:focus .n-ring-teile { opacity: 1; transform: none; }
body.neu .n-ring-teile-titel { margin: 0 0 8px; font-weight: 650; color: var(--n-text); }
body.neu .n-ring-teile div { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--n-hair); color: var(--n-text-2); }
body.neu .n-ring-teile div b { color: var(--n-text); }
body.neu .n-ring-teile small { display: block; margin-top: 8px; color: var(--n-text-3); }

body.neu .n-segmentwahl { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--n-text-2); }
body.neu .n-segmentwahl select { height: 36px; border-radius: 10px; border: 1px solid var(--n-hair-2); background: var(--n-surface); color: var(--n-text); padding: 0 10px; }

/* Banner */
body.neu .n-banner {
  display: flex; align-items: center; gap: var(--n-2); padding: 14px 14px 14px 18px;
  border-radius: var(--n-r-l); text-decoration: none; color: var(--n-text);
  transition: transform .35s var(--n-feder), box-shadow .2s ease;
}
body.neu .n-banner p { margin: 0; }
body.neu .n-banner-rot { background: var(--n-rot-bg); box-shadow: inset 0 0 0 1px rgba(194, 64, 47, .18); }
body.neu .n-banner-rot:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(194, 64, 47, .3), 0 8px 24px rgba(194, 64, 47, .12); }
body.neu .n-banner-warn { background: var(--n-orange-bg); }
body.neu .n-banner-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--n-rot); color: #fff;
}
body.neu .n-banner-warn .n-banner-ico { background: var(--n-orange); }
body.neu .n-banner-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
body.neu .n-banner-text strong { font-size: 16px; font-weight: 700; color: var(--n-rot); }
body.neu .n-banner-text small { font-size: 13.5px; color: var(--n-text-2); }

/* Als Nächstes */
body.neu .n-raster { display: grid; gap: var(--n-2); }
body.neu .n-raster-naechstes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }

body.neu .n-termin-gross {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--n-2);
  padding: var(--n-2); border-radius: var(--n-r); background: var(--n-blau-bg);
}
body.neu .n-termin-zeit { display: grid; gap: 2px; padding-right: var(--n-2); border-right: 1px solid var(--n-hair-2); }
body.neu .n-termin-tag { font-size: 12px; font-weight: 600; color: var(--n-blau); text-transform: uppercase; letter-spacing: .05em; }
body.neu .n-termin-zeit b { font-size: 32px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
body.neu .n-countdown { font-size: 12.5px; color: var(--n-text-2); }
body.neu .n-countdown.n-ueber { color: var(--n-rot); font-weight: 600; }
body.neu .n-termin-wer { display: grid; gap: 2px; min-width: 0; font-size: 14px; color: var(--n-text-2); }
body.neu .n-termin-firma { font-size: 16px; font-weight: 650; color: var(--n-text); text-decoration: none; }
body.neu .n-termin-firma:hover { text-decoration: underline; }
body.neu .n-termin-notiz { margin: 4px 0 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.neu .n-liste { list-style: none; margin: 0; padding: 0; display: grid; }
body.neu .n-liste > li + li { border-top: 1px solid var(--n-hair); }
body.neu .n-zeile-mit-knopf { display: flex; align-items: center; gap: 8px; }
body.neu .n-zeile {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  padding: 10px 8px; margin: 0 -8px; min-height: 56px; box-sizing: border-box;
  border-radius: 12px; text-decoration: none; color: var(--n-text);
  transition: background .15s ease;
}
body.neu .n-zeile:hover { background: var(--n-surface-2); }
body.neu .n-zeile-haupt { display: grid; min-width: 0; flex: 1; }
body.neu .n-zeile-haupt b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-zeile-haupt small { font-size: 13px; color: var(--n-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-zeit-mini { font-size: 13px; font-weight: 600; color: var(--n-blau); min-width: 64px; }
body.neu .n-chevron { color: var(--n-text-3); flex: none; }

/* Pipeline-Kacheln: eine Komponente für beide Zonen */
body.neu .n-kacheln {
  display: grid; gap: var(--n-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body.neu .n-kachel {
  --f: var(--n-text-2); --f-bg: var(--n-surface-2);
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 16px; min-height: 184px; box-sizing: border-box;
  background: var(--n-surface); border-radius: var(--n-r-l); box-shadow: var(--n-schatten);
  text-decoration: none; color: var(--n-text); overflow: hidden;
  transition: transform .4s var(--n-feder), box-shadow .2s ease;
}
body.neu .n-kachel::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--f); opacity: .9;
}
body.neu .n-kachel:hover { transform: translateY(-3px); box-shadow: var(--n-schatten-hoch); }
body.neu .n-kachel:active { transform: scale(.985); }
body.neu .n-f-akzent { --f: var(--n-gruen); --f-bg: var(--n-gruen-bg); }
body.neu .n-f-warn { --f: var(--n-orange); --f-bg: var(--n-orange-bg); }
body.neu .n-f-schlecht { --f: var(--n-rot); --f-bg: var(--n-rot-bg); }
body.neu .n-f-zusage { --f: var(--n-blau); --f-bg: var(--n-blau-bg); }
body.neu .n-f-gut { --f: var(--n-petrol); --f-bg: var(--n-petrol-bg); }
/* Feste Höhe: Ein zweizeiliger Titel darf die Zahl nicht tiefer setzen als nebenan */
body.neu .n-kachel-kopf { display: flex; align-items: center; gap: 10px; min-height: 40px; }
body.neu .n-kachel-ico {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--f-bg); color: var(--f);
}
body.neu .n-kachel-titel { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
body.neu .n-kachel-mitte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
body.neu .n-kachel-zahl { font-size: 44px; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
body.neu .n-kachel-text { font-size: 13.5px; color: var(--n-text-2); line-height: 1.4; flex: 1; }
body.neu .n-kachel-cta {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--f); margin-top: 4px;
}
body.neu .n-kachel-cta .ic { transition: transform .3s var(--n-feder); }
body.neu .n-kachel:hover .n-kachel-cta .ic { transform: translateX(3px); }
body.neu .n-f-akzent .n-kachel-cta { color: var(--n-oliv-text); }
body.neu .n-f-warn .n-kachel-cta { color: var(--n-orange-text); }

/* Noch nicht erreicht */
body.neu .n-versuche-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--n-2); flex-wrap: wrap; margin-bottom: var(--n-3); }
body.neu .n-versuche-zahlen { display: flex; gap: var(--n-4); flex-wrap: wrap; }
body.neu .n-versuche-zahlen > div { display: grid; gap: 2px; }
body.neu .n-versuche-zahlen b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
body.neu .n-versuche-zahlen span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-versuche-summe { padding-left: var(--n-4); border-left: 1px solid var(--n-hair-2); }
body.neu .n-punkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
body.neu .n-punkt-faellig, body.neu .n-balken-faellig { background: var(--n-orange); }
body.neu .n-punkt-wartet, body.neu .n-balken-wartet { background: color-mix(in srgb, var(--n-orange) 28%, transparent); }
body.neu .n-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.neu .n-balken a {
  display: grid; grid-template-columns: 90px 1fr 120px; align-items: center; gap: var(--n-2);
  padding: 8px; margin: 0 -8px; min-height: 44px; box-sizing: border-box; border-radius: 10px;
  text-decoration: none; color: var(--n-text);
}
body.neu .n-balken a:hover { background: var(--n-surface-2); }
body.neu .n-balken-marke { font-size: 13.5px; font-weight: 600; color: var(--n-text-2); }
body.neu .n-balken-spur { display: flex; height: 14px; border-radius: 7px; background: var(--n-surface-2); overflow: hidden; gap: 2px; }
body.neu .n-balken-teil { width: var(--w); height: 100%; border-radius: 7px; transform-origin: left; animation: n-wachsen .8s var(--n-sanft) both; }
@keyframes n-wachsen { from { transform: scaleX(0); } }
body.neu .n-balken-zahl { font-size: 14px; font-variant-numeric: tabular-nums; }
body.neu .n-balken-zahl small { color: var(--n-orange-text); font-size: 13px; font-weight: 600; }

/* Auswertung */
body.neu .n-auswertung-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--n-2); flex-wrap: wrap; margin: var(--n-1) 0 12px; }
body.neu .n-auswertung-kopf h3 { margin: 0; font-size: 16px; font-weight: 650; text-transform: none; letter-spacing: -.01em; color: var(--n-text); }
body.neu .n-auswertung-kopf h3 em { font-style: normal; font-weight: 400; color: var(--n-text-3); font-size: 14px; }
body.neu .n-segmented {
  display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(118, 118, 128, .12); gap: 2px;
}
body.neu .n-segmented a {
  display: grid; place-items: center; min-height: 36px; padding: 0 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 550; color: var(--n-text-2); text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
body.neu .n-segmented a:hover { color: var(--n-text); }
body.neu .n-segmented a[aria-current] { background: var(--n-surface); color: var(--n-text); box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.04); }
body.neu .n-auswertung { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--n-2); align-items: stretch; }
body.neu .n-werte { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
body.neu .n-quoten { display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); }
body.neu .n-wert {
  display: grid; align-content: start; gap: 4px; padding: 16px 18px; border-radius: var(--n-r);
  background: var(--n-surface); box-shadow: var(--n-schatten); text-decoration: none; color: var(--n-text);
  transition: transform .35s var(--n-feder), box-shadow .2s ease; position: relative;
}
body.neu a.n-wert:hover { transform: translateY(-2px); box-shadow: var(--n-schatten-hoch); }
body.neu .n-wert small { font-size: 13px; color: var(--n-text-2); }
body.neu .n-wert-zahl { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
body.neu .n-wert-zusatz { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-wert-ico {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; background: var(--f-bg, var(--n-surface-2)); color: var(--f, var(--n-text-2));
}
body.neu .n-wert-quote { grid-template-columns: 44px 1fr; align-items: center; gap: 14px; background: var(--n-surface); }
body.neu .n-wert-quote > div { display: grid; gap: 2px; }
body.neu .n-miniring .n-ring-grund, body.neu .n-miniring .n-ring-voll { stroke-width: 6; }
body.neu .n-wert-leer .n-wert-zahl { color: var(--n-text-3); }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.neu .n-raster-naechstes { grid-template-columns: 1fr; }
  body.neu .n-auswertung { grid-template-columns: 1fr; }
  body.neu .n-quoten { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
  body.neu main { padding: var(--n-2) var(--n-2) 120px; }
  body.neu .kopf { padding: 0 12px; gap: 10px; }
  /* Ring oben rechts neben Datum und Gruss, Pills darunter über die volle Breite */
  body.neu .n-held { position: relative; display: block; }
  body.neu .n-held .n-ring { position: absolute; top: 0; right: 0; }
  body.neu .n-held .n-ring-marke { display: none; }
  body.neu .n-datum, body.neu .n-gruss { padding-right: 100px; }
  body.neu .n-gruss { font-size: 30px; }
  body.neu .n-statpills { margin-top: 12px; }
  body.neu .n-ring > svg { width: 88px; height: 88px; }
  body.neu .n-ring-zahl { width: 88px; height: 88px; }
  body.neu .n-ring-zahl b { font-size: 26px; }
  body.neu .n-statpills li { height: 32px; font-size: 13px; }
  body.neu .n-kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.neu .n-kachel { min-height: 164px; padding: 14px 14px 14px; }
  body.neu .n-kachel-zahl { font-size: 36px; }
  body.neu .n-kachel-text { font-size: 12.5px; }
  body.neu .n-karte { padding: var(--n-2); }
  body.neu .n-termin-gross { grid-template-columns: auto 1fr; }
  body.neu .n-termin-gross .n-knopf { grid-column: 1 / -1; }
  body.neu .n-banner { flex-wrap: wrap; }
  body.neu .n-banner .n-knopf { width: 100%; }
  body.neu .n-balken a { grid-template-columns: 70px 1fr 64px; gap: 10px; }
  body.neu .n-balken-zahl small { display: none; }
  body.neu .n-versuche-zahlen { gap: var(--n-3); }
  body.neu .n-versuche-summe { padding-left: var(--n-3); }
  body.neu .n-versuche-kopf .n-knopf { width: 100%; }
  body.neu .n-segmented { width: 100%; overflow-x: auto; }
  body.neu .n-segmented a { padding: 0 8px; flex: 1; white-space: nowrap; font-size: 13px; }
  body.neu .n-werte { grid-template-columns: 1fr 1fr; }
  /* Auf dem Telefon steht der Knopf in der Kopfleiste (stil.css) — nur das Zeichen */
  body.neu .politishinweis, body.neu .politisname { display: none; }
  body.neu .politisknopf { display: inline-flex; padding: 0; box-shadow: none; background: none; }
  body.neu .politiszeichen { width: 38px; height: 38px; }
  body.neu .kopf .marke-wortbild { height: 34px; }
  body.neu .n-ring-teile { right: -8px; width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  body.neu *, body.neu *::before, body.neu *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 5. Variante B und C: getönte Kacheln, Bento, Banner mit Kante ──────
   C ist die Mischung (25.09.2026): alles hier ausser der dunklen Kopfkarte —
   Klasse nur in B setzt. */
body.neu { --n-bg: #F3F3EE; }

body.neu .n-banner-rot { background: var(--n-surface); box-shadow: var(--n-schatten), inset 4px 0 0 var(--n-rot); }

body.neu .n-kachel { background: linear-gradient(180deg, var(--f-bg) 0%, var(--n-surface) 62%); }
body.neu .n-kachel::after { display: none; }
body.neu .n-kachel-ico { background: var(--f); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--f) 35%, transparent); }
body.neu .n-f-akzent .n-kachel-ico { background: var(--n-lime); color: #1E1F10; }
body.neu .n-kachel-zahl { font-size: 52px; }
body.neu .n-raster-naechstes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.neu .n-termin-gross { background: linear-gradient(135deg, var(--n-blau-bg), transparent); }
body.neu .klappkopf { font-size: 22px; }

@media (max-width: 640px) {
  body.neu .n-kachel-zahl { font-size: 40px; }
  body.neu .n-raster-naechstes { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu { --n-bg: #0E0F0F; }
}
:root[data-thema="dunkel"] body.neu { --n-bg: #0E0F0F; }

/* Im Dunkeln sind die Statusfarben hell — das Symbol darauf wird dunkel */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu .n-kachel-ico { color: #111212; }
}
:root[data-thema="dunkel"] body.neu .n-kachel-ico { color: #111212; }

/* ══════════════════════════════════════════════════════════════════════════
   6. Listen (Erster Kontakt, Nachfassen, Interesse, Abschluss, Leads)
   Funktioniert gut — nur Feinschliff: Pills statt Kästen, ganze Zeile
   klickbar, Sticky-Header, Nummern als Telefonlinks mit Symbol.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .titelzeile { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 4px; }
body.neu .titelzeile h1 { font-size: 34px; font-weight: 750; letter-spacing: -.03em; }
body.neu .titelzeile .anzahl {
  font-size: 14px; font-weight: 600; color: var(--n-text-2);
  background: var(--n-surface); box-shadow: var(--n-schatten); border-radius: 999px; padding: 4px 12px;
}
body.neu .einleitung { color: var(--n-text-2); font-size: 15px; margin: 0 0 var(--n-3); max-width: 70ch; }

body.neu .tabelle {
  border: 0; border-radius: var(--n-r-l); background: var(--n-surface);
  box-shadow: var(--n-schatten); overflow: clip;
}
body.neu .tabelle .kopfzeile {
  position: sticky; top: 64px; z-index: 5;
  background: color-mix(in srgb, var(--n-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--n-text-3); border-bottom: 1px solid var(--n-hair); padding-top: 12px; padding-bottom: 12px;
}
body.neu .n-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
body.neu .n-sort::after { content: "↕"; font-size: 11px; opacity: .5; }
body.neu .n-sort.aktiv { color: var(--n-text); }
body.neu .n-sort.aktiv::after { content: "↓"; opacity: 1; }
body.neu .n-sort:hover { color: var(--n-text); }

/* Nur breit: Darunter gilt die gestapelte Zeile aus stil.css */
@media (min-width: 901px) {
  body.neu .anrufliste .kopfzeile, body.neu .anrufliste .anrufzeile {
    grid-template-columns: minmax(200px, 1.5fr) minmax(150px, 1fr) minmax(210px, 1.1fr) 48px 160px 96px 24px;
    gap: 16px; padding-left: 20px; padding-right: 16px;
  }
}
body.neu .anrufzeile, body.neu .tabelle .zeile {
  border-bottom: 1px solid var(--n-hair); cursor: pointer; min-height: 72px; box-sizing: border-box;
  transition: background .15s ease;
}
body.neu .anrufzeile:hover, body.neu .tabelle .zeile:hover { background: var(--n-surface-2); }
body.neu .anrufzeile[data-offen], body.neu .tabelle .zeile[data-offen] {
  background: var(--n-gruen-bg); box-shadow: inset 3px 0 0 var(--n-lime);
}
body.neu .anrufzeile .firma, body.neu .tabelle .firma { font-size: 15px; font-weight: 600; color: var(--n-text); }
body.neu .anrufzeile .firma small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .anrufzeile .person { font-size: 14px; }
body.neu .anrufzeile .person small { font-size: 12.5px; color: var(--n-text-3); }

/* „Testdatensatz" als kleine Pill neben dem Namen statt voller roter Box */
body.neu .firma .testmarke, body.neu .anrufzeile .firma small.testmarke {
  display: inline-flex !important; width: auto; margin: 4px 0 0; padding: 1px 8px;
  border: 0; border-radius: 999px; background: var(--n-orange-bg); color: var(--n-orange-text);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
body.neu .n-mehr {
  display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px;
  margin-left: 4px; border-radius: 999px; background: var(--n-surface-2); color: var(--n-text-2);
  font-size: 11.5px; font-weight: 650; cursor: help; vertical-align: 1px;
}

/* Nummern: Telefonsymbol, „Direkt" bleibt hervorgehoben */
body.neu .waehlen {
  gap: 6px; align-items: center; padding: 5px 10px 5px 8px; border: 0; border-radius: 10px;
  background: var(--n-surface-2); color: var(--n-text); font-size: 13.5px; min-height: 32px; box-sizing: border-box;
  transition: background .15s ease, transform .3s var(--n-feder);
}
body.neu .waehlen::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.neu .waehlen small { font-size: 11px; color: var(--n-text-3); }
body.neu .waehlen:hover { background: var(--n-gruen-bg); border: 0; transform: translateY(-1px); }
body.neu .waehlen.direkt { background: var(--n-lime); color: #1E1F10; font-weight: 650; border: 0; }
body.neu .waehlen.direkt::before { opacity: 1; }
body.neu .waehlen.direkt small { color: rgba(30, 31, 16, .7); }
body.neu .nummern { gap: 6px; }

/* Score: Werte als farbige Pill, leer als graues „–" ohne Fläche */
body.neu .score {
  width: auto; min-width: 32px; height: 28px; padding: 0 6px; box-sizing: border-box; border-radius: 9px;
  background: var(--n-lime); color: #1E1F10; font-weight: 700; font-size: 14px;
  display: inline-grid; place-items: center;
}
body.neu .score.mittel { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .score.leer { background: none; color: var(--n-text-3); font-weight: 500; }

/* Status als dezente Pill mit Farbpunkt */
body.neu .status {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px;
  padding: 4px 10px 4px 8px; font-size: 12.5px; font-weight: 550; white-space: nowrap;
  background: var(--n-surface-2); color: var(--n-text-2);
}
body.neu .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; flex: none; }
body.neu .status.faellig { background: var(--n-orange-bg); color: var(--n-orange-text); }
body.neu .status.laeuft { background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .status.aktiv { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .statuszelle small { display: block; font-size: 12px; color: var(--n-text-3); margin-top: 3px; }
body.neu .terminvermerk.warn { color: var(--n-rot) !important; font-weight: 600; }
body.neu .anrufzeile .datum { font-size: 13px; color: var(--n-text-2); }

/* „Details" entfällt — ein Chevron sagt, dass die Zeile aufgeht */
body.neu .anrufzeile .detailzelle .knopf { display: none; }
body.neu .anrufzeile .detailzelle::after {
  content: ""; display: block; width: 16px; height: 16px; margin-left: auto; background: var(--n-text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--n-feder);
}
body.neu .anrufzeile:hover .detailzelle::after { transform: translateX(3px); background: var(--n-text); }

body.neu .blaettern { color: var(--n-text-2); font-size: 14px; padding: var(--n-2) 0; }
body.neu .leerlauf { padding: var(--n-5) var(--n-3); text-align: center; color: var(--n-text-2); }
body.neu .leerlauf b { display: block; font-size: 18px; color: var(--n-text); margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   7. Lead-Drawer (Tafel)
   Reihenfolge nach Gesprächsablauf, ohne die Vorlage umzubauen: Die Blöcke
   bekommen eine `order`. Kontakt → Einstieg → Briefing/Bewertung → Notiz,
   danach der Verlauf (eingeklappt) und die Firmendaten; das Ergebnis steht
   fest unten.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .schleier { background: rgba(20, 20, 18, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.neu .seite {
  top: 8px; right: 8px; bottom: 8px; border: 0; border-radius: 24px; overflow: hidden;
  background: var(--n-surface); box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 0 0 1px var(--n-hair);
  transform: translateX(calc(100% + 24px));
  transition: transform .5s var(--n-feder);
}
body.neu .seite[data-an] { transform: none; }
body.neu .seite.breit { width: min(52vw, 840px); }
@media (max-width: 1100px) { body.neu .seite.breit { width: calc(100vw - 16px); } }
@media (max-width: 640px) { body.neu .seite.breit { width: 100vw; } }
body.neu .seitenkopf { padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--n-hair); gap: 8px; align-items: center; }
body.neu .seitenkopf h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
body.neu .seitenkopf h2 small { font-size: 13px; color: var(--n-text-3); margin-top: 4px; }
body.neu .seitenkopf h2 small a { color: var(--n-text-2); white-space: nowrap; }
body.neu .zu {
  width: 40px; height: 40px; border-radius: 50%; background: var(--n-surface-2); color: var(--n-text-2);
  display: grid; place-items: center;
}
body.neu .zu:hover { background: var(--n-hair-2); color: var(--n-text); }
body.neu .verschieben > summary {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px;
  border: 0; background: var(--n-surface-2); color: var(--n-text-2); font-size: 13.5px; font-weight: 550;
}
body.neu .n-label { font-size: 13.5px; }
body.neu .tafelchatknopf, body.neu .tafeldokknopf {
  height: 40px; border-radius: 12px; padding: 0 14px; font-weight: 600; font-size: 13.5px; box-sizing: border-box;
}
body.neu .tafelchatknopf { background: var(--n-lime); color: #1E1F10; border: 0; }
body.neu .tafeldokknopf { background: var(--n-surface-2); border: 0; color: var(--n-text); }

/* Unten Platz für die schwebende Ergebnisleiste — sonst liegt sie über „Speichern" */
body.neu .seiteninhalt { display: flex; flex-direction: column; gap: 0; padding: 20px 24px 120px; }
body.neu .seiteninhalt > * { order: 20; }
/* **Der Verlauf steht direkt unter dem Kontakt** — wie in der alten Tafel
   (Entscheidung 25.09.2026). Wer anruft, liest zuerst, was beim letzten Mal
   war; erst danach Einstieg und Briefing. */
body.neu .seiteninhalt > .meldung { order: 0; }
body.neu .seiteninhalt > .kontaktbereich { order: 1; }
body.neu .seiteninhalt > .testmarke { order: 2; }
body.neu .seiteninhalt > .verlaufblock { order: 3; }
body.neu .seiteninhalt > .ansatzpunkt { order: 4; }
body.neu .seiteninhalt > .tafelpaar { order: 5; }
body.neu .seiteninhalt > .letztenotiz { order: 6; }
body.neu .seiteninhalt > .angeheftet, body.neu .seiteninhalt > [class*="angeheftet"] { order: 6; }
body.neu .seiteninhalt > .feldmarke { order: 7; }
body.neu .seiteninhalt > .notizfeld { order: 8; }
body.neu .seiteninhalt > .notizknopf { order: 9; }
body.neu .seiteninhalt > .anheften, body.neu .seiteninhalt > label:has(input[id^="anheften"]) { order: 10; }
body.neu .seiteninhalt > .block { order: 11; }

/* Kontakt oben als Karte, die Nummer gross */
body.neu .kontaktbereich {
  background: var(--n-surface-2); border-radius: var(--n-r); padding: 16px 18px; margin-bottom: 12px;
}
body.neu .kontaktkopf { margin: 0; gap: 12px 16px; }
body.neu .kontaktkopf b { font-size: 17px; font-weight: 700; }
body.neu .kontaktkopf .waehlen { font-size: 16px; padding: 10px 14px 10px 12px; min-height: 44px; background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .kontaktkopf .waehlen.direkt { background: var(--n-lime); }
body.neu .kontaktkopf .mailen { font-size: 13.5px; color: var(--n-oliv-text); }
body.neu .seiteninhalt > .testmarke {
  align-self: flex-start; border: 0; border-radius: 999px; padding: 3px 10px; margin: 0 0 12px;
  background: var(--n-orange-bg); color: var(--n-orange-text); font-size: 12px; font-weight: 600;
}

/* Einstieg: Lime-Callout direkt unter der Nummer */
body.neu .ansatzpunkt {
  border: 0; border-radius: var(--n-r); margin: 0 0 16px; padding: 14px 16px 14px 18px;
  background: linear-gradient(135deg, rgba(201, 215, 56, .32), rgba(201, 215, 56, .14));
  box-shadow: inset 4px 0 0 var(--n-lime); font-size: 15px; line-height: 1.5; color: var(--n-text);
}
body.neu .ansatzpunkt b {
  display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-oliv-text); margin-bottom: 4px;
}

body.neu .tafelpaar { gap: 16px; margin-bottom: 16px; }
body.neu .seiteninhalt .block h3, body.neu .seiteninhalt .verlaufblock h3 {
  font-size: 12px; letter-spacing: .06em; color: var(--n-text-3); font-weight: 650;
}
body.neu .briefingtext { background: var(--n-surface-2); border-radius: var(--n-r); padding: 14px 16px; font-size: 14.5px; line-height: 1.6; }

/* Bewertung: Skala x/10 mit Minibalken */
body.neu .scorekopf .score { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
body.neu .n-skala { display: grid; gap: 6px; min-width: 96px; }
body.neu .n-skala b { font-size: 15px; color: var(--n-text); font-weight: 700; }
body.neu .n-skala b small { color: var(--n-text-3); font-weight: 500; }
body.neu .n-skala i { display: block; height: 6px; border-radius: 3px; background: var(--n-surface-2); position: relative; overflow: hidden; }
body.neu .n-skala i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--n-lime); }

/* Notiz */
body.neu .feldmarke { font-size: 12px; letter-spacing: .06em; color: var(--n-text-3); font-weight: 650; text-transform: uppercase; margin-top: 8px; }
body.neu .notizfeld textarea {
  border-radius: var(--n-r); border: 1px solid var(--n-hair-2); background: var(--n-surface); font-size: 15px; padding: 12px 14px;
}
body.neu .notizfeld textarea:focus { border-color: var(--n-lime-2); box-shadow: var(--n-fokus); outline: none; }
body.neu .notizknopf { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; }
body.neu .notizknopf .knopf {
  min-height: 40px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--n-text); color: var(--n-surface); font-weight: 600;
}
body.neu .notizknopf .hinweis { font-size: 13px; color: var(--n-text-3); }

/* Verlauf: die letzten drei immer sichtbar, „Alle Aktivitäten" öffnet den Rest */
body.neu .verlaufblock { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--n-hair); }
body.neu .verlaufkopf { display: flex; align-items: center; gap: 8px; }
body.neu .n-verlauffilter {
  margin-left: auto; border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px; cursor: pointer;
  background: var(--n-surface-2); color: var(--n-text-2); font: 550 12.5px/1 var(--n-schrift);
  letter-spacing: 0; text-transform: none;
}
body.neu .n-verlauffilter:hover { background: var(--n-hair-2); color: var(--n-text); }
body.neu .n-verlauffilter[aria-expanded="true"] { background: var(--n-text); color: var(--n-surface); }
body.neu .verlaufblock[data-n] details.weitere > summary { display: none; }
body.neu .verlaufblock .stufe { font-size: 12px; color: var(--n-text-2); }

/* Ergebnis-Leiste: grössere Ziele, dezente Farbe je Ergebnis, Aussortieren abgesetzt */
body.neu .seitenfuss { background: transparent; border-top: 0; padding: 0 12px 12px; }
body.neu .ergebnisbereich.schwebend { box-shadow: none; }
body.neu .ergebnisleiste {
  background: var(--n-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 0; border-radius: 20px; box-shadow: var(--n-schatten-hoch); padding: 8px; gap: 6px;
}
body.neu .ergebnismarke { display: none; }
body.neu .ausgangsknopf {
  --a: var(--n-text-2); --a-bg: var(--n-surface-2);
  position: relative; flex: 1; min-height: 64px; min-width: 64px; border-radius: 14px; padding: 8px 6px;
  color: var(--a); background: transparent; gap: 5px;
  transition: background .15s ease, transform .3s var(--n-feder);
}
body.neu .ausgangsknopf .beschriftung { font-size: 12px; font-weight: 600; }
body.neu .ausgangsknopf:hover { background: var(--a-bg); color: var(--a); transform: translateY(-2px); }
body.neu .ausgangsknopf:active { transform: scale(.96); }
body.neu .ausgangsknopf.interesse { --a: var(--n-petrol); --a-bg: var(--n-petrol-bg); background: var(--n-petrol-bg); }
body.neu .ausgangsknopf.rueckruf, body.neu .ausgangsknopf.termin { --a: var(--n-blau); --a-bg: var(--n-blau-bg); }
body.neu .ausgangsknopf.nicht_abgehoben { --a: var(--n-orange-text); --a-bg: var(--n-orange-bg); }
body.neu .ausgangsknopf.kein_bedarf { --a: var(--n-text-2); --a-bg: var(--n-surface-2); }
body.neu .ausgangsknopf.verworfen { --a: var(--n-rot); --a-bg: var(--n-rot-bg); }
body.neu .leistenluecke { flex: none; width: 1px !important; min-width: 0; padding: 0; align-self: stretch; margin: 10px 6px; background: var(--n-hair-2); border: 0; }
body.neu .ausgangsklappe { background: var(--n-surface); border-radius: 20px; box-shadow: var(--n-schatten-hoch); border: 0; margin-bottom: 8px; }
body.neu .ausgangsklappe .knopf.weg { background: var(--n-rot); color: #fff; border: 0; border-radius: 12px; min-height: 40px; }

/* ══════════════════════════════════════════════════════════════════════════
   8. Politis AI — im Drawer und als Vollansicht
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .leadchatkopf { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--n-hair); background: var(--n-surface); }
body.neu .n-zurueck {
  border: 0; background: var(--n-surface-2); color: var(--n-text); border-radius: 12px; padding: 0 14px; min-height: 40px;
  font: 600 13.5px/1 var(--n-schrift); cursor: pointer; white-space: nowrap;
}
body.neu .n-zurueck:hover { background: var(--n-hair-2); }
body.neu .n-leadzeile { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
body.neu .n-leadzeile b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-leadnummer { font-size: 13px; color: var(--n-text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
body.neu .n-rundknopf.klein { width: 40px; height: 40px; background: var(--n-lime); color: #1E1F10; }
body.neu .tafelchat { background: var(--n-surface); }

body.neu main:has(> .chatseite) { max-width: none; padding: 0; }
body.neu .chatseite { height: calc(100vh - 65px); background: var(--n-bg); }
body.neu .chatspalte { background: var(--n-bg); border-right: 1px solid var(--n-hair); padding: 12px; }
body.neu .chatneu {
  width: 100%; min-height: 44px; border-radius: 14px; border: 0; background: var(--n-lime); color: #1E1F10;
  font-weight: 650; box-shadow: 0 1px 2px rgba(110, 125, 0, .3);
}
body.neu .n-chatsuche input {
  width: 100%; box-sizing: border-box; height: 38px; margin: 10px 0 8px; border-radius: 12px; border: 0; padding: 0 12px 0 34px;
  background: rgba(118, 118, 128, .12) no-repeat 11px center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6869' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E");
  color: var(--n-text); font: 14px var(--n-schrift);
}
body.neu .n-chatsuche input:focus { outline: none; box-shadow: var(--n-fokus); background-color: var(--n-surface); }
body.neu .n-chatfest {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px;
  text-decoration: none; color: var(--n-text); background: var(--n-surface); box-shadow: var(--n-schatten);
}
body.neu .n-chatfest:hover { box-shadow: var(--n-schatten-hoch); }
body.neu .n-chatfest-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--n-gruen-bg); color: var(--n-oliv-text); font-size: 16px; }
body.neu .n-chatfest b { display: block; font-size: 14px; }
body.neu .n-chatfest small { font-size: 12px; color: var(--n-text-3); }
body.neu .chatgruppe { font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--n-text-3); padding: 14px 10px 6px; }
body.neu .chatlisteneintrag { border-radius: 12px; }
body.neu .chatlisteneintrag a { padding: 8px 10px; display: grid; gap: 2px; }
body.neu .chatlisteneintrag.aktiv { background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .chatlisteneintrag:hover:not(.aktiv) { background: var(--n-hair); }
body.neu .n-chatdatum { font-size: 11.5px; color: var(--n-text-3); }
body.neu .chatseitenkopf { background: var(--n-glass); border-bottom: 1px solid var(--n-hair); }
body.neu .chattitelfeld { font-weight: 650; font-size: 16px; color: var(--n-text); }

body.neu .chatleer { font-size: 32px; font-weight: 750; letter-spacing: -.03em; }
body.neu .chatbeispiele { gap: 10px; }
body.neu .chatbeispiel {
  min-height: 44px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--n-surface); color: var(--n-text);
  box-shadow: var(--n-schatten); font-weight: 550; transition: transform .3s var(--n-feder), box-shadow .2s ease;
}
body.neu .chatbeispiel:hover { transform: translateY(-2px); box-shadow: var(--n-schatten-hoch); background: var(--n-surface); }
body.neu .chatmensch { background: var(--n-lime); color: #1E1F10; border-radius: 20px 20px 6px 20px; }
body.neu .chattext { font-size: 15.5px; line-height: 1.65; }
body.neu .chatzugfuss { gap: 6px; }
body.neu .chatkopieren, body.neu .chatausgeben, body.neu .chatverstanden summary {
  opacity: 1; font-size: 12.5px; font-weight: 550; color: var(--n-text-2); background: var(--n-surface-2);
  border-radius: 8px; padding: 6px 10px; min-height: 30px; box-sizing: border-box; display: inline-flex; align-items: center;
}
body.neu .chatkopieren:hover, body.neu .chatausgeben:hover, body.neu .chatverstanden summary:hover { background: var(--n-hair-2); color: var(--n-text); }
body.neu .chatkarte-handlung { border: 0; border-radius: var(--n-r); background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .handlungart { color: var(--n-oliv-text); }

body.neu .chateingabe {
  border: 0; border-radius: 22px; background: var(--n-surface); box-shadow: var(--n-schatten-hoch);
}
body.neu .chateingabe:focus-within { box-shadow: var(--n-schatten-hoch), var(--n-fokus); }
body.neu .chateingabe textarea, body.neu #chatfeldtext { border: 0 !important; outline: none; box-shadow: none !important; font-size: 15.5px; }
body.neu .chatquellenname { max-width: none; overflow: visible; white-space: normal; }
body.neu .chatquellen > summary { border-radius: 10px; }
body.neu .chatmodell label { position: static; width: auto; height: auto; clip: auto; font-size: 12px; color: var(--n-text-3); margin-right: 4px; }
body.neu .chatmodell select { border-radius: 10px; }
body.neu .chatsenden, body.neu .leadchatsenden { background: var(--n-lime); color: #1E1F10; width: 40px; height: 40px; }

body.neu .chattreffer { background: var(--n-bg); border-left: 1px solid var(--n-hair); }
body.neu .chatkarte { background: var(--n-surface); border-radius: var(--n-r); box-shadow: var(--n-schatten); padding: 12px 14px; }
body.neu .chatkarte:hover { box-shadow: var(--n-schatten-hoch); transform: translateY(-2px); }
body.neu .chatkartenname { font-size: 14px; }
body.neu .chatscore { border-radius: 7px; }
body.neu .chatscore.hoch { background: var(--n-lime); color: #1E1F10; }
body.neu .chatfrist.ueberfaellig { font-weight: 600; border-radius: 999px; padding: 1px 8px; }
body.neu .chatfrist.n-dring-leicht { color: var(--n-text-2); background: var(--n-surface-2); }
body.neu .chatfrist.n-dring-mittel { color: var(--n-orange-text); background: var(--n-orange-bg); }
body.neu .chatfrist.n-dring-hoch { color: var(--n-rot); background: var(--n-rot-bg); }


@media (max-width: 640px) {
  body.neu .titelzeile h1 { font-size: 28px; }
  body.neu .seite { top: 0; right: 0; bottom: 0; border-radius: 0; }
  body.neu .ausgangsknopf { min-width: 0; min-height: 56px; }
}

/* Nachträge aus der Durchsicht */
body.neu .chatmodell label { display: inline; }
body.neu .chatverstanden summary::before { content: none; }
body.neu .leadchatform {
  border: 0; border-radius: 20px; background: var(--n-surface); box-shadow: var(--n-schatten-hoch); padding: 12px 56px 12px 16px;
}
body.neu .leadchatform:focus-within { box-shadow: var(--n-schatten-hoch), var(--n-fokus); border: 0; }
body.neu .leadchatform textarea, body.neu #leadchatfeld { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent; font-size: 15px; }
body.neu .chateingabe:focus-within { box-shadow: var(--n-schatten-hoch), 0 0 0 2px rgba(189, 205, 0, .45); }

/* Status in der Statusfarbe — dieselbe Semantik wie die Kacheln */
body.neu :is(.status, .marke-status).n-s-freigegeben { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu :is(.status, .marke-status):is(.n-s-crm_eingetragen, .n-s-kunde_gewonnen) { background: var(--n-petrol-bg); color: var(--n-petrol); }
body.neu :is(.status, .marke-status):is(.n-s-termin_vereinbart) { background: var(--n-blau-bg); color: var(--n-blau); }
body.neu :is(.status, .marke-status):is(.n-s-angebotsphase, .n-s-angebot_versendet) { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu :is(.status, .marke-status):is(.n-s-absage, .n-s-manuell_verworfen, .n-s-verworfen, .n-s-falsche_nummer) { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .statuszelle { min-width: 0; }
body.neu .statuszelle .status { white-space: normal; line-height: 1.3; }

/* Leads-Tabelle (/leads): dieselbe Karte wie die Arbeitslisten */
body.neu #tabelle table {
  border-collapse: separate; border-spacing: 0; background: var(--n-surface);
  border-radius: var(--n-r-l); box-shadow: var(--n-schatten); overflow: hidden; font-size: 14px;
}
/* Kein Sticky hier: In einer Tabelle mit runden Ecken (overflow: hidden)
   klebt der Kopf an der Tabelle statt am Fenster und rutscht ins Bild. */
body.neu #tabelle th {
  background: var(--n-surface);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--n-text-3);
  padding: 14px 12px; border-bottom: 1px solid var(--n-hair);
}
body.neu #tabelle td { padding: 14px 12px; border-bottom: 1px solid var(--n-hair); }
body.neu #tabelle tbody tr { transition: background .15s ease; }
body.neu #tabelle tbody tr:hover { background: var(--n-surface-2); }
body.neu #tabelle tr:last-child td { border-bottom: 0; }
body.neu #tabelle .firma a, body.neu #tabelle .firma { font-weight: 600; color: var(--n-text); text-decoration: none; }
body.neu .marke-status {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 4px 10px 4px 8px;
  font-size: 12.5px; font-weight: 550; background: var(--n-surface-2); color: var(--n-text-2); white-space: nowrap;
}
body.neu .marke-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
body.neu .score-feld { border-radius: 9px; min-width: 32px; height: 28px; display: inline-grid; place-items: center; font-weight: 700; }
body.neu .score-feld[data-hoch=ja] { background: var(--n-lime); color: #1E1F10; }
body.neu .score-feld[data-hoch=nein] { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .knopfreihe { gap: 6px; }
body.neu .knopfreihe .knopf, body.neu #tabelle .knopf {
  border: 0; border-radius: 10px; background: var(--n-surface-2); font-size: 13px; font-weight: 500;
  min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center;
}
body.neu #tabelle div.domain { display: block; font-size: 12.5px; font-weight: 400; color: var(--n-text-3); }
body.neu .knopfreihe .knopf:hover, body.neu #tabelle .knopf:hover { background: var(--n-hair-2); }
body.neu #tabelle td.domain { font-size: 14px; color: var(--n-text-2); vertical-align: middle; }

body.neu .fuss-zweite { opacity: 1; color: var(--n-text-3); }

/* ── Drawer auf dem Telefon ────────────────────────────────────────────
   Sechs Ausgänge in einer Reihe sind auf 390 px 60 px je Knopf — zu eng für
   „Kein Bedarf (6 Monate)". Zwei Reihen zu drei, jeder Knopf ≥ 56 px hoch. */
@media (max-width: 720px) {
  body.neu .seite, body.neu .seite.breit { width: 100vw; top: 0; right: 0; bottom: 0; border-radius: 0; }
  body.neu .seitenkopf { flex-wrap: wrap; padding: 14px 16px 12px; }
  body.neu .seitenkopf h2 { flex-basis: 100%; font-size: 20px; }
  body.neu .seiteninhalt { padding: 16px 16px 190px; }
  body.neu .kontaktkopf { padding: 0; }
  body.neu .kontaktbereich { padding: 14px; }
  body.neu .ergebnisleiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; }
  body.neu .ausgangsknopf { min-height: 60px; padding: 6px 4px; }
  body.neu .ausgangsknopf .beschriftung { font-size: 11.5px; line-height: 1.2; }
  body.neu .leistenluecke { display: none; }
  body.neu .ausgangsknopf.verworfen { box-shadow: inset 0 0 0 1px var(--n-rot-bg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. Geplante Telefonate (/rueckrufe) — Terminkarten wie auf dem Dashboard
   ══════════════════════════════════════════════════════════════════════════ */
body.neu main > .hinweis:first-child a, body.neu main > p.hinweis:first-child a {
  display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 550;
  color: var(--n-oliv-text); text-decoration: none; padding: 6px 10px; margin-left: -10px; border-radius: 10px;
}
body.neu main > p.hinweis:first-child a:hover { background: var(--n-gruen-bg); }
body.neu .terminliste { display: grid; gap: var(--n-3); margin-top: var(--n-2); }
body.neu .termintag h2 {
  font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--n-text-3); margin: 0 0 10px;
}
body.neu .terminliste .termin {
  display: grid; align-items: center; gap: 4px 16px;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  grid-template-areas: "wann firma anruf kal" "wann kontakt anruf kal" "wann notiz notiz notiz";
  padding: 16px 16px 16px 20px; margin-bottom: 10px; border: 0; border-radius: var(--n-r-l);
  background: var(--n-surface); box-shadow: var(--n-schatten);
  transition: transform .35s var(--n-feder), box-shadow .2s ease;
}
body.neu .terminliste .termin:hover { transform: translateY(-2px); box-shadow: var(--n-schatten-hoch); }
body.neu .terminliste .termin > .wann {
  grid-area: wann; align-self: stretch; display: grid; place-content: center;
  border-radius: 14px; background: var(--n-blau-bg); color: var(--n-blau);
  font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
body.neu .terminliste.verstrichen .termin > .wann { background: var(--n-rot-bg); color: var(--n-rot); }
/* „ohne Uhrzeit" ist Text, keine Zahl — in 24px sprengte es das 96px-Feld. */
body.neu .terminliste .termin > .wann.ohne { padding: 0 8px; font-size: 13px; font-weight: 650; letter-spacing: 0; line-height: 1.2; text-align: center; }
body.neu .terminliste .termin > .firma { grid-area: firma; align-self: end; font-size: 16px; font-weight: 650; color: var(--n-text); text-decoration: none; }
body.neu .terminliste .termin > .firma:hover { text-decoration: underline; }
body.neu .terminliste .termin > .hinweis:not(.notizvorschau) { grid-area: kontakt; align-self: start; font-size: 14px; color: var(--n-text-2); }
body.neu .terminliste .termin > .notizvorschau {
  grid-area: notiz; margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: var(--n-surface-2); font-size: 13.5px; color: var(--n-text-2);
}
body.neu .terminliste .termin > .knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0;
  border-radius: 12px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
body.neu .terminliste .termin > .knopf:not(.still) { grid-area: anruf; background: var(--n-lime); color: #1E1F10; }
body.neu .terminliste .termin > .knopf.still { grid-area: kal; background: var(--n-surface-2); color: var(--n-text); }
body.neu .terminliste .termin > .knopf::before {
  content: ""; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: var(--n-ic) center / contain no-repeat; mask: var(--n-ic) center / contain no-repeat;
}
body.neu .terminliste .termin > .knopf:not(.still) { --n-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
body.neu .terminliste .termin > .knopf.still { --n-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
body.neu .terminliste .termin > .knopf:hover { filter: brightness(.97); transform: translateY(-1px); }
@media (max-width: 640px) {
  body.neu .terminliste .termin {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "wann firma" "wann kontakt" "anruf anruf" "kal kal" "notiz notiz";
    padding: 14px;
  }
  body.neu .terminliste .termin > .wann { font-size: 20px; }
  body.neu .terminliste .termin > .wann.ohne { font-size: 12px; }
  body.neu .terminliste .termin > .knopf { justify-content: center; margin-top: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. Ganze Lead-Seite (/leads/<id>) — dieselben Bausteine wie die Tafel
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .seitenform { display: flex; flex-direction: column; max-width: 980px; padding-bottom: 140px; }
body.neu .seitenform > * { order: 20; }
body.neu .seitenform > .kontaktkopf {
  order: 1; background: var(--n-surface); box-shadow: var(--n-schatten); border-radius: var(--n-r-l);
  padding: 18px 20px; margin-bottom: 16px;
}
body.neu .seitenform > .verlaufblock { order: 3; }
body.neu .seitenform > .ansatzpunkt { order: 4; }
body.neu .seitenform > .tafelpaar { order: 5; }
body.neu .seitenform > .letztenotiz, body.neu .seitenform > [class*="angeheftet"] { order: 6; }
body.neu .seitenform > .feldmarke { order: 7; }
body.neu .seitenform > .notizfeld { order: 8; }
body.neu .seitenform > .notizknopf { order: 9; }
body.neu .seitenform > label:has(input[id^="anheften"]), body.neu .seitenform > .anheften { order: 10; }
body.neu .seitenform > .block { order: 11; }
body.neu .seitenform > .ergebnisbereich { order: 30; }
body.neu .seitenform .tafelpaar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
body.neu .seitenform ~ .protokollblock, body.neu .protokollblock {
  max-width: 980px; margin-top: 8px; padding: 18px 20px; border: 0; border-radius: var(--n-r-l);
  background: var(--n-surface); box-shadow: var(--n-schatten);
}
body.neu .titelzeile .verschieben, body.neu .titelzeile .tafelchatknopf, body.neu .titelzeile .tafeldokknopf { align-self: center; }
body.neu .meldung.testmarke {
  display: inline-block; border: 0; border-radius: 999px; padding: 4px 12px; margin: 4px 0 12px;
  background: var(--n-orange-bg); color: var(--n-orange-text); font-size: 13px;
}
body.neu .ergebnisbereich.schwebend .ergebnisleiste { max-width: 900px; }
@media (max-width: 720px) {
  body.neu .seitenform .tafelpaar { grid-template-columns: 1fr; }
}
body.neu .seitenform .block {
  border: 0; border-radius: var(--n-r-l); background: var(--n-surface); box-shadow: var(--n-schatten);
  padding: 18px 20px; margin-bottom: 16px;
}
body.neu .seitenform .block h3 { font-size: 12px; letter-spacing: .06em; color: var(--n-text-3); font-weight: 650; }
body.neu .seitenform .block.lernpaar > * { border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
body.neu .seitenform .notizfeld { max-width: none; }
body.neu .terminliste .termin > .notizvorschau { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }

/* ══════════════════════════════════════════════════════════════════════════
   11. Anmeldung — eigene Seite ohne Kopfleiste (anmelden_neu.html)
   ══════════════════════════════════════════════════════════════════════════ */
body.n-anmeldeseite {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(201, 215, 56, .22), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(201, 215, 56, .12), transparent 60%),
    var(--n-bg);
  font: 15px/1.5 var(--n-schrift); -webkit-font-smoothing: antialiased;
}
body.n-anmeldeseite .marke-fuer-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.n-anmeldeseite .marke-fuer-dunkel { display: block; }
  :root:not([data-thema="hell"]) body.n-anmeldeseite .marke-fuer-hell { display: none; }
}
:root[data-thema="dunkel"] body.n-anmeldeseite .marke-fuer-dunkel { display: block; }
:root[data-thema="dunkel"] body.n-anmeldeseite .marke-fuer-hell { display: none; }

.n-anmeldung {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--n-4); padding: var(--n-6) var(--n-2) var(--n-4);
}
.n-anmeldelogo { margin: 0; line-height: 0; }
.n-anmeldelogo img { width: min(300px, 72vw); height: auto; }
.n-anmeldekarte {
  width: 100%; max-width: 400px; box-sizing: border-box; padding: var(--n-4);
  background: var(--n-surface); border-radius: 24px; box-shadow: var(--n-schatten-hoch);
  animation: n-einblenden .5s var(--n-sanft);
}
.n-anmeldekarte h2 {
  margin: 0 0 4px; font-size: 24px; font-weight: 750; letter-spacing: -.02em;
  text-transform: none; color: var(--n-text);
}
.n-anmeldetext { margin: 0 0 var(--n-3); color: var(--n-text-2); font-size: 14.5px; }
.n-anmeldefehler {
  margin: 0 0 var(--n-2); padding: 10px 14px; border-radius: 12px;
  background: var(--n-rot-bg); color: var(--n-rot); font-size: 14px; font-weight: 600;
}
.n-anmeldekarte form { display: grid; gap: 6px; }
.n-anmeldekarte label { font-size: 13px; font-weight: 600; color: var(--n-text-2); margin-top: 8px; }
.n-anmeldekarte input[type=text], .n-anmeldekarte input[type=password] {
  height: 48px; box-sizing: border-box; padding: 0 14px; border-radius: 14px;
  border: 1px solid var(--n-hair-2); background: var(--n-surface); color: var(--n-text);
  font: 16px var(--n-schrift); transition: border-color .15s ease, box-shadow .15s ease;
}
.n-anmeldekarte input::placeholder { color: var(--n-text-3); }
.n-anmeldekarte input:focus { outline: none; border-color: var(--n-lime-2); box-shadow: var(--n-fokus); }
.n-anmeldekarte .n-knopf { width: 100%; height: 48px; margin-top: var(--n-3); font-size: 15px; }
.n-anmeldefuss {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
  padding: var(--n-3) var(--n-2) var(--n-4); font-size: 12.5px; color: var(--n-text-3); text-align: center;
}
.n-anmeldefuss strong { color: var(--n-text-2); }
.n-anmeldefuss a { color: var(--n-text-2); }
.n-anmeldefuss-zeile { flex-basis: 100%; }
@media (max-width: 480px) {
  .n-anmeldung { justify-content: flex-start; padding-top: 12vh; gap: var(--n-3); }
  .n-anmeldekarte { padding: var(--n-3); border-radius: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Runde 2 (25.09.2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* A2 — Chat im Drawer: eine Kopfzeile. Die Schicht liegt über dem Tafelkopf,
   die Ergebnisleiste bleibt darunter sichtbar (`--tafelchat-unten`). */
body.neu #tafelrahmen .tafelchat { top: 0; z-index: 8; border-top: 0; }
body.neu .leadchatkopf { min-height: 72px; box-sizing: border-box; padding: 14px 16px 14px 20px; }
body.neu .n-leadzeile small { font-size: 13px; color: var(--n-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-leadanruf {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px;
  border-radius: 999px; background: var(--n-lime); color: #1E1F10; text-decoration: none;
  font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums;
}
body.neu .n-leadanruf svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .45); }
body.neu .n-leadanruf:hover { background: var(--n-lime-2); }
@media (max-width: 640px) { body.neu .n-leadanruf span { display: none; } body.neu .n-leadanruf { padding: 0 7px; } }

/* A3 — Aufklapp-Sektionen als Karte: ganze Kopfzeile klickbar, Chevron rechts,
   zugeklappt eine Zeile Vorschau. Die Höhe animiert über grid-template-rows
   (0fr ↔ 1fr) — ohne Messen in JavaScript. */
body.neu .n-klappkarte {
  margin-top: var(--n-3); background: var(--n-surface); border-radius: var(--n-r-l);
  box-shadow: var(--n-schatten); overflow: hidden;
}
body.neu .n-klappkopf-h { margin: 0; font: inherit; letter-spacing: 0; text-transform: none; }
body.neu .n-klappkopf {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 72px; box-sizing: border-box;
  padding: 16px 20px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--n-text);
  font: inherit; transition: background .15s ease;
}
body.neu .n-klappkopf:hover { background: var(--n-surface-2); }
body.neu .n-klappkopf:focus-visible { box-shadow: inset var(--n-fokus); border-radius: var(--n-r-l); }
body.neu .n-klapp-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--n-gruen-bg); color: var(--n-oliv-text);
}
body.neu .n-klapp-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
body.neu .n-klapp-text b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
body.neu .n-klapp-text small { font-size: 13.5px; color: var(--n-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-klappkarte:not(.n-zu) .n-klapp-vorschau { display: none; }
body.neu .n-klappkarte.n-zu .n-klapp-zusatz { display: none; }
body.neu .n-klapp-zahl {
  flex: none; min-width: 32px; height: 28px; padding: 0 10px; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; background: var(--n-surface-2); color: var(--n-text);
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body.neu .n-klapp-chevron {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--n-text-2); transition: transform .45s var(--n-feder), background .15s ease;
}
body.neu .n-klappkopf:hover .n-klapp-chevron { background: var(--n-hair); }
body.neu .n-klappkarte.n-zu .n-klapp-chevron { transform: rotate(-90deg); }
body.neu .n-klapp-rumpf { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--n-sanft); }
body.neu .n-klappkarte.n-zu .n-klapp-rumpf { grid-template-rows: 0fr; }
body.neu .n-klapp-innen { min-height: 0; overflow: hidden; padding: 0 20px 20px; transition: visibility 0s; }
body.neu .n-klappkarte.n-zu .n-klapp-innen { visibility: hidden; padding-bottom: 0; transition: visibility 0s .4s, padding .4s var(--n-sanft); }
/* Innen keine zweite Karte */
body.neu .n-klappkarte .n-karte { box-shadow: none; padding: 0; background: none; border-radius: 0; }
body.neu .n-klappkarte .n-kacheln { padding-top: 4px; }
body.neu .n-klappkarte .n-kachel { box-shadow: 0 0 0 1px var(--n-hair); }
body.neu .n-klappkarte .n-wert { box-shadow: 0 0 0 1px var(--n-hair); }
@media (max-width: 640px) {
  body.neu .n-klappkopf { padding: 14px 14px; gap: 10px; }
  body.neu .n-klapp-innen { padding: 0 14px 14px; }
  body.neu .n-klapp-ico { width: 36px; height: 36px; }
}
/* Anmeldung: `body.neu main` begrenzt die Breite, die Zentrierung aus
   stil.css fehlt hier (die Seite lädt nur neu.css) — deshalb ausdrücklich. */
body.neu main.n-anmeldung { max-width: none; width: 100%; margin: 0 auto; box-sizing: border-box; }
.n-anmeldung { gap: var(--n-3); }
.n-anmeldeversion {
  margin: calc(var(--n-2) * -1) 0 0; padding: 3px 10px; border-radius: 999px;
  background: var(--n-surface); box-shadow: var(--n-schatten);
  font-size: 12px; font-weight: 600; color: var(--n-text-2); font-variant-numeric: tabular-nums;
}

/* A5 — ein Drawer, eine Breite: ca. 50 % des Fensters, 640–820 px; mobil Vollbild */
body.neu .seite, body.neu .seite.breit { width: clamp(640px, 50vw, 820px); max-width: calc(100vw - 16px); }
@media (max-width: 720px) { body.neu .seite, body.neu .seite.breit { width: 100vw; max-width: 100vw; } }

/* „…"-Menü in den Zeilen (Frist läuft u. a.) */
body.neu .aktionen { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
body.neu .n-mehrmenue { position: relative; }
body.neu .n-mehrmenue > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--n-surface-2); color: var(--n-text); font-size: 18px; font-weight: 700; line-height: 1;
}
body.neu .n-mehrmenue > summary::-webkit-details-marker { display: none; }
body.neu .n-mehrmenue > summary:hover, body.neu .n-mehrmenue[open] > summary { background: var(--n-hair-2); }
body.neu .n-mehrmenue-feld {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px;
  display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--n-surface); box-shadow: var(--n-schatten-hoch);
}
body.neu .n-mehrmenue-feld .knopf {
  justify-content: flex-start; text-align: left; width: 100%; min-height: 40px; border: 0; border-radius: 10px;
  background: none; padding: 0 12px; font-size: 14px;
}
body.neu .n-mehrmenue-feld .knopf:hover { background: var(--n-surface-2); }
body.neu .n-mehrmenue-feld .knopf.weg { color: var(--n-rot); }
body.neu .n-mehrmenue-feld .verschieben > summary { width: 100%; justify-content: flex-start; background: none; }
body.neu .aktionen .knopf.haupt {
  border: 0; border-radius: 12px; min-height: 40px; padding: 0 14px; background: var(--n-lime); color: #1E1F10; font-weight: 600;
}

/* B1 — Skelett im Layout der Tafel statt leerer weisser Fläche */
body.neu .n-skelett { display: flex; flex-direction: column; height: 100%; }
body.neu .n-skelett i {
  display: block; height: 14px; border-radius: 7px; margin: 0 0 10px;
  background: linear-gradient(90deg, var(--n-surface-2) 0%, var(--n-hair-2) 50%, var(--n-surface-2) 100%);
  background-size: 200% 100%; animation: n-schimmer 1.2s ease-in-out infinite;
}
body.neu .n-sk-kopf { padding: 24px 24px 16px; border-bottom: 1px solid var(--n-hair); }
body.neu .n-sk-kopf i:first-child { height: 22px; }
body.neu .n-sk-rumpf { padding: 20px 24px; }
body.neu .n-sk-karte { padding: 16px; margin-bottom: 16px; border-radius: var(--n-r); background: var(--n-surface-2); }
body.neu .n-sk-karte i { background: linear-gradient(90deg, var(--n-hair) 0%, var(--n-hair-2) 50%, var(--n-hair) 100%); background-size: 200% 100%; }
body.neu .n-sk-karte.gross { margin-top: 16px; }
@keyframes n-schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   E1 — Kein seitlicher Überlauf auf dem Telefon (360–430 px)
   Ursachen (gemessen): schwebende Menüs, die links/rechts aus dem Bild ragen
   (Status ⇄, Filter, Quellen), zu breite Dokumenteinträge — und dass
   `overflow-y: auto` einen Bereich auch seitlich scrollbar macht: Ein zu
   breites Kind verschob in Safari den ganzen Drawer (m_03, m_07).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  html:has(body.neu), body.neu { overflow-x: clip; }
  body.neu .seite, body.neu .seiteninhalt, body.neu .tafelchat, body.neu .leadchatverlauf,
  body.neu .chatverlauf, body.neu .chathaupt, body.neu .chatseite, body.neu main,
  body.neu .tafeldokumente, body.neu [id="tafeldokumente"] { overflow-x: clip; }
  body.neu .chattext, body.neu .briefingtext, body.neu .eintrag, body.neu .kontaktkopf,
  body.neu .n-zeile-haupt, body.neu .dokeintrag, body.neu .mails, body.neu .handlungsatz {
    overflow-wrap: anywhere; min-width: 0;
  }
  body.neu .dokeintrag, body.neu .dokkopf { max-width: 100%; box-sizing: border-box; }
  body.neu .dokkopf { flex-wrap: wrap; }
  /* Schwebende Menüs werden unten angedockte Blätter (Bottom-Sheet) */
  body.neu .verschiebefeld, body.neu .filterfeld, body.neu .chatquellenfeld, body.neu .n-mehrmenue-feld {
    position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: auto !important;
    min-width: 0 !important; max-width: none !important; max-height: 70dvh; overflow-y: auto;
    z-index: 200 !important; border-radius: 20px !important; box-shadow: 0 -8px 40px rgba(0, 0, 0, .25) !important;
    background: var(--n-surface) !important;
  }
  body.neu .kontaktkopf .waehlen { max-width: 100%; flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 720px) {
  /* E7: Im Chat mobil keine Suche und kein Filter in der Kopfleiste (m_11) */
  body.neu:has(.chatseite) .kopf .kopfwerkzeuge { display: none; }
  /* Zeilenaktionen umbrechen statt abgeschnitten */
  body.neu .aktionen { flex-wrap: wrap; justify-content: flex-start; min-width: 0; max-width: 100%; }
  body.neu .aktionen .profil { flex-basis: 100%; }
}
/* E7 — Suche im Chat-Verlauf: ausgeblendet über Klasse (display: flex aus stil.css schlug [hidden]) */
body.neu .chatlisteneintrag.n-weg, body.neu .chatgruppe.n-weg { display: none !important; }
body.neu .n-chatsuche-leer { margin: 12px 10px; padding: 14px; border-radius: 14px; background: var(--n-surface); color: var(--n-text-2); font-size: 14px; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   E4 — Tab-Leiste und Blätter (Bottom-Sheets) am Telefon
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-tabbar { display: none; }
@media (max-width: 720px) {
  body.neu .n-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--n-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--n-hair);
  }
  body.neu .n-tabbar > a, body.neu .n-tabbar > button {
    flex: 1; min-height: 52px; display: grid; justify-items: center; align-content: center; gap: 2px;
    border: 0; background: none; color: var(--n-text-2); text-decoration: none; cursor: pointer;
    font: 600 11px/1.1 var(--n-schrift); border-radius: 12px;
  }
  body.neu .n-tabbar [aria-current] { color: var(--n-oliv-text); }
  body.neu .n-tabbar [aria-current] .ic { color: var(--n-oliv); }
  body.neu main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.neu .fuss { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  /* Der schwebende Politis-Knopf und die Kopf-Suche weichen der Leiste */
  body.neu .kopf .kopfwerkzeuge { display: none; }
}
body.neu dialog.n-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: 85dvh;
  box-sizing: border-box; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); border: 0;
  border-radius: 24px 24px 0 0; background: var(--n-surface); color: var(--n-text);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, .25); overflow-y: auto; overflow-x: clip;
}
body.neu dialog.n-sheet[open] { animation: n-sheet-hoch .38s var(--n-sanft); }
@keyframes n-sheet-hoch { from { transform: translateY(40px); opacity: .4; } }
body.neu dialog.n-sheet::backdrop { background: rgba(20, 20, 18, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.neu .n-sheet-griff { width: 40px; height: 5px; border-radius: 3px; background: var(--n-hair-2); margin: 8px auto 0; }
body.neu .n-sheet-kopf { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 8px 20px; }
body.neu .n-sheet-kopf h2 { margin: 0; font-size: 20px; font-weight: 750; text-transform: none; letter-spacing: -.02em; color: var(--n-text); }
body.neu .n-sheet-zu { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--n-surface-2); color: var(--n-text-2); display: grid; place-items: center; cursor: pointer; }
body.neu .n-sheet-inhalt { padding: 4px 16px 8px; }
body.neu .n-listen { list-style: none; margin: 0 0 12px; padding: 0; border-radius: 16px; background: var(--n-surface-2); overflow: hidden; }
body.neu .n-listen li + li { border-top: 1px solid var(--n-hair); }
body.neu .n-listenzeile {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px;
  border: 0; background: none; color: var(--n-text); text-decoration: none; font: 550 15px var(--n-schrift); text-align: left; cursor: pointer;
}
body.neu .n-listenzeile > span:not(.n-kachel-ico) { flex: 1; }
body.neu .n-listenzeile .n-kachel-ico { width: 32px; height: 32px; border-radius: 10px; }
body.neu .n-listenzahl { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--n-text-2); }
body.neu .n-listen-titel { margin: 12px 4px 6px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-abmelden { color: var(--n-rot); border-radius: 16px; background: var(--n-surface-2); justify-content: center; }
body.neu .n-suchform { display: grid; gap: 10px; }
body.neu .n-suchform input { height: 48px; border-radius: 14px; border: 1px solid var(--n-hair-2); padding: 0 14px; font: 16px var(--n-schrift); background: var(--n-surface); color: var(--n-text); }
body.neu .n-f-grau { --f: var(--n-text-2); --f-bg: var(--n-surface); }
body.neu .n-listenzeile .n-kachel-ico { background: var(--f, var(--n-surface)); color: #fff; }
body.neu .n-listenzeile.n-f-akzent .n-kachel-ico { background: var(--n-lime); color: #1E1F10; }
body.neu .n-listenzeile.n-f-grau .n-kachel-ico { background: var(--n-surface); color: var(--n-text-2); box-shadow: 0 0 0 1px var(--n-hair-2); }
/* ══ B15 Datenqualität ═══════════════════════════════════════════════════
   /datenqualitaet: auffällige Firmennamen je Mandant. Eine Karte je
   Mandant, eine Zeile je Firma; links der Befund, rechts die Entscheidung.
   Mobil stapeln sich beide. */
body.neu .n-dq-meldung {
  margin: 0 0 var(--n-2); padding: 12px 16px; border-radius: var(--n-r);
  background: var(--n-gruen-bg); color: var(--n-text); font-size: 14px;
}
body.neu .n-dq-regeln {
  margin: 0 0 var(--n-3); padding: 0; border-radius: var(--n-r);
  background: var(--n-surface); box-shadow: var(--n-schatten);
}
body.neu .n-dq-regeln > summary {
  cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 600;
  color: var(--n-text-2); list-style: none;
}
body.neu .n-dq-regeln > summary::-webkit-details-marker { display: none; }
body.neu .n-dq-regeln > summary::before { content: "›"; display: inline-block; width: 16px; transition: transform .2s var(--n-sanft); }
body.neu .n-dq-regeln[open] > summary::before { transform: rotate(90deg); }
body.neu .n-dq-regeln dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px;
  margin: 0; padding: 0 18px 18px;
}
body.neu .n-dq-regeln dd { margin: 0; font-size: 13.5px; color: var(--n-text-2); line-height: 1.45; }
body.neu .n-dq-mandant { margin: 0 0 var(--n-4); }
body.neu .n-dq-kopf {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px;
}
body.neu .n-dq-zahl {
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--n-orange-bg); color: var(--n-orange-text); font-variant-numeric: tabular-nums;
}
body.neu .n-dq-karte {
  border: 0; border-radius: var(--n-r-l); background: var(--n-surface);
  box-shadow: var(--n-schatten); overflow: hidden;
}
body.neu .n-dq-karte .n-dq-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px; align-items: center; padding: 18px 20px;
  border-bottom: 1px solid var(--n-hair);
}
body.neu .n-dq-karte .n-dq-zeile:last-child { border-bottom: 0; }
body.neu .n-dq-karte .n-dq-zeile:hover { background: none; }
body.neu .n-dq-name {
  font-size: 16px; font-weight: 650; color: var(--n-text);
  white-space: pre-wrap; word-break: break-word;
}
body.neu .n-dq-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
body.neu .n-dq-marke {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  background: var(--n-rot-bg); color: var(--n-rot); cursor: help;
}
body.neu .n-dq-regeln .n-dq-marke { cursor: default; }
body.neu .n-dq-domain { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-dq-veraltet { font-size: 12.5px; color: var(--n-orange-text); }
body.neu .n-dq-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
body.neu .n-dq-feld { display: flex; flex-direction: column; gap: 5px; margin: 0; }
body.neu .n-dq-feld > span { font-size: 12px; font-weight: 600; color: var(--n-text-3); letter-spacing: .01em; }
body.neu .n-dq-feld input {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 14px;
  border: 0; border-radius: 12px; font: inherit; font-size: 15px;
  background: var(--n-surface-2); color: var(--n-text);
  box-shadow: inset 0 0 0 1px var(--n-hair);
}
body.neu .n-dq-feld input:focus { outline: none; box-shadow: var(--n-fokus); }
body.neu .n-dq-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
body.neu .n-dq-knoepfe .knopf {
  min-height: 40px; padding: 0 16px; border-radius: 12px; border: 0;
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center;
  background: var(--n-surface-2); color: var(--n-text);
}
body.neu .n-dq-knoepfe .knopf:hover { background: var(--n-hair-2); }
body.neu .n-dq-knoepfe .knopf.haupt { background: var(--n-lime); color: #1E1F10; }
body.neu .n-dq-knoepfe .knopf.haupt:hover { filter: brightness(1.05); background: var(--n-lime); }
body.neu .n-dq-verlauf { margin-top: 12px; }
body.neu .n-dq-verlauf > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--n-text-2); padding: 6px 2px; }
body.neu .n-dq-verlauf ul {
  list-style: none; margin: 6px 0 0; padding: 6px 18px; border-radius: var(--n-r);
  background: var(--n-surface); box-shadow: var(--n-schatten);
}
body.neu .n-dq-verlauf li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--n-hair); font-size: 14px;
}
body.neu .n-dq-verlauf li:last-child { border-bottom: 0; }
body.neu .n-dq-alt { color: var(--n-text-3); text-decoration: line-through; white-space: pre-wrap; }
body.neu .n-dq-wer { margin-left: auto; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-dq-leer { border: 0; border-radius: var(--n-r-l); background: var(--n-surface); box-shadow: var(--n-schatten); padding: 20px 24px; color: var(--n-text-2); }
@media (max-width: 720px) {
  body.neu .n-dq-karte .n-dq-zeile { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  body.neu .n-dq-regeln dl { grid-template-columns: 1fr; gap: 4px; }
  body.neu .n-dq-regeln dd { margin-bottom: 8px; }
  body.neu .n-dq-knoepfe .knopf { flex: 1 1 auto; justify-content: center; }
  body.neu .n-dq-wer { margin-left: 0; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A4 Kurzbefehle (Migration 106) — eigene Kurzbefehle im Politis-AI-Chat
   Karte unter dem Tagesbriefing, Chips über dem Leadchat, Slash-Menü.
   Alles unter dem Präfix `n-kb-`; Farben nur über Tokens, damit der dunkle
   Modus von selbst mitkommt.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-kb [hidden], body.neu .n-kb[hidden] { display: none !important; }
body.neu .n-kb {
  flex: 0 1 auto; min-height: 0; max-height: 48%; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 0 8px; padding: 10px; border-radius: var(--n-r-l);
  background: var(--n-surface); box-shadow: var(--n-schatten);
}
body.neu .n-kb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.neu .n-kb-kopf h2 {
  margin: 0; padding-left: 4px; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  text-transform: none; color: var(--n-text-3);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.neu .n-kb-plus {
  flex: none; white-space: nowrap;
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--n-gruen-bg); color: var(--n-oliv-text); font: 600 12.5px var(--n-schrift);
}
body.neu .n-kb-plus:hover { background: var(--n-lime); color: #1E1F10; }
body.neu .n-kb-meldung {
  margin: 6px 0; padding: 8px 10px; border-radius: var(--n-r-s);
  background: var(--n-orange-bg); color: var(--n-orange-text); font-size: 12.5px; line-height: 1.4;
}

body.neu .n-kb-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
body.neu .n-kb-eintrag {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) 44px; align-items: center;
  border-radius: 12px; transition: background .14s ease;
}
body.neu .n-kb-eintrag:hover { background: var(--n-surface-2); }
body.neu .n-kb-eintrag.n-kb-zieht { opacity: .5; background: var(--n-gruen-bg); }
body.neu .n-kb-griff {
  cursor: grab; color: var(--n-text-3); font-size: 11px; letter-spacing: -2px; text-align: center;
  user-select: none; opacity: .55;
}
body.neu .n-kb-eintrag:hover .n-kb-griff { opacity: 1; }
body.neu .n-kb-los {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 4px 6px;
  border: 0; border-radius: 10px; background: none; color: var(--n-text); text-align: left;
  font: inherit; cursor: pointer;
}
body.neu .n-kb-los:focus-visible, body.neu .n-kb-mehr:focus-visible,
body.neu .n-kb-klein:focus-visible, body.neu .n-kb-chip:focus-visible,
body.neu .n-kb-plus:focus-visible { outline: none; box-shadow: var(--n-fokus); }
body.neu .n-kb-zeichen {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--n-gruen-bg); color: var(--n-oliv-text); font-size: 15px;
}
body.neu .n-kb-was { display: grid; min-width: 0; line-height: 1.3; }
body.neu .n-kb-was b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-kb-was small { font-size: 12px; color: var(--n-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-kb-mehr, body.neu .n-kb-klein {
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--n-text-2); font: 600 16px var(--n-schrift);
}
body.neu .n-kb-mehr:hover, body.neu .n-kb-klein:hover:not(:disabled),
body.neu .n-kb-mehr[aria-expanded="true"] { background: var(--n-hair); color: var(--n-text); }
body.neu .n-kb-klein:disabled { opacity: .35; cursor: default; }
body.neu .n-kb-weg:hover:not(:disabled) { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-kb-werkzeug {
  grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 4px; padding: 0 0 4px;
}
body.neu .n-kb-bearbeiten, body.neu .n-kb-neu { grid-column: 1 / -1; }

/* Formular: anlegen und bearbeiten */
body.neu .n-kb-form {
  display: grid; gap: 8px; margin: 8px 0 4px; padding: 10px; border-radius: var(--n-r);
  background: var(--n-surface-2);
}
body.neu .n-kb-feld { display: grid; gap: 4px; }
body.neu .n-kb-feld > span, body.neu .n-kb-icons legend {
  font-size: 12px; font-weight: 600; color: var(--n-text-2); padding: 0;
}
body.neu .n-kb-feld input, body.neu .n-kb-feld textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--n-hair-2); background: var(--n-surface); color: var(--n-text);
  font: 14px/1.4 var(--n-schrift); resize: vertical;
}
body.neu .n-kb-feld input:focus, body.neu .n-kb-feld textarea:focus { outline: none; box-shadow: var(--n-fokus); border-color: transparent; }
body.neu .n-kb-icons { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
body.neu .n-kb-icons legend { margin-bottom: 4px; }
body.neu .n-kb-icon { position: relative; cursor: pointer; }
body.neu .n-kb-icon input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
body.neu .n-kb-icon span[aria-hidden] {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--n-surface); color: var(--n-text-2); font-size: 17px; box-shadow: 0 0 0 1px var(--n-hair);
}
body.neu .n-kb-icon input:checked + span { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
body.neu .n-kb-icon input:focus-visible + span { box-shadow: var(--n-fokus); }
body.neu .n-kb-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.neu .n-kb-formfuss { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
body.neu .n-kb-abbrechen, body.neu .n-kb-speichern, body.neu .n-kb-uebernehmen {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer; font: 600 13.5px var(--n-schrift);
}
body.neu .n-kb-abbrechen { background: none; color: var(--n-text-2); }
body.neu .n-kb-abbrechen:hover { background: var(--n-hair); }
body.neu .n-kb-speichern, body.neu .n-kb-uebernehmen { background: var(--n-lime); color: #1E1F10; }

/* Leerer Zustand: zwei Beispiele zum Übernehmen */
body.neu .n-kb-leer > p { margin: 6px 4px 8px; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-kb-beispiel {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 10px; align-items: center;
  margin: 0 0 6px; padding: 8px; border-radius: 12px; background: var(--n-surface-2);
}
body.neu .n-kb-beispiel .n-kb-was b { white-space: normal; font-size: 13px; }
body.neu .n-kb-beispiel .n-kb-uebernehmen { grid-column: 1 / -1; justify-self: end; }

/* Chips im Leadchat */
body.neu .n-kb-chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 0 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.neu .n-kb-chips::-webkit-scrollbar { display: none; }
body.neu .n-kb-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 240px;
  padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten);
  font: 550 13px var(--n-schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .3s var(--n-feder), box-shadow .2s ease;
}
body.neu .n-kb-chip span[aria-hidden] { color: var(--n-oliv-text); }
body.neu .n-kb-chip:hover { box-shadow: var(--n-schatten-hoch); transform: translateY(-1px); }

/* Slash-Menü: fest über dem Eingabefeld */
body.neu .n-kb-slash {
  position: fixed; z-index: 90; max-height: min(320px, 50vh); overflow-y: auto; padding: 6px;
  border-radius: var(--n-r); background: var(--n-surface); box-shadow: var(--n-schatten-hoch);
  box-sizing: border-box;
}
body.neu .n-kb-slash-eintrag {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px;
  border-radius: 10px; cursor: pointer;
}
body.neu .n-kb-slash-eintrag.aktiv, body.neu .n-kb-slash-eintrag:hover { background: var(--n-surface-2); }
body.neu .n-kb-slash-eintrag.aktiv { box-shadow: inset 3px 0 0 var(--n-lime); }
@media (prefers-reduced-motion: reduce) {
  body.neu .n-kb-chip { transition: none; }
}
/* Kein 1-px-Seitenscroll am Desktop durch den ausserhalb liegenden Drawer */
html:has(body.neu) { overflow-x: clip; }

/* ══════════════════════════════════════════════════════════════════════════
   A1 — Profilmenü als Popover im Design-System
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .benutzermenue { position: relative; }
body.neu .benutzerfeld {
  top: calc(100% + 8px); right: 0; min-width: 280px; padding: 8px; border: 0; border-radius: 18px;
  background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten-hoch);
  animation: n-einblenden .25s var(--n-sanft);
  /* Das Admin-Menü hat zwölf Einträge — auf einem Laptop ragte „Abmelden"
     unter den Bildschirmrand (13.10.2026). Scrollen statt abschneiden. */
  max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
}
body.neu .n-profilkopf { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--n-hair); }
body.neu .n-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--n-lime); color: #1E1F10; font-weight: 750; font-size: 18px;
}
body.neu .n-profilkopf b { display: block; font-size: 15.5px; }
body.neu .n-profilkopf small { font-size: 13px; color: var(--n-text-2); }
body.neu .benutzerfeld .menueintrag {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px;
  color: var(--n-text); background: none; font: 500 14.5px var(--n-schrift); text-decoration: none; width: 100%; box-sizing: border-box; text-align: left;
}
body.neu .benutzerfeld .menueintrag:hover, body.neu .benutzerfeld .menueintrag.aktiv { background: var(--n-surface-2); }
body.neu .benutzerfeld .menueintrag::before {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor; opacity: .75;
  -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat;
  --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
body.neu .benutzerfeld a.menueintrag[href="/einstellungen"]::before { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
body.neu .benutzerfeld a.menueintrag[href="/tutorials"]::before { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E"); }
body.neu .benutzerfeld .menueintrag.abmelden { color: var(--n-rot); margin-top: 6px; border-top: 1px solid var(--n-hair); border-radius: 0 0 10px 10px; padding-top: 6px; }
body.neu .benutzerfeld .menueintrag.abmelden::before { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
body.neu .n-darstellung { display: grid; gap: 8px; padding: 10px; margin-top: 6px; border-top: 1px solid var(--n-hair); font-size: 13px; color: var(--n-text-2); }
body.neu .n-darstellung .n-segmented { width: 100%; }
body.neu .n-darstellung .n-segmented button { flex: 1; min-height: 36px; border: 0; border-radius: 9px; background: none; color: var(--n-text-2); font: 550 13.5px var(--n-schrift); cursor: pointer; }
body.neu .n-darstellung .n-segmented button[aria-current] { background: var(--n-surface); color: var(--n-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
body.neu .benutzerfeld .mandantwahl select { border-radius: 10px; min-height: 36px; }

/* ══ Runde 2 — B-Punkte ═══════════════════════════════════════════════════ */
/* B2: fällig = orange, überschritten = rot */
body.neu { --n-orange-text: #A84F0C; }
body.neu .status.n-ueber { background: var(--n-rot-bg) !important; color: var(--n-rot) !important; }
/* B8: Band als Untertitel der Skala, nicht daneben */
body.neu .n-band { font-size: 12px; color: var(--n-text-3); font-weight: 500; }
body.neu .n-band-alt { display: none; }
/* B10: „Mehr" mit Chevron statt Punkt */
body.neu .kopf nav details.navmenue > summary::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: 1px; opacity: .7;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--n-sanft);
}
body.neu .kopf nav details.navmenue[open] > summary::after { content: ""; transform: rotate(180deg); }
/* B13: „Zentrale" als klickbarer Sekundärknopf, Beschriftung nie abgeschnitten */
body.neu .waehlen:not(.direkt) { background: var(--n-surface); box-shadow: inset 0 0 0 1px var(--n-hair-2); color: var(--n-text); }
body.neu .waehlen:not(.direkt):hover { box-shadow: inset 0 0 0 1px var(--n-oliv); background: var(--n-gruen-bg); }
body.neu .waehlen { overflow: visible; width: max-content; max-width: 100%; }
body.neu .waehlen small { white-space: nowrap; }
body.neu .anrufzeile .nummern { min-width: 0; }
/* C3: Testdaten ausblenden (Schalter über den Listen) */
body.neu.n-ohne-test .anrufzeile:has(.testmarke), body.neu.n-ohne-test .tabelle .zeile:has(.testmarke),
body.neu.n-ohne-test #tabelle tr:has(.testmarke) { display: none; }
body.neu .n-testschalter { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13.5px; color: var(--n-text-2); cursor: pointer; }
body.neu .n-testschalter input { width: 18px; height: 18px; accent-color: var(--n-oliv); }
body.neu .statuszelle .n-ueber-text { color: var(--n-rot); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   E3 — Lead-Leiste im Chat (am Telefon statt der rechten Spalte)
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-leadleiste {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; overflow-x: auto; scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--n-hair); background: var(--n-glass); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.neu .n-leadleiste::-webkit-scrollbar { display: none; }
body.neu .n-leadleiste-zahl { flex: none; font-size: 12.5px; font-weight: 650; color: var(--n-text-2); padding-right: 4px; }
body.neu .n-lchip {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 2px; min-height: 40px;
  border-radius: 999px; background: var(--n-surface); box-shadow: var(--n-schatten); padding: 0 4px 0 0;
}
body.neu .n-lchip > a:first-child {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; min-height: 40px;
  color: var(--n-text); text-decoration: none; font-size: 13.5px; max-width: 220px;
}
body.neu .n-lchip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-lchip-score { font-style: normal; font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 7px; background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .n-lchip-score.hoch { background: var(--n-lime); color: #1E1F10; }
body.neu .n-lchip-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--n-text-3); flex: none; }
body.neu .n-lchip-punkt.n-s-crm_eingetragen, body.neu .n-lchip-punkt.n-s-kunde_gewonnen { background: var(--n-petrol); }
body.neu .n-lchip-punkt.n-s-freigegeben, body.neu .n-lchip-punkt.n-s-angebotsphase, body.neu .n-lchip-punkt.n-s-angebot_versendet { background: var(--n-lime-2); }
body.neu .n-lchip-punkt.n-s-angeschrieben { background: var(--n-orange); }
body.neu .n-lchip-punkt.n-s-termin_vereinbart { background: var(--n-blau); }
body.neu .n-lchip-tel { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--n-lime); color: #1E1F10; }
/* Am Desktop steht die rechte Spalte — dort ist die Leiste nur zu sehen, wenn die Spalte fehlt */
@media (min-width: 1041px) { body.neu .chatseite.hat-treffer .n-leadleiste { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   E2/E5 — Lead und Chat am Telefon
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-mehr-knopf { display: none; }
body.neu .n-ergebnis-knopf { display: none; }
@media (max-width: 720px) {
  /* Höhe = sichtbarer Bereich (Tastatur zieht ihn zusammen) */
  body.neu .seite, body.neu .seite.breit { height: var(--n-vvh, 100dvh); bottom: auto; }
  /* Ergebnis-Leiste eingeklappt: zwei Ergebnisse + Mehr */
  body.neu .ergebnisbereich:not(.n-offen) .ergebnisleiste .ausgangsknopf:not(.n-mehr-knopf):nth-of-type(n+3) { display: none; }
  body.neu .ergebnisbereich:not(.n-offen) .ergebnisleiste { grid-template-columns: 1fr 1fr 1fr; }
  body.neu .n-mehr-knopf { display: grid; --a: var(--n-text-2); --a-bg: var(--n-surface-2); }
  body.neu .n-mehr-punkte { font-size: 14px; letter-spacing: 2px; line-height: 18px; }
  body.neu .ergebnisbereich.n-offen .n-mehr-knopf { order: 99; }
  body.neu .seiteninhalt { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  body.neu .seitenfuss { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

  /* Chat im Lead: Vollbild, keine Ergebnis-Leiste, statt dessen „Ergebnis eintragen" */
  body.neu #tafelrahmen:has(#tafelchat:not([hidden])) .seitenfuss { display: none; }
  body.neu #tafelrahmen .tafelchat { bottom: 0 !important; }
  body.neu .leadchatfuss { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  body.neu .n-ergebnis-knopf {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-bottom: 8px;
    border: 0; border-radius: 12px; background: var(--n-surface-2); color: var(--n-text); font: 600 14px var(--n-schrift); cursor: pointer;
  }
  body.neu #tafelrahmen.n-ergebnis-blatt .seitenfuss {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
    background: var(--n-surface); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 48px rgba(0, 0, 0, .25);
  }
  body.neu #tafelrahmen.n-ergebnis-blatt::after {
    content: ""; position: fixed; inset: 0; z-index: 19; background: rgba(20, 20, 18, .35);
  }
  body.neu #tafelrahmen.n-ergebnis-blatt .n-mehr-knopf { display: none; }
  body.neu .leadchatnote { display: none; }
  /* Vorschlags-Chips wischbar statt abgeschnitten (m_06) */
  body.neu .leadchatverlauf .chatbeispiele, body.neu .chatvorschlaege, body.neu .n-kb-chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; justify-content: flex-start;
    margin-right: -16px; padding-right: 16px;
  }
  body.neu .leadchatverlauf .chatbeispiel, body.neu .chatvorschlaege > *, body.neu .n-kb-chips > * { flex: none; scroll-snap-align: start; }
  /* Aktionszeile kompakt */
  body.neu .chatzugfuss { gap: 4px; flex-wrap: wrap; }
  body.neu .chatkopieren, body.neu .chatausgeben, body.neu .chatverstanden summary { font-size: 12px; padding: 4px 8px; min-height: 28px; }
  /* E6: Mehrfachauswahl am Telefon aus */
  body.neu .zeile .leadwahl, body.neu .kopfzeile #alle, body.neu .massenleiste, body.neu #tabelle .wahl { display: none; }
  /* E7: Quelle und Antwortmodus kompakt */
  body.neu .chatmodell label { display: none; }
  body.neu .chatquellenname { display: none; }
}
@media (max-width: 720px) {
  body.neu .seitenfuss .ergebnisbereich { width: 100%; }
  body.neu .ergebnisbereich:not(.n-offen) .ergebnisleiste { display: grid; width: 100%; box-sizing: border-box; }
  /* Das Blatt steht über dem Schleier und über der Chat-Schicht */
  body.neu #tafelrahmen.n-ergebnis-blatt:has(#tafelchat:not([hidden])) .seitenfuss { display: block; z-index: 30; }
  body.neu #tafelrahmen.n-ergebnis-blatt::after { z-index: 25; }
}
/* E9 — Passwort anzeigen */
.n-passwortfeld { position: relative; display: block; }
.n-passwortfeld input { width: 100%; padding-right: 96px !important; }
.n-passwort-zeigen {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--n-surface-2); color: var(--n-text-2);
  font: 600 13px var(--n-schrift); cursor: pointer;
}
.n-passwort-zeigen:hover { color: var(--n-text); }
.n-passwort-zeigen:focus-visible { outline: none; box-shadow: var(--n-fokus); }
body.neu .n-filterhinweis { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--n-surface-2); color: var(--n-text-2); font: normal 600 12px var(--n-schrift); vertical-align: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   Runde 5 — Anmeldung mit Familien-Story (Split-Screen)
   ══════════════════════════════════════════════════════════════════════════ */
.n-anmeldesplit { flex: 1; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: 0; }
.n-anmeldesplit .n-anmeldung { padding: var(--n-5) var(--n-4); }
.n-story-teaser { display: none; }
.n-story {
  display: flex; flex-direction: column; justify-content: center; gap: var(--n-3);
  padding: var(--n-6) clamp(24px, 5vw, 72px); margin: 16px 16px 16px 0; border-radius: 32px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(201, 215, 56, .22), transparent 60%), #1C1D1A; color: #F2F2EE;
  box-shadow: 0 30px 80px rgba(20, 22, 10, .25);
}
.n-story-kicker { margin: 0; color: var(--n-lime); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.n-story-titel { margin: 0; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; font-weight: 750; letter-spacing: -.025em; color: #fff; text-transform: none; max-width: 22ch; }
.n-story-bild { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); aspect-ratio: 16 / 10; }
.n-story-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 40%; }
@media (prefers-reduced-motion: no-preference) {
  .n-story-bild img { animation: n-kenburns 24s ease-in-out infinite alternate; }
}
@keyframes n-kenburns { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }

.n-story-schritte {
  position: relative; padding: 18px 20px 16px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); outline: none;
}
.n-story-schritte:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 3px rgba(201, 215, 56, .7); }
.n-story-balken { display: flex; gap: 6px; margin-bottom: 14px; }
.n-story-balken i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.n-story-balken b { display: block; height: 100%; width: 0; background: var(--n-lime); }
.n-story-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.n-story-schritt { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--n-sanft), transform .45s var(--n-sanft); pointer-events: none; }
.n-story-schritt.aktiv { opacity: 1; transform: none; }
.n-story-schritt p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(242, 242, 238, .88); }
.n-story-schritt .n-story-marke { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--n-lime); letter-spacing: .02em; }
.n-story-knoepfe { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 6px; }
.n-story-knoepfe button {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.n-story-knoepfe button:hover { background: rgba(255, 255, 255, .2); }
.n-story-knoepfe button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 215, 56, .7); }
.n-story-schritte .n-story-liste { padding-bottom: 36px; }
.n-story-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.n-story-signatur { margin: 0; font-size: 15px; font-weight: 650; color: #fff; }
.n-story-signatur small { display: block; font-size: 12.5px; font-weight: 500; color: rgba(242, 242, 238, .65); }
.n-kulissen {
  position: relative; flex: none; display: grid; grid-template-columns: 96px auto; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: rgba(242,242,238,.85);
  font: 600 12.5px var(--n-schrift); cursor: pointer;
}
.n-kulissen img { grid-area: 1 / 1; width: 96px; height: 64px; object-fit: cover; border-radius: 12px; transition: opacity .5s var(--n-sanft); }
.n-kulissen .n-kulissen-lachen { opacity: 0; }
.n-kulissen.n-lacht .n-kulissen-lachen { opacity: 1; }
.n-kulissen span { grid-column: 2; }
.n-kulissen:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 215, 56, .7); }

@media (max-width: 900px) {
  .n-anmeldesplit { display: block; }
  .n-anmeldesplit .n-anmeldung { min-height: 100dvh; box-sizing: border-box; justify-content: center; padding: var(--n-3) var(--n-2); }
  .n-story-teaser {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    color: var(--n-text); text-decoration: none; font-weight: 600; font-size: 14px; background: var(--n-surface); box-shadow: var(--n-schatten);
  }
  .n-story { margin: 0 12px 16px; padding: var(--n-4) 20px; border-radius: 28px; }
  .n-story-fuss { flex-direction: column; align-items: flex-start; }
}
/* Die Story passt am Desktop ganz ins Fenster: Bild höchstens 36 % der Höhe */
@media (min-width: 901px) {
  .n-story { max-height: calc(100dvh - 32px); box-sizing: border-box; padding-top: var(--n-4); padding-bottom: var(--n-4); gap: var(--n-2); position: sticky; top: 16px; }
  .n-story-bild { aspect-ratio: auto; height: min(36vh, 380px); }
}

/* Tab-Leiste: durchsichtiger — und im Chat verdeckt sie nichts mehr.
   Die Chatseite endet über der Leiste statt dahinter (100dvh minus Kopf
   minus Leiste); so sitzt das Eingabefeld frei darüber (Rückmeldung
   25.09.2026). */
@media (max-width: 720px) {
  body.neu .n-tabbar {
    --n-tabhoehe: calc(64px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--n-surface) 55%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    border-top-color: color-mix(in srgb, var(--n-hair) 60%, transparent);
  }
  body.neu .chatseite { height: calc(100dvh - 65px - 64px - env(safe-area-inset-bottom)); min-height: 0; }
  body.neu main:has(> .chatseite) { padding-bottom: 0; }
  body.neu:has(.chatseite) .fuss { display: none; }
}
@media (max-width: 720px) { body.neu .chathinweis { display: none; } }
/* Story: Bild wechselt mit dem Schritt (weich überblendet), kurze Sätze */
.n-story-bild { position: relative; }
.n-story-foto { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--n-sanft); }
.n-story-foto.aktiv { opacity: 1; }
.n-story-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .n-story-bild { aspect-ratio: 4 / 3; } }
.n-story-kern { font-size: 22px !important; line-height: 1.25 !important; font-weight: 700; color: #fff !important; margin-bottom: 4px !important; letter-spacing: -.01em; }
.n-story-marke { font-variant-numeric: tabular-nums; }

/* ── Chat am Telefon statisch wie eine App (Rückmeldung 25.09.2026) ───────
   iOS Safari zoomt beim Antippen jedes Feldes mit weniger als 16 px Schrift
   hinein — das Chatfeld hatte 15 px. Deshalb am Telefon alle Eingaben auf
   16 px. Und auf der Chatseite scrollt nur noch der Verlauf: Die Seite selbst
   steht, federt nicht nach und schiebt Kopf und Leiste nicht mit. */
@media (max-width: 720px) {
  body.neu input, body.neu textarea, body.neu select,
  body.neu #chatfeldtext, body.neu #leadchatfeld, body.neu .kopfsuche input { font-size: 16px !important; }
  html:has(body.neu .chatseite), body.neu:has(.chatseite) {
    height: 100%; overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; width: 100%;
  }
  body.neu .chatverlauf, body.neu .leadchatverlauf { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.neu .seite { overscroll-behavior: contain; }
  body.neu .chatseite, body.neu .chathaupt { touch-action: pan-y; }
}
.n-story-foto img { object-position: 50% 42%; }

/* Beta: Feedback-Knopf auf der hellen Kopfleiste (stil.css zeichnet ihn
   weiss für den dunklen Balken). Am Telefon nur das Zeichen. */
body.neu .feedbackknopf {
  color: var(--n-text); border-color: var(--n-hair-2); background: var(--n-surface);
  min-height: 38px; box-sizing: border-box; border-radius: 12px; font-weight: 600;
}
body.neu .feedbackknopf:hover { background: var(--n-surface-2); }
body.neu .werkbank.beta { background: var(--n-petrol-bg); color: var(--n-petrol); }
@media (max-width: 720px) { body.neu .feedbackknopf > span { display: none; } body.neu .feedbackknopf { padding: 0 10px; margin-right: 4px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Runde 6, G1 — Vorschläge nach jeder Antwort
   Aktionen gefüllt in Lime mit Symbol, Folgefragen als Umriss; eine Zeile,
   seitlich wischbar.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-folgen {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding: 2px 2px 6px; margin-top: 4px;
}
body.neu .n-folgen::-webkit-scrollbar { display: none; }
body.neu .n-folge {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px; border-radius: 999px; font: 600 14px var(--n-schrift);
  text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none !important;
  transition: transform .3s var(--n-feder), background .15s ease;
}
body.neu .n-folge:active { transform: scale(.97); }
body.neu .n-folge-frage { background: transparent !important; color: var(--n-text) !important; border: 1px solid var(--n-hair-2) !important; }
body.neu .n-folge-frage:hover { background: var(--n-surface) !important; }
body.neu .n-folge-aktion, body.neu .n-folge-anrufen { background: var(--n-lime) !important; color: #1E1F10 !important; border: 0 !important; }
body.neu .n-folge-aktion:hover, body.neu .n-folge-anrufen:hover { background: var(--n-lime-2) !important; }
body.neu .n-folge-websuche { background: var(--n-blau-bg) !important; color: var(--n-blau) !important; border: 0 !important; }
body.neu .n-folge-ico { width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat; }
body.neu .n-folge-aktion .n-folge-ico { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
body.neu .n-folge-websuche .n-folge-ico { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
body.neu .n-folge-anrufen .n-folge-ico { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }

/* ══════════════════════════════════════════════════════════════════════════
   Mitteilung „Rückruf in 30 Minuten" — Karte im iOS-Stil (26.09.2026)
   Oben rechts statt unten, damit sie nie über der Ergebnisleiste liegt;
   am Telefon oben über die ganze Breite.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .erinnerungsbalken.n-mitteilung {
  position: fixed; top: 76px; right: 16px; bottom: auto !important; left: auto; z-index: 70;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 4px 12px; align-items: start;
  width: min(380px, calc(100vw - 32px)); max-width: none; box-sizing: border-box; padding: 14px 14px 14px 16px;
  border: 0; border-radius: 20px; font-size: 14px; color: var(--n-text);
  background: var(--n-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 0 0 1px var(--n-hair), 0 18px 48px rgba(20, 20, 18, .18);
  animation: n-mitteilung-rein .5s var(--n-feder);
}
body.neu .erinnerungsbalken.n-mitteilung + .erinnerungsbalken.n-mitteilung { top: auto; margin-top: 0; transform: translateY(calc(100% + 10px)); }
@keyframes n-mitteilung-rein { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
body.neu .n-mitteilung-ico {
  width: 40px; height: 40px; border-radius: 12px; background: var(--n-orange-bg); position: relative;
}
body.neu .n-mitteilung-ico::after {
  content: ""; position: absolute; inset: 10px; background: var(--n-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.neu .n-mitteilung-text p { margin: 0; line-height: 1.35; }
body.neu .n-mitteilung-titel { font-size: 12.5px; font-weight: 700; color: var(--n-orange-text); letter-spacing: .01em; }
body.neu .n-mitteilung-firma { font-size: 15.5px; font-weight: 700; margin-top: 2px !important; }
body.neu .n-mitteilung-wer { font-size: 13.5px; color: var(--n-text-2); font-variant-numeric: tabular-nums; }
body.neu .n-mitteilung-zu {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--n-surface-2); color: var(--n-text-2);
  font-size: 18px; line-height: 1; cursor: pointer;
}
body.neu .n-mitteilung-zu:hover { background: var(--n-hair-2); color: var(--n-text); }
body.neu .n-mitteilung-knoepfe { grid-column: 2 / 4; display: flex; gap: 8px; margin-top: 8px; }
body.neu .n-mitteilung-knoepfe .n-knopf { flex: 1; min-height: 40px; font-size: 14px; }
@media (max-width: 720px) {
  body.neu .erinnerungsbalken.n-mitteilung { top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; }
}

/* ── Tastatur offen (iPhone, auch als Web-App) ─────────────────────────────
   Der Chat füllt genau den sichtbaren Bereich über der Tastatur; Kopf- und
   Tab-Leiste treten zurück, der Verlauf bleibt darüber sichtbar. */
@media (max-width: 720px) {
  body.neu.n-tastatur:has(.chatseite) {
    position: fixed; left: 0; right: 0; top: var(--n-vvtop, 0px); height: var(--n-vvh, 100dvh); overflow: hidden;
  }
  body.neu.n-tastatur .kopf, body.neu.n-tastatur .n-tabbar,
  body.neu.n-tastatur .politisknopf { display: none !important; }
  body.neu.n-tastatur .chatseite { height: var(--n-vvh, 100dvh) !important; }
  body.neu.n-tastatur main:has(> .chatseite) { padding: 0 !important; }
  body.neu.n-tastatur .chatfuss { padding-bottom: 6px; }
  body.neu.n-tastatur .n-leadleiste { display: none; }
  /* Drawer und Chat im Lead: am sichtbaren Bereich festmachen */
  body.neu.n-tastatur .seite, body.neu.n-tastatur .seite.breit { top: var(--n-vvtop, 0px); height: var(--n-vvh, 100dvh); }
  /* H1: bei offener Tastatur keine Ergebnis-Leiste über dem Notizfeld */
  body.neu.n-tastatur .seitenfuss { display: none; }
}
@media (max-width: 720px) {
  /* Chat am Lead bei offener Tastatur: füllt den Drawer, Eingabe unten */
  body.neu.n-tastatur #tafelrahmen .tafelchat { top: 0; bottom: 0 !important; }
  body.neu.n-tastatur .leadchatfuss .n-ergebnis-knopf, body.neu.n-tastatur .leadchatfuss .n-kb-chips { display: none; }
}

/* Heute: die drei Zahlen im Kopf sind Links, dahinter /heute */
body.neu .n-statpills li:has(> a) { padding: 0; }
body.neu .n-statpills li > a {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px 0 6px;
  color: inherit; text-decoration: none; border-radius: 999px; transition: background .15s ease;
}
body.neu .n-statpills li > a:hover { background: var(--n-surface-2); }
body.neu .n-heute-arten { margin: 8px 0 16px; overflow-x: auto; max-width: 100%; }
body.neu .n-heute-arten a { white-space: nowrap; }
body.neu .n-heute-liste { list-style: none; margin: 0; padding: 0; background: var(--n-surface); border-radius: var(--n-r-l); box-shadow: var(--n-schatten); overflow: hidden; }
body.neu .n-heute-liste li + li { border-top: 1px solid var(--n-hair); }
body.neu .n-heute-zeile { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; color: var(--n-text); text-decoration: none; }
body.neu .n-heute-zeile:hover { background: var(--n-surface-2); }
body.neu .n-heute-zeit { flex: none; min-width: 48px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--n-oliv-text); padding-top: 1px; }
body.neu .n-heute-inhalt { flex: 1; min-width: 0; display: grid; gap: 2px; }
body.neu .n-heute-inhalt b { font-size: 15px; }
body.neu .n-heute-ausgang { font-size: 13.5px; color: var(--n-text-2); }
body.neu .n-heute-ausgang small { color: var(--n-text-3); }
body.neu .n-heute-notiz { font-size: 13.5px; color: var(--n-text-2); overflow-wrap: anywhere; }
body.neu .n-heute-zeile .n-chevron { align-self: center; }
@media (max-width: 720px) {
  /* Drawer am sichtbaren Bereich festmachen — auch ohne Tastatur */
  body.neu .seite, body.neu .seite.breit { top: var(--n-vvtop, 0px); height: var(--n-vvh, 100dvh); overscroll-behavior: contain; }
  body.neu #tafelrahmen .tafelchat { overscroll-behavior: contain; }
}

/* Tagesziel-Aufschlüsselung: Zeilen sind Links in die Listen */
body.neu .n-ring:hover .n-ring-teile, body.neu .n-ring:focus-within .n-ring-teile { pointer-events: auto; }
body.neu .n-ring-teile::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
body.neu .n-ring-teile a {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px; margin: 0 -6px; min-height: 36px; box-sizing: border-box;
  border-top: 1px solid var(--n-hair); border-radius: 8px; color: var(--n-text-2); text-decoration: none;
}
body.neu .n-ring-teile a span { flex: 1; }
body.neu .n-ring-teile a b { color: var(--n-text); font-variant-numeric: tabular-nums; }
body.neu .n-ring-teile a:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-ring-teile .n-chevron { color: var(--n-text-3); }
body.neu .n-ring-teile .n-ring-heute { justify-content: space-between; color: var(--n-oliv-text); font-weight: 600; margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════════
   Willkommen — cinematic Intro nach der Anmeldung (26.09.2026, 2. Fassung)
   Takt und Partikel stehen in `_willkommen.html` (eine Uhr für Leinwand, DOM
   und Ton). Hier nur die Zustände, die das Skript per Klasse schaltet:
     .n-wk-logo      POLITIS.AI zieht sich aus dem O auf (2,2 s)
     .n-wk-zeile     die Zeile Wort für Wort (2,8 s)
     .n-wk-cash-da   „Cash" schlägt ein, danach Text und Knopf (3,6 s)
   Bewegt werden nur transform, opacity, filter und clip-path.
   ══════════════════════════════════════════════════════════════════════════ */
.n-willkommen {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  background: #050605; color: #F4F4F0; cursor: pointer; overflow: hidden;
}
.n-willkommen[hidden] { display: none; }
.n-willkommen.n-weg { animation: n-wk-raus .6s var(--n-sanft) forwards; }
@keyframes n-wk-raus { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
.n-wk-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.n-wk-ton {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: rgba(244, 244, 240, .8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.n-wk-ton[hidden] { display: none; }
.n-wk-ton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 215, 56, .55); }
.n-wk-ton-aus, .n-wk-stumm .n-wk-ton-an { display: none; }
.n-wk-stumm .n-wk-ton-aus { display: block; }

.n-willkommen-inhalt { position: relative; z-index: 2; width: min(760px, 100%); display: grid; justify-items: center; gap: 16px; text-align: center; }

/* Das Logo: aus dem O heraus nach links und rechts. Das O selbst bleibt
   unbewegt und scharf — es liegt deckungsgleich auf den gezeichneten Ringen. */
.n-willkommen-logo {
  width: min(420px, 78vw); height: auto; opacity: 0;
  clip-path: inset(0 calc(100% - var(--o-x, 20%) - 5.4%) 0 calc(var(--o-x, 20%) - 5.4%));
  transition: opacity .25s ease, clip-path .6s cubic-bezier(.65, 0, .25, 1);
  will-change: clip-path;
}
.n-wk-logo .n-willkommen-logo { opacity: 1; clip-path: inset(0 0 0 0); }

.n-willkommen-hallo, .n-willkommen-text, .n-willkommen-los, .n-wk-titel span {
  opacity: 0; transform: translateY(18px); filter: blur(8px);
  transition: opacity .5s var(--n-sanft), transform .6s var(--n-feder), filter .5s var(--n-sanft);
}
.n-willkommen-hallo { margin: 6px 0 0; min-height: 1.2em; font-size: 18px; font-weight: 600; color: rgba(244, 244, 240, .72); }
.n-wk-titel { margin: 0; font-size: clamp(38px, 6.5vw, 76px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; color: #fff; text-transform: none; }
.n-wk-titel span { display: inline-block; }
.n-wk-zeile .n-willkommen-hallo,
.n-wk-zeile .n-wk-titel span:not(.n-wk-cash) { opacity: 1; transform: none; filter: none; }
.n-wk-zeile .n-wk-titel span:nth-child(2) { transition-delay: .12s; }
.n-wk-zeile .n-wk-titel span:nth-child(3) { transition-delay: .45s; }   /* Pause nach dem Punkt */
/* „Sales." kommt zuletzt und schlägt ein — im Takt des Tons */
.n-wk-titel .n-wk-cash { color: #C9D738; transform: translateY(0) scale(1.9); transition-duration: .18s, .45s, .18s; transition-timing-function: ease-out, cubic-bezier(.3, 1.6, .5, 1), ease-out; }
.n-wk-cash-da .n-wk-titel .n-wk-cash { opacity: 1; transform: none; filter: none; animation: n-wk-schimmer 2.4s ease-in-out .5s infinite; text-shadow: 0 0 40px rgba(201, 215, 56, .6); }
@keyframes n-wk-schimmer { 50% { text-shadow: 0 0 70px rgba(201, 215, 56, .95); } }
.n-wk-cash-da .n-willkommen-text { opacity: 1; transform: none; filter: none; transition-delay: .3s; }
.n-wk-cash-da .n-willkommen-los { opacity: 1; transform: none; filter: none; transition-delay: .5s; }
.n-willkommen-text { margin: 0; font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: rgba(244, 244, 240, .75); }
.n-willkommen-los {
  margin-top: 8px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: #C9D738; color: #1E1F10; font: 700 16px var(--n-schrift, system-ui);
  box-shadow: 0 10px 34px rgba(201, 215, 56, .35);
}
.n-wk-cash-da .n-willkommen-los:hover { transform: translateY(-2px) scale(1.02); transition-delay: 0s; }
.n-willkommen-los:focus-visible { outline: none; border-radius: 999px; box-shadow: 0 0 0 4px rgba(201, 215, 56, .45), 0 10px 30px rgba(201, 215, 56, .3); }

/* Kurze Fassung (zweiter Login der Sitzung, Web-App am Morgen): ohne Anflug */
.n-wk-kurz .n-wk-leinwand { display: none; }
.n-wk-kurz .n-willkommen-logo { clip-path: inset(0 0 0 0); }
/* Bewegung reduzieren: nur ruhiges Einblenden, keine Partikel, kein Ton */
.n-wk-still .n-willkommen-logo, .n-wk-still .n-willkommen-hallo, .n-wk-still .n-wk-titel span,
.n-wk-still .n-willkommen-text, .n-wk-still .n-willkommen-los {
  transform: none !important; filter: none !important; clip-path: none !important; animation: none !important;
  transition: opacity .4s ease !important; transition-delay: 0s !important;
}

/* Tab-Leiste: mehr Glas (Rückmeldung 26.09.2026) */
@media (max-width: 720px) {
  body.neu .n-tabbar {
    background: color-mix(in srgb, var(--n-surface) 28%, transparent);
    -webkit-backdrop-filter: saturate(200%) blur(28px); backdrop-filter: saturate(200%) blur(28px);
    border-top: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 var(--n-hair);
  }
}
.n-willkommen-los:focus { outline: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Glas statt Fläche (Rückmeldung 26.09.2026)
   ══════════════════════════════════════════════════════════════════════════ */
/* Politis AI unten links: durchscheinend, mit Glaskante */
body.neu .politisknopf {
  background: color-mix(in srgb, var(--n-surface) 42%, transparent);
  -webkit-backdrop-filter: saturate(200%) blur(24px); backdrop-filter: saturate(200%) blur(24px);
  box-shadow: inset 0 0 0 1px var(--n-glas-kante), inset 0 1px 0 var(--n-glas-kante), 0 10px 34px rgba(0, 0, 0, .12);
}
body.neu .politisknopf .politiszeichen {
  background: color-mix(in srgb, var(--n-lime) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(160, 175, 20, .35);
}
/* Aktiver Reiter im Kopf: grünes Glas statt voller Fläche */
body.neu .kopf nav a[aria-current],
body.neu .kopf nav details.navmenue > summary[aria-current] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-lime) 62%, transparent), color-mix(in srgb, var(--n-lime) 40%, transparent));
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px color-mix(in srgb, var(--n-lime) 70%, transparent), 0 4px 14px rgba(160, 175, 20, .22);
  color: var(--n-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   Chat am Telefon (Rückmeldung 26.09.2026)
   Die Gesprächsliste ist eine Schublade von links: gleitet (transform, keine
   Neuberechnung des Layouts), liegt über Kopf und Tab-Leiste, schliesst per
   Schleier-Tipp oder Wischen. Knöpfe mindestens 44 px, Gespräche vor den
   Kurzbefehlen.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-chatneu-kopfform { display: none; margin: 0; }
body.neu .n-chatschleier { display: none; }
@media (max-width: 720px) {
  body.neu .chatseitenkopf { padding: 6px 8px; gap: 4px; min-height: 56px; }
  body.neu .chatklapp, body.neu .n-chatneu-kopf {
    width: 44px; height: 44px; padding: 0; flex: none; display: grid; place-items: center;
    border: 0; border-radius: 14px; cursor: pointer; color: var(--n-text);
    background: color-mix(in srgb, var(--n-surface) 55%, transparent);
    box-shadow: inset 0 0 0 1px var(--n-hair);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform .15s var(--n-feder), background .15s ease;
  }
  body.neu .chatklapp:active, body.neu .n-chatneu-kopf:active { transform: scale(.92); }
  body.neu .n-chatneu-kopfform { display: block; }
  body.neu .n-chatneu-kopf { background: var(--n-lime); color: #1E1F10; box-shadow: 0 2px 10px rgba(160, 175, 20, .35); }
  body.neu .chattitelfeld { font-size: 16px; }

  /* Die Schublade */
  body.neu .chatseite .chatspalte,
  body.neu .chatseite.liste-offen .chatspalte {
    display: flex; flex-direction: column; position: fixed; z-index: 60;
    top: 0; bottom: 0; left: 0; right: auto; width: min(86vw, 360px);
    padding: calc(10px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--n-bg) 97%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    border-right: 1px solid var(--n-hair); border-radius: 0 22px 22px 0;
    box-shadow: 0 0 60px rgba(0, 0, 0, .18);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transform: translate3d(-105%, 0, 0); visibility: hidden;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .34s;
    will-change: transform;
  }
  body.neu .chatseite.liste-offen .chatspalte {
    transform: none; visibility: visible;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s;
  }
  body.neu .n-chatschleier {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(10, 12, 8, .32); opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  body.neu .chatseite.liste-offen .n-chatschleier { opacity: 1; pointer-events: auto; }

  /* Kopf der Schublade: Zurück als echte Zeile, Neues Gespräch gross */
  body.neu .chatseite .chatzurueck {
    display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin: 0 0 6px;
    border: 0; border-radius: 12px; background: none; color: var(--n-text-2);
    font: 600 15px var(--n-schrift); cursor: pointer; align-self: flex-start; flex: none;
  }
  body.neu .chatseite .chatzurueck span { font-size: 22px; line-height: 1; }
  body.neu .chatspaltenkopf { padding: 0 0 10px; flex: none; }
  body.neu .chatneu { min-height: 50px; font-size: 16px; border-radius: 16px; width: 100%; }
  body.neu .n-chatsuche { flex: none; }
  body.neu .n-chatsuche input { min-height: 44px; font-size: 16px; }

  /* Gespräche zuerst, Werkzeuge danach */
  body.neu .chatspalte .chatliste { order: 2; flex: none; overflow: visible; }
  body.neu .chatspalte .n-chatfest { order: 3; margin-top: 14px; flex: none; }
  body.neu .chatspalte .n-kb { order: 4; flex: none; }
  body.neu .chatlisteneintrag > a { min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
  body.neu .chatlisteneintrag .chatweg { width: 44px; height: 44px; opacity: .6; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  body.neu .chatseite .chatspalte, body.neu .n-chatschleier { transition: none !important; }
}

/* Tab „AI" — das App-Icon aus dem Browser, unverändert (26.09.2026) */
@media (max-width: 720px) {
  body.neu .n-tabbar > a.n-tab-ai { gap: 2px; }
  body.neu .n-ai-scheibe { display: grid; place-items: center; width: 28px; height: 28px; margin: -6px 0 0; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .2s var(--n-feder), box-shadow .2s ease; }
  body.neu .n-ai-scheibe svg { display: block; }
  body.neu .n-tabbar > a.n-tab-ai[aria-current] .n-ai-scheibe { box-shadow: 0 0 0 1.5px var(--n-lime), 0 2px 12px rgba(160, 175, 20, .45); }
  body.neu .n-tabbar > a.n-tab-ai[aria-current] { color: var(--n-oliv-text); }
  body.neu .n-tabbar > a.n-tab-ai:active .n-ai-scheibe { transform: scale(.9); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Chat: unsere Farben leuchten dezent aus dem Hintergrund (27.09.2026)
   Eine Ebene unter dem Gespräch (::before, pointer-events aus): Lime unten
   hinter dem Eingabefeld, Oliv oben links, ein Hauch Lime oben rechts. Sie
   wandert langsam (transform, GPU); bei „Bewegung reduzieren" steht sie.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .chathaupt {
  --n-glimm-lime: rgba(201, 215, 56, .50);
  --n-glimm-oliv: rgba(138, 154, 32, .30);
  --n-glimm-hauch: rgba(201, 215, 56, .26);
  --n-glimm-ring: rgba(138, 154, 32, .16);
  position: relative; isolation: isolate; overflow: hidden; background: var(--n-bg);
}
body.neu .chathaupt::before {
  content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 48% at 50% 100%, var(--n-glimm-lime), transparent 72%),
    radial-gradient(ellipse 52% 48% at 0% 0%, var(--n-glimm-oliv), transparent 72%),
    radial-gradient(ellipse 44% 40% at 100% 10%, var(--n-glimm-hauch), transparent 72%);
  filter: blur(8px);
  animation: n-glimm 26s ease-in-out infinite alternate;
}
/* Das Muster: die Ringe aus dem Logo, vom Eingabefeld aus, nach oben
   ausgeblendet — sie führen den Blick dorthin, wo man schreibt. */
body.neu .chathaupt::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 108%,
    transparent 0 46px, var(--n-glimm-ring) 46px 47.5px, transparent 47.5px 64px);
  -webkit-mask: radial-gradient(ellipse 70% 85% at 50% 100%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
          mask: radial-gradient(ellipse 70% 85% at 50% 100%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
  animation: n-ringe 9s ease-in-out infinite alternate;
}
@keyframes n-ringe { from { transform: scale(1); opacity: .85; } to { transform: scale(1.04); opacity: 1; } }
@keyframes n-glimm {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to   { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}
body.neu .chathaupt .chatverlauf,
body.neu .chathaupt .chatfuss { background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu .chathaupt {
    --n-glimm-lime: rgba(201, 215, 56, .40);
    --n-glimm-oliv: rgba(138, 154, 32, .44);
    --n-glimm-hauch: rgba(201, 215, 56, .24);
    --n-glimm-ring: rgba(201, 215, 56, .11);
  }
}
:root[data-thema="dunkel"] body.neu .chathaupt {
  --n-glimm-lime: rgba(201, 215, 56, .40);
  --n-glimm-oliv: rgba(138, 154, 32, .44);
  --n-glimm-hauch: rgba(201, 215, 56, .24);
  --n-glimm-ring: rgba(201, 215, 56, .11);
}
@media (prefers-reduced-motion: reduce) { body.neu .chathaupt::before, body.neu .chathaupt::after { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   Sprachmodus (Schalter `stimme`, Vorschau 27.09.2026)
   Alles hängt an --pegel (0…1), gesetzt je Bild aus Mikrofon bzw. Stimme.
   ══════════════════════════════════════════════════════════════════════════ */
/* Der Knopf im Eingabefeld: grün, rund, atmet leise */
body.neu .n-stimme-knopf {
  position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #1E1F10; isolation: isolate;
  background: radial-gradient(circle at 35% 30%, #EEF4A6, var(--n-lime) 48%, #9DAE1E);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 12px rgba(160, 175, 20, .4);
  transition: transform .2s var(--n-feder);
  -webkit-tap-highlight-color: transparent;
}
body.neu .n-stimme-knopf:hover { transform: scale(1.06); }
body.neu .n-stimme-knopf:active { transform: scale(.92); }
body.neu .n-stimme-knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--n-surface), 0 0 0 5px var(--n-lime); }
body.neu .n-stimme-knopf-kugel {
  position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(201, 215, 56, .45), transparent 70%);
  animation: n-stimme-atmen 2.8s ease-in-out infinite;
}
@keyframes n-stimme-atmen { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
body.neu .leadchatform .n-stimme-knopf { width: 36px; height: 36px; margin-right: 6px; }

/* Das Vollbild */
.n-stimme {
  --pegel: 0;
  position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center;
  padding: calc(18px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 90% 60% at 50% 38%, #1B1E0F 0%, #0B0C09 70%);
  color: #F4F4F0; font-family: var(--n-schrift, system-ui); overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.n-stimme[hidden] { display: none; }
.n-stimme.n-an { opacity: 1; }
html.n-stimme-offen, html.n-stimme-offen body { overflow: hidden; }
.n-stimme-kopf { display: grid; justify-items: center; gap: 4px; }
.n-stimme-marke { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.n-stimme-vorschau { font-size: 12px; color: rgba(244, 244, 240, .5); }

/* Die Kugel: wird mit dem Ton größer, leuchtet mit */
.n-stimme-kugel {
  align-self: center; position: relative; width: min(52vw, 250px); aspect-ratio: 1; border: 0; padding: 0;
  border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: scale(calc(.94 + var(--pegel) * .32)); will-change: transform;
  filter: drop-shadow(0 0 calc(24px + var(--pegel) * 70px) rgba(201, 215, 56, calc(.25 + var(--pegel) * .45)));
}
.n-stimme-kern, .n-stimme-schimmer { position: absolute; inset: 0; border-radius: 50%; }
.n-stimme-kern {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85), transparent 22%),
    radial-gradient(circle at 50% 50%, #D8E35C 0%, #C9D738 38%, #9DAE1E 66%, #4E5A10 100%);
  box-shadow: inset 0 -18px 40px rgba(40, 48, 5, .45), inset 0 10px 30px rgba(255, 255, 255, .25);
}
.n-stimme-schimmer {
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, .35) 30%, transparent 45% 70%, rgba(238, 244, 166, .4) 82%, transparent 95%);
  mix-blend-mode: soft-light; animation: n-stimme-drehen 7s linear infinite;
}
.n-stimme[data-zustand="denkt"] .n-stimme-schimmer { animation-duration: 1.6s; }
.n-stimme[data-zustand="spricht"] .n-stimme-kern { filter: saturate(1.15) brightness(1.08); }
.n-stimme[data-zustand="verbinden"] .n-stimme-kugel { animation: n-stimme-atmen-gross 1.6s ease-in-out infinite; }
@keyframes n-stimme-drehen { to { transform: rotate(1turn); } }
@keyframes n-stimme-atmen-gross { 50% { opacity: .6; } }
.n-stimme-status { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: rgba(244, 244, 240, .8); min-height: 1.3em; }

/* Unten: grüne Wellen auf dem Ton */
.n-stimme-wellen { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; pointer-events: none; z-index: 0; }
.n-stimme-leiste { position: relative; z-index: 1; display: flex; gap: 22px; margin-top: 18px; }
.n-stimme-rund {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  color: #F4F4F0; background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .15s var(--n-feder), background .15s ease;
}
.n-stimme-rund:active { transform: scale(.92); }
.n-stimme-rund:focus-visible { outline: none; box-shadow: 0 0 0 3px #C9D738; }
.n-stimme-ende { background: rgba(255, 255, 255, .92); color: #1E1F10; }
.n-stimme .n-stimme-strich { display: none; }
.n-stimme.n-stumm .n-stimme-strich { display: inline; }
.n-stimme.n-stumm [data-stumm] { background: #C9D738; color: #1E1F10; }
@media (prefers-reduced-motion: reduce) {
  .n-stimme-schimmer, body.neu .n-stimme-knopf-kugel { animation: none; }
  .n-stimme-kugel { transform: none; }
}

/* Sprachmodus schnell erreichbar (27.09.2026): Kopf am Desktop, Tab am Telefon */
body.neu .n-kopf-stimme {
  position: relative; isolation: isolate; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; color: #1E1F10;
  background: radial-gradient(circle at 35% 30%, #EEF4A6, var(--n-lime) 48%, #9DAE1E);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 12px rgba(160, 175, 20, .38);
  transition: transform .2s var(--n-feder);
}
body.neu .n-kopf-stimme:hover { transform: scale(1.07); }
body.neu .n-kopf-stimme:active { transform: scale(.92); }
body.neu .n-kopf-stimme:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--n-surface), 0 0 0 5px var(--n-lime); }
@media (max-width: 720px) {
  body.neu .n-kopf-stimme { display: none; }
  body.neu .n-tabbar > button.n-tab-stimme { gap: 2px; }
  body.neu .n-tab-stimme-kugel {
    position: relative; width: 28px; height: 28px; margin: -6px 0 0; border-radius: 50%; display: grid; place-items: center;
    color: #1E1F10; background: radial-gradient(circle at 35% 30%, #EEF4A6, var(--n-lime) 50%, #9DAE1E);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 10px rgba(160, 175, 20, .45);
  }
  body.neu .n-tab-stimme-kugel::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(201, 215, 56, .45), transparent 70%);
    animation: n-stimme-atmen 2.8s ease-in-out infinite;
  }
  body.neu .n-tabbar > button.n-tab-stimme:active .n-tab-stimme-kugel { transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) { body.neu .n-tab-stimme-kugel::after { animation: none; } }
body.neu .n-sheet-nachsatz { padding-top: 0 !important; }

/* Installierbare App: Anleitung, wo der Browser keinen Knopf zulässt (28.09.2026) */
body.neu .n-app-dialog {
  border: 0; border-radius: 22px; padding: 26px 24px 22px; width: min(380px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--n-surface); color: var(--n-text); text-align: center; box-shadow: var(--n-schatten-hoch);
}
body.neu .n-app-dialog::backdrop { background: rgba(10, 12, 8, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.neu .n-app-dialog img { border-radius: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
body.neu .n-app-dialog h2 { margin: 12px 0 6px; font-size: 20px; text-transform: none; letter-spacing: -.01em; color: var(--n-text); }
body.neu .n-app-schritte { margin: 0 0 18px; color: var(--n-text-2); line-height: 1.55; }
body.neu .n-app-dialog .n-knopf { width: 100%; }
body.neu .n-app-installieren { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }

/* Sprachmodus: Karte zum Übernehmen (28.09.2026) */
.n-stimme-karte {
  position: relative; z-index: 2; width: min(420px, 100%); box-sizing: border-box; margin-top: 12px; padding: 14px 16px;
  border-radius: 18px; background: rgba(255, 255, 255, .1); color: #F4F4F0;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(201, 215, 56, .45);
}
.n-stimme-karte[hidden] { display: none; }
.n-stimme-karte p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.n-stimme-karte div { display: flex; gap: 8px; }
.n-stimme-karte button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; font: 700 15px var(--n-schrift, system-ui); cursor: pointer; }
.n-stimme-karte-ja { background: #C9D738; color: #1E1F10; }
.n-stimme-karte-nein { background: rgba(255, 255, 255, .14); color: #F4F4F0; }
.n-stimme[data-zustand="fehler"] .n-stimme-kern { filter: grayscale(.7) brightness(.8); }

/* Seitenspalte: Chats und Sprachgespräche getrennt, aufklappbar (28.09.2026) */
body.neu .n-chatbereich { margin: 0 0 6px; }
body.neu .n-chatbereich > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  padding: 10px 10px; margin: 4px 0 2px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--n-text);
}
body.neu .n-chatbereich > summary::-webkit-details-marker { display: none; }
body.neu .n-chatbereich > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--n-text-3); border-bottom: 2px solid var(--n-text-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--n-feder);
}
body.neu .n-chatbereich:not([open]) > summary::after { transform: rotate(-45deg); }
body.neu .n-chatbereich > summary:hover { background: var(--n-hair); }
body.neu .n-chatbereich-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--n-surface); box-shadow: inset 0 0 0 1px var(--n-hair); color: var(--n-text-2); }
body.neu .n-chatbereich-stimme { background: radial-gradient(circle at 35% 30%, #EEF4A6, var(--n-lime) 55%, #9DAE1E); color: #1E1F10; box-shadow: none; }
body.neu .n-chatbereich-zahl { font-size: 12px; font-weight: 700; color: var(--n-text-3); font-variant-numeric: tabular-nums; }
body.neu .n-chatbereich .chatgruppe { padding-left: 10px; }
.n-stimme-mitschrift { position: relative; z-index: 2; margin: 6px 0 0; max-width: min(520px, 92vw); text-align: center;
  font-size: 13.5px; line-height: 1.4; color: rgba(244, 244, 240, .62); }
.n-stimme-mitschrift[hidden] { display: none; }
.n-stimme-anliegen { font-size: 12.5px; color: rgba(201, 215, 56, .75); }

/* Daumen unter einer Chat-Antwort (Migration 111) */
body.neu .chatbewertung { display: inline-flex; gap: 2px; margin-left: 4px; }
body.neu .chatbewertung button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: var(--n-text-3); cursor: pointer; }
body.neu .chatbewertung button:hover { background: var(--n-hair); color: var(--n-text); }
body.neu .chatbewertung button[data-wert="gut"][aria-pressed="true"] { color: var(--n-oliv-text); background: color-mix(in srgb, var(--n-lime) 25%, transparent); }
body.neu .chatbewertung button[data-wert="schlecht"][aria-pressed="true"] { color: var(--schlecht, #B23A2A); background: color-mix(in srgb, #E0533D 14%, transparent); }
body.neu .n-termine-vorbei .termin > .wann { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-termine-vorbei h2 { color: var(--n-rot); }
body.neu .n-termine-vorbei .termin > .wann { font-size: 20px; line-height: 1.05; text-align: center; }
body.neu .n-termine-vorbei .termin > .wann small { display: block; font-size: 12.5px; font-weight: 650; opacity: .8; margin-bottom: 2px; }
body.neu .terminliste .termin > .knopf.still.n-ergebnis-knopf { --n-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }

/* ══════════════════════════════════════════════════════════════════════════
   Sprachmodus hell und dunkel, durchscheinend (28.09.2026)
   Der Hintergrund ist nur leicht getönt und unscharf — Dashboard oder Chat
   bleiben dahinter sichtbar, die grüne Kugel steht davor. Farben als Token
   je Modus; die Kugel und die Wellen bleiben grün.
   ══════════════════════════════════════════════════════════════════════════ */
body.neu .n-stimme {
  --st-grund: rgba(246, 246, 240, .58);
  --st-glanz: rgba(201, 215, 56, .16);
  --st-text: #1E1F10;
  --st-text-2: rgba(30, 31, 16, .62);
  --st-rund: rgba(30, 31, 16, .07);
  --st-rund-kante: rgba(30, 31, 16, .12);
  --st-ende: #1E1F10;
  --st-ende-text: #F4F4F0;
  --st-karte: rgba(255, 255, 255, .72);
  --st-anliegen: var(--n-oliv-text, #5F6B0C);
  background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--st-glanz), transparent 70%), var(--st-grund);
  -webkit-backdrop-filter: blur(9px) saturate(130%); backdrop-filter: blur(9px) saturate(130%);
  color: var(--st-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu .n-stimme {
    --st-grund: rgba(10, 11, 8, .62); --st-glanz: rgba(201, 215, 56, .14);
    --st-text: #F4F4F0; --st-text-2: rgba(244, 244, 240, .66);
    --st-rund: rgba(255, 255, 255, .12); --st-rund-kante: rgba(255, 255, 255, .14);
    --st-ende: rgba(255, 255, 255, .92); --st-ende-text: #1E1F10;
    --st-karte: rgba(255, 255, 255, .1); --st-anliegen: rgba(201, 215, 56, .8);
  }
}
:root[data-thema="dunkel"] body.neu .n-stimme {
  --st-grund: rgba(10, 11, 8, .62); --st-glanz: rgba(201, 215, 56, .14);
  --st-text: #F4F4F0; --st-text-2: rgba(244, 244, 240, .66);
  --st-rund: rgba(255, 255, 255, .12); --st-rund-kante: rgba(255, 255, 255, .14);
  --st-ende: rgba(255, 255, 255, .92); --st-ende-text: #1E1F10;
  --st-karte: rgba(255, 255, 255, .1); --st-anliegen: rgba(201, 215, 56, .8);
}
body.neu .n-stimme-vorschau { color: var(--st-text-2); }
body.neu .n-stimme-status { color: var(--st-text); opacity: .85; }
body.neu .n-stimme-mitschrift { color: var(--st-text-2); }
body.neu .n-stimme-anliegen { color: var(--st-anliegen); }
body.neu .n-stimme-rund { color: var(--st-text); background: var(--st-rund); box-shadow: inset 0 0 0 1px var(--st-rund-kante); }
body.neu .n-stimme-ende { background: var(--st-ende); color: var(--st-ende-text); box-shadow: none; }
body.neu .n-stimme.n-stumm [data-stumm] { background: #C9D738; color: #1E1F10; }
body.neu .n-stimme-karte { background: var(--st-karte); color: var(--st-text); }
body.neu .n-stimme-karte-nein { background: var(--st-rund); color: var(--st-text); }

/* Produktivität als Kurve in der Auswertung (28.09.2026) */
body.neu .n-produktiv { margin: 16px 0 6px; padding: 16px 18px 10px; border-radius: var(--n-r-l);
  background: var(--n-surface-2); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-produktiv-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
body.neu .n-produktiv-kopf h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--n-text); }
body.neu .n-produktiv-kopf small { color: var(--n-text-2); font-size: 12.5px; }
body.neu .n-produktiv-summe { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--n-text-2); font-size: 13px; }
body.neu .n-produktiv-summe b { font-size: 22px; font-weight: 750; color: var(--n-text); letter-spacing: -.02em; }
body.neu .n-trend { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
body.neu .n-trend-hoch { background: color-mix(in srgb, var(--n-lime) 28%, transparent); color: var(--n-oliv-text); }
body.neu .n-trend-runter { background: color-mix(in srgb, #E0533D 16%, transparent); color: var(--schlecht, #B23A2A); }
body.neu .n-produktiv-diagramm { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 190px 26px; margin-top: 14px; }
body.neu .n-produktiv-y { position: relative; }
body.neu .n-produktiv-y span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--n-text-3); font-variant-numeric: tabular-nums; }
body.neu .n-produktiv-plot { position: relative; }
body.neu .n-produktiv-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.neu .n-produktiv-linie { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--n-hair); }
body.neu .n-produktiv-null { border-top-color: color-mix(in srgb, var(--n-text-3) 60%, transparent); }
body.neu .n-produktiv-strich { fill: none; stroke: #A9BA1E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
body.neu .n-produktiv-punkt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--n-surface); box-shadow: 0 0 0 2px #A9BA1E; transition: transform .15s var(--n-feder), background .15s ease; }
body.neu .n-produktiv-punkt:hover { transform: scale(1.5); background: #C9D738; }
body.neu .n-produktiv-x { grid-column: 2; position: relative; }
body.neu .n-produktiv-x span { position: absolute; top: 8px; transform: translateX(-50%); font-size: 11.5px; color: var(--n-text-3); white-space: nowrap; }
body.neu .n-produktiv-x span:first-child { transform: none; }
body.neu .n-produktiv-plot svg path { animation: n-produktiv-ein .8s var(--n-sanft) both; }
@keyframes n-produktiv-ein { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 720px) { body.neu .n-produktiv-diagramm { grid-template-rows: 150px 26px; } body.neu .n-produktiv-punkt { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; } }
@media (prefers-reduced-motion: reduce) { body.neu .n-produktiv-plot svg path { animation: none; } }
/* Produktivität: ruhiger bei vielen Punkten (28.09.2026) */
body.neu .n-produktiv-punkt.n-leise { opacity: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 2px #A9BA1E; }
body.neu .n-produktiv-punkt.n-leise:hover { opacity: 1; transform: scale(.7); }
body.neu .n-produktiv-x span.n-rand-l { transform: none; }
body.neu .n-produktiv-x span.n-rand-r { transform: translateX(-100%); }
body.neu .n-produktiv-x .n-nur-telefon { display: none; }
@media (max-width: 720px) {
  body.neu .n-produktiv-x .n-nur-rechner { display: none; }
  body.neu .n-produktiv-x .n-nur-telefon { display: inline; }
}

/* Strecke im Chat: grobe Skizze mit Stopps (28.09.2026) */
body.neu .n-strecke { margin: 4px 0 10px; padding: 14px 16px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--n-text) 4%, var(--n-surface)); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-strecke-kopf { display: grid; gap: 2px; }
body.neu .n-strecke-kopf small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-strecke-kopf b { font-size: 15.5px; color: var(--n-text); }
body.neu .n-strecke-kopf span { font-size: 12.5px; color: var(--n-text-2); }
body.neu .n-strecke-feld { position: relative; height: 130px; margin: 14px 4px 8px; }
body.neu .n-strecke-feld svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.neu .n-strecke-feld path { fill: none; stroke: #BCCB2A; stroke-width: 2.5; stroke-linecap: round;
  animation: n-strecke-ein .9s var(--n-sanft) both; }
@keyframes n-strecke-ein { from { opacity: 0; } }
body.neu .n-strecke-ende { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--n-surface); box-shadow: 0 0 0 2px var(--n-text-2); }
body.neu .n-strecke-stopp { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  display: grid; place-items: center; font: 800 11px var(--n-schrift, system-ui); color: #1E1F10;
  background: #C9D738; box-shadow: 0 0 0 3px var(--n-surface), 0 2px 8px rgba(160, 175, 20, .45); cursor: default;
  transition: transform .15s var(--n-feder); }
body.neu .n-strecke-stopp:hover { transform: scale(1.2); }
body.neu .n-strecke-name { position: absolute; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-text-2); white-space: nowrap; }
body.neu .n-strecke-name.n-links { transform: translateX(-20%); }
body.neu .n-strecke-name.n-rechts { transform: translateX(-80%); }
body.neu .n-strecke-liste { margin: 6px 0 2px; padding-left: 20px; font-size: 13px; color: var(--n-text-2); columns: 2; column-gap: 20px; }
body.neu .n-strecke-liste li { break-inside: avoid; margin: 2px 0; }
body.neu .n-strecke-liste b { color: var(--n-text); font-weight: 600; }
@media (max-width: 720px) { body.neu .n-strecke-liste { columns: 1; } body.neu .n-strecke-feld { height: 110px; } }
body.neu .n-strecke-stopp.n-am-ende { width: 19px; height: 19px; margin: -26px 0 0 4px; font-size: 10px; z-index: 2; }
body.neu .n-strecke-ende { z-index: 1; }
body.neu .chatkarte-route .n-strecke { margin-top: 0; }
body.neu .n-strecke-satz { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--n-text-3); }

/* Strecke Schritt für Schritt: baut sich auf (28.09.2026) */
body.neu .n-strecke-feld { height: 150px; }
body.neu .n-strecke-feld svg { clip-path: inset(-10% 94% -10% 0); animation: n-strecke-zeichnen var(--dauer, 2s) linear .15s forwards; }
body.neu .n-strecke-feld path { animation: none; }
@keyframes n-strecke-zeichnen { to { clip-path: inset(-10% -2% -10% 0); } }
body.neu .n-strecke-stopp { opacity: 0; transform: scale(.3); animation: n-strecke-stopp .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--verz, 0s) + .15s) forwards; }
body.neu .n-strecke-stopp:hover { transform: scale(1.2); }
@keyframes n-strecke-stopp { to { opacity: 1; transform: scale(1); } }
body.neu .n-strecke-ziel { opacity: 0; animation: n-strecke-ankunft .4s ease calc(var(--dauer, 2s) + .1s) forwards; }
@keyframes n-strecke-ankunft { to { opacity: 1; } }
body.neu .n-strecke-name.n-links { transform: translateX(-12px); }
body.neu .n-strecke-name.n-rechts { transform: translateX(calc(-100% + 12px)); }
@media (max-width: 720px) {
  body.neu .n-strecke-feld { height: 130px; }
  body.neu .n-strecke-stopp { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.neu .n-strecke-feld svg, body.neu .n-strecke-stopp, body.neu .n-strecke-ziel { animation: none; opacity: 1; transform: none; clip-path: none; }
}
/* Start-Name über dem Punkt, Ziel-Name darunter — dort ist Platz */
body.neu .n-strecke-name.n-links { margin-top: 0; transform: translate(-12px, calc(-100% - 12px)); }

/* Sprachmodus: Strecke neben der Kugel (28.09.2026) */
.n-stimme-route[hidden], .n-stimme-maps[hidden] { display: none; }
body.neu .n-stimme-route-skizze, body.neu .n-stimme-route-liste {
  background: var(--st-karte); color: var(--st-text); border-radius: 20px; padding: 16px 18px;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--st-rund-kante), 0 10px 30px rgba(0, 0, 0, .12);
  animation: n-stimme-route-ein .45s var(--n-sanft) both;
}
@keyframes n-stimme-route-ein { from { opacity: 0; transform: translateY(10px) scale(.98); } }
body.neu .n-stimme-route-skizze .n-strecke-kopf b { color: var(--st-text); }
body.neu .n-stimme-route-skizze .n-strecke-feld { height: 140px; }
body.neu .n-stimme-route-liste small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-text-2); margin-bottom: 6px; }
body.neu .n-stimme-route-liste ol { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.35; }
body.neu .n-stimme-route-liste li { margin: 6px 0; opacity: 0; animation: n-strecke-stopp .4s ease calc(var(--verz, 0s) + .15s) forwards; }
body.neu .n-stimme-route-liste li b { display: block; font-weight: 650; }
body.neu .n-stimme-route-liste li span { font-size: 12.5px; color: var(--st-text-2); }
body.neu .n-stimme-maps { display: inline-flex; align-items: center; gap: 8px; height: 60px; padding: 0 22px; border-radius: 999px;
  background: #C9D738; color: #1E1F10; font: 700 15px var(--n-schrift, system-ui); text-decoration: none;
  box-shadow: 0 6px 18px rgba(160, 175, 20, .35); }
/* Rechner: Skizze links, Liste rechts der Kugel */
@media (min-width: 900px) {
  body.neu .n-stimme-route { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  body.neu .n-stimme-route-skizze, body.neu .n-stimme-route-liste { position: absolute; top: 44%; transform: translateY(-50%); pointer-events: auto; }
  body.neu .n-stimme-route-skizze { left: 3vw; width: min(32vw, 470px); }
  body.neu .n-stimme-route-liste { right: 3vw; width: min(24vw, 330px); max-height: 56vh; overflow: auto; }
  @keyframes n-stimme-route-ein { from { opacity: 0; } }
}
/* Telefon: Kugel kleiner, Skizze und Liste darunter */
@media (max-width: 899px) {
  body.neu .n-stimme.n-mit-route .n-stimme-kugel { width: min(30vw, 130px); }
  body.neu .n-stimme-route { position: relative; z-index: 2; width: 100%; display: grid; gap: 10px; margin-top: 10px; }
  body.neu .n-stimme-route-skizze { padding: 12px 14px; }
  body.neu .n-stimme-route-skizze .n-strecke-feld { height: 115px; }
  body.neu .n-stimme-route-liste { max-height: 22vh; overflow: auto; padding: 10px 14px; }
  body.neu .n-stimme-route-liste ol { font-size: 13px; }
  body.neu .n-stimme-leiste { flex-wrap: wrap; justify-content: center; gap: 14px; }
  body.neu .n-stimme-maps { height: 52px; }
}
@media (max-width: 899px) {
  body.neu .n-stimme.n-mit-route .n-stimme-leiste { flex-wrap: nowrap; gap: 10px; width: 100%; justify-content: center; }
  body.neu .n-stimme.n-mit-route .n-stimme-rund { width: 52px; height: 52px; flex: none; }
  body.neu .n-stimme-maps { height: 52px; padding: 0 16px; font-size: 14px; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
  body.neu .n-stimme.n-mit-route .n-stimme-kugel { width: min(26vw, 110px); }
  body.neu .n-stimme-route-skizze .n-strecke-kopf span { display: none; }
  body.neu .n-stimme-route-skizze .n-strecke-feld { height: 96px; margin-top: 8px; }
  body.neu .n-stimme-route-liste { max-height: 24vh; }
}

/* Sprachmodus: Leads neben der Kugel — einer als Übersicht, mehrere als Liste */
body.neu .n-stimme-route-skizze:empty, body.neu .n-stimme-route-liste:empty { display: none; }
body.neu .n-stimme-lead small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-text-2); }
body.neu .n-stimme-lead-name { display: block; margin-top: 4px; font-size: 19px; font-weight: 750; color: var(--st-text); text-decoration: none; letter-spacing: -.01em; }
body.neu .n-stimme-lead-name:hover { text-decoration: underline; }
body.neu .n-stimme-lead-ort { margin: 2px 0 10px; font-size: 13.5px; color: var(--st-text-2); }
body.neu .n-stimme-lead-marken { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
body.neu .n-stimme-score { min-width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #C9D738; color: #1E1F10; }
body.neu .n-stimme-status { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--st-rund); color: var(--st-text); }
body.neu .n-stimme-lead dl { margin: 0 0 12px; display: grid; gap: 8px; }
body.neu .n-stimme-lead dt { font-size: 11.5px; color: var(--st-text-2); }
body.neu .n-stimme-lead dd { margin: 1px 0 0; font-size: 14px; }
body.neu .n-stimme-anrufen { display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 999px; background: #C9D738;
  color: #1E1F10; font-weight: 700; font-size: 14.5px; text-decoration: none; }
body.neu .n-stimme-leadliste { margin: 0; padding-left: 22px; }
body.neu .n-stimme-leadliste li { margin: 4px 0; opacity: 0; animation: n-strecke-stopp .4s ease calc(var(--verz, 0s) + .15s) forwards; }
body.neu .n-stimme-leadliste a { display: block; padding: 6px 8px; margin-left: -8px; border-radius: 10px; color: var(--st-text); text-decoration: none; }
body.neu .n-stimme-leadliste a:hover { background: var(--st-rund); }
body.neu .n-stimme-leadliste b { display: block; font-weight: 650; font-size: 14px; }
body.neu .n-stimme-leadliste span { font-size: 12.5px; color: var(--st-text-2); }
@media (min-width: 900px) { body.neu .n-stimme-route-skizze .n-stimme-lead { width: 100%; } }
body.neu .n-stimme-maps[hidden], body.neu .n-stimme-route[hidden] { display: none !important; }

/* ── Lead über der Stimme (29.09.2026) ─────────────────────────────────────
   Die Stimme liegt bei z-index 1200; die Tafel (50) läge sonst unsichtbar
   darunter. Rechner: dieselbe Tafel von der Seite. Telefon: halbes Blatt
   von unten, Griff oben — ziehen nach unten schliesst, nach oben füllt. */
html.n-stimme-offen .schleier { z-index: 1250; }
html.n-stimme-offen .seite { z-index: 1260; }
@media (max-width: 720px) {
  html.n-stimme-offen body.neu #tafelrahmen {
    top: auto !important; bottom: 0 !important; left: 0; right: 0;
    width: 100vw !important; max-width: 100vw !important;
    height: min(58dvh, 560px) !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(calc(100% + 24px));
    transition: transform .42s var(--n-feder, cubic-bezier(.2, .9, .3, 1)), height .35s ease;
    padding-top: 18px;
  }
  html.n-stimme-offen body.neu #tafelrahmen[data-an] { transform: none; }
  html.n-stimme-offen body.neu #tafelrahmen.n-blatt-voll { height: calc(var(--n-vvh, 100dvh) - 24px) !important; }
  html.n-stimme-offen body.neu #tafelrahmen::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 999px; background: var(--n-hair, rgba(0, 0, 0, .18)); z-index: 40;
  }
  html.n-stimme-offen body.neu .schleier { background: rgba(20, 20, 18, .18); }
}

/* Telefon, Strecke oder Leads offen: Der ganze Bereich zwischen Kugel und
   Knöpfen scrollt (29.09.2026). Vorher hatte die Liste einen eigenen Kasten
   von 24 % Höhe — am iPhone liess er sich nicht sichtbar scrollen, und die
   ersten Stopps waren weg. Spalte statt Raster, weil ausgeblendete Zeilen
   im Raster keine Spur belegen und die Zeilenzahl daher wechselt. */
@media (max-width: 899px) {
  body.neu .n-stimme.n-mit-route { display: flex; flex-direction: column; align-items: center; }
  body.neu .n-stimme.n-mit-route > * { flex: none; }
  body.neu .n-stimme.n-mit-route .n-stimme-route {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; align-content: start; padding-bottom: 6px;
    padding-top: 4px;
    -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 18px), transparent);
  }
  body.neu .n-stimme.n-mit-route .n-stimme-route-liste { max-height: none; overflow: visible; }
  body.neu .n-stimme.n-mit-route .n-stimme-leiste { margin-top: 10px; }
  body.neu .n-stimme.n-mit-route .n-stimme-wellen { position: absolute; }
}
body.neu .n-stimme-route-liste li a { display: block; padding: 4px 8px; margin: -4px 0 -4px -8px; border-radius: 10px; color: inherit; text-decoration: none; }
body.neu .n-stimme-route-liste li a:hover { background: var(--st-rund); }
body.neu .n-stimme a.n-strecke-stopp { color: inherit; text-decoration: none; cursor: pointer; }

/* ── Controlling im neuen Design (Stefans Ansicht, 30.09.2026) ─────────────── */
body.neu .n-ct-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 4px; }
body.neu .n-ct-unter { margin: 6px 0 0; color: var(--n-text-2); font-size: 15px; }
body.neu .n-ct-kopf-rechts { display: grid; justify-items: end; gap: 6px; }
body.neu .n-ct-werte .n-wert { min-height: 104px; }
body.neu .n-ct-kurve { padding: var(--n-3); }
body.neu .n-ct-kurve .n-produktiv { margin: 0; padding: 0; background: none; box-shadow: none; }
body.neu .n-ct-raster { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: var(--n-2); align-items: start; }
body.neu .n-ct-raster-gleich { grid-template-columns: 1fr 1fr; }
body.neu .n-ct-seite { display: grid; gap: var(--n-2); }
body.neu .n-ct-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
body.neu .n-ct-person {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--n-r); text-decoration: none; color: var(--n-text);
  background: var(--n-surface-2, rgba(118, 118, 128, .06)); box-shadow: inset 0 0 0 1px var(--n-hair);
  transition: transform .35s var(--n-feder), box-shadow .2s ease, background .2s ease;
}
body.neu .n-ct-person:hover { transform: translateY(-2px); background: var(--n-surface); box-shadow: var(--n-schatten-hoch), inset 0 0 0 1px var(--n-hair); }
body.neu .n-ct-person header { display: flex; align-items: center; gap: 10px; }
body.neu .n-ct-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: color-mix(in srgb, var(--n-lime, #C9D738) 38%, transparent); color: var(--n-oliv-text, #5F6B0C); }
body.neu .n-ct-wer { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
body.neu .n-ct-wer b { font-weight: 650; }
body.neu .n-ct-wer small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-ct-person .n-chevron { color: var(--n-text-3); }
body.neu .n-ct-person-zahl { display: flex; align-items: baseline; gap: 6px; }
body.neu .n-ct-person-zahl b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
body.neu .n-ct-person-zahl span { font-size: 13px; color: var(--n-text-2); }
body.neu .n-ct-spur { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--n-text-3, #999) 18%, transparent); overflow: hidden; }
body.neu .n-ct-spur i { display: block; height: 100%; border-radius: inherit; background: var(--n-lime, #C9D738); min-width: 3px; }
body.neu .n-ct-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
body.neu .n-ct-mini div { display: grid; gap: 1px; min-width: 0; }
body.neu .n-ct-mini dt { font-size: 11.5px; color: var(--n-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-ct-mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
body.neu .n-ct-mini dd small { font-weight: 500; font-size: 11px; color: var(--n-text-3); }
body.neu .n-ct-gut { color: var(--n-oliv-text, #5F6B0C); }
body.neu .n-ct-hinweis { font-size: 12.5px; color: var(--n-text-2); }
body.neu .n-ct-sonst { margin: 12px 0 0; font-size: 13.5px; }
body.neu .n-ct-balken { display: grid; gap: 9px; }
body.neu .n-ct-balken > div { display: grid; grid-template-columns: minmax(0, 9em) 1fr 2.5em; align-items: center; gap: 10px; font-size: 13.5px; }
body.neu .n-ct-balken > div > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--n-text-2); }
body.neu .n-ct-balken b { text-align: right; font-variant-numeric: tabular-nums; }
body.neu .n-ct-balken .n-ct-spur { height: 10px; }
body.neu .n-ct-balken > div:not(.n-ct-erreicht) .n-ct-spur i { background: color-mix(in srgb, var(--n-text-3, #999) 45%, transparent); }
body.neu .n-ct-fuss { margin: 12px 0 0; font-size: 12.5px; color: var(--n-text-3); line-height: 1.45; }
body.neu .n-ct-oben { margin: -6px 0 10px; }
body.neu .n-ct-saeulen { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; height: 130px; }
body.neu .n-ct-saeulen > div { display: grid; grid-template-rows: 1fr auto; gap: 4px; text-align: center; min-width: 0; }
body.neu .n-ct-saeulen > div > span { display: flex; align-items: flex-end; border-radius: 6px; background: color-mix(in srgb, var(--n-text-3, #999) 10%, transparent); overflow: hidden; }
body.neu .n-ct-saeulen i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--n-lime, #C9D738); }
body.neu .n-ct-saeulen small { font-size: 10.5px; color: var(--n-text-3); }
body.neu .n-ct-frei > span { opacity: .45; }
body.neu .n-ct-offen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
body.neu .n-ct-offen > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--n-r); background: var(--n-surface-2, rgba(118, 118, 128, .06)); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-ct-offen b { font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
body.neu .n-ct-offen span { font-size: 13px; color: var(--n-text-2); line-height: 1.3; }
body.neu .n-ct-offen .n-ct-warn { background: color-mix(in srgb, #E8A33B 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #E8A33B 35%, transparent); }
body.neu .n-ct-offen .n-ct-warn b { color: #B4661A; }
body.neu .n-ct-zeilen { list-style: none; margin: 0; padding: 0; }
body.neu .n-ct-zeilen li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--n-hair); font-size: 14px; }
body.neu .n-ct-zeilen li:first-child { border-top: 0; }
body.neu .n-ct-zeilen li > span:last-child { text-align: right; white-space: nowrap; }
body.neu .n-ct-zeilen small { color: var(--n-text-3); font-size: 12.5px; }
@media (max-width: 1000px) {
  body.neu .n-ct-raster, body.neu .n-ct-raster-gleich { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.neu .n-ct-kopf-rechts { justify-items: stretch; width: 100%; }
  body.neu .n-ct-werte { grid-template-columns: 1fr 1fr; }
  body.neu .n-ct-personen { grid-template-columns: minmax(0, 1fr); }
  body.neu .n-ct-offen { grid-template-columns: 1fr 1fr; }
  body.neu .n-ct-zeilen li { flex-direction: column; align-items: flex-start; gap: 2px; }
  body.neu .n-ct-zeilen li > span:last-child { text-align: left; white-space: normal; }
}
@media (max-width: 720px) { body.neu .n-ct .n-karte-kopf h3 em { display: none; } }
/* Controlling: Arbeitsliste eines Kontos */
body.neu .n-ck-zurueck { align-self: flex-start; margin-left: -8px; }
body.neu .n-ck-kopf { display: flex; align-items: center; gap: 16px; }
body.neu .n-ck-kopf h1 { margin: 0; font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
body.neu .n-ck-kopf .n-ct-unter { margin-top: 4px; }
body.neu .n-ck-avatar { width: 56px; height: 56px; font-size: 22px; }
body.neu .n-ck-warn { color: #B4661A; font-weight: 600; }
body.neu .n-ck-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
body.neu .n-ck-leiste .n-statpills { margin: 0; }
body.neu .n-ck-pill-warn .n-pill-ico { color: #B4661A; }
body.neu .n-ck-liste { display: grid; }
body.neu .n-ck-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 11em 9em 3.5em 16px; align-items: center; gap: 12px;
  padding: 11px 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: var(--n-text);
  border-top: 1px solid var(--n-hair); transition: background .15s ease;
}
body.neu .n-ck-liste .n-ck-zeile:first-child { border-top-color: transparent; }
body.neu .n-ck-zeile:hover { background: var(--n-surface-2, rgba(118, 118, 128, .07)); border-top-color: transparent; }
body.neu .n-ck-zeile:hover + .n-ck-zeile { border-top-color: transparent; }
body.neu .n-ck-firma { display: grid; min-width: 0; line-height: 1.3; }
body.neu .n-ck-firma b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-ck-firma small { font-size: 12.5px; color: var(--n-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-ck-status { justify-self: start; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--n-text-3, #999) 12%, transparent); color: var(--n-text-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-ck-seit { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.neu .n-ck-seit small { color: var(--n-text-3); }
body.neu .n-ck-anrufe { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--n-text-2); font-variant-numeric: tabular-nums; }
body.neu .n-ck-zeile .n-chevron { color: var(--n-text-3); }
body.neu .n-ck-liegt { box-shadow: inset 3px 0 0 #E8A33B; }
body.neu .n-ck-liegt .n-ck-seit small { color: #B4661A; font-weight: 600; }
@media (max-width: 720px) {
  body.neu .n-ck-kopf h1 { font-size: 28px; }
  body.neu .n-ck-avatar { width: 46px; height: 46px; font-size: 19px; }
  body.neu .n-ck-leiste .n-segmented { width: 100%; }
  body.neu .n-ck-zeile { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "firma seit chev" "status anrufe chev"; row-gap: 6px; }
  body.neu .n-ck-firma { grid-area: firma; }
  body.neu .n-ck-status { grid-area: status; }
  body.neu .n-ck-seit { grid-area: seit; justify-self: end; }
  body.neu .n-ck-anrufe { grid-area: anrufe; justify-self: end; }
  body.neu .n-ck-zeile .n-chevron { grid-area: chev; }
}
/* Controlling: ein Lead */
body.neu .n-cl-kopf { display: grid; gap: 6px; justify-items: start; }
body.neu .n-cl-kopf h1 { margin: 0; font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.12; }
body.neu .n-cl-kopf .n-ct-unter { margin: 0; }
body.neu .n-cl-kopf .n-ct-unter a { color: var(--n-oliv-text); }
body.neu .n-cl-status { margin-top: 4px; font-size: 13px; }
body.neu .n-wert-zahl small { font-size: 15px; font-weight: 550; color: var(--n-text-2); letter-spacing: 0; }
body.neu .n-cl-lange .n-wert-zahl { color: #B4661A; }
body.neu .n-cl-zeile { margin: 0; font-size: 15px; }
body.neu .n-cl-zeile small { color: var(--n-text-3); }
@media (max-width: 720px) { body.neu .n-cl-kopf h1 { font-size: 26px; } }
body.neu .n-cl-kopf { grid-template-columns: minmax(0, 1fr); }

/* ── Glocke und Benachrichtigungen (Schalter `push`, 01.10.2026) ─────────── */
body.neu .n-glocke { position: relative; display: inline-flex; }
body.neu .n-glocke-knopf {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--n-text); background: transparent;
  transition: background .15s ease, transform .2s var(--n-feder);
}
body.neu .n-glocke-knopf:hover { background: var(--n-surface-2, rgba(118, 118, 128, .1)); }
body.neu .n-glocke-knopf[aria-expanded="true"] { background: var(--n-surface-2, rgba(118, 118, 128, .14)); }
body.neu .n-glocke-zahl {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 750; line-height: 1;
  background: #E5484D; color: #fff; box-shadow: 0 0 0 2px var(--n-bg, #F3F3EE);
}
body.neu .n-glocke-zahl[hidden] { display: none; }
body.neu .n-glocke-tafel {
  position: absolute; top: calc(100% + 8px); right: -8px; z-index: 900; width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain;
  background: var(--n-surface); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .2), 0 0 0 1px var(--n-hair);
  padding: 6px 0 0; animation: n-glocke-ein .22s var(--n-sanft, ease) both;
}
body.neu .n-glocke-tafel[hidden] { display: none; }
@keyframes n-glocke-ein { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
body.neu .n-glocke-kopf { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 6px; }
body.neu .n-glocke-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; }
body.neu .n-glocke-liste { list-style: none; margin: 0; padding: 0 6px; }
body.neu .n-glocke-liste a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 10px; border-radius: 12px; color: var(--n-text); text-decoration: none;
}
body.neu .n-glocke-liste a:hover { background: var(--n-surface-2, rgba(118, 118, 128, .07)); }
body.neu .n-glocke-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--n-lime, #C9D738) 30%, transparent); color: var(--n-oliv-text, #5F6B0C); }
body.neu .n-glocke-ueberfaellig { background: color-mix(in srgb, #E5484D 16%, transparent); color: #B4232A; }
body.neu .n-glocke-inhalt { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
body.neu .n-glocke-inhalt b { font-weight: 600; font-size: 14px; }
body.neu .n-glocke-inhalt small { font-size: 13px; color: var(--n-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.neu .n-glocke-liste time { font-size: 12px; color: var(--n-text-3); white-space: nowrap; }
body.neu .n-glocke-neu a { background: color-mix(in srgb, var(--n-lime, #C9D738) 9%, transparent); }
body.neu .n-glocke-neu .n-glocke-inhalt b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #E5484D; margin-right: 6px; vertical-align: 2px; }
body.neu .n-glocke-leer { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 20px; margin: 0; color: var(--n-text-2); font-size: 14px; }
body.neu .n-glocke-fuss { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 12px; margin-top: 4px;
  border-top: 1px solid var(--n-hair); font-size: 13.5px; font-weight: 600; color: var(--n-oliv-text); text-decoration: none; }
body.neu .n-push-arten, body.neu .n-push-ruhe { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
body.neu .n-push-arten legend, body.neu .n-push-ruhe legend { font-weight: 650; margin-bottom: 6px; }
body.neu .n-push-ruhe label:not(.anheften) { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
body.neu .n-push-stand { margin: 0 0 10px; font-weight: 600; }
@media (max-width: 720px) {
  body.neu .n-glocke-tafel { position: fixed; top: calc(env(safe-area-inset-top) + 64px); right: 12px; left: 12px; width: auto; }
}
body.neu .n-glocke-kopf h2 { text-transform: none; letter-spacing: -.01em; font-size: 17px; color: var(--n-text); }
body.neu .n-glocke-kopf .n-link { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: none; }
[data-push-block] [hidden] { display: none !important; }
body.neu .n-push-arten .anheften, body.neu .n-push-ruhe .anheften { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
body.neu .n-push-arten .anheften input, body.neu .n-push-ruhe .anheften input { margin-top: 3px; flex: none; }
body.neu .n-push-block .knopfreihe { flex-wrap: wrap; gap: 8px; }
body.neu .n-push-block .knopfreihe .knopf { background: var(--n-surface-2, rgba(118, 118, 128, .1)); border-radius: 12px; padding: 10px 16px; }
body.neu .n-push-block .knopfreihe .knopf.haupt { background: var(--n-lime, #C9D738); color: #1E1F10; font-weight: 650; }
body.neu .n-push-block .knopfreihe .knopf.haupt:hover { filter: brightness(1.05); }

/* ── Tagesplan (01.10.2026): Ziel der Tagesübersicht ───────────────────────── */
body.neu .n-tp-kopf { display: grid; gap: 6px; margin-bottom: 4px; }
body.neu .n-tp-kopf .n-statpills { margin-top: 8px; }
body.neu .n-tp-pill-rot { color: #B4232A; }
body.neu .n-tp-ico { width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--n-lime, #C9D738) 30%, transparent); color: var(--n-oliv-text, #5F6B0C); }
body.neu .n-tp-ico-rot { background: color-mix(in srgb, #E5484D 15%, transparent); color: #B4232A; }
body.neu .n-tp-satz { margin: -6px 0 8px; font-size: 13.5px; color: var(--n-text-2); }
body.neu .n-tp-liste { list-style: none; margin: 0; padding: 0; }
body.neu .n-tp-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 12px;
  border-top: 1px solid var(--n-hair); }
body.neu .n-tp-zeile:first-child { border-top: 0; }
body.neu .n-tp-haupt { display: grid; min-width: 0; padding: 11px 0; color: var(--n-text); text-decoration: none; line-height: 1.3; }
body.neu .n-tp-haupt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-tp-haupt small { font-size: 12.5px; color: var(--n-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-tp-haupt:hover b { color: var(--n-oliv-text); }
body.neu .n-tp-rechts { font-size: 13.5px; color: var(--n-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.neu .n-tp-warn .n-tp-rechts { color: #B4232A; font-weight: 600; }
body.neu .n-tp-tel { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--n-lime, #C9D738); color: #1E1F10; transition: transform .2s var(--n-feder); }
body.neu .n-tp-tel:hover { transform: scale(1.06); }
body.neu .n-tp-tel-leer { background: none; }
body.neu .n-tp-alle { margin-top: 8px; }
body.neu .n-tp-leer { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 32px 20px; color: var(--n-text-2); }
body.neu .n-tp-leer h3 { margin: 4px 0 0; color: var(--n-text); }
body.neu .n-tp-leer p { margin: 0; }
/* Live: Glocke wackelt, kurzer Hinweis oben rechts (01.10.2026) */
@keyframes n-glocke-wackel { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
body.neu .n-glocke-wackel svg { animation: n-glocke-wackel .8s ease; transform-origin: 50% 10%; }
.n-glocke-hinweis {
  position: fixed; z-index: 1300; top: calc(env(safe-area-inset-top) + 76px); right: 16px; width: min(360px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 12px 16px 12px 44px; border-radius: 16px; text-decoration: none;
  background: var(--n-surface, #fff); color: var(--n-text, #1E1F10);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18), 0 0 0 1px var(--n-hair, rgba(0,0,0,.06));
  opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .35s var(--n-feder, ease);
}
.n-glocke-hinweis::before { content: ""; position: absolute; left: 16px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--n-lime, #C9D738); box-shadow: 0 0 0 4px color-mix(in srgb, var(--n-lime, #C9D738) 30%, transparent); }
.n-glocke-hinweis.n-an { opacity: 1; transform: none; }
.n-glocke-hinweis b { font-weight: 650; font-size: 14px; }
.n-glocke-hinweis small { font-size: 13px; color: var(--n-text-2, #666); }
@media (max-width: 720px) { .n-glocke-hinweis { right: 12px; left: 12px; width: auto; top: calc(env(safe-area-inset-top) + 70px); } }
@media (prefers-reduced-motion: reduce) { body.neu .n-glocke-wackel svg { animation: none; } .n-glocke-hinweis { transition: none; } }

/* Telefon: kein Chat-Knopf im Kopf — „AI" steht unten in der Leiste, auf
   jeder Seite (Rückmeldung 01.10.2026). */
@media (max-width: 720px) {
  body.neu:has(.n-tabbar) .politisknopf { display: none !important; }
}
/* Das Uhr-Symbol vor einer langen Terminzeile schrumpfte auf Punktgröße */
body.neu .n-heute > svg { flex: none; }

/* Ganze Leadseite: „Status" und „Dokumente" weiss — auf dem grauen Seitengrund
   verschwand ihr Grau (Rückmeldung 01.10.2026). In der Tafel (weisser Grund)
   bleiben sie grau. */
body.neu main .verschieben > summary, body.neu main .tafeldokknopf {
  background: var(--n-surface, #fff); color: var(--n-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px var(--n-hair);
}
body.neu main .verschieben > summary:hover, body.neu main .tafeldokknopf:hover { background: var(--n-surface, #fff); box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 0 0 1px var(--n-hair); }

/* ── Diktat im Chat (01.10.2026) — wie bei Claude ─────────────────────────── */
body.neu .n-diktat-knopf {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--n-text-2);
  transition: background .15s ease, color .15s ease, transform .15s var(--n-feder);
}
body.neu .n-diktat-knopf:hover { background: var(--n-surface-2, rgba(118, 118, 128, .1)); color: var(--n-text); }
body.neu .n-diktat-knopf:active { transform: scale(.92); }
body.neu [data-diktat-rahmen] { position: relative; }
body.neu .n-diktat-leiste {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border-radius: inherit; background: var(--n-surface, #fff); color: var(--n-text);
  animation: n-diktat-ein .2s ease both;
}
@keyframes n-diktat-ein { from { opacity: 0; } }
body.neu .n-diktat-wellen { flex: 1; min-width: 0; height: 36px; display: block; }
body.neu .n-diktat-zeit { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--n-text-2); white-space: nowrap; }
body.neu .n-diktat-fehler { color: #B4232A; white-space: normal; font-size: 13px; }
body.neu .n-diktat-rund {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--n-surface-2, rgba(118, 118, 128, .12)); color: var(--n-text);
  transition: transform .15s var(--n-feder), filter .15s ease;
}
body.neu .n-diktat-rund:hover { filter: brightness(.96); }
body.neu .n-diktat-rund:active { transform: scale(.92); }
body.neu .n-diktat-ok { background: var(--n-lime, #C9D738); color: #1E1F10; }
body.neu .n-diktat-wandelt .n-diktat-wellen { opacity: .25; }
body.neu .n-diktat-wandelt .n-diktat-ok { pointer-events: none; animation: n-diktat-puls 1s ease-in-out infinite; }
@keyframes n-diktat-puls { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { body.neu .n-diktat-wandelt .n-diktat-ok { animation: none; } }

/* ── Chat-Eingabe wie bei Claude (01.10.2026) ──────────────────────────────── */
body.neu .n-cbox { display: grid; gap: 4px; padding: 14px 12px 10px 18px; border-radius: 22px; }
body.neu .n-cbox .chatform { margin: 0; padding: 0; }
body.neu .n-cbox #chatfeldtext { min-height: 48px; padding: 4px 0; resize: none; background: transparent; }
body.neu .n-cbox-zeile { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
body.neu .n-cbox-ico {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: transparent; color: var(--n-text-2); transition: background .15s ease, color .15s ease, transform .15s var(--n-feder);
}
body.neu .n-cbox-ico:hover { background: var(--n-surface-2, rgba(118, 118, 128, .1)); color: var(--n-text); }
body.neu .n-cbox-ico:active { transform: scale(.92); }
/* Der Pfeil erst, wenn Text drinsteht — sonst der Sprachmodus an seiner Stelle */
body.neu .n-cbox .n-cbox-senden { display: none; width: 38px; height: 38px; border-radius: 50%; background: var(--n-text, #1E1F10); color: var(--n-surface, #fff); }
body.neu .n-cbox:has(#chatfeldtext:not(:placeholder-shown)) .n-cbox-senden { display: grid; place-items: center; }
body.neu .n-cbox:has(#chatfeldtext:not(:placeholder-shown)) .n-cbox-stimme { display: none; }
body.neu .n-cbox-unter { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 0; }
body.neu .n-cbox-unter .chatquellen > summary {
  background: none !important; padding: 6px 8px; min-height: 0; gap: 6px; color: var(--n-text-2); font-size: 14px; font-weight: 500;
  border-radius: 10px; list-style: none; cursor: pointer;
}
body.neu .n-cbox-unter .chatquellen > summary:hover { color: var(--n-text); background: var(--n-surface-2, rgba(118,118,128,.08)) !important; }
body.neu .n-cbox-unter .chatquellen > summary::-webkit-details-marker { display: none; }
body.neu .n-cbox-unter .chatquellen > summary svg:first-child { display: none; }
body.neu .n-cbox-unter .chatquellenmarke { font-weight: 500; }
body.neu .n-cbox-pfeil { color: var(--n-text-3); transition: transform .2s ease; }
body.neu .n-cbox-unter .chatquellen[open] .n-cbox-pfeil { transform: rotate(180deg); }
body.neu .n-cbox-unter .chatmodell { display: flex; align-items: center; gap: 6px; margin: 0; }
body.neu .n-cbox-unter .chatmodell label { display: inline !important; font-size: 14px; color: var(--n-text-3); margin: 0; }
body.neu .n-cbox-unter .chatmodell select {
  border: 0; background: transparent; font-size: 14px; color: var(--n-text); padding: 6px 22px 6px 6px; border-radius: 10px; cursor: pointer;
}
body.neu .n-cbox-unter .chatmodell select:hover { background: var(--n-surface-2, rgba(118,118,128,.08)); }
body.neu .n-cbox-unter { position: relative; margin: 0 auto; max-width: var(--n-cbox-breite, 700px); box-sizing: border-box; }
body.neu .chatfuss .n-cbox { --n-cbox-breite: 700px; }
body.neu .n-cbox-unter .chatquellenfeld { left: 0; bottom: calc(100% + 8px); }
body.neu .n-cbox-unter .chatmodell select { width: auto; field-sizing: content; padding-right: 26px; }
/* Kompakt (01.10.2026): eine Zeile, wächst mit dem Text; Symbole rechts unten */
body.neu .n-cbox { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 8px 8px 8px 20px; border-radius: 26px; }
body.neu .n-cbox #chatfeldtext { min-height: 24px; height: 24px; max-height: 200px; padding: 8px 0; line-height: 1.45; overflow-y: auto; box-sizing: content-box; }
body.neu .n-cbox-zeile { gap: 4px; }
body.neu .n-cbox .n-stimme-knopf { width: 40px; height: 40px; }
body.neu .n-cbox .chatform { align-self: center; }
body.neu .n-cbox { align-items: center; }
body.neu .n-cbox .chatform, body.neu .n-cbox-zeile { align-self: center; }
body.neu .n-cbox .chatform { display: flex; align-items: center; min-height: 40px; }
body.neu .n-cbox #chatfeldtext { width: 100%; }
body.neu .n-cbox #chatfeldtext { box-sizing: border-box; min-height: 40px; height: 40px; padding: 9px 0; }

/* Gesprächstitel oben kleiner und dezent (Rückmeldung 01.10.2026) — nicht
   mehr gross über die ganze Breite; zu lange Titel enden mit „…". */
body.neu .chattitelform { flex: 0 1 auto; min-width: 0; max-width: min(520px, 60%); }
body.neu .chattitelfeld {
  font-size: 14.5px !important; font-weight: 550 !important; letter-spacing: 0 !important; color: var(--n-text-2) !important;
  width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 6px 10px !important; border-radius: 10px;
  background: transparent; border: 0;
}
body.neu .chattitelfeld:hover { background: var(--n-surface-2, rgba(118,118,128,.08)); color: var(--n-text) !important; }
body.neu .chattitelfeld:focus { color: var(--n-text) !important; background: var(--n-surface, #fff); box-shadow: 0 0 0 1px var(--n-hair); }
@media (max-width: 720px) { body.neu .chattitelform { max-width: 100%; } body.neu .chattitelfeld { font-size: 14px !important; } }
body.neu .chattitelform { flex: 0 1 520px; }
body.neu .chattitelfeld { min-width: 0; }
@media (max-width: 720px) { body.neu .chattitelform { flex: 1 1 auto; } }

/* ── Chat-Kopf fein und schwebend (01.10.2026) ─────────────────────────────
   Kein Balken über die ganze Breite mehr: Menü und Titel sitzen als kleine
   Glas-Pille oben links, der Verlauf läuft darunter durch. Rechts (Treffer,
   neues Gespräch am Telefon) dieselbe Bauart. */
body.neu .chathaupt { position: relative; }
body.neu .chatseitenkopf {
  position: relative; z-index: 6;
  display: flex; align-items: center; gap: 8px; min-height: 0; padding: 12px 16px 4px;
  background: none !important; border: 0 !important; box-shadow: none;
}
body.neu .chatseitenkopf .chatklapp,
body.neu .chatseitenkopf .chattitelform {
  background: color-mix(in srgb, var(--n-surface, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--n-hair);
}
body.neu .chatseitenkopf .chatklapp { width: 36px; height: 36px; border-radius: 12px; border: 0; display: grid; place-items: center; }
body.neu .chatseitenkopf .chattitelform { border-radius: 12px; flex: 0 1 auto; max-width: min(460px, 55%); }
body.neu .chatseitenkopf .chattitelfeld { padding: 8px 12px !important; font-size: 13.5px !important; field-sizing: content; max-width: 100%; }
body.neu .chatseitenkopf .chattitelfeld:hover, body.neu .chatseitenkopf .chattitelfeld:focus { background: transparent; box-shadow: none; }
body.neu .chatseitenkopf > :last-child { margin-left: auto; }
@media (max-width: 720px) {
  body.neu .chatseitenkopf { padding: 8px 10px 4px; }
  body.neu .chatseitenkopf .chattitelform { max-width: none; flex: 1 1 auto; }
}

/* ── Ergebnis-Formulare im neuen Design (02.10.2026) ──────────────────────
   Rückruf/Termin, Absage, Verwerfen, „Passt der Lead?" — Felder wie überall
   im Redesign, Gründe als Chips statt Radiokreisen, Schnellwahl für Tag und
   Uhrzeit. */
body.neu .ausgangsklappe { padding: 18px 20px 16px; }
body.neu .ausgangsklappe label, body.neu .lernblock label.sollzeile, body.neu .lernblock .lernkommentarzeile {
  display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--n-text-2); letter-spacing: .01em;
}
body.neu .ausgangsklappe label small { font-weight: 450; color: var(--n-text-3); }
body.neu .ausgangsklappe input[type="date"], body.neu .ausgangsklappe input[type="time"],
body.neu .ausgangsklappe input[type="text"], body.neu .ausgangsklappe select,
body.neu .lernblock select, body.neu .lernblock .lernkommentar {
  height: 44px; box-sizing: border-box; width: 100%; padding: 0 14px; border-radius: 12px;
  border: 0; background: var(--n-surface-2, rgba(118, 118, 128, .08)); color: var(--n-text);
  font: inherit; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--n-hair);
  transition: box-shadow .15s ease, background .15s ease; appearance: none; -webkit-appearance: none;
}
body.neu .ausgangsklappe select, body.neu .lernblock select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
body.neu .ausgangsklappe input:focus, body.neu .ausgangsklappe select:focus,
body.neu .lernblock select:focus, body.neu .lernblock .lernkommentar:focus {
  outline: none; background-color: var(--n-surface, #fff); box-shadow: 0 0 0 2px var(--n-lime, #C9D738);
}
body.neu .ausgangsklappe.termin .klappzeile {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; align-items: end;
}
body.neu .ausgangsklappe.termin .klappzeile > label:nth-of-type(1) { order: 1; }
body.neu .ausgangsklappe.termin .klappzeile > label:nth-of-type(2) { order: 2; }
body.neu .ausgangsklappe.termin .klappzeile > label:nth-of-type(3) { order: 3; }
body.neu .ausgangsklappe.termin [data-schnell-datum] { order: 4; }
body.neu .ausgangsklappe.termin .n-schnell-zeit { order: 5; }
body.neu .ausgangsklappe.termin .klappzeile > label.breit { order: 6; }
body.neu .ausgangsklappe.termin .termin-abschluss { order: 7; grid-column: 1 / 3; }
body.neu .ausgangsklappe.termin .klappe-zu { order: 8; }
body.neu .ausgangsklappe .breit { grid-column: 1 / -1; }
/* Einladung zum Termin (29.10.2026): eine Zeile unter den Feldern, Schalter wie
   „Anheften“ — eigene Regeln, weil `.ausgangsklappe label` Felder zeichnet und
   tafel.css nur mit Schalter `tafel` geladen wird. */
body.neu .ausgangsklappe.termin .n-einladen { order: 6; }
body.neu .ausgangsklappe .n-einladen .n-jd-switch {
  display: inline-flex; flex-direction: row; align-items: center; gap: 10px; width: auto;
  font-size: 14px; font-weight: 500; color: var(--n-text-2); cursor: pointer; letter-spacing: 0; white-space: normal;
}
body.neu .ausgangsklappe .n-einladen .n-jd-switch { max-width: 100%; }
body.neu .ausgangsklappe .n-einladen .n-jd-switch span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body.neu .ausgangsklappe .n-einladen .n-jd-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
body.neu .ausgangsklappe .n-einladen .n-jd-switch i {
  flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--n-hair-2); position: relative; transition: background .15s;
}
body.neu .ausgangsklappe .n-einladen .n-jd-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
body.neu .ausgangsklappe .n-einladen .n-jd-switch input:checked + i { background: var(--n-lime); }
body.neu .ausgangsklappe .n-einladen .n-jd-switch input:checked + i::after { transform: translateX(16px); }
body.neu .ausgangsklappe .n-einladen .n-jd-switch input:focus-visible + i { box-shadow: 0 0 0 2px var(--n-lime); }
body.neu .n-schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
body.neu .n-chip {
  height: 32px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 550;
  background: var(--n-surface-2, rgba(118, 118, 128, .08)); color: var(--n-text-2); box-shadow: inset 0 0 0 1px var(--n-hair);
  transition: background .15s ease, color .15s ease, transform .15s var(--n-feder);
}
body.neu .n-chip:hover { color: var(--n-text); background: color-mix(in srgb, var(--n-lime, #C9D738) 18%, transparent); }
body.neu .n-chip:active { transform: scale(.95); }
body.neu .n-chip.n-an { background: var(--n-lime, #C9D738); color: #1E1F10; box-shadow: none; }
/* Knöpfe der Klappen */
body.neu .ausgangsklappe .knopf { height: 46px; border-radius: 14px; font-weight: 650; font-size: 15px; border: 0; }
body.neu .ausgangsklappe .knopf.haupt { background: var(--n-lime, #C9D738); color: #1E1F10; }
body.neu .ausgangsklappe .knopf.still { background: var(--n-surface-2, rgba(118, 118, 128, .1)); color: var(--n-text-2); }
body.neu .ausgangsklappe .knopf.weg { background: #D2453A; color: #fff; height: 46px; border-radius: 14px; }
body.neu .ausgangsklappe .klapphinweis { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--n-text-3); }
/* Gründe als Chips: Kreis weg, ganze Fläche ist der Knopf */
body.neu .klappzeile.gruende, body.neu .lerngruende { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
body.neu .grundwahl {
  position: relative; display: inline-flex !important; align-items: center; gap: 0 !important;
  min-height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--n-surface-2, rgba(118, 118, 128, .08)); box-shadow: inset 0 0 0 1px var(--n-hair);
  font-size: 13.5px !important; font-weight: 550 !important; color: var(--n-text) !important; letter-spacing: 0 !important;
  transition: background .15s ease, box-shadow .15s ease, transform .15s var(--n-feder);
}
body.neu .grundwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.neu .grundwahl:hover { background: color-mix(in srgb, var(--n-lime, #C9D738) 14%, transparent); }
body.neu .grundwahl:active { transform: scale(.97); }
body.neu .grundwahl:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--n-lime, #C9D738); }
body.neu .grundwahl:has(input:checked) { background: var(--n-lime, #C9D738); color: #1E1F10 !important; box-shadow: none; }
body.neu .grundwahl:has(input:checked)::before { content: "✓"; margin-right: 6px; font-weight: 800; }
body.neu .ausgangsklappe.grund .grundwahl:has(input:checked) { background: color-mix(in srgb, #D2453A 16%, transparent); color: #A3271E !important; box-shadow: inset 0 0 0 1.5px #D2453A; }
body.neu .ausgangsklappe.grund .grundwahl.parken:has(input:checked) { background: color-mix(in srgb, #E8A33B 18%, transparent); color: #9A5A12 !important; box-shadow: inset 0 0 0 1.5px #E8A33B; }
body.neu .ausgangsklappe.absage .klappzeile:not(.gruende), body.neu .ausgangsklappe.grund .klappzeile:not(.gruende) {
  display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: center;
}
body.neu .ausgangsklappe.absage .klapphinweis, body.neu .ausgangsklappe.grund .klapphinweis { grid-column: 1 / -1; margin-top: 2px; }
/* „Passt der Lead?" */
body.neu .lernblock .daumenknopf {
  height: 40px; padding: 0 14px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 600;
  background: var(--n-surface-2, rgba(118, 118, 128, .08)); box-shadow: inset 0 0 0 1px var(--n-hair); color: var(--n-text);
}
body.neu .lernblock .daumenknopf.gewaehlt.hoch { background: color-mix(in srgb, var(--n-lime, #C9D738) 35%, transparent); box-shadow: inset 0 0 0 1.5px var(--n-lime, #C9D738); }
body.neu .lernblock .daumenknopf.gewaehlt.runter { background: color-mix(in srgb, #D2453A 14%, transparent); box-shadow: inset 0 0 0 1.5px #D2453A; }
body.neu .lernnachfrage { margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--n-surface, #fff); box-shadow: 0 0 0 1px var(--n-hair), 0 6px 20px rgba(0,0,0,.05); display: grid; gap: 12px; }
body.neu .lernblock .lernabschluss { display: flex; gap: 8px; }
body.neu .lernblock .lernabschluss .knopf { height: 42px; padding: 0 18px; border-radius: 12px; border: 0; font-weight: 650; }
body.neu .lernblock .lernabschluss .knopf.haupt { background: var(--n-lime, #C9D738); color: #1E1F10; }
body.neu .lernblock .lernabschluss .knopf.still { background: var(--n-surface-2, rgba(118,118,128,.1)); color: var(--n-text-2); }
@media (max-width: 720px) {
  body.neu .ausgangsklappe.termin .klappzeile { grid-template-columns: 1fr 1fr; }
  body.neu .ausgangsklappe.termin .klappzeile > label:nth-of-type(3) { grid-column: 1 / -1; }
  body.neu .ausgangsklappe.termin .termin-abschluss { grid-column: 1 / 2; }
}
body.neu .ausgangsklappe label:not(.grundwahl) { display: block; }
body.neu .ausgangsklappe label:not(.grundwahl) > input, body.neu .ausgangsklappe label:not(.grundwahl) > select { display: block; margin-top: 6px; }
body.neu .ausgangsklappe label small { display: inline; margin-left: 4px; }
body.neu .grundwahl { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
  padding: 8px 14px !important; border: 0 !important; text-align: left; line-height: 1.3; }
body.neu .grundwahl > span { display: inline; }
body.neu .grundwahl.parken { border: 0 !important; }

/* ── Kalenderansicht für Termine und Rückrufe (02.10.2026) ──────────────── */
body.neu .n-kal { --kal-rr: #C9D738; --kal-rr-text: #3F4708; --kal-t: #3F7BD8; --kal-t-text: #17407E; --kal-std: 52px; }
body.neu .n-kal .titelzeile, body.neu .titelzeile:has(.n-kal-umschalter) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.neu .n-kal-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
body.neu .n-kal-nav { display: flex; align-items: center; gap: 6px; }
body.neu .n-kal-nav h2 { margin: 0 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--n-text); }
body.neu .n-kal-pfeil, body.neu .n-kal-heute {
  height: 36px; min-width: 36px; padding: 0 12px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--n-surface, #fff); box-shadow: 0 0 0 1px var(--n-hair), 0 1px 2px rgba(0,0,0,.04);
  color: var(--n-text); text-decoration: none; font-weight: 600; font-size: 14px;
}
body.neu .n-kal-pfeil { padding: 0; font-size: 20px; line-height: 1; }
body.neu .n-kal-pfeil:hover, body.neu .n-kal-heute:hover { background: var(--n-surface-2, #f4f4ef); }
body.neu .n-kal-rechts { display: flex; align-items: center; gap: 14px; }
body.neu .n-kal-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-kal-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
body.neu .n-kal-punkt.n-kal-rueckruf { background: var(--kal-rr); }
body.neu .n-kal-punkt.n-kal-termin { background: var(--kal-t); }

/* Woche */
body.neu .n-kal-woche { padding: 0; overflow: hidden; }
body.neu .n-kal-kopf, body.neu .n-kal-raster { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
body.neu .n-kal-kopf { border-bottom: 1px solid var(--n-hair); }
body.neu .n-kal-kopf > span { display: grid; justify-items: center; gap: 2px; padding: 10px 0; }
body.neu .n-kal-kopf .n-kal-ohne { justify-self: stretch; margin: 2px 4px 0; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--n-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--n-lime) 18%, var(--n-surface)); }
body.neu .n-kal-kopf .n-kal-ohne.n-kal-offen { background: color-mix(in srgb, var(--n-rot, #d64545) 16%, var(--n-surface)); }
body.neu .n-kal-kopf small { font-size: 12px; font-weight: 600; color: var(--n-text-3); text-transform: uppercase; letter-spacing: .06em; }
body.neu .n-kal-kopf b { font-size: 20px; font-weight: 700; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
body.neu .n-kal-kopf .n-kal-heutig b { background: var(--kal-rr); color: #1E1F10; }
body.neu .n-kal-kopf .n-kal-heutig small { color: var(--n-oliv-text, #5F6B0C); }
body.neu .n-kal-raster { height: calc(var(--stunden) * var(--kal-std)); max-height: 66vh; overflow-y: auto; position: relative; }
body.neu .n-kal-zeiten { display: grid; grid-template-rows: repeat(var(--stunden), 1fr); height: calc(var(--stunden) * var(--kal-std)); }
body.neu .n-kal-zeiten span { font-size: 11px; color: var(--n-text-3); text-align: right; padding: 0 8px 0 0; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
body.neu .n-kal-zeiten span:first-child { visibility: hidden; }
body.neu .n-kal-tag { position: relative; display: grid; grid-template-rows: repeat(var(--stunden), 1fr); height: calc(var(--stunden) * var(--kal-std)); border-left: 1px solid var(--n-hair); }
body.neu .n-kal-tag.n-kal-we { background: color-mix(in srgb, var(--n-text-3, #999) 4%, transparent); }
body.neu .n-kal-tag.n-kal-heutig { background: color-mix(in srgb, var(--kal-rr) 7%, transparent); }
body.neu .n-kal-linie { border-top: 1px solid color-mix(in srgb, var(--n-hair) 70%, transparent); }
body.neu .n-kal-jetzt { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #E5484D; z-index: 3; }
body.neu .n-kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; }
body.neu .n-kal-e {
  position: absolute; z-index: 2; min-height: 22px; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 3px 7px; border-radius: 8px;
  text-decoration: none; font-size: 12px; line-height: 1.25;
  transition: transform .15s var(--n-feder), box-shadow .15s ease;
}
body.neu .n-kal-e b { font-weight: 700; font-size: 11.5px; }
body.neu .n-kal-e span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
body.neu .n-kal-e:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.14); z-index: 4; }
body.neu .n-kal-e.n-kal-rueckruf { background: color-mix(in srgb, var(--kal-rr) 32%, var(--n-surface, #fff)); color: var(--kal-rr-text); box-shadow: inset 3px 0 0 var(--kal-rr); }
body.neu .n-kal-e.n-kal-termin { background: color-mix(in srgb, var(--kal-t) 16%, var(--n-surface, #fff)); color: var(--kal-t-text); box-shadow: inset 3px 0 0 var(--kal-t); }
body.neu .n-kal-e.n-kal-vorbei { opacity: .55; }
body.neu .n-kal-e.n-kal-offen { opacity: 1; background: color-mix(in srgb, #E5484D 12%, var(--n-surface, #fff)); color: #A3271E; box-shadow: inset 3px 0 0 #E5484D; }

/* Monat */
body.neu .n-kal-monat { padding: 0; overflow: hidden; }
body.neu .n-kal-mkopf, body.neu .n-kal-mraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.neu .n-kal-mkopf span { padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--n-text-3); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--n-hair); }
body.neu .n-kal-mtag { min-height: 112px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--n-hair); border-bottom: 1px solid var(--n-hair); min-width: 0; position: relative; }
body.neu .n-kal-mtag:nth-child(7n) { border-right: 0; }
body.neu .n-kal-mtag.n-kal-we { background: color-mix(in srgb, var(--n-text-3, #999) 4%, transparent); }
body.neu .n-kal-mtag.n-kal-fremd { opacity: .45; }
body.neu .n-kal-mzahl { align-self: flex-start; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 13.5px; font-weight: 650; color: var(--n-text); text-decoration: none; }
body.neu .n-kal-mzahl:hover { background: var(--n-surface-2, rgba(118,118,128,.1)); }
body.neu .n-kal-heutig .n-kal-mzahl { background: var(--kal-rr); color: #1E1F10; }
body.neu .n-kal-mtag .n-kal-e { position: static; flex-direction: row; gap: 5px; align-items: center; padding: 2px 6px; border-radius: 6px; min-height: 0; }
body.neu .n-kal-mehr { font-size: 12px; color: var(--n-text-2); text-decoration: none; padding: 0 6px; font-weight: 600; }
body.neu .n-kal-punkte { display: none; }
body.neu .n-kal-leer { text-align: center; }

/* Telefon */
body.neu .n-kal-agenda { display: none; }
@media (max-width: 720px) {
  body.neu .n-kal-woche { display: none; }
  body.neu .n-kal-agenda { display: grid; gap: 10px; }
  body.neu .n-kal-agtag { background: var(--n-surface, #fff); border-radius: 16px; box-shadow: 0 0 0 1px var(--n-hair); padding: 10px 12px; }
  body.neu .n-kal-agtag header { font-size: 14px; color: var(--n-text-2); margin-bottom: 6px; }
  body.neu .n-kal-agtag header b { color: var(--n-text); }
  body.neu .n-kal-agtag header em { font-style: normal; font-size: 12px; font-weight: 700; color: #1E1F10; background: var(--kal-rr); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
  body.neu .n-kal-agtag.n-kal-heutig { box-shadow: 0 0 0 2px var(--kal-rr); }
  body.neu .n-kal-agzeile { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; text-decoration: none; color: var(--n-text); margin-top: 4px; }
  body.neu .n-kal-agzeile.n-kal-rueckruf { background: color-mix(in srgb, var(--kal-rr) 18%, transparent); box-shadow: inset 3px 0 0 var(--kal-rr); }
  body.neu .n-kal-agzeile.n-kal-termin { background: color-mix(in srgb, var(--kal-t) 10%, transparent); box-shadow: inset 3px 0 0 var(--kal-t); }
  body.neu .n-kal-agzeile.n-kal-vorbei { opacity: .6; }
  body.neu .n-kal-agzeile.n-kal-offen { opacity: 1; background: color-mix(in srgb, #E5484D 10%, transparent); box-shadow: inset 3px 0 0 #E5484D; }
  body.neu .n-kal-agzeit { font-weight: 750; font-variant-numeric: tabular-nums; font-size: 15px; text-align: center; }
  body.neu .n-kal-aginhalt { display: grid; min-width: 0; line-height: 1.3; }
  body.neu .n-kal-aginhalt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.neu .n-kal-aginhalt small { font-size: 12.5px; color: var(--n-text-2); }
  body.neu .n-kal-frei { margin: 0; font-size: 13px; color: var(--n-text-3); }
  body.neu .n-kal-legende { display: none; }
  body.neu .n-kal-nav h2 { font-size: 15px; margin-left: 4px; }
  body.neu .n-kal-mtag { min-height: 58px; padding: 4px; }
  body.neu .n-kal-mtag .n-kal-e, body.neu .n-kal-mehr { display: none; }
  body.neu .n-kal-punkte { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 4px; }
  body.neu .n-kal-punkte .n-kal-punkt { margin: 0; width: 7px; height: 7px; }
}
body.neu .n-kal { --kal-std: 64px; }
body.neu .n-kal-woche .n-kal-e { flex-direction: row; flex-wrap: wrap; align-content: flex-start; column-gap: 5px; padding: 5px 8px; }
body.neu .n-kal-woche .n-kal-e span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Tagesleiste im Rückruf-/Terminformular (02.10.2026) ───────────────── */
body.neu .n-tagleiste { order: 5; --kal-rr: #C9D738; --kal-t: #3F7BD8; display: grid; gap: 8px; padding: 12px 14px 10px;
  border-radius: 14px; background: var(--n-surface-2, rgba(118,118,128,.06)); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .ausgangsklappe.termin .n-schnell-zeit { order: 4; }
body.neu .ausgangsklappe.termin [data-schnell-datum] { order: 4; }
body.neu .n-tl-kopf { display: flex; align-items: center; gap: 6px; font-size: 14px; }
body.neu .n-tl-kopf b { min-width: 92px; text-align: center; }
body.neu .n-tl-pfeil { width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer; font-size: 18px; line-height: 1;
  background: var(--n-surface, #fff); box-shadow: 0 0 0 1px var(--n-hair); color: var(--n-text); }
body.neu .n-tl-pfeil:disabled { opacity: .35; cursor: default; }
body.neu .n-tl-zahl { margin-left: 6px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-tl-tipp { margin-left: auto; font-size: 12px; color: var(--n-text-3); }
body.neu .n-tl-laden { font-size: 13px; color: var(--n-text-3); }
body.neu .n-tl-spur { position: relative; height: 46px; margin: 4px 0 16px; border-radius: 10px; cursor: crosshair;
  background: var(--n-surface, #fff); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-tl-strich { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--n-hair); }
body.neu .n-tl-std { position: absolute; top: calc(100% + 3px); transform: translateX(-50%); font-size: 10.5px; color: var(--n-text-3); font-variant-numeric: tabular-nums; }
body.neu .n-tl-vorbei { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px 0 0 10px;
  background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--n-text-3, #999) 12%, transparent) 5px 6px); pointer-events: none; }
body.neu .n-tl-jetzt { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #E5484D; border-radius: 2px; }
body.neu .n-tl-block { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; overflow: hidden; text-decoration: none;
  display: flex; align-items: center; padding: 0 6px; font-size: 11px; font-weight: 650; white-space: nowrap; z-index: 2; }
body.neu .n-tl-block span { overflow: hidden; text-overflow: ellipsis; }
body.neu .n-tl-block.n-kal-rueckruf { background: color-mix(in srgb, var(--kal-rr) 45%, #fff); color: #3F4708; box-shadow: inset 2px 0 0 var(--kal-rr); }
body.neu .n-tl-block.n-kal-termin { background: color-mix(in srgb, var(--kal-t) 22%, #fff); color: #17407E; box-shadow: inset 2px 0 0 var(--kal-t); }
body.neu .n-tl-block.n-tl-kollision { box-shadow: 0 0 0 2px #E5484D; }
body.neu .n-tl-wahl, body.neu .n-tl-geist { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 2px; z-index: 3; pointer-events: none; }
body.neu .n-tl-wahl { background: #1E1F10; }
body.neu .n-tl-wahl b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #1E1F10; color: #fff; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
body.neu .n-tl-geist { background: color-mix(in srgb, #1E1F10 30%, transparent); font-size: 10.5px; color: var(--n-text-2); }
body.neu .n-tl-geist::after { content: attr(data-x); }
body.neu .n-tl-warnung { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: color-mix(in srgb, #E8A33B 16%, transparent); color: #7A4A0E; }
body.neu .n-tl-liste { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-tl-li { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
body.neu .n-tl-li.n-kal-rueckruf { background: color-mix(in srgb, #C9D738 30%, transparent); color: #3F4708; }
body.neu .n-tl-li.n-kal-termin { background: color-mix(in srgb, #3F7BD8 16%, transparent); color: #17407E; }
body.neu .n-chip.n-belegt { text-decoration: line-through; opacity: .55; }
body.neu .n-chip.n-vergangen { opacity: .35; }
@media (max-width: 720px) {
  body.neu .n-tl-tipp { display: none; }
  body.neu .n-tl-block span { display: none; }
  body.neu .n-tl-block { padding: 0; }
}
body.neu .n-tl-block span { display: none; }
body.neu .n-tl-gewaehlt { margin-left: 8px; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #1E1F10; color: #fff; font-variant-numeric: tabular-nums; }
body.neu .n-tl-gewaehlt-warn { background: #C9781B; }
body.neu .n-tl-zahl { white-space: nowrap; }
@media (max-width: 720px) { body.neu .n-tl-gewaehlt { margin-left: auto; } body.neu .n-tl-kopf b { min-width: 0; } }

/* ── Terminkalender im Formular (02.10.2026): Monat + Tag ───────────────── */
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label:nth-of-type(1) { display: none; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label:nth-of-type(3) { grid-column: 2 / -1; }
body.neu .n-tkal { order: 0; --kal-rr: #C9D738; --kal-t: #3F7BD8; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 18px;
  padding: 16px; border-radius: 16px; background: var(--n-surface-2, rgba(118,118,128,.06)); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-tk-laden { margin: 0; font-size: 13px; color: var(--n-text-3); grid-column: 1 / -1; }
/* Monat */
body.neu .n-tk-mkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
body.neu .n-tk-mkopf b { font-size: 15.5px; }
body.neu .n-tk-pfeil { width: 32px; height: 32px; border-radius: 10px; border: 0; cursor: pointer; font-size: 19px; line-height: 1;
  background: var(--n-surface, #fff); box-shadow: 0 0 0 1px var(--n-hair); color: var(--n-text); }
body.neu .n-tk-pfeil:disabled { opacity: .3; cursor: default; }
body.neu .n-tk-wtage, body.neu .n-tk-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
body.neu .n-tk-wtage span { text-align: center; font-size: 11px; font-weight: 650; color: var(--n-text-3); letter-spacing: .04em; padding: 4px 0; }
body.neu .n-tk-tag { position: relative; aspect-ratio: 1; border: 0; border-radius: 12px; cursor: pointer; background: transparent;
  display: grid; place-items: center; font: inherit; font-size: 14px; font-weight: 600; color: var(--n-text); transition: background .12s ease, transform .12s var(--n-feder); }
body.neu .n-tk-tag:hover:not(:disabled) { background: color-mix(in srgb, var(--kal-rr) 22%, transparent); }
body.neu .n-tk-tag:active:not(:disabled) { transform: scale(.94); }
body.neu .n-tk-tag.n-tk-fremd { color: var(--n-text-3); font-weight: 450; }
body.neu .n-tk-tag.n-tk-we:not(.n-tk-wahl) { color: var(--n-text-2); }
body.neu .n-tk-tag:disabled { color: color-mix(in srgb, var(--n-text-3, #999) 55%, transparent); cursor: default; font-weight: 450; }
body.neu .n-tk-tag.n-tk-heute span { text-decoration: underline 2px var(--kal-rr); text-underline-offset: 4px; }
body.neu .n-tk-tag.n-tk-wahl { background: #1E1F10; color: #fff; }
body.neu .n-tk-tag.n-tk-wahl span { text-decoration: none; }
body.neu .n-tk-punkte { position: absolute; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
body.neu .n-tk-punkte b { width: 5px; height: 5px; border-radius: 50%; }
body.neu .n-tk-punkte .n-kal-rueckruf { background: var(--kal-rr); }
body.neu .n-tk-punkte .n-kal-termin { background: var(--kal-t); }
/* Tag */
body.neu .n-tk-tagansicht { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body.neu .n-tk-tkopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.neu .n-tk-tkopf b { font-size: 15.5px; }
body.neu .n-tk-tkopf span { font-size: 13px; color: var(--n-text-2); }
body.neu .n-tk-tkopf small { margin-left: auto; font-size: 12px; color: var(--n-text-3); }
body.neu .n-tk-tkopf em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #1E1F10; color: #fff; }
body.neu .n-tk-tkopf em.n-tk-warn { background: #C9781B; }
body.neu .n-tk-ohnezeit { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--n-surface-2); font-size: 12.5px; color: var(--n-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-tk-spur { position: relative; height: calc(var(--std) * 38px); max-height: 470px; border-radius: 12px; background: var(--n-surface, #fff);
  box-shadow: inset 0 0 0 1px var(--n-hair); cursor: crosshair; display: grid; grid-template-rows: repeat(var(--std), 1fr); overflow: hidden; }
body.neu .n-tk-std { border-top: 1px solid var(--n-hair); position: relative; }
body.neu .n-tk-std:first-child { border-top: 0; }
body.neu .n-tk-std span { position: absolute; left: 8px; top: 3px; font-size: 11px; color: var(--n-text-3); font-variant-numeric: tabular-nums; }
body.neu .n-tk-vergangen { position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--n-text-3, #999) 10%, transparent) 6px 7px); }
body.neu .n-tk-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: #E5484D; z-index: 2; pointer-events: none; }
body.neu .n-tk-block { position: absolute; left: 56px; right: 10px; z-index: 3; box-sizing: border-box; min-height: 26px;
  display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; }
body.neu .n-tk-block small { margin-left: auto; font-size: 11px; font-weight: 600; opacity: .7; }
body.neu .n-tk-block.n-kal-rueckruf { background: color-mix(in srgb, var(--kal-rr) 40%, #fff); color: #3F4708; box-shadow: inset 3px 0 0 var(--kal-rr); }
body.neu .n-tk-block.n-kal-termin { background: color-mix(in srgb, var(--kal-t) 18%, #fff); color: #17407E; box-shadow: inset 3px 0 0 var(--kal-t); }
body.neu .n-tk-block.n-tk-kollision { box-shadow: inset 3px 0 0 #E5484D, 0 0 0 2px #E5484D; }
body.neu .n-tk-wahlstrich, body.neu .n-tk-geist { position: absolute; left: 50px; right: 6px; height: 2px; margin-top: -1px; z-index: 4; pointer-events: none; border-radius: 2px; }
body.neu .n-tk-wahlstrich { background: #1E1F10; }
body.neu .n-tk-wahlstrich b { position: absolute; left: -48px; top: -9px; font-size: 11px; background: #1E1F10; color: #fff; padding: 1px 6px; border-radius: 6px; }
body.neu .n-tk-geist { background: color-mix(in srgb, #1E1F10 28%, transparent); font-size: 10.5px; color: var(--n-text-2); text-indent: -46px; line-height: 0; }
body.neu .n-tk-warnung { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; background: color-mix(in srgb, #E8A33B 16%, transparent); color: #7A4A0E; }
@media (max-width: 720px) {
  body.neu .n-tkal { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; }
  body.neu .n-tk-tag { font-size: 13.5px; border-radius: 10px; }
  body.neu .n-tk-spur { height: calc(var(--std) * 34px); }
  body.neu .n-tk-tkopf small { display: none; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label:nth-of-type(3) { grid-column: 1 / -1; }
}
/* Die Klappe über einer angehefteten Ergebnisleiste darf nie höher als der
   Bildschirm werden — sonst ist ihr oberer Teil unerreichbar (02.10.2026,
   gefunden mit dem Terminkalender). Sie scrollt dann in sich. */
body.neu .ergebnisbereich .ausgangsklappe:not([hidden]) {
  max-height: calc(var(--n-vvh, 100dvh) - 150px); overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 720px) {
  body.neu .ergebnisbereich .ausgangsklappe:not([hidden]) { max-height: calc(var(--n-vvh, 100dvh) - 190px); }
}
/* „Eintragen" immer sichtbar: unten angeheftet in der scrollenden Klappe */
body.neu .ausgangsklappe.termin .n-klappfuss {
  order: 7; grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; gap: 12px;
  position: sticky; bottom: -16px; z-index: 6; margin: 0 -20px -16px; padding: 12px 20px 16px;
  background: var(--n-surface, #fff); box-shadow: 0 -10px 18px -10px rgba(0, 0, 0, .14);
}
body.neu .ausgangsklappe.termin .n-klappfuss .termin-abschluss, body.neu .ausgangsklappe.termin .n-klappfuss .klappe-zu { grid-column: auto; order: 0; }
body.neu .ausgangsklappe.termin .klapphinweis { order: 6; grid-column: 1 / -1; }
body.neu .n-tk-spur { height: calc(var(--std) * 30px); }
@media (max-width: 720px) { body.neu .n-tk-spur { height: calc(var(--std) * 30px); } }
/* In der Tafel teilen sich Kopf, Inhalt und Ergebnisleiste die Höhe — die
   Klappe darf nur den Rest nehmen, sonst rutscht „Eintragen" unten hinaus. */
body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe:not([hidden]) { max-height: calc(var(--n-vvh, 100dvh) - 310px); }
@media (max-width: 720px) {
  body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe:not([hidden]) { max-height: calc(var(--n-vvh, 100dvh) - 250px); }
}

/* ── Terminformular ohne Scrollen (02.10.2026) ─────────────────────────────
   Kalender oben, darunter EINE Zeile: Uhrzeit · Erinnerung · Worum. Die
   Uhrzeit-Chips und der lange Hinweis fallen weg — der Kalender zeigt die
   freien Zeiten selbst, und „ohne Uhrzeit = vertagen" steht an der Uhrzeit. */
body.neu .n-nur-tkal { display: none; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-nur-tkal { display: inline; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) { padding: 14px 16px 0; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile {
  grid-template-columns: 150px 210px minmax(0, 1fr); gap: 10px 12px;
}
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label:nth-of-type(2) { order: 2; grid-column: 1; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label:nth-of-type(3) { order: 3; grid-column: 2; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label.breit { order: 4; grid-column: 3; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-schnell-zeit,
body.neu .ausgangsklappe.termin:has([data-terminkalender]) > .klapphinweis { display: none; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) label small { font-size: 11px; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) input, body.neu .ausgangsklappe.termin:has([data-terminkalender]) select { height: 40px; font-size: 14px; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappfuss { margin: 0 -16px; padding: 10px 16px 14px; bottom: 0; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappfuss .knopf { height: 42px; }
/* Kalender kompakter */
body.neu .n-tkal { padding: 12px; gap: 14px; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
body.neu .n-tk-mkopf { margin-bottom: 4px; }
body.neu .n-tk-pfeil { width: 28px; height: 28px; font-size: 17px; }
body.neu .n-tk-wtage span { padding: 2px 0; }
body.neu .n-tk-tag { aspect-ratio: auto; height: 34px; font-size: 13.5px; border-radius: 10px; }
body.neu .n-tk-punkte { bottom: 2px; }
body.neu .n-tk-tagansicht { gap: 6px; }
body.neu .n-tk-spur { height: calc(var(--std) * 21px); }
body.neu .n-tk-std span { top: 2px; font-size: 10.5px; }
body.neu .n-tk-block { min-height: 20px; font-size: 12px; }
/* Mehr Höhe in der Tafel: die Klappe darf bis knapp unter den Kopf */
body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]) { max-height: calc(var(--n-vvh, 100dvh) - 235px); }
@media (max-width: 720px) {
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile { grid-template-columns: 1fr 1fr; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label.breit { grid-column: 1 / -1; }
  body.neu .n-tkal { grid-template-columns: minmax(0, 1fr); }
  body.neu .n-tk-tag { height: 36px; }
  body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]) { max-height: calc(var(--n-vvh, 100dvh) - 200px); }
}
/* Seitenmenü: das offene Terminformular als Blatt über der Ergebnisleiste —
   unten angedockt, nach oben bis unter den Kopf. Es wächst nie aus der Tafel. */
body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
  position: absolute; left: 12px; right: 12px; bottom: var(--n-leiste-h, 96px); z-index: 30;
  max-height: calc(100% - var(--n-leiste-h, 96px) - 120px); overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18), 0 0 0 1px var(--n-hair);
}
body.neu .ausgangsklappe.termin:has([data-terminkalender]) label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) label.breit small { display: none; }
body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile { grid-template-columns: 170px 200px minmax(0, 1fr); }
@media (max-width: 720px) {
  body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
    left: 6px; right: 6px; max-height: calc(100% - var(--n-leiste-h, 110px) - 70px); }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile { grid-template-columns: 1fr 1fr; }
  body.neu .n-tk-spur { height: calc(var(--std) * 19px); }
  body.neu .n-tk-tag { height: 32px; }
}
@media (max-width: 720px) {
  body.neu .n-tkal { padding: 10px; gap: 8px; }
  body.neu .n-tk-tag { height: 29px; font-size: 13px; }
  body.neu .n-tk-wtage span { padding: 0; font-size: 10.5px; }
  body.neu .n-tk-mkopf b, body.neu .n-tk-tkopf b { font-size: 14px; }
  body.neu .n-tk-spur { height: calc(var(--std) * 14px); }
  body.neu .n-tk-std span { top: 0; font-size: 9.5px; }
  body.neu .n-tk-block { min-height: 16px; font-size: 11px; padding: 0 8px; left: 46px; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) { padding: 10px 10px 0; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile { gap: 8px 10px; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappfuss { margin: 0 -10px; padding: 8px 10px 10px; }
  body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) { max-height: calc(100% - var(--n-leiste-h, 110px) - 40px); }
}

/* ── Telefon: Terminformular als Vollblatt (02.10.2026) ────────────────────
   Am iPhone klappte die Ergebnisleiste („Mehr") darunter auf und nahm die
   Hälfte — das Formular scrollte. Jetzt: Leiste weg, solange das Formular
   offen ist (es hat selbst „Abbrechen"), das Blatt reicht vom Kopf bis zum
   unteren Rand, und die Stundenleiste nimmt, was übrig ist. */
@media (max-width: 720px) {
  body.neu .ergebnisbereich:has(.ausgangsklappe.termin:not([hidden]) [data-terminkalender]) .ergebnisleiste { display: none !important; }
  body.neu .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]),
  body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
    position: fixed; z-index: 1100; left: 6px; right: 6px;
    top: calc(var(--n-vvtop, 0px) + env(safe-area-inset-top) + 64px);
    bottom: calc(env(safe-area-inset-bottom) + 6px); max-height: none; margin: 0;
    display: flex; flex-direction: column; overflow-y: auto;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .2), 0 0 0 1px var(--n-hair);
  }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label.breit > :not(input):not(small) { display: none; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label.breit { font-size: 0; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile > label.breit input { font-size: 14px; margin-top: 0; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappfuss { margin-top: auto; }
  body.neu .n-tk-spur { height: max(120px, calc(var(--n-vvh, 100dvh) - 590px)); max-height: none; }
  body.neu .n-tk-std span { top: 50%; transform: translateY(-50%); }
}
@media (max-width: 720px) {
  body.neu .ergebnisbereich:has(.ausgangsklappe.termin:not([hidden]) [data-terminkalender]) { transform: none !important; }
}
@media (max-width: 720px) and (max-height: 720px) {
  body.neu .n-tk-tag { height: 26px; font-size: 12.5px; }
  body.neu .n-tk-wtage { display: none; }
}

/* Wo bin ich? Titel in der Klappe, gewählter Knopf unten markiert (02.10.2026) */
body.neu .n-klappentitel { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: var(--n-text); }
body.neu .n-klappentitel::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #C9D738; }
body.neu .n-klappentitel[data-art="termin"]::before { background: #3F7BD8; }
body.neu .n-klappentitel[data-art="verworfen"]::before, body.neu .n-klappentitel[data-art="kein_interesse"]::before { background: #D2453A; }
body.neu .ergebnisbereich.wartet .ausgangsknopf.n-gewaehlt {
  opacity: 1 !important; filter: none !important; background: #1E1F10 !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important; border-color: transparent !important;
}
body.neu .ergebnisbereich.wartet .ausgangsknopf.n-gewaehlt * { color: #fff !important; }
body.neu .ergebnisbereich.wartet .ausgangsknopf.n-gewaehlt::after {
  content: ""; position: absolute; left: 50%; top: -7px; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #1E1F10;
}
body.neu .ergebnisbereich .ausgangsknopf { position: relative; }
body.neu .ergebnisbereich.wartet .ergebnisleiste { opacity: 1; }
body.neu .ergebnisbereich.wartet .ergebnisleiste .ausgangsknopf:not(.n-gewaehlt) { opacity: .45; }
body.neu .ergebnisbereich.wartet .ergebnisleiste:hover .ausgangsknopf:not(.n-gewaehlt) { opacity: .8; }

/* Produktivität: mitlaufende Karte (02.10.2026) */
body.neu .n-produktiv-plot { cursor: crosshair; touch-action: pan-y; }
body.neu .n-produktiv-punkt[title] { pointer-events: none; }
body.neu .n-pk-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, #1E1F10 30%, transparent); pointer-events: none; z-index: 2; }
body.neu .n-produktiv-punkt.n-pk-an { opacity: 1 !important; transform: scale(1.6); background: #1E1F10; border-color: #fff; z-index: 3; }
body.neu .n-pk-karte {
  position: absolute; z-index: 5; pointer-events: none; min-width: 150px; transform: translate(14px, -50%);
  padding: 10px 12px; border-radius: 12px; background: #1E1F10; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35;
}
body.neu .n-pk-karte.n-pk-links { transform: translate(calc(-100% - 14px), -50%); }
body.neu .n-pk-karte.n-pk-unten { transform: translate(14px, 10px); }
body.neu .n-pk-karte.n-pk-links.n-pk-unten { transform: translate(calc(-100% - 14px), 10px); }
body.neu .n-pk-karte small { font-size: 11.5px; color: rgba(255,255,255,.65); }
body.neu .n-pk-karte b { font-size: 15px; font-weight: 750; }
body.neu .n-pk-karte ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; }
body.neu .n-pk-karte li::before { content: "· "; color: #C9D738; font-weight: 800; }

/* ── Controlling oben: vier Kacheln (02.10.2026) ─────────────────────────── */
body.neu .n-ct-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.neu .n-ct-k { position: relative; display: grid; gap: 2px; align-content: start; text-align: left; padding: 18px 20px; border-radius: var(--n-r-l, 20px);
  border: 0; font: inherit; color: var(--n-text); background: var(--n-surface, #fff); box-shadow: var(--n-schatten); }
body.neu .n-ct-k b { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }
body.neu .n-ct-k-titel { font-size: 15px; font-weight: 650; }
body.neu .n-ct-k small { font-size: 12.5px; color: var(--n-text-3); line-height: 1.4; }
body.neu .n-ct-k-ico { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--n-surface-2, rgba(118,118,128,.08)); color: var(--n-text-2); }
body.neu .n-ct-k-gut .n-ct-k-ico { background: color-mix(in srgb, #C9D738 30%, transparent); color: #5F6B0C; }
body.neu .n-ct-k-haengt { cursor: pointer; background: color-mix(in srgb, #E8A33B 10%, var(--n-surface, #fff)); box-shadow: var(--n-schatten), inset 0 0 0 1.5px color-mix(in srgb, #E8A33B 45%, transparent); transition: transform .2s var(--n-feder); }
body.neu .n-ct-k-haengt:hover { transform: translateY(-2px); }
body.neu .n-ct-k-haengt b { color: #B4661A; }
body.neu .n-ct-k-haengt .n-ct-k-ico { background: color-mix(in srgb, #E8A33B 22%, transparent); color: #B4661A; }
body.neu .n-ct-k-haengt[aria-expanded="true"] { box-shadow: var(--n-schatten), inset 0 0 0 2px #E8A33B; }
body.neu .n-ct-k-ruhig { background: var(--n-surface, #fff); box-shadow: var(--n-schatten); cursor: default; }
body.neu .n-ct-k-ruhig b { color: var(--n-text); }
body.neu .n-ct-haengt[hidden] { display: none; }
body.neu .n-pk-karte[hidden], body.neu .n-pk-linie[hidden] { display: none !important; }
@media (max-width: 900px) { body.neu .n-ct-kpi { grid-template-columns: 1fr 1fr; } body.neu .n-ct-k b { font-size: 28px; } }

/* ── Konto der Leitung: Kacheln, Filter, Phasen-Tafel (02.10.2026) ────────── */
body.neu .n-ck-k { cursor: pointer; transition: transform .2s var(--n-feder), box-shadow .2s ease; }
body.neu .n-ck-k:hover { transform: translateY(-2px); }
body.neu .n-ck-k[aria-pressed="true"] { box-shadow: var(--n-schatten), inset 0 0 0 2px #1E1F10; }
body.neu .n-ck-ico-gut { background: color-mix(in srgb, #C9D738 30%, transparent) !important; color: #5F6B0C !important; }
body.neu .n-ck-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.neu .n-ck-suche { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; min-width: 220px;
  background: var(--n-surface, #fff); box-shadow: 0 0 0 1px var(--n-hair); color: var(--n-text-3); }
body.neu .n-ck-suche input { border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--n-text); width: 100%; }
body.neu .n-ck-regionen { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-ck-regionen .n-chip small { opacity: .6; margin-left: 2px; }
body.neu .n-ck-reset { border: 0; background: none; cursor: pointer; font: inherit; }
body.neu .n-ck-reset[hidden] { display: none; }
body.neu .n-ck-treffer { margin: -4px 0 0; font-size: 13px; color: var(--n-text-2); min-height: 1em; }
body.neu .n-ck-tafel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
body.neu .n-ck-spalte { background: var(--n-surface-2, rgba(118,118,128,.06)); border-radius: 18px; padding: 10px; display: grid; gap: 8px; min-width: 0;
  box-shadow: inset 0 0 0 1px var(--n-hair); transition: opacity .2s ease; }
body.neu .n-ck-spalte.n-ck-zu { opacity: .35; }
body.neu .n-ck-spalte > header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 2px; }
body.neu .n-ck-spalte > header b { font-size: 14px; font-weight: 700; }
body.neu .n-ck-spalte > header span { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--n-surface, #fff); color: var(--n-text-2); }
body.neu .n-ck-gut > header { box-shadow: inset 0 -3px 0 #C9D738; padding-bottom: 8px; }
body.neu .n-ck-offen > header { box-shadow: inset 0 -3px 0 #3F7BD8; padding-bottom: 8px; }
body.neu .n-ck-ruht > header { box-shadow: inset 0 -3px 0 #B9B9B0; padding-bottom: 8px; }
body.neu .n-ck-karten { display: grid; gap: 8px; max-height: 62vh; overflow-y: auto; padding: 2px; }
body.neu .n-ck-karte { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--n-text);
  background: var(--n-surface, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--n-hair); transition: transform .15s var(--n-feder), box-shadow .15s ease; }
body.neu .n-ck-karte[hidden] { display: none; }
body.neu .n-ck-karte:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 0 0 1px var(--n-hair); }
body.neu .n-ck-karte.n-ck-liegt { box-shadow: inset 3px 0 0 #E8A33B, 0 0 0 1px var(--n-hair); }
body.neu .n-ck-k-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
body.neu .n-ck-k-kopf b { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
body.neu .n-ck-score { font-style: normal; font-size: 11.5px; font-weight: 750; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  background: var(--n-surface-2, rgba(118,118,128,.1)); color: var(--n-text-2); flex: none; }
body.neu .n-ck-score.n-hoch { background: #C9D738; color: #1E1F10; }
body.neu .n-ck-ort { font-size: 12px; color: var(--n-text-3); }
body.neu .n-ck-k-fuss { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--n-text-2); }
body.neu .n-ck-k-fuss .n-ck-status { padding: 2px 8px; font-size: 11px; }
body.neu .n-ck-k-fuss .n-ck-tage { margin-left: auto; font-variant-numeric: tabular-nums; }
body.neu .n-ck-liegt .n-ck-tage { color: #B4661A; font-weight: 700; }
body.neu .n-ck-leer { margin: 4px 6px; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-ck-leer[hidden] { display: none; }
@media (max-width: 720px) {
  body.neu .n-ck-tafel { grid-auto-columns: 82%; scroll-snap-type: x mandatory; }
  body.neu .n-ck-spalte { scroll-snap-align: start; }
  body.neu .n-ck-suche { min-width: 0; flex: 1 1 100%; }
  body.neu .n-ck-regionen { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
}

/* ── Diagramme in der Chat-Antwort (02.10.2026, Leitung) ─────────────────── */
body.neu .n-dg { margin: 14px 0; padding: 16px 18px 14px; border-radius: 16px; background: var(--n-surface, #fff);
  box-shadow: 0 0 0 1px var(--n-hair), 0 6px 20px rgba(0,0,0,.05); }
body.neu .n-dg figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
body.neu .n-dg figcaption b { font-size: 14.5px; }
body.neu .n-dg figcaption small { font-size: 12px; color: var(--n-text-3); }
body.neu .n-dg-balken { display: grid; gap: 10px; }
body.neu .n-dg-zeile { display: grid; grid-template-columns: minmax(70px, 9em) 1fr 3em 4em; align-items: center; gap: 10px; font-size: 13px; }
body.neu .n-dg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--n-text-2); }
body.neu .n-dg-spur { position: relative; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--n-text-3, #999) 12%, transparent); }
body.neu .n-dg-spur i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; animation: n-dg-ein .7s cubic-bezier(.2,.9,.3,1) both; }
@keyframes n-dg-ein { from { width: 0; } }
body.neu .n-dg-wert { background: #C9D738; }
body.neu .n-dg-spur .n-dg-vorher { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #1E1F10 35%, transparent); z-index: 1; }
body.neu .n-dg-zeile b { text-align: right; font-variant-numeric: tabular-nums; }
body.neu .n-dg-zeile em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; justify-self: start; }
body.neu .n-dg-plus { background: color-mix(in srgb, #C9D738 30%, transparent); color: #4A540A; }
body.neu .n-dg-minus { background: color-mix(in srgb, #D2453A 14%, transparent); color: #A3271E; }
body.neu .n-dg-legende { margin: 10px 0 0; font-size: 11.5px; color: var(--n-text-3); display: flex; align-items: center; gap: 6px; }
body.neu .n-dg-legende i { display: inline-block; width: 16px; height: 8px; border-radius: 999px; }
body.neu .n-dg-legende .n-dg-vorher { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #1E1F10 35%, transparent); margin-left: 8px; }
body.neu .n-dg-linie { position: relative; height: 150px; }
body.neu .n-dg-linie svg { position: absolute; inset: 0; width: 100%; height: 100%; }
body.neu .n-dg-fl { fill: color-mix(in srgb, #C9D738 22%, transparent); }
body.neu .n-dg-st { fill: none; stroke: #9EAD1F; stroke-width: 2.5; stroke-linejoin: round; }
body.neu .n-dg-pkt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #9EAD1F; }
body.neu .n-dg-pkt b { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--n-text-2); }
body.neu .n-dg-achse { position: relative; height: 18px; margin-top: 6px; }
body.neu .n-dg-achse span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--n-text-3); white-space: nowrap; }
@media (max-width: 720px) { body.neu .n-dg-zeile { grid-template-columns: 6em 1fr 2.5em 3.6em; gap: 6px; } }

/* ── Stefans Ansicht am Telefon (02.10.2026) ──────────────────────────────── */
body.neu .n-ct-k-titel, body.neu .n-ct-k small { padding-right: 38px; }
body.neu .n-ck-regionen .n-chip { white-space: nowrap; flex: none; }
body.neu .n-cl-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body.neu .n-cl-kopf .n-ct-unter { word-break: break-word; }
@media (max-width: 720px) {
  body.neu .n-ct-k { padding: 14px 14px 14px; }
  body.neu .n-ct-k-ico { width: 30px; height: 30px; top: 12px; right: 12px; }
  body.neu .n-ct-k-titel { font-size: 14px; padding-right: 0; }
  body.neu .n-ct-k small { padding-right: 0; font-size: 12px; }
  body.neu .n-ct-k b { margin-top: 0; padding-right: 36px; }
  /* Teamkarten kompakt: Name + Anrufe in einer Zeile, Kennzahlen darunter */
  body.neu .n-ct-person { padding: 12px 14px; gap: 8px; }
  body.neu .n-ct-person header { gap: 8px; }
  body.neu .n-ct-avatar { width: 32px; height: 32px; }
  body.neu .n-ct-person-zahl { position: absolute; right: 40px; top: 14px; }
  body.neu .n-ct-person { position: relative; }
  body.neu .n-ct-person-zahl b { font-size: 20px; }
  body.neu .n-ct-person .n-ct-spur { display: none; }
  body.neu .n-ct-mini dd { font-size: 15px; }
  body.neu .n-ck-kopf h1 { font-size: 26px; }
  body.neu .n-ck-kopf .n-ct-unter { font-size: 13.5px; }
  body.neu .n-cl-kopf h1 { font-size: 26px; }
}

/* ── Rückblick-Popups: Dein Tag / Deine Woche (05.10.2026) ────────────────── */
.n-rb-huelle { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 16, 10, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s ease; }
.n-rb-huelle.n-an { opacity: 1; }
html.n-rb-offen, html.n-rb-offen body { overflow: hidden; }
.n-rb { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 28px;
  font-family: var(--n-schrift, system-ui); transform: translateY(16px) scale(.97); transition: transform .35s cubic-bezier(.2,.9,.3,1.1); }
.n-rb-huelle.n-an .n-rb { transform: none; }
.n-rb.n-rb-weg { opacity: 0; transform: scale(.96); transition: all .2s ease; }
.n-rb-zu { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255,255,255,.14); color: inherit; }
.n-rb-ober { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.n-rb h2 { margin: 0 0 18px; font-size: 26px; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; }
.n-rb-text { margin: 0; font-size: 15px; line-height: 1.5; opacity: .8; }
.n-rb-fuss { margin: 16px 0 0; font-size: 14px; opacity: .75; }
.n-rb-knopf { display: flex; justify-content: center; margin-top: 22px; padding: 14px; border-radius: 16px; text-decoration: none;
  font-weight: 700; background: #C9D738; color: #1E1F10; }
.n-rb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.n-rb-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 12px 14px; border-radius: 14px;
  text-decoration: none; color: inherit; background: rgba(255,255,255,.08); box-shadow: inset 3px 0 0 var(--rb-farbe, #C9D738); }
.n-rb-liste a b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-rb-liste a small { grid-column: 1; font-size: 12.5px; opacity: .7; }
.n-rb-liste a svg { grid-row: 1 / 3; grid-column: 2; opacity: .5; }
.n-rb-rot { --rb-farbe: #E5484D; } .n-rb-gelb { --rb-farbe: #E8A33B; } .n-rb-blau { --rb-farbe: #3F7BD8; } .n-rb-gruen { --rb-farbe: #C9D738; }

/* Story (Woche) — dunkel */
.n-rb-story { background: radial-gradient(ellipse 120% 70% at 50% 0%, #2A2F12 0%, #121409 65%); color: #F4F4EE; min-height: min(640px, calc(100dvh - 32px));
  padding: 30px 24px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.n-rb-fortschritt { position: absolute; top: 12px; left: 18px; right: 60px; display: flex; gap: 5px; z-index: 4; }
.n-rb-fortschritt i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.n-rb-fortschritt i b { display: block; height: 100%; width: 0; background: #C9D738; }
.n-rb-fortschritt .n-rb-voll b { width: 100%; }
.n-rb-fortschritt .n-rb-laeuft b { animation: n-rb-lauf 7s linear forwards; }
@keyframes n-rb-lauf { to { width: 100%; } }
.n-rb-karte { position: relative; z-index: 2; padding-top: 18px; animation: n-rb-karte .4s cubic-bezier(.2,.9,.3,1) both; pointer-events: none; }
.n-rb-karte a, .n-rb-karte button { pointer-events: auto; }
@keyframes n-rb-karte { from { opacity: 0; transform: translateX(14px); } }
.n-rb-karte[hidden] { display: none; }
.n-rb-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.n-rb-zahlen > div { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.07); display: grid; gap: 2px; }
.n-rb-zahlen b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #DCE85A; font-variant-numeric: tabular-nums; }
.n-rb-zahlen span { font-size: 14px; opacity: .75; }
.n-rb-delta { justify-self: start; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 4px; }
.n-rb-plus { background: rgba(201,215,56,.22); color: #DCE85A; } .n-rb-minus { background: rgba(229,72,77,.22); color: #FF9A9D; }
.n-rb-highlight { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(201,215,56,.28), rgba(201,215,56,.08)); box-shadow: inset 0 0 0 1px rgba(201,215,56,.4); }
.n-rb-highlight span { display: grid; } .n-rb-highlight b { font-size: 17px; } .n-rb-highlight small { opacity: .7; }
.n-rb-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 150px; margin-top: 24px; }
.n-rb-tage > div { display: grid; grid-template-rows: 1fr auto auto; text-align: center; gap: 4px; }
.n-rb-tage > div > span { display: flex; align-items: flex-end; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.n-rb-tage i { display: block; width: 100%; background: rgba(220,232,90,.45); border-radius: 8px 8px 3px 3px; animation: n-rb-saeule .8s cubic-bezier(.2,.9,.3,1) both; }
@keyframes n-rb-saeule { from { height: 0 !important; } }
.n-rb-tage .n-rb-bester i { background: #DCE85A; }
.n-rb-tage b { font-size: 12px; } .n-rb-tage small { font-size: 11px; opacity: .6; }
.n-rb-politis { text-align: center; display: grid; justify-items: center; padding-top: 40px; }
.n-rb-logo { animation: n-rb-puls 2.4s ease-in-out infinite; }
@keyframes n-rb-puls { 50% { transform: scale(1.06); } }
.n-rb-politis blockquote { margin: 22px 0 0; font-size: 22px; line-height: 1.4; font-weight: 650; letter-spacing: -.01em; }
.n-rb-politis .n-rb-knopf { width: 100%; box-sizing: border-box; }
.n-rb-tipp { position: absolute; top: 0; bottom: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.n-rb-zurueck { left: 0; width: 30%; } .n-rb-weiter { right: 0; width: 70%; }

/* Tag — hell */
.n-rb-tag { background: var(--n-surface, #fff); color: var(--n-text, #1E1F10); padding: 28px 22px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.n-rb-tag .n-rb-zu { background: var(--n-surface-2, rgba(118,118,128,.1)); }
.n-rb-tag h2 { margin-bottom: 8px; }
.n-rb-ring { position: relative; width: 150px; height: 150px; margin: 6px auto 8px; }
.n-rb-ring svg { display: block; }
.n-rb-ring-grund { fill: none; stroke: var(--n-hair, #eee); stroke-width: 9; }
.n-rb-ring-voll { fill: none; stroke: #C9D738; stroke-width: 9; stroke-linecap: round; animation: n-rb-ring 1s cubic-bezier(.2,.9,.3,1) both; }
@keyframes n-rb-ring { from { stroke-dashoffset: var(--u); } }
.n-rb-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.n-rb-ring b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.n-rb-ring small { font-size: 12.5px; color: var(--n-text-3); }
.n-rb-mitte { text-align: center; margin-bottom: 18px; }
.n-rb-rot-t { color: #C63A33; }
.n-rb-links { margin-top: 4px; }
.n-rb-tag .n-rb-liste a { background: var(--n-surface-2, rgba(118,118,128,.06)); }
.n-rb-mit-tel { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; align-items: stretch; }
.n-rb-tel { display: grid; place-items: center; border-radius: 14px; background: #C9D738; color: #1E1F10; }
@media (prefers-reduced-motion: reduce) { .n-rb, .n-rb-karte, .n-rb-tage i, .n-rb-ring-voll, .n-rb-logo { animation: none !important; transition: none !important; } }
body.neu .n-rb h2 { text-transform: none; letter-spacing: -.02em; color: inherit; font-size: 26px; }
body.neu .n-rb-story { min-height: 0; }
body.neu .n-rb-story .n-rb-karte { min-height: 380px; }
.n-rb-tel { box-shadow: none !important; border: 0; }
.n-rb-link { display: inline-block; margin-top: 16px; color: #DCE85A; font-weight: 650; font-size: 14px; text-decoration: none; position: relative; z-index: 3; pointer-events: auto; }
body.neu .n-ct-kfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
body.neu .n-ct-kfilter .n-chip { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 720px) { body.neu .n-ct-kfilter { flex-wrap: nowrap; overflow-x: auto; } body.neu .n-ct-kfilter .n-chip { flex: none; } }

/* ── Telefon: die Tab-Leiste bleibt, auch mit offener Lead-Tafel (05.10.2026)
   „Die Fußzeile soll überall gleich bleiben und alles passt sich an." Die
   Tafel endet über der Leiste statt dahinter; die Ergebnisknöpfe sitzen
   direkt darüber. Mit offener Tastatur bleibt es wie bisher (Leiste weg,
   Tafel volle Höhe). Über der Stimme liegt die Leiste nicht. */
@media (max-width: 720px) {
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .seite,
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .seite.breit {
    height: calc(var(--n-vvh, 100dvh) - 64px - env(safe-area-inset-bottom)) !important;
    bottom: auto;
  }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .seitenfuss { padding-bottom: 8px; }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur):has(#tafelrahmen[data-an]) .n-tabbar { z-index: 70; }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .schleier { bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Das Terminformular als Vollblatt endet ebenfalls über der Leiste */
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
    bottom: calc(64px + env(safe-area-inset-bottom) + 6px);
  }
}
@media (max-width: 720px) {
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
    bottom: calc(64px + env(safe-area-inset-bottom) + 6px);
  }
}
@media (max-width: 720px) {
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur):has(#tafelrahmen[data-an]) .n-tabbar { background: var(--n-surface, #fff); }
  body.neu .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch; }
  body.neu .ausgangsklappe .n-klappentitel { flex: none; width: 100%; margin-bottom: 8px; }
}
@media (max-width: 720px) {
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .n-tk-spur { height: max(110px, calc(var(--n-vvh, 100dvh) - 690px - env(safe-area-inset-bottom))); }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappentitel { margin-bottom: 4px; font-size: 15px; }
}
@media (max-width: 720px) and (max-height: 720px) {
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .n-tk-spur { height: 70px; }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .n-tk-std span { font-size: 0; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappentitel { display: none; }
}

/* ── Termin-/Rückrufformular am Telefon, Feinschliff (05.10.2026) ─────────── */
body.neu .n-tk-slots { display: none; }
/* Hover nur mit Maus — am Telefon „klebte" er nach dem Tippen */
@media (hover: none) { body.neu .n-tk-tag:hover:not(:disabled) { background: transparent; } }
body.neu .n-tk-tag.n-tk-wahl, body.neu .n-tk-tag.n-tk-wahl:hover { background: #1E1F10 !important; color: #fff !important; }
@media (max-width: 720px) {
  body.neu .n-tkal .n-tk-spur { display: none !important; }
  body.neu .n-tk-tkopf small { display: none; }
  body.neu .n-tk-slots { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.neu .n-tk-slots::-webkit-scrollbar { display: none; }
  body.neu .n-tk-slot { flex: none; scroll-snap-align: start; min-width: 64px; height: 46px; border-radius: 12px; border: 0; cursor: pointer;
    display: grid; place-content: center; gap: 0; padding: 0 8px; font: inherit; font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums;
    background: var(--n-surface, #fff); color: var(--n-text); box-shadow: inset 0 0 0 1px var(--n-hair); }
  body.neu .n-tk-slot small { font-size: 9.5px; font-weight: 600; max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
  body.neu .n-tk-slot-vorbei { opacity: .35; }
  body.neu .n-tk-slot-belegt.n-kal-rueckruf { background: color-mix(in srgb, #C9D738 35%, #fff); box-shadow: inset 0 -3px 0 #C9D738; }
  body.neu .n-tk-slot-belegt.n-kal-termin { background: color-mix(in srgb, #3F7BD8 16%, #fff); box-shadow: inset 0 -3px 0 #3F7BD8; color: #17407E; }
  body.neu .n-tk-slot-wahl { background: #1E1F10 !important; color: #fff !important; box-shadow: none !important; }
  body.neu .n-tk-tag { height: 34px; }
  body.neu .n-tkal { gap: 10px; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .klappzeile { grid-template-columns: 0.9fr 1.1fr; }
  body.neu .ausgangsklappe.termin:has([data-terminkalender]) .n-klappfuss { padding-bottom: 10px; }
}
@media (max-width: 720px) and (max-height: 720px) { body.neu .n-tk-tag { height: 28px; } }
@media (max-width: 720px) {
  /* Blatt so hoch wie sein Inhalt, unten an der Leiste angedockt */
  body.neu .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]),
  body.neu #tafelrahmen .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
    top: auto !important; max-height: calc(var(--n-vvh, 100dvh) - env(safe-area-inset-top) - 64px - 70px - env(safe-area-inset-bottom));
    border-radius: 24px;
  }
  body.neu.n-tastatur .ergebnisbereich .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) { max-height: calc(var(--n-vvh, 100dvh) - 16px); }
}

/* ── Ortszeit (05.10.2026, Schalter `ortszeit`) ─────────────────────────────
   Nur bei Firmen ausserhalb unserer Zeitzone (tools/ortszeit). Dezent: grau
   wie „Zentrale", orange nur, wenn dort niemand mehr da sein dürfte. */
.ortszeit { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #7a7a72; font-variant-numeric: tabular-nums; }
body.neu .ortszeit b, .ortszeit b { font-size: inherit; font-weight: 600; color: inherit; letter-spacing: 0; }
.ortszeit svg { flex: none; opacity: .7; }
.ortszeit.nacht { color: #b4652a; }
.ortsmond { display: inline-block; width: fit-content; font-size: 11.5px; margin-top: 3px; padding: 1px 8px; border-radius: 99px; background: #eceee6; color: #6b6b63; cursor: help; font-variant-numeric: tabular-nums; }
body.neu .n-tk-tkopf em .n-tk-dort { color: rgba(255, 255, 255, .62); font-weight: 500; margin-left: 6px; }

/* Heute verpasste Rückrufe in „Deine Rückrufe" (05.10.2026) */
body.neu .n-verpasst .n-zeit-mini { color: var(--n-rot); font-weight: 700; }
body.neu .n-verpasst .n-zeile-haupt small { color: var(--n-rot); }
body.neu .n-verpasst { margin-bottom: 10px; }
body.neu .n-verpasst-fuss { margin: 6px 0 0; }

/* ── Seitenübergänge wie in einer App (05.10.2026) ───────────────────────
   Bisher schnitt jeder Tipp hart auf die neue Seite. Jetzt gleitet der
   Inhalt, Kopfzeile und untere Leiste bleiben stehen — wie bei einer
   nativen App. Cross-Document View Transitions: Safari ab 18.2, Chrome ab
   126; ältere Browser schneiden wie bisher, nichts geht kaputt. Gilt nur mit
   `redesign`, weil diese Datei nur dann geladen wird.
   Richtung: `vor` (tiefer hinein), `zurueck` (Wischgeste, ← Link), `tab`
   (untere Leiste: nur Überblenden) — gesetzt in `basis.html`. */
@view-transition { navigation: auto; }
body.neu header.kopf { view-transition-name: n-kopf; }
body.neu .n-tabbar { view-transition-name: n-tabbar; }
::view-transition-group(n-kopf), ::view-transition-group(n-tabbar),
::view-transition-old(n-kopf), ::view-transition-new(n-kopf),
::view-transition-old(n-tabbar), ::view-transition-new(n-tabbar) { animation: none; }
::view-transition-old(n-kopf), ::view-transition-old(n-tabbar) { display: none; }
::view-transition-old(root) { animation: n-vt-raus .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: n-vt-rein .34s cubic-bezier(.16, 1, .3, 1) both; }
html:active-view-transition-type(zurueck)::view-transition-old(root) { animation-name: n-vt-raus-z; }
html:active-view-transition-type(zurueck)::view-transition-new(root) { animation-name: n-vt-rein-z; }
html:active-view-transition-type(tab)::view-transition-old(root) { animation: n-vt-blende-raus .16s ease-out both; }
html:active-view-transition-type(tab)::view-transition-new(root) { animation: n-vt-blende-rein .28s cubic-bezier(.16, 1, .3, 1) both; }
/* Segmentwechsel (14.10.2026): die Glasleiste bleibt stehen, der Chip gleitet
   als eigenes Element zum neuen Segment — der Browser morpht ihn über den
   Seitenwechsel hinweg (Cross-Document View Transition); der Inhalt blendet
   nur über, statt wie bei „vor" seitlich hineinzufahren. */
body.neu .n-segreiter { view-transition-name: n-segreiter; }
::view-transition-group(n-segreiter), ::view-transition-old(n-segreiter), ::view-transition-new(n-segreiter) { animation: none; }
::view-transition-old(n-segreiter) { display: none; }
html:active-view-transition-type(segment)::view-transition-old(root), html.n-vt-segment::view-transition-old(root) { animation: n-vt-blende-raus .12s ease-out both; }
html:active-view-transition-type(segment)::view-transition-new(root), html.n-vt-segment::view-transition-new(root) { animation: n-vt-segment-rein .26s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes n-vt-segment-rein { from { opacity: 0; } }
@keyframes n-vt-raus     { to   { opacity: 0; transform: translateX(-4%); } }
@keyframes n-vt-rein     { from { opacity: 0; transform: translateX(7%); } }
@keyframes n-vt-raus-z   { to   { opacity: 0; transform: translateX(4%); } }
@keyframes n-vt-rein-z   { from { opacity: 0; transform: translateX(-7%); } }
@keyframes n-vt-blende-raus { to   { opacity: 0; } }
@keyframes n-vt-blende-rein { from { opacity: 0; transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Antippen gibt nach: kurz eindrücken statt nur Farbwechsel. Nur bei
   Touch — mit der Maus wäre es ein Wackeln bei jedem Klick. */
@media (hover: none) {
  body.neu :is(.n-kachel, .n-statpills a, .n-zeile, .n-knopf, .n-karte > a, .n-banner, .n-tabbar a, .n-tp-zeile, .anrufzeile, .n-ck-karte, .n-ct-k) {
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), opacity .18s;
    -webkit-tap-highlight-color: transparent;
  }
  body.neu :is(.n-kachel, .n-statpills a, .n-zeile, .n-knopf, .n-karte > a, .n-banner, .n-tp-zeile, .anrufzeile, .n-ck-karte, .n-ct-k):active { transform: scale(.975); opacity: .88; }
  body.neu .n-tabbar a:active { transform: scale(.92); }
}


/* Ladebalken beim Tippen (05.10.2026): sofortige Antwort, bis die neue Seite
   da ist. Läuft schnell auf 70 % und wartet dort — wie bei nativen Apps. */
html.n-laedt body.neu::before {
  content: ""; position: fixed; top: env(safe-area-inset-top, 0); left: 0; height: 3px; width: 100%; z-index: 9999;
  background: linear-gradient(90deg, var(--n-lime), #E4F06A);
  box-shadow: 0 0 10px rgba(201, 215, 56, .7);
  transform-origin: left; animation: n-ladebalken 1.6s cubic-bezier(.08, .8, .2, 1) forwards;
}
html.n-laedt body.neu main { opacity: .72; transition: opacity .2s ease .08s; }
@keyframes n-ladebalken { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@media (prefers-reduced-motion: reduce) { html.n-laedt body.neu::before { animation: none; transform: scaleX(.6); } }

/* Sofortwechsel (`_sofort.js.html`): dieselben Richtungen ohne
   View-Transition-Typen (ältere Safari) über eine Klasse am <html>. */
html.n-vt-zurueck::view-transition-old(root) { animation-name: n-vt-raus-z; }
html.n-vt-zurueck::view-transition-new(root) { animation-name: n-vt-rein-z; }
html.n-vt-tab::view-transition-old(root) { animation: n-vt-blende-raus .16s ease-out both; }
html.n-vt-tab::view-transition-new(root) { animation: n-vt-blende-rein .28s cubic-bezier(.16, 1, .3, 1) both; }

/* Tafel → ganze Leadseite (`_sofort.js.html`, Typ `lead`): Die Tafel, die
   von der Seite kam, wächst zur ganzen Seite auf; der Rest blendet über. */
::view-transition-group(n-lead) { animation-duration: .42s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(n-lead) { animation: n-vt-blende-raus .2s ease-out both; }
::view-transition-new(n-lead) { animation: n-vt-blende-rein .36s cubic-bezier(.16, 1, .3, 1) both; height: 100%; object-fit: cover; object-position: top; }
html.n-vt-lead::view-transition-old(root) { animation: n-vt-blende-raus .2s ease-out both; }
html.n-vt-lead::view-transition-new(root) { animation: n-vt-blende-rein .3s ease-out both; }

/* ── Offene Tafel am Telefon: die Seite dahinter steht (05.10.2026) ──────
   Im Video federte beim Scrollen in der Tafel die Seite dahinter mit:
   Fusszeile unten, POLITIS-Kopf oben, die Leiste rutschte weg. `contain` an
   der Tafel wirkt nur, solange sie selbst scrollen kann — bei einem Lead mit
   wenig Inhalt (Amari) konnte sie es nicht, und iOS gab den Wisch an die
   Seite weiter. Deshalb ist die Tafel immer einen Pixel höher als ihr
   Fenster: Dann kann sie scrollen, behält den Wisch selbst, und `contain`
   greift. Die Seite wird NICHT gesperrt (`overflow: hidden`) — gemessen
   sprang die Liste dahinter dabei auf ganz oben. */
@media (max-width: 720px) {
  html:has(#tafelrahmen[data-an]) { overscroll-behavior: none; }
  body.neu #tafelrahmen[data-an] { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.neu #tafelrahmen[data-an] > #tafel { min-height: calc(100% + 1px); }
}

/* „Versendet? Eintragen" nach „Als E-Mail öffnen" (06.10.2026) */
body.neu .n-mail-frage { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-mail-ok { color: var(--n-text); font-weight: 600; }
body.neu .n-mail-ok::first-letter { color: var(--n-lime); }
body.neu .n-mail-fehler { color: var(--n-rot); }

/* ── Kontaktbuch (06.10.2026, Schalter `kontaktbuch`) ──────────────────── */
body.neu .n-kbu-kopf { margin-bottom: var(--n-3, 16px); }
body.neu .n-kbu-satz { color: var(--n-text-2); margin: 4px 0 0; }
body.neu .n-kbu-meldung { background: var(--n-gruen-bg, rgba(201,215,56,.14)); border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
body.neu .n-kbu-meldung.n-kbu-fehler { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-kbu-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
body.neu .n-kbu-suche { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; background: var(--n-surface-2); }
body.neu .n-kbu-suche input { flex: 1; border: 0; background: transparent; padding: 12px 0; font: inherit; color: inherit; outline: none; }
body.neu .n-kbu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
body.neu .n-kbu-chips .n-chip { cursor: pointer; }
body.neu .n-kbu-zahl { color: var(--n-text-3); font-size: 13px; margin: 0 0 6px; }
body.neu .n-kbu-liste { list-style: none; margin: 0; padding: 0; background: var(--n-surface); border-radius: 18px; overflow: hidden; }
/* Feste Spalten: Person · Firma · Wege — die Wege-Spalte hat eine feste
   Breite, damit die Firmenspalte in jeder Zeile an derselben Stelle beginnt
   (vorher rutschte sie je nach Knopfbreite). */
body.neu .n-kbu-zeile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 232px; gap: 14px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--n-linie, rgba(0,0,0,.06)); transition: background .15s; }
body.neu .n-kbu-zeile:hover { background: var(--n-surface-2); }
body.neu .n-kbu-zeile:first-child { border-top: 0; }
body.neu .n-kbu-zeile-kurz { grid-template-columns: minmax(0, 1fr) 232px; }
body.neu .n-kbu-gesperrt { opacity: .6; }
body.neu .n-kbu-person, body.neu .n-kbu-firma { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
body.neu .n-kbu-firma { flex-direction: column; align-items: flex-start; gap: 0; }
body.neu .n-kbu-wer { display: flex; flex-direction: column; min-width: 0; }
body.neu .n-kbu-wer b, body.neu .n-kbu-firma b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-kbu-wer small, body.neu .n-kbu-firma small { color: var(--n-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-kbu-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-kbu-avatar.n-kbu-t1 { background: rgba(201, 215, 56, .22); color: #4b5410; }
body.neu .n-kbu-avatar.n-kbu-t2 { background: rgba(58, 125, 140, .14); color: #2b5f6b; }
body.neu .n-kbu-avatar.n-kbu-t3 { background: rgba(201, 120, 27, .14); color: #8a4f0c; }
body.neu .n-kbu-avatar.n-kbu-t4 { background: rgba(94, 84, 160, .14); color: #4d4487; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) body.neu .n-kbu-avatar[class*="n-kbu-t"] { color: var(--n-text); } }
:root[data-thema="dunkel"] body.neu .n-kbu-avatar[class*="n-kbu-t"] { color: var(--n-text); }
body.neu .n-kbu-haupt, body.neu .n-kbu-sperre { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--n-gruen-bg, rgba(201,215,56,.18)); color: var(--n-text); vertical-align: 1px; }
body.neu .n-kbu-sperre { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-kbu-wege { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 0; }
body.neu .n-kbu-weg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 12px; background: var(--n-surface-2); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; }
body.neu .n-kbu-zeile:hover .n-kbu-weg:not(.n-kbu-tel) { background: var(--n-surface); }
body.neu .n-kbu-tel { min-width: 176px; justify-content: flex-start; }
body.neu .n-kbu-kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.neu .n-kbu-neu { flex: none; display: inline-flex; align-items: center; gap: 8px; }
body.neu .n-kbu-tel { background: var(--n-lime); color: #1E1F10; font-weight: 600; }
body.neu .n-kbu-ohne { color: var(--n-text-3); opacity: .55; }
body.neu .n-kbu-seiten { display: flex; gap: 16px; justify-content: center; padding: 14px; color: var(--n-text-2); }
body.neu .n-kbu-leer { margin-top: 10px; }
body.neu .n-kbu-zurueck { display: inline-block; margin-bottom: 10px; }
body.neu .n-kbud-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
body.neu .n-kbud-kopf h1 { margin: 0; font-size: 28px; }
body.neu .n-kbud-avatar { width: 56px; height: 56px; font-size: 22px; }
body.neu .n-kbud-unter { margin: 2px 0 0; color: var(--n-text-2); }
body.neu .n-kbud-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
body.neu .n-kbud-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px; margin-bottom: 14px; }
body.neu .n-kbud-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-kbud-form input:not([type=checkbox]) { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--n-linie, rgba(0,0,0,.1)); background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-kbud-breit { grid-column: 1 / -1; }
body.neu .n-kbud-haken { flex-direction: row !important; align-items: center; gap: 8px !important; }
body.neu .n-kbud-fuss { display: flex; gap: 8px; }
body.neu .n-kbud-aktionen, body.neu .n-kbud-firma { padding: 18px; margin-bottom: 14px; }
body.neu .n-kbud-aktionen h3, body.neu .n-kbud-firma h3 { margin: 0 0 10px; font-size: 15px; }
body.neu .n-kbud-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.neu .n-kbud-sperrform { display: flex; gap: 8px; flex: 1 1 320px; }
body.neu .n-kbud-sperrform input { flex: 1; font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--n-linie, rgba(0,0,0,.1)); background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-kbud-loeschen { color: var(--n-rot); }
body.neu .n-kbud-hinweis { margin: 10px 0 0; font-size: 12.5px; color: var(--n-text-3); }
/* In der Tafel */
.n-weitere-kontakte { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--n-linie, rgba(0,0,0,.07)); }
.n-wk-titel { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text-3, #8a8a82); }
.n-weitere-kontakte ul { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.n-weitere-kontakte li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.n-wk-gesperrt { opacity: .55; }
.n-wk-name { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.n-wk-name small { color: var(--n-text-3, #8a8a82); }
.n-wk-tel { flex: none; padding: 6px 10px; border-radius: 10px; background: var(--n-surface-2, #f1f1ec); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.n-wk-fuss { margin: 4px 0 0; font-size: 13px; }
.n-wk-fuss a { color: var(--n-text-2, #55554f); }

/* ── Zurück-Link oben links: ein Standard für jede Seite (06.10.2026) ──
   Grün ist immer das SSC-Grün (`--n-lime`, #C9D738). Als Schrift auf hellem
   Grund wäre es unlesbar — deshalb trägt der Pfeil einen runden Knopf in
   SSC-Grün, und der Seitenname steht in Textfarbe daneben. */
body.neu main > a.n-zurueck-std {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 2px 10px 2px 0;
  color: var(--n-text); font-weight: 600; font-size: 15px; text-decoration: none;
  max-width: calc(100% - 20px); border-radius: 999px;
}
body.neu main > a.n-zurueck-std svg {
  flex: none; width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 50%;
  background: var(--n-lime); color: #1E1F10; transition: transform .15s;
}
body.neu main > a.n-zurueck-std span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu main > a.n-zurueck-std:hover svg { transform: translateX(-2px); }

/* Kontaktbuch am Telefon (06.10.2026): Name und Knöpfe oben, Firma darunter
   über die ganze Breite — vorher lief die Firma unter den Mail-Knopf und die
   Namen wurden abgeschnitten. */
body.neu .n-kbu-platzhalter { font-style: italic; color: var(--n-text-3); font-weight: 500; }
@media (max-width: 720px) {
  body.neu .n-kbu-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person wege" "firma firma"; row-gap: 6px; padding: 14px; }
  body.neu .n-kbu-zeile-kurz { grid-template-areas: "person wege"; }
  body.neu .n-kbu-person { grid-area: person; align-items: flex-start; }
  body.neu .n-kbu-wege { grid-area: wege; align-self: start; }
  body.neu .n-kbu-firma { grid-area: firma; padding-left: 46px; }
  body.neu .n-kbu-wer b, body.neu .n-kbu-firma b { white-space: normal; overflow: visible; }
  body.neu .n-kbu-wer small { white-space: normal; }
  body.neu .n-kbu-tel span { display: none; }
  body.neu .n-kbu-tel { min-width: 38px; justify-content: center; }
  body.neu .n-kbu-zeile-kurz { grid-template-columns: minmax(0, 1fr) auto; }
  body.neu .n-kbud-form { grid-template-columns: 1fr; }
}

/* Warnung beim teuersten Antwortmodus (06.10.2026) */
body.neu .chatmodell-warnung { display: block; margin-top: 4px; font-size: 12px; color: var(--n-rot); }

/* Chat-Antworten wie in der Claude-App (06.10.2026): Überschriften, Tabellen, Zitate, Code */
body.neu .chatsystem h3 { font-size: 16px; margin: 14px 0 6px; }
body.neu .chatsystem h4 { font-size: 14.5px; margin: 12px 0 4px; }
body.neu .chatsystem ol { padding-left: 22px; margin: 6px 0; }
body.neu .chatsystem table.chattabelle { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13.5px; }
body.neu .chatsystem table.chattabelle th, body.neu .chatsystem table.chattabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--n-linie, rgba(0,0,0,.08)); vertical-align: top; }
body.neu .chatsystem table.chattabelle th { color: var(--n-text-2); font-weight: 600; }
body.neu .chatsystem blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--n-lime); color: var(--n-text-2); }
body.neu .chatsystem pre { background: var(--n-surface-2); border-radius: 10px; padding: 10px 12px; overflow-x: auto; font-size: 13px; }
body.neu .chatsystem hr { border: 0; border-top: 1px solid var(--n-linie, rgba(0,0,0,.08)); margin: 10px 0; }
body.neu .chatsystem a { color: inherit; text-decoration: underline; }

/* Neuer Lead von Hand (07.10.2026) */
body.neu .n-ln-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 18px; }
body.neu .n-ln-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-ln-form input, body.neu .n-ln-form select, body.neu .n-ln-form textarea { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--n-linie, rgba(0,0,0,.1)); background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-ln-form textarea { min-height: 70px; resize: vertical; }
body.neu .n-ln-breit { grid-column: 1 / -1; }
body.neu .n-ln-titel { grid-column: 1 / -1; margin: 6px 0 -4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-ln-fuss { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.neu .n-ln-hinweis { margin: 0 0 12px; color: var(--n-text-2); }
@media (max-width: 720px) { body.neu .n-ln-form { grid-template-columns: 1fr; } }

/* ── Chat: Leisten über dem Verlauf (Rückmeldung 07.10.2026) ────────────────
   Kopf- und Eingabeleiste lagen als eigene Blöcke über und unter dem Verlauf;
   der Text wurde an ihrer Kante hart abgeschnitten, und die Leisten sahen aus
   wie Bänder. Jetzt liegen beide ÜBER dem Verlauf: oben ganz durchsichtig
   (nur die Pillen haben Glas), unten ein weicher Verlauf ins Papier, damit
   die Eingabe lesbar bleibt und das Ringmuster dahinter sichtbar. Der Verlauf
   bekommt oben und unten so viel Rand, wie die Leisten hoch sind — die
   Fusshöhe misst `chat.html`, weil sie mit Antwortmodus und Warnung wächst. */
body.neu .chathaupt { --n-chatkopf-h: 60px; --n-chatfuss-h: 180px; }
body.neu .chathaupt .chatseitenkopf { position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none; }
body.neu .chathaupt .chatseitenkopf > * { pointer-events: auto; }
body.neu .chathaupt .chatverlauf { padding-top: var(--n-chatkopf-h); padding-bottom: calc(var(--n-chatfuss-h) + 12px); }
body.neu .chathaupt .chatfuss {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--n-bg) 86%, transparent) 26%, color-mix(in srgb, var(--n-bg) 94%, transparent) 100%);
}
body.neu .chathaupt .chatfuss .chateingabe { -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); background: color-mix(in srgb, var(--n-surface) 88%, transparent); }

/* Streckenkarte: Zwischenziele und der Maps-Knopf (07.10.2026) */
/* Eigene Keyframes mit `to`: `n-strecke-ein` hat nur `from`, und mit
   `forwards` bliebe ein Element, das selbst `opacity: 0` trägt, unsichtbar. */
@keyframes n-strecke-via-ein { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes n-strecke-via-name { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
body.neu .n-strecke-via { opacity: 0; animation: n-strecke-via-ein .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--verz, 0s) + .15s) forwards; z-index: 1; }
body.neu .n-strecke-name.n-via { margin-top: -26px; opacity: 0; animation: n-strecke-via-name .4s ease calc(var(--verz, 0s) + .15s) forwards; }
body.neu .chatkarte-route .handlungja, body.neu .chatkarte-route .handlungja:hover { text-decoration: none; }

/* Zahl am Eintrag „Tutorials" — so viele neue Videos hat dieses Gerät noch nicht geöffnet (07.10.2026) */
.n-neu-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
  font-size: 11px; font-weight: 750; line-height: 1; background: #E5484D; color: #fff; vertical-align: middle; }
.n-neu-zahl[hidden] { display: none; }

/* ── CRM-Pipeline (Zusatzmodul „CRM & Abschluss", 12.10.2026) ─────────────────
   Klassisches CRM-Kanban im Politis-Bild: über die ganze Breite, Spalten mit
   Ampelbalken und Summe, Karten mit Umsatz, Sternen und Aktivitätsampel. Die
   Farbe der Phase (n-f-*) steht nur am Kopfstrich; die Karte bleibt weiss,
   damit die Firma das Lauteste ist. */
body.neu main:has(> .n-pl-voll) { max-width: none; padding-inline: clamp(16px, 2.4vw, 32px); }
body.neu .n-pl-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
body.neu .n-pl-gesamt { margin: 6px 0 0; color: var(--n-text-2); font-variant-numeric: tabular-nums; }
body.neu .n-pl-gesamt b { color: var(--n-text); }
body.neu .n-pl-werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 520px; justify-content: flex-end; }
body.neu .n-pl-suche { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px; height: 40px; padding: 0 12px;
  border-radius: 12px; background: var(--n-surface); box-shadow: var(--n-schatten); color: var(--n-text-3); }
body.neu .n-pl-suche input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--n-text); width: 100%; min-width: 0; }
body.neu .n-pl-filter { display: flex; gap: 6px; flex-wrap: wrap; }
body.neu .n-pl-neu { display: inline-flex; align-items: center; gap: 8px; height: 40px; }
body.neu .n-pl-zahnrad { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--n-text-2); text-decoration: none; font-size: 18px; box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-pl-zahnrad:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-pl-meldung { margin: 0; padding: 10px 14px; border-radius: var(--n-r-s); background: var(--n-gruen-bg); color: var(--n-text); font-size: 14px; }
body.neu .n-pl-meldung.n-pl-fehler { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-pl-brett {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 16px;
  overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x proximity; align-items: start;
}
body.neu .n-pl-spalte {
  scroll-snap-align: start; background: var(--n-surface-2); border-radius: var(--n-r-l); padding: 14px 12px 12px;
  box-shadow: inset 0 3px 0 var(--f); min-height: 220px; transition: background .15s ease, box-shadow .15s ease;
}
body.neu .n-pl-spaltenkopf { display: flex; align-items: center; gap: 8px; padding: 0 4px; min-height: 30px; }
body.neu .n-pl-spaltenkopf h2 { margin: 0; flex: 1; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--n-text); overflow-wrap: anywhere; }
body.neu .n-pl-plus { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--n-text-2); }
body.neu .n-pl-plus:hover, body.neu .n-pl-plus:focus-visible { background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten); }
body.neu .n-pl-balkenzeile { display: flex; align-items: center; gap: 10px; padding: 8px 4px 2px; }
body.neu .n-pl-balken { flex: 1; display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--n-hair); }
body.neu .n-pl-balken i { flex-basis: 0; min-width: 0; }
body.neu .n-pl-b-geplant { background: #3FA34D; }
body.neu .n-pl-b-heute { background: var(--n-orange); }
body.neu .n-pl-b-ueberfaellig { background: var(--n-rot); }
body.neu .n-pl-b-keine { background: transparent; }
body.neu .n-pl-summe { font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--n-text); white-space: nowrap; }
body.neu .n-pl-hinweis { margin: 2px 4px 12px; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-pl-karten { display: flex; flex-direction: column; gap: 10px; min-height: 48px; }
body.neu .n-pl-leer { margin: 6px 4px; font-size: 13px; color: var(--n-text-3); }
body.neu .n-pl-karte {
  background: var(--n-surface); border-radius: 14px; padding: 12px 14px 10px; box-shadow: var(--n-schatten);
  cursor: grab; display: flex; flex-direction: column; gap: 4px; position: relative;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
body.neu .n-pl-karte[hidden] { display: none; }
body.neu .n-pl-karte:hover { box-shadow: var(--n-schatten-hoch); transform: translateY(-1px); }
body.neu .n-pl-karte.n-pl-gezogen { opacity: .45; }
body.neu .n-pl-karte.n-pl-wartet { opacity: .6; pointer-events: none; }
body.neu .n-pl-karte.n-pl-neu { box-shadow: 0 0 0 2px var(--n-lime), var(--n-schatten-hoch); }
body.neu .n-pl-firma { all: unset; cursor: pointer; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--n-text); overflow-wrap: anywhere; }
body.neu .n-pl-firma:hover { text-decoration: underline; text-decoration-color: var(--n-lime); text-underline-offset: 3px; }
body.neu .n-pl-firma:focus-visible, body.neu .n-pl-wert:focus-visible { outline: 2px solid var(--n-lime); outline-offset: 2px; border-radius: 4px; }
body.neu .n-pl-wert { all: unset; cursor: pointer; align-self: flex-start; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--n-text); }
body.neu .n-pl-wert.n-leer { font-weight: 500; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-pl-wert:hover { color: var(--n-oliv-text); }
body.neu .n-pl-wertfeld { font: inherit; font-size: 14px; width: 140px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--n-lime); background: var(--n-bg); color: var(--n-text); }
body.neu .n-pl-wer { margin: 0; font-size: 13px; color: var(--n-text-2); overflow-wrap: anywhere; }
body.neu .n-pl-fuss { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--n-text-3); }
body.neu .n-pl-sterne { display: inline-flex; }
body.neu .n-pl-sterne button { all: unset; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 1px; color: var(--n-hair-2, #D6D6D0); }
body.neu .n-pl-sterne button.n-an { color: #F2B705; }
body.neu .n-pl-sterne button:hover { transform: scale(1.15); }
body.neu .n-pl-akt { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
body.neu .n-pl-a-keine { color: var(--n-text-3); }
body.neu .n-pl-a-geplant { color: #fff; background: #3FA34D; }
body.neu .n-pl-a-heute { color: #fff; background: var(--n-orange); }
body.neu .n-pl-a-ueberfaellig { color: #fff; background: var(--n-rot); }
body.neu .n-pl-score { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--n-lime); color: #1E1F10; font-weight: 750; font-variant-numeric: tabular-nums; }
body.neu .n-pl-seit { font-variant-numeric: tabular-nums; }
body.neu .n-pl-menue { margin-left: auto; position: relative; }
body.neu .n-pl-menue > summary { list-style: none; cursor: pointer; width: 28px; height: 24px; display: grid; place-items: center;
  border-radius: 7px; color: var(--n-text-2); font-size: 14px; }
body.neu .n-pl-menue > summary::-webkit-details-marker { display: none; }
body.neu .n-pl-menue > summary:hover, body.neu .n-pl-menue[open] > summary { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-pl-menueinhalt {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px; padding: 6px;
  background: var(--n-surface); border-radius: 12px; box-shadow: var(--n-schatten-hoch); display: flex; flex-direction: column;
}
body.neu .n-pl-menueinhalt small { padding: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-pl-menueinhalt button, body.neu .n-pl-menueinhalt a { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--n-text); }
body.neu .n-pl-menueinhalt button:hover, body.neu .n-pl-menueinhalt button:focus-visible, body.neu .n-pl-menueinhalt a:hover { background: var(--n-surface-2); }
body.neu .n-pl-menueinhalt button:disabled { color: var(--n-text-3); cursor: default; background: none; }
body.neu .n-pl-menueinhalt a { border-top: 1px solid var(--n-hair); border-radius: 0; margin-top: 4px; }
body.neu .n-pl-menueinhalt .n-pl-verloren-knopf { color: var(--n-rot); }
/* Schnellanlage oben in der Spalte */
body.neu .n-pl-schnell { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 12px; border-radius: 14px; background: var(--n-surface); box-shadow: 0 0 0 2px var(--n-lime), var(--n-schatten); }
body.neu .n-pl-schnell[hidden] { display: none; }
body.neu .n-pl-schnell input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--n-hair); background: var(--n-bg); color: var(--n-text); min-width: 0; width: 100%; box-sizing: border-box; }
body.neu .n-pl-schnell input[name=firma] { font-weight: 600; }
body.neu .n-pl-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.neu .n-pl-schnellknoepfe { display: flex; gap: 6px; margin-top: 2px; }
/* Ziehen: Ziele leuchten auf, die Ablage „verloren" erscheint erst dann */
body.neu .n-pl-spalte.n-pl-ueber { background: color-mix(in srgb, var(--n-lime) 22%, var(--n-surface-2)); box-shadow: inset 0 3px 0 var(--f), 0 0 0 2px var(--n-lime); }
body.neu .n-pl-ablage {
  display: none; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: var(--n-r);
  border: 2px dashed var(--n-rot); color: var(--n-rot); background: var(--n-rot-bg); font-weight: 600; font-size: 14px;
  position: sticky; bottom: 16px; z-index: 5;
}
body.neu.n-pl-zieht .n-pl-ablage { display: flex; }
body.neu .n-pl-ablage.n-pl-ueber { background: color-mix(in srgb, var(--n-rot) 22%, var(--n-surface)); }
/* Dialog „verloren" (auch für „Bereich anpassen" benutzt) */
body.neu .n-pl-dialog { border: 0; border-radius: var(--n-r-l); padding: 20px; width: min(480px, calc(100vw - 32px)); background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten-hoch); }
body.neu .n-pl-dialog::backdrop { background: rgba(20, 20, 18, .35); }
body.neu .n-pl-dialog h2 { margin: 0 0 4px; font-size: 18px; text-transform: none; letter-spacing: -.01em; color: var(--n-text); }
body.neu .n-pl-dialogsatz { margin: 0 0 12px; color: var(--n-text-2); }
body.neu .n-pl-gruende { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-pl-gruende legend { font-size: 13px; color: var(--n-text-2); margin-bottom: 6px; }
body.neu .n-pl-notiz { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-pl-notiz input { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: var(--n-r-s); border: 1px solid var(--n-hair); background: var(--n-bg); color: var(--n-text); }
body.neu .n-pl-dialogknoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
body.neu .n-pl-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--f); flex: none; }
@media (max-width: 720px) {
  body.neu .n-pl-brett { grid-auto-columns: 86%; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  body.neu .n-pl-karte { cursor: default; }
  body.neu .n-pl-werkzeuge { justify-content: stretch; }
  body.neu .n-pl-suche { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { body.neu .n-pl-karte, body.neu .n-pl-spalte { transition: none; } }

/* ── Kanban, Runde 2 (12.10.2026): Brett in Fensterhöhe, Spalten scrollen
   für sich, Ziehen mit Zeiger statt HTML5-DnD, Phasenleiste als Navigation
   und Ablage, Fokusansicht einer Phase. Steht hinter den älteren Regeln und
   gewinnt deshalb bei gleicher Spezifität. */
body.neu .n-pl-voll { display: flex; flex-direction: column; gap: 10px; }
/* Eine Arbeitsfläche, keine Seite: kein Seitenfuss, kein Leerraum darunter —
   sonst scrollt das Fenster um die Höhe des Fusses mit. */

body.neu .n-pl-zurueck { color: inherit; text-decoration: none; }
body.neu .n-pl-zurueck::before { content: "‹ "; }
body.neu .n-pl-zurueck:hover { color: var(--n-text); }
body.neu .n-pl-phasen { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; }
body.neu .n-pl-phasen::-webkit-scrollbar { display: none; }
body.neu .n-pl-ph { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  color: var(--n-text-2); text-decoration: none; background: var(--n-surface); box-shadow: var(--n-schatten); transition: background .12s ease, box-shadow .12s ease, transform .12s ease; }
body.neu .n-pl-ph b { font-weight: 700; font-size: 12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--n-surface-2); color: var(--n-text-2); font-variant-numeric: tabular-nums; }
body.neu .n-pl-ph:hover { color: var(--n-text); }
body.neu .n-pl-ph.n-an { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
body.neu .n-pl-ph.n-an b { background: rgba(30, 31, 16, .12); color: #1E1F10; }
body.neu.n-pl-zieht .n-pl-ph[data-ziehbar="1"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--n-lime) 70%, transparent); }
body.neu .n-pl-ph.n-pl-ueber { background: var(--n-lime); color: #1E1F10; transform: scale(1.06); }
body.neu .n-pl-brett { align-items: start; overflow-x: auto; overflow-y: visible; padding: 2px 2px 16px; scroll-snap-type: none; }
body.neu .n-pl-brett.n-pl-schiebt { cursor: grabbing; user-select: none; }
body.neu .n-pl-spalte { display: flex; flex-direction: column; padding: 12px 10px 12px; }
body.neu .n-pl-spaltenkopfbereich { flex: none; padding-right: 2px; }
body.neu .n-pl-spaltenkopf h2 a { color: inherit; text-decoration: none; }
body.neu .n-pl-spaltenkopf h2 a:hover { text-decoration: underline; text-decoration-color: var(--n-lime); text-underline-offset: 3px; }
body.neu .n-pl-zahl { font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--n-surface); color: var(--n-text-2); font-variant-numeric: tabular-nums; }
body.neu .n-pl-hinweis { margin-bottom: 8px; }
body.neu .n-pl-balkenzeile { padding-bottom: 8px; }
body.neu .n-pl-karten { padding: 2px 2px 6px; }
body.neu .n-pl-karte { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; flex: none; }
body.neu .n-pl-karte:hover { transform: none; }
body.neu .n-pl-akt { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
body.neu .n-pl-akt.n-pl-a-keine { color: var(--n-text-3); }
body.neu .n-pl-akt.n-pl-a-keine:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-pl-akt.n-pl-a-geplant { color: #fff; background: #3FA34D; }
body.neu .n-pl-akt.n-pl-a-heute { color: #fff; background: var(--n-orange); }
body.neu .n-pl-akt.n-pl-a-ueberfaellig { color: #fff; background: var(--n-rot); }
body.neu .n-pl-akt:focus-visible { outline: 2px solid var(--n-lime); outline-offset: 2px; }
body.neu .n-pl-menue > summary { font-size: 18px; letter-spacing: 1px; }
body.neu .n-pl-menueinhalt hr { border: 0; border-top: 1px solid var(--n-hair); margin: 4px 0; }
body.neu .n-pl-menueinhalt a { border-top: 0; margin-top: 0; }
/* Ziehen */
body.neu .n-pl-geist { position: fixed !important; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing;
  box-shadow: 0 0 0 2px var(--n-lime), 0 18px 40px rgba(20, 20, 18, .22), 0 4px 10px rgba(20, 20, 18, .12); will-change: transform; }
body.neu .n-pl-karte.n-pl-platz { background: color-mix(in srgb, var(--n-lime) 14%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--n-lime) 80%, transparent); }
body.neu .n-pl-karte.n-pl-platz > * { visibility: hidden; }
body.neu.n-pl-zieht, body.neu.n-pl-zieht * { cursor: grabbing !important; user-select: none !important; }
body.neu .n-pl-spalte.n-pl-ueber { background: color-mix(in srgb, var(--n-lime) 14%, var(--n-surface-2)); box-shadow: inset 0 3px 0 var(--f); }
body.neu .n-pl-karte.n-pl-gelandet { animation: n-pl-landen .9s ease; }
@keyframes n-pl-landen { 0% { box-shadow: 0 0 0 3px var(--n-lime), var(--n-schatten-hoch); } 100% { box-shadow: var(--n-schatten); } }
body.neu .n-pl-ablage { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); z-index: 900; box-shadow: var(--n-schatten-hoch); }
body.neu .n-pl-leer { padding: 18px 8px; text-align: center; border-radius: 12px; border: 1.5px dashed var(--n-hair-2, #D6D6D0); }
/* Fokusansicht: eine Phase als Raster */
body.neu .n-pl-brett.n-pl-fokus { display: block; }
body.neu .n-pl-fokus .n-pl-spalte { min-height: 60vh; box-sizing: border-box; padding: 14px 14px 16px; }
body.neu .n-pl-fokus .n-pl-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; gap: 12px; }
body.neu .n-pl-fokus .n-pl-schnell { max-width: 560px; }
/* Schnellanlage: Treffer aus Bestand und Kontaktbuch */
body.neu .n-pl-treffer { font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 9px; background: var(--n-surface-2); color: var(--n-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.neu .n-pl-treffer[hidden] { display: none; }
body.neu .n-pl-treffer b { color: var(--n-text); }
body.neu .n-pl-treffer .n-knopf { height: 30px; padding: 0 10px; font-size: 13px; }
body.neu .n-pl-schnellhinweis { font-size: 12px; color: var(--n-text-3); }
body.neu .n-pl-schnell .n-vs input { width: 100%; box-sizing: border-box; }
@media (max-width: 720px) {
  body.neu .n-pl-brett { grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  body.neu .n-pl-spalte { scroll-snap-align: center; }
  body.neu .n-pl-fokus .n-pl-karten { grid-template-columns: 1fr; }
  body.neu .n-pl-kopf .n-pl-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) { body.neu .n-pl-karte.n-pl-gelandet { animation: none; } }

/* Pipeline einstellen (Einstellungen → CRM-Pipeline) */
body.neu .n-pl-einst { margin-top: 28px; }
body.neu .n-pl-einstliste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
body.neu .n-pl-einstzeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .n-pl-einstzeile.n-aus { background: transparent; box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-pl-einstzeile.n-aus .n-pl-einstname input { color: var(--n-text-3); }
body.neu .n-pl-wahl { display: flex; align-items: center; gap: 10px; cursor: pointer; }
body.neu .n-pl-wahl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--n-lime); }
body.neu .n-pl-einstname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.neu .n-pl-einstname input { font: inherit; font-size: 15px; font-weight: 600; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--n-text); width: 100%; }
body.neu .n-pl-einstname input:hover, body.neu .n-pl-einstname input:focus { border-color: var(--n-hair); background: var(--n-bg); outline: none; }
body.neu .n-pl-einstname small { padding-left: 8px; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-pl-einstpfeile { display: flex; gap: 4px; }
body.neu .n-pl-einstpfeile button { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--n-text-2); }
body.neu .n-pl-einstpfeile button:hover, body.neu .n-pl-einstpfeile button:focus-visible { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-pl-einstknoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

body.neu .n-pl-suche input, body.neu .n-pl-suche input:focus { border: 0 !important; box-shadow: none !important; padding: 0; height: auto; background: transparent; }
body.neu .n-pl-suche:focus-within { box-shadow: 0 0 0 2px var(--n-lime), var(--n-schatten); }

/* Hauptkalender (CRM): Nachfassen als dritte Art, Überfälliges obenauf */
body.neu .n-kal { --kal-nf: #E0812E; --kal-nf-text: #7A3B08; }
body.neu .n-kal-punkt.n-kal-nachfassen { background: var(--kal-nf); }
body.neu .n-kal-e.n-kal-nachfassen { background: color-mix(in srgb, var(--kal-nf) 16%, var(--n-surface, #fff)); color: var(--kal-nf-text); box-shadow: inset 3px 0 0 var(--kal-nf); }
body.neu .n-kal-agzeile.n-kal-nachfassen { background: color-mix(in srgb, var(--kal-nf) 10%, transparent); box-shadow: inset 3px 0 0 var(--kal-nf); }
body.neu .n-kal-crm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--n-lime); color: #1E1F10; font-weight: 600; font-size: 13.5px; text-decoration: none; }
body.neu .n-kal-ueber { margin: 0 0 12px; border-radius: var(--n-r); background: var(--n-rot-bg); padding: 10px 14px; }
body.neu .n-kal-ueber > summary { cursor: pointer; color: var(--n-rot); font-weight: 600; }
body.neu .n-kal-ueberliste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.neu .n-kal-ueberliste a { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--n-surface); box-shadow: var(--n-schatten); text-decoration: none; color: var(--n-text); min-width: 180px; }
body.neu .n-kal-ueberliste small { color: var(--n-text-3); font-size: 12px; }
body.neu .n-kal-mehr { align-self: center; color: var(--n-text-2); font-size: 13px; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) body.neu .n-kal { --kal-nf: #F0994F; --kal-nf-text: #FFC89B; } }
:root[data-thema="dunkel"] body.neu .n-kal { --kal-nf: #F0994F; --kal-nf-text: #FFC89B; }
body.neu .n-kal-zeigen { font-weight: 500; color: var(--n-text-2); margin-left: 6px; } body.neu .n-kal-ueber[open] .n-kal-zeigen { display: none; }

/* ── CRM-Bereich als Widgets (Modul „CRM & Abschluss", 12.10.2026) ─────────────
   Wie am iPhone: ein Raster aus höchstens vier Widgets, „+" öffnet die
   Galerie, „Bearbeiten" zeigt das Minus und lässt umsortieren (Wackeln). */
body.neu .n-wg { display: grid; gap: var(--n-2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.neu .n-wg ~ .n-kacheln, body.neu .n-wg-leiste ~ .n-kacheln { display: none; }
body.neu .n-wg-feld { position: relative; min-width: 0; }
body.neu .n-wg-feld > a { height: 100%; }
body.neu .n-wg-crm, body.neu .n-wg-kal {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; min-height: 184px; height: 100%;
  box-sizing: border-box; border-radius: var(--n-r-l); box-shadow: var(--n-schatten); text-decoration: none; color: var(--n-text);
  background: linear-gradient(160deg, var(--f-bg), var(--n-surface) 62%);
  transition: transform .4s var(--n-feder), box-shadow .2s ease;
}
body.neu .n-wg-crm:hover, body.neu .n-wg-kal:hover { transform: translateY(-3px); box-shadow: var(--n-schatten-hoch); }
body.neu .n-wg-gross { margin-top: 6px; font-size: 15px; color: var(--n-text-2); }
body.neu .n-wg-gross b { font-size: 40px; font-weight: 750; letter-spacing: -.03em; color: var(--n-text); margin-right: 4px; font-variant-numeric: tabular-nums; }
body.neu .n-wg-euro { font-weight: 650; font-variant-numeric: tabular-nums; }
body.neu .n-wg-phasen { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--n-hair); margin-top: 4px; }
body.neu .n-wg-phasen i { flex-basis: 0; min-width: 0; background: var(--f); }
body.neu .n-wg-zeilen { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-wg-zeilen span { display: inline-flex; align-items: center; gap: 6px; }
body.neu .n-wg-p { width: 8px; height: 8px; border-radius: 50%; }
body.neu .n-wg-p-rr { background: #C9D738; } body.neu .n-wg-p-t { background: #3F7BD8; } body.neu .n-wg-p-nf { background: #E0812E; }
body.neu .n-wg-rot { color: var(--n-rot); font-weight: 600; }
body.neu .n-wg-crm .n-kachel-cta, body.neu .n-wg-kal .n-kachel-cta { margin-top: auto; }
/* „+" — eine gestrichelte Fläche in Widget-Grösse */
body.neu .n-wg-plus {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 184px; border-radius: var(--n-r-l);
  border: 2px dashed color-mix(in srgb, var(--n-text-3) 45%, transparent); color: var(--n-text-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px;
  font-weight: 600; font-size: 14.5px; transition: background .15s ease, border-color .15s ease;
}
body.neu .n-wg-plus:hover, body.neu .n-wg-plus:focus-visible { background: color-mix(in srgb, var(--n-lime) 14%, transparent); border-color: var(--n-lime); color: var(--n-text); }
body.neu .n-wg-plus small { font-weight: 500; font-size: 12.5px; color: var(--n-text-3); max-width: 28ch; }
body.neu .n-wg-plus-kreis { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; background: var(--n-lime); color: #1E1F10; box-shadow: 0 6px 16px rgba(160, 175, 20, .35); }
body.neu .n-wg:has(> .n-wg-plus:only-child) { grid-template-columns: minmax(0, 1fr); }
body.neu .n-wg > .n-wg-plus:only-child { min-height: 150px; }
body.neu .n-wg-leiste { display: flex; justify-content: flex-end; margin-top: 10px; }
body.neu .n-wg-bearbeiten { all: unset; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--n-text-2); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-wg-bearbeiten[aria-pressed="true"] { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
/* Bearbeiten: Minus oben links, leichtes Wackeln, ziehbar */
body.neu .n-wg-weg { display: none; position: absolute; top: -8px; left: -8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--n-text-2); color: var(--n-surface); font-size: 18px; font-weight: 800; line-height: 1; box-shadow: var(--n-schatten-hoch); }
body.neu .n-wg-edit .n-wg-weg { display: grid; place-items: center; }
body.neu .n-wg-edit .n-wg-feld { cursor: grab; animation: n-wg-wackeln .32s ease-in-out infinite alternate; }
body.neu .n-wg-edit .n-wg-feld:nth-child(2n) { animation-delay: -.16s; }
@keyframes n-wg-wackeln { from { transform: rotate(-.9deg); } to { transform: rotate(.9deg); } }
@media (prefers-reduced-motion: reduce) { body.neu .n-wg-edit .n-wg-feld { animation: none; } }
/* Galerie */
body.neu .n-wg-galerie { border: 0; border-radius: 24px; padding: 20px; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: color-mix(in srgb, var(--n-surface) 92%, transparent); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  color: var(--n-text); box-shadow: var(--n-schatten-hoch); overflow: auto; }
body.neu .n-wg-galerie::backdrop { background: rgba(20, 20, 18, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.neu .n-wg-galeriekopf { display: flex; align-items: center; justify-content: space-between; }
body.neu .n-wg-galeriekopf h2 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: -.01em; color: var(--n-text); }
body.neu .n-wg-zu { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-wg-galeriesatz { margin: 6px 0 16px; color: var(--n-text-2); }
body.neu .n-wg-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
body.neu .n-wg-option { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 20px; transition: background .15s ease; }
body.neu .n-wg-option:hover, body.neu .n-wg-option:focus-visible { background: color-mix(in srgb, var(--n-lime) 14%, transparent); }
body.neu .n-wg-option > b { font-size: 14.5px; padding: 6px 4px 0; }
body.neu .n-wg-option > small { font-size: 12.5px; color: var(--n-text-3); padding: 0 4px; }
body.neu .n-wg-vorschau { pointer-events: none; display: block; }
body.neu .n-wg-vorschau > a { min-height: 160px; }
@media (max-width: 900px) { body.neu .n-wg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* „Heute“ zählt nicht zu den vier: Mit ihm stehen fünf nebeneinander, wo der Platz reicht. */
@media (min-width: 1200px) { body.neu .n-wg:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 480px) { body.neu .n-wg-auswahl { grid-template-columns: 1fr 1fr; gap: 10px; } body.neu .n-wg-vorschau > a { min-height: 140px; } }
body.neu .n-wg.n-wg-edit { padding: 10px 0 0 10px; margin: -10px 0 0 -10px; }
/* „Ins CRM" / „CRM · Phase" im Kopf von Tafel und Leadseite */
body.neu .n-crmknopf { text-decoration: none; }
body.neu .n-crmknopf:not(.n-im-crm) { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
body.neu .n-crmknopf.n-im-crm { color: var(--n-oliv-text); }
body.neu .n-ln-crm { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--n-gruen-bg); } body.neu .n-ln-crm input { width: 18px; height: 18px; accent-color: var(--n-lime); }

/* ── CRM-Block in Tafel und Leadseite (12.10.2026) ───────────────────────────
   Phase als Stufenleiste, darunter Wert und nächste Schritte. Der aktuelle
   Schritt trägt SSC-Grün als Fläche mit dunkler Schrift (nie Grün als Schrift
   auf Weiss). Alle Knöpfe ohne Formular — der Block steht im Anrufformular. */
body.neu .n-crm { margin: 4px 0 18px; padding: 16px; border-radius: var(--n-r); background: var(--n-surface); box-shadow: var(--n-schatten); display: flex; flex-direction: column; gap: 14px; }
body.neu .n-crm-kopf { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
body.neu .n-crm-kopf h3 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -.01em; text-transform: none; color: var(--n-text); display: flex; align-items: center; gap: 8px; }
body.neu .n-crm-phase { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--f-bg, var(--n-surface-2)); color: var(--n-text); box-shadow: inset 0 0 0 1px var(--f, var(--n-hair)); }
body.neu .n-crm-kopf small { color: var(--n-text-3); font-size: 12.5px; }
body.neu .n-crm-zur { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--n-text-2); text-decoration: none; }
body.neu .n-crm-zur:hover { color: var(--n-text); text-decoration: underline; text-decoration-color: var(--n-lime); text-underline-offset: 3px; }
body.neu .n-crm-stufen { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; scroll-snap-type: x proximity; }
body.neu .n-crm-stufen::-webkit-scrollbar { display: none; }
body.neu .n-crm-stufe { all: unset; cursor: pointer; scroll-snap-align: start; flex: 0 0 auto; position: relative; padding: 8px 14px 8px 18px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--n-text-2); background: var(--n-surface-2);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); transition: background .15s ease, color .15s ease; }
body.neu .n-crm-stufe:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); padding-left: 14px; border-radius: 10px 0 0 10px; }
body.neu .n-crm-stufe.n-vorbei { background: color-mix(in srgb, var(--n-lime) 26%, var(--n-surface-2)); color: var(--n-text); }
body.neu .n-crm-stufe.n-ist { background: var(--n-lime); color: #1E1F10; font-weight: 750; cursor: default; }
body.neu .n-crm-stufe:not(.n-ist):not(:disabled):hover { background: color-mix(in srgb, var(--n-lime) 45%, var(--n-surface-2)); color: #1E1F10; }
body.neu .n-crm-stufe:focus-visible { outline: 2px solid var(--n-text); outline-offset: -2px; }
body.neu .n-crm-stufe:disabled { opacity: .45; cursor: not-allowed; }
body.neu .n-crm-stufe.n-wartet { animation: n-crm-puls .8s ease-in-out infinite alternate; }
@keyframes n-crm-puls { from { opacity: 1; } to { opacity: .5; } }
body.neu .n-crm-stufe.n-crm-verloren { clip-path: none; border-radius: 10px; margin-left: 6px; padding-left: 14px; background: transparent; color: var(--n-rot); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n-rot) 40%, transparent); }
body.neu .n-crm-stufe.n-crm-verloren:hover { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-crm-verlorenwahl { padding: 12px; border-radius: 12px; background: var(--n-rot-bg); display: flex; flex-direction: column; gap: 8px; }
body.neu .n-crm-verlorenwahl[hidden] { display: none; }
body.neu .n-crm-verlorenwahl p { margin: 0; font-weight: 650; font-size: 14px; }
body.neu .n-crm-gruende { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-crm-zeile { display: flex; gap: 6px; flex-wrap: wrap; }
body.neu .n-crm-zeile input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--n-hair); background: var(--n-surface); color: var(--n-text); }
body.neu .n-crm-rot { background: var(--n-rot) !important; color: #fff !important; border-color: transparent !important; }
body.neu .n-crm-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.neu .n-crm-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.neu .n-crm-feld > span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-crm-feld input { font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; width: 100%; box-sizing: border-box; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--n-hair); background: var(--n-bg); color: var(--n-text); }
body.neu .n-crm-feld input:focus { outline: 0; border-color: var(--n-lime-2); box-shadow: var(--n-fokus); background: var(--n-surface); }
body.neu .n-crm-feld input.n-crm-vorbei { color: var(--n-rot); }
body.neu .n-crm-euro { position: relative; display: block; }
body.neu .n-crm-euro input { padding-right: 26px; text-align: right; }
body.neu .n-crm-euro i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--n-text-3); pointer-events: none; }
body.neu .n-crm-sterne { display: inline-flex; gap: 2px; padding-top: 4px; }
body.neu .n-crm-sterne button { all: unset; cursor: pointer; font-size: 22px; line-height: 1; color: var(--n-hair-2, #D6D6D0); transition: transform .12s ease; }
body.neu .n-crm-sterne button.n-an { color: #F2B705; }
body.neu .n-crm-sterne button:hover { transform: scale(1.15); }
body.neu .n-crm-akt { display: flex; flex-direction: column; gap: 8px; }
body.neu .n-crm-akt-kopf { display: flex; align-items: center; justify-content: space-between; }
body.neu .n-crm-akt-kopf h4 { margin: 0; font-size: 13px; font-weight: 750; display: flex; align-items: center; gap: 8px; color: var(--n-text); }
body.neu .n-crm-akt-kopf .n-pl-akt { width: 10px; height: 10px; }
body.neu .n-crm-akt-kopf .n-pl-a-keine { background: var(--n-hair-2, #D6D6D0); }
body.neu .n-crm-plus { all: unset; cursor: pointer; font-size: 13px; font-weight: 650; padding: 5px 10px; border-radius: 8px; color: var(--n-text-2); }
body.neu .n-crm-plus:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-crm-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.neu .n-crm-eintrag { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--n-hair); transition: opacity .3s ease; }
body.neu .n-crm-eintrag:last-child { border-bottom: 0; }
body.neu .n-crm-eintrag.n-crm-fertig { opacity: .45; }
body.neu .n-crm-eintrag.n-crm-fertig .n-crm-text { text-decoration: line-through; }
body.neu .n-crm-sym { width: 20px; text-align: center; color: var(--n-text-3); font-size: 14px; line-height: 20px; flex: none; }
body.neu .n-crm-haken { all: unset; cursor: pointer; flex: none; width: 18px; height: 18px; margin: 1px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--n-hair-2, #C9C9C2); position: relative; }
body.neu .n-crm-haken:hover { box-shadow: inset 0 0 0 2px var(--n-lime-2); }
body.neu .n-crm-haken.n-an { background: var(--n-lime); box-shadow: none; }
body.neu .n-crm-haken.n-an::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #1E1F10; border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.neu .n-crm-text { all: unset; cursor: pointer; flex: 1; min-width: 0; font-size: 14px; color: var(--n-text); overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 1px; }
body.neu span.n-crm-text { cursor: default; }
body.neu .n-crm-text small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-crm-ueber .n-crm-text small { color: var(--n-rot); font-weight: 600; }
body.neu .n-crm-schnell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.neu .n-crm-schnell input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--n-hair-2, #C9C9C2); background: transparent; color: var(--n-text); }
body.neu .n-crm-schnell input:focus { outline: 0; border-style: solid; border-color: var(--n-lime-2); background: var(--n-surface); box-shadow: var(--n-fokus); }
body.neu .n-crm-wann { display: inline-flex; gap: 4px; }
body.neu .n-crm-wann .n-chip { padding: 4px 9px; font-size: 12.5px; }
body.neu .n-crm-leer { margin: 0; font-size: 13px; color: var(--n-text-3); }
body.neu .n-crm-meldung { margin: 0; font-size: 13px; color: var(--n-oliv-text); }
body.neu .n-crm-meldung.n-fehler { color: var(--n-rot); }
/* Fussleiste im CRM: vier Handgriffe, „weiter" in Grün */
body.neu .seiteninhalt > .n-crm { order: 2; }
body.neu .n-crm-fuss { flex: 1 1 auto; width: 100%; box-sizing: border-box; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 8px;
  background: var(--n-glass, var(--n-surface)); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: 20px; box-shadow: var(--n-schatten-hoch); }
body.neu .n-crm-fuss.schwebend { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 30; width: min(620px, calc(100vw - 32px)); }
body.neu .seitenform > .n-crm { order: 2; margin: 0 0 16px; border-radius: var(--n-r-l); }
body.neu .n-crm-fk { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; border-radius: 12px; font-size: 12.5px; font-weight: 650; color: var(--n-text-2); text-align: center; }
body.neu .n-crm-fk span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-crm-fk:hover, body.neu .n-crm-fk:focus-visible { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-crm-fk.n-crm-weiter { background: var(--n-lime); color: #1E1F10; }
body.neu .n-crm-fk.n-crm-weiter:hover { background: var(--n-lime-2); }
body.neu .n-crm-fk-rot { color: var(--n-rot); }
body.neu .n-crm-fk-rot:hover { background: var(--n-rot-bg); color: var(--n-rot); }
@media (max-width: 560px) { body.neu .n-crm-felder { grid-template-columns: 1fr 1fr; } body.neu .n-crm-felder > :last-child { grid-column: 1 / -1; } }

/* ── Vorschläge beim Tippen (Bestand und Kontaktbuch) ─────────────────────── */
body.neu .n-vs { position: relative; display: block; }
body.neu .n-vs-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto;
  background: var(--n-surface); border-radius: 12px; box-shadow: var(--n-schatten-hoch); min-width: 240px; }
body.neu .n-vs-liste[hidden] { display: none; }
body.neu .n-vs-liste li { cursor: pointer; padding: 8px 10px; border-radius: 8px; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: baseline; }
body.neu .n-vs-liste li b { font-weight: 650; font-size: 14px; color: var(--n-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-vs-liste li small { grid-column: 1 / -1; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-vs-liste li:hover, body.neu .n-vs-liste li.n-an { background: var(--n-surface-2); }
body.neu .n-vs-marke { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--n-surface-2); color: var(--n-text-2); white-space: nowrap; }
body.neu .n-vs-marke.n-vs-crm { background: var(--n-lime); color: #1E1F10; }

/* ── Termin-Dialog (wie „Neues Ereignis" im Apple-Kalender) ───────────────── */
body.neu .n-kd { border: 0; padding: 0; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); border-radius: 18px; background: var(--n-bg); color: var(--n-text); box-shadow: var(--n-schatten-hoch); overflow: auto; }
body.neu .n-kd::backdrop { background: rgba(20, 20, 18, .35); backdrop-filter: blur(2px); }
body.neu .n-kd form { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 16px; }
body.neu .n-kd-kopf { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 -14px; padding: 12px 14px; background: color-mix(in srgb, var(--n-bg) 88%, transparent); backdrop-filter: blur(10px); }
body.neu .n-kd-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: -.01em; color: var(--n-text); }
body.neu .n-kd-text { all: unset; cursor: pointer; font-size: 15px; color: var(--n-text-2); padding: 4px 6px; border-radius: 8px; }
body.neu .n-kd-text:hover { color: var(--n-text); }
body.neu .n-kd-ok { justify-self: end; font-weight: 700; color: #1E1F10; background: var(--n-lime); padding: 6px 14px; border-radius: 99px; }
body.neu .n-kd-ok:hover { background: var(--n-lime-2); color: #1E1F10; }
body.neu .n-kd-art { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--n-surface-2); }
body.neu .n-kd-art button { all: unset; cursor: pointer; text-align: center; padding: 6px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--n-text-2); }
body.neu .n-kd-art button[aria-checked=true] { background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten); }
body.neu .n-kd-gruppe { background: var(--n-surface); border-radius: 12px; box-shadow: var(--n-schatten); display: flex; flex-direction: column; }
body.neu .n-kd-gruppe > * + * { border-top: 1px solid var(--n-hair); }
body.neu .n-kd-gruppe > [hidden] { display: none; }
body.neu .n-kd-gruppe > input, body.neu .n-kd-gruppe > textarea { font: inherit; font-size: 15px; border: 0; background: transparent; color: var(--n-text); padding: 11px 14px; outline: 0; resize: vertical; }
body.neu .n-kd-gross { font-size: 17px !important; font-weight: 600; }
body.neu .n-kd-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; min-height: 28px; font-size: 15px; }
body.neu .n-kd-zeile > span:first-child { color: var(--n-text); flex: none; }
body.neu .n-kd-zeile select, body.neu .n-kd-zeile input[type=date], body.neu .n-kd-zeile input[type=time] { font: inherit; font-size: 14.5px; border: 0; border-radius: 8px; padding: 5px 8px; background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-kd-zeit { display: inline-flex; gap: 6px; }
body.neu .n-kd-zeit [hidden] { display: none; }
body.neu .n-kd-lead { flex-wrap: nowrap; }
body.neu .n-kd-lead .n-vs { flex: 1; min-width: 0; }
body.neu .n-kd-lead .n-vs input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px; text-align: right; border: 0; background: transparent; color: var(--n-text); outline: 0; padding: 4px 0; }
body.neu .n-kd-wahl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
body.neu .n-kd-wahl[hidden], body.neu .n-kd-lead .n-vs[hidden] { display: none; }
body.neu .n-kd-wahl b { font-weight: 650; padding: 3px 10px; border-radius: 99px; background: var(--n-lime); color: #1E1F10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
body.neu .n-kd-wahl button { all: unset; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--n-text-2); }
body.neu .n-kd-wahl button:hover { background: var(--n-surface-2); }
body.neu .n-kd-schalter { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 99px; background: var(--n-hair-2, #D6D6D0); position: relative; cursor: pointer; transition: background .15s ease; margin: 0; }
body.neu .n-kd-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
body.neu .n-kd-schalter:checked { background: var(--n-lime); }
body.neu .n-kd-schalter:checked::after { transform: translateX(18px); }
body.neu .n-kd-fehler { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--n-rot-bg); color: var(--n-rot); font-size: 14px; }
body.neu .n-kd-fuss { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
body.neu .n-kd-fuss[hidden], body.neu .n-kd-serie[hidden], body.neu .n-kd-loeschen[hidden] { display: none; }
body.neu .n-kd-loeschen { all: unset; cursor: pointer; text-align: center; padding: 11px; border-radius: 12px; background: var(--n-surface); color: var(--n-rot); font-weight: 600; box-shadow: var(--n-schatten); }
body.neu .n-kd-serie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.neu .n-pl-filter .n-chip { white-space: nowrap; flex: none; }

/* ── Hauptkalender wie bei Apple (12.10.2026) ────────────────────────────────
   Seitenleiste (gewählter Tag, Überfälliges, Mini-Monat) und daneben Monat,
   Woche oder Tag — alles in Fensterhöhe. Farben je Art: Termin blau, To-do
   SSC-Grün, Rückruf orange, Termin am Lead petrol, Nachfassen grau. */
body.neu:has(.n-k2) footer.fuss { display: none; }
body.neu main:has(> .n-k2), body.neu main:has(.n-k2) { max-width: none; padding-bottom: 0; padding-inline: clamp(12px, 2vw, 28px); }
body.neu .n-k2 { --k-termin: var(--n-blau, #3F7BD8); --k-todo: var(--n-lime); --k-rueckruf: var(--n-orange); --k-leadtermin: var(--n-petrol, #1F8A8A); --k-nachfassen: var(--n-text-3);
  display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 16px; min-height: 420px; }
body.neu .n-k2-a-termin { --k: var(--k-termin); } body.neu .n-k2-a-todo { --k: var(--k-todo); } body.neu .n-k2-a-rueckruf { --k: var(--k-rueckruf); }
body.neu .n-k2-a-leadtermin { --k: var(--k-leadtermin); } body.neu .n-k2-a-nachfassen { --k: var(--k-nachfassen); } body.neu .n-k2-a-ueber { --k: var(--n-rot); }
body.neu .n-k2-pkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--k, var(--n-text-3)); display: inline-block; }
/* Seitenleiste */
body.neu .n-k2-seite { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; padding: 4px 4px 12px 0; scrollbar-width: thin; }
body.neu .n-k2-neu { width: 100%; justify-content: center; }
body.neu .n-k2-mini { background: var(--n-surface); border-radius: 14px; box-shadow: var(--n-schatten); padding: 10px; }
body.neu .n-k2-minikopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; }
body.neu .n-k2-minikopf button { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; color: var(--n-text-2); }
body.neu .n-k2-minikopf button:hover { background: var(--n-surface-2); }
body.neu .n-k2-minigrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
body.neu .n-k2-minigrid small { font-size: 10.5px; font-weight: 700; color: var(--n-text-3); padding-bottom: 2px; }
body.neu .n-k2-minigrid button { all: unset; cursor: pointer; position: relative; height: 28px; border-radius: 50%; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--n-text); display: grid; place-items: center; }
body.neu .n-k2-minigrid button.n-fremd { color: var(--n-text-3); }
body.neu .n-k2-minigrid button:hover { background: var(--n-surface-2); }
body.neu .n-k2-minigrid button.n-heute { color: var(--n-rot); font-weight: 750; }
body.neu .n-k2-minigrid button.n-gewaehlt { background: var(--n-lime); color: #1E1F10; font-weight: 750; }
body.neu .n-k2-minigrid button.n-punkt::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--n-text-3); }
body.neu .n-k2-seite h2 { margin: 0 0 6px; font-size: 13px; font-weight: 750; letter-spacing: .02em; text-transform: none; color: var(--n-text); display: flex; align-items: center; gap: 8px; }
body.neu .n-k2-ueber h2 b { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-k2-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
body.neu .n-k2-liste li { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
body.neu .n-k2-liste li.n-k2-erledigt { opacity: .5; }
body.neu .n-k2-liste .n-crm-haken { width: 16px; height: 16px; }
body.neu .n-k2-z { all: unset; cursor: pointer; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; }
body.neu .n-k2-z:hover, body.neu .n-k2-z:focus-visible { background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .n-k2-z span { display: flex; flex-direction: column; min-width: 0; }
body.neu .n-k2-z b { font-size: 13.5px; font-weight: 650; color: var(--n-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-k2-z small { font-size: 12px; color: var(--n-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-k2-leer { font-size: 13px; color: var(--n-text-3); padding: 6px 4px; display: block !important; }
body.neu .n-k2-link { all: unset; cursor: pointer; color: var(--n-text); text-decoration: underline; text-decoration-color: var(--n-lime); text-underline-offset: 3px; }
body.neu .n-k2-legende { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--n-hair); font-size: 13px; color: var(--n-text-2); }
body.neu .n-k2-legende label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
body.neu .n-k2-legende input { accent-color: var(--n-lime-2); }
/* Hauptfläche */
body.neu .n-k2-haupt { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--n-surface); border-radius: var(--n-r-l); box-shadow: var(--n-schatten); overflow: hidden; }
body.neu .n-k2-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--n-hair); }
body.neu .n-k2-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.neu .n-k2-nav h1 { margin: 0 0 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: var(--n-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-k2-nav h1 b { font-weight: 750; }
body.neu .n-k2-nav h1 small { font-size: 13px; color: var(--n-text-3); font-weight: 600; margin-left: 6px; }
body.neu .n-k2-pfeil { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; color: var(--n-text-2); }
body.neu .n-k2-pfeil:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-k2-rechts { display: flex; align-items: center; gap: 8px; }
body.neu .n-k2-ansichten { display: grid; grid-auto-flow: column; padding: 3px; border-radius: 10px; background: var(--n-surface-2); }
body.neu .n-k2-ansichten button { all: unset; cursor: pointer; padding: 5px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--n-text-2); }
body.neu .n-k2-ansichten button[aria-checked=true] { background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten); }
body.neu .n-k2-plus { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: var(--n-lime); color: #1E1F10; }
body.neu .n-k2-plus:hover { background: var(--n-lime-2); }
body.neu .n-k2-seitenknopf { display: none; }
body.neu .n-k2-flaeche { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Monat */
body.neu .n-k2-monat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.neu .n-k2-wtage { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--n-hair); }
body.neu .n-k2-wtage span { padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--n-text-3); text-align: right; }
body.neu .n-k2-zellen { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
body.neu .n-k2-zelle { min-height: 0; overflow: hidden; padding: 4px 4px 2px; border-right: 1px solid var(--n-hair); border-bottom: 1px solid var(--n-hair); display: flex; flex-direction: column; gap: 2px; cursor: default; }
body.neu .n-k2-zelle:nth-child(7n) { border-right: 0; }
body.neu .n-k2-zelle.n-k2-we { background: color-mix(in srgb, var(--n-surface-2) 45%, transparent); }
body.neu .n-k2-zelle.n-k2-fremd .n-k2-nr { color: var(--n-text-3); }
body.neu .n-k2-zelle.n-k2-gewaehlt { box-shadow: inset 0 0 0 2px var(--n-lime); }
body.neu .n-k2-zelle.n-k2-ueber { background: color-mix(in srgb, var(--n-lime) 18%, transparent); }
body.neu .n-k2-nr { align-self: flex-end; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 99px; color: var(--n-text); }
body.neu .n-k2-heute .n-k2-nr { background: var(--n-rot); color: #fff; }
body.neu .n-k2-e { all: unset; cursor: pointer; display: block; font-size: 12px; line-height: 1.35; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--n-text); background: color-mix(in srgb, var(--k) 16%, transparent); box-shadow: inset 2px 0 0 var(--k); flex: none; }
body.neu .n-k2-e b { font-weight: 650; font-variant-numeric: tabular-nums; }
body.neu .n-k2-e:hover { background: color-mix(in srgb, var(--k) 28%, transparent); }
body.neu .n-k2-erledigt { text-decoration: line-through; opacity: .55; }
body.neu .n-k2-mehr { all: unset; cursor: pointer; font-size: 11.5px; font-weight: 650; color: var(--n-text-2); padding: 0 6px; }
body.neu .n-k2-mehr:hover { color: var(--n-text); text-decoration: underline; }
/* Woche und Tag */
body.neu .n-k2-raster { flex: 1; min-height: 0; display: flex; flex-direction: column; --zeitw: 56px; }
body.neu .n-k2-rkopf, body.neu .n-k2-ganz { display: grid; grid-template-columns: var(--zeitw) repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--n-hair); padding-right: 8px; }
body.neu .n-k2-ecke { font-size: 10.5px; color: var(--n-text-3); display: grid; align-items: center; justify-content: end; padding-right: 8px; }
body.neu .n-k2-rtag { all: unset; cursor: pointer; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 4px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-k2-rtag b { font-size: 19px; font-weight: 600; color: var(--n-text); width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; }
body.neu .n-k2-rtag.n-k2-heute b { background: var(--n-rot); color: #fff; }
body.neu .n-k2-gzelle { min-height: 26px; padding: 3px 2px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--n-hair); cursor: copy; }
body.neu .n-k2-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: var(--zeitw) minmax(0, 1fr); scrollbar-width: thin; overscroll-behavior: contain; }
body.neu .n-k2-zeit { position: relative; }
body.neu .n-k2-zeit span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--n-text-3); font-variant-numeric: tabular-nums; }
body.neu .n-k2-spalten { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  background-image: repeating-linear-gradient(to bottom, var(--n-hair) 0 1px, transparent 1px 48px); }
body.neu .n-k2-spalte { position: relative; border-left: 1px solid var(--n-hair); cursor: copy; }
body.neu .n-k2-spalte.n-k2-heute { background: color-mix(in srgb, var(--n-lime) 6%, transparent); }
body.neu .n-k2-block { all: unset; box-sizing: border-box; position: absolute; cursor: pointer; overflow: hidden; padding: 3px 6px; border-radius: 6px; font-size: 12px; line-height: 1.3;
  color: var(--n-text); background: color-mix(in srgb, var(--k) 18%, var(--n-surface)); box-shadow: inset 3px 0 0 var(--k); display: flex; flex-direction: column; }
body.neu .n-k2-block b { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--n-text-2); }
body.neu .n-k2-block span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-k2-block small { color: var(--n-text-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-k2-block:hover { background: color-mix(in srgb, var(--k) 30%, var(--n-surface)); z-index: 2; }
body.neu .n-k2-block.n-k2-ziehbar { cursor: grab; }
body.neu .n-k2-zieht { z-index: 5 !important; box-shadow: inset 3px 0 0 var(--k), 0 8px 22px rgba(20, 20, 18, .2) !important; cursor: grabbing !important; }
body.neu.n-k2-zieht-an, body.neu.n-k2-zieht-an * { cursor: grabbing !important; user-select: none !important; }
body.neu .n-k2-jetzt { position: absolute; height: 2px; background: var(--n-rot); z-index: 3; pointer-events: none; }
body.neu .n-k2-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--n-rot); }
body.neu .n-k2-fehler { padding: 20px; color: var(--n-rot); }
/* Schmal: Seitenleiste als Blatt, Monat kompakt */
@media (max-width: 820px) {
  body.neu .n-k2 { grid-template-columns: minmax(0, 1fr); position: relative; }
  body.neu .n-k2-seite { position: absolute; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 40; background: var(--n-bg); padding: 12px; border-radius: 0 var(--n-r-l) var(--n-r-l) 0; box-shadow: var(--n-schatten-hoch);
    transform: translateX(-105%); transition: transform .2s ease; }
  body.neu .n-k2.n-k2-seite-offen .n-k2-seite { transform: none; }
  body.neu .n-k2-seitenknopf { all: unset; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--n-surface-2); }
  body.neu .n-k2-leiste { padding: 10px; }
  body.neu .n-k2-nav h1 { font-size: 17px; }
  body.neu .n-k2-ansichten button { padding: 5px 9px; }
  body.neu .n-k2-raster { --zeitw: 44px; }
  body.neu .n-k2-rtag { flex-direction: column; align-items: center; gap: 0; }
  body.neu .n-k2-rtag b { font-size: 15px; width: 26px; height: 26px; }
}
@media (max-width: 820px) { body.neu .n-k2-ecke { font-size: 8.5px; padding-right: 4px; } }
/* CRM-Widget: Hauptlink über die ganze Kachel, Phasen als eigene Wege darüber */
body.neu .n-wg-crm { position: relative; cursor: pointer; }
body.neu .n-wg-crm .n-wg-haupt { text-decoration: none; color: var(--n-oliv-text); }
body.neu .n-wg-crm .n-wg-haupt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.neu .n-wg-phasenliste { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
body.neu .n-wg-phasenliste a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--n-text-2); text-decoration: none; padding: 2px 8px 2px 6px; border-radius: 99px; background: var(--n-surface-2); }
body.neu .n-wg-phasenliste a i { width: 7px; height: 7px; border-radius: 50%; background: var(--f); }
body.neu .n-wg-phasenliste a b { color: var(--n-text); }
body.neu .n-wg-phasenliste a:hover { background: var(--n-lime); color: #1E1F10; }


/* ── CRM-Tafel, Runde 4 (12.10.2026): breiter, Kopf in zwei Reihen, Ring,
   Klappbereiche, E-Mail ──────────────────────────────────────────────────── */
body.neu .seite.breit { width: min(72vw, 1120px); }
@media (max-width: 1100px) { body.neu .seite.breit { width: calc(100vw - 16px); } }
body.neu .seitenkopf { position: relative; flex-wrap: wrap; align-items: flex-start; gap: 12px 10px; padding-right: 20px; }
body.neu .seitenkopf > h2 { flex: 1 1 320px; min-width: 0; margin: 0; padding-right: 8px; }
body.neu .seitenkopf > h2 small { display: block; }
body.neu .seitenkopf > .zu { flex: none; order: 2; margin-left: auto; }
body.neu .seitenkopf > .n-prio { flex: none; order: 1; align-self: flex-start; }
body.neu .seitenkopf > .tafelknoepfe { flex: 1 1 100%; order: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) { body.neu .seitenkopf > h2 { flex-basis: 70%; } }
/* Kopf der ganzen Seite: der Ring neben den Knöpfen */
body.neu .seitentitel .n-prio, body.neu .titelzeile .n-prio { margin-left: 4px; }
/* Der CRM-Inhalt: eine Spalte, Reihenfolge ist die des Markups */
body.neu .n-crmseite { display: flex; flex-direction: column; gap: 0; }
body.neu .n-crmseite > .n-crm { margin: 0 0 14px; }
body.neu .n-crmseite > .verlaufblock { margin-top: 6px; }
body.neu .seitenform > .n-crmseite { order: 0; max-width: 100%; }
/* Klappbereiche wie am Dashboard */
body.neu .n-kl { background: var(--n-surface); border-radius: var(--n-r); box-shadow: var(--n-schatten); margin: 0 0 10px; }
body.neu .n-kl > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; box-sizing: border-box; border-radius: var(--n-r); }
body.neu .n-kl > summary::-webkit-details-marker { display: none; }
body.neu .n-kl > summary:hover { background: var(--n-surface-2); }
body.neu .n-kl[open] > summary { border-radius: var(--n-r) var(--n-r) 0 0; }
body.neu .n-kl-sym { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--n-gruen-bg); color: var(--n-oliv-text); font-size: 15px; font-weight: 700; }
body.neu .n-kl-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
body.neu .n-kl-text b { font-size: 14.5px; font-weight: 700; color: var(--n-text); }
body.neu .n-kl-text b small { font-weight: 500; color: var(--n-text-3); font-size: 12.5px; }
body.neu .n-kl-text > small { font-size: 12.5px; color: var(--n-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-kl-text > small a { color: var(--n-text); text-decoration: none; font-weight: 600; }
body.neu .n-kl-text > small a:hover { text-decoration: underline; text-decoration-color: var(--n-lime); }
body.neu .n-kl-chevron { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--n-text-3); border-bottom: 2px solid var(--n-text-3); transform: rotate(45deg); margin-right: 6px; transition: transform .25s ease; }
body.neu .n-kl[open] > summary .n-kl-chevron { transform: rotate(-135deg); }
body.neu .n-kl-inhalt { padding: 4px 14px 14px; border-top: 1px solid var(--n-hair); }
body.neu .n-kl-inhalt .kontaktbereich, body.neu .n-kl-inhalt .block { margin: 10px 0 0; box-shadow: none; background: transparent; padding: 0; }
body.neu .n-kl-inhalt .tafelpaar { margin-top: 10px; }
body.neu .n-kl-inhalt .ansatzpunkt { margin-top: 10px; }
body.neu .n-kl-gruppe { margin-top: 18px; }
body.neu .n-kl-kontakt { margin-bottom: 14px; }
/* Prioritätsring */
body.neu .n-prio { position: relative; display: inline-block; }
body.neu .n-prio-ring { all: unset; cursor: pointer; position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
body.neu .n-prio-ring:hover { background: var(--n-surface-2); }
body.neu .n-prio-ring:focus-visible { outline: 2px solid var(--n-lime); outline-offset: 2px; }
body.neu .n-prio-ring svg { position: absolute; inset: 2px; width: 40px; height: 40px; transform: rotate(-90deg); }
body.neu .n-prio-ring circle { fill: none; stroke-width: 3.2; }
body.neu .n-prio-bg { stroke: var(--n-hair-2, #D6D6D0); }
body.neu .n-prio-bar { stroke: var(--n-lime); stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 9.74) 97.4; transition: stroke-dasharray .25s ease; }
body.neu .n-prio-ring b { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--n-text); position: relative; }
body.neu .n-prio-klein .n-prio-ring { width: 26px; height: 26px; }
body.neu .n-prio-klein .n-prio-ring svg { inset: 1px; width: 24px; height: 24px; }
body.neu .n-prio-klein .n-prio-ring circle { stroke-width: 3.6; }
body.neu .n-prio-klein .n-prio-ring b { font-size: 10.5px; }
body.neu .n-prio-pop { position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; width: 250px; padding: 12px; border-radius: 14px; background: var(--n-surface); box-shadow: var(--n-schatten-hoch); display: flex; flex-direction: column; gap: 8px; }
body.neu .n-prio-pop[hidden] { display: none; }
body.neu .n-prio-klein .n-prio-pop { left: 0; right: auto; }
body.neu .n-prio-titel { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-prio-pop input[type=range] { width: 100%; accent-color: var(--n-lime-2); }
body.neu .n-prio-zahlen { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
body.neu .n-prio-zahlen button { all: unset; cursor: pointer; text-align: center; font-size: 12px; font-weight: 650; padding: 5px 0; border-radius: 6px; color: var(--n-text-2); }
body.neu .n-prio-zahlen button:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-prio-zahlen button.n-an { background: var(--n-lime); color: #1E1F10; }
/* CRM-Block: Speichern-Status, Aktionen, Datum-Chip */
body.neu .n-crm-speicher { justify-content: flex-end; align-items: flex-start; }
body.neu .n-crm-speicher .n-knopf { align-self: flex-start; height: 36px; }
body.neu .n-crm-speicher .n-knopf[hidden] { display: none; }
body.neu .n-crm-gespeichert { font-size: 13px; color: var(--n-oliv-text); font-weight: 600; padding-top: 9px; }
body.neu .n-crm-aktionen { display: inline-flex; gap: 2px; }
body.neu .n-crm-anotiz { color: var(--n-text-2) !important; font-style: italic; white-space: pre-line; }
body.neu .n-crm-datum { position: relative; flex: none; font-size: 12px; font-weight: 600; color: var(--n-text-2); padding: 4px 8px; border-radius: 8px; background: var(--n-surface-2); cursor: pointer; }
body.neu .n-crm-datum:hover { background: var(--n-lime); color: #1E1F10; }
body.neu .n-crm-datum input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* Fussleiste mit fünf Knöpfen */
body.neu .n-crm-fuss.schwebend { width: min(680px, calc(100vw - 32px)); }
/* E-Mail-Verlauf */
body.neu .n-mv-neu { margin: 10px 0 4px; }
body.neu .n-mv { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
body.neu .n-mv-eintrag { border-top: 1px solid var(--n-hair); }
body.neu .n-mv-eintrag > details > summary { list-style: none; cursor: pointer; padding: 10px 4px; }
body.neu .n-mv-eintrag > details > summary::-webkit-details-marker { display: none; }
body.neu .n-mv-kopf { display: grid; gap: 2px; }
body.neu .n-mv-kopf b { font-size: 14px; }
body.neu .n-mv-kopf small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-mv-fehler .n-mv-kopf small em { color: var(--n-rot); font-style: normal; }
body.neu .n-mv-text { margin: 0 4px 10px; padding: 10px 12px; border-radius: 10px; background: var(--n-surface-2); font: inherit; font-size: 13.5px; white-space: pre-wrap; line-height: 1.5; }
body.neu .n-mv-anh { display: block; margin: 0 4px 10px; font-size: 12px; color: var(--n-text-3); }
/* Mail-Dialog */
body.neu .n-md { width: min(640px, calc(100vw - 24px)); }
body.neu .n-md .n-kd-zeile input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; border: 0; background: transparent; color: var(--n-text); outline: 0; text-align: right; }
body.neu .n-md-kizeile { gap: 8px; }
body.neu .n-md-kizeile input { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--n-text); outline: 0; }
body.neu .n-md-kizeile .n-knopf { flex: none; height: 32px; padding: 0 12px; font-size: 13px; background: var(--n-lime); color: #1E1F10; border-color: transparent; }
body.neu .n-md textarea { min-height: 220px; line-height: 1.5; }
body.neu .n-md-anhtitel { margin: 0; padding: 10px 14px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-md-anhliste { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 12px; border-top: 0 !important; }
body.neu .n-md-hinweis { margin: 0; font-size: 13px; color: var(--n-text-2); min-height: 1em; }
/* Lead-Karte im Termin-Dialog */
body.neu .n-kd-lkinhalt { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
body.neu .n-kd-lkinfo { font-size: 13.5px; color: var(--n-text-2); }
body.neu .n-kd-lknotiz { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--n-surface-2); font-size: 13px; color: var(--n-text); }
body.neu .n-kd-lknotiz[hidden] { display: none; }
body.neu .n-kd-lkinhalt .n-knopf { align-self: flex-start; }
/* Kalender: der Stift in der Seitenleiste */
body.neu .n-k2-stift { all: unset; cursor: pointer; flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--n-text-3); font-size: 14px; }
body.neu .n-k2-stift:hover { background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-schatten); }

/* ── Zwei Fenster, ein Griff (12.10.2026) ───────────────────────────────────
   Die Tafel ist ein Rahmen mit zwei Fenstern: rechts die Akte, links — nur
   wenn geöffnet — Politis AI oder die Dokumente. Der Rahmen ist durchsichtig,
   jedes Fenster trägt seine Fläche; dazwischen sieht man den Hintergrund.
   Im CRM ist die Akte breiter (drei Viertel), weil der Vorgang im Kopf steht. */
body.neu #tafelrahmen:has(> #tafel > .n-doppel) { background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
  transition: transform .5s var(--n-feder), width .3s ease; }
body.neu #tafelrahmen:has(> #tafel > .n-doppel-crm-tafel) { width: min(62vw, 1120px); }
/* **Geöffnet wird breiter, nicht enger** (Rückmeldung 12.10.2026): Das linke
   Fenster hat eine feste Breite, die Akte behält ihre — der Rahmen wächst um
   das Fenster, bis der Bildschirm ihn begrenzt. Vorher teilten sich beide
   2:3 einen etwas breiteren Rahmen, und die Akte wurde schmaler als zu:
   Status · Politis AI · Dokumente brachen im Kopf um. */
body.neu #tafelrahmen[data-links]:has(> #tafel > .n-doppel) { width: min(100vw - 24px, 1120px + 14px + 520px); }
body.neu .n-doppel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; height: 100%; min-height: 0; }
body.neu #tafelrahmen[data-links] .n-doppel { grid-template-columns: 520px minmax(0, 1fr); }
body.neu .n-doppel-haupt { container-type: inline-size; container-name: akte; }
body.neu .n-doppel > section { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  background: var(--n-surface); border-radius: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 0 0 1px var(--n-hair); }
body.neu .n-doppel-links[hidden] { display: none; }
body.neu .n-doppel-links .tafelchat { position: absolute; inset: 0; top: 0 !important; bottom: 0 !important; border-top: 0; }
body.neu .n-doppel-haupt > .tafelform { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Der Kopf im CRM: links Name und Knöpfe, rechts der Vorgang kompakt */
body.neu .seitenkopf.n-kopf-crm { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(300px, 1.3fr); gap: 10px 22px; align-items: start; padding-right: 64px; }
/* Die Knopfzeile im Kopf bleibt EINE Zeile — die Stammspalte ist mindestens so
   breit wie Status · Politis AI · Dokumente · Ins CRM. Wird die Akte schmaler
   als beides nebeneinander (Fenster links auf einem kleinen Bildschirm), rückt
   der Vorgang unter den Namen, statt die Knöpfe zu brechen. */
body.neu .n-kopf-stamm > .tafelknoepfe { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
@container akte (max-width: 760px) {
  body.neu .seitenkopf.n-kopf-crm { grid-template-columns: minmax(0, 1fr); }
  body.neu .n-kopf-stamm > .tafelknoepfe { flex-wrap: wrap; }
}
body.neu .n-kopf-stamm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body.neu .n-kopf-stamm > h2 { margin: 0; }
body.neu .n-kopf-crmteil { min-width: 0; }
body.neu .n-crm-kompakt { box-shadow: none; padding: 0; margin: 0; gap: 10px; background: transparent; }
body.neu .n-crm-kompakt .n-crm-kopf h3 { font-size: 16px; }
body.neu .n-crm-kompakt .n-crm-kopf .n-prio { margin-left: auto; }
body.neu .n-crm-kompakt .n-crm-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
body.neu .n-crm-kompakt .n-crm-feld input { font-size: 14px; padding: 6px 10px; }
body.neu .n-crm-kompakt .n-crm-stufe { padding: 6px 12px 6px 16px; font-size: 12.5px; }
/* Nächste Schritte als Karte im Körper */
body.neu .n-crm-schritte { margin: 0 0 14px; padding: 12px 14px 12px; }
body.neu .n-crmseite > .n-crm-schritte { margin-top: 4px; }
/* Der Kontakt bleibt offen — Zeile wie gewohnt, Nummern darunter */
body.neu .n-kl-fest > summary { cursor: default; pointer-events: none; }
body.neu .n-kl-fest > summary a { pointer-events: auto; }
body.neu .n-kl-fest > summary .n-kl-chevron { display: none; }
body.neu .n-kl-fest > summary:hover { background: transparent; }
/* Status-Menü im Kopf: nach rechts aufklappen, sonst hängt es links aus der Tafel */
body.neu .seitenkopf .verschiebefeld, body.neu .titelzeile .verschiebefeld, body.neu .tafelknoepfe .verschiebefeld { right: auto; left: 0; }
/* Schmal: die Ebene legt sich über die Akte, wie bisher */
@media (max-width: 900px) {
  body.neu #tafelrahmen:has(> #tafel > .n-doppel), body.neu #tafelrahmen[data-links]:has(> #tafel > .n-doppel) { width: calc(100vw - 16px); }
  body.neu .n-doppel { display: block; position: relative; }
  body.neu .n-doppel > section { height: 100%; border-radius: 18px; }
  body.neu .n-doppel-links { position: absolute; inset: 0; z-index: 9; }
  body.neu .seitenkopf.n-kopf-crm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { body.neu #tafelrahmen:has(> #tafel > .n-doppel), body.neu #tafelrahmen[data-links]:has(> #tafel > .n-doppel) { width: 100vw; } body.neu .n-doppel > section { border-radius: 0; } }
body.neu .seitenkopf.n-kopf-crm > .zu { position: absolute; top: 16px; right: 16px; margin: 0; }
body.neu .n-crm-kompakt .n-crm-euro input { padding-right: 26px; }


/* ── Der Verlauf, neu gezeichnet (12.10.2026) ────────────────────────────────
   Nach Tagen gruppiert, je Eintrag ein rundes Symbol für die Art, ruhige
   Typografie. Gesendete Mails klappen mit Wortlaut auf. Die Linie und die
   Klassen bleiben (`zeitleiste`, `punkt`, `eintrag`), nur anders gezeichnet. */
body.neu .n-vl .zeitleiste { padding-left: 38px; }
body.neu .n-vl .zeitleiste::before { left: 13px; top: 10px; bottom: 10px; width: 2px; background: var(--n-hair); }
body.neu .n-vl .zeitleiste > li { padding: 0 0 14px; }
body.neu .n-vl .n-vl-tag { padding: 6px 0 8px; }
body.neu .n-vl .n-vl-tag:first-child { padding-top: 0; }
body.neu .n-vl-tagtitel { display: inline-block; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3);
  background: var(--n-surface); padding: 2px 8px 2px 0; position: relative; margin-left: -38px; }
body.neu .n-vl .punkt.n-vl-sym { left: -38px; top: -1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--n-surface-2); color: var(--n-text-2); box-shadow: 0 0 0 3px var(--n-surface); }
body.neu .n-vl .n-vl-sym-anruf { background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .n-vl .n-vl-sym-mail { background: var(--n-blau-bg, rgba(47,108,184,.1)); color: var(--n-blau, #2F6CB8); }
body.neu .n-vl .n-vl-sym-dok { background: var(--n-petrol-bg, rgba(19,119,122,.1)); color: var(--n-petrol, #13777A); }
body.neu .n-vl .n-vl-e.a-nicht_abgehoben .n-vl-sym-anruf, body.neu .n-vl .n-vl-e.a-falsche_nummer .n-vl-sym-anruf { background: var(--n-surface-2); color: var(--n-text-3); }
body.neu .n-vl .n-vl-e.a-interesse .n-vl-sym-anruf, body.neu .n-vl .n-vl-e.a-gewonnen .n-vl-sym-anruf { background: var(--n-lime); color: #1E1F10; }
body.neu .n-vl .n-vl-e.a-absage .n-vl-sym-anruf, body.neu .n-vl .n-vl-e.a-verworfen .n-vl-sym-anruf { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-vl .eintrag { display: flex; flex-direction: column; gap: 3px; padding: 4px 0 0; }
body.neu .n-vl .eintragskopf { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px; }
body.neu .n-vl .eintragskopf b { font-weight: 650; color: var(--n-text); }
body.neu .n-vl .eintragskopf .hinweis { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-vl .notizkurz, body.neu .n-vl details.notiz { margin: 0; font-size: 14px; color: var(--n-text-2); line-height: 1.5; }
body.neu .n-vl .folge { font-size: 13px; color: var(--n-text-2); }
body.neu .n-vl .n-vl-e.jetzt .eintragskopf b { color: var(--n-text); }
body.neu .n-vl-weiter { display: none; }
body.neu .n-vl.n-vl-alles .n-vl-weiter { display: block; }
body.neu .n-vl-mehr { all: unset; cursor: pointer; display: block; margin: 2px 0 0 38px; font-size: 13px; font-weight: 600; color: var(--n-text-2); padding: 6px 0; }
body.neu .n-vl-mehr:hover { color: var(--n-text); text-decoration: underline; text-decoration-color: var(--n-lime); text-underline-offset: 3px; }
body.neu .n-vl.n-vl-alles .n-vl-mehr { display: none; }
body.neu .n-vl-leer { margin: 4px 0 0; }
/* E-Mail im Verlauf: Betreff, aufklappbar der Wortlaut */
body.neu .n-vl-mail > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
body.neu .n-vl-mail > summary::-webkit-details-marker { display: none; }
body.neu .n-vl-betreff { font-size: 14px; color: var(--n-text-2); }
body.neu .n-vl-betreff::after { content: " · anzeigen"; font-size: 12px; color: var(--n-text-3); }
body.neu .n-vl-mail[open] .n-vl-betreff::after { content: " · einklappen"; }
body.neu .n-vl-mailtext { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--n-surface-2); display: flex; flex-direction: column; gap: 6px; }
body.neu .n-vl-mailkopf { font-size: 12px; color: var(--n-text-3); }
body.neu .n-vl-mailtext pre { margin: 0; font: inherit; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; color: var(--n-text); }
body.neu .n-vl-fehler { color: var(--n-rot); font-style: normal; }
/* Geplant — oben im Verlauf */
body.neu .n-vg { margin: 4px 0 16px; padding: 10px 14px 12px; border-radius: 14px; background: var(--n-surface-2); display: flex; flex-direction: column; gap: 6px; }
body.neu .n-vg-titel { margin: 0; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-vg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.neu .n-vg-eintrag { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--n-hair); }
body.neu .n-vg-eintrag:last-child { border-bottom: 0; }
body.neu .n-vg-eintrag .n-crm-haken { margin-top: 2px; }
body.neu .n-vg-sym { flex: none; width: 18px; height: 18px; margin: 2px 1px 0; display: grid; place-items: center; color: var(--n-blau, #2F6CB8); }
body.neu .n-vg-text { all: unset; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; color: var(--n-text); }
body.neu button.n-vg-text { cursor: pointer; }
body.neu .n-vg-text b { font-weight: 600; }
body.neu .n-vg-text small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-vg-ueber .n-vg-text small { color: var(--n-rot); font-weight: 600; }
body.neu .n-vg-schnell input { background: var(--n-surface); }
body.neu .n-vg .n-crm-datum { background: var(--n-surface); }
/* Mail-Dialog: Von */
body.neu .n-md-vontext { font-size: 13.5px; color: var(--n-text-2); text-align: right; }
body.neu .n-md-vontext.n-md-ohne { color: var(--n-orange-text, var(--n-orange)); }
body.neu .n-md-vontext a { color: var(--n-text); font-weight: 600; }
/* Einstellungen: Mein Postfach */
body.neu .n-pf { display: flex; flex-direction: column; gap: 10px; }
body.neu .n-pf-stand { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; }
body.neu .n-pf-stand small { color: var(--n-text-3); }
body.neu .n-pf-marke { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--n-lime); color: #1E1F10; }
body.neu .n-pf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.neu .n-pf-knoepfe form { display: inline; }
body.neu .n-pf-knoepfe .n-knopf[aria-disabled] { opacity: .5; cursor: not-allowed; }
body.neu .n-vl-vorschau { font-size: 13px; color: var(--n-text-3); }
body.neu .n-vl-mail[open] .n-vl-vorschau { display: none; }
body.neu .n-vl-mail > summary:hover .n-vl-betreff { color: var(--n-text); }
body.neu .n-mailklappe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Der Pokal (12.10.2026): Auftrag gewonnen ───────────────────────────────── */
body.neu .n-pokal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(20, 20, 18, 0); transition: background .3s ease; pointer-events: none; }
body.neu .n-pokal.n-an { background: rgba(20, 20, 18, .28); pointer-events: auto; }
body.neu .n-pokal-karte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 40px 26px; border-radius: 28px; background: var(--n-surface); color: var(--n-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3); transform: scale(.6) translateY(30px); opacity: 0; transition: transform .45s var(--n-feder), opacity .25s ease; }
body.neu .n-pokal.n-an .n-pokal-karte { transform: none; opacity: 1; }
body.neu .n-pokal-karte svg { color: #F2B705; animation: n-pokal-wippen 1.2s ease .3s 2; }
body.neu .n-pokal-karte b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
body.neu .n-pokal-karte span { font-size: 15px; color: var(--n-text-2); }
@keyframes n-pokal-wippen { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 75% { transform: rotate(10deg) scale(1.08); } }
body.neu .n-pokal-konfetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body.neu .n-pokal-konfetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--f); opacity: 0;
  transform: rotate(var(--r)); animation: n-konfetti 2.6s ease-in var(--d) forwards; }
@keyframes n-konfetti { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { body.neu .n-pokal-konfetti { display: none; } body.neu .n-pokal-karte svg { animation: none; } }
body.neu .n-vl .n-vl-sym-ein { background: var(--n-lime); color: #1E1F10; }

/* ── Aufgeräumt (12.10.2026): keine Unterstreichungen im Kopf und Kontakt,
   Adresse und Aktionen als Chips, Herkunft als Tooltip ─────────────────────── */
body.neu .seitenkopf h2 small { color: var(--n-text-3); }
body.neu .seitenkopf h2 small a { text-decoration: none; color: var(--n-text-3); font-weight: 500; }
body.neu .seitenkopf h2 small a:hover { color: var(--n-text); }
body.neu .n-kl-kontaktkarte { padding: 12px 14px 12px; }
body.neu .n-kl-label { margin: 0 0 8px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-kl-kontaktkarte .kontaktbereich { margin: 0; padding: 0; background: transparent; box-shadow: none; }
body.neu .kontaktkopf .mails { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .kontaktkopf .mailen { text-decoration: none; display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px;
  background: var(--n-surface); box-shadow: inset 0 0 0 1px var(--n-hair-2, #D6D6D0); color: var(--n-text); font-weight: 600; font-size: 14px; line-height: 1.2; }
body.neu .kontaktkopf .mailen small { font-size: 11px; color: var(--n-text-3); font-weight: 500; }
body.neu .kontaktkopf .mailen:hover { background: var(--n-gruen-bg); }
body.neu .n-herkunft { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 3px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 700; background: var(--n-hair-2, #D6D6D0); color: var(--n-text-2); cursor: help; vertical-align: 1px; }
body.neu .n-wk-fuss { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
body.neu .n-wk-fuss a { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--n-text-2); padding: 5px 10px; border-radius: 99px; background: var(--n-surface-2); }
body.neu .n-wk-fuss a:hover { background: var(--n-lime); color: #1E1F10; }
body.neu .n-weitere-kontakte .n-wk-name { text-decoration: none; }
body.neu .n-weitere-kontakte .n-wk-tel { text-decoration: none; }
body.neu .n-wk-titel { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-crmseite .notizknopf .hinweis:empty { display: none; }
body.neu .n-crmseite .feldmarke { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-crmseite .testmarke { font-size: 12px; }
body.neu .n-vl .n-vl-betreff::after { content: ""; }
body.neu .n-vl-betreff { display: flex; align-items: center; gap: 10px; }
body.neu .n-vl-betreff .n-kl-chevron { width: 8px; height: 8px; margin: 0 4px 3px 0; }
body.neu .n-vl-mail[open] .n-vl-betreff .n-kl-chevron { transform: rotate(-135deg); margin-top: 4px; }

/* ── Feinschliff Lead-Oberfläche (12.10.2026, zweiter Durchgang) ─────────── */
body.neu .seitentitel ~ p.hinweis a, body.neu main > p.hinweis a, body.neu .n-seite > p.hinweis a, body.neu p.hinweis a[target="_blank"] { text-decoration: none; color: var(--n-text-2); font-weight: 500; }
body.neu p.hinweis a[target="_blank"]:hover { color: var(--n-text); }
/* Die Notiz: ein leiser Speichern-Knopf, kein schwarzer Block; Hinweise klein */
body.neu .notizknopf { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
body.neu .notizknopf .knopf { background: var(--n-surface-2); color: var(--n-text); border: 0; box-shadow: inset 0 0 0 1px var(--n-hair-2, #D6D6D0); font-weight: 600; padding: 9px 16px; border-radius: 12px; }
body.neu .notizknopf .knopf:hover { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
body.neu .notizknopf .hinweis { font-size: 12.5px; color: var(--n-text-3); }
body.neu .seiteninhalt > .feldmarke, body.neu .seitenform > .feldmarke { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); margin-top: 18px; }
body.neu .seiteninhalt > .anheften, body.neu .seiteninhalt > label:has(input[id^="anheften"]), body.neu .seitenform > .anheften, body.neu .seitenform > label:has(input[id^="anheften"]) { font-size: 12.5px; color: var(--n-text-3); margin-bottom: 18px; }
body.neu .seiteninhalt > .block, body.neu .seitenform > .block { margin-top: 14px; }
body.neu .block > h3, body.neu .tafelpaar h3 { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .verlaufkopf > span:first-child { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .verlaufkopf .stufe { font-size: 12px; color: var(--n-text-3); }
/* Kompakte Stufen im CRM-Kopf: am rechten Rand ausblenden, damit man sieht, dass es weitergeht */
body.neu .n-crm-kompakt .n-crm-stufen { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); padding-right: 36px; }
/* Testdatensatz-Marke: leiser */
body.neu .testmarke { font-size: 12px; padding: 5px 10px; }
/* Klappkarten: ruhigere Symbole */
body.neu .n-kl-sym { background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-kl[open] .n-kl-sym { background: var(--n-lime); color: #1E1F10; }
/* Kontaktkarte: Nummernknöpfe und Adresse gleich hoch */
body.neu .kontaktkopf .waehlen { min-height: 42px; }
body.neu .kontaktkopf .mailen { min-height: 42px; justify-content: center; box-sizing: border-box; }
/* Ganze Seite im CRM: der Block steht oben, dann der Inhalt — die
   Reihenfolge-Regeln der Seite hatten ihn ans Ende geschoben */
body.neu .seitenform > .n-crm { order: 0; margin-bottom: 14px; }
body.neu .seitenform > .n-crmseite { order: 1; }

/* ── Erstkontakt-Tafel: dieselbe ruhige Struktur wie im CRM (12.10.2026) ──── */
body.neu .seiteninhalt > .n-kl-briefing, body.neu .seitenform > .n-kl-briefing { order: 5; margin: 10px 0 4px; }
body.neu .seiteninhalt > .n-kl-firma, body.neu .seitenform > .n-kl-firma { order: 12; margin-top: 4px; }
body.neu .seiteninhalt > .n-kl-lernen, body.neu .seitenform > .n-kl-lernen { order: 12; }
body.neu .seiteninhalt > .archivblock, body.neu .seitenform > .archivblock { order: 13; }
body.neu .n-kl-briefing .n-kl-inhalt .tafelpaar { margin-top: 10px; }
body.neu .n-kl-briefing .n-kl-inhalt .block { margin: 0; padding: 0; box-shadow: none; background: transparent; }
body.neu .n-kl-firma .n-kl-inhalt .paare { margin-top: 8px; }
body.neu .n-kl-lernen .n-kl-inhalt .lernpaar { margin-top: 10px; }
body.neu .seiteninhalt > .ansatzpunkt, body.neu .seitenform > .ansatzpunkt { margin: 6px 0 0; }

/* ── Handy: Seitentafel durchgesehen (12.10.2026) ───────────────────────────── */
body.neu .n-crm-kompaktzu { display: none; }
@media (max-width: 640px) {
  /* Kopf: weniger Höhe — Name, Meta, Knöpfe; der Vorgang als eine Zeile, auf Tipp offen */
  body.neu .seitenkopf { padding: 14px 56px 10px 16px; gap: 8px 6px; }
  body.neu .seitenkopf > h2 { font-size: 19px; line-height: 1.2; }
  body.neu .seitenkopf > h2 small { font-size: 12px; margin-top: 2px; }
  body.neu .seitenkopf.n-kopf-crm { padding-right: 16px; gap: 8px; }
  body.neu .seitenkopf.n-kopf-crm > .zu { top: 12px; right: 12px; width: 34px; height: 34px; }
  body.neu .n-kopf-stamm { padding-right: 44px; }
  body.neu .n-crm-kompakt { gap: 8px; }
  body.neu .n-crm-kompakt .n-crm-kopf { gap: 8px; flex-wrap: nowrap; }
  body.neu .n-crm-kompakt .n-crm-kopf h3 { font-size: 14px; }
  body.neu .n-crm-kompakt .n-crm-kopf small { display: none; }
  body.neu .n-crm-kompakt .n-prio-ring { width: 36px; height: 36px; }
  body.neu .n-crm-kompakt .n-prio-ring svg { width: 32px; height: 32px; }
  body.neu .n-crm-kompaktzu { all: unset; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: var(--n-surface-2); }
  body.neu .n-crm-kompaktzu .n-kl-chevron { margin: 0 0 3px; }
  body.neu .n-crm-kompakt.n-offen .n-crm-kompaktzu .n-kl-chevron { transform: rotate(-135deg); margin: 3px 0 0; }
  body.neu .n-crm-kompakt:not(.n-offen) .n-crm-stufen, body.neu .n-crm-kompakt:not(.n-offen) .n-crm-felder,
  body.neu .n-crm-kompakt:not(.n-offen) .n-crm-verlorenwahl, body.neu .n-crm-kompakt:not(.n-offen) .n-crm-meldung { display: none; }
  body.neu .n-crm-kompakt .n-crm-felder { grid-template-columns: 1fr 1fr; }
  body.neu .n-crm-kompakt .n-crm-felder > .n-crm-speicher { grid-column: 1 / -1; }
  body.neu .tafelknoepfe { gap: 6px; }
  body.neu .tafelknoepfe .verschieben > summary, body.neu .tafelknoepfe .tafelchatknopf, body.neu .tafelknoepfe .tafeldokknopf { height: 36px; padding: 0 10px; font-size: 13px; }
  /* Fussleiste: fünf Handgriffe, Beschriftung darf umbrechen */
  body.neu .n-crm-fuss { gap: 4px; padding: 6px; }
  body.neu .n-crm-fk { min-height: 50px; font-size: 11px; padding: 5px 2px; gap: 2px; }
  body.neu .n-crm-fk span { white-space: normal; line-height: 1.1; max-height: 2.3em; }
  body.neu .n-crm-fk svg { width: 18px; height: 18px; }
  /* Inhalt: engere Ränder, Karten bündig */
  body.neu .seiteninhalt { padding: 14px 14px 110px; }
  body.neu .n-kl > summary { padding: 11px 12px; min-height: 52px; }
  body.neu .n-kl-text b { font-size: 14px; }
  body.neu .n-kl-text > small { font-size: 12px; }
  body.neu .n-kl-kontaktkarte { padding: 10px 12px; }
  body.neu .kontaktkopf .mailen { max-width: 100%; }
  body.neu .kontaktkopf .mailen, body.neu .kontaktkopf .waehlen { font-size: 14px; }
  body.neu .kontaktbereich .n-wk-fuss a { background: var(--n-surface); box-shadow: inset 0 0 0 1px var(--n-hair-2, #D6D6D0); }
  body.neu .n-vl .zeitleiste { padding-left: 34px; }
  body.neu .n-vl .punkt.n-vl-sym { left: -34px; width: 26px; height: 26px; }
  body.neu .n-vl-tagtitel { margin-left: -34px; }
  body.neu .n-vl .eintragskopf { font-size: 13.5px; }
  body.neu .n-vl .notizkurz, body.neu .n-vl details.notiz, body.neu .n-vl-betreff { font-size: 13.5px; }
  body.neu .testmarke { font-size: 11.5px; }
  /* Dialoge: Titel einzeilig */
  body.neu .n-kd-kopf h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 15px; }
  body.neu .n-kd-kopf { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  body.neu .n-kd { width: 100vw; max-height: 100dvh; border-radius: 18px 18px 0 0; margin: auto 0 0; }
}
/* Chips für Kontakt-Aktionen auch auf dem Kontaktblock der Akquise */
body.neu .kontaktbereich .n-wk-fuss a { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--n-text-2); padding: 5px 10px; border-radius: 99px; background: var(--n-surface); box-shadow: inset 0 0 0 1px var(--n-hair-2, #D6D6D0); }
body.neu .kontaktbereich .n-wk-fuss a:hover { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
@media (max-width: 640px) {
  body.neu .n-crm-fk span { white-space: normal !important; overflow: visible; text-overflow: clip; display: block; width: 100%; }
}
@media (max-width: 640px) {
  /* Die Speichern-Zeile nur, wenn es etwas zu speichern gibt — sonst eine Lücke */
  body.neu .n-crm-kompakt .n-crm-felder > .n-crm-speicher { display: none; }
  body.neu .n-crm-kompakt .n-crm-felder > .n-crm-speicher:has([data-crm-speichern]:not([hidden])), body.neu .n-crm-kompakt .n-crm-felder > .n-crm-speicher:has(.n-crm-gespeichert:not(:empty)) { display: flex; flex-direction: row; align-items: center; gap: 10px; }
  body.neu .n-crm-kompakt .n-crm-felder > .n-crm-speicher > span:first-child { display: none; }
  body.neu .n-crm-kompakt .n-crm-felder > .n-crm-speicher .n-crm-gespeichert { padding: 0; }
}
@media (max-width: 640px) { body.neu .n-crm-fk span { hyphens: auto; overflow-wrap: anywhere; font-size: 10.5px; } }

/* ── Vorlagen & Skills und Anhänge im Chat (Migration 131, 12.10.2026) ── */
body.neu .n-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-cbox .chatform { display: flex; flex-wrap: wrap; align-items: center; }
body.neu .n-cbox .chatform > textarea { flex: 1 1 200px; min-width: 0; }
body.neu .n-cbox .n-anhaenge { flex: 1 1 100%; }
body.neu .n-cbox .n-anhaenge:not(:empty) { padding: 2px 0 8px; }
body.neu .n-anhang { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px 4px 9px; border-radius: 999px; background: var(--n-surface-2, rgba(118, 118, 128, .1)); color: var(--n-text); font-size: 12.5px; line-height: 1.3; }
body.neu .n-anhang svg { flex: none; opacity: .7; }
body.neu .n-anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; color: inherit; text-decoration: none; }
body.neu a.n-anhang-name:hover { text-decoration: underline; }
body.neu .n-anhang-weg { border: 0; background: none; color: var(--n-text-2); font: inherit; font-size: 12px; padding: 0 2px; cursor: pointer; border-radius: 50%; }
body.neu .n-anhang-weg:hover { color: var(--n-text); }
body.neu .n-anhang-laedt { opacity: .6; }
body.neu .n-anhang-stumm { opacity: .75; }
body.neu .n-anhang-fehler { background: rgba(255, 59, 48, .12); color: #B3261E; border-radius: 12px; }
body.neu .chatmensch .n-anhaenge-zug { margin-top: 6px; }
body.neu .chatmensch .n-anhang { background: rgba(30, 31, 16, .12); color: #1E1F10; }
body.neu .chatmensch .n-anhang-name { max-width: 260px; }

body.neu .n-vo { margin-top: 28px; }
body.neu .n-vo-neu { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 10px 12px; align-items: end; margin: 12px 0 18px; padding: 14px 16px; background: var(--n-surface); border-radius: 14px; }
body.neu .n-vo-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--n-text-2); min-width: 0; }
body.neu .n-vo-feld > input, body.neu .n-vo-feld > select { font: inherit; font-size: 14px; color: var(--n-text); padding: 7px 10px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-bg); min-width: 0; }
body.neu .n-vo-feld input[type=file] { padding: 5px 6px; }
body.neu .n-vo-warten { grid-column: 1 / -1; font-size: 13px; color: var(--n-text-2); }
body.neu .n-vo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.neu .n-vo-eintrag { padding: 14px 16px; background: var(--n-surface); border-radius: 14px; }
body.neu .n-vo-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
body.neu .n-vo-art { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-2); padding: 2px 8px; border-radius: 999px; background: var(--n-surface-2, rgba(118, 118, 128, .1)); }
body.neu .n-vo-titel { font-weight: 600; }
body.neu .n-vo-datei-link { color: var(--n-text-2); text-decoration: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
body.neu .n-vo-datei-link:hover { text-decoration: underline; }
body.neu .n-vo-zustand { margin-left: auto; font-size: 12.5px; color: var(--n-text-2); display: inline-flex; align-items: center; gap: 6px; }
body.neu .n-vo-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--n-lime); display: inline-block; }
body.neu .n-vo-punkt-rot { background: #FF3B30; }
body.neu .n-vo-fehler { margin: 8px 0 0; font-size: 13px; color: #B3261E; }
body.neu .n-vo-befund { margin: 8px 0 0; font-size: 13.5px; color: var(--n-text); }
body.neu .n-vo-befund small { color: var(--n-text-2); }
body.neu .n-vo-skill { margin-top: 10px; }
body.neu .n-vo-skill > summary { cursor: pointer; font-size: 13.5px; color: var(--n-text-2); list-style: none; }
body.neu .n-vo-skill > summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform .15s; }
body.neu .n-vo-skill[open] > summary::before { transform: rotate(90deg); }
body.neu .n-vo-skill textarea { width: 100%; margin-top: 8px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-bg); color: var(--n-text); resize: vertical; }
body.neu .n-vo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
body.neu .n-vo-fuss { margin-top: 12px; }
body.neu .n-vo-fuss form { display: inline-flex; align-items: center; gap: 8px; }
body.neu .n-knopf-leise { color: var(--n-text-2); background: none; border-color: transparent; }
body.neu .n-knopf-leise:hover { color: #B3261E; }
/* Vorlagen je Person, E-Mail-Vorlagen und feste Anhänge (Migration 133). */
body.neu .n-vo-formen { display: flex; flex-direction: column; gap: 12px; }
body.neu .n-vo-formtitel { grid-column: 1 / -1; font-size: 13.5px; }
body.neu .n-vo-neu { grid-template-columns: 150px 1fr 1fr 150px auto; }
body.neu .n-vo-mailneu { grid-template-columns: 1fr 150px auto; }
body.neu .n-vo-breit { grid-column: 1 / -1; }
body.neu .n-vo-feld > textarea { font: inherit; font-size: 14px; line-height: 1.45; color: var(--n-text); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-bg); resize: vertical; }
body.neu .n-vo-platzhalter { margin: 0; font-size: 12.5px; color: var(--n-text-2); }
body.neu .n-vo-platzhalter code { margin-right: 4px; padding: 1px 6px; border-radius: 6px; background: var(--n-surface-2, rgba(118, 118, 128, .1)); font-size: 12px; }
body.neu .n-vo-gruppe { margin: 22px 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text-2); }
body.neu .n-vo-mailform { display: grid; gap: 8px; margin-top: 8px; }
body.neu .n-vo-mailform .n-vo-feld > input { width: 100%; }
body.neu .n-vo-mailform textarea { width: 100%; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-bg); color: var(--n-text); resize: vertical; }
body.neu .n-vo-anhaenge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
body.neu .n-vo-anhtitel { font-size: 12.5px; color: var(--n-text-2); margin-right: 4px; }
body.neu .n-vo-anhang { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
body.neu .n-vo-anhang a { color: inherit; text-decoration: none; }
body.neu .n-vo-anhang form { display: inline; }
body.neu .n-vo-anhang-weg { border: 0; background: none; color: var(--n-text-2); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
body.neu .n-vo-anhang-weg:hover { color: #B3261E; }
body.neu .n-vo-kurzaktion { margin-top: 10px; }
body.neu .n-vo-kurzzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.neu .n-vo-kurzzeile input { flex: 1; min-width: 160px; font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-bg); color: var(--n-text); }
body.neu .n-vo-kurz-an { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--n-lime); color: #1E1F10; margin-left: 6px; }
body.neu .n-vo-leerhinweis { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-vo-anhangknopf { cursor: pointer; font-size: 13px; }
body.neu .aktenkarte .n-offen { color: #B3261E; }
body.neu .n-einst-code { font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
body.neu .n-sig-rahmen { width: 100%; height: 160px; border: 1px solid var(--n-line); border-radius: 10px; background: #fff; }
body.neu .n-kb-fest .n-kb-griff { cursor: default; color: var(--n-lime); }
body.neu a.n-kb-mehr { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
body.neu .n-kbu-import { margin: 0 0 14px; }
body.neu .n-kbu-import > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
body.neu .n-kbu-import > summary::-webkit-details-marker { display: none; }
body.neu .n-kbu-importform { display: grid; gap: 10px; margin-top: 10px; padding: 14px 16px; background: var(--n-surface); border-radius: 14px; }
body.neu .n-kbu-importstand { margin-top: 10px; padding: 12px 16px; background: var(--n-surface); border-radius: 14px; font-size: 14px; }
body.neu .n-kbu-importstand p { margin: 4px 0; }
/* Einstellungen → Verbindungen (Migration 133). */
body.neu .n-vb-zustand { font-size: 12.5px; color: var(--n-text-2); padding: 3px 10px; border-radius: 999px; background: var(--n-surface-2, rgba(118, 118, 128, .1)); white-space: nowrap; }
body.neu .n-vb-ok { background: color-mix(in srgb, var(--n-lime, #C9D738) 35%, transparent); color: var(--n-text); }
body.neu .n-vb-rot { background: color-mix(in srgb, #FF3B30 14%, transparent); color: #B3261E; }
body.neu .n-vb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; width: 100%; }
body.neu .n-vb-form .n-vo-knoepfe { grid-column: 1 / -1; }
body.neu .n-vb-neu > summary { list-style: none; cursor: pointer; display: inline-flex; }
body.neu .n-vb-neu > summary::-webkit-details-marker { display: none; }
body.neu .n-vb-neu[open] { width: 100%; }
body.neu .n-vb-neu[open] > .n-vb-form { margin-top: 10px; }
@media (max-width: 640px) { body.neu .n-vb-form { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  body.neu .n-vo-neu, body.neu .n-vo-mailneu { grid-template-columns: 1fr 1fr; }
  body.neu .n-vo-datei, body.neu .n-vo-neu > button { grid-column: 1 / -1; }
  body.neu .n-vo-zustand { margin-left: 0; width: 100%; }
  body.neu .n-anhang-name { max-width: 160px; }
}

/* ── Tafelkopf wie Apple (Rückmeldung 12.10.2026): eine Reihe gleicher Pillen,
   EIN hervorgehobener Knopf. Politis AI ist grau wie Status und Dokumente und
   wird erst grün, wenn das Fenster links offen ist — der grüne Knopf ist dann
   die Handlung, die gerade gilt. Im Erstkontakt bleibt „Ins CRM" der einzige
   grüne. Alle drei hängen auf derselben Höhe; das Status-Menü sass als
   inline-block drei Pixel tiefer. ── */
body.neu .tafelknoepfe .tafelchatknopf { background: var(--n-surface-2); color: var(--n-text); }
body.neu .tafelknoepfe .tafelchatknopf:hover, body.neu .tafelknoepfe .tafeldokknopf:hover, body.neu .tafelknoepfe .verschieben > summary:hover { background: var(--n-surface-3, rgba(118, 118, 128, .16)); }
body.neu #tafelrahmen[data-links] .tafelknoepfe .tafelchatknopf, body.neu .tafelknoepfe .tafelchatknopf[aria-expanded="true"] { background: var(--n-lime); color: #1E1F10; }
body.neu .tafelknoepfe .n-crmknopf { background: var(--n-lime); color: #1E1F10; }
body.neu .tafelknoepfe .verschieben { display: inline-flex; align-items: center; vertical-align: middle; }
body.neu .tafelknoepfe .verschieben > summary { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
body.neu .tafelknoepfe > * { flex: none; }
/* Dokumente im Verlauf: Name als ruhiger Link ohne Unterstrich, wie überall im Kopf. */
body.neu .n-vl a.dokverlaufname, body.neu .n-vl .dokverlauflink { color: var(--n-text); text-decoration: none; font-weight: 500; }
body.neu .n-vl a.dokverlaufname:hover, body.neu .n-vl .dokverlauflink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Eingabe im Lead-Chat wie im grossen Chat (Rückmeldung 12.10.2026) ──
   Textfeld oben über die ganze Breite, darunter rechts in EINER Reihe:
   Diktat · Sprechen · Senden. Vorher floss das Mikro als Inline-Element
   unter das Textfeld, die Kugel sass links unten und der Pfeil absolut
   rechts unten — drei Knöpfe auf drei Höhen. */
body.neu .leadchatform { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 10px 8px 16px; }
body.neu .leadchatform > textarea, body.neu .leadchatform > #leadchatfeld { flex: 1 1 100%; min-width: 0; margin: 0; padding: 4px 0 6px; }
body.neu .leadchatform > .n-diktat-knopf { margin-left: auto; }
body.neu .leadchatform > .n-diktat-knopf:first-of-type:not(:has(~ .n-stimme-knopf)) { margin-left: auto; }
body.neu .leadchatform > .leadchatsenden { position: static; flex: none; margin-left: 2px; }
body.neu .leadchatform > .leadchatsenden:only-of-type { margin-left: auto; }
body.neu .leadchatform .n-stimme-knopf { margin-right: 0; }

/* ══ Einstellungen wie bei Apple (12.10.2026) ═══════════════════════════════
   Links die Bereiche, rechts je Bereich: Titel, ein Satz, eine Gruppe aus
   Zeilen (Beschriftung links, Bedienelement rechts), Fussnote, Speichern
   rechts. Häkchen sind Schalter, die drei Darstellungsknöpfe ein Segment. */
body.neu .n-einst { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 10px; }
body.neu .n-einst-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
body.neu .n-einst-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--n-text-2); text-decoration: none; font-size: 14px; font-weight: 500; }
body.neu .n-einst-nav a .ic { color: var(--n-text-3); flex: none; }
body.neu .n-einst-nav a:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-einst-nav a.n-aktiv { background: var(--n-surface); color: var(--n-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--n-hair); font-weight: 600; }
body.neu .n-einst-nav a.n-aktiv .ic { color: var(--n-oliv, #6B7A16); }
body.neu .n-einst-inhalt { display: flex; flex-direction: column; gap: 34px; max-width: 820px; min-width: 0; }
body.neu .n-einst-abschnitt { scroll-margin-top: 84px; }
body.neu .n-einst-abschnitt > h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--n-text); text-transform: none; display: flex; align-items: center; gap: 10px; }
body.neu .n-einst-text, body.neu .n-einst-abschnitt > .hinweis { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--n-text-2); max-width: 70ch; }
body.neu .n-einst-untertitel { margin: 18px 0 8px 14px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-einst-gruppe { margin: 0; padding: 0; background: var(--n-surface); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--n-hair); overflow: hidden; }
body.neu .n-einst-zeile { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.6fr); align-items: center; gap: 12px 20px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--n-hair); font-size: 15px; }
body.neu .n-einst-zeile:last-child { border-bottom: 0; }
body.neu .n-einst-zeile > label, body.neu .n-einst-zeile > span:first-child { color: var(--n-text); font-weight: 500; }
body.neu .n-einst-zeile > span:first-child small, body.neu .n-einst-schalter > span small { display: block; font-size: 12.5px; font-weight: 400; color: var(--n-text-3); }
body.neu .n-einst-zeile > input:not([type=checkbox]), body.neu .n-einst-zeile > textarea, body.neu .n-einst-zeile > select {
  justify-self: stretch; width: 100%; font: inherit; font-size: 15px; color: var(--n-text); background: var(--n-surface-2); border: 0; border-radius: 10px; padding: 9px 12px; box-sizing: border-box; }
body.neu .n-einst-zeile > input[type=time] { justify-self: end; width: auto; }
body.neu .n-einst-zeile > input:focus, body.neu .n-einst-zeile > textarea:focus { outline: 0; box-shadow: var(--n-fokus); background: var(--n-bg); }
body.neu .n-einst-zeile-hoch { align-items: start; }
body.neu .n-einst-zeile-hoch > label { padding-top: 10px; }
body.neu .n-einst-zeile > textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
body.neu .n-einst-wert { justify-self: end; text-align: right; color: var(--n-text-2); }
body.neu .n-einst-wert a { color: var(--n-text); text-decoration: none; }
body.neu .n-einst-wert a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.neu .n-einst-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
body.neu .n-einst-rot { color: var(--n-rot, #D33); }
body.neu .n-einst-zeile-frei { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
body.neu .n-einst-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
body.neu .n-einst-knoepfe .n-knopf, body.neu .n-einst-zeile .n-knopf { height: 36px; padding: 0 14px; }
body.neu .n-einst-fuss { margin: 8px 14px 0; font-size: 13px; line-height: 1.5; color: var(--n-text-3); max-width: 72ch; }
body.neu .n-einst-aktionen { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
body.neu .n-einst-gespeichert { font-size: 13px; color: var(--n-oliv, #6B7A16); font-weight: 600; }
body.neu .n-einst-nebenform { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
body.neu .n-einst-nebenform .n-einst-fuss { margin: 0; }
body.neu .n-einst-gedimmt { opacity: .6; }
body.neu .n-einst-meldung { margin: 0; padding: 12px 16px; border-radius: 12px; border: 0; font-weight: 500; }
body.neu .n-einst-meldung.n-gut { background: rgba(201, 215, 56, .28); color: #2A3200; }
body.neu .n-einst-meldung.n-schlecht { background: rgba(255, 59, 48, .12); color: #B3261E; }
/* Schalter statt Häkchen */
body.neu .n-einst-schalter { cursor: pointer; }
body.neu .n-einst-schalter > input[type=checkbox] { appearance: none; -webkit-appearance: none; justify-self: end; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: rgba(120, 120, 128, .32); position: relative; cursor: pointer; transition: background .2s ease; flex: none; }
body.neu .n-einst-schalter > input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .2s var(--n-feder, ease); }
body.neu .n-einst-schalter > input[type=checkbox]:checked { background: var(--n-lime); }
body.neu .n-einst-schalter > input[type=checkbox]:checked::after { transform: translateX(18px); }
body.neu .n-einst-schalter > input[type=checkbox]:focus-visible { box-shadow: var(--n-fokus); outline: 0; }
/* Segment */
body.neu .n-segment { justify-self: end; display: inline-flex; padding: 3px; border-radius: 10px; background: var(--n-surface-2); gap: 2px; }
body.neu .n-segment .knopf { border: 0; background: transparent; color: var(--n-text-2); font: inherit; font-size: 13.5px; font-weight: 550; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background .15s ease, color .15s ease; }
body.neu .n-segment .knopf.haupt { background: var(--n-surface); color: var(--n-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
/* Push-Stand */
body.neu .n-einst .n-push-stand { margin: 0; font-weight: 500; color: var(--n-text-2); }
body.neu .n-einst .n-push-stand.n-an { color: var(--n-text); }
body.neu .n-einst .n-push-stand.n-an::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--n-lime); margin-right: 8px; vertical-align: 1px; }
body.neu .n-einst .n-pf-stand { display: flex; flex-direction: column; gap: 2px; }
body.neu .n-einst .n-pf-stand small { color: var(--n-text-3); }
/* Konfiguration: dieselben Zeilen aus dem bestehenden Baustein */
body.neu .n-einst .tabelle { background: var(--n-surface); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--n-hair); overflow: hidden; padding: 0; margin: 0; }
body.neu .n-einst .tabelle .zeile { grid-template-columns: minmax(160px, 1fr) minmax(0, 1.6fr) !important; gap: 12px 20px; padding: 12px 16px; border-bottom: 1px solid var(--n-hair); align-items: start; font-size: 15px; border-radius: 0; }
body.neu .n-einst .tabelle .zeile:hover { background: transparent; }
body.neu .n-einst .tabelle .zeile:last-child { border-bottom: 0; }
body.neu .n-einst .tabelle .zeile > span:first-child { font-weight: 500; padding-top: 6px; }
body.neu .n-einst .tabelle .zeile > span:last-child { color: var(--n-text-2); }
body.neu .n-einst .schluesselform { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
body.neu .n-einst .schluesselform input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-einst .schluesselform .knopf { height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--n-surface-2); color: var(--n-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
body.neu .n-einst .schluesselform .knopf:hover { background: var(--n-hair-2); }
body.neu .n-einst .tabelle .zeile small.hinweis { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--n-text-3); }
/* Pipeline und Vorlagen: Titel gleich, Rest wie gehabt */
body.neu .n-einst .n-pl-einst > h2, body.neu .n-einst .n-vo > h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--n-text); }
body.neu .n-einst .n-vo { margin-top: 0; }
body.neu .n-einst .n-vo-neu, body.neu .n-einst .n-vo-eintrag { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--n-hair); border-radius: 16px; }
body.neu .n-einst .n-vo-knoepfe .n-knopf, body.neu .n-einst .n-vo-neu .n-knopf { height: 36px; padding: 0 14px; }
@media (max-width: 900px) {
  body.neu .n-einst { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.neu .n-einst-nav { position: sticky; top: 56px; z-index: 5; flex-direction: row; gap: 6px; overflow-x: auto; padding: 6px 0 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; background: var(--n-bg); scrollbar-width: none; }
  body.neu .n-einst-nav::-webkit-scrollbar { display: none; }
  body.neu .n-einst-nav a { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--n-surface); box-shadow: 0 0 0 1px var(--n-hair); font-size: 13px; }
  body.neu .n-einst-nav a .ic { display: none; }
  body.neu .n-einst-nav a.n-aktiv { background: var(--n-lime); color: #1E1F10; box-shadow: none; }
  body.neu .n-einst-inhalt { gap: 28px; }
}
@media (max-width: 640px) {
  body.neu .n-einst-zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; }
  body.neu .n-einst-zeile > input[type=time], body.neu .n-einst-wert, body.neu .n-segment { justify-self: start; text-align: left; }
  body.neu .n-einst-schalter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  body.neu .n-einst .tabelle .zeile { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
  body.neu .n-einst-aktionen .n-knopf { width: 100%; justify-content: center; }
}
body.neu .n-einst .n-pl-einst { margin-top: 0; }

/* ── Lead-Leiste im Chat unter dem Kopf, nicht dahinter (Rückmeldung 12.10.2026) ──
   Der Kopf liegt absolut über dem Verlauf (siehe oben); die Leiste wird per
   JS direkt nach ihm eingefügt und sass damit auf derselben Höhe — am Handy
   schauten „10 Firmen" und die Chips hinter Titel und Plus hervor. Jetzt
   hängt sie unter dem Kopf, der Verlauf rückt um ihre Höhe nach unten. */
body.neu .chathaupt .n-leadleiste { position: absolute; top: var(--n-chatkopf-h); left: 0; right: 0; z-index: 5; margin: 0;
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); background: color-mix(in srgb, var(--n-bg) 82%, transparent); }
body.neu .chathaupt:has(.n-leadleiste) .chatverlauf { padding-top: calc(var(--n-chatkopf-h) + 61px); }

/* ── Kalender am Handy wie bei Apple (12.10.2026): Tagesstreifen + Liste ── */
@media (max-width: 820px) {
  body.neu .n-k2-flaeche { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.neu .n-k2-wstrip { display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 6px 6px; border-bottom: 1px solid var(--n-hair); position: sticky; top: 0; background: var(--n-surface); z-index: 2; }
  body.neu .n-k2-wtag { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; -webkit-tap-highlight-color: transparent; }
  body.neu .n-k2-wtag small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--n-text-3); }
  body.neu .n-k2-wtag b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 600; color: var(--n-text); font-variant-numeric: tabular-nums; transition: background .15s ease, color .15s ease; }
  body.neu .n-k2-wtag.n-k2-heute small { color: var(--n-rot); }
  body.neu .n-k2-wtag.n-k2-heute b { color: var(--n-rot); font-weight: 750; }
  body.neu .n-k2-wtag.n-k2-gewaehlt b { background: var(--n-lime); color: #1E1F10; font-weight: 750; }
  body.neu .n-k2-wtag.n-k2-gewaehlt.n-k2-heute b { background: var(--n-rot); color: #fff; }
  body.neu .n-k2-wpunkte { display: flex; gap: 3px; height: 7px; align-items: center; }
  body.neu .n-k2-wpunkte .n-k2-pkt { width: 6px; height: 6px; }
  body.neu .n-k2-mliste { padding: 10px 10px 24px; }
  body.neu .n-k2-mliste h3 { margin: 6px 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-3); }
  body.neu .n-k2-mliste .n-k2-liste li { padding: 2px 2px; }
  body.neu .n-k2-mliste .n-k2-z { padding: 10px 10px; border-radius: 12px; background: var(--n-surface-2); gap: 10px; }
  body.neu .n-k2-mliste .n-k2-z b { font-size: 15px; white-space: normal; }
  body.neu .n-k2-mliste .n-k2-z small { font-size: 12.5px; white-space: normal; }
  body.neu .n-k2-mliste .n-k2-liste { gap: 6px; }
  body.neu .n-k2-mliste .n-k2-leer { padding: 10px 8px; }
  /* Monat: feste Zeilen, Liste des gewählten Tags darunter — die Fläche scrollt */
  body.neu .n-k2-monat { flex: none; }
  body.neu .n-k2-zellen { grid-template-rows: repeat(6, 50px); }
  body.neu .n-k2-zelle { padding: 3px 3px 2px; gap: 1px; align-items: center; }
  body.neu .n-k2-nr { align-self: center; font-size: 14px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; }
  body.neu .n-k2-zelle.n-k2-gewaehlt { box-shadow: none; }
  body.neu .n-k2-zelle.n-k2-gewaehlt .n-k2-nr { background: var(--n-lime); color: #1E1F10; font-weight: 750; }
  body.neu .n-k2-zelle.n-k2-heute.n-k2-gewaehlt .n-k2-nr, body.neu .n-k2-heute .n-k2-nr { background: var(--n-rot); color: #fff; }
  body.neu .n-k2-wtage span { text-align: center; padding: 6px 2px; }
  /* Kopf: zwei ruhige Reihen */
  body.neu .n-k2-leiste { padding: 8px 10px; row-gap: 6px; }
  body.neu .n-k2-nav h1 { font-size: 17px; }
  body.neu .n-k2-nav h1 small { font-size: 12px; }
  body.neu .n-k2-rechts { width: 100%; justify-content: space-between; }
  body.neu .n-k2-ansichten { flex: 1; }
  body.neu .n-k2-ansichten button { text-align: center; }
}

/* ── Pipeline am Handy: Kopf kompakt (12.10.2026) ── */
@media (max-width: 640px) {
  body.neu .n-pl-kopf .n-gruss { font-size: 26px; }
  body.neu .n-pl-gesamt { font-size: 13.5px; margin: 2px 0 8px; }
  body.neu .n-pl-werkzeuge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  body.neu .n-pl-werkzeuge .n-pl-suche { grid-column: 1; grid-row: 1; }
  body.neu .n-pl-werkzeuge .n-pl-filter { grid-column: 1 / -1; grid-row: 2; }
  body.neu .n-pl-neu { grid-column: 2; grid-row: 1; height: 44px; width: 44px; padding: 0; justify-content: center; border-radius: 12px; font-size: 0; gap: 0; }
  body.neu .n-pl-neu .ic { width: 20px; height: 20px; }
  body.neu .n-pl-zahnrad { display: none; }
  body.neu .n-pl-phasen { margin-top: 2px; }
  body.neu .n-pl-brett { grid-auto-columns: 88%; }
}

/* ── Kalender am Handy, Feinschliff wie Apple (12.10.2026) ──
   Monat ohne Gitter: Zahlen in Kreisen, Punkte darunter, nur feine Linien
   zwischen den Wochen. Liste mit Zeit links, farbigem Balken, Titel. */
@media (max-width: 820px) {
  body.neu .n-k2-wtage { border-bottom: 0; padding: 4px 0 0; }
  body.neu .n-k2-wtage span { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text-3); }
  body.neu .n-k2-zellen { grid-template-rows: repeat(6, 54px); }
  body.neu .n-k2-zelle { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 0 0; border-right: 0; border-bottom: 1px solid var(--n-hair); cursor: pointer; }
  body.neu .n-k2-zelle:nth-child(-n+7) { border-top: 1px solid var(--n-hair); }
  body.neu .n-k2-zelle.n-k2-we { background: transparent; }
  body.neu .n-k2-zelle .n-k2-nr { flex: none; width: 32px; height: 32px; border-radius: 50%; font-size: 15.5px; font-weight: 500; margin: 0; display: grid; place-items: center; background: none; color: var(--n-text); }
  body.neu .n-k2-zelle.n-k2-fremd .n-k2-nr { color: var(--n-text-3); opacity: .7; }
  body.neu .n-k2-zelle.n-k2-heute .n-k2-nr { color: var(--n-rot); font-weight: 750; background: none; }
  body.neu .n-k2-zelle.n-k2-gewaehlt .n-k2-nr { background: var(--n-text); color: var(--n-bg); font-weight: 650; }
  body.neu .n-k2-zelle.n-k2-gewaehlt.n-k2-heute .n-k2-nr { background: var(--n-rot); color: #fff; }
  body.neu .n-k2-zelle.n-k2-gewaehlt { box-shadow: none; }
  body.neu .n-k2-punkte { display: flex; gap: 3px; height: 6px; align-items: center; }
  body.neu .n-k2-punkte .n-k2-pkt { width: 6px; height: 6px; }
  /* Wochenstreifen: gewählt = dunkler Kreis, heute = rot */
  body.neu .n-k2-wtag b { font-weight: 500; }
  body.neu .n-k2-wtag.n-k2-gewaehlt b { background: var(--n-text); color: var(--n-bg); font-weight: 650; }
  body.neu .n-k2-wtag.n-k2-gewaehlt.n-k2-heute b { background: var(--n-rot); color: #fff; }
  body.neu .n-k2-wstrip { border-bottom: 1px solid var(--n-hair); }
  /* Liste */
  body.neu .n-k2-mliste { padding: 6px 0 28px; }
  body.neu .n-k2-mliste h3 { margin: 10px 16px 4px; font-size: 12px; }
  body.neu .n-k2-mzeilen { list-style: none; margin: 0; padding: 0; }
  body.neu .n-k2-mzeilen li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; padding: 0 12px 0 14px; min-height: 58px; border-bottom: 1px solid var(--n-hair); }
  body.neu .n-k2-mzeilen li:last-child { border-bottom: 0; }
  body.neu .n-k2-mzeit { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; font-variant-numeric: tabular-nums; }
  body.neu .n-k2-mzeit b { font-size: 13.5px; font-weight: 600; color: var(--n-text); }
  body.neu .n-k2-mzeit small { font-size: 12px; color: var(--n-text-3); }
  body.neu .n-k2-mz { all: unset; cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 0 9px 12px; border-left: 3px solid var(--k, var(--n-text-3)); border-radius: 2px; -webkit-tap-highlight-color: transparent; }
  body.neu .n-k2-mz b { font-size: 15.5px; font-weight: 600; color: var(--n-text); line-height: 1.25; }
  body.neu .n-k2-mz small { font-size: 12.5px; color: var(--n-text-3); line-height: 1.3; }
  body.neu .n-k2-mzeilen li:active { background: var(--n-surface-2); }
  body.neu .n-k2-mzeilen .n-crm-haken { width: 22px; height: 22px; }
  body.neu .n-k2-mzeilen .n-k2-stift { opacity: .55; }
  body.neu .n-k2-mzeilen li.n-k2-erledigt .n-k2-mz b { text-decoration: line-through; color: var(--n-text-3); }
  body.neu .n-k2-mleer { margin: 14px 16px; font-size: 14px; color: var(--n-text-3); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  body.neu .n-k2-mleer .n-k2-link { text-decoration: none; background: var(--n-surface-2); padding: 8px 14px; border-radius: 999px; font-weight: 600; color: var(--n-text); }
}

/* ── Dashboard am Handy: CRM-Bereich in voller Breite, kompakt (12.10.2026) ── */
@media (max-width: 640px) {
  body.neu .n-wg { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.neu .n-wg-crm, body.neu .n-wg-kal { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: auto; column-gap: 14px; row-gap: 8px; align-items: center; padding: 14px 16px; }
  body.neu .n-wg-crm > .n-kachel-kopf, body.neu .n-wg-kal > .n-kachel-kopf { grid-column: 1 / -1; }
  body.neu .n-wg-gross { margin: 0; }
  body.neu .n-wg-gross b { font-size: 32px; }
  body.neu .n-wg-euro { font-size: 15px; }
  body.neu .n-wg-phasen { grid-column: 1 / -1; margin-top: 2px; }
  body.neu .n-wg-phasenliste { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  body.neu .n-wg-phasenliste::-webkit-scrollbar { display: none; }
  body.neu .n-wg-phasenliste a { flex: none; white-space: nowrap; }
  body.neu .n-wg-zeilen { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  body.neu .n-wg-crm .n-kachel-cta, body.neu .n-wg-kal .n-kachel-cta { grid-column: 1 / -1; margin-top: 2px; }
  body.neu .n-wg-plus { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 0; padding: 12px 16px; text-align: left; }
  body.neu .n-wg-plus-kreis { width: 34px; height: 34px; font-size: 20px; box-shadow: none; }
  body.neu .n-wg-plus small { max-width: none; }
}

/* ── Kalender am Handy: so viel Bildschirm wie möglich (12.10.2026) ──
   Kopfleiste, Zurück-Zeile und Ränder fallen weg; der Kalender sitzt oben an
   und reicht bis zur Tab-Leiste. Zurück geht über den Pfeil links in seiner
   eigenen Leiste (und über den Dashboard-Tab). */
body.neu .n-k2-zurueck { display: none; }
@media (max-width: 820px) {
  body.neu:has(.n-k2) header.kopf { display: none; }
  body.neu main:has(.n-k2) > a.n-zurueck-std { display: none; }
  body.neu main:has(.n-k2) { padding: 0 0 calc(64px + env(safe-area-inset-bottom)); padding-inline: 0; max-width: none; }
  body.neu .n-k2 { gap: 0; min-height: 0; }
  body.neu .n-k2-haupt { border-radius: 0; box-shadow: none; }
  body.neu .n-k2-leiste { padding: calc(6px + env(safe-area-inset-top)) 8px 6px; }
  body.neu .n-k2-nav h1 small { display: none; }
  body.neu .n-k2-seite { top: 0; }
  body.neu .n-k2-zellen { grid-template-rows: repeat(6, 56px); }
}

/* ── Kalenderkopf am Handy wie in Apples Kalender (12.10.2026) ──
   Vorher standen links zwei fast gleiche Pfeile nebeneinander — der grüne
   für „zurück", der graue für „vorige Woche". Wer zurück wollte, blätterte
   eine Woche zurück. Jetzt: oben „‹ Dashboard" als Text in Akzentfarbe,
   rechts Heute · Liste · +; darunter der grosse Titel, die Pfeile klein
   rechts daneben; darunter die Ansichten über die ganze Breite. */
@media (max-width: 820px) {
  body.neu .n-k2-leiste { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "zurueck heute seite plus" "titel titel vor nach" "ansicht ansicht ansicht ansicht"; align-items: center; gap: 4px 6px; padding: calc(4px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--n-hair); }
  body.neu .n-k2-nav, body.neu .n-k2-rechts { display: contents; }
  body.neu .n-k2-zurueck { grid-area: zurueck; justify-self: start; display: inline-flex; align-items: center; gap: 0; margin-left: -8px; padding: 6px 8px 6px 2px; min-height: 40px; color: var(--n-oliv-text); text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: -.01em; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
  body.neu .n-k2-zurueck:active { opacity: .5; }
  body.neu .n-k2-heuteknopf { grid-area: heute; height: 34px; padding: 0 14px; font-size: 14px; font-weight: 600; }
  body.neu .n-k2-seitenknopf { grid-area: seite; width: 34px; height: 34px; border-radius: 50%; }
  body.neu .n-k2-plus { grid-area: plus; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; }
  body.neu .n-k2-nav h1 { grid-area: titel; margin: 2px 0 2px; font-size: 28px; font-weight: 400; letter-spacing: -.025em; line-height: 1.15; }
  body.neu .n-k2-nav h1 b { font-weight: 750; }
  body.neu .n-k2-pfeil[data-k2-schritt="-1"] { grid-area: vor; }
  body.neu .n-k2-pfeil[data-k2-schritt="1"] { grid-area: nach; }
  body.neu .n-k2-pfeil { width: 34px; height: 34px; border-radius: 50%; font-size: 22px; color: var(--n-text-2); background: var(--n-surface-2); }
  body.neu .n-k2-ansichten { grid-area: ansicht; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
}

/* ══ Design-Durchgang 12.10.2026 (Senior-Review) ═════════════════════════════ */

/* `hidden` heisst unsichtbar — überall. Mehrere Bausteine setzen `display`
   und stachen damit das Attribut aus (Lead-Karte im Termin-Dialog ohne Lead). */
body.neu [hidden] { display: none !important; }


/* Fokus: ein Hauch, kein Rahmen */
body.neu { --n-fokus: 0 0 0 2px color-mix(in srgb, var(--n-lime) 45%, transparent); }

/* ── Kalender am Handy ── */
@media (max-width: 820px) {
  body.neu .n-k2-zelle { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; }
  body.neu .n-k2-zelle .n-k2-nr { width: 32px; height: 32px; flex: none; align-self: center; }
  body.neu .n-k2-spalte.n-k2-heute { background: transparent; }
  body.neu .n-k2-raster > .n-k2-wstrip { position: static; }
  body.neu .n-k2-ganz { min-height: 0; }
  body.neu .n-k2-gzelle { min-height: 30px; }
  body.neu .n-k2-gzelle .n-k2-e { font-size: 13px; padding: 4px 8px; border-radius: 6px; }
  body.neu .n-k2-mzeit small { font-size: 12px; color: var(--n-text-2); }
  body.neu .n-k2-stift { all: unset; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--n-text-3); }
  body.neu .n-k2-stift:active { background: var(--n-surface-2); }
  body.neu .n-k2-seitenknopf { display: grid; place-items: center; color: var(--n-text-2); }
  body.neu .n-k2-schleier { position: absolute; inset: 0; z-index: 39; background: rgba(0, 0, 0, .32); opacity: 0; pointer-events: none; transition: opacity .25s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  body.neu .n-k2.n-k2-seite-offen .n-k2-schleier { opacity: 1; pointer-events: auto; }
  body.neu .n-k2-seite { transition: transform .32s cubic-bezier(.32, .72, 0, 1); }
}
body.neu .n-k2-schleier { display: none; }
@media (max-width: 820px) { body.neu .n-k2-schleier { display: block; } }

/* ── Dialoge als Blatt wie in iOS ──
   Der Browser begrenzt ein modales <dialog> auf „100% − 2em": Das Blatt sass
   deshalb schmaler und links. Jetzt: volle Breite, Griff oben, gleitet hoch. */
body.neu dialog.n-kd[open] { animation: n-blatt-auf .28s cubic-bezier(.2, .8, .2, 1); }
body.neu dialog.n-kd[open]::backdrop { animation: n-schleier-auf .28s ease; }
@keyframes n-blatt-auf { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes n-schleier-auf { from { opacity: 0; } }
@media (max-width: 640px) {
  body.neu dialog.n-kd { max-width: none; width: 100vw; max-height: calc(100dvh - env(safe-area-inset-top) - 10px); margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  body.neu dialog.n-kd[open] { animation: n-blatt-hoch .38s cubic-bezier(.32, .72, 0, 1); }
  @keyframes n-blatt-hoch { from { transform: translateY(100%); } }
  body.neu .n-kd-kopf { padding-top: 18px; }
  body.neu .n-kd-kopf::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--n-hair-2); }
  body.neu .n-kd-ok { padding: 6px 14px; font-size: 15px; }
}
body.neu .n-kd input:focus, body.neu .n-kd textarea:focus, body.neu .n-kd select:focus { outline: 0; box-shadow: none; }
body.neu .n-kd .n-kd-gruppe:focus-within { box-shadow: var(--n-schatten), var(--n-fokus); }

/* ── Tafel: Fussleiste ruhig, ohne Trennstriche ── */
@media (max-width: 640px) {
  body.neu .n-crm-fk span { hyphens: manual; overflow-wrap: normal; word-break: normal; font-size: 11px; text-wrap: balance; }
  body.neu .n-crm-fuss:has(> .n-crm-weiter) { grid-template-columns: repeat(3, minmax(0, .8fr)) minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-flow: row; }
  body.neu .n-crm-fk.n-crm-weiter span { font-size: 12px; }
  /* Die ganze Leadseite: die schwebende Leiste über der Tab-Leiste */
  body.neu .n-crm-fuss.schwebend, body.neu .ergebnisbereich.schwebend { bottom: calc(72px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); }
  body.neu main:has(.n-crm-fuss.schwebend), body.neu main:has(.ergebnisbereich.schwebend) { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
  /* Leadseite: Titel eng, Knöpfe bündig darunter */
  body.neu .titelzeile { flex-wrap: wrap; align-items: center; gap: 8px; }
  body.neu .titelzeile h1 { flex: 1 1 100%; line-height: 1.08; margin: 0 0 4px; }
  body.neu .titelzeile > * { margin-left: 0; }
}
body.neu .titelzeile .tafelchatknopf:not([aria-expanded="true"]) { background: var(--n-surface); color: var(--n-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px var(--n-hair); }
/* Ergebnisleiste am Handy: „Mehr" auf derselben Linie wie die anderen */
body.neu .n-mehr-knopf .n-mehr-punkte { display: grid; place-items: center; height: 22px; line-height: 1; letter-spacing: 2px; }

/* ── Pipeline: Schnellanlage wie eine Gruppe in iOS ── */
body.neu .n-pl-schnell { border: 0 !important; box-shadow: 0 0 0 1px var(--n-hair), 0 8px 24px rgba(0, 0, 0, .12); }
body.neu .n-pl-schnell input { background: var(--n-surface-2); border: 0; }
body.neu .n-pl-schnell input:focus { box-shadow: var(--n-fokus); outline: 0; }

/* ── Kontaktbuch: Text in den Chips mittig ── */
body.neu .n-kb-filter .n-chip, body.neu .n-kbu-filter .n-chip, body.neu .n-chip { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* ── Neuer Lead: alle Felder gleich breit ── */
body.neu .n-ln-form input:not([type=checkbox]):not([type=radio]), body.neu .n-ln-form .n-vs, body.neu .n-ln-form .n-vs input { width: 100%; max-width: none; box-sizing: border-box; }

/* ── Chat: Karten ohne Unterstriche ── */
body.neu .chatanzeige a, body.neu .aktenname, body.neu .chatzugfuss a, body.neu .chatkarte a { text-decoration: none; }
body.neu .aktenname { color: var(--n-text); font-weight: 600; }
body.neu .aktenname:hover, body.neu .chatzugfuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Glas der Leisten etwas dichter — ohne Weichzeichner (ältere Geräte) bleibt Text lesbar */
/* Verloren: Notiz über die ganze Breite, darunter rechts Abbrechen · Verloren */
body.neu .n-crm-verlorenwahl .n-crm-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
body.neu .n-crm-verlorenwahl .n-crm-zeile > input { grid-column: 1 / -1; }
body.neu .n-crm-verlorenwahl .n-crm-zeile > [data-crm-verloren-zu] { grid-column: 2; grid-row: 2; }
body.neu .n-crm-verlorenwahl .n-crm-zeile > [data-crm-verloren-ok] { grid-column: 3; grid-row: 2; }
body.neu .n-crm-verlorenwahl .n-crm-gruende { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-crm-verlorenwahl .n-chip.n-an { background: var(--n-rot); color: #fff; border-color: transparent; }
/* Dokumente: Namen ohne Unterstrich */
body.neu .doktitelknopf { text-decoration: none !important; }
body.neu .doktitelknopf:hover { text-decoration: underline !important; text-underline-offset: 3px; }
/* Kopfleiste am Handy etwas dichter — auf dem Pseudo-Element, nie auf der Leiste
   selbst (sonst klebt der fixierte Politis-Knopf oben, siehe oben). */
@media (max-width: 720px) { body.neu .kopf::before { background: color-mix(in srgb, var(--n-bg) 90%, transparent); } }
/* Kalenderblöcke: Titel oben kräftig, Zeit darunter ruhig; kurz = eine Zeile */
body.neu .n-k2-block { gap: 1px; padding: 4px 7px; border-radius: 7px; }
body.neu .n-k2-block span { order: 0; font-size: 12.5px; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.neu .n-k2-block b { order: 1; font-weight: 500; font-size: 11.5px; color: var(--n-text-2); }
body.neu .n-k2-block small { order: 2; }
body.neu .n-k2-block.n-k2-kurz { flex-direction: row; align-items: center; gap: 6px; padding-block: 2px; }
body.neu .n-k2-block.n-k2-kurz span { -webkit-line-clamp: 1; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
body.neu .n-k2-block.n-k2-kurz b { flex: none; }
/* Werkbank-Prüfung 28.10.2026: Bei zwei schmalen Spuren blieb vom Titel
   nichts („09:48 | 09:48"), und eine Stunde schnitt die zweite Titelzeile
   halb ab. Der Titel behält ein paar Zeichen, die Zeit gibt zuerst nach; bis
   75 Minuten eine Titelzeile, die Firma darunter. */
body.neu .n-k2-block.n-k2-kurz span { flex: 1 1 auto; min-width: 3ch; }
body.neu .n-k2-block.n-k2-kurz b { flex: 0 4 auto; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
body.neu .n-k2-block.n-k2-mittel span { -webkit-line-clamp: 1; }
/* Chat-Karten: ruhige Links */
body.neu .aktenfuss a { text-decoration: none; color: var(--n-text-2); font-weight: 600; }
body.neu .aktenfuss a:hover { color: var(--n-text); }
/* Politis-Knopf unten links: dichter, damit darunterliegende Karten nicht durchscheinen */

/* ── Phasenleiste wie ein Fortschritt in iOS (Rückmeldung 12.10.2026) ──
   Vorher: eine grüne Pfeilform und daneben lose Wörter auf einer Fläche, die
   auf dem Seitengrund verschwand. Jetzt eine Spur mit eigener Fläche; jede
   Phase trägt ein Zeichen — erledigt ✓, aktuell grün gefüllt, kommend ihre
   Nummer. „Verloren" steht abgesetzt am Ende, leise in Rot. */
body.neu .n-crm-stufen { counter-reset: n-stufe; gap: 2px; padding: 4px; margin: 0; border-radius: 14px; background: var(--n-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--n-hair); align-items: center; }
body.neu .n-crm-stufe { clip-path: none !important; border-radius: 10px !important; padding: 7px 12px 7px 8px !important; background: transparent; color: var(--n-text-2); font-weight: 550; display: inline-flex; align-items: center; gap: 7px; transition: background .18s ease, color .18s ease; }
body.neu .n-crm-stufe:not(.n-crm-verloren) { counter-increment: n-stufe; }
body.neu .n-crm-stufe:not(.n-crm-verloren)::before { content: counter(n-stufe); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--n-text-3); box-shadow: inset 0 0 0 1.5px var(--n-hair-2); }
body.neu .n-crm-stufe.n-vorbei { background: transparent; color: var(--n-text); }
body.neu .n-crm-stufe.n-vorbei::before { content: "✓"; color: #1E1F10; background: color-mix(in srgb, var(--n-lime) 55%, transparent); box-shadow: none; font-size: 11px; }
body.neu .n-crm-stufe.n-ist { background: var(--n-lime); color: #1E1F10; font-weight: 700; box-shadow: 0 1px 3px rgba(120, 130, 10, .25); }
body.neu .n-crm-stufe.n-ist::before { color: var(--n-lime); background: #1E1F10; box-shadow: none; }
body.neu .n-crm-stufe:not(.n-ist):not(:disabled):hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-crm-stufe.n-crm-verloren { margin-left: 4px; padding-left: 12px !important; box-shadow: none; background: transparent; color: var(--n-rot); position: relative; }
body.neu .n-crm-stufe.n-crm-verloren::before { content: ""; position: absolute; left: -3px; top: 20%; bottom: 20%; width: 1px; background: var(--n-hair-2); }
body.neu .n-crm-stufe.n-crm-verloren:hover { background: var(--n-rot-bg); color: var(--n-rot); }
/* Kompakt im Tafelkopf: dieselbe Spur, etwas kleiner */
body.neu .n-crm-kompakt .n-crm-stufen { padding: 3px; border-radius: 12px; }
body.neu .n-crm-kompakt .n-crm-stufe { padding: 5px 10px 5px 6px !important; font-size: 12.5px; gap: 6px; }
body.neu .n-crm-kompakt .n-crm-stufe:not(.n-crm-verloren)::before { width: 18px; height: 18px; font-size: 10.5px; }
/* Auf der ganzen Seite steht der Vorgang darunter — „CRM · Interesse" oben ist dann doppelt */
body.neu main:has(.n-crm-kopfteil) .titelzeile .n-im-crm { display: none; }

/* ══ Liquid Glass für die Leiste unten (Rückmeldung 12.10.2026) ═══════════════
   „Die Tafel unten soll Liquid Glass sein, überall — transparent."
   Gilt für beide Leisten — CRM (`.n-crm-fuss`) und Akquise (`.ergebnisleiste`) —
   in der Tafel, auf der ganzen Leadseite, am Handy und am Rechner.

   **Die Leiste schwebt über dem Inhalt.** In der Tafel stand sie bisher als
   eigene Zeile unter der Scrollfläche; dort scheint nichts durch, und Glas
   wäre nur eine graue Fläche. Jetzt liegt sie unten über der Scrollfläche,
   der Inhalt läuft darunter durch (die Scrollfläche hat unten schon 110 bis
   120 px Luft, damit der letzte Eintrag frei bleibt).

   Das Material: kaum Farbe, starker Weichzeichner mit Sättigung, eine helle
   Lichtkante oben, ein feiner Rand rundum, ein weicher Schatten. Knöpfe
   darin sind durchsichtig; der eine grüne trägt dasselbe Glas, grün getönt. */
body.neu {
  --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .16) 100%);
  --n-lg-blur: blur(22px) saturate(190%) brightness(1.04);
  --n-lg-rand: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05);
  --n-lg-schatten: 0 10px 36px rgba(20, 22, 10, .16), 0 2px 8px rgba(20, 22, 10, .08);
  --n-lg-druck: rgba(255, 255, 255, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu {
    --n-lg-bg: linear-gradient(180deg, rgba(72, 74, 76, .34) 0%, rgba(28, 29, 30, .22) 100%);
    --n-lg-blur: blur(22px) saturate(170%) brightness(.92);
    --n-lg-rand: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .25);
    --n-lg-schatten: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
    --n-lg-druck: rgba(255, 255, 255, .10);
  }
}
:root[data-thema="dunkel"] body.neu {
  --n-lg-bg: linear-gradient(180deg, rgba(72, 74, 76, .34) 0%, rgba(28, 29, 30, .22) 100%);
  --n-lg-blur: blur(22px) saturate(170%) brightness(.92);
  --n-lg-rand: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .25);
  --n-lg-schatten: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
  --n-lg-druck: rgba(255, 255, 255, .10);
}

/* Die Leiste schwebt in der Tafel über der Scrollfläche */
body.neu #tafel .tafelform { position: relative; }
body.neu #tafel .tafelform > .seitenfuss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: transparent !important; border: 0; pointer-events: none; }
body.neu #tafel .tafelform > .seitenfuss > * { pointer-events: auto; }
body.neu #tafel .tafelform > .seiteninhalt { flex: 1 1 auto; }
/* Das Ergebnis-Blatt am Handy bleibt ein Blatt (fixed, deckend) */
@media (max-width: 720px) { body.neu #tafelrahmen.n-ergebnis-blatt #tafel .tafelform > .seitenfuss { position: fixed; pointer-events: auto; background: var(--n-surface) !important; } }

/* Das Glas */
body.neu .n-crm-fuss, body.neu .ergebnisleiste {
  background: var(--n-lg-bg) !important;
  -webkit-backdrop-filter: var(--n-lg-blur) !important; backdrop-filter: var(--n-lg-blur) !important;
  box-shadow: var(--n-lg-rand), var(--n-lg-schatten) !important;
  border: 0 !important; border-radius: 26px; isolation: isolate;
}
body.neu #tafelrahmen.n-ergebnis-blatt .ergebnisleiste { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
/* Knöpfe im Glas: durchsichtig, beim Drücken ein Lichtfleck */
body.neu .n-crm-fuss .n-crm-fk, body.neu .ergebnisleiste .ausgangsknopf { background: transparent; border-radius: 18px; transition: background .18s ease, transform .25s var(--n-feder, ease); }
body.neu .n-crm-fuss .n-crm-fk:hover, body.neu .ergebnisleiste .ausgangsknopf:hover { background: var(--n-lg-druck); transform: none; }
body.neu .n-crm-fuss .n-crm-fk:active, body.neu .ergebnisleiste .ausgangsknopf:active { background: var(--n-lg-druck); transform: scale(.95); }
/* Der eine hervorgehobene Knopf: grünes Glas */
body.neu .n-crm-fuss .n-crm-weiter, body.neu .ergebnisleiste .ausgangsknopf.interesse {
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-lime) 92%, #fff 8%), color-mix(in srgb, var(--n-lime) 78%, transparent)) !important;
  color: #1E1F10 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 14px rgba(150, 165, 10, .28);
}
body.neu .ergebnisleiste .ausgangsknopf.interesse .beschriftung, body.neu .ergebnisleiste .ausgangsknopf.interesse svg { color: #1E1F10; }
body.neu .ergebnisleiste .ausgangsknopf.verworfen { box-shadow: none; }
/* Rand der schwebenden Leisten auf der ganzen Seite */
body.neu .n-crm-fuss.schwebend, body.neu .ergebnisbereich.schwebend .ergebnisleiste { border-radius: 28px; }

/* ══ Liquid Glass, Runde 2 (Rückmeldung 12.10.2026: „weiss als auch schwarz
   liquid machen, es ist noch nicht so") ═══════════════════════════════════
   Runde 1 war Milchglas: viel Weichzeichner, viel Tönung — das ist das alte
   iOS. Liquid Glass ist klar: wenig Tönung, nur leicht verschwommen, dafür
   Licht. Drei Schichten:
   1. die Fläche — fast farblos, Hintergrund nur leicht weich, heller und
      satter (der Inhalt dahinter bleibt erkennbar),
   2. die Kante (::before) — ein Verlauf rundum, oben links und unten rechts
      hell, an den Seiten fast weg: so bricht Licht an einem gewölbten Rand,
   3. der Glanz (::after) — ein weicher Lichtfleck oben links, dazu ein
      Innenleuchten, das der Scheibe Dicke gibt.
   Dieselben drei Schichten trägt der grüne Knopf, grün getönt. */
body.neu {
  --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%);
  --n-lg-blur: blur(9px) saturate(210%) brightness(1.08) contrast(1.04);
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 -1px 1px rgba(255, 255, 255, .35), inset 0 0 22px rgba(255, 255, 255, .22);
  --n-lg-schatten: 0 10px 30px rgba(20, 22, 10, .14), 0 1px 4px rgba(20, 22, 10, .08);
  --n-lg-kante: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, .85) 100%);
  --n-lg-glanz: radial-gradient(120% 160% at 12% -30%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 60%);
  --n-lg-schrift: 0 1px 0 rgba(255, 255, 255, .55);
  --n-lg-druck: rgba(255, 255, 255, .38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu {
    --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 100%), rgba(14, 15, 16, .16);
    --n-lg-blur: blur(9px) saturate(190%) brightness(.9) contrast(1.06);
    --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 -1px 1px rgba(255, 255, 255, .10), inset 0 0 22px rgba(255, 255, 255, .06);
    --n-lg-schatten: 0 12px 36px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
    --n-lg-kante: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .12) 80%, rgba(255, 255, 255, .42) 100%);
    --n-lg-glanz: radial-gradient(120% 160% at 12% -30%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, 0) 60%);
    --n-lg-schrift: 0 1px 2px rgba(0, 0, 0, .55);
    --n-lg-druck: rgba(255, 255, 255, .10);
  }
}
:root[data-thema="dunkel"] body.neu {
  --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 100%), rgba(14, 15, 16, .16);
  --n-lg-blur: blur(9px) saturate(190%) brightness(.9) contrast(1.06);
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 -1px 1px rgba(255, 255, 255, .10), inset 0 0 22px rgba(255, 255, 255, .06);
  --n-lg-schatten: 0 12px 36px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
  --n-lg-kante: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .12) 80%, rgba(255, 255, 255, .42) 100%);
  --n-lg-glanz: radial-gradient(120% 160% at 12% -30%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, 0) 60%);
  --n-lg-schrift: 0 1px 2px rgba(0, 0, 0, .55);
  --n-lg-druck: rgba(255, 255, 255, .10);
}
body.neu .n-crm-fuss, body.neu .ergebnisleiste { position: relative; border-radius: 30px !important; }
body.neu .n-crm-fuss.schwebend { position: fixed; }
/* 2 · die Kante */
body.neu .n-crm-fuss::before, body.neu .ergebnisleiste::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  padding: 1.25px; background: var(--n-lg-kante);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* 3 · der Glanz — hinter den Knöpfen, über der Fläche */
body.neu .n-crm-fuss::after, body.neu .ergebnisleiste::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--n-lg-glanz);
}
body.neu .n-crm-fuss .n-crm-fk, body.neu .ergebnisleiste .ausgangsknopf { text-shadow: var(--n-lg-schrift); border-radius: 22px; }
/* Der grüne Knopf: grünes Liquid Glass */
body.neu .n-crm-fuss .n-crm-weiter, body.neu .ergebnisleiste .ausgangsknopf.interesse {
  background: linear-gradient(180deg, rgba(222, 236, 92, .94) 0%, rgba(201, 215, 56, .82) 55%, rgba(178, 192, 30, .86) 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 -1px 1px rgba(255, 255, 255, .25), inset 0 0 14px rgba(255, 255, 255, .22), 0 6px 18px rgba(150, 165, 10, .30) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* Ergebnis-Blatt am Handy: keine Kante, kein Glanz */
body.neu #tafelrahmen.n-ergebnis-blatt .ergebnisleiste::before, body.neu #tafelrahmen.n-ergebnis-blatt .ergebnisleiste::after { display: none; }
/* Runde 3 („transparent"): fast keine Tönung, nur ein Hauch Weichzeichner —
   der Inhalt dahinter bleibt lesbar verschwommen, das Glas zeigt sich über
   Kante und Glanz, nicht über eine Fläche. */
body.neu {
  --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 100%);
  --n-lg-blur: blur(4px) saturate(230%) brightness(1.06) contrast(1.05);
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 1px rgba(255, 255, 255, .4), inset 0 0 14px rgba(255, 255, 255, .10);
  --n-lg-schatten: 0 8px 26px rgba(20, 22, 10, .10), 0 1px 3px rgba(20, 22, 10, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu {
    --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .01) 100%);
    --n-lg-blur: blur(4px) saturate(200%) brightness(.88) contrast(1.08);
    --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04);
    --n-lg-schatten: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
  }
}
:root[data-thema="dunkel"] body.neu {
  --n-lg-bg: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .01) 100%);
  --n-lg-blur: blur(4px) saturate(200%) brightness(.88) contrast(1.08);
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04);
  --n-lg-schatten: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
}
/* Beschriftungen bleiben lesbar, auch wenn Text darunter durchläuft */
body.neu .n-crm-fuss .n-crm-fk span, body.neu .ergebnisleiste .ausgangsknopf .beschriftung { font-weight: 650; }
/* Die Kante in Weiss (Rückmeldung 12.10.2026): Der Rahmen um die Ergebnisleiste
   trug noch eine eigene graue Fläche mit Rand, Schatten und 14 px Radius —
   hinter der 30-px-Kapsel stand rechts eine zweite, eckigere Form. Er ist
   jetzt unsichtbar; es bleibt nur die runde Glasform. */
body.neu .ergebnisbereich { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 30px; }
body.neu .ergebnisbereich > .ergebnisleiste { width: 100%; box-sizing: border-box; }
/* Weiss: die Kapsel braucht eine sichtbare Kante — eine feine dunkle Linie
   aussen, die Lichtkante innen, und einen Schatten, der sie vom Grund hebt.
   Ohne das verschwand die runde Form auf weissem Grund ganz. */
body.neu {
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 0 0 14px rgba(255, 255, 255, .12), 0 0 0 1px rgba(30, 32, 20, .09);
  --n-lg-schatten: 0 12px 32px rgba(20, 22, 10, .16), 0 2px 6px rgba(20, 22, 10, .08);
  --n-lg-kante: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 20%, rgba(120, 124, 110, .10) 48%, rgba(255, 255, 255, .3) 78%, rgba(255, 255, 255, .9) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu {
    --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35);
    --n-lg-kante: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .12) 80%, rgba(255, 255, 255, .42) 100%);
  }
}
:root[data-thema="dunkel"] body.neu {
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35);
  --n-lg-kante: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .12) 80%, rgba(255, 255, 255, .42) 100%);
}
/* Die Kapsel steht in der Tafel mittig, wie bei iOS */
body.neu #tafel .tafelform > .seitenfuss { display: flex; justify-content: center; }
/* Weiss auf weiss: die Aussenlinie etwas kräftiger, sonst verschwindet die
   linke Rundung über einer weissen Karte. */
body.neu {
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 0 0 14px rgba(255, 255, 255, .12), 0 0 0 1px rgba(30, 32, 20, .15);
  --n-lg-schatten: 0 14px 34px rgba(20, 22, 10, .18), 0 3px 8px rgba(20, 22, 10, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu { --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); --n-lg-schatten: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25); }
}
:root[data-thema="dunkel"] body.neu { --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); --n-lg-schatten: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25); }
/* Hell: die Form kommt vom Schatten — kräftiger, weicher; der grüne Knopf
   leuchtet weniger, sonst verschluckt er die linke Rundung der Kapsel. */
body.neu {
  --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .5), inset 0 0 14px rgba(255, 255, 255, .12), 0 0 0 1px rgba(30, 32, 20, .2);
  --n-lg-schatten: 0 18px 44px rgba(20, 22, 10, .22), 0 4px 12px rgba(20, 22, 10, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu { --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); --n-lg-schatten: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25); }
}
:root[data-thema="dunkel"] body.neu { --n-lg-rand: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 14px rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); --n-lg-schatten: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25); }
body.neu .n-crm-fuss .n-crm-weiter, body.neu .ergebnisleiste .ausgangsknopf.interesse {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 -1px 1px rgba(255, 255, 255, .25), inset 0 0 12px rgba(255, 255, 255, .2), 0 2px 6px rgba(150, 165, 10, .22) !important;
}

/* ══ Tab-Leiste als Liquid Glass (Rückmeldung 12.10.2026: „die Fusszeile
   auch so glasmässig") ══════════════════════════════════════════════════
   Wie in iOS 26: eine schwebende Kapsel über dem Inhalt, mit demselben
   Material wie die Leiste in der Tafel (Tokens --n-lg-*, Kante ::before,
   Glanz ::after). Der aktive Reiter bekommt eine eigene helle Blase.

   **Die Tafel reicht am Handy jetzt bis ganz unten.** Vorher endete sie über
   der Tab-Leiste (64 px + Sicherheitsabstand); unter einer schwebenden
   Kapsel bliebe dort ein Streifen der Seite dahinter stehen. Jetzt läuft
   der Inhalt unter beiden Glasleisten durch, und die Aktionsleiste der Tafel
   rückt über die Kapsel. Mit offener Tastatur oder im Sprachmodus gilt das
   Bisherige — dort ist die Tab-Leiste ausgeblendet. */
@media (max-width: 720px) {
  body.neu .n-tabbar {
    left: 10px; right: 10px; bottom: max(10px, calc(env(safe-area-inset-bottom) - 12px));
    padding: 4px; border-radius: 34px; border: 0 !important; isolation: isolate;
    background: var(--n-lg-bg) !important;
    -webkit-backdrop-filter: var(--n-lg-blur) !important; backdrop-filter: var(--n-lg-blur) !important;
    box-shadow: var(--n-lg-rand), var(--n-lg-schatten) !important;
  }
  body.neu .n-tabbar::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    padding: 1.25px; background: var(--n-lg-kante);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  body.neu .n-tabbar::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--n-lg-glanz); }
  body.neu .n-tabbar > a, body.neu .n-tabbar > button { min-height: 54px; border-radius: 28px; text-shadow: var(--n-lg-schrift); transition: background .2s ease, transform .25s var(--n-feder, ease); }
  body.neu .n-tabbar > a[aria-current]:not(.n-tab-ai) { background: var(--n-lg-druck); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
  /* Mit offener Tafel bleibt die Kapsel Glas (vorher deckend weiss) */
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur):has(#tafelrahmen[data-an]) .n-tabbar { background: var(--n-lg-bg) !important; }

  /* Tafel bis ganz unten, Inhalt läuft unter beiden Leisten durch */
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .seite,
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .seite.breit { height: var(--n-vvh, 100dvh) !important; }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) .schleier { bottom: 0; }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) #tafel .tafelform > .seitenfuss { bottom: calc(66px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); }
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) #tafel .seiteninhalt { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  /* Das Ergebnis-Blatt bleibt ein Blatt — über der Kapsel */
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur) #tafelrahmen.n-ergebnis-blatt #tafel .tafelform > .seitenfuss { bottom: calc(66px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); border-radius: 24px; left: 8px; right: 8px; }
}
@media (max-width: 720px) {
  /* Kalender: reicht unter die Kapsel, statt über ihr zu enden (sonst ein
     grauer Streifen hinter der Glasleiste) — Listen und Raster bekommen unten Luft */
  body.neu main:has(.n-k2) { padding-bottom: 0 !important; }
  body.neu .n-k2-mliste { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.neu .n-k2-scroll { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.neu .n-k2-monat + .n-k2-mliste, body.neu .n-k2-flaeche { scroll-padding-bottom: 96px; }
  /* Chat: Kopf und Firmen-Leiste als Glas — der Gesprächstext läuft
     verschwommen darunter durch, nicht scharf zwischen den Pillen */
  body.neu .chathaupt .chatseitenkopf {
    background: linear-gradient(180deg, color-mix(in srgb, var(--n-bg) 88%, transparent) 0%, color-mix(in srgb, var(--n-bg) 70%, transparent) 100%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
    box-shadow: 0 1px 0 var(--n-hair);
  }
  body.neu .chathaupt .n-leadleiste { background: color-mix(in srgb, var(--n-bg) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); }
}
@media (max-width: 720px) {
  body.neu .chathaupt .chatseitenkopf { background: linear-gradient(180deg, color-mix(in srgb, var(--n-bg) 96%, transparent) 0%, color-mix(in srgb, var(--n-bg) 90%, transparent) 100%) !important; }
  body.neu .chathaupt .n-leadleiste { background: color-mix(in srgb, var(--n-bg) 90%, transparent); }
}
/* Chat am Handy: Kopf und Firmen-Leiste deckend — wie Apples Navigationsleiste
   beim Scrollen. Glas gehört der Tab-Leiste unten, nicht dem Kopf. */
@media (max-width: 720px) {
  body.neu .chathaupt .chatseitenkopf, body.neu .chathaupt .n-leadleiste { background: var(--n-bg) !important; }
}

/* ══ Kopf als Liquid Glass (Rückmeldung 12.10.2026: „oben den Header auch so,
   vielleicht nicht abrunden — schau, was besser aussieht") ═══════════════
   Nicht abgerundet: Oben ist der Kopf bei Apple eine Fläche über die ganze
   Breite, keine Kapsel — die Kapsel gehört der Tab-Leiste unten. Statt einer
   harten Linie läuft das Glas unten weich aus („Scroll-Kante" wie in iOS 26):
   der Inhalt verschwimmt, je näher er dem Kopf kommt. Das Glas bleibt auf
   ::before — auf der Leiste selbst zöge backdrop-filter den fixierten
   Politis-Knopf nach oben (siehe Kopf von neu.css). */
body.neu .kopf { border-bottom: 0 !important; }
body.neu .kopf::before {
  bottom: -18px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-bg) 74%, transparent) 0%, color-mix(in srgb, var(--n-bg) 58%, transparent) 72%, color-mix(in srgb, var(--n-bg) 0%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) !important; backdrop-filter: blur(14px) saturate(190%) !important;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 calc(100% - 26px), transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 calc(100% - 26px), transparent 100%);
  pointer-events: none;
}
/* **Kein Übergangsname am Kopf.** `view-transition-name` macht den Kopf zum
   Bezugsrahmen für seinen Weichzeichner (Backdrop-Root): Das Glas auf ::before
   sah dann nur den Kopf selbst und tönte, ohne zu verwischen — der Text dahinter
   blieb scharf (gemessen 12.10.2026). Bei einem Seitenwechsel blendet der Kopf
   jetzt mit der Seite über; er ist überall gleich, man sieht es nicht. */
body.neu header.kopf { view-transition-name: none; }
body.neu .n-crm-verlorenhinweis { display: block; margin: -4px 0 2px; font-size: 12.5px; color: var(--n-text-2); }
body.neu .n-pl-altbestand { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--n-orange, #E0812E) 12%, var(--n-surface)); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
body.neu .n-pl-altbestand p { margin: 0; font-size: 14px; max-width: 60ch; }

/* ── Politis AI unten links als Liquid Glass (Rückmeldung 13.10.2026) ──
   Dasselbe Material wie Tab-Leiste und Aktionsleiste: kaum Tönung, leichter
   Weichzeichner, Lichtkante (::before) und Glanz (::after). Etwas mehr Tönung
   als die Leisten, weil hier zwei Zeilen Text stehen, die lesbar bleiben müssen. */
body.neu .politisknopf {
  isolation: isolate; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--n-surface) 46%, transparent) 0%, color-mix(in srgb, var(--n-surface) 30%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(210%) brightness(1.05) !important; backdrop-filter: blur(8px) saturate(210%) brightness(1.05) !important;
  box-shadow: var(--n-lg-rand), var(--n-lg-schatten) !important;
}
body.neu .politisknopf::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  padding: 1.25px; background: var(--n-lg-kante);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
body.neu .politisknopf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--n-lg-glanz); }
body.neu .politisknopf .politisname, body.neu .politisknopf .politishinweis { text-shadow: var(--n-lg-schrift); }
body.neu .politisknopf .politiszeichen {
  background: linear-gradient(180deg, rgba(222, 236, 92, .95) 0%, rgba(201, 215, 56, .85) 60%, rgba(178, 192, 30, .9) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), inset 0 -1px 1px rgba(255, 255, 255, .25), 0 2px 8px rgba(150, 165, 10, .3);
}

/* ── Hover in den Glasleisten (Rückmeldung 13.10.2026) ──
   Der Lichtfleck (--n-lg-druck) war hell auf hellem Glas — beim Überfahren
   sah man nicht, worauf man zeigt. Jetzt eine eigene Blase je Thema: im Hellen
   ein Hauch Dunkel mit heller Kante, im Dunkeln ein Hauch Licht; das Symbol
   hebt sich minimal, beim Drücken gibt der Knopf nach. Nur mit Maus/Trackpad
   (hover: hover), damit am Handy nichts „hängen" bleibt. */
body.neu {
  --n-lg-hover: rgba(30, 32, 20, .065);
  --n-lg-hover-kante: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(20, 22, 10, .08);
  --n-lg-aktiv: rgba(30, 32, 20, .11);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu { --n-lg-hover: rgba(255, 255, 255, .09); --n-lg-hover-kante: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18); --n-lg-aktiv: rgba(255, 255, 255, .14); }
}
:root[data-thema="dunkel"] body.neu { --n-lg-hover: rgba(255, 255, 255, .09); --n-lg-hover-kante: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18); --n-lg-aktiv: rgba(255, 255, 255, .14); }

body.neu .ergebnisleiste .ausgangsknopf svg, body.neu .n-crm-fuss .n-crm-fk svg { transition: transform .22s var(--n-feder, ease); }
@media (hover: hover) {
  body.neu .ergebnisleiste .ausgangsknopf:not(.interesse):hover,
  body.neu .n-crm-fuss .n-crm-fk:not(.n-crm-weiter):hover,
  body.neu .n-tabbar > a:not([aria-current]):hover, body.neu .n-tabbar > button:hover {
    background: var(--n-lg-hover) !important; box-shadow: var(--n-lg-hover-kante); cursor: pointer;
  }
  body.neu .ergebnisleiste .ausgangsknopf:hover svg, body.neu .n-crm-fuss .n-crm-fk:hover svg { transform: translateY(-1.5px) scale(1.08); }
  body.neu .ergebnisleiste .ausgangsknopf.interesse:hover, body.neu .n-crm-fuss .n-crm-weiter:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); }
}
body.neu .ergebnisleiste .ausgangsknopf:not(.interesse):active, body.neu .n-crm-fuss .n-crm-fk:not(.n-crm-weiter):active { background: var(--n-lg-aktiv) !important; transform: scale(.96); }
body.neu .ergebnisleiste .ausgangsknopf.interesse:active, body.neu .n-crm-fuss .n-crm-weiter:active { transform: scale(.96); filter: brightness(.97); }
body.neu .ergebnisleiste .ausgangsknopf:focus-visible, body.neu .n-crm-fuss .n-crm-fk:focus-visible { outline: 0; box-shadow: var(--n-lg-hover-kante), var(--n-fokus); background: var(--n-lg-hover); }

/* ── Das Terminblatt in der Tafel sitzt über der schwebenden Leiste (13.10.2026)
   Seit die Leiste als Glas über dem Inhalt schwebt (position: absolute), ist
   sie der Bezugsrahmen des Blatts. Dessen alte Rechnung „100 % − Leiste − Kopf"
   ging von der ganzen Tafel aus und wurde negativ: Rückruf und Termin öffneten
   nur einen leeren Streifen. Jetzt: direkt über der Leiste, Höhe bis unter den
   Kopf (gemessen beim Öffnen, `--n-blatt-max` aus `_neu.js.html`). Am Handy gilt
   weiter das Vollblatt. */
@media (min-width: 721px) {
  body.neu #tafelrahmen #tafel .tafelform > .seitenfuss .ausgangsklappe.termin:not([hidden]):has([data-terminkalender]) {
    bottom: calc(100% + 8px) !important;
    max-height: var(--n-blatt-max, calc(var(--n-vvh, 100dvh) - 320px)) !important;
  }
}
/* Der gewählte Knopf bleibt dunkel, auch unter der Maus (sonst weisse Schrift auf hellem Grund) */
@media (hover: hover) {
  body.neu .ergebnisbereich.wartet .ergebnisleiste .ausgangsknopf.n-gewaehlt:hover { background: #1E1F10 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important; }
}

/* ── „Verloren" am Handy als Blatt von unten (13.10.2026) ──
   Das Feld klappte im Kopf der Tafel auf, und seine Knöpfe lagen unter der
   schwebenden CRM-Leiste — „Verloren" und „Abbrechen" waren nicht zu treffen.
   Jetzt ein Aktionsblatt über Leiste und Tab-Leiste, wie in iOS. */
@media (max-width: 720px) {
  body.neu .n-crm-verlorenwahl:not([hidden]),
  body.neu .n-crm-kompakt:not(.n-offen) .n-crm-verlorenwahl:not([hidden]) {
    display: flex; position: fixed; z-index: 90; left: 8px; right: 8px;
    bottom: calc(78px + max(10px, calc(env(safe-area-inset-bottom) - 12px)));
    max-height: min(70dvh, calc(100dvh - 160px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 16px 16px; border-radius: 22px;
    background: color-mix(in srgb, var(--n-surface) 96%, var(--n-rot) 4%);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35), 0 -8px 30px rgba(0, 0, 0, .25);
    animation: n-blatt-hoch .32s cubic-bezier(.32, .72, 0, 1);
  }
}
@keyframes n-blatt-hoch { from { transform: translateY(100%); } }
/* Blätter von unten (Status-Menü, Filter, Quellen, Mehr) enden über der
   schwebenden Tab-Leiste — sonst lagen die letzten Einträge dahinter (13.10.2026). */
@media (max-width: 720px) {
  html:not(.n-stimme-offen) body.neu:not(.n-tastatur):has(.n-tabbar) :is(.verschiebefeld, .filterfeld, .chatquellenfeld, .n-mehrmenue-feld) {
    bottom: calc(78px + max(10px, calc(env(safe-area-inset-bottom) - 12px))) !important;
    max-height: min(70dvh, calc(100dvh - 170px)) !important;
  }
}
/* ── Am Handy: offene Klappen der Ergebnisleiste als ruhiges Blatt (13.10.2026)
   1. Die schwebende Leiste der Leadseite wurde mit `transform` zentriert — das
      machte sie zum Bezugsrahmen des „festen" Terminblatts, das dadurch halb
      aus dem Bild ragte und unter dem Verlauf lag. Jetzt links/rechts statt
      transform.
   2. Ist eine Klappe offen, tritt die Knopfreihe zurück (die Klappe hat selbst
      Abbrechen und Bestätigen) — sonst schob die über „Mehr" aufgeklappte Reihe
      die Klappe oben aus dem Bild.
   3. Mit offener Klappe liegt die Leiste über allem, auch über der Tab-Leiste. */
@media (max-width: 720px) {
  body.neu .ergebnisbereich.schwebend, body.neu .n-crm-fuss.schwebend { left: 10px !important; right: 10px !important; width: auto !important; transform: none !important; }
  body.neu .ergebnisbereich.wartet .ergebnisleiste { display: none !important; }
  body.neu .ergebnisbereich.schwebend:has(.ausgangsklappe:not([hidden])) { z-index: 1100 !important; }
  body.neu .ergebnisbereich .ausgangsklappe:not([hidden]):not(.termin) { max-height: calc(var(--n-vvh, 100dvh) - 260px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ── To-dos im Verlauf (13.10.2026) ──────────────────────────────────────────
   Nach Odoos „Geplante Aktivitäten", im Politis-Stil: Die Gruppe „Geplant"
   steht vor den Tagen und sieht aus wie ein Tagestitel; jedes offene To-do ist
   ein Eintrag wie jeder andere — rundes Symbol, Kopfzeile, Text — mit zwei
   leisen Handlungen darunter. Überfällig färbt Symbol und Frist rot. Erledigt
   steht es am Tag des Erledigens mit grünem Haken, der es wieder öffnet. */
body.neu .n-vl .n-vl-plantag { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Sieht aus wie „HEUTE" — nur zum Klappen. Kein `all: unset`: das nähme dem
   Tagestitel Schrift, Abstand und den Platz auf der Linie. */
body.neu .n-vl .n-vl-planknopf { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; -webkit-appearance: none; appearance: none; }
body.neu .n-vl .n-vl-planknopf:hover { color: var(--n-text); }
body.neu .n-vl-planknopf:focus-visible { outline: 2px solid var(--n-lime-2); outline-offset: 2px; border-radius: 6px; }
body.neu .n-vl-planpfeil { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform .2s ease; }
body.neu .n-vl.n-vl-plan-zu .n-vl-planpfeil { transform: rotate(-90deg); }
body.neu .n-vl-plananz { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--n-lime); color: #1E1F10; font-size: 10.5px; font-weight: 750; letter-spacing: 0; }
body.neu .n-vl-planplus { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--n-text-3); padding: 3px 8px; border-radius: 99px;
  transition: background .15s ease, color .15s ease; }
body.neu .n-vl-planplus:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-vl-planplus:focus-visible { outline: 2px solid var(--n-lime-2); outline-offset: 1px; }
body.neu .n-vl.n-vl-plan-zu .n-vl-plan { display: none; }
body.neu .n-vl .n-vl-plan { max-height: 260px; transition: opacity .3s ease .25s, max-height .35s ease .45s, padding .35s ease .45s; }
body.neu .n-vl .punkt.n-vl-sym-plan { background: var(--n-surface); color: var(--n-text-2); box-shadow: 0 0 0 3px var(--n-surface), inset 0 0 0 1.5px var(--n-hair-2); }
body.neu .n-vl .n-vl-ueber .punkt.n-vl-sym-plan { background: var(--n-rot-bg); color: var(--n-rot); box-shadow: 0 0 0 3px var(--n-surface); }
body.neu .n-vl .punkt.n-vl-sym-plan.n-an { background: var(--n-lime); color: #1E1F10; box-shadow: 0 0 0 3px var(--n-surface); }
body.neu .n-vl-frist { color: var(--n-text-2); font-weight: 600; }
body.neu .n-vl-ueber .n-vl-frist { color: var(--n-rot); }
body.neu .n-vl-plantitel { font-size: 14.5px; font-weight: 600; color: var(--n-text); line-height: 1.4; transition: color .2s ease; }
body.neu .n-vl-plannotiz { font-size: 13.5px; color: var(--n-text-2); line-height: 1.45; }
body.neu .n-vl-planaktionen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
body.neu .n-vl-planaktionen button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
  color: var(--n-text-3); padding: 2px 0; transition: color .15s ease; }
body.neu .n-vl-planaktionen button:hover { color: var(--n-text); }
body.neu .n-vl-planaktionen button:focus-visible { outline: 2px solid var(--n-lime-2); outline-offset: 2px; border-radius: 4px; }
body.neu .n-vl .n-vl-plan.n-vl-fertig .n-vl-plantitel { color: var(--n-text-3); text-decoration: line-through; text-decoration-color: var(--n-text-3); }
body.neu .n-vl .n-vl-plan.n-vl-fertig .n-vl-planaktionen { visibility: hidden; }
body.neu .n-vl .n-vl-plan.n-vl-fertig { opacity: 0; max-height: 0; padding-bottom: 0; overflow: hidden; }
/* Der Verlauf unter „Geplant" beginnt mit etwas Luft */
body.neu .n-vl .n-vl-plan + .n-vl-tag { padding-top: 10px; }
/* Im Verlauf: To-do und Termin mit eigenem Symbol */
body.neu .n-vl .punkt.n-vl-sym-todo { background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-vl .punkt.n-vl-sym-termin { background: var(--n-blau-bg, rgba(47,108,184,.1)); color: var(--n-blau, #2F6CB8); }
body.neu .n-vl .punkt.n-vl-sym-erl { background: var(--n-lime); color: #1E1F10; }
body.neu .n-vl button.punkt { border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; transition: transform .18s var(--n-feder, ease), box-shadow .18s ease, background .18s ease; }
@media (hover: hover) {
  body.neu .n-vl button.punkt:hover { box-shadow: 0 0 0 3px var(--n-surface), 0 0 0 5px var(--n-lime-2, var(--n-lime)); }
  body.neu .n-vl button.punkt.n-vl-sym-plan:hover { background: var(--n-gruen-bg, var(--n-surface-2)); color: var(--n-oliv-text, var(--n-text)); }
}
body.neu .n-vl button.punkt:active { transform: scale(.9); }
body.neu .n-vl button.punkt:focus-visible { outline: 2px solid var(--n-lime-2); outline-offset: 2px; }
body.neu .n-vl-todotitel { font-size: 14px; color: var(--n-text-3); text-decoration: line-through; text-decoration-color: var(--n-text-3); }
body.neu .n-vl .n-vl-oeffnet { opacity: .45; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  body.neu .n-vl .n-vl-plan, body.neu .n-vl button.punkt { transition: none; }
}
@media (max-width: 720px) {
  body.neu .n-vl-planaktionen { gap: 2px 18px; }
  body.neu .n-vl-planaktionen button { font-size: 14px; padding: 6px 0; }
}

/* ══ Zielkunden & Gebiet — der ICP-Assistent (14.10.2026, Migration 136) ═══
   Baut auf den Einstellungszeilen auf; eigen sind nur Schrittnummern,
   Länderkacheln, die Paarlisten der Beispiele und die Codefelder. */
body.neu .n-zk .n-zk-nr { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--n-surface-2); color: var(--n-text-2); font-size: 11.5px; font-weight: 700; flex: none; }
body.neu .n-zk .n-zk-nr-gross { width: 28px; height: 28px; font-size: 13px; margin-right: 10px; background: var(--n-lime); color: #1E1F10; }
body.neu .n-zk .n-zk-pflicht { color: var(--n-oliv, #6B7A16); font-weight: 700; }
body.neu .n-zk .n-zk-laender { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
body.neu .n-zk .n-zk-land { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--n-text); cursor: pointer; }
body.neu .n-zk .n-zk-land input { width: 16px; height: 16px; margin: 0; accent-color: var(--n-oliv, #6B7A16); }
body.neu .n-zk .n-zk-paarliste { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.neu .n-zk .n-zk-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
body.neu .n-zk .n-zk-paar input { font: inherit; font-size: 14px; color: var(--n-text); background: var(--n-surface-2); border: 0; border-radius: 10px; padding: 8px 10px; min-width: 0; }
body.neu .n-zk .n-zk-paar input:focus { outline: 0; box-shadow: var(--n-fokus); background: var(--n-bg); }
body.neu .n-zk .n-zk-paar .n-zk-breit { grid-column: 1 / -1; }
body.neu .n-zk .n-zk-paar input:nth-child(3):last-child { grid-column: 1 / -1; }
body.neu .n-zk .n-zk-gebiet { margin-bottom: 12px; }
body.neu .n-zk .n-zk-senden { position: sticky; bottom: 12px; background: var(--n-surface); padding: 12px 16px; border-radius: 16px; box-shadow: var(--n-schatten, 0 6px 24px rgba(0,0,0,.12)); z-index: 2; }
body.neu .n-zk .n-vo-warten { font-size: 13px; color: var(--n-text-2); }
body.neu .n-zk .n-zk-code { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: var(--n-text); background: var(--n-surface); border: 0; border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--n-hair); resize: vertical; }
body.neu .n-zk .n-zk-code:focus { outline: 0; box-shadow: var(--n-fokus); }
body.neu .n-zk .n-zk-pre { margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 520px; overflow: auto; }
body.neu .n-zk .n-zk-zusammenfassung { font-size: 15px; color: var(--n-text); }
body.neu .n-zk .n-zk-gut { color: var(--n-oliv, #6B7A16); }
body.neu .n-zk .n-zk-fehler > span:last-child { color: var(--n-rot, #D33); font-size: 13.5px; line-height: 1.45; }
body.neu .n-zk .n-zk-band { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--n-surface-2); font-size: 13px; }
body.neu .n-zk .n-zk-band-8 { background: var(--n-lime); color: #1E1F10; }
body.neu .n-zk .n-zk-band-6 { background: rgba(201, 215, 56, .4); }
body.neu .n-zk .n-zk-band-1 { background: rgba(255, 59, 48, .14); color: #B3261E; }
body.neu .n-zk .n-einst-aktionen form { display: inline-flex; align-items: center; gap: 10px; }
body.neu .n-zk .n-einst-abschnitt > h2 .anzahl { font-weight: 400; font-size: 12.5px; color: var(--n-text-3); margin-left: 10px; }
@media (max-width: 900px) {
  body.neu .n-zk .n-zk-paar { grid-template-columns: 1fr; }
  body.neu .n-zk .n-zk-senden { bottom: 0; border-radius: 16px 16px 0 0; }
}

/* ══ Segmente: Reiter, Tag, „auch in …" (14.10.2026, Migration 137) ════════
   Sechs feste Farben je Segment, in beiden Themen; das SSC-Grün bleibt den
   Knöpfen und dem Fälligen vorbehalten, damit ein Segment nie wie eine
   Handlung aussieht. Erscheint nur bei Mandanten mit mehr als einem Segment. */
body.neu { --n-seg-1: #2F6FBF; --n-seg-2: #D9822B; --n-seg-3: #7A5AC4; --n-seg-4: #2A9D8F; --n-seg-5: #C2407A; --n-seg-6: #8A7A2E;
  --n-seg-1-bg: rgba(47,111,191,.12); --n-seg-2-bg: rgba(217,130,43,.14); --n-seg-3-bg: rgba(122,90,196,.13); --n-seg-4-bg: rgba(42,157,143,.14); --n-seg-5-bg: rgba(194,64,122,.12); --n-seg-6-bg: rgba(138,122,46,.14); }
body.neu.n-dunkel, [data-thema="dunkel"] body.neu { --n-seg-1: #6FA3E8; --n-seg-2: #F0A75A; --n-seg-3: #B09CE8; --n-seg-4: #5EC8BA; --n-seg-5: #E87AAE; --n-seg-6: #C9B45A;
  --n-seg-1-bg: rgba(111,163,232,.16); --n-seg-2-bg: rgba(240,167,90,.16); --n-seg-3-bg: rgba(176,156,232,.16); --n-seg-4-bg: rgba(94,200,186,.16); --n-seg-5-bg: rgba(232,122,174,.16); --n-seg-6-bg: rgba(201,180,90,.16); }
@media (prefers-color-scheme: dark) { html:not([data-thema="hell"]) body.neu { --n-seg-1: #6FA3E8; --n-seg-2: #F0A75A; --n-seg-3: #B09CE8; --n-seg-4: #5EC8BA; --n-seg-5: #E87AAE; --n-seg-6: #C9B45A;
  --n-seg-1-bg: rgba(111,163,232,.16); --n-seg-2-bg: rgba(240,167,90,.16); --n-seg-3-bg: rgba(176,156,232,.16); --n-seg-4-bg: rgba(94,200,186,.16); --n-seg-5-bg: rgba(232,122,174,.16); --n-seg-6-bg: rgba(201,180,90,.16); } }
body.neu .n-seg-1 { --seg: var(--n-seg-1); --seg-bg: var(--n-seg-1-bg); } body.neu .n-seg-2 { --seg: var(--n-seg-2); --seg-bg: var(--n-seg-2-bg); }
body.neu .n-seg-3 { --seg: var(--n-seg-3); --seg-bg: var(--n-seg-3-bg); } body.neu .n-seg-4 { --seg: var(--n-seg-4); --seg-bg: var(--n-seg-4-bg); }
body.neu .n-seg-5 { --seg: var(--n-seg-5); --seg-bg: var(--n-seg-5-bg); } body.neu .n-seg-6 { --seg: var(--n-seg-6); --seg-bg: var(--n-seg-6-bg); }
body.neu .n-segtag { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 1px 9px 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--seg); background: var(--seg-bg); white-space: nowrap; vertical-align: middle; text-transform: none; letter-spacing: 0; }
body.neu .n-segtag::before, body.neu .n-segpunkt { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--seg); flex: none; }
body.neu .n-segpunkt { width: 8px; height: 8px; margin-right: 8px; vertical-align: 0; }
body.neu .seitenkopf h2 small .n-segtag, body.neu .n-kopf-stamm h2 small .n-segtag { margin-left: 2px; }
body.neu .n-segreiter { margin: 0 0 14px; }
body.neu .n-segreiter a { display: inline-flex; align-items: center; gap: 0; }
body.neu .n-pl-kopf .n-segreiter { margin: 0; align-self: center; }
body.neu .n-pl-karte .n-segtag { margin: 2px 0 0; align-self: flex-start; }
body.neu .n-auchin { margin: 8px 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--n-surface-2); color: var(--n-text-2); font-size: 13.5px; line-height: 1.45; }
body.neu .n-auchin p { margin: 0; } body.neu .n-auchin p + p { margin-top: 6px; }
body.neu .n-auchin b { color: var(--n-text); font-weight: 600; }
body.neu .n-auchin q { font-style: italic; }
body.neu .n-auchin a { color: var(--n-text); font-weight: 600; text-decoration: none; margin-left: 4px; }
body.neu .n-auchin a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { body.neu .n-segtag { font-size: 11px; padding: 0 7px 0 6px; } }

/* ══ Segment-Umschalter als „Liquid Glass" (14.10.2026) ═══════════════════
   Eine Glasleiste, in der ein heller Chip zum gewählten Segment gleitet —
   die Bewegung macht `_segment_reiter.html` beim Klick, bevor die Seite
   wechselt. Kein backdrop-filter auf der Kopfleiste (die Regel bleibt);
   dieser Umschalter steht im Inhalt. */
body.neu .n-segreiter {
  position: relative; display: inline-flex; align-items: center; gap: 0; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--n-surface) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06), 0 0 0 1px var(--n-hair);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
body.neu .n-segreiter::-webkit-scrollbar { display: none; }
body.neu .n-segreiter .n-segglas {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 4px 14px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .6);
  transition: transform .42s cubic-bezier(.22, 1.2, .36, 1), width .42s cubic-bezier(.22, 1.2, .36, 1);
  will-change: transform, width;
}
body.neu .n-segreiter.n-ohne-animation .n-segglas { transition: none; }
body.neu .n-segreiter a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 550; color: var(--n-text-2); text-decoration: none; white-space: nowrap; background: transparent; box-shadow: none;
  transition: color .25s ease, transform .25s ease;
}
body.neu .n-segreiter a:hover { color: var(--n-text); background: transparent; }
body.neu .n-segreiter a:active { transform: scale(.97); }
body.neu .n-segreiter a[aria-current] { color: var(--n-text); font-weight: 600; background: transparent; box-shadow: none; }
body.neu .n-segreiter a:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(189, 205, 0, .55); }
body.neu .n-segreiter .n-segpunkt { margin-right: 0; }
body.neu .n-segreiter .n-seg-0 { --seg: var(--n-text-3); --seg-bg: transparent; }
body.neu .n-segreiter a.n-alle .n-segpunkt { background: conic-gradient(var(--n-seg-1), var(--n-seg-2), var(--n-seg-3), var(--n-seg-4), var(--n-seg-1)); }
[data-thema="dunkel"] body.neu .n-segreiter, body.neu.n-dunkel .n-segreiter {
  background: color-mix(in srgb, var(--n-surface) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 1px var(--n-hair);
}
[data-thema="dunkel"] body.neu .n-segreiter .n-segglas {
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .12));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}
@media (prefers-color-scheme: dark) {
  html:not([data-thema="hell"]) body.neu .n-segreiter { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 1px var(--n-hair); }
  html:not([data-thema="hell"]) body.neu .n-segreiter .n-segglas { background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .12)); box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22); }
}
@media (prefers-reduced-motion: reduce) { body.neu .n-segreiter .n-segglas, body.neu .n-segreiter a { transition: none; } }
@media (max-width: 720px) { body.neu .n-segreiter a { padding: 0 12px; font-size: 13px; min-height: 32px; } }

/* Liquid Glass, zweite Fassung (14.10.2026): mehr Glas, mehr Chip. Die Leiste
   ist eine durchscheinende Rinne mit Lichtkante, der Chip ein weisses
   Glasplättchen mit Glanz oben und weichem Schatten. Nie volle Breite. */
body.neu .n-segreiter {
  width: auto; align-self: flex-start;
  background: linear-gradient(180deg, rgba(60, 60, 59, .10), rgba(60, 60, 59, .06));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .04);
}
body.neu .n-segreiter .n-segglas {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .86));
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, .03), 0 0 0 .5px rgba(0, 0, 0, .04);
}
body.neu .n-segreiter .n-segglas::after {
  content: ""; position: absolute; inset: 1px 10% auto 10%; height: 40%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); pointer-events: none;
}
[data-thema="dunkel"] body.neu .n-segreiter { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .06); }
[data-thema="dunkel"] body.neu .n-segreiter .n-segglas { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .12)); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28); }
[data-thema="dunkel"] body.neu .n-segreiter .n-segglas::after { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); }
@media (prefers-color-scheme: dark) {
  html:not([data-thema="hell"]) body.neu .n-segreiter { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .06); }
  html:not([data-thema="hell"]) body.neu .n-segreiter .n-segglas { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .12)); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28); }
  html:not([data-thema="hell"]) body.neu .n-segreiter .n-segglas::after { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); }
}
@media (max-width: 640px) {
  body.neu .n-segreiter { width: auto; max-width: 100%; }
  body.neu .n-segreiter a { flex: none; padding: 0 12px; }
}


/* Segment-Umschalter, dritte Fassung (14.10.2026, nach dem Video): wie ein
   Segmented Control bei Apple. Flache Rinne, ein Chip mit feiner Kante und
   weichem Schatten, Federkurve beim Gleiten, Beschriftung blendet weich. */
body.neu .n-segreiter { padding: 3px; border-radius: 12px; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(120, 120, 128, .14); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .04); }
body.neu .n-segreiter .n-segglas { top: 3px; height: calc(100% - 6px); border-radius: 9px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 3px 8px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform .38s cubic-bezier(.3, 1.25, .4, 1), width .38s cubic-bezier(.3, 1.25, .4, 1); }
body.neu .n-segreiter .n-segglas::after { display: none; }
body.neu .n-segreiter a { min-height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 550; color: var(--n-text-2); transition: color .22s ease, transform .2s ease; }
body.neu .n-segreiter a[aria-current] { color: var(--n-text); font-weight: 600; }
body.neu .n-segreiter a:active { transform: scale(.97); }
[data-thema="dunkel"] body.neu .n-segreiter { background: rgba(120, 120, 128, .24); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .04); }
[data-thema="dunkel"] body.neu .n-segreiter .n-segglas { background: #636366; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .3), inset 0 .5px 0 rgba(255, 255, 255, .18); }
[data-thema="dunkel"] body.neu .n-segreiter a[aria-current] { color: #fff; }
@media (prefers-color-scheme: dark) {
  html:not([data-thema="hell"]) body.neu .n-segreiter { background: rgba(120, 120, 128, .24); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .04); }
  html:not([data-thema="hell"]) body.neu .n-segreiter .n-segglas { background: #636366; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .3), inset 0 .5px 0 rgba(255, 255, 255, .18); }
  html:not([data-thema="hell"]) body.neu .n-segreiter a[aria-current] { color: #fff; }
}


/* Segment-Umschalter, Geometrie (14.10.2026, 19 Uhr): Der Chip liegt über
   Abstände oben und unten in der Rinne, nicht über eine berechnete Höhe —
   so sitzt er bei jeder Schriftgrösse mittig. Kein Scrollbereich am Desktop,
   der Schatten wird sonst beschnitten. */
body.neu .n-segreiter { overflow: visible; position: relative; }
body.neu .n-segreiter .n-segglas { top: 3px; bottom: 3px; left: 0; height: auto; }
body.neu .n-segreiter a { position: relative; z-index: 1; }
@media (max-width: 720px) { body.neu .n-segreiter { overflow-x: auto; overflow-y: hidden; } }

/* ═══ Marktradar (Migration 139, docs/radar/) ═══════════════════════════════
   Eine Farbe je Muster, überall dieselbe — Liste, Karte, Tafel, Widget:
   Abwanderung rot, Wiedereinstieg orange, Wachstum petrol, Sortiment blau,
   einzelnes Signal im SSC-Grün (als Fläche, nie als Schrift auf Hell). */
body.neu .n-rm-abwanderung      { --rm: var(--n-rot);    --rm-bg: var(--n-rot-bg); }
body.neu .n-rm-wiedereinstieg   { --rm: var(--n-orange); --rm-bg: var(--n-orange-bg); }
body.neu .n-rm-wachstumsoffensive { --rm: var(--n-petrol); --rm-bg: var(--n-petrol-bg); }
body.neu .n-rm-sortimentsausbau { --rm: var(--n-blau);   --rm-bg: var(--n-blau-bg); }
body.neu .n-rm-einzeln          { --rm: var(--n-lime);   --rm-bg: var(--n-gruen-bg); }

body.neu .n-radar { gap: 18px; }
body.neu .n-radar .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.neu .n-radar-kopf .n-datum { display: inline-flex; align-items: center; gap: 6px; }
body.neu .n-radar-einleitung { margin: 6px 0 0; max-width: 720px; color: var(--n-text-2); font-size: 15px; line-height: 1.5; }

/* Umschalter der Ansichten — ein Segmented Control */
body.neu .n-radar-ansichten { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--n-surface-2); box-shadow: inset 0 0 0 1px var(--n-hair); }
body.neu .n-radar-ansichten a { padding: 7px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--n-text-2);
  text-decoration: none; transition: background .2s ease, color .2s ease; }
body.neu .n-radar-ansichten a:hover { color: var(--n-text); }
body.neu .n-radar-ansichten a[aria-current] { background: var(--n-surface); color: var(--n-text); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.05); }

/* Kennzahlen — zugleich Filter */
body.neu .n-radar-kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Die Vorgabefarbe sitzt am Raster, nicht an der Kachel: Sonst überstimmte
   sie die Musterklasse derselben Kachel (gleiche Spezifität, spätere Regel). */
body.neu .n-radar-kz { --rm: var(--n-text-3); --rm-bg: var(--n-surface-2); }
body.neu .n-radar-kzk { position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px 14px 18px; border-radius: var(--n-r); background: var(--n-surface); box-shadow: var(--n-schatten);
  text-decoration: none; color: var(--n-text); overflow: hidden; transition: transform .35s var(--n-feder), box-shadow .2s ease; }
body.neu .n-radar-kzk::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rm); }
body.neu .n-radar-kzk:hover { transform: translateY(-2px); box-shadow: var(--n-schatten-hoch); }
body.neu .n-radar-kzk b { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
body.neu .n-radar-kzk span { font-size: 14px; font-weight: 600; }
body.neu .n-radar-kzk small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-radar-kzk.n-an { box-shadow: 0 0 0 2px var(--rm), var(--n-schatten); background: linear-gradient(160deg, var(--rm-bg), var(--n-surface) 70%); }
body.neu .n-radar-kzk:first-child.n-an { box-shadow: 0 0 0 2px var(--n-lime), var(--n-schatten); }

/* Filter */
body.neu .n-radar-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.neu .n-radar-suche { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px;
  background: var(--n-surface); box-shadow: var(--n-schatten); color: var(--n-text-3); }
body.neu .n-radar-suche input { flex: 1; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--n-text); outline: none; min-width: 0; }
body.neu .n-radar-wahl select { height: 40px; padding: 0 30px 0 12px; border-radius: 12px; border: 0; background-color: var(--n-surface);
  box-shadow: var(--n-schatten); font: inherit; font-size: 14px; color: var(--n-text); cursor: pointer; }
body.neu .n-radar-wahl select:focus-visible, body.neu .n-radar-suche:focus-within { box-shadow: var(--n-fokus); }
body.neu .n-radar-zahl { margin: 0; font-size: 13px; color: var(--n-text-3); }
body.neu .n-radar-export { margin: 4px 0 0; display: flex; justify-content: flex-end; }

/* Die Bewegungen */
body.neu .n-radar-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.neu .n-radar-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 16px 18px; border-radius: var(--n-r-l); background: var(--n-surface); box-shadow: var(--n-schatten);
  color: var(--n-text); text-decoration: none; transition: transform .35s var(--n-feder), box-shadow .2s ease; }
body.neu .n-radar-zeile:hover { transform: translateY(-2px); box-shadow: var(--n-schatten-hoch); }
body.neu .n-radar-zeile:active { transform: scale(.992); }
body.neu .n-radar-zeile.n-radar-hoch { background: linear-gradient(110deg, var(--rm-bg), var(--n-surface) 38%); }
body.neu .n-radar-ring { --groesse: 44px; flex: none; width: var(--groesse); height: var(--groesse); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--rm) calc(var(--wert) * 1%), var(--n-surface-2) 0); position: relative; }
body.neu .n-radar-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--n-surface); }
body.neu .n-radar-ring b { position: relative; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
body.neu .n-radar-mitte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body.neu .n-radar-wer b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
body.neu .n-radar-wer small { display: block; margin-top: 1px; font-size: 13px; color: var(--n-text-3); }
body.neu .n-radar-was { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
body.neu .n-radar-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--rm, var(--n-lime)); flex: none; box-shadow: 0 0 0 3px var(--rm-bg, transparent); }
body.neu .n-radar-wichtig { margin-left: 2px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-radar-satz { font-size: 14px; line-height: 1.5; color: var(--n-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.neu .n-radar-vorschlag { font-size: 14px; line-height: 1.45; color: var(--n-text); padding: 8px 12px; border-radius: 12px; background: var(--n-surface-2); }
body.neu .n-radar-vorschlag b { font-weight: 650; }
body.neu .n-radar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
body.neu .n-radar-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-radar-chip.n-rg-sortiment { background: var(--n-blau-bg); color: var(--n-blau); }
body.neu .n-radar-chip.n-rg-stellen { background: var(--n-petrol-bg); color: var(--n-petrol); }
body.neu .n-radar-chip.n-rg-kauf { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-radar-chip.n-rg-kontakt { background: var(--n-orange-bg); color: var(--n-orange-text); }
body.neu .n-radar-chip-weich { opacity: .72; }
body.neu .n-radar-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 64px; color: var(--n-text-3); font-size: 12px; }
body.neu .n-radar-sprung { padding: 2px 8px; border-radius: 99px; background: var(--n-lime); color: #1E1F10; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
body.neu .n-radar-sprung.n-radar-sinkt { background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-radar-pfeil { margin-top: auto; color: var(--n-text-3); transition: transform .3s var(--n-feder); }
body.neu .n-radar-zeile:hover .n-radar-pfeil { transform: translateX(3px); }

/* Markt */
body.neu .n-radar-block { padding: 20px 22px; border-radius: var(--n-r-l); background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .n-radar .n-radar-block h2 { margin: 0 0 12px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; text-transform: none; color: var(--n-text); }
body.neu .n-radar .n-radar-block h2 small { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--n-text-3); letter-spacing: 0; text-transform: none; }
body.neu .n-radar-block h3 { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--n-text-2); text-transform: uppercase; letter-spacing: .06em; }
body.neu .n-radar-hinweis { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-text-2); }
body.neu .n-radar-regal { display: flex; flex-wrap: wrap; gap: 14px; }
body.neu .n-radar-regalk { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--n-r); background: var(--n-surface-2); font-size: 14.5px; }
body.neu .n-radar-regalk small { display: block; color: var(--n-text-3); font-size: 12.5px; }
body.neu .n-radar-regalring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--n-lime) calc(var(--wert) * 1%), var(--n-hair-2) 0); }
body.neu .n-radar-regalring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--n-surface-2); }
body.neu .n-radar-regalring b { position: relative; font-size: 15px; font-weight: 750; }
body.neu .n-radar-markt { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.neu .n-radar-mz summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 160px 64px 170px;
  align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; }
body.neu .n-mz-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
body.neu .n-mz-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-radar-rest { margin-top: 10px; font-size: 13px; color: var(--n-text-3); }
body.neu .n-radar-aussen { margin-top: 8px; font-size: 13px; color: var(--n-text-3); }
body.neu .n-radar-was-karte .n-knopf:not(.n-knopf-primaer) { background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .n-radar-mz summary::-webkit-details-marker { display: none; }
body.neu .n-radar-mz summary:hover { background: var(--n-surface-2); }
body.neu .n-radar-mz summary small { color: var(--n-text-3); font-size: 12.5px; text-align: right; }
body.neu .n-radar-mz.n-mz-eigen summary b { color: var(--n-text); }
body.neu .n-radar-art { padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--n-lime); color: #1E1F10; justify-self: start; }
body.neu .n-radar-art.n-wett { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-radar-balken { display: flex; gap: 2px; height: 8px; border-radius: 4px; background: var(--n-surface-2); overflow: hidden; }
body.neu .n-radar-balken i { display: block; height: 8px; border-radius: 4px; min-width: 0; }
body.neu .n-radar-balken .n-plus { background: var(--n-lime); }
body.neu .n-radar-balken .n-minus { background: var(--n-rot); opacity: .7; }
body.neu .n-radar-saldo em { font-style: normal; font-weight: 750; font-variant-numeric: tabular-nums; }
body.neu .n-radar-saldo .n-plus { color: var(--n-oliv-text); }
body.neu .n-radar-saldo .n-minus { color: var(--n-rot); }
body.neu .n-radar-mzliste { padding: 2px 12px 12px; font-size: 13.5px; color: var(--n-text-2); }
body.neu .n-radar-mzliste p { margin: 4px 0; line-height: 1.6; }
body.neu .n-radar-mzliste a { color: var(--n-text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--n-hair-2); }
body.neu .n-radar-alle { margin-top: 10px; }
body.neu .n-radar-alle summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--n-text-2); }
body.neu .n-radar-tabelle { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
body.neu .n-radar-tabelle th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--n-text-3); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; }
body.neu .n-radar-tabelle td { padding: 7px 8px; border-top: 1px solid var(--n-hair); }
body.neu .n-radar-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.neu .n-radar-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.neu .n-radar-bars li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
body.neu .n-radar-bars li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--n-text-2); }
body.neu .n-radar-bars li i { display: block; height: 10px; border-radius: 5px; background: var(--n-lime); min-width: 4px; }
body.neu .n-radar-bars li b { font-variant-numeric: tabular-nums; font-size: 13px; }
body.neu .n-radar-regionen li i { background: var(--n-petrol); opacity: .8; }
body.neu .n-radar-wellen { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--n-text-2); }
body.neu .n-radar-wellen a { color: var(--n-text); text-decoration: none; }

/* Karte — der Bestand ist die Landkarte */
/* Umrisse, Ziehen und Zoomen (16.10.2026). Schriftgrössen und Radien setzt
   das Skript (`radar_karte.js`) je Zoom als Attribut — hier darum KEINE
   font-size für die Namen: Eine Regel im Stylesheet schlüge das Attribut. Der
   Abstand der Buchstaben in em, sonst wüchse er mit dem Zoom. */
body.neu .n-radar-karte { --rk-meer: color-mix(in srgb, var(--n-blau) 9%, var(--n-surface-2)); --rk-land: var(--n-surface);
  --rk-grenze: color-mix(in srgb, var(--n-text-3) 62%, transparent); --rk-bl: color-mix(in srgb, var(--n-text-3) 30%, transparent);
  position: relative; border-radius: var(--n-r); background: var(--rk-meer); overflow: hidden; outline: none;
  box-shadow: inset 0 0 0 1px var(--n-hair); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body.neu .n-radar-karte { --rk-meer: color-mix(in srgb, var(--n-blau) 7%, var(--n-bg)); --rk-land: var(--n-surface-2); }
}
:root[data-thema="dunkel"] body.neu .n-radar-karte { --rk-meer: color-mix(in srgb, var(--n-blau) 7%, var(--n-bg)); --rk-land: var(--n-surface-2); }
body.neu .n-radar-karte:focus-visible { box-shadow: var(--n-fokus); }
body.neu .n-radar-karte > svg { display: block; width: 100%; height: auto; max-height: 68vh; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
body.neu .n-radar-karte.n-rk-zieht > svg { cursor: grabbing; }
body.neu .n-rk-land { fill: var(--rk-land); }
body.neu .n-rk-see { fill: var(--rk-meer); stroke: var(--rk-bl); stroke-width: .6; vector-effect: non-scaling-stroke; }
body.neu .n-rk-grenze, body.neu .n-rk-strittig, body.neu .n-rk-bl { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.neu .n-rk-grenze { stroke: var(--rk-grenze); stroke-width: 1.1; }
body.neu .n-rk-strittig { stroke: var(--rk-grenze); stroke-width: 1.1; stroke-dasharray: 4 3; }
body.neu .n-rk-bl { stroke: var(--rk-bl); stroke-width: .8; }
body.neu .n-rk-rand .n-rk-meer { fill: var(--rk-meer); }
body.neu .n-rk-rand stop { stop-color: var(--rk-meer); }
body.neu .n-rk-namen text, body.neu .n-rk-staedte text { paint-order: stroke; stroke: var(--rk-land); stroke-width: .28em; stroke-linejoin: round; pointer-events: none; }
body.neu .n-rk-landname { fill: var(--n-text-3); opacity: .75; font-weight: 650; letter-spacing: .16em; }
body.neu .n-rk-blname { fill: var(--n-text-3); opacity: .7; font-style: italic; font-weight: 500; }
body.neu .n-rk-staedte circle { fill: var(--n-text-3); opacity: .6; }
body.neu .n-rk-staedte text { fill: var(--n-text-2); opacity: .9; font-weight: 600; letter-spacing: .01em; }
body.neu .n-rk-steuer { position: absolute; top: 12px; right: 12px; display: grid; gap: 1px; border-radius: 12px; overflow: hidden;
  background: var(--n-hair-2); box-shadow: var(--n-schatten); }
body.neu .n-rk-steuer button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: var(--n-glass); color: var(--n-text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.neu .n-rk-steuer button:hover:not(:disabled) { background: var(--n-surface); }
body.neu .n-rk-steuer button:disabled { cursor: default; color: var(--n-text-3); opacity: .55; }
body.neu .n-rk-steuer button:focus-visible { outline: none; box-shadow: inset var(--n-fokus); }
body.neu .n-rk-steuer svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body.neu .n-rk-tipp { margin: 8px 2px 0; font-size: 12.5px; color: var(--n-text-3); }
/* Auf dem Telefon: Karte im 4:3-Format statt 1000 × 540 (gemessen 16.10.2026
   am iPhone 14 Pro: 329 × 178 px, die Knöpfe nahmen mehr als die halbe Höhe),
   Knöpfe nebeneinander. */
@media (max-width: 640px) {
  body.neu .n-radar-karte > svg { aspect-ratio: 4 / 3 !important; }
  body.neu .n-rk-steuer { top: 8px; right: 8px; grid-auto-flow: column; border-radius: 10px; }
  body.neu .n-rk-steuer button { width: 32px; height: 30px; }
}
body.neu .n-rk-bestand circle { fill: var(--n-text-3); opacity: .28; }
body.neu .n-rk-bewegt circle { fill: var(--rm); fill-opacity: .82; stroke: var(--rk-land); stroke-width: 2; cursor: pointer; vector-effect: non-scaling-stroke;
  transition: fill-opacity .2s ease, transform .3s var(--n-feder); transform-box: fill-box; transform-origin: center; }
body.neu .n-rk-bewegt circle:hover { fill-opacity: 1; transform: scale(1.25); }
body.neu .n-rk-bewegt circle.n-rk-hoch { animation: n-radar-puls 2.4s var(--n-sanft) infinite; }
@keyframes n-radar-puls { 0%, 100% { stroke-width: 2; } 50% { stroke-width: 6; stroke: color-mix(in srgb, var(--rm) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { body.neu .n-rk-bewegt circle.n-rk-hoch { animation: none; } }
body.neu .n-radar-legende { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--n-text-2); }
body.neu .n-radar-legende li { display: inline-flex; align-items: center; gap: 6px; }
body.neu .n-radar-legende i, body.neu .n-radar-kartenliste i { width: 10px; height: 10px; border-radius: 50%; background: var(--rm); display: inline-block; }
body.neu .n-radar-legende .n-rk-grau i { background: var(--n-text-3); opacity: .35; }
body.neu .n-radar-kartenliste { margin: 14px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; font-size: 13.5px; }
body.neu .n-radar-kartenliste li { break-inside: avoid; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
body.neu .n-radar-kartenliste a { color: var(--n-text); font-weight: 600; text-decoration: none; }
body.neu .n-radar-kartenliste small { color: var(--n-text-3); }

/* Daten */
body.neu .n-radar-import { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
body.neu .n-radar-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 8px; }
body.neu .n-radar-importstand, body.neu .n-radar-stand { margin: 10px 0 0; font-size: 14px; color: var(--n-text-2); }
body.neu .n-radar-importstand p { margin: 4px 0; }
body.neu .n-radar-offen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.neu .n-radar-offen li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: 12px; background: var(--n-surface-2); font-size: 14px; }
body.neu .n-radar-offen small { color: var(--n-text-3); }
body.neu .n-radar-zuordnen { margin-left: auto; }
body.neu .n-radar-wirkung { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
body.neu .n-radar-wirkung > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--n-r); background: var(--n-surface-2); }
body.neu .n-radar-wirkung b { font-size: 30px; font-weight: 750; letter-spacing: -.03em; }
body.neu .n-radar-wirkung span { font-size: 14px; }
body.neu .n-radar-wirkung small { color: var(--n-text-3); font-size: 12.5px; }
body.neu .n-radar-meldung { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--n-gruen-bg); color: var(--n-text); font-size: 14px; }
body.neu .n-radar-fehler { background: var(--n-rot-bg); color: var(--n-rot); }

/* Tafel: „Was ist passiert?“ */
body.neu .n-kl-radar .n-radar-sym { background: var(--rm-bg); color: var(--rm); }
body.neu .n-kl-radar.n-rm-einzeln .n-radar-sym { background: var(--n-lime); color: #1E1F10; }
body.neu .n-kl-radar[open] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rm) 45%, transparent), var(--n-schatten); }
body.neu .n-radar-tafel { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
body.neu .n-radar-was-karte { padding: 14px 16px; border-radius: var(--n-r); background: linear-gradient(150deg, var(--rm-bg), var(--n-surface-2) 75%); }
body.neu .n-radar-ueber { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-radar-satz-gross { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--n-text); }
body.neu .n-radar-hyp, body.neu .n-radar-vor { margin: 0 0 6px; display: grid; grid-template-columns: 86px 1fr; gap: 8px; font-size: 14px; line-height: 1.45; }
body.neu .n-radar-hyp span, body.neu .n-radar-vor span { font-size: 12px; font-weight: 700; color: var(--n-text-3); padding-top: 1px; }
body.neu .n-radar-hyp { font-weight: 650; }
body.neu .n-radar-was-karte .n-radar-knoepfe { margin-top: 10px; }
body.neu .n-radar-kaufbild { position: relative; height: 40px; margin: 4px 6px 16px; }
body.neu .n-kb-linie { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--n-hair-2); border-radius: 2px; }
body.neu .n-kb-punkt { position: absolute; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; background: var(--n-lime); box-shadow: 0 0 0 2px var(--n-surface); }
body.neu .n-kb-faellig { position: absolute; top: 6px; bottom: 6px; width: 0; border-left: 2px dashed var(--n-rot); }
/* Von „hätte kaufen sollen“ bis heute: gestrichelt rot — die Lücke selbst. */
body.neu .n-kb-luecke { position: absolute; top: 50%; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--n-rot) 0 6px, transparent 6px 10px); }
body.neu .n-kb-heute { position: absolute; right: 0; bottom: -16px; font-size: 11px; color: var(--n-text-3); }
body.neu .n-radar-signale { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.neu .n-radar-signale li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 6px; border-top: 1px solid var(--n-hair); }
body.neu .n-radar-signale li:first-child { border-top: 0; }
body.neu .n-radar-sig-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-rg-sortiment .n-radar-sig-ico { background: var(--n-blau-bg); color: var(--n-blau); }
body.neu .n-rg-stellen .n-radar-sig-ico { background: var(--n-petrol-bg); color: var(--n-petrol); }
body.neu .n-rg-kauf .n-radar-sig-ico { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-rg-kontakt .n-radar-sig-ico { background: var(--n-orange-bg); color: var(--n-orange-text); }
body.neu .n-radar-sig-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; min-width: 0; }
body.neu .n-radar-sig-text b { font-weight: 650; }
body.neu .n-radar-sig-text small { font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-radar-sig-text > span { color: var(--n-text-2); }
body.neu .n-radar-quellen { font-size: 12.5px; }
body.neu .n-radar-quellen a { color: var(--n-text-2); text-decoration: none; border-bottom: 1px solid var(--n-hair-2); }
body.neu .n-radar-weich { opacity: .8; }
body.neu .n-radar-beendet .n-radar-sig-text b { text-decoration: line-through; text-decoration-color: var(--n-text-3); }
body.neu .n-radar-daumen { display: inline-flex; gap: 4px; }
body.neu .n-radar-d { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--n-surface-2); color: var(--n-text-3); transition: transform .3s var(--n-feder), background .2s ease; }
body.neu .n-radar-d:hover { color: var(--n-text); transform: scale(1.08); }
body.neu .n-radar-d-irrelevant svg { transform: rotate(180deg); }
body.neu .n-radar-d-relevant.n-an { background: var(--n-lime); color: #1E1F10; }
body.neu .n-radar-d-irrelevant.n-an { background: var(--n-rot-bg); color: var(--n-rot); }
body.neu .n-radar-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; color: var(--n-text-3); }
body.neu .n-radar-spark { width: 90px; height: 24px; flex: none; }
body.neu .n-radar-spark polyline { fill: none; stroke: var(--rm, var(--n-lime)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
body.neu .n-radar-jetzt { margin-left: auto; border: 0; padding: 6px 12px; border-radius: 99px; background: var(--n-surface-2); color: var(--n-text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.neu .n-radar-jetzt:hover { background: var(--n-hair-2); }
body.neu .n-radar-jetzt.htmx-request { opacity: .6; cursor: progress; }
body.neu .n-radar-jetzt.htmx-request::after { content: " …"; }

/* Verlauf */
body.neu .n-vl .n-vl-sym-radar { background: var(--n-lime); color: #1E1F10; }
body.neu .n-vl .n-vl-radar-aus .n-vl-sym-radar { background: var(--n-surface-2); color: var(--n-text-3); }
body.neu .n-vl-radartext { font-size: 14px; line-height: 1.45; color: var(--n-text-2); }
body.neu .n-vl-quelle { color: var(--n-text-3); font-size: 12.5px; text-decoration: none; border-bottom: 1px solid var(--n-hair-2); }

/* Widget */
body.neu .n-wg-radar { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; min-height: 184px; height: 100%;
  box-sizing: border-box; border-radius: var(--n-r-l); box-shadow: var(--n-schatten); text-decoration: none; color: var(--n-text);
  background: linear-gradient(160deg, var(--f-bg), var(--n-surface) 62%); transition: transform .4s var(--n-feder), box-shadow .2s ease; }
body.neu .n-wg-radar:hover { transform: translateY(-3px); box-shadow: var(--n-schatten-hoch); }
body.neu .n-wg-radar .n-kachel-cta { margin-top: auto; }
body.neu .n-wg-p.n-rm-abwanderung, body.neu .n-wg-p.n-rm-wiedereinstieg, body.neu .n-wg-p.n-rm-einzeln { background: var(--rm); }

@media (max-width: 900px) {
  body.neu .n-radar-kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.neu .n-radar-zwei { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.neu .n-radar-ansichten { align-self: stretch; }
  body.neu .n-radar-ansichten a { flex: 1; text-align: center; padding: 7px 6px; }
  body.neu .n-radar-zeile { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; }
  body.neu .n-radar-rechts { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
  body.neu .n-radar-pfeil { display: none; }
  body.neu .n-radar-kzk b { font-size: 28px; }
  body.neu .n-radar-mz summary { grid-template-columns: 1fr auto; }
  body.neu .n-radar-mz summary .n-radar-balken, body.neu .n-radar-mz summary small { display: none; }
  body.neu .n-radar-kartenliste { columns: 1; }
  body.neu .n-radar-wirkung { grid-template-columns: 1fr; }
  body.neu .n-radar-block { padding: 16px; }
  body.neu .n-radar-hyp, body.neu .n-radar-vor { grid-template-columns: 1fr; gap: 0; }
  body.neu .n-wg-radar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; padding: 14px 16px; min-height: 0; }
  body.neu .n-wg-radar > .n-kachel-kopf, body.neu .n-wg-radar .n-kachel-cta { grid-column: 1 / -1; }
}

/* Anhänge wählen — Mail-Dialog, Sende-Blatt, Vorschlag, Postfach (22.10.2026) */
body.neu .n-anh-wahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
body.neu .n-anh-titel { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--n-text-2); margin-right: 4px; }
body.neu .n-anh-wahl .n-chip, body.neu [data-md-anhaenge] .n-chip { cursor: pointer; }
body.neu .n-anh-neu { border: 1px dashed var(--n-hair-stark, var(--n-hair)); background: transparent; color: var(--n-text-2); gap: 4px; display: inline-flex; align-items: center; }
body.neu .n-anh-neu:hover { color: var(--n-text); border-color: var(--n-text-3); }
body.neu .n-anh-fest { cursor: default; }
body.neu .n-anh-meldung { font-size: 12.5px; color: var(--n-text-3); }
body.neu [data-md-anhaenge] > .n-anh-neu { margin: 0 14px 12px; }
body.neu [data-md-anhaenge] > .n-anh-meldung { margin: 0 14px 12px; }

/* ══ To-dos im Kalender wie Erinnerungen bei Apple (25.10.2026) ═════════════
   Ein Termin ist ein Block, ein To-do ein Kreis mit Titel: ohne Uhrzeit oben
   unter „ganztags" bzw. im Monat, mit Uhrzeit als schmale Zeile zu dieser
   Zeit — eine Erinnerung hat keine Dauer. Der Kreis hakt ab (gefüllt in
   SSC-Grün mit Haken), der Titel wird dann grau statt durchgestrichen. */
body.neu .n-k2 { --k-todo-strich: var(--n-lime-2, #ABBA29); }
body.neu .n-k2-e.n-k2-erinn { display: flex; align-items: center; gap: 6px; padding: 2px 5px 2px 4px; background: none; box-shadow: none; border-radius: 6px; }
body.neu .n-k2-e.n-k2-erinn:hover { background: color-mix(in srgb, var(--n-text) 6%, transparent); }
body.neu .n-k2-e.n-k2-erinn:focus-visible, body.neu .n-k2-block.n-k2-erinn:focus-visible { outline: 2px solid var(--n-lime-2, var(--n-lime)); outline-offset: 0; }
body.neu .n-k2-etitel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-k2-etitel b { font-weight: 600; color: var(--n-text-2); }
body.neu .n-k2-kreis { flex: none; position: relative; width: 13px; height: 13px; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--k-todo-strich); transition: background .15s ease, box-shadow .15s ease; }
body.neu .n-k2-kreis:hover { background: color-mix(in srgb, var(--n-lime) 30%, transparent); }
body.neu .n-k2-kreis:focus-visible { outline: 2px solid var(--n-lime-2, var(--n-lime)); outline-offset: 1px; }
body.neu .n-k2-kreis.n-an { background: var(--n-lime); box-shadow: inset 0 0 0 1.5px var(--k-todo-strich); }
body.neu .n-k2-kreis.n-an::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 6px; border: solid #1E1F10; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
body.neu .n-k2-erinn.n-k2-erledigt { text-decoration: none; opacity: 1; color: var(--n-text-3); }
body.neu .n-k2-erinn.n-k2-erledigt .n-k2-etitel, body.neu .n-k2-erinn.n-k2-erledigt > span:not(.n-k2-kreis) { color: var(--n-text-3); }
/* Mit Uhrzeit: eine Zeile, keine Dauer */
body.neu .n-k2-block.n-k2-erinn { height: 22px; flex-direction: row; align-items: center; gap: 6px; padding: 0 7px 0 5px;
  background: var(--n-surface); box-shadow: 0 0 0 1px var(--n-hair); border-radius: 6px; }
body.neu .n-k2-block.n-k2-erinn:hover { background: color-mix(in srgb, var(--n-lime) 12%, var(--n-surface)); }
body.neu .n-k2-block.n-k2-erinn > span:not(.n-k2-kreis) { flex: 0 1 auto; min-width: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
body.neu .n-k2-block.n-k2-erinn b { flex: none; margin-left: auto; font-weight: 500; }
body.neu .n-k2-zieht.n-k2-erinn { box-shadow: 0 0 0 1px var(--n-hair), 0 8px 22px rgba(20, 20, 18, .2) !important; }
/* Der Kreis ist kein Titel: die Regeln für `.n-k2-block span` (Zeilenzahl,
   Schrumpfen) drückten ihn im Raster zum Oval. */
body.neu .n-k2-block.n-k2-erinn > .n-k2-kreis { flex: none; display: block; width: 13px; height: 13px; min-width: 13px; overflow: visible; order: 0; }
body.neu .n-k2-block.n-k2-erinn > b { order: 2; }

/* ══ Termin: Teilnehmer und Einladung (Migration 155, 25.10.2026) ═══════════
   Wie bei Google/Outlook: Teilnehmer als Zeilen mit Initiale, darunter
   „hinzufügen". Beim Speichern legt sich die Frage über den Dialog — ein
   Blatt in der Mitte, nicht das Fenster des Browsers. */
body.neu .n-kd-tn-kopf small { font-size: 12px; font-weight: 600; color: var(--n-lime-2, #8A9420); background: color-mix(in srgb, var(--n-lime) 22%, transparent); padding: 2px 8px; border-radius: 99px; }
body.neu .n-kd-tn-kopf small[hidden] { display: none; }
body.neu .n-kd-tn-liste:empty { display: none; }
body.neu .n-kd-tn-liste { display: flex; flex-direction: column; }
body.neu .n-kd-tn-chip { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; }
body.neu .n-kd-tn-chip + .n-kd-tn-chip { border-top: 1px solid var(--n-hair); }
body.neu .n-kd-tn-chip > i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--n-lime) 30%, var(--n-surface-2)); color: var(--n-text); }
body.neu .n-kd-tn-chip > span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
body.neu .n-kd-tn-chip b { font-weight: 550; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-kd-tn-chip small { font-size: 12.5px; color: var(--n-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-kd-tn-chip button { all: unset; cursor: pointer; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--n-text-3); font-size: 17px; }
body.neu .n-kd-tn-chip button:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-kd-tn-neu input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; border: 0; background: transparent; color: var(--n-text); outline: 0; padding: 3px 0; }
body.neu .n-kd-einladen[hidden] { display: none; }
body.neu .n-kd form { position: relative; }
body.neu .n-kd-frage { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px;
  background: color-mix(in srgb, var(--n-bg) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: inherit; }
body.neu .n-kd-frage[hidden] { display: none; }
body.neu .n-kd-frage-karte { width: min(340px, 100%); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 22px 20px 14px; border-radius: 18px; background: var(--n-surface); box-shadow: var(--n-schatten-hoch); position: sticky; top: 30%; }
body.neu .n-kd-frage-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--n-lime) 30%, transparent); color: var(--n-text); }
body.neu .n-kd-frage h3 { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
body.neu .n-kd-frage p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--n-text-2); text-wrap: pretty; }
body.neu .n-kd-frage-knoepfe { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
body.neu .n-kd-frage-knoepfe .n-knopf { width: 100%; justify-content: center; }
body.neu .n-kd-frage-merken { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--n-text-2); cursor: pointer; }
body.neu .n-kd-frage-merken[hidden] { display: none; }
body.neu .n-kd-frage-zurueck { font-size: 14px; }
/* Meldung nach dem Speichern */
.n-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 300; max-width: min(520px, calc(100vw - 32px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s var(--n-feder, ease);
  padding: 11px 16px; border-radius: 14px; font: 500 14px/1.4 var(--n-schrift, system-ui); color: #F4F4EE; background: #1E1F1A; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.n-toast.n-an { opacity: 1; transform: translate(-50%, 0); }
.n-toast.n-toast-fehler { background: #7A2318; }
@media (max-width: 720px) { .n-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* ══ Vorlagen & Skills wie eine App in Odoo (25.10.2026) ═════════════════════
   Übersicht mit drei Bereichen (Zeilen mit Symbol, Zahl, Pfeil — wie die
   Einstellungen am iPhone), darin Listen als ruhige Tabelle, die Zeile führt
   ins Detail. Brotkrumen statt Zurück-Knopf. */
body.neu .n-vo2 { display: flex; flex-direction: column; gap: 12px; }
body.neu .n-vo2-krume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
body.neu .n-vo2-krume a { color: var(--n-text-2); text-decoration: none; font-weight: 500; }
body.neu .n-vo2-krume a:hover { color: var(--n-text); text-decoration: underline; }
body.neu .n-vo2-krume i { font-style: normal; color: var(--n-text-3); font-weight: 400; }
body.neu .n-vo2-bereiche { display: flex; flex-direction: column; }
body.neu .n-vo2-bereich { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; color: var(--n-text); border-bottom: 1px solid var(--n-hair); transition: background .15s ease; }
body.neu .n-vo2-bereich:last-child { border-bottom: 0; }
body.neu .n-vo2-bereich:hover { background: var(--n-surface-2); }
body.neu .n-vo2-bereich > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.neu .n-vo2-bereich b { font-weight: 600; font-size: 15px; }
body.neu .n-vo2-bereich small { font-size: 13px; color: var(--n-text-2); line-height: 1.4; }
body.neu .n-vo2-bereich em { font-style: normal; font-size: 13.5px; color: var(--n-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.neu .n-vo2-pfeil { font-style: normal; color: var(--n-text-3); font-size: 20px; line-height: 1; }
body.neu .n-vo2-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--n-text); }
body.neu .n-vo2-ico-mail { background: color-mix(in srgb, #3F7BD8 18%, transparent); }
body.neu .n-vo2-ico-kal { background: color-mix(in srgb, var(--n-lime) 34%, transparent); }
body.neu .n-vo2-ico-dok { background: color-mix(in srgb, #E8913A 20%, transparent); }
body.neu .n-vo2-leiste { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.neu .n-vo2-leiste .n-einst-text { margin: 0; }
body.neu .n-vo2-leiste .n-knopf { flex: none; }
body.neu .n-vo2-tabelle { background: var(--n-surface); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--n-hair); overflow: hidden; }
body.neu .n-vo2-zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 80px 110px minmax(0, .9fr); gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--n-hair); color: var(--n-text); text-decoration: none; font-size: 14px; }
body.neu .n-vo2-tab-skills .n-vo2-zeile { grid-template-columns: minmax(0, 1.5fr) 140px minmax(0, 1.3fr) 130px 110px; }
body.neu .n-vo2-zeile:last-child { border-bottom: 0; }
body.neu a.n-vo2-zeile:hover { background: var(--n-surface-2); }
body.neu .n-vo2-zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-vo2-zeile b { font-weight: 600; }
body.neu .n-vo2-kopfzeile { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text-3); padding-block: 8px; background: var(--n-surface-2); }
body.neu .n-vo2-grau { color: var(--n-text-2); }
body.neu .n-vo2-zahl { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--n-surface-2); font-size: 12.5px; font-weight: 600; }
body.neu .n-vo2-pille { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--n-lime) 30%, transparent); }
body.neu .n-vo2-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 20px; border-radius: 14px; background: var(--n-surface); box-shadow: 0 0 0 1px var(--n-hair); }
body.neu .n-vo2-leer span { color: var(--n-text-2); font-size: 14px; }
body.neu .n-vo2-unter { margin: 10px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--n-text-2); }
body.neu .n-vo2-unter small { font-weight: 400; }
body.neu .n-vo2-form { display: flex; flex-direction: column; gap: 0; }
body.neu .n-vo2-form .n-einst-zeile small { font-weight: 400; color: var(--n-text-3); }
body.neu .n-vo2-form textarea, body.neu .n-vo2-skill { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.5; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--n-surface-2); color: var(--n-text); resize: vertical; }
body.neu .n-vo2-skill { border-radius: 0; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
body.neu .n-vo2-platz > span { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-vo2-code { all: unset; cursor: pointer; font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 8px; border-radius: 7px; background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-vo2-code:hover { background: color-mix(in srgb, var(--n-lime) 30%, var(--n-surface-2)); }
body.neu .n-vo2-wahl { cursor: pointer; }
body.neu .n-vo2-wahl input { justify-self: end; width: 18px; height: 18px; accent-color: var(--n-lime-2, #ABBA29); }
body.neu .n-vo2-vorschau { padding: 0; }
body.neu .n-vo2-mailkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--n-hair); font-size: 14px; }
body.neu .n-vo2-anlage { font-size: 12px; color: var(--n-text-2); padding: 3px 9px; border-radius: 99px; background: var(--n-surface-2); white-space: nowrap; }
body.neu .n-vo2-vorschau pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; font: 14px/1.55 var(--n-schrift, system-ui); color: var(--n-text); }
body.neu .n-vo2-anh { grid-template-columns: minmax(0, 1fr) auto; }
body.neu .n-vo2-fuss { justify-content: space-between; }
body.neu .n-vo2-fuss form { display: inline-flex; align-items: center; gap: 10px; }
body.neu .n-vo2-befund { font-size: 14px; line-height: 1.5; color: var(--n-text); }
body.neu .n-vo2 .n-vo-punkt { margin-right: 6px; }
body.neu .n-vo-datei { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--n-link, #2A6FCF); text-decoration: none; font-size: 14px; }
body.neu .n-vo-datei span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-vo-datei:hover span { text-decoration: underline; }
@media (max-width: 720px) {
  body.neu .n-vo2-leiste { flex-direction: column; }
  body.neu .n-vo2-zeile, body.neu .n-vo2-tab-skills .n-vo2-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  body.neu .n-vo2-zeile > span:nth-child(n+3) { display: none; }
  body.neu .n-vo2-kopfzeile { display: none; }
}
body.neu .n-kd-frage h3 { text-transform: none; letter-spacing: 0; color: var(--n-text); }

/* Vorschau-Auge in jedem Anhang-Chip (25.10.2026) — klein, erst beim
   Darüberfahren deutlich; am Telefon immer sichtbar. */
.n-chip .n-anh-auge, .n-anh-fest .n-anh-auge { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px -6px -2px 6px;
  border-radius: 50%; color: currentColor; opacity: .55; vertical-align: middle; transition: opacity .15s ease, background .15s ease; }
.n-chip:hover .n-anh-auge, .n-anh-auge:focus-visible { opacity: 1; }
.n-anh-auge:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (hover: none) { .n-chip .n-anh-auge { opacity: .8; } }

/* „Neuer Kontakt" — erst die Firma (25.10.2026) */
body.neu .n-kbu-wahlform { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
body.neu .n-kbu-wahlfeld { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 14px; background: var(--n-surface); box-shadow: 0 0 0 1px var(--n-hair); color: var(--n-text-3); }
body.neu .n-kbu-wahlfeld .n-vs { flex: 1; min-width: 0; }
body.neu .n-kbu-wahlfeld input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--n-text); }
body.neu .n-kbu-wahlneu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--n-text-2); font-size: 14px; margin: 0; }
body.neu .n-kbu-wahlhinweis { margin: 0; font-size: 14px; color: var(--n-text-2); }

/* ══ Termin: Antworten, erledigt, Protokoll (25.10.2026) ═════════════════════ */
body.neu .n-kd-tn-st { all: unset; cursor: pointer; flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  background: var(--n-surface-2); color: var(--n-text-2); white-space: nowrap; }
body.neu .n-kd-tn-st-zugesagt { background: color-mix(in srgb, #34C759 18%, transparent); color: #1E7A35; }
body.neu .n-kd-tn-st-abgesagt { background: color-mix(in srgb, #FF3B30 14%, transparent); color: #B3261E; }
body.neu .n-kd-tn-st-vielleicht { background: color-mix(in srgb, #FF9500 16%, transparent); color: #9A5B00; }
body.neu .n-kd-erledigt[hidden] { display: none; }
/* Im Verlauf */
body.neu .n-tn-termin { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--n-surface-2); }
body.neu .n-tn-termin-zeile { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13.5px; }
body.neu .n-tn-termin-zeile > span:first-child { color: var(--n-text-3); font-size: 12.5px; }
body.neu .n-tn-termin-zeile b { font-weight: 600; }
body.neu .n-tn-termin-zeile em { font-style: normal; color: var(--n-text-2); margin-left: 6px; }
body.neu .n-tn-termin-fertig { font-style: normal; margin-left: 8px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--n-lime) 34%, transparent); }
body.neu .n-tn-termin-tn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.neu .n-tn-tn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.neu .n-tn-tn b { font-weight: 550; }
body.neu .n-tn-tn-status { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--n-surface); color: var(--n-text-2); }
body.neu .n-tn-tn-zugesagt .n-tn-tn-status { background: color-mix(in srgb, #34C759 18%, transparent); color: #1E7A35; }
body.neu .n-tn-tn-abgesagt .n-tn-tn-status { background: color-mix(in srgb, #FF3B30 14%, transparent); color: #B3261E; }
body.neu .n-tn-tn-vielleicht .n-tn-tn-status { background: color-mix(in srgb, #FF9500 16%, transparent); color: #9A5B00; }
body.neu .n-tn-tn-wahl { display: inline-flex; gap: 4px; opacity: 0; transition: opacity .15s ease; }
body.neu .n-tn-tn:hover .n-tn-tn-wahl, body.neu .n-tn-tn-wahl:focus-within { opacity: 1; }
@media (hover: none) { body.neu .n-tn-tn-wahl { opacity: 1; } }
body.neu .n-tn-tn-wahl button { all: unset; cursor: pointer; font-size: 12px; color: var(--n-link, #2A6FCF); padding: 1px 4px; border-radius: 6px; }
body.neu .n-tn-tn-wahl button:hover { background: var(--n-surface); }
body.neu .n-tn-termin-dok { display: flex; flex-wrap: wrap; gap: 6px; }
body.neu .n-tn-termin-aktionen { flex-wrap: wrap; }
body.neu .n-tn-termin-aktionen label.n-knopf { cursor: pointer; }
body.neu .n-tn-termin-aktionen label.n-laedt { opacity: .6; pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.neu .n-tn-tn-zugesagt .n-tn-tn-status, :root:not([data-theme="light"]) body.neu .n-kd-tn-st-zugesagt { color: #6FE08A; }
  :root:not([data-theme="light"]) body.neu .n-tn-tn-abgesagt .n-tn-tn-status, :root:not([data-theme="light"]) body.neu .n-kd-tn-st-abgesagt { color: #FF8A80; }
  :root:not([data-theme="light"]) body.neu .n-tn-tn-vielleicht .n-tn-tn-status, :root:not([data-theme="light"]) body.neu .n-kd-tn-st-vielleicht { color: #FFC266; } }
/* Die Status-Pille ist kein „ד-Knopf — die Regel für Knöpfe im Chip gilt nicht. */
body.neu .n-kd-tn-chip button.n-kd-tn-st { width: auto; height: auto; display: inline-block; border-radius: 99px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
body.neu .n-kd-tn-chip button.n-kd-tn-st.n-kd-tn-st-offen { color: var(--n-text-2); }
body.neu .n-kd-tn-chip button.n-kd-tn-st-zugesagt { color: #1E7A35; }
body.neu .n-kd-tn-chip button.n-kd-tn-st-abgesagt { color: #B3261E; }
body.neu .n-kd-tn-chip button.n-kd-tn-st-vielleicht { color: #9A5B00; }
body.neu .n-kd-tn-chip button.n-kd-tn-st { background: var(--n-surface-2); }
body.neu .n-kd-tn-chip button.n-kd-tn-st-zugesagt { background: color-mix(in srgb, #34C759 18%, transparent); }
body.neu .n-kd-tn-chip button.n-kd-tn-st-abgesagt { background: color-mix(in srgb, #FF3B30 14%, transparent); }
body.neu .n-kd-tn-chip button.n-kd-tn-st-vielleicht { background: color-mix(in srgb, #FF9500 16%, transparent); }

/* Einstellungen → Vorlagen: im Unterbereich nur dieser Bereich (27.10.2026). */
body.neu .n-einst-fokus .n-einst-inhalt > *:not(#vorlagen):not(.n-einst-meldung) { display: none !important; }
body.neu .n-vo2-zurueck { display: inline-flex; justify-self: start; align-self: start; width: max-content; align-items: center; gap: 4px; margin: 0 0 10px -4px; padding: 6px 12px 6px 8px;
  border-radius: 999px; background: var(--n-surface); box-shadow: var(--n-schatten); color: var(--n-text);
  font-size: 14px; font-weight: 600; text-decoration: none; }
body.neu .n-vo2-zurueck:hover { background: var(--n-surface-2); }

/* Chat: „Erstelle Datei …“ mit Balken, solange Politis eine Datei baut (27.10.2026) */
body.neu .n-chatdatei-laeuft { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px;
  align-items: center; max-width: 420px; margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--n-surface); box-shadow: var(--n-schatten); }
body.neu .n-chatdatei-ico { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; background: var(--n-gruen-bg) no-repeat center / 18px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7D00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3C/svg%3E"); }
body.neu .n-chatdatei-text { display: grid; gap: 1px; min-width: 0; }
body.neu .n-chatdatei-text b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.neu .n-chatdatei-text small { font-size: 12.5px; color: var(--n-text-2); }
body.neu .n-chatdatei-balken { grid-column: 2; height: 4px; border-radius: 99px; background: var(--n-hair); overflow: hidden; position: relative; }
body.neu .n-chatdatei-balken i { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 99px; background: var(--n-lime);
  animation: n-chatdatei-lauf 1.3s ease-in-out infinite; }
@keyframes n-chatdatei-lauf { 0% { left: -35%; } 100% { left: 100%; } }
body.neu .n-chatdatei-laeuft.n-fertig .n-chatdatei-balken i { animation: none; left: 0; width: 100%; }
body.neu .n-chatdatei-laeuft.n-fehler .n-chatdatei-balken i { animation: none; left: 0; width: 100%; background: var(--n-orange, #E87D32); }
@media (prefers-reduced-motion: reduce) { body.neu .n-chatdatei-balken i { animation-duration: 3s; } }

/* Vorschau: „Mit Politis bearbeiten“ (27.10.2026) */
body.neu .n-dok-politis { position: relative; display: flex; align-items: center; gap: 10px; margin: 10px 16px 4px; padding: 8px 8px 8px 12px;
  border-radius: 16px; background: var(--n-surface); box-shadow: var(--n-schatten), 0 0 0 1.5px color-mix(in srgb, var(--n-lime) 60%, transparent); }
body.neu .n-dok-politis-zeichen { flex: none; width: 26px; height: 26px; border-radius: 50%; background: url("/static/favicon.svg") center / 128% no-repeat; }
body.neu .n-dok-politis input { flex: 1; min-width: 0; border: 0; background: none; font: 15px var(--n-schrift); color: var(--n-text); outline: none; }
body.neu .n-dok-politis-laeuft { display: none; }
body.neu .n-dok-politis.htmx-request input, body.neu .n-dok-politis.htmx-request button { visibility: hidden; }
body.neu .n-dok-politis.htmx-request .n-dok-politis-laeuft { display: grid; gap: 6px; position: absolute; inset: 8px 12px 8px 48px; align-content: center; }
body.neu .n-dok-politis-laeuft b { font-size: 14px; font-weight: 600; }
body.neu .n-dok-politis-laeuft > i { display: block; position: relative; height: 4px; border-radius: 99px; background: var(--n-hair); overflow: hidden; }
body.neu .n-dok-politis-laeuft > i > i { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 99px; background: var(--n-lime);
  animation: n-chatdatei-lauf 1.3s ease-in-out infinite; }
body.neu .n-dok-neu { margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: var(--n-gruen-bg); color: var(--n-oliv-text); font-size: 14px; }
body.neu .n-dok-fehler { margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--n-orange, #E87D32) 14%, transparent); color: var(--n-orange-text); font-size: 14px; }
body.neu .n-df-datei { color: inherit; text-decoration: none; }
body.neu .n-df-datei:hover b { text-decoration: underline; }


/* Suche im Kopf bzw. in der Seitenleiste (Werkbank-Prüfung 28.10.2026). Am
   Telefon hat die Tab-Leiste ihren eigenen Knopf. */
body.neu .n-suche-knopf { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; color: var(--n-text-2); font-size: 14px; }
body.neu .n-suche-knopf:hover { background: var(--n-surface-2); color: var(--n-text); }
body.neu .n-suche-knopf:focus-visible { box-shadow: var(--n-fokus); }
@media (max-width: 720px) { body.neu .n-suche-knopf { display: none; } }
body.neu .n-pflicht-meldung, .n-pflicht-meldung { margin: 6px 0; color: var(--n-rot, #c0392b); font-size: 13.5px; font-weight: 600; }

/* ══ Gemeinsame Suche: Firmen und Ansprechpartner (28.10.2026) ══ */
body.neu .n-su-seite { max-width: 860px; }
body.neu .n-su-form { margin: 12px 0 18px; }
body.neu .n-su-form .n-kbu-suche { display: flex; }
body.neu .n-su { display: grid; gap: 16px; }
body.neu .n-su-blatt { max-height: min(60vh, 520px); overflow-y: auto; padding-top: 4px; }
body.neu .n-su-gruppe { display: grid; gap: 2px; }
body.neu .n-su-gruppe h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-3); }
body.neu .n-su-zeile { display: flex; align-items: center; gap: 6px; border-radius: 12px; padding: 2px 4px; }
body.neu .n-su-zeile:hover { background: var(--n-surface-2); }
body.neu .n-su-haupt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 4px; color: var(--n-text); text-decoration: none; }
body.neu .n-su-sym { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 12.5px; font-weight: 750; }
body.neu .n-su-firma { background: var(--n-surface-2); color: var(--n-text-2); }
body.neu .n-su-zeile:hover .n-su-firma { background: var(--n-surface); }
body.neu .n-su-person { border-radius: 50%; background: var(--n-gruen-bg); color: var(--n-oliv-text); }
body.neu .n-su-text { display: grid; min-width: 0; }
body.neu .n-su-text b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-su-text small { color: var(--n-text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.neu .n-su-wege { flex: none; display: flex; gap: 4px; }
body.neu .n-su-weg { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--n-text-2); }
body.neu .n-su-weg:hover { background: color-mix(in srgb, var(--n-lime) 26%, transparent); color: var(--n-text); }
body.neu .n-su-leer { margin: 4px 4px; color: var(--n-text-2); font-size: 14px; }
body.neu .n-su-mehr { font-size: 13.5px; font-weight: 600; padding: 6px 4px; }
body.neu .n-su-gesperrt { opacity: .6; }
/* Ort eines Termins: ein Video-Link wird ein Knopf zum Beitreten (28.10.2026) */
body.neu .n-kd-ortzeile { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
body.neu .n-kd-ortzeile > input { flex: 1; min-width: 0; font: inherit; font-size: 15px; border: 0; background: transparent; color: var(--n-text); padding: 11px 14px; outline: 0; }
body.neu .n-kd-gruppe > .n-kd-ortzeile[hidden] { display: none; }
body.neu a.n-ort-link { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--n-blau) 12%, var(--n-surface)); color: var(--n-blau); font-weight: 600; font-size: .95em; text-decoration: none; }
body.neu a.n-ort-link:hover { background: color-mix(in srgb, var(--n-blau) 20%, var(--n-surface)); }
body.neu .n-kd-ortlink { flex: none; font-size: 13px; padding: 5px 11px; }
@media (prefers-color-scheme: dark) { body.neu:not([data-theme="light"]) a.n-ort-link { color: #8AB4FF; background: rgba(138, 180, 255, .15); } }
body.neu[data-theme="dark"] a.n-ort-link { color: #8AB4FF; background: rgba(138, 180, 255, .15); }
body.neu .n-tn-termin a.n-ort-link { white-space: normal; overflow-wrap: anywhere; font-style: normal; }