:root {
  /* CSS-variable(s) with global scope  (utf8 Test: öüä) */
  --body-bg-color: #eee;
  --footer-bg-color: #babfa7;
  --link-color: #0089ff;
}

*, *::after, *::before {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: inherit;
}
html {
	font-size: 62.5%;  /* bewirkt ein einfaches Umrechnen von Pixel zu rem!, s. font-size im BODY */
	-webkit-text-size-adjust: none;
}
body {
	position: relative;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 1.6rem;   /* 1.6rem = 16px,  oder zB: 1rem = 10px;  0.5rem = 5px, etc */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.05rem;
	color: #222;
	background-color: var(--body-bg-color);
	box-sizing: border-box;
}

h1 {
    margin: 2rem 0 4rem 0;
    padding: 0;
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
    line-height: 3rem;
    color: #111;
    text-transform: uppercase;
}

h2 {
	margin: 2rem 0 1rem 0;
	padding: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5em; 
}


h2.like-h1 {
    margin: 3rem 0 4rem 0;
    padding: 3rem 0 0 0;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.02rem;
    line-height: 2rem;
    color: #111;
    text-transform: uppercase;
}
h2.like-h1:first-of-type {
	padding-top:0;
}

h3 {
	margin: .6rem 0 0 0;
	padding: 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5em; 
}
.kontakt h3 + p {
	margin-bottom: 0;
}
.kontakt h2 {
	margin: 4rem 0 1.6rem 0;
	font-size: 2.6rem;
	font-weight: 500;
}

h4 {
	margin: .6rem 0 0 0;
	padding: 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5em; 
}
.kontakt h3 + p {
	margin: 0 0 1.6rem 0;
}

h2.no-bottom-margin {
	margin: .6rem 0 0 0;
}

ul {
	list-style: none;
}

p {
	font-weight: 300;
	font-size: 1em;
	line-height: 1.5em; 
	margin: 0.6rem 0 1.2rem 0;
	padding: 0;
}
h2.no-bottom-margin + p {
	margin-top: 0;
}

img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

hr {
    border: 0;
    height: 4px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.methode hr {margin-bottom: 6rem;}

address { font-style: normal; }

blockquote {
    position:relative;
	padding: 1.6rem 4rem 1.6rem 6rem;
	font: 2.4rem/1.1 "Times New Roman", serif;
	color: #666;
}
blockquote::before {
	position: absolute;
	top: 0;
	left: -.35rem;	
	content: "“";
	font-family: Georgia, serif;
	font-size: 12rem;
	color: #999;	
	z-index: -1;
}
blockquote span {
	display: block;
	padding-top: .5rem;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 1.6rem; 
	font-weight: 300;	
}

a, a:link, a:visited {
	color: var(--link-color);
	text-decoration:none;
}
a:hover, a:active {
	text-decoration:underline;
}
a:focus {outline: none;}


/* H E A D E R - - - - - - - - - - - - */

.site-header { 
	position: relative; 
	width: 100%;
	background-color: var(--body-bg-color); /* #fff; */
}
.site-header-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	background-color: transparent;
}

.site-header-wrap .logo.flx {
	flex: 0;	
}
.site-header-wrap .logo-txt.flx {
	flex: 1 0 22rem;	
}
.site-header-wrap .logo-txt.flx a,
.site-header-wrap .logo-txt.flx a:hover {
	color: #000;
	text-decoration: none;
}

.site-header-wrap .nav.flx {
	flex: 1 1 auto;	
}

.site-header-wrap .logo {
	padding: 0 2rem;
}
.site-header-wrap .logo img {
	display: block;
}
.site-header-wrap span{
	display: inline-block;
	font-weight: 600;
	line-height: 1.2;
	padding: 1.5rem 0;
}

.sandwichwrap {
	position: relative;
	z-index: 7000;
}
.sandwich {
	position: relative;
	margin-right: 2rem;
	text-align: right;
	width: 5rem;
	height: 4.4rem;
	cursor: pointer;
	line-height: 1;
	z-index: 8000;
}
.sandwich span {
	position: absolute;
	display: block;
	width: 100%;
	height: 4px;
	left: 0;
	top: 4px;
	padding:0;
	background: var(--link-color);
	border-radius: 0;
	line-height: 1;
	opacity: 1;
	z-index: 7000;
}
.sandwich span:nth-child(2) {
	top: 14px;
}
.sandwich span:nth-child(3) {
	top: 24px;
}

/* #mainnav Regeln, s.u. in Media-Query ab 700px */
#mainnav  { display: none; }

/* MOBIL NAVI (im overlay) --------------------- */
#nav_overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 0;
	color: #fff;
	background-color: var(--link-color);
	z-Index: 8000;
	overflow: hidden;
}
#nav_overlay.opened {
	height: 100%;
}
#nav_close_btn {
	position: absolute;
	top: 0;
	right: 2rem;
	font-size: 5rem;
	font-weight: 300;
	color: #fff;
	cursor: pointer;
	z-Index: 8100;
}
.navi.overlay {
    display: block;
    margin: 2rem 1rem 2rem 2rem;
    line-height: 1.6;
}
.navi.overlay .txt-logo {
	position: relative;
	margin-top: 8rem;
	margin-bottom: 5rem;
	padding: 0;
	color: #181818;
	font-size: 3.5rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: .3px;
}
.navi.overlay .txt-logo span {
	display: inline-block;
	font-size: 2.4rem;
}
.navi.overlay ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.navi.overlay ul li { 
	margin-bottom: .6rem;
}
.navi.overlay ul li a, 
.navi.overlay ul li a:visited {
	font-size: 2.4rem;
	color: #fff;
	text-decoration: none;
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: .7px;
}
.navi.overlay ul li a:active, 
.navi.overlay ul li a:hover, 
.navi.overlay ul li a:focus, 
.navi.overlay ul li.current a {
	color: #181818;
	font-weight: 400;
}


/* H E A D I M A G E - - - - - - - */

#headimg {
	clear: both;
	margin: 0;
	padding: 0;	
	background-color: #fff;
}
#headimg img {
   display: block;
   width: 100%;
   max-width: 100%;
   height: auto;
   border: 0 none;
}
.bx-wrapper {
    margin-bottom: 0;
    box-shadow: none;
    border: 0 none;
    background: #eee;
}
ul.slider, 
ul.slider li {
	list-style:none; 
	margin:0;
	padding:0; 
	line-height:1; 
}

/* C O N T E N T - - - - - - - - - */
		
#content {
	/* vgl Angaben bei #footer .f-inner ! */
	width: 90%;  /* instead of 78% */

	margin: 0 auto;
	padding: 2rem 0 6rem 0;
	background-color: transparent; 
}


#content ul.dashed {
	width:100%;
	margin-left: 1rem;
	margin-bottom: 2rem;
	padding-left: 1rem;
}
#content ul.dashed li {
	margin-bottom: .4rem;
}
#content ul.dashed > li:before {
	display: inline-block;
	content: "\2013"; /* \2013 = ndash oder mdash = \2014 */
	width: 1.05em;
	margin-left: -1.7rem;
}

/* `.items` aktuell in index.html benutzt */
.items { position:relative; max-width:100%; padding: 1.6rem 0}
.items .row   { margin: 0 0 4rem 0; }
.items .media { float: none; margin: 0 0 1rem 0; }
.items .txt   { float: none; margin: 0 0 1rem 0; }
.items .txt-inner { padding: 0; }
.items h2 { margin: -0.5rem 0 .5rem 0; text-transform: uppercase; }
.items p  { margin: 0 0 1.6rem 0; }	

/* Methoden */
.pic-texts { position:relative; max-width: 100%; padding: 3rem 0; }
.pic-texts .row   { margin: 1.6rem 0 4rem 0; }
.pic-texts h2     { text-transform: uppercase; margin-top:0; }
.pic-texts .media { float: none; margin: 0 0 1rem 0; padding-top: .5rem; }

.infos .buch { padding-bottom: 6rem; }
.infos .buch > p { margin: 0; }

#content .videos { 
	position: relative; 
	padding: 2rem 0 0 0; 
	width:100%;
	max-width:100%; 
}
#content .video-wrap {
	display: block;
	float: none;
	margin: 0 0 4rem 0;
}
#content .video-wrap a {
	display: inline-block;
}
#content .video-wrap a img {
	cursor: pointer;
}

#content .gmap-wrap {
	position:relative;
	max-width:100%;
	margin: 0;
	padding-bottom: 3rem;
}
#content .gmap-wrap iframe {
	max-width:100% !important;
}

/* PATIENTENFEEDBACKS -------- */

.feedbacks {
	position: relative;
	background: #f1f1f1;
	max-width: 75rem;
	margin: 5em auto 2rem auto;
	padding-bottom: 4rem;
	text-align:center;
}
.textsliders p {
	margin: 0;
	font: 2.4rem/1.1 "Times New Roman", serif;
	font-style: italic;
	color: #999;
}
.textsliders p span {
	display: block;
	padding-top: .5rem;
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 300;
}
/* Pager-dots unter dem Textslider */
.bx-wrapper .bx-pager.bx-default-pager a { background: #999; }
/*
.bx-wrapper .bx-pager.bx-default-pager a.active, 
.bx-wrapper .bx-pager.bx-default-pager a:focus, 
.bx-wrapper .bx-pager.bx-default-pager a:hover { background: #000;}
*/

/* INTERESZED-Variante -------- */
#content .interested {
    position: relative;
    max-width: 78rem;
	margin: 5rem 0 1.5rem 0;
	padding: .75rem 1rem .5rem 9rem;
	font-weight: 500;
    background: transparent;
	color: #000;
    border-radius: 8px;    
}
#content .interested::before {
	position: absolute;
    left: 0;
    top: 0;
	width: 8rem;
    height: 100%;
	content: "";
	padding: 0 1rem 0 0;
	background: url('../pics/pfeil-interessieren-180x180.png') no-repeat;  
	background-position: left center;
	background-size: 75%;
    background-color: transparent;	
} 
#content .interested h2  { text-transform: uppercase; letter-spacing: 1px;}
#content .interested p { font-weight:500; }


/* F O O T E R - - - - - - - - - */

#footer { 
	position: relative;
	width: 100%;
	background-color: var(--footer-bg-color);
}
#footer .f-inner {
	/* vgl Angaben bei #content ! */
	width: 90%;
	margin: 0 auto;
	padding: 2rem 0;
	background-color: transparent;
}

#goto_top {
	position: absolute;
	top: -2rem;
	right: 1rem;
	left: 1rem;
	width: 12rem;
	margin: 0 auto;
	text-align: right;
}
#goto_top a:hover,
#goto_top a:active { text-decoration: none; color: #222; }

/* `three-cols.cols` aktuell im Footer */
.cols { position:relative; max-width:100%; }
.cols.three-cols .col { width: 100%; margin: 0 0 3rem 0;}
.cols .col .col-inner { padding: 0;}
.cols .col h2 { margin: 0 0 .6rem 0; padding: 0; font-size: 1.6rem; line-height: 1.5em;  }




/* other classes ------------------- */

/* stop floating */
.cfix:after {
	display:table;
	content: "";
	clear:both;
	float: none;
}

/* Elemente visuell verstecken, aber lesbar von Google & co */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
}

.nowrap { white-space: nowrap; }

/* Klassen des TinyMCE-Editors */
.align_center { text-align: center; }
.align_full { text-align: justify; }

.align_left  { float:left; margin: 0 1rem 1rem 0; }
.buch .align_left { margin: 0; }
.align_right { float:right; margin: 0 0 1rem 1rem; }

img.align_left, img.align_right { display:block; }

/* MEDIA QUERIES ================================= */

@media screen and (min-width: 406px) {
	.site-header-wrap .logo.flx {
		flex: 0 0 12rem;
	}
	
	#content { width: 85%; max-width:100%; }
	#footer .f-inner { 
		width: 85%; /* wie oben bei #content ! */
		padding: 2rem 0;
	}	
}

/* Ab hier ist die main-Navigation sichtbar (die Desktop-Navi)
   (das Mobile-Menü hat 'display:none')
   und der Content ist z.B. 2- oder mehr-spaltig
*/
@media screen and (min-width: 700px) {
	#sandwichwrap { display: none; }
	#nav_overlay  { display: none; }
	#mainnav { display: block; }
	
	.nav > ul { 
		float:right;
		list-style-type: none; 
		text-align: right;
	}
	.nav ul li { 
		float: left;
		margin-right: 2rem;
		text-align: right;
	}
	.nav ul li:last-child { 
		margin-right: 0;
	}
	.nav ul li:last-child { 
		padding-right: 2rem;
	}

	.nav ul li a,
	.nav ul li a:visited { 
		font-size: 1.6rem;
		font-weight: 500;
		text-decoration: none;
		text-transform: uppercase;
	}
	.nav ul li a:hover,
	.nav ul li a:active,
	.nav ul li.current a {color: #000;}
	
	#content,
	#footer .f-inner { width: 95%; max-width: 85rem;}		
	
	/* Videos floating left (=> mehrspaltig) */
	#content .video-wrap {
		float: left;
		margin: 0 2rem 4rem 0;;
	}
	#content ul.dashed {max-width: 640px;}
	
	/* aktuell in index.html */
	.items .row   { margin-bottom: 2rem; }
	.items .media { float: left; width: 50%; }
	.items .txt   { float: left; width: 50%; }
	.items .txt-inner { padding: 0 1rem 0 3rem; }

	/* Methoden */
	.pic-texts { position:relative; max-width: 100%; padding-top:2rem; }
	.pic-texts .media { float: left; margin: 0 4rem 1rem 0; }


	/* aktuell im Footer */
	.cols.three-cols .col { width: 33.33%; float:left; margin: 0 0 1.6rem 0;}
	.cols.three-cols .col.col3,
	.cols.three-cols .col.col3 .col-inner { text-align: center;}
	.cols.three-cols .col.col3 .col-inner img { display: inline-block; max-width:96%; }
	.cols .col .col-inner { padding: 0 1rem 0 0;}
	
	
	#goto_top {
		left: auto;
		text-align: right;
		margin: 0;
	}	

	.align_left  { margin-right: 2rem }
	.align_right { margin-left:  2rem; }	
}


@media screen and (min-width: 1000px) {
	blockquote {padding-right: 7rem; padding-left: 7rem;}	
	
	#content, #footer .f-inner { width: 85%; }
	.buch .align_left { margin: 0 1rem 0 0; }
	.infos .buch { padding-bottom: 4rem; }
}
@media screen and (min-width: 1300px) {
	#content, #footer .f-inner { width: 65%; }
}