@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://use.typekit.net/pgj7jaf.css");
/* ---------------
/* ###### A ######
/* --------------- */
:root {
    --mit_Kompromiss:   0;
    --abstand_R:        1.2;
    --basis_FONT:       "unit", "Source Sans Pro", aller, sans-serif;
    --h_FONT:           "metronic-slab",
                        "Bitter", "Titillium Web", "Source Sans Pro", aller, sans-serif;
    --mono_FONT:        input-mono-compressed, Menlo, monospace;
    --extra_FONT:       input-serif-compressed, Menlo, monospace;
    --basis_FW:         400;
    --main_FS:          var(--_14zu16);
    --pre_FS:           1.00;
    --code_FS:          0.8125;
    --table_FS:         0.8;
    --_kap_FS:          var(--h4_FS, 0.875);
    --cntKap_FS:        var(--h4_FS, 0.875);
    --_kleiner_FS:      1.0;
    --_normal_FS:       1.0;
    --parent_FS:        var(--_normal_FS);
    --bq_FS:            1.0;
    --nav_FS:           1.0;
    --_14zu16:          .875;
    --_15zu16:          .9375;
    --A_FS:             var(--_14zu16);
    --B_FS:             1.00;
    --C_FS:             1.00;
    --D_FS:             1.10;
    --E_FS:             1.10;
    --F_FS:             1.2;
    --A_h1_FS:          1.70;
    --A_h2_FS:          1.40;
    --A_h3_FS:          1.20;
    --A_h4_FS:          1.1428571429;
    --A_h5_FS:          1.00;
    /* h6 immer 1 (s.u.) */
    --A_h6_FS:          1.00;
    --B_h1_FS:          2.0;
    --C_h1_FS:          2.4;
    --C_h2_FS:          2.0;
    --C_h3_FS:          1.375;
    --C_h4_FS:          1.1875;
    --C_h5_FS:          var(--_15zu16);
    /* keine Änderung für H6 zulässig, denn time-tag innerhalb verkleinert schon */
    /* --C_h6_FS:          var(--_15zu16); */
    --D_h1_FS:          2.60;
    --F_h1_FS:          2.9;
    --basis_LH:         1.35;
    --min_LH:           1.10;
    --h35___LH:         1.15;
    --h12___LH:         1.00;
    --basis_MG:         0.75;
    --MG_OU:            var(--basis_MG);
    --hr_MG:            var(--MG_OU, 0.75);
    --hr_BOW:           0.2;
    --hr_lineStyle:     dashed;
    --pre_PD_OU:        0.5;
    --Rub_H:            2.8;
    --max_light_C:      #fff;
    --hi_light_C:       #eee;
    --light_C:          #bbb;
    /* --semi_light_C:     #f8f8f8dd; */
    --semi_light_C:     #dfe2e4;
    --middle_gray_C:    #808080;
    --dark_gray_C:      #666;
    --near_gray_C:      #99777e;
    --dark_text_C:      #000;
    --light_saturate_C: #de9000;
    --dark_saturate_C:  #000;
    --dark_and_warm_C:  #b22222;
    --deep_warm_C:      #883355;
    --medium_warm_C:    #ac8235;
    --main_C:           #333; /* #84052e, #79062d */
    --succ_C:           #0b8e6d;
    --hover_C:          #fc1;
    /*
    --hg_C:             var(--210_20_33_is_456);
    */
    --main_D1_C:        #33404d;    /*  210_20_25 */
    --main_D2_C:        #29333d;    /*  210_20_20 */
    --main_D3_C:        #1f262e;    /*  210_20_15 */
    /* Feedback-Colors 100% kräftig für neg-Text */
    --_fb-2a_C:         var(--dark_and_warm_C);
    --_fb-1a_C:         var(--light_saturate_C);
    --_fb_0a_C:         var(--main_C);
    --_fb_1a_C:         var(--succ_C);
   /* Feedback-Colors hell für pos-Text; die selben Hue-Werte */
    --_fb-2b_C:         hsl(0deg 70% 80%);
    --_fb-1b_C:         hsl(39deg 70% 75%);
    --_fb_0b_C:         hsl(210deg 14% 85%);
    --_fb_1b_C:         hsl(165deg 75% 65%);
    --dezent_C:         #ff7f50;
    --article_Ende_C:   var(--dezent_C);
    --lastChild_fas_C:  var(--hx_BGC);
    --pre_BOC:          var(--middle_gray_C);
    --bq_BOC:           var(--main_C);
    --_abs_BOC:         #8B000000;
    --h2_BO_U_C:        var(--h2_C);
    --h_BO_L_C:         var(--main_C);
    --header_BGC:       var(--hi_light_C);
    --_abs_BGC:         #4563;
    --article_BGC:      var(--semi_light_C);
    --hr_BGC:           var(--light_saturate_C);
    --pre_BGC:          var(--hi_light_C);
    --p_BGC:            transparent;
    --hx_BGC:           #4567;
    --hx_BGC:           var(--near_gray_C);
    --body_BGC:         var(--h_BO_L_C);
    --h_dflt_BGC:       transparent;
    --h5_BGC:           var(--hx_BGC);
    --h_dflt_C:         var(--main_C);
    --h1_C:             var(--main_C);
    --h4_C:             var(--main_C);
    --h5_C:             var(--main_C);
    --h6_C:             var(--main_C);
    --h5_einleitung_C:  var(--dark_gray_C);
    --h6_bef_C:         var(--main_C);
    --kapNr_C:          var(--middle_gray_C);
    --span_i_C:         var(--middle_gray_C);
    --code_C:           var(--middle_gray_C);
    /* --a_C:              var(--code_C); */
    --a_C:              inherit;
    --em_C:             var(--main_C);
    --bq_C:             var(--middle_gray_C);
    --fieldset_BG_C:    var(--semi_light_C);
    --placeholder_C:    var(--light_C);
    --_fg_BG_C:         var(--near_gray_C);
    --_iv_C:            var(--max_light_C);
    --_brand_C:         var(--main_C);
    --_fT_BGC:          var(--main_C);
    --a_bef_Content:    "➝ ";
    /* --a_bef_Content:    "\f35d  ";  das Symbol für external link*/
    --a_bef_Content:    "\f30b  ";
    --cntZ1_ohne:       "" counter(z1);
    --cntZ1_normal:     counter(z1) ":";
    --cntZ1_Kap:        "Kap." counter(z1) ":";
    --cntZ12:           counter(z1) "." counter(z2) ":";
    --cntZ123:          counter(z1) "." counter(z2) "." counter(z3) ":";
    /* Berechnung der sich ergebenden Höhe: > wird als MG für ul#nav-links verwendet*/
    --nav_BO_U:         0.13;
    --nav_Logo_FS:      var(--h1_FS);
    --nav_h1_PD_O:      1.0;
    --nav_h1_PD_U:      .3675;
    --nav_h1_MG_R:      .1;
    /* h12_LH im Header Menu ist wie basis_LH */
    --nav_H_val:        calc( var(--basis_LH) * var(--h1_FS) + 
                             var(--nav_h1_PD_O) + var(--nav_h1_PD_U));
    /* Bezug 1rem und Berücksichtung von nav_FS > immer richtig! (=nav_H_abs)*/
    /* Vorraussetzung: header_FS ist nicht gesetzt oder 1.0 */
    --nav_H:            calc( 1rem * var(--nav_FS) * var(--nav_H_val));
    /* nav_H Berechnung mit em nur in `nav#myNav` richtig:
    /   --nav_H:            calc( 1em * var(--nav_H_val));
    /   --nav_H_alt:        calc( var(--basis_LH) * var(--h1_FS) * 1em + 
                            var(--nav_BO_U) + var(--nav_h1_PD_O) + var(--nav_h1_PD_U));
    */
    --SubNav_fb_LH:             1.35;
    --SubNav_space_PD_OU:       0.7;
    --SubNav_space_BOW_U:       0.7;
    --SubNav_space_H_calc:  calc( 1rem  * var(--main_FS) * var(--nav_FS ) * var(--SubNav_fb_LH) 
                                + ( 2 * var(--_fb_BOW) + 2 * var(--SubNav_space_PD_OU) + var(--SubNav_space_BOW_U) ) * 1em );
    --_onPageRef_PD_O:  2em;
    --_pageRef_bef_Content: "#";
    --_pageRef_FS:      1.2em;  /* max 1.5em */
    --x_MG_PD_LR:       4vw;
    --_fb_BOW:          0.07;
    --_fb_BO_style:     dashed;
    --_pg_num_verkl:    .8928571429;
    --_pg_nums_FS:      calc( var(--main_FS) * var(--nav_FS) * var(--_14zu16) * var(--_pg_num_verkl));

    /* nur heute 3.6.22: */
    /* --A_FS:             1.25; */
    /* --B_FS:             1.25; */
    /* --C_FS:             1.25; */
    /* --D_FS:             1.25; */
    /* --E_FS:             1.25; */
    /* --F_FS:             1.25; */
    /* nur heute 3.6.22: */

    --_btnline_LH:      1.5;
    --art_FS:           calc( var(--basis_FS) * var(--main_FS) * var(--parent_FS)); 
    --_bsm_FS:          .8;
    --_bsm_PD_OU:       .25;
    /* --_switch_Hf:       calc( (var(--art_FS) * var(--_bsm_FS) * var(--_btnline_LH) + 2 * var(--_bsm_PD_OU) ) * 16px); */
    /*                              ( 1,0 *          0,8 *            1,5  +       0,5 ) * 16  */
    /* --_switch_FS_tmp_c: calc( var(--art_FS) * var(--_bsm_FS) * 16px); */
    /* --_switch_H:        calc( var(--art_FS) * var(--_bsm_FS) * 16px * var(--_btnline_LH)  +  2 * var(--_bsm_PD_OU) * var(--_switch_FS_tmp_c)); */
    --_switch_H:        calc((var(--_btnline_LH) + 2 * var(--_bsm_PD_OU)) * var(--art_FS) * var(--_bsm_FS) * 16px);
    --grid_gap:         var(--basis_MG);
    --main_LA_footer_H: calc( var(--grid_gap) * 2em);
    --myCont_footer_H:  calc( var(--grid_gap) * 2em);
    --h_BOW:            0.2;
}
main {
    /* nicht nur artikel sollen den einheitlichen radius haben, auch fieldsets */
    --main_BO_radius:   .4;
}
*:not(h1, h2, h1+h6.date4h5, h2+h6.date4h5) + h5 {
    --em_C:             var(--max_light_C);
}
*:not(h1, h2, h1+h6.date4h5, h2+h6.date4h5) + h5 > span.brand {
    --_brand_C:         var(--hover_C);
}
*:not(h1, h2, h1+h6.date4h5, h2+h6.date4h5) + h5 > strong {
    color:              #e2e2ff;
}
h5 > em {
    font-family:        var(--basis_FONT);
}
#myContent > .prnt {
    --cntZ1:            var(--cntZ1_normal);
}
#myContent > .prnt.praefix {
    --cntZ1:            var(--cntZ1_Kap);
}
.prnt , fieldset a {
    --a_C:              var(--code_C);
}
.prnt figure a {
    --a_C:              var(--main_C);
}
.prnt {
    --A_abst_L:         1.8;
    --B_abst_L:         2.2;
    --C_abst_L:         4.4;
    --D_abst_L:         4.4;
    --E_abst_L:         10.0;
    --F_abst_L:         4.4;
    --abstand_L:        var(--A_abst_L);
    /* zusätzlicher Abstand für 2 oder 3-fach Nummerierung bzw */
    --num_zusatz2:      1.0; /*  bzw 2.0 ab MQ-C durch Faktor 2 */
    --num_zusatz3:      1.8;  /* bzw 3.6 ab MQ-C durch Faktor 2 */
    --text_min_W:       16em;
    --text_max_W:       48em;
    --mit_Marginalspalte: 0;
    /* historische Bezeichnug "mit Listen Marker LINKS VORANGESTELLT
       (d.h. also nicht eingerückt) 
       Wert wirkt nur noch für BQ-Marker  */
    --mit_LiMarker_L:   1; /* sollte noch umbenannt werden*/
    /* neuer Wert für Listen Marker (umgekehrt)
       (d.h. ohne-LI Marker vorangestellt 0 entstpricht oben
             ohne-LI Marker vorangestellt 1 entspricht EINGERÜCKT   */
    --einger_LiMarker:  1; /* wird nun statt ohne_LiMarker_L verwendet*/
    --blocksatz:        0;
    --fliesstext_ALIGN: left;
    --inlineCode_WRAP:  nowrap;
    --h2_FF:            var(--basis_FONT);
    --h4_FF:            var(--basis_FONT);
    --h6_FF:            var(--basis_FONT);
    --h2_PD_U:          0.2;
    --h3_PD_O:          0.1;
    --h3_PD_U:          0.2;
    --h4_PD_O:          0.1;
    --h4_PD_U:          0.1;
    --h5_PD_O:          0.1;
    --h5_PD_U:          0.1;
    /* für einheitliche Breite der Linien kann unten diese neu Variable verwendet werden */
    --h2_BOW_U:         var(--h_BOW, 0.2);
    /* --h3_BOW_O:         var(--h_BOW, 0.2); */
    /* --h3_BOW_U:         var(--h_BOW, 0.2); */
    --h2_BO_U_design:   solid var(--h2_C, var(--main_C));
    --h_BO_default_d:   solid var(--h_BO_L_C, var(--main_C));
    --hr_lineStyle:     dotted;
    --hr_BGC:           var(--main_C);
    --hr_MG:            0.75;
    --h_span_PD_R:      0.4;
    --listen_PD_L:      1.5;
    --h_PD_L:           0.0;
    --bq_BOW_L:         0.5;
    --bq_indent_LR:     0.0;
    --h6_bef_Content:   " ";
    --h6_mini_PD_R:     0.0;
    /* neue Variablen für BO_L (0 1 nein ja) (wird aber erst ab MQ-C aktiv) */
    --h1_BO_L:          0;
    --h2_BO_L:          1;
    --h3_BO_L:          0;
    --h4_BO_L:          0;
    /* mit folgendem Wert wird dann in mq.css die `h_BO_L` überschrieben */
    --h_BO_L_width:     2.0;
    --h5_UPPER:         inherit;
    --strong_UPPER:     none;
    --em_FW:            bolder;
    --h5_LSP:           .04em;
    /* break-before:    page oder auto */
    --h2_BR_BEF:        auto;
}
.prnt h5, .prnt h6 {
    --real_PD_L:        0.8;
}
.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 {
    /* keine Artikel-Marginalspalte in Übersicht 
    /* deshalb auch keine Nummern möglich, erst ab MQ-C */
    --kapNr:            none;
    --mitKapitelNr:     0;
}
#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;
}
#myContent:not([class]) {
    counter-reset:      z1;
}
#myContent:not([class]) > .prnt h2 {
    counter-reset:      z2;
}
#myContent:not([class]) > .prnt h3 {
    counter-reset:      z3;
}
#myContent:not([class]) > .prnt.home h1 {
    counter-increment:  z1 1;
}
#myContent:not([class]) > .prnt h2 {
    counter-increment:  z1 1;
}
#myContent:not([class]) > .prnt h3 {
    counter-increment:  z2;
}
#myContent:not([class]) > .prnt h4 {
    counter-increment:  z3;
}
form.frm {
    --fs_width:         minmax(24ch, 66ch);

}
fieldset {
    --flex:             0 1 65ch;
}
fieldset.tal {
    /* top-aligned label (fix über alle MQ) */
    --fs_width:         minmax(36ch, 184ch);
    --flex:             1 1 95ch;
}
fieldset.ral {
    --fs_width:         minmax(12ch, 16ch);
    --flex:             1 1 45ch;
}
fieldset.ral div.fg.nummer {
    --fs_width:         8ch;
}

fieldset.norm, fieldset.dal, fieldset.tal  {
    /* ersteres `.fg`-unspzifisch
       dynamic-aligned label: kann von mq.css überschreiben werden,
       tal ist spezifischer und bleibt deshalb bestehen */
    --_fg_grid:         unset / unset;
    --_fg_grid:         auto auto minmax(var(--_iv_LH), auto) / var(--fs_width);
    --label_gJustSelf:  start;
    --label_PD_O_calc:  0em;
    --label_PD_L_calc:  calc( (var(--input_PD_LR) + var(--input_BO_W)) / var(--label_FS) * 1em);
    --_fg_PD_O:         var(--_fg_PD_U);   /* bei MQ-A & B  wie unten sonst wie `_fg_PD` > siehe MQ */


}
fieldset.ral > div.fg {
    --_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.frm {
    --input_MG:         0;
    --input_PD_OU:      0.2;    /* uem */
    --input_PD_LR:      0.4;    /* uem */
    --input_BO_W:       0.15;   /* uem */
    --normalize_LH:     1.15;
    --fieldset_MW_sm:   30ch;
    --fieldset_MW_lg:   60ch;
    --input_FS:         1.0;
    --label_W_sm:       12ch;   /* Angabe bez. auf label_FS */
    --label_W_me:       20ch;
    --label_W_lg:       30ch;
    --label_gROW:       1 / 2; 
    --label_FS:         .8;
    --input_PD_calc:    calc( var(--input_PD_OU) / var(--input_FS) * 1em) 
                        calc( var(--input_PD_LR) / var(--input_FS) * 1em);
    --_fg_label_W:      calc(var(--label_W_me) * var(--label_FS));    /* uem bei Zuweisung zu fg */
    --_iv_FS:           .70;    /* em = uem */
    --_iv_LH:           calc(1 * var(--_iv_FS) * var(--min_LH) * 1em);
    --_iv_PD_LR:        var(--input_PD_LR); /* uem */
    --_fg_PD:           0.40;   /* plus _fb_BOW: der Wert ist also noch ohne die optionale Border (bei .fb) */
    --_fg_PD_U:         0.15;   /* bei MQ-A & B  auch oben (>.._OU); auch zzg. die optionale Border */
}
main form.frm:not(section.prnt.statistik > form.frm) {
    /* min-height ist abhängig von Media-Query, siehe mq.css */
    min-height: calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - var(--main_MG_OU) - 
                         var(--myCont_footer_H) - var(--Pagi_plus_H_calc));
    /* main_LA_footer_H wird hier nicht abgezogen, nur bei 2paltigem LA siehe MediaQuery E */
}

.fT {
    /*  HuM: header & menu Context 
    /   _fT wie fixedTitle-Bar */
    --demoborder:       0px solid red;
    --demoborderY:      0px solid yellow;
    --_fT_FONT:         var(--h_FONT);
    --h12_LH:           var(--basis_LH);
    --logoFaktor:       calc( 1 / 1.0);
}
.fT, #nav_shadow, #subNav_space, #rubriken {
    --_fT_transit:      top 0.5s ease;
    --SubNav_transit:   top 0.3s ease, min-height .6s ease;
}
.both_top {
    --_fT_C:            var(--_iv_C, #fff);
    --_fT_BO_U_design:  calc(1em * var(--nav_BO_U)) solid var(--_fT_C);
    padding:            0 calc( var(--x_MG_PD_LR) + env(safe-area-inset-right)) 
                            0 calc( var(--x_MG_PD_LR) + env(safe-area-inset-left));
}

.btn {
    --_btn_BXSH_xy:     .1em;
    --_btn_BXSH_w:      .3em;
    --_btn_BXSH_hi_C:   #fff8;
    --_btn_BXSH_lo_C:   #0007;
}

main {
    --env_LR:           calc( env(safe-area-inset-left) + env(safe-area-inset-right) );
}
#main_layout {
    transition:         opacity .5s, display .5s;
    opacity:            1;
    display:            grid;
    transition-behavior: allow-discrete;
    --MainLA_grT:       auto 1fr var(--main_LA_footer_H)  / minmax(0, 1fr);
    --MainLA_grTareas:  "cont"
                        "side"
                        "foot";
}
#main_layout.off {
    opacity:            0;
    display:            none;
}
#myContent {
    --myCont_grT:       1fr var(--myCont_footer_H) / minmax(0, 1fr) ;
    --myCont_grTareas:  "my_c"
                        "my_f";
}
#main_layout.noSB {
    --MainLA_grTareas:  "cont ."
                        "foot .";
    grid-template-columns: 5fr 1fr;
} 
article.home > h1 {
    --A_h1_FS:          1.4;
    --B_h1_FS:          1.6;
    --C_h1_FS:          2.0;
    --D_h1_FS:          2.20;
    --E_h1_FS:          2.4;
    --F_h1_FS:          2.5;
}


figure.userdata {
    /*  negativer margin-left 
    /   kann bis über den linken Rand hinaus gestellt werden */
    --_home_figure_gap: 0.4em;
    --_home_img_BO_PD:  0.4em;
    --_home_img_BO_W:   calc(var(--h_BOW) * 1em);
    --_home_img_W:      2.75em;  /*  nur das Bild allein */
    --_home_img_PD_W:   calc( var(--_home_img_BO_PD) - var(--_home_img_BO_W) );
    --_home_imgFrame_W: calc( var(--_home_img_W) + (2 * var(--_home_img_BO_PD)) );
    --Frame_shadow:     0.1em 0.1em 0.2em #000C,
                        -0.1em -0.1em 0.2em #fff;
    --img_shadow:       inset -0.1em -0.1em 0.2em #fff, 
                        inset 0.1em 0.1em 0.2em #000c, 
                        0.2em 0.2em 0.3em #000c, 
                        -0.1em -0.1em 0.3em #fff;
    flex-flow:          row;
    column-gap:         var(--_home_figure_gap);
    position:           relative;
}

article.home figure.userdata {
    --_home_img_W:      1.8em;
    --_home_img_BO_PD:  0.2em;
}

figure.userdata::before {
    content:            "";
    width:              var(--_home_img_W);
    height:             var(--_home_img_W);
    margin-top:         var(--_home_img_BO_PD);
    margin-left:        var(--_home_img_BO_PD);
    /*  abgeschaltet: 
    /   >   box-shadow:         var(--Frame_shadow); */
    position:           absolute;
    box-sizing:         border-box;
}
figure.userdata a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
figure.userdata > img {
    background-color:   var(--max_light_C);
    width:              var(--_home_imgFrame_W);
    /*  von https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/
    /       damit wird das Bild ggf auf Quadrat beschnitten */
    display:            block;
    aspect-ratio:       1 / 1;
    object-fit:         cover;
    /* margin-left:        calc( -1 *  (var(--_home_img_BO_PD) + var(--_home_img_W) + var(--_home_figure_gap)) ); */
    /*  abgeschaltet: 
    /   >   box-shadow:         var(--img_shadow); */
    padding:            var(--_home_img_PD_W);
    /*  das war mal für Account gedacht, aber wirkt nicht mehr:
    /   >   width: var(--_fg_label_W); */
    align-self:         flex-start;
    border-radius:      calc( 1em * var(--article_BO_radius) );
    /*  transparente Border-Colr: var(--hx_BGC) */
    border:             var(--_home_img_BO_W, .4) solid var(--h_BO_L_C);
    order:              1;
}