:root{
	font-size: 100px;
	
	--c-accent: #002B42;
	--c-accent-icon: #D7AC7B;
	--c-bright: #fff;
	--c-dark: var(--c-accent);

	--f-h1: max(30px,1.2rem);
	--f-h2: max(27px,1rem);
	--f-h3: max(24px,.8rem);
	--f-h4: max(21px,.6rem);
	--f-h5: max(18px,.5rem);
	--f-h6: max(16px,.4rem);
	--f-p:  max(16px,.4rem);


	--f-nav: var(--f-h2);

	--f-text-family: 'menca';
	--f-text-weight: 500;

	--f-headline-family: 'headline';
	--f-headline-weight: 400;

	--content: 1370px;
	--space: .3rem;
	--yspace: 2rem;

	/* smooth scrolling */
	scroll-behavior: smooth;
}

html{
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y mandatory;
}

a{
	color: inherit
}

body{
	font-family: var(--f-text-family);
	font-weight: var(--f-text-weight);
	font-size: var(--f-p);
	background: var(--c-accent);
	color: var(--c-bright);
	margin: 0;
}

.content{
	max-width: var(--content);
	margin: 0 auto;
}

h1,h2,h3,h4,h5,h6{
	font-family: var(--f-headline-family);
	font-weight: var(--f-headline-weight);
	margin: 0 0 var(--space) 0;
	font-size: var(--f-h1);
}
h2{
	font-size: var(--f-h2);
}
h3{
	font-size: var(--f-h3);
}
h4{
	font-size: var(--f-h4);
}
h5{
	font-size: var(--f-h5);
}
h6{
	font-size: var(--f-h6);
}

section{
	display: block;
	position: relative;
	min-height: 100vh;
	/* min-height: 100svh; */
	scroll-snap-align: start;
	padding: var(--yspace) var(--space);
	box-sizing: border-box;
	
}
section:nth-child(2n){
	background: var(--c-bright);
	color: var(--c-dark);
}
section.full{
	padding: 0;
	min-height: 0;
	scroll-snap-align: center;
}
section.footer{
	padding: var(--space);
	min-height: 0;
	scroll-snap-align:end;
}

@media(max-width: 991px){
	section {
		min-height: unset;
		padding-bottom: 80px;
	}
}

a[id]{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 10px;
}

#logo_mond_gradient stop:nth-child(1){
	stop-color:#EADB9F;
}
#logo_mond_gradient stop:nth-child(2){
	stop-color:#F3F3C5;
}
#logo_mond_gradient stop:nth-child(3){
	stop-color:#C29855;
}
#logo_sonne path{
	fill:#D7C69D;
	opacity:1;
}

.logo{
	--logosize: min(70vw,50vh,500px);
	--azimuth:180deg;

	position: absolute;
	left: calc(50% - var(--logosize) / 2);
	bottom: calc(50% - var(--logosize) / 2.5);
	width: var(--logosize);
}
#logo_mama{
	position: relative;
	z-index: 1;
}
#logo_mama path{
	fill:#fff;
}

.signet{
	--size: calc(var(--logosize) / 2);
	position: absolute;
	left: calc(50% - var(--size) / 2);
	top: calc(50% - var(--size) / 2);
	height: var(--size);
	width: var(--size);
	transform: translateY(calc(var(--size) * -.5));
	animation: signet 2s ease-out;
}
@keyframes signet {
	0%{
		opacity:0;
		transform: translateY(0)
	}
	100%{
		opacity:1;
		transform: translateY(calc(var(--size) * -.5))
	}
}
.signet :is(div,svg){
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	animation: rotate_sonne 5s ease-out;
	transform-origin: left center;
	transform: rotate(calc(var(--azimuth) * -1));
}
#logo_mond{
	transform: rotate(calc(var(--azimuth) * -1));
	transform-origin: center;
}
#logo_sonne{
	transform: rotate(var(--azimuth));
	animation-name: rotate_mond;
	transform-origin: center;
}
.signet div.mond{
	transform: rotate(calc(var(--azimuth) * 1));
	transform-origin: right center;
	animation-name: rotate_mond;
}

.logo.in_dark #logo_sonne path,
.logo:not(.in_dark) #logo_mond path{
	animation: fadeout 5s ease-out;
}
.logo.dark #logo_sonne path,
.logo:not(.dark) #logo_mond path{
	opacity:0;
	transition: opacity 2s ease;
}

.signet path{
	opacity:1;
}

.signet div{
	opacity: 1;
	transition: opacity 1s ease;
}

.logo.init.dark .signet div.sonne,
.logo.init:not(.dark) .signet div.mond{
	opacity:0;
	transform: rotate(180deg);
}
.logo.init.dark .signet div.sonne #logo_sonne,
.logo.init:not(.dark) .signet div.mond #logo_mond{
	transform: rotate(-180deg);
}

@keyframes rotate_sonne {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(calc(var(--azimuth) * -1));
	}
}
@keyframes rotate_mond {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(var(--azimuth));
	}
}
@keyframes fadeout {
	0%{
		opacity:1;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity:0;
	}
}

.wp-block-table table{
	width: auto;
}
.wp-block-table td, .wp-block-table th{
	padding: 0 var(--space) 0 0;
	border: none;
	white-space: nowrap;
	vertical-align: top;
}
.wp-block-table td:nth-child(3){
	padding-left: calc(var(--space) * 2);
}
.wp-block-table td em{
	font-style: normal;
}
@media (max-width: 600px){
	.wp-block-table td em{
		display: none;
	}
}

.footer table{
	width: 100%;
}
.footer table td{
	vertical-align: bottom;
}

.footer table td+td{
	text-align: right;
}

.handle.dark{
	--bg: var(--c-dark);
}

.handle{
	--bg: var(--c-bright);
	--size: .3rem;
	position: fixed;
	right: var(--size);
	top: var(--size);
	height: var(--size);
	width: var(--size);
	cursor: pointer;
	z-index: 1000;
	margin: 0;
}
.handle>hr{
	display: block;
	height: calc(var(--size) / 10);
	margin: 0 0 calc(var(--size) / 4) 0;
	border-radius: .015rem;
	border: none;
	background: var(--bg);
	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: .11rem;
}
.open .handle>hr:nth-child(2){
	transform: rotateZ(-45deg);
	margin-top: calc(var(--size) / -2.8571428571);
}
.open .handle>hr:nth-child(3){
	transform: rotateZ(45deg);
	margin-top: calc(var(--size) / -2.8571428571);
}
.open .handle>hr:nth-child(4){
	transform: rotateZ(-45deg);
	background: rgba(255,255,255,0)
}

nav{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transform: translateY(-100vh);
	transform: translateY(-100mvh);
	background: var(--c-dark);
	color: var(--c-bright);
	font-family: var(--f-headline-family);
	font-weight: var(--f-headline-weight);
	font-size: var(--f-h2);
	padding: var(--yspace) var(--space);
	z-index: 900;
	overflow: auto;
	transition: transform ease .5s;
}
.open nav{
	transform: translateY(0);
}
nav a{
	text-decoration: none;
	display: block;
}
nav :is(ul,li){
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width:1000px) {
	:root{
		font-size: 10vw
	}	
}

@media (max-width: 600px){
	html{
		scroll-snap-type: none;
		scroll-snap-points-y: repeat(100vh);
	}

	.handle{
		--size: .8rem;;
	}

	:root{
		--yspace: 3rem
	}
}