:root {
  --font-body: "Inter", "IBM Plex Sans", "Source Sans 3", "Open Sans",
               system-ui, -apple-system, "Segoe UI", "Roboto",
               "Helvetica Neue", Arial, sans-serif;
  --font-heading: "IBM Plex Sans", "Inter", system-ui, -apple-system,
                  "Segoe UI", "Roboto", sans-serif;
  --line-height-body: 1.55;
  font-synthesis: none; /* verhindert Faux Bold/Italic */
}

.mobile_only {
    display: none;
}

.desktop_only {
    display: flex;
}

* {
    margin: 0;
    padding: 0;
}

@keyframes line-anim {
    to { stroke-dashoffset: 0; }
}


#line_upper {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%); 

    
    width: 400px;
    height: 2px;
}


#line_upper path:nth-child(1) {
    stroke-dasharray: 2308.01px;
    stroke-dashoffset: 2308.01px;
    animation: line-anim 2.0s ease forwards 1.9s;
}

#line_lower {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 400px;
}

#line_lower path:nth-child(1) {
    stroke-dasharray: 2308.01px;
    stroke-dashoffset: 2308.01px;
    animation: line-anim 2.0s ease forwards 1.9s;
}

#logo {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 400px;
    height: 400px;
}

#logo path:nth-child(1) {
    stroke-dasharray: 392.063px;
    stroke-dashoffset: 392.063px;
    animation: line-anim 2.0s ease forwards 1s;
}

#logo path:nth-child(2) {
    stroke-dasharray: 390.314px;
    stroke-dashoffset: 390.314px;
    animation: line-anim 2.0s ease forwards 0.95s;
}

#logo path:nth-child(3) {
    stroke-dasharray: 385.577px;
    stroke-dashoffset: 385.577px;
    animation: line-anim 2s ease forwards 0.9s;
}

#logo path:nth-child(4) {
    stroke-dasharray: 248.85px;
    stroke-dashoffset: 248.85px;
    animation: line-anim 2s ease forwards 0.85s;
}

#logo path:nth-child(5) {
    stroke-dasharray: 299.95px;
    stroke-dashoffset: 299.95px;
    animation: line-anim 2s ease forwards 0.8s;
}

#logo path:nth-child(6) {
    stroke-dasharray: 389.84px;
    stroke-dashoffset: 389.84px;
    animation: line-anim 2s ease forwards 0.75s;
}

#logo path:nth-child(7) {
    stroke-dasharray: 232.74px;
    stroke-dashoffset: 232.74px;
    animation: line-anim 2s ease forwards 0.7s;
}

#logo path:nth-child(8) {
    stroke-dasharray: 385.577px;
    stroke-dashoffset: 385.577px;
    animation: line-anim 2.1s ease forwards 0.65s;
}

#logo path:nth-child(9) {
    stroke-dasharray: 485.851px;
    stroke-dashoffset: 485.851px;
    animation: line-anim 2.1s ease forwards 0.6s;
}

#logo path:nth-child(10) {
    stroke-dasharray: 319.265px;
    stroke-dashoffset: 319.265px;
    animation: line-anim 2s ease forwards 0.55s;
}

#logo path:nth-child(11) {
    stroke-dasharray: 221.73px;
    stroke-dashoffset: 221.73px;
    animation: line-anim 2s ease forwards 0.5s;
}

#logo path:nth-child(12) {
    stroke-dasharray: 141.86px;
    stroke-dashoffset: 141.86px;
    animation: line-anim 2.0s ease forwards 0.45s;
}

#logo path:nth-child(13) {
    stroke-dasharray: 392.19px;
    stroke-dashoffset: 392.19px;
    animation: line-anim 2.0s ease forwards 0.4s;
}

#logo path:nth-child(14) {
    stroke-dasharray: 437.46px;
    stroke-dashoffset: 437.46px;
    animation: line-anim 2.0s ease forwards 0.35s;
}

#logo path:nth-child(15) {
    stroke-dasharray: 432.312px;
    stroke-dashoffset: 432.312px;
    animation: line-anim 2.0s ease forwards 0.3s;
}

#logo path:nth-child(16) {
    stroke-dasharray: 389.84px;
    stroke-dashoffset: 389.84px;
    animation: line-anim 2s ease forwards 0.25s;
}

#logo path:nth-child(17) {
    stroke-dasharray: 232.74px;
    stroke-dashoffset: 232.74px;
    animation: line-anim 2.0s ease forwards 0.2s;
}

#logo path:nth-child(18) {
    stroke-dasharray: 390.312px;
    stroke-dashoffset: 390.312px;
    animation: line-anim 2s ease forwards 0.15s;
}

#logo path:nth-child(19) {
    stroke-dasharray: 451.014px;
    stroke-dashoffset: 451.014px;
    animation: line-anim 2s ease forwards 0.05s;
}

#logo path:nth-child(20) {
    stroke-dasharray: 231.71px;
    stroke-dashoffset: 231.71px;
    animation: line-anim 2s ease forwards 0.0s;
}

#software {
    position: absolute;
    width: 230px;
    top: 45%;
    left: 30%;
    transform: translate(-50%, -50%);

    cursor: pointer;
}

#software path:nth-child(1) {
    stroke-dasharray: 457.82px;
    stroke-dashoffset: 457.82px;
    animation: line-anim 2s ease forwards 1.9s;
}

#software path:nth-child(2) {
    stroke-dasharray: 222.99px;
    stroke-dashoffset: 222.99px;
    animation: line-anim 3s ease forwards 1.8s;
}

#software path:nth-child(3) {
    stroke-dasharray: 443.56px;
    stroke-dashoffset: 443.56px;
    animation: line-anim 3s ease forwards 1.7s;
}

#software path:nth-child(4) {
    stroke-dasharray: 564.35px;
    stroke-dashoffset: 564.35px;
    animation: line-anim 3s ease forwards 1.6s;
}

#software path:nth-child(5) {
    stroke-dasharray: 287.96px;
    stroke-dashoffset: 287.96px;
    animation: line-anim 3s ease forwards 1.5s;
}

#software path:nth-child(6) {
    stroke-dasharray: 288.96px;
    stroke-dashoffset: 288.96px;
    animation: line-anim 3s ease forwards 1.4s;
}

#software path:nth-child(7) {
    stroke-dasharray: 385.58px;
    stroke-dashoffset: 385.58px;
    animation: line-anim 3s ease forwards 1.3s;
}

#software path:nth-child(8) {
    stroke-dasharray: 380.25px;
    stroke-dashoffset: 380.25px;
    animation: line-anim 3s ease forwards 1.2s;
}

#software path:nth-child(9) {
    stroke-dasharray: 129.86px;
    stroke-dashoffset: 129.86px;
    animation: line-anim 2s ease forwards 1.1s;
}

#websites {
    position: absolute;
    top: 55%;
    left: 43.33%;

    
    width: 230px;

    transform: translate(-50%, -50%);
    
    cursor: pointer;
}

#websites path:nth-child(1) {
    stroke-dasharray: 384.22px;
    stroke-dashoffset: 384.22px;
    animation: line-anim 3.4s ease forwards 2s;
}

#websites path:nth-child(2) {
    stroke-dasharray: 457.68px;
    stroke-dashoffset: 457.68px;
    animation: line-anim 3.4s ease forwards 2.1s;
}

#websites path:nth-child(3) {
    stroke-dasharray: 291.96px;
    stroke-dashoffset: 291.96px;
    animation: line-anim 3.4s ease forwards 2s;
}

#websites path:nth-child(4) {
    stroke-dasharray: 234.60px;
    stroke-dashoffset: 234.60px;
    animation: line-anim 3.4s ease forwards 1.9s;
}

#websites path:nth-child(5) {
    stroke-dasharray: 384.23px;
    stroke-dashoffset: 384.23px;
    animation: line-anim 3.4s ease forwards 1.8s;
}

#websites path:nth-child(6) {
    stroke-dasharray: 490.63px;
    stroke-dashoffset: 490.63px;
    animation: line-anim 3.4s ease forwards 1.7s;
}

#websites path:nth-child(7) {
    stroke-dasharray: 457.68px;
    stroke-dashoffset: 457.68px;
    animation: line-anim 3.4s ease forwards 1.6s;
}

#websites path:nth-child(8) {
    stroke-dasharray: 562.67px;
    stroke-dashoffset: 562.67px;
    animation: line-anim 3.4s ease forwards 1.5s;
}

#websites path:nth-child(9) {
    stroke-dasharray: 133.86px;
    stroke-dashoffset: 133.86px;
    animation: line-anim 3.4s ease forwards 1.4s;
}

#downloads {
    position: absolute;
    top: 65%;
    left: 56.67%;
    transform: translate(-50%, -50%);
    
    width: 230px;    
    cursor: pointer;
}

#downloads path:nth-child(1) {
    stroke-dasharray: 384.23px;
    stroke-dashoffset: 384.23px;
    animation: line-anim 4s ease forwards 2.5s;
}


#downloads path:nth-child(2) {
    stroke-dasharray: 490.28px;
    stroke-dashoffset: 490.28px;
    animation: line-anim 4s ease forwards 2.4s;
}


#downloads path:nth-child(3) {
    stroke-dasharray: 441.17px;
    stroke-dashoffset: 441.17px;
    animation: line-anim 4s ease forwards 2.3s;
}


#downloads path:nth-child(4) {
    stroke-dasharray: 385.58px;
    stroke-dashoffset: 385.58px;
    animation: line-anim 4s ease forwards 2.2s;
}


#downloads path:nth-child(5) {
    stroke-dasharray: 224.74px;
    stroke-dashoffset: 224.74px;
    animation: line-anim 4s ease forwards 2.1s;
}

#downloads path:nth-child(6) {
    stroke-dasharray: 383.84px;
    stroke-dashoffset: 383.84px;
    animation: line-anim 4s ease forwards 2s;
}


#downloads path:nth-child(7) {
    stroke-dasharray: 562.66px;
    stroke-dashoffset: 562.66px;
    animation: line-anim 4s ease forwards 1.9s;
}


#downloads path:nth-child(8) {
    stroke-dasharray: 385.58px;
    stroke-dashoffset: 385.58px;
    animation: line-anim 4s ease forwards 1.8s;
}


#downloads path:nth-child(9) {
    stroke-dasharray: 490.28px;
    stroke-dashoffset: 490.28px;
    animation: line-anim 4s ease forwards 1.7s;
}


#downloads path:nth-child(10) {
    stroke-dasharray: 133.86px;
    stroke-dashoffset: 133.86px;
    animation: line-anim 4s ease forwards 1.6s;
}

#consulting {
    position: absolute;
    top: 75%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 230px;    
    cursor: pointer;
}

#consulting path:nth-child(1) {
    stroke-dasharray: 606.99px;
    stroke-dashoffset: 606.99px;
    animation: line-anim 4.5s ease forwards 2.9s;
}

#consulting path:nth-child(2) {
    stroke-dasharray: 383.85px;
    stroke-dashoffset: 383.85px;
    animation: line-anim 4.5s ease forwards 2.8s;
}

#consulting path:nth-child(3) {
    stroke-dasharray: 234.591px;
    stroke-dashoffset: 234.591px;
    animation: line-anim 4.5s ease forwards 2.7s;
}

#consulting path:nth-child(4) {
    stroke-dasharray: 291.96px;
    stroke-dashoffset: 291.96px;
    animation: line-anim 4.5s ease forwards 2.6s;
}

#consulting path:nth-child(5) {
    stroke-dasharray: 224.74px;
    stroke-dashoffset: 224.74px;
    animation: line-anim 4.5s ease forwards 2.5s;
}

#consulting path:nth-child(6) {
    stroke-dasharray: 383.41px;
    stroke-dashoffset: 383.41px;
    animation: line-anim 4.5s ease forwards 2.4s;
}

#consulting path:nth-child(7) {
    stroke-dasharray: 384.23px;
    stroke-dashoffset: 384.23px;
    animation: line-anim 4.5s ease forwards 2.3s;
}

#consulting path:nth-child(8) {
    stroke-dasharray: 383.41px;
    stroke-dashoffset: 383.41px;
    animation: line-anim 4.5s ease forwards 2.2s;
}

#consulting path:nth-child(9) {
    stroke-dasharray: 385.57px;
    stroke-dashoffset: 385.57px;
    animation: line-anim 4.5s ease forwards 2.1s;
}

#consulting path:nth-child(10) {
    stroke-dasharray: 366.93px;
    stroke-dashoffset: 366.93px;
    animation: line-anim 4.5s ease forwards 2s;
}

#consulting path:nth-child(11) {
    stroke-dasharray: 133.86px;
    stroke-dashoffset: 133.86px;
    animation: line-anim 4.5s ease forwards 1.9s;
}


body {
    
    
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga" 1, "kern" 1;
    font-variant-numeric: proportional-nums;

    /* background: linear-gradient(135deg, #e9eff8, #d40000); */
    background: black;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* border: 8px solid rgb(43, 255, 0); */
}

.black_div_background {
    background-color: rgba(0, 0, 0, 1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 200vh;

}

.border_top_40 {
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

.service_item {
    border-radius: 40px;

    width: 100%;
    height: 100%;


    min-height: 21vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.service_hl {

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-wrap: balance;
    color: rgb(2, 2, 2);

    text-decoration: underline;
}

.service_text {

    padding: 10px;

font-family: var(--font-body);
font-weight: 400;
font-size: clamp(0.9rem, 0.85rem + 0.22vw, 1rem);
line-height: calc(var(--line-height-body) * 0.97);
letter-spacing: 0.095px;
max-width: 58ch;
margin-inline: auto;
text-align: center;


    color: white;
}


.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.border_white {
    border: 2px solid rgb(255, 255, 255); 
}


.bradius20 {
    border-radius: 20px;
}

.bradius30 {
    border-radius: 30px;
}

.bradius40 {
    border-radius: 40px;
}

.bradius50 {
    border-radius: 50px;
}

.div_services {
  
    position: absolute;
    top: 168%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 46%;

        
    /*border: 2px solid rgb(255, 157, 0);*/ 
    
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    text-align: center;

    margin-bottom: 30px;
    padding:20px;

    box-shadow: 0px 0px 30px rgb(255, 179, 0);
}   

.service_row_1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 41vh;
    

    position: absolute;
    top: 0%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
/*    border-bottom: 1px solid rgba(255, 255, 255, 0.5); */
}

.service_row_2 {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 41vh;

    position: absolute;
    top: 50%;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.blur {
    filter: blur(7px);
}

.overline {
    text-decoration: overline;
}

.fat {
    font-weight: bold;
}

.font_white {
    color: white;
}

.font_yellow {
    color: yellow;
}

.font_orange {
    color: #FFA600;
}

.font_black {
    color: black;
}

.p_services {
    position: absolute;
    top: 90%;

    font-size: 24px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);

    font-family: 'Courier New', monospace;  
}

.p_software {
    position: absolute;
    top: 104%;
    left: 33%;
    
    transform: translate(-50%, -50%);

    font-size: 20px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
}


.p_websites {
    position: absolute;
    top: 104%;
    left: 67%;
    
    transform: translate(-50%, -50%);

    font-size: 20px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
}


.p_downloads {
    position: absolute;
    top: 145%;
    left: 33%;
    
    transform: translate(-50%, -50%);

    font-size: 20px;
    font-weight: bold;
    color: rgb(255, 255, 255);
}


.p_consulting {
    position: absolute;
    top: 145%;
    left: 67%;
    
    transform: translate(-50%, -50%);

    font-size: 20px;
    font-weight: bold;
    color: rgb(255, 255, 255);
}

.text_software {
    position: absolute;
    top: 121%;
    left: 33%;
    transform: translate(-50%, -50%);
    width: 30%;

    
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.text_websites {
    position: absolute;
    top: 122%;
    left: 67%;
    transform: translate(-50%, -50%);
    width: 30%;

    font-family: 'Open Sans', Helvetica, sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
}

.text_downloads {
    position: absolute;
    top: 162%;
    left: 33%;
    transform: translate(-50%, -50%);
    width: 30%;

    font-family: 'Open Sans', Helvetica, sans-serif;

    font-size: 16px;    
    color: rgb(255, 255, 255);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.text_consulting {
    position: absolute;
    top: 160%;
    left: 66%;
    transform: translate(-50%, -50%);
    width: 30%;

    font-family: 'Open Sans', Helvetica, sans-serif;

    font-size: 16px;    
    color: rgb(255, 255, 255);
}

.color_service_soft {
    background-color: rgba(247, 255, 21, 0.36);
    color: rgba(255, 255, 255, 1);
}

.div_service_soft {
  

    
    width: 100%;
    min-height: 41vh;

    border-top-left-radius: 40px;

}

.color_service_webs {
    background-color: #5c5c5cd1;
    color: rgba(255, 255, 255, 1);
    
}

.div_service_webs {
    position: absolute;
    top: 0%;
    left: 50%;

    
    width: 50%;
    min-height: 41vh;

    border-top-right-radius: 40px;
}

.color_white {
    background-color: white;
}

.color_black {
    background-color: rgb(0, 0, 0);
}

.color_blue {
    background-color: blue;
}

.color_service_down {
    background-color: rgb(255, 255, 0);
    color: rgb(0, 0, 0);
}

.div_service_down {
    position: absolute;
    top: 0%;
    left: 0%;
    
    width: 50%;
    min-height: 41vh;

    border-bottom-left-radius: 40px;
}

.color_service_cons {
    background-color: rgba(145, 9, 9, 0.754);
    color: rgba(255, 255, 255, 1);
}

.div_service_cons {
    position: absolute;
    top: 0%;
    left: 50%;

    width: 50%;
    min-height: 41vh;

    border-bottom-right-radius: 40px;
}


.row_white {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: linear-gradient(135deg, #d400004d, #fffdfd4d);  
    padding-top: 30px;
    padding-bottom: 30px;
}


.bradius_top_left_10 {
        border-top-left-radius: 10px;
}

.bradius_top_right_10 {
        border-top-right-radius: 10px;
}

.bradius_bottom_left_10 {
        border-bottom-left-radius: 10px;
}

.bradius_bottom_right_10 {
        border-bottom-right-radius: 10px;
}

.bradius_10 {
        border-radius: 10px;
}

.bradius_20 {
        border-radius: 20px;
}

.bradius_30 {
        border-radius: 30px;
}

.headline {
    font-size: 30px;
    color: rgba(255, 255, 255, 1);
    
    margin: 20px;
}

.row {
    display: flex;
    flex-direction: row;
    width: 100%;

    border-radius: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.btn {
    
    background: orange;
    color: white;

    position: absolute;
    top: 2%;
    left: 84%;
    
    padding: 4px;
    border-radius: 10px;
    
    font-family: Arial, sans-serif;
    font-size: 14px;
    
    width: 160px;
    height:30px;
    line-height: 20px;
}

.my_list {
  list-style-type: none;         /* keine Standardpunkte */
  padding: 0;                    /* Innenabstand entfernen */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;


  width: 40%;
  height: 10%;
  margin-bottom: 5px;
}

.my_list li {
  background: rgb(3, 3, 3);   /* leichter Farb-Hintergrund */
  margin-bottom: 2px;                /* Abstand zwischen den Items */
  padding: 5px 45px;                 /* Innenabstand */
  border-radius: 10px;                /* abgerundete Ecken */
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: white;
  width: 60%;
}

.my_list li:hover {
  background: rgb(255, 170, 0);   /* Hover-Effekt */
  cursor: pointer;
}

.margin_top_10 {
    margin-top: 10px;
}

.w80 {
    width: 80%;
}

@keyframes fadeInDelayed {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#p_services {
  opacity: 0;
  animation: fadeInDelayed 1.8s ease-out 3s forwards;
}

.placeholder {
/*    background-color: red; */
    height: 247vh;
    width: 80%;
}

.bg_servies_div {
    position: absolute;
    top: 98vh;
    background-color: rgb(0, 21, 80);
    background: linear-gradient(135deg, #1e1e1e, #333);
    height: 139vh;
    width: 100%;

    filter: blur(7px);
}

.color_fade_blue {
    background: linear-gradient(135deg, #0f2027, #2c5364);
}

.color_fade_purple {
    background: linear-gradient(120deg, #2b2d42, #1a1a2e);
}


.color_fade_anthrazit {
    background: linear-gradient(135deg, #1c1c1c, #292929);
}

.color_blue_special {
    
    background-color: rgb(0, 21, 80);
    background: linear-gradient(135deg, #1e1e1e, #333);
}

.blue_line_top {
    position: absolute;
    height: 9.5vh;
    width: 100%;
    
    top: -9vh;

    background-color: rgb(0, 21, 80);
    background: orange;
    
    filter: blur(7px);
}

.green_line_middle {
    position: absolute;
    height: 2%;
    width: 100%;
    top: 100vh;

    background-color: #00ff99;

    filter: blur(10px);
}

.green_line_bottom {
    position: absolute;
    height: 2%;
    width: 100%;
    top: 237vh;

    background-color: #00ff99;
    
    filter: blur(10px);
}

.s_1 {
    position: absolute;
    width: 80%;
    background: linear-gradient(135deg, #0f2027, #2c5364);
    height: 49vh;

    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    top: 106vh;
    left: 0%;
    filter: blur(7px);
}

.s_2 {
    position: absolute;
    width: 79%;
    background: linear-gradient(135deg, #000000, #1a001a);

    height: 32vh;

    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    top: 146vh;
    left: 21%;
    filter: blur(7px);
}

.s_3 {
    position: absolute;
    width: 80%;
    background: linear-gradient(120deg, #2b2d42, #1a1a2e);
    height: 32vh;

    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    top: 171vh;
    left: 0%;
    filter: blur(7px);
}

.s_4 {
    position: absolute;
    width: 79%;
    background: linear-gradient(135deg, #0f0f0f, #00ff99);

    height: 32vh;

    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    top: 199vh;
    left: 21%;
    filter: blur(7px);
}

.p {
    cursor: pointer;
    color: #ccc;
}

p:hover {
    color: rgb(255, 170, 0);
    text-decoration: underline;
}

.footer {
    position: absolute;

    width: 100%;

    top: 250%;
    height: 6%;

    color: rgb(255, 170, 0);
    background-color: black;

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

    box-shadow: 0px 0px 40px #00ff99;

    filter: blur(5px);
}

.copyright {
    position: absolute;

    left: 4%;
    top: 243%;

    color: #00ff99;
}


.rechte {
    position: absolute;

    left: 83%;
    top: 243%;

    color: #00ff99;
}