/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_main.scss **/
&__main {
	position       : relative;
	z-index        : 1;
	container-type : inline-size;
	padding        : $content-padding;
	min-height     : calc(100vh - var(--deco-big-height) * 2);
	
	&::after {
		display        : block;
		content        : '';
		position       : absolute;
		top            : 0;
		left           : 0;
		width          : 100%;
		height         : 100%;
		opacity        : 0;
		background     : get_color(black);
		
		pointer-events : none;
		
		@include transition();
		
		.menu--toggled & {
			opacity : 1;
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_footer.scss **/
&__footer {
	position : sticky;
	left     : 0;
	width    : 100%;
	bottom   : var( --bottom, 0 );
	
	z-index  : 10;
	
	.menu {
		list-style     : none;
		padding        : 0;
		display        : flex;
		flex-direction : column;
		
		&__caption {
			display : none;
		}
		
		&__item {
			a {
				@include transition();
				
				color           : get_color( white );
				text-decoration : none;
				
				&:focus,
				&:hover {
					color : var(--color-accent, get_color( gray ) );
				}
			}
			
			&.current-menu-item {
				a {
					text-decoration : underline;
				}
			}
		}
	}
	
	.site__info {
		font-size   : 0.75rem;
		font-weight : bold;
		color       : var(--color-imprint, get_color(black));
	}
	
	@media (max-height : #{$breakpoint-md}) {
		
		.menu--toggled & {
			bottom: var(--bottom) !important;
			position: fixed !important;
		}
	
		position : relative;
		bottom : 0 !important;
	}
	
	@media (max-width : #{$breakpoint-lg}) {
		.design__element--bottom {
			translate: 0 1px;
		}
		
		&__inner {
			padding-top    : $content-margin;
			padding-inline : $content-padding;
			padding-bottom : $content-padding;
		}
		
		.site__info {
			margin-top : $content-margin;
		}
		
		.menu {
			&__item {
				line-height : 1.5;
			}
		}
	}
	
	@media (min-width : #{$breakpoint-lg}) {
		bottom : 0 !important;
		
		&__inner {
			position         : absolute;
			top              : 0;
			width            : 100%;
			height           : 100%;
			background-color : transparent;
		}
		
		.site__info {
			position         : absolute;
			right            : 0;
			top              : 0;
			width            : 25%;
			text-align       : right;
			transform-origin : 100% 100%;
			transform        : rotate(-6deg);
			translate        : -0.5rem 100%;
			line-height      : 2rem;
			color            : var( --color-imprint, get_color(black) );
		}
		
		.menu {
			position       : absolute;
			flex-direction : row;
			bottom         : $content-margin;
			left           : $content-margin;
			
			&__item {
				&:not( :last-child ) {
					&::after {
						content             : '';
						background-image    : var(--separator);
						padding             : 0 #{$content-margin};
						
						width               : 1em;
						height              : 1em;
						display             : inline-block;
						background-size     : contain;
						background-repeat   : no-repeat;
						background-position : center;
						vertical-align      : sub;
					}
				}
			}
		}
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_navigation.scss **/
&__navigation {
	
	&__button {
		width    : auto;
		position : absolute;
		top      : #{$content-margin};
		right    : #{$content-margin};
		
		z-index  : 100;
		
		.menu {
			&__toggle {
				position      : absolute;
				z-index       : 1;
				display       : block;
				width         : 1.875rem;
				height        : 1.875rem;
				cursor        : pointer;
				
				top           : 0;
				right         : 0;
				padding       : 0;
				
				background    : transparent;
				border-radius : 0;
				border        : 0;
				
				> * {
					background       : get_color(white);
					width            : 100%;
					height           : 20%;
					position         : absolute;
					left             : 0;
					
					@include transition();
					transform-origin : 0 50%;
					
					&:nth-child(1) {
						top : 0px;
					}
					
					&:nth-child(2) {
						top              : 50%;
						translate        : 0 -50%;
						transform-origin : 50% 50%;
					}
					
					&:nth-child(3) {
						bottom : 0;
					}
				}
				
				&.is--toggled {
					> * {
						&:nth-child(1) {
							translate : 0px -50%;
							transform : rotate(45deg);
							width     : 141.4213562373%;
						}
						
						&:nth-child(2) {
							transform : scaleX(0);
						}
						
						&:nth-child(3) {
							translate : 0px 50%;
							transform : rotate(-45deg);
							width     : 141.4213562373%;
						}
					}
				}
			}
		}
	}
	
	.menu {
		display    : flex;
		width      : var(--content-width);
		padding    : #{$content-gap};
		margin     : var(--deco-big-height) auto;
		gap        : #{$content-gap};
		list-style : none;
		
		@media (max-width : #{$breakpoint-md}) {
			padding        : #{$content-gap} #{$content-padding};
			flex-direction : column;
		}
		
		&__sub {
			
			&__item {
				&__caption {
					@include transition();
					
					font-size       : #{$content-margin};
					color           : get_color(white);
					width           : 100%;
					text-decoration : none;
					
					&[href],
					&[onclick] {
						&:hover {
							color : var(--color-text, get_color(gray));
						}
					}
				}
				
				&--current {
					> a {
						position : relative;
						color    : var(--color-text, get_color(white));
						
						&::before {
							content          : '';
							display          : block;
							position         : absolute;
							height           : #{$content-margin};
							width            : #{$content-margin};
							background-image : var(--separator);
							background-repeat: no-repeat;
							background-size  : contain;
							translate        : calc( -100% - #{$content-margin / 2}) -50%;
							top              : 50%;
						}
					}
				}
			}
		}
		
		&__item {
			flex           : 1 1 100%;
			display        : flex;
			flex-direction : column;
			gap            : #{$content-margin};
			
			@media (max-width : #{$breakpoint-md}) and (min-width : #{$breakpoint-sm}) {
				flex-direction : row;
				gap            : #{$content-margin * 2};
			}
			
			&__caption {
				@include transition();
				
				font-size       : #{$content-margin * 2};
				margin-bottom   : #{$content-margin};
				text-decoration : none;
				color           : get_color(white);
				
				@media (max-width : #{$breakpoint-md}) and (min-width : #{$breakpoint-sm}) {
					flex-basis : 40%;
				}
				
				&[href],
				&[onclick] {
					&:hover {
						color : var(--color-text, get_color(gray));
					}
				}
			}
			
			&--current {
				> a {
					position : relative;
					color    : var(--color-text, get_color(white));
					
					&::before {
						content          : '';
						display          : block;
						position         : absolute;
						height           : #{$content-margin * 2};
						width            : #{$content-margin * 2};
						background-image : var(--separator);
						background-repeat: no-repeat;
						background-size  : contain;
						translate        : calc( -100% - #{$content-margin / 2}) -50%;
						top              : 50%;
					}
				}
			}
		}
		
		&__submenu {
			position       : relative;
			top            : auto;
			left           : auto;
			flex           : 1 1 100%;
			display        : flex;
			flex-direction : column;
			gap            : #{$content-margin};
			list-style     : none;
			padding        : 0;
			
			@media (max-width : #{$breakpoint-md}) and (min-width : #{$breakpoint-sm}) {
				flex-basis : 60%;
			}
		}
		
		&__caption {
			display : none;
		}
		
		&__container {
			display    : none;
			
			position   : fixed;
			top        : 0;
			right      : 0;
			width      : 100%;
			height     : 100vh;
			overflow   : auto;
			z-index    : 5;
			
			background : get_rgba(black, $opacity-light);
			
			&.is--toggled {
				display : block;
			}
		}
		
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_branding.scss **/
&__branding {
	position: absolute;
	height: calc( var( --deco-small-height ) - #{$content-margin * 2} );
	min-height: 1.875rem;;
	margin: #{$content-margin};
	display: inline-block;
	
	&__logo {
		height: 100%;
		width: auto;
		
		&__link {
			display: inline-block;
			width: auto;
			height: 100%;
		}
		
		&--show-on{
			&-sm { display: block;}
			&-md { display: none; }
			
			@media ( min-width : #{$breakpoint-md} ) {
				&-sm { display: none;}
				&-md { display: block; }
			}
		}
	}
	
	&__title {
		display: none;
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_background.scss **/
&__background {
	position   : fixed;
	height     : 100vh;
	top        : 0;
	width      : var(--content-stage);
	display    : block;
	opacity    : 0.2;
	object-fit : cover;
	filter     : brightness(110%) saturate(130%);
	
	&--left {
		left            : 0;
		object-position : center;
	}
	
	&--right {
		right           : 0;
		object-position : center;
	}
	
	&--flip {
		scale : -1 1;
	}
}

/** Datei: storage/cache/wthe_Ony9B891Un8xZwRE/assets/scss/site/_header.scss **/
&__header {
	@include design-element( top );
	@include linear-gradient( bottom, get_color(black), calc(var(--deco-small-height) / 2) );
	
	position : sticky;
	top      : 0;
	left     : 0;
	width    : 100%;
	z-index  : 10;
	
	@media screen and (min-width : 600px) {
		.admin-bar & {
			top : 32px;
		}
	}
}