/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}



/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix::after {
  content: " ";
  display: table;
} 

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* Für den IE6 und IE7 */
}


/*-------------------------------------------------------------
------------- GLOBAL STYLING ----------------------------------
-------------------------------------------------------------*/


html{font-size: 62.5%; height: 100%; box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

body{font: 100 1.2rem/1.25 Helvetica, Arial, sans-serif;height:100%; margin: 0 0 2rem;}

h1{font-size: 1.6rem; line-height: 1.5; font-weight: 700; letter-spacing: .2rem; text-transform: uppercase;margin-bottom: 1rem;}
h1 .caption, h2 .caption{text-transform: none;font-weight: 100;letter-spacing: 0;font-size: 1.2rem;}

h2{font-size: 1.2rem; line-height: 1.5; font-weight: 700; letter-spacing: .2rem; text-transform: uppercase;}
h3{font-size: 1.2rem; line-height: 1.5; font-weight: 700;}


strong{font-weight: 700;}



/*-------------------------------------------------------------
---------------- STRUCTURE ------------------------------------
-------------------------------------------------------------*/

#pagewrap {height:100%; position:relative;}

body > #pagewrap {height: auto; min-height: 100%;}

header{width:100%;background-color: #000;height:5rem!important;color: #fff;display: inline-block;line-height: 1.5;}

#logo{color: #fff; float:left;width: 30%;font-size: 2rem;	margin-top:3rem;}

#logo a, #logo a:active, #logo a:visited, #logo a:focus{    color: #fff; float:left;width: 30%;font-size: 2rem;	margin-top:3rem;}

footer{height:1.7rem; width:100%;border-top: 1px solid #ddd;font-size: 1rem; position: fixed; left: 0; bottom: 0;background-color: #fff;}
footer p{text-align: right ;}


/*-------------------------------------------------------------
---------------- NAVIGATION -----------------------------------
-------------------------------------------------------------*/

#nav{padding-top: 3.8rem; float:right;width:70%;margin-right: -15px;}

    #nav > a {display: none;}
    #nav li {position: relative;}
 
/* first level */
 
    #nav > ul {height: 3.75em; float:right;}

        #nav > ul > li {height: 100%; float: left;}
 
/* second level */
 
    #nav li ul {display: none; position: absolute; top: 50%; background-color: #ddd;margin-top: -1rem;padding:1rem; white-space: nowrap;}
    
        #nav li:hover ul {display: block;}
        
        #nav li ul a, #nav li ul a:visited{color:#666;}

#nav a{padding:5px 15px 0px 15px; line-height: 1;}     
#nav a, #nav a:active, #nav a:visited, #nav a:focus
	{color: #fff; text-decoration: none; text-transform: uppercase; outline: none;width:100%;}

#nav a:hover{color: #666;background-color: #fff;}


/* ACTIVE MENU MARKERS */
	
	/* first level */
	#nav ul li .active:before {content: "•"; font-weight: 700; margin-top: -0.25rem}
	
	/* second level */
	#nav ul li ul li .active {color: #000;}
/* 	#nav ul li ul li .active:before {content: none;} */




/*-------------------------------------------------------------
---------------- CONTENT --------------------------------------
-------------------------------------------------------------*/

.content-width{width:70%;margin:auto;max-width: 100rem;padding-bottom: 1.7rem;}


/* TEASER Article */
.teaser a, .teaser a:active, .teaser a:visited, .teaser a:focus{text-decoration: inherit;color: inherit;outline:inherit;}
.teaser em{text-decoration: underline;font-weight: 700;}


article{width:100%; margin-top: 4rem; padding-bottom: 2.5rem; border-bottom: 1px dotted black;}
article:last-child{border-bottom: none;}
article a, article a:active, article a:visited, article a:focus{color: inherit;outline:inherit;}

article p{margin-bottom: 0.5rem;}
article img{width:100%; height:auto;}


.intro{margin-bottom: 2rem;}

figure{margin-bottom: 1rem;}
figcaption{font-size: 1rem; text-align: right; height:2rem;}

.zitat{font-style: italic;}
.bullit{list-style: disc inside none;}

.spiegelstriche li:before{content:"– ";}
.spiegelstriche li{margin-bottom: 5px;}

/* ------------------------ COLUMN-LAYOUT ----------------------------- */

.spalte{float:left;padding:0 1rem;}

.viertel{width:25%;}
.drittel{width:33.3333%;}
.zweidrittel{width: 66.6666%;}
.halbe{width: 50%;}

div.spalte:first-of-type{padding-left: 0;}
div.spalte:last-of-type{padding-right:0;}
.updowngirl{margin-top: -4rem;padding-top: 4rem; border-left: 1px dotted black; padding-left:0.5rem!important;display:table; height:10rem;}

.spaltenausgleich .spalte:first-of-type{padding-right: 2rem;}
.spaltenausgleich .spalte:last-of-type{padding-left: 2rem;}


.initial{float: left; margin:0 0.5rem 0.1rem 0;width:2rem;height:auto;}

.longcopy h3, .longcopy p{margin-bottom: 1rem;}




table.vita{
   border-collapse: separate;
   border-spacing: 8px; 
}






        
/* -------------------------------------------------------------
 -------------------------------------------------------------
 -------------------------------------------------------------
 -------------------------------------------------------------
------------------- MEDIA QUERIES ------------------------------
 -------------------------------------------------------------
 -------------------------------------------------------------
 -------------------------------------------------------------
--------------------------------------------------------------*/

@media only screen and ( max-width: 800px ) /* 640 */
{
	#logo{font-size: 1.8rem; margin-top:3.3rem;width: 20%}
	#nav a{padding: 5px 7px 0px 7px;}	
	.content-width{width:85%;margin:auto;}
}
        
@media only screen and ( max-width: 40em ) /* 640 */
{
	#logo{font-size: 1.6rem;margin-top:3.5rem;}

	.content-width{width:95%;margin:auto;}
	
	#nav ul{background-color: #ddd;margin-top:-0rem;padding-top: 1.5rem;line-height: 2; border-left: 2px solid #fff;  }
	
	#nav li ul{margin-top:-0.6rem;  border:none; }


	
    #nav
    {position: relative; float:right; padding-top: 3.6rem;width:auto;padding-right: 3.75rem;margin-right: -1.25rem;}
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */

    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		margin-top:-0.25rem;
	}
		
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
            border-bottom: 1px solid white;

        }
         #nav ul li a, #nav ul li a:visited,  #nav ul li a:hover{color: #666!important;padding-bottom: 0.5rem;}

    /* second level */
 
    #nav li ul
    {
        position: static;
    }

.spalte, div.spalte:first-of-type, div.spalte:last-of-type, .spaltenausgleich .spalte:first-of-type, .spaltenausgleich .spalte:last-of-type{padding-left:0; padding-right:0; }
.spalte{float: none;}
.viertel, .drittel, .halbe, .zweidrittel{width: 100%;border-style: none;}
.spaltenabschluss:last-child{margin-bottom: 3rem;}


}