:root {

  /* ==================================================
     COLOR SYSTEM
     ================================================== */

  /* Brand */
  --color-primary: #0b2a4a;
  --color-accent: #d4af37;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-bg-body: #f2f2f5;;
  --color-surface: #fafafa;

  --color-header-bg: #0a2540;
  --color-nav-bg: #153e75;


  /* Header 1-5-*/
  --color-h2: #005fa3;


  /* Text */
  --color-text: #1e293b;
  --color-text-muted: #555555;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-light: #f0f0f0;
  --color-border: #8f8f8f;
  --color-border-strong: #d0d0d0;


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

  --container-width: 1200px;



  /* ==================================================
     SPACING SYSTEM (4px scale)
     ================================================== */

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;


  /* ==================================================
     RADIUS SYSTEM
     ================================================== */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;


  /* ==================================================
     SHADOW SYSTEM
     ================================================== */

  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 16px 40px rgba(0, 0, 0, 0.25);


  /* ==================================================
     BREAKPOINT SYSTEM
     ================================================== */

  --bp-sm: 768px;
  --bp-md: 981px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;


  /* ==================================================
     BANNER SYSTEM
     ================================================== */

  --banner-height: 300px;

  /* Leichtes Overlay – Bilder wirken originalnäher, Text bleibt lesbar */
  --banner-overlay-start: rgba(10, 37, 64, 0.08);
  --banner-overlay-mid: rgba(10, 37, 64, 0.05);
  --banner-overlay-end: rgba(10, 37, 64, 0.15);

  --banner-blur-bg: rgba(10, 37, 64, 0.35);


  /* ==================================================
     HERO (MOBILE)
     ================================================== */

  --hero-min-height: clamp(420px, 65vh, 520px);

  --hero-overlay-start: rgba(0, 0, 0, 0.55);
  --hero-overlay-mid: rgba(0, 0, 0, 0.35);
  --hero-overlay-soft: rgba(0, 0, 0, 0.15);
  --hero-overlay-light: rgba(0, 0, 0, 0.05);

  --hero-text-bg: rgba(0, 0, 0, 0.4);
  --hero-radius: 14px;


  /* ==================================================
     GALLERY SYSTEM
     ================================================== */

  --gallery-grid-min: 220px;
  --gallery-grid-gap: var(--space-sm);

  --gallery-card-radius: var(--radius-md);
  --gallery-card-border: var(--color-border);
  --gallery-card-bg: var(--color-bg);

  --gallery-overlay-bg: rgba(0, 0, 0, 0.92);

  --gallery-shadow:
    0 8px 16px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.25);

  --gallery-shadow-hover:
    0 18px 36px rgba(0, 0, 0, 0.45),
    0 8px 14px rgba(0, 0, 0, 0.35);

  --gallery-overlay-text-size: 1.4rem;

  --gallery-control-size: 56px;
  --gallery-control-color: #ffffff;


  /* ==================================================
     TOP SEARCH SYSTEM
     ================================================== */

  --search-max-width: 760px;

  --search-border-color: #003b89;
  --search-border-active: #0071c2;

  --search-accent: #0071c2;
  --search-accent-hover: #005fa3;

  --search-text-color: #003b89;
  --search-city-color: #015cd4;

  --search-range-bg: #cfe4f7;
  --search-hover-bg: #e8f2fb;

  --search-dropdown-bg: rgba(255, 255, 255, 0.2);
  --search-dropdown-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);

}