/* ================================================================
   GOURMEN PWA - MAIN STYLESHEET V2 (GENERIERT)
   ================================================================
   NICHT VON HAND BEARBEITEN.
   Quellen: css/v2/tokens.css, css/v2/base.css, css/v2/layout.css, css/v2/components.css
   Neu bauen: python scripts/build_css.py
   ================================================================ */

/* ---- v2/tokens.css ---- */
/* ================================================================
   GOURMEN PWA - DESIGN TOKENS V2
   ================================================================
   Logo-based Color System
   Last Updated: 2025-01-29
   ================================================================ */

:root {
  /* ============================================
     LOGO COLORS - Foundation
     ============================================ */
  --logo-navy-dark: #1b232e;
  --logo-navy-medium: #354e5e;
  --logo-orange: #dc693c;
  --logo-teal: #73c8a8;

  /* ============================================
     BRAND GRADIENTS (Orange ↔ Teal)
     ============================================ */
  /* Wie erste Umsetzung; Orange minimal länger sichtbar (54% statt 52%) */
  --gradient-brand-text: linear-gradient(
    135deg,
    var(--logo-orange) 0%,
    var(--brand-secondary-400) 54%,
    var(--logo-teal) 100%
  );
  --gradient-brand-wash: radial-gradient(
      circle at 22% 48%,
      color-mix(in srgb, var(--brand-accent-500) 25%, transparent) 0%,
      transparent 52%
    ),
    radial-gradient(
      circle at 78% 78%,
      color-mix(in srgb, var(--brand-secondary-500) 20%, transparent) 0%,
      transparent 48%
    );

  /* ============================================
     BRAND PALETTES (50-900 Scale)
     ============================================ */
  
  /* Primary - Navy (from logo) */
  --brand-primary-50: #f5f7f9;
  --brand-primary-100: #e8ecf0;
  --brand-primary-200: #d1d9e1;
  --brand-primary-300: #b4c0cd;
  --brand-primary-400: #8a9db1;
  --brand-primary-500: #667a91;
  --brand-primary-600: #4f6477;
  --brand-primary-700: #354e5e;    /* LOGO */
  --brand-primary-800: #1b232e;    /* LOGO */
  --brand-primary-900: #0f151a;
  --brand-primary-950: #060a0d;
  
  /* Accent - Orange (from logo) */
  --brand-accent-50: #fef5f0;
  --brand-accent-100: #fde8dc;
  --brand-accent-200: #fcd0b8;
  --brand-accent-300: #fab08a;
  --brand-accent-400: #f88958;
  --brand-accent-500: #dc693c;     /* LOGO */
  --brand-accent-600: #c35428;
  --brand-accent-700: #a3421f;
  --brand-accent-800: #83361c;
  --brand-accent-900: #6b2e1b;
  
  /* Secondary - Teal (from logo) */
  --brand-secondary-50: #f0faf7;
  --brand-secondary-100: #d6f3eb;
  --brand-secondary-200: #ace6d7;
  --brand-secondary-300: #73c8a8;  /* LOGO */
  --brand-secondary-400: #4db896;
  --brand-secondary-500: #2fa885;
  --brand-secondary-600: #21886d;
  --brand-secondary-700: #1d6d5a;
  --brand-secondary-800: #1b5749;
  --brand-secondary-900: #1a493e;
  
  /* Warm - Red (Danger) */
  --brand-warm-50: #fef2f2;
  --brand-warm-100: #fee2e2;
  --brand-warm-200: #fecaca;
  --brand-warm-300: #fca5a5;
  --brand-warm-400: #f87171;
  --brand-warm-500: #ef4444;
  --brand-warm-600: #dc2626;
  --brand-warm-700: #b91c1c;
  --brand-warm-800: #991b1b;
  --brand-warm-900: #7f1d1d;

  /* ============================================
     STATUS COLORS
     ============================================ */
  --status-success-light: #10b981;
  --status-success-dark: #34d399;
  --status-warning-light: #f59e0b;
  --status-warning-dark: #fbbf24;
  --status-error-light: #ef4444;
  --status-error-dark: #f87171;
  --status-info-light: #3b82f6;
  --status-info-dark: #60a5fa;

  /* ============================================
     SPACING SCALE (8px base)
     ============================================ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */

  /* Abstand Page-Header → Nav, Filter-Leisten, erster Content-Block */
  --layout-page-header-after-gap: var(--space-4);

  /* ============================================
     TYPOGRAPHY SCALE (1.25 ratio)
     ============================================ */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-full: 9999px; /* Pills */

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* ============================================
   DEFAULT THEME - Light Mode (V2 Standard)
   ============================================ */
:root {
  /* Backgrounds - Subtle navy tint instead of pure white */
  --color-bg-base: var(--brand-primary-50);     /* #f5f7f9 - Very light navy tint */
  --color-bg-subtle: #ffffff;                    /* Pure white for subtle areas */
  --color-bg-muted: var(--brand-primary-100);
  --color-bg-elevated: #ffffff;                 /* Pure white for elevated surfaces */
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Surfaces */
  --color-surface: #ffffff;                      /* Cards remain pure white */
  --color-surface-secondary: var(--brand-primary-50);
  --color-surface-tertiary: var(--brand-primary-100);
  --color-surface-hover: var(--brand-primary-100);
  --color-surface-elevated: #ffffff;
  --color-surface-overlay: var(--brand-primary-100);
  
  /* Borders */
  --color-border-subtle: var(--brand-primary-200);
  --color-border-default: var(--brand-primary-300);
  --color-border-strong: var(--brand-primary-400);
  
  /* Text */
  --color-text-primary: var(--logo-navy-dark);
  --color-text-secondary: var(--brand-primary-600);
  --color-text-tertiary: var(--brand-primary-500);
  --color-text-disabled: var(--brand-primary-400);
  --color-text-inverse: #ffffff;
  --color-text-link: var(--logo-orange);
  --color-text-link-hover: var(--brand-accent-600);
  
  /* Interactive */
  --color-interactive-primary: var(--logo-orange);
  --color-interactive-primary-hover: var(--brand-accent-600);
  --color-interactive-primary-active: var(--brand-accent-700);
  --color-interactive-primary-subtle: rgba(220, 105, 60, 0.1);
  
  /* Status */
  --color-success: var(--status-success-light);
  --color-warning: var(--status-warning-light);
  --color-error: var(--status-error-light);
  --color-info: var(--status-info-light);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================
   DARK THEME - Semantic Tokens
   ============================================ */
[data-theme="dark"] {
  /* Backgrounds - Matter/Less glossy with more Navy tone */
  --color-bg-base: var(--brand-primary-950);
  --color-bg-subtle: var(--logo-navy-dark);
  --color-bg-muted: var(--brand-primary-800);
  --color-bg-elevated: var(--logo-navy-medium);
  --color-bg-overlay: rgba(27, 35, 46, 0.85);
  
  /* Surfaces */
  --color-surface: var(--logo-navy-dark);
  --color-surface-secondary: var(--logo-navy-medium);
  --color-surface-tertiary: var(--brand-primary-600);
  --color-surface-hover: var(--brand-primary-600);
  --color-surface-elevated: var(--brand-primary-700);
  --color-surface-overlay: var(--brand-primary-600);
  
  /* Borders */
  --color-border-subtle: var(--brand-primary-700);
  --color-border-default: var(--brand-primary-600);
  --color-border-strong: var(--brand-primary-500);
  
  /* Text */
  --color-text-primary: var(--brand-primary-50);
  --color-text-secondary: var(--brand-primary-300);
  --color-text-tertiary: var(--brand-primary-400);
  --color-text-disabled: var(--brand-primary-600);
  --color-text-inverse: var(--logo-navy-dark);
  --color-text-link: var(--brand-accent-400);
  --color-text-link-hover: var(--brand-accent-300);
  
  /* Interactive */
  --color-interactive-primary: var(--logo-orange);
  --color-interactive-primary-hover: var(--brand-accent-400);
  --color-interactive-primary-active: var(--brand-accent-600);
  --color-interactive-primary-subtle: rgba(220, 105, 60, 0.1);
  
  /* Status */
  --color-success: var(--status-success-dark);
  --color-warning: var(--status-warning-dark);
  --color-error: var(--status-error-dark);
  --color-info: var(--status-info-dark);
  
  /* Shadows - Softer with Navy tone for matte appearance */
  --shadow-sm: 0 1px 2px rgba(6, 10, 13, 0.3);
  --shadow-md: 0 4px 6px rgba(6, 10, 13, 0.4);
  --shadow-lg: 0 10px 15px rgba(6, 10, 13, 0.5);
  --shadow-xl: 0 20px 25px rgba(6, 10, 13, 0.6);
}

/* ============================================
   COMPONENT TOKENS
   ============================================ */
:root {
  /* Card */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border-subtle);
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);
  --card-padding: var(--space-5);
  --card-radius: var(--radius-lg);
  
  /* Button */
  --btn-primary-bg: var(--color-interactive-primary);
  --btn-primary-hover: var(--color-interactive-primary-hover);
  --btn-primary-text: var(--color-text-inverse);
  --btn-padding-y: var(--space-3);
  --btn-padding-x: var(--space-5);
  --btn-radius: var(--radius-md);
  --btn-transition: var(--transition-fast);
  
  /* Input */
  --input-padding: var(--space-3);
  --input-border: var(--color-border-default);
  --input-focus: var(--color-interactive-primary);
  --input-radius: var(--radius-md);
  
  /* Safe Area Insets (iOS Notch/Dynamic Island) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

/* ============================================
   THEME TRANSITIONS
   ============================================ */

/* Disable transitions on initial load to prevent FOUC */
*,
*::before,
*::after {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
  transition-delay: 0s;
}

/* Enable smooth transitions only when theme-transition class is present */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition-duration: 0.3s;
}


/* ---- v2/base.css ---- */
/* ================================================================
   GOURMEN PWA - BASE STYLES V2
   ================================================================
   Reset, Typography, Base Elements
   ================================================================ */

/* ============================================
   RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  /* Remove blue tap highlight on iOS/Android */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Gewinnt gegen Komponenten mit eigenem display (z. B. .empty-state { flex }) */
[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Verhindert Dokument-Breite > Viewport (breite Tabellen nur im eigenen Scroll-Port) */
  overflow-x: clip;
  
  /* Smooth Scroll (respects user preference) */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  transition: background-color var(--transition-normal), 
              color var(--transition-normal);
  
  /* Safe Area Insets for iOS Notch/Dynamic Island */
  padding-top: var(--safe-area-top);
  padding-right: var(--safe-area-right);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

strong {
  font-weight: var(--font-semibold);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

code {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  background: var(--color-surface-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* ============================================
   LISTS
   ============================================ */
ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}

/* ============================================
   ICON SYSTEM
   ============================================ */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--xl {
  width: 2rem;
  height: 2rem;
}

.icon--spin {
  animation: spin 1s linear infinite;
}

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

/* ============================================
   UTILITIES
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--color-text-tertiary); }
.text-disabled { color: var(--color-text-disabled); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: 1200px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: var(--space-4);
}

/* Zurück-Link statt Breadcrumb-Kette (REDESIGN §3) */
.page-back {
  margin: 0 0 var(--space-2);
}

.page-back a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-interactive-primary);
  text-decoration: none;
}

.page-back a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

.page-back .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ============================================
   PAGE HEADER - Standard (for Subpages)
   ============================================ */

.page-header {
  margin-bottom: var(--layout-page-header-after-gap);
}

.page-header h1 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.page-header h1 .icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

/* Optional; Standard: nur Seitentitel (REDESIGN — keine Pflicht-Untertitel) */
.page-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.page-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Volle Breite: ein Button links, einer rechts (z. B. Event Vorher/Weiter) */
.page-actions.page-actions--inline {
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.page-actions.page-actions--inline .btn {
  width: auto;
  flex: 0 0 auto;
}

/* Nur „Weiter“: rechts bündig */
.page-actions.page-actions--inline:has(.event-detail-nav__next:only-child) {
  justify-content: flex-end;
}

/* Event-Detail: Vorher/Weiter direkt unter dem Page-Header (nicht im Header) */
nav.event-detail-nav.page-actions {
  margin-top: 0;
  margin-bottom: var(--layout-page-header-after-gap);
}

/* Extra Abstand, wenn Actions direkt in Tabs-Panels sitzen */
.tabs__panel .page-actions {
  margin-bottom: var(--space-4);
}

/* Icon-only Action Group (keine Vollbreite) */
.page-actions--icons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.page-actions--icons .btn--icon-only {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

.page-actions--icons form {
  margin: 0;
}

.page-actions--icons form .btn--icon-only {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

/* ============================================
   PAGE HEADER - Featured (for Hub Pages)
   ============================================ */

.page-header--featured {
  text-align: center;
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border-subtle);
}

.page-header--featured h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
  
  /* Gradient Text (Orange → Teal, Token) */
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Fallback for browsers that don't support background-clip */
  color: var(--logo-orange);
}

.page-header--featured h1 .icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  /* Icon should not get gradient, keep normal color */
  color: var(--logo-orange);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* Ensure gradient works in WebKit browsers */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-header--featured h1 {
    color: transparent;
  }
}

.page-header--featured .page-subtitle {
  font-size: var(--text-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.page-header--featured .page-actions {
  justify-content: center;
  margin-top: var(--space-5);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  /* Featured Header auf Mobile */
  .page-header--featured {
    text-align: left;
    padding-bottom: var(--space-5);
  }
  
  .page-header--featured h1 {
    justify-content: flex-start;
    font-size: var(--text-3xl);
  }
  
  .page-header--featured h1 .icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  
  .page-header--featured .page-subtitle {
    margin-left: 0;
    margin-right: 0;
    font-size: var(--text-base);
  }
  
  .page-header--featured .page-actions {
    justify-content: flex-start;
  }
  
  /* Standard + Featured Actions */
  .page-actions {
    flex-direction: column;
  }
  
  .page-actions .btn {
    width: 100%;
  }

  /* Event-Navigation: bleibt eine Zeile (überschreibt Spalte oben) */
  .page-actions.page-actions--inline {
    flex-direction: row;
  }

  /* Icon-only Actions: bleiben kompakt auch auf Mobile */
  .page-actions--icons {
    flex-direction: row;
    gap: var(--space-2);
  }

  .page-actions--icons .btn--icon-only,
  .page-actions--icons form .btn--icon-only {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

/* Alignment helper */
.page-actions--right {
  justify-content: flex-end;
}
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}


/* ---- v2/layout.css ---- */
/* ============================================
   BASE LAYOUT (from V1 - for compatibility)
   ============================================ */

/* Main Content Area */
.main-content {
  max-width: 1200px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: calc(70px + var(--safe-area-top)) var(--space-4) calc(90px + var(--safe-area-bottom)) var(--space-4);
  min-height: calc(100vh - 80px);
  overflow-x: clip;
}

/* ============================================
   TOP USER BAR
   ============================================ */

.user-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(135deg, var(--brand-primary-800), var(--brand-primary-700));
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  padding-top: var(--safe-area-top);
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-md);
}

/* Light Mode - Heller Theme-aware User Bar */
[data-theme="light"] .user-bar {
  background: linear-gradient(135deg, var(--brand-primary-200), #ffffff);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: 0 2px 8px rgba(27, 35, 46, 0.08);
}

.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  background:
    linear-gradient(rgba(27, 35, 46, 0.92), rgba(27, 35, 46, 0.92)) padding-box,
    var(--gradient-brand-text) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.logo-link:hover {
  background:
    linear-gradient(rgba(27, 35, 46, 1), rgba(27, 35, 46, 1)) padding-box,
    var(--gradient-brand-text) border-box;
}

.user-bar-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.user-section {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  color: white;
}

/* Light Mode - Anpassungen für Buttons und Text */
[data-theme="light"] .logo-link {
  background:
    linear-gradient(rgba(27, 35, 46, 1), rgba(27, 35, 46, 1)) padding-box,
    var(--gradient-brand-text) border-box;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="light"] .logo-link:hover {
  background:
    linear-gradient(#243241, #243241) padding-box,
    var(--gradient-brand-text) border-box;
}

[data-theme="light"] .user-name {
  color: var(--color-text-primary);
}

.user-actions {
  display: flex;
  gap: var(--space-2);
}

/* ============================================
   PUBLIC TOPNAV (Start + Hitlist, Hamburger < 1024px)
   ============================================ */

.user-bar.public-topnav {
  gap: var(--space-3);
}

.public-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.public-topnav__menu-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(27, 35, 46, 0.9);
  color: white;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.public-topnav__menu-btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(27, 35, 46, 1);
}

.public-topnav__menu-btn:focus-visible {
  outline: 2px solid var(--brand-accent-400);
  outline-offset: 2px;
}

.public-topnav__menu-icon {
  width: 1.35rem;
  height: 1.35rem;
  pointer-events: none;
}

[data-theme="light"] .public-topnav__menu-btn {
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
  background: #ffffff;
}

[data-theme="light"] .public-topnav__menu-btn:hover {
  border-color: var(--brand-primary-600);
}

@media (min-width: 1024px) {
  .public-topnav__menu-btn {
    display: none;
  }
}

.public-topnav__nav--desktop {
  flex: 1;
  min-width: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .public-topnav__nav--desktop {
    display: flex;
  }
}

/* Drawer: seitliches Sheet, Modal-Dialog */

.public-drawer {
  margin: 0;
  padding: 0;
  border: none;
  max-width: none;
  max-height: none;
  width: min(320px, 88vw);
  height: 100vh;
  height: 100dvh;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.public-drawer::backdrop {
  background: rgba(15, 20, 28, 0.45);
}

[data-theme="light"] .public-drawer::backdrop {
  background: rgba(27, 35, 46, 0.35);
}

.public-drawer__panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}

.public-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.public-drawer__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.public-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.public-drawer__close:hover {
  background: var(--color-surface-hover);
}

.public-drawer__close .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.public-drawer__nav {
  padding: var(--space-2) 0;
}

.public-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.public-drawer__link {
  display: block;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
}

.public-drawer__link:hover {
  background: var(--color-surface-hover);
}

.public-drawer__link:focus-visible {
  outline: 2px solid var(--brand-accent-400);
  outline-offset: -2px;
}

@media (min-width: 1024px) {
  .public-drawer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-topnav__menu-btn,
  .public-drawer__close,
  .public-drawer__link {
    transition: none;
  }
}

/* ============================================
   BOTTOM NAVIGATION
   ============================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: var(--safe-area-bottom);
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-md);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text-tertiary);
  min-width: 60px;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:hover {
  color: var(--color-interactive-primary);
  background: var(--color-surface-overlay);
}

.nav-item--active {
  color: var(--color-interactive-primary);
  font-weight: var(--font-semibold);
  background: var(--color-surface-overlay);
}

.nav-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nav-text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

/* Remove text decoration */
.bottom-nav .nav-item,
.bottom-nav .nav-item:hover,
.bottom-nav .nav-item:focus,
.bottom-nav .nav-item:active {
  text-decoration: none;
}

.bottom-nav .nav-item * {
  text-decoration: none;
}

/* ============================================
   TOP NOTIFICATIONS
   ============================================ */

.top-notifications {
  position: static;
  width: 100%;
  max-width: 100%;
  z-index: auto;
  padding: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  box-sizing: border-box;
}

.app-shell-banner__settings-hint {
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-normal);
}

.app-shell-banner__settings-hint a.app-shell-banner__settings-link {
  color: var(--color-interactive-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.app-shell-banner__settings-hint a.app-shell-banner__settings-link:hover {
  color: var(--color-interactive-primary-hover);
}

/* PWA-Alerts: kein fixer Screen-Rand; gleiche Breite wie Inhalt (siehe Container) */
.top-notifications > .alert.install-ios-alert,
.top-notifications > .alert.install-android-alert,
.top-notifications > .alert.install-desktop-alert,
.top-notifications > .alert.pwa-push-standalone-alert {
  pointer-events: auto;
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* Entfernt: permanenter Button-Strip unter der User-Bar (Historie `app-shell-promos`) */

.app-shell-install-banner__steps {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style-position: outside;
}

.app-shell-install-banner__steps li {
  padding-left: var(--space-1);
}

/* ============================================
   FLASH MESSAGES
   ============================================ */

.flash-messages {
  margin-bottom: var(--space-4);
}

.flash-message {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-normal);
}

.flash-message__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.flash-message__icon {
  flex-shrink: 0;
  width: var(--text-xl);
  height: var(--text-xl);
  margin-top: 2px;
}

.flash-message__text {
  flex: 1;
  min-width: 0;
}

.flash-message-success,
.flash-success {
  background: var(--brand-secondary-100);
  border-left: 4px solid var(--brand-secondary-600);
  color: var(--brand-secondary-900);
}

.flash-message-error,
.flash-error,
.flash-danger {
  background: var(--brand-accent-100);
  border-left: 4px solid var(--brand-accent-600);
  color: var(--brand-accent-900);
}

.flash-message-warning,
.flash-warning {
  background: var(--brand-warm-100);
  border-left: 4px solid var(--brand-warm-600);
  color: var(--brand-warm-900);
}

.flash-message-info,
.flash-info {
  background: var(--brand-primary-100);
  border-left: 4px solid var(--brand-primary-600);
  color: var(--brand-primary-900);
}

.flash-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  line-height: 1;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
  padding: 0;
  transition: opacity var(--transition-fast);
}

.flash-close:hover {
  opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 768px) {
  .main-content {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    /* Bottom Nav bleibt bis 1024px, daher Padding beibehalten */
  }
}

/* Desktop: Bottom Nav ausblenden, Content für Sidebar anpassen */
@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }
  
  .main-content {
    margin-left: 200px;
    padding-bottom: var(--space-4); /* Bottom Nav weg, kein Padding nötig */
    transition: margin-left var(--transition-normal);
  }

  /* Public-Shell: keine Sidebar – Inhalt horizontal zentrieren (nicht nur margin-left: 0,
     sonst bleibt margin-right: auto vom Member-Layout und der Block klebt links). */
  body[data-layout="public"] .main-content {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1023px) {
  body[data-layout="public"] .main-content {
    padding-bottom: calc(var(--space-6) + var(--safe-area-bottom));
  }
}

/* ============================================
   TOPBAR HIDE-ON-SCROLL (Mobile + Tablet < 1024px)
   ============================================
   - JS (static/js/v2/topbar-scroll.js) togglet body[data-topbar-hidden].
   - Auf Desktop (>= 1024px) ist die Logik per JS-MediaQuery deaktiviert,
     daher hier keine Desktop-Regeln noetig. */
@media (max-width: 1023px) {
  .user-bar {
    transition: transform var(--transition-normal);
    will-change: transform;
  }

  body[data-topbar-hidden="true"] .user-bar {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-bar {
    transition: none;
  }
}


/* ---- v2/components.css ---- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hub-card .card__header {
  padding: var(--space-4);
}

.hub-card .card__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-lg);
}

.hub-card .card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.hub-card .card__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
}

.hub-card .info-row {
  padding: var(--space-2) 0;
}

.hub-card--featured {
  background: linear-gradient(135deg, var(--brand-primary-800), var(--brand-primary-700));
  color: #fff;
  border: 1px solid var(--brand-primary-700);
  box-shadow: var(--shadow-md);
}

.hub-card--featured .card__title,
.hub-card--featured .info-row__label,
.hub-card--featured .info-row__value {
  color: #fff;
}

.hub-card--featured .card__footer {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Admin-Bereich Uebersicht: grosse Hero-Kacheln (statt hub-card-Grid) */
.admin-hub {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.admin-hub__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.admin-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .admin-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.admin-hub__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 13.5rem;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-hub__hero:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.admin-hub__hero:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 3px;
}

.admin-hub__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--brand-primary-600) 85%, transparent),
    color-mix(in srgb, var(--brand-secondary-500) 75%, transparent)
  );
}

.admin-hub__hero--merch::before {
  opacity: 0.16;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--brand-accent-500) 80%, transparent),
    color-mix(in srgb, var(--brand-secondary-500) 78%, transparent)
  );
}

@media (prefers-reduced-motion: reduce) {
  .admin-hub__hero {
    transition: none;
  }

  .admin-hub__hero:hover {
    transform: none;
  }
}

.admin-hub__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
  min-height: 0;
}

@media (min-width: 640px) {
  .admin-hub__hero-inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.admin-hub__hero-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-hub__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
}

.admin-hub__title {
  margin: 0;
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--font-bold);
  line-height: 1.15;
}

.admin-hub__lede {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 26rem;
}

.admin-hub__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  flex-shrink: 0;
  align-content: start;
}

@media (max-width: 639px) {
  .admin-hub__metrics {
    width: 100%;
  }
}

.admin-hub__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  justify-content: center;
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
  border: 1px solid var(--color-border-subtle);
  text-align: center;
}

[data-theme="dark"] .admin-hub__metric {
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
}

.admin-hub__metric-value {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--color-text-primary);
  word-break: break-word;
}

.admin-hub__metric-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.admin-hub__cta-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.admin-hub__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-height: 44px;
  border-radius: var(--btn-radius);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--brand-primary-800), var(--brand-primary-800)) padding-box,
    var(--gradient-brand-text) border-box;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .admin-hub__cta {
  background:
    linear-gradient(var(--brand-primary-200), var(--brand-primary-200)) padding-box,
    var(--gradient-brand-text) border-box;
  color: var(--logo-navy-dark);
  text-shadow: none;
}

.admin-hub__hero:hover .admin-hub__cta {
  background:
    linear-gradient(var(--brand-primary-700), var(--brand-primary-700)) padding-box,
    var(--gradient-brand-text) border-box;
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .admin-hub__hero:hover .admin-hub__cta {
  background:
    linear-gradient(var(--brand-primary-300), var(--brand-primary-300)) padding-box,
    var(--gradient-brand-text) border-box;
}

.admin-hub__cta .icon {
  flex-shrink: 0;
}

.admin-hub__decal {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  z-index: 0;
  width: 5.5rem;
  height: 5.5rem;
  opacity: 0.12;
  color: var(--brand-primary-700);
  pointer-events: none;
}

.admin-hub__hero--merch .admin-hub__decal {
  color: var(--brand-accent-600);
}

[data-theme="light"] .admin-hub__decal {
  opacity: 0.1;
  color: var(--brand-primary-500);
}

[data-theme="light"] .admin-hub__hero--merch .admin-hub__decal {
  color: var(--brand-accent-500);
}

/* ================================================================
   GOURMEN PWA - COMPONENTS V2
   ================================================================
   Buttons, Cards, Forms, Info Rows, Modals
   BEM Naming Convention
   ================================================================ */

/* ============================================
   BUTTON SYSTEM
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--btn-transition);
  min-height: 44px;
  text-decoration: none;
  line-height: 1;
  
  /* Touch device optimizations */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

a.btn:hover,
a.btn:focus-visible,
a.btn:active {
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Icons in Buttons - fixed size */
.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* Primary Button */
.btn--primary {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--brand-primary-800), var(--brand-primary-800)) padding-box,
    var(--gradient-brand-text) border-box;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover:not(:disabled) {
  background:
    linear-gradient(var(--brand-primary-700), var(--brand-primary-700)) padding-box,
    var(--gradient-brand-text) border-box;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Light Mode: bewusst identisch zu Dark Mode */
[data-theme="light"] .btn--primary {
  background:
    linear-gradient(var(--brand-primary-200), var(--brand-primary-200)) padding-box,
    var(--gradient-brand-text) border-box;
  color: var(--logo-navy-dark);
  text-shadow: none;
}

[data-theme="light"] .btn--primary:hover:not(:disabled) {
  background:
    linear-gradient(var(--brand-primary-300), var(--brand-primary-300)) padding-box,
    var(--gradient-brand-text) border-box;
}

/* Success Button */
.btn--success {
  background: linear-gradient(135deg, #2e7d32, #4caf50);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn--success:hover:not(:disabled) {
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Danger Button (Corporate Design: Orange-Red gradient) */
.btn--danger {
  background: linear-gradient(135deg, 
    var(--brand-warm-700), 
    var(--brand-accent-600));
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn--danger:hover:not(:disabled) {
  background: linear-gradient(135deg, 
    var(--brand-warm-800), 
    var(--brand-warm-700));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Outline Button */
.btn--outline {
  background: transparent;
  border: 2px solid var(--color-border-default);
  color: var(--color-text-primary);
}

.btn--outline:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-interactive-primary);
  color: var(--color-interactive-primary);
  transform: translateY(-1px);
}

/* BillBro Button (Teal from logo) */
.btn--billbro {
  background: linear-gradient(135deg, 
    var(--brand-secondary-700), 
    var(--brand-secondary-500),
    var(--brand-secondary-300));
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn--billbro:hover:not(:disabled) {
  background: linear-gradient(135deg, 
    var(--brand-secondary-800), 
    var(--brand-secondary-600));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Button Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 36px;
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  min-height: 52px;
}

/* ============================================
   CARD SYSTEM (NEW - No Nesting!)
   ============================================ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: var(--space-5);
  transition: box-shadow var(--transition-normal);
}

.card:last-child {
  margin-bottom: 0;
}

.card:hover {
  box-shadow: var(--card-hover-shadow);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-padding);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-secondary);
}

/* Light Mode: More contrast for card header */
[data-theme="light"] .card__header {
  background: var(--brand-primary-200);  /* #d1d9e1 - More visible contrast vs body bg */
}

.card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.card__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}

.card__title-group .card__subtitle {
  margin: 0;
}

.card__subtitle {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.variant-row + .variant-row {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.form-row--inline-remove {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  flex-wrap: nowrap;
  grid-template-columns: none !important;
}

.form-row--inline-remove .form-field {
  margin-bottom: 0;
  flex: 1 1 0;
  min-width: 0;
}

.form-row--inline-remove .btn {
  align-self: center;
  white-space: nowrap;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .form-row--inline-remove {
    flex-wrap: nowrap;
  }
}

/* Feld + Text-Submit-Button in einer Zeile (z. B. Budget speichern, Beleg verknuepfen).
   Anders als --inline-remove behaelt der Button seine natuerliche Text-Breite. */
.form-row--inline-submit {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  grid-template-columns: none !important;
}

.form-row--inline-submit .form-field {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.form-row--inline-submit .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Aktionen zwischen Filter-Leiste und Tabelle/Liste (z. B. Buchhaltungs-Tabs) */
.accounting-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Klickbare Zelle in data-table: Label + Chevron (Muster wie Events-Index) */
.data-table__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
  white-space: nowrap;
  padding-block: var(--space-1);
}

.data-table__link:hover,
.data-table__link:focus-visible {
  color: var(--color-interactive-primary);
}

.data-table__link:hover .data-table__link-label,
.data-table__link:focus-visible .data-table__link-label {
  text-decoration: underline;
}

.data-table__chev {
  color: var(--color-text-tertiary);
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.data-table__sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: normal;
}

.card--collapsible .card__header {
  cursor: pointer;
}

.card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.card__toggle .icon {
  width: 18px;
  height: 18px;
}

.card--collapsible.is-collapsed .card__toggle {
  transform: rotate(-180deg);
}

.card--collapsible .card__collapsible-content {
  display: block;
}

.card--collapsible.is-collapsed .card__collapsible-content {
  display: none;
}

/* Icons in Card Titles - fixed size */
.card__title .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.card__header .card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* Chips umbrechen; Toggle bleibt in Zeile 1 rechts (z. B. Mitglieder-Karten) */
.card__actions--split-toggle {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.card__actions--split-toggle .card__actions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

.card__actions--split-toggle .card__toggle {
  flex-shrink: 0;
}

.card__body {
  padding: var(--card-padding);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.card__body--stacked {
  display: grid;
  gap: var(--space-4);
}

.card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-padding);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-secondary);
}

.card__footer--wrap {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card__footer .btn,
.card__footer form {
  width: 100%;
  margin: 0;
}

.card__footer form {
  display: flex;
}

.card__footer form .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .card__footer {
    flex-direction: row;
  }
  
  .card__footer .btn,
  .card__footer form {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  
  .card__footer form .btn {
    width: 100%;
  }
}

/* Datenbereinigung — Anker für Smooth-Scroll (focus=rating) */
#rating-card {
  scroll-margin-top: var(--space-10);
}

/* ============================================
   CARD SECTION (replaces card-secondary)
   ============================================ */
.card-section {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.card-section:last-child {
  margin-bottom: 0;
}

.card-section--accent {
  border-left: 4px solid var(--brand-accent-500);
  background: var(--color-surface);
}

.card-section--info {
  border-left: 4px solid var(--brand-secondary-500);
  background: var(--color-surface);
}

.card-section--subtle {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.card-section__header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.card-section__title .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.card-section__body {
  padding: var(--space-4);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.card-section__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* Stat tiles (2–4 Kennzahlen, REDESIGN §5.3) */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .stat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  min-height: 5.5rem;
}

.stat-tile__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.stat-tile__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-tile__value--muted {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

/* Kennzahlen-Spotlight: prominente Hero-Metriken + optionale Kachelzeile (projektweit) */
.metrics-spotlight__context {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.metrics-spotlight__hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border: none;
  align-items: stretch;
}

[data-theme="dark"] .metrics-spotlight__hero {
  background: transparent;
}

.metrics-spotlight__hero > .metrics-spotlight__metric {
  box-sizing: border-box;
  min-width: 0;
  min-height: 6.75rem;
  padding: var(--space-3) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--logo-orange) 72%, transparent),
      color-mix(in srgb, var(--logo-teal) 72%, transparent)
    ) border-box;
  justify-content: center;
}

[data-theme="dark"] .metrics-spotlight__hero > .metrics-spotlight__metric {
  background:
    linear-gradient(var(--chrome-inactive-pill-bg), var(--chrome-inactive-pill-bg)) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--logo-orange) 82%, transparent),
      color-mix(in srgb, var(--logo-teal) 82%, transparent)
    ) border-box;
}

.metrics-spotlight__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 5.5rem;
  max-width: none;
  padding: 0 var(--space-1);
  text-align: center;
}

.metrics-spotlight__metric-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.metrics-spotlight__metric-value {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Nur noch außerhalb von __hero sinnvoll; im Hero deprecated (siehe REDESIGN.md §5.1). */
.metrics-spotlight__metric-value--accent {
  color: var(--color-interactive-primary);
}

.metrics-spotlight__hero .metrics-spotlight__metric-value--accent {
  color: var(--color-text-primary);
}

.metrics-spotlight__metric-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.35;
}

.stat-tiles--metrics-follow {
  margin-top: var(--space-5);
  grid-template-columns: 1fr;
}

.metrics-spotlight .stat-tiles--metrics-follow .stat-tile {
  align-items: center;
  text-align: center;
}

@media (min-width: 640px) {
  .stat-tiles--metrics-follow {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

/* Ergänzende Kennzahlensätze unter metrics-spotlight (projektweit) */
.metrics-narrative {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.metrics-narrative__item {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.45;
  text-align: center;
}

.metrics-narrative__item strong {
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

/* Fließtext-Kennzahlblock unter dem Hero (projektweit) */
.metrics-insight-panel {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
  text-align: left;
}

[data-theme="dark"] .metrics-insight-panel {
  background: var(--chrome-inactive-pill-bg);
  border-color: var(--color-border-subtle);
}

.metrics-insight-panel p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.metrics-insight-panel p:last-child {
  margin-bottom: 0;
}

.metrics-insight-panel__section {
  margin-bottom: var(--space-4);
}

.metrics-insight-panel__section:last-child {
  margin-bottom: 0;
}

.metrics-insight-panel__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.metrics-insight-panel__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.metrics-insight-panel__item {
  margin-bottom: var(--space-2);
}

.metrics-insight-panel__item:last-child {
  margin-bottom: 0;
}

.metrics-insight-panel__value {
  font-weight: var(--font-bold);
  color: var(--color-interactive-primary);
  font-variant-numeric: tabular-nums;
}

/* „Card“-Tabelle — gemeinsame Hülle + Basis (GGL-Rangliste, Events Kommend/Archiv, …) */
.data-table-wrap {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Horizontale Scroll-Huelle + rechter Edge-Fade (Events, GGL, …; JS toggelt --fade-right) */
.data-table-scroll-outer {
  position: relative;
}

.data-table-scroll-outer::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--space-6);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  background: linear-gradient(to left, var(--card-bg), transparent);
}

.data-table-scroll-outer--fade-right::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .data-table-scroll-outer::after {
    transition: none;
  }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead th {
  padding: var(--space-3) var(--space-3);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-align: left;
  background: var(--color-surface-secondary);
  border-bottom: 1px solid var(--color-border-default);
}

/* Light: wie Card-Header (`.card__header` → `--brand-primary-200`) */
[data-theme="light"] .data-table thead th {
  background: var(--brand-primary-200);
}

.data-table tbody td {
  padding: var(--space-3) var(--space-3);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

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

.data-table td:last-child,
.data-table th:last-child {
  text-align: right;
}

/* Generischer Modifier: erste Spalte horizontal sticky (Buchhaltung Journal/Budget, …) */
.data-table--sticky-first th:first-child,
.data-table--sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--color-border-subtle);
  white-space: nowrap;
}

.data-table--sticky-first thead th:first-child {
  z-index: 3;
  background: var(--color-surface-secondary);
}

[data-theme="light"] .data-table--sticky-first thead th:first-child {
  background: var(--brand-primary-200);
}

.data-table--sticky-first tbody td:first-child {
  background: var(--card-bg);
}

/* Gruppen-Zwischenzeile in Tabellen (z. B. Budget nach Kontengruppe) */
.data-table__group-row th {
  padding: var(--space-3);
  text-align: left;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
  border-bottom: 1px solid var(--color-border-default);
}

[data-theme="light"] .data-table__group-row th {
  background: var(--brand-primary-200);
}

/* Buchhaltung Budget/Kontenplan: erste Spalte schmal + umbrechend (Mobile-Scroll) */
.accounting-budget-table th:first-child,
.accounting-budget-table td:first-child {
  max-width: min(9.5rem, 40vw);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.accounting-budget-table th:not(:first-child),
.accounting-budget-table td:not(:first-child) {
  white-space: nowrap;
}

.accounting-year-create {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* Beleg-Upload: Kamera/Datei + kompakte Select-Picker */
.accounting-receipt-capture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.accounting-receipt-capture__preview {
  margin-top: var(--space-3);
}

.accounting-receipt-capture__preview-img {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}

.accounting-receipt-upload__tagging {
  margin-bottom: var(--space-4);
}

.accounting-receipt-upload__picker-panel {
  max-height: min(42vh, 16rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.accounting-receipt-upload__picker-panel .form-field + .form-field {
  margin-top: var(--space-3);
}

/*
 * Events-Index Kommend/Archiv:
 * Erste Spalte ("Event") = Typ-Icon + Datum + Chevron, klickbar -> Event-Detail.
 * Sticky, nowrap, min-width passend fuer Icon + TT.MM.JJJJ + Chevron ohne Umbruch.
 */
.events-index-table th:first-child,
.events-index-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--color-border-subtle);
  white-space: nowrap;
  width: 1%;
}

.events-index-table thead th:first-child {
  z-index: 3;
  background: var(--color-surface-secondary);
}

[data-theme="light"] .events-index-table thead th:first-child {
  background: var(--brand-primary-200);
}

.events-index-table tbody td:first-child {
  background: var(--card-bg);
  padding-block: var(--space-2);
}

/* Spalte "Event": klickbarer Link mit Typ-Icon + Datum + Chevron */
.events-index-table__event-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
  white-space: nowrap;
  padding-block: var(--space-1);
}

.events-index-table__event-link:hover,
.events-index-table__event-link:focus-visible {
  color: var(--color-interactive-primary);
}

.events-index-table__event-link:hover .events-index-table__event-date,
.events-index-table__event-link:focus-visible .events-index-table__event-date {
  text-decoration: underline;
}

.events-index-table__event-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.events-index-table__event-icon .icon {
  display: block;
}

.events-index-table__event-date {
  font-variant-numeric: tabular-nums;
}

.events-index-table__event-chev {
  color: var(--color-text-tertiary);
  width: 1rem;
  height: 1rem;
}

/* Spalte "Restaurant": optionaler externer Link auf place_website */
.events-index-table__col-restaurant {
  max-width: 28ch;
}

.events-index-table__restaurant-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-primary);
  text-decoration: none;
  max-width: 100%;
}

.events-index-table__restaurant-link:hover .events-index-table__restaurant-name,
.events-index-table__restaurant-link:focus-visible .events-index-table__restaurant-name {
  text-decoration: underline;
}

.events-index-table__restaurant-link:hover,
.events-index-table__restaurant-link:focus-visible {
  color: var(--color-interactive-primary);
}

.events-index-table__restaurant-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.events-index-table__restaurant-icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-text-tertiary);
}

/* Spalte "Teilnahme"/"Bewertung": kompakt, kein Umbruch */
.events-index-table__col-status {
  width: 1%;
  white-space: nowrap;
  text-align: left;
}

/* Spalte "Organisator": gedeckelt mit Ellipsis, damit lange Namen die Tabelle nicht spreizen */
.events-index-table__col-organisator {
  max-width: 22ch;
}

.events-index-table__col-organisator > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/*
 * Globales `.data-table td:last-child { text-align: right }` ueberschreiben:
 * In events-index-table ist die letzte Spalte "Organisator" und soll linksbuendig bleiben,
 * damit die Lesbarkeit konsistent mit den uebrigen Spalten ist.
 */
.data-table.events-index-table td:last-child,
.data-table.events-index-table th:last-child {
  text-align: left;
}

/*
 * Events-Index Tab "Heutiges Event" — Hero-Block (basierend auf .dashboard-intent).
 * Groesserer Titel + Schnellzugriff-Buttons. Gap kommt vom .dashboard-intent.
 * Buttons via .page-actions: Mobile column (full width), Desktop row.
 */
.events-today-hero--stacked {
  margin-top: var(--space-6);
}

.events-today-hero__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.events-today-hero__title-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-interactive-primary);
}

.events-today-hero__title-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.events-today-hero__title-date {
  font-variant-numeric: tabular-nums;
}

.events-today-hero__actions {
  margin-top: var(--space-2);
}

/* GGL: Spalten- und Zeilen-Modifier (Tabelle zusätzlich mit .data-table) */
.ggl-ranking-table {
  /*
   * Breite der # Spalte = Inhalt (siehe .ggl-ranking-table__col-rank).
   * --ggl-rank-col-outer: Pixelwert fuer sticky-`left` der zweiten Spalte;
   * setzt restaurants-table-scroll.js nach Messung aller Rang-Zellen.
   */
  --ggl-rank-col-outer: 3ch;
}

.ggl-ranking-table .ggl-ranking-table__col-rank {
  box-sizing: border-box;
  white-space: nowrap;
  /* Minimale Spaltenbreite = breitester Rang (auto layout) */
  width: 1%;
  text-align: center;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.ggl-ranking-table .ggl-ranking-table__col-name {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.ggl-ranking-table .ggl-ranking-table__col-num {
  text-align: right;
  white-space: nowrap;
}

.ggl-ranking-table tbody tr.ggl-ranking-table__row--current {
  background: rgba(115, 200, 168, 0.12);
}

.ggl-ranking-table tbody tr.ggl-ranking-table__row--current .ggl-ranking-table__col-name {
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .ggl-ranking-table tbody tr.ggl-ranking-table__row--current {
  background: rgba(115, 200, 168, 0.08);
}

.ggl-ranking-table tbody tr.ggl-ranking-table__row--rank-1 .ggl-ranking-table__col-rank {
  color: var(--brand-accent-500);
}

.ggl-ranking-table tbody tr.ggl-ranking-table__row--rank-2 .ggl-ranking-table__col-rank {
  color: var(--brand-primary-400);
}

.ggl-ranking-table tbody tr.ggl-ranking-table__row--rank-3 .ggl-ranking-table__col-rank {
  color: var(--brand-secondary-400);
}

/* GGL Tabelle: Rang + Name horizontal sticky; rechter Edge-Fade via data-table-scroll-* */

/*
 * Zwischen # und Member: keine durchscheinende Spalte beim Scrollen.
 * `left` der zweiten Spalte 1px nach links = minimaler Uebergriff ueber die erste Spalte
 * (subpixel/Layering); linker Zell-Innenabstand +1px, Text bleibt ausgerichtet.
 */
.ggl-ranking-table thead th.ggl-ranking-table__col-rank,
.ggl-ranking-table tbody td.ggl-ranking-table__col-rank {
  position: sticky;
  left: 0;
  border-right: 1px solid var(--color-border-subtle);
  box-shadow: none;
}

.ggl-ranking-table thead th.ggl-ranking-table__col-name,
.ggl-ranking-table tbody td.ggl-ranking-table__col-name {
  position: sticky;
  left: calc(var(--ggl-rank-col-outer) - 1px);
  padding-left: calc(var(--space-3) + 1px);
  box-shadow: 1px 0 0 var(--color-border-subtle);
}

.ggl-ranking-table thead th.ggl-ranking-table__col-rank {
  z-index: 5;
  background: var(--color-surface-secondary);
}

.ggl-ranking-table thead th.ggl-ranking-table__col-name {
  z-index: 4;
  background: var(--color-surface-secondary);
}

[data-theme="light"] .ggl-ranking-table thead th.ggl-ranking-table__col-rank,
[data-theme="light"] .ggl-ranking-table thead th.ggl-ranking-table__col-name {
  background: var(--brand-primary-200);
}

.ggl-ranking-table tbody td.ggl-ranking-table__col-rank {
  z-index: 3;
  background: var(--card-bg);
}

.ggl-ranking-table tbody td.ggl-ranking-table__col-name {
  z-index: 2;
  background: var(--card-bg);
}

.ggl-ranking-table tbody tr.ggl-ranking-table__row--current td.ggl-ranking-table__col-rank,
.ggl-ranking-table tbody tr.ggl-ranking-table__row--current td.ggl-ranking-table__col-name {
  background: rgba(115, 200, 168, 0.12);
}

[data-theme="dark"] .ggl-ranking-table tbody tr.ggl-ranking-table__row--current td.ggl-ranking-table__col-rank,
[data-theme="dark"] .ggl-ranking-table tbody tr.ggl-ranking-table__row--current td.ggl-ranking-table__col-name {
  background: rgba(115, 200, 168, 0.08);
}

/* Flex-Parent (.page-content): Kind darf schrumpfen, sonst wächst die Seite mit der Tabellenbreite */
.page-content--admin-members-table {
  min-width: 0;
}

.page-content--admin-members-table > .data-table-scroll-outer {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.page-content--admin-members-table > .data-table-scroll-outer > .data-table-scroll-inner {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
}

/* Mitgliederliste Admin: horizontale Tabelle, erste Spalte (Rufname) sticky bei schmalem Viewport */
.admin-members-table {
  width: max-content;
  min-width: 100%;
}

.admin-members-table th:first-child,
.admin-members-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--color-border-subtle);
  white-space: nowrap;
  min-width: max(11rem, max-content);
}

.admin-members-table thead th:first-child {
  z-index: 3;
  background: var(--color-surface-secondary);
}

[data-theme="light"] .admin-members-table thead th:first-child {
  background: var(--brand-primary-200);
}

.admin-members-table tbody td:first-child {
  background: var(--card-bg);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.admin-members-table tbody tr.admin-members-table__row--inactive {
  opacity: 0.72;
}

.admin-members-table tbody tr.admin-members-table__row--inactive td:first-child {
  background: var(--card-bg);
}

.admin-members-table .admin-members-table__col-email {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-members-table .admin-members-table__col-adresse,
.admin-members-table .admin-members-table__col-kleider,
.admin-members-table .admin-members-table__col-fuehrerschein {
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-members-table .admin-members-table__col-status {
  text-align: left;
  white-space: normal;
  vertical-align: middle;
}

.admin-members-table .admin-members-table__status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
}

.admin-members-table .admin-members-table__actions {
  text-align: right;
  vertical-align: middle;
}

.admin-members-table .admin-members-table__actions-inner {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Event-Detail: Teilnehmerliste (wie data-table + GGL-Spaltenlogik) */
.events-participants-table .events-participants-table__col-member {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.events-participants-table .events-participants-table__col-status {
  text-align: right;
  white-space: nowrap;
}

.events-participants-table tbody tr.events-participants-table__row--current {
  background: rgba(115, 200, 168, 0.12);
}

.events-participants-table tbody tr.events-participants-table__row--current .events-participants-table__col-member {
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .events-participants-table tbody tr.events-participants-table__row--current {
  background: rgba(115, 200, 168, 0.08);
}

/* BillBro Event-Detail: Schätzungsrangliste (wie GGL: data-table + Spalten-Modifier) */
.card[id^="billbro-"],
#manual-total {
  scroll-margin-top: var(--space-10);
}

.billbro-guess-ranking-table .billbro-guess-ranking-table__col-rank {
  width: 3.25rem;
  text-align: center;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.billbro-guess-ranking-table .billbro-guess-ranking-table__col-name {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.billbro-guess-ranking-table .billbro-guess-ranking-table__col-num {
  text-align: right;
  white-space: nowrap;
}

.billbro-guess-ranking-table tbody tr.billbro-guess-ranking-table__row--current {
  background: rgba(115, 200, 168, 0.12);
}

.billbro-guess-ranking-table tbody tr.billbro-guess-ranking-table__row--current .billbro-guess-ranking-table__col-name {
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .billbro-guess-ranking-table tbody tr.billbro-guess-ranking-table__row--current {
  background: rgba(115, 200, 168, 0.08);
}

.billbro-guess-ranking-table tbody tr.billbro-guess-ranking-table__row--rank-1 .billbro-guess-ranking-table__col-rank {
  color: var(--brand-accent-500);
}

.billbro-guess-ranking-table tbody tr.billbro-guess-ranking-table__row--rank-2 .billbro-guess-ranking-table__col-rank {
  color: var(--brand-primary-400);
}

.billbro-guess-ranking-table tbody tr.billbro-guess-ranking-table__row--rank-3 .billbro-guess-ranking-table__col-rank {
  color: var(--brand-secondary-400);
}

.ggl-chart__intro {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Events-Index Tab Statistiken: Inline-Stern + Durchschnittsnote */
.events-stats-inline-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  vertical-align: middle;
  white-space: nowrap;
}

.events-stats-inline-rating__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.metrics-insight-panel .disclosure--in-insight {
  margin-bottom: 0;
}

.metrics-insight-panel .disclosure--in-insight .disclosure__summary {
  padding-top: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: none;
  letter-spacing: normal;
}

.metrics-insight-panel .disclosure--in-insight .disclosure__content {
  padding-top: var(--space-2);
}

/* Events-Index Statistiken: Restaurant-Bewertungen (sortierbare Tabelle) */
.events-stats-restaurant-ratings-table .events-stats-restaurant-ratings-table__col-name {
  min-width: 8rem;
  font-weight: var(--font-medium);
}

.events-stats-restaurant-ratings-table .events-stats-restaurant-ratings-table__col-score,
.events-stats-restaurant-ratings-table .events-stats-restaurant-ratings-table__col-count {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.events-stats-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
}

.events-stats-sort-btn:hover,
.events-stats-sort-btn:focus-visible {
  color: var(--color-interactive-primary);
}

.events-stats-sort-btn:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.events-stats-sort-btn--active {
  color: var(--color-interactive-primary);
}

.data-table.events-stats-restaurant-ratings-table td:last-child,
.data-table.events-stats-restaurant-ratings-table th:last-child {
  text-align: center;
}

.data-table.events-stats-restaurant-ratings-table th.events-stats-restaurant-ratings-table__col-score,
.data-table.events-stats-restaurant-ratings-table th.events-stats-restaurant-ratings-table__col-count {
  text-align: center;
}

.data-table.events-stats-restaurant-ratings-table th.events-stats-restaurant-ratings-table__col-name {
  text-align: left;
}

.data-table.events-stats-restaurant-ratings-table th.events-stats-restaurant-ratings-table__col-score .events-stats-sort-btn,
.data-table.events-stats-restaurant-ratings-table th.events-stats-restaurant-ratings-table__col-count .events-stats-sort-btn {
  width: 100%;
  justify-content: center;
}

.events-stats-restaurant-block {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.events-stats-restaurant-block__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.events-stats-restaurant-block__heading .icon {
  flex-shrink: 0;
}

.events-stats-restaurant-block__caption {
  margin-top: 0;
}

/* Events-Index Tab Statistiken (Monatsessen-Charts) */
.events-stats-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.events-stats-chart__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

.events-stats-summary-insights {
  margin-bottom: var(--space-4);
}

.events-stats-chart__scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.events-stats-chart__container {
  position: relative;
  min-width: 280px;
  height: 240px;
}

.events-stats-chart--pie .events-stats-chart__pie-wrap {
  position: relative;
  max-width: 22rem;
  margin: 0 auto;
  height: 280px;
}

@media (max-width: 768px) {
  .events-stats-chart__container {
    min-width: 260px;
  }
}

.ggl-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ggl-chart__scroll {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
}

.ggl-chart__container {
  position: relative;
  height: 480px;
  min-width: 400px;
  flex-shrink: 0;
}

.ggl-chart__labels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 160px;
  flex-shrink: 0;
}

.ggl-chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ggl-chart__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

.ggl-chart__legend-rank {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  min-width: 22px;
}

.ggl-chart__legend-label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.ggl-chart__note {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.ggl-chart-expand-btn .icon {
  width: 1rem;
  height: 1rem;
}

.ggl-chart-modal__container {
  max-width: min(1200px, 98vw);
  max-height: 96vh;
}

.ggl-chart-modal__body {
  padding: var(--space-4);
}

.ggl-chart--fullscreen .ggl-chart__container {
  height: min(80vh, 900px);
  min-width: max(780px, 75vw);
}

.ggl-chart--fullscreen .ggl-chart__labels {
  min-width: 200px;
}

.events-stats-chart-expand-btn .icon {
  width: 1rem;
  height: 1rem;
}

/* Buchhaltung Statistik: Sektion mit Heading + Tabelle direkt im Panel (kein Card) */
.accounting-stats-block {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.accounting-stats-block__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.accounting-stats-block__heading .icon {
  flex-shrink: 0;
}

/* Buchhaltung Statistik: Chart-Hülle (analog events-stats-chart) */
.accounting-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accounting-chart__scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.accounting-chart__container {
  position: relative;
  min-width: 280px;
  height: 280px;
}

.accounting-chart--pie .accounting-chart__pie-wrap {
  position: relative;
  max-width: 22rem;
  margin: 0 auto;
  height: 280px;
}

.accounting-chart-expand-btn .icon {
  width: 1rem;
  height: 1rem;
}

.accounting-chart-modal__container {
  max-width: min(1200px, 98vw);
  max-height: 96vh;
}

.accounting-chart-modal__body {
  padding: var(--space-4);
}

.accounting-chart--fullscreen .accounting-chart__container {
  min-height: min(80vh, 900px);
}

.accounting-chart--fullscreen .accounting-chart__pie-wrap {
  max-width: min(60vh, 700px);
  height: min(70vh, 700px);
}

@media (max-width: 560px) {
  .ggl-chart-expand-btn,
  .events-stats-chart-expand-btn,
  .accounting-chart-expand-btn {
    min-width: 2rem;
    padding: var(--space-1);
  }
}

.events-stats-chart-modal__container {
  max-width: min(1200px, 98vw);
  max-height: 96vh;
}

.events-stats-chart-modal__body {
  padding: var(--space-4);
}

.events-stats-chart--fullscreen .events-stats-chart__container {
  min-height: min(80vh, 900px);
}

@media (max-width: 768px) {
  .ggl-chart__container {
    height: 420px;
    min-width: 360px;
  }

  .ggl-chart-modal__container {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .ggl-chart-modal__body {
    padding: var(--space-3);
  }

  .ggl-chart--fullscreen .ggl-chart__container {
    height: min(82vh, 680px);
    min-width: max(560px, 90vw);
  }

  .ggl-chart--fullscreen .ggl-chart__labels {
    min-width: 160px;
  }

  .events-stats-chart-modal__container {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .events-stats-chart-modal__body {
    padding: var(--space-3);
  }

  .events-stats-chart--fullscreen .events-stats-chart__container {
    min-height: min(82vh, 680px);
  }
}

/* ============================================
   INFO ROW (replaces stats-item)
   ============================================ */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--space-4);
}

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

.info-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.info-row__value {
  color: var(--color-text-secondary);
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  min-width: 0;
}

.info-row__value--actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.info-row__value--actions .form {
  margin: 0;
}

.ranking-diff {
  color: var(--color-text-tertiary);
}

.info-row__link {
  color: var(--color-text-link);
  text-decoration: none;
}

.info-row__link:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* ============================================
   FORM COMPONENTS
   ============================================ */
.form-field {
  margin-bottom: var(--space-5);
}

.form-field:last-child {
  margin-bottom: 0;
}

.form-field__label {
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.form-field__required {
  color: var(--color-error);
}

.form-field__input,
.form-field__select,
.form-field__textarea {
  width: 100%;
  padding: var(--input-padding);
  border: 2px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--text-base);
  font-family: inherit;
  transition: all var(--transition-fast);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(220, 105, 60, 0.1);
}

.form-field__textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field__error {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-error);
  font-size: var(--text-sm);
}

.form-field__help {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

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

.form-row--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-row--align-end {
  align-items: flex-end;
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

.form--inline {
  display: inline;
}

/* Utility: Vertikale Stacks mit definierter Lücke */
.stack-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.stack-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Utility: Beschränkte Breite */
.max-320 {
  max-width: 320px;
  width: 100%;
}

.max-400 {
  max-width: 25rem;
  width: 100%;
}

/* Jahresplanung — Einleitungsliste */
.events-year-planning-list {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

.events-year-planning-list li {
  margin-bottom: var(--space-2);
}

/* Utility: Margins */
.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

/* Form field spacing helper */
.form-field--no-margin {
  margin: 0;
}

/* Page actions modifiers */
.page-actions--centered {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Section subtitles (small heading inside cards) */
.section-subtitle {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

/* Text helpers */
.text-secondary {
  color: var(--color-text-secondary);
}

.page-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* Table utilities */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-3);
}

.table th {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-align: left;
}

.table td {
  color: var(--color-text-secondary);
}

.table thead tr {
  border-bottom: 1px solid var(--color-border-default);
}

[data-theme="light"] .table thead th {
  background: var(--brand-primary-200);
}

.table td:last-child,
.table th:last-child {
  text-align: right;
}

.table-responsive {
  overflow-x: auto;
}

/* RSVP-Formular in Tabellenzellen (Events-Übersicht Kommend/Archiv) */
.table td:has(.status-form),
.data-table td:has(.status-form) {
  vertical-align: middle;
}

.table td .status-form,
.data-table td .status-form {
  margin: 0;
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .btn {
    width: 100%;
  }
}


/* ============================================
   ALERT / INFO BANNER
   ============================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  border-left: 4px solid;
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert__message {
  color: var(--color-text-secondary);
}

.alert__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-top: var(--space-3);
  width: 100%;
}

@media (min-width: 640px) {
  .alert {
    flex-wrap: nowrap;
  }
  
  .alert__actions {
    margin-top: 0;
    margin-left: auto;
    width: auto;
  }
}

/* Alert Variants */
.alert--info {
  background: var(--color-bg-subtle);
  border-left-color: var(--brand-primary-600);
}

.alert--info .alert__icon {
  color: var(--brand-primary-600);
}

.alert--success {
  background: rgba(16, 185, 129, 0.1);
  border-left-color: var(--color-success);
}

.alert--success .alert__icon {
  color: var(--color-success);
}

.alert--warning {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: var(--color-warning);
}

.alert--warning .alert__icon {
  color: var(--color-warning);
}

.alert--error {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: var(--color-error);
}

.alert--error .alert__icon {
  color: var(--color-error);
}

/* ============================================
   EMPTY STATE (Tab-/Listen-Leerzustand)
   REDESIGN.md §5.2 — nicht für kritische System-Alerts
   ============================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-subtle);
}

.empty-state__icon {
  display: flex;
  margin-bottom: var(--space-3);
  color: var(--color-text-tertiary);
}

.empty-state__icon .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.empty-state__message {
  margin: 0;
  max-width: 28rem;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.empty-state--filtered .empty-state__icon {
  color: var(--color-text-secondary);
}

/* Participation Status */
.participation-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.participation-status--confirmed {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.participation-status--declined {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.participation-status--pending {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* ============================================
   BADGE
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge--primary {
  background: var(--brand-accent-500);
  color: white;
}

.badge--success {
  background: var(--color-success);
  color: white;
}

.badge--warning {
  background: var(--color-warning);
  color: var(--brand-primary-900);
}

.badge--error {
  background: var(--color-error);
  color: white;
}

.badge--info {
  background: var(--color-info);
  color: white;
}

/* ============================================
   MODAL
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal[data-open="true"] {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  animation: fadeIn 200ms ease;
}

.modal__container {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp 200ms ease;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  /* Wie `.card__header` — bisher transparent über Modal-Body */
  background: var(--color-surface-secondary);
}

[data-theme="light"] .modal__header {
  background: var(--brand-primary-200);
}

.modal__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.modal__close {
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}

.modal__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   TABS
   ============================================ */
.tabs {
  position: relative;
  margin-bottom: var(--space-6);
  overflow: hidden;
}

/* Tab-Wechsel mit #gourmen-tabs: Viewport richtet auf Tab-Leiste aus (nicht Seitenkopf) */
#gourmen-tabs {
  scroll-margin-top: var(--space-10);
}

.tabs__nav {
  display: flex;
  gap: 0; /* Kein Gap, Tabs haben Trennstriche */
  margin-bottom: var(--space-5);
  position: relative;
  min-height: var(--tabs-nav-height, 56px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  scroll-behavior: smooth;
  padding-left: 0;
  padding-right: 0;
}

/* Hide scrollbar for Chrome/Safari */
.tabs__nav::-webkit-scrollbar {
  display: none;
}

/* Fades am Container, gesteuert über Klassen */
.tabs::before,
.tabs::after {
  content: '';
  position: absolute;
  top: 0;
  width: 56px;
  height: var(--tabs-nav-height, 56px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tabs::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-base) 0%, transparent 80%);
}

.tabs::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-base) 0%, transparent 80%);
}

.tabs--fade-left::before {
  opacity: 1;
}

.tabs--fade-right::after {
  opacity: 1;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  border-right: 1px solid var(--color-border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none !important;
  flex-shrink: 0;
}

.tabs__tab .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Light Mode: Mehr Kontrast für inaktive Tabs */
[data-theme="light"] .tabs__tab {
  background: var(--brand-primary-100);
}

/* Dark Mode: Dunklerer Hintergrund für inaktive Tabs */
[data-theme="dark"] .tabs__tab {
  background: var(--brand-primary-800);
}

/* Kein Trennstrich am letzten Tab */
.tabs__tab:last-child {
  border-right: none;
}

.tabs__tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  text-decoration: none !important;
}

.tabs__tab--active {
  background: var(--color-surface);
  color: var(--color-interactive-primary);
  border-bottom-color: var(--color-interactive-primary);
  font-weight: var(--font-bold);
}


.tabs__panel {
  display: none;
}

.tabs__panel--active {
  display: block;
  animation: fadeIn 200ms ease;
}

/* Dark: Pillen wie inaktive Panel-Tabs + Filter-Chips in disclosure (eine Mischung) */
[data-theme="dark"] {
  --chrome-inactive-pill-bg: color-mix(in srgb, var(--color-bg-base) 58%, var(--color-surface) 42%);
}

/* Panel + Lasche: Tab-Leiste = Seitenhintergrund; inaktive Tabs leicht getönt, ohne Rand (REDESIGN — Events-Index Pilot) */
.tabs.tabs--panel {
  --tabs-panel-body-bg: var(--color-surface);
  --tabs-panel-fade-edge: var(--color-bg-base);
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: transparent;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tabs.tabs--panel .tabs__nav {
  margin-bottom: 0;
  padding: var(--space-2) 0 0;
  background: transparent;
  border-bottom: none;
  gap: var(--space-2);
  min-height: calc(var(--tabs-nav-height, 56px) - var(--space-1));
}

.tabs.tabs--panel::before {
  background: linear-gradient(to right, var(--tabs-panel-fade-edge) 0%, transparent 80%);
}

.tabs.tabs--panel::after {
  background: linear-gradient(to left, var(--tabs-panel-fade-edge) 0%, transparent 80%);
}

.tabs.tabs--panel .tabs__tab {
  background: var(--color-bg-muted);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Dark: inaktive Panel-Tabs — gleiche Fläche wie Filter-Chips (`--chrome-inactive-pill-bg`) */
[data-theme="dark"] .tabs.tabs--panel .tabs__tab:not(.tabs__tab--active) {
  background: var(--chrome-inactive-pill-bg);
}

.tabs.tabs--panel .tabs__tab:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.tabs.tabs--panel .tabs__tab--active {
  background: var(--tabs-panel-body-bg);
  color: var(--color-interactive-primary);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: var(--font-bold);
  position: relative;
  z-index: 1;
}

.tabs.tabs--panel .tabs__tab--active:hover {
  background: var(--tabs-panel-body-bg);
  color: var(--color-interactive-primary);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tabs.tabs--panel .tabs__content {
  background: var(--tabs-panel-body-bg);
  padding: var(--space-4);
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Nur wenn die Tabelle direkt unter der Tab-Leiste beginnt (nicht nach Uebersichtskacheln etc.) */
.tabs.tabs--panel .tabs__panel--active > .data-table-wrap:first-child {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tabs.tabs--panel .tabs__panel--active > .card:first-of-type:not(.card--filter),
.tabs.tabs--panel .tabs__panel--active > .empty-state:first-of-type {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* GGL (Spielverlauf) & Events → Statistiken: Chart-Karten-Header explizit wie Standard-Card */
.tabs.tabs--panel .tabs__content .card > .card__header {
  background: var(--color-surface-secondary);
}

[data-theme="light"] .tabs.tabs--panel .tabs__content .card > .card__header {
  background: var(--brand-primary-200);
}

@media (max-width: 640px) {
  .tabs.tabs--panel .tabs__content {
    padding: var(--space-3);
  }
}

.form-actions--start {
  justify-content: flex-start;
}

/* ============================================
   PLACES AUTOCOMPLETE (Event erstellen/bearbeiten)
   ============================================ */
.places-autocomplete {
  position: relative;
  margin-top: var(--space-2);
}

.places-loading {
  display: none;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.places-results {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-dropdown) + 4);
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.places-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.places-result:last-child {
  border-bottom: none;
}

.places-result:hover,
.places-result:focus-visible {
  background: var(--color-surface-hover);
}

.places-result-main {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.35;
}

.places-result-secondary {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.35;
}

.places-no-results,
.places-error {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.places-no-results {
  color: var(--color-text-secondary);
}

.places-error {
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.08);
}

.places-details {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.places-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.places-details-header h3,
.places-details-header h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.places-details-content,
.places-details-body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.places-detail-item {
  line-height: 1.45;
}

.places-detail-item a,
.places-details-body a {
  color: var(--color-text-link);
  text-decoration: none;
}

.places-detail-item a:hover,
.places-details-body a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

.places-details-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.places-close,
.places-details .close-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1;
  font-size: var(--text-lg);
  transition: all var(--transition-fast);
}

.places-close:hover,
.places-details .close-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-interactive-primary);
  background: var(--color-surface-hover);
}

[data-theme="dark"] .places-results {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-elevated);
}

[data-theme="dark"] .places-result:hover,
[data-theme="dark"] .places-result:focus-visible {
  background: var(--chrome-inactive-pill-bg);
}

[data-theme="dark"] .places-details {
  background: var(--color-surface-elevated);
}

/* ============================================
   VISUAL FEEDBACK - Active States
   ============================================ */

/* Enhanced active/pressed states for interactive elements */
.btn:active:not(:disabled),
.card:active,
a.card-link:active {
  transform: scale(0.98);
  transition: transform 100ms ease;
}

/* Hover states only on devices that support hover */
@media (hover: hover) {
  .card--interactive {
    cursor: pointer;
    transition: transform var(--transition-fast), 
                box-shadow var(--transition-fast);
  }
  
  .card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  pointer-events: none;
}

@media (max-width: 640px) {
  .toast-container {
    top: auto;
    bottom: calc(var(--space-4) + var(--safe-area-bottom));
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid;
  pointer-events: auto;
  animation: slideInRight 200ms ease;
}

@media (max-width: 640px) {
  .toast {
    animation: slideInUp 200ms ease;
  }
}

.toast--success {
  border-left-color: var(--brand-secondary-600);
}

.toast--error {
  border-left-color: var(--brand-accent-600);
}

.toast--warning {
  border-left-color: var(--brand-warm-600);
}

.toast--info {
  border-left-color: var(--brand-primary-600);
}

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.toast--success .toast__icon {
  color: var(--brand-secondary-600);
}

.toast--error .toast__icon {
  color: var(--brand-accent-600);
}

.toast--warning .toast__icon {
  color: var(--brand-warm-600);
}

.toast--info .toast__icon {
  color: var(--brand-primary-600);
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.toast__message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: var(--text-xl);
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.toast__close:hover {
  color: var(--color-text-primary);
}

.toast__action {
  margin-top: var(--space-2);
}

.toast__action .btn {
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */

.scroll-to-top {
  position: fixed;
  bottom: calc(var(--space-6) + var(--safe-area-bottom));
  right: var(--space-4);
  width: 48px;
  height: 48px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--transition-normal), 
              visibility var(--transition-normal),
              transform var(--transition-normal),
              background-color var(--transition-fast);
  z-index: var(--z-fixed);
}

.scroll-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--color-surface-overlay);
}

.scroll-to-top:active {
  transform: scale(0.95);
}

.scroll-to-top .icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-primary);
}

/* Light Mode: Verbesserter Kontrast */
[data-theme="light"] .scroll-to-top {
  background: var(--brand-primary-700);
  border-color: var(--brand-primary-600);
}

[data-theme="light"] .scroll-to-top .icon {
  color: #ffffff;
}

[data-theme="light"] .scroll-to-top:hover {
  background: var(--brand-primary-600);
}

/* Mobile: Position above bottom nav */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: calc(80px + var(--safe-area-bottom));
  }
}

/* ============================================
   FILTER CHIPS
   ============================================ */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-secondary); /* match card header bg */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.chip:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-default);
  text-decoration: none;
}

.chip:focus-visible,
.chip:active {
  text-decoration: none;
}

.chip--active {
  background: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: white;
}

.chip--active:hover {
  background: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
}

.chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.chip--active .chip__count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  margin-right: calc(var(--space-2) * -1);
  border-radius: var(--radius-full);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.chip__remove:hover {
  opacity: 1;
}

/* Color variants for semantic chips */
.chip--accent {
  background: var(--brand-accent-100);
  border-color: var(--brand-accent-200);
  color: var(--brand-accent-900);
}

.chip--success {
  background: #e6f6f0;
  border-color: #c8ecde;
  color: var(--status-success-light);
}

.chip--info {
  background: var(--color-surface-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}

/* Filter-Zusammenfassung: Chip wie inaktive Panel-Tabs (Light: --color-bg-muted) */
[data-theme="light"] .card--filter .disclosure__summary .chip.chip--info {
  background: var(--color-bg-muted);
  border-color: var(--color-border-subtle);
}

.chip--danger {
  background: var(--brand-warm-50);
  border-color: var(--brand-warm-200);
  color: var(--brand-warm-800);
}

[data-theme="dark"] .chip--accent {
  background: var(--brand-accent-600);
  border-color: var(--brand-accent-500);
  color: #fff;
}

[data-theme="dark"] .chip--success {
  background: #155f3e;
  border-color: #1c8053;
  color: #e6fff4;
}

[data-theme="dark"] .chip--info {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .card--filter .disclosure__summary .chip.chip--info {
  background: var(--chrome-inactive-pill-bg);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .chip--danger {
  background: var(--brand-warm-700);
  border-color: var(--brand-warm-600);
  color: #ffecec;
}

/* Rating Chips (1-5, abgestuft von Rot -> Orange -> Grün) */
.chip.rating-chip--1 {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.chip.rating-chip--2 {
  background: #fff4e5;
  border-color: #ffd7a0;
  color: #c05621;
}

.chip.rating-chip--3 {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.chip.rating-chip--4 {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

.chip.rating-chip--5 {
  background: #e6f6f0;
  border-color: #c8ecde;
  color: var(--status-success-light);
}

[data-theme="dark"] .chip.rating-chip--1 {
  background: #7f1d1d;
  border-color: #b91c1c;
  color: #fee2e2;
}

[data-theme="dark"] .chip.rating-chip--2 {
  background: #7c2d12;
  border-color: #ea580c;
  color: #ffedd5;
}

[data-theme="dark"] .chip.rating-chip--3 {
  background: #7c2d12;
  border-color: #f97316;
  color: #ffedd5;
}

[data-theme="dark"] .chip.rating-chip--4 {
  background: #14532d;
  border-color: #22c55e;
  color: #dcfce7;
}

[data-theme="dark"] .chip.rating-chip--5 {
  background: #0f5132;
  border-color: #198754;
  color: #e6fff4;
}

/* Rating Chips (dynamisch via CSS-Variable --rating-hue; 0=Rot, 120=Grün) */
.chip.rating-chip--dynamic {
  background: hsl(var(--rating-hue, 0), 85%, 90%);
  border-color: hsl(var(--rating-hue, 0), 70%, 65%);
  color: hsl(var(--rating-hue, 0), 45%, 25%);
}

[data-theme="dark"] .chip.rating-chip--dynamic {
  background: hsl(var(--rating-hue, 0), 35%, 25%);
  border-color: hsl(var(--rating-hue, 0), 45%, 35%);
  color: hsl(var(--rating-hue, 0), 85%, 92%);
}

.landing-restaurants-table .chip.rating-chip--dynamic {
  border: 1px solid transparent;
  background:
    linear-gradient(
        hsl(var(--rating-hue, 0), 85%, 90%),
        hsl(var(--rating-hue, 0), 85%, 90%)
      )
      padding-box,
    var(--gradient-brand-text) border-box;
}

.landing-restaurants-table .chip.rating-chip--dynamic:hover {
  background:
    linear-gradient(
        hsl(var(--rating-hue, 0), 78%, 84%),
        hsl(var(--rating-hue, 0), 78%, 84%)
      )
      padding-box,
    var(--gradient-brand-text) border-box;
  border-color: transparent;
}

[data-theme="dark"] .landing-restaurants-table .chip.rating-chip--dynamic {
  background:
    linear-gradient(
        hsl(var(--rating-hue, 0), 35%, 25%),
        hsl(var(--rating-hue, 0), 35%, 25%)
      )
      padding-box,
    var(--gradient-brand-text) border-box;
}

[data-theme="dark"] .landing-restaurants-table .chip.rating-chip--dynamic:hover {
  background:
    linear-gradient(
        hsl(var(--rating-hue, 0), 38%, 30%),
        hsl(var(--rating-hue, 0), 38%, 30%)
      )
      padding-box,
    var(--gradient-brand-text) border-box;
  border-color: transparent;
}

/* Chip-Select (Dropdown-Chips mit Arrow) */
.chip-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chip-select-wrap::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  background-color: currentColor;
  -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='6 9 12 15 18 9'/%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='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.chip-select {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  min-width: max-content;
  max-width: 100%;
  white-space: nowrap;
  background: none;
}

.chip-select:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.chip-select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}

/* Varianten analog zu chip danger/warning/success */
.chip-select--bestellt { /* Offen → Danger */
  background: var(--brand-warm-50);
  border-color: var(--brand-warm-200);
  color: var(--brand-warm-800);
}

.chip-select--wird_geliefert { /* Bestellt → Warning/Orange */
  background: var(--brand-accent-100);
  border-color: var(--brand-accent-200);
  color: var(--brand-accent-900);
}

.chip-select--geliefert { /* Geliefert → Success */
  background: #e6f6f0;
  border-color: #c8ecde;
  color: var(--status-success-light);
}

.chip-select--yes {
  background: #e6f6f0;
  border-color: #c8ecde;
  color: var(--status-success-light);
}

.chip-select--no {
  background: var(--brand-warm-50);
  border-color: var(--brand-warm-200);
  color: var(--brand-warm-800);
}

.chip-select--neutral {
  background: var(--brand-accent-100);
  border-color: var(--brand-accent-200);
  color: var(--brand-accent-900);
}

[data-theme="dark"] .chip-select-wrap::after {
  background-color: #fff;
}

[data-theme="dark"] .chip-select--bestellt {
  background: var(--brand-warm-700);
  border-color: var(--brand-warm-600);
  color: #ffecec;
}

[data-theme="dark"] .chip-select--wird_geliefert {
  background: var(--brand-accent-600);
  border-color: var(--brand-accent-500);
  color: #fff;
}

[data-theme="dark"] .chip-select--geliefert {
  background: #155f3e;
  border-color: #1c8053;
  color: #e6fff4;
}

[data-theme="dark"] .chip-select--yes {
  background: #155f3e;
  border-color: #1c8053;
  color: #e6fff4;
}

[data-theme="dark"] .chip-select--no {
  background: var(--brand-warm-700);
  border-color: var(--brand-warm-600);
  color: #ffecec;
}

[data-theme="dark"] .chip-select--neutral {
  background: var(--brand-accent-600);
  border-color: var(--brand-accent-500);
  color: #fff;
}

/* ============================================
   SEARCH FIELD
   ============================================ */

.search-field {
  position: relative;
  width: 100%;
}

.search-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-11);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.search-field__input:focus {
  outline: none;
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 3px var(--color-interactive-primary-subtle);
}

.search-field__input::placeholder {
  color: var(--color-text-tertiary);
}

.search-field__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.search-field__clear {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-tertiary);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.search-field__clear:hover {
  background: var(--color-surface-overlay);
  color: var(--color-text-primary);
}

.search-field--has-value .search-field__clear {
  display: flex;
}

.search-field__clear .icon {
  width: 16px;
  height: 16px;
}

/* ============================================
   ACCORDION
   ============================================ */

.accordion {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.accordion-item__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.accordion-item__header:hover {
  background: var(--color-surface-overlay);
}

.accordion-item__header .icon:first-child {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

.accordion-item__title {
  flex: 1;
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.accordion-item__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}

.accordion-item--open .accordion-item__icon {
  transform: rotate(180deg);
}

.accordion-item__content {
  padding: 0 var(--space-4) var(--space-4) var(--space-4);
  background: var(--color-bg-primary);
  display: none;
  animation: slideDown 200ms ease;
}

.accordion-item--open .accordion-item__content {
  display: block;
}

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

/* ============================================
   PROGRESSIVE DISCLOSURE (Details/Summary)
   ============================================ */

.disclosure {
  margin-bottom: var(--space-4);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--font-medium);
  color: var(--color-interactive-primary);
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

.disclosure__summary:hover {
  color: var(--color-interactive-primary-hover);
}

.disclosure__summary .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.disclosure[open] .disclosure__summary .icon {
  transform: rotate(180deg);
}

.disclosure__content {
  padding: var(--space-4) 0;
  animation: slideDown 200ms ease;
}

/* ============================================
   TOOL SURFACE — Sekundärleiste (Filter, Kontext)
   REDESIGN.md §5.2.2 — gemeinsame Optik mit .context-actions
   ============================================ */

.tool-surface {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

/* Dark: Leiste = Seitenhintergrund; Rand = frühere Flächenfarbe (--color-surface-secondary) */
[data-theme="dark"] .tool-surface {
  background: var(--color-bg-base);
  border-color: var(--color-surface-secondary);
}

[data-theme="light"] .tool-surface {
  background: var(--brand-primary-50);
  border-color: var(--color-border-default);
}

/* Filter-Card: flach, kein Hover-Lift; Fläche über .tool-surface */
.card.card--filter.tool-surface {
  box-shadow: none;
  margin-bottom: var(--layout-page-header-after-gap);
}

.card.card--filter.tool-surface:hover {
  box-shadow: none;
}

.card--filter .card__body {
  padding: var(--space-2) var(--space-3);
}

.card--filter .disclosure {
  margin: 0;
}

/* TOOL STRIP — Sekundärleiste (Filter, Planung, …): docs/REDESIGN.md §5.2.3 */
/* Kopfzeile: Primary-Tinte, Chevron in summary, optional Chips */
.card--filter .disclosure__summary {
  padding: var(--space-1) 0;
  min-height: 36px;
  box-sizing: border-box;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-interactive-primary);
}

.card--filter .disclosure__summary:hover {
  color: var(--color-interactive-primary-hover);
}

.card--filter .disclosure__summary .icon {
  width: 16px;
  height: 16px;
}

.card--filter .disclosure__content {
  padding: var(--space-2) 0 0;
}

/* Nur Aktionen unter disclosure__content — mit Feldern: .form + .form-actions (§5.2.3) */
.card--filter .disclosure__content > .tool-strip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: none;
}

.card--filter .tool-strip__actions .btn {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* Filter-Inhalt: gleiche Button-Höhe wie Kopfzeile (z. B. Filtern, Formulare) */
.card--filter .disclosure__content .btn {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .card--filter .disclosure__content > .tool-strip__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .card--filter .tool-strip__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Events erfassen: nicht direktes Kind von disclosure__content — extra Abstand gestapelt */
  .card--filter .events-index-capture .tool-strip__actions,
  .card--filter .accounting-index-actions .tool-strip__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding-top: var(--space-1);
  }
}

/* Planung unter Page-Header: gleiche Hülle wie Filter-Card */
.card.card--filter.tool-surface.events-planning-strip {
  margin-bottom: var(--layout-page-header-after-gap);
}

/* Events-Index: „Events erfassen“ unter Filter (gemeinsame Disclosure) */
.card--filter .events-index-capture,
.card--filter .accounting-index-actions {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.card--filter .events-index-capture .section-subtitle,
.card--filter .accounting-index-actions .section-subtitle {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Gleiche Flex-Basis wie direktes .tool-strip__actions unter disclosure (gap wirkt nur mit flex) */
.card--filter .events-index-capture .tool-strip__actions,
.card--filter .accounting-index-actions .tool-strip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: none;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
  color: var(--color-text-link);
}

.breadcrumbs__separator {
  color: var(--color-text-tertiary);
  user-select: none;
}

.breadcrumbs__current {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

/* ============================================
   BILLBRO WORKFLOW (Event-Detail — Phasen)
   ============================================ */

.billbro-workflow-block {
  margin-bottom: var(--space-6);
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.billbro-workflow {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.billbro-workflow__hint {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.billbro-workflow__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.billbro-workflow__step--done {
  color: var(--color-text-secondary);
}

.billbro-workflow__step--current {
  color: var(--color-interactive-primary);
  font-weight: var(--font-semibold);
}

.billbro-workflow__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.billbro-workflow__step--current .billbro-workflow__index {
  border-color: var(--color-interactive-primary);
  background-color: transparent;
  color: var(--color-interactive-primary);
}

/* ============================================
   EVENT RATINGS — Tabelle alle Bewertungen (Event-Detail Tab)
   ============================================ */

#event-ratings-form,
#event-ratings-actions,
#event-ratings-all {
  scroll-margin-top: var(--space-10);
}

.event-ratings-toolbar {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.event-ratings-toolbar__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.event-ratings-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .event-ratings-toolbar__actions {
    width: 100%;
  }

  .event-ratings-toolbar__actions > a.btn,
  .event-ratings-toolbar__actions > form {
    flex: 1 1 100%;
  }

  .event-ratings-toolbar__actions > form .btn {
    width: 100%;
  }
}

.event-ratings-all {
  margin-top: var(--space-6);
}

.event-ratings-all__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.event-ratings-all__heading .icon {
  flex-shrink: 0;
}

.events-ratings-others-table .events-ratings-others-table__col-member {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
  min-width: 7rem;
}

.events-ratings-others-table .events-ratings-others-table__col-score {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.events-ratings-others-table .events-ratings-others-table__col-highlight {
  text-align: left;
  min-width: 8rem;
  max-width: 22rem;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
  vertical-align: top;
}

/* Letzte Spalte: globales .data-table td:last-child { text-align: right } überschreiben */
.data-table.events-ratings-others-table th.events-ratings-others-table__col-highlight,
.data-table.events-ratings-others-table td.events-ratings-others-table__col-highlight {
  text-align: left;
}

.events-ratings-others-table .events-ratings-others-table__highlight-text {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.events-ratings-others-table .events-ratings-others-table__dash {
  color: var(--color-text-tertiary);
}

.events-ratings-others-table tbody tr.events-ratings-others-table__row--current {
  background: rgba(115, 200, 168, 0.12);
}

.events-ratings-others-table tbody tr.events-ratings-others-table__row--current .events-ratings-others-table__col-member {
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .events-ratings-others-table tbody tr.events-ratings-others-table__row--current {
  background: rgba(115, 200, 168, 0.08);
}

/* ============================================
   THEME TOGGLE SWITCH
   ============================================ */

#theme-toggle.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
}

.theme-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 32px;
  padding: 0 7px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(27, 35, 46, 0.9);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.theme-switch__icon {
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.85;
  pointer-events: none;
}

.theme-switch__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: left var(--transition-fast), background var(--transition-fast);
}

[data-theme="dark"] .theme-switch__thumb {
  left: 29px;
  background: var(--brand-primary-950);
}

#theme-toggle.theme-switch:hover .theme-switch__track {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(27, 35, 46, 1);
}

#theme-toggle.theme-switch:focus-visible {
  outline: 2px solid var(--brand-accent-400);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   ADMIN BUTTON (Icon-only, konsistent mit Theme Toggle)
   ============================================ */

#admin-button,
.btn--icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  position: relative;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-decoration: none;
  transition: all var(--transition-fast);
}

#admin-button.btn--danger,
.btn--icon-only.btn--danger {
  border-color: var(--brand-warm-600);
  color: var(--brand-warm-500);
}

#admin-button:hover,
.btn--icon-only:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

#admin-button:active,
.btn--icon-only:active {
  transform: scale(0.95);
}

#admin-button .icon,
.btn--icon-only .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  pointer-events: none;
}

/* Hide any text that might be in the button */
#admin-button > *:not(.icon),
.btn--icon-only > *:not(.icon) {
  display: none !important;
}

/* Light mode variant für bessere Sichtbarkeit */
[data-theme="light"] .theme-switch__track,
[data-theme="light"] #admin-button,
[data-theme="light"] .btn--icon-only {
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="light"] #theme-toggle.theme-switch:hover .theme-switch__track,
[data-theme="light"] #admin-button:hover,
[data-theme="light"] .btn--icon-only:hover {
  background: var(--color-surface-hover);
  border-color: var(--brand-primary-600);
}

[data-theme="light"] .theme-switch__track {
  background: #ffffff;
}

[data-theme="light"] .btn--icon-only.btn--danger {
  border-color: var(--brand-warm-600);
  color: var(--brand-warm-600);
}

[data-theme="light"] .btn--icon-only.btn--danger:hover {
  background: linear-gradient(135deg, var(--brand-warm-700), var(--brand-accent-600));
  color: #ffffff;
  border-color: var(--brand-warm-700);
}

/* ============================================
   SIDEBAR (Desktop Navigation Component)
   ============================================ */

.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 200px;
  height: calc(100vh - 60px);
  background: var(--color-surface-secondary);
  border-right: 1px solid var(--color-border-subtle);
  padding: var(--space-4);
  display: none; /* Versteckt auf Mobile/Tablet */
  z-index: calc(var(--z-fixed) - 1);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Dark Mode: Hintergrund an Body angleichen, Border in Sidebar-Farbe */
[data-theme="dark"] .sidebar {
  background: var(--color-bg-base);
  border-right: 1px solid var(--color-surface-secondary);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.sidebar__item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.sidebar__item--active {
  background: rgba(220, 105, 60, 0.1);
  color: var(--color-interactive-primary);
  font-weight: var(--font-semibold);
}

.sidebar__item .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar__label {
  font-size: var(--text-sm);
}

/* Remove text decoration */
.sidebar__item,
.sidebar__item:hover,
.sidebar__item:focus,
.sidebar__item:active {
  text-decoration: none;
}

/* Desktop: Sidebar anzeigen */
@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

/* ============================================
   CONTEXT ACTIONS (Admin / Organisator unter Page-Header)
   REDESIGN.md §4.4, §5.2 — Fläche über .tool-surface
   ============================================ */

.context-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Eigenständige Leiste (ohne card__body): gleiche Innenränder wie .card--filter .card__body */
.context-actions.tool-surface {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.context-actions__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1 1 auto;
  min-width: 0;
}

.context-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

.context-actions__buttons .btn {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ============================================
   SETTINGS NAV (Member- / Admin-Hub, Listen-Navigation)
   REDESIGN.md §4.2, §5.2
   ============================================ */

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.settings-nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-nav__section-title {
  margin: 0;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

.settings-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
}

.settings-nav__list > li {
  margin: 0;
  padding: 0;
}

.settings-nav__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.settings-nav__list .settings-nav__row:last-child {
  border-bottom: none;
}

.settings-nav__row:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  text-decoration: none;
}

.settings-nav__row:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.settings-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-text-secondary);
}

.settings-nav__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.settings-nav__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.settings-nav__label {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.settings-nav__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.375;
}

.settings-nav__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.settings-nav__badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--status-warning-light);
}

[data-theme="dark"] .settings-nav__badge--warning {
  color: var(--status-warning-dark);
}

.settings-nav__chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-tertiary);
}

.settings-nav__row:hover .settings-nav__chevron {
  color: var(--color-text-secondary);
}

/* Platzhalter ohne Link (Vorbereitung, z. B. „Coming soon“) */
.settings-nav__row--soon {
  cursor: default;
}

.settings-nav__row--soon:hover {
  background: transparent;
}

.settings-nav__row--soon:focus-visible {
  outline: none;
}

/* ============================================
   DASHBOARD — Intent-Sektionen, nächstes Event, Legacy-Kacheln
   ============================================ */

.dashboard-intent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard-intent__heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

/* Zweite+ Ueberschrift gleichen Stils unter dem Hero (mt-8 wuerde durch obige margin-Shorthand verloren gehen) */
.dashboard-intent__heading.dashboard-intent__heading--section-gap {
  margin-top: var(--space-8);
}

.dashboard-intent__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dashboard-intent__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.dashboard-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.dashboard-info-grid .dashboard-info-tile--full {
  grid-column: 1 / -1;
  align-items: flex-start;
  justify-content: stretch;
}

.dashboard-info-tile--full .dashboard-info-tile__content {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.dashboard-info-tile--full .dashboard-info-tile__value {
  align-items: flex-start;
  font-weight: var(--font-normal);
}

.dashboard-info-tile__line--multiline {
  white-space: pre-wrap;
  max-width: 100%;
}

@media (min-width: 480px) {
  .dashboard-intent__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dashboard-intent-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 4.5rem;
  padding: var(--space-4);
  box-sizing: border-box;
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--logo-orange) 70%, var(--card-border));
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.dashboard-intent-tile:hover {
  background: var(--color-surface-hover);
  border-color: color-mix(in srgb, var(--logo-orange) 88%, var(--card-border));
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.dashboard-intent-tile:hover .dashboard-intent-tile__chev,
.dashboard-intent-tile:focus-visible .dashboard-intent-tile__chev {
  transform: translateX(2px);
  color: var(--color-interactive-primary);
}

.dashboard-intent-tile:active {
  text-decoration: none;
}

.dashboard-intent-tile:hover .dashboard-intent-tile__title,
.dashboard-intent-tile:hover .dashboard-intent-tile__meta {
  text-decoration: none;
}

.dashboard-intent-tile:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

.dashboard-intent-tile--static {
  cursor: default;
  pointer-events: none;
}

.dashboard-intent-tile--static:hover {
  box-shadow: var(--card-shadow);
}

.dashboard-intent-tile__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.125rem;
  color: var(--color-interactive-primary);
}

.dashboard-intent-tile__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.dashboard-intent-tile__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard-intent-tile__title {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--color-text-primary);
}

.dashboard-intent-tile__meta {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.dashboard-intent-tile__chev {
  flex-shrink: 0;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.dashboard-info-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-height: 5.5rem;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--logo-orange) 68%, transparent),
      color-mix(in srgb, var(--logo-teal) 68%, transparent)
    ) border-box;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
  box-sizing: border-box;
}

.dashboard-info-tile:hover {
  background:
    linear-gradient(var(--color-surface-hover), var(--color-surface-hover)) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--logo-orange) 76%, transparent),
      color-mix(in srgb, var(--logo-teal) 76%, transparent)
    ) border-box;
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.dashboard-info-tile:hover .dashboard-info-tile__chev {
  color: var(--color-text-secondary);
}

.dashboard-info-tile:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  text-decoration: none;
}

.dashboard-info-tile--static {
  cursor: default;
}

.dashboard-info-tile__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  text-align: center;
}

.dashboard-info-tile__chev {
  flex-shrink: 0;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.dashboard-info-tile__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.dashboard-info-tile__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-info-tile__line {
  display: block;
}

.dashboard-info-tile__line--subtle {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
}

.dashboard-info-tile__line--hint {
  font-size: var(--text-xs);
  line-height: 1.35;
}

.events-archive-toolbar {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.dashboard-explore-nav {
  gap: 0;
}

.dashboard-next-event {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.dashboard-next-event__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.dashboard-next-event__text {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard-next-event__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.dashboard-next-event__type {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.dashboard-next-event__line {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.dashboard-next-event__actions {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.dashboard-next-event__meta {
  position: relative;
  z-index: 2;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.dashboard-next-event__meta p {
  margin: 0;
}

.dashboard-next-event__meta a {
  position: relative;
  z-index: 2;
}

.dashboard-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.dashboard-card-link:hover {
  box-shadow: var(--shadow-md);
}

.dashboard-card-link:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

.dashboard-card-link__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.dashboard-card-link__footer {
  border-top: none;
  padding-top: 0;
}

.dashboard-card-link__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.card--dash-tile {
  position: relative;
  overflow: hidden;
}

a.card--dash-tile__hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  text-decoration: none;
}

.card--dash-tile__above {
  position: relative;
  z-index: 1;
}

.card--dash-tile__actions {
  position: relative;
  z-index: 2;
}

.card--dash-tile__meta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.card--dash-tile__meta a {
  position: relative;
  z-index: 2;
}

.card--dash-tile__meta p {
  margin: 0;
}

/* Trennung unter KPI-Raster (z. B. Dashboard GGL → Link-Zeile, außerhalb gestapelter Hygiene-Liste) */
.dashboard-row-link--block-start {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.dashboard-hygiene-rows {
  padding: 0;
}

.dashboard-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

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

.dashboard-row-link:hover,
.dashboard-row-link:focus-visible {
  background: var(--color-surface-hover);
}

.dashboard-row-link:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: -2px;
}

.dashboard-row-link__text {
  flex: 1;
  min-width: 0;
}

.dashboard-row-link__title {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
}

.dashboard-row-link__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.dashboard-row-link__chev {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-tertiary);
}

/* Datenbereinigung — Einleitung unter Page-Header */
.events-cleanup-intro {
  margin: 0 0 var(--space-4);
  max-width: 40rem;
  line-height: 1.45;
}

.events-cleanup-hint {
  margin: 0 0 var(--space-3);
  max-width: 40rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.cleanup-undo-form {
  margin: 0 0 var(--space-4);
}

.cleanup-undo-form .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cleanup-step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

.cleanup-step-nav__counter {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cleanup-step-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
   PUBLIC TOPNAV – PILL TABS (Desktop, keine horizontale Scroll-Leiste)
   ============================================ */

.pill-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill-tabs--row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.pill-tabs__tab {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  border: 2px solid transparent;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: white;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pill-tabs__tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pill-tabs__tab:focus-visible {
  outline: 2px solid var(--brand-accent-400);
  outline-offset: 2px;
}

.pill-tabs__tab--active {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  font-weight: var(--font-semibold);
}

[data-theme="light"] .pill-tabs__tab {
  color: var(--color-text-primary);
}

[data-theme="light"] .pill-tabs__tab:hover {
  background: var(--color-surface-hover);
}

[data-theme="light"] .pill-tabs__tab--active {
  border-color: var(--color-border-default);
  background: var(--color-surface-elevated);
}

/* ============================================
   USER MENU (Top-Bar, §4.5 / REDESIGN.md §5.2)
   ============================================ */

.user-menu {
  position: relative;
}

.user-menu__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.user-menu__summary::-webkit-details-marker {
  display: none;
}

.user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(27, 35, 46, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.user-menu__avatar .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.user-menu[open] .user-menu__avatar {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .user-menu__avatar {
  background: #ffffff;
  border-color: var(--color-border-default);
}

[data-theme="light"] .user-menu[open] .user-menu__avatar {
  border-color: var(--brand-primary-600);
}

.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 12.5rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-tooltip);
}

.user-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-menu__list li {
  margin: 0;
}

.user-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-3);
  margin: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.user-menu__link:hover,
.user-menu__link:focus-visible {
  background: var(--color-surface-hover);
  outline: none;
}

.user-menu__link:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

.user-menu__link-text {
  flex: 1;
  min-width: 0;
}

.user-menu__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.15);
  color: var(--status-warning-light);
}

[data-theme="dark"] .user-menu__badge {
  color: var(--status-warning-dark);
}

.user-menu__sep {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--color-border-subtle);
}

.user-menu__link--danger {
  color: var(--brand-warm-700);
}

[data-theme="dark"] .user-menu__link--danger {
  color: var(--brand-accent-500);
}

.user-menu__link--danger:hover,
.user-menu__link--danger:focus-visible {
  background: var(--color-surface-hover);
}

/* ============================================
   ERROR PAGES (403 / 404 / 500)
   ============================================ */

.error-page {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.error-page .page-header {
  margin-bottom: var(--space-4);
}

.error-page .page-header h1 {
  justify-content: center;
  flex-wrap: wrap;
}

.error-page__code {
  display: block;
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-text-secondary);
  opacity: 0.85;
  margin-bottom: var(--space-3);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .error-page__code {
    background: var(--gradient-brand-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.92;
  }
}

.error-page .page-content {
  align-items: center;
}

.error-page .page-subtitle {
  margin-left: auto;
  margin-right: auto;
  max-width: 26rem;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

@media (max-width: 640px) {
  .error-page__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .error-page__actions .btn {
    width: 100%;
  }
}

/* ============================================
   PWA OFFLINE FALLBACK (static/offline.html)
   ============================================ */

.offline-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-bg-base);
}

.offline-shell__inner {
  width: 100%;
  max-width: 32rem;
}

.offline-shell .card {
  text-align: center;
}

.offline-shell .card__header .card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.offline-shell__lead {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.offline-shell__list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  text-align: left;
}

.offline-shell__status-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.offline-shell__section-gap {
  margin-top: var(--space-4);
}

.offline-shell .card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

@media (max-width: 640px) {
  .offline-shell .card__footer .btn {
    flex: 1 1 auto;
    min-width: min(100%, 12rem);
  }
}

/* ============================================
   Dashboard Trip-Hero
   ============================================
   Zeitlich begrenzte Hero-Card auf dem Dashboard fuer Sondereinsaetze
   (aktuell: Hamburg-2026-Jubilaeumsreise).
   Visuell unterscheidbar von .dashboard-intent (Routine-TODOs) durch
   Brand-Gradient, groesseres Logo und Countdown-Pille. Nach Cutoff
   verschwindet die Section serverseitig wieder.
   ============================================ */
.dashboard-trip-hero {
  margin: 0 0 var(--space-3);
}

.dashboard-trip-hero__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 1px solid color-mix(in srgb, var(--logo-orange) 60%, var(--card-border));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--logo-orange) 10%, var(--card-bg)) 0%,
      var(--card-bg) 60%,
      color-mix(in srgb, var(--logo-teal) 8%, var(--card-bg)) 100%);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.dashboard-trip-hero__link:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.dashboard-trip-hero__link:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

.dashboard-trip-hero__logo {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--logo-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.dashboard-trip-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-trip-hero__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dashboard-trip-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-interactive-primary);
}

.dashboard-trip-hero__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
}

.dashboard-trip-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.dashboard-trip-hero__countdown {
  font-weight: var(--font-semibold);
  color: var(--logo-orange);
  font-variant-numeric: tabular-nums;
}

.dashboard-trip-hero__dot {
  color: var(--color-text-tertiary);
}

.dashboard-trip-hero__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-interactive-primary);
}

.dashboard-trip-hero__chev {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-fast);
}

.dashboard-trip-hero__link:hover .dashboard-trip-hero__chev {
  transform: translateX(2px);
}

@media (max-width: 480px) {
  .dashboard-trip-hero__cta-label {
    display: none;
  }
  .dashboard-trip-hero__cta .icon {
    color: var(--color-text-tertiary);
  }
}

/* ============================================
   Drive-Capability (Phase 03)
   - Documents-Index: Toolbar, Tabs, Tabelle
   - Upload-Modal, Action-Modals
   - Detail-View
   ============================================ */

/* Toolbar: gleiche Karte wie Events-Filter (card--filter tool-surface) */
.docs-index__toolbar-card {
  margin-bottom: 0;
}

.docs-index__toolbar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}

.docs-index__search-form {
  min-width: 0;
}

.docs-index__search-field {
  margin-bottom: 0;
}

.docs-index__query-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}

.docs-index__query-input {
  flex: 1 1 16rem;
  min-width: 0;
}

.docs-index__query-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.docs-index__query-buttons .btn {
  min-height: 2.75rem;
}

.docs-index__upload-slot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.docs-index__upload-btn {
  min-height: 2.75rem;
}

.docs-index__tabs-wrap {
  margin-top: var(--space-5);
}

@media (max-width: 768px) {
  .docs-index__toolbar-layout {
    grid-template-columns: 1fr;
  }

  .docs-index__upload-slot {
    justify-content: stretch;
  }

  .docs-index__upload-slot .btn {
    width: 100%;
    justify-content: center;
  }

  .docs-index__query-buttons {
    width: 100%;
  }

  .docs-index__query-buttons .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .docs-index__query-row {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-index__query-input {
    flex-basis: auto;
    width: 100%;
  }
}

/* Badge im Archiv-Tab neben dem Icon */
.docs-index__tab-count {
  opacity: 0.85;
  font-weight: var(--font-normal);
}

.docs-index-table__row:hover {
  background: var(--color-bg-subtle);
}

.docs-index-table__title-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.docs-index-table__title-link:hover {
  color: var(--color-interactive-primary);
}

.docs-index-table__file-icon {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.docs-index-table__uploader-system {
  font-style: italic;
  color: var(--color-text-tertiary);
}

.docs-index-table__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Upload-Modal (HTML <dialog>) */

.docs-upload-modal,
.docs-action-modal {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 0;
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  box-shadow: var(--shadow-xl);
  /* Zentriert im Viewport (showModal) */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: min(92vh, 880px);
}

.docs-upload-modal::backdrop,
.docs-action-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.docs-upload-modal__form,
.docs-action-modal__form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--space-4));
}

.docs-upload-modal__header,
.docs-action-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.docs-upload-modal__title,
.docs-action-modal__title {
  font-size: var(--text-lg);
  margin: 0;
}

.docs-upload-modal__close,
.docs-action-modal__close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-1);
}

.docs-upload-modal__body,
.docs-action-modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.docs-upload-modal__footer,
.docs-action-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.docs-upload-modal__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  text-align: center;
}

.docs-upload-modal__dropzone--active {
  border-color: var(--color-interactive-primary);
  background: var(--color-bg-muted);
}

.docs-upload-modal__dropzone-hint {
  margin: 0;
  color: var(--color-text-secondary);
}

.docs-upload-modal__file-input {
  /* visually hidden, gepaart mit sichtbarem Label-Button */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.docs-upload-modal__filename {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  word-break: break-all;
}

.docs-upload-modal__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Drive-Browser (Phase 9) */

.docs-browser {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.docs-browser__toolbar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.docs-browser__search-form {
  flex: 1 1 280px;
  min-width: 0;
}

.docs-browser__search-field {
  margin-bottom: 0;
}

.docs-browser__query-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}

.docs-browser__query-input {
  flex: 1 1 200px;
  min-width: 0;
}

.docs-browser__query-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.docs-browser__upload-slot {
  flex-shrink: 0;
}

.docs-browser__upload-btn {
  white-space: nowrap;
}

.docs-browser__breadcrumb {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.docs-browser__section {
  margin-top: var(--space-2);
}

.docs-browser__section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
}

.docs-browser__tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.docs-browser__tile-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.docs-folder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.docs-folder-head h1 {
  margin: 0;
}

.docs-folder-head__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.docs-folder-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.docs-folder-tile:hover {
  border-color: var(--color-interactive-primary);
  box-shadow: var(--shadow-sm);
}

.docs-folder-tile--archive {
  border-style: dashed;
  opacity: 0.92;
}

.docs-folder-tile__icon {
  color: var(--color-warning);
}

.docs-folder-tile__name {
  font-weight: var(--font-medium);
  word-break: break-word;
}

.docs-folder-tile__meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.docs-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.docs-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
}

.docs-file-row__main {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.docs-file-row__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  text-decoration: none;
}

a.docs-file-row__title:hover {
  color: var(--color-interactive-primary);
}

.docs-file-row__icon {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.docs-file-row__meta {
  font-size: var(--text-sm);
}

.docs-file-row__kebab {
  position: relative;
  flex-shrink: 0;
}

.docs-file-row__kebab-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.docs-file-row__kebab-summary::-webkit-details-marker {
  display: none;
}

.docs-file-row__kebab-summary:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.docs-file-row__kebab-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  min-width: 200px;
  z-index: 50;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.docs-file-row__kebab-link,
.docs-file-row__kebab-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font: inherit;
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
}

.docs-file-row__kebab-link:hover,
.docs-file-row__kebab-btn:hover {
  background: var(--color-bg-subtle);
}

.docs-browser__search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.docs-browser__search-item {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.docs-browser__search-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.docs-browser__search-title {
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.docs-browser__search-folder-link {
  font-size: var(--text-sm);
}

.docs-browser__search-crumb {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.docs-folder-picker {
  width: min(520px, calc(100vw - 2 * var(--space-4)));
}

.docs-folder-picker__shell {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 720px);
}

.docs-folder-picker__body {
  padding: 0 var(--space-4) var(--space-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.docs-folder-picker__hint {
  margin: 0;
  font-size: var(--text-sm);
}

.docs-folder-picker__tree {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 420px;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-size: var(--text-sm);
}

.docs-folder-picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.docs-folder-picker__row--selected .docs-folder-picker__choose {
  font-weight: var(--font-semibold);
  color: var(--color-interactive-primary);
}

.docs-folder-picker__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary);
}

.docs-folder-picker__toggle:hover {
  border-color: var(--color-interactive-primary);
  color: var(--color-text-primary);
}

.docs-folder-picker__choose {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  word-break: break-word;
}

.docs-folder-picker__choose:hover {
  background: var(--color-bg-muted);
}

.docs-upload-modal__folder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.docs-upload-modal__folder-label {
  flex: 1 1 180px;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  word-break: break-word;
}

/* Detail-View */

.docs-detail__meta {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.docs-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  align-items: center;
}

.docs-detail__inline-form {
  display: inline-flex;
  margin: 0;
}

.docs-detail__history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.docs-detail__history-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.docs-detail__history-action {
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.docs-detail__history-meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Hard-Delete-Modal: Titel-Box mit Copy-Button */

.docs-action-modal__title-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.docs-action-modal__title-code {
  font-family: var(--font-mono, monospace);
  word-break: break-all;
  color: var(--color-text-primary);
}

/* Drive-Re-Sync-Karte im Admin-Hub */

.admin-hub__drive-resync {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
}

.admin-hub__drive-resync-meta {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-hub__drive-resync-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.admin-hub__drive-resync-text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Member-Profil: Google-Konto-Sektion */

.profile-google-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.profile-google-section__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.profile-google-section__status--verified {
  color: var(--color-success);
}

.profile-google-section__status--pending {
  color: var(--color-warning);
}

/* Kalender-Abo (iCal Phase 5) — member.technical */

.calendar-subscribe__url-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin-bottom: var(--space-4);
}

.calendar-subscribe__url-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.calendar-subscribe__copy-btn {
  flex-shrink: 0;
}

.calendar-subscribe__howto {
  margin-top: var(--space-4);
}

.calendar-subscribe__howto .disclosure__content {
  padding-bottom: 0;
}

.calendar-subscribe__howto .disclosure__content .calendar-subscribe__platform:first-child {
  margin-top: 0;
}

.calendar-subscribe__platform {
  margin-top: var(--space-4);
}

.calendar-subscribe__platform-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.calendar-subscribe__steps {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.calendar-subscribe__steps li {
  margin-bottom: var(--space-2);
}

.calendar-subscribe__hint {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.calendar-subscribe__actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

@media (min-width: 480px) {
  .calendar-subscribe__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.calendar-subscribe-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: calc(100vw - var(--space-8));
}

.calendar-subscribe-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.calendar-subscribe-dialog__panel {
  padding: var(--space-5);
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  max-width: 28rem;
  box-shadow: var(--shadow-lg);
}

.calendar-subscribe-dialog__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

/* ============================================
   BUDGET-METER – Fortschrittsbalken Budget-Auslastung (Buchhaltung)
   Füllgrad via Custom Property: style="--budget-meter-fill: 62%"
   ============================================ */

.budget-meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.budget-meter__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.budget-meter__label {
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.budget-meter__value {
  color: var(--color-text-secondary);
}

.budget-meter__track {
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  overflow: hidden;
}

.budget-meter__fill {
  height: 100%;
  width: var(--budget-meter-fill, 0%);
  border-radius: var(--radius-full);
  background: var(--color-interactive-primary);
}

.budget-meter__fill--over {
  background: var(--color-error);
}