/* ============ Schriftart ============
Avenir Next LT Pro war lizenzpflichtig und nie wirklich aktiv (dieser
Block blieb immer auskommentiert, die Fallback-Kette griff). Rafael,
2026-10-14: "alles in Simplex Web optisch an den neuen Style
anpassen" (Homepage-Styleguide, style.css/styleguide.html) - der setzt
auf Poppins (300/600/800) + Instrument Serif Italic als Akzent, beide
frei über Google Fonts verfügbar (siehe in index.html) statt
selbst gehostete woff2-Dateien, die dem Styleguide nicht beilagen. */
:root{
--font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-accent:"Instrument Serif",Georgia,serif;
/* Markenfarben (Homepage-Styleguide Okt. 2026): Navy var(--brand-dark) trägt
die Flächen, Hellblau var(--brand) ist reiner Akzent (nicht flächig
einsetzen), Weiß kontrastiert - beide Werte decken sich 1:1 mit --navy/
--blue im Styleguide, keine Änderung nötig. Neu dazugekommen: Cyan/Mint
als weitere Akzentfarben (noch ungenutzt, für künftige Komponenten
reserviert) sowie nachgeschärfte Erfolgs-/Fehlerfarben und --ink als
Wert für --muted (Sekundärtext etwas wärmer/dunkler als vorher). */
--brand:#94C7F9; --brand-dark:#17345F; --brand-soft:#EAF3FE;
--cyan:#4DB3DC; --cyan-strong:#2FA8DC; --mint:#C9EEE0; --mint-deep:#B4E6DD;
--card:#F7F9FC; --text:var(--brand-dark); --muted:#4A6285;
/* --border/--divider/--grid-line: vorher kräftiger hellblau (Sept.-
Styleguide), jetzt auf die neutralere Graustufen-Linie der Live-
Seite (--line-on-light rgba(23,52,95,.14), als Flat-Hex-Äquivalent
über Weiß berechnet statt rgba, damit die Linie über JEDEM
Kartenhintergrund gleich aussieht statt je nach BG durchzuschimmern). */
--border:#DEE3ED;
--ok:#3A9B72; --warn:#CC8F1A; --danger:#B14A41; --newin:#C2456F;
/* --bg-bot bewusst von --surface-soft entkoppelt (eigener Wert statt
Alias) - --surface-soft wird an 17 anderen Stellen für kleine
Flächen (Chart-Raster, Zonen-Leisten) wiederverwendet, die sollen
unverändert bleiben. Rafael zeigte die Live-Seite im Vergleich:
deren Flächen-Verlauf wandert sichtbar Richtung Mint/Cyan, hier
bisher komplett blau - --bg-bot jetzt ein Hauch Mint statt reinem
Hellblau, bringt die zweite Markenfarbe in den Seitenhintergrund. */
--bg-top:#EAF3FC; --bg-bot:#EAF7F1;
/* Live-Seiten-Tokens (assets/design-tokens-simplexfm-live.css, Stand
2026-10-14): --shadow-card und --gradient-navy 1:1 übernommen -
weicherer, navy-getönter Kartenschatten statt der alten, stärker
gestreuten Variante; Button-Verlauf jetzt navy->cyan (90deg) statt
einfarbig dunkelblau. Dunkelmodus-Schatten bleibt neutral-schwarz,
dafür liefert der Live-Export keine eigene Variante. */
--shadow:0 2px 16px 0 rgba(23,52,95,.1);
--grad-btn:#17345F;
/* --rail bewusst ein fester Literal-Wert, NICHT var(--brand-dark) - die
Leiste soll in allen drei Theme-Zuständen gleich dunkel bleiben, aber
--brand-dark selbst wird im Dunkelmodus heller (siehe unten), damit
Navy-Text auf dunklen Karten lesbar bleibt. Eine Referenz hier würde
die Leiste im Dunkelmodus unbeabsichtigt aufhellen. */
--rail:#17345F; --rail-2:#2E4C77; --rail-txt:#9EC3E3; --rail-line:rgba(255,255,255,.09);
--rail-w:250px; --rail-w-min:74px;
/* Zusätzliche, "leise" Flächentöne (Trenner/Hover/Kacheln) - vorher als
Literal-Hex im ganzen Stylesheet verstreut, jetzt als Token, damit der
Dunkelmodus (siehe unten) sie an einer Stelle umdefinieren kann. */
--divider:#F1F3F9; --grid-line:#F1F3F9;
--tint:#F1F8FD; --tint-2:#F6FBFE; --surface-soft:#F7FBFE;
--chip-bg:#EAF2F8; --chip-border:#CDE8FA; --thumb-bg:#F4F9FD;
--ok-soft:#E6F6EF; --ok-soft-border:#B9E6CE;
--warn-soft:#FFF3DE; --warn-soft-border:#F0E2BE; --warn-soft-text:#8A5A00;
--danger-soft:#FDECEA; --danger-soft-border:#F3C9BF; --danger-soft-text:#B5341A;
/* ---------------------------------------------------------------------
LIVE-SEITEN-TOKENS (assets/design-tokens-simplexfm-live.css, Stand
2026-10-14), Rafael 2026-10-14: "mach mal alles". Hier additiv als
eigene Tokens ergänzt statt die bestehenden Werte oben zu ersetzen -
Radien/Glas/Korall-Glow/Verläufe/Bewegung sind größere stilistische
Eingriffe, die ohne Bildschirm-Vorschau (Sandbox kann nicht
screenshotten) nicht blind flächendeckend über alle ~250 Komponenten-
Regeln gezogen werden sollten. Stattdessen gezielt dort eingesetzt,
wo es eindeutig passt (Glas: schwebende Modals/Menüs; Korall-Glow:
Primär-Button-Hover; Easing: bereits vorhandene Hover-Lift-Karten) -
siehe die jeweiligen Komponenten-Regeln weiter unten. */
/* Einheitliche Eckenradien (Rafael, 2026-10-18: "einheitliche Eckenradien, sonst ist
übel"): drei Stufen + Pille/Kreis. sm = kleine Chips/Icons/Badges, md = Buttons,
Eingaben, Kacheln, Listenzeilen, lg = Karten/Panels/Dialoge/Sidebar. */
--r-sm:8px; --r-md:12px; --r-lg:20px;
--radius-xs:1px; --radius-sm:2px; --radius-md:10px; --radius-lg:12px;
--radius-xl:16px; --radius-2xl:20px; --radius-3xl:26px; --radius-pill:999px;
--glass-white-55:rgba(255,255,255,.55); --glass-white-72:rgba(255,255,255,.72);
/* Name "-90" aus den Live-Seiten-Tokens übernommen, Wert aber auf
Rafaels Wunsch ("alles noch etwas transparenter, soll der
Website matchen", 2026-10-15) von .90 auf .80 abgesenkt. */
--glass-white-90:rgba(255,255,255,.80);
/* --card-glass: eigenes, theme-fähiges Token (im Dunkelmodus unten
überschrieben) statt --glass-white-90 direkt zu verwenden - sonst
wären die Karten im Dunkelmodus helles Weiß-Glas auf dunklem BG. */
/* Website-Glas (Rafael, 2026-10-18: "Kacheln leicht transparent glasig" wie die
Hero-Karten der Website): deutlich durchsichtiger als vorher (.80),
heller Rand statt grauer Linie, weicher Navy-Schatten + Lichtkante oben. */
--card-glass:rgba(246,249,252,.7);
--card-edge:rgba(23,52,95,.08);
--card-shadow:0 2px 4px rgba(23,52,95,.08),0 18px 40px -14px rgba(23,52,95,.36),inset 0 1px 0 rgba(255,255,255,.85);
--overlay-navy-18:rgba(23,52,95,.18); --overlay-navy-25:rgba(23,52,95,.25);
--shadow-card-raised:0 1px 2px 0 rgba(23,52,95,.06),0 18px 44px -14px rgba(23,52,95,.28);
--shadow-float:0 10px 30px -10px rgba(23,52,95,.5);
--glow-coral-outer:0 40px 80px 0 rgba(217,119,87,.24),0 4px 14px 0 rgba(217,119,87,.24);
--gradient-brand:linear-gradient(115deg,#2FA8DC 0%,#5CC3E6 45%,#72CFAE 100%);
--gradient-navy:var(--grad-btn);
--ease-signature:cubic-bezier(0.16,1,0.3,1);
}
/* ============ Dunkelmodus ============
Drei Zustände (siehe js/core/theme.js): "System" folgt prefers-color-scheme
und setzt KEIN data-theme-Attribut -> nur die Media-Query greift. Eine
bewusste Wahl (Hell/Dunkel im Umschalter) setzt data-theme="light"/"dark"
auf und gewinnt in beide Richtungen. Rail bleibt in beiden Themes
bewusst gleich dunkel (siehe .rail weiter unten) - kein eigenes Token nötig. */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--brand:#94C7F9; --brand-dark:#6FA3D8; --brand-soft:#243B5E;
--card:#1B2B44; --text:#DCE6F0; --muted:#98AEC4; --border:#2F4766;
--ok:#34C98B; --warn:#F0B33D; --danger:#F0704E; --newin:#F0568E;
--bg-top:#142238; --bg-bot:#182940;
--shadow:0 12px 32px rgba(5,12,24,.32);
--card-glass:rgba(30,46,72,.78); --card-edge:var(--border); --card-shadow:var(--shadow);
--divider:#2A405E; --grid-line:#25395A;
--tint:#223654; --tint-2:#263C5C; --surface-soft:#1F3250;
--chip-bg:#22375A; --chip-border:#35537B; --thumb-bg:#1F3250;
--ok-soft:rgba(52,201,139,.14); --ok-soft-border:rgba(52,201,139,.38);
--warn-soft:rgba(240,179,61,.14); --warn-soft-border:rgba(240,179,61,.38); --warn-soft-text:#F0B33D;
--danger-soft:rgba(240,112,78,.14); --danger-soft-border:rgba(240,112,78,.38); --danger-soft-text:#F0704E;
}
}
:root[data-theme="dark"]{
--brand:#94C7F9; --brand-dark:#6FA3D8; --brand-soft:#243B5E;
--card:#1B2B44; --text:#DCE6F0; --muted:#98AEC4; --border:#2F4766;
--ok:#34C98B; --warn:#F0B33D; --danger:#F0704E; --newin:#F0568E;
--bg-top:#142238; --bg-bot:#182940;
--shadow:0 12px 32px rgba(5,12,24,.32);
--card-glass:rgba(30,46,72,.78); --card-edge:var(--border); --card-shadow:var(--shadow);
--divider:#2A405E; --grid-line:#25395A;
--tint:#223654; --tint-2:#263C5C; --surface-soft:#1F3250;
--chip-bg:#22375A; --chip-border:#35537B; --thumb-bg:#1F3250;
--ok-soft:rgba(52,201,139,.14); --ok-soft-border:rgba(52,201,139,.38);
--warn-soft:rgba(240,179,61,.14); --warn-soft-border:rgba(240,179,61,.38); --warn-soft-text:#F0B33D;
--danger-soft:rgba(240,112,78,.14); --danger-soft-border:rgba(240,112,78,.38); --danger-soft-text:#F0704E;
}
*{box-sizing:border-box}
html,body{height:100%}
/* font-weight bewusst NICHT auf 300 (wie auf der Homepage) - das Dashboard
ist ein dichtes Arbeitswerkzeug mit viel Kleinschrift (Tabellen, Labels),
kein luftiger Marketing-Text; Poppins Regular (400, Browser-Default)
bleibt hier lesbarer. Die Markentypo selbst (Poppins statt System-Font)
zieht trotzdem überall durch - fast nichts im Stylesheet setzt
font-weight:300 explizit (siehe Rafael, 2026-10-14: "optisch an den
neuen Style anpassen"). */
/* Rafael, 2026-10-15: echtes Hintergrundbild von der Live-Seite in die
assets gelegt (assets/Background_Landingpage.jpeg) - der weiche
Verlauf (Hellblau oben-links -> Mint unten-rechts), den ich in
Phase 5 nur aus dem Screenshot geschätzt hatte, ist damit jetzt
pixelgenau statt angenähert. background-color bleibt als
Fallback/Ladezustand bestehen. Nur im Hellmodus - im Dunkelmodus
(zwei Overrides direkt im Anschluss) bleibt der bisherige dunkle
Verlauf, das Bild ist dafür zu hell. */
body{margin:0;font-family:var(--font);
background-image:linear-gradient(115deg,rgba(226,234,243,.62) 0%,rgba(222,233,240,.55) 55%,rgba(218,236,232,.5) 100%),url('assets/Background_Landingpage.jpeg');
background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
background-color:var(--bg-bot);color:var(--text);height:100vh;overflow:hidden}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) body{background-image:none;background:linear-gradient(160deg,var(--bg-top) 0%,var(--bg-bot) 100%)}
}
:root[data-theme="dark"] body{background-image:none;background:linear-gradient(160deg,var(--bg-top) 0%,var(--bg-bot) 100%)}
/* ============ Dämmerung (dritter Modus) ============
Rafael, 2026-10-18: "dunkler Hintergrund und helle Kacheln" - Seite/Rail/Titel
dunkel (gedämpftes Navy, nicht das harte Schwarzblau), alle Karten, Dialoge
und die Ticketliste dagegen in den hellen, abgetönten Karten-Farben. Dafür
bekommen die Karten-Klassen die HELLEN Tokens lokal zurück (Custom Properties
erben nach innen), die Seite selbst nutzt die dunklen. */
:root[data-theme="dusk"]{
--brand:#94C7F9; --brand-dark:#6FA3D8; --brand-soft:#243B5E;
--card:#1B2B44; --text:#DCE6F0; --muted:#98AEC4; --border:#2F4766;
--bg-top:#142238; --bg-bot:#182940;
--shadow:0 12px 32px rgba(5,12,24,.32);
--divider:#2A405E; --grid-line:#25395A;
--tint:#223654; --tint-2:#263C5C; --surface-soft:#1F3250;
--chip-bg:#22375A; --chip-border:#35537B; --thumb-bg:#1F3250;
--card-glass:rgba(244,248,252,.93); --glass-white-90:rgba(244,248,252,.95);
--card-edge:rgba(255,255,255,.55); --card-shadow:0 14px 34px -12px rgba(3,9,20,.55),inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme="dusk"] body{background-image:none;background:linear-gradient(160deg,var(--bg-top) 0%,var(--bg-bot) 100%)}
:root[data-theme="dusk"] :is(.card,.kpi,.qcard,.ph-card,.pane,.hw-form,.hw-side,.kunde-card,.modal,.usermenu,.st-panel,#tkTable tbody td,#tkTable .tblwrap th){
--brand-dark:#17345F; --brand-soft:#EAF3FE;
--card:#F7F9FC; --text:#17345F; --muted:#4A6285; --border:#DEE3ED;
--divider:#F1F3F9; --grid-line:#F1F3F9;
--tint:#F1F8FD; --tint-2:#F6FBFE; --surface-soft:#F7FBFE;
--chip-bg:#EAF2F8; --chip-border:#CDE8FA; --thumb-bg:#F4F9FD;
--ok:#3A9B72; --warn:#CC8F1A; --danger:#B14A41; --newin:#C2456F;
--ok-soft:#E6F6EF; --ok-soft-border:#B9E6CE;
--warn-soft:#FFF3DE; --warn-soft-border:#F0E2BE; --warn-soft-text:#8A5A00;
--danger-soft:#FDECEA; --danger-soft-border:#F3C9BF; --danger-soft-text:#B5341A;
color:var(--text)}
/* Seitenüberschrift/Kopfzeilen außerhalb der Karten bleiben hell auf dunkel. */
:root[data-theme="dusk"] .main{color:var(--text)}
button,input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px;border-radius:var(--r-sm)}
/* ============ Grundgerüst ============ */
.shell{display:flex;height:100vh;min-height:0}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0}
/* ============ Navigationsleiste ============ */
/* Rafael, 2026-10-15: "die passt in dem dunklen blau halt gar nicht
mehr" (zur Sidebar, nachdem die Kacheln jetzt Glas-Optik haben) -
eigener Vorschlag: die Rail ins selbe Glas-Konzept übersetzen statt
flach-opak zu lassen, damit sie nicht wie ein fremder Block neben
den neuen transparenten Karten wirkt. Literal-rgba statt var(--rail)/
var(--rail-2) direkt, weil diese beiden Tokens an anderen Stellen
(Tooltips, aktive Nav-Textfarbe) weiterhin voll opak gebraucht
werden. Bewusst nur 90% Transparenz (nicht z.B. 65% wie es die
Website streckenweise nutzt) - der Nav-Text ist weiß, da darf der
Kontrast nicht leiden. Rail bleibt wie bisher in beiden Themes
gleich dunkel (kein data-theme-Override nötig). */
.rail{flex:0 0 auto;width:var(--rail-w);background:linear-gradient(180deg,rgba(23,52,95,.78) 0%,rgba(46,76,119,.78) 100%);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
color:#fff;display:flex;flex-direction:column;min-height:0;transition:width .18s ease;z-index:60}
body.rail-min .rail{width:var(--rail-w-min)}
/* Floating Glas-Panel (Rafael, 2026-10-18: "wie eine Ebene drauf ... lass uns
das geil machen"): die Leiste klebt nicht mehr am Rand, sondern schwebt mit
Abstand und großen Rundungen über dem Farbverlauf (wie die Hero-Karte der
Website). Nur Desktop - unter 980px bleibt sie die Drawer-Variante. */
@media(min-width:981px){
.shell{padding:14px 0 14px 14px;gap:14px;height:100vh}
.rail{height:100%;border-radius:var(--r-lg);
background:#17345F;backdrop-filter:none;-webkit-backdrop-filter:none;
border:1px solid rgba(255,255,255,.22);
box-shadow:0 24px 60px rgba(23,52,95,.28),0 2px 6px rgba(23,52,95,.18),inset 0 1px 0 rgba(255,255,255,.28);
overflow:hidden}
}
.rail-top{display:flex;align-items:center;gap:15px;padding:22px 18px 18px;flex:0 0 auto}
/* Kompaktes "S"-Icon -- nur sichtbar, wenn das Rail eingeklappt ist und
kein Platz für den vollen Schriftzug bleibt (assets/icon-256.png -
bewusst die PNG, nicht das gleichnamige .webp: das ist trotz Namen
nur 128x132px statt echter 256px, wirkte dadurch unscharf). */
.rail-mark{display:none;width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-sm);object-fit:cover;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.75)}
.rail-top .wm{line-height:1.2;min-width:0}
/* Sidebar-Schriftzug als Bild (assets/simplexweb-wordmark-white.webp, weiße
Variante fürs dunkle Rail) statt Nachbau in CSS – exakt die Logo-Datei.
Höhe angehoben (23->36px, dann 36->46px) - das neue Wordmark ist
schmaler/gedrungener als das alte (anderes Seitenverhältnis), wirkte
bei alter Höhe winzig. Rafael, 2026-10-14: erst "das Logo ist zu
klein", dann "noch etwas größer, oben so 65% Breite" (gemeint war
die Sidebar, nicht der Login-Screen) - bei 46px Höhe füllt die
Wortmarke (Seitenverhältnis ~2.99:1) ca. 65% der Rail-Innenbreite
(250px minus Padding) aus. */
.wm-logo{display:block;height:46px;width:auto}
/* Wortmarke auf dem (hellen) Login-Screen: die farbige Variante
(assets/simplexweb-wordmark-color.webp, Navy+Hellblau) statt der
weißen – auf der weißen Login-Karte wäre Weiß unsichtbar. Höhe aus
demselben Grund wie oben angehoben (32->54px). Rafael wollte die
65%-Breite-Vergrößerung eigentlich für die Sidebar (siehe .wm-logo
oben), hier zurückgesetzt. */
.wm-logo-lg{display:block;height:54px;width:auto;margin:0 auto 16px}
.rail-top .wm-sub{display:block;font-size:11px;line-height:1.35;color:var(--rail-txt);margin-top:7px}
body.rail-min .rail-top .wm{display:none}
body.rail-min .rail-mark{display:block}
.railCollapseBtn{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border:none;border-radius:var(--r-sm);
background:rgba(255,255,255,.08);color:var(--rail-txt);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:background .12s}
.railCollapseBtn:hover{background:rgba(255,255,255,.16);color:#fff}
.railCollapseBtn svg{transition:transform .15s}
body.rail-min .railCollapseBtn svg{transform:rotate(180deg)}
/* Eingeklappt: Icon + Umschalt-Button nebeneinander sind zu breit für die
74px schmale Leiste (38px Icon + 15px Abstand + 26px Button > 74px) -
stattdessen sauber übereinander stapeln. */
body.rail-min .rail-top{flex-direction:column;justify-content:center;padding:18px 0;gap:10px}
/* Pfeil-Button übers Icon statt darunter - order statt DOM-Reihenfolge,
damit die ausgeklappte Ansicht (Button ganz rechts) unangetastet bleibt. */
body.rail-min .railCollapseBtn{margin-left:0;order:-1}
body.rail-min .rail-mark{order:0}
/* Die Tageszeit-Begrüßung (core/user.js renderGreeting()) ist ein ganzer
Satz - passt in 74px nicht sinnvoll, blendet sich beim Einklappen aus
(genau wie beim automatischen Einklappen unter 1320px per Media Query). */
body.rail-min .rail-greet{display:none}
@media(max-width:1320px){ .railCollapseBtn{display:none} }
/* Tageszeit-Begrüßung zwischen Logo und Navigation, siehe renderGreeting()
in js/core/user.js – schafft auch den gewünschten Abstand zum Logo.
Auf Wunsch "offensichtlicher" gemacht: fast volle Breite (statt
18px Seitenrand) + kräftigerer Hintergrund + Akzentstreifen, damit
sie nicht mehr im dunklen Rail untergeht. Rafael, 2026-09-19. */
.rail-greet{margin:10px 10px 18px;padding:12px 14px;background:rgba(255,255,255,.13);
border-left:3px solid var(--brand);border-radius:var(--r-md);font-size:13px;font-weight:700;line-height:1.4;color:#fff;
min-height:17px}
.rail-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 10px 10px}
.rail-nav::-webkit-scrollbar{width:6px}
.rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.navlbl{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:rgba(169,196,210,.72);
padding:14px 12px 7px;white-space:nowrap}
body.rail-min .navlbl{opacity:0;height:22px;padding:0;overflow:hidden}
.nav{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:none;border-radius:var(--r-md);
color:#fff;text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:background .12s,color .12s;position:relative}
.nav .ico{width:19px;height:19px;flex:0 0 auto;display:flex}
.nav .ico svg{width:100%;height:100%}
.nav .nm{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .cnt{flex:0 0 auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.12);color:#fff;
border-radius:999px;padding:2px 8px;min-width:22px;text-align:center}
.nav .cnt:empty{display:none}
.nav:hover{background:rgba(255,255,255,.10);color:#fff}
/* Aktiver Menüpunkt: auf dem Navy-Rail übernimmt Hellblau als Akzent die
Hervorhebung (Navy-Grad-btn würde auf Navy-Grund untergehen). */
.nav.active{background:linear-gradient(135deg,rgba(148,199,249,.34),rgba(255,255,255,.16));color:#fff;font-weight:700;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 6px 16px rgba(10,25,50,.22)}
.nav.active .cnt{background:rgba(255,255,255,.26);color:#fff}
.nav.soon .nm::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:rgba(169,196,210,.5);margin-left:8px;vertical-align:middle}
.nav.active.soon .nm::after{background:rgba(255,255,255,.6)}
body.rail-min .nav{justify-content:center;padding:11px 0}
body.rail-min .nav .nm,body.rail-min .nav .cnt{display:none}
/* Eingeklappt bleibt nur noch das Icon übrig - etwas größer/kräftiger,
damit es allein gut lesbar ist statt klein zu wirken. Rafael,
2026-09-19. */
body.rail-min .nav .ico{width:23px;height:23px}
body.rail-min .nav .ico svg{stroke-width:2.4}
/* Tooltip fürs eingeklappte Menü NICHT mehr über ::after/data-tip lösen -
.rail-nav hat overflow-x:hidden (fürs Scrollen nötig), das hat den
Tooltip immer unsichtbar abgeschnitten. Stattdessen ein einzelnes,
per JS positioniertes .rail-tip-Element (siehe nav.js), das als
position:fixed nicht vom Rail-Overflow betroffen ist. */
.rail-tip{position:fixed;z-index:500;left:0;top:0;transform:translate(0,-50%);background:var(--rail);color:#fff;
font-size:12.5px;font-weight:650;padding:6px 11px;border-radius:var(--r-sm);box-shadow:0 10px 24px rgba(23,52,95,.28);
pointer-events:none;opacity:0;white-space:nowrap;transition:opacity .12s}
.rail-tip.on{opacity:1}
/* ---- Benutzerwechsel ---- */
/* ---- Angeheftete Navigation unten (Einstellungen, …) ---- */
.rail-pinned{display:flex;flex-direction:column;gap:2px;padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--rail-line)}
.rail-pinned .nav{font-size:13.5px}
body.rail-min .rail-pinned{align-items:center}
.rail-foot{flex:0 0 auto;border-top:1px solid var(--rail-line);padding:10px;position:relative}
.userbtn{display:flex;align-items:center;gap:10px;width:100%;border:none;background:rgba(255,255,255,.06);
border-radius:var(--r-md);padding:8px 10px;cursor:pointer;color:#fff;text-align:left;transition:background .12s}
.userbtn:hover{background:rgba(255,255,255,.14)}
.av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:#fff;overflow:hidden}
.av-bot svg{display:block}
.av-photo{background:var(--border)}
.av-photo img{width:100%;height:100%;object-fit:cover;display:block}
.userbtn .ub{flex:1 1 auto;min-width:0;line-height:1.2}
.userbtn .ub b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbtn .ub span{display:block;font-size:11px;color:var(--rail-txt)}
.userbtn .cv{flex:0 0 auto;opacity:.7}
body.rail-min .userbtn .ub,body.rail-min .userbtn .cv{display:none}
body.rail-min .userbtn{justify-content:center;padding:8px 0}
/* Glas-Optik (Live-Seiten-Token --glass-white-90, Stand 2026-10-14):
schwebt frei über der Seite, kein umgebender Dim-Hintergrund wie bei
.overlay/.modal - 90% Deckkraft statt var(--card) blieb bewusst fast
opak, damit der Text drunter nicht durchscheint und lesbar bleibt. */
.usermenu{position:absolute;left:10px;right:10px;bottom:calc(100% + 8px);
background:var(--glass-white-90);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid var(--glass-white-55);border-radius:var(--r-md);
box-shadow:var(--shadow-float);padding:6px;display:none;z-index:80}
.usermenu.open{display:block}
/* ---- Benachrichtigungs-Glocke (core/notifications.js) ---- */
/* Sitzt zwischen Begrüßung und Navigation. War erst ein isoliertes
kleines Quadrat mit viel Leerraum drumherum ("optisch besser
einpassen, kacke so"), dann eine Zeile ganz im Nav-Stil - auf Wunsch
nochmal korrigiert: "nicht als Menüpunkt abheben sondern separat".
Jetzt eigens eingerahmt (Border + eigener Hintergrund, wie eine
kleine eigene Box) statt sich optisch in die Nav-Liste einzureihen -
bleibt aber ansonsten die volle Zeile mit Icon/Label/Zähler.
Rafael, 2026-09-20. */
.notif-wrap{margin:0 10px 14px}
.notif-bell{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:var(--r-md);color:#fff;
font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:background .12s,border-color .12s}
.notif-bell:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.notif-bell .ico{width:19px;height:19px;flex:0 0 auto;display:flex}
.notif-bell .ico svg{width:100%;height:100%}
.notif-bell .nm{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
background:var(--danger);color:#fff;font-size:11px;font-weight:800;line-height:1;
display:flex;align-items:center;justify-content:center}
/* [hidden] ist eine Attribut-Selektor-Regel mit geringerer Spezifität als
.notif-badge{display:flex} oben, gewinnt im Zweifel aber trotzdem nicht
automatisch gegen eine spätere Klassen-Regel - ohne dieses Override
blieb der Zähler auch nach updateNotifBadge()'s badge.hidden=true
sichtbar (die Logik selbst war schon richtig, nur die CSS-Anzeige
ignorierte "hidden"). Rafael, 2026-09-20. */
.notif-badge[hidden]{display:none}
/* Eingeklapptes Rail: wie bei .nav nur noch das Icon, der Zähler wird
zum kleinen Punkt oben rechts am Icon statt der vollen Pille. */
body.rail-min .notif-bell{justify-content:center;padding:11px 0}
body.rail-min .notif-bell .nm{display:none}
body.rail-min .notif-bell .ico{width:23px;height:23px}
body.rail-min .notif-badge{position:absolute;top:4px;right:8px;min-width:14px;height:14px;padding:0;
font-size:0;border:2px solid var(--rail)}
.notif-panel{position:fixed;width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;
background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 22px 50px rgba(0,0,0,.32);
z-index:300}
.notif-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 16px;border-bottom:1px solid var(--divider);background:var(--card)}
.notif-head h3{margin:0;font-size:14.5px;font-weight:800}
.notif-send{border:none;background:var(--grad-btn);color:#fff;width:28px;height:28px;border-radius:50%;
font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-list{padding:4px}
.notif-item{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:var(--r-md)}
.notif-item:hover{background:var(--surface-soft)}
.notif-item.unread{background:var(--brand-soft)}
.notif-icon{flex:0 0 auto;font-size:18px;line-height:1.4}
.notif-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-body b{font-size:12.5px;font-weight:700}
.notif-body span{font-size:13px;color:var(--text);line-height:1.4}
.notif-item.unread .notif-body b{font-weight:800}
.notif-dot{flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--danger)}
.notif-time{font-size:11px;color:var(--muted)!important}
body.rail-min .usermenu{left:8px;width:206px;right:auto}
.umi{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;border-radius:var(--r-md);
padding:9px 10px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);text-align:left}
.umi:hover{background:var(--brand-soft)}
.umi.on{background:var(--brand-soft);color:var(--brand-dark)}
.umi .umu-meta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted)}
.umi .umu-dot{width:7px;height:7px;border-radius:50%;background:#A8B3BC;box-shadow:0 0 0 1px #dbe3e8}
.umi .umu-meta.active{color:var(--ok)}
.umi .umu-meta.active .umu-dot{background:#3DDC97;box-shadow:none}
.umi .umu-meta.pause{color:var(--warn-soft-text)}
.umi .umu-meta.pause .umu-dot{background:var(--warn);box-shadow:none}
.umi .chk{margin-left:6px;color:var(--brand-dark);opacity:0}
.umi.on .chk{opacity:1}
.umlbl{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:8px 10px 5px}
/* ============ Modul-Kopf ============ */
.modhead{flex:0 0 auto;display:flex;align-items:center;gap:13px;padding:15px 20px 13px}
.burger{display:none;width:38px;height:38px;border:1px solid var(--border);background:var(--card);border-radius:var(--r-md);
color:var(--text);cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.modhead .tt{min-width:0;flex:1 1 auto}
/* Rafael zeigte die echte Live-Seite (fette Poppins-Überschriften,
Navy) zum Vergleich, 2026-10-14 - Seitentitel hier entsprechend
auf ExtraBold angehoben statt Bold, Größe unverändert (schmale
Kopfzeile, kein Platz für mehr). */
.modhead h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px}
.modhead p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.headact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.stand{font-size:12px;color:var(--muted);white-space:nowrap}
.reload{border:1px solid var(--border);background:var(--card);border-radius:var(--r-md);padding:8px 14px;font-size:13.5px;font-weight:600;
color:var(--text);cursor:pointer;transition:border-color .12s;display:flex;align-items:center;gap:7px}
.reload:hover{border-color:var(--brand);color:var(--brand-dark)}
.reload svg{width:15px;height:15px}
/* Sichtbares Feedback beim Aktualisieren - Icon dreht sich, solange der
Klick-Handler noch lädt (core/nav.js), Button optisch gesperrt. */
.reload:disabled{opacity:.7;cursor:default}
.reload.loading svg{animation:reload-spin .7s linear infinite}
@keyframes reload-spin{to{transform:rotate(360deg)}}
.modbody{flex:1 1 auto;min-height:0;position:relative}
.module{position:absolute;inset:0;display:none;min-height:0}
.module.on{display:flex;flex-direction:column}
/* ============ gemeinsame Bausteine ============ */
.scroll{flex:1 1 auto;overflow-y:auto;padding:0 20px 22px}
/* Radius 18->20px (var(--radius-2xl)) auf den primären Inhaltskarten
(.card/.st-panel/.kpi/.qcard/.ph-card/.pane/.hw-form/.hw-side/
.kunde-card) - Rafael zeigte die Live-Seite zum Vergleich: deren
weiße Karten sind merklich runder. 20px ist der obere Rand der
dort beobachteten Karten-Spanne (12-20px). Rafael, 2026-10-15: "die
Kacheln sind auf der Website eher so transparent" - alle acht jetzt
wie .modal/.usermenu auf var(--card-glass) + Blur statt solidem
var(--card). Bewusst konservative 90% Deckkraft (nicht 55/72% wie
die Website es an manchen Stellen nutzt) - bei dichten Tabellen/
Zahlen soll die Lesbarkeit nicht leiden, nur das Hintergrund-Mint
darf ganz leicht durchscheinen. */
.card{background:var(--card-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow)}
.card+.card{margin-top:14px}
.st-panel{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:14px 0 10px;padding:18px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.st-panel h3{margin:0;font-size:18px;font-weight:700}
.st-panel p{margin:.35em 0 0;color:var(--muted);max-width:52ch}
.st-panel .btn{margin:0;white-space:nowrap}
.card h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--brand-dark);margin:0 0 16px;font-weight:800}
/* Icon vor der Karten-Überschrift, z.B. Team-Stimmung (core/mood.js) -
Rahmen/Größe bleiben wie bei jeder anderen Karte, nur ein kleines
Icon zusätzlich zum Text. */
.card h2.ico-h2{display:flex;align-items:center;gap:7px}
.card h2.ico-h2 svg{width:13px;height:13px;flex:0 0 auto}
.loading{margin:40px auto;text-align:center;color:var(--muted);font-size:13.5px}
.nores{padding:42px 22px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.55}
.nores b{display:block;color:var(--text);font-size:16px;margin-bottom:6px}
.sbadge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.sbadge.flownode{background:var(--brand-soft);color:var(--brand-dark);margin-left:6px;font-weight:650;
max-width:180px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:800;color:var(--brand-dark);
letter-spacing:.4px;white-space:nowrap}
.dim{color:var(--muted)}
.btn{border:1px solid var(--border);background:var(--card);border-radius:var(--r-md);padding:9px 15px;font-size:13.5px;font-weight:650;
color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .13s}
.btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--grad-btn);color:#fff;box-shadow:0 3px 8px -2px rgba(23,52,95,.3);transition:all .2s var(--ease-signature)}
/* Korall-Glow (Live-Seiten-Token --glow-coral-outer) als Hover-Akzent
auf dem wichtigsten Button-Typ - additiv zum bestehenden Schatten. */
.btn.primary:hover{color:#fff;box-shadow:0 5px 12px -3px rgba(23,52,95,.38);filter:brightness(1.06)}
/* Prominenter Gelb-Button für "An Rechnungsprüfung übergeben" (an der
Dokumentzeile im Ticket, ticketrun.js) - bewusst auffälliger als die
übrigen Aktions-Buttons, damit eine noch offene Übergabe nicht
übersehen wird. */
.btn.warn{background:var(--warn);border-color:transparent;color:#3D2600;box-shadow:0 3px 8px -2px rgba(224,162,0,.4);font-weight:750}
.btn.warn:hover{color:#3D2600;filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* ============ Dashboard ============ */
.kpi-section{margin-bottom:18px}
/* Echter Abschnitts-Trenner statt kleiner bunter Pille (Tickets blau,
Rechnungen orange sahen nebeneinander inkonsistent aus) - Label +
Icon links, durchgehende Trennlinie füllt den Rest der Breite, damit
jeder Bereich klar eigenständig wirkt. Rafael, 2026-09-20: "als
Trenner gestalten". */
.kpi-sechead{display:flex;align-items:center;gap:12px;margin:26px 0 13px}
.kpi-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.4px;
text-transform:uppercase;color:var(--text);white-space:nowrap}
.kpi-tag svg{width:16px;height:16px;flex:0 0 auto;color:var(--brand-dark)}
.kpi-tag.inv svg{color:var(--warn-soft-text)}
.kpi-sechead::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:0}
.kpi{background:var(--card-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r-lg);padding:17px 19px;box-shadow:var(--shadow);
border-left:4px solid var(--border)}
.kpi .n{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:5px;font-weight:600}
.kpi .kpi-sub{font-weight:600;opacity:.75}
.kpi.go{cursor:pointer;transition:transform .25s var(--ease-signature),box-shadow .25s var(--ease-signature)}
.kpi.go:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(23,52,95,.12)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:stretch}
.grid2 .card{display:flex;flex-direction:column;height:100%}
.grid2 .card+.card{margin-top:0}
.grid2 .dash-card{min-height:258px}
.donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dash-card .donut{flex:1 1 auto;align-content:center}
.prio-stack{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.dash-seg{transition:stroke-dasharray .8s ease, stroke-dashoffset .8s ease}
.center-n{font-size:29px;font-weight:700;fill:var(--text)}
.center-l{font-size:10.5px;fill:var(--muted);letter-spacing:.5px}
.lg{list-style:none;padding:0;margin:0;flex:1;min-width:142px}
.lg li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px}
.lg .d{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.lg .l{flex:1;color:var(--text)}
.lg .v{font-variant-numeric:tabular-nums;font-weight:700}
.lg .v em{font-style:normal;color:var(--muted);font-weight:600;margin-left:6px;font-size:11.5px}
.barrow{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.barrow:last-child{margin-bottom:0}
.barrow .bl{width:58px;font-size:13px;color:var(--text);flex:0 0 auto}
.track{flex:1;height:9px;background:var(--divider);border-radius:999px;overflow:hidden}
.fill{height:100%;border-radius:999px;transition:width .4s ease}
.barrow .bv{width:26px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
/* "Zu bearbeitende Mails nach Kunde" - Dashboard-Widget, Rafael,
2026-09-25: "gerne fancy und cool". Eigene, volle Zeile unter den
beiden Donuts (siehe dashboard.js) statt in .grid2 gequetscht, damit
bei vielen Kunden genug Platz für die Balken bleibt. */
.mail-bykunde{margin-top:0}
/* Rafael, 2026-09-25: "irgendwie schmaler machen ... nur Kunden und
Mails als Zahl ... immer 4 Kunden nebeneinander" - Balkenzeilen durch
ein kompaktes 4er-Grid aus kleinen Chips (Punkt + Name + Zahl) ersetzt. */
.mkchips{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:4px}
.mkchip{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:var(--r-md);cursor:pointer;
background:var(--tint);border:1px solid var(--border);transition:transform .12s,border-color .12s;min-width:0}
.mkchip:hover{transform:translateY(-1px);border-color:var(--brand)}
.mkchip .mkname{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:600;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkchip .mkval{flex:0 0 auto;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand-dark)}
.mk-empty{font-size:13.5px;color:var(--muted);padding:8px 4px}
.mk-empty.mk-done{color:var(--ok);font-weight:600}
@media (max-width:720px){ .mkchips{grid-template-columns:repeat(2,1fr)} }
/* "Neue Tickets"-Trend-Chart (Tag/Woche/Jahr, nach Kunde gestapelt) -
Rafael, 2026-09-25: "ein Balken pro Tag ... den Balken je nach Kunden
in den Kundenfarben aufteilen". Reine CSS-Balken (gestapelte Divs)
statt SVG, damit die Höhen einfach über Prozent-Höhe gehen. */
.trend-card h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px}
.trend-modes{margin-left:auto;display:flex;gap:6px}
.trend-mode-btn{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:var(--r-sm);
padding:4px 11px;font-size:11px;font-weight:800;letter-spacing:.2px;text-transform:none;cursor:pointer;transition:all .12s}
.trend-mode-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.trend-mode-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.trend-loading{font-size:13px;color:var(--muted);padding:20px 4px;text-align:center}
/* Kunden-Filter (Multi-Choice) für "Fristen im Überblick" +
"Bearbeitungsstatus" - Rafael, 2026-09-25: "ein kleines Dropdown ...
eine Auswahl für beide Dashboards". */
.grid2 .dash-card:first-child h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
.dkf{position:relative;margin-left:auto}
.dkf-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);
color:var(--muted);border-radius:var(--r-sm);padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.2px;
text-transform:none;cursor:pointer;transition:all .12s}
.dkf-btn svg:first-child{width:12px;height:12px;flex:0 0 auto}
.dkf-btn .cv{flex:0 0 auto;opacity:.7}
.dkf-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.dkf-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dkf-btn.on .cv{opacity:1}
.dkf-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;max-height:280px;
overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 10px 28px rgba(23,52,95,.14);
padding:8px}
.dkf-menu.open{display:block}
.dkf-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:12.5px;
font-weight:600;color:var(--text);white-space:nowrap}
.dkf-item:hover{background:var(--tint)}
.dkf-item input{margin:0}
.dkf-reset{width:100%;margin-top:4px;border:none;background:none;color:var(--brand-dark);font-size:12px;font-weight:700;
text-align:left;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer}
.dkf-reset:hover{background:var(--tint)}
.trend-bars{display:flex;align-items:flex-end;gap:4px;height:150px;padding:8px 2px 0}
.trend-bar-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.trend-bar-n{font-size:10px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.trend-bar{width:100%;max-width:22px;flex:0 0 auto;height:100%;display:flex;flex-direction:column-reverse;
border-radius:4px 4px 2px 2px;overflow:hidden;background:var(--divider)}
.trend-seg{width:100%;transition:height .5s ease}
.trend-seg+.trend-seg{border-top:1.5px solid var(--card)}
.trend-bar-lbl{font-size:9.5px;color:var(--muted);white-space:nowrap;transform:rotate(-40deg) translateX(-4px);
transform-origin:top right;height:14px}
.trend-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;padding-top:12px;border-top:1px solid var(--border)}
.trend-lg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text)}
/* Hover-Tooltip über einem Tagesbalken ("Neue Tickets"), gleiches
Flag-Muster wie .map-flag (Karte, sites.js) - Rafael, 2026-09-27. */
.trend-chart-wrap{position:relative}
.trend-flag{position:absolute;top:0;transform:translate(-50%,-100%);background:var(--card);border:1px solid var(--border);
border-radius:var(--r-md);box-shadow:0 14px 34px rgba(23,52,95,.22);padding:9px 12px;min-width:150px;max-width:220px;
opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.trend-flag.on{opacity:1}
.trend-flag::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--card)}
.trend-flag b{display:block;font-size:13px;font-weight:750;margin:0 0 2px;line-height:1.3}
.trend-flag .mf-sub{font-size:11.5px;color:var(--muted)}
.trend-flag-list{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:5px}
.trend-flag-list li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text)}
.trend-flag-list li b{display:inline;margin:0 0 0 auto;font-size:12px;font-variant-numeric:tabular-nums}
.nextup{list-style:none;margin:0;padding:0}
.nextup li{border-bottom:1px solid var(--divider);font-size:13.5px}
.nextup li:last-child{border-bottom:none}
.nextup li:hover{background:var(--surface-soft)}
.nextlink{display:flex;align-items:center;gap:11px;padding:10px 0;cursor:pointer;color:inherit;text-decoration:none}
.nextup .bar{width:3px;height:30px;border-radius:2px;flex:0 0 auto}
.nextup .t{flex:1 1 auto;min-width:0}
.nextup .t b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextup .t span{font-size:12px;color:var(--muted)}
.nextup .w{font-size:12px;font-weight:700;white-space:nowrap;flex:0 0 auto}
/* ============ Ticketliste ============ */
.tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.fb{border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 15px;border-radius:999px;font-size:13px;
cursor:pointer;font-weight:700;transition:.13s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.fb svg{width:15px;height:15px;flex:0 0 auto}
.fb:hover{border-color:var(--brand)}
.fb.on{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;box-shadow:0 6px 14px rgba(23,52,95,.3)}
.fb .n{opacity:.7;margin-left:5px;font-weight:600}
.fb.mine.on{background:var(--ok);border-color:var(--ok);box-shadow:0 6px 14px rgba(30,158,106,.3)}
/* News-Filter + blinkende Kennzeichnung */
.fb.news{display:inline-flex;align-items:center;gap:7px}
.fb.news .nfdot{width:7px;height:7px;border-radius:50%;background:var(--border);flex:0 0 auto}
.fb.news.has .nfdot{background:var(--brand);animation:newsBlink 1.05s ease-in-out infinite}
.fb.news.on{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;box-shadow:0 6px 14px rgba(23,52,95,.3)}
.fb.news.on .nfdot{background:var(--card)}
.newsflag{display:inline-flex;align-items:center;gap:6px;margin-left:9px;padding:2px 9px 2px 7px;border-radius:999px;
background:var(--brand);color:#fff;font-size:11px;font-weight:800;letter-spacing:.3px;vertical-align:middle;
animation:newsBlink 1.05s ease-in-out infinite}
.newsflag .nfdot{width:6px;height:6px;border-radius:50%;background:var(--card)}
tr.tk-news td{background:rgba(23,52,95,.055)}
tr.tk-news td:first-child{animation:rowEdge 1.4s ease-in-out infinite}
@keyframes newsBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rowEdge{0%,100%{box-shadow:inset 3px 0 0 var(--brand)}50%{box-shadow:inset 3px 0 0 rgba(23,52,95,.12)}}
.sfield{flex:1 1 180px;min-width:160px;border:1px solid var(--border);border-radius:var(--r-md);padding:9px 14px;font-size:16px;
background:var(--card);outline:none;color:var(--text)}
.sfield:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(148,199,249,.18)}
#tkTools .sfield{order:2;flex:1 1 100%;min-width:260px}
.viewpick{order:1;margin-left:auto;display:inline-flex;align-items:center;gap:6px}
/* Zweite Filterzeile: Priorität/Fälligkeit/Workflow-Schritt + Sortierung, erzwungen auf
eine eigene Zeile unterhalb der Suche (order höher als #tkTools .sfield). */
.tools-row2{order:3;flex:1 1 100%;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:2px}
.tools-sel{border:1px solid var(--border);border-radius:var(--r-md);padding:8px 30px 8px 13px;font-size:13px;
background:var(--card) url('data:image/svg+xml;utf8,') no-repeat right 10px center/13px 13px;
-webkit-appearance:none;appearance:none;color:var(--text);cursor:pointer;max-width:220px}
.tools-sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(148,199,249,.18)}
.tools-row2-lbl{font-size:12px;color:var(--muted);font-weight:650;white-space:nowrap}
.tools-row2 .grow{flex:1 1 auto}
/* Mehrfachauswahl-Filter (Checkboxen statt select multiple) – bleibt beim
Anklicken einer Checkbox bewusst offen, schließt nur über Klick außerhalb
oder erneuten Klick auf den Button. */
.mfilter{position:relative}
.mfilter-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--r-md);
padding:8px 12px;font-size:13px;font-weight:650;color:var(--text);background:var(--card);cursor:pointer;transition:border-color .13s}
.mfilter-btn:hover{border-color:var(--brand)}
.mfilter.open .mfilter-btn{border-color:var(--brand);box-shadow:0 0 0 3px rgba(148,199,249,.18)}
.mfilter-btn svg{width:13px;height:13px;color:var(--muted);flex:0 0 auto}
.mfilter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;
border-radius:999px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:800}
.mfilter-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;background:var(--card);min-width:200px;
border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 14px 34px rgba(23,52,95,.16);padding:6px;
max-height:280px;overflow-y:auto;display:none}
.mfilter-menu.open{display:block}
.mfilter-item{width:100%;display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer;
font-size:13.5px;font-weight:600;color:var(--text)}
.mfilter-item:hover{background:var(--tint)}
.mfilter-item input{accent-color:var(--brand);cursor:pointer}
.mfilter-clear{width:100%;margin-top:2px;padding:7px 9px;border:none;border-top:1px solid var(--border);border-radius:0 0 8px 8px;
background:none;color:var(--muted);font-size:12.5px;font-weight:650;cursor:pointer;text-align:left}
.mfilter-clear:hover{color:var(--danger)}
/* Kunden-Filter im Dashboard-KPI-Kopf */
.kpi-sechead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dash-kunde-sel{max-width:200px}
/* Sortierbare Tabellenköpfe */
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--brand-dark)}
/* Paginierung */
.tkpager{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;padding:16px 0 4px}
.tkpager-info,.tkpager-page{font-size:12.5px;color:var(--muted);white-space:nowrap}
.vbtn{width:36px;height:36px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:0;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s}
.vbtn svg{width:18px;height:18px}
.vbtn:hover{border-color:var(--brand);color:var(--brand-dark)}
.vbtn.on{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;box-shadow:0 6px 14px rgba(23,52,95,.3)}
.tkcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
/* Karte in drei klar getrennten Zonen (Kopf/Mitte/Fuß) statt einem
einzigen, textlastigen Block - overflow:hidden lässt Kopf-/Fußfarbe
an den abgerundeten Ecken sauber enden. */
.tkcard{display:block;color:inherit;text-decoration:none;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);overflow:hidden;cursor:pointer;transition:transform .25s var(--ease-signature),box-shadow .25s var(--ease-signature)}
.tkcard:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(23,52,95,.1)}
.tkcard-zone-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;font-size:12px}
.tkcard-status{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bearbeitungs-Timer: Ampel-Punkt (grün/gelb/rot) + verbleibende bzw.
negative Zeit (tktimerTick in ticketrun.js zieht data-timer-deadline
periodisch nach, ohne die Liste neu zu zeichnen). Platzhalter-Logik
(24h ab Anlage/Statusänderung), bis eine echte Zeitvorgabe kommt. */
.tktimer{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:rgba(23,52,95,.65);white-space:nowrap;font-variant-numeric:tabular-nums}
.ampel{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px var(--card)}
.ampel-th,.ampel-td{text-align:center;width:112px}
/* Eigene schmale Spalte für den Neu-Punkt zwischen Nr. und Titel, statt
ihn in eine der beiden Textzellen zu quetschen. Kein eigenes Padding
(würde den .trlink-Negativ-Margin-Trick durcheinanderbringen, siehe
.trlink weiter oben) - nur schmal + zentriert wie .ampel-td. */
.newin-th,.newin-td{width:46px;text-align:center}
.newin-td .newin{margin:0}
/* Sichtbarer "Neu"-Tag in der Ticketliste (Rafael, 2026-09-25: "in der
Übersicht auch den Tag Neu hinzufügen") - gleiche Pillenoptik wie
.msg-tag in mail.js, nur mit der --newin-Farbe statt der Ordnerfarbe.
Der pulsierende Punkt (.newin) bleibt für die Inline-Stellen (Titel/
Ticketkopf), hier in der Liste steht zusätzlich der Text. */
.newin-tag{display:inline-block;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
background:color-mix(in srgb, var(--newin) 16%, var(--card));color:var(--newin)}
/* "Neuer Eingang"-Markierung (Mail zugeordnet/Dokument hochgeladen seit
dem letzten Öffnen, siehe markTicketNewIntake() in core/data.js) -
kleiner Punkt direkt neben dem Titel, pulsiert (Größe + Deckkraft)
statt nur zu blinken, damit er deutlicher auffällt. Titel-Tooltip
trägt weiter den erklärenden Text. Margin auf beiden Seiten, sitzt
je nach Stelle mal vor, mal hinter dem Titel im Fließtext. */
.newin{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--brand);
flex:0 0 auto;margin:0 7px;vertical-align:middle;box-shadow:0 0 0 2px var(--card);
animation:newin-blink 1.1s ease-in-out infinite}
@keyframes newin-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.4)}}
.newin-fb.on{background:var(--newin);border-color:var(--newin)}
.tkcard-zone-mid{display:flex;gap:12px;align-items:flex-start;padding:13px 14px}
.tkcard-copy{flex:1 1 auto;min-width:0}
.tkcard-title{font-size:14.5px;font-weight:700;line-height:1.35;color:var(--text)}
.tkcard-loc{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-top:6px}
.tkcard-loc svg{width:13px;height:13px;flex:0 0 auto}
.tkcard-media{position:relative;flex:0 0 auto}
.tkcard-zone-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 14px;background:var(--surface-soft);border-top:1px solid var(--divider)}
.tkthumb{width:76px;height:76px;padding:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--thumb-bg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tkthumb img{width:100%;height:100%;object-fit:cover;display:block}
.tkthumb.empty svg{width:20px;height:20px;color:var(--muted)}
.tkthumbn{position:absolute;right:4px;bottom:4px;background:rgba(20,45,60,.75);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:2px 6px;line-height:1}
.tblwrap{overflow-x:auto}
/* Sticky Tabellenkopf NUR für die Ticketliste (#tkTable) - Rafael,
2026-09-24: "die Tabellenzeile stehen lassen und beim Runterscrollen
nur die Tickets drunter scrollen, damit die immer sichtbar bleibt".
Bewusst per #tkTable gescoped statt generisch auf .tblwrap/table -
die Standorte-Liste (sites.js) nutzt dieselben generischen Klassen,
soll davon aber unberührt bleiben. Braucht dafür eine eigene,
begrenzte Scroll-Höhe statt einfach die ganze Seite scrollen zu
lassen, sonst hat position:sticky nichts, wogegen es "stehen" kann. */
#tkTable .tblwrap{max-height:70vh;overflow-y:auto}
#tkTable .tblwrap th{position:sticky;top:0;background:var(--card);z-index:5}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;
padding:0 12px 11px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--divider);vertical-align:middle}
/* Füllt die Zelle exakt aus (negative margin = tds eigenes padding, dann
dasselbe padding wieder drauf) - dadurch ist die ganze Zelle ein echter
Link (Rechtsklick "In neuem Tab öffnen" etc.), ohne td selbst
anzufassen, das auch andere Tabellen im Projekt nutzen. */
.trlink{display:block;margin:-12px;padding:12px;color:inherit;text-decoration:none}
tbody tr{cursor:pointer}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-soft)}
/* Erledigte Tickets bleiben sichtbar, treten aber optisch zurück – auf
Hover wieder voll lesbar, um sie bei Bedarf trotzdem leicht zu prüfen. */
tr.tk-done,.tkcard.tk-done{opacity:.5;filter:grayscale(.4)}
tr.tk-done:hover,.tkcard.tk-done:hover{opacity:.9;filter:none}
.ttl{font-weight:700}
.pr{font-weight:700;font-size:12.5px}
.due{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.due svg{width:13px;height:13px;flex:0 0 auto}
.due.late{color:var(--danger);font-weight:700}
.who{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.who .av{width:24px;height:24px;font-size:10.5px}
.cbadge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);font-weight:650;margin-left:8px}
.cbadge svg{width:13px;height:13px}
/* ============ Ticket-Detail ============ */
/* Eigene Karten-Variante nur für den Ticket-Kopf (Rafael, 2026-09-20:
"etwas übersichtlicher, mehr Grafik, leichte Schatten, Wichtiges
hervorheben") - Akzentstreifen + etwas mehr Tiefe als die sonst
recht flachen Standard-.card, ohne das global für JEDE Karte in der
App zu ändern. */
.tkdetail-card{border-top:3px solid var(--brand);box-shadow:0 20px 46px rgba(23,52,95,.11);padding-top:18px}
.dhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:var(--tk-gap,18px)}
.dhead .dt{flex:1 1 260px;min-width:0}
.dhead .dt h3{margin:8px 0 0;font-size:22px;font-weight:800;line-height:1.28;letter-spacing:-.1px}
/* Ticket-ID jetzt eine kleine Kapsel statt reinem Fließtext - fällt
dadurch sofort als eigenständiges Element auf, nicht nur als
Vorspann vorm Titel. */
.dhead .dt .mono{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);padding:4px 13px;border-radius:999px;font-size:15px;font-weight:800;letter-spacing:.2px}
/* Status/Priorität + Timer jetzt direkt bei den Kerndaten oben statt in
einer eigenen Zeile darunter - gleiche Höhe/Form wie der Stift-Button
(.btn) daneben, damit alles zusammen wie eine Reihe wirkt. Bekommen
jetzt zusätzlich einen zur Statusfarbe passenden Hintergrundton (per
Inline-style aus fieldDdHtml() in ticketrun.js, color-mix mit der
jeweiligen Status-/Prioritätsfarbe), statt nur über den kleinen Punkt
erkennbar zu sein - genau das "Wichtiges hervorheben". */
.dhead-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dhead-fields .fielddd{width:auto}
.dhead-fields .fielddd-btn{width:auto;height:38px;box-sizing:border-box;padding:0 13px;font-size:13.5px;font-weight:700;
border-radius:999px;border-color:transparent;transition:filter .12s,transform .12s}
.dhead-fields .fielddd-btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.dhead-fields .fielddd-menu{left:0;right:auto;min-width:190px}
.dhead-fields .tktimer{height:38px;box-sizing:border-box;padding:0 13px;border:1px solid var(--border);border-radius:999px;
background:var(--surface-soft)}
/* "Marie ist auch gerade hier" - Realtime-Präsenz (ticketrun.js), als
überlappender Avatar-Stapel mit grünem Live-Punkt, sitzt neben dem
"Zurück zur Liste"-Button (.tkbackrow) - leer, wenn niemand sonst
gerade im Ticket ist, kollabiert dann von selbst. Doppelklick auf
eine Kachel = High Five (Easter Egg, siehe sendHighFive()). */
.tkbackrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
/* Direkt neben dem Zurück-Button statt irgendwo rechts im Freien - eigene
leicht hervorgehobene Kapsel (Rand + Hintergrund), damit es sofort ins
Auge fällt statt zwischen den übrigen Kopf-Elementen unterzugehen. */
.tkpresence{display:flex;align-items:center;gap:9px;background:var(--brand-soft);border:1px solid var(--brand-soft-border,var(--border));
border-radius:999px;padding:6px 14px 6px 6px}
.tkpresence-avs{display:flex}
.tkpresence-av{position:relative;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:800;color:#fff;border:2.5px solid var(--brand-soft);margin-left:-9px;cursor:pointer;
box-shadow:0 2px 6px rgba(23,52,95,.18);transition:transform .12s}
.tkpresence-av:hover{transform:translateY(-2px) scale(1.06);z-index:1}
.tkpresence-av:first-child{margin-left:0}
.tkpresence-av.tkpresence-more{background:var(--chip-bg);color:var(--muted);font-weight:700;font-size:11px;cursor:default}
.tkpresence-av.tkpresence-more:hover{transform:none}
.tkpresence-live{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--ok);
border:2px solid var(--brand-soft);animation:tkpresence-pulse 1.6s ease-in-out infinite}
.tkpresence-lbl{font-size:13px;font-weight:700;color:var(--brand-dark)}
@keyframes tkpresence-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
/* High-Five-Easter-Egg: kurzer Emoji-Ausbruch mittig im Fenster. */
.hifive-burst{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.3);font-size:90px;line-height:1;
pointer-events:none;z-index:500;animation:hifive-pop 3.4s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes hifive-pop{
0%{transform:translate(-50%,-50%) scale(.2) rotate(-15deg);opacity:0}
9%{transform:translate(-50%,-50%) scale(1.15) rotate(6deg);opacity:1}
16%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
45%{transform:translate(-50%,-53%) scale(1.04) rotate(-3deg);opacity:1}
70%{transform:translate(-50%,-50%) scale(1) rotate(3deg);opacity:1}
100%{transform:translate(-50%,-62%) scale(.9) rotate(0);opacity:0}
}
/* ============ Good News teilen (core/goodnews.js) ============ */
.goodnews-fab{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;
background:var(--grad-btn);border:none;font-size:24px;cursor:pointer;z-index:150;
box-shadow:0 10px 26px rgba(23,52,95,.32);display:flex;align-items:center;justify-content:center;
transition:transform .15s}
.goodnews-fab:hover{transform:scale(1.08) rotate(-6deg)}
/* Fliegt rein, bleibt eine Weile lesbar stehen, fliegt dann raus - erst
zu schnell ("fliegt viel zu schnell"), dann auf Wunsch nochmal länger
stehend (18s, Rafael 2026-09-19: "lass die good news länger da
stehen"). Dauer hier UND der setTimeout-Cleanup in
showGoodNewsFlyby() (goodnews.js) müssen zusammenpassen. */
.goodnews-fly{position:fixed;top:70px;right:-45%;left:auto;width:max-content;max-width:min(78vw,480px);
display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);
border-right:4px solid var(--brand);border-radius:999px;padding:11px 16px 11px 18px;
box-shadow:0 14px 34px rgba(23,52,95,.28);font-size:14px;color:var(--text);z-index:600;
animation:goodnews-flyby 18s cubic-bezier(.22,.7,.3,1) forwards}
.goodnews-emoji{font-size:20px;flex:0 0 auto}
.goodnews-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goodnews-txt b{font-weight:800}
/* Reaktions-Buttons - nur bei fremden Nachrichten (siehe showGoodNewsFlyby()). */
.goodnews-reacts{flex:0 0 auto;display:flex;gap:3px;margin-left:2px}
.goodnews-react{border:none;background:var(--chip-bg);border-radius:50%;width:26px;height:26px;font-size:13px;
cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s;padding:0}
.goodnews-react:hover{transform:scale(1.2)}
.goodnews-react:disabled{opacity:.5;cursor:default;transform:none}
@keyframes goodnews-flyby{
0%{right:-45%;opacity:0}
6%{right:6%;opacity:1}
92%{right:6%;opacity:1}
100%{right:110%;opacity:0}
}
@media (max-width:520px){
.goodnews-fly{max-width:88vw}
.goodnews-fab{right:16px;bottom:16px;width:48px;height:48px;font-size:20px}
}
/* Vorgefertigte Good News (Schnellauswahl im Dialog, teilt auf Klick
sofort - siehe GOODNEWS_PRESETS/openGoodNewsComposer() in goodnews.js). */
.goodnews-presets{display:flex;flex-direction:column;gap:7px}
.goodnews-preset{text-align:left;border:1px solid var(--border);background:var(--card);border-radius:var(--r-md);
padding:10px 13px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;
transition:all .12s}
.goodnews-preset:hover{border-color:var(--brand);background:var(--brand-soft)}
/* ============ Tagesstimmung (core/mood.js) ============ */
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mood-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;
border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);cursor:pointer;
font:inherit;font-size:12.5px;font-weight:650;color:var(--text);transition:all .13s}
.mood-opt:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px)}
.mood-emoji{font-size:28px}
/* Eigene Stimmungen (immer 6 Kacheln, core/mood.js) - belegte mit
Stift (Bearbeiten) + "x" (Entfernen) oben rechts, leere als "+" mit
gestricheltem Rahmen. Rafael, 2026-09-24: "6 Kacheln zum selber
definieren ... ändern, anlegen und löschen ... per Klicken und
Popup mit Edit-Button und Löschen-Button". */
.mood-opt-custom{position:relative}
.mood-opt-edit,.mood-opt-del{position:absolute;top:4px;width:18px;height:18px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--muted);
font-size:13px;line-height:1;border:1px solid var(--border)}
.mood-opt-edit{right:24px}
.mood-opt-del{right:4px}
.mood-opt-edit:hover{background:var(--brand-soft);color:var(--brand-dark);border-color:transparent}
.mood-opt-del:hover{background:var(--danger);color:#fff;border-color:transparent}
.mood-opt-add{border-style:dashed;color:var(--muted)}
.mood-opt-add .mood-emoji{font-weight:800;color:var(--brand)}
/* Formular fürs Anlegen/Bearbeiten einer eigenen Stimmung - die
Emoji-Palette (Suche + Raster + Kategorien) sitzt jetzt DIREKT im
Formular statt hinter einem zweiten Klick versteckt. Rafael,
2026-09-24: "die Emoji-Palette soll auch erst mit dem Popup kommen
... Popup beim Klicken von + und dann auswählen und speichern". */
.mood-custom-form{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--tint)}
.mood-custom-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.mood-custom-preview{flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-md);background:var(--card);
display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid var(--border)}
.mood-custom-form input#moodCustomLabel{flex:1 1 auto;min-width:0;padding:9px 11px;border:1px solid var(--border);
border-radius:var(--r-md);font-size:16px;color:var(--text);background:var(--card)}
.emoji-pick-search input{width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-sm);
font-size:16px;color:var(--text);background:var(--card);margin-bottom:8px}
.emoji-pick-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:180px;overflow-y:auto;
padding:2px;background:var(--card);border-radius:var(--r-sm)}
.emoji-pick-item{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
font-size:18px;border:none;background:none;border-radius:var(--r-sm);cursor:pointer;padding:0}
.emoji-pick-item:hover{background:var(--tint)}
.emoji-pick-empty{grid-column:1/-1;text-align:center;font-size:12.5px;padding:14px}
.emoji-pick-cats{display:flex;gap:2px;overflow-x:auto;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.emoji-pick-cat{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
font-size:15px;border:none;background:none;border-radius:var(--r-sm);cursor:pointer;opacity:.55}
.emoji-pick-cat:hover{background:var(--card);opacity:1}
.emoji-pick-cat.on{background:var(--brand-soft);opacity:1}
.mood-custom-actions{display:flex;gap:8px;margin-top:10px}
.teammood-row{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:10px}
/* Feste statt maximaler Breite - sonst schiebt ein langer Name (z.B.
"Christoph") die Box breiter als ein kurzer ("Max"), wodurch die
Avatare trotz gleichem gap ungleichmäßig auseinanderstehen. Rafael,
2026-09-20: "Abstände bitte gleich". */
.teammood-chip{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;
color:var(--muted);font-weight:650;width:64px;flex:0 0 64px;text-align:center}
/* Gleiche Bildsprache wie die Ticket-Präsenz-Kacheln (.tkpresence-av
weiter oben) - dasselbe Schatten-/Hover-/Live-Punkt-Muster, nur
größer, weil hier die einzige Kachel statt eines Stapels ist.
Rafael, 2026-09-19: "im gleichen Style, dass es zusammenpasst".
Rafael, 2026-09-20: zeigt jetzt das Profilbild (avatar(), core/util.js)
statt der Stimmungs-Emoji - die Emoji wandert stattdessen als kleines
Extra-Badge unten an die Seite ("eher so unten an die Seite dran"),
Status-Punkt bleibt auf der anderen Seite. */
.teammood-avwrap{position:relative;display:inline-flex}
.teammood-av{width:42px;height:42px;font-size:19px;font-weight:800;box-shadow:0 2px 6px rgba(23,52,95,.18);transition:transform .12s}
/* Online-Status-Punkt (Da/Pause) am Avatar - siehe appPresenceState in
core/mood.js, "im Stimmungsboard gleich den Status anzeigen". */
.teammood-status{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;
border:2.5px solid var(--card)}
.teammood-status-da{background:var(--ok)}
.teammood-status-pause{background:var(--warn)}
.teammood-mood{position:absolute;left:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:var(--card);
display:flex;align-items:center;justify-content:center;font-size:12.5px;box-shadow:0 1px 4px rgba(23,52,95,.25);
border:2px solid var(--card)}
/* Eigener Tooltip statt natives title (siehe mood.js) - garantiert
sichtbar, unabhängig von Verschachtelung/Browser-Eigenheiten. */
.teammood-mood[data-tip]{cursor:default}
.teammood-mood[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
transform:translateX(-50%) translateY(4px);background:var(--brand-dark);color:#fff;font-size:11.5px;font-weight:700;
white-space:nowrap;padding:5px 9px;border-radius:var(--r-sm);box-shadow:0 4px 12px rgba(23,52,95,.28);
opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:60}
.teammood-mood[data-tip]::before{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(2px);
border:5px solid transparent;border-top-color:var(--brand-dark);opacity:0;pointer-events:none;transition:opacity .12s;z-index:60}
.teammood-mood[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.teammood-mood[data-tip]:hover::before{opacity:1}
/* Doppelklick aufs eigene Bild öffnet die Stimmungsauswahl - der
Status-Punkt selbst bleibt reine Anzeige, nicht mehr per Klick
umschaltbar. Rafael, 2026-09-24: "der [Status-Punkt] muss nicht
änderbar sein durch klicken .. Doppelklick aufs Bild öffnet die
Emoji-Auswahl". */
.teammood-avwrap[data-moodself]{cursor:pointer}
.teammood-avwrap[data-moodself]:hover{transform:translateY(-2px) scale(1.06)}
/* Fakten-Zeile jetzt als Kachel-Raster statt schmaler Label/Wert-Paare -
jede Kachel mit leichtem Farbton + eigenem Icon, deutlich schneller
erfassbar als reiner Fließtext (Rafael, 2026-09-20: "mehr Grafik,
Wichtiges hervorheben"). Editierbare Werte (Input/Select) sitzen
unverändert in derselben Kachel wie sonst der -Wert. */
.dfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--tk-gap,18px);margin-top:var(--tk-gap,18px)}
.dtile{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--tint);border-radius:var(--r-md);padding:10px 13px}
/* Gewerk/Handwerker-Zeile im Ticket: Kacheln bleiben schmal statt sich
über die ganze Zeile zu strecken - Rafael, 2026-09-27: "die in Zeile 2
auch schmaler machen, dann haben wir künftig noch Platz für eine
dritte". */
.dfacts-tight{grid-template-columns:repeat(auto-fit,minmax(148px,max-content))}
/* Frist-Kachel: Erstellt/Fällig/Timer untereinander, rechts am Rand der
Faktenzeile. */
.dfacts:has(.dtile-frist){display:flex;flex-wrap:wrap}
.dfacts:has(.dtile-frist)>.dtile{flex:1 1 148px}
.dfacts>.dtile-frist{flex:0 0 auto;margin-left:auto;min-width:210px}
.frist-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px}
.frist-row>span{font-size:12px;font-weight:600;color:var(--muted)}
.frist-row>b,.frist-row>.dfacts-date-input{width:auto;text-align:right}
.dtile-lbl{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;text-transform:uppercase;
letter-spacing:.5px;color:var(--muted)}
.dtile-lbl svg{width:13px;height:13px;flex:0 0 auto;opacity:.85}
.dtile b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtile select,.dtile .att-tag{width:100%}
.dfacts-date-input{border:1px solid transparent;background:none;font:inherit;font-weight:700;font-size:16px;
color:var(--text);text-align:left;padding:0;border-radius:var(--r-sm);cursor:pointer;font-family:inherit;width:100%}
.dfacts-date-input:hover{border-color:var(--border);background:var(--card)}
.dfacts-date-input:focus{outline:none;border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px rgba(148,199,249,.18)}
.dfacts-date-input.late{color:var(--danger)}
/* Beschreibung ist die wichtigste Info im Ticket: etwas größer und leicht fett. */
.tkdesc{margin-top:var(--tk-gap,18px);padding:14px 16px;background:var(--tint);border-radius:var(--r-md);font-size:15.5px;font-weight:600;line-height:1.55;white-space:pre-wrap;cursor:text}
.tkdesc.empty{color:var(--muted);font-style:italic;cursor:text}
.tkdesc-edit{display:block;width:100%;min-height:90px;margin-top:var(--tk-gap,18px);font:inherit;font-size:15.5px;font-weight:600;line-height:1.55;
border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;resize:vertical;font-family:inherit;color:var(--text)}
.tkdesc-edit:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(148,199,249,.18)}
/* Aktionsbuttons (ticketrun.js, tkRunAction()) - Icon jetzt in einer
eigenen getönten Kapsel statt einfach nur als kleines Symbol vorm
Text, plus dezenter "Lift" beim Hovern, damit die Buttons als
eigenständige, klickbare Aktionen wirken statt als reiner Fließtext
mit Symbol davor. Rafael, 2026-09-20: "mehr Grafik, leichte Schatten". */
.tkactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tkactions .btn{padding:8px 16px 8px 8px;border-radius:var(--r-md);gap:10px}
.tkactions .btn svg{width:16px;height:16px;background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--r-sm);
padding:6px;box-sizing:content-box}
.tkactions .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(23,52,95,.14);border-color:var(--border)}
/* Gemeinsame Aktions-Kachel: eine Zeile je Kategorie, farbiges Label links. */
.tkactions-tile{margin-top:var(--tk-gap,18px);background:var(--tint);border-radius:var(--r-md);padding:2px 12px;display:flex;flex-direction:column}
.tkact-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--divider)}
.tkact-row:first-child{border-top:none}
.tkact-lbl{flex:0 0 96px;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;
text-transform:uppercase;letter-spacing:.5px;color:var(--cat)}
.tkact-dot{width:7px;height:7px;border-radius:50%;background:var(--cat);flex:0 0 auto}
.tkact-btns{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.tkact-btns .btn{padding:3px 10px 3px 4px;border-radius:var(--r-sm);gap:6px;font-size:12.5px;font-weight:650;line-height:1.2}
.tkact-btns .btn svg{width:12px;height:12px;box-sizing:content-box;padding:4px;border-radius:var(--r-sm);
background:color-mix(in srgb,var(--cat) 16%,var(--card));color:var(--cat)}
.tkact-btns .btn:hover{transform:translateY(-1px);border-color:var(--cat);box-shadow:0 4px 10px rgba(23,52,95,.12)}
@media (max-width:640px){.tkact-row{flex-direction:column;align-items:flex-start;gap:4px}.tkact-lbl{flex:0 0 auto}}
.tkinv-list{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.tkinv-item{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--card);
border-radius:var(--r-md);padding:9px 13px;font:inherit;font-size:13.5px;font-weight:650;color:var(--text);
cursor:pointer;text-align:left;transition:border-color .13s}
.tkinv-item:hover{border-color:var(--brand)}
.tkinv-item svg{flex:0 0 auto;width:16px;height:16px;color:var(--muted)}
.tkinv-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.setrow .lbl{font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
width:92px;flex:0 0 auto}
.pick{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:var(--r-md);
padding:7px 13px;font-size:13.5px;font-weight:650;color:var(--text);cursor:pointer;transition:all .13s}
.pick:hover{border-color:var(--brand)}
.pick.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 14px rgba(148,199,249,.3)}
.pick .av{width:22px;height:22px;font-size:10px}
.pick.on .av{box-shadow:0 0 0 2px var(--card)}
.pick .d{width:10px;height:10px;border-radius:50%}
.pick-select{border:1px solid var(--border);background:var(--card) url('data:image/svg+xml;utf8,') no-repeat right 12px center/15px 15px;
border-radius:var(--r-md);padding:8px 34px 8px 13px;font-size:16px;font-weight:650;color:var(--text);cursor:pointer;
-webkit-appearance:none;appearance:none;min-width:220px;max-width:100%}
.pick-select:hover{border-color:var(--brand)}
.pick-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(148,199,249,.18)}
.tk-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px 20px}
.tk-field label{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tk-field-wide{grid-column:1/-1}
.tk-pickrow{display:flex;flex-wrap:wrap;gap:8px}
.tk-field>.pick,.tk-field>.pick-select{width:100%;min-width:0}
.fielddd{position:relative}
.fielddd-btn{width:100%;display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--card);
border-radius:var(--r-md);padding:7px 10px;cursor:pointer;font-size:13.5px;font-weight:650;color:var(--text);transition:border-color .13s}
.fielddd-btn:hover{border-color:var(--brand)}
.fielddd-btn .cv{margin-left:auto;flex:0 0 auto;color:var(--muted)}
.fielddd-btn .av{width:22px;height:22px;font-size:10px;flex:0 0 auto}
.fielddd-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fielddd-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.fielddd-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--card);
border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 14px 34px rgba(23,52,95,.16);padding:6px;
max-height:280px;overflow-y:auto;display:none}
.fielddd-menu.open{display:block}
/* Ohne width/height-Attribut rendert ein