@charset "UTF-8";

:root {
  --defaultMargin: 10px;
}

.marginTopBottom{
  margin-top: var(--defaultMargin);
  margin-bottom: var(--defaultMargin);
}

.ausgeblendet{
  display: none;
}

/* Loading */
.loadingBackground{
  width: 100%;
  height:100%;
  position: fixed;
  top:0;
  left:0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.loadingContainer{
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.loadingContainer > div{
  width: 20px;
  height:20px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.5s infinite ease-in-out both;
}

.loadingContainer .bounce1{
  animation-delay: -0.30s;
}

.loadingContainer .bounce2{
  animation-delay: -0.15s;
}

.headline{
  display: grid;
  grid-template-columns: 1fr 20%;
  margin-bottom: 10px;
}

.rezeptGruppe{
  border: 2px solid #000;
  border-radius:10px;
  padding: 10px;
  margin: 10px 0;
}

.zutatElement{
  width: 100%;
  display: grid;
  grid-template-columns: 20% 20% 1fr 10%;
  grid-gap: 10px;
  margin: 20px 0;
}

.schrittElement{
  width: 100%;
  display: grid;
  grid-template-columns: 5% 1fr 10%;
  grid-gap: 10px;
  margin: 20px 0;
}

@keyframes bounce {
  0%, 80%, 100%{
    transform: scale(0);
  }

  40%{
    transform: scale(1);
  }
}

@media print {
  .noprint, .btn{
    display: none;
  }

  .headline{
    grid-template-columns: 1fr;
  }
  
  .headline h3{
    text-align: center;
  }
}

@media screen{
  /* Bilder */
  .logo{
    width: 100%;
    height: auto;
  }
}

@media (max-width: 928px) {
  .form>div{
    width: 100% !important;
  }
}