). Macht die
angesprungene Zeile sofort sichtbar, statt sie suchen zu müssen. Danach bleibt
die dezentere .gero-row-active-Markierung stehen (GF-Wunsch 2026-07-03). */
@keyframes geroRowFlash {
0% { background: rgba(0, 175, 235, .45); }
100% { background: rgba(0, 175, 235, .14); }
}
.gero-review-table tbody tr.gero-row-flash > td { animation: geroRowFlash 1.1s ease-out; }
/* Bewegungsreduktion respektieren: kein Aufblitzen, die persistente
.gero-row-active-Markierung bleibt trotzdem als Blickfang erhalten. */
@media (prefers-reduced-motion: reduce) {
.gero-review-table tbody tr.gero-row-flash > td { animation: none; }
}
/* Spalten-Resize: aktiviert via JS-Klasse `gero-table-resizable` auf dem Wrapper.
`table-layout: fixed` respektiert die -Breiten, sonst rechnet der Browser
automatisch und Resize hat keinen Effekt. Handle sitzt absolut am rechten Rand
des | ; das | bekommt `position: relative` vom JS. */
.gero-table-resizable .gero-review-table { table-layout: fixed; }
.gero-col-resize-handle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
user-select: none;
background: transparent;
z-index: 11;
}
.gero-col-resize-handle:hover { background: rgba(13,110,253,.35); }
body.gero-resizing-col { user-select: none; }
/* Zell-Konfidenz: Hintergrundfärbung — Grün dezent, Gelb/Rot deutlich sichtbar */
.gero-conf-success { background: #f0fdf4; } /* green-50 — einheitliche Grün-Skala */
.gero-conf-warning { background: rgba(245,158,11,.22); }
.gero-conf-danger { background: rgba(220,53,69,.15); }
.gero-conf-secondary { background: rgba(108,117,125,.06); }
/* Auto-ergänzt (z.B. Datenvolumen aus der Tarif-DB) — eigener Info-Stil statt
rotem Konfidenz-Alarm; der Wert kam nicht aus der Rechnung, ist aber kein
KI-Lesefehler. Begleitet vom blauen Magic-Icon (bitte kurz prüfen). */
.gero-conf-autofill { background: rgba(13,202,240,.12); }
/* Sanity-Verletzung: semantisch unsinnige Werte (z.B. negativer Grundpreis).
Roter Linker Rand markiert Cell, ohne den Konfidenz-Hintergrund zu überschreiben. */
.gero-sanity-cell {
box-shadow: inset 3px 0 0 0 var(--bs-danger, #dc3545);
}
.gero-review-td {
padding: 4px 8px;
vertical-align: middle;
border-bottom: 1px solid var(--gero-surface-3);
border-right: 1px solid #f5f6f8;
/* Spalten-Breite respektieren — lange Inhalte (z.B. Tarif-Strings mit 100+ Zeichen)
dürfen die Zelle nicht aufblasen, sonst werden Nachbar-Spalten zusammengequetscht
(Bug 2026-05-21). Der Input darin bekommt eigenes overflow:hidden + ellipsis.
`max-width: 0` ist ein bekannter Browser-Trick: ohne ihn ignoriert der Browser
`overflow` bei ` | `, weil Tabellenzellen sich am Inhalt orientieren. */
overflow: hidden;
max-width: 0;
}
/* Inline-Inputs */
/* Read-only-Aggregat-Zelle (mms_cost/data_pass_cost): Wert sichtbar, editiert wird
im Verbindungs-Editor. Dezenter Hintergrund wie die read-only-Aufschlüsselungs-
spalten (.gero-conn-detail-td), damit klar „kein Eingabefeld" ist; Klick öffnet
das Panel (data-conn-open) → cursor:pointer + Hover-Feedback. */
.gero-readonly-cell {
display: inline-block;
padding: 3px 6px;
font-size: 0.8rem;
color: var(--gero-muted);
background: var(--gero-surface-soft);
border-radius: 4px;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.gero-readonly-cell:hover { background: #eef1f4; }
/* Leere Read-only-Zelle (kein MMS/Datenpässe-Wert — 98,5 % der Zeilen): KEIN Kästchen
zeigen, sonst leere weiße Pille in fast jeder Zeile (User-Befund 2026-07-10). Bearbeitet
wird über den „aufschlüsseln"-Toggle der Verbindungen-Spalte. */
.gero-readonly-cell:empty { background: none; padding: 0; }
/* Datenpässe-Aufschlüsselung nach Ländergruppen: standardmäßig zu, dezenter Aufklapper. */
.gero-conn-aufschluesselung { margin: 6px 0 2px; }
.gero-conn-aufschluesselung > summary {
cursor: pointer; font-size: 0.78rem; color: var(--gero-cyan-dark);
padding: 2px 0; user-select: none; list-style: revert; width: fit-content;
}
.gero-conn-aufschluesselung > summary:hover { text-decoration: underline; }
/* is_text-Aggregat im Panel (mms_cost/data_pass_cost): kursives Label als dezenter
Hinweis, dass es sich (anders als die Decimal-Parallel-Felder) NICHT im Live-Σ-
Richtwert unten niederschlägt — der Marker-Tooltip erklärt es genauer. */
.gero-conn-edit-cell.is-text-agg .gero-conn-edit-lbl { font-style: italic; }
.gero-table-input {
width: 100%;
min-width: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
padding: 3px 6px;
font-size: 0.8rem;
color: var(--gero-text);
transition: border-color 0.15s, background 0.15s;
/* Lange Strings (z.B. Tarif-Namen) elliptisieren statt Zelle aufzublasen.
`text-overflow: ellipsis` braucht zwingend `overflow: hidden` UND `white-space: nowrap`
— sonst greift weder das Abschneiden noch das …-Suffix. Hover/Fokus zeigt den vollen
Wert via title-Tooltip (im Template gesetzt). */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gero-table-input:hover { border-color: var(--gero-border); background: var(--gero-surface); }
.gero-table-input:focus { border-color: var(--gero-cyan); background: var(--gero-surface); outline: none; box-shadow: 0 0 0 2px rgba(0,180,216,.15); }
.gero-table-input-manual {
background: rgba(245,158,11,.07);
border-color: rgba(245,158,11,.35);
}
.gero-table-input-manual:focus {
border-color: #ffc107;
background: #fffdf0;
box-shadow: 0 0 0 2px rgba(245,158,11,.2);
}
.gero-cell-icon {
font-size: 0.7rem;
flex-shrink: 0;
}
/* ── Export-Modal Theme-Karten ───────────────────────────────────────────── */
.gero-export-option {
display: block;
color: inherit;
}
.gero-export-card {
position: relative;
background: var(--gero-surface);
border: 1px solid var(--gero-border);
border-radius: 12px;
padding-left: 16px;
display: flex;
align-items: stretch;
overflow: hidden;
transition: all 0.18s ease;
cursor: pointer;
height: 100%;
}
.gero-export-card:hover {
border-color: var(--theme, var(--gero-cyan));
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
/* Aktive/ausgewählte Karte im Form-Picker (z. B. Sammelmappen-Ziel-Anbieter). */
.gero-export-option.is-selected .gero-export-card {
border-color: var(--theme, var(--gero-cyan));
border-width: 2px;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme, var(--gero-cyan)) 18%, transparent);
}
.gero-export-option.is-selected .gero-export-card-accent {
width: 8px;
}
.gero-export-card-accent {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
background: var(--theme, var(--gero-cyan));
}
.gero-export-card-body {
flex: 1;
padding: 14px 18px;
}
.gero-export-card-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--gero-muted);
margin-bottom: 2px;
}
.gero-export-card-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--gero-text);
line-height: 1.2;
margin-bottom: 4px;
}
.gero-export-card-hint {
font-size: 0.78rem;
color: var(--gero-muted);
}
/* Form-Aktionsleiste am Ende einer Detailseite. */
.gero-form-footer {
background: var(--gero-surface);
border: 1px solid var(--gero-border);
border-radius: var(--radius);
padding: 16px 20px;
margin-top: 24px;
box-shadow: var(--shadow-sm);
}
/* ── Result Page ───────────────────────────────────────────────────────── */
.gero-result-icon { font-size: 2.5rem; }
.gero-result-field { padding: 4px 0; }
.gero-result-field-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--gero-muted);
font-weight: 600;
margin-bottom: 2px;
}
.gero-result-field-value {
font-size: 0.9rem;
font-weight: 500;
color: var(--gero-text);
}
.gero-mini-stat { text-align: center; }
.gero-mini-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--gero-text); }
.gero-mini-stat-label { font-size: 0.72rem; color: var(--gero-muted); }
/* ── Manuelle Schwärzung / Zeichenmodus ────────────────────────────────── */
/* Wrapper um jedes Seitenbild */
.gero-redact-wrapper {
position: relative;
display: block;
line-height: 0;
}
/* Transparentes Overlay über dem Bild */
.gero-redact-overlay {
position: absolute;
inset: 0;
pointer-events: none; /* Standardmäßig kein Maus-Abfangen */
user-select: none;
}
/* Im Zeichenmodus: Overlay nimmt Maus-Events entgegen */
.gero-draw-active .gero-redact-overlay {
pointer-events: all;
cursor: crosshair;
}
/* Kurzer Hinweis mittig auf der Seite, wenn im Zeichenmodus auf eine noch nicht
geladene (oder fehlgeschlagene) Seite geklickt wird — liegt im Sichtfeld des
Klicks, anders als das Seitenlabel darüber (kann weggescrollt sein). */
.gero-loading-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 8px 14px;
border-radius: 6px;
font-size: 0.8rem;
line-height: 1.3;
white-space: nowrap;
pointer-events: none;
z-index: 5;
}
/* Rubber-Band-Rechteck beim Zeichnen */
.gero-rubber-band {
position: absolute;
border: 2px dashed #ef4444;
background: rgba(239, 68, 68, 0.15);
pointer-events: none;
}
/* Fertige Schwärzungs-Rechtecke */
.gero-redact-box {
position: absolute;
background: rgba(0, 0, 0, 0.55);
border: 2px solid rgba(239, 68, 68, 0.8);
pointer-events: none;
}
/* Löschen-Button auf jedem Rechteck */
.gero-redact-del {
position: absolute;
top: -10px;
right: -10px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #ef4444;
color: white;
border: none;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: all;
padding: 0;
}
.gero-redact-del:hover { background: #dc2626; }
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
.gero-login-brand { display: none; }
.gero-login-form-side { width: 100%; min-width: unset; }
.gero-sidebar { position: fixed; left: -260px; transition: left 0.3s; }
.gero-sidebar.open { left: 0; }
.gero-main { margin-left: 0; }
}
/* ── Anomalie-Cards (Review-Seite) ─────────────────────────────────────── */
.gero-anomalies {
background: var(--gero-surface);
border: 1px solid var(--gero-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.gero-anomalies-header {
background: linear-gradient(90deg, rgba(0,175,235,.10), rgba(0,175,235,.04));
padding: 12px 18px;
font-weight: 600;
font-size: 0.85rem;
color: var(--gero-heading);
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--gero-border);
}
.gero-anomalies-header i {
color: var(--gero-cyan);
font-size: 1.05rem;
}
.gero-anomalies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: var(--gero-border);
}
.gero-anomaly {
display: flex;
gap: 12px;
padding: 14px 18px;
background: var(--gero-surface);
align-items: flex-start;
}
.gero-anomaly-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.gero-anomaly-body { flex: 1; min-width: 0; }
.gero-anomaly-title {
font-weight: 600;
font-size: 0.88rem;
color: var(--gero-text);
line-height: 1.35;
margin-bottom: 2px;
}
.gero-anomaly-detail {
font-size: 0.78rem;
color: var(--gero-muted);
word-break: break-word;
}
.gero-anomaly-danger .gero-anomaly-icon { background: rgba(217,83,79,.12); color: #D9534F; }
.gero-anomaly-warning .gero-anomaly-icon { background: rgba(245,158,11,.15); color: #b88600; }
.gero-anomaly-info .gero-anomaly-icon { background: rgba(0,175,235,.12); color: var(--gero-cyan); }
/* ── Bindefristen-Timeline (Dashboard) ─────────────────────────────────── */
.gero-bindefristen-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1px;
background: var(--gero-border);
}
@media (max-width: 1100px) {
.gero-bindefristen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.gero-bindefristen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gero-bindefrist-month {
background: var(--gero-surface);
padding: 14px 14px 12px;
display: flex;
flex-direction: column;
min-height: 180px;
}
.gero-bindefrist-current {
background: linear-gradient(180deg, rgba(0,175,235,.06), var(--gero-surface) 60%);
}
.gero-bindefrist-empty .gero-bindefrist-count { color: var(--gero-border); }
.gero-bindefrist-empty .gero-bindefrist-count-label { color: var(--gero-muted); opacity: 0.5; }
.gero-bindefrist-month-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.gero-bindefrist-month-label {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--gero-heading);
letter-spacing: -0.01em;
}
.gero-bindefrist-month-year {
font-size: 0.7rem;
color: var(--gero-muted);
}
.gero-bindefrist-count {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
color: var(--gero-cyan);
line-height: 1;
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 10px;
}
.gero-bindefrist-count-label {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
color: var(--gero-muted);
}
.gero-bindefrist-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.75rem;
color: var(--gero-text);
flex: 1;
}
.gero-bindefrist-list li {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 3px 0;
border-top: 1px dashed rgba(0,30,65,.06);
}
.gero-bindefrist-list li:first-child { border-top: none; }
.gero-bindefrist-phone {
font-family: 'SF Mono', 'Menlo', monospace;
font-size: 0.72rem;
color: var(--gero-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gero-bindefrist-date {
font-size: 0.7rem;
color: var(--gero-muted);
flex-shrink: 0;
}
.gero-bindefrist-more {
margin-top: 4px;
font-size: 0.7rem;
color: var(--gero-cyan);
font-style: italic;
}
/* Nummer + Lösch-Button immer vertikal gestapelt + zentriert — sonst stehen sie
im schmalen #-Feld mal nebeneinander, mal umgebrochen (inkonsistent). */
.gero-rownum-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* Lösch-Button pro Review-Zeile: nur im „Bearbeiten"-Modus sichtbar (Toggle
unter der Tabelle setzt .gero-manage-mode auf den Wrapper). Im Normalzustand
komplett ausgeblendet → ruhige Tabelle, kein Hover-Flackern. Dezent grau,
rot erst beim direkten Icon-Hover. */
.gero-del-item {
display: none;
color: var(--gero-muted);
min-width: 28px;
min-height: 28px;
line-height: 1;
transition: color .12s ease;
}
.gero-review-table-wrapper.gero-manage-mode .gero-del-item {
display: inline-flex;
align-items: center;
justify-content: center;
}
.gero-del-item:hover,
.gero-del-item:focus {
color: #dc3545;
}
/* Ziehbare Angebots-Spaltenköpfe (Drag-and-Drop-Sortierung in der Tabelle) */
.gero-custom-th {
cursor: grab;
user-select: none;
}
.gero-custom-th:active {
cursor: grabbing;
}
/* Sortierbare Tabellen (gero-sortable): Hover-Hinweis auf den Spaltenköpfen,
damit die Klick-Sortierung erkennbar ist (Pfeil erscheint erst nach Klick).
Den Cyan-Ton als background-IMAGE-Overlay legen (statt background-color zu
ersetzen) — so bleibt der deckende Basis-Hintergrund der th erhalten. Sonst
scheinen bei Sticky-Headern (.gero-review-table thead, .gero-rec-table erste
Spalte) die durchscrollenden Zeileninhalte durch die schwebenden Köpfe. */
table.gero-sortable thead th:hover {
background-image: linear-gradient(rgba(0,175,235,0.08), rgba(0,175,235,0.08));
}
table.gero-sortable thead th .gero-sort-arrow { font-size: 0.75em; }
/* =========================================================================
CRM-Cockpit — Premium-Relaunch (Design-Showcase Kunden-Akte, 2026-06-26)
Wiederverwendbare Komponenten für alle CRM-Module: Hero-Band, KPI-Kacheln,
Status-Pills, Segment-Balken, gestaffeltes Einblenden. Marken-Tokens (Navy/
Cyan) bleiben Leitfarben; Grün ist der Ersparnis-Payoff.
========================================================================= */
/* Hero-Band — dunkler Marken-Gradient mit Punkt-Textur + Tiefe */
.gero-hero {
position: relative;
border-radius: 20px;
padding: 1.85rem 2rem;
color: #fff;
background:
radial-gradient(1100px 320px at 108% -40%, rgba(0,175,235,0.42), transparent 60%),
linear-gradient(135deg, var(--gero-navy) 0%, var(--gero-navy-3) 100%);
box-shadow: 0 22px 48px -24px rgba(0,30,65,0.6);
overflow: hidden;
}
.gero-hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 22px 22px; opacity: 0.6;
}
.gero-hero > * { position: relative; z-index: 1; }
.gero-hero h1, .gero-hero h2, .gero-hero h3 { color: #fff; }
.gero-hero__meta { color: rgba(255,255,255,0.74); }
.gero-hero__meta a { color: #fff; text-decoration: underline; }
.gero-hero__mono {
width: 62px; height: 62px; border-radius: 17px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: .5px;
background: linear-gradient(135deg, var(--gero-cyan), var(--gero-cyan-dark));
box-shadow: 0 10px 24px -8px rgba(0,175,235,0.85);
}
/* Status-Pill (auf dunklem + hellem Grund) */
.gero-pill {
display: inline-flex; align-items: center; gap: .35rem;
padding: .26rem .7rem; border-radius: 999px;
font-size: .76rem; font-weight: 600; line-height: 1;
}
.gero-pill--on-dark { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
/* Pille als KNOPF (bisher nur „Wichtige Info!" im Kopf der Kundenakte). Eine
klickbare Pille ohne Hover- und Fokus-Zustand ist von einer beschrifteten
nicht zu unterscheiden — und der Tastatur-Fokus fiele auf den Browser-Default
zurück, während jede andere neue Komponente hier einen Marken-Ring hat. Die
Farbe kommt vom Aufrufer (`--ac`), damit dieselbe Regel auch für einen
künftigen zweiten Knopf dieser Art trägt. */
.gero-pill--action {
--ac: var(--gero-danger);
border: 0; cursor: pointer; color: #fff; background: var(--ac);
transition: filter .14s ease, box-shadow .14s ease, transform .14s ease;
}
.gero-pill--action:hover {
filter: brightness(1.08); transform: translateY(-1px);
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ac) 70%, transparent);
}
/* Doppelter Ring statt `outline`: der Knopf steht einmal auf dem dunklen
Hero-Gradienten und einmal auf weissem Grund (Pop-out-Kopf) — ein einfarbiger
Ring verschwände auf einer der beiden Flächen. */
.gero-pill--action:focus-visible {
outline: none;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac);
}
/* Ersparnis-Spotlight im Hero (Glas-Effekt, grüner Payoff) */
.gero-savings {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
border-radius: 16px; padding: 1.05rem 1.4rem; min-width: 268px;
}
.gero-savings__label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: rgba(255,255,255,0.72); }
.gero-savings__num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #fff; }
.gero-savings__accent { color: #4ade80; }
.gero-savings__sub { font-size: .8rem; color: rgba(255,255,255,0.82); }
/* Kachelzeile der Kundenakte: die Kacheln teilen sich die Breite nach ANZAHL.
Zwei davon hängen an der Buchhaltungs-Rolle — mit festen Viertel-Spalten
füllte ein Bearbeiter nur die linke Hälfte und rechts stand nichts. */
.gero-kpi-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.gero-kpi-row > .gero-crm-kpi { flex: 1 1 210px; min-width: 0; }
/* KPI-Kachel — Akzentlinie, Icon-Badge, Hover-Lift */
.gero-crm-kpi {
position: relative; height: 100%;
background: var(--gero-surface);
border: 1px solid var(--gero-border); border-radius: 16px;
padding: 1.15rem 1.3rem; overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.gero-crm-kpi::before {
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
background: var(--kpi-accent, var(--gero-cyan));
}
.gero-crm-kpi:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(0,30,65,0.5); }
.gero-crm-kpi--active { border-color: var(--kpi-accent, var(--gero-cyan)); box-shadow: 0 0 0 1px var(--kpi-accent, var(--gero-cyan)) inset; }
.gero-crm-kpi__icon {
width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
/* Icon und Label in EINER Kopfzeile, die Zahl darunter: „0,00 €" zuerst und
erst darunter wovon — das las sich rückwärts. */
.gero-crm-kpi__head {
display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem;
}
.gero-crm-kpi__num { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--gero-text); }
/* Eine Null ist keine Nachricht: sie tritt zurück, damit die Kacheln mit einem
echten Wert die Zeile führen. */
.gero-crm-kpi__num--zero { font-weight: 600; color: var(--gero-muted); }
.gero-crm-kpi__label { display: block; font-size: .8rem; color: var(--gero-muted); }
/* NUR in der neuen Kopfzeile führt das Label die Kachel an und wird dafür
dunkler — sonst wäre eine Kachel mit Nullwert durchgehend grau. Die
Basisklasse bleibt gedämpft: drei weitere Seiten (fnz, ziele,
inventory/article_detail) setzen sie weiterhin als Bildunterschrift
UNTER die Zahl, dort würde fett/dunkel mit der Kennzahl konkurrieren. */
.gero-crm-kpi__head .gero-crm-kpi__label {
font-size: .82rem; font-weight: 600; color: var(--gero-text);
}
/* Handlungs-Kachel (Kundenakte): Zusatzzeile mit Stichtag/Herkunft — die Zahl
allein sagt nicht, worauf sie sich bezieht. */
/* Eigener, dunklerer Grauton statt --gero-muted: die Hinweiszeile ist der
kleinste Text der Kachel und liefe damit unter 4,5:1 (WCAG AA). */
.gero-crm-kpi__hint { display: block; font-size: .72rem; color: #56616e; margin-top: .35rem; min-height: 1.1em; }
.gero-crm-kpi--action { display: block; }
button.gero-crm-kpi--action { cursor: pointer; }
button.gero-crm-kpi--action:focus-visible { outline: 2px solid var(--kpi-accent, var(--gero-cyan)); outline-offset: 2px; }
/* Anbieter-Akzentfarben (Ertrag-Monitoring): vier GSM-Provider-Blöcke lasen
sich bisher als eine ununterscheidbare graue Kette gleicher `.gero-pill`s.
Eine feste Farbe je Anbieter macht das Scannen einer Seite mit vier
Blöcken schneller — ursprünglich ohne Anspruch, die Brandfarben der
Anbieter zu treffen (Telekom/Vodafone/mobilcom sind reiner Zufall).
Ausnahme seit 2026-09-13: o2/Telefónica stand auf Teal (#0d9488, ohne
jeden Bezug) und wirkte dadurch wie eine falsche Markenaussage statt wie
keine — Nutzer-Korrektur auf die echte o2-Markenfarbe Blau. `data-provider`
trägt den Code aus `services.GSM_PROVIDERS` (o2/telekom/vodafone/mobilcom). */
:root {
--gero-prov-o2: #0057b8;
--gero-prov-telekom: #db2777;
--gero-prov-vodafone: #dc2626;
--gero-prov-mobilcom: #7c3aed;
}
.gero-provider-head {
display: inline-flex; align-items: center; gap: .5rem;
font-weight: 700; font-size: .92rem; color: var(--gero-text);
padding: .3rem .75rem .3rem .6rem; border-radius: 999px;
background: color-mix(in srgb, var(--prov-accent, var(--gero-muted)) 12%, var(--gero-surface));
border: 1px solid color-mix(in srgb, var(--prov-accent, var(--gero-muted)) 30%, var(--gero-surface));
}
.gero-provider-head::before {
content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
background: var(--prov-accent, var(--gero-muted));
}
.gero-provider-head[data-provider="o2"] { --prov-accent: var(--gero-prov-o2); }
.gero-provider-head[data-provider="telekom"] { --prov-accent: var(--gero-prov-telekom); }
.gero-provider-head[data-provider="vodafone"] { --prov-accent: var(--gero-prov-vodafone); }
.gero-provider-head[data-provider="mobilcom"] { --prov-accent: var(--gero-prov-mobilcom); }
/* Dieselbe Akzentfarbe als schmaler Streifen an der Tabellen-Gruppenzelle
(umsatz_kosten-Matrix: EINE Zelle über 6 Zeilen statt einer Kopfzeile). */
td.gero-provider-cell {
border-left: 4px solid var(--prov-accent, var(--gero-muted)) !important;
color: var(--prov-accent, var(--gero-text));
font-weight: 700;
}
td.gero-provider-cell[data-provider="o2"] { --prov-accent: var(--gero-prov-o2); }
td.gero-provider-cell[data-provider="telekom"] { --prov-accent: var(--gero-prov-telekom); }
td.gero-provider-cell[data-provider="vodafone"] { --prov-accent: var(--gero-prov-vodafone); }
td.gero-provider-cell[data-provider="mobilcom"] { --prov-accent: var(--gero-prov-mobilcom); }
/* Segment-Balken (Bindefristen-Verteilung) */
.gero-crm-seg { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: var(--gero-border); }
.gero-crm-seg > span { display: block; height: 100%; }
/* Gestaffeltes Einblenden — AKTUELL UNBENUTZT (2026-07-27 aus allen Templates
entfernt). Die Sequenz startete bei opacity 0 und lief eine halbe Sekunde;
auf dem Hero, dem grössten Element ganz oben, las sich das als kurzes Blinken
bei jedem Seitenaufruf. Vor allem war es ein sichtbarer Unterschied zwischen
den Beta-Seiten (hatten es) und den freigegebenen (hatten es nie) — dieselbe
Software durfte sich nicht je nach Modul anders anfühlen.
Definition bleibt stehen, falls die Sequenz je bewusst zurückkommen soll;
dann aber überall oder nirgends. */
@keyframes geroReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gero-reveal { animation: geroReveal .5s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .gero-reveal { animation: none; } }
/* Schlankes Hero-Band für Detail-/Entitäts-Seiten (Auftrag/Beleg/Projekt) */
.gero-hero--slim { padding: 1.2rem 1.4rem; border-radius: 16px; }
.gero-hero--slim .gero-hero__mono { width: 48px; height: 48px; border-radius: 13px; font-size: 1.2rem; }
/* Semantische Status-Pills (heller Grund) — durchgängige Ampel über alle Module */
.gero-pill--ok { background: color-mix(in srgb, var(--gero-ok) 13%, transparent); color: var(--gero-ok-tx); }
.gero-pill--info { background: rgba(0,175,235,.13); color: #007aab; }
.gero-pill--warn { background: rgba(245,158,11,.15); color: var(--gero-warn-tx); }
.gero-pill--danger { background: rgba(239,68,68,.13); color: #b91c1c; }
.gero-pill--muted { background: rgba(148,163,184,.18);color: #475569; }
/* Ein-/Ausblenden-Schalter (rot/grün) — generalisiert aus dem Angebotstool-
Spaltenschalter (`gero-col-toggle` in _recommendation_form.html). Grün = Inhalt
ist eingeblendet/sichtbar, Rot = ausgeblendet. Der farbige Punkt ist ein
zweites, graustufen-taugliches Signal (gefüllt=an, hohl=aus). Kontraste wie im
Vorbild: #14532d auf #ecfdf5 ≈ 11:1, #991b1b auf #fef2f2 ≈ 8:1 (WCAG AAA). */
.gero-vis-toggle {
border-radius: 25px; padding: 6px 14px; font-weight: 500;
border-width: 1.5px; border-style: solid; transition: all .18s;
display: inline-flex; align-items: center;
}
.gero-vis-toggle .gero-vis-dot {
display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
margin-right: .45rem; flex: none;
}
/* AN — Inhalt eingeblendet (grün, gefüllter Punkt). */
.gero-vis-toggle.is-on { background-color: #ecfdf5; border-color: #15803d; color: #14532d; }
.gero-vis-toggle.is-on .gero-vis-dot { background-color: #15803d; }
.gero-vis-toggle.is-on:hover { background-color: #d6f5e3; border-color: #14532d; }
/* AUS — Inhalt ausgeblendet (rot, hohler Punkt). */
.gero-vis-toggle.is-off { background-color: #fef2f2; border-color: #b91c1c; color: #991b1b; }
.gero-vis-toggle.is-off .gero-vis-dot { background-color: transparent; box-shadow: inset 0 0 0 1.5px #b91c1c; }
.gero-vis-toggle.is-off:hover { background-color: #fde2e2; border-color: #991b1b; }
/* Tabellen-Zeilen-Hover (Listen wirken lebendig statt statisch) */
.gero-table tbody tr { transition: background .12s ease; }
.gero-table tbody tr:hover { background: rgba(0,175,235,.05); }
/* Kanban / Pipeline-Board (Projekte — Headline-WOW) */
.gero-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.gero-kanban__col {
flex: 0 0 270px; min-width: 270px;
background: var(--gero-bg); border: 1px solid var(--gero-border);
border-radius: 14px; display: flex; flex-direction: column;
}
.gero-kanban__head {
padding: .7rem .85rem; border-bottom: 1px solid var(--gero-border);
border-top: 3px solid var(--col-accent, var(--gero-cyan));
border-radius: 14px 14px 0 0;
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.gero-kanban__title { font-size: .8rem; font-weight: 700; color: var(--gero-text); }
.gero-kanban__sum { font-size: .72rem; color: var(--gero-muted); white-space: nowrap; }
.gero-kanban__count {
font-size: .7rem; font-weight: 700; color: #fff; background: var(--col-accent, var(--gero-cyan));
border-radius: 999px; padding: .05rem .45rem;
}
.gero-kanban__body { padding: .6rem; display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; max-height: 62vh; }
.gero-kanban__card {
display: block; background: var(--gero-surface); border: 1px solid var(--gero-border);
border-radius: 11px; padding: .65rem .75rem; text-decoration: none; color: inherit;
box-shadow: 0 2px 6px -4px rgba(0,30,65,.25);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gero-kanban__card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,30,65,.5); border-color: var(--gero-cyan); color: inherit; }
.gero-kanban__empty { padding: 1rem .75rem; text-align: center; color: var(--gero-muted); font-size: .8rem; }
/* Pipeline-Trichter (Projekt-Übersicht Standardansicht — Option C). Vier Phasen-
Segmente, je ein Gradient (--c1→--c2 inline gesetzt), als Link zum Filtern der
Liste darunter (?phase=…). Chevron am rechten Rand = Trichter-Fluss. */
.gero-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gero-funnel__seg {
position: relative; display: block; border-radius: 12px; padding: .75rem .8rem .8rem;
color: #fff; text-decoration: none; overflow: visible;
background: linear-gradient(135deg, var(--c1), var(--c2));
box-shadow: 0 8px 18px -12px rgba(0,30,65,.5);
/* Weißer Text sitzt links über dem dunklen c1-Ende; der Schatten sichert die
Lesbarkeit auch dort, wo er über das hellere c2-Ende läuft (WCAG-Puffer). */
text-shadow: 0 1px 2px rgba(3,20,42,.42);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gero-funnel__seg:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0,30,65,.6); color: #fff; filter: saturate(1.12); }
.gero-funnel__seg:focus-visible { outline: 3px solid var(--gero-cyan); outline-offset: 2px; }
.gero-funnel__seg.is-active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.92), 0 12px 24px -12px rgba(0,30,65,.65); }
.gero-funnel__k { display: block; font-size: .68rem; font-weight: 700; opacity: .92; text-transform: uppercase; letter-spacing: .04em; }
.gero-funnel__v { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.05; margin-top: .1rem; }
.gero-funnel__e { display: block; font-size: .74rem; opacity: .92; }
.gero-funnel__arrow {
position: absolute; right: -9px; top: 50%; width: 18px; height: 18px;
transform: translateY(-50%) rotate(45deg); border-radius: 3px;
background: var(--c2); z-index: 1;
}
.gero-funnel__seg:last-child .gero-funnel__arrow { display: none; }
@media (max-width: 720px) {
.gero-funnel { grid-template-columns: repeat(2, 1fr); }
.gero-funnel__arrow { display: none; }
}
/* Stufen-Trichter (Projekt-Übersicht, Ansicht „Trichter"): jede Stufe ein
zentriertes Band, Breite = Anzahl (--w inline), Farbe von dunkel nach grün
(--c inline). Rechts Wert und Alter; .is-stau markiert die längste Liegezeit. */
:root { --trichter-1:#0a3d6b; --trichter-2:#0a5c9e; --trichter-3:#0a86c2; --trichter-4:#0ea5d6; --trichter-5:#10b3a6; --trichter-6:#16a34a; --trichter-track:#eef2f6; }
[data-bs-theme="dark"] { --trichter-1:#2b5f99; --trichter-2:#2475bd; --trichter-3:#1f97d4; --trichter-4:#22b5e3; --trichter-5:#20c2b3; --trichter-6:#2fbf68; --trichter-track:#22324a; }
.gero-trichter-kopf { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:.25rem; }
.gero-trichter-form svg { display:block; width:100%; max-width:900px; height:auto; margin:0 auto; font-family:var(--font-body); }
.gero-trichter-form path { transition:filter .15s ease; }
.gero-trichter-form a:hover path, .gero-trichter-form a:focus path { filter:brightness(1.12) saturate(1.1); }
.gero-trichter-form a { text-decoration:none; }
.gero-trichter-form a:focus { outline:none; }
.gero-trichter-form__zahl { fill:#fff; font-family:var(--font-heading); font-weight:800; font-size:16px; pointer-events:none; }
.gero-trichter-form__lab { fill:var(--gero-text); font-weight:700; font-size:14px; }
.gero-trichter-form__sub { fill:var(--gero-muted); font-size:11.5px; }
.gero-trichter-form__rechts { fill:var(--gero-text); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }
.gero-trichter-strecke { display:grid; grid-template-columns:repeat(9,minmax(96px,1fr)); gap:8px; margin-top:1rem; overflow-x:auto; padding-bottom:4px; }
.gero-trichter-kachel { position:relative; display:grid; gap:4px; align-content:start; padding:.7rem .65rem; border-radius:12px; background:var(--gero-bg); border:1px solid var(--gero-border); color:inherit; text-decoration:none; min-width:0; transition:transform .15s ease, box-shadow .15s ease; }
.gero-trichter-kachel:hover { transform:translateY(-2px); box-shadow:0 10px 20px -14px rgba(0,30,65,.5); color:inherit; border-color:var(--gero-cyan); }
.gero-trichter-kachel:focus-visible { outline:2px solid var(--gero-cyan); outline-offset:2px; }
.gero-trichter-kachel__p { font-size:.72rem; font-weight:700; color:var(--gero-muted); font-family:'SF Mono','Menlo',monospace; }
.gero-trichter-kachel__n { font:800 1.6rem/1 var(--font-heading); font-variant-numeric:tabular-nums; }
.gero-trichter-kachel__t { font-size:.76rem; line-height:1.25; color:var(--gero-muted); min-height:2.5em; }
.gero-trichter-kachel__e { font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; }
.gero-trichter-kachel__hitze { height:6px; border-radius:3px; background:var(--trichter-track); }
.gero-trichter-kachel__hitze.is-jung { background:var(--gero-ok); }
.gero-trichter-kachel__hitze.is-mittel { background:var(--gero-warn); }
.gero-trichter-kachel__hitze.is-alt { background:#dc6b2f; }
.gero-trichter-kachel__a { font-size:.7rem; color:var(--gero-muted); }
.gero-trichter-kachel.is-won { background:color-mix(in srgb, var(--gero-ok) 10%, var(--gero-surface)); border-color:color-mix(in srgb, var(--gero-ok) 45%, var(--gero-border)); }
.gero-trichter-kachel.is-stau { box-shadow:inset 0 0 0 2px var(--gero-warn); }
.gero-trichter__park { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:.8rem; }
.gero-trichter__park a { display:flex; justify-content:space-between; align-items:baseline; gap:10px; border:1px dashed var(--gero-border); border-radius:10px; padding:.55rem .8rem; color:var(--gero-muted); text-decoration:none; font-size:.85rem; }
.gero-trichter__park a:hover { border-color:var(--gero-cyan); color:var(--gero-text); }
.gero-trichter__park b { font-size:1.15rem; font-variant-numeric:tabular-nums; }
@media (max-width:760px) { .gero-trichter__park { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .gero-trichter-kachel, .gero-trichter-form path { transition:none; } }
/* ── Monitoring Sub-Navigation (Pills im Cockpit-Look statt Bootstrap-Blau) ── */
.gero-subnav .nav-link {
color: var(--gero-accent-tx);
background: var(--gero-surface);
border: 1px solid var(--gero-border);
border-radius: 9px;
font-size: .85rem;
font-weight: 600;
padding: .4rem .8rem;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gero-subnav .nav-link:hover {
border-color: var(--gero-cyan);
color: var(--gero-cyan);
}
.gero-subnav .nav-link.active {
background: var(--gero-navy-2, #003a73);
border-color: var(--gero-navy-2, #003a73);
color: #fff;
}
/* ── Such-zentrierter Kunden-Einstieg ─────────────────────────────────────
Hero mit großem Suchfeld + Filter-Pills, Ergebnis als Karten-Grid. */
.gero-search-hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--gero-navy), var(--gero-navy-3));
border-radius: 18px; padding: 1.55rem 1.7rem; color: #fff;
}
.gero-search-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 .9rem; }
/* Dauerhafte Hinweiszeile im Hero („Sucht in …"). BEWUSST nicht `text-white-50`:
.5 Deckkraft auf dem Navy-Verlauf bleibt unter 3:1 Kontrast — für den kurz
aufblitzenden Spinner-Text daneben vertretbar, für Fließtext, der immer
dasteht, nicht (UX-Review 2026-07-28). Gleiche Deckkraft wie `.gero-hero__meta`. */
.gero-search-hint { color: rgba(255,255,255,.78); }
.gero-search-box { position: relative; max-width: 640px; }
.gero-search-box .gero-search-icon {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
color: var(--gero-accent-tx); font-size: 1.1rem; pointer-events: none;
}
.gero-search-input {
width: 100%; border: 0; border-radius: 14px;
padding: .95rem 1rem .95rem 2.8rem; font-size: 1.05rem; color: var(--gero-text);
box-shadow: 0 12px 30px -14px rgba(0,0,0,.55);
}
.gero-search-input:focus { outline: 3px solid rgba(0,175,235,.55); }
.gero-filter-pill {
display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
padding: .34rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
background: rgba(255,255,255,.14); color: #fff;
border: 1px solid rgba(255,255,255,.25); user-select: none;
transition: background .15s ease, border-color .15s ease;
}
.gero-filter-pill:hover { background: rgba(255,255,255,.24); }
.gero-filter-pill input { position: absolute; opacity: 0; pointer-events: none; }
/* Tastatur-Fokus sichtbar machen (Checkbox ist visuell versteckt). */
.gero-filter-pill:has(input:focus-visible) { outline: 2px solid rgba(0,175,235,.7); outline-offset: 2px; }
.gero-filter-pill:has(input:checked) { background: var(--gero-cyan); border-color: var(--gero-cyan); color: var(--gero-navy); }
.gero-cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.gero-cust-card {
position: relative; display: flex; flex-direction: column; gap: .55rem;
background: var(--gero-surface); border: 1px solid var(--gero-border);
border-radius: 16px; padding: 1.05rem 1.15rem; overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gero-cust-card::before {
content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px;
background: var(--gero-cyan); opacity: 0; transition: opacity .18s ease;
}
.gero-cust-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(0,30,65,.5); border-color: rgba(0,175,235,.45); }
.gero-cust-card:hover::before { opacity: 1; }
.gero-cust-card--stub { border-style: dashed; border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.035); }
.gero-cust-card--stub::before { background: #f59e0b; }
.gero-cust-card--stub:hover { border-color: rgba(245,158,11,.75); }
/* Sortierbare Tabellen-Spaltenköpfe — erben exakt den nativen th-Look
(.gero-table > thead > tr > th): navy-3, Großbuchstaben, .72rem/700. */
.gero-cust-table th { white-space: nowrap; }
.gero-th-sort {
border: 0; background: transparent; padding: 0; cursor: pointer;
font-family: inherit; font-weight: 700; color: var(--gero-accent-tx);
display: inline-flex; align-items: center; gap: .3rem;
text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
transition: color .15s ease;
}
.gero-th-sort:hover { color: var(--gero-cyan); }
.gero-th-sort.is-active { color: var(--gero-cyan); }
.gero-th-sort__hint { opacity: .4; font-size: .68rem; }
.gero-cust-row--stub { background: rgba(245,158,11,.05); }
.gero-cust-row--stub:hover { background: rgba(245,158,11,.09); }
.gero-cust-card__name { font-weight: 700; color: var(--gero-text); font-size: 1.02rem; line-height: 1.25; }
.gero-cust-card__cmo { font-size: .74rem; font-family: ui-monospace, 'SFMono-Regular', monospace; color: var(--gero-muted); }
.gero-cust-chip {
display: inline-flex; align-items: center; gap: .32rem;
font-size: .74rem; font-weight: 600; color: var(--gero-body);
background: var(--gero-bg); border: 1px solid var(--gero-border);
border-radius: 8px; padding: .22rem .5rem;
}
/* Anklickbarer Chip (Ort → Karte). Sieht bis zum Hover aus wie die anderen —
das Symbol trägt die Bedeutung, der Hover bestätigt sie. */
a.gero-cust-chip { text-decoration: none; transition: border-color .12s, color .12s, background .12s; }
a.gero-cust-chip:hover,
a.gero-cust-chip:focus-visible {
color: var(--gero-accent-tx); border-color: var(--gero-accent-tx);
background: rgba(0,113,168,.07);
}
/* ── Akte-Tabs — Pill-Cloud im Navy/Cyan-Stil ─────────────────────────────
Überschreibt die Bootstrap-`nav-tabs`-Defaults (blasse Link-Tabs + grauer
Unterstrich) zu farbigen Pills mit gefülltem Aktiv-Zustand. Greift in beiden
Akten (Kunde + Lager-Artikel), die `.gero-tabs` nutzen. */
/* Kompakt gesetzt, damit ALLE Reiter sichtbar bleiben: die Akte hat 17 davon,
und die Mitarbeiterinnen kennen sie aus dem Vorsystem vollständig auf zwei
Zeilen. Weiter gefasst brauchten sie drei und schoben den Inhalt nach unten;
ein Überlauf-Menü kam nicht in Frage (GF 2026-07-30) — also enger. */
.gero-tabs.nav-tabs { border-bottom: 0; gap: .28rem; }
.gero-tabs .nav-item { margin: 0; }
.gero-tabs .nav-link {
display: inline-flex; align-items: center; gap: .3rem;
margin: 0; padding: .3rem .6rem;
border: 1px solid var(--gero-border); border-radius: 999px;
font-size: .78rem; font-weight: 600; color: var(--gero-muted);
background: var(--gero-surface);
transition: color .15s ease, background .15s ease, border-color .15s ease,
box-shadow .15s ease, transform .15s ease;
}
.gero-tabs .nav-link i { font-size: .85rem; opacity: .85; }
.gero-tabs .nav-link:hover {
color: var(--gero-accent-tx); border-color: rgba(0,175,235,.5);
background: rgba(0,175,235,.08);
}
.gero-tabs .nav-link.active {
color: #fff; border-color: transparent;
background: linear-gradient(135deg, var(--gero-navy-3), var(--gero-cyan));
box-shadow: 0 8px 18px -8px rgba(0,75,150,.6);
transform: translateY(-1px);
}
.gero-tabs .nav-link.active i { opacity: 1; }
.gero-tabs .nav-link:focus-visible { outline: 2px solid var(--gero-cyan); outline-offset: 2px; }
/* Zähler-Badge in den Tabs (statt hartem bg-secondary) */
.gero-tabs .nav-link .badge {
background: var(--gero-bg) !important; color: var(--gero-body) !important;
border: 1px solid var(--gero-border); font-weight: 700;
border-radius: 999px; padding: .1rem .38rem; font-size: .66rem;
}
.gero-tabs .nav-link.active .badge {
background: rgba(255,255,255,.22) !important; color: #fff !important;
border-color: rgba(255,255,255,.4) !important;
}
/* ── Tabellen — „designter" Look (Komponente war bisher ungestylt) ────────
Dezenter Großbuchstaben-Header, weiche Trennlinien, Zeilen-Hover. */
.gero-table { margin-bottom: 0; }
.gero-table > thead > tr > th {
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--gero-accent-tx);
background: linear-gradient(var(--gero-bg), var(--gero-bg)) padding-box;
border-top: 0; border-bottom: 2px solid rgba(0,175,235,.35);
padding: .6rem .75rem; white-space: nowrap;
}
.gero-table > tbody > tr { transition: background .12s ease; }
.gero-table > tbody > tr:hover { background: rgba(0,175,235,.05); }
.gero-table > tbody > tr > td {
border-top: 0; border-bottom: 1px solid var(--gero-border);
padding: .6rem .75rem; vertical-align: middle;
}
.gero-table > tbody > tr:last-child > td { border-bottom: 0; }
/* ── Leerzustand — glühender Icon-Badge statt verblasstem Riesen-Icon ──── */
.gero-empty { text-align: center; padding: 2.6rem 1rem; }
.gero-empty__icon {
width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
color: var(--gero-accent-tx);
background: radial-gradient(circle at 32% 28%, rgba(0,175,235,.18), rgba(0,75,150,.07));
border: 1px solid rgba(0,175,235,.25);
}
.gero-empty__title { font-weight: 600; color: var(--gero-text); }
.gero-empty__sub {
font-size: .85rem; color: var(--gero-muted); margin: .3rem auto 0; max-width: 460px;
}
.gero-empty__sub a { color: var(--gero-accent-tx); font-weight: 600; }
.gero-empty .btn { margin-top: 1.1rem; }
/* ── Provider-Badge — Marken-Farbe in Tabellen (Anbieter-Spalte) ───────────
Farbe kommt per --pc (provider_color-Filter); Punkt + getönter Grund. */
.gero-provider-badge {
display: inline-flex; align-items: center; gap: .38rem;
font-size: .74rem; font-weight: 700; line-height: 1;
padding: .26rem .6rem; border-radius: 999px;
color: var(--pc, #6c757d);
background: color-mix(in srgb, var(--pc, #6c757d) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--pc, #6c757d) 32%, transparent);
}
.gero-provider-badge::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--pc, #6c757d); flex: 0 0 auto;
}
/* ── Aktions-Icon-Buttons — farbcodiert je Aktion (--ac), füllen beim Hover ─ */
.gero-icon-action {
--ac: var(--gero-navy-3);
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; border-radius: 9px;
font-size: .95rem; line-height: 1; text-decoration: none;
color: var(--ac);
background: color-mix(in srgb, var(--ac) 9%, transparent);
border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent);
transition: color .14s ease, background .14s ease, border-color .14s ease,
transform .14s ease, box-shadow .14s ease;
}
.gero-icon-action + .gero-icon-action { margin-left: .3rem; }
.gero-icon-action:hover {
color: #fff; background: var(--ac); border-color: var(--ac);
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ac) 70%, transparent);
}
.gero-icon-action:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════════════════════
WOW-SEITEN-SYSTEM — der moderne Standard-Look (Backlog · Kunden · Fragen · …)
Ein Ort für Hero-Band, KPI-Kacheln, Segment-Umschalter und WOW-Karten.
Seiten nutzen diese Klassen statt inline-CSS zu duplizieren; die Ring-/Count-
up-Animation übernimmt gero.js automatisch (.gero-hero-ring .prog / .gero-count).
Dunkelmodus: über `[data-bs-theme="dark"]` (Konto-Einstellung), NICHT über
prefers-color-scheme — „wie das System“ löst das Kopf-Skript auf.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero-Band ────────────────────────────────────────────────────────────── */
/* Statischer Verlauf (bewusst KEINE Dauer-Animation — auf einem Arbeitswerkzeug
wirkt ein endlos wandernder Gradient unruhig). Einmalige Animationen (Karten-
Einflug, Ring, Count-up) bleiben. */
/* min-height als gemeinsamer Anker → alle vollen Heroes gleich hoch (Inhalt
vertikal zentriert via .gero-hero-inner align-items:center). */
.gero-hero { position:relative; overflow:hidden; border-radius:20px; margin-bottom:1.25rem;
padding:1.15rem 1.8rem; min-height:118px; box-sizing:border-box; display:flex; align-items:center; color:#fff;
background:linear-gradient(120deg,#001428 0%,#002f5e 38%,#0a5c9e 68%,#00AFEB 120%);
box-shadow:0 18px 40px -18px rgba(0,30,65,.6); }
.gero-hero-inner { flex:1 1 auto; }
.gero-hero::after { content:''; position:absolute; top:-42%; right:-8%; width:420px; height:420px; border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.14), transparent 62%); pointer-events:none; }
/* Akzent-Varianten (Gradient je Bereich) */
.gero-hero-green { background-image:linear-gradient(120deg,#001428 0%,#123f24 42%,#15803d 78%,#22c55e 125%); box-shadow:0 18px 40px -18px rgba(0,40,20,.5); }
.gero-hero-violet { background-image:linear-gradient(120deg,#1a1030 0%,#3b2a6b 45%,#6d4bc7 80%,#8b5cf6 125%); }
.gero-hero-amber { background-image:linear-gradient(120deg,#2a1800 0%,#7c4a02 45%,#b45309 80%,#f59e0b 125%); }
.gero-hero-inner { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.gero-hero-title { font-family:var(--font-heading,sans-serif); font-weight:800; font-size:1.65rem; letter-spacing:-.01em; margin:0; color:#fff; }
.gero-hero-sub { margin:.15rem 0 0; color:rgba(255,255,255,.74); font-size:.9rem; max-width:56ch; }
.gero-hero-actions { margin-left:auto; display:flex; flex-direction:column; gap:.6rem; align-items:stretch; }
/* Icon-Kachel (Alternative zum Ring) */
.gero-hero-icon { width:64px; height:64px; border-radius:18px; flex:none; display:grid; place-items:center; font-size:1.7rem;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); }
/* Fortschritts-Ring (Animation via gero.js) */
.gero-hero-ringwrap { position:relative; flex:none; }
.gero-hero-ring { width:68px; height:68px; flex:none; transform:rotate(-90deg); }
.gero-hero-ring .track { fill:none; stroke:rgba(255,255,255,.18); stroke-width:9; }
.gero-hero-ring .prog { fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round;
stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1); }
.gero-hero-ringwrap b { position:absolute; inset:0; display:grid; place-items:center;
font-family:var(--font-heading,sans-serif); font-weight:800; font-size:1.15rem; color:#fff; }
/* ── KPI-Kacheln (auf dunklem Hero-Grund) ─────────────────────────────────── */
.gero-kpi { display:flex; gap:.7rem; flex-wrap:wrap; }
/* KPI-Kacheln im Hero kompakt halten, damit die KPI-Heroes nicht deutlich höher
werden als die einfachen (mt-3 der Templates auf schmalen Abstand gedämpft). */
.gero-hero .gero-kpi { margin-top:.45rem !important; }
.gero-kpi-tile { min-width:92px; padding:.4rem .75rem; border-radius:12px; background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.gero-kpi-tile b { display:block; font-family:var(--font-heading,sans-serif); font-weight:800; font-size:1.45rem; line-height:1; color:#fff; }
.gero-kpi-tile span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.72); }
/* ── Segment-Umschalter (im Hero) ─────────────────────────────────────────── */
.gero-seg { display:inline-flex; background:rgba(255,255,255,.12); border-radius:10px; padding:.15rem; }
.gero-seg a, .gero-seg button { padding:.3rem .8rem; border:0; background:transparent; border-radius:8px; font-size:.82rem; font-weight:600;
color:rgba(255,255,255,.82); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; font-family:inherit; }
.gero-seg a.on, .gero-seg button.on { background:#fff; color:var(--gero-navy,#001E41); }
.gero-seg .cnt { font-size:.7rem; font-weight:800; background:#dc2626; color:#fff; border-radius:999px; padding:.02rem .4rem; }
.gero-seg a.on .cnt, .gero-seg button.on .cnt { background:var(--gero-navy,#001E41); color:#fff; }
/* ── WOW-Karte (moderne Inhaltskarte) ─────────────────────────────────────── */
.gero-wow-card { position:relative; background:var(--gero-surface,#fff); border:1px solid var(--gero-border,#e2e6ea); border-radius:16px;
box-shadow:0 1px 3px rgba(16,30,54,.05); transition:box-shadow .16s ease, transform .12s ease;
animation:gero-card-in .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes gero-card-in { from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;} }
.gero-wow-card:hover { box-shadow:0 12px 28px -14px rgba(16,30,54,.30); transform:translateY(-2px); }
/* Akzentbalken links (Farbe via --accent) */
.gero-wow-card.gero-accent::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px;
border-radius:0 4px 4px 0; background:var(--accent,var(--gero-cyan,#00AFEB)); }
/* ── Leerzustand · Puls ───────────────────────────────────────────────────── */
.gero-empty { text-align:center; color:var(--gero-muted,#9aa4b2); padding:3rem 1rem;
border:1.5px dashed var(--gero-border,#d7dde5); border-radius:16px; }
.gero-empty i { display:block; font-size:2.2rem; margin-bottom:.5rem; opacity:.55; }
@keyframes gero-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0);} 50%{box-shadow:0 0 0 4px rgba(220,38,38,.14);} }
@media (max-width:640px){ .gero-hero-actions{ margin-left:0; width:100%; } }
@media (prefers-reduced-motion: reduce){ .gero-hero{animation:none;} .gero-wow-card{animation:none;} }
/* Weißer Hero-CTA-Knopf (auf dunklem Hero-Grund) */
.gero-hero-btn { border:0; border-radius:12px; padding:.6rem 1.1rem; font-weight:700; color:var(--gero-navy,#001E41); background:#fff;
text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
box-shadow:0 6px 18px -6px rgba(0,0,0,.4); transition:transform .12s, box-shadow .12s; cursor:pointer; }
.gero-hero-btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(0,0,0,.5); color:var(--gero-navy,#001E41); }
/* ── Kompakte Hero-Variante (gleicher Look, weniger Höhe: dichte/Formularseiten) ── */
.gero-hero-sm { padding:1.05rem 1.4rem; margin-bottom:1rem; }
.gero-hero-sm .gero-hero-title { font-size:1.3rem; }
.gero-hero-sm .gero-hero-sub { font-size:.86rem; }
.gero-hero-sm::after { width:300px; height:300px; top:-55%; }
.gero-hero-sm .gero-hero-icon { width:46px; height:46px; font-size:1.3rem; border-radius:14px; }
/* ── Badge-System (Status) — ein Ort statt verstreuter inline-style-Badges ── */
.gero-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:700;
letter-spacing:.02em; padding:.2rem .6rem; border-radius:999px; white-space:nowrap; line-height:1.35;
background:var(--gero-bg,#f2f4f7); color:var(--gero-muted,#64748b); border:1px solid var(--gero-border,#e2e6ea); }
.gero-badge--ok { background:var(--gero-ok-bg); color:var(--gero-ok-tx); border-color:transparent; }
.gero-badge--warn { background:var(--gero-warn-bg); color:var(--gero-warn-tx); border-color:transparent; }
.gero-badge--danger { background:var(--gero-danger-bg); color:var(--gero-danger-tx); border-color:transparent; }
.gero-badge--info { background:#e0f2fe; color:#0369a1; border-color:transparent; }
.gero-badge--muted { background:#eef1f5; color:#64748b; border-color:transparent; }
.gero-badge--accent { background:color-mix(in srgb,var(--gero-cyan,#00AFEB) 14%,transparent); color:var(--gero-cyan-dark,#008cbe); border-color:transparent; }
/* ── FOUC-Guard: kein Transition-Flackern beim ersten Laden ──────────────────
Beim Laden feuern CSS-Transitions einmal kurz mit, während der Browser die
Styles setzt → sichtbares Repaint/„Blinken" (v.a. Karten/Kacheln, CLS=0, also
kein Verschieben — nur Neuzeichnen). `.gero-preload` liegt initial am
und schaltet Transitions ab; gero.js entfernt die Klasse nach `window.load`,
dann sind Hover-/Interaktions-Transitions wieder normal aktiv. Fällt JS aus,
bleiben nur die Transitions weg (Seite voll funktionsfähig). */
.gero-preload,
.gero-preload *,
.gero-preload *::before,
.gero-preload *::after {
transition-duration: 0s !important;
transition-delay: 0s !important;
}
/* ── In-App-Tour (gero-tour.js) — Schulungs-Overlay mit Spotlight ────────────
Das Spotlight ist ein transparentes Rechteck über dem erklärten Element;
der riesige box-shadow dunkelt den REST der Seite ab (eine einzige Fläche,
kein vierteiliges Overlay → keine Fugen beim Repositionieren). Das Overlay
fängt alle Klicks ab, solange die Tour läuft — bedient wird nur die Karte. */
.gero-tour-overlay {
position: fixed; inset: 0; z-index: 2000;
}
.gero-tour-spotlight {
position: fixed;
border-radius: 8px;
box-shadow: 0 0 0 9999px rgba(0, 30, 65, 0.62);
border: 2px solid var(--gero-cyan, #00AFEB);
transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
pointer-events: none;
}
.gero-tour-card {
position: fixed;
width: 380px; max-width: calc(100vw - 24px);
background: var(--gero-surface, #fff);
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0, 30, 65, 0.35);
padding: .9rem 1.1rem 1rem;
transition: left .25s ease, top .25s ease;
}
.gero-tour-card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: .35rem;
}
.gero-tour-step-count {
font-size: .72rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--gero-cyan-dark, #008cbe);
}
.gero-tour-close {
border: 0; background: none; font-size: 1.3rem; line-height: 1;
color: var(--gero-muted, #6c7a89); padding: 0 .2rem; cursor: pointer;
}
.gero-tour-close:hover { color: var(--gero-text, #1a2640); }
.gero-tour-title {
font-weight: 700; color: var(--gero-text, #1a2640); margin-bottom: .35rem;
}
.gero-tour-text {
font-size: .85rem; color: var(--gero-body, #4F4F4F); line-height: 1.5;
}
.gero-tour-text .gero-tour-chip {
display: inline-block; padding: 0 .35rem; border-radius: 4px;
font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.gero-tour-nav {
display: flex; justify-content: space-between; gap: .5rem; margin-top: .8rem;
}
/* ── Sortierbare Spaltenkoepfe (Auftragslisten) ─────────────────────────── */
/* Der Kopf ist dunkel, deshalb erbt der Link die weisse Schrift statt der */
/* Link-Farbe. Das Doppelpfeil-Symbol bleibt blass, bis die Spalte wirklich */
/* sortiert — sonst sieht jede Spalte gleich aktiv aus. */
.gero-table thead th a.gero-sort {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.gero-table thead th a.gero-sort:hover { text-decoration: underline; }
.gero-sort__icon { opacity: .35; font-size: .7rem; }
.gero-table thead th a.gero-sort:hover .gero-sort__icon { opacity: .8; }
.gero-sort--aktiv { font-weight: 700; }
/* ── Lange Arbeitslisten (Serienbrief-Prüfseite) ───────────────────────────
Eine Liste mit hunderten Zeilen und Auswahlkästchen wird nicht geblättert
(das verlöre die Häkchen), sondern im eigenen Fenster gescrollt — und der
Spaltenkopf bleibt dabei stehen, sonst rät man ab Zeile 30, welche Spalte
welche ist. */
/* `gero-tabelle-lang` und `gero-thead-haftend` werden seit dem 18.09.2026
oben zusammen mit der allgemeinen Vorgabe gesetzt (eine Regel statt zwei
Mechanismen nebeneinander) — hier stehen nur noch die Spaltenbreiten. */
.gero-spalte-auswahl { width: 2.5rem; }
.gero-spalte-nummer { width: 3.5rem; }
/* Schreibfläche des Vorlagen-Editors (Quill). Weiß, damit der Text so
aussieht wie später auf dem Papier. */
.gero-editor-flaeche { min-height: 320px; background: #fff; }
/* ═══════════════════════════════════════════════════════════════════════════
MITARBEITER-DASHBOARD (Startseite `/` für `can_dev`, Board bdd8bfe0)
Nachbau `CRM_Dashboard.exe`: vier getrennte Bereiche als Kacheln, darunter
die Arbeitslisten des Reiters „Wichtig". Bewusst ohne Diagramme — die Seite
ist eine Arbeitsfläche, keine Auswertung.
Bereichsfarbe je Kachel über `--area` / `--area-bg`, damit Kachel, Listen-
Kopf und Symbol dieselbe Farbe tragen und man den Bereich wiedererkennt.
═══════════════════════════════════════════════════════════════════════════ */
/* ⭐ Eine Blau-Reihe aus der MARKE statt fuenf Fremdfarben (18.09.2026).
Vorher trugen die fuenf Bereiche #0284c7 blau · #b45309 braun-orange ·
#6d28d9 LILA · #047857 gruen · #0891b2 tuerkis — fuenf Toene aus fuenf
Ecken des Farbkreises, keiner davon aus dem Portal-Design. Die Seite las
sich als „bunt" (Nutzer-Befund beim Durchgang).
Die AUFGABE der Farbe bleibt: Kachel, Listenkopf und Symbol eines Bereichs
tragen denselben Ton, damit man den Bereich wiedererkennt. Sie alle auf
Cyan zu setzen haette genau das genommen. Stattdessen eine Reihe von dunkel
nach hell innerhalb der Marken-Familie — unterscheidbar, aber EIN System.
Nebeneffekt, und er ist der wichtigere: Gruen und Rot sind damit wieder
frei fuer ihre Bedeutung (Ampel), statt als Dekoration eines Bereichs zu
dienen. Ein gruener Kachelkopf neben einer roten Zahl sagt sonst zweierlei.
`--area-bg` ist jeweils der zugehoerige helle Tint derselben Farbe.
⚠ **Die Reihe endet NICHT beim hellen Cyan** — `--area` ist eine
TEXTfarbe (Kachelkopf, Zahl, Link auf `--area-bg`), und Weiss liegt beim
Hover darauf. Ein erster Anlauf ging bis `#00AFEB`/`#3FB9B0` und war dort
mit 2,2:1 unlesbar; nachgerechnet statt nach Augenmass entschieden. Alle
fuenf Toene halten jetzt 4,5:1 in BEIDE Richtungen — die alte Fassung tat
das bei zweien nicht (`#0284c7` 3,57 · `#0891b2` 3,29).
Wer einen Ton aendert, rechnet ihn nach. */
.gero-dash-area--projekte { --area:#001E41; --area-bg:#e6eaf0; } /* Navy 13,8:1 */
.gero-dash-area--angebote { --area:#004B96; --area-bg:#e3ecf7; } /* Sekundaer 7,2:1 */
.gero-dash-area--tickets { --area:#00648F; --area-bg:#e2eff5; } /* 5,6:1 */
.gero-dash-area--termine { --area:#00707A; --area-bg:#e2f2f3; } /* 5,1:1 */
.gero-dash-area--upload { --area:#0F7B6C; --area-bg:#e4f3f0; } /* 4,5:1 */
/* ── Hero ─────────────────────────────────────────────────────────────── */
.gero-dash-hero { padding:1.6rem 1.9rem; min-height:0; }
.gero-dash-hero .gero-hero-inner { align-items:stretch; gap:1.6rem 2rem; }
.gero-dash-hero__main { flex:1 1 420px; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.gero-dash-hero__date { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.66); }
.gero-dash-hero .gero-hero-title { font-size:1.9rem; margin-top:.2rem; }
.gero-dash-hero .gero-hero-sub { max-width:62ch; font-size:.95rem; margin-top:.35rem; }
.gero-dash-hero .gero-hero-sub b { color:#fff; }
.gero-dash-search { position:relative; margin-top:1rem; max-width:520px; }
.gero-dash-search i { position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.7); pointer-events:none; }
.gero-dash-search input { width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12);
color:#fff; padding:.62rem .9rem .62rem 2.4rem; font-size:.9rem; transition:background .15s ease, border-color .15s ease; }
.gero-dash-search input::placeholder { color:rgba(255,255,255,.62); }
.gero-dash-search input:focus { outline:none; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); box-shadow:0 0 0 3px rgba(0,175,235,.35); }
.gero-dash-hero__side { flex:0 1 auto; display:flex; flex-direction:column; justify-content:center; gap:.7rem; }
.gero-dash-hero__actions { display:flex; flex-direction:column; gap:.5rem; }
.gero-dash-hero__actions .gero-hero-btn { padding:.5rem .9rem; font-size:.84rem; }
/* ── Abschnitts-Kopf ──────────────────────────────────────────────────── */
.gero-dash-section { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:1.6rem 0 .75rem; }
.gero-dash-section h2 { font-family:var(--font-heading); font-weight:700; font-size:1.05rem; color:var(--gero-text); margin:0; }
.gero-dash-section p { margin:0; font-size:.8rem; color:var(--gero-muted); }
/* ── Bereichs-Kacheln ─────────────────────────────────────────────────── */
.gero-dash-areas { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
@media (max-width: 1200px) { .gero-dash-areas { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .gero-dash-areas { grid-template-columns:1fr; } }
.gero-dash-area { position:relative; display:flex; flex-direction:column; background:var(--gero-surface); border:1px solid var(--gero-border);
border-radius:18px; padding:1.1rem 1.15rem .9rem; overflow:hidden; box-shadow:0 1px 3px rgba(16,30,54,.05);
animation:gero-card-in .45s cubic-bezier(.22,1,.36,1) backwards;
animation-delay:calc(var(--i,0) * 60ms); }
.gero-dash-area::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--area); opacity:.28; transition:opacity .16s ease; }
.gero-dash-area.is-due::before { opacity:1; }
/* Kein Anheben der ganzen Karte: das ist kein Link, nur Zahl und Knöpfe. */
.gero-dash-area__head { display:flex; align-items:center; gap:.65rem; }
.gero-dash-area__icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.15rem; flex:none;
background:var(--area-bg); color:var(--area); }
.gero-dash-area__title { font-family:var(--font-heading); font-weight:700; font-size:.98rem; color:var(--gero-text); margin:0; }
.gero-dash-area__head .gero-pill { margin-left:auto; white-space:nowrap; }
.gero-dash-area__big { display:flex; align-items:baseline; gap:.45rem; margin:.95rem 0 .75rem; }
.gero-dash-area__big b { font-family:var(--font-heading); font-weight:800; font-size:2.5rem; line-height:1; color:var(--gero-text); letter-spacing:-.02em; }
.gero-dash-area__big span { font-size:.8rem; color:var(--gero-muted); }
.gero-dash-area__stats { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:0 0 .9rem; }
.gero-dash-area__stats > div { background:var(--gero-bg); border-radius:10px; padding:.45rem .6rem; min-width:0; }
.gero-dash-area__stats dt { font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gero-muted); }
.gero-dash-area__stats dd { margin:0; font-weight:700; font-size:.95rem; color:var(--gero-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gero-dash-area__stats dd.is-danger { color:var(--gero-danger-tx); }
.gero-dash-area__stats dd.is-ok { color:var(--gero-ok-tx); }
.gero-dash-area__stats a { color:inherit; text-decoration:none; }
.gero-dash-area__stats a:hover { text-decoration:underline; }
.gero-dash-area__foot { margin-top:auto; display:flex; gap:.5rem; padding-top:.75rem; border-top:1px solid var(--gero-border); }
.gero-dash-area__foot a { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; border-radius:10px;
padding:.42rem .5rem; font-size:.8rem; font-weight:600; text-decoration:none; transition:background .15s ease, color .15s ease; }
.gero-dash-area__neu { color:var(--area); background:var(--area-bg); }
.gero-dash-area__neu:hover { color:#fff; background:var(--area); }
.gero-dash-area__liste { color:var(--gero-text); background:transparent; border:1px solid var(--gero-border); }
.gero-dash-area__liste:hover { border-color:var(--area); color:var(--area); }
.gero-dash-area a:focus-visible { outline:2px solid var(--area); outline-offset:2px; }
/* ── Arbeitslisten („Wichtig") ────────────────────────────────────────── */
.gero-dash-lists { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; }
.gero-dash-lists > .is-wide { grid-column:1 / -1; }
@media (max-width: 1200px) { .gero-dash-lists { grid-template-columns:minmax(0,1fr); } }
.gero-dash-list { background:var(--gero-surface); border:1px solid var(--gero-border); border-radius:18px; overflow:hidden;
box-shadow:0 1px 3px rgba(16,30,54,.05); scroll-margin-top:5rem; }
.gero-dash-list__head { display:flex; align-items:center; gap:.65rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--gero-border); }
.gero-dash-list__head .gero-dash-area__icon { width:32px; height:32px; border-radius:10px; font-size:.95rem; }
.gero-dash-list__head h3 { font-family:var(--font-heading); font-weight:700; font-size:.92rem; margin:0; color:var(--gero-text); }
.gero-dash-list__head .count { font-size:.75rem; font-weight:700; color:var(--area); background:var(--area-bg); border-radius:999px; padding:.05rem .5rem; }
.gero-dash-list__head .actions { margin-left:auto; display:flex; gap:.35rem; }
.gero-dash-list__head .actions a { font-size:.78rem; font-weight:600; text-decoration:none; border-radius:8px; padding:.3rem .6rem; color:var(--gero-muted); }
.gero-dash-list__head .actions a:hover { color:var(--area); background:var(--area-bg); }
.gero-dash-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.gero-dash-table th { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gero-muted);
padding:.55rem .75rem; text-align:left; background:var(--gero-bg); white-space:nowrap; }
.gero-dash-table td { padding:.6rem .75rem; border-top:1px solid var(--gero-border); vertical-align:top; color:var(--gero-body); }
.gero-dash-table tbody tr { transition:background .12s ease; }
.gero-dash-table tbody tr:hover { background:#f5f8fb; }
.gero-dash-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.gero-dash-table .datum { white-space:nowrap; font-variant-numeric:tabular-nums; }
.gero-dash-table .is-danger { color:var(--gero-danger-tx); font-weight:700; }
.gero-dash-table .primary { font-weight:600; color:var(--gero-text); text-decoration:none; }
.gero-dash-table a.primary:hover { text-decoration:underline; }
.gero-dash-table .sub { display:block; font-size:.74rem; color:var(--gero-muted); }
.gero-dash-table .clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; }
.gero-dash-st { display:inline-grid; place-items:center; min-width:1.6rem; height:1.6rem; border-radius:7px; font-weight:800; font-size:.75rem; }
.gero-dash-list__empty { display:flex; align-items:center; gap:.7rem; padding:1.4rem 1.1rem; color:var(--gero-muted); font-size:.85rem; }
.gero-dash-list__empty i { font-size:1.4rem; color:var(--gero-ok); }
.gero-dash-list__more { display:block; text-align:center; padding:.6rem; font-size:.8rem; font-weight:600; text-decoration:none;
color:var(--area); border-top:1px solid var(--gero-border); }
.gero-dash-list__more:hover { background:var(--area-bg); }
/* ── Weitere Arbeitsvorräte ───────────────────────────────────────────── */
.gero-dash-more { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:.75rem; }
.gero-dash-more a { display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem; border-radius:14px; background:var(--gero-surface);
border:1px solid var(--gero-border); text-decoration:none; color:var(--gero-text); transition:border-color .15s ease, box-shadow .15s ease; }
.gero-dash-more a:hover { border-color:var(--gero-cyan); box-shadow:0 8px 20px -14px rgba(0,75,150,.45); }
.gero-dash-more i { font-size:1.1rem; color:var(--gero-accent-tx); }
.gero-dash-more b { display:block; font-size:.86rem; }
.gero-dash-more span { display:block; font-size:.74rem; color:var(--gero-muted); }
@media (prefers-reduced-motion: reduce) { .gero-dash-area { animation:none; } }
/* Positions-Nummer im Beleg-Formular: `type="number"` mit nativen Auf/Ab-
Pfeilen ist in der schmalen Pos.-Spalte unbrauchbar — die Pfeile fressen
fast die ganze Breite, die Ziffer selbst wird unsichtbar (Nutzer-Befund
08.09.2026). Eine reine Ordnungszahl braucht keine Spinner. */
.js-kein-zahlenspinner::-webkit-outer-spin-button,
.js-kein-zahlenspinner::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.js-kein-zahlenspinner { -moz-appearance: textfield; }
/* ── Öffentliche Upload-Seite für Kunden (apps/kundenupload) ─────────────── */
body.ku-body { background: var(--gero-bg); min-height: 100vh; }
.ku-band { background: linear-gradient(135deg, var(--gero-navy) 0%, var(--gero-navy-3) 100%); color: #fff; }
.ku-band__inner { max-width: 860px; margin: 0 auto; padding: 22px 20px; display: flex; align-items: center; gap: 16px; }
.ku-band img { width: 44px; height: 44px; }
.ku-band__marke { font-weight: 800; font-size: 1.35rem; letter-spacing: -.3px; line-height: 1.1; }
.ku-band__sub { color: var(--gero-cyan); font-size: .85rem; font-weight: 600; }
.ku-main { max-width: 860px; margin: 0 auto; padding: 28px 20px 48px; }
.ku-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,30,65,.08); padding: 24px; margin-bottom: 20px; }
.ku-card h1 { font-size: 1.35rem; font-weight: 700; color: var(--gero-navy); margin-bottom: .35rem; }
.ku-drop { border: 2px dashed #b9c7d6; border-radius: 12px; padding: 34px 16px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.ku-drop:hover, .ku-drop.is-over { background: #f0f8fd; border-color: var(--gero-cyan); }
.ku-drop:focus-visible { outline: 3px solid var(--gero-cyan); outline-offset: 2px; }
.ku-drop i { font-size: 2.2rem; color: var(--gero-cyan); }
.ku-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef1f5; }
.ku-zeile:last-child { border-bottom: 0; }
.ku-zeile__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ku-zeile__meta { color: #6b7a8c; font-size: .8rem; }
.ku-hinweise li { margin-bottom: .35rem; }
/* ── Kundenportal (`apps/kundenportal`) ────────────────────────────────────
Die Sicht des KUNDEN. Eigene Klassen statt der `gero-nav-*` des Hauses:
die Seitenleiste des Mitarbeiter-Portals hat hier nichts zu suchen, und
eine geteilte Klasse wäre die Einladung, sie versehentlich mitzubringen.
Verwandt mit dem `ku-`-Block darüber (Kunden-Upload) — beide sind Flächen,
die ein Mensch AUSSERHALB des Hauses sieht. */
body.kp-body { background: var(--gero-bg); min-height: 100vh; }
/* EIN ruhiges Navy-Feld statt des Verlaufs: das Band traegt seit dem
21.09.2026 die vier Kennzahlen (`.kp-zahlen`), und ein Verlauf unter
halbtransparenten Kacheln laesst dieselbe Kachel links anders aussehen als
rechts. Entwurf „B — Kennzahlen-Kopf", vom Nutzer gewaehlt. */
.kp-band { background: var(--gero-navy); color: #fff; }
/* ⚠ Die Breite war bis zum 20.09.2026 auf 1100px gedeckelt — ein direkter
Nachbau des Vorsystems, das als CGI-Seite mit fester Breite gebaut ist. Auf
einem heutigen Bildschirm stand der Inhalt damit als schmale Säule in der
Mitte, links und rechts weisse Fläche. „Inhalt 1:1, Optik Nexus" heisst auch
hier: das Haus selbst hat keinen solchen Deckel (`.gero-main` ist fliessend).
`clamp` statt fester Ränder, damit auf dem Telefon 16px bleiben und auf
einem breiten Schirm die Luft mitwächst. Der Deckel bei 1700px ist an der
BREITESTEN Fläche gemessen, die das Portal hat — die Karten-Detailsicht mit
11 Spalten: darüber wachsen nur noch die Zwischenräume zwischen kurzen
Zellen („Prv", „Lfz"), nicht mehr der Inhalt. Auf einem Laptop (1440–1512)
greift er gar nicht, dort läuft die Seite voll. */
.kp-band__inner { max-width: 1700px; margin: 0 auto;
padding: 15px clamp(16px, 3vw, 40px);
display: flex; align-items: center; gap: 14px; }
.kp-band img { width: 34px; height: 34px; }
/* Marke und Zusatz stehen in EINER Zeile („GERO Service-Portal"), damit die
Navigation auf dieselbe Hoehe rueckt — die zweite Bandzeile des
Vorsystems ist damit weg, ohne dass ein Menuepunkt verschwindet. */
.kp-band__marke { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem;
letter-spacing: -.2px; white-space: nowrap; }
.kp-band__marke span { font-weight: 600; color: var(--gero-cyan-pale); }
/* `flex: 1` und nicht nur `margin-left: auto`: ohne Wachstum schrumpfte der
Block unter seine Inhaltsbreite und „Abmelden" brach bei 1512px in eine
zweite Zeile, obwohl rechnerisch Platz war (gesehen im Browser, sieben
Menüpunkte). Mit `flex: 1` nimmt er den freien Raum und bleibt über
`justify-content` rechtsbündig. */
.kp-nav { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap;
justify-content: flex-end; gap: clamp(6px, 1.2vw, 20px); }
/* ⚠ Die Polsterung ist die TIPPFLAECHE, nicht der Abstand: mit `6px 0` war
der Menuepunkt auf dem Telefon knapp 29px hoch und ohne Rand links/rechts
(UX-Review 21.09.2026). 11px oben/unten bringen ihn wieder nahe an die
44px, die ein Daumen braucht. */
.kp-nav__link { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; font-weight: 500;
padding: 11px 6px; display: inline-flex; align-items: center; gap: 7px;
border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.kp-nav__link:hover { color: #fff; }
.kp-nav__link.is-aktiv { color: #fff; font-weight: 600; border-bottom-color: var(--gero-cyan); }
.kp-nav__link--knopf { background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
padding: 9px 11px; cursor: pointer; font-family: inherit; font-size: 1.05rem; }
.kp-nav__link--knopf:hover { border-color: rgba(255,255,255,.7); }
/* Symbol-Einträge (Mein Konto, Abmelden): gleiche Tippfläche wie die
ausgeschriebenen, nur ohne Text daneben. */
.kp-nav__link--symbol { padding-left: 10px; padding-right: 10px; font-size: 1.05rem; }
/* Die Beschriftung der Symbol-Knöpfe: auf dem Desktop nur für Screenreader
(die Zeile ist voll), auf dem Telefon SICHTBAR — dort bricht die Leiste
ohnehin um und hat Platz, und einen Tooltip gibt es auf Touch nicht
(UX-Review 21.09.2026). */
.kp-nav__beschriftung { position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0; }
@media (max-width: 860px) {
.kp-nav__beschriftung { position: static; width: auto; height: auto; margin: 0;
overflow: visible; clip: auto; font-size: .88rem; }
}
.kp-nav__abmelden { display: flex; }
.kp-nav__link:focus-visible, .kp-nav__link--knopf:focus-visible { outline: 3px solid var(--gero-cyan); outline-offset: 2px; }
/* Der Kennzahlen-Kopf: Anrede, Kundenzeile und die vier Zahlen, nach denen
ein Kunde hereinschaut. Er steht IM Band und nicht in einer Karte — sonst
waere die erste Antwort erst nach dem Scrollen da. */
/* Der Abstand nach unten gehoert dem Hero und nicht dem Band: die Seite
„Zugang noch nicht freigeschaltet" hat keinen Hero, und ein Band mit
Innenabstand ohne Inhalt sieht dort aus wie ein Fehler. */
.kp-hero { max-width: 1700px; margin: 0 auto; padding: 8px clamp(16px, 3vw, 40px) 24px; }
.kp-hero__zeile { display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kp-hero__kunde { font-size: .82rem; font-weight: 600; color: var(--gero-cyan-pale); }
.kp-hero__titel { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700;
margin: 5px 0 0; line-height: 1.2; }
.kp-hero__datum { font-size: .82rem; color: rgba(255,255,255,.78); }
.kp-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
.kp-kennzahl { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
border-radius: 12px; padding: 14px 18px; }
.kp-kennzahl__name { font-size: .72rem; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--gero-cyan-pale); }
.kp-kennzahl__wert { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700;
line-height: 1.25; margin-top: 2px; }
.kp-kennzahl__satz { font-size: .75rem; color: rgba(255,255,255,.78); }
/* Eine Zahl, die etwas kostet, wenn man sie uebersieht (auslaufende
Bindefristen), traegt den Warnrand — die Farbe ist die des Hauses fuer
Warnungen auf dunklem Grund, nicht eine zweite. */
a.kp-kennzahl { display: block; text-decoration: none; color: inherit; }
a.kp-kennzahl:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
a.kp-kennzahl:focus-visible { outline: 3px solid var(--gero-cyan); outline-offset: 2px; }
.kp-kennzahl--warnung { border-color: rgba(252,165,165,.55); }
.kp-kennzahl--warnung .kp-kennzahl__name { color: var(--gero-danger-on-dark); }
.kp-main { max-width: 1700px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 40px) 48px; }
/* Rand statt Schatten: unter dem ruhigen Band wirkt eine schwebende Karte
wie ein Fremdkoerper, und der Rand haelt die Tabellenbloecke sauber
voneinander getrennt. */
.kp-card { background: #fff; border: 1px solid #e8ecf0; border-radius: 12px; padding: 22px; margin-bottom: 20px; }
.kp-card h1 { font-size: 1.3rem; font-weight: 700; color: var(--gero-navy); margin-bottom: .5rem; }
/* ⚠ Die breite Seite verlaengert sonst die SAETZE statt der weissen Flaeche.
Ein Absatz ueber 1600px ist genauso schlecht zu lesen wie eine schmale
Saeule — das Haus deckelt Fliesstext deshalb schon laenger in `ch`
(`.gero-hero-sub`). Tabellen und Diagramme sind ausdruecklich nicht
gemeint, die sollen die Breite nutzen (UX-Review 20.09.2026). */
.kp-card > p, .kp-card .form-text, .kp-leer p { max-width: 72ch; }
@media (max-width: 860px) {
.kp-band__inner { flex-wrap: wrap; }
/* Auf dem Telefon rutscht die Navigation unter die Marke und faengt
wieder links an — sonst stuende sie rechtsbuendig als Treppe. */
.kp-nav { margin-left: 0; width: 100%; justify-content: flex-start; }
.kp-hero__titel { font-size: 1.35rem; }
}
/* Sim DATA im Kundenportal — Suchkopf, Reiter, Tabellen. */
/* Eine Karte mit einem Formular oder drei Saetzen soll nicht 1700px breit
sein: der Inhalt staende links, der Rahmen ginge bis zum Rand, und das
sieht nach Fehler aus statt nach Absicht. Betrifft die Eingabemaske und die
Zutritts-Seite (UX-Review 20.09.2026). */
.kp-card--schmal { max-width: 760px; }
/* Feste Beschriftungs-Spalte statt `max-content`: der Hinweissatz darunter
spannt über beide Spalten, und ein spannendes Element verteilt seine Breite
auf die Tracks — die Beschriftungs-Spalte wuchs dadurch auf ~540px und
schob die Eingabefelder in die Seitenmitte. Mit fester Breite kann das
nicht passieren. */
.kp-suche { display: grid; grid-template-columns: 170px 320px; gap: 8px 14px;
align-items: center; justify-content: start; }
.kp-suche__zeile { display: contents; }
.kp-suche__zeile label { font-size: .85rem; font-weight: 600; color: var(--gero-navy); justify-self: start; }
.kp-suche__knopf { grid-column: 2; justify-self: start; }
.kp-suche__hinweis { grid-column: 1 / -1; margin: 2px 0 0; font-size: .8rem; color: #6b7a8c; }
.kp-block { font-size: 1rem; font-weight: 700; color: var(--gero-navy); margin: 0 0 12px;
display: flex; align-items: center; gap: 8px; }
.kp-zahl { font-size: .78rem; font-weight: 600; color: #4a5a6d; background: #eef3f8;
border-radius: 999px; padding: 2px 10px; }
.kp-leer { text-align: center; color: #4a5a6d; }
.kp-leer i { font-size: 2rem; color: #b9c7d6; display: block; margin-bottom: 10px; }
@media (max-width: 640px) {
.kp-suche { grid-template-columns: 1fr; }
.kp-suche__zeile label { justify-self: start; }
.kp-suche__knopf, .kp-suche__hinweis { grid-column: 1 / -1; }
}
/* Kundenportal-Dashboard — Kopf, die zwei Diagramme, Ticket-Übersicht. */
.kp-kopf { display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; }
/* Der Ring braucht keine halbe Seite: feste, mitwachsende Spalte, der Rest
gehört den Balken. Vorher 1 : 1,4 — auf einem breiten Schirm stand der Ring
dann riesig neben einem ebenso riesigen Balkendiagramm. */
.kp-raster { display: grid;
grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
gap: 20px; }
.kp-raster > .kp-card { margin-bottom: 20px; }
/* Feste Höhe: ein `canvas` ohne Höhe wächst mit Chart.js beim Zeichnen in
jedem Durchlauf weiter (`maintainAspectRatio: false` braucht einen
Container, der selbst misst). */
.kp-diagramm { position: relative; height: 280px; }
.kp-legende { list-style: none; margin: 14px 0 0; padding: 0; font-size: .85rem; }
.kp-legende li { display: flex; align-items: center; gap: 8px; padding: 3px 0;
color: #33475b; }
.kp-legende strong { margin-left: auto; color: var(--gero-navy); }
.kp-legende__punkt { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.kp-legende__punkt--1 { background: #00DDFF; }
.kp-legende__punkt--2 { background: #0096EB; }
.kp-legende__punkt--3 { background: #6CC0FF; }
.kp-reiter { border-bottom: 0; margin-bottom: 0; }
.kp-verlauf { max-width: 280px; font-size: .84rem; color: #4a5a6d; }
@media (max-width: 900px) {
.kp-raster { grid-template-columns: 1fr; }
}
.kp-fuss { text-align: center; font-size: .75rem; color: #8b98a6; padding: 0 clamp(16px, 3vw, 40px) 26px; }
/* Datenschutz-/Impressum-Verweise im Fuß: so gedämpft wie der Fuß selbst,
nicht Bootstrap-Blau (UX-Review 23.09.2026). */
.gero-login-footer .fuss-link, .kp-fuss .fuss-link { color: inherit; text-decoration: none; }
.gero-login-footer .fuss-link:hover, .kp-fuss .fuss-link:hover { text-decoration: underline; }
/* Kundenportal — die eine Eingabemaske (Ticket aufgeben). */
.kp-formular { display: grid; gap: 14px; max-width: 640px; }
.kp-formular__zeile { display: grid; grid-template-columns: 170px minmax(0, 1fr);
gap: 10px 14px; align-items: start; }
.kp-formular__zeile label { font-size: .85rem; font-weight: 600;
color: var(--gero-navy); padding-top: 6px; }
.kp-formular__knopf { display: flex; gap: 8px; margin-left: 184px; }
.kp-formular__hinweis { margin: 0 0 0 184px; font-size: .8rem; color: #5c6b7d; }
@media (max-width: 640px) {
.kp-formular__zeile { grid-template-columns: 1fr; }
.kp-formular__knopf, .kp-formular__hinweis { margin-left: 0; }
}
.kp-reiter__neu { color: var(--gero-navy) !important; font-weight: 600; }
/* Der Saldo ueber den Guthaben-Bewegungen — eine Zeile, kein Kasten:
sie beantwortet die Frage, mit der jemand den Reiter oeffnet. */
/* Kennzahlen auf WEISSEM Grund (SIM-Karten Status) — dieselbe Kachel wie im
Band, nur hell: dort steht sie auf Navy, hier in einer Karte. */
.kp-kennzahl--hell { background: #f6f8fa; border-color: #e8ecf0; }
.kp-kennzahl--hell .kp-kennzahl__name { color: #566371; }
.kp-kennzahl--hell .kp-kennzahl__wert { color: var(--gero-navy); }
.kp-zahlen--hell { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* Kontaktkarte des Service-Teams. */
.kp-kontakt { display: flex; gap: 16px; align-items: center; padding: 16px;
background: #f6f8fa; border-radius: 12px; }
.kp-kontakt__bild { width: 56px; height: 56px; border-radius: 50%; flex: none;
background: var(--gero-navy); color: var(--gero-cyan);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; }
.kp-kontakt__name { font-family: var(--font-heading); font-weight: 700;
color: var(--gero-navy); font-size: 1.05rem; }
.kp-kontakt__aufgabe { font-size: .85rem; color: #566371; }
.kp-kontakt__wege { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px;
font-size: .9rem; }
.kp-hinweis { margin: 12px 0 0; font-size: .82rem; color: #566371; max-width: 90ch; }
.kp-saldo { display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 16px 0 4px; padding: 12px 16px;
background: #f6f8fa; border-radius: 10px; font-size: .9rem;
color: #4a5a6d; }
.kp-saldo strong { font-family: var(--font-heading); font-size: 1.25rem;
color: var(--gero-navy); }
.kp-pflicht { color: #b3261e; margin-left: 2px; }
/* Erfassungsmasken kompakt und untereinander (Beschriftung links, Feld rechts)
— zuerst an der Auftragsmaske gewünscht (2026-09-28), seit 2026-09-29 für
alle Erfassungsmasken mit `partials/_form_field.html … zeile=1`. */
.form-kompakt .form-control, .form-kompakt .form-select {
padding-top: .25rem; padding-bottom: .25rem; font-size: .875rem; min-height: 0; }
.form-kompakt textarea.form-control { min-height: 4.5rem; }
.form-kompakt .gero-card-header { padding-top: .5rem; padding-bottom: .5rem; }
/* Feldbreite nach Inhalt (Filter `feldbreite`, seit 2026-09-29). */
.feld-schmal { max-width: 11rem; }
.feld-mittel { max-width: 20rem; }
/* ════════════════════════════════════════════════════════════════════════════
Dunkelmodus — Einzelfälle
Feste Hellwerte, für die es keine gleichwertige Rollen-Variable gibt. Der
Hellmodus bleibt dadurch unberührt; hier steht nur, was im Dunkelmodus
sonst als heller Fleck oder als dunkle Schrift auf dunklem Grund stünde.
Seitenleiste, Hero-Bänder und Kundenportal (`kp-*`/`ku-*`) fehlen bewusst:
die einen stehen in beiden Schemata auf Marken-Grund, das Portal bleibt hell.
════════════════════════════════════════════════════════════════════════════ */
/* Fokusring: Navy auf dunklem Grund wäre unsichtbar. */
[data-bs-theme="dark"] .gero-btn-primary:focus-visible,
[data-bs-theme="dark"] .gero-btn-manual:focus-visible,
[data-bs-theme="dark"] .gero-btn-outline:focus-visible,
[data-bs-theme="dark"] .gero-btn-danger:focus-visible,
[data-bs-theme="dark"] .gero-btn-warning:focus-visible { outline-color: var(--gero-cyan); }
/* Hellblaue Sekundär-Knöpfe → gedämpfter Cyan-Tint. */
[data-bs-theme="dark"] .gero-btn,
[data-bs-theme="dark"] .gero-btn-outline {
background: rgba(0,175,235,.08); border-color: rgba(0,175,235,.35); color: var(--gero-accent-tx);
}
[data-bs-theme="dark"] .gero-btn:hover,
[data-bs-theme="dark"] .gero-btn-outline:hover { background: rgba(0,175,235,.16); color: var(--gero-heading); }
[data-bs-theme="dark"] .badge.bg-review { border-color: var(--gero-border); }
/* Pipeline-Schritte, Hinweis- und Statuskästen. */
[data-bs-theme="dark"] .gero-step-number { background: var(--gero-surface-3); border-color: var(--gero-surface-3); }
[data-bs-theme="dark"] .gero-pipeline-connector { background: var(--gero-surface-3); }
[data-bs-theme="dark"] .gero-info-box { background: var(--gero-num-bg); border-color: #24507a; color: var(--gero-text); }
[data-bs-theme="dark"] .gero-quality-low { color: var(--gero-danger-tx); }
/* Prüfmaske: Kopfzeilen, Hover, Handeingabe, Detailblock. */
[data-bs-theme="dark"] .gero-item-header:hover { background: var(--gero-surface-3); }
[data-bs-theme="dark"] .gero-manual-input,
[data-bs-theme="dark"] .gero-table-input-manual:focus { background: rgba(245,158,11,.10); color: var(--gero-text); }
[data-bs-theme="dark"] .gero-review-table thead th,
[data-bs-theme="dark"] .gero-review-table .gero-conn-detail-th,
[data-bs-theme="dark"] .gero-table-section-header th { background: var(--gero-surface-3); }
[data-bs-theme="dark"] .gero-review-table th.gero-conn-detail-displayonly { background: #2c2618; }
[data-bs-theme="dark"] .gero-review-td { border-right-color: var(--gero-surface-2); }
[data-bs-theme="dark"] .gero-readonly-cell:hover { background: var(--gero-surface-3); }
[data-bs-theme="dark"] .gero-conn-edit-panel { background: var(--gero-surface-2); }
[data-bs-theme="dark"] .gero-conn-edit-input::placeholder { color: var(--gero-muted); }
[data-bs-theme="dark"] .gero-conn-sum-warn { color: var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-table-section-manual,
[data-bs-theme="dark"] .gero-col-manual { background: rgba(245,158,11,.10) !important; }
[data-bs-theme="dark"] .gero-row-high,
/* Scrollleisten der Prüftabelle. */
[data-bs-theme="dark"] .gero-review-table-wrapper,
[data-bs-theme="dark"] .gero-floating-hscroll { scrollbar-color: #4a5a6d var(--gero-surface-2); }
[data-bs-theme="dark"] .gero-review-table-wrapper::-webkit-scrollbar-track,
[data-bs-theme="dark"] .gero-floating-hscroll::-webkit-scrollbar-track { background: var(--gero-surface-2); }
[data-bs-theme="dark"] .gero-review-table-wrapper::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .gero-floating-hscroll::-webkit-scrollbar-thumb { background: #4a5a6d; border-color: var(--gero-surface-2); }
[data-bs-theme="dark"] .gero-review-table-wrapper::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .gero-floating-hscroll::-webkit-scrollbar-thumb:hover { background: #5f7189; }
/* Gruppierte Tabellen (Einheiten-Köpfe, Kennzeichen). */
[data-bs-theme="dark"] .gero-table tbody tr.gero-unit-head,
[data-bs-theme="dark"] .gero-table tbody tr.gero-unit-head:nth-child(even) { background: var(--gero-surface-2); }
[data-bs-theme="dark"] .gero-table tbody tr.gero-unit-head:hover { background: var(--gero-surface-3); }
[data-bs-theme="dark"] .gero-unit-state--muted,
[data-bs-theme="dark"] .gero-unit-toggle,
[data-bs-theme="dark"] .gero-kd--nd { color: var(--gero-muted); }
[data-bs-theme="dark"] .gero-kd--ac { color: #9dbcf8; }
[data-bs-theme="dark"] .gero-kd--ex { color: #f39bc2; }
/* Auffälligkeiten, Bindefristen, Kennzahl-Hinweis. */
[data-bs-theme="dark"] .gero-anomaly-danger .gero-anomaly-icon { color: var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-anomaly-warning .gero-anomaly-icon { color: var(--gero-warn-tx); }
[data-bs-theme="dark"] .gero-bindefrist-list li { border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .gero-crm-kpi__hint { color: var(--gero-muted); }
/* Anbieterfarben sind für hellen Grund gewählt — im Dunkeln aufhellen. */
[data-bs-theme="dark"] td.gero-provider-cell { color: color-mix(in srgb, var(--prov-accent, var(--gero-text)) 50%, #fff); }
[data-bs-theme="dark"] .gero-provider-badge { color: color-mix(in srgb, var(--pc, #6c757d) 50%, #fff); }
/* Pillen, Schalter, Plaketten. */
[data-bs-theme="dark"] .gero-pill--info { color: #5cc8f2; }
[data-bs-theme="dark"] .gero-pill--danger { color: var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-pill--muted { color: #b6c2d1; }
[data-bs-theme="dark"] .gero-vis-toggle.is-on { background-color: var(--gero-ok-bg); border-color: var(--gero-ok-bd); color: var(--gero-ok-tx); }
[data-bs-theme="dark"] .gero-vis-toggle.is-on .gero-vis-dot { background-color: var(--gero-ok-tx); }
[data-bs-theme="dark"] .gero-vis-toggle.is-on:hover { background-color: #12392d; border-color: var(--gero-ok-tx); }
[data-bs-theme="dark"] .gero-vis-toggle.is-off { background-color: var(--gero-danger-bg); border-color: var(--gero-danger-bd); color: var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-vis-toggle.is-off .gero-vis-dot { box-shadow: inset 0 0 0 1.5px var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-vis-toggle.is-off:hover { background-color: #4a1d22; border-color: var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-badge--info { background: #0f3346; color: #7fd3f5; }
[data-bs-theme="dark"] .gero-badge--muted { background: var(--gero-surface-3); color: var(--gero-muted); }
/* Aktions-Icons: Vorgabe-Ton Sekundär-Blau wäre auf dunklem Grund zu dunkel.
Ein im Template gesetztes `--ac` gewinnt weiter (Inline-Stil). Beim Hover
steht dann dunkle Schrift auf dem hellen Ton. */
[data-bs-theme="dark"] .gero-icon-action { --ac: var(--gero-accent-tx); }
[data-bs-theme="dark"] .gero-icon-action:not([style*="--ac"]):hover { color: var(--gero-bg); }
/* Vorlagen-Editor bleibt Papier (weiß, dunkle Schrift). */
[data-bs-theme="dark"] .gero-editor-flaeche { color-scheme: light; color: #1a2640; }
/* Mitarbeiter-Dashboard: Bereichstöne als helle Schrift auf dunklem Tint. */
[data-bs-theme="dark"] .gero-dash-area--projekte { --area:#a9c4e6; --area-bg:#1a2b42; }
[data-bs-theme="dark"] .gero-dash-area--angebote { --area:#7dbdf3; --area-bg:#13304f; }
[data-bs-theme="dark"] .gero-dash-area--tickets { --area:#5cc8f2; --area-bg:#0f3346; }
[data-bs-theme="dark"] .gero-dash-area--termine { --area:#5fd0d8; --area-bg:#0f3236; }
[data-bs-theme="dark"] .gero-dash-area--upload { --area:#5fd3bf; --area-bg:#10322c; }
[data-bs-theme="dark"] .gero-dash-area__neu:hover { color: var(--gero-bg); }
[data-bs-theme="dark"] .gero-dash-table tbody tr:hover { background: var(--gero-surface-2); }
/* Bootstrap-Tabellentöne (`table-success` …) tragen in 5.3 auch im Dunkel-
schema helle Festwerte — hier auf gedämpfte Tints mit heller Schrift. */
[data-bs-theme="dark"] .table-success { --bs-table-bg: var(--gero-ok-bg); --bs-table-color: var(--gero-text); --bs-table-border-color: var(--gero-ok-bd); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: var(--gero-warn-bg); --bs-table-color: var(--gero-text); --bs-table-border-color: var(--gero-warn-bd); }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: var(--gero-danger-bg); --bs-table-color: var(--gero-text); --bs-table-border-color: var(--gero-danger-bd); }
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-primary { --bs-table-bg: var(--gero-num-bg); --bs-table-color: var(--gero-text); --bs-table-border-color: var(--gero-border); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: var(--gero-surface-3); --bs-table-color: var(--gero-text); --bs-table-border-color: var(--gero-border); }
[data-bs-theme="dark"] .text-bg-light { background-color: var(--gero-surface-3) !important; color: var(--gero-text) !important; }
/* Konfidenz-Ampel der Prüfmaske — EINE Stelle für den Dunkelmodus. Die Töne
sind weiter gespreizt als die übrigen Status-Tints (Gelb deutlich amber, Rot
deutlich rot), und ein Randstreifen trägt die Bedeutung zusätzlich zur
Fläche: dunkle Tints liegen sonst für Farbfehlsichtige zu dicht beieinander.
Als Innen-Schatten, damit sich die Zellbreite nicht ändert. */
[data-bs-theme="dark"] .gero-conf-success { background: #0f3a2b; color: var(--gero-text); box-shadow: inset 3px 0 0 var(--gero-ok-tx); }
[data-bs-theme="dark"] .gero-conf-warning { background: #5a4006; color: var(--gero-text); box-shadow: inset 3px 0 0 var(--gero-warn-tx); }
[data-bs-theme="dark"] .gero-conf-danger { background: #5e1922; color: var(--gero-text); box-shadow: inset 3px 0 0 var(--gero-danger-tx); }
[data-bs-theme="dark"] .gero-conf-secondary { background: var(--gero-surface-2); color: var(--gero-text); }
[data-bs-theme="dark"] .gero-conf-autofill { background: #0f3446; color: var(--gero-text); box-shadow: inset 3px 0 0 #5cc8f2; }
/* Hero-Bänder und Seitenleiste im Dunkelmodus (01.10.2026, Nutzer-Abnahme):
der Navy→Cyan-Verlauf war auf dunklem Grund der hellste Fleck der Seite und
das satte Marken-Navy der Leiste stand neben den blaugrauen Flächen wie aus
einem anderen Bild. Beide rücken an den Seitengrund heran; Cyan bleibt als
Akzent (aktiver Reiter, Haupt-Knöpfe, Avatar). Die Bereichs-Varianten
behalten ihren Farbton, nur gedämpft. */
[data-bs-theme="dark"] {
--gero-hero-dunkel: linear-gradient(120deg,#0a1626 0%,#0f2742 45%,#123a63 80%,#155083 115%);
}
[data-bs-theme="dark"] .gero-sidebar { background: #0a1626; }
[data-bs-theme="dark"] .gero-hero,
[data-bs-theme="dark"] .gero-search-hero,
[data-bs-theme="dark"] .tdx-hero,
[data-bs-theme="dark"] .sk-hero,
[data-bs-theme="dark"] #tbCreate .tbm-head {
background: var(--gero-hero-dunkel);
box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
[data-bs-theme="dark"] .gero-hero,
[data-bs-theme="dark"] .gero-search-hero,
[data-bs-theme="dark"] .tdx-hero,
[data-bs-theme="dark"] .sk-hero { border: 1px solid rgba(255,255,255,.05); }
[data-bs-theme="dark"] .gero-hero-green { background-image: linear-gradient(120deg,#0a1626 0%,#0f2a1d 45%,#14432b 80%,#1a5a37 115%); }
[data-bs-theme="dark"] .gero-hero-violet { background-image: linear-gradient(120deg,#0e0c1c 0%,#1f1838 45%,#2f2458 80%,#3d2f73 115%); }
[data-bs-theme="dark"] .gero-hero-amber { background-image: linear-gradient(120deg,#160f05 0%,#2f1f07 45%,#4a300a 80%,#5f3f0d 115%); }
/* Reisekosten (Nachbau TRAVELEX): Kosten-ART-Kennung — lila „SA“, rosa die übrigen
wie drüben, dunkler gewählt für lesbaren weißen Text (AA). */
.rk-art { display:inline-block; min-width:2rem; padding:.15rem .35rem; border-radius:4px; color:#fff; font-size:.75rem; font-weight:600; text-align:center; }
.rk-art--sa { background:#8E24AA; }
.rk-art--andere { background:#C2185B; }
/* ── Kundenuniversum (GF, `monitoring:kundenuniversum`) ─────────────────────
Der Himmel ist in BEIDEN Schemata Nacht — er ist das Motiv, keine Fläche.
Alles um ihn herum (Kopfzahlen, Potenzial-Kacheln, Liste) trägt die
normalen Rollen und folgt dem Dunkelmodus. Sternfarben kommen aus
`kundenuniversum.SPARTEN` (validiert, CVD-Abstand ≥ 18). */
:root {
--ku-nacht-1: #000c1d;
--ku-nacht-2: #001E41;
--ku-nacht-3: #06305f;
--ku-staub: #cfe6ff;
--ku-label: rgba(230,240,255,.86);
--ku-label-zahl: #ffffff;
}
[data-bs-theme="dark"] { --ku-nacht-1: #00060f; --ku-nacht-2: #00142c; --ku-nacht-3: #042549; }
.ku-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 2rem; padding:.9rem 1.25rem;
background:var(--gero-surface); border:1px solid var(--gero-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.ku-kopfzahl { display:flex; flex-direction:column; line-height:1.1; }
.ku-kopfzahl__wert { font-family:var(--font-heading); font-weight:800; font-size:1.55rem; color:var(--gero-heading); font-variant-numeric:tabular-nums; }
.ku-kopfzahl__text { font-size:.78rem; color:var(--gero-muted); }
.ku-sparten { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0 0 0 auto; padding:0; }
.ku-sparte { display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .7rem; border-radius:999px;
border:1px solid var(--gero-border); background:var(--gero-surface-2); color:var(--gero-text); font-size:.82rem; }
.ku-sparte:hover, .ku-sparte:focus-visible { border-color:var(--gero-cyan); }
.ku-sparte:focus-visible, .ku-pot:focus-visible { outline:2px solid var(--gero-cyan); outline-offset:2px; }
.ku-sparte__zahl { font-weight:700; font-variant-numeric:tabular-nums; }
.ku-punkt { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background:var(--ku-farbe);
box-shadow:0 0 0 2px color-mix(in srgb, var(--ku-farbe) 25%, transparent), 0 0 8px var(--ku-farbe); flex:none; vertical-align:-.05em; }
.ku-himmel { position:relative; border-radius:calc(var(--radius) + 4px); overflow:hidden;
background:
radial-gradient(ellipse 70% 55% at 62% 40%, rgba(0,175,235,.16), transparent 70%),
radial-gradient(ellipse 50% 40% at 18% 78%, rgba(183,148,246,.10), transparent 70%),
linear-gradient(160deg, var(--ku-nacht-3) 0%, var(--ku-nacht-2) 38%, var(--ku-nacht-1) 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-lg); min-height:420px; }
[data-bs-theme="dark"] .ku-himmel { box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow-lg); }
.ku-svg { display:block; width:100%; height:auto; max-height:78vh; margin-inline: auto; max-width: var(--ku-max, none); }
.ku-staub circle { fill:var(--ku-staub); }
.ku-cluster { cursor:pointer; outline:none; transition:opacity .25s ease; }
.ku-ring { fill:none; stroke-width:1; stroke-opacity:.22; stroke-dasharray:2 5; transition:stroke-opacity .2s, stroke-width .2s; }
.ku-cluster--ruhend .ku-ring { stroke-opacity:.14; }
.ku-cluster:focus-visible .ku-ring { stroke:#fff !important; stroke-width:2.5; stroke-opacity:1; }
.ku-cluster:hover .ku-ring, .ku-cluster:focus-visible .ku-ring, .ku-cluster.ku-aktiv .ku-ring { stroke-opacity:.75; stroke-width:1.5; stroke-dasharray:none; }
.ku-label { font-family:var(--font-body); font-size:20px; fill:var(--ku-label); pointer-events:none; }
.ku-label__zahl { font-family:var(--font-heading); font-weight:800; font-size:25px; fill:var(--ku-label-zahl); }
.ku-stern { cursor:pointer; transition:opacity .25s ease; }
.ku-stern:hover { stroke:#fff; stroke-width:1.2; }
.ku-stern[data-gruppe="kombi:-"] { opacity:.6; }
.ku-himmel.ku-fokus .ku-stern:not(.ku-aktiv) { opacity:.18; }
.ku-himmel.ku-fokus .ku-cluster:not(.ku-aktiv) .ku-label { opacity:.35; }
.ku-stern--funkeln { animation:ku-funkeln 4.5s ease-in-out infinite; }
@keyframes ku-funkeln { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .ku-stern--funkeln { animation:none; } .ku-stern, .ku-cluster { transition:none; } }
.ku-tooltip { position:absolute; z-index:5; pointer-events:none; display:flex; flex-direction:column; gap:.2rem; max-width:280px;
padding:.5rem .7rem; border-radius:8px; background:rgba(0,14,32,.92); border:1px solid rgba(255,255,255,.14);
color:#fff; font-size:.8rem; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.ku-tooltip span { color:rgba(255,255,255,.78); }
.ku-groessen { position:absolute; left:14px; bottom:10px; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; font-size:.72rem; color:rgba(230,240,255,.72); }
.ku-groessen__titel { text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.ku-groessen__eintrag { display:inline-flex; align-items:center; gap:.15rem; font-variant-numeric:tabular-nums; }
.ku-groessen circle { fill:rgba(230,240,255,.85); }
.ku-potenzial { display:flex; flex-direction:column; gap:.65rem; height:100%; }
.ku-potenzial__titel { font-family:var(--font-heading); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gero-muted); margin:0 0 .1rem; }
.ku-pot { display:grid; grid-template-columns:1fr auto; grid-template-areas:"kopf zahl" "basis basis" "balken balken" "aktion aktion";
gap:.2rem .5rem; text-align:left; padding:.85rem 1rem; border-radius:var(--radius); border:1px solid var(--gero-border);
background:var(--gero-surface); color:var(--gero-text); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease, border-color .15s; }
.ku-pot:hover, .ku-pot:focus-visible { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gero-cyan); }
@media (prefers-reduced-motion: reduce) { .ku-pot, .ku-pot:hover { transition:none; transform:none; } }
.ku-pot__kopf { grid-area:kopf; display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.88rem; }
.ku-pot__ohne { font-weight:400; color:var(--gero-muted); }
.ku-pot__zahl { grid-area:zahl; font-family:var(--font-heading); font-weight:800; font-size:1.9rem; line-height:1; color:var(--gero-heading); font-variant-numeric:tabular-nums; align-self:center; }
.ku-pot__basis { grid-area:basis; font-size:.75rem; color:var(--gero-muted); }
.ku-pot__balken { grid-area:balken; height:4px; border-radius:2px; background:var(--gero-surface-3); overflow:hidden; }
.ku-pot__balken span { display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, var(--gero-cyan), var(--gero-navy-3)); }
.ku-pot__aktion { grid-area:aktion; font-size:.75rem; color:var(--gero-accent-tx); }
.ku-chip { display:inline-grid; place-items:center; width:1.3rem; height:1.3rem; margin-right:2px; border-radius:5px;
font-size:.7rem; font-weight:700; color:#001E41; background:var(--ku-farbe); }
.ku-chip--leer { background:var(--gero-surface-3); color:var(--gero-muted); }
.ku-tabelle td, .ku-tabelle th { font-variant-numeric:tabular-nums; }
.ku-messung dt { font-weight:600; color:var(--gero-text); display:flex; align-items:center; gap:.45rem; margin-top:.35rem; }
.ku-messung dd { margin:0 0 0 1.15rem; color:var(--gero-body); }
.ku-annahme { display:block; color:var(--gero-warn-tx); font-size:.78rem; }
.ku-liste { --bs-offcanvas-width: 480px; }
.ku-liste__zeilen { list-style:none; margin:0; padding:0; }
.ku-liste__zeilen li { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.6rem; padding:.45rem .2rem; border-bottom:1px solid var(--gero-border); font-size:.86rem; }
.ku-liste__name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ku-liste__name small { display:block; color:var(--gero-muted); font-size:.72rem; }
.ku-liste__karten { font-variant-numeric:tabular-nums; color:var(--gero-muted); white-space:nowrap; text-align:right; min-width:4.5rem; }
|