@charset "UTF-8";
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #ffc1ca;
}

.menu__bar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 6rem;
  width: 6rem;
}
.menu__bar-span {
  position: fixed;
  top: 10px;
  right: 10px;
  height: 3rem;
  width: 5rem;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.294)) invert(4%);
  text-decoration: none;
  overflow: hidden;
  z-index: 50;
}
@media (max-width: 767.98px) {
  .menu__bar {
    display: block;
    z-index: 50;
  }
}

.span {
  display: none;
  position: absolute;
  height: 0.24rem;
  width: 100%;
  background-color: hsl(0, 0%, 100%);
  border-radius: 25px;
  top: 50%;
  left: 50%;
  z-index: 1;
  transition: all 0.3s ease;
}
.span.span1 {
  top: 30%;
}
.span.span1.active {
  width: 70%;
  left: 20%;
  top: 50%;
  transform: rotate(45deg);
}
.span.span2 {
  top: 50%;
}
.span.span2.active {
  display: none;
}
.span.span3 {
  top: 70%;
}
.span.span3.active {
  width: 70%;
  left: 20%;
  top: 50%;
  transform: rotate(-45deg);
}
@media (max-width: 767.98px) {
  .span {
    display: block;
  }
}

.menu__offscreen {
  position: fixed;
  top: 0;
  right: 0;
  background-color: hsl(0, 0%, 0%);
  margin-right: -20rem;
  width: 20rem;
  height: 100vh;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  transition: 0.7s ease;
  z-index: 1;
}
.menu__offscreen.active {
  padding-top: 4rem;
  margin-right: 0;
  width: 100vw;
}
.menu__offscreen-above {
  padding-right: 2.5rem;
}
.menu__offscreen-above a {
  display: block;
  color: hsl(0, 0%, 100%);
  padding-top: 4rem;
  text-decoration: none;
  font-size: 1.8rem;
  text-align: end;
  cursor: pointer;
}
@media (max-width: 1199.98px) {
  .menu__offscreen-above a:hover {
    color: hsl(40, 5%, 66%);
    transition: all 1s ease;
  }
}
@media (max-width: 767.98px) {
  .menu__offscreen-above a {
    cursor: default;
  }
}
.menu__offscreen-down {
  position: absolute;
  top: 300px;
  right: 0;
  padding-right: 2.5rem;
}
.menu__offscreen-down a {
  display: block;
  padding-bottom: 1rem;
  color: hsl(0, 0%, 100%);
  text-decoration: none;
  font-size: 1.4rem;
  text-align: end;
  cursor: pointer;
}
@media (max-width: 1199.98px) {
  .menu__offscreen-down a:hover {
    color: hsl(40, 5%, 66%);
    transition: all 1s ease;
  }
}
@media (max-width: 767.98px) {
  .menu__offscreen-down a {
    cursor: default;
  }
}

.desktop__menu {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  top: 0;
  margin: 0;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .desktop__menu {
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
  }
}
.desktop__menu-ul {
  display: flex;
  height: 7rem;
  margin: 0;
  padding: 1.2rem;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .desktop__menu-ul {
    display: none;
  }
}
.desktop__menu-ul li {
  width: 11rem;
  height: 100%;
  margin: auto 0;
  text-align: center;
  font-weight: 500;
  font-size: 1.5rem;
  align-content: center;
}
.desktop__menu-ul li a {
  color: hsl(0, 0%, 100%);
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(67, 66, 66, 0.071), 0 0 1em rgba(76, 75, 75, 0.124), 0 0 0.2em rgba(71, 71, 71, 0.068);
}
.desktop__menu-logo {
  height: 9rem;
  width: 9rem;
  margin: 0;
  padding: 1rem;
}
@media (max-width: 767.98px) {
  .desktop__menu-logo {
    height: 6rem;
    width: 6rem;
  }
}
.desktop__menu-logo-img {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.header__title {
  width: 70%;
  margin: 0 auto;
  padding: 16rem 0 2rem 0;
  font-size: 5rem;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(67, 66, 66, 0.194), 0 0 1em rgba(76, 75, 75, 0.219), 0 0 0.2em rgba(71, 71, 71, 0.149);
  font-family: "Playfair Display", serif;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .header__title {
    font-size: 4rem;
  }
}
@media (max-width: 767.98px) {
  .header__title {
    font-size: 3rem;
    padding: 10rem 0 0 0;
  }
}
.header__title-text {
  margin: 4rem 0;
  padding: 2rem 25rem 12rem 25rem;
  color: #9d708f;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  line-height: 2rem;
}
@media (max-width: 991.98px) {
  .header__title-text {
    padding: 2rem 20rem 12rem 20rem;
  }
}
@media (max-width: 767.98px) {
  .header__title-text {
    padding: 4rem 7rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.main {
  width: 100%;
  margin: 0;
  padding: 6rem 0;
  background-color: #fdd6de;
}

.kurse {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 991.98px) {
  .kurse {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
.kurse__cards-background {
  width: 60rem;
  padding: 5rem;
  margin: 0 auto;
}
@media (max-width: 767.98px) {
  .kurse__cards-background {
    width: 35rem;
    padding: 3rem;
  }
}
.kurse__cards-container {
  height: 30rem;
  margin: 0;
  padding: 1.5rem;
  border-radius: 5px;
  overflow: hidden;
  transition: all 1.3s;
}
.kurse__cards-container:hover .kurse__cards-container-div {
  background-color: rgba(255, 255, 255, 0.9019607843);
}
.kurse__cards-container:hover .kurse__cards-container-div-beschB,
.kurse__cards-container:hover .kurse__cards-container-div-beschC,
.kurse__cards-container:hover .kurse__cards-container-div-beschM {
  display: block;
}
.kurse__cards-container:hover .card__btn {
  display: inline-block;
}
.kurse__cards-container:hover .priceB,
.kurse__cards-container:hover .priceC,
.kurse__cards-container:hover .priceM {
  display: block;
}
@media (max-width: 767.98px) {
  .kurse__cards-container:hover .kurse__cards-container-div {
    background-color: transparent;
  }
  .kurse__cards-container:hover .kurse__cards-container-div-beschB,
  .kurse__cards-container:hover .kurse__cards-container-div-beschC,
  .kurse__cards-container:hover .kurse__cards-container-div-beschM {
    display: none;
  }
  .kurse__cards-container:hover .card__btn {
    display: none;
  }
  .kurse__cards-container:hover .priceB,
  .kurse__cards-container:hover .priceC,
  .kurse__cards-container:hover .priceM {
    display: none;
  }
}
.kurse__cards-container-div {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  border: solid #ffffff;
  transition: all 1.3s;
}
.kurse__cards-container-div-beschB, .kurse__cards-container-div-beschC, .kurse__cards-container-div-beschM {
  display: none;
  width: 100%;
  height: 60%;
  padding: 1rem;
  margin: 0 auto;
  color: #503a1c;
  font-weight: 500;
  font-size: 1.5rem;
  text-align: center;
  align-content: center;
  line-height: 2rem;
  transition: all 1.3s;
}
@media (max-width: 767.98px) {
  .kurse__cards-container-div-beschB, .kurse__cards-container-div-beschC, .kurse__cards-container-div-beschM {
    padding: 0.8rem;
    font-size: 1.1rem;
    line-height: 1.8rem;
  }
}
.kurse__text {
  height: 4rem;
  margin: 0;
  padding: 2rem 0;
  align-content: center;
  font-size: 2rem;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: #725a39;
}
@media (max-width: 767.98px) {
  .kurse__text {
    font-size: 1.5rem;
  }
}

.bckg-img1 {
  background-image: url("../fotos/bread1.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bckg-img2 {
  background-image: url("../fotos/Kuchen1.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bckg-img3 {
  background-image: url("../fotos/macarons1.jpeg");
  background-position: 50% 60%;
  background-size: cover;
  background-repeat: no-repeat;
}

.priceB,
.priceC,
.priceM {
  display: none;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  color: #503a1c;
  font-weight: 500;
  font-size: 1.5rem;
  text-align: center;
  align-content: center;
  line-height: 2rem;
  transition: all 1.3s;
}
@media (max-width: 767.98px) {
  .priceB,
  .priceC,
  .priceM {
    font-size: 0.9rem;
    line-height: 1rem;
  }
}

.bread1::before {
  content: "Lernen Sie, wie man Sauerteig, Ciabatta und rustikales Brot selbst backt – von der Wahl der besten Zutaten bis zur Kunst des Gärens.";
}

.bread2::before {
  content: "Wir zeigen Ihnen, wie Sie Brotsorten wie Sauerteig, Ciabatta und rustikales Brot von Grund auf selbst backen. Dabei erfahren Sie alles über die Wahl der richtigen Zutaten und die Kunst des Gärens, um den perfekten Teig und einen herrlich duftenden Laib Brot zu kreieren.";
}

.cake1::before {
  content: "Im Mittelpunkt steht die Kunst, traumhafte Kuchen und Törtchen zu backen – von Biskuitteig bis kreativen Dekorationen.";
}

.cake2::before {
  content: "Hier dreht sich alles um die Herstellung von traumhaften Kuchen und Törtchen. Vom Biskuitteig bis hin zu kreativen Dekorationstechniken – Sie können Ihrer Fantasie freien Lauf lassen und lernen, wie man süße Meisterwerke kreiert, die nicht nur lecker, sondern auch ein optisches Highlight sind.";
}

.macaron1::before {
  content: "Hier geht es darum, traumhafte Kuchen und Törtchen zu backen – von Biskuitteig bis kreativen Dekorationen.";
}

.macaron2::before {
  content: "Erfahren Sie alles über die Kunst, Macarons zu backen. Sie lernen, wie man die charakteristische, knusprige Schale und die zarte Füllung perfekt hinbekommt. Mit verschiedenen Aromen und Farben gestalten Sie Ihre eigenen Macarons und erlernen professionelle Techniken der Dekoration.";
}

.break::after {
  content: "\a";
  white-space: pre;
}

.card__btn {
  display: none;
  --webkit-position: absolute;
  width: 7rem;
  margin: 0 auto;
  padding: 0.4rem;
  bottom: 1rem;
  left: 0;
  right: 0;
  border: none;
  color: rgb(234, 234, 234);
  background-color: #463114;
  cursor: pointer;
  transition: all 0.8s;
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
}
@media (max-width: 767.98px) {
  .card__btn {
    font-size: 1rem;
  }
}
.card__btn:hover {
  background-color: rgb(234, 234, 234);
  color: #463114;
  outline: 2px solid #463114;
}
@media (max-width: 767.98px) {
  .card__btn {
    cursor: default;
  }
  .card__btn:hover {
    color: rgb(234, 234, 234);
    background-color: #463114;
    outline: none;
  }
}

.gutschein {
  display: flex;
  max-width: 500px;
  height: auto;
  flex-direction: column;
  margin: 15rem auto;
  padding: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #ffffff;
}
@media (max-width: 767.98px) {
  .gutschein {
    width: 350px;
  }
}
.gutschein__title {
  margin: 3rem 0 1.5rem 0;
  padding: 0;
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: #503a1c;
}
.gutschein__p {
  margin: 0;
  padding: 0;
  width: 40rem;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #503a1c;
}
@media (max-width: 767.98px) {
  .gutschein__p {
    width: 30rem;
    font-size: 1.2rem;
    padding: 0 1rem;
    text-wrap: wrap;
    line-height: 1.7rem;
  }
}
.gutschein__btn {
  width: 14rem;
  margin: 1.5rem 0 3rem 0;
  padding: 1rem;
  border: none;
  color: rgb(234, 234, 234);
  background-color: #463114;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.5s;
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  transition: 0.8s;
}
.gutschein__btn:hover {
  width: 15rem;
  background-color: rgb(234, 234, 234);
  color: #463114;
  outline: 2px solid #463114;
}
@media (max-width: 767.98px) {
  .gutschein__btn:hover {
    cursor: default;
    width: 14rem;
    background-color: #463114;
    color: rgb(234, 234, 234);
    outline: none;
  }
}

.separate-bar {
  margin: 1rem auto 6rem auto;
  padding: 0;
  width: 200px;
  height: 2px;
  border-radius: 1000000000px;
  background-color: hsl(47, 94%, 32%);
}
.separate-bar.dark {
  background-color: hsl(0, 0%, 25%);
  margin: 0;
  width: 100%;
}

.footer {
  color: hsl(47, 94%, 32%);
  background-color: hsl(0, 0%, 100%);
  height: 100%;
  padding: 0 0 2rem 0;
  margin: 0;
}
.footer__div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0 auto;
  padding: 5rem 0 0 0;
}
@media (max-width: 767.98px) {
  .footer__div {
    flex-direction: column;
    margin: 5rem auto;
  }
}
.footer__div-ul {
  display: flex;
  margin: 0;
  padding: 0;
  width: 20rem;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 767.98px) {
  .footer__div-ul {
    width: 13rem;
    margin: 0 auto;
  }
}
.footer__div-ul li {
  list-style: none;
}
.footer__div-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9rem;
  width: 9rem;
  margin: 0;
  padding: 1rem;
}
@media (max-width: 767.98px) {
  .footer__div-logo {
    margin: 4rem auto;
  }
}
.footer__div-logo-img {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 767.98px) {
  .footer__div-logo-img {
    width: 80%;
  }
}
.footer__div-link {
  display: flex;
  width: 22rem;
  justify-content: space-around;
  align-items: center;
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
}
@media (max-width: 767.98px) {
  .footer__div-link {
    margin: 0 auto;
  }
}
.footer__div-link a {
  color: hsl(0, 0%, 25%);
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .footer__div-link a {
    cursor: default;
  }
}
.footer__div-link a.active {
  color: hsl(40, 5%, 66%);
}
.footer__last {
  margin: 3rem auto 0 auto;
}
.footer__last-bottomtext {
  font-size: 1rem;
  padding: 0;
  text-align: center;
  color: hsl(0, 0%, 25%);
}
.footer__last-disclaimer {
  font-size: 1rem;
  color: hsl(0, 0%, 25%);
  text-align: center;
  margin: 0 5px;
  padding: 0;
}

.fa-facebook,
.fa-instagram,
.fa-location-dot {
  margin: 0;
  padding: 0;
  color: hsl(35, 56%, 18%);
  font-size: 2rem;
}/*# sourceMappingURL=kurse.css.map */