/* Include Fonts*/
@font-face {
  font-family: 'Fira Sans-Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/FiraSans-Bold.ttf?3919333f2e366bb4341e09929ea31d60); }

@font-face {
  font-family: 'Fira Sans-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/FiraSans-Regular.ttf?1c0bf0728b51cb9f2ddc01b897da06d3); }

/* ================================
   GLOBAL
================================ */
html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:"Fira Sans-Regular", Arial, sans-serif;
}

:root{
  --edeka-yellow:#ffe13b;
}

/* Bootstrap Fix gegen Verschiebung */
.row{
  margin:0 !important;
}

[class*="col-"]{
  padding:0 !important;
}

/* ================================
   HEADER
================================ */
header .logo{
  position:absolute;
  top:10px;
  left:10px;
  height:65px;
  z-index:20;
}

/* ================================
   CONTENT FULLSCREEN
================================ */
.content{
  height:100dvh;
  width:100%;
}

/* ================================
   SECTIONS
================================ */
.fruits,
.stones{
  position:relative;
  width:100%;
  height:50dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  overflow:visible;
}

/* Platz für Herz im oberen Block */
.fruits{
  padding-bottom:60px;
}

/* ================================
   BACKGROUNDS
================================ */
.bg-fruits img,
.bg-stones img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

/* Overlay */
.fruits::after,
.stones::after{
  content:"";
  position:absolute;
  inset:0;

  z-index:-1;
}

/* ================================
   TEXT
================================ */
.angebotstext{
  font-family:"Fira Sans-Bold";
  font-size:24px;
  line-height:1.2;
  text-transform:uppercase;
  max-width:280px; /* sorgt für 2 Zeilen */
  margin-bottom:20px;
}

/* ================================
   BUTTON
================================ */
.btn.btn-edeka{
  background:var(--edeka-yellow);
  color:#000;
  padding:12px 22px;
  font-size:18px;
  font-family:"Fira Sans-Bold";
  text-transform:uppercase;
  text-decoration:none;
}

/* ================================
   HERZ (EXAKT WIE VORLAGE)
================================ */
.heart{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:10;
  pointer-events:none;
}

.heart img{
  width:90px;
  display:block;
}

/* ================================
   FOOTER (WIE MOCKUP)
================================ */
footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
  z-index:15;
}



.datenschutz-impressum-contact{
  height:100%;
  background:var(--edeka-yellow);
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  padding:0 10px;
}

.datenschutz-impressum-contact a{
  color:#000;
  font-weight:bold;
  text-decoration:none;
  text-transform:uppercase;
  font-size:14px;
}
@media(min-width:768px){



  .heart img{
    width:130px;
  }


}
/* ================================
   DESKTOP
================================ */
@media(min-width:992px){

  .row{
    display:flex;
    height:100%;
  }

  .fruits,
  .stones{
    width:50%;
    height:100vh;
  }

  .angebotstext{
    font-size:33px;
    max-width:450px;
  }

  .heart{
    top:50%;
    left:100%;
  }

  

  .btn.btn-edeka{

    font-size:25px;

  }
  .datenschutz-impressum-contact{
    padding-left:50%;
  }

  header .logo{

    top:15px;
    left:60px;
    height:98px;

  }
}

@media(min-width:1400px){
  header .logo{

    top:15px;
    left:250px;
    height:98px;

  }


  .angebotstext{
    font-size:40px;
    max-width:550px;
  }


  .heart img{
    width:200px;
  }
}

.flags img{
  width:60px;

}
@media(min-width:768px){
  .flags img{
    width:120px;
  }
}

.stones > *:not(.bg-stones) {
  position: relative;
  top: -20px;
}

@media(min-width:768px){
  .stones > *:not(.bg-stones) {
    position: relative;
    top: unset;
  }
}