/*
Theme Name: Gerlach 2020
Version: 1.0
Theme URI: gerlach.de
Description: Theme für die Firma Dr. Gerlach.
Author: Tempus Webdesign
Author URI: http://tempus-webdesign.de
*/
html { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { background: #fff; color: #5d5e60; font-family: 'Abel'; font-size: 20px }
a:link, a:visited { color: #66676b; text-decoration: none }
.clr, .clearfix { clear: both }
p, li { word-wrap: break-word; line-height: 1.2em }
h1, h2, h3, h4 { font-weight: normal; color: #43648d }
/*=====================
Bilder
=====================*/
img { height: auto }
.alignleft { float: left; margin: 0 10px 10px 0 }
.alignright { float: right; margin: 0 0 10px 10px }
.alignnon { float: left; }
.size-full { width: 100%; height: auto }
.pic-neuigkeiten { margin-bottom: 1em }
.socialmedia{ max-width:340px}
/*=====================
Allgemein
=====================*/
.wrapper { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.left{float:left}
.one, .two, .three, .four, .seven { float: left; width: 100% }
.text-center { text-align: center }
.center.button { margin: 0 auto }
.border { border: 1px solid #000 }
.flex-content { display: flex; flex-wrap: wrap; grid-gap: 1em }
.flex-center { align-items: center; justify-content: center }
.grid-content { display: grid; }
.gridtwo { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: .5em; }
.gridfour { grid-template-columns: repeat(auto-fit, minmax(15.25em, 1fr)); grid-gap: .5em; }
.grid-item { }
.flex-item { flex-grow: 1; flex-shrink: 1; margin: .5%; padding: 1% }
a.button { background: #728ba2; color: #fff; padding: .3em 1em }
.button-abstand{ margin-bottom: 1em;}
a.button:hover { background: #ca981d; color: #fff; transition: all 0.3s ease-in;}
.read-more { border: 1px solid #ccc; padding: 1em; margin: 1em; margin: 0 auto; /* right: 0; */ /* max-width: 600px; */ margin: 2em auto; display: block; text-align: center; max-width: 315px; }
.read-more:hover { background: #ccc; color: #fff }
.blaue-ecke { position: relative; overflow: hidden; }
.blaue-ecke:before { content: ''; position: absolute; top: -99px; left: -75px; background: #43648d; height: 250px; transform: rotate(40deg); width: 170px; }
.blaue-ecke:after { content: ''; position: absolute; background: url(img/herzplus.png) no-repeat; left: .75em; top: .75em; width: 80px; height: 60px; background-size: contain; }
.text-gross { font-size: 2em }
.telefon { float: left; width: 100%; max-width: 75px }
.uhrzeit { float: left; width: 100%; max-width: 100px }
.uhrone { float: left; width: 100%; max-width: 105px; text-align: right; margin-right: 5px; }
.ul-none { list-style-type: none; padding: 0 }
.ul-kreise li a{position:relative;padding-left: 30px;float:Left;margin-right: 1em;}
.ul-kreise li a:before{ position:absolute; left:0; content:'';background: url(img/liste-icon.png) center center no-repeat; width:25px; height:25px; background-size: contain }
.ul-kreise li:hover a:before{ background: url(img/liste-icon-hover.png) center center no-repeat;  background-size: contain }

/*----------blockquote----*/
.wp-block-quote { width: 100%; max-width: 620px; margin: 2em auto; border-top: 1px solid #728ba2; border-bottom: 1px solid #728ba2; padding: .5em 2em; text-align: center; }
.wp-block-quote p{ margin:0}
blockquote { font-weight: 100; font-size: 2rem; max-width: 600px; line-height: 1.4; position: relative; margin: 0; color: #728ba2; padding: .5rem;}
blockquote:before, blockquote:after { position: absolute; color: #728ba2; font-size: 8rem; width: 4rem; height: 4rem; font-family: "Times New Roman", Times, serif; }
blockquote:before { content: '“'; left: 0; top: -2rem; text-align: left; }
blockquote:after { content: '”'; right: 0; bottom: 1rem; text-align: right; }
cite { line-height: 3; text-align: left; }
.text-box{ padding:0 2%}
/*=====================
Header
=====================*/
.header-content{min-height:55px}
.sitename {     padding: 0.2em 2% 1em;
    max-width: 700px;
    margin: 0 auto;
    float: none;
}
.logo {  margin: 0 auto; display: block; float: none; max-width:60% }
.logo:hover { opacity: .6 }
/*-------- Header Main Navigation ------*/
/*.main-nav { float: left; width: 100%; clip: rect(auto, auto, auto, auto); max-height: 0; position: relative; display: block; overflow: hidden; zoom: 1; background: #fff; }
.main-nav ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none; }
.main-nav li { width: 100%; display: block; }
.main-nav li:nth-child(1) { display: none }
.main-nav a { text-align: center; width: 100%; display: block; border-top: #fff 1px solid; padding: 3% 0; color: #43648d }
.main-nav .current-menu-item a{ color:#c8941a}
.main-nav .sub-menu { display: none }
.main-nav.opened { max-height: 9999px; }
.nav-toggle { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; width: 100%; text-align: center; display: block; background-image: url(img/nav.png); float: left; background-repeat: no-repeat; background-position: bottom center; height: 44px; text-indent: -9999em; }*/
/*neu*/

.small-nav{
  position: fixed;
  height: 64px;
  width: 64px;
  pointer-events: none;
	top:0;
	left: 0;
	background: #fff url(img/logo.png) no-repeat center 11px fixed;
	background-size: 50px;
		    box-shadow: 0 0 2px 0px #ccc;
	z-index:20
}
.small-nav:focus-within{
	height: 100%; height: 100vh;  width: 100%; z-index:20	}
.small-nav ul{ padding:0}
.main-nav li:nth-child(1){ display:none}
.small-nav .bg {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: .5s;
  background: #000;
}
.small-nav:focus-within .bg {
  visibility: visible;
  opacity: .6;
}
.small-nav * {
  visibility: visible;
}

.nav-toggle {
  margin: 0 0 0 1em;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 70px;
  width: 30px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

}
.icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #aaa;
  transition: .5s;
}
.icon-bar + .icon-bar {
  margin-top: 5px;
}

.small-nav:focus-within .nav-toggle {
  pointer-events: none;
}
.small-nav:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,8px,0) rotate(45deg);
}
.small-nav:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;
}
.small-nav:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0,-8px,0) rotate(-45deg);
}

.small-nav .menu-main-menue-container {
  margin-top: 64px;
  padding: 20px;
  width: 90%;
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  background: #ececec;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transform: translateX(-100%);	
  transition: transform .5s;  
  will-change: transform;
  contain: paint;
}

.small-nav ul {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#menu-item-216{ display:none}
.small-nav #menu-item-216{ display:block}
.small-nav li a {
  padding: 10px 5px;
  display: block;
  text-transform: uppercase;
  transition: color .3s;
}

.small-nav li a:hover {
  color: #BF7497;
}
.small-nav:focus-within .menu-main-menue-container {
  transform: none;
}
.main-nav .current-menu-item a{color:#c8941a}
/*-------- Slider ------*/
.slider-container { background: #728ba2; padding: .5em 0 }
.slider-container img{box-shadow: 0 0 3px 0px #CCC; float:left; width: 100%}
/*=====================
Main
=====================*/
.button-content{ padding-top:2em}
.abstand-container { padding: 1em 0 }
.zitat-content{ padding:0 1em}
.abstand-rand { padding-left: 1em;padding-right:  1em }
.slider-container { margin: 1.7em 0; }
.slider-content { margin: -1.7em 0; }
.zitat-content .text { max-width: 600px; margin: 0 auto; float: none; font-size: 1.5em; font-weight: bold }
.grid-topleistungen { grid-gap: 2em }
.grid-topleistungen .grid-item{ position:relative}
.grid-topleistungen a:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.grid-topleistungen .grid-item:hover{ opacity:.7;transition: all 0.3s ease-in;}
.waswie-content { border-top: 1px solid #43648d; border-bottom: 1px solid #43648d; padding: 1em 0 }
.waswie-content .grid-item { padding: 1.5em 0 }
.waswie-content span {  width: 155px; height: 155px; background: url(img/elipse.png) center center no-repeat; display: flex; align-items: center; justify-content: center; margin: 0 auto }
.top-leistungen-content { border-top: 1px solid #43648d; border-bottom: 1px solid #43648d; padding: 1em 0 0.5em; margin: 2em 0 2em; }
.top-leistungen-content .grid-item{min-height: 55px}
.top-leistungen-content span { float: left; width: 50px; height: 50px; background: url(img/elipse.png) center center no-repeat; display: flex; align-items: center; justify-content: center; margin: -.5em 1em 0 0; background-size: contain }
.page-id-11 .main-content h3 { text-align: center; position: relative }
.page-id-11 .main-content h3:before { border-bottom: 2px solid #43648d; position: absolute; bottom: -5px; content: ''; height: 2px; width: 235px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.box-content:nth-child(1) { border-bottom: none}
.grid-kontakt { grid-gap: 2em; padding: .5em }
.grid-kontakt h3,
.leistungen-content h3 { border-bottom: 1px solid #43648d; }
.fragen-rufnummer .text-gross {padding: .5em 0; float:left}
/*--------News------*/
.news-home-content{    border-top: 1px solid #43648d;}
.news-home-content .box-content{ margin-bottom: 1em;}
.news-home-content h3{ font-size:1em; font-weight: bold; }
.news-category{ font-weight:bold}
/*--------Kotnakt------*/
.wpcf7-form { font-size: .75em }
.wpcf7-form-control-wrap { float: left; width: 100%; margin: 5px 0 }
input, textarea, select { width: 100%; border: 1px solid #777a7a; padding: 5px }
input[type="submit"] { background: #ccc9c9; color: #FFF; padding: 5px 0; border: 0 }
.radio-standort input { float: left; width: 50px }
.wpcf7-response-output { float: left; width: 100% }
input[name="acceptance-datenschutz"] { float: left; max-width: 50px; margin: 5px 0 0 0; }
.acceptance-datenschutz span.wpcf7-list-item { display: block }
/*=====================
Footer
=====================*/
.footer-container {color: #fff;padding: 1em 2% 2%;font-size: .9em;background:#738ba2;margin-top: 2em;}
.logo-footer {max-width: 450px;margin-bottom: 2em;}
.breadcrumb {margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #fff;margin-bottom: 2em;padding: .5em 0;}
.home-icon { max-width: 23px; float: left; margin: 0 5px }
.main-footer-content { border-top: 1px solid #43648d }
.finden-content { grid-gap: 2em; }
.footer-nav li { list-style-type: none }
.footer-nav ul { padding: 0 }
.impress-nav { border-top: 1px solid #fff; font-size: .9em; padding: 0 2% }
.impress-nav ul { float: left; padding: 10px 0; margin: 0 }
.impress-nav .children { display: none }
.impress-nav li { float: left; list-style-type: none }
.impress-nav a { border-left: 1px solid #fff; padding: 0 10px; color: #fff }
.impress-nav .copyright a { border: none }
#back-to-top { position: fixed;/* Wichtig! */ bottom: 20px; right: 10px; cursor: pointer; padding: 5px; display: none; z-index: 9999999999; }

/*------------------------------------------------600px*/
@media only screen and (min-width: 600px) {
.two, .four { width: 50% }
.big-teaser { max-width: 60% }
.small-teaser { max-width: 40% }
/*===================== Allgemein =====================*/
.flex-content .two{width: calc(50% - .5em);}
/*===================== Navigation =====================*/
.main-nav { position: relative;  overflow: visible; display: flex; justify-content: center; }
	.js .main-nav.original{padding: 1% 0px;}
.main-nav.cloned { background: #fff }
.nav-toggle { display: none; }
.main-nav ul li { float: left; width: auto; border-left: 1px solid #43648d; text-transform: uppercase; }
.main-nav li:nth-child(2) { border: none }
.main-nav ul li:first-child { border: none }
.main-nav ul li a { width: 100%; padding: 5px 10px; border: none; position:relative }
.main-nav ul li:not(:first-child):hover a:before /*, .main-nav ul li:not(:first-child).current_page_item a:before, .main-nav ul li:not(:first-child).current-menu-item a:before */{
    border-bottom: 1px solid #c8941a;
    position: absolute;
    bottom: 0;
    content: '';
    height: 2px;
    width: 70%;
    left: 15%;
}
.main-nav.cloned li:nth-child(1){ display:block}
.main-nav.cloned li:nth-child(1) a{    background: #fff url(img/logo.png) no-repeat center center fixed;
    text-indent: -999999em;
    width: 60px;
    display: block;
    background-size: contain;
    float: left;}
/*===================== Main =====================*/
.page-id-11 .main-content ul { list-style-type: none; padding: 0 0 2em 0; display: flex; display: flex; flex-wrap: wrap; }
.page-id-11 .main-content ul li { float: left; width: calc(50% - 2em); padding: 1em 0; margin: 0 1em; border-bottom: 1px solid #43648d }
.page-id-11 ol { display: block; margin: 0 auto; max-width: 250px; margin-bottom: 1em }
.grid-philosophie { grid-gap: 2em }
/*===================== footer =====================*/

}
/*------------------------------------------------800px*/
@media only screen and (min-width: 800px) {
h2,h3,h4{ padding-top:1em}
.four { width: 25% }
.page-id-7 .main-container .wrapper, .wrapper-900 { max-width: 880px; margin: 0 auto; float: none }
.big-content { width: 60% }
.small-content { width: 40% }
.big-content.left { padding-right: 1em }
.small-content.right { padding-left: 1em }
/*===================== Header =====================*/
.main-nav { max-height: inherit; }
.main-nav ul { display: flex; justify-content: center; }
.js .main-nav.cloned { float: left; max-width: 100% }
.menu-main-menue-container { float: left; width: 100% }
/*===================== Main =====================*/
.abstand-container { padding: 2em 0 }
.fragen-rufnummer .text-gross {padding: 0; float:none}
.fragen-rufnummer br{ display:none}
.gridthree { grid-template-columns: repeat(2, minmax(225px, 1fr)); }
}
/*------------------------------------------------980px*/
@media only screen and (min-width: 980px) {
.three { width: 33.3% }
.gridtwo { grid-template-columns: repeat(2, minmax(225px, 1fr)); }
	.gridthree { grid-template-columns: repeat(3, minmax(225px, 1fr)); }
.gridfour { grid-template-columns: repeat(4, minmax(225px, 1fr)); }
/*===================== Header =====================*/
.js .main-nav.original { float: right }
/*===================== Main =====================*/
.seven { max-width: 15% }
}
/*------------------------------------------------980px*/
@media only screen and (min-width: 1200px) {
.waswie-content span {  margin: -1.5em 1em -1.5em 0; float:left }.waswie-content .text-box{     width: calc(100% - 176px)}
}
/*------------------------------------------------980px*/
@media only screen and (min-width: 1400px) {
body { background: url(img/bg.png) left center no-repeat, url(img/bg-right.png) right top no-repeat }