/* ------------------------------------------------------------------------------------------------------------------ */
/* Global */
/* ------------------------------------------------------------------------------------------------------------------ */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.desktop-only { display: block; }
.mobile-only  { display: none;  }

@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only  { display: block; }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Banner */
/* ------------------------------------------------------------------------------------------------------------------ */

#banner {
    box-sizing: border-box;
}

#banner-background {
    width: 100%;
    box-sizing: border-box;
}

#banner-background img {
    width: 100%;
    height: auto;
}

#banner-logo {
    position: absolute;
    top: 40px;
    left: 40px;
}
#banner-language {
    position: absolute;
    top: 40px;
    right: 40px;

    display: inline-flex;
    align-items: center;
    gap: 0.3em;           /* optional: Abstand zwischen Icon und Text */

    text-transform: uppercase;
    color: white;
    font-family: Titillium Web, sans-serif;
    font-weight: 700;
    font-size: 18pt;

    /* line-height kannst du entfernen oder auf font-size abstimmen */
    line-height: normal;
}
@media (max-width: 768px) {
    #banner-logo {
        top: 20px;
        left: 20px;
    }
    #banner-language {
        top: 20px;
        right: 20px;
        font-size: 10pt;
    }
}
#banner-language img {
    vertical-align: middle;
}

#banner-logo img {
    height: 100px;
    width: auto;
}
@media (max-width: 1400px) {
    #banner-logo img {
        height: 60pt;
        width: auto;
    }
}
@media (max-width: 1200px) {
    #banner-logo img {
        height: 40pt;
        width: auto;
    }
}
@media (max-width: 1000px) {
    #banner-logo img {
        height: 20pt;
        width: auto;
    }
}
@media (max-width: 768px) {
    #banner-logo img {
        height: 20pt;
        width: auto;
    }
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* Content */
/* ------------------------------------------------------------------------------------------------------------------ */

#content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

#content img {
    max-width: 100%;
}

h1 {
    font-family: Titillium Web,sans-serif;
    font-weight: 700;
    font-size: 24pt;
}
h2 {
    font-family: Titillium Web,sans-serif;
    font-weight: 700;
    font-size: 20pt;
}
p, li, span, a {
    font-family: Roboto Condensed,sans-serif;
    font-weight: 300;
    font-size: 14pt;
}
pre {
    font-family: Roboto Condensed,sans-serif;
    font-weight: 300;
    font-size: 14pt;
    color: #3f91be;
}
@media (max-width: 768px) {
    h1 {
        font-size: 18pt;
    }
    h2 {
        font-size: 14pt;
    }
    p, li, span, a {
        font-size: 10pt;
    }
    pre {
        font-size: 10pt;
    }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Side Buttons */
/* ------------------------------------------------------------------------------------------------------------------ */

#support {
    position: fixed;
    bottom: 140px;
    right: 0;
}

#support img {
    width: 140pt;
}
@media (max-width: 768px) {
    #support img {
        width: 100pt;
    }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Footer */
/* ------------------------------------------------------------------------------------------------------------------ */

#footer {
    background: rgb(0,35,55);
    padding: 40px;
    text-align: right;
    margin-top:80px;
}

#footer a {
    margin-left: 20px;

    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Titillium Web,sans-serif;
    font-weight: 700;
    font-size: 18pt;
}

@media (max-width: 768px) {
    #footer a {
        font-size: 12pt;
    }
}