@font-face {
  font-family: 'Lemon Tuesday';
  src: url("./Lemon Tuesday.otf") format("opentype");
  src: url("./Lemon Tuesday.woff")  format('woff');
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/css/open-sans-v27-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/open-sans-v27-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-condensed-300 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/css/open-sans-condensed-v21-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/open-sans-condensed-v21-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

* {
  font-family: 'Open Sans', cursive;
  list-style-type: None;
  margin: 0;
  padding: 0;
}

html {
  background-color: LavenderBlush;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background-color: White;
}

/*################################## Header ##################################*/

header {
  position: relative;
}

header .centered {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95vw;
}

header .centered.index {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95vw;
}

header h1 {
  font-family: 'Lemon Tuesday';
  font-size: 16vw;
  text-align: center;
  font-weight: normal;
  color: white;
}

header h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 3vw;
  color: White;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1vw;
  padding-top: vw;
}

header > img {
  width: 100%;
}


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

nav {
  position: sticky;
  top: 0;
  z-index: 2000;
}

nav input {
  display: none;
}

nav span {
  display: none;
}

nav ul {
  display: flex;
  border-bottom: 1px solid Black;
  flex-wrap: wrap;
}

nav ul li {
  flex: 1 0 0%;
  background-color: White;
  text-align: center;
  min-width: 46%
}

nav ul li a {
  width: 100%;
  padding: 0;
  color: Black;
  display: block;
  text-decoration: none;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 6vw;
  text-transform: uppercase;
}

nav ul li a:hover {
  background-color: #f9a1a9;
  color: White;
}

/*################################## Inhalt ##################################*/

body > section#starter h1, body > section#overview h1 {
  font-family: 'Lemon Tuesday';
  font-size: 12vw;
  color: Black;
  text-align: center;
  font-weight: normal;
  padding-bottom: 10vw;
}

body > section#starter > article:nth-child(1) > div > img {
  width: 100%;
}

body > section#starter h2 {
  font-size: 6vw;
  text-transform: uppercase;
  padding-bottom: 5vw;
  letter-spacing: 0.3vw;
  margin: 0vw 4vw;
}

body > section#starter > article.voegel {
  margin: 5vw 0vw;
}

body > section#starter > article.voegel > div > img {
  width: 100%;
}

body > section#starter > article.video > div > video {
  width: 100%;
  height: auto;
}

body > section#starter > article.video > div > p {
  display: none;
}

body > section#seite1 > article > div > img{
  width: 100%;
}

body > section#starter p {
  font-size: 4vw;
  text-align: justify;
  margin: 0vw 4vw;
  margin-bottom: 2vw;
}

body > section#starter > article > div > p.back {
  text-align: right;
}

body > section#starter > article > div > p.back > a, body > section#starter > article > div > p.back > a:hover{
  color: black;
  font-style: italic;
}

body > section > article {
  display: flex;
  flex-direction: column;
  margin: 20vw 0vw;
}

body > section#overview {
  display: flex;
  flex-direction: column;
}

body > section#overview > article {
  display: block;
  text-align: justify;
  flex: 1 0 0%;
  margin: 2vw 4vw;
}

body > section#overview > article h1{
  width: 100%;
}

body > section.overview p {
  text-align: justify;
}

body > section#overview > article > div > p.back {
  text-align: right;
}

body > section#overview > article > div > p.back > a, body > section#overview > article > div > p.back > a:hover{
  color: black;
  font-style: italic;
}


body > section#news {
  display: flex;
  flex-direction: column;
  text-align: center;
}

body > section#news > article {
  display: flex;
  text-align: justify;
  margin: 10vw 1vw;
}

body > section#news > article > div > img, body > section#news > article > div > a > img {
  width: 100%;
}

body > section#news > article > div > h2 {
  font-size: 6vw;
  text-transform: uppercase;
  padding-bottom: 5vw;
  letter-spacing: 0.3vw;
  margin: 0vw 4vw;
  text-align: left;
}

body > section#news > article > div > h3 {
  font-style: italic;
  font-size: 4vw;
  padding-bottom: 5px;
  margin: 0vw 4vw;
  text-align: left;
}

body > section#news > article > div > p {
  margin: 0vw 4vw;
}


/*############## Veranstaltungen ###############*/

body > section#veranstaltungen > article > div h1 {
  font-family: 'Lemon Tuesday';
  font-size: 12vw;
  color: Black;
  text-align: center;
  font-weight: normal;
  padding-top: 2vw;
}

body > section#veranstaltungen {
  margin: 0px 10px;
}

body > section#veranstaltungen  > article p {
  text-align: justify;
}

/*############## Vorstand ###############*/

body > section#vorstand > h1 {
  font-family: 'Lemon Tuesday';
  font-size: 12vw;
  color: Black;
  text-align: center;
  font-weight: normal;
  padding-top: 2vw;
}

body > section#vorstand {
  margin: 0px 10px;
}

/*############## Mitgliedsantrag ###############*/


body > section#mitgliedsantrag > article > h1{
  font-family: 'Lemon Tuesday';
  font-size: 12vw;
  color: Black;
  text-align: center;
  font-weight: normal;
  padding-top: 2vw;
}

body > section#mitgliedsantrag > article {
  margin: 0px 5px;
}



/*################################## Impressum und Datenschutzerklärung ##################################*/


body > section#impressum > article {
  display: block;
  width: 80%;
  margin: 0px auto;
}

body > section#impressum > article > h1 {
  font-family: 'Lemon Tuesday';
  font-size: 60px;
  color: Black;
  text-align: center;
  font-weight: normal;
  padding-bottom: 15px;
}

body > section#impressum > article > p {
  margin-bottom: 10px;
}

/*################################## Footer ##################################*/

footer {
  text-align: center;
  margin-top: 100px;
}

footer h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 6vw;
  color: White;
  font-weight: normal;
  text-transform: uppercase;
}

footer img {
  width: 100%;
}

footer section {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: White;
  background-color: #f9a1a9;
  font-size: 5vw;
  text-transform: uppercase;
  padding-top: 2vw;
  padding-bottom: 12vw;
}

footer article {
  font-family: 'Open Sans Condensed', sans-serif;
  flex: 1 0 0%;
  padding: 0vw 4vw;
  letter-spacing: 0.2vw;
}

footer a {
  font-family: 'Open Sans Condensed', sans-serif;
  text-decoration: underline;
  color: White;
}


/* Fuer Bootstrap beim Mitgliedsantrag */

body > section#mitgliedsantrag > article > div.input-group.mb-3 {
  flex-direction: column;
}

body > section#mitgliedsantrag > article > div.input-group.mb-3 > select,
body > section#mitgliedsantrag > article > div.input-group.mb-3 > input,
body > section#mitgliedsantrag > article > div.input-group.mb-3 > div > label {
  width: 100%;
  border-radius: 0.25rem;
}

body > section#mitgliedsantrag > article > div.input-group.mb-3 > div > span {
  text-align: left;
}

body > section#mitgliedsantrag > article > div.input-group.mb-3 > textarea {
  width: 100%;
  border-radius: 0.25rem;
  min-height: 30vw;
}

/* Korrektur Bilderbreite bei Vorstand und Veranstaltungen */

body > section#veranstaltungen img, body > section#vorstand img {
  max-width: 100%;
}

.button-wrap {
  white-space: normal;
  word-wrap: break-word;
}