/* ========== Allgemeine Resets & Schrift ========== */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Verdana, Arial, sans-serif;
}

/* ========== Body & Hintergrundbild ========== */
body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    z-index: 0;
}

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/general/pexels-lilartsy-1236421.jpg);
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        opacity: 0.4;
        z-index: -1;
    }

/* ========== Sprach-Auswahl Container ========== */
#divLanguageHolder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 50vw;
    margin: 0 auto;
    padding: 1rem;
}

/* Responsive Breakpoints */
@media only screen and (max-width: 1024px) {
    #divLanguageHolder {
        max-width: 80vw;
    }
}

@media only screen and (max-width: 768px) {
    #divLanguageHolder {
        max-width: 95vw;
    }
}

@media only screen and (max-width: 480px) {
    #divLanguageHolder {
        max-width: 100vw;
    }
}

/* ========== Sprach-Elemente ========== */
.lng {
    width: 50%;
    border-radius: calc(10rem / 16);
    transition: background-color 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

    .lng a {
        display:block;
        text-decoration: none;
        color: black;
        position: relative;
    }


    .lng:hover .languagename {
        opacity: 1;
    }

/* Auf Mobilgeräten: Immer sichtbar */
@media (hover: none) and (pointer: coarse) {
    .languagename {
        opacity: 1 !important;
    }
}


.lng:hover {
    background-color: white;
}

.lng:focus {
    outline: none;
}

/* ========== Sprach-Text ========== */
.languagename {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 1);
    padding: calc(10rem / 16);
    font-size: calc(0.25rem + 1.5vw);
    border-radius: calc(10rem / 16);
    opacity: 0.3;
    border: calc(1rem / 16) solid black;
    transition: opacity 0.2s ease-in-out;
}

/* ========== Flaggenbilder ========== */
.imgHolder {
    padding: 0.5rem;
}

    .imgHolder img {
        border-radius: calc(10rem / 16);
    }