@charset "UTF-8";

:root {
    --farbe_gelb: #DDB301;
    --farbe_hellgrau: #EAEAEA;
    --farbe_dunkelgrau: #444444;
    --font_1: 'OnestRegular', Helvetica, Arial, sans-serif;
    --font_2: 'OnestBold', Helvetica, Arial, sans-serif;
}

/* @font-face, family and size */

@font-face {
  src: url("fonts/Onest-Regular.woff2") format("woff2");
  font-family: "OnestRegular";
    font-weight: 400;
}

@font-face {
  src: url("fonts/Onest-Bold.woff2") format("woff2");
  font-family: "OnestBold";
    font-weight: 700;
}

.font_bold {
  	font-family: "OnestBold", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

body {
	font-family: var(--font_1);
	font-weight: XXX;
	font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font_2);
	font-weight: 700;
	text-transform: uppercase;}

buttons {
	font-family: var(--font_2);
	font-weight: 700;
	font-size: 1em;
}

.lowercase {
	text-transform: lowercase;
}

.uppercase {
	text-transform: uppercase;
}

/* Colors */

a {
	color: var(--farbe_dunkelgrau);
}

a:focus, a:hover, a:active {
	color: var(--farbe_dunkelgrau);
}

.farbe_weiss {
	color: #fff;
}

.farbe_gelb {
	color: var(--farbe_gelb);
}

.farbe_hellgrau {
	color: var(--farbe_hellgrau);
}

.farbe_dunkelgrau {
	color: var(--farbe_dunkelgrau);
}

.bg_hellgrau {
	background: var(--farbe_hellgrau);
}

.bg_hellgrau_mobile {
	background: var(--farbe_hellgrau);
}

.bg_dunkelgrau {
	background: var(--farbe_dunkelgrau);
	color: #fff;
}

.bg_dunkelgrau_mobile {
	background: var(--farbe_dunkelgrau);
	color: #fff;
}

.bg_gelb_mobile {
	background: var(--farbe_gelb);
	color: #fff;
}

.bg_gelb_mobile_2 {
	background: var(--farbe_gelb);
	color: #fff;
}

/* Basics */

html {
	scroll-behavior: smooth;
}

body {
	height: 100%;
	margin: 0 auto;
	background: #fff;
	color: var(--farbe_dunkelgrau);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: grayscale;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

img {
	width: 100%;
}

:focus { 
	outline: none
}

.show_mobile {
	display: block;
}

.show_tablet {
	display: none;
}

.show_desk {
	display: none;
}

.show_mobile_2 {
	display: block;
}

.show_desk_2 {
	display: none;
}

/* Links */

a {
	text-decoration: none;
	transition: all 250ms ease;
	cursor: pointer;
    outline: none;
}

a:focus, a:hover, a:active {
  	outline: none;
	transition: all 250ms ease;
}

/* Text and Headers */

.nohyph {
    -webkit-hyphens: none; 
    -ms-hyphens: none; 
    hyphens: none;
}

h1, .like_h1 {
	font-size: 2em; 
  	margin: 0.67em 0;
}

h2, .like_h2 {
	font-size: 1.7em; 
	margin: 0.83em 0;
}

h3, .like_h3 {
	font-size: 1.17em;
  	margin: 1em 0;
}

h4, .like_h4 {
	font-size: 1em;
  	margin: 1.33em 0;
}

h5, .like_h5 {
	font-size: .83em;
	margin: 1.67em 0;
}

h6, .like_h6 {
	font-size: .67em; 
	margin: 2.33em 0;
}

p {
	font-size: 1em;
}

.muted_text {
	font-size: 0.8em;
	opacity: 0.8;
}

li {
    list-style-type: none;
}

header {
	position: absolute;
	width: 100%;
	z-index: 24000;
}

.logo {
	width: 120px;
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translate(-50%);
	z-index: 25001;
}

.nav_desk {
	display: none;
}

/* Mobile Navigation */

input[type=checkbox] {
	display: none;
}

label {
	display: inline-block; 
	width: 35px; 
	color: #000; 
	cursor: pointer;
}

#menu {
	width: 100vw; 
	height: auto;
	visibility: hidden;
	color: var(--farbe_dunkelgrau); 
	background-color: rgba(255,255,255,1);
	transition: all 300ms ease; 
	position: absolute; 
	top: 0; 
	right: 0; 
	overflow: hidden; 
	z-index: 25010;
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	opacity: 0;
    text-align: center;
}

#menu ul a {
    display: block !important;
	text-transform: uppercase;
}

#menu ul {
	padding: 0;
	margin: 0;
}

#menu ul li {
	margin: 15px 0;
}

input[type=checkbox]:checked ~ #menu {
	visibility: visible; 
    padding: 20px 0 80px;
	transition: all 500ms ease-out; 
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}

label:before {
	position: absolute;
	content: "";
	height: 30px;
	width: 30px;
	left: 50%;
	top: 170px;
	background: url("img/navigation_icon_open.svg");
	background-repeat: no-repeat;
	z-index: 25001;
	display: block;
	padding: 20px;
	background-size: 50%;
	background-position: center;
	transform: translate(-50%);
	cursor: pointer;
}

input[type=checkbox]:checked ~ label:before {
	background: url("img/navigation_icon_close.svg");
	background-repeat: no-repeat; 
    background-size: 50%;
    background-position: center;
	z-index: 26000;
	display: block;
}

.navigation_mobile li, .navigation_mobile li button {
    margin-bottom: 35px;
}

.mobile_mail {
	width: 30px;
	position: absolute;
	top: 190px;
	left: calc(50% - 120px);
	z-index: 26000;
}

.mobile_phone {
	width: 30px;
	position: absolute;
	top: 190px;
	right: calc(50% - 120px);
	z-index: 26000;
}

/* Positioning */

.wrapper {
	width: calc(100% - 40px);
	max-width: 1180px;
	margin: 0 auto;
}

.section_padding_1, .section_padding_1_mobile, .section_padding_2_mobile {
	padding: 120px 0;
}

.section_padding_first {
	padding-top: 320px;
}

.height_100 {
	height: 100%;
}

.align_left {
    text-align: left;
}

.align_right {
    text-align: right;
}

.align_center {
    text-align: center;
}

.align_justify {
    text-align: justify;
}

.clearer {
    clear: both;
}

.pos_rel {
	position: relative;
}

/* Buttons */

button {
    border: 0px;
	padding: 14px 52px;
	margin: 10px 0;
	font-size: 0.9rem;
	font-family: var(--font_2);
	font-weight: 700;
	text-transform: uppercase;
	transition: all 250ms ease;
	cursor: pointer;
	background: transparent;
	color: var(--farbe_dunkelgrau);
	border: 1px solid var(--farbe_dunkelgrau);
	transitiion: all 100ms ease-out;
}

button:hover {
	background: var(--farbe_dunkelgrau);
	color: #fff;
	transitiion: all 300ms ease-out;
}

.btn_full_gelb {
	border: 1px solid var(--farbe_gelb);
	background: var(--farbe_gelb);
	color: #fff;
	transitiion: all 100ms ease-out;
}

.btn_full_gelb:hover {
	background: transparent;
	color: var(--farbe_gelb);
	transitiion: all 300ms ease-out;
}

/* Max-Width & Co. */

.dis_inl_blo {
	display: inline-block;
}

.marg_auto {
	margin-left: auto;
	margin-right: auto;
}

.max_width_275 {
	max-width: 275px;
}

.max_width_290 {
	max-width: 290px;
}

.max_width_305 {
	max-width: 305px;
}

.max_width_320 {
	max-width: 320px;
}

.max_width_335 {
	max-width: 335px;
}

.max_width_340 {
	max-width: 340px;
}

.max_width_345 {
	max-width: 345px;
}

.max_width_365 {
	max-width: 365px;
}

.max_width_385 {
	max-width: 385px;
}

.max_width_390 {
	max-width: 390px;
}

.max_width_410 {
	max-width: 410px;
}

.max_width_420 {
	max-width: 420px;
}

.max_width_440 {
	max-width: 440px;
}

.max_width_445 {
	max-width: 445px;
}

.max_width_460 {
	max-width: 460px;
}

.max_width_485 {
	max-width: 485px;
}

.max_width_520 {
	max-width: 520px;
}

.max_width_635 {
	max-width: 635px;
}

.marg_top_25 {
	margin-top: 25px;
}

.marg_top_50 {
	margin-top: 50px;
}

.marg_top_50_mobile {
	margin-top: 50px;
}

.marg_top_100_mobile {
	margin-top: 100px;
}

.marg_top_100_mobile_2 {
	margin-top: 100px;
}

.marg_bot_100 {
	margin-bottom: 100px;
}

.marg_bot_140 {
	margin-bottom: 140px;
}

.padding_top_240 {
	padding-top: 240px;
}

.no_pad_top {
	padding-top: 0 !important;
}

.no_pad_top_mobile {
	padding-top: 0;
}

/* Content */
	
.wallpaper_1 {
	width: 100%;
	height: 700px;
	background: url("img/wallpaper_1_mobile.jpg");
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.wallpaper_2 {
	width: 100%;
	height: 700px;
	background: url("img/wallpaper_2_mobile.jpg");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.wallpaper_3 {
	width: 100%;
	height: 700px;
	background: url("img/wallpaper_3_mobile.jpg");
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.wallpaper_4 {
	width: 100%;
	height: 700px;
	background: url("img/wallpaper_4_mobile.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.wallpaper_5 {
	width: 100%;
	height: 700px;
	background: url("img/wallpaper_5_mobile.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.start_text {
	position: absolute;
	top: 65%;
	left: 0;
	transform: translate(0, -50%);
}
	
.kontakt_text {
	position: absolute;
	bottom: 10%;
	left: 0;
	max-width: 300px;
}

footer {
	width: 100%;
	height: 524px;
	position: relative;
	overflow: hidden;
}

.wallpaper_footer {
	width: 2560px;
	height: 524px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	z-index: -1;
}

.padding_top_footer {
	padding-top: 200px;
}

.credit_af {
	background: var(--farbe_gelb);
	color: #fff;
	font-size: 0.8rem;
	padding: 20px 0 40px;
}

.credit_af a, .credit_af a:hover {
	color: #fff;
}

.max_vita ul {
	padding: 0;
}

.max_vita ul li {
	margin-bottom: 10px;
}

.team_left_2, .team_middle_2, .team_right_2 {
	margin-bottom: 50px;
}

.team_left_2 { 
	grid-area: team_left_2;
	height: 100%;
	position: relative;
}

.team_middle_2 { 
	grid-area: team_middle_2;
	height: 100%;
	position: relative;
}

.team_right_2 { 
	grid-area: team_right_2;
	height: 100%;
	position: relative;
}

.team_second_container h3 {
	margin-bottom: 5px;
}

.team_second_container p {
	margin-top: 0;
}

.sprechzeiten span {
	display: inline-block;
	width: 100px;
	margin-right: 10px;
}

details {
	margin-bottom: 10px;
}

details h3 {
	margin: 0;
    cursor: pointer !important;
	padding: 20px;
	max-width: calc(100% - 95px);
	animation: details-close-h 1s ease-out;
}

@keyframes details-close-h {
	0% {
		color: var(--farbe_gelb);
	}
	
	100% {
		color: var(--farbe_dunkelgrau);
	}
}

details[open] h3 {
	color: var(--farbe_gelb);
	animation: details-open-h 1s ease-out;
}

@keyframes details-open-h {
	0% {
		color: var(--farbe_dunkelgrau);
	}
	
	100% {
		color: var(--farbe_gelb);
	}
}

.details_content {
	padding: 0px 20px 20px 20px;
	text-align: justify;
	word-spacing: normal;
}

details[open] .details_content {
	animation: details-content 500ms ease-out;
}

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

summary {
    cursor: pointer !important;
}

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

.arc_icon {
	width: 20px;
	height: 20px;
	background: url("img/icon_arc.svg");
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translate(0, -50%) rotate(0deg);
	transition: all 300ms ease-out;
	animation: details-close 1s ease-out;
}

@keyframes details-close {
	0% {
		transform: translate(0, -50%) rotate(180deg);
		opacity: 1;
	}
	30% {
		transform: translate(0, -30%) rotate(180deg);
		opacity: 0;
	}
	31% {
		transform: translate(0, -30%) rotate(0deg);
		opacity: 0;
	}
	31% {
		transform: translate(0, -70%) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: translate(0, -50%) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translate(0, -50%) rotate(0deg);
		opacity: 1;
	}
}

details[open] .arc_icon {
	transform: translate(0, -50%) rotate(180deg);
	transition: all 300ms ease-out;
	animation: details-open 1s ease-out;
}

@keyframes details-open {
	0% {
		transform: translate(0, -50%) rotate(0deg);
		opacity: 1;
	}
	30% {
		transform: translate(0, -70%) rotate(0deg);
		opacity: 0;
	}
	31% {
		transform: translate(0, -70%) rotate(180deg);
		opacity: 0;
	}
	31% {
		transform: translate(0, -30%) rotate(180deg);
		opacity: 0;
	}
	50% {
		transform: translate(0, -50%) rotate(180deg);
		opacity: 1;
	}
	100% {
		transform: translate(0, -50%) rotate(180deg);
		opacity: 1;
	}
}

.imp_dat_wrapper h2 {
	margin-top: 50px;
}

.imp_dat_wrapper ul {
	padding-left: 15px;
}

.imp_dat_wrapper ul li {
	list-style-type: square;
	margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {

	/* Colors */

	/* Basics */

	/* Links */

	/* Text and Headers */

	/* Positioning */

	/* Buttons */

	/* Navigation */

	/* Content */

}

@media (min-width: 365px) {
	
}

@media (min-width: 768px) {

	/* Basics */

	.show_mobile {
		display: none;
	}

	.show_tablet {
		display: block;
	}

	.show_desk {
		display: none;
	}

	.marg_top_100_mobile_2 {
		margin-top: revert;
	}
	
	.bg_gelb_mobile_2 {
		background: transparent;
	}

	.section_padding_2_mobile {
		padding: 0;
	}
	
	/* Links */

	/* Text and Headers */
	
	.nav_mobile {
		display: none;
	}
	
	.nav_desk {
		display: block;
		width: 100%;
		position: absolute;
		top: 117px;
		left: 50%;
		transform: translate(-50%);
		font-size: 0.9rem;
	}
	
	.nav_desk ul {
		width: 680px;
		padding: 0;
		margin: 0;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	}
	
	.nav_desk li {
		display: inline-block;
		text-transform: uppercase;
		margin: 0 25px;
	}
	
	.nav_desk li a {
		position: relative;
	}
	
	.nav_desk li a::before {
		content: ' ';
		width: 0%;
		height: 1px;
		position: absolute;
		top: 25px;
		left: 0;
		background: var(--farbe_gelb);
		transition: all 300ms ease-out 50ms;
	}
	
	.nav_desk li a:hover::before {
		content: ' ';
		width: 100%;
		height: 1px;
		position: absolute;
		top: 25px;
		left: 0;
		background: var(--farbe_gelb);
		transition: all 300ms ease-out 150ms;
	}

	.nav_desk li:nth-child(2) {
		margin-right: 120px;
	}

	.nav_desk li:nth-child(3) {
		margin-left: 120px;
	}
	
	/* Positioning */
	
	.wrapper {
		width: calc(100% - 60px);
		max-width: 1180px;
		margin: 0 auto;
	}
	
	header {
		position: absolute;
		width: 100%;
	}

	.logo {
		width: 120px;
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translate(-50%);
	}
	
	/* Buttons */

	/* Navigation */

	/* Content */
	
	.wallpaper_1 {
		height: 900px;
		background: url("img/wallpaper_1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.wallpaper_2 {
		height: 900px;
		background: url("img/wallpaper_2.jpg");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.wallpaper_3 {
		height: 900px;
		background: url("img/wallpaper_3.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.wallpaper_4 {
		height: 900px;
		background: url("img/wallpaper_4.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.wallpaper_5 {
		height: 900px;
		background: url("img/wallpaper_5.jpg");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.start_text {
		position: absolute;
		top: 55%;
		left: 0;
		transform: translate(0, -50%);
	}
	
	.kontakt_text {
		position: absolute;
		top: 55%;
		bottom: revert;
		max-width: revert;
		left: 0;
		transform: translate(0, -50%);
	}

	.credit_af {
		padding: 20px 0;
	}
	
	.bg_team_1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 2560px;
		height: auto;
	}
 
	.section_team_1 {
		width: 100%;
		height: 874px;
		overflow: hidden;
		position: relative;
	}
	
	.team_2_text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(0, -50%);
		max-width: calc(480px - 90px);
		padding: 0 60px 0 30px;
		z-index: 1;
	}
	
	.team_fist_container {  
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0px 0px;
		grid-auto-flow: row;
		grid-template-areas:
		"team_left team_right";
	}

	.team_left { 
		grid-area: team_left;
		height: 100%;
		position: relative;
	}

	.team_right { 
		grid-area: team_right;
		height: 100%;
		position: relative;
	}
	
	.team_right_inner {
		padding-right: 50px;
		max-width: 480px;
	}
	
	.team_left_inner, .team_right_inner {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	}
	
	.team_second_container {  
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0px 40px;
		grid-auto-flow: row;
		grid-template-areas:
		"team_left_2 team_middle_2 team_right_2";
	}

	.team_left_2 { 
		grid-area: team_left_2;
		height: 100%;
		position: relative;
	}

	.team_middle_2 { 
		grid-area: team_middle_2;
		height: 100%;
		position: relative;
	}

	.team_right_2 { 
		grid-area: team_right_2;
		height: 100%;
		position: relative;
	}
	
	.team_before {
		margin-bottom: -170px;
	}
	
	.team_after {
		margin-top: -260px;
	}
	
	.marg_team_body {
		margin: 120px 0 170px;
	}
	
	.bg_dunkelgrau_team {
		background: var(--farbe_dunkelgrau);
		color: #fff;
	}
	
	.farbe_hellgrau_team_desk {
		color: var(--farbe_hellgrau);
	}
	
	.kontakt_second_container {  
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0px 40px;
		grid-auto-flow: row;
		grid-template-areas:
		"kontakt_left_2 kontakt_right_2";
	}

	.kontakt_left_2 { 
		grid-area: kontakt_left_2;
		height: 100%;
		position: relative;
	}

	.kontakt_middle_2 { 
		grid-area: kontakt_middle_2;
		height: 100%;
		position: relative;
	}

	.kontakt_right_2 { 
		grid-area: kontakt_right_2;
		height: 100%;
		position: relative;
	}

	details h3 {
		padding: 40px 40px 40px 40px;
	}

	.details_content {
		padding: 0px 40px 40px 40px;
		margin-top: -20px;
	}

	.arc_icon {
		width: 30px;
		height: 30px;
		background: url("img/icon_arc.svg");
		position: absolute;
		top: 50%;
		right: 50px;
	}
    
}

@media (min-width: 850px) {

	/* Text and Headers */
	
	.nav_desk ul {
		width: 745px;
	}

	.nav_desk li:nth-child(2) {
		margin-right: 150px;
	}

	.nav_desk li:nth-child(3) {
		margin-left: 150px;
	}
	
	.footer_kontakt {
		display: inline-block;
	}
	
	.footer_kontakt_right {
		margin-left: 50px;
		display: inline-block;
	}

	.padding_top_footer {
		padding-top: 230px;
	}
	
}

@media (min-width: 1180px) {

	/* Basics */

	.show_mobile {
		display: none;
	}

	.show_tablet {
		display: none;
	}

	.show_desk {
		display: block;
	}

	.show_mobile_2 {
		display: none;
	}

	.show_desk_2 {
		display: block;
	}
	
	/* Colors */
	
	.bg_hellgrau_mobile, .bg_dunkelgrau_mobile, .bg_gelb_mobile {
		background: transparent;
	}

	/* Links */

	/* Text and Headers */

	/* Positioning */
	
	.section_padding_1 {
		padding: 180px 0;
	}
	
	.section_padding_1_mobile {
		padding: 0;
	}

	.section_padding_first {
		padding-top: 350px;
	}

	.marg_top_100_mobile {
		margin-top: revert;
	}

	.marg_top_50_mobile {
		margin-top: revert;
	}
	
	.marg_auto_desk {
		margin-left: auto;
		margin-right: auto;
	}
	
	.align_left_desk {
		text-align: left;
	}

	.align_right_desk {
	    text-align: right;
	}

	.align_center_desk {
	    text-align: center;
	}

	.align_justify_desk {
	    text-align: justify;
	}

	/* Buttons */

	/* Navigation */

	/* Content */
 
	.section_start_2 {
		width: 100%;
		height: 1000px;
		overflow: hidden;
		position: relative;
	}
	
	.bg_section_2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 2560px;
		height: auto;
	}
	
	.start_2_text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(0, -50%);
		max-width: calc(50% - 40px);
		padding: 0 60px;
		z-index: 1;
	}
	
	.start_3_text {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
		max-width: calc(50% - 40px);
		padding: 0 80px 0 0;
		z-index: 1;
	}
	
	.team_2_text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(0, -50%);
		max-width: calc(480px - 90px);
		padding: 0 60px 0 30px;
		z-index: 1;
	}
	
	.team_second_container {  
		gap: 0px 80px;
	}
	
	.team_before {
		margin-bottom: -350px;
	}
	
	.team_after {
		margin-top: -350px;
	}
	
	.marg_team_body {
		margin: 120px 0 170px;
	}
	
}