﻿/*Grund-Style */ 
body { background:#FFFFFF; font-size:100%; font-family:Helvetica;  margin:0.5em;  max-width:100%}
 #mobile-ansicht {display:none}
 h1, h2 {  font-size: 1.0em; margin-bottom:2px; color:#000000; margin-top:1px;}
.listengrafik { list-style-image: url(https://handwerkernet.de/laender/images/list.gif); padding:0.0em 0.0em  0.0em  1.8em;}
#ueber-an  { text-align:left;   font-size: 0.8em; }
.buchstaben-a-bis-z { text-align:left; width:100%;  margin-top:1px; }
.sup1 { font-size:90%;  margin:0.0em 0.0em -1.0em 1.0em; line-height:0.8em;}
.hr { width: 100%; height: 2px; margin:0.8em 0.0em  0.0em  0.0em;  background:#A2B7CA;}
.hr {display:none; } 
h2 { text-align:left; } 
.aktuelle_seitennummer{ color:#777777;}  
img { width:90%; height:auto; max-width:100%} /*für Responsive funktion*/
.suche{ color:#C04040;} 
/* On Top Bar */ 
#menubar { display:block; text-align:center; background:#ffffff; line-height:1.0em;  height:1.2em; }
#menubar ul { display:block; width:1.8em; padding:0.0em; margin-bottom:0.5em}
#menubar img { max-width:20px; padding-left:20px} 
#menubar ul li { display:inline } #menubar ul li a.menubutton  { display:none}
.beschreibung{font-size:1.0em;margin-bottom:2px;color:#000000;margin-top:1px;}
.adresse{font-size:1.0em;margin-bottom:2px;color:#000000;margin-top:1px;}
#header{background:url(../handwerk-2018.jpg);background-repeat:no-repeat;background-position:center top;background-size:contain;width:100%;height:168px;}#header img{max-width:800px;max-height:100px;text-align:center;box-shadow:0px 0px 5px -5px #4c4948;border-radius:5px;}
#ueberschr-kreise {width:40%;vertical-align:top;text-align:left;margin:0.0em 0.0em 1.0em 1.0em;background:#A2B7CA;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
#kreise {width:20%;vertical-align:top;background:#EAF4FF;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
#ueber-branchen{clear:both;width:100%;text-align:center;height:auto;background:#FFFFFF;}
#branchen-in-deutschland{text-align:left;width:90%; margin:1.0em 0.0em 1.0em 1.0em;}
#ueber{text-align:left;width:90%; margin:0.5em 0.0em 1.0em 1.0em;}
#ueber a{padding:0.25em 1.5em 0.25em 0.0em;}
#kurzinfo{clear:both;text-align:center;width:100%;color:#000000;margin-top:5px;}
#andere-branche{text-align:left;width:90%;text-align:left;margin:1.0em 0.0em 1.0em 1.0em;}
#andere-branche a{padding:0.25em 1.5em 0.25em 0.0em;}
#deutschland{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;clear:both;width:100%;clear:both;height:auto;background:#FFFFFF;margin-top:5px;}
#menubar{display:block;text-align:center;background:#ffffff;line-height:1.0em;height:1.2em;}#menubar ul{display:block;width:1.8em;padding:0.0em;margin-bottom:0.5em}
#menubar img{max-width:20px;padding-left:20px}
#menubar ul li{display:inline}#menubar ul li a.menubutton{display:none}nav{clear:both;display:block;height:auto;background:#A2B7CA;text-align:center;padding-top:0.4em;margin-bottom:1.0em;margin-top:1.0em;box-shadow:0px 0px 2px 1px #4c4948;border-radius:5px;}
nav ul{display:block;margin:0.0em;padding:0.0em;}
nav ul li{display:inline;margin:0.0em 0.4em 0.0em 0.01em}
nav ul li a{color:#000000;font-size:1.0em;line-height:1.600em;padding:0.263em 0.238em 0.275em 0.238em;transition:background 0.2s;-webkit-transition:background 0.2s}nav ul li a:hover{background:#678198;border-bottom:0.188em solid #6E8BA5;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
nav ul li a.active{border-bottom:0.188em solid #6E8BA5}nav a{text-decoration:none}
#button-solo-mo{width:100%;height:auto;margin-bottom:0.0em;margin-top:0.0em;background:#A2B7CA;display:-webkit-flex;display:flex;}#media{width:100%;margin-bottom:1.0em;margin-top:0.2em;height:auto;background:#A2B7CA;display:-webkit-flex;display:flex;flex-direction:row;float:left;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
#media img{max-width:35px;}
.imp{margin:1.5em 0em 1.0em 2.0em}
#media{width:100%;margin-bottom:0.4em;height:auto;background:#A2B7CA;display:-webkit-flex;display:flex;flex-direction:row;float:left;box-shadow:0px 0px 2px 1px #4c4948;border-radius:5px;}
#ort{box-sizing:border-box;clear:both;width:100%;clear:both;height:auto;background:#FFFFFF;}

#container-inhalt
{ width:100%;  clear:both;  height:auto; 
display:-webkit-flex; 
display:flex; 
display:-ms-flexbox;
flex-direction:row; 
justify-content:space-between; 
 -ms-flex-pack: justify;  
box-sizing: border-box; 
-ms-box-sizing: border-box; 
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 padding:0.0em 1.0em 0.0em 1.0em;
 }
 
#staedte-orte{width:20%;vertical-align:top;background:#EAF4FF;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
#ueberschr-staedte-orte{width:40%;vertical-align:top;text-align:left;margin:0.0em 0.0em 1.0em 1.0em;background:#A2B7CA;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
#mitte-spalte 
{ width:50%;  clear:both;  margin:2.0em 0.0em 0.0em 1.0em; height:auto; }
#mitte-spalte img { max-width:350px; box-shadow:5px 5px 1px 2px #A2B7CA;  border-radius:5px; margin:1.0em 0.8em 1.0em 0.313em}
#mitte-content1
        { width:46%; word-wrap:break-word; vertical-align:top; margin:0em; float:left;}
                 #mitte-content2, #mitte-content3, #mitte-content4, #mitte-content5
                 { clear:both; width:46%;  word-wrap:break-word; vertical-align:top; float:left;  }
 
 /* ### Text zum Bild ###*/
 #rechts-content1, #rechts-content2, #rechts-content3, #rechts-content4, #rechts-content5
 { width:40%; min-width:200px;  word-wrap:break-word; vertical-align:top;  float:left; margin:0.5em 0.0em 2.0em 0.313em; }

#rechte-spalte {vertical-align:top;  width:30%; background:#FFFFFF; float:right;}
.artikel-ein a {font-weight: bold;}

.a-iframe { height:240px; width:120px; border:none}
.anzeigen-ama {font-size:80%; margin-right:20px; margin-bottom:0px}

#rechte-spalte img  { max-width:350px; box-shadow:5px 5px 1px 2px #A2B7CA;  border-radius:5px; }

#vor-zurueck{text-align:center;clear:both;margin:1.8em 0.0em 0.0em 0.0em;padding-right:5.5em;}
#vor-zurueck a{padding-left:1.0em;padding-right:1.0em;}
#verzeichnisseiten-zurueck{width:100%;text-align:center;clear:both;margin:1.8em 0.0em 0.0em 0.0em;}
#anker-zurueck{clear:both;text-align:center;width:100%;color:#000000;margin-top:1px;}
#footer{width:100%;clear:both;text-align:center;}
#footer img{width:120px; height:40px; max-width:120px}
#button{width:100%;clear:both;text-align:center;}
#button img{max-width:120px;}
#partner{width:100%;clear:both;text-align:left;}
#solomo{width:100%;max-height:300px;margin-bottom:1.0em;margin-top:0.4em;background:#A2B7CA;display:-webkit-flex;display:flex;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;}
#solomo8{width:200px;margin:1.025em 0.0em 0.625em 6.0em;}
#solomo1{padding-left:5%;}
#solomo img{max-width:25px;}
#seitennnummer{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;clear:both;

width:100%;clear:both;height:auto;background:#FFFFFF;margin-top:5px;}


   /* ## Media Screen ## */
@media screen and (max-width: 800px)

 {body{font-size:100%;width:90%}
 
 }
 
 @media screen and (max-width: 800px)
 {#container-inhalt,#kreise,#staedte-orte, #mitte-spalte, #rechte-spalte 
 {width:98%;display:block;margin:0.625em 0.5em 0.625em 0.5em;}
 #ueber {margin:1.0em 0.5em 1.0em 1.0em; line-height:2.0em}
 #rechte-spalte{width:98%;float:left;display:block;margin:0.625em 0.5em 0.625em 0.5em; }
 #partner{display:none;height:auto;}
 #kreise ul li{margin:1.0em 0.4em 0.0em 0.01em;}
 #staedte-orte ul li{margin:1.0em 0.4em 0em 0.01em;}
 #menubar{margin:1.8em 0.0em 3.25em 0.0em;}
 #mitte-content1
        { width:98%; word-wrap:break-word; vertical-align:top; margin:0em; float:left;}
 
                 #mitte-content2, #mitte-content3, #mitte-content4, #mitte-content5
                 { clear:both; width:98%;  word-wrap:break-word; vertical-align:top; float:left;  }
 
 /* ### Text zum Bild ###*/
 #rechts-content1, #rechts-content2, #rechts-content3, #rechts-content4, #rechts-content5
 { width:98%; /*min-width:200px; */ word-wrap:break-word; vertical-align:top;  float:left; margin:0.5em 0.0em 2.0em 0.313em; }
 
     }

	 @media screen and (max-width: 550px)
 {body{font-size:96%; }
 h1{font-size:90%;}
 #header{font-size:10%;}
 #header img{max-width:50%}
 nav{display:none;height:auto;}
 #menubar{margin-bottom:3.5em;margin-top:-2.5em}
 #menubar ul li a.menubutton{display:block;}
 #rechte-spalte, #mitte-spalte, #ueber, #andere-branche, #branchen-in-deutschland{display:none}

}
 
 @media screen and (max-width:360px)
{body{font-size:110% ;width:94%; }
h1{font-size:95%;}
#menubar{margin-bottom:3.5em;margin-top:0.5em}
#menubar ul li a.menubutton{display:block;}
.hr{display:none;height:auto;}
#media img{max-width:30px;}
#header, #header img {display:none}
.imp{margin:0.5em 0em 0.5em 2.0em}
}
