﻿/*Grund-Style */ 
body { background:#FFFFFF; font-size:100%; font-family:Helvetica;  margin:0.5em;  max-width:100%}
 h1 {font-size:1.0em; margin-bottom:2px; color:#000000; margin-top:1px;}
 h2 {font-size:1.0em; margin-bottom:2px; color:#000000; margin-top:1px; display: inline;}
 h3 {font-size:1.0em; margin-bottom:2px; color:#000000; margin-top:1px; display: inline;}
 .suche{ color:#C04040;}  
 .listengrafik {list-style-image: url(https://handwerkernet.de/laender/images/list.gif);}
 .url {font-size: 1.0em; margin-bottom:2px; color:#000000; margin-top:10px;}
.beschreibung {font-size: 1.0em; margin-bottom:2px; color:#000000; margin-top:1px;}
.adresse {font-size: 1.0em; margin-bottom:20px; color:#000000; margin-top:1px; font-weight: bold}
.strasse {font-size:1.0em; margin-bottom:2px; color:#000000; margin-top:1px;}
.telefon{font-size:1.0em;margin-top:1px;margin-bottom:10px;color:#000000;font-weight:bold; } 

/*#mobile-ansicht {display:none} */
#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;}

.p3{margin-left:20px; font-size:1.2em; line-height:1.4em; padding:0.0em;margin-bottom:0.00em;text-align:left;}
.b1{color:#000000;background:#9AB4CB;box-shadow:0px 0px 1px 1px #4c4948;border-radius:5px}
.p4{margin-left:20px; font-size:1.2em; line-height:1.4em; padding:0.0em;margin-bottom:5.00em;text-align:left;}
img {width:100%; height:auto; max-width:100%} /*für Responsive funktion*/
#ueber-branchen{clear:both; width:100%; text-align:center; height:auto; background:#FFFFFF;}
#ueber {text-align:center; width:100%;   color:#000000; margin-top:1px;}
#kurzinfo {clear: both; text-align:center; width:100%;  color:#000000; margin-top:5px;  margin-bottom:1.0em}
#andere-branche {text-align:left; width:100%;  color:#000000; margin-top:5px; margin-bottom:1.0em}
#andere-branche a {padding:0.25em 1.5em 0.25em 0.0em;}
#ueber {text-align:left; width:100%;  margin-top:1px; margin-top:5px;}
#ueber a {padding:0.25em 1.5em 0.25em 0.0em;}
#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;}
/* 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}
/* Navigation */ 
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:0em; padding:0em;} nav ul li {display:inline; margin:0em 0.4em 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}
 #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}
#ort{box-sizing:border-box; clear:both; width:100%; clear:both; height:auto; background:#FFFFFF;}
#ueber-branchen {clear:both; width:100%;  height:auto; background:#FFFFFF;}
/*##############INHALT*/
#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;}
#partner-spalte, #mitte-spalte{vertical-align:top;  float:left;}
#partner-spalte {width:25%; vertical-align:top; text-align:left;  margin-right:1px;
background:#EAF4FF; box-shadow:0px 0px 1px 1px #4c4948; border-radius:5px; 
margin:1.0em 0.0em 0.0em 0.0em; word-wrap: break-word;}
#partner-spalte img {max-width:100px; box-shadow:5px 5px 1px 2px #A2B7CA;  border-radius:5px; margin:1.0em 0.8em 1.0em 0.313em}
#linkpartner {width:100%; clear:both; margin:1.0em 0.0em 0.0em 1.0em; word-wrap: break-word;}
#mitte-spalte {width:30%; vertical-align:top; text-align:left; margin:1.0em 0.0em 0.0em 2.0em; padding-left:1.0em;  padding-right:1.0em;
 padding-top:1.0em; word-wrap: break-word; background:#FFFFFF; box-shadow:0px 0px 1px 1px #4c4948; border-radius:5px; 
 }
 
 #rechte-spalte {vertical-align:top;  float:right; width:30%; background:#EAF4FF; 
 box-shadow:0px 0px 1px 1px #4c4948; border-radius:5px; margin:1.0em 0.0em 0.0em 2.0em; padding-left:1.0em; padding-top:1.0em; padding-right:1.0em; word-wrap: break-word;}
#rechte-spalte img  {max-width:240px; box-shadow:5px 5px 1px 2px #A2B7CA;  border-radius:5px; margin:1.0em 0.8em 1.0em 0.313em}
 #parent-element-id{ margin:0 10px 0px 5px; box-shadow:5px 5px 5px 5px #A2B7CA;  
border-radius:5px; word-wrap:break-word; } 

#parent-element-id img {max-width:130px; padding-left:20px; }

.anz-ama {margin-left:10px; padding-top:20px }
.anz-ama  u {background-color:#A2B7CA; box-shadow:2px 2px 2px 1px #A2B7CA;  border-radius:3px; text-decoration: none; }
.ama-txt{font-size:1.2em; margin: 20px 10px 0 10px}
.autor{ font-size:1.0em; margin: 20px 10px 0 10px}
/*werbeanzeigen rechte spalte*/
.anzeigen-ama {font-size:12px; /*margin-right:20px;*/ margin-bottom:4px; margin-top:10px; text-decoration: underline black; }
.anzeigen-ama strong        {background-color: yellow }
figure { width:240px;  margin-left:2px; margin-top:10px  }
figcaption {font-size:80%; }
.ama-link {font-size:18px; }

.nocontent {/*display:none; line-height:0px*/}
#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 {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;}


/* Mobile Style */ 
@media screen and (max-width: 800px) { body {font-size:100%; width:94%}  
#container-inhalt {width:100%; display:block; margin:0.625em 0.5em 0.625em 0.5em;} 
#mitte-spalte {width:95%; display:block;  margin:0.625em 0.5em 0.625em 0.5em;}
#rechte-spalte {width:95%; display:block;  margin:0.625em 0.5em 0.625em 0.5em; float:left; }

#andere-branche a {padding:0.25em 1.5em 0.25em 0.0em; font-size:1.2em; line-height:1.5em;}
#ueber {text-align:center; width:100%; color:#000000; margin-top:1px; font-size:1.2em; line-height:1.5em;}
#verzeichnisseiten-zurueck  {width:100%; text-align: center; clear: both;  margin:1.8em 0.0em 0.0em 0.0em; line-height:1.8em;}
#seitennummer a  {margin:1.8em 0.8em 0.0em 0.8em;  font-size:1.2em; line-height:1.5em;}
.suche a  {padding:0.25em 1.5em 0.25em 0.0em; font-size:1.2em; line-height:1.5em;}}

@media screen and (max-width: 700px) {
#container-inhalt {width:100%; display:block; margin:1.625em 0.5em 0.625em 0.5em;}
#mitte-spalte {width:90%; display:block;  margin:0.625em 0.3em 0.625em 0.1em;} 
#rechte-spalte {width:90%; display:block; margin:0.625em 0.3em 0.625em 0.1em; float:left; } 
figure { width:240px;  margin-left:2px; margin-top:50px }
#partner-spalte {display:none; height:auto;} 
#partner {display:none; height:auto;}
 .url {font-size: 1.0em; margin-bottom:2px; color:#000000; margin-top:10px;} 
 #ueber {margin:1.0em 0.2em 1.0em 0.2em; line-height:2.0em}
      }
	  
@media screen and (max-width: 550px)
 {body {width:80%; font-size:100%; }  
 nav {display:none; height:auto;} 
 #menubar { margin-bottom:2.5em;  margin-top:-1.0em}
  #menubar a{ margin-top:0.5em}
#menubar ul li a.menubutton { display:block; } 
 h1 {font-size:90%; margin-bottom:0px; color:#000000; margin-top:1px; }
   #ueber{display:none; line-height:0.0em;}
 #andere-branche {display:none;line-height:0.0em}
  #andere-branche a {display:none;line-height:0.0em}
  #mitte-spalte {width:95%; display:block;  margin:-1.0em 0.3em 0.625em 0.1em; padding-top:0.0em; }
#rechte-spalte {width:95%; display:block; margin:0.625em 0.3em 0.625em 0.1em; float:left; }   
#footer img {width:120px; height:40px;}
#header {font-size:10%;} 
#header img {max-width:50%}
/* nav {padding-top:0.0em; margin-bottom:0.1em; margin-top:0.2em;}*/
.beschreibung {display:none; height:auto;} #partner-spalte {display:none; height:auto;}
#buchstaben-a-bis-z  a  {line-height:2.8em; margin:2.1em 1.0em 2.1em 0.01em;}
#solomo8 {margin:0.8em 0.0em 1.25em 2.0em;}   }    

@media screen and (max-width: 360px) 
{ body { width:94%; font-size:96%; }  
 h1 {font-size:90%; }   
#header, #header img, #rechte-spalte {display:none} 
#menubar { margin-bottom:3.5em;  margin-top:1.5em}
#menubar ul li a.menubutton { display:block; } 
#mitte-spalte {width:80%; display:block;  margin:0.625em 0.1em 0.625em 0.1em;} 
#media img{max-width:30px;}
.imp { margin:0.5em 0em 0.5em 2.0em}  
  } 
