/* ===================================================================
   G3DF MODERN CSS ARCHITECTURE v2.0
   Moderne, responsive Design-Architektur für Giant 3D Factory
   Ersetzt: desktop.css, mobile.css, tablet.css
   =================================================================== */

/* ===================================================================
   DESIGN TOKEN SYSTEM - Ihre bewährten Farben & Fonts
   =================================================================== */
:root {
  /* IHRE BESTEHENDEN FARBEN - Branding bleibt erhalten */
  --color-primary: #000000;      /* --farbe-schwarz */
  --color-secondary: #9b9999;    /* --farbe-grau */
  --color-background: #fffefe;   /* --farbe-weiss */
  
  /* SEMANTIC COLORS */
  --color-text-primary: var(--color-primary);
  --color-text-secondary: var(--color-background);
  --color-surface: var(--color-primary);
  --color-surface-hover: var(--color-secondary);
  
  /* 🎯 HEADER CONTENT-CONTAINER SYSTEM */
  --header-content-max-width: 1200px;
  --header-content-padding: clamp(15px, 2.5vw, 40px);
  
  /* 🚨 USER-KONFIGURIERBARE HEADER-MINIMALHÖHE NUR BEI 400PX VIEWPORT */
  --header-min-height-at-400px: 13px; /* +10%: 130px → 143px - USER-ANPASSBAR */
  
  /* IHRE BESTEHENDEN FONTS */
  --font-family-base: 'Montserrat', sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: 'Orbitron', sans-serif, "Times New Roman", Times, serif;
  
  /* RESPONSIVE FONT SIZES - Mobile First */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);    /* 12px - 14px */
  --text-sm: clamp(0.875rem, 2vw, 1rem);         /* 14px - 16px (Ihr --font-klein) */
  --text-md: clamp(1rem, 2.5vw, 1.4rem);         /* 16px - 22.4px (Ihr --font-mittel) */
  --text-lg: clamp(1.8rem, 4vw, 2.4rem);         /* 28.8px - 38.4px (Ihr --font-gross) */
  
  /* RESPONSIVE SPACING SYSTEM */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);     /* 4px - 8px */
  --space-sm: clamp(0.5rem, 1vw, 1rem);          /* 8px - 16px */
  --space-md: clamp(1rem, 2vw, 1.5rem);          /* 16px - 24px */
  --space-lg: clamp(1.5rem, 3vw, 2rem);          /* 24px - 32px */
  --space-xl: clamp(2rem, 4vw, 3rem);            /* 32px - 48px */
  
  /* RESPONSIVE BREAKPOINTS */
  --bp-mobile: 320px;
  --bp-mobile-lg: 480px;
  --bp-tablet: 800px;
  --bp-tablet-lg: 1024px;
  --bp-desktop: 1200px;
  --bp-desktop-lg: 1440px;
  
  /* 🎯 BUTTON-HEIGHT UNIFORMITÄT SYSTEM */
  --button-height-mobile: clamp(48px, 5.5vh, 56px);
  --button-height-tablet: clamp(52px, 6vh, 60px);
  --button-height-desktop: 60px;  /* 🎯 FESTE 60PX für Desktop-Uniformität */
  
  /* AKTIVE BUTTON-HEIGHT (wird durch Media Queries gesetzt) */
  --button-height: var(--button-height-mobile);
  
  /* 🎯 USER-FEEDBACK ANPASSUNGEN: Mobile Werte optimiert */
  
  /* 🎯 FINALE KORREKTUR: Header um 10% vergrößert - Kontinuierliche Skalierung */
 
  
  /* ✅ BUTTON-HÖHEN FÜR LOGO-REFERENZ */
  --nav-button-height: clamp(48px, 5.5vh, 56px);  /* Navigation Button Basis */
  
  /* ✅ LOGO-SKALIERUNG: 25% GRÖSSER ALS NAVIGATION-BUTTONS */
  --logo-size-fluid: clamp(
    calc(48px * 1.25),                       /* 25% größer als min Button: 60px */
    calc((5.5vh + 1.375vh)),                 /* 25% größer als Button-Höhe */
    calc(56px * 1.25)                        /* 25% größer als max Button: 70px */
  );
  
  /* ✅ DEFINIERTE LOGO-VARIABLEN: 25% größer als Buttons */
  --logo-min-size: 60px;                    /* 25% größer als 48px Button */
  --logo-size: 6.875vh;                     /* 25% größer als 5.5vh Button */
  --logo-max-size: 70px;                    /* 25% größer als 56px Button */
  
  /* ✅ PADDING-SKALIERUNG: Proportional zur Header-Höhe */
  --header-padding-fluid: clamp(
    0.25rem,                                  /* Minimum Padding */
    calc(0.25rem + (100vw - 100px) * 0.001), /* Direkte Berechnung */
    0.75rem                                   /* Maximum Padding */
  );
  
  /* ✅ LEGACY KOMPATIBILITÄT: Alte Variablen-Namen beibehalten */
  --header-height-safe: var(--header-height-fluid);
  --header-height-calc: var(--header-height-fluid);
  --header-height-content: var(--header-height-fluid);
  
  /* NAVIGATION HEIGHTS - Vereinfacht für Kompatibilität */
  --nav-height-mobile: clamp(60px, 8vh, 80px);
  --nav-height-tablet: clamp(80px, 10vh, 100px);
  --nav-height-desktop: clamp(100px, 12vh, 120px);
  
  /* Z-INDEX SYSTEM - KRITISCHE KORREKTUR für Klickbarkeit */
  --z-base: 1;
  --z-header: 100;
  --z-navigation: 103;        /* HÖCHSTE PRIORITÄT - Navigation MUSS klickbar sein */
  --z-dropdown: 104;
  --z-modal: 1000;
  
  /* SPEZIELLE Z-INDEX für Header-Elemente - KORRIGIERT */
  --z-logo-actions: 101;      /* Logo + Action-Bar niedriger als Navigation */
  --z-navigation-box: 103;    /* Navigation höchste Priorität */
}

/* ===================================================================
   GLOBAL RESET & BASE STYLES
   =================================================================== */
html {
  box-sizing: border-box;
  font-size: 16px; /* Base für rem-Berechnungen */
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

/* BASE HTML & BODY */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  
  /* DYNAMIC VIEWPORT HEIGHT - Kompatibel mit viewport-fix.js */
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100); /* Dynamische Höhe via JS */
  min-height: -webkit-fill-available; /* Safari Mobile Fallback */
}

/* ===================================================================
   TYPOGRAPHY SYSTEM - Ihre bestehenden Styles
   =================================================================== */
p {
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-lg);
  line-height: 1.3;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

h3 {
  margin: 0;
}

/* ===================================================================
   VIEWPORT CONTAINER SYSTEM - Ihre bewährte Architektur
   =================================================================== */
.viewport-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  
  /* DYNAMIC VIEWPORT HEIGHT - Kompatibel mit viewport-fix.js */
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100); /* Dynamische Höhe via JS */
  min-height: -webkit-fill-available; /* Safari Mobile */
  overflow-x: hidden;
  position: relative;
}

/* ===================================================================
   HEADER SYSTEM - Moderne Flexbox-Architektur
   =================================================================== */
.header {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: center;
  
  /* 🎯 FULL-WIDTH-HEADER: Gesamte Fensterbreite - Bricht aus viewport-container aus */
  width: 100vw !important;
  max-width: none !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  
  /* ✅ ULTRA-FLÜSSIGE HEADER-HÖHE: Kontinuierlich von 120px → 240px */
  /* 🚨 MAXIMALE SPEZIFITÄT: Überschreibt ALLE Legacy-Regeln */
  height: var(--header-height-fluid) !important;
  min-height: var(--header-height-fluid) !important;
  max-height: var(--header-height-fluid) !important; /* Verhindert Expansion */
  
  /* ✅ FLÜSSIGES PADDING: Skaliert proportional mit Header-Höhe */
  padding: var(--header-padding-fluid) 0;
  
  display: flex;
  justify-content: center;
  align-items: stretch; /* Ermöglicht flexible Höhen */
  z-index: var(--z-header);
  
  /* BOX-SHADOW für Layer-Trennung */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-case {
  display: flex;
  align-items: stretch;
  
  /* MOBILE: 2-REIHEN LAYOUT mit Flex-Wrap */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  
  /* 🎯 ZENTRIERTE CONTENT-BOX: Optimale Breite für Header-Inhalt */
  width: 100%;
  max-width: min(1200px, 95vw); /* Responsive Maximalbreite */
  min-height: 100%;
  height: auto;
  margin: 0 auto; /* Zentriert den Content-Container */
  padding: var(--space-sm);
  
  /* MOBILE: ENGERE GAPS - Korrigiert weite Spalten-Abstände */
  gap: clamp(0.25rem, 0.5vw, 0.5rem);
  
  /* TEXT PROPERTIES */
  font-size: var(--text-sm);
  line-height: 2rem;
  color: var(--color-text-secondary);
  
  /* LAYOUT STRUKTUR */
  position: relative;
}

/* ===================================================================
   MOBILE: 2-REIHEN LAYOUT SYSTEM mit Flex-Wrap
   Reihe 1: Logo links + Action-Bar rechts (justify-content: space-between)
   Reihe 2: Navigation zentriert, volle Breite (flex-basis: 100%)
   =================================================================== */

/* MOBILE: Erste Reihe - Logo und Action-Bar */
.header-case > .logo-container {
  /* MOBILE: Logo links in erster Reihe */
  order: 1;
  flex-basis: auto;
}

.header-case > .action-bar {
  /* MOBILE: Action-Bar rechts in erster Reihe */
  order: 2;
  flex-basis: auto;
}

.header-case > .navigation-box {
  /* MOBILE: Zweite Reihe - Navigation volle Breite */
  order: 3;
  flex-basis: 100%; /* Erzwingt neue Zeile */
  width: 100%;
}

/* LOGO-CONTAINER: Links in erster Reihe */
.logo-container {
  /* MOBILE: LOGO LINKS POSITIONIERT */
  flex-shrink: 0;
  flex-basis: auto;
  
  /* MOBILE: LOGO-GRÖSSE KORRIGIERT - Verhindert Überlauf bei 400px */
  width: clamp(60px, 10vw, 120px);
  height: auto;
  
  /* KRITISCH: LOGO LINKS POSITIONIEREN */
  margin: 0;
  padding: 0;
  
  /* LAYOUT - LINKS AUSRICHTUNG ERZWINGEN */
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  
  /* MOBILE: ERSTE POSITION IN ERSTER REIHE */
  order: 1;
  
  /* SICHERSTELLUNG LINKS-POSITIONIERUNG */
  text-align: left;
  
  /* Z-INDEX */
  position: relative;
  z-index: var(--z-logo-actions);
}

/* ACTION-BAR: Rechts in erster Reihe */
.action-bar {
  /* MOBILE: RECHTS POSITIONIERT */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  /* MOBILE: KOMPAKTE ACTION-BAR */
  width: auto;
  min-width: auto;
  max-width: 50%;
  
  /* 🎯 HARMONISIERTE HÖHE - Konsistent mit Logo-Container */
  height: clamp(48px, 8vw, 56px);
  min-height: clamp(48px, 8vw, 56px);
  
  /* 🎯 HARMONISIERTE VERTIKALE ABSTÄNDE */
  margin: clamp(0.1rem, 0.2vw, 0.2rem) 0;
  padding: clamp(0.1rem, 0.2vw, 0.2rem) 0;
  
  /* MOBILE: KOMPAKTE GAPS */
  gap: clamp(0.2rem, 0.4vw, 0.4rem);
  
  /* MOBILE: ORDER - Zweite Position in erster Reihe */
  order: 1;
  
  /* Z-INDEX */
  position: relative;
  z-index: var(--z-logo-actions);
  
  /* RESPONSIVE BACKGROUND */
  background-color: transparent;
  border-radius: 4px;
}

/* NAVIGATION-BOX: Volle Breite in zweiter Reihe */
.navigation-box {
  /* MOBILE: Navigation in zweiter Reihe */
  display: flex !important;
  justify-content: center;
  align-items: center;
  
  /* MOBILE: VOLLE BREITE NAVIGATION */
  width: 100%;
  min-height: 60px;
  
  /* MOBILE: FULL WIDTH NAVIGATION - ZWEITE REIHE */
  flex-direction: row;
  flex-wrap: nowrap;
  
  /* 🎯 HARMONISIERTE VERTIKALE ABSTÄNDE */
  padding: clamp(0.25rem, 0.6vw, 0.5rem) 0;
  margin: clamp(0.1rem, 0.3vw, 0.3rem) 0;
  
  /* MOBILE: ORDER - Zweite Reihe */
  order: 2;
  
  /* Z-INDEX für Desktop-Überlagerung */
  position: relative;
  z-index: var(--z-navigation-box);
  
  /* VISUELLE TRENNUNG */
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

/* HORIZONTAL CONTAINER - Ihre bestehende Klasse */
.horizontal-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* ===================================================================
   LOGO CONTAINER - Proportionale Skalierung
   =================================================================== */
.logo-container {
  /* KRITISCHE KORREKTUR: LOGO MUSS LINKS STEHEN */
  flex-shrink: 0;
  flex-basis: auto;
  
  /* MOBILE: KOMPAKTE LOGO-GRÖSSE - Vereinfacht */
  width: clamp(60px, 10vw, 120px);
  height: auto;
  
  /* KRITISCH: LOGO LINKS POSITIONIEREN */
  margin: 0;
  padding: 0;
  
  /* LAYOUT - LINKS AUSRICHTUNG ERZWINGEN */
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  
  /* MOBILE: ERSTE POSITION IN ERSTER REIHE */
  order: 1;
  
  /* SICHERSTELLUNG LINKS-POSITIONIERUNG */
  text-align: left;
}

/* 🚨 KRITISCHE LOGO-SKALIERUNG: MAXIMALE CSS-SPEZIFITÄT + DRASTISCHE SKALIERUNG */
header .header-case .logo-container img,
.header .logo-container img,
.logo-container img,
img.logo,
img[src*="logo"] {
  /* 🚨 DRASTISCHE LOGO-SKALIERUNG: 40px-120px für garantierte Sichtbarkeit */
  width: clamp(40px, 15vw + 4vh, 120px) !important;
  height: clamp(40px, 15vw + 4vh, 120px) !important;
  min-width: 40px !important;
  max-width: 120px !important;
  min-height: 40px !important;
  max-height: 120px !important;
  
  /* ZUSÄTZLICHE SKALIERUNGS-SICHERHEIT */
  aspect-ratio: 1/1 !important;
  object-fit: contain !important;
  display: block !important;
  
  /* ALTERNATIVE DRASTISCHE SKALIERUNG für extreme Responsivität */
  width: min(max(40px, 18vw), 120px) !important;
  height: min(max(40px, 18vw), 120px) !important;
}

/* 🚨 BACKUP LOGO-SKALIERUNG: Falls erste Regel überschrieben wird */
.logo-container img {
  /* VERSTÄRKTE LOGO-SKALIERUNG mit breiteren Ranges */
  width: clamp(45px, 12vw + 3vh, 110px) !important;
  height: clamp(45px, 12vw + 3vh, 110px) !important;
  aspect-ratio: 1/1;
  object-fit: contain;
  
  /* ERWEITERTE MAXIMALE BEGRENZUNG */
  max-width: 110px !important;
  max-height: 110px !important;
  margin-bottom: 10px;
}

/* ===================================================================
   NAVIGATION SYSTEM - Angepasst für Navigation-Box
   =================================================================== */
.navigation-box .nav-l2,
.mainbar-container {
  /* NAVIGATION IN NAVIGATION-BOX: VOLLE BREITE */
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* MOBILE: VOLLE BREITE NAVIGATION */
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  
  /* MOBILE: OPTIMALE TOUCH-HÖHE */
  height: 56px;
  min-height: 56px;
  
  /* MOBILE: KEINE MARGINS - VOLLE BREITE */
  margin: 0;
  padding: 0 var(--space-xs);
  
  /* RESPONSIVE BACKGROUND */
  background-color: #00000000;
  border-radius: 4px;
}

.nav-l2 {
  /* FLEXBOX LAYOUT */
  display: flex;
  justify-content: space-between; /* Gleichmäßige Verteilung */
  align-items: center;
  
  /* ANTI-WRAPPING - KRITISCH FÜR IHRE 4 BUTTONS */
  flex-wrap: nowrap !important;
  
  /* VERBESSERTE RESPONSIVE GAPS - Flexibles Spacing */
  gap: clamp(0.1rem, 0.4vw + 0.05rem, 0.4rem);
  
  /* FULL WIDTH UTILIZATION */
  width: 100%;
  max-width: 100%;
  
  /* NAVIGATION PROPERTIES */
  color: var(--color-text-secondary);
  height: auto;
  min-height: 56px; /* Konsistente Höhe mit Suchfeld */
  
  /* Z-INDEX */
  position: relative;
  z-index: var(--z-navigation);
}

.nav-item {
  /* GLEICHMÄSSIGE BUTTON GRÖSSE */
  flex: 1 1 0;
  min-width: 0;
  
  /* 🎯 REFERENZ-BUTTON-HÖHE für Logo-Berechnung */
  min-width: clamp(60px, 16vw, 105px);
  max-width: clamp(70px, 20vw, 125px);
  height: var(--nav-button-height) !important;      /* REFERENZ für Logo */
  min-height: var(--nav-button-height) !important;  /* REFERENZ für Logo */
  max-height: var(--nav-button-height) !important;  /* REFERENZ für Logo */
  padding: clamp(0.4rem, 1vw, 0.7rem) clamp(0.25rem, 0.6vw, 0.9rem);
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  
  /* TEXT CONTROL */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  
  /* CENTERING */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* STYLING - Ihre bewährten Styles */
  margin: 0;
  border: 2px solid var(--color-text-secondary);
  background-color: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
  
  /* INTERACTIONS */
  transition: all 0.3s ease;
  cursor: pointer;
  
  /* VERHINDERT ÜBERLAPPUNG */
  box-sizing: border-box;
}

.nav-item:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-weight: 700;
}

.nav-item a {
  color: inherit;
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* HEADER-BOX - Ihre bestehende Klasse */
.header-box {
  /* Bleibt für Kompatibilität */
}

/* ===================================================================
   AKTIONSBAR - Kompatibilität mit Action-Bar
   =================================================================== */
.action-bar,
.aktionbar-container {
  /* ACTION-BAR IN LOGO-ACTIONS-BOX: RECHTS POSITIONIERT */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  /* MOBILE: KOMPAKTE ACTION-BAR */
  width: auto;
  min-width: auto;
  max-width: 50%;
  
  /* MOBILE: OPTIMALE TOUCH-HÖHE */
  height: 56px;
  min-height: 56px;
  
  /* MOBILE: MINIMALE MARGINS */
  margin: 0.2rem;
  padding: 0;
  
  /* VERBESSERTE RESPONSIVE GAPS */
  gap: clamp(0.15rem, 0.6vw + 0.1rem, 0.5rem);
  
  /* RESPONSIVE BACKGROUND */
  background-color: transparent;
  border-radius: 4px;
}

.nav-l1 {
  display: flex;
  align-items: center;
  height: auto;
  gap: var(--space-xs);
  flex-wrap: nowrap;
}

.nav-l1 .nav-item a {
  color: var(--color-text-secondary);
  background-color: var(--color-text-secondary);
  text-decoration: none;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s;
}

.nav-l1 .nav-item a:hover {
  background-color: var(--color-surface-hover);
}

/* ===================================================================
   SUCHFELD - Responsive Input System
   =================================================================== */
/* ===================================================================
   🎯 SUCHFELD-CONTAINER: HÖHEN-SYNCHRONISATION MIT PARENT-CONTAINERN
   PROBLEM: Container-Box wird größer als Input/Button-Elemente
   LÖSUNG: Container-Höhe = Header-Container-Höhe (nav-l1, action-bar)
   =================================================================== */
.suchfeld {
  display: flex !important;
  align-items: stretch !important; /* KRITISCH: Alle Kinder gleich hoch */
  width: 100% !important;
  max-width: 100% !important;
  
  /* 🎯 SUCHFELD-HÖHE = PARENT-CONTAINER-HÖHE (synchronisiert) */
  height: 100% !important; /* Nimmt die Höhe des Parent-Containers */
  min-height: 100% !important;
  max-height: 100% !important;
  
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 🎯 NAV-L1 & ACTION-BAR: PERFEKTE SYNCHRONISATION MIT BUTTON-HÖHE */
.nav-l1,
.action-bar,
.navigation-box .nav-l2 {
  /* 🎯 CONTAINER-HÖHE = BUTTON-HÖHE (perfekte Synchronisation) */
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* 🎯 INPUT-ELEMENT: HÖHE = CONTAINER-HÖHE */
.suchfeld input,
.nav-l1 .suchfeld input,
.nav-item.suchfeld input,
input[id="searchTerm"] {
  /* FLEX: Kontrollierte Breite */
  flex: 1 1 auto !important;
  min-width: 100px !important;
  max-width: calc(100% - 50px) !important;
  
  /* HÖHE: IDENTISCH MIT CONTAINER */
  height: 100% !important; /* Nimmt Container-Höhe */
  min-height: 100% !important;
  max-height: 100% !important;
  
  /* STYLING */
  border: 2px solid var(--color-text-secondary) !important;
  border-right: none !important;
  border-radius: 1px 0 0 1px !important;
  padding: 0 clamp(0.4rem, 1vw, 0.8rem) !important;
  margin: 0 !important;
  
  /* TEXT & BACKGROUND */
  font-size: clamp(0.7rem, 1.6vw, 0.85rem) !important;
  background-color: var(--color-background) !important;
  color: var(--color-text-primary) !important;
  box-sizing: border-box !important;
}

/* 🎯 SEARCH BUTTON: IDENTISCHE PROPORTIONEN WIE BTN-SMALL */
.suchfeld button,
.nav-l1 .suchfeld button,
.nav-item.suchfeld button,
button[id="searchBtn"] {
  /* 🎯 FLEX: Feste Breite = QUADRATISCH WIE BTN-SMALL */
  flex: 0 0 auto !important;
  width: var(--button-height) !important;
  min-width: var(--button-height) !important;
  max-width: var(--button-height) !important;
  
  /* 🎯 HÖHE: IDENTISCH MIT CONTAINER UND BTN-SMALL */
  height: 100% !important; /* Nimmt Container-Höhe = --button-height */
  min-height: 100% !important;
  max-height: 100% !important;
  
  /* STYLING */
  border: 2px solid var(--color-text-secondary) !important;
  border-left: none !important;
  border-radius: 0 1px 1px 0 !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* INTERAKTIONEN */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

/* 🚨 FINALE CONTAINER-LÖSUNG - MAXIMALE SPECIFICITY */
.viewport-container .header .action-bar .nav-l1 .nav-item.suchfeld {
  display: flex !important;
  align-items: stretch !important; /* Alle Kinder gleich hoch */
  width: 100% !important;
  max-width: 100% !important;
  height: var(--button-height) !important; /* 🎯 UNIFORMIERT MIT ALLEN BUTTONS */
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 🎯 BÜNDIGE ANORDNUNG - ELIMINIERT ALLE ZWISCHENRÄUME */
.suchfeld > input + button,
.suchfeld input + button {
  margin-left: -1px !important; /* Überlappung um Lücken zu schließen */
}


.suchfeld input {
  /* MOBILE: RESPONSIVE SUCHFELD-GRÖSSE */
  width: clamp(75px, 13vw, 115px);
  min-width: clamp(65px, 11vw, 95px);
  max-width: clamp(85px, 16vw, 135px);
  height: clamp(48px, 5vh, 56px);
  min-height: 48px;
  max-height: 56px;
  
  /* STYLING */
  border: 2px solid var(--color-text-secondary); /* Wie nav-items */
  border-radius: 1px;
  padding: 0 clamp(0.4rem, 1vw, 0.8rem);
  margin: 0;
  
  /* TEXT */
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  
  /* BOX-SIZING KONSISTENZ */
  box-sizing: border-box;
}

/* ===================================================================
   BUTTONS - Modernisierte Button-Styles
   =================================================================== */
.btn-small {
  /* 🎯 UNIFORMIERTE BUTTON-GRÖSSE - QUADRATISCH */
  width: var(--button-height) !important;
  min-width: var(--button-height) !important;
  max-width: var(--button-height) !important;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  
  /* LAYOUT */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* STYLING */
  border-radius: 1px;
  border: 2px solid var(--color-text-secondary);
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
  text-align: center;
  line-height: 1;
  font-weight: 600; /* Konsistenz mit nav-items */
  margin: 0;
  padding: 0;
  
  /* INTERACTIONS */
  transition: all 0.3s ease;
  cursor: pointer;
  
  /* BOX-SIZING KONSISTENZ */
  box-sizing: border-box;
}

.btn-small:hover,
.btn-small:focus {
  background-color: var(--color-surface-hover);
}

.btn {
  min-width: 150px;
  max-width: 200px;
  width: 9rem;
}

/* NAVIGATION BUTTONS */
.btnNext,
.btnPrev {
  width: 48px;
  height: 100%;
  margin: var(--space-sm);
}

/* ===================================================================
   USER DROPDOWN - Modernisierte Dropdown-Navigation
   =================================================================== */
.user-dropdown {
  position: relative;
}

.user-dropdown-link {
  /* Styling wird von .btn-small übernommen */
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--color-background);
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: var(--z-dropdown);
  border-radius: 4px;
  padding: var(--space-xs) 0;
  margin: 0;
  list-style: none;
  
  /* MODERN STYLING */
  border: 1px solid var(--color-secondary);
  backdrop-filter: blur(8px);
}

.user-dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content > li {
  text-align: left;
  margin: 0;
  padding: 0;
}

.dropdown-content li a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background-color 0.2s ease;
}

.dropdown-content li a:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-secondary);
}

/* ===================================================================
   CONTENT AREA - Hauptinhalt
   =================================================================== */
.content-window {
  /* LAYOUT */
  flex: 1;
  width: 100%;
  max-width: 1200px;
  min-width: 100%;
  display: block;
  margin: 0 auto;
  
  /* STYLING */
  background-color: var(--color-background);
  border-radius: 8px;
  
  /* DYNAMIC RESPONSIVE SIZING - Verwendet echte Viewport-Höhe */
  min-height: 80vh;
  min-height: calc(var(--vh, 1vh) * 80); /* Dynamische Höhe via JS */
  height: auto;
  overflow-y: visible;
  
  /* RESPONSIVE PADDING */
  padding: var(--space-md) var(--space-md) 300px;
}

/* ===================================================================
   SCROLLABLE CONTAINER - Layout-System
   =================================================================== */
.scrollable-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  align-items: center;
  width: 100%;
  /* 🎯 HEADER-BOX-SYNCHRONISATION: Gleiche Breite wie Header-Content */
  max-width: var(--header-content-max-width);
  padding: 0 var(--header-content-padding);
  text-align: center;
}

/* ===================================================================
   UTILITY COMPONENTS
   =================================================================== */
.box {
  padding: var(--space-sm);
  background-color: var(--color-background);
  border: 1px solid var(--color-background);
}

/* ===================================================================
   FOOTER SYSTEM
   =================================================================== */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  min-height: 10vh;
  flex-shrink: 0;
  border-top: 4px solid var(--color-primary);
  padding: var(--space-md) 0;
  width: 100%;
  text-align: center;
}

.footer-container {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: var(--space-lg);
}

.footer-column {
  flex: 1;
  min-width: 200px;
  margin: var(--space-sm);
}

.footer-column h3 {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column li {
  margin: var(--space-xs) 0;
}

.footer-column a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: var(--color-secondary);
}

/* ===================================================================
   INFO BAR - Social Media Bar
   =================================================================== */
.info-bar {
  background-color: var(--color-primary);
  padding: 0;
  width: 100%;
}

.info-bar-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.social-icon {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  padding: var(--space-xs);
  transition: color 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  color: var(--color-secondary);
}

/* ===================================================================
   RESPONSIVE BREAKPOINTS - Mobile First Design
   =================================================================== */

/* ===================================================================
   🎯 MOBILE LAYOUT ERWEITERT BIS 800PX - KEIN PROBLEMATISCHER ZWISCHENBEREICH
   0px - 800px: Konsistentes 2-Zeilen Mobile Layout
   Zeile 1: Logo links + Action-Bar rechts
   Zeile 2: Navigation zentriert, volle Breite
   =================================================================== */

/* MOBILE LAYOUT: 0px bis 950px - Einheitliche 2-Zeilen-Struktur */
@media screen and (max-width: 950px) {
  /* 🎯 MATHEMATISCHE ANPASSUNG: 20% KLEINER BEI 950PX */
  :root {
    --header-950px-reduction: 0.8; /* 20% kleiner */
  }
  
  .header {
    /* MOBILE: ERHÖHTE HEADER-HÖHE FÜR 2-ZEILEN LAYOUT */
    /* Header-Container: Schwarzer Hintergrund für gesamten Header */
    /* background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); */
    
    /* ✅ ULTRA-FLÜSSIGE HEADER-HÖHE: Keine stufenartigen Berechnungen mehr! */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    
    /* ✅ FLÜSSIGES PADDING: Proportional zur Header-Höhe */
    padding: var(--header-padding-fluid) 0;
    
    /* Box-sizing für korrekte Höhen-Berechnung */
    box-sizing: border-box;
    
    /* Flexbox-Optimierung für robuste Höhen-Behandlung */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: visible;
  }
  
  .header-case {
    /* MOBILE: 2-ZEILEN FLEX-WRAP LAYOUT */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: center;
    
    /* RESPONSIVE PADDING UND GAPS */
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
    gap: clamp(0.75rem, 2vw, 1.25rem);
    
    /* AUSREICHENDE MINDESTHÖHE FÜR 2 ZEILEN */
    /* ANGEPASSTE HÖHE: Mehr Platz für 2-Zeilen Flex-Wrap Layout */
    min-height: clamp(140px, 20vh, 180px);
    height: auto;
    
    /* Box-sizing Konsistenz */
    box-sizing: border-box;
    
    width: 100%;
    max-width: 100%;
  }
  
  /* MOBILE: Logo-Container - Links in erster Zeile */
  .logo-container {
    order: 1;
    flex-basis: auto;
    flex-shrink: 0;
    
    /* Box-sizing Konsistenz */
    box-sizing: border-box;
    
    /* RESPONSIVE LOGO-GRÖSSE */
    width: clamp(80px, 15vw, 150px);
    
    /* KRITISCH: LINKS-AUSRICHTUNG */
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
  }
  
  /* MOBILE: Action-Bar - Rechts in erster Zeile */
  .action-bar {
    order: 2;
    flex-basis: auto;
    flex-shrink: 0;
    
    /* Box-sizing Konsistenz */
    box-sizing: border-box;
    
    /* RESPONSIVE ACTION-BAR BREITE */
    width: auto;
    max-width: clamp(120px, 35vw, 250px);
    
    /* KRITISCH: RECHTS-AUSRICHTUNG */
    justify-content: flex-end !important;
    text-align: right !important;
    
    /* RESPONSIVE GAPS */
    gap: clamp(0.25rem, 1vw, 0.5rem);
  }
  
  /* MOBILE: Navigation-Box - Volle Breite in zweiter Zeile */
  .navigation-box {
    order: 3;
    flex-basis: 100% !important; /* ERZWINGT NEUE ZEILE */
    width: 100%;
    
    /* Box-sizing für korrekte Höhen-Berechnung */
    box-sizing: border-box;
    
    /* VOLLE BREITE: Navigation nutzt gesamte verfügbare Breite */
    display: flex;
    
    /* RESPONSIVE STYLING */
    padding: clamp(0.5rem, 1.5vw, 1rem) 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    min-height: clamp(50px, 8vh, 70px);
  }
  
  /* MOBILE: Navigation L2 - Optimierte Gaps für maximale Raumnutzung */
  .navigation-box .nav-l2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* KLEINE RESPONSIVE GAPS: Mehr Platz für Buttons */
    gap: clamp(0.4rem, 1vw, 0.6rem); /* 6.4px - 12px bei 320px-800px */
  }
  
  /* MOBILE: Navigation Items - MATHEMATISCHE BREITENBERECHNUNG */
  .nav-item {
    font-size: clamp(0.7rem, 2.2vw, 1rem);
    
    /* 🎯 OPTIMALE RAUMNUTZUNG: (Container-Breite - 3×Gap) ÷ 4 Buttons */
    width: calc((100% - 3 * clamp(0.4rem, 1vw, 0.6rem)) / 4);
    min-width: 70px; /* Touch-Mindestgröße */
    max-width: 220px; /* Reasonable Maximum für sehr breite Screens */
    height: clamp(48px, 7vh, 60px);
    padding: clamp(0.4rem, 1.2vw, 0.8rem) clamp(0.2rem, 0.8vw, 0.6rem);
  }
  
  /* MOBILE: Suchfeld - Responsive */
  .suchfeld input {
    width: clamp(70px, 15vw, 120px);
    height: clamp(44px, 6vh, 56px);
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
  }
  
  /* MOBILE: Buttons - Responsive */
  .btn-small {
    width: clamp(44px, 8vw, 60px);
    height: clamp(48px, 7vh, 60px);
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  }
}

/* ===================================================================
   🎯 VIEWPORT-PROPORTIONALE SKALIERUNG - MATHEMATISCH KORREKT
   10% Logo | 50% Navigation | 30% Action-Bar | 10% Abstände (5%+5%)
   SMOOTH SKALIERUNG: 800px bis 1600px ohne Sprünge
   =================================================================== */

/* ===================================================================
   🎯 DESKTOP LAYOUT OPTIMIERUNG - STUFENWEISE SKALIERUNG
   951px - 1050px: Kompakter Desktop (Anti-Overlap)
   1051px - 1200px: Standard Desktop
   1201px - 1400px: Vergrößerte Navigation
   1400px+: Maximale Navigation-Buttons
   =================================================================== */

/* DESKTOP KOMPAKT: 951px bis 1050px - Anti-Overlap System */
@media screen and (min-width: 951px) and (max-width: 1050px) {
  /* 🎯 DESKTOP BUTTON-UNIFORMITÄT: FESTE 60PX FÜR ALLE BUTTONS */
  :root {
    --button-height: 60px !important;
  }
  
  .header {
    /* ✅ ULTRA-FLÜSSIGE HEADER-HÖHE: Kontinuierlich für alle Desktop-Größen */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    padding: var(--space-sm) 0;
    
    /* 🎯 DESKTOP: FULL-WIDTH ENFORCEMENT - Bricht aus viewport-container aus */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
  .header-case {
    /* DESKTOP: HORIZONTALES 3-SPALTEN-LAYOUT */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    
    /* 🎯 DESKTOP: ZENTRIERTE CONTENT-BOX mit optimaler Breite */
    width: 100%;
    max-width: var(--header-content-max-width);
    margin: 0 auto;
    min-height: 80px;
    overflow: visible;
    box-sizing: border-box;
    
    /* KOMPAKTER MODUS: Reduzierte Abstände für Anti-Overlap */
    padding: 0 var(--header-content-padding);
    gap: clamp(0.3rem, 0.8vw, 0.8rem);
  }
  
  /* 🎯 DESKTOP: SYNCHRONISIERTE HEADER-CONTAINER-HÖHEN = 60PX */
  .header-case > .logo-container,
  .header-case > .navigation-box,
  .header-case > .action-bar {
    order: 0;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
    display: flex;
    align-items: center;
  }
  
  /* DESKTOP: Nav-L1 & Action-Bar Höhe = Button-Höhe = 60px */
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 LOGO-CONTAINER: KOMPAKTE BREITE FÜR MEHR PLATZ */
  .logo-container {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(70px, 6vw, 100px); /* Kompakter für Anti-Overlap */
    max-width: 100px;
    min-width: 70px;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
  }
  
  /* Logo kleiner im kompakten Modus */
  .logo img {
    /* 🎯 RESPONSIVE LOGO: 15% der Viewport-Breite */
    width: clamp(var(--logo-min-size), var(--logo-size), var(--logo-max-size)) !important;
    height: clamp(var(--logo-min-size), var(--logo-size), var(--logo-max-size)) !important;
  }
  
  /* 🎯 NAVIGATION-BOX: KOMPAKTE MITTLERE SPALTE */
  .navigation-box {
    justify-content: center;
    flex: 1;
    flex-shrink: 1;
    min-width: 280px; /* Reduzierte Mindestbreite für Kompakt-Modus */
    max-width: clamp(350px, 45vw, 500px); /* Kompaktere Maximalbreite */
    margin: 0;
    padding: 0.5rem 0.8rem; /* Kompakte Padding */
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    z-index: var(--z-navigation);
    order: 0;
  }
  
  /* 🎯 ACTION-BAR: KOMPAKTE ABER FUNKTIONALE BREITE */
  .action-bar {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(180px, 20vw, 280px); /* Kompakte Action-Bar */
    max-width: 280px;
    min-width: 180px;
    justify-content: flex-end !important;
    text-align: right !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
    order: 0;
    gap: clamp(0.25rem, 0.6vw, 0.4rem); /* Kompakte Gaps */
  }
  
  /* KOMPAKTE NAVIGATION ITEMS */
  .nav-item {
    font-size: clamp(0.75rem, 1vw, 0.9rem); /* Kleinere Schrift */
    padding: 0.5rem 0.8rem; /* Kompakte Padding */
    min-width: clamp(65px, 8vw, 100px); /* Kompaktere Buttons */
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* KOMPAKTE ACTION-BAR ELEMENTE */
  .suchfeld input {
    width: clamp(70px, 10vw, 120px); /* Kompakter Input */
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    height: var(--button-height) !important;
  }
  
  .btn-small {
    font-size: clamp(0.7rem, 0.9vw, 0.8rem); /* Kompaktere Icons */
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 ALLE ACTION-BAR BUTTONS KOMPAKT = 60PX × 60PX */
  .action-bar .nav-item button,
  .action-bar .btn-small,
  .action-bar .suchfeld button,
  .nav-l1 .btn-small,
  .nav-l1 .suchfeld button {
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 SUCHFELD KOMPAKT */
  .suchfeld {
    height: var(--button-height) !important;
  }
  
  .suchfeld input {
    height: 100% !important;
    flex: 1 1 auto !important;
  }
  
  .suchfeld button {
    height: 100% !important;
    width: var(--button-height) !important;
    flex: 0 0 auto !important;
  }
}

/* DESKTOP STANDARD: 1051px bis 1200px - Normaler Desktop */
@media screen and (min-width: 1051px) and (max-width: 1200px) {
  /* 🎯 DESKTOP BUTTON-UNIFORMITÄT: FESTE 60PX FÜR ALLE BUTTONS */
  :root {
    --button-height: 60px !important;
  }
  
  .header {
    /* ✅ KONTINUIERLICHE SKALIERUNG: Gleiche Formel wie alle anderen Breakpoints */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    padding: var(--space-sm) 0;
    
    /* 🎯 DESKTOP: FULL-WIDTH ENFORCEMENT - Bricht aus viewport-container aus */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
  .header-case {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    
    /* 🎯 DESKTOP: ZENTRIERTE CONTENT-BOX */
    width: 100%;
    max-width: var(--header-content-max-width);
    margin: 0 auto;
    min-height: 80px;
    overflow: visible;
    box-sizing: border-box;
    
    padding: 0 var(--header-content-padding);
    gap: clamp(0.5rem, 1.2vw, 1.2rem);
  }
  
  /* 🎯 DESKTOP: SYNCHRONISIERTE HEADER-CONTAINER-HÖHEN = 60PX */
  .header-case > .logo-container,
  .header-case > .navigation-box,
  .header-case > .action-bar {
    order: 0;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
    display: flex;
    align-items: center;
  }
  
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 LOGO-CONTAINER: STANDARD BREITE */
  .logo-container {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(80px, 8vw, 140px);
    max-width: 140px;
    min-width: 80px;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
  }
  
  /* 🎯 NAVIGATION-BOX: STANDARD MITTLERE SPALTE */
  .navigation-box {
    justify-content: center;
    flex: 1;
    flex-shrink: 1;
    min-width: 300px;
    max-width: clamp(400px, 50vw, 600px);
    margin: 0;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    z-index: var(--z-navigation);
    order: 0;
  }
  
  /* 🎯 ACTION-BAR: STANDARD BREITE */
  .action-bar {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(200px, 22vw, 320px);
    max-width: 320px;
    min-width: 200px;
    justify-content: flex-end !important;
    text-align: right !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
    order: 0;
    gap: clamp(0.3rem, 0.7vw, 0.5rem);
  }
  
  /* STANDARD NAVIGATION ITEMS */
  .nav-item {
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    padding: 0.6rem 1rem;
    min-width: clamp(70px, 9vw, 110px);
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* STANDARD ACTION-BAR ELEMENTE */
  .suchfeld input {
    width: clamp(80px, 11vw, 130px);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    height: var(--button-height) !important;
  }
  
  .btn-small {
    font-size: clamp(0.75rem, 0.95vw, 0.85rem);
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 ALLE ACTION-BAR BUTTONS STANDARD = 60PX × 60PX */
  .action-bar .nav-item button,
  .action-bar .btn-small,
  .action-bar .suchfeld button,
  .nav-l1 .btn-small,
  .nav-l1 .suchfeld button {
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  .suchfeld {
    height: var(--button-height) !important;
  }
  
  .suchfeld input {
    height: 100% !important;
    flex: 1 1 auto !important;
  }
  
  .suchfeld button {
    height: 100% !important;
    width: var(--button-height) !important;
    flex: 0 0 auto !important;
  }
}

/* DESKTOP GROß: 1201px bis 1400px - Vergrößerte Navigation */
@media screen and (min-width: 1201px) and (max-width: 1400px) {
  /* 🎯 DESKTOP BUTTON-UNIFORMITÄT: FESTE 60PX FÜR ALLE BUTTONS */
  :root {
    --button-height: 60px !important;
  }
  
  .header {
    /* ✅ KONTINUIERLICHE SKALIERUNG: Gleiche Formel wie alle anderen Breakpoints */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    padding: var(--space-sm) 0;
    
    /* 🎯 DESKTOP: FULL-WIDTH ENFORCEMENT - Bricht aus viewport-container aus */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
  .header-case {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    
    /* 🎯 DESKTOP: ZENTRIERTE CONTENT-BOX */
    width: 100%;
    max-width: var(--header-content-max-width);
    margin: 0 auto;
    min-height: 80px;
    overflow: visible;
    box-sizing: border-box;
    
    padding: 0 var(--header-content-padding);
    gap: clamp(0.6rem, 1.4vw, 1.4rem);
  }
  
  /* 🎯 DESKTOP: SYNCHRONISIERTE HEADER-CONTAINER-HÖHEN = 60PX */
  .header-case > .logo-container,
  .header-case > .navigation-box,
  .header-case > .action-bar {
    order: 0;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
    display: flex;
    align-items: center;
  }
  
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 LOGO-CONTAINER: GROßE BILDSCHIRM BREITE */
  .logo-container {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(100px, 9vw, 160px);
    max-width: 160px;
    min-width: 100px;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
  }
  
  /* 🎯 NAVIGATION-BOX: VERGRÖßERTE MITTLERE SPALTE FÜR MEHR PLATZ */
  .navigation-box {
    justify-content: center;
    flex: 1;
    flex-shrink: 1;
    min-width: 350px;
    max-width: clamp(500px, 55vw, 750px);
    margin: 0;
    padding: 1rem 1.2rem; /* Mehr Padding für größere Buttons */
    background: rgba(255, 255, 255, 0.0);
    border-radius: 4px;
    z-index: var(--z-navigation);
    order: 0;
  }
  
  /* 🎯 ACTION-BAR: VERGRÖßERTE BREITE */
  .action-bar {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(240px, 25vw, 380px);
    max-width: 380px;
    min-width: 240px;
    justify-content: flex-end !important;
    text-align: right !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
    order: 0;
    gap: clamp(0.4rem, 0.8vw, 0.7rem);
  }
  
  /* 🎯 VERGRÖßERTE NAVIGATION ITEMS - MEHR PADDING & TEXT */
  .nav-item {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem) !important; /* Größerer Text */
    padding: 0.7rem 1.4rem !important; /* Mehr Padding */
    min-width: clamp(90px, 11vw, 140px) !important; /* Breitere Buttons */
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* VERGRÖßERTE ACTION-BAR ELEMENTE */
  .suchfeld input {
    width: clamp(100px, 13vw, 160px);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    height: var(--button-height) !important;
  }
  
  .btn-small {
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 ALLE ACTION-BAR BUTTONS = 60PX × 60PX */
  .action-bar .nav-item button,
  .action-bar .btn-small,
  .action-bar .suchfeld button,
  .nav-l1 .btn-small,
  .nav-l1 .suchfeld button {
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  .suchfeld {
    height: var(--button-height) !important;
  }
  
  .suchfeld input {
    height: 100% !important;
    flex: 1 1 auto !important;
  }
  
  .suchfeld button {
    height: 100% !important;
    width: var(--button-height) !important;
    flex: 0 0 auto !important;
  }
}

/* DESKTOP MAXIMAL: 1401px+ - Maximale Navigation-Buttons */
@media screen and (min-width: 1401px) {
  /* 🎯 DESKTOP BUTTON-UNIFORMITÄT: FESTE 60PX FÜR ALLE BUTTONS */
  :root {
    --button-height: 60px !important;
  }
  
  .header {
    /* ✅ ULTRA-FLÜSSIGE HEADER-HÖHE: Kontinuierlich für sehr große Desktop-Displays */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    padding: var(--space-sm) 0;
    
    /* 🎯 DESKTOP: FULL-WIDTH ENFORCEMENT - Bricht aus viewport-container aus */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  
  .header-case {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(1.5rem, 2.5vw, 3rem);
    gap: clamp(0.8rem, 1.8vw, 2rem);
    width: 100%;
    max-width: none;
    margin: 0 auto;
    min-height: 80px;
    overflow: visible;
    box-sizing: border-box;
  }
  
  /* 🎯 DESKTOP: SYNCHRONISIERTE HEADER-CONTAINER-HÖHEN = 60PX */
  .header-case > .logo-container,
  .header-case > .navigation-box,
  .header-case > .action-bar {
    order: 0;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
    display: flex;
    align-items: center;
  }
  
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 LOGO-CONTAINER: MAXIMALE BILDSCHIRM BREITE */
  .logo-container {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(120px, 10vw, 180px);
    max-width: 180px;
    min-width: 120px;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
  }
  
  /* 🎯 NAVIGATION-BOX: MAXIMALE MITTLERE SPALTE - OPTIMALE RAUMNUTZUNG */
  .navigation-box {
    justify-content: center;
    flex: 1;
    flex-shrink: 1;
    min-width: 400px;
    max-width: clamp(600px, 60vw, 900px); /* Maximale Raumnutzung */
    margin: 0;
    padding: 1.2rem 1.5rem; /* Großzügiges Padding für maximale Buttons */
    background: rgba(255, 255, 255, 0.0);
    border-radius: 4px;
    z-index: var(--z-navigation);
    order: 0;
  }
  
  /* 🎯 ACTION-BAR: MAXIMALE BREITE */
  .action-bar {
    flex-shrink: 0;
    flex-basis: auto;
    width: clamp(280px, 28vw, 450px);
    max-width: 450px;
    min-width: 280px;
    justify-content: flex-end !important;
    text-align: right !important;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: var(--z-navigation);
    pointer-events: auto;
    order: 0;
    gap: clamp(0.5rem, 1vw, 1rem);
  }
  
  /* 🎯 MAXIMALE NAVIGATION ITEMS - GRÖßTE BUTTONS & TEXT FÜR OPTIMALE RAUMNUTZUNG */
  .nav-item {
    font-size: clamp(1rem, 1.5vw, 1.3rem) !important; /* Maximaler Text */
    padding: 0.8rem 1.8rem !important; /* Maximales Padding */
    min-width: clamp(120px, 14vw, 180px) !important; /* Maximale Button-Breite */
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* MAXIMALE ACTION-BAR ELEMENTE */
  .suchfeld input {
    width: clamp(120px, 15vw, 200px);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    height: var(--button-height) !important;
  }
  
  .btn-small {
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  /* 🎯 ALLE ACTION-BAR BUTTONS MAXIMAL = 60PX × 60PX */
  .action-bar .nav-item button,
  .action-bar .btn-small,
  .action-bar .suchfeld button,
  .nav-l1 .btn-small,
  .nav-l1 .suchfeld button {
    width: var(--button-height) !important;
    height: var(--button-height) !important;
    min-width: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-width: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  .suchfeld {
    height: var(--button-height) !important;
  }
  
  .suchfeld input {
    height: 100% !important;
    flex: 1 1 auto !important;
  }
  
  .suchfeld button {
    height: 100% !important;
    width: var(--button-height) !important;
    flex: 0 0 auto !important;
  }
}

/* 🎯 MAXIMALBREITE AB 1600PX: Container-Beschränkung aktivieren */
@media screen and (min-width: 1600px) {
  .header-case {
    /* AB 1600PX: Container mit Maximalbreite */
    max-width: 1600px; /* Jetzt Maximalbreite aktivieren */
    padding: 0 3rem; /* Fixe Abstände ab 1600px */
    gap: 2rem;       /* Fixe Gaps ab 1600px */
  }
  
  /* LOGO: Fixe Maximalbreite */
  .logo-container {
    width: 180px; /* Final fixe Breite */
    max-width: 180px;
  }
  
  /* NAVIGATION: Maximale aber begrenzte Breite */
  .navigation-box {
    max-width: 900px; /* Finale maximale Navigation-Breite */
  }
  
  /* ACTION-BAR: Fixe Maximalbreite */
  .action-bar {
    width: 450px; /* Final fixe Breite */
    max-width: 450px;
  }
  
  /* ELEMENTE: Optimale finale Größen bei maximaler Auflösung */
  .nav-item {
    font-size: 1.3rem !important;
    padding: 0.8rem 1.8rem !important;
    min-width: 160px !important;
  }
  
  .suchfeld input {
    width: 180px !important;
    font-size: 1rem !important;
  }
  
  .btn-small {
    font-size: 1rem !important;
  }
  
  /* DESKTOP MAXIMAL: Nav-Container bereits durch @media (min-width: 800px) definiert */
  
  .suchfeld input {
    /* DESKTOP: Input = Container-Höhe */
    flex: 1 1 auto !important;
    min-width: 140px !important;
    max-width: calc(100% - 65px) !important;
    width: 160px !important;
    height: 100% !important; /* = Container-Höhe */
    font-size: 0.9rem !important;
  }
  
  .suchfeld button,
  .nav-l1 .suchfeld button,
  .nav-item.suchfeld button,
  button[id="searchBtn"] {
    flex: 0 0 auto !important;
    width: var(--button-height) !important; /* 🎯 QUADRATISCH = HÖHE */
    height: 100% !important; /* = Container-Höhe */
  }
  
  .btn-small {
    font-size: 0.85rem;
    /* 🎯 BREITE & HÖHE: Wird durch --button-height Variable gesteuert */
  }
}

/* ===================================================================
   🎯 VIEWPORT-CONTAINER & CONTENT-OPTIMIERUNG AB 1440PX
   =================================================================== */
@media screen and (min-width: 1440px) {
  .viewport-container {
    max-width: 1600px;
  }
  
  .content-window {
    max-width: 1600px;
    padding: var(--space-xl) calc(var(--space-xl) * 2) 300px;
  }
}

/* ===================================================================
   🎯 DESKTOP EDGE-TO-EDGE VIEWPORT-CONTAINER (>950px)
   Container liegt bündig am Bildschirmrand ohne Abstände
   =================================================================== */
@media screen and (min-width: 951px) {
  /* DESKTOP: Body und HTML ohne Abstände */
  body, html {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* DESKTOP: Viewport-Container edge-to-edge */
  .viewport-container {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Bricht aus zentriertem Layout aus - volle Bildschirmbreite */
    position: relative;
    left: 0;
    right: 0;
  }
  
  /* DESKTOP: Alle Haupt-Container ohne Seitenabstände */
  .container,
  .main-container,
  .content-window {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* ===================================================================
   🎯 MOBILE RESPONSIVE UNTERSCHEIDUNG - Padding für Lesbarkeit
   Mobile behält Seitenabstände, Desktop ist edge-to-edge
   =================================================================== */
@media screen and (max-width: 950px) {
  /* MOBILE: Viewport-Container mit Seitenabständen für Lesbarkeit */
  .viewport-container {
    /* padding: 0 var(--space-sm) !important; */
    margin: 0;
    max-width: 1600px !important;
  }
  
  /* MOBILE: Content-Container mit benutzerfreundlichen Abständen */
  .container,
  .main-container,
  .content-window {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }
}

/* ===================================================================
   CRITICAL RESPONSIVE FIXES - Anti-Wrapping Overrides
   =================================================================== */

/* ===================================================================
   🎯 KLEINE DESKTOP-DISPLAYS: Header-Höhen-Optimierung (400px-950px)
   Problem: Header zu groß bei kleinen Desktop-Displays
   Lösung: Stufenweise Header-Verkleinerung für bessere Raumnutzung
   =================================================================== */

/* SEHR KLEINE DESKTOP-DISPLAYS: 400px-600px - Kompakte Header */
@media screen and (min-width: 400px) and (max-width: 600px) {
  .header {
    /* ✅ ULTRA-FLÜSSIGE HEADER-HÖHE: Kontinuierlich für alle Viewport-Größen */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    padding: var(--header-padding-fluid) 0;
  }
  
  .header-case {
    /* KOMPAKTE HEADER-CASE-HÖHE - 10% vergrößert */
    min-height: clamp(110px, 15vh, 143px) !important; /* +10%: 100px→110px, 130px→143px */
    padding: clamp(0.5rem, 1.8vw, 0.9rem) !important; /* Kompakteres Padding */
    gap: clamp(0.5rem, 1.5vw, 0.9rem) !important; /* Kompaktere Gaps */
  }
  
  /* 🎯 LOGO-SKALIERUNG VERSTÄRKT: Konsistent mit Haupt-Definition */
  .logo-container img {
    width: clamp(60px, 8vw + 2vh, 80px) !important;
    height: clamp(60px, 8vw + 2vh, 80px) !important;
  }
  
  .navigation-box {
    min-height: clamp(40px, 6vh, 50px) !important; /* Kompaktere Navigation */
    padding: clamp(0.3rem, 1vw, 0.6rem) 0 !important;
  }
}

/* 🎯 KORRIGIERT: FLÜSSIGER ÜBERGANG 601px-950px - Eliminiert Header-Sprung */
@media screen and (min-width: 601px) and (max-width: 950px) {
  .header {
    /* ✅ ULTRA-FLÜSSIGE HEADER-HÖHE: Kontinuierlich für alle Viewport-Größen */
    height: var(--header-height-fluid) !important;
    min-height: var(--header-height-fluid) !important;
    padding: var(--header-padding-fluid) 0;
  }
  
  .header-case {
    /* 🎯 USER-KORREKTUR: Header-Case 10% größer */
    min-height: clamp(155px, 21vh, 185px) !important; /* +10% größer: 140px→155px, 170px→185px */
    padding: clamp(0.55rem, 2vw, 1rem) !important;
    gap: clamp(0.55rem, 1.3vw, 0.9rem) !important;
    justify-content: space-between;
  }
  
  /* 🎯 KORRIGIERT: Direkte clamp()-Werte statt veralteter Variablen */
  .logo-container img {
    width: clamp(60px, 6.875vh, 70px) !important;
    height: clamp(60px, 6.875vh, 70px) !important;
  }
  
  .navigation-box {
    min-height: clamp(47px, 7.2vh, 58px) !important;
    padding: clamp(0.42rem, 1.25vw, 0.72rem) 0 !important;
  }
}

/* 🎯 MOBILE OPTIMIERUNG: Kontinuierliche Skalierung ohne Sprünge */
@media screen and (max-width: 400px) {
  /* ✅ HEADER NUTZT KONTINUIERLICHE FORMEL - KEINE SEPARATEN HÖHEN-REGELN */
  /* Header verwendet automatisch var(--header-height-fluid) ohne Überschreibung */
  
  .nav-l2 {
    gap: clamp(0.05rem, 0.5vw, 0.2rem);
  }
  
  .nav-item {
    font-size: clamp(0.55rem, 2.5vw + 0.05rem, 0.75rem);
    padding: clamp(0.25rem, 0.8vw + 0.05rem, 0.45rem) clamp(0.1rem, 0.4vw + 0.05rem, 0.25rem);
    min-width: clamp(25px, 10vw + 2px, 75px);
    max-width: clamp(100px, 14vw + 3px, 90px);
    width: calc((100% - 3 * clamp(0.4rem, 1vw, 0.6rem)) / 4);
    
  }
  .user-dropdown {
    margin-right:0.5rem;
  }
  
  .header-case {
    /* 🚨 ULTRA-KOMPAKTE ABSTÄNDE bei 400px */
    gap: clamp(0.1rem, 0.3vw, 0.2rem);
    padding: 0.25rem;
    justify-content: space-between;
  }
  
  /* ✅ LOGO-CONTAINER: Proportional zu Navigation-Buttons */
  .logo-container {
    /* 25% GRÖSSER ALS BUTTON-CONTAINER */
    width: clamp(75px, 10vw, 87px) !important;  /* 25% größer als Button-Bereich */
    max-width: 87px !important;
    margin: 0;
    flex-shrink: 0; /* Verhindert Komprimierung */
  }
  
  /* 🎯 LOGO-SKALIERUNG VERSTÄRKT: Auch bei kleinen Bildschirmen sichtbar */
  .logo-container img {
    width: clamp(55px, 7vw + 1.5vh, 70px) !important;  /* Optimiert für kleine Screens */
    height: clamp(55px, 7vw + 1.5vh, 70px) !important; /* Optimiert für kleine Screens */
    max-width: 70px !important;  /* Erhöht für bessere Skalierung */
    max-height: 70px !important; /* Erhöht für bessere Skalierung */
  }
  
  /* 🚨 ACTION-BAR: Schutz vor Logo-Verdrängung */
  .action-bar {
    min-width: 120px !important;
    max-width: 50% !important;
    flex-shrink: 0; /* Verhindert Komprimierung */
  }
  
  /* NAVIGATION-BOX: Sehr kleine Bildschirme */
  .navigation-box {
    padding: var(--space-xs) clamp(0.25rem, 1vw, 0.5rem);
  }
  
  .navigation-box .nav-l2 {
    min-width: clamp(200px, 50vw, 400px);
    margin: 0;
  }
  
  /* ACTION-BAR: Sehr kleine Bildschirme */
  .action-bar {
    min-width: clamp(80px, 15vw, 150px);
    margin: 0;
    gap: clamp(0.1rem, 0.5vw, 0.3rem);
  }
  
  /* 🎯 400PX: PARENT-CONTAINER HÖHEN-SYNCHRONISATION - KONSISTENT MIT MOBILE */
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    height: var(--button-height) !important;  /* Konsistent mit Mobile-System */
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  .suchfeld input {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    max-width: calc(100% - var(--button-height)) !important;  /* Basiert auf Button-Höhe */
    height: 100% !important; /* = Container-Höhe */
    font-size: clamp(0.7rem, 2vw, 0.8rem) !important;
  }
  
  .suchfeld button,
  .nav-l1 .suchfeld button,
  .nav-item.suchfeld button,
  button[id="searchBtn"] {
    flex: 0 0 auto !important;
    width: var(--button-height) !important;  /* Quadratisch = Höhe, konsistent mit Mobile */
    height: 100% !important; /* = Container-Höhe */
  }

/* ===================================================================
   🎯 KLEINSTE MOBILE GERÄTE: iPhone SE, Galaxy S5 (320px-375px)
   KRITISCHE HÖHEN-SYNCHRONISATION
   =================================================================== */
@media screen and (max-width: 375px) {
  /* 🎯 iPhone SE: NAVIGATION-CONTAINER OPTIMIERUNG (Header nutzt kontinuierliche Skalierung) */
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    /* 🎯 iPhone SE: Container-Höhe = Button-Höhe (synchronisiert) */
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  .suchfeld input {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    max-width: calc(100% - 47px) !important;
    height: 100% !important; /* = Container-Höhe */
    font-size: clamp(0.72rem, 2.2vw, 0.82rem) !important;
    padding: 0 clamp(0.3rem, 1.2vw, 0.6rem) !important;
  }
  
  .suchfeld button,
  .nav-l1 .suchfeld button,
  .nav-item.suchfeld button,
  button[id="searchBtn"] {
    flex: 0 0 auto !important;
    width: var(--button-height) !important; /* 🎯 QUADRATISCH = HÖHE */
    height: 100% !important; /* = Container-Höhe */
  }
}

/* ===================================================================
   🎯 ALLERKLEINSTE GERÄTE: < 320px (Galaxy Fold, etc.)
   SURVIVAL-MODUS: Funktionalität vor Ästhetik
   =================================================================== */
@media screen and (max-width: 320px) {
  /* 🎯 320PX: NAVIGATION-CONTAINER OPTIMIERUNG (Header nutzt kontinuierliche Skalierung) */
  .nav-l1,
  .action-bar,
  .navigation-box .nav-l2 {
    /* 🎯 320PX: Container-Höhe = Button-Höhe (synchronisiert) */
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    max-height: var(--button-height) !important;
  }
  
  .suchfeld input {
    flex: 1 1 auto !important;
    min-width: 75px !important;
    max-width: calc(100% - 42px) !important;
    height: 100% !important; /* = Container-Höhe */
    font-size: clamp(0.68rem, 2.5vw, 0.78rem) !important;
    padding: 0 clamp(0.25rem, 1vw, 0.5rem) !important;
  }
  
  .suchfeld button,
  .nav-l1 .suchfeld button,
  .nav-item.suchfeld button,
  button[id="searchBtn"] {
    flex: 0 0 auto !important;
    width: var(--button-height) !important; /* 🎯 QUADRATISCH = HÖHE */
    height: 100% !important; /* = Container-Höhe */
    font-size: clamp(0.6rem, 2vw, 0.7rem) !important;
  }
}
}

/* ===================================================================
   🎯 ELIMINIERT: PROBLEMATISCHE ZWISCHENSTUFEN-REGELN (401px-949px)
   Diese Regeln wurden entfernt, da sie das einheitliche Mobile Layout
   bis 950px störten. Das neue @media (max-width: 950px) übernimmt
   die komplette Kontrolle über den gesamten mobilen Bereich.
   
   ALTE REGELN ENTFERNT:
   - MEDIUM MOBILE PROTECTION (401px-600px)
   - PROBLEMATIC RANGE PROTECTION (600px-949px)
   
   RESULTAT: Sauberer Übergang von Mobile (0-950px) zu Desktop (951px+)
   🎯 DESKTOP-LAYOUT-OPTIMIERUNG:
   - 951px-1050px: Kompakter Desktop (Anti-Overlap)
   - 1051px-1200px: Standard Desktop
   - 1201px-1400px: Vergrößerte Navigation
   - 1401px+: Maximale Navigation-Buttons
   =================================================================== */

/* ===================================================================
   BROWSER-SPECIFIC FIXES
   =================================================================== */

/* Safari Mobile Fixes */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
    height: -webkit-fill-available;
  }
  
  .viewport-container {
    min-height: -webkit-fill-available;
  }
  
  .nav-item {
    -webkit-font-smoothing: antialiased;
  }
}

/* Android Chrome Viewport Fix */
@media screen and (max-width: 950px) {
  body {
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  .nav-item,
  .btn-small {
    border-width: 3px;
  }
  
  .dropdown-content {
    border-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */
.w-full {
  width: 100% !important;
  max-width: 100% !important;
}

.no-overflow {
  overflow: hidden !important;
}

.text-responsive {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===================================================================
   LEGACY COMPATIBILITY - Für bestehende Klassen
   =================================================================== */
.horizontal-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* Print Styles */
@media print {
  .header,
  .footer,
  .info-bar {
    display: none;
  }
  
  .content-window {
    padding: 0;
    min-height: auto;
    max-width: none;
  }
  
  .viewport-container {
    max-width: none;
  }
}


/* ===================================================================
   🚨 PRÄZISE 400PX BREAKPOINT - USER-KONFIGURIERBARE MINIMALHÖHE
   Nur bei exakt 400px Viewport-Breite, nicht für alle schmalen Bereiche
   =================================================================== */

/* 🎯 FINALE OPTIMIERUNG: Kontinuierliche Skalierung ohne Sprünge */
/* ENTFERNT: 395px-405px Media Query für sprung-freie Skalierung */
/* USER-Variable bleibt verfügbar für manuelle Anpassungen bei Bedarf */

/* OPTIONAL: Exakter 400px Breakpoint (nur bei Bedarf aktivieren) */
/*
@media (width: 400px) {
  .header {
    min-height: var(--header-min-height-at-400px) !important;
    height: max(var(--header-height-fluid), var(--header-min-height-at-400px)) !important;
  }
}
*/

/* ✅ EXTREME LOGO-SKALIERUNG für sehr kleine Viewports (unter 400px) */
@media (max-width: 394px) {
  header .header-case .logo-container img,
  .header .logo-container img,
  .logo-container img,
  img.logo,
  img[src*="logo"] {
    /* EXTREME SKALIERUNG für sehr kleine Viewports */
    width: clamp(35px, 20vw + 2vh, 100px) !important;
    height: clamp(35px, 20vw + 2vh, 100px) !important;
    min-width: 35px !important;
    max-width: 100px !important;
  }
}

/* ===================================================================
   🚨 ZUSÄTZLICHE LOGO-SKALIERUNGS-SICHERHEIT - VERSCHIEDENE BREAKPOINTS
   =================================================================== */
@media (max-width: 480px) {
  header .header-case .logo-container img,
  .header .logo-container img,
  .logo-container img {
    /* VERSTÄRKTE SKALIERUNG für kleine Mobile Devices */
    width: clamp(42px, 16vw + 3vh, 110px) !important;
    height: clamp(42px, 16vw + 3vh, 80px) !important;
  }
}

/* ===================================================================
   🚨 KONTINUIERLICHE LOGO-SKALIERUNG - KEIN 800PX SPRUNG
   Einheitliche clamp() Formel für alle Bereiche ohne abrupte Übergänge
   =================================================================== */

/* KONTINUIERLICHE LOGO-SKALIERUNG: 481px bis Desktop */
@media (min-width: 481px) {
  header .header-case .logo-container img,
  .header .logo-container img,
  .logo-container img {
    /* 🚨 KONTINUIERLICHE SKALIERUNG: Kein Sprung bei 800px */
    width: clamp(50px, 10vw + 1.5vh, 120px) !important;
    height: clamp(50px, 10vw + 1.5vh, 120px) !important;
    
    /* NAHTLOSE ÜBERGÄNGE für alle Viewport-Größen */
    transition: width 0.3s ease, height 0.3s ease;
  }
}