@charset "utf-8";
/* --------------------
/   CSS-Info in erstem p im header: */
:root {
    --A_cntnt:              "Media-Query-A | mobile first\00000aFont-Size: 0.875;";
    --B_cntnt:              "Media-Query-B :    ab  350px\00000aFont-Size: 1.00;";
    --C_cntnt:              "Media-Query-C :    ab  576px\00000aFont-Size: 1.00;";
    --D_cntnt:              "Media-Query-D :    ab  768px\00000aFont-Size: 1.25;";
    --E_cntnt:              "Media-Query-E :    ab 1366px\00000aFont-Size: 1.35;";
    --F_cntnt:              "Media-Query-F :    ab 1920px\00000aFont-Size: 1.25;";
}


/*  --------------
/*  ##### A ######
/*  -------------- 
/   mobile first settings, die unten geändert werden können: */
div.prism-show-language > div.prism-show-language-label,
div.code-toolbar > .toolbar {
    /*  ursprünglich:
    /   display:            none;
    /*  kann aber nuhig immer angezeigt werden */
    display:            inline-block;;
}
h6 {
    font-weight:        normal;
}
.page_nums.cd,
.page_nums.ef {
    display:            none;
}
.page_nums.ab {
    display:            flex;
}

ul#nav-links {
    position:           absolute;
    padding-bottom:     var(--nav_H);
    /* max-height macht nur bei position fixed einen Sinn (mit diesen 100%)
        position:           fixed;
        max-height:         calc(100% - var(--nav_H));
    */
    /*  eigentlich abzüglich nav_H, aber das ist padding-bottom s.o.
            height:             calc( var(--newVH, 1vh) * 100 - var(--nav_H));
        daher 100newVH:
    */
    height:             calc( var(--newVH, 1vh) * 100 );
    flex-direction:     column;
    align-items:        stretch;
    transform:          translateX(100%);
    width:              100vw;
    /*  alter Hintergrund für ganzes UL war: var(--_fT_BGC); 
    /   > ist somit jetzt für alle MQs (schonab A) gültig  */
    background-color:   transparent;
}
ul#nav-links li {
    opacity:            0;
    /*  :not(:last-child) */
    border-bottom:      var(--_fT_BO_U_design);
    flex:               0 1 4.2em;
}
ul#nav-links li a {
    padding:            .5em 2em .5em 20vw;
    display:            block;
    line-height:        3em;
}
ul#nav-links li a:hover {
    border-radius:      0.8em 0 0 0.8em;
}
#mySidebar {
    min-height:         calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - 
                            var(--main_MG_OU) - var(--Pagi_plus_H_calc) - 
                            var(--myCont_footer_H) * 0 - var(--main_LA_footer_H));
}
#mySidebar > section.statistik {
    display: none;
}
#myContent.ohne_frm {
    margin-bottom:          var(--myCont_footer_H);
    min-height:             calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - 
                                  var(--main_MG_OU) - var(--Pagi_plus_H_calc) - var(--myCont_footer_H));
    /* 2spaltig: sidebar ohne min-heigth; aber content hat unten auf jeden falls main_LA_footer
                  > - var(--main_LA_footer_H));
    */
}

#myContent[class$="_h1h2"] > .prnt,
#myContent[class$="_h2h3"] > .prnt,
#myContent[class$="_h3h4"] > .prnt {
    --abstand_L:        calc( var(--A_abst_L) + var(--num_zusatz2) * var(--mit_Marginalspalte) );
}
#myContent[class$="_h1h2h3"] > .prnt,
#myContent[class$="_h2h3h4"] > .prnt {
    /* --abstand_L:        4.0;  */
    --abstand_L:        calc( var(--A_abst_L) + var(--num_zusatz3) * var(--mit_Marginalspalte) );
}

.prnt {
    /* kleine MQs.: kein Platz für BO_L, somit Breite fix 0 */
    --h_BO_L:             0.0;
    /* somit hier noch alle aus gestellt: `0` ist OFF */
    --h1_mitBO_L:         0;
    --h2_mitBO_L:         0;
    --h3_mitBO_L:         0;
    --h4_mitBO_L:         0;
}

@media all and (min-width: 350px ) {
    /* ---------------
    /* ###### B ######
    /* --------------- 
    :root { }
        siehe auch master.css
    */
    .prnt {
        /* --h6_bef_Content:   ":"; */
        --hr_MG:            1.5;
        /* ohne Marginalspalte reicht 2.2 am Handy */
        --abstand_L:        var(--B_abst_L);
        /* temporär auf main_C umgestellt zur Erkennung von MQ-B: */
    }

    /*
    .prnt {
        --abstand_L:        1.2;
    }
    #myContent:not([class]) > .prnt h1 {
        --kapNr:            none;
        --mitKapitelNr:     0;
    }
    #myContent:not([class]) > .prnt h2 {
        --kapNr:            none;
        --mitKapitelNr:     0;
    }
    #myContent:not([class]) > .prnt h3 {
        --kapNr:            none;
        --mitKapitelNr:     0;
    }
    */
    /* 04-2024 aufgehoben wegen zus. time-Tag
    h6 {
        font-weight: revert;
    } */
    #myContent[class$="_h1h2"] > .prnt,
    #myContent[class$="_h2h3"] > .prnt,
    #myContent[class$="_h3h4"] > .prnt {
        --abstand_L:        calc( var(--B_abst_L) + var(--num_zusatz2) * var(--mit_Marginalspalte) );
    }
    #myContent[class$="_h1h2h3"] > .prnt,
    #myContent[class$="_h2h3h4"] > .prnt {
        /* --abstand_L:        4.0;  */
        --abstand_L:        calc( var(--B_abst_L) + var(--num_zusatz3)* var(--mit_Marginalspalte) );
    }
}

@media all and (min-width: 576px ) {
    /* ---------------
    /* ###### C ######
    /* --------------- */
    :root {
        /*  siehe auch master.css */
        --nav_FS:           0.9;
    }
    /*  soll default sein, also die bishergen schema-Settings
    /   echtes mobile-first wird oben behandelt A & B */
    .page_nums.ab,
    .page_nums.ef {
        display:            none;
    }
    .page_nums.cd {
        display:            flex;
    }

    .prnt {
        --abstand_L:        var(--C_abst_L);
        /* normals Layout ist immer ab MQ_C mit sog. Marginalspalte, 
           also mit linkem Zwischenraum für H1 (oder H4) Border-Left am Rahmenrand */
        --mit_Marginalspalte: 1;
        --h1_mitBO_L:         var(--h1_BO_L, 0);
        --h2_mitBO_L:         var(--h2_BO_L, 0);
        --h3_mitBO_L:         var(--h3_BO_L, 0);
        --h4_mitBO_L:         var(--h4_BO_L, 0);
        --h_BO_L:             var(--h_BO_L_width);
        /* --h6_bef_Content:   "@: "; */
        /* --h6_bef_Content:   "\f073 "; */
        --hr_MG:            3;
    }
    .prnt h5[title],
    .prnt h1 {
        --real_PD_L:        0.0;
    }
    .prnt h1 + h5, .prnt h2 + h5, .prnt h1 + h6 + h5, .prnt h2 + h6 + h5 {
        --real_PD_L:        0.0;
    }
    #myContent:not([class]) > .prnt.home h1 {
        --kapNr:            var(--cntZ1_ohne);
        --mitKapitelNr:     1;
    }
    #myContent:not([class]) > .prnt h2 {
        --kapNr:            var(--cntZ1);
        --mitKapitelNr:     1;
    }
    #myContent:not([class]) > .prnt h3 {
        --kapNr:            var(--cntZ12);
        --mitKapitelNr:     1;
    }
    #myContent:not([class]) > .prnt h4 {
        --kapNr:            none;
        --mitKapitelNr:     0;
    }
    div.prism-show-language > div.prism-show-language-label,
    div.code-toolbar > .toolbar {
        /* in ln_shl entfernt */
        display:            inline-block;
    }
    fieldset.norm {
        --_fg_grid:         auto minmax(var(--_iv_LH), auto) / var(--_fg_label_W) var(--fs_width);
        --label_gROW:       1 / -1;
        --label_gJustSelf:  end;
        --label_PD_O_calc:  calc( (var(--input_PD_OU) + var(--input_BO_W)) / var(--label_FS) * 1em);
        --label_PD_L_calc:  0em;
        --_fg_PD_O:         var(--_fg_PD);
    }


    /* form#_NewPostForm {
        --_fg_grid:         auto auto minmax(var(--_iv_LH), auto) / minmax(24ch, calc(var(--_fg_label_W) + 42ch));
    } */
    article.prnt > ul  > a.btn.b_sm::before,
    article.prnt > ul  > .btn.b_sm > summary::before {
        content: 'Artikel ';
    }
    /* Nummerierung erhält ab MQ-C doppelter Nummerierungs-Zusatz daher unten Faktor 2 * num_zusatz: */
    #myContent[class$="_h1h2"] > .prnt,
    #myContent[class$="_h2h3"] > .prnt,
    #myContent[class$="_h3h4"] > .prnt {
        --abstand_L:        calc( var(--C_abst_L) + 2 * var(--num_zusatz2) );
    }
    #myContent[class$="_h1h2h3"] > .prnt,
    #myContent[class$="_h2h3h4"] > .prnt {
        --abstand_L:        calc( var(--C_abst_L) + 2 * var(--num_zusatz2) );
    }
}

@media all and (min-width: 768px ) {
    /* ---------------
    /* ###### D ######
    /* --------------- */
    :root {
        /*  siehe auch master.css */
        --nav_FS:           0.8;
        /* Fehler: das ist eine doppelte Angabe siehe unten  */
        --x_MG_PD_LR:       6vw;
        --grid_gap:         calc(var(--basis_MG) * 4 / 3);
    }

    /*  mit `nav.` spezifischer als weiter unten 
    nav.fT {
        border-bottom:      0;
        box-shadow:         0 .5em 1.5em #000;
    }
    */
    ul#nav-links {
        max-width:          unset;
        position:           initial;
        min-height: initial;
        height: initial;
        padding-bottom: 0;
        flex-direction:     row;
        /* das muss weg:
        //  justify-content:    flex-end;
        //  Grund: scroll-x wird verhindert */
        transform:          initial;
        align-items:        baseline;
        /*  ist jetzt eigentlich wieder obsolet 
        /   weil das jetzt schon ab MQ-A gilt: 
        / > background-color:   transparent;
        /   eigentlich ist es ohne Zuweisung sogar komplett obsolet */
        width:              initial;
    }
    ul#nav-links.uebersicht {
        flex-grow:          1;
    }
    ul#nav-links li {
        opacity:            1;
        border-bottom:      0;
        position:           relative;
        flex:               0 1 auto;
    }
    ul#nav-links>li:first-child {
        flex-grow: 1;
    }
    ul#nav-links li:not(:last-child)::after {
        font-size:          calc( var(--h1_FS) * 1em);
        border:             var(--demoborder);
        /* border-right:       calc(1em * var(--nav_BO_U) / var(--h1_FS)) solid var(--_fT_C); */
        content:            "";
        line-height:        1.6;
        padding:            1em 0 0 0;
    }
    ul#nav-links li:not(:last-child) > a {
        border-right:       calc(1em * var(--nav_BO_U) / var(--nav_FS)) solid var(--_fT_C);
    }
    ul#nav-links li a {
        line-height:        2.2;
        display:            initial;
        padding:            2.0em .8em .4em .8em;
        /* Fehler: siehe oben --nav_FS */
        font-size:          calc(1em * var(--_15zu16));
    }
    #rubriken a {
        font-size:          calc(1em * var(--_15zu16));
    }
    ul#nav-links li a:hover {
        border-radius:      0 0 0 0;
    }
    ul#nav-links li:last-child a {
        padding-right:      0;
    }
    ul#nav-links li:first-child > a#hm_fltr {
        flex-direction:     row-reverse;
        text-align:         right;
    }
    #burger, #lupe {
        display:            none;
    }
    #falscher_farbname {
        max-width:          60%;
    }
    ul#nav-links div.nav_text {
        display:            none;
    }
    textarea#content {    
        height: 48vh;
    }    
    #myContent[class$="_h1h2"] > .prnt,
    #myContent[class$="_h2h3"] > .prnt,
    #myContent[class$="_h3h4"] > .prnt {
        --abstand_L:        calc( var(--D_abst_L) + 2 * var(--num_zusatz2) );
    }
    #myContent[class$="_h1h2h3"] > .prnt,
    #myContent[class$="_h2h3h4"] > .prnt {
        --abstand_L:        calc( var(--D_abst_L) + 2 * var(--num_zusatz3) );
    }
}

@media all and (min-width: 950px ) {
    ul#nav-links div.nav_text {
        display:            block;
    }
    textarea#content {    
        height: 66vh;
    }    
}
@media all and (min-width: 1366px ) {
    /* ---------------
    /* ###### E ######
    /* --------------- */
    :root {
        /*  siehe auch master.css */
        --x_MG_PD_LR:       8vw;
        --MG_OU:            1.0;
    }
    .page_nums.ab,
    .page_nums.cd {
        display:            none;
    }
    .page_nums.ef {
        display:            flex;
    }

    ul#nav-links li a {
        padding:            2.0em 1.6em .4em 1.6em;
    }
    /* obsolet ? 
    */
    ul#nav-links li:last-child a {
        padding-right:      0;
    }
    #main_layout {
        /* 2spaltig cont + side */
        --MainLA_grT:       1fr var(--main_LA_footer_H) / 6fr minmax(0, 3fr);
        --MainLA_grTareas:  "cont side"
                            "foot foot";
        /* in myCont braucht es kein footer mehr : h=0  s.a.u. form.frm */
        /* 2spaltig cont + side */
        --myCont_footer_H:  0em;
    }
    textarea#content {    
        height: 78vh;
    }    
    #mySidebar {
        min-height:         unset;
    }
    main form.frm:not(section.prnt.statistik > form.frm) {
        /* in myCont braucht es kein footer mehr : h=0 s.o. muss also nicht abgezogen werden */
        min-height: calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - var(--main_MG_OU) - 
                            var(--Pagi_plus_H_calc) - var(--main_LA_footer_H));
    }
    #myContent.ohne_frm {
        margin-bottom:          0;
        min-height:             calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - 
                                    var(--main_MG_OU) - var(--main_LA_footer_H) - var(--Pagi_plus_H_calc) );
        /* 2spaltig: sidebar ohne min-heigth; aber content hat unten auf jeden falls main_LA_footer
                      > - var(--main_LA_footer_H));
        */
    }
    #myContent[class$="_h1h2"] > .prnt,
    #myContent[class$="_h2h3"] > .prnt,
    #myContent[class$="_h3h4"] > .prnt {
        --abstand_L:        calc( var(--E_abst_L) + 2 * var(--num_zusatz2) );
    }
    #myContent[class$="_h1h2h3"] > .prnt,
    #myContent[class$="_h2h3h4"] > .prnt {
        --abstand_L:        calc( var(--E_abst_L) + 2 * var(--num_zusatz3) );
    }
    #myContent > article:not(.privat) {
        justify-self: stretch;
    }
    #mySidebar > section.statistik {
        display: initial;
    }
    #myContent > section.statistik {
        display: none;
    }
    
}

@media all and (min-width: 1920px ) {
    /* ---------------
    /* ###### F ######
    /* --------------- */
    :root {
        /*  siehe auch master.css */
        --x_MG_PD_LR:       10vw;
        --MG_OU:            1.5;
        --grid_gap:         calc(var(--basis_MG) * 2);
    }

    .prnt {
        --hr_MG:            3;
    }
    ul#nav-links li a {
        padding:            2.0em 2em .4em 2em;
    }
    ul#nav-links li:last-child a {
        padding-right:      0;
    }
    #main_layout {
        --MainLA_grT:       1fr var(--main_LA_footer_H) / 1fr 3fr minmax(0, 1fr) 1fr;
        --MainLA_grTareas:  ".... cont side side"
                            "foot foot foot foot";
    }
    #myContent > article:not(.privat) {
        justify-self: start;
    }
    #myContent[class$="_h1h2"] > .prnt,
    #myContent[class$="_h2h3"] > .prnt,
    #myContent[class$="_h3h4"] > .prnt {
        --abstand_L:        calc( var(--F_abst_L) + 2 * var(--num_zusatz2) );
    }
    #myContent[class$="_h1h2h3"] > .prnt,
    #myContent[class$="_h2h3h4"] > .prnt {
        --abstand_L:        calc( var(--F_abst_L) + 2 * var(--num_zusatz3) );
    }
}

@media all and (min-width: 2400px ) {
    /* ---------------
    /* ###### G ######
    /* diesen MQ gibt es offiziell noch nicht
    /* -------------------------------------- */
    :root {
        --grid_gap:         calc(var(--basis_MG) * 8 / 3);
    }
    #main_layout {
        --MainLA_grTareas:  ".... cont side ...."
                            "foot foot foot foot";
    }
}

@media print {
    body {
        --body_BGC: none;
    }
    body > header + main, body > main > div#main_layout {
        margin: 0;
    }
    article.prnt {
        --article_BGC: #fff;
        --text_max_W:       48em;
        max-width: 400px; /* Ensure content fits well within print margins */
        margin: 0 auto;
        width: 100%;
        font-size: 12pt; /* Adjust font size for print */
    }
    ul.btn_line,
    body > header,
    div#subNav_space,
    section#myContent > article.prnt > ul.btn_line + h6.date4h5,
    section#myContent > article.prnt > ul.btn_line + h6.date4h5 + h5,
    aside#mySidebar,
    section.myNote {
        display:            none;
    }
    section.myContent,
    section.myContent > *:not(article.prnt) {
        display:            none;
    }
    article.prnt > h2 {
        /* Ensure new headings start on a fresh page */
        break-before:   var(--h2_BR_BEF);
        /* page-break-before: always; */
    } 
    article.prnt > *:not(ul) {
        page-break-inside: avoid; /* Prevent content from splitting across pages */
    }
    /* Nachfolgende Style-Angaben sind je nach Farbgestaltung sinnvoll oder obsolet 
        Achtung: absolute Angaben wie bei »h1 Font-Size« führen zu unerwarteten Ergebnissen, weil andere
                 Variablen nicht richtig eingestellt werden */
    /* 
        article > h1 {
            font-size: 4em;
            opacity: .9;
        }
        blockquote > p {
            color:              var(--dark_text_C);
        }
        :root {
            --h4_C:             var(--dark_text_C);
        }
    */
}