@charset "UTF-8";

:root {
    --farbe_dunkelblau: #181f38;
    --farbe_gold: #c6a751;
    --font_1: 'Strawford-Regular', Helvetica, Arial, sans-serif;
    --font_2: 'Strawford-Medium', Helvetica, Arial, sans-serif;
}

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

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

@font-face {
  src: url("fonts/strawford-medium.woff2") format("woff2");
  font-family: "Strawford-Medium";
    font-weight: 500;
}

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: 500;
	color: var(--farbe_gold);
}

button {
	font-family: var(--font_2);
	font-weight: 500;
	font-size: 1em;
}

.lowercase {
	text-transform: lowercase;
}

.uppercase {
	text-transform: uppercase;
}

/* Colors */

body {
	background: #fff;
	color: var(--farbe_dunkelblau);
}

button {
	background: var(--farbe_gold);
	color: #fff;
	border: 1px solid var(--farbe_gold);
}

button:hover {
	background: transparent;
	color: var(--farbe_gold);
	border: 1px solid var(--farbe_gold);
}

.btn_ghost_white {
	border: 1px solid #fff;
	color: #fff;
	background: transparent;
}

.btn_ghost_white:hover, .btn_ghost_white:active {
	border: 1px solid #fff;
	color: var(--farbe_dunkelblau);
	background: #fff;
}

.btn_white_gold {
	color: var(--farbe_gold);
	background: #fff;
	border: 1px solid #fff;
}

.btn_white_gold:hover, .btn_white_gold:active {
	border: 1px solid #fff;
	color: #fff;
	background: transparent;
}

.btn_gold {
	color: #fff;
	background: var(--farbe_gold);
	border: 1px solid var(--farbe_gold);
}

.btn_gold:hover, .btn_gold:active {
	color: var(--farbe_gold);
	background: transparent;
	border: 1px solid var(--farbe_gold);
}

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

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

.bg_dunkelblau {
	background: var(--farbe_dunkelblau);
	color: #fff;
}

.bg_dunkelblau h1, .bg_dunkelblau h2, .bg_dunkelblau h3, .bg_dunkelblau h4, .bg_dunkelblau h5, .bg_dunkelblau h6 {
	color: #fff;
}

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

.bg_gold {
	background: var(--farbe_gold);
	color: #fff;
}

.bg_gold h1, .bg_gold h2, .bg_gold h3, .bg_gold h4, .bg_gold h5, .bg_gold h6 {
	color: #fff;
}

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

/* 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_desk {
	display: none;
}

.show_mobile_2 {
	display: block;
}

.show_desk_2 {
	display: none;
}

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

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

.section_padding_1 {
	padding: 140px 0;
}

.section_padding_2 {
	padding: 140px 0 140px 0;
}

.section_padding_3 {
	padding: 80px 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 {
	font-size: 2.2em; 
  	margin: 0.67em 0;
}

h2, .like_h2 {
	font-size: 2em; 
  	margin: 0.67em 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: 1.2em;
    line-height: 1.7rem;
}

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

.max_width_315 {
	max-width: 315px;
}

.max_width_370 {
	max-width: 370px;
}

.max_width_590 {
	max-width: 590px;
}

.max_width_770 {
	max-width: 770px;
}

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

.marg_bot_30 {
	margin-bottom: 30px;
}

.marg_bot_70 {
	margin-bottom: 70px;
}

/* Buttons */

button {
    border: 0px;
	padding: 10px 28px;
	margin: 10px 0;
	border-radius: 30px;
	transition: all 250ms ease;
	cursor: pointer;
	font-size: 1rem;
}

button:hover {
	transition: all 250ms ease;
}

/* Navigation */

/* Content */

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

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

.h1_start {
	position: absolute;
	left: 50%;
	bottom: 40px;
	color: #fff;
	transform: translate(-50%);
	width: calc(100% - 40px);
}

.mobile_wrap {
	display: block;
}

.bildmarke {
	width: 50px;
	display: block;
	margin-top: 15px;
}

.bildmarke_kontakt {
	width: 50px;
	display: block;
	margin-top: 80px;
	margin-bottom: 50px;
}

.details_start {
	padding: 30px 0;
}

.no_marg {
	margin: 0 !important;
}

.no_marg_bot {
	margin-bottom: 0 !important;
}

.sprechzeiten_details span {
	display: inline-block;
	width: 100px;
}

/* Accordion */

.container_faq {
	margin-top: 80px;
}

details[open] summary h3 {
	padding: 50px 50px 30px 30px;
	color: var(--farbe_gold);
	animation: detailsopenh3 500ms ease-out;
}

@keyframes detailsopenh3 {
	0% {
		color: #fff;
	}

	100% {
		color: var(--farbe_gold);
	}
}

details {
	position: relative;
	border-radius: 90px;
	margin: 10px 0;
}

details[open] {
	border-radius: 35px;
}

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

summary {
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 700;
}

summary h3 {
	margin: 0 !important;
	padding: 20px 30px;
}

details > summary {
  list-style: none;
}

details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

.details_inner {
	margin: 0;
	padding: 0 30px 30px;
}

.open_closer_bm {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 10px;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 20;
}

.open_closer_bm::before {
	content: ' ';
	width: 15px;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	animation: open-closer-1-close  500ms;
}

@keyframes open-closer-1-close {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(-180deg);
	}
}

.open_closer_bm::after {
	content: ' ';
	width: 15px;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
	animation: open-closer-2-close  500ms;
}

@keyframes open-closer-2-close {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(90deg);
	}
}

details[open] .open_closer_bm::before {
	transform: translate(-50%, -50%) rotate(0deg);
	animation: open-closer-1  500ms;
}

@keyframes open-closer-1 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

details[open] .open_closer_bm::after {
	transform: translate(-50%, -50%) rotate(0deg);
	animation: open-closer-2  500ms;
}

@keyframes open-closer-2 {
	0% {
		transform: translate(-50%, -50%) rotate(90deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
}

.open_closer_bm::before, .open_closer_bm::after {
	background: var(--farbe_gold);
}

footer {
	padding: 10px 0;
	font-size: 0.7rem;
	opacity: 0.7;
}

footer p {
	line-height: 1.3rem;
}

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

.mutet_pic_text:last-child {
	margin-top: 50px;
	font-size: 1rem;
	padding: 10px 22px;
	border: 1px solid #fff;
	display: inline-block;
	border-radius: 30px;
}

@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_desk {
		display: block;
	}

	.section_padding_1 {
		padding: 180px 0;
	}

	.section_padding_2 {
		padding: 180px 0 180px 0;
	}

	/* Links */

	/* Text and Headers */

	/* Positioning */

	/* Buttons */

	/* Navigation */

	/* Content */

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

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

	.mobile_wrap {
		display: inline-block;
	}

	.col_2 {
		column-count: 2;
		column-gap: 60px;
		text-align: justify;
	}

	.col_2 p { 
		  margin-top: 0;
		  margin-bottom: 1.3em;
		  display: inline-block;
	}

	.container_aerzte {  
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0px 60px;
		text-align: justify;
		grid-auto-flow: row;
		grid-template-areas:
		"zweier_links zweier_rechts";
	}

	.zweier_links { grid-area: zweier_links; }

	.zweier_rechts { grid-area: zweier_rechts; }

	summary h3 {
		padding: 20px 50px;
	}

	.details_inner {
		margin: 0;
		padding: 0 50px 30px;
	}

	details[open] summary h3 {
		padding: 50px 50px 30px;
	}
    
}

@media (min-width: 1024px) {

	/* Basics */

	.show_mobile {
		display: none;
	}

	.show_desk {
		display: block;
	}

	.show_mobile_2 {
		display: none;
	}

	.show_desk_2 {
		display: block;
	}

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

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

	.box_float {
		float: left;
	}

	.details_box_1, .bildmarke {
		margin-right: 65px;
	}
 
}

@media (max-width: 767px) {

	.zweier_rechts {
		margin-top: 80px;
	}
}

@media (max-width: 1023px) {

	.bildmarke {
		margin-top: 30px;
		margin-bottom: 40px;
	}

	.details_start button {
		margin-top: 20px !important;
	}
}