/* =============================================================================
Stylesheet für die Website der Turntalentschule Dillingen
Autor: Leon Becker
'Desktop-First'-Ansatz
Wichtige Farben:
Grün: rgb(0,185,60);
Grau: rgb(198,199,206);
Schwarz: rgb(0,0,0);
Weiß: rgb(255,255,255);
============================================================================= */

/*************** Reset ***************/

* {
  padding: 0;
  margin: 0;
}

/*************** Allgemeine Styles ***************/

body {
  background-color: rgb(0,0,0);
  font-family: 'PT Sans Narrow', sans-serif;
  color: rgb(0,0,0);
  text-align: center;
}


/*************** Logo und Navigation ***************/

header {
  position: fixed;
  width: 100%;
  background-color: rgb(198,199,206);
  border-bottom: rgb(0,185,60) 0.1em solid;
  opacity: 0.9;
}

/* Logo stylen */
#logo img {
  display: block;
  margin: auto;
  padding: 0.5em;
  width: 5em;
  height: auto;
}

/* Facebook-Verlinkung stylen */
#fb-link img {
  display: block;
  width: 2em;
  height: auto;
  padding-left: 2em;
  padding-right: 2em;
  margin: auto;
}

/* Stadtwerke-Logo stylen */
#sw-link img {
  display: block;
  width: 5em;
  height: auto;
  padding-left: 2em;
  padding-right: 2em;
  margin: auto;
}

/* Navigationspunkte stylen */
.flex-item-nav a {
  text-decoration: none;
  color: black;
  font-size: 1.5em;
  font-family: 'PT Sans Narrow', sans-serif;
}

.flex-item-nav {
  padding: 0.5em;
  margin: auto;
}

.active {
  color: rgb(0,185,60) !important;
}

 .flex-item-nav a:hover {
  color: rgb(0,185,60);
}

/* Layout mit Flexbox-Modell */
#flex-container-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

#flex-container-logo_fb_sw {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

#flex-container-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}

/* Spacer */
#spacer {
  height: 4.5em;
  width: 100%;
  background-color: rgb(198,199,206);
}

/********** Mobile Optimierung **********/
@media screen and (max-width: 700px) {

  #flex-container-header {
    flex-direction: column;
  }

  #flex-container-nav {
    flex-direction: column;
  }

  header {
    position: static;
    opacity: 1;
  }

  #spacer {
    display: none;
  }

}

/************************* Start *************************/

/*************** Showcase-Bereich ***************/

#showcase img {
  display: block;
  height: 24em;
  width: auto;
  padding-top: 4em;
  margin: auto;
}

#showcase {
  height: 34em;
  width: auto;
  background-image: url(Bilder/Start/showcase.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/********** Mobile Optimierung **********/
@media screen and (min-width: 320px) and (max-width: 420px) {

  #showcase img {
    width: 20em;
    height: auto;
    padding-top: 6em;
  }

}

@media screen and (max-width: 320px) {

  #showcase img {
    width: 15em;
    height: auto;
    padding-top: 8em;
  }

}

/*************** Banner ***************/

#banner {
  height: 5em;
}

/* Banner-Icon stylen */
#banner img {
  width: 3em;
  height: auto;
  margin: 0em 2em 0em 2em;
}

/* Banner-Text stylen */
#banner p {
  font-size: 1.5em;
  color: white;
  padding: 0.5em;
}

/* Layout mit Flexbox-Modell */
#banner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

/********** Mobile Optimierung **********/
@media screen and (max-width: 420px) {

  #banner {
    height: 6.5em;
  }

}

/*************** Section a ***************/

#section-a-start {
  background-color: rgb(255,255,255);
}

/* Ueberschrift stylen */
#section-a-start h2 {
  font-size: 2em;
  padding: 1em;
}

/* Textpassagen stylen */
#section-a-start p {
  font-size: 1.5em;
  padding: 1em;
}

/* Links stylen */
#section-a-start a {
  text-decoration: none;
  color: rgb(0,185,60);
}

#section-a-start a:hover {
  text-decoration: underline;
}

/*************** Section b ***************/

#section-b-start {
  background-color: rgb(198,199,206);
  height: 40em;
}

/* Ueberschrift stylen */
#section-b-start h2 {
  font-size: 2em;
  padding: 1em;
}

/* Bilder stylen */
.start-card img {
  width: 20em;
  height: auto;
}

/* Textpassagen stylen */
.start-card div {
  width: 20em;
}

.start-card p {
  text-align: justify;
  font-size: 1.5em;
  padding: 0.5em;
  background-color: white;
}


/* Layout mit Flexbox-Modell */
#flex-container-concept {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: baseline;
}

.start-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

/********** Mobile Optimierung **********/
@media screen and (min-width: 650px) and (max-width: 1000px) {

  #section-b-start {
    height: 130em;
  }

  #flex-container-concept {
    height: 120em;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .start-card img {
    display: block;
    width: 40em;
    height: auto;
    margin: auto;
  }

  .start-card div {
    width: 40em;
  }

}

@media screen and (min-width: 500px) and (max-width: 650px) {

  #section-b-start {
    height: 110em;
  }

  #flex-container-concept {
    height: 100em;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .start-card img {
    display: block;
    width: 30em;
    height: auto;
    margin: auto;
  }

  .start-card div {
    width: 30em;
  }

}

@media screen and (min-width: 320px) and (max-width: 500px) {

  #section-b-start {
    height: 110em;
  }

  #flex-container-concept {
    height: 100em;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .start-card img {
    display: block;
    width: 20em;
    height: auto;
    margin: auto;
  }

  .start-card div {
    width: 20em;
  }

}

@media screen and (max-width: 320px) {

  #section-b-start {
    height: 110em;
  }

  #flex-container-concept {
    height: 100em;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .start-card img {
    display: block;
    width: 15em;
    height: auto;
    margin: auto;
  }

  .start-card div {
    width: 16em;
  }

}

/*************** Section c ***************/

#section-c-start {
  background-color: white;
}

/* Ueberschrift "News" stylen */
#section-c-start h2 {
  font-size: 2em;
  padding: 1em;
}

/* Beitragsueberschrift, Unterueberschrift und Textpassage stylen */
#section-c-start h3 {
  font-size: 1.5em;
  padding: 0.25em;
}

.flex-container-news-content h4 {
  font-size: 1.25em;
  padding: 0.25em;
}

.flex-container-news-content p {
  text-align: justify;
  font-size: 1.2em;
  padding: 0.25em 1em 1.5em 1em;
}

/* Bild stylen */
#section-c-start img {
  width: 20em;
  height: auto;
  padding: 0.75em;
}

/* Layout mit Flexbox-Modell */
.flex-container-news {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

/********** Mobile Optimierung **********/
@media screen and (max-width: 750px) {

  #flex-container-news {
    flex-direction: column;
  }

}

@media screen and (max-width: 360px) {

  #section-c-start img {
    width: 18em;
  }

}

/*************** Section d ***************/

#section-d-start {
  background-color: rgb(198,199,206);
  padding: 1em;
}

/* Überschrift stylen */
#section-d-start h2 {
  font-size: 2em;
  padding: 1em;
}

/* Textpassage stylen */
#section-d-start p {
  font-size: 1.25em;
  padding: 1em;
}

/* Logos mit Ueberschriften stylen */
.cooperation-card h3 {
  font-size: 1.25em;
  padding: 1em;
}

#heading-tvpiesbach {
  color: rgb(45,164,27);
}

#heading-tvsaarwellingen {
  color: rgb(255,215,0);
}

#heading-tvdillingen {
  color: rgb(233,30,38);
}

#heading-tvsaarlouis {
  color: rgb(0,110,190);
}

.cooperation-card img {
  display: block;
  width: 8em;
  height: auto;
  margin: auto;
}

/* Layout mit Flexbox-Modell */
#flex-container-cooperation {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: baseline;
}

.cooperation-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

/********** Mobile Optimierung **********/
@media screen and (max-width: 650px) {

  .cooperation-card img {
    width: 4em;
  }

  .cooperation-card h3 {
    font-size: 1em;
  }

}

@media screen and (max-width: 360px) {

  .cooperation-card img {
    width: 3em;
  }

  .cooperation-card h3 {
    font-size: 0.75em;
  }

}

/************************* Abteilungen *************************/

#wrapper-abteilungen {
  background-color: rgb(198,199,206);
}

/* Bild stylen */
.section-abteilungen img {
  display: block;
  width: 40em;
  height: auto;
  padding: 1em;
  margin: auto;
}

/* Textbereich festlegen */
.text-abteilungen {
  width: 40em;
  margin: auto;
}


/* Ueberschrift stylen */
.text-abteilungen h1 {
  font-size: 1.5em;
  padding: 1em;
}

/* Textpassage stylen */
.text-abteilungen p {
  font-size: 1.25em;
  padding: 1em;
}

/********** Mobile Optimierung **********/
@media screen and (max-width: 700px) {

  .section-abteilungen img {
    width: 100%;
    height: auto;
    padding: 0;
  }

  .text-abteilungen {
    width: 100%;
    height: auto;
  }

}

/************************* Trainer *************************/

#wrapper-trainer {
  background-color: rgb(198,199,206);
}

/* Bild stylen */
.section-trainer img {
  width: 15em;
  height: auto;
  padding: 1em;
}

/* Ueberschrift stylen */
.text-trainer h1 {
  font-size: 1.5em;
  padding: 0.75em;
}

/* Textpassage stylen */
.text-trainer p {
  font-size: 1.25em;
  padding: 0.5em;
}

/* Layout mit Flexbox-Modell */
.section-trainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

/********** Mobile Optimierung **********/
@media screen and (max-width: 500px) {

  .section-trainer {
    flex-direction: column;
  }

}

/************************* Kontakt *************************/

 #wrapper-kontakt {
   background-color: rgb(198,199,206);
 }

 #wrapper-kontakt h1 {
   font-size: 2em;
   padding: 0.5em;
 }

 #wrapper-kontakt p {
   font-size: 1.2em;
 }

#section-a-kontakt {
  padding: 2em;
}

#section-b-kontakt {
  padding: 2em;
}

#section-c-kontakt {
  padding: 4em;
}

/************************* Datenschutz *************************/

#wrapper-datenschutz {
  background-color: rgb(198,199,206);
}

#wrapper-datenschutz h1 {
  font-size: 2em;
  padding: 1em;
}

#wrapper-datenschutz h2 {
  font-size: 1.5em;
}

#wrapper-datenschutz p {
  font-size: 1.2em;
  padding: 0.5em;
}

#wrapper-datenschutz ul {
  font-size: 1.2em;
  padding: 0.5em;
  margin-left: 3em;
  margin-right: 3em;
  text-align: left;
}

#wrapper-datenschutz a {
  text-decoration: none;
  color: rgb(0,185,60);
}

#wrapper-datenschutz a:hover {
  text-decoration: underline;
}

#section-a-kontakt {
  padding: 2em;
}

#section-b-kontakt {
  padding: 2em;
}

#section-c-kontakt {
  padding: 2em;
}

#section-d-kontakt {
  padding: 2em;
}

#section-e-kontakt {
  padding: 2em;
}

#section-f-kontakt {
  padding: 2em;
}

/************************* Footer *************************/

footer {
  background-color: black;
  border-top: rgb(0,185,60) 0.1em solid;
}

footer p {
  color: rgb(198,199,206);
  font-size: 1em;
  padding: 1em;
}

footer a {
  text-decoration: none;
  color: rgb(0,185,60);
  font-size: 1em;
  border: rgb(0,185,60) 0.1em solid;
  border-radius: 0.1em;
  padding: 0.6em;
  margin-left: 1em;
}

footer a:hover {
  background-color: rgb(0,185,60);
  color: white;
}