html, body {
font-family: var(--rz-text-font-family);
height: 100%;
}
input {
font-family: var(--rz-text-font-family);
}
main {
width: 100%
}
hr {
margin: 0.75rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
.w-100 {
width: 100%;
!important
}
.h-100 {
height: 100%;
!important
}
:root {
/*--------------Overrides------------------------------*/
/* Native Controls (Scrollbars, Form-Inputs, Selektionen) folgen dem System-Modus (dark-1/dark-3). */
color-scheme: light dark;
--rz-text-font-family: 'Sora', sans-serif;
--rz-root-font-size: 14px;
/* Caption etwas größer als der humanistic-Default (0.75rem). */
--rz-text-caption-font-size: 0.8rem;
/* Badges/Tags (z.B. Rollen-Tags) etwas größer als der humanistic-Default (0.75rem ≈ 10.5px). */
--rz-badge-font-size: 11px;
--rz-border-radius: 4px;
/* Pill-Radius für Action-Buttons (Primär/Sekundär), analog dem Hero-CTA auf finnofleet.com.
Grid-/Paginator-/Inputgroup-/Icon-Buttons behalten --rz-border-radius (Regelblock unten). */
--ff-button-radius: 24px;
/* ===== Schriftstärken: genau ZWEI Stufen (analog finnofleet/FiKnow) =====
MoMo nutzt bewusst nur zwei font-weights statt des humanistic-/Wildwuchs-Mixes
(500/600/700/bold): --ff-weight-normal als Standard und --ff-weight-strong als einzige
Hervorhebungsstufe. Alle --rz-*-font-weight unten referenzieren diese zwei Tokens, sodass
das gesamte Schrift-Gewicht zentral über genau diese zwei Zeilen steuerbar ist. */
--ff-weight-normal: 400;
--ff-weight-strong: 600; /* das einzige "Bold" — bei Bedarf hier global auf 700 anheben */
/* Standard (Regular): Fließtext, ALLE Überschriften (große, leichte Headlines wie FiKnow),
Untertitel, Tabs, Accordion, TOC, Menü-Labels. */
--rz-text-h1-font-weight: var(--ff-weight-normal);
--rz-text-h2-font-weight: var(--ff-weight-normal);
--rz-text-h3-font-weight: var(--ff-weight-normal);
--rz-text-h4-font-weight: var(--ff-weight-normal);
--rz-text-h5-font-weight: var(--ff-weight-normal);
--rz-text-h6-font-weight: var(--ff-weight-normal);
--rz-text-display-h1-font-weight: var(--ff-weight-normal);
--rz-text-display-h2-font-weight: var(--ff-weight-normal);
--rz-text-display-h3-font-weight: var(--ff-weight-normal);
--rz-text-display-h4-font-weight: var(--ff-weight-normal);
--rz-text-display-h5-font-weight: var(--ff-weight-normal);
--rz-text-display-h6-font-weight: var(--ff-weight-normal);
--rz-text-subtitle1-font-weight: var(--ff-weight-normal);
--rz-text-subtitle2-font-weight: var(--ff-weight-normal);
--rz-text-body1-font-weight: var(--ff-weight-normal);
--rz-text-body2-font-weight: var(--ff-weight-normal);
--rz-text-caption-font-weight: var(--ff-weight-normal);
--rz-text-overline-font-weight: var(--ff-weight-normal);
--rz-tabs-tab-font-weight: var(--ff-weight-normal);
--rz-accordion-item-font-weight: var(--ff-weight-normal);
--rz-toc-link-font-weight: var(--ff-weight-normal);
--rz-panel-menu-font-weight: var(--ff-weight-normal);
--rz-panel-menu-item-2nd-level-font-weight: var(--ff-weight-normal);
/* Hervorhebung (das eine Bold): funktionale Akzente, die sich bewusst abheben dürfen —
Tabellen-/Dialog-/Panel-Titel, aktiver Menüpunkt, Badge/Chip, Button. */
--rz-grid-header-font-weight: var(--ff-weight-strong);
--rz-dialog-title-font-weight: var(--ff-weight-strong);
--rz-panel-title-font-weight: var(--ff-weight-strong);
--rz-panel-menu-item-2nd-level-active-font-weight: var(--ff-weight-strong);
--rz-badge-font-weight: var(--ff-weight-strong);
--rz-chip-font-weight: var(--ff-weight-strong);
--rz-text-button-font-weight: var(--ff-weight-strong);
/* ===== FinnoFleet Brand Tokens (Brandbook 08.12.2025 v02) =====
Brand-Anker + vollständige neutrale Grau-Rampe (hell -> dunkel, Nummer wächst mit der
Dunkelheit). Alle neutralen rz- und theme-Werte referenzieren diese Tokens; im
Override-Layer stehen keine rohen Grau-Hex mehr (nur die Semantik- und Neon-Palette
bleibt als Literal). */
--ff-white: #FFFFFF;
--ff-neon: #99FF33;
--ff-neon-dark: #7ACC1F; /* dunkleres Neon für Hover/Active des Primär-CTA (>= 4.5:1 mit Anthrazit-Text) */
--ff-anthracite: #333333; /* Marken-Anthrazit (Header/Footer-Fläche, Standardtext) */
--ff-near-black: #1A1A1A; /* dunkler als Anthrazit: dunkelste Primary-/Secondary-Stufe + base-900 */
--ff-black: #000000; /* reines Schwarz (Radzen --rz-black) */
/* Neutrale Grau-Rampe (hell -> dunkel) */
--ff-grey-50: #FAFAFA; /* sehr hell (base-50) */
--ff-grey-60: #F7F7F7; /* sehr helles neutrales Grau (Grid-Stripe Light) */
--ff-grey-70: #F5F5F5; /* hell (base-100) */
--ff-grey-100: #EEEEEE;
--ff-grey-200: #DDDDDD;
--ff-grey-300: #CCCCCC;
--ff-grey-400: #AAAAAA;
--ff-grey-700: #757575;
--ff-grey-750: #666666; /* Sekundärtext (>= 4.5:1 auf Weiß) */
--ff-grey-800: #5C5C5C; /* base-600-Text; wertgleich mit Dark-Surface-4 */
--ff-grey-850: #4D4D4D; /* helle Primary-Variante; wertgleich mit Dark-Surface-3 */
--ff-grey-900: #424242; /* Dark Text (base-700) */
--ff-grey-950: #242424; /* dunkelste Primary-/Secondary-Hover-Stufe */
/* ===== Semantische Theme-Token (Light-Defaults) ===== */
/* Werden in einem Dark-Block (Task 8) unter gleichem Namen überschrieben. */
--theme-surface: var(--ff-white); /* Haupt-Hintergrundfläche */
--theme-surface-alt: var(--ff-grey-100); /* Abgesetzte Fläche (Sidebar, Stripe) */
--theme-text: var(--ff-anthracite); /* Standard-Textfarbe */
--theme-text-muted: var(--ff-grey-750); /* #666666 – Sekundärtext (>= 4.5:1 auf Weiß) */
--theme-header-bg: var(--ff-anthracite); /* Header/Footer-Fläche */
--theme-header-text: var(--ff-white); /* Schrift auf Header/Footer */
--theme-accent: var(--ff-neon); /* Akzent nur auf dunklen/neutralen Flächen */
--theme-border: var(--ff-grey-300); /* Standard-Rahmen */
--theme-card-border: var(--ff-anthracite); /* Kachel-Rahmen: markant statt dezent (Moduleinstiege) */
--theme-nav-active-bg: var(--ff-white); /* aktives Sidebar-Item: weiß, hebt sich vom grauen Sidebar-Grund (surface-alt) ab */
--theme-surface-raised: var(--ff-grey-100);/* leicht abgesetzte Fläche (Hover/Cards); im Light aktuell ungenutzt, hält die --theme-*-Schicht symmetrisch zum Dark-Block */
--theme-input-disabled-bg: var(--ff-grey-100); /* FINNOFLEET-Disabled-Fläche (Light #EEEEEE; Dark-Block: #666666) (#38672) */
/* ===== PRIMARY (Anthrazit-basiert; Lime/Neon ist Akzent, nicht Primärfläche) ===== */
--rz-primary: var(--theme-header-bg); /* Anthrazit */
--rz-primary-light: var(--ff-grey-850); /* #4D4D4D – Hellere Variante */
--rz-primary-lighter: var(--ff-grey-100); /* Noch heller (neutrales Grau) */
--rz-primary-dark: var(--ff-grey-950); /* #242424 – Dunklere Variante (Hover) */
--rz-primary-darker: var(--ff-near-black); /* Noch dunkler */
/* ===== ON-PRIMARY (Text auf Primary) ===== */
--rz-on-primary: var(--ff-white); /* Weißer Text auf Anthrazit */
--rz-on-primary-lighter: var(--ff-anthracite); /* Dunkler Text auf hellem Primary */
/* ===== SECONDARY (Anthrazit/Grau) ===== */
--rz-secondary: var(--theme-header-bg); /* Header, Navigation - Anthrazit */
--rz-secondary-light: var(--ff-grey-700); /* Hellere Variante */
--rz-secondary-lighter: var(--ff-grey-400); /* Noch heller */
--rz-secondary-dark: var(--ff-grey-950); /* #242424 – Dunklere Variante */
--rz-secondary-darker: var(--ff-near-black); /* Noch dunkler */
/* ===== ON-SECONDARY ===== */
--rz-on-secondary: var(--ff-white); /* Weißer Text auf Anthrazit */
--rz-on-secondary-lighter: var(--rz-secondary);
/* ===== BASE/GRAUSTUFEN (FinnoFleet-Greys) ===== */
--rz-base-50: var(--ff-grey-50); /* #FAFAFA – Sehr hell */
--rz-base-100: var(--ff-grey-70); /* #F5F5F5 – Hell */
--rz-base-200: var(--ff-grey-100); /* #EEEEEE - neutrales Grau */
--rz-base-300: var(--ff-grey-300); /* #CCCCCC - Borders */
--rz-base-400: var(--ff-grey-400); /* #AAAAAA - Placeholder */
--rz-base-500: var(--ff-grey-700); /* #757575 - Muted Text */
--rz-base-600: var(--ff-grey-800); /* #5C5C5C – Text */
--rz-base-700: var(--ff-grey-900); /* #424242 – Dark Text */
--rz-base-800: var(--ff-anthracite); /* #333333 - sehr dunkel */
--rz-base-900: var(--ff-near-black); /* Fast schwarz */
/* Neutrale "base"-Akzentfarbe: Radzen-Default ist ein Blaustich (#d9e1ea), der nicht ins
FF-Neutralgrau passt. Auf weiße Fläche + Anthrazit-Vordergrund setzen, damit base-Buttons
(z.B. DatePicker-Filter-Trigger, Clear-Filter in der Grid-Filterzeile) wie die übrigen
Eingabefelder aussehen. */
--rz-base: var(--ff-white);
--rz-base-light: var(--ff-grey-100);
--rz-base-lighter: var(--ff-white);
--rz-on-base: var(--ff-anthracite);
--rz-on-base-light: var(--ff-anthracite);
--rz-on-base-lighter: var(--ff-anthracite);
/* ===== SEMANTIC COLORS =====
Base- + Dark-Stufen sind FF-konform. Zusätzlich werden die -lighter-Stufen (pale Tint-Fläche
der flat/shade-lighter Radzen-Alerts & -Badges) und die zugehörigen on-*-lighter-Textfarben
gesetzt. Ohne diese Overrides fallen sie auf Radzens Teal-Defaults zurück (z.B. Info-Alert
teal-Text auf teal-Tint → off-brand & schwer lesbar). Textfarben >= 4.5:1 auf ihrer Tint-Fläche. */
--rz-success: #2F7A00; /* Eigenes dunkles Grün, >= 4.5:1 auf Weiß (5.38:1) */
--rz-success-lighter: rgba(47, 122, 0, 0.12); /* pale Grün-Tint (Alert-Fläche) */
--rz-on-success-lighter: #245E00; /* dunkles Grün auf Tint, ~6.6:1 */
--rz-info: #2D779B; /* FF-Sekundärblau, >= 4.5:1 auf Weiß (4.97:1) */
--rz-info-dark: #1F5670; /* Dunklere Info-Variante */
--rz-info-lighter: rgba(45, 119, 155, 0.12); /* pale Blau-Tint (Alert-Fläche) */
--rz-on-info-lighter: #1F5670; /* Dunkelblau auf Tint, ~6.9:1 */
--rz-warning: #B26A00; /* Bernstein für Warnung, >= 4.5:1 auf Weiß */
--rz-warning-lighter: rgba(178, 106, 0, 0.12); /* pale Bernstein-Tint */
--rz-on-warning-lighter: #8A5200; /* dunkles Bernstein auf Tint, ~5.4:1 */
--rz-danger: #C53030; /* Rot für Fehler (5.47:1 auf Weiß) */
--rz-danger-lighter: rgba(197, 48, 48, 0.12); /* pale Rot-Tint */
--rz-on-danger-lighter: #9B2424; /* Dunkelrot auf Tint, ~6.5:1 */
--rz-link-color: #2D779B; /* FF-Sekundärblau, >= 4.5:1 auf Weiß */
/* ===== TEXT ===== */
--rz-text-color: var(--theme-text); /* Standard Textfarbe - Anthrazit */
--rz-text-title-color: var(--ff-anthracite); /* Überschriften */
--rz-text-secondary-color: var(--theme-text-muted); /* Sekundärer Text */
/* ===== SONSTIGES ===== */
--rz-white: var(--ff-white);
--rz-black: var(--ff-black);
--rz-txs-hover-color: var(--ff-grey-300);
/* Layout */
--rz-layout-body-padding: 0.75rem;
/* Dialog - Header wie App-Header */
--rz-dialog-title-background-color: var(--rz-secondary);
--rz-dialog-title-color: var(--ff-white);
--rz-dialog-title-border: none;
--rz-dialog-close-color: var(--ff-white);
--rz-dialog-close-hover-color: var(--ff-neon); /* Neon-Akzent auf dunkler Dialog-Titelleiste */
/* Tooltip - wie Header */
--rz-tooltip-background-color: var(--rz-secondary);
--rz-tooltip-color: var(--ff-white);
/* Listbox */
--rz-listbox-filter-border: var(--rz-border-base-300);
--rz-listbox-border-radius: 0;
--rz-listbox-border: var(--rz-border-normal);
/* Sidebar */
--rz-sidebar-width: 180px;
--rz-sidebar-background-color: var(--theme-surface-alt); /* Abgesetzt vom Content (Weiß) */
/* Grid */
--rz-grid-header-background-color: var(--rz-secondary);
--rz-grid-frozen-cell-background-color: var(--rz-secondary);
--rz-grid-header-color: var(--ff-white);
--rz-grid-sort-icon-color: var(--ff-white);
--rz-grid-filter-color: var(--rz-grid-header-color);
--rz-grid-header-filter-icon-hover-color: var(--ff-neon); /* Neon-Akzent auf dunklem Grid-Header */
--rz-grid-header-filter-icon-active-color: var(--rz-grid-header-filter-icon-hover-color);
--rz-grid-selected-background-color: var(--rz-primary); /* Anthrazit-Auswahl */
--rz-grid-selected-color: var(--ff-white);
--rz-grid-hover-background-color: var(--ff-grey-100); /* neutrales Grau statt grünstichig */
--rz-grid-hover-color: var(--rz-text-color);
/* Panel-Menu
AC-4: Aktiver Menüpunkt = neutraler Grey-100-Grund + Neon-Akzentbalken (siehe Selektor
.rz-navigation-item-wrapper-active unten). Neon ist NUR Akzent-Balken, nicht Textfarbe
(Geschäftsregel: Neon auf hellem Grund hat ~1.5:1 Kontrast, unter WCAG-Schwelle). */
/* Nav-Item-Schrift auf 1rem (= 14px bei --rz-root-font-size) heben. Der humanistic-Default
--rz-body-font-size (0.875rem) ergäbe bei 14px-Root nur 12.25px — Menüeinträge sollen aber
volle 14px behalten. Gilt für Haupt- und Untermenü-Einträge. */
--rz-panel-menu-font-size: 1rem;
--rz-panel-menu-item-2nd-level-font-size: 1rem;
--rz-panel-menu-item-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-color: var(--rz-text-color);
--rz-panel-menu-item-border: var(--rz-base-300);
--rz-panel-menu-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-active-background-color: var(--theme-nav-active-bg); /* abgesetzte Fläche, hebt sich vom Sidebar-Grund ab */
--rz-panel-menu-item-active-color: var(--rz-text-color); /* Anthrazit-Text (>= 4.5:1 auf Weiß) */
--rz-panel-menu-item-active-indicator: var(--ff-neon); /* Neon-Akzentbalken */
--rz-panel-menu-item-hover-background-color: var(--ff-grey-300); /* neutrales Grau-Hover */
--rz-panel-menu-item-hover-color: var(--rz-text-color);
--rz-panel-menu-item-icon-hover-color: var(--rz-text-color);
--rz-panel-menu-item-2nd-level-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-2nd-level-active-background-color: var(--ff-grey-100);
--rz-panel-menu-item-2nd-level-hover-background-color: var(--ff-grey-300);
--rz-panel-menu-item-2nd-level-hover-color: var(--rz-text-color);
--rz-panel-menu-item-3rd-level-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-3rd-level-active-background-color: var(--ff-grey-100);
--rz-panel-menu-item-3rd-level-hover-background-color: var(--ff-grey-300);
--rz-panel-menu-item-3rd-level-hover-color: var(--rz-text-color);
/* DropDown */
--rz-dropdown-item-selected-shadow: none;
--rz-dropdown-item-padding: 0.25rem 0.5rem;
--rz-dropdown-item-hover-background-color: var(--rz-base-100);
--rz-dropdown-item-selected-hover-background-color: var(--rz-base-100);
--rz-dropdown-item-selected-background-color: transparent;
--rz-dropdown-item-hover-color: var(--rz-secondary);
--rz-dropdown-item-selected-color: var(--rz-secondary);
--rz-dropdown-item-selected-hover-color: var(--rz-secondary);
/* Menu */
--rz-menu-item-hover-color: var(--rz-secondary);
--rz-menu-item-icon-hover-color: var(--rz-secondary);
--rz-menu-item-hover-background-color: var(--rz-base-100);
/* Switch - "An" = Neon-Track + Anthrazit-Thumb (Marken-Highlight = aktiv, einheitlich mit
Dark-Mode und Primär-CTA). Dunkler Thumb statt weiß: weiß auf Neon nur ~1.3:1, Anthrazit ~10:1.
Ein dezenter Rand (Regel .rz-switch-checked .rz-switch-circle weiter unten) definiert den
Neon-Track auf heller Fläche (Neon auf Weiß ~1.5:1). */
--rz-switch-checked-background-color: var(--ff-neon);
--rz-switch-checked-circle-background-color: var(--ff-anthracite);
/* AI Chat */
--rz-chat-border: none;
--rz-chat-border-radius: 0;
/* ===== FINNOFLEET FIXES ===== */
/* Header - Anthrazit-Fläche, weiße Schrift (AC-2) */
--rz-header-background-color: var(--theme-header-bg);
--rz-header-color: var(--theme-header-text);
/* Footer - gleiche Fläche wie Header (AC-2) */
--rz-footer-background-color: var(--theme-header-bg);
--rz-footer-color: var(--theme-header-text);
--rz-footer-border: none;
--rz-footer-padding: 0;
/* Content Background - reines Weiß als Light-Surface */
--rz-body-background-color: var(--theme-surface);
/* Grid Stripe - neutrale Grau-Ableitung (kein Grünstich) */
--rz-grid-stripe-background-color: var(--ff-grey-60); /* #F7F7F7 – sehr helles neutrales Grau */
--rz-grid-row-hover-background-color: var(--ff-grey-100); /* #EEEEEE für Hover */
/* Button Primary - Neon-Fläche, Anthrazit-Text als Marken-CTA wie der Hero-Button auf
finnofleet.com ("Unsere Lösungen"). #333333 auf #99FF33 = ~10:1 (WCAG AAA): Die
Brandbook-Regel "Neon nicht für Text/Icon auf Weiß" betrifft Neon als Vordergrund,
NICHT Neon als Fläche mit dunklem Text. --rz-primary bleibt Anthrazit (Grid-Auswahl etc.).
HINWEIS: Das humanistic-Theme liest diese --rz-button-primary-*-Token für den Filled-Button
NICHT (es leitet die Fläche aus --rz-primary ab); operative Regel ist der
.rz-button.rz-primary.rz-variant-filled-Override weiter unten. */
--rz-button-primary-background-color: var(--ff-neon);
--rz-button-primary-hover-background-color: var(--ff-neon-dark);
--rz-button-primary-color: var(--ff-anthracite);
--rz-button-primary-hover-color: var(--ff-anthracite);
--rz-button-primary-active-color: var(--ff-anthracite);
--rz-on-primary-dark: var(--ff-white);
--rz-on-primary-darker: var(--ff-white);
/* Button Secondary/Outline - weißer Grund, Anthrazit-Text (AC-5).
HINWEIS: --rz-button-secondary-border wird vom humanistic-Theme für den Filled/Outline-Button
NICHT gelesen — der Outline-Rahmen entsteht aus box-shadow: inset … var(--rz-secondary)
(Identity-Farbe). Im Light wirkt der Rahmen daher über --rz-secondary (Anthrazit), im Dark
über den .rz-variant-outlined.rz-secondary-box-shadow-Override unten. Das Border-Token bleibt
nur für Theme-Varianten gesetzt, die es respektieren. */
--rz-button-secondary-background-color: var(--ff-white);
--rz-button-secondary-color: var(--ff-anthracite);
--rz-button-secondary-border: 1px solid var(--ff-grey-300);
--rz-button-secondary-hover-background-color: var(--ff-grey-100);
--rz-button-secondary-hover-color: var(--ff-anthracite);
/* Button Light - identisch zum Secondary/Outline-Schema.
HINWEIS: --rz-button-light-border ist (wie --rz-button-secondary-border) für humanistic
wirkungslos — Outline via box-shadow aus --rz-secondary. Nur für Konsistenz gesetzt. */
--rz-button-light-background-color: var(--ff-white);
--rz-button-light-color: var(--ff-anthracite);
--rz-button-light-border: 1px solid var(--ff-grey-300);
--rz-button-light-hover-background-color: var(--ff-grey-100);
/* Button Tertiary/Text - transparent, Anthrazit-Text, Grey-100-Hover (AC-5) */
--rz-button-text-color: var(--ff-anthracite);
--rz-button-text-hover-background-color: var(--ff-grey-100);
--rz-button-text-hover-color: var(--ff-anthracite);
}
/* Text Secondary Buttons - gleiche Hover-Farbe wie Sidebar */
.rz-button.rz-secondary.rz-variant-text:hover {
background-color: var(--rz-base-100) !important;
}
/* Marken-CTA-Form: ALLE Buttons als Pill (--ff-button-radius), analog finnofleet/FiKnow, wo
Buttons durchgehend voll-pill sind. Icon-only-Buttons werden dadurch rund; freistehende
Grid-/Paginator-Buttons ebenso. Verbundene Container (Block darunter) behalten innen flache,
nur außen gerundete Kanten. */
.rz-button {
border-radius: var(--ff-button-radius);
}
/* Verbundene Button-Container: die inneren (geteilten) Kanten bleiben flach, nur die ÄUSSEREN
Ecken werden als Marken-Pill gerundet — sonst zeigten verbundene Buttons bzw. der Inputgroup-
Trigger runde Ecken gegen ihren Nachbarn bzw. das eckige Eingabefeld. Horizontale Anordnung
(Normalfall); SelectBar wird wegen seiner eigenen horizontal/vertical-Variante separat unten
behandelt. */
.rz-buttongroup .rz-button,
.rz-buttonset .rz-button,
.rz-selectbutton .rz-button,
.rz-inputgroup .rz-button {
border-radius: 0;
}
.rz-buttongroup .rz-button:first-child,
.rz-buttonset .rz-button:first-child,
.rz-selectbutton .rz-button:first-child,
.rz-inputgroup .rz-button:first-child {
border-start-start-radius: var(--ff-button-radius);
border-end-start-radius: var(--ff-button-radius);
}
.rz-buttongroup .rz-button:last-child,
.rz-buttonset .rz-button:last-child,
.rz-selectbutton .rz-button:last-child,
.rz-inputgroup .rz-button:last-child {
border-start-end-radius: var(--ff-button-radius);
border-end-end-radius: var(--ff-button-radius);
}
/* SplitButton = Haupt-Button + Menü-Trigger (.rz-splitbutton-menubutton) + verstecktes Menü-div.
Als verbundene Einheit runden: Haupt-Button nur links, Menü-Trigger nur rechts. Gezielt über
die Klassen statt über :last-child, weil das (display:none-)Menü-div das letzte Kind ist und
:last-child den Trigger sonst nicht trifft. */
.rz-splitbutton .rz-button {
border-radius: 0;
}
.rz-splitbutton .rz-button:first-child {
border-start-start-radius: var(--ff-button-radius);
border-end-start-radius: var(--ff-button-radius);
}
.rz-splitbutton .rz-splitbutton-menubutton {
border-start-end-radius: var(--ff-button-radius);
border-end-end-radius: var(--ff-button-radius);
}
/* SelectBar = Segmented Control (rendert als .rz-selectbar.rz-buttonset). Der Pill-Reset oben
(.rz-button:not(icon-only)) würde sonst jeden Button rundum runden – die inneren (verbundenen)
Ecken zeigten dann zueinander. Daher: innere/verbundene Kanten flach, nur die ÄUSSEREN Ecken der
Rand-Buttons als Marken-Pill (--ff-button-radius) runden. Die :first/:last-child-Selektoren
spiegeln bewusst die Radzen-Theme-Regeln (gleiche Spezifität 0-4-0, horizontal + vertikal);
da app.css NACH humanistic-base.css lädt, gewinnt der Pill-Radius gegen --rz-selectbar-border-radius
(4px), das den SelectBar sonst eckig-flach lässt. */
.rz-selectbar .rz-button {
border-radius: 0;
}
.rz-selectbar.rz-selectbar-horizontal .rz-button:first-child {
border-start-start-radius: var(--ff-button-radius);
border-end-start-radius: var(--ff-button-radius);
}
.rz-selectbar.rz-selectbar-horizontal .rz-button:last-child {
border-start-end-radius: var(--ff-button-radius);
border-end-end-radius: var(--ff-button-radius);
}
.rz-selectbar.rz-selectbar-vertical .rz-button:first-child {
border-top-left-radius: var(--ff-button-radius);
border-top-right-radius: var(--ff-button-radius);
}
.rz-selectbar.rz-selectbar-vertical .rz-button:last-child {
border-bottom-left-radius: var(--ff-button-radius);
border-bottom-right-radius: var(--ff-button-radius);
}
/* Marken-CTA: Filled-Primary-Button = Neon-Fläche + Anthrazit-Text, analog dem Hero-CTA auf
finnofleet.com ("Unsere Lösungen"). Das humanistic-Theme leitet die Filled-Primary-Fläche aus
--rz-primary ab (NICHT aus den --rz-button-primary-*-Token); --rz-primary muss aber Anthrazit
bleiben, weil es u.a. die Grid-Auswahl färbt. Daher ein gezielter, modus-unabhängiger Override:
Neon (#99FF33) ist in Light wie Dark identisch, Anthrazit-Text = ~10:1 (WCAG AAA). Nur die
Filled-Variante (rz-variant-filled) — Text-/Outline-Primary bleiben flächenlos. !important
analog zur Button-Override-Konvention oben, da die Ladereihenfolge RadzenTheme vs. app.css
nicht garantiert ist. */
.rz-button.rz-primary.rz-variant-filled {
background-color: var(--ff-neon) !important;
color: var(--ff-anthracite) !important;
}
.rz-button.rz-primary.rz-variant-filled:hover,
.rz-button.rz-primary.rz-variant-filled:active {
background-color: var(--ff-neon-dark) !important;
color: var(--ff-anthracite) !important;
}
/* Dezenter Rand für den "An"-Switch-Track: Neon auf heller Fläche hat nur ~1.5:1, der Rand
definiert die Kante. box-shadow statt border = keine Layout-Verschiebung des Thumbs.
var(--theme-border) wirkt in beiden Modi (Grey-300 light / dunkler grey dark). */
.rz-switch.rz-switch-checked .rz-switch-circle {
box-shadow: inset 0 0 0 1px var(--theme-border);
}
/*--------------Overrides------------------------------*/
/* Der AI-Assistent sitzt in einer RadzenSidebar. Das Theme setzt `.rz-sidebar { color: var(--rz-sidebar-color) }`
= weiss; app.css faerbt zwar den Sidebar-Hintergrund hell (--rz-sidebar-background-color), nicht aber die
Sidebar-Textfarbe. Der gerenderte Markdown der Assistenten-Antwort (rohes HTML ohne eigene .rz-text-Farbe)
erbt dadurch Weiss-auf-Hell. Globale Regel (statt .razor.css), weil das CSS-Isolation-Scope-Attribut nicht
an die RadzenCard/RadzenStack-Kinder durchgereicht wird. */
.ai-chat {
color: var(--rz-text-color);
/* Layout-Regeln stehen in AiChat.razor.css, greifen dort aber nicht (Isolation-Scope erreicht
den RadzenStack nicht). min-width:0 ist entscheidend: ohne erlaubt das Flex-Kind kein
Schrumpfen, breiter Inhalt (z.B. Tabellen) draengt dann das ganze Pane nach rechts raus. */
flex: 1;
min-width: 0;
width: 100%;
/* Bezugsrahmen fuer den schwebenden "Zum Ende springen"-Button. */
position: relative;
}
/* Schwebender, mittiger Button, der die Nachrichtenliste ans Ende scrollt; nur sichtbar, wenn
nicht am Ende. Schatten + Rand heben ihn vom Chat-Hintergrund ab. */
.ai-chat-scroll-bottom {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 92px;
z-index: 3;
}
.ai-chat-scroll-bottom .rz-button {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
}
/* Chat-Zeile und Bubble duerfen die Pane-Breite nicht sprengen (RadzenStack/RadzenCard -> global). */
.ai-chat-row {
max-width: 100%;
min-width: 0;
}
/* Bubble + Zeitstempel stehen untereinander in einem Wrapper, der die Breite begrenzt. */
.ai-chat-bubble-wrap {
display: flex;
flex-direction: column;
max-width: 100%;
min-width: 0;
}
.ai-chat-bubble-wrap-user {
align-items: flex-end;
}
.ai-chat-bubble-wrap-assistant {
align-items: flex-start;
}
/* Waehrend der Verarbeitung (Live-Schritt-Box) nutzt die Bubble die volle Breite. */
.ai-chat-bubble-wide {
width: 100%;
}
.ai-chat-bubble-wide .ai-chat-bubble {
width: 100%;
}
.ai-chat-time {
margin-top: 2px;
padding: 0 4px;
font-size: 0.7rem;
color: var(--rz-text-tertiary-color);
}
.ai-chat-processlog-live {
margin-top: 0.5rem;
min-width: 0;
}
/* Badge und Chevron sitzen auf Radzen-Komponenten (RadzenBadge/RadzenIcon); das Isolation-Scope
erreicht sie nicht, daher global. Feste Breiten + reservierter (ggf. unsichtbarer) Chevron-Platz
sorgen dafuer, dass Status-Badges und Zeiten ueber alle Schritt-Zeilen in einer geraden Linie stehen. */
.ai-process-step-badge {
flex: 0 0 auto;
min-width: 5.5rem;
text-align: center;
}
.ai-process-step-chevron {
flex: 0 0 auto;
width: 1.5rem;
}
.ai-process-step-chevron.is-hidden {
visibility: hidden;
}
/* Details-Dialog ist resizable, darf aber nicht unter seine Startgroesse verkleinert werden. */
.ai-details-dialog-window {
min-width: 420px;
min-height: 360px;
}
.rz-card.ai-chat-bubble {
padding: 0.4rem 0.6rem;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
.ai-chat-input {
flex: 0 0 auto;
min-width: 0;
}
/* Aktions-Spalte rechts der Eingabe: Upload oben, Senden/Stopp unten, ueber die TextBox-Hoehe verteilt. */
.ai-chat-input-actions {
flex: 0 0 auto;
}
/* Footer-Buttons (Details/Feedback) sind rechtsbuendig (JustifyContent.End im Markup). */
/* Breite Inhalte der Assistenten-Antwort (Codebloecke) scrollen innerhalb der Bubble,
statt das Layout zu sprengen. */
.markdown-view {
max-width: 100%;
overflow-wrap: break-word;
}
/* Tabellen mit klaren Linien, Zell-Padding und hervorgehobenem Header. table-layout:auto verteilt
die Spalten nach Inhalt; overflow-wrap bricht lange Worte nur bei Bedarf. */
.markdown-view table {
width: 100%;
border-collapse: collapse;
margin: 0.5rem 0;
font-size: 0.9em;
}
.markdown-view th,
.markdown-view td {
border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.15));
padding: 0.35rem 0.5rem;
text-align: left;
vertical-align: top;
overflow-wrap: break-word;
}
.markdown-view th {
background: var(--rz-base-200, rgba(0, 0, 0, 0.04));
font-weight: 600;
}
/* Die erste Spalte (meist kurze Begriffe/Labels) nicht mitten im Wort umbrechen, damit sie nicht
unleserlich schmal wird; sie nimmt die Breite ihres laengsten Begriffs, der Rest bleibt fuer die
Inhaltsspalten. */
.markdown-view th:first-child,
.markdown-view td:first-child {
white-space: nowrap;
}
.markdown-view pre {
max-width: 100%;
overflow-x: auto;
}
.invalid ~ .rz-form-field-label::before {
content: url('data:image/svg+xml;utf8,');
margin-right: 3px;
vertical-align: middle;
}
.rz-group-header {
background-color: transparent;
}
.rz-tree {
border: var(--rz-listbox-border);
border-radius: var(--rz-listbox-border-radius);
}
/* Tree-Knoten: Zeiger, etwas mehr vertikale Luft und kein dunkler Fokus-/Aktiv-Rahmen.
Hover und Auswahl im neutralen primary-lighter-Ton (analog Listbox-/Grid-Auswahl),
der Highlight sitzt bei Radzen auf .rz-treenode-label. */
.rz-tree .rz-treenode-content {
cursor: pointer;
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.rz-tree .rz-treenode-content.rz-state-focused {
outline: none;
box-shadow: none;
}
.rz-tree .rz-treenode-content:hover,
.rz-tree .rz-treenode-content:hover .rz-treenode-label {
background-color: var(--rz-primary-lighter) !important;
}
.rz-tree .rz-treenode-content-selected,
.rz-tree .rz-treenode-content-selected .rz-treenode-label {
background-color: var(--rz-primary-lighter) !important;
color: var(--rz-text-color) !important;
}
.rz-layout .rz-body {
width: 100%;
}
.rz-popup {
display: none;
position: absolute;
overflow: hidden;
padding: .75rem;
border: var(--rz-panel-border);
border-radius: var(--rz-menu-border-radius);
background-color: var(--rz-menu-background-color);
box-shadow: var(--rz-context-menu-box-shadow);
}
.rz-tooltip.rz-popup {
padding: unset;
border: none;
background-color: unset;
box-shadow: unset;
}
/* Radzen.startDrag (Radzen.Blazor.js) verhindert nur 'dragstart', nicht den Selektionsstart des
mousedown — und Radzen setzt fuer den ColorPicker kein user-select:none (fuer Splitter, Dialog
und Pivot-Grid schon). Zieht man im HSV-/Alpha-Feld ueber den Popup-Rand hinaus, markiert der
Browser deshalb den Seiteninhalt hinter dem Popup, und die Markierung bleibt nach dem Loslassen
stehen. Upstream bis einschliesslich 11.2.4 (13.08.2026) ungeloest — bei einem Radzen-Upgrade
pruefen, ob der Override entfaellt. */
.rz-colorpicker-popup {
user-select: none;
}
.rz-notification {
inset-block-start: unset;
inset-block-end: 1rem;
inset-inline-end: 1rem;
}
.rz-notification-item-wrapper {
width: 100%;
}
.rz-datatable .rz-col-icon {
border-right: 0 !important;
}
.rz-multiselect-item-content {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rz-grid-table thead th {
color: var(--rz-grid-header-color);
}
.rz-dialog-titlebar-close {
cursor: pointer;
}
.rz-h-stretch {
height: -webkit-fill-available; /* Safari, ältere Chrome */
height: -moz-available; /* Firefox */
height: stretch; /* Standard (Chrome 138+, Edge 138+) */
}
/* AC-4: Aktiver Sidebar-Menüpunkt erhält sichtbaren Neon-Akzentbalken (#99FF33) links.
Zwei sich ergänzende Signale, damit der Akzent über alle Radzen-Theme-Varianten greift
(humanistic blendet ::before per default mit display:none aus):
1. border-left als robustes Primärsignal (Test liest borderLeftColor),
2. ::before-Balken als zusätzlicher Indikator (Test liest ::before background-color).
Neon bleibt reiner Akzent, NICHT Textfarbe (Geschäftsregel WCAG). */
.rz-navigation-item-wrapper-active {
border-left: 3px solid var(--ff-neon);
background-color: var(--theme-nav-active-bg);
}
.rz-navigation-item-wrapper-active:before {
display: block !important;
position: absolute;
content: "";
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
width: 3px;
background-color: var(--ff-neon);
}
/* Sora Regular auch für Headlines (analog finnofleet/FiKnow-Auftritt: große, leichte
Headlines statt Bold). Explizit auf 400 gesetzt, damit das humanistic-Theme die Überschriften
nicht auf ein eigenes (schwereres) Default-Gewicht zieht. */
h1, h2, h3, h4, h5, h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3,
.rz-text-display-h4, .rz-text-display-h5, .rz-text-display-h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-h4, .rz-text-h5, .rz-text-h6 {
font-weight: var(--ff-weight-normal);
}
/* Fett-Hervorhebung über HTML-Semantik (b/strong) — auch aus Modulen — auf die einzige
Strong-Stufe ziehen statt des Browser-Defaults 700. Greift global, weil / ohne
eigene Klasse/Inline-Style auskommen; explizite font-weight-Deklarationen bleiben hiervon
unberührt (die referenzieren direkt --ff-weight-strong). */
b, strong {
font-weight: var(--ff-weight-strong);
}
/* Logo-Switch per Appearance-Toggle (dark-4, #37417): Default Light = Positiv (.logo-light)
sichtbar, Negativ (.logo-dark) versteckt. Global statt scoped, weil die RadzenImage-
Elemente in Komponenten ohne natives Scope-Root-Element liegen (::deep greift dort nicht).
Der Dark-Gegenpart hängt am data-theme-Attribut (Regelblock weiter unten). */
img.logo-dark {
display: none;
}
/* Logo-Switch (dark-4): im Dark-Modus (data-theme=humanistic-dark) Positiv verstecken,
Negativ zeigen. Umschaltbar über das data-theme-Attribut (Appearance-Toggle, #37417),
NICHT mehr über die System-Media-Query. */
:root[data-theme^="humanistic-dark"] img.logo-light {
display: none;
}
:root[data-theme^="humanistic-dark"] img.logo-dark {
display: block;
}
/* Outlined-/Text-Variante mit Secondary-Identity im Dark-Modus: Radzen (humanistic) zieht
Identity-Farbe und Outline (inset box-shadow!) aus --rz-secondary, das im Dark-Block ein
Surface-Ton (#3D3D3D) ist — auf dunklem Grund unsichtbar. Selektoren matchen die
Radzen-Spezifität inkl. .rz-shade-default (4 Klassen) und sind über das data-theme-Attribut
gescoped (Appearance-Toggle, #37417). */
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-outlined.rz-secondary,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-outlined.rz-secondary.rz-shade-default,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-text.rz-secondary,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-text.rz-secondary.rz-shade-default {
color: var(--ff-grey-300);
}
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-outlined.rz-secondary,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-outlined.rz-secondary.rz-shade-default {
box-shadow: inset 0 0 0 var(--rz-border-width) var(--ff-grey-300);
}
/* Filled-Buttons mit Light-/Secondary-Identity: humanistic-dark rendert sie mit hellem Grund
(z.B. der "Regenerate"-Button auf der Startseite) — die --rz-button-light/secondary-*-Token
greifen für die Filled-Variante nicht (wie bei Border/Outline notiert: "totes Token"), sodass
weißer Text auf Hellgrau entsteht. Daher per Selektor erzwingen: dunkle Fläche + weißer Text,
analog zur Outlined-Behandlung oben (#37417). */
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-filled.rz-light,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-filled.rz-light.rz-shade-default,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-filled.rz-secondary,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-filled.rz-secondary.rz-shade-default {
background-color: var(--ff-dark-surface-2);
color: var(--ff-white);
}
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-filled.rz-light:hover,
:root[data-theme^="humanistic-dark"] .rz-button.rz-variant-filled.rz-secondary:hover {
background-color: var(--ff-dark-surface-3);
color: var(--ff-white);
}
/* Outlined-/Text-Buttons mit Light-Identity: humanistic zieht Text + Outline aus --rz-light, das
im Light ein helles Grau (#EEEEEE) und im Dark ein Surface-Ton (#3D3D3D) ist — auf der jeweiligen
Fläche nahezu unsichtbar. Anders als die secondary-Variante in BEIDEN Modi defekt, daher NICHT
data-theme-gescoped. Auf gedämpfte, aber lesbare Text-/Rahmenfarbe heben (#37417). */
.rz-button.rz-variant-outlined.rz-light,
.rz-button.rz-variant-outlined.rz-light.rz-shade-default,
.rz-button.rz-variant-text.rz-light,
.rz-button.rz-variant-text.rz-light.rz-shade-default {
color: var(--theme-text-muted);
}
.rz-button.rz-variant-outlined.rz-light,
.rz-button.rz-variant-outlined.rz-light.rz-shade-default {
box-shadow: inset 0 0 0 var(--rz-border-width) var(--theme-border);
}
/* Listbox-/Filter-Menü-Einträge (z.B. die Operatoren-Liste im DatePicker-Spaltenfilter:
Equals/Not equals/Less than …) setzt humanistic hart auf dunkle Schrift — im Dark wäre das
Schwarz auf dunklem Popup. Nicht-hervorgehobene Einträge auf Header-/Textfarbe erzwingen
(hervorgehobene/aktive behalten ihre eigene Token-Farbe). */
:root[data-theme^="humanistic-dark"] .rz-listbox-item:not(.rz-state-highlight),
:root[data-theme^="humanistic-dark"] .rz-filter-menu-item:not(.rz-state-highlight) {
color: var(--rz-text-color);
}
/* TabView: inaktive Tab-Koepfe nehmen in humanistic --rz-secondary (#3D3D3D, ein Surface-Ton)
als Textfarbe — auf dunklem Nav-Grund unsichtbar. Die Farbe kommt aus --rz-tabs-tab-color,
das humanistic komponenten-scoped auf .rz-tabview definiert (daher nicht ueber ein :root-Token
korrigierbar). Stattdessen die inaktiven Tab-li direkt auf gedaempfte, lesbare Textfarbe heben;
Button/Title/Icon erben. Der aktive Tab ist via :not(.rz-tabview-selected) ausgenommen und
behaelt seine helle Selected-Farbe (#37417/#37497). */
:root[data-theme^="humanistic-dark"] .rz-tabview-nav li:not(.rz-tabview-selected) {
color: var(--theme-text-muted);
}
/* Checkbox (RadzenCheckBox / .rz-chkbox): humanistic setzt den checked-Hintergrund auf
--rz-checkbox-checked-background-color, das im Dark ein Surface-Ton (#3D3D3D = Card-Farbe) ist
— die Box verschwindet, nur der weiße Haken bleibt; die leere Box hat lediglich einen
kontrastarmen #4D4D4D-Rahmen (~1.3:1). Im Dark: leere Box mit lesbarem Rahmen
(--theme-text-muted), angehakte Box im Akzent (--rz-primary = Neon) mit kontrastierendem
Haken (--rz-on-primary). In beiden Modi konsistent zum Brand-Primary. (#37497) */
:root[data-theme^="humanistic-dark"] .rz-chkbox-box {
border-color: var(--theme-text-muted);
}
:root[data-theme^="humanistic-dark"] .rz-chkbox-box.rz-state-active {
background-color: var(--rz-primary);
border-color: var(--rz-primary);
}
:root[data-theme^="humanistic-dark"] .rz-chkbox-box.rz-state-active .rz-chkbox-icon {
color: var(--rz-on-primary);
}
/* Steps: der hervorgehobene aktuelle Schritt-Titel (.rz-steps-current) nimmt ebenfalls
--rz-secondary (#3D3D3D) — auf dunklem Grund unsichtbar. Auf Standardtext heben (die übrigen,
nicht-aktuellen Schritte sind bereits hell genug). */
:root[data-theme^="humanistic-dark"] .rz-steps-current .rz-steps-title {
color: var(--theme-text);
}
/* Text-Utility .rz-color-secondary: humanistic färbt sie (mit !important) aus --rz-secondary,
das im Dark ein Surface-Ton (#3D3D3D = Card-Fläche) ist — Labels/Untertitel unsichtbar.
Als helles Sekundär-Grau umdeuten; bewusst heller als --rz-text-secondary-color (#AAAAAA),
damit Labels auch auf abgesetzten Karten-Flächen am Kontrastrand lesbar bleiben.
!important nötig, um Radzens !important-Utility zu überstimmen (#38672). */
:root[data-theme^="humanistic-dark"] .rz-color-secondary {
color: var(--ff-grey-300) !important;
}
/* Info-Badge (Default-Shade): --rz-info ist im Dark ein helles Blau — als volle Badge-Fläche
grell und off-brand. Auf die dunkle Info-Tint-Fläche mit heller Info-Textfarbe heben
(dieselben Token wie shade-lighter, Kontrast-Guard-geprüft). Die Status-Badges
Success/Warning/Danger bleiben unangetastet (#38672). */
:root[data-theme^="humanistic-dark"] .rz-badge-info {
background-color: var(--rz-info-lighter);
color: var(--rz-on-info-lighter);
}
/* ProgressBar-Wert-Label ("35 %") wird zentriert über dem Balken gezeichnet; bei teilgefülltem
Balken liegt es über dem TRACK (nicht über der Neon-Wertfläche) und muss daher track-
kontrastierend sein. --theme-text flippt korrekt: Anthrazit auf hellem Track im Light, Weiß auf
dunklem Track im Dark. Gilt in beiden Modi. */
.rz-progressbar-label {
color: var(--theme-text);
}
/* Jahr-Dropdown im Kalender ist mit ~72px zu schmal für eine vierstellige Jahreszahl
("2026" wird zu "20…" beschnitten). Mindestbreite anheben — gilt in beiden Modi. */
.rz-calendar-year-dropdown {
min-width: 6rem;
}
/* DataGrid-Spaltenfilter: Der DatePicker-Filter-Trigger ist ein flat-"base"-Button ohne
Rahmen. Damit er sich in der Filterzeile nicht von den umgebenden Eingabefeldern (Textbox,
Dropdown, Numeric) abhebt, bekommt er denselben dezenten Rahmen. Fläche/Vordergrund kommen
bereits aus den --rz-base-Token (neutral statt Radzens Blaustich), in beiden Modi. */
.rz-datatable-data .rz-button.rz-base.rz-variant-flat,
.rz-datatable-filter .rz-button.rz-base.rz-variant-flat,
thead .rz-button.rz-base.rz-variant-flat {
border: 1px solid var(--theme-border);
}
/* Letzte Datenzeile: Radzen entfernt die untere Trennlinie der letzten Zeile, sodass das
DataGrid nach unten "offen" wirkt (Zeilen darüber haben eine Trennlinie). Linie in der
Brand-Border-Farbe wiederherstellen — gilt in beiden Modi. Die Zeilen liegen unter
.rz-datatable > … > tbody (NICHT unter .rz-datatable-data), daher dieser Ancestor + hohe
Spezifität, um Radzens last-child-Entfern-Regel zu überstimmen. */
.rz-datatable .rz-data-row:last-child > td,
.rz-datatable tbody tr:last-child > td {
border-bottom: 1px solid var(--theme-border);
}
/* =====================================================================
Zentrale Radzen-Zustands-Fixes (#38672) — Korrekturen, die sustainablebuildings
(PR 2129, SusbTheme.razor) lokal vornehmen musste und die hier zentral für alle
Module gelten. Root Cause der Dark-Fälle: das Brand-Theme deutet die Token
rz-secondary und rz-primary-lighter in neutrale Flächentöne um, humanistic nutzt
beide aber als Selektions-Akzent (Original: Blau #3ba5fc).
===================================================================== */
/* SelectBar (Segmented Control): humanistic füllt das aktive Segment aus
--rz-primary-lighter — im Light ein neutrales Hellgrau (#EEEEEE, kaum erkennbar),
im Dark ein Surface-Ton (= Hintergrund, unsichtbar). Aktives Segment wie den
Primär-CTA füllen: Light Anthrazit + Weiß, Dark Neon + Anthrazit — eindeutig
und in beiden Modi on-brand. */
.rz-selectbar .rz-button.rz-state-active {
background-color: var(--rz-primary);
color: var(--rz-on-primary);
}
/* Steps: die Nummer des aktuellen Schritts wird aus --rz-steps-number-selected-background
(= --rz-secondary, ein Flächenton) gefüllt — kein Fortschrittssignal; im Dark unsichtbar
(der zugehörige Titel-Fix steht data-theme-gescoped weiter oben). Nummer im
Primary-Akzent füllen, in beiden Modi. */
.rz-steps-item.rz-steps-current .rz-steps-number {
background-color: var(--rz-primary);
color: var(--rz-on-primary);
}
/* TabView: aktiven Tab-Kopf klar hervorheben. Radzens humanistic-Selected-Indikator (dezente
Oberkante) ist besonders auf dunklem Nav-Grund kaum erkennbar; sustainablebuildings hat das
lokal via .susb-tabs geloest (PR 2129). Zentral: aktiver Tab = angehobene Flaeche
(--theme-surface) + Primary-Akzentlinie unten + fetter Titel; inaktive dezent gedimmt, auf
Hover voll. Gilt in beiden Modi, nur Tokens. */
.rz-tabview-nav {
gap: 3px;
border-bottom: 1px solid var(--theme-border);
}
.rz-tabview-nav > li > button {
border-bottom: 3px solid transparent;
border-radius: var(--rz-border-radius, 4px) var(--rz-border-radius, 4px) 0 0;
opacity: 0.7;
transition: background-color .12s ease, opacity .12s ease, border-color .12s ease;
}
.rz-tabview-nav > li > button:hover {
opacity: 1;
background-color: var(--theme-surface);
}
.rz-tabview-nav > li.rz-tabview-selected > button,
.rz-tabview-nav > li > button[aria-selected="true"] {
opacity: 1;
background-color: var(--theme-surface);
border-bottom-color: var(--rz-primary);
font-weight: var(--ff-weight-strong, 600);
}
/* Deaktivierte Eingabefelder: humanistic styled native :disabled-Felder nur AUSSERHALB
von .rz-form-field-content — in Formular-Feldern greift gar kein Disabled-Style; im Dark
zeigt --rz-input-disabled-background-color durch die invertierte Base-Skala zusätzlich
auf ein HELLES Grau (Token-Gegenstück im Dark-Block). FINNOFLEET-Disabled-Fläche zentral
und theme-aware erzwingen; Radzen dimmt teils über opacity, daher zurück auf 1. */
.rz-state-disabled input,
.rz-state-disabled textarea,
.rz-state-disabled .rz-dropdown,
.rz-state-disabled .rz-inputtext,
.rz-state-disabled .rz-spinner,
input:disabled,
textarea:disabled {
background-color: var(--theme-input-disabled-bg) !important;
color: var(--rz-text-secondary-color) !important;
opacity: 1 !important;
}
/* Read-only-Formulare (fieldset[disabled][inert]): div-basierte Radzen-Widgets
(DropDown, DatePicker) reagieren nicht auf das native fieldset-disabled und wirken
dadurch "aktiv", während native Felder ausgegraut sind. Interaktion unterbindet inert
bereits vollständig — hier nur die Fläche an die Disabled-Felder angleichen. */
fieldset[disabled] .rz-dropdown,
fieldset[disabled] .rz-dropdown .rz-dropdown-label,
fieldset[disabled] .rz-datepicker,
fieldset[disabled] .rz-datepicker .rz-inputtext {
background-color: var(--theme-input-disabled-bg) !important;
color: var(--rz-text-secondary-color) !important;
}
/* =====================================================================
DARK MODE (#36857 / Appearance-Toggle #37417) — Aktivierung über das
data-theme-Attribut am Root-Element (humanistic-dark), getrieben vom
RadzenTheme/ThemeService. NICHT mehr über die System-Media-Query zum
bevorzugten Farbschema: ein solcher Brand-Media-Block würde den
Appearance-Toggle überstimmen, sobald das OS dunkel ist (AC9, stützt AC4/AC5).
Strategie: Die semantischen --theme-*-Token werden umgesetzt (Body folgt
automatisch über --rz-body-background-color: var(--theme-surface) usw.).
Zusätzlich werden alle --rz-*-Token überschrieben, die in :root auf harte
Light-Werte oder Light-spezifische Ableitungen zeigen.
WICHTIG (BrandingGuardTest.ExtractDarkBlock): Dieser Block darf KEINE
verschachtelten {} enthalten — nur flache Custom-Property-Deklarationen.
Mode-spezifische Selektor-Regeln (Logo-Switch, Outlined-Button-Override) stehen
data-theme-gescoped weiter oben.
===================================================================== */
:root[data-theme^="humanistic-dark"] {
/* ===== Dark-Graustufen-Token (analog zur Light --ff-*-Schicht) =====
Zentralisiert die im Dark-Block wiederkehrenden Flächen-Greys statt Magic-Hex-Duplikate.
Werte unverändert ggü. der vorherigen Hardcodierung (verhaltensneutral). */
--ff-dark-header: #262626; /* Header/Footer/Dialog-Title/Grid-Header — dunkler als Body */
--ff-dark-surface-1: #2A2A2A; /* abgesetzte Fläche dunkler (Sidebar/Stripe) */
--ff-dark-surface-2: #3D3D3D; /* abgesetzte Fläche heller (Hover/Cards/Selection-Grund) */
--ff-dark-surface-3: #4D4D4D; /* noch heller (Rahmen/aktiver Hover/Selektion) */
--ff-dark-surface-4: #5C5C5C; /* hellster Grau-Absatz (Borders auf dunkel) */
--ff-dark-stripe: #2E2E2E; /* Grid-Zebrastreifen — knapp heller als Surface-1 */
/* ===== Semantische Theme-Token (Dark) — alles andere leitet hieraus ab ===== */
--theme-surface: var(--ff-anthracite); /* Body-Fläche: Anthrazit #333333 (dark-1) */
--theme-surface-alt: var(--ff-dark-surface-1); /* Abgesetzte Fläche dunkler (Sidebar, Stripe) */
--theme-surface-raised: var(--ff-dark-surface-2); /* Abgesetzte Fläche heller (Hover, Cards) */
--theme-text: var(--ff-white); /* Standardtext: Weiß (dark-6) */
--theme-text-muted: var(--ff-grey-400); /* #AAAAAA Sekundärtext (>= 4.5:1 auf #333333) */
--theme-header-bg: var(--ff-dark-header); /* Header/Footer dunkler als Body absetzen */
--theme-header-text: var(--ff-white); /* Schrift auf Header/Footer */
--theme-accent: var(--ff-neon); /* Neon-Akzent (#99FF33, ~10:1 auf #333333, dark-5) */
--theme-border: var(--ff-dark-surface-3); /* Rahmen heller als Surface */
--theme-card-border: var(--ff-grey-400); /* Kachel-Rahmen: Anthrazit wäre auf dunklem Grund unsichtbar */
--theme-nav-active-bg: var(--ff-dark-surface-2); /* aktives Sidebar-Item: heller als Sidebar-Grund */
--theme-input-disabled-bg: var(--ff-grey-750); /* #666666 — FINNOFLEET-Disabled Dark (#38672) */
/* ===== PRIMARY-Palette ===== */
--rz-primary: var(--ff-neon); /* Akzent-Primärfarbe auf dunklem Grund */
--rz-primary-light: #B5FF6B;
--rz-primary-lighter: var(--ff-dark-surface-2);
--rz-primary-dark: var(--ff-neon-dark);
--rz-primary-darker: #5C991A;
--rz-on-primary: var(--ff-anthracite); /* Anthrazit-Text auf hellem/Neon-Primary */
--rz-on-primary-lighter: var(--ff-white);
--rz-on-primary-dark: var(--ff-anthracite);
--rz-on-primary-darker: var(--ff-white);
/* ===== SECONDARY-Palette ===== */
--rz-secondary: var(--ff-dark-surface-2); /* Abgesetzte neutrale Fläche */
--rz-secondary-light: var(--ff-dark-surface-3);
--rz-secondary-lighter: var(--ff-dark-surface-4);
--rz-secondary-dark: var(--ff-dark-surface-1);
--rz-secondary-darker: var(--ff-near-black);
--rz-on-secondary: var(--ff-white);
--rz-on-secondary-lighter: var(--ff-white);
/* ===== BASE/GRAUSTUFEN (für Dark invertiert: niedrige Indizes dunkel) ===== */
--rz-base-50: var(--ff-dark-surface-1);
--rz-base-100: var(--ff-anthracite);
--rz-base-200: var(--ff-dark-surface-2);
--rz-base-300: var(--ff-dark-surface-3);
--rz-base-400: var(--ff-grey-700); /* #757575 */
--rz-base-500: var(--ff-grey-400); /* #AAAAAA */
--rz-base-600: var(--ff-grey-300); /* #CCCCCC */
--rz-base-700: var(--ff-grey-200); /* #DDDDDD */
--rz-base-800: var(--ff-grey-100); /* #EEEEEE */
--rz-base-900: var(--ff-white);
/* Neutrale "base"-Akzentfarbe (default hellblau-grau #d9e1ea): im Dark abgesetzte
Fläche + heller Vordergrund. Betrifft u.a. den DatePicker-Filter-Trigger und den
Clear-Filter-Button in der Grid-Filterzeile (rz-button.rz-base). */
--rz-base: var(--theme-surface-raised);
--rz-base-light: var(--ff-dark-surface-3);
--rz-base-lighter: var(--ff-dark-surface-4);
--rz-on-base: var(--theme-text);
--rz-on-base-light: var(--theme-text);
--rz-on-base-lighter: var(--theme-text);
/* ===== SEMANTIC COLORS (helle Varianten für AA-Kontrast auf #333333) =====
-lighter-Stufen als dunkle Tint-Flächen (flat/shade-lighter Alerts/Badges), on-*-lighter
als helle Textfarbe darauf (>= 4.5:1). Sonst Radzen-Teal-Defaults (off-brand, s. Light). */
--rz-success: #6FCF4A; /* helles Grün, >= 4.5:1 auf #333333 */
--rz-success-lighter: #2E3D26; /* dunkle Grün-Tint-Fläche */
--rz-on-success-lighter: #6FCF4A; /* helles Grün auf Tint, ~5.8:1 */
--rz-info: #5AAFD6; /* helles Blau */
--rz-info-dark: #7FC3E2;
--rz-info-lighter: #2A3D47; /* dunkle Blau-Tint-Fläche */
--rz-on-info-lighter: #5AAFD6; /* helles Blau auf Tint, ~4.6:1 */
--rz-warning: #E0A33A; /* helles Bernstein */
--rz-warning-lighter: #3D3320; /* dunkle Bernstein-Tint-Fläche */
--rz-on-warning-lighter: #E0A33A; /* helles Bernstein auf Tint, ~5.6:1 */
--rz-danger: #EB6A6A; /* helles Rot */
--rz-danger-lighter: #3A2222; /* dunkle Rot-Tint-Fläche */
--rz-on-danger-lighter: #EB6A6A; /* helles Rot auf Tint, ~4.6:1 */
/* Vordergrund auf den (im Dark hellen) Semantikfarben: dunkel statt weiß, sonst sind
Badge-/Tag-Texte (Success/Info/Warning) weiß auf hell und unlesbar. */
--rz-on-success: var(--ff-anthracite);
--rz-on-info: var(--ff-anthracite);
--rz-on-warning: var(--ff-anthracite);
--rz-link-color: #5AAFD6; /* helles Blau für Links */
/* ===== TEXT ===== */
--rz-text-color: var(--theme-text);
--rz-text-title-color: var(--ff-white);
--rz-text-secondary-color: var(--theme-text-muted);
/* ===== SONSTIGES ===== */
--rz-txs-hover-color: var(--ff-dark-surface-3);
/* ===== Dialog ===== */
--rz-dialog-title-background-color: var(--ff-dark-header);
--rz-dialog-title-color: var(--ff-white);
--rz-dialog-close-color: var(--ff-white);
--rz-dialog-close-hover-color: var(--ff-neon);
--rz-dialog-background-color: var(--ff-anthracite);
--rz-dialog-content-background-color: var(--ff-anthracite);
--rz-dialog-content-color: var(--ff-white);
/* ===== Tooltip ===== */
--rz-tooltip-background-color: var(--ff-dark-header);
--rz-tooltip-color: var(--ff-white);
/* ===== Sidebar / Panel-Menu ===== */
--rz-sidebar-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-color: var(--ff-white);
--rz-panel-menu-item-border: var(--ff-dark-surface-3);
--rz-panel-menu-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-active-background-color: var(--theme-nav-active-bg);
--rz-panel-menu-item-active-color: var(--ff-white);
--rz-panel-menu-item-active-indicator: var(--ff-neon);
--rz-panel-menu-item-hover-background-color: var(--ff-dark-surface-3);
--rz-panel-menu-item-hover-color: var(--ff-white);
--rz-panel-menu-item-icon-hover-color: var(--ff-neon);
--rz-panel-menu-item-2nd-level-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-2nd-level-active-background-color: var(--ff-dark-surface-2);
--rz-panel-menu-item-2nd-level-hover-background-color: var(--ff-dark-surface-3);
--rz-panel-menu-item-2nd-level-hover-color: var(--ff-white);
--rz-panel-menu-item-3rd-level-background-color: var(--theme-surface-alt);
--rz-panel-menu-item-3rd-level-active-background-color: var(--ff-dark-surface-2);
--rz-panel-menu-item-3rd-level-hover-background-color: var(--ff-dark-surface-3);
--rz-panel-menu-item-3rd-level-hover-color: var(--ff-white);
/* ===== Grid ===== */
--rz-grid-header-background-color: var(--ff-dark-header);
--rz-grid-frozen-cell-background-color: var(--ff-dark-header);
--rz-grid-header-color: var(--ff-white);
--rz-grid-sort-icon-color: var(--ff-white);
--rz-grid-filter-color: var(--ff-white);
--rz-grid-header-filter-icon-hover-color: var(--ff-neon);
--rz-grid-header-filter-icon-active-color: var(--ff-neon);
--rz-grid-selected-background-color: var(--ff-dark-surface-3);
--rz-grid-selected-color: var(--ff-white);
--rz-grid-hover-background-color: var(--ff-dark-surface-2);
--rz-grid-hover-color: var(--ff-white);
--rz-grid-stripe-background-color: var(--ff-dark-stripe);
--rz-grid-row-hover-background-color: var(--ff-dark-surface-2);
/* ===== DropDown / Menu / Listbox ===== */
--rz-dropdown-item-hover-background-color: var(--ff-dark-surface-2);
--rz-dropdown-item-selected-hover-background-color: var(--ff-dark-surface-2);
--rz-dropdown-item-hover-color: var(--ff-white);
--rz-dropdown-item-selected-color: var(--ff-white);
--rz-dropdown-item-selected-hover-color: var(--ff-white);
--rz-menu-item-hover-color: var(--ff-white);
--rz-menu-item-icon-hover-color: var(--ff-neon);
--rz-menu-item-hover-background-color: var(--ff-dark-surface-2);
/* ===== Eingabefelder (Textbox, Dropdown, DatePicker, Numeric, …) =====
Radzen leitet die Feld-Fläche aus --rz-base-background-color und die Panels
aus denselben Token ab. Im Dark-Modus auf abgesetzte Flächen + helle Schrift.
Bewusst NUR im Dark gesetzt — im Light gelten die humanistic-Defaults (daher kein
Light-:root-Gegenstück). Die semantische --theme-*-Schicht bleibt symmetrisch; diese
--rz-input-*-Feinjustierungen sind absichtlich dark-spezifisch. */
--rz-base-background-color: var(--theme-surface-raised);
--rz-input-background-color: var(--theme-surface-raised);
--rz-input-value-color: var(--theme-text);
--rz-input-placeholder-color: var(--theme-text-muted);
--rz-input-hover-background-color: var(--ff-dark-surface-3);
--rz-input-focus-background-color: var(--theme-surface-raised);
--rz-dropdown-open-background-color: var(--theme-surface-raised);
--rz-panel-background-color: var(--theme-surface-raised);
/* Disabled-Felder: humanistic-dark leitet die Fläche aus der Base-Skala ab, die im
Dark-Block invertiert ist — deaktivierte Felder würden HELL (#EEEEEE). Auf die
FINNOFLEET-Disabled-Fläche mit gedämpftem Text heben (#38672). */
--rz-input-disabled-background-color: var(--theme-input-disabled-bg);
--rz-input-disabled-color: var(--theme-text-muted);
/* ===== Tabs: Selected-Indikator ===== */
/* Die Akzentlinie des aktiven Tabs kommt aus --rz-secondary — im Dark ein Surface-Ton,
der aktive Tab ist nicht markiert. Auf den Neon-Primary-Akzent heben (#38672). */
--rz-tabs-tab-selected-top-border-color: var(--rz-primary);
/* ===== Switch ===== */
--rz-switch-checked-background-color: var(--ff-neon);
/* Knopf (Thumb) dunkel statt weiß: weiß auf Neon hat nur ~1.3:1, dunkel ~10:1. */
--rz-switch-checked-circle-background-color: var(--ff-anthracite);
/* ===== Header / Footer ===== */
--rz-header-background-color: var(--theme-header-bg);
--rz-header-color: var(--theme-header-text);
--rz-footer-background-color: var(--theme-header-bg);
--rz-footer-color: var(--theme-header-text);
/* ===== Content Background ===== */
--rz-body-background-color: var(--theme-surface);
/* ===== Button Primary — Neon + Anthrazit-Text als Marken-CTA, einheitlich mit dem
Light-Modus und dem Hero-Button auf finnofleet.com. Im Dark-Block ist --rz-primary
ohnehin = var(--ff-neon); zusätzlich greift der .rz-variant-filled-Override unten.
#333 auf #99FF33 = ~10:1 (WCAG AAA). Diese --rz-button-primary-*-Token sind (wie im
Light-:root) für den Filled-Button nicht maßgeblich, hier nur konsistent gehalten. ===== */
--rz-button-primary-background-color: var(--ff-neon);
--rz-button-primary-hover-background-color: var(--ff-neon-dark);
--rz-button-primary-color: var(--ff-anthracite);
--rz-button-primary-hover-color: var(--ff-anthracite);
--rz-button-primary-active-color: var(--ff-anthracite);
/* ===== Button Secondary/Outline — heller Text + Grey-Border auf dunklem Grund.
Sichtbarer Outline-Rand kommt aus dem .rz-variant-outlined.rz-secondary-box-shadow-
Override unten (humanistic liest --rz-button-secondary-border nicht). ===== */
--rz-button-secondary-background-color: var(--ff-dark-surface-2);
--rz-button-secondary-color: var(--ff-white);
--rz-button-secondary-border: 1px solid var(--ff-dark-surface-4);
--rz-button-secondary-hover-background-color: var(--ff-dark-surface-3);
--rz-button-secondary-hover-color: var(--ff-white);
/* ===== Button Light (--rz-button-light-border ebenfalls totes Token, s.o.) ===== */
--rz-button-light-background-color: var(--ff-dark-surface-2);
--rz-button-light-color: var(--ff-white);
--rz-button-light-border: 1px solid var(--ff-dark-surface-4);
--rz-button-light-hover-background-color: var(--ff-dark-surface-3);
/* ===== Button Tertiary/Text — transparent, heller Text, dunkler Hover =====
Aktiver Sidebar-Menüpunkt: abgesetzte Fläche + Neon-Akzentbalken (dark-5) — die globale
.rz-navigation-item-wrapper-active-Regel nutzt var(--theme-nav-active-bg), das hier auf
var(--ff-dark-surface-2) (#3D3D3D) gesetzt ist; separater Override unnötig. */
--rz-button-text-color: var(--ff-white);
--rz-button-text-hover-background-color: var(--ff-dark-surface-2);
--rz-button-text-hover-color: var(--ff-white);
}