/* =========================================================
   HAUS KARIN / PORTO HEADER OVERRIDE
   Header normal: 120px
   Header shrink: 80px
========================================================= */

:root{
	--hk-blau: #18396C;
	--hk-header-height: 7.5rem;          /* 120px */
	--hk-header-height-shrink: 5rem;     /* 80px */
	--hk-header-bg: rgba(255, 255, 255, 1.0);
	--hk-header-blur: 9px;
	--hk-header-shadow: 0 0.5rem 1.75rem rgba(17, 17, 17, 0.12);
	--hk-header-shadow-shrink: 0 0.375rem 1.25rem rgba(17, 17, 17, 0.14);
	--hk-header-transition: 220ms ease;
}

/* =========================================================
   Header-Navigation: Höhenlogik
========================================================= */

@media (min-width: 992px){

	/* Normalzustand */
	#header .header-nav.header-nav-links .header-nav-main,
	#header .header-nav.header-nav-line .header-nav-main{
		min-height: 5rem !important; /* 80px */
	}

	/* Geschrumpfter Zustand */
	#header.header-effect-shrink.header-shrink .header-nav.header-nav-links .header-nav-main,
	#header.header-effect-shrink.header-shrink .header-nav.header-nav-line .header-nav-main,
	#header.header-effect-shrink.hk-header-is-shrunk .header-nav.header-nav-links .header-nav-main,
	#header.header-effect-shrink.hk-header-is-shrunk .header-nav.header-nav-line .header-nav-main{
		min-height: 0 !important;
	}
}

@media (min-width: 992px) {
  #header .header-nav-main nav > ul > li > a {
    font-family: "source_sans_prosemibold", Arial, sans-serif !important;
    font-weight: normal !important;
    font-size: 0.95rem;
    font-style: normal;
	display: inline-flex;
    align-items: center;
    white-space: normal;
    border-radius: var(--border-radius);
    color: var(--grey-500);
    padding: 0.5rem 1rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    text-decoration: none;
  }
}

/* -------------------------------------------------------------------------------------------------- */
/* Schatten für Sticky-Header */
/* Chrome-Fix: Shadow wird oft durch overflow hidden/clip abgeschnitten */

#header,
#header .header-body,
#header .header-container,
#header .header-row,
#header .header-column{
	overflow: visible !important;
}

/* Schatten unten – am stabilsten auf .header-body */
#header .header-body{
	box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.21) !important;
	position: relative;
	z-index: 1040;
}

/* =========================================================
   Grundheader
========================================================= */

#header.header-effect-shrink{
	min-height: var(--hk-header-height);
	background: transparent !important;
	transition:
		min-height var(--hk-header-transition),
		background-color var(--hk-header-transition),
		box-shadow var(--hk-header-transition),
		padding var(--hk-header-transition);
}

/* WICHTIG:
   .header-body trägt die eigentliche weiße Glasfläche.
   .header-container / .header-row / .header-column bleiben transparent.
*/
#header.header-effect-shrink .header-body{
	min-height: var(--hk-header-height);
	background: var(--hk-header-bg) !important;
	backdrop-filter: blur(var(--hk-header-blur));
	-webkit-backdrop-filter: blur(var(--hk-header-blur));
	transition: min-height var(--hk-header-transition);
}

#header.header-effect-shrink .header-container,
#header.header-effect-shrink .header-row,
#header.header-effect-shrink .header-column{
	min-height: var(--hk-header-height);
	background: transparent !important;
	transition: min-height var(--hk-header-transition);
}

/* =========================================================
   Geschrumpfter Zustand
   Funktioniert mit Porto (.header-shrink)
   und alternativ mit manueller Klasse (.hk-header-is-shrunk)
========================================================= */

#header.header-effect-shrink.header-shrink,
#header.header-effect-shrink.hk-header-is-shrunk{
	min-height: var(--hk-header-height-shrink);
}

#header.header-effect-shrink.header-shrink .header-body,
#header.header-effect-shrink.hk-header-is-shrunk .header-body{
	min-height: var(--hk-header-height-shrink);
	box-shadow: var(--hk-header-shadow-shrink);
}

#header.header-effect-shrink.header-shrink .header-container,
#header.header-effect-shrink.header-shrink .header-row,
#header.header-effect-shrink.header-shrink .header-column,
#header.header-effect-shrink.hk-header-is-shrunk .header-container,
#header.header-effect-shrink.hk-header-is-shrunk .header-row,
#header.header-effect-shrink.hk-header-is-shrunk .header-column{
	min-height: var(--hk-header-height-shrink);
}

/* =========================================================
   Logo-Bereich sauber zentrieren
========================================================= */

#header.header-effect-shrink .header-logo{
	display: flex;
	align-items: center;
	height: 100%;
}

#header.header-effect-shrink .header-logo img{
	display: block;
	max-height: calc(var(--hk-header-height) - 1.5rem);
	width: auto;
	height: auto;
	transition: max-height var(--hk-header-transition);
}

#header.header-effect-shrink.header-shrink .header-logo img,
#header.header-effect-shrink.hk-header-is-shrunk .header-logo img{
	max-height: calc(var(--hk-header-height-shrink) - 1rem);
}

/* =========================================================
   Navigation vertikal sauber mittig halten
========================================================= */

#header.header-effect-shrink .header-nav,
#header.header-effect-shrink .header-nav-main,
#header.header-effect-shrink .header-nav-main nav{
	min-height: 0;
}

#header.header-effect-shrink .header-nav-main nav > ul{
	min-height: inherit;
	display: flex;
	align-items: center;
}

/* =========================================================
   Hauptnavigation
========================================================= */

#header.header-effect-shrink .header-nav-main nav > ul > li > a,
#header.header-effect-shrink .header-nav-main nav > ul > li > span,
#header.header-effect-shrink .header-nav-features a,
#header.header-effect-shrink .header-nav-features button,
#header.header-effect-shrink .header-btn-collapse-nav{
	font-family: "source_sans_prosemibold", Arial, sans-serif !important;
	font-weight: normal !important;
	color: var(--hk-blau) !important;
	letter-spacing: 0.02rem;
}

/* Hover / Active */
#header.header-effect-shrink .header-nav-main nav > ul > li:hover > a,
#header.header-effect-shrink .header-nav-main nav > ul > li.open > a,
#header.header-effect-shrink .header-nav-main nav > ul > li.active > a,
#header.header-effect-shrink .header-nav-main nav > ul > li > a:focus,
#header.header-effect-shrink .header-nav-main nav > ul > li > a:active{
	color: var(--hk-blau) !important;
}

/* =========================================================
   Untermenüs / Dropdowns
========================================================= */

#header.header-effect-shrink .dropdown-menu,
#header.header-effect-shrink .header-nav-main nav > ul li.dropdown .dropdown-menu{
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 0;
	box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.10);
	border-radius: 1rem;
}

#header.header-effect-shrink .dropdown-menu > li > a,
#header.header-effect-shrink .dropdown-menu > li > button,
#header.header-effect-shrink .header-nav-main nav > ul li.dropdown .dropdown-menu li a{
	font-family: "source_sans_prosemibold", Arial, sans-serif !important;
	font-weight: normal !important;
	color: var(--hk-blau) !important;
	letter-spacing: 0.01rem;
}

/* Untermenü-Hover */
#header.header-effect-shrink .dropdown-menu > li > a:hover,
#header.header-effect-shrink .dropdown-menu > li > a:focus,
#header.header-effect-shrink .header-nav-main nav > ul li.dropdown .dropdown-menu li a:hover,
#header.header-effect-shrink .header-nav-main nav > ul li.dropdown .dropdown-menu li a:focus{
	color: var(--hk-blau) !important;
	background: rgba(24, 57, 108, 0.16);
}

/* =========================================================
   Zusätzliche Header-Texte
========================================================= */

#header.header-effect-shrink .header-top,
#header.header-effect-shrink .header-top a,
#header.header-effect-shrink .header-contact,
#header.header-effect-shrink .header-contact a,
#header.header-effect-shrink .header-extra-info,
#header.header-effect-shrink .header-extra-info a,
#header.header-effect-shrink .header-nav-features,
#header.header-effect-shrink .header-nav-features a,
#header.header-effect-shrink .header-nav-features span{
	font-family: "source_sans_prosemibold", Arial, sans-serif !important;
	font-weight: normal !important;
	color: var(--hk-blau) !important;
}

/* =========================================================
   Mobile-Menü
========================================================= */

#header.header-effect-shrink .header-btn-collapse-nav{
	border-color: rgba(24, 57, 108, 0.18);
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0.25rem 0.75rem rgba(17, 17, 17, 0.08);
}

#header.header-effect-shrink .header-nav-main.header-nav-main-mobile-dark nav{
	background: rgba(255, 255, 255, 0.94) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 1rem;
	box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.10);
}

#header.header-effect-shrink .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a,
#header.header-effect-shrink .header-nav-main.header-nav-main-mobile-dark nav > ul > li > span,
#header.header-effect-shrink .header-nav-main.header-nav-main-mobile-dark nav .dropdown-menu li > a{
	color: var(--hk-blau) !important;
}

#header.header-effect-shrink .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a{
	font-family: "source_sans_prosemibold", Arial, sans-serif !important;
}

#header.header-effect-shrink .header-nav-main.header-nav-main-mobile-dark nav .dropdown-menu li > a{
	font-family: "source_sans_proregular", Arial, sans-serif !important;
}

/* =========================================================
   Feinschliff für kleine Ansichten
========================================================= */

@media (max-width: 61.9375rem){
	:root{
		--hk-header-height: 6.25rem;         /* 100px */
		--hk-header-height-shrink: 5rem;     /* 80px */
	}
}

/* =========================================================
   Desktop-Dropdown-Details
========================================================= */

@media (min-width: 62rem){
	#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a{
		border-bottom: 1px solid var(--grey-100);
		color: var(--hk-blau) !important;
		font-family: "source_sans_proregular", Arial, sans-serif !important;
		font-size: 0.95rem;
		font-weight: normal;
		padding: 0.375rem 1.125rem;
		position: relative;
		text-transform: none;
		text-decoration: none;
		letter-spacing: -0.03125rem;
	}
}

/* Button bei Hamburger-Menü komplett neutralisieren */
.hk-nav-toggle{
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
}

/* Hover ohne Blase */
.hk-nav-toggle:hover{
	background: transparent !important;
	box-shadow: none !important;
}

/* Fokus sichtbar aber elegant */
.hk-nav-toggle:focus-visible{
	outline: 0.125rem solid rgba(24, 57, 108, 0.35);
	outline-offset: 0.1875rem;
	border-radius: 0.375rem;
}

/* SVG sauber skalieren */
.hk-nav__icon{
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

/* Leichte visuelle Vertikalkorrektur der Desktop-Navigation */
@media (min-width: 992px){

	#header .header-nav.header-nav-line{
		position: relative;
		top: 0.1rem;
	}

	#header.header-shrink .header-nav.header-nav-line,
	#header.hk-header-is-shrunk .header-nav.header-nav-line{
		top: 0rem;
	}
}

/* Desktop-Dropdowns: sanftes Einblenden mit Scale */
@media (min-width: 992px){

	#header .header-nav-main nav > ul li.dropdown .dropdown-menu{
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(1rem) translateY(0.5rem) scale(0.96);
		transform-origin: top left;
		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 180ms ease;
		border-radius: 1rem;
		box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.10);
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 0;
		padding: 0.5rem 0;
	}

	#header .header-nav-main nav > ul li.dropdown:hover > .dropdown-menu,
	#header .header-nav-main nav > ul li.dropdown:focus-within > .dropdown-menu,
	#header .header-nav-main nav > ul li.dropdown.open > .dropdown-menu{
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(1rem) translateY(0) scale(1);
	}
}