/*******************************************************************
	0. FONTS
*******************************************************************/

@charset "utf-8";

@font-face {
	font-family: 'SourceSansPro-Regular';
	src:url('../SHARED/fonts/sourcesanspro/SourceSansPro-Regular.woff') format('woff'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Regular.woff2') format('woff2'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Regular.eot'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Regular.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SourceSansPro-Light';
	src:url('../SHARED/fonts/sourcesanspro/SourceSansPro-Light.woff') format('woff'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Light.woff2') format('woff2'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Light.eot'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'),
			url('../SHARED/fonts/sourcesanspro/SourceSansPro-Light.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Highshade-SpurStamp';
	src: url('../SHARED/fonts/highshade/Highshade-SpurStamp.eot');
	src: url('../SHARED/fonts/highshade/Highshade-SpurStamp.eot?#iefix') format('embedded-opentype'),
		url('../SHARED/fonts/highshade/Highshade-SpurStamp.woff2') format('woff2'),
		url('../SHARED/fonts/highshade/Highshade-SpurStamp.woff') format('woff'),
		url('../SHARED/fonts/highshade/Highshade-SpurStamp.ttf') format('truetype'),
		url('../SHARED/fonts/highshade/Highshade-SpurStamp.svg#Highshade-SpurStamp') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Highshade-Stamp';
	src: url('../SHARED/fonts/highshade/Highshade-Stamp.eot');
	src: url('../SHARED/fonts/highshade/Highshade-Stamp.eot?#iefix') format('embedded-opentype'),
		url('../SHARED/fonts/highshade/Highshade-Stamp.woff2') format('woff2'),
		url('../SHARED/fonts/highshade/Highshade-Stamp.woff') format('woff'),
		url('../SHARED/fonts/highshade/Highshade-Stamp.ttf') format('truetype'),
		url('../SHARED/fonts/highshade/Highshade-Stamp.svg#Highshade-Stamp') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/*******************************************************************
	1. ALLGEMEIN
*******************************************************************/
:root
{
	/* Colors */
	--color-dark: #383738;
	--color-light: #ECECEC;
	--color-lighter: #FFFFFF;
	--color-underline: #ecc000;
	/* Fonts */
	--font-text: 'SourceSansPro-Light';
	--font-text-bold: 'SourceSansPro-Regular';
	--font-hero: 'Highshade-SpurStamp';
}

html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
}

body
{
	font-size: 1em;
	line-height: 1.4em;
	color: var(--color-dark);
	font-family: var(--font-text), Arial, sans-serif;
	background: var(--color-lighter);
}

p 
{
	margin: 0px 0px 15px 0px;
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1.3em;
	line-height: 1.4em;
}

a:link, a:visited
{
	text-decoration: underline;
}

a:hover, a:active, a:focus
{
	text-decoration: none;
	outline: none;
}

h1
{
	color: var(--color-dark);
	text-transform: none;
	font-family: var(--font-hero);
	font-size: 4em;
}

h2, h3
{
	color: var(--color-dark);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-family: var(--font-text);--font-hero
}


/*******************************************************************
	2. INDIVIDUELLE STYLES 
*******************************************************************/


/*******************************************************************
	3. INDIVIDUELLE STYLES 
*******************************************************************/

.layout
{
	display: grid;
	grid-template-columns: clamp(260px, 22vw, 360px) 1fr;
	min-height: 100vh;
}

	.sidebar
	{
		position: sticky;
		top: 0;
		height: 100vh;
		padding: 40px 30px;
		box-sizing: border-box;
		background: var(--color-light);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		box-shadow: 6px 0 10px rgba(0,0,0,0.10);
		border-right: 1px solid rgba(0,0,0,0.2);
		padding-top: 20vh;
		z-index: 10;
	}
	
		.logo
		{
			background: url('../images/logos/logo_skulls.svg') center top no-repeat;
			background-size: 150px;
			height: 150px;
			width: 150px;
			margin-bottom: 80px;
		}
	
		.link_logo:link
		{
			display: block;
			width: 150px;
			height: 150px;
		}
	
		.menu
		{
			display: flex;
			flex-direction: column;
			gap: 14px;
			align-items: center;
			text-transform: uppercase;
		}
	
			#list_menu {
				list-style: none;
				padding: 0;
				margin: 0;
				text-align: center;
			}
	
			#list_menu li {
				position: relative;
				margin-bottom: 18px;
			}
	
			#list_menu a {
				position: relative;
				text-decoration: none;
				color: #222;
				font-size: 17px;
				font-family: var(--font-text), Arial, sans-serif;
				letter-spacing: 0.25em;
				display: inline-block;
				transition: opacity 0.25s ease;
			}
	
			#list_menu a::after {
				content: "";
				position: absolute;
				left: 50%;
				bottom: -4px;
				width: 0;
				height: 1px;
				background: #222;
				transform: translateX(-50%);
				transition: width 0.3s ease;
			}
	
			#list_menu a:hover::after {
				width: 100%;
			}
	
			#list_menu ul {
				list-style: none;
				padding: 12px 0;
				margin: 10px 0 0 0;
				display: none;
				text-align: center;
			}
	
			#list_menu li:hover > ul {
				display: block;
			}
	
			#list_menu ul li {
				margin: 6px 0;
			}
	
			#list_menu ul a {
				font-size: 14px;
				letter-spacing: 0.2em;
				color: #666;
			}
	
			#list_menu ul a:hover {
				color: #000;
			}
	
			.sf-arrows .sf-with-ul:after {
				display: none;
			}
	
			#list_menu:has(li:hover > ul) > li > a {
				opacity: 0.35;
			}
	
			#list_menu li:hover > a {
				opacity: 1;
			}
	
			#list_menu li:hover ul a {
				opacity: 1;
			}
	
		#hamburger
		{
			display: none;
		}
	
		#footer_socialmedia {
			margin-top: 30px;
			text-align: center;
			overflow: visible;
		}
	
		#footer_socialmedia a {
			display: block;
			margin: 10px 0;
			font-size: 20px;
			color: #222;
			line-height: 1;
			padding: 2px 4px;
			transition: opacity 0.25s ease, transform 0.25s ease;
		}
	
		#footer_socialmedia i {
			display: inline-block;
			padding-right: 1px;
		}
	
		#footer_socialmedia a:hover {
			opacity: 0.6;
			transform: translateY(-2px);
		}
	
		/* Copyright Block unten in der Sidebar */
	
		#footer_copyright {
			position: absolute;
			bottom: 25px;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 0.75em;
			color: #777;
			line-height: 1.6;
		}
	
		/* Links */
	
		#footer_copyright a {
			color: #777;
			text-decoration: none;
			transition: color 0.25s ease;
		}
	
		#footer_copyright a:hover {
			color: #222;
		}
	
		@media screen and (max-height: 950px) {
	
			.sidebar {
				padding-top: 10vh;
			}
	
			.logo {
				margin-bottom: 50px;
			}
	
			#list_menu li {
				margin-bottom: 14px;
			}
	
			#footer_socialmedia {
				margin-top: 20px;
			}
	
			#footer_socialmedia a {
				margin: 8px 0;
				font-size: 18px;
			}
	
			#footer_copyright {
				bottom: 18px;
				font-size: 0.7em;
			}
		}
	
		/* iPad / Safari Viewport-Fix */
	
		.sidebar,
		.container_hero {
			height: 100vh;
			height: 100dvh;
		}
	
	/* MOBILE */
	
	@media screen and (max-width: 767px)
	{
		.layout
		{
			grid-template-columns: 60px 1fr;
		}
	
		.sidebar
		{
			width: 60px;
			padding: 0;
			padding-top: 16px;
			align-items: center;
			justify-content: flex-start;
			overflow: visible;
		}
	
		.logo
		{
			background-size: 40px;
			width: 40px;
			height: 40px;
			margin-bottom: 16px;
		}
	
		.link_logo:link
		{
			width: 40px;
			height: 40px;
		}
	
		.menu
		{
			display: none;
		}
	
		#hamburger
		{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
		}
	
		#hamburger a
		{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			color: var(--color-dark);
			font-size: 20px;
			text-decoration: none;
		}
	
		#hamburger a:hover
		{
			opacity: 0.6;
		}
	
		#footer_socialmedia,
		#footer_copyright
		{
			display: none;
		}
	}
	
/*******************************************************************
	MOBILE MENU (MM-MENU)
*******************************************************************/

.mm-menu_theme-dark
{
	background: var(--color-light) !important;
	--mm-color-background: var(--color-light) !important;
	--mm-color-text: var(--color-dark) !important;
	--mm-color-text-dimmed: var(--color-dark) !important;
	--mm-color-border: rgba(0,0,0,0.1) !important;
	--mm-color-button: var(--color-dark) !important;
}

.mm-menu_theme-dark .mm-panels,
.mm-menu_theme-dark .mm-panel,
.mm-menu_theme-dark .mm-navbar
{
	background: var(--color-light) !important;
}

.mm-menu_theme-dark .mm-navbar,
.mm-menu_theme-dark .mm-navbar__title
{
	color: var(--color-dark);
	font-family: var(--font-text), Arial, sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.mm-menu_theme-dark .mm-listitem a,
.mm-menu_theme-dark .mm-listitem a:link,
.mm-menu_theme-dark .mm-listitem a:visited
{
	color: var(--color-dark);
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

.mm-menu_theme-dark .mm-listitem__btn
{
	border-color: rgba(0,0,0,0.1);
}

.mm-menu_theme-dark .mm-listitem
{
	border-color: rgba(0,0,0,0.1);
}

.mm-menu_theme-dark .mm-btn::before,
.mm-menu_theme-dark .mm-btn::after
{
	border-color: var(--color-dark);
}

.mm-menu_theme-dark .mm-btn_next::after
{
	border-color: var(--color-dark) !important;
}

.mm-menu_theme-dark .mm-btn_prev::before
{
	border-color: var(--color-dark) !important;
}

/* LOGO DREHT SICH WENN MENÜ OFFEN */

.logo
{
	transition: transform 0.4s ease;
}

html.mm-wrapper_opened .logo
{
	transform: rotate(180deg);
}
/*******************************************************************
	CONTENT
*******************************************************************/

.content
{
	position: relative;
	box-sizing: border-box;
	background: var(--color-lighter);
	z-index: 1;
}
	
/*******************************************************************
	BLOCK: HERO
*******************************************************************/
	
/* HERO CONTAINER */

.container_hero
{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #000;
}

/* MEDIA LAYER (VIDEO / IMAGE) */

#video,
.container_hero picture
{
	position: absolute;
	inset: 0;
	z-index: 1;
}

#video video,
.container_hero picture img.superhero
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;

	transform: scale(1.08);
	animation: heroMediaZoom 2.4s ease forwards;
	will-change: transform;
}

/* OVERLAY FOR TEXT CONTRAST */

.container_hero::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;

	background: linear-gradient(
		to right,
		rgba(0,0,0,0.45) 0%,
		rgba(0,0,0,0.25) 40%,
		rgba(0,0,0,0.15) 100%
	);
}

/* CONTENT LAYER */

#wrap_hero
{
	position: relative;
	z-index: 3;

	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	text-align: center;

	padding: 50px 60px;
	box-sizing: border-box;
}

/* TEXT BLOCK */

#slogan_hero
{
	max-width: clamp(700px, 60vw, 1400px);
	padding: 20px;
}

/* PRELINE */

.preline_hero
{
	font-size: clamp(14px, 1.2vw, 18px);
	letter-spacing: 0.3em;
	margin-bottom: -20px;
	text-align: center;

	color: var(--color-lighter);
	opacity: 0;

	text-shadow: 0 0 6px rgba(0,0,0,0.45);

	font-family: var(--font-text);
	text-transform: uppercase;

	transform: translateY(30px);
	animation: heroFadeUp 1.2s ease 0.45s forwards;
	will-change: opacity, transform;
}

/* HEADLINE */

.headline_hero
{
	font-size: clamp(2.5em, 8vw, 8em);
	letter-spacing: 0.08em;
	margin-bottom: 28px;
	text-align: center;

	color: var(--color-lighter);

	text-shadow: 0 0 8px rgba(0,0,0,0.45);

	font-family: var(--font-hero);
	text-transform: none;
	line-height: 0.95;

	opacity: 0;
	transform: translateY(36px);
	animation: heroFadeUp 1.2s ease 0.45s forwards;
	will-change: opacity, transform;
}

@media screen and (max-height: 950px)
{
	.headline_hero
	{
		font-size: clamp(2.5em, 8vw, 4.8em);
	}
}

/* CTA BUTTON */
.cta_button_hero,
.cta_button_hero:link,
.cta_button_hero:visited,
.cta_button_hero:hover,
.cta_button_hero:active,
.cta_button_hero:focus
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: relative;
	overflow: hidden;

	padding: 16px 42px;
	margin-top: 28px;

	border: 1px solid rgba(255,255,255,0.8);
	background: rgba(0,0,0,0.35);

	color: white !important;
	text-decoration: none;

	font-family: var(--font-text);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;

	backdrop-filter: blur(4px);

	box-shadow:
		0 10px 30px rgba(0,0,0,0.35),
		inset 0 0 0 1px rgba(255,255,255,0.15);

	opacity: 0;
	transform: translateY(28px);
	animation: heroFadeUp 0.9s ease 0.75s forwards;

	transition:
		transform 0.28s ease,
		background 0.35s ease,
		color 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

/* LIGHT SWEEP */

.cta_button_hero::before
{
	content: "";
	position: absolute;

	top: 0;
	left: -130%;

	width: 120%;
	height: 100%;

	background: linear-gradient(
		115deg,
		transparent,
		rgba(255,255,255,0.45),
		transparent
	);

	transition: left 0.7s ease;
}

.cta_button_hero:hover::before
{
	left: 130%;
}

/* BUTTON HOVER */

.cta_button_hero:hover
{
	background: white;
	color: black !important;
	border-color: white;

	transform: translateY(-3px);

	box-shadow:
		0 16px 40px rgba(0,0,0,0.35),
		0 3px 10px rgba(0,0,0,0.18);
}

.cta_button_hero:hover::before
{
	left: 130%;
}

/* KEYFRAMES */

@keyframes heroFadeUp
{
	from
	{
		opacity: 0;
		transform: translateY(30px);
	}
	to
	{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heroMediaZoom
{
	from
	{
		transform: scale(1.08);
	}
	to
	{
		transform: scale(1);
	}
}

/* MOBILE */

@media screen and (max-width: 900px)
{
	.container_hero
	{
		height: 75vh;
	}

	#wrap_hero
	{
		padding: 30px 20px;
	}

	#slogan_hero
	{
		max-width: 100%;
		padding: 0;
	}

	.headline_hero
	{
		font-size: clamp(2.2rem, 12vw, 4rem);
	}

	.preline_hero
	{
		font-size: 13px;
		letter-spacing: 0.2em;
	}

	.cta_button_hero
	{
		padding: 14px 26px;
		font-size: 13px;
		letter-spacing: 0.15em;
	}
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce)
{
	#video video,
	.container_hero picture img.superhero,
	.preline_hero,
	.headline_hero,
	.cta_button_hero
	{
		animation: none;
		transform: none;
		opacity: 1;
	}
}
		
/*******************************************************************
	BLOCK: TEXT
*******************************************************************/
		
.block_text .wrap_text
{
	padding: 50px 60px;
}

@media screen and (max-width: 767px)
{
	.block_text .wrap_text
	{
		padding: 20px;
	}
}

/*******************************************************************
	TEASER IMAGE / TEXT BLOCK
*******************************************************************/

.block_textimage
{
	position: relative;
	display: grid;
	/* grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr); */
	grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr);
	align-items: center;
	gap: 0;
	padding: 80px 60px;
	box-sizing: border-box;
}

.block_textimage + .block_textimage
{
	padding-top: 20px;
}

/* DEFAULT MEDIA AREA */

.wrap_image_left,
.wrap_image_right
{
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: #111;

	aspect-ratio: 4 / 3;
	min-height: 420px;

	border-radius: 2px;

	box-shadow:
		0 18px 50px rgba(0,0,0,0.16),
		0 3px 10px rgba(0,0,0,0.08);
}

.wrap_image_left img,
.wrap_image_right img,
.wrap_image_left video,
.wrap_image_right video
{
	display: block;
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;
}

/* SUBTLE MEDIA OVERLAY FOR DEPTH */

.wrap_image_left::after,
.wrap_image_right::after
{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0,0,0,0.18) 0%,
		rgba(0,0,0,0.04) 40%,
		rgba(0,0,0,0.00) 100%
	);
	pointer-events: none;
}

/* TEXT PANELS */

.wrap_text_left,
.wrap_text_right
{
	position: relative;
	z-index: 2;

	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(8px);

	padding: 48px 50px 44px 50px;
	box-sizing: border-box;

	box-shadow:
		0 24px 60px rgba(0,0,0,0.14),
		0 4px 14px rgba(0,0,0,0.08);

	/* max-width: 720px; */
	max-width: none;
	width: calc(100% + 80px);
}

/* PANEL POSITIONING: TEXT OVERLAPS IMAGE */

.wrap_text_left
{
	margin-right: -90px;
}

.wrap_text_right
{
	margin-left: -90px;
}

/* TYPOGRAPHY */

.wrap_text_left h1,
.wrap_text_right h1,
.wrap_text_left h2,
.wrap_text_right h2
{
	margin: 0 0 18px 0;
	font-family: var(--font-hero);
	font-size: clamp(1.9rem, 3vw, 3.2rem);
	line-height: 0.98;
	letter-spacing: 0.04em;
	color: var(--color-text);
	text-transform: none;
}

.wrap_text_left p,
.wrap_text_right p
{
	margin: 0 0 16px 0;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--color-text);
}

.wrap_text_left p:last-child,
.wrap_text_right p:last-child
{
	margin-bottom: 0;
}

.wrap_text_left strong,
.wrap_text_right strong
{
	font-family: 'SourceSansPro-Regular', Arial, sans-serif;
	font-weight: normal;
}

/* LINKS INSIDE PANEL */

.wrap_text_left a,
.wrap_text_left a:link,
.wrap_text_left a:visited,
.wrap_text_right a,
.wrap_text_right a:link,
.wrap_text_right a:visited
{
	position: relative;
	text-decoration: none;
	color: var(--color-text);
}

.wrap_text_left a::after,
.wrap_text_right a::after
{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -3px;
	width: 0;
	height: 1px;
	background: currentColor;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.wrap_text_left a:hover::after,
.wrap_text_left a:focus::after,
.wrap_text_right a:hover::after,
.wrap_text_right a:focus::after
{
	width: 100%;
}

/*******************************************************************
	LAYOUT VARIANTS
*******************************************************************/

/* IMAGE RIGHT | TEXT LEFT */
.block_textimage:has(.wrap_image_right):has(.wrap_text_left)
{
	/* grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr); */
	grid-template-columns: minmax(420px, 0.8fr) minmax(0, 1.2fr);
}

.block_textimage:has(.wrap_image_right) .wrap_text_left
{
	order: 1;
	justify-self: end;
}

.block_textimage:has(.wrap_image_right) .wrap_image_right
{
	order: 2;
}

/* IMAGE LEFT | TEXT RIGHT */
.block_textimage:has(.wrap_image_left):has(.wrap_text_right)
{
	/* grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); */
	grid-template-columns: minmax(0, 1.2fr) minmax(420px, 0.8fr);
}

.block_textimage:has(.wrap_image_left) .wrap_image_left
{
	order: 1;
}

.block_textimage:has(.wrap_image_left) .wrap_text_right
{
	order: 2;
	justify-self: start;
}

/*******************************************************************
	MOBILE
*******************************************************************/

@media screen and (max-width: 767px)
{
	.block_textimage,
	.block_textimage:has(.wrap_image_right):has(.wrap_text_left),
	.block_textimage:has(.wrap_image_left):has(.wrap_text_right)
	{
		grid-template-columns: 1fr;
		padding: 40px 20px;
		gap: 0;
	}

	/* Bild immer oben */
	.wrap_image_left,
	.wrap_image_right
	{
		order: 1 !important;

		aspect-ratio: 4 / 3;
		min-height: 280px;
		border-radius: 0;
		box-shadow:
			0 14px 34px rgba(0,0,0,0.12),
			0 3px 10px rgba(0,0,0,0.06);
	}

	/* Text immer unten, zentriert */
	.wrap_text_left,
	.wrap_text_right,
	.block_textimage:has(.wrap_image_right) .wrap_text_left,
	.block_textimage:has(.wrap_image_left) .wrap_text_right
	{
		order: 2 !important;
		justify-self: stretch !important;

		max-width: none;
		margin: -40px 20px 0 20px;
		padding: 28px 24px 24px 24px;
	}

	.wrap_text_left h1,
	.wrap_text_right h1,
	.wrap_text_left h2,
	.wrap_text_right h2
	{
		font-size: clamp(1.6rem, 7vw, 2.4rem);
	}

	.wrap_text_left p,
	.wrap_text_right p
	{
		font-size: 1rem;
		line-height: 1.55;
	}
}

@media screen and (max-width: 767px)
{
	.block_textimage .wrap_text_left,
	.block_textimage .wrap_text_right
	{
		justify-self: stretch !important;
		margin-left: 20px !important;
		margin-right: 20px !important;
		max-width: none !important;
		width: auto !important;
	}
}

/*******************************************************************
	BLOCK: MINIHERO
*******************************************************************/

.container_minihero
{
	width: 100%;
	height: clamp(200px, 32vw, 650px);
	position: relative;
	overflow: hidden;
}

.container_minihero::before
{
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform: scale(1.08);
	animation: heroMediaZoom 2.4s ease forwards;
	will-change: transform;
}

@media screen and (max-width: 767px)
{
	.container_minihero
	{
		height: 300px;
		background-attachment: scroll;
	}
}

/*******************************************************************
	BLOCK: FEATURE
*******************************************************************/

.wrap_feature
{
	padding: 80px 60px;
	box-sizing: border-box;
}

.list_feature
{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: stretch;
}

/* KARTE */

.item_feature
{
	display: flex;
	flex-direction: column;
	background: var(--color-light);
	box-shadow:
		0 18px 50px rgba(0,0,0,0.10),
		0 3px 10px rgba(0,0,0,0.06);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
}

.item_feature:hover
{
	transform: translateY(-4px);
	box-shadow:
		0 28px 60px rgba(0,0,0,0.14),
		0 6px 16px rgba(0,0,0,0.08);
}

/* BILD */

.feature_image
{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* CONTENT */

.feature_content
{
	padding: 28px 28px 16px 28px;
	flex: 1;
}

.feature_content h1
{
	font-family: var(--font-hero);
	font-size: clamp(1.6rem, 2.5vw, 2.4rem);
	line-height: 0.98;
	letter-spacing: 0.04em;
	margin: 0 0 14px 0;
	color: var(--color-dark);
	text-transform: none;
}

.feature_content h2
{
	font-family: var(--font-text);
	font-size: 1.3rem;
	letter-spacing: 0.15em;
	margin: 35px 0 0 0;
	color: var(--color-dark);
}

.feature_content p
{
	font-size: 1.3rem;
	line-height: 1.4;
	margin: 0 0 10px 0;
	color: var(--color-dark);
}

/* CTA */

.feature_cta
{
	padding: 16px 28px 28px 28px;
	text-align: center;
}

.wysiwyg_button_feature,
.wysiwyg_button_feature:link,
.wysiwyg_button_feature:visited
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 12px 32px;

	border: 1px solid var(--color-dark);
	background: transparent;

	color: var(--color-dark);
	text-decoration: none;

	font-family: var(--font-text);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.25s ease;

	position: relative;
	overflow: hidden;
}

.wysiwyg_button_feature::before
{
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 120%;
	height: 100%;
	background: linear-gradient(
		115deg,
		transparent,
		rgba(0,0,0,0.06),
		transparent
	);
	transition: left 0.6s ease;
}

.wysiwyg_button_feature:hover::before
{
	left: 130%;
}

.wysiwyg_button_feature:hover
{
	background: var(--color-dark);
	color: var(--color-lighter);
	transform: translateY(-2px);
}

.feature_content span[style*="text-decoration: underline"]
{
	text-decoration: none !important;
	background: var(--color-underline);
	padding: 5px 8px;
	border-radius: 20px;
	margin: 0px 3px 0px 3px;
	font-family: var(--font-text-bold);
	line-height: 2.2em;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.wrap_feature
	{
		padding: 40px 20px;
	}

	.list_feature
	{
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/*******************************************************************
	BLOCK: IMAGE-FEATURE
*******************************************************************/

.block_image-feature
{
	padding: 0;
	margin: 0;
}

.wrap_image-feature
{
	padding: 80px 60px;
	box-sizing: border-box;
}

.list_image-feature
{
	list-style: none;
	padding: 0;
	margin: 0;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: stretch;
}

.item_image-feature
{
	overflow: hidden;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: stretch;

	box-shadow:
		0 18px 50px rgba(0,0,0,0.10),
		0 3px 10px rgba(0,0,0,0.06);
}

.item_image-feature a
{
	display: flex;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	padding: 0;
	margin: 0;
}

.image_image-feature
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border: none;
	padding: 0;
	margin: 0;

	transform: scale(1);
	transition: transform 0.6s ease;
	will-change: transform;
}

.item_image-feature a:hover .image_image-feature
{
	transform: scale(1.06);
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.wrap_image-feature
	{
		padding: 40px 20px;
	}

	.list_image-feature
	{
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/*******************************************************************
	BLOCK: GALLERY
*******************************************************************/

.block_gallery
{
	padding: 80px 60px;
	box-sizing: border-box;
}

.wrap_gallery
{
	padding: 0;
}

.list_gallery
{
	list-style: none;
	padding: 0;
	margin: 0;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.item_gallery
{
	overflow: hidden;
	position: relative;
	aspect-ratio: 1 / 1;
	display: block;
	font-size: 0;
	line-height: 0;
	margin: 0;
}

.item_gallery a
{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	line-height: 0;
}

.gallery_thumbnail
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border: none;
	padding: 0;
	margin: 0;

	transform: scale(1);
	transition: transform 0.6s ease, opacity 0.3s ease;
	will-change: transform;
}

.item_gallery a:hover .gallery_thumbnail
{
	transform: scale(1.06);
	opacity: 0.88;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.block_gallery
	{
		padding: 40px 20px;
	}

	.list_gallery
	{
		grid-template-columns: repeat(2, 1fr);
	}
}
	
/*******************************************************************
	BLOCK: QUOTE
*******************************************************************/

.block_quote
{
	padding: 80px 60px;
	box-sizing: border-box;
	background: var(--color-lighter);
}

.wrap_quote
{
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 60px;
}

/* RIESIGE ANFÜHRUNGSZEICHEN */

.wrap_quote::before,
.wrap_quote::after
{
	content: "\201C";
	font-family: var(--font-hero);
	font-size: clamp(8rem, 15vw, 14rem);
	line-height: 1;
	color: var(--color-dark);
	opacity: 0.08;
	position: absolute;
	pointer-events: none;
}

.wrap_quote::before
{
	top: -30px;
	left: -10px;
}

.wrap_quote::after
{
	content: "\201D";
	bottom: -110px;
	right: -10px;
}

/* ÜBERSCHRIFT = ZITAT-AUTOR OBEN */

.wrap_quote h1
{
	font-family: var(--font-text);
	font-size: 0.85rem;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--color-dark);
	opacity: 0.5;
	margin: 0 0 24px 0;
}

/* ZITAT TEXT */

.wrap_quote p
{
	font-family: var(--font-hero);
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	line-height: 1.35;
	color: var(--color-dark);
	margin: 0 0 16px 0;
	letter-spacing: 0.03em;
}

/* AUTOR ZEILE (text-align: right) */

.wrap_quote p[style*="text-align: right"]
{
	font-family: var(--font-text);
	font-size: 0.95rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-top: 32px;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.block_quote
	{
		padding: 60px 20px;
	}

	.wrap_quote
	{
		padding: 0 20px;
	}

	.wrap_quote p
	{
		font-size: clamp(1.2rem, 5vw, 1.6rem);
	}
}

/*******************************************************************
	BLOCK: CONTACT
*******************************************************************/

.block_contact
{
	padding: 0 60px 80px 60px;
	box-sizing: border-box;
}

.wrap_contact
{
	max-width: 820px;
	margin: 0 auto;
}

/* FELDER */

.container_support
{
	display: flex;
	flex-direction: column;
	gap: 0;
}

#wrap_support_userdata
{
	display: flex;
	flex-direction: column;
}

.field
{
	position: relative;
	border-bottom: 1px solid rgba(0,0,0,0.15);
}

.field:first-child
{
	border-top: 1px solid rgba(0,0,0,0.15);
}

.wrap_support_message
{
	border-bottom: 1px solid rgba(0,0,0,0.15);
}

/* INPUTS */

.field input,
.wrap_support_message textarea
{
	display: block;
	width: 100%;
	padding: 18px 0;
	box-sizing: border-box;

	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;

	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--color-dark);

	transition: padding 0.2s ease;
}

.field input::placeholder,
.wrap_support_message textarea::placeholder
{
	color: rgba(0,0,0,0.35);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.field input:focus,
.wrap_support_message textarea:focus
{
	outline: none;
}

/* FOCUS LINIE */

.field::after
{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--color-dark);
	transition: width 0.35s ease;
}

.field:focus-within::after
{
	width: 100%;
}

/* TEXTAREA */

.wrap_support_message
{
	position: relative;
}

.wrap_support_message::after
{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--color-dark);
	transition: width 0.35s ease;
}

.wrap_support_message:focus-within::after
{
	width: 100%;
}

.wrap_support_message textarea
{
	resize: none;
	min-height: 160px;
	line-height: 1.6;
}

/* SUBMIT BUTTON */

.container_checkoutbuttons
{
	margin-top: 40px;
	text-align: left;
}

.checkout_button_forward
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: relative;
	overflow: hidden;

	padding: 16px 52px;

	border: 1px solid var(--color-dark);
	background: transparent;

	color: var(--color-dark);
	cursor: pointer;

	font-family: var(--font-text), Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.3em;
	text-transform: uppercase;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.25s ease;
}

/* LIGHT SWEEP */

.checkout_button_forward::before
{
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 120%;
	height: 100%;
	background: linear-gradient(
		115deg,
		transparent,
		rgba(0,0,0,0.06),
		transparent
	);
	transition: left 0.6s ease;
}

.checkout_button_forward:hover::before
{
	left: 130%;
}

.checkout_button_forward:hover
{
	background: var(--color-dark);
	color: var(--color-lighter);
	transform: translateY(-2px);
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.block_contact
	{
		padding: 0 20px 60px 20px;
	}
}

/*******************************************************************
	BLOCK: MAP
*******************************************************************/

.block_map
{
	padding: 0 0px 0px 0px;
	box-sizing: border-box;
}

.wrap_map
{
	position: relative;
	overflow: hidden;
	box-shadow:
		0 18px 50px rgba(0,0,0,0.12),
		0 3px 10px rgba(0,0,0,0.06);
}

#mapid
{
	width: 100%;
	height: 450px;
}

/* LEAFLET POPUP STYLING */

.leaflet-popup-content-wrapper
{
	background: var(--color-light);
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.leaflet-popup-content
{
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-dark);
	margin: 12px 18px;
}

.leaflet-popup-tip
{
	background: var(--color-light);
}

.leaflet-popup-close-button
{
	color: var(--color-dark) !important;
}

/* ZOOM CONTROLS */

.leaflet-bar a
{
	font-family: var(--font-text), Arial, sans-serif;
	color: var(--color-dark) !important;
	background: var(--color-light) !important;
	border-bottom-color: rgba(0,0,0,0.15) !important;
}

.leaflet-bar a:hover
{
	background: var(--color-lighter) !important;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.block_map
	{
		padding: 0 0 60px 0;
	}

	#mapid
	{
		height: 320px;
	}
}

/*******************************************************************
	BLOCK: TESTIMONIAL
*******************************************************************/

.block_testimonial
{
	padding: 80px 60px;
	box-sizing: border-box;
	background: var(--color-lighter);
}

.wrap_testimonial
{
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	padding: 0 80px;
}

.list_testimonial
{
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

/* EINZELNES TESTIMONIAL */

.item_testimonial
{
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	animation: testimonialFadeIn 0.5s ease forwards;
	list-style: none !important;
	margin: 0 !important;
}

.item_testimonial.active
{
	display: flex;
}

@keyframes testimonialFadeIn
{
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* BILD */

.testimonial_image
{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center center;
	border: 3px solid var(--color-lighter);
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	margin-bottom: 32px;
	display: block;
}

/* TEXT */

.testimonial_content
{
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--color-dark);
	margin: 0 0 8px 0;
	width: 100%;
}

/* AUTOR: rechtsbündig */

.testimonial_content:last-child
{
	text-align: right;
	font-size: 0.9rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-top: 20px;
}

.testimonial_content b
{
	font-family: var(--font-text-bold), Arial, sans-serif;
	font-weight: normal;
}

/* NAVIGATION */

.testimonial_navigation
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
}

/* PFEILE: absolut links und rechts, vertikal zentriert am Testimonial */

#testimonial_previous
{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: all;
	background: none;
	border: 1px solid var(--color-dark);
	color: var(--color-dark);
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition: background 0.25s ease, color 0.25s ease;
	flex-shrink: 0;
}

#testimonial_next
{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: all;
	background: none;
	border: 1px solid var(--color-dark);
	color: var(--color-dark);
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition: background 0.25s ease, color 0.25s ease;
	flex-shrink: 0;
}

#testimonial_previous:hover,
#testimonial_next:hover
{
	background: var(--color-dark);
	color: var(--color-lighter);
}

/* DOTS */

.testimonial_dots
{
	display: flex;
	gap: 8px;
	align-items: center;
}

.testimonial_dot
{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-dark);
	opacity: 0.2;
	transition: opacity 0.25s ease;
	cursor: pointer;
}

.testimonial_dot.active
{
	opacity: 1;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.block_testimonial
	{
		padding: 60px 20px;
	}

	.wrap_testimonial
	{
		padding: 0;
	}

	#testimonial_previous,
	#testimonial_next
	{
		position: static;
		transform: none;
	}

	.testimonial_navigation
	{
		display: flex;
		justify-content: center;
		gap: 24px;
		margin-top: 40px;
	}

	.testimonial_content
	{
		font-size: 1rem;
	}
}

/*******************************************************************
	BLOCK: FLOATING BUTTON
*******************************************************************/

.block_floating-button
{
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 999;
}

.wrap_floating-button
{
	padding: 0;
	margin: 0;
}

.list_floating-button
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.item_floating-button
{
	list-style: none;
	margin: 0;
}

.item_floating-button a,
.item_floating-button a:link,
.item_floating-button a:visited
{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 16px 36px;

	background: var(--color-dark);
	color: var(--color-lighter);
	text-decoration: none;

	font-family: var(--font-text), Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: uppercase;

	box-shadow:
		0 8px 24px rgba(0,0,0,0.25),
		0 2px 8px rgba(0,0,0,0.15);

	position: relative;
	overflow: hidden;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease;
}

/* LIGHT SWEEP */

.item_floating-button a::before
{
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 120%;
	height: 100%;
	background: linear-gradient(
		115deg,
		transparent,
		rgba(255,255,255,0.12),
		transparent
	);
	transition: left 0.6s ease;
}

.item_floating-button a:hover::before
{
	left: 130%;
}

.item_floating-button a:hover
{
	transform: translateY(-3px);
	box-shadow:
		0 14px 32px rgba(0,0,0,0.28),
		0 4px 12px rgba(0,0,0,0.18);
}

/* MOBILE: volle Breite unten */

@media screen and (max-width: 767px)
{
	.block_floating-button
	{
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
	}

	.wrap_floating-button,
	.list_floating-button,
	.item_floating-button
	{
		width: 100%;
	}

	.item_floating-button a,
	.item_floating-button a:link,
	.item_floating-button a:visited
	{
		width: 100%;
		padding: 20px;
		font-size: 14px;
		box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
	}

	.item_floating-button a:hover
	{
		transform: none;
	}
}


/*******************************************************************
	BLOCK: YOUTUBE
*******************************************************************/

.block_youtube
{
	padding: 80px 60px;
	box-sizing: border-box;
}

.wrap_youtube
{
	max-width: 960px;
	margin: 0 auto;
	box-shadow:
		0 24px 60px rgba(0,0,0,0.16),
		0 4px 14px rgba(0,0,0,0.08);
}

.container_video
{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.container_video iframe
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	.block_youtube
	{
		padding: 40px 0;
	}

	.wrap_youtube
	{
		box-shadow: none;
	}
}

/*******************************************************************
	BLOCK: POPUP
*******************************************************************/

#popup_background
{
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	backdrop-filter: blur(4px);
}

#popup_background.active
{
	opacity: 1;
	pointer-events: all;
}

#popup_container
{
	position: relative;
	max-width: 600px;
	width: 90%;
	box-shadow:
		0 30px 80px rgba(0,0,0,0.4),
		0 8px 24px rgba(0,0,0,0.2);

	animation: popupFadeIn 0.5s ease forwards;
}

@keyframes popupFadeIn
{
	from { opacity: 0; transform: translateY(20px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* BILD */

.popup_image
{
	display: block;
	width: 100%;
	height: auto;
	line-height: 0;
}

/* LINK ÜBER DAS GESAMTE BILD */

.popup_link
{
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* CLOSE BUTTON */

.popup_close
{
	position: absolute;
	top: -16px;
	right: -16px;
	z-index: 2;

	width: 36px;
	height: 36px;

	background: var(--color-dark);
	color: var(--color-lighter);

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	font-size: 14px;

	box-shadow: 0 4px 12px rgba(0,0,0,0.25);

	transition: background 0.25s ease, transform 0.25s ease;
}

.popup_close:hover
{
	background: #000;
	transform: scale(1.1);
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	#popup_container
	{
		width: 85%;
	}

	.popup_close
	{
		top: -14px;
		right: -14px;
		width: 32px;
		height: 32px;
		font-size: 12px;
	}
}

/*******************************************************************
	4. CHATBOX 
*******************************************************************/

#icon_chat
{}

#container_chat
{}

	#content_chat
	{}
	
	#form_chat
	{}
	
		#chat_message
		{}
		
		#form_chat > button