/* ==========================================================================
   HSMApp · Design-Grundlage (gemeinsam für alle 5 Designs)
   --------------------------------------------------------------------------
   Diese Datei färbt die BESTEHENDEN Seiten der App um (style.css-Klassen,
   Menü aus kern/menu.php, Karten, Tabellen, Formulare, Knöpfe, Hinweise,
   Login). Sie enthält KEINE Farben, sondern nur Platzhalter (--d-...).
   Die Farben selbst stehen in design-1.css … design-5.css.

   Geladen wird sie über kern/design.php – entweder am Ende des <head>
   (Seiten mit kern/header.php) oder aus kern/menu.php heraus.

   Regeln:
   - Jede Regel beginnt mit ":root", das macht sie stärker als die
     seiteneigenen <style>-Blöcke, ohne die Seiten selbst anzufassen.
   - !important nur bei Farben, Hintergründen und Rahmenfarben (weil viele
     Seiten dort selbst !important benutzen) – nie beim Seitenaufbau.
   - Alles steht in @media screen: Ausdrucke bleiben wie bisher.
   ========================================================================== */

/* ---------- Alte Platzhalter aus style.css und menu.php umleiten ---------- */
html:root {
  --hsm-bg-page: var(--d-bg);
  --hsm-bg-card: var(--d-surface-solid);
  --hsm-bg-surface: var(--d-input-bg);
  --hsm-border: var(--d-line);
  --hsm-border-soft: var(--d-line-soft);
  --hsm-text: var(--d-text);
  --hsm-text-muted: var(--d-muted);
  --hsm-text-dim: var(--d-text-2);
  --hsm-accent: var(--d-accent);
  --hsm-accent-strong: var(--d-accent);
  --hsm-gradient: var(--d-grad);
  --hsm-success-bg: color-mix(in srgb, var(--d-ok) 14%, transparent);
  --hsm-success-text: var(--d-ok-text);
  --hsm-success-border: var(--d-ok);
  --hsm-danger-bg: color-mix(in srgb, var(--d-danger) 14%, transparent);
  --hsm-danger-text: var(--d-danger-text);
  --hsm-danger-border: var(--d-danger);
  --hsm-warning-bg: color-mix(in srgb, var(--d-warn) 14%, transparent);
  --hsm-warning-text: var(--d-warn-text);
  --hsm-warning-border: var(--d-warn);
  --nav-bg: var(--d-surface-solid);
  --nav-sub-bg: var(--d-surface-2);
  --nav-text: var(--d-nav-text);
  --nav-text-hover: var(--d-text);
  --nav-accent: var(--d-accent);
  --nav-success: var(--d-ok);
  --nav-danger: var(--d-danger);
  --nav-warning: var(--d-warn);
  --nav-border: var(--d-line);
  /* Standardwerte, falls ein Design etwas nicht festlegt */
  --d-card-bg: var(--d-surface);
  --d-ring: 0 0 0 1px var(--d-line);
  --d-title-font: var(--d-font);
  --d-title-transform: none;
  --d-title-spacing: -.01em;
  --d-btn-font: 650 .9rem var(--d-font);
  --d-btn-transform: none;
  --d-btn-spacing: .01em;
  --d-btn-clip: none;
  --d-nav-font: 550 .86rem var(--d-font);
  --d-nav-transform: none;
  --d-nav-spacing: 0;
  --d-nav-clip: none;
  --d-badge-radius: 99px;
}

@media screen {

/* ---------- Grundfläche ---------- */
html:root {
  color-scheme: var(--d-scheme);
  background: var(--d-page-bg) !important;
  background-color: var(--d-bg) !important;
  background-attachment: fixed !important;
  color: var(--d-text) !important;
  scrollbar-color: var(--d-scrollbar, rgba(127,127,127,.35)) transparent;
}
:root body {
  background: transparent !important;
  color: var(--d-text) !important;
  font-family: var(--d-font) !important;
  -webkit-font-smoothing: antialiased;
}
:root ::selection { background: color-mix(in srgb, var(--d-accent) 35%, transparent); }
:root body :is(h1, h2, h3, h4):not([style*="color"]) { color: var(--d-text) !important; }
:root body :is(h1, h2, h3) { font-family: var(--d-title-font); }
:root :focus-visible { outline-color: var(--d-accent) !important; }

/* ---------- Kopfbalken ---------- */
:root .header-bar {
  background: var(--d-head-bg) !important;
  border-bottom: 1px solid var(--d-line) !important;
  padding: 20px 32px 16px;
  margin-bottom: 30px;
  position: relative;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--d-head-radius, 0);
  box-shadow: var(--d-head-shadow, none);
}
:root .header-bar h1 {
  color: var(--d-text) !important;
  font-family: var(--d-title-font);
  text-transform: var(--d-title-transform);
  letter-spacing: var(--d-title-spacing);
  font-weight: 700;
  font-size: 1.38rem;
  margin: 0 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
/* Marken-Kern vor der Überschrift (Form/Farbe je Design) */
:root .header-bar h1::before {
  content: ""; flex: none;
  width: 30px; height: 30px; border-radius: var(--d-r-sm);
  background: var(--d-grad); box-shadow: var(--d-glow);
}

/* ---------- Menü (kern/menu.php) ---------- */
:root .hsmapp-nav-wrapper {
  font-family: var(--d-font);
  max-width: 1680px; margin: 0 auto 6px;
  background: var(--d-card-bg) !important;
  border: 1px solid var(--d-line) !important;
  border-radius: var(--d-r-lg);
  box-shadow: var(--d-shadow) !important;
}
:root .hsmapp-top-bar { background: transparent !important; padding: 9px 16px; }
@media (min-width: 801px) {
  /* Auf großen Schirmen umbrechen statt seitlich wischen – nichts ist versteckt */
  :root .hsmapp-top-bar { flex-wrap: wrap; row-gap: 6px; }
  :root .hsmapp-top-group { flex-wrap: wrap; row-gap: 6px; }
  :root .hsmapp-admin-bar { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}
:root .hsmapp-admin-bar {
  background: var(--d-surface-2) !important;
  border-top: 1px solid var(--d-line-soft) !important;
  padding: 8px 16px;
}
:root .hsmapp-btn, :root .hsmapp-sub-btn {
  font: var(--d-nav-font);
  text-transform: var(--d-nav-transform);
  letter-spacing: var(--d-nav-spacing);
  clip-path: var(--d-nav-clip);
  border-radius: var(--d-r-btn);
}
:root .hsmapp-btn { color: var(--d-nav-text) !important; background: transparent !important; border-color: transparent !important; }
:root .hsmapp-btn:hover, :root .hsmapp-sub-btn:hover { color: var(--d-text) !important; background: var(--d-hover) !important; }
:root .hsmapp-btn.active, :root .hsmapp-sub-btn.active {
  color: var(--d-nav-active-text) !important;
  background: var(--d-nav-active-bg) !important;
  border-color: var(--d-nav-active-line) !important;
  box-shadow: var(--d-nav-active-glow, none);
}
:root .hsmapp-sub-btn {
  color: var(--d-nav-text) !important;
  background: transparent !important;
  border-top-color: var(--d-line-soft) !important;
  border-right-color: var(--d-line-soft) !important;
  border-bottom-color: var(--d-line-soft) !important;
  font-size: .8rem;
}
:root .hsmapp-sub-btn:not([class*="hsmapp-btn-"]):not([style*="border-left"]) { border-left-color: var(--d-line-soft) !important; }
:root .hsmapp-btn-stempeluhr {
  color: var(--d-ok-text) !important;
  background: color-mix(in srgb, var(--d-ok) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--d-ok) 38%, transparent) !important;
}
:root .hsmapp-btn-stempeluhr:hover { background: color-mix(in srgb, var(--d-ok) 22%, transparent) !important; }
:root .hsmapp-btn-logout {
  color: var(--d-danger-text) !important;
  background: color-mix(in srgb, var(--d-danger) 9%, transparent) !important;
  border-color: color-mix(in srgb, var(--d-danger) 32%, transparent) !important;
}
:root .hsmapp-btn-logout:hover { background: color-mix(in srgb, var(--d-danger) 20%, transparent) !important; }
:root .hsmapp-btn-design { color: var(--d-nav-text) !important; }
:root .hsmapp-timer-badge { font-family: var(--d-mono); font-variant-numeric: tabular-nums; }
:root .ki-badge { background: var(--d-danger) !important; color: #fff !important; font-family: var(--d-font); }

/* ---------- Breitere, luftigere Inhaltsbereiche ---------- */
:root .dashboard-container { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
:root .content-wrapper { max-width: 880px; }
:root .ansicht-wrapper { max-width: 1400px; }
:root .archiv-wrapper { max-width: 1100px; }
:root .ansicht-wrapper .objekt-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }

/* ---------- Karten / Flächen ---------- */
:root :is(.notice-card, .box, .login-box, .card, .glass-box, .empty-box, .task-card, .pool-task-card .task-card-inner,
  .ansicht-wrapper .objekt-kachel, .ansicht-wrapper .eintrag-card, .ansicht-wrapper .akte-header, .ansicht-wrapper .freie-fotos,
  .ansicht-wrapper .search-container, .archiv-card, .admin-wrapper .admin-card, .pf-karte, .ticket-card, .dash-card, .kpi-card,
  .table-card, .filter-card, .filter-box, .form-box, .edit-box, .history-card, .profile-box, .stempel-box, .popup-box,
  .modal-box, .kal-modal-box, .vehicle-card, .hero-stat-card, .zaehler-card, .kunden-card, .city-group-card,
  .objekt-item-card, .kg-karte, .user-filter-card, .route-panel, .board-container, .pool-box, .table-container,
  .no-print-box, .summary-box, .objekt-header-card, .journal-container, .stb-box, .sync-wrapper, .form-neu-anlegen,
  .kunden-rechte-kopieren-box, .kunden-stadt-box, .log-table-wrap, .kachel, .vehicle-hero, .sticky-summary, .zaehler-nr-box) {
  background: var(--d-card-bg) !important;
  color: var(--d-text) !important;
  box-shadow: var(--d-ring), var(--d-shadow) !important;
  border-radius: var(--d-r-lg);
}
/* Tafeln, die aus einer Zeile Inhalt bestehen, nicht zu rund */
:root :is(.task-card, .pool-task-card .task-card-inner) { border-radius: var(--d-r-md); }
:root .notice-card { padding: 22px 24px; gap: 14px; }
:root .ansicht-wrapper .objekt-kachel { border-bottom-color: var(--d-accent) !important; }
:root .ansicht-wrapper .objekt-kachel:hover, :root .admin-wrapper .admin-card:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--d-accent) 55%, transparent), var(--d-shadow), var(--d-glow) !important;
}
:root .admin-wrapper .admin-card { border-top-color: var(--d-accent) !important; }
:root .admin-wrapper .admin-card-title { color: var(--d-text) !important; }
:root .admin-wrapper .admin-card-desc { color: var(--d-muted) !important; }

/* Innere, etwas abgesetzte Flächen */
:root :is(.notice-meta-grid, .reassign-action-bar, .ansicht-wrapper .eintrag-notiz, .archiv-wrapper .bericht-box,
  .content-wrapper .checkbox-container, .gallery-item, .pool-header, .pool-filter-box, .ma-filter-bar, .column-header,
  .action-sub-header, .sidebar-pool, .main-workspace, .layout-container, .meta-info, .ansicht-wrapper .stadt-header,
  .pf-blase, .rechte-item, .admin-wrapper details, .kanban-column, .status-btn-opt, .titel-filter-switch,
  .checkbox-group, .checkbox-scroll-box, .team-scroll-box, .selection-scrollbox, .file-item, .queue-item, .log-item,
  .stop-item, .route-item, .item-row, .pill-item, .interval-pill-box, .schicht-info, .beschreibung-box, .mail-inhalt-box,
  .kontroll-tabelle tr:nth-child(even), .board-header, .pool-city-list, .foto-box, .empty-hint) {
  background: var(--d-surface-2) !important;
  color: var(--d-text);
}
:root .drag-handle { background: var(--d-surface-2) !important; color: var(--d-muted) !important; border-color: var(--d-line) !important; }
:root .kanban-dropzone { background: color-mix(in srgb, var(--d-bg) 55%, transparent) !important; }
:root .pf-blase.ich { background: color-mix(in srgb, var(--d-accent) 14%, var(--d-surface-solid)) !important; border-color: color-mix(in srgb, var(--d-accent) 40%, transparent) !important; }
:root .pf-faden { color: var(--d-text) !important; }
:root .pf-faden:hover { background: var(--d-hover) !important; }
:root .pf-faden.an { background: var(--d-surface-2) !important; border-color: color-mix(in srgb, var(--d-accent) 55%, transparent) !important; }
:root .pf-faden.neu strong::before { color: var(--d-accent) !important; }
:root .pf-filter a { color: var(--d-muted) !important; }
:root .pf-filter a.an { background: var(--d-nav-active-bg) !important; color: var(--d-nav-active-text) !important; }
:root .pf-marke { background: var(--d-surface-2) !important; color: var(--d-text-2) !important; border: 1px solid var(--d-line); }
:root .pf-klein, :root .meta-label, :root .task-meta, :root .eintrag-meta, :root .archiv-meta { color: var(--d-muted) !important; }
:root .meta-val:not([style*="color"]) { color: var(--d-text) !important; }
:root .section-title { color: var(--d-text) !important; font-family: var(--d-title-font); text-transform: var(--d-title-transform); letter-spacing: var(--d-title-spacing); }

/* Hochladen-Feld */
:root :is(.drop-zone, .drop-zone-mini) {
  background: color-mix(in srgb, var(--d-accent) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--d-accent) 50%, var(--d-line)) !important;
  color: var(--d-accent) !important;
  border-radius: var(--d-r-md);
}
:root :is(.drop-zone, .drop-zone-mini):hover, :root .drop-zone.dragover { background: color-mix(in srgb, var(--d-accent) 13%, transparent) !important; }

/* ---------- Formulare ---------- */
:root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="image"]), select, textarea) {
  background-color: var(--d-input-bg) !important;
  color: var(--d-text) !important;
  border-color: var(--d-line-strong) !important;
  color-scheme: var(--d-scheme);
  border-radius: var(--d-r-sm);
  font-family: inherit;
}
:root :is(input, select, textarea)::placeholder { color: var(--d-muted) !important; opacity: .85; }
:root :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--d-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-accent) 22%, transparent) !important;
  outline: none;
}
:root select option, :root select optgroup { background: var(--d-surface-solid); color: var(--d-text); }
:root :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--d-accent); }
:root input[type="file"] { color: var(--d-muted) !important; background-color: var(--d-input-bg) !important; border-color: var(--d-line-strong) !important; }
:root input[type="file"]::file-selector-button {
  background: var(--d-surface-2); color: var(--d-text); border: 1px solid var(--d-line-strong);
  border-radius: var(--d-r-sm); padding: 6px 12px; margin-right: 10px; cursor: pointer; font: inherit;
}
:root label:not([style*="color"]) { color: inherit; }

/* ---------- Knöpfe ---------- */
/* Hauptknöpfe (bisher blauer Verlauf) bekommen den Design-Verlauf.
   Knöpfe mit eigener Farbe im style-Attribut (z.B. orange "Neu vergeben")
   behalten ihre Farbe. */
:root :is(.btn-quicklink, .btn-action-submit, .btn-new-task-large, .btn-switch-v2, button.btn-gross, .btn-search,
  .login-box button, .dw button, .pf button, .pf .knopf:not(.leise), .modal-nav button, input[type="submit"],
  .admin-wrapper button:not(.btn-edit):not(.btn-rot):not(.btn-gelb):not(.btn-pw-refresh),
  .content-wrapper button:not(.btn-delete-img):not(.status-btn-opt):not([type="button"])):not([style*="background"]) {
  background: var(--d-grad) !important;
  color: var(--d-on-accent) !important;
  border-color: transparent !important;
  box-shadow: var(--d-glow) !important;
  border-radius: var(--d-r-btn);
  font: var(--d-btn-font);
  text-transform: var(--d-btn-transform);
  letter-spacing: var(--d-btn-spacing);
  clip-path: var(--d-btn-clip);
}
:root .btn-quicklink[style*="background"], :root .pf .knopf.leise {
  background: var(--d-surface-2) !important;
  color: var(--d-text) !important;
  border: 1px solid var(--d-line-strong) !important;
  border-radius: var(--d-r-btn);
  font: var(--d-btn-font);
  text-transform: var(--d-btn-transform);
  letter-spacing: var(--d-btn-spacing);
}
:root .btn-quicklink { border-radius: var(--d-r-btn); font: var(--d-btn-font); text-transform: var(--d-btn-transform); letter-spacing: var(--d-btn-spacing); }
:root .btn-dismiss {
  background: transparent !important; color: var(--d-muted) !important;
  border-color: var(--d-line-strong) !important; border-radius: var(--d-r-sm);
}
:root .btn-dismiss:hover { background: color-mix(in srgb, var(--d-danger) 18%, transparent) !important; color: var(--d-danger-text) !important; border-color: var(--d-danger) !important; }
:root .btn-edit { color: var(--d-accent) !important; }
:root .admin-wrapper button.btn-rot { background: var(--d-danger) !important; color: #fff !important; }
:root .admin-wrapper button.btn-gelb { background: var(--d-warn) !important; color: var(--d-on-warn) !important; }
:root :is(.btn-maps, .content-wrapper .btn-maps, .ansicht-wrapper .btn-maps) {
  background: color-mix(in srgb, var(--d-ok) 16%, transparent) !important;
  color: var(--d-ok-text) !important;
  border: 1px solid color-mix(in srgb, var(--d-ok) 45%, transparent) !important;
  border-radius: var(--d-r-btn);
}
:root .ansicht-wrapper .btn-zurueck, :root .btn-back, :root .back-btn {
  background: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-line-strong) !important; border-radius: var(--d-r-btn);
}
:root .status-btn-opt { border-color: var(--d-line-strong) !important; color: var(--d-text) !important; border-radius: var(--d-r-md); }
:root .status-btn-opt.active-erledigt { background: color-mix(in srgb, var(--d-ok) 18%, transparent) !important; border-color: var(--d-ok) !important; color: var(--d-ok-text) !important; }
:root .status-btn-opt.active-nicht { background: color-mix(in srgb, var(--d-danger) 18%, transparent) !important; border-color: var(--d-danger) !important; color: var(--d-danger-text) !important; }

/* Reiter (Zentrale) */
:root .admin-wrapper .tab-nav { border-bottom-color: var(--d-accent) !important; }
:root .admin-wrapper .tab-link { background: var(--d-surface-2) !important; color: var(--d-muted) !important; }
:root .admin-wrapper .tab-link:hover { color: var(--d-text) !important; background: var(--d-hover) !important; }
:root .admin-wrapper .tab-link.active { background: var(--d-grad) !important; color: var(--d-on-accent) !important; }
:root .admin-wrapper summary { color: var(--d-accent) !important; }
:root .titel-filter-option.active { background: var(--d-accent) !important; color: var(--d-on-accent) !important; }

/* ---------- Tabellen ---------- */
:root th {
  background: var(--d-surface-2) !important;
  color: var(--d-muted) !important;
  border-color: var(--d-line) !important;
  font-family: var(--d-th-font, inherit);
  letter-spacing: .06em;
}
:root td { border-color: var(--d-line-soft) !important; }
:root tr:hover > td { background-color: var(--d-hover); }
:root .admin-wrapper :is(th, td) { color: var(--d-text); }
:root .admin-wrapper th { color: var(--d-muted) !important; }

/* ---------- Hinweise ---------- */
:root :is(.erfolg, .notice-success, .alert-success, .meldung-erfolg, .success, .msg-success) {
  background: color-mix(in srgb, var(--d-ok) 13%, transparent) !important;
  color: var(--d-ok-text) !important;
  border-color: color-mix(in srgb, var(--d-ok) 45%, transparent) !important;
  border-radius: var(--d-r-sm);
}
:root :is(.fehler, .notice-error, .alert-danger, .alert-error, .meldung-fehler, .error, .msg-error) {
  background: color-mix(in srgb, var(--d-danger) 13%, transparent) !important;
  color: var(--d-danger-text) !important;
  border-color: color-mix(in srgb, var(--d-danger) 45%, transparent) !important;
  border-radius: var(--d-r-sm);
}
:root :is(.hinweis, .alert-info, .info-box) {
  background: color-mix(in srgb, var(--d-accent) 11%, transparent) !important;
  color: var(--d-text) !important;
  border-color: color-mix(in srgb, var(--d-accent) 40%, transparent) !important;
  border-radius: var(--d-r-sm);
}
:root :is(.akte-notiz, .alert-warning, .warnung) {
  background: color-mix(in srgb, var(--d-warn) 13%, transparent) !important;
  color: var(--d-warn-text) !important;
  border-color: color-mix(in srgb, var(--d-warn) 45%, transparent) !important;
}

/* ---------- Abzeichen ---------- */
:root :is(.badge-green, .badge-red, .badge-rhythmus) { border-radius: var(--d-badge-radius); font-family: var(--d-badge-font, inherit); }
:root .badge-green { background: color-mix(in srgb, var(--d-ok) 14%, transparent) !important; color: var(--d-ok-text) !important; border-color: color-mix(in srgb, var(--d-ok) 45%, transparent) !important; }
:root .badge-red { background: color-mix(in srgb, var(--d-danger) 14%, transparent) !important; color: var(--d-danger-text) !important; border-color: color-mix(in srgb, var(--d-danger) 45%, transparent) !important; }
:root .badge-rhythmus { background: color-mix(in srgb, var(--d-accent) 12%, transparent) !important; color: var(--d-accent) !important; border-color: color-mix(in srgb, var(--d-accent) 40%, transparent) !important; }

/* ---------- Login ---------- */
:root .login-box { padding: 34px 30px 30px; }
:root .login-box::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 20px; background: var(--d-grad); box-shadow: var(--d-glow);
}
:root .login-box h2 { font-family: var(--d-title-font); text-transform: var(--d-title-transform); letter-spacing: var(--d-title-spacing); }
:root .footer-links a { color: var(--d-muted) !important; }
:root .footer-links a:hover { color: var(--d-accent) !important; }

/* ---------- Bilder-Vorschau / Overlays ---------- */
:root .autocomplete-items, :root .autocomplete-dropdown {
  background: var(--d-surface-solid) !important; border-color: var(--d-line) !important; color: var(--d-text) !important;
  box-shadow: var(--d-shadow-lg, var(--d-shadow)) !important;
}
:root .autocomplete-items div { border-color: var(--d-line-soft) !important; }
:root .autocomplete-items div:hover { background: var(--d-hover) !important; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   HANDY (bis 800 px): Leiste unten mit 4 Zielen + "Mehr"-Blatt.
   Die Leiste baut assets/js/design-mobil.js aus den Links von menu.php.
   Ohne JavaScript bleibt das bisherige Menü sichtbar.
   ========================================================================== */
.hsm-tabbar, .hsm-mehr, .hsm-schleier { display: none; }
@media (max-width: 800px) {
  :root .header-bar { padding: calc(10px + env(safe-area-inset-top)) 14px 10px; margin-bottom: 18px; }
  :root .header-bar h1 { font-size: 1.08rem; margin: 0; gap: 10px; }
  :root .header-bar h1::before { width: 26px; height: 26px; }
  html.hsm-tabbar-an .hsmapp-nav-wrapper { display: none !important; }
  html.hsm-tabbar-an body { padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  :root .dashboard-container { padding-left: 12px; padding-right: 12px; }
  :root .notice-card { padding: 16px; }
  :root .section-title { font-size: 1.05rem; }

  .hsm-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    height: calc(66px + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom);
    background: var(--d-panel-solid); border-top: 1px solid var(--d-line);
    box-shadow: 0 -10px 30px rgba(0,0,0,.2);
    font-family: var(--d-font);
  }
  .hsm-tabbar a, .hsm-tabbar button {
    flex: 1; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; color: var(--d-muted); text-decoration: none;
    font: 600 .7rem var(--d-font); border-radius: var(--d-r-sm); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hsm-tabbar .hsm-tab-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hsm-tab-ic { font-size: 1.32rem; line-height: 1; filter: grayscale(.35); }
  .hsm-mehr-ic { display: grid; gap: 4px; width: 22px; padding: 4px 0; }
  .hsm-mehr-ic i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .hsm-tabbar .is-on { color: var(--d-accent); }
  .hsm-tabbar .is-on .hsm-tab-ic { filter: none; }
  .hsm-tabbar .is-on::before {
    content: ""; position: absolute; top: -6px; left: 50%; width: 28px; margin-left: -14px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--d-accent); box-shadow: 0 0 10px var(--d-accent);
  }
  .hsm-zahl {
    position: absolute; top: 2px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    display: inline-grid; place-items: center;
    font: 700 .62rem var(--d-font); color: #fff !important; background: var(--d-danger);
  }

  .hsm-schleier {
    display: block; position: fixed; inset: 0; z-index: 9001; background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s;
  }
  .hsm-mehr {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9002;
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: var(--d-panel-solid); border-top: 1px solid var(--d-line);
    box-shadow: 0 -20px 60px rgba(0,0,0,.4); color: var(--d-text); font-family: var(--d-font);
    transform: translateY(105%); visibility: hidden;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s;
  }
  html.hsm-mehr-offen .hsm-mehr { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  html.hsm-mehr-offen .hsm-schleier { opacity: 1; visibility: visible; transition: opacity .2s; }
  html.hsm-mehr-offen body { overflow: hidden; }
  .hsm-mehr-griff { width: 42px; height: 5px; border-radius: 3px; background: var(--d-line-strong); margin: 0 auto 10px; }
  .hsm-mehr h4 {
    margin: 16px 2px 8px; font: 600 .7rem var(--d-mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--d-muted) !important;
  }
  .hsm-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hsm-kacheln a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 82px; padding: 8px 6px; text-align: center; text-decoration: none;
    border-radius: var(--d-r-md); background: var(--d-surface-2); border: 1px solid var(--d-line-soft);
    color: var(--d-text) !important; font: 600 .76rem/1.2 var(--d-font);
  }
  .hsm-kacheln a.is-on { border-color: var(--d-accent); box-shadow: 0 0 0 1px var(--d-accent) inset; }
  .hsm-kacheln .hsm-tab-ic { font-size: 1.45rem; filter: none; }
  .hsm-kacheln .hsm-zahl { top: 6px; left: auto; right: 6px; }
  .hsm-mehr-fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .hsm-mehr-fuss a {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: var(--d-r-btn);
    border: 1px solid var(--d-line-strong); color: var(--d-text) !important; text-decoration: none; font: 600 .86rem var(--d-font);
  }
  .hsm-mehr-fuss a.hsm-abmelden { color: var(--d-danger-text) !important; border-color: color-mix(in srgb, var(--d-danger) 45%, transparent); }
  .hsm-mehr-fuss b { font: 600 .8rem var(--d-mono); font-variant-numeric: tabular-nums; }
}

} /* Ende @media screen */