/* ═══════════════════════════════════════════════════════════════ NEVANU — iOS-Grouped Design-Sprache (Teil 32, 2026-07-19) ═══════════════════════════════════════════════════════════════ Zweck: Setzt Stefans Design-Referenz um (iOS-Finanz-App-Screenshots): grauer System-Grund, reinweisse Karten-GRUPPEN („Inseln") mit 24px-Radius, Kreis-Icon-Buttons, Pill-Chips, Icon-Kreis-Zeilen, grosse Zahlen, FAB. Accent bleibt Nevanu-Pink (--k-brand) — Brand wechselt NICHT. Wann geladen: index.php als LETZTES Stylesheet (nach nv-consistency.css) — bewusste Kaskaden-Position statt verstreuter !important-Overrides. Farb-/Radius-WERTE kommen ausschliesslich aus den Tokens (css/keeva-ui.css @layer themes + css/design-tokens.css) — hier stehen nur Komponenten-STRUKTUREN. Native-App-Mapping: docs/DESIGN-SYSTEM.md. Bausteine: 1. Karten-Basis (nv-card / section-card / nv-card-ds) → weisse Insel 2. .nv-group + .nv-row — gruppierte Listen (Icon-Kreis, Titel/Sub, Wert) 3. .nv-circle-btn — runde Icon-Buttons (Back/Close/Check/…) 4. .nv-fab — Floating Action Button (Accent-Kreis) 5. .nv-pill-chip — Pill-Chips (neutral + accent) 6. .nv-segment — Segmented-Control als Voll-Pill 7. .nv-bigstat — grosse Kennzahl (Hero-Summe) 8. Sheets/Search — 28px-Top-Radius, Such-Pill ═══════════════════════════════════════════════════════════════ */ /* ── 1. Karten-Basis: solide weisse Insel, kein Rand, 24px ── */ /* ── 2. Gruppierte Liste — die „Insel mit Zeilen" aus der Referenz ── */ .nv-group { background: var(--k-surface-solid); border-radius: var(--nv-r-card, 24px); overflow: hidden; margin-bottom: var(--nv-s4); } [data-theme="light"] .nv-group { border: 1px solid var(--k-border); box-shadow: var(--k-shadow-sm); } [data-theme="dark"] .nv-group { border: 1px solid var(--k-border); } /* `.nv-row` (+ Nachbar-Trennlinie, :active, --static) steht seit D-11 im §BAUKASTEN (system.css, Familie ZEILE). */ .nv-row-icon { width: var(--nv-icon-circle, 40px); height: var(--nv-icon-circle, 40px); border-radius: 50%; background: var(--k-fill); color: var(--k-text2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nv-row-icon .material-symbols-rounded, .nv-row-icon .material-symbols-outlined { font-size: 20px; } .nv-row-icon--accent { background: var(--k-brand-light, rgba(var(--k-brand-rgb), .14)); color: var(--nv-akzent-aktiv); } .nv-row-main { flex: 1; min-width: 0; } .nv-row-title { font-size: .95rem; font-weight: var(--nv-fw-semibold, 600); color: var(--k-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nv-row-sub { font-size: var(--k-fs-caption); color: var(--k-text3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nv-row-value { font-size: .95rem; font-weight: var(--nv-fw-bold, 700); color: var(--k-text); flex-shrink: 0; font-variant-numeric: tabular-nums; } .nv-row-value--neg { color: var(--nv-red, #e53e3e); } .nv-row-chevron { color: var(--k-text4); font-size: 20px; flex-shrink: 0; } /* Sektions-Header über einer Gruppe (Datum/Kategorie links, Summe rechts) */ .nv-group-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--nv-s1) var(--nv-s2) var(--nv-s2); } .nv-group-head-title { font-size: var(--k-fs-hervor); font-weight: var(--nv-fw-bold, 700); color: var(--nv-akzent-aktiv); } .nv-group-head-title small { font-size: var(--k-fs-caption); color: var(--k-text3); font-weight: var(--nv-fw-medium, 500); margin-left: var(--nv-s1); } /* ── 1b. Legacy-!important-Gegen-Overrides (style.css „Glassmorphism"-Block setzt theme-lose Dark-Werte) — Light bekommt hier die Insel-Werte. !important nur, weil die Altlast selbst !important nutzt; dieser Layer lädt als letzter. ── */ [data-theme="light"] body.k-ui .k-neon-card, [data-theme="light"] body.k-ui .k-home-today-card { background: var(--k-surface-solid) !important; border: none !important; box-shadow: var(--k-shadow-sm) !important; } /* ── 2b. Bestehende renderListRow-Listen (.nv-list-row, 11 Module) werden automatisch zur weissen Insel: zusammenhängende Zeilen-Läufe bekommen oben/unten Rundung via :has() — kein Markup-Umbau nötig. ── */ .nv-list-row { background: var(--k-surface-solid); padding: var(--nv-s3) var(--nv-s4); border-radius: var(--nv-r-card, 24px); border-bottom: none; box-shadow: var(--k-shadow-sm); } .nv-list-row + .nv-list-row { border-top-left-radius: 0; border-top-right-radius: 0; } .nv-list-row:has(+ .nv-list-row) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--k-border); } [data-theme="dark"] .nv-list-row { background: var(--k-surface-solid); } /* ── 3. Runde Icon-Buttons (Back/Close/Check/Mehr) ── */ .nv-circle-btn { width: var(--nv-circle-btn, 44px); height: var(--nv-circle-btn, 44px); border-radius: 50%; border: none; background: var(--k-surface-solid); color: var(--k-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: transform var(--nv-dur-fast, .15s), background var(--nv-dur-fast, .15s); } [data-theme="light"] .nv-circle-btn { box-shadow: var(--k-shadow-sm); } [data-theme="dark"] .nv-circle-btn { background: var(--k-surface-elevated); border: 1px solid var(--k-border); } .nv-circle-btn:active { transform: scale(.94); background: var(--k-fill-hover); } .nv-circle-btn .material-symbols-rounded, .nv-circle-btn .material-symbols-outlined { font-size: var(--k-fs-titel); } /* ── 4. FAB — runder Accent-Button unten rechts ── */ .nv-fab { width: var(--nv-fab-size, 56px); height: var(--nv-fab-size, 56px); border-radius: 50%; border: none; background: var(--k-brand); color:var(--k-text-auf-marke); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--nv-gradient-glow, 0 4px 24px rgba(var(--k-brand-rgb), .28)); -webkit-tap-highlight-color: transparent; transition: transform var(--nv-dur-fast, .15s); } .nv-fab:active { transform: scale(.94); } .nv-fab .material-symbols-rounded { font-size: 26px; } /* ── 5. Pill-Chips ── */ /* ── 6. Segmented-Control — UMGEZOGEN 2026-08-03 ────────────────────────── Hier stand eine zweite `.nv-segment`-Definition (gefuellte Pillen-Leiste mit `.nv-segment-btn`). Sie wurde von keiner einzigen Stelle benutzt — und sie kollidierte mit dem Bauteil, das am 2026-08-03 gebaut wurde: die neue Reihe erbte still ihren rosa Hintergrund und den vollen Radius. Genau dieselbe Krankheit wie bei `.nv-btn`, das in drei Dateien stand. Das Aussehen ist nicht verloren: es lebt als `.nv-segment--voll` in css/design-system.css weiter, dort, wo das Bauteil hingehoert. */ /* ── 7. Grosse Kennzahl (Hero-Summe wie „CHF-97'725.65") ── */ /* ── 8. Sheets + Suche: grosszügige Rundungen wie die Referenz ── */ .bottom-sheet { border-radius: var(--nv-r-xl, 28px) var(--nv-r-xl, 28px) 0 0; } [data-theme="light"] .bottom-sheet { background: var(--k-bg2) !important; } /* `.nv-searchbar` ist hier RAUS (E3, 2026-09-01) — das Suchfeld ist der Katalog-Baustein `.nv-suchfeld` (css/system.css §2), ohne Themenregel. */ /* Formular-Felder in weissen Karten: grauer Fill statt Rahmen (iOS-Look) */ /* `.nv-select` ist hier RAUS (2026-08-29): sie steht im Katalog (system.css §20) und wurde hier ein zweites Mal gestellt — mit `border-radius`, also mit STRUKTUR in einer Themen-Regel. Der Kanon laesst im Thema nur Farbe, Schatten, Deckkraft und Filter zu. `.nv-textarea` und `.k-input` bleiben, sie sind noch nicht dran. */ [data-theme="light"] .nv-textarea, [data-theme="light"] .k-input { background: var(--k-fill); border-color: transparent; border-radius: var(--nv-r-sm, 14px); } [data-theme="light"] .nv-textarea:focus, [data-theme="light"] .k-input:focus { background: var(--k-surface-solid); border-color: var(--k-brand); } /* ── 9. Kalender: Datumszeile ────────────────────────────────────────── Steht seit 2026-08-02 in css/kalender-kopf.css. */ /* ── 10. Kalender edge-to-edge mobil (Teil 38, Stefan: „viel verschenkter Platz, Kalender nur 2/3 vom Screen") — Raster läuft randlos, Zeitachse schmaler; der Kopf behält normale Ränder. ── */ @media (max-width: 1023px) { #kal-hscroll { margin-left: calc(-1 * var(--nv-s4)); margin-right: calc(-1 * var(--nv-s4)); } } /* ── 11. Mobile Sidebar-Drawer + Tab-Bar-Auto-Hide (Teil 38) ── */ @media (max-width: 1023px) { body.sidebar-drawer-open .nv-sidebar { display: flex !important; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); z-index: var(--z-navigation); background: var(--k-surface-solid); border-radius: 0 24px 24px 0; box-shadow: 24px 0 80px rgba(0, 0, 0, .22); overflow-y: auto; padding-bottom: calc(16px + var(--nv-sockel-unten)); animation: nvDrawerIn .28s cubic-bezier(.32,.72,0,1); } @keyframes nvDrawerIn { from { transform: translateX(-40px); opacity: .4; } to { transform: none; opacity: 1; } } } .nv-sidebar-backdrop { position: fixed; inset: 0; background: rgba(20, 16, 14, .42); z-index: var(--z-navigation-hinter); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .nv-sidebar-backdrop.active { opacity: 1; pointer-events: auto; } /* ── 12. Kalender vertikal verdichtet + Pill ersetzt (Teil 39) ── Stefan: „2/3 vom Kalenderscreen nicht Kalender" + „Pill-Design überdenken". Mobile: Pfeile raus (Wischen wechselt den Tag), Wetter raus, Datum einzeilig, Chips flacher, Team-Kopf ohne Zeit-Zeile. Die Bottom-Pill weicht zwei Floating-Buttons: Menü (links, öffnet Drawer) + Aktion (+, rechts). */ @media (max-width: 1023px) { /* Datumszeile: steht seit 2026-08-02 in css/kalender-kopf.css. */ /* Team-Kopf: Zeit-/Frei-Zeile weg, enger */ .kal-col-header .kal-col-person > div:nth-child(3) { display: none; } .kal-col-header .kal-col-person { padding: 2px 2px 3px !important; } /* Pill weg — ersetzt durch die zwei Floating-Buttons */ body { --nv-tab-bar-h: 0px; } } #nv-menu-fab, #nv-ai-fab { position: fixed; bottom: calc(16px + var(--nv-sockel-unten)); z-index: var(--z-schwebend); width: 54px; height: 54px; border-radius: 50%; border: none; display: none; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, opacity .25s ease; } #nv-menu-fab { left: 16px; background: var(--k-surface-solid); color: var(--k-text); box-shadow: var(--k-shadow-md); border: 1px solid var(--k-border); } #nv-ai-fab { right: 16px; background: linear-gradient(135deg, #F27182, #E05A6B); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); } #nv-menu-fab .material-symbols-rounded { font-size: 26px; } #nv-ai-fab .material-symbols-rounded { font-size: 26px; color: var(--k-text-auf-marke); } #nv-menu-fab:active, #nv-ai-fab:active { transform: scale(.92); } @media (max-width: 1023px) { #nv-menu-fab, #nv-ai-fab { display: flex; } } /* Hamburger oben links: nur mobil sichtbar; im Drawer ist der Desktop-Collapse-Toggle versteckt (X oben links uebernimmt) */ @media (max-width: 1023px) { body.sidebar-drawer-open { overflow: hidden; } body.sidebar-drawer-open .nv-sidebar .nv-sidebar-toggle { display: none !important; } body.sidebar-drawer-open .nv-sidebar { padding-top: max(10px, var(--nv-sockel-oben)); } } /* ============================================================ §13 — TEIL 45 (Stefan 2026-07-31): (a) Nur EIN KI-Button: der alte "N."-FAB (#k-ai-fab) ist tot — Killswitch, falls ihn eine alte Codepath doch noch rendert. (b) Profil-Hero kompakt solange kein Hintergrundbild gesetzt ist (kein riesiger Beige-/Dunkel-Gradient mehr). Mit Bild wird profil-hero--empty per JS entfernt → voller Bild-Hero. ============================================================ */ #k-ai-fab, .k-ai-fab { display: none !important; } .profil-hero--aiden.profil-hero--empty, body.k-ui .profil-hero--aiden.profil-hero--empty { min-height: 0 !important; height: calc(64px + var(--nv-sockel-oben)); } .profil-hero--empty .profil-hero-bg-img { background: transparent !important; } .profil-hero--empty .profil-hero-gradient-overlay, .profil-hero--empty .profil-hero-initial { display: none !important; } /* Basis-Gradient (sichtbar nur kurz waehrend Bild laedt): Rosé statt Beige */ .profil-hero-bg-img { background: linear-gradient(160deg, var(--k-bg3, #fce8eb) 0%, var(--k-fill, #f4e4e7) 100%) !important; } [data-theme="dark"] .profil-hero-bg-img { background: linear-gradient(160deg, #1a1216 0%, #0a0a0a 100%) !important; } /* Kompakter Hero: Glass-Buttons (Wallpaper/X) auf hellem Grund → Standard-Kreis-Button-Optik statt Dunkel-Glass mit weissem Icon */ .profil-hero--empty .profil-hero-glass-btn { background: var(--k-fill2, rgba(0,0,0,.08)); } .profil-hero--empty .profil-hero-glass-btn .material-symbols-rounded { color: var(--k-text) !important; } /* §14 — Site-Kontext-Badge im Modul-Header (Teil 46): kleiner Chip unter dem Titel der Website-Module ("nevanu.ch") */ .k-mh-site { display: inline-flex; align-items: center; gap: var(--nv-s1); margin-top: 2px; padding: var(--nv-s1) var(--nv-s3); /* Nacht 3 (07.09.2026, Punkt 4): 9999px war die Kapsel — Token-Treffer, gleiches Bild. */ border-radius: var(--nv-r-kapsel); background: rgba(var(--k-brand-rgb), .1); color: var(--k-brand); font-size: var(--k-fs-caption); font-weight: 700; letter-spacing: .02em; width: fit-content; margin-left: auto; margin-right: auto; } /* ============================================================ §15 — KUNDENPROFIL (Teil 47, Stefan: "komplett zerschossen"). EINE kanonische Definition — schlaegt die drei historischen kp-action-btn-Varianten (style.css Basis, style.css k-ui, keeva-ui k-ui-scope) via Kaskaden-Position + !important. Vorgabe: Kreis-Button (Icon) + Label darunter, wie Referenz-App. Teil 54: Selektoren auf body.k-ui-Spezifität angehoben — style.css hat body.k-ui .kp-action-btn (0,1,1) !important; gleiche Spezifität + spätere Kaskaden-Position = diese Definition gewinnt sicher. ============================================================ */ /* ⚠ `.kp-actions` STAND HIER — raus 2026-08-31 (Paket D, D1 Team/HR). Sie war vierfach ausgefuehrt (zweimal style.css, hier, plus ein ID-Uebersteuerer im Mitarbeiterprofil) fuer einen einzigen Aufrufer. Die eine Fassung steht jetzt in css/system.css §32e. */ body.k-ui .kp-action-btn, .kp-action-btn { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 7px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; border-radius: 0 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; } .kp-ab-circle { width: 54px; height: 54px; border-radius: 50%; background: var(--k-surface-solid, var(--nv-flaeche-erhoben)); box-shadow: var(--k-shadow-sm, 0 2px 8px rgba(0,0,0,.08)); border: 1px solid var(--k-border, rgba(0,0,0,.06)); display: flex; align-items: center; justify-content: center; } .kp-ab-circle .material-symbols-rounded { font-size: 24px; color: var(--k-brand, #F27182) !important; } .kp-ab-label { font-size: var(--k-fs-caption); font-weight: 600; color: var(--k-text, #1c1b1f); white-space: nowrap; } .kp-action-btn:active .kp-ab-circle { transform: scale(.92); } /* Profil-Tabs: EINE horizontale Chip-Reihe, kein Umbruch, kein Grau-Blob */ /* ⚠ GEMESSEN 2026-08-30 in der echten Ansicht (390 px): sichtbar 390 px, tatsaechlich 998 px — **608 px hingen ohne jedes Zeichen rechts raus**. Dazu begann die Leiste bei x=0, waehrend der Inhalt darunter bei 24 px beginnt; der erste Chip klebte am Bildschirmrand. Drei Aenderungen, alle aus Stefans Anweisung: a) Verlauf an beiden Raendern, damit sichtbar ist, dass es weitergeht. Er sitzt am ELTERN-Element (`.k-tabs-huelle`), nicht an der Leiste selbst — ein Verlauf auf einem scrollenden Kasten scrollt mit und waere nach dem ersten Wisch an der falschen Stelle. b) Seitenrand wie der Inhalt darunter: `--nv-s5` (24 px), nicht 18. Der Rand steht als Polsterung IN der Leiste, damit der erste Chip beim Scrollen unter dem Verlauf hindurchwandert statt abzuschneiden. c) Abstaende nur noch auf Stufen: `--nv-luft-3` oben (Abschnitt), `--nv-luft-1` unten (innerhalb), `--nv-luft-1` zwischen den Chips. */ /* ⚠ ENTFERNT 2026-08-30 — die Reiter scrollen nicht mehr. Hier stand die scrollende Reiterleiste des Kundenprofils: neun Ausdruecke `display:flex !important`, `overflow-x:auto !important`, `scroll-padding-inline` und eine ausgeblendete Bildlaufleiste. Sie ist mit dem Raster (`css/system.css` §32) gegenstandslos geworden — die neun Reiter stehen jetzt in 3x3 und laufen nicht mehr seitlich weiter. Eine Regel mit `display:flex !important` haette das Raster still ueberstimmt: das Bauteil waere im Katalog gestanden und auf dem Bildschirm nicht erschienen. 9 × !important weniger. */ /* ⚠ HIER STANDEN ZWEI REGELN, die den globalen `.k-tab` Wort fuer Wort wiederholten — mit `!important`, damit sie gewinnen. Eine zweite Ausfuehrung desselben Bauteils (Katalog-Pflicht). Sie sind am 2026-08-30 ersatzlos entfallen; die globale Regel gilt jetzt auch hier. Genau diese Kopie war der Grund, warum die Korrektur der Chip-Schrift (14,4 -> 14,08) im Profil nichts bewirkte: sie stand in der Kopie noch einmal drin. 9 `!important` weniger. */ /* ============================================================ §16 — TEIL 49: HEADER-TAPS ZUVERLÄSSIG. Root-Cause (Playwright-Beweis): der Modul-Header klebte an der Viewport-Oberkante — Taps in den obersten ~20px verschluckt WebKit als Statusbar-/Scroll-to-top-Zone (Back "ging nicht", Titel-Tap "passierte nichts", ⋯ erst beim 2. Versuch). Fix: Abstand nach oben (+ safe-area) und volle 44px-Hit-Areas für Back/Titel/⋯. ============================================================ */ /* ⚠ DIE KERBE DARF HIER NUR ZAEHLEN, WENN SIE NICHT SCHON GEZAEHLT WURDE. * (Stefan 2026-08-21: „Oben header stimmt nicht zu weit alles unten. * Zwischen top von screen und datum.") * * `body.k-ui` (css/style.css, „SAFE AREA TOP") legt bereits * `padding-top: var(--nv-sockel-oben)` an — der ganze Inhalt steht damit * schon unterhalb der Kerbe. Diese Regel addierte sie ein ZWEITES Mal. * Gemessen auf 390x844 mit 59 px Kerbe (tools/ui-vorschau.cjs plus * Nachmessung): Kopfzeile 115 px statt 56, nutzbares Raster 610 px statt * 669 — 59 px Kalender weg, bei diesem Zoom rund eine Stunde. Auf dem * Bildschirm ohne Kerbe faellt es nicht auf, weil dort beide Terme 0 sind; * genau deshalb ist es so lange unbemerkt geblieben. * * Der urspruengliche Zweck der Regel bleibt erhalten: sie war dagegen da, * dass die Kopfzeile an der Oberkante klebt und WebKit die obersten ~20 px * als Statusleisten-Zone verschluckt. Steht der Inhalt bereits unter der * Kerbe, ist das ohnehin nicht mehr der Fall — die 12 px genuegen. Fuer * Ansichten OHNE `body.k-ui` bleibt der alte Wert unveraendert stehen. */ /* §17 — Teil 50: Profil in der Sheet-Karte. Die Masse des Titelbilds stehen seit 2026-08-02 in css/system.css. Hier standen sie mit `!important` — und haben jede spaetere Korrektur ausgehebelt, auch die, die Stefan angefordert hat („vollflächig … die ganze karte oben füllen"). Ein `!important` an dieser Stelle war nie noetig; es hat nur verhindert, dass die Regel je wieder verbessert werden konnte. */ .profil-hero--insheet .profil-hero-float-actions { top: 0; right: 0; } /* Im Sheet: Hero-X (ging auf navTo home) ueberfluessig — Sheet schliesst selbst */ .profil-hero--insheet .profil-hero-glass-btn:last-child { display: none; } /* ============================================================ §18 — TEIL 51: Chat + Telefon = Rest-UX. (a) Panels sehen aus wie normale Screens (Rosé-Grund statt weissem Milchglas-Overlay) — "stimmt nicht mit Rest überein". (b) Chat: Kanal-Chips + Insel-Liste (ersetzt WhatsApp-Alt-Look, fixiert die Riesen-/abgeschnittenen Avatare hart auf 44px). (c) Telefon: Anruf/Loeschen als runde Buttons. ============================================================ */ /* D-14 (2026-09-06): die zwei `background … !important`-Zeilen hier sind RAUS — sie kamen nie an (`body.k-ui .nv-panel` in css/system.css §10 gewinnt nach Spezifitaet, gemessen `--k-bg`). Der Grund (a) von Teil 51 — «Panels sehen aus wie normale Screens, Rosé-Grund» — wird jetzt von der Katalog-Variante `.nv-panel--rose` eingeloest (system.css §BAUKASTEN). */ [data-theme="light"] .nv-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="dark"] .nv-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Chat: Kanal-Tabs als Chip-Reihe */ .k-chat-channel-tabs { display: flex !important; gap: var(--nv-s2); padding: 10px 18px !important; overflow-x: auto; scrollbar-width: none; background: transparent !important; border: none !important; } .k-chat-channel-tabs::-webkit-scrollbar { display: none; } .k-chat-channel-tab { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; gap: var(--nv-s2); min-height: 38px; padding: 8px 16px !important; border-radius: 9999px !important; border: 1px solid var(--k-border) !important; background: var(--k-surface-solid, #fff) !important; color: var(--k-text2) !important; font-size: .85rem !important; font-weight: 600 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } .k-chat-channel-tab::after { display: none !important; } .k-chat-channel-tab .material-symbols-outlined { font-size: 18px !important; color: inherit !important; } .k-chat-channel-tab--active { background: var(--k-brand, #F27182) !important; border-color: var(--k-brand, #F27182) !important; color:var(--k-text-auf-marke) !important; } .k-chat-channel-badge { background: rgba(255,255,255,.9) !important; color: var(--k-brand) !important; min-width: 18px; height: 18px; border-radius: 9px; font-size: var(--k-fs-caption); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--nv-s1); } .k-chat-channel-tab:not(.k-chat-channel-tab--active) .k-chat-channel-badge { background: var(--k-brand) !important; color:var(--k-text-auf-marke) !important; } /* Chat: Raum-/Konversations-Liste als Insel-Karte */ .k-chat-list { margin: 4px 18px 18px !important; background: var(--k-surface-solid, #fff) !important; border: 1px solid var(--k-border) !important; border-radius: var(--nv-r-card, 24px) !important; box-shadow: var(--k-shadow-sm) !important; overflow: hidden !important; } .k-chat-list-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 13px 16px !important; border-bottom: 1px solid var(--k-border) !important; } .k-chat-list-item:last-child { border-bottom: none !important; } .k-chat-list-item::after { display: none !important; } .k-chat-avatar, .k-chat-avatar-wrap { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; } .k-chat-avatar { border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-weight: 700; font-size: .9rem; overflow: hidden; } .k-chat-avatar .material-symbols-outlined { font-size: 22px !important; color: #fff !important; } .k-chat-avatar-wrap { position: relative; } .k-chat-avatar-wrap .k-chat-avatar { width: 44px !important; height: 44px !important; } .k-chat-channel-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--k-surface-solid, #fff); } .k-chat-list-content { flex: 1 !important; min-width: 0 !important; } .k-chat-list-row { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } .k-chat-list-name { font-size: .95rem !important; font-weight: 700 !important; color: var(--k-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-chat-list-time { font-size: .72rem !important; color: var(--k-text3) !important; flex-shrink: 0; } .k-chat-list-preview { font-size: .82rem !important; color: var(--k-text3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-chat-list-badge { min-width: 20px; height: 20px; border-radius: var(--nv-r-eingabe); background: var(--k-brand) !important; color:var(--k-text-auf-marke) !important; font-size: var(--k-fs-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--nv-s2); flex-shrink: 0; } /* Telefon: Anruf + Loeschen als runde Buttons (Referenz: iOS-Telefon) */ #tel-call-btn { width: 68px !important; height: 68px !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; background: var(--k-brand, #F27182) !important; box-shadow: 0 6px 20px rgba(242,113,130,.35) !important; } #tel-del { width: 56px !important; height: 56px !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; background: var(--k-fill, rgba(0,0,0,.06)) !important; border: none !important; } /* Telefon-Fenster: eigenes Element (#tel-panel, nicht .nv-panel) — gleiche Behandlung: Rosé-Grund statt Milchglas (mobil) */ #tel-panel { background: var(--k-lava-gradient, #fef4f5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="dark"] #tel-panel { background: var(--k-lava-gradient, #0a0a0a) !important; } @media (min-width: 768px) { #tel-panel { background: var(--k-surface-solid, #fff) !important; } [data-theme="dark"] #tel-panel { background: var(--k-surface-elevated, #141414) !important; } } /* ============================================================ §19 — TEIL 52: Filter-Sheet des Kalenders. Der Kopf-Teil (Pfeile, „Heute", Datum) stand bis 2026-08-02 hier und liegt jetzt vollstaendig in css/kalender-kopf.css. ============================================================ */ .kal-glass-btn { min-width: 44px; min-height: 44px; } /* Filter-Sheet-Zeilen */ .kal-fs-row { display: flex; align-items: center; gap: var(--nv-s3); padding: var(--nv-s4) var(--nv-s1); min-height: 52px; border-bottom: 1px solid var(--k-border); cursor: pointer; -webkit-tap-highlight-color: transparent; } .kal-fs-row:last-child { border-bottom: none; } .kal-fs-icon { font-size: var(--k-fs-titel); color: var(--k-text2); width: 36px; text-align: center; } .kal-fs-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--k-fill); color: var(--k-text2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--k-fs-body); flex-shrink: 0; } .kal-fs-row.active .kal-fs-avatar { background: var(--k-brand); color:var(--k-text-auf-marke); } .kal-fs-label { flex: 1; font-size: var(--k-fs-hervor); font-weight: 600; color: var(--k-text); } .kal-fs-check { color: var(--k-brand); font-size: var(--k-fs-titel); } /* ============================================================ §20 — TEIL 53: CHAT-BUBBLES kanonisch (Stefan: "Bubbles stimmen nicht"). Container hatte kein Seiten-Padding (Bubbles klebten am Rand / wurden abgeschnitten), eigenes Bubble-Design war Alt-Rot. Gilt fuer Team-Raum UND WhatsApp/SMS/Instagram-Demo (gleiche Klassen). ============================================================ */ .k-chat-messages { padding: 12px 16px calc(12px + var(--nv-sockel-unten)) !important; display: flex !important; flex-direction: column; gap: var(--nv-s1) /* 3 -> 4, Skala (2026-08-29) */; overflow-y: auto; -webkit-overflow-scrolling: touch; } .k-chat-msg { display: flex !important; align-items: flex-end; gap: var(--nv-s2); max-width: 82% !important; margin: 2px 0 !important; } .k-chat-msg--mine { align-self: flex-end; margin-left: auto !important; flex-direction: row; } .k-chat-msg--other { align-self: flex-start; margin-right: auto !important; } .k-chat-msg-avatar { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: .68rem !important; font-weight: 700; } .k-chat-bubble { border-radius: 18px !important; padding: 9px 13px !important; font-size: .95rem !important; line-height: 1.45 !important; word-break: break-word; min-width: 0; box-shadow: none !important; } .k-chat-bubble--mine { background: linear-gradient(135deg, #F27182, #d9576a) !important; color: #fff !important; border: none !important; border-bottom-right-radius: 6px !important; } .k-chat-bubble--other { background: var(--k-surface-solid, #fff) !important; color: var(--k-text, #1c1b1f) !important; border: 1px solid var(--k-border, rgba(0,0,0,.06)) !important; border-bottom-left-radius: 6px !important; } .k-chat-msg-sender { font-size: var(--k-fs-caption); font-weight: 700; color: var(--k-brand); margin-bottom: 2px; } .k-chat-bubble--mine .k-chat-msg-sender { color: rgba(255,255,255,.85); } .k-chat-msg-meta { font-size: .64rem !important; margin-top: var(--nv-s1); text-align: right; color: var(--k-text3) !important; opacity: .9; } .k-chat-bubble--mine .k-chat-msg-meta { color: rgba(255,255,255,.8) !important; } .k-chat-date-divider { align-self: center; margin: var(--nv-s3) auto var(--nv-s2); font-size: var(--k-fs-caption); font-weight: 700; letter-spacing: .06em; color: var(--k-text3); background: var(--k-fill, rgba(0,0,0,.05)); border-radius: var(--nv-r-kapsel); padding: var(--nv-s1) var(--nv-s3); width: fit-content; } .k-chat-msg-system { align-self: center; font-size: var(--k-fs-caption); color: var(--k-text3); background: var(--k-fill, rgba(0,0,0,.05)); border-radius: var(--nv-r-kapsel); padding: var(--nv-s1) var(--nv-s3); margin: var(--nv-s1) auto; width: fit-content; } /* Eingabezeile: dezenter Fokus statt dickem Doppelrahmen */ .k-chat-input-area { padding: 8px 12px calc(10px + var(--nv-sockel-unten)) !important; background: var(--k-bg, #fef4f5) !important; border-top: 1px solid var(--k-border) !important; } .k-chat-input { background: var(--k-fill, rgba(0,0,0,.05)) !important; /* Kein Rahmen mehr (2026-08-27). Er war dauerhaft im Layout, nur damit im Fokus `border-color` etwas anzeigen kann — und der Fokus hatte ohnehin schon einen Ring. Trennung ueber Flaeche, nicht ueber Linien. */ border: none !important; border-radius: 22px !important; padding: 11px 16px !important; font-size: 1rem !important; color: var(--k-text) !important; box-shadow: none !important; outline: none !important; } .k-chat-input:focus { /* Der Ring allein, ohne Rahmen — er liegt ausserhalb der Flaeche und verschiebt beim Fokussieren nichts. Etwas kraeftiger als vorher, weil er jetzt die Arbeit der Rahmenfarbe mit uebernimmt. */ box-shadow: 0 0 0 3px rgba(242,113,130,.22) !important; } /* ============================================================ §21 — TEIL 54: HR-MITARBEITER-DETAIL KANONISCH. Stefan (IMG_5234): "UI von HR Mitarbeiter komplett umbauen das es passt zum rest mit buttons chips, ux karten usw". Vorher: Outline- Pill-Reihen statt Kreis-Buttons, Underline-Tabs statt Chips, Glas-Karten ohne Insel-Look, Subtitle blieb auf "Lade...". Markup-Seite: js/team-manager.js _hrRenderMitarbeiter. ⚠ STAND 2026-08-31 (Paket D1, Etappe 2). VON DIESEM ABSCHNITT IST NICHTS MEHR UEBRIG. Merkzeichen, Zahlenreihe, Aktionsreihe und Reiter-Behaelter gingen in Etappe 1 in den Katalog zurueck; der Kopfblock und der Reiter-Knopf jetzt in Etappe 2. Was bleibt, sind die Loeschvermerke — sie sagen, was sich dabei sichtbar geaendert hat. ⚠ ENTFERNT 2026-08-31 (Etappe 2): `#hr-ma-detail .hr-hero`, `.hr-hero-info`, `.hr-hero-name` und `.hr-hero-role` — der Kopfblock des Mitarbeiterprofils. Er war eine ZWEITE AUSFUEHRUNG von Katalog §30 (`.nv-profilkopf`): dieselbe zentrierte Spalte aus Bild, Kategorie, Name und Merkzeichen, nur mit eigenen Zahlen und ID-uebersteuert, damit der Katalog nicht herankam. In Etappe 1 stand hier der Grund, warum er bleiben durfte: der Umbau sei «ein Umbau des Aussehens, und der gehoert entschieden, nicht nebenbei gemacht». Er ist jetzt entschieden — Stefan-Auftrag 2026-08-31, «EIN Bauteil, zwei Fuellungen». SICHTBAR AENDERT SICH, benannt statt geglaettet: · Bild 80 → 120 px (`.nv-avatar--profil`), ohne den 3-px-Ring in der Akzentfarbe und ohne die harte Verlaufsfuellung; der Kreis faerbt sich aus `--f` · Reihenfolge Name → Rolle wird zu Kategorie → Name (Apple Kontakte, §30). Die Kategorie steht damit UEBER dem Namen und in Versalien, --k-fs-caption statt .92rem · Name 1.45rem/800 → 1.75rem/--k-fw-bold, mit letter-spacing -.02em · Luecke 12 → `--nv-luft-1`, Aussenabstand 4/0/18 → die Polsterung des Bauteils (`--nv-s2` / `--nv-s4`) Die Kontakt-Pillen (E-Mail, Telefon, Ort) sind aus dem Kopf heraus und stehen im Reiter «Stammdaten», wo dieselben Werte ohnehin schon standen. Das Status-Merkzeichen ist jetzt `.k-profile-tag` (§32b) statt einer eigenen Pille mit gefuelltem Grund. VERWANDT css/system.css §30, js/team-manager.js _hrRenderMitarbeiter ============================================================ */ /* ⚠ ENTFERNT 2026-08-31 (Paket D1, Etappe 1). Hier standen `#hr-ma-detail .hr-hero-tags`, `.hr-tag` und der Symbolton dazu — eine ZWEITE Ausfuehrung von `.k-profile-tags` / `.k-profile-tag` aus dem Katalog (§32b). Sie kam nur an, weil eine Kennung im Selektor jede Klassenregel schlaegt; nicht weil sie besser war. SICHTBAR AENDERT SICH, benannt statt geglaettet: · Grund solid `--k-surface-solid` → `--k-glass-bg` (durchscheinend) · Rand `--k-border` → `--k-glass-border` (eine Spur leiser) · Schrift .78rem → `--k-fs-caption` (12,48 → 11,52 px) · Polster seitlich 12 → 16 px (`--nv-s4`) · Luecke Symbol/Text 5 → 4 px (`--nv-s1`) Der Markenton des Symbols ist MITGEZOGEN — er steht jetzt am Katalog-Baustein (css/system.css §32b), nicht mehr hier. `#hr-ma-detail .hr-actions` (8 × !important) und `#hr-ma-detail .hr-stats` sind ebenfalls raus: beide waren reine Abstands-Uebersteuerer auf `.kp-actions` bzw. `.k-stats`. `#hr-ma-detail .k-tabs` (6 × !important) ist raus: der Katalog §34 macht bereits genau dasselbe (flex, nowrap, overflow-x auto, `gap: var(--nv-s2)` = 8 px, durchsichtig, randlos). Einziger Unterschied war der obere Innenabstand — 14 px hier gegen `var(--nv-s1)` = 4 px im Katalog. Der Katalog gewinnt. Die Ausnahme, die `css/system.css` §34 fuer diese Regel notiert («AUSGENOMMEN bleibt `#hr-ma-detail .k-tabs`»), ist damit erledigt. VERWANDT css/system.css §32b und §34, js/team-manager.js */ /* ⚠ ENTFERNT 2026-08-31 (Paket D1, Etappe 2). Hier standen `#hr-ma-detail .k-tab` (10 × !important) und `.k-tab.active` (3 × !important) — die ZWEITE AUSFUEHRUNG des Reiter-Knopfes aus Katalog §34. Etappe 1 hat den Reiter-BEHAELTER (`.k-tabs`) zurueckgefuehrt und in §34 notiert, die Ausnahme sei «damit erledigt». Sie war es nicht: der KNOPF stand weiter hier, mit einer Kennung im Selektor, und schlug damit jede Katalogregel. Eine halb zurueckgefuehrte Familie ist keine zurueckgefuehrte Familie. SICHTBAR AENDERT SICH, benannt: der inaktive Reiter war eine umrandete Pille auf weissem Grund; jetzt ist er Text ohne Rand und ohne Fuellung — der Entscheid «aktiv = gefuellte Pille, inaktiv = Text» (Stefan 2026-08-30, §32/§34), der im Kundenprofil seit einem Tag gilt. Dazu: Polsterung 11/18 → `--nv-luft-1` / `--nv-s4`, Schrift .9rem → `--k-fs-body`, und der aktive Reiter traegt `--k-text-auf-marke-klein` statt `--k-text-auf-marke` — die kleine Schrift auf der Marke braucht den dunkleren Ton (Kanon §4b). `flex: 0 0 auto` und `white-space: nowrap` fallen ersatzlos weg: die Reihe ist kein Flex-Streifen mehr, sondern ein Raster mit drei Spalten und zwei Zeilen — dort waere «nicht umbrechen» genau die Angabe, die den Umbruch verhindert, den wir wollen. VERWANDT css/system.css §34, js/team-manager.js */ /* Karten: echte Inseln (weiss, Hairline, Radius) statt Milchglas */ /* RAUS 2026-08-29 (Paket A1) — und das war die EINZIGE der fuenf k-glass-card-Regeln ausserhalb des Katalogs, die wirklich gewonnen hat: `#hr-ma-detail .k-glass-card` traegt (1,1,0), eine Kennung schlaegt jede Klasse. Die Karten im Mitarbeiter-Detail sahen deshalb anders aus als alle anderen: Rahmenlinie statt Schatten, Radius 18 statt 26, Polsterung an der Karte statt am Inhalt. SICHTBARE AENDERUNG, benannt: diese Karten sehen jetzt aus wie jede andere Karte. Genau das war der Zweck von Entscheid B. */ /* RAUS 2026-08-29 (Paket A1). Dieselbe Kennung `#hr-ma-detail` wie bei der Karte darueber, also (1,1,0) — sie hat gewonnen und die Detail-Zeilen im Mitarbeiter-Bereich anders aussehen lassen als ueberall sonst. Die Schriftgroesse .85rem war die Antwort auf «Texte zu klein»; die Katalog-Zeile ist inzwischen selbst groesser, der Sonderfall damit erledigt. SICHTBARE AENDERUNG, benannt. */ /* ============================================================ §22 — TEIL 55: GLOBALE KANONISIERUNG (Finance-Hub, Lager, Bestellungen + alle Module). Stefan: "Finance hub ist absolut nicht UI konform. Alles daran nicht. Lager bestellungen usw." Hebel: die geteilten Legacy-Bausteine EINMAL kanonisch machen — trifft jedes Modul das sie nutzt. ============================================================ */ /* 1) KARTEN = INSELN. Alle verbreiteten Karten-Klassen: solid weiss, Hairline, r18 — kein Milchglas/Blur mehr. body.has-bg-Varianten mitselektiert (style.css hat dort rgba-Glas mit !important und (0,2,0)-Spezifität — gleiche Spezifität + spätere Position gewinnt). */ /* `.k-glass-card` ist hier RAUS (2026-08-29, Paket A1). Sie stand mit (0,1,0) und `!important` gegen die Katalogregel `body.k-ui .k-glass-card` mit (0,2,0) und `!important` — unter gleichrangigen `!important` entscheidet die Spezifitaet, und die hoehere gewinnt. Diese Zeile hat also NIE gewirkt. Die anderen Karten-Klassen bleiben: sie sind noch nicht im Katalog. */ .task-card, .order-card, .news-card, .lager-product-card, .zeit-status-card, .zeit-team-card, body.has-bg .task-card, body.has-bg .order-card, body.has-bg .news-card, body.has-bg .lager-product-card, body.has-bg .zeit-status-card, body.has-bg .zeit-team-card { background: var(--k-surface-solid, #fff) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--k-border, rgba(0,0,0,.06)) !important; /* Hier stand bis 06.09.2026 ein Radius von 20 px mit Vorrang («18 -> 20, Skala, das hier sind Karten», 29.08.). Weg mit C-Entscheid (4), Nacht 2: Karten sind Katalog-Karten (`k-glass-card`, 26 px) — die News-Karte traegt die Klasse jetzt, `.task-card` ohne Glas lebt nur in totem Code (js/home-admin.js renderHomeTasks/renderHomeNachrichten, 0 Aufrufer), order/lager/zeit haben keinen Verwender ohne Glas. Gemessen mit der Fassungs-Probe (189 Fassungen): docs/_diagnostic_results/d17-radien/p4-*. */ box-shadow: var(--k-shadow-sm, 0 2px 8px rgba(0,0,0,.05)) !important; } /* 2) CHIPS: aktiv = IMMER Nevanu-Pink (style.css machte sie im Light-Mode SCHWARZ — Z.101/254). Gleiche Spezifität, später. */ /* ⚠ RAUS 2026-08-31 (Paket D1, Etappe I1). Diese Regel war die Fassung, die WIRKLICH ankam — sie ist unveraendert in den Katalog gezogen (system.css §26a), und zwar OHNE Themen-Vorsatz und OHNE `!important`. Beides war nie Bedarf, sondern Werkzeug: der Vorsatz hob die Spezifitaet gegen style.css, das `!important` gewann gegen den Rest. Nachdem die zehn Gegen-Regeln in style.css weg sind, steht die Fassung allein und braucht keines von beidem mehr. ⚠ Ihr eigenes Wort «IMMER» stimmte nicht: der Vorsatz nennt nur `light` und `dark`. `keeva-black` bekam die Farbe zwar auch (ueber die vorsatzlose `style.css:671`), aber nicht das `box-shadow:none` — und trug deshalb als einziges Thema einen rosa Schein. Jetzt gilt «IMMER» woertlich, fuer alle drei. Sichtbare Folge: `keeva-black` verliert diesen Schein. */ /* ⚠ ENTFERNT 2026-08-30 (Stefan-Freigabe A2): `.k-tabs`, `.k-tab` und `.k-tab.active` standen hier. Diese Datei laedt an Platz 10 und war damit die Fassung, die beim Behaelter WIRKLICH ankam — nachgemessen in `blog`: randlos, durchsichtig, 4/0/12. Sie ist unveraendert in den Katalog gezogen (css/system.css §34), wo sie mit den beiden anderen Fassungen zu einer geworden ist. */ /* 3b) Legacy-Underline-Tabs der Content-Module → Chip-Look erzwingen (deren Styles kommen aus JS-injizierten