/* DHS NEXUS — Marken-Stil (Dark + Lime)
─────────────────────────────────────────────────────────────────────
EIN Token-Block. Bis v3.54 gab es einen zweiten :root weiter unten
(Zeile ~297), der --r und --r-sm still ueberschrieben hat: geaendert
wurde oben, gewirkt hat unten. Beide sind hier zusammengefuehrt.
Wer Werte aendert, aendert sie ab jetzt an genau einer Stelle.
Lime ist ein Signal, kein Dekor: Primaeraktion, aktive Navigation,
Fokus, echter Erfolg, neue Leads. Sonst nie. */
:root{
/* Flaechen */
--bg:#0A0D0B; --bg-2:#0F1411; --bg-card:#131A14; --bg-elev:#182019;
--bg-3:#11160F; --bg-hover:#1A211A; --panel:#131A14;
/* Nex Motion-System (V13.19 §46/§47): wenige konsistente Dauern + Kurven,
statt beliebiger Werte überall. fast = Mikro-Reaktion, normal = UI-Wechsel,
state = Zustandswechsel des Wesens (bewusst länger, organischer). */
--nex-fast:.14s; --nex-normal:.28s; --nex-state:.55s;
--nex-ease:cubic-bezier(.2,.7,.2,1); /* ruhiges Eintreten */
--nex-ease-out:cubic-bezier(.16,1,.3,1); /* hochwertiges Ausschwingen */
/* Linien tragen die Hierarchie — nicht Flaechen, nicht Schatten */
--line:rgba(237,234,221,.13); --line-soft:rgba(237,234,221,.07);
--line-strong:rgba(237,234,221,.20);
--line-lime:rgba(184,232,52,.45); /* nur aktive/primaere Kante */
/* Marke */
--lime:#B8E834; --lime-soft:rgba(184,232,52,.13); --lime-deep:#C8F454;
--lime-glow:rgba(184,232,52,.35); /* nur noch Fokusring */
/* Text — --muted-2 lag mit #6F786F bei 3.87:1 auf Kartenflaeche und
damit unter den 4.5:1, die WCAG AA fuer Fliesstext verlangt. Es traegt
Gruppentitel, Platzhalter und Zaehler, also lesbaren Text. */
--ink:#EDEADD; --muted:#ABAE9F; --muted-2:#B6B9AA;
/* Semantik: je eine Farbe, keine Zwischentoene.
v5: --ok war woertlich --lime. Damit waren Marke und Erfolg
dieselbe Farbe — und weil Lime ausserdem Primaeraktion, aktive
Navigation und Fokusring traegt, hiess Lime am Ende gar nichts
mehr. In der Kundenliste waren Status, Paket, Primaerknopf und
Ansichtsumschalter gleichzeitig lime; vier Lautsprecher, kein
Signal. Erfolg bekommt einen eigenen, ruhigeren Ton. Lime bleibt
der Marke, der aktiven Position und der Handlung. */
--danger:#E85D4F; --danger-bg:rgba(232,93,79,.14);
--warn:#F0B429; --info:#5B9BF2; --ok:#57CC8B;
/* Orange = primaere AKTION + LIVE (nur Uebersicht/[00], siehe app-dashboard.js) */
--orange:#FF8A1F; --orange-soft:rgba(255,138,31,.15);
--neutral:#ABAE9F; /* Bestand ohne Wertung */
/* --unknown stand auf #6E776E und lag damit bei 4,21:1 auf --bg und
3,82:1 auf Kartenflaeche — unter den 4,5:1, die WCAG AA fuer
Fliesstext verlangt. Genau der Fehler, vor dem der Kommentar zu
--muted-2 drei Zeilen weiter oben warnt, nur eine Farbe spaeter
wiederholt. Gemessen: jetzt 4,98 auf --bg und 4,52 auf Karte.
Bleibt sichtbar dunkler als --muted, damit "nicht gemessen"
weiterhin leiser wirkt als eine Angabe, die es gibt. */
--unknown:#7E857A; /* nicht gemessen */
--display:'Anton','Impact',sans-serif; --body:'Inter',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
/* Abstaende: eine Skala statt Einzelwerte an der Fundstelle. Vorher
gab es hier keine einzige Variable — jeder Abstand war eine eigene
Entscheidung, und entsprechend standen 13, 17, 22 und 27 px
nebeneinander. */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
--s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
/* Lautstaerke: die zentrale Regel dieser Oberflaeche.
Pro Bildschirm genau EIN Signal, darunter EINE Arbeitsliste,
darunter alles Uebrige leise. Belege sind Belege, keine Aussagen. */
--laut-1:var(--ink); /* Signal, Betraege, Namen */
--laut-2:var(--muted); /* Grund, Kontext, Zwischenzeile */
--laut-3:var(--muted-2); /* Beleg, Feldname, Zaehler */
/* Lesebreite fuer Fliesstext. Die Arbeitsbreite steht schon weiter
unten als --maxw (1280px) und wird von .content getragen — ein
zweiter Wert dafuer waere eine zweite Wahrheit. */
--maxw-lesen:78ch;
/* Radius: vier Rollen statt 16 freier Werte.
--r/--r-sm behalten ihre Namen, damit ~50 bestehende Regeln
unveraendert weiterlaufen — nur die Werte werden ruhiger. */
--r-control:8px; /* Chips, kleine Marker */
--r-sm:10px; /* Buttons, Inputs */
--r:12px; /* Karten, Listeneintraege */
--r-lg:16px; /* Dialoge, Drawer */
/* Typo-Skala: acht Stufen. Bestehende freie rem-Werte werden
schrittweise hierauf gezogen, nicht per !important erzwungen. */
--t-micro:11px; --t-small:12px; --t-body:14px; --t-lead:15px;
--t-h3:17px; --t-h2:21px; --t-h1:27px; --t-num:32px;
/* EIN Schatten, nur fuer echte Ebenen (Modal, Drawer, Popover).
Karten liegen nicht "ueber" der Seite — sie stehen darin. */
--shadow-card:0 1px 2px rgba(0,0,0,.40), 0 4px 16px -8px rgba(0,0,0,.55);
--shadow-lift:0 4px 10px rgba(0,0,0,.45), 0 20px 40px -14px rgba(0,0,0,.62);
--shadow-panel:0 30px 70px -28px rgba(0,0,0,.72);
--ease:cubic-bezier(.2,0,0,1);
--maxw:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
a{color:var(--lime);text-decoration:none}
/* `.small` stand auf .82rem und ergab damit 13,1 px — eine Groesse, die
in der Typo-Skala nicht vorkommt. Gemessen: 21 Elemente allein auf dem
Morgenblick. Eine Utility-Klasse, die an der Skala vorbeirechnet, zieht
die halbe Oberflaeche mit. Sie zeigt jetzt auf die Stufe, die sie
ohnehin meinte. */
.muted{color:var(--muted)} .small{font-size:var(--t-small)} .center{text-align:center} .pad{padding:28px}
/* layout */
.app{display:flex;min-height:100vh}
/* Flaeche statt Verlauf: die Sidebar ist eine Ebene, kein Lichteinfall. */
.sidebar{width:248px;flex:0 0 248px;background:var(--bg-2);border-right:1px solid var(--line);
padding:20px 16px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh}
/* flex:0 0 auto ist hier kein Detail: die Sidebar ist eine Flex-Spalte mit
fester Hoehe. Ohne die Sperre schrumpft die Marke, sobald der Platz eng
wird — auf 320x568 gemessen 50px Inhalt in 44px Kasten, und
.brand{overflow:hidden} hat die obere Zeile der Wortmarke abgeschnitten.
Genau der Fehler, den 10a8bcd fuer den Desktop behoben hat, nur eine
Etage tiefer. Schrumpfen darf die Navigation, die scrollt. */
.brand{display:flex;align-items:center;gap:11px;padding:8px 8px 22px;flex:0 0 auto;
position:relative;isolation:isolate}
.brand::after{content:"";position:absolute;left:9px;right:8px;bottom:7px;height:1px;
background:linear-gradient(90deg,rgba(184,232,52,.32),rgba(184,232,52,.05) 58%,transparent)}
.brand-copy{min-width:0;position:relative;z-index:1;padding-top:1px}
.side-foot{flex:0 0 auto}
.brand-name{font-family:var(--display);font-size:1.45rem;letter-spacing:.5px;line-height:1}
.brand-sub{margin-top:5px;font-size:.58rem;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:#8C9874}
/* Native 360°-Marke. Die räumliche Wirkung entsteht aus versetzten
Lichtflächen und echten Vektorbahnen, nicht aus einem unscharfen Bild
in einer zusätzlichen Box. */
.brand-mark{--brand-mark-size:48px;width:var(--brand-mark-size);height:var(--brand-mark-size);
display:inline-grid;place-items:center;position:relative;flex:0 0 auto;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.52));perspective:240px}
.brand-mark::before{content:"";position:absolute;inset:18%;border-radius:50%;
background:rgba(184,232,52,.32);filter:blur(12px);transform:translate3d(2px,3px,-1px)}
.brand-mark svg{width:100%;height:100%;overflow:visible;position:relative;z-index:1;
transform:rotate(-8deg) rotateX(10deg);transition:transform var(--nex-normal) var(--nex-ease-out),filter var(--nex-normal) var(--nex-ease)}
.brand:hover .brand-mark svg,.anm-marke:hover .brand-mark svg{transform:rotate(-3deg) rotateX(4deg) scale(1.045);filter:brightness(1.08)}
.brand-mark-depth{fill:#0D130E;stroke:rgba(184,232,52,.2);stroke-width:1}
.brand-mark-orbit{fill:none;stroke:url(#dhs-ring);stroke-width:1.4;stroke-linecap:round}
.brand-mark-orbit-a{transform:rotate(-17deg);transform-origin:36px 36px}
.brand-mark-orbit-b{transform:rotate(28deg);transform-origin:36px 36px;opacity:.58;stroke-width:.9}
.brand-mark-sphere{fill:url(#dhs-orb);stroke:#D7FF61;stroke-width:.65}
.brand-mark-glint{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.15;stroke-linecap:round}
.brand-mark-node{fill:#D7FF61;stroke:#11190C;stroke-width:1.1}
.brand-mark-shine{position:absolute;z-index:2;inset:9% 20% 55% 22%;border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 64%);filter:blur(1px);pointer-events:none}
/* Navigation: gruppiert statt 17 gleichrangige Zeilen.
.nav traegt den Scroll, damit lange Menues die Sidebar nicht sprengen
und der Demo-Button unten stehen bleibt. */
.nav{display:flex;flex-direction:column;gap:2px;margin-top:4px;
flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group + .nav-group{margin-top:var(--s-3)}
/* Die Gruppenzeile ist Beschriftung UND Schalter: klein, ruhig, nie Lime.
Der Marker verschwindet, weil er in dieser Groesse nur Krach macht —
den Zustand traegt das Zeichen rechts. */
.nav-group-label{font-size:var(--t-micro);font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);padding:var(--s-2) var(--s-3);display:flex;align-items:center;
gap:var(--s-2);cursor:pointer;border-radius:var(--r-sm);list-style:none;
min-height:30px;user-select:none}
.nav-group-label::-webkit-details-marker{display:none}
.nav-group-label:hover{color:var(--muted);background:var(--bg-card)}
.nav-group-label::after{content:"";margin-left:auto;width:6px;height:6px;flex:0 0 auto;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(-45deg) translate(-1px,1px);opacity:.6;
transition:transform .16s var(--ease)}
.nav-group[open] > .nav-group-label::after{transform:rotate(45deg) translate(-2px,-2px)}
/* Zaehler an der zugeklappten Gruppe: sie darf nichts verschlucken.
Ruhiger als der Zaehler am Eintrag — Gruppe ist Uebersicht, nicht Ziel. */
.nav-dot-gruppe{margin-left:0;background:none;color:var(--muted);
border:1px solid var(--line-strong);padding:0 6px;font-weight:600}
.nav-group[open] > .nav-group-label .nav-dot-gruppe{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.nav-group-label::after{transition:none}}
.nav-item{display:flex;align-items:center;gap:12px;background:transparent;border:0;color:var(--muted);
padding:10px 12px;min-height:44px;border-radius:var(--r-sm);font-size:var(--t-lead);text-align:left;position:relative}
.nav-item svg{flex:0 0 18px;opacity:.85}
.nav-item:hover{background:var(--bg-card);color:var(--ink)}
.nav-item.active svg{color:var(--lime);opacity:1}
.nav-dot{margin-left:auto;background:var(--lime);color:#0A0D0B;font-size:.72rem;font-weight:700;border-radius:99px;padding:1px 8px;min-width:20px;text-align:center}
.side-foot{margin-top:auto;padding:10px 8px 0}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line-soft);
position:sticky;top:0;background:rgba(10,13,11,.86);backdrop-filter:blur(10px);z-index:20;
padding-top:calc(14px + env(safe-area-inset-top))}
.top-mrr{display:flex;flex-direction:column;line-height:1.1}.top-mrr strong{font-size:1.1rem}
.global-alarm-button{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 11px;border:1px solid var(--line-soft);border-radius:var(--r-control);background:var(--bg-2);color:var(--muted);font-size:.76rem;font-weight:700}
.global-alarm-button svg{width:17px;height:17px}.global-alarm-button strong{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--danger);color:#24100e;font-size:.68rem}
.global-alarm-button i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.global-alarm-button.has-alerts{border-color:rgba(224,114,106,.38);color:var(--ink)}
.global-alarm-button:hover{border-color:var(--line-lime);color:var(--ink)}.global-alarm-button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.top-spacer{flex:1}
.burger{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:var(--r-control);
padding:0;font-size:1.1rem;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.content{padding:28px;max-width:var(--maxw);width:100%;margin:0 auto}
/* headings */
.view-head{margin-bottom:22px}
.view-head h1{font-family:var(--display);font-weight:400;font-size:2.1rem;letter-spacing:.5px;margin:0}
.view-head p{margin:4px 0 0}
.row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px}
/* Hervorgehobene Kennzahl: eine kraeftigere Kante reicht. Der Doppel-Glow
(Ring + 30px Lime-Schein) liess die Kachel leuchten statt fuehren. */
.stat-accent{border-color:var(--line-lime)}
.stat-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.stat-value{font-family:var(--serif);font-style:italic;font-size:1.7rem;margin-top:6px;line-height:1}
.stat-accent .stat-value{color:var(--lime)}
.stat-sub{font-size:.8rem;color:var(--muted-2);margin-top:6px}
/* Vertriebs-Dashboard: schnell erfassbar, aber ohne dekorative Fantasiedaten. */
.sales-control-grid{align-items:start;margin-bottom:14px}
.sales-funnel-fallback{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.sales-funnel-fallback>div{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line-soft);border-radius:var(--r-sm)}
.sales-funnel-fallback b{font:italic 1.55rem/1 var(--serif);color:var(--lime)}
.sales-funnel-fallback span,.sales-source small,.sales-due-row small{color:var(--muted);font-size:.78rem}
.sales-due-list{display:flex;flex-direction:column}
.sales-due-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--line-soft);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.sales-due-row>span{display:flex;min-width:0;flex-direction:column;gap:3px}.sales-due-row time{font-size:.8rem;color:var(--muted)}
.sales-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sales-source{position:relative;overflow:hidden;min-height:64px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-sm)}
.sales-source>span{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px}.sales-source i{position:absolute;left:0;bottom:0;height:3px;background:var(--lime)}
.sales-passive-note{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--r-sm);color:var(--muted);font-size:.88rem}.sales-passive-note strong{display:block;color:var(--ink);margin-bottom:2px}
@media(max-width:720px){.sales-sources{grid-template-columns:1fr}.sales-funnel-fallback{grid-template-columns:1fr}.sales-due-row{grid-template-columns:minmax(0,1fr) auto}.sales-due-row>svg{display:none}}
/* Alarmzentrale: Alarme zuerst, Messhistorie ruhig und vergleichbar darunter. */
.ops-control-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:12px 15px;border:1px solid var(--line-soft);border-radius:var(--r-sm);font-size:.86rem;color:var(--muted)}
.ops-live-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px color-mix(in srgb,var(--lime) 12%,transparent)}
.ops-last{margin-left:auto}.ops-control-grid{align-items:start;margin-top:14px}.ops-alert-list,.ops-check-list{display:flex;flex-direction:column;gap:8px}
.ops-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:13px 14px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--bg-elev)}
.ops-alert-critical{border-color:rgba(224,114,106,.48)}.ops-alert-warning{border-color:rgba(230,200,74,.35)}.ops-alert p{margin:4px 0;color:var(--muted);font-size:.86rem}.ops-alert small,.ops-check-row small,.ops-resolved small{display:block;color:var(--muted);margin-top:3px}
.ops-alert-icon{color:var(--danger,#e0726a)}.ops-all-good{display:flex;align-items:flex-start;gap:12px;padding:20px 4px}.ops-all-good>svg{color:var(--lime)}.ops-all-good p{margin:4px 0 0}
.ops-alert-action{min-height:36px;margin-top:9px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--lime);font-size:.74rem;font-weight:700}
.ops-alert-action:hover{background:var(--lime-soft);color:var(--ink)}.ops-alert-action:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.ops-check-card{margin-top:0}
.ops-check-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}.ops-check-row:last-child{border-bottom:0}.ops-check-state{padding:4px 8px;border-radius:99px;background:var(--bg-elev);font-size:.73rem}.ops-check-row time{font-size:.73rem;color:var(--muted)}
.ops-resolved{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ops-resolved>div{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line-soft);border-radius:var(--r-sm)}.ops-resolved svg{color:var(--lime)}
@media(max-width:720px){.ops-last{width:100%;margin-left:19px}.ops-check-row{grid-template-columns:auto minmax(0,1fr) auto}.ops-check-row time{grid-column:2/4}.ops-resolved{grid-template-columns:1fr}.ops-alert-action{min-height:44px}}
/* ---- Jarvis: Hinweis, Begruendung, Entscheidung ----------------------
Bewusst KEINE eigene Farbwelt. Die Prioritaet traegt der Badge (Farbe
kommt aus app-jarvis.js, gemischt von U.Badge), die Karte bleibt eine
Karte. Ein Bildschirm, ein Signal — Lime ist hier fuer nichts
zustaendig ausser dem einen Primaerknopf im Kopf. */
.jv-liste{display:flex;flex-direction:column;gap:10px}
.jv-karte{border:1px solid var(--line-soft);border-left-width:3px;border-radius:var(--r-sm);padding:12px 14px;background:var(--bg-elev)}
.jv-karte.jv-bad{border-left-color:var(--danger)}
.jv-karte.jv-warn{border-left-color:var(--warn)}
.jv-karte.jv-neutral{border-left-color:var(--line-strong)}
.jv-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.jv-kopf h3{margin:0;font-size:.98rem;flex:1 1 auto;min-width:0}
.jv-konf{font-size:.73rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.jv-warum{margin:0 0 6px;font-size:.86rem;color:var(--muted-2);line-height:1.5}
.jv-beleg{margin:0 0 8px}
.jv-zahlen,.jv-text{margin:8px 0;padding:10px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-control);font-size:.8rem;white-space:pre-wrap;overflow-x:auto;max-height:340px}
.jv-sperre{margin:8px 0;padding:10px 12px;border-left:3px solid var(--warn);background:var(--bg-2);border-radius:var(--r-control)}
.jv-sperre p{margin:4px 0 0;color:var(--muted-2)}
.jv-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.jv-zeilen{display:flex;flex-direction:column}
.jv-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.86rem}
.jv-zeile:last-child{border-bottom:0}
.jv-zeile>span{color:var(--muted)}
.jv-luecke{margin-top:10px;font-size:.84rem}
.jv-luecke summary{cursor:pointer;color:var(--muted);min-height:44px;display:flex;align-items:center}
.jv-luecke p{margin:4px 0 0;line-height:1.5}
/* ---- Jarvis: der Assistent ------------------------------------------
Dieselbe Karte, dieselben Linien, dieselben Knoepfe wie der Rest von
Jarvis. Keine eigene Farbwelt: ein Assistent, der optisch danebensteht,
sieht aus wie ein zweites Produkt — und genau das soll er nicht sein.
Semantik kommt sparsam ueber die vorhandenen Statusfarben. */
.jv-assistent .card-count{font-variant-numeric:tabular-nums}
.jv-ki-hinweis{border:1px solid var(--line-soft);border-left:3px solid var(--warn);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 14px;background:var(--bg-2)}
.jv-ki-hinweis strong{display:flex;align-items:center;gap:8px;font-size:.9rem}
.jv-ki-hinweis strong>svg{flex:0 0 18px;color:var(--warn)}
.jv-ki-hinweis p{margin:6px 0 0;font-size:.85rem;color:var(--muted-2);line-height:1.55}
.jv-eingabe{display:block;margin:0 0 12px}
.jv-eingabe .inp{margin-top:5px;width:100%;resize:vertical}
.jv-ablage{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:16px;text-align:center;background:var(--bg-2);transition:border-color var(--nex-fast),background var(--nex-fast)}
.jv-ablage.ist-ueber{border-color:var(--warn);background:var(--bg-elev)}
.jv-ablage p{margin:0 0 12px}
.jv-ablage .jv-knoepfe{justify-content:center;margin-top:0}
/* Laeuft eine Aufnahme, muss das ohne Farbe erkennbar bleiben. */
.jv-nimmt-auf{border-color:var(--danger);color:var(--danger)}
.jv-nimmt-auf::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--danger);margin-right:2px;animation:jvPuls 1.4s ease-in-out infinite}
@keyframes jvPuls{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.jv-nimmt-auf::before{animation:none}}
.jv-bilder{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.jv-bild{position:relative;display:flex;flex-direction:column;gap:4px;align-items:center}
.jv-bild img{max-width:132px;max-height:200px;border-radius:var(--r-control);border:1px solid var(--line-soft);display:block}
.jv-weg{position:absolute;top:-10px;right:-10px;width:32px;height:32px;border-radius:99px;border:1px solid var(--line-strong);background:var(--bg-elev);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer}
.jv-tonspuren{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.jv-tonspur{position:relative;border:1px solid var(--line-soft);border-left:3px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;background:var(--bg-2)}
.jv-tonspur.ist-laeuft{border-left-color:var(--muted)}
.jv-tonspur.ist-fehler{border-left-color:var(--danger)}
.jv-tonspur-kopf{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-right:34px}
.jv-tonspur-kopf>svg{flex:0 0 18px;color:var(--muted)}
.jv-tonspur-name{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jv-tonspur .jv-weg{top:8px;right:8px}
.jv-tonspur-status{margin:0;font-size:.88rem}
.jv-tonspur.ist-fehler .jv-tonspur-status{color:var(--danger)}
/* Abgeschrieben, nicht mitgelesen — die Kursive sagt: hier hat eine
Maschine gehoert, das ist kein Zitat. */
.jv-transkript{margin:0 0 12px;white-space:pre-wrap;line-height:1.6;font-size:.9rem;font-style:italic;color:var(--muted-2)}
.jv-aktionsleiste{margin-top:14px}
.jv-denkt{margin:10px 0 0;font-size:.88rem;line-height:1.55}
.jv-ergebnis{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.jv-ergebnis h4{font-family:var(--body);font-weight:700;font-size:.9rem;margin:0 0 8px;letter-spacing:.3px}
.jv-ergebnis h4+h4,.jv-zuordnung+p+h4,.jv-zuordnung+h4{margin-top:18px}
.jv-zuordnung{margin:10px 0}
.jv-ton{font-size:.73rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:1 1 auto}
/* overflow:hidden, weil die Hoehe aus dem Inhalt kommt — eine
Bildlaufleiste im Feld hiesse, dass etwas verborgen bleibt. */
.jv-entwurfsfeld{width:100%;resize:vertical;font-size:.92rem;line-height:1.55;overflow:hidden;min-height:4.5em}
.jv-karte.jv-verworfen{opacity:.55}
/* Mobil: die Knopfreihe bricht um, jeder Knopf bleibt greifbar. Ohne das
schrumpfen fuenf Knoepfe auf 320px zu 28px-Zielen zusammen. */
@media(max-width:720px){.jv-knoepfe .btn{flex:1 1 calc(50% - 4px);min-height:44px;justify-content:center}.jv-zeile{flex-direction:column;gap:2px}.jv-kopf h3{flex:1 1 100%;order:3}
.jv-bild img{max-width:104px}
/* 44 px, nicht 40: das ist die Vorgabe fuer Trefferflaechen, und der
Entfernen-Knopf ist der kleinste Knopf im Bereich. */
.jv-weg{width:44px;height:44px}
.jv-ablage .jv-knoepfe .btn{flex:1 1 100%}
/* Der laengste Knopf bekommt die ganze Zeile — sonst bricht seine
Beschriftung auf 375 px auf drei Zeilen um. */
.jv-karte .jv-knoepfe .btn-primary{flex:1 1 100%}}
/* cards / grids */
.card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.card h3{font-family:var(--body);font-weight:700;font-size:.95rem;margin:0 0 14px;letter-spacing:.3px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
/* bars */
.bar-row{display:flex;align-items:center;gap:12px;margin:9px 0}
.bar-label{flex:0 0 96px;font-size:.85rem;color:var(--muted)}
.bar-track{flex:1;height:9px;background:var(--bg-elev);border-radius:99px;overflow:hidden}
/* Die Breiten-Transition ist raus.
Sie widersprach dem eigenen Motion-Vertrag ("keine Breiten-Animation
wo transform reicht") — und gemessen ist sie ohnehin nie gelaufen:
vier Balken im DOM, null transitionrun-Ereignisse fuer `width`.
React setzt den Inline-Wert beim Mount direkt, es gibt keinen
Uebergang von alt nach neu.
Sie zu entfernen ist kleiner als drei Aufrufer auf scaleX
umzustellen, und nimmt ein Versprechen weg, das der Code nicht
einloest. Sollen die Balken spaeter wirklich animieren, ist
transform:scaleX() mit transform-origin:left der Weg — width
loest bei jedem Frame ein Layout aus. */
.bar-fill{height:100%;border-radius:99px}
.bar-num{flex:0 0 auto;font-size:.85rem;min-width:38px;text-align:right}
/* list lines */
.list-line{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem;flex-wrap:wrap}
.list-line:last-child{border-bottom:0}
.list-line .chk-row{flex:1 1 60%;min-width:0}
.list-line .chk-row span{overflow-wrap:anywhere;word-break:break-word}
.list-line .muted{font-size:.82rem;text-align:right;flex:0 1 auto;max-width:100%;overflow-wrap:anywhere}
/* badges & chips */
.badge{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid;white-space:nowrap}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--bg-elev);border:1px solid var(--line-soft);color:var(--muted);font-size:.8rem;padding:6px 11px;border-radius:99px}
.chip-on{background:var(--lime-glow);border-color:var(--line);color:var(--ink)}
.chip-static{cursor:default}
/* toolbar */
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.search{flex:1;min-width:200px}
/* table */
.table-wrap{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:.9rem;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
/* Anklickbare Zeilen sind Tippziele: mindestens 44px hoch. Tabellenzeilen
erreichen das ueber die Zellen-Innenabstaende, Listen- und Inline-Zeilen
brauchen die Untergrenze ausdruecklich. */
.row-click{cursor:pointer;transition:background .12s var(--ease)}
.row-click:hover td{background:var(--lime-glow)}
.list-line.row-click{min-height:44px}
span.row-click{display:inline-flex;align-items:center;gap:6px;min-height:44px}
/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field-full{grid-column:1/-1}
.field-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.inp{background:var(--bg-2);border:1px solid var(--line-soft);color:var(--ink);border-radius:var(--r-sm);padding:10px 12px;font-size:.92rem;width:100%;font-family:inherit}
.inp:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow)}
textarea.inp{resize:vertical}
/* Dropdowns ans App-Design anpassen (statt nativem Windows-Look) */
select.inp{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
padding-right:38px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;
color-scheme:dark; accent-color:var(--lime);
}
select.inp:hover{border-color:var(--lime)}
/* aufgeklappte Optionsliste (moderne Browser respektieren diese Farben) */
select.inp option{background:var(--bg-elev,#141a14);color:var(--ink);padding:10px}
select.inp option:checked{background:var(--lime);color:#0A0D0B}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
/* ---- Buttons: EINE Definition ----------------------------------------
Frueher stand hier die Basis und ~200 Zeilen tiefer eine zweite
.btn-Regel mit Verlauf und Lift, die sie teilweise ueberschrieb.
Beide sind jetzt hier zusammengefuehrt. Vier Rollen:
.btn-primary eine pro Bereich, Lime, kein Verlauf
.btn (Standard) Secondary — neutrale Flaeche mit Kante
.btn-ghost Inline-Aktion ohne Flaeche
.btn-danger destruktiv, wird erst beim Hover deutlich
44px Mindesthoehe, damit Touch und Maus dasselbe Ziel treffen. */
/* ===================================================================
NEX BUTTON SYSTEM (V15.1) — eine Familie, Material statt Browser-Default.
Kein harter Rahmen: die Kante entsteht aus einem inneren Lichtsaum
(inset) über transluzentem Nex-Material, darunter ein weicher Schatten.
Weiche Soft-Rectangle-Form (12px). Primary trägt kontrollierte Lime-
Energie mit innerem Highlight. Physische Motion (Heben/Drücken).
Trefferfläche immer ≥44px (Touch = Maus).
=================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:46px;padding:0 18px;border:0;border-radius:12px;isolation:isolate;cursor:pointer;
font-family:var(--body);font-size:var(--t-body);font-weight:650;letter-spacing:.005em;
color:var(--ink);
/* Sekundär-Default: transluzentes Material, Lichtsaum oben, feine Kante. */
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06),
0 2px 6px rgba(0,0,0,.34);
transition:transform .12s var(--nex-ease,cubic-bezier(.2,.7,.2,1)),
box-shadow .16s var(--nex-ease,cubic-bezier(.2,.7,.2,1)),
background .16s var(--nex-ease,cubic-bezier(.2,.7,.2,1)), filter .16s ease, color .14s ease}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:hover{transform:translateY(-1px);
background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(255,255,255,.10),
0 8px 22px rgba(0,0,0,.42)}
.btn:active{transform:translateY(1px) scale(.99);
box-shadow:inset 0 2px 5px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06),
0 1px 3px rgba(0,0,0,.4)}
.btn:focus-visible{outline:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 2px var(--bg,#0A0D0B), 0 0 0 4px rgba(184,232,52,.6)}
/* PRIMARY — premium Lime-CTA: Materialverlauf, innerer Highlight, Tiefe. */
.btn-primary{color:#0A140A;
background:linear-gradient(180deg, #CFF356 0%, var(--lime,#B8E834) 48%, #A4D62B 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -7px 14px rgba(70,100,8,.28),
0 4px 14px rgba(184,232,52,.30), 0 2px 6px rgba(0,0,0,.28)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.03);
background:linear-gradient(180deg, #D6F86A 0%, var(--lime,#B8E834) 46%, #A9DC33 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -7px 14px rgba(70,100,8,.28),
0 10px 28px rgba(184,232,52,.4), 0 2px 6px rgba(0,0,0,.28)}
.btn-primary:active{transform:translateY(1px) scale(.99);filter:brightness(.97);
box-shadow:inset 0 2px 6px rgba(70,100,8,.45), 0 1px 3px rgba(0,0,0,.34)}
/* GHOST — fast rahmenlos; Material entsteht erst bei Hover/Focus. */
.btn-ghost{background:transparent;box-shadow:none;color:var(--muted)}
.btn-ghost:hover{color:var(--ink);transform:translateY(-1px);
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.3)}
.btn-ghost:active{transform:translateY(0) scale(.99);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
/* DESTRUCTIVE — Nex-Dark-Material, Rot NUR als Signal (Text + Kante/Glow). */
.btn-danger,.btn-danger-ghost{color:#EE8B83;background:transparent;box-shadow:none;font-weight:600}
.btn-danger:hover,.btn-danger-ghost:hover{color:#F4A69F;transform:translateY(-1px);
background:linear-gradient(180deg, rgba(224,114,106,.14), rgba(224,114,106,.04));
box-shadow:inset 0 0 0 1px rgba(224,114,106,.42), 0 6px 16px rgba(224,114,106,.16)}
.btn-danger:active,.btn-danger-ghost:active{transform:translateY(0) scale(.99)}
/* COMPACT — kleiner in Schrift/Padding, NICHT in der Trefferfläche (≥44px). */
.btn-sm{min-height:44px;padding:0 14px;font-size:var(--t-small)}
.btn-mini{min-height:44px;min-width:44px;padding:0 12px;font-size:var(--t-small);border-radius:11px}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:saturate(.5)}
.btn[disabled]:hover,.btn:disabled:hover{transform:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.34)}
/* ICON BUTTON — Soft-Square, Material bei Hover, ≥44px Trefferfläche. */
.icon-btn{background:transparent;border:0;color:var(--muted);padding:0;border-radius:12px;
min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
transition:background .14s var(--nex-ease,ease), color .14s ease, transform .12s var(--nex-ease,ease), box-shadow .14s ease}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{color:var(--ink);transform:translateY(-1px);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06)}
.icon-btn:active{transform:translateY(0) scale(.94)}
.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg,#0A0D0B), 0 0 0 4px rgba(184,232,52,.55)}
@media (prefers-reduced-motion:reduce){
.btn,.icon-btn{transition:box-shadow .14s ease, background .14s ease, color .14s ease}
.btn:hover,.btn:active,.btn-primary:hover,.btn-primary:active,.btn-ghost:hover,.btn-danger:hover,.icon-btn:hover,.icon-btn:active{transform:none}
}
.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}.full{width:100%}
/* modal */
/* Der Hintergrund beginnt rechts neben der Sidebar, damit die Navigation
sichtbar bleibt. Die Grenze steht hier in CSS statt wie bisher als in JS
berechneter Inline-Wert — der wurde beim Rendern EINMAL gesetzt und
stimmte nach dem Verkleinern des Fensters nicht mehr. */
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:248px;z-index:200;
background:rgba(5,7,6,.82);backdrop-filter:blur(6px);
display:flex;flex-direction:column;padding:0;overflow:hidden}
@media(max-width:860px){.modal-backdrop{left:0}}
/* Der Dialog ist eine Vollflaeche neben der Sidebar — EINE Definition.
Bis v3.54 waren es drei uebereinander (Basis, "weiter/ruhiger",
Vollbild), die dritte hat die ersten beiden mit 15 !important
ueberstimmt, und zusaetzlich setzte app-ui.js dieselben Werte noch
einmal als Inline-Style, "um jede gecachte CSS zu schlagen".
Ein Dialog, drei Wahrheiten. Jetzt eine. */
.modal{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
width:100%;max-width:100%;margin:0;
background:var(--bg-card);border:0;border-radius:0;box-shadow:none}
.modal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:18px 28px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{margin:0;font-family:var(--display);font-weight:400;font-size:var(--t-h1);letter-spacing:.4px}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 28px}
.modal-foot{flex:0 0 auto;padding:18px 28px;border-top:1px solid var(--line-soft);
display:flex;gap:10px;justify-content:flex-end}
/* detail */
.detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:6px}
.detail-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.detail-block p{margin:8px 0 0;line-height:1.55}
/* inquiries */
.inq-list{display:flex;flex-direction:column;gap:12px}
.inq-card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px}
.inq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.inq-msg{margin:10px 0;line-height:1.55;color:#d9d4cb}
.lead-mail-proof{margin:12px 0 14px;padding:12px 14px;border-left:3px solid var(--lime);border-radius:0 10px 10px 0;background:rgba(184,232,52,.06)}
.lead-mail-proof strong{display:block;margin-bottom:5px}.lead-mail-proof p{margin:3px 0}
.inq-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.inq-actions{display:flex;gap:8px;flex-wrap:wrap}
/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
/* Spalte = eingelassene Wanne (recessed): dunkler, ohne harte Kante, mit
Innen-Schatten oben. Die Karten sitzen sichtbar darin. */
.kanban-col{background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 40%), var(--bg-2);
border-radius:var(--r);padding:12px;min-height:120px;
box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}
.kanban-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
/* Karte = gehobene Materialfläche wie .card: Oberlicht-Gradient, weiche
Haarlinie, Lift beim Hover (die Karte ist ein Button, sie darf schweben). */
.proj-card{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent), var(--bg-card);
border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px;margin-bottom:10px;cursor:pointer;
box-shadow:var(--shadow-card);transition:transform .15s, box-shadow .15s, border-color .15s}
.proj-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:var(--line)}
.proj-card strong{font-size:.9rem;display:block;margin-bottom:4px}
.prog{height:5px;background:var(--bg-elev);border-radius:99px;overflow:hidden;margin-top:8px}
.prog-fill{height:100%;background:var(--lime);border-radius:99px}
/* scrim (mobile) */
.scrim{display:none}
/* responsive */
@media(max-width:1080px){.stat-row{grid-template-columns:repeat(2,1fr)}.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
.sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .25s}
.sidebar.open{transform:translateX(0)}
.burger{display:inline-flex}
.grid-2,.detail-grid,.form-grid{grid-template-columns:1fr}
.scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
.content{padding:18px}
}
@media(max-width:520px){.stat-row{grid-template-columns:1fr}.kanban{grid-template-columns:1fr}}
/* ===== v2: Hebel-Analyse / Dokumente / Versicherung ===== */
.banner{padding:12px 16px;border-radius:var(--r);margin-bottom:16px;font-size:.92rem;line-height:1.5}
.banner-warn{background:rgba(230,200,74,.12);border:1px solid rgba(230,200,74,.35);color:#E6C84A}
.banner-alert{background:rgba(224,114,106,.12);border:1px solid rgba(224,114,106,.4);color:#F0A39C;display:flex;flex-direction:column;gap:4px}
.banner-alert a{color:#fff;font-weight:700;text-decoration:underline}
/* Skill Intelligence · auffällig, aber nur bei tatsächlichem Handlungsbedarf. */
.dash-skill-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:14px 0;padding:16px 18px;border:1px solid rgba(180,239,35,.28);border-left:4px solid var(--lime);border-radius:12px;background:linear-gradient(100deg,rgba(180,239,35,.1),rgba(255,255,255,.018));box-shadow:0 14px 38px rgba(0,0,0,.18)}
.dash-skill-alert.is-important{border-color:rgba(224,114,106,.46);border-left-color:var(--danger);background:linear-gradient(100deg,rgba(224,114,106,.13),rgba(255,255,255,.018))}.dash-skill-alert-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(180,239,35,.1);color:var(--lime)}.dash-skill-alert.is-important .dash-skill-alert-icon{background:rgba(224,114,106,.13);color:var(--danger)}.dash-skill-alert-copy{min-width:0}.dash-skill-alert-copy strong{display:block;margin:3px 0;color:var(--ink);font-size:1rem}.dash-skill-alert-copy p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5}
.skillintel-page{display:grid;gap:22px;max-width:1240px;margin:0 auto;padding:4px}.skillintel-head{padding:24px 0 4px}.skillintel-head h1{margin:7px 0 8px;font-family:Anton,Inter,sans-serif;font-size:clamp(2rem,5vw,4.2rem);font-weight:400;letter-spacing:.01em;line-height:1}.skillintel-head p{max-width:720px;margin:0;color:var(--muted);line-height:1.6}.skillintel-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.skillintel-stat{display:grid;grid-template-columns:auto 1fr;gap:3px 11px;align-items:center;min-height:104px;padding:16px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-elev)}.skillintel-stat>span{grid-row:1/3;color:var(--lime)}.skillintel-stat strong{font-size:1.75rem;font-variant-numeric:tabular-nums}.skillintel-stat small{color:var(--muted)}.skillintel-stat.important{border-color:rgba(224,114,106,.38)}.skillintel-stat.important>span{color:var(--danger)}.skillintel-groups{display:grid;gap:18px}.skillintel-group{overflow:hidden;border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.012)}.skillintel-group>header{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line-soft)}.skillintel-group h2{margin:4px 0 0;font-size:1.12rem}.skillintel-count{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem}.skillintel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-soft)}.skillintel-item{min-width:0;padding:18px 20px;background:var(--bg-1)}.skillintel-item.important{box-shadow:inset 3px 0 var(--danger)}.skillintel-item.review{box-shadow:inset 3px 0 var(--lime)}.skillintel-item-top,.skillintel-item-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.skillintel-severity{color:var(--lime);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.skillintel-item.important .skillintel-severity{color:var(--danger)}.skillintel-source,.skillintel-item-foot small{overflow:hidden;color:var(--muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.skillintel-item h3{margin:11px 0 7px;font-size:1rem;line-height:1.35}.skillintel-item p{margin:0 0 16px;color:var(--muted);font-size:.84rem;line-height:1.55}.skillintel-item a{flex:0 0 auto;color:var(--lime);font-size:.78rem;font-weight:700}.skillintel-ok,.skillintel-empty{display:flex;align-items:flex-start;gap:12px;padding:22px;border:1px solid rgba(180,239,35,.24);border-radius:14px;background:rgba(180,239,35,.06)}.skillintel-ok>svg,.skillintel-empty>svg{color:var(--lime)}.skillintel-ok p,.skillintel-empty p{margin:4px 0 0;color:var(--muted)}
@media(max-width:780px){.dash-skill-alert{grid-template-columns:auto minmax(0,1fr);padding:15px}.dash-skill-alert .btn{grid-column:1/3;width:100%;min-height:48px}.skillintel-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.skillintel-list{grid-template-columns:1fr}.skillintel-item-foot{align-items:flex-start;flex-direction:column}.skillintel-item a{display:flex;align-items:center;min-height:44px}.skillintel-group>header{align-items:flex-start}.skillintel-page{gap:16px}}
@media(max-width:420px){.skillintel-summary{grid-template-columns:1fr 1fr}.skillintel-stat{min-height:92px;padding:13px}.skillintel-head{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.dash-skill-alert,.skillintel-item{scroll-behavior:auto}}
.hebel-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hebel-bar .inp{flex:1;min-width:220px}
.deep-toggle{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.9rem;white-space:nowrap;min-height:44px;cursor:pointer}
.deep-toggle input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;accent-color:var(--lime)}
.hebel-status{margin-top:12px;padding:9px 13px;border-radius:var(--r-sm);font-size:.9rem}
.hebel-load{background:rgba(127,179,255,.12);color:#A9CBFF}
.hebel-ok{background:rgba(143,176,46,.16);color:#C4E86A}
.hebel-warn{background:rgba(230,200,74,.14);color:#E6C84A}
.hebel-err{background:rgba(224,114,106,.14);color:#F0A39C}
.hebel-result .hebel-summary{font-size:1rem;line-height:1.55;margin:4px 0 14px}
.hebel-fields{margin-bottom:6px}
.hebel-item{padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}
.hebel-item:first-of-type{border-top:none}
/* Diese vier Kanten (hebel-ansprache, ci-output, akq-tipp, akq-warn)
standen als einzige im System auf 3 px. Gemessen tragen sie
tatsaechlich Information: die getoenten Flaechen dieser Bloecke
liegen bei 1,08 bis 1,15 Kontrast zum Hintergrund und sind damit
praktisch unsichtbar — bei akq-tipp und akq-warn sogar mit exakt
demselben Wert. Die Kante ist dort die EINZIGE Unterscheidung
zwischen Tipp und Warnung. Sie bleibt deshalb; nur die Staerke
folgt jetzt dem System (2 px wie ueberall sonst). */
.hebel-ansprache{font-style:italic;color:var(--ink,#F5EFE6);background:rgba(255,255,255,.04);padding:11px 14px;border-radius:var(--r-sm);border-left:2px solid var(--lime,#B8E834)}
.tight-list{margin:4px 0 0;padding-left:18px}
.tight-list li{margin:3px 0;color:var(--ink,#F5EFE6)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:10px}
.doc-card{background:var(--bg-elev,#182019);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:13px 14px;display:flex;flex-direction:column;gap:9px;justify-content:space-between}
.doc-pick{display:flex;gap:8px;align-items:stretch}
.doc-pick .inp{flex:1}
.doc-pick .dd{flex:1 1 auto;min-width:0}
.doc-pick .btn{flex:0 0 auto;white-space:nowrap}
.more-docs{margin-top:14px}
.more-docs summary{cursor:pointer;color:var(--lime-soft,#8FB02E);font-size:.9rem}
.tier-pick{max-height:300px;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);margin-top:6px}
.tier-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;font-size:.9rem}
.tier-row:last-child{border-bottom:none}
.tier-row.on{background:rgba(143,176,46,.12)}
.tier-name{flex:1}
.tier-price{color:var(--lime-soft,#8FB02E);font-weight:600;white-space:nowrap}
.rech-row{display:flex;gap:8px;margin-bottom:8px}
.rech-row .inp{flex:1}
/* .rech-row .inp setzt flex:1 — hier zaehlt die Reihenfolge, nicht ein
!important: die spezifischere Regel steht jetzt danach. */
.rech-row .inp-sm,.add-bar .inp-sm{max-width:90px;flex:0 0 auto}
/* Sechs Spalten plus Aktionsknoepfe: breiter als der Inhaltsbereich,
sobald das Fenster unter ~1100 px faellt. Bis v5 schob die Tabelle die
GANZE Seite auseinander — bei 1024 px gemessene 36 px waagerechter
Dokument-Scroll, Kopfzeile und Navigation wanderten mit. Eine
Scrollregel gab es nur unterhalb 680 px; dazwischen war niemand
zustaendig. Sie scrollt jetzt im eigenen Kasten, auf jeder Breite. */
.tbl-mini{display:block;overflow-x:auto;max-width:100%;min-width:100%;
font-size:.88rem;margin-top:6px}
.tbl-mini td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.linklike{background:none;border:none;color:var(--lime-soft,#8FB02E);cursor:pointer;font-size:.82rem;padding:0}
.linklike.danger{color:#E0726A}
.row-click{cursor:pointer}
/* login */
.login-box{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.login-row{display:flex;gap:8px;flex-wrap:wrap}
.login-row .inp{flex:1;min-width:140px}
/* Cockpit Intelligence */
.ci-card{border:1px solid rgba(184,232,52,.25)}
.ci-output{white-space:pre-wrap;margin-top:12px;padding:14px 16px;background:rgba(184,232,52,.06);border-radius:var(--r);border-left:2px solid var(--lime,#B8E834);line-height:1.6;font-size:.94rem;color:var(--ink,#F5EFE6)}
.chip-static{background:var(--bg-elev,#182019);border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:99px;font-size:.82rem;color:var(--ink,#F5EFE6)}
/* ===== v3.2: dynamik, mobil, 2FA ===== */
/* animiertes Logo */
@keyframes spin360{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.spin-logo{animation:spin360 14s linear infinite;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.spin-logo{animation:none}}
/* sanfter Ansichtswechsel */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.view-fade{animation:fadeUp .22s ease both}
/* Checkbox-Zeile */
/* Angeklickt wird das Label, nicht das Kaestchen — die Trefferflaeche ist
deshalb die Zeile. Das Kaestchen selbst bleibt klein genug, um in einer
Aufgabenliste nicht zu dominieren. */
.chk-row{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.chk-row input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--lime)}
/* TOTP-Secret-Box */
.totp-secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:2px;background:var(--bg-elev,#182019);border:1px dashed var(--lime,#B8E834);border-radius:var(--r-sm);padding:12px 14px;margin:8px 0;word-break:break-all;user-select:all}
/* App-Sperre */
.lock-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,rgba(184,232,52,.08),transparent),var(--bg,#0A0D0B)}
.lock-card{width:100%;max-width:360px;background:var(--bg-card,#131A14);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:var(--r-lg);padding:30px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lock-card .brand-mark{margin-inline:auto}
.lock-card h2{margin:16px 0 4px}
.lock-input{text-align:center;font-size:1.6rem;letter-spacing:8px;font-family:ui-monospace,monospace;margin:14px 0 6px}
.lock-err{color:#ff8080;font-size:.9rem;margin:4px 0}
.btn-block{width:100%;justify-content:center;margin-top:8px}
/* Bottom-Nav (mobil) */
.bottomnav{display:none}
@media(max-width:860px){
.bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
background:rgba(19,26,20,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line,rgba(255,255,255,.08));
padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
/* min-width:0 hebt die Flexbox-Vorgabe min-width:auto auf. Ohne sie
schrumpfen die Punkte nicht unter ihre Textbreite, und ein langes
Label sprengt die Leiste statt sich zu kuerzen. */
.bn-item{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
background:none;border:0;color:var(--muted);min-height:48px;
font-size:var(--t-micro);padding:6px 2px;border-radius:var(--r-sm);cursor:pointer}
.bn-item svg{width:20px;height:20px}
.bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-item.active{color:var(--lime)}
/* Zaehler sitzt am Icon, nicht in der Zeile — sonst bricht das Label um. */
.bn-item .nav-dot{position:absolute;top:2px;left:50%;margin-left:4px;
font-size:10px;line-height:16px;padding:0 5px;min-width:16px}
}
@media(max-width:520px){.hide-phone{display:none!important}}
/* Auf Telefonen stehen sechs reine Icon-Aktionen in der Kopfleiste. Der
Desktop-Abstand von 14px drueckte den Abmelden-Knopf bei 390px um 11px aus
dem Viewport. Engerer Rhythmus statt Abschneiden oder horizontalem Scroll. */
@media(max-width:520px){
.topbar{gap:6px;padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
}
/* Tabellen auf schmal scrollbar */
@media(max-width:680px){
.tbl{display:block;overflow-x:auto;white-space:nowrap}
.rech-row{flex-wrap:wrap}
.rech-row .inp{min-width:120px}
.topbar .top-mrr{font-size:.9rem}
}
/* Tap-Ziele mobil: 44px ist das Minimum, nicht das Maximum.
Diese Regel setzte frueher 40px und hat die 44px aus der Button-Sektion
auf genau den Geraeten unterboten, fuer die sie gedacht war. */
@media(max-width:860px){.btn,.nav-item{min-height:44px}}
/* ============================================================
v3.4 — Design-Layer: mehr Raum, Tiefe, Bewegung
============================================================ */
/* Der zweite :root stand hier und hat den ersten ueberschrieben —
aufgeloest, alle Werte sind jetzt oben. Nichts ersetzt ihn. */
/* Ruhiger Grund statt zweier Lime-Lichtquellen: Der Verlauf faerbte die
gesamte Flaeche leicht gruen und liess jede Karte darauf schweben.
Ein CRM ist Arbeitsflaeche, kein Hero. */
body{background:var(--bg)}
/* ---- Eingabefelder: größer, fühlbarer ---- */
.inp{padding:13px 16px;font-size:1rem;border-radius:var(--r);min-height:48px;line-height:1.3;
transition:border-color .18s, box-shadow .18s, background .18s}
textarea.inp{min-height:96px}
select.inp{cursor:pointer}
.inp:hover{border-color:var(--line)}
.inp:focus{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);background:var(--bg-elev)}
.inp::placeholder{color:var(--muted-2,#6f7a6f)}
/* Kompakt heisst schmaler und leiser, nicht schwerer zu treffen: 42px lag
knapp unter der 44px-Grenze — genau in den engen Erfassungszeilen. */
.inp-sm{min-height:44px;padding:9px 12px;font-size:.92rem}
.field-label{font-size:.74rem;font-weight:600}
.field-label-icon{display:inline-flex;align-items:center;gap:7px;min-height:22px;color:var(--muted)}
.field-label-icon svg{width:15px;height:15px;flex:0 0 15px;color:var(--lime);opacity:.9}
.dd-trigger>svg{width:16px;height:16px;flex:0 0 16px;color:var(--lime)}
.dd-item{display:flex;align-items:center;gap:9px;text-align:left}
.dd-item>svg{width:16px;height:16px;flex:0 0 16px;color:var(--lime);opacity:.82}
.form-grid{gap:18px}
/* Die zweite und dritte .modal-Definition standen hier und weiter unten.
Beide sind in der einen Definition oben aufgegangen. */
@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal{animation:modalPop .22s var(--ease) both}
@media(prefers-reduced-motion:reduce){.modal{animation:none}}
/* Die zweite .btn-Definition (Gradient, Lift, Press) stand hier und ist
jetzt oben in der einen Button-Sektion aufgegangen. */
.btn-block{width:100%;justify-content:center}
/* ---- Cards: Tiefe + Hover-Lift + Einblendung ---- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.018),transparent), var(--bg-card);
border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-card);
transition:transform .2s, box-shadow .2s, border-color .2s;animation:fadeUp .3s ease both}
.card:hover{box-shadow:var(--shadow-lift);border-color:var(--line)}
.card h3{font-size:1rem;letter-spacing:.2px;margin-bottom:16px}
/* gestaffelte Einblendung */
.content .card:nth-child(2){animation-delay:.04s}
.content .card:nth-child(3){animation-delay:.08s}
.content .card:nth-child(4){animation-delay:.12s}
.content .card:nth-child(5){animation-delay:.16s}
/* ---- Stat-Kacheln: größer, Akzentlinie, Lift ---- */
.stat-row{gap:16px}
.stat{position:relative;padding:20px 20px 18px;border-radius:var(--r);overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.02),transparent), var(--bg-card);
box-shadow:var(--shadow-card);transition:transform .2s, box-shadow .2s}
.stat::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
background:linear-gradient(90deg,var(--lime),transparent);opacity:.25}
/* Kennzahlen schweben nicht. Sie sind Anzeigen, keine Buttons — eine
Hover-Bewegung verspricht eine Interaktion, die es nicht gibt. */
.stat:hover{border-color:var(--line-strong)}
.stat-accent::before{opacity:1}
.stat-value{font-size:2rem}
.stat-label{font-size:.72rem;font-weight:600}
/* ---- Navigation ----
Der Hover-Versatz (translateX 2px) ist raus: 17 Zeilen, die beim
Ueberfahren wandern, sind Unruhe ohne Information.
Aktiver Punkt: EINE Definition (die zweite stand frueher oben und hat
sich mit dieser gestritten). Lime nur als 2px-Kante — aktive Navigation
ist einer der erlaubten Lime-Faelle, aber sie muss nicht leuchten. */
.nav-item{transition:background .16s var(--ease), color .16s var(--ease)}
.nav-item.active{background:var(--bg-elev);color:var(--ink);box-shadow:inset 2px 0 0 var(--lime)}
/* ---- Topbar: sticky + blur ---- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(15,20,17,.72);backdrop-filter:blur(10px);
padding-top:calc(14px + env(safe-area-inset-top))}
.top-mrr strong{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--lime)}
/* ---- view-head: größere Headline ---- */
.view-head h1{font-size:2.5rem}
.view-head p{font-size:1rem}
/* ---- Tabellen: Hover, Rundung ---- */
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover td{background:rgba(184,232,52,.05)}
.tbl-mini td{padding:11px 12px}
/* ---- Chips ---- */
.chip{transition:background .16s, border-color .16s, transform .12s;cursor:default}
button.chip,.chip[onclick]{cursor:pointer}
button.chip:hover{background:var(--bg-hover)}
/* ---- Badges leicht leuchtend ---- */
.badge{box-shadow:0 0 0 1px rgba(255,255,255,.04)}
/* ---- Scrollbars ---- */
*{scrollbar-width:thin;scrollbar-color:rgba(184,232,52,.3) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(184,232,52,.25);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(184,232,52,.45);background-clip:content-box}
.brand-name{font-size:1.35rem}
/* ---- kleine Helfer ---- */
.linklike{background:none;border:0;color:var(--lime);cursor:pointer;font:inherit;padding:0}
.linklike:hover{text-decoration:underline}
.linklike.danger{color:var(--danger,#E0726A)}
/* In Tabellenzellen ist der Link das einzige Ziel — die Zelle selbst ist
nicht klickbar. Ein 17px hoher Textlink ist auf dem Handy kaum zu
treffen, deshalb fuellt er hier die Zeilenhoehe aus. Optisch aendert
sich nichts: der Text bleibt stehen, nur die Flaeche waechst. */
td>.linklike{display:inline-flex;align-items:center;min-height:44px}
/* ---- größere Tap-Ziele/Abstände auf großen Screens ---- */
@media(min-width:861px){.content{padding:32px 36px}}
/* ===== Diagnose-Punkte ===== */
.diag-dot{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
/* Ohne 10px-Schein. Die Punkte stehen seit dem Umbau prominent im
Dashboard, im Statusband und in jeder Meldezeile — leuchtende Punkte
an jeder dieser Stellen sind genau die Optik, gegen die der Umbau geht.
Die Farbe traegt die Aussage, der Schein trug nichts. */
.diag-ok{background:var(--lime-soft)}
.diag-warn{background:var(--warn)}
.diag-fail{background:var(--danger)}
/* ===== Dokumente: aufgeräumt ===== */
.doc-search{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--line-soft);
border-radius:var(--r-lg);padding:6px 12px 6px 14px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.doc-search-ic{display:flex;color:var(--lime);opacity:.8}
.doc-search-ic svg{width:18px;height:18px}
.doc-search .inp{border:0;background:transparent;box-shadow:none;min-height:44px;padding-left:0}
.doc-search .inp:focus{box-shadow:none}
.doc-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;margin-left:8px;
padding:0 7px;border-radius:99px;background:var(--lime-glow);color:var(--lime);font-size:.72rem;font-weight:700;vertical-align:middle}
.doc-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.doc-card{padding:16px;gap:14px;transition:transform .16s, box-shadow .16s, border-color .16s}
.doc-card:hover{border-color:var(--line-strong)}
.doc-card-top{display:flex;align-items:flex-start;gap:12px}
.doc-card-meta strong{display:block;line-height:1.25}
.doc-icon{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
background:var(--bg-2);border:1px solid var(--line-soft);color:var(--lime-soft)}
.doc-icon svg{width:19px;height:19px}
/* Flaeche statt Verlauf — auch am Icon-Kachelchen. */
.doc-icon-mkt{color:var(--info);background:var(--bg-2)}
.doc-pick{gap:8px}
.doc-pick .inp{min-height:42px}
.doc-pick .btn{white-space:nowrap}
/* ===== v3.12: Bearbeiten-/Detail-Fenster = komplette Seite + Scrollfix =====
Der Block bestand aus 15 !important, mit denen die dritte .modal-Regel
die ersten beiden ueberstimmt hat. Alles davon steht jetzt EINMAL in
der Dialog-Sektion weiter oben — ohne !important, weil es dort nichts
mehr zu ueberstimmen gibt. Geblieben ist, was wirklich hierher gehoert. */
/* Inhalt im Vollbild angenehm breit, aber nicht endlos gestreckt */
.modal-body > *{max-width:1400px; margin-left:auto; margin-right:auto}
.modal-body .form-grid{gap:18px 22px}
/* ===== v3.9: aufgeräumte Sektionen (Finanzen u.a.) ===== */
.card h3 svg{width:18px;height:18px;vertical-align:-3px;color:var(--lime);opacity:.9;margin-right:2px}
.card-sub{color:var(--muted);font-size:.86rem;margin:-6px 0 16px}
/* Zugeklapptes Erfassungsformular. Zu ist der Normalfall: die Daten
darunter liest man taeglich, angelegt wird seltener. */
.add-bar{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);
padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
.add-bar .sec-label{display:flex;align-items:center;gap:var(--s-2);
font-size:var(--t-micro);font-weight:700;letter-spacing:.6px;text-transform:uppercase;
color:var(--muted);margin-bottom:0;cursor:pointer;list-style:none;min-height:24px}
.add-bar .sec-label::-webkit-details-marker{display:none}
.add-bar .sec-label::before{content:"+";font-size:var(--t-body);line-height:1;
color:var(--muted-2);font-weight:400}
.add-bar[open] .sec-label{margin-bottom:var(--s-3)}
.add-bar[open] .sec-label::before{content:"−"}
.add-bar .sec-label:hover{color:var(--ink)}
.add-bar .rech-row{margin:0}
/* "Nicht gemessen" ist eine Randnotiz, kein Fehler.
Bis v5 war jeder Leerzustand ein gestrichelter Kasten ueber die
volle Breite, zentriert. Auf "Systeme & Integrationen" standen sechs
davon untereinander — 2470 px Seite, deren Aussage sechsmal "hier
ist nichts" war, und die Seite sah aus wie ein Formular voller
Fehlermeldungen. Dabei ist "noch nicht eingerichtet" ein neutraler,
voellig richtiger Zustand.
Jetzt: eine ruhige Zeile mit Einzug, linksbuendig. Sie belegt Platz
nach Bedeutung, nicht nach Rahmen. Wirkt in Systemen, Historie,
Recovery und Marketing zugleich — eine Regel, vier Bildschirme. */
.empty-hint{margin:var(--s-1) 0 0;padding:var(--s-2) 0 var(--s-2) var(--s-3);
border-left:1px solid var(--line-soft);text-align:left;line-height:1.5;
max-width:var(--maxw-lesen)}
.status-line{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.tbl-mini thead th{font-size:.68rem;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:6px 12px;border-bottom:1px solid var(--line-soft)}
.rech-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rech-row .inp{flex:1;min-width:130px}
.rech-row .btn{flex:0 0 auto}
/* ===== v3.17: globale Suche + Aufgaben + Cockpit-Block ===== */
.gsearch{position:relative;flex:1;max-width:520px;margin:0 8px}
.gsearch-in{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line-soft);
border-radius:var(--r);padding:0 12px}
.gsearch-in svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.gsearch-in .inp{border:0;background:transparent;box-shadow:none;min-height:44px;padding:8px 0}
.gsearch-in .inp:focus{box-shadow:none}
.gsearch-pop{position:absolute;top:48px;left:0;right:0;z-index:120;background:var(--bg-card);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px -24px #000;padding:8px;max-height:60vh;overflow:auto}
.gs-h{font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.gs-item{padding:9px 10px;border-radius:var(--r-control);cursor:pointer}
.gs-item:hover{background:var(--lime-glow)}
.gs-empty{padding:14px;text-align:center}
@media(max-width:860px){.gsearch{display:none}}
/* ===== v3.21: 2FA QR-Code ===== */
.twofa-setup{max-width:520px}
.qr-box{display:inline-block;padding:12px;background:#fff;border-radius:var(--r-lg);margin:6px 0 12px;
box-shadow:0 8px 30px -12px #000}
.qr-box img{display:block;border-radius:4px}
.totp-secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:1px;
background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 14px;
display:inline-block;margin:4px 0 2px;color:var(--lime)}
/* ===== v3.22: Recovery-Code, Sync-Status, Nav-Badge ===== */
.recovery-box{margin:6px 0 4px;padding:12px 14px;background:rgba(224,162,58,.08);
border:1px solid rgba(224,162,58,.35);border-radius:var(--r)}
.recovery-code{font-size:1.15rem;letter-spacing:2px;color:#E0A23A}
/* Ohne !important: der Selektor ist jetzt spezifisch genug, weil .nav-dot
und .nav-dot-bad immer gemeinsam am selben Element stehen. */
.nav-dot.nav-dot-bad{background:var(--danger);color:#2A1614}
/* ===== v3.25: App-konformes Dropdown ===== */
.dd{position:relative}
.dd-flex{flex:1}
.dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.dd-trigger > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-trigger.dd-open{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow)}
.dd-placeholder{color:var(--muted)}
.dd-arrow{display:inline-flex;color:var(--lime);transition:transform .18s ease}
.dd-arrow-up{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;
background:#11160F;border:1px solid rgba(184,232,52,.28);border-radius:var(--r);
padding:6px;box-shadow:0 24px 60px -12px rgba(0,0,0,.85);max-height:300px;overflow-y:auto;
animation:ddIn .14s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
background:none;border:0;color:var(--ink);padding:10px 12px;min-height:44px;border-radius:var(--r-control);
font-size:.92rem;font-family:inherit;cursor:pointer;line-height:1.3}
.dd-item:hover{background:rgba(184,232,52,.14)}
.dd-item-active{color:var(--lime);font-weight:600}
.dd-item-active::after{content:"✓";color:var(--lime);margin-left:10px}
.dd-item-active:hover{background:rgba(184,232,52,.14)}
.dd-value{color:var(--ink)}
/* kompaktes Dropdown für Toolbar-/Rech-Zeilen (wie inp-sm) */
.dd-sm{flex:0 0 auto}
.dd-sm .dd-trigger{padding:9px 12px;font-size:.92rem;min-height:44px}
.dd-sm .dd-menu{min-width:200px}
.rech-row .dd,.toolbar .dd{flex:1;min-width:150px}
.rech-row .dd-sm,.toolbar .dd-sm{flex:1;min-width:150px}
/* ===== v3.26: Datumsfelder ans App-Design ===== */
input[type=date].inp{
color-scheme:dark; /* nativer Kalender-Popup in Dunkel */
position:relative;cursor:pointer;
}
input[type=date].inp::-webkit-calendar-picker-indicator{
filter:invert(82%) sepia(38%) saturate(700%) hue-rotate(38deg) brightness(98%) contrast(92%);
cursor:pointer;opacity:.9;
}
input[type=date].inp::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=date].inp:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow)}
input[type=date].inp::-webkit-datetime-edit{color:var(--ink)}
input[type=date].inp::-webkit-datetime-edit-fields-wrapper{color:var(--ink)}
/* ===== v3.28: Wortmarke „DreiHundertSechzig" (wie Website) ===== */
.wortmarke{font-family:var(--body);font-weight:800;letter-spacing:-.2px;white-space:nowrap;display:inline}
.wortmarke .wm-1{color:inherit}
.wortmarke .wm-2{color:var(--lime);font-style:italic;font-weight:800}
/* in der Sidebar: kleiner + nicht über den Sidebar-Rand laufen lassen */
.brand{overflow:visible}
.brand > div{min-width:0}
/* Wortmarke in der Sidebar: zweizeilig statt abgeschnitten.
Vorher lief sie mit 157px in ein 145px breites Feld und wurde vom
overflow:hidden gekappt — sichtbar war "DreiHundertSechz…".
Umbrechen konnte sie nicht, weil .wortmarke global white-space:nowrap
und display:inline setzt (Zeile ~605) — das ist fuer Fliesstext auch
richtig und bleibt. Hier, und nur hier, wird der Umbruch erlaubt und
ueber die beiden vorhandenen Spans gefuehrt: "DreiHundert" ueber
"Sechzig". Kein !important noetig, .brand-name .wortmarke ist bereits
der spezifischere Selektor. */
.brand-name{overflow:hidden}
.brand-name .wortmarke{font-size:1.05rem;letter-spacing:-.2px;
display:block;white-space:normal}
.brand-name .wm-1,.brand-name .wm-2{display:block;line-height:1.08}
.brand-name .wm-1{font-weight:740;letter-spacing:-.35px}
.brand-name .wm-2{margin-top:-1px;text-shadow:0 0 18px rgba(184,232,52,.16)}
.lock-card h2 .wortmarke{font-weight:800}
/* ===== v3.29: Liquidität, Kleinunternehmer-Ampel, Mahnungen ===== */
/* minmax(0,…) statt 1fr: sonst diktiert der Zelleninhalt die Spaltenbreite
und die Dreierreihe sprengt auf 320px die Seite. */
.liq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:12px;margin:6px 0 14px}
.liq-cell{background:var(--bg-elev,#141a14);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 16px;text-align:center}
.liq-net{font-family:var(--serif);font-style:italic;font-size:1.45rem;color:var(--lime);margin:4px 0;line-height:1}
.liq-net.liq-neg{color:#E0726A}
.klein-box{margin:8px 0 4px;padding:14px 16px;background:var(--bg-elev,#141a14);border:1px solid var(--line-soft);border-radius:var(--r)}
.klein-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem;margin-bottom:8px;flex-wrap:wrap}
.klein-ok{color:var(--lime)}
.klein-warn{color:#E0A23A}
.klein-over{color:#E0726A}
.klein-track{height:10px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
/* Gleiche Lage wie .bar-fill: Wert wird beim Mount gesetzt, die
Transition lief nie. */
.klein-fill{height:100%;border-radius:99px}
.klein-fill-ok{background:var(--lime)}
.klein-fill-warn{background:#E0A23A}
.klein-fill-over{background:#E0726A}
.dun-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.dun-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);flex-wrap:wrap}
.dun-row:last-child{border-bottom:0}
.bk-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.bk-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem;margin-bottom:6px;flex-wrap:wrap}
/* ===== v3.29: DocConfig mit PDF-Vorschau ===== */
.doc-config-layout{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:22px;align-items:start;min-height:0}
.doc-config-form{min-width:0}
.doc-config-preview{position:sticky;top:0;min-height:60vh;height:100%;background:var(--bg-elev,#141a14);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;display:flex}
.doc-pdf-frame{width:100%;height:100%;min-height:60vh;border:0;background:#525659}
.doc-preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;color:var(--muted)}
.doc-preview-empty svg{width:42px;height:42px;opacity:.5}
.doc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}
.doc-foot-actions{display:flex;gap:10px}
@media (max-width:860px){
.doc-config-layout{grid-template-columns:1fr}
.doc-config-preview{min-height:50vh;order:2}
.doc-pdf-frame{min-height:50vh}
}
/* ===== v3.31: Kontakt-Historie Typen + Mail-Vorlagen ===== */
/* Der Grundwert traegt jetzt eine Farbe: Eintraege mit unbekanntem Typ
(englische Altwerte wie "note") hatten sonst einen unsichtbaren Punkt. */
.act-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:middle;background:var(--muted-2)}
.act-anruf{background:#5BA8E0}
.act-mail{background:var(--info)}
.act-termin{background:#E0A23A}
.act-notiz,.act-note,.act-contact,.act-status{background:var(--muted-2)}
/* Der Eingang ist der Ursprung des Leads — einer der erlaubten Lime-Faelle. */
.act-eingang{background:var(--lime)}
/* ===== v3.31: Kunden-Pipeline + Ansicht-Umschalter =====
Umbenannt von .lead-* zu .pipe-*: seit es eine echte Lead-Inbox gibt,
waren zwei Dinge mit demselben Praefix zwei verschiedene Sachen. */
/* Vier Segmente passen bei 320px nicht nebeneinander. Umbrechen statt
ueberlaufen — scrollen waere hier schlechter, weil die hinteren
Segmente dann unsichtbar waeren. */
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);
padding:8px 12px;min-height:44px;border-radius:var(--r-control);font-size:var(--t-small);font-family:inherit;cursor:pointer;
transition:background .14s var(--ease),color .14s var(--ease)}
.seg-btn svg{width:15px;height:15px}
.seg-btn:hover{color:var(--ink)}
/* v5: der Umschalter sagt, WO man ist — er ist keine Handlung. Bis
hierher war er vollflaechig lime und stand damit direkt neben dem
lime "Neuer Kunde": zwei gleich laute Signale, von denen nur eines
etwas ausloest. Jetzt traegt er die gewaehlte Seite als Flaeche und
Lime nur noch als Kante. */
.seg-btn.on{background:var(--bg-elev);color:var(--ink);font-weight:600;
box-shadow:inset 0 -2px 0 var(--lime)}
.seg-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.pipe-card{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px}
.pipe-card .row-click{cursor:pointer}
.pipe-move{display:flex;justify-content:space-between;margin-top:8px;gap:6px}
.pipe-arrow{flex:1;background:var(--bg-elev);border:1px solid var(--line-soft);color:var(--muted);
border-radius:var(--r-control);padding:4px 0;min-height:44px;font-size:1.1rem;line-height:1;cursor:pointer}
.pipe-arrow:hover{background:var(--bg-hover);color:var(--ink)}
.pipe-arrow:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.pipe-arrow-spacer{flex:1}
/* ===== v3.32: Kundendetail-Layout sauber ===== */
.detail-edit-bar{display:flex;justify-content:flex-end;margin-bottom:12px}
.contact-add{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.contact-add .contact-type{flex:0 0 130px}
.contact-add .contact-note{flex:1 1 200px;min-width:0;max-width:none}
.contact-add .btn{flex:0 0 auto;white-space:nowrap}
/* Datumsfelder breit genug, damit TT.MM.JJJJ nicht abschneidet */
input[type=date].inp{min-width:150px}
input[type=date].inp-sm{min-width:140px}
/* Detail-Grid auf schmalen Modals umbrechen */
@media (max-width:760px){
.detail-grid{grid-template-columns:1fr}
.contact-add .contact-type{flex:1 1 100%}
}
/* ===== v3.34: Akquise-Playbook ===== */
.akq-layout{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.akq-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:90px}
.akq-nav-item{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line-soft);color:var(--ink);text-align:left;padding:10px 12px;min-height:44px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit;font-size:.9rem;transition:background .15s var(--ease),border-color .15s var(--ease)}
.akq-nav-item:hover{border-color:var(--lime-soft)}
/* Wie die Hauptnavigation: Flaeche plus 2px-Kante. Der Lime-Verlauf war
derselbe Effekt, den .nav-item.active in P2 abgelegt hat — zwei
Navigationen im selben Produkt duerfen nicht verschieden aussehen. */
.akq-nav-item.on{background:var(--bg-elev);border-color:var(--line);box-shadow:inset 2px 0 0 var(--lime)}
.akq-nav-nr{font-family:var(--serif);font-style:italic;color:var(--lime);font-size:.95rem;flex:0 0 auto}
.akq-nav-label{min-width:0}
.akq-content{min-width:0;display:flex;flex-direction:column;gap:16px}
.akq-chapter-head{display:flex;gap:16px;align-items:flex-start;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.akq-chapter-nr{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--lime);line-height:1;flex:0 0 auto}
.akq-chapter-title{margin:0;font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.3px}
.akq-text{line-height:1.6;color:var(--ink);margin:0}
.akq-h4{margin:0 0 10px;font-size:1rem;color:var(--lime-soft);letter-spacing:.3px}
.akq-block{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px}
.akq-principles{display:flex;flex-direction:column;gap:10px}
.akq-principle{display:flex;flex-direction:column;gap:2px}
.akq-principle strong{color:var(--ink)}
.akq-tbl th{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.akq-tbl .akq-td-key{font-weight:600;color:var(--lime-soft);white-space:nowrap;vertical-align:top}
.akq-tbl td{vertical-align:top;line-height:1.5}
.akq-tipp{background:rgba(184,232,52,.08);border-left:2px solid var(--lime);border-radius:var(--r-control);padding:12px 16px;line-height:1.55}
.akq-warn{background:rgba(224,162,58,.1);border-left:2px solid #E0A23A;border-radius:var(--r-control);padding:12px 16px;line-height:1.55}
.akq-script{background:#0c100d;border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px}
.akq-script-title{display:flex;align-items:center;gap:8px;color:var(--lime);font-weight:600;margin-bottom:10px;font-size:.92rem}
.akq-script-title svg{width:15px;height:15px}
.akq-script-body{display:flex;flex-direction:column;gap:6px}
.akq-script-line{line-height:1.55;padding-left:12px;border-left:2px solid rgba(184,232,52,.25)}
.akq-script-note{color:var(--muted);font-style:italic;border-left-color:transparent}
@media (max-width:860px){
.akq-layout{grid-template-columns:1fr}
.akq-nav{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.akq-nav-item{flex:0 0 auto;font-size:.82rem;padding:8px 12px}
.akq-chapter-nr{font-size:1.7rem}
.akq-chapter-title{font-size:1.25rem}
}
/* ===== v3.35: Akquise USP-Grid ===== */
.akq-usp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
/* Verlauf plus dicke Lime-Kante an einer Karte ist genau die Optik, gegen
die dieser Umbau angeht. Die Karte traegt Text, kein Signal. */
.akq-usp-card{background:var(--bg-2);border:1px solid var(--line-soft);
border-radius:var(--r-sm);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.akq-usp-card strong{color:var(--ink)}
@media (max-width:860px){ .akq-usp-grid{grid-template-columns:1fr} }
/* ===== v3.37: E-Mail-Generator ===== */
.mailgen-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.mailgen-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.mailgen-body{font-family:var(--body);line-height:1.5;resize:vertical;min-height:240px}
.mailgen-preview{position:sticky;top:90px;min-width:0}
.mail-preview-card{background:#0c100d}
.mail-preview-head{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-bottom:10px}
.mail-preview-head .muted{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.mail-preview-subject{font-weight:700;font-size:1.05rem;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--line-soft);margin-bottom:12px}
.mail-preview-body{white-space:pre-wrap;line-height:1.6;color:var(--ink-soft);font-size:.92rem}
@media (max-width:860px){
.mailgen-layout{grid-template-columns:1fr}
.mailgen-preview{position:static}
}
/* ============================================================
v3.40 — Ansprechpartner, Adresssuche, Dropdown-Portal,
Zurück-Button, iPhone-Feinschliff, Politur
============================================================ */
/* Dropdown: Menü als Portal (fixed) — kann nie mehr überlagert werden */
.dd-menu-portal{position:fixed;right:auto}
.dd-group{font-size:.66rem;text-transform:uppercase;letter-spacing:.9px;color:var(--muted-2);
padding:9px 12px 4px;font-weight:700;position:sticky;top:0;background:#11160F}
.dd-group:first-child{padding-top:4px}
/* Zurück-Button in der Topbar */
/* Auf dem Handy verschwindet die Beschriftung (.hide-phone) und uebrig
bleibt das Pfeil-Icon — ohne Mindestbreite war das Ziel 38px breit. */
.btn-back{padding-left:8px;padding-right:12px;min-width:44px}
.btn-back svg{transform:rotate(90deg)}
/* Ansprechpartner — Editor im Formular */
.contacts-edit{display:flex;flex-direction:column;gap:12px}
.contact-row{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px;
display:flex;flex-direction:column;gap:10px}
.contact-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.contact-row-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.icon-btn.danger{color:#E0726A;border:1px solid transparent;background:transparent;cursor:pointer;
border-radius:var(--r-control);padding:6px 8px;display:inline-flex;align-items:center}
.icon-btn.danger:hover{background:rgba(224,114,106,.12)}
@media(max-width:560px){.contact-row-grid{grid-template-columns:1fr}}
/* Ansprechpartner — Anzeige im Kundendetail */
.contact-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px}
.contact-card-main{display:flex;flex-direction:column;gap:3px;min-width:0}
/* mailto:/tel: sind Aktionen, keine Fussnoten — 16px hoch war zu wenig. */
.contact-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem;min-height:44px}
.contact-link:hover{color:var(--lime)}
.contact-link svg{width:14px;height:14px}
.contact-star{color:var(--lime)}
/* Adress-Autovervollständigung */
.addr-ac{position:relative}
.addr-ac-input{position:relative;display:flex;align-items:center}
.addr-ac-input .inp{padding-left:38px;width:100%}
.addr-ac-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);display:inline-flex;pointer-events:none}
.addr-ac-ico svg{width:16px;height:16px}
.addr-ac-busy{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--lime)}
.addr-ac-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#11160F;
border:1px solid rgba(184,232,52,.28);border-radius:var(--r);padding:6px;max-height:280px;overflow-y:auto;
box-shadow:0 24px 60px -12px rgba(0,0,0,.85)}
.addr-ac-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0;
color:var(--ink);padding:9px 11px;border-radius:var(--r-control);cursor:pointer;font-family:inherit}
.addr-ac-item:hover{background:rgba(184,232,52,.14)}
.addr-ac-line1{font-size:.9rem}
.addr-ac-empty{padding:10px 11px}
/* Anhang-Hinweis im E-Mail-Generator */
.attach-hint{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;
background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--r-sm)}
.attach-hint > svg{flex:0 0 auto;color:var(--lime);width:20px;height:20px}
.attach-hint > div{flex:1 1 auto;min-width:0}
.attach-hint .btn{flex:0 0 auto}
@media(max-width:560px){.attach-hint{flex-wrap:wrap}}
/* iPhone 17 Pro / Notch & Home-Indicator: seitliche Safe-Areas */
@media(max-width:860px){
/* Eine Regel fuer den Innenabstand des Inhalts. Vorher standen zwei in
derselben Breakpoint-Stufe und ueberboten sich mit !important. */
.content{padding-left:calc(18px + env(safe-area-inset-left));
padding-right:calc(18px + env(safe-area-inset-right));
padding-bottom:calc(82px + env(safe-area-inset-bottom))}
.bottomnav{padding-left:calc(4px + env(safe-area-inset-left));
padding-right:calc(4px + env(safe-area-inset-right))}
.topbar{padding-left:calc(16px + env(safe-area-inset-left));
padding-right:calc(16px + env(safe-area-inset-right))}
}
/* Modale füllen Safe-Area sauber */
.modal-body{padding-left:max(26px,env(safe-area-inset-left));padding-right:max(26px,env(safe-area-inset-right))}
/* ============================================================
v3.55 — Dashboard: "Heute" statt Kennzahl-Wand
Zeilen, keine Kacheln: eine Zeile traegt Zahl, Sache und Grund
nebeneinander und ist als Ganzes anklickbar. Kacheln haetten
dieselben Nullen nur schoener verpackt.
============================================================ */
.today-list{display:flex;flex-direction:column;gap:2px;margin:0 -10px}
.today-row,.alarm-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
background:transparent;border:0;color:var(--ink);font-family:inherit;font-size:var(--t-body);
padding:12px 10px;min-height:56px;border-radius:var(--r-sm);cursor:pointer;
transition:background .14s var(--ease)}
.today-row:hover,.alarm-row:hover{background:var(--bg-elev)}
.today-row:focus-visible,.alarm-row:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
/* Die Zahl ist das erste, was gelesen wird — Ziffernbreite fix, damit
die Beschriftungen darunter auf einer Kante stehen. */
.today-n{flex:0 0 auto;min-width:34px;text-align:center;font-family:var(--serif);font-style:italic;
font-size:var(--t-h2);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.today-n-lime{color:var(--lime)}
.today-n-bad{color:var(--danger)}
.today-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.today-main strong{font-weight:600;letter-spacing:-.005em}
.today-main .small{overflow-wrap:anywhere}
.today-go{flex:0 0 auto;color:var(--muted-2);display:inline-flex}
.today-go svg{width:16px;height:16px}
.today-row:hover .today-go,.alarm-row:hover .today-go{color:var(--ink)}
/* Alarm: eine Karte, rote Kante, kein Blinken, kein Verlauf. */
.card-alarm{border-color:rgba(224,114,106,.4);padding:8px 14px}
.alarm-row{gap:12px}
.alarm-row .diag-dot{flex:0 0 11px}
@media(max-width:520px){
.today-row,.alarm-row{gap:10px;padding:10px 8px}
.today-n{min-width:28px;font-size:var(--t-h3)}
}
/* ============================================================
v3.55 — Lead-Inbox (Master-Detail)
Links Liste, rechts Arbeitsflaeche. Unter 1024px ersetzt das
Detail die Liste: nebeneinander bliebe fuer beides zu wenig.
============================================================ */
.lead-toolbar{align-items:center;gap:12px}
.lead-toolbar .search{max-width:340px}
.seg-n{margin-left:6px;font-size:var(--t-micro);opacity:.7;font-variant-numeric:tabular-nums}
.seg-btn.on .seg-n{opacity:.75}
/* ── Sales Queue (V5-Rollout) ────────────────────────────────────────
Solange kein Lead gewaehlt ist, nimmt die Liste die volle Breite.
Vorher stand rechts dauerhaft ein halber Bildschirm mit dem Satz
"Lead links auswaehlen." — bei vier Leads war die Haelfte der Flaeche
eine Aufforderung, statt Arbeitsflaeche zu sein. */
.lead-split{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:start}
.lead-split:has(.lead-detail-pane){grid-template-columns:minmax(300px,400px) 1fr}
.lead-list{display:flex;flex-direction:column;min-width:0}
/* Zeile statt Karte — dieselbe Sprache wie die Kundenliste. Vier Karten
mit Rahmen, Flaeche und Radius waren vier Objekte; eine Queue ist
eine Liste. Anker links (Wartezeit), Aussage mittig, Zustand rechts. */
.lead-row{display:grid;grid-template-columns:5.5em 1fr auto;gap:2px var(--s-4);
align-items:baseline;width:100%;text-align:left;
background:none;border:0;border-top:1px solid var(--line-soft);
padding:var(--s-3) var(--s-2);min-height:44px;
color:var(--ink);font-family:inherit;font-size:var(--t-body);cursor:pointer;
transition:background .12s var(--ease)}
.lead-row:first-child{border-top:0}
.lead-row:hover{background:var(--bg-hover)}
.lead-row.active{background:var(--bg-elev)}
.lead-row:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
/* Der Anker traegt die Zahl, die im Morgenblick als kritisch gilt. */
.lead-anker{grid-column:1;grid-row:1/3;align-self:center;display:flex;
flex-direction:column;gap:1px;text-align:right;min-width:0}
.lead-wartet{font:700 var(--t-h3)/1.1 var(--body);font-variant-numeric:tabular-nums;
letter-spacing:-.02em}
.lead-wartet-alt{color:var(--danger)}
.lead-anker-label{font-size:var(--t-micro);color:var(--laut-3)}
.lead-row-name{grid-column:2;grid-row:1;font-weight:600;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-row-sub{grid-column:2;grid-row:2;font-size:var(--t-small);color:var(--laut-2);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-row-rechts{grid-column:3;grid-row:1/3;align-self:center;display:flex;
flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.lead-row-fuss{grid-column:2/-1;grid-row:3;display:flex;flex-wrap:wrap;
gap:2px var(--s-3);margin-top:2px;font-size:var(--t-small);min-width:0}
.lead-next{color:var(--laut-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-quelle{color:var(--laut-3)}
.lead-fu{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-micro);
color:var(--muted);white-space:nowrap}
.lead-fu svg{width:13px;height:13px}
.lead-fu-bad{color:var(--danger)}
.lead-fu-now{color:var(--warn)}
/* Ein Lead ohne Wiedervorlage ist eine Notiz, kein Lead — die Luecke
steht da, aber leise. Der Regelmotor meldet sie ohnehin. */
.lead-fu-fehlt{color:var(--unknown);font-style:italic}
@media(max-width:720px){
.lead-row{grid-template-columns:1fr;padding:var(--s-3) 0}
.lead-anker{grid-column:1;grid-row:1;flex-direction:row;align-items:baseline;
gap:var(--s-2);text-align:left}
/* grid-column MUSS mitwandern. Die Basisregeln setzen Spalte 2 und 3;
in einem einspaltigen Raster erzeugt das eine implizite zweite
Spalte, und Name und Anliegen ruecken nach rechts aus dem Bild. */
.lead-row-name{grid-column:1;grid-row:2}
.lead-row-sub{grid-column:1;grid-row:3;white-space:normal}
.lead-row-rechts{grid-column:1;grid-row:4;flex-direction:row;align-items:center;
justify-content:flex-start;gap:var(--s-3);margin-top:var(--s-2)}
.lead-row-fuss{grid-column:1;grid-row:5}
}
.lead-detail-pane{min-width:0}
.lead-detail{display:flex;flex-direction:column;gap:16px}
.lead-detail-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:var(--t-h1);letter-spacing:.4px}
.lead-detail .detail-badges{margin:10px 0 0}
/* Der Chevron zeigt ungedreht nach unten, zurueck zur Liste geht aber nach
links — gleiche Drehung wie beim Zurueck in der Topbar. */
.lead-back{display:none;margin-bottom:10px}
.lead-back svg{transform:rotate(90deg)}
.lead-contact{display:flex;flex-wrap:wrap;gap:16px}
.lead-contact .contact-link{font-size:var(--t-body)}
.lead-detail .card{margin-bottom:0}
.lead-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
min-height:220px;border:1px dashed var(--line-soft);border-radius:var(--r);text-align:center;padding:24px}
.lead-empty svg{width:26px;height:26px;opacity:.45}
.lead-empty p{margin:0}
/* Schnellaktionen: eine Reihe, gleiche Gewichtung. Keine davon ist die
Primaeraktion — welche richtig ist, entscheidet der Lead, nicht das UI. */
.lead-actions{gap:8px}
.lead-timeline{margin-top:14px}
.lead-timeline .list-line:first-child{padding-top:0}
@media(max-width:1024px){
/* Eine Spalte: entweder Liste oder Detail, nie beides gequetscht. */
.lead-split{grid-template-columns:1fr}
.lead-view-detail .lead-list{display:none}
.lead-view:not(.lead-view-detail) .lead-detail-pane{display:none}
.lead-back{display:inline-flex}
.lead-toolbar{flex-direction:column;align-items:stretch}
.lead-toolbar .seg{overflow-x:auto;max-width:100%}
.lead-toolbar .search{max-width:none}
}
/* ============================================================
v3.55 — ein Muster fuer Aufgaben, Kunden, Projekte
Vorher: vier Leerzustaende, drei Arten Anzahl anzuzeigen, ein
Emoji als Warnzeichen und eine hart notierte Rot-Farbe.
============================================================ */
/* flex-wrap und min-width:0 sind hier kein Detail: der Kopf traegt
Titel UND Zusatz (Zaehler, URL, Knopf). Ohne beides schiebt ein
langer Zusatz die Karte aus dem Schirm — gemessen mit den echten
Marken-Fonts auf 320px: die URL in der SEO-Karte ergab 27px
Overflow. In der Systemschrift war der Text schmal genug, um es zu
verdecken. */
.card-head{display:flex;align-items:center;gap:4px 9px;flex-wrap:wrap;min-width:0}
.card-head > *{min-width:0;overflow-wrap:anywhere}
.card-head .diag-dot{flex:0 0 auto}
.card-count{margin-left:auto;font-size:var(--t-small);font-weight:600;color:var(--muted);
font-variant-numeric:tabular-nums}
.result-count{white-space:nowrap;margin-left:auto;align-self:center}
.toolbar{align-items:center}
.toolbar .search{max-width:340px}
.empty-hint{color:var(--muted);margin:6px 0 0}
.kanban-empty{padding:14px 0;text-align:center}
/* Zustand einer Aufgabe als Klasse statt als Inline-Stil mit fester Farbe */
.is-overdue{color:var(--danger)}
.is-done{text-decoration:line-through;opacity:.55}
.row-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.row-actions .btn-mini svg{width:14px;height:14px}
/* Projektkarte ist jetzt ein Button — Reset, damit sie wie vorher aussieht */
.proj-card{display:block;width:100%;text-align:left;font-family:inherit;font-size:var(--t-body);color:var(--ink)}
@media(max-width:560px){
.result-count{margin-left:0}
.toolbar .search{max-width:none}
/* .row ist eine waagerechte Gruppe ohne Umbruch — auf schmalen Geraeten
schiebt sie sonst ueber den Rand hinaus (gemessen: 329px auf 320px). */
.row{flex-wrap:wrap}
}
/* Zwischenueberschrift in den Einstellungen: neun gleich aussehende
Karten hintereinander sind kein Aufbau, sondern eine Halde. */
.settings-group{font-size:var(--t-micro);font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);margin:26px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.settings-group:first-of-type{margin-top:4px}
/* Aktionsspalte in Tabellen: Buttons statt Textlinks mit Trennpunkten */
.row-actions-cell{text-align:right;white-space:nowrap}
.row-actions-cell .row-actions{justify-content:flex-end}
/* Spaltenkopf, der nur fuer Screenreader existiert */
.sr-only-head{font-size:0!important;color:transparent}
/* ============================================================
v3.55 — Zustaende sichtbar machen
Offline, abgelaufene Anmeldung und fehlgeschlagene Sicherung
liefen bisher stumm. Ein Band, eine Rangfolge, kein Blinken.
============================================================ */
.statusbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:11px 14px;margin-bottom:18px;border-radius:var(--r-sm);
border:1px solid var(--line);background:var(--bg-card);font-size:var(--t-body)}
.statusbar .diag-dot{flex:0 0 auto}
.statusbar-text{flex:1 1 240px;min-width:0;line-height:1.45}
.statusbar-offline{border-color:rgba(230,200,74,.35)}
.statusbar-bad{border-color:rgba(224,114,106,.4)}
/* Rueckmeldung an Ort und Stelle statt alert(): ein modales Fenster
reisst den Blick weg und verdeckt genau das Ergebnis, um das es geht. */
.inline-msg{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:14px;
border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--bg-card);font-size:var(--t-body)}
.inline-msg span:nth-child(2){flex:1 1 auto;min-width:0}
.inline-msg-ok{border-color:var(--line-lime)}
.inline-msg-bad{border-color:rgba(224,114,106,.4)}
.inline-msg .btn-mini svg{width:14px;height:14px}
/* Pflichtfeld-Fehler am Feld. Der Rand traegt die Aussage nicht allein —
daneben steht der Satz, der sagt, warum das Feld gebraucht wird. */
.inp-error{border-color:var(--danger)}
.inp-error:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(224,114,106,.18)}
.field-error{display:block;margin-top:6px;color:var(--danger);font-size:var(--t-small);line-height:1.4}
/* ============================================================
v3.55 — Tippziele: 44x44 als Untergrenze, ueberall
Die Button-Sektion setzte 44px nur fuer .btn. Alles Kleinere —
Filterchips, Mini-Buttons, kompakte Felder, Dropdown-Ausloeser,
Burger, Zurueck, Checkboxen — lag zwischen 13 und 42px. Gemessen
auf 390px: 63 Ziele unter 44px.
Ausgenommen bleiben ausschliesslich Inline-Textlinks im Fliesstext
(.linklike als Verweis, nicht als Aktion) — die sind laut WCAG 2.5.8
ausgenommen und stehen nie allein fuer eine Aktion.
============================================================ */
/* Politur: Tap-Highlight aus */
*{ -webkit-tap-highlight-color:transparent }
.btn:focus-visible,.nav-item:focus-visible,.bn-item:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* sanftes Erscheinen der Detail-Karten */
.contact-card,.contact-row{animation:fadeUp .25s ease both}
/* ============================================================
v3.55 — Bedienbarkeit ohne Maus und ohne Bewegung
============================================================ */
/* Sprungmarke: sichtbar erst beim Tabben. Ohne sie muss man sich mit der
Tastatur durch 17 Navigationspunkte arbeiten, bevor der Inhalt kommt. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;
background:var(--lime);color:#0A0D0B;font-weight:700;padding:12px 18px;
border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
/* Zwei Suchfelder hatten ihren Fokusring per box-shadow:none abgeschaltet,
weil der Rahmen am umschliessenden Kasten haengt. Der Ring wandert
deshalb dorthin, statt ersatzlos zu verschwinden. */
.doc-search:focus-within,.gsearch-in:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow)}
/* Fokus bleibt auch dort sichtbar, wo Flaechen statt Rahmen gestaltet sind. */
.today-row:focus-visible,.alarm-row:focus-visible,.lead-row:focus-visible,
.proj-card:focus-visible,.row-click:focus-visible,
.seg-btn:focus-visible,.icon-btn:focus-visible,.linklike:focus-visible,
.chip:focus-visible,.gs-item:focus-visible,.dd-item:focus-visible,
.skip-link:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* Tabellenzeile: der Umriss wird an der Zelle sichtbar, nicht an
*/
tr.row-click:focus-visible{outline:none}
tr.row-click:focus-visible td{background:var(--bg-elev);box-shadow:inset 0 2px 0 var(--lime),inset 0 -2px 0 var(--lime)}
/* Geschlossene Sidebar liegt auf dem Handy nur verschoben da und blieb
damit im Tab-Weg: man tabbte in ein unsichtbares Menue. */
@media(max-width:860px){
.sidebar{visibility:hidden;transition:transform .25s var(--ease),visibility .25s}
.sidebar.open{visibility:visible}
}
/* Reduzierte Bewegung: vorher galt das nur fuer das Logo und den Dialog.
Wer Bewegung abbestellt hat, meint alle Bewegung — auch die 18
Uebergaenge und die gestaffelte Karteneinblendung. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
.view-fade,.card,.contact-card,.contact-row,.dd-menu,.modal{animation:none!important}
.sidebar{transition:none!important}
}
/* ═══════════════ Command Center ═══════════════
Ruhig gebaut: die Dringlichkeit steckt in einem kleinen Wort und
einer schmalen Kante, nicht in Flaeche oder Farbe. Wer neun
Abteilungen bunt einfaerbt, hat neun Alarme und keine Rangfolge. */
.reco{padding:14px 0;border-top:1px solid var(--line-soft)}
.reco:first-of-type{border-top:0}
.reco-kopf{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.reco-sev{font:700 .7rem/1 var(--body,sans-serif);letter-spacing:.06em;text-transform:uppercase}
.reco-dept{font-size:.75rem;color:var(--muted)}
.reco-titel{margin:0 0 4px;font-size:1rem;line-height:1.35}
.reco-grund{margin:0 0 6px;font-size:.88rem;color:var(--muted);line-height:1.5}
.reco-wirkung{margin:0 0 8px;font-size:.88rem;line-height:1.5;
padding-left:12px;border-left:2px solid var(--line)}
.reco-fuss{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.card-count-warn{background:rgba(224,114,106,.16);color:#E0726A}
/* Abteilungen: gleiche Groesse, gleiche Ruhe. Nur die Kante oben
verraet, wo etwas liegt. */
.dept-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.dept-kachel{display:flex;flex-direction:column;gap:2px;text-align:left;
min-height:104px;padding:13px 14px;border:1px solid var(--line);
border-radius:var(--r);background:var(--bg-card);color:var(--ink);
cursor:pointer;border-top-width:2px;border-top-color:var(--line)}
.dept-kachel:hover{border-color:var(--line-strong)}
.dept-kritisch{border-top-color:#E0726A}
.dept-wichtig{border-top-color:#E0A23A}
.dept-hinweis{border-top-color:#6AA9E0}
.dept-name{font-size:.8rem;color:var(--muted)}
.dept-zahl{font:700 1.4rem/1.2 var(--body,sans-serif)}
.dept-label{font-size:.72rem}
.dept-next{margin-top:6px;font-size:.78rem;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.brief-zahlen{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:14px}
.entsch-ergebnis{margin-top:10px;padding:9px 12px;border-radius:var(--r-control);
background:rgba(127,176,46,.1);font-size:.9rem}
/* Gesperrte Lizenz: gedaempft statt alarmrot — sie ist nicht kaputt,
sie ist nur nicht von hier aus zu aendern. */
.lic-locked td{opacity:.75}
@media (max-width:520px){
.dept-grid{grid-template-columns:repeat(2,1fr)}
.reco-fuss .btn{flex:1 1 calc(50% - 4px)}
}
/* ═══════════ Newsletter-Herkunft ═══════════
Der Trichter erklaert, warum aus 378 Zustimmungen 223 Abonnenten
werden. Kein Diagramm, das man lesen lernen muss: vier Zahlen, ein
Pfeil dazwischen. */
.funnel{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;margin:14px 0}
.funnel-stufe{position:relative;flex:1 1 150px;min-width:0;padding:12px 14px;
border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
display:flex;flex-direction:column;gap:1px}
.funnel-zahl{font:700 1.5rem/1.15 var(--body,sans-serif);letter-spacing:-.01em}
.funnel-label{font-size:.85rem}
.funnel-sub{font-size:.74rem;line-height:1.3}
.funnel-pfeil{position:absolute;right:-10px;top:50%;transform:translateY(-50%);
color:var(--muted);font-size:.9rem;z-index:1}
.funnel-stufe:last-child{border-color:var(--lime-soft)}
/* Statusband: eine Zeile, vier Anteile, breitenproportional. Klick
filtert die Liste — Zahl und Liste sind dieselbe Wahrheit. */
.hb{display:flex;gap:3px;margin:14px 0 10px;min-height:52px}
.hb-seg{flex:1 1 0;min-width:60px;border:1px solid var(--line);border-radius:var(--r-control);
background:var(--bg-2);color:var(--ink);cursor:pointer;padding:8px 6px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.hb-seg:hover{border-color:var(--line-strong)}
.hb-seg.on{border-color:var(--lime);background:rgba(184,232,52,.1)}
.hb-n{font:700 1.05rem/1 var(--body,sans-serif)}
.hb-l{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.2;
overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Die Kategorien tragen ihre Bedeutung im Wort, nicht in der Farbe —
nur der abgemeldete Anteil wird gedaempft, weil er inaktiv ist. */
.hb-ab{opacity:.6}
@media (max-width:520px){
.funnel-pfeil{display:none}
.funnel-stufe{flex:1 1 calc(50% - 3px)}
.hb{flex-wrap:wrap}
.hb-seg{flex:1 1 calc(50% - 2px)}
}
/* ═══════════════════════════════════════════════════════════════════
DreiHundertSechzig OS V2 — Produkte · IT · Automationen · Ereignisse
───────────────────────────────────────────────────────────────────
Keine neuen Tokens. Radien, Typostufen, Flaechen und die eine
Akzentfarbe kommen aus dem :root ganz oben — dieser Block fuegt nur
Anordnung hinzu, keine zweite Designsprache.
Eine Regel traegt alles hier: ein ungemessener Wert sieht anders aus
als eine Null. Deshalb .os-ungemessen — kursiv, gedaempft, ohne
Zahlgewicht. Wer die Ansicht ueberfliegt, soll die Luecke sehen,
bevor er sie liest.
═══════════════════════════════════════════════════════════════════ */
/* `.9em` rechnete relativ zum Elternteil und stapelte sich: in einem
`.small` (jetzt 12 px) ergab das 10,8 px — unter der Lesbarkeitsgrenze,
ausgerechnet bei dem Hinweis, der sagt, dass etwas NICHT gemessen ist.
Eine feste Stufe kann sich nicht aufaddieren. */
.os-ungemessen{font-style:italic;color:var(--muted-2);font-size:var(--t-micro)}
.os-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;
vertical-align:middle;margin-right:2px}
.os-warn{color:var(--warn)}
.os-fehler{color:var(--danger);margin-top:2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
/* ── Kennzahl mit Verlauf ─────────────────────────────────────────
Die Linie ist Beiwerk, die Zahl ist die Aussage. Deshalb steht die
Zahl gross rechts und die Sparkline darunter in Textgroesse — nicht
umgekehrt wie in jedem Dashboard-Template. */
.os-reihen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.os-reihe{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:14px 16px;
display:flex;flex-direction:column;gap:6px;min-width:0}
.os-reihe-leer{opacity:.75}
.os-reihe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.os-reihe-label{font-size:var(--t-small);color:var(--muted);letter-spacing:.3px}
.os-reihe-wert{font:700 var(--t-h2)/1 var(--body);letter-spacing:-.01em}
.os-reihe-fuss{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;font-size:var(--t-micro)}
.os-spark{display:block;overflow:visible}
.os-trend{font-weight:600}
.os-trend-gut{color:var(--ok)}
.os-trend-schlecht{color:var(--warn)}
.os-luecke{color:var(--muted-2)}
/* ── Produkte ─────────────────────────────────────────────────────
Verkaufsprodukte bleiben im Überblick bewusst kompakt. Erst ein
geöffneter Eintrag wird zur vollständigen Bestandsansicht. */
.os-prod-gruppe{margin-top:26px}
.os-prod-gruppe:first-of-type{margin-top:18px}
.os-prod-gruppe-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 10px}
.os-prod-gruppe-kopf h2{margin:0 0 4px;font-size:var(--t-h2)}
.os-prod-gruppe-kopf p{margin:0}
.os-prod-anzahl{display:grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:var(--t-small)}
.os-prod-liste{display:flex;flex-direction:column;gap:14px}
.os-prod-liste-sale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}
.os-prod{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-card);padding:18px 20px}
.os-prod-sale{min-width:0;padding:14px;border-top:2px solid rgba(184,232,52,.62);transform:translateZ(0);
transition:transform 240ms cubic-bezier(.23,1,.32,1),border-color 240ms cubic-bezier(.23,1,.32,1),box-shadow 240ms cubic-bezier(.23,1,.32,1)}
.os-prod-sale:hover{transform:translateY(-3px);border-color:rgba(184,232,52,.34);box-shadow:0 18px 42px rgba(0,0,0,.2)}
.os-prod-open{grid-column:1/-1;transform:none}
.os-prod-open:hover{transform:none}
.os-prod-visual{position:relative;overflow:hidden;height:164px;margin:-14px -14px 14px;
border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;border-bottom:1px solid var(--line);background:#0b0d0b}
.os-prod-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 78% 24%,rgba(184,232,52,.09),transparent 24%),linear-gradient(90deg,rgba(7,9,7,.14),transparent 52%),linear-gradient(0deg,rgba(7,9,7,.4),transparent 45%)}
.os-prod-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.92) contrast(1.04);
transform:scale(1.035) translate3d(-.35%,0,0);animation:osProdDrift 11s ease-in-out infinite alternate;will-change:transform}
.os-prod-sale:nth-child(even) .os-prod-visual img{animation-delay:-5.5s;animation-direction:alternate-reverse}
.os-prod-sale:hover .os-prod-visual img{animation-play-state:paused;transform:scale(1.065) translate3d(0,-.5%,0)}
@keyframes osProdDrift{from{transform:scale(1.035) translate3d(-.35%,0,0)}to{transform:scale(1.065) translate3d(.55%,-.45%,0)}}
.os-prod-visual-label{position:absolute;left:16px;bottom:14px;z-index:1;padding:6px 10px;border:1px solid rgba(184,232,52,.26);
border-radius:999px;background:rgba(7,9,7,.78);backdrop-filter:blur(10px);color:var(--lime);font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.os-prod-locked{border-color:rgba(224,114,106,.35)}
.os-prod-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.os-prod-titel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.os-prod-titel h4{margin:0;font-size:var(--t-h3);font-weight:600}
.os-prod-hinweis{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:8px 12px;
border:1px solid var(--line);border-left:2px solid var(--warn);border-radius:var(--r-control);
background:var(--bg-2);font-size:var(--t-small);color:var(--ink)}
.os-prod-hinweis svg{flex:0 0 auto;color:var(--warn);width:15px;height:15px;margin-top:1px}
.os-prod-story{margin:10px 0 0;max-width:900px}
.os-prod-story p{margin:0 0 5px;line-height:1.5}
.os-prod-sale:not(.os-prod-open) .os-prod-story > p:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.os-prod-sale:not(.os-prod-open) .os-prod-story > p:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-prod-kompakt{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.os-prod-preis{display:flex;flex-direction:column;gap:2px;min-width:0}
.os-prod-preis strong{font-size:var(--t-body);white-space:nowrap}
.os-prod-toggle{flex:0 0 auto}
.os-prod-toggle-icon{display:inline-flex;transition:transform 220ms cubic-bezier(.23,1,.32,1);transform:rotate(-90deg)}
.os-prod-toggle-icon-up{transform:rotate(90deg)}
.os-prod-details{animation:osProdDetailsIn 260ms cubic-bezier(.23,1,.32,1) both}
@keyframes osProdDetailsIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.os-prod-pakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:14px 0 4px}
.os-prod-paket{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg-2)}
.os-prod-paket strong{font-size:var(--t-body)}
.os-prod-paket span{font-weight:600;color:var(--ink)}
.os-prod-paket small{font-size:var(--t-small)}
.os-prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:2px 22px;margin:14px 0 0}
.os-prod-grid > div{display:flex;justify-content:space-between;gap:12px;
padding:5px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.os-k{color:var(--muted);font-size:var(--t-small);flex:0 0 auto}
.os-v{font-size:var(--t-small);text-align:right;min-width:0;overflow-wrap:anywhere}
.os-prod-fuss{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.os-prod-vertrag{margin-top:14px;padding:12px 14px;border:1px solid rgba(184,232,52,.25);border-radius:12px;background:rgba(184,232,52,.05)}
.os-prod-vertrag>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.os-prod-vertrag p{margin:7px 0 0}
.os-prod-sperrsatz{flex:1 1 260px;line-height:1.45}
/* ── Reiter innerhalb einer Ansicht ───────────────────────────────
Bewusst keine zweite Navigationsebene in der Sidebar: IT ist EIN
Ort mit fuenf Sichten, nicht fuenf Menuepunkte. */
.os-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:18px 0 16px;
border-bottom:1px solid var(--line);padding-bottom:0}
.os-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);
padding:9px 14px;min-height:44px;font-size:var(--t-body);font-weight:500;
display:inline-flex;align-items:center;gap:7px;transition:color .16s var(--ease)}
.os-tab:hover{color:var(--ink)}
.os-tab-on{color:var(--ink);border-bottom-color:var(--lime)}
.os-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.os-filter-breit{margin:0 0 18px}
.os-filter-trenner{width:1px;height:20px;background:var(--line);margin:0 4px}
.os-setup .os-setup-zeile{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.os-setup .os-setup-zeile:last-of-type{border-bottom:0}
.os-setup p{margin:2px 0 0;line-height:1.5}
.os-neu{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
/* ── Bugs und Schulden ────────────────────────────────────────────
Die Schwere steht links als Kante, nicht als Farbflaeche. Eine rote
Karte schreit auch dann, wenn man gerade etwas anderes sucht. */
.os-bug{border:1px solid var(--line);border-left:2px solid var(--muted-2);
border-radius:var(--r-control);background:var(--bg-2);padding:12px 14px;margin-bottom:10px}
.os-bug-kritisch{border-left-color:var(--danger)}
.os-bug-wichtig{border-left-color:var(--warn)}
.os-bug-hinweis{border-left-color:var(--info)}
.os-bug p{margin:6px 0 0;line-height:1.5}
.os-beleg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-small);
color:var(--muted);overflow-wrap:anywhere}
.os-bug-fuss{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* ── Automationen ─────────────────────────────────────────────────
Aufklappbar statt Tabelle: die acht Detailfelder je Automation
ergaeben eine Tabelle, die man seitlich schieben muss. */
.os-auto{border:1px solid var(--line);border-radius:var(--r-control);background:var(--bg-2);
padding:12px 14px;margin-bottom:8px}
/* .os-auto-wichtig ist mit dem V5-Umbau zur toten Regel geworden:
jede .os-auto liegt jetzt in einer .auto-gruppe, und die setzt
border:0 mit hoeherer Spezifitaet. Gemessen 0px Kante an allen
Eintraegen. Die Schwere steht ohnehin im farbigen Punkt vor dem
Namen UND in der Gruppenzuordnung ("Braucht Aufmerksamkeit") —
eine dritte Markierung derselben Sache, die nicht einmal mehr
sichtbar war. */
.os-auto-kopf{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;
color:var(--ink);text-align:left;padding:0;min-height:32px;font-size:var(--t-body)}
.os-auto-name{font-weight:600;flex:1 1 auto;min-width:0}
.os-auto-status{flex:0 0 auto}
.os-auto-chevron{flex:0 0 auto;color:var(--muted);display:inline-flex}
.os-auto-zweck{margin:6px 0 0;font-size:var(--t-small);line-height:1.5}
.os-auto p{margin:4px 0 0}
.os-auto-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.os-auto-verbot{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:9px 12px;
border:1px solid rgba(224,114,106,.3);border-radius:var(--r-control);
background:var(--danger-bg);font-size:var(--t-small);line-height:1.5}
.os-auto-verbot svg{flex:0 0 auto;color:var(--danger);width:15px;height:15px;margin-top:1px}
.os-verboten{list-style:none;padding:0;margin:12px 0 0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px 20px}
.os-verboten li{display:flex;gap:8px;align-items:center;font-size:var(--t-small);color:var(--muted)}
.os-verboten svg{flex:0 0 auto;width:14px;height:14px;color:var(--danger)}
/* ── Zeitleiste ───────────────────────────────────────────────────
Ein Faden links, Zeit ganz aussen. Kein Karten-Stapel: 80 Karten
untereinander sind 80 Raender, die alle gleich laut sind. */
.os-tl-tag{margin-bottom:22px}
.os-tl-datum{font-size:var(--t-micro);font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);padding:0 0 8px;position:sticky;top:0;background:var(--bg);z-index:1}
.os-tl-item{display:flex;gap:12px;align-items:flex-start;padding:7px 0;
border-left:1px solid var(--line);margin-left:44px;padding-left:16px;position:relative}
.os-tl-zeit{position:absolute;left:-60px;top:9px;width:44px;text-align:right;
font-variant-numeric:tabular-nums}
.os-tl-punkt{position:absolute;left:-4px;top:12px;display:inline-flex}
.os-tl-text{min-width:0;flex:1 1 auto}
.os-tl-titel{font-size:var(--t-body);line-height:1.45;overflow-wrap:anywhere}
.os-tl-item .muted{line-height:1.45;overflow-wrap:anywhere}
.os-tl-kritisch .os-tl-titel{color:var(--danger)}
/* ── Wochenrueckblick ─────────────────────────────────────────────
Zahl vor Wort. Wer den Rueckblick ueberfliegt, liest Zahlen. */
.os-woche-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px 24px}
.os-woche-zeile{display:flex;align-items:baseline;gap:10px;padding:7px 0;
border-bottom:1px solid var(--line-soft)}
.os-woche-zahl{font:700 var(--t-h3)/1 var(--body);min-width:52px;font-variant-numeric:tabular-nums}
.os-woche-label{color:var(--muted);font-size:var(--t-small)}
.os-kamp .stat-row{margin:14px 0 10px}
/* ═══════════════════ COMMAND PALETTE ═══════════════════════════════
Oben statt mittig: das Auge sucht Eingaben oben, und auf dem Telefon
waere ein mittiger Dialog von der Tastatur halb verdeckt. */
.pal-backdrop{position:fixed;inset:0;background:rgba(4,7,5,.72);z-index:6000;
display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;
animation:palIn .16s var(--ease)}
.pal{width:100%;max-width:600px;background:var(--bg-elev);border:1px solid var(--line-strong);
border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;
display:flex;flex-direction:column;max-height:min(70vh,560px)}
@keyframes palIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pal-backdrop{animation:none}}
.pal-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;
border-bottom:1px solid var(--line);flex:0 0 auto}
.pal-such-icon{color:var(--muted);display:inline-flex;flex:0 0 auto}
.pal-input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:none;
color:var(--ink);font-family:var(--body);font-size:var(--t-lead);padding:6px 0}
.pal-input::placeholder{color:var(--muted-2)}
.pal-esc{background:transparent;border:1px solid var(--line);border-radius:var(--r-control);
color:var(--muted);font-size:var(--t-micro);padding:4px 8px;min-height:28px;flex:0 0 auto}
.pal-liste{overflow-y:auto;overscroll-behavior:contain;padding:6px;flex:1 1 auto}
/* v5: die Gruppe bekommt eine Haarlinie statt nur Abstand. Bei zehn
Treffern aus vier Bereichen sah die Liste vorher wie EIN langer Block
aus — man las alles, statt zum richtigen Bereich zu springen. */
.pal-gruppe{font-size:var(--t-micro);font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);padding:var(--s-3) var(--s-3) var(--s-1);margin-top:var(--s-1);
border-top:1px solid var(--line-soft)}
.pal-liste > .pal-gruppe:first-child{border-top:0;margin-top:0;padding-top:var(--s-2)}
.pal-item{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:0;
border-radius:var(--r-sm);color:var(--ink);text-align:left;padding:9px 10px;min-height:44px}
/* Die gewaehlte Zeile traegt eine lime Kante, nicht nur eine hellere
Flaeche: auf dem Telefon war der Flaechenunterschied bei Sonnenlicht
praktisch unsichtbar, und die Auswahl ist das einzige, was hier
wirklich zaehlt. */
.pal-item-on{background:var(--bg-hover);box-shadow:inset 2px 0 0 var(--lime)}
.pal-item:hover{background:var(--bg-card)}
.pal-icon{color:var(--muted);display:inline-flex;flex:0 0 auto}
.pal-item-on .pal-icon{color:var(--lime)}
.pal-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.pal-titel{font-size:var(--t-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-unter{font-size:var(--t-micro);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-enter{color:var(--lime);font-size:var(--t-small);flex:0 0 auto}
/* Die getroffene Stelle im Titel. `` bringt eine gelbe Flaeche mit
— die wird hier zurueckgesetzt: in einer dunklen Oberflaeche ist
Gewicht das ruhigere Signal als ein Leuchtmarker. */
.pal-treffer{background:none;color:var(--ink);font-weight:700}
.pal-item-on .pal-treffer{color:var(--lime)}
.pal-leer{padding:20px 12px;text-align:center}
.pal-fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:9px 14px;border-top:1px solid var(--line);font-size:var(--t-micro);flex:0 0 auto}
/* 10px war der einzige Wert unter der Skala. Ein Tastenkuerzel ist
kein Sonderfall, der eine eigene Groesse rechtfertigt. */
.pal-kbd{border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:var(--t-micro);
color:var(--muted-2);font-family:var(--body);margin-left:2px}
.btn-pal{gap:6px}
@media(max-width:860px){
.os-prod-liste-sale{grid-template-columns:1fr}
.os-prod-open{grid-column:auto}
.os-prod-grid{grid-template-columns:1fr;gap:0}
.os-prod{padding:14px 15px}
.os-prod-sale{padding:13px}
.os-prod-visual{height:156px;margin:-13px -13px 13px}
.os-tl-item{margin-left:0;padding-left:14px}
.os-tl-zeit{position:static;width:auto;text-align:left;order:-1;margin-right:2px}
.os-tl-punkt{left:-4px;top:10px}
.os-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.os-tabs::-webkit-scrollbar{display:none}
.os-tab{flex:0 0 auto}
.pal-backdrop{padding:6vh 10px 10px}
.pal{max-height:min(78vh,600px)}
}
@media(max-width:520px){
.os-reihen{grid-template-columns:1fr}
.os-woche-grid{grid-template-columns:1fr}
.os-verboten{grid-template-columns:1fr}
.os-prod-fuss .btn{flex:1 1 100%}
.os-prod-kompakt{align-items:stretch;flex-direction:column}
.os-prod-toggle{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
.os-prod-sale,.os-prod-visual img,.os-prod-toggle-icon,.os-prod-details{animation:none!important;transition:none!important;transform:none!important}
}
/* Kuenftige Fristen stehen in derselben Leiste wie Vergangenes — sonst
braeuchte man zwei Orte fuer "was ist" und "was kommt". Damit sie
sich nicht wie Geschehenes lesen, tragen sie ein Wort. */
.os-tl-kuenftig{margin-left:8px;font-weight:500;letter-spacing:0;text-transform:none;
color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
/* ── Tap-Ziele auf dem Telefon ────────────────────────────────────
Die bestehende Regel weiter oben hebt .btn und .nav-item auf 44px,
.chip aber nicht — gemessen 31px auf 320x568. Ein Chip ist kein
Dekor: er filtert Listen und schaltet Ansichten um, also ist er ein
Bedienelement wie jeder Knopf. Dasselbe gilt fuer die Kopfzeile
einer Automation, die sich aufklappen laesst. */
@media(max-width:860px){
.chip{min-height:44px;display:inline-flex;align-items:center}
.os-auto-kopf{min-height:44px}
.os-tab{min-height:44px}
.icon-btn{min-height:44px;min-width:44px}
/* Der Esc-Knopf der Palette ist auf dem Telefon der einzige sichtbare
Weg heraus — dort gibt es keine Esc-Taste. */
.pal-esc{min-height:44px;min-width:44px}
}
/* "Wochenrückblick" ist ein Wort und bei 27px 298 Pixel breit — auf
320px passt es nicht und schob die ganze Seite um 2px zur Seite.
Zwei Zeilen statt eines Querscrollbalkens. */
@media(max-width:520px){
.view-head h1{font-size:var(--t-h2);overflow-wrap:break-word;hyphens:auto}
}
/* ═══════════════ COMMAND STRIP · RADAR · SYSTEME ═══════════════════
Die Startseite antwortet von oben nach unten: was ist zu tun, was
hat es bewegt, wie stehen die Bereiche, laeuft die Technik.
Der Strip ist eine Zeile — nicht drei Kacheln, die dasselbe sagen. */
.cstrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
padding:12px 16px;margin:0 0 20px;border:1px solid var(--line);
border-radius:var(--r);background:var(--bg-2)}
.cstrip-marke{display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0}
.cstrip-marke .wortmarke{font-size:1.05rem}
.cstrip-datum{white-space:nowrap}
.cstrip-zustand{display:flex;align-items:center;gap:6px;font-size:var(--t-small);
white-space:nowrap;flex:0 0 auto}
.cstrip-sync{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1 1 240px;min-width:0}
.cstrip-schnell{display:flex;gap:6px;flex:0 0 auto}
/* Radar: eine Zeile je Bereich. Kacheln haben neun gleich grosse
Flaechen erzeugt, obwohl nur zwei davon etwas zu sagen hatten. */
.radar{display:flex;flex-direction:column}
.radar-zeile{display:grid;grid-template-columns:14px 150px 130px 1fr 72px;
align-items:center;gap:12px;width:100%;background:transparent;border:0;
border-bottom:1px solid var(--line-soft);color:var(--ink);text-align:left;
padding:11px 8px;min-height:44px;transition:background .16s var(--ease)}
.radar-zeile:hover{background:var(--bg-hover)}
.radar-zeile:last-child{border-bottom:0}
.radar-punkt{display:inline-flex}
.radar-name{font-size:var(--t-body);font-weight:500;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.radar-zahl{font-size:var(--t-body);font-variant-numeric:tabular-nums;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radar-signal{font-size:var(--t-small);color:var(--muted);min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radar-kritisch .radar-signal{color:var(--danger)}
.radar-wichtig .radar-signal{color:var(--warn)}
.radar-trend{font-size:var(--t-small);text-align:right;color:var(--muted);
font-variant-numeric:tabular-nums}
.sysliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 24px}
.sys-zeile{display:flex;align-items:center;gap:9px;padding:8px 0;
border-bottom:1px solid var(--line-soft);min-width:0}
.sys-name{font-size:var(--t-small);flex:0 0 auto;min-width:130px}
/* Vorher: white-space:nowrap + ellipsis in einer Drittelspalte. Aus
"nicht gemessen — Systembruecke ist nicht angebunden" wurde
"nicht gemessen — Syste…", neunmal untereinander. Die Ursache ist
nicht fehlendes overflow, sondern der erzwungene Einzeiler: eine
Systemzeile darf zwei Zeilen hoch sein. Mit overflow:hidden haette
man die Information nur unsichtbar gemacht statt lesbar. */
.sys-detail{flex:1 1 auto;min-width:0;text-align:right;
overflow-wrap:anywhere;line-height:1.45}
.reco-zeit{margin-left:auto;white-space:nowrap}
@media(max-width:860px){
.cstrip{gap:8px 14px;padding:11px 13px}
/* "Mittwoch, 05. August" ist 123px breit und stand mit nowrap neben
der Wortmarke — zusammen 334px auf einem 320px-Schirm. */
.cstrip-marke{flex:1 1 100%;flex-wrap:wrap;gap:2px 12px}
.cstrip-datum{white-space:normal}
.cstrip-sync{flex:1 1 100%}
/* Zahl und Trend fallen weg: auf 320px bleibt Platz fuer den Namen
und das Signal — und das Signal ist das, was etwas verlangt. */
.radar-zeile{grid-template-columns:14px 1fr auto;gap:9px;padding:9px 4px}
.radar-zahl{text-align:right;font-size:var(--t-small);color:var(--muted)}
.radar-signal{grid-column:2 / -1;white-space:normal;line-height:1.4}
.radar-trend{display:none}
.sysliste{grid-template-columns:1fr}
.sys-name{min-width:0;flex:1 1 auto}
.sys-detail{flex:0 1 auto;max-width:55%}
}
/* Befunde statt Punktzahl: ein Score von 82/100 sagt nicht, was zu tun
ist — und die Zahl aendert sich, wenn jemand die Gewichtung anfasst,
ohne dass sich die Website geaendert haette. */
.os-befunde{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.os-befunde h4{margin:0 0 8px;font-size:var(--t-small);color:var(--warn);font-weight:600}
.os-befunde ul{margin:0;padding-left:18px}
.os-befunde li{font-size:var(--t-small);line-height:1.55;margin-bottom:3px}
/* ═══════════════════ MORGENBLICK · HEBEL · SPUR ════════════════════
Keine neuen Tokens. Was hier dazukommt, ist Anordnung.
Die eine Regel dieses Blocks: die Antwort ist groesser als die
Frage. Ein Bildschirm, auf dem die Ueberschriften lauter sind als
die Aussagen, liest sich wie ein Formular. */
.mb-liste{display:flex;flex-direction:column}
.mb-zeile{display:grid;grid-template-columns:1fr auto;grid-template-areas:"frage pfeil" "antwort pfeil";
gap:2px 14px;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-soft);
color:var(--ink);text-align:left;padding:14px 8px;min-height:44px;
transition:background .16s var(--ease)}
.mb-zeile:hover{background:var(--bg-hover)}
.mb-zeile:last-child{border-bottom:0}
.mb-frage{grid-area:frage;font-size:var(--t-small);color:var(--muted)}
.mb-antwort{grid-area:antwort;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.mb-wert{font:700 var(--t-h2)/1.1 var(--body);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mb-satz{font-size:var(--t-body);line-height:1.45;min-width:0;overflow-wrap:anywhere}
.mb-zeile-leer .mb-satz{color:var(--muted)}
.mb-pfeil{grid-area:pfeil;align-self:center;color:var(--muted-2);display:inline-flex}
.mb-zeile:hover .mb-pfeil{color:var(--lime)}
.mb-fuss{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);line-height:1.5}
/* Hebel: der Betrag steht links und traegt die Zeile. Wer die Liste
ueberfliegt, liest Betraege — genau das ist der Zweck. */
.hebel-liste{display:flex;flex-direction:column}
.hebel-zeile{display:grid;grid-template-columns:118px 1fr auto;gap:16px;align-items:center;
padding:13px 0;border-bottom:1px solid var(--line-soft);border-left:2px solid transparent;
padding-left:12px}
.hebel-zeile:last-child{border-bottom:0}
.hebel-kritisch{border-left-color:var(--danger)}
.hebel-wichtig{border-left-color:var(--warn)}
.hebel-hinweis{border-left-color:var(--info)}
.hebel-wert{display:flex;flex-direction:column;gap:1px;min-width:0}
.hebel-euro{font:700 var(--t-h3)/1.1 var(--body);font-variant-numeric:tabular-nums}
.hebel-rate{font-variant-numeric:tabular-nums}
.hebel-text{min-width:0}
.hebel-kopf{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:2px}
.hebel-sev{font-size:var(--t-micro);font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.hebel-titel{font-size:var(--t-body);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
/* Bereiche: eine Zeile je Bereich, aufklappbar. Kein Raster — neun
gleich grosse Kacheln geben neun gleich wichtigen Dingen Platz,
und meistens sind nur zwei wichtig. */
.ber-liste{display:flex;flex-direction:column}
.ber-block{border-bottom:1px solid var(--line-soft)}
.ber-block:last-child{border-bottom:0}
.ber-zeile{display:grid;grid-template-columns:14px 150px 96px 1fr 64px 18px;gap:12px;align-items:center;
width:100%;background:transparent;border:0;color:var(--ink);text-align:left;padding:12px 6px;
min-height:44px;transition:background .16s var(--ease)}
.ber-zeile:hover{background:var(--bg-hover)}
.ber-name{font-size:var(--t-body);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ber-zustand{font-size:var(--t-small)}
.ber-grund{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ber-trend{text-align:right;font-variant-numeric:tabular-nums}
.ber-chevron{color:var(--muted);display:inline-flex}
.ber-offen .ber-chevron{transform:rotate(180deg)}
.ber-detail{padding:4px 6px 18px 40px}
.ber-detail p{margin:0 0 8px;line-height:1.55}
.ber-risiko{padding-left:10px;border-left:2px solid var(--danger);font-size:var(--t-small)}
.ber-chance{padding-left:10px;border-left:2px solid var(--ok);font-size:var(--t-small)}
.ber-handlung{margin-top:12px;padding:12px 14px;border:1px solid var(--line);
border-radius:var(--r-control);background:var(--bg-2)}
.ber-handlung-titel{font-size:var(--t-body);font-weight:600;margin-bottom:4px}
/* Spur: eine senkrechte Kette. Die Linie ist das Argument — sie zeigt,
dass die Stationen zusammenhaengen und nicht nur untereinander
stehen. */
.spur-wahl{margin-bottom:20px}
.spur-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-height:132px;overflow-y:auto}
.spur-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;
padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px}
.spur-kopf h2{margin:0;font-size:var(--t-h2)}
.spur-zahlen{display:flex;gap:26px}
.spur-zahlen > div{display:flex;flex-direction:column}
.spur-zahl{font:700 var(--t-h3)/1.1 var(--body);font-variant-numeric:tabular-nums}
.spur-luecke{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;margin:0 0 20px;
border:1px solid var(--line);border-left:2px solid var(--warn);border-radius:var(--r-control);
background:var(--bg-2);font-size:var(--t-small);line-height:1.5}
.spur-luecke svg{flex:0 0 auto;color:var(--warn);width:15px;height:15px;margin-top:1px}
.spur-kette{display:flex;flex-direction:column}
.spur-station{display:grid;grid-template-columns:20px 1fr;gap:14px}
.spur-marke{display:flex;flex-direction:column;align-items:center;padding-top:6px}
.spur-punkt{width:9px;height:9px;border-radius:50%;background:var(--muted-2);flex:0 0 auto}
.spur-offen .spur-punkt{background:var(--warn)}
.spur-linie{flex:1 1 auto;width:1px;background:var(--line);margin:4px 0 0}
.spur-inhalt{padding-bottom:20px;min-width:0}
.spur-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.spur-beleg{color:var(--muted-2);font-size:var(--t-micro)}
.spur-titel{font-size:var(--t-body);font-weight:500;line-height:1.4;margin:1px 0 2px;overflow-wrap:anywhere}
@media(max-width:860px){
.mb-zeile{grid-template-columns:1fr;grid-template-areas:"frage" "antwort";padding:13px 4px}
.mb-pfeil{display:none}
.mb-antwort{flex-direction:column;gap:3px;align-items:flex-start}
.hebel-zeile{grid-template-columns:1fr;gap:8px;padding-left:10px}
.hebel-wert{flex-direction:row;align-items:baseline;gap:10px}
.hebel-zeile .btn{justify-self:stretch}
/* Zustandswort und Trend fallen weg: auf 320px bleibt Platz fuer den
Namen und den Grund — und der Grund ist das, was etwas sagt. */
.ber-zeile{grid-template-columns:14px 1fr 18px;gap:10px}
.ber-zustand{display:none}
.ber-trend{display:none}
.ber-grund{grid-column:2 / -1;white-space:normal}
.ber-detail{padding-left:10px}
.spur-kopf{flex-direction:column;align-items:flex-start;gap:12px}
.spur-zahlen{gap:18px;flex-wrap:wrap}
}
/* ═══════════════════ KONTEXT IM ARBEITSABLAUF ══════════════════════
Der Block sitzt IN einer Detailansicht, nicht daneben. Er darf sie
deshalb nicht dominieren: eine Kante links, kein eigener Rahmen,
keine Karte in der Karte. */
.kx{border-left:2px solid var(--line-strong);padding-left:14px;margin:0 0 18px}
.kx-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;width:100%;
background:transparent;border:0;color:var(--ink);text-align:left;padding:6px 0;min-height:44px}
.kx-kopf h4{margin:0;font-size:var(--t-body);font-weight:600}
.kx-herkunft{font-size:var(--t-small);color:var(--muted);min-width:0;overflow-wrap:anywhere}
.kx-badge{font-size:var(--t-micro);font-weight:600;color:var(--warn);
border:1px solid rgba(230,200,74,.35);border-radius:var(--r-control);padding:1px 7px}
.kx-chevron{margin-left:auto;color:var(--muted);display:inline-flex}
.kx-koerper{padding:6px 0 4px}
.kx-leer{margin:4px 0 0;font-size:var(--t-small);color:var(--muted);line-height:1.5}
.kx-zahlen{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 16px}
.kx-zahl{display:flex;flex-direction:column}
.kx-zahl-wert{font:700 var(--t-h3)/1.1 var(--body);font-variant-numeric:tabular-nums}
.kx-zahl-label{font-size:var(--t-micro);color:var(--muted)}
/* Die Lesespur. Primaere Stationen tragen die Geschichte, sekundaere
belegen sie — deshalb unterschiedliche Groesse, nicht nur Farbe. */
.kx-spur{display:flex;flex-direction:column;margin:0 0 16px}
.kx-station{display:grid;grid-template-columns:16px 1fr;gap:12px}
.kx-marke{display:flex;flex-direction:column;align-items:center;padding-top:5px}
.kx-punkt{width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:0 0 auto}
.kx-primaer .kx-punkt{width:9px;height:9px;background:var(--lime-soft)}
.kx-offen .kx-punkt{background:var(--warn)}
.kx-linie{flex:1 1 auto;width:1px;background:var(--line);margin:4px 0 0}
.kx-inhalt{padding-bottom:14px;min-width:0}
.kx-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
font-size:var(--t-micro);color:var(--muted)}
.kx-beleg{color:var(--muted-2)}
.kx-titel{font-size:var(--t-small);line-height:1.4;margin:1px 0;overflow-wrap:anywhere}
.kx-primaer .kx-titel{font-size:var(--t-body);font-weight:500}
.kx-detail{font-size:var(--t-micro);color:var(--muted);line-height:1.4}
/* "öffnen" ist Navigation, keine Handlung — Lime gehoert der Handlung.
Bei vier Stationen standen vier lime Links untereinander und zogen
den Blick von den Titeln weg, die die Geschichte erzaehlen. */
.kx-oeffnen{background:transparent;border:0;color:var(--laut-2);padding:3px 0 0;
font-size:var(--t-micro);font-family:inherit;text-decoration:underline;
text-underline-offset:2px;text-decoration-color:var(--line-strong)}
.kx-oeffnen:hover{color:var(--lime);text-decoration-color:currentColor}
/* Der Knopf gehoert unter die Spur, nicht in ihre Mitte: als Inline-Element
in einem Flex-Container landete er zentriert und sah verloren aus. */
.kx-mehr{margin-left:28px;align-self:flex-start}
.kx-faeden h5{margin:0 0 6px;font-size:var(--t-micro);font-weight:700;letter-spacing:.8px;
text-transform:uppercase;color:var(--muted-2)}
.kx-faden{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;
background:transparent;border:0;border-bottom:1px solid var(--line-soft);color:var(--ink);
text-align:left;padding:9px 2px;min-height:44px}
.kx-faden:hover{background:var(--bg-hover)}
.kx-faden-titel{font-size:var(--t-small);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.kx-faden-euro{font-size:var(--t-small);font-weight:600;font-variant-numeric:tabular-nums}
.kx-faden-beleg{font-size:var(--t-micro);color:var(--muted-2)}
.kx-ruhig{margin:0;font-size:var(--t-small);color:var(--muted)}
.kx-schritt{margin-top:14px;padding:12px 14px;border:1px solid var(--line);
border-radius:var(--r-control);background:var(--bg-2)}
.kx-schritt-label{font-size:var(--t-micro);font-weight:700;letter-spacing:.8px;
text-transform:uppercase;color:var(--muted-2)}
.kx-schritt-titel{font-size:var(--t-body);font-weight:600;margin:3px 0 4px;line-height:1.4}
.kx-schritt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-micro);
color:var(--muted);margin-bottom:10px}
.kx-luecken{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft)}
.kx-luecke{font-size:var(--t-micro);color:var(--muted);line-height:1.5;margin-bottom:3px}
@media(max-width:860px){
.kx{padding-left:11px}
.kx-zahlen{gap:6px 18px}
.kx-mehr{margin-left:0}
.kx-faden{padding:10px 2px}
/* Der "oeffnen"-Link war 17px hoch — als Textlink gedacht, auf Touch
aber ein Bedienelement wie jedes andere. Gemessen auf 320x568. */
.kx-oeffnen{min-height:44px;display:inline-flex;align-items:center;padding:0 2px 0 0}
}
/* Die Rechnungsnummer ist der Einstieg in den Zusammenhang — sie ist
ohnehin das, worauf man zeigt, wenn man fragt "wo kam die her".
Deshalb ein Knopf, der wie Text aussieht, aber greifbar ist. */
.inv-nr{background:transparent;border:0;color:inherit;font:inherit;padding:6px 0;
min-height:44px;text-align:left;border-bottom:1px dotted var(--line-strong)}
.inv-nr:hover{color:var(--lime)}
/* Wirkungskette einer Kampagne: waagerecht, weil sie eine Richtung hat.
Sechs Stufen untereinander saehen aus wie eine Liste, nicht wie ein
Verlauf. Kein Pfeil-Ornament — der Abstand traegt die Leserichtung. */
.wk{margin:14px 0 6px}
.wk-stufen{display:flex;flex-wrap:wrap;gap:2px}
.wk-stufe{flex:1 1 108px;min-width:0;padding:10px 12px;border:1px solid var(--line);
border-radius:var(--r-control);background:var(--bg-2);display:flex;flex-direction:column;gap:1px}
.wk-stufe + .wk-stufe{border-left-color:var(--line-strong)}
.wk-unmessbar{opacity:.7}
.wk-wert{font:700 var(--t-h3)/1.1 var(--body);font-variant-numeric:tabular-nums;
overflow-wrap:anywhere}
.wk-unmessbar .wk-wert{font-size:var(--t-small);font-weight:400}
.wk-label{font-size:var(--t-small);color:var(--muted)}
.wk-beleg{font-size:var(--t-micro);color:var(--muted-2);overflow-wrap:anywhere}
.wk-hinweis{margin:10px 0 0;line-height:1.5}
@media(max-width:520px){ .wk-stufe{flex:1 1 calc(50% - 2px)} }
/* ═══════════════════ KONTEXTLEISTE ═══════════════════
Eine Zeile über dem Inhalt, in jeder Detailansicht dieselbe. Kein
Breadcrumb, keine zweite Navigation: sie sagt, WAS das hier ist,
nicht wo man geklickt hat.
Am Desktop genau eine Zeile. Sie darf nicht waagerecht scrollen —
eine Leiste, die man schieben muss, liest niemand. Deshalb kürzt
der Name mit Ellipse und die schwächsten Teile fallen zuerst weg. */
/* v5: die lime Flankenkante ist weg. Sie markierte nichts — kein
Zustand, keine Handlung, keine Auswahl. Damit war sie genau das,
was das Farbsystem dieser Oberflaeche verbietet: Lime als Dekor.
Der Kasten traegt bereits Rahmen, Flaeche und Radius; eine vierte
Auszeichnung obendrauf sagt nichts hinzu.
Was hier wirklich Aufmerksamkeit braucht, faerbt `.kxl-offen-an`
in --warn: die Zahl der offenen Faeden. Das ist die Stelle, an der
Farbe eine Bedeutung hat. */
.kxl{display:flex;align-items:center;gap:0;margin:0 0 14px;padding:9px 14px;
border:1px solid var(--line);
border-radius:var(--r-control);background:var(--bg-2);min-width:0}
.kxl-zeile{display:flex;align-items:baseline;gap:6px 16px;width:100%;min-width:0;
font-size:var(--t-small);line-height:1.45}
.kxl-name{font-weight:600;font-size:var(--t-body);color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:15em;flex:0 1 auto}
.kxl-herkunft,.kxl-schritt{color:var(--muted);min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.kxl-offen{color:var(--muted);white-space:nowrap;flex:0 0 auto}
/* Zahl UND Wort: eine Farbe allein sagt nicht, was sie bedeutet, und
fällt bei Farbfehlsichtigkeit ganz aus. */
.kxl-offen-an{color:var(--warn);font-weight:600}
.kxl-geld{white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.kxl-btn{margin-left:auto;flex:0 0 auto;background:transparent;border:1px solid var(--line);
border-radius:var(--r-control);color:var(--ink);font:inherit;font-size:var(--t-small);
padding:0 12px;min-height:36px;cursor:pointer}
.kxl-btn:hover{border-color:var(--line-lime);color:var(--lime)}
/* Der Umschalter existiert nur mobil — am Desktop passt alles in die
Zeile, und ein Knopf ohne Wirkung wäre eine Lüge. */
.kxl-mehr{display:none}
@media(max-width:860px){
/* Zwei kompakte Ebenen statt einer Zeile: Name und Zahl oben, der
Rest erst auf Tippen. Reihenfolge über order, damit das Markup
eine Leserichtung behält. */
.kxl{padding:8px 12px;align-items:flex-start}
.kxl-zeile{flex-wrap:wrap;gap:2px 12px;align-items:center}
/* Schmale Basis, damit Name + Betrag + Chevron IMMER in die erste
Zeile passen. Mit flex:1 1 auto nahm „Robens Sicherheitstechnik"
die ganze Breite, der Chevron rutschte allein auf Zeile zwei und
riss ein 44 px hohes Loch in die Leiste — im Bild sofort sichtbar,
in der Overflow-Messung unsichtbar. */
.kxl-name{flex:1 1 6em;min-width:0;max-width:100%;order:1}
.kxl-geld{order:2}
.kxl-mehr{display:inline-flex;align-items:center;justify-content:center;order:3;
background:transparent;border:0;color:var(--muted);min-width:44px;min-height:44px;
margin-left:auto;cursor:pointer}
.kxl-mehr[aria-expanded="true"]{transform:rotate(180deg)}
.kxl-offen{order:4;flex:1 1 100%}
.kxl-herkunft,.kxl-schritt{display:none;order:5;flex:1 1 100%;white-space:normal}
.kxl-btn{display:none;order:6;margin-left:0;min-height:44px}
.kxl-auf .kxl-herkunft,.kxl-auf .kxl-schritt{display:block}
.kxl-auf .kxl-btn{display:inline-flex;align-items:center}
}
/* Schnellaktionen — höchstens drei, alle reversibel. */
.kx-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.kx-aktion{min-height:36px}
.kx-aktion-hinweis{flex:1 1 100%;margin:0}
@media(max-width:860px){
/* Volle Breite und links ausgerichtet: gestreckte Knöpfe mit
zentrierter Beschriftung sahen aus, als wären sie zufällig
verteilt. Eine Liste liest sich am Daumen besser als ein Raster. */
.kx-aktion{min-height:44px;flex:1 1 100%;justify-content:flex-start}
}
/* ═══════════════════ TAGESPLAN ═══════════════════
Höchstens fünf Punkte, jeder an einer Entität. Kein Karten-Raster:
fünf Karten nebeneinander sind fünf gleich laute Ränder, und die
Reihenfolge — das eigentliche Ergebnis — verschwindet. Eine Liste
mit feinen Trennlinien behält sie. */
.tp-liste{display:flex;flex-direction:column}
.tp-punkt{padding:14px 0;border-top:1px solid var(--line-soft)}
.tp-punkt:first-child{border-top:0;padding-top:4px}
.tp-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tp-euro{font:700 var(--t-h3)/1.1 var(--body);font-variant-numeric:tabular-nums;
color:var(--ink);flex:0 0 auto}
.tp-sev{font-size:var(--t-micro);font-weight:700;letter-spacing:.6px;
text-transform:uppercase;flex:0 0 auto}
.tp-titel{font-size:var(--t-body);font-weight:600;line-height:1.4;min-width:0;
overflow-wrap:anywhere}
.tp-entitaet{display:flex;flex-wrap:wrap;gap:2px 12px;margin:5px 0 0;min-width:0}
.tp-name{font-size:var(--t-small);color:var(--ink)}
.tp-weg{overflow-wrap:anywhere}
.tp-schritt{margin:5px 0 0;line-height:1.5}
.tp-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* Nur die kritischen Punkte tragen eine Kante — trüge jeder eine,
trüge sie keine Bedeutung mehr. */
.tp-kritisch{border-left:2px solid var(--danger);padding-left:12px;margin-left:-14px}
@media(max-width:860px){ .tp-knoepfe .btn{min-height:44px;flex:1 1 auto} }
/* ═══════════════════ MARKETING-ZENTRALE ═══════════════════ */
.mk-wirkt{display:flex;flex-direction:column}
.mk-aussage{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
background:transparent;border:0;border-top:1px solid var(--line-soft);color:inherit;
font:inherit;padding:13px 0;cursor:pointer;min-width:0}
.mk-aussage:first-child{border-top:0}
.mk-aussage:hover{color:var(--lime)}
.mk-wert{font:700 var(--t-h2)/1 var(--body);font-variant-numeric:tabular-nums;
flex:0 0 auto;min-width:1.6em;color:var(--ink)}
.mk-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.mk-satz{font-size:var(--t-body);line-height:1.45;overflow-wrap:anywhere}
.mk-meta{display:flex;flex-wrap:wrap;gap:2px 12px}
.mk-beleg{color:var(--muted-2)}
.mk-pfeil{flex:0 0 auto;color:var(--muted);display:inline-flex;align-self:center}
.mk-kampagnen{display:flex;flex-direction:column}
.mk-kampagne{display:flex;align-items:baseline;gap:6px 16px;width:100%;text-align:left;
background:transparent;border:0;border-top:1px solid var(--line-soft);color:inherit;
font:inherit;padding:12px 0;min-height:44px;cursor:pointer;min-width:0;flex-wrap:wrap}
.mk-kampagne:first-child{border-top:0}
.mk-kampagne:hover,.mk-offen{color:var(--lime)}
.mk-k-titel{font-size:var(--t-body);font-weight:600;flex:1 1 12em;min-width:0;
overflow-wrap:anywhere}
.mk-k-zeit{flex:0 1 auto;min-width:0}
.mk-k-zahl{font-variant-numeric:tabular-nums;font-weight:600;flex:0 0 auto}
.mk-k-status{font-size:var(--t-micro);color:var(--muted-2);flex:0 0 auto;
text-transform:uppercase;letter-spacing:.6px}
.mk-aktiv .mk-k-status{color:var(--ok)}
.mk-detail h4{margin:18px 0 8px;font-size:var(--t-body);font-weight:600}
.mk-vorgaenge{margin-top:4px}
.mk-vorgang{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
background:transparent;border:0;border-top:1px solid var(--line-soft);color:inherit;
font:inherit;padding:11px 0;min-height:44px;cursor:pointer;min-width:0;flex-wrap:wrap}
.mk-vorgang:hover{color:var(--lime)}
.mk-v-name{font-weight:600;flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.mk-v-zahlen{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mk-lernen ul{margin:0;padding-left:18px}
.mk-lernen li{font-size:var(--t-small);line-height:1.6;margin-bottom:3px}
.mk-lernen p{margin:10px 0 0}
.mk-s-titel{font-size:var(--t-h3);font-weight:600;line-height:1.3;margin-bottom:4px}
.mk-s-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px}
@media(max-width:860px){
.mk-wert{font-size:var(--t-h3)}
.mk-s-fuss .btn{min-height:44px}
}
/* Empfehlung im Lead-Detail. Eine Zeile, keine eigene Karte: sie ist
eine Angabe wie Wiedervorlage oder nächste Aktion, kein Bereich. */
.lead-empfehlung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
margin:0 0 14px;padding:10px 14px;border:1px solid var(--line-soft);
border-radius:var(--r-control);background:var(--bg-2)}
.lead-empfehlung .field-label{flex:0 0 auto;margin:0}
.lead-empfehlung .inp-sm{flex:1 1 12em;min-width:0}
@media(max-width:860px){
.lead-empfehlung{gap:6px}
.lead-empfehlung .inp-sm{flex:1 1 100%;min-height:44px}
}
/* Auswahlfelder im Projektformular. Ohne min-width:0 zwingt der
längste Projekttitel im