/* #region ======== FONTS ============*/


@font-face {
	font-family: "Archivo Narrow";
	src: url("assets/fonts/in_use/ArchivoNarrow-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-ExtraLight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-ExtraLightItalic.ttf") format("truetype");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-LightItalic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-SemiBoldItalic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kulim Park";
	src: url("assets/fonts/in_use/KulimPark-BoldItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Kumbh Sans";
	src: url("assets/fonts/in_use/KumbhSans-VariableFont_YOPQ,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "League Gothic";
	src: url("assets/fonts/in_use/LeagueGothic-Regular-VariableFont_wdth.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-stretch: 75% 125%;
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans";
	src: url("assets/fonts/in_use/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-stretch: 75% 125%;
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans";
	src: url("assets/fonts/in_use/NotoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-stretch: 75% 125%;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("assets/fonts/in_use/Oswald-VariableFont_wght.ttf") format("truetype");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Yellowtail";
	src: url("assets/fonts/in_use/Yellowtail-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Alkatra";
	src: url("assets/fonts/in_use/Alkatra-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Story Script";
	src: url("assets/fonts/in_use/StoryScript-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* #endregion ============= FONTS ==================*/
/*==================================================*/
/* #region =========== Global Elements =============*/
/* .content-protected,
.content-protected * {
  user-select: none;
  -webkit-user-select: none;
}

.content-protected input,
.content-protected textarea,
.content-protected select {
  user-select: text;
  -webkit-user-select: text;
} */

html {
	height: 100svh;
	overflow-x: clip;
	container-type: scroll-state;
	container-name: page-scroll;
	scroll-snap-type: y proximity;
}

body {
	min-height: 100svh;
	margin: 0;
	width: 100%;
	overflow-x: clip;
	/* container-type: scroll-state; */
	/* container-name: page-scroll; */
}

body.page-body {
	height: auto;
}

* {
	box-sizing: border-box;
	padding: 0;
	/* outline: 0.25px dotted lightgreen; */
}


span {
	max-width: max-content;
	min-width: min-content;
}



select,
input,
fieldset,
textarea,
button {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	cursor: pointer;
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px 1ch 0 1ch;
}

input[type="date"],
input[type="datetime"] {
	padding: 3px 1ch 0 1ch;
}


textarea {
	padding: .5em 2ch;
}

hgroup,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

/* .float-right { */
/* 	float:right; */
/* } */

/* #endregion */
/*==================================================*/
/* #region ============= Dev Only Helper =================== */


.block {
	display: block;
}

section {
	outline: 0.25px dotted lightgreen;
}

@media (orientation:portrait) {
	body::before {
		content: "PORTRAIT ACTIVE";
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		background: yellow;
		color: black;
		opacity: 33%;
	}
}

@media (orientation:landscape) {
	body::before {
		content: "LANDSCAPE ACTIVE";
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		background: red;
		color: white;
	}
}

/* #endregion==============Helper ===============*/
/*==================================================*/
/* #region ========= Fonts & Colors  ============== */
/* #region ====== Font-Styles @media all ===== */
:root {

	/*font-styles*/
	/* #region Navbar  */
	--nav-btn-font: 600 clamp(13px, 1.3vw, 3vh)/clamp(13px, .8vw, 2.9vh) 'Noto Sans', sans-serif;

	/* #endregion */
	/* #region Navbar Menus (Options)*/
	--nav-btn-font: 600 clamp(13px, 1.3vw, 3vh)/clamp(13px, .8vw, 2.9vh) 'Noto Sans', sans-serif;
	--nav-option-font: 1.4vw/1.5vw 'Kulim Park', 'Sulphur Point', sans-serif;
	--sbarnav-option-font: 1.6vw/1.7vw 'Kulim Park', 'Sulphur Point', sans-serif;
	;
	/* #endregion Navbar Menus (Options)*/
	/*H1---Take Off---*/
	--hero-brand-font: expanded 1000 clamp(20px, 2.5vw, 38px)/clamp(22px, 2.5vw, 42px) 'League Gothic', 'Archivo Narrow', sans-serif;
	/*H1-Personal Surftraining*/
	--hero-title-font: condensed 500 clamp(11px, 2.2vw, 30px)/clamp(10px, 2vw, 28px) 'Kulim Park', 'Archivo Narrow', sans-serif;
	/*H1---Surf Lessons ... ---*/
	--hero-subtitle-font: expanded 1000 clamp(30px, 3.5vw, 50px)/clamp(30px, 3.2vw, 48px) 'League Gothic', 'Archivo Narrow', sans-serif;
	/*H1---Famara... ---*/
	--hero-location-font: 700 clamp(10px, 2vw, 30px)/clamp(10px, 1.4vw, 28px) 'Alkatra', sans-serif;
	/*P-Intro*/
	--trainer-advice-font: 400 clamp(18px, 1.4vw, 5vh)/clamp(18px, 1.4vw, 5vh) 'Noto Sans', 'Arial', sans-serif;
	--page-intro-font: 500 clamp(20px, 1.7vw, 4.5vh) / clamp(21px, 1.8vw, 4.5vh) 'Noto Sans', 'Arial', sans-serif;
	/*Description*/
	--page-main-description-font: 500 clamp(19px, 4.2vw, 2.5vh)/clamp(20px, 4vw, 3vh) 'Noto Sans', 'Arial', sans-serif;
	--main-description-font: 400 clamp(16px, 2vw, 60px)/clamp(18px, 2vw, 60pt) 'Noto Sans', 'Arial', sans-serif;
	/*Essentials*/
	--essentials-point-font: 400 clamp(18px, 1.4vw, 5vh)/clamp(20px, 1.5vw, 5.1vh) 'Noto Sans', 'Arial', sans-serif;
	/*H2-Sectiontitle*/
	--display-title-font: expanded 800 clamp(28px, 2em, 40px)/clamp(37px, 3em, 60px) 'League Gothic', 'Archivo Narrow', sans-serif;

	--included-title-font: 500 clamp(16px, 1.3vw, 20px)/clamp(14pt, 1.3vw, 20px) "Noto Sans", "Arial", sans-serif;

	/*Badge List Font*/
	--included-list-font: 600 clamp(16px, 1.3vw, 20px)/clamp(16px, 1.3vw, 20px) "Noto Sans", "Arial", sans-serif;
	--included-mini-font: 500 clamp(14px, 1.4vw, 24px) /clamp(12px, 1.2vw, 24px) "Noto Sans", "Arial", sans-serif;
	--predicate-list-font: 500 clamp(18px, 1.5vw, 24px)/clamp(18px, 1.5vw, 24px) "Noto Sans", "Arial", sans-serif;
	--predicate-slogan-font: small-caps 500 3vh/3vh 'Sulphur Point', "Arial", sans-serif;
	/*Price List*/
	--price-dt-font: 500 clamp(18px, 1.4vw, 28px)/clamp(20px, 1.8vw, 28px) "Noto Sans", "Arial", sans-serif;
	/*Prices Minidisplay*/
	--md-price-dt-font1: 600 clamp(15px, 1.4vw, 28px)/600 clamp(16px, 1.4vw, 28px) "Noto Sans", "Arial", sans-serif;
	--md-price-dt-font2: 600 clamp(18px, 1.8vw, 32px)/clamp(16px, 1.4vw 28px) "Noto Sans", "Arial", sans-serif;
	--md-price-data-font1: 600 clamp(18px, 1.5vw, 28px) "Noto Sans", "Arial", sans-serif;
	--md-price-data-font2: 600 clamp(20px, 1.8vw, 32px)/clamp(16px, 1.4vw, 28px) "Noto Sans", "Arial", sans-serif;
	/*H2/P-Card Font*/
	/*footer links (consent, legal...)*/
	--footer-link-font: 600 clamp(16px, 1.5vw, 20px)/1.5vw 'Sulphur Point', 'Times New Roman', serif;
	/**Context Links*/
	--context-link-font: 400 clamp(12px, 2vw, 2.3vh)/clamp(14px, 2vw, 2.3vh) 'Noto Sans', 'Times New Roman', serif;
	/*Slogan Area*/
	--compname-estd-font: 600 clamp(16px, 2vw, 1.8vh) / clamp(16px, 2vw, 1.8vh) 'Sulphur Point', 'Times New Roman', serif;
	/*Predicate Area*/
	--compname-alt-font: 600 clamp(15px, 2vw, 2vh)/clamp(15px, 2vw, 2vh) 'Sulphur Point', 'Times New Roman', serif;
	--comp-attribute-font: 2.3vh/2.9vh 'Noto Sans', 'Times New Roman', serif;

	/*Registered Claim*/
	--register-claim-font: clamp(12px, 1.8vw, 2vh)/clamp(10px, 1.8vw, 2vh) 'Noto Sans', Arial, sans-serif;
	--reg-name-font: clamp(12px, 1.8vw, 2vh)/clamp(10px, 1.8vw, 2vh)'Sulphur Point', 'Times New Roman', serif;
	--licence-label-font: clamp(12px, 1.8vw, 2vh)/clamp(12px, 1.8vw, 2vh) 'Sulphur Point', 'Times New Roman', serif;
	--licencenr-font: clamp(10px, 1.8vw, 2vh)/clamp(12px, 1.8vw, 2vh) 'Sulphur Point', 'Times New Roman', serif;
	--address-compname-font: clamp(16px, 2.1vw, 21px)/clamp(19px, 2.2vw, 23px) 'Sulphur Point', 'Times New Roman', serif;
	--address-location-font: clamp(15px, 2vw, 20px) / clamp(17px, 2.1vw, 22px) 'Sulphur Point', 'Times New Roman', serif;
	--address-phone-font: 600 1.6vw/1.6vw 'Sulphur Point', 'Times New Roman', serif;
	--address-email-font: 600 1.7vw/1.7vw 'Sulphur Point', 'Times New Roman', serif;
	--sb-address-compname-font: 2.75vw/2.75vw 'Sulphur Point', 'Times New Roman', serif;
	--sb-address-phone-font: 3vw/3vw 'Sulphur Point', 'Times New Roman', serif;
	--sb-address-email-font: 3vw/3vw 'Sulphur Point', 'Times New Roman', serif;
	--copyright-font: clamp(16px, 2vw, 2vh)/clamp(16px, 2vw, 2vh)'Sulphur Point', Arial, sans-serif;

	--disclaimer-address-font: clamp(18px, 2vw, 2vh)/clamp(18px, 2vw, 2vh) 'Sulphur Point', 'Times New Roman', serif;
	/*Forms*/
	--h2-form-title-font: expanded 900 clamp(20px, 6vw, 50px)/clamp(18px, 4vw, 30px) 'League Gothic', 'Archivo Narrow', sans-serif;
	--dialog-hdr-font: clamp(14px, 4vw, 18px)/clamp(14px, 4vw, 18px) 'Sulphur Point', 'Times New Roman', serif;
	--form-label-font: normal clamp(18px, 1.5vw, 18px)/clamp(14px, 1.3vw, 15px) 'Sulphur Point', 'Times New Roman', serif;
	--form-fields-font: clamp(18px, 1.2vw, 3vh) / clamp(14px, 1.2vw, 3vh) 'Sulphur Point', 'Times New Roman', serif;
	--form-optIn-font: clamp(10px, 2.1vw, 2vh) / clamp(10px, 2.4vw, 2.5vh) 'Sulphur Point', 'Times New Roman', serif;
	--form-GDPRlink-font: 2vh/2vh 'Sulphur Point', 'Times New Roman', serif;

	--submit-btn-font: 600 1.4vw/1.4vw "Noto Sans", "Arial", sans-serif;
	--texarea-font: normal 15pt/16pt 'Arial', sans-serif;
	--select-option-font: 2.4vh/2.4vh 'Sulphur Point', 'Times New Roman', serif;
	/*Tooltips*/
	--ttp-font: 400 14px/14px 'Times New Roman', serif;
	/*Breadcrumbs*/
	--breadcrumbs-font: bold clamp(18px, 3vw, 24px) /clamp(18px, 3vw, 24px) 'Sulphur Point', 'Times New Roman', serif;


	--main-width-sets-margin: clamp(680px, 90vw, 100vw);
	--shortfaq-hint-font: 400 clamp(18px, 1.4vw, 5vh)/clamp(18px, 1.4vw, 5vh) 'Noto Sans', 'Arial', sans-serif;
	--footer-usps-font: 500 clamp(12px, 1vw, 10px) / clamp(12px, 1.4vw, 38px) "Noto Sans", "Arial", sans-serif;


	/*
		--nav-btn-font: 600 2vh/2vh 'Noto Sans', sans-serif;

		--nav-option-font: 5vw/5vw 'Kulim Park', 'Sulphur Point', sans-serif;
		--sbarnav-option-font: 5vw/5vw 'Kulim Park', 'Sulphur Point', sans-serif;

		--flag-width-default: 60%;

		--hero-brand-font: expanded 1000 20vw/10vw 'League Gothic', 'Archivo Narrow', sans-serif;
		--hero-title-font: condensed 500 2.75vh/2.7vh 'Kulim Park','Archivo Narrow', sans-serif;
		--hero-subtitle-font: expanded 1000 4vh/3.95vh'League Gothic', 'Archivo Narrow', sans-serif;
		--hero-location-font: 700 3vh/3vh 'Alkatra', sans-serif;

		--trainer-advice-font: 500 4vw/5vw 'Noto Sans', 'Arial', sans-serif;
		--page-intro-font: 500 5vw/5.3vw 'Noto Sans', 'Arial', sans-serif;

		--page-main-description-font: 500 clamp(18px, 4.2vw, 4vh)/clamp(18px, 4vw, 3.5vh) 'Noto Sans', 'Arial', sans-serif;
		--main-description-font: 400 4.2vw, 4/4.6vw 'Noto Sans', 'Arial', sans-serif;
		--description-predicate-font: 600 3.5vw/3.7vw 'Noto Sans', 'Arial', sans-serif;

		--display-title-font: expanded 800 clamp(20pt, 9vw, 30pt)/clamp(40pt, 8vw, 20pt) 'League Gothic', 'Archivo Narrow', sans-serif;

		--included-title-font: 500 2.5vw/5vw 'Kulim Park', 'Sulphur Point', sans-serif;
		--sbarnav-option-font: 5vw/5vw 'Kulim Park', 'Sulphur Point', sans-serif;

		--flag-width-default: 3vh/2.3vh "Noto Sans", "Arial", sans-serif;
		
		--included-list-font: 500 4.5vw/5vw "Noto Sans", "Arial", sans-serif;
		--included-mini-font: 500 3vw/3vw "Noto Sans", "Arial", sans-serif;
		--predicate-list-font: 500 4vw/5vw "Noto Sans", "Arial", sans-serif;
		--predicate-slogan-font: small-caps 500 3vh/3vh 'Sulphur Point', "Arial", sans-serif;

		--price-data-font1: 600 4vw/4vw "Noto Sans", "Arial", sans-serif;
		--price-data-font2: 600 6vw/6vw "Noto Sans", "Arial", sans-serif;

		--md-price-dt-font1: 500 3.3vw/3.3vw "Noto Sans", "Arial", sans-serif;
		--md-price-dt-font2: 500 4vw/3.3vw "Noto Sans", "Arial", sans-serif;
		--md-price-data-font1: 600 3.2vw/4.2vw "Noto Sans", "Arial", sans-serif;
		--md-price-data-font2: 600 4vw/4vw "Noto Sans", "Arial", sans-serif;

		--footer-link-font: 4.3vw/4.1vw 'Sulphur Point', 'Times New Roman', serif;
		--context-link-font: 2.3vh/2.9vh 'Noto Sans', 'Times New Roman', serif;

		--compname-estd-font: 2vh/2vh'Sulphur Point', 'Times New Roman', serif;
		--compname-alt-font:clamp(10px 2vw, 3vh;) / clamp(10px 2vw, 3vh;) 'Sulphur Point', 'Times New Roman', serif;
		--comp-attribute-font:clamp(10px 2vw, 3vh;) / clamp(10px 2vw, 3vh;) 'Noto Sans', 'Times New Roman', serif;

		--register-claim-font:2.1vh/2.1vh 'Noto Sans', Arial, sans-serif;
		--reg-name-font:2.05vh/2.05vh'Sulphur Point', 'Times New Roman', serif;
		--licence-label-font:2.05vh/2.05vh 'Sulphur Point', 'Times New Roman', serif;
		--licencenr-font:2vh/2vh 'Sulphur Point', 'Times New Roman', serif;

		--address-compname-font:2.75vh/2.75vh 'Sulphur Point', 'Times New Roman', serif;
		--address-location-font:2.7vh/2.7vh 'Sulphur Point', 'Times New Roman', serif;
		--address-phone-font:6vw/6vw 'Sulphur Point', 'Times New Roman', serif;
		--address-email-font:6vw/6vw 'Sulphur Point', 'Times New Roman', serif;
		--sb-address-compname-font:2.75vw/2.75vw 'Sulphur Point', 'Times New Roman', serif;
		--sb-address-phone-font:3vw/3vw 'Sulphur Point', 'Times New Roman', serif;
		--sb-address-email-font:3vw/3vw 'Sulphur Point', 'Times New Roman', serif;

		--copyright-font:2.5vh/2.3vh 'Sulphur Point', Arial, sans-serif;

		--h2-form-title-font: expanded 900 5vh/5.5vw 'League Gothic', 'Archivo Narrow', sans-serif;
		--dialog-hdr-font: 2.5vh/3vh 'Sulphur Point', 'Times New Roman', serif;
		--form-label-font: normal 3vh/2.5vh 'Sulphur Point', 'Times New Roman', serif;
		--form-fields-font: 5vw/5vw 'Sulphur Point', 'Times New Roman', serif;
		--form-optIn-font: 5pt/10pt 'Sulphur Point', 'Times New Roman', serif;
		--form-GDPRlink-font: 6pt/10pt 'Sulphur Point', 'Times New Roman', serif;
		--texarea-font: normal 15px/16px 'Arial', sans-serif;
		--select-option-font: 2.4vh/2.4vh 'Sulphur Point', 'Times New Roman', serif;

		--ttp-font: 400 14pt/14pt 'Times New Roman', serif;
		--breadcrumbs-font: bold 6vw/6vw 'Sulphur Point', 'Times New Roman', serif;*/

	/*colors*/


	--nav-option-color: #dbc8b5;
	--nav-option-hover-color: #dbc8b5;
	--nav-option-vstd-color: #dbc8b5;
	--sidebar-background-vert: #dbc8b5;

	--nav-btn-active-color: rgba(17, 48, 50, .70);
	--nav-btn-color: rgba(17, 48, 50, .70);
	--nav-btn-hover-color: #3fb4ba;
	--nav-option-active-color: #9b9b8c;

	--menu-btn-color: rgba(17, 48, 50, .65);

	--hero-brand-color: #504e4e;
	--hero-title-color: #504e4e;
	--hero-subtitle-color: rgba(17, 48, 50, .65);
	--hero-location-color: rgba(248, 189, 64, 1);

	--trainer-adivce-color: rgba(17, 48, 50, .85);

	--h2-sectiontitle-color-1: rgba(17, 48, 50, .65);
	--h2-sectiontitle-color-2: rgba(248, 189, 64, 1)
		/*#f8bd40*/
	;

	--footer-links-color: #292924a1;
	--footer-links-vstd-color: #328ec4;
	--footer-links-hover-color: #8b8484;

	--compname-estd-color: #504e4e;
	--compname-alt-color: #504e4e;
	--comp-attribute-color: #1d1c1c;

	--register-claim-color: #000000;
	--register-name-color: #000000;
	--licencenr-color: #000000;

	--phone-email-color: #8b8484;
	--phone-email-color-hov: #b0aeae;

	--copyright-color: #504e4e;
	--floater-color: #312e2e;
	--floater-cm-color: #312e2ea2;

	--form-fields-color-alpha: rgba(235, 205, 140, .8);
	--form-fields-color2: rgba(235, 205, 140);
	--form-fields-outline: 1pt solid rgb(243, 220, 174);
	--from-fields-shadow: inset 0 1px 2.5px .5px rgba(248, 189, 64, 0.50);
	--from-fields-shadow2: inset .5px 0 1pt .3pt rgba(248, 189, 64, 0.50);

	--submit-btn-color: rgb(252, 212, 127);

	--breadcrumbs-index-color: black;
	--breadcrumbs-pages-color: gray;

	--shadow-forYellowTitle: .3px 0px 2px .5px rgba(17, 48, 50, .5);
	/* #endregion ======= Font-Styles ==================*/
	/*==================================================*/
	/* #region ==== Background-Colors @media all =======*/
	/*Background Colors*/
	--sidebar-background: #dbc8b5;
	/* #endregion */
}

/* #endregion =======END FONTS AND COLORS ==============*/


@media (min-width: 690px) {
	:root {
		--content-width: clamp(680px, 80%, 80vw);
	}
}

@media (374px <=width < 690px) {
	:root {
		--content-width: clamp(360px, 95%, 90vw);
	}
}

/* #region ===========> Animationen <=========*/
/* -------------> fade-in <------------- */
@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* -------------> fade-out <------------- */
@keyframes fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


/* -------------> fade-in-out <------------- */
@keyframes fade-in-out {
	0% {
		opacity: 0;
	}

	15% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	75% {
		opacity: 1;
	}

	85% {
		opacity: 0;
	}
}

/* -------------> Sidebar Animation <------------- */
@keyframes slide-in-from-right {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0);
	}
}


/* -------------> Background-Slider Animation <------------- */
@keyframes bgFade {
	0% {
		opacity: 0;
	}


	8% {
		opacity: 1;
	}


	30% {
		opacity: 1;
	}


	38% {
		opacity: 0;
	}


	100% {
		opacity: 0;
	}
}

/* #endregion ===========> Animationen <=========*/
/*#region ==========> Global Classes <============= */
/*#region  ==========> Utility (sr-only/tooltips/:([pseudoElements])) <=============*/

.google-attribution {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px; /* Entspricht den geforderten 12sp Mindestgröße */
  letter-spacing: normal;
  color: #1F1F1F; /* Alternativ #5E5E5E für Grau oder #FFFFFF für Dunkelmodi */
  line-height: 16px;
  text-decoration: none;
}

button {
	-webkit-appearance: none;
	appearance: none;
	background-color: none;
	border: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.float-left {
	float: left;
}

/*tooltip */
/* .i-label:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	inset: auto;
	grid-column: 1;
	grid-row: 1;
	transform: translateX(-80%) translateY(80%);
	height: max-content;
	width: max-content;
	opacity: 100%;
	pointer-events: none;
	z-index: 1;
	color: black;
	background-color: rgba(186, 218, 241, .3);
	outline: .25px solid rgba(144, 238, 144, .75);
	padding: 0.4em .5em 0.2em .4em;
} */
dialog {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	height: max-content;
	filter: drop-shadow(6px 9px 6px rgba(49, 77, 97, 0.411));
	padding: 0;
	border: 0;
}

dialog.hint {
	font: var(--ttp-font);
	color: black;
	background-color: rgba(225, 234, 240, 0.81);
	outline: .25px solid rgba(144, 238, 144, .75);
	filter: drop-shadow(6px 9px 6px rgba(49, 77, 97, 0.411));
	height: max-content;
	width: 45vw;
	z-index: 1;
}

.quick dialog.hint {
	top: 5vh;
	right: -50%;
}

.generic dialog.hint {
	top: 70%;
	right: -47%;
}

.display dialog {
	top: 20%;
}

dialog.small-map {
	position: fixed;
	height: auto;
	width: 95%;
	top: 15vh;
	left: 0;
}

dialog.small-map[data-dialog-topic="deepdip"],
dialog.small-map[data-dialog-topic="halfmoon"] {
	top: 13vh;
	left: 0;
}

dialog>.hdr-bar .i-label {
	aspect-ratio: 1 / 1;
	height: auto;
	width: auto;
	justify-self: center;
	align-self: center;
}

dialog>.hdr-bar svg.close.icon {
	color: rgba(161, 203, 235, 0.5);
}

dialog>.hdr-bar legend {
	color: var(--h2-sectiontitle-color-2);
}

dialog>span {
	Display: block;
	font: var(--trainer-advice-font);
	margin: 3vw;
}

dialog.cm-dialog {
	top: 30%;
	left: 10%;
}

/*#endregion  ==========> Utility (sr-only/tooltips/:([pseudoElements])) <=============*/

/* #endregion*/
/*#region===========> Container <=========*/
[hidden] {
	display: none !important;
}

.container {}

.inline-block {
	display: inline-block;
}

.flexcol {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.flexrow {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.grid {
	display: grid;
	min-width: 0;
	grid-auto-flow: row;
}

.gridbox {
	display: grid;
	justify-content: center;
	align-content: center;
}

.display {
	width: var(--content-width);
	height: 80%;
	padding: .5vh 0 1vw 0;
	grid-template-rows: 3% repeat(4, 4.5%) repeat(7, 6%) 1% repeat(2, 4.5%) repeat(2, 5%) repeat(2, 6%) 1fr;
	grid-template-columns: repeat1(14, 7.14%);
	grid-template-areas:
		". . . .  . . .  . . .  . . . ."
		". . a a  a a a  a a a  a a a a"
		". . a a  a a a  a a a  a a a a"
		". . a a  a a a  a a a  a a a a"
		". . a a  a a a  a a a  a a a a"
		". . . d  d d d  d d d  d d d ."
		". . . d  d d d  d d d  d d d ."
		". . . d  d d d  d d d  d d d ."
		". . . d  d d d  d d d  d d d ."
		". . . d  d d d  d d d  d d d ."
		". . . d  d d d  d d d  d d d ."
		". . . d  d d d  d d d  d d d ."
		". . . .  . . .  . . .  . . . ."
		"b b b b  b b b  b b b  b b b b"
		"b b b b  b b b  b b b  b b b b"
		"f f f f  f f f  f f f  f f f f"
		"f f f f  f f f  f f f  f f f f"
		"g g g g  g g g  g g g  g g g g"
		"g g g g  g g g  g g g  g g g g";


	row-gap: 0;
	justify-content: center;
	align-items: start;
	margin: 20% auto 0 auto;
}

.frame,
.panel {
	grid-template-rows: auto;
	grid-auto-flow: row;
	gap: 3vh;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 7.5%;
}

.pill {
	border-radius: 10px / 10px;
	padding: 1.5% 5%;
	justify-content: center;
	align-content: center;
	text-align: center;
	font: var(--context-link-font);
	color: var(--footer-links-color);
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 0 5px .5px rgba(17, 48, 50, .2);
	filter: drop-shadow(2px 4px 6px rgba(17, 48, 50, .3));
}


.badge {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: start;
	margin: 0;
	padding: 0;
	gap: 0 1ch;
	width: 100%;
	height: auto;
}

footer .badge {
	margin: 5px auto;
	justify-content: center;
	align-content: center;
}

div.mini-hdr-bar {
	grid-template-columns: max-content 7.5% 1fr;
	grid-template-rows: repeat(2, max-content);
	grid-template-areas:
		"a b . ."
		"c c c c";
	align-items: center;
	column-gap: 0.25em;
}

div.mini-hdr-bar h3 {
	grid-area: a;
	justify-self: start;
	font: var(--hero-subtitle-font);
	color: var(--hero-subtitle-color);
	letter-spacing: .05em;
	height: max-content;
}



div.mini-hdr-bar .akkordeon.toggle-btn {
	grid-area: b;
	width: 80%;
	height: 80%;
	aspect-ratio: 1/1;
	justify-self: center;
	align-self: end;
}

/*#region Toggle Button "Chevron Up/Down" Open/Close*/
/*#region Design*/
.toggle-btn {
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	aspect-ratio: 1/1;
	min-width: 24px;
	min-height: 24px;
	max-height: 100%;
	max-width: 100%;
	justify-self: center;
	align-self: center;
}

.toggle-btn>input {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	justify-self: center;
	align-self: center;
}

.toggle-btn .toggle-icon-off,
.toggle-btn .toggle-icon-on,
.toggle-btn .chevron-up,
.toggle-btn .chevron-down {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	stroke-width: 3px;
	color: var(--hero-subtitle-color);
}

/*#endregion Design*/
/*#region Toggle Logic*/

.toggle-btn:not(:has(input:checked)) .toggle-icon-off

/* , */
/* .toggle-btn:not(:has(input:checked)) .chevron-up */
	{
	display: none;
}

.toggle-btn:has(input:checked) .toggle-icon-on

/* , */
/* .toggle-btn:has(input:checked) .chevron-down */
	{
	display: none;
}

/*#endregion  Toggle Logic*/
/*#endregion Toggle Button "Chevron Up/Down" Open/Close*/

/*Akkordeon Logic*/
article.mini-display>.display-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: max-height .25s ease, opacity .2s ease;
}

article.mini-display:has(> .mini-hdr-bar .toggle-btn > input:checked)>.display-content {
	position: relative;
	top: 0;
	left: 0;
	z-index: auto;
	max-height: max-content;
	opacity: 1;
	pointer-events: auto;
	padding-bottom: 15px;
}


.description {
	grid-area: c;
	color: var(--trainer-adivce-color);
	font: var(--page-main-description-font);
	padding: 5px 0;
}


div.lesson.grid {
	grid-template-columns: 1fr;
	grid-template-rows: max-content;
	gap: .2em;
	margin: 0;
	padding: 0 0;
}

section.overview .included.grid {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, max-content);
	grid-auto-flow: column dense;
	justify-items: start;
	width: max-content;
	margin: 5% auto;
	justify-self: center;
}

div.lesson.price {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, max-content);
	align-self: stcenter;
	justify-self: center;
	margin: 0 0 0 15%;
}

.mini-display .lesson.price {
	align-self: center;
	justify-items: end;
	margin: auto;
	justify-self: start;
}

.lesson.price h3 {
	grid-row: 2;
	justify-self: end;
	align-self: center;
}

.mini-display .lesson.price h4 {
	grid-row: 2;
	justify-self: end;
	align-self: center;
}

.price-list dd {
	height: auto;
	width: 100%;
}

.price-list dt:first-of-type {
	font-size: 1.1em;
}

.price-list>dt:last-of-type,
.price-list>dd:last-of-type {
	font-size: 1.1em;
	font-weight: 600;
}

.mini-display .price-list dt:first-of-type {
	font: var(--md-price-dt-font1);
	color: #3c8861;
	justify-self: start;
	align-self: center;
}


.mini-display .price-list dt:last-of-type {
	font: var(--md-price-dt-font2);
	color: #3c8861;
	justify-self: start;
	align-self: end;
}

.mini-display .price-list dd:first-of-type data {
	font: var(--md-price-data-font1);
	color: #3c8861;
	align-self: center;
}

.mini-display .price-list dd:last-of-type data {
	font: var(--md-price-data-font2);
	color: #3c8861;
	align-self: center;
}

.price-list dd:first-of-type data {
	justify-self: end;
	font-size: 1.05em;
}

.price-list span.price-currency {
	width: 30%;
	justify-self: end;
}

.price-list span.price-amount {
	justify-self: end;
	width: 70%;
}

.price-currency::before {
	content: " ";
	margin: 2px;
}

.price-list {
	align-self: center;
	grid-template-columns: 1fr max-content;
	grid-template-rows: repeat(2, max-content);
	grid-template-areas:
		"label1 price1"
		"label2	price2";
	grid-auto-flow: column dense;
	justify-items: start;
	gap: 0.125em .5em;
	font: var(--price-dt-font);
	color: #3c8861;
	margin: 0;
}

.mini-display .price-list {
	align-self: start;
}

.lesson.price dt,
.lesson.price dd {
	align-self: end;
	justify-self: end;
	margin: 0;
	padding: 0;

}

/* .mini-display .lesson.price dt,
.mini-display .lesson.price dd {
	justify-self:  start;
	margin: 0;
	padding: 0;
} */

.lesson.price dt {
	grid-column: 1;
}

.mini-display .lesson.price dt {
	grid-column: 1;
}

.lesson.price dd {
	grid-column: 2;
	justify-content: end;
}

.mini-display .lesson.price dd {
	grid-column: 2;
	justify-content: end;
	font-size: .5rem;
}

.lesson.included {
	justify-self: end;
	align-self: start;
	font: var(--included-list-font);
	padding: 30px 10px 20px 10px;
}

.mini-display .lesson.included:not(h4) {
	font: var(--included-mini-font);
}

.lesson.included:not(h4) {
	color: #394740;
}

.lesson.included h4 {
	padding-bottom: 3%;
}



dd data.flexrow {
	min-width: max-content;
	width: 100%;
}

ul.badge {
	margin: auto;
	padding: 0;
	gap: .5em .2em;
	/*erster wert regelt sidebar version / zweiter wert regelt main footer version*/
}

footer ul.badge {
	gap: .1em 1.5em;
	/*erster wert regelt sidebar version / zweiter wert regelt main footer version*/
	padding: 0 1em;
}

/*Mini-Dispay Variations*/
/*.basic fits snug , doesn't need variation*/


section.detail-card .mini-display.deepdip .lesson.price dt {
	grid-row: 1;
	grid-column: 1 / 3;
}

section.detail-card .mini-display.deepdip .lesson.price dd {
	grid-row: 2;
	grid-column: 2;

}

section.detail-card .mini-display.deepdip .lesson.price h4 {
	grid-row: 3;
	grid-column: 1 / 3;
}

/* .display ul.badge {
	flex-direction: column;
	font: var(--included-list-font);
	justify-content: center;
} */

/* .usps>ul.badge { 
	flex-direction: row;
	flex-wrap: nowrap;
} */

ul.badge>li {
	list-style: none;
	height: max-content;
	color: var(--comp-attribute-color);
	margin: 0 0 0 -.5em;
	padding: 0;
}

.page ul.badge>li::before {
	content: "\2713"
		/*"\2605"*/
	;
	margin-right: .5em;
	font-size: 0.8em;
}

.complabel ul.badge>li::before {
	content: "\2713";
	margin-left: .5em;
	font-size: 0.8em;
}

.footer ul.badge li::before,
.display ul.badge li::after {
	display: none;
}

div.lesson.included h3,
div.lesson h4,
div.lesson h3 {
	font: var(--included-title-font);
	color: #3c8861;
}

div.lesson ul.badge li::before {
	grid-column: 1;
}

/* div.page-hero div.breadcrumbs {
	position: sticky;
	justify-self: start;
	margin: 0 1.5% 0% 1.5%;
	bottom: 0;
	left: 0;
	grid-template-columns: 10% 90%;
	grid-template-rows: 4.6vh;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	width: 100vw;
}
div.breadcrumbs img {
	width: 100%;
	align-self: start;
	
} */

ul.breadcrumbs {
	grid-auto-flow: column;
	grid-template-rows: clamp(20px, 3vh, 35px);
	margin: 0;
	padding: 0;
	justify-content: start;
	align-content: end;
	list-style: none;
	width: max-content;
	height: auto;
	min-height: 20px;
	max-height: 35px;
}

ul.breadcrumbs li {
	flex: 0 0 max-content;
	height: 100%;
}

ul.breadcrumbs li a {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	font: var(--breadcrumbs-font);
	color: var(--breadcrumbs-index-color);
	margin: 0;
	text-transform: uppercase;
	height: 100%;
	align-self: center;
}

ul.breadcrumbs li:first-child a:visited,
ul.breadcrumbs li:first-child a {
	color: #504e4e;
}

ul.breadcrumbs li a:not(:has(svg.feather-chevron-right)) {
	padding-top: 2px;
}

ul.breadcrumbs li:has(svg.feather-chevron-right) {
	aspect-ratio: 1 / 1;
	display: grid;
	height: 100%;
	width: auto;
}

ul.breadcrumbs li:not(:first-child) a:visited,
ul.breadcrumbs li:not(:first-child) a {
	color: var(--breadcrumbs-pages-color);
}

ul.breadcrumbs li>svg.feather-chevron-right {
	aspect-ratio: 1 / 1;
	height: clamp(10px, 1.2em, 20px);
	align-self: center;
	width: auto;
}

ul.breadcrumbs li>svg.feather-chevron-right:not(:first-of-type) {
	color: var(--breadcrumbs-pages-color);
}

div.display .subtitle {
	justify-content: center;
	align-content: center;
	grid-area: a;
	justify-self: end;
	padding: 0;
	width: 85%;
	height: 100%;
	margin: 0 10px 0 0;
}



.page.subtitle p,
.page.subtitle dl {
	font: var(--page-intro-font);
	color: var(--trainer-adivce-color);
	letter-spacing: -.2px;
}

.page.subtitle dl {
	grid-template-columns: max-content 1fr;
	grid-template-rows: min-content;
	gap: 0 .5ch;
	justify-content: start;
	align-content: start;
	margin: 0;
}

.page.subtitle dl dd {
	grid-column: 2;
	margin: 0;
	font-family: 'Sulphur Point', sans-serif;
	font-weight: 600;
	font-size: .9em;
	line-height: 1em;

	padding-top: .15em;
}

.page.subtitle dl dt {
	grid-column: 1;
	justify-self: end;
	margin: 0;
	font-size: .8em;
	color: #436e58;
}

.page.subtitle dl dd:first-of-type,
.page.subtitle dl dt:first-of-type {
	margin-bottom: 3px;
}



.page.subtitle dl:nth-of-type(2) dd:nth-of-type(2) {
	grid-column: 1 / 3;
	width: 80%;
	justify-self: center;
}

/*#endregion Container*/
/*#region===========> Links With nested Images <=========*/
.anchor.img,
.anchor.img:visited {
	appearance: none;
	text-decoration: none;
}

.anchor.img:hover {
	appearance: none;
	text-decoration: none;
}

.anchor.img:active {
	appearance: none;
	text-decoration: none;
}

/*#endregion===========> Links With nested Images <=========*/
/*#region===========> Site Navigation Links <=========*/
.navlink {
	appearance: none;
	text-decoration: none;
}


.nav-dd:hover label.navlink,
.nav-btn:hover label.navlink {
	display: grid;
}

label.navlink>input,
label.navlink>span {
	width: 100%;
	background-color: transparent;
	grid-column: 1 / 3;
	grid-row: 1 /3;
}


/*#endregion===========> Site Navigation Links <=========*/


/*#region===========> Cards for Slider and Multimedia <=========*/

/*video controls: toggle Autoplay/Mute*/

/* .i-label.ctrl-toggle:has() */

.vdo-ctrls {
	grid-area: d;
	place-self: start end;
	position: relative;
	top: 0;
	left: 20%;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: 100%;
	width: 25%;
	height: 10%;
	background-color: transparent;
	z-index: 1;
}

.i-label.ctrl-toggle {
	width: 100%;
	height: 100%;
	opacity: .5;
	color: rgba(17, 48, 50, .5);
	padding: 10%;
}

.i-label.ctrl-toggle:hover,
.i-label.ctrl-toggle:hover {
	color: rgba(17, 48, 50, 1)
}

.ctrl-toggle[for="autoplay-toggle"] {
	grid-column: 1;
}

.ctrl-toggle[for="mute-toggle"] {
	grid-column: 2;
}

.vdo-ctrls label>svg {
	object-fit: contain;
	grid-column: 1;
	grid-row: 1;
}


svg.ctrl-state-off {
	display: none;
}

.ctrl-toggle:has(input:checked)>svg.ctrl-state-normal {
	display: none
}

.ctrl-toggle:has(input:checked)>svg.ctrl-state-off {
	display: block;
}

.card {
	position: relative;
	display: block;
	margin: 0;
	border-radius: 25px;
	cursor: pointer;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.video.card,
.slider.card {
	background-color: transparent;
}



/* ===========>  Video Button <==========*/


.video.card {
	isolation: isolate;
	/*<<<<<====video & img overlay screen-FRAME!-Size */
	height: 100%;
	aspect-ratio: 3 / 2;
	justify-self: end;
	margin: 0 auto 0 10.5vw;
}

.card .card-img,
.card .card-vdo {
	position: absolute;
	inset: 0;
	width: 100%;
	/*<<<<<====VIDEO & IMG-DOVERLAY - Screen Size */
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Video liegt unten */
.card .card-vdo {
	z-index: 1;
}

/* Bild liegt ueber dem Video */
.card>.card-img.fading {
	z-index: 3;
	/* transition: opacity .4s ease; */
	animation:
		fade-in-out 30s alternate infinite forwards;
}

.card[data-media-state="playing"]>.card-img.poster-bkgr {
	opacity: 0;
}

.card>.card-img.poster-bkgr {
	z-index: 2;
	opacity: 1;
	/* transition: opacity .4s ease; */
}

.card[data-media-state="playing"]>.card-img.poster-bkgr {
	opacity: 0;
}

.card[data-media-state="playing"]>.card-img.fading {
	z-index: 3;
	opacity: 0;
	/* transition: opacity .4s ease; */
	animation:
		fade-in 1.5s ease 13.7s forwards;
}


.card:has(input) .card a:visited {
	color: var(--videobutton-text-color);
}

.card a:hover {
	color: var(--videobutton-text-color-hov);
}

/* CSS-only Testverhalten: Bild ausblenden, Video sichtbar machen */


.card:hover>.card-img,
.card:focus-within>.card-img {
	opacity: 0;
}

/*#endregion===========> Cards for Slider and Multimedia <=========*/
/*#endregion===========> Slider and Multimedia <=========*/

/* #endregion */
/* ===========> Header <=========*/
.page-header {
	min-height: 50px;
	height: 10vh;
	max-height: 120px;
	width: 100vw;
	position: fixed;
	z-index: 8;
	inset: 0;
}

.main-hdr {
	grid-template-columns: 15% 55% 30%;
	grid-template-rows: 100%;
	justify-content: center;
	align-content: center;
	width: 99%;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0 0;
}

/***==============> Left Header <============= ***/

.left-header.container {
	height: 100%;
	width: 100%;
	overflow: visible;
}

/* > Small Logo < */
.page-header .favicon {
	aspect-ratio: 5 / 4.54;
	object-fit: contain;
	height: auto;
	width: 96%;
	justify-self: start;
}

.page-header .anchor.img {
	height: 100%;
	width: 100%;
	align-content: center;
	opacity: 0;
}

/* ================>   Nav-Bar LDSCP  <================ */
.main-hdr>.navbar {
	grid-template-columns: max-content;
	grid-auto-flow: column;
	gap: 3vw;
	justify-items: center;
	justify-content: start;
	align-items: center;
	width: 100%;
	height: 2.75vw;
	margin: 0 auto;
	padding: 0 1vw;
}


/* ------------->   Nav-links (Main - Buttons)  <------------- */
.nav-btn {
	display: block;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	font: var(--nav-btn-font);
	background-color: transparent;
	margin: auto;
	color: var(--nav-btn-color);
	height: 100%;
	width: 100%;
	text-decoration: none;
}

a.nav-btn {
	display: grid;
	place-items: center;
}

a.nav-btn>span {
	margin: auto;
}

.sidebar .nav-btn {
	height: auto;
}

/* ------------->   Nav-links LDSCP (Drop Down - ul)  <------------- */
.navbar .nav-dd {
	list-style: none;
	display: none;
}

.navbar ul li {
	flex: 0 0 1lh;
}

.navbar ul li a {
	font: var(--sbarnav-option-font);
	color: var(--nav-option-color);
}

.nav-menu {
	position: relative;

}

/*    /- needed during design only -/
.nav-dd,
.nav-menu ul {
	display: block;
	position: absolute;
	bottom: -1;
	left: -1px;
} 
*/

.nav-dd:hover,
.nav-menu:has(.nav-btn:hover) ul,
.nav-menu:has(.nav-btn:active) ul {
	position: absolute;
	top: 10%;
	left: 0;
	z-index: 2;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;

	background:
		/* linear-gradient(180deg, rgba(17, 48, 50, .30) 0%, rgba(17, 48, 50, .40) 50%, */
		rgba(17, 48, 50, .70)
		/*  100%) */
	;
	border-radius: 0 0 2px 2px;
	box-shadow: #ffffff14 0 0 5px 3px inset, #ffffff14 0 0 5px 5px;
	color: var(--nav-option-hover-color);
	font: var(--nav-option-font);
	min-width: 100%;
	width: max-content;
	height: max-content;
	padding: 15px 5px 15px 10px;
	margin: 20px 0 0 0;
}

/* ------------->   Nav-links (Drop Down - List Items)  <------------- */

.nav-dd:hover .navlink {
	display: flex;
	margin: 0 auto;
	appearance: none;
	text-decoration: none;
}

.navlink:visited {
	appearance: none;
	text-decoration: none;
	color: var(--nav-option-vstd-color);
}

/* -------------> Right Header <------------- */
.right-header.container {
	justify-content: left;
	align-content: center;
	gap: 0;
	margin: 0;
	height: 100%;
	overflow: visible;
	padding: 0 0 0 0;
	/*hier den verfuebaren platz fuer flagge und burger symbol justieren*/

}

/* -------------> Side Bar Button <------------- */
.right-header .menu-btn {
	width: auto;
	height: 100%;
	flex: 1 1 55%;
	/*anteil des elements am right-header*/
	appearance: none;
	padding: 0;
	justify-content: center;
}

.sidebar-rdo {
	width: 100%;
	height: 100%;
	appearance: none;
	cursor: pointer;
	grid-column: 1;
	grid-row: 1;
}

.burger-icon {
	position: relative;
	z-index: 0;
	width: 70%;
	/*hier symbolgroesse justieren*/
	height: 100%;
	color: var(--menu-btn-color);
	transform: scale(1.2, 1.1);
	grid-column: 1;
	grid-row: 1;
}

/* .sidebar-rdo[value="open"] { */
/* 	min-width: inherit; */
/* 	max-width: inherit; */
/* 	width: inherit; */
/* 	min-height: inherit; */
/* 	max-height: inherit; */
/* 	height: inherit; */
/* 	cursor: pointer; */
/* } */

/* -------------> Language Picker <------------- */
.lngpckr {
	position: static;
	flex: 1 1 45%;
	/*anteil des elements am right-header*/
	min-width: 0;
	width: 100%;
	height: 100%;
	place-items: center;
	overflow: visible;
}

.lang-btn {
	grid-template-columns: 1fr;
	grid-template-rows: max-content;
	grid-auto-flow: row dense;
	height: auto;
	width: 100%;
	padding: 0%;
	align-items: center;
	justify-content: center;
}

.lngpckr:hover .lang-btn {
	transform: translateY(7%);
}

.flag {
	aspect-ratio: 6 / 4.5;
	display: none;
	width: 100%;
	height: auto;
	justify-items: center;
	align-content: center;
	grid-template-rows: 100%;
	margin: auto;
}

.flag:has(.lang-rdo:active) .lang-btn {
	width: 100%;
	height: 100%;
}

.lang-btn:hover,
.lngpckr:hover .flag,
.flag:has(.lang-rdo:checked) {
	display: grid;
}

.flag:has(.lang-rdo:checked) {
	grid-row: 1;
}

.lang-rdo {
	appearance: none;
	width: 70%;
	/*Hier die flaggengrösse justieren*/
	height: auto;
	background-size: 100% 100%;
	aspect-ratio: 6 / 4.5;
	background-position: center;
	border-radius: 5%;
	margin: auto 0;
}

.lang-rdo.lang-en,
.lang-rdo.lang-de,
.lang-rdo.lang-es {
	background-position: center;
}

.lang-rdo:checked,
.lang-rdo:focus {
	/* display: flex; */
	outline: 1pt solid white;
}


.lang-en {
	background: url("assets/multimedia/img/flags/Flag_of_the_United_Kingdom.svg") no-repeat;
	/* background-color: blue; */
	background-position: center;
	background-size: 110% 100%;

}

.lang-es {
	background: url("assets/multimedia/img/flags/Flag_of_Spain.svg") no-repeat;
	/* background-color: red; */
	background-position: center;
	background-size: 100% 100%;
}

.lang-de {
	background: url("assets/multimedia/img/flags/Flag_of_Germany.svg") no-repeat;
	/* background-color: yellow; */
	background-position: center;
	background-size: 110% 100%;
}

/* ==============> - SIDE BAR - (Off-Canvas) <============ */
.sidebar {
	position: fixed;
	height: 100vh;
	overflow: scroll;
	top: 0;
	right: 0;
	transform: translateX(100%);
	z-index: auto;
	width: 75vw;
	background-color: var(--sidebar-background);
	/*display: none;!!!während header styling vorläufig ausgeblenet!*/
}

.page-header:has(.sidebar-rdo[value="open"]:checked) .sidebar {
	height: 100vh;
	animation: .2s ease-in slide-in-from-right forwards;
	transform: translateX(0);
}

.sidebar {
	transform: translateX(100%);
	animation: none;
}



/* -------------> Sidebar - Footer <------------- */
.sb-footer {
	position: relative;
	z-index: 10;
	margin: 0 5%;
	grid-template-rows: max-content;
	grid-template-columns: repeat(6, 16.6%);
	grid-template-areas:


		"b	b	c	c	d	d"
		"a	a	a	a	a	a"
		"e	e	e	e	e	e"
		"f	f	f	f	f	f"
		"g	g	g	g	g	g"
		"h	h	h	h	h	h"
		"i	i	i	i	i	i"
		"j	j	j	j	j	j"
		"k	k	k	k	k	k"
		"l	l	l	l	l	l";
	justify-items: center;
	align-items: center;
	height: 50vh;
}

.sb-footer>a:not(:nth-of-type(5)) {
	font: var(--footer-link-font);
	width: 100%;
	margin: 2% auto;
	text-align: center;


}

.sb-footer a {
	-webkit-appearance: none;
	appearance: none;
	color: var(--footer-links-color);
}

.sb-footer .badge {
	gap: .1em .1em;
}

.sb-footer>a:first-of-type {
	grid-area: a;
}

.sb-footer>a:nth-of-type(2) {
	grid-area: c;
}


.sb-footer>a:nth-of-type(3) {
	grid-area: d;
}

.sb-footer>a:nth-of-type(4) {
	grid-area: b;
}

.sb-footer .comp-name-alt {
	grid-area: g;
	font-size: 90%;
	line-height: .8rem;
}

.badge.usps {
	font: var(--footer-usps-font);
}

.sb-footer .badge.usps {
	grid-area: h;
	width: 100%;
	justify-content: space-around;
	gap: 0em 0em;
	font-size: 65%;
	line-height: .8rem;
}

.badge.usps>li.description {
	font: var(--footer-usps-font);
}

.sb-footer .badge.address {
	align-content: center;
	grid-area: i;
	padding: 1% 0;
}

.sb-footer .badge.address>address {
	flex-wrap: nowrap;
	justify-content: start;
}

.sb-footer .badge.address>address span {
	flex: 1 0 max-content;
	max-width: 100%;
}


.sb-footer a:nth-of-type(5) {
	grid-area: e;
}

.sb-footer .badge.reg {
	grid-area: j;
	font-size: .8rem;
}

.sb-footer .badge.licences {
	grid-area: k;
	font: var(--licence-label-font);
}

.sb-footer .badge.cpyrit {
	grid-area: l;
	gap: 0 1ch;
	font: var(--copyright-font);
	font-size: .9rem;
	color: var(--copyright-color);
}

.sb-footer .estd {
	grid-area: f;
}

/* -------------> Sidebar - Close-Button <------------- */
.sidebar .menu-btn {
	aspect-ratio: 1 / 1;
	border: 1px solid;
	width: auto;
	height: 100%;
	margin-left: 0;
	appearance: none;
	background-color: transparent;
}

.sidebar-rdo {
	appearance: none;
	width: 100%;
	height: 100%;
	grid-column: 1;
	grid-row: 1;
}

.icon {
	width: 100%;
	height: 100%;
}

/* -------------> ÉND Sidebar - Close-Button <------------- */

.sidebar-hdr.sidebar-header {
	position: static;
	min-height: unset;
	width: 100%;
	height: auto;
	padding: 1%;
	background-color: var(--h2-sectiontitle-color-1);
	border-right: 2px inset rgba(161, 203, 235, 0.5);
	border-left: 1.5px solid rgba(161, 203, 235, 0.5);
	border-top: .5px solid rgba(161, 203, 235, 0.5);
	border-bottom: 1.5px inset rgba(161, 203, 235, 0.5);
	box-shadow: inset 0 0 2px .5px rgba(161, 203, 235, 0.5), 0 0 3px .2px rgba(17, 40, 58, .4);
}

/*--- #region Sidebar Navbar ----*/
.sidebar .navbar {
	display: grid;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	justify-content: center;
	align-content: start;
	position: relative;
	z-index: 1;
	grid-template-columns: 100% 1fr;
	grid-template-rows: repeat(4, 1fr);
	grid-template-areas:

		"navbtnA options"
		"navbtnB options"
		"navbtnC options"
		"navbtnD options";
	justify-items: center;
	align-items: center;
	align-content: center;
	justify-content: center;
	height: 40vh;
	width: 100%;
	margin: 0 auto;
	background-color: var(--sidebar-background-vert);
}

.sidebar .navbar[data-active-sb-panel],
.sidebar .navbar:has(.nav-btn:is(:hover, :focus)),
.sidebar .navbar:has(.nav-panel:is(:hover, :focus-within)) {
	grid-template-columns: 45% 55%;
	font-size: 1.2rem;
	line-height: 1.2rem;
	transition:
		grid-template-columns .1s ease .12s;
}

.sidebar .nav-panel {
	position: absolute;
	/* flex-wrap: wrap; */
	grid-template-columns: 100%;
	grid-auto-rows: max-content;
	grid-auto-flow: row;
	gap: 1%;
	bottom: 0;
	right: 0;
	z-index: -1;
	display: grid;
	justify-content: space-evenly;
	justify-items: start;
	align-content: center;
	grid-area: options;
	font-size: 1.2rem;
	line-height: 1.2rem;
	width: 100%;
	height: 100%;
	margin: 0;
	/* padding: 0  1.5ch; */
	background-color: rgba(17, 48, 50, .30);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .15s ease,
		visibility 0s linear .15s,
		grid-template-columns .1s ease .12s;
}

.sidebar .nav-panel li {
	width: 100%;
	height: 100%;
	justify-content: stretch;

}

.sidebar .nav-btn {
	display: grid;
	grid-auto-flow: column;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	font-size: 1.3rem;
	line-height: 1.3rem;
	width: 100%;
	height: 100%;
	align-content: center;
	justify-content: center;
	margin: auto;
	background-color: var(--sidebar-background-vert);
	box-shadow: 1px 0px 1px rgba(17, 48, 50, 0.486);
}

.sidebar .nav-btn span {
	text-align: center;
	max-width: 100%;
	margin: auto;
	transition: max-width 0.4s ease-in-out;
}

.sidebar .navbar[data-active-sb-panel="sidebar-menu-A"] .sb-mainlink[data-sb-nav-button="sidebar-menu-A"],
.sidebar .navbar[data-active-sb-panel="sidebar-menu-B"] .sb-mainlink[data-sb-nav-button="sidebar-menu-B"],
.sidebar .navbar[data-active-sb-panel="sidebar-menu-C"] .sb-mainlink[data-sb-nav-button="sidebar-menu-C"],
.sidebar .navbar[data-active-sb-panel="sidebar-menu-D"] .sb-mainlink[data-sb-nav-button="sidebar-menu-D"],
.sidebar .nav-btn:focus,
.sidebar .nav-btn:hover,
.sidebar .nav-btn:focus-within {
	background-color: rgba(17, 48, 50, .30);
	text-decoration: underline;
}

.sidebar .nav-btn[data-sb-nav-button="sidebar-menu-A"] {
	grid-area: navbtnA;
}

.sidebar .nav-btn[data-sb-nav-button="sidebar-menu-B"] {
	grid-area: navbtnB;
}

.sidebar .nav-btn[data-sb-nav-button="sidebar-menu-C"] {
	grid-area: navbtnC;
}

.sidebar .nav-btn[data-sb-nav-button="sidebar-menu-D"] {
	grid-area: navbtnD;
}

.sidebar .navlink {
	height: 100%;
	width: 100%;
	padding: 3% 2% 3% 8%;
	border-bottom: 1px solid rgba(17, 48, 50, .2);
}

.sidebar .navlink span {
	display: block;
	width: 100%;
}

/*--- #region Linking Buttons with nav-panels*/
/* Button A -> Panel A */
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-A"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-A"],
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-A"]:focus) .nav-panel[data-nav-panel-id="sidebar-menu-A"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-A"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-A"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-A"]:focus-within) .nav-panel[data-nav-panel-id="sidebar-menu-A"],

/* Button B -> Panel B */
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-B"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-B"],
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-B"]:focus) .nav-panel[data-nav-panel-id="sidebar-menu-B"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-B"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-B"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-B"]:focus-within) .nav-panel[data-nav-panel-id="sidebar-menu-B"],

/* Button C -> Panel C */
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-C"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-C"],
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-C"]:focus) .nav-panel[data-nav-panel-id="sidebar-menu-C"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-C"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-C"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-C"]:focus-within) .nav-panel[data-nav-panel-id="sidebar-menu-C"],

/* Button D -> Panel D */
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-D"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-D"],
.sidebar .navbar:has(.nav-btn[data-sb-nav-button="sidebar-menu-D"]:focus) .nav-panel[data-nav-panel-id="sidebar-menu-D"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-D"]:hover) .nav-panel[data-nav-panel-id="sidebar-menu-D"],
.sidebar .navbar:has(.nav-panel[data-nav-panel-id="sidebar-menu-D"]:focus-within) .nav-panel[data-nav-panel-id="sidebar-menu-D"],

/*---- #region mit js hooks ruhigere wirkung auf desktops ----*/

.sidebar .navbar[data-active-sb-panel="sidebar-menu-A"] .nav-panel[data-nav-panel-id="sidebar-menu-A"],
.sidebar .navbar[data-active-sb-panel="sidebar-menu-B"] .nav-panel[data-nav-panel-id="sidebar-menu-B"],
.sidebar .navbar[data-active-sb-panel="sidebar-menu-C"] .nav-panel[data-nav-panel-id="sidebar-menu-C"],
.sidebar .navbar[data-active-sb-panel="sidebar-menu-D"] .nav-panel[data-nav-panel-id="sidebar-menu-D"] {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity .15s ease .12s,
		visibility 0s linear .12s;
}


.nav-panel a:hover,
.nav-panel a:focus-within {
	box-shadow: 0 0 10px inset rgba(17, 40, 58, .3);
}


/*---- #endregion mit js hooks ruhigere wirkung auf desktops ----*/

/*--- #endregion Linking Buttons with nav-panels*/

/*--- #endregion Sidebar Navbar ----*/

/*#region -- Sidebar Footer---*/

.sb-footer .i-label .comp-name-estd {
	margin: 0 auto;
	justify-content: center;
	align-content: center;
}

.sb-footer .i-label .comp-name-estd span {
	margin: 0 auto;
}

.sb-footer .complabel .comp-name-alt {
	font: var(--sb-compname-alt-font);
}

/* .sb-footer .complabel .badge.usps {font: var(--sb-predicate-list-font);} */
.sb-footer .complabel .address .name {
	font: var(--sb-address-compname-font);
}

.sb-footer .complabel .address a[type=email] {
	font: var(--sb-address-email-font);
}

.sb-footer .complabel .address a[type=tel] {
	font: var(--sb-address-phone-font);
}

.sb-footer .complabel .badge.cpyrit {
	font: var(--sb-copyright-font);
}

.sb-footer .complabel .badge.licenses {
	font: var(--sb-licence-label-font);
}

.sb-footer .complabel .badge.reg {
	font: var(--sb-register-claim-font);
}


/* ==============> FOOTER <============ */
/* .footer {
  overflow: hidden;
  width: 100vw;
  margin: 0 auto 0 auto;
  padding: 0;
  justify-content: center;
} */

footer .ftr-links {
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	max-height: min-content;
	grid-template-areas:

		".       logo .    "
		"consent logo terms"
		"policy	 logo legal"
		".       logo .    ";
	gap: 10px 2px;
}


.ftr-links a {
	text-align: center;
	appearance: none;
	font: var(--footer-link-font);
	color: var(--footer-links-color);
}


.ftr-links a:hover {
	color: var(--footer-links-hover-color);
}

.ftr-links a:visited {
	color: var(--footer-links-color);
	/* color: var(--footer-links-vstd-color); */
}

.ftr-links a.i-label {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.ftr-links a:has(img) {
	grid-area: logo;
}

.ftr-links a:not(:last-child) {
	margin: 5% auto;
}

.ftr-links a:first-child {
	grid-area: terms;
}

.ftr-links a:nth-child(2) {
	grid-area: policy;
}

.ftr-links a:nth-child(3) {
	grid-area: legal;
}

.ftr-links a:nth-child(4) {
	grid-area: consent;
}

.sidebar-header .container.complabel {
	height: auto;
}

.usps.badge a {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	color: inherit;
}

/*.complabel.grid {
	grid-template-columns: 100%;
	grid-template-rows: max-content;
	grid-template-areas: 
		
		"altn" 
		"role"	
		"addr"
		"regi"
		"lice"	
		"copy";
		
	align-items: center;
	justify-content: center;
	margin-top: 5%;
}*/


.licences {
	grid-area: lice;
	align-self: start;
}

.badge[for="copyright-ftr"] {
	grid-area: copy;
}

.sb-footer .address a[type="tel"] {
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
}

.sb-footer .address a[type="email"] {
	font-size: 1rem;
	font-weight: 700;
}

.sb-footer .address .svg.glyph {
	height: .8rem;
	flex: 0 0 max-content;
	align-self: center;
	margin-right: 1ch;
}

.complabel {
	max-width: 100%;
	margin: 0 0;
}

/* .ftr .comp-name-estd {
	 font: var(--compname-estd-font);
	 color: var(--compname-estd-color);
	
	justify-content: center;
	align-content: center;
	text-align: center;
	flex-wrap: wrap;
} */
.comp-name-estd span {
	max-width: unset;
	/* colvar--compname-estd-color); */
	color: var(--compname-alt-color);
}

.complabel .comp-name-alt {
	grid-area: altn;
	align-self: end;
	text-align: center;
	color: var(--compname-alt-color);
	width: 80%;
	margin: 0 auto 2px auto;
}

/**ftr-slgn ist im DOM auskmmentiert*
.ftr-slgn,
.ftr-slgn > span {
	max-width: max-content;
	margin: 0 auto;
	}
.ftr-slgn { margin: .3em auto;}
*/

.flexrow .estd::after {
	content: "-";
	margin: 0 1ch;
}

/* .estd::before {
	content: "-";
	margin: 0 1ch;
	} */

.complabel>ul {
	grid-area: role;
	height: max-content;
	font: var(--comp-attribute-font);
	font-size: 1em;
	font-weight: 500;
	align-self: start;
	justify-content: center;
}

/* .complabel > ul > li {
	list-style: none;
	height: max-content;
	color: var(--comp-attribute-color);
	} */


/* .ftr-slgn > span {	font: var(--slogan-font);} * 
!ist im html auskommentiert und wird aus marketingtechnischenüberlegungen wohl obsolet*/

.badge.reg {
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font: var(--register-claim-font);
	color: var(--register-claim-color);
	grid-area: regi;
	gap: 0.4em;
	margin: 3% auto;
}

/* .complabel .badge {
	gap: 0 1ch;
	width: 100%;
	} */
.complabel .badge.licences {
	font: var(--licencenr-font);
	color: var(--licencenr-color);
}

.complabel .badge.licences .register-name {
	font: var(--reg-name-font);
	color: var(--register-name-color);
}

.complabel .badge.cpyrit {
	color: var(--copyright-color);
	font: var(--copyright-font);
	flex-wrap: wrap;
	width: 100%;
}

.symbol.cpyrt {
	margin-right: -.5ch;
}

.comp-name-estd,
.estd {
	font: var(--compname-estd-font);
}

.comp-name-alt {
	font: var(--compname-alt-font);
}

/*========================= ADDRESS /IMPRESSUM===================*/
.complabel div:has(address) {
	margin: 03% auto;
	justify-content: start;
	align-items: start;
	height: auto;
	width: 100%;
}

.complabel div:has(address) address {
	font-style: normal;
	font-family: unset;
	margin: 0 auto;
	justify-content: start;
	align-items: start;
	text-align: left;
	gap: 0;
}

.sidebar .complabel div:has(address) address {
	margin: 0 auto;
}

address .location {
	font: var(--address-location-font);
	color: var(--footer-address-location-color);
}

address .name {
	font: var(--address-compname-font);
	color: var(--footer-address-name-color);
}



address>a {
	appearance: none;
	color: unset;
	text-decoration: none;
}

address>a[type="email"]:hover,
address>a[type="email"]:focus-within,
address>a[type="tel"]:hover,
address>a[type="tel"]:focus-within {
	color: var(--phone-email-color-hov);
}

address>a[type="email"] {
	font: var(--address-email-font);
	color: var(--phone-email-color);
}

address>a[type="tel"] {
	font: var(--address-phone-font);
	color: var(--phone-email-color);
}

.legal-page address {
	font: var(--address-compname-font);
	font-size: 1.4em;
	line-height: 1.1em;
}

.location-details>span:first-of-type::after,
.location-details>span:nth-of-type(2)::after {
	content: "-";
	margin-left: 1ch;
}

.sb-footer .complabel .address .location {
	font: var(--sb-address-location-font);
}

footer div.ftr-links a>img {
	max-width: 50px;
	height: auto;
	margin: 0 auto;
}

aside.sml.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"WA"
		"IG"
		"FB";
	justify-content: center;
	align-content: stretch;
	gap: 5px;
	position: fixed;
	bottom: 10vh;
	right: 5vw;
	width: 10vw;
	height: 20vh;
}

.svg.glyph {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 10vw;
}

.sml .anchor.img {
	aspect-ratio: 1 / 1;
	height: 100%;
	width: auto;
}

.floater .i-label.faq-link {
	grid-column: 1;
	aspect-ratio: 2/ 1.65;
	/* aspect-ratio: 1 / calc(2.5/3); */
	height: 100%;
	width: auto;
}


.floater .i-label.faq-link input {
	width: auto;
	height: 100%;
	grid-column: 1;
	grid-row: 1;

}

.floater .i-label {
	height: 100%;
	width: auto;
	justify-content: center;
	align-items: center;
	padding: 0;
	overflow: visible;
	color: var(--floater-color);
	opacity: .4;
	pointer-events: all;
}

.i-label.faq-link:hover,
.i-label.faq-link:focus-within,
.i-label.cm-link:hover,
.i-label.cm-link:focus-within {
	margin: 0 0 0 0;
	opacity: 1;
}

.cm-link .cmr-icon {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
	grid-column: 1;
	grid-row: 1;
	color: var(--floater-cm-color);
}

.cm-link input {
	grid-column: 1;
	grid-row: 1;
}


.footer aside>a[aria-label="Facebook"] {
	grid-area: FB;
}

.footer aside>a[aria-label="Instagram"] {
	grid-area: IG;
}

.footer aside>a[aria-label="WhatsApp"] {
	grid-area: WA;
}

.floater.grid {
	position: fixed;
	bottom: 5vh;
	left: 0;
	grid-template-columns: 15vw 10vw;
	grid-auto-flow: column;
	justify-content: end;
	align-content: center;
	gap: 0 10px;
	width: 100%;
	height: auto;
	padding: 10px 5vw 0 5vw;
	pointer-events: none;
}

.pseudo.icon {
	grid-template-columns: 21.5% 32.5% 30%;
	grid-template-rows: 5vh;
	font-family: 'Kulim Park', sans-serif;
	font-size: 6vh;
	line-height: 5vh;
	height: 6vh;
	aspect-ratio: 2 / 1.65;
	width: auto;
	justify-content: center;
	align-content: center;
	overflow: visible;
	grid-column: 1;
	grid-row: 1;
}

.pseudo.icon span {
	font-size: 85%;
	font-weight: 700;
	margin-left: -42.5%;
}

/*-------------------- Footer Variation ---------------*/

/*==========================================================*/
/* -------------> Sidebar Footer <------------- */
.sb-footer a.i-label img {
	max-width: 65pt;
	height: auto;
	margin: 0vh auto;
}

.sidebar .badge {
	margin: 0 auto;
	padding: 1% 2%;
}

.sidebar .badge.reg>span:nth-child(1)::after {
	display: none;
}

.sidebar .badge.reg {
	gap: 0;
}

.sidebar .badge.reg>span:first-child {
	padding: 1% 2% 0 2%;
}

.sidebar .badge.reg>span:last-child {
	padding: 0% 2% 0 2%;
}

/*.ftr-slgn > span:nth-child(2) { display: none; }*/
.complabel>ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-content: center;
	justify-content: center;
	gap: .1em 1.5em;
	/*erster wert regelt sidebar version / zweiter wert regelt main footer version*/
	padding: 3%;
}

.complabel {
	width: 100%;
}

.badge.reg span {
	display: block;
	margin: 0 auto;
	text-align: center;
}

.badge.reg>span:nth-child(1)::after {
	content: " ";
	margin: 0 1ch;
}

/* ==============> MAIN <============ */
main.index {
	width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 auto;
}

/* #region ==============> Background Layer <============ */

.background {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	width: 100%;
}

.slide-screen {
	position: fixed;
	z-index: -1;
	inset: 0;
	background-color: #ffffff;
	;
	/*background-image: 

	-webkit-mask-image: linear-gradient(360deg,
			black 0%,
			black 82.5%,
			rgba(0, 0, 0, 0.96) 85%,
			rgba(0, 0, 0, 0.75) 92.5%,
			rgba(0, 0, 0, 0.50) 96%,
			rgba(0, 0, 0, 0.25) 98%,
			transparent 100%);*/
}

.slide-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;

	opacity: 100%;
	/*animation: bgFade 18s infinite;*/
	-webkit-mask-image: linear-gradient(180deg,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 1) 82.5%,
			rgba(0, 0, 0, 0.96) 85%,
			rgba(0, 0, 0, 0.75) 92.5%,
			rgba(0, 0, 0, 0.50) 96%,
			rgba(0, 0, 0, 0.25) 98%,
			transparent 100%);
	mask-image: linear-gradient(180deg,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 1) 82.5%,
			rgba(0, 0, 0, 0.96) 85%,
			rgba(0, 0, 0, 0.75) 90%,
			rgba(0, 0, 0, 0.50) 92.5%,
			rgba(0, 0, 0, 0.25) 95%,
			transparent 100%);
}

.static-backgrounds {
	position: relative;
	top: 95%;
	left: 0;
	height: 100%;
}

.bg-img {
	height: 105vh;
}

.slide-1 {
	background-image: url("assets/multimedia/img/hero/index/famara-intermediate-surf-lesson.png");
	animation-delay: 0s;
	background-position: 50% 100%;
	background-size: 400% auto;
	opacity: 100%;
}

@media (orientation: portrait) and (min-height: 780px) {
	.slide-1 {
		background-position: 53% 100%;
		background-size: 450% auto;
	}

	.hero {
		height: 100vh;
	}
}

.slide-2 {
	background-image: url("assets/img/hero-2.jpg");
	animation-delay: 6s;
	background: red;
	opacity: 0%;
}

.slide-3 {
	background-image: url("assets/img/hero-3.jpg");
	animation-delay: 12s;
	background: yellow;
	opacity: 0%;
}

/*Static NO-SLIDE*/
.no-slide-1 {
	background-image: linear-gradient(180deg,
			rgba(231, 217, 203, .0) 0%,
			rgba(231, 217, 203, .3) 7.5%,
			rgba(231, 217, 203, .96) 16%,
			rgb(231, 217, 203) 35%,
			rgba(231, 217, 203, 1) 65%,
			rgba(231, 217, 203, .95) 100%);
	/*animation-delay: 12s;
	opacity: 100%;
	/*mask-image: linear-gradient(360deg,,
			black 0%,
			black 82.5%,
			rgba(0, 0, 0, 0.96) 85%,
			rgba(0, 0, 0, 0.75) 92.5%,
			rgba(0, 0, 0, 0.50) 96%,
			rgba(0, 0, 0, 0.25) 98%,
			transparent 100%);

	-webkit-mask-image: linear-gradient(360deg,
			black 0%,
			black 82.5%,
			rgba(0, 0, 0, 0.96) 85%,
			rgba(0, 0, 0, 0.75) 92.5%,
			rgba(0, 0, 0, 0.50) 96%,
			rgba(0, 0, 0, 0.25) 98%,
			transparent 100%);*/
}

.no-slide-2 {
	background-image: linear-gradient(180deg,
			rgba(234, 215, 191, .95) 0%,
			rgba(234, 215, 191, .70) 30%,
			rgba(234, 215, 191, .80) 80%,
			rgba(234, 215, 191, 1) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.slide-img {
		animation: none;
	}

	.slide-1 {
		opacity: 1;
	}
}

/* #endregion*/
/* #region* =============> HERO <============= */


/* optional: dunkler Overlay für Lesbarkeit 
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.35);
}*/
section.hero {
	/* padding: 2vh 0 3vh 0; */
	height: 100vh;
	position: relative;
}

section.beginner {
	position: relative;
	width: 100%;
	height: auto;
}

section.beginner div.page-hero {
	position: sticky;
	top: 0vh;
	left: 0;
	z-index: 1;
	height: max-content;
	padding-top: 1vh;
}

.hero .headline.container {
	position: sticky;
	top: 0;
	left: 0;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-auto-flow: column;
	align-content: start;
	padding: 2vh 0 0 0;
	min-height: max-content;
}

.hero hgroup {
	margin: 0 15% 0 5%;
	grid-template-columns: 100%;
	grid-template-rows: minmax(0, 80%) repeat(2, 1fr);
	row-gap: 0;
	align-items: start;
	justify-items: start;
	width: 100%;
	min-height: 0;
}

.tgroup.grid {
	grid-row: 1;
	display: grid;
	grid-template-columns: 40vw 1fr;
	grid-template-rows: minmax(85%, 90%) max-content;
	grid-auto-flow: column dense;
	/* aspect-ratio: 1110 / 1050; */

	width: 100%;
	height: 100%;
}

.logo {
	grid-area: 1 / 1;
	aspect-ratio: 1110 / 1050;
	position: static;
	inset: unset;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*"TAKE"*/
.primary-title {
	grid-row: 1;
	grid-column: 1;
	justify-self: center;
	align-self: center;
	color: var(--hero-brand-color);
	font: var(--hero-brand-font);
	opacity: 12.5%;
	text-shadow: var(--hero-brand-color) -.5px -.5px 1px;
	margin: 0 0 0 0;
	z-index: -1;
}

h1.tgroup span[id="comp-name1"]::after {
	content: " ";
	margin: .2ch;
}

/*"Off"*/


/*"personal surftraining"*/
hgroup.title .wrapper:has(span[class="secondary-title"]) {
	grid-row: 2;
	grid-column: 1 / 3;
	align-self: start;
	margin: 0 0 0 0;
}

.secondary-title {
	font: var(--hero-title-font);
	color: var(--hero-title-color);
	letter-spacing: -3.4%;
	margin: 0;
	flex-wrap: wrap;
}

/*"personal"*/
hgroup.title .wrapper:has(span[class="secondary-title"]) span:first-of-type {
	margin: 0;
}

hgroup.title .wrapper:has(span[class="secondary-title"]) span:last-of-type {
	margin: 0;
}

hgroup.title .wrapper:has(span[class="secondary-title"]) span:first-of-type::after {
	content: " ";
	margin-right: .35ch;
}

/*"surftraining"*/
.secondary-title[class="comp-name3b"] {
	margin: 0;
}

/*"Surf Lessons and Coaching"*/
hgroup.title .wrapper:has(span[class="product-title"]) {
	grid-row: 2;
	font: var(--hero-subtitle-font);
	color: var(--hero-subtitle-color);
}

/*"Surf Lessons"*/
hgroup.title .wrapper:has(span[class="product-title"]) span:first-of-type {}

hgroup.title .wrapper:has(span[class="product-title"]) span:first-of-type::after {
	content: " ";
	margin-right: .7ch;
}

/*"& Coaching"*/
hgroup.title .wrapper:has(span[class="product-title"]) span:nth-of-type(2) {
	font: var(--hero-subtitle-font);
}

/*"Famara..."*/
.location-title {
	grid-row: 3;
	color: var(--hero-location-color);
	font: var(--hero-location-font);
	text-shadow: 0 0 5px #4882a53f;
	margin: 0;
}

/*#endregion ============> HERO <============= */
/* #region* ===========> Overview <============= */

/* #region* ======= Display Swipes ============ */

.card-header div.headline {
	grid-template-columns: 15vw 1fr;
	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-2);
	background-image: linear-gradient(90deg, rgb(64 108 134 / 100%), rgb(64 108 134 / 44%));

}

.page-hero>.headline {
	grid-row: 1;
	grid-column: 1 / 3;
	/* 	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-2);
	background-image: linear-gradient(90deg,rgb(64 108 134 / 100%), rgb(64 108 134 / 44%)); */
	padding-left: 3vw;
	padding-right: 3vw;
	padding-top: clamp(2px, .5vh, 5pt);
	padding-bottom: clamp(8px, 1vh, 10pt);
}

main.page .page-hero>.headline {
	grid-row: 1;
	grid-column: 1 / 3;
}

.page-hero.card-header>img {
	grid-column: 1;
	position: relative;
	grid-row: 1;
	height: auto;
	width: 100%;
	justify-self: center;
	align-self: center;
	margin-left: 4vw;
}

.page-hero .headline>h2 {
	grid-column: 1 / 3;
	grid-row: 1;
	height: 100%;
	/* 	padding-top: clamp(2px, .5vh, 5pt);
	padding-bottom:clamp(8px, 1vh, 10pt); */
}


.service-deck .card-header>nav.breadcrumbs {
	grid-column: 1;
	grid-row: 2;
	padding-left: 3vw;
	padding-right: 3vw;
}

main.page .card-header nav.breadcrumbs {
	width: var(--content-width);
	margin: auto;
	grid-column: 1;
	grid-row: 2;
}

section>.video.card {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: 100%;
	margin: 0 0;
}

/* #region* ======= Dialog ============ */

.i-label,
legend {
	font: var(--form-label-font);
	color: var(--form-label-font-color);
}

main.page fieldset.rqUnits>legend,
main.page fieldset.cstmrCount>legend,
main.page fieldset.rqPrice>legend {
	font-variant: all-small-caps;
	font-size: 1.4rem;
	text-align: left;
	width: clamp(60px, 60%, 30ch)
}

dialog>legend {
	grid-row: 1;
	grid-column: 1/3;
	height: 3vh;
}

.i-label {
	justify-items: end;
	align-content: center;
	font-variant-caps: titling-caps;
}

/* #region* ======= Dialog Header-Bar and close button" ============ */
.dialog {
	background-color: #ffffff;
}

.hdr-bar h2,
.hdr-bar span,
.hdr-bar legend {
	font: var(--dialog-hdr-font);
	align-self: center;
	justify-self: end;
	margin: auto 2% auto 0;
	grid-row: 1;
}

.dialog .headline {
	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-1);
}

.hdr-bar {
	position: sticky;
	top: 0;
	grid-template-columns: 1fr 4.5vh;
	grid-template-rows: 4.5vh;
	justify-content: center;
	align-content: center;
	width: 100%;
	min-height: 32px;
	max-height: 42px;
	height: 4.5vh;
	text-align: left;
	background-color: var(--h2-sectiontitle-color-1);
	border-right: 2px inset rgba(161, 203, 235, 0.5);
	border-left: 1.5px solid rgba(161, 203, 235, 0.5);
	border-top: .5px solid rgba(161, 203, 235, 0.5);
	border-bottom: 1.5px inset rgba(161, 203, 235, 0.5);
	box-shadow:
		inset 0 0 2px .5px rgba(161, 203, 235, 0.5),
		0 0 6px .5px rgba(17, 40, 58, .4);
}

/*#region button */
.btn.i-label {
	align-self: center;
	justify-self: center;
	aspect-ratio: 1 / 1;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	grid-auto-flow: column dense;
	width: auto;
	height: 100%;
	place-items: center;
	overflow: visible;
}

.hdr-bar .btn.i-label {
	grid-template-columns: 100%;
	grid-template-rows: 100%;
}

.i-label:has(input.close),
.i-label:has(input.sidebar-rdo) {
	background-color: rgba(17, 40, 58, .7);
	/* box-shadow: inset 0 0 2px 1px rgba(161, 203, 235, .4); */
	border-right: 2px rgba(161, 203, 235, 0.1);
	border-left: 2px inset rgba(161, 203, 235, 0.5);
	border-top: 2px inset rgba(161, 203, 235, 0.5);
	border-bottom: 2px rgba(161, 203, 235, 0.1);
}

.i-label:has(input.sidebar-rdo) {
	position: relative;
	aspect-ratio: 1 / 1;
	top: 0;
	left: 0;
	min-width: 28px;
	max-width: 48px;
	width: auto;
	margin: 0 auto 0 0;
	background-color: rgba(17, 40, 58, .1);
}

.i-label input {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	background: none;
	padding: 0;
	box-shadow: none;
}

.i-label>output {
	justify-self: end;
	height: 2.1rem;
	font: var(--form-fields-font);
	text-align: left;
}

.hdr-bar .i-label:has(input:hover) {
	background-color: rgba(17, 40, 58, .3);
	box-shadow:
		inset -2px -2px 0 rgba(17, 40, 58, .1),
		inset 1.5px 1.5px 0 rgba(186, 218, 241, .3),
		0.5px 0.5px 1.5px rgba(17, 40, 58, .1);
}

.hdr-bar .i-label:has(input:checked) {
	background-color: rgba(17, 40, 58, .3);
	box-shadow:
		inset .5px .5px 1.5px rgba(17, 40, 58, .1),
		inset -1px -1px 1.5px rgba(17, 40, 58, .1),
		inset -2px -2px 7px rgba(17, 40, 58, .1);
}

/* .btn.i-label input.btn { */
/* 	height: 100%; */
/* 	width: 100%; */
/* 	grid-column: 1; */
/* 	grid-row: 1; */
/* 	z-index: 1; */
/* 	cursor: pointer; */
/* 	justify-self: center; */
/* 	align-self: center; */
/* } */
/*  */
.i-label input,
.i-label .dlg-btn,
.i-label .dlg-rdo {
	z-index: 1;
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	width: 100%;
	background-color: transparent;
	place-self: center;
}

.btn.i-label input:hover,
.i-label input.btn:hover,
.i-label .dlg-btn:hover,
.i-label .dlg-rdo:hover {
	cursor: pointer;
}

.close.icon {
	grid-column: 1;
	grid-row: 1;
	height: auto;
	width: 70%;
	opacity: 100%;
	pointer-events: none;
	z-index: 1;
	align-self: center;
	justify-self: center;
	aspect-ratio: 1/1;
	color: rgba(161, 203, 235, 0.5);
}


/* .hdr-bar .i-label .ttp {
	position: absolute;
	inset: auto;
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	width: 100%;
	opacity: 0%;
	pointer-events: none;
	z-index: 1;
} */

/*#endregion*/
/* #endregion* ======= Dialog Header-Bar and close button" ============ */
/* #region* ======= Dialog Form ============ */
.qcontact {
	right: 0;
	top: 15%;
	margin-bottom: 5vh;
	width: 100vw;
	height: 85vh;
	z-index: 8;
	background-color: rgba(186, 218, 241, 1);
	box-shadow: 0 0 7.5px 0.1px inset rgba(30, 58, 78, 0.5);
	overflow: auto;
	padding-bottom: 1em;
	overflow-x: hidden;
	overflow-y: auto;
}

.qcontact {
	height: clamp(550px, 40vh, 800pt);
}

.qcontact:has(.quick) {
	top: 12%;
}


.qcontact .headline h4,
.dialog .headline h4 {
	width: 90%;
	margin: auto auto;
	padding: 10px 0 5px 0;
	;
}


[data-tooltip-spots],
[data-tooltip-units],
[data-tooltip-price],
[data-tooltip-addmsg],
[data-tooltip-selectemail],
[data-tooltip-selectphone],
[data-tooltip-close],
[data-tooltip-coursedates] {
	position: relative;
}

[data-tooltip-addmsg]:focus-within::after,
[data-tooltip-addmsg]:hover::after,
[data-tooltip-spots]:focus-within::after,
[data-tooltip-spots]:hover::after,
[data-tooltip-selectemail]:focus-within::after,
[data-tooltip-selectemail]:hover::after,
[data-tooltip-selectphone]:focus-within::after,
[data-tooltip-selectphone]:hover::after,
[data-tooltip-units]:focus-within::after,
[data-tooltip-units]:hover::after,
[data-tooltip-price]:focus-within::after,
[data-tooltip-price]:hover::after,
[data-tooltip-coursedates]:focus-within::after,
[data-tooltip-coursedates]:hover::after,
[data-tooltip-close]:focus-within::after,
[data-tooltip-close]:hover::after {
	position: absolute;
	height: max-content;
	width: max-content;
	opacity: 100%;
	pointer-events: none;
	z-index: 1;
	font: var(--ttp-font);
	color: black;
	background-color: rgba(198, 222, 240, 0.726);
	outline: 1px solid rgba(144, 238, 144, 1);
	padding: 0.4em .5em 0.2em .4em;
	box-shadow: 1px 2px 3px #383836;
}


[data-tooltip-addmsg]:focus-within::after,
[data-tooltip-addmsg]:hover::after {
	content: attr(data-tooltip-addmsg);
	position: absolute;
	/* inset: auto; */
	top: -65%;
	left: 7.5%;
	/* transform: translateX(-50%) translateY(100%);*/
}

[data-tooltip-spots]:focus-within::after,
[data-tooltip-spots]:hover::after {
	content: attr(data-tooltip-spots);
	bottom: -65%;
	left: -165%;
}

[data-tooltip-spots]:focus-within::after,
[data-tooltip-spots]:hover::after {
	content: attr(data-tooltip-spots);
	top: -80%;
	left: -40%;
}

[data-tooltip-selectemail]:focus-within::after,
[data-tooltip-selectemail]:hover::after {
	content: attr(data-tooltip-selectemail);
	bottom: -75%;
	right: 10%;
}

[data-tooltip-selectphone]:focus-within::after,
[data-tooltip-selectphone]:hover::after {
	content: attr(data-tooltip-selectphone);
	bottom: -75%;
	right: 10%;
}

[data-tooltip-units]:not(hidden):focus-within::after,
[data-tooltip-units]:not(hidden):hover::after {
	content: attr(data-tooltip-units);
	bottom: -80%;
	right: -20%;
}

[data-tooltip-price]:focus-within::after,
[data-tooltip-price]:hover::after {
	content: attr(data-tooltip-price);
	bottom: -80%;
	right: -10%;
}

[data-tooltip-coursedates]:focus-within::after,
[data-tooltip-coursedates]:hover::after {
	content: attr(data-tooltip-coursedates);
	bottom: 0;
	right: 20%;
}

[data-tooltip-close]:focus-within::after,
[data-tooltip-close]:hover::after {
	content: attr(data-tooltip-close);
	bottom: -90%;
	left: -100%;
	height: max-content;
}

/*#endregion* ==== Display Swipes ============ */
/*#region ==============> INTRO <============ */
/* .intro.card {
	grid-area: a;
	justify-self: start;
	align-self: start;
	position: relative;
	width: 100%;
	
	height: 100%;
	margin: 0 auto;
	}
 */
article.intro {
	grid-template-columns: 25% 1fr;
	grid-template-rows: max-content;
	align-content: center;
	justify-content: center;
	width: 95%;
	margin: 5px auto;
}

.service-card .intro img {
	float: unset;
	aspect-ratio: 10 / 10.5;
	height: auto;
	width: 90%;
	max-width: 100px;
	margin: 3.5%;
	grid-column: 1;
}

.traineradvice {
	font: var(--trainer-advice-font);
	color: var(--trainer-adivce-color);
	grid-column: 2;
	margin: auto 1.5%;
	height: auto;
	text-align: justify;
	text-align-last: start;
	hyphens: auto;

}

.traineradvice span:not(last-child)::after {
	content: "";
	margin: 0 .25ch;
}

.description {
	text-align: justify;
	text-align-last: start;
	hyphens: auto;
}

/* #endregion ============> INTRO <============ */
/* #endregion* ========> Overview <============= */

/* #region =======> Section Titles / DISPLAY SERVICES  <============ */
.display .h2-title

/*#sub-services-row*/
h2 {
	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-2);
}

/*===========================================*/
/* ==============> SURFING PAGE<============ */
/*===========================================*/
/* ==============> DISPLAY SERVICES  <============ */
/* ==============> Reviews<============ */
main.index .reviews {
	height: 50vh;
	overflow: hidden;
	margin: 2vh auto 10vh auto;
}

main.index .reviews iframe {}

/***=================== SPECIFIC CSS ===================***/


/*==================== Media Queries ======================*/
@supports (container-type: scroll-state) {

	main.page .floater .cm-link,
	main.page .floater .faq-link {
		opacity: 0.2;
	}

	main.page .floater .cm-link:hover {
		opacity: 0.8;
	}

	main.page .floater .faq-link:hover {
		opacity: 1;
	}

	div.faq nav.context-nav>.pill {
		opacity: .2;
	}

	/* body.page-body footer {
		transform: translateY(100%);
		opacity: 0;
	} */
	@container page-scroll scroll-state(scrolled: block-end) {

		main.page .floater .cm-link,
		main.page .floater .faq-link {
			opacity: 1;
		}
	}

	@container page-scroll scroll-state(scrolled: block-start) {

		main.page .floater .cm-link,
		main.page.f loater .faq-link {
			opacity: .2;
		}
	}

	@container shortfaq-scroll scroll-state(scrolled: block-end) {
		div.faq nav.context-nav>.pill {
			opacity: 1;
		}
	}

	@container shortfaq-scroll scroll-state(scrolled: block-start) {
		div.faq nav.context-nav>.pill {
			opacity: .2;
		}
	}

	@container page-scroll scroll-state(scrolled: block-start) {
		body.page-body footer {
			transform: translateY(100%);
			opacity: 0;
		}
	}

	/* @container page-scroll scroll-state(scrolled: block-end) { */
	/* 	body.page-body footer { */
	/* 		transform: translateY(0%); */
	/* 		opacity: 1; */
	/* 	} */
	/* } */

}




/*===========================================*/
/* ==============> PAGE <============ */
/*===========================================*/




div.display .page-hero {
	height: max-content;
}

div.display .lesson.included {
	grid-area: e;
	justify-items: end;
	margin-right: -.5em;
}

div.display .lesson.usps {
	grid-area: f;
	margin: 0 auto;
	padding: 0;
	color: var(--trainer-adivce-color);
	align-self: end;
}

div.display .lesson.usps span:first-child {
	font: var(--predicate-list-font);
}

div.display .lesson.usps span:nth-child(2) {
	font: var(--predicate-slogan-font);
}

div.display .lesson.usps span:last-child {
	font: var(--predicate-list-font);
	margin: 0 0 0 0;
}

div.display .price {
	grid-area: b;
}

div.display .video.card {
	grid-area: d;
	width: 85%;

}

div.display .qcontact {
	grid-area: h;
}

.service-deck div.nav-row {
	grid-area: g;
	/* padding: 2% 3%; */
	height: 100%;
	width: 100%;
	margin: 0 auto 1vh auto;
	justify-content: center;
}

.mini-display div.nav-row {
	/* grid-area: g; */
	/* padding: 2% 3%; */
	/* margin: 0 auto 5% auto; */
	height: max-content;
	width: 100%;
	margin: 0 auto;
	position: static;
	bottom: 10vh;
	left: 0;
	justify-content: center;
}

.hdr-bar:not(dialog>.hdr-bar) {
	display: grid;
}

.qcontact>.headline {
	font: var(--h2-form-title-font);
	color: var(--h2-sectiontitle-color-1);
}

nav.context-nav {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	gap: 15%;
	justify-self: start;
	justify-content: space-evenly;
	place-items: start;
	width: 100%;
	margin: 0 auto;
}

.request-row .pill {
	height: 6vh;
	width: 100%;
	padding: 5px;
}

nav.context-nav .pill:has(svg.nav-pin) {
	grid-template-columns: 70% 30%;
	grid-template-rows: 1fr;
	grid-auto-flow: column;
	margin: 5px auto;
	place-items: center;
}

.nav-row nav.context-nav .pill {
	grid-auto-flow: column;
	height: clamp(3lh, 3vw, 6vh);
	margin: 5px auto;
}

.pill svg.nav-pin {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: 100%;
}

label.pill,
a.pill {
	-webkit-link-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

button.pill:hover,
a.pill:hover,
label.pill:has(input:hover) {
	color: var(--footer-links-hover-color);
	background-color: rgba(234, 215, 191, 1);
	font: var(--nav-btn-font);
}



button.pill:active,
a.pill:active,
a.pill:active {
	color: var(--footer-links-hover-color);
	background-color: rgba(234, 215, 191, 1);
	font: var(--nav-btn-font);
	color: var(--footer-links-color);
	box-shadow: inset 0 0 5px .5px rgba(17, 48, 50, .2);
	filter: drop-shadow(1px 2px 1.5px rgba(17, 48, 50, .3));
}

label.pill:has(input.is-used),
a.pill:visited {
	color: var(--footer-links-vstd-color);
}

a.pill .pin.svg {
	/* color: black; */
}

a.pill,
label.pill.btn {
	appearance: none;
	text-decoration: none;
	cursor: pointer;
	overflow-wrap: break-word;
	hyphens: auto;
	width: 100%;
	place-items: center;
	place-self: center;
}

label.pill.btn.gridbox {
	grid-template-columns: 100%;
	grid-auto-flow: column dense;
	justify-items: center;
}

label.pill.btn.gridbox>span:first-of-type {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: auto;
	justify-self: center;
	pointer-events: none;
	z-index: -1;
	text-align: center;
}

label.pill.btn.gridbox>span:last-child {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: auto;
	justify-self: center;
	pointer-events: none;
	z-index: -1;
	text-align: center;
}

label.pill.btn.gridbox input {
	position: relative;
	width: 100%;
	height: 100%;
	grid-column: 1 / 3;
	grid-row: 1;
	opacity: 0;
	justify-self: center;
	z-index: 3;
}

label.pill.btn:hover,
label.pill.btn:active {
	color: var(--footer-links-hover-color);
	background-color: rgba(234, 215, 191, 1);
}

label.pill.btn.is-used {
	color: var(--footer-links-vstd-color);
}

div.request-row.badge {
	align-content: center;
	justify-self: center;
}

section.overview {
	background-color: white;
	width: 100vw;
	grid-column: 1;
}


section.overview .display-content {
	grid-template-columns: repeat(14, 1fr);
	grid-template-rows: repeat(4, max-content);
	grid-template-areas:
		"a a a a a a a  a a a a a a a"
		". b b b b b c  c c c c c c ."
		". d d d d d d  d d d d d d ."
		". e e e e e e  e e e e e e .";
	height: max-content;
	width: 100%;
	justify-content: center;
	align-content: center;
	column-gap: 1%;
	row-gap: 0%;
	align-self: end;
	padding-bottom: 0%;
}

section.swipe.overview .display-content .description {
	grid-area: a;
}

section.swipe.overview .price {
	grid-area: c;
}

section.swipe.overview .included {
	grid-area: b;
}

section.swipe.overview .lesson {
	padding: 0;
}

section.swipe.overview .nav-row {
	grid-area: d;
	justify-items: stretch;
	align-content: end;
	height: 100%;
	width: 100%;
	padding: 1vh 0 1vh 0;
}

/* section.swipe.overview .qcontact {
	grid-area: e;
} */

section.swipe.overview .included span {
	grid-column: 1;
}

section.swipe.overview .included span::before {
	content: "\2713";
	margin-right: 2px;
}

article.mini-display .request-row {
	grid-area: e;
	grid-template-columns: 1fr;
	padding-bottom: 1vh;
}

article.mini-display .context-nav {
	grid-template-columns: repeat(2, 1fr);
}

article.mini-display .context-nav .pill {
	height: clamp(3lh, 3vw, 6vh);
	width: 100%;
}

article.mini-display {
	padding: 5px 5vw 5px 6vw;
}


section.swipe.overview .mini-display.halfmoon .display-content {
	grid-template-areas:
		"a a a a a a a  a a a a a a a"
		". b b b b b b  b c c c c c ."
		". d d d d d d  d d d d d d ."
		". e e e e e e  e e e e e e .";
}

section.swipe.overview .mini-display.halfmoon .included {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, max-content);
	grid-auto-flow: row dense;
	column-gap: 1em;
}

section.swipe.overview .mini-display.halfmoon .included .col2 {
	grid-column: 2;
}


section.swipe.overview .mini-display.halfmoon .included span.col2::before {
	display: none;
}

section.swipe.overview .mini-display.private .display-content {
	grid-template-rows: repeat(5, max-content);
	grid-template-areas:
		"a a a a a a a  a a a a a a a"
		"b b b b b b c  c c c c c c ."
		". s s s s s s  s s s s s s ."
		". d d d d d d  d d d d d d ."
		". e e e e e e  e e e e e e .";
}

section.swipe.overview .mini-display.private .display-content aside {
	grid-area: s;
	font: var(--included-mini-font);
	color: #394740;
	margin: 0 0 2% 0;
	text-align: right;
}

.detail-card article.mini-display .mini-display {
	padding: 1vw 3vw;
}

.detail-card article.mini-display .intro {
	padding: 0 3vw 8vh 3vw;
}

/*****===== Interaktive Form=====*****/

form.request {
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(10, max-content);
	justify-items: center;
}

form.quick.request {
	grid-template-rows: repeat(10, max-content);
	grid-template-areas:
		". . . .   . . . a   a a a ."
		". . . .   . . . a   a a a ."
		". . . .   . . . a   a a a ."
		"b b b b   b b b b   b b b b"
		"c c c c   c c c c   c c c c"
		"d d d d   d d d d   d d d d"
		"e e e e   e e e e   e e e e"
		"f f f f   f f f f   f f f f"
		"g g g g   g g g g   g g g g"
		"h h h h   h h h h   h h h h"
		"i i i i   i i i i   i i i i"
		"j j j j   j j j j   j j j j";

	/* Surface Duo */
	/*
		". . . .   . . . a   a a a ."
		"b b b b   b b b b   b b b b"
		"c c c c   c c c c   c c c c"
		"d d d d   d d d d   d d d d"
		"e e e e   e e e e   e e e e"
		"f f f f   f f f f   f f f f";*/

	width: 100%;
	/*margin-top: -12.5%;  <-- for Surface Duo /*adjustment for deskto necessary as well*/
	margin-top: -5vh;
}

form.specific.request {
	grid-template-areas:
		"a a a a   b b b b   c c c c"
		"e e e e   e e e e   e e e e"
		"f f f f   f f f f   f f f f"
		"d d d d   d d d d   d d d d"


		"g g g g   g g g g   g g g g"
		"h h h h   h h h h   h h h h"
		"i i i i   i i i i   i i i i"
		"j j j j   j j j j   j j j j"
		"k k k k   k k k k   k k k k"
		"l l l l   l l l l   l l l l";
	width: 100%;
}

form.generic.request {
	grid-template-areas:
		"a a a a   b b b b   c c c c"
		"d d d d   d d d d   d d d d"
		"e e e e   e e e e   e e e e"
		"f f f f   f f f f   f f f f"
		"g g g g   g g g g   g g g g"
		"h h h h   h h h h   h h h h"
		"i i i i   i i i i   i i i i"
		"j j j j   j j j j   j j j j"
		"k k k k   k k k k   k k k k"
		"l l l l   l l l l   l l l l";
	width: 100%;
}

/*#region Legende*/
/*
a = Customer Count / Spots
b = Units / Session Count / Iteration Count
c = Total Price
d = Course Dates Select
e = Arrival / Departure
f = Names
g = Contact
h = Message
i = Opt-in / Consent
j = Status / Errors / Hints
k = Human Check
l = Send
*/
/*#endregion Legende*/

.request fieldset {
	width: 85%;
	margin: 1vh auto;
}

/* #region apply own styles*/

.i-label input[type="checkbox"],
.i-label input[type="text"],
.i-label textarea,
.i-label input[type="date"],
.i-label input[type="email"],
.i-label input[type="tel"],
fieldset,
textarea,
button {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	box-shadow: none;
	cursor: pointer;
	padding-left: 1ch;
	padding-right: 1ch;
}

.btn.send {
	width: 50%;
	height: 7.5vh;
	margin: 0 auto 1vh auto;
	background-color: var(--submit-btn-color);
	border: none;
	color: rgba(7, 106, 51, 0.7);
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font: var(--submit-btn-font);
	box-shadow: inset -1.5px -1.5px .5px 1px rgba(255, 255, 255, 0.6),
		inset 1px 1px .5px .5px rgba(255, 255, 255, 0.6);
	border-radius: 2px;
	font-size: 1.5em
}

/* #endregion apply own styles*/

.request fieldset select,
.request fieldset input,
.request fieldset textarea {
	cursor: auto;
	font: var(--form-fields-font);
}

.request fieldset textarea {
	font: var(--textarea-font);
}

.i-label>input[type="text"],
textarea,

.i-label>input[type="date"],
.i-label>input[type="tel"],
.i-label>input[type="email"],
.i-label>input[type="date"],
.i-label>input[type="number"],
.i-label>textarea {
	background-color: var(--form-fields-color-alpha);
	justify-self: end;
	height: 2.1rem;
	font: var(--form-fields-font);

}

.i-label>input[type="number"],
.i-label>input[type="tel"],
.i-label>input[type="text"],
.i-label>input[type="email"],
.i-label>input[type="date"] {
	box-shadow: var(--from-fields-shadow2);
	outline: var(--form-fields-outline);
}

.i-label>input[type="number"] {
	background-color: var(--form-fields-color-alpha);
	text-align: center;
}

.quick.request input[type="number"] {
	background-color: var(--form-fields-color-alpha);
	color: black;
	padding: 1ch 3px 1ch 0;
	text-align: center;
	border: 3px solid var(--h2-sectiontitle-color-1);
	border-radius: 2px;
}

.request fieldset select {
	background-color: var(--form-fields-color2);
	box-shadow: var(--from-fields-shadow2);
	outline: var(--form-fields-outline);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1rem) 55%,
		calc(100% - .7rem) 55%;
	background-size:
		.35rem .35rem,
		.35rem .35rem;
	background-repeat: no-repeat;
	width: 100%;
	min-width: 0;
	height: 2.1rem;
	padding: 3px 2.2rem 0 1ch;
	border-radius: 2px;
}

select.courseSelect:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.request fieldset select:focus,
.request fieldset input:focus,
.request fieldset textarea:focus {
	outline: 1.5pt solid rgba(255, 255, 255, 0.486);
}


/* #region Customer Count*/

fieldset.cstmrCount>legend {
	text-align: center;
}

fieldset.cstmrCount {
	grid-area: a;

	min-height: 0;
	height: auto;
	width: clamp(10ch, 50%, 30ch);
	justify-self: start;
	align-self: center;
	margin: auto 5vw;
}

.quick.request fieldset.cstmrCount {
	align-self: end;
}

/* #endregion Customer Count*/

fieldset.rqUnits {
	grid-area: b;
	min-height: 0;
	text-align: center;
	align-self: center;
	width: clamp(10ch, 50%, 30ch);
}

/* #region C Price*/
fieldset.rqPrice {
	grid-area: c;
	margin: auto;
	align-self: center;
	width: clamp(10ch, 50%, 30ch);
}

fieldset.rqPrice .l-sum {
	background-color: var(--form-fields-color-alpha);
	align-items: center;
	justify-content: center;
	gap: .25ch;
	height: 2.1rem;
	width: 100%;
}

fieldset.rqPrice .l-sum>output,
fieldset.rqPrice .l-sum>span {
	display: flex;
	align-items: center;
	height: 100%;
	font: var(--form-fields-font);
}

/* #endregion Price*/

/* #region D Select field: Halfmoon / Course Dates */
fieldset.hmDates {
	grid-area: d;
}

fieldset.hmDates .i-label {
	position: relative;
	width: 100%;
	align-items: center;
	gap: .5ch;
}

fieldset.hmDates .i-label>span {
	flex: 0 0 max-content;
	pointer-events: none;
}

form.request .courseSelect option {
	font: var(--select-option-font);
}

/* #endregion Selec	t field: Halfmoon / Course Dates */

/*#region Arrival/Departure */
fieldset.trDates {
	grid-area: e;
	position: relative;
	grid-template-columns: repeat(2, 47.5%);
	grid-template-rows: 1fr;
	row-gap: 10%;
	column-gap: 5%;
	height: auto;
	grid-auto-flow: dense;
}

.quick fieldset.trDates {
	grid-area: b;
}

/* #endregion Arrival/Departure */

/*#region Customer Name */
fieldset.cstmrName {
	grid-area: f;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3, max-content);
	justify-content: center;
	align-content: center;
	gap: 5px;
}

.quick fieldset.cstmrName {
	grid-area: c;
}

fieldset.cstmrName .i-label>span,
fieldset.cstmrName .i-label>input {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	justify-self: center;
	align-self: center;
}

fieldset.cstmrName .i-label:has(input:not(:placeholder-shown)) span {
	opacity: 0;
}

/* #endregion Customer Name */

/*#region Customer Contact */
fieldset.cstmrContact {
	grid-area: a;
	position: relative;
	grid-template-columns: repeat(2, 49%);
	place-items: center;
	justify-items: stretch;
	justify-self: center;
	gap: 2%;

}

.specific.request fieldset.cstmrContact,
.quick.request fieldset.cstmrContact {
	grid-area: g;
}

fieldset.cstmrContact:has(input[type="radio"]:checked) {
	grid-template-rows: 1vh repeat(2, 2.1rem);
}

/*-> nothing selected <-*/
fieldset.cstmrContact:not(:has(input[type="radio"]:checked)) {
	grid-template-rows: 1vh 2.1rem .1px;
}

/*->Elements and their Position<-*/
fieldset.cstmrContact:has(input[type="radio"]:not(:checked)) .i-label {
	grid-template-rows: 3vh;
	grid-template-columns: 100%;
	background-color: unset;
	box-shadow: inset 0 0 5px 0 rgba(248, 189, 64, 0.50);
	height: 100%;
	grid-row: 3;
}

fieldset.cstmrContact:has(input[type="radio"]:not(:checked)) .btn.i-label {
	grid-template-rows: 3vh;
	grid-template-columns: 100%;
	background-color: rgb(235, 205, 140);
	box-shadow: var(--from-fields-shadow);
	height: 100%;
	width: 100%;
	grid-row: 2;
}

/*fieldset.cstmrContact .svg.glyph*/
.btn.i-label .svg.glyph {
	height: 100%;
	width: 100%;
	grid-column: 1;
	grid-row: 1;
	z-index: auto;
	cursor: pointer;
	pointer-events: none;
}

/*#region Email/Phone Fields Style*/
/*#region Span & Input layered*/
fieldset.cstmrContact .i-label>span,
fieldset.cstmrContact .i-label>input {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	justify-self: center;
	align-self: center;
	z-index: auto;
}

fieldset.cstmrContact .i-label>span {
	pointer-events: none;
}

/*#endregion Span & Input layered*/
/*#region Hide Custom Placeholder*/
fieldset.cstmrContact .i-label:has(input:not(:placeholder-shown)) span {
	opacity: 0;
}

/*#endregion Hide Custom Placeholder*/
/*#region -> nothing selected <-*/
fieldset.cstmrContact:has(input[value="email"]:not(:checked)) .i-label.l-emailInput,
fieldset.cstmrContact:has(input[value="phone"]:not(:checked)) .i-label.l-phoneInput {
	/*later easier via js: add "sr-only" class attibute*/
	width: 1px;
	position: absolute;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*end#region -> nothing selected <-*/

/*#region -> email selected <-*/
fieldset.cstmrContact:has(input[value="email"]:checked) .btn.i-label.l-selectEmail {
	background-color: var(--form-fields-color1);
}

/*email takes both columns*/
fieldset.cstmrContact:has(input[value="email"]:checked) .i-label.l-emailInput {
	grid-column: 1 / 3;
}

fieldset.cstmrContact:has(input[value="email"]:checked) .i-label.l-phoneInput {
	/*later easier via js: add "sr-only" class attibute*/
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*#endregion -> email selected <-*/

/*#region -> phone selected <-*/
fieldset.cstmrContact:has(input[value="phone"]:checked) .btn.i-label.l-selectPhone {
	background-color: var(--form-fields-color1);
}

/*->phone takes both columns<-*/
fieldset.cstmrContact:has(input[value="phone"]:checked) .i-label.l-phoneInput {
	grid-column: 1 / 3;
}

fieldset.cstmrContact:has(input[value="phone"]:checked) .i-label.l-emailInput {
	/*later easier via js: add "sr-only" class attibute*/
	width: 1px;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*#endregion -> phone selected <-*/
/*#endregion Interactive Styles*/
/*#endregion Customer Contact */

/*#region Message */

div.cstmrMsg {
	grid-area: h;
	grid-template-columns: 48px;
	grid-template-rows: 2em;
	justify-items: center;
	align-items: center;
	margin: 0 auto;
	width: 80%;
	height: auto;
	background-color: rgb(235, 205, 140);
	box-shadow: var(--from-fields-shadow);
}

.generic.request fieldset.cstmrContact {
	grid-area: g;
}

div.cstmrMsg fieldset.cstmrMsg {
	display: contents
		/* grid-row: 2 ; */
		/* grid-column: 1 / 3; */
		/* width: 100%; */
		/* margin-top: 3%; */
		/* height: max-content; */
		/* background-color: none; */
}

.cstmrMsg>legend {
	grid-row: 1;
	grid-column: 1 / 3;
	height: max-content;
	display: block;
	align-self: end;
	margin: auto;
}

.cstmrMsg>legend>h5 {

	margin: auto;
}

.quick div.cstmrMsg {
	grid-area: e;
}

div.cstmrMsg .btn.i-label {
	display: contents;
	/* aspect-ratio: 1 / 3; */
	/* grid-row: 1 ; */
	/* grid-column: 1 / 3; */
	/* justify-items: end; */
	/* align-items: end; */
	/* height: 100%; */
	/* width: 100%; */
	/* justify-self: end; */
}

div.cstmrMsg .btn.i-label input {
	grid-row: 1;
	grid-column: 1 / 3;
}

div.cstmrMsg:has(.addMsg:checked) fieldset.cstmrMsg textarea {
	grid-column: 1 / 3;
	grid-row: 2;
	display: block;
	grid-row: 2;
	height: 10lh;
	width: 95%;
	margin: 1% auto 2.5% auto;
	overflow: auto;
	background-color:
		/*var(--textarea-background)*/
		white;
	grid-row: 2;
}

div.cstmrMsg:not(:has(.addMsg:checked)) fieldset.cstmrMsg textarea {
	display: none;
	font: var(--textarea-font1);
}

div.grid.cstmrMsg svg.glyph {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	justify-self: start;
	padding: 2pt;
}

/*#endregion Message */

.request .form-status {
	grid-area: j;
}

.request .antispam {
	grid-area: k;
}

.request .send {
	grid-area: l;
	width: 70%;

}

.quick.request .send {
	grid-area: j;
}

/* #region GDPR / Consent checkbox */

div.complianceOptIn {
	grid-template-columns: max-content 1fr;
	grid-template-rows: max-content 1fr;
	place-items: center;
	column-gap: .75ch;
	height: auto;
	width: 80%;
	margin: .5rem auto;
	font:
		/* var(--form-GDPRlink-font) */
		var(--form-optIn-font);
	color: var(--trainer-adivce-color);

}

.request .complianceOptIn {
	grid-area: i;
}


div.complianceOptIn input[type="checkbox"] {
	grid-column: 1;
	justify-self: start;
	align-self: start;
	-webkit-appearance: none;
	appearance: none;

	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: .1em 0 0 0;

	border: 2px solid rgba(17, 48, 50, .65);
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .45);

	box-shadow:
		inset -1px -1px .5px rgba(255, 255, 255, .7),
		inset 1px 1px .5px rgba(17, 48, 50, .15);

	cursor: pointer;
}

.complianceOptIn input[type="checkbox"]:checked {

	background-image: url("assets/multimedia/img/symbols/check.svg");
	/* linear-gradient(45deg, transparent 45%, rgba(17, 48, 50, .85) 45%, rgba(17, 48, 50, .85) 58%, transparent 58%), */
	/* linear-gradient(-45deg, transparent 38%, rgba(17, 48, 50, .85) 38%, rgba(17, 48, 50, .85) 52%, transparent 52%); */
	/* background-size: */
	/* 	55% 55%, */
	/* 	85% 85%; */
	/* background-position: */
	/* 	18% 55%, */
	/* 	58% 48%; */
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.complianceOptIn .l-gdpr {
	display: contents;
	font: var(--form-optIn-font);
	text-align: justify;
	align-self: start;
	justify-self: end;
	margin: 0;
}

.complianceOptIn a {
	grid-row: 2;
	grid-column: 1;
	justify-self: start;
}

/* .l-gdpr:has(input:checked)::before {

.complianceOptIninput[type="checkbox"]:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}

.complianceOptIn a {
	justify-self: start;
	width: max-content;
}
			/*#endregion*/

/* #region Anti Spam*/
.antispam.container {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hp-field {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.hp-field input {
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
}

/* #endregion antispam*/

/* ==========================================================
   CARDSTACK STAGE 1 CLEAN MODULE
   Scope: only .service-deck / .deck-* / .service-stack / .service-card.
   Original inner modules such as .hero, .display, .grid, .flexrow, .header,
   .footer, .qcontact, etc. are not restyled here.
   IDs are intentionally not used for styling; the radio state is mapped by
   source order via .state-radio:nth-of-type().
   ========================================================== */

/* #region ===== Cardstack macro shell ===== */
.service-deck {
	position: relative;
	top: -1svh;
	min-height: 101svh;
	isolation: isolate;
	overflow: hidden;
	padding-top: 1vh;
	scroll-snap-align: start;
}

.service-deck>.state-radio {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.service-deck>.deck-shell {
	position: sticky;
	top: 0;
	min-height: 0;
	height: 100svh;
	width: 100%;
	overflow: visible;
	padding: 0;
}

.service-deck .deck-stage {
	overflow-x: hidden;
	position: relative;
	height: 100%;
	width: 100vw;
	min-width: 0;
	min-height: 0;
	overflow-y: visible;
}

/* #endregion ===== Cardstack macro shell ===== */

/* #region ===== Stack layers ===== */
.service-deck .service-stack {
	position: absolute;
	inset: 0;
	min-width: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateX(4vw) scale(.985);
	transition: opacity .25s ease, transform .35s ease;
}

/*
	State order in HTML:
	1 beginner-main
	2 beginner-detail
	3 advanced-main
	4 advanced-detail
	5 skate-main
	6 skate-detail
*/
/* active service stack */
.service-deck:has(.deck-tabs .tab-stack.beginner input.state-radio:checked) .beginner-stack,
.service-deck:has(.deck-tabs .tab-stack.advanced input.state-radio:checked) .advanced-stack,
.service-deck:has(.deck-tabs .tab-stack.surfskate input.state-radio:checked) .skate-stack {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0) scale(1);
	z-index: 0;
}

/* #endregion ===== Stack layers ===== */

/* #region ===== Cards and card scroll areas ===== */
.service-deck .service-card {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* border-radius: 1.3rem; */
	box-shadow: 0 1.1rem 2.5rem rgba(0, 0, 0, .24);
	transition: transform .35s ease, opacity .25s ease;
	justify-content: center;
}

.service-deck .main-card {
	z-index: 5;

}

.service-deck .detail-card {
	z-index: 6;
	opacity: 0;
	padding-bottom: 50px;
	pointer-events: none;
	transform: translateX(-105%);
	overflow-y: scroll;
}

div.page-hero.card-header {
	display: grid;
	position: sticky;
	inset: 6vh 0 auto 0;
	z-index: 7;
	width: 100%;
	height: auto;
	padding: 0;
	grid-template-columns: 7vh 1fr;
	grid-template-rows: max-content max-content;
	justify-content: start;
	align-items: end;
	background-color: rgba(231, 217, 203, .95);
}


.service-deck .main-card .card-scroll {
	/* clamp(27.5%, 2svw, 140pt)  */
	/* 	inset: clamp(16.5%, 20svw, 140pt) 0 0 0 ;  */
	overflow: hidden;
	overscroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0;
	height: 100%;
	margin-top: clamp(35px, 5svh, 140px);
}

.service-deck .detail-card .card-scroll {
	/* clamp(27.5%, 2svw, 140pt)  */
	/* 	inset: clamp(16.5%, 20svw, 140pt) 0 0 0 ;  */
	overflow: hidden;
	overscroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 1vh;
	height: auto;
	margin-top: clamp(20px, 12svw, 100px);
}

/* detail card comes forward */
.service-deck:has(nav.deck-tabs .tab-stack.beginner label.detail-switch input.state-radio:checked) .beginner-stack .detail-card,
.service-deck:has(nav.deck-tabs .tab-stack.advanced label.detail-switch input.state-radio:checked) .advanced-stack .detail-card,
.service-deck:has(nav.deck-tabs .tab-stack.surfskate label.detail-switch input.state-radio:checked) .skate-stack .detail-card {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

/* #endregion ===== Cards and card scroll areas ===== */

/* #region ===== Card tabs / lashes Design ===== */
/*==== Tab-Navigaton Container ====*/
/*Auskommentiert um Den unteren block für psteres verschiben der navtabs zu designen*/
nav.deck-tabs {
	position: absolute;
	bottom: 5%;
	left: 0px;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3, max-content);
	grid-auto-flow: row dense;
	gap: 1vh 0;
	width: 50px;
	z-index: 1;
}

/*Wenn detail-switch aktiviert, hide navbar, event-listener auf datail-page: swipe-links = zurück zur ursprünglichen seite, touch oder swipe auf hidden nav bar = transform/translateX */
nav.deck-tabs.is-peeking {
	--tab-stack-height: 28vh;
	position: absolute;
	bottom: 5%;
	left: 0;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, max-content);
	grid-auto-flow: row dense;
	gap: 1vh;
	width: 10vw;
	z-index: 1;
	transform: translateX(-79%);
}


/*==== Tab-Stacks ====*/
nav.deck-tabs div.tab-stack {
	height: 100%;
}

/*==== Tabs (label) ====*/
nav.deck-tabs div.tab-stack label {
	grid-template-columns: 100%;
	writing-mode: sideways-lr;
	text-orientation: mixed;
	justify-content: center;
	align-content: end;
	/* 	margin: 0 1px; */
	font: 800 clamp(15px, 9vw, 40px)/ clamp(16px, 8vw, 44px) 'League Gothic';
	font-variant: all-small-caps;
	letter-spacing: 1px;
	color: rgba(45, 74, 77, 0.85);

}

/*¡container vertical! roles of rows/columns reversed.*/

nav.deck-tabs div.tab-stack label.main-tab {
	grid-template-rows: max-content max-content;
	/*container vertical! roles of rows/columns is reversed.*/
	/* grid-template-columns: 100%; */
	height: 16.5vh;
}

nav.deck-tabs div.tab-stack label.detail-switch {
	grid-template-rows: max-content max-content;
	/*container vertical! roles of rows/columns is reversed.*/
	/* grid-template-columns: 100%; */
	height: 18.5vh;
}

/*main-tab and detail-switch element dimensions*/
nav.deck-tabs div.tab-stack label.main-tab {
	z-index: 2;
	box-shadow: inset 0 0 3px .25px rgba(64, 108, 134, .65),
		3px 0px 10px 0px rgba(64, 108, 134, .2);
	background-color: rgba(234, 215, 191, 1);
	width: 40px
		/* 9.75vw */
	;
	border-radius: 0 7px 7px 0;
}

nav.deck-tabs div.tab-stack label.detail-switch {
	z-index: 1;
	background-color: rgb(212, 201, 186);
	box-shadow: inset 2px 5px 10px 1.5px rgba(64, 108, 134, .3),
		2px 2px 5px 2.5px rgba(64, 108, 134, .3);
	outline: 2px solid rgba(248, 189, 64, 0.96);
	width: 35px;
	border-radius: 0 0 7px 0;
	margin-top: -5px;
}

/* elements stacked*/
nav.deck-tabs div.tab-stack label>span {
	grid-column: 1;
	grid-row: 1;
	height: fit-content;
	width: 100%;
	justify-self: center;
	;
}

nav.deck-tabs div.tab-stack label>input {
	grid-column: 1;
	grid-row: 2;
	margin: 0 4px 0 0;
	align-self: start;
	background-color: rgb(64 108 134 / 100%);
	border-top-right-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
}

nav.decks-tabs:has(label.detail-switch input:checked) {
	left: 10vw;
}

/* sollte funktionieren sbald js für das ausblenden der detail-tabs arbeitet.  nav.deck-tabs:has(div.tab-stack>label.detail-switch:checked) input {
	background-color: rgba(248, 189, 64, 0.96);
}  */

nav.deck-tabs div.tab-stack label.main-tab>input {
	height: 100%;
	width: 6px;
}

nav.deck-tabs div.tab-stack label.detail-switch>input {
	height: 100%;
	width: 6px;
}

/* #endregion ===== Card tabs / lashes Design ===== */
/*Display Logic for main tabs and detail switches */
nav.deck-tabs div.tab-stack:has(label.main-tab input:checked) {
	grid-row: 1;
}

/*here a js-script will be necessary to add the class "sr-only"; interim: display:none*/
nav.deck-tabs div.tab-stack:not(:has(label.main-tab input:checked)) .detail-switch {
	height: 0;
	width: 0;
	/* display:none; */
}

nav.deck-tabs div.tab-stack label.main-tab input:checked {
	background-color: rgba(248, 189, 64, 0.96);
}

nav.deck-tabs div.tab-stack label.main-tab:has(input:checked) {
	outline: 2px solid rgba(248, 189, 64, 0.96);
	box-shadow: inset 0px 0px 10px 1px rgba(64, 108, 134, .3),
		2px 2px 4px 2.5px rgba(64, 108, 134, .3);
	color: rgba(101, 123, 126, 0.85);
}

/* #endregion ===== Card tabs / lashes ===== */

/* #region ===== Width/overflow adaptation for imported modules ===== */
.service-deck .service-card .display,
.service-deck .service-card .qcontact,
.service-deck .service-card .swipe,
.service-deck .service-card .page,
.service-deck .service-card .container,
.service-deck .service-card section.overview {
	max-width: 100%;
}

.service-deck .service-card .display {
	width: 100%;
}



.service-deck .service-card .mediaslider,
.service-deck .service-card .card-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

/***======= #region GENERAL FAQ ====== ***/

dialog.generic-faq {
	top: 12vh;
	left: 0;
	z-index: 50;
	height: 80vh;
	width: clamp(350px, 60vw, 800px);
	border-radius: 7px;
	overflow-y: auto;
}

dialog.generic-faq[data-faq-src="/partials/faq-content.html"] {
	top: clamp(40px, 15vh, 80px);
	margin-bottom: clamp(40p, 15vh, 80px);
}

/* dialog.generic-faq .hdr-bar {
	    grid-template-columns: 1fr clamp(28px 10vw 48px);
		grid-template-rows: 10vw;
		height: 10vw;
} */
dialog.generic-faq .hdr-bar h2,
dialog.generic-faq .hdr-bar span,
dialog.generic-faq .hdr-bar legend {
	justify-self: start;
	font-size: 1.4rem;
	line-height: 1.4rem;
	margin: .5% 0 0 2.5%;
}

.faq-item {
	border: 1px solid #bbb;
	background: #fff;
	margin: 0 0 .3rem 0;
	overflow: hidden;
	font: var(--main-description-font);
}

.faq-item[open] .faq-summary {
	border-bottom: 1px solid #bbb;
}

.faq-item:first-child {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.faq-item:last-child {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

.faq-summary {
	cursor: pointer;
	list-style: none;
	padding: 0.6rem .7rem;
	background: #f3f3f3;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: #466c76;
	font: var(--description-predicate-font);
}

.faq-summary h3 {
	text-shadow: none;
}

.faq-summary::-webkit-details-marker {
	display: none;
}

.faq-summary::before {
	content: "+";
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 auto;
	width: 1rem;
	text-align: center;
	margin-top: 0.1rem;
}

.faq-item[open] .faq-summary::before {
	content: "\2212";
}

.faq-question {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
}

.faq-answer {
	padding: .6rem 1rem;
	background: #fff;
	overflow: auto;
}

.faq-answer p {
	line-height: 1.3rem;
	font-size: 1.1rem;
	margin: 0 2ch;
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

/***======= #endregion GENERAL FAQ ====== ***/

/*#region ===Map Dialog===*/
.map-wrapper {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 1% 0;
	margin: 0 auto;
	justify-items: center;
	align-items: center;
	padding: 1% 1% 0 1%;
	box-shadow: 0 0 5px inset rgba(64, 108, 134, .5);
}

.sk8map,
.surfmap {
	aspect-ratio: 3/2;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	justify-content: space-between;
}

main.page .sk8map,
main.page .surfmap {
	width: 100%;
	height: 100%;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 12fr 2fr;
	justify-content: stretch;
	align-self: center;
	aspect-ratio: auto;
}

.sk8map iframe,
.surfmap iframe {
	height: 100%;
	width: 100%;
	grid-column: 1 / 3;
	grid-row: 1;
	box-shadow: 0 0 2px rgba(64, 108, 134, .3);
}

dialog .sk8map {
	display: none;
}

div.meeting-point .surfmap iframe {
	height: 100%;
	width: 100%;
	grid-column: 1 / 3;
	grid-row: 1;
	box-shadow: 0 0 2px rgba(64, 108, 134, .3);
}

dialog.small-map[data-dialog-topic="halfmoon"] .sk8map,
dialog.small-map[data-dialog-topic="deepdip"] .sk8map {
	display: grid;
}

dialog.small-map[data-dialog-topic="surfsk8"] .surfmap {
	display: none;
}

dialog.small-map[data-dialog-topic="surfsk8"] .sk8map {
	display: grid;
}

.sk8map h5,
.surfmap h5 {
	position: relative;
	grid-column: 1 / 3;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	font: var(--hero-brand-font);
	font-size: 1.5rem;
	font-variant-ligatures: none;
	color: rgb(238, 241, 243);
	text-shadow: 2px 5px 4px rgba(64, 108, 134, .5);
	margin: 1% 2.5%;
}

.sk8map>a:first-of-type,
.surfmap>a:first-of-type {
	justify-self: start;
	grid-row: 2;
	margin-left: 5px;
}

.sk8map>a:last-of-type,
.surfmap>a:last-of-type {
	justify-self: end;
	grid-row: 2;
	margin-right: 5px;
}

.sk8map>a,
.surfmap>a {
	font: var(--footer-link-font);
	font-size: .8em;
	margin: 2%;
}

/*#endregion ===Map Dialog===*/
/***======= #region JS hook um FAQ-icon erst auf tab-stacks einzublenden ====== ***/
html.is-before-deck-content .floater .faq-link .pseudo.icon {
	color: transparent;
}

html.has-deck-content-visible .floater .faq-link .pseudo.icon {
	color: var(--floater-color);
}

/***======= #endregion JS hook um FAQ-icon erst auf tab-stacks einzublenden ====== ***/

/* @media (max-width: 700px) {
	.service-deck > .deck-shell {
		padding: 8svh 3vw 4svh 4.95rem;
	}

	.service-deck .stack-tab {
		left: .15rem;
		width: 4.6rem;
		min-height: 6.5rem;
		font-size: .82rem;
	}
}
 */
@media (orientation:portrait) {

	.main-hdr>.navbar .nav-menu {
		display: none
	}

	footer {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0;
		height: 6vh;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		transform: translateY(100%);
		transition: opacity .25s ease, transform .25s ease;

	}

	body.is-card-scroll-end footer {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}


	footer .complabel.grid {
		grid-template-columns: 100%;
		grid-template-rows: max-content;
		grid-template-areas:

			"lice"
			"copy"
			"role";
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	footer a[aria-labelledby="logo-link-label"],
	footer .comp-name-estd,
	footer .comp-name-alt,
	footer .reg,
	footer .address.badge.flexcol {
		display: none;
	}

	footer .complabel .badge.licences {
		margin: 2px;

	}

	footer .complabel .badge.cpyrit {
		margin: 0 auto 2px auto;
	}

	footer .ftr-links:not(.ftr-links>a:nth-child(3)) {
		display: none;
	}

	footer .complabel .usps.flexrow {
		flex-direction: row-reverse;
	}

	footer ul.usps>li:nth-child(4)::after,
	footer ul.usps>li:nth-child(4)::before,
	footer ul.usps>li:nth-child(3)::after,
	footer ul.usps>li:nth-child(4) {
		display: none;
	}

	footer ul.usps {
		display: none;
		padding-bottom: 5px;
		margin-left: 2.5%;
		gap: 1.5em;
	}
}

/*==============================PAGES==============================*/
/*#region=======================Header Brand und Logo=====================*/
.brand {
	grid-template-columns: 25% 1fr;
	grid-template-rows: 22.5% 20% 22.5% 32.5% 1fr;
	grid-template-areas:
		"logo .    "
		"logo line1"
		"logo line2"
		"logo line3"
		"logo .    ";
	grid-auto-flow: column dense;
	justify-items: center;
	align-items: center;
	height: 8vh;
	width: 80%;
}

a.brand {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.brand>.logo {
	grid-area: logo;
	justify-self: center;
	align-self: center;
	height: auto;
	width: clamp(60px, 100%, 80px);
	overflow: visible;

}

.brand>.primary-title {
	grid-area: line1;
	justify-self: start;
	align-self: end;
	font-size: 2.5em;
	line-height: 1.2em;
}

.brand>.primary-title>span:first-child::after {
	content: " ";
	margin: 0 .05rem;

}

.brand>.wrapper:nth-child(3) {
	grid-area: line2;
	justify-self: start;
	align-self: end;
	font-size: 1.8em;
	line-height: 1.2em;

}

.brand>.wrapper:nth-child(3)>span:first-child::after {
	content: " ";
	margin: 0 .05rem;
}

.brand>.wrapper:nth-child(4) {
	display: none;
	grid-area: line3;
	font-size: .6em;
	line-height: 1.2em;
	margin: 0;
}

.brand>.location-title {
	grid-area: line3;
	justify-self: start;
	align-self: center;
	font-size: 1em;
	line-height: 1.2em;
	margin: 0;

}

.logo {
	height: 100%;
	justify-self: center;
}

.brand>.primary-title span {
	font-size: .5em;
	line-height: .6em;
}

.brand>.wrapper:nth-child(3) span {
	font-size: .5em;
	line-height: .6em;
}

.brand>.wrapper:nth-child(4) span {
	font-size: .5em;
	line-height: .6em;
}

/*#endregion=======================Header Brand und Logo=====================*/

/*#region============Beginner & Refresher========================*/
main.page {
	grid-template-columns: 100%;
	grid-template-rows: max-content 1fr;
	grid-template-areas:
		"a a a  a a a  a a a"
		"b b b  b b b  b b b";
	height: 100%;
	width: 100vw;
	margin: 7.25vh 0 15vh 0;
	overflow-y: scroll;
	overflow-x: hidden;
}

section.page-hero {
	grid-area: a;
	grid-template-columns: 100%;
	grid-template-rows: repeat(2, max-content);
	height: auto;
	width: 100%;
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: rgba(231, 217, 203, .95);
}

main.page section.page-hero h1 {
	grid-template-columns: 100%;
	font-size: 1.1em;
	line-height: .7em;
	font-weight: 600;
	font-variant-ligatures: none;
	letter-spacing: 3px;
	color: var(--h2-sectiontitle-color-2);
	width: var(--content-width);
	margin: auto;
}

main.page .card-header div.headline {
	padding-top: clamp(10px, .5vh, 5pt);
	padding-bottom: clamp(10px, 1vh, 10pt);
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}


main.page .card-header nav.breadcrumbs {
	width: var(--content-width);
	margin: auto;
}

section.page-hero h1>span:first-child {
	filter: drop-shadow(.3px 0px 5px rgba(17, 48, 50, .5));
}

section.page-hero h1>span:last-child {
	font: var(--hero-subtitle-font);
	font-variant: all-small-caps;
	font-size: .8em;
	line-height: .7em;
	letter-spacing: 1px;
	color: rgba(231, 217, 203, 1);
	filter: drop-shadow(.3px 0px 5px rgba(17, 48, 50, .7));
}


section.page-content {
	grid-area: b;
	grid-template-columns: repeat(9, 10.101010%);
	grid-template-rows: max-content 15px 1fr;
	grid-template-areas:
		"a a a  a a a  a a a"
		". . .  . . .  . . ."
		"b b b  b b b  b b b"
		"c c c  c c c  c c c"
		"d d d  e e e  f f f";
	grid-area: b;
	width: var(--content-width);
	height: auto;
	margin: 0 auto;
}

main.legal-page section.page-hero {
	height: max-content;
}


section.page-content div.lead-headline h2 {
	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-2);
}

section.page-content div.lead-headline .page.subtitle {
	font: var(--page-intro-font);
}

section.page-content.legal-section {
	grid-template-columns: 100%;
	grid-template-rows: auto;
	height: auto;
	padding-top: 8vh;
}

main.legal-page section.page-content.legal-section:nth-child(2) {
	padding-top: 2vh;
}


section.page-content div.lead-headline {
	grid-area: a;
	padding: 10px 0 10px 0;
	width: 95%;
	margin: auto;
}

section.legal-section div.lead-headline {
	padding: 0;
	width: 100%;
	margin: 0;
	font-size: .8em;
}

section.legal-section div.mini-hdr-bar h3 {
	font-size: 2em;
}

section.legal-section dl {
	margin: 0;
}

.legal-article>ul {
	margin: .25em;
}

.legal-section:last-of-type>.legal-article:last-child {
	padding-bottom: 30vh;
}

.resources.page-content {
	padding-bottom: 10vh;
}

section.resources div.page-display {
	justify-content: start;
	align-self: start;
	padding: 0 0 15vh 0;
}

section.resources div.page-display h3 {
	font: var(--hero-subtitle-font);
	font-size: 2em;
	color: var(--hero-subtitle-color);
}

section.resources div.page-display h4 {
	font: var(--page-intro-font);
	font-size: 1.5em;
	color: var(--hero-subtitle-color);
}

section.resources div.page-display dl {
	margin: 5px;
}

section.resources div.page-display dt {
	margin: 0;
	font: var(--main-description-font);
	font-size: 1.3em;
}

section.resources div.page-display dd {
	margin: 0;
	font-weight: 400;
	padding: 0;
}

.rsrcs-ctext {
	margin: 1vh 2.5vw;
}

article.credit {
	margin: 10px 0;
}

article.credit p:not(p.description) {
	font: var(--page-main-description-font);
}

div.page-display {
	grid-area: b;
	grid-template-columns: repeat(16, calc(100% / 16));
	grid-template-rows: repeat(4, max-content) repeat(4, max-content) 15vh repeat(3, max-content) 10px repeat(5, 8vh) 50px repeat(7, max-content) 50px repeat(3, 1fr);
	grid-template-areas:
		"a a a a  a a  b b  b b  b b  b c c c"
		"a a a a  a a  b b  b b  b b  b c c c"
		"a a a a  a a  b b  b b  b b  b c c c"
		"a a a a  a a  b b  b b  b b  b c c c"
		"d d d d  d d  b b  b b  b b  b c c c"
		"d d d d  d d  e e  e e  f f  f f f f"
		"d d d d  d d  e e  e e  f f  f f f f"
		"d d d d  d d  . .  . .  . .  . . . ."
		"g g g g  g g  g g  g g  g g  g g g g"
		"k k k k  k k  l l  l l  l l  l l l l"
		"k k k k  k k  l l  l l  l l  l l l l"
		"k k k k  k k  l l  l l  l l  l l l l"
		". . . .  . .  . .  . .  . .  . . . ."
		"j j j j  j j  j j  j j  i i  i i i i"
		"j j j j  j j  j j  j j  i i  i i i i"
		"j j j j  j j  j j  j j  i i  i i i i"
		"j j j j  j j  j j  j j  i i  i i i i"
		"j j j j  j j  j j  j j  i i  i i i i"
		". . . .  . .  . .  . .  . .  . . . ."
		"m m m m  m m  m m  m m  h h  h h h ."
		"m m m m  m m  m m  m m  h h  h h h ."
		"m m m m  m m  m m  m m  o o  o o o o"
		"m m m m  m m  m m  m m  o o  o o o o"
		"m m m m  m m  m m  m m  o o  o o o o"
		"m m m m  m m  m m  m m  o o  o o o o"
		". . . .  . .  . .  . .  . .  . . . ."
		"n n n n  n n  n n  n n  n n  n n n n"
		"n n n n  n n  n n  n n  n n  n n n n"
		"n n n n  n n  n n  n n  n n  n n n n"
		"n n n n  n n  n n  n n  n n  n n n n";
	row-gap: 0;
	place-items: center;
	width: 100%;
	height: auto;
	margin: 0px auto;
	align-self: end;

}

/* main.halfmoon-page div.page-display { */
/* 	grid-template-areas: */
/* 		"a a a a  a a b b  b b b c" */
/* 		"a a a a  a a b b  b b b c" */
/* 		"a a a a  a a b b  b b b c" */
/* 		"a a a a  a a b b  b b b c" */
/* 		"d d d d  e e e e  f f f f" */
/* 		"d d d d  e e e e  f f f f" */
/* 		"d d d d  e e e e  f f f f" */
/* 		"d d d d  e e e e  f f f f" */
/* 		"g g g g  g g g g  g g g g" */
/* 		"k k k k  p p p p  l l l l" */
/* 		"k k k k  p p p p  l l l l" */
/* 		"k k k k  p p p p  l l l l" */
/* 		". . . .  . . . .  . . . ." */
/* 		"j j j j  j j j j  i i i i" */
/* 		"j j j j  j j j j  i i i i" */
/* 		"j j j j  j j j j  i i i i" */
/* 		"j j j j  j j j j  i i i i" */
/* 		"j j j j  j j j j  i i i i" */
/* 		". . . .  . . . .  . . . ." */
/* 		"m m m m  m m m h  h h h ." */
/* 		"m m m m  m m m h  h h h ." */
/* 		"m m m m  m m m o  o o o o" */
/* 		"m m m m  m m m o  o o o o" */
/* 		"m m m m  m m m o  o o o o" */
/* 		"m m m m  m m m o  o o o o" */
/* 		". . . .  . . . .  . . . ." */
/* 		"n n n n  n n n n  n n n n" */
/* 		"n n n n  n n n n  n n n n" */
/* 		"n n n n  n n n n  n n n n" */
/* 		"n n n n  n n n n  n n n n"; */
/* } */
main.halfmoon-page div.page-display,
main.deepdip-page div.page-display {
	grid-template-rows: repeat(4, max-content) repeat(4, max-content) 15vh repeat(3, 11.5vh) 10px repeat(5, 8vh) 50px repeat(7, max-content) 50px repeat(3, 15fr);
	grid-template-areas:
		"a a a a  a a b b  b b b b  c c c c"
		"a a a a  a a b b  b b b b  c c c c"
		"a a a a  a a b b  b b b b  c c c c"
		"a a a a  a a b b  b b b b  c c c c"
		"d d d d  . . b b  b b b b  c c c c"
		"d d d d  e e e e  e e f f  f f f f"
		"d d d d  e e e e  e e f f  f f f f"
		"d d d d  . . . .  . . . .  . . . ."
		"g g g g  g g g g  g g g g  g g g g"
		"k k k k  k s s s  s s l l  l l l l"
		"k k k k  k s s s  s s l l  l l l l"
		"k k k k  k s s s  s s l l  l l l l"
		". . . .  . . . .  . . . .  . . . ."
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		". . . .  . . . .  . . . .  . . . ."
		"m m m m  m m m m  m m h h  h h h ."
		"m m m m  m m m m  m m h h  h h h ."
		"m m m m  m m m m  m m o o  o o o o"
		"m m m m  m m m m  m m o o  o o o o"
		"m m m m  m m m m  m m o o  o o o o"
		"m m m m  m m m m  m m o o  o o o o"
		". . . .  . . . .  . . . .  . . . ."
		"n n n n  n n n n  n n n n  n n n n"
		"n n n n  n n n n  n n n n  n n n n"
		"n n n n  n n n n  n n n n  n n n n"
		"n n n n  n n n n  n n n n  n n n n";
}

main.advanced-flex-page div.page-displaY {
	grid-template-rows: repeat(4, max-content) repeat(4, max-content) 15vh repeat(3, 11.5vh) 10px repeat(5, 8vh) 50px repeat(7, max-content) 50px repeat(3, 1fr);
	grid-template-areas:
		"a a a a  a a b b  b b b b  c c c c"
		"a a a a  a a b b  b b b b  c c c c"
		"a a a a  a a b b  b b b b  c c c c"
		"a a a a  a a b b  b b b b  c c c c"
		
		"d d d d  . . b b  b b b b  c c c c"
		"d d d d  e e e e  e e e e  f f f f"
		"d d d d  e e e e  e e e e  f f f f"
		"d d d d  . . . .  . . . .  . . . ."
		
		"g g g g  g g g g  g g g g  g g g g"
		
		"k k k k  k s s s  s s l l  l l l l"
		"k k k k  k s s s  s s l l  l l l l"
		"k k k k  k s s s  s s l l  l l l l"
		
		". . . .  . . . .  . . . .  . . . ."
	
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		"j j j j  j j j j  j j j i  i i i i"
		
		". . . .  . . . .  . . . .  . . . ."
		
		"m m m m  m m m m  m m h h  h h h ."
		"m m m m  m m m m  m m h h  h h h ."
		"m m m m  m m m m  m m o o  o o o o"
		"m m m m  m m m m  m m o o  o o o o"
		"m m m m  m m m m  m m o o  o o o o"
		"m m m m  m m m m  m m o o  o o o o"
		". . . .  . . . .  . . . .  . . . ."
		
		"n n n n  n n n n  n n n n  n n n n"
		"n n n n  n n n n  n n n n  n n n n"
		"n n n n  n n n n  n n n n  n n n n"
		"n n n n  n n n n  n n n n  n n n n";
}




/*--- H4 Headlines ---*/
main.page div.headline {
	width: 100%;
	height: 100%;
	text-shadow: var(--shadow-forYellowTitle);
}

main.page .page-contact.cta div.headline>h4 {
	text-align: center;
}

main.page *:not(.qcontact)>div.headline h4 {
	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-2);
	font-size: 2.7em;
	line-height: 1em;
	;
}


main.page div.headline p {
	font: var(--page-main-description-font);
	color: var(--h2-sectiontitle-color-1);
	font-weight: 600;
}


main.page div.headline span[data-genrq-title] {
	color: var(--hero-brand-color);
}

.page-display p.description {
	grid-area: a;
	width: 80%;
	height: max-content;
	max-height: 90%;
	font-weight: 500;
	align-content: end;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
}

div.page-display p.description>span>span::after {
	content: "";
	margin: .5ch;
}

.legal-article p.description {
	margin: 0;
	width: 100%;
}

.legal-article p.description:last-child {
	margin: 0.15em 0 1.5em 0;
}

.legal-article ul:last-child {
	margin: 0.15em 0 1.5em 0;
}

.legal-last-modified {
	font: var(--compname-estd-font);
}

div.page-display div.nav-row {
	grid-area: g;
	width: 95%;
	margin: auto;
}

div.page-display div.nav-row>nav.context-nav {
	grid-template-columns: 27% 1fr 27%;
	gap: 1em;
	width: 100%;
}

div.page-display div.nav-row nav.context-nav>a.pill {
	place-self: center;
}

div.illustration.photo-hero {
	grid-area: b;
	aspect-ratio: 7 / 4;
	justify-self: center;
	align-self: start;
	width: auto;
	height: auto;
	max-width: 95%;
	max-height: 280px;
	margin: 0 auto auto auto;
	border-radius: 15px;
	-webkit-mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0, 0, 0, .5)10%,
			black 15%,
			black 97.5%,
			transparent 100%);
	mask-image:
		linear-gradient(to bottom,
			transparent 0%,
			rgba(0, 0, 0, .5) 10%,
			black 15%,
			black 97.5%,
			transparent 100%),
}

div.illustration.photo-hero img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: start;
}

div.testimonial {
	grid-area: c;
	display: none;
}

article.price>div.lesson.price {
	place-self: center;
	;
}

article.features {
	grid-area: d;
	width: fit-content;
	max-width: 85%;
	height: fit-content;
	max-height: 100%;
	font: var(--included-title-font);
	color: #3c8861;
	align-self: end;
}

article.features>h3 {
	font-size: 1.1em;
	font-weight: 600;
}

article.features span {
	min-width: unset;
	max-width: unset;
	width: 100%;
}

article.features>dl.included {
	padding: 0;
	margin: 0;
	justify-content: start;
	align-content: center;
}

article.features>dl>dt {
	color: #3c8861;
}

article.features>dl>dd {
	font: var(--included-list-font);
	color: var(--hero-brand-color);
	margin: .2em;
	justify-content: start;
	align-items: center;
}

article.features>dl>dd:last-of-type {
	font-size: .85em;
}

article.features>dl>dd::before {
	display: grid;
	content: "\2713";
	color: #3c8861;
	margin-right: .1em;
	font-size: 1em;
	height: 100%;
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	place-items: center;
}


article.features>dl>dd>* {
	grid-column: 2;
}

article.usps {
	grid-area: e;
	width: fit-content;
	max-width: 100%;
	height: fit-content;
	max-height: 100%;
}

article.usps>ul.badge.usps {
	justify-content: start;
	align-content: start;
	min-width: 0;
	width: max-content;
	max-width: 100%;
	height: max-content;
	max-height: 100%;
	gap: .3em;
}

article.usps>ul.badge.usps>li {
	margin: 0;
	grid-template-columns: max-content;
	grid-template-rows: max-content;
	justify-items: start;
	align-items: center;
	width: max-content;
	font: var(--predicate-list-font);
	color: #5b7c8f;


}

article.usps ul.badge.usps>li.gridbox::before {
	font-size: 1rem;
}

article.usps ul.badge.usps>li.gridbox:nth-of-type(2)::before {
	grid-row: 1 / 3;
}

article.usps>ul.badge.usps>li.gridbox>* {
	grid-column: 2;
}

article.price {
	grid-area: f;
	width: 100%;
	height: 100%;
}

div.cta {
	grid-area: m;
	grid-template-rows: max-content 1fr;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
	box-shadow: unset;
}

div.cta div.headline {
	grid-row: 1;
}

div.cta form.specific.request {
	grid-row: 2;
}


div.illustration.photo {
	position: relative;
	grid-area: i;
	width: auto;
	height: auto;
	max-width: 95%;
	max-height: 85%;
	/* max-height: 100%; */
	aspect-ratio: 3 / 2;
	overflow: hidden;
	/* align-self: end; */
	/* align-items: end; */
	/* justify-self: start; */
	align-self: end;
	justify-self: start;
	mask-image: linear-gradient(to bottom,
			transparent 0%,
			black 10%,
			black 100%);
	-webkit-mask-image: linear-gradient(to bottom,
			transparent 0%,
			black 10%,
			black 100%);
}

div.illustration.photo img {
	height: 100%;
	width: 100%;
	align-self: end;
	margin-bottom: 0px;
	z-index: 0;
	object-fit: cover;
	object-position: end;
}

div.meeting-point {
	grid-area: k;
	height: 92.5%;
	width: 85%;
	place-items: center;
	justify-self: center;
	align-self: end;
	overflow: hidden;
}

div.meeting-point.skate-mp {
	grid-area: s;
	place-items: center;
	justify-self: center;
	align-self: end;
	overflow: hidden;
}



div.meeting-point.skate-mp .sk8map {
	width: 100%;
	height: 100%;
}

article.lesson.essentials {
	/* 	position: relative; */
	grid-area: j;
	width: 90%;
	height: 95%;
	justify-self: center;
	grid-template-rows: 25% 75%;
	grid-template-columns: 1fr;
	align-self: end;
}

article.lesson.essentials>div.headline {
	grid-row: 1;
	grid-column: 1 / 3;
	grid-template-columns: 1fr;
	grid-template-rows: max-content max-content;
	justify-items: stretch;
	align-items: center;
}

article.lesson.essentials>dl {
	grid-column: 1 / 3;
	justify-content: start;
	height: 95%;
	align-self: end;
	overflow-y: scroll;
	box-shadow: -0.5px -1px 10px 1px inset rgba(17, 40, 58, 0.15), 0 0 1px .5px rgba(17, 40, 58, 0.15);
	font-size: .75em;
	line-height: 1em;
	outline: 1px solid rgba(17, 40, 58, 0.15);
	margin: 0;
}

article.lesson.essentials dl>dt {
	display: grid;
	margin: 0;
	grid-template-columns: 3ch 1fr;
	grid-template-rows: max-content;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	width: 100%;
	font-size: .85em;
	font-weight: 600;
}

article.lesson.essentials dl>dd {
	margin: 0;
	padding: 5px .5em 5px 1.4em;
	line-height: 1.2em;
}

article.lesson.essentials dl>dt::before {
	content: "\2022";
	color: var(--h2-sectiontitle-color-2);
	font-weight: 1000;
	font: var(--essentials-point-font);
	grid-column: 1;
	align-self: end;
	margin: 0 .2em;
}

article.lesson.essentials dt>span {
	grid-column: 2;
	font: var(--essentials-point-font);
	color: var(--hero-brand-color);
}

article.lesson.essentials dd>span {
	max-width: unset;
	min-width: unset;
	width: 100%;
	font: var(--main-description-font);
	color: var(--hero-brand-color);
	font-size: 1.4em;
	line-height: 1.1em;
}

article.who-is {
	grid-area: h;
	height: 95%;
	width: 95%;
}

div.reviews {
	grid-area: n;
	height: 40vh;
	width: 90%;
	padding-top: 20px;
}
div.google-attribution {
	grid-column: 1 / 3;
	grid-row:2;
	font-size: 16px;
}
div.reviews iframe {height: 600px;}

div.reviews img {
	grid-column: 1;
	grid-row: 1;
}

a.google-attribution,
div.google-attribution>a {
	grid-row: 3;
	font-size: 1rem;
}
div.illustration.photo-gallery {
	grid-area: b;
	aspect-ratio: 7 / 4;
	width: auto;
	height: 80%;
	mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0, 0, 0, .5) 10%,
			black 10%,
			black 90% transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0, 0, 0, .5) 10%,
			black 15%,
			black 95%,
			transparent 100%);
}

div.illustration.photo-gallery img {
	position: absolute;
	bottom: 0px;
	height: auto;
	width: 95%;
	align-self: end;
	margin-bottom: 0px;
}

div.faq {
	grid-area: l;
	grid-template-columns: 3fr 7.5fr;
	height: 100%;
	width: 100%;
	place-items: center;
	margin: auto;
	justify-self: start;
}

main.halfmoon-page div.faq,
main.deepdip-page div.faq {
	grid-area: l;
	grid-template-columns: 1fr;
	grid-template-rows: 3fr 7.5fr;
	grid-auto-flow: column;
	height: 100%;
	width: 100%;
	place-items: center;
	margin: auto;
	justify-self: start;
}

div.faq>div.headline {
	grid-template-columns: 1fr;
	grid-template-rows: max-content 1fr;
	height: 90%;
	width: 90%;
	grid-column: 1;
	grid-row: 1;
	/* justify-content: start; */
	justify-items: center;
	gap: clamp(5px, 1lh, 11px);
	justify-self: start;
}

div.faq div.headline>h4 {
	grid-row: 1;
}

span.faq-span {
	font-family: 'Kulim Park', sans-serif;
	color: var(--hero-brand-color);
	letter-spacing: -2pt;
	margin-left: 1pt;
}

div.faq div.headline>p {
	grid-row: 2;
	height: fit-content;
	widtH: 95%;
	grid-column: 1;
	text-align: justify;
	text-align-last: left;
	padding: 0;
	font: var(--shortfaq-hint-font);
}

main.halfmoon-page div.faq>div.headline,
main.deepdip-page div.faq>div.headline {
	grid-template-rows: max-content;
	grid-template-columns: 17.5% 82.5%;
	grid-auto-flow: column;
	height: 100%;
	width: 100%;
	gap: 0;
	justify-self: start;
}

main.halfmoon-page div.faq div.headline>h4,
main.deepdip-page div.faq div.headline>h4 {
	grid-row: 1;
	justify-self: end;
}

main.halfmoon-page div.faq div.headline>p,
main.deepdip-page div.faq div.headline>p {
	grid-row: 1;
	grid-column: 2;
	text-align: left;
	justify-self: start;
	align-self: center;
}

div.faq div.shortfaq {

	grid-template-columns: auto max-content;
	width: 95%;
	height: 95%;
	-webkit-mask-image: linear-gradient(transparent 0%,
			black 10%,
			black 90%,
			transparent 100%);
	mask-image: linear-gradient(to bottom,
			transparent 0%,
			black 10%,
			black 90%,
			transparent 100%);
	overflow-y: scroll;
	container-type: scroll-state;
	container-name: shortfaq-scroll;
	justify-self: start;
}

div.shortfaq-scroll {
	width: 100%;
	height: auto;
	grid-row: 1;
	grid-column: 1;
}

div.shortfaq>nav.context-nav {
	grid-template-columns: 1fr;
	grid-template-rows: 100%;
	grid-row: 1;
	grid-column: 1;
	width: 90%;
	height: 15%;
	gap: .1em;
	align-self: end;
	margin: 0 0 0 0;
	justify-self: end;
	position: sticky;
	z-index: 1;
	bottom: 1%;
	right: 0;
	filter: none;
	align-self: end;
}

div.faq>nav.context-nav:hover {
	opacity: 1;
}

div.faq nav.context-nav>.pill {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	width: 95%;
	height: 95%;
	padding: 4px;
	background-color: #f2f4f5ee;
	border-radius: 3px 3px;
}

div.faq nav.context-nav>.pill:hover,
div.faq nav.context-nav>.pill:focus-within {
	opacity: 1;
}


a:has(span.wa-message) {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	font-weight: 400;
	font-size: .9em;
}

a>span.wa-message {
	color: #25D366;
}

/*Meeting Point pages*/



main.map-page div.page-display {

	grid-template-columns: repeat(12, 8.33%);
	grid-template-rows: max-content;
	grid-template-areas:


		"a a a a  a a a a  a a a a"
		"a a a a  a a a a  a a a a"
		"b b b b  c c c c  d d d d"
		"b b b b  c c c c  d d d d"
		"b b b b  c c c c  d d d d"
		"b b b b  c c c c  d d d d"
		"b b b b  c c c c  d d d d"
		"b b b b  c c c c  d d d d"
		". . . .  c c c c  d d d d"
		"g g g g  c c c c  d d d d"
		"g g g g  c c c c  d d d d"
		"g g g g  c c c c  . . . ."
		"g g g g  c c c c  . . . ."
		". . . .  . . . .  . . . ."

		"j j j j  j j j j  j i i i"
		"j j j j  j j j j  j i i i"
		"j j j j  j j j j  j i i i"
		"j j j j  j j j j  j . . ."
		"j j j j  j j j j  j . . ."
		"j j j j  j j j j  j . . ."
		". . . .  . . . .  . . . ."
		". . . .  . . . .  . . . ."
	;
	row-gap: 0;
	place-items: center;
	width: 100%;
	height: auto;
	margin: 0px auto;
	align-self: end;
}

main.page.map-page .page-display h3 {
	font: var(--hero-subtitle-font);
	color: var(--h2-sectiontitle-color-1);
	font-size: 2em;
}


main.page.map-page .page-display .m-ctext {
	grid-area: a;
	width: 95%;
	height: 100%;
	justify-content: center;
}

.m-ctext .m-point-description {
	justify-content: center;
	width: 100%;
}

.m-ctext .m-point-description>p {
	grid-column: 1 / 3;
	grid-row: 2;
	height: 100%;
	width: 100%;
}

.m-ctext .m-point-description>h3 {
	grid-column: 1 / 3;
	grid-row: 1;
	height: 100%;
	width: 100%;
	margin: auto
}

main.page.map-page .page-display .local-context {
	grid-area: d;
	width: 85%;
	height: 90%;
}


main.page.map-page .page-display .parking-tips {
	grid-area: b;

	width: 85%;
	height: 85%;

	grid-template-columns: 1fr;
	grid-template-rows: max-content 1fr;
	justify-items: center;
	align-items: center;
	align-self: center;
}

main.page.map-page .parking-tips h3 {
	display: inline;
	grid-row: 1;
	height: max-content;
	width: 100%;

}

.parking-tips p.description {
	grid-area: unset;
	grid-row: 2;
	width: 100%;
	height: max-content;
	margin: 0;
}

main.page.map-page .illustration.meeting-point {
	grid-area: c;
	width: 85%;
	height: 95%;
	grid-template-rows: 1fr max-content;
}

main.page.map-page .illustration.meeting-point.surf-mp {
	grid-area: c;
	width: 85%;
	height: 95%;
	grid-template-rows: 1fr max-content;
}


main.page.map-page .illustration.meeting-point .headline {
	grid-column: 1;
	grid-row: 2;
	height: 100%;
	width: 100%;
}

main.page.map-page .illustration.meeting-point .headline p {
	width: 100%
}

main.page.map-page .illustration.meeting-point .surfmap {
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	width: 100%;
	align-self: end;
}

main.page.map-page .illustration.photo-hero {
	grid-area: g;
	width: 85%;
	height: 90%;
	outline: 3px solid red;
}

main.page.map-page .lesson.essentials {
	width: 92.5%;
	height: 100%;
	grid-template-rows: repeat(2, max-content) 50px;
}

main.page.map-page .lesson.essentials h3 {
	grid-row: 1;
	grid-column: 1 / 3;
	width: 100%;
	height: 100%;
}

main.page.map-page .lesson.essentials p.description {
	grid-row: 2;
	grid-column: 1 / 3;
	width: 100%;
	height: 100%;
}

main.page.map-page .lesson.essentials details {
	grid-row: 3;
	grid-column: 1 / 3;
	width: 100%;
	height: 100%;
	overflow-y: visible;
}

main.page.map-page .lesson.essentials details dl.essentials {
	height: 20vh;
	overflow-y: scroll;
}

main.page.faq-page section.page-content {
	padding: 5vh 0 25vh 0;
	height: auto;
}

main.page.faq-page section.page-content>.faq-panel {
	grid-area: a;
	height: auto;
}

.partial-container {
	position: fixed;
	top: 5vh;
	z-index: 8;
	width: 90vw;
	height: 85vh;
	overflow: hidden;

}

.detail-partial {
	grid-template-columns: repeat(3, 33.3%);
	grid-template-rows: 10% 90%;
	grid-auto-flow: column;
	place-items: center;
	width: 100%;
	height: 100%;
}

.overview-dialog-content {
	height: 100%;
}


.overview-dialog-content .detail-partial label.btn.detail-switch {
	grid-row: 1;
	width: 100%;
	text-align: center;
	font: var(--dialog-hdr-font);
	font-size: 1.2em;
	background-color: var(--nav-option-color);
	box-shadow: inset 0 0 3px .2px rgba(56, 55, 52, 0.5);
}

.overview-dialog-content .detail-partial label.btn.detail-switch>input {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	height: 100%;
	margin: 0;
}

.overview-dialog-content .detail-partial label.btn.detail-switch:has(input:checked) {
	background-color: #dad0c7;
}

.detail-partial .detail-card.service-card {
	display: none;
}

.detail-partial:has(input[value="skate"]:checked) #skate-overview-swipe,
.detail-partial:has(input[value="advanced"]:checked) #advanced-overview-swipe,
.detail-partial:has(input[value="beginner"]:checked) #beginner-overview-swipe {
	display: grid;
	grid-column: 1/4;
	grid-row: 2;
	height: 100%;
	width: 100%;
	padding: 0;
}

.overview-dialog-content .detail-partial label.btn.detail-switch h3.headline {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	height: max-content;
	margin: 0;
}

.detail-switch {}


.detail-partial .detail-card.service-card .card-scroll {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	width: 100%;
	margin: 0;
	padding: 10px 0;
}

.detail-partial section.overview article.mini-display:has(> .mini-hdr-bar .toggle-btn > input:checked)>.display-content {
	position: fixed;
	padding: 0;
	grid-row: 0;
	margin: 0;
	top: 25%;
	left: 45%;
	padding: 20px;
}

.detail-partial div.mini-hdr-bar {
	padding: 5px 0;
}

.detail-partial div.mini-hdr-bar h3 {
	font-size: 2em;
	line-height: .8em;
}














@media (orientation:landscape) {
	:root {

		/*Background Colors*/
		--sidebar-background: #dbc8b5;
		/* #endregion */
	}

	html {
		min-height: 100%;
		overflow-x: clip;
	}

	body {
		position: relative;
		height: 100svh;
		margin: 0;
		width: 100vw;
		overflow-y: auto;
	}

	footer {
		position: fixed;
		bottom: 0vh;
		left: 0;
		max-height: 200pt;
		z-index: 8;
		overflow: hidden;
		width: 100vw;
		background-color: white;
		padding-top: 5px;
		transform: translateY(70%);
		box-shadow: 0 2px 30px .5px rgba(17, 40, 58, .4);
		transition: opacity .25s ease, transform .25s ease;
	}

	footer:hover {
		transform: translateY(0vh);
		transition:
			transform .2s ease-in-out;
	}

	/*  ==============> Background Slider <============ */
	div.background {
		position: absolute;
		inset: 0;
		z-index: -2;
		pointer-events: none;
		display: grid;
		grid-template-columns: repeat(2, 100vw);
		grid-template-rows: auto;
		height: 100vh;
		overflow-x: scroll;
	}

	div.slide-screen {
		grid-column: 1;
		position: fixed;
		inset: 0;
		z-index: -1;
		height: 97vh;
		width: 100vw
	}

	.slide-img {
		position: absolute;
		inset: 0;

		background-size: cover;
		background-repeat: no-repeat;

		opacity: 0;
		/*animation: bgFade 18s infinite;*/
	}

	div.static-backgrounds {
		display: none;
		grid-column: 2;
		position: relative;
		top: 93%;
		left: 0;
		height: 107%;
		width: 100vw;
	}

	.bg-img {
		height: 50vh;
	}

	.slide-1 {
		background-image: url("assets/multimedia/img/hero/index/famara-intermediate-surf-lesson.png");
		animation-delay: 0s;
		background-position: 0% -22vh;
		background-size: 100% auto;
		opacity: 100%;
	}

	.slide-2 {
		background-image: url("assets/img/hero-2.jpg");
		animation-delay: 6s;
		background: red;
		opacity: 0%;
	}

	.slide-3 {
		background-image: url("assets/img/hero-3.jpg");
		animation-delay: 12s;
		background: yellow;
		opacity: 0%;
	}

	.no-slide-1 {
		opacity: 100%;
		height: 100%;
	}

	/*=======================================================*/

	main.index {
		display: grid;
		grid-template-columns: 100vw;
		grid-template-rows: 100%;
		height: 100vh;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	section.hero {
		grid-column: 1;
		grid-row: 1;

	}

	section.service-deck[data-state="closed"] {
		grid-column: 1;
		grid-row transform: translateX(100vw);
		opacity: 0;
		transition:
			all .5s ease;
	}

	section.service-deck[data-state="active"] {
		grid-column: 1;
		grid-row: 1;
		transform: translateX(0);
		opacity: 1;
		transition:
			all .5s ease;

	}


	.container {}

	.page-header {
		width: 100%;
		justify-items: center;
		min-height: 50px;
		height: 7.5;
		max-height: 200px;
		margin: 0 0;
		padding: 0 0;
	}

	.main-hdr {
		grid-template-columns: 20% 70% 10%;
		justify-content: space-between;
		min-height: 50px;
		height: 60px;
		max-height: 6vw;
		width: 95%;
		margin: auto;
	}

	.page-header .main-hdr {
		grid-template-columns: 15% 75% 10%;
	}

	.main-hdr>.navbar {
		grid-template-columns: max-content;
		grid-auto-flow: column;
		gap: 3vw;
		justify-items: center;
		justify-content: start;
		align-items: center;
		width: 100%;
		height: 2.75vw;
		margin: 0 auto;
		padding: 0 1vw;
	}

	.flexrow.navbar .nav-menu {
		display: grid;
	}

	.page-header .container.nav-menu {
		width: max-content;
		height: 1.4em;
	}

	.left-header.container {
		display: grid;
		justify-items: end;
		height: 100%;
		width: 100%;
	}

	.right-header.container {
		justify-items: center;
		height: 100%;
		width: 100%;
	}

	/*================== Language Picker ===============*/
	.lngpckr {
		flex: 1 1 50%;
		/*anteil des elements am right-header*/
	}

	.lngpckr:hover .lang-btn {
		transform: translateY(4.5%);
	}

	.flag {
		display: none;
		width: 90%;
	}

	/*================== Menu Button ===============*/
	.right-header .menu-btn {
		flex: 1 1 50%;
		/*anteil des elements am right-header*/
	}

	.burger-icon {
		width: 100%;
		/*hier symboloesse justieren*/
		transform: scale(1.1, 1);
	}

	/*================== Sidebar ===============*/
	.sidebar {
		display: flex;
		position: fixed;
		top: 0;
		transform: translateX(100%);
		z-index: 8;
		width: 33vw;
		height: 100vh;
		background-color: var(--sidebar-background);
		overflow: scroll;
	}

	.sidebar .complabel .comp-name-estd {
		flex-direction: row;
		flex-wrap: wrap
	}

	.sidebar .complabel .estd::after {
		display: none;
	}

	/* #region =====> HERO <============ */

	/* optional: dunkler Overlay für Lesbarkeit 
	.hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(0, 0, 0, 0.35);
	}*/
	.hero .headline.container {
		position: sticky;
		top: 0;
		left: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-auto-flow: column;
		align-content: start;
		padding: clamp(10px, 19vh, 20px) 0 0 clamp(5px, 5vw, 30px);
		min-height: max-content;
	}

	.hero hgroup {
		margin: 5vh 15% 5vh 12.5%;
		grid-template-columns: 100%;
		grid-template-rows: 68% repeat(2, max-content);
		row-gap: 0;
		align-items: start;
		justify-items: start;
		width: 50%;
		height: 100%;
	}

	.tgroup.grid {
		grid-row: 1;
		display: grid;
		grid-template-columns: 35% 1fr;
		grid-template-rows: 1fr max-content;
		grid-auto-flow: column dense;
		/* aspect-ratio: 1110 / 1050; */

		width: 100%;
		height: 100%;
	}

	.logo {
		grid-row: 1 / 4;
		grid-column: 1;
		justify-self: end;
		align-self: end;
		aspect-ratio: 1110 / 1050;
		position: static;
		inset: unset;
		width: 100%;
		max-width: 260px;
		min-width: 28px;
		height: auto;
		object-fit: contain;
		filter: drop-shadow(0 0 30px rgba(255, 255, 255, .3))
	}

	.primary-title {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		align-self: end;
		color: var(--hero-brand-color);
		font: var(--hero-brand-font);
		opacity: 70%;
		margin: 0 0 0 0;
		text-shadow: none;
		z-index: -1;
	}

	/*"TAKE"*/
	h1.tgroup span[id="comp-name1"] {}

	h1.tgroup span[id="comp-name1"]::after {
		content: " ";
		margin: .2ch;
	}

	/*"Off"*/
	h1.tgroup.title span[id="comp-name2"] {}

	/*"personal surftraining"*/
	hgroup.title .wrapper:has(span[class="secondary-title"]) {
		grid-row: 3;
		grid-column: 2;
		align-self: start;
		margin: 0 0 0 0;
	}

	.secondary-title {
		font: var(--hero-title-font);
		color: var(--hero-title-color);
		letter-spacing: -3.4%;
		margin: 0;
		flex-wrap: wrap;
	}

	/*"personal"*/
	hgroup.title .wrapper:has(span[class="secondary-title"]) span:first-of-type {
		margin: 0;
	}

	hgroup.title .wrapper:has(span[class="secondary-title"]) span:last-of-type {
		margin: 0;
	}

	hgroup.title .wrapper:has(span[class="secondary-title"]) span:first-of-type::after {
		content: " ";
		margin-right: .35ch;
	}

	/*"surftraining"*/
	.secondary-title[id="comp-name3b"] {
		margin: 0;
	}

	/*"Surf Lessons and Coaching"*/
	hgroup.title .wrapper:has(span[class="product-title"]) {
		grid-row: 2;
		font: var(--hero-subtitle-font);
	}

	/*"Surf Lessons"*/
	hgroup.title .wrapper:has(span[class="product-title"]) span:first-of-type {
		color: var(--hero-subtitle-color);
	}

	hgroup.title .wrapper:has(span[class="product-title"]) span:first-of-type::after {
		content: " ";
		margin-right: .7ch;
	}

	/*"& Coaching"*/
	hgroup.title .wrapper:has(span[class="product-title"]) span:nth-of-type(2) {
		color: var(--hero-subtitle-color);
	}

	/* .hero.subtitle {
		font-size: .5em;
		line-height: 1em;
		color: var(--hero-subtitle-color);
	} */
	.location-title {
		grid-row: 3;
		color: var(--hero-location-color);
		font: var(--hero-location-font);
		text-shadow: 0 0 5px #4882a53f;
		margin: 0 0 0 1ch;
	}

	/* #endregion =====> HERO <============ */
	/*====#region Landscape HEADLINE =======*/
	.main-card.service-card .card-scroll {
		display: grid;
		overflow-y: auto;
		overscroll-behavior: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		margin: 0 0 0 0;
		height: 100%;
		width: 100%;
		place-content: center;
		grid-template-columns: 50% 50%;
		grid-template-rows: 100%;
	}

	.detail-card.service-card .card-scroll {
		overflow-y: scroll;
		overflow-x: hidden;
		overscroll-behavior: auto;
		-webkit-overflow-scrolling: touch;
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: repeat(5, max-content);
		padding: 0;
		margin-top: 0;
		height: auto;
		min-height: 480px;
		max-height: 900px;
		width: var(--content-width);
		grid-auto-flow: row;
		row-gap: 0;
		grid-row: 1;
		grid-column: 1 / 3;
	}

	/* detail card comes forward */

	div.page-hero.card-header {
		position: sticky;
		inset: 5vh 0 auto 0;
		z-index: 7;
		min-height: 5svh;
		padding: 0;
		grid-template-columns: 10vw 1fr;
		grid-template-rows: max-content 1fr;
		justify-content: start;
		align-items: center;
		background-color: rgba(242, 236, 229, 1);
	}

	.deck-shell .page-hero.card-header {
		left: 100%;
		width: 45vw;
	}

	.
	/* deck-shell:has(.main-tab>input:checked) div.page-hero.card-header { */
	/* 	transform: translateX(55vw); */
	/* 	transition: */
	/* 		translateX 10s ease-in-out 5s; */
}

/*  */

.deck-shell:has(.detail-switch>input:checked) div.page-hero.card-header {
	width: 100%;
}



.service-deck .card-header>img {
	top: 0;
	left: 0;
	grid-column: 1;
	grid-row: 1;
	width: clamp(32px, 4em, 90px);
	height: 100%;
	align-self: center;
	justify-self: end;
	margin: 0 10px 0 0;
	aspect-ratio: preserve;
}

div.page-hero.card-header>nav.breadcrumbs {
	grid-column: 2;
	grid-row: 2;
	align-items: center;
}

.service-deck .page-hero>.headline {
	grid-column: 1 / 3;
	grid-row: 1;
	padding:
		0 3vw 0 10vw;
	align-content: center;
}


.service-deck div.page-hero.card-header nav.breadcrumbs {
	margin: 0;
	padding: 0;
	justify-content: start;
	align-content: end;
	list-style: none;
	width: max-content;
	flex-wrap: wrap;
	height: max-content;
}

.service-deck div.page-hero.card-header nav>ul.breadcrumbs {
	margin: 0;
	padding: 0;
	justify-content: start;
	align-content: start;
	list-style: none;
	width: max-content;
	flex-wrap: wrap;
	height: max-content;
}

.service-deck div.page-hero.card-header ul.breadcrumbs li a {
	margin: 0;
}

.service-deck div.page-hero.card-header ul.breadcrumbs li:first-child a:visited,
.service-deck div.page-hero.card-header ul.breadcrumbs li:first-child a {
	color: #504e4e;
}

.service-deck div.page-hero.card-header ul.breadcrumbs li:not(:first-child) a:visited,
.service-deck div.page-hero.card-header ul.breadcrumbs li:not(:first-child) a {
	color: var(--breadcrumbs-pages-color);
}

/*====#endregion HEADLINE =======*/

/* #region ===== Card tabs / lashes Design ===== */
/*==== Tab-Navigaton Container ====*/
/*Auskommentiert um Den unteren block für psteres verschiben der navtabs zu designen*/

.service-deck>.deck-shell nav.deck-tabs {
	position: absolute;
	bottom: 10%;
	left: unset;
	right: 0;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3, max-content);
	grid-auto-flow: row dense;
	width: 50px;
	z-index: 1;
}

/*Wenn detail-switch aktiviert, hide navbar, event-listener auf datail-page: swipe-links = zurück zur ursprünglichen seite, touch oder swipe auf hidden nav bar = transform/translateX */
.service-deck nav.deck-tabs.is-peeking {
	--tab-stack-height: 28vh;
	position: absolute;
	bottom: 10%;
	left: unset;
	right: 0;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, max-content);
	grid-auto-flow: row dense;
	z-index: 1;
	transform: translateX(60%);
}

/*==== Tab-Stacks ====*/
nav.deck-tabs div.tab-stack {
	height: 100%;
}

/*==== Tabs (label) ====*/
.service-deck nav.deck-tabs div.tab-stack label {
	writing-mode: sideways-rl;
	text-orientation: mixed;
	justify-content: center;
	font: 800 clamp(15pt, 5vw, 35px) / clamp(18pt, 7vw, 40px) 'League Gothic';
	font-variant: all-small-caps;
	letter-spacing: .7px;
	color: #504e4e;
	gap: 1px;
}

/* elements stacked*/
.service-deck nav.deck-tabs div.tab-stack label>span {
	grid-column: 1;
	grid-row: 1;
	height: fit-content;
	width: max-content;
	align-self: end;
}

.service-deck nav.deck-tabs div.tab-stack label>input {
	grid-column: 1;
	grid-row: 2;
	margin: 0 0 0 8px;
	padding: 0;
	align-self: start;
	background-color: rgb(64 108 134 / 100%);
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
	border-top-left-radius: 5px 5px;
	border-bottom-left-radius: 5px 5px;
	width: 8px;
	height: 100%;

}

nav.decks-tabs:has(label.detail-switch input:checked) {
	left: 10vs;
}




/*main-tab and detail-switch element dimensions*/
.service-deck nav.deck-tabs div.tab-stack label.main-tab {
	grid-template-rows: 1fr max-content
		/* 70% 30% */
	;
	/*container vertical! roles of rows/columns is reversed.*/
	/* grid-template-col.25fr 1fr0%; */
	height: auto;
	padding: 1vh 0;
	z-index: 2;
	box-shadow: inset 0 0 3px .25px rgba(64, 108, 134, .65),
		-3px 0px 10px 0px rgba(64, 108, 134, .2);
	width: 50px;
	border-radius: 7px 0 0 7px;
}

.service-deck nav.deck-tabs div.tab-stack label.detail-switch {
	z-index: 1;
	box-shadow: inset 2px 5px 10px 1.5px rgba(64, 108, 134, .3),
		-2px -2px 5px 2.5px rgba(64, 108, 134, .3);
	outline: 2px solid rgba(248, 189, 64, 0.96);
	border-radius: 0 0 0 7px;
	grid-template-rows: 1fr max-content;
	/*container vertical! roles of rows/columns is reversed.*/
	/* grid-template-columns: 100%; */
	height: auto;
	width: 45px;
	padding: 1vh 0;
	margin-top: 0;
	justify-self: center;
}

/* #region* ===========> Overview <============= */
.service-deck>.deck-shell {
	position: sticky;
	top: 0;
	min-height: 0;
	height: 100svh;
	width: 100%;
	overflow: visible;
	padding: 0;
	/* background-image: linear-gradient(180deg, */
	/* 		rgba(231, 217, 203, .0) 0%, */
	/* 		rgba(231, 217, 203, .86) 7.5%, */
	/* 		rgba(231, 217, 203, .96) 16%, */
	/* 		rgb(231, 217, 203) 35%, */
	/* 		rgba(231, 217, 203, 1) 65%, */
	/* 		rgba(231, 217, 203, .95) 100%); */
}

.service-card.main-card {
	right: 0;
	background-image: linear-gradient(180deg,
			rgba(231, 217, 203, .0) 0%,
			rgba(231, 217, 203, .86) 7.5%,
			rgba(231, 217, 203, .96) 16%,
			rgb(231, 217, 203) 35%,
			rgba(231, 217, 203, 1) 65%,
			rgba(231, 217, 203, .95) 100%);
	width: 45vw;

}

.service-card.detail-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr max-content;
	max-height: 100vh;
	overflow: hidden;
	row-gap: 20px;
	min-height: 95%;
	max-height: 100%;
	height: auto;
	width: 100%;
	padding: 20vh 0 10vh 0;
	justify-items: center;
}

.service-deck .service-card .display {
	grid-column: 1 / 3;
	grid-template-rows: 10% repeat(2, 10.5%) 2% repeat(3, 6.5%) 1% repeat(2, 8.5%) 1% repeat(2, 7.5%) 1% 12% 1fr;
	grid-template-columns: 5% repeat(6, 7%) 4% repeat(5, 7%) 1fr;
	grid-template-areas:

		". . .  . .  . .  . .  . .  . . ."
		". a a  a a  a a  a a  a a  a a ."
		". a a  a a  a a  a a  a a  a a ."
		". . .  . .  . .  . d  d d  d d ."
		". e e  e e  e e  . d  d d  d d ."
		". e e  e e  e e  . d  d d  d d ."
		". e e  e e  e e  . d  d d  d d ."
		". . .  . .  . .  . d  d d  d d ."
		". b b  b b  b b  . d  d d  d d ."
		". b b  b b  b b  . d  d d  d d ."
		". . .  . .  . .  . d  d d  d d ."
		". f f  f f  f f  . d  d d  d d ."
		". f f  f f  f f  . d  d d  d d ."
		". . .  . .  . .  . d  d d  d d ."
		". g g  g g  g g  . d  d d  d d ."
		". . .  . .  . .  . .  . .  . . .";
	/* 	"a a a a a a a a a a a a a a"
			"a a a a a a a a a a a a a a"+
			"a a a a a a a a a a a a a a"
			"a a a a a a a a a a a a a a"        
			". b b b b b b . . . . . . ."        
			". b b b b b b . . . . . . ."
			". b b b b b b d d d d d d d" 
			". . . . . . . d d d d d d d" 
			"e e e e e e e d d d d d d d" 
			"e e e e e e e d d d d d d d" 
			"e e e e e e e d d d d d d d" 
			"e e e e e e e d d d d d d d"
			"e e e e e e e d d d d d d d"
			". f f f f f f f f f f f f f"
			". f f f f f f f f f f f f f"
			". g g g g g g g g g g g g ."
			". g g g g g g g g g g g g ." */
	;
	row-gap: 0;
	justify-content: start;
	align-content: center;
	place-items: center;
	overflow-x: hidden;
	width: 100%;
	height: 80%;
	padding: 0;
	margin: auto;
}

div.display .subtitle {
	justify-content: center;
	align-content: start;
	grid-area: a;
	justify-self: end;
	padding: 0;
	width: 100%;
	height: 100%;
	margin: auto;
}

/* #region =======> INTRO <============ */
/* .overview .intro.container {
		position: relative;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-auto-flow: column;
		align-content: start;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
	} */
.page.subtitle dl:nth-of-type(2) dd:nth-of-type(2) {
	grid-column: 1 / 3;
	width: 80%;
	justify-self: start;
}

.intro img {
	aspect-ratio: 10 / 10.5;
	height: auto;
	width: 85%;
	max-width: 100px;
	padding: 0;
	margin: 0;
	grid-column: 1;
}

.traineradvice {
	font: var(--trainer-advice-font);
	color: var(--trainer-adivce-color);
	grid-column: 2;
	margin: 0 1.5%;
	height: auto;
	width: 90%;
	text-align: justify;
	text-align-last: start;
	justify-self: start;
	hyphens: auto;
}

/*#endregion =======> INTRO <============ */
.card-scroll>article.intro {

	align-self: start;
	justify-self: start;
	grid-template-columns: 25% 75%;
	grid-template-rows: max-content;
	align-content: center;
	justify-content: center;
	width: 65%;
	height: 100%;
	max-height: 10vh;
	padding: 0 0 0 0;
	margin: 0 auto 3vh auto;
	grid-column: 2;
	grid-row: 2;
}

section.overview article.mini-display:has(> .mini-hdr-bar .toggle-btn > input:checked) article.intro {
	display: none;
}

article.mini-display {
	display: contents;
	width: 40vw;
	padding: 5px 0 5px 0;
	height: 100%;
}

div.mini-hdr-bar {
	grid-column: 1;
	grid-template-columns: 5vw 60% 10%;
	grid-template-rows: repeat(2, max-content);
	grid-template-areas:
		". a b"
		". c b";
	align-items: center;
	row-gap: 0px;
	width: 50vw;
}

div.mini-hdr-bar .akkordeon.toggle-btn {
	grid-area: b;
	width: auto;
	height: 3vw;
	aspect-ratio: 1 / 1;
	justify-self: end;
	align-self: start;
	margin-right: 1em;
}

section.overview article.mini-display:has(> .mini-hdr-bar .toggle-btn > input:checked)>.display-content {
	position: fixed;
	top: 8vh;
	left: 0;
	align-content: stretch;
	grid-column: 2;
	grid-row: 1 / 6;
	grid-template-columns: repeat(14, 1fr);
	grid-template-areas:
		"a a a a a a a  a a a a a a a"
		"b b b b b b c  c c c c c c ."
		"d d d d d d d d d d d d d d"
		"e e e e e e e e e e e e e e";
	height: auto;
	width: 45vw;
	padding: 3vw;
	background-color: white;
}

/* article.mini-display:has(> .mini-hdr-bar .toggle-btn > input:checked)>.display-content { */
/* 	max-height: max-content; */
/* 	opacity: 1; */
/* 	pointer-events: auto; */
/* 	margin: 0; */
/* 	grid-row: 1 / -1; */
/* 	align-self: center; */
/* 	overflow: auto; */
/* 	margin: auto 0; */
/* 	background-color:white; */
/* } */

section.overview article.mini-display.private:has(> .mini-hdr-bar .toggle-btn > input:checked) .display-content {
	grid-template-rows: repeat(14, max-content);
	grid-template-areas:
		"a a a a a a a a a a a a a a"
		"b b b b b b c c c c c c c ."
		"s s s s s s s s s s s s s s "
		"d d d d d d d d d d d d d d "
		"e e e e e e e e e e e e e e ";
}





/* #endregion* ========> Overview <============= */


/* ==============> Section Titles / DISPLAY SERVICES  <============*/
.display .h2-title h2 {
	font: var(--display-title-font);
	color: var(--h2-sectiontitle-color-2);
}

/*========= Contex and nav-buttons  ============*/

article.mini-display .request-row {
	grid-area: e;
	grid-template-columns: 1fr;
	padding-top: 1vh;
}

.request-row .pill {
	height: 6vh;
	width: 100%;
	padding: 0;
}


/*========= Sidebar NAV-BAR ==============*/

/* .responsive.panel { */
/* 	grid-template-columns: repeat(3, 1fr); */
/* 	grid-auto-flow: column; */
/* 	width: 80%; */
/* 	} */

.h2-title {
	width: 70vw;
	margin: 0 auto;
}

.footer .ftr-links {
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr;
	align-items: center;
	height: auto;
	grid-template-areas:
		"consent policy  logo terms legal";
}

/*vvv variante fuer grosse screens vvv*/
/*==============>>>Footer Grid Bloecke<<<=================*/
.complabel.grid {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas:
		".	 	estd	.   "
		"altn	estd	addr"
		"altn	estd	addr"
		"role	regi	addr"
		"role	regi	addr"
		"role	lice 	addr"
		"role	copy 	addr"
		".		copy 	.    "
		".		.		.	"
	;
	align-items: start;
	justify-content: space-evenly;
	width: 75%;
	margin: 0 auto;
}

.comp-name-estd {
	justify-self: center;
	justify-content: center;
	align-content: center;
	grid-area: estd;
	padding: 4px;
	width: 100%
}

.estd::before,
.estd::after {
	content: "-";
	margin: 0 1ch;
}


.comp-name-alt {
	grid-area: altn;
	text-align: center;
}

.badge.reg {
	grid-area: regi;
	gap: 0.2em;
	padding: 0;
	margin: 0 auto;
	align-self: end;
}

.licences {
	grid-area: lice;
	align-self: end;
}

.badge.cpyrit {
	grid-area: copy;
}

.complabel div:has(address) {
	grid-area: addr;
}

.complabel div:has(address)>address {
	gap: 5px;
}

.grid.complabel ul {
	grid-area: role;
	align-self: start;
	flex-direction: column;
	justify-content: start;
	align-content: center;
	text-align: center;
	gap: 0px;
	margin: 0 auto;
}

.complabel>ul>li::before {
	display: none;
}

.comp-name-estd .comp-name {
	margin: auto;
}

.comp-name-estd .estd {
	display: flex;
	margin: auto;
}

/* ==============> Social Media Symbols<============*/

aside.sml.container {
	justify-self: end;
	display: inline-grid;
	grid-template-columns: repeat(3, 3.25vw);
	grid-template-rows: max-content;
	grid-template-areas:

		"WA IG FB";

	justify-content: start;
	align-items: center;
	gap: 10px;
	position: fixed;
	bottom: 10vh;
	right: 5vw;
	width: auto;
	height: 3.25vw;
}

.svg.glyph {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 3.25vw;
}

div.headline .svg.glyph {
	height: auto;
	width: 100%;
}

/* ==============> FAQ & Consent Settings Symbols<============*/
.floater.grid {
	position: fixed;
	bottom: 10vh;
	left: 5vw;
	z-index: 9;
	grid-template-columns: 36px 70px;
	grid-template-rows: 50px;
	justify-content: start;
	align-content: center;
	gap: 0 5px;
	width: auto;
	height: 3.5vh;
	padding: 0;
}

.pseudo.icon {
	grid-template-columns: 21.5% 33% 30%;
	justify-self: stretch;
	align-self: center;
	font-size: 3em;
	line-height: .675em;
	height: 50px;
	aspect-ratio: 2 / 1.6;
	width: auto;
	margin-left: -1%;
}

.floater .i-label.faq-link {
	aspect-ratio: 2/ 1.65;
	width: 100%;
	grid-column: 2;
	grid-row: 1;
}

.floater .i-label.cm-link {
	aspect-ratio: 1 / 1;
	width: 36px;
	grid-column: 1;
	grid-row: 1;
}

.cm-link .cmr-icon {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
	grid-column: 1;
	grid-row: 1;
}

div.display .video.card {
	aspect-ratio: 3/4;
	justify-self: start;
	align-self: center;
	margin: 0;
	height: 100%;
	width: auto;
}

div.lesson.price {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, max-content);
	align-self: end;
	justify-self: end;
	margin: 0;
	color: #3c8861;
	font: var(--price-dt-font);

}


.price-list {
	justify-items: end;
}

.lesson.price dt,
.lesson.price dd {
	justify-self: end;
}

.lesson.price dt {
	grid-column: 1;
}

.lesson.price dd {
	grid-column: 2;
}

.lesson.price h3 {
	justify-self: end;
	font-size: .8em;
	font-weight: 600;
}

div.display .lesson.included {
	justify-items: start;
	justify-self: start;
}

div.display .lesson.usps {
	width: 100%;
	align-self: center;
}

.main-card div.display .lesson.usps .badge {
	width: 100%;
	margin: auto;
	text-align: center;
	row-gap: 5px
}

.service-deck div.nav-row {
	grid-area: g;
	justify-content: stretch;
	align-content: stretch;
	margin: 0;
	padding: 0;
}

/* .mini-display div.nav-row {
		grid-area: ;
	} */

nav.context-nav {
	justify-self: center;
	justify-content: space-around;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	gap: 2%;
}

.service-deck div.nav-row nav.context-nav {
	grid-template-columns: repeat(2, 1fr);

}

.service-deck .badge.nav-row nav.context-nav .pill {
	height: 6vh;
	width: 100%;
	margin: 5px auto;
	place-items: center;
}

div.nav-row nav.context-nav .pill {}

div.page-display div.nav-row nav.context-nav a.pill.booking-pill {
	/* min-width: 70%; */
	width: 100%;
	margin: 0;
	font-weight: bold;
}

/*#region===============CONTACT FORM VARIANTS============*/
.qcontact {
	top: 5vh;
	height: clamp(575px, 55vh, 700px);
	width: clamp(800px, 50vw, 1200px);
}

.qcontact:has(.quick) {
	top: 5vh;
	left: 0;
	height: clamp(575px, 55vh, 700px);
	width: clamp(800px, 50vw, 1200px);
}

form.quick.request {
	width: 100%;
	margin-top: 0vh;
}

.qcontact .headline>h4 {
	width: 90%;
}

form.specific.request {
	grid-template-areas:
		"a a a a   b b b b   c c c c"
		"e e e e   e e e e   e e e e"
		"f f f f   f f f f   f f f f"
		"d d d d   d d d d   d d d d"


		"g g g g   g g g g   g g g g"
		"h h h h   h h h h   h h h h"
		"i i i i   i i i i   i i i i"
		"j j j j   j j j j   j j j j"
		"k k k k   k k k k   k k k k"
		"l l l l   l l l l   l l l l";
	width: 100%;
}

/*#endregion===============CONTACT FORM VARIANTS============*/

/*INTRO Who-is variant*/
article.intro.who-is {
	display: block;
	height: auto;
	max-height: max-content;
	width: 95%;
	justify-self: center;
	align-self: center;
	margin: auto;
	overflow: hidden;
}



article.who-is.intro img.float-left {

	aspect-ratio: 10 / 10.5;
	height: auto;
	width: 33%;
	max-height: 50%;
	padding: 1% 2% 0 0;
}


.traineradvice {
	font: var(--trainer-advice-font);
	color: var(--trainer-adivce-color);
	width: 100%;
	margin: 0;
	height: auto;
	text-align: justify;
	text-align-last: start;
	hyphens: auto;
	align-self: center;
}

dialog.small-map {
	height: auto;
	width: clamp(400px, 70vw, 600px);
	top: 10vh;
	left: -30vw;
}

.map-wrapper {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-auto-flow: column;
	gap: 1% 0;
	margin: 0 auto;
	justify-items: center;
	align-items: center;
	padding: 1% 1% 0 1%;
	box-shadow: 0 0 5px inset rgba(64, 108, 134, .5);
}




@media (orientation:portrait) {
	.page-hero.card-header>img {
		opacity: 1;
		top: -80%;
	}

	body.page>footer {
		display: block;
		position: fixed;
		z-index: 9;
		bottom: 0px;
		left: 0;
		margin: 0;
		height: 6vh;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		transform: translateY(100%);
		transition: opacity .25s ease, transform .25s ease;
	}

	.brand {
		grid-template-columns: clamp(50px, 50%, 60px) 1fr;
		width: clamp(200px, 75vw, 280px);
		overflow: visible;
		height: 7vh;
		margin-top: 5px;
		align-self: center;
	}

	section.page-content {
		grid-area: b;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: max-content 10px 1fr;
		grid-template-areas:
			"a a a  a a a  a a a  a a a"
			". . .  . . .  . . .  . . ."
			"b b b  b b b  b b b  b b b";
		grid-area: b;
		width: var(--content-width);
		height: auto;
		margin: 0 auto 0 auto;
	}

	section.page-content.legal-section {
		width: 85%;
	}

}

@media (min-width: 690px) {
	:root {
		--content-width: clamp(680px, 80%, 80vw);
	}
}

@media (orientation:portrait) and (801px <=width < 1270px) and (max-aspect-ratio: 1) {

	@supports (container-type: scroll-state) {

		.floater .cm-link,
		.floater .faq-link {
			opacity: 0.2;
		}

		div.faq nav.context-nav>.pill {
			opacity: .2;
		}

		/* body.page-body footer {
			transform: translateY(100%);
			opacity: 0;
		} */
		@container page-scroll scroll-state(scrolled: block-end) {

			.floater .cm-link,
			.floater .faq-link {
				opacity: 1;
			}
		}

		@container page-scroll scroll-state(scrolled: block-start) {

			.floater .cm-link,
			.floater .faq-link {
				opacity: .2;
			}
		}

		/* @container page-scroll scroll-state(scrolled: block-end) { */
		/* 	body.page-body footer { */
		/* 		transform: translateY(0%); */
		/* 		opacity: 1; */
		/* 	} */
		/* } */

	}

	main.map-page div.page-display {

		grid-template-columns: repeat(4, 25%);
		grid-template-rows: max-content;
		grid-template-areas:
			"a a a a"
			"c c c c"
			"b b b b"
			"d d d d"
			"g g g g"
			"j j j j"
			"i i i i";

		row-gap: 25px;
		;
		place-items: center;
		width: 100%;
		height: auto;
		margin: 0px auto;
		align-self: end;
	}

	main.page.map-page .lesson.essentials details {
		grid-row: 3;
		grid-column: 1 / 3;
		width: 100%;
		height: 50vh;
	}

	main.page.map-page .lesson.essentials details dl.essentials {
		height: 48vh;
		display: grid;
		grid-template-rows: repeat(3, max-content);
		width: 95%;
	}

	main.page.map-page .illustration.photphoto-hero {
		width: 95%;
	}

	main.page.map-page .illustration.meeting-point {
		width: 95%;
	}

	main.page.map-page .page-display .parking-tips {
		width: 95%;
	}

	main.page.map-page .page-display .local-context {
		width: 95%;
	}

	main.page.map-page .page-display .m-ctext {
		width: 95%;
	}

	section.page-content div.lead-headline {
		padding: 10px 0;
		width: 100%;
		margin: auto;
	}

	div.illustration.photo {
		position: static;
		width: 100%;
		height: auto;
		max-height: 95%;
		justify-self: center;
	}

	article.who-is {
		padding-top: 15px;

	}

	div.page-display,
	main.halfmoon-page div.page-display {
		grid-area: b;
		grid-template-columns: repeat(12, calc(100% / 12));
		grid-template-rows: repeat(4, max-content) repeat(5, max-content) max-content repeat(3, 7vh) repeat(2, max-content) repeat(4, 9vh) max-content 50px repeat(7, max-content) 50px repeat(3, 15fr);
		grid-template-areas:
			"e e e e  e b b b  b b b b"
			"d d d f  f b b b  b b b b"
			"d d d f  f b b b  b b b b"
			"d d d f  f b b b  b b b b"
			"a a a a  a a a a  l l l l"
			"a a a a  a a a a  l l l l"
			"a a a a  a a a a  l l l l"
			"a a a a  a a a a  l l l l"
			"a a a a  a a a a  l l l l"
			"g g g g  g g g g  g g g g"
			"k k k k  k k s s  s s s s"
			"k k k k  k k s s  s s s s"
			"k k k k  k k s s  s s s s"
			"p p p p  p p i i  i i i i"
			"p p p p  p p i i  i i i i"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"

			"h h h h  h h h h  h h h h"
			"h h h h  h h h h  h h h h"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			". . . .  . . . .  . . . ."
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n";
		row-gap: 0;
		place-items: center;
		width: 100%;
		height: auto;
		margin: 0px auto;
		align-self: end;

	}

	div.illustration.photo-hero {
		grid-area: b;
		aspect-ratio: 7 / 4;
		justify-self: start;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.page-display p.description {
		grid-area: a;
		width: 95%;
		padding: 0;
		align-self: start;
		justify-self: start;
		height: auto;
		margin: 0;
	}

	article.features.flexcol {
		grid-area: d;

		min-width: 100%;

		max-height: 100%;
		align-self: start;
	}

	article.features>dl>dd {
		column-gap: .25ch;
	}

	.lesson.price dt {
		grid-column: 1;
		grid-row: 1;
	}

	.lesson.price dd {
		grid-column: 1;
		grid-row: 2;
	}

	article.usps {
		padding: 0 0 15px 0;
		width: 80%;
		justify-self: start;
	}

	article.usps>ul.badge.usps {
		margin: 0;
		width: 100%;
	}

	main.halfmoon-page div.faq,
	div.faq {
		grid-area: l;
		grid-template-columns: 100%;
		grid-template-rows: max-content 1fr;
		height: 45vh;
		width: 100%;
		margin: 0;
		padding-bottom: 10px;
	}

	div.faq div.shortfaq {
		width: 100%;
	}

	main.halfmoon-page div.faq>div.headline,
	div.faq>div.headline {
		grid-template-rows: 1fr;
		grid-template-columns: max-content 1fr;
		height: 90%;
		width: 100%;
		grid-column: 1 / 3;
		grid-row: 1;
		/* justify-content: start; */
		place-items: center;
		gap: 0;
		justify-self: start;
	}

	div.faq div.headline>h4 {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	div.faq div.headline h4>span {
		display: flex;
		flex-direction: column;
	}

	main.halfmoon-page div.faq div.headline>p,
	div.faq div.headline>p {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		height: fit-content;
		widtH: 95%;
		text-align: justify;
		text-align-last: left;
		padding: 0;
		font: var(--shortfaq-hint-font);
	}

	article.lesson.essentials {
		display: contents;
	}

	article.lesson.essentials>div.headline {
		grid-area: p;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr max-content;
		align-self: end;
		justify-self: center;
		justify-content: center;
		align-items: end;
		text-align: center;
		width: 100%;
		height: 100%;
	}

	main.halfmoon-page article.lesson.essentials>div.headline {
		grid-template-rows: 1fr max-content;
	}

	main.halfmoon-page article.lesson.essentials div.headline>h4 {
		font-size: 4em;
	}

	article.lesson.essentials>dl {
		grid-area: j;
		justify-content: start;
		height: 99%;
		width: 100%;
		align-self: end;
	}

	div.cta {
		grid-area: m;
		width: 100%;
		height: 80vh;
		padding-top: 20px;
	}

}

@media (orientation: portrait) and (360px <=width < 800px) {
	body::before {
		content: "mobile active";
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		background: red;
		color: white;
	}

	:root {
		--content-width: clamp(340px, 90vw, 405px);
	}

	div.display .lesson.included {
		display: none;
		grid-area: e;
		justify-items: end;
		margin-right: -.5em;
	}

	main.page section.page-hero h1 {
		letter-spacing: normal;
	}

	main.map-page div.page-display {

		grid-template-columns: repeat(4, 25%);
		grid-template-rows: max-content;
		grid-template-areas:
			"a a a a"
			"c c c c"
			"b b b b"
			"d d d d"
			"g g g g"
			"j j j j"
			"i i i i";

		row-gap: 25px;
		;
		place-items: center;
		width: 100%;
		height: auto;
		margin: 0px auto;
		align-self: end;
	}

	main.map-page div.page-display article.lesson.essentials {
		display: grid;
		grid-template-rows: repeat(3, max-content);
		width: 95%;
	}

	main.page.map-page .lesson.essentials details {
		grid-row: 3;
		grid-column: 1 / 3;
		width: 100%;
		height: 50vh;
	}

	main.page.map-page .lesson.essentials details dl.essentials {
		height: 48vh;
	}

	main.page.map-page .illustration.photphoto-hero {
		width: 95%;
	}

	main.page.map-page .illustration.meeting-point {
		width: 95%;
	}

	main.page.map-page .page-display .parking-tips {
		width: 95%;
	}

	main.page.map-page .page-display .local-context {
		width: 95%;
	}

	main.page.map-page .page-display .m-ctext {
		width: 95%;
	}

	section.page-content div.lead-headline {
		padding: 10px 0;
		width: 95%;
		margin: auto;
	}

	div.illustration.photo {
		position: static;
		width: 100%;
		height: auto;
		max-height: 95%;
		justify-self: center;
	}

	article.who-is {
		padding-top: 15px;

	}

	div.page-display,
	main.advanced-flex-page div.page-display {
		grid-area: b;
		grid-template-columns: repeat(12, calc(100% / 12));
		grid-template-rows: repeat(4, max-content) repeat(5, max-content) 15vh repeat(3, max-content) repeat(2, 15vh) repeat(2, max-content) repeat(4, 9vh) max-content 50px repeat(7, max-content) 50px repeat(3, 15fr);
		grid-template-areas:
			". b b b  b b b b  b b b ."
			". b b b  b b b b  b b b ."
			". b b b  b b b b  b b b ."
			". b b b  b b b b  b b b ."
			"a a a a  a a a a  a a a a"
			"a a a a  a a a a  a a a a"
			"e e e e  e e e e  e e e e"
			"d d d d  d d f f  f f f f"
			"d d d d  d d f f  f f f f"
			"g g g g  g g g g  g g g g"
			"l l l l  l l l l  l l l l"
			"l l l l  l l l l  l l l l"
			"l l l l  l l l l  l l l l"
			"k k k k  k k k k  k k k k"
			"k k k k  k k k k  k k k k"
			"p p p p  p p i i  i i i i"
			"p p p p  p p i i  i i i i"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"

			"h h h h  h h h h  h h h h"
			"h h h h  h h h h  h h h h"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"o o o o  o o o o  o o o o"

			". . . .  . . . .  . . . ."
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n";
		row-gap: 0;
		place-items: center;
		width: 100%;
		height: auto;
		margin: 0px auto;
		align-self: end;

	}

	.lesson.price dt:first-of-type {
		grid-column: 1 / 3;
		grid-row: 1;
		text-align: right;
	}

	.lesson.price dt:nth-of-type(2) {
		grid-column: 1 / 3;
		grid-row: 3;
	}

	.lesson.price dd:first-of-type {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.lesson.price dd:nth-of-type(2) {
		grid-column: 1 / 3;
		grid-row: 4;
	}


	.page-display p.description {
		grid-area: a;
		width: 95%;
		padding: 15px 0;
	}

	article.usps {
		padding: 0 0 15px 0;
		width: 100%;
	}

	article.usps>ul.badge.usps {
		margin: 0;
		width: 100%;
	}

	div.meeting-point {
		width: 100%
	}

	main.halfmoon-page div.faq,
	div.faq {
		grid-area: l;
		grid-template-columns: 100%;
		grid-template-rows: max-content 1fr;
		height: 45vh;
		width: 100%;
		margin: 0;
		padding-bottom: 10px;
	}

	div.faq div.shortfaq {
		width: 100%;
	}

	main.halfmoon-page div.faq>div.headline,
	div.faq>div.headline {
		grid-template-rows: 1fr;
		grid-template-columns: max-content 1fr;
		height: 90%;
		width: 100%;
		grid-column: 1 / 3;
		grid-row: 1;
		/* justify-content: start; */
		place-items: center;
		gap: 0;
		justify-self: start;
	}

	div.faq div.headline>h4 {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	div.faq div.headline h4>span {
		display: flex;
		flex-direction: column;
	}

	main.halfmoon-page div.faq div.headline>p,
	div.faq div.headline>p {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		height: fit-content;
		widtH: 95%;
		text-align: justify;
		text-align-last: left;
		padding: 0;
		font: var(--shortfaq-hint-font);
	}

	article.lesson.essentials {
		display: contents;
	}

	article.lesson.essentials>div.headline {
		grid-area: p;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr max-content;
		align-self: end;
		justify-self: center;
		justify-content: center;
		align-items: end;
		text-align: center;
		width: 100%;
		height: 100%;
	}

	main.halfmoon-page article.lesson.essentials>div.headline {
		grid-template-rows: max-content 1fr;
	}

	article.lesson.essentials>dl {
		grid-area: j;
		justify-content: start;
		height: 99%;
		width: 100%;
		align-self: end;
	}

	div.cta {
		grid-area: m;
		width: 100%;
		height: 80vh;
		padding-top: 20px;
	}

	/* 	main.halfmoon-page div.page-display { */
	/* 		grid-template-areas: */
	/* 			"a a a a  a a b b  b b b c" */
	/* 			"a a a a  a a b b  b b b c" */
	/* 			"a a a a  a a b b  b b b c" */
	/* 			"a a a a  a a b b  b b b c" */
	/* 			"d d d d  e e e e  f f f f" */
	/* 			"d d d d  e e e e  f f f f" */
	/* 			"d d d d  e e e e  f f f f" */
	/* 			"d d d d  e e e e  f f f f" */
	/* 			"g g g g  g g g g  g g g g" */
	/* 			"k k k k  p p p p  l l l l" */
	/* 			"k k k k  p p p p  l l l l" */
	/* 			"k k k k  p p p p  l l l l" */
	/* 			". . . .  . . . .  . . . ." */
	/* 			"j j j j  j j j j  i i i i" */
	/* 			"j j j j  j j j j  i i i i" */
	/* 			"j j j j  j j j j  i i i i" */
	/* 			"j j j j  j j j j  i i i i" */
	/* 			"j j j j  j j j j  i i i i" */
	/* 			". . . .  . . . .  . . . ." */
	/* 			"m m m m  m m m h  h h h ." */
	/* 			"m m m m  m m m h  h h h ." */
	/* 			"m m m m  m m m o  o o o o" */
	/* 			"m m m m  m m m o  o o o o" */
	/* 			"m m m m  m m m o  o o o o" */
	/* 			"m m m m  m m m o  o o o o" */
	/* 			". . . .  . . . .  . . . ." */
	/* 			"n n n n  n n n n  n n n n" */
	/* 			"n n n n  n n n n  n n n n" */
	/* 			"n n n n  n n n n  n n n n" */
	/* 			"n n n n  n n n n  n n n n"; */
	/* 	} */
	/*  */
	main.halfmoon-page div.page-display,
	main.deepdip-page div.page-display {
		grid-template-rows: repeat(4, max-content) repeat(5, max-content) 15vh repeat(3, max-content) repeat(2, 15vh) repeat(2, 15vh) repeat(2, max-content) repeat(4, 9vh) max-content 50px repeat(7, max-content) 50px repeat(3, 15fr);
		grid-template-areas:
			". b b b  b b b b  b b b ."
			". b b b  b b b b  b b b ."
			". b b b  b b b b  b b b ."
			". b b b  b b b b  b b b ."
			"a a a a  a a a a  a a a a"
			"a a a a  a a a a  a a a a"
			"e e e e  e e e e  e e e e"
			"d d d d  d d f f  f f f f"
			"d d d d  d d f f  f f f f"
			"g g g g  g g g g  g g g g"
			"l l l l  l l l l  l l l l"
			"l l l l  l l l l  l l l l"
			"l l l l  l l l l  l l l l"
			"k k k k  k k k k  k k k k"
			"k k k k  k k k k  k k k k"
			"s s  s s s s s s  s s s s"
			"s s  s s s s s s  s s s s"
			"p p p p  p p i i  i i i i"
			"p p p p  p p i i  i i i i"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"
			"j j j j  j j j j  j j j j"

			"m m m m  m m m m  m m m m"
			"m m m m  m m m m  m m m m"
			"h h h h  h h h h  h h h h"

			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n"
			"n n n n  n n n n  n n n n";
	}


}