@import url(fundament.css);

/*################## NAVIGATION #####################*/
/* @import url(navigation.css);*/

html, body {
  font-size: 17px; 
  font-family: Arial, Helvetica, Verdana, sans-serif;
  line-height: 1.3; 
  color: #1d1d1b;

}

.invisible { display:none; }
a { border:none; outline: 0; }
td { padding:0; }

/*################## WRAPPER ####################*/

.cc-revoke, .cc-window {
    z-index: 9999999999 !important;
}

#wrapper {
  width: 100%;
  margin: 0px auto;
  padding: 0px 0px 50px 0px;
  text-align:center;
  overflow:hidden;
  background: #ffffff;
  position:relative; 
}

.inside { position: relative; margin:0 auto; padding:0; width: 96%; max-width: 1080px; height: auto; overflow:hidden; }

#header { margin:0px auto 0 auto; padding:0; width:100%; min-height:155px; text-align:left; overflow:hidden; }

#header #balken { margin:0; padding:10px 0 0 0; width: 100%; height:67px; line-height: 60px; background: #007a95; text-align:right; color:#ffffff; }
#header #balken p { float:right; width: auto; margin:0; padding:0; height:60px; font-size:100%; display: flex; justify-content: right; align-items: center; }
#header #balken a { color: #ffffff; text-decoration:none; }

#header #logoundnav { margin:0; padding:10px 0; width: 100%; background: #ffffff;}

#header #logo { float:left; width: 248px; margin: 0; margin-top: 5px; padding:0; padding-right: 0px; text-align:left; }
#header #logo img { }


#header .navigation { float:right; margin:0; padding:0; width: calc(66% - 0px); margin-top:30px;}
#header .navigation .navbar { list-style:none; margin:0; padding:0; width: 100%;  display: flex; justify-content: space-around; }
#header .navigation .navbar li { width: auto; position:relative; display: inline-block; list-style: disc inside none; 
margin:0;  padding: 35px 0.8% 0 0.8%;  text-align:center; font-size:100%; font-weight:normal;  }
#header .navigation .navbar li a {  color: #000000;  text-decoration:none; }
#header .navigation .navbar li a.active { color: #000000; }
#header .navigation .navbar li a:hover { color: #000000; }
#header .navigation .navbar.viworange li {  }
#header .navigation .navbar li:last-child { border:0; padding-right:0; }
#header .navigation .navbar li::after { }
#header .navigation .navbar li.active { background: url("../images-design/navi-li-active.jpg") top center no-repeat;  }
#header .navigation .navbar li.active a {color: #007a95; }


#container { position:relative; margin:0px auto 3px auto; padding:0; padding-bottom: 15px; width:100%; text-align:left; overflow:hidden;
background: #ffffff url("../images-design/container-hg.jpg") top left repeat-x;
}
#container.ohnehg { background:none;  }
#container.kurzhg { background: #ffffff url("../images-design/container-hg2.jpg") top left repeat-x;  }
#container .inside.linie { padding-top: 20px; border-top: 1px solid #e6e6e6; }

#container .linie { padding-top: 20px; border-top: 1px solid #e6e6e6; }

#container #teaser { margin:0px 0 25px 0; padding:0; width: 100%; height: auto; overflow:hidden;  text-align:center; }
#container #teaser img { margin: 0 auto; max-width: 1550px; }


#container h1 { margin:0; margin-bottom: 25px; padding:0; color:#007a95; font-size: 130%; font-weight:normal; }
#container h2 { margin:0; margin-bottom: 15px; padding:0; color:#007a95; font-size: 110%; font-weight:bold; }
#container h3 { margin:0; margin-bottom: 15px; padding:0; color:#007a95; font-size: 91%; font-weight:bold;  }
#container h4 { margin:0; margin-bottom: 12px; padding:0; color:#007a95; font-size: 91%; font-weight:bold; }
#container h5 { margin:0; margin-bottom: 12px; padding:0; color:#007a95; font-size: 91%; font-weight:bold; }
#container h6 { margin:0; margin-bottom: 12px; padding:0; color:#007a95; font-size: 91%; font-weight:bold; }
#container h1.keintextabstand { margin-bottom:0; }

#container p { margin:0; margin-bottom: 1em; padding:0; color:#4c4c4c; font-size: 87%; font-weight:normal; line-height:1.3; }
#container p a { color: #007a95; }
#container p a:hover { color: #007a95; }

#container ul { margin:0;  padding:0;  }
#container ul li { margin:0; margin-left: 20px; padding:0; color:#4c4c4c; font-size: 87%; font-weight:normal; line-height:1.3; list-style-type: disc;}

#container .zweispaltig { position:relative; float:left; width: 48%; margin:0; padding:0; }
#container .zweispaltig.marginright { margin-right: 4%; }

#container .dreispaltig { position:relative; float:left; width: 31%; margin:0; padding:0; }
#container .dreispaltig.marginright { margin-right: 3.5%; }

#container .zweidreispaltig { position:relative; float:left; width: 65.5%; margin:0; padding:0; }

#container .boxdreispaltig { position:relative; float:left; width: 31%; margin:0; padding:0; }
#container .boxdreispaltig.marginright { margin-right: 3.5%; }

#container .box { margin:0; padding:0; background: #007a95; width: 100%; overflow:hidden; display:flex; align-items: center; }
#container .box .bild { margin:0; padding:0; padding: 25px 4% 25px 6%; float:left; width: 40%; }
#container .box .bild img { margin:0; padding:0; width: 100%; height: auto; }
#container .box p { margin:0; padding:0; padding: 25px 6% 25px 0; float:left; width: 44%; color: #ffffff; font-size:110%; font-weight:normal; text-align:left;}

#container .contentboxen {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}




#container .contentbox { 
  width: 31%;
  padding: 0px;
  float: left;
  margin: 0px;
  border: 1px solid #cfd1d2;
  position:relative;
}
#container #aktuelles .contentbox { 
  width: 47%;
  padding: 0px;
  float: left;
  margin: 0px;
  border: 1px solid #cfd1d2;
  position:relative;
  margin-bottom: 30px;
}

#container .contentbox.marginright { margin-right: 3.0%; }
#container #aktuelles .contentbox.marginright { margin-right: 2.5%; }

#container .contentbox .ueberschrift { background: #c8d8dc; padding: 20px 6%; font-size: 120%; font-weight: normal; color:#4c4c4c;}
#container #aktuelles .contentbox .dblau { background: #007a95 !important; color: #ffffff !Important; }
#container .contentbox .inhalt { padding: 20px 6% 0 6%; padding-bottom:70px;  overflow:hidden; }
#container .contentbox .more { position:absolute; bottom:0; left:0; width: 88.5%; height: 40px; background: #c8d8dc; padding: 20px 6% 10px 6%; }
#container .contentbox .more a { display:inline-block; padding-left: 35px; padding-top: 6px; background: url(../images-design/pfeil-rechts-gruen.png) top left no-repeat; height: 33px; width: 80%; color:#4c4c4c; font-size: 87%; font-weight:normal; line-height:1.3; text-decoration:none; }


/*accordeon unten auf startseite*/
#container .drawer { width:100%;  overflow:hidden; clear:both; margin-bottom:1px; }
#container .drawer .accordion-item { }
#container .drawer .accordion-item-active .accordion-header { background-size: contain;	transition:.25s; border-left: 4px solid #007a95; }
#container .drawer .accordion-item-active .accordion-header-icon {	color:#7b7b7b;}
#container .drawer .accordion-item-active .accordion-header h1 {	color:#4c4c4c; font-weight:bold !important; }
#container .drawer .accordion-header {	
  background-color: #ffffff; background-size: contain;
	padding:10px 6% 5px 6%;	cursor:pointer;	min-height:30px;	transition:.25s;  overflow:hidden;
  border-top:0px solid #e8e8e8;
  border-left: 4px solid #ffffff; 
}
#container .drawer .accordion-item {	border-bottom:2px solid #e8e8e8; }
#container .drawer .accordion-header h1 { 
    float:left; 
    background:transparent;
    border:0;
    color: #4c4c4c;
    font-size: 86%;
    margin: 0;
    padding: 5px 0 0 0;
    text-align: left;
    font-weight:normal; 
}
#container .accordion.nichtfett .drawer .accordion-header h1  { color:#4c4c4c; font-weight:normal; }
#container .drawer .accordion-content { display:none; padding:12px 6%; color:#4c4c4c; background:#f9f9f9; font-size:76%; }
#container .drawer .accordion-content ul { margin:0; padding:0; padding-left:0px;}
#container .drawer .accordion-content p { margin:0; margin-bottom: 6px; font-size:100%; }
#container .drawer .accordion-content p a { color: #007a95 !important; }
#container .drawer .accordion-header-icon { font-family:Arial,Helvetica,sans-serif; float:right;color:#4c4c4c; font-size: 100%; vertical-align: middle; }
#container .drawer .accordion-header-icon.accordion-header-icon-active { -webkit-transform:rotate(180deg);	-ms-transform:rotate(180deg);	transform:rotate(180deg);	color:#4c4c4c; }
#container .drawer .accordion-content ul { font-size:100%; margin-bottom:15px; }
#container .drawer .accordion-content .zweispaltig { margin-bottom:10px; }

#container .accordion.leistungen  { border-top:2px solid #e8e8e8;}
#container .accordion.leistungen .drawer .accordion-header {	padding:10px 2% 5px 2%; }
#container .accordion.leistungen .drawer .accordion-content { padding:12px 2%;  }

#container p span.erstespalte { float:left; width: 33%; }
#container p span.zweitespalte { float:left; width: 33%; }
#container p span.drittespalte { float:left; width: 33%; }

#zerti { position:absolute;z-index:999999;left:20px;bottom:20px;margin:0;padding:0;border:2px solid #ffffff;width:200px;height:auto;overflow:hidden;background:#42a62a; }
#zerti p { padding: 10px 7px 0 7px;color:#ffffff; }
#zertimobile { display:none; visibility:hidden; }

#footer { margin: 20px auto 0 auto; padding:20px 0; width:100%; text-align:left; overflow:hidden; background: #007a95; }

#footer .dreispaltig { position:relative; float:left; width: 31%; margin:0; padding:0; }
#footer .dreispaltig.marginright { margin-right: 3.5%; }

#footer .mapvorschau { margin: 0 auto; max-width: 148px; width: 100%; padding:0; }

#footer h3 { margin-bottom: 5px; padding-bottom: 5px; color: #ffffff; font-weight: bold; width:100%; font-size: 87%; }
#footer p { margin:0; margin-bottom: 7px; padding:0; color:#ffffff; font-weight:normal; line-height:1.3; font-size:81%; }
#footer p a { color: #ffffff; }
#footer p a:hover { color: #ffffff; }
#footer ul { margin:0; padding:0; list-style-type: none; }
#footer ul li { list-style-type:none; color: #ffffff; margin-left:0; font-size:81%;line-height:1.6;  }
#footer ul li a { margin-left: 0px; list-style-type:none; color: #000000; text-decoration: none; }
#footer ul li.active a { text-decoration:underline !important;  color: #044599 !important; }

#footer p span.erstespalte { float:left; width: 33%; }
#footer p span.zweitespalte { float:left; width: 33%; }
#footer p span.drittespalte { float:left; width: 33%; }

#footer .scroll { position:absolute; top:0px; right:0px; width: 35px; height: 35px; }


#copyright { margin: 0px auto; padding:25px 0 30px 0; width:100%; text-align:left; overflow:hidden;  background:#ffffff; }
#copyright p { color: #828685; font-size: 80%;  }
#copyright p a { color: #828685; }
#copyright .zweispaltig { position:relative; float:left; width: 48%; margin:0; padding:0; }
#copyright .zweispaltig.marginright { margin-right: 4%; }
#copyright .impdat { text-align:right; }



/*################## FORMULAR  ##################*/

#formularausgabe { margin:0; margin-top:20px; padding:0; width:100%; }
#formular { width: 100%; margin:0; padding: 0; } 
* html #formular { height: 1px; float:left; }
#formular p {  margin:0; padding:0; margin-bottom: 2px;}
#formular fieldset { margin:0; padding:0; margin-bottom: 15px; width: 100%; border: none; }
#formular label { clear:both; margin:0; margin-bottom: 3px; padding:0; width: 30%; display: block; float: left; cursor: pointer; }
#formular input, #formular textarea { font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: normal; color: #000000; }
#formular input { margin:0;margin-bottom: 3px;padding:0;background-color:#ffffff;color:#000000;border:1px solid #007a95;height:21px;width:67%;line-height:21px; }
#formular textarea { margin:0;padding:0;background-color:#ffffff;color:#000000;border:1px solid #007a95;width:97%;height:105px; }
#formular #senden { margin:0;padding:0;background-color:#007a95;color:#ffffff;border:1px solid #007a95;height:26px;width:100%;font-size:80%;font-weight:bold; }
#formular input:focus, #formular textarea:focus { background-color: #f5f5f5;  }

#formular .labelvollebreite { width: 100% !important;margin-bottom: 8px; }
#formular .fehler { border:1px solid #ff0000 !important; }

#formular #versicherung, #formular #termin, #formular #vorsorgetermin, #formular #akuttermin { width: 20px;  }
#formular #bild { }
#formular #code { width: 96% !important;  }
#formular .silinks { margin:0; padding:0; float:left; width: 60%; }
#formular .sirechts { margin:0; padding:0; float:left; width: 40%; }


/*################## WEITERE ########################*/

.videoWrapper {
    clear:both;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-top:0px;
    margin-bottom:10px;
}
#footer .videoWrapper { padding-bottom: 30.25%;}
#footer .footer3 .videoWrapper { padding-bottom: 66%;}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.schwarz { color: #1d1d1b; }
.hellrot { color: #cb9391; }
.weiss { color: #ffffff; }
.blau { color: #044599; }
.rot { color: #de0a09; }

.klein { font-size: 0.80em; float:left; padding-bottom: 10px; margin-left:30%; }
.fett { font-weight: bold !important; }
.paddingoben { margin-top: 5px; }
.zentriert { text-align:center; }
.blocksatz { text-align: justify; }
.kleiner { font-size:71%; }
.margintop { padding-top: 20px; }
.floatrechts { float:right; }

.abstand15px { padding-top: 15px; }
.abstand20px { padding-top: 20px; }
.abstand25px { padding-top: 25px; }
.abstand30px { padding-top: 30px; }


span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

* html .imieausblenden, .mobilenavigation, #navmobile, #header .adressen_mobile, #header .adressen_smartphone, #container .navigation .kontakt { display:none; visibility: hidden; }



/* ###########################     RETINA      ############################*/
/* ########################################################################*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
#header .navigation .navbar li.active { background-image: url("../images-design/navi-li-active@2x.jpg"); background-size: 33px 27px; }
#container .contentbox .more a { background-image: url("../images-design/pfeil-rechts-gruen@2x.png"); background-size: 27px 33px;  }

}


/* ######################        RESPONSIV !!!!       #####################*/
/* ########################################################################*/

@media all and (min-device-width: 0px) and (max-device-width: 980px), all and (min-width: 0px) and (max-width: 980px) {
#header .navigation  { width: calc(94% - 250px); }
.inside { width: 94%; }
#container .box .bild { padding: 25px 4% 25px 6%; width: 35%; height: auto; }
#container .box p { padding: 25px 6% 25px 0;  width: 49%; font-size:100%; }

#container .contentbox .inhalt .zweispaltig { width: 100%; margin-bottom:15px; }
#container .contentbox .inhalt .zweispaltig.marginright { margin-right: 0; }
}



/* ########################################################################*/
/* #####################          TABLET           ########################*/
/* ########################################################################*/
@media all and (min-device-width: 0px) and (max-device-width: 768px), all and (min-width: 0px) and (max-width: 768px) {
#wrapper { }

#header .navigation { width: auto; margin-top:0; display:none; visibility: hidden; }
#header .navigation .navbar { display:none; visibility: hidden; }

#header #logo { float:none; display:block; margin-bottom: 8px; }
#header #logoundnav { padding-bottom: 0; }

.mobilenavigation { display:block; visibility:visible;  }
#menuslide { display:block; margin:0px auto 0px auto;  padding:0; padding-left: 3%; padding-right: 0%;  padding-top: 15px; width:97%; height:40px; border: 1px solid #007a95; color:#ffffff; text-align:left; font-weight:normal; text-decoration: none; font-size:130%;
background:#007a95;
background-image: url("../images-design/menu@2x.png");
background-repeat: no-repeat; 
background-position: calc(100% - 4%) 15px;
background-size: 60px 30px;
}

#navigation400 { display:block;  margin:0px auto 0px auto; padding:0; width:100%; color:#666; font-size:94%; }
#navigation400 ul { display:none; margin:0 auto; padding:0; padding-top:0px; padding-bottom:0.3px; text-align: center; width:93.6%;  background:#ffffff;}
#navigation400 li { list-style-type: none; margin:0px 0 0 0%; padding:0; text-align: left; color:#4c4c4c; font-size: 91%; width: 100%; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;  }
#navigation400 li a { display:block; margin:0 auto; padding:0;  padding: 6px 0 6px 20px; color:#4c4c4c; text-decoration:none;  }
#navigation400 li a:hover { color: #4c4c4c !important; }
#navigation400 li a:active { color: #4c4c4c; }
#navigation400 li a:visited { color: #4c4c4c;  }
#navigation400 li a:focus { background-color: transparent; }
#navigation400 li .active {color: #007a95 !important;  }
#navigation400 li:hover { }

#container .inside.linie { padding-top: 20px; border-top: 0px solid #e6e6e6; }


#container .zweispaltig { width: 100%;} 
#container .zweispaltig.marginright { margin-right: 0%; margin-bottom: 20px; }

#container .contentbox .inhalt .zweispaltig { width: 48%; margin-bottom:0px; }
#container .contentbox .inhalt .zweispaltig.marginright { margin-right: 4%; }

#container .dreispaltig { width: 100%; }
#container .dreispaltig.marginright { margin-right: 0; }
#container .zweidreispaltig {  width: 100%; margin-top:20px; }

#container .box { display:block; }
#container .box .bild { float:none; display:block; padding: 25px 10% 5px 10%;  width: 80%; }
#container .box p {  float:none; display:block; padding: 5px 10% 15px 10%;  width: 80%; font-size:88%; }

#container .contentboxen { display: block; }
#container .contentbox { width: calc(100% - 2px); float: none; border: 1px solid #cfd1d2; margin-bottom:15px;}
#container .contentbox.marginright { margin-right: 0%; }
#container #aktuelles .contentbox { width: calc(100% - 2px); float: none; border: 1px solid #cfd1d2; margin-bottom:15px;}
#container #aktuelles .contentbox.marginright { margin-right: 0%; }
#container .contentbox .ueberschrift {  padding: 20px 3%; }
#container .contentbox .inhalt { padding: 20px 3% 0 3%; padding-bottom:70px; }
#container .contentbox .inhalt .mobilezweispaltig { width: 48%; margin-right: 2%; float:left; }
#container .contentbox .more {  width: 94.5%; padding: 20px 3% 10px 3%; }
#container .contentbox .more a {  padding-left: 35px; width: 80%; }

#container .drawer .accordion-header {	padding:10px 3% 5px 3%; }
#container .drawer .accordion-content {  padding:12px 4%; }

#zerti { position:absolute;z-index:999999;left:20px;bottom:20px;margin:0;padding:0;border:2px solid #ffffff;width:auto;height:auto;overflow:hidden;background:#42a62a; }
#zerti img { float:left; width:150px; }
#zerti p { float:left; width: auto; padding: 10px 7px 0 7px;color:#ffffff; }

#footer { padding-bottom: 30px; }
#footer .dreispaltig { width: 50%; margin-bottom: 0px; margin-top: 20px; }
#footer .dreispaltig.marginright { margin-right:0; }
}




@media all and (min-device-width: 0px) and (max-device-width: 540px), all and (min-width: 0px) and (max-width: 540px) {
#zerti { display:none; visibility:hidden; }

#zertimobile { display:block; visibility:visible; margin:0;padding:0;margin-bottom:20px; border:2px solid #42a62a;width:calc(100% - 4px);height:auto;overflow:hidden;background:#ffffff; }
#zertimobile img { float:left; width:150px; }
#zertimobile p { float:left; width: calc(100% - 164px); padding: 2px 7px 5px 7px;color:#4c4c4c; text-align:left; }

}

@media all and (min-device-width: 0px) and (max-device-width: 480px), all and (min-width: 0px) and (max-width: 480px) {
.inside { width: 92%; }

#menuslide { padding-left: 4%; width:96%; background-position: calc(100% - 5%) 8px; }
#navigation400 ul { width:91.6%; } 

#header #balken .inside p { font-size: 74%; }
#header #balken .inside p img.mail { width: 20px; height: auto;}
#header #balken .inside p img.tel { width: 15px; height: auto;}

#container .contentbox .inhalt .mobilezweispaltig { width: 100%; margin-right: 0%; float:left; }


#footer .dreispaltig { width: 100%; }
#copyright .zweispaltig { width: 100%; text-align:center !important; }
#copyright .zweispaltig.marginright { margin-right: 0%; }
#copyright .impdat { text-align:center; }
}

@media all and (min-device-width: 0px) and (max-device-width: 420px), all and (min-width: 0px) and (max-width: 420px) {
#container .boxdreispaltig { width: 100%; }
#container .boxdreispaltig.marginright { margin-right: 0; }
#container .box { margin-bottom:5px; display:flex; align-items: center; }
#container .box .bild { padding: 15px 0% 15px 6%; float:left; width: 24%; }
#container .box p {  padding: 15px 6% 15px 6%; float:left; width: 64%; }

#container .contentbox .inhalt .zweispaltig { width: 100%; margin-bottom:15px; }
#container .contentbox .inhalt .zweispaltig.marginright { margin-right: 0; }

#zertimobile img { padding: 4px; }
#zertimobile p { float:none; clear:both; display:block; width: calc(100% - 10px); margin:0; margin-bottom:0 !important; padding:4px 4px 4px 5px;color:#4c4c4c; text-align:left; }
}

@media all and (min-device-width: 0px) and (max-device-width: 320px), all and (min-width: 0px) and (max-width: 320px) {
#header #balken .inside p { width: 100%; height: 30px; justify-content:center; }
}