/* ============================================================================ Finanzmacher Plattform — Design-System (Vertrag: docs/contracts/DESIGN_SYSTEM.md) EINE Datei für ALLE Module. Wer hier einen Baustein findet, baut ihn nicht nach. Ansehen: /static/muster.html — dort steht jeder Baustein einmal in echt. Aufbau 1 Tokens (Farbe · Raum · Radius · Tiefe · Bewegung · Ebenen · Schrift) 2 Grundlagen (Body, Links, Fokus, Überschriften) 3 Login 4 App-Rahmen + Navigation 5 Seitenkopf 6 Flächen: Panel · Karte · Kachel · Statistik 7 Tabellen 8 Knöpfe 9 Formulare 10 Status: Badge · Chip · Hinweis 11 Zustände: leer · lädt · Fehler 12 Trefferlisten 13 Werkzeugleiste · Tabs · Segmente · Suche 14 Chat-Blasen 15 Toast 16 Hilfsklassen (ersetzen die häufigsten Inline-Stile) 17 Bewegung sparsam · kleine Bildschirme ========================================================================= */ @font-face{ font-family:"FinanzmacherVinyl"; src:url("/static/assets/brand/fonts/VINYLRegular.otf") format("opentype"); font-weight:400;font-style:normal;font-display:swap; } /* ── 1 · Tokens ───────────────────────────────────────────────────────────── `.fm-hell` steht bewusst neben `:root`: Damit lässt sich ein einzelner Bereich auf die helle Fassung festnageln, auch wenn die ganze Plattform dunkel läuft. Das ist die Sicherung fürs schrittweise Ausrollen — ein Modul, das seine Farben noch selbst mitbringt, wird im Dunkeln zur hellen Insel statt zum Scherbenhaufen. Siehe §1c. */ :root, .fm-hell{ /* Farbe — Marke. Nachgeschärft am 05.08.2026. Owner: „zu viel hell und wenig Kontraste … sieht clean aus, aber man erkennt relativ wenig." Der Seitenhintergrund ist jetzt eine Spur dunkler, damit weiße Flächen sichtbar darauf liegen; Linien und Nebentext sind kräftiger. Die Marke selbst bleibt unangetastet. */ --fm-bg:#eaedf2; --fm-panel:#ffffff; --fm-panel-soft:#e4e9f0; --fm-text:#11151c; --fm-muted:#59637a; --fm-line:#c8d0dd; --fm-line-soft:#dde3ec; --fm-brand:#9b704f; --fm-brand-dark:#5b3f2c; --fm-brand-soft:#c08c62; --fm-brand-bg:#f6efe8; /* Dieselbe Bronze, eine Nuance tiefer — ausschließlich für Flächen, auf denen WEISSER Text steht (Hauptknopf, aktiver Umschalter, Marken-Badge). Grund ist gemessen, nicht Geschmack: Weiß auf #9b704f ergibt 4,35:1 und liegt damit unter der Lesbarkeitsgrenze von 4,5:1; auf #8f6746 sind es 5,0:1. Für alles andere — Kanten, Akzente, Fokusring, Icons — bleibt die Marke unangetastet. */ --fm-brand-solid:#8f6746; /* Textfarbe AUF einer Bronze-Flaeche. Als Token, nicht hart: sonst greift die dunkle Sonderregel ueber :root auch INNERHALB einer hellen Insel und setzt dort dunkle Schrift auf helle Bronze. Gemessen aufgefallen: 4,25:1. */ --fm-auf-brand:#ffffff; /* Farbe — Status (immer Farbe UND Wort, nie Farbe allein) */ --fm-good-bg:#dff2e7; --fm-good:#145c35; --fm-good-line:#a9d8bf; --fm-bad-bg:#fde3e3; --fm-bad:#9a1b1b; --fm-bad-line:#eab4b4; --fm-warn-bg:#fdeec4; --fm-warn:#6d4200; --fm-warn-line:#e2c281; --fm-info-bg:#e0eafa; --fm-info:#194479; --fm-info-line:#b3c9e8; /* Fünfstufige Bewertungs-Skala (Owner 13.08.: „hellrot über orange, gelb, grün" — dunkelrot/dunkelgrün allein war „zu wenig ergiebig"). Wird als Verlauf UND als Textfarbe der Prozentzahl benutzt. */ --fm-skala-1:#e0656c; --fm-skala-2:#ee8f45; --fm-skala-3:#e6c033; --fm-skala-4:#8cbf4a; --fm-skala-5:#3f9d57; /* Eingabefelder und Wechselzeilen sind eigene Flächen und brauchen eigene Namen — mit fest eingetipptem #fff wären sie im Dunkeln weiß geblieben (heller Kasten, heller Text darauf, unlesbar). Genau der Fehler, den Prüfung 7 sucht. */ --fm-feld-bg:#ffffff; --fm-feld-fehler-bg:#fff5f5; --fm-line-hover:#a7b1c2; --fm-zebra:#f7f9fb; /* Rollen — der Kern der Lesbarkeit (Owner 05.08.): „was ist eine Funktion, was ist eine Information, was ist eine wichtige Information" muss man auf einen Blick sehen. FUNKTION = eigene Fläche + sichtbarer Rahmen + Zeiger. Nie nur Text. INFORMATION = ruhig, ohne Rahmen, Bezeichnung kleiner als der Wert. WICHTIG = kräftig und größer, bei Bedarf mit Bronze-Kante. Der eigentliche Fehler bisher: .btn war WEISS auf weißem Panel — ein Knopf sah aus wie Text. Deshalb haben Funktionen jetzt eine eigene Fläche. */ --fm-btn-bg:#eef2f8; --fm-btn-bg-hover:#dfe6f0; --fm-btn-line:#8b94a6; --fm-placeholder:#6d7688; /* Platzhalter im Eingabefeld — lesbar, nicht laut */ --fm-kante:var(--fm-brand); /* Akzentkante für Wichtiges */ /* Der Knopfrahmen ist bewusst kräftiger als eine normale Trennlinie: gemessen 3,0:1 gegen die weiße Fläche. Das ist der Wert, den Bedienelemente brauchen, damit man sie als Bedienelement erkennt, ohne sie zu lesen. */ /* Raum — 4er-Raster. Abstände kommen NUR hieraus. */ --fm-space-1:4px; --fm-space-2:8px; --fm-space-3:12px; --fm-space-4:16px; --fm-space-5:20px; --fm-space-6:24px; --fm-space-8:32px; --fm-space-10:40px; /* Radius */ --fm-radius-sm:6px; --fm-radius:10px; --fm-radius-lg:14px; --fm-radius-pill:999px; /* Tiefe — sparsam. Flächen liegen ruhig, nur Aktives hebt sich. */ --fm-shadow-sm:0 1px 2px rgba(21,25,34,.05); --fm-shadow:0 2px 8px rgba(21,25,34,.06); --fm-shadow-lg:0 12px 32px rgba(21,25,34,.10); /* Bewegung */ --fm-motion-fast:120ms; --fm-motion:180ms; --fm-motion-slow:280ms; --fm-ease-out:cubic-bezier(.2,.8,.2,1); --fm-ease-in:cubic-bezier(.4,0,1,1); /* Ebenen — feste Leiter, nie freie z-index-Zahlen */ --fm-z-base:1; --fm-z-sticky:20; --fm-z-dropdown:30; --fm-z-overlay:40; --fm-z-toast:50; /* Fokus — Bronze-Ring auf allem Klickbaren */ --fm-focus:0 0 0 3px rgba(155,112,79,.35); /* Schrift — vier Stufen statt sieben Nuancen von „klein" */ --fm-fs-xs:11.5px; --fm-fs-sm:12.5px; --fm-fs:13.5px; --fm-fs-md:15px; --fm-fs-lg:18px; --fm-fs-xl:22px; --fm-fs-2xl:28px; --fm-lh:1.55; /* ── Alias-Tokens ────────────────────────────────────────────────────── Module haben über Jahre Namen erfunden, die es zentral nie gab (--fm-surface, --fm-ok, --fm-soft …). 66 solcher Stellen fielen auf ihren Notfarbwert zurück — manche ganz ohne, also gar keine Farbe. Statt in 20 fremden Dateien zu suchen, zeigen die Namen hier auf die echte Farbe. Neu bauen: bitte die Namen oben nehmen, nicht diese. */ --fm-surface:var(--fm-panel); --fm-surface2:var(--fm-panel-soft); --fm-card:var(--fm-panel); --fm-soft:var(--fm-panel-soft); --fm-border:var(--fm-line); --fm-ink-2:var(--fm-muted); --fm-primary:var(--fm-brand); --fm-bronze:var(--fm-brand); --fm-brand-dk:var(--fm-brand-dark); --fm-brand-lt:var(--fm-brand-soft); --fm-ok:var(--fm-good); /* --fm-danger und --fm-shadow-token standen hier bis 09.08.2026 und hatten keinen Nutzer mehr: belege.js hat aufgeraeumt, den zweiten hatte ich auf Verdacht angelegt. Ein Alias ohne Altbestand ist keine Bruecke, sondern eine stille Freigabe - er deckt den naechsten, der denselben Namen erfindet, und Pruefung 1 schweigt dazu. Deshalb entfernt. (Fundmuster vom Koordinator, 09.08.: "eine Freigabe hatte ihren Grund ueberlebt".) */ } /* ── 1b · Dunkle Fassung ──────────────────────────────────────────────────── Owner 05.08.2026: „Es soll nicht brutal alles schwarz in schwarz sein. Ich will trotzdem eine gute Lesbarkeit behalten … wenn alles so dunkel ist, dann ist es genauso wie jetzt." Genau darum geht es hier: Das Problem war nie die Helligkeit, sondern die fehlende Abstufung. Deshalb hat die dunkle Fassung **vier Ebenen** statt einer — Seite, Fläche, erhobene Fläche, Rand — und man sieht jederzeit, was worauf liegt: Seite #0f1319 ganz hinten, nie #000 (reines Schwarz frisst jede Kante) Fläche #1c2029 die Arbeitsflächen liegen sichtbar davor erhoben #262c38 Tabellenköpfe, Knöpfe, Umschalter Linie #39414f sichtbar, nicht erahnbar (Bedienelemente #5f6a80) Farbe trägt hier mehr als im Hellen: Bronze wird aufgehellt (#9b704f hat auf dunklem Grund nur 2,6:1 und wäre unlesbar), Statusfarben bekommen dunkle Flächen mit hellem Text. Gemessen wurde jede Kombination, nicht geschätzt. **Kein Automatismus nach Systemeinstellung** (also bewusst KEIN `prefers-color-scheme`): In den Modulen stehen noch 1.764 fest eingetippte Farben. Würde die Plattform bei dunkler Systemeinstellung von selbst umschalten, wäre die Hälfte hell und die Hälfte dunkel. Umgeschaltet wird deshalb nur ausdrücklich: document.documentElement.dataset.theme = "dark" */ :root[data-theme="dark"]{ --fm-bg:#0f1319; --fm-panel:#1c2029; --fm-panel-soft:#262c38; --fm-text:#e8ebf1; --fm-muted:#a3adbe; --fm-line:#39414f; --fm-line-soft:#2a303b; --fm-brand:#c08c62; --fm-brand-dark:#e0b083; --fm-brand-soft:#9b704f; --fm-brand-bg:#2b2119; /* Im Dunkeln kehrt sich das um: die Bronze-Fläche ist hell, die Schrift darauf dunkel (6,3:1). Eine dunkle Bronze mit weißer Schrift würde hier verschwinden. */ --fm-brand-solid:#c08c62; --fm-auf-brand:#1b1207; --fm-good-bg:#16301f; --fm-good:#6ddba0; --fm-good-line:#2c5c3f; --fm-bad-bg:#331a1a; --fm-bad:#ff9e9e; --fm-bad-line:#6b3434; --fm-warn-bg:#2f2611; --fm-warn:#f2c66a; --fm-warn-line:#5e4c1f; --fm-info-bg:#182740; --fm-info:#8fbdf2; --fm-info-line:#2f4a66; /* Dieselben fünf Stufen, auf dunklem Grund aufgehellt. */ --fm-skala-1:#f08a90; --fm-skala-2:#f5a866; --fm-skala-3:#ecd05e; --fm-skala-4:#a6d16e; --fm-skala-5:#63c47f; --fm-feld-bg:#161a22; --fm-feld-fehler-bg:#2a1616; --fm-line-hover:#6b768c; --fm-zebra:#1f242e; /* Auch hier gilt die 3:1-Regel für Bedienelemente — gemessen 3,2:1 gegen die Arbeitsfläche. Ohne diesen Rahmen verschwindet ein Knopf im Dunkeln völlig. */ --fm-btn-bg:#2b3240; --fm-btn-bg-hover:#38414f; --fm-btn-line:#5f6a80; --fm-placeholder:#8b95a8; /* Schatten trägt auf dunklem Grund nicht — dort arbeiten die Ebenen und die Linien. Ein Hauch bleibt, damit Schwebendes (Toast, Dialog) sich löst. */ --fm-shadow-sm:0 1px 2px rgba(0,0,0,.35); --fm-shadow:0 2px 10px rgba(0,0,0,.45); --fm-shadow-lg:0 14px 40px rgba(0,0,0,.6); --fm-focus:0 0 0 3px rgba(192,140,98,.45); } /* Bildschirmfotos, Vorschauen und Logos vertragen die dunkle Fläche nicht immer — der Rahmen bleibt hell, damit nichts „ausgeschnitten" wirkt. */ :root[data-theme="dark"] .brand-logo, :root[data-theme="dark"] .login-logo{filter:brightness(1.08);} /* Der Admin-Bereich ist im Hellen dunkel, um unverwechselbar zu sein. Im Dunkeln muss dieser Unterschied anders entstehen — sonst sieht Admin aus wie alles. */ :root[data-theme="dark"] .sidebar.admin-mode{background:#241a12;border-right-color:#3a2a1c;} :root[data-theme="dark"] .sidebar.admin-mode .navitem{color:#d8cec4;} :root[data-theme="dark"] .sidebar.admin-mode .navitem:hover{background:#32241a;} :root[data-theme="dark"] .sidebar.admin-mode .navitem.active{background:#3d2c1e;color:#f0cfa8;} :root[data-theme="dark"] .sidebar.admin-mode .btn{background:#32241a;color:#d8cec4;border-color:#4a3625;} :root[data-theme="dark"] .login-body{background:radial-gradient(1200px 500px at 50% -10%, #232833 0%, var(--fm-bg) 60%);} /* ── 1c · Schrittweise umstellen, ohne etwas zu zerschießen ───────────────── Owner 05.08.2026: „damit das für alle Apps implementiert wird und ohne jetzt jede App zu zerschießen, das Design einfach global ausgerollt wird." Das Problem: In den Modulen stehen noch 1.764 fest eingetippte Farben. Die gehen beim Umschalten nicht mit — ein weißer Kasten mitten in einer dunklen Ansicht, dunkle Schrift auf dunklem Grund, unlesbar. Die Lösung ist eine Umklammerung statt eines Verbots: Ein Modul, das noch nicht umgestellt ist, wird in `
` gehängt. Darin gelten wieder die hellen Werte — der Bereich sieht also aus wie heute, bleibt vollständig lesbar und stört den Rest nicht. Wer das Modul später umstellt, entfernt die Klasse: eine Zeile, ein Commit, kein Risiko. Verantwortlich fürs Setzen ist die App-Hülle (Spine), nicht das Modul selbst. */ .fm-hell{background:var(--fm-bg);color:var(--fm-text);} /* Im Hellen ist die Insel unsichtbar — kein Rahmen, kein zusätzlicher Abstand. Sonst säße jedes noch nicht umgestellte Modul 16 px weiter innen als ein umgestelltes, und man sähe einen Unterschied, den es gar nicht geben soll. Erst im Dunkeln wird sie zur Insel. */ .modul-insel{border-radius:var(--fm-radius-lg);} :root[data-theme="dark"] .modul-insel{ padding:var(--fm-space-4);border:1px solid #4a5364; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);} /* Fußnote am Rand der Insel — sagt, warum dieser Bereich hell bleibt. */ :root[data-theme="dark"] .modul-insel::before{ content:"Dieser Bereich ist noch nicht umgestellt und bleibt deshalb hell."; display:block;font-size:var(--fm-fs-xs);color:var(--fm-muted);margin-bottom:var(--fm-space-3);} /* ── 1d · Umschalter Sonne / Mond ────────────────────────────────────────── Owner 05.08.2026: „bitte einen Umschalter rechts oben für Sonne, Mond." Schwebt oben rechts, damit die App-Hülle dafür keine neue Kopfzeile braucht — fünf Zeilen HTML einhängen, fertig. Baustein liegt hier, eingebaut wird er in der Hülle (Spine-Revier). */ .theme-schalter{position:fixed;top:12px;right:16px;z-index:var(--fm-z-sticky); display:inline-flex;gap:2px;padding:3px;background:var(--fm-panel); border:1px solid var(--fm-line);border-radius:var(--fm-radius-pill);box-shadow:var(--fm-shadow);} .theme-schalter button{border:0;background:none;cursor:pointer;color:var(--fm-muted); width:30px;height:26px;border-radius:var(--fm-radius-pill);display:inline-flex; align-items:center;justify-content:center; transition:background var(--fm-motion-fast) var(--fm-ease-out),color var(--fm-motion-fast) var(--fm-ease-out);} .theme-schalter button:hover{color:var(--fm-text);background:var(--fm-panel-soft);} .theme-schalter button.active{background:var(--fm-brand-solid);color:var(--fm-auf-brand);} .theme-schalter button.active{color:var(--fm-auf-brand);} /* Läuft die Nutzeransicht („Admin sieht als …"), liegt oben ein Band — dann rutscht der Umschalter darunter, statt sich mit ihm zu überlagern. */ body.viewas-active .theme-schalter{top:52px;} /* ── 2 · Grundlagen ─────────────────────────────────────────────────────── */ *{box-sizing:border-box} body{ margin:0;font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif; color:var(--fm-text);background:var(--fm-bg); font-size:var(--fm-fs);line-height:var(--fm-lh); -webkit-font-smoothing:antialiased; } a{color:var(--fm-brand-dark);text-underline-offset:2px;} a:hover{color:var(--fm-brand);} /* Owner 05.08.2026: „Vinyl niemals fett. Die Schriftart ist regular schon fett genug." Die Fettung kam nirgends absichtlich — `.brand-title` sitzt meist auf einem

, und das ist im Browser von Haus aus fett. Die Schrift hat auch nur einen Schnitt; was man sah, war eine vom Browser künstlich verdickte Fassung. Deshalb hier fest auf 400, statt es in jeder Datei einzeln zu richten. */ .brand-title{font-family:"FinanzmacherVinyl",Inter,sans-serif;letter-spacing:.5px;font-weight:400;} h1,h2,h3,h4{line-height:1.25;} /* Fokus sichtbar — Tastaturbedienung ist kein Sonderfall */ :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:none;box-shadow:var(--fm-focus);border-radius:var(--fm-radius-sm); } /* ── 3 · Login ──────────────────────────────────────────────────────────── */ .login-body{display:flex;min-height:100vh;align-items:center;justify-content:center; background:radial-gradient(1200px 500px at 50% -10%, #fff 0%, var(--fm-bg) 60%);} .login-card{background:var(--fm-panel);border:1px solid var(--fm-line);border-radius:16px; padding:30px 32px;width:340px;display:flex;flex-direction:column;gap:12px; box-shadow:var(--fm-shadow-lg);text-align:center;} .login-logo{width:84px;height:84px;object-fit:contain;margin:0 auto;} .login-card h1{font-size:30px;margin:4px 0 0;color:var(--fm-brand-dark);} .login-sub{color:var(--fm-muted);margin:0 0 8px;font-size:13px;} .login-card label{display:flex;flex-direction:column;text-align:left;font-size:12px;color:var(--fm-muted);gap:4px;} .login-card input{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--fm-line);border-radius:8px;} .login-error{color:var(--fm-bad);font-size:13px;min-height:18px;} /* ── 4 · App-Rahmen + Navigation ────────────────────────────────────────── */ .app-shell{display:flex;min-height:100vh;} .sidebar{flex:0 0 232px;background:var(--fm-panel);border-right:1px solid var(--fm-line); display:flex;flex-direction:column;position:sticky;top:0;height:100vh;} .brand{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--fm-line);} .brand-logo{width:34px;height:34px;object-fit:contain;} .brand .brand-title{font-size:20px;color:var(--fm-brand-dark);} .sidebar nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow:auto;} .navitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer; color:var(--fm-text);font-size:14px;border:0;background:none;text-align:left;width:100%; transition:background var(--fm-motion-fast) var(--fm-ease-out),color var(--fm-motion-fast) var(--fm-ease-out);} .navitem .ic{width:18px;text-align:center;} .navitem:hover{background:var(--fm-panel-soft);} .navitem.active{background:var(--fm-brand-bg);color:var(--fm-brand-dark);font-weight:600;box-shadow:inset 3px 0 0 var(--fm-brand);} .navgroup{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fm-muted);padding:14px 12px 4px;} .navgroup:first-child{padding-top:4px;} .navgroup-hd{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;border-radius:6px;padding-right:8px;} .navgroup-hd:hover{color:var(--fm-brand);} .nav-chev{font-size:13px;display:inline-block;transform:rotate(90deg);transition:transform var(--fm-motion) var(--fm-ease-out);margin-left:2px;} .navgroup-hd.closed .nav-chev{transform:rotate(-90deg);} .navgroup-body.closed{display:none;} .sidebar-foot{border-top:1px solid var(--fm-line);padding:12px 14px;font-size:12px;color:var(--fm-muted);} .sidebar-foot .uname{color:var(--fm-text);font-weight:600;font-size:13px;} .sidebar-foot .logout{margin-top:8px;} /* Administration: dunkle Navigation = unverwechselbar Admin-Modus */ .sidebar.admin-mode{background:#222731;border-right-color:#222731;} .sidebar.admin-mode .brand{border-bottom-color:#333a47;} .sidebar.admin-mode .brand .brand-title{color:#e3c5a4;} .sidebar.admin-mode .navitem{color:#cfd4dd;} .sidebar.admin-mode .navitem:hover{background:#2b313d;} .sidebar.admin-mode .navitem.active{background:#37302a;color:#e8c9a8;box-shadow:inset 3px 0 0 var(--fm-brand);} .sidebar.admin-mode .navgroup{color:#8a92a0;} .sidebar.admin-mode .navgroup-hd:hover{color:var(--fm-brand-soft);} .sidebar.admin-mode .sidebar-foot{border-top-color:#333a47;color:#8a92a0;} .sidebar.admin-mode .sidebar-foot .uname{color:#e6e9ee;} .sidebar.admin-mode .btn{background:#2b313d;color:#cfd4dd;border-color:#3a4250;} .sidebar.admin-mode .btn:hover{background:#333b49;} .admin-strip{background:var(--fm-brand-solid);color:var(--fm-auf-brand);font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;padding:6px 12px;border-radius:8px;margin:2px 4px 10px;text-align:center;} /* Nutzeransicht-Banner (Admin sieht die Plattform als anderer Nutzer) */ .viewas-banner{position:fixed;top:0;left:0;right:0;z-index:var(--fm-z-sticky);display:flex;align-items:center; justify-content:center;gap:14px;background:var(--fm-brand-solid);color:var(--fm-auf-brand);padding:8px 16px; font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.18);} .viewas-banner .btn{background:var(--fm-auf-brand);color:var(--fm-brand-dark); border-color:var(--fm-auf-brand);font-weight:600;} body.viewas-active .sidebar{top:40px;height:calc(100vh - 40px);} body.viewas-active .main{padding-top:62px;} /* Owner 11.08.2026 woertlich: „Du kannst das Fenster auch ruhig breiter machen lassen, damit man die sieht, weil das ist eh nicht so breit wie der Bildschirm. Es darf ruhig breiter sein." Anlass: In der Ueberweisungsliste der Buchhaltung liefen die Aktions-Symbole rechts aus dem Bild — auf einem breiten Monitor lag daneben leere Flaeche. 1180px war eine Lesebreite fuer Fliesstext; die breiten Arbeitstabellen (Ueberweisungen, Belege, Provisionen) sind daran erstickt. Fliesstext bleibt trotzdem lesbar: `.page-sub` hat seine eigene 75ch-Grenze. */ .main{flex:1;padding:var(--fm-space-6) var(--fm-space-8);max-width:1600px;} /* ── 5 · Seitenkopf ─────────────────────────────────────────────────────── */ h2.page{font-size:var(--fm-fs-xl);margin:0 0 var(--fm-space-1);letter-spacing:-.01em;} .page-sub{color:var(--fm-muted);margin:0 0 var(--fm-space-5);font-size:var(--fm-fs-sm);max-width:75ch;} /* Kopfzeile mit Aktionen rechts */ .page-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fm-space-4);flex-wrap:wrap;} /* ── 6 · Flächen ────────────────────────────────────────────────────────── */ .panel{background:var(--fm-panel);border:1px solid var(--fm-line);border-radius:var(--fm-radius); padding:var(--fm-space-4) var(--fm-space-5);margin-bottom:var(--fm-space-4);box-shadow:var(--fm-shadow-sm);} .panel h3{margin:0 0 var(--fm-space-3);font-size:var(--fm-fs-md);} /* Panel-Kopf: Titel links, Aktionen rechts, feine Trennlinie */ .panel-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--fm-space-3); flex-wrap:wrap;margin:calc(var(--fm-space-1) * -1) 0 var(--fm-space-3);} .panel-hd h3{margin:0;} .panel-hd .sub{color:var(--fm-muted);font-size:var(--fm-fs-sm);} .panel.flush{padding:0;overflow:hidden;} /* für randlose Tabellen im Panel */ .panel.flush .panel-hd{padding:var(--fm-space-4) var(--fm-space-5) 0;} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--fm-space-4);} .card{background:var(--fm-panel);border:1px solid var(--fm-line);border-radius:var(--fm-radius); padding:var(--fm-space-4);box-shadow:var(--fm-shadow-sm);} .card.clickable{cursor:pointer;transition:border-color var(--fm-motion-fast) var(--fm-ease-out), box-shadow var(--fm-motion) var(--fm-ease-out),transform var(--fm-motion) var(--fm-ease-out);} .card.clickable:hover{border-color:var(--fm-brand-soft);box-shadow:var(--fm-shadow);transform:translateY(-1px);} .stat{display:flex;flex-direction:column;gap:var(--fm-space-1);} .stat .v{font-size:var(--fm-fs-2xl);font-weight:700;color:var(--fm-brand-dark);line-height:1.1; font-variant-numeric:tabular-nums;} .stat .k{color:var(--fm-muted);font-size:var(--fm-fs-sm);} .stat .hint{color:var(--fm-muted);font-size:var(--fm-fs-xs);} .cat-label{font-size:var(--fm-fs-sm);font-weight:700;letter-spacing:.03em;color:var(--fm-brand-dark); margin:var(--fm-space-5) 0 var(--fm-space-2);} .cat-label:first-child{margin-top:0;} .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--fm-space-4);margin-bottom:var(--fm-space-2);} .tile{background:var(--fm-panel);border:1px solid var(--fm-line);border-radius:var(--fm-radius); padding:var(--fm-space-4);display:flex;flex-direction:column;gap:var(--fm-space-2);min-height:120px; box-shadow:var(--fm-shadow-sm);cursor:pointer; transition:border-color var(--fm-motion-fast) var(--fm-ease-out), box-shadow var(--fm-motion) var(--fm-ease-out),transform var(--fm-motion) var(--fm-ease-out);} .tile:hover{border-color:var(--fm-brand-soft);box-shadow:var(--fm-shadow);transform:translateY(-1px);} .tile .ic{font-size:26px;} .tile .tname{font-weight:600;} .tile .tdesc{font-size:var(--fm-fs-sm);color:var(--fm-muted);flex:1;line-height:1.45;} .tile.locked{opacity:.45;filter:grayscale(.4);cursor:default;} .tile.locked:hover{border-color:var(--fm-line);box-shadow:var(--fm-shadow-sm);transform:none;} .tile .row{display:flex;align-items:center;justify-content:space-between;gap:var(--fm-space-2);} /* ── 7 · Tabellen ───────────────────────────────────────────────────────── */ table{width:100%;border-collapse:collapse;background:var(--fm-panel);border:1px solid var(--fm-line); border-radius:var(--fm-radius);overflow:hidden;} th,td{text-align:left;padding:10px var(--fm-space-3);border-bottom:1px solid var(--fm-line-soft);font-size:var(--fm-fs);} /* Der Kopf trägt die Bezeichnungen — er darf sich vom Inhalt absetzen, sonst verschwimmt beim Scrollen, was Überschrift und was Wert ist. */ th{background:var(--fm-panel-soft);color:var(--fm-text);font-weight:700;font-size:var(--fm-fs-xs); letter-spacing:.05em;text-transform:uppercase; position:sticky;top:0;z-index:var(--fm-z-base);white-space:nowrap; border-bottom:2px solid var(--fm-line);} tbody tr{transition:background var(--fm-motion-fast) var(--fm-ease-out);} tbody tr:hover{background:var(--fm-brand-bg);} tr:last-child td{border-bottom:0;} /* Zebra macht lange Listen lesbar — Klasse, damit kurze Formulartabellen ruhig bleiben */ table.zebra tbody tr:nth-child(even){background:var(--fm-zebra);} table.zebra tbody tr:nth-child(even):hover{background:var(--fm-brand-bg);} /* Zahlen gehören rechts und untereinander lesbar */ td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;} td.act,th.act{text-align:right;white-space:nowrap;} /* Breite Tabellen scrollen in ihrem Kasten, nicht die ganze Seite */ .tbl-wrap{overflow-x:auto;border-radius:var(--fm-radius);} .tbl-wrap table{border-radius:0;border:0;} /* ── 8 · Knöpfe = FUNKTION ────────────────────────────────────────────────── Ein Knopf hat eine eigene Fläche. Vorher war er weiß auf weißem Panel und damit von Text nicht zu unterscheiden — genau der Punkt, den der Owner am Mail-Archiv beanstandet hat („was ist eine Funktion, was ist eine Information"). */ .btn{font:inherit;font-size:var(--fm-fs);border:1px solid var(--fm-btn-line);background:var(--fm-btn-bg); border-radius:var(--fm-radius-sm);padding:7px 13px;cursor:pointer;color:var(--fm-text); display:inline-flex;align-items:center;gap:6px;line-height:1.3;white-space:nowrap;font-weight:500; transition:background var(--fm-motion-fast) var(--fm-ease-out), border-color var(--fm-motion-fast) var(--fm-ease-out), transform var(--fm-motion-fast) var(--fm-ease-out);} .btn:hover{background:var(--fm-btn-bg-hover);border-color:var(--fm-muted);} .btn:active{transform:translateY(1px);} .btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;} .btn:disabled:hover{background:var(--fm-btn-bg);border-color:var(--fm-btn-line);} .btn.primary{background:var(--fm-brand-solid);color:var(--fm-auf-brand); border-color:var(--fm-brand-solid);font-weight:600;} .btn.primary:hover{background:var(--fm-brand-dark);border-color:var(--fm-brand-dark); color:var(--fm-auf-brand);} /* Der Löschknopf behält den kräftigen roten Rahmen: er ist ein Bedienelement und muss sich von der Fläche abheben (6,8:1) — die weiche Kante `--fm-bad-line` ist für Hinweiskästen gedacht, nicht für etwas, das man anklickt. */ .btn.danger{color:var(--fm-bad);border-color:var(--fm-bad);background:var(--fm-bad-bg);} .btn.danger:hover{background:var(--fm-bad);color:#fff;border-color:var(--fm-bad);} .btn.ghost{border-color:transparent;background:transparent;color:var(--fm-muted);font-weight:400;} .btn.ghost:hover{background:var(--fm-panel-soft);color:var(--fm-text);border-color:transparent;} .btn.sm{padding:4px 10px;font-size:var(--fm-fs-sm);} /* Noch eine Stufe kleiner: für Knöpfe, die MITTEN IM SATZ stehen („… nicht nötig? [Interview überspringen]") und die Zeile sonst auseinanderdrücken. Nachgeliefert am 05.08., nachdem die Ratsche im Website-Builder angeschlagen hat: dort stand `font-size:11px;padding:2px 8px` dreizehnmal einzeln hingeschrieben — ein fehlender Baustein, keine Schlamperei. */ .btn.xs{padding:2px 8px;font-size:var(--fm-fs-xs);font-weight:500;} .btn.lg{padding:10px 18px;font-size:var(--fm-fs-md);} .btn-row{display:flex;gap:var(--fm-space-2);flex-wrap:wrap;align-items:center;} /* Aufklappbarer Bereich. Ein IST eine Funktion — man klickt darauf, und etwas passiert. Ohne Zeiger sieht es aus wie eine Überschrift, und niemand probiert es aus. Gemeldet vom Belege-Chat (design-a005), gemessen: 29 Stellen in 9 Modulen. Bewusst nur das Nötigste global: Zeiger, Auswahlschutz und ein leiser Hinweis beim Überfahren. Kein Rahmen, kein Abstand — sonst würde sich das Aussehen von 29 bestehenden Stellen ungefragt ändern. Wer den vollen Baustein will, setzt `class="aufklapp"` auf das
. */ summary{cursor:pointer;user-select:none;} summary:hover{color:var(--fm-brand-dark);} summary:focus-visible{box-shadow:var(--fm-focus);border-radius:var(--fm-radius-sm);outline:none;} .aufklapp{border:1px solid var(--fm-line);border-radius:var(--fm-radius-sm); background:var(--fm-panel);margin-bottom:var(--fm-space-2);} .aufklapp > summary{padding:9px var(--fm-space-4);font-weight:500;display:flex; align-items:center;gap:var(--fm-space-2);border-radius:inherit;} .aufklapp > summary:hover{background:var(--fm-btn-bg-hover);} .aufklapp[open] > summary{border-bottom:1px solid var(--fm-line-soft); border-radius:var(--fm-radius-sm) var(--fm-radius-sm) 0 0;} .aufklapp > summary::after{content:"›";margin-left:auto;color:var(--fm-muted); font-size:16px;line-height:1;transform:rotate(90deg); transition:transform var(--fm-motion) var(--fm-ease-out);} .aufklapp[open] > summary::after{transform:rotate(-90deg);} .aufklapp > :not(summary){padding:var(--fm-space-3) var(--fm-space-4);} /* ── 8b · INFORMATION und WICHTIGES ───────────────────────────────────────── Die Gegenstücke zum Knopf. Owner 05.08.: die Abgrenzung sei „zu clean gehalten, dass man das schnell erfassen kann". Regel: Bezeichnung ist klein, grau und gesperrt — der Wert ist normal groß und dunkel. Damit liest das Auge zuerst die Antwort und erst danach die Frage. Nichts davon ist klickbar; alles Klickbare ist ein .btn. */ .label{font-size:var(--fm-fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--fm-muted);} .kv{display:flex;flex-direction:column;gap:1px;min-width:0;} .kv .k{font-size:var(--fm-fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--fm-muted);} .kv .v{font-size:var(--fm-fs);color:var(--fm-text);overflow:hidden;text-overflow:ellipsis;} .kvs{display:flex;gap:var(--fm-space-5);flex-wrap:wrap;} /* Wichtiges: größer, kräftiger, mit Zahlen die untereinander stehen. */ .wert{font-size:var(--fm-fs-lg);font-weight:700;color:var(--fm-text);font-variant-numeric:tabular-nums; line-height:1.2;} .wert.brand{color:var(--fm-brand-dark);} .wert.gut{color:var(--fm-good);} .wert.schlecht{color:var(--fm-bad);} /* Hervorgehobene Zeile: getönte Fläche + Bronze-Kante. Für das eine, was in einer Ansicht wirklich zuerst gesehen werden muss — sparsam einsetzen, sonst hebt sich nichts mehr ab. */ .hebt{border-left:3px solid var(--fm-kante);background:var(--fm-brand-bg); padding:var(--fm-space-3) var(--fm-space-4);border-radius:0 var(--fm-radius-sm) var(--fm-radius-sm) 0;} .item.wichtig{border-left:3px solid var(--fm-kante);} .item.gut{border-left:3px solid var(--fm-good);} .item.schlecht{border-left:3px solid var(--fm-bad);} /* ── 9 · Formulare ──────────────────────────────────────────────────────── */ .formrow{display:flex;gap:var(--fm-space-3);flex-wrap:wrap;align-items:flex-end;} .field{display:flex;flex-direction:column;gap:var(--fm-space-1);font-size:var(--fm-fs-sm);color:var(--fm-muted);} .field input,.field select,.field textarea, input[type=text],input[type=email],input[type=number],input[type=date], input[type=search],input[type=password],select,textarea{ font:inherit;font-size:var(--fm-fs);padding:8px 10px;border:1px solid var(--fm-line); border-radius:var(--fm-radius-sm);background:var(--fm-feld-bg);color:var(--fm-text); transition:border-color var(--fm-motion-fast) var(--fm-ease-out);} .field input,.field select{min-width:150px;} /* Feld, das die Restbreite nimmt — für Eingaben, deren Inhalt lang wird und deren Länge man beim Tippen sehen muss: mehrere kommagetrennte Werte, Betreffzeilen, Suchbegriffe. Gemeldet vom Mail-Archiv (mailarchiv-a001): dort standen mehrere Werte in einem Feld von Standardbreite. */ .field.weit{flex:1;min-width:220px;} .field.weit input,.field.weit select,.field.weit textarea{width:100%;} input:hover,select:hover,textarea:hover{border-color:var(--fm-line-hover);} input:focus,select:focus,textarea:focus{border-color:var(--fm-brand-soft);} /* Owner 05.08.2026: „Ganz unten die Suchfelder — der graue Text ist etwas zu hell, das erkennt man nur sehr schwer." Der Platzhalter sagt, wonach man suchen kann; wer ihn nicht lesen kann, weiß nicht, was das Feld erwartet. Vorher #9aa3b2 (2,8:1 — deutlich unter der Grenze), jetzt ein eigener Token mit 4,7:1. */ input::placeholder,textarea::placeholder{color:var(--fm-placeholder);opacity:1;} /* Pflichtfeld sichtbar machen, statt es beim Absenden zu verraten */ .field .req{color:var(--fm-bad);} /* Fehler steht UNTER dem Feld, wo er entsteht — nicht pauschal oben */ .field.err input,.field.err select,.field.err textarea{border-color:var(--fm-bad);background:var(--fm-feld-fehler-bg);} .field-err{color:var(--fm-bad);font-size:var(--fm-fs-xs);} .field-hint{color:var(--fm-muted);font-size:var(--fm-fs-xs);} .switchline{display:flex;align-items:center;justify-content:space-between;gap:var(--fm-space-3); padding:10px 0;border-bottom:1px solid var(--fm-line-soft);} .switchline:last-child{border-bottom:0;} .switchline .lbl{font-weight:600;} .switchline .sub{color:var(--fm-muted);font-size:var(--fm-fs-sm);} /* ── 10 · Status ────────────────────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fm-fs-xs);font-weight:700; padding:3px 9px;border-radius:var(--fm-radius-pill);white-space:nowrap;} .b-ok{color:var(--fm-good);background:var(--fm-good-bg);} .b-warn{color:var(--fm-warn);background:var(--fm-warn-bg);} .b-bad{color:var(--fm-bad);background:var(--fm-bad-bg);} .b-info{color:var(--fm-info);background:var(--fm-info-bg);} .b-muted{color:var(--fm-muted);background:var(--fm-panel-soft);} .b-brand{color:var(--fm-auf-brand);background:var(--fm-brand-solid);} /* Chip = anklickbarer Filter/Merker mit ✕ (Mailarchiv-Filterblasen, Empfängerlisten) */ .chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fm-fs-sm); padding:4px 6px 4px 11px;border:1px solid var(--fm-line);background:var(--fm-panel); border-radius:var(--fm-radius-pill);white-space:nowrap;} .chip.aus{text-decoration:line-through;opacity:.7;} .chip .x{border:0;background:none;cursor:pointer;color:var(--fm-muted);font-size:14px; line-height:1;padding:2px 4px;border-radius:var(--fm-radius-pill);} .chip .x:hover{background:var(--fm-panel-soft);color:var(--fm-bad);} .chips{display:flex;gap:var(--fm-space-2);flex-wrap:wrap;} /* Hinweiskasten — Farbe UND Wort, nie Farbe allein */ .hinweis{display:flex;gap:var(--fm-space-3);align-items:flex-start;padding:var(--fm-space-3) var(--fm-space-4); border-radius:var(--fm-radius);border:1px solid var(--fm-line);background:var(--fm-panel-soft); font-size:var(--fm-fs);margin-bottom:var(--fm-space-3);} .hinweis .ic{flex:none;font-weight:700;} .hinweis.ok{background:var(--fm-good-bg);border-color:var(--fm-good-line);color:var(--fm-good);} .hinweis.warn{background:var(--fm-warn-bg);border-color:var(--fm-warn-line);color:var(--fm-warn);} .hinweis.bad{background:var(--fm-bad-bg);border-color:var(--fm-bad-line);color:var(--fm-bad);} .hinweis.info{background:var(--fm-info-bg);border-color:var(--fm-info-line);color:var(--fm-info);} /* ── 11 · Zustände ──────────────────────────────────────────────────────── */ /* Leerzustand ist Pflicht: nie eine leere Fläche, immer der nächste Schritt */ .empty{display:flex;flex-direction:column;align-items:center;gap:var(--fm-space-3); padding:var(--fm-space-10) var(--fm-space-5);text-align:center;color:var(--fm-muted);} .empty .ic{font-size:30px;opacity:.5;} .empty .t{font-weight:600;color:var(--fm-text);} .empty .s{font-size:var(--fm-fs-sm);max-width:52ch;} /* Kein stilles Werkeln: alles über 300 ms zeigt, dass etwas läuft */ .laedt{display:flex;align-items:center;gap:var(--fm-space-2);color:var(--fm-muted);font-size:var(--fm-fs-sm); padding:var(--fm-space-4);} .spinner{width:15px;height:15px;flex:none;border:2px solid var(--fm-line);border-top-color:var(--fm-brand); border-radius:50%;animation:fm-dreh .7s linear infinite;} @keyframes fm-dreh{to{transform:rotate(360deg)}} .skeleton{background:linear-gradient(90deg,var(--fm-panel-soft) 25%,#e4e9ef 50%,var(--fm-panel-soft) 75%); background-size:400% 100%;animation:fm-schimmer 1.4s ease-in-out infinite;border-radius:var(--fm-radius-sm); height:14px;margin-bottom:var(--fm-space-2);} .skeleton.zeile-kurz{width:45%;} .skeleton.zeile-lang{width:85%;} .skeleton.block{height:64px;} @keyframes fm-schimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* Fortschritt — sichtbar, was gerade läuft */ .fortschritt{height:6px;background:var(--fm-panel-soft);border-radius:var(--fm-radius-pill);overflow:hidden;} .fortschritt > i{display:block;height:100%;background:var(--fm-brand);border-radius:inherit; transition:width var(--fm-motion-slow) var(--fm-ease-out);} /* ── 12 · Trefferlisten ─────────────────────────────────────────────────── */ /* Ein Treffer/Datensatz als Zeile: Inhalt links, Aktionen rechts. Ersetzt die handgebauten Kachel-Konstruktionen in Mailarchiv, Belegen, Makler-Akquise. */ .items{display:flex;flex-direction:column;gap:var(--fm-space-2);} .item{background:var(--fm-panel);border:1px solid var(--fm-line);border-radius:var(--fm-radius); padding:var(--fm-space-3) var(--fm-space-4);box-shadow:var(--fm-shadow-sm); transition:border-color var(--fm-motion-fast) var(--fm-ease-out),box-shadow var(--fm-motion) var(--fm-ease-out);} .item:hover{border-color:var(--fm-brand-soft);box-shadow:var(--fm-shadow);} .item-kopf{display:flex;justify-content:space-between;gap:var(--fm-space-3);align-items:flex-start;} .item-haupt{min-width:0;flex:1;} .item-titel{font-weight:650;font-size:var(--fm-fs-md);overflow:hidden;text-overflow:ellipsis; letter-spacing:-.005em;} /* Information in der Zeile: die Bezeichnung („Von", „An") tritt zurück, der Wert steht vorn. Vorher waren beide gleich grau — man las erst die Frage, dann die Antwort, und das bei jedem einzelnen Treffer. */ .item-zeile{color:var(--fm-text);font-size:var(--fm-fs-sm);margin-top:3px;} .item-zeile b,.item-zeile .k{font-size:var(--fm-fs-xs);font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--fm-muted);margin-right:1px;} .item-zeile.leise{color:var(--fm-muted);} .item-auszug{font-size:var(--fm-fs-sm);margin-top:var(--fm-space-2);color:var(--fm-text);opacity:.85;} .item-akt{display:flex;flex-direction:column;gap:var(--fm-space-1);align-items:flex-end;flex:none;} .item-detail{margin-top:var(--fm-space-3);border-top:1px solid var(--fm-line-soft);padding-top:var(--fm-space-3);} /* Langer Text zum Mitlesen (Mail-Inhalt, Protokoll, Notiz): scrollt in seinem Kasten, behält Absätze, wächst der Seite nicht davon. Zeilenhöhe 1.6, weil hier wirklich gelesen wird — nicht überflogen. */ .textblock{white-space:pre-wrap;font-size:var(--fm-fs);line-height:1.6;max-height:420px; overflow:auto;background:var(--fm-panel-soft);border:1px solid var(--fm-line-soft); border-radius:var(--fm-radius-sm);padding:var(--fm-space-3) var(--fm-space-4);} /* Dateipfad. Umbricht überall — ein Pfad ist kein Satz, und abgeschnitten ist er wertlos. Gehört zu jedem Treffer, der auf eine echte Datei zeigt. */ .pfad{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--fm-fs-sm); word-break:break-all;color:var(--fm-muted);} /* Ergebniskopf: „1–200 von 4.812" steht immer da, nie still abschneiden */ .treffer-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--fm-space-3); flex-wrap:wrap;padding:var(--fm-space-2) var(--fm-space-1) var(--fm-space-3);} .treffer-kopf b{font-size:var(--fm-fs-md);} /* ── 13 · Werkzeugleiste · Tabs · Segmente · Suche ──────────────────────── */ /* Das mit Abstand häufigste Inline-Muster (389×): eine Zeile mit Abstand, mittig ausgerichtet, umbrechend. Ab jetzt: class="toolbar". */ .toolbar{display:flex;gap:var(--fm-space-2);align-items:center;flex-wrap:wrap;} .toolbar.eng{gap:var(--fm-space-1);} .toolbar.weit{gap:var(--fm-space-3);} .toolbar > .right,.toolbar .push{margin-left:auto;} .searchbar{display:flex;gap:var(--fm-space-2);align-items:center;flex-wrap:wrap;} .searchbar input{flex:1;min-width:260px;} /* Owner 05.08.: „da gefällt mir das mit der Liste/Kacheln/Tabelle als Umschalter viel besser als oben das mit dem ‚mit Anhang, ungelesen, zuletzt geändert'." Beide sind Funktionen — also bekommen beide eine Fläche. Die flachen Tabs, bei denen nur ein Strich den aktiven Zustand trug, sind damit weg. */ .tabs{display:flex;gap:var(--fm-space-1);margin-bottom:var(--fm-space-4);overflow-x:auto; background:var(--fm-panel-soft);border:1px solid var(--fm-line);border-radius:var(--fm-radius-sm); padding:3px;} .tab{border:1px solid transparent;background:none;font:inherit;font-size:var(--fm-fs);color:var(--fm-muted); cursor:pointer;padding:6px 14px;border-radius:calc(var(--fm-radius-sm) - 2px);white-space:nowrap;font-weight:500; transition:background var(--fm-motion-fast) var(--fm-ease-out),color var(--fm-motion-fast) var(--fm-ease-out);} .tab:hover{color:var(--fm-text);background:var(--fm-btn-bg-hover);} .tab.active{background:var(--fm-brand-solid);color:var(--fm-auf-brand);font-weight:600; border-color:var(--fm-brand-solid);} /* Für Seiten mit sehr vielen Bereichen (Verwaltung) bleibt die schlanke Reiterzeile erhalten — dort würde eine volle Leiste die halbe Ansicht auffressen. */ .tabs.schlank{background:none;border:0;border-bottom:1px solid var(--fm-line);border-radius:0;padding:0;} .tabs.schlank .tab{border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;} .tabs.schlank .tab.active{background:none;color:var(--fm-brand-dark);border-bottom-color:var(--fm-brand); border-color:transparent;border-bottom-color:var(--fm-brand);} .segment{display:inline-flex;background:var(--fm-panel-soft);border:1px solid var(--fm-line); border-radius:var(--fm-radius-sm);padding:3px;gap:2px;} .segment button{border:0;background:none;font:inherit;font-size:var(--fm-fs-sm);color:var(--fm-muted); padding:5px 12px;border-radius:calc(var(--fm-radius-sm) - 2px);cursor:pointer;white-space:nowrap;font-weight:500; transition:background var(--fm-motion-fast) var(--fm-ease-out),color var(--fm-motion-fast) var(--fm-ease-out);} .segment button:hover{color:var(--fm-text);} .segment button.active{background:var(--fm-panel);color:var(--fm-text);font-weight:600;box-shadow:var(--fm-shadow-sm);} /* ── 14 · Chat-Blasen (Website-Builder-Interview, Coach-Check-in) ───────── */ .fm-chat,.wb-chat,.coach-chat{max-height:420px;overflow-y:auto;padding:var(--fm-space-3); background:var(--fm-panel-soft);border-radius:var(--fm-radius);display:flex;flex-direction:column;gap:var(--fm-space-3);} .fm-chat-msg,.wb-chat-msg,.coach-chat-msg{display:flex;} .fm-chat-msg.user,.wb-chat-msg.user,.coach-chat-msg.user{justify-content:flex-end;} .fm-chat-msg .bubble,.wb-chat-msg .bubble,.coach-chat-msg .bubble{ max-width:78%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;} .fm-chat-msg.assistant .bubble,.wb-chat-msg.assistant .bubble,.coach-chat-msg.assistant .bubble{ background:#fff;border:1px solid var(--fm-line);border-bottom-left-radius:3px;} .fm-chat-msg.user .bubble,.wb-chat-msg.user .bubble,.coach-chat-msg.user .bubble{ background:var(--fm-brand);color:#fff;border-bottom-right-radius:3px;} /* ── 14b · Dialoge ────────────────────────────────────────────────────────── Die vier FM-Helfer (melde · frage · eingabe · zeigeWert) sind der vom Owner verlangte Ersatz für Browser-Fenster. Ihre Optik lag bis 09.08.2026 als eingebetteter Block in app.js — außerhalb des Design-Systems, mit eigener z-Zahl (10000) und Fallback-Farben. Zwei Folgen, beide gemessen: · Eingabefelder im Dialog standen fest auf `background:#fff` bei `color:inherit` — in der dunklen Fassung also heller Text auf weißem Feld. · Die dunkle Fassung griff dort nur zufällig, über die Fallbacks. Deshalb steht die Optik jetzt hier. Der Block in app.js ist damit doppelt und gehört entfernt — das ist Hüllen-Revier und als Auftrag unterwegs. Solange er dort steht, gewinnt er (er wird später eingehängt); kaputt geht nichts. */ .fmd-hg{position:fixed;inset:0;background:rgba(10,13,18,.6);z-index:var(--fm-z-overlay); display:flex;align-items:center;justify-content:center;padding:var(--fm-space-4);} .fmd-box{background:var(--fm-panel);color:var(--fm-text); border:1px solid var(--fm-line);border-radius:var(--fm-radius-lg); box-shadow:var(--fm-shadow-lg);max-width:min(560px,94vw);width:100%; max-height:88vh;overflow:auto;padding:var(--fm-space-5) var(--fm-space-6);} .fmd-box h3{margin:0 0 var(--fm-space-2);font-size:var(--fm-fs-lg);color:var(--fm-brand-dark);} .fmd-txt{font-size:var(--fm-fs);line-height:var(--fm-lh);white-space:pre-wrap; margin:0 0 var(--fm-space-3);user-select:text;} .fmd-box input,.fmd-box textarea{width:100%;box-sizing:border-box; background:var(--fm-feld-bg);color:var(--fm-text);} .fmd-wert{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--fm-fs-sm); background:var(--fm-panel-soft);border:1px solid var(--fm-line); border-radius:var(--fm-radius-sm);padding:10px var(--fm-space-3);word-break:break-all; user-select:all;max-height:34vh;overflow:auto;} .fmd-akt{display:flex;gap:var(--fm-space-2);justify-content:flex-end; margin-top:var(--fm-space-4);flex-wrap:wrap;} .fmd-b{font:inherit;font-size:var(--fm-fs);padding:8px var(--fm-space-4); border-radius:var(--fm-radius-sm);cursor:pointer;border:1px solid var(--fm-btn-line); background:var(--fm-btn-bg);color:var(--fm-text);font-weight:500;} .fmd-b:hover{background:var(--fm-btn-bg-hover);} .fmd-b.pri{background:var(--fm-brand-solid);border-color:var(--fm-brand-solid); color:var(--fm-auf-brand);font-weight:600;} .fmd-hint{font-size:var(--fm-fs-sm);color:var(--fm-muted);margin-top:var(--fm-space-2);} /* Eigener Inhalt im Dialog (Formularzeilen, Tabelle, Hinweis) bekommt Luft nach unten, damit die Knopfleiste nicht am Text klebt. */ .fmd-inhalt{margin-bottom:var(--fm-space-3);} /* ── 14c · Eingebettete Fremdansicht ──────────────────────────────────────── Für Inhalte, die NICHT von uns kommen und in einem abgeschotteten Rahmen laufen: die Original-Mail im Mail-Archiv, später Vorschauen fremder Dokumente. Der weiße Hintergrund bleibt auch in der dunklen Fassung — und das ist kein Versehen: Eine fremde Mail bringt ihre eigenen, meist dunklen Schriftfarben mit. Auf dunklem Grund wäre sie unlesbar. Dieselbe Überlegung wie bei der hellen Insel: Was wir nicht kontrollieren, lassen wir hell. Die Höhe setzt das Modul über das HTML-Attribut, nicht über CSS. Grund: Der Rahmen ist bewusst nicht skriptfähig und kann seine eigene Höhe nicht melden — Scrollen im Rahmen ist die ehrliche Lösung. */ .fremdansicht{display:block;width:100%;background:#fff;color-scheme:light; border:1px solid var(--fm-line);border-radius:var(--fm-radius);} :root[data-theme="dark"] .fremdansicht{border-color:var(--fm-btn-line);} /* ── 15 · Toast ─────────────────────────────────────────────────────────── */ .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(8px); background:#151922;color:#fff;padding:10px 18px;border-radius:var(--fm-radius-sm);font-size:var(--fm-fs); opacity:0;transition:opacity var(--fm-motion) var(--fm-ease-out),transform var(--fm-motion) var(--fm-ease-out); pointer-events:none;z-index:var(--fm-z-toast);box-shadow:var(--fm-shadow-lg);} .toast.show{opacity:.97;transform:translateX(-50%) translateY(0);} /* Icons: SVG aus /static/assets/brand/icons.svg — nie Emoji als Bedien-Icon. */ svg.ic{width:16px;height:16px;flex:none;vertical-align:-2px;} svg.ic.lg{width:20px;height:20px;} .btn svg.ic{margin-right:-1px;} /* ── 16 · Hilfsklassen ────────────────────────────────────────────────────── Diese ersetzen die häufigsten Inline-Stile aus der Inventur vom 05.08.2026. Wer sie benutzt, schreibt kein style="…" mehr — und der Abstand stimmt. */ .muted{color:var(--fm-muted);} .right{margin-left:auto;} .small{font-size:var(--fm-fs-sm);} /* ersetzt 12/12.5px */ .tiny{font-size:var(--fm-fs-xs);} /* ersetzt 10/11/11.5px */ .strong{font-weight:600;} .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.94em;} .nowrap{white-space:nowrap;} .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .txt-r{text-align:right;} .txt-c{text-align:center;} .txt-l{text-align:left;} .grow{flex:1;min-width:0;} .w-full{width:100%;} .row{display:flex;gap:var(--fm-space-2);align-items:center;flex-wrap:wrap;} .row.top{align-items:flex-start;} .row.bottom{align-items:flex-end;} .row.between{justify-content:space-between;} .col{display:flex;flex-direction:column;gap:var(--fm-space-2);} .gap-1{gap:var(--fm-space-1);} .gap-2{gap:var(--fm-space-2);} .gap-3{gap:var(--fm-space-3);} .gap-4{gap:var(--fm-space-4);} .mt-0{margin-top:0;} .mt-1{margin-top:var(--fm-space-1);} .mt-2{margin-top:var(--fm-space-2);} .mt-3{margin-top:var(--fm-space-3);} .mt-4{margin-top:var(--fm-space-4);} .mt-6{margin-top:var(--fm-space-6);} .mb-0{margin-bottom:0;} .mb-1{margin-bottom:var(--fm-space-1);} .mb-2{margin-bottom:var(--fm-space-2);} .mb-3{margin-bottom:var(--fm-space-3);} .mb-4{margin-bottom:var(--fm-space-4);} .mb-6{margin-bottom:var(--fm-space-6);} .scroll-x{overflow-x:auto;} .hidden{display:none;} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--fm-space-3);} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--fm-space-3);} /* ── 17 · Bewegung sparsam · kleine Bildschirme ─────────────────────────── */ /* Beim Umschalten hell/dunkel Übergänge kurz aussetzen. Befund des Mail-Archivs (mailarchiv-a001), sauber belegt: Ein laufender `transition:border-color` startet in Chromium NICHT neu, wenn sich nur die zugrundeliegende Variable ändert. Ein bereits sichtbares `.item` behielt deshalb beim Umschalten seinen alten Rahmen (rgb(200,208,221) statt rgb(57,65,79)) — ein frisch erzeugtes war sofort richtig, dasselbe Element mit `transition:none` ebenfalls. Es ist also kein Farbfehler, sondern ein Übergangs-Fehler, und er betrifft JEDES Modul mit `.item`, `.btn`, `.card` oder `.tile`. (Derselbe Effekt hat mich beim Messen am 05.08. selbst getäuscht: Ich hielt die veralteten Werte für ein Artefakt der Vorschau-Umgebung. Die Ursache ist diese.) Die App-Hülle setzt die Klasse beim Wechsel und nimmt sie wieder weg. WICHTIG: nicht nur über requestAnimationFrame — das feuert in einem Hintergrund-Tab gar nicht, und die Klasse bliebe für immer gesetzt (dann wären ALLE Übergänge der Oberfläche dauerhaft aus). Es braucht zusätzlich einen setTimeout als Notausgang; von spine beim Einbau gemessen. Fertiger Rumpf: DESIGN_SYSTEM.md §Umschalter. */ .theme-wechselt, .theme-wechselt *, .theme-wechselt *::before, .theme-wechselt *::after{ transition:none !important; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important;} } @media (max-width:1024px){ .main{padding:var(--fm-space-5);} } @media (max-width:768px){ .sidebar{flex-basis:64px;} .sidebar .navitem span:not(.ic),.sidebar .navgroup,.sidebar-foot .uname{display:none;} .main{padding:var(--fm-space-4);} .item-kopf{flex-direction:column;} .item-akt{flex-direction:row;align-items:center;} } /* ── 20 · Kanban-Brett (append-only Block, Website-Verkauf 13.08.2026) ─────── Bewusst GENERISCH benannt und zentral abgelegt statt im Modul: mehrere Module zeigen dieselbe Spalten-Ansicht (Akquise, Verkauf, Leads). Bisher baute jedes sein eigenes Brett per