/*
Theme Name: foerster
Theme URI: http://www.finanzkanzlei-foerster.de/
Description: Foerster Theme
Version: 1.0
Author: Sebastian Langer
Author URI: http://www.langerdesign.de/
*/

/* ==========================================================================
   CSS
   ========================================================================== */
p{
  font-size:100%;
  font-family: 'Arvo';
  font-weight: normal;
  font-style: normal;
  text-align: justify;
}

h1{
  font-size:200%;
  font-family: 'Arvo';
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
}

h2{
  font-size:150%;
  font-family: 'Arvo';
  font-weight: normal;
  font-style: normal;
}

h5{
  text-align: center;
  color:#556778;
  font-family: 'Arvo';
  font-weight: 700;
  font-style: normal;
}

p span { 
  vertical-align: 2px;
  font-size: 60%;
  font-family: 'Arvo';
  font-weight: normal;
  font-style: normal;
}

h5 span { 
  vertical-align: 15%;
  font-size: 60%;
  font-family: 'Arvo';
  font-weight: normal;
  font-style: normal;
}

#HyphenatorToggleBox{
  display:none;
}

*{
  padding:0;
  margin:0;
}

a{
  color:black;
  text-decoration:none; 
}

#footer a{
  color:#B8C9D8;
}
#footer p{
  font-size:80%;
}
img{
  border:0px;
}
html, body{
  height: 100%;
  min-height:100%;
  width:100%;
}
body{
  font-size: 100%;
  line-height: 1.3;
}
#fullpage{
  height: 100%;
  width: 100%;
}
#footer{
  width:100%;
  height:80px;
  background-color:#697b8c;
  position:absolute;
  bottom:0px;
  z-index:99;
}
#seite-start{
  float:left;
  position:relative;
  width:100%;
  height:calc(100% - 123px);
  margin:123px 0px 0px 0px;
  overflow-x: hidden;
  background-color:#697b8c;
}
#seite-kontakt{
  float:left;
  position:relative;
  width:100%;
  height:100%;
  background-color:white;
}

#numberwrap{}

#mobilicon, #telicon, #mailicon{
  width:36px;
  height:36px;
  position:relative;
  float:left;
  margin:40px 0px 0px 40px;
  cursor:pointer;
  z-index:10;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background-color:none;
  border:solid 2px white;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
}
#telicon, #mailicon{
  display:block;
}
#mobilicon{
  display:none;
}

#mobilicon p, #telicon p, #mailicon p{
  color:white;
  text-align: inherit;

  font-size: 1.25rem;
    color: white;
    text-align: inherit;
    margin-top: -4px;
}


#telicon p{
    margin-top: -2px;
}

#mobilicon:hover, #telicon:hover, #mailicon:hover{
  background-color:white;
}
#mobilicon:hover p, #telicon:hover p, #mailicon:hover p{
  font-size:150%;
  color:#697b8c;
  text-align: inherit;
}
#mobilicon-activ, #telicon-activ, #mailicon-activ{
  width:40px;
  height:40px;
  position:relative;
  float:left;
  margin:40px 0px 0px 40px;
  z-index:10;
  align-items: center;
  justify-content: center;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background-color:#B8C9D8;
  text-align: center;
  vertical-align: middle;
  line-height: 44px;
}
#telicon-activ, #mailicon-activ{
  display:none;
}
#mobilicon-activ{
  display:block;
}
#mobilicon-activ p, #telicon-activ p, #mailicon-activ p{
  font-size:150%;
  color:#697b8c;
  text-align: inherit;
}

#number{
  width:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:block;
}
#number-mobil{ 
  display:none;
}
#avatar{
  width:auto;
  height:300px;
  max-height:50%;
  position:absolute;
  right:5%;
  bottom:0px;
}
#avatar img{
  height:100%;
}
#bubble1-text p, #bubble2-text p, #bubble3-text p, #bubble4-text p, #bubble5-text p, #bubble6-text p, #bubble7-text p, #bubble8-text p{
  text-align:inherit;
}
#bubble1-text, #bubble2-text, #bubble3-text, #bubble4-text, #bubble5-text, #bubble6-text, #bubble7-text, #bubble8-text{
  width:auto;
  height:auto;
  position:relative;
  float:left;
  margin:20px;
  z-index:10;
}
#bubble1-arrow, #bubble3-arrow, #bubble5-arrow, #bubble7-arrow{
  width:0px;
  height:0px;
  border-style:solid;
  border-width:50px 0px 0px 50px;
  border-color:#B8C9D8 transparent transparent transparent;
  position:absolute;
  bottom:-25px;
  right:0px;
  z-index:1;
}
#bubble1, #bubble2, #bubble3, #bubble4, #bubble5, #bubble6, #bubble7, #bubble8{
  width:auto;
  height:auto;
  background-color:#B8C9D8;
  position:absolute;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
#bubble2-arrow, #bubble4-arrow, #bubble6-arrow, #bubble8-arrow{
  width:0px;
  height:0px;
  border-style:solid;
  border-width:0px 50px 50px 0px;
  border-color: transparent transparent #B8C9D8 transparent;
  position:absolute;
  bottom:0px;
  right:-25px;
  z-index:1;
}
#bubble1{
  top: -140px;
  right: 225px;
  left: -225px;
}
#bubble2{
  top: 0px;
  right: 350px;
  left: -350px;
}
#bubble3{
  top: -140px;
  right: 225px;
  left: -225px;
}
#bubble4{
  top: -40px;
  right: 350px;
  left: -350px;
}
#bubble5{
  top: -140px;
  right: 225px;
  left: -225px;
}
#bubble6{
  top: 0px;
  right: 350px;
  left: -350px;
}
#bubble7{
  top: -160px;
  right: 225px;
  left: -225px;
}
#bubble8{
  top: 0px;
  right: 350px;
  left: -350px;
}
#back2toplink{
  float:left;
  margin:36px 0px 0px 40px;
}
#impressumslink{
  float:right;
  margin:36px 40px 0px 0px;
}
#agblink{
  float:right;
  margin:30px 40px 0px 0px;
}
#header{
  width:100%;
  height:120px;
  position:absolute;
  z-index:99;
  background-color:white;
  border-bottom:solid 3px #556778;
}
#logo{
  position:absolute;
  margin:20px 0px 0px 40px;
  width:auto;
  height:auto;
}
#logo img{
  float:left;
  width:200px;
  height:auto;
}
#menu{
  width:auto;
  margin:48px 40px 0px 0px;
  float:right;
}
#menu ul{
  margin:0px;
  padding:0px; 
  list-style-type:none;
  list-style-image:none;
}
#menu li{
  list-style-position:inside;
  float:left;
}
#menu ul li a{
  -moz-font-feature-settings:"smcp" 1;
  -ms-font-feature-settings:"smcp" 1;
  -o-font-feature-settings:"smcp" 1;
  -webkit-font-feature-settings:"smcp" 1;
  font-feature-settings:"smcp" 1;
  font-variant:small-caps;
  text-decoration:none;
  font-size:112%;
  font-family: 'Arvo';
  font-weight: normal;
  font-style: normal;
  letter-spacing: 1px;
  margin-left:20px;
  color:#697b8c;

}

#menu ul li a span{
  font-size:90% !important;
}

#menu ul li a:hover, #menu ul li.current_page_item a{
  text-decoration:underline;
}
#headershadowline{
  width:100%;
  height:10px;
  background-color:#B8C9D8;
  position:absolute;
  bottom:0px;
}
#downarrow{
  width:60px;
  height:30px;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0px;
  right:0px;
  bottom:40px;
  background-image:url(images/downarrow.svg);
  background-repeat: no-repeat;
}
#downarrow:hover{
  width:72px;
  height:36px;
  bottom:37px;
}
#kontaktinfo{
  position:absolute;
  width:auto;
  max-width:call(100% - 80px);
  height:auto;
  background-color:white;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  z-index:99;
  top:40px;
  left:40px;
  padding:20px;
}
#kontaktinfo-mobil{
  display:none;
}

#kontaktinfo p a, #kontaktinfo-mobil p a{
  text-decoration:underline;
}
#mapwrapper{
  width:100%;
  height:calc(100% - 80px);
}
#google-map{
  height:100%;
  width:100%;
}
.gm-style-iw *{
  display:block;
  width:100%;
}
.gm-style-iw h4, .gm-style-iw p{
  margin:0;
  padding:0;
}
.gm-style-iw a{
  color:#4272db;
}
#introbox{
  position:relative;
  height:auto;
  width:50vh;
  margin:0px auto;
}

#centerbox{
  height:50vh;
  width:calc(80vh + 80px);
  max-width:calc(100vw - 160px);
  margin:0px auto;
}
#textbox{
  position:relative;
  float:left;
  height:auto;
  width:30vh;
  top:50%;
  -webkit-transform:translate(-50%);
  -ms-transform:translate(-50%);
  -moz-transform:translate(-50%);
  transform:translateY(-50%);
}
#bildbox{
  float:right;
  height:50vh;
  width:50vh;
}
#bildbox img{
  max-height:100%;
}
#seite-arbeit{
  position:relative;
  float:left;
  width:100%;
  height:100%;
  background-color:white;
  overflow-x:hidden;
}
::-webkit-scrollbar{
  width: 0px;	
}
::-webkit-scrollbar-track{
  background-color:#B8C9D8;
}
::-webkit-scrollbar-thumb{
  background-color:#697b8c;
}
#impwrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  z-index:99;
  background-color:rgba(57, 67, 76, 0.75);
  display:none;
}
#impressum{
  width:calc(100% - 160px);
  height:calc(100% - 160px);
  position:relative;
  margin:80px;
  background-color:white;
  border-radius:10px;
}
#imptextwrapper{
  position: absolute;
  height: calc(100% - 160px);
  width: calc(100% - 80px);
  margin: 120px 40px 40px 40px;
  overflow-y: scroll;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#imptext{
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}
#imptext h2{
  margin:40px 0px 0px 0px;
}
#imptext ul{
  list-style-type: disc;
  list-style-position: outside;
  margin-left:20px;
}
#impwrapper h1{
  position:relative;
  float:left;
  margin:44px 0px 40px 40px;
}
#closecross{
  position:absolute;
  top:40px;
  right:40px;
  width:40px;
  height:40px;
  background-image:url(images/close.svg);
  background-repeat:no-repeat;
  cursor:pointer;
}
#closecross:hover{
  background-image:url(images/close-over.svg);
}
#facebook{
  width:20px;
  height:20px;
  position:absolute;
  right:40px;
  top:33px;
  display:none;
}
#kontaktinfo h1{
  margin:-4px 0px 40px 0px;
}

#beschwerdelink{
  float:right;
  margin:36px 40px 0px 0px;
}
#beswrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  z-index:99;
  background-color:rgba(57, 67, 76, 0.75);
  display:none;
}
#beschwerde{
  width:calc(50% - 160px);
  height:auto;
  position:relative;
  float:right;
  margin:80px;
  background-color:white;
  border-radius:10px;
}
#bestextwrapper{
  position: relative;
  height: auto;
  width: calc(100% - 80px);
  margin: 160px 40px 40px 40px;
}
#bestext{
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  margin-bottom: 40px;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}
#bestext a{
  text-decoration:underline;
}
#beswrapper h1{
  position:relative;
  float:left;
  margin:44px 80px 10px 40px;
}
#beswrapper h2{
  position:relative;
  clear: both;
  float:left;
  margin:0px 80px 20px 40px;
}

/* ==========================================================================
   Responsive Anpassungen
   ========================================================================== */


/*  -----------   Laptop   -----------  */
@media only screen and (max-width: 1366px) {
/* Styles */

}/* ----------- Ende ----------- */






/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 420px) {
/* Styles */
p{
  font-size:80%;
}

h1{
  font-size:160%;
}
  
h2{
  font-size:120%;
}
#seite-start{
  height:calc(100% - 62px);
  margin:62px 0px 0px 0px;
}
#mobilicon, #telicon, #mailicon{
  width:24px;
  height:24px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  border:solid 2px white;
  line-height:29px;
}
#mobilicon p, #telicon p, #mailicon p{
  font-size:100%;
}
#mobilicon:hover p, #telicon:hover p, #mailicon:hover p{
  font-size:100%;
}
#mobilicon-activ, #telicon-activ, #mailicon-activ{
  width:28px;
  height:28px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  line-height:32px;
}
#mobilicon-activ p, #telicon-activ p, #mailicon-activ p{
  font-size:100%;
}
#bubble1-text, #bubble2-text, #bubble3-text, #bubble4-text, #bubble5-text, #bubble6-text, #bubble7-text, #bubble8-text{
  margin:10px;
  z-index:10;
}
#bubble1, #bubble2, #bubble3, #bubble4, #bubble5, #bubble6, #bubble7, #bubble8{
  width:135px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#bubble1-arrow, #bubble3-arrow, #bubble2-arrow, #bubble4-arrow, #bubble5-arrow, #bubble6-arrow, #bubble7-arrow, #bubble8-arrow{
  border-width:0px 50px 50px 0px;
  border-color: transparent transparent #B8C9D8 transparent;
  bottom:0px;
  right:-25px;
}
#bubble1{
  top: -35px;
  right: 180px;
  left: -180px;
}
#bubble2{
  top: -35px;
  right: 180px;
  left: -180px;
}
#bubble3{
  top: -20px;
  right: 180px;
  left: -180px;
}
#bubble4{
  top: -70px;
  right: 180px;
  left: -180px;
}
#bubble5{
  top: -20px;
  right: 180px;
  left: -180px;
}
#bubble6{
  top: -35px;
  right: 180px;
  left: -180px;
}
#bubble7{
  top: -50px;
  right: 180px;
  left: -180px;
}
#bubble8{
  top: -20px;
  right: 180px;
  left: -180px;
}
#downarrow{
  width:30px;
  height:15px;
  bottom:20px;
}
#downarrow:hover{
  width:30px;
  height:15px;
  bottom:20px;
}
#avatar{
  width:150px;
  height:150px;
  right:-35px;
}
#number{
  display:none;
}
#number-mobil{ 
  width:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:block;
  line-height:100%;
}
#header{
  height:60px;
  border-bottom:solid 2px #556778;
}
#logo{
  margin:10px 0px 0px 20px;
  width:34px;
  overflow:hidden;
}
#logo img{
  width:100px;
}
#headershadowline{
  height:5px;  
} 
#kontaktinfo{
  display:none;
} 
#kontaktinfo-mobil{
  position:absolute;
  width:auto;
  max-width: calc(100% - 60px);
  height:auto;
  background-color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  z-index:99;
  top:20px;
  left:20px;
  padding:10px;
  display:block;
}
#kontaktinfo-mobil h1{
  margin:-7px 0px 20px 0px;
}  
#mapwrapper{
  height: calc(100% - 40px);
} 
#footer{
  height:40px;
} 
#footer p{
  font-size:64%;
}
#back2toplink{
  margin:15px 0px 0px 20px;
}		
#impressumslink{
  margin:15px 20px 0px 0px;
}
#menu{
  margin:25px 20px 0px 0px;
}
#menu ul li a{
  font-size:75%;
  margin-left:10px;
}
#facebook{
  width:10px;
  height:10px;
  right:20px;
  top:16px;
}
#closecross{
  top:20px;
  right:20px;
  width:20px;
  height:20px;
}	
#introbox{
  height: auto;
  width: calc(100% - 120px);
  margin: 0px 60px;
}
#centerbox{
  position: relative;
  height:auto;
  display:flex;
  flex-direction: column;
  width: calc(100vw - 120px);
  max-width: calc(100vw - 120px);
  margin: 0px auto;
}
#textbox{
  height: auto;
  width: 100%;
  margin: 30px 0px 0px 0px;
  top: 0px;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  -moz-transform: translate(0px);
  transform: translateY(0px);
}
#bildbox{
  height: calc(100vw - 120px);
  width: 100%;
}
#bildbox img{
  max-height:100%;
}
#impressum{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  margin:40px;
  border-radius:5px;
}
#imptextwrapper{
  position: absolute;
  height: calc(100% - 80px);
  width: calc(100% - 40px);
  margin: 60px 20px 20px 20px;
}
::-webkit-scrollbar{
  width: 5px;	
}
#imptext{
  width: calc(100% - 15px);
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#imptext h2{
  margin:30px 0px 0px 0px;
}
#impwrapper h1{
  margin:13px 0px 20px 20px;
}	
#beschwerdelink{
  float:right;
  margin: 15px 20px 0px 0px;
}
#beschwerde{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  float: none;
  margin:40px;
  border-radius:5px;
}
#bestextwrapper{
  position: absolute;
  height: calc(100% - 200px);
  width: calc(100% - 40px);
  margin: 180px 20px 20px 20px;
  overflow-y: scroll;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#bestext{
  width: calc(100% - 15px);
  margin-bottom: 0px;
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#beswrapper h1{
  margin:24px 40px 5px 20px;
}
#beswrapper h2{
  margin:0px 40px 10px 20px;
}
}/* ----------- Ende ----------- */




/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 421px)
and (max-width : 740px){
/* Styles */
p{
  font-size:80%;
}

h1{
  font-size:160%;
}
  
h2{
  font-size:120%;
}
#seite-start{
  height:calc(100% - 62px);
  margin:62px 0px 0px 0px;
}
#mobilicon, #telicon, #mailicon{
  width:24px;
  height:24px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  border:solid 2px white;
  line-height:29px;
}
#mobilicon p, #telicon p, #mailicon p{
  font-size:100%;
}
#mobilicon:hover p, #telicon:hover p, #mailicon:hover p{
  font-size:100%;
}
#mobilicon-activ, #telicon-activ, #mailicon-activ{
  width:28px;
  height:28px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  line-height:32px;
}
#mobilicon-activ p, #telicon-activ p, #mailicon-activ p{
  font-size:100%;
}

#number{
  top:50%;
  transform: translate(-50%, -50%);
}
#bubble1-text, #bubble2-text, #bubble3-text, #bubble4-text, #bubble5-text, #bubble6-text, #bubble7-text, #bubble8-text{
  margin:10px;
  z-index:10;
}
#bubble1, #bubble2, #bubble3, #bubble4, #bubble5, #bubble6, #bubble7, #bubble8{
  width:300px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#bubble1-arrow, #bubble2-arrow, #bubble3-arrow, #bubble4-arrow, #bubble5-arrow, #bubble6-arrow, #bubble7-arrow, #bubble8-arrow{
  border-width:50px 0px 0px 50px;
  bottom:-25px;
  right:0px;
  border-color: #B8C9D8 transparent transparent transparent;
}
#bubble1{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble2{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble3{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble4{
  top:-100px;
  right:270px;
  left:-270px;
}
#bubble5{
  top:-70px;
  right:270px;
  left:-270px;
}
#bubble6{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble7{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble8{
  top:-70px;
  right:270px;
  left:-270px;
} 
#downarrow{
  width:30px;
  height:15px;
  bottom:20px;
}
#downarrow:hover{
  width:30px;
  height:15px;
  bottom:20px;
}
#avatar{
  width:150px;
  height:150px;
  right:-35px;
}

#header{
  height:60px;
  border-bottom:solid 2px #556778;
}
#logo{
  margin:10px 0px 0px 20px;
  width:34px;
  overflow:hidden;
}
#logo img{
  width:100px;
}
#headershadowline{
  height:5px;  
} 
#kontaktinfo{
  display:none;
} 
#kontaktinfo-mobil{
  position:absolute;
  width:auto;
  max-width: calc(100% - 60px);
  height:auto;
  background-color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  z-index:99;
  top:20px;
  left:20px;
  padding:10px;
  display:block;
}
#kontaktinfo-mobil h1{
  margin:-7px 0px 20px 0px;
}  
#mapwrapper{
  height: calc(100% - 40px);
} 
#footer{
  height:40px;
} 
#footer p{
  font-size:64%;
}
#back2toplink{
  margin:15px 0px 0px 20px;
}		
#impressumslink{
  margin:15px 20px 0px 0px;
}
#menu{
  margin:25px 20px 0px 0px;
}
#menu ul li a{
  font-size:75%;
  margin-left:10px;
}
#facebook{
  width:10px;
  height:10px;
  right:20px;
  top:16px;
}
#closecross{
  top:20px;
  right:20px;
  width:20px;
  height:20px;
}	
#introbox{
  position: relative;
  height: auto;
  width: calc(80vw - 80px);
  margin: 0px auto 30px auto;
}
#centerbox{
  height: calc(40vw - 60px);
  width: calc(80vw - 80px);
  max-width: calc(80vw - 80px);
  margin: 0px auto 30px auto;
}
#textbox{
  position: relative;
  float: left;
  height: auto;
  width: calc(40vw - 60px);
  top: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -moz-transform: translate(-50%);
  transform: translateY(-50%);
}
#bildbox{
  float: right;
  height: calc(40vw - 60px);
  width: calc(40vw - 60px);
}
#bildbox img{
  max-height:100%;
}
#impressum{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  margin:40px;
  border-radius:5px;
}
#imptextwrapper{
  position: absolute;
  height: calc(100% - 80px);
  width: calc(100% - 40px);
  margin: 60px 20px 20px 20px;
}
::-webkit-scrollbar{
  width: 5px;	
}
#imptext{
  width: calc(100% - 15px);
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#imptext h2{
  margin:30px 0px 0px 0px;
}
#impwrapper h1{
  margin:13px 0px 20px 20px;
}
  
#beschwerdelink{
  float:right;
  margin:15px 20px 0px 0px;
}
#beschwerde{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  float: none;
  position:relative;
  margin:40px;
  border-radius:5px;
}
#bestextwrapper{
  position: absolute;
  height: calc(100% - 140px);
  width: calc(100% - 40px);
  margin: 120px 20px 20px 20px;
  overflow-y: scroll;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#bestext{
  width: calc(100% - 15px);
  margin-bottom: 0px;
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#beswrapper h1{
  margin:24px 40px 5px 20px;
}
#beswrapper h2{
  margin:0px 40px 10px 20px;
}

}/* ----------- Ende ----------- */







/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
 
}/* ----------- Ende ----------- */



/* iPhone 6 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */

}/* ----------- Ende ----------- */



/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

}/* ----------- Ende ----------- */



/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1024px)
and (max-device-width : 1680px) {
/* Styles */
::-webkit-scrollbar{
  width: 5px;	
}
#imptext{
  width:calc(100% - 35px);
  -moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
}
#bestext{
  width:calc(100% - 35px);
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#downarrow{
  bottom: 30px;
}
#avatar{
  height:200px;
  right:-20px;
}
#bubble1-arrow, #bubble3-arrow, #bubble5-arrow, #bubble7-arrow{
  border-width: 0px 50px 50px 0px;
  border-color: transparent transparent #B8C9D8 transparent;
  bottom: 0px;
  right: -25px;
}
#bubble1{
  top: -60px;
  right: 240px;
  left: -240px;
}
#bubble2{
  top: -40px;
  right: 240px;
  left: -240px;
}
#bubble3{
  top: -40px;
  right: 240px;
  left: -240px;
}
#bubble4{
  top: -80px;
  right: 240px;
  left: -240px;
}
#bubble5{
  top: -20px;
  right: 240px;
  left: -240px;
}
#bubble6{
  top: -60px;
  right: 240px;
  left: -240px;
}
#bubble7{
  top: -60px;
  right: 240px;
  left: -240px;
}
#bubble8{
  top: -20px;
  right: 240px;
  left: -240px;
}  
#beschwerde{
  width:calc(50% - 80px);
  height:calc(100% - 80px);
  float: none;
  position:relative;
  margin:40px;
  border-radius:5px;
}
#bestextwrapper{
  position: absolute;
  height: calc(100% - 160px);
  width: calc(100% - 40px);
  margin: 140px 20px 20px 20px;
  overflow-y: scroll;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#bestext{
  width: calc(100% - 15px);
  margin-bottom: 0px;
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#beswrapper h1{
  margin:24px 40px 5px 20px;
}
#beswrapper h2{
  margin:0px 40px 10px 20px;
}
}/* ----------- Ende ----------- */



/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */

}/* ----------- Ende ----------- */


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
#number{
  display:none;
}
#number-mobil{
  width:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:block;
  line-height:100%;
}
#downarrow{
  bottom: 30px;
}
#avatar{
  height:225px;
  right:-30px;
} 
#bubble1{
  top: -150px;
  right: 165px;
  left: -165px;
}
#bubble2{
  top: -40px;
  right: 280px;
  left: -280px;
}
#bubble3{
  top: -150px;
  right: 165px;
  left: -165px;
}
#bubble4{
  top: -80px;
  right: 280px;
  left: -280px;
}
#bubble5{
  top: -150px;
  right: 165px;
  left: -165px;
}
#bubble6{
  top: -40px;
  right: 280px;
  left: -280px;
}
#bubble7{
  top: -170px;
  right: 165px;
  left: -165px;
}
#bubble8{
  top: -40px;
  right: 280px;
  left: -280px;
}
#introbox{
  height: auto;
  width: 50vw;
  margin: 0px auto;
}
#centerbox{
  position: relative;
  height: auto;
  display:flex;
  flex-direction: column;
  width: 50vw;
  margin: 0px auto 0px auto;
}
#textbox{
  height: auto;
  width: 100%;
  margin: 40px 0px 0px 0px;
  top: 0px;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  -moz-transform: translate(0px);
  transform: translateY(0px);
}
#bildbox{
  height: 50vw;
  width: 50vw;
}
::-webkit-scrollbar{
  width: 5px;	
}
#imptext{
  width:calc(100% - 35px);
  -moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
}
#beschwerde{
  width:calc(100% - 160px);
  height:auto;
  position:relative;
  float:right;
  margin:80px;
  background-color:white;
  border-radius:10px;
}
#bestextwrapper{
  position: relative;
  float:left;
  height: auto;
  width: calc(100% - 80px);
  margin: 0px 40px 40px 40px;
}
#bestext{
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  margin-bottom:0px;  
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}
}/* ----------- Ende ----------- */
	
	
	
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
::-webkit-scrollbar{
  width: 5px;	
}
#downarrow{
  bottom: 30px;
}
#avatar{
  height:200px;
  right:-20px;
}
#bubble1-arrow, #bubble3-arrow, #bubble5-arrow, #bubble7-arrow{
  border-width: 0px 50px 50px 0px;
  border-color: transparent transparent #B8C9D8 transparent;
  bottom: 0px;
  right: -25px;
}
#bubble1{
  top: -60px;
  right: 240px;
  left: -240px;
}
#bubble2{
  top: -40px;
  right: 240px;
  left: -240px;
}
#bubble3{
  top: -40px;
  right: 240px;
  left: -240px;
}
#bubble4{
  top: -80px;
  right: 240px;
  left: -240px;
}
#bubble5{
  top: -20px;
  right: 240px;
  left: -240px;
}
#bubble6{
  top: -60px;
  right: 240px;
  left: -240px;
}
#bubble7{
  top: -60px;
  right: 240px;
  left: -240px;
}
#bubble8{
  top: -20px;
  right: 240px;
  left: -240px;
}  
#imptext{
  width:calc(100% - 35px);
  -moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
}
#beschwerde{
  width:calc(50% - 80px);
  height:auto;
  position:relative;
  float:right;
  margin:80px;
  background-color:white;
  border-radius:10px;
}
#bestextwrapper{
  position: relative;
  height: auto;
  width: calc(100% - 80px);
  margin: 180px 40px 40px 40px;
}
#bestext{
  position: relative;
  float: left;
  height: auto;
  width: 100%;
  margin-bottom: 40px;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}
  
		
		
/* Samsung Galaxy Tab 10 (landscape) ----------- */		  
@media only screen
and (min-device-width : 800px)
and (max-device-width : 1280px)
and (orientation : landscape){
/* Styles */	
p{
  font-size:80%;
}

h1{
  font-size:160%;
}
  
h2{
  font-size:120%;
}
#seite-start{
  height:calc(100% - 62px);
  margin:62px 0px 0px 0px;
}
#mobilicon, #telicon, #mailicon{
  width:24px;
  height:24px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  border:solid 2px white;
  line-height:29px;
}
#mobilicon p, #telicon p, #mailicon p{
  font-size:100%;
}
#mobilicon:hover p, #telicon:hover p, #mailicon:hover p{
  font-size:100%;
}
#mobilicon-activ, #telicon-activ, #mailicon-activ{
  width:28px;
  height:28px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  line-height:32px;
}
#mobilicon-activ p, #telicon-activ p, #mailicon-activ p{
  font-size:100%;
}

#number{
  top:50%;
  transform: translate(-50%, -50%);
}
#bubble1-text, #bubble2-text, #bubble3-text, #bubble4-text, #bubble5-text, #bubble6-text, #bubble7-text, #bubble8-text{
  margin:10px;
  z-index:10;
}
#bubble1, #bubble2, #bubble3, #bubble4, #bubble5, #bubble6, #bubble7, #bubble8{
  width:300px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#bubble1-arrow, #bubble2-arrow, #bubble3-arrow, #bubble4-arrow, #bubble5-arrow, #bubble6-arrow, #bubble7-arrow, #bubble8-arrow{
  border-width:50px 0px 0px 50px;
  bottom:-25px;
  right:0px;
  border-color: #B8C9D8 transparent transparent transparent;
}
#bubble1{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble2{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble3{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble4{
  top:-100px;
  right:270px;
  left:-270px;
}
#bubble5{
  top:-70px;
  right:270px;
  left:-270px;
}
#bubble6{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble7{
  top:-85px;
  right:270px;
  left:-270px;
}
#bubble8{
  top:-70px;
  right:270px;
  left:-270px;
} 
#downarrow{
  width:30px;
  height:15px;
  bottom:20px;
}
#downarrow:hover{
  width:30px;
  height:15px;
  bottom:20px;
}
#avatar{
  width:150px;
  height:150px;
  right:-35px;
}

#header{
  height:60px;
  border-bottom:solid 2px #556778;
}
#logo{
  margin:10px 0px 0px 20px;
  width:34px;
  overflow:hidden;
}
#logo img{
  width:100px;
}
#headershadowline{
  height:5px;  
} 
#kontaktinfo{
  display:none;
} 
#kontaktinfo-mobil{
  position:absolute;
  width:auto;
  max-width: calc(100% - 60px);
  height:auto;
  background-color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  z-index:99;
  top:20px;
  left:20px;
  padding:10px;
  display:block;
}
#kontaktinfo-mobil h1{
  margin:-7px 0px 20px 0px;
}  
#mapwrapper{
  height: calc(100% - 40px);
} 
#footer{
  height:40px;
} 
#footer p{
  font-size:64%;
}
#back2toplink{
  margin:15px 0px 0px 20px;
}		
#impressumslink{
  margin:15px 20px 0px 0px;
}
#menu{
  margin:25px 20px 0px 0px;
}
#menu ul li a{
  font-size:75%;
  margin-left:10px;
}
#facebook{
  width:10px;
  height:10px;
  right:20px;
  top:16px;
}
#closecross{
  top:20px;
  right:20px;
  width:20px;
  height:20px;
}	
#introbox{
  position: relative;
  height: auto;
  width: calc(80vw - 80px);
  margin: 0px auto 30px auto;
}
#centerbox{
  height: calc(40vw - 60px);
  width: calc(80vw - 80px);
  max-width: calc(80vw - 80px);
  margin: 0px auto 30px auto;
}
#textbox{
  position: relative;
  float: left;
  height: auto;
  width: calc(40vw - 60px);
  top: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -moz-transform: translate(-50%);
  transform: translateY(-50%);
}
#bildbox{
  float: right;
  height: calc(40vw - 60px);
  width: calc(40vw - 60px);
}
#bildbox img{
  max-height:100%;
}
#impressum{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  margin:40px;
  border-radius:5px;
}
#imptextwrapper{
  position: absolute;
  height: calc(100% - 80px);
  width: calc(100% - 40px);
  margin: 60px 20px 20px 20px;
}
::-webkit-scrollbar{
  width: 5px;	
}
#imptext{
  width: calc(100% - 15px);
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#imptext h2{
  margin:30px 0px 0px 0px;
}
#impwrapper h1{
  margin:13px 0px 20px 20px;
}
  
#beschwerdelink{
  float:right;
  margin:15px 20px 0px 0px;
}
#beschwerde{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  float: none;
  position:relative;
  margin:40px;
  border-radius:5px;
}
#bestextwrapper{
  position: absolute;
  height: calc(100% - 140px);
  width: calc(100% - 40px);
  margin: 120px 20px 20px 20px;
  overflow-y: scroll;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#bestext{
  width: calc(100% - 15px);
  margin-bottom: 0px;
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#beswrapper h1{
  margin:24px 40px 5px 20px;
}
#beswrapper h2{
  margin:0px 40px 10px 20px;
}
}/* ----------- Ende ----------- */
	
	  
	  
	  
/* Samsung Galaxy Tab 10 (portrait) ----------- */		  
@media only screen
and (min-device-width : 800px)
and (max-device-width : 1280px)
and (orientation : portrait){ 
/* Styles */					  
p{
  font-size:80%;
}

h1{
  font-size:160%;
}
  
h2{
  font-size:120%;
}
#seite-start{
  height:calc(100% - 62px);
  margin:62px 0px 0px 0px;
}
#mobilicon, #telicon, #mailicon{
  width:24px;
  height:24px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  border:solid 2px white;
  line-height:29px;
}
#mobilicon p, #telicon p, #mailicon p{
  font-size:100%;
}
#mobilicon:hover p, #telicon:hover p, #mailicon:hover p{
  font-size:100%;
}
#mobilicon-activ, #telicon-activ, #mailicon-activ{
  width:28px;
  height:28px;
  margin:20px 0px 0px 20px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  line-height:32px;
}
#mobilicon-activ p, #telicon-activ p, #mailicon-activ p{
  font-size:100%;
}
#bubble1-text, #bubble2-text, #bubble3-text, #bubble4-text, #bubble5-text, #bubble6-text, #bubble7-text, #bubble8-text{
  margin:10px;
  z-index:10;
}
#bubble1, #bubble2, #bubble3, #bubble4, #bubble5, #bubble6, #bubble7, #bubble8{
  width:135px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#bubble1-arrow, #bubble3-arrow, #bubble2-arrow, #bubble4-arrow, #bubble5-arrow, #bubble6-arrow, #bubble7-arrow, #bubble8-arrow{
  border-width:0px 50px 50px 0px;
  border-color: transparent transparent #B8C9D8 transparent;
  bottom:0px;
  right:-25px;
}
#bubble1{
  top: -35px;
  right: 180px;
  left: -180px;
}
#bubble2{
  top: -35px;
  right: 180px;
  left: -180px;
}
#bubble3{
  top: -20px;
  right: 180px;
  left: -180px;
}
#bubble4{
  top: -70px;
  right: 180px;
  left: -180px;
}
#bubble5{
  top: -20px;
  right: 180px;
  left: -180px;
}
#bubble6{
  top: -35px;
  right: 180px;
  left: -180px;
}
#bubble7{
  top: -50px;
  right: 180px;
  left: -180px;
}
#bubble8{
  top: -20px;
  right: 180px;
  left: -180px;
}
#downarrow{
  width:30px;
  height:15px;
  bottom:20px;
}
#downarrow:hover{
  width:30px;
  height:15px;
  bottom:20px;
}
#avatar{
  width:150px;
  height:150px;
  right:-35px;
}
#number{
  display:none;
}
#number-mobil{ 
  width:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:block;
  line-height:100%;
}
#header{
  height:60px;
  border-bottom:solid 2px #556778;
}
#logo{
  margin:10px 0px 0px 20px;
  width:34px;
  overflow:hidden;
}
#logo img{
  width:100px;
}
#headershadowline{
  height:5px;  
} 
#kontaktinfo{
  display:none;
} 
#kontaktinfo-mobil{
  position:absolute;
  width:auto;
  max-width: calc(100% - 60px);
  height:auto;
  background-color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  z-index:99;
  top:20px;
  left:20px;
  padding:10px;
  display:block;
}
#kontaktinfo-mobil h1{
  margin:-7px 0px 20px 0px;
}  
#mapwrapper{
  height: calc(100% - 40px);
} 
#footer{
  height:40px;
} 
#footer p{
  font-size:64%;
}
#back2toplink{
  margin:15px 0px 0px 20px;
}		
#impressumslink{
  margin:15px 20px 0px 0px;
}
#menu{
  margin:25px 20px 0px 0px;
}
#menu ul li a{
  font-size:75%;
  margin-left:10px;
}
#facebook{
  width:10px;
  height:10px;
  right:20px;
  top:16px;
}
#closecross{
  top:20px;
  right:20px;
  width:20px;
  height:20px;
}	
#introbox{
  height: auto;
  width: calc(100% - 120px);
  margin: 0px 60px;
}
#centerbox{
  position: relative;
  height:auto;
  display:flex;
  flex-direction: column;
  width: calc(100vw - 120px);
  max-width: calc(100vw - 120px);
  margin: 0px auto;
}
#textbox{
  height: auto;
  width: 100%;
  margin: 30px 0px 0px 0px;
  top: 0px;
  -webkit-transform: translate(0px);
  -ms-transform: translate(0px);
  -moz-transform: translate(0px);
  transform: translateY(0px);
}
#bildbox{
  height: calc(100vw - 120px);
  width: 100%;
}
#bildbox img{
  max-height:100%;
}
#impressum{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  margin:40px;
  border-radius:5px;
}
#imptextwrapper{
  position: absolute;
  height: calc(100% - 80px);
  width: calc(100% - 40px);
  margin: 60px 20px 20px 20px;
}
::-webkit-scrollbar{
  width: 5px;	
}
#imptext{
  width: calc(100% - 15px);
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#imptext h2{
  margin:30px 0px 0px 0px;
}
#impwrapper h1{
  margin:13px 0px 20px 20px;
}	
#beschwerdelink{
  float:right;
  margin: 15px 20px 0px 0px;
}
#beschwerde{
  width:calc(100% - 80px);
  height:calc(100% - 80px);
  float: none;
  margin:40px;
  border-radius:5px;
}
#bestextwrapper{
  position: absolute;
  height: calc(100% - 180px);
  width: calc(100% - 40px);
  margin: 160px 20px 20px 20px;
  overflow-y: scroll;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#bestext{
  width: calc(100% - 15px);
  margin-bottom: 0px;
  -moz-column-count:1;
  -webkit-column-count:1;
  column-count:1;
}
#beswrapper h1{
  margin:24px 40px 5px 20px;
}
#beswrapper h2{
  margin:0px 40px 10px 20px;
}				  
}/* ----------- Ende ----------- */



.cc_container .cc_btn, .cc_container .cc_btn:visited{
  background-color: #697b8c !important;
  color: #000 !important;
}

.cc_container .cc_message{
  color: #697b8c !important;
}