.body {
    background-image: url('images/ecard-001.jpg') !important; /* Pfad zu deinem Bild */
    background-size: cover; /* Passt das Bild an, um den gesamten Bereich abzudecken */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert das Kacheln des Bildes */
    background-attachment: fixed; /* Lässt das Bild beim Scrollen fixiert */
    /* Für absolute Vollbild-Füllung des Viewports */
    width: 100vw;
    height: 100vh;
    margin: 0; /* Entfernt Standard-Ränder des Bodys */
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.container {
  width: 25px;
  height: auto;
  overflow: hidden;
}

.img {
  width: 100%;
  height: auto;
}

/* input {
    -webkit-margin-start: initial;
    width: 35px !important;
    height: 20px !important;
    border-radius: 10px !important;
    background-color: darkblue !important;
    color: white !important;
} */

button.button--mute {
    z-index: 10000;
    position: fixed;
    vertical-align: bottom;
    right: 0px;
    bottom: 35px;
    display: inline-block;
    width: 50px;
    height: 40px;
    background: #131b4f;
    border: none;
    border-right: none;
    color: #fff;
    padding: 0px 10px 5px 0px;
    border-radius: 20px 0 0 20px;
    outline: none;
    cursor: pointer;
    box-shadow: inset 2px 10px 15px #3677da !important;
    }  
.button--mute img{
    /*background-image: url('images/speaker.png');
    background-repeat: no-repeat;
    background-size: 30%;*/
    display: block;
    width: 30px;
    height: 25px;
    margin-left: 10px; 
    margin-top: 7px;
    height: auto;
    color: #fff;
    }
button.button--mute:hover {
    box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.4);
    }

video-container { position: relative; display: inline-block; }
#muteBtn {
  position: absolute; bottom: 10px; right: 10px;
  padding: 5px 10px; background: rgba(0,0,0,0.5);
  color: white; border: none; cursor: pointer;
  z-index: 100;
}

video {
    position:fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover;
    z-index: -1;
}

bg-image-full-height {
    background-image: url('images/ecard-001_5.jpg');
    background-size: cover; /* Bild deckt den gesamten Bereich ab */
    background-position: center; /* Zentriert das Bild */
    min-height: 100vh; /* Nimmt 100% der Viewport-Höhe ein */
    width: 100%; /* Volle Breite */
}

h1 {
    color: white !important;
    position: absolute !important;
    text-align: center !important;
    top: 45% !important;
    left: 50% !important; 
    font-size: 55px !important;
    font-weight: lighter !important;
    line-height: 75% !important;
    transform: translate(-50%,-50%) !important;
}

h3 {
    color: white !important;
    position: absolute !important;
    text-align: center !important;    position: absolute !important;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

a {
    color: white !important;
    position: absolute !important;
    text-align: center !important;
    top: 63% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

content {
    display: block !important;
    margin: 0px auto !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgb(0,0,0,0,5);
}


/* Mobile First Base Styles */
/* body { font-size: 16px; } */

/* Tablets (≥ 768px) */ 
 @media (min-width: 768px) {
    .h1 {
    color: white !important;
    position: absolute !important;
    text-align: center !important;
    top: 45% !important;
    left: 50% !important; 
    font-size: 50px !important;
    font-weight: lighter !important;
    line-height: 75% !important;
    transform: translate(-50%,-50%) !important;
}

    .h3 {
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

    .a {
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    top: 65% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

    content {
    display: block !important;
    margin: 0px auto !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgb(0,0,0,0,5);
}

}

/* Laptops (≥ 992px) */ 
@media (min-width: 992px) {
    .h1 {
    color: white !important;
    position: absolute !important;
    text-align: center !important;
    top: 45% !important;
    left: 50% !important; 
    font-size: 65px !important;
    font-weight: lighter !important;
    line-height: 75% !important;
    transform: translate(-50%,-50%) !important;
    }

    .h3 {
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    }

    .a {
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    }

    content {
    display: block !important;
    margin: 0px auto !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgb(0,0,0,0,5);
}
}


/* Desktops (≥ 1200px) */
@media (min-width: 1200px) {
  .h1 {
    color: white !important;
    position: absolute !important;
    top: 47% !important;
    left: 50% !important; 
    bottom: 0 !important;
    font-size: 60px !important;
    font-weight: lighter !important;
    line-height: 75% !important;
    transform: translate(-50%,-50%) !important;
    }

  .h3 {
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    margin-top: 20px !important;
    margin-bottom: 0px !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    }

  .a {
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    top: 63% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    }   

content {
    margin: 0px auto !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgb(0,0,0,0,8);
}
}