@font-face {
  font-family: 'Avenir';
  src: url('avenir_ff/AvenirLTStd-Black.otf') format('embedded-opentype'),  url('avenir_ff/AvenirLTStd-Book.otf') format('embedded-opentype'), url('avenir_ff/AvenirLTStd-Roman.otf')  format('embedded-opentype');
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Sonsie One';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/Sonsie.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(fonts/open-sans-condensed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 0.5em;
  background-color: #FFFFFF;
}

body {
  width: 90%;
  margin: 0 auto;
}

h1, h2, h3 {
  font-family: 'Avenir', Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
  text-align: justify;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 3rem;
  font-family: alisha, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: left;
}

h3 {
  font-size: 2.2rem;
}

h4 {
  font-size:2rem;
  font-family: 'Times New Roman', Times, sans-serif;
  text-align:left;
}

p {
  font-size: 2rem;
  line-height: 1.5;
}
li {
  font-size: 2rem;
 
}

/* || header layout */

/* logo */
.logotext {
  color: #04AA6D;
  text-align: center;
  line-height: 1.35em;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: normal;
  font-family:'Verdana', sans-serif;
}

.wasbieteich {
  text-align: center;
  color: #054e34;
  font-size: 2em;
  padding-left: 15em;
  padding-right: 15em;
}

@media screen and (max-width: 45em ) {
  
.wasbieteich {
  padding-left: 1em;
  padding-right: 1em;
}
}

.vorgehen {
  text-align: justify;
  color: #054e34;
  font-size: 2em;
  padding-left: 15em;
  padding-right: 15em;
}

@media screen and (max-width: 45em ) {
  
.vorgehen {
  padding-left: 1em;
  padding-right: 1em;
}
}



nav, article, footer {
  background-color: white;
	  padding: 1%;
}

nav {
  /*margin-bottom: 10px;*/  /* unterhalb des Navigationsberichs etwas platz lassen */
}

nav ul {
  padding: 0;
  list-style-type: none; /* es soll kein punkt oder ähnliches zu sehen sein */  
  display: flex;
  font-size: 0.5em;
  flex-direction: column;  /* schmales Menu: untereinander die Eintraege anordnen */
}


nav li {
  text-align: center;
  flex: 1;  
}

.grundsatz {
  text-align: center;
  list-style-type: none;
  color:  #054e34;
}

@media all and (min-width: 45em) {
  nav {
    height: 50px; /* auf dem PC wird der Nav-Balken schmaler */
  }
  nav ul {
    text-align: center;
    flex: 1;      
    font-size: 0.5em; /* Sorgt auch dafür, wo der Text steht ?! */
    flex-direction: row; /* breites Menu: nebeneinander die Einträge anordnen */
  } 
}

nav a {
  display: inline-block;
  font-size: 1em;

  text-decoration: none;
  color: black;
}


/* || main layout */

main {
  display: flex;  /* Flex_layout fur alles */
}

footer {
  margin-top: 1em;  /* Etwas Abstand nach oben */
}



/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header,
nav,
nav a,
article,
footer {
	padding: 0px;
	margin: 10px;
	flex: 4 1 0%;
}



li.currentPage {
  font-weight: bold;
}


center.center {
  font-size: 3rem;
  font-family: alisha, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.footer {
  margin:auto;
}

.footercenter {
  font-size: 2rem;
  font-family: alisha, sans-serif;
  font-style: normal;
  text-align: center;
  margin-left: auto;
	margin-right: auto;
/*	border: thin solid; sieht nicht schlecht aus, aber auch nicht gut -- Silja findets doof */
  max-width: 40em;
}



img.logo {
  max-width: 100%;
}
img.kurt {
  max-width: 100%;
}
@media (min-width: 50em) {
  img.logo {
    width: 40%;        
  }
}

@media (min-width: 50em) {
   img.kurt {
    width: 60%;        
  }
}






/* Zeigt den Menu-Button an */
.dropbtn {
  background-color: #04AA6D; /* Farbe des Menu-Buttons */
  color: white; /*Textfarbe*/
  padding: 0.5em; /* Rahmen um das Wort Menu */
  font-size: 2em;
  border: none;
}

.dropdown {
  position: relative;
  padding-left: 1.5em; /* das Menu ein bisschen nach rechts verschieben, damit auch Silja zufrieden ist*/ 
  /*display: inline-block;*/
}

.dropdown-content {
  display: none; /* Zeigt das breite Menu nicht an */
  position: absolute;
  background-color: #f1f1f1;
  min-width: 23em; /* Breite des aufklappenden Menus */
  /*box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);*/
  z-index: 1;
}

.dropdown-content a {
  color: rgb(0, 0, 0); /* Textfarbe der Menueintraege
  /*padding: 12px 16px;*/
  text-decoration: none;
  display: block;
  margin: 3px; /* Abstand der Menueintraege zueinander */
  font-size: 1em; /* Schriftgröße der Menueintraege */
}
/* Das drop-down menu verschwinden lassen auf großem Bildschirm*/
@media all and (min-width: 35em) { 
  .dropbtn { display: none;  }
}
/* verschwinden lassen ende */

/* Das breite Menu erscheinen lassen auf breiten Displays */
@media all and (min-width: 35em) { 
  .dropdown-content {
    display: flex; /* Zeigt das breite Menu an */
    box-shadow: none; /* Kein Rahmen um den Balken */
    background-color:white;
    position: static;
  }  
}
/* Das breite Menu erscheinen lassen auf breiten Displays ende */

/* Auf dem Handy soll der Menu-Button beim Hovern ein Menu sein */
@media all and (max-width: 45em) {
.dropdown-content a:hover {background-color: #C4D9D2;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {
  background-color: #3e8e41; /* Dies setzt die Farbe des Buttons beim Hovern*/
}

}