.urlFormDiv{
        z-index: 99999999;
        position: fixed;
        top:0px;
        left:0px;
        width:100%;
        height:55px;
        background:#1e293b;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color:#fff;
        font-size:22px;
    }

    .urlFormDiv .ff{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .urlTopText{
        padding:20px;
    }

    .www {
        width: 75px;
        height: 40px;
        background: #aeb5bf;
        border-radius: 5px 0px 0px 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 16px;
    }
    #userUrl {
        height: 40px;
        width: 260px;
        border-radius: 0px 5px 5px 0px;
        border: 0px;
        text-align: center;
        font-size: 13px;
    }
    .urlCheckDiv button {
        width: 75px;
        height: 41px;
        background: #aeb5bf;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #000;
        margin-left: 20px;
        font-size: 14px;
    }

    .bra2 a{
        color:#aeb5bf!important;
    }

    .bra2 a:hover{
        text-decoration: underline;
    }


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

          .urlTopText{
              padding:0px!important;
          }

          .urlFormDiv{
                flex-direction: column;
            }

      }
    @media only screen and (max-width: 500px){


        .www {
            width: 75px;
            height: 32px;
        }
        #userUrl {
            height: 32px;
            width: 200px;
            position: relative;
            top:-1.5px;
        }
        .urlCheckDiv button {
            width: 75px;
            height: 32px;
        }

        .bra2 {
          font-size: 40px;
          padding:20px;
          text-align: center;
        }

        .price__type{
            margin-top:60px;
        }

    }

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

        .urlTopText{
            font-size: 20px;
        }

        .www {
            width: 55px;
            height: 32px;
        }
        #userUrl {
            height: 32px;
            width: 200px;
            position: relative;
            top:-1.5px;
        }
        .urlCheckDiv button {
            width: 55px;
            height: 32px;
        }

        .price__type{
            margin-top:80px;
        }

    }

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

        .price__type{
            margin-top:100px;
        }

        .urlTopText{
            font-size: 18px;
        }

        .www {
            width: 50px;
            height: 32px;
        }
        #userUrl {
            height: 32px;
            width: 170px;
            position: relative;
            top:-2px;
        }
        .urlCheckDiv button {
            width: 50px;
            height: 32px;
        }

    }


    #smooth-content{
        margin-top:70px;
    }

    .loadingContainer{
        background:#000;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#fff;
        font-size:26px;
        padding:50px;
    }

    .circle-container {
        position: relative;
        height:200px;
        width:200px;
    }

    .loadingProgressInt{
        position: absolute;
        left:0;
        top:0;
        height:200px;
        width:200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#fff;
    }

    .int{
        font-size:60px;
        line-height:60px;
        font-weight: bold;
    }

    .score{
        font-size:24px;
        line-height:24px;
    }

    .circle-progress {
        transform: rotate(-90deg);
    }

    .circle-background {
        fill: none;
        stroke: #999;
        stroke-width: 2; /* Increase stroke width for visibility */
    }

    .circle-fill {
        fill: none;
        stroke: #c8f31d;
        stroke-width: 2; /* Increase stroke width for visibility */
        stroke-dasharray: 0 410;
        transition: stroke-dasharray 3s ease;
        filter: drop-shadow(0px 0px 4px #c8f31d);
    }

    .urWebsiteTitle{
        color:#fff;
    }

    .urWebsiteURL{
        color:#fff;
        font-size:42px;
    }

    #result{
        margin-top:40px;
        text-align: center;
    }

    .leftInt, .rightInt, .bottomInt{
        position: absolute;
    }

    .leftInt{
        top:80px;
        left:-30px;
    }

    .leftInt .line{
        height:2px;
        width:10px;
        position: absolute;
        left:29px;
        top:20px;
        background:#fff;
    }



    .rightInt{
        top:80px;
        right:-30px;
    }

    .rightInt .line{
        height:2px;
        width:10px;
        position: absolute;
        right:29px;
        top:20px;
        background:#fff;
    }

    .bottomInt{
        width:200px;
        text-align: center;
        bottom:-32px;
    }

    .bottomInt .line{
        height:10px;
        width:2px;
        position: absolute;
        right:100px;
        top:-2px;
        background:#fff;
    }

    .line::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: calc(50% - 1px);
  top: 0;
  background: var(--white-4);
}

.line::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
left: calc(50% - 1px);
top: 0;
background: var(--white-4);
}

.navigation-container {
    width: 100%;
    margin: 0 auto;
    background-color: #f2f2f2;
    padding: 10px 0;
    margin-top: 65px;
    position: relative;  /* Damit die innere .nav-list relativ zu diesem Container positioniert wird */
}

.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;  /* Zentriert die Elemente */
    align-items: center;
}

.nav-list li {
    margin: 0 40px;
}

.nav-list li a {
    text-decoration: none;
    color: black;
    padding: 38px 20px;
    display: block;
    transition: background-color 0.3s;
}

.nav-list li a:hover {
    background-color: #f5f5f5;
}
.menu-toggle {
    display: none;
    flex-direction: column;
    height: 24px;
    justify-content: space-between;
    cursor: pointer;
    position: absolute; /* Positionierung relativ zum nächsten positionierten Elternelement */
    top: 40px; /* 100px Abstand von oben */
    left: 30px; /* 30px Abstand von links */
    z-index: 999;
    position: absolute;
}

.bar {
    background-color: black;
    height: 4px;
    width: 25px;
}

@media (max-width: 768px) {
  .navigation-container {
    padding: 0;
    margin-top: 65px;
    height: auto;
}

.menu-toggle {
    display: flex;
}

.nav-list {
    display: none;
    flex-direction: column;
    width: 100vw;
    position: absolute;  /* Verschoben in den Media Query */
    top: calc(40px + 24px);
    left: 0;
    background-color: #f2f2f2;
    z-index: 998;
}

.nav-list.active {
    display: flex;
}

.nav-list li {
    margin: 0;
}

.nav-list li a {
    padding: 10px 15px;  /* Reduziertes Padding */
    width: 100%;
    text-align: center;
}
}
.search-container {
    /* Allgemeine Stile für Desktop und Mobilgeräte */
}

.search-field {
    width: 100%; /* Setzt die Breite auf 100% des Containers */
    box-sizing: border-box; /* Damit padding und border in der Breite enthalten sind */
}

@media (max-width: 768px) {
    .search-container {
        position: fixed; /* Fixiert den Container am Viewport */
        top: 70px; /* 70px Abstand von der Oberseite */
        left: 0; /* 0px Abstand von der linken Seite */
        right: 0; /* 0px Abstand von der rechten Seite */
        padding: 0 10px; /* 10px horizontaler Abstand */
        z-index: 1000; /* Stellt sicher, dass der Container über anderen Elementen liegt */
    }

    .search-field {
        width: calc(100% - 20px); /* 100% Breite minus 20px für den Abstand */
    }
    .sec-title {
        display:none;
    }

}

.bra2 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  background-color: #000000;
  font-size: 45px;
  color: #ffffff;
}