html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.letter-spacing {
letter-spacing: 0.08em;
}
/* ── Seiten-Kopfzeile: Abstand zwischen Aktions-Buttons vergrößern ───────
Betrifft NUR den Button-/Aktions-Container direkt neben der Seiten-
Überschrift (H1/H2/H3) — nicht jede beliebige .gap-2/.gap-1-Stelle im
Projekt (die Klassen werden an >270 Stellen für ganz andere Zwecke
genutzt, z. B. Checkbox-Listen, Sortier-Chips, Formular-Reihen).
:has() grenzt gezielt auf echte Kopfzeilen ein: die äußere Flex-Zeile
muss eine Überschrift als direktes Kind haben, dann wird NUR deren
direktes Geschwister-Element (der Button-Container) angepasst. */
.d-flex.justify-content-between.align-items-center:has(> h1, > h2, > h3) > .d-flex.gap-1,
.d-flex.justify-content-between.align-items-center:has(> h1, > h2, > h3) > .d-flex.gap-2 {
gap: 1rem !important;
}
/* ── Aufmerksamkeits-Pulsieren für Auswahlfelder, die eine aktive Entscheidung
brauchen ──────────────────────────────────────────────────────────────
Signalisiert "hier ist eine Auswahl nötig, bitte treffen" (z. B. Ansprech-
partner-Auswahl beim Rechnung-Upload, wenn ein Kunde mehrere Kontakte hat
und keiner automatisch geraten wird). Kräftiges Orange statt Blau, damit es
sich von den überall im UI vorhandenen blauen Rahmen/Buttons klar abhebt.
Endet per JS, sobald der Nutzer selbst wählt. */
@keyframes attn-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.55); background-color: #fff8ec; }
50% { box-shadow: 0 0 0 6px rgba(253, 126, 20, 0.28); background-color: #ffe8cc; }
}
.attn-pulse {
animation: attn-pulse 1s ease-in-out infinite;
border: 2px solid #fd7e14 !important;
}
/* ── Globale Suche: Typ-Filter (dezenter Trichter-Button + Checkbox-Menü) ──
Ersetzt eine frühere, immer sichtbare Chip-Leiste über den Ergebnissen
(scheiterte an "keine 2 Zeilen" + "kein horizontales Scrollen" bei bis zu
8 Treffertypen) — der Button ist IMMER sichtbar (nicht mehr an ein aktives
Suchergebnis gekoppelt), sitzt als normales Flex-Geschwister neben dem
Eingabefeld im Command-Palette-Overlay (siehe .gs-overlay-inputrow unten). */
.gs-filter-menu-item {
cursor: pointer;
}
.gs-filter-menu-item:hover {
background: #f1f3f5;
}
/* Person unter ihrer Firma: eingerückte Trefferzeile mit Verbindungswinkel.
Die Einrückung allein reicht nicht — bei drei Zeilen je Treffer liest man sie nicht
als Zugehörigkeit, sondern als Zufall. Der Winkel (::before) zeigt die Verbindung
nach oben zur Firma. `.list-group-item` bringt position:relative schon mit. */
.gs-kind {
padding-left: 2.6rem !important;
}
/* Firma und ihre Personen sind EIN Block: die Trennlinie dazwischen fällt weg. Ohne das
zerschneidet sie den Verbindungswinkel, und der sieht aus, als käme er aus dem Nichts.
Die Linie zwischen zwei Treffern ist in Bootstrap der UNTERE Rand der oberen Zeile —
deshalb `:has(+ …)` an der Zeile darüber, nicht `border-top` am Kind. */
.list-group-item:has(+ .gs-kind) {
border-bottom-color: transparent;
}
.gs-kind::before {
content: "";
position: absolute;
left: 1.15rem;
top: -0.35rem;
height: 1.7rem;
width: .85rem;
border-left: 1px solid #ced4da;
border-bottom: 1px solid #ced4da;
border-bottom-left-radius: .35rem;
}
/* Reihenfolge der Treffertypen: ziehen (Maus) oder ↑/↓ (überall, insbesondere Touch —
HTML5-Drag feuert dort nicht). Das Menü zeigt die Reihenfolge, in der die Treffer
erscheinen; die Sortierung selbst liegt in global-search.js (typeOrder). */
.gs-filter-label { cursor: pointer; min-width: 0; }
.gs-filter-grip { color: #ced4da; cursor: grab; flex-shrink: 0; }
.gs-filter-menu-item:active .gs-filter-grip { cursor: grabbing; }
.gs-filter-menu-item.gs-filter-dragging { opacity: .4; }
/* Ziel-Zeile beim Ziehen: dorthin wandert der gezogene Typ. Innen liegender Rahmen,
damit die Zeilenhöhe nicht springt. */
.gs-filter-menu-item.gs-filter-over {
background: #e7f1ff;
box-shadow: inset 0 0 0 1px #0d6efd;
}
/* Pfeile dezent, aber mit ausreichender Tippfläche — sie sind btn-link und damit von
der 44-px-Touch-Regel weiter unten ausgenommen, sonst wüchse das Menü ins Riesige. */
.gs-filter-move .btn {
color: #adb5bd;
line-height: 1;
min-width: 1.9rem;
min-height: 1.9rem;
}
.gs-filter-move .btn:hover:not(:disabled) { color: #0d6efd; }
.gs-filter-move .btn:disabled { opacity: .25; }
.gs-filter-reset { color: #6c757d; }
/* Kreisförmiger, sichtbar abgesetzter Hintergrund statt eines reinen Icons ohne
Fläche — sonst geht der Button im weißen Suchfeld optisch unter. */
#globalSearchFilterBtn {
background: #e9ecef;
color: #495057 !important;
border-radius: 50%;
transition: background-color .15s ease, color .15s ease;
}
#globalSearchFilterBtn:hover {
background: #ced4da;
}
/* Aktiv = mindestens ein Typ ausgeblendet — Blau/gefüllt statt Grau, damit auf
den ersten Blick klar ist, dass gerade gefiltert wird (per JS toggled,
siehe render() in global-search.js). */
#globalSearchFilterBtn.gs-filter-active {
background: #0d6efd;
color: #fff !important;
}
#globalSearchFilterBtn.gs-filter-active:hover {
background: #0b5ed7;
}
/* Command-Palette-Overlay der globalen Suche (Trigger-Icon in der Navbar,
Markup in _Layout.cshtml #globalSearchOverlay). Gleiches Show/Hide-Pattern
wie #hinweisOverlay (position:fixed;inset:0 + style.display-Toggle statt
bootstrap.Modal) und optisch an .zeitpicker-overlay angelehnt (abgedunkelter
Hintergrund + zentrierte Karte), aber näher am oberen Rand statt exakt
mittig (Spotlight-/Cmd-K-Konvention) und deutlich breiter für die
Ergebnisliste. z-index 2500 liegt über #hinweisOverlay (2000) und den
Kalender-Toasts (2000/2200), aber unter dem bewusst gedeckelten
Servicefall-Toast (2147483000). */
.gs-overlay {
position: fixed; inset: 0; z-index: 2500;
background: rgba(0, 0, 0, .5);
display: flex; align-items: flex-start; justify-content: center;
padding: 1rem; padding-top: 12vh;
}
.gs-overlay-card {
position: relative;
background: #fff; border-radius: .75rem; width: 100%; max-width: 640px;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
/* KEIN overflow:hidden — das Filter-Menü hängt als absolut positioniertes
Dropdown an dieser Karte und ist länger als sie, sobald die Suche wenige
Treffer hat: es wurde dann an der Kartenkante abgeschnitten (im Feld
gemeldet bei 2 Treffern, 208 px gekappt). Die Rundung, für die das
overflow da war, stellen die beiden Kinder jetzt selbst her. */
overflow: visible;
}
@media (max-width: 767.98px) {
.gs-overlay { padding-top: 4vh; }
.gs-overlay-card { max-width: 95vw; }
}
.gs-overlay-inputrow {
display: flex; align-items: center; gap: .6rem;
padding: .75rem 1rem; border-bottom: 1px solid #eef0f4;
}
.gs-overlay-input {
flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font-size: 1.05rem;
}
/* Filter-Menü jetzt relativ zur Karte positioniert (statt der früheren
Navbar-weiten z-index-Skala 1050/1060) — die Karte selbst sitzt schon ganz
oben im Stapel, ein kleiner lokaler z-index reicht. */
#globalSearchFilterMenu {
position: absolute; right: 1rem; top: 3.4rem; z-index: 2;
background: #fff; border-radius: .5rem; min-width: 250px; overflow: hidden;
/* Auf niedrigen Fenstern darf das Menü selbst scrollen, statt unten aus dem
Bild zu laufen — es wächst mit der Zahl der Treffertypen. */
max-height: 70vh; overflow-y: auto;
}
#globalSearchResults {
max-height: 60vh; overflow-y: auto;
/* Rundet die Karte unten ab (die Karte selbst clippt nicht mehr, siehe dort).
Die Eingabezeile oben braucht nichts: sie hat keinen eigenen Hintergrund. */
border-bottom-left-radius: .75rem; border-bottom-right-radius: .75rem;
}
/* ── Morph-Animation Navbar-Suchfeld ⇄ Overlay (global-search.js) ──
„Shared-Element-Transition": ein fliegendes Ghost-Element startet exakt über
dem Navbar-Suchfeld (.gs-searchbox, dunkel) und wächst zur weißen Overlay-
Eingabezeile — bzw. schrumpft beim Schließen zurück. Die echte Navbar-Box
wird während des Flugs auf visibility:hidden gesetzt (sie „ist" ja gerade der
Ghost). Kein transform-Scale (würde Text/Radius verzerren), sondern direkte
Interpolation von top/left/width/height/padding/Farbe/Radius/Font.
Backdrop faded via .gs-overlay--anim (nur während der Animation, sonst
Instant-Toggle wie bisher). prefers-reduced-motion + Mobile/Strg+K → Instant. */
.gs-overlay--anim { transition: background-color .26s ease; }
.gs-ghost {
position: fixed; z-index: 2600; box-sizing: border-box;
display: flex; align-items: center; gap: .5rem;
overflow: hidden; white-space: nowrap;
/* Ruhe-Look = Navbar-Box auf dunkler Navbar (#1a1a2e + rgba(255,255,255,.08)). */
background: #26263c; border: 1px solid rgba(255, 255, 255, .18);
border-radius: .45rem; color: rgba(255, 255, 255, .65);
font-size: .85rem; padding: .3rem .7rem;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
will-change: top, left, width, height;
transition:
top .27s cubic-bezier(.4, 0, .2, 1),
left .27s cubic-bezier(.4, 0, .2, 1),
width .27s cubic-bezier(.4, 0, .2, 1),
height .27s cubic-bezier(.4, 0, .2, 1),
padding .27s cubic-bezier(.4, 0, .2, 1),
background-color .27s ease, color .2s ease,
border-radius .27s ease, font-size .27s ease, box-shadow .27s ease;
}
.gs-ghost.gs-ghost--big {
background: #fff; border-color: #eef0f4; color: #6c757d;
font-size: 1.05rem; padding: .75rem 1rem; border-radius: .75rem; gap: .6rem;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35);
}
.gs-ghost-ico { flex: 0 0 auto; }
.gs-ghost-text { flex: 1 1 auto; text-align: left; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
.gs-ghost, .gs-overlay--anim { transition: none; animation: none; }
}
/* Aktives (per Tastatur gewähltes) Suchergebnis: Bootstrap färbt den Hintergrund
blau + den Haupttext weiß, aber die Untertitel (.text-muted) und farbigen Spans
(.text-primary „Art.-Nr.", Bestand-Grün/Rot) behalten ihre Farbe → auf Blau
unlesbar. Im aktiven Zustand alle aufhellen. NUR .active (blau) anfassen — der
Hover-Zustand ist hellgrau und mit grauem Text bereits gut lesbar. */
#globalSearchResults .list-group-item.active .text-muted,
#globalSearchResults .list-group-item.active .text-primary,
#globalSearchResults .list-group-item.active .text-success,
#globalSearchResults .list-group-item.active .text-danger,
#globalSearchResults .list-group-item.active .text-warning {
color: rgba(255, 255, 255, .9) !important;
}
/* Typ-Badge (u. a. „Firma" = blau) im aktiven blauen Zeilenhintergrund abgrenzen,
sonst verschwimmt ein gleichfarbiges Badge mit dem Hintergrund. */
#globalSearchResults .list-group-item.active .badge {
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
}
.card {
border-radius: 0.5rem;
}
.card-header {
border-radius: 0.5rem 0.5rem 0 0 !important;
}
.table th {
white-space: nowrap;
}
/* === Empty States === */
.empty-state {
background: #fafbfc;
border: 1px dashed #d8dde2;
border-radius: 0.5rem;
padding: 1.5rem;
}
.empty-state .display-3,
.empty-state .display-4 {
opacity: 0.5;
}
/* === Kategorie-Badges für KundeDocument === */
.badge.kategorie-vertrag {
background-color: #0d6efd;
color: #fff;
}
.badge.kategorie-rechnung {
background-color: #198754;
color: #fff;
}
.badge.kategorie-sonstiges {
background-color: #6c757d;
color: #fff;
}
/* === Action-Buttons in Tabellen: konsistenter Hover === */
.table .btn-sm.btn-outline-primary:hover,
.table .btn-sm.btn-outline-success:hover,
.table .btn-sm.btn-outline-dark:hover,
.table .btn-sm.btn-outline-secondary:hover,
.table .btn-sm.btn-outline-danger:hover {
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* === Inline-Form in Geräte-Tabelle (Löschen-Button) === */
.table form.d-inline,
.table td form {
display: inline-block;
margin: 0;
}
/* === Card-Hover für klickbare Karten === */
a > .card.shadow-sm {
transition: transform 0.08s ease, box-shadow 0.15s ease;
}
a > .card.shadow-sm:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* === Kalender-Legende === */
.legend-dot {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
margin-right: 0.25rem;
vertical-align: middle;
}
/* === FullCalendar Feinjustierung === */
.fc .fc-toolbar-title {
font-size: 1.25rem;
cursor: pointer;
user-select: none;
border-bottom: 1px dashed transparent;
}
.fc .fc-toolbar-title:hover {
border-bottom-color: #6c757d;
}
.fc-event {
cursor: pointer;
font-size: 0.85rem;
}
.fc-event:hover {
filter: brightness(1.1);
}
/* === Servicefall-Card Aufklapp-Indikator === */
.sc-toggle .sc-chevron {
transition: transform 0.2s ease;
}
.sc-toggle[aria-expanded="true"] .sc-chevron {
transform: rotate(180deg);
}
.sc-toggle:hover {
background-color: rgba(0, 0, 0, 0.015);
}
/* ── Alert-Close-Button vertikal zentrieren ──────────────────────────────
Bootstrap setzt .btn-close in .alert-dismissible absolut auf top-right mit
eigenem Padding — bei reduzierten Alerts (py-2 etc.) wirkt das oben-rechts
geklebt und verschoben. Hier vertikal mittig halten, damit das X sauber
auf einer Linie mit dem Alert-Text sitzt. */
.alert-dismissible .btn-close {
top: 50%;
transform: translateY(-50%);
padding: 0.5rem 1rem;
}
/* ── Scrollbars ausblenden ────────────────────────────────────────────────
Browser-übergreifend alle vertikalen und horizontalen Scrollleisten
visuell entfernen. Scrollen bleibt funktional (Mausrad, Touch, Tastatur).
Wirkt auf Window-Scroll + alle Container mit overflow:auto/scroll. */
* {
scrollbar-width: none; /* Firefox 64+ */
-ms-overflow-style: none; /* IE 11 / Edge Legacy */
}
*::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* Chromium, WebKit (Chrome/Edge/Safari) */
}
/* =====================================================================
Wiederverwendbare Detail-Karten (kd-*) — ursprünglich inline auf der
Kunden-Detailseite, hier global, damit auch die Lieferanten-Seite das
gleiche kompakte Karten-Layout nutzt (Stammdaten, Ansprechpartner …).
===================================================================== */
.form-section-label {
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--bs-secondary-color, #6c757d);
font-weight: 600;
margin-bottom: 0.75rem;
padding: 0.15rem 0 0.15rem 0.65rem;
border-left: 3px solid var(--bs-primary);
line-height: 1.3;
}
.form-section-label i { color: var(--bs-primary); margin-right: 0.4rem !important; }
.form-section-label:not(:first-child) { margin-top: 1.6rem; }
.kd-card .card-header {
background: var(--bs-light, #f8f9fa);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 0.75rem 1rem;
}
.kd-card .card-header h5 { margin: 0; font-size: 1.05rem; color: var(--bs-body-color); }
.kd-card .card-header .badge.bg-light { background: rgba(0,0,0,0.08) !important; color: var(--bs-secondary-color); }
.kd-icon-primary { color: var(--bs-primary); }
.kd-icon-info { color: var(--bs-info); }
.kd-icon-success { color: var(--bs-success); }
.kd-icon-warning { color: var(--bs-warning); }
.kd-icon-secondary { color: var(--bs-secondary-color, #6c757d); }
.kd-row { padding: .75rem; border-radius: 10px; transition: background .12s ease; }
.kd-row:hover { background: #f8f9fa; }
.kd-row + .kd-row { border-top: 1px solid #eef0f4; }
/* Anklickbare Zeile (E-Mail-Verlauf → Nachricht öffnen). Die GANZE Zeile ist der Link;
sie soll aber wie eine Zeile aussehen und nicht wie ein blau unterstrichener Textblock. */
a.kd-row-link { color: inherit; text-decoration: none; }
a.kd-row-link:hover { background: #eef4ff; color: inherit; }
.kd-avatar {
width: 44px; height: 44px;
border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 0.95rem; color: #fff;
background: #6c757d;
}
.kd-avatar.square { border-radius: 10px; }
/* Avatar als Link (Kontaktzeile → Personen-Akte): Farbe/Groesse bleiben, nur der Zeiger
und ein leichtes Aufhellen zeigen, dass er anklickbar ist. */
a.kd-avatar { color: #fff; transition: filter .12s ease; }
a.kd-avatar:hover { filter: brightness(1.12); color: #fff; }
/* Name in der Kontaktzeile: unterstreicht erst beim Hovern, damit die Zeile ruhig bleibt. */
.kd-person-link:hover { text-decoration: underline !important; color: #0d6efd !important; }
.kd-meta { font-size: 0.82rem; color: #495057; }
.kd-meta a { color: #495057; text-decoration: none; }
.kd-meta a:hover { color: #0d6efd; text-decoration: underline; }
.kd-meta .ikoblock { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.85rem; }
.kd-meta .ikoblock i { color: #6c757d; }
/* Beschriftete Feld-Liste (Label | Wert) der Akten-Kopfkarten. Zweispaltiges Grid,
das auf schmalen Screens stapelt; dt/dd liegen direkt im Grid (je eine Zelle).
Global, weil Kunden- UND Personen-Akte sie nutzen. */
.kd-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.1rem; align-items: baseline; }
.kd-fields dt { font-weight: 600; color: #6c757d; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; margin: 0; }
.kd-fields dt i { color: var(--bs-primary); }
.kd-fields dd { margin: 0; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.kd-fields dd a { color: #212529; text-decoration: none; }
.kd-fields dd a:hover { color: #0d6efd; text-decoration: underline; }
@media (max-width: 575.98px) {
.kd-fields { grid-template-columns: 1fr; gap: 0.1rem; }
.kd-fields dt { margin-top: 0.55rem; }
}
/* Kopier-Knopf neben Telefon-/E-Mail-/Adress-Links (wwwroot/js/kopier-knopf.js) — das
Skript ergänzt ihn generisch bei JEDEM passenden Link im ganzen DOM, keine Vorlage
muss dafür Markup ändern. Klassen am Knopf sind btn btn-sm btn-link text-muted p-0
(identisch zum bestehenden Notiz-Kopieren-Knopf, notiz-wert.js) — dieselbe Optik statt
eines zweiten, selbst erfundenen Knopf-Stils. btn-link ist von der 44px-Touch-Regel
weiter unten ausgenommen: der Link selbst bleibt das Tippziel zum Anrufen/Mailen/
Navigieren, der Knopf ist nur ein kleiner Zusatz für die Zwischenablage. */
.qrv-copy-btn { line-height: 1; vertical-align: -1px; }
.qrv-copy-btn i { font-size: .85em; }
.qrv-copy-btn:hover, .qrv-copy-btn:focus-visible { color: var(--bs-primary) !important; }
.qrv-copy-btn.qrv-copy-btn-ok { color: #198754 !important; }
/* Nur mit echter Maus dauerhaft ausgeblendet, erscheint beim Überfahren/Fokussieren der
Zeile — gleiches Muster wie die Aktions-Knöpfe der Aufgabenliste (Pages/Index.cshtml):
sonst stehen an einer Kopfkarte mit drei Telefonnummern vier Symbole permanent herum.
pointer-events:none verhindert einen unsichtbaren, aber klickbaren Knopf.
Auf Touch (kein Hover) bleibt er dauerhaft sichtbar — dort gibt es kein "Überfahren". */
@media (hover: hover) and (pointer: fine) {
.qrv-copy-btn { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
*:hover > .qrv-copy-btn,
*:focus-within > .qrv-copy-btn,
.qrv-copy-btn:focus-visible {
opacity: 1;
pointer-events: auto;
}
}
/* Servicefall-Liste in den Akten: kompakte Zeilen-Karten statt Tabelle, linker
Status-Akzent in Rot (offen) / Gruen (erledigt). Ebenfalls von beiden Akten genutzt. */
.kd-sc-list { display: flex; flex-direction: column; }
.kd-sc-row { padding: .65rem .85rem; border-left: 3px solid transparent; transition: background .12s ease; }
.kd-sc-row:hover { background: #f8f9fa; }
.kd-sc-row + .kd-sc-row { border-top: 1px solid #eef0f4; }
.kd-sc-row-offen { border-left-color: var(--bs-danger); }
.kd-sc-row-erledigt { border-left-color: var(--bs-success); opacity: .85; }
.kd-sc-device { color: #212529; }
.kd-sc-device:hover { color: var(--bs-primary); text-decoration: underline; }
.kd-sc-row-erledigt .kd-sc-device { color: #6c757d; }
/* SLA-Ampel (kleiner farbiger Punkt) - gleiche Optik wie ServiceCases/Index. */
.sla-ampel { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; flex-shrink: 0; vertical-align: middle; }
/* Fälligkeits-Balken einer Geräte-Zeile — dieselbe Technik wie .aufg-row der
Planungsseite (Pages/Index.cshtml): rechts verankerter Farbverlauf + Randlinie,
Füllstand/Deckkraft steigen zur Fälligkeit hin. Eigene Klassen (gd-due-*) statt
aufg-fall-*, weil die Tage-Schwellen bewusst von der Planungsseite abweichen
(siehe GeraeteFaelligkeitsBalken-Kommentar in Services/). --gd-fuellstand/--gd-staerke
kommen als Inline-Style vom Server (InvariantCulture-formatiert).
Drei Konsumenten seit 09/2026: Kunden/Details.cshtml (Geräte-Zeile),
Devices/Index.cshtml (Geräte-Liste) und Kunden/Person.cshtml — deshalb global
statt seitenlokal. Klasse heißt bewusst NICHT ".kd-row-faellig" o.ä. — sie
kombiniert sich mit der jeweils eigenen Zeilen-Klasse der Seite (.kd-row bzw.
.ap-row), ist selbst aber seitenneutral.
--gd-ton ist bewusst UNABHÄNGIG von .faellig-row definiert (eigene Regel-Gruppe
unten): das Endkunden-Portal (Portal/Devices.cshtml) zeigt Geräte als Bild-Karten,
nicht als kompakte Liste — dort passt kein Flächen-Verlauf, nur ein farbiger
Rand. Die Karte trägt dieselben gd-due-*-Klassen rein für den Farbton, ohne
.faellig-row (kein Fill, kein z-index-Layering nötig). */
.gd-due-rot { --gd-ton: 220 53 69; }
.gd-due-orange { --gd-ton: 253 126 20; }
.gd-due-gelb { --gd-ton: 255 193 7; }
.gd-due-gruen { --gd-ton: 25 135 84; }
.gd-due-ueberfaellig { --gd-ton: 0 0 0; }
.faellig-row { position: relative; border-left: 3px solid transparent; }
.faellig-row > * { position: relative; z-index: 1; }
/* Jedes Kind ist damit ein eigener Stapel-Kontext (z-index 1) — ein Dropdown darin ist
gegenüber den Kindern der FOLGEZEILEN (ebenfalls 1, später im DOM) chancenlos: deren
Knöpfe malen über das Menü, und die Maus trifft sie statt der Menüeinträge (im Feld
gemeldet am ⋮-Menü der Geräte-Zeile). Solange ein Menü offen ist, hebt sich die
Spalte auf die Dropdown-Ebene (--bs-dropdown-zindex, siehe „Stapel-Reihenfolge" —
über den klebenden Leisten, unter Navbar/Modals). */
.faellig-row > *:has(.dropdown-menu.show) { z-index: 1025; }
/* Bewusst KEIN overflow:hidden auf der Zeile — der Balken (rechts verankert, Breite
per var() begrenzt) kann sich ohnehin nicht über die Zeilengrenze hinaus ausdehnen,
overflow:hidden würde aber ein Dropdown-Menü einer Aktionsspalte (ein Kind DIESER
Zeile) mit abschneiden, sobald es unter der Zeile aufklappt. */
.faellig-row::before {
content: ""; position: absolute; inset: 0; left: auto; border-radius: 10px;
width: var(--gd-fuellstand, 0%);
pointer-events: none; z-index: 0;
background: linear-gradient(to left,
rgb(var(--gd-ton, 108 117 125) / calc(var(--gd-deckung, .40) * var(--gd-staerke, 1))) 0%,
rgb(var(--gd-ton, 108 117 125) / 0) 100%);
box-shadow: inset 2px 0 0 rgb(var(--gd-ton, 108 117 125) / calc(var(--gd-deckung, .40) * var(--gd-staerke, 1) * .65));
}
.faellig-row.gd-due-rot { border-left-color: var(--bs-danger); }
.faellig-row.gd-due-orange { border-left-color: #fd7e14; }
.faellig-row.gd-due-gelb { border-left-color: var(--bs-warning); }
.faellig-row.gd-due-gruen { border-left-color: var(--bs-success); }
.faellig-row.gd-due-ueberfaellig { border-left-color: #000; }
/* Am Telefon ohne Flächen-Verlauf (09/2026): die Füllung ist prozentual zur Zeilenbreite
(Mindestanteil 8 %) — auf einer 350-px-Zeile werden daraus ~28 px, und dort stand sie als
halbtransparenter, abgerundeter „Pfeiler" am rechten Rand, hinter dem die Aktionsknöpfe
klebten. Das las sich wie ein Darstellungsfehler, nicht wie eine Restzeit. Die Dringlichkeit
tragen am Telefon weiter der farbige linke Rand und die Farbe des Datums; der Verlauf bleibt
für die breite Zeile, wo er ein ruhiger Auslauf ist. */
@media (max-width: 767.98px) {
.faellig-row::before { display: none; }
}
/* Portal-Gerätekarte (Endkunden-Selbstbedienung): nur der linke Kartenrand färbt
sich, kein Hintergrund-Fill (Karte trägt Bild + Detailtabelle, ein Verlauf würde
beides überlagern). */
.card.gd-due-rot, .card.gd-due-orange, .card.gd-due-gelb, .card.gd-due-gruen, .card.gd-due-ueberfaellig {
border-left: 4px solid rgb(var(--gd-ton));
}
/* Servicefall-Board (Pages/ServiceCases/Board): Spalten nebeneinander, waagerecht
scrollbar. Feste Spaltenbreite statt Flex-Verteilung — bei sechs Status waeren die
Spalten sonst auf jedem Laptop zu schmal fuer die Kartentexte. */
.sc-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.sc-col { flex: 0 0 265px; background: #f8f9fa; border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.sc-col-head {
display: flex; align-items: center; gap: .5rem;
padding: .6rem .75rem; border-top: 3px solid #6c757d; border-radius: 12px 12px 0 0;
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sc-col-titel { font-weight: 600; font-size: .85rem; color: #212529; }
.sc-col-count { margin-left: auto; font-size: .75rem; font-weight: 600; color: #6c757d; background: #f1f3f5; border-radius: 1rem; padding: .05rem .5rem; }
.sc-col-body { padding: .5rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; min-height: 90px; }
.sc-col-body-ueber { background: rgba(13,110,253,.07); border-radius: 0 0 12px 12px; outline: 2px dashed rgba(13,110,253,.35); outline-offset: -4px; }
.sc-col-leer { color: #adb5bd; text-align: center; font-size: .85rem; padding: .75rem 0; }
.sc-karte {
background: #fff; border-radius: 10px; padding: .6rem .7rem; cursor: grab;
box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
.sc-karte:active { cursor: grabbing; }
.sc-karte-zieht { opacity: .45; }
.sc-karte-wartet { opacity: .6; } /* laeuft, waehrend der Server bestaetigt */
.sc-karte-titel { font-weight: 600; font-size: .85rem; color: #212529; overflow-wrap: anywhere; }
.sc-karte-meta { font-size: .76rem; color: #6c757d; margin-top: .1rem; overflow-wrap: anywhere; }
.sc-karte-text {
font-size: .76rem; color: #495057; margin-top: .35rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-karte-fuss { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; font-size: .72rem; color: #868e96; }
.sc-karte-fuss a { color: #868e96; }
.sc-karte-fuss a:hover { color: #0d6efd; }
@media (max-width: 575.98px) { .sc-col { flex-basis: 82vw; } }
/* Aktivitaets-Historie (.kd-timeline) — Tages-Trenner, Icon-Punkt, Kopfzeile.
Global, weil die Kundenakte (interaktive Variante mit Aktions-Knoepfen) und das geteilte
Partial _Aktivitaeten.cshtml (Personen-/Geräteakte) dieselbe Optik zeigen sollen.
Die NUR in der Kundenakte gebrauchten Regeln (.kd-tl-del, .kd-tl-neu-Animation) bleiben
bewusst dort inline. */
.kd-timeline { padding-left: 0.25rem; padding-right: 0.4rem; }
.kd-tl-day {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
color: #6c757d; font-weight: 600;
margin: 0 0 0.4rem 0; padding: 0.4rem 0 0.25rem 0;
border-bottom: 1px dashed #dee2e6;
/* Beim Scrollen oben andocken, damit das Datum des sichtbaren Bereichs stehen bleibt.
Sticky relativ zum Scroll-Container; weisser Hintergrund + z-index, damit die
durchlaufenden Eintraege nicht durchscheinen. */
position: sticky; top: 0; z-index: 3; background: #fff;
}
.kd-tl-day:first-child { margin-top: 0; }
.kd-tl-row { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0 0.4rem 0.1rem; }
.kd-tl-icon {
flex-shrink: 0;
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 0.85rem; line-height: 1;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.06);
}
.kd-tl-body { flex: 1 1 auto; min-width: 0; }
.kd-tl-head { display: flex; gap: 0.5rem; justify-content: space-between; align-items: center; }
.kd-tl-typ { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #495057; }
.kd-tl-time { font-size: 0.7rem; color: #adb5bd; font-variant-numeric: tabular-nums; }
.kd-tl-title { font-size: 0.88rem; font-weight: 500; color: #212529; }
.kd-tl-desc { font-size: 0.78rem; color: #6c757d; margin-top: 0.05rem; }
.kd-tl-link { font-size: 0.75rem; color: #0d6efd; text-decoration: none; display: inline-flex; align-items: center; margin-top: 0.15rem; }
.kd-tl-link:hover { text-decoration: underline; }
/* Aufgaben-Zeilen (_AufgabenListe.cshtml) — Haekchen links, Titel, Meta darunter.
Erledigte werden zunaechst nur gedaempft und durchgestrichen (Puffer gegen versehentliches
Mit-Abhaken der nachrueckenden Zeile) und verschwinden erst nach einer kurzen Wartezeit
langsam aus der Liste (aufgabe-modal.js, AUFGABE_FADE_DELAY). */
.aufgabe-zeile { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .75rem; border-radius: 10px; overflow: hidden; transition: background .12s ease; }
.aufgabe-zeile:hover { background: #f8f9fa; }
.aufgabe-zeile + .aufgabe-zeile { border-top: 1px solid #eef0f4; }
.aufgabe-zeile .form-check { margin: 0; padding-left: 1.4rem; }
.aufgabe-zeile .form-check-input { width: 1.15rem; height: 1.15rem; margin-left: -1.4rem; cursor: pointer; }
.aufgabe-titel { font-weight: 500; overflow-wrap: anywhere; }
.aufgabe-erledigt .aufgabe-titel { text-decoration: line-through; color: #8a929a; }
.aufgabe-erledigt { opacity: .7; }
/* Ausblenden einer erledigten Zeile (JS friert die Hoehe vorher als px-Wert ein, siehe
zeileAusblenden in aufgabe-modal.js — "auto" kann CSS nicht wegtransitionieren). Border
dieser Zeile (falls sie NICHT die erste ist) blendet mit aus, sonst bliebe ein Strich auf
0 Hoehe stehen; hoehere Spezifitaet (2 Klassen) + spaeter im Stylesheet schlaegt die
"+ .aufgabe-zeile"-Regel oben. */
.aufgabe-zeile.aufgabe-ausblendend {
/* Zwei Stufen: erst verblasst der Inhalt vollstaendig (1.4s), ERST DANACH zieht sich
die Luecke zusammen (Verzoegerung = die volle Verblass-Dauer, damit beim Schrumpfen
nichts mehr sichtbar ist und kein Text zusammengequetscht wird). Waehrend des
Ausblendens nicht mehr anfassbar. */
pointer-events: none;
transition: opacity 1.4s ease,
height .6s ease 1.4s,
padding-top .6s ease 1.4s,
padding-bottom .6s ease 1.4s,
border-top-color .4s ease 1.3s;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
border-top-color: transparent;
}
/* Ausblenden des ganzen Aufgaben-Segments (z. B. die Karte "Aufgaben" auf "Heute"), wenn
die zuletzt übrige Zeile abgehakt wird — statt die Zeile erst einzeln auszublenden und
danach separat die Karte, faengt bei der letzten Zeile SOFORT diese Animation an: exakt
dieselben Zeitwerte wie .aufgabe-ausblendend oben (1.4s verblassen, dann 0.6s zusammen-
ziehen), damit die Zeile als Kind der Karte einfach lautlos mitverblasst statt eine
zweite, spuerbar eigene Animation hinterherzuschicken. Sonst bliebe eine leere
Kartenhuelle stehen (die App wuerde sie erst beim naechsten Laden von selbst weglassen,
siehe „Heute": die Aufgaben-Karte entfaellt serverseitig komplett, wenn nichts offen ist). */
[data-aufgaben-segment].aufgaben-segment-ausblendend {
overflow: hidden;
pointer-events: none;
transition: opacity 1.4s ease,
height .6s ease 1.4s,
margin-bottom .6s ease 1.4s;
opacity: 0;
}
/* Gruppen-Ueberschrift der Faelligkeits-Schubladen (Ueberfaellig/Heute/…). */
.aufgabe-gruppe-titel { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #6c757d; margin: 1rem 0 .35rem; }
.aufgabe-gruppe-titel:first-child { margin-top: 0; }
.aufgabe-gruppe-ueberfaellig { color: var(--bs-danger); }
/* Ziehbare Spaltenbreiten (table-resize.js): Greifer am rechten Rand jeder Kopfzelle. */
table[data-resizable] th.col-resizable { position: relative; }
table[data-resizable] th .col-resizer {
position: absolute;
top: 0;
right: 0;
width: 7px;
height: 100%;
cursor: col-resize;
user-select: none;
touch-action: none;
}
table[data-resizable] th .col-resizer:hover { background: rgba(13, 110, 253, .35); }
body.col-resizing { cursor: col-resize; user-select: none; }
/* Modus „nachbar" (Mail-Listen): der Greifer sitzt auf der Grenze zur nächsten Spalte. Ab md
festes Tabellenlayout, damit Ziehen genau zwei Spalten betrifft und die Tabelle so breit
bleibt wie ihre Karte; darunter bleibt das automatische Layout (die Liste scrollt dort in
.table-responsive) und die Greifer entfallen. Bei festem Layout schneiden Zellen zu langen
Text selbst ab, statt in die Nachbarspalte zu laufen — die Zellen der ersten Spalte (Häkchen)
bleiben ausgenommen, sonst schneidet overflow den Fokusring des Kästchens ab. */
@media (min-width: 768px) {
table[data-resizable="nachbar"] { table-layout: fixed; width: 100%; }
table[data-resizable="nachbar"] th,
table[data-resizable="nachbar"] td:not(:first-child) { overflow: hidden; text-overflow: ellipsis; }
table[data-resizable="nachbar"] th { white-space: nowrap; }
}
@media (max-width: 767.98px) {
table[data-resizable="nachbar"] th .col-resizer { display: none; }
}
/* Kleiner Trennstrich: ohne ihn sieht man dem Kopf nicht an, dass sich die Spalten ziehen lassen. */
table[data-resizable="nachbar"] th .col-resizer::after {
content: "";
position: absolute;
top: 22%;
bottom: 22%;
right: 3px;
width: 1px;
background: rgba(0, 0, 0, .22);
}
table[data-resizable="nachbar"] th .col-resizer:hover::after { background: rgba(13, 110, 253, .9); }
/* Kategorie-Combobox (komm-list): das Eingabefeld ist absichtlich schmal (col-3),
aber das Autocomplete-Dropdown soll lesbar breit sein — sonst bricht der Text
(„Ar bei t"). min-width lässt es nach rechts über das schmale Feld hinausragen. */
.komm-list .ac-dropdown { min-width: 18rem; }
.komm-list .ac-item .ac-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* E-Mail-Verlauf-Listen (Lieferanten-/Kunden-/Personen-Akte): „N weitere
anzeigen" + Live-Suche über window.ListeBegrenztSuche (09/2026). Eine Zeile
trägt praktisch immer .d-flex für ihr eigenes Layout — Bootstraps Utility
setzt dafür display:flex !important und würde ein reines classList-Umschalten
ohne eigenes !important sofort wieder überstimmen (dieselbe Falle wie bei
.d-flex an einem Modal-Fuß). Der Compound-Selektor (zwei Klassen) hat höhere
Spezifität als .d-flex allein und gewinnt deshalb unabhängig von der
CSS-Ladereihenfolge. Generisch auf .kd-row gefasst, nicht auf eine
Seiten-eigene Zeilen-Klasse — alle drei Akten nutzen dieselbe Zeilen-Basis. */
.kd-row.kd-verlauf-hidden { display: none !important; }
/* „N weitere anzeigen"-Knopf derselben Listen — Pille statt nacktem Text-Link
(der wirkte wie ein vergessener -Rest, nicht wie eine Bedienmöglichkeit).
Passt sich der Kartenfläche an: zart umrandet im Ruhezustand, füllt sich beim
Überfahren dezent — dieselbe Sprache wie die übrigen .btn-outline-* Knöpfe
der App, nur als Pille wie die Zähler-Badges der Sprung-Leisten. */
.kd-mehr-btn {
border-radius: 50rem;
padding-inline: 1rem;
color: #495057;
border-color: #dee2e6;
background: #fff;
}
.kd-mehr-btn:hover, .kd-mehr-btn:focus {
background: #f1f3f5;
color: #212529;
border-color: #ced4da;
}
/* Der Pfeil dreht sich beim Aufklappen, statt Chevron-Down/-Up auszutauschen —
eine Drehung liest sich als STETIGE Bewegung, ein Icon-Tausch wie ein Sprung. */
.kd-mehr-btn .kd-mehr-chevron {
display: inline-block;
transition: transform .15s ease;
}
.kd-mehr-btn.kd-mehr-btn-auf .kd-mehr-chevron { transform: rotate(180deg); }
/* ─── Mobil: markierte Tabellen als gestapelte Karten (statt horizontalem Scrollen) ───────
Markup:
+ an jeder
. Unter dem
md-Breakpoint wird jede Tabellenzeile zu einer Karte, jede Zelle zu einer „Label: Wert"-
Block-Zeile. Bewusst Block-Stack (nicht flex), damit auch mehrteilige Zellen (Kunde+Fahrzeug,
Status-Badge, Aktions-Buttons) sauber umbrechen. Desktop bleibt unverändert. */
@media (max-width: 767.98px) {
table.table-cards thead { display: none; }
table.table-cards, table.table-cards tbody { display: block; width: 100%; }
table.table-cards tr {
display: block;
border: 1px solid #e9ecef;
border-radius: .6rem;
margin-bottom: .6rem;
padding: .5rem .85rem;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
table.table-cards td {
display: block;
border: none !important;
padding: .15rem 0;
text-align: left !important;
white-space: normal;
}
table.table-cards td[data-label]::before {
content: attr(data-label) ": ";
font-weight: 600;
color: #6c757d;
margin-right: .35rem;
}
/* Aktions-Zelle (letzte Spalte, ohne data-label): Buttons nebeneinander, etwas Abstand oben. */
table.table-cards td:last-child {
padding-top: .5rem;
display: flex;
gap: .4rem;
flex-wrap: wrap;
}
}
/* ============================================================================
Mobile-/Tablet-Feinschliff (additiv) — behebt die häufigsten Touch-Probleme
app-weit, OHNE den Desktop (≥ md) anzufassen. Bewusst nicht-destruktiv:
`flex-wrap` greift nur, wenn der Platz NICHT reicht (passt alles in eine
Zeile, ändert sich nichts). Siehe Begründung pro Block.
============================================================================ */
/* Bis Tablet-Hochkant (≈ md): „Titel links / Aktionen rechts"-Kopfzeilen und
Zeilen mit Aktions-Cluster (d-flex justify-content-between) dürfen umbrechen,
statt rechts über den Rand zu laufen (= „seitlich scrollen" / „abgeschnitten").
gap hält den Abstand beim Umbruch; bei space-between auf einer Zeile bleibt
die Optik unverändert. */
@media (max-width: 991.98px) {
.d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
/* Nicht zu Karten umgebaute Tabellen: weiches Touch-Scrollen im Container
(die Seite selbst läuft dank .table-responsive nicht über). */
.table-responsive { -webkit-overflow-scrolling: touch; }
}
/* Nur Handy: größere Touch-Targets + mehr nutzbare Breite. */
@media (max-width: 767.98px) {
/* Mindesthöhe fürs Antippen; Icon mittig. Text-Links (btn-link) und das
Modal-X (btn-close) bleiben unverändert.
44px statt der früheren 38px: das ist Apples Mindestmaß, und am Gerät ist
genau das der Unterschied zwischen „trifft" und „trifft daneben", wenn man
es einhändig in der Werkstatt bedient (08/2026 am iPhone nachgemessen —
vorher lagen praktisch alle Knöpfe bei 38px). */
.btn:not(.btn-link):not(.btn-close) {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.form-control, .form-select, .input-group-text { min-height: 44px; }
/* Padding zurücknehmen → mehr Inhaltsbreite auf schmalen Displays. */
.container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }
.card-body { padding: .9rem; }
.modal-body { padding: 1rem; }
/* Nicht zu Karten umgebaute Tabellen kompakter setzen → mehr Spalten passen
rein, bevor seitlich gescrollt werden muss. (table-cards-Tabellen sind hier
nicht betroffen — die werden ohnehin zu Blöcken gestapelt.) */
.table { font-size: .85rem; }
.table > :not(caption) > * > * { padding: .4rem .5rem; }
}
/* ── Registrierungs-/Setup-Assistent: Schritt-Anzeige (Stepper) ──
Genutzt von Pages/PortalCentral/Register.cshtml + TenantSetup.cshtml. */
.reg-steps { display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.reg-steps li { flex: 1 1 0; text-align: center; font-size: .8rem; color: #94a3b8; position: relative; }
.reg-steps li .reg-bubble {
width: 2rem; height: 2rem; border-radius: 50%; margin: 0 auto .35rem;
display: flex; align-items: center; justify-content: center; font-weight: 600;
background: #e2e8f0; color: #64748b; transition: all .2s; position: relative; z-index: 1;
}
.reg-steps li.active .reg-bubble { background: #0d6efd; color: #fff; }
.reg-steps li.done .reg-bubble { background: #198754; color: #fff; }
.reg-steps li.active, .reg-steps li.done { color: #1e293b; font-weight: 600; }
.reg-steps li::before {
content: ""; position: absolute; top: 1rem; left: -50%; width: 100%; height: 2px;
background: #e2e8f0; z-index: 0;
}
.reg-steps li:first-child::before { display: none; }
.reg-steps li.done::before, .reg-steps li.active::before { background: #198754; }
/* ── Pflege-Akte: Reiter/Karteikarten (Devices/Edit im Pflege-Modus) ──
Die unteren Akte-Bereiche (Medikation/Vitalwerte/Wunden/Besuche/Dokumente)
liegen als Karten mit data-akte-tab vor; per JS wird je Reiter ein-/ausgeblendet.
Im Reiter werden die Karten voll breit gestapelt (kein col-lg-8-Zentrieren). */
.pflege-tab-cards > [class*="col-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Erste Karte im Reiter ohne doppelten Abstand (Tab-Leiste liefert den Abstand). */
.pflege-tab-cards > [class*="col-"].mt-4 { margin-top: 0 !important; margin-bottom: 1.25rem; }
/* ── Zeit-Picker (Scroll-Rad) — wwwroot/js/zeit-picker.js ──
Ersetzt das native Browser-Widget für global (Auto-Init in
_Layout.cshtml, analog zum flatpickr-Auto-Init für Datumsfelder). Helles Theme, passend
zum sonst hellen App-Look (Bootstrap-Weiß/Grau statt dunklem iOS-Chrome). */
/* Bewusst NICHT readonly (mehr) — das Feld ist direkt per Tastatur tippbar (Tab rein +
"1130" eintippen), Klick öffnet zusätzlich das Rad. Daher kein Grau wie bei den
readonly-Datumsfeldern; normales, editierbar aussehendes Input. */
.zeitpicker-input { cursor: pointer; }
.zeitpicker-overlay {
position: fixed; inset: 0;
/* Über #hinweisOverlay (_Layout.cshtml, z-index:2000 — der alle 60s pollende
Ankündigungs-Popup): der Picker ist eine AKTIVE Nutzereingabe, die nie
ungefragt von einem Hintergrund-Hinweis verdeckt werden darf (sähe aus wie
„Picker reagiert nicht"). Unter der Command-Palette (2500), die der Nutzer
bewusst per Strg+K zusätzlich öffnen kann. */
z-index: 2100;
background: rgba(0, 0, 0, .35);
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.zeitpicker-sheet {
background: #fff; border-radius: 14px; width: 100%; max-width: 280px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
overflow: hidden;
}
/* Geburtstag-Picker (Tag/Monat/Jahr) braucht mehr Breite als Stunden/Minuten — Monatsnamen
("September") sind deutlich breiter als zweistellige Zahlen, dazu kommt die vierstellige
Jahres-Spalte. Eigener Modifier statt den Zeit-Picker breiter zu machen, damit dessen
kompakte Optik unverändert bleibt. Großzügig statt exakt ausgerechnet, als Sicherheitsmarge
gegen das Sheet-eigene overflow:hidden. */
.zeitpicker-sheet--geburtstag { max-width: 440px; }
/* Nur beim Geburtstag-Picker: den weißen Freiraum links/rechts tatsächlich nutzen, statt die
Spalten eng in der Mitte zu bündeln. Eigene Klasse (statt .zeitpicker-wheels direkt), damit
der kompakte Zeit-Picker (Stunden:Minuten) unverändert eng zentriert bleibt. */
.zeitpicker-wheels--spread { justify-content: space-evenly; }
/* Flexbox statt Bootstraps float-basiertem .form-check — robuster in diesem per innerHTML
erzeugten Overlay-Kontext (kein margin-left:-1.5em-Trick, der von einer bestimmten
umgebenden Breite/Overflow-Situation abhängt und hier schief dargestellt wurde). */
.zeitpicker-noyear-row {
display: flex; align-items: center; gap: .5rem;
padding: .5rem 1rem; border-top: 1px solid #e9ecef;
}
.zeitpicker-noyear-row .form-check-input { flex-shrink: 0; margin: 0; }
.zeitpicker-wheels {
position: relative; display: flex; align-items: center; justify-content: center;
/* Abstand zwischen den Rad-Spalten — ohne gap saßen Tag/Monat/Jahr ohne jeden Zwischenraum
aneinander ("touchten sich optisch"), besonders auffällig bei unterschiedlich breiten
Monatsnamen (Mai vs. September). */
gap: .5rem;
padding: 0 1rem;
/* Zeigt 7 Zeilen (3 über/unter der Mitte) — muss zu ITEM_HEIGHT (44px) in
zeit-picker.js passen: 7 * 44 = 308. */
height: 308px;
/* Fade-out zu den Rändern hin, wie im nativen Rad. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
/* position:relative + z-index:1 ist Absicht: .zeitpicker-band ist position:absolute und würde
nach den normalen CSS-Stacking-Regeln sonst ÜBER den (unpositionierten) Zahlen-Spalten
liegen und den ausgewählten Wert unsichtbar unter der Markierungsfläche verstecken. */
/* scroll-snap-type: PROXIMITY statt mandatory — "mandatory" ist ein bekannter Grund für
genau das Symptom "Scrollen reagiert manchmal nicht": der Browser versucht bei JEDEM
einzelnen Mausrad-Tick sofort auf den nächsten Snap-Punkt zurückzuziehen und kämpft dabei
gegen die eingehenden Wheel-Deltas, was sich wie ein Hänger anfühlt. proximity snapt nur,
wenn ohnehin schon nah dran — die eigentliche exakte Einrastung übernimmt weiterhin unser
JS (debounce in zeit-picker.js). overscroll-behavior:contain verhindert zusätzlich, dass ein
Erreichen des (dank Endlos-Kopien seltenen) echten Rands auf die Seite dahinter durchschlägt. */
.zeitpicker-wheel {
position: relative; z-index: 1;
height: 308px; overflow-y: scroll; scroll-snap-type: y proximity; overscroll-behavior: contain;
scrollbar-width: none;
/* Nicht schrumpfen: sonst quetscht der Flex-Container bei mehreren unterschiedlich
breiten Spalten (Tag/Monat/Jahr) jede Spalte auf die verfügbare Restbreite zusammen,
statt die Spalten in ihrer natürlichen Breite nebeneinander darzustellen. */
flex-shrink: 0;
}
.zeitpicker-wheel::-webkit-scrollbar { display: none; }
.zeitpicker-wheel-pad { height: 132px; } /* 3 * ITEM_HEIGHT */
.zeitpicker-wheel-item {
height: 44px; display: flex; align-items: center; justify-content: center;
scroll-snap-align: center;
padding: 0 .35rem;
font-size: 1.7rem; font-variant-numeric: tabular-nums;
color: #adb5bd; cursor: pointer;
transition: color .15s, transform .15s;
/* Monatsnamen dürfen nie umbrechen — sonst ragt eine zweite Zeile in die Nachbarspalte
und sieht wie eine Berührung/Verschiebung der Nachbar-Werte aus. */
white-space: nowrap;
}
/* Klick auf eine sichtbare Zahl dreht das Rad dorthin (zeit-picker.js: wheel-click-Handler
ruft setValue). Hover-Feedback macht das erst erkennbar — ohne Cursor/Farbe sah es aus
wie reiner Anzeigetext. */
.zeitpicker-wheel-item:hover { color: #495057; }
/* font-weight:700 macht den Text breiter als normalgewichtig — bei zentriertem Text
(justify-content:center je Zeile) würde das die Zeile beim Einrasten sichtbar verschieben/
"spreizen", wenn die SPALTE selbst variabel breit ist. Die eigentliche Lösung liegt daher in
geburtstag-picker.js: Tag/Monat/Jahr-Spalten bekommen dort eine feste Mindestbreite
(min-width, großzügig für den fett gerenderten Extremfall wie "September" bemessen) — damit
ist Fett hier wieder gefahrlos möglich. */
.zeitpicker-wheel-item.is-selected { color: #000; font-weight: 700; }
.zeitpicker-wheel-item.is-selected:hover { color: #000; }
/* Ungültige Kombinationen (z. B. Tag 31 bei einem 30-Tage-Monat) werden ausgegraut und sind
nicht anklickbar (siehe wheel-picker.js setDisabled + Klick-Guard) — verhindert, dass sich
ein nicht existierendes Datum wie „31. Juni" auswählen lässt. */
.zeitpicker-wheel-item.is-disabled { color: #dee2e6; cursor: default; pointer-events: none; }
.zeitpicker-wheel-item.is-disabled.is-selected { color: #dee2e6; font-weight: 400; }
.zeitpicker-sep { color: #212529; font-size: 1.7rem; padding: 0 .4rem; }
.zeitpicker-band {
position: absolute; left: 0; right: 0; top: 132px; height: 44px;
background: #eef4ff; border-radius: 10px;
pointer-events: none; z-index: 0;
}
.zeitpicker-actions {
display: flex; justify-content: space-between; align-items: center;
padding: .5rem .75rem .75rem; border-top: 1px solid #e9ecef;
}
/* ===== Searchable-Select (data-searchable, wwwroot/js/searchable-select.js) ─────
Combobox-Widget: Original-