/** ################################################
 * Bautischlerei Reineke
 * Copyright
 * Christiana Spellerberg
 * Zum Donnerberg 1
 * 34414 Warburg
 * info@spellerberg-warburg.de
 * http://spellerberg-warburg.de
 * ###############################################*/

/** ####################### Positionsbefehle #####################
 * Hier die Farben für das Template eintragen
 * Auswahl der Farben in RGB,
 * orange rgb(255,150,0) #ff9900
 * rot rgb (178,0,0)
 * */

img {border: 0}
.float_links {float:left; }
.float_rechts {float:right; }
.clear_both{clear:both;}
.absatz {padding:10px 0 0 0 ;}
.absatz_gross {padding:25px 0 0 0;}
.flex_box {
   display: -ms-flexbox;
   display:flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;        
    }
.zentriert {text-align:center;}    
.fett {font-weight:bold;}
small {font-size:10px;}   
em {color:#990000;}      /** hervorgehobener Text */
strong {font-weight:bold;}          /** besonders wichtiger Text */
.underline{text-decoration:underline;}
 
/** ####################### html #####################*/
 html {font-size:62.5%;
   overflow-y:scroll;
   } 
 
/** ######################## body #####################*/   
body {
    background-color: #500000;
    font-family:Verdana,Arial,Helvetica,sans-serif;          
    color:rgb(0,0,0);
    vertical-align:top;          
    height:101%;
    font-size: 160%;           
    font-size: 12px;
    font-size: 1.2rem;
    vertical-align: top;       
          }  

/** ######################## header #####################*/  
header {
    padding:25px 0 0 0;
    padding:2.5rem 0 0 0;     
    text-align:center;     
    }
    

     
header .logo {
   margin-bottom:15px;
}

header .deko_header {
   border-top:2px solid #990000;
   margin: -3px 24px 0 24px;
   min-height:1px;
   background-color:#990000;
}

/** ######################## #Wrapper #####################*/                   
#Wrapper {
    margin:0 auto;
    width:900px;
    width:90rem;                
    line-height:1.5rem;
    background-color:#fff;  
    display:flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    box-shadow: 0 30px 35px -10px #000;     
}         
/** ########################## main ########################### */
main {      
    min-height:500px;
    min-height:50rem;    
    }
    
main figure {  
  margin:20px;  
  margin:2rem;
  }    
  main figcaption {
  padding:0 5px 5px;
  padding: 0 0.5rem 0.5rem;
  font-size:16px;
  font-size:1.6rem;
  }

#Content{   
   padding: 15px 0 0;
   margin:0 0 0 35px;
   margin:0 0 0 3.5rem;
   #outline:1px solid gray;
}
article#Content section div p{
   font-size:16px;
   font-size:1.6rem;
   font-family: Verdana,Arial,Helvetica,sans-serif;
}

body.index article#Content section {
   margin:20px 15px;
   margin:2rem 1.5rem;
}

article#Content section {
   margin:20px 10px 20px 20px;
   margin:2rem 1rem 2rem 2rem;
   padding-right:2px;
   padding-right:0.2rem;
}
/** ######################## footer #####################*/
footer {    
    padding:5px 0;   
    justify-content:flex-start;      
    }

/** ##################### Formatierung ###################*/
/** *** Grundfarben *** */

h1, h2, h3, h4, h5, h6, 
a,
u
{color:#000;}     
    

/** *** ----------------- gemeinsamme Formatierungen  */  


header,
footer{
    flex: 1 100%;    
   }

li {
    font-size:12px;
    font-size:1.2rem;}   
    
p {
   line-height:1.5;
   font-size:16px;
   font-size:1.6rem;
   padding-bottom:10px;
   padding-bottom:1rem;
   }       
/**  **** -------------------------- Überschriften */          
h1, h2, h3, h4, h5, h6  {
  font-weight:bold;
  text-align:left;
  padding:10px 0; 
   
  }
   
h1{
    font-size:17px;
    font-size:1.7rem;
    padding:40px 0 10px 17px;
    padding:4rem 0 1rem 1.7rem; 
    color:#b20000;
    } 
    
h2 {        
    font-size: 100%;
    padding-bottom: 10px;
    }      



    
/** *** ----------------------- Hyperlink */    
a,  span.AktuelleSeite  {    
    font-weight:bold;
  text-decoration:none;
  color:rgb(178,0,0);
  font-size:100%;
    }        
    
a:link {
    
}

a:visited {
    color:#cecece;
}

a:hover {
   #background:#fff;
   #color:#000;
}

a:active {
    
}  
/** *** Sidebar_Left *** */
#Sidebar_Left img.nav_img {
   padding:0 0 10px 31px;
   padding:0 0 1rem 3.1rem;   
}


/** *** ######################## Navigation nav ###################### */

nav.main_menu {
    width:215px;
    width:21.5rem;
    font-size:16px;
    font-size:1.6rem;
    padding: 24px 0 0 16px;
    padding: 2.4rem 0 0 1.6rem;       
    }


 
nav.main_menu  ul {
    padding: 0.2rem 0.4rem 0.2rem 0.8rem;
    #outline:1px solid black;
}    
 
nav.main_menu  li {
   border: 2px solid #b20000;
    list-style: outside none none;
    margin: 0.7em;
    padding: 0;
   } 

nav.main_menu li.new a, nav.main_menu li.new span {
    background: rgba(0, 0, 0, 0) url("../media/grafiken/neu.jpg") no-repeat scroll 99% 50%;
    
}   
   
nav.main_menu li a,
nav.main_menu span.AktuelleSeite {
   background-color: #b20000;
    border-color: #000000 #ffffff #ffffff #000000;
    color: #ff9600;
   }      

nav.main_menu ul a, nav.main_menu ul li span.AktuelleSeite{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ff9600;
    border-color: #ffffff #000000 #000000 #ffffff;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #b20000;
    display: block;
    font-weight: bold;
    padding: 0.7rem;
    text-decoration: none;
}

nav.main_menu  a:hover, nav.main_menu ul li span.AktuelleSeite,nav.main_menu li.new a:hover {
   background-color: #b20000;
    border-color: #000000 #ffffff #ffffff #000000;
    color: #ff9600;  
    display:block;
   }    
/** *** Navi_Top */
.navi_top {
   #margin:-10px 0 0 0;
   }
   
.navi_top ul li {
   #display:inline;
   float:right;
   margin: 0 7px 0 7px;
   margin: 0 0.7rem 0 0.7rem;
   font-size:10px;
   font-size:1rem;
}
/** *** #################### Grafiken ######################## */
/** *** Bild rechts */

.flex_box ul {
    flex: 1;
    }
.flex_rechts {
    width:200px;
    width:20rem;
    order:2;
    justify-content:flex-end; 
    }
     
/** *** #################### Article ######################## */
.flex_box article {
  flex:1 1 0;
  }    
article {
   border-right:24px solid #ff9600;
   border-right:2.4rem solid #ff9600;
}  
/** *** #################### Listen ######################### */

main content li:before {
    content: "\00BB" " "; 
    color:#F59E4F; 
    font-size:20px;
    font-size:2rem;     
    }

/** ------------------- Webdesign -------------- */
.impressum .agentur a {
  color:#cecece;
  }
.impressum .agentur h3 {
  flex:1 100%;  
  } 
.impressum .agentur img {
  box-shadow:none;
  border-radius:none;
  margin:5px 5px 10px 0;
  }  
  
.impressum .agentur p {
  align-self:flex-end;
  padding:0 0 10px 0;
  }    

.datenschutz article, .impressum article {
   padding:10px;
   padding:1rem;
   }
section.datenschutz ul {
  margin:0 0 0 20px;
  margin:0 0 0 2rem;
  }  
  
section.datenschutz li:before {
   content:" - ";
   color:#000;
   
   }
footer p.agentur {
   padding: 0 0 0 10px;
   padding: 0 0 0 1rem;
   width:215px;
   }
footer p.agentur a {
   color:#cecece;
   font-weight:normal;
   font-size:12px;
}   

   
/** *** #################### individuelle Formatierung zum Projekt ############ */
/** *** -------------------------------------------------------- Header ----- */

header, nav.main_menu, footer, #Sidebar_Left {  
   background-color:#ff9600;
}
#Sidebar_Left {
   }

footer p.footer {
   color:#b20000;
   font-weight:bold;
   font-size:12px;
   font-size:1.2rem;
   padding:0 0 0 15px;
}
/** *** ------------- index --- */
.index h1 {
   font-size:17px;
   font-size:1.7rem;
   line-height:1.5;
   text-align:center;
   color:#000;
}
.index h1 span {
   color:#990000;
   font-size:19px;
}
.index article#Content{
   margin:0;
   padding:0;
} 

.index article#Content section {
   margin:20px 15px;
}
.index #Content img {
   padding:10px 50px;
}
a.imtext {
   color:#000;
   text-decoration:underline;
   font-size:15px;
   font-size:1.55rem;
}


/** *** ------------- denkmalschutz --- */
.denkmalschutz #Content section figure.float_rechts {
   margin: 0 0 10px 50px;
    width: 160px;
}
.denkmalschutz div.flex_box {
   flex: 1 1 100%;
   justify-content: space-between;
}
.denkmalschutz div.flex_box figure{
   margin:0 0 0 0;
}
/** *** ------------- spiegel-glas --- */
.float_rechts.glas,
figure.float_rechts.ueberdachungen {
   margin:0 20px 0 0;
}
.float_links.glas,
figure.float_links.ueberdachungen {
   margin:0;
}

/** *** ------------- --- */
.haustueren figure.float_rechts,
.ueberdachungen figure.float_rechts,
.wintergarten figure.float_rechts,
.sonnenschutz figure.float_rechts {
   margin:25px 0 0 100px;
   margin:2.5rem 0 0 10rem;
   width:160px;
}

.haustueren figure.float_rechts img,
.wintergarten figure.float_rechts img,
.sonnenschutz figure.float_rechts img,
.sonnenschutz figure.float_links img,
.ueberdachungen figure.float_rechts img {
   margin:0 0 30px 0;
}

figure.float_links.ueberdachungen,
figure.float_rechts.ueberdachungen,
figure.float_links.sonnenschutz,
figure.float_rechts.sonnenschutz {
   width:225px;
}
figure.float_links.ueberdachungen,
figure.float_links.sonnenschutz {
   margin:25px 0 0 0;
}

figure.float_rechts.ueberdachungen{
   margin:25px 10px 30px 0;
}
figure.float_links.ueberdachungen img,
figure.float_rechts.ueberdachungen img {
   margin:0 0 30px;
}
.ueberdachungen h2,
.wintergarten h2 {
    color: #b20000;
    margin-top: -30px;
    font-size:16px;
    font-size:1.55rem;    
}

.rolllaeden article#Content section ul {
    list-style-type: circle;
    padding: 10px 0 10px 15px;
    padding: 1rem 0 1rem 1.5rem;
}
.rolllaeden article#Content section ul li{
   font-size:16px;
   line-height:1.5;  
}

.rolllaeden article#Content figure.float_rechts {
   width:250px;
   width:25rem;
   margin:0;
}
.rolllaeden article#Content figure.float_rechts img {
   padding:0 0 15px 0;
   padding:0 0 1.5rem 0;
}

.rolllaeden article#Content .text_rechts {
   margin:0 280px 0 0;
   margin:0 28rem 0 0;
   padding-bottom:34px;
   padding-bottom:3.4rem;
   hyphens: auto;
}
html body.rolllaeden div#Wrapper main.flex_box article#Content section section.text_rolllaeden {
   margin:0;
   padding:0;
}
.rolllaeden  section.text_rolllaeden figure.float_rechts{
   margin:0;
}
html body.rolllaeden div#Wrapper main.flex_box article#Content section figure img
.rolllaeden article#Content section figure{
   padding-top:10px;
}

.rolllaeden h2, .rolllaeden h3 {
   font-size:17px;
    font-size:1.7rem;
    color:#b20000;
    line-height:1.5;
}
.rolllaeden h3 {
   color:#000;
}
figure.rolllaeden_img {
   margin-left:0;
   margin-right:6px;
   margin-right:0.6rem;
}
section .rolllaeden p{
   margin-right:20px;
}
.download p {
   font-size:12px;
   font-size:1.2rem;
   line-height:2;
}
.download h1, .kontakt h1 {
   line-height:1.5;
}
.download h2 {
   font-size:16px;
   font-size:1.6rem;
   line-height:1.5;
}
ul.info li{
  margin:15px 25px;
  list-style-image:url(../media/grafiken/holz.jpg);
  } 

/* ----------- Kontaktformular ------------- */

.kontakt input.eingabefehler {
   border:1px solid red;
   }
   
label::after {
  content: ": ";  
}   

label {
   display: inline-block; 
   width:86px;
   width: 8.6rem; 
   }

label.pflicht::after {
   content:": *";   
      }

input, textarea, select {
   background-color:#fff;
   }   
label.adresse {
   margin:0 0 0 2rem;
   width:6rem;
   }   
.kontakt p.klein {
   font-size:11px;
   font-size:1.1rem;
   line-height:2;
   }   
   
.kontakt h1 {
   font-weight:normal;
   color:#000;
   }   
.kontakt #Content {
   margin:0;
   }   
.kontakt article#Content section {
   margin:0 1rem 2rem 2rem;
   }   
.kontakt form p {
   padding:0;
   font-size:14px;
   }   
.kontakt form textarea {
   width:489px;
height:100px;
   }   
   
.impressum h1 {
   padding-bottom:0;
   }
   
.impressum h2 {
 padding-top:0;
 margin-top:-10px;
 font-size:16px;
 font-size:1.6rem;
 }   
 
.impressum article#Content section a {
   font-size:12px;
   font-size:1.2rem;
   text-decoration:none;
   } 
   
.impressum article#Content section  p {
   font-size:12px;
   }