.Home {
     position: absolute;
     top: 25%;
     left: 5%;
}

@media (max-width: 667px) {
   #Kunsttext {
    font-family: "Brush Script MT", cursive;
    font-size: 1.8rem;
    text-align: center;
    width: 60rem;
    position: absolute;
    top: 79%;
    left: 6%;
    z-index: 5000;
    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) {
.Home2 {
     position: absolute;
     top: 15%;
     left: 5%;
     z-index: 1000;
}
}


@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%
        );
    }
}

}













/* Visitenkarte */
.cardv {
            
            position: absolute;
            top: 75%;
            left: 20%;
            background-color: white;
            border-radius: 10%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 0.5rem;
            width: 60%;
            height: 50vh;
            text-align: center;
            border-color: #c48b00;
            border-style: solid;
            border-width: 0.33rem;
            z-index: 5;
        }

   
.text {
    padding: 2rem;
    text-align: center;
    text-align: justify;
    position: absolute;
    top: 1%;
    font-style: unset;
}
















@media screen and (max-width:667px){

.cardv{

    position:absolute;

    top: 75%;
    left:2.5%;

    width:95%;
    height:50vh;

    padding:0.5rem;

    border-radius:15px;

}



.text {
    position: absolute;
    top: 0%;
    margin: 0px;
    color: black;
    text-align: center;
    text-align: justify;
    font-style: unset;
}

 }