/* Maße des fixen Kopfbereichs – .inhalt (styles.css) leitet seinen oberen Abstand daraus ab.
   Das Logo nutzt die volle Bannerhöhe; die Drachen sitzen in den oberen Ecken und sind so hoch wie das Banner. */
:root {
    --logo-hoehe: clamp(4rem, 10vw, 9rem) ;
    --h1-padding: 0.4rem ;
    --banner-hoehe: calc(var(--logo-hoehe) + 2 * var(--h1-padding)) ;
    --drache-hoehe: var(--banner-hoehe) ;
    --nav-hoehe: 1.5rem ;
    --header-hoehe: calc(var(--banner-hoehe) + var(--nav-hoehe)) ;
    --header-aufhellung: 0.13 ;     /* 0 = Originalbild, 1 = weiß */
}

#Header {
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    max-width: 100% ;
    color: #eeeeee ;
    text-align: center ;
    z-index: 20 ;
}

/* Banner: Logo mittig in voller Höhe, Drachen ganz links/rechts oben ------------------------ */

h1 {
    position: relative ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    height: var(--banner-hoehe) ;
    margin: 0 auto ;
    padding: var(--h1-padding) 1rem ;
    box-sizing: border-box ;
    font-family: Header, Verdana, Arial ;
    font-size: 1.2rem ;             /* nur für den Alt-Text, falls das Logo fehlt */
    line-height: 1.1 ;
    /* Weißer Schleier über dem Schuppenbild, damit sich das dunkelblaue Logo abhebt */
    background-image:
        linear-gradient(rgba(255, 255, 255, var(--header-aufhellung)), rgba(255, 255, 255, var(--header-aufhellung))),
        url("../img/header.jpg") ;
    background-size: cover ;
    background-position: center ;
    overflow: hidden ;
}

h1 a {
    text-decoration: none ;
    color: #eee ;
}

.header-logo-link {
    display: block ;
    height: 100% ;
    line-height: 0 ;
}

.header-logo {
    display: block ;
    height: 100% ;
    width: auto ;
    filter: drop-shadow(0 2px 5px #aaa) drop-shadow(0 0 10px #000088) drop-shadow(0 0 4px #000080) ;
    transition: filter 0.15s ease ;
}

.header-logo-link:hover .header-logo {
    filter: drop-shadow(0 2px 5px #4141418c) drop-shadow(0 0 10px #4a4a4a) drop-shadow(0 0 4px #e5e5e5) ;
}

/* Drachen in den oberen Ecken; der linke ist ein Link (Verwaltung/Anmelden) */
.header-drache {
    position: absolute ;
    top: 0 ;
    display: block ;
    height: var(--drache-hoehe) ;
    width: auto ;
    line-height: 0 ;
}

.header-drache img {
    display: block ;
    height: 100% ;
    width: auto ;
}

.header-drache-links {
    left: 0 ;
    filter: drop-shadow(0 2px 5px #aaa) drop-shadow(0 0 10px #000088) drop-shadow(0 0 4px #000080) ;
}

.header-drache-rechts {
    right: 0 ;
    pointer-events: none ;
    filter: drop-shadow(0 2px 5px #aaa) drop-shadow(0 0 10px #000088) drop-shadow(0 0 4px #000080) ;
}

/* Navigationsleiste ---------------------------------------------- */

#Nav {
    width: 100% ;
    min-height: var(--nav-hoehe) ;
    height: auto ;
    background-color: #fff ;
    z-index: 5 ;
    color: black ;
    display: flex ;
    align-items: center ;
    justify-content: flex-end ;
    gap: 0.4rem ;
    padding: 0 1rem ;
}

#Nav .nav-link {
    padding: 0.1rem 0.25rem ;
    font-size: 0.85rem ;
    line-height: 1.2 ;
    color: #000 ;
    text-decoration: none ;
}

#Nav .nav-link:hover {
    text-decoration: underline ;
}

#Nav .nav-zurueck {
    margin-right: auto ;
}

#Nav .nav-trenner {
    color: #777 ;
}

@media (max-width: 767px) {
    :root {
        --h1-padding: 0.3rem ;
        --nav-hoehe: 1.3rem ;
        --drache-hoehe: calc(var(--banner-hoehe) * 0.75) ;   /* auf schmalen Geräten nicht mit dem Logo kollidieren */
    }

    h1 {
        padding-left: 0.75rem ;
        padding-right: 0.75rem ;
    }
}