/* ==========================================================================
   1. DER CI-FARBVERLAUF (Zwingend auf dem obersten Element)
   ========================================================================= */
body #header,
#wrapper #header,
header#header,
div#header,
#header {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4) !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  padding: 15px 0 0 0 !important; 
  background-color: #008FCF !important; 
  background-image: linear-gradient(90deg, #66B2E2 0%, #008FCF 50%, #005A9C 100%) !important; 
  min-height: 150px !important;
}

/* RADIKALE TRANSPARENZ INNEN (Gegen blockiertes Weiss der custom.css) */
.header-title,
.header-title *,
#header .inside,
#header .inside * {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   2. DAS ZWEITEILIGE RASTER
   ========================================================================= */
#header .inside.container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 30px 15px 30px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important; /* Spalte 1: Logo | Spalte 2: Titel */
  align-items: end !important; 
  gap: 20px !important;
  position: relative !important; /* WICHTIG: Erlaubt die absolute Positionierung rechts */
  min-height: 135px !important;  
}

/* Deaktiviert störende Block-Hüllen von Contao im Raster */
#header .inside.container > div:has(.logo) {
  display: contents !important;
}

/* ==========================================================================
   3. UNVERRÜCKBARE POSITIONIERUNG LINKS UND MITTE
   ========================================================================= */

/* Spalte 1 (Ganz links): Das Logo */
#header .logo {
  grid-column: 1 !important;
  display: block !important;
}

#header .logo img {
  height: 110px !important;
  width: auto !important;
  display: block !important;
  margin-bottom: 2px !important; 
}

/* Spalte 2 (Mitte): Der zentrierte Vereinstext */
#header .header-title {
  grid-column: 2 !important;
  text-align: center !important;
  padding: 0 160px 0 10px !important; /* Schafft rechts Platz für die absolute Box */
  margin: 0 !important;
}

.header-title .header-text {
  font-family: "ErasITCbyBT-Ultra", sans-serif !important; 
  font-style: italic !important;
  /* KORREKTUR: Feste Desktop-Größe statt calc(), damit Media-Queries greifen können */
  font-size: 2.1rem !important; 
  font-weight: 900 !important;
  color: #ffffff !important; 
  letter-spacing: -0.5px !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* ==========================================================================
   4. DIE RECHTE SPALTE (Sprachwechsler & Textlinks)
   ========================================================================= */

/* Klebt die vier Textlinks fest am UNTEREN Rand der Kopfzeile */
#header .top-nav {
  position: absolute !important;
  bottom: 15px !important; 
  right: 30px !important;
  z-index: 110 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;         
  text-align: right !important;
  white-space: nowrap !important;
}

/* Setzt die Sprachauswahl-Box millimetergenau direkt ÜBER die vier Links */
#header .mod_changelanguage,
#header [class*="mod_changelanguage"] {
  position: absolute !important;
  bottom: 112px !important; 
  right: 30px !important;
  z-index: 110 !important;
}

/* Horizontale Ausrichtung für die Flaggen-Zeile */
.mod_changelanguage ul {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: 12px !important; 
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mod_changelanguage li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Formatierung der inneren Sprach-Elemente */
body #header .mod_changelanguage a,
body #header .mod_changelanguage span,
body #header .mod_changelanguage strong {
  display: inline-block !important;
  width: 24px !important;      
  height: 16px !important;     
  font-size: 0px !important;
  line-height: 0 !important;
  color: transparent !important; 
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; 
  opacity: 0.9 !important;
  transition: opacity 0.2s ease !important;
}

body #header .mod_changelanguage a:hover {
  opacity: 1.0 !important;
}

/* absolute SVG-Pfade für die Flaggen */
body #header .mod_changelanguage .lang-de a,
body #header .mod_changelanguage .lang-de span,
body #header .mod_changelanguage .lang-de strong {
  background-image: url("/files/digenio-theme/theme/img/icons/de.svg") !important;
}

body #header .mod_changelanguage .lang-en a,
body #header .mod_changelanguage .lang-en span,
body #header .mod_changelanguage .lang-en strong {
  background-image: url("/files/digenio-theme/theme/img/icons/en.svg") !important;
}

/* Schaltet die aktive Sprachwahl teiltransparent (0.4) */
body #header .mod_changelanguage .active strong,
body #header .mod_changelanguage .active span,
body #header .mod_changelanguage strong.active {
  filter: opacity(0.35) saturate(0.5) !important;
  opacity: 0.4 !important;
  cursor: default !important;
}

/* Die vier weiß-leuchtenden Textlinks */
#header .top-nav a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
  transition: color 0.2s ease !important;
  line-height: 1.15 !important;
}

#header .top-nav a:hover {
  color: #66B2E2 !important;
}

/* ==========================================================================
   5. ERWEITERUNG FÜR UNTERSEITEN (Integrierte blaue Menüzeile)
   ========================================================================= */
#header .header-menu-row {
  grid-column: 1 / -1 !important; 
  width: 100% !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important; 
  padding: 10px 0 !important;
}

.menu-bar {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
}

.menu-bar a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease !important;
}

.menu-bar a:hover,
.menu-bar a.active {
  background-color: #008FCF !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   6. RESPONSIVE ANPASSUNGEN (Streng auf den Header beschränkt)
   ========================================================================= */

/* Zwischenstufe für Tablets (Zwischen 1050px und 651px Fensterbreite) */
@media (max-width: 1050px) and (min-width: 651px) {
    .header-title .header-text { 
        font-size: 1.4rem !important; /* Zwingt die Schrift auf Tablets eine Stufe kleiner */
        line-height: 1.25 !important;
    }
}

/* Smartphone-Modus (Schmaler als 650 Pixel) */
@media (max-width: 650px) {
    body #header, #header { min-height: 125px !important; }
    #header .inside.container { gap: 10px !important; padding: 0 15px 15px 15px !important; min-height: 110px !important; }
    
    #header .logo img { height: 65px !important; margin-bottom: 2px !important; } 
    #header .header-title { padding: 0 110px 0 0 !important; } 
    
    .header-title .header-text { 
        font-family: "Open Sans", sans-serif !important;
        font-style: italic !important;
        font-weight: bold !important;
        font-size: 1.0rem !important; /* Fixiert auf deine bewährten 4 Zeilen */
        line-height: 1.25 !important;
        letter-spacing: 0px !important;
    }
    
    #header .top-nav { bottom: 15px !important; right: 15px !important; position: absolute !important; }
    #header .mod_changelanguage, #header [class*="mod_changelanguage"] { bottom: 85px !important; right: 15px !important; position: absolute !important; }
    
    body #header .mod_changelanguage a, 
    body #header .mod_changelanguage span,
    body #header .mod_changelanguage strong { width: 18px !important; height: 12px !important; }
    
    #header .top-nav a { font-size: 0.85rem !important; } 
    .menu-bar { padding: 0 15px !important; gap: 8px !important; }
    .menu-bar a { font-size: 0.95rem !important; padding: 4px 10px !important; } 
}