/* ü€Úτƒ-8 */
@charset "UTF-8";

/* ================ */
/* TOP HEADER       */
/* ================ */
#header {
    display: flex; /* Aktiviert den Flex-Container */
    flex-wrap: wrap;
    align-items: center; /* Zentriert alle Elemente VERTICAL in der Reihe */
    padding-top: 1rem;
    max-width: 100rem;
    margin: 0 auto;
}

#sidemenu_open_button { order: 1; }
#toplogo                { order: 2; }
#menubar                { order: 3; flex: 1; text-align: center; } /* Nimmt den Platz in der Mitte ein */
#header_buttons         { order: 4; display: flex; gap: 1rem; }
#header_langselect      { order: 5; }

#toplogo,
#menubar {
	
}

#toplogo {
	padding:0;
	margin:0;
 	display: inline-flex;
  transform: translateY(3px);
}
#toplogo a span {
}

#header_langselect {
	height: 2.2rem;
	padding-right:5px;
}

select.langselector {
	font-size:1.1rem;
	margin:0;
}




/* BUTTONS: search,download,account,language   */

#header_buttons {
	padding-right: 25px;
}

#header_buttons a.topicon {
	height: 2rem;
}

#header_langselect a.buttonlang  {
		display: inline-block;
		width: 2.4rem;
		color: #000;
		background-color: white;
		border: 1px solid #000;
    border-radius: 4px;
		font-size: 1rem;
    text-decoration: none;
		text-transform: uppercase;
    text-align: center;
		padding: 0.3rem 0.3rem 0.3rem 0.3rem;
		margin:0;
}

#header_langselect a.buttonlang:visited,
#header_langselect a.buttonlang:link,
#header_langselect a.buttonlang:active,
#header_langselect a.buttonlang:focus {
    text-decoration: none;
    color: #000;
    background-color: white;
}

#header_langselect a.buttonlang:hover {
	text-decoration: none;
	color: white;
	background-color: #016ca3;
	border-color: #016ca3;	
}

#header_langselect a.activated,
#header_langselect a.activated:visited,
#header_langselect a.activated:link,
#header_langselect a.activated:active,
#header_langselect a.activated:focus {
	color: white;
	background-color: #017EBE;
	border-color: #017EBE;
	cursor: default;
}

#header_langselect a.disab,
#header_langselect a.disab:visited,
#header_langselect a.disab:link,
#header_langselect a.disab:active,
#header_langselect a.disab:focus {
	color: #bbb;
	background-color: white;
	border-color:  #bbb;
	cursor: default;
}



/* ================ */
/* TOP MENUBAR      */
/* ================ */

#menubar {
    z-index: 100;
    order: 3;
    flex: 1;              /* Nimmt den gesamten verfügbaren Platz in der Mitte ein */
    display: flex;        /* Macht den Menubar selbst zum Flex-Container */
    justify-content: center; /* Zentriert die UL horizontal */
    xborder: 1px solid black;
}

#menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* Alle LIs nebeneinander */
    align-items: stretch;   /* Alle LIs werden automatisch gleich hoch */
    gap: 1.5rem;
    xborder: 1px solid black;
}

#menubar > ul > li {
    position: relative;
    display: block;          /* Auch das LI wird zum Flex-Container */
    margin: 0;
    padding: 0;
    xborder: 1px solid green;
}

#menubar ul, #menubar li {
    list-style: none !important;
    padding-left: 0 !important; /* Entfernt den 15-40px Standard-Einzug */
    margin-left: 0 !important;
}

#menubar a {
    display: flex;          /* Macht den Link selbst flexibel */
    align-items: center;    /* Zentriert Text oder Icon vertikal im Link */
    height: 3rem;           /* Definierte Höhe für alle */
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    xborder: 1px solid blue;
}

#menubar > ul > li > a span {
	display: inline-block;
  xfont-family: Lexend;
  xfont-weight: 300;
  xfont-size: 1.8rem;
 	
 	xletter-spacing: 1px;
	xtext-transform: uppercase;
}

/* Spezielle Anpassung für das Home-Icon */
#menubar a.icon-home {
    width: 1.4rem;            /* Feste Breite für das quadratische Icon */
    padding: 0;             /* Kein Text-Padding beim Icon */
    justify-content: center;/* Icon exakt in die Mitte setzen */
    background-image: var(--svg-home);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.4rem;
    xborder: 1px solid blue;
}

#menubar ul ul {
    z-index: 999;
}

#menubar ul ul a span {
    margin-top: 0;
  xfont-family: DINPro;
  xfont-size: 1.8rem;
  xletter-spacing: 1px;
}

#menubar > ul > li.active a,
#menubar > ul > li:hover > a {
    color: black;
}


/* sub menu */

#menubar .has-sub ul {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    min-width: 100%; /* Das Submenü ist mindestens so breit wie der Hauptpunkt */
    z-index: 999;
  
    /* Transition-Logik statt display:none */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;

    /* Wichtig: Kein display: none mehr! */
    display: block;
}

/* 2. Nur bei Geräten mit einer Maus (hover-fähig) das Menü bei Hover einblenden */
@media (pointer: fine) {
    #menubar .has-sub:hover > ul {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}

/* 3. Für Touch-Geräte oder wenn das Menü explizit als 'open' markiert ist */
#menubar .has-sub.is-open > ul {
    opacity: 1;
    visibility: visible;
    display: block;
}


#menubar .has-sub ul li {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    background: white;
    padding:0;
    margin:0;
    xborder: 1px solid blue;
}

#menubar .has-sub ul li:first-child {
    border-top: 1px solid #e1e1e1;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    xborder: 1px solid blue;
}

#menubar .has-sub ul li:last-child {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#menubar .has-sub ul li a {
		line-height: 3rem;
    padding:0;
    margin:0;
    padding-left: 1rem;
    padding-right: 1rem;
    background: white;
    color: black;
    xborder: 1px solid green;
}
#menubar .has-sub ul li:first-child a {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

#menubar .has-sub ul li:last-child a {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#menubar .has-sub ul li:hover a {
    color: #6f6f6f;
}

#menubar .has-sub ul li:last-child:hover a {

}

#menubar .has-sub ul li:first-child:hover a {

}


/* ================ */
/* TOP IMAGE        */
/* ================ */

#header-image-container {
	position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 1rem auto 0 auto;
  
  max-height: 25rem;
	aspect-ratio: 4 / 1;   /* Hält das 1000x250 Verhältnis immer bei */

  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
    
  overflow: hidden;
  border-radius: 6px; 
  border-bottom-left-radius: 6px; 
  border-bottom-right-radius: 6px; 
  box-shadow: 0 0 3px #dcdcdc;  
  transition: max-height 0.4s ease-in-out;
}

#header-image-container.is-hidden {
  max-height: 3rem;
}

#header-image-toggle {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: block;
    text-decoration: none;
		width: 1.6rem;
    height: 1.6rem;
    background-image: var(--svg-header-minus);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4rem;
    transition: transform 0.1s ease;
}

/* Hover-Effekt (optional): Das Icon wird beim Drüberfahren etwas größer */
#header-image-toggle:hover {
    transform: scale(0.9);
}

/* Wenn der Container versteckt ist, ändere das Icon des Buttons */
#header-image-container.is-hidden #header-image-toggle {
	background-image: var(--svg-header-plus);
}

#header-image-toggle:visited,
#header-image-toggle:link,
#header-image-toggle:hover,
#header-image-toggle:active,
#header-image-toggle:focus {
    text-decoration: none;
}