/* HTMLShare — Theming-Variablen.
* Spiegelt das `homelab.css`-Pattern aus dem Standards-Repo (Std 8.2).
* App-spezifische Overrides duerfen hier ergaenzt werden.
*/
/* Alpine.js — versteckt Elemente mit `x-cloak`-Attribut bis Alpine initialisiert.
* Verhindert "Flash of Uncloaked Content" und Fehlbedienung waehrend des Bootings. */
[x-cloak] { display: none !important; }
:root {
--hl-primary: #0d6efd;
--hl-accent: #6610f2;
--hl-success: #198754;
--hl-warning: #ffc107;
--hl-danger: #dc3545;
--hl-radius: 0.5rem;
--hl-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .075);
--hl-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html, body {
font-family: var(--hl-font);
}
.card {
border-radius: var(--hl-radius);
}
/* Std 8.6.1 — Mobile-Spaltenpriorisierung in Tabellen */
@media (max-width: 575.98px) {
.table .d-mobile-hide { display: none !important; }
}
/* Std 8.7 — Fokus-Sichtbarkeit fuer Tastaturnavigation */
:focus-visible {
outline: 2px solid var(--hl-primary);
outline-offset: 2px;
}
/* Std 13 — Safe-Area-Insets fuer iOS Home-Bildschirm-App.
*
* Wichtig: `body { padding-top }` reicht NICHT, wenn eine sticky-Navbar im
* Spiel ist. `.sticky-top` heftet sich an die Viewport-Top und ignoriert das
* body-padding. Auf iPhone-PWA wuerde die Navbar dadurch hinter der Statuszeile
* verschwinden. Loesung: Body bekommt nur bottom-Safe-Area, die Navbar
* uebernimmt den top-Anteil selbst (siehe Std 13.3 / Issue 2026-05-18).
*/
@supports (padding: env(safe-area-inset-top)) {
body {
padding-bottom: env(safe-area-inset-bottom);
}
.navbar.sticky-top,
.navbar.fixed-top {
padding-top: calc(.5rem + env(safe-area-inset-top));
}
/* Routen ohne Navbar (Login, Wizard, expired.html) brauchen das
top-Padding direkt am Body — sonst klebt der Inhalt unter der Notch. */
body:not(:has(.navbar.sticky-top)):not(:has(.navbar.fixed-top)) {
padding-top: env(safe-area-inset-top);
}
/* Modals im iPhone-PWA (status-bar-style: black-translucent): Header
(btn-close) laege sonst hinter der Statuszeile, Footer-Buttons hinter
dem Home-Indicator. Die Insets sitzen als Padding auf .modal statt als
margin-top auf .modal-dialog: Bootstraps Prozent-Hoehen
(.modal-dialog-scrollable height / .modal-dialog-centered min-height
= calc(100% - 2 * Rand)) beziehen sich auf die Content-Box von .modal
und schrumpfen so automatisch mit. Ein reines margin-top schob den
Dialog nur nach unten — bei scrollbaren Modals (z. B. „An Kolleg:innen
senden“) rutschte die Fusszeile mit den Buttons aus dem Bild
(Issue 2026-05-18, 2026-10-09). Fullscreen-Modals tragen den Inset im
Header (unten). */
.modal:not(:has(.modal-fullscreen, .modal-fullscreen-sm-down, .modal-fullscreen-md-down)) {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* Fullscreen-Modals haben kein margin-top — Inset gehoert ins Header-Padding. */
.modal-fullscreen .modal-header,
.modal-fullscreen-sm-down .modal-header,
.modal-fullscreen-md-down .modal-header {
padding-top: calc(1rem + env(safe-area-inset-top));
}
/* Offcanvas von oben + Toast-Container an top-0 muessen den Inset selbst tragen. */
.offcanvas-top {
padding-top: env(safe-area-inset-top);
}
.toast-container.top-0 {
padding-top: env(safe-area-inset-top);
}
/* Utility fuer eigene fixed/sticky-Top-Elemente:
…
ist iOS-sicher. */
.hl-safe-top {
padding-top: env(safe-area-inset-top);
}
}
/* ------------------------------------------------------------------- */
/* Touch- und iPad-Polish (Std 8 / 13) */
/* ------------------------------------------------------------------- */
/* Mindest-Tap-Target 44x44 px (Std 8.1). Bootstraps Default-Buttons sind
* mit `btn-sm` zu klein fuer Daumen-Bedienung; auf Touch-Geraeten heben
* wir die Mindesthoehe an. */
@media (pointer: coarse) {
.dropdown-item {
min-height: 44px;
padding-top: .65rem;
padding-bottom: .65rem;
}
.btn-sm, .btn {
min-height: 38px;
}
.form-check-input {
min-width: 22px;
min-height: 22px;
}
}
/* iPad-Landscape (1024 px) und groesser: 3 Spalten fuer Page-Karten, etwas
* breitere Sidebar — sonst wird das Grid optisch unausgewogen. */
@media (min-width: 1024px) and (max-width: 1366px) {
.container-fluid > .row > .col-12.col-lg-3 {
flex: 0 0 auto;
width: 22%;
}
.container-fluid > .row > .col-12.col-lg-9 {
flex: 0 0 auto;
width: 78%;
}
}
/* Dashboard-Seitenleiste als Offcanvas-Schublade unter lg (iPad Split View,
* Handy). Die