/*******************************************************************
	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), Arial, sans-serif;
}

b, strong
{
	font-family: var(--font-text-bold), Arial, sans-serif;
}



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

.tab_content_body ul li {
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1.3em;
	line-height: 1.4em;
}

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

/*******************************************************************
	TOPBAR
*******************************************************************/

#topbar
{
	position: fixed;
	top: 0;
	left: clamp(260px, 22vw, 360px);
	right: 0;
	z-index: 500;

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

	padding: 12px 20px;
	box-sizing: border-box;
	pointer-events: none;
}

#topbar_left
{
	display: flex;
	align-items: center;
	margin-right: auto;
	pointer-events: all;
	min-width: 0;
}

#topbar_right
{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	pointer-events: all;
	position: relative;
}

.topbar_breadcrumb
{
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.9);
	border-radius: 18px;
	padding: 7px 12px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
	max-width: min(58vw, 920px);
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar_breadcrumb .crumb_home,
.topbar_breadcrumb .crumb_link,
.topbar_breadcrumb .crumb_text,
.topbar_breadcrumb .crumb_current,
.topbar_breadcrumb .crumb_sep
{
	font-size: 0.85rem;
	line-height: 1;
	color: var(--color-dark);
}

.topbar_breadcrumb .crumb_link
{
	text-decoration: none;
	opacity: 0.82;
}

.topbar_breadcrumb .crumb_link:hover
{
	opacity: 1;
	text-decoration: underline;
}

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

.topbar_breadcrumb .crumb_sep
{
	opacity: 0.55;
}

.topbar_item
{
	position: relative;
}

.topbar_icon_btn
{
	border: none;
	background: rgba(255,255,255,0.9);
	color: var(--color-dark);
	height: 36px;
	min-width: 36px;
	padding: 0 10px;
	border-radius: 18px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tabler_icon
{
	width: 18px;
	height: 18px;
	display: inline-block;
}

.topbar_icon_btn:hover
{
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.topbar_icon_btn:focus-visible
{
	outline: 2px solid var(--color-dark);
	outline-offset: 2px;
}

.sr_only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

#language_toggle img
{
	display: block;
	width: 18px;
	height: 12px;
	border-radius: 2px;
	object-fit: cover;
}

.topbar_dropdown
{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 170px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow: 0 10px 22px rgba(0,0,0,0.16);
	border-radius: 10px;
	padding: 8px 0;
	display: none;
	z-index: 520;
}

.topbar_dropdown.is_open
{
	display: block;
}

.topbar_dropdown a
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: var(--color-dark);
	text-decoration: none;
	font-size: 0.95em;
	line-height: 1.2em;
}

.topbar_dropdown a:hover
{
	background: rgba(0,0,0,0.06);
}

#language_dropdown .language_flag img
{
	width: 16px;
	height: 11px;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.dropdown_hint
{
	display: block;
	padding: 8px 12px;
	font-size: 0.85em;
	color: rgba(0,0,0,0.55);
}

.topbar_search
{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

#search_form
{
	width: 0;
	overflow: hidden;
	opacity: 0;
	transition: width 0.25s ease, opacity 0.2s ease;
	position: relative;
}

.topbar_search.is_open #search_form
{
	width: min(45vw, 280px);
	opacity: 1;
	overflow: visible;
}

#search_form input[type="search"]
{
	width: 100%;
	height: 36px;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 18px;
	padding: 0 14px;
	font-size: 0.95em;
	margin-left: 8px;
}

#search_form input[type="search"]:focus,
#search_form input[type="search"]:focus-visible
{
	outline: none;
	box-shadow: none;
	border-color: rgba(0,0,0,0.28);
}

#search_autocomplete
{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 320px;
	max-height: 360px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	box-shadow: 0 10px 22px rgba(0,0,0,0.16);
	display: none;
	z-index: 530;
}

#search_autocomplete.is_open
{
	display: block;
}

.search_autocomplete_list
{
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

.search_autocomplete_list li
{
	margin: 0;
	padding: 0;
}

.search_autocomplete_list li a
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	color: var(--color-dark);
	text-decoration: none;
}

.search_autocomplete_list li a:hover
{
	background: rgba(0,0,0,0.06);
}

.search_autocomplete_list li a.is_active
{
	background: rgba(0,0,0,0.08);
}

.search_autocomplete_list li img,
.search_autocomplete_image_placeholder
{
	width: 42px;
	height: 42px;
	border-radius: 6px;
	object-fit: cover;
	background: rgba(0,0,0,0.06);
	flex-shrink: 0;
}

.search_autocomplete_list li span
{
	display: block;
	font-size: 0.92em;
	line-height: 1.2em;
}

#search_toggle:focus,
#search_toggle:focus-visible
{
	outline: none;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

#cart_badge
{
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 999px;
	background: #b30000;
	color: #fff;
	font-size: 0.78em;
	line-height: 21px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0.7);
	opacity: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

#cart_badge.is_visible
{
	transform: scale(1);
	opacity: 1;
}

#cart_drawer
{
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: min(96vw, 580px);
	background: #fff;
	box-shadow: -12px 0 24px rgba(0,0,0,0.22);
	transform: translateX(105%);
	transition: transform 0.28s ease;
	z-index: 900;
	display: flex;
	flex-direction: column;
}

body.cart_open #cart_drawer
{
	transform: translateX(0);
}

#cart_overlay
{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s ease;
	z-index: 880;
}

#cart_overlay.is_open
{
	opacity: 1;
	pointer-events: all;
}

.cart_drawer_headline
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 16px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.cart_drawer_headline h3
{
	margin: 0;
	font-size: 1.05em;
	letter-spacing: 0.12em;
}

#cart_close
{
	border: none;
	background: transparent;
	color: var(--color-dark);
	font-size: 18px;
	cursor: pointer;
}

.cart_drawer_content
{
	padding: 22px 16px;
	overflow-y: auto;
}

.cart_list
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cart_item
{
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 2px 0 14px 0;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.cart_item_media
{
	width: 84px;
	height: 84px;
}

.cart_item_image,
.cart_item_image_placeholder
{
	width: 84px;
	height: 84px;
	border-radius: 6px;
	object-fit: cover;
	background: rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0,0,0,0.18);
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.cart_item_image_placeholder
{
	color: rgba(0,0,0,0.45);
}

.cart_item_title
{
	margin: 0;
	font-size: 1.14em;
	line-height: 1.28em;
	font-weight: 600;
}

.cart_item_meta
{
	margin: 6px 0 0 0;
	font-size: 0.96em;
	line-height: 1.28em;
	color: rgba(0,0,0,0.65);
}

.cart_item_price
{
	margin: 8px 0 0 0;
	font-size: 1.02em;
	color: rgba(0,0,0,0.75);
}

.cart_item_controls
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.cart_control_btn
{
	width: 30px;
	height: 30px;
	border: 1px solid rgba(0,0,0,0.22);
	background: #fff;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.cart_control_btn:hover
{
	background: rgba(0,0,0,0.04);
}

.cart_control_btn:disabled
{
	opacity: 0.45;
	cursor: not-allowed;
}

.cart_control_btn.is_danger
{
	border-color: rgba(140,0,0,0.28);
}

.cart_control_btn.is_danger:hover
{
	background: rgba(140,0,0,0.08);
}

.cart_item_sum
{
	font-size: 1.08em;
	font-weight: 600;
	white-space: nowrap;
	padding-top: 0;
	grid-column: 2;
	justify-self: end;
	margin-top: -2px;
}

.cart_totals
{
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(0,0,0,0.14);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cart_shipping_free_hint
{
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid #4d8fd1;
	border-radius: 6px;
	background: #e9f4ff;
	color: #2e6ea8;
	font-size: 0.96em;
	line-height: 1.35;
}

.cart_total_row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.02em;
}

.cart_total_row.is_total
{
	font-size: 1.16em;
	font-weight: 700;
}

.cart_total_row.is_hint
{
	font-size: 1.02em;
	opacity: 1;
}

.cart_drawer_checkout
{
	margin-top: 14px;
}

.cart_checkout_link,
.cart_checkout_link:link,
.cart_checkout_link:visited
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 12px 20px;
	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;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}

.cart_checkout_link::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;
}

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

.cart_checkout_link:hover,
.cart_checkout_link:focus
{
	background: var(--color-dark);
	color: var(--color-lighter);
	transform: translateY(-2px);
	text-decoration: none;
}

.cart_drawer_instant_checkout
{
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: 10px;
}

.instant_checkout_link,
.instant_checkout_link:link,
.instant_checkout_link:visited
{
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 10px;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid var(--checkout-border, rgba(0,0,0,0.2));
	background: var(--checkout-bg, #f1f1f1);
	color: var(--checkout-color, var(--color-dark));
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.instant_checkout_link:hover,
.instant_checkout_link:focus
{
	filter: brightness(0.96);
	transform: translateY(-1px);
	text-decoration: none;
}

/*******************************************************************
	SHOP CHECKOUT FLOW
*******************************************************************/

.block_shop_checkout_flow
{
	margin: 0 0 30px 0;
}

.wrap_shop_checkout_flow
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	padding: 0 60px;
	box-sizing: border-box;
}

.shop_checkout_flow_left,
.shop_checkout_flow_right
{
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	padding: 24px 60px;
	box-sizing: border-box;
}

.shop_checkout_flow_right .shop_checkout_summary
{
	position: sticky;
	top: 24px;
}

.shop_checkout_summary h1,
.shop_checkout_summary h2,
.shop_checkout_summary h3,
.shop_checkout_summary h4
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	margin: 0 0 16px 0;
}

.shop_checkout_summary h1::before,
.shop_checkout_summary h2::before,
.shop_checkout_summary h3::before,
.shop_checkout_summary h4::before,
.shop_checkout_summary h1::after,
.shop_checkout_summary h2::after,
.shop_checkout_summary h3::after,
.shop_checkout_summary h4::after
{
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid rgba(0,0,0,0.16);
}

.shop_checkout_flow_headline
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	margin: 12px 0 26px 0;
	font-size: 1.1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.shop_checkout_flow_headline::before,
.shop_checkout_flow_headline::after
{
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid rgba(0,0,0,0.16);
}

.shop_checkout_flow_headline_regular
{
	margin-top: 0;
}

.shop_checkout_address_headline
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	margin: 26px 0 22px 0;
	font-size: 1.1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.shop_checkout_address_headline::before,
.shop_checkout_address_headline::after
{
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid rgba(0,0,0,0.16);
}

.shop_checkout_flow_form_placeholder
{
	color: rgba(0,0,0,0.72);
	margin-bottom: 16px;
}

.shop_checkout_instant_checkout
{
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 18px 0 18px 0;
}

.shop_checkout_login_probe
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shop_checkout_label
{
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shop_checkout_input
{
	display: block;
	width: 100%;
	height: 42px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.2);
	background: #fff;
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1rem;
	color: var(--color-dark);
}

.shop_checkout_input:focus,
.shop_checkout_input:focus-visible
{
	outline: none;
	border-color: rgba(0,0,0,0.2);
}

.shop_checkout_input.is_invalid,
.shop_checkout_input.is_invalid:focus,
.shop_checkout_input.is_invalid:focus-visible
{
	border-color: #c94b4b;
	box-shadow: 0 0 0 1px rgba(201,75,75,0.15);
}

.shop_checkout_input_wrap
{
	position: relative;
}

.shop_checkout_input_wrap .shop_checkout_input
{
	padding-right: 36px;
}

.shop_checkout_input_loader
{
	display: none;
	position: absolute;
	right: 11px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid rgba(0,0,0,0.18);
	border-top-color: rgba(0,0,0,0.6);
	border-radius: 50%;
	animation: shop_checkout_spin 0.7s linear infinite;
}

.shop_checkout_input_wrap.is_loading .shop_checkout_input_loader
{
	display: block;
}

@keyframes shop_checkout_spin
{
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.shop_checkout_login_state
{
	min-height: 1.2em;
	margin: 0;
	font-size: 0.92rem;
	color: rgba(0,0,0,0.68);
}

.shop_checkout_password_wrap
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shop_checkout_password_wrap[hidden]
{
	display: none !important;
}

.shop_checkout_password_row
{
	display: flex;
	align-items: stretch;
}

.shop_checkout_password_input
{
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.shop_checkout_password_toggle
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	border: 1px solid rgba(0,0,0,0.2);
	border-left: none;
	border-right: 1px solid rgba(0,0,0,0.2);
	background: transparent;
	color: rgba(0,0,0,0.62);
	cursor: pointer;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
}

.shop_checkout_password_toggle:hover
{
	color: rgba(0,0,0,0.86);
}

.shop_checkout_password_toggle.is_active
{
	color: var(--color-dark);
}

.shop_checkout_password_submit
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 0 16px;
	border: 1px solid rgba(0,0,0,0.2);
	border-left: none;
	background: var(--color-dark);
	color: var(--color-lighter);
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 0.86rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	flex: 0 0 auto;
}

.shop_checkout_password_submit:hover
{
	filter: brightness(0.96);
}

.shop_checkout_delivery
{
	margin-top: 16px;
}

.shop_checkout_delivery_headline
{
	margin: 0 0 10px 0;
	font-size: 1.02rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--font-text-bold), Arial, sans-serif;
}

.shop_checkout_delivery_toggle
{
	display: flex;
	align-items: stretch;
	width: 100%;
	position: relative;
	border: 1px solid rgba(0,0,0,0.18);
	background: rgba(255,255,255,0.75);
	overflow: hidden;
}

.shop_checkout_delivery_toggle_indicator
{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(100% / var(--toggle-count, 1));
	transform: translateX(calc(100% * var(--toggle-index, 0)));
	background: var(--color-dark);
	transition: transform 0.22s ease;
	z-index: 0;
}

.shop_checkout_delivery_option
{
	position: relative;
	margin: 0;
	flex: 1 1 0;
	z-index: 1;
}

.shop_checkout_delivery_option input
{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.shop_checkout_delivery_option span
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	padding: 0 14px;
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1rem;
	color: rgba(0,0,0,0.7);
	cursor: pointer;
	transition: color 0.2s ease;
}

.shop_checkout_delivery_option + .shop_checkout_delivery_option span
{
	border-left: 1px solid rgba(0,0,0,0.18);
}

.shop_checkout_delivery_option input:checked + span
{
	color: var(--color-lighter);
}

.shop_checkout_name_row
{
	margin-top: 12px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.shop_checkout_name_field
{
	flex: 1 1 0;
}

.shop_checkout_house_field
{
	flex: 0 0 120px;
}

.shop_checkout_zip_field
{
	flex: 0 0 180px;
}

.shop_checkout_address_fields
{
	margin-top: 10px;
}

.shop_checkout_checkbox_row
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 6px 0;
	cursor: pointer;
}

.shop_checkout_checkbox_row input[type="checkbox"]
{
	width: 16px;
	height: 16px;
	margin: 0;
}

.shop_checkout_checkbox_row.is_invalid
{
	color: #b42318;
}

.shop_checkout_checkbox_row.is_invalid input[type="checkbox"]
{
	outline: none;
}

.shop_checkout_billing_fields
{
	margin-top: 10px;
}

.shop_checkout_shipping_options
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.shop_checkout_payment_options
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.shop_checkout_review_wrap
{
	margin-top: 18px;
}

.shop_checkout_confirm_stage[hidden]
{
	display: none !important;
}

.shop_checkout_confirm_group
{
	margin: 0 0 10px 0;
}

.shop_checkout_confirm_address_grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 6px;
}

.shop_checkout_confirm_address_col
{
	min-width: 0;
}

.shop_checkout_confirm_address_title
{
	margin: 0 0 8px 0;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: var(--font-text-bold), Arial, sans-serif;
}

.shop_checkout_confirm_intro
{
	margin: 0 0 14px 0;
	font-size: 0.96rem;
	color: rgba(0,0,0,0.74);
}

.shop_checkout_confirm_value
{
	margin: 0 0 6px 0;
	font-size: 0.98rem;
	color: rgba(0,0,0,0.82);
}

.shop_checkout_confirm_actions
{
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.shop_checkout_confirm_back,
.shop_checkout_confirm_submit
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	border: 1px solid rgba(0,0,0,0.2);
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.shop_checkout_confirm_back
{
	background: #f3f3f3;
	color: rgba(0,0,0,0.8);
}

.shop_checkout_confirm_submit
{
	background: var(--color-dark);
	color: var(--color-lighter);
}

.shop_checkout_confirm_back:hover,
.shop_checkout_confirm_submit:hover
{
	filter: brightness(0.96);
}

.shop_checkout_confirm_legal
{
	margin-top: 0;
	padding-top: 0;
}

.shop_checkout_confirm_legal .shop_checkout_checkbox_row
{
	display: flex;
	margin: 6px 0;
}

.shop_checkout_success
{
	margin: 18px 0 0 0;
	padding: 18px 20px;
	border: 1px solid rgba(0,0,0,0.14);
	background: rgba(255,255,255,0.9);
}

.shop_checkout_success_text
{
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(0,0,0,0.82);
}

.shop_checkout_success_order
{
	margin: 12px 0 0 0;
	font-family: var(--font-text-bold), Arial, sans-serif;
	font-size: 0.96rem;
	color: rgba(0,0,0,0.9);
}

.shop_checkout_finalize_button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 12px;
	border: 1px solid rgba(0,0,0,0.2);
	background: var(--color-dark);
	color: var(--color-lighter);
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.shop_checkout_confirm_actions .shop_checkout_confirm_back,
.shop_checkout_confirm_actions .shop_checkout_finalize_button
{
	flex: 1 1 50%;
}

.shop_checkout_confirm_actions .shop_checkout_finalize_button
{
	margin-top: 0;
}

.shop_checkout_finalize_button.is_invalid
{
	border-color: #c94b4b;
	box-shadow: 0 0 0 1px rgba(201,75,75,0.15);
}

.shop_checkout_review_button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	border: 1px solid rgba(0,0,0,0.2);
	background: var(--color-dark);
	color: var(--color-lighter);
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.shop_checkout_review_button:hover
{
	filter: brightness(0.96);
}

.shop_checkout_shipping_option_row
{
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,0.16);
	background: rgba(255,255,255,0.72);
	cursor: pointer;
}

.shop_checkout_shipping_option_row input[type="radio"]
{
	margin: 0;
}

.shop_checkout_shipping_option_label_wrap
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.shop_checkout_shipping_option_label
{
	font-family: var(--font-text-bold), Arial, sans-serif;
	font-size: 0.98rem;
	color: var(--color-dark);
}

.shop_checkout_shipping_option_description,
.shop_checkout_shipping_option_free_from
{
	font-size: 0.86rem;
	color: rgba(0,0,0,0.66);
}

.shop_checkout_shipping_option_price
{
	font-family: var(--font-text-bold), Arial, sans-serif;
	font-size: 0.96rem;
	color: var(--color-dark);
}

.shop_checkout_pickup_info
{
	display: none;
	margin: 0 0 12px 0;
	padding: 12px 14px;
	border: 1px solid rgba(0,0,0,0.18);
	background: rgba(255,255,255,0.72);
	font-family: var(--font-text), Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	color: rgba(0,0,0,0.82);
}

.shop_checkout_delivery.is_pickup .shop_checkout_pickup_info
{
	display: block;
}

@media (max-width: 760px)
{
	.shop_checkout_name_row
	{
		flex-direction: column;
	}

	.shop_checkout_confirm_address_grid
	{
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.shop_checkout_house_field,
	.shop_checkout_zip_field
	{
		flex: 1 1 auto;
	}
}

.checkout_cart_list
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.checkout_cart_item
{
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.checkout_cart_item_media
{
	width: 64px;
	height: 64px;
	background: rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkout_cart_item_image
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.checkout_cart_item_title
{
	margin: 0;
	font-size: 1.02em;
	line-height: 1.2em;
	font-family: var(--font-text-bold), Arial, sans-serif;
}

.checkout_cart_item_meta
{
	margin: 6px 0 0 0;
	font-size: 0.95em;
	line-height: 1.25em;
	color: rgba(0,0,0,0.65);
}

.checkout_cart_item_price
{
	margin: 7px 0 0 0;
	font-size: 0.98em;
	color: rgba(0,0,0,0.76);
}

.checkout_cart_item_sum
{
	font-size: 1em;
	font-family: var(--font-text-bold), Arial, sans-serif;
	white-space: nowrap;
}

.checkout_cart_totals
{
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(0,0,0,0.14);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.checkout_shipping_free_hint
{
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid #4d8fd1;
	border-radius: 6px;
	background: #e9f4ff;
	color: #2e6ea8;
	font-size: 0.96em;
	line-height: 1.35;
}

.checkout_cart_total_row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.02em;
}

.checkout_cart_total_row.is_total
{
	font-size: 1.14em;
	font-family: var(--font-text-bold), Arial, sans-serif;
}

.checkout_cart_total_row.is_hint
{
	font-size: 1.02em;
	opacity: 1;
}

/* MOBILE */

@media screen and (max-width: 767px)
{
	#topbar
	{
		left: 60px;
		padding: 10px 14px;
	}

	#topbar_right
	{
		gap: 8px;
	}

	.wrap_shop_checkout_flow
	{
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 0 20px;
	}

	.shop_checkout_flow_right .shop_checkout_summary
	{
		position: static;
		top: auto;
	}
	
	#topbar_left
	{
		display: none;
	}

	.topbar_icon_btn
	{
		height: 34px;
		min-width: 34px;
		padding: 0 8px;
	}

	.topbar_search.is_open #search_form
	{
		width: min(55vw, 220px);
	}
}

.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: 60px;
	z-index: 999;
}

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

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

.item_floating-button,
.item_floating-button a,
.item_floating-button a:link,
.item_floating-button a:visited
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 16px 36px;

	background: var(--color-dark);
	color: var(--color-lighter);
	text-decoration: none;
	list-style: none;
	margin: 0;

	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::before,
.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:hover::before,
.item_floating-button a:hover::before
{
	left: 130%;
}

.item_floating-button:hover,
.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
	{
		width: 100%;
	}

	.item_floating-button,
	.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:hover,
	.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;
	top: 0;
	right: 0;
	bottom: 0;
	left: clamp(260px, 22vw, 360px); /* sidebar breite */
	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); }
}

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

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

.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_background
	{
		left: 60px; /* mobile sidebar breite */
	}

	#popup_container
	{
		width: 85%;
	}

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

/*******************************************************************
	BLOCK: PRODUCT
*******************************************************************/

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

.wrap_product
{
	padding: 0;
	margin: 0;
}

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

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

.item_product
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	position: relative;
}

.product_badges
{
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.product_badge
{
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	white-space: nowrap;
}

.product_badge_countdown
{
	background: #1f2937;
	color: #fff;
	font-weight: 700;
}

.product_badge_countdown.is_ready
{
	background: #065f46;
}

/* BILD */

.product_image_wrap
{
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--color-light);
	position: relative;
	cursor: pointer;
}

.product_image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border: none;
	margin: 0;
	padding: 0;

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

.product_image.product_image_active
{
	opacity: 1;
}

.item_product:hover .product_image.product_image_active
{
	transform: scale(1.06);
}

/* OVERLAY LINKS */

.product_overlay_link,
.product_fancybox_link
{
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
}

.product_overlay_link
{
	display: block;
}

.product_fancybox_link.product_fancybox_active
{
	display: block;
}

/* INHALT */

.item_product .product_headline
{
	font-family: var(--font-hero);
	font-size: 1.4rem;
	letter-spacing: 0.2em;
	text-transform: none;
	color: var(--color-dark);
	margin: 16px 0 4px 0;
	line-height: 1.3;
	text-align: center;
}

.item_product .product_content
{
	font-size: 0.85rem;
	color: var(--color-dark);
	opacity: 0.55;
	margin: 4px 0 0 0;
	line-height: 1.4;
}

.item_product .product_content p
{
	text-align: left !important;
}

.item_product p
{
	font-size: 0.85rem;
	color: var(--color-dark);
	opacity: 0.55;
	margin: 0 0 6px 0;
	line-height: 1.4;
	text-align: left !important;
}

/* PREIS */

.item_product h2
{
	font-family: var(--font-text);
	font-size: 1rem;
	letter-spacing: 0.1em;
	color: var(--color-dark);
	margin: 6px 0 0 0;
	text-transform: none;
	text-align: right !important;
}

/* HOVER EFFEKT AUF TITEL */

.item_product:hover .product_headline
{
	opacity: 0.6;
	transition: opacity 0.25s ease;
}

.product_dots
{
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	pointer-events: none;
	min-height: 13px; /* Höhe eines Dots + margin */
}

.product_dot
{
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	transition: background 0.3s ease;
}

.product_dot.active
{
	background: var(--color-dark);
}

.product_item_link,
.product_item_link:link,
.product_item_link:visited
{
	text-decoration: none !important;
	color: inherit !important;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.product_item_link:hover .product_headline
{
	opacity: 0.6;
}

.product_item_link:visited
{
	color: inherit;
}

/* TABLET QUER / KLEINER DESKTOP */
@media screen and (min-width: 768px) and (max-width: 1199px)
{
	.list_product
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

/* IPAD HOCH */
@media screen and (min-width: 768px) and (max-width: 1023px)
{
	.block_product
	{
		padding: 60px 30px;
	}

	.list_product
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

/* MOBILE */
@media screen and (max-width: 767px)
{
	.block_product
	{
		padding: 40px 20px;
	}

	.list_product
	{
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px)
{
	/* LAYOUT */
	.layout
	{
		grid-template-columns: clamp(60px, 15vw, 220px) 1fr;
	}

	.sidebar
	{
		padding-top: 8vh;
		padding-left: 15px;
		padding-right: 15px;
	}

	.logo
	{
		background-size: 80px;
		width: 80px;
		height: 80px;
		margin-bottom: 30px;
	}

	.link_logo:link
	{
		width: 80px;
		height: 80px;
	}

	#list_menu a
	{
		font-size: 13px;
		letter-spacing: 0.15em;
	}

	#list_menu li
	{
		margin-bottom: 12px;
	}

	/* PADDING ALLE BLÖCKE */
	.block_product,
	.wrap_feature,
	.wrap_image-feature,
	.block_gallery,
	.block_quote,
	.block_youtube,
	.block_textimage,
	.block_text .wrap_text,
	.block_contact
	{
		padding-left: 30px;
		padding-right: 30px;
	}

	/* GRIDS */
	.list_product
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.list_feature
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.list_image-feature
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.list_gallery
	{
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	/* TEXTIMAGE */
	.block_textimage
	{
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.wrap_image_left,
	.wrap_image_right
	{
		min-height: 280px;
	}
}
/*******************************************************************
	4. CHATBOX 
*******************************************************************/

#icon_chat
{}

#container_chat
{}

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