/* ========================================================================= */
/* Bezirksübersicht - Bürgerämter */

.bezirk-map {position:relative;background:url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/pankow-karte.png) no-repeat 0px 10px;max-width:710px;width:100%; height:530px;  }

.cardtab{position:absolute;right:0px;bottom:0px;border:1px solid #acb;width:180px;line-height:26px;color:#476;padding:0px;  }

.cardtab1{width:100%;display:inline-block;border-bottom:1px solid #bdc;padding-left:7px;  background:#f4fff9;}
.cardtab2{width:100%;display:inline-block;border-bottom:1px solid #bdc; padding-left:7px; }

/* Bürgerämter */
.bezirk-subtitel { color:#000; font-size:20px;  margin:30px 0px 20px 0; }


.amttitel { color:#000; font-size:14px; padding: 4px 4px 4px 16px;}
.am-orange { background:hsla(40,80%,60%,1);  }
.am-rosa { background:hsla(360,70%,70%,1);  }
.am-violett { background:hsla(300,50%,60%,1);  }
.am-gruen { background:hsla(110,50%,60%,1); }


.servicetab{ margin:10px 0 40px;}


.servicetab1{line-height:15px;vertical-align:bottom;display:inline-block;width:120px;}
.servicetab2{margin-top:25px;vertical-align:top;display:inline-block;width:180px;}
.servicetab3{margin-top:25px;vertical-align:top;display:inline-block;width:280px;}




    
.servicemap1 { background: url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/thumbs/pankowortsteile.png) no-repeat 10px 10px; border:10px solid #ddd; width:115px; height:140px; display:inline-block; z-index:1; cursor: pointer; }
.servicemap1-hover { background: url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/pankowortsteile.png) no-repeat; width: 740px; height:840px; position:relative; top:-145px;z-index:20;left:0px; border:10px solid #ddd;z-index:120; }


  
.servicemap2 { background: url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/thumbs/pankowplz.png) no-repeat no-repeat 10px 10px; border:10px solid #ddd; width:115px; height:140px; display:inline-block;   }
.servicemap2-hover { background: url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/pankowplz.png) no-repeat; width: 474px; height:540px; position:fixed; top:-145px;z-index:120; left:0px;}


.servicemap3 { background: url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/thumbs/pankowparkraum.jpg) no-repeat 10px 10px; border:10px solid #ddd; width:115px; height:140px; display:inline-block;  }
.servicemap3-hover { background: url(/Aktuelle-News-Berlin-Pankow/Bilder/service/bezirk/pankowparkraum.jpg) no-repeat; width: 820px; height:812px; position:fixed; top:-145px;z-index:120; left:0px; }


.servicemap { height:160px;display:block; margin: 0 0 30px 0;  }
.servicemap-titel {vertical-align:top;margin:20px 0 0 10px; display:inline-block;width:50%; color:#222; }



       
    
.onclick-menu { position: relative; display: inline-block; }
.onclick-menu:focus .onclick-menu-content { display: block; }
.onclick-menu-content { position: relative; z-index: 1; display: none; }

.mapinfo { font-size:11px; margin: 0 0 20px 0px;  }


/*#map_canvas{border:3px solid#ece2e2;border-radius:1px;-moz-border-radius:1px;-khtml-border-radius:1px;-webkit-border-radius:1px;}
.map-content{margin:-15px 0 5px 0;padding:0px;display:inline-block;min-width:330px;}
.map-content h3{display:block;font:1.3em Helvetica,Arial,'sans-serif';line-height:1.4em;}
.pic-thumb{float:right;vertical-align:top;width:80px;margin:3px;padding:2px;border:1px solid#ddd;position:relative;top:-10px;}*/




/* ========================================================================= */
/* SOS */

div.sos {}

table.sos { width:100%;background: #fff; border:1px solid #aaa;border-bottom:none; margin:10px 0 40px; }  

table.sos td {width:40%; vertical-align:top;padding:4px 4px 4px 16px;border:none;border-bottom:1px solid #aaa; color:#222; }


div.sos div { font-size:14px;color:#000; padding: 4px 4px 4px 16px; }
.sostitel-rot{background:hsla(0,90%,70%,1);}
.sostitel-rosa{background:hsla(0,90%,90%,1);}
.sostitel-gelb{background:hsla(50,70%,65%,1);}
.sostitel-blau{background:hsla(180,60%,65%,1);}
.sostitel-marine{background:hsla(210,90%,65%,1);}
.sostitel-violett{background:hsla(260,70%,65%,1);}

/* ========================================================================= */
/* Wochenmärkte */

.marktart { color:#000; font-size:20px;  margin:20px 0px; }

.markttitel { color:#000; font-size:14px; padding: 4px 4px 4px 16px;}

.mt-orange { background:hsla(40,80%,60%,1);  }
.mt-lila { background:hsla(230,50%,60%,1 );  }
.mt-gruen { background:hsla(110,50%,60%,1); }
.mt-gelb { background:hsla(70,50%,60%,1);  }
.mt-tuerkis { background:hsla(180,50%,60%,1); }
.mt-violett { background:hsla(300,50%,60%,1);  }
.mt-rosa { background:hsla(360,70%,70%,1);  }

    
div.markt { border:1px solid #ddd;  margin:10px 0 40px; padding:15px; color:#222; vertical-align:top;  }  

.markt1 { width:120px;display:inline-block;  }
.markt2 { width:70%;display:inline-block;vertical-align:top; }

/* ========================================================================= */
/* News Gesundheit */

.newsbegin {  width: 100%; padding:10px 0px;margin:20px -15px;  display:block;  position:relative;top:10px;left:0px; font-size: 14px; font-weight: normal; text-transform: uppercase;border-top: 8px solid #eeeeee;  color:#347;   }

.newsend {  width: 100%; padding:10px 0px;margin: 0 -15px; display:block;  position:relative;top:10px;left:0px; border-top: 8px solid #eeeeee;  color:#347;   }
.newsdate { color:#444; display:inline-block; width: 120px; vertical-align:top; }
.newstitle { color:#444; display:inline-block; max-width:490px; width:100%; font-weight:bold; }
.newsfeed { color:#444; display:inline-block;  margin: 5px 0; max-width:490px; width:100%;  }
.newsdivider {  height:1px; border-top:1px dotted #ddd; margin: 0 -15px; }


/* ========================================================================= */
/* rss */

.rss-gesundheit {}
.rss-gesundheit ul { margin: 0px 25px 0px -15px; }
.rss-gesundheit ul li { margin-bottom: 20px; list-style-type:none; }
.rss-gesundheit ul li a.rsswidget { font-size:13px;font-weight:bold;text-decoration:none; color:#444; }
.rss-gesundheit ul li a.rsswidget:after {content: "\A"; white-space: pre; }
.rss-gesundheit ul li span.rss-date { font-size:10px;  }


/* ========================================================================= */
/* Aufklappanzeige */


.anzeigen-titel{background:hsla(70,70%,36%,.2);font-size:16px;font-weight:normal;color:#012;text-shadow:2px 2px 3px#fff;margin:10px 0px;padding:0px 15px;box-shadow:1px 1px 2px hsla(70,70%,36%,.2);}
.stellenanzeige{display:inline-block;width:180px;border:1px solid#ddd;border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;padding:5px;margin:3px;background:#fffff5;font-size:11px;line-height:14px;}



/* Anzeige immobilien */

/* wenn keine dyn aufklappfunktion */

.anzeigentext-offen {max-width:694px;width:100%; 
  height:110px; display:inline-block;position:relative; top:-10px;left:-10px; background:#fff;
  padding:15px 10px; border:3px solid hsla(40, 69%, 67%, 1); border-top:0px solid #fff;   
 -webkit-border-bottom-left-radius:4px;  -webkit-border-bottom-right-radius:4px; 
 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; 
  border-bottom-left-radius: 4px; border-bottom-right-radius:4px; 
  
  -webkit-transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
  -moz-transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
  -ms-transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
  transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
} 
  
/* wenn bei dyn aufklappfunktion */

.anzeigentext {
  height:0px;background:#fff; overflow:hidden;max-width:694px;width:100%; position:relative; top:-20px;left:0px; border:3px solid hsla(40, 69%, 67%, 0.0);border-top:0px solid hsla(50, 69%, 67%, 0.5); padding:0px 10px; font-size: 13px; 
  
  -webkit-transition:0.9s height, 0.9s border, 0.9s padding;
  -moz-transition:0.9s height, 0.9s border, 0.9s padding;
  -ms-transition:0.9s height, 0.9s border, 0.9s padding;
  transition:0.9s height, 0.9s border, 0.9s padding;
}

.anzeigentext.zugeklappt {
  height:130px; display:inline-block;position:relative; top:-20px;left:0px; background:#fff;
  padding:15px 10px; border:3px solid hsla(50, 69%, 57%, 1); border-top:0px solid #fff;   
 -webkit-border-bottom-left-radius:4px;  -webkit-border-bottom-right-radius:4px; 
 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; 
  border-bottom-left-radius: 4px; border-bottom-right-radius:4px; 
  
  -webkit-transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
  -moz-transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
  -ms-transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
  transition:0.7s height, 0.7s padding, 0.7s border, 0s visibility 0.7s;
} 


  

.vertikal-tab { background:hsla(50, 89%, 67%, 1); bor der:3px solid hsla(40, 69%, 47%, 1);
  /*border-bottom:0px solid #fff;*/   border-bottom:3px dashed hsla(50,69%,57%,0.7);   
  
 -webkit-border-top-left-radius:1px;  -webkit-border-top-right-radius:1px; 
 -moz-border-radius-topleft:1px; -moz-border-radius-topright:1px; 
  border-top-left-radius: 1px; border-top-right-radius:1px; 
 
  
  
  font-size: 12px; color:#222; text-decoration:none; padding:4px 20px;margin:8px 0px 0px 0px; max-width:694px;  width:100%;display:block; font-weight:bold;}

  
span.anzeige { display:inline-block; font-size:13px; color:hsla(220, 60%, 100%, 1);     background:hsla(50, 89%, 97%, 1);    position:relative;  font-style:italic; text-shadow: 0px 0px 3px #eee; color: hsla(220,69%,30%,1);  padding:14px 8px 10px;  margin:0px 10px 0 -16px;
  
  -webkit-border-radius:1px;  -webkit-border-radius:1px; 
 -moz-border-radius:1px; -moz-border-radius:1px; 
  border-radius: 1px; border-radius:1px; 
  
}


.anzeigentext div { margin: 0 0 5px 0px;  }
.anzeige-hinweis { float:right;right:0px;font-size:10px;font-weight:normal; color:hsla(50,69%,27%,1); position:relative;top:16px;   }
.arrow {
width: 0; height: 0;float:right; margin: 12px 20px 0 0; 
border-top: 12px solid hsla(50, 69%, 27%, 0.7);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position:relative; vertical-align:bottom;left:10px;top:6px;
}




/* ================================================================================== */
/* css Drehbanner */




.cssdrehbanner {width:700px; height:300px; display:block; vertical-align:top;border:1px solid #eee; padding:24px 4px;box-shadow: 0px 0px 3px #aaa;margin:0px; text-align:center;background:#fff; } 

.cssdrehbanner  img { position:relative;left:0px; } 



/* 1.Block */

#f1_container {   position: relative; left:0px; top:0px;display:inline-block;  margin: 0px  0px 0px 0; width: 200px; height: 250px; z-index: 1;   

perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000;
perspective-origin: 150% -150%; -o-perspective-origin: 150% -150%; -webkit-perspective-origin: 150% -150%; -moz-perspective-origin: 150% -150%; -o-perspective-origin: 150% -150%; }

#f1_card {  width: 100%; height: 100%;  
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;  -o-transform-style: preserve-3d; transform-style: preserve-3d; 

-webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;  }

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg) ; 
-webkit-box-shadow: -5px 5px 5px #aaa; -moz-box-shadow: -5px 5px 5px #aaa; box-shadow: -5px 5px 5px #aaa; }

.face {position: absolute;width: 100%;height: 100%; 
  -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;  -o-backface-visibility: hidden; backface-visibility: hidden; }

  
.face.back {  width: 200px; height: 250px; display: block; padding: 0px; 
  
  -webkit-transform: rotateY(180deg);  -moz-transform: rotateY(180deg);  -o-transform: rotateY(180deg); transform: rotateY(180deg);
  -webkit-box-sizing: border-box;-moz-box-sizing: border-box; -o-box-sizing: border-box;  box-sizing: border-box;  }
  
  
.face.inhaltback  { background:#fafafa;text-align:center; } 
.face.inhaltback img { margin:0px 0px 0px 10px; display:inline-block; width:100%; max-width:120px; }
.face.inhaltback .backtext {  display:inline-block; padding: 30px 0 0px 0 ;font-size:16px;color:#15a;text-decoration:none;font-weight:bold; } 
.face.inhaltback .backtext1 { padding: 10px 0 5px 0 ;font-size:12px;line-height:15px;color:#333; }


/* 2.Block */


#f2_container { position: relative;border:0px solid red; position: relative; left:0px; top:0px; display:inline-block; margin: 0px 0px 0px 0px; width: 200px; height: 250px; z-index: 1; 
/*
-o-perspective-origin: 150% -150%; -webkit-perspective-origin: 150% -150%; -moz-perspective-origin: 150% -150%; -o-perspective-origin: 150% -150%; */}

#f2_container { perspective: 1000px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; }

#f2_card { position: relative; width: 100%; height: 100%; 

-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; 
-webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; 
/*-webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;*/ }

#f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {  -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); 

/*-webkit-box-shadow: -5px 5px 5px #aaa; -moz-box-shadow: -5px 5px 5px #aaa; box-shadow: -5px 5px 5px #aaa;*/}


.face2 { position: absolute; width: 200px; height: 250px;   
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden; 
  -o-backface-visibility: hidden; 
  backface-visibility: hidden;}

.face2.back2 { display: block; padding: 0px; color: white; text-align: center; background:#15a;
  
  -webkit-transform: rotateY(180deg); -o-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);  
  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;  -o-box-sizing: border-box;  box-sizing: border-box; }
  
  
.face2.inhaltback2  { background:#15a;text-align:center; } 
.face2.inhaltback2 .backtext2 { background:#15a;padding: 50px 0 15px ;color:#fff;font-size:21px;line-height:28px; }


/* 3. Block */

#f3_container { border:0px solid red; position: relative; left:0px; top:0px; display:inline-block; margin: 0px 0 0px 0; width: 200px; height: 250px; z-index: 1; 

-o-perspective-origin: 150% -150%;-webkit-perspective-origin: 150% -150%; -moz-perspective-origin: 150% -150%;-o-perspective-origin: 150% -150%;}


#f3_container { perspective: 1000px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px;}

#f3_card {width: 100%; height: 100%; 

-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; 
-webkit-transition: 0.5s ease;-moz-transition: 0.5s ease; -o-transition: 0.5s ease;transition: 0.5s ease; 
-webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s;}

#f3_container:hover #f3_card, #f3_container.hover_effect #f3_card {  -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); 

-webkit-box-shadow: -5px 5px 5px #aaa; -moz-box-shadow: -5px 5px 5px #aaa; box-shadow: -5px 5px 5px #aaa;}

.face3 { position: absolute; width: 200px;height: 250px;
  
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden; 
  -o-backface-visibility: hidden; 
  backface-visibility: hidden;}

.face3.back3 { display: block; padding: 0px; color: white; text-align: center; background-color: #aaa;
  
  -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);  transform: rotateY(180deg);
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;   }
  
.face3.inhaltback3  {background:#15a;text-align:center;}
.face3.inhaltback3 .backtext3 { margin:25px 0px;padding:46px 0px; background:#fafafa; }
.face3.inhaltback3 .backtext3 a { color:#000;text-decoration:none;font-size:16px;line-height:20px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:15px;display:block;font-size:10px;line-height:13px; }
.face3.inhaltback3 .backtext3 a span.fon {font-size:12px;line-height:13px;  }



/* single-drehtuer-banner-bau */


#werbebox_bau { position: relative; left:0px; top:0px;display:inline-block;
  margin: 10px 0 20px 0px; width: 620px; height: 250px; z-index: 1; box-shadow: 0px 0px 3px #aaa; padding:0;background:#fafafa;

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#frontal {
  width: 100%; height: 100%;position:relative;left:10px;
  -webkit-transform-style: preserve-3d;  -webkit-transition: all 0.4s linear;
  -moz-transform-style: preserve-3d;  -moz-transition: all 0.4s linear;
  -o-transform-style: preserve-3d;  -o-transition: all 0.4s linear;
  transform-style: preserve-3d;  transition: all 0.4s linear;
}
#werbebox_bau:hover #frontal, #werbebox_bau.hover_effect #frontal { 
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);

}
.surface {
  position: absolute; width: 100%; height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}



.surface.backside {
  display: block;border:0px solid red;margin-left:-10px;
  -webkit-transform: rotateX(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateX(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateX(180deg);
  -o-box-sizing: border-box;
  transform: rotateX(180deg);
  
  box-sizing: border-box; padding: 10px; background:#fafafa; font-size:13px;line-height:18px;color:#333;
  }
  

 .backside div.left { display:inline-block;vertical-align:top; width: 286px;height:220px;    text-align:center;border:0px solid blue; }
  
  .surface.backside .title { display:inline-block; font-size:16px;color:#15a;font-weight:bold;margin:20px 0; }
 
 .backside div.right {  display:inline-block;vertical-align:top; width: 286px;height:220px;
			text-align:center; border:0px solid blue; box-shadow:0px 0px 6px #acd;}
 
  .surface.backside .right a { font-size:13px;line-height:18px;color:#333; color:#000;text-decoration:none; }
 
  .surface.backside a.mail { 
 display:inline-block; font-size:16px;line-height:20px;margin:25px 0 20px;
  color:#000;text-decoration:none;
 }








/* ================================================================================== */
/* ================================================================================== */
/* ================================================================================== */




/* tablets  ----------- */
@media  (max-width: 980px) {

.cssdrehbanner { width:600px;padding: 12px 2px;border:0px solid green;vertical-align:top; margin: 20px 0px 0px 0px; } 
#f1_container {     margin: 0px  5px 0px 0; width: 182px; height: 227px;  }
#f2_container { margin: 0px 5px 0px 0px; width: 182px; height: 227px; }
#f3_container { width: 182px; height: 227px; }
 
.face.inhaltback img { margin:5px 0px -5px 20px!important; max-width:100px;width:100%;  }
.face.inhaltback .backtext {   padding: 30px 0 0px 0 ;font-size:14px; } 
.face.inhaltback .backtext1 { padding: 8px 0 5px 0 ;font-size:11px;line-height:12px; }
.face2.inhaltback2 .backtext2 { padding: 42px 0 15px ;font-size:18px;line-height:23px; }
.face3.inhaltback3 .backtext3 { margin:35px 0px;padding:12px 0px;  }
.face3.inhaltback3 .backtext3 a {font-size:16px;line-height:22px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:13px;font-size:11px;line-height:13px; }
.face3.inhaltback3 .backtext3 a span.fon { font-size:12px;line-height:16px;  }

.usefulicons { width:246px;margin:40px 10px 20px 0; }

}


/* tablets  ----------- */
@media  (max-width: 900px) {


.cssdrehbanner { width:496px;padding: 0px;border:0px solid blue;vertical-align:top; margin: 20px 0px 0px 0px; } 
#f1_container {     margin: 0px  5px 0px 0; width: 160px; height: 200px;  }
#f2_container { margin: 0px 5px 0px 0px; width: 160px; height: 200px; }
#f3_container { width: 160px; height: 200px; }
 
.face.inhaltback img { margin:0px 0px -10px 20px!important; max-width:100px;width:100%;  }
.face.inhaltback .backtext {   padding: 20px 0 0px 0 ;font-size:14px; } 
.face.inhaltback .backtext1 { padding: 3px 0 5px 0 ;font-size:11px;line-height:12px; }
.face2.inhaltback2 .backtext2 { padding: 42px 0 15px ;font-size:16px;line-height:20px; }
.face3.inhaltback3 .backtext3 { margin:30px 0px;padding:12px 0px;  }
.face3.inhaltback3 .backtext3 a {font-size:14px;line-height:18px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:10px;font-size:10px;line-height:12px; }
.face3.inhaltback3 .backtext3 a span.fon { font-size:11px;line-height:15px;  }


.usefulicons { width:246px;display:block; margin:40px 10px 20px 0; }






#werbebox_bau {  width: 496px; height: 200px; }





}



/* tablets  ----------- */
@media  (max-width: 768px) {
  
.cssdrehbanner { width:600px;padding: 12px 2px;border:0px solid green;vertical-align:top; margin: 20px 0px 0px 0px; } 
#f1_container { margin: 0px  5px 0px 0; width: 182px; height: 227px;  }
#f2_container { margin: 0px 5px 0px 0px; width: 182px; height: 227px; }
#f3_container { width: 182px; height: 227px; }
 
.face.inhaltback img { margin:5px 0px -5px 20px!important; max-width:100px;width:100%;  }
.face.inhaltback .backtext {   padding: 30px 0 0px 0 ;font-size:14px; } 
.face.inhaltback .backtext1 { padding: 8px 0 5px 0 ;font-size:11px;line-height:12px; }
.face2.inhaltback2 .backtext2 { padding: 42px 0 15px ;font-size:18px;line-height:23px; }
.face3.inhaltback3 .backtext3 { margin:35px 0px;padding:12px 0px;  }
.face3.inhaltback3 .backtext3 a {font-size:16px;line-height:22px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:13px;font-size:11px;line-height:13px; }
.face3.inhaltback3 .backtext3 a span.fon { font-size:12px;line-height:16px;  }

.usefulicons { width:246px;margin:40px 10px 20px 0; }

}


/* smartphones ----------- */
@media  (max-width: 640px) {

.cssdrehbanner { width:496px;padding: 0px;border:0px solid blue;vertical-align:top; margin: 20px 0px 0px 0px; } 
#f1_container { margin: 0px  5px 0px 0; width: 160px; height: 200px;  }
#f2_container { margin: 0px 5px 0px 0px; width: 160px; height: 200px; }
#f3_container { width: 160px; height: 200px; }
 
.face.inhaltback img { margin:0px 0px -10px 20px!important; max-width:100px;width:100%;  }
.face.inhaltback .backtext {   padding: 20px 0 0px 0 ;font-size:14px; } 
.face.inhaltback .backtext1 { padding: 3px 0 5px 0 ;font-size:11px;line-height:12px; }
.face2.inhaltback2 .backtext2 { padding: 42px 0 15px ;font-size:16px;line-height:20px; }
.face3.inhaltback3 .backtext3 { margin:30px 0px;padding:12px 0px;  }
.face3.inhaltback3 .backtext3 a {font-size:14px;line-height:18px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:10px;font-size:10px;line-height:12px; }
.face3.inhaltback3 .backtext3 a span.fon { font-size:11px;line-height:15px;  }


.usefulicons { width:246px;display:block; margin:40px 10px 20px 0; }


#werbebox_bau {  width: 496px; height: 200px; }


 
}


@media  (max-width: 540px) {
  
.cssdrehbanner { width:400px; padding: 0px;border:0px solid yellow;margin: 20px 0px 0px 0px; } 
#f1_container { margin: 0px  3px 0px 0; width: 129px; height: 161px; display:inline-block; }
#f2_container { margin: 0px 3px 0px 0px; width: 129px; height: 161px; display:inline-block;}
#f3_container { width: 129px; height: 161px; display:inline-block;}
 
.face.inhaltback img { margin:-2px 0px -10px 20px!important; max-width:80px;width:100%;  }
.face.inhaltback .backtext {   padding: 15px 0 0px 0 ;font-size:12px; } 
.face.inhaltback .backtext1 { padding: 3px 0 5px 0 ;font-size:9px;line-height:10px; }
.face2.inhaltback2 .backtext2 { padding: 33px 0 15px ;font-size:14px;line-height:17px; }
.face3.inhaltback3 .backtext3 { margin:20px 0px;padding:8px 0px;  }
.face3.inhaltback3 .backtext3 a {font-size:12px;line-height:13px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:5px;font-size:10px;line-height:11px; }
.face3.inhaltback3 .backtext3 a span.fon { font-size:11px;line-height:12px;  }


#werbebox_bau {  width: 400px; height: 143px; }


 
}


@media  (max-width: 410px) { 
 
.cssdrehbanner { width:320px;padding: 0px;border:0px solid orange; margin: 20px 0px 0px 0px; } 
#f1_container {     margin: 0px  5px 0px 0; width: 100px; height: 125px;  }
#f2_container { margin: 0px 5px 0px 0px; width: 100px; height: 125px; }
#f3_container { width: 100px; height: 125px; }

.face.inhaltback img { margin:-5px 0px -5px 20px!important; max-width:60px;width:100%;  }
.face.inhaltback .backtext {   padding: 5px 0 0px 0 ;font-size:10px; } 
.face.inhaltback .backtext1 { padding: 0px 0 5px 0 ;font-size:8px;line-height:8px; }
.face2.inhaltback2 .backtext2 { padding: 30px 0 15px ;font-size:11px;line-height:13px; }
.face3.inhaltback3 .backtext3 { margin:17px 0px;padding:4px 0px;  }
.face3.inhaltback3 .backtext3 a {font-size:10px;line-height:10px; }
.face3.inhaltback3 .backtext3 a span.mail { margin-top:0px;font-size:8px;line-height:13px; }
.face3.inhaltback3 .backtext3 a span.fon { display:none;  }




#werbebox_bau {  width: 320px; height: 129px; }




  
#map {position: relative;top: 0;left: -22px;width: 300px;height: 550px;font-size:11px;  }
}

@media  (max-width: 340px) {

.cssdrehbanner {display:none; } 

#werbebox_bau {  display:none; } 

}