/* ===========================================================
   GARTENKOLONIE VERWALTUNGSSYSTEM - DESIGN SYSTEM
   Version: 2.1
   Datum: 2026-04-24
   =========================================================== */

:root{
  /* ===========================================================
     BRAND COLORS
     =========================================================== */
  --brand: #1c2938;
  --brand-600: #293d54;
  --brand-700: #405670;
  --brand-light: #ebf2ff;
  --brand-bg-focus: rgba(37, 99, 235, 0.18);
  --brand-shadow: rgba(37, 99, 235, 0.18);

  /* ===========================================================
     NEUTRAL GRAYS
     =========================================================== */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ===========================================================
     SURFACES & BACKGROUNDS
     =========================================================== */
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --surface-muted: #f1f5f9;
  
  /* Bootstrap Body Backgrounds */
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1f2937;
  --bs-body-color-rgb: 31, 41, 55;
  --bs-secondary-bg: #f8f9fa;
  --bs-secondary-bg-rgb: 248, 249, 250;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;

  /* ===========================================================
     BORDERS, SHADOWS, OVERLAY
     =========================================================== */
  --border: #c7ccd2;
  --border-strong: #b9bec4;
  --border-light: #e5e7eb;
  --border-field: #b6bcc3;
  --border-table: #b9bec4;
  --border-navbar: rgba(255,255,255,.08);
  --border-modal: rgba(0,0,0,.08);
  
  --shadow: rgba(28,41,56,.06);
  --shadow-card: rgba(16,24,40,.04);
  --shadow-dropdown: rgba(0,0,0,.15);
  --shadow-modal: rgba(0,0,0,.18);
  --shadow-version: rgba(0,0,0,.06);
  --shadow-dark: rgba(0,0,0,.25);
  
  --overlay-white-08: rgba(255,255,255,.08);
  --overlay-white-10: rgba(255,255,255,.10);
  --overlay-white-12: rgba(255,255,255,.12);
  --overlay-white-25: rgba(255,255,255,.25);
  --overlay-white-70: rgba(255,255,255,.70);
  --overlay-white-75: rgba(255,255,255,.75);
  --overlay-white-80: rgba(255,255,255,.80);
  --overlay-white-85: rgba(255,255,255,.85);
  
  --overlay-black-04: rgba(0,0,0,.04);
  --overlay-black-06: rgba(0,0,0,.06);
  --overlay-black-08: rgba(0,0,0,.08);
  --overlay-black-10: rgba(17,24,39,.10);
  --overlay-black-15: rgba(0,0,0,.15);
  --overlay-black-18: rgba(0,0,0,.18);
  --overlay-black-25: rgba(0,0,0,.25);

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */
  --fs-base: 0.925rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8rem;
  --fs-9px: 9px;
  --fs-8px: 8px;
  --fs-075: 0.75rem;
  --fs-085: 0.85rem;
  --fs-092: 0.92rem;
  --fs-095: 0.95rem;
  --fs-1: 1rem;
  --fs-105: 1.05rem;
  --fs-115: 1.15rem;
  --fs-135: 1.35rem;
  --fs-17: 1.7rem;
  --fs-21: 2.1rem;
  --fs-215: 2.15rem;

  /* ===========================================================
     TEXT COLORS
     =========================================================== */
  --text: var(--gray-800);
  --text-muted: var(--gray-500);
  --text-heading: var(--gray-900);
  --text-white: #ffffff;
  --text-black: #000000;
  --text-slate-700: #334155;
  --text-slate-600: #586a82;
  --text-slate-500: #64748b;

  /* ===========================================================
     FEEDBACK COLORS (Semantic)
     =========================================================== */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #dc2626;
  --info:    #3b82f6;

  /* ===========================================================
     BOOTSTRAP COLOR PALETTE
     =========================================================== */
  --bs-blue:   #0d6efd;
  --bs-green:  #198754;
  --bs-teal:   #20c997;
  --bs-purple: #6f42c1;
  --bs-orange: #fd7e14;
  --bs-cyan:   #0dcaf0;
  --bs-yellow: #ffc107;
  --bs-gray:   #6c757d;
  
  --bs-slate-900: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-600: #586a82;

  /* ===========================================================
     BOOTSTRAP THEME SYSTEM
     =========================================================== */
  --bs-primary:   var(--brand);
  --bs-secondary: var(--bs-gray);
  --bs-success:   var(--success);
  --bs-info:      #174ea6;
  --bs-warning:   var(--warning);
  --bs-danger:    var(--danger);
  --bs-light:     #f8f9fa;
  --bs-dark:      var(--gray-900);

  /* Text Emphasis Colors */
  --bs-primary-text-emphasis:   #0f1720;
  --bs-secondary-text-emphasis: #343a40;
  --bs-success-text-emphasis:   #0f5d2a;
  --bs-info-text-emphasis:      #164a9e;
  --bs-warning-text-emphasis:   #8a5a03;
  --bs-danger-text-emphasis:    #7a1212;
  --bs-dark-text-emphasis:      #0b0f16;

  /* Background Subtle Colors */
  --bs-primary-bg-subtle:   #e7ebf0;
  --bs-secondary-bg-subtle: #f1f3f5;
  --bs-success-bg-subtle:   #e8f6ee;
  --bs-info-bg-subtle:      #e9e9e9;
  --bs-warning-bg-subtle:   #e9e9e9;
  --bs-danger-bg-subtle:    #e9e9e9;
  --bs-light-bg-subtle:     #e9e9e9;
  --bs-dark-bg-subtle:      #e9ecef;

  /* Border Subtle Colors */
  --bs-primary-border-subtle:   #cfd6dd;
  --bs-secondary-border-subtle: #dee2e6;
  --bs-success-border-subtle:   #ccebd9;
  --bs-info-border-subtle:      #cfe3ff;
  --bs-warning-border-subtle:   #ffe3b5;
  --bs-danger-border-subtle:    #f7c9c9;
  --bs-light-border-subtle:     #f1f3f5;
  --bs-dark-border-subtle:      #cfd4da;

  /* ===========================================================
     ROLE BADGE COLORS (Alpha Variants)
     =========================================================== */
  --role-admin-bg: rgba(13,110,253,.10);
  --role-admin-border: rgba(13,110,253,.25);
  --role-admin-color: var(--bs-blue);
  
  --role-vorsitz-bg: rgba(25,135,84,.10);
  --role-vorsitz-border: rgba(25,135,84,.25);
  --role-vorsitz-color: var(--bs-green);
  
  --role-stellv-bg: rgba(32,201,151,.10);
  --role-stellv-border: rgba(32,201,151,.25);
  --role-stellv-color: #009669;
  
  --role-schrift-bg: rgba(111,66,193,.10);
  --role-schrift-border: rgba(111,66,193,.25);
  --role-schrift-color: var(--bs-purple);
  
  --role-schatz-bg: rgba(253,126,20,.10);
  --role-schatz-border: rgba(253,126,20,.25);
  --role-schatz-color: #ad4f00;
  
  --role-bau-bg: rgba(13,202,240,.10);
  --role-bau-border: rgba(13,202,240,.25);
  --role-bau-color: #007cbe;
  
  --role-bereich-bg: rgba(255,193,7,.10);
  --role-bereich-border: rgba(255,193,7,.35);
  --role-bereich-color: #664d03;
  
  --role-revision-bg: rgba(108,117,125,.10);
  --role-revision-border: rgba(108,117,125,.25);
  --role-revision-color: var(--bs-gray);
  
  --role-konflikt-bg: rgba(220,53,69,.10);
  --role-konflikt-border: rgba(220,53,69,.25);
  --role-konflikt-color: #dc3545;

  /* ===========================================================
     STATUS BADGE COLORS
     =========================================================== */
  --status-anfrage-bg: rgba(255,193,7,.10);
  --status-anfrage-border: rgba(255,193,7,.25);
  --status-anfrage-color: var(--bs-yellow);
  
  --status-genehmigt-bg: rgba(13,202,240,.10);
  --status-genehmigt-border: rgba(13,202,240,.25);
  --status-genehmigt-color: var(--bs-cyan);
  
  --status-warteliste-bg: rgba(108,117,125,.10);
  --status-warteliste-border: rgba(108,117,125,.25);
  --status-warteliste-color: var(--bs-gray);
  
  --status-aktiv-bg: rgba(25,135,84,.10);
  --status-aktiv-border: rgba(25,135,84,.25);
  --status-aktiv-color: var(--bs-green);
  
  --status-pausiert-bg: rgba(173,181,189,.10);
  --status-pausiert-border: rgba(173,181,189,.25);
  --status-pausiert-color: #adb5bd;
  
  --status-gekuendigt-bg: rgba(52,58,64,.10);
  --status-gekuendigt-border: rgba(52,58,64,.25);
  --status-gekuendigt-color: #343a40;
  
  --status-gesperrt-bg: rgba(220,53,69,.10);
  --status-gesperrt-border: rgba(220,53,69,.25);
  --status-gesperrt-color: #dc3545;

  /* ===========================================================
     FILTER CHIP COLORS
     =========================================================== */
  --chip-bg: rgba(13,110,253,.10);
  --chip-hover-bg: rgba(13,110,253,.18);
  --chip-border: rgba(13,110,253,.25);
  --chip-hover-border: rgba(13,110,253,.40);
  --chip-color: var(--bs-blue);
  
  --chip-reset-bg: rgba(108,117,125,.10);
  --chip-reset-hover-bg: rgba(108,117,125,.18);
  --chip-reset-border: rgba(108,117,125,.25);
  --chip-reset-hover-border: rgba(108,117,125,.40);
  --chip-reset-color: var(--bs-gray);
  
  --chip-active-shadow: rgba(13,110,253,.15);

  /* ===========================================================
     TABLE COLORS
     =========================================================== */
  --table-head-bg: var(--brand);
  --table-head-fg: var(--text-white);
  --table-hover-bg: rgba(37, 99, 235, 0.08);
  --table-border: var(--border-strong);

  /* ===========================================================
     KPI CARD COLORS
     =========================================================== */
  --kpi-accent: var(--info);
  --kpi-bg: var(--surface);
  --kpi-border: rgba(236,240,246,1);
  --kpi-icon-bg: rgba(13,110,253,.08);
  
  --kpi-orange-accent: #df8c00;
  --kpi-orange-icon-bg: rgba(245,158,11,.12);
  
  --kpi-blue-accent: #007cbe;
  --kpi-blue-icon-bg: rgba(14,165,233,.12);
  
  --kpi-green-accent: var(--bs-green);
  --kpi-green-icon-bg: rgba(22,163,74,.12);
  
  --kpi-violet-accent: var(--bs-purple);
  --kpi-violet-icon-bg: rgba(139,92,246,.12);
  
  --kpi-progress-bg: #eef2f7;

  /* ===========================================================
     DOT COLORS
     =========================================================== */
  --dot-gray: #94a3b8;
  --dot-blue: #38bdf8;
  --dot-green: #22c55e;
  --dot-red: #ef4444;

  /* ===========================================================
     CHIP & CARD COLORS
     =========================================================== */
  --chip-bg-subtle: rgba(230,234,242,1);
  --card-bg: var(--surface);
  --card-header-bg: var(--surface-soft);

  /* ===========================================================
     MODAL COLORS
     =========================================================== */
  --modal-header-bg: var(--brand);
  --modal-header-fg: var(--text-white);
  --modal-backdrop-filter: blur(2px);

  /* ===========================================================
     NAVBAR COLORS
     =========================================================== */
  --navbar-bg: var(--brand);
  --navbar-link-color: var(--overlay-white-70);
  --navbar-link-hover-bg: var(--overlay-white-08);
  --navbar-link-active-bg: var(--overlay-white-10);
  --navbar-toggler-border: var(--overlay-white-25);
  --navbar-toggler-shadow: var(--overlay-white-25);

  /* ===========================================================
     DROPDOWN COLORS
     =========================================================== */
  --dropdown-bg: var(--surface);
  --dropdown-border: var(--overlay-black-08);
  --dropdown-hover-bg: #e8edf3;
  --dropdown-active-bg: #d2e1f3;
  --dropdown-text: var(--text-slate-700);

  /* ===========================================================
     FORM COLORS
     =========================================================== */
  --form-bg: var(--surface);
  --form-border: var(--border-strong);
  --form-border-hover: #9da3aa;
  --form-border-focus: var(--brand-600);
  --form-placeholder: var(--gray-400);
  --form-disabled-bg: var(--gray-100);
  --form-label-color: var(--text-muted);
  
  --input-group-bg: var(--gray-100);
  --input-group-icon-color: var(--bs-gray);
  
  --form-switch-bg: #dee2e6;
  --form-switch-active-bg: var(--brand);
  
  --form-check-border: var(--border);
  --form-check-active-bg: var(--brand);

  /* ===========================================================
     BUTTON COLORS
     =========================================================== */
  --btn-primary-bg: var(--brand);
  --btn-primary-hover: var(--brand-600);
  --btn-primary-active: var(--brand-700);
  --btn-primary-shadow: var(--brand-shadow);
  
  --btn-secondary-bg: var(--gray-100);
  --btn-secondary-hover: var(--gray-200);
  --btn-secondary-border: var(--gray-300);
  --btn-secondary-color: var(--gray-700);
  --btn-secondary-hover-color: var(--gray-900);

  /* ===========================================================
     VERSION BADGE COLORS
     =========================================================== */
  --version-bg: var(--overlay-black-06);
  --version-border: var(--overlay-black-10);
  --version-color: var(--text-slate-700);
  --version-shadow: var(--shadow-version);
  
  --version-dark-bg: rgba(28,41,56,.55);
  --version-dark-border: var(--overlay-white-12);
  --version-dark-color: var(--overlay-white-80);
  --version-dark-shadow: var(--shadow-dark);

  /* ===========================================================
     ALERT COLORS (bereits in Bootstrap-System definiert)
     =========================================================== */
  --alert-primary-bg: var(--bs-primary-bg-subtle);
  --alert-primary-border: var(--bs-primary-border-subtle);
  --alert-primary-color: var(--bs-primary-text-emphasis);

  /* ===========================================================
     LINK HOVER COLORS
     =========================================================== */
  --link-secondary-hover: #495057;
  --link-dark-hover: var(--text-black);

  /* ===========================================================
     SPECIAL COLORS
     =========================================================== */
  --hero-bg: var(--brand);
  --tooltip-bg: var(--gray-800);
  --scrollbar-thumb: var(--gray-300);
  --scrollbar-thumb-hover: var(--gray-400);

  /* ===========================================================
     BORDER RADII
     =========================================================== */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 6px;
  --r-btn: 12px;
  --r-modal: 14px;
  --r-card: var(--r-md);
  --r-badge: 0.5rem;
  --r-pill: 50rem;
  --r-round: 50%;
  --r-switch: 2em;
  --r-dropdown: 0.5rem;
  --r-tab: 0.5rem;

  /* ===========================================================
     FOCUS RING
     =========================================================== */
  --focus-ring: var(--brand-bg-focus);
  --focus-shadow-size: 0.25rem;

  /* ===========================================================
     TRANSITIONS
     =========================================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ===========================================================
     SPACING (falls benötigt)
     =========================================================== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* ===========================================================
     Z-INDEX LAYERS
     =========================================================== */
  --z-navbar: 1030;
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-version: 2147483647;
}

/* ===========================================================
   BASE
   =========================================================== */
body{
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: var(--fs-base);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================================
   TYPOGRAPHY, HEADINGS, TEXT
   =========================================================== */
h1, h2, h3, h4, h5, h6{
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--spacing-sm);
}

h1{ font-size: var(--fs-21); letter-spacing: -0.02em; }
h2{ font-size: var(--fs-17); }
h3{ font-size: var(--fs-135); }
h4{ font-size: var(--fs-115); }
h5{ font-size: var(--fs-1); font-weight: 600; }
h6{ font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }

.lead{
  font-size: var(--fs-105);
  font-weight: 500;
  color: var(--gray-600);
}

.subtitle{
  font-size: var(--fs-095);
  color: var(--text-muted);
}

small,
.small,
.form-text,
.text-small{
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ===========================================================
   LINKS, LISTS, DIVIDER
   =========================================================== */
a{
  color: var(--brand);
  text-decoration: none;
}
a:hover{
  color: var(--brand-600);
  text-decoration: underline;
}

ul,
ol{
  padding-left: 1.2rem;
  margin-bottom: var(--spacing-md);
}
li{ margin-bottom: 0.35rem; }

hr,
.ui-modern hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--spacing-lg) 0;
}

.ui-modern hr{
  opacity: 0.5;
  border-top: 1px dashed var(--border);
  margin: 0.75rem 0 var(--spacing-md);
}

/* ===========================================================
   TEXT UTILITIES
   =========================================================== */
.text-muted{ color: var(--text-muted) !important; }
.text-strong{ font-weight: 600; }

.text-body{ color: var(--bs-body-color) !important; }
.text-body-secondary{ color: var(--text-muted) !important; }
.text-body-tertiary{ color: var(--gray-500) !important; }

.text-primary{color:var(--bs-primary)!important;}
.text-secondary{color:var(--bs-secondary)!important;}
.text-success{color:var(--bs-success)!important;}
.text-info{color:var(--bs-info)!important;}
.text-warning{color:var(--bs-warning)!important;}
.text-danger{color:var(--bs-danger)!important;}
.text-light{color:var(--bs-light)!important;}
.text-dark{color:var(--bs-dark)!important;}

.text-primary-emphasis{color:var(--bs-primary-text-emphasis)!important;}
.text-secondary-emphasis{color:var(--bs-secondary-text-emphasis)!important;}
.text-success-emphasis{color:var(--bs-success-text-emphasis)!important;}
.text-info-emphasis{color:var(--bs-info-text-emphasis)!important;}
.text-warning-emphasis{color:var(--bs-warning-text-emphasis)!important;}
.text-danger-emphasis{color:var(--bs-danger-text-emphasis)!important;}
.text-dark-emphasis{color:var(--bs-dark-text-emphasis)!important;}

/* ===========================================================
   FILTER CHIPS
   Verwendung: Filterkontrolle in Listen/Tabellen
   =========================================================== */
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.25rem 0.6rem;
  border-radius:var(--r-pill);
  text-decoration:none;
  font-size:var(--fs-085);
  background: var(--chip-bg);
  color: var(--chip-color);
  border: 1px solid var(--chip-border);
}
.filter-chip:hover{
  background: var(--chip-hover-bg);
  color: var(--brand-600);
  border-color: var(--chip-hover-border);
}

.filter-chip-reset{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.25rem 0.6rem;
  border-radius:var(--r-pill);
  text-decoration:none;
  font-size:var(--fs-085);
  background: var(--chip-reset-bg);
  color: var(--chip-reset-color);
  border: 1px solid var(--chip-reset-border);
}
.filter-chip-reset:hover{
  background: var(--chip-reset-hover-bg);
  color: var(--gray-700);
  border-color: var(--chip-reset-hover-border);
}

.is-active{
  border-color: var(--bs-blue) !important;
  box-shadow: 0 0 0 0.2rem var(--chip-active-shadow) !important;
}

/* ===========================================================
   ROLE CHIPS
   Verwendung: Admin-Rollen-Anzeige (Vorsitzender, Schatzmeister, etc.)
   =========================================================== */
.role-administrator       { background: var(--role-admin-bg); color: var(--role-admin-color); border: 1px solid var(--role-admin-border); }
.role-vorsitzender        { background: var(--role-vorsitz-bg); color: var(--role-vorsitz-color); border: 1px solid var(--role-vorsitz-border); }
.role-stellvertretung     { background: var(--role-stellv-bg); color: var(--role-stellv-color); border: 1px solid var(--role-stellv-border); }
.role-schriftfuehrer      { background: var(--role-schrift-bg); color: var(--role-schrift-color); border: 1px solid var(--role-schrift-border); }
.role-schatzmeister       { background: var(--role-schatz-bg); color: var(--role-schatz-color); border: 1px solid var(--role-schatz-border); }
.role-bauverantwortliche  { background: var(--role-bau-bg); color: var(--role-bau-color); border: 1px solid var(--role-bau-border); }
.role-bereichsleiter      { background: var(--role-bereich-bg); color: var(--role-bereich-color); border: 1px solid var(--role-bereich-border); }
.role-revisionskommission { background: var(--role-revision-bg); color: var(--role-revision-color); border: 1px solid var(--role-revision-border); }
.role-konfliktkommission  { background: var(--role-konflikt-bg); color: var(--role-konflikt-color); border: 1px solid var(--role-konflikt-border); }

/* ===========================================================
   KPI CARDS
   Verwendung: Dashboard-Statistikkarten mit Zahlen
   =========================================================== */
.kpi-card{
  --kpi-bg: var(--kpi-bg);
  --kpi-accent: var(--kpi-accent);

  border: 1px solid var(--kpi-border);
  border-radius: 18px;
  background: var(--kpi-bg);
  box-shadow: 0 1px 3px var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  height: 100%;
}

.kpi-icon{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--kpi-icon-bg);
  margin-right: 0.85rem;
  color: var(--kpi-accent);
}

.kpi-number{
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: var(--fs-215);
  line-height: 1;
  color: var(--gray-900);
  margin: 0;
}

.kpi-sub{
  font-weight: 700;
  font-size: var(--fs-1);
  color: var(--text-slate-500);
  margin-left: 0.25rem;
}

.kpi-label{
  margin: 0;
  color: var(--text-slate-600);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* KPI Varianten */
.kpi-orange{ --kpi-accent: var(--kpi-orange-accent); }
.kpi-orange .kpi-icon{ background: var(--kpi-orange-icon-bg); color: var(--kpi-orange-accent); }

.kpi-blue{ --kpi-accent: var(--kpi-blue-accent); }
.kpi-blue .kpi-icon{ background: var(--kpi-blue-icon-bg); color: var(--kpi-blue-accent); }

.kpi-green{ --kpi-accent: var(--kpi-green-accent); }
.kpi-green .kpi-icon{ background: var(--kpi-green-icon-bg); color: var(--kpi-green-accent); }

.kpi-violet{ --kpi-accent: var(--kpi-violet-accent); }
.kpi-violet .kpi-icon{ background: var(--kpi-violet-icon-bg); color: var(--kpi-violet-accent); }

/* KPI Mini Progress */
.kpi-progress{
  height: 6px;
  background: var(--kpi-progress-bg);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.kpi-progress > span{
  display:block;
  height:100%;
  background: linear-gradient(90deg, #60a5fa, #22c55e 60%, #f59e0b);
}

/* ===========================================================
   CHIPS, DOTS
   Verwendung: Kleine Info-Pills und Status-Indikatoren
   =========================================================== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background: var(--surface-soft);
  border: 1px solid var(--chip-bg-subtle);
  color: var(--text-slate-700);
  font-weight: 600;
  font-size: var(--fs-092);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.6rem;
}
.dot{ width: 0.55rem; height: 0.55rem; border-radius: var(--r-round); }
.dot-gray{ background: var(--dot-gray); }
.dot-blue{ background: var(--dot-blue); }
.dot-green{ background: var(--dot-green); }
.dot-red{ background: var(--dot-red); }

/* ===========================================================
   STATUS BADGES
   Verwendung: Mitglieder-Status (Aktiv, Warteliste, etc.)
   =========================================================== */
.badge{ 
  text-transform: uppercase;
  display:inline-block;
  padding: 0.35em 0.6em;
  border-radius: var(--r-badge);
  font-weight:600;
}

.badge-status{
  display:inline-block;
  padding: 0.35em 0.65em;
  font-size: var(--fs-085);
  font-weight: 500;
  border-radius: var(--r-pill);
}

.status-anfrage_offen{
  background: var(--status-anfrage-bg);
  color: var(--status-anfrage-color);
  border: 1px solid var(--status-anfrage-border);
}

.status-anfrage_genehmigt{
  background: var(--status-genehmigt-bg);
  color: var(--status-genehmigt-color);
  border: 1px solid var(--status-genehmigt-border);
}

.status-warteliste{
  background: var(--status-warteliste-bg);
  color: var(--status-warteliste-color);
  border: 1px solid var(--status-warteliste-border);
}

.badge.active,
.status-aktiv{
  background: var(--status-aktiv-bg);
  color: var(--status-aktiv-color);
  border: 1px solid var(--status-aktiv-border);
}

.status-pausiert{
  background: var(--status-pausiert-bg);
  color: var(--status-pausiert-color);
  border: 1px solid var(--status-pausiert-border);
}

.status-gekuendigt{
  background: var(--status-gekuendigt-bg);
  color: var(--status-gekuendigt-color);
  border: 1px solid var(--status-gekuendigt-border);
}

.status-gesperrt{
  background: var(--status-gesperrt-bg);
  color: var(--status-gesperrt-color);
  border: 1px solid var(--status-gesperrt-border);
}

/* Bootstrap Badge Farben */
.badge.bg-primary{background:var(--bs-primary)!important;color:var(--text-white)!important;}
.badge.bg-secondary{background:var(--bs-secondary)!important;color:var(--text-white)!important;}
.badge.bg-success{background:var(--bs-success)!important;color:var(--text-white)!important;}
.badge.bg-info{background:var(--bs-info)!important;color:var(--text-white)!important;}
.badge.bg-warning{background:var(--bs-warning)!important;color:var(--text-black)!important;}
.badge.bg-danger{background:var(--bs-danger)!important;color:var(--text-white)!important;}
.badge.bg-light{background:var(--bs-light)!important;color:var(--text-black)!important;}
.badge.bg-dark{background:var(--bs-dark)!important;color:var(--text-white)!important;}

/* ===========================================================
   UI MODERN, CARDS
   Verwendung: Haupt-Container für Inhalte
   =========================================================== */
.ui-modern .card{
  border: 0;
  border-radius: var(--r-card);
  box-shadow: 0 6px 18px var(--shadow);
  background: var(--card-bg);
}

.hero{
  background: var(--hero-bg);
  border-radius: var(--r-md);
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero span,
.hero li,
.hero a {
  color: var(--surface);
}

.hero small,
.hero .small {
  color: var(--text-muted);
}

.ui-modern .card-header{
  border: 0;
  background: var(--card-header-bg);
  color: var(--text-heading);
  font-weight: 600;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

/* ===========================================================
   FORMS - EINHEITLICHES DESIGN
   Verwendung: Alle Formulare und Input-Felder
   =========================================================== */

/* Labels */
.ui-modern .form-label,
.form-label,
label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--form-label-color);
  margin-bottom: 0.4rem;
}

/* Input-Felder */
.ui-modern .form-control,
.ui-modern .form-select,
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--form-bg);
  background-clip: padding-box;
  border: 1px solid var(--form-border);
  border-radius: var(--r-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

/* Placeholder */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
  font-style: italic;
}

/* Focus */
.ui-modern .form-control:focus,
.ui-modern .form-select:focus,
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  color: var(--text);
  background-color: var(--form-bg);
  border-color: var(--form-border-focus);
  outline: 0;
  box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-ring);
}

/* Hover */
.form-control:hover,
.form-select:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: var(--form-border-hover);
}

/* Disabled */
.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--form-disabled-bg);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Textarea */
.ui-modern textarea.form-control,
textarea.form-control,
textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select Dropdown-Pfeil */
.form-select,
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
}

/* Checkboxen & Radio */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: var(--form-bg);
  border: 1px solid var(--form-check-border);
  border-radius: 0.25em;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

input[type="radio"] {
  border-radius: var(--r-round);
}

.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--form-check-active-bg);
  border-color: var(--form-check-active-bg);
}

.form-check-input:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-ring);
}

/* Input Groups */
.input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.input-group-text {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.65rem 0.85rem;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  background-color: var(--input-group-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--r-md);
  border-right: 0;
}

.input-group-text i{ 
  color: var(--input-group-icon-color); 
}

.input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.input-group > .input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Hilfetext */
small.text-muted {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Invalid/Error States */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
select.is-invalid {
  border-color: var(--danger);
}

.form-control.is-invalid:focus,
input.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 var(--focus-shadow-size) rgba(220, 38, 38, 0.15);
}

.invalid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--danger);
}

/* Valid States */
.form-control.is-valid,
.form-select.is-valid,
input.is-valid,
select.is-valid {
  border-color: var(--success);
}

.form-control.is-valid:focus,
input.is-valid:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 var(--focus-shadow-size) rgba(22, 163, 74, 0.15);
}

.valid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--success);
}

/* ===========================================================
   FORM SWITCH
   Verwendung: Toggle-Switches in Formularen
   =========================================================== */
.form-switch {
  padding-left: 2.5em;
}

.form-switch .form-check-input {
  width: 2em;
  height: 1em;
  margin-left: -2.5em;
  background-color: var(--form-switch-bg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: var(--r-switch);
  border: 1px solid var(--border);
  transition: background-position var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

/* Entfernt Custom Thumb */
.form-switch .form-check-input::before,
.form-switch .form-check-input::after {
  content: none !important;
}

/* Checked Zustand - BLAU */
.form-check-input:checked,
.form-switch .form-check-input:checked {
  background-position: right center;
  background-color: var(--form-switch-active-bg) !important;
  border-color: var(--form-switch-active-bg) !important;
}

/* Fokus */
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 var(--focus-shadow-size) var(--focus-ring);
  outline: 0;
}

/* Disabled */
.form-switch .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===========================================================
   MODALS
   Verwendung: Popup-Dialoge
   =========================================================== */
.modal-content{
  border: 0;
  border-radius: var(--r-modal);
  overflow: hidden;
}

.modal-header{
  background: var(--modal-header-bg) !important;
  color: var(--modal-header-fg);
  border-bottom: none;
}

.modal-header .btn-close{
  filter: invert(1);
  opacity: 0.85;
  transition: opacity var(--transition-normal);
}
.modal-header .btn-close:hover{ opacity: 1; }

.modal-header .modal-title{
  font-weight: 600;
  color: var(--modal-header-fg);
}
.modal-header .modal-title i{
  opacity: 0.85;
  margin-right: 0.4rem;
}

/* Scrollbares Modal */
.modal.modal-lg .modal-content{
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal.modal-lg .modal-body{
  overflow-y: auto;
  flex: 1;
  padding-right: var(--spacing-md);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.modal.modal-lg .modal-body::-webkit-scrollbar{ width: 8px; }
.modal.modal-lg .modal-body::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: var(--r-sm);
}
.modal.modal-lg .modal-body::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}

/* ===========================================================
   NAV TABS, DARK STYLE
   Verwendung: Tab-Navigation in Modulen
   =========================================================== */
.ui-modern .nav-tabs{
  background: var(--brand) !important;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  padding: 0.25rem var(--spacing-sm) 0 var(--spacing-sm);
  margin: 0;
  list-style: none;
}

.ui-modern .nav-tabs .nav-item{ margin: 0; padding: 0; }

.ui-modern .nav-tabs .nav-link{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.95rem;
  margin: 0;
  line-height: 1;
  border: none !important;
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  background: transparent !important;
  color: var(--overlay-white-75) !important;
  text-decoration: none;
  transition: color var(--transition-normal), background-color var(--transition-normal);
}

.ui-modern .nav-tabs .nav-link:hover,
.ui-modern .nav-tabs .nav-link:focus{
  background: var(--overlay-white-08) !important;
  color: var(--text-white) !important;
  text-decoration: none;
}

.ui-modern .nav-tabs .nav-link.active{
  height: 40px;
  padding: 0 0.95rem;
  margin: 0;
  border: none !important;
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  background: var(--surface) !important;
  color: var(--bs-slate-900) !important;
}

.ui-modern .tab-content{
  background: var(--surface);
  padding: var(--spacing-md);
  border-top: 0;
  margin: 0;
}

/* ===========================================================
   DROPDOWN
   Verwendung: Dropdown-Menüs in Navbar und Formularen
   =========================================================== */
.ui-modern .dropdown-menu,
.app-header .dropdown-menu{
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--r-dropdown);
  box-shadow: 0 6px 18px var(--shadow-dropdown);
  margin-top: 0.4rem;
  padding: 0.3rem 0;
}

.ui-modern .dropdown-item,
.app-header .dropdown-item{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  color: var(--dropdown-text);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ui-modern .dropdown-item:hover,
.ui-modern .dropdown-item:focus,
.app-header .dropdown-item:hover{
  background: var(--dropdown-hover-bg);
  color: var(--text-black);
}

.ui-modern .dropdown-menu .nav-link{
  color: var(--dropdown-text) !important;
  background: transparent !important;
}
.ui-modern .dropdown-menu .nav-link:hover,
.ui-modern .dropdown-menu .nav-link:focus{
  background: var(--dropdown-hover-bg) !important;
  color: var(--text-black) !important;
}

.dropdown-item.active, 
.dropdown-item:active,
.ui-modern .dropdown-item:active{
  background: var(--dropdown-active-bg) !important;
  color: var(--text-black) !important;
}

/* ===========================================================
   TABLES
   Verwendung: Daten-Tabellen für Listen
   =========================================================== */
.table-modern{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 var(--spacing-sm);
  font-size: var(--fs-base);
}
.table-modern thead{ border-radius: var(--r-md); }
.table-modern thead th{
  background: var(--table-head-bg);
  color: var(--table-head-fg);
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  padding: 0.75rem var(--spacing-md);
  white-space: nowrap;
}

.table-modern tbody td{
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  vertical-align: middle;
  border: 1px solid var(--table-border);
  border-left: none;
  border-right: none;
  padding: 0.75rem var(--spacing-md);
  transition: background var(--transition-normal);
}

.table-modern tbody tr td:first-child{
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  border-left: 1px solid var(--table-border);
}
.table-modern tbody tr td:last-child{
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  border-right: 1px solid var(--table-border);
}
.table-modern tbody tr:hover td{
  background: var(--table-hover-bg);
  cursor: pointer;
}

.table-modern th.sortable{
  cursor: pointer;
  user-select: none;
}
.table-modern th.sortable:hover{ color: var(--brand); }

/* ===========================================================
   TOOLTIPS
   Verwendung: Hover-Tooltips
   =========================================================== */
.tooltip-inner{
  font-size: var(--fs-xs);
  background-color: var(--tooltip-bg);
  color: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--spacing-sm) 0.75rem;
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{
  border-top-color: var(--tooltip-bg);
}

/* ===========================================================
   BUTTONS
   Verwendung: Alle Buttons und Aktionen
   =========================================================== */
.btn{ 
  border-radius: var(--r-btn); 
  font-weight: 600; 
}

.btn-primary{
  background: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-bg) !important;
  --bs-btn-color: var(--text-white)!important;

  --bs-btn-hover-bg: var(--btn-primary-hover)!important;
  --bs-btn-hover-border-color: var(--btn-primary-hover)!important;
  --bs-btn-hover-color: var(--text-white)!important;

  --bs-btn-active-bg: var(--btn-primary-active)!important;
  --bs-btn-active-border-color: var(--btn-primary-active)!important;

  box-shadow: 0 8px 18px var(--btn-primary-shadow)!important;
}
.btn-primary:hover{ filter: brightness(0.95); }
.btn-primary i{ opacity: 0.85; }

.btn-outline-secondary{
  --bs-btn-color: var(--btn-secondary-color);
  --bs-btn-bg: var(--btn-secondary-bg);
  --bs-btn-border-color: var(--btn-secondary-border);

  --bs-btn-hover-bg: var(--btn-secondary-hover);
  --bs-btn-hover-color: var(--btn-secondary-hover-color);
  --bs-btn-hover-border-color: var(--btn-secondary-border);
}

/* ===========================================================
   NAVBAR, DARK HEADER
   Verwendung: Haupt-Navigation
   =========================================================== */
.app-header{
  background-color: var(--navbar-bg);
  border-bottom: 1px solid var(--border-navbar);
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
}

.app-header .navbar-brand{
  color: var(--text-white);
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.app-header .navbar-brand i{ font-size: var(--fs-1); opacity: 0.9; }
.app-header .navbar-brand:hover{
  color: var(--text-white);
  opacity: 0.85;
  text-decoration: none;
}

.app-header .navbar-nav .nav-link{
  color: var(--navbar-link-color);
  margin: 3px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.4rem;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.app-header .navbar-nav .nav-link i{ font-size: 0.95rem; opacity: 0.85; }

.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus{
  color: var(--text-white);
  background: var(--navbar-link-hover-bg);
  text-decoration: none;
}

.app-header .navbar-nav .nav-link.active{
  color: var(--text-white);
  background: var(--navbar-link-active-bg);
  border-radius: 0.4rem;
}

.app-header .dropdown-toggle::after{
  opacity: 0.8;
  filter: brightness(1.1);
}

/* Navbar Kleinteile */
.navbar .nav-link small{
  text-align: right;
  font-size: var(--fs-075);
  color: var(--bs-gray) !important;
}
.navbar .nav-link i{ font-size: 0.8rem; }

@media (max-width: 991.98px){
  .app-header .navbar-collapse{
    background: var(--brand);
    border-top: 1px solid var(--border-navbar);
    padding: var(--spacing-sm);
  }
  .app-header .dropdown-menu{ background: var(--surface); }
}

.app-header .navbar-toggler{
  border-color: var(--navbar-toggler-border);
  color: var(--text-white);
}
.app-header .navbar-toggler:focus{
  box-shadow: 0 0 0 0.15rem var(--navbar-toggler-shadow);
}

/* ===========================================================
   VERSION BADGE, STICKY
   Verwendung: Versionsanzeige unten links
   =========================================================== */
.version-sticky{
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: var(--z-version);
  padding: 4px 6px;
  font-size: var(--fs-9px);
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: var(--r-xs);
  cursor: pointer;
  user-select: none;
  backdrop-filter: var(--modal-backdrop-filter);
  -webkit-backdrop-filter: var(--modal-backdrop-filter);

  color: var(--version-color);
  background: var(--version-bg);
  border: 1px solid var(--version-border);
  box-shadow: 0 4px 16px var(--version-shadow);
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}
.version-sticky:hover{ opacity: 0.95; transform: translateY(-1px); }
.version-sticky:active{ transform: translateY(0); }

body.dark .version-sticky,
[data-theme="dark"] .version-sticky{
  color: var(--version-dark-color);
  background: var(--version-dark-bg);
  border: 1px solid var(--version-dark-border);
  box-shadow: 0 6px 22px var(--version-dark-shadow);
}

@media (max-width:576px){
  .version-sticky{ left: 6px; bottom: 6px; font-size: var(--fs-8px); padding: 3px 5px; }
}
@media print{
  .version-sticky{ display: none !important; }
}

/* ===========================================================
   BACKGROUND UTILITIES
   Verwendung: Bootstrap-kompatible Hintergrundfarben
   =========================================================== */
.bg-primary{background-color:var(--bs-primary)!important;color:var(--text-white)!important;}
.bg-secondary{background-color:var(--bs-secondary)!important;color:var(--text-white)!important;}
.bg-success{background-color:var(--bs-success)!important;color:var(--text-white)!important;}
.bg-info{background-color:var(--bs-info)!important;color:var(--text-white)!important;}
.bg-warning{background-color:var(--bs-warning)!important;color:var(--text-black)!important;}
.bg-danger{background-color:var(--bs-danger)!important;color:var(--text-white)!important;}
.bg-light{background-color:var(--bs-light)!important;color:var(--text-black)!important;}
.bg-dark{background-color:var(--bs-dark)!important;color:var(--text-white)!important;}

.bg-primary-subtle{background-color:var(--bs-primary-bg-subtle)!important;}
.bg-secondary-subtle{background-color:var(--bs-secondary-bg-subtle)!important;}
.bg-success-subtle{background-color:var(--bs-success-bg-subtle)!important;}
.bg-info-subtle{background-color:var(--bs-info-bg-subtle)!important;}
.bg-warning-subtle{background-color:var(--bs-warning-bg-subtle)!important;}
.bg-danger-subtle{background-color:var(--bs-danger-bg-subtle)!important;}
.bg-light-subtle{background-color:var(--bs-light-bg-subtle)!important;}
.bg-dark-subtle{background-color:var(--bs-dark-bg-subtle)!important;}

.bg-body{background-color:var(--bs-body-bg)!important;}
.bg-body-secondary{background-color:var(--bs-secondary-bg)!important;}
.bg-body-tertiary{background-color:var(--bs-tertiary-bg)!important;}

/* ===========================================================
   BORDER UTILITIES
   Verwendung: Bootstrap-kompatible Rahmenfarben
   =========================================================== */
.border-primary{border-color:var(--bs-primary)!important;}
.border-secondary{border-color:var(--bs-secondary)!important;}
.border-success{border-color:var(--bs-success)!important;}
.border-info{border-color:var(--bs-info)!important;}
.border-warning{border-color:var(--bs-warning)!important;}
.border-danger{border-color:var(--bs-danger)!important;}
.border-light{border-color:var(--bs-light)!important;}
.border-dark{border-color:var(--bs-dark)!important;}

.border-primary-subtle{border-color:var(--bs-primary-border-subtle)!important;}
.border-secondary-subtle{border-color:var(--bs-secondary-border-subtle)!important;}
.border-success-subtle{border-color:var(--bs-success-border-subtle)!important;}
.border-info-subtle{border-color:var(--bs-info-border-subtle)!important;}
.border-warning-subtle{border-color:var(--bs-warning-border-subtle)!important;}
.border-danger-subtle{border-color:var(--bs-danger-border-subtle)!important;}
.border-light-subtle{border-color:var(--bs-light-border-subtle)!important;}
.border-dark-subtle{border-color:var(--bs-dark-border-subtle)!important;}

/* ===========================================================
   LINK UTILITIES
   Verwendung: Farbige Links mit Hover-Effekt
   =========================================================== */
.link-primary{color:var(--bs-primary)!important;}
.link-primary:hover{color:var(--bs-primary-text-emphasis)!important;}
.link-secondary{color:var(--bs-secondary)!important;}
.link-secondary:hover{color:var(--link-secondary-hover)!important;}
.link-success{color:var(--bs-success)!important;}
.link-success:hover{color:var(--bs-success-text-emphasis)!important;}
.link-info{color:var(--bs-info)!important;}
.link-info:hover{color:var(--bs-info-text-emphasis)!important;}
.link-warning{color:var(--bs-warning)!important;}
.link-warning:hover{color:var(--bs-warning-text-emphasis)!important;}
.link-danger{color:var(--bs-danger)!important;}
.link-danger:hover{color:var(--bs-danger-text-emphasis)!important;}
.link-dark{color:var(--bs-dark)!important;}
.link-dark:hover{color:var(--link-dark-hover)!important;}

/* ===========================================================
   ALERTS
   Verwendung: Info-Boxen und Meldungen
   =========================================================== */
.alert{
  position: relative;
  padding: 0.75rem var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--r-dropdown);
}
.alert-primary{   color:var(--bs-primary-text-emphasis);   background:var(--bs-primary-bg-subtle);   border-color:var(--bs-primary-border-subtle); }
.alert-secondary{ color:var(--bs-secondary-text-emphasis); background:var(--bs-secondary-bg-subtle); border-color:var(--bs-secondary-border-subtle); }
.alert-success{   color:var(--bs-success-text-emphasis);   background:var(--bs-success-bg-subtle);   border-color:var(--bs-success-border-subtle); }
.alert-info{      color:var(--bs-info-text-emphasis);      background:var(--bs-info-bg-subtle);      border-color:var(--bs-info-border-subtle); }
.alert-warning{   color:var(--bs-warning-text-emphasis);   background:var(--bs-warning-bg-subtle);   border-color:var(--bs-warning-border-subtle); }
.alert-danger{    color:var(--bs-danger-text-emphasis);    background:var(--bs-danger-bg-subtle);    border-color:var(--bs-danger-border-subtle); }
.alert-light{     color:var(--link-secondary-hover);       background:var(--bs-light-bg-subtle);     border-color:var(--bs-light-border-subtle); }
.alert-dark{      color:var(--bs-dark-text-emphasis);      background:var(--bs-dark-bg-subtle);      border-color:var(--bs-dark-border-subtle); }


/* ===========================================================
   
   CSS KLASSEN - DOKUMENTATION
   
   Diese Dokumentation beschreibt alle verfügbaren CSS-Klassen
   im Gartenkolonie Verwaltungssystem.
   
   =========================================================== */

/*

╔══════════════════════════════════════════════════════════════════════════╗
║                          LAYOUT & CONTAINER                              ║
╚══════════════════════════════════════════════════════════════════════════╝

.ui-modern              - Moderne UI-Wrapper für Cards, Forms, Tabs
.card                   - Bootstrap Card Container
.card-header            - Card Header Bereich
.hero                   - Hero-Section mit Brand-Hintergrund


╔══════════════════════════════════════════════════════════════════════════╗
║                          TYPOGRAPHY                                      ║
╚══════════════════════════════════════════════════════════════════════════╝

h1 - h6                 - Überschriften in verschiedenen Größen
.lead                   - Größerer Einleitungstext
.subtitle               - Untertitel, gedämpfte Farbe
.small, small           - Kleinerer Text
.text-muted             - Gedämpfte Textfarbe (grau)
.text-strong            - Fettgedruckter Text
.text-small             - Kleine Schriftgröße

TEXT COLOR UTILITIES:
.text-body              - Standard-Körperfarbe
.text-body-secondary    - Sekundäre Körperfarbe
.text-body-tertiary     - Tertiäre Körperfarbe
.text-primary           - Primärfarbe (Brand)
.text-secondary         - Sekundärfarbe (Grau)
.text-success           - Erfolgsfarbe (Grün)
.text-info              - Info-Farbe (Blau)
.text-warning           - Warnfarbe (Gelb)
.text-danger            - Gefahrenfarbe (Rot)
.text-light             - Helle Farbe
.text-dark              - Dunkle Farbe

.text-{color}-emphasis  - Betonte Textfarbe für jede Farbe


╔══════════════════════════════════════════════════════════════════════════╗
║                          BADGES & CHIPS                                  ║
╚══════════════════════════════════════════════════════════════════════════╝

STATUS BADGES (Mitgliederstatus):
.badge                  - Basis-Badge-Klasse
.badge-status           - Status-Badge mit Pill-Form
.status-anfrage_offen   - Status: Anfrage Offen (gelb)
.status-anfrage_genehmigt - Status: Anfrage Genehmigt (cyan)
.status-warteliste      - Status: Warteliste (grau)
.status-aktiv           - Status: Aktiv (grün)
.badge.active           - Aktiver Status (grün)
.status-pausiert        - Status: Pausiert (hellgrau)
.status-gekuendigt      - Status: Gekündigt (dunkelgrau)
.status-gesperrt        - Status: Gesperrt (rot)

ROLE BADGES (Admin-Rollen):
.role-administrator     - Administrator (blau)
.role-vorsitzender      - Vorsitzender (grün)
.role-stellvertretung   - Stellvertretung (türkis)
.role-schriftfuehrer    - Schriftführer (lila)
.role-schatzmeister     - Schatzmeister (orange)
.role-bauverantwortliche - Bauverantwortliche (cyan)
.role-bereichsleiter    - Bereichsleiter (gelb)
.role-revisionskommission - Revisionskommission (grau)
.role-konfliktkommission - Konfliktkommission (rot)

BOOTSTRAP BADGES:
.badge.bg-primary       - Primär-Badge
.badge.bg-secondary     - Sekundär-Badge
.badge.bg-success       - Erfolgs-Badge
.badge.bg-info          - Info-Badge
.badge.bg-warning       - Warn-Badge
.badge.bg-danger        - Gefahren-Badge
.badge.bg-light         - Helles Badge
.badge.bg-dark          - Dunkles Badge

FILTER CHIPS:
.filter-chip            - Filter-Chip (blau)
.filter-chip-reset      - Reset-Filter-Chip (grau)
.is-active              - Aktiver Chip mit Shadow

GENERAL CHIPS:
.chip                   - Info-Pill (hellgrau)

DOTS:
.dot                    - Basis-Dot (runder Indikator)
.dot-gray               - Grauer Dot
.dot-blue               - Blauer Dot
.dot-green              - Grüner Dot
.dot-red                - Roter Dot


╔══════════════════════════════════════════════════════════════════════════╗
║                          KPI CARDS                                       ║
╚══════════════════════════════════════════════════════════════════════════╝

.kpi-card               - KPI Card Container
.kpi-icon               - Icon-Container innerhalb KPI
.kpi-number             - Große Zahl in KPI
.kpi-sub                - Sub-Text neben Zahl
.kpi-label              - Label unter Zahl
.kpi-progress           - Progress Bar in KPI
.kpi-progress > span    - Progress Bar Fill

KPI VARIANTEN:
.kpi-orange             - Orange-akzentuierte KPI
.kpi-blue               - Blau-akzentuierte KPI
.kpi-green              - Grün-akzentuierte KPI
.kpi-violet             - Violett-akzentuierte KPI


╔══════════════════════════════════════════════════════════════════════════╗
║                          FORMS & INPUTS                                  ║
╚══════════════════════════════════════════════════════════════════════════╝

LABELS:
.form-label             - Formular-Label
label                   - Standard HTML Label

INPUT FIELDS:
.form-control           - Standard Input-Feld
.form-select            - Select Dropdown
input[type="text"]      - Text Input
input[type="email"]     - Email Input
input[type="password"]  - Password Input
input[type="number"]    - Number Input
input[type="date"]      - Date Input
input[type="tel"]       - Telefon Input
select                  - Select Element
textarea                - Textarea Element

INPUT STATES:
.form-control:focus     - Fokussiertes Feld
.form-control:hover     - Hover-Zustand
.form-control:disabled  - Deaktiviertes Feld
.form-control.is-invalid - Ungültiges Feld (rot)
.form-control.is-valid  - Gültiges Feld (grün)

CHECKBOXES & RADIO:
.form-check-input       - Checkbox/Radio Input
input[type="checkbox"]  - Checkbox
input[type="radio"]     - Radio Button

FORM SWITCH:
.form-switch            - Switch Container
.form-switch .form-check-input - Switch Toggle

INPUT GROUPS:
.input-group            - Input Group Container
.input-group-text       - Prefix/Suffix für Input
.input-group > .form-control - Input in Group

FEEDBACK:
.invalid-feedback       - Fehler-Feedback (rot)
.valid-feedback         - Erfolgs-Feedback (grün)
.form-text              - Hilfetext unter Input
small.text-muted        - Gedämpfter Hilfetext


╔══════════════════════════════════════════════════════════════════════════╗
║                          BUTTONS                                         ║
╚══════════════════════════════════════════════════════════════════════════╝

.btn                    - Basis-Button-Klasse
.btn-primary            - Primär-Button (Brand-Farbe)
.btn-outline-secondary  - Sekundär-Outline-Button


╔══════════════════════════════════════════════════════════════════════════╗
║                          NAVIGATION                                      ║
╚══════════════════════════════════════════════════════════════════════════╝

NAVBAR:
.app-header             - Haupt-Header Container
.navbar-brand           - Brand/Logo im Header
.navbar-nav             - Nav-Liste
.navbar-nav .nav-link   - Nav-Link
.navbar-nav .nav-link.active - Aktiver Nav-Link
.navbar-toggler         - Mobile Menu Toggle

TABS:
.nav-tabs               - Tab-Navigation
.nav-tabs .nav-item     - Tab-Item
.nav-tabs .nav-link     - Tab-Link
.nav-tabs .nav-link.active - Aktiver Tab
.tab-content            - Tab-Content Container

DROPDOWN:
.dropdown-menu          - Dropdown Container
.dropdown-item          - Dropdown-Item
.dropdown-item:hover    - Hover-Zustand
.dropdown-item.active   - Aktives Item
.dropdown-toggle        - Dropdown Toggle Button


╔══════════════════════════════════════════════════════════════════════════╗
║                          TABLES                                          ║
╚══════════════════════════════════════════════════════════════════════════╝

.table-modern           - Moderne Tabelle
.table-modern thead     - Tabellen-Header
.table-modern thead th  - Header-Zelle
.table-modern tbody     - Tabellen-Body
.table-modern tbody td  - Body-Zelle
.table-modern tbody tr:hover - Hover-Zeile
.table-modern th.sortable - Sortierbare Spalte


╔══════════════════════════════════════════════════════════════════════════╗
║                          MODALS                                          ║
╚══════════════════════════════════════════════════════════════════════════╝

.modal-content          - Modal Container
.modal-header           - Modal Header
.modal-title            - Modal Titel
.modal-body             - Modal Body
.btn-close              - Schließen-Button
.modal.modal-lg         - Großes Modal
.modal.modal-lg .modal-body - Scrollbarer Body


╔══════════════════════════════════════════════════════════════════════════╗
║                          ALERTS                                          ║
╚══════════════════════════════════════════════════════════════════════════╝

.alert                  - Basis-Alert
.alert-primary          - Primär-Alert (blau)
.alert-secondary        - Sekundär-Alert (grau)
.alert-success          - Erfolgs-Alert (grün)
.alert-info             - Info-Alert (blau)
.alert-warning          - Warn-Alert (gelb)
.alert-danger           - Gefahren-Alert (rot)
.alert-light            - Helles Alert
.alert-dark             - Dunkles Alert


╔══════════════════════════════════════════════════════════════════════════╗
║                          TOOLTIPS                                        ║
╚══════════════════════════════════════════════════════════════════════════╝

.tooltip-inner          - Tooltip-Inhalt
.tooltip-arrow          - Tooltip-Pfeil


╔══════════════════════════════════════════════════════════════════════════╗
║                          BACKGROUND UTILITIES                            ║
╚══════════════════════════════════════════════════════════════════════════╝

SOLID BACKGROUNDS:
.bg-primary             - Primär-Hintergrund (Brand)
.bg-secondary           - Sekundär-Hintergrund (Grau)
.bg-success             - Erfolgs-Hintergrund (Grün)
.bg-info                - Info-Hintergrund (Blau)
.bg-warning             - Warn-Hintergrund (Gelb)
.bg-danger              - Gefahren-Hintergrund (Rot)
.bg-light               - Heller Hintergrund
.bg-dark                - Dunkler Hintergrund

SUBTLE BACKGROUNDS:
.bg-primary-subtle      - Sanfter Primär-Hintergrund
.bg-secondary-subtle    - Sanfter Sekundär-Hintergrund
.bg-success-subtle      - Sanfter Erfolgs-Hintergrund
.bg-info-subtle         - Sanfter Info-Hintergrund
.bg-warning-subtle      - Sanfter Warn-Hintergrund
.bg-danger-subtle       - Sanfter Gefahren-Hintergrund
.bg-light-subtle        - Sanfter heller Hintergrund
.bg-dark-subtle         - Sanfter dunkler Hintergrund

BODY BACKGROUNDS:
.bg-body                - Body-Hintergrund (weiß)
.bg-body-secondary      - Sekundärer Body-Hintergrund
.bg-body-tertiary       - Tertiärer Body-Hintergrund


╔══════════════════════════════════════════════════════════════════════════╗
║                          BORDER UTILITIES                                ║
╚══════════════════════════════════════════════════════════════════════════╝

SOLID BORDERS:
.border-primary         - Primär-Rahmen
.border-secondary       - Sekundär-Rahmen
.border-success         - Erfolgs-Rahmen
.border-info            - Info-Rahmen
.border-warning         - Warn-Rahmen
.border-danger          - Gefahren-Rahmen
.border-light           - Heller Rahmen
.border-dark            - Dunkler Rahmen

SUBTLE BORDERS:
.border-primary-subtle  - Sanfter Primär-Rahmen
.border-secondary-subtle - Sanfter Sekundär-Rahmen
.border-success-subtle  - Sanfter Erfolgs-Rahmen
.border-info-subtle     - Sanfter Info-Rahmen
.border-warning-subtle  - Sanfter Warn-Rahmen
.border-danger-subtle   - Sanfter Gefahren-Rahmen
.border-light-subtle    - Sanfter heller Rahmen
.border-dark-subtle     - Sanfter dunkler Rahmen


╔══════════════════════════════════════════════════════════════════════════╗
║                          LINK UTILITIES                                  ║
╚══════════════════════════════════════════════════════════════════════════╝

.link-primary           - Primär-Link mit Hover
.link-secondary         - Sekundär-Link mit Hover
.link-success           - Erfolgs-Link mit Hover
.link-info              - Info-Link mit Hover
.link-warning           - Warn-Link mit Hover
.link-danger            - Gefahren-Link mit Hover
.link-dark              - Dunkler Link mit Hover


╔══════════════════════════════════════════════════════════════════════════╗
║                          SPECIAL COMPONENTS                              ║
╚══════════════════════════════════════════════════════════════════════════╝

.version-sticky         - Versions-Badge (unten links)
hr                      - Horizontale Trennlinie


╔══════════════════════════════════════════════════════════════════════════╗
║                          RESPONSIVE BREAKPOINTS                          ║
╚══════════════════════════════════════════════════════════════════════════╝

@media (max-width: 576px)  - Extra Small (Mobile)
@media (max-width: 991.98px) - Medium (Tablet)


╔══════════════════════════════════════════════════════════════════════════╗
║                          CSS VARIABLEN                                   ║
╚══════════════════════════════════════════════════════════════════════════╝

ALLE Farben, Schatten, Radien und andere Design-Werte sind als CSS-Variablen
in :root definiert. Verwende NIEMALS Hardcoded-Werte im Code!

Beispiele:
--brand                 - Hauptmarkenfarbe
--gray-500              - Mittleres Grau
--success               - Erfolgsfarbe
--danger                - Fehlerfarbe
--r-md                  - Mittlerer Border-Radius
--spacing-md            - Mittlerer Abstand
--fs-base               - Basis-Schriftgröße
--shadow                - Standard-Schatten

Siehe :root{} am Anfang der Datei für die vollständige Liste.

*/