/********************* MC-Spezifische Stylings **************/

.storyabschnitt {
  background:rgba(255, 230, 0, .5);
  padding-inline: clamp(2rem, 8vw, 3rem);
  padding-top: clamp(2rem, 4rem, 5%);
}

.storytext {
  font-family: var(--ff-schoenschrift-400);
  font-size: clamp(2rem, 5vw, 3rem);
  hyphens: auto;
  margin-bottom: 2rem;

}

.hinweistext {
  font-family: var(--ff-hinweisschrift-400-i);
  font-size: clamp(1.25rem, 3vw, 2rem);
  display: inline;
  hyphens: auto; 

}

.legende {
  display: block;
}

/*************** Einkaufszettel *****************/

/*.block {
  background-color: whitesmoke;
}*/

.einkaufsliste {
  background-image: url("/resources/img/AM_SO_Web_Assets_Block_2000x500_5.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 3rem;
  
 

}

.block.ende{
  height: 3rem;
  
}

.zutatencontainer,
.ueberschriftcontainer {
  display: grid;
  grid-template-columns: .75fr 3fr .25fr 0.75fr .25fr 3fr .75fr;
}

.zutatencontainer {
  height: 3rem;
}

.menge {
  grid-column: 2 / 3;
  border-bottom: 3px solid black;
}

.korrektanzeige {
  grid-column: 4 / 5;
}

.zutat {
  grid-column: -3 / -2;
  border-bottom: 3px solid black;
}

.komplett {
  border-color: green;
}
.teilweise {
  border-color: orange;
}
.falsch {
  border-color: red;
}
.ueberschriftmenge {
  grid-column: 2 / 3;
}

.ueberschriftzutat {
  grid-column: -3 / -2;
}


.blocktitel {
  font-family: var(--ff-blockschrift-400);
  font-size: clamp(2.5rem, 10vw, 5rem);
  text-align: center;
  padding-top: clamp(2.5rem, 10vw, 8rem);
}

.blockueberschrift {

  font-family: var(--ff-blockschrift-400);
  font-size: clamp(2rem, 8vw, 4rem);
  text-align: center;
}

.eingabefeld {
  font-family: var(--ff-eingabeschrift-400);
  font-size: 2.5rem;
  padding-inline: 1rem;
  overflow: hidden;

}

.zeilefalsch::before,
.zeilekorrekt::before,
.zeileunvollstaendig::before,
.zeilenomatch::before {
  content: '';
  background-size: 20px 20px;
  height: 20px; 
  width: 20px;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
}

.zeilefalsch::before {
  background-image: url("/resources/img/eineOderBeideFalsch.png");
}
.zeilekorrekt::before {
  background-image: url("/resources/img/beideSeitenOK.png")
}
.zeilenomatch::before {
  background-image: url("/resources/img/passtNichtZueinander.png")
}
.zeileunvollstaendig::before {
  background-image: url("/resources/img/nichtsEingetragen.png")
}
/* -------------- Sortierspiel ------------*/


.sortierspielcontainer {
  display: grid;
  grid-template: repeat(4, auto) / repeat(7, 1fr);
  background: rgba(240, 240, 240, 0.397);
  width: auto;
  }

.sortierzutat {
  width: 100%;
  height: auto;
  position: relative;
}

.angewaehlt {
  transform: scale(1.2);
  background:rgba(240, 240, 240, 0.397);
}

.schuessel,
.loesungzutat{
  width: 100%;
  height: auto;
}
.schuessel{
  z-index: 10;
}


#beeren {
  grid-area: 1 / 2 / span 1 / span 1;
}

#jogurt {
  grid-area: 3 / 2 / span 1 / span 1;
}

#limette {
  grid-area: 2 / 3 / span 1 / span 1;
}

#puderzucker {
  grid-area: 1 / 4 / span 1 / span 1;
}

#rohrzucker {
  grid-area: 3 / 4 / span 1 / span 1;
}

#vanillezucker {
  grid-area: 2 / 5 / span 1 / span 1;
}

#wasser {
  grid-area: 1 / 6 / span 1 / span 1;
}

#pfefferminze {
  grid-area: 3 / 6 / span 1 / span 1;
}

#franzschuessel,
.loesungzutat.franz {
  grid-area: 4 / 2 / span 1 / span 2;
}

#italschuessel,
.loesungzutat.ital 
 {
  grid-area: 4 / 5 / span 1 / span 2;
}

#loes_beeren{
  z-index: 4;
}
#loes_puderzucker{
  z-index: 3;
}
#loes_vanillezucker{
  z-index: 2;
}
#loes_jogurt{
  z-index: 1;
}
#loes_pfefferminze{
  z-index: 4;
}
#loes_wasser{
  z-index: 3;
}
#loes_rohrzucker{
  z-index: 2;
}
#loes_limette{
  z-index: 1;
}

.shake {
  animation: kf_shake 0.4s 1 linear;
  -webkit-animation: kf_shake 0.4s 1 linear;
  -moz-animation: kf_shake 0.4s 1 linear;
  -o-animation: kf_shake 0.4s 1 linear;
}
@keyframes kf_shake {
  0% { transform: translate(30px); }
  20% { transform: translate(-30px); }
  40% { transform: translate(15px); }
  60% { transform: translate(-15px); }
  80% { transform: translate(8px); }
  100% { transform: translate(0px); }
}

@-webkit-keyframes kf_shake {
  0% { -webkit-transform: translate(30px); }
  20% { -webkit-transform: translate(-30px); }
  40% { -webkit-transform: translate(15px); }
  60% { -webkit-transform: translate(-15px); }
  80% { -webkit-transform: translate(8px); }
  100% { -webkit-transform: translate(0px); }
}
@-moz-keyframes kf_shake {
  0% { -moz-transform: translate(30px); }
  20% { -moz-transform: translate(-30px); }
  40% { -moz-transform: translate(15px); }
  60% { -moz-transform: translate(-15px); }
  80% { -moz-transform: translate(8px); }
  100% { -moz-transform: translate(0px); }
}
@-o-keyframes kf_shake {
  0% { -o-transform: translate(30px); }
  20% { -o-transform: translate(-30px); }
  40% { -o-transform: translate(15px); }
  60% { -o-transform: translate(-15px); }
  80% { -o-transform: translate(8px); }
  100% { -o-origin-transform: translate(0px); }
}




/* ---------- rezepte --------- */

canvas {
  width: 100%;
  height: auto;
}

.rezepte.storyabschnitt {
  text-align: center;
}

.button {
  padding-inline: 1rem;
  margin: 1rem;
  background:#00a5d7;
  font-family: var(--ff-schoenschrift-400);
  font-size: 3rem;
  color: rgba(255, 230, 0, 1); 
  text-decoration: none;
  position: relative; 
  display: block;
  
}
/********************* Allgemeine Stylings ******************/

body {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  place-items: center;
}

header {
  position: sticky;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(2rem,5rem,10vh);
  background: var(--clr-grau-700);
}

ul {
  list-style: none;
}

.nav-right a {
  position: absolute;
  right: 0px;
  top: 0px;

  display: flex;
  height: 100%;
  width: clamp(3rem, 8rem, 10vw);
  border-radius: 20px 0px 0px 20px;

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

  font-size: clamp(1.5rem, 3rem, 7vh);
  color: rgba(255, 230, 0, 1);
  text-decoration: none;

  background:  #00a5d7;
  box-shadow: -8px 0px 16px rgba(0, 0, 0, 0.75);
  
}

.nav-button{
  position: absolute;
  display: flex;
  height: 100%;
  left: 15%;
  align-items: center;
  justify-content: center;
}

.nav-button a{
  
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 15%;
  background: #00a5d7;
  flex-grow: 0;
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 230, 0, 1);
  font-size: clamp(1rem, 1.25rem, 3vh);
  font-weight: 500;
  text-decoration: none;


  border-radius: 1.5rem;
  transition: 200ms ease-in-out;
}

.nav-button a:hover{
  transform: scale(1.05);
  transition: 150ms ease-in-out;
}

.container{
  position: relative;
  grid-column: 1 / -1;
  /*margin-inline: auto;*/
  width: min(95%,75em);
  margin-top: 5%; 
  
}

.bg {
  background: linear-gradient(360deg, rgb(255, 230, 0) 20.31%, #00a5d7 100%);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.btn:hover{
  cursor: pointer;
}

.no-show{
  display: none;
}


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

.zutatencontainer,
.ueberschriftcontainer {
  grid-template-columns: 0  3fr .1fr 0.2fr .1fr 3fr 0;
}

.sortierspielcontainer {
  grid-template: repeat(7, auto) / .25fr repeat(3, 1fr) .25fr;
  }

  #beeren {
    grid-area: 1 / 2 / span 1 / span 1;
  }
  
  #jogurt {
    grid-area: 1 / 4 / span 1 / span 1;
  }
  
  #limette {
    grid-area: 2 / 3 / span 1 / span 1;
  }
  
  #puderzucker {
    grid-area: 3 / 2 / span 1 / span 1;
  }
  
  #rohrzucker {
    grid-area: 3 / 4 / span 1 / span 1;
  }
  
  #vanillezucker {
    grid-area: 4 / 3 / span 1 / span 1;
  }
  
  #wasser {
    grid-area: 5 / 2 / span 1 / span 1;
  }
  
  #pfefferminze {
    grid-area: 5 / 4 / span 1 / span 1;
  }
  
  #franzschuessel,
  .loesungzutat.franz {
    grid-area: 6 / 2 / span 1 / span 1;
  }
  
  #italschuessel,
  .loesungzutat.ital 
   {
    grid-area: 6 / 4 / span 1 / span 1;
  }
  
}