html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {

}

body {
    /*padding-top: 100px;*/
    /*background-color: #25282a;*/
    /*color: white;*/
}

.navbar {
    /*background-color: #25282a;*/
}

nav {
    flex: 2;
    display: flex;
    justify-content: center;
    background-color: #5271ff;
    

}

    nav ul {
        display: flex;
        /* Flexbox für horizontale Ausrichtung */
        list-style: none;
        margin: 0;
        padding: 0;
    }

        nav ul li {
            /*margin: 55px;*/
            margin-left: 55px
        }

            nav ul li a {
                text-decoration: none;
                color: white !important;
                font-size: 16px;
                text-align: right !important;
            }

                nav ul li a:hover {
                    color: #ffcc99 !important;
                    /* Highlight on hover */
                }


.links {
    text-decoration: none;
    color: dodgerblue !important;
    font-size: 16px;
    text-align: right !important;
}

    .links:hover {
        color: #ffcc99 !important;
    }

.content {
    /*    background-color: #25282a;
    color:white;*/
    /*display: flex;*/
    padding-top: 30px;
    margin-top: 120px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
}

/*.home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    background-color: hsl(204, 6%, 15%);
    color: #fff;*/
    /*height: 100vh;*/
    /* Vollbild-H�he */
/*}*/

/*.home-text {
    max-width: 50%;
}*/

/*    .home-text h1 {
        font-size: 56px;
        margin: 0 0 20px;
    }*/

    .home-text p {
        font-size: 18px;
        margin: 0 0 30px;
    }

    .home-text .button {
        display: inline-block;
        padding: 15px 30px;
        font-size: 16px;
        color: #25282a;
        background-color: #f0e4d7;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s;
    }

        .home-text .button:hover {
            background-color: #464442;
        }

.home-image {
    padding-left:20px;
}

.home-image img {
    max-width: 100%;
    height: auto;
    width: auto;
    border-radius: 10px;
    min-width: 100px !important;
    min-height: 100px !important;
    max-height: 900px;
    /*max-width: 1000px;*/
    float: right;
}

.card {
    /*background-color: #464442;*/
    /*color: white;*/
}

.leistungen-section {
    /*background-color: #25282a;*/
    /*color: white;*/
    padding: 40px 20px;
    text-align: center;
}

    .leistungen-section h1 {
        font-size: em;
        margin-bottom: 20px;
    }

.leistung {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.leistung-box {
    background-color: floralwhite;
    padding: 20px;
    border-radius: 8px;
    /*width: 22%;*/
    min-width: 450px;
    min-height: 450px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    max-height: 500px;
}

    .leistung-box h2 {
        color: dodgerblue;
        font-size: 2em;
        margin-bottom: 10px;
        text-align: center
    }

    .leistung-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }

    .leistung-box li {
        margin: 10px 0;
        font-size: 1em;
    }

.leistung-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: black;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    /*    margin-left:auto;
    margin-right:auto;*/
}

.quote {
    margin-top: 20px;
    font-style: italic;
    font-size: 32px;
}

    .quote span {
        display: block;
        margin-top: 10px;
        font-size: 14px;
    }

.spacing {
    margin: 100px 0;
}

.philosophie-section {
    /*background-color: #25282a;*/
    /*color: white;*/
    padding: 50px 20px;
    text-align: center;
}

.contact-btn {
    display: flex;
    align-items: left;
    justify-content: left;
    background-color: #f69425;
    color: white;
    padding: 0px 0px;
    margin: 0px auto;
    text-decoration: none;
    border-radius: px;
    width: fit-content;
}

    .contact-btn span {
        margin-right: 0px;
    }

    .contact-btn:hover {
        background-color: #edac67;
    }


.contact-image img {
    max-width: 20%;
    height: auto;
    border-radius: 0px;
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .language-switch img {
        width: 20px;
        height: auto;
    }

    .language-switch span {
        font-size: 16px;
        color: #f0e4d7;
    }

.fontColor {
    /*color: #ffcc99;*/
}

/*#aboutMe {
    background-color: #050a30;
    color: white;
   
}*/

.footer {
    margin-top:50px;
    margin-left: 30px;
    margin-right: 30px;
    /*position: absolute;*/
    /*bottom:0;*/

}

.footer-left {
    float: left;
}

.footer-right {
    width: auto;
    float: right !important;
}



@media (max-width: 768px) {
    .leistung {
        flex-direction: column;
    }

    .leistung-box {
        width: 100%;
    }

    .text-responsive {
        align-items: flex-start;
    }
}

/*.text-responsive {*/
    /*width: 100%;*/
    /*height: 300px;*/
    /*background: lightblue;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /* default: text at bottom for large screens */
    /*align-items: flex-end;
    padding-top: 360px;*/
    /*box-sizing: border-box;*/
/*}*/
    .borderServices {
    border: 1px solid black; /* Adds a black border */
    padding-left: 20px; /* Adds some space inside the div */
    padding-top: 0px; /* Adds some space inside the div */
    padding-right: 20px;
    border-radius: 10px;
    margin-top: 20px
    /*background-color: red;*/
}

.box {
/*    width: 200px;
    height: 200px;*/
    background-color: lightblue;
    /*border-radius: 10px;*/
    transition: all 0.3s ease; /* smooth animation */
    cursor: url("../images/MailHover.svg"), auto;

}

.box:hover {
    background-color: deepskyblue;
    /*transform: scale(1.1);*/ /* make it bigger */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* add shadow */

}