@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: Inter;
	font-weight: bold;
	src: url(fonts/inter-bold.woff);
}

@font-face {
	font-family: Inter;
	font-weight: normal;
	src: url(fonts/inter-regular.woff);
}

:root {
	--top-border: calc(2.4vw + 3.6vh);
	--logo-size: 60px;
	--logo-opacity: 1;
	--logo-space: relative;
	--gap-grid: 50px;
	--main-color: #e41f3e;
	--main-color2: #ff002b;
}

html {
	overflow-x: hidden;
	background-color: var(--bg-color);
}

textOptOut {
	font-weight: normal;
}

.bgcolor {
	background-color: var(--bg-color);
}

body {
	overflow: hidden;
	min-height: 100vh;
	min-height: -webkit-fill-available;
}

b {
	font-weight: bold;
}

* {
	font-family: Inter, sans-serif;
	margin: 0;

	text-decoration: none;
	text-decoration-color: #33C3F0;
}

h1 {
    font-family: Inter, sans-serif;
	font-weight: bold;
	font-size: 108px;
	color: #e41f3e;
}

h2 {
    font-family: Inter, sans-serif;
	font-weight: bold;
	font-size: 50px;
}

h3 {
    font-family: Inter, sans-serif;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 18px;
}

p, li {
	font-family: Inter, sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 1.5;
}

li::marker {
	content: "›     ";
	font-weight: bold;
}

a {
    font-family: Inter, sans-serif;
	font-weight: normal;
	font-size: 18px;
}

.linked {
	text-decoration: underline;
}

.unselectable {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media (min-width: 1500px) {


}

@media (min-width: 2300px) {


}

.main-logo {
	transition: all 0.5s ease 0s;
	position: fixed;
	margin-top: calc(var(--top-border) / 2);
	left: var(--top-border);
	height: var(--logo-size);
	fill: #e41f3e;
	z-index: 9998;
}

.header-button {
	transition: all 0.5s ease 0s;
	position: fixed;
	margin-top: calc((var(--top-border) / 2) + 10px);
	right: var(--top-border);

	background-color: #e41f3e;
	border: 0;
	border-radius: 300px;
	padding: 0.7em 2.3em;
	font-weight: bold;
	font-size: 18px;
	color: white;
	cursor: pointer;
 	outline: 0;
	z-index: 9998;
}

.header-button:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: #ec64426b 0px 16px 24px -2px;
}

.spacer-header {
	position: relative;
	margin-top: 60vh;
}

.artwork-container {
	z-index: -99999;
}

.artwork-svg {
	transform: rotate(45deg);
}

#svg-artwork-id {
	opacity: 0;
}

/* transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, stroke-dashoffset 1.7s ease 0s; */

.writing-container {
	position: absolute;
	height: 75vh;
	width: 47vw;
	top: calc(25vh - var(--top-border));
	right: calc(20px + var(--top-border));
}

#vector1 {
	position: absolute;
	z-index: -9999;
	stroke-dasharray: 1000;
}

#vector2 {
	position: absolute;
	z-index: -9999;
	stroke-dasharray: 1000;
}

#vector3 {
	position: absolute;
	z-index: -9999;
	stroke-dasharray: 1000;
}

.mid-container {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.down-container {
	position: absolute;
	bottom: 0px;
}

.top-content {
	height: 100vh;
	width: 100vw;
	position: relative;
	z-index: 100;
	overflow: hidden;
}

#header-background {
	position: fixed;
	width: 100vw;
	height: calc((var(--logo-size) * 1) + var(--top-border));
 	background-color: white;
	box-shadow: 10px 13px 30px 0px rgba(0,0,0,0.18);
	border-radius: 0px 0px 27px 27px;
	opacity: 0;
	z-index: 9997;
	transition: opacity 0.2s ease 0s;
}

.image-box-top {
	position: absolute;
	border-radius: 23px;
	object-fit: cover;
	height: 75vh; width: 40vw;
	bottom: var(--top-border);
	left: var(--top-border);
	z-index: -99999;
}

.image-box-top2 {
	position: absolute;
	border-radius: 0px 23px 23px 0px;
	object-fit: cover;
	height: 100vh; width: 40vw;
	bottom: 0px;
	left: 0px;
	z-index: -99999;
}

.image-box {
	border-radius: 23px;
	object-fit: cover;
	z-index: -99999;
}

.img-grid-box1 {
	height: 100%;
	width: 100%;
}

.img-grid-box2 {
	position: absolute;
	bottom: 0px;
	height: 50%;
	width: 50%;
	transform: translateY(calc(var(--gap-grid)*-2));
}

.img-grid-box3 {
	height: 100%;
	width: 100%;
	transform: translateY(calc(var(--gap-grid)*-2));
}

.bigtext-welcome {
	text-align: center;
	color: #e41f3e;
	position: absolute;
	z-index: 100;
	top: 5%;
	left: 20%;
}

.bigtext-device {
	text-align: center;
	color: #e41f3e;
	position: absolute;
	z-index: 100;
	bottom: 8%;
	right: 2%;
}

.img-grid-text {
	position: relative;
	max-width: 500px;
}

.cls-1{fill:none;stroke:#f0f0f0;stroke-linecap:round;stroke-miterlimit:10;stroke-width:20px;}

.grids-co{position: relative; height: fit-content; margin-bottom: 6vh;}

.grid-container {
	display: grid;
	margin: var(--top-border);
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1.2fr 0.8fr;
	gap: var(--gap-grid) var(--gap-grid);
	grid-template-areas:
	  "A1 A2"
	  "A3 A4";
  }
  .A1 { grid-area: A1; position: relative;}
  .A2 { grid-area: A2; position: relative;}
  .A3 { grid-area: A3; position: relative;}
  .A4 { grid-area: A4; position: relative;}

  .sub-slider {
	position: relative;
	border: 8px solid #e41f3e;
	border-radius: 23px;
	min-height: 550px;
	max-width: 500px;
  }

  .sub-container {
	position: relative;
	overflow: visible;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: var(--gap-grid);
	/* margin-left: var(--gap-grid);
	margin-right: var(--gap-grid); */}

  .spaceing-layout {
	position: relative;
	height: 200px;
  }

  .spaceing-layout-half {
	position: relative;
	height: 100px;
  }

  .sub-button {
	transition: all 0.5s ease 0s;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;

	background-color: #e41f3e;
	border: 0;
	border-radius: 300px;
	padding: 0.7em 2.3em;
	font-weight: bold;
	font-size: 18px;
	color: white;
	cursor: pointer;
 	outline: 0;
	z-index: 100;
	transform: scale(1.2);
}

.sub-button:hover {
	transform: translateY(-6px) scale(1.22);
	box-shadow: #ec64426b 0px 16px 24px -2px;
}

.space-line {
	background-color: #e41f3e;
	border-radius: 23px;
	height: 8px;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.pricetag {
	color: #e41f3e;
	font-weight: bold;
	font-size: 32px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sub-text {
	color: black;
	font-weight: normal;
	font-size: 22px;
	text-align: center;
}

.sub-text2 {
	position: absolute;
	bottom: 0px;
	color: black;
	font-weight: normal;
	font-size: 22px;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.sub-grid-container {
	display: grid;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 0.4fr 1fr 0.1fr .6fr;
	gap: 0px 0px;
	grid-template-areas:
		"B1"
		"B2"
		"B3"
		"B4"
		"B5";
}
.B1 { grid-area: B1; position: relative;}
.B2 { grid-area: B2; position: relative;}
.B3 { grid-area: B3; position: relative;}
.B4 { grid-area: B4; position: relative;}
.B5 { grid-area: B5; position: relative;}

small {
	font-size: 20px;
}

.calendar-icon {
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.swiper-pagination span {
	margin: 4px;
}
















.contact-headline {
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 25px;
	width: 80%;
	color: var(--main-color);
}

.g-map-container {
	position: relative;
	border-radius: 23px;
	height: 100%;
	width: 100%;
}

.g-map-container * {
	border-radius: 23px;
}

.image-box-g-map {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.adress-container {
	position: absolute;
	border-radius: 23px;
	height: 60vh;
	width: 50%;
	margin-left: 10%;
	margin-right: 10%;
}

.contact-grid-container {
	display: grid;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 12vh;
	grid-template-columns: 1.3fr 0.7fr;
	grid-template-rows: 1fr;
	gap: var(--gap-grid);
	grid-template-areas:
		"C1 C2";
}

.C1 { grid-area: C1; position: relative;}
.C2 { grid-area: C2; position: relative;}

.contact-first-text {
	color: var(--main-color);
}

.contact-opening {
	color: var(--main-color);
}

n {
	font-weight: normal;
	color: black;
	text-decoration: none;
    text-decoration-color: none;
}

.opening-warning {
	position: relative;
	width: 100%;
	max-width: 520px;
	height: fit-content;
	margin-top: var(--gap-grid);
	border-radius: 23px;
	background-color: #f4f4f4;
}

.warning-grid-container {
	display: grid;
	padding: calc(var(--gap-grid)/1.7);
	grid-template-columns: 0.3fr 1.7fr;
	grid-template-rows: 1fr;
	gap: calc(var(--gap-grid)/1.7);
	grid-template-areas:
	  "D1 D2";
}

.D1 { grid-area: D1; position: relative;}
.D2 { grid-area: D2; position: relative;}

.warning-text {
	margin-bottom: 0px;
}

.warning-icon {
	stroke-width: 8px;
	left: 50%;
    transform: translateX(-50%);
	position: relative;
}






















.footer-legal {
	position: relative;
	margin-top: 30px;
	border-radius: 23px 23px 0px 0px;
	height: calc(var(--gap-grid)*2+14px);
}

.imprint-section {
	display: flex;
	position: absolute;
	right: var(--gap-grid);
	bottom: var(--gap-grid);
}

.imprint-section a {
	font-size: 14px;
	margin-right: var(--gap-grid);
	color: #b6b6b6;
	font-weight: bold;
	text-decoration: none;
}
@media (max-width: 450px) {
	.imprint-section a:nth-child(2) {
		font-size: 14px;
		position: absolute;
		color: #b6b6b6;
		font-weight: bold;
		text-decoration: none;
		right: 0px;
		bottom: calc(var(--gap-grid));
	}
}
























.form-container {
	margin-top: 4vh;
	border: 23px;
	padding: 50px;
	border-radius: 23px;
	background-color: #f4f4f4;
}

.choice-grid-container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: var(--gap-grid);
	grid-template-areas:
	  "E1 E2";
}
.E1 { grid-area: E1; position: relative;}
.E2 { grid-area: E2; position: relative;}

.choice-grid {
	position: relative;
	border: 8px solid var(--color-changer);
	border-radius: 23px;
	width: 100%;
	max-width: 300px;
	height: 500px;
}

.sub-text-override {
	font-size: 18px;
	color: var(--color-changer);
	transition: all 0.5s ease 0s;
}

.sub-text-header {
	margin-top: 20px;
	text-align: center;
}

.button-choice {
	transition: all 0.5s ease 0s;

	--color-changer: #bdbdbd;
}

.button-choice:hover {
	transform: translateY(-25px);
	box-shadow: 10px 13px 30px 0px rgba(0,0,0,0.18);
	--color-changer: var(--main-color);
}

.button-choice:hover + .pricetag2 {
	color: var(--color-changer);
}

.pricetag2 {
	color: var(--color-changer);
	font-weight: bold;
	font-size: 32px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.5s ease 0s;
}

.space-line2 {
	background-color: var(--color-changer);
	transition: all 0.5s ease 0s;
}

.cls-1EE {
	fill:none;
	stroke:var(--color-changer);
	stroke-linecap:round
	;stroke-miterlimit:10;
	stroke-width:8px;
	transition: all 0.5s ease 0s;
}
.cls-2EE {
	font-size:60px;
	fill:var(--color-changer);
	font-weight:700;
	transition: all 0.5s ease 0s;
}

.cls-1E {
	fill:none;
	stroke:var(--color-changer);
	stroke-linecap:round;
	stroke-miterlimit:10;
	stroke-width:8px;
	transition: all 0.5s ease 0s;
}

.cls-2E {
	font-size:60px;
	fill:var(--color-changer);
	font-weight:700;
	transition: all 0.5s ease 0s;
}

.header-text  {
	margin-bottom: 6vh;
	margin-top: 2vh;
}

.head-header-text {
	color: var(--main-color);
}

.header-container {
	padding-bottom: 10vh;
}

.form-break {
	background-color: #d6d6d6;
	border-radius: 23px;
	margin-top: 8vh;
	margin-bottom: 8vh;
	height: 4px;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.checkbox-text {
	margin-left: 32px;
	line-height: 1.5;
}

#lock_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.logo-shortner {
	opacity: var(--logo-opacity);
	position: var(--logo-space);
	transition: opacity 0.5s ease 0s;
}

.alert, .error {
	font-size: 14px;
	color: var(--main-color);
	margin-bottom: 3vh;
}













.honeypot {
    position: absolute;
    left: -9999px;
}