/* ==========================================================================
   lebenshilfe.board — Lebenshilfe Design System (Bootstrap 5 overlay)
   Source of truth: /docs/lebenshilfe-design-system.json
                    /docs/lebenshilfe-design-concept.md
   Brand: color values and typography extracted 2026-07-16 directly from the
   live CSS of https://www.lebenshilfe-nw.de (no guesses).
   Character: friendly, social, low-barrier. Blue #18619A as primary color,
   warm section colors (green/orange/yellow/berry) as accents, softly rounded
   edges (--lh-radius) with subtle elevation (--lh-shadow*) — "best of both"
   from the brand and the calm, modern look of the ticket system. Barlow Semi
   Condensed as the single type family.
   ========================================================================== */

:root {
  /* ---- Lebenshilfe brand tokens (from the lebenshilfe-nw.de :root) ---- */
  --lh-blue-dark:  #18619A;  /* brand blue */
  --lh-blue-light: #56B0E0;  /* brand blue, light */
  --lh-blue-logo:  #0069B4;  /* brush-stroke figure in the logo */
  --lh-blue-grey:  #90A6C9;  /* secondary border/surface color */
  --lh-green:      #B0C64D;  /* section color "Angebote" */
  --lh-orange:     #ECA941;  /* section color "Jobs & Karriere" */
  --lh-yellow:     #ECD24C;  /* section color "Helfen & Spenden" */
  --lh-red:        #BF345F;  /* theme color berry (accent/signal) */

  /* Pastel tints (the website's 25%-tint principle, for surfaces) */
  --lh-blue-bg:    #E3EDF5;
  --lh-green-bg:   #EFF3DB;
  --lh-orange-bg:  #FBEFDA;
  --lh-yellow-bg:  #FBF6D9;
  --lh-red-bg:     #F5E1E8;

  /* Grey scale (neutral; 300 = website grey #D5D5D5, 900 = logo black) */
  --lh-grey-50:   #F7F8FA;
  --lh-grey-100:  #EFF1F4;
  --lh-grey-200:  #E2E5E9;
  --lh-grey-300:  #D5D5D5;
  --lh-grey-400:  #A9AFB6;
  --lh-grey-500:  #6E747B;
  --lh-grey-700:  #4A4F55;
  --lh-grey-800:  #303338;
  --lh-grey-900:  #1D1D1B;
  --lh-white:     #FFFFFF;   /* pure white (text on dark surfaces) — never theme-flipped */
  --lh-surface:   #FFFFFF;   /* card/panel/input background — flips in dark mode */

  /* Status (section colors mapped semantically; text colors darkened for contrast) */
  --lh-success:    #5C7A22;  /* darkened Lebenshilfe green */
  --lh-success-bg: var(--lh-green-bg);
  --lh-warning:    #A96F14;  /* darkened Lebenshilfe orange */
  --lh-warning-bg: var(--lh-orange-bg);
  --lh-error:      #BF345F;  /* berry */
  --lh-error-bg:   var(--lh-red-bg);
  --lh-info:       #18619A;  /* dark blue */
  --lh-info-bg:    var(--lh-blue-bg);
  --lh-yellow-fg:  #8A7415;  /* darkened yellow — readable on the yellow tint */

  /* ---- Interaction colour ----
     Everything clickable uses --lh-primary, never --lh-blue-dark directly,
     because the interaction colour FLIPS with the theme: the dark mode runs on
     a near-black canvas where the dark brand blue would read as mud. It brightens
     to the brand's light blue there (and the label on it turns dark) — the same
     move the ticket system makes. Change it here, not per component. */
  --lh-primary:          var(--lh-blue-dark);
  --lh-primary-fg:       #FFFFFF;
  --lh-primary-hover:    var(--lh-blue-light);
  --lh-primary-hover-fg: #FFFFFF;

  /* Sidebar widths (for the collapse animation) */
  --lh-sidebar-width: 260px;
  --lh-sidebar-width-collapsed: 72px;

  /* Corner radius — "best of both": the brand keeps its colours and type, but
     corners soften to the calm, modern feel of the ticket-system reference.
     (Reverses the earlier strict border-radius: 0.) One place to retune. */
  --lh-radius:      0.5rem;    /* cards, modals, dropdowns, alerts, panels */
  --lh-radius-sm:   0.375rem;  /* buttons, inputs, selects, badges, controls */
  --lh-radius-lg:   0.75rem;   /* hero / feature cards (auth) */
  --lh-radius-pill: 999px;

  /* Soft elevation — subtle and calm, not the heavy shadow stacks the brand
     avoids. Surfaces lift just enough to read as modern. */
  --lh-shadow-sm: 0 1px 2px rgba(24, 40, 64, 0.05), 0 1px 3px rgba(24, 40, 64, 0.06);
  --lh-shadow:    0 2px 8px rgba(24, 40, 64, 0.07), 0 1px 2px rgba(24, 40, 64, 0.06);
  --lh-shadow-lg: 0 14px 40px rgba(24, 40, 64, 0.14);

  /* Neutral system sans — matches the ticket-system reference (no custom font,
     system-ui / Segoe UI). Calmer and less "branded" than the earlier condensed
     Barlow face; the shared type family for headings and body alike. */
  --lh-font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --lh-font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Bootstrap 5 CSS variable overrides ---- */
  --bs-primary:            #18619A;
  --bs-primary-rgb:        24, 97, 154;
  --bs-secondary:          #6E747B;
  --bs-secondary-rgb:      110, 116, 123;
  --bs-body-font-family:   var(--lh-font-body);
  --bs-body-font-size:     1rem;      /* deliberately generous — accessibility */
  --bs-body-line-height:   1.6;
  --bs-body-color:         var(--lh-grey-700);
  --bs-body-bg:            var(--lh-white);
  --bs-border-radius:      var(--lh-radius);
  --bs-border-radius-sm:   var(--lh-radius-sm);
  --bs-border-radius-lg:   var(--lh-radius-lg);
  --bs-border-radius-xl:   var(--lh-radius-lg);
  --bs-border-radius-2xl:  var(--lh-radius-lg);
  --bs-border-radius-pill: var(--lh-radius-pill);
  --bs-border-color:       var(--lh-grey-200);
  --bs-heading-color:      var(--lh-grey-900);
  --bs-link-color:         var(--lh-primary);
  --bs-link-hover-color:   var(--lh-primary-hover);
  --bs-link-color-rgb:     24, 97, 154;
}

/* ==========================================================================
   DARK MODE — central token switch. The whole app styles against --lh-*
   tokens, so flipping them here re-themes every component. Activated via
   data-bs-theme="dark" on <html> (user preference: hell/dunkel/system).
   Brand accents (blue, section colors, sidebar) stay identical in both modes.
   ========================================================================== */

[data-bs-theme="dark"] {
  /* Inverted neutral scale (50 = page background, 900 = headings).
     Values measured from the ticket-system reference, not guessed: it runs on a
     near-black canvas (#0e0e11) with barely-raised cards (#151519). An earlier,
     lighter grey scale made the whole app look washed out next to it. */
  --lh-grey-50:   #0E0E11;   /* page background */
  --lh-grey-100:  #27272A;   /* raised: nav hover/active, table hover */
  --lh-grey-200:  #2C2C30;   /* borders */
  --lh-grey-300:  #3F3F46;   /* input borders */
  --lh-grey-400:  #71717A;
  --lh-grey-500:  #A1A1AA;   /* muted text */
  --lh-grey-700:  #D4D4D8;   /* body text */
  --lh-grey-800:  #E4E4E7;
  --lh-grey-900:  #F5F5F5;   /* headings */
  --lh-surface:   #151519;   /* cards, sidebar, header */

  /* The interaction colour brightens; the label on it turns dark. */
  --lh-primary:          var(--lh-blue-light);
  --lh-primary-fg:       #06212F;
  --lh-primary-hover:    #8CCBEB;
  --lh-primary-hover-fg: #06212F;

  /* Dark tints (same hue families, dark surfaces) */
  --lh-blue-bg:   #16293A;
  --lh-green-bg:  #232B14;
  --lh-orange-bg: #332711;
  --lh-yellow-bg: #332E12;
  --lh-red-bg:    #33141F;

  /* Semantic text colors lightened for contrast on dark tints */
  --lh-success:   #A5C45E;
  --lh-warning:   #E5A94F;
  --lh-error:     #E06287;
  --lh-info:      #56B0E0;
  --lh-yellow-fg: #E5CE5F;

  /* Deeper shadows on dark surfaces so elevation stays legible */
  --lh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --lh-shadow:    0 2px 10px rgba(0, 0, 0, 0.45);
  --lh-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  --bs-body-color:       var(--lh-grey-700);
  --bs-body-bg:          var(--lh-grey-50);
  --bs-border-color:     var(--lh-grey-200);
  --bs-heading-color:    var(--lh-grey-900);
  --bs-link-color:       #56B0E0;
  --bs-link-hover-color: #8CCBEB;
}

[data-bs-theme="dark"] .lh-auth-body {
  background: linear-gradient(135deg, #14212E 0%, var(--lh-grey-50) 52%, #16181C 100%);
}
/* The dark mode's select caret must brighten with the interaction colour —
   the dark-blue one disappears on a near-black input. */
[data-bs-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2356B0E0'%3e%3cpath d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

body {
  font-family: var(--lh-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lh-grey-700);
  background: var(--lh-grey-50);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lh-primary); color: var(--lh-primary-fg); }

/* Body links: bold + blue (website pattern) */
a { color: var(--lh-primary); font-weight: 700; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--lh-primary-hover); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  color: var(--lh-grey-900);
  margin-top: 0;
}

/* Normal casing throughout (ticket-system style); hierarchy via size + weight */
h1, .h1 { font-size: 1.75rem;  line-height: 1.2;  letter-spacing: -0.01em; }
h2, .h2 { font-size: 1.5rem;   line-height: 1.2; }
h3, .h3 { font-size: 1.25rem;  line-height: 1.25; }
h4, .h4 { font-size: 1.125rem; line-height: 1.3; }
h5, .h5 { font-size: 1rem;     line-height: 1.35; }
h6, .h6 { font-size: 0.875rem; line-height: 1.5; }

/* Page title — rendered by the shell into the CONTENT area (registry-driven),
   not into the header bar: a page announces itself where the content starts. */
.lh-page-title {
  font-family: var(--lh-font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lh-grey-900);
  margin: 0 0 0.25rem;
}

/* Segmented switch (lh-segmented): a small set of mutually exclusive views,
   e.g. Aktiv/Archiv. Deliberately quieter than tabs or a pair of buttons — a
   muted trough with the active item raised onto the surface. */
.lh-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--lh-grey-100);
  border-radius: var(--lh-radius);
}
.lh-segmented > button {
  border: 0;
  background: transparent;
  color: var(--lh-grey-500);
  font-family: var(--lh-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: var(--lh-radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lh-segmented > button:hover { color: var(--lh-grey-900); }
.lh-segmented > button[aria-pressed="true"] {
  background: var(--lh-surface);
  color: var(--lh-grey-900);
  box-shadow: var(--lh-shadow-sm);
}
.lh-segmented > button:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 1px; }

/* Micro label / eyebrow */
.lh-label, .text-eyebrow {
  font-family: var(--lh-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--lh-grey-500);
  display: inline-block;
}

/* Strong, visible focus styles (core accessibility principle of the website) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lh-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   LAYOUT: sidebar + main wrapper
   ========================================================================== */

@media (min-width: 768px) {
  .main-wrapper {
    margin-left: var(--lh-sidebar-width);
    transition: margin-left 0.25s cubic-bezier(.36, .43, .24, .95);
  }
  body.lh-sidebar-collapsed .main-wrapper {
    margin-left: var(--lh-sidebar-width-collapsed);
  }
}
@media (max-width: 767.98px) {
  .main-wrapper { padding-top: 56px; }
}

/* ==========================================================================
   SIDEBAR / NAVBAR (Lebenshilfe blue, yellow as the active accent)
   ========================================================================== */

.lh-sidebar,
.lh-offcanvas {
  background-color: var(--lh-surface) !important;
}
.lh-sidebar { border-right: 1px solid var(--lh-grey-200); }
.lh-mobile-nav { background-color: var(--lh-surface) !important; }

.lh-sidebar {
  width: var(--lh-sidebar-width);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.25s cubic-bezier(.36, .43, .24, .95);
}

.lh-sidebar.lh-collapsed {
  width: var(--lh-sidebar-width-collapsed);
  /* Collapsed: tooltips must be allowed to escape the sidebar */
  overflow: visible;
}

.lh-sidebar .lh-brand,
.lh-mobile-nav .lh-brand,
.lh-offcanvas .lh-brand {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  color: var(--lh-grey-900);
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lh-brand-sub {
  font-family: var(--lh-font-body);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--lh-grey-500);
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lh-logo-img {
  max-height: 34px;
  width: auto;
  display: block;
  /* Light neutral sidebar now: show the logo in its own colours. */
  transition: max-height 0.25s ease;
}
/* On dark surfaces the logo (blue figure + dark wordmark) would vanish — flip it
   to white. Applies to the sidebar/brand logo and the auth-card logo. */
[data-bs-theme="dark"] .lh-logo-img,
[data-bs-theme="dark"] .lh-auth-logo {
  filter: brightness(0) invert(1);
}

/* Collapsed: hide brand text + subtitle */
.lh-sidebar.lh-collapsed .lh-brand,
.lh-sidebar.lh-collapsed .lh-brand-sub {
  opacity: 0;
  visibility: hidden;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.lh-sidebar.lh-collapsed .lh-brand-block {
  padding: 14px 8px !important;
}

.lh-sidebar.lh-collapsed .lh-logo-img {
  max-height: 30px;
  margin-bottom: 0 !important;
}

.lh-sidebar .nav-link,
.lh-offcanvas .nav-link {
  font-family: var(--lh-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lh-grey-500) !important;
  transition: background-color 0.15s ease, color 0.15s ease,
              padding 0.25s cubic-bezier(.36, .43, .24, .95);
  border-radius: var(--lh-radius-sm);
  margin: 1px 8px;
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
}

.lh-sidebar .nav-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  /* In sync with the sidebar width (same duration & easing). */
  max-width: 210px;
  opacity: 1;
  transition: max-width 0.25s cubic-bezier(.36, .43, .24, .95),
              opacity 0.25s cubic-bezier(.36, .43, .24, .95);
}

.lh-sidebar.lh-collapsed .nav-link {
  justify-content: center;
  padding: 14px 0;
  gap: 0 !important;
  position: relative;
  overflow: visible; /* hover tooltip may overflow */
}

/* Collapsed: label shrinks + fades in sync with the sidebar width. */
.lh-sidebar.lh-collapsed .nav-link-label {
  max-width: 0;
  opacity: 0;
}

/* Collapsed: hover tooltip from a pseudo element (based on aria-label). */
.lh-sidebar.lh-collapsed .nav-link[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  padding: 6px 12px;
  background: var(--lh-grey-900);
  color: var(--lh-surface);
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  border-radius: var(--lh-radius-sm);
  box-shadow: var(--lh-shadow-lg);
  transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
}

.lh-sidebar.lh-collapsed .nav-link[aria-label]:hover::after,
.lh-sidebar.lh-collapsed .nav-link[aria-label]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(2px);
}

@media (max-width: 767.98px) {
  .lh-sidebar.lh-collapsed .nav-link[aria-label]::after { display: none; }
}

.lh-sidebar .nav-link:hover,
.lh-offcanvas .nav-link:hover {
  background-color: var(--lh-grey-100) !important;
  color: var(--lh-grey-900) !important;
}

/* Active nav item: subtle neutral pill (ticket-system style) */
.lh-sidebar .nav-link.active,
.lh-offcanvas .nav-link.active {
  background-color: var(--lh-grey-100) !important;
  color: var(--lh-grey-900) !important;
  font-weight: 600;
}

.lh-sidebar .nav-link:focus-visible,
.lh-offcanvas .nav-link:focus-visible {
  outline: 2px solid var(--lh-primary);
  outline-offset: -2px;
}

.lh-sidebar .nav-link i,
.lh-offcanvas .nav-link i {
  font-size: 1rem;
  opacity: 0.75;
  flex-shrink: 0;
  transition: font-size 0.25s cubic-bezier(.36, .43, .24, .95);
}

.lh-sidebar.lh-collapsed .nav-link i {
  font-size: 1.25rem;
}

/* Collapsible nav groups (e.g. "Konfiguration" with child pages) */
.lh-nav-group { cursor: pointer; }
.lh-nav-caret {
  font-size: 0.7rem !important;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.lh-nav-group[aria-expanded="true"] .lh-nav-caret { transform: rotate(180deg); }
.lh-nav-children { background: var(--lh-grey-50); }
.lh-nav-children .nav-link { padding-left: 44px; font-size: 0.875rem; }
.lh-sidebar.lh-collapsed .lh-nav-caret { display: none; }
.lh-sidebar.lh-collapsed .lh-nav-children .nav-link { padding-left: 0; }

/* Divider between regular and admin pages in the navigation */
.lh-nav-divider {
  font-family: var(--lh-font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lh-grey-400);
  border-top: 1px solid var(--lh-grey-200);
  margin: 14px 20px 6px;
  padding-top: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.lh-sidebar.lh-collapsed .lh-nav-divider {
  font-size: 0;
  margin: 12px 12px 6px;
  padding-top: 6px;
}

/* Sidebar footer (collapse toggle + version) */
.lh-sidebar-footer {
  border-top: 1px solid var(--lh-grey-200);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lh-sidebar-toggle {
  background: transparent;
  border: 1px solid var(--lh-grey-300);
  color: var(--lh-grey-500);
  font-family: var(--lh-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 8px 12px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  border-radius: var(--lh-radius-sm) !important;
}

.lh-sidebar-toggle:hover {
  background: var(--lh-grey-50);
  color: var(--lh-grey-900);
  border-color: var(--lh-grey-400);
}

.lh-sidebar-toggle i {
  font-size: 1rem;
  transition: transform 0.25s cubic-bezier(.36, .43, .24, .95);
}

.lh-sidebar.lh-collapsed .lh-sidebar-toggle { padding: 10px 0; }
.lh-sidebar.lh-collapsed .lh-sidebar-toggle .lh-sidebar-toggle-label { display: none; }
.lh-sidebar.lh-collapsed .lh-sidebar-toggle i { transform: rotate(180deg); }

.lh-sidebar-version {
  font-family: var(--lh-font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--lh-grey-400);
  text-align: center;
  padding: 4px 8px 2px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.lh-sidebar.lh-collapsed .lh-sidebar-version {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

/* Desktop header: surface with the website's grey bottom edge */
.main-wrapper > header {
  background: var(--lh-surface) !important;
  border-bottom: 1px solid var(--lh-grey-200) !important;
  height: 60px;
  box-shadow: var(--lh-shadow-sm);
}

.main-wrapper > header h5 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

.lh-header-date {
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--lh-grey-500);
}

/* Mobile navbar */
.navbar.lh-mobile-nav {
  background-color: var(--lh-surface) !important;
  border-bottom: 1px solid var(--lh-grey-200);
}
.navbar.lh-mobile-nav .navbar-brand {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--lh-grey-900);
}

/* ==========================================================================
   BREADCRUMBS (registry-driven, rendered by the shell)
   ========================================================================== */

.lh-breadcrumb-nav { margin-bottom: 1rem; }
.lh-breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
}
.lh-breadcrumb .breadcrumb-item { color: var(--lh-grey-500); }
.lh-breadcrumb .breadcrumb-item a { color: var(--lh-primary); font-weight: 600; }
.lh-breadcrumb .breadcrumb-item a:hover { color: var(--lh-primary-hover); }
.lh-breadcrumb .breadcrumb-item.active { color: var(--lh-grey-900); }
.lh-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--lh-grey-400);
  font-weight: 700;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: var(--lh-surface);
  border: 1px solid var(--lh-grey-200);
  border-radius: var(--lh-radius) !important;
  box-shadow: var(--lh-shadow-sm);
}

.card-header {
  background: var(--lh-surface);
  border-bottom: 1px solid var(--lh-grey-200);
  padding: 1rem 1.5rem;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  color: var(--lh-grey-900);
}

.card-body { padding: 1.5rem; }

.card-footer {
  background: var(--lh-grey-50);
  border-top: 1px solid var(--lh-grey-200);
  padding: 0.875rem 1.5rem;
}

/* Banner ribbon: the website's signature component pattern — a colored label
   band overhanging the card's left edge, forming a clipped corner below.
   Color variants = section colors. Reusable on any card. */
/* Kartentitel mit Bereichsfarben-Akzent.
   Ersetzt das frühere Banner-Ribbon (farbiges Vollflächen-Band in Versalien).
   Das brach zwei eigene Regeln: „keine durchgängigen Großbuchstaben" (Prinzip 5)
   und „Bereichsfarben sind Akzent, nicht Flächenfüller" (Anti-Patterns). Es
   stammte aus der markenlastigen Optik vor der Neuausrichtung und hat sie nur
   überlebt, weil es damals niemand benutzt hat.
   Die Farbe bleibt und behält ihre Bedeutung — als schmale Kante, genau das
   Device, das die KPI-Kacheln und der Hero schon verwenden. */
.lh-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;          /* .card ist flex-column: sonst gestreckt */
  max-width: 100%;
  margin: 0 0 0.875rem;
  font-family: var(--lh-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--lh-grey-900);
}
.lh-card-title::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  min-height: 1.15em;
  border-radius: 2px;
  background: var(--lh-primary);
}
.lh-card-title-green::before  { background: var(--lh-green); }
.lh-card-title-orange::before { background: var(--lh-orange); }
.lh-card-title-yellow::before { background: var(--lh-yellow); }
.lh-card-title-red::before    { background: var(--lh-red); }
.lh-card-title-grey::before   { background: var(--lh-grey-300); }

/* ==========================================================================
   BUTTONS (website recipe: sharp, bold, blue → hover light blue)
   ========================================================================== */

.btn {
  font-family: var(--lh-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  border-radius: var(--lh-radius-sm) !important;
  padding: 0.5rem 1rem;
  border: 2px solid transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.btn:focus, .btn:focus-visible {
  outline: 2px solid var(--lh-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
}

.btn-primary {
  background: var(--lh-primary) !important;
  color: var(--lh-primary-fg) !important;
  border-color: var(--lh-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--lh-primary-hover) !important;
  border-color: var(--lh-primary-hover) !important;
  color: var(--lh-primary-hover-fg) !important;
}

.btn-secondary {
  background: var(--lh-grey-500) !important;
  color: #fff !important;
  border-color: var(--lh-grey-500) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: var(--lh-grey-700) !important;
  border-color: var(--lh-grey-700) !important;
  color: #fff !important;
}

/* Outline (website: white, 2px blue border, hover inverts) */
.btn-outline,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
  background: transparent !important;
  color: var(--lh-primary) !important;
  border-color: var(--lh-primary) !important;
}
.btn-outline:hover, .btn-outline:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-dark:hover, .btn-outline-dark:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background: var(--lh-primary) !important;
  color: var(--lh-primary-fg) !important;
  border-color: var(--lh-primary) !important;
}

.btn-success {
  background: var(--lh-success) !important;
  color: #fff !important;
  border-color: var(--lh-success) !important;
}
.btn-success:hover { background: #4a6319 !important; border-color: #4a6319 !important; }

.btn-warning {
  background: var(--lh-warning) !important;
  color: #fff !important;
  border-color: var(--lh-warning) !important;
}
.btn-warning:hover { background: #8a5a0f !important; border-color: #8a5a0f !important; }

.btn-danger {
  background: var(--lh-error) !important;
  color: #fff !important;
  border-color: var(--lh-error) !important;
}
.btn-danger:hover { background: #9c2a4e !important; border-color: #9c2a4e !important; }

.btn-link {
  font-family: var(--lh-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lh-primary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control,
.form-select {
  font-family: var(--lh-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lh-grey-900);
  background-color: var(--lh-surface);
  border: 1px solid var(--lh-grey-300);
  border-radius: var(--lh-radius-sm) !important;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--lh-primary);
  background-color: var(--lh-surface);
  color: var(--lh-grey-900);
  box-shadow: 0 0 0 2px var(--lh-blue-bg);
  outline: none;
}

.form-control::placeholder { color: var(--lh-grey-400); }

/* Unified combobox/select design: sharp corners, blue caret, consistent
   hover/focus. Applies to EVERY select in the app (modals, grid filters,
   pagination, configuration) — never style selects ad hoc per page. */
.form-select {
  cursor: pointer;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2318619A'%3e%3cpath d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 14px;
}
.form-select:hover { border-color: var(--lh-primary); }
.form-select:disabled {
  cursor: not-allowed;
  background-color: var(--lh-grey-50);
  color: var(--lh-grey-400);
}
.form-select option:checked { background: var(--lh-blue-bg); color: var(--lh-grey-900); }

.form-control-sm, .form-select-sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; }
.form-select-sm { padding-right: 2rem; background-position: right 0.6rem center; background-size: 12px 12px; }
.form-control-lg, .form-select-lg { padding: 0.75rem 1rem; font-size: 1rem; }

.form-label {
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lh-grey-700);
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}

.form-text { font-size: 0.8125rem; color: var(--lh-grey-500); }

.form-check-input {
  border-radius: var(--lh-radius-sm) !important;
  border-color: var(--lh-grey-400);
  background-color: var(--lh-surface);
}
.form-check-input[type="radio"] { border-radius: 50% !important; }
.form-check-input:checked {
  background-color: var(--lh-primary);
  border-color: var(--lh-primary);
}
.form-check-input:focus {
  border-color: var(--lh-primary);
  box-shadow: 0 0 0 2px var(--lh-blue-bg);
}
.form-check-label {
  font-family: var(--lh-font-body);
  color: var(--lh-grey-700);
}

.input-group-text {
  background-color: var(--lh-grey-50);
  border: 1px solid var(--lh-grey-300);
  color: var(--lh-grey-500);
  font-size: 0.875rem;
  border-radius: var(--lh-radius-sm) !important;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  font-family: var(--lh-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.35em 0.65em;
  border-radius: var(--lh-radius-sm) !important;
  line-height: 1.2;
}

.badge.bg-primary { background: var(--lh-primary) !important; color: var(--lh-primary-fg) !important; }
.badge.bg-secondary { background: var(--lh-grey-500) !important; color: #fff !important; }
.badge.bg-light { background: var(--lh-grey-50) !important; color: var(--lh-grey-900) !important; border: 1px solid var(--lh-grey-200); }
.badge.bg-success { background: var(--lh-success-bg) !important; color: var(--lh-success) !important; }
.badge.bg-warning { background: var(--lh-warning-bg) !important; color: var(--lh-warning) !important; }
.badge.bg-danger  { background: var(--lh-error-bg)   !important; color: var(--lh-error)   !important; }
.badge.bg-info    { background: var(--lh-info-bg)    !important; color: var(--lh-info)    !important; }

.badge-success, .badge-danger, .badge-warning, .badge-info, .badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lh-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.3em 0.6em;
  border: 1px solid transparent;
}

.badge-success { background: var(--lh-success-bg); color: var(--lh-success); border-color: var(--lh-success); }
.badge-danger  { background: var(--lh-error-bg);   color: var(--lh-error);   border-color: var(--lh-error); }
.badge-warning { background: var(--lh-warning-bg); color: var(--lh-warning); border-color: var(--lh-warning); }
.badge-info    { background: var(--lh-info-bg);    color: var(--lh-info);    border-color: var(--lh-info); }
.badge-neutral { background: var(--lh-grey-50);    color: var(--lh-grey-500); border-color: var(--lh-grey-200); }

/* Section-colour badge (lh-badge + lh-badge-{blue|green|orange|yellow|red|grey}).
   For classifications whose colour the user picks (asset types now, ticket
   categories later) — unlike .badge-* above, the colour carries no fixed
   semantics, it is just the chosen section colour. */
.lh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lh-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.3em 0.6em;
  border: 1px solid transparent;
  border-radius: var(--lh-radius-sm);
}
/* Ticket status (lh-status + lh-status-{key}): a coloured dot plus plain text,
   NOT a filled badge — a state should register at a glance without shouting.
   Waiting = warm, in progress = blue, done = green, gone = grey/berry. */
.lh-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.875rem;
}
.lh-status::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lh-grey-400);
}
.lh-status-ausstehend::before     { background: var(--lh-yellow); }
.lh-status-freigegeben::before    { background: var(--lh-blue-light); }
.lh-status-offen::before          { background: var(--lh-orange); }
.lh-status-in_bearbeitung::before { background: var(--lh-primary); }
.lh-status-erledigt::before       { background: var(--lh-green); }
.lh-status-abgebrochen::before    { background: var(--lh-grey-400); }
.lh-status-abgelehnt::before      { background: var(--lh-red); }

/* Ticket history (lh-verlauf): a quiet timeline, one entry per event with the
   plain German sentence underneath. This is the Nachweis — it has to read like
   prose, not like a log dump. */
.lh-verlauf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
}
.lh-verlauf-item {
  position: relative;
  padding-left: 14px;
  border-left: 2px solid var(--lh-grey-200);
}
.lh-verlauf-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lh-blue-light);
}
.lh-verlauf-kopf { font-size: 0.875rem; }
.lh-verlauf-text {
  font-size: 0.875rem;
  color: var(--lh-grey-500);
  margin-top: 2px;
  white-space: pre-wrap;
}

/* Ticket attachments (lh-anhaenge): pictures show as a thumbnail, everything
   else as a file row — the point is that the proof is visible at a glance. */
.lh-anhaenge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lh-anhang {
  position: relative;
  width: 132px;
  border: 1px solid var(--lh-grey-200);
  border-radius: var(--lh-radius);
  background: var(--lh-surface);
  overflow: hidden;
}
.lh-anhang-bild {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  background: var(--lh-grey-100);
}
.lh-anhang-datei {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  font-size: 2rem;
  color: var(--lh-grey-400);
  background: var(--lh-grey-100);
}
.lh-anhang-meta {
  padding: 6px 8px;
  font-size: 0.75rem;
  line-height: 1.3;
}
.lh-anhang-name {
  display: block;
  font-weight: 600;
  color: var(--lh-grey-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-anhang-sub { color: var(--lh-grey-500); }
.lh-anhang-del {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  border-radius: var(--lh-radius-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 2px 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.lh-anhang:hover .lh-anhang-del,
.lh-anhang-del:focus-visible { opacity: 1; }

/* Neutral outline badge — the "no special colour" variant (e.g. priority Normal). */
.lh-badge-outline { background: transparent; color: var(--lh-grey-700); border-color: var(--lh-grey-300); }

.lh-badge-blue   { background: var(--lh-blue-bg);   color: var(--lh-info);      border-color: var(--lh-info); }
.lh-badge-green  { background: var(--lh-green-bg);  color: var(--lh-success);   border-color: var(--lh-success); }
.lh-badge-orange { background: var(--lh-orange-bg); color: var(--lh-warning);   border-color: var(--lh-warning); }
.lh-badge-yellow { background: var(--lh-yellow-bg); color: var(--lh-yellow-fg); border-color: var(--lh-yellow-fg); }
.lh-badge-red    { background: var(--lh-red-bg);    color: var(--lh-error);     border-color: var(--lh-error); }
.lh-badge-grey   { background: var(--lh-grey-50);   color: var(--lh-grey-500);  border-color: var(--lh-grey-200); }

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
  border-radius: var(--lh-radius) !important;
  border: none;
  border-left: 3px solid transparent;
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
}

.alert-success { background: var(--lh-success-bg); color: var(--lh-success); border-left-color: var(--lh-success); }
.alert-warning { background: var(--lh-warning-bg); color: var(--lh-warning); border-left-color: var(--lh-warning); }
.alert-danger  { background: var(--lh-error-bg);   color: var(--lh-error);   border-left-color: var(--lh-error); }
.alert-info    { background: var(--lh-info-bg);    color: var(--lh-info);    border-left-color: var(--lh-info); }
.alert-light   { background: var(--lh-grey-50);    color: var(--lh-grey-700); border-left-color: var(--lh-grey-200); }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
  color: var(--lh-grey-900);
  border-color: var(--lh-grey-200);
  font-family: var(--lh-font-body);
  font-size: 0.9375rem;
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--lh-blue-bg);
}

.table thead th {
  font-family: var(--lh-font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--lh-grey-500);
  background: var(--lh-grey-50);
  border-bottom: 1px solid var(--lh-grey-200);
  padding: 0.7rem 0.75rem;
}

.table > :not(caption) > * > * { border-color: var(--lh-grey-200); }
.table-hover > tbody > tr:hover > * { background-color: var(--lh-blue-bg); color: var(--lh-grey-900); }

/* ==========================================================================
   MODALS & DROPDOWNS
   ========================================================================== */

.modal-content {
  border: 1px solid var(--lh-grey-300);
  border-top: 4px solid var(--lh-primary);
  border-radius: var(--lh-radius) !important;
  box-shadow: var(--lh-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--lh-grey-200); }
.modal-footer { border-top: 1px solid var(--lh-grey-200); }
.modal-title {
  font-family: var(--lh-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
}

.dropdown-menu {
  border: 1px solid var(--lh-grey-300);
  border-radius: var(--lh-radius) !important;
  box-shadow: var(--lh-shadow-lg);
  font-size: 0.9375rem;
}
.dropdown-item { color: var(--lh-grey-700); font-weight: 400; }
.dropdown-item:hover { background: var(--lh-blue-bg); color: var(--lh-grey-900); }
.dropdown-item:active { background: var(--lh-primary); color: var(--lh-primary-fg); }

/* ==========================================================================
   HEADER DROPDOWN (user) & TOASTS
   ========================================================================== */

.lh-user-btn {
  background: transparent;
  border: 1px solid var(--lh-grey-300);
  color: var(--lh-grey-900);
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 6px 12px;
  border-radius: var(--lh-radius-sm);
}
.lh-user-btn:hover { background: var(--lh-grey-50); }
.lh-role-badge {
  background: var(--lh-primary);
  color: var(--lh-primary-fg);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  border-radius: var(--lh-radius-sm);
}

.lh-toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lh-toast {
  min-width: 260px;
  max-width: 360px;
  padding: 14px 18px;
  background: var(--lh-blue-dark);
  color: var(--lh-white);
  border-left: 3px solid var(--lh-white);
  border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow-lg);
  font-size: 0.9375rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lh-toast-show { opacity: 1; transform: translateY(0); }
.lh-toast-success { border-left-color: var(--lh-green); }
.lh-toast-danger  { border-left-color: var(--lh-red); }
.lh-toast-warning { border-left-color: var(--lh-orange); }
.lh-toast-info    { border-left-color: var(--lh-blue-light); }

/* ==========================================================================
   AUTH PAGES (login, forced password change) — light, friendly
   ========================================================================== */

.lh-auth-body {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, var(--lh-blue-bg) 0%, var(--lh-grey-50) 52%, #ffffff 100%);
  color: var(--lh-grey-900);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--lh-font-body);
}
.lh-auth-wrap {
  width: 100%;
  max-width: 440px;
}
.lh-auth-card {
  background: var(--lh-surface);
  color: var(--lh-grey-900);
  border: 1px solid var(--lh-grey-200);
  border-top: 4px solid var(--lh-primary);
  border-radius: var(--lh-radius-lg);
  box-shadow: 0 18px 50px rgba(24, 97, 154, 0.12);
  padding: clamp(28px, 5vw, 44px) clamp(22px, 4vw, 40px);
}
.lh-auth-brand { text-align: center; margin-bottom: 26px; }
.lh-auth-logo { max-height: 56px; width: auto; }
.lh-auth-eyebrow {
  display: block;
  margin-top: 18px;
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lh-grey-500);
}
.lh-auth-title {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0;
  margin: 5px 0 0;
  line-height: 1.15;
  color: var(--lh-grey-900);
}
.lh-auth-tagline {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--lh-grey-500);
  line-height: 1.45;
}
.lh-auth-form .lh-label { display: block; margin-bottom: 6px; }
.lh-input-wrap { position: relative; }
.lh-input-wrap > .bi {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--lh-grey-500); font-size: 1rem; pointer-events: none;
}
.lh-input-wrap .form-control { padding-left: 38px; }
.lh-auth-form .form-control { padding-top: 0.62rem; padding-bottom: 0.62rem; }
.lh-auth-form .btn-primary {
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-family: var(--lh-font-heading);
  letter-spacing: 0.04em;
}
.lh-auth-foot {
  text-align: center;
  color: var(--lh-grey-500);
  font-size: 0.8125rem;
  margin: 24px 0 0;
  line-height: 1.5;
}

/* ==========================================================================
   DASHBOARD: hero, KPI cards, placeholder
   ========================================================================== */

.lh-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;   /* schmal: die Aktionen rutschen unter den Titel statt zu quetschen */
  gap: 16px;
  padding: 22px 26px;
  background: var(--lh-surface);
  border: 1px solid var(--lh-grey-200);
  border-top: 4px solid var(--lh-primary);
  border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow-sm);
}
.lh-hero-greet {
  font-family: var(--lh-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lh-grey-500);
}
.lh-hero-name {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  margin: 4px 0 0;
  line-height: 1.15;
  font-size: 1.5rem;
  color: var(--lh-grey-900);
}
.lh-hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--lh-grey-500);
}
.lh-hero-logo { font-size: 2.4rem; color: var(--lh-blue-light); opacity: 0.85; }

/* Aktionen zum Objekt: rechts oben IM Kopf. Dort wird danach gesucht, und sie
   gehören sichtbar zu dem Ding, auf das sie wirken. Als eigene Leiste unter der
   Karte standen sie zwischen Kopf und Inhalt und gehörten optisch zu keinem von
   beidem. Gilt für jede Detailseite — Ticket, Rundgang, was noch kommt. */
.lh-hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 575.98px) {
  /* Umgebrochen ist rechtsbündig sinnlos: dann beginnen sie am Titel. */
  .lh-hero-aktionen { justify-content: flex-start; width: 100%; }
}

/* KPI card: reusable stat tile; section-color variants via modifier classes */
.lh-kpi {
  background: var(--lh-surface);
  border: 1px solid var(--lh-grey-200);
  border-top: 3px solid var(--lh-primary);
  border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow-sm);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
}
.lh-kpi-value {
  font-family: var(--lh-font-heading);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--lh-grey-900);
}
.lh-kpi-sub { font-size: 0.8125rem; color: var(--lh-grey-500); }
.lh-kpi-green  { border-top-color: var(--lh-green); }
.lh-kpi-orange { border-top-color: var(--lh-orange); }
.lh-kpi-yellow { border-top-color: var(--lh-yellow); }
.lh-kpi-red    { border-top-color: var(--lh-red); }

.lh-kpi-link { text-decoration: none; font-weight: 400; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.lh-kpi-link:hover { border-color: var(--lh-blue-light); box-shadow: 0 4px 16px rgba(24, 97, 154, 0.12); transform: translateY(-1px); }

.lh-link-more {
  /* Wie der Kartentitel: normale Schreibung (Prinzip 5). „ALLE TICKETS" war
     derselbe Versalien-Rest wie das alte Ribbon. */
  font-family: var(--lh-font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  color: var(--lh-grey-500);
}
.lh-link-more:hover { color: var(--lh-primary); text-decoration: underline; }

/* Placeholder panel for not-yet-available areas */
.lh-placeholder {
  border: 1px dashed var(--lh-grey-300);
  border-radius: var(--lh-radius);
  background: var(--lh-grey-50);
  padding: 48px 32px;
  text-align: center;
  color: var(--lh-grey-500);
}
.lh-placeholder .bi { font-size: 2rem; display: block; margin-bottom: 12px; color: var(--lh-blue-grey); }

/* Work queue: a SHORT list of things someone has to act on — approval stages,
   own jobs, later maintenance and rentals. Not a datagrid: no search, no
   paging, no sorting by hand. If a queue needs those, it belongs on its own
   page and the queue should link there.
   Rows are whole links; the title carries the underline on hover, so the row
   stays calm while still reading as clickable. */
.lh-queue { display: flex; flex-direction: column; }
.lh-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 4px;
  border-top: 1px solid var(--lh-grey-100);
  text-decoration: none;
  color: inherit;
}
.lh-queue-row:first-child { border-top: 0; }
.lh-queue-row:hover { background: var(--lh-grey-50); }
.lh-queue-main { min-width: 0; }
.lh-queue-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--lh-grey-900);
}
.lh-queue-row:hover .lh-queue-title > span:not(.lh-badge) { text-decoration: underline; }
.lh-queue-nr { font-size: 0.75rem; color: var(--lh-grey-500); }   /* pair with .lh-mono */
.lh-queue-meta {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--lh-grey-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-queue-side { flex-shrink: 0; text-align: right; }

@media (max-width: 575.98px) {
  .lh-queue-row { flex-direction: column; align-items: flex-start; }
  .lh-queue-side { text-align: left; }
}

/* ==========================================================================
   QR-ETIKETTEN (Druckansicht)

   Am Bildschirm eine normale Seite, auf dem Papier nur Etiketten. Ein Etikett
   wird auf eine Heizung geklebt und Jahre später abfotografiert — deshalb
   schwarz auf weiß, feste Millimeter statt rem, und nichts, was Toner kostet
   ohne zu helfen. Die Ränder machen die Schere, nicht das CSS.
   ========================================================================== */

.lh-etiketten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.lh-etikett {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--lh-grey-300);
  border-radius: var(--lh-radius-sm);
  background: var(--lh-white);
  break-inside: avoid;          /* ein Etikett zerreißt man nicht über zwei Seiten */
}
.lh-etikett-qr { flex-shrink: 0; line-height: 0; }
.lh-etikett-qr svg { width: 30mm; height: 30mm; display: block; }
.lh-etikett-text { min-width: 0; color: #000; }
.lh-etikett-kicker { font-size: 8pt; color: #555; }
.lh-etikett-name { font-weight: 700; font-size: 11pt; line-height: 1.2; word-break: break-word; }
.lh-etikett-ort { font-size: 8.5pt; color: #333; margin-top: 1px; }
.lh-etikett-hinweis { font-size: 7.5pt; color: #555; margin-top: 4px; }

@media print {
  /* Alles, was kein Etikett ist, gehört nicht aufs Papier: Sidebar, Kopfzeile,
     Brotkrumen, Filter. Die Auswahl folgt der echten Shell in index.php
     (.main-wrapper + nacktes <header>), nicht erfundenen Klassennamen. */
  .lh-sidebar, .lh-mobile-nav, .main-wrapper > header, .lh-breadcrumb-nav,
  .lh-page-title, .lh-noprint, .offcanvas, .toast-container { display: none !important; }
  /* Papier animiert nicht: .main-wrapper blendet margin-left über 0,25 s ein,
     und ein Druck mitten in dieser Bewegung schiebt die Etiketten verrutscht
     aufs Blatt. */
  * { transition: none !important; animation: none !important; }
  .main-wrapper { margin: 0 !important; padding: 0 !important; }
  .main-wrapper > div { padding: 0 !important; }
  body { background: #fff !important; }
  .lh-etiketten { grid-template-columns: repeat(2, 1fr); gap: 6mm; }
  .lh-etikett { border-color: #999; }

  /* Die Druckregeln des Nachweis-Dokuments stehen bei der Komponente selbst
     (weiter unten) — hier oben würden sie von deren Basisregeln überschrieben. */

  @page { margin: 10mm; }
}

/* ==========================================================================
   NACHWEIS-DOKUMENT (lh-dokument)

   Ein Blatt, das das Board verlässt: Ticket-Nachweis, Prüfprotokoll,
   Jahresabschluss. Das PDF macht der Browser („Als PDF speichern"), deshalb ist
   diese Ansicht das Dokument — nicht die Vorstufe davon.

   IMMER hell, auch im Dark Mode: Papier hat keinen Dark Mode, und wer am
   Bildschirm etwas anderes sieht als aus dem Drucker kommt, traut dem Nachweis
   zu Recht nicht. Deshalb feste Farben statt Tokens.
   ========================================================================== */

.lh-dokument {
  max-width: 48rem;
  margin: 0 auto;
  padding: 28px 32px;
  background: #fff;
  color: #1D1D1B;
  border: 1px solid var(--lh-grey-200);
  border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow-sm);
  font-size: 10.5pt;
  line-height: 1.5;
}
.lh-dok-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #18619A;
}
.lh-dok-kicker { font-size: 8.5pt; color: #6E747B; }
.lh-dok-org { font-family: var(--lh-font-heading); font-weight: 700; font-size: 13pt; }
.lh-dok-logo { max-height: 34px; }   /* im Dokument NIE invertieren (siehe Dark-Mode-Regel unten) */
.lh-dok-titel {
  font-family: var(--lh-font-heading);
  font-size: 15pt;
  font-weight: 700;
  margin: 16px 0 14px;
  color: #1D1D1B;
}
.lh-dok-h2 {
  font-family: var(--lh-font-heading);
  font-size: 11pt;
  font-weight: 600;
  margin: 20px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #D5D5D5;
  color: #1D1D1B;
}
/* Fakten als Definitionsliste: zweispaltig, damit die Werte untereinander stehen. */
.lh-dok-fakten {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 3px 12px;
  margin: 0;
}
.lh-dok-fakten dt { color: #6E747B; font-weight: 400; }
.lh-dok-fakten dd { margin: 0; font-weight: 600; }
.lh-dok-text { margin: 0 0 8px; white-space: pre-line; }
.lh-dok-grau { color: #6E747B; }

.lh-dok-tabelle { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.lh-dok-tabelle th {
  text-align: left;
  font-weight: 600;
  color: #6E747B;
  border-bottom: 1px solid #D5D5D5;
  padding: 4px 8px 4px 0;
}
.lh-dok-tabelle td { padding: 4px 8px 4px 0; border-bottom: 1px solid #EFF1F4; vertical-align: top; }

.lh-dok-liste { margin: 4px 0; padding-left: 1.2rem; }

.lh-dok-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.lh-dok-kennzahlen > div {
  border: 1px solid #D5D5D5;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 8.5pt;
  color: #6E747B;
}
.lh-dok-kennzahlen span {
  display: block;
  font-family: var(--lh-font-heading);
  font-size: 17pt;
  font-weight: 700;
  color: #1D1D1B;
  line-height: 1.1;
}

.lh-dok-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 12px;
}
.lh-dok-bilder figure { margin: 0; break-inside: avoid; }
.lh-dok-bilder img {
  width: 100%;
  max-height: 60mm;
  object-fit: contain;
  border: 1px solid #D5D5D5;
  border-radius: 4px;
  background: #fff;
}
.lh-dok-bilder figcaption { font-size: 8pt; color: #6E747B; margin-top: 3px; }

.lh-dok-fuss {
  margin: 22px 0 0;
  padding-top: 8px;
  border-top: 1px solid #D5D5D5;
  font-size: 8pt;
  color: #6E747B;
}

/* Das Dokument bleibt hell — auch wenn das Board dunkel ist. Sonst kämen weiße
   Schrift auf weißem Papier und ein invertiertes Logo aus dem Drucker. */
[data-bs-theme="dark"] .lh-dok-logo { filter: none; }

/* Der Druck selbst. Bewusst HIER und nicht im großen @media-print-Block weiter
   oben: gleiche Spezifität, und die Basisregeln darüber stehen später in der
   Datei — sie würden den Reset überschreiben (Rahmen und Schatten kämen mit
   aufs Papier). Komponente und ihr Druckbild bleiben zusammen. */
@media print {
  /* Auf dem Papier ist die Seite der Rahmen — Kasten und Schatten wären nur
     verschenkter Platz. */
  .lh-dokument {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* Eine Überschrift allein am Seitenende ist der klassische Druckfehler. */
  .lh-dok-h2 { break-after: avoid; }
  .lh-dok-tabelle tr, .lh-dok-fakten, .lh-dok-kennzahlen > div, .lh-dok-fuss { break-inside: avoid; }
  .lh-dok-tabelle thead { display: table-header-group; }   /* Kopfzeile auf jeder Folgeseite */
}

/* ==========================================================================
   VOR ORT (Scan-Seite nach einem QR-Code)

   Diese Seite wird fast nur am Handy geöffnet, im Keller, mit einer freien
   Hand. Deshalb schmale Spalte, große Tippziele, keine Zierde.
   ========================================================================== */

.lh-scan { max-width: 34rem; margin: 0 auto; }
.lh-scan-kicker { font-size: 0.75rem; color: var(--lh-grey-500); }
.lh-scan-name {
  font-family: var(--lh-font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 2px 0 0;
  color: var(--lh-grey-900);
}
.lh-scan-badges:not(:empty) { margin-top: 8px; }
.lh-scan-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--lh-grey-500);
}
/* Fat-finger sizing: on a phone the controls are the whole interface. */
@media (max-width: 575.98px) {
  .lh-scan .form-control,
  .lh-scan .form-select { min-height: 2.75rem; font-size: 1rem; }
  .lh-scan .btn { min-height: 2.75rem; }
}

/* Menü nach dem Scan: erst wählen, dann tun. Ganze Kachel ist das Tippziel —
   am Handy zielt niemand auf ein Wort. */
.lh-scan-wahl {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 16px;
  text-align: left;
  background: var(--lh-surface);
  border: 1px solid var(--lh-grey-200);
  border-radius: var(--lh-radius);
  box-shadow: var(--lh-shadow-sm);
  color: var(--lh-grey-900);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.lh-scan-wahl:hover,
.lh-scan-wahl:focus-visible {
  border-color: var(--lh-primary);
  box-shadow: 0 4px 16px rgba(24, 97, 154, 0.12);
  transform: translateY(-1px);
}
.lh-scan-wahl > .bi:first-child { font-size: 1.4rem; color: var(--lh-primary); flex-shrink: 0; }
.lh-scan-wahl-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lh-scan-wahl-titel { font-family: var(--lh-font-heading); font-weight: 600; font-size: 1.0625rem; }
.lh-scan-wahl-sub { font-size: 0.8125rem; color: var(--lh-grey-500); }
.lh-scan-wahl-zahl {
  flex-shrink: 0;
  min-width: 1.75rem;
  padding: 2px 8px;
  border-radius: var(--lh-radius-pill, 999px);
  background: var(--lh-grey-100);
  color: var(--lh-grey-700);
  font-weight: 600;
  font-size: 0.8125rem;
  text-align: center;
}
.lh-scan-wahl-pfeil { color: var(--lh-grey-400); flex-shrink: 0; }

.lh-scan-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 6px 2px;
  background: none;
  border: 0;
  color: var(--lh-grey-500);
  font-size: 0.9375rem;
}
.lh-scan-zurueck:hover { color: var(--lh-primary); }

/* ==========================================================================
   RUNDGANG (Ablauf einer Begehung)

   Wird beim Durchs-Haus-Gehen bedient, meist am Handy. Große Tippziele, eine
   Karte je Anlage, und der Zähler oben sagt, was noch fehlt.
   ========================================================================== */

.lh-rundgang { max-width: 44rem; margin: 0 auto; }
.lh-rundgang-zaehler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--lh-grey-700);
}
.lh-rundgang-zaehler strong { color: var(--lh-grey-900); }

.lh-rg-anlage { transition: opacity 0.12s; }
.lh-rg-speichert { opacity: 0.5; pointer-events: none; }   /* solange der Server antwortet */
.lh-rg-status { flex-shrink: 0; }

/* Die beiden Knöpfe sind die Hauptbedienung: nebeneinander, gleich breit, groß. */
.lh-rg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lh-rg-wahl .btn { min-height: 2.75rem; }

.lh-rg-mangel { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.lh-rg-mangel input { min-height: 2.5rem; }
.lh-rg-ticket { font-size: 0.75rem; color: var(--lh-grey-500); text-decoration: none; white-space: nowrap; }
.lh-rg-ticket:hover { color: var(--lh-primary); }
.lh-rg-mangel-aktionen { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.lh-rg-liste { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; color: var(--lh-grey-700); }

/* ==========================================================================
   DATAGRID (LH.datagrid — reusable list component: search, filters, sort,
   pagination). Markup is generated by assets/js/datagrid.js.
   ========================================================================== */

/* Search + filters live in their own card above the table — they are controls,
   not part of the data, and the card keeps them from floating on the page. */
.lh-dg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--lh-surface);
  border: 1px solid var(--lh-grey-200);
  border-radius: var(--lh-radius);
}
.lh-dg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lh-dg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.lh-dg-search { position: relative; }
.lh-dg-search > .bi {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--lh-grey-500); font-size: 0.875rem; pointer-events: none;
}
.lh-dg-search .form-control { padding-left: 32px; min-width: 220px; }

.lh-dg-filter { width: auto; min-width: 140px; }

.lh-dg-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.lh-dg-sortable:hover { background: var(--lh-grey-100); }
.lh-dg-sortable:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: -2px; }
.lh-dg-sort-ico { font-size: 0.7rem; color: var(--lh-grey-400); }
.lh-dg-sort-ico.active { color: var(--lh-primary); }

.lh-dg-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 10px;
}
.lh-dg-info { font-size: 0.8125rem; color: var(--lh-grey-500); }
.lh-dg-pager { display: flex; align-items: center; gap: 12px; }
.lh-dg-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lh-grey-500);
  margin: 0;
}
.lh-dg-size .form-select { width: auto; }
.lh-dg-page {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--lh-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lh-grey-600, var(--lh-grey-700));
}

/* ==========================================================================
   TABS (segmented, reusable — e.g. configuration sections)
   ========================================================================== */

.lh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid var(--lh-grey-300);
  padding-bottom: 0;
  margin-bottom: 1rem;
}
.lh-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--lh-grey-300);
  border-bottom: none;
  border-radius: var(--lh-radius-sm) var(--lh-radius-sm) 0 0;
  background: var(--lh-surface);
  color: var(--lh-grey-700);
  font-family: var(--lh-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 9px 16px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lh-tabs .nav-link:hover { background: var(--lh-grey-50); color: var(--lh-grey-900); }
.lh-tabs .nav-link.active {
  background: var(--lh-primary);
  border-color: var(--lh-primary);
  color: var(--lh-primary-fg);
}
.lh-tabs .nav-link:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 2px; }

/* ==========================================================================
   NOTIFICATIONS (header bell + dropdown, fed by LH.notify polling)
   ========================================================================== */

.lh-bell {
  position: relative;
  background: transparent;
  border: 1px solid var(--lh-grey-300);
  color: var(--lh-grey-900);
  padding: 6px 10px;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--lh-radius-sm);
}
.lh-bell:hover { background: var(--lh-grey-50); }
.lh-bell .lh-bell-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lh-red);
  color: #fff;
  font-family: var(--lh-font-heading);
  font-size: 0.65rem;
  font-weight: 700;
}
.navbar .lh-bell { border-color: var(--lh-grey-300); color: var(--lh-grey-900); }
.navbar .lh-bell:hover { background: var(--lh-grey-50); }

.lh-notif-menu {
  width: 340px;
  max-width: 92vw;
  padding: 0;
  overflow: hidden;
}
.lh-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lh-grey-200);
  font-family: var(--lh-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;          /* normale Schreibung, siehe Prinzip 5 */
  color: var(--lh-grey-700);
}
.lh-notif-list { max-height: 340px; overflow-y: auto; }
.lh-notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lh-grey-100);
  border-left: 3px solid transparent;
  text-decoration: none;
  font-weight: 400;
  color: var(--lh-grey-700);
}
.lh-notif-item:last-child { border-bottom: none; }
.lh-notif-item:hover { background: var(--lh-blue-bg); color: var(--lh-grey-900); }
.lh-notif-item.unread { border-left-color: var(--lh-primary); background: var(--lh-grey-100); }
.lh-notif-item.unread:hover { background: var(--lh-blue-bg); }
.lh-notif-title { font-weight: 700; font-size: 0.875rem; color: var(--lh-grey-900); }
.lh-notif-body { font-size: 0.8125rem; }
.lh-notif-meta { font-size: 0.72rem; color: var(--lh-grey-500); margin-top: 2px; }
.lh-notif-empty { padding: 24px 14px; text-align: center; color: var(--lh-grey-500); font-size: 0.875rem; }
.lh-notif-item.type-success .lh-notif-title::before,
.lh-notif-item.type-warning .lh-notif-title::before,
.lh-notif-item.type-danger .lh-notif-title::before {
  content: '●';
  margin-right: 6px;
  font-size: 0.7em;
  vertical-align: 2px;
}
.lh-notif-item.type-success .lh-notif-title::before { color: var(--lh-success); }
.lh-notif-item.type-warning .lh-notif-title::before { color: var(--lh-warning); }
.lh-notif-item.type-danger .lh-notif-title::before { color: var(--lh-error); }

/* ==========================================================================
   MISC
   ========================================================================== */

.lh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Label span inside buttons (pairs with an optional spinner sibling) */
.lh-btn-label { display: inline-block; }

.btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231D1D1B'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 0.6;
}
.btn-close:hover { opacity: 1; }
.btn-close-white {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.spinner-border { border-radius: 50% !important; }

@media (max-width: 575px) {
  .lh-hero { padding: 16px 20px; }
  .lh-hero-name { font-size: 1.3rem; }
  .lh-kpi-value { font-size: 1.7rem; }
}

/* Zuständig-Auswahl in der Ticketliste: kompakt, damit die Zeile nicht
   auseinanderfällt, aber breit genug für einen Namen. */
.lh-zustaendig { min-width: 9rem; max-width: 12rem; }

/* ==========================================================================
   ANKREUZLISTE (lh-checkliste)

   Mehrfachauswahl zum Anklicken — für Zuordnungen, bei denen mehrere Treffer
   der Normalfall sind (eine Leitung betreut mehrere Häuser). Ersetzt
   `<select multiple>`: das sieht aus wie eine Liste, verlangt aber Strg-Klick,
   und der zweite Klick wirft den ersten Treffer wieder raus.
   ========================================================================== */
.lh-checkliste {
  max-height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--lh-grey-200);
  border-radius: var(--lh-radius-sm);
  background: var(--lh-surface);
  padding: 4px;
}
.lh-checkliste-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--lh-radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--lh-grey-900);
}
.lh-checkliste-item:hover { background: var(--lh-grey-50); }
.lh-checkliste-item .form-check-input { margin: 0; flex-shrink: 0; }
.lh-checkliste .form-text { padding: 6px 8px; }