@charset "utf-8";

/* allgemeines CSS ------------------------------------------------- */
* { 
margin:0;
padding:0;
border: 0;
z-index: 1;
font-size: 100%;
font-style: normal;
font-weight: 500;
font-stretch: normal;
font-variant: normal;    
color: #333;
font-family: "Greta Sans Regular", "Calibri", Helvetica, Verdana, sans-serif;
letter-spacing: 0.02em;
line-height: 1.2em;    
hyphens: none;
}

body {
background: #fff;
}

/* Textformatierung */
h1 {
font-family: "Greta Sans SemiBold", "Calibri", Helvetica, Verdana, sans-serif;    
font-size: 1.5em;
}

div.projekt h1 { 
margin: 1.5em 0 0 0;
}

h2  {
font-family: "Greta Sans SemiBold", "Calibri", Helvetica, Verdana, sans-serif; 
font-size: 1.1em;
margin: 0 0 0.2em 0;
}

h3 {
 font-family: "Greta Sans SemiBold", "Calibri", Helvetica, Verdana, sans-serif;    
}

strong, main#kontaktseite h1, main#kontaktseite h2 { 
font-family: "Greta Sans Bold", "Calibri", Helvetica, Verdana, sans-serif;
 }

.kursiv, em {
  font-family: "Greta Sans Regular Italic", "Calibri", Helvetica, Verdana, sans-serif;  
}

.text-normal {
  font-family: "Greta Sans Regular", "Calibri", Helvetica, Verdana, sans-serif !important;
  font-style: normal;
  line-height: 1.4em;
}

/* Bilder */
img {
	max-width: 100%;
	height: auto; 
}

img.rahmen {
	border: 1px solid #ccc;
}

/* Aussehen von Links */
a:link, a:visited, a:focus,  a:active { 
text-decoration: none;
color: #75b0a5; 
}

a:hover { 
text-decoration: underline;
color: #75b0a5;
}

/* Startseite */

    
main#startseite h1 {
font-family: "Greta Sans SemiBold", "Calibri", Helvetica, Verdana, sans-serif;
font-size: 1.8em;
line-height: 1.2em;   
letter-spacing: 0.01em; 
  }    
    
main#startseite h2 {
font-family: "Greta Sans SemiBold", "Calibri", Helvetica, Verdana, sans-serif;
font-size: 1.2em; 
line-height: 1.2em; 
letter-spacing: 0.01em; 
margin: 0 0 0.8em 0;    
  }

main#startseite p {
    margin: 0.8em 0 0 0;
    line-height: 1.5em;     
      }

main#startseite ul {
        margin: 0.8em 0 0 0.8em; 
          }
main#startseite li {
        line-height: 1.5em;
              }

main#startseite p:first-child {
    margin: 0 0 0.1em 0;    
    text-transform: uppercase;
    letter-spacing: 0.1em; 
 }

video {
   width: 100%;
   height: auto;
   margin: 1em 0 0 0;
 }
  
/* Kopf */
header {
position: sticky; /* damit Inhalt drunter wegscrollen kann */
top: 0; /* sonst geht sticky nicht */
width: 50em;
margin: 0 0 1em 0;
z-index: 2;
background: #fff;
}

/* Navigation */    
nav {
height: 0.3em;    
padding: 1.4em 0 2.1em 0;
}

header ul {
width: 35em;
display: flex;
flex-direction: row;
justify-content: space-around;
}

header li {
	list-style: none;
    }

header li a  {
	font-size: 1.1em;
    letter-spacing: 0.04em;
}

a#hervorgehoben {
	color: #909090;
}

	
div#header_hr hr {
    border-top: 1px solid #404040;
	border-bottom: 5px solid #fff; /* weiße Linie nach unten */
	z-index: 2;
}

/* Navigation responsive */  
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

nav label { /* Nav-Burger Formatierung */
  position: absolute;
  display: none;
  top: 0;
  left: 0.2em;
  height: 3em;
  width: 3em;
  background: #fff;
  cursor: pointer;
  z-index: 2;
}

nav > label > span {/* Nav-Burger Formatierung */
  display: block;
  margin: 5px auto;
  height: 3px;
  width: 25px;
  border-radius: 1px;
  background: #75b0a5;
  transition: 0.5s;
}

nav > label > span#titel_nav {/* Nav-Burger Formatierung */
  display: block;
  margin: -1.7em 0 0 3.7em;
  height: auto;
  width: auto;
  background: none;
    font-family: "Greta Sans SemiBold", "Calibri", Helvetica, Verdana, sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

nav > label > span:nth-child(1) {
  margin-top: 25px;
}

input[type=checkbox]:checked ~ ul.menu {
  top: 0;
}

input[type=checkbox]:checked ~ label span {
  background: #75b0a5; /* Farbe Kreuz */
}

input[type=checkbox]:checked ~ label span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

input[type=checkbox]:checked ~ label span:nth-child(2) {
  opacity: 0;
}

input[type=checkbox]:checked ~ label span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* Projektuebersicht */  
main#projektuebersicht { 
padding: 0 0 0 1em;
  } 

#projektuebersicht article {
	display: flex;
}

article div { /* Abstände Buchtitel und Text */
    flex: 0.7;
	margin: 0 1.25em 4.0em 1.25em;
}
    
div.projekt p {
  font-family: "Greta Sans Regular Italic", "Calibri", Helvetica, Verdana, sans-serif; 
    font-size: 1.1em;
    }    

/* Flexklassen */ 
.flex01 {
    flex:0.1;
	-webkit-flex:0.1;
	-ms-flex: 0.1;
}

.flex02 {
    flex:0.2;
	-webkit-flex:0.2;
	-ms-flex: 0.2;
}

.flex03 {
    flex:0.3;
	-webkit-flex:0.3;
	-ms-flex: 0.3;
}

.flex04 {
    flex:0.4;
	-webkit-flex:0.4;
	-ms-flex: 0.4;
}

.flex05 {
    flex:0.5;
	-webkit-flex:0.5;
	-ms-flex: 0.5;
}

.flex06 {
    flex:0.6;
	-webkit-flex:0.6;
	-ms-flex: 0.6;
}

.flex07 {
    flex:0.7;
	-webkit-flex:0.7;
	-ms-flex: 0.7;
}

.flex08 {
    flex:0.8;
	-webkit-flex:0.8;
	-ms-flex: 0.8;
}

.flex09 {
    flex:0.9;
	-webkit-flex:0.9;
	-ms-flex: 0.9;
}

.flex1 {
    flex:1;
	-webkit-flex:1;
	-ms-flex: 1;
}

.flex15 {
    flex:1.5;
	-webkit-flex:1.5;
	-ms-flex: 1.5;
}

.flex2 {
    flex:2;
	-webkit-flex:2;
	-ms-flex: 2;
}

.flex3 {
    flex:3;
	-webkit-flex:3;
	-ms-flex: 3;
}

/* Arbeiten */ 
#arbeittitel {
	margin: 0 0 2em 2.3em;
}

div#arbeitbild { 
    width: 95%;
    margin: 0 2.5% 0 2.5%;
}

div#arbeitbild img { 
	margin: 0 0 1em 0;
}
     
#arbeittitel p {
  font-family: "Greta Sans Regular Italic", "Calibri", Helvetica, Verdana, sans-serif;       
    } 

div#arbeitbild p {
      margin: 0.8em 0 0 0;
      line-height: 1.5em;     
        }
  
div#arbeitbild ul {
          margin: 0.8em 0 0 0.8em; 
            }
div#arbeitbild li {
          line-height: 1.5em;
                }
  
 
/* Portfolio,*/  
main#portfolio, main#vitaseite {
	padding: 0 0 0 3em;
    width: 80%;
}

h1#portfoliotitel > span {
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    }
    
div#portfoliobild {
	margin: 0.5em 0 0 0;
}

/* Vita */      
main#vitaseite {
	padding: 0 0 0 3em;
    width: 80%;
}    

div#vitabild {
	margin: 0 0 0.7em 0;
}

div#vitatext p, main#kontaktseite p, main#lesungen p {
    line-height: 1.5em;
}

/* Kontakt */  
main#kontaktseite {
	padding: 0 0 0 8em;
    width: 60%;
}

/* Lesungen */  
main#kontaktseite, main#lesungen {
	padding: 0 0 0 2em;
    width: 70%;
}

    
/* Link zum Impressum auf allen Seiten */ 
footer {
	font-size: 0.8em;
	text-transform: uppercase;
    letter-spacing: 0.1em;
	margin: 2em 0 0 0;
}
    
footer > a {
    letter-spacing: 0.1em;
} 

/* Mouseover Bildgallerie */
a img:hover { /* Bild wird beim überfahren grau */
opacity: 0.5;
}    


/* Kontaktseite, Lesungen */
ul {
    margin-left: 1em;
}

main#kontaktseite {
    hyphens: auto;
}

main#kontaktseite h2 {
        margin: 2.0em 0 0 0;
}    
  
main#kontaktseite h3 {
    margin: 1.0em 0 0.3em 0;
    }

main#kontaktseite p, main#lesungen p {
	hyphens: auto;
  margin: 0 0 0.5em 0;
}

main#kontaktseite ul {
    margin: 1em 0 1em 1em;
    }

address {
	  	margin: 0 0 1em 0;
}

/* Lesungen */
#lesungsbilder {
  margin: 3em 0 0 0;
}

/* Breakpoint Desktop --------------------------------------------------------------------------- */
@media only screen and (min-width: 52em) {
/* body */
body { 
width: 50em; 
margin: 0 auto 5em auto;
  }
    
/* Startseite */
main#startseite { 
padding: 0 0 0 2.1em;
width: 80%; 
  }

.breite80 { width: 80%; }
.breite70 { width: 70%; }
.breite60 { width: 60%; }
.breite50 { width: 50%; margin: 0 0 0.8em 0; }
.breite40 { width: 40%; }
.breite30 { width: 30%; }

 }

/* Breakpoint Tablet  –––––––––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ 
@media only screen and (max-width: 51.9em) and (min-width: 40.01em) {

/* Main */
body { 
width: 95%; 
margin: 0 auto 5em auto;
  }
    
/* Kopf */
header {
    width: 95%;
}
     
/* Startseite */
main#startseite { 
padding: 0 0 0 2em;
width: 70%; 
  }
/* Nav */    
header ul {
    width: 38em;
}

.breite50 { margin: 0 0 0.8em 0; }

}


/* Breakpoint Smartphone  –––––––––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ 
@media only screen and (max-width: 40em) {
body { 
width: 100%; 
margin: 0 auto 5em auto;
	  }
img {
    width: 100%;
    height: auto;
}    
	  
/* Kopf */
header {
position: static;    
width: 100%;
}
  
main {
width: 95%;
margin: 0 auto;    
}

p {
  hyphens: auto;
}
    
/* Navigation ------------------------------------------- */
nav {
height: 4em;
padding: 0;      
    }    
    
nav > ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    top: -100vh; /* damit Nav erst nicht sichtbar */
    left: 0;
    height: 100vh;
    width: 100%;
    background: rgba(255, 255, 255, 0.9); /* Hintergrundfarbe Navi */
  }
  
nav > ul > li {
    margin: 0 0 1em 0;
    font-size: 1.5em;
  }
  
nav label {
    display: block;
  }

header li a  {
    font-family: "Greta Sans Bold", "Calibri", Helvetica, Verdana, sans-serif; 
}    
    
    
/* Navigation Ende ------------------------------------------- */    

footer {
width: 95%;
margin: 5% 2.5% 0 2.5%; 
}    

/* Startseite */    
main#startseite h1 > a {
font-size: 1.1em;     
letter-spacing: 0.03em;    
  }    
    
main#startseite h2 > a {
font-size: 1.0em; 
letter-spacing: 0.05em;    
  }
    
/* Projketübersicht */    
main#projektuebersicht {
    padding: 0;
}
    
#projektuebersicht article {
    display: block;
}
    
article {
    margin: 0 0 2em 0;
}
    
article div {
    margin: 0;
}
    
div.projekt h1 {
    margin: 0.2em 0 0 0;
}
    
main#arbeit {
    padding: 0;
} 

#arbeittitel {
    margin: 0 0 2em 0;
}
    
/* Portfolio, Vita, Kontakt, Lesungen  */    
main#portfolio, main#vitaseite, main#kontaktseite, main#lesungen {
padding: 0 5% 0 5%;
width: 90%;
}

/* Vita, Kontakt, Lesungen */    
div#vitatext p, main#kontaktseite p, main#lesungen p {
    line-height: 1.5em;
}

.breite50 { margin: 0 0 0.8em 0; }
    
}