/* ################################################
 * 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
 * blau #4069A1 rgb(64, 105, 161)
 * */

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:flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;        
    }
.zentriert {text-align:center;}    

.Anmerkung:before{content:"Notiz: C.S."; /* .Anmerkung wird benötigt für eigene Anmerkungen bei der Entwicklung */
    font-weight:bold;
    color:green; 
    }     
 
/* ####################### html #####################*/
 html {font-size:62.5%;
   overflow-y:scroll;
   } 
 
/* ######################## body #####################*/   
body {
    background-color:#fff;
    font-family:Verdana,Arial,Helvetica,sans-serif;          
    color:rgb(0,0,0);
    vertical-align:top;          
    height:101%;
    font-size: 160%;      
#background-image: -webkit-linear-gradient(rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
#background-image: -moz-linear-gradient(rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
#background-image: -o-linear-gradient(rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
#background-image: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
#background-image: linear-gradient(rgba(86,85,101,1) 0%, rgba(125,185,232,0) 100%);
#filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(30,87,153,1)', endColorstr='rgba(125,185,232,0)',GradientType=0 );
#background-attachment:fixed;
          }  

/* ######################## header #####################*/  
header { 
    border-bottom:1px #4069A1 solid;    
    padding:10px 0;
    padding:1rem 0;     
    text-align:center;     
    min-height:200px;
    border-radius:20px 20px 0 0;
    background: url("../media/grafiken/header-bg11.jpg") no-repeat #fff;
    display: flex;
    justify-content: center;
    align-items:end;
    }
header p {
   font-size:3rem;
   font-weight:bold;
   color:#cdcdcd;
   background-color:rgba(64, 105, 161, 0.5);
   margin:0 0 10px 0;
   padding:10px 10px 10px 10px;
   }
/* ######################## #Wrapper #####################*/                   
#Wrapper {
    margin:1rem auto 0 auto;     
    max-width:1200px;           
    width:100%;
    line-height:1.5em;
    padding:10px;   
    background-color:#fff;  
    display:flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;    
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;    
    box-shadow: 0 30px 35px -10px #000;     
}         
/* ########################## main ########################### */
main {      
    min-height:500px;
    min-height:50rem;
    padding:2rem 2rem 2rem 3rem;
    flex: 2 ;
    }
    
main figure {
  border: 0px solid #EAEADC;  
  -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
   border-radius: 10px;
  box-shadow: 0 30px 35px -10px #000;
  margin:20px;  
  }    
  main figcaption {
  padding: 0 0.5rem 0.5rem;
  font-size:1rem;
  }

/* ######################## sidebar #####################*/


/* ######################## footer #####################*/
footer {    
    padding:5px 0;   
    justify-content:space-around;  
    #background:#4069A1;
    #background:#525f72;
    background:#525f72;
    border-radius:0 0 10px 10px;    
    }
    
footer p{    
    
    color:#fff;
}    
footer.flex_box a, 
.xing {
    border-bottom: 1px dotted #cecece;
    color:#fff;
}
/* ##################### Formatierung ###################*/
/* *** Grundfarben *** */

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

/* *** ----------------- gemeinsamme Formatierungen  */  
header p,
footer p
{
   
    }

header,
footer{
    flex: 1 100%;    
   }
footer aside.flex_box {
   flex:1 1 0;
   justify-content:space-around;
   max-width:70%;
   }
p { 
 hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
}
   
p,
li {
    font-size:14px;
    font-size:1.4rem;}   
/* *** -------------------------- Hervorhebungen */
.fett {font-weight:bold;}
small {font-size:70%;}   
em {color:#FF0000;}      /* hervorgehobener Text */
strong {font-weight:bold;}          /* besonders wichtiger Text */

/*  * *** -------------------------- Überschriften */          
h1, h2, h3, h4, h5, h6      {
        font-weight:bold;        
        padding:5px 0;
        padding:0.5rem 0;                         
        }
        
h1 {
    font-size:18px;
    font-size:1.8rem;
    margin:0 0 10px 0;    
    } 
    
h2 {        
    padding:5px 0 2,5px 0;
    padding:0.312rem 0 0 0;
    }      

h3 {
    
    }      

h4 {
     
    }      

h5 {
    
    }      

h6 {
    
    }      


    
/* *** ----------------------- Links */    
a   {    
    text-decoration:none;   
    }        
    
a:link {
    
}

a:visited {
    color:#cecece;
}

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

a:active {
    
}  

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

nav.main_menu {
    #width:17%;
    #float:left;
    margin:24px 0 24px 0;
    margin:2.4rem 0 2.4rem 0;
    font-size:16px;
    font-size:1.6rem;   
    border-right:1px solid #4069A1;
    }

nav.main_menu  ul, 
nav.main_menu  li
 {
    margin:10px 10px 10px 0;
    margin:1rem 1rem 1rem 1rem;    
    
    }
nav.main_menu  ul {
   padding:10px 0 10px 0;
   padding:1rem 0 1rem 0;
   }    
nav.main_menu a, .AktuelleSeite {
  display:block;
  padding:0 0 0 10px;
  #color:#cdcdcd;
  }    
nav.main_menu  a:hover, nav.main_menu  li:hover{    
    background:#cecece;
    color:#4069A1;
    }


nav.main_menu .AktuelleSeite :hover, 
nav.main_menu li .AktuelleSeite :hover, 
nav.main_menu .AktuelleSeite  {
    #background:#4069A1;    
    color:#000033;
    font-weight:bold;
    #padding:1rem;
    
}     


/* *** #################### Grafiken ######################## */
/* *** Bild rechts */

.flex_box ul {
    flex: 1;
    }
.flex_rechts {
    width:20rem;
    width:200px;
    order:2;
    justify-content:flex-end; 
    }
     
/* *** #################### Article ######################## */
.flex_box article {
  flex:1 1 0;

  }    
/* *** #################### Listen ######################### */

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

/* *** #################### individuelle Formatierung zum Projekt ############ */
/* *** ------------ Header */
/* Kontaktformular */
p.eingabefehler {
	color:red;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;



/* ------------------- Webdesign -------------- */
.impressum .agentur {
  
  }
.impressum .agentur h30 {
  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 main ul {
  margin:0 0 0 20px;
  margin:0 0 0 2rem;
  }  
  
.datenschutz main li:before {
   content:" - ";
   color:#000;
   }  
:target {color:#4069A1;}