@charset "utf-8";
/* ---------------------------
/* #### Modul header_nav  ####
/* ---------------------------
/   LHR @2021-05-12 ff
/   neu zusammengeschrieben aus bestehendem CSS */



body > header, header > nav.fT * {
    margin:             0px;
    padding:            0px;
}
header#myHeader {
    /* --------------------
    /   nav im header ist zwar position fixed,
    /   aber das svg#lhrDefs nimmt muss ausserhalb stehen, damit es nicht im flexcontainer
    /   Platz einnimmt. Trotz höhe=0 wird für diese reine Verlaufs-Definition eine Höhe 
    /   im "relative"-Header beansprucht. Damit wird das gefixed: */
    position:           absolute;
    line-height:        0;
    height:             0;
}

/* --------------------
/   Navigations-Menu
/   OR = oben rechts:
/   fT = fixed-Title-bar
/* -------------------- */
nav.fT {
    /* hier war lange ein Fehler: ungewollte Cascadierung ! 
    die Verkleinerung wirkte doppelt? auf `, nav.fT a` 23.9.2022 entfernt*/
    font-size:          calc(var(--nav_FS) * 1em);
    color:              var(--_fT_C);
}
.fT h2, #nav-links a {
    /* --------------------
    /   ohne Angabe wirkt Default h_FONT */
    font-family:        var(--_fT_FONT);
}
.fT {
    /* --------------------
    /   border wird ggf von MediaQuery (ab D) überschrieben 
    /   border-bottom:      var(--_fT_BO_U_design); */
    width:              100vw;
    position:           fixed;
    top:                0;
    display:            flex;
    justify-content:    space-between;
    /* --------------------
    /   das gehört hier vermutlich noch gar nicht hin ? 
    /   aber doch: damit Logo und nav-links zusammen passen ! */
    align-items:        baseline; 
    background-color:   var(--_fT_BGC);
    opacity:            1;
    z-index:            5;
    /* --------------------
    /  ohne Zuweisung kommt es zu Rundungsfehlern... */
    height:             var(--nav_H);
    transition:         var(--_fT_transit);
}
#nav_shadow {
    transition:         var(--_fT_transit);
}
#rubriken {
    transition:         var(--_fT_transit);
}

.fT > #logo {
    justify-content:    flex-start;
    display:            flex;
    align-items:        baseline;
}
.fT > #logo > h2 {
    --h2_C:             var(--_fT_C);
    border:             var(--demoborderY);
    line-height:        var(--h12___LH);
}
header > nav.fT h1 {
    border:             var(--demoborderY);
    padding-top:        calc(1em * var(--nav_h1_PD_O) / var(--h_FS));
    padding-bottom:     calc(1em * var(--nav_h1_PD_U) / var(--h_FS));    
    --h1_C:             var(--_fT_C);
    margin-right:       calc(1em * var(--nav_h1_MG_R));
}
header > nav.fT h2 > a,
header > nav.fT h1 > a {
    display:            inline-block;
}

.fT a {
    --a_C:              var(--_fT_C);
}
.fT a:before {
    --a_bef_Content:    "";
}
#logo {
    text-transform:     uppercase;
    letter-spacing:     .1em;
}
ul#nav-links {
    order:              2;
    border:             var(--demoborder);
    /* default-padding von ul abschalten: */
    margin-left:        0;
    margin-top:         0;
    margin-bottom:      0;
    padding-left:       0;
    display:            flex;
    top:                calc(var(--nav_H) + var(--SubNav_space_H_calc) + 1em * var(--nav_BO_U));
    /* top:                var(--nav_H); */
    right:              0%;
    justify-content:    flex-start;
    /*  mit dem alten Wert kann es mit der baseline nicht recht klappen 
    /   align-items:        stretch;
    /   > wird nun per MQ eingestellt von stretch > baseline */
    text-align:         left;
    transition:         transform 500ms ease;
    overflow-y:         scroll;
}

ul#nav-links li {
    list-style:         none;
    font-size:          1em;
    /* white-space:        pre; */
}

ul#nav-links.active {
    /* --------------------
    /   active = sichtbar, 0% = Oberkante */
    transform:          translateX(0%);
    /* damit genügend Platz zum bis nach unten scrollen verfügbar ist
    muss das Padding unten mindesten genauso viel wie `top` sein: Wert von oben (top) kopiert */
    padding-bottom:     calc(var(--nav_H) + var(--SubNav_space_H_calc) + 1em * var(--nav_BO_U));
}
ul#nav-links.active li {
    background-color:   var(--_fT_BGC);
    /* background-image: linear-gradient(#1116, #8536); */
    border-top:         var(--_fT_BO_U_design);
    border-color:       var(--dark_text_C);
}
ul#nav-links.active li:not(:first-child) {
    margin-top:         calc( -1em * var(--nav_BO_U));
}
ul#nav-links li a {
    text-decoration:    none;
    letter-spacing:     .2em;
    /* temp: 
    background-color:   var(--bg_dark);
       oder: */
    border:             var(--demoborderY);
    line-height:        1;
    display:            flex;
    align-items:        baseline;
    flex: 0 1 auto;
    column-gap:         .2em;
}
ul#nav-links.active li a {
    /* nur für mobile-menu unter Hamburger */
    column-gap:         .5em;
}
ul#nav-links > li a:hover, #logo > h2 a:hover {
    color:              var(--hover_C);
    text-shadow:        1px 1px .3em black;
    /* background-color:   var(--main_D1_C); */
}
#logoOnly:hover {
    fill:               var(--hover_C);
}
div.nav_symbol {
    font-size:          2em;
    font-weight:        900;
    margin-right:       .2em;
}
ul#nav-links.active div.nav_symbol {
    /* nur für mobile-menu unter Hamburger:display:
       Breite und zentriert untereinander ist vorgegeben */
    flex:               0 0 1.6em;
    text-align:         center;
}
div#lupe.nav_symbol {
    font-size:          1.75em;
    padding:            0 1em;
    cursor:             pointer;
}
div.nav_symbol > i, div.nav_text > span {
    display:            inline-block;
}

#burger {
    /* obige Eigenschaften werden in mq verändert: daher hier schon Zuweisung */
    /*  Burger Pixelmasse bezogen sich auf mq-B für H1 = 2.5 */
    font-size:          calc( 1em * var(--h1_FS) / 2.5 );
    width:              4em;
    padding:            0 2em;
    cursor:             pointer;
    order:              2;
    /* temp: */
    border:             var(--demoborder);
}

#burger div {
    /* Pixelmaße passend zu MQ B > H1 !:
        12,8px = 1em (0.8 * 16px) dazu passen die alten Pixelmaße 24 4 5 3
    */
    width:              1.875em;
    height:             0.3125em;
    margin-top:         0.390625em;
    border-radius:      0.234375em;
    background-color:   var(--_fT_C);
    transition:         transform 500ms ease;
}
#burger div#line2 {
    transition:         opacity 500ms ease, transform 500ms ease-out;
}

/* --------------------
/   animation im JS
/* -------------------- */
@keyframes navLinkFade {
    from {
        opacity:        0;
        transform:      translateX(80vw);
    }
    to {
        opacity:        1;
        transform:      translateX(0);
    }
}
/* --------------------
/   Hamburger Linien zu "X" geformt
/   per Klasse .xed_ham
/   nach "ED" (youtoube)
/* -------------------- */
.xed_ham #line1 {
    transform:          rotate(-45deg) translate(-0.5859375em, 0.40625em);;
    width:              2.5em;
}
.xed_ham #line2 {
    opacity:            0;
    transform:          translateX(-64vw);
}
.xed_ham #line3 {
    transform:          rotate(45deg) translate(-0.5859375em, -0.40625em);
    width:              2.5em;
}

/* --------------------
/   interne Links auf der Seite heißen bei mir "pageRef"
/   das Sprungziel auf der Seite "onPageRef"
/* -------------------- */
.onPageRef {
    margin-top:         calc( -1 * var(--nav_H));
    /* --------------------
    /   wegen Überschrift mit Datum: 
    /   MG_U: wie bei p-Tag u.A. */
    margin-bottom:      var(--default_MG_OU_Calc);
    padding-top:        calc( var(--_onPageRef_PD_O) + var(--nav_H));
}
a.pageRef::before {
    /* --------------------
    /   mit einem farbigen Punkt davor kenntlich gemacht
    /   im Gegensatz zu richten Links (auf andere Seiten) */
    content:            var(--_pageRef_bef_Content);
    /* --------------------
    /   darf ebenso wie font-size nicht geändert werden: 
    /   wird sonst höher als ohne ::before 
    font-family:        var(--mono_FONT);
    */
    /* --------------------
    /   darf nicht geändert werden: 
    /   wird sonst höher als ohne ::before 
    font-size:          var(--_pageRef_FS);
    */
    color:              var(--light_saturate_C);
}

/* --------------------
/   #### LHR Logo ####
/* -------------------- */

#logo > a > svg {
    white-space:        pre;
    fill:               var(--max_light_C);
}
#logo > *:not(#svgLogoMitVerlauf) {
    z-index: 4;
}
#logo a {
    font-weight: inherit;
    /* --------------------
    /   sonst hätte mein H1 punkte darunter */
    border-bottom:      none;
}
#svgLogoMitVerlauf {
    font-size:          calc( var(--logoFaktor) * var(--h1_FS) *1em );
    z-index:            3;
}
#logoOnly, #rect_darunter {
    position:           absolute;
    top:                calc(  -92 * 1em / 108 );
    height:             1em;
}
#rect_darunter {
    left:               -1.0em;
}
#logoOnly {
    left:               0em;
}
#logoSpacer {
    width:              calc( (var(--nav_Logo_FS) + 0 ) * 1em);
}