/**
 * SHK-Förder-Wizard — Design-System v2 (2026-Standard).
 *
 * Recherche-basiert (Linear, shadcn v4, Vercel Geist, Radix Themes 3, Attio):
 *  - data-slot Pattern für ALLE Komponenten (statt .btn-Klassen)
 *  - 36px Standard-Höhe (h-9)
 *  - 6px Border-Radius (Linear) bzw 8px (shadcn) — wir nehmen 8px
 *  - Cards: nur 1px Border, kein Shadow im Ruhezustand
 *  - Focus-visible: outline 2px + outline-offset 2px (WCAG 2.2 AA)
 *  - Hover: nur Color-Shift, KEIN translate
 *  - OKLCH-Farben (perceptual uniform)
 *  - 4px Spacing-Grid
 *  - Backward-Compat: .btn-Klassen sind Aliase
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

/* ============================================================
   1. TOKENS (OKLCH-Farben, Spacing, Typo)
   ============================================================ */
:root {
  /* Brand — Kupfer (warmer Akzent) in OKLCH */
  --brand-50:  oklch(0.97 0.024 50);
  --brand-100: oklch(0.93 0.055 50);
  --brand-200: oklch(0.86 0.103 48);
  --brand-300: oklch(0.78 0.144 45);
  --brand-400: oklch(0.71 0.176 41);
  --brand-500: oklch(0.66 0.204 38);
  --brand-600: oklch(0.60 0.213 36);
  --brand-700: oklch(0.55 0.198 34);   /* primary */
  --brand-800: oklch(0.48 0.170 32);
  --brand-900: oklch(0.40 0.140 30);
  --brand-950: oklch(0.28 0.100 28);

  /* Neutrals — Slate (warm-getönt) */
  --slate-50:  oklch(0.985 0.005 248);
  --slate-100: oklch(0.96 0.007 248);
  --slate-200: oklch(0.92 0.011 248);
  --slate-300: oklch(0.86 0.014 248);
  --slate-400: oklch(0.71 0.020 248);
  --slate-500: oklch(0.55 0.024 248);
  --slate-600: oklch(0.44 0.025 248);
  --slate-700: oklch(0.36 0.025 248);
  --slate-800: oklch(0.27 0.024 248);
  --slate-900: oklch(0.20 0.024 248);
  --slate-950: oklch(0.13 0.024 248);

  /* Semantic */
  --success:    oklch(0.55 0.155 145);
  --success-bg: oklch(0.94 0.040 145);
  --warning:    oklch(0.65 0.155 75);
  --warning-bg: oklch(0.95 0.040 90);
  --error:      oklch(0.55 0.180 25);
  --error-bg:   oklch(0.94 0.040 25);
  --info:       oklch(0.55 0.155 250);
  --info-bg:    oklch(0.94 0.040 250);

  /* Surface-Mapping (semantisch) */
  --background:    white;
  --foreground:    var(--slate-900);
  --muted:         var(--slate-100);
  --muted-fg:      var(--slate-500);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --accent:        var(--brand-50);
  --accent-fg:     var(--brand-900);
  --primary:       var(--brand-700);
  --primary-fg:    white;
  --canvas:        var(--slate-50);

  /* Spacing (4px-Grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  /* Sizing */
  --h-7: 28px;  /* sm */
  --h-8: 32px;
  --h-9: 36px;  /* DEFAULT — Linear/shadcn 2026 */
  --h-10: 40px; /* lg */

  /* Radius */
  --radius-sm: 4px;
  --radius:    8px;  /* DEFAULT (shadcn) */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 56px;

  /* Shadows — KEIN dicker Shadow auf Cards. Nur für Overlays/Modals. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow:    0 4px 14px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.10), 0 4px 12px -4px rgb(0 0 0 / 0.06);
  --shadow-xl: 0 24px 60px -12px rgb(0 0 0 / 0.18), 0 8px 24px -8px rgb(0 0 0 / 0.10);

  /* Typography */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration:      180ms;
  --duration-slow: 240ms;
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--foreground);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { font-feature-settings: 'cv11', 'ss01', 'ss02', 'tnum' 0; }

[x-cloak] { display: none !important; }

/* Focus-Visible (WCAG 2.2 AA — outline-offset Pattern) */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Headlines — Display-Letter-Spacing */
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; margin: 0 0 var(--space-2); color: var(--slate-900); }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; margin: 0 0 var(--space-2); color: var(--slate-900); }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.3; margin: 0 0 var(--space-2); color: var(--slate-900); }
h4 { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0 0 var(--space-2); color: var(--slate-900); }
p  { margin: 0; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); text-decoration: underline; }
a:focus-visible { text-decoration: none; }

code, kbd, .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

/* ============================================================
   3. APP-SHELL (Sidebar + Topbar + Content)
   ============================================================ */
/* Sidebar ist position:fixed (out-of-flow) → app-shell ist kein Grid mehr.
   Bug-Fix: vorher hatte app-shell grid-template-columns 240px 1fr UND app-main margin-left → doppelt 480px Abstand. */
.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: white;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 30;
  overflow: hidden;
}

.app-main {
  /* Sidebar ist 240px breit + fixed positioniert → app-main einfach um sidebar-w nach rechts */
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column; min-height: 100vh;
}
@media (max-width: 900px) {
  /* Auf Mobile: sidebar slidet als overlay rein, app-main hat keine margin */
  .app-main { margin-left: 0; }
}

.app-topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  background: rgb(255 255 255 / 0.80);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-6);
}

.app-content { padding: var(--space-6) var(--space-8); width: 100%; max-width: none; }
@media (max-width: 1280px) { .app-content { padding: var(--space-5) var(--space-6); } }
@media (max-width: 900px)  { .app-content { padding: var(--space-4); } }
body[data-page="profil"] .app-content > *,
body[data-page="help"] .app-content > * { max-width: 960px; }

/* Sidebar Brand */
.sidebar-brand {
  padding: 14px 14px 10px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.014em;
  color: var(--slate-900);
  text-decoration: none;
}
.sidebar-brand:hover { color: var(--slate-900); text-decoration: none; }
.sidebar-brand-mark {
  width: 26px; height: 26px;
  background: var(--brand-700);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px;
  letter-spacing: 0;
}

.sidebar-nav { padding: 6px 8px; flex: 1; overflow-y: auto; }
.sidebar-section {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--slate-500);
  padding: 14px 10px 6px;
}

.sidebar-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; margin: 1px 0;
  border-radius: 6px;
  color: var(--slate-700);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast);
}
.sidebar-item:hover { background: var(--slate-100); color: var(--slate-900); text-decoration: none; }
.sidebar-item.active,
.sidebar-item[aria-current="page"] {
  background: var(--brand-50);
  color: var(--brand-900);
  font-weight: 600;
}
.sidebar-item.active::before,
.sidebar-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -8px; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--brand-700);
  border-radius: 0 3px 3px 0;
}
.sidebar-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--slate-500); }
.sidebar-item:hover .sidebar-icon { color: var(--slate-700); }
.sidebar-item.active .sidebar-icon { color: var(--brand-700); }

.sidebar-chev {
  font-size: 10px;
  padding: 3px 6px; margin: -3px -6px -3px 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--slate-400);
  border-radius: 4px;
  transition: background var(--duration-fast), color var(--duration-fast),
              transform var(--duration) var(--ease-out);
  font-family: inherit;
}
.sidebar-chev:hover { background: var(--slate-100); color: var(--slate-700); }
.sidebar-chev.open { transform: rotate(90deg); color: var(--brand-700); }

.sidebar-sub {
  max-height: 0;
  overflow: hidden;
  margin: 0 0 4px 22px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  transition: max-height var(--duration-slow) var(--ease-out);
}
.sidebar-sub.open { max-height: 600px; }

.sidebar-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; margin: 1px 0;
  border-radius: 6px;
  color: var(--slate-600);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.sidebar-sub-item:hover { background: var(--slate-100); color: var(--slate-900); text-decoration: none; }
.sidebar-sub-item.active,
.sidebar-sub-item[aria-current="page"] {
  background: var(--brand-50);
  color: var(--brand-900);
  font-weight: 600;
}

.sidebar-footer {
  padding: var(--space-3); border-top: 1px solid var(--border);
  font-size: 12px;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px; border-radius: 6px;
}
.sidebar-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-700); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px;
}
.sidebar-user-name { font-weight: 600; color: var(--slate-900); font-size: 12px; }
.sidebar-user-sub  { color: var(--slate-500); font-size: 11px; }

/* Topbar */
.topbar-title {
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.011em;
  color: var(--slate-900);
}
.topbar-spacer { flex: 1; }

.topbar-action,
.topbar-icon-btn,
.topbar-search {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--slate-700);
  font-size: 12.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.topbar-action:hover,
.topbar-icon-btn:hover,
.topbar-search:hover {
  background: var(--slate-50);
  border-color: var(--border-strong);
  color: var(--slate-900);
}
.topbar-icon-btn { width: 34px; padding: 0; justify-content: center; }

.topbar-kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 1px 5px;
  background: var(--slate-100);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--slate-500);
}

.topbar-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--brand-700); color: white;
  border: 2px solid white;
  border-radius: 99px;
  font-size: 9.5px; font-weight: 700;
  line-height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-bell { position: relative; }
.topbar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-700);
  color: white;
  font-weight: 600; font-size: 12px;
  border: 0; cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast);
}
.topbar-avatar:hover { background: var(--brand-800); }
.topbar-user { position: relative; }

/* Topbar-Dropdown */
.topbar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  max-height: 0;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transform-origin: top right;
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out),
              max-height var(--duration-slow);
  z-index: 50;
}
.topbar-menu.open {
  opacity: 1; pointer-events: auto;
  transform: scale(1);
  max-height: 70vh;
  overflow-y: auto;
}
.topbar-menu-user { min-width: 220px; }
.topbar-menu-head {
  padding: 10px 14px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--slate-500);
  border-bottom: 1px solid var(--border);
}
.topbar-menu-user-head { text-transform: none; letter-spacing: 0; }
.topbar-menu-item {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--slate-700);
  text-decoration: none;
  cursor: pointer;
  border: 0; background: transparent;
  width: 100%; text-align: left;
  font-family: inherit;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.topbar-menu-item:hover { background: var(--slate-50); color: var(--slate-900); text-decoration: none; }
.topbar-menu-item.unread { background: var(--brand-50); }
.topbar-menu-item.unread:hover { background: var(--brand-100); }
.topbar-menu-item-title { font-weight: 600; color: var(--slate-900); font-size: 13px; margin-bottom: 2px; }
.topbar-menu-item-body  { font-size: 12px; color: var(--slate-600); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-menu-item-time  { font-size: 10.5px; color: var(--slate-400); margin-top: 4px; }
.topbar-menu-empty {
  padding: 20px 16px;
  text-align: center; font-size: 13px;
  color: var(--slate-500);
}
.topbar-menu-foot {
  display: block;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--brand-700);
  text-align: center;
  text-decoration: none;
}
.topbar-menu-foot:hover { background: var(--slate-50); text-decoration: none; }
.topbar-menu-sep    { height: 1px; background: var(--border); margin: 4px 0; }
.topbar-menu-danger { color: var(--error); }
.topbar-menu-danger:hover { background: var(--error-bg); color: var(--error); }

/* Burger Mobile */
.mobile-only-burger {
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--slate-700);
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

/* ============================================================
   4. BUTTON — data-slot + .btn-Alias (Backward-Compat)
   ============================================================ */
[data-slot="button"],
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-9);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.005em;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast),
              color var(--duration-fast);
}
[data-slot="button"]:disabled,
.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* PRIMARY */
[data-slot="button"][data-variant="primary"],
.btn-primary {
  background: var(--brand-700); color: white;
}
[data-slot="button"][data-variant="primary"]:hover,
.btn-primary:hover { background: var(--brand-800); color: white; text-decoration: none; }
[data-slot="button"][data-variant="primary"]:active,
.btn-primary:active { background: var(--brand-900); }

/* SECONDARY */
[data-slot="button"][data-variant="secondary"],
.btn-secondary {
  background: white; color: var(--slate-800);
  border-color: var(--border);
}
[data-slot="button"][data-variant="secondary"]:hover,
.btn-secondary:hover { background: var(--slate-50); border-color: var(--border-strong); color: var(--slate-900); text-decoration: none; }

/* OUTLINE — wie secondary aber transparent BG */
[data-slot="button"][data-variant="outline"],
.btn-outline {
  background: transparent; color: var(--slate-800);
  border-color: var(--border-strong);
}
[data-slot="button"][data-variant="outline"]:hover,
.btn-outline:hover { background: var(--slate-50); color: var(--slate-900); text-decoration: none; }

/* GHOST */
[data-slot="button"][data-variant="ghost"],
.btn-ghost {
  background: transparent; color: var(--slate-700);
}
[data-slot="button"][data-variant="ghost"]:hover,
.btn-ghost:hover { background: var(--slate-100); color: var(--slate-900); text-decoration: none; }

/* DESTRUCTIVE */
[data-slot="button"][data-variant="destructive"],
.btn-danger,
.btn-destructive {
  background: var(--error); color: white;
}
[data-slot="button"][data-variant="destructive"]:hover,
.btn-danger:hover, .btn-destructive:hover { background: oklch(0.48 0.180 25); color: white; text-decoration: none; }

/* LINK */
[data-slot="button"][data-variant="link"],
.btn-link {
  background: transparent; color: var(--brand-700);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0; height: auto; border: 0;
}
.btn-link:hover { color: var(--brand-800); }

/* BACK-BUTTON (Zurück-Navigation) — Chevron + Text, Ghost-Style */
[data-slot="back"],
.btn-back {
  display: inline-flex; align-items: center; gap: 4px;
  height: var(--h-8);
  padding: 0 8px 0 6px;
  margin-bottom: var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--slate-600);
  font-size: 12.5px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast),
              border-color var(--duration-fast);
}
.btn-back:hover {
  background: var(--slate-100);
  border-color: var(--border);
  color: var(--slate-900);
  text-decoration: none;
}
.btn-back:active { background: var(--slate-200); }
.btn-back::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background-color: currentColor;
  /* Lucide chevron-left als Mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration) var(--ease-out);
}
.btn-back:hover::before { transform: translateX(-2px); }

/* SIZES */
[data-slot="button"][data-size="sm"], .btn-sm { height: var(--h-7); padding: 0 10px; font-size: 12px; gap: 4px; }
[data-slot="button"][data-size="lg"], .btn-lg { height: var(--h-10); padding: 0 18px; font-size: 14px; gap: 8px; }
[data-slot="button"][data-size="icon"], .btn-icon {
  width: var(--h-9); padding: 0; justify-content: center;
}
[data-slot="button"][data-size="icon"][data-variant="ghost"] { background: transparent; }

/* Loading-State */
[data-slot="button"][data-loading="true"],
.btn[data-loading="true"], .btn.loading { pointer-events: none; opacity: 0.7; }
.btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   5. INPUT / TEXTAREA / SELECT — data-slot + Klassen-Alias
   ============================================================ */
[data-slot="input"],
[data-slot="select"],
[data-slot="textarea"],
.input, .select, .textarea {
  display: flex; align-items: center;
  width: 100%;
  height: var(--h-9);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: white;
  font-family: inherit; font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--slate-900);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
[data-slot="textarea"],
.textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.5; }

[data-slot="input"]::placeholder,
.input::placeholder,
.textarea::placeholder { color: var(--slate-400); }

[data-slot="input"]:hover,
.input:hover { border-color: var(--slate-400); }

[data-slot="input"]:focus,
[data-slot="select"]:focus,
[data-slot="textarea"]:focus,
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--brand-600);
  outline-offset: -1px;
  border-color: var(--brand-600);
}

[data-slot="input"][aria-invalid="true"],
[data-slot="input"][data-invalid="true"] {
  border-color: var(--error);
  outline-color: var(--error);
}

[data-slot="input"]:disabled,
.input:disabled { background: var(--slate-50); color: var(--slate-400); cursor: not-allowed; }

/* Select-Arrow für native Selects */
select[data-slot="select"],
select.select,
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

/* Label */
[data-slot="label"], .label {
  display: block;
  font-size: 12.5px; font-weight: 500;
  color: var(--slate-700);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* Field-Group */
[data-slot="field"], .field { display: flex; flex-direction: column; gap: 6px; }
.field-help  { font-size: 11.5px; color: var(--slate-500); }
.field-error { font-size: 11.5px; color: var(--error); }

/* Checkbox + Radio — minimal Custom-Style */
input[type="checkbox"][data-slot="checkbox"],
input[type="radio"][data-slot="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--brand-700);
  cursor: pointer;
}

/* ============================================================
   6. CARD — nur Border, kein Shadow (Linear/Attio-Style)
   ============================================================ */
[data-slot="card"],
.card, .card-flat {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--duration) var(--ease-out);
}
.card-flat { padding: 0; overflow: hidden; }

[data-slot="card"][data-interactive="true"],
[data-slot="card"][data-interactive="true"]:has(a),
.card.clickable, .card[data-clickable] {
  cursor: pointer;
}
[data-slot="card"][data-interactive="true"]:hover,
.card.clickable:hover, .card[data-clickable]:hover {
  border-color: var(--border-strong);
}

.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-weight: 600; font-size: 13.5px; color: var(--slate-900); letter-spacing: -0.011em; }
.card-body  { padding: var(--space-5); }
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--space-2); justify-content: flex-end;
}

/* ============================================================
   7. STAT-CARD
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
[data-slot="stat"], .stat {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--duration) var(--ease-out);
}
.stat:hover { border-color: var(--border-strong); }
.stat-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--slate-500);
  letter-spacing: -0.005em;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--slate-900);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
  line-height: 1.2;
}
.stat-sub { font-size: 11.5px; color: var(--slate-500); margin-top: 4px; }

/* ============================================================
   8. TABLE — Sticky-Header, Brand-Hover, Selection
   ============================================================ */
[data-slot="table"],
.table,
.card table, .card-flat table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
[data-slot="table"] thead th,
.table thead th,
.card table thead th, .card-flat table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--slate-500);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--slate-50);
}
[data-slot="table"] tbody td,
.table tbody td,
.card table tbody td, .card-flat table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
[data-slot="table"] tbody tr,
.table tbody tr,
.card table tbody tr, .card-flat table tbody tr {
  transition: background var(--duration-fast);
}
[data-slot="table"] tbody tr:hover,
.table tbody tr:hover,
.card table tbody tr:hover, .card-flat table tbody tr:hover {
  background: var(--slate-50);
}
.table tbody tr:last-child td { border-bottom: 0; }
[data-slot="table"] tbody tr[data-selected="true"],
.table tbody tr.selected, .table tbody tr.clickable:hover {
  background: var(--brand-50);
}
[data-slot="table"] tbody tr[data-clickable="true"],
.table tbody tr.clickable { cursor: pointer; }

/* ============================================================
   9. PILLS / BADGES
   ============================================================ */
[data-slot="pill"], .pill, .badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.pill-neutral  { background: var(--slate-100); color: var(--slate-700); }
.pill-success  { background: var(--success-bg); color: var(--success); }
.pill-warning  { background: var(--warning-bg); color: var(--warning); }
.pill-error    { background: var(--error-bg); color: var(--error); }
.pill-info     { background: var(--info-bg); color: var(--info); }
.pill-brand    { background: var(--brand-50); color: var(--brand-900); }

/* Filter-Pill (klickbarer Toggle) */
[data-slot="filter-pill"],
.filter-pill,
.filter-pills > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
  background: white; color: var(--slate-700);
  cursor: pointer; font-family: inherit;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
  white-space: nowrap;
}
.filter-pill:hover,
.filter-pills > button:hover { background: var(--slate-50); border-color: var(--border-strong); color: var(--slate-900); }
[data-slot="filter-pill"][data-active="true"],
.filter-pill.active, .filter-pill[aria-pressed="true"],
.filter-pills > button.active {
  background: var(--brand-700); color: white; border-color: var(--brand-700);
}
.filter-pill .count {
  font-size: 10.5px;
  padding: 1px 6px;
  background: var(--slate-100); color: var(--slate-600);
  border-radius: var(--radius-full);
  font-weight: 600;
}
.filter-pill.active .count { background: rgb(255 255 255 / 0.20); color: white; }

/* ============================================================
   10. MODAL / DIALOG — Backdrop-Blur, Scale-In
   ============================================================ */
[data-slot="dialog-overlay"],
.modal-overlay {
  position: fixed; inset: 0;
  background: rgb(15 23 42 / 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
[data-slot="dialog-overlay"][data-open="true"],
.modal-overlay.open { opacity: 1; pointer-events: auto; }

[data-slot="dialog-content"],
.modal-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow);
}
[data-slot="dialog-overlay"][data-open="true"] [data-slot="dialog-content"],
.modal-overlay.open .modal-panel {
  transform: scale(1); opacity: 1;
}
.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.modal-title { font-weight: 600; font-size: 16px; color: var(--slate-900); letter-spacing: -0.014em; }
.modal-body  { padding: var(--space-5) var(--space-6); overflow-y: auto; }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--space-2); justify-content: flex-end;
}

/* ============================================================
   11. DRAWER (Slide-in von rechts)
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgb(15 23 42 / 0.40);
  z-index: 40;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 460px; max-width: 100vw;
  background: white;
  border-left: 1px solid var(--border);
  z-index: 50;
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
}
.drawer-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); }

/* ============================================================
   12. EMBED-CARD (Workflow + AI in Detail-Pages)
   ============================================================ */
[data-slot="embed"], .embed-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-700);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}
.embed-card-info { border-left-color: var(--info); }
.embed-card-warn { border-left-color: var(--warning); }
.embed-card-ai   { border-left-color: var(--brand-700); background: linear-gradient(180deg, var(--brand-50) 0%, white 80px); }

.embed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.embed-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--slate-500);
}
.embed-card-ai .embed-eyebrow { color: var(--brand-800); }
.embed-eyebrow-icon { width: 14px; height: 14px; color: var(--brand-700); }
.embed-title { font-weight: 600; font-size: 14px; color: var(--slate-900); letter-spacing: -0.011em; }
.embed-meta  { font-size: 12px; color: var(--slate-500); }

.embed-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.embed-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: white; color: var(--slate-700);
  font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.embed-btn:hover { background: var(--slate-50); border-color: var(--border-strong); color: var(--slate-900); text-decoration: none; }
.embed-btn.primary { background: var(--brand-700); color: white; border-color: var(--brand-700); }
.embed-btn.primary:hover { background: var(--brand-800); color: white; }
.embed-btn.ghost { border-color: transparent; color: var(--slate-500); }
.embed-btn.ghost:hover { background: var(--slate-100); color: var(--slate-800); border-color: transparent; }
.embed-btn-icon { width: 14px; height: 14px; }
.embed-btn-badge {
  font-size: 9.5px; font-weight: 700;
  padding: 1px 6px;
  background: var(--brand-50); color: var(--brand-800);
  border-radius: var(--radius-full);
}
.embed-btn.primary .embed-btn-badge { background: rgb(255 255 255 / 0.20); color: white; }

.embed-grid { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.embed-grid dt { font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.embed-grid dd { font-weight: 500; color: var(--slate-900); margin: 0; }

.embed-result {
  margin-top: 10px;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13px;
}
.embed-result.ok    { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.embed-result.warn  { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.embed-result.error { background: var(--error-bg); border-color: var(--error); color: var(--error); }

.embed-input {
  display: flex; align-items: center;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: white; font-family: inherit; font-size: 12.5px;
  color: var(--slate-900);
}
.embed-input:focus { outline: 2px solid var(--brand-600); outline-offset: -1px; border-color: var(--brand-600); }

.embed-konf {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.embed-konf-hoch    { background: var(--success-bg); color: var(--success); }
.embed-konf-mittel  { background: var(--warning-bg); color: var(--warning); }
.embed-konf-niedrig { background: var(--error-bg); color: var(--error); }

.embed-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--border); border-top-color: var(--brand-700);
  border-radius: 50%; vertical-align: middle; margin-right: 6px;
  animation: embed-spin 0.7s linear infinite;
}
@keyframes embed-spin { to { transform: rotate(360deg); } }

.embed-preview { max-width: 180px; max-height: 130px; border-radius: var(--radius-md); border: 1px solid var(--border); margin-top: 10px; display: block; }

/* ============================================================
   13. EMPTY-STATE
   ============================================================ */
.empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--slate-500); }
.empty-icon {
  width: 56px; height: 56px;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--slate-400);
}
.empty-title { font-weight: 600; color: var(--slate-800); margin-bottom: 6px; font-size: 15px; }
.empty-text  { color: var(--slate-500); font-size: 13px; max-width: 380px; margin: 0 auto var(--space-4); line-height: 1.55; }
.empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   14. SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   15. TOAST-SYSTEM
   ============================================================ */
.toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: 420px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--slate-900);
  pointer-events: auto;
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.toast.toast-shown { opacity: 1; transform: translateY(0); }
.toast.toast-leaving { opacity: 0; transform: translateY(-8px); }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
  background: transparent; border: 0; padding: 2px 6px;
  cursor: pointer; color: var(--slate-400);
  font-size: 18px; line-height: 1;
  border-radius: var(--radius-sm);
}
.toast-close:hover { background: var(--slate-100); color: var(--slate-700); }
.toast-ok    { border-left: 3px solid var(--success); }
.toast-info  { border-left: 3px solid var(--info); }
.toast-warn  { border-left: 3px solid var(--warning); }
.toast-error { border-left: 3px solid var(--error); }
.toast-ok svg    { color: var(--success); }
.toast-info svg  { color: var(--info); }
.toast-warn svg  { color: var(--warning); }
.toast-error svg { color: var(--error); }

@media (max-width: 640px) {
  .toast-container { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

/* ============================================================
   16. CMD+K COMMAND PALETTE
   ============================================================ */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgb(15 23 42 / 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
.cmdk-overlay.open { opacity: 1; pointer-events: auto; }
.cmdk-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 640px; max-width: calc(100vw - 32px);
  max-height: 70vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: scale(0.96); opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow);
}
.cmdk-overlay.open .cmdk-panel { transform: scale(1); opacity: 1; }
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--slate-400);
}
.cmdk-input {
  flex: 1;
  border: 0; outline: 0;
  font-size: 15px; font-family: var(--font-sans);
  letter-spacing: -0.011em;
  color: var(--slate-900);
  background: transparent;
}
.cmdk-input::placeholder { color: var(--slate-400); }
.cmdk-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; }
.cmdk-list li {
  padding: 8px 14px;
  margin: 0 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--slate-700);
  transition: background var(--duration-fast);
}
.cmdk-list li:hover, .cmdk-list li.selected {
  background: var(--brand-50); color: var(--brand-900);
}
.cmdk-list li .cmdk-icon {
  width: 18px; height: 18px;
  background: var(--slate-100); color: var(--slate-600);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.cmdk-list li.selected .cmdk-icon { background: white; color: var(--brand-700); }
.cmdk-hint {
  padding: 10px 16px;
  font-size: 11px; color: var(--slate-500);
  border-top: 1px solid var(--border);
  background: var(--slate-50);
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ============================================================
   17. UTILITY (kompakte Layout-Helfer)
   ============================================================ */
.row { display: flex; align-items: center; gap: var(--space-2); }
.col { display: flex; flex-direction: column; gap: var(--space-2); }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.flex-1 { flex: 1; }
.muted { color: var(--slate-500); font-size: 13px; }

.h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; color: var(--slate-900); margin: 0 0 4px; }
.h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; color: var(--slate-900); margin: 0 0 4px; }
.h3 { font-size: 14px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.011em; margin: 0; }

/* ============================================================
   18. ANIMATIONS — Reveal-Stagger, View-Transitions
   ============================================================ */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(6px);
  animation: reveal-in 320ms var(--ease-out) forwards;
}
.reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { animation-delay: 30ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 60ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 90ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 120ms; }
.reveal-stagger > *:nth-child(6) { animation-delay: 150ms; }
.reveal-stagger > *:nth-child(7) { animation-delay: 180ms; }
.reveal-stagger > *:nth-child(8) { animation-delay: 210ms; }
@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms var(--ease-out); }
::view-transition-new(root) { animation: vt-in 280ms var(--ease-out); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   19. MOBILE (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-topbar { padding: 0 var(--space-3); }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgb(15 23 42 / 0.45);
    z-index: 25; display: none;
  }
  .sidebar-backdrop.open { display: block; }
  .mobile-only-burger { display: inline-flex !important; }
  [data-slot="input"], [data-slot="select"], [data-slot="textarea"],
  .input, .select, .textarea, .btn { font-size: 16px; min-height: 44px; }
}

/* Mobile (≤ 640px): Bottom-Sheets, Touch-Targets */
@media (max-width: 640px) {
  .app-content { padding: var(--space-3); }
  h1 { font-size: 22px; }
  .stat-grid, .kpi-grid { grid-template-columns: 1fr !important; }
  .drawer {
    top: auto !important; left: 0; right: 0; bottom: 0;
    width: 100% !important; max-height: 90vh;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .topbar-search span:first-of-type, .topbar-kbd { display: none; }
  .topbar-search { width: 34px; padding: 0; justify-content: center; }
}

/* ============================================================
   20. TAILWIND-BRIDGE (Backward-Compat für alte Pages mit Tailwind-CDN)
   ============================================================ */
/* Blau → Brand-Kupfer */
.bg-blue-50, [class*="bg-blue-50"] { background-color: var(--brand-50) !important; }
.bg-blue-100  { background-color: var(--brand-100) !important; }
.bg-blue-200  { background-color: var(--brand-200) !important; }
.bg-blue-500  { background-color: var(--brand-500) !important; }
.bg-blue-600  { background-color: var(--brand-700) !important; color: white !important; }
.bg-blue-700  { background-color: var(--brand-800) !important; }
.bg-blue-800  { background-color: var(--brand-900) !important; }
.hover\:bg-blue-50:hover { background-color: var(--brand-50) !important; }
.hover\:bg-blue-100:hover { background-color: var(--brand-100) !important; }
.hover\:bg-blue-600:hover { background-color: var(--brand-700) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-800) !important; }
.text-blue-50  { color: var(--brand-50) !important; }
.text-blue-100 { color: var(--brand-100) !important; }
.text-blue-500 { color: var(--brand-600) !important; }
.text-blue-600 { color: var(--brand-700) !important; }
.text-blue-700 { color: var(--brand-800) !important; }
.text-blue-800 { color: var(--brand-800) !important; }
.text-blue-900 { color: var(--brand-900) !important; }
.hover\:text-blue-600:hover { color: var(--brand-700) !important; }
.hover\:text-blue-700:hover { color: var(--brand-800) !important; }
.border-blue-200 { border-color: var(--brand-200) !important; }
.border-blue-500 { border-color: var(--brand-600) !important; }
.border-blue-600 { border-color: var(--brand-700) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--brand-600) !important; }

/* Indigo → Brand */
.bg-indigo-50, .bg-indigo-100 { background-color: var(--brand-50) !important; }
.bg-indigo-600 { background-color: var(--brand-700) !important; color: white !important; }
.bg-indigo-700 { background-color: var(--brand-800) !important; }
.text-indigo-600 { color: var(--brand-700) !important; }
.text-indigo-700 { color: var(--brand-800) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--brand-800) !important; }

/* Status-Colors */
.bg-purple-100 { background-color: oklch(0.94 0.04 295) !important; }
.text-purple-800 { color: oklch(0.40 0.15 295) !important; }
.bg-purple-500 { background-color: oklch(0.60 0.20 295) !important; }
.bg-amber-100, .bg-amber-50 { background-color: var(--warning-bg) !important; }
.text-amber-800, .text-amber-700, .text-amber-600 { color: var(--warning) !important; }
.bg-green-100, .bg-green-50 { background-color: var(--success-bg) !important; }
.text-green-800, .text-green-700, .text-green-600 { color: var(--success) !important; }
.bg-red-100, .bg-red-50 { background-color: var(--error-bg) !important; }
.text-red-800, .text-red-700, .text-red-600 { color: var(--error) !important; }
.bg-green-600 { background-color: var(--success) !important; color: white !important; }
.bg-red-600   { background-color: var(--error) !important; color: white !important; }
.bg-amber-500 { background-color: var(--warning) !important; }
.bg-green-500 { background-color: var(--success) !important; }
.bg-red-500   { background-color: var(--error) !important; }
.bg-slate-400 { background-color: var(--slate-400) !important; }
.bg-slate-500 { background-color: var(--slate-500) !important; }
.border-amber-300 { border-color: oklch(0.78 0.14 75) !important; }
.border-amber-500 { border-color: var(--warning) !important; }
.border-red-300   { border-color: oklch(0.78 0.14 25) !important; }
.border-red-500   { border-color: var(--error) !important; }
.border-green-300 { border-color: oklch(0.78 0.14 145) !important; }
.border-green-500 { border-color: var(--success) !important; }
.border-orange-200, .border-orange-300, .border-orange-500 { border-color: var(--brand-300) !important; }

/* Hard-Override: Tailwind-Patterns die Karten/Buttons "AI-aussehend" machen */
body[data-page] .bg-white.rounded-lg.shadow,
body[data-page] .bg-white.rounded-xl.shadow,
body[data-page] .bg-white.rounded.shadow,
body[data-page] .bg-white.shadow.rounded-lg,
body[data-page] .bg-white.shadow-lg.rounded-lg,
body[data-page] .bg-white.rounded-lg.shadow-lg {
  background: white !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
body[data-page] h1.text-3xl, body[data-page] h1.text-2xl {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: var(--slate-900) !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}
body[data-page] h2.text-xl, body[data-page] h2.text-2xl {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: var(--slate-900) !important;
  margin: 0 0 6px !important;
}
body[data-page] input.border-2, body[data-page] textarea.border-2, body[data-page] select.border-2 {
  border-width: 1px !important;
  border-color: var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
}
body[data-page] input.border-2:focus, body[data-page] textarea.border-2:focus, body[data-page] select.border-2:focus {
  outline: 2px solid var(--brand-600) !important;
  outline-offset: -1px !important;
  border-color: var(--brand-600) !important;
  box-shadow: none !important;
}
body[data-page] button.bg-blue-600, body[data-page] a.bg-blue-600,
body[data-page] button.bg-blue-700, body[data-page] a.bg-blue-700 {
  background: var(--brand-700) !important;
  color: white !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  height: var(--h-9) !important;
  font-size: 13px !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px !important;
  transition: background var(--duration-fast) !important;
}
body[data-page] button.bg-blue-600:hover, body[data-page] a.bg-blue-600:hover,
body[data-page] button.bg-blue-700:hover, body[data-page] a.bg-blue-700:hover {
  background: var(--brand-800) !important; color: white !important;
}
body[data-page] button.border-2.border-slate-300, body[data-page] a.border-2.border-slate-300 {
  border-width: 1px !important;
  border-color: var(--border) !important;
  background: white !important;
  color: var(--slate-800) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  height: var(--h-9) !important;
  font-size: 13px !important;
}
body[data-page] button.border-2.border-slate-300:hover, body[data-page] a.border-2.border-slate-300:hover {
  background: var(--slate-50) !important;
  border-color: var(--border-strong) !important;
  color: var(--slate-900) !important;
}
body[data-page] .divide-y > * + * { border-top-color: var(--border) !important; }
body[data-page] .bg-blue-100.text-blue-800,
body[data-page] .bg-purple-100.text-purple-800,
body[data-page] .bg-amber-100.text-amber-800,
body[data-page] .bg-green-100.text-green-800,
body[data-page] .bg-red-100.text-red-800 {
  padding: 2px 8px !important;
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
body[data-page] button.border-b-2.border-blue-600,
body[data-page] [class*="border-b-2 border-blue-600"] {
  border-bottom-color: var(--brand-700) !important;
  border-bottom-width: 2px !important;
  color: var(--brand-800) !important;
}
body[data-page] .fixed.inset-0[class*="bg-black"] {
  background: rgb(15 23 42 / 0.50) !important;
  backdrop-filter: blur(8px) !important;
}
body[data-page] .fixed.inset-0 > .bg-white.rounded-xl,
body[data-page] .fixed.inset-0 > .bg-white.rounded-lg {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Border-Radius + Shadow Defaults (Tailwind) */
.rounded     { border-radius: var(--radius-md) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.shadow      { box-shadow: var(--shadow-sm) !important; }
.shadow-lg   { box-shadow: var(--shadow) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }

/* Print: hide chrome */
@media print {
  .app-sidebar, .app-topbar { display: none; }
  .app-main, .app-content { margin: 0; padding: 0; }
}

/* ============================================================
   PREMIUM LAYER v3 (2026-05-31) — Glassmorphism + Gradient
   Modernes Look-Upgrade global. Subtile cream-orange Tints,
   nicht knalliges Brand. Hauptklassen werden per-Element
   überschrieben, nicht via wildcards.
   ============================================================ */

/* Premium-Tokens */
:root {
  --glass-cream: rgba(255, 247, 237, 0.72);
  --glass-white: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(194, 65, 12, 0.10);
  --glass-blur: blur(14px) saturate(160%);
  --gradient-brand-dark: linear-gradient(135deg, #9A3412 0%, #7C2D12 100%);
  --gradient-brand-soft: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  --gradient-brand-bright: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  --gradient-canvas: linear-gradient(180deg, #FFF7ED 0%, #FAFAF9 60%, #F5F5F4 100%);
  --gradient-radial-glow: radial-gradient(circle at 100% 0%, rgba(251,146,60,0.12) 0%, transparent 50%);
  --shadow-glass: 0 4px 24px -4px rgba(154, 52, 18, 0.10), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-glass-lg: 0 20px 60px -12px rgba(154, 52, 18, 0.20), 0 8px 24px rgba(0,0,0,0.05);
}

/* Body-Canvas mit subtiler warmer Untertöne */
body { background: var(--gradient-canvas); }

/* === Card-Flat: jetzt mit Glassmorphism + warmem Tint === */
.card-flat {
  background: var(--glass-white) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glass) !important;
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.card-flat:hover { box-shadow: var(--shadow-glass-lg) !important; }
.card-flat .card-header {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,247,237,0.50) 0%, transparent 100%);
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-flat .card-title {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--slate-900); text-transform: none;
}

/* === Card === */
.card {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

/* === Drawer (rechte Slide-Ins) — Premium-Header + cream Body === */
.drawer {
  background: var(--gradient-brand-soft) !important;
  box-shadow: -16px 0 60px -8px rgba(154, 52, 18, 0.18), -2px 0 8px rgba(0,0,0,0.04) !important;
  border-left: 1px solid var(--glass-border);
}
.drawer .drawer-header,
.drawer > div:first-child:not(.drawer-body) {
  background: var(--gradient-brand-dark);
  color: white;
  border-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
.drawer .drawer-header::after,
.drawer > div:first-child:not(.drawer-body)::after {
  content: ""; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251,146,60,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.drawer .drawer-header h2,
.drawer .drawer-header h3,
.drawer > div:first-child h2,
.drawer > div:first-child h3,
.drawer .drawer-h2 {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.drawer .drawer-eyebrow,
.drawer .drawer-meta,
.drawer .muted,
.drawer > div:first-child:not(.drawer-body) .muted { color: rgba(255,255,255,0.78) !important; }
.drawer > div:first-child:not(.drawer-body),
.drawer > div:first-child:not(.drawer-body) > div { color: white !important; }
.drawer .drawer-body { background: transparent; }
.drawer-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

/* === Editor (Pakete, Angebot) — als Premium-Modal === */
.editor {
  background: var(--gradient-brand-soft) !important;
  box-shadow: var(--shadow-glass-lg) !important;
}
.editor-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.editor-head {
  background: var(--gradient-brand-dark) !important;
  color: white !important;
  border-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
.editor-head::after {
  content: ""; position: absolute; top: -50%; right: -20%; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(251,146,60,0.30) 0%, transparent 70%);
  pointer-events: none;
}
.editor-head > * { position: relative; z-index: 1; }
.editor-head, .editor-head > div, .editor-head h1, .editor-head h2, .editor-head h3,
.editor-head > div > div:not(.btn):not(.row), .editor-head [style*="font-weight"] { color: white !important; }
.editor-head .muted, .editor-head [class*="muted"], .editor-head .text-link { color: rgba(255,255,255,0.78) !important; }
.editor-head .btn { background: rgba(255,255,255,0.15) !important; color: white !important; border-color: rgba(255,255,255,0.20) !important; backdrop-filter: blur(8px); }
.editor-head .btn:hover { background: rgba(255,255,255,0.25) !important; }
.editor-foot {
  background: var(--glass-white) !important;
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border) !important;
}

/* === Modal-Card: Premium look === */
.modal-card {
  background: var(--gradient-brand-soft) !important;
  box-shadow: var(--shadow-glass-lg) !important;
  border: 1px solid var(--glass-border) !important;
}
.modal-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.modal-header {
  background: var(--gradient-brand-dark) !important;
  color: white !important;
  border-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
.modal-header::after {
  content: ""; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251,146,60,0.30) 0%, transparent 70%);
  pointer-events: none;
}
.modal-header > * { position: relative; z-index: 1; }
.modal-header, .modal-header h2, .modal-header h3, .modal-header > div { color: white !important; }
.modal-header h2, .modal-header h3 { text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.modal-header .sub, .modal-header .muted { color: rgba(255,255,255,0.78) !important; }
.modal-body { background: transparent; }
.modal-footer {
  background: var(--glass-white) !important;
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border) !important;
}

/* === Buttons mit subtilem Gradient (statt knalligem solid) === */
.btn-primary,
[data-slot="button"][data-variant="primary"] {
  background: var(--gradient-brand-bright) !important;
  border: 0 !important;
  box-shadow: 0 4px 12px -2px rgba(194,65,12,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transition: transform 160ms, box-shadow 160ms;
}
.btn-primary:hover,
[data-slot="button"][data-variant="primary"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(194,65,12,0.40), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  color: white !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--slate-300) !important; box-shadow: none !important; transform: none !important; }

/* === H1 Premium-Heading (subtile Schrift-Aufwertung global) === */
.h1 { letter-spacing: -0.024em; }

/* === Status-Pills (überall einheitlich) === */
.pill, .status-pill, .pill-status {
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.pill-success, .st-bezahlt, .st-aktiv {
  background: rgba(21,128,61,0.08); color: #15803D; border-color: rgba(21,128,61,0.20);
}
.pill-warning, .st-teilbezahlt, .st-wartend {
  background: rgba(161,98,7,0.08); color: #A16207; border-color: rgba(161,98,7,0.20);
}
.pill-danger, .pill-error, .st-ueberfaellig {
  background: rgba(185,28,28,0.08); color: #B91C1C; border-color: rgba(185,28,28,0.20);
}
.pill-neutral, .st-entwurf, .st-storniert {
  background: rgba(100,116,139,0.08); color: var(--slate-700); border-color: rgba(100,116,139,0.20);
}
.pill-info, .st-gesendet {
  background: rgba(29,78,216,0.08); color: #1E40AF; border-color: rgba(29,78,216,0.20);
}

/* === Topbar mit warmem Tint === */
.app-topbar {
  background: rgba(255, 247, 237, 0.78) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
}

/* === Form-Elements (input/select/textarea) Focus mit Brand-Ring === */
input.input, select.select, textarea.textarea,
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="url"], select, textarea {
  background: white;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  transition: border-color 160ms, box-shadow 160ms;
}
input.input:focus, select.select:focus, textarea.textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #EA580C;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.15);
}

/* === Tabs (.prov-tabs, .tab-nav etc.) — Premium Segmented-Control === */
.prov-tabs, .tab-nav {
  display: inline-flex !important;
  gap: 4px !important;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.prov-tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none; }
.prov-tabs button, .tab-nav button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--radius-full) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--slate-600) !important;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: background 160ms, color 160ms, transform 120ms !important;
  flex-shrink: 0;
}
.prov-tabs button:hover, .tab-nav button:hover {
  background: rgba(255, 247, 237, 0.60) !important;
  color: var(--slate-900) !important;
}
.prov-tabs button.active, .tab-nav button.active {
  background: var(--gradient-brand-bright) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px -2px rgba(194, 65, 12, 0.40), inset 0 1px 0 rgba(255,255,255,0.20);
}
.prov-tabs button.active .tab-count,
.tab-nav button.active .tab-count {
  background: rgba(255,255,255,0.25) !important;
  color: white !important;
  font-weight: 700;
}
.prov-tabs button .tab-count,
.tab-nav button .tab-count {
  background: var(--slate-100);
  color: var(--slate-700);
  padding: 0 7px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* === Mobile-Polish === */
@media (max-width: 640px) {
  .card-flat { border-radius: var(--radius) !important; }
  .modal-card, .editor { border-radius: var(--radius-lg) !important; }
}

/* ============================================================
   PREMIUM LAYER v4 — Mehr automatischer Glanz für ALLE Pages
   ============================================================ */

/* Stat-Karten: warm-glass mit subtler hover */
.stat {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4);
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
  box-shadow: var(--shadow-glass);
}
.stat:hover { border-color: var(--brand-300); transform: translateY(-1px); box-shadow: var(--shadow-glass-lg); }
/* Klickbare Stat-Tiles (a.stat oder button.stat oder mit role="link") sehen aus + verhalten sich wie Buttons */
a.stat, button.stat, .stat[role="link"], .stat[onclick], .prov-stat[href], a.prov-stat {
  cursor: pointer;
  position: relative;
}
a.stat::after, button.stat::after, .prov-stat[href]::after {
  content: "→";
  position: absolute;
  top: 12px; right: 14px;
  font-size: 14px; font-weight: 700; color: var(--slate-300);
  transition: color 160ms, transform 160ms, opacity 160ms;
  opacity: 0;
}
a.stat:hover::after, button.stat:hover::after, .prov-stat[href]:hover::after {
  color: var(--brand-700);
  transform: translateX(3px);
  opacity: 1;
}
a.stat:hover, button.stat:hover, .prov-stat[href]:hover {
  border-color: var(--brand-400) !important;
  box-shadow: 0 8px 24px -8px rgba(154,52,18,0.18);
}
a.stat:active, button.stat:active, .prov-stat[href]:active { transform: translateY(0); }
a.stat:focus-visible, button.stat:focus-visible, .prov-stat[href]:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 2px;
}
.stat-grid { display: grid; gap: 12px; }
.stat-label { font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--slate-900); margin-top: 4px; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 11.5px; color: var(--slate-500); margin-top: 4px; }

/* Page-Hero (optional Top-Element pro Page) */
.page-hero {
  position: relative;
  background: var(--gradient-brand-dark);
  color: white;
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(154, 52, 18, 0.25);
}
.page-hero::before {
  content: ""; position: absolute;
  top: -50%; right: -10%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.35) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: white; letter-spacing: -0.024em; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.page-hero .muted, .page-hero p { color: rgba(255,255,255,0.85) !important; }

/* Generic Info-Banner (für alle Pages) */
.info-banner {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
  border-left: 3px solid var(--brand-700) !important;
  border-radius: var(--radius) !important;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--slate-700) !important;
  line-height: 1.55;
}
.info-banner strong { color: var(--brand-800); }

/* Button-Varianten */
.btn-secondary,
[data-slot="button"][data-variant="secondary"] {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border) !important;
  color: var(--slate-800) !important;
  transition: border-color 160ms, background 160ms, transform 160ms;
}
.btn-secondary:hover,
[data-slot="button"][data-variant="secondary"]:hover {
  background: white !important;
  border-color: var(--brand-400) !important;
  color: var(--brand-800) !important;
}

.btn-ghost,
[data-slot="button"][data-variant="ghost"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--slate-700) !important;
  transition: background 140ms;
}
.btn-ghost:hover { background: var(--slate-100) !important; color: var(--slate-900) !important; }

.btn-danger {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  color: white !important; border: 0 !important;
  box-shadow: 0 4px 12px -2px rgba(185,28,28,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -2px rgba(185,28,28,0.40) !important; }

/* Form-Labels einheitlich */
.label, label.label {
  display: block;
  font-size: 11.5px; font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}

/* Tables: warm-glass header */
.table { border-collapse: separate; border-spacing: 0; width: 100%; }
.table thead th {
  background: rgba(255, 247, 237, 0.50) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--slate-600) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--glass-border) !important;
  text-align: left;
}
.table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--slate-100);
  font-size: 13px;
  color: var(--slate-800);
}
.table tbody tr:hover td { background: rgba(255, 247, 237, 0.30); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td {
  background: var(--slate-50);
  font-weight: 600;
  border-top: 2px solid var(--glass-border);
}

/* Empty States */
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--slate-600);
}
.empty .empty-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--slate-900);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* Card-Variant ohne padding (.card) */
.card {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

/* Card-Header generisch */
.card-header {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,247,237,0.50) 0%, transparent 100%);
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-title {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--slate-900);
}

/* Toast-Container global */
.toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(15,23,42,0.92); color: white;
  padding: 12px 18px; border-radius: var(--radius);
  font-size: 13px; line-height: 1.5;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.30);
  animation: toast-in-global 220ms cubic-bezier(.2,.8,.2,1);
  max-width: 480px; white-space: pre-line;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.toast.success { background: rgba(21,128,61,0.95); }
.toast.error { background: rgba(185,28,28,0.95); }
.toast.warning { background: rgba(161,98,7,0.95); }
@keyframes toast-in-global {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar: warmes Glas */
.app-sidebar {
  background: rgba(255, 247, 237, 0.80) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-right: 1px solid var(--glass-border) !important;
}

/* ============================================================
   MOBILE-POLISH v1 (2026-06-01) — Smartphone-First Optimierung
   ============================================================ */

@media (max-width: 900px) {
  /* === Sidebar: Slide-In-Overlay statt fix === */
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.2,.8,.2,1);
    box-shadow: -2px 0 0 transparent;
    width: min(280px, 80vw);
  }
  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px -8px rgba(0,0,0,0.20);
  }
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 29; opacity: 0; pointer-events: none;
    transition: opacity 220ms;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  /* App-Main ohne Margin auf Mobile (Sidebar als Overlay) */
  .app-main { margin-left: 0 !important; }
  .app-content { padding: var(--space-3) var(--space-3) 80px !important; }

  /* === Headlines kleiner === */
  h1, .h1 { font-size: 22px !important; }
  h2, .h2 { font-size: 17px !important; }
  h3, .h3 { font-size: 15px !important; }

  /* === Touch-Targets: alle Buttons mind. 40px hoch === */
  .btn, button.btn, [data-slot="button"] {
    min-height: 40px;
  }
  .btn-sm { min-height: 36px; padding: 0 12px; }

  /* === Inputs: größere Touch-Targets === */
  .input, .select, .textarea,
  input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="url"], input[type="search"], select, textarea {
    min-height: 42px;
    font-size: 16px !important;  /* verhindert Auto-Zoom auf iOS */
    padding: 10px 12px !important;
  }
  textarea { min-height: 100px; }

  /* === KPI-Grid: 2 Spalten === */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat { padding: 12px !important; }
  .stat-value { font-size: 18px !important; }
  .stat-label { font-size: 10px !important; }

  /* === Filter-Pills: horizontal-scroll === */
  .filter-pill {
    flex-shrink: 0;
  }

  /* Container das die Filter-Pills hat → scroll horizontal */
  .card-flat > div[style*="flex-wrap"],
  .rg-filterbar, .prov-tabs, .kal-filter-bar > .typ-filter {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* === Tables: erlauben H-Scroll, Karten-Layout als Alternative === */
  .table { font-size: 12.5px !important; }
  .table thead th, .table tbody td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  /* Erste Tabellen-Spalte sticky für Orientierung */
  .table thead th:first-child,
  .table tbody td:first-child {
    position: sticky; left: 0;
    background: inherit;
    z-index: 2;
  }
  .table tbody tr td:first-child {
    background: white;
  }
  .table tbody tr:hover td:first-child {
    background: rgba(255,247,237,0.95);
  }

  /* === Drawer als Bottom-Sheet === */
  .drawer {
    top: auto !important;
    right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 90vh !important; max-height: 90vh !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    transform: translateY(100%);
    animation: drawer-slide-up 320ms cubic-bezier(.2,.8,.2,1) forwards;
    border-left: 0 !important;
  }
  @keyframes drawer-slide-up { to { transform: translateY(0); } }

  /* === Modals: Bottom-Sheet auf Mobile === */
  .modal-card, .editor {
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }
  .modal-overlay, .editor-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* === Card-flat: mehr Atmungsraum === */
  .card-flat { border-radius: var(--radius-lg) !important; }
  .card-header { padding: 12px 14px !important; }

  /* === Page-Hero kompakter === */
  .page-hero, .ai-hero {
    padding: 20px !important;
    border-radius: var(--radius-lg) !important;
  }
  .page-hero h1, .ai-hero h1 { font-size: 22px !important; }

  /* === FAB-Position: nicht über Bottom-Nav === */
  .ai-fab { bottom: 80px !important; }
  .pi-help-btn { bottom: 80px !important; }

  /* === Bottom-Nav (neu) === */
  .mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--glass-border);
    z-index: 40;
    display: flex;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px -4px rgba(0,0,0,0.06);
  }
  .mobile-bottom-nav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--slate-500);
    font-size: 10px; font-weight: 500;
    transition: color 140ms;
  }
  .mobile-bottom-nav a:hover { color: var(--brand-700); text-decoration: none; }
  .mobile-bottom-nav a.active {
    color: var(--brand-700); font-weight: 600;
  }
  .mobile-bottom-nav a svg { width: 22px; height: 22px; }

  /* === Header-Row: stack vertikal === */
  .row[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    gap: 8px !important;
  }

  /* === Tabs scrollen horizontal === */
  .prov-tabs, .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .prov-tabs button, .tab-nav button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* === Topbar kompakter === */
  .app-topbar { padding: 0 var(--space-3) !important; }

  /* === Hide nicht-essentielle Elemente === */
  .hide-on-mobile { display: none !important; }
}

@media (max-width: 480px) {
  /* === Phone-XS: noch kompakter === */
  .app-content { padding: var(--space-2) var(--space-2) 80px !important; }
  .stat-grid { grid-template-columns: 1fr !important; }
  .ai-fab { right: 16px !important; bottom: 76px !important; width: 48px !important; height: 48px !important; }
  .pi-help-btn { right: 16px !important; bottom: 76px !important; }
  .ai-fab.with-drawer { left: 16px !important; bottom: 76px !important; }

  /* Sub-Stage-Rows responsive */
  .substage-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .substage-row > * { text-align: left !important; }

  /* Pakete pos-row */
  .pos-row { grid-template-columns: 1fr 1fr !important; gap: 4px !important; }
}

/* === iOS Safe-Area-Insets === */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================
   PREMIUM LAYER v5 — Hardcoded-Hex-Cleanup für alle Pages
   ============================================================ */

/* Generische Status-Cards: jede Karte mit hardcodierten grün/gelb/rot-Background
   bekommt warm-glass + farbliche Border-Left */

/* Inline-Style "background:#ecfdf5" (Success-grün) → Warm-Glas mit grünem Akzent */
[style*="#ecfdf5"], [style*="#dcfce7"], [style*="#f0fdf4"] {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--success, #15803d) !important;
}

/* Inline-Style "#fef3c7" (Warning-gelb) → Warm-Glas + Warning */
[style*="#fef3c7"], [style*="#fde68a"], [style*="#fefce8"] {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--warning, #A16207) !important;
}

/* Inline-Style "#fef2f2" (Error-rot) → Warm-Glas + Error */
[style*="#fef2f2"], [style*="#fee2e2"], [style*="#fecaca"] {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--error, #B91C1C) !important;
}

/* Inline-Style "#fff7ed" / "#fed7aa" (Brand-orange) → Warm-Glas + Brand */
[style*="#fff7ed"], [style*="#ffedd5"], [style*="#fed7aa"], [style*="#fdba74"] {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--brand-600) !important;
}

/* Inline-Style "#eff6ff" / "#dbeafe" (Info-blau) → Warm-Glas + Info */
[style*="#eff6ff"], [style*="#dbeafe"], [style*="#bfdbfe"] {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--info, #1E40AF) !important;
}

/* Page-Hero Helper: jede Section am Top mit class "hero"/"page-top" bekommt Brand-Gradient */
.hero, .page-top {
  position: relative;
  background: var(--gradient-brand-dark);
  color: white;
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(154, 52, 18, 0.25);
}
.hero h1, .page-top h1 { color: white !important; }

/* Common Status-Pills die per Inline-Style erzeugt werden */
.status-pill, [class^="st-"], [class*=" st-"] {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* === Auto-injected Page-Hero (von app-shell.js per JS) === */
.page-hero-auto {
  position: relative;
  background: var(--gradient-brand-dark);
  color: white;
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(154, 52, 18, 0.25);
}
.page-hero-auto::before {
  content: ""; position: absolute;
  top: -50%; right: -10%; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(251,146,60,0.35) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-auto::after {
  content: ""; position: absolute;
  bottom: -30%; left: -10%; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(234,88,12,0.20) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-auto > * { position: relative; z-index: 1; }
.page-hero-auto h1, .page-hero-auto .h1 {
  color: white !important;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 6px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.page-hero-auto .muted,
.page-hero-auto p,
.page-hero-auto > div > div:not(.row),
.page-hero-auto [class*="muted"] {
  color: rgba(255,255,255,0.85) !important;
}
/* Buttons im Hero: frosted-glass-Stil */
.page-hero-auto .btn-primary,
.page-hero-auto .btn-secondary,
.page-hero-auto .btn:not(.btn-ghost) {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: white !important;
  backdrop-filter: blur(8px);
  box-shadow: none !important;
}
.page-hero-auto .btn-primary:hover,
.page-hero-auto .btn-secondary:hover,
.page-hero-auto .btn:not(.btn-ghost):hover {
  background: rgba(255,255,255,0.28) !important;
  color: white !important;
  transform: translateY(-1px);
}
.page-hero-auto select, .page-hero-auto .select {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: white !important;
}
.page-hero-auto select option { color: var(--slate-900); background: white; }
.page-hero-auto a:not(.btn) { color: rgba(255,255,255,0.95); }

/* Mobile: Hero kompakter */
@media (max-width: 640px) {
  .page-hero-auto { padding: 18px 20px; border-radius: var(--radius-lg); }
  .page-hero-auto h1, .page-hero-auto .h1 { font-size: 20px !important; }
}

/* ===================================================================
   PAGE-HEADER + STAT-VALUES — Desktop-Standard für neue Pages
   (Mobile-Override unten in @media)
=================================================================== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.022em;
  color: var(--slate-900);
}
.page-header .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
/* Utility-Klassen die in neuen Pages häufig vorkommen — semantisch auf Tokens mappen */
.text-3xl { font-size: 32px !important; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.text-2xl { font-size: 24px !important; line-height: 1.2; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.text-xl  { font-size: 18px !important; line-height: 1.3; }
.text-lg  { font-size: 16px !important; line-height: 1.4; font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-mono { font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', monospace); font-size: 0.92em; }
.text-red-700    { color: var(--error, #b91c1c) !important; }
.text-amber-700  { color: var(--warning, #b45309) !important; }
.text-orange-700 { color: #c2410c !important; }
.text-green-700  { color: var(--success, #15803d) !important; }
.text-slate-500  { color: var(--slate-500) !important; }
.text-slate-600  { color: var(--slate-600) !important; }
.text-slate-700  { color: var(--slate-700) !important; }
.text-slate-800  { color: var(--slate-800) !important; }
.text-slate-900  { color: var(--slate-900) !important; }
.bg-red-50    { background-color: rgba(239, 68, 68, 0.06) !important; }
.bg-amber-50  { background-color: rgba(245, 158, 11, 0.08) !important; }
.bg-green-50  { background-color: rgba(34, 197, 94, 0.06) !important; }
.bg-yellow-50 { background-color: rgba(234, 179, 8, 0.08) !important; }
.bg-slate-50  { background-color: var(--slate-50) !important; }
.bg-slate-100 { background-color: var(--slate-100) !important; }
/* Spacing-Utilities */
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.ml-1 { margin-left: 4px; } .ml-2 { margin-left: 8px; } .ml-3 { margin-left: 12px; }
.mr-2 { margin-right: 8px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; }
.pt-2 { padding-top: 8px; } .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; }
.pb-2 { padding-bottom: 8px; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.flex { display: flex; } .inline-flex { display: inline-flex; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; } .flex-shrink-0 { flex-shrink: 0; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.text-xs { font-size: 11.5px; }
.text-sm { font-size: 13px; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.rounded { border-radius: var(--radius-md); }
.border { border: 1px solid var(--slate-200); }
.border-t { border-top: 1px solid var(--slate-200); }
.border-b { border-bottom: 1px solid var(--slate-200); }
.border-l { border-left: 1px solid var(--slate-200); }
.border-l-4 { border-left-width: 4px; }
.border-l-green-600 { border-left-color: var(--success, #16a34a) !important; }
.border-l-amber-500 { border-left-color: var(--warning, #f59e0b) !important; }
.border-l-red-500   { border-left-color: var(--error, #ef4444) !important; }
.border-red-200 { border-color: rgba(239, 68, 68, 0.25); }
.divide-y > * + * { border-top: 1px solid var(--slate-100); }
.col-span-2 { grid-column: span 2 / span 2; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-0\.5 > * + * { margin-top: 2px; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.ring-2 { box-shadow: 0 0 0 2px var(--brand-200); }
.ring-blue-400  { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.6); }
.ring-amber-400 { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.6); }
.ring-orange-400 { box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.6); }
.ring-red-400 { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.6); }
.ring-red-600 { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.6); }
.cursor-pointer { cursor: pointer; }
.hover\:underline:hover { text-decoration: underline; }
.link { color: var(--brand-700); text-decoration: none; }
.link:hover { text-decoration: underline; }
.btn-xs {
  padding: 4px 8px;
  font-size: 11.5px;
  border-radius: var(--radius-sm);
}
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--slate-700);
}
.btn-ghost:hover { background: var(--slate-100); color: var(--slate-900); }

/* ===================================================================
   MOBILE-CARD-LAYOUT für Kern-Tabellen (<768px)
   Erlaubt opt-in via Klasse .table-mobile-cards
   Datenzellen brauchen data-label-Attribut für den Label-Text.
=================================================================== */
@media (max-width: 768px) {
  /* Generelle Tabellen: kein horizontales Scrollen mehr — werden zu Cards */
  table.table, .table-mobile-cards {
    display: block;
    width: 100%;
  }
  table.table thead, .table-mobile-cards thead {
    display: none;
  }
  table.table tbody, .table-mobile-cards tbody {
    display: block;
    width: 100%;
  }
  table.table tr, .table-mobile-cards tr {
    display: block;
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  table.table td, .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border: none !important;
    padding: 6px 0 !important;
    font-size: 14px;
    text-align: left !important;
  }
  table.table td::before, .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--slate-600);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  table.table td:first-child, .table-mobile-cards td:first-child {
    border-bottom: 1px solid var(--slate-100) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
  }

  /* Sticky Quick-Action-Bar unten am Bildschirm */
  .mobile-action-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    border-top: 1px solid var(--slate-200);
    padding: 10px 14px env(safe-area-inset-bottom, 10px);
    display: flex;
    gap: 8px;
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
  }
  .mobile-action-bar .btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
  }
  .app-main { padding-bottom: 80px; } /* Platz für sticky bar */

  /* Filter/Suche: vollbreit */
  .input, select.input, input.input { font-size: 16px !important; } /* iOS Zoom-Prevention */

  /* KPI-Grids: 2 statt 4 Spalten */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-5 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Page-Header: Buttons unter Titel */
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  .page-header .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Modals: vollbildig auf Mobile */
  .modal-card {
    max-width: 100% !important;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Long-Lists: kleinere Schrift, mehr Info pro Bildschirm */
  .h1, h1 { font-size: 22px !important; }
  .h2, h2 { font-size: 18px !important; }
}


/* =========================================================
   MOBILE-FIRST REFACTOR v2 — 2026-06-04
   Touch-Targets · Safe-Area · Bottom-Sheets · Card-Tables
   ========================================================= */

/* Globale Touch-Target-Mindestgröße + Safe-Area für Notch-Geräte */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .app-topbar { padding-top: max(8px, env(safe-area-inset-top)) !important; }
  .app-sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* Body H-Overflow Schutz */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Touch-Klassen — überall wo Klicks passieren */
@media (pointer: coarse) {
  .btn, button, .sidebar-item, .nav-item, a.btn, input[type=button], input[type=submit] {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm, .btn-xs { min-height: 36px !important; }
  .icon-btn { min-height: 40px !important; min-width: 40px !important; }
}

/* ========== Tablet 769-1024px ========== */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .kpi-grid, .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
}

/* ========== Mobile 481-768px ========== */
@media (max-width: 768px) {
  /* Sidebar als Slide-Overlay */
  .app-sidebar { transform: translateX(-100%); transition: transform 220ms ease; z-index: 200; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 199; opacity: 0; pointer-events: none; transition: opacity 200ms; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Sticky Topbar mit Burger */
  .app-topbar { position: sticky; top: 0; z-index: 100; background: white; border-bottom: 1px solid var(--slate-200); }
  .mobile-only-burger { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

  /* Content-Padding kompakt */
  .app-content { padding: 12px !important; }
  .card, .card-flat, .section-card { padding: 14px !important; }

  /* Inputs: 16px verhindert iOS-Zoom-In */
  input, select, textarea, .input { font-size: 16px !important; }

  /* Tabellen → Card-Layout via .responsive-table-Klasse */
  table.responsive-table { border: 0; }
  table.responsive-table thead { display: none; }
  table.responsive-table tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px;
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  table.responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--slate-100);
    text-align: right;
    font-size: 13.5px;
  }
  table.responsive-table td:last-child { border-bottom: 0; }
  table.responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--slate-500);
    text-align: left;
    flex-shrink: 0;
    padding-right: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  /* Klassische table als h-scroll-Container für nicht-konvertierte Tabellen */
  .table-wrap, .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: max-content; }

  /* KPI-Grids: 2-spaltig */
  .kpi-grid, .grid-4, .grid-3, .grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-card { padding: 12px !important; }
  .kpi-value { font-size: 20px !important; }
  .kpi-label { font-size: 10.5px !important; }

  /* Headlines kompakter */
  .h1, h1 { font-size: 22px !important; margin-bottom: 4px !important; }
  .h2, h2 { font-size: 17px !important; }

  /* Tabs horizontal scrollbar */
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .tab-nav button { white-space: nowrap; flex-shrink: 0; }
}

/* ========== Phone < 481px ========== */
@media (max-width: 480px) {
  .app-content { padding: 8px !important; }
  .card, .card-flat, .section-card { padding: 12px !important; border-radius: 10px !important; }
  .h1, h1 { font-size: 20px !important; }

  /* KPI-Grids: 1-spaltig wenn sehr eng */
  .kpi-grid, .grid-4, .grid-3 { grid-template-columns: 1fr !important; }

  /* MODALS als Bottom-Sheet */
  .modal-card, .modal, [class*="modal"][class*="card"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    box-shadow: 0 -8px 32px rgba(15,23,42,.18) !important;
    overflow-y: auto !important;
  }
  /* Bottom-Sheet Grip-Indicator */
  .modal-card::before, .modal::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    margin: 6px auto 8px;
    width: 36px;
    height: 4px;
    background: var(--slate-300);
    border-radius: 2px;
  }

  /* Buttons: full-width auf Phone */
  .btn-full-mobile, .row.actions .btn, .page-header .actions .btn { width: 100%; }

  /* Datepicker, Selects: native */
  input[type=date], input[type=datetime-local], input[type=time], select {
    -webkit-appearance: none;
    appearance: none;
    background: white;
  }
}

/* ========== Drucken ========== */
@media print {
  .app-sidebar, .app-topbar, .sidebar-backdrop, .mobile-only-burger { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
}

/* ============================================================
   MOBILE FLOATING-BUTTON FIX (2026-06-04)
   AI-FAB + Help-Button sollen auf Phone keine Page-Buttons überlagern
   ============================================================ */
@media (max-width: 768px) {
  /* Beide Floating-Buttons kompakter + nebeneinander unten-rechts */
  .ai-fab {
    width: 52px !important;
    height: 52px !important;
    right: 14px !important;
    bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
    z-index: 998 !important;
  }
  .pi-help-btn {
    width: 38px !important;
    height: 38px !important;
    right: 76px !important; /* 52 + 14 + 10 */
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
    font-size: 15px !important;
    z-index: 998 !important;
  }

  /* Page-Content bekommt unten Platz damit FABs nicht über Inhalt liegen */
  .app-content { padding-bottom: 84px !important; }

  /* Page-Header-Action-Buttons müssen oberhalb der FAB-Zone sein */
  .page-header, .row.gap-2.actions, .row.actions { position: relative; z-index: 1; }
}

/* Phone: noch kleinere FABs */
@media (max-width: 480px) {
  .ai-fab {
    width: 48px !important;
    height: 48px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }
  .pi-help-btn {
    width: 34px !important;
    height: 34px !important;
    right: 68px !important;
    bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px)) !important;
  }
  .app-content { padding-bottom: 78px !important; }

  /* Falls AI-Panel offen ist: Help nach links versetzen */
  body.ai-panel-open .pi-help-btn { right: auto !important; left: 12px !important; }
  body.ai-panel-open .ai-fab { right: auto !important; left: 60px !important; }
}

/* Tooltip/Drawer von AI darf nicht über fixed Buttons gehen */
.ai-drawer { z-index: 1000 !important; }