/*
annette-pruefer.de - persönliche Website.
Start 20.02.2018.
Letzte Änderung: 19.02.2018.
Author: Annette Prüfer


/* Allgemeines */



*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
	}


@-ms-viewport{ width: device-width; zoom:1;}
@-o-viewport{ width: device-width; zoom:1;}
@viewport{ width: device-width; zoom:1;}

html {
        height: 100%;
}

body {
         width:100%;
		 height: 100%;
		}


*{
		padding: 0;
        margin: 0;
}


img, a img {
	    max-width: 100%;
		height: auto;
		border: 0px;
		}
		
:link img, :visited img{
        border: 0px;
}

		

ul,li{
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: relative;
}

.under{
        text-decoration:underline;}
/*    
.normal     { white-space:normal; }
.pre        { white-space:pre; 
			  font-family:monospace; }
.pre-wrap   { white-space:pre-wrap; }
.pre-line   { white-space:pre-line; }
.nowrap     { white-space:nowrap; }
  
.before::before, .after::after {
            content: "\A";
            white-space: pre;
        }*/

/* Textauszeichnung */






*{
         padding:0;
         margin: 0;
}



ol, ul, li{
         padding:0;
         margin: 0;
         list-style-type:none;
         list-style: none;
         list-style-image:url(...);
}




.clear {
        clear:both;
}



.leftalign{
         float:left;
}

.rightalign{
         float:right;
}


.anker{
         color: #eeeeee;
}

/* Allgemeines Ende */


/* ----------------------------------------------------------------------------- *
 *                            Basic Layout                      *
 * ----------------------------------------------------------------------------- */



#wrap {
        margin: 0 auto;
        width:100%;
	    max-width:102.4em;/* 1024px */
		padding:0;
        height:100%;
}
		


	
header {
	margin: 0 auto;
	position:relative;

	
}


#main,
#content,
#footer {
		position: relative;
        width: 100%;
		height:auto;
}
		
		
#content, #footer {
      top:4em;
}


#footer {
     margin:2em 0;
}



.head {/* Kopfbereich */
    position:relative;
	top:2em;
	width:100%;
	height:9em;
}


.logo {/* Logo positionieren */
	position:relative;
	top: 0.5em;
	width: 3.7%;
}


.headline{/* Kopfbereich */
	position:relative;
	
}



 .aktuell{/* formatiert frame-content */
 position:relative;
	 padding-top:5em; 
	 color:#333;
	 text-align:right:
	
} 



.frame{ /* Fußzeile */
	  
	    width:100%;
		height:5em;
}

	
	

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav {
	  position:relative;
	  width:100%;
      font-family: "Trebuchet MS",Helvetica,Arial;
      font-size: 1.4em; /* 20px */
	  margin:0;
	  padding:0.5em 0;
	  border-top:1px solid #ccc;
	 
	  /*background-color:rgba(200, 200, 200, 0.3);  hellgrau */
	  

	  
}
nav a {/*--definiert die "Drop-Down-Links" im Normalzustand--*/
        position:relative;
        display: block;
       
}



nav ul {/*--formatiert die Themenbloecke--*/
		text-align:center;
		margin:0;
		padding:0;
}


nav ul li {
         position:relative;
         display:inline;
	     padding:0.2em 0.6em;/*--Abstand der Links--*/
         list-style-type: none;
} 

nav ul > li > a {
	padding: 1em 16px 1em 16px;
	display: inline-block;
	
}        

nav ul > li > a, nav ul > li > strong {
    padding: 0.6em 20px;
    
}	

nav ul a:link {
    text-decoration: none;
}	
		 
nav a:link {
    color:rgba(51, 51, 51, 0.6); /* hellgrau */
}

#navMain a:link  {
    background-color:transparent; /* keine */
}


#navMain .aktiv {
    background-color:transparent!important; /* keine */
	text-decoration:underline;
}	

#navMain a:hover {
    background-color:transparent; /* grau */
	color:#999966;
}	



.main-nav {
	  	 margin: 0 auto;
		 text-align:center;
		 width:100%;
}

#navMain {
	display: block;
}



/*--nur fuer IE-Versionen kleiner gleich 6 erkennbar--*/

* html #nav ul li {
         float:left;
         width: 100%;
}

/*--nur fuer IE 7 erkennbar--*/
/*--formatiert die Themenbloecke--*/

*+ html #nav ul  {
         position:relative;
         display:block;
         list-style-type: none;
}



.js .nav-collapse {
		position: relative;
		overflow: visible;
	}
	.js .nav-collapse.closed {
		max-height: none;
	}
	/* Menü-Link verstecken in großen Viewports */
	a.nav-toggle {
		display: none;
	}


#artikelimgl{
	    margin: 0 auto;
        width:50%;
        height:auto;
		text-align: center;
		border-right:1px dotted #999999;
        float:left;
		clear:both;
 }
 
#artikelimgr{
	   margin: 0 auto;
        width:50%;
        height:auto;
		text-align:center;
        float:right;
		
}
	

#artikelimgl img, #artikelimgr img {
	    margin: 0 auto;
        position:relative;
		display:block;
		width:80%;
		max-width:40em; /*maximale Größe*/
		
}


.subline{
        width:100%;
        border-bottom:1px dotted #999999;
        padding:20px 0px 0px 0px;
        clear:both;
}
 
/* ----------------------------------------------------------------------------- *
 *                            Aktuell                     *
 * ----------------------------------------------------------------------------- */


 .datum{
	 padding:0.5em 0px; 
} 	

.middle{
	 	margin: 0 auto;
		padding-top:4em;
        width:65%;
        height:auto;
		display:block;
	    text-align:center;
		alignment-adjust:central;
}	
			
		
.copy{
		display:block;
	   }
		 
.frame a{
		padding-left: 1em;
        border-left: 1px solid #ccc;
}	


#artikelimg{
	    margin: 0 auto;
        width:55%;
        height:auto;
		text-align: left;
        float:left;
		clear:both;
		
 }
 
#artikeltext{
	   margin: 0 auto;
        width:43%;
        height:auto;
		text-align:left;
        float:right;
		padding:2em 0 0 2em;
}
	
		
/* ----------------------------------------------------------------------------- *
 *                            Grafik /                           *
 * ----------------------------------------------------------------------------- */




/* ----------------------------------------------------------------------------- *
 *                             Illustration                           *
 * ----------------------------------------------------------------------------- */


 #artikelillul{
	    margin: 0 auto;
        width:50%;
        height:auto;
		text-align: center;
		border-right:1px dotted #999999;
        float:left;
		clear:both;
 }
 
#artikelillur{
	   margin: 0 auto;
        width:50%;
        height:auto;
		text-align:center;
        float:right;
		
}
	

#artikelillul img, #artikelillur img {
	    margin: 0 auto;
        position:relative;
		display:block;
		width:80%;
		max-width:100em;
		
}

/* ----------------------------------------------------------------------------- *
 *                             Fotografie                         *
 * ----------------------------------------------------------------------------- */

#artikelimg.border img{
	border:18px solid #fff;
	  
 }

/* ----------------------------------------------------------------------------- *
 *                             Vita                        *
 * ----------------------------------------------------------------------------- */


.unterstrich{
        width:100%;
        border-bottom:1px dotted #999999;
        padding-top:1em; 
		margin-bottom:4em;
        
}

#artikelimg.vita{
	   width:30%;
}
 
#artikeltext.vita{
	   width:70%;
	   padding-left:3em;
 }
 
#artikelsubline{
        width:100%;
        border-bottom:1px dotted #999999;
        padding:20px 0px 0px 0px;
        clear:both;
}


/* ----------------------------------------------------------------------------- *
 *                              Kontakt                          *
 * ----------------------------------------------------------------------------- */

	
		
#konttext{
	    margin: 0 auto;
        width:40%;
        height:auto;
		text-align: left;
        float:left;
		clear:both;
 }
 
#kontimg{
	   
        margin: 0 auto;
        width:60%;
        height:auto;
		text-align:left;
        float:right;
		overflow:hidden;
}	
		


 
 /* _ _ _ _ _ _ _ _   Desktop  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _  _ Desktop_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */

/* von 1025 px/64.0625 em - 1366 px /85.375 em*/
@media only screen and (min-width:64.0625em) and (max-width:85.375em) {
	

#wrap {
      
        width:90%;
	    max-width:85.375.4em;/* 1366px */
		
}

.head {
	width:100%;
	height:12em;
	padding-top: 3em;
	
}

.headline{/* Kopfbereich */
	position:relative;
	
}

}

 
 /* _ _ _ _ _ _ _ _   Desktop  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _  _ Desktop Landscape_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */

/* von 1025 px/64.0625 em - 1366 px /85.375 em*/
@media only screen and (min-width:64.0625em) and (max-width:85.375em) and (orientation: landscape){
	
}



/* _ _ _ _ _ _ _ _  kleiner Desktop  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ kleiner Desktop_ _ _ _ _ _ _ _ _ _ _ _ */
/* von 769 px/48em - 1024 px/64em */
@media only screen and (min-width:48.0625em) and (max-width:64em){
	

#wrap {
        width: 80%;
		max-width:102.4em;/* 1024px */
		
}

.head {
	top:3em;
	width:100%;
	height:12em;
}

.headline {
	position:relative;
	top:1.5em;
}



.logo {/* Logo positionieren */
	position:relative;
	top: 0.3em;
	width: 4%;
}

.aktuell{/* formatiert frame-content */
	 padding-top:4em;
} 

nav ul > li > a {
	padding: 0.7em 10px 0.7em 10px;
} 
}


/* _ _ _ _ _ _ _ _  kleiner Desktop  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ kleiner Desktop Landscape _ _ _ _ _ _ _ _  */
/* von 769 px/48em - 1024 px/64em */
@media only screen and (min-width:48.0625em) and (max-width:64em) and (orientation: landscape){

	
}

 
 
 
/* _ _ _ _ _ _ _ _  Tablets _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Tablets  _ _ _ _ _ _ _  */
/* von 641 px/40,0625em - 768 px/48 em */
@media only screen and (min-width:40.0625em) and (max-width:48em){


#wrap {
	width:85%;	
}

#main,
#header,
#content,
#footer {
	    width: 100%;
		max-width:76.8em;
		}


#footer {
        margin:0em 0em 2em 0em;
 }
	

.logo {/* Logo positionieren */
	position:relative;
	top: 0.3em;
	width: 4%;
}

.head {
	
	height:7em;
}
 

.headline{/* Kopfbereich */
	position:relative;
	top: 1em;
}

	

.frame{
	    position:relative;
		width:100%;
		margin-left:0px;
		padding:2em 0;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav ul li {
         
	     padding:0.2em 0.3em;/*--Abstand der Links--*/
        
}


nav ul > li > a {
	padding: 0.7em 10px 0.7em 10px;
	display: inline-block;
	
}
 
 #navMain {
	display: block;
}

/* ----------------------------------------------------------------------------- *
 *                            Aktuell                     *
 * ----------------------------------------------------------------------------- */

.middle{
	 	padding-top:0.75em;
        width:80%;
}	
			 
	
/* ----------------------------------------------------------------------------- *
 *                            Grafik                       *
 * ----------------------------------------------------------------------------- */

.last{
        border-bottom:0px !important;
 }


/* ----------------------------------------------------------------------------- *
 *                             Illustration                        *
 * ----------------------------------------------------------------------------- */
 
#artikeltext{
	   width:30%;
       
}

/* ----------------------------------------------------------------------------- *
 *                             Vita                        *
 * ----------------------------------------------------------------------------- */

div#artikelimg.vita{
	   width:50%!important;
}
 
div#artikeltext.vita{
	   width:100%;
	   padding-left:0em;
 }
 
 /* ----------------------------------------------------------------------------- *
 *                              Kontakt                          *
 * ----------------------------------------------------------------------------- */

.kontakt{  
		width:100%;
      
 }		
		
#konttext{
		width:100%;
        float:none;
		
 }
 
#kontimg{
	   width:100%;
        float:none;
		overflow:hidden;
}	


}


/* von 641 px/40.0625em - 768 px/48 em */
@media only screen and (min-width:40.0625em) and (max-width:48em) and (orientation:landscape){

}



	

/* _ _ _ _ _ _ _ _ Smartphones _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Smartphones _ _ _ _ _ _ _ _  */
/* bis 640 px /40em */
@media only screen and (max-width:40em){


#wrap {
        width: 100%;
}

#main,
#header,
#content,
#footer {
	    width: 100%;
		max-width:640px;/* bis 640 px */
		margin:0;
}	

#content, #footer{
        top: 0;
		padding-bottom:0;
}

.logo {/* Logo positionieren */
	top: 0.5em;
	width: 6%;
}



.subline{
	display:none;
}


.head { /* Höhe Kopfzeile*/
      	height: 8em;
	
}

.bruch { /* Höhe Kopfzeile*/
      	display: block;
		padding-bottom:1em;
}



/* ----------------------------------------------------------------------------- *
 *                      Beispiel Responsive-Nav im Basis-Layout                  *
 * ----------------------------------------------------------------------------- */


/***! responsive-nav.js 1.0.39 by @viljamis ***/

.js .nav-collapse {
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}

.nav-collapse.opened {
	max-height: 9999px;
}

.nav-toggle {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}



/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */

 nav {
	/* clearing für die floatenden LIs */
	overflow: hidden;
	 font-size: 3.5vw;
	 padding:0;
	  border:0;
}


nav ul {
     margin: 0;
     padding: 0;
     width: 100%;
     display: inline;
     list-style: none;
}
 #nav li {
     width: 100%;
     display: block;
 }


nav ul li {
         position:relative;
       
         list-style-type: none;
		
} 

nav ul > li > a {
	padding: 0.7em 10px 0.7em 10px;	
	 margin-left: 0;
}

nav ul > li > a, nav ul > li > strong {
    padding: 0.3em 10px;
    display: block;
}

nav ul a:link {
    text-decoration: none;
}

#navMain a:link  {
    background-color:rgba(240, 240, 240, 0.6); /* grau */
}

#navMain .aktiv {
    background-color:rgba(200, 200, 200, 0.6)!important; /* grau */
	text-decoration:underline;
}	

#navMain a:hover {
    background-color:rgba(200, 200, 200, 0.6) /* grau */
}



/*** Menü-Link zum Ein-und Ausblenden des Menüs ***/

a.nav-toggle {
	position: absolute;
	top: 0.4rem;
	right: 1rem;
	display: inline-block;
	padding: 0.357em;
	font-weight: 300;
	color: #000;
	background: #fff
	;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	border-radius: 0.1em;
	text-decoration: none;
	cursor: pointer;
}

a.nav-toggle:hover {
	
	background: #cad5e1;
}


/* ----------------------------------------------------------------------------- *
 *                            Aktuell                     *
 * ----------------------------------------------------------------------------- */


 .aktuell{/* formatiert frame-content */
	
	 color:#333;
} 


.middle{
	 	padding-top:0.75em;
        width:80%;
}				 
	
/* ----------------------------------------------------------------------------- *
 *                            Grafik  /Illu                     *
 * ----------------------------------------------------------------------------- */

#artikelimgl{
	    border-right:0px;
		padding:0 0 2em 0;	
 }
 
#artikelimgl,#artikelimgr{
		width:90%;
        float:none;
		border-bottom:1px dotted #999999;
}

#artikelimgr{
	   padding:2em 0 2em 0;	
 }



#artikelimgl img, #artikelimgr img{
	    margin: 0 auto;
        position:relative;
		width:100%;
}

.subline{ /* prüfen */
        border-bottom:0px;
        margin:0px;
 }

.last{
        border-bottom:0px !important;
 }


#artikelimg,#artikeltext {    
        width:90%;
        float:none;	
 }
 
 #artikeltext{
		padding:0 0 0 1em;
}



/* ----------------------------------------------------------------------------- *
 *                             Vita                        *
 * ----------------------------------------------------------------------------- */


div#artikelimg.vita{
	   width:90%!important;
}
 
div#artikeltext.vita{
	   width:90%;
	   padding-left:0em;
 }
 
/* ----------------------------------------------------------------------------- *
 *                              Kontakt                          *
 * ----------------------------------------------------------------------------- */

.kontakt{  
		margin: 0 auto;
		width:90%;
        text-align: left;
        color:#666;
 }		
		
#konttext{
		width:100%;
        float:none;
		
 }
 
#kontimg{
	   
        width:100%;
        float:none;
		overflow:hidden;
}	
		
}


/* _ _ _ _ _ _ _ _ Smartphones _ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Smartphones Landscape _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ __ */
/* bis 640px /40em  und horizontal*/
@media only screen and (max-width:40em) and (orientation: landscape){
	
	
/* ----------------------------------------------------------------------------- *
 *                            Basic Layout                      *
 * ----------------------------------------------------------------------------- */

#wrap{ 
	width:80%;
 }
 


#master{
	padding:2em 2em 0 2em;
}	


	
/* ----------------------------------------------------------------------------- *
 *                             Illustration                        *
 * ----------------------------------------------------------------------------- */

#artikelimg{
	   
        width:60%;
        float:left;
		clear:both;
 }
 
#artikeltext{
	   width:40%;
       float:right;
	   padding:1em 0 0 1em;
}


/* ----------------------------------------------------------------------------- *
 *                             Vita                        *
 * ----------------------------------------------------------------------------- */

div#artikelimg.vita{
	   width:50%!important;
}
 
div#artikeltext.vita{
	   width:100%;
	   padding-left:0em;
 }

}