:root{
  --brand-900:#0a2038; --brand-800:#0e2c4c; --brand-700:#123c69;
  --brand-600:#1c5cab; --brand-500:#2a78d6; --brand-050:#eaf2fd;
  /* --ink-3 war #8a93a1: auf Weiss ein Kontrast von 3,1:1. Die Norm
     verlangt 4,5:1, und das ist keine Schikane - die Anwender dieser
     Software sind Versicherungsvermittler, oft jenseits der 45, am
     Buerobildschirm. Fast jeder Erklaertext benutzt .mini und damit
     diese Farbe. #6b7483 bringt 4,6:1 und sieht immer noch zurueckhaltend
     aus. (Gemessen am 18.09.2026.) */
  --ink:#0e1726; --ink-2:#57616f; --ink-3:#6b7483;
  --line:#e3e8ef; --line-soft:#eef1f6;
  --bg:#f4f6f9; --card:#ffffff;
  --good:#0f7a3d; --good-bg:#e7f5ec;
  /* #a5680a auf #fdf3e0 war 4,16:1 - unter der Norm, und die Abzeichen
     tragen bei 11,5 px Texte wie "Freigabe offen" und "60 %".
     #8a5605 = 5,59:1 (nachgerechnet 18.09.2026). */
  --warn:#8a5605; --warn-bg:#fdf3e0;
  --crit:#b02f2f; --crit-bg:#fbeced;
  --info-bg:#eaf2fd;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --r:14px; --r-sm:9px;
  --sh:0 1px 2px rgba(14,23,38,.05), 0 6px 20px rgba(14,23,38,.045);
  --sh-lg:0 18px 50px rgba(10,32,56,.22);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:#cfe1f8}

/* ---------- Shell ---------- */
/* Das Grundgerüst.
   .app hat DREI Kinder: .side, .main (Kopfleiste) und .content (die
   Ansichten). Ohne ausdrückliche Platzierung setzt das Raster sie
   automatisch: side(1,1), main(1,2) - und .content landet in Zeile 2,
   Spalte 1, also UNTER der Navigation und 254 px schmal.
   Gemessen am 18.09.2026: Inhaltsbreite 254 px, erste Ansicht bei y=1004,
   der sichtbare Bereich rechts leer.
   Deshalb wird hier ausdrücklich platziert statt geraten. */
.app{display:grid;grid-template-columns:254px 1fr;grid-template-rows:auto 1fr;min-height:100vh}
.app > .side{grid-column:1;grid-row:1 / -1}
.app > .main{grid-column:2;grid-row:1}
.app > .content{grid-column:2;grid-row:2}

/* ---------- Sidebar ---------- */
.side{background:linear-gradient(178deg,#0a2038 0%,#0c2743 55%,#0a2038 100%);color:#dbe6f2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:22px 20px 18px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(140deg,#3d8ee0,#1c5cab);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;letter-spacing:-.5px;box-shadow:0 4px 12px rgba(28,92,171,.45)}
.brand b{color:#fff;font-size:15.5px;font-weight:700;letter-spacing:-.2px;display:block;line-height:1.2}
.brand span{font-size:11px;color:#8fa8c4;letter-spacing:.02em}
.navwrap{flex:1;overflow-y:auto;padding:6px 12px 12px}
/* #6f88a5 auf dem dunklen Verlauf = 4,34:1. Neu #8aa3bf = 6,11:1,
   und 11 px statt 10,5 (Befund 18.09.2026). */
.navlabel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#8aa3bf;padding:16px 10px 7px;font-weight:600}
.nav{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;color:#c3d3e5;font-size:13.5px;text-align:left;transition:.15s;margin-bottom:2px;font-weight:500}
.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.nav.on{background:linear-gradient(90deg,rgba(42,120,214,.32),rgba(42,120,214,.12));color:#fff;font-weight:600;box-shadow:inset 2px 0 0 #5aa0ef}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
/* GEFUNDEN UND NACHGERECHNET AM 18.09.2026:
   Weiss auf #c9860f = 3,04:1, weiss auf #2a78d6 = 4,42:1 - beide unter
   der Norm von 4,5:1, und zwar bei 10,5 px fett.

   Ausgerechnet diese Zaehler sagen dem Anwender, wie viel noch offen ist.
   Der Kommentar ganz oben in dieser Datei begruendet die Korrektur von
   --ink-3 mit "Versicherungsvermittler, oft jenseits der 45, am
   Buerobildschirm" - genau die lesen diese Zahlen.

   Neu: #2168bd = 5,56:1, #8a5c05 = 5,81:1. */
.nav .pill{margin-left:auto;background:#2168bd;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px}
.nav .pill.amber{background:#8a5c05}
.sidefoot{border-top:1px solid rgba(255,255,255,.09);padding:13px 16px;display:flex;align-items:center;gap:10px}
.av{width:33px;height:33px;border-radius:50%;background:linear-gradient(140deg,#4a90e2,#1c5cab);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;flex:none}
.sidefoot b{display:block;color:#fff;font-size:12.5px;font-weight:600}
.sidefoot span{font-size:11px;color:#8fa8c4}

/* ---------- Topbar ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:0 26px;height:62px;display:flex;align-items:center;gap:16px}
.top h1{font-size:17px;font-weight:700;letter-spacing:-.25px;margin:0}
.top .sub{font-size:12px;color:var(--ink-3);margin-top:-1px}
.demo-badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#a5680a;background:var(--warn-bg);border:1px solid #f0dcb4;padding:3px 9px;border-radius:20px}
.spacer{flex:1}
.search{position:relative}
.search input{width:250px;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;outline:0;transition:.15s}
.search input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(42,120,214,.12)}
.search svg{position:absolute;left:11px;top:9px;width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:2}
.icobtn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;position:relative;transition:.15s}
.icobtn:hover{background:var(--brand-050);border-color:#c8ddf7}
.icobtn svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:#d03b3b;border:2px solid #fff}
.autopilot{display:flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border:1px solid var(--line);border-radius:22px;background:#fff;white-space:nowrap;flex:none}
.autopilot .lbl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.autopilot.on{border-color:#bfe3cd;background:var(--good-bg)}
.autopilot.on .lbl{color:var(--good)}

/* toggle */
.sw{width:38px;height:21px;border-radius:20px;background:#ccd4de;position:relative;transition:.22s;flex:none}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.22s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on{background:var(--good)}
.sw.on::after{left:19.5px}
/* GEFUNDEN AM 24.09.2026 (Etappe 6): Solange der Zustand nicht geladen war,
   sah der Schalter aus wie "aus" - auf 15 von 17 Ansichten. Ein Schalter, der
   den Zustand nicht KENNT, darf auch keinen behaupten: gestrichelter Rand,
   Knopf in der Mitte, halb durchsichtig. */
.autopilot.unbekannt{border-style:dashed;opacity:.6}
.autopilot.unbekannt .sw{background:#ccd4de}
.autopilot.unbekannt .sw::after{left:11px}

/* min-width:0 an BEIDEN - sonst traegt kein overflow-x:auto weiter unten.
   -----------------------------------------------------------------------
   GEFUNDEN AM 24.09.2026 (Etappe 6), nachgemessen: Das Pipeline-Brett hat
   `overflow-x:auto` und `min-width:0` (seit dem 18.09.). Sobald seine
   Spalten breiter wurden als der Platz, schob trotzdem die GANZE SEITE -
   1.666 px bei 1.440 px Fenster.

   Die Kette gemessen, von innen nach aussen:
     DIV.kb       1360 px  overflow-x:auto  min-width:0
     SECTION.view 1360 px  overflow-x:visible  min-width:0  <- waechst mit
     DIV.content  1412 px  min-width:AUTO                   <- waechst mit
     DIV.app      1440 px, scrollWidth 1666

   `min-width:auto` ist die Voreinstellung fuer Raster- und Flex-Kinder und
   bedeutet "so breit wie mein Inhalt". Damit reicht ein einziges Element in
   der Kette, das sie behaelt, und das Ueberlaufen wandert nach oben, statt
   dort zu scrollen, wo es hingehoert. */
.content{padding:24px 26px 60px;max-width:1420px;width:100%;min-width:0}
.view{display:none;animation:fade .28s ease;min-width:0}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Cards & primitives ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ch{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.ch h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.15px}
.ch p{margin:1px 0 0;font-size:12px;color:var(--ink-3)}
.cb{padding:18px}
/* minmax(0,1fr) statt 1fr - ueberall.
   "1fr" heisst "minmax(AUTO,1fr)", und dieses auto ist die Mindestbreite des
   INHALTS. Eine Kachel mit einem langen Wort zwingt ihre Spalte damit breiter
   zu werden, das Raster waechst mit, und die ganze Seite schiebt nach rechts.
   Gemessen am 18.09.2026 in der Pipeline: Seitenbreite 1.516 px bei 1.280 px
   Fenster, verursacht von der Kennzahlenreihe (.grid.g4), nicht vom Brett.
   Die Null nimmt dem Raster diese Mindestbreite; die Kachel kuerzt dann
   ihren Text, statt die Seite zu verschieben. */
.grid{display:grid;gap:16px;min-width:0}
.grid > *{min-width:0}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g21{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2,.g21,.g12{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink);transition:.15s;white-space:nowrap}
.btn:hover{background:#f7f9fc;border-color:#cfd8e3}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.pri{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:0 2px 8px rgba(28,92,171,.28)}
.btn.pri:hover{background:#174f95;border-color:#174f95}
.btn.gh{border-color:transparent;background:transparent;color:var(--brand-600)}
.btn.gh:hover{background:var(--brand-050)}
.btn.ok{background:var(--good);border-color:var(--good);color:#fff}
.btn.ok:hover{filter:brightness(.94)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* GEFUNDEN AM 18.09.2026: Knoepfe, die "Noch nicht gebaut" melden, sahen aus
   wie funktionierende Knoepfe. Der Anwender klickt, wartet - und bekommt
   unten rechts fuer knapp vier Sekunden eine Absage.

   .ungebaut ist deshalb nicht nur blass, sondern erkennbar anders: gestrichelt
   umrandet. Blass allein heisst "gerade nicht moeglich"; gestrichelt heisst
   "gibt es noch nicht". Der Unterschied zaehlt - das eine wartet man ab, das
   andere plant man anders. */
.btn.ungebaut{border-style:dashed;opacity:.55;cursor:not-allowed}
/* Hinweiskasten in der Oberflaeche - gab es bisher nur in den offenen Seiten
   (Einladung, Zwei-Faktor, Datenschutz), jede mit eigener Kopie. Jetzt hier,
   damit es EINE Fassung gibt. Kontrast #6b5417 auf #fff8e6 = 7,3:1. */
.warnbox{background:#fff8e6;border:1px solid #f0dca8;border-radius:9px;
  padding:11px 13px;font-size:12.5px;line-height:1.55;color:#6b5417;margin:0}
.warnbox b{color:#5a4513}
.btn.ungebaut:hover{background:inherit}

.bdg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2.5px 9px;border-radius:20px;white-space:nowrap}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bdg.g{color:var(--good);background:var(--good-bg)}
.bdg.w{color:var(--warn);background:var(--warn-bg)}
.bdg.c{color:var(--crit);background:var(--crit-bg)}
.bdg.i{color:var(--brand-600);background:var(--info-bg)}
.bdg.n{color:var(--ink-2);background:#eff2f6}
.bdg.plain::before{display:none}

/* ---------- Stat tiles ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;box-shadow:var(--sh);position:relative;overflow:hidden}
.stat .lab{font-size:12px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:7px}
.stat .lab i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--brand-050);flex:none}
.stat .lab i svg{width:13px;height:13px;stroke:var(--brand-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat .val{font-size:27px;font-weight:700;letter-spacing:-.9px;margin:9px 0 2px;line-height:1}
.stat .val small{font-size:14px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.stat .d{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.stat .up{color:var(--good);font-weight:700}
.stat .down{color:var(--crit);font-weight:700}
.stat .spark{position:absolute;right:12px;bottom:12px;opacity:.85}

/* ---------- Table ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfd}
td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
tbody tr{transition:.12s;cursor:pointer}
tbody tr:hover{background:#f7faff}
tbody tr:last-child td{border-bottom:0}
.who{display:flex;align-items:center;gap:10px}
.who .av{width:31px;height:31px;font-size:11px}
.who b{font-weight:600;display:block;font-size:13px}
.who span{font-size:11.5px;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.src{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.src i{width:6px;height:6px;border-radius:50%;flex:none}

/* ---------- Kanban ---------- */
/* Die Pipeline: sechs Spalten à mindestens 190 px plus Abstände brauchen
   rund 1.240 px. Bei 1.280 px Fensterbreite bleiben für den Inhalt nur
   1.026 px - das Brett schob deshalb die GANZE SEITE nach rechts
   (gemessen: 1.516 px Seitenbreite bei 1.280 px Fenster).
   overflow-x:auto allein genügt dafür nicht: Ein Raster wächst auf die
   Mindestbreite seiner Spalten, und das Elternelement wächst mit. Erst
   min-width:0 und eine feste Breite von 100 % halten es in seinem Kasten -
   dann schiebt nur noch das Brett selbst, nicht die Seite. */
.kb{display:grid;grid-template-columns:repeat(6,minmax(215px,1fr));gap:14px;
    overflow-x:auto;padding-bottom:6px;min-width:0;width:100%}
.kb > .col{min-width:0}
/* Die Laufleiste des Bretts bleibt SICHTBAR.
   GEFUNDEN AM 24.09.2026 (Etappe 6): Nachdem die Spalten breit genug fuer
   ihre Beschriftung wurden, passt die sechste Phase ("Umsetzung") auf einem
   1.440-px-Bildschirm nicht mehr ins Bild. Das ist in Ordnung - ein
   Kanban-Brett schiebt man. Nicht in Ordnung waere, wenn niemand sieht, dass
   da noch etwas ist: Chromium blendet Laufleisten von selbst aus. */
/* Bewusst OHNE `scrollbar-width`: Setzt man das, ignoriert Chromium die
   ::-webkit-scrollbar-Regeln darunter und zeichnet wieder die Leiste, die
   sich ausblendet. Gemessen am 24.09.2026. */
.brettmehr{text-align:right;font-size:11px;color:var(--ink-3);padding:6px 4px 0}
.kb::-webkit-scrollbar{height:10px}
.kb::-webkit-scrollbar-track{background:#e4e9f0;border-radius:6px}
.kb::-webkit-scrollbar-thumb{background:#c3ccd8;border-radius:6px}
.kb::-webkit-scrollbar-thumb:hover{background:#aab5c4}

/* Sechs Spalten à 190 px plus fünf Abstände sind 1.210 px. Im Inhaltsbereich
   eines 1.280-px-Bildschirms stehen aber nur 974 px zur Verfügung - das Brett
   schob deshalb die ganze Seite nach rechts (gemessen: 1.516 px).
   min-width:0 hilft hier NICHT: Die 190 px sind die Untergrenze der SPALTEN,
   nicht des Behälters. Also wird die Untergrenze selbst kleiner, sobald der
   Platz knapp wird. 6 x 150 + 70 = 970 px passen. */
/* NACHGEMESSEN AM 24.09.2026 (Etappe 6), 1440 px Fenster:
     Spaltenkopf hat 153 px, "Gutachtenbesprechung" braucht 165 px.
     Kartenfuss hat 125 px, das Abzeichen "Immobilienfinanzierung" 154 px.
   Beides stand deshalb ueber dem Rand oder mitten im Wort getrennt
   ("Immobilienfinanzie", "Gutachtenbesprech / ung").

   Die 150 px stammen vom 18.09.2026 und sollten waagerechtes Schieben
   vermeiden. Das war die falsche Abwaegung: Ein Kanban-Brett waagerecht zu
   schieben ist ueblich und stoert niemanden - abgeschnittene Woerter und
   Zahlen, die im Nachbarfeld stehen, sind ein Fehler.

   215 px sind die gemessene Untergrenze, bei der der laengste Phasenname UND
   das laengste Produktabzeichen hineinpassen. Die Seite selbst wird dadurch
   NICHT breiter - dafuer sorgen overflow-x:auto und min-width:0 am Brett;
   ops/oberflaeche-pruefen.mjs misst das bei jedem Lauf ("waagerechtes
   Scrollen"). */
@media (max-width:1500px){
  .kb{grid-template-columns:repeat(6,minmax(215px,1fr))}
}
.col{background:#eef1f6;border-radius:var(--r);padding:12px;min-height:420px}
/* GEFUNDEN AM 24.09.2026 (Etappe 6) auf dem Bild der Vertriebs-Pipeline:
   Ueber der Spalte "Gutachtenbesprechung" fehlten Anzahl UND Summe - sie
   waren aus dem Kopf herausgedraengt. Bei "Datenaufnahme" und "Umsetzung"
   stand "475 € / mtl" ueber drei Zeilen verteilt neben der Ueberschrift.
   Der Kopf ist eine Reihe aus drei Teilen; eine 150 px breite Spalte traegt
   die nicht nebeneinander. Er darf jetzt umbrechen: Name und Anzahl oben,
   die Summe rutscht darunter, wenn es eng wird. */
.colh{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding:0 3px;flex-wrap:wrap}
.colh b{font-size:12.5px;font-weight:700;min-width:0;overflow-wrap:break-word}
.colh .n{flex:none}
.colh .sum{flex:none;white-space:nowrap}
.colh .n{font-size:11px;background:#fff;color:var(--ink-2);padding:1px 8px;border-radius:20px;font-weight:700;border:1px solid var(--line)}
.colh .sum{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:600}
.kc{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(14,23,38,.05);cursor:pointer;transition:.15s;border-left:3px solid var(--brand-500)}
.kc:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,23,38,.1);border-color:#c8ddf7}
.kc.hot{border-left-color:#eb6834}
.kc.cold{border-left-color:#8a93a1}
.kc b{font-size:13px;display:block;margin-bottom:3px}
.kc .m{font-size:11.5px;color:var(--ink-3);margin-bottom:9px}
/* Ebenso in der Karte: Betrag links, Produktname rechts. GEMESSEN am
   24.09.2026: "Krankenversicherung" und "bAV / Entgeltumwandlung" standen
   ueber dem Kartenrand hinaus im Nachbarfeld, und "2.000 € mtl." brach in
   drei Zeilen ("2.000" / "€" / "mtl."), weil das Abzeichen den Platz nahm.
   Der Betrag bricht nie, das Abzeichen rutscht in die naechste Zeile. */
.kc .f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kc .f .amt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
            flex:none;white-space:nowrap}
.kc .f .ag{margin-left:auto;font-size:10.5px;color:var(--brand-600);background:var(--brand-050);padding:2px 7px;border-radius:5px;font-weight:600;
           min-width:0;max-width:100%;overflow-wrap:break-word}

/* ---------- Agents ---------- */
.agent{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
/* flex-wrap + volle Breite fuer den Beschreibungstext: Vorher lief er
   mit vier Woertern pro Zeile neben dem Symbol, waehrend rechts
   Weissraum blieb. Und min-height:132px machte alle Karten gleich hoch,
   auch wenn der Titel dreizeilig war - dadurch begannen die Datenzeilen
   der dritten Karte 26 px tiefer als bei den Nachbarn.
   (Gefunden am 18.09.2026.) */
.agent .head{padding:17px 18px 15px;border-bottom:1px solid var(--line-soft);display:flex;gap:13px;align-items:flex-start;flex-wrap:wrap;min-height:126px}
.agent .head > div{flex:1 1 100%;min-width:0}
.agent .head > i,.agent .head > .ic{flex:none}
.aicon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.aicon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a1{background:linear-gradient(140deg,#4a90e2,#1c5cab)}
.a2{background:linear-gradient(140deg,#f08a5c,#d9552a)}
.a3{background:linear-gradient(140deg,#35c294,#0f8f63)}
.agent .head b{font-size:14.5px;font-weight:700;display:block;letter-spacing:-.15px}
.agent .head p{margin:2px 0 0;font-size:12px;color:var(--ink-3);line-height:1.45}
.agent .body{padding:15px 18px;flex:1}
/* gap:14px und flex-wrap: Ohne Abstand klebten Beschriftung und Wert
   aneinander - "VeroeffentlichungMo,Di,Mi,Do,Fr,Sa 18:30 Uhr".
   (Gefunden am 18.09.2026.) */
.krow{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
.krow span{flex:0 1 auto;min-width:0}
.krow b{text-align:right}
.krow:last-child{border:0}
.krow span{color:var(--ink-3)}
.krow b{font-weight:600;font-variant-numeric:tabular-nums}
.agent .foot{padding:13px 18px;border-top:1px solid var(--line-soft);background:#fafbfd;display:flex;align-items:center;gap:9px}
.prog{height:5px;border-radius:6px;background:#e6ebf2;overflow:hidden;margin-top:12px;display:none}
.prog.show{display:block}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2a78d6,#5aa0ef);border-radius:6px;transition:width .35s ease}
/* Das Protokoll sah aus wie ein Entwicklerfenster: ein etwa 600 px hoher
   schwarzer Block mit Schreibmaschinenschrift, dessen einziger Inhalt
   "Noch keine Protokolleinträge." war. Für einen Versicherungsvermittler
   ist das kein Werkzeug, sondern ein Schreckbild.
   Jetzt: heller Kasten, normale Schrift, Höhe am Inhalt.
   (Gefunden am 18.09.2026.) */
.logbox{background:var(--bg);border:1px solid var(--line);border-radius:11px;
        padding:13px 15px;font-size:12.5px;line-height:1.75;color:var(--ink-2);
        max-height:270px;min-height:0;overflow:auto}
/* Die Farben stammten aus dem dunklen Kasten und waren auf Hell unlesbar. */
.logbox .t{color:var(--ink-3)}
.logbox .ok{color:#1b7a4b}
.logbox .wr{color:#a5680a}
.logbox .hl{color:var(--brand-600)}

/* ---------- Content calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day{background:#fff;border:1px solid var(--line);border-radius:11px;min-height:172px;padding:10px;box-shadow:var(--sh)}
.day.today{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(42,120,214,.1)}
.day .dh{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.day .dh b{font-size:12px;font-weight:700}
.day .dh span{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.slot{border-radius:8px;padding:8px 8px 8px 40px;position:relative;font-size:11.5px;margin-bottom:7px;cursor:pointer;transition:.15s;border:1px solid transparent;line-height:1.35}
.slot:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(14,23,38,.11)}
.slot::before{content:"";position:absolute;left:8px;top:9px;width:25px;height:25px;border-radius:5px;background:#c9d2de}
.slot.t1::before{background:linear-gradient(145deg,#0f3a68,#2a78d6)}
.slot.t2::before{background:linear-gradient(145deg,#0d5c47,#1baf7a)}
.slot.t3::before{background:linear-gradient(145deg,#0a2038,#1c5cab)}
.slot.t4::before{background:linear-gradient(145deg,#7a2f12,#eb6834)}
.slot.t5::before{background:linear-gradient(145deg,#1b2a4a,#4c5a8a)}
.slot.t6::before{background:linear-gradient(145deg,#5b3410,#c9860f)}
.slot b{display:block;font-weight:600;margin-bottom:2px}
.slot .tm{font-size:10px;opacity:.8;font-weight:600;letter-spacing:.03em}
.slot.appr{background:var(--good-bg);border-color:#c5e6d1;color:#0d5c30}
.slot.pend{background:var(--warn-bg);border-color:#f0dcb4;color:#8a5709}
.slot.draft{background:#eff2f6;border-color:#dfe4ec;color:var(--ink-2)}
.slot.pub{background:var(--info-bg);border-color:#c8ddf7;color:var(--brand-700)}
/* #b6bdc8 auf Weiss war ein Kontrast von 1,89:1 - praktisch unlesbar.
   Ausgerechnet die Saetze, die erklaeren, warum eine Liste leer ist. */
.empty{font-size:12.5px;color:var(--ink-3);text-align:center;padding:14px 0;border:1px dashed var(--line);border-radius:8px}

/* post preview image */
.pimg{aspect-ratio:1;border-radius:11px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:17px;color:#fff}
.pimg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.22),transparent 46%),radial-gradient(circle at 12% 92%,rgba(255,255,255,.14),transparent 44%)}
.pimg>*{position:relative;z-index:2}
.pimg .tag{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.88}
/* GEFUNDEN AM 24.09.2026 (Etappe 6) auf dem Bild der Instagram-Ansicht:
   "Zurueckgestellt: Renditeversprechen" endete mit einem einzelnen "n" in
   der letzten Zeile. `anywhere` bricht ein Wort, sobald es der Zeile nuetzt;
   `break-word` nur, wenn es allein nicht in eine Zeile passt. Ueberschriften
   von Beitraegen sollen lesbar sein - das ist ihr einziger Zweck. */
.pimg .hl{font-size:22px;font-weight:800;letter-spacing:-.7px;line-height:1.12;overflow-wrap:break-word}
.pimg .hl em{font-style:normal;display:block;font-size:31px;line-height:1.05}
.pimg .ft{font-size:10.5px;font-weight:600;opacity:.8;letter-spacing:.02em}
.pv1{background:linear-gradient(145deg,#0f3a68,#1c5cab 55%,#2a78d6)}
.pv2{background:linear-gradient(145deg,#0d5c47,#0f8f63 60%,#1baf7a)}
.pv3{background:linear-gradient(145deg,#7a2f12,#c4551f 55%,#eb6834)}
.pv4{background:linear-gradient(145deg,#1b2a4a,#33406b 55%,#4c5a8a)}
.pv5{background:linear-gradient(145deg,#0a2038,#123c69 55%,#1c5cab)}
.pv6{background:linear-gradient(145deg,#5b3410,#8a6013 55%,#c9860f)}

/* instagram grid */
.iggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
@media(max-width:1180px){.iggrid{grid-template-columns:repeat(2,1fr)}}
.igc{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--sh);cursor:pointer;transition:.18s}
.igc:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(14,23,38,.13)}
.igc .meta{padding:11px 12px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2)}
.igc .meta .st{margin-left:auto}
.igstat{display:flex;gap:13px;font-size:11.5px;color:var(--ink-2);font-weight:600}
.igstat i{display:inline-flex;align-items:center;gap:4px;font-style:normal}
.igstat svg{width:13px;height:13px;stroke:var(--ink-3);fill:none;stroke-width:1.9}

/* lists */
.li{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line-soft);transition:.12s}
.li:last-child{border:0}
.li:hover{background:#f7faff}
.li .tx b{font-size:13px;font-weight:600;display:block}
.li .tx span{font-size:11.5px;color:var(--ink-3)}
.li .rt{margin-left:auto;text-align:right;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.tick{width:19px;height:19px;border-radius:5px;border:1.7px solid #ccd4de;flex:none;display:grid;place-items:center;transition:.15s;cursor:pointer}
.tick.done{background:var(--good);border-color:var(--good)}
.tick svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tick.done svg{opacity:1}
.li.done .tx b{text-decoration:line-through;color:var(--ink-3)}

/* timeline */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tli{position:relative;padding-bottom:17px}
.tli::before{content:"";position:absolute;left:-22px;top:4px;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--brand-500)}
.tli.g::before{border-color:var(--good)}
.tli.o::before{border-color:var(--s2)}
.tli b{font-size:13px;font-weight:600;display:block}
.tli span{font-size:11.5px;color:var(--ink-3)}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(10,32,56,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.25s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:432px;max-width:94vw;background:#fff;box-shadow:var(--sh-lg);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:90;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dh2{padding:19px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.dbody{flex:1;overflow-y:auto;padding:18px 20px}
.dfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;background:#fafbfd}
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);padding:0 20px}
.tab{padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand-600);border-bottom-color:var(--brand-600)}
.kv{display:grid;grid-template-columns:118px 1fr;gap:7px 12px;font-size:13px;margin-bottom:16px}
.kv dt{color:var(--ink-3);font-size:12.5px}
.kv dd{margin:0;font-weight:600}

.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);width:880px;max-width:94vw;max-height:88vh;background:#fff;border-radius:18px;box-shadow:var(--sh-lg);z-index:95;opacity:0;pointer-events:none;transition:.24s;overflow:hidden;display:flex;flex-direction:column}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.mh{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.mb{padding:20px;overflow-y:auto;flex:1}
.mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;background:#fafbfd;align-items:center;flex-wrap:wrap}
.x{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;margin-left:auto;flex:none;transition:.15s}
.x:hover{background:#eef1f6}
.x svg{width:15px;height:15px;stroke:var(--ink-2);stroke-width:2.2;fill:none;stroke-linecap:round}

/* Beitragsfenster: Bild links, Text rechts - auf schmalen Bildschirmen
   untereinander.
   GEFUNDEN AM 07.10.2026: Das Raster stand als feste 320px + Rest im HTML,
   ohne Regel fuer schmale Bildschirme. Bei 390 px lagen Beitragstext,
   Hashtags und Feed-Vorschau AUSSERHALB des Bildschirms - der Knopf
   "Freigeben" aber nicht. ops/oberflaeche-pruefen.mjs oeffnet das Fenster
   seitdem bei jeder Breite. */
#mGrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px}
@media (max-width:760px){#mGrid{grid-template-columns:minmax(0,1fr)}}

/* caption box */
.cap{background:#f7f9fc;border:1px solid var(--line);border-radius:11px;padding:14px;font-size:13px;line-height:1.62;white-space:pre-wrap}
.tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:11.5px;color:var(--brand-600);background:var(--brand-050);padding:2.5px 8px;border-radius:6px;font-weight:500}

/* forms */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;outline:0;background:#fff;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(42,120,214,.12)}
.field .hint{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.conn{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
/* GEFUNDEN AM 24.09.2026 (Etappe 6): In der Zeile "Kalender" steht rechts das
   lange Abzeichen "eigene Termine, keine Anbindung". Auf 390px quetschte es
   den Namen zusammen, bis "Kalender" mitten im Wort brach. Jetzt darf die
   Zeile umbrechen; das Abzeichen rutscht in die naechste Zeile, statt den
   Namen zu zerdruecken. */
.conn > div:nth-of-type(2){flex:1 1 150px;min-width:0}   /* der Name */
.conn > div:nth-of-type(3){flex:none}                    /* Abzeichen/Knopf */
.conn > .bdg, .conn > .btn{flex:none}
.conn:last-child{border:0}
.conn .ci{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;font-weight:700;font-size:13px}

/* knowledge cards */
.kcard{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;box-shadow:var(--sh)}
.kcard h4{margin:0 0 3px;font-size:14px;font-weight:700}
.kcard .sub{font-size:11.5px;color:var(--ink-3);margin-bottom:12px}
.kcard .big{font-size:23px;font-weight:700;letter-spacing:-.7px;color:var(--brand-700);font-variant-numeric:tabular-nums}
.kcard .cap2{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.kcard ul{margin:12px 0 0;padding-left:17px;font-size:12.5px;color:var(--ink-2);line-height:1.75}

/* chart */
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-weight:500}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.tip{position:fixed;background:#0d1c2e;color:#fff;border-radius:8px;padding:8px 11px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:120;box-shadow:0 8px 24px rgba(0,0,0,.28);line-height:1.5}
.tip.on{opacity:1}
.tip b{font-weight:700}
.tip .r{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.tip .r i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* toast */
.toasts{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{background:#0d1c2e;color:#fff;border-radius:11px;padding:12px 16px;font-size:13px;box-shadow:0 14px 40px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px;transform:translateX(120%);transition:.35s cubic-bezier(.4,0,.2,1);max-width:390px}
.toast.on{transform:none}
.toast svg{width:17px;height:17px;stroke:#5fd08a;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.toast b{font-weight:700}
/* Fehler und Warnungen bleiben stehen - sie bekommen einen Schliesser.
   Befund 24.09.2026 (Etappe 6). */
.toast.error{border-left:3px solid #f2a4a4}
.toast.warn{border-left:3px solid #f0c04a}
.toast .zu{margin-left:6px;background:none;border:0;color:#fff;opacity:.65;
  font-size:19px;line-height:1;cursor:pointer;padding:0 2px;flex:none}
.toast .zu:hover{opacity:1}
.toast .zu:focus-visible{outline:2px solid #7fb6f5;outline-offset:2px;border-radius:4px}

/* notifications dropdown */
.notif{position:absolute;top:52px;right:26px;width:340px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-lg);z-index:60;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.2s;overflow:hidden}
.notif.on{opacity:1;pointer-events:auto;transform:none}
.hr{height:1px;background:var(--line-soft);margin:14px 0}
.mini{font-size:12.5px;color:var(--ink-3)}
.flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fnode{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;box-shadow:var(--sh)}
.fnode i{width:9px;height:9px;border-radius:50%;flex:none}
/* GEFUNDEN AM 24.09.2026 (Etappe 6): Die Kachel "Instagram" brach auf dem
   Telefon zu "Instagra / m". Eine Ablaufkachel traegt einen Namen - der
   bricht nicht. Passt er nicht, soll die Kachel in die naechste Zeile. */
.fnode{min-width:0}
/* Kennzahlenreihe der Instagram-Ansicht: umbrechendes Raster statt starrer
   Reihe. Unter 760px zwei Spalten, damit Zahl UND Beschriftung Platz haben. */
.igStats{display:flex;gap:30px;flex-wrap:wrap}
.igStats > div{min-width:104px}
@media (max-width: 760px){
  .igStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;width:100%}
  .igStats > div{min-width:0}
}
.farr{color:#b6bdc8;font-size:17px;line-height:1}

/* --------------------------------------------------------------------------
   Kleine Zusaetze fuer den Einrichtungsassistenten (17.09.2026)
   Bewusst wenige Regeln, kein zweites Gestaltungssystem. `.hint` gab es
   bisher nur innerhalb von `.field`; hier wird derselbe Stil auch ausserhalb
   gebraucht, damit unter einem Knopf eine Erklaerung stehen kann.
   -------------------------------------------------------------------------- */
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.55}
.krow.stapel{display:block;border:0;padding:0}
.krow.stapel .btn{margin-right:8px;margin-bottom:8px}

/* Ein Schritt der Einrichtung */
.schritt{display:flex;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.schritt:last-child{border:0}
.schritt .nr{width:26px;height:26px;border-radius:13px;flex:none;display:grid;place-items:center;
             font-size:12px;font-weight:700;background:#eff2f6;color:var(--ink-2)}
.schritt.ok  .nr{background:var(--good-bg);color:var(--good)}
.schritt.weg .nr{background:#eff2f6;color:#b6bdc8}
.schritt .tx{min-width:0;flex:1}
.schritt .tx b{font-size:13.5px;font-weight:600;display:block;margin-bottom:3px}
.schritt .tx p{margin:0 0 6px;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.schritt .tx .wo{font-size:12px;color:var(--ink-2)}
.schritt .rt{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.schritt .fehlt{font-size:11.5px;color:var(--crit);margin-top:5px;line-height:1.5}
/* Zwei Spalten, damit zehn Punkte nicht zehn Zeilen brauchen. Unter 640 px
   eine - zwei waeren dort je vier Woerter breit. */
.schritt .fehlt ul{margin:3px 0 0;padding-left:16px;columns:2;column-gap:22px}
.schritt .fehlt li{break-inside:avoid;margin-bottom:1px}
@media (max-width:640px){ .schritt .fehlt ul{columns:1} }
.schritt .sperrt{font-size:11.5px;color:var(--warn);margin-top:4px;line-height:1.5}
@media (max-width:640px){
  /* GEFUNDEN AM 18.09.2026 bei 390 px nachgemessen: Der Erklaertext lief mit
     DREI WOERTERN pro Zeile in einer schmalen Spalte, weil die Statusmarke
     ("offen") rechts daneben stand und flex:1 den Rest bekam. Ueber den Text
     hinweg blieb rechts nichts uebrig - er war nur unlesbar hoch.

     Auf dem Telefon gehoert die Marke UEBER den Text, nicht daneben, und der
     Text bekommt die volle Breite. */
  .schritt{flex-wrap:wrap;row-gap:8px}
  .schritt .nr{order:1}
  .schritt .rt{order:2;margin-left:auto;flex-direction:row;align-items:center}
  .schritt .tx{order:3;flex:1 1 100%;min-width:0}
}

/* ===========================================================================
   Kleine Bildschirme
   ===========================================================================
   GEFUNDEN AM 18.09.2026, nachgemessen: Es gab ueberhaupt keinen Umbruchpunkt
   fuer das Grundgeruest. Bei 390 px Fensterbreite (ein normales Telefon) war
   die Seite 1012 px breit, die Navigation behielt ihre vollen 254 px, und
   fuer den Inhalt blieben 136 PIXEL. In der Auskunftspflicht stand dann ein
   Wort pro Zeile, und man musste dauernd seitlich schieben.
   =========================================================================== */
@media (max-width: 900px) {
  /* minmax(0,1fr) statt 1fr: "1fr" bedeutet "minmax(AUTO,1fr)", und dieses
     auto ist die Mindestbreite des Inhalts. Die Spalte wuchs deshalb auf
     413 px, obwohl das Fenster nur 390 hat - gemessen. Die Null nimmt dem
     Raster diese Mindestbreite. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  /* Auf dem Telefon liegt die Navigation als Schublade darüber, nicht
     daneben - Kopfleiste und Inhalt füllen die einzige Spalte. */
  .app > .main, .app > .content { grid-column: 1; }
  .app > .content { grid-row: 2; }

  /* Die Navigation wird zur Schublade, die von links hereinfaehrt. */
  .side {
    position: fixed; inset: 0 auto 0 0; width: 254px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 30px rgba(0,0,0,.28);
  }
  .side.offen { transform: translateX(0); }

  /* Der Knopf, der sie oeffnet - nur hier sichtbar. */
  .menuknopf { display: grid !important; }

  /* Die Leiste muss SCHRUMPFEN duerfen. Ohne min-width:0 waechst sie auf
     die Breite ihrer Kinder, schiebt .main mit und die ganze Seite wird
     breiter als das Fenster - gemessen: 490 px bei 390 px Fenster, wovon
     allein der Knopf "Neuer Kontakt" 159 px beisteuerte. */
  .app, .main, .top { min-width: 0; }
  .top { padding: 0 12px; gap: 8px; height: auto; min-height: 58px;
         flex-wrap: nowrap; }
  .top h1 { font-size: 15.5px; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; }
  /* Der Untertitel kostet auf dem Telefon nur Platz. */
  .top .sub { display: none; }
  .search { display: none; }
  /* Der Hauptknopf wird zum Symbol - die Beschriftung passt nicht mehr. */
  #newLeadBtn { flex: none; padding: 9px 11px; }
  #newLeadBtn svg { margin: 0; }
  #newLeadBtn { font-size: 0; gap: 0; }
  #newLeadBtn svg { font-size: 14px; }
  /* Der Autopilot-Schalter braucht 138 px; in der Kopfleiste eines Telefons
     hat er keinen Platz.
     -----------------------------------------------------------------------
     BERICHTIGT AM 24.09.2026 (Etappe 6, Gegenprüfung): Hier stand
     `.autopilot`, ohne Einschränkung - und der Kommentar behauptete, der
     Schalter stehe "in voller Breite in der Ansicht KI-Agenten". Das stimmte
     nicht: Es gab im ganzen Programm nur DIESEN einen Schalter, dort stand
     lediglich ein Abzeichen zum Lesen. Auf dem Telefon liess sich das
     automatische Veröffentlichen damit überhaupt nicht anhalten.
     Seit dem 24.09. gibt es den zweiten Schalter wirklich (#autopilot2 in
     der Ansicht "KI-Agenten"). Ausgeblendet wird nur noch der in der
     KOPFLEISTE. */
  .top > .autopilot { display: none !important; }

  .content, .view { padding-left: 16px; padding-right: 16px; }

  /* Alles, was nebeneinander stand, kommt untereinander. */
  .g4, .g3, .g2, .g21, .g12, .iggrid { grid-template-columns: 1fr !important; }
  .kb { grid-template-columns: 1fr !important; }

  /* Tabellen und das Pipeline-Brett duerfen schieben - aber nur sie, nicht
     die ganze Seite. */
  .tbl-wrap, .kb { overflow-x: auto; }

  /* -----------------------------------------------------------------------
     Listenzeilen duerfen umbrechen (24.09.2026, Etappe 6)
     -----------------------------------------------------------------------
     Eine `.li` traegt bis zu vier Spalten: Uhrzeit, Kuerzel, Text, Abzeichen.
     Auf 390 px blieben dem Text davon rund 160 px - "Datenaufnahme" und
     "29.09.2026" passten nicht mehr in eine Zeile.

     Solange `overflow-wrap: anywhere` galt, fiel das nicht auf: Die Woerter
     wurden einfach zerlegt. Ohne diese Kruecke schiebt die Seite (gemessen:
     432 px bei 390 px Fenster) - also braucht die Zeile echten Platz.

     Sie darf jetzt umbrechen. Das Abzeichen rutscht in die naechste Zeile,
     der Text behaelt seine Breite. */
  .li { flex-wrap: wrap; }
  .li .tx { flex: 1 1 150px; min-width: 0; }
  .li .rt { margin-left: auto; }

  /* Der Wochenkalender: sieben Spalten nebeneinander gibt es auf einem
     Telefon nicht. Untereinander, mit kleinerer Mindesthoehe. */
  .cal { grid-template-columns: 1fr !important; }
  .day { min-height: auto; }

  /* Kopfzeilen von Karten: Der Knopf rechts schob die Seite nach rechts.
     Gemessen: in sieben Ansichten, z.B. "Content-Plan" 531 px bei 390 px
     Fenster. Er rutscht jetzt in die naechste Zeile. */
  .ch { flex-wrap: wrap; row-gap: 8px; }
  .ch .btn { margin-left: 0 !important; }

  /* Sehr lange Woerter (Adressen, Kennungen) brechen um, statt zu schieben.
     -----------------------------------------------------------------------
     GEFUNDEN AM 24.09.2026 (Etappe 6): Hier stand `anywhere`. Der
     Unterschied zu `break-word` ist nicht kosmetisch:

       break-word  bricht ein Wort NUR, wenn es allein in keine Zeile passt.
       anywhere    bricht ein Wort, SOBALD es der Zeile nuetzt - und erlaubt
                   der Spalte ausserdem, bis auf einen Buchstaben zu
                   schrumpfen.

     Auf 390 px las sich die Terminliste deshalb "Datenaufna / hme",
     "Gehaltsabrech / nung", "29.09. / 2026". Ein Datum ueber zwei Zeilen ist
     kein Datum mehr.

     `break-word` loest die Aufgabe, fuer die die Zeile am 18.09. gedacht war
     (lange Adressen und Kennungen brechen statt zu schieben), ohne jedes
     normale Wort zu zerlegen. Dass die Seite dadurch nicht breiter wird,
     prueft ops/oberflaeche-pruefen.mjs bei jedem Lauf ("waagerechtes
     Scrollen"). */
  .card, .cb, .view { overflow-wrap: break-word; }

  /* -----------------------------------------------------------------------
     GEFUNDEN UND NACHGEMESSEN AM 18.09.2026, 390 px:
     -----------------------------------------------------------------------
     Die Spaltenkoepfe der Kontaktliste lasen sich als

         KONTA      T      QU
         KT         H      ELL
                    E      E
                    M
                    A

     - ein Buchstabe je Zeile. Eine einzige Kontaktzeile war dadurch rund
     450 px hoch, die Seite "Produkte & Wissen" 9859 px lang.

     Ursache war die Zeile DARUEBER: `overflow-wrap: anywhere` gilt auch in
     Tabellenzellen. Die Tabelle passte sich damit jeder Breite an, statt zu
     ueberlaufen - und der Umbruchbereich mit `overflow-x:auto` bekam nie
     etwas zu schieben, weil nichts mehr ueberlief.

     Also: In Zellen NICHT an beliebiger Stelle umbrechen. Dann wird die
     Tabelle breiter als das Fenster, und genau dafuer ist der Umbruchbereich
     da. Waagerecht schieben ist unangenehm; buchstabenweise lesen ist
     unmoeglich. */
  th, td { overflow-wrap: normal; word-break: normal; }
  th { white-space: nowrap; }
  td { min-width: 5.5em; }

  /* Und die drei Umbruchbereiche, die es schon gibt, bekommen den
     Tastatur-Fokus - sonst kommt man ohne Maus nicht an die rechten
     Spalten (WCAG 2.1.1). */
  .tbl-wrap, [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
    scrollbar-width: thin;
  }
}

/* Der Menueknopf ist auf grossen Bildschirmen unsichtbar. */
.menuknopf { display: none; }

/* Verdunkelung hinter der Schublade. */
.seitenschatten {
  position: fixed; inset: 0; background: rgba(8,20,34,.45);
  z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.seitenschatten.on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------------
   Hinweis, dass die Navigation weitergeht
   ---------------------------------------------------------------------------
   GEFUNDEN AM 18.09.2026: Bei 900 px Fensterhoehe endete die Liste bei 833 px,
   "Einstellungen" lag bei 940 - also ausserhalb. Sie war zwar scrollbar, aber
   nichts deutete darauf hin. Gleichzeitig verweisen die Texte in "Erste
   Schritte" staendig auf "Einstellungen -> Marke".
--------------------------------------------------------------------------- */
.navwrap { position: relative; scrollbar-width: thin; }
.navwrap::-webkit-scrollbar { width: 7px; }
.navwrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 4px; }
.side .mehrhinweis {
  display: none; text-align: center; font-size: 10.5px; color: #8fa8c4;
  padding: 4px 0 6px; border-top: 1px solid rgba(255,255,255,.08);
}
.side.scrollbar .mehrhinweis { display: block; }

/* GEFUNDEN AM 18.09.2026: Wenn die Liste laenger ist als der Platz, schnitt
   sie den letzten sichtbaren Eintrag hart in der Mitte ab - im Bildschirmfoto
   stand "Produkte & Wissen" halb durchgeschnitten ueber dem Hinweis. Das
   sieht nach einem Darstellungsfehler aus.

   Eine weiche Kante sagt dasselbe wie der Hinweis, nur ohne Worte: Hier geht
   es weiter. Nur eingeblendet, wenn wirklich mehr da ist - sonst waere der
   letzte Eintrag grundlos blass. */
.side.scrollbar .navwrap {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

/* ---------------------------------------------------------------------------
   Hinweis ueber einer Tabelle, die breiter ist als der Bildschirm
   ---------------------------------------------------------------------------
   Befund 24.09.2026: Bei 390 px waren von den sieben Spalten der Leadliste
   sechs unsichtbar. Schieben ging, nur sagte es niemand - eine Rollleiste
   zeichnet ein Touchgeraet erst waehrend des Schiebens.

   Bewusst kein neues Farbtoken: Der Hinweis benutzt dieselben Werte wie die
   uebrigen Erklaerzeilen (Regel 1, das Design ist freigegeben). */
.rollhinweis{
  font-size:11.5px;
  color:var(--ink-3);
  padding:6px 2px 7px;
  display:flex;
  align-items:center;
  gap:6px;
}
.rollhinweis::after{content:"→";font-size:13px;line-height:1}