+ 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+Gerät,
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; }
/* ── 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- |