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

html, body {
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE und Edge Legacy */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 500;
    font-display: swap;
    src: url("Jost/Jost-VariableFont_wght.ttf") format("truetype");
}
@font-face {
    font-family: "Jost";
    font-style: italic;
    font-weight: 100 500;
    font-display: swap;
    src: url("Jost/Jost-Italic-VariableFont_wght.ttf") format("truetype");
}

body{
    overflow-x:hidden;
    font-family:Arial,sans-serif;
    background:#000000;
}
 

#Kunsttext {
    font-family: "Brush Script MT", cursive;
    font-size: 2rem;
    text-align: center;
    width: 60rem;
    position: absolute;
    top: 83%;
    left: 0%;
    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(-500%, 0); /*Position verschieben*/
    }


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

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

    100% {
        width: 56rem;
        height: 10rem;
    }
}



.firmenimg {
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: -4%;
    left: 27%;
    border-radius: 50%;
    z-index: 9;
    


    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(-500%, 0); /*Position verschieben*/
    }


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

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

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



.intro {
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    background:#c48d00c7;
}



.outro{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    background:#11111100;
}









#kreisWrapper{
    position:absolute;
    top:35%;
    left:53%;
    z-index: 30;
    animation:
        kreisAnimation-position 30s linear 6s infinite;
}

#textlink {
    z-index: 500;
}

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at 40% 40%,
            #c48b00,
            #c48d00b6 40%,
            #c48d0079 60%,
            #c48d00a6 70%,
            #c08c0aa2,
        );

    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:
        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:20rem;
        height:20rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimation2{

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

    100%{
        opacity:.9;
        transform:translate(45%,-30%);
    }
}

/* Dauerhafte Bewegung */

@keyframes kreisAnimation-position{

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

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

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

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

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

/* Schweben */

@keyframes float2{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(30px) rotate(10deg);
    }
}

/* Schimmer */

@keyframes shimmer2{

    0%{
        background:
        radial-gradient(
            circle at 40% 40%,
            rgba(114,203,233,.4),
            rgba(173,216,230,.3) 40%,
            rgba(135,206,250,.2) 60%,
            rgba(173,216,230,.1) 70%,
            rgba(255,255,255,.05)
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 60% 60%,
            rgba(255,255,255,.5),
            rgba(173,216,230,.35) 40%,
            rgba(114,203,233,.4) 60%,
            rgba(114,203,233,.233) 70%,
            rgba(255,255,255,.1)
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 40% 40%,
            rgba(114,166,245,.219),
            rgba(173,216,230,.3) 40%,
            rgba(135,206,250,.2) 60%,
            rgba(173,216,230,.1) 70%,
            rgba(255,255,255,.05)
        );
    }
}

/* Text */

#textlink {
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    z-index:500;

    color:rgb(211, 208, 41);
    text-decoration:none;

    font-size:1.5rem;
    font-weight:bold;

    text-align:center;

    white-space:nowrap;
}

#textlink:hover{
    color:#0ec507;
}





#kreisWrapperh{
    position:absolute;
    top:20%;
    left:53%;
    z-index: 2;
    animation:
        kreisAnimationh-position 30s linear 6s infinite;
}

#kreisAnimationh{
    width:30rem;
    height:30rem;
    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,.4),
            rgba(173,216,230,.3) 40%,
            rgba(135,206,250,.2) 60%,
            rgba(173,216,230,.1) 70%,
            rgba(255,255,255,.05)
        );

    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:30rem;
        height:30rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimationh2{

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

    100%{
        opacity:.9;
        transform:translate(-5%,-40%);
    }
}

/* Dauerhafte Bewegung */

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

/* Schweben */

@keyframes float22{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(30px) rotate(10deg);
    }
}

/* Schimmer */

@keyframes shimmerh2{

    0%{
        background:
        radial-gradient(
            circle at 40% 40%,
            rgba(114,203,233,.4),
            rgba(173,216,230,.3) 40%,
            rgba(135,206,250,.2) 60%,
            rgba(173,216,230,.1) 70%,
            rgba(255,255,255,.05)
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 60% 60%,
            rgba(255,255,255,.5),
            rgba(173,216,230,.35) 40%,
            rgba(114,203,233,.4) 60%,
            rgba(114,203,233,.233) 70%,
            rgba(255,255,255,.1)
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 40% 40%,
            rgba(114,166,245,.219),
            rgba(173,216,230,.3) 40%,
            rgba(135,206,250,.2) 60%,
            rgba(173,216,230,.1) 70%,
            rgba(255,255,255,.05)
        );
    }
}














.Kugel1gold {
    position: absolute;
    top: 35%;
    left: 43%;

    width: 200px;
    height: 200px;

    border-radius: 50%;
    border: 20px solid transparent;

    z-index: 2;

    background:
        linear-gradient(135deg,
        rgba(255, 217, 0, 0.596) 0%,
        rgba(211,175,55,.2) 20%,
        transparent 50%,
        rgba(211,175,55,.2) 80%,
        rgba(255, 217, 0, 0.603) 100%),

        linear-gradient(135deg,
        rgba(221, 196, 54, 0.459) 0%,
        rgba(211,175,55,.6) 25%,
        #00000091 50%,
        rgba(211,175,55,.6) 75%,
        rgba(255, 217, 0, 0.575) 100%);

    background-clip: padding-box, border-box;

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.9),
        inset 0 0 80px rgba(211,175,55,.3);

    animation:
        Kugel1gold-position 20s linear infinite,
        float9 8s ease-in-out infinite;

     transition:all .33s ease;

    animation:
        Kugel1gold 3s ease-in-out 0s 1 forwards,
        Kugel1gold2 3s ease-in-out 3s 1 forwards,
        float9 6s ease-in-out infinite,
        shimmer22 8s linear infinite;
}


/* Schwebeanimation */
@keyframes float9 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(30px) rotate(180deg);
    }
}



/* Einflug */

@keyframes Kugel1gold{

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

    100%{
        width:200px;
        height:200px;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes Kugel1gold2{

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

    100%{
        opacity:.9;
        transform:translate(-5%,-20%);
    }
}







#kreisWrapperGold{
    position:absolute;
    top:35%;
    left:27%;
    z-index: 20;
    animation:
        kreisAnimationGold-position 30s linear 6s infinite;
}

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(255,215,0,.55),
            rgba(255,223,100,.45) 40%,
            rgba(211,175,55,.35) 60%,
            rgba(184,134,11,.25) 70%,
            rgba(255,255,255,.08)
        );

    box-shadow:
        inset 0 0 50px rgba(255,255,255,.25),
        inset 0 0 100px rgba(255,215,0,.15),
        0 0 40px rgba(255,215,0,.4),
        0 0 80px rgba(211,175,55,.3);

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

    transition:all .33s ease;

    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:20rem;
        height:20rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimationGold2 {

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

    100%{
        opacity:.9;
        transform:translate(-35%,-25%);
    }
}

/* Dauerhafte Bewegung */

@keyframes kreisAnimationGold-position{

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

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

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

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

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

/* Schweben */

@keyframes float4{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(30px) rotate(-10deg);
    }
}

/* Schimmer */

@keyframes shimmerGold {

    0%{
        background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,215,0,.6),
            rgba(255,223,100,.45) 40%,
            rgba(211,175,55,.3) 70%,
            transparent
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 65% 65%,
            rgba(255,255,255,.7),
            rgba(255,215,0,.5) 35%,
            rgba(211,175,55,.35) 65%,
            transparent
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,215,0,.6),
            rgba(255,223,100,.45) 40%,
            rgba(211,175,55,.3) 70%,
            transparent
        );
    }
}


/* Text */

#textlink {
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    z-index:500;

    color:rgb(211, 208, 41);
    text-decoration:none;

    font-size:1.5rem;
    font-weight:bold;

    text-align:center;

    white-space:nowrap;
}

#textlink:hover{
    color:#0ec507;
}


#kreisWrapperGoldh {
    position:absolute;
    top:20%;
    left:15%;
    z-index: 2;
    animation:
        kreisAnimationGoldh-position 30s linear 6s infinite;
}

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(255,215,0,.55),
            rgba(255,223,100,.45) 40%,
            rgba(211,175,55,.35) 60%,
            rgba(184,134,11,.25) 70%,
            rgba(255,255,255,.08)
        );

    box-shadow:
        inset 0 0 50px rgba(255,255,255,.25),
        inset 0 0 100px rgba(255,215,0,.15),
        0 0 40px rgba(255,215,0,.4),
        0 0 80px rgba(211,175,55,.3);

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

    transition:all .33s ease;

    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:30rem;
        height:30rem;
        border-radius:50%;
    }
}

/* Positionierung beim Start */

@keyframes kreisAnimationGoldh2 {

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

    100%{
        opacity:.9;
        transform:translate(-5%,-20%);
    }
}

/* Dauerhafte Bewegung */

@keyframes kreisAnimationGoldh-position{

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

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

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

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

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

/* Schweben */

@keyframes float44{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(30px) rotate(-10deg);
    }
}

/* Schimmer */

@keyframes shimmerGoldh {

    0%{
        background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,215,0,.6),
            rgba(255,223,100,.45) 40%,
            rgba(211,175,55,.3) 70%,
            transparent
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 65% 65%,
            rgba(255,255,255,.7),
            rgba(255,215,0,.5) 35%,
            rgba(211,175,55,.35) 65%,
            transparent
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,215,0,.6),
            rgba(255,223,100,.45) 40%,
            rgba(211,175,55,.3) 70%,
            transparent
        );
    }
}










#metallKugelWrapper{
    position:absolute;
    top:40%;
    left:33%;
    z-index: 4;

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

#metallKugel{
    width:30rem;
    height:30rem;
    z-index: 100;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #fff8c6 0%,
            #ffe066 10%,
            #ffd90083 25%,
            #d4af37 50%,
            #8b6914 75%,
            #2b1d00 100%
        );

    box-shadow:
        inset -30px -30px 60px rgba(0,0,0,.55),
        inset 20px 20px 40px rgba(255,255,255,.25),
        inset 0 0 80px rgba(255,215,0,.3),
        0 0 40px rgba(255,215,0,.35),
        0 0 100px rgba(255,215,0,.15);
    display:flex;
    justify-content:center;
    align-items:center;

    transition:all .33s ease;

    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;
}

/* Einflug */




@keyframes metallKugel {

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

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

/* Positionierung beim Start */

@keyframes metallKugel2 {

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

    100%{
        opacity:.9;
        transform:translate(-5%,-20%);
    }
}

/* Dauerhafte Bewegung */

@keyframes animationmetallKugel-position{

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

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

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

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

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

/* Schweben */

@keyframes float5{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(30px) rotate(-10deg);
    }
}

/* Schimmer */

@keyframes shimmermetallKugel {

    0%{
        background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(92, 9, 9, 0.274) 65%,
            transparent 80%
        );
    }

    50%{
        background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(243, 114, 114, 0.315) 30%,
            rgba(165, 15, 15, 0.274) 75%,
            transparent 80%
        );
    }

    100%{
        background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(105, 36, 36, 0.144) 55%,
            rgba(165, 15, 15, 0.274) 85%,
            transparent 80%
        );
    }
}


/* Text */

#textlink {
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    z-index:500;

    color:rgb(211, 208, 41);
    text-decoration:none;

    font-size:1.5rem;
    font-weight:bold;

    text-align:center;

    white-space:nowrap;
}

#textlink:hover{
    color:#09d324;
}











#metallKugelblauWrapper{
    position:absolute;
    top:-60%;
    left:0%;
    z-index:1;

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

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

    border-radius:50%;

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

    transition:all .33s ease;

    background:
        radial-gradient(
            circle at 30% 30%,
            #eaf6ff 0%,
            #bfe6ff 10%,
            #6bbcff8a 25%,
            #2f80d679 50%,
            #174b8696 75%,
            #071a2e83 100%
        );

    box-shadow:
        inset -30px -30px 60px rgba(0,0,0,.55),
        inset 20px 20px 40px rgba(255,255,255,.25),
        inset 0 0 80px rgba(120,200,255,.35),
        0 0 40px rgba(80,170,255,.35),
        0 0 100px rgba(40,120,255,.2);

    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:30rem;
        height:30rem;
        border-radius:50%;
    }
}

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

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

/* Schweben */
@keyframes float6{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(30px) rotate(-10deg);
    }
}

/* 🔵 Blauer Schimmer (wichtig: KEIN rot mehr) */
@keyframes shimmerBlue{
    0%{
        background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,.9) 0%,
            rgba(120,200,255,.5) 35%,
            transparent 80%
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 50% 50%,
            rgba(200,240,255,.9) 0%,
            rgba(80,170,255,.5) 40%,
            rgba(20,80,160,.3) 70%,
            transparent 90%
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,.9) 0%,
            rgba(120,200,255,.5) 35%,
            transparent 80%
        );
    }
}

/* Text */
#textlink{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:500;

    color:#bfe6ff;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    white-space:nowrap;
    text-decoration:none;
}

#textlink:hover{
      color:#09d324;
}






#metallKugelblauWrapperklein{
    position:absolute;
    top:10%;
    left:-10%;
    z-index:1000;

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


#metallKugelblauklein {
    width:20rem;
    height:20rem;
    z-index:10;

    border-radius:50%;

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

    transition:all .33s ease;

    background:
        radial-gradient(
            circle at 30% 30%,
            #eaf6ff 0%,
            #bfe6ff 10%,
            #6bbcff8a 25%,
            #2f80d679 50%,
            #174b8696 75%,
            #071a2e83 100%
        );

    box-shadow:
        inset -30px -30px 60px rgba(0,0,0,.55),
        inset 20px 20px 40px rgba(255,255,255,.25),
        inset 0 0 80px rgba(120,200,255,.35),
        0 0 40px rgba(80,170,255,.35),
        0 0 100px rgba(40,120,255,.2);

    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:20rem;
        height:20rem;
        border-radius:50%;
    }
}

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

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

/* Schweben */
@keyframes float10{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(30px) rotate(-10deg);
    }
}

/* 🔵 Blauer Schimmer (wichtig: KEIN rot mehr) */
@keyframes shimmerBlueklein{
    0%{
        background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,.9) 0%,
            rgba(120,200,255,.5) 35%,
            transparent 80%
        );
    }

    50%{
        background:
        radial-gradient(
            circle at 50% 50%,
            rgba(200,240,255,.9) 0%,
            rgba(80,170,255,.5) 40%,
            rgba(20,80,160,.3) 70%,
            transparent 90%
        );
    }

    100%{
        background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,.9) 0%,
            rgba(120,200,255,.5) 35%,
            transparent 80%
        );
    }
}

/* Text */
#textlink{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:500;

    color:#bfe6ff;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    white-space:nowrap;
    text-decoration:none;
}

#textlink:hover{
      color:#09d324;
}












#metallKugelWrapperklein{
    position:absolute;
    top:10%;
    left:50%;
    z-index:1000;

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


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

    border-radius:50%;

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

    transition:all .33s ease;

    background:
        radial-gradient(
            circle at 30% 30%,
            #eaf6ff 0%,
            #bfe6ff 10%,
            #6bbcff8a 25%,
            #2f80d679 50%,
            #174b8696 75%,
            #071a2e83 100%
        );

    box-shadow:
        inset -30px -30px 60px rgba(0,0,0,.55),
        inset 20px 20px 40px rgba(255,255,255,.25),
        inset 0 0 80px rgba(120,200,255,.35),
        0 0 40px rgba(80,170,255,.35),
        0 0 100px rgba(40,120,255,.2);

    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:20rem;
        height:20rem;
        border-radius:50%;
    }
}

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

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

/* Schweben */
@keyframes float11{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(30px) rotate(-10deg);
    }
}

/* 🔵 Blauer Schimmer (wichtig: KEIN rot mehr) */
@keyframes shimmerBluekleinklein{
    0%{
        background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(92, 9, 9, 0.274) 65%,
            transparent 80%
        );
    }

    50%{
        background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(243, 114, 114, 0.315) 30%,
            rgba(165, 15, 15, 0.274) 75%,
            transparent 80%
        );
    }

    100%{
        background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(105, 36, 36, 0.144) 55%,
            rgba(165, 15, 15, 0.274) 85%,
            transparent 80%
        );
    }
}

/* Text */
#textlink{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:500;

    color:#bfe6ff;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    white-space:nowrap;
    text-decoration:none;
}

#textlink:hover{
      color:#09d324;
}















.Willkommen {
    color: #0ec507;
}
.hintergrund {
    position: absolute;
    top: 0%;
    width: 100vw;
    height: 400vh;
    background-color: #c48d0088;
    z-index: 5;
     opacity: 0.5; /* 0 = unsichtbar, 1 = voll sichtbar */
}
#videooben {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
    z-index: 1;

    opacity: 0.5; /* 0 = unsichtbar, 1 = voll sichtbar */
}

.video-section{
    position:relative;
    height:300vh;
}

#video{
    position:sticky;
    top:0;

    width:100vw;
    height:300vh;

    object-fit:cover;
    display:block;

    z-index:3;
}

.video-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    pointer-events:none;
}


h2 {
    color: #c48b00;
}
.scroll-box{
    position:absolute;
    width:70%;
    background:rgb(0, 0, 0);
    backdrop-filter:blur(12px);
    color:white;
    border-radius:10px;
    border-color: #c48b00;
    padding:2rem;
    text-align: center;
    text-align: justify;
    z-index: 500;
    opacity:0;
}

.scroll-box img{
    width:27%;
    height:85%;
    padding: 0.75rem;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
    float: left;
    z-index: 500;
}

.scroll-box h2{
    margin-bottom:10px;
}

.scroll-box a{
    display:inline-block;
    margin-top:15px;
    color:white;
}

/* Positionen */

.box-left{
    left:16%;
    top:4%;
}

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

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

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


#textlinke {
    position:absolute;
    top: 40%;
    left:15%;
    transform:translate(-50%, -50%);
    z-index:700;
    color:rgb(211, 208, 41);
    text-decoration:none;
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    white-space:nowrap;
}

#textlinke:hover{
    color:#09d324;
    z-index: 700;
}








.Wettbewerb {
    position:absolute;
    top:77%;
    width:100%;
    height:50vh;
    background-color: #000000a1;
    color: white;
    z-index: 20;
    text-align: center;
}



.textbox {
    position:absolute;
    top:40%;
    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:33.333%; 
     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; 
    } 
    



















.freiertext {
    position:absolute;
    top:620%;
    width:100%;
    height:75vh;
    background-color: #0000006b;
    color:   #ffffff;
    z-index: 20;
}



/* Flipper*/

#FlipperHauptcontainer {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100vw;
    height: 32rem;
    display: flex;
    justify-content: space-around; /* Gleichmäßige Verteilung */
    margin-bottom: 2rem; /* Abstand zwischen den Zeilen */
}

/* Flipper-Container Styling */
.flip-container, .flip-container2, .flip-container3, .flip-container4, .flip-container5 {
    perspective: 1000px; /* Ermöglicht den 3D-Effekt */
    width: 14rem;
    height: 27rem;
    float: left; /* Elemente nebeneinander */
    margin: 0; /* Abstand zwischen den Containern */
    position: relative; /* Position relativ zum normalen Fluss */
    background-color: #000000;
}

/* Restliche Container können unverändert bleiben */
.flipper, .flipper2, .flipper3, .flipper4, .flipper5 {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-container:hover .flipper, 
.flip-container2:hover .flipper2, 
.flip-container3:hover .flipper3, 
.flip-container4:hover .flipper4, 
.flip-container5:hover .flipper5 {
    transform: rotateY(180deg);
}

.front, .back, 
.front2, .back2, 
.front3, .back3, 
.front4, .back4, 
.front5, .back5 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 0.33px;
    border-color: #c48b00;;
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Vorderseite-Styling */
.front, .front2, .front3, .front4, .front5 {
    background-color: rgba(255, 255, 255, 0);
    color: rgb(255, 255, 255);
    font-size: 1rem;
    z-index: 3;
}

/* Rückseite-Styling */
.back, .back2, .back3, .back4, .back5 {
    background-color: rgba(28, 99, 231, 0);
    color: white;
    transform: rotateY(180deg);
    font-size: 0.9rem;
    padding: 1.25rem;
}

/* Symbole und Links Styling */


.PersonenTiere, .natur, .Abstraktekunst, .StrukturFormen, .Pflanzen{
    width: 12rem;
    height: 18rem;
}


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

/*Linkstyle*/
.PersonenTierel, .Naturl, .Zaehleranlagenlink22l, .Abstraktekunstl, .StrukturFormenl, .Pflanzenl{
    text-decoration-line: none;
    font-size: 1.75rem;
    color: #c48b00;
}
.PersonenTierel:hover, .Naturl:hover, .Abstraktekunstl:hover, .StrukturFormenl:hover, .Pflanzenl:hover {
    color: #0ec507;
}

.floatclear {
    float: none;
}










.Informationen {
position: absolute;
top: 1000%;
width: 100%;
height: 10rem;
background-color: black;
z-index: 500;
}


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

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

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

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

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


.QR-Code-Bewertung-Text {
    position: absolute;
    top:0.5rem;
    left: 45.5rem;
    color: rgb(255, 255, 255);
    font-size: 0.75rem;
  }

  
.QR-Code-Bewertung {
    position: absolute;
    top: 1.8rem;
    left: 44.3rem;
    width: 6rem;
    height: 5.9rem;
  }


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

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














.sectiong {
  position: relative;
  top: 750%;
  height: 100vh;
  font-family: Termina, sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  z-index: 500;
}
.textshoppen {
    position: relative;
    top: 950%;
    height: 10rem;
    background-color: #000000;
}
.gehzumshop {

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

.Linkgehzumshop {
    position: relative;
    left: 40%;
    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;

  @media (max-width: 768px) {
    width: 100%;
  }
}




.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%;
}