@import url(fonts/font.css);

:root{
	font-size: 100px;

	font-family: 'text', Arial, "Microsoft Yahei", 微软雅黑, STXihei, 华文细黑, sans-serif;
	scroll-behavior: smooth;

	--c-gradBright: #dae4f1;
	--c-gradDarkInner: #5d93cc;
	--c-gradDarkOuter: #194d91;
	--c-white: #fff;

	--c-base: #252276;
	--c-accent: #00B2EB;
	--c-action: #E74544;
	--c-gray: #C4C4C4;

	--bright-gradient: linear-gradient(90deg, var(--c-gradBright),var(--c-white),var(--c-gradBright));
	--dark-gradient: radial-gradient(var(--c-gradDarkInner),var(--c-gradDarkOuter));

}

*{
	scroll-margin-top: 1.25rem;
}

body{
	background: var(--bright-gradient);
	background-size: 100% 100%;
	color: var(--c-base);
	font-size: .16rem;
	margin: 1rem 0 0 0;
}

a{
	color: inherit;
}

header{
	position: fixed;
	inset: var(--wp-admin--admin-bar--height,0px) 0 auto 0;
	height: 1rem;
	background: var(--c-white);
	display: flex;
	justify-content: center;
	z-index: 100;
}
header > a{
	display: block;
	background: url(img/knoppers.png) left top no-repeat;
	background-size:contain;
	width: 3.7rem;
	max-width: calc(100% - 1rem);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

header ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	line-height: 1rem;
	font-weight: 600;
	font-size: .18rem;
}
header ul a{
	display: block;
	color: var(--c-accent);
	text-decoration: none;
	padding: 0 .1rem;
}
header ul :hover>a,
header [class*="sprachmenue"] ul [class*="current"] a{
	color: var(--c-base);
}

header > :last-child{
	
	box-sizing: border-box;
	padding: 0 .25rem 0 0;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
header > :last-child>ul{
	justify-content: flex-end;
}
header > :last-child li:not(:first-child):before{
	content: '|';
	color: var(--c-accent);
}
header > :last-child li{
	display: flex;
}


.content{
	max-width: 13rem;
	margin: auto;
}

.mood,
.n2-section-smartslider:not(.no-background){
	background: var(--dark-gradient);
}
.newsletter{
	padding: .6rem .2rem;
	color: var(--c-white);
	background: var(--c-gradDarkOuter);
}

hr{
	border: none !important;
	display: block;
	width: 100%;
	height: 1rem;
	margin: 0;
	background: url(img/hr.png) center no-repeat;
	background-size: contain;
}

section+hr,
.wp-block-nextend-smartslider3+hr{
	aspect-ratio: 3841/347;
	background-image: url(img/milch_welle.png);
	background-repeat: repeat-x;
	height: auto;
	position: relative;
	margin-top: -4.7vw;
}

.content :last-child{
	margin-bottom: 0;
}

body>ul,body>ol,h1,h2,h3,h4,h5,h6,p{
	max-width: 9rem;
	margin: 0 auto .2rem;
	box-sizing: border-box;
	padding: 0 .25rem;
}
body>ul,body>ol{
	padding-left: .5rem;
}

h1{
	font-size: .43rem;
	font-family: 'display';
	text-align: center;
	font-weight: 400;
}
h1>em{
	font-style: normal;
	color: var(--c-accent);
	font-size: .55em;
}
h2{
	font-size: .36rem;
	font-family: 'display';
	text-align: center;
	font-weight: 400;
}
h3{
	font-size: .21rem;
	font-weight: 400;
	margin: 0 auto;
}
h3>em{
	font-style: normal;
	font-weight: 600;
}

.junction{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	max-width: 4.6rem;
	width: 100%;
	margin: 0 auto;
}
.junction span>p{
	padding: 0 .3rem
}
.junction *{
	padding: 0;
}
.junction form>p,
.junction form>h3{
	text-align: center;
}
.junction form{
	padding-top: .2rem;
	grid-column-start: 1;
	grid-column-end: 3;
	overflow: hidden;
	transition: height ease .2s;
	height: 5.25rem;
	scroll-padding-top: 1.25rem;
}


[type="text"],[type="email"]{
	display: block;
	max-width: 3.2rem;
	width: calc(100% - .25rem);
	margin: 0 auto .15rem;
	height: .36rem;
	border: .01rem solid var(--c-gray);
	font-size: inherit;
	font-family: inherit;
	color: var(--c-base);
	outline: none;
	border-radius: .18rem;
	padding: .08rem .2rem;
	box-sizing: border-box;
	line-height: .2rem;
	background: var(--c-white);
}
[type="text"]:focus,[type="email"]:focus{
	border-color: var(--c-base);
}

input[name="code"]{
	text-transform: uppercase;
}
input::placeholder{
	text-transform: none;
	color: var(--c-gray);
	font-size: inherit;
	font-family: inherit;
}

[type="submit"],
.junction>span>strong{
	display: block;
	width: 1.8rem;
	text-align: center;
	background: var(--c-action);
	color: var(--c-white);
	font-family: 'display';
	font-weight: 400;
	font-size: .28rem;
	line-height: .36rem;
	height: .36rem;
	border: none;
	outline: none;
	border-radius: .18rem;
	margin: 0 auto .15rem;
}
.junction>span>strong{
	width: auto;
	margin: 0.1rem;
}

label:not(#js-cookie-toggle-label){
	display: block;
	max-width: 3.2rem;
	width: calc(100% - .25rem);
	margin: 0 auto .15rem;
	position: relative;
	padding: 0 0 0 .25rem !important;
	box-sizing: border-box;
}

label>input{
	all: unset;
	position: absolute;
	left: 0;
	top: 0;
	height: .19rem;
	width: .19rem;
	border-radius: 50%;
	border: .05rem solid var(--c-white);
	outline: .01rem solid var(--c-gray);
	background: var(--c-white);
	box-sizing: border-box;
}

label>input:focus{
	outline-color: var(--c-base);
}
label>input:checked{
	background: var(--c-base);
}
input:disabled{
	--c-base:var(--c-gray);
	--c-action:var(--c-gray);
}

.junction>span{
	text-align: center;
	cursor: pointer;
}
.junction>span+span{
	border-left: 1px solid #2B2577;
}
.junction>span:hover>strong,
.junction>span.active>strong{
	background: var(--c-base);
}


.junction.swiss>span:not(.active)+form{
	height: 0;
}

.n2-ss-slider p {
	position: relative;
	padding: 0 0 0 .35rem !important;
	font-size: inherit !important;
}
.n2-ss-slider p i{
	color: var(--c-white) !important;
	position: absolute;
	background: var(--c-accent);
	height: .27rem;
	width: .27rem;
	left: 0;
	top: 0;
	border-radius: 50%;
	display: block;
	font-style: normal;
	text-align: center;
	line-height: .27rem !important;
	box-sizing: border-box;
	padding-left: .02rem;
}

footer{
	text-align: center;
	color: var(--c-gray);
	background: var(--c-white);
	padding: .5rem .2rem;
}

footer p>img{
	height: .29rem;
}
footer a img{
	width: 1rem;
	height: .8rem;
	object-fit: contain;
	margin: 0 .15rem;
	filter: grayscale(1);
	opacity: 0.5;
	transition: filter ease .2s,opacity ease .2s;
}
footer :hover>img{
	filter: grayscale(0);
	opacity: 1;
}

.prefoot{
	background: #eef3f9;
	padding: .5rem .2rem;
	white-space: nowrap;
    font-weight: 600;
}
.prefoot *{
	list-style: none;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	line-height: .5rem;
	text-transform: uppercase;
	text-decoration: none;
	color: #4d7cbf;
	display: block;
	object-fit: contain;

}
.prefoot :hover{
	color: var(--c-base);
}

.prefoot img{
	max-width: 3rem;
	margin-bottom: .25rem !important;
}

.top{
	display: block;
	width: fit-content;
	margin: -.15rem auto .2rem;
	text-transform: uppercase;
	color: #4d7cbf;
	text-decoration: none;
	position: relative;
	z-index: 100;
}

.top::before{
	content: '^';
	height: .4rem;
	width: .4rem;
	border-radius: 50%;
	background: #4d7cbf;
	color: #fff;
	display: block;
	margin: 0 auto .1rem;
	line-height: .45rem;
	text-align: center;
	font-size: .25rem;
	font-weight: 300;
}


.handle{
	position: absolute;
	right: .4rem;
	top: .4rem;
	height: .4rem;
	width: .4rem;
	cursor: pointer;
	z-index: 1000;
	margin: 0;
	display: none;
}
.handle>hr{
	display: block;
	height: .03rem;
	margin: 0 0 .07rem 0;
	border-radius: .015rem;
	border: none;
	background: var(--c-base);
	transition: margin ease .25s,
				transform ease .25s,
				background ease .25s;
	transform: rotateZ(0);
}
/*.handle>hr:last-child{
	width: 50%;
}

.open .handle>hr{
	background: #fff !important;
}
*/
.open .handle>hr:nth-child(1){
	transform: rotateZ(45deg);
	margin-top: .1rem;
}
.open .handle>hr:nth-child(2){
	transform: rotateZ(-45deg);
	margin-top: -.1rem;
}
.open .handle>hr:nth-child(3){
	transform: rotateZ(45deg);
	margin-top: -.1rem;
}
.open .handle>hr:nth-child(4){
	transform: rotateZ(-45deg);
	background: rgba(255,255,255,0)
}

.junction.hungary span{
	display:none
}


@media screen and (max-width: 1330px) {
	header{
		display: block;
		padding: 0 1.3rem 0 3rem;
	}
}
@media screen and (max-width: 1260px) {
	:root{
		font-size: calc(100vw / 12.6);
	}
}
@media screen and (max-width: 700px) {
	:root{
		font-size: 100px;
	}
	header>nav{
		position: absolute;
		left: 0;
		right: 0;
		top: 1rem;
		height: 0;	
		background: var(--c-white);
		transition: height ease .2s;
		overflow: hidden;
	}
	[class*="menu-hauptmenue"] ul{
		display: flex;
		flex-direction: column;
		line-height: 2.8;
	}

	header>nav:last-child{
		top: 100vh;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0;
		height: 1rem;
		transition: top ease .2s;
	}
	header > :last-child>ul{
		margin: 0;
		padding: 0;
		justify-content: center;
	}
	header ul a{
		text-align: center;
	}
	
	.open header [class*="menu-hauptmenue"]{
		height: calc(100vh - 1rem);
	}
	.open header>nav:last-child{
		top: calc(100vh - 1rem - var(--wp-admin--admin-bar--height , 0px));
		top: 4rem;
	}
	.handle{
		display: block;
	}
}

@media screen and (max-width: 599px){
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column p{
		text-align: center!important;
	}
}

@media screen and (max-width: 500px){
	:root{
		font-size: 20vw;
	}
}

@media screen and (min-width: 701px){
	.prefoot ul{
		display: flex;
	}
	.prefoot ul li:first-child{
		width: 100%;
		text-align: left;
	}
	.prefoot *{
		height: .5rem;
	}
	.prefoot img{
		max-width: none;
		margin: 0;
	}
	.prefoot ul li:first-child~li{
		padding-left: .2rem;
	}
}