@charset "UTF-8";

:root {
    --farbe_dunkelgrau: #485051;
    --farbe_hellgrau: #f3f4ef;
    --font_1: 'Cairo-Regular', Helvetica, Arial, sans-serif;
    --font_2: 'Cairo-Bold', Helvetica, Arial, sans-serif;
}

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

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

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

.bold {
	text-transform: uppercase;
	font-family: var(--font_2);
	font-weight: 700;
}

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

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

button, .btn {
	font-family: var(--font_2);
	font-weight: 400;
	font-size: 1em;
}

.lowercase {
	text-transform: lowercase;
}

.uppercase {
	text-transform: uppercase;
}

/* Colors */

body {
	background: var(--farbe_hellgrau);
	color: var(--farbe_dunkelgrau);
}

button, .btn {
	background: #ddc699;
	color: var(--farbe_dunkelgrau) !important;
	margin: 10px 0 15px;
	display: inline-block;
}

button:hover, .btn:hover, button:active, .btn:active {
	background: var(--farbe_hellgrau);
	color: var(--farbe_dunkelgrau);
}

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

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

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

.bg_dunkelgrau a, .bg_dunkelgrau a:hover, .bg_dunkelgrau a:active {
	color: #fff;
}

.bg_holz {
	background: #ddc698;
	color: var(--farbe_dunkelgrau);
}

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

/* Basics */

html {
	scroll-behavior: smooth;
}

body {
	height: 100%;
	margin: 0 auto;
	-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;
}

.max_width_320 {
	max-width: 320px;
}

.max_width_500 {
	max-width: 500px;
}

.max_width_550 {
	max-width: 550px;
}

.max_width_670 {
	max-width: 670px;
}

.max_width_710 {
	max-width: 710px;
}

.marg_top_75 {
	margin-top: 75px;
}

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

.section_padding_1 {
	padding: 100px 0;
}

/* 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, h2, .like_h2 {
	font-size: 2.4rem; 
  	margin: 0.67em 0;
  	line-height: 2.9rem;
	text-transform: uppercase;
	font-family: var(--font_2);
	font-weight: 700;
}

h3, .like_h3 {
	font-size: 1.6rem;
	line-height: 2rem;
  	margin: 1em 0;
	text-transform: uppercase;
	font-family: var(--font_2);
	font-weight: 700;
}

h4, .like_h4 {
	font-size: 1em;
  	margin: 1.33em 0;
	text-transform: uppercase;
	font-family: var(--font_2);
	font-weight: 700;
}

h5, .like_h5 {
	font-size: .83em;
	margin: 1.67em 0;
	text-transform: uppercase;
	font-family: var(--font_2);
	font-weight: 700;
}

h6, .like_h6 {
	font-size: .67em; 
	margin: 2.33em 0;
	text-transform: uppercase;
	font-family: var(--font_2);
	font-weight: 700;
}

p {
	font-size: 1rem;
	line-height: 1.5rem;
}

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

li {
    list-style-type: none;
}

/* Positioning */

.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, .btn {
    border: 0px;
	padding: 7px 22px;
	margin: 10px 0;
	transition: all 250ms ease;
	cursor: pointer;
	border-radius: 5px;
}

button:hover, .btn:hover {
	transition: all 250ms ease;
}

/* Navigation */

/* Content */

header {
	width: 100%;
	height: 120px;
	position: relative;
}

header img {
	position: absolute;
	width: 140px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.start_1 {
	width: 100%;
	height: 500px;
	background: url("img/start_1_mobile.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center left;
	position: relative;
}

.start_1_text {
	left: 30px;
	top: 50%;
	transform: translate(0, -50%);
	position: absolute;
	color: #fff;
}

.balken_details {
	color: #fff;
}

.balken_details p {
	margin: 0;
	padding: 40px 30px 40px 0;
	background: var(--farbe_dunkelgrau);
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	z-index: 5;
	position: relative;
}

.balken_bg {
	position: absolute;
	width: calc((100% - 1080px) / 2 + 15px);
	height: 100%;
	background: var(--farbe_dunkelgrau);
	z-index: -1;
}

.balken_bg_hell{
	position: absolute;
	width: calc((100% - 1080px) / 2 + 15px);
	height: 100%;
	background: var(--farbe_hellgrau);
}

.bg_hell {
	background: var(--farbe_hellgrau) !important;
	color: var(--farbe_dunkelgrau) !important;
}

.portrait_mobile {
	display: block;
	margin-bottom: 80px;
	overflow: hidden;
}

.marg_balken_details {
	margin-top: 80px;
}

.umbruch {
	display: block;
}

.umbruch_details_2 {
	display: none;
}

.umbruch_details_1 {
	display: none;
}

footer p {
	font-size: 0.8rem;
	line-height: 1.1rem;
	opacity: 0.8;
	padding: 15px 0;
}

.bildmarke_footer {
	width: 40px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0, -50%);
}

.mutet_pic_text:first-child {
	margin-bottom: 50px;
	font-size: 1rem;
	padding: 10px 22px;
	border: 1px solid var(--farbe_dunkelblau);
	display: inline-block;
}

.mutet_pic_text:last-child {
	margin-top: 50px;
	font-size: 1rem;
	padding: 10px 22px;
	border: 1px solid var(--farbe_dunkelblau);
	display: inline-block;
}

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

	/* Colors */

	/* Basics */

	/* Links */

	/* Text and Headers */

	/* Positioning */

	/* Buttons */

	/* Navigation */

	/* Content */

}

@media (min-width: 768px) {

	/* Basics */

	.show_mobile {
		display: none;
	}

	.show_tablet {
		display: block;
	}

	.show_desk {
		display: none;
	}

	/* Links */

	/* Text and Headers */

	/* Positioning */

	/* Buttons */

	/* Navigation */

	/* Content */

	.umbruch {
		display: none;
	}

}

@media (min-width: 800px) {

	.img_mathias {
		width: calc((100% - 1080px) / 2 + 550px);
		height: 750px;
		position: absolute;
		right: 0;
		top: 100px;
		z-index: -1;
		background: urL("img/mathias_zahnarzt_1.jpg");
		background-size: cover;
		background-position: center left;
		background-repeat: no-repeat;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		overflow: hidden;
	}

	.portrait_mobile {
		display: none;
	}

	.vita {
		max-width: 320px;
	}

	.liste_vita {
		max-width: 300px;
	}

}

@media (min-width: 1080px) {

	/* Basics */

	.section_padding_1 {
		padding: 180px 0;
	}

	.show_mobile {
		display: none;
	}

	.show_tablet {
		display: none;
	}

	.show_desk {
		display: block;
	}

	.show_mobile_2 {
		display: none;
	}

	.show_desk_2 {
		display: block;
	}

	/* Links */

	/* Text and Headers */

	/* Positioning */

	.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 */

	.start_1 {
		width: 100%;
		height: 650px;
		background: url("img/start_1.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
		position: relative;
	}

	.start_1_text {
		max-width: 350px;
		left: calc(50% - 70px);
		top: 50%;
		transform: translate(0, -50%);
		position: absolute;
		color: #fff;
	}

	.img_mathias {
		top: 180px;
	}

	.marg_balken_details {
		margin-top: 120px;
	}

	.vita {
		max-width: 380px;
	}

}

@media (max-width: 1109px) {


	.balken_details {
		color: #fff;
	}

	.balken_details p {
		margin: 0;
		padding: 0;
		padding: 40px 30px 40px 30px;
		margin-left: -30px;
		background: var(--farbe_dunkelgrau);
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.balken_bg {
		position: absolute;
		width: calc((100% - 1080px) / 2 + 15px);
		height: 100%;
		background: var(--farbe_dunkelgrau);
		z-index: -1;
	}

	.balken_bg_hell {
		position: absolute;
		width: calc((100% - 1080px) / 2 + 15px);
		height: 100%;
		background: var(--farbe_hell);
	}

}

@media (max-width: 380px) {

	.balken_details p {
		font-size: 1.3rem;
		line-height: 1.5rem;
	}

}

@media (max-width: 560px) {

	.punkte_details_2 {
		display: none;
	}

	.umbruch_details_2 {
		display: inline;
	}

}

@media (max-width: 800px) {

	.punkte_details_1 {
		display: none;
	}

	.umbruch_details_1 {
		display: inline;
	}

}