@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-Regular.ttf) format('truetype'); font-weight: 400; }
@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-Bold.ttf) format('truetype'); font-weight: 600; }
@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-Medium.ttf) format('truetype'); font-weight: 500; }
@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-Light.ttf) format('truetype'); font-weight: 300; }
@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-Thin.ttf) format('truetype'); font-weight: 200; }
@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-ExtraBold.ttf) format('truetype'); font-weight: 700; }
@font-face { font-family: 'Heebo'; src: url(../fonts/Heebo-Black.ttf) format('truetype'); font-weight: 800; }

html, body { height:100%; margin:0; padding:0; }
html { font-size: 100%; scroll-behavior: smooth; }
body { font-family: 'Heebo', serif; font-weight: 300; font-size: 1.375rem; line-height: 1.5625; }


#blau { color: #28a4d0; }
#hellblau { color: #e9f6fa; }
#dunkelblau { color: #4b86ac; }
#grau { color: #cccccc; }
#dunkelgrau { color: #a5a5a5; }

a { text-decoration: none; color: inherit; outline: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }
h1, h2 { text-align: center; font-weight: 300; text-transform: uppercase; }
h1 { font-size: 100%; margin-top: 2em; margin-bottom: 5em; font-weight: 400; letter-spacing: 0.1em; }
h2 { padding: 0.5em; font-size: 1.75em; font-weight: 400; color: #fff; background-color: #ccc; text-transform: uppercase; letter-spacing: 0.05em; }
h4 { font-size: 1em; color: #28a4d0; padding-bottom: 1em; }

b, strong { font-weight: 500; }

button { outline: none; }

.clearfix::after { content: ""; clear: both; display: table; }
.clearer { clear: both; }
.small { font-size: 88%; }
.float_right { padding-left: 1em; }
.media--right figure { margin-left: 2em; }
.media--left figure { margin-right: 2em; }

.BGsymbol { background-image: url(../grafiken/hintergrund/aktuellesBG.png); background-repeat: no-repeat; background-position: bottom center; }

#main .mod_article { padding: 3em 0; }
#main #menu { padding: 0; }
#main .ueberschrift { padding: 0; }

#hmenu { position: sticky; top: 0; z-index: 10; }


.content-gallery ul { display: flex; flex-wrap: wrap; }
.content-gallery li { padding: 0 0.4em; width: 24%; box-sizing: border-box; margin-bottom: 3em; }

.BGblau { background-color: #e9f6fa; }

.menu { background-color: #ccc; color: #fff; text-transform: uppercase; }
#mobilmenuMenu { background-color: transparent; font-size: 200%; }
.menu ul { display: flex; justify-content: space-between; }
#mobilmenuMenu ul { display: block; }
.menu li {}
.menu a { color: inherit; text-decoration: none; }
.menu strong { font-weight: 300; }

#hmenu { padding: 0 !important; }

/* mobiles Menü */
#mobilmenuButton { position: fixed; right: 2em; top: 1em; width: 2em; cursor: pointer; z-index: 1000; }
.mobile_menu .inner { background: rgba(233,246,250,0.96); background: #ccc; padding: 2em; }
.mobile_menu_overlay.background { background: rgba(233,246,250,.6); }
.mobile_menu.active.position_left { box-shadow: 2px 0 20px 0px rgba(0,0,0,.1); }
#mobilmenuMenu li { line-height: 3em; border-bottom: 1px solid #fff; }

.module-onepage-navigation.fixed-navi { position: fixed; top: 0; width: 100%; z-index: 200; border-bottom: 1px solid gray; }
.module-onepage-navigation ul,
.mod_article>div { position: relative; width: 98%; max-width: 1200px; margin: 0 auto; padding: 1.3em 0; }
.module-onepage-navigation ul { font-size: 1.875em; font-size: 1.364em; font-weight: 400; letter-spacing: 0.1em; padding: 0.5em 0; }
.module-onepage-navigation a { padding: 0.5em 1em; }
.module-onepage-navigation li:hover a { background: #a5a5a5; }
.mod_article>div.ce_sliderStart { width: 100%; max-width: 100%; padding-top: 0; padding-bottom: 0; }

/* hauptmenü oben anheften */
/*
* html nav {
  top:expression(auto);
}
.fixed-navi {
  top:0px;
  position:fixed !important;
  position:absolute;
}
* html .fixed-navi {
  top:expression(documentElement.scrollTop);
}
#hmenu {
  bottom:0px;
  left:0px;
  position:absolute;
  width:100%;
}
* html #hmenu {
  top:expression(auto);
}
.fixed-navi {
  top:0px;
  position:fixed !important;
  position:absolute;
  z-index: 200;
}
* html .fixed-navi {
  top:expression(documentElement.scrollTop);
}
*/

.top { display: none; }
.page-2 .top { display: block; }
.top { position: absolute !important; margin-top: -3.5em !important; width: 100% !important; max-width: 100% !important; }
.top img { width: 5.25em; max-width: 84px; }

#header .inside { position: relative; width: 98%; width: 100%; max-width: 1730px; max-width: 100%; margin: 0 auto; }
#kopf { padding: 2em 1% 3em; }
#kopf>div { float: left; width: 35%; }
#kopf>div:first-child figure { float: right; }
#kopf>div:last-child { float: right; }
.tag,
.zeit,
.komm,
.kommnr { display: inline-block; }
.tag { width: 15em; text-align: left; }
#kopf .sprechzeiten p:last-child { font-size: 1.1875em; }
#kopf .sprechzeiten img { display: inline-block; height: 1em; width: auto; padding-right: 0.6em; }

/* Sliderbereich */
.custom { display: none; }
.page-2 .custom { display: block; }

.content-slider img { width: 100%; }
.content-slider figcaption { position: absolute; top: 43%; left: 10%; font-size: 3vw; color: #28a4d0; font-weight: 300; }
.slider-control { display: none; }
div[data-index="1"] figcaption { left: 44%; text-align: right; }
div[data-index="2"] figcaption {  }
.terminButton { position: absolute; top: 0; left: 64.5%; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; }
.terminButton a { padding: 1em 2em; color: #fff; background: #28a4d0; display: inline-block; margin-bottom: 1em; }

#main .mod_article:not(#hmenu) a { text-decoration: underline; }
#main .terminButton a { text-decoration: none !important; }

#main .mod_article:not(#hmenu) ul { margin-left: 1.2em; list-style-type: disc; }
#main .mod_article:not(#hmenu) #leistungenButtons ul,
#main .mod_article:not(#hmenu) .content-gallery ul { margin-left: 0; list-style-type: none; }

#leistungenInhalt { background: url(../grafiken/hintergrund/leistungenBG.jpg) no-repeat; background-size: cover; }
#leistungenButtons ul { display: flex; justify-content: space-around; flex-wrap: wrap; }
#leistungenButtons li { width: 24%; background: #28a4d0; text-align: center; margin-bottom: 0.7em; padding: 2em 0; transition: 0.6s; }
.button { width: 20%; background: #28a4d0; }
#leistungenButtons button { width: 100%; color: #fff; display: inline-block; background-color: transparent; border: none; cursor: pointer; outline: none; }
#leistungenButtons button:after { content: "+"; display: block; padding-top: 1em; font-size: 2em; }
#leistungenButtons li:hover,
#praxisInhalt li:hover figure { transform: scale(1.05); background-color: #4b86ac; transition: 0.6s; }

#teamInhalt figcaption { text-align: center; font-size: 1em; padding-top: 1em; }
#teamInhalt figcaption button { color: #28a4d0; background: none; border: none; outline: none; }

/* Google Maps */

.maps { position: relative; padding-bottom: 40% !important; height: 0; overflow: hidden; margin-bottom: 3em !important; }
.maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#kontaktInhalt .terminButton { right: auto; left: auto; }
.rs-columns { display: block; }
#kontaktInhalt .tag { width: 6em; }
#kontaktInhalt .komm { width: 4em; }

/* Terminanfrage */
label, input { display: block; }
.formbody { display: flex; justify-content: space-between; flex-wrap: wrap; }
.widget, .datumZeit, .widget-calendar input { width: 46%; margin-bottom: 1em; }
.widget-calendar { width: 100%; margin-bottom: 0; }
.widget-calendar input, .widget-calendar img { display: inline-block; }
.widget-calendar img { width: 1.5em; margin-left: 0.5em; vertical-align: middle; }
input, textarea, select { width: 100%; border: 1px solid #28a4d0; background: #fff; outline: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0px; padding: 3px; box-sizing: border-box; }
select { background: #fff url(../grafiken/pfeilUnten.png) no-repeat right; background-size: 1.5em; }
button[type="submit"] { background: #28a4d0; border: none; color: #fff; padding: 0.3em 1.4em; }
.checkbox_container legend { display: none; }
.checkbox_container input { width: auto; display: inline; margin-right: 0.6em; vertical-align: baseline; -webkit-appearance: checkbox; -moz-appearance: checkbox;height: 1em; }
.checkbox_container label { display: inline; }
.checkbox_container a { text-decoration: underline; }
.widget-checkbox, .widget-submit { width: 100%; }
.widget-submit { }

/* Lightbox */
#cboxOverlay { background: rgba(255,255,255,0.8); }
#cboxContent { background: transparent; }
#cboxLoadedContent { border-color: #000; border-width: 1px; }
#cboxCurrent { display: none !important; }
#cboxTitle { display: none !important; }
#cboxPrevious { left: 1px; }
#cboxNext { right: 1px; }
#cboxClose { top: 1px; }

/* Modal-Fenster */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    padding-bottom: 50px;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    background-color: rgba(255,255,255,0.8); /* Black w/ opacity */
    box-sizing: border-box;
}
/* Modal Content */
.modal>div.content-text {
    position: relative;
    background-color: #28a4d0;
    color: #fff;
    margin: 2em auto 0 auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    padding: 2em;
    box-sizing: border-box;
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
button.close { position: absolute; right: 1em; top: 1em; cursor: pointer; background: #fff; color: #28a4d0; border: 1px solid #28a4d0; padding: 0 0.45em; border-radius: 0.2em; outline: none; }
button.close:hover { background: #e9f6fa; transition: 0.5s; }

#footer { background: #ccc; color: #fff; text-transform: uppercase; font-size: .9545em; }
#footer .top { margin-top: -2.2em !important; }
#footer #fussinhalt { padding: 2em 5em 7em; }
#footer #copyright { float: left; }
#footer #nebenmenu { float: right; }
#footer #nebenmenu li { padding-left: 1em; }

/* Sprechzeiten auf der Terminanfrageseite */
.page-13 #main .sprechzeiten>h4,
.page-13 #main .sprechzeiten>p { text-align: center; }
.page-13 #main .sprechzeiten img { display: inline; width: 1em; }

.page-15 .widget-textarea { width: 100%; }
.page-15 textarea { height: 15em; }




@media (max-width: 1200px) {
	body { font-size: 1.333vw; }
}

@media (max-width: 991px) {
	body { font-size: 1.6vw; }
	#header .inside { position: relative; width: 98%; }
	.terminButton { font-size: 2vw; }
	.terminButton { left: 64%; } 
  .module-onepage-navigation { display: none; }
  .widget, .datumZeit, .widget-calendar input { width: 96%; }
  #footer #fussinhalt { padding: 2em; }
	#footer #fussinhalt>div { float: none; clear: both; width: 100%; text-align: center; }
	#footer #nebenmenu ul { display: block; margin-bottom: 3em; }
	#footer #nebenmenu li { padding-left: 0; padding-bottom: 2em; width: 100%; text-align: center; }
	.maps { padding-bottom: 70% !important; }
	.page-15 .widget-textarea { width: 100%; }
}

@media (max-width: 900px) {
	body { font-size: 1.8vw; }
	#mobilmenuButton { width: 4em; }
	#kopf { padding-bottom: 2em; }
	#kopf>div { float: left; width: 50%; }
	#kopf .sprechzeiten { display: none; }
	.terminButton { left: auto; text-align: center; width: 100%; font-size: 3vw; }
	.slider-wrapper { background: rgba(0,0,0,0.1); }
	.content-slider img { visibility: hidden; }
	.content-slider figcaption { top: 17vw; font-size: 5vw; left: 15% !important; text-align: left !important; }
	#kontaktInhalt { text-align: center; }
}

@media (max-width: 768px) {
	body { font-size: 2vw; }
  #leistungenButtons li,
  .content-gallery li { width: 48%; }
  .float_right { float: none; padding-left: 0; padding-bottom: 2em; }
  .float_right img { width: 100%; }
	#kontaktInhalt { text-align: center; }
	.maps { padding-bottom: 100% !important; }
}

@media (max-width: 480px) {
	body { font-size: 2.5vw; }
}