/* *BODY* */
html, body {
    background-color: #ffffff37;
    /* overflow-x: hidden !important;    sme das verursacht die zweite SCROLLBAR  */
    scroll-behavior: smooth;
    position: relative !important;
}



/* *BODY* */

/* *OTHER* */
.divider {
    margin-top: 200px;
    margin-bottom: 180px;
}

.lastDivider {
    margin-top: 100px;
    margin-bottom: 50px;
}
/* *OTHER* */


/* *SCREEN SIZES* */
@media (max-width: 767px)
{
    .mainHeadline {
        font-size: 18px;
    }

    .subHeadline {
        font-size: 14px !important;
    }

    .headlineDownload {
        font-size: 30px !important;
        margin-left: 75px !important;
    }

    .headlineFunctions {
        font-size: 30px !important;
        margin-left: 95px !important;
    }

    .appIcon {
        margin-left: 30px !important;
    }

    .downloadBtn {
        font-size: 13px !important;
        width: 300px !important;
        margin-left: 30px !important;
        text-decoration: none;
    }

    .appDescription {
        font-size: 18px !important;
        margin-left: 15px !important;
        width: 100%;
        padding-bottom: 40px;
    }

    .applicationImg {
        width: 330px !important;
    }
}

/* *SCREEN SIZES* */


/* *HEADER* */
.header-background {
    background-color: #f5f5f5;
    color: white;
    margin-bottom: 70px;
}

.header-background .nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding-bottom: 2px;
    scrollbar-width: none; /* Firefox */
}
.header-background .nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.header-background .nav-link {
    font-size: 18px;
    padding: 6px 10px;
    color: black;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.header-background h1 {
    font-weight: bold;
}

.logo-container {
    position: relative;
    filter: drop-shadow(rgba(0, 0, 0, 0.281) 0.4rem 0.5rem 5px);
    transition: 0.3s ease-in-out;
}

.logo-container:hover {
    transform: scale(1.1);
}

.mainHeadline {
    color: black !important;
    margin-right: 100px;
    margin-left: 100px;
    transition: 0.3s ease-in-out;
}

.subHeadline {
    color: rgb(100, 100, 100);
}

.mainHeadline:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.nav-link {
    margin-right: 10px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease-in-out;
    font-weight: bold;
}

.nav-link:hover {
    border-bottom: 2px solid black;
}


.header-background .nav-link:hover {
    color: #007bff;
}

@media (max-width: 767px) {
    .header-background .nav-link {
        font-size: 14px;
        padding: 3px 6px;
    }
    .header-background .nav {
        gap: 4px;
    }
}

/* *HEADER* */


/* MAIN CONTENT */


/* *DOWNLOAD SECTION* */
.headlineDownload {
    font-size: 35px;
    margin-top: 90px;
    padding-bottom: 30px;
    margin-left: 235px;
    font-weight: bold;
    filter: drop-shadow(rgba(131, 131, 131, 0.199) 0.4rem 0.5rem 5px)
}


.appDescription {
    margin-top: 1px;
    margin-left: 100px;
    size: 22px;
    padding-bottom: 80px;
}


.appIcon {
    margin-top: 100px;
    margin-left: 10px;
    filter: drop-shadow(rgb(0, 0, 0, 0.30) 0.4rem 0.5rem 5px)
}

.downloadBtn {
    height: 60px;
    width: 335px; /* Fixierte Breite */
    margin-left: 189px;
    padding: 17px 40px;
    border-radius: 50px;
    cursor: pointer;
    border: solid 1px rgb(131, 131, 131);
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 18px 0px;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    transition: all 0.3s ease-in-out; /* Sanfter Übergang für alle Effekte */
    text-decoration: none;
    color: black;
    overflow: hidden; /* Verhindert Textüberlauf */
    display: inline-block; /* Verhindert Layout-Verschiebungen */
}

.downloadBtn:hover {
    transform: scale(1.05); /* Button leicht vergrößern */
    background-color: #563ED2; /* Hintergrundfarbe ändern */
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 20px; /* Stärkere Schatten */
    color: hsl(0, 0%, 100%); /* Textfarbe dunkler */
    letter-spacing: 2px; /* Textabstand animieren */
}

.downloadBtn:active {
    transform: scale(0.98); /* Button leicht verkleinern beim Klicken */
    background-color: hsl(0, 0%, 29%);
    color: hsl(0, 0%, 100%);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px; /* Weniger Schatten */
    letter-spacing: 1px; /* Leichter Textabstand beim Klicken */
}

/* *DOWNLOAD SECTION* */



/* *FUNCTION SECTION* */
.headlineFunctions {
    font-size: 35px;
    margin-top: 90px;
    padding-bottom: 30px;
    margin-left: 235px;
    font-weight: bold;
    filter: drop-shadow(rgba(131, 131, 131, 0.199) 0.4rem 0.5rem 5px)
}

.applicationImg {
    margin-top: 60px;
    margin-left: 10px;
    filter: drop-shadow(rgb(0, 0, 0, 0.30) 0.4rem 0.5rem 5px);
    border-radius: 50px
}


/* *FUNCTION SECTION* */


/* *CONTACT* */
.headlineContact {
    text-align: center;
    margin-bottom: 0px;
    font-weight: bold;
}

.contactContent {
    margin-bottom: 50px;
}

.contactLinks {
    color: black;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease-in-out;
    white-space: normal;
}

.contactLinks:hover {
    border-bottom: 2px solid black;
}

/* *CONTACT* */

.container-ppbutton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;   /* Mehr Abstand nach oben */
    margin-bottom: 0;
}

#donate-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px 0;
}

#donate-button img {
    border-radius: 18px;
    box-shadow: 0 1px 6px rgba(86,62,210,0.08);
    border: none;      
    padding: 2px 8px;
    background: transparent;  
    transition: 
        transform 0.18s,
        box-shadow 0.18s,
        filter 0.18s;
}

#donate-button img:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px rgba(86,62,210,0.14);
    filter: brightness(1.08);
}

/* MAIN CONTENT */


/* **ANIMATIONS */
.scroll-text {
    opacity: 0;
    transform: translateY(100px);
    animation: slideUp 1s ease-out forwards;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* **ANIMATIONS */

/* *IMPRINT* */
.imprint-headline {
    margin-left: 25px;
}

.imprint-content {
    margin: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.imprint-content p {
    line-height: 1.5;
    margin-bottom: 4px;
}

.impressum-btn {
    background-color: #f5f5f5;
    color: #222;
    border: 1px solid #d1d1d1;
    border-radius: 15px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: 
        background 0.2s,
        color 0.2s,
        border 0.2s,
        box-shadow 0.2s;
}

.impressum-btn:last-child {
    margin-right: 0;
}

.impressum-btn:hover, .impressum-btn:focus {
    background-color: #563ED2;
    color: #fff;
    border: 1px solid #563ED2;
    box-shadow: 0 2px 8px rgba(0,123,255,0.10);
    outline: none;
}

hr {
    border: none;
    border-top: 1.5px solid #6e6e6e;
    margin: 32px 0;
}
/* *IMPRINT* */

#visible {
    display: block;
}

#notVisible {
    display: none;
}