/* ==========================================================================

style.css

Stylesheet zur Gestaltung der Website "Semesterarbeit HS20 von Jael Céline Zimmermann"
- Import der Schriftarten
- Style (Basic, Header, Main, Footer, Special, Media Query)

========================================================================== */



/* --------------------------------------------------------------------
-----------------------------------------------------------------------
IMPORT DER SCHRIFTARTEN - von Google Fonts
-----------------------------------------------------------------------
----------------------------------------------------------------------- */

/* Fredericka the Great - h */
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

/* Vollkorn - p */
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital@0;1&display=swap');


/* Amatic - h Ersatz01 */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');

/* INTER - h Ersatz02 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Yrsa - p Ersatz */
@import url('https://fonts.googleapis.com/css2?family=Yrsa:wght@300;400;500;600;700&display=swap');




/* --------------------------------------------------------------------
-----------------------------------------------------------------------
STYLE
-----------------------------------------------------------------------
----------------------------------------------------------------------- */


/* -----------------------------------------------------------------------
BASIC
----------------------------------------------------------------------- */

/* GENERAL */

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
}

body {
  margin: 0;
  font-family: 'Vollkorn', 'Yrsa', serif;
  font-size: 1rem;
}

 /* Grid von Wrapper */
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}


/* TEXTGESTALTUNG */

/* Gestaltung der Titel */
h1 {
  font-size: 3.5rem;
  font-family: 'Fredericka the Great', 'Amatic SC', 'Inter', sans-serif;
  font-weight: 200;
}

h2 {
  font-size: 1.8rem;
  font-family: 'Fredericka the Great', 'Amatic SC', 'Inter', sans-serif;
  font-weight: 200;
  margin-bottom: 5%;
}

/* Gestaltung des Fliesstextes */
p {
  line-height: 2rem;
  font-size: 1.2rem;
}

.gelb-typo {
  color: #f2ca16;
  font-weight: bold;
}

/* Gestaltung der Quotes + Cites */
blockquote {
  font-family: 'Fredericka the Great', 'Amatic SC', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  text-align: center;
}

cite {
  font-style: normal;
  font-size: 0.8rem;
  font-family: 'Vollkorn', 'Yrsa', serif;
  text-align: center;
}

/* Gestaltung der Hyperlinks */
a {
  text-decoration: none;
}

a:link {
  color: #f1c31e;
}

a:visited {
  color: #f1c31e;
}

a:hover,
a:focus {
  color: #f0b12d;
}

a:active {
  color: #f0b12d;
}



/* -----------------------------------------------------------------------
HEADER
----------------------------------------------------------------------- */

/* GENERAL */

.site-header {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  background-color: black;

  /*background-image: url(bg_intro.png);
  background-repeat: no-repeat;
  background-attachment: fixed; */
}


/* TITELBOX */

/* Gestaltung und Position von Titelbox */
.storytitle {
  grid-column: 2 / 8;
  width: 100%;
  margin: auto;
  margin-top: 8vw;


}

/*
Gestaltung von Subtitle "Endstatiom für Kinder"
#subtitle {
  font-size: 1.5rem;
  font-weight: 400;
}
*/

/* Gestaltung und Position von Autorintro "Eine Magazinstory von Jael Céline Zimmermann" */
.autor-intro {
  text-align: center;
  margin-bottom: 25%;

  grid-column: 3 / 7;
  color: white;
}



/* -----------------------------------------------------------------------
MAIN
----------------------------------------------------------------------- */

/* GENERAL */

main {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;
}


/* SECTION 01 - LEADBOX */

/* Gestaltung und Position von Leadbox */
.lead-01 {
  grid-column: 1 / 9;
  background-color: black;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  padding: 2.5rem;

  text-align: center;
  font-family: 'Vollkorn', 'Yrsa', serif;
  font-style: italic;
  color: white;
  font-size: 1.3rem;
}

/* Positionierung des Leadtextes */
.leading {
  grid-column: 3 / 7;
  margin: 5vw 0;
}


/* SECTION 02 - Anfang */

/* Gestaltung und Position von 'Tipp' */
.anfang {
  grid-column: 1 / 9;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin-top: 5vw;
}

#note {
  font-size: 0.8rem;
  line-height: 1.2rem;
  grid-column: 2 / 4;
}
/*
Position von Kinderportrait (links)
.img-02-1 {
  grid-column: 1 / 3;

  width: 120%;
}
/*

/* Position von art-phoenix */
.einleitung {
  grid-column: 4 / 8;
  padding: 1rem;
  margin-top: 15vw;
}


/* SECTION 03 - Quote 01 'Vergänglichkeit' */

/* Gestaltung und Position von Quote 01 "Sterben kann ich, wenn ich tot bin." */
.quote-01 {
  grid-column: 2 / 5;

  border: 5px solid black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 2rem;
  margin: 1rem;

  text-align: center;
}


/* SECTION 04 - Art 'Phoenix aus der Asche' */

/* Gestaltung und Position von Artikel 'Phoenix aus der Asche' */
.phoenix {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  margin-top: 5vw;
  padding-bottom: 0;
  padding-top: 5vw;
}

/* Position von Subtite 'Phoenix aus der Asche' */
.phoenix > h2 {
  grid-column: 2 / 6;
  padding: 1rem;
  margin-bottom: 0;
}

/* Position von art-phoenix */
.art-phoenix {
  grid-column: 2 / 6;
  padding: 1rem;
}

.img-hand {
  grid-column: 3 / 7;
  width: 60%;
  margin: auto;
}


/* SECTION 05 - Quote 02 'Es soll nicht weh tun, aber Aua machen.' */

/* Position von art-phoenix */
.quote-02 {
  grid-column: 3 / 7;

  border: 7px solid black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 2rem;
  text-align: center;
}


/*
 Position von Aricle 04-2 (rechts)
.art-04-2 {
  grid-column: 3 / 6;
  padding: 1rem;
}
*/

/* SECTION 06 - Raum für ein Tabu */

/* Gestaltung und Position von 'Raum für ein Tabu' */
.tabu {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  padding-top: 10vw;
}

/* Position von Subtite 'Raum für ein Tabu' */
.tabu > h2 {
  grid-column: 4 / 8;
  padding: 1rem;
  margin-bottom: 0;
}

/* Position von Artikel 'Raum für ein Tabu' */
.art-tabu {
  grid-column: 4 / 8;
  padding: 1rem;
}

/* Position von Schmetterling */
.img-schmetterling {
  grid-column: 2 / 6;
  width: 80%;
}




/* SECTION 07 - Braucht es das überhaupt? */

/* Gestaltung und Position von 'Braucht es das überhaupt?' */
.brauchen {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  padding-top: 10vw;
}

/* Position von Subtitle 'Braucht es das überhaupt?' */
.brauchen > h2 {
  grid-column: 2 / 6;
  padding: 1rem;
  padding-top: 0;
  margin-bottom: 0;
}

/* Position von Artikel 'Braucht es das überhaupt?' */
.art-brauchen {
  grid-column: 2 / 6;
  padding: 1rem;
}


/* SECTION 08 - QUOTE 03 */

/* Gestaltung und Position von Quote 03 "Wer investiert schon in den Tod?" */
.quote-03 {
  grid-column: 2 / 6;

  border: 7px solid black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 2rem;
  margin: 1rem;
  margin-bottom: 10vw;
}

/* SECTION 09 - Darum */

.darum {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  background-color: black;
  color: white;

  padding-top: 10vw;
  padding-bottom: 10vw;
}

/* Position von Subtitle 'Darum' */
.darum > h2 {
  grid-column: 3 / 7;
  padding: 1rem;
  padding-top: 0;
  margin-bottom: 0;
  font-size: 1.9rem;
}

/* Position von Artikel 'Darum' */
.art-darum {
  grid-column: 3 / 7;
  padding: 1rem;
  font-size: 1.3rem;
}


/* SECTION 10 - Ein Herz für Kämpferherzen */

.herz {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  padding-top: 10vw;
  padding-bottom: 5vw;
}

/* Position von Subtitle 'Darum' */
.herz > h2 {
  grid-column: 4 / 8;
  padding: 1rem;
  padding-top: 0;
  margin-bottom: 0;
}

/* Position von Artikel 'Darum' */
.art-herz {
  grid-column: 4 / 8;
  padding: 1rem;
}



/* SECTION 11 - AUTORBOX */

/* Gestaltung und Position von Autorbox */
#autorin {
  grid-column: 1 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-content: center;

  padding: 5vw 0;

  text-align: center;
}

/* Position von Subtitle "Autorin" */
#autorin > h2 {
  grid-column: 3 / 7;
}

/* Position von Artikel 'Die Autorin' */
.art-autorin {
grid-column: 3 / 7;
padding: 2rem 0;
}

.trennstrich {
  margin: 5vw 0;
}



/* -----------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------- */

/* GENERAL */

footer {
    grid-column: 1 / 9;
}

.site-footer {
  display: flex;
  flex-direction: column;
}


/* ACCORDION - VIDEOPORTRAIT UND QUELLEN */

/* Funktion von Accordion */
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
    height: 110vh;
}

.accordion:hover .accordion-item:hover #quelle,
.accordion .accordion-item--default #quelle {
    height: 20vh;
}

.accordion-item-content,
.accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    transition: height 0.8s ease-in-out;
}

/* Gestaltung von Accordion */
.accordion {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    font-family: 'Fredericka the Great', 'Amatic SC', 'Inter', sans-serif;
    text-align: center;
}

.accordion .accordion-item {
  padding: 1em;
  color: #eee;
}

.accordion h2 {
  margin: 1.5rem;
  font-size: 1.9rem;
}

/* Gestaltung von "Videoportrait" */
.accordion .accordion-item:nth-child(1) {
  background-color: black;
  color: white;
}

.videobeschreibung {
  font-family: 'Vollkorn', 'Yrsa', serif;
  padding: 1rem;
}

/* Gestaltung von "Quellen" */
.accordion .accordion-item:nth-child(2) {
  background-color: #f1c31e;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: black;
}

.quellen {
  list-style: none;
  text-align: left;
  margin: 0 20%;
  font-family: 'Vollkorn', 'Yrsa', serif;
}


/* END - DOWNLOAD BUTTON UND COPYRIGHT */

/* Position von End */
.end {
  text-align: center;
  padding: 2rem;
}

/* Gestaltung von Download-Button */
.download-btn {
  border: 5px solid black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 2rem;
  margin: 1rem;

  color: black;
  background-color: white;

  padding: 1rem;
  width: 20%;

  font-family: 'Vollkorn', 'Yrsa', serif;
  font-size: 1rem;
}

/* Gestaltung von Downloadicon */
.downloadicon {
  width: 4%;
  margin-right: 1rem;
}

/* Gestaltugn von Copyright */
.copyright {
  margin: 1rem;
  margin-bottom: 0;
  font-family: 'Vollkorn', 'Yrsa', serif;
  font-size: 0.7rem;
  font-weight: 500;
}

/*Gestaltung von Copyright - Hyperlink */
.copyright a {
  color: black;
}

.copyright a:hover, a:focus {
  color: #f0b12d;
}

.copyright a:visited {
  color: black;
}

.copyright a:active {
  color: #f0b12d;
}



/* -----------------------------------------------------------------------
SPECIAL
----------------------------------------------------------------------- */

/* BUTTON - SCROLL TO THE TOP */

/*Gestaltung und Position von Button - Scroll to the Top */
#hallo{
  position: fixed;
  width: 2rem;
  height: 2rem;
  background: white;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  bottom: 2rem;
  right: 2rem;
  text-align: center;
  text-decoration: none;
  line-height: 2rem;
  display: flex;

  justify-content: center;
  align-items: center;
}









/* -----------------------------------------------------------------------
MEDIA QUERY
----------------------------------------------------------------------- */

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

  * {
    font-size: 0.6rem;
  }

  p {
    font-size: 2.6rem;
    grid-column: 2 / 8;
    line-height: 160%;
  }

  h1, h2 {
    font-size: 4rem;
    margin: 3rem 0;
    grid-column: 2 / 8;
  }

  blockquote {
    font-size: 4rem;
    grid-column: 2 / 8;
    padding: 2rem;
  }

  a {
    font-size: 2.7rem;
  }

  section {
      grid-column: 1 / 9;
  }


  .gelb-typo {
    color: #f2ca16;
    font-weight: bold;
    font-size: 2.7rem;
  }

  /* Wrapper */
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  header, main {
    grid-column: 1 / 9;
  }

  .site-header {
    grid-column: 1 / 9;
      font-size: 1.5rem;

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .storytitle {
    grid-column: 1/ 9;
    margin: 70vw 0 5vw 0;
  }

  .autor-intro {
      grid-column: 1/ 9;
      margin-bottom: 70vw;
  }


/* main */

  main {
    grid-column: 1/ 9;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }



  /* Section 01 - Leadbox */

  .lead-01 {
    padding: 0;
    grid-column: 1/ 9;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  p.leading {
    margin: 0;
    text-align: center;
    grid-column: 2 / 8;
    padding: 5rem 0;
    line-height: 160%;
    margin-bottom: 20vw;
  }

  #note {
  grid-column: 2 / 8;
  line-height: 150%;
  font-size: 1.4rem;
  margin: 20vw 0;
  }

  /* Section 02 - Erster Abschnitt */
  .anfang {
    margin: 0;
    grid-column: 1 / 9;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

  .note {
    grid-column: 2 / 8;
    margin-top: 2rem;
  }

  .einleitung {
    grid-column: 2 / 8;
    margin: 0;
    padding: 0;
  }

 .phoenix {
   margin: 0;
   padding: 0;
 }

 .phoenix>h2 {
   grid-column: 2 / 8;
   margin: 0;
   padding: 0;
 }

 .tabu {
   margin: 0;
   padding: 0;
 }

 .brauchen {
   margin: 20vw 0 0 0;
   padding: 0;
   grid-column: 1/ 9;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 }

 .darum {
   margin: 0;
   padding: 20vw 0;
   grid-column: 1/ 9;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .herz {
    margin: 0;
    padding: 20vw 0;
    grid-column: 1/ 9;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   }

  .herz>h2 {
    grid-column: 2 / 8;
    margin: 0;
    padding: 0;
  }

  .art-phoenix {
    grid-column: 2 / 8;
    padding: 0;
  }

  .art-herz {
    grid-column: 2 / 8;
    padding: 0;
  }

  .tabu>h2 {
    grid-column: 2 / 8;
    margin: 0;
    padding: 0;
  }

  .art-tabu {
    grid-column: 2 / 8;
    margin: 0;
    padding: 0;
  }

  .art-brauchen {
    grid-column: 2 / 8;
    margin: 2rem 0;
    padding: 0;
  }

  .art-darum {
    grid-column: 2 / 8;
    margin: 2rem 0;
    padding: 0;
  }

  .darum>h2 {
    grid-column: 2 / 8;
    margin: 0;
    padding: 0;
  }

  .img-hand {
    grid-column: 1 / 9;
    margin: 20vw auto;
  }

  .img-schmetterling {
    grid-column: 1 / 9;
    margin: 20vw auto;
  }


.quote-01 {
  grid-column: 2/ 8;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 20vw 0;
}

.quote-02 {
  grid-column: 2/ 8;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0 0 20vw 0;
}

.quote-03 {
  grid-column: 2/ 8;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0;
  margin: 20vw 0;
}

  /* Section 04 - Zweiter Abschnitt, Teil 1 (schwarz) */





  /* Section 05 - Zweiter Abschnitt, Teil 2 */





  /* Section 07 - Dritter Abschnitt */

  /* Section 08 - Autorbox */
  #autorin {
    grid-column: 1 / 9;
    margin: 2rem 0;
    margin-bottom: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
  }

  #autorin>h2 {
    grid-column: 3 / 7;
    margin: 5vw auto;
  }


.art-autorin {
    grid-column: 2 / 8;
    margin: 2rem 0;
  }

footer {
  display: flex;
  flex-direction: column;
  font-size: normal;
}

  .accordion {
    margin: 0 0 8vw 0;
  }

  .accordion-item>h2 {
    margin: auto;
    padding: 8rem 0;
    font-size: 6rem;
  }

  .accordion:hover .accordion-item:hover .accordion-item-content,
  .accordion .accordion-item--default .accordion-item-content {
      height: 45vh;
  }

  .accordion:hover .accordion-item:hover #quelle,
  .accordion .accordion-item--default #quelle {
      height: 20vh;
  }

  .videobeschreibung {
    margin: 2rem 0;
  }

  .download-btn {
    width: 80%;
    margin:  0 auto;
    padding: 5vw 0;
  }

  .download-btn>a {
    margin: auto;
    font-size: 6rem;
  }

  .copyright {
    font-size: 10rem;
    padding: 1rem 0;
    margin: 0;
  }


  #hallo {
    position: fixed;
    width: 7rem;
    height: 7rem;
    background: white;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    bottom: 5rem;
    right: 5rem;
    text-align: center;
    text-decoration: none;
    line-height: 10rem;
    font-size: 4rem;
    visibility: hidden;
  }

} /* Ende @media */