:root{
	--hk-blue: #18396C;
	--hk-lightyellow: #FFF580;
	--hk-white: #FFFFFF;
	--hk-divider: rgba(255, 255, 255, 0.35);

	/* Dateiname bei Bedarf anpassen */

	--hk-panel-width: min(100vw, 46.875rem);
	--hk-panel-padding-x: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
	--hk-panel-padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
	--hk-panel-padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);

	--hk-close-size: clamp(2.75rem, 2.3rem + 1.5vw, 3.5rem);
	--hk-close-icon-size: clamp(1.75rem, 1.45rem + 1vw, 2.5rem);

	--hk-logo-width: clamp(12rem, 9rem + 10vw, 16rem);

	--hk-section-title-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	--hk-link-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);

	--hk-section-gap: clamp(1.75rem, 1.4rem + 1vw, 2.4rem);
	--hk-link-gap: clamp(1rem, 0.85rem + 0.5vw, 1.3rem);

	--hk-transition: 240ms ease;
	--hk-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.22);
}

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


/* =========================================================
   Fokus
========================================================= */

.hk-menu-toggle:focus-visible,
.hk-flyout__close:focus-visible,
.hk-flyout a:focus-visible{
	outline: 0.1875rem solid rgba(255, 245, 128, 0.7);
	outline-offset: 0.1875rem;
}

.hk-flyout__close img{
	width: var(--hk-close-icon-size);
	height: var(--hk-close-icon-size);
	display: block;
}

/* =========================================================
   Flyout-Grundstruktur
========================================================= */

.hk-flyout{
	position: fixed;
	inset: 0;
	z-index: 5000;
	pointer-events: none;
}

.hk-flyout[hidden]{
	display: block;
}

.hk-flyout.is-open{
	pointer-events: auto;
}

.hk-flyout__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.18);
	opacity: 0;
	transition: opacity var(--hk-transition);
}

.hk-flyout.is-open .hk-flyout__backdrop{
	opacity: 1;
}

.hk-flyout__panel{
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: var(--hk-panel-width);
	max-width: 100%;
	background: var(--hk-blue);
	color: var(--hk-white);
	box-shadow: var(--hk-shadow);
	transform: translateX(100%);
	transition: transform var(--hk-transition);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.hk-flyout.is-open .hk-flyout__panel{
	transform: translateX(0);
}

/* =========================================================
   Panel-Inhalt
========================================================= */

.hk-flyout__inner{
	padding:
		var(--hk-panel-padding-top)
		var(--hk-panel-padding-x)
		var(--hk-panel-padding-bottom);
}

.hk-flyout__topbar{
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	margin-bottom: 0.75rem;
}

/* =========================================================
   Close-Button mit SVG
========================================================= */

.hk-flyout__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hk-close-size);
	height: var(--hk-close-size);
	padding: 0;
	margin: 0;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0.5rem;
	cursor: pointer;
	flex: 0 0 auto;

	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.hk-flyout__close:hover,
.hk-flyout__close:active,
.hk-flyout__close:focus,
.hk-flyout__close:focus-visible {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.hk-flyout__close-icon{
	display: none !important;
}

.hk-flyout__close::before{
	content: "";
	display: block;
	width: var(--hk-close-icon-size);
	height: var(--hk-close-icon-size);

}

/* =========================================================
   Marke / Logo
========================================================= */

.hk-flyout__brand{
	text-align: center;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.hk-flyout__logo{
	display: block;
	width: min(100%, var(--hk-logo-width));
	height: auto;
	margin: 0 auto;
}

/* =========================================================
   Menü
========================================================= */

.hk-flyout__menu{
	display: flex;
	flex-direction: column;
	gap: var(--hk-section-gap);
}

.hk-flyout__section{
	padding-bottom: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
	border-bottom: 0.1875rem solid var(--hk-divider);
}

.hk-flyout__section:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.hk-flyout__section-title{
	margin: 0 0 clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
	font-family: "source_sans_prosemibold", Arial, sans-serif !important;
	font-size: var(--hk-section-title-size);
	font-weight: normal !important;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hk-lightyellow);
}

.hk-flyout__section-title a,
.hk-flyout__section-title a:link,
.hk-flyout__section-title a:visited,
.hk-flyout__section-title a:hover,
.hk-flyout__section-title a:focus,
.hk-flyout__section-title a:active {
	color: #fff580 !important;
	text-decoration: none;
}

.hk-flyout__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hk-link-gap);
}

.hk-flyout__list a{
	display: inline-block;
	font-family: "source_sans_prosemibold", Arial, sans-serif !important;
	font-size: var(--hk-link-size);
	font-weight: normal !important;
	line-height: 1.25;
	text-decoration: none;
	color: var(--hk-white);
}

.hk-flyout__list a:hover{
	text-decoration: none;
  	 color:#FFF580!important;
	 opacity: 1.0;
}

/* =========================================================
   Visually hidden
========================================================= */

.visually-hidden{
	position: absolute !important;
	width: 0.0625rem !important;
	height: 0.0625rem !important;
	padding: 0 !important;
	margin: -0.0625rem !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================================================
   Kleine Feinkorrekturen
========================================================= */

@media (max-width: 30rem){
	.hk-flyout__inner{
		padding-inline: 1.25rem;
	}
}