/* ============================================================
   Bechtle Rheinland Asset Management Tool — Main Stylesheet
   ============================================================ */

/* Alpine.js: hide elements with x-cloak until Alpine initialises */
[x-cloak] { display: none !important; }

/* ============================================================
   Bechtle Pro — self-hosted web font (variable + static)
   ============================================================ */

@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtleProVar.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtleProVar-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Static fallbacks */
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtlePro-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtlePro-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtlePro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtlePro-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtlePro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BechtlePro';
  src: url('../fonts/BechtlePro-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {
  color-scheme: light;

  /* ── Flächen & Text (Basis für Hell/Dunkel) ── */
  --bg:            #f0f4f2;   /* Seitenhintergrund */
  --surface:       #ffffff;   /* Karten, Formulare, Tabellen */
  --surface-2:     #f6f8f7;   /* Zebra, Kopfzeilen, ruhige Badges */
  --surface-3:     #eceff1;   /* Hover-Flächen */
  --surface-foto:  #ffffff;   /* Produktfotos (Gerätekatalog) — bewusst auch im Dunkelmodus weiß */
  --border:        #e5e7eb;
  --border-strong: #d1d5db;
  --text:          #1a1a2e;
  --text-muted:    #6b7280;
  --text-light:    #9ca3af;
  --on-akzent:     #ffffff;   /* Text auf Akzentflächen */
  --on-warning:    #1f1a0d;   /* Text auf Amber (Warnung/Rückgabe) — dunkel, sonst unlesbar */
  --warnung-hover: #d97706;   /* Amber-Button beim Hover */
  --warnung-hover-rand: #b45309;

  /* ── Akzent (Standard: Bechtle Grün; Varianten via html[data-akzent]) ── */
  --akzent:          #23a96a;
  --akzent-rgb:      35, 169, 106;
  --akzent-hover:    #1e9a5f;
  --akzent-dark:     #075033;   /* Fläche (Buttons, Badges mit weißem Text) */
  --akzent-dark-rgb: 7, 80, 51;
  --akzent-ink:      #075033;   /* Text/Rahmen in Akzentfarbe — im Dark Mode heller */
  --akzent-soft:     #eaf6ef;   /* getönte Fläche */

  /* ── Töne für Status-Badges, Balken, Hinweise (bg = Fläche, fg = Text darauf, solid = satt mit weißem Text) ── */
  --tone-red-bg: #fef2f2;    --tone-red-fg: #991b1b;    --tone-red-solid: #dc2626;
  --tone-orange-bg: #fff7ed; --tone-orange-fg: #9a3412; --tone-orange-solid: #ea7a1e;
  --tone-amber-bg: #fffbeb;  --tone-amber-fg: #92400e;  --tone-amber-solid: #f59e0b;
  --tone-green-bg: #f0fdf4;  --tone-green-fg: #166534;  --tone-green-solid: #16a34a;
  --tone-teal-bg: #ccfbf1;   --tone-teal-fg: #0f766e;   --tone-teal-solid: #14b8a6;
  --tone-blue-bg: #eff6ff;   --tone-blue-fg: #1e40af;   --tone-blue-solid: #2563eb;
  --tone-cyan-bg: #ecfeff;   --tone-cyan-fg: #155e75;   --tone-cyan-solid: #0891b2;
  --tone-violet-bg: #f5f3ff; --tone-violet-fg: #5b21b6; --tone-violet-solid: #7c3aed;
  --tone-pink-bg: #fce4ec;   --tone-pink-fg: #9d174d;   --tone-pink-solid: #ec4899;
  --tone-gray-bg: #f3f4f6;   --tone-gray-fg: #374151;   --tone-gray-solid: #6b7280;

  /* ── Glas (Sidebar, Menüs) ── */
  --glass-fill:        rgba(255, 255, 255, 0.58);
  --glass-fill-strong: rgba(255, 255, 255, 0.92);
  --glass-edge:        rgba(255, 255, 255, 0.85);
  --glass-highlight:   rgba(255, 255, 255, 0.75);
  --glass-shadow:      0 18px 50px rgba(var(--akzent-dark-rgb), 0.16), 0 2px 6px rgba(var(--akzent-dark-rgb), 0.08);
  --glass-ink:         #10281c;
  --glass-ink-soft:    rgba(16, 40, 28, 0.62);
  --glass-soft:        rgba(255, 255, 255, 0.6);   /* Hover-/Chip-Flächen auf Glas */
  --glass-soft-strong: rgba(255, 255, 255, 0.8);
  --header-fill:       rgba(240, 244, 242, 0.78); /* sticky Kopfzeile */
  --toolbar-fill:      rgba(255, 255, 255, 0.72); /* page-toolbar, filter-bar */
  --overlay-fill:      rgba(255, 255, 255, 0.75); /* Lade-Overlay */

  /* ── Aliase für Bestandscode ── */
  --bechtle-dark-green: var(--akzent-dark);
  --akzent-marke:       var(--akzent);   /* Linien, Balken, Marker: nur bei sehr hellen Akzenten (Flieder) kräftiger als die Fläche */
  --kontrast-blau:      var(--tone-blue-solid);  /* zweite Diagrammfarbe neben dem Akzent; bei blauen und violetten Akzenten Türkis */
  --signal:             var(--tone-red-solid);   /* kleine Elemente, die auffallen müssen (Benachrichtigungspunkt) */
  --bechtle-green:      var(--akzent-marke);
  --bechtle-primary:    var(--akzent-ink);
  --bechtle-light-bg:   var(--bg);
  --bechtle-bg:         var(--surface-2);
  --bechtle-white:      var(--surface);
  --bechtle-text:       var(--text);
  --bechtle-text-muted: var(--text-muted);
  --bechtle-text-light: var(--text-muted);
  --bechtle-border:     var(--border);
  --bechtle-danger:     var(--tone-red-solid);
  --bechtle-warning:    var(--tone-amber-solid);
  --bechtle-info:       var(--tone-blue-solid);
  --bechtle-success:    var(--tone-green-solid);
  /* bisher in Templates benutzt, aber nie definiert */
  --bechtle-green-xl:   var(--akzent-soft);
  --bechtle-light:      var(--surface-2);
  --border-color:       var(--border);
  --text-primary:       var(--text);
  --text-secondary:     var(--text-muted);

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.18);

  /* Transitions */
  --transition-fast:   all 0.12s ease;
  --transition-base:   all 0.15s ease;
  --transition-smooth: all 0.2s ease;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Responsive touch targets */
  --touch-target: 44px;
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
}

/* ============================================================
   Base Reset
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'BechtlePro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bechtle-light-bg);
  color: var(--bechtle-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

/* ============================================================
   App Layout
   ============================================================ */

.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================================
   Sidebar — „Liquid Glass" (2026-09)
   Schwebendes, durchscheinendes Panel mit Blur über einer ruhigen
   Hintergrund-Fläche; ein- und ausklappbar (html.sb-collapsed).
   Zustand liegt in localStorage('iimt-sidebar') und wird im <head>
   vor dem ersten Paint gesetzt (kein Flackern).
   ============================================================ */

:root {
  --sb-w: 260px;          /* Breite ausgeklappt — Platz für lange Unterpunkte mit Icon */
  --sb-w-min: 76px;       /* Breite eingeklappt (Icon-Schiene) */
  --sb-gap: 12px;         /* Abstand zum Fensterrand */
  --sb-radius: 26px;
  --sb-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --sb-dur: 320ms;
}

/* Ruhige „Wallpaper"-Fläche, damit das Glas etwas zum Brechen hat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 8% 0%,   rgba(var(--glow-rgb, var(--akzent-rgb)), 0.22), transparent 70%),
    radial-gradient(520px 520px at 0% 100%, rgba(var(--akzent-dark-rgb), 0.14),   transparent 70%),
    radial-gradient(700px 500px at 100% 10%, rgba(var(--glow-rgb, var(--akzent-rgb)), 0.06), transparent 70%),
    var(--bechtle-light-bg);
}

.sidebar {
  position: fixed;
  left: var(--sb-gap);
  top: var(--sb-gap);
  bottom: var(--sb-gap);
  width: var(--sb-w);
  z-index: 100;
  display: flex;
  flex-direction: column;
  color: var(--glass-ink);
  border-radius: var(--sb-radius);
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge);
  overflow: visible;           /* Lasche/Kontomenü dürfen über den Rand — .sidebar-nav scrollt selbst */
  transition: width var(--sb-dur) var(--sb-ease), transform 0.3s var(--sb-ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(28px) saturate(1.7);
    backdrop-filter: blur(28px) saturate(1.7);
  }
}
/* Glanzkante oben links — das „Liquid"-Highlight */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--glass-highlight) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(to bottom, rgba(var(--akzent-rgb), 0.07), rgba(var(--akzent-rgb), 0) 45%);
}

/* ── Kopf ── */
.sidebar-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 12px 20px;
  flex-shrink: 0;
  min-height: 66px;
}
.sidebar-logo-img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 10px;
  background: var(--bechtle-dark-green);
  padding: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(var(--akzent-dark-rgb), 0.25);
}
.sidebar-logo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.logo-wordmark {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--glass-ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
}
.logo-subtitle { font-size: 0.7rem; color: var(--glass-ink-soft); white-space: nowrap; }

/* ── Ein-/Ausklappen ── */
.sidebar-toggle {
  position: absolute;
  top: 24px;
  right: -1px;
  width: 26px;
  height: 26px;
  border-radius: 13px 0 0 13px;
  border: 0;
  background: var(--glass-soft-strong);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 2px 6px rgba(var(--akzent-dark-rgb), 0.12);
  color: var(--glass-ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--transition-base), color var(--transition-base), transform var(--sb-dur) var(--sb-ease);
}
.sidebar-toggle:hover { background: var(--surface); color: var(--bechtle-dark-green); }
.sidebar-toggle svg { transition: transform var(--sb-dur) var(--sb-ease); }
.sidebar-toggle:focus-visible,
.sidebar-nav a:focus-visible,
.sidebar-zahnrad:focus-visible {
  outline: 2px solid var(--bechtle-green);
  outline-offset: 2px;
}

/* ── Navigation ── */
.sidebar-nav {
  flex: 1;
  padding: 4px 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;                 /* Leiste erst beim Überfahren */
  scrollbar-color: rgba(var(--akzent-dark-rgb), 0.18) transparent;
  position: relative;
}
.sidebar-nav:hover { scrollbar-width: thin; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.sidebar-nav:hover::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(var(--akzent-dark-rgb), 0.18); border-radius: 99px; }
.nav-list { list-style: none; margin: 0; padding: 0; }

.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  margin: 2px 0;
  border-radius: 14px;
  color: var(--glass-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.sidebar-nav a:hover {
  background: var(--glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.sidebar-nav a.active {
  color: var(--on-akzent);
  font-weight: 600;
  background: linear-gradient(180deg, var(--akzent-hover) 0%, var(--akzent) 55%, var(--akzent-hover) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 6px 16px rgba(var(--akzent-rgb), 0.38);
}
.sidebar-nav .nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bechtle-dark-green);
  opacity: 0.85;
}
.sidebar-nav a.active .nav-icon { color: var(--on-akzent); opacity: 1; }
.sidebar-nav .nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease;
}

/* ── Nav-Gruppen mit Untermenü ── */
.nav-group-kopf { display: flex; align-items: center; }
.nav-group-kopf .nav-link { flex: 1; min-width: 0; margin-right: 0; border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.nav-group-pfeil {
  flex-shrink: 0;
  width: 30px; height: 30px; margin-left: -34px; margin-right: 6px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--glass-ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: transform var(--sb-dur) var(--sb-ease), background 0.15s ease, color 0.15s ease;
}
.nav-group-kopf .nav-link.active + .nav-group-pfeil { color: rgba(255, 255, 255, 0.9); }
.nav-group-pfeil:hover { background: var(--glass-soft); color: var(--bechtle-dark-green); }
.nav-group-kopf .nav-link.active + .nav-group-pfeil:hover { background: rgba(255, 255, 255, 0.22); color: var(--on-akzent); }
.nav-group.offen .nav-group-pfeil { transform: rotate(180deg); }
/* Aufgeklappte Gruppe = ein zusammenhängender Kasten; Unterpunkte hängen an
   einer Führungslinie unter dem Icon des Elterneintrags. */
.nav-group {
  border-radius: 16px;
  transition: background 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}
.nav-group.offen {
  margin: 4px 0;
  padding: 3px 3px 4px;
  background: var(--glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.nav-group.offen .nav-group-kopf .nav-link { margin: 0; }
.nav-group.offen .nav-group-pfeil { margin-right: 4px; }
.nav-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--sb-dur) var(--sb-ease);
}
.nav-sub-liste { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.nav-group.offen .nav-sub { grid-template-rows: 1fr; }
.nav-group.offen .nav-sub-liste { padding: 3px 0 0; }
.nav-sub-link {
  display: flex; align-items: center; gap: 9px;
  min-height: 34px; margin-left: 22px; padding: 6px 10px 6px 14px;
  border-left: 2px solid rgba(var(--akzent-dark-rgb), 0.14);
  border-radius: 0 12px 12px 0;
  font-size: 0.83rem; font-weight: 500; color: var(--glass-ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-sub-link:hover { border-left-color: rgba(var(--akzent-dark-rgb), 0.35); }
.nav-sub-link.active { border-left-color: var(--bechtle-green); }
.nav-sub-link svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--bechtle-dark-green); opacity: 0.7; }
.nav-sub-link span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-sub-link:hover { background: var(--glass-soft); color: var(--glass-ink); }
.nav-sub-link:hover svg, .nav-sub-link.active svg { opacity: 1; }
.nav-sub-link.active { color: var(--bechtle-dark-green); font-weight: 700; background: rgba(var(--akzent-rgb), 0.12); }
html.sb-collapsed .nav-sub, html.sb-collapsed .nav-group-pfeil { display: none; }
html.sb-collapsed .nav-group.offen { margin: 0; padding: 0; background: none; box-shadow: none; }

/* ── Fuß ── */
.sidebar-footer {
  position: relative;
  padding: 10px 12px 14px;
  flex-shrink: 0;
  border-top: 1px solid rgba(var(--akzent-dark-rgb), 0.08);
}
.sidebar-version {
  text-align: center;
  font-size: 0.68rem;
  color: var(--glass-ink-soft);
  margin-bottom: 8px;
}
.sidebar-user { font-size: 0.8rem; color: var(--glass-ink-soft); }
.sidebar-user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.sidebar-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--on-akzent);
  background: linear-gradient(160deg, var(--akzent-hover), var(--bechtle-dark-green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(var(--akzent-dark-rgb), 0.22);
  letter-spacing: 0.02em;
}
.sidebar-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--glass-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role { font-size: 0.72rem; color: var(--glass-ink-soft); }
.sidebar-user-session { font-size: 0.68rem; color: var(--glass-ink-soft); font-variant-numeric: tabular-nums; }
/* Zahnrad + Kontomenü */
.sidebar-avatar { border: 0; cursor: pointer; font-family: inherit; }
.sidebar-zahnrad {
  margin-left: auto;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 0; border-radius: 10px;
  background: var(--glass-soft-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  color: var(--glass-ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.3s var(--sb-ease);
}
.sidebar-zahnrad:hover { background: var(--surface); color: var(--bechtle-dark-green); }
.sidebar-zahnrad[aria-expanded="true"] { background: var(--surface); color: var(--bechtle-dark-green); transform: rotate(60deg); }
.sidebar-zahnrad:focus-visible, .sidebar-avatar:focus-visible { outline: 2px solid var(--bechtle-green); outline-offset: 2px; }
.sidebar-menu {
  position: absolute;
  left: 12px; right: 12px; bottom: calc(100% - 4px);
  padding: 6px;
  border-radius: 16px;
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge);
  z-index: 6;
}
.sidebar-menu-kopf { padding: 8px 10px 6px; }
.sidebar-menu-name { display: block; font-weight: 600; font-size: 0.85rem; color: var(--glass-ink); }
.sidebar-menu-sub { display: block; font-size: 0.72rem; color: var(--glass-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu-trenner { height: 1px; margin: 4px 6px; background: rgba(var(--akzent-dark-rgb), 0.10); }
.sidebar-menu a, .sidebar-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: transparent;
  font: inherit; font-size: 0.85rem; font-weight: 500;
  color: var(--glass-ink); text-align: left; text-decoration: none;
  cursor: pointer;
}
.sidebar-menu a:hover, .sidebar-menu button:hover, .sidebar-menu a:focus-visible, .sidebar-menu button:focus-visible {
  background: rgba(var(--akzent-rgb), 0.12); outline: none;
}
.sidebar-menu svg { color: var(--bechtle-dark-green); flex-shrink: 0; }
.sidebar-menu form { margin: 0; }
.sidebar-menu-abmelden { color: var(--tone-red-fg); }
.sidebar-menu-abmelden svg { color: var(--tone-red-fg); }

/* ── Eingeklappt: Icon-Schiene ── */
html.sb-collapsed .sidebar { width: var(--sb-w-min); }
html.sb-collapsed .sidebar-logo,
html.sb-collapsed .sidebar-nav .nav-label,
html.sb-collapsed .sidebar-user-info,
html.sb-collapsed .sidebar-version,
html.sb-collapsed .sidebar-menu-kopf { display: none; }
html.sb-collapsed .sidebar-header { justify-content: center; padding-left: 12px; padding-right: 12px; }
/* Eingeklappt: die Lasche hängt AUSSEN am Rand des Bands (rund nach außen), damit sie
   das Logo nicht überdeckt — Gegenstück zur Lasche innen im ausgeklappten Zustand. */
html.sb-collapsed .sidebar-toggle { right: -26px; border-radius: 0 13px 13px 0; }
html.sb-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
html.sb-collapsed .sidebar-nav { padding-left: 12px; padding-right: 12px; }
html.sb-collapsed .sidebar-nav a { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
html.sb-collapsed .sidebar-user-row { justify-content: center; }
html.sb-collapsed .sidebar-zahnrad { display: none; }
html.sb-collapsed .sidebar-menu { left: calc(100% + 10px); right: auto; bottom: 8px; width: 240px; }
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-toggle, .sidebar-toggle svg, .sidebar-nav a, .main-wrapper { transition: none !important; }
}

/* ============================================================
   Dashboard — Offboardings & Onboardings nebeneinander (2026-09)
   Ein Element allein (keine Onboardings) füllt die volle Breite,
   zwei teilen sich die Zeile; unter ~820px Inhaltsbreite stapeln sie.
   ============================================================ */
.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  align-items: start;
}
.dashboard-col-main,
.dashboard-col-side { min-width: 0; }
.dashboard-columns > * > .card { margin-bottom: 0; }

/* ============================================================
   Lager — Kacheln je Standort (2026-09)
   ============================================================ */
.lager-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 12px;
  align-items: stretch;           /* alle Kacheln einer Reihe gleich hoch */
}
.lager-kachel {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bechtle-border);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.lager-kachel .lager-zeilen { flex: 1; }
/* Mehr als 7 Gerätetypen: ab der 7. Zeile eingeklappt, Knopf am Kachelfuß klappt auf */
.lager-kachel:not(.alle) .lager-zeile.mehr, .lager-kachel:not(.alle) .lager-detail.mehr { display: none; }
.lager-mehr {
  display: block; width: 100%; border: 0; border-top: 1px solid var(--bechtle-border);
  background: var(--surface-2); color: var(--akzent-ink); font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 8px 12px; cursor: pointer; text-align: left;
}
.lager-mehr:hover { background: var(--akzent-soft); }
.lager-kachel.hat-fehl { border-color: rgba(220, 38, 38, 0.35); }
.lager-kachel-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px 7px;
  background: linear-gradient(to right, rgba(var(--akzent-rgb), 0.12), rgba(var(--akzent-rgb), 0.03));
  border-bottom: 1px solid rgba(var(--akzent-dark-rgb), 0.12);
}
.lager-kachel-titel {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 0.92rem; color: var(--bechtle-dark-green);
}
.lager-kachel-zahlen { display: flex; gap: 10px; font-size: 0.76rem; color: var(--bechtle-text-muted); white-space: nowrap; }
.lager-kachel-zahlen strong { color: var(--bechtle-text); }
.lager-fehl { color: var(--bechtle-danger); font-weight: 600; }
.lager-zeilen { padding: 4px 0; }
.lager-zeile {
  display: grid;
  grid-template-columns: 1fr 34px 40px 44px 16px;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 0.83rem;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-2);
}
.lager-zeile:last-of-type { border-bottom: 0; }
.lager-zeile:hover, .lager-zeile.offen { background: var(--akzent-soft); }
.lager-zeile:focus-visible { outline: 2px solid var(--bechtle-green); outline-offset: -2px; }
.lager-zeile.unter-soll .lager-typ { color: var(--bechtle-danger); font-weight: 600; }
.lager-typ { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lager-ist { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lager-soll { color: var(--bechtle-text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.lager-diff { text-align: right; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.lager-chevron { color: var(--bechtle-text-muted); font-size: 0.85rem; text-align: right; transition: transform 0.15s ease; }
.lager-zeile.offen .lager-chevron { transform: rotate(90deg); color: var(--bechtle-dark-green); }
.lager-detail {
  max-height: 240px; overflow-y: auto;
  background: var(--tone-green-bg); border-bottom: 1px solid var(--surface-2);
  padding: 2px 0;
}
.lager-geraet {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 12px 4px 24px;
  font-size: 0.78rem; color: var(--bechtle-text); text-decoration: none;
}
.lager-geraet:hover { background: var(--akzent-soft); }
.lager-sn { color: var(--bechtle-dark-green); }
.lager-modell { color: var(--bechtle-text-muted); }
.lager-detail .empty-state-sm { padding: 6px 24px; font-size: 0.78rem; }

/* ============================================================
   Geräte — gemeinsamer Kopf Lager | Alle Assets (2026-09)
   ============================================================ */
/* Die Leiste sieht auf JEDER Seite gleich aus (2026-09-21): volle Breite, feste Höhe, alle Reiter gleich fett —
   nur die Markierung wandert. Vorher änderte der fettere aktive Reiter die Breite, und die Schrift des aktiven
   Reiters war im Dunkelmodus dunkelgrün auf dunklem Grund. */
.geraete-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 4px;
  min-height: 44px; box-sizing: border-box;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 14px;
  width: 100%;
}
.geraete-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; box-sizing: border-box;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 0.875rem; font-weight: 600; line-height: 1;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.geraete-tab:hover { background: var(--akzent-soft); color: var(--text); }
.geraete-tab.aktiv {
  background: var(--surface); color: var(--akzent-ink);
  box-shadow: inset 0 0 0 1px rgba(var(--akzent-rgb), 0.45), var(--shadow-sm);
}
.geraete-tab-zahl {
  /* Ruhige Zähler: eine Form für alle, der aktive nur getönt statt voll gefüllt. */
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 26px; box-sizing: border-box; padding: 0 7px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--tone-gray-bg); color: var(--tone-gray-fg);
}
.geraete-tab.aktiv .geraete-tab-zahl { background: rgba(var(--akzent-rgb), 0.18); color: var(--akzent-ink); }
.geraete-tabs-hinweis { margin: 0 10px 0 auto; font-size: 0.76rem; color: var(--bechtle-text-muted); white-space: nowrap; }
@media (max-width: 640px) { .geraete-tabs-hinweis { display: none; } }

/* Dunkel: Funktionsbuttons (.btn-secondary & Co.) — dunkelgrüne Schrift auf halbtransparentem
   Weiß war kaum lesbar; jetzt helle Akzentschrift auf Fläche mit klarem Rand. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="hell"]) .btn-secondary, html:not([data-theme="hell"]) .btn-outline,
  html:not([data-theme="hell"]) .btn-outline-secondary, html:not([data-theme="hell"]) .btn-light {
    color: var(--akzent-ink); background: var(--surface-2); border-color: var(--border-strong); box-shadow: none;
  }
  html:not([data-theme="hell"]) .btn-secondary:hover, html:not([data-theme="hell"]) .btn-outline:hover,
  html:not([data-theme="hell"]) .btn-outline-secondary:hover, html:not([data-theme="hell"]) .btn-light:hover {
    background: var(--surface-3); border-color: var(--akzent-ink); color: var(--akzent-ink);
  }
}
html[data-theme="dunkel"] .btn-secondary, html[data-theme="dunkel"] .btn-outline,
html[data-theme="dunkel"] .btn-outline-secondary, html[data-theme="dunkel"] .btn-light {
  color: var(--akzent-ink); background: var(--surface-2); border-color: var(--border-strong); box-shadow: none;
}
html[data-theme="dunkel"] .btn-secondary:hover, html[data-theme="dunkel"] .btn-outline:hover,
html[data-theme="dunkel"] .btn-outline-secondary:hover, html[data-theme="dunkel"] .btn-light:hover {
  background: var(--surface-3); border-color: var(--akzent-ink); color: var(--akzent-ink);
}

/* ============================================================
   Prozessbeschreibung (Bausteine) — Abschnitte, nummerierte Schritte
   ============================================================ */
.prozess-text { font-size: 0.9rem; line-height: 1.55; padding: 10px 14px; border-left: 3px solid var(--akzent-marke); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.prozess-text p { margin: 0 0 8px; }
.prozess-text .prozess-abschnitt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent-ink); margin: 12px 0 4px; }
.prozess-text .prozess-abschnitt:first-child { margin-top: 0; }
.prozess-text ol.prozess-schritte { margin: 0 0 8px; padding-left: 0; list-style: none; counter-reset: schritt; }
.prozess-text ol.prozess-schritte li { position: relative; padding-left: 30px; margin: 4px 0; counter-increment: schritt; }
.prozess-text ol.prozess-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--akzent); color: var(--on-akzent); font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.prozess-text ul.prozess-punkte { margin: 0 0 8px; padding-left: 18px; }
.prozess-text ul.prozess-punkte li { margin: 3px 0; }
.prozess-text.prozess-klein { font-size: 0.82rem; padding: 8px 12px; margin-top: 4px; }
.prozess-text.prozess-klein ol.prozess-schritte li::before { width: 18px; height: 18px; font-size: 0.66rem; }

/* ============================================================
   Hilfe-Fragezeichen mit Tooltip (2026-09-18) — statt langer Hinweistexte
   ============================================================ */
.hilfe { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 5px; vertical-align: -3px; color: var(--bechtle-text-muted); cursor: help; border-radius: 50%; }
.hilfe:hover, .hilfe:focus-visible { color: var(--akzent-ink); outline: none; }
.hilfe .hilfe-text {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 280px; padding: 8px 11px; border-radius: 10px; z-index: 80;
  background: var(--bechtle-text); color: var(--surface); font-size: 0.78rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal;
  box-shadow: 0 8px 24px rgba(var(--akzent-dark-rgb), 0.18); opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.hilfe .hilfe-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--bechtle-text); }
.hilfe:hover .hilfe-text, .hilfe:focus-visible .hilfe-text, .hilfe:focus .hilfe-text { opacity: 1; visibility: visible; }
.hilfe-breit .hilfe-text { max-width: 380px; }
label .hilfe, .form-label .hilfe { font-weight: 400; }
@media (max-width: 640px) { .hilfe .hilfe-text { left: auto; right: -8px; transform: none; max-width: min(280px, 80vw); } .hilfe .hilfe-text::after { left: auto; right: 12px; transform: none; } }

/* ============================================================
   Ungespeicherte Vorgänge + Bearbeitungssperren (2026-09-18)
   ============================================================ */
.offene-vorgaenge { margin: 14px 10px 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.vorgaenge-kopf { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bechtle-text-muted); padding: 0 6px 6px; }
.vorgang { display: flex; align-items: center; gap: 2px; border-radius: 9px; min-width: 0; }
.vorgang:hover { background: var(--glass-soft); }
.vorgang-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 4px 5px 8px; text-decoration: none; color: var(--bechtle-text); overflow: hidden; }
.vorgang-kopf, .vorgang-unten { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vorgang-typ { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.vorgang-typ-ticket { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); }
.vorgang-typ-ma { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.vorgang-typ-asset { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.vorgang-typ-baustein, .vorgang-typ-feedback { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }
.vorgang-ident { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorgang-text { flex: 1; min-width: 0; font-size: 0.74rem; color: var(--bechtle-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorgang-zeit { flex-shrink: 0; font-size: 0.68rem; color: var(--bechtle-text-muted); font-variant-numeric: tabular-nums; }
.vorgang-x { flex-shrink: 0; border: 0; background: transparent; color: var(--bechtle-text-muted); cursor: pointer; padding: 4px 8px; font-size: 1rem; line-height: 1; border-radius: 6px; }
.vorgang-x:hover { color: var(--tone-red-fg); background: var(--tone-red-bg); }
.offene-vorgaenge { overflow: hidden; text-align: left; }
/* Seitenleisten-Links zentrieren ihren Inhalt — hier linksbündig und volle Breite, sonst wird links abgeschnitten */
#offene-vorgaenge .vorgang-link { align-items: stretch; justify-content: flex-start; text-align: left; }
#offene-vorgaenge .vorgang-kopf, #offene-vorgaenge .vorgang-unten { justify-content: flex-start; width: 100%; }
html.sb-collapsed .offene-vorgaenge { display: none; }
/* HR-Cockpit: Chips in der Kopfzeile statt Seitenleiste */
.hr-vorgaenge { margin: 0 6px 0 auto; padding: 0; border: 0; display: flex; gap: 6px; align-items: center; }
.hr-vorgaenge .vorgaenge-kopf { display: none; }
.hr-vorgaenge .vorgang { background: var(--tone-amber-bg); color: var(--tone-amber-fg); border-radius: 999px; padding: 0 2px 0 8px; }
.hr-vorgaenge .vorgang-link { flex-direction: row; gap: 6px; padding: 3px 4px; color: inherit; align-items: center; max-width: 260px; }
.hr-vorgaenge .vorgang-ident { max-width: 140px; font-size: 0.78rem; }
.hr-vorgaenge .vorgang-unten .vorgang-text { display: none; }
.hr-vorgaenge .vorgang-zeit { font-size: 0.68rem; color: inherit; opacity: .75; }
.vg-dialog-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vg-dialog { background: var(--surface); color: var(--bechtle-text); border: 1px solid var(--bechtle-border); border-radius: 16px; padding: 20px 22px; width: min(440px, 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.vg-dialog-titel { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.vg-dialog-text { font-size: 0.9rem; line-height: 1.5; color: var(--bechtle-text-light); margin-bottom: 16px; }
.vg-dialog-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vg-dialog-feld { width: 100%; margin-bottom: 6px; resize: vertical; }
.vg-dialog-fehler { color: var(--tone-red-fg); font-size: 0.8rem; margin-bottom: 10px; }
.vorgang-hinweis, .sperre-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; font-size: 0.85rem;
}
.vorgang-hinweis { background: var(--tone-amber-bg); color: var(--tone-amber-fg); border: 1px solid var(--tone-amber-solid); }
.sperre-banner { background: var(--tone-red-bg); color: var(--tone-red-fg); border: 1px solid var(--tone-red-solid); font-weight: 500; }
form.gesperrt .form-control, form.gesperrt .form-input, form.gesperrt .form-select, form.gesperrt textarea { opacity: .6; }

/* ============================================================
   Glocke — In-App-Benachrichtigungen (2026-09-18)
   ============================================================ */
.glocke { position: relative; margin-left: auto; flex-shrink: 0; }
.page-header .glocke { order: 99; }
.hr-nav .glocke, .hr-topbar .glocke { margin-left: 8px; margin-right: 8px; }
.glocke-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bechtle-border);
  background: var(--surface); color: var(--bechtle-text); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.glocke-knopf:hover { background: var(--akzent-soft); color: var(--akzent-ink); }
.glocke-knopf.hat-neue { color: var(--akzent-marke); border-color: var(--akzent-marke); box-shadow: 0 0 0 3px rgba(var(--akzent-dark-rgb), 0.12); }
.glocke-zahl {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--signal); color: var(--on-akzent);
  font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.glocke-panel {
  position: fixed; top: 60px; right: 16px; width: min(380px, calc(100vw - 24px)); z-index: 1200;
  background: var(--surface); border: 1px solid var(--bechtle-border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(var(--akzent-dark-rgb), 0.16), 0 2px 6px rgba(var(--akzent-dark-rgb), 0.08);
  overflow: hidden;
}
.glocke-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--bechtle-border); font-size: 0.9rem; }
.glocke-liste { max-height: min(60vh, 460px); overflow: auto; }
.glocke-leer { padding: 18px 14px; color: var(--bechtle-text-muted); font-size: 0.85rem; text-align: center; }
.glocke-eintrag { display: flex; align-items: stretch; border-bottom: 1px solid var(--bechtle-border); }
.glocke-eintrag:last-child { border-bottom: 0; }
.glocke-eintrag.neu { background: var(--tone-green-bg); }
.glocke-text { flex: 1; min-width: 0; display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 9px 4px 9px 12px; color: inherit; text-decoration: none; font-size: 0.85rem; line-height: 1.35; }
a.glocke-text:hover { background: var(--glass-soft); }
.glocke-icon { font-size: 0.95rem; line-height: 1.2; }
.glocke-inhalt { overflow-wrap: anywhere; }
.glocke-zeit { grid-column: 2; font-size: 0.72rem; color: var(--bechtle-text-muted); }
.glocke-x { border: 0; background: transparent; color: var(--bechtle-text-muted); cursor: pointer; padding: 0 12px; font-size: 1.1rem; line-height: 1; }
.glocke-x:hover { color: var(--tone-red-fg); }
@media (max-width: 640px) { .glocke-panel { left: 12px !important; right: 12px !important; width: auto; } }
/* Browser-Benachrichtigungen im Glocken-Panel (static/js/push.js) */
.glocke-push { border-top: 1px solid var(--bechtle-border); font-size: 0.85rem; }
.glocke-push > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; color: var(--bechtle-text-muted); }
.glocke-push > summary::-webkit-details-marker { display: none; }
.glocke-push > summary:hover { background: var(--glass-soft); color: var(--bechtle-text); }
.glocke-push .push-status { font-size: 0.75rem; text-align: right; }
.glocke-push .push-status.ist-an { color: var(--tone-green-fg); font-weight: 600; }
.glocke-push .push-status.ist-blockiert { color: var(--tone-red-fg); font-weight: 600; }
.glocke-push-inhalt { padding: 2px 12px 12px; display: grid; gap: 8px; }
.glocke-push-inhalt .form-text { margin: 0; }
.glocke-push-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.glocke-panel:has(.glocke-push[open]) .glocke-liste { max-height: min(34vh, 460px); }
.glocke-push .hinweis-box { padding: 8px 10px; border: 1px solid var(--bechtle-border); border-radius: 10px; background: var(--surface-2); font-size: 0.8rem; line-height: 1.4; }

/* ============================================================
   Lager — Standort-Schalter + Statistik (2026-09-18)
   ============================================================ */
.lager-standorte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; align-items: center; }
.lager-typ-filter { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lager-typ-filter .form-select { height: 34px; min-width: 190px; font-size: 0.85rem; }
.lager-standort-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--bechtle-border); background: var(--surface);
  color: var(--bechtle-text); font-size: 0.85rem; font-weight: 500; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lager-standort-btn:hover { background: var(--akzent-soft); border-color: transparent; color: var(--bechtle-text); }
.lager-standort-btn.aktiv { background: var(--akzent); color: var(--on-akzent); border-color: transparent; font-weight: 600; }
.lager-standort-btn.aktiv .geraete-tab-zahl { background: rgba(var(--akzent-dark-rgb), 0.25); color: var(--on-akzent); }
.lager-fehl-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--bechtle-danger); flex-shrink: 0; }
.lager-standort-btn.aktiv .lager-fehl-punkt { background: var(--on-akzent); }
.lager-statistik { margin-bottom: 16px; }
.lager-kpis { margin-bottom: 16px; }
.lager-stat-spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px; align-items: start;
}
.lager-stat-titel {
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bechtle-text-muted); margin: 0 0 8px;
}
.lager-stat-liste { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.lager-stat-liste li {
  display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--bechtle-border); font-variant-numeric: tabular-nums;
}
.lager-stat-liste li:last-child { border-bottom: 0; }
.lager-track { position: relative; height: 10px; border-radius: 5px; background: var(--bechtle-light-bg); overflow: hidden; }
.lager-track-soll { position: absolute; inset: 0 auto 0 0; background: rgba(var(--akzent-dark-rgb), 0.16); border-right: 2px solid var(--bechtle-text-muted); }
.lager-track-ist { position: absolute; inset: 0 auto 0 0; background: var(--akzent-marke); border-radius: 5px; min-width: 0; }
.lager-track-ist.unter-soll { background: var(--tone-red-solid); }
.lager-statistik .dash-zeile { grid-template-columns: 130px 1fr 64px; }
.lager-statistik .dash-zeile.mit-wert { grid-template-columns: 130px 1fr 64px 92px; }
.lager-statistik .dash-zahl .lager-soll { font-weight: 400; }
/* Seit 5.18: links Bestand und Wert in einer Zeile, rechts gestapelte Blöcke —
   die rechte Spalte stand vorher fast leer. */
.lager-wert-zahl { text-align: right; font-size: 0.82rem; color: var(--bechtle-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lager-wert-quellen { margin: 10px 0 0; }
.lager-stat-rechts { display: grid; gap: 16px; align-content: start; }
.preis-lage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); border-radius: 14px; overflow: hidden; }
.preis-lage > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--border); min-width: 0; }
.preis-lage > div:first-child { border-left: 0; }
.preis-lage strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.preis-lage span { font-size: 0.78rem; color: var(--text-muted); }
.preis-lage .rot strong { color: var(--tone-red-fg); }
.preis-lage .gelb strong { color: var(--tone-amber-fg); }
.preis-lage .gruen strong { color: var(--tone-green-fg); }
.preis-regeln { margin: 0; padding-left: 20px; font-size: 0.86rem; display: grid; gap: 4px; }
.preis-nur-offen { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-muted); cursor: pointer; }
.preis-typ { border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 10px; }
.preis-typ > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.preis-typ > summary::-webkit-details-marker { display: none; }
.preis-typ > summary:hover { background: var(--akzent-soft); border-radius: 12px; }
.preis-typ[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.preis-typ-name { font-weight: 600; }
.preis-typ-zahl, .preis-typ-pauschale { font-size: 0.8rem; color: var(--text-muted); }
.preis-typ-offen { font-size: 0.74rem; padding: 1px 8px; border-radius: 999px; background: var(--tone-amber-bg); color: var(--tone-amber-fg); margin-left: auto; }
.preis-typ form { padding: 10px 14px 14px; }
.preis-tabelle { margin-bottom: 10px; }
.preis-tabelle .preis-pauschale-zeile { background: rgba(var(--glow-rgb), 0.05); }
.preis-feld { display: flex; align-items: center; gap: 6px; }
.preis-feld .form-control { height: 32px; padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; }
/* Der geerbte Preis steht als Platzhalter — deutlich blasser als ein eingetragener Wert. */
.preis-feld .form-control::placeholder { color: var(--text-light, var(--text-muted)); opacity: 0.6; font-style: italic; }
.preis-tabelle td:nth-child(2) { white-space: nowrap; }
.preis-feld span { color: var(--text-muted); font-size: 0.85rem; }
.preis-offen { color: var(--tone-amber-fg); font-weight: 600; }
@media (max-width: 900px) { .preis-lage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .preis-lage > div:nth-child(odd) { border-left: 0; } .preis-lage > div:nth-child(n+3) { border-top: 1px solid var(--border); } }

/* ============================================================
   Dashboard — Fakten & Daten (2026-09)
   ============================================================ */
.dash-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  align-items: start;
  margin: 16px 0;
}
.dash-reihe-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.dash-reihe > .card { margin-bottom: 0; }
.dash-balken .dash-zeile {
  display: grid; grid-template-columns: 120px 1fr 40px; gap: 10px; align-items: center;
  padding: 4px 0; font-size: 0.85rem;
}
.dash-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-track {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--bechtle-light-bg); min-width: 6px;
}
.dash-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.dash-legende {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
  font-size: 0.75rem; color: var(--bechtle-text-muted);
}
.dash-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
/* Bewegungen: Diagramm füllt die Kartenhöhe (Karten einer Reihe sind gleich hoch), nie flacher als 150px.
   Oben bleibt Platz für die Zahl über der höchsten Säule; 0-Wochen zeigen nur die Grundlinie. */
.dash-bewegungen { display: flex; flex-direction: column; }
.dash-wochen { position: relative; flex: 1; min-height: 150px; display: flex; gap: 6px; }
.dash-woche { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dash-saeulen {
  flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  padding-top: 16px; border-bottom: 1px solid var(--border);
}
.dash-saeule { position: relative; width: 38%; max-width: 22px; border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.dash-saeule.null { height: 0; }
.dash-saeule-wert {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px;
  font-size: 0.65rem; line-height: 1; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-woche.aktuell .dash-kw { color: var(--text); font-weight: 600; }
.dash-wochen-leer {
  position: absolute; inset: 0 0 22px; margin: 0; display: grid; place-items: center; text-align: center;
  font-size: 0.8rem; color: var(--text-muted);
}
.dash-legende-zahl { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }
.dash-kw { font-size: 0.7rem; color: var(--bechtle-text-muted); font-variant-numeric: tabular-nums; }
.dash-todo, .dash-aktiv { list-style: none; margin: 0; padding: 4px 0; }
.dash-todo-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; font-size: 0.875rem; border-bottom: 1px solid var(--surface-2);
}
.dash-todo-zeile:last-child { border-bottom: 0; }
.dash-todo-zeile a { color: var(--bechtle-text); text-decoration: none; }
.dash-todo-zeile a:hover { color: var(--bechtle-dark-green); text-decoration: underline; }
.dash-todo-zahl {
  min-width: 34px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font-weight: 700; font-size: 0.8rem; font-variant-numeric: tabular-nums;
  background: rgba(var(--akzent-dark-rgb), 0.08); color: var(--bechtle-dark-green);
}
.dash-todo-zeile.dringend .dash-todo-zahl { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.dash-todo-zeile.leer { color: var(--bechtle-success); }
.dash-aktiv li { display: flex; gap: 12px; padding: 7px 18px; font-size: 0.82rem; border-bottom: 1px solid var(--surface-2); }
.dash-aktiv li:last-child { border-bottom: 0; }
.dash-aktiv li.leer { color: var(--bechtle-text-muted); }
.dash-aktiv-zeit { flex: 0 0 72px; color: var(--bechtle-text-muted); font-variant-numeric: tabular-nums; }
.dash-aktiv-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offboarding-list.kompakt .offboarding-item { padding: 8px 18px; }
.offboarding-list.kompakt .offboarding-item.leer { justify-content: center; font-size: 0.85rem; }
.offboarding-list.kompakt .offboarding-item.leer a { color: var(--bechtle-dark-green); }

/* ============================================================
   Ticket-Detail — links Infos, rechts Schritte + Konversation (2026-09)
   ============================================================ */
/* Seit 5.10: breite Hauptspalte (Beschreibung, Schritte, Verlauf) + schmale Nebenspalte mit den
   Zuordnungen. Dort steht der Wert, das Formular klappt erst mit „Ändern" auf. */
.ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
  align-items: start;
}
.ticket-haupt, .ticket-neben { min-width: 0; }
.ticket-neben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ticket-neben > .card { margin: 0; }
.ticket-neben .card-header { padding: 10px 14px; min-height: 0; }
.ticket-neben .card-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ticket-neben .card-body { padding: 12px 14px; }
.neben-wert { margin: 0 0 8px; font-weight: 600; }
.neben-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.neben-liste li { display: grid; gap: 1px; }
.neben-aendern > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  font-size: 0.8rem; font-weight: 600; color: var(--akzent-ink);
  padding: 3px 8px; margin-left: -8px; border-radius: 8px;
}
.neben-aendern > summary::-webkit-details-marker { display: none; }
.neben-aendern > summary:hover { background: var(--akzent-soft); }
.neben-aendern > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.neben-aendern[open] > summary { margin-bottom: 8px; }
details#bearbeiten:not([open]) { display: none; }
/* Alle Assets: Bestand in Zahlen + Prüfkacheln (5.15). Kacheln in festem Raster, damit sie bündig stehen. */
.asset-lage { display: grid; gap: 12px; margin: 0 0 14px; }
.asset-lage-zahlen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); border-radius: 14px; overflow: hidden; }
.asset-lage-zahlen > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-left: 1px solid var(--border); min-width: 0; }
.asset-lage-zahlen > div:first-child { border-left: 0; }
.asset-lage-zahlen strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.asset-lage-zahlen span { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-lage-zahlen .rot strong { color: var(--tone-red-fg); }
.asset-lage-zahlen .gelb strong { color: var(--tone-amber-fg); }
.asset-lage-zahlen .gruen strong { color: var(--tone-green-fg); }
.asset-pruef { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); border-radius: 14px; padding: 12px 16px 14px; }
.asset-pruef-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.asset-pruef-kopf h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.asset-pruef-kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.asset-pruef-kachel { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); color: inherit; text-decoration: none; min-width: 0; transition: background 0.15s ease, box-shadow 0.15s ease; }
.asset-pruef-kachel:hover { background: var(--akzent-soft); }
.asset-pruef-kachel.aktiv { box-shadow: inset 0 0 0 2px var(--akzent); background: var(--akzent-soft); }
.asset-pruef-kachel strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tone-amber-fg); }
.asset-pruef-kachel.gesamt strong { color: var(--tone-red-fg); }
.asset-pruef-kachel span { font-size: 0.78rem; line-height: 1.3; }
.asset-pruef-kachel em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.asset-pruef-tun { margin: 12px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.asset-pruef-tun strong { color: var(--text); }
.asset-sw-liste { margin-top: 12px; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
/* Je Zielschreibweise eine Zeile: Ziel (änderbar) | Abweichungen zum An- und Abwählen | Knopf. Nichts wird abgeschnitten, lange Namen brechen um. */
.asset-sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: end; margin: 0; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 0.85rem; }
.asset-sw-ziel { display: grid; gap: 3px; min-width: 0; }
.asset-sw-ziel label { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.03em; }
.asset-sw-ziel .form-control { height: 32px; padding: 0 10px; font-size: 0.85rem; font-weight: 600; }
.asset-sw-varianten { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.asset-sw-variante { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; }
.asset-sw-variante:has(input:not(:checked)) { opacity: 0.55; }
.asset-sw-variante:has(input:not(:checked)) .asset-sw-von { text-decoration: line-through; }
.asset-sw-von { color: var(--tone-red-fg); overflow-wrap: anywhere; }
.asset-sw-n { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.asset-sw > button { white-space: nowrap; margin-bottom: 19px; }
.asset-befunde { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.asset-befunde span { font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: var(--tone-amber-bg); color: var(--tone-amber-fg); white-space: nowrap; }
@media (max-width: 1100px) { .asset-lage-zahlen, .asset-pruef-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } .asset-lage-zahlen > div:nth-child(4) { border-left: 0; } .asset-lage-zahlen > div:nth-child(n+4) { border-top: 1px solid var(--border); } }
@media (max-width: 640px) { .asset-lage-zahlen, .asset-pruef-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asset-sw { grid-template-columns: minmax(0, 1fr); } .asset-sw-varianten { grid-row: auto; } .asset-sw > button { margin-bottom: 0; justify-self: start; } }

/* Mehrere Checkmk-Instanzen + Aktionen (6.0) */
.mon-kopfleiste { flex-wrap: wrap; }
.mon-systemwahl { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 2px; border-radius: 10px; background: var(--surface-2); }
.mon-system { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.mon-system:hover { background: var(--akzent-soft); color: var(--text); }
.mon-system.aktiv { background: var(--surface); color: var(--akzent-ink); box-shadow: inset 0 0 0 1px var(--border); }
.mon-system.aus { opacity: 0.55; }
.mon-marke.ticket { background: var(--akzent-soft); color: var(--akzent-ink); font-weight: 600; text-decoration: none; }
.mon-aktion { position: relative; display: inline-block; }
.mon-aktion > summary { list-style: none; cursor: pointer; padding: 2px 8px; }
.mon-aktion > summary::-webkit-details-marker { display: none; }
.mon-aktion-menue { position: absolute; right: 0; top: 100%; z-index: 60; width: 300px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-lg, 0 12px 28px rgba(0,0,0,.28)); }
.mon-aktion-menue strong { display: block; font-size: 0.84rem; margin-bottom: 8px; overflow-wrap: anywhere; }
.mon-aktion-menue .form-control { height: 32px; font-size: 0.85rem; }
.mon-aktion-knoepfe { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.mon-aktion-knoepfe .form-control { width: 120px; }
.cmk-system { border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 10px; }
.cmk-system > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.cmk-system > summary::-webkit-details-marker { display: none; }
.cmk-system > summary:hover { background: var(--akzent-soft); border-radius: 12px; }
.cmk-system[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.cmk-form { padding: 12px 14px 14px; }
.cmk-optionen { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }
.cmk-optionen label { display: inline-flex; align-items: center; gap: 6px; }

/* Vorschau-Funktionen (Einstellungen, System) */
.vorschau-block { padding: 12px 0; border-bottom: 1px solid var(--border); }
.vorschau-block:last-child { border-bottom: 0; }
.vorschau-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.vorschau-leute { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.vorschau-zuweisen { display: flex; align-items: center; gap: 6px; margin: 0; }
.vorschau-zuweisen .form-control { height: 32px; padding: 0 10px; font-size: 0.85rem; max-width: 260px; }

/* ============================================================
   Server & Netzwerk — Monitoring aus Checkmk (6.0)
   Zustandsfarben kommen aus den Ton-Tokens, damit Hell und Dunkel stimmen.
   ============================================================ */
.mon-lage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); border-radius: 14px; overflow: hidden; }
.mon-lage > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--border); min-width: 0; }
.mon-lage > div:first-child { border-left: 0; }
.mon-lage strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.mon-lage span { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-lage .rot strong { color: var(--tone-red-fg); }
.mon-lage .gelb strong { color: var(--tone-amber-fg); }
.mon-lage .gruen strong { color: var(--tone-green-fg); }
.mon-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.mon-karte { margin: 0; display: flex; flex-direction: column; }
.mon-karte > .card-body { flex: 1; min-height: 0; }
.mon-scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mon-scroll.gross { max-height: min(68vh, 700px); }
.mon-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mon-punkt.gedaempft { opacity: 0.45; }
.mon-z0 { --mon-bg: var(--tone-green-bg); --mon-fg: var(--tone-green-fg); --mon-solid: var(--tone-green-solid); }
.mon-z1 { --mon-bg: var(--tone-amber-bg); --mon-fg: var(--tone-amber-fg); --mon-solid: var(--tone-amber-solid); }
.mon-z2 { --mon-bg: var(--tone-red-bg); --mon-fg: var(--tone-red-fg); --mon-solid: var(--tone-red-solid); }
.mon-z3 { --mon-bg: var(--tone-gray-bg); --mon-fg: var(--tone-gray-fg); --mon-solid: var(--border-strong, var(--border)); }
span.mon-punkt { background: var(--mon-solid); }
.mon-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: var(--mon-bg); color: var(--mon-fg); white-space: nowrap; }
.mon-chip.klein { padding: 1px 7px; font-size: 0.7rem; }
.mon-chip b { font-variant-numeric: tabular-nums; }
.mon-marke { font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.mon-zeile { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.mon-zeile:last-child { border-bottom: 0; }
.mon-zeile.gedaempft { opacity: 0.6; }
.mon-zeile-text { min-width: 0; }
.mon-zeile-name { font-size: 0.86rem; font-weight: 600; color: var(--text); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.mon-zeile-name:hover { color: var(--akzent-ink); }
.mon-zeile-zusatz { font-size: 0.74rem; color: var(--text-muted); margin-left: 6px; }
.mon-zeile-ausgabe { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-zeile-marken { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.mon-zeile-seit { font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 58px; text-align: right; }
.mon-stand { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.mon-stand-fehler { color: var(--tone-red-fg); font-weight: 600; }
.mon-dienst-zaehler { display: flex; gap: 4px; flex-wrap: wrap; }
.mon-kopf { display: grid; gap: 10px; }
.mon-kopf-titel { display: flex; align-items: center; gap: 12px; }
.mon-kopf-titel h2 { margin: 0; font-size: 1.15rem; }
.mon-kopf-unter { font-size: 0.8rem; color: var(--text-muted); }
.mon-kopf-marken { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mon-ausgabe { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.84rem; white-space: pre-wrap; }
.mon-host-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: start; }
.mon-neben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mon-neben > .card { margin: 0; }
.mon-notiz { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 0.84rem; white-space: pre-wrap; }
@media (max-width: 1400px) { .mon-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mon-lage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .mon-raster, .mon-host-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .mon-lage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Alle Assets: Statistik zur aktuellen Auswahl (5.19) — vier gleich breite Blöcke, Zahlen bündig. */
.asset-statistik { margin-bottom: 14px; }
.asset-statistik .asset-lage-zahlen span { white-space: normal; }
.asset-stat-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.asset-stat-raster .dash-zeile { grid-template-columns: 116px 1fr 44px; }
.asset-stat-raster .dash-zeile.mit-wert { grid-template-columns: 116px minmax(0, 1fr) 44px 78px; }
.asset-stat-hebel { max-width: 520px; }
@media (max-width: 1400px) { .asset-stat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .asset-stat-raster { grid-template-columns: minmax(0, 1fr); } }

/* Mitarbeiter-Shop als Vorschau in der Oberfläche: der echte Shop in einem Rahmen mit Seitenhöhe. */
.shop-rahmen { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); }
.shop-rahmen > iframe { display: block; width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 0; }
.anlegen-melder-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 640px) { .anlegen-melder-zeile { grid-template-columns: minmax(0, 1fr); } }
/* Ohne gewählten Baustein ist die Karte nur eine schmale Auswahlzeile. */
.baustein-leer > .card-body { padding-block: 12px; }
@media (max-width: 1100px) { .ticket-layout { grid-template-columns: minmax(0, 1fr); } }
.ticket-meta { font-size: 0.85rem; border-collapse: collapse; width: 100%; }
.ticket-meta td { padding: 3px 0; vertical-align: top; }
.ticket-meta td:first-child { color: var(--bechtle-text-muted); width: 120px; padding-right: 10px; }
.ticket-bilder { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ticket-bilder.klein { margin: 8px 0 0; }
.ticket-bild {
  position: relative; display: block;
  width: 120px; height: 90px; border-radius: 10px; overflow: hidden;
  background: var(--bechtle-light-bg); box-shadow: var(--shadow-sm);
}
/* Seit 6.0 stehen Bilder in der Nachricht selbst: ganz zu sehen statt beschnitten,
   und ein Klick öffnet sie im Betrachter statt in einem neuen Tab. */
.ticket-bilder.klein .ticket-bild { width: auto; height: auto; max-width: min(100%, 420px); max-height: 280px; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); cursor: zoom-in; }
.ticket-bilder.klein .ticket-bild img { width: auto; height: auto; max-width: min(100%, 420px); max-height: 280px; object-fit: contain; }
.ticket-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.ticket-bild:hover img { transform: scale(1.04); }
.ticket-bilder.klein .ticket-bild:hover img { transform: none; }
/* Auswahl vor dem Absenden (auch aus der Zwischenablage) */
.bild-vorschau { display: flex; flex-wrap: wrap; gap: 8px; }
.bild-chip { position: relative; display: inline-flex; align-items: center; max-width: 160px; border-radius: 8px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 0.75rem; }
.bild-chip img { width: 84px; height: 64px; object-fit: cover; display: block; }
.bild-chip > span { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bild-chip-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 5px; background: rgba(var(--glow-rgb), 0.55); color: var(--on-akzent); font-size: 0.85rem; line-height: 1; cursor: pointer; }
.bild-chip-x:hover { background: var(--tone-red-solid); }
/* Betrachter */
body.bb-offen { overflow: hidden; }
.bildbetrachter { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: var(--overlay-fill, rgba(0, 0, 0, 0.82)); backdrop-filter: blur(3px); }
.bildbetrachter[hidden] { display: none; }
.bildbetrachter img { max-width: min(96vw, 1400px); max-height: 82vh; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); background: var(--surface); }
.bb-kopf { display: flex; align-items: center; gap: 12px; max-width: min(96vw, 1400px); width: 100%; color: var(--glass-ink, rgba(255, 255, 255, 0.95)); }
.bb-titel { flex: 1; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-tab, .bb-zu { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: rgba(var(--glow-rgb), 0.25); color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; text-decoration: none; }
.bb-tab:hover, .bb-zu:hover { background: rgba(var(--glow-rgb), 0.5); }
@media (prefers-reduced-motion: reduce) { .ticket-bild img { transition: none; } }
.ticket-bild-loeschen { position: absolute; top: 4px; right: 4px; margin: 0; }
.ticket-bild-loeschen button {
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: rgba(16, 40, 28, 0.7); color: var(--on-akzent); font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.ticket-bild-loeschen button:hover { background: var(--tone-red-solid); }
.ticket-system { display: flex; gap: 8px; align-items: baseline; padding: 4px 12px; margin-bottom: 6px; font-size: 0.8rem; color: var(--bechtle-text-muted); }
/* Mehrzeilige Systemeinträge (z. B. BeGa-Antrag mit Bestellzettel): Zeilenumbrüche bleiben, Leerraum fällt zusammen */
.ticket-system-text { white-space: pre-line; }
.ticket-beitrag { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; }
.ticket-beitrag.melder { background: var(--bechtle-light-bg); }
.ticket-beitrag.bearbeiter { background: var(--tone-blue-bg); }
.ticket-beitrag.intern { background: var(--tone-amber-bg); border: 1px dashed var(--tone-amber-solid); }
.ticket-beitrag-kopf { font-size: 0.8rem; color: var(--bechtle-text-muted); margin-bottom: 4px; }
.schritte-balken { height: 8px; border-radius: 4px; background: var(--bechtle-light-bg); overflow: hidden; margin-bottom: 10px; }
.schritte-balken > div { height: 100%; background: linear-gradient(90deg, var(--akzent-hover), var(--bechtle-green)); transition: width 0.3s ease; }
.schritte-liste { list-style: none; margin: 0; padding: 0; }
.schritte-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-2); font-size: 0.9rem; }
.schritte-liste li:last-child { border-bottom: 0; }
.schritte-liste li.erledigt .schritt-text { text-decoration: line-through; color: var(--bechtle-text-muted); }
.schritte-liste form { margin: 0; display: flex; }
.schritte-liste input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--bechtle-green); cursor: pointer; }
.schritt-punkt { width: 17px; text-align: center; color: var(--bechtle-green); font-weight: 700; }
.schritt-text { flex: 1; min-width: 0; }
.schritt-meta { font-size: 0.72rem; color: var(--bechtle-text-muted); white-space: nowrap; }

/* Dashboard-Widgets: 6-spaltiges Raster, Breite je Widget; Anpassen-Modus */
.dash-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: stretch; }
.dash-widget { min-width: 0; display: flex; flex-direction: column; }
.dash-widget > .card { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }
.dash-widget > .card > .card-body { flex: 1; }
.dash-widget > .stats-grid { margin-bottom: 0; }
.dash-grid.anpassen .dash-widget { outline: 2px dashed rgba(var(--akzent-rgb), 0.45); outline-offset: 6px; border-radius: 14px; }
.dash-werkzeuge { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.dash-werkzeuge form { margin: 0; }
.dash-werkzeuge-titel { font-size: 0.8rem; font-weight: 600; color: var(--bechtle-dark-green); margin-right: auto; }
@media (max-width: 1100px) { .dash-widget { grid-column: span 3 !important; } .dash-widget[data-widget="kpis"] { grid-column: span 6 !important; } }
@media (max-width: 760px) { .dash-widget { grid-column: span 6 !important; } }

/* ============================================================
   Asset-Liste — Chips, sortierbare Tabelle, Seiten (2026-09)
   ============================================================ */
.asset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: center; }
.asset-chips .chips-label { width: 64px; flex-shrink: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bechtle-text-muted); }
.asset-chip.chip-select { position: relative; padding-right: 22px; cursor: pointer; }
.asset-chip.chip-select select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; width: 7.5em; text-overflow: ellipsis; }
.asset-chip.chip-select.aktiv select { width: auto; max-width: 220px; }
.asset-chip.chip-select select:focus { outline: none; }
.asset-chip.chip-select .chip-pfeil { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; pointer-events: none; }
.asset-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; color: var(--bechtle-text);
  background: var(--glass-soft-strong); border: 1px solid rgba(var(--akzent-dark-rgb), 0.14);
  text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease;
}
.asset-chip span { font-size: 0.72rem; font-weight: 600; color: var(--bechtle-text-muted); font-variant-numeric: tabular-nums; }
.asset-chip:hover { background: var(--surface); border-color: rgba(var(--akzent-dark-rgb), 0.35); }
.asset-chip.aktiv { background: var(--bechtle-dark-green); border-color: var(--bechtle-dark-green); color: var(--on-akzent); }
.asset-chip.aktiv span { color: rgba(255, 255, 255, 0.8); }
.status-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-gray-solid); flex-shrink: 0; }
.status-lager .status-punkt { background: var(--akzent-marke); }
.status-vergeben .status-punkt { background: var(--tone-blue-solid); }
.status-reparatur .status-punkt { background: var(--tone-amber-solid); }
.status-ausgemustert .status-punkt { background: var(--tone-gray-solid); }
.status-zum_verkauf .status-punkt { background: var(--tone-violet-solid); }
.status-verkauft .status-punkt { background: var(--tone-violet-solid); }
.status-unterwegs .status-punkt { background: var(--tone-blue-solid); }
.status-vermisst .status-punkt { background: var(--tone-red-solid); }
.status-am_platz .status-punkt { background: var(--tone-cyan-solid); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; white-space: nowrap; }
.asset-liste-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.asset-tabelle thead th { position: sticky; top: var(--kopf-h, 0px); z-index: 2; }
.asset-tabelle th.sortierbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.asset-tabelle th.sortierbar .sort-pfeil { font-size: 0.7rem; opacity: 0.45; }
.asset-tabelle th.sortierbar.aktiv { color: var(--bechtle-dark-green); }
.asset-tabelle th.sortierbar.aktiv .sort-pfeil { opacity: 1; }
.asset-zeile { cursor: pointer; }
.asset-zeile:hover td { background: var(--akzent-soft); }
.asset-zeile:focus-visible { outline: 2px solid var(--bechtle-green); outline-offset: -2px; }
.asset-link { color: var(--bechtle-text); font-weight: 600; text-decoration: none; }
.asset-link:hover { color: var(--bechtle-dark-green); text-decoration: underline; }
.asset-sn { white-space: nowrap; font-size: 0.8rem; }
.asset-inv { font-family: inherit; font-size: 0.72rem; color: var(--bechtle-text-muted); }
.asset-seiten { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--bechtle-border); }
.asset-seiten-nummern { display: flex; gap: 2px; align-items: center; }
.btn.disabled { opacity: 0.45; pointer-events: none; }

/* ============================================================
   Main Content
   ============================================================ */

/* .main-wrapper wraps topbar + page content, offset from fixed sidebar */
.main-wrapper {
  margin-left: calc(var(--sb-w) + var(--sb-gap) * 2);
  width: calc(100% - var(--sb-w) - var(--sb-gap) * 2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left var(--sb-dur) var(--sb-ease), width var(--sb-dur) var(--sb-ease);
}
html.sb-collapsed .main-wrapper {
  margin-left: calc(var(--sb-w-min) + var(--sb-gap) * 2);
  width: calc(100% - var(--sb-w-min) - var(--sb-gap) * 2);
}

.main-content {
  flex: 1;
  padding: 24px;
  min-width: 0;
  overflow-x: clip;             /* clip statt hidden: kein Scroll-Container → position: sticky funktioniert */
}

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  background: var(--bechtle-white);
  border-bottom: 1px solid var(--bechtle-border);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-xs);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Topbar Logo — sichtbar nur wenn Sidebar versteckt ist (≤1023px) */
.topbar-logo {
  display: none; /* auf Desktop: Sidebar zeigt Logo */
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-logo-img {
  width: clamp(22px, 3vw, 30px);
  height: clamp(22px, 3vw, 30px);
  object-fit: contain;
  flex-shrink: 0;
}

.topbar-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.topbar-logo-wordmark {
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  font-weight: 700;
  color: var(--bechtle-text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}

.topbar-logo-subtitle {
  font-size: clamp(0.55rem, 1.2vw, 0.65rem);
  color: var(--bechtle-text-muted);
  white-space: nowrap;
  line-height: 1.2;
}

@media (max-width: 1023px) {
  .topbar-logo {
    display: flex;
  }
}

/* Auf sehr kleinen Screens (≤480px): nur Icon, kein Text */
@media (max-width: 480px) {
  .topbar-logo-text {
    display: none;
  }
  .topbar-logo-img {
    width: 26px;
    height: 26px;
  }
}

.page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bechtle-text);
}

/* ── Schlanke Kopfzeile im Inhalt (ersetzt die alte Topbar) ──────────────
   Globale Suche links, Aktionen rechts, optionaler zentrierter Titel. */
.page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;              /* Buttons brechen auf schmalen Screens um statt abgeschnitten zu werden */
  gap: 12px;
  margin: -24px -24px 16px;     /* bis an den Rand, damit die Glasfläche beim Scrollen durchläuft */
  padding: 12px 24px;
  position: sticky;             /* Aktionen bleiben oben — Anker für den zentrierten Titel bleibt erhalten */
  top: 0;
  z-index: 31;
  /* Keine eigene Fläche: die Kopfzeile ist Teil des Seitenhintergrunds. Beim Scrollen
     sorgt nur der Blur mit weichem Auslauf nach unten für Lesbarkeit — kein Band. */
  background: transparent;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0, black 70%, transparent 100%);
  padding-bottom: 18px;
  margin-bottom: 10px;
}
/* Abstand so gewählt, dass der Inhalt mit und ohne Aktionsknöpfe auf derselben Höhe beginnt (gemessen: 78 px) */
.page-header:empty, .page-header.leer { position: static; padding: 0; margin: 0 0 16px; background: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
/* Hat die Kopfzeile keinen sichtbaren Inhalt (keine Aktionen/kein Titel), bleibt
   sie dank fehlender Mindesthöhe quasi unsichtbar — nur der untere Abstand bleibt. */
.page-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Zentrierter Titel (z.B. Standortname auf der Gebäude-Seite) — echte Mitte
   der Inhaltsspalte. Leer auf allen anderen Seiten -> unsichtbar. */
.page-header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bechtle-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.gb-back { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 480px) { .gb-back span { display: none; } }

.breadcrumb {
  font-size: 0.8rem;
  color: var(--bechtle-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-sep {
  opacity: 0.4;
}

/* ============================================================
   Page Body
   ============================================================ */

.page-body {
  padding: 24px;
  flex: 1;
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--bechtle-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bechtle-border);
  box-shadow: var(--shadow-sm);
}

.card + .card {
  margin-top: 16px;
}

/* In Karten-Grids (.stats-grid) erzeugt "gap" die Abstände – die Stapel-Margin
   von ".card + .card" darf hier NICHT durchschlagen, sonst sitzt jede Karte
   außer der ersten 16px tiefer und die Grid-Zeilen werden ungleich hoch. */
.stats-grid > .card {
  margin-top: 0;
}
/* Allgemein (2026-09-21): dasselbe gilt für JEDES Raster — per Klasse oder per Inline-Stil.
   Neue Raster-Klasse mit Karten als direkten Kindern? Hier eintragen (tests/test_ui_konsistenz.py prüft das). */
:is([style*="display:grid"], [style*="display: grid"], .tag-ebenen, .board-layout, .ticket-layout, .ticket-neben, .board-meine, .md-drei, .mon-raster, .mon-neben, .mon-host-raster, .tickets-seite, .ma-feld, .gs-raeume, .az-raster, .az-seite, .az-standorte-raster, .az-links, .az-bh-raster, .az-bew-raster, .az-start-raster, .rp-raster) > .card,
:is([style*="display:grid"], [style*="display: grid"], .tag-ebenen, .board-layout, .ticket-layout, .ticket-neben, .board-meine, .md-drei, .tickets-seite, .ma-feld, .gs-raeume, .az-raster, .az-seite, .az-standorte-raster, .az-links, .az-bh-raster, .az-bew-raster, .az-start-raster, .rp-raster) > .card + .card {
  margin-top: 0;
}

.card-body {
  padding: 20px 24px;
}

.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bechtle-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bechtle-text);
}

.card-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--bechtle-border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================
   Dashboard Stat Cards
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bechtle-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bechtle-border);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.stat-card-icon.green {
  background: var(--tone-green-bg);
  color: var(--tone-green-fg);
}

.stat-card-icon.blue {
  background: var(--tone-blue-bg);
  color: var(--tone-blue-fg);
}

.stat-card-icon.orange {
  background: var(--tone-amber-bg);
  color: var(--tone-amber-fg);
}

.stat-card-icon.red {
  background: var(--tone-red-bg);
  color: var(--tone-red-fg);
}

.stat-card-icon.purple {
  background: var(--tone-violet-bg);
  color: var(--tone-violet-fg);
}

.stat-card-icon.teal {
  background: var(--tone-teal-bg);
  color: var(--tone-teal-fg);
}

.stat-card-info {
  flex: 1;
  min-width: 0;
}

.stat-number {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bechtle-text);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--bechtle-text-muted);
  margin-top: 4px;
}

.stat-trend {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 2px;
}

.stat-trend.up   { color: var(--bechtle-success); }
.stat-trend.down { color: var(--bechtle-danger); }

/* ============================================================
   Buttons
   ============================================================ */

/* ── Buttons — ein System (2026-09) ─────────────────────────────
   Rollen:  .btn-primary   = Hauptaktion / Weiter / Speichern (grün)
            .btn-secondary = Funktionsbutton (weiß, Rand)      ← auch .btn-outline, .btn-light
            .btn-ghost     = leise Nebenaktion (nur Text)
            .btn-back      = Zurück (ghost + Chevron, Text ohne Pfeil)
            .btn-danger    = destruktiv (rot), .btn-warning = Achtung (amber)
   Größen:  .btn-sm 32px · Standard 38px · .btn-lg 44px — gleiche Rundung überall. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  min-width: 38px;
  padding: 7px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--bechtle-text);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--bechtle-green); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Hauptaktion */
.btn-primary {
  color: var(--on-akzent);
  border-color: transparent;
  background: linear-gradient(180deg, var(--akzent-hover) 0%, var(--akzent) 55%, var(--akzent-hover) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(var(--akzent-rgb), 0.28);
  font-weight: 600;
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(var(--akzent-rgb), 0.4); filter: brightness(1.04); }
.btn-primary:active { filter: brightness(0.96); }

/* Funktionsbutton */
.btn-secondary, .btn-outline, .btn-outline-secondary, .btn-light {
  color: var(--bechtle-dark-green);
  background: var(--glass-soft-strong);
  border-color: rgba(var(--akzent-dark-rgb), 0.16);
  box-shadow: 0 1px 2px rgba(var(--akzent-dark-rgb), 0.06);
}
.btn-secondary:hover, .btn-outline:hover, .btn-outline-secondary:hover, .btn-light:hover {
  background: var(--surface);
  border-color: rgba(var(--akzent-dark-rgb), 0.32);
  box-shadow: 0 3px 8px rgba(var(--akzent-dark-rgb), 0.10);
}

/* Leise Nebenaktion */
.btn-ghost { color: var(--bechtle-text-muted); }
.btn-ghost:hover { background: rgba(var(--akzent-dark-rgb), 0.06); color: var(--bechtle-text); }

/* Zurück — Chevron kommt aus dem CSS, im Markup steht nur der Text */
.btn-back { color: var(--bechtle-text-muted); padding-left: 10px; }
.btn-back::before {
  content: "";
  width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-back:hover { background: rgba(var(--akzent-dark-rgb), 0.06); color: var(--bechtle-dark-green); }

/* Destruktiv / Achtung */
.btn-danger { color: var(--on-akzent); background: var(--bechtle-danger); border-color: var(--bechtle-danger); font-weight: 600; }
.btn-danger:hover { background: var(--tone-red-solid); border-color: var(--tone-red-fg); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25); }
/* Warnung/Rückgabe: dunkle Schrift auf Amber — weiße Schrift war auf der Amber-Fläche kaum lesbar (Kontrast ~2:1) */
.btn-warning { color: var(--on-warning); background: var(--bechtle-warning); border-color: var(--bechtle-warning); font-weight: 600; }
.btn-warning:hover { background: var(--warnung-hover); border-color: var(--warnung-hover-rand); color: var(--on-warning); }
.btn-warning svg { color: inherit; }

/* Größen */
.btn-sm { min-height: 32px; min-width: 32px; padding: 4px 10px; font-size: 0.8125rem; border-radius: 9px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { min-height: 44px; padding: 10px 20px; font-size: 0.95rem; border-radius: 13px; }
.btn-icon { padding: 0; width: 38px; aspect-ratio: 1; }
.btn-icon.btn-sm { width: 32px; }
.btn-block, .btn-full { width: 100%; }

/* ── Werkzeugleiste oben: Zurück, Aktionen, Filter — bleibt beim Scrollen sichtbar ── */
.page-toolbar {
  position: sticky;
  top: var(--toolbar-top, var(--kopf-h, 0px));   /* Starthöhe der Leiste (base.html misst sie) */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--toolbar-fill);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 4px 16px rgba(var(--akzent-dark-rgb), 0.08);
}
/* Streifen über der stehenden Leiste: durchscrollender Inhalt wird dort weichgezeichnet statt hart sichtbar. */
.page-toolbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--toolbar-top, 0px); pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.page-toolbar .spacer { flex: 1; }
.page-toolbar .toolbar-titel { font-weight: 600; color: var(--bechtle-dark-green); margin: 0 4px; }

/* ============================================================
   Forms
   ============================================================ */

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.form-label .required {
  color: var(--bechtle-danger);
  margin-left: 2px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--bechtle-text);
  background: var(--bechtle-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.5;
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus {
  outline: none;
  border-color: var(--bechtle-green);
  box-shadow: 0 0 0 3px rgba(var(--akzent-rgb), 0.15);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--surface-2);
  color: var(--bechtle-text-muted);
  cursor: not-allowed;
}

.form-control.is-invalid {
  border-color: var(--bechtle-danger);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-control.is-valid {
  border-color: var(--bechtle-success);
}

/* Select Dropdown Arrow */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--bechtle-green);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-label {
  font-size: 0.875rem;
  color: var(--bechtle-text);
  cursor: pointer;
}

.form-text {
  font-size: 0.8rem;
  color: var(--bechtle-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.invalid-feedback {
  font-size: 0.8rem;
  color: var(--bechtle-danger);
  margin-top: 4px;
}

.form-row,
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-row.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.form-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bechtle-text-muted);
  margin-bottom: 12px;
  margin-top: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bechtle-border);
}

.form-section-title:first-child {
  margin-top: 0;
}

/* ============================================================
   Tables
   ============================================================ */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  border-radius: 10px;
  border: 1px solid var(--bechtle-border);
  background: var(--bechtle-white);
}

table.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.table thead th {
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bechtle-text-muted);
  padding: 11px 16px;
  border-bottom: 2px solid var(--bechtle-border);
  text-align: left;
  white-space: nowrap;
  position: relative;
}

.table thead th:first-child {
  border-radius: 10px 0 0 0;
}

.table thead th:last-child {
  border-radius: 0 10px 0 0;
}

.table thead th.sortable {
  cursor: pointer;
  user-select: none;
}

.table thead th.sortable:hover {
  color: var(--bechtle-text);
}

.table tbody tr {
  transition: background 0.1s ease;
}

.table tbody tr:hover {
  background: var(--surface-2);
}

.table tbody td {
  padding: 13px 16px;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--surface-2);
  vertical-align: middle;
  color: var(--bechtle-text);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.table-actions .btn {
  white-space: nowrap;
}

/* Row highlighting variants */
.table tbody tr.row-warning {
  background: var(--tone-amber-bg);
}

.table tbody tr.row-warning:hover {
  background: var(--tone-amber-bg);
}

.table tbody tr.row-danger {
  background: var(--tone-red-bg);
}

.table tbody tr.row-danger:hover {
  background: var(--tone-red-bg);
}

/* ============================================================
   Badges
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Asset Status Badges */
.badge-lager {
  background: var(--tone-green-bg);
  color: var(--tone-green-fg);
}

.badge-vergeben {
  background: var(--tone-blue-bg);
  color: var(--tone-blue-fg);
}

.badge-reparatur {
  background: var(--tone-amber-bg);
  color: var(--tone-amber-fg);
}

.badge-ausgemustert {
  background: var(--tone-red-bg);
  color: var(--tone-red-fg);
}

/* Role Badges */
.badge-superadmin {
  background: var(--tone-violet-solid);
  color: var(--on-akzent);
}

.badge-admin {
  background: var(--tone-violet-bg);
  color: var(--tone-violet-fg);
}

.badge-it {
  background: var(--tone-blue-bg);
  color: var(--tone-blue-fg);
}

.badge-junior {
  background: var(--tone-teal-bg);
  color: var(--tone-teal-fg);
}

.badge-lager-role {
  background: var(--tone-amber-bg);
  color: var(--tone-amber-fg);
}

.badge-audit {
  background: var(--surface-2);
  color: var(--text);
}

/* Semantic Badges */
.badge-success {
  background: var(--tone-green-bg);
  color: var(--tone-green-fg);
}

.badge-warning {
  background: var(--tone-amber-bg);
  color: var(--tone-amber-fg);
}

.badge-danger {
  background: var(--tone-red-bg);
  color: var(--tone-red-fg);
}

.badge-info {
  background: var(--tone-blue-bg);
  color: var(--tone-blue-fg);
}

.badge-secondary {
  background: var(--surface-2);
  color: var(--text);
}

/* ============================================================
   Alerts
   ============================================================ */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: 0.875rem;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-success {
  background: var(--tone-green-bg);
  border-color: var(--tone-green-solid);
  color: var(--tone-green-fg);
}

.alert-danger {
  background: var(--tone-red-bg);
  border-color: var(--tone-red-solid);
  color: var(--tone-red-fg);
}

.alert-warning {
  background: var(--tone-amber-bg);
  border-color: var(--tone-amber-solid);
  color: var(--tone-amber-fg);
}

.alert-info {
  background: var(--tone-blue-bg);
  border-color: var(--tone-blue-solid);
  color: var(--tone-blue-fg);
}

/* ============================================================
   Modals
   ============================================================ */

.modal-overlay,
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal,
.modal-box {
  background: var(--bechtle-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: modal-slide-in 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--bechtle-border) transparent;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--bechtle-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  transition: background 0.1s;
}

.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--bechtle-light); }
.autocomplete-empty { padding: 10px 14px; color: var(--text-secondary); font-size: 0.875rem; }

.selected-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  background: var(--tone-green-bg);
  color: var(--tone-green-fg);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Relative wrapper for dropdown positioning */
.form-group { position: relative; }

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal::-webkit-scrollbar {
  width: 4px;
}

.modal::-webkit-scrollbar-track {
  background: transparent;
}

.modal::-webkit-scrollbar-thumb {
  background: var(--bechtle-border);
  border-radius: 99px;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bechtle-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  background: var(--bechtle-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 1;
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bechtle-text);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--bechtle-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--bechtle-text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.modal-close:hover {
  background: var(--surface-2);
  color: var(--bechtle-text);
}

.modal-xl {
  max-width: 800px;
}

.modal-lg {
  max-width: 680px;
}

.modal-sm {
  max-width: 420px;
}

/* ============================================================
   Search & Filters
   ============================================================ */

.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
  max-width: 480px;
}

.search-input-wrapper .search-icon,
.search-input-wrapper > svg {
  position: absolute;
  left: 10px;
  color: var(--bechtle-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.search-input-wrapper .form-input,
.search-input-wrapper .search-input {
  padding-left: 34px;
  width: 100%;
}

.search-bar-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bechtle-text-muted);
  pointer-events: none;
  z-index: 1;
  font-size: 0.875rem;
}

.filters-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--bechtle-white);
  border-radius: 10px;
  border: 1px solid var(--bechtle-border);
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.filters-bar select,
.filters-bar input {
  min-width: 160px;
}

.filters-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bechtle-text-muted);
  white-space: nowrap;
}

/* ============================================================
   Filter Bar (assets.html, mitarbeiter.html)
   ============================================================ */

.filter-bar {
  position: sticky;
  top: var(--kopf-h, 0px);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: var(--bechtle-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bechtle-border);
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.filter-bar-wrap {
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.filter-search {
  grid-column: span 2;
}

.filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bechtle-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  grid-column: 1 / -1;
  padding-top: 4px;
}

.form-select {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1.5px solid var(--bechtle-border);
  border-radius: var(--radius-md);
  background-color: var(--bechtle-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  font-size: 0.875rem;
  color: var(--bechtle-text);
  cursor: pointer;
  transition: var(--transition-base);
  height: 40px;
}

.form-select:focus {
  outline: none;
  border-color: var(--bechtle-green);
  box-shadow: 0 0 0 3px rgba(var(--akzent-dark-rgb), 0.08);
}

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--bechtle-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--bechtle-text);
  background: var(--bechtle-white);
  transition: var(--transition-base);
  height: 40px;
}

.form-input:focus {
  outline: none;
  border-color: var(--bechtle-green);
  box-shadow: 0 0 0 3px rgba(var(--akzent-dark-rgb), 0.08);
}

/* ============================================================
   Signature Pad
   ============================================================ */

.signature-wrapper {
  border: 2px dashed var(--bechtle-green);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}

.signature-wrapper:hover {
  border-color: var(--bechtle-dark-green);
}

#signature-pad,
canvas.signature-pad {
  display: block;
  cursor: crosshair;
  touch-action: none;
  width: 100%;
  height: 200px;
}

.signature-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.signature-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bechtle-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
  opacity: 0.6;
  user-select: none;
  gap: 8px;
}

/* ============================================================
   Stepper (Onboarding / Offboarding Flow)
   ============================================================ */

.stepper {
  display: flex;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 80px;
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
  transition: background 0.3s ease;
}

.step.done::after {
  background: var(--bechtle-green);
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--bechtle-white);
  z-index: 1;
  color: var(--border-strong);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.step.active .step-circle {
  border-color: var(--bechtle-dark-green);
  color: var(--bechtle-dark-green);
  box-shadow: 0 0 0 4px rgba(var(--akzent-dark-rgb), 0.12);
}

.step.done .step-circle {
  border-color: var(--bechtle-green);
  background: var(--bechtle-green);
  color: white;
}

.step-label {
  font-size: 0.75rem;
  margin-top: 6px;
  color: var(--bechtle-text-muted);
  text-align: center;
  line-height: 1.3;
  transition: color 0.15s;
}

.step.active .step-label {
  color: var(--bechtle-dark-green);
  font-weight: 600;
}

.step.done .step-label {
  color: var(--bechtle-green);
  font-weight: 500;
}

/* ============================================================
   Activity Feed
   ============================================================ */

/* ── Offboarding List ─────────────────────────────────────────────────── */
.offboarding-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Standort-Zwischenzeile (Gruppierung, analog HR-Cockpit hr-standort-row) */
.offboarding-standort {
  background: var(--surface-2);
  padding: 6px 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

.offboarding-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.offboarding-item:last-child {
  border-bottom: none;
}

.offboarding-item:hover {
  background: var(--surface-2);
}

.offboarding-item.urgent {
  background: var(--tone-red-bg);
  border-left: 3px solid var(--bechtle-danger);
}

.offboarding-item.soon {
  background: var(--tone-amber-bg);
  border-left: 3px solid var(--bechtle-warning);
}

.offboarding-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.offboarding-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offboarding-name:hover {
  color: var(--bechtle-green);
}

.offboarding-date {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.days-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 4px;
}

.urgent-badge {
  background: var(--tone-red-bg);
  color: var(--tone-red-fg);
}

.soon-badge {
  background: var(--tone-amber-bg);
  color: var(--tone-amber-fg);
}

.btn-offboard {
  background: var(--bechtle-warning);
  color: var(--on-akzent);
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s;
}

.btn-offboard:hover {
  opacity: 0.85;
  color: var(--on-akzent);
}

/* ── Activity List ────────────────────────────────────────────────────── */
.activity-list {
  list-style: none;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-2);
  align-items: flex-start;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bechtle-green);
  flex-shrink: 0;
  margin-top: 6px;
}

.activity-dot.red    { background: var(--bechtle-danger); }
.activity-dot.orange { background: var(--bechtle-warning); }
.activity-dot.blue   { background: var(--bechtle-info); }
.activity-dot.gray   { background: var(--tone-gray-solid); }

.activity-text {
  font-size: 0.875rem;
  flex: 1;
  line-height: 1.5;
}

.activity-text strong {
  font-weight: 600;
}

.activity-time {
  font-size: 0.75rem;
  color: var(--bechtle-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   Empty State
   ============================================================ */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--bechtle-text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
  display: block;
}

.empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bechtle-text);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 0.875rem;
  max-width: 360px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

/* ============================================================
   Login Page
   ============================================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bechtle-dark-green);
  background-image:
    radial-gradient(ellipse at top left, rgba(var(--akzent-rgb), 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(var(--akzent-rgb), 0.1) 0%, transparent 50%);
  padding: 24px;
}

.login-box {
  background: var(--bechtle-white);
  border-radius: var(--radius-xl);
  padding: 48px 48px 40px;
  width: 100%;
  max-width: 480px;
  min-width: 320px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  animation: modal-slide-in 0.25s ease;
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.login-logo-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.login-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--bechtle-dark-green);
  border-radius: 14px;
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.login-logo-text {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--bechtle-dark-green);
  letter-spacing: -0.02em;
  line-height: 1;
}

.login-logo-subtitle {
  font-size: 0.8rem;
  color: var(--bechtle-text-muted);
  margin-top: 4px;
}

.login-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
  color: var(--bechtle-text);
  white-space: nowrap;
}

.login-subtitle {
  font-size: 0.875rem;
  color: var(--bechtle-text-muted);
  text-align: center;
  margin-bottom: 28px;
}

.login-wordmark {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--akzent-ink);   /* Textstufe des Akzents: im Dunkelmodus hell (--akzent-dark bliebe dunkel) */
  display: block;
  text-align: center;
  margin-bottom: 4px;
}

.login-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bechtle-text-muted);
}

.login-flash-container {
  margin-bottom: 16px;
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  cursor: pointer;
  border: 1.5px solid var(--bechtle-border);
  background: var(--bechtle-white);
  color: var(--bechtle-text);
  text-decoration: none;
  transition: var(--transition-base);
  font-weight: 500;
  user-select: none;
}

.page-btn.active {
  background: var(--bechtle-dark-green);
  color: white;
  border-color: var(--bechtle-dark-green);
  box-shadow: 0 2px 6px rgba(var(--akzent-dark-rgb), 0.2);
}

.page-btn:hover:not(.active) {
  background: var(--surface-2);
  border-color: var(--border);
}

.page-btn:disabled,
.page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-info {
  font-size: 0.8125rem;
  color: var(--bechtle-text-muted);
  text-align: center;
  margin-top: 8px;
}

/* ============================================================
   Inventur-specific
   ============================================================ */

.inventur-row td input[type="number"] {
  width: 80px;
  text-align: center;
  padding: 6px 8px;
}

.diff-positive {
  color: var(--bechtle-success);
  font-weight: 600;
}

.diff-negative {
  color: var(--bechtle-danger);
  font-weight: 600;
}

.diff-zero {
  color: var(--bechtle-text-muted);
}

/* ============================================================
   Spinner
   ============================================================ */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.spinner-dark {
  border-color: rgba(var(--akzent-dark-rgb), 0.2);
  border-top-color: var(--bechtle-dark-green);
}

.spinner-green {
  border-color: rgba(var(--akzent-rgb), 0.2);
  border-top-color: var(--bechtle-green);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
  backdrop-filter: blur(1px);
}

/* ============================================================
   Section Headers / Page Toolbar
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.section-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bechtle-text);
}

.section-subtitle {
  font-size: 0.8125rem;
  color: var(--bechtle-text-muted);
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   Progress Bar
   ============================================================ */

.progress {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--bechtle-green);
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

.progress-bar.danger  { background: var(--bechtle-danger); }
.progress-bar.warning { background: var(--bechtle-warning); }
.progress-bar.info    { background: var(--bechtle-info); }

/* ============================================================
   Tabs
   ============================================================ */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--bechtle-border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bechtle-text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: var(--transition-base);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-btn:hover {
  color: var(--bechtle-text);
  background: var(--surface-2);
}

.tab-btn.active {
  color: var(--bechtle-dark-green);
  border-bottom-color: var(--bechtle-dark-green);
  font-weight: 600;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--surface-2);
  color: var(--bechtle-text-muted);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
}

.tab-btn.active .tab-count {
  background: rgba(var(--akzent-dark-rgb), 0.12);
  color: var(--bechtle-dark-green);
}

/* ============================================================
   Info List (Detail Views)
   ============================================================ */

.info-list {
  display: grid;
  gap: 0;
}

.info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.875rem;
  align-items: start;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: var(--bechtle-text-muted);
  flex-shrink: 0;
}

.info-value {
  color: var(--bechtle-text);
  word-break: break-word;
}

/* ============================================================
   Dropdown Menu
   ============================================================ */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bechtle-white);
  border: 1px solid var(--bechtle-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
  animation: dropdown-in 0.12s ease;
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.875rem;
  color: var(--bechtle-text);
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--surface-2);
}

.dropdown-item.danger {
  color: var(--bechtle-danger);
}

.dropdown-item.danger:hover {
  background: var(--tone-red-bg);
}

.dropdown-divider {
  height: 1px;
  background: var(--bechtle-border);
  margin: 4px 0;
}

/* ============================================================
   Auswahlfelder (static/js/auswahl.js)
   Jedes native <select> bekommt einen Auslöser-Knopf + Listen-Panel.
   Maße (Breite, Höhe, Innenabstand, Radius, Schrift) übernimmt das
   Skript vom Original, damit sich keine Spalte und keine Zeile
   verschiebt. Farben kommen nur aus Tokens. Opt-out: data-nativ.
   ============================================================ */

select.auswahl-nativ {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.auswahl-ausloeser {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 32px 8px 12px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auswahl-ausloeser[hidden] { display: none !important; }
.auswahl-ausloeser.auswahl-block { display: grid; }
.auswahl-ausloeser.auswahl-durchsichtig { background: transparent; color: inherit; }
.auswahl-ausloeser.auswahl-blank { font-family: inherit; }
.auswahl-ausloeser.auswahl-blank .auswahl-pfeil { display: none; }
form.gesperrt .auswahl-ausloeser { opacity: .6; }

.auswahl-wert,
.auswahl-sizer { grid-column: 1; min-width: 0; white-space: nowrap; }
.auswahl-wert { grid-row: 1; overflow: hidden; text-overflow: ellipsis; }
/* Hält unsichtbar die Breite des längsten Eintrags frei — wie es ein natives select tut. */
.auswahl-sizer { grid-row: 2; display: block; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.auswahl-sizer > span { display: block; }
.auswahl-ausloeser.auswahl-platzhalter .auswahl-wert { color: var(--text-muted); }

.auswahl-pfeil {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform 0.15s ease;
}
.auswahl-ausloeser.auswahl-offen .auswahl-pfeil { transform: rotate(180deg); }

.auswahl-ausloeser:hover:not(:disabled) { border-color: var(--border-strong, var(--border)); }
.auswahl-ausloeser:focus { outline: none; }
.auswahl-ausloeser:focus-visible,
.auswahl-ausloeser.auswahl-offen,
select.auswahl-nativ:focus + .auswahl-ausloeser {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(var(--akzent-rgb), 0.15);
}
.auswahl-ausloeser:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}
.auswahl-ausloeser.auswahl-ungueltig { border-color: var(--bechtle-danger); }

.auswahl-panel {
  position: fixed;
  z-index: 10000;                 /* über Modals (1300) und Toasts (9999) */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 180px;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: dropdown-in 0.12s ease;
}
.auswahl-panel.auswahl-nach-oben { animation-name: auswahl-in-oben; }
@keyframes auswahl-in-oben {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.auswahl-suche-zeile { flex: 0 0 auto; padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
.auswahl-suche {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}
.auswahl-suche::placeholder { color: var(--text-muted); }
.auswahl-suche:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(var(--akzent-rgb), 0.15); }

.auswahl-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; position: relative; }
.auswahl-liste:focus { outline: none; }

.auswahl-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 28px;
  position: relative;
  border-radius: var(--radius-sm);
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}
.auswahl-option[hidden],
.auswahl-gruppe[hidden],
.auswahl-keine[hidden] { display: none; }
.auswahl-option-text { min-width: 0; overflow-wrap: anywhere; }
.auswahl-option.auswahl-leer { color: var(--text-muted); }
.auswahl-option.auswahl-aktiv { background: var(--surface-2); }
.auswahl-option[aria-selected="true"] { color: var(--akzent-ink); font-weight: 600; }
.auswahl-option[aria-selected="true"].auswahl-aktiv { background: var(--akzent-soft); }
/* Haken vor dem gewählten Eintrag — aus Rahmenlinien, ohne Bild und ohne feste Farbe */
.auswahl-option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 5px;
  height: 9px;
  margin-top: -6px;
  border: solid var(--akzent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.auswahl-option[aria-disabled="true"] { color: var(--text-muted); opacity: 0.55; cursor: not-allowed; }

.auswahl-gruppe + .auswahl-gruppe,
.auswahl-option + .auswahl-gruppe { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.auswahl-gruppe-kopf {
  padding: 6px 10px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.auswahl-keine { padding: 14px 10px; text-align: center; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .auswahl-panel { animation: none; }
  .auswahl-ausloeser,
  .auswahl-pfeil { transition: none; }
}

/* ============================================================
   Avatar
   ============================================================ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--bechtle-green);
  color: white;
  font-size: 0.875rem;
  width: 36px;
  height: 36px;
  letter-spacing: 0.02em;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 1.125rem;
}

.avatar-xl {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

/* ============================================================
   Tooltip
   ============================================================ */

[data-tooltip] {
  position: relative;
  cursor: default;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tone-gray-solid);
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 999;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ============================================================
   Utility Classes
   ============================================================ */

/* Text colors */
.text-muted    { color: var(--bechtle-text-muted) !important; }
.text-success  { color: var(--bechtle-success) !important; }
.text-danger   { color: var(--bechtle-danger) !important; }
.text-warning  { color: var(--bechtle-warning) !important; }
.text-info     { color: var(--bechtle-info) !important; }
.text-white    { color: white !important; }
.text-dark     { color: var(--bechtle-text) !important; }
.text-green    { color: var(--bechtle-green) !important; }

/* Font weights */
.fw-bold    { font-weight: 700 !important; }
.fw-medium  { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal  { font-weight: 400 !important; }

/* Text alignment */
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 32px !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 32px !important; }

/* Margin Start/End */
.ms-auto { margin-left: auto !important; }
.me-auto  { margin-right: auto !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 24px !important; }

/* Display */
.d-flex        { display: flex !important; }
/* Filter-Hilfklasse: schlägt d-flex !important durch höhere Spezifität */
.ma-row.ma-row-hidden { display: none !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block       { display: block !important; }
.d-inline      { display: inline !important; }
.d-none        { display: none !important; }
.d-grid        { display: grid !important; }

/* Flexbox */
.flex-1           { flex: 1 !important; }
.flex-column      { flex-direction: column !important; }
.flex-wrap        { flex-wrap: wrap !important; }
.align-center     { align-items: center !important; }
.align-start      { align-items: flex-start !important; }
.align-end        { align-items: flex-end !important; }
.justify-center   { justify-content: center !important; }
.justify-between  { justify-content: space-between !important; }
.justify-end      { justify-content: flex-end !important; }
.justify-start    { justify-content: flex-start !important; }

/* Gap */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 24px !important; }

/* Width / Height */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }

/* Border radius */
.rounded    { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }

/* Position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

/* Misc */
.cursor-pointer { cursor: pointer !important; }
.user-select-none { user-select: none !important; }
.whitespace-nowrap { white-space: nowrap !important; }

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

@media (max-width: 1024px) {
  .form-row.cols-4 {
    grid-template-columns: 1fr 1fr;
  }

  .form-row.cols-3 {
    grid-template-columns: 1fr 1fr;
  }

  .filter-search {
    grid-column: span 1;
  }
}

/* Sidebar/layout: hide sidebar below 1024px (tablet + phone) */
@media (max-width: 1023px) {
  .sidebar,
  html.sb-collapsed .sidebar {
    width: var(--sb-w);
    transform: translateX(calc(-100% - var(--sb-gap) * 2));
    transition: transform 0.3s var(--sb-ease);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .sidebar-toggle { display: none; }
  /* im Mobil-Overlay immer voll ausgeklappt */
  html.sb-collapsed .sidebar-logo,
  html.sb-collapsed .sidebar-nav .nav-label,
  html.sb-collapsed .sidebar-user-info,
  html.sb-collapsed .sidebar-version,
  html.sb-collapsed .sidebar-menu-kopf { display: block; }
  html.sb-collapsed .sidebar-nav a { justify-content: flex-start; padding: 9px 12px; gap: 12px; }
  html.sb-collapsed .sidebar-zahnrad { display: flex; }
  html.sb-collapsed .nav-sub { display: grid; }
  html.sb-collapsed .nav-group-pfeil { display: flex; }
  html.sb-collapsed .sidebar-menu { left: 12px; right: 12px; bottom: calc(100% - 4px); width: auto; }

  .main-wrapper,
  html.sb-collapsed .main-wrapper {
    margin-left: 0;
    width: 100%;
  }

  .mobile-menu-btn {
    display: flex;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }
  /* Kopfzeile: negative Ränder müssen zum kleineren Innenabstand passen,
     sonst ragt die Glasfläche über den Rand und erzeugt einen Schnitt. */
  .page-header {
    margin: -16px -16px 12px;
    padding: 10px 16px;
  }

  .form-row,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .form-row.cols-3 {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .topbar {
    padding: 0 16px;
    gap: 8px;
  }

  .topbar-right {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .topbar-right .btn {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  .page-body {
    padding: 16px;
  }

  .modal {
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-lg);
  }

  .modal-xl,
  .modal-lg {
    max-width: 100%;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-overlay .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 95vh;
  }

  .modal-header {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .info-row {
    grid-template-columns: 130px 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-header-right {
    width: 100%;
  }

  .login-box {
    padding: 36px 28px;
    min-width: unset;
  }

  /* Tables scrollable on mobile */
  .table-wrapper,
  .card-body.p-0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 520px;
  }

  /* Card header stacks on small screens */
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Filter bar stacks on mobile */
  .filter-bar {
    grid-template-columns: 1fr;
  }

  .filter-search {
    grid-column: span 1;
  }

  .filter-actions {
    justify-content: stretch;
  }

  .filter-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Detail grid responsive */
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-bar select,
  .filters-bar input {
    width: 100%;
    min-width: unset;
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .topbar {
    height: auto;
    min-height: 56px;
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-title {
    font-size: 0.95rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .stepper {
    gap: 4px;
  }

  .step-label {
    font-size: 0.7rem;
  }
}

/* Mobile overlay for sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--akzent-dark-rgb), 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 99;
  display: none;
}

.sidebar-overlay.active {
  display: block;
}

/* Mobile menu toggle button */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--bechtle-text);
  font-size: 1.25rem;
  transition: var(--transition-base);
}

.mobile-menu-btn:hover {
  background: var(--surface-2);
}

/* Hamburger zeigt sich immer wenn Sidebar versteckt ist */
@media (max-width: 1023px) {
  .mobile-menu-btn {
    display: flex;
  }
}

/* ============================================================
   Handbuch Styles
   ============================================================ */

.chapter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bechtle-dark-green);
  color: white;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.handbuch-step {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bechtle-green);
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.handbuch-tip {
  background: var(--tone-green-bg);
  border-left: 3px solid var(--bechtle-green);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  margin: 12px 0;
}
.role-table th { background: var(--bechtle-dark-green); color: white; }

/* ============================================================
   Print Styles
   ============================================================ */

/* ── Global Search ───────────────────────────────────────────── */
.topbar-search { display: flex; align-items: center; }
.topbar-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  transition: var(--transition-base);
}
.topbar-search-wrap:focus-within {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}
.topbar-search-input {
  background: transparent; border: none; outline: none;
  color: white; font-size: 0.8rem; width: 150px;
  font-family: 'BechtlePro', sans-serif;
  transition: width 0.2s ease;
}
.topbar-search-input:focus { width: 220px; }
.topbar-search-input::placeholder { color: rgba(255,255,255,0.55); }
.topbar-search-wrap svg { color: rgba(255,255,255,0.7); flex-shrink:0; }
@media (max-width: 768px) {
  .topbar-search { display: none; }
}

@media print {
  .sidebar,
  .topbar,
  .btn,
  .filters-bar,
  .pagination {
    display: none !important;
  }

  .main-wrapper {
    margin-left: 0;
    width: 100%;
  }

  .main-content {
    padding: 0;
  }

  .page-body {
    padding: 0;
  }

  .card {
    border: 1px solid var(--border);
    box-shadow: none;
    break-inside: avoid;
  }

  body {
    background: white;
    font-size: 12px;
  }

  .table tbody tr:hover {
    background: transparent;
  }
}

/* ── Toast Notifications ─────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  font-size: 0.95rem;
  font-weight: 500;
  min-width: 300px;
  max-width: 520px;
  pointer-events: all;
  animation: toastIn 0.35s cubic-bezier(.21,1.02,.73,1) forwards;
}

.toast-hide {
  animation: toastOut 0.4s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

.toast-success { background: var(--tone-green-solid); color: var(--on-akzent); }
.toast-error,
.toast-danger  { background: var(--tone-red-solid); color: var(--on-akzent); }
.toast-warning { background: var(--tone-amber-solid); color: var(--on-akzent); }
.toast-info,
.toast-message { background: var(--tone-blue-solid); color: var(--on-akzent); }

.toast-icon { flex-shrink: 0; opacity: 0.9; }
.toast-text { flex: 1; line-height: 1.4; }

.toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--on-akzent); }

/* ── Übergabe Action Cards ───────────────────────────────── */
.action-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
.action-card-title svg {
  flex-shrink: 0;
  color: var(--bechtle-green);
}

/* ============================================================
   RESPONSIVE v2 — Tablet, iPad, iPhone
   ============================================================ */

/* ── Tablet (641px – 1023px): iPad mini bis iPad Pro Portrait ─ */
@media (min-width: 641px) and (max-width: 1023px) {
  .main-content {
    padding: 20px;
  }

  /* Stats: 2-spaltig auf Tablet */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Formulare: 2-spaltig */
  .form-row.cols-3,
  .form-row.cols-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Topbar: etwas kompakter */
  .topbar {
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .topbar-right .btn {
    font-size: 0.85rem;
    padding: 8px 14px;
  }

  /* Detail-Grid 2-spaltig */
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Card-Padding etwas kleiner */
  .card-body {
    padding: 16px 20px;
  }

  .card-header {
    padding: 14px 20px;
  }
}

/* ── Phone (≤ 640px): iPhone SE bis iPhone Plus ─────────────── */
@media (max-width: 640px) {
  /* Safe areas für iPhone Notch / Dynamic Island */
  .topbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Fluid Page Title */
  .page-title {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
  }

  /* Topbar Actions: Icon + verkürzt */
  .topbar-right {
    gap: 4px;
  }

  .topbar-right .btn-text {
    display: none;
  }

  .topbar-right .btn {
    padding: 8px 10px;
    min-width: 44px;
    font-size: 0.8rem;
  }

  /* Sidebar Nav: größere Touch-Targets */
  .sidebar-nav a {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  /* Stats: 2-spaltig auf kleinen Screens */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-number {
    font-size: 1.6rem;
  }

  /* Cards kompakter */
  .card-body {
    padding: 12px 16px;
  }

  .card-header {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Card-Title etwas kleiner */
  .card-title {
    font-size: 0.875rem;
  }

  /* Stepper: Labels ausblenden auf sehr kleinen Screens */
  .step-label {
    font-size: clamp(0.6rem, 2.5vw, 0.75rem);
  }

  .step-circle {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  /* Filter-Bar: alles einspaltig */
  .filter-bar,
  .filters-bar {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 8px;
  }

  .filter-actions {
    justify-content: stretch;
  }

  .filter-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Formulare einspaltig */
  .form-row,
  .form-grid-2,
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-4 {
    grid-template-columns: 1fr;
  }

  /* Formular-Inputs volle Breite */
  .form-input,
  .form-select {
    font-size: 16px; /* verhindert iOS Auto-Zoom */
  }

  /* Modal: Sheet von unten */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-overlay .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 95dvh;
    overflow-y: auto;
  }

  .modal-header {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: sticky;
    top: 0;
    background: var(--bechtle-white);
    z-index: 1;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bechtle-white);
    border-top: 1px solid var(--bechtle-border);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Modal-Buttons volle Breite */
  .modal-footer .btn {
    flex: 1;
    justify-content: center;
  }

  /* Tabellen: Scroll-Indikator */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }

  /* Login: volle Breite */
  .login-box {
    width: 100%;
    min-width: unset;
    padding: 28px 20px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Detail-Grid 1-spaltig */
  .detail-grid {
    grid-template-columns: 1fr;
  }

  /* Info-Row 1-spaltig */
  .info-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* Section-Header stapelt */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .section-header-right {
    width: 100%;
  }

  /* Handbuch: Chapter-Num kleiner */
  .chapter-num {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
}

/* ── iPhone SE und sehr kleine Geräte (≤ 390px) ─────────────── */
@media (max-width: 390px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .topbar-right .btn {
    padding: 6px 8px;
    min-width: 40px;
  }

  .page-title {
    max-width: 35vw;
  }
}

/* ── Landscape-Optimierungen für Phone ───────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    overflow-y: auto;
  }

  .modal-overlay .modal {
    max-height: 90dvh;
  }
}

/* ── App-Embed-Modus (iOS-App, User-Agent "IIMT-App/…") ───────────
   Die App bringt ihre eigene Navigation mit (Modul-Katalog) — Sidebar
   und Topbar der Webapp sind im eingebetteten WebView doppelt und
   werden serverseitig ausgeblendet. Ersetzt die JS-Injection der App
   (kein Sidebar-Aufblitzen, wirkt auch auf Folge- und Fehlerseiten).
   Seit dem Header-Umbau sitzen Menü-Knopf und Glocke in .page-header —
   ebenfalls aus: keine Web-Seitenleiste, Benachrichtigungen kommen per Push. */
body.app-embed .sidebar,
body.app-embed .topbar,
body.app-embed .sidebar-overlay,
body.app-embed .mobile-menu-btn,
body.app-embed .glocke {
  display: none !important;
}
body.app-embed .app-layout {
  display: block !important;
}
body.app-embed .main-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}
body.app-embed .main-content {
  padding: 16px !important;
}

/* Breite Tabellen: horizontal scrollen statt quetschen. Das Mobile-CSS
   (max-width 768px) macht das für .card-body.p-0 schon — iPad-Breiten
   (834/1024 pt) fielen bisher durchs Raster. Im App-Embed immer aktiv,
   im Browser bis 1100px (schmales Fenster = gleiches Problem). */
body.app-embed .card-body.p-0 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1100px) {
  .card-body.p-0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   KPI-Kacheln (Dashboard, Ticket-Statistik, Master-Dashboard)
   Markup: .stat-card.stat-card-<farbe> > .stat-icon + .stat-body(.stat-value,.stat-label)
   ============================================================ */
.stat-icon {
  width: 46px; height: 46px; border-radius: var(--radius-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--tone-blue-bg); color: var(--tone-blue-fg);
}
.stat-body { flex: 1; min-width: 0; }
/* Gleich breite Spalten: ohne min-width:0 wächst eine 1fr-Spalte auf die Breite ihres längsten
   Worts („Geräteausgaben") und die Kacheln werden ungleich. */
.stat-card { min-width: 0; }
.stat-label { font-size: 0.8rem; line-height: 1.3; overflow-wrap: anywhere; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--bechtle-text); }
/* Dashboard-Kennzahlen: feste 4er-Reihen (2 × 4) statt auto-fit — sonst je nach Breite 5+3 oder 7+1 */
.dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dash-kpis .stat-card { padding: 16px 18px; gap: 14px; min-height: 92px; }
@media (max-width: 1000px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .dash-kpis { grid-template-columns: minmax(0, 1fr); } }
.stat-card-green  .stat-icon { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.stat-card-blue   .stat-icon { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.stat-card-orange .stat-icon, .stat-card-yellow .stat-icon { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.stat-card-red    .stat-icon { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.stat-card-purple .stat-icon { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }
.stat-card-akzent .stat-icon { background: var(--akzent-soft); color: var(--akzent-ink); }
/* Kachel als Link (HR-Cockpit, Dashboard): kein Unterstrich, Textfarbe bleibt */
a.stat-card, a.stat-card:hover { text-decoration: none; color: inherit; }
/* Anfrage-Dialog Junior-IT (partials/anfrage.html) — <dialog> im Top-Layer */
.anfrage-dialog { width: min(440px, 92vw); padding: 18px 20px; border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); text-align: left; }
.anfrage-dialog::backdrop { background: rgba(10, 20, 15, 0.45); }
.anfrage-dialog h3 { margin: 0 0 4px; font-size: 1.05rem; }
.anfrage-dialog p { margin: 0 0 12px; font-size: 0.85rem; }
/* Aktionsknöpfe einer Karte/eines Formulars: rechtsbündig in einer Zeile, bricht bei Bedarf um */
.aktionen-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Eingabe mit festem Anhang, z. B. interne E-Mail „vorname.nachname" + „@bechtle.com" */
.eingabe-suffix { display: flex; align-items: stretch; }
.eingabe-suffix .form-input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; flex: 1; }
.eingabe-suffix-text { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-strong);
  border-left: 0; border-radius: 0 8px 8px 0; background: var(--surface-2); color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; }
.eingabe-suffix.mit-domain .eingabe-suffix-text { display: none; }
.eingabe-suffix.mit-domain .form-input { border-radius: 8px; }
/* HR-Einstellungen: Checklisten-Vorlage als bearbeitbare Tabelle */
.checkliste-vorlage-tabelle { margin: 0; }
.checkliste-vorlage-tabelle td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.checkliste-vorlage-tabelle .form-input, .checkliste-vorlage-tabelle .form-select { width: 100%; }
.checkliste-vorlage-reihe { white-space: nowrap; }
.checkliste-vorlage-reihe .btn { padding: 2px 4px; }
/* HR-Checkliste auf der Mitarbeiter-Kartei (2026-09-24): kompakte Zeilen, offene oben, erledigte eingeklappt */
.checkliste { border-bottom: 1px solid var(--border); }
.checkliste:last-child { border-bottom: 0; }
.checkliste-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.checkliste-stand { margin-left: auto; font-size: 0.82rem; color: var(--text-muted); }
.checkliste-balken { width: 120px; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.checkliste-balken > span { display: block; height: 100%; background: var(--akzent-marke); border-radius: 99px; }
.checkliste.austritt .checkliste-balken > span { background: var(--tone-amber-solid); }
/* Einstellungen → Rufnummernportierung: Eingaben einer Reihe auf einer Linie, auch wenn eine Beschriftung umbricht */
.portierung-form .form-row { align-items: end; }

/* Wechsel zur Bechtle AG (5.75.0): Auswahl auf der Offboarding-Karte (Fragen nur bei gesetztem Haken), IT-Karte */
.ob-wechsel { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; min-width: 0; }
.ob-wechsel-schalter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ob-wechsel-fragen { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 8px; font-size: .88rem; }
.ob-wechsel-fragen label { margin-left: 10px; display: inline-flex; gap: 4px; align-items: center; }
.ob-wechsel:not(:has(input[name="wechsel_ag"]:checked)) .ob-wechsel-fragen { display: none; }
.wechsel-ag-titel { font-weight: 600; margin-bottom: 6px; }
.wechsel-ag-geraete { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.wechsel-ag-geraete label { display: inline-flex; gap: 8px; align-items: center; }

/* Welcome-Paket (DHL) unter dem Kopf der Onboarding-Checkliste (5.74.0) */
.checkliste-paket { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 18px 10px;
  border-top: 1px solid var(--border); font-size: 0.86rem; }
.checkliste-paket-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.checkliste-paket-nr { font-family: ui-monospace, monospace; font-size: 0.82rem; }
.checkliste-paket-knoepfe { display: inline-flex; gap: 4px; margin-left: auto; }
.checkliste-paket form { margin: 0; }
.checkliste-paket-form { display: flex; gap: 6px; flex: 1 1 260px; max-width: 420px; }
.checkliste-paket-form .form-control { height: 30px; padding: 0 8px; font-size: 0.84rem; min-width: 0; }
.checkliste-liste { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1100px) { .checkliste-liste { column-count: 2; column-gap: 0; column-rule: 1px solid var(--border); } .checkliste-punkt { break-inside: avoid; } }
.checkliste-punkt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 8px 18px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.checkliste-punkt:hover { background: var(--akzent-soft); }
.checkliste-punkt form { margin: 0; }
.checkliste-haken { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-muted); }
.checkliste-haken:hover { color: var(--akzent-ink); }
.checkliste-haken.gesperrt { cursor: help; opacity: 0.75; }
.checkliste-punkt.erledigt .checkliste-haken { color: var(--akzent-ink); }
.checkliste-punkt.erledigt .checkliste-text > div:first-child { color: var(--text-muted); text-decoration: line-through; }
.checkliste-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 0.76rem; color: var(--text-muted); }
.checkliste-wer { padding: 0 6px; border-radius: 6px; background: var(--surface-2); }
.checkliste-wer.it { background: var(--tone-blue-bg); color: var(--tone-blue-fg); font-weight: 600; }
.checkliste-wann { font-size: 0.76rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.checkliste-fertig { margin: 0; padding: 10px 18px; font-size: 0.88rem; color: var(--akzent-ink); border-top: 1px solid var(--border); }
.checkliste-erledigt > summary { cursor: pointer; padding: 8px 18px; font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.checkliste-erledigt > summary:hover { color: var(--text); }
.stat-card-red .stat-value { color: var(--tone-red-fg); }
.stat-card-orange .stat-value, .stat-card-yellow .stat-value { color: var(--tone-amber-fg); }
.stats-grid.kompakt { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 0; }
.stats-grid.kompakt .stat-label { line-height: 1.25; }
.stats-grid.kompakt .stat-card { padding: 12px 14px; gap: 10px; }
.stats-grid.kompakt .stat-icon { width: 36px; height: 36px; }
.stats-grid.kompakt .stat-value { font-size: 1.35rem; }

/* ── Ticket-Listen (Melder-Seite, Team-Board) ── */
/* Stammdaten-Raster (Mitarbeiter, Asset, Lizenz): Beschriftung klein über dem Wert. Hatte bisher keine Grundstile. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.detail-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.detail-value { font-size: 0.92rem; overflow-wrap: anywhere; }
.detail-value .link { color: var(--akzent-ink); text-decoration: none; }
.detail-value .link:hover { text-decoration: underline; }
.card-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.card-header-right { display: flex; align-items: center; gap: 8px; flex: none; }
.mitarbeiter-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; background: var(--akzent-soft); color: var(--akzent-ink); box-shadow: inset 0 0 0 1px rgba(var(--akzent-rgb), 0.35); }
.badge-lg { font-size: 0.8rem; padding: 4px 12px; }
.empty-state-sm { padding: 18px 24px; color: var(--text-muted); font-size: 0.88rem; }
/* Gebäude · Räume & Plätze (2026-09-21) */
.gs-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 2px 12px; }
.gs-kopf h2 { margin: 0; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 6px; }
.gs-zeile-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.gs-zeile-form .form-control { flex: 1 1 160px; min-width: 0; height: 32px; padding: 4px 9px; font-size: 0.85rem; }
.gs-raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.gs-raum { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); min-width: 0; display: grid; gap: 4px; }
.gs-raum-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gs-raum-kopf strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-platz { display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
.gs-platz-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-platz-name small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.72rem; }
.gs-platz-assets { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.gs-asset { font-size: 0.74rem; padding: 1px 8px; border-radius: 999px; background: var(--tone-blue-bg); color: var(--tone-blue-fg); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-neu { margin-top: 6px; }
.gs-fuss { border-top: 1px dashed var(--border); padding-top: 12px; padding-bottom: 12px; }
.gs-aendern { display: inline-block; position: relative; }
.gs-aendern > summary { list-style: none; cursor: pointer; color: var(--text-muted); padding: 2px 4px; border-radius: 6px; line-height: 0; }
.gs-aendern > summary::-webkit-details-marker { display: none; }
.gs-aendern > summary:hover { background: var(--akzent-soft); color: var(--text); }
.gs-aendern-inhalt { position: absolute; z-index: 25; right: 0; top: calc(100% + 4px); width: min(340px, 80vw); display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); font-weight: 400; font-size: 0.85rem; }
/* Kennungen (Seriennummer, Inventar-Nr., IMEI, Barcode): groß, in Festbreite, per Klick kopierbar */
.kenn-zeile { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.kenn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; position: relative; padding: 7px 34px 7px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; min-width: 0; max-width: 100%; }
.kenn:hover { border-color: var(--akzent-marke); background: var(--akzent-soft); }
.kenn.kopiert { border-color: var(--tone-green-solid); }
.kenn-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.kenn-wert { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.kenn-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); line-height: 0; }
.kenn-info { cursor: default; padding-right: 12px; }
.kenn-info .kenn-wert { font-family: inherit; font-size: 0.92rem; }
.kenn-info.rot { background: var(--tone-red-bg); border-color: transparent; } .kenn-info.rot .kenn-wert { color: var(--tone-red-fg); }
.kenn-info.gelb { background: var(--tone-amber-bg); border-color: transparent; } .kenn-info.gelb .kenn-wert { color: var(--tone-amber-fg); }
.kenn-info.gruen .kenn-wert { color: var(--tone-green-fg); }
.as-wo > .card { height: auto !important; }
/* Übergabe-Assistent (2026-09-29): Schritt 2 — Hardware links, Tokens rechts */
.wz-auswahl { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .wz-auswahl { grid-template-columns: 1fr; } }
.wz-spalte { min-width: 0; }
.wz-empfaenger .card-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wz-vorgemerkt { background: var(--tone-violet-bg); color: var(--tone-violet-fg); font-size: 0.7rem; display: inline-flex; align-items: center; gap: 3px; }
.asset-row.wz-fuer-ihn { border-color: var(--tone-violet-solid) !important; }
.asset-row.wz-gesperrt, .token-row.wz-gesperrt { display: none !important; }
.token-row:hover, .asset-row:hover { border-color: var(--akzent-marke) !important; }
.token-row:has(input:checked), .asset-row:has(input:checked) { border-color: var(--akzent-marke) !important; background: var(--akzent-soft); }
.tk-hier { background: var(--akzent-soft); color: var(--akzent-ink); font-size: 0.68rem; margin-left: 6px; }
/* Tür-Token-Detailseite (2026-09-29) */
.tt-rechte { display: flex; flex-wrap: wrap; gap: 5px; }
.tt-recht { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 0.78rem; font-weight: 500; background: var(--surface-2); color: var(--text-muted); }
.tt-recht.an { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.tt-unten { align-items: start; }
.tt-kopf { display: flex; align-items: center; gap: 14px; margin: 0 2px 14px; }
.tt-titel { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tt-bez { font-weight: 500; color: var(--text-muted); font-size: 1rem; margin-left: 6px; }
a.tt-nr { color: inherit; text-decoration: none; }
a.tt-nr:hover code { color: var(--akzent-ink); text-decoration: underline; }
/* „Aktuell zugewiesen an" — hatte bisher keine Stile */
.assignment-banner { display: flex; align-items: center; gap: 14px; }
.assignment-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-soft); color: var(--akzent-ink); box-shadow: inset 0 0 0 1px rgba(var(--akzent-rgb), 0.35); }
.assignment-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.assignment-name { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text); text-decoration: none; }
a.assignment-name:hover { color: var(--akzent-ink); text-decoration: underline; }
.card-highlight { border-color: rgba(var(--akzent-rgb), 0.45); }
/* Tag-Leiste im Seitenkopf: eine schmale Zeile statt einer Karte */
.tag-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 2px 12px; min-height: 26px; font-size: 0.8rem; }
.tag-leiste-titel { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); margin-right: 2px; }
.tag-leiste-wahl { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 1px 8px; font: inherit; cursor: pointer; max-width: 120px; }
.tag-leiste-wahl:hover, .tag-leiste-wahl:focus { color: var(--text); border-color: var(--akzent-marke); }
.tag-leiste-link { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; line-height: 0; padding: 3px; border-radius: 6px; }
.tag-leiste-link:hover { color: var(--text); background: var(--akzent-soft); }
/* Mitarbeiter-Seite (2026-09-21): 2×2-Raster — Stammdaten | Tokens, Geräte | Tickets; darunter volle Breite */
.ma-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
@media (max-width: 1150px) { .ma-raster { grid-template-columns: 1fr; } }
/* HR-Cockpit ohne Tickets-Kachel: Stammdaten links über zwei Zeilen, Tokens + Geräte rechts gestapelt */
@media (min-width: 1151px) { .ma-raster.ohne-tickets .ma-stamm { grid-row: span 2; } }
.ma-feld { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; container-type: inline-size; }
.ma-feld > .card, .ma-feld > .card.mb-4, .ma-feld > .card.mb-3 { margin: 0 !important; min-width: 0; height: 100%; overflow: hidden; }
.ma-feld .table th, .ma-feld .table td { padding-left: 14px; padding-right: 10px; }
.ma-feld .table td:first-child { white-space: nowrap; }
/* In der halben Breite die Nebenspalten ausblenden: Tickets ohne Gerät/Melder, Tokens ohne Bezeichnung/Schema */
@container (max-width: 780px) {
  .ma-tickets .table th:nth-child(4), .ma-tickets .table td:nth-child(4), .ma-tickets .table th:nth-child(5), .ma-tickets .table td:nth-child(5),
  .ma-token .table th:nth-child(3), .ma-token .table td:nth-child(3), .ma-token .table th:nth-child(4), .ma-token .table td:nth-child(4) { display: none; }
}
.ma-feld .detail-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ma-feld .table-wrapper, .ma-feld .card-body.p-0 { overflow-x: auto; }
.ma-geraet { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 150px) auto; gap: 4px 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.ma-geraet:last-child { border-bottom: 0; }
.ma-geraet:hover { background: var(--akzent-soft); }
.ma-geraet-typ { font-weight: 600; }
.ma-geraet-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-geraet-name small { display: block; color: var(--text-muted); font-size: 0.75rem; }
.ma-geraet-sn { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-geraet-aktion { justify-self: end; }
@container (max-width: 520px) { .ma-geraet { grid-template-columns: minmax(0, 1fr) auto; } .ma-geraet-typ, .ma-geraet-sn { grid-column: 1; } }
/* Tags (2026-09-21): Chips, Vergabe-Karte, Verwaltung */
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tag-chip.klein { font-size: 0.7rem; padding: 1px 7px; }
/* Tag-Filterzeile + Tabellenzelle (2026-09-29) */
.tag-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--border); }
.tag-gruppe-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.asset-chip.tag-filter-chip { background: var(--tag-bg); color: var(--tag-fg); border-color: transparent; }
.asset-chip.tag-filter-chip span { color: var(--tag-fg); opacity: .75; }
.asset-chip.tag-filter-chip:hover { border-color: var(--tag-solid); }
.asset-chip.tag-filter-chip.aktiv { background: var(--tag-solid); color: var(--surface); border-color: var(--tag-solid); }
.asset-chip.tag-filter-chip.aktiv span { color: var(--surface); opacity: .85; }
.asset-chip.tag-filter-chip.leer { opacity: .5; }
.tag-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--tag-solid); flex-shrink: 0; }
.asset-chip.tag-filter-chip.aktiv .tag-punkt { background: var(--surface); }
.tag-zelle { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: 260px; overflow: hidden; }
.tag-zelle .tag-chip { flex: 0 1 auto; min-width: 0; }
.tag-mehr { flex: none; }
.tag-mehr { font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); cursor: default; }
.ma-filter { width: 220px; flex: 0 0 auto; }
@media (max-width: 760px) { .ma-filter { width: 100%; } }
.tag-ebene { font-size: 0.6em; opacity: 0.75; }
.tag-liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-form { display: inline-flex; align-items: center; margin: 0; }
.tag-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px 0 3px; }
.tag-x:hover { color: var(--tone-red-fg); }
.tag-neu { margin: 10px 0 0; }
.tag-ebenen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.tag-zeile { border-bottom: 1px solid var(--border); padding: 7px 0; }
.tag-zeile summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; cursor: pointer; list-style: none; }
.tag-zeile summary::-webkit-details-marker { display: none; }
.tag-nutzung, .tag-beschreibung { font-size: 0.78rem; }
.tag-beschreibung { flex-basis: 100%; }
.tag-zeile-inhalt { margin: 10px 0 4px; display: grid; gap: 8px; }
.tag-editor { display: grid; gap: 8px; }
.tag-neu-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); display: grid; gap: 8px; font-size: 0.88rem; }
.tag-farben { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-farben label { cursor: pointer; line-height: 0; }
.tag-farben input { position: absolute; opacity: 0; pointer-events: none; }
.tag-farben span { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--surface); }
.tag-farben input:checked + span { border-color: var(--text); }
.tag-farben input:focus-visible + span { outline: 2px solid var(--akzent-marke); outline-offset: 2px; }
/* Sanftes Absenden: Bereich kurz abdimmen, solange die Antwort unterwegs ist */
[data-live] { transition: opacity 0.15s ease; }
[data-live].live-laedt { opacity: 0.6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { [data-live] { transition: none; } }
/* Glocke: kurzer Hinweis, wenn im Hintergrund etwas Neues eingetroffen ist */
@keyframes glocke-neu { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.glocke-knopf.glocke-neu { animation: glocke-neu 0.7s ease; }
@media (prefers-reduced-motion: reduce) { .glocke-knopf.glocke-neu { animation: none; } }
.live-stand { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.live-stand button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; font: inherit; }
.live-stand button:hover { background: var(--surface-2); }
/* Team-Board: Umfang der Kennzahlen + Tabelle „Wer hat was" */
.board-umfang { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; font-size: 0.8rem; color: var(--text-muted); }
table.board-wer { font-variant-numeric: tabular-nums; margin: 0; width: 100%; min-width: 0; }   /* table.: schlägt table.table { min-width: 600px } */
.board-wer thead th, .board-wer td { text-align: right; padding: 7px 10px; white-space: nowrap; }   /* thead th: schlägt .table thead th (sonst Kopf 16px, Zellen 10px → versetzt) */
.board-wer thead th { letter-spacing: 0; white-space: normal; vertical-align: bottom; }
.card:has(> .table-wrapper > .board-wer) > .table-wrapper { container-type: inline-size; }
@container (max-width: 720px) { .board-wer .board-wer-balken, .board-wer .board-wer-balken-kopf { display: none; } }
@container (max-width: 600px) { .board-wer thead th, .board-wer td { padding: 6px 5px; } .board-wer thead th { font-size: .68rem; } }
.board-wer thead th:first-child, .board-wer td:first-child { text-align: left; }
.board-wer tr.board-last { display: table-row; cursor: pointer; }
.board-wer tr.board-last:hover td, .board-wer tr.board-last.aktiv td { background: var(--akzent-soft); }
.board-wer tr.board-last.ich .board-last-name { font-weight: 700; }
.board-wer td.rot { color: var(--tone-red-fg); font-weight: 700; }
.board-wer-balken { width: 30%; min-width: 48px; }
.board-wer-balken .board-last-balken { display: block; }
.board-wer-ohne td { color: var(--tone-red-fg); }
/* Team-Board: gespeicherte Filter (Chips) + Hinweis „Filter aktiv" */
.board-filter-gespeichert { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; font-size: 0.8rem; }
#tb-gespeichert-liste { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tb-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.tb-chip button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 3px 10px; }
.tb-chip .tb-chip-x { padding: 3px 8px 3px 4px; color: var(--text-muted); }
.tb-chip button:hover { background: var(--akzent-soft); }
.tb-chip.aktiv { border-color: var(--akzent-marke); background: var(--akzent-soft); font-weight: 600; }
.board-filter-aktiv { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--tone-amber-bg); color: var(--tone-amber-fg); font-size: 0.85rem; }
.board-filter-aktiv-knoepfe { display: inline-flex; gap: 6px; }
/* Hinweiszeilen im Ticket-Kopf (Übernahme-Anfrage, Eingang) und Eingang-Karte im Board */
.ticket-hinweis-zeile { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 9px 18px; font-size: 0.88rem; border-top: 1px solid var(--border); }
.ticket-hinweis-zeile.gelb { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.ticket-hinweis-zeile.blau { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.ticket-hinweis-knoepfe { display: inline-flex; gap: 6px; }
.ticket-hinweis-knoepfe form { margin: 0; }
.board-eingang { border-color: rgba(var(--akzent-rgb), 0.45); }
/* Ticket-Detail: Übersichtskopf (2026-09-18) — Betreff, Status, Fakten-Kacheln, Hauptaktionen */
.ticket-kopf-oben { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; }
.ticket-kopf-titel { min-width: 0; flex: 1 1 360px; }
.ticket-kopf-titel h2 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.ticket-kopf-badges { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8rem; }
.ticket-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ticket-kopf-aktionen form { margin: 0; }
.ticket-kopf-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius, 14px) var(--radius, 14px); overflow: hidden; }
.ticket-fakt { background: var(--surface); padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket-fakt > span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ticket-fakt > strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; }
.ticket-fakt > strong a { color: inherit; }
.ticket-fakt > em { font-style: normal; font-size: 0.76rem; color: var(--text-muted); }
.ticket-fakt.rot { background: var(--tone-red-bg); } .ticket-fakt.rot > strong, .ticket-fakt.rot > em { color: var(--tone-red-fg); }
.ticket-fakt.gelb { background: var(--tone-amber-bg); } .ticket-fakt.gelb > strong, .ticket-fakt.gelb > em { color: var(--tone-amber-fg); }
.ticket-fakt.gruen > strong { color: var(--tone-green-fg); }
/* Zeile = Container; das Raster darin richtet Kategorie, Betroffene und Bearbeiter als Spalten aus
   und klappt sie in schmalen Karten (Meine Tickets, rechte Board-Spalte) unter den Text. */
.ticket-zeile { container-type: inline-size; padding: 10px 0; border-bottom: 1px solid var(--bechtle-border); }
.tz-raster { --tz-aktion: auto; display: grid; grid-template-columns: minmax(260px, 1fr) 140px 160px 140px var(--tz-aktion) 158px; gap: 4px 14px; align-items: start; }
.tz-raster.tz-ohne-bearbeiter { grid-template-columns: minmax(260px, 1fr) 140px 160px var(--tz-aktion) 158px; }
.tb-zeile .tz-raster { --tz-aktion: 112px; }   /* Team-Liste: Knöpfe unterschiedlich breit, Spalten sollen trotzdem fluchten */
.tz-spalten { display: contents; }
.tz-spalte { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.75rem; min-width: 0; padding-top: 2px; }
.tz-spalte .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-datum { display: grid; gap: 2px; margin: 0; width: 158px; box-sizing: border-box; font-size: 0.74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tz-datum > div { display: grid; grid-template-columns: 58px 1fr; column-gap: 6px; align-items: baseline; }
.tz-datum dt { color: var(--text-muted); font-weight: 500; }
.tz-datum dd { margin: 0; text-align: right; color: var(--text); }
.tz-datum .rot dd { color: var(--tone-red-fg); font-weight: 700; }
.tz-datum .gelb dd { color: var(--tone-amber-fg); font-weight: 700; }
/* Schmale Karten (rechte Board-Spalte, Meine Tickets): kompakte Zeile — Betreff + Datum oben, darunter ALLE
   Badges in einer fließenden Reihe, Aktion klein am Ende. Vorher drei getrennte Badge-Reihen untereinander. */
@container (max-width: 1080px) {
  .tz-raster, .tz-raster.tz-ohne-bearbeiter { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
  .tz-raster > .ticket-zeile-text, .tz-raster .ticket-zeile-badges, .tz-raster .tz-spalten, .tz-raster .tz-spalte { display: contents; }
  .ticket-zeile-titel { order: 1; flex: 1 1 0; min-width: calc(100% - 175px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
  .tz-raster > .tz-datum { order: 2; flex: none; align-self: flex-start; }
  .tz-raster .badge, .tz-raster .tag-chip, .tz-raster > .ticket-zeile-text > span { order: 3; font-size: 0.7rem; }
  .tz-raster .tz-datum .badge, .tz-raster .tz-datum span { order: 0; }
  .tz-raster > .ticket-zeile-aktion { order: 4; flex: 0 1 auto; margin-left: auto; }
  .tz-raster > .ticket-zeile-aktion:empty { display: none; }
  .tz-raster > .ticket-zeile-aktion select { padding: 2px 6px; font-size: 0.75rem; height: auto; min-width: 0; width: auto; }
  .ticket-zeile { padding: 9px 0; }
}
.ticket-zeile:last-child { border-bottom: 0; }
.ticket-zeile-text { flex: 1; min-width: 0; }
.ticket-zeile-titel { font-weight: 600; color: inherit; text-decoration: none; }
.ticket-zeile-titel:hover { color: var(--bechtle-primary); }
.ticket-zeile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 0.75rem; }
.ticket-zeile-aktion { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ticket-zeile-aktion form { margin: 0; }
.ticket-zeile-zeit { color: var(--bechtle-text-light); font-size: 0.78rem; white-space: nowrap; }
.ticket-zeile.erledigt { opacity: .6; }
.ticket-zeile.erledigt .ticket-zeile-titel { text-decoration: line-through; }
/* Nachladbare Seitenteile (Tokenverwaltung): Platzhalter mit Spinner */
.teil-laedt { display: flex; align-items: center; gap: 10px; padding: 18px 16px; color: var(--text-muted); font-size: 0.88rem; }
.teil-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--akzent-marke); animation: teil-dreh 0.8s linear infinite; flex: none; }
@keyframes teil-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .teil-spinner { animation: none; } }
/* hidden-Attribut gewinnt immer, auch gegen display:flex von Zeilen und Buttons */
[hidden] { display: none !important; }
/* Team-Board (2026-09-18): links breit das Team (Kennzahlen, Auslastung, Scroll-Liste), rechts schmal „Meine" */
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .board-layout { grid-template-columns: 1fr; } }
/* Team-Board ohne rechte Spalte — die eigenen Einträge stehen unter „Meine Tickets". */
.board-layout.board-voll { grid-template-columns: minmax(0, 1fr); }
/* Acht Kacheln: immer 4+4 (schmal 2er-Reihen), nie 5+3. */
.board-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .board-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board-kpis .stat-card { padding: 12px 14px; gap: 12px; text-align: left; font: inherit; color: inherit; }
button.board-kpi { cursor: pointer; }
button.board-kpi:hover { border-color: var(--akzent-marke); }
.board-kpis .stat-icon { width: 38px; height: 38px; }
.board-kpis .stat-value { font-size: 1.45rem; }
.board-auslastung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 4px 18px; }
.board-last { display: grid; grid-template-columns: minmax(0, 150px) 1fr 70px; gap: 10px; align-items: center; padding: 5px 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.board-last:hover, .board-last.aktiv { background: var(--akzent-soft); }
.board-last.ich .board-last-name { font-weight: 700; }
.board-last-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.board-last-balken { height: 8px; border-radius: 4px; background: var(--bechtle-light-bg); overflow: hidden; }
.board-last-balken > span { display: block; height: 100%; background: var(--akzent-marke); border-radius: 4px; }
.board-last-zahl { text-align: right; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-last-zahl em { font-style: normal; font-weight: 600; color: var(--tone-red-fg); }
.board-scroll { max-height: max(360px, calc(100vh - 430px)); overflow-y: auto; padding-right: 4px; }
.board-scroll-meine { max-height: none; overflow: visible; }
/* Master-Dashboard (5.12): fünf Hauptkacheln, Kennzahl-Leiste, drei gleich hohe Analysekarten. */
.stats-grid.md-haupt { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats-grid.md-haupt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-leiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 12px 0 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); border-radius: 14px; overflow: hidden; }
.md-leiste > * { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; color: inherit; text-decoration: none; border-left: 1px solid var(--border); min-width: 0; }
.md-leiste > *:first-child { border-left: 0; }
.md-leiste a:hover { background: var(--akzent-soft); }
.md-leiste strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.md-leiste span { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-leiste .rot strong { color: var(--tone-red-fg); }
@media (max-width: 1100px) { .md-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-leiste > * { border-left: 0; border-top: 1px solid var(--border); } }
.md-drei { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.md-drei.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1400px) { .md-drei.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-online-zeile { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.84rem; }
.md-online-zeile:last-of-type { border-bottom: 0; }
.md-online-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong, var(--border)); }
.md-online-zeile.online .md-online-punkt { background: var(--tone-green-solid); box-shadow: 0 0 0 3px var(--tone-green-bg); }
.md-online-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-online-name small { font-weight: 400; color: var(--text-muted); }
.md-online-rolle { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.md-online-wann { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-online-zeile.online .md-online-wann { color: var(--tone-green-fg); font-weight: 600; }
@media (max-width: 1100px) { .md-drei { grid-template-columns: minmax(0, 1fr); } }
.md-karte { margin: 0; display: flex; flex-direction: column; height: 264px; }
.md-karte > .card-body { flex: 1; min-height: 0; }
.md-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.md-balkenzeile { display: grid; grid-template-columns: minmax(0, 140px) 1fr 64px; gap: 8px; align-items: center; font-size: 0.85rem; padding: 4px 0; }
.md-balkenzeile > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-balken { height: 8px; background: var(--bechtle-bg); border-radius: 4px; overflow: hidden; }
.md-balken > div { height: 100%; border-radius: 4px; background: var(--akzent); }
.md-zahl { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.md-zwischen { margin: 0 0 8px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 1100px) { .md-karte { height: auto; max-height: 340px; } }

/* Seit 5.12: rechts drei kleine Kacheln, jede mit eigenem Scrollbereich; die Spalte selbst scrollt nicht mehr. */
.board-meine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.board-kachel { margin: 0; }
.board-kachel > .card-header { padding: 10px 14px; min-height: 0; gap: 8px; }
.board-kachel > .card-header .card-title { font-size: 0.92rem; }
.board-kachel-scroll { padding: 4px 14px 8px; max-height: min(34vh, 320px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#meine .board-kachel-scroll { max-height: min(42vh, 420px); }
.board-scroll-unang { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.board-eingang.leer > .card-body { padding-block: 10px; }
.tk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tk-zeile:last-child { border-bottom: 0; }
.tk-zeile.erledigt .tk-titel { color: var(--text-muted); }
.tk-titel { grid-column: 1 / -1; font-size: 0.86rem; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-titel:hover { color: var(--akzent-ink); }
.tk-nr { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tk-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.tk-meta .badge { font-size: 0.68rem; }
.tk-wer { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-aktion { display: flex; justify-content: flex-end; }
.tk-aktion form { margin: 0; }
.tk-status.form-control { height: 26px; padding: 0 22px 0 8px; font-size: 0.76rem; width: 128px; min-width: 0; }
.tk-aktion .btn-sm { padding: 2px 8px; font-size: 0.74rem; }
.board-meine { position: sticky; top: calc(var(--kopf-h, 0px) + 8px); }
@media (max-width: 1100px) { .board-meine { position: static; } .board-scroll, .board-scroll-meine { max-height: none; } }
.board-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.board-filter .form-control { max-width: 200px; }
.zaehler { background: var(--bechtle-bg); border-radius: 10px; padding: 0 8px; margin-left: 4px; font-size: 0.8rem; font-weight: 600; }
.zaehler.rot { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.zaehler.gruen { background: var(--tone-green-bg); color: var(--tone-green-fg); }

/* ── Anlegen (IT): Art-Umschalter ── */
.art-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.art-wahl label { border: 1px solid var(--bechtle-border); border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.art-wahl label:has(input:checked) { border-color: var(--bechtle-primary); background: rgba(var(--akzent-rgb), 0.06); box-shadow: 0 0 0 1px var(--bechtle-primary); }
.art-wahl input { margin-top: 3px; accent-color: var(--bechtle-primary); }
.art-wahl small { display: block; color: var(--bechtle-text-light); font-weight: 400; }
.zuweisung-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.zuweisung-wahl label { border: 1px solid var(--bechtle-border); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 0.9rem; display: flex; gap: 6px; align-items: center; }
.zuweisung-wahl label:has(input:checked) { border-color: var(--bechtle-primary); background: rgba(var(--akzent-rgb), 0.08); font-weight: 600; }
.zuweisung-wahl input { accent-color: var(--bechtle-primary); }

/* ── Statistik: Wochenverlauf + Balken ── */
/* Wochenchart (2026-09-21): höher, Zahlen auf den Säulen, Grundlinie + Hilfslinien, aktuelle Woche hervorgehoben */
.wochen-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 210px; padding: 22px 4px 0;
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--border) calc(25% - 1px), var(--border) 25%) content-box; background-size: 100% calc(100% - 34px); background-repeat: no-repeat; background-position: 0 22px; }
.wochen-spalte { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; }
.wochen-balken { display: flex; gap: 4px; align-items: flex-end; width: 100%; justify-content: center; flex: 1; border-bottom: 1px solid var(--border-strong); }
.wochen-balken > div { position: relative; width: 42%; max-width: 34px; border-radius: 4px 4px 0 0; min-height: 3px; }
.wochen-balken > div.leer { min-height: 0; }
.wochen-balken > div > b { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); padding-bottom: 2px; white-space: nowrap; }
.wochen-spalte.aktuell .wochen-label { color: var(--text); font-weight: 700; }
.wochen-balken .neu { background: var(--tone-blue-solid); }
.wochen-balken .erledigt { background: var(--tone-green-solid); }
.wochen-label { font-size: 0.7rem; color: var(--bechtle-text-light); white-space: nowrap; text-align: center; line-height: 1.2; height: 28px; }
.wochen-label small { display: block; font-size: 0.62rem; opacity: 0.8; }
.balken-zeile { display: grid; grid-template-columns: minmax(110px, 170px) 1fr 64px; gap: 8px; align-items: center; font-size: 0.85rem; padding: 3px 0; }
.balken-zeile.leer { opacity: 0.45; }
.stat-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 28px; margin-top: 18px; align-items: start; }
.stat-h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; color: var(--text-muted); }
.stat-h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; }
.ausl-stapel { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 0; }
.ausl-stapel i { display: block; height: 100%; }
.board-wer tr.ich .board-last-name { font-weight: 700; }
.balken-zeile .balken { height: 8px; background: var(--bechtle-bg); border-radius: 4px; overflow: hidden; }
.balken-zeile .balken > div { height: 100%; border-radius: 4px; background: var(--bechtle-primary); }
.legende { font-size: 0.75rem; color: var(--bechtle-text-light); margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.tabelle-klein { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.tabelle-klein th, .tabelle-klein td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--bechtle-border); white-space: nowrap; }
.tabelle-klein th:first-child, .tabelle-klein td:first-child { text-align: left; }
.tabelle-klein th { font-weight: 600; color: var(--bechtle-text-light); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .03em; }
.tabelle-klein tr:last-child td { border-bottom: 0; }

/* Gerätekatalog (Einstellungen): Produktfotos sind auf Weiß gerechnet, die Fläche drumherum bleibt weiß */
.gk-foto { object-fit: contain; background: var(--surface-foto); border-radius: 8px; }

/* ============================================================
   Dark Mode + Akzent-Varianten (Bechtle-Farben)
   html[data-theme="dunkel"] erzwingt Dunkel, html[data-theme="hell"] Hell,
   ohne Attribut folgt die App der Systemeinstellung. Akzent per
   html[data-akzent]. Beides wird serverseitig aus User.darstellung gesetzt
   (Kontomenü → Darstellung), Gäste bekommen System + Grün.
   ACHTUNG: Dieser Block enthält bewusst feste Farbwerte (Token-Definitionen) —
   nie ein Farb-Ersetzungsskript darüber laufen lassen.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --bg: #0e1513; --surface: #161f1b; --surface-2: #1c2622; --surface-3: #243029;
    --border: #2a3630; --border-strong: #3a4842;
    --text: #e7ece9; --text-muted: #9fb0a7; --text-light: #7d8d85;
    --akzent-ink: #7ee2b0; --akzent-soft: rgba(var(--akzent-rgb), 0.16); --akzent-dark: #0c6b45;
    --tone-red-bg: #3a1a1a;    --tone-red-fg: #fca5a5;    --tone-red-solid: #ef4444;
    --tone-orange-bg: #3b2211; --tone-orange-fg: #fdba74; --tone-orange-solid: #f97316;
    --tone-amber-bg: #38290c;  --tone-amber-fg: #fcd34d;  --tone-amber-solid: #f59e0b;
    --tone-green-bg: #12301f;  --tone-green-fg: #86efac;  --tone-green-solid: #22c55e;
    --tone-teal-bg: #0f2e2b;   --tone-teal-fg: #5eead4;   --tone-teal-solid: #14b8a6;
    --tone-blue-bg: #172447;   --tone-blue-fg: #93c5fd;   --tone-blue-solid: #3b82f6;
    --tone-cyan-bg: #0e2f3a;   --tone-cyan-fg: #67e8f9;   --tone-cyan-solid: #06b6d4;
    --tone-violet-bg: #2a1d4f; --tone-violet-fg: #c4b5fd; --tone-violet-solid: #8b5cf6;
    --tone-pink-bg: #451a33;   --tone-pink-fg: #f9a8d4;   --tone-pink-solid: #ec4899;
    --tone-gray-bg: #1f2925;   --tone-gray-fg: #cbd5d0;   --tone-gray-solid: #64748b;
    --glass-fill: rgba(22, 31, 27, 0.62); --glass-fill-strong: rgba(22, 31, 27, 0.94);
    --glass-edge: rgba(255, 255, 255, 0.08); --glass-highlight: rgba(255, 255, 255, 0.07);
    --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --glass-ink: #e7ece9; --glass-ink-soft: rgba(231, 236, 233, 0.6);
  --glass-soft: rgba(255, 255, 255, 0.07); --glass-soft-strong: rgba(255, 255, 255, 0.12);
  --header-fill: rgba(14, 21, 19, 0.8); --toolbar-fill: rgba(22, 31, 27, 0.78); --overlay-fill: rgba(14, 21, 19, 0.78);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --bg: #0e1513; --surface: #161f1b; --surface-2: #1c2622; --surface-3: #243029;
  --border: #2a3630; --border-strong: #3a4842;
  --text: #e7ece9; --text-muted: #9fb0a7; --text-light: #7d8d85;
  --akzent-ink: #7ee2b0; --akzent-soft: rgba(var(--akzent-rgb), 0.16); --akzent-dark: #0c6b45;
  --tone-red-bg: #3a1a1a;    --tone-red-fg: #fca5a5;    --tone-red-solid: #ef4444;
  --tone-orange-bg: #3b2211; --tone-orange-fg: #fdba74; --tone-orange-solid: #f97316;
  --tone-amber-bg: #38290c;  --tone-amber-fg: #fcd34d;  --tone-amber-solid: #f59e0b;
  --tone-green-bg: #12301f;  --tone-green-fg: #86efac;  --tone-green-solid: #22c55e;
  --tone-teal-bg: #0f2e2b;   --tone-teal-fg: #5eead4;   --tone-teal-solid: #14b8a6;
  --tone-blue-bg: #172447;   --tone-blue-fg: #93c5fd;   --tone-blue-solid: #3b82f6;
  --tone-cyan-bg: #0e2f3a;   --tone-cyan-fg: #67e8f9;   --tone-cyan-solid: #06b6d4;
  --tone-violet-bg: #2a1d4f; --tone-violet-fg: #c4b5fd; --tone-violet-solid: #8b5cf6;
  --tone-pink-bg: #451a33;   --tone-pink-fg: #f9a8d4;   --tone-pink-solid: #ec4899;
  --tone-gray-bg: #1f2925;   --tone-gray-fg: #cbd5d0;   --tone-gray-solid: #64748b;
  --glass-fill: rgba(22, 31, 27, 0.62); --glass-fill-strong: rgba(22, 31, 27, 0.94);
  --glass-edge: rgba(255, 255, 255, 0.08); --glass-highlight: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --glass-ink: #e7ece9; --glass-ink-soft: rgba(231, 236, 233, 0.6);
  --glass-soft: rgba(255, 255, 255, 0.07); --glass-soft-strong: rgba(255, 255, 255, 0.12);
  --header-fill: rgba(14, 21, 19, 0.8); --toolbar-fill: rgba(22, 31, 27, 0.78); --overlay-fill: rgba(14, 21, 19, 0.78);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Akzente aus dem Bechtle Design System (bechtle.com): Experience Green, Primary Blue,
   Turquoise, Orange, Purple, Raspberry. --akzent-ink ist die lesbare Textvariante,
   im Dark Mode jeweils die helle Stufe. */
:root[data-akzent="blau"]     { --akzent: #244ca7; --akzent-rgb: 36, 76, 167;   --akzent-hover: #1e3f8a; --akzent-dark: #1a3778; --akzent-dark-rgb: 26, 55, 120;  --akzent-ink: #1a3778; --akzent-soft: #e9eef9; }
:root[data-akzent="tuerkis"]  { --akzent: #27c9d1; --akzent-rgb: 39, 201, 209;  --akzent-hover: #1fb1b8; --akzent-dark: #167f85; --akzent-dark-rgb: 22, 127, 133; --akzent-ink: #12686d; --akzent-soft: #e6f8f9; }
:root[data-akzent="orange"]   { --akzent: #da6f1e; --akzent-rgb: 218, 111, 30;  --akzent-hover: #c26119; --akzent-dark: #8f4712; --akzent-dark-rgb: 143, 71, 18;  --akzent-ink: #8f4712; --akzent-soft: #fbeee3; }
:root[data-akzent="lila"]     { --akzent: #a774d8; --akzent-rgb: 167, 116, 216; --akzent-hover: #945fc9; --akzent-dark: #6b3fa0; --akzent-dark-rgb: 107, 63, 160; --akzent-ink: #5f3590; --akzent-soft: #f2ebfa; }
:root[data-akzent="himbeere"] { --akzent: #d9486c; --akzent-rgb: 217, 72, 108;  --akzent-hover: #c33a5d; --akzent-dark: #93233f; --akzent-dark-rgb: 147, 35, 63;  --akzent-ink: #93233f; --akzent-soft: #fbe9ee; }
/* HR-Cockpit: eigener Akzent auf derselben Mechanik, damit Karten, Tabellen und
   Dunkelmodus dort genauso funktionieren wie im Asset-Tool. */
:root[data-akzent="hr"]       { --akzent: #0f766e; --akzent-rgb: 15, 118, 110;   --akzent-hover: #0d645d; --akzent-dark: #134e4a; --akzent-dark-rgb: 19, 78, 74;   --akzent-ink: #0f766e; --akzent-soft: #e2f5f2; --akzent-marke: #14b8a6; }
/* Azubi-Bereich (2026-09-30): Blattgrün — heller und gelblicher als das Asset-Grün, klar weg vom HR-Petrol. */
:root[data-akzent="azubi"]    { --akzent: #5ea52b; --akzent-rgb: 94, 165, 43;   --akzent-hover: #528f26; --akzent-dark: #2f6a14; --akzent-dark-rgb: 47, 106, 20;  --akzent-ink: #3d7a1f; --akzent-soft: #eef7e5; --akzent-marke: #86c44f; }
/* Flieder ist sehr hell: Text auf Akzentflächen wird dunkel statt weiß. */
:root[data-akzent="flieder"]  { --akzent: #d3d3ff; --akzent-rgb: 211, 211, 255; --akzent-hover: #c4c4fb; --akzent-dark: #4a4a9c; --akzent-dark-rgb: 74, 74, 156;  --akzent-ink: #3f3f8f; --akzent-soft: #f1f1ff; --on-akzent: #26265e; --akzent-marke: #6f6fd8; }
/* Pastellblau (2026-10-02, Wunsch Linus): heller Akzent wie Flieder — dunkler Text auf den Flächen, kräftigere Marker */
:root[data-akzent="pastellblau"] { --akzent: #a9c8ec; --akzent-rgb: 169, 200, 236; --akzent-hover: #93b8e4; --akzent-dark: #2f5f9e; --akzent-dark-rgb: 47, 95, 158; --akzent-ink: #2a5287; --akzent-soft: #eef4fc; --on-akzent: #16304f; --akzent-marke: #4f86cf;
  /* Ergänzung 2026-10-08 (Linus): Kontrast-Akzent für Hinweise, Badges und hervorgehobene Zahlen, kräftiger Akzent
     für Benachrichtigungspunkte, eigene Fehler-/Erfolgsfarbe, leicht bläulicher Grund statt Neutralgrau */
  --bg: #f3f7fc; --header-fill: rgba(243, 247, 252, 0.78);
  --kontrast-blau: #f3c48f; --tone-amber-solid: #f3c48f; --signal: #e8944a; --tone-orange-solid: #e8944a;
  --tone-red-solid: #e9737a; --tone-green-solid: #8fd3a8; }
/* Rosé (2026-10-08, Wunsch Linus): kräftiges Rosa, im Dunkelmodus Weinrot-Schwarz als Grund — dunkler Text auf den Buttons */
:root[data-akzent="rose"] { --akzent: #ff86b8; --akzent-rgb: 255, 134, 184; --akzent-hover: #f65d9f; --akzent-dark: #b3245f; --akzent-dark-rgb: 179, 36, 95; --akzent-ink: #a01f55; --akzent-soft: #fff0f5; --on-akzent: #170407; --akzent-marke: #f65d9f; }
:root[data-akzent="flieder"], :root[data-akzent="blau"], :root[data-akzent="lila"] { --kontrast-blau: var(--tone-teal-solid); }
:root[data-akzent="flieder"] .btn-primary, :root[data-akzent="flieder"] .sidebar-nav a.active,
:root[data-akzent="pastellblau"] .btn-primary, :root[data-akzent="pastellblau"] .sidebar-nav a.active,
:root[data-akzent="pastellblau"] .lager-standort-btn.aktiv,
:root[data-akzent="rose"] .btn-primary, :root[data-akzent="rose"] .sidebar-nav a.active,
:root[data-akzent="rose"] .lager-standort-btn.aktiv,
:root[data-akzent="flieder"] .lager-standort-btn.aktiv {
  box-shadow: inset 0 0 0 1px rgba(var(--akzent-dark-rgb), 0.38), 0 3px 10px rgba(var(--akzent-dark-rgb), 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"])[data-akzent="blau"] { --akzent-ink: #9db4f0; --akzent-dark: #2a55b8; --akzent-soft: rgba(36, 76, 167, 0.22); }
  :root:not([data-theme="hell"])[data-akzent="tuerkis"] { --akzent-ink: #7fe3e8; --akzent-dark: #1a8f96; --akzent-soft: rgba(39, 201, 209, 0.18); }
  :root:not([data-theme="hell"])[data-akzent="hr"] { --akzent-ink: #5ecfc2; --akzent-dark: #0d645d; --akzent-soft: rgba(20, 184, 166, 0.18); }
  :root:not([data-theme="hell"])[data-akzent="azubi"] { --akzent-ink: #a9dc80; --akzent-dark: #3d7a1f; --akzent-soft: rgba(134, 196, 79, 0.18); }
  :root:not([data-theme="hell"])[data-akzent="orange"] { --akzent-ink: #f5b177; --akzent-dark: #a85416; --akzent-soft: rgba(218, 111, 30, 0.18); }
  :root:not([data-theme="hell"])[data-akzent="lila"] { --akzent-ink: #cdb0ec; --akzent-dark: #7a4bb5; --akzent-soft: rgba(167, 116, 216, 0.2); }
  :root:not([data-theme="hell"])[data-akzent="himbeere"] { --akzent-ink: #f09ab1; --akzent-dark: #ad2c4d; --akzent-soft: rgba(217, 72, 108, 0.2); }
  :root:not([data-theme="hell"])[data-akzent="pastellblau"] { --akzent-ink: #a9c8ec; --akzent-dark: #3b6fb5; --akzent-soft: rgba(169, 200, 236, 0.14); --akzent-marke: #7fb0ea; --akzent-dark-rgb: 59, 111, 181;
    /* Pastellblau dunkel (2026-10-08): bläuliches Schwarz als Grund, Fehler/Erfolg/Hinweis in den Pastelltönen der Palette */
    --bg: #0c1118; --surface: #131a24; --surface-2: #18212d; --surface-3: #1f2a38; --border: #263244; --border-strong: #34435a; --text: #e8eef6; --text-muted: #a3b1c4; --text-light: #8190a5; --glow-rgb: 127, 176, 234; --tone-gray-bg: #1a2330; --tone-gray-fg: #cfd8e4; --tone-red-fg: #e9737a; --tone-green-fg: #8fd3a8; --tone-amber-fg: #f3c48f; --tone-orange-fg: #e8944a; --glass-fill: rgba(19, 26, 36, 0.66); --glass-fill-strong: rgba(19, 26, 36, 0.95); --glass-ink: #e8eef6; --glass-ink-soft: rgba(232, 238, 246, 0.6); --header-fill: rgba(12, 17, 24, 0.82); --toolbar-fill: rgba(19, 26, 36, 0.8); --overlay-fill: rgba(12, 17, 24, 0.8); }
  :root:not([data-theme="hell"])[data-akzent="rose"] { --akzent-ink: #ffc4d8; --akzent-dark: #f65d9f; --akzent-dark-rgb: 246, 93, 159; --akzent-soft: rgba(255, 134, 184, 0.16); --akzent-marke: #ff86b8;
    /* Rosé dunkel: Hintergrund, Fläche, erhöhte Fläche und Rahmen aus der Vorlage, Status in Neon-Grün/Amber/Rot */
    --bg: #170407; --surface: #2d0a10; --surface-2: #411219; --surface-3: #4e1620; --border: #4f1824; --border-strong: #6a2230; --text: #fff1f4; --text-muted: #d6a9b3; --text-light: #b48791; --glow-rgb: 255, 134, 184; --tone-gray-bg: #3a1218; --tone-gray-fg: #e9cdd3; --tone-green-bg: #0b2a19; --tone-green-fg: #00ff80; --tone-green-solid: #00ff80; --tone-amber-bg: #3a2606; --tone-amber-fg: #ffb300; --tone-amber-solid: #ffb300; --tone-red-bg: #3d0a0e; --tone-red-fg: #ff4d4d; --tone-red-solid: #ff2d2d; --glass-fill: rgba(45, 10, 16, 0.66); --glass-fill-strong: rgba(45, 10, 16, 0.95); --glass-ink: #fff1f4; --glass-ink-soft: rgba(255, 241, 244, 0.6); --header-fill: rgba(23, 4, 7, 0.82); --toolbar-fill: rgba(45, 10, 16, 0.8); --overlay-fill: rgba(23, 4, 7, 0.8); }
  :root:not([data-theme="hell"])[data-akzent="flieder"] { --akzent-ink: #d3d3ff; --akzent-dark: #5a5ab0; --akzent-soft: rgba(211, 211, 255, 0.14); --akzent-marke: #9d9df5;
    /* Flieder dunkel: neutrales Indigo-Schwarz als Grund, warmer Violett-Unterton auf den Flächen (statt Grünstich) */
    --bg: #12121a; --surface: #1a1625; --surface-2: #221d31; --surface-3: #2b2540; --border: #322b49; --border-strong: #463d63; --text: #eceaf6; --text-muted: #aca6c6; --text-light: #8a84a6; --akzent-dark-rgb: 90, 90, 176; --glow-rgb: 124, 108, 222; --tone-gray-bg: #25203a; --tone-gray-fg: #d2cee4; --glass-fill: rgba(26, 22, 37, 0.66); --glass-fill-strong: rgba(26, 22, 37, 0.95); --glass-ink: #eceaf6; --glass-ink-soft: rgba(236, 234, 246, 0.6); --header-fill: rgba(18, 18, 26, 0.82); --toolbar-fill: rgba(26, 22, 37, 0.8); --overlay-fill: rgba(18, 18, 26, 0.8); }
}
:root[data-theme="dunkel"][data-akzent="blau"] { --akzent-ink: #9db4f0; --akzent-dark: #2a55b8; --akzent-soft: rgba(36, 76, 167, 0.22); }
:root[data-theme="dunkel"][data-akzent="tuerkis"] { --akzent-ink: #7fe3e8; --akzent-dark: #1a8f96; --akzent-soft: rgba(39, 201, 209, 0.18); }
:root[data-theme="dunkel"][data-akzent="hr"] { --akzent-ink: #5ecfc2; --akzent-dark: #0d645d; --akzent-soft: rgba(20, 184, 166, 0.18); }
:root[data-theme="dunkel"][data-akzent="azubi"] { --akzent-ink: #a9dc80; --akzent-dark: #3d7a1f; --akzent-soft: rgba(134, 196, 79, 0.18); }
:root[data-theme="dunkel"][data-akzent="orange"] { --akzent-ink: #f5b177; --akzent-dark: #a85416; --akzent-soft: rgba(218, 111, 30, 0.18); }
:root[data-theme="dunkel"][data-akzent="lila"] { --akzent-ink: #cdb0ec; --akzent-dark: #7a4bb5; --akzent-soft: rgba(167, 116, 216, 0.2); }
:root[data-theme="dunkel"][data-akzent="himbeere"] { --akzent-ink: #f09ab1; --akzent-dark: #ad2c4d; --akzent-soft: rgba(217, 72, 108, 0.2); }
:root[data-theme="dunkel"][data-akzent="pastellblau"] { --akzent-ink: #a9c8ec; --akzent-dark: #3b6fb5; --akzent-soft: rgba(169, 200, 236, 0.14); --akzent-marke: #7fb0ea; --akzent-dark-rgb: 59, 111, 181;
    /* Pastellblau dunkel (2026-10-08): bläuliches Schwarz als Grund, Fehler/Erfolg/Hinweis in den Pastelltönen der Palette */
    --bg: #0c1118; --surface: #131a24; --surface-2: #18212d; --surface-3: #1f2a38; --border: #263244; --border-strong: #34435a; --text: #e8eef6; --text-muted: #a3b1c4; --text-light: #8190a5; --glow-rgb: 127, 176, 234; --tone-gray-bg: #1a2330; --tone-gray-fg: #cfd8e4; --tone-red-fg: #e9737a; --tone-green-fg: #8fd3a8; --tone-amber-fg: #f3c48f; --tone-orange-fg: #e8944a; --glass-fill: rgba(19, 26, 36, 0.66); --glass-fill-strong: rgba(19, 26, 36, 0.95); --glass-ink: #e8eef6; --glass-ink-soft: rgba(232, 238, 246, 0.6); --header-fill: rgba(12, 17, 24, 0.82); --toolbar-fill: rgba(19, 26, 36, 0.8); --overlay-fill: rgba(12, 17, 24, 0.8); }
:root[data-theme="dunkel"][data-akzent="rose"] { --akzent-ink: #ffc4d8; --akzent-dark: #f65d9f; --akzent-dark-rgb: 246, 93, 159; --akzent-soft: rgba(255, 134, 184, 0.16); --akzent-marke: #ff86b8;
    /* Rosé dunkel: Hintergrund, Fläche, erhöhte Fläche und Rahmen aus der Vorlage, Status in Neon-Grün/Amber/Rot */
    --bg: #170407; --surface: #2d0a10; --surface-2: #411219; --surface-3: #4e1620; --border: #4f1824; --border-strong: #6a2230; --text: #fff1f4; --text-muted: #d6a9b3; --text-light: #b48791; --glow-rgb: 255, 134, 184; --tone-gray-bg: #3a1218; --tone-gray-fg: #e9cdd3; --tone-green-bg: #0b2a19; --tone-green-fg: #00ff80; --tone-green-solid: #00ff80; --tone-amber-bg: #3a2606; --tone-amber-fg: #ffb300; --tone-amber-solid: #ffb300; --tone-red-bg: #3d0a0e; --tone-red-fg: #ff4d4d; --tone-red-solid: #ff2d2d; --glass-fill: rgba(45, 10, 16, 0.66); --glass-fill-strong: rgba(45, 10, 16, 0.95); --glass-ink: #fff1f4; --glass-ink-soft: rgba(255, 241, 244, 0.6); --header-fill: rgba(23, 4, 7, 0.82); --toolbar-fill: rgba(45, 10, 16, 0.8); --overlay-fill: rgba(23, 4, 7, 0.8); }
:root[data-theme="dunkel"][data-akzent="flieder"] { --akzent-ink: #d3d3ff; --akzent-dark: #5a5ab0; --akzent-soft: rgba(211, 211, 255, 0.14); --akzent-marke: #9d9df5;
    /* Flieder dunkel: neutrales Indigo-Schwarz als Grund, warmer Violett-Unterton auf den Flächen (statt Grünstich) */
    --bg: #12121a; --surface: #1a1625; --surface-2: #221d31; --surface-3: #2b2540; --border: #322b49; --border-strong: #463d63; --text: #eceaf6; --text-muted: #aca6c6; --text-light: #8a84a6; --akzent-dark-rgb: 90, 90, 176; --glow-rgb: 124, 108, 222; --tone-gray-bg: #25203a; --tone-gray-fg: #d2cee4; --glass-fill: rgba(26, 22, 37, 0.66); --glass-fill-strong: rgba(26, 22, 37, 0.95); --glass-ink: #eceaf6; --glass-ink-soft: rgba(236, 234, 246, 0.6); --header-fill: rgba(18, 18, 26, 0.82); --toolbar-fill: rgba(26, 22, 37, 0.8); --overlay-fill: rgba(18, 18, 26, 0.8); }

/* Bilder/Logos im Dark Mode leicht dämpfen */
:root[data-theme="dunkel"] img:not(.sidebar-logo-img):not(.ticket-bild img) { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) img:not(.sidebar-logo-img):not(.ticket-bild img) { filter: brightness(0.92); } }

/* ── Kontomenü: Darstellung (Theme + Akzent) ── */
.sidebar-menu-darstellung { padding: 6px 10px 8px; }
.sidebar-menu-darstellung .dm-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--glass-ink-soft); margin-bottom: 6px; }
.dm-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.sidebar-menu .dm-theme button { justify-content: center; padding: 6px 4px; font-size: 0.78rem; border: 1px solid transparent; border-radius: 8px; width: auto; }
.sidebar-menu .dm-theme button[aria-pressed="true"] { background: rgba(var(--akzent-rgb), 0.16); border-color: rgba(var(--akzent-rgb), 0.5); font-weight: 600; }
.dm-akzente { display: flex; gap: 8px; flex-wrap: wrap; }
.sidebar-menu .dm-akzente button { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--dm-farbe); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.sidebar-menu .dm-akzente button:hover { transform: scale(1.1); background: var(--dm-farbe); }
.sidebar-menu .dm-akzente button[aria-pressed="true"] { border-color: var(--glass-ink); box-shadow: 0 0 0 2px var(--glass-fill-strong), inset 0 0 0 1px rgba(0,0,0,.12); }
html.sb-collapsed .sidebar-menu-darstellung { display: block; }

/* ── Urlaubskalender ── */
.kal-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--text-muted); margin: 2px 4px 10px; }
.kal-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1px solid var(--border); }
.kal-swatch.we { background: var(--surface-2); }
.kal-swatch.ft { background: var(--tone-amber-bg); border-color: var(--tone-amber-solid); }
/* Kalender: immer zwei Monate nebeneinander, beide im selben Format (6 Wochen, feste Zeilenhöhe);
   nicht breiter als nötig, auf schmalen Bildschirmen untereinander */
/* Seite zweispaltig (2026-09-25): links die Monate, rechts die Karten — beide Spalten wachsen fließend mit */
.kal-seite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(300px, 3fr); gap: 16px; align-items: start; }
.kal-rechts { display: grid; gap: 16px; min-width: 0; }
.kal-links { min-width: 0; }
@media (max-width: 1100px) { .kal-seite { grid-template-columns: 1fr; } }
/* Standard (schmal oder ohne JS): Monate untereinander, Zellen skalieren mit der Spaltenbreite */
.kal-monate { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.kal-monate .kal-raster { grid-auto-rows: auto; }
.kal-monate .kal-chip { font-size: 0.68rem; }
.kal-monate .kal-tag { min-height: 0; height: auto; aspect-ratio: 1 / 0.82; padding: 5px; min-width: 0; }
/* Breit genug (JS setzt .kal-fit ab ~880 px Spaltenbreite): Monate nebeneinander, der Kalender füllt die Fensterhöhe
   und bleibt beim Scrollen der rechten Spalte stehen; die Zeilen teilen sich die Höhe */
.kal-fit .kal-links { position: sticky; top: var(--kal-oben, 96px); height: calc(100vh - var(--kal-oben, 96px) - 16px); }
.kal-fit .kal-links > .card { height: 100%; display: flex; flex-direction: column; }
.kal-fit .kal-links > .card > .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kal-fit .kal-monate { flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.kal-fit .kal-monat { display: flex; flex-direction: column; min-height: 0; }
.kal-fit .kal-monate .kal-raster { flex: 1; min-height: 0; grid-template-rows: auto repeat(6, minmax(0, 1fr)); }
.kal-fit .kal-monate .kal-tag { aspect-ratio: auto; height: auto; }
.kal-monate .kal-ft-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kal-swatch.heute { background: var(--akzent-soft); border-color: var(--akzent-marke); }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-kopf { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 4px 6px; }
.kal-kopf.we { color: var(--text-light); }
.kal-tag { min-height: 92px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 3px; position: relative; }
.kal-chips { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow: hidden; }
.kal-chips > * { flex-shrink: 0; }
.kal-chip.kal-mehr-versteckt { display: none; }
.kal-mehr { align-self: flex-start; white-space: nowrap; border: 0; background: transparent; color: var(--akzent-ink); font: inherit; font-size: 0.66rem; font-weight: 600; padding: 0 4px; cursor: pointer; border-radius: 4px; }
.kal-mehr:hover, .kal-mehr[aria-expanded="true"] { background: var(--akzent-soft); }
/* Tagesliste hinter „+n": schwebt über dem Raster, Tag bleibt schmal */
.kal-pop { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 240px; max-width: 320px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); cursor: default; font-size: 0.8rem; }
.kal-tag:nth-child(7n) .kal-pop, .kal-tag:nth-child(7n-1) .kal-pop { left: auto; right: 0; }
.kal-pop-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.kal-pop-zu { border: 0; background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.kal-pop-zeile { display: flex; gap: 6px; align-items: center; padding: 3px 0; min-width: 0; }
.kal-pop-zeile > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-pop .kal-chip { flex-shrink: 0; }
.kal-tag:hover { border-color: var(--akzent-marke); }
.kal-tag.we { background: var(--surface-2); }
.kal-tag.ft { background: var(--tone-amber-bg); border-color: var(--tone-amber-solid); }
.kal-tag.heute { box-shadow: inset 0 0 0 2px var(--akzent-marke); }
.kal-tag.fremd { opacity: .45; }
.kal-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.kal-nr { font-weight: 700; font-size: 0.85rem; }
.kal-tag.heute .kal-nr { color: var(--akzent-ink); }
.kal-ft-name { font-size: 0.66rem; color: var(--tone-amber-fg); font-weight: 600; text-align: right; line-height: 1.15; }
.kal-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 500; padding: 1px 6px; border-radius: 999px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid transparent; }
.kal-chip b { font-weight: 700; }
.kal-chip.meins { border-color: currentColor; }
.kal-chip.art-urlaub { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.kal-chip.art-frei { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.kal-chip.art-fortbildung { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }
.kal-chip.art-krank { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.kal-chip.art-sonstiges { background: var(--tone-gray-bg); color: var(--tone-gray-fg); }
.kal-swatch.art-urlaub { background: var(--tone-green-bg); } .kal-swatch.art-frei { background: var(--tone-blue-bg); }
.kal-swatch.art-fortbildung { background: var(--tone-violet-bg); } .kal-swatch.art-krank { background: var(--tone-red-bg); } .kal-swatch.art-sonstiges { background: var(--tone-gray-bg); }
.kal-chip.art-berufsschule { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); }
.kal-swatch.art-berufsschule { background: var(--tone-cyan-bg); }
.kal-chip.art-schule { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.kal-swatch.art-schule { background: var(--tone-orange-bg); }
/* Allgemeine Termine (Event, Inventur, Schulung, Wartung) — volle Breite, über den Abwesenheiten */
.kal-chip.kal-termin { border-radius: 6px; font-weight: 600; background: var(--tone-amber-bg); color: var(--tone-amber-fg); border-left: 3px solid var(--tone-amber-solid); }
.kal-chip.kal-termin.termin-inventur { background: var(--tone-blue-bg); color: var(--tone-blue-fg); border-left-color: var(--tone-blue-solid); }
/* Ticket-Fälligkeiten (Schalter Aus / Meine / Team) */
.kal-chip.kal-ticket { border-radius: 6px; font-weight: 500; background: var(--tone-teal-bg); color: var(--tone-teal-fg); border-left: 3px solid var(--tone-teal-solid); text-decoration: none; }
.kal-chip.kal-ticket:hover { filter: brightness(.96); text-decoration: none; }
.kal-chip.kal-ticket.ueberfaellig { background: var(--tone-red-bg); color: var(--tone-red-fg); border-left-color: var(--tone-red-solid); }
.kal-chip.kal-ticket.heute { border-left-color: var(--tone-amber-solid); }
.kal-swatch.ticket { background: var(--tone-teal-bg); border-color: var(--tone-teal-solid); }
.kal-swatch.ticket.ueberfaellig { background: var(--tone-red-bg); border-color: var(--tone-red-solid); }
.kal-swatch.termin { background: var(--tone-amber-bg); border-color: var(--tone-amber-solid); }
.kal-schalter { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 999px; }
.kal-schalter-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--text-muted); margin-right: 4px; }
.kal-schalter .btn-sm { padding: 2px 10px; border-radius: 999px; }
.kal-abschnitt { font-size: 0.78rem; margin: 10px 0 4px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.kal-abschnitt:first-child { margin-top: 0; }
.kal-abschnitt-rot { color: var(--tone-red-fg); }
.kal-zeile { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
/* Im Raster sind Chips Blockzeilen (Ellipsis greift), in Karten und Tagesliste bleiben sie Pillen — steht bewusst nach den Chip-Arten */
.kal-chips .kal-chip { display: block; width: auto; min-width: 0; }
.kal-chips .kal-chip.kal-mehr-versteckt { display: none; }
.kal-chip.kal-termin.termin-schulung { background: var(--tone-violet-bg); color: var(--tone-violet-fg); border-left-color: var(--tone-violet-solid); }
.kal-chip.kal-termin.termin-wartung { background: var(--tone-red-bg); color: var(--tone-red-fg); border-left-color: var(--tone-red-solid); }
.kal-swatch.termin { background: var(--tone-amber-bg); border-left: 3px solid var(--tone-amber-solid); }
@media (max-width: 760px) {
  .kal-raster { gap: 2px; } .kal-tag { min-height: 58px; padding: 3px; border-radius: 6px; }
  .kal-chip { font-size: 0.6rem; padding: 0 4px; } .kal-chip b + * { display: none; } .kal-ft-name { display: none; }
}

/* Rollen-Vorschau (2026-09-29): Leiste oben + Eintrag im Kontomenü */
.ansicht-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 8px 12px;
  border-radius: 10px; background: var(--tone-violet-bg); color: var(--tone-violet-fg); border: 1px solid var(--tone-violet-solid); font-size: 0.88rem; }
.ansicht-leiste-text { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; }
.ansicht-leiste-hinweis { opacity: .85; }
.ansicht-leiste-form { margin: 0; display: inline-flex; }
.ansicht-leiste select { border: 1px solid var(--tone-violet-solid); border-radius: 8px; background: var(--surface); color: var(--text); padding: 3px 8px; font: inherit; font-size: 0.85rem; }
.ansicht-leiste-ende { background: var(--tone-violet-solid); color: var(--surface); border: 0; }
.ansicht-leiste-ende:hover { filter: brightness(1.08); }
.sidebar-menu-ansicht { display: grid; gap: 6px; padding: 6px 12px 8px; margin: 0; }
.sidebar-menu-ansicht label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
.sidebar-menu-ansicht select { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 5px 8px; font: inherit; font-size: 0.85rem; }

/* Azubi-Bereich (6.0-Vorschau, 2026-09-29) */
.az-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 2px 16px; }
.az-kopf-titel { display: flex; align-items: center; gap: 14px; }
.az-vorschau { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--tone-violet-bg); color: var(--tone-violet-fg); font-size: 0.62rem; letter-spacing: .02em; text-transform: none; }
.az-reiter { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.az-reiter a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
.az-reiter a:hover { color: var(--text); background: var(--surface-2); }
.az-reiter a[aria-current="page"] { background: var(--akzent-soft); color: var(--akzent-ink); font-weight: 600; }
.az-raster { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .az-raster { grid-template-columns: 1fr; } }
.az-seite { display: grid; gap: 16px; min-width: 0; }
.az-termin-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.az-termin-zeile > .az-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-termin-zeile > .text-muted { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-datum { flex: none; }
.az-termin-zeile:last-of-type { border-bottom: 0; }
.az-datum { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--text-muted); min-width: 74px; }
.az-chip { max-width: 100%; }
.kal-chips .az-chip { display: block; }
.az-art-berufsschule { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); }
.az-art-sprechtag { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }
.az-art-termin { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.az-art-onboarding { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.az-art-offboarding { background: var(--tone-gray-bg); color: var(--tone-gray-fg); }
.az-art-schulung { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.az-art-pruefung { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.az-art-rotation { background: var(--tone-teal-bg); color: var(--tone-teal-fg); }
.kal-swatch.az-art-berufsschule, .kal-swatch.az-art-sprechtag, .kal-swatch.az-art-termin, .kal-swatch.az-art-onboarding,
.kal-swatch.az-art-offboarding, .kal-swatch.az-art-schulung, .kal-swatch.az-art-pruefung, .kal-swatch.az-art-rotation { border-color: transparent; }
.az-kal .kal-tag { min-height: 96px; }
.az-kal-filter { display: inline-flex; gap: 6px; margin: 0; }
.az-kal-filter .form-select { width: auto; min-width: 150px; }
.az-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.az-form-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .az-form-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .az-form-2, .az-form-4 { grid-template-columns: 1fr; } }
.az-station-neu { border-top: 1px solid var(--border); }
.az-fahrt { color: var(--text-muted); text-decoration: none; }
.az-fahrt:hover { color: var(--akzent-ink); text-decoration: underline; }
.az-pflicht { background: var(--tone-amber-bg); color: var(--tone-amber-fg); font-size: 0.68rem; }
.az-rot { color: var(--tone-red-fg); font-weight: 600; }
.az-status-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.az-status { width: auto; min-width: 110px; padding-top: 3px; padding-bottom: 3px; font-size: 0.82rem; }
.az-datum-feld { width: 140px; padding-top: 3px; padding-bottom: 3px; font-size: 0.82rem; }
.az-status-offen, .form-select.az-status-offen { background: var(--surface-2); color: var(--text-muted); }
.az-status-geplant, .form-select.az-status-geplant { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.az-status-erledigt, .form-select.az-status-erledigt { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.az-status-nachweis, .form-select.az-status-nachweis { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }
.az-status-entfaellt, .form-select.az-status-entfaellt { background: var(--tone-gray-bg); color: var(--tone-gray-fg); }
.az-matrix th { vertical-align: bottom; white-space: normal; min-width: 130px; }
.az-matrix td form { margin: 0; }
.az-unter { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 8px; }
.az-abt-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.az-standorte, .az-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.9rem; }
.az-vorschlaege { flex-direction: column; max-height: 280px; overflow-y: auto; }
.az-vorschlaege label, .az-standorte label { display: inline-flex; align-items: center; gap: 6px; }
.az-inline-edit { display: inline-block; text-align: left; }
.az-inline-edit[open] > .az-abt-form { position: absolute; right: 16px; z-index: 20; width: min(520px, 90vw); margin-top: 4px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.az-inline-edit > summary { list-style: none; }
.az-zeitleiste { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.8rem; }
.az-zeitleiste th, .az-zeitleiste td { border-bottom: 1px solid var(--border); padding: 6px 2px; text-align: center; min-width: 54px; }
.az-zeitleiste th { color: var(--text-muted); font-weight: 600; }
.az-zeitleiste th small { display: block; font-weight: 400; opacity: .7; }
.az-zeitleiste .az-zl-name { text-align: left; min-width: 180px; padding-left: 16px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.az-zeitleiste .heute { background: var(--akzent-soft); }
.az-zl-block { display: block; margin: 0 1px; padding: 3px 4px; border-radius: 6px; background: var(--tone-teal-bg); color: var(--tone-teal-fg);
  font-size: 0.7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.az-zl-block.fern { box-shadow: inset 0 0 0 1.5px var(--tone-violet-solid); }
.az-hinweis { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.85rem; background: var(--tone-amber-bg); color: var(--tone-amber-fg); border-bottom: 1px solid var(--border); }
.az-tabelle .ma-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; background: var(--akzent-soft); color: var(--akzent-ink); }
.az-tabelle .ma-zeile { cursor: pointer; }
.az-tabelle .ma-zeile:hover td { background: var(--glass-soft); }
/* Azubi-Bereich 2 (2026-09-30): Standortgruppen, Abteilungs-Checkliste, Dokumente, Einstellungen */
.az-standort-kopf { display: flex; align-items: center; gap: 6px; padding: 12px 16px 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--akzent-ink); border-top: 1px solid var(--border); }
.az-standort-kopf:first-child { border-top: 0; }
.az-standort-kopf span { font-weight: 600; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.az-tabelle { table-layout: fixed; margin-bottom: 4px; }
.az-check-body { border-bottom: 1px solid var(--border); }
.az-check-kopf { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.az-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.az-check-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 0.85rem; min-width: 0; }
.az-check-haken { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex: none; background: var(--surface-2); color: var(--text-muted); }
.az-check-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.az-check-info { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.az-stand-absolviert { background: var(--akzent-soft); border-color: transparent; }
.az-stand-absolviert .az-check-haken { background: var(--akzent-dark); color: var(--surface); }
.az-stand-aktuell { border-color: var(--akzent-marke); }
.az-stand-aktuell .az-check-haken { background: var(--akzent-marke); color: var(--surface); }
.az-stand-geplant .az-check-haken { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.az-stand-offen { opacity: .8; }
.az-haken { color: var(--akzent-ink); font-weight: 700; }
tr.az-vergangen td { color: var(--text-muted); }
.az-bis-monate { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.az-dok-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
@media (max-width: 760px) { .az-dok-form { grid-template-columns: 1fr; } }
.az-sprung { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 2px 14px; }
.az-sprung a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.az-sprung a:hover { color: var(--akzent-ink); border-color: var(--akzent-marke); }
.az-alle { display: inline-flex; gap: 6px; align-items: center; font-size: 0.85rem; margin-bottom: 6px; }
/* Azubi-Übersicht (2026-09-30): Standorte als Karten nebeneinander */
.az-links { min-width: 0; display: grid; gap: 12px; }
.az-links-kopf { display: flex; align-items: center; justify-content: space-between; margin: 0 2px; }
.az-hinweis-rund { border-radius: 10px; border: 0; }
/* Alle Standorte in einer Reihe (2026-09-30): so viele Spalten wie Standorte; wird es zu eng, scrollt die Reihe waagerecht */
.az-standorte-raster { display: grid; grid-template-columns: repeat(var(--az-spalten, 3), minmax(200px, 1fr)); gap: 12px; align-items: start;
  overflow-x: auto; padding-bottom: 4px; }
.az-standorte-raster > .card { min-width: 0; }
.az-standort-karte .card-header { padding: 10px 12px; }
.az-zahl { font-size: 0.78rem; font-weight: 700; color: var(--akzent-ink); background: var(--akzent-soft); border-radius: 999px; padding: 1px 9px; }
.az-personen { display: grid; }
.az-person { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; }
.az-person:first-child { border-top: 0; }
.az-person:hover { background: var(--glass-soft); }
.az-person .ma-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; background: var(--akzent-soft); color: var(--akzent-ink); margin-top: 2px; }
.az-person-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.az-person-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.az-person-name .az-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-person-name .az-lj { flex: none; margin-left: 0; }
.az-person-beruf, .az-person-station { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-person-station { display: flex; align-items: center; gap: 4px; }
.az-person-station strong { color: var(--text); font-weight: 600; }
.az-lj { font-size: 0.7rem; font-weight: 600; color: var(--akzent-ink); background: var(--akzent-soft); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.az-warn { color: var(--tone-amber-fg); font-weight: 600; }
.az-offen { flex: none; min-width: 22px; height: 22px; border-radius: 999px; background: var(--tone-amber-bg); color: var(--tone-amber-fg); font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; margin-top: 4px; }
/* Berichtsheft (2026-09-30) */
.az-bh-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 2px 12px; }
.az-bh-zahlen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.az-bh-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.az-bh-eingereicht { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.az-bh-abgezeichnet { background: var(--akzent-soft); color: var(--akzent-ink); }
.az-bh-zurueck { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.az-bh-fehlt { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.az-bh-entwurf { background: var(--surface-2); color: var(--text-muted); }
.az-bh-zeile-fehlt td:first-child { box-shadow: inset 3px 0 0 var(--tone-amber-solid); }
.az-bh-toolbar .toolbar-titel { margin: 0 6px; }
.az-bh-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .az-bh-raster { grid-template-columns: 1fr; } }
.az-bh-blattkopf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.az-bh-blattkopf .detail-label, .az-bh-lesen .detail-label { display: block; margin-bottom: 2px; }
.az-bh-label { margin-top: 14px; }
.az-bh-text { font-family: inherit; line-height: 1.5; resize: vertical; }
.az-bh-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.az-bh-lesen { display: grid; gap: 14px; }
.az-bh-inhalt { white-space: pre-wrap; line-height: 1.5; }
.az-bh-kommentar { margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 0.88rem; display: flex; gap: 6px; align-items: baseline; }
.az-bh-kommentar-zurueck { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.az-bh-kommentar-ok { background: var(--akzent-soft); color: var(--akzent-ink); }
.az-bh-unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.az-bh-unterschriften > div { border-top: 1px solid var(--border-strong); padding-top: 6px; font-size: 0.82rem; color: var(--text-muted); min-height: 36px; }
.az-bh-unterschriften span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; }
@media print {
  .hr-seitenleiste, .hr-mobilkopf, .hr-leiste-schleier, .az-kopf, .az-bh-toolbar, .az-bh-seite, .az-bh-knoepfe, .hr-flash, .ansicht-leiste { display: none !important; }
  .hr-rahmen { display: block !important; }
  .az-bh-raster { display: block; }
  .az-bh-blatt { border: 0; box-shadow: none; }
}
/* Rollen, Nachweise, Bewertungen (2026-09-30) */
.az-person-chip { background: var(--akzent-soft); color: var(--akzent-ink); margin: 0 4px 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.az-mehrfach { min-height: 120px; }
.az-nachweis-form { margin: 4px 0 0; }
.az-datei-knopf { cursor: pointer; padding-left: 0; }
.az-bew-link { display: inline-flex; gap: 3px; text-decoration: none; }
.az-bew-punkt { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.az-bew-punkt.da { background: var(--akzent-soft); color: var(--akzent-ink); }
.az-bew-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.az-noten { display: flex; gap: 6px; }
.az-noten label { cursor: pointer; }
.az-noten input { position: absolute; opacity: 0; pointer-events: none; }
.az-noten span { display: inline-flex; width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; font-weight: 700; border: 1px solid var(--border); }
.az-noten input:checked + span { background: var(--akzent-dark); color: var(--surface); border-color: transparent; }
.az-noten input:focus-visible + span { outline: 2px solid var(--akzent-marke); outline-offset: 2px; }
.az-note { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; font-weight: 700; background: var(--akzent-soft); color: var(--akzent-ink); }
.az-note-4, .az-note-5, .az-note-6 { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
/* Ansichtswechsler im Azubi-Bereich (2026-09-30) */
.az-ansicht-wahl { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px 4px 12px; border: 1px dashed var(--tone-violet-solid); border-radius: 10px; }
.az-ansicht-wahl label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--tone-violet-fg); font-weight: 600; }
.az-ansicht-wahl .form-select { width: auto; min-width: 220px; padding-top: 4px; padding-bottom: 4px; font-size: 0.85rem; }
.az-ansicht-leiste { margin-bottom: 12px; }

/* ── Reports (2026-10-01): nutzt die Bausteine der Statistikseiten (stat-card, balken-zeile, ausl-stapel, legende) ── */
.rp-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; align-items: start; }
.rp-raster > .card { margin: 0; min-width: 0; }
.rp-raster > .rp-breit { grid-column: 1 / -1; }
.rp-scroll { max-height: 360px; overflow: auto; }
.rp-breit .rp-scroll { max-height: 440px; }
.rp-tabelle th, .rp-tabelle td { white-space: nowrap; padding: 6px 10px; font-size: 0.82rem; }
.rp-tabelle .rp-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.rp-balken-kopf, .rp-balken-zelle { width: 22%; min-width: 90px; vertical-align: middle; }
.rp-suche { padding: 8px 14px 0; }
.rp-suche .form-control { max-width: 320px; }
/* Balkenzeilen in den Report-Karten: Wert rechts in Textfarbe, Zeile hebt sich beim Zeigen leicht ab */
.rp-balken .balken-zeile > span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.rp-balken .balken-zeile:hover { background: var(--surface-2); border-radius: 4px; }
.rp-balken .ausl-stapel i + i { margin-left: 2px; }
/* Sechs Kacheln: immer 3+3 (schmal 2er-Reihen), nie 5+1 — wie die 4+4 im Team-Board */
.stats-grid.rp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-grid.rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Diagrammblöcke zu zweit nebeneinander: so haben die gestapelten Balken Platz */
.rp-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .rp-spalten { grid-template-columns: minmax(0, 1fr); } }
.rp-filter { display: flex; align-items: center; gap: 8px; }
.rp-filter .form-control { width: auto; min-width: 170px; }
@media (max-width: 1000px) { .rp-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .rp-balken-kopf, .rp-balken-zelle { display: none; } }
/* Lizenz-Organigramm (2026-10-01): aufklappbare Ebenen Vorgesetzter → Abteilung → Mitarbeiter, je Zeile Kennzahlen,
   Anteilsbalken und ein kleiner 12-Monats-Verlauf. Nutzt details/summary wie die Gebäude-Struktur. */
.lz-baum { font-size: 0.86rem; }
.lz-baum details { border-top: 1px solid var(--border); }
.lz-baum details > details, .lz-baum details > .lz-blatt { margin-left: 22px; }
.lz-baum summary { list-style: none; cursor: pointer; }
.lz-baum summary::-webkit-details-marker { display: none; }
.lz-zeile { display: grid; grid-template-columns: 14px minmax(140px, 1fr) 54px 54px 84px minmax(70px, 120px) 64px; gap: 10px; align-items: center; padding: 7px 4px; }
.lz-zeile:hover { background: var(--surface-2); border-radius: 6px; }
.lz-zeile .lz-pfeil { color: var(--text-muted); font-size: 0.7rem; transition: transform .15s ease; }
details[open] > summary .lz-pfeil { transform: rotate(90deg); }
.lz-zeile .lz-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lz-zeile .lz-name small { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.lz-zeile .lz-zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.lz-zeile .lz-kosten { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lz-zeile .lz-anteil { height: 6px; background: var(--bechtle-bg); border-radius: 3px; overflow: hidden; }
.lz-zeile .lz-anteil > i { display: block; height: 100%; background: var(--akzent-marke); border-radius: 3px; }
.lz-spark { display: flex; align-items: flex-end; gap: 1px; height: 18px; }
.lz-spark i { flex: 1; min-height: 1px; background: var(--tone-blue-solid); opacity: .55; border-radius: 1px 1px 0 0; }
.lz-spark i.aktuell { opacity: 1; }
.lz-kopf { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.lz-kopf:hover { background: none; }
.lz-blatt .lz-zeile { padding: 5px 4px; }
.lz-blatt .lz-name { font-weight: 500; }
.lz-blatt.weg .lz-name { color: var(--tone-red-fg); }
.lz-lizenzen { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 4px; }
.lz-lizenzen .badge { font-weight: 500; }
.lz-ebene-1 > summary .lz-zeile { background: var(--surface-2); border-radius: 6px; }
.lz-ebene-1 > summary .lz-name { font-size: 0.92rem; }
.lz-suche { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.lz-suche .form-control { max-width: 260px; }
.lz-baum .versteckt { display: none; }
/* Monatsverlauf als Säulen (wie der Wochenverlauf der Ticket-Statistik) */
.lz-monate { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 150px; padding-top: 18px; }
.lz-monat { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; text-decoration: none; color: inherit; }
.lz-monat .lz-saeule { position: relative; width: 60%; max-width: 34px; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--akzent-marke); opacity: .6; }
.lz-monat.aktuell .lz-saeule { opacity: 1; }
.lz-monat .lz-saeule > b { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font-size: 0.66rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; padding-bottom: 2px; }
.lz-monat .lz-label { font-size: 0.7rem; color: var(--bechtle-text-light); white-space: nowrap; }
.lz-monat.aktuell .lz-label { color: var(--text); font-weight: 700; }
.lz-monat:hover .lz-saeule { opacity: 1; }
@media (max-width: 760px) { .lz-zeile { grid-template-columns: 14px minmax(100px, 1fr) 84px; } .lz-zeile .lz-zahl, .lz-zeile .lz-anteil, .lz-spark { display: none; } }
/* Lizenzen nach Organisation × Monate (2026-10-02): Baum-Tabelle mit fester erster Spalte */
.org-scroll { max-height: calc(100vh - 320px); overflow: auto; }
.org-tabelle th, .org-tabelle td { white-space: nowrap; padding: 6px 8px; font-size: 0.82rem; }
.org-tabelle thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.org-tabelle .org-name { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 280px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.org-tabelle thead .org-name { z-index: 3; background: var(--surface-2); }
.org-tabelle .org-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.org-tabelle .org-gesamt { border-left: 1px solid var(--border); font-weight: 600; }
.org-tabelle .org-zukunft { color: var(--text-light); }
.org-tabelle .org-zuordnen { display: block; margin: 4px 0 2px 24px; }
.org-tabelle td.org-zukunft { font-style: italic; }
.org-tabelle .org-delta { font-size: .76rem; border-left: 1px solid var(--border); }
.org-tabelle .org-delta + .org-delta { border-left: 0; }
.org-tabelle .org-plus { color: var(--tone-red-fg); }
.org-tabelle .org-minus { color: var(--tone-green-fg); }
.org-tabelle .org-prognose { color: var(--text-muted); border-left: 1px solid var(--border); }
.org-tabelle .org-prognose + .org-prognose { border-left: 0; }
.org-tabelle tr.org-lizenz td { font-size: .76rem; color: var(--text-muted); }
.org-tabelle .org-lizenz-name { display: inline-flex; gap: 4px; align-items: center; }
.org-tabelle .org-dl { display: inline-flex; gap: 4px; margin-left: 6px; visibility: hidden; }
.org-tabelle tr:hover .org-dl, .org-tabelle tr:focus-within .org-dl { visibility: visible; }
.org-tabelle .org-dl a { font-size: .68rem; font-weight: 600; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; }
.org-tabelle .org-dl a:hover { color: var(--text); background: var(--surface-2); }
.org-export { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.org-export .form-control { height: 30px; font-size: .82rem; width: auto; min-width: 220px; }
.orgs-ebenen { display: flex; flex-direction: column; gap: 6px; }
.orgs-ebene { display: grid; grid-template-columns: 48px minmax(120px, 200px) minmax(120px, 200px) 1fr; gap: 8px; align-items: center; }
.orgs-ebene .form-control { height: 30px; font-size: .86rem; }
.orgs-ebene-kopf { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.orgs-ebene-nr { font-weight: 600; text-align: center; }
.orgs-ebene small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgs-ebene-name { font-size: .72rem; white-space: nowrap; }
@media (max-width: 600px) { .orgs-ebene { grid-template-columns: 32px 1fr 1fr; } .orgs-ebene small { grid-column: 2 / -1; } .orgs-ebene-kopf span:last-child { display: none; } }
.rp-vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.rp-vergleich-karte { padding: 14px 18px; }
.rp-vergleich-titel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tone-green-fg); }
.rp-vergleich-titel .text-muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.rp-vergleich-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0; }
.rp-vergleich-badge { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--tone-gray-bg, var(--surface-2)); color: var(--text-muted); }
.rp-vergleich-badge.rauf { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.rp-vergleich-badge.runter { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.org-export-optionen { flex-basis: 100%; }
.org-export-optionen > summary { list-style: none; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.org-export-optionen > summary::-webkit-details-marker { display: none; }
.org-export-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.org-export-panel fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.org-export-panel legend { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; padding: 0; }
.org-export-panel label { font-size: .84rem; display: flex; gap: 8px; align-items: baseline; color: var(--text); }
.org-export-panel label.org-export-bis { align-items: center; flex-wrap: wrap; }
.org-export-panel .org-export-bis .form-control { min-width: 160px; }
@media (max-width: 600px) { .org-export .form-control { min-width: 0; width: 100%; } }
.org-export-titel { font-size: .82rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
@media (hover: none) { .org-tabelle .org-dl { visibility: visible; } }
.org-tabelle .org-zuordnen select { width: 220px; height: 26px; padding: 0 8px; font-size: .76rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }
.org-tabelle tr.org-summe td { background: var(--surface-2); border-bottom: 2px solid var(--border); }
.org-tabelle tr.org-einheit[data-ebene="0"] td { font-size: 0.86rem; }
.org-tabelle tr.org-mitarbeiter td { color: var(--text-muted); }
.org-tabelle tr.org-mitarbeiter .org-name a { color: var(--text); text-decoration: none; }
.org-tabelle tr.org-mitarbeiter.weg .org-name a { color: var(--tone-red-fg); }
.org-tabelle tr.org-rest td.org-name strong { color: var(--tone-amber-fg); }
.org-tabelle tr.org-zeile:hover td { background: var(--surface-2); }
.org-einzug { display: inline-block; width: calc(var(--ebene, 0) * 18px); }
.org-pfeil { display: inline-block; width: 18px; border: 0; background: none; padding: 0; margin-right: 4px; color: var(--text-muted); font-size: 0.7rem; cursor: pointer; vertical-align: middle; }
.org-pfeil.leer { cursor: default; }
/* Einstellungen → Organisation */
.orgs-liste .orgs-zeile { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 8px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.orgs-liste .orgs-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.orgs-liste .orgs-einzug { display: inline-block; width: calc(var(--ebene, 0) * 20px); flex-shrink: 0; }
.orgs-liste .orgs-aktionen { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.orgs-liste .orgs-aktionen form { margin: 0; display: inline-flex; gap: 4px; align-items: center; }
.orgs-liste .orgs-aktionen .form-control { height: 28px; padding: 0 8px; font-size: 0.8rem; }
.orgs-liste details.orgs-mehr { grid-column: 1 / -1; }
.orgs-liste details.orgs-mehr > summary { font-size: 0.8rem; color: var(--text-muted); cursor: pointer; padding-left: calc(var(--ebene, 0) * 20px + 26px); }
.orgs-liste details.orgs-mehr .form-control[multiple] { min-height: 120px; }

/* DHL-Sendungsstatus (5.67.0): Versand-Logbuch, Kartei, Remote-Übergaben */
.sendung-delivered { color: var(--tone-green-fg); }
.sendung-failure { color: var(--tone-red-fg); font-weight: 500; }

/* Export-Menü (HR-Reports und Mitarbeiterliste, 5.71.0): <details> mit Liste, ohne Skript bedienbar */
.export-menue { position: relative; }
.export-menue summary { list-style: none; cursor: pointer; }
.export-menue summary::-webkit-details-marker { display: none; }
.export-menue .panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg, var(--shadow-sm)); }
.export-menue .panel a { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border-radius: 8px; color: var(--text); text-decoration: none; text-align: left; }
.export-menue .panel a:hover { background: var(--surface-2); }
.export-menue .panel small { display: block; color: var(--text-muted); font-size: .75rem; }
.export-menue .panel hr { border: 0; border-top: 1px solid var(--border); margin: .3rem .2rem; }

/* Azubiportal (2026-10-21): Startseite der Azubi-Sicht, Dokumente, Tab-Leiste am Handy */
.az-start-kopf { background: var(--hr-grad-hero, linear-gradient(135deg, var(--akzent-dark), var(--akzent))); color: #fff; border-radius: 16px; padding: 22px 24px; margin: 0 0 16px; }
.az-start-hallo { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.az-start-sub { margin: 4px 0 0; font-size: 0.95rem; opacity: .9; }
.az-start-sub:empty { display: none; }
.az-start-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.az-start-raster > .card { min-width: 0; }
.az-start-zeitraum { font-size: 1.25rem; font-weight: 700; }
.az-start-fakten { margin: 12px 0 0; display: grid; gap: 4px; }
.az-start-fakten > div { display: flex; gap: 10px; font-size: 0.9rem; }
.az-start-fakten dt { flex: none; width: 74px; color: var(--text-muted); }
.az-start-fakten dd { margin: 0; min-width: 0; }
.az-start-knopf { display: flex; justify-content: center; margin-top: 16px; width: 100%; }
.az-start-zahl { font-size: 1rem; margin-bottom: 8px; }
.az-start-zahl strong { font-size: 1.4rem; }
.az-balken { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.az-balken > span { display: block; height: 100%; border-radius: 999px; background: var(--akzent-marke, var(--akzent)); }
.az-start-zurueck { border-color: var(--tone-red-solid); background: var(--tone-red-bg); }
.az-start-zurueck .card-header { border-bottom-color: transparent; }
.az-start-zurueck .card-title, .az-start-zurueck .az-start-zitat { color: var(--tone-red-fg); }
.az-start-zitat { margin: 0 0 6px; white-space: pre-wrap; line-height: 1.5; }
.az-start-von { margin: 0 0 12px; color: var(--text-muted); }
.az-start-dok, .az-dok-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; }
.az-start-dok:last-child { border-bottom: 0; }
.az-start-dok:hover .az-start-dok-titel, .az-dok-zeile:hover .az-dok-name { color: var(--akzent-ink); text-decoration: underline; }
.az-start-dok-titel, .az-dok-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.az-dok-zeile { padding: 8px 16px; flex-wrap: wrap; }
.az-dok-zeile:last-child { border-bottom: 0; }
.az-start-station { display: grid; gap: 1px; padding: 6px 0; }
.az-start-station + .az-start-station { border-top: 1px solid var(--border); }
.az-tabbar { display: none; }
@media (max-width: 900px) { .az-start-raster { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .az-start-kopf { padding: 18px 18px; border-radius: 14px; }
  .az-start-hallo { font-size: 1.4rem; }
  .az-tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0, 0, 0, .08); padding-bottom: env(safe-area-inset-bottom); }
  .az-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 2px;
    color: var(--text-muted); text-decoration: none; font-size: 0.72rem; font-weight: 600; }
  .az-tabbar a svg { display: block; }
  .az-tabbar a[aria-current="page"] { color: var(--akzent-ink); }
  .az-tabbar a:focus-visible { outline: 2px solid var(--akzent-marke); outline-offset: -3px; }
  body:has(.az-tabbar) .hr-page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media print { .az-tabbar { display: none !important; } }
.az-dok-sichtbar { grid-column: 1 / -1; }
.az-dok-sichtbar label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; min-height: 32px; cursor: pointer; }
.az-dok-sichtbar .form-text { margin: 0; }
/* Azubiportal: Nachweise hochladen, prüfen, einreichen (5.88.0) */
.az-span2 { grid-column: span 2; }
@media (max-width: 560px) { .az-span2 { grid-column: auto; } }
.az-nachweis-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.az-nachweis-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.az-nachweis-knoepfe .btn, .az-nachweis-neu .btn { min-height: 44px; }
.az-dok-text { display: grid; gap: 2px; min-width: 0; }
.az-dok-rechts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.az-dok-zeile a.az-dok-name { color: inherit; text-decoration: none; }
.az-dok-zeile a.az-dok-name:hover { color: var(--akzent-ink); text-decoration: underline; }