/*Grund-Style neu-04-22*/ 
body{background:#fff;font-size:100%;margin:0;padding:0; max-width:100%;font-family:Helvetica}
/* Header */ 
#banner{background:url(https://handwerkernet.de/handwerk-2018.jpg);background-repeat:no-repeat;background-position:center top;background-size:contain;width:100%;height:168px}
#banner img{max-width:800px;max-height:100px;text-align:center;box-shadow:0px 0px 5px -5px #4c4948;border-radius:5px;}
img{width:90%;height:auto;max-width:800px} 
.hide,.show{display:none}
.hide,.show{display:none;border-top:1em double #a2b7ca;border-bottom:.4em solid #a2b7ca;width:10%}
.inhalt{display:block;height:auto;background:#a2b7ca;text-align:center;margin-bottom:1em;box-shadow:0 0 2px 1px #4c4948;border-radius:5px} 
.inhalt ul li{display:inline; margin:0 .4em 0 .01em;white-space:nowrap}
.inhalt ul{display:block;margin:0;padding:0}
.inhalt ul li a{color:#000; font-weight:700;font-size:18px;line-height:1.8em;padding:.263em .238em .275em .238em;
transition:background .2s;-webkit-transition:background .2s}
.inhalt ul li a:hover{background:#678198; border-bottom:.188em solid #6e8ba5;box-shadow:0 0 1px 1px #4c4948;border-radius:5px}
.inhalt ul li a.active{border-bottom:.188em solid #6e8ba5}
#menubar{display:block;text-align:center;background:#fff}
#branchenbeschreibung-zurueck {display:none}
#menubar{display:block;text-align:center;background:#ffffff;}
#menubar img{max-width:40px;padding-left:40px}
#buchstaben-a-bis-z {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;  padding:0.0em 1.0em 1.0em 1.0em; 
 width:96%; line-height:1.6em; clear:both; height:auto; background:#CFCFCF; margin:0.0em 1.0em 0.2em 1.0em; box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px;} 
 #buchstaben-a-bis-z a {color:black; margin:1.4em 0.4em 0.6em 0.4em; line-height:1.8em; font-size:20px;}
#umkreissuche-a-bis-z
{ margin: 10px 10px 5px 20px; box-sizing:border-box; clear:both; width:90%; clear:both; height:auto; background:#FFFFFF;} 
#input {font-size:16px; margin: 5px 0 5px 20px}
.suche{color:#C04040; margin: 0px 0 0px 10px}
#form-action{font-size:16px; height:auto; 
background:#FFFFFF; margin: 0 10px  0px 20px }  
select {font-size:16px;}
#ueber-branchen
{text-align:left; width:98%;color:#000000;margin-top:1px; background:#A2B7CA; box-shadow:0px 0px 2px 1px #4c4948; border-radius:5px;  margin: 1px 0px 0px 0px;  padding:0.0% 0.0% 0.0% 1.0%; }
 h1,  h2  {font-size:18px; margin-bottom:2px; color:#000000; margin-top:1px;}
h1 {margin:0 0 0 0px}
.ueber-im-ort h1{ display: inline; margin-right:30px}

.listengrafik {list-style-image: url(https://handwerkernet.de/orte/images/list.gif);}
#ueber-an  {text-align:center; font-size:16px; padding:0.0em 0.0em 0.0em 2.5em;}
.artikel-ein a {font-weight: bold;}
.nocontent { }
#ueber {text-align:center; width:100%; color:#000000; margin-top:1px;}
.suche{ color:#C04040;}  
h2 { text-align:left; } .aktuelle_seitennummer{ color:#777777;}  
img { width:90%; height:auto; max-width:100%} /*fuer Responsive funktion*/
#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:1.0em 1.0em 0.0em 1.0em;}
 #branchen-spalte, #mitte-spalte{vertical-align:top;  float:left;}
#branchen-spalte {width:25%; vertical-align:top; text-align:left; background:#FFFFFF}
#branchen-spalte  ul li { margin:0.0em 0.0em 1.0em 0.0em;}
#branchen-spalte img {max-width:100px; box-shadow:0px 0px 5px -5px #4c4948; border-radius:5px}
select {font-size:16px;}
#mitte-spalte {width:33%; vertical-align:top; text-align:left; background:#FFFFFF; font-size:18px}
#web1, #web2, #web3, #web4, #web5, #web6
{width:100%; box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; background:#A2B7CA; box-shadow:0px 0px 1px 1px #4c4948; border-radius:5px; padding: 0.8em 1.0em 1.0em 1.0em; margin:1.0em 1.0em 1.0em 1.0em; text-align:center;}
#mitte-spalte img { max-width:250px; box-shadow:0px 0px 5px -5px #4c4948; border-radius:5px}
#rechte-spalte
{vertical-align:top;  width:30%;  background:#FFFFFF; float:right; font-size:18px}
#rechte-spalte img { max-width:250px; box-shadow:5px 5px 1px 2px #A2B7CA;  border-radius:5px; }
#eigen-werb { max-width:100%;} 
#vor-zurueck { text-align: center; clear: both;}
#footer {width:100%;  clear:both;}
#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;}
#solomo1, #solomo2, #solomo3, #solomo4, #solomo5, #solomo6, #solomo7
{ width:25px; height:auto; vertical-align:top; margin:0.8em 0.5em 0.6em 0.0em ; float:left; background:#A2B7CA;}
#solomo8 { width:80%; text-align:left; margin:1.025em 0.0em 0.625em 1.5em;}
#solomo1{padding-left:5%;} 
#solomo img { max-width:25px;}

/* Mobile Style */ 
@media screen and (max-width: 800px) 
{body {width:100%; font-size:100%; }
#menubar, #umkreissuche-a-bis-z, #action-container,  #buchstaben-a-bis-z, #buchstaben-seitenlinks, #weiter-zurueck, #container-inhalt, #branchen-spalte, #mitte-spalte, #rechte-spalte
{width:98%; display:block; margin:0.625em 0em 0.625em 0.0em;}

.hide,.show img{width:40px;height:11px}
.hide{display:block;margin:-1.2em 0 1.5em 1em}
.show{display:block;margin:-1.2em 0 1.5em 1em}
#akkordeon:not(:target) .inhalt{display:none}
#akkordeon:not(:target) .hide{display:none}
#akkordeon:target .inhalt{display:block;word-wrap:break-word}
#akkordeon:target .show{display:none}
.inhalt ul li a{color:#000;font-weight:700;font-size:18px;white-space:normal;
line-height:1.8em;padding:.263em .238em .275em .238em;
transition:background .2s;-webkit-transition:background .2s}
#form-action {width:96%; clear:both; margin:0.5em 0.0em 0.0em 10px;  height:auto; }
#branchen-spalte { clear:both; margin:0.0em 0.0em 0.0em 0.00em;  width:100%;}
#branchen-spalte  ul li { margin:1.5em 0.0em 0.0em 0.00em;  width:100%; }
#input {width:100%; height:auto; font-size:16px; margin:1.0em 0.0em 0.5em 0.2em;}
#ueber-branchen { width:97%; margin:1.0em 0.0em 1.0em 0.0em;} 
#input {width:96%; font-size:16px; margin: 5px 0 5px 10px} 
#feld-select {width:99%}
#umkreissuche-a-bis-z {margin:0px 0px 0px 10px; float:left; line-height:1.800em;}
}
@media screen and (max-width: 600px) 
{body {width:100%; font-size:100%; }
#menubar {margin:-20px 0px 0 0px;  }
#umkreissuche-a-bis-z {width:96%; margin:0px 0px 0px 10px;}


.ueber-im-ort { white-space: normal; /* Zeilenumbruch wieder zulassen */ display: block; /* Element als Blockelement anzeigen */}

}
@media screen and (max-width: 500px) 
{body {width:100%; font-size:100%;  }

#menubar {width:96%;  margin:10px 5px 0px 5px; text-align:right }
.hide, .show {width:40px;height:11px; margin:13px 50px 5px 10px}  
#header,  #banner {display:none}
}