/* =========================
   RESPONSIVE BASIS
   ========================= */

@media (max-width: 667px) {
   #Kunsttext {
    font-family: "Brush Script MT", cursive;
    font-size: 2rem;
    text-align: center;
    width: 60rem;
    position: absolute;
    top: 80%;
    left: 6%;
    z-index: 500;
    color: #000000;

    animation-name: Kunsttext, Kunsttext2; /*diese Funktion verwenden*/
    animation-duration: 3s, 3s; /*wie lange soll es dauern*/
    animation-timing-function: linear, ease-in-out; /*welche Übergänge berechnet werden sollen*/
    animation-iteration-count: 1; /*wie oft es durchlaufen soll / für durchgehen infinite*/
    animation-delay: 0s, 0s; /*wann soll die Animation starten, nach 2 Sekunden nach Aufruf der Seite*/
    animation-fill-mode: both, both; /*behält dadurch die letzten backgroundcolor z.B. gelb*/
    /*kurzer Code dazu - animation: box-bgcolor 10s linear 2s 3 both*/
    /* animation: box-bgcolor-position 10s ease-in-out 2s infinite both*/
}


@keyframes Kunsttext2 {
    0% {
        opacity: 0.1;
        transform: translate(-300%, 0);
    }

    100% {
        opacity: 0.9;
        transform: translate(0, 0);
    }
}


@keyframes Kunsttext {
    0% {
        width: 1rem; /*verändert die Größe, während der Animation*/
        height: 3rem;
    }

    100% {
        width: 20rem;
        height: 7rem;
    }
}
}



@media (max-width: 667px) {
.firmenimg {
    width: 20rem;
    height: 20rem;
    position: absolute;
    top: 33%;
    left: 7%;
    border-radius: 50%;
    z-index: 2;
    


    animation-name: Firmennamen, Firmennamen2; /*diese Funktion verwenden*/
    animation-duration: 3s, 3s; /*wie lange soll es dauern*/
    animation-timing-function: linear, ease-in-out; /*welche Übergänge berechnet werden sollen*/
    animation-iteration-count: 1; /*wie oft es durchlaufen soll / für durchgehen infinite*/
    animation-delay: 0s, 0s; /*wann soll die Animation starten, nach 2 Sekunden nach Aufruf der Seite*/
    animation-fill-mode: both, both; /*behält dadurch die letzten backgroundcolor z.B. gelb*/
    /*kurzer Code dazu - animation: box-bgcolor 10s linear 2s 3 both*/
    /* animation: box-bgcolor-position 10s ease-in-out 2s infinite both*/
}


@keyframes Firmennamen2 {
    0% {
        opacity: 0.1;
        transform: translate(-300%, 0);
    }

    100% {
        opacity: 0.9;
        transform: translate(0, 0);
    }
}



@keyframes Firmennamen {
    0% {
        width: 1rem; /*verändert die Größe, während der Animation*/
        height: 1rem;
    }

    100% {
        width: 20rem;
        height: 20rem;
    }
}
}






@media (max-width: 667px) {
#metallKugel{
    width:15rem;
    height:15rem;
    position: absolute;
    top: -25%;
    left: -30%;
    z-index: 100;

    color:rgb(19, 145, 51);
    font-size:3rem;

    border-radius:50%;

   
}




@keyframes metallKugel{

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:15rem;
        height:15rem;
        border-radius:50%;
    }
}
/* Positionierung beim Start */

@keyframes metallKugel2 {

    0%{
        opacity:.1;
        transform:translate(320%, 310%);
    }

   100% {
        opacity: 0.9;
        transform: translate(0, 0);
    }
}

/* Dauerhafte Bewegung */

@keyframes animationmetallKugel-position{

    0%{
        transform:translate(-5%,0%);
    }

    20%{
        transform:translate(-25%, 35%);
    }

    40%{
        transform:translate(-25%,-35%);
    }

    60%{
        transform:translate(-5%, -30%);
    }

    100%{
        transform:translate(-15%,0%);
    }
 }
}





/*shop*/
@media (max-width: 667px) {
#kreisWrapperGold{
    position:absolute;
    top:47%;
    left:20%;
    z-index: 20;
    animation:
        kreisAnimationGold-position 30s linear 6s infinite;
}



#kreisAnimationGold{
    width:10rem;
    height:10rem;
    z-index: 20;
    color:rgb(48,48,136);
    font-size:3rem;

    border-radius:50%;



    animation:
        kreisAnimationGold 3s ease-in-out 0s 1 forwards,
        kreisAnimationGold2 3s ease-in-out 3s 1 forwards,
        float4 6s ease-in-out infinite,
        shimmerGold 8s linear infinite;
}

/* Einflug */

@keyframes kreisAnimationGold {

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimationGold2 {

    0%{
        opacity:.1;
        transform:translate(320%, 310%);
    }

    100%{
        opacity:.9;
        transform:translate(0%, 0%);
    }
}

/* Dauerhafte Bewegung */

@keyframes kreisAnimation-position{

    0%{
        transform:translate(20%,20%);
    }

    20%{
        transform:translate(15%,20%);
    }

    40%{
        transform:translate(15%,25%);
    }

    60%{
        transform:translate(20%, 20%);
    }

    100%{
        transform:translate(20%, 20%);
    }
}
}





/* kontakt*/
@media (max-width: 667px) {
#metallKugelblauWrapperklein{
    position:absolute;
    top: 60%;
    left:-205%;
    width:15rem;
    height:15rem;
    z-index:1000;

  border-radius:50%;

    animation:
        animationmetallKugelblau-position 30s linear 6s infinite;

 
}


#metallKugelblauklein {
    position:absolute;
    top: 30%;
    left:-72%;
    width:10rem;
    height:10rem;
    z-index:10;

    border-radius:50%;

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

    transition:all .33s ease;


    animation:
        metallKugelblauklein 3s ease-in-out forwards,
        metallKugelblauklein2 3s ease-in-out 3s forwards,
        float10 6s ease-in-out infinite,
        shimmerBlueklein 8s linear infinite;
}

/* Einflug */
@keyframes metallKugelblauklein{
    0%{
        width:1rem;
        height:1rem;
    }
    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}

/* Startbewegung */
@keyframes metallKugelblauklein2{
    0%{
        opacity:.1;
        transform:translate(320%,310%);
    }
    100%{
        opacity:.9;
        transform:translate(0%,0%);
    }
}

/* Dauerbewegung */
@keyframes  animationmetallKugelblauklein-position{
    0%{ transform:translate(-160%,-140%); }
    20%{ transform:translate(-165%,-140%); }
    40%{ transform:translate(-160%,-140%); }
    60%{ transform:translate(-165%,-140%); }
    100%{ transform:translate(-160%,-140%); }
}

}





/* Galerie */
@media (max-width: 667px) {
#metallKugelWrapperklein{
    position:absolute;
    top:40%;
    left: -145%;
    z-index:1010;

    animation:
        animationmetallKugelblau-position 30s linear 6s infinite;
}



#metallKugelklein {
    width:10rem;
    height:10rem;
    z-index:1100;

    border-radius:50%;

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

    transition:all .33s ease;


    animation:
        metallKugelklein 3s ease-in-out forwards,
        metallKugelklein2 3s ease-in-out 3s forwards,
        float11 6s ease-in-out infinite,
        shimmerBluekleinklein 8s linear infinite;
}

/* Einflug */
@keyframes metallKugelklein{
    0%{
        width:1rem;
        height:1rem;
    }
    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}

/* Startbewegung */
@keyframes metallKugelklein2{
    0%{
        opacity:.1;
        transform:translate(320%,310%);
    }
    100%{
        opacity:.9;
        transform:translate(0%,0%);
    }
}

/* Dauerbewegung */
@keyframes  animationmetallKugelblauklein-position{
    0%{ transform:translate(0%,-10%); }
    20%{ transform:translate(5%,-10%); }
    40%{ transform:translate(0%,-10%); }
    60%{ transform:translate(5%,-10%); }
    100%{ transform:translate(0%,-10%); }
}
}





/* über mich */
@media (max-width: 667px) {
#kreisWrapper{
    position:absolute;
    top:43%;
    left:52%;
    z-index: 30;
    animation:
        kreisAnimation-position 30s linear 6s infinite;
}

#textlink {
    z-index: 500;
}

#kreisAnimation{
    width:10rem;
    height:10rem;
    z-index: 500;
    color:#c48b00;
    font-size:3rem;

    border-radius:50%;

    

    animation:
        kreisAnimation 3s ease-in-out 0s 1 forwards,
        kreisAnimation2 3s ease-in-out 3s 1 forwards,
        float2 6s ease-in-out infinite,
        shimmer2 8s linear infinite;
}

/* Einflug */

@keyframes kreisAnimation{

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}


@keyframes kreisAnimation{

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */



/* Dauerhafte Bewegung */

@keyframes kreisAnimation-position{

    0%{
        transform:translate(10%,0%);
    }

    20%{
        transform:translate(5%,10%);
    }

    40%{
        transform:translate(5%,5%);
    }

    60%{
        transform:translate(10%, 10%);
    }

    100%{
        transform:translate(10%, 0%);
    }
}








/*gelbe große Kugel Shop*/
@media (max-width: 667px) {
#kreisWrapperh {
    position:absolute;
    top:0%;
    left:0%;
    z-index: 2;
    animation:
        kreisAnimationGoldh-position 30s linear 6s infinite;
}
/*gelbe große Kugel von Shop*/
#kreisWrapperGoldh {
    width:10rem;
    height:10rem;
    position:absolute;
    top:37%;
    left:0%;
    z-index: 2;
    color:rgb(61, 48, 136);
    font-size:3rem;

    border-radius:50%;



    animation:
        kreisAnimationGoldh 3s ease-in-out 0s 1 forwards,
        kreisAnimationGoldh2 3s ease-in-out 3s 1 forwards,
        float44 6s ease-in-out infinite,
        shimmerGold 8s linear infinite;
}

/* Einflug */

@keyframes kreisAnimationGoldh {

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimationGoldh2 {

    0%{
        opacity:.1;
        transform:translate(320%, 310%);
    }

    100%{
        opacity:.9;
        transform:translate(0%,0%);
    }
}

/* Dauerhafte Bewegung */

@keyframes kreisAnimationGoldh-position{

    0%{
        transform:translate(10%,0%);
    }

    20%{
        transform:translate(5%,10%);
    }

    40%{
        transform:translate(5%,5%);
    }

    60%{
        transform:translate(10%, 10%);
    }

    100%{
        transform:translate(10%, 0%);
    }
}
}}


/* rote große Kugel*/ 
@media (max-width: 667px) {
#metallKugelWrapper{
    position:absolute;
    top:65%;
    left:1%;
    z-index: 4;

    animation:
        animationmetallKugel-position 30s linear 6s infinite;
}

#metallKugel{
    width:23rem;
    height:23rem;
    z-index: 1;

    color:rgb(48,48,136);
    font-size:3rem;

    border-radius:50%;



    animation:
        metallKugel 3s ease-in-out 0s 1 forwards,
        metallKugel2 3s ease-in-out 3s 1 forwards,
        float5 6s ease-in-out infinite,
        shimmermetallKugel 8s linear infinite;
}



@keyframes metallKugel {

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:23rem;
        height:23rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes metallKugel2 {

    0%{
        opacity:.1;
        transform:translate(320%, 310%);
    }

    100%{
        opacity:.9;
        transform:translate(0%,0%);
    }
}

/* Dauerhafte Bewegung */

@keyframes animationmetallKugel-position{

    0%{
        transform:translate(0%,0%);
    }

    20%{
        transform:translate(10%,-10%);
    }

    40%{
        transform:translate(-5%,-15%);
    }

    60%{
        transform:translate(15%,-5%);
    }

    100%{
        transform:translate(0%,0%);
    }
}
}







/* hellere blaue große Kugel oben links*/
@media (max-width: 667px) {
#kreisWrapperh{
    position:absolute;
    top:10%;
    left:20%;
    z-index: 2;
    animation:
        kreisAnimationh-position 30s linear 6s infinite;
}

#kreisAnimationh{
    width:20rem;
    height:20rem;
    z-index: 2;
    color:rgb(48,48,136);
    font-size:3rem;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(93, 138, 190, 0.589),
            rgba(173, 216, 230, 0.534) 40%,
            rgba(135, 206, 250, 0.555) 60%,
            rgba(173, 216, 230, 0.356) 70%,
            rgba(255, 255, 255, 0.322)
        );

    box-shadow:
        inset 0 0 50px rgba(255,255,255,.3),
        0 0 30px rgba(255,255,255,.2),
        0 0 60px rgba(114,203,233,.4);

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

    transition:all .33s ease;

    animation:
        kreisAnimationh 3s ease-in-out 0s 1 forwards,
        kreisAnimationh2 3s ease-in-out 3s 1 forwards,
        float22 6s ease-in-out infinite,
        shimmerh2 8s linear infinite;
}

/* Einflug */

@keyframes kreisAnimationh{

    0%{
        width:1rem;
        height:1rem;
    }

    100%{
        width:13rem;
        height:13rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimationh2{

    0%{
        opacity:.1;
        transform:translate(-320%,-310%);
    }

    100%{
        opacity:.9;
        transform:translate(0%,0%);
    }
}

/* Dauerhafte Bewegung */

@keyframes kreisAnimationh-position{

    0%{
        transform:translate(0%,0%);
    }

    20%{
        transform:translate(10%,0%);
    }

    40%{
        transform:translate(-5%,0%);
    }

    60%{
        transform:translate(15%,0%);
    }

    100%{
        transform:translate(0%,0%);
    }
}
}




/* blaue unten Kugel oben*/
@media (max-width: 667px) {
#metallKugelblauWrapper{
    position:absolute;
    top:-135%;
    left:107%;
    z-index:1;

    animation:
        animationmetallKugelblau-position 30s linear 6s infinite;
}

#metallKugelblau{
    width:10rem;
    height:10rem;
    z-index:1;

    border-radius:50%;

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

    transition:all .33s ease;

 

    animation:
        metallKugelblau 3s ease-in-out forwards,
        metallKugelblau2 3s ease-in-out 3s forwards,
        float6 6s ease-in-out infinite,
        shimmerBlue 8s linear infinite;
}

/* Einflug */
@keyframes metallKugelblau{
    0%{
        width:1rem;
        height:1rem;
    }
    100%{
        width:10rem;
        height:10rem;
        border-radius:50%;
    }
}

/* Startbewegung */
@keyframes metallKugelblau2{
    0%{
        opacity:.1;
        transform:translate(320%,310%);
    }
    100%{
        opacity:.9;
        transform:translate(0%,0%);
    }
}

/* Dauerbewegung */
@keyframes  animationmetallKugelblau-position{
    0%{ transform:translate(130%,-120%); }
    20%{ transform:translate(130%,-120%); }
    40%{ transform:translate(130%,-120%); }
    60%{ transform:translate(130%,-120%); }
    100%{ transform:translate(130%,-120%); }
}


@keyframes shimmerBlue{
    0%{
        background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.329) 35%,
            rgba(120, 201, 255, 0.479) 65%,
            transparent 80%
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 50% 50%,
            circle at 30% 30%,
            rgba(255, 255, 255, 0.322) 15%,
            rgba(120, 201, 255, 0.26) 65%,
            transparent 90%
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.356) 15%,
            rgba(120, 201, 255, 0.349) 65%,
            transparent 80%
        );
    }
}

}














/* Schwebeboxen */


@media (max-width: 667px) {

    .scroll-box {
        width: 95%;
        max-height: 70vh;
        overflow-y: auto;
        padding: 1.2rem;
    }
    .scroll-box img {
        float: none;
        display: block;
        width: 50%;
        height: auto;
        max-height: 220px;
        margin-bottom: 1rem;
        padding: 0;
    }

    #textlinke {
        position: static;
        display: inline-block;
        transform: none;
        margin-top: 1rem;
        white-space: normal;
    }



    .scroll-box h2 {
        margin-bottom: 0.25rem;
        font-size: 1rem;
        text-align: center;
    }

    .scroll-box p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .scroll-box a {
        display: inline-block;
        margin-top: 1rem;
        font-size: 1rem;
    }

    .box-left{
    left:2%;
    top:12%;
}

.box-right{
    right:2%;
    top:10%;
}

.box-top{
    left:50%;
    top:12%;
    transform:translateX(-50%);
}

.box-bottom{
    top:12%;
    left:50%;
    transform:translateX(-50%);
}
  

}








@media (max-width: 667px) {
.textbox {
    position:absolute;
    top:35%;
    width:100%;
    height:90vh;
    background-color: #00000000;
    color: white;
    z-index: 20;
}

.slider-container { 
    max-width:1200px; 
    margin:50px auto; 
    position:relative; 
    overflow:hidden; 
} 
.slider { 
    display:flex; 
    transition:transform 0.5s ease; 
} 
.slide {
     min-width:100%; 
     box-sizing:border-box; 
     padding:15px;
     } 
.card { 
    background: #0c0c0c; 
    border-radius:15px; 
    border: 1em ridge #c48b00;
    overflow:hidden; 
    box-shadow:0 5px 15px rgba(0,0,0,0.1); 
    transition:0.3s; 
} 
.card:hover {
     transform:translateY(-15px); 
    } 
.card img { 
    width:100%; 
    height:300px; 
    object-fit:cover; 
} 
.card-content { 
    padding:20px; 
    text-align:center;
 }
.card-content h3 { 
    margin:0 0 10px; 
} 
.price { 
    color:#c48b00; 
    font-size:22px; 
    font-weight:bold; 
    margin:10px 0; 
} 
.btn {
     display:inline-block; 
     padding:10px 20px;
      background:#222; 
      color:#fff; 
      text-decoration:none;
       border-radius:30px; 
    } 
.btn:hover {
    color: #0ec507;
}
.nav { 
    position:absolute; 
    top:45%; 
    transform:translateY(-50%);
     background:rgba(0,0,0,0.6); 
     color:#fff; border:none;
      width:45px; height:45px; 
      cursor:pointer; 
      border-radius:50%; 
      font-size:20px; 
    } 
.prev { 
    left:10px;
 } 
 .next {
     right:10px; 
    } 
    
}




@media (max-width: 667px) {
    .freiertext {
        position: absolute;
        top: 130%;
        width: 100%;
        height: 33rem;
        background-color: #00000000;
        color: #ffffff;
        z-index: 20;
        overflow: hidden;
        padding: 1rem 0 2rem;
    }



.flipper-window{
    width:100%;
    overflow:hidden;
}
#FlipperHauptcontainer{
  position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
    display:flex;

    flex-wrap:nowrap;

    transition:.5s;

    width:auto;

}


    .flip-container,
    .flip-container2,
    .flip-container3,
    .flip-container4,
    .flip-container5 {
        width: calc(50% - 0.75rem);
        max-width: 10.5rem;
        min-width: 18rem;
        height: 27rem;
        float: none;
        margin: 0;
    }

    .front, .back,
    .front2, .back2,
    .front3, .back3,
    .front4, .back4,
    .front5, .back5 {
        padding: 0.75rem;
    }

    .front, .front2, .front3, .front4, .front5 {
        font-size: 0.9rem;
    }

    .back, .back2, .back3, .back4, .back5 {
        font-size: 1.2rem;
        padding: 0.9rem;
        overflow-y: auto;
    }

    .PersonenTiere,
    .natur,
    .Abstraktekunst,
    .StrukturFormen,
    .Pflanzen {
        width: 100%;
        max-width: 13rem;
        height: 18rem;
        object-fit: cover;
        margin: 0 auto 0.75rem;
        display: block;
    }

    .lilinks {
        margin-left: 0;
        margin-bottom: 0.4rem;
    }

    .PersonenTierel,
    .Naturl,
    .Abstraktekunstl,
    .StrukturFormenl,
    .Pflanzenl {
        position: absolute;
        top: 94%;
        left: 32%;
        line-height: 1.2;
        font-size: 1.25rem;
    }
}










@media (max-width: 667px) {
.sectiong {
  position: relative;
  top: 10%;
  height: 60vh;
  font-family: Termina, sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  z-index: 500;
}
.textshoppen {
    position: relative;
    top: -50%;
    height: 17rem;
    background-color: #000000;
}
.gehzumshop {

    margin: 0.5rem;
    font-size: 1.5rem;
    text-align: center;
    color: white;
    background-color: #000000;
}

.Linkgehzumshop {
    position: relative;
    left: 12%;
    padding: 1rem;
    font-size: 2.5rem;
    color: #c48b00;
}

.Linkgehzumshop:hover {
    color: #0ec507;
}
.credit {
  text-align: center;
  z-index: 20;
  font-size: 0.8rem;
  position: relative;
  top: 0%;
  bottom: 1rem;
  right: 1rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;

  a {
    color: #fff;
  }
}

* {
  box-sizing: border-box;
}

h1 {

  margin: 2rem auto;
  font-size: clamp(3vw, 2rem, 4rem);
  text-align: center;
  z-index: 25;
  max-width: 800px;
  mix-blend-mode: difference;
  pointer-events: none;
  color: white;
  position: relative;
  top: 0%;
  left: 50;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
}

.gallery-section {
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 20vh;
  position: relative;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;

 
}




.col {
  display: flex;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  flex-direction: column;
  align-self: flex-start;
  justify-self: flex-start;
}



.galleryimga {
  width: 100%;
  filter: saturate(0);
  padding: 1rem;
}

.col:nth-child(2) {
  align-self: flex-end;
  justify-self: flex-end;
}

.image:hover {
  z-index: 99999999999 !important;
  filter: saturate(1);
}




.gallery-section{
    position:relative;
    height:100vh;
    background:#eee;
    overflow:hidden;
}


img {
  transition: 0.3s ease-out;
  overflow: hidden;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  width: 100%;
}
}


@media (max-width: 667px) {
.Wettbewerb {
    position:absolute;
    top:70%;
    width:100%;
    height:50vh;
    background-color: #000000a1;
    color: white;
    z-index: 20;
    text-align: center;
}
}





@media (max-width: 667px) {

.Informationen {
position: relative;
top: 1350%;
width: 100%;
height: 12rem;
background-color: black;
z-index: 500;
}


.Datenschutzerklärung {
    position: absolute;
    top:0.5rem;
    left: 2rem;
    color: white;
    z-index: 10;
}

.Impressum {
    position: absolute;
    top:2.5rem;
    left: 2rem;
    color: white;
    z-index: 30;
}

.Uberuns {
    position: absolute;
    top:4.5rem;
    left: 2rem;
    color: white;
    z-index: 10;
}

.Neuigkeiten {
    position: absolute;
    top:6.5rem;
    left: 2rem;
    color: white;
    z-index: 10;
}

.instagram-icon {
    position: absolute;
    top:0.5rem;
    left: 15rem;
    color: white;
    z-index: 10;
}
.tiktok-icon {
    position: absolute;
    top:0.5rem;
    left: 19rem;
    height: 1.5rem;
    width: 1.3rem;
    color: white;
    z-index: 10;
}

.QR-Code-Bewertung {
    position: absolute;
    top: 4.5rem;
    left: 16.3rem;
    width: 3rem;
    height: 3rem;
  }

    iframe {
      width: 100%;
      height: 3rem;
      border: 0;
    }

    .Powered {
        position: absolute;
        top:10.3rem;
        left: 1rem;
        color: white;
        z-index: 10;
        font-size: 0.75rem;
    }
}