@charset "utf-8";

/* --------------------
/   das komlette Design für ein Projekt:
/   zuvor wird geladen:
/
/   * schema_fullFeatured_456.css mit
/       den wichtigsten `:root` Angaben:
/       - Farbangaben
/       - Schriftarten & Styling
/       - Font-Sizes
/       - Margins und Paddings
/   * master.css
/       - Media-Queries
/       - Berechnungen zu den `:root`-Variablen
/       - Einstellungen der »reinen« HTML-Text-Elemente
/           (Zuweisung der Variablen)
/           # h1-h6
/           # p, pre, blockquote..
/           # Listen
/       - body (als parent-Element)
/           aber keine anderen Eltern-Elemente (article, section..) */

/* --------------------
/   Hier geht es um:
/* --------------------
/
/   * Das Elternelement für Text-Festlegungen vom master.css
/       - was soll es sein (article, section, main)
/       - was soll es sein
/
/   * weitere Elternelmente
/       - header, nav
/       - footer
/       - main
/       - aside
/
/   * Projekt-Layout (insgesamt)...

/* --------------------
/   Vorab:
/   Projekt-Variablen:
/* -------------------- */
:root {
    --section_mobile_BGC: #ddd;
    --section_min768_BGC: #f5b198;
    --section_BGC:      var(--section_mobile_BGC);
    /* --------------------
    /   `main_MG_OU` soll wie `nav_H` sein! Wert ist aber in em festgelegt und auf 
    /   `body > header > nav` bezogen. Hier wird aber Bezug auf 
    /   `body > main` benötigt: somit muss die FS dafür umgerechnet werden
    /   > d.h. `var(--nav_FS)`(in em) hinein und `--main_FS` rausrechnen (bei header_FS: nicht festgelegt = 1rem): */
    /*  alt: --main_MG_OU: var(--nav_H); */
    /*  nochmal neuer: jetzt ist nav_H (absolut) über Einheit `1rem` definiert */
    --main_MG_OU:       var(--nav_H);
    --all_menu_H_calc:  calc( var(--Pagi_plus_H_calc) + var(--SubNav_space_H_calc) + var(--main_MG_OU) );
}
.prnt li {
    --half_MG_OU_Calc: calc( var(--MG_OU) * 0.5em );
}
@media screen and (min-width: 768px) {
    :root {
        --section_BGC: var(--section_min768_BGC);
    }
}
.prnt li {
    margin-top: var(--half_MG_OU_Calc);
    margin-bottom: var(--half_MG_OU_Calc);
}
.prnt li pre {
    /* gehört in master */
    margin: 0;
}

.prnt {
    /* --------------------
    /   Listen können eine vertikale Linie erhalten
    /   als marker für die Listenelemente in erster Ebene.
    /   Grund: Listenpunkte sind nicht eingerückt per default
    /   damit ist nicht genau erkennbar wann die Liste zu Ende ist */
    --marker_li_BW_L:   0.3;
    --marker_li_PD_L:   1.0;
    
    /* --------------------
    /   parent = article
    /* -------------------- */
    /* --------------------
    /   parent-PD_L zuweisung an article:
    /   d.h. die Texte sind in article-Tags eingebunden 
    /   denbar wären auch: section, main, body als parent für PD_L */
    /* --------------------
    /   article_FS muss nicht mehr definiert werden
    /   Grund: wird unten jetz per parent_FS zugewiesen 
    /   (z.B.:  _normal_FS, _kleiner_FS) */
    --article_PD_L: var(--parent_PD_L, 2);
    --article_PD_R: var(--parent_PD_R);
    --article_BO_radius:    var(--main_BO_radius);
    /* --------------------
    /   article-Element: Border-top und bottom darf nicht 0 sein,
    /   wegen der runden Ecken ... */
    --article_BO_OU:    0.1;
    /* --article_BGC:      var(--semi_light_C); */
    /* nicht verwendet: */
    --article_Ende_C:   var(--hx_BGC);   /* darf nicht #fff sein ! */
}

/* --------------------
/   neuer Grid-Container
/   #main_layout 
/* -------------------- */
/*  direkt unter main mit margin-LR 
/   früher war das `section.infos, section.myInputs` */
#main_layout {
    --MG_R_clc:         calc( env(safe-area-inset-right) + var(--x_MG_PD_LR) );
    --MG_L_clc:         calc( env(safe-area-inset-left) + var(--x_MG_PD_LR) );
    margin:             var(--all_menu_H_calc) var(--MG_R_clc) 0 var(--MG_L_clc);
    grid-column-gap:    calc( var(--grid_gap, 0.75) * 1em);
    /* row-gap muss 0 bleiben */
    grid-template:      var(--MainLA_grT);
    grid-template-areas:var(--MainLA_grTareas);
    /* --------------------
    /   kein (default-)Stretch auf ganze Höhe bei abgeschalteter Höhenangabe s.u. */
    align-items:        start;
    /* 
    padding-bottom:     calc( var(--grid_gap, 0.75) * 1em);
        Achtung die min-Höhe muss noch dazu angepasst werden ?
        calc( var(--grid_gap, 0.75) * 1em); in Form.css z135 !
    */
}
#myFormFeedback {
    grid-area:          ffb;
    width: clamp(12em, 100%, 40em);
    justify-self: end;
    margin: 1em 0;
    min-height: initial;
}
footer#main_LA_footer {
    height:             var(--main_LA_footer_H);
    grid-area:          foot;
}
footer#myCont_footer {
    height:             var(--myCont_footer_H);
    grid-area:          my_f;
    width:              100%;
}
#myContent.ohne_frm {
    --dummi:                1;
    /* eventuell sollte ich auch bei `.ohne_frm` noch ein footer-Element anfügen, oder alternativ 
       ein padding unten für etwas Abstand? Dann wäre diese höhe auch noch abzuziehen  */

    /* Und hier fehlt auch noch eine Berücksichtigung der MediaQueries:
        2spaltig: sidebar ohne min-heigth; aber content hat unten auf jeden falls main_LA_footer
                  > - var(--main_LA_footer_H));
        1spaltig: 
            vl margin-bottom
    
    */
}
#myContent {
    /* sieht so aus mit Pagination und Rubriken, dass folgendes Padding »zu viel« ist */
    /* padding-top:        calc(var(--grid_gap, 0.75) * 1em); */
    grid-area:          cont;
    /*  padding-top wie mySidebar (ohne)
    /   padding-top:        4em; */
    /*  ---------------------------
    /   Das getrennte Scrollen der 2 Grid-Items C und S wird entfernt:
    / > height:             calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - var(--main_MG_OU) );
    / > overflow:           scroll;*/

    /*  ---------------------------
    /   dieses Grid-Item (area: c) ist zugleich auch Container für  
    /   alle Artikel: (das war zuvor als section.myMD festgelegt) */
    display:            grid;
    grid-row-gap:       calc( var(--grid_gap) * 1em);
    /* ###### 2023-02-05 auskommentiert */
    /* |||(MQ-A oder egal) Übersichts-Template darf folgende 3 Zeilen NICHT haben */
    /* grid-row-gap:       0;
    grid-template:      1fr var(--myCont_footer_H) / minmax(0, 1fr) ;
    grid-template-areas:var(--myCont_grTareas);  */
    /* ###### */
    align-content:      start;          /* oben statt ge-stretched auf min-height*/
    justify-items:      end;
    background-color:   transparent;
    /*
    width:              clamp(16em, calc( 100% - var(--env_LR) - 2 * var(--x_MG_PD_LR)), 40em);
    */
}
#myContent.mit_frm {
    /* |||MQ-A bei Formularen braucht die 3 aber schon */
    grid-row-gap:       0;
    grid-template:      1fr var(--myCont_footer_H) / minmax(0, 1fr) ;
    grid-template-areas:var(--myCont_grTareas);
}

#mySidebar {
    /* padding-top:        calc(var(--grid_gap, 0.75) * 1em); */
    /* background-color:   #59b4; */
    display:            grid;
    justify-items:      stretch;
    align-content:      start;
    gap:                calc( var(--grid_gap, 0.75) * 1em);
    /* die sidebar braucht keine min-height 
        entweder sie hat Platz neben der min-heigth von myContent (bzw .frm falls vorhanden)
        oder sie ist einfach größer */
    /* Ausnahme: unterhalb des myContent! Gehört in mq.css */
    grid-area:          side;
    /*  Höhenbegrenzung für sticky braucht noch padding o margin-top: 
    /   jetzt aber doch besser ohne Höhenangabe (zus mit `align-items: start;` im Container s.o.)
    height:             calc( var(--newVH, 1vh) * 100 - var(--SubNav_space_H_calc) - 
                                var(--main_MG_OU) - var(--MG_OU, 0.75) * 1em );
    */
/*  versuch: nur noch Abkürzungen
*/
    position:           -webkit-sticky;
    position:           sticky;
    /* sticky braucht top, war aber zu viel: + var(--MG_OU, 0.75) * 1em entfernt */
    /* top:                calc( var(--all_menu_H_calc) - var(--MG_OU, 0.75) * 2em ); */
    /* nach Neuberechnung von  all_menu_H_calc: wird aktulisiert da Sticking 
       in der Sidebar zu weit hoch gerutscht ist : jetz bleibt es starr! */
    /*  versuch: nur noch Abkürzungen
    */
    top:                var(--all_menu_H_calc);
    margin-bottom:      var(--main_LA_footer_H);
    /*  ------------------------------------
    /   Nicht sinnvoll innerhalb von `prnt`:
    /       padding:            4em 0 1em .4em;
    /       border-left:        1.0em solid var(--main_D1_C); */
}
/*  ------------------------------------
/   Sidebar ist jetzt per `prnt` Klasse oder anders festgelegt
/       #mySidebar.neg_BG > * {
/           color:              var(--_fT_BGC);
/       } */

/* --------------------
/   Übertragungen aus
/   altem master.css:
/* -------------------- */

body > header, body > footer {
    background-color: var(--header_BGC);
    /* --------------------
    /   kein PD_LR für meine Texte
    /   denn H-Hintergründe sollen bis zum
    /   Parent-Rand laufen:
    /   > Texte haben eigenes PD_R 
    padding: var(--default_MG_OU_Calc) 0;
    */
}
body > main {
    /* --------------------
    /   ergibt xx px für 1em im Übergeprdneten Element
    /   d.h. meine neue Einheit uem ≘ xx px
    /   (also nich rem sondern uebergeordnetes em) */
    font-size: calc(var(--main_FS) * 1em);
    margin-top: var(--main_MG_OU);
    /* border: 2px dashed blue; */
    /* max-width: 40em; */

    /* flexible Breitenanpassung jetzt auf das Unterelement 
    /   section.myMD verschoben s.u. */
}
/* Versuch */
/*  Hintergrund -Bild 
body {
    background-image: url("../html5up-highlights/images/IMG_0375.jpg");
    background-size: cover;
}
*/
    
/* -------------------- */
div.bezug_uem {
    /* --------------------
    /   ein kleines div zur Demo
    /   der Größe 1em */
    float: left;
    height: 1em;
    background-color: var(--dark_saturate_C);
    margin: 0 1em 0 calc( 1em * var(--h_BO_L_and_h_PD_L) );
}

p[id] {
    /* --------------------
    /   CSS-Info in p ganz oben im Projekt */
    font-family: var(--extra_FONT);
    text-indent: -9em;
    margin-left: 9em;
}
p[id]::after {
    font-family: var(--mono_FONT);
    color: var(--h6_C);
    font-weight: bold;
    white-space: pre-wrap;
}
p#info_mediaQuery::after {
    content: var(--p_INFO);
}
p#h_font::after {
    content: var(--h_FONT);
}
p#base_font::after {
    content: var(--basis_FONT);
}

/* 
.prnt p {
    white-space: pre-wrap
}
   -------------------- */

/* -------------------- */

/*  Artikel-Nr absolut 
/   (jetzt ausgeblendet)
/
    article::before {
        position: absolute;
        right: var(--x_MG_PD_LR);
        top: 0.5em;
        content: "Artikel-" counter(cntArticle);
        color: white;
        text-align: right;
    }
*/
.kap {
    display: inline-block;
    display: none;
    text-align: right;
    color: var(--dark_saturate_C);
    /* --------------------
    /   Das span-Element mit den optionalen Kapitelnummern
    /   hat eine feste Breite und endet eine übliche Padding-Breite
    /   (normal-Padding ist in `h_span_PD_R` festgelegt)
    /   vor dem Text: der Abstand wird mit einem rechten 
    /   Padding in diesem spanfestgelegt. */
    padding-right: calc(1em * var(--h_span_PD_R)/( var(--_kap_FS)) );
}
span.nr4h1 {
    font-size: calc(var(--_kap_FS) / var(--h_FS) * 1em);
    width: calc( 1em * var(--h_span_indent) / var(--_kap_FS));
}
span.nr4h2 {
    font-size: calc(var(--_kap_FS) / var(--h_FS) * 1em);
    width: calc( 1em * var(--h_span_indent) / var(--_kap_FS));
}
span.nr4h3 {
    font-size: calc(var(--_kap_FS) / var(--h_FS) * 1em);
    width: calc( 1em * var(--h_span_indent) / var(--_kap_FS));
}
span.nr4h4 {
    font-size: calc(var(--_kap_FS) / var(--h_FS) * 1em);
    /* --------------------
    /   ohne Border bei h4 (h4_mitBO_L=0)
    /   ist das span um diese Border breiter
    /   sonst (mit Border) nur 2pd [parent_PD_L_and_h_PD_L] 
    /       + 0*border [-1*(var(--h4_mitBO_L)-1) * var(--h_BO_L, 0)]*/
    width: calc( 1em * var(--h_span_indent) / var(--_kap_FS));
}
span.nr4h5 {
    font-size: calc(var(--_kap_FS) / var(--h_FS) * 1em);
    width: calc( 1em * var(--h_span_indent) / var(--_kap_FS));
}
/* -------------------- */

.prnt form,
.prnt > p {
    /* --------------------
    /   Elternelement ist article in dieser CSS-Datei
    /   > dafür sind die Texte eingerichtet
    /   > muss hier also sein! */
    padding-left: calc( 1em * var(--h_BO_L_and_h_PD_L));
    /*  meine Beispiel-HTML hat aber auch Texte in 
    /       section, header und footer 
    /   allerdings wäre es für header und footer richtiger,
    /   dort »insgesamt« ein PD_L einzurichten (hier unten)
    /   dazu braucht es dann aber ein »Text-Reset«*/
}

/* --------------------
/   Einrückung von Listen u.a.
/   zumindest im speziellen Elternelement (article) 
/   macht aber vielleicht auch für mehr noch Sinn */

/*
section > ol, section > ul, section > dl,
   main > ol,    main > ul,    main > dl,
    div > ol,     div > ul,     div > dl,
*/
.prnt > ol, .prnt > ul, .prnt > dl {
    margin-left: calc( 1em * var(--h_BO_L_and_h_PD_L));
     /* PD_L bei Blockquote NICHT auf 0 setzen
     /  daher extra für die anderen: */
    padding-left: calc( 1em * var(--listen_PD_L, 0.4) * var(--einger_LiMarker));
}
.prnt > blockquote {
    margin-left: calc( 1em * (var(--h_BO_L_and_h_PD_L) + var(--bq_indent_LR, 2)) / var(--bq_FS) -
        ( 1em * (var(--h_span_PD_R) + var(--bq_BOW_L, 0.5)) / var(--bq_FS) ) * var(--mit_LiMarker_L) );
    margin-right: calc( 1em * var(--bq_indent_LR, 2) );
}

/* --------------------
/   »Text-Reset« - Beispiel: */
    body > footer {
        /*  Beispiel: */
        padding: 2em;
        background-color: var(--max_light_C);
    }
    body > main > section:last-child {
        /*  Hintergrund -Bild */
        background-image: url("../html5up-highlights/images/pic04.jpg");
        background-size: cover;
    }

    .marker_BO_L {
        /* --------------------
        /   mit dieser Klasse zu einem `ul`
        /   kann man links neben einer ol-Liste (zB)
        /   eine Border Markierung setzten */
        border-left: calc( 1em * var(--marker_li_BW_L) ) solid var(--main_C);
        padding-left: calc( 1em * var(--marker_li_PD_L) ) ;
        /* --------------------
        /   Berechnung (von hinten):
        /   Marker soll Text nicht verdreängen, daher zusätzliches ML um Border-Dicke (marker_li_BW_L)
        /   PD_L damit Marker links vor die Listen-Punkte kommt; damit Text aber bleibt 
        /       > von M_L abziehen
        /   h_BO_L_and_h_PD_L war der ursprünglich M_L im css s.o.: article > ul
        */
        margin-left: calc( 1em * (var(--h_BO_L_and_h_PD_L) - var(--marker_li_PD_L) - var(--marker_li_BW_L)) );
    }
/* -------------------- */

/*
main > pre, 
section > pre, 
*/
.prnt > pre {
    /* --------------------
    /   optional die anderen oben dazu schalten */
    margin-left: calc( 1em * var(--h_BO_L_and_h_PD_L)/var(--pre_real_FS));
}
.prnt > table {
    display:            block;
    max-width:          -moz-fit-content;
    max-width:          fit-content;
    overflow-x:         auto;
    /* white-space:        nowrap; */
}

/* --------entweder ---
.prnt > hr {
    /   Linie HR innerhalb artikel 
    /   > läuft bis ganz hinaus 
    position: relative;
    left: calc( var(--article_PD_L)/2 * -1em );
    */

    /* ------- oder -------
    /   Linie HR innerhalb artikel 
    /   > läuft nur bis artikel-Rand 
    margin-left: calc( -1em * var(--parent_PD_L, 2) );
    */
    /*  scheint falsch: 2021-04-19 :
    /       margin-right: 0;
    /   besser bis ganz hinaus: 
    margin-right: calc( -1em * var(--parent_PD_R, 0));
    */
    /*  Tip andere Linien gehen auch wie bei 
    /   marker_BO_L (s.o.) und shehe hier gleich:
    /   einfach Klasse einem p-Tag zufügen:
    /   > <p class="_dashed_line"> ... 
}
    */

    /* --------------------
    /   von master:
hr {
    border-top: 0;
    border-bottom: calc( var(--hr_BOW) * 1em ) dashed var(--hr_BGC);
    margin: calc( var(--hr_MG) * 1em ) calc(-50vw + 50%);
}
    */


.dashed_line {
    /* --------------------
    /   mit dieser Klasse zu einem `div`
    /   eine andere Trennlinie gezeigt werden
    /   Vorteil beim div: Linie steht vermittelt zwischen den Absätzen */
    border-bottom: calc( var(--hr_BOW) * 1em ) dashed var(--hr_BGC);
    margin-top:    calc( var(--MG_OU, 0.75) * 1em );
    margin-bottom: calc( var(--MG_OU, 0.75) * 1em );
    
}

.prnt + hr {
    border: none;
    /* --------------------
    /   Artikel-Trennzeichen
    /   border-top: 3px double #333;
    /   color: #333; */
    overflow: visible;
    text-align: center;
    height: 1em;
    margin: 1em;
}
.prnt + hr:after {
    content: "-—•—-";
    padding: 0 .5em;
    position: relative;
    top: -.8125em;
    color: var(--h_BO_L_C);
    /* --------------------
    /   Wenn aber body-HG oder main-HG die selbe Farbe wie
    /   h_BO_L_C ist, dann sieht man nichts daher besser */
    color: var(--hr_BGC);
}

/* --------------------
/   versch Klassen für H6-Datum:
/* --------------------*/
h6.date4h1 {--h_PD_O:       var(--h1_PD_O, 0);}
h6.date4h2 {--h_PD_O:       var(--h2_PD_O, 0);}
h6.date4h3 {--h_PD_O:       var(--h3_PD_O, 0);}
h6.date4h4 {--h_PD_O:       var(--h4_PD_O, 0);}
h6.date4h5 {--h_PD_O:       var(--h5_PD_O, 0);}
h6[class^=date4h] {
    /* --------------------
    /   margin für h6 üblicherweise 0:
    /   Grund ist die Berechnung:
    /   calc( ( var(--MG_OU) - var(--MG_OU) )/var(--h6_FS) * 1em ) 
    /   ergibt immer 0, außer bei
    /   Elementen mit abweichendem Margin wie hr (siehe unten)*/
    margin: 0;
    padding-top:    calc( 1em * var(--h_PD_O) / var(--h_FS) );
    padding-bottom: calc( 1em * var(--h_PD_U, 0) / var(--h_FS) );
}
h6.date4h3, h6.date4h4, h6.date4h5  {
    line-height: var(--h35_LH);
}
h6.date4h1, h6.date4h2  {
    line-height: var(--h12_LH);
}
h6.date4p {
    margin: 0;
    /* --------------------
    /   Berechnung: fontsize von p * basis_LH
    /   p-font-size: p__fs * 1uem
    /   1uem : (dieses) 1em / h6_FS
    /   > h6_fs * 1em * basis_LH /h6_FS = 1em * p__FS * basis_LH /h6_FS
    /
    /   + h6_FS darf nicht größer als font-size des Folge-Textes sein. */
    line-height: calc( 1em * var(--basis_LH) / var(--h_FS) );
}

/* --------------------
/   margin-top Korrektur 
/   für Heading mit Linie
/* --------------------
/   Absatz mit Linien die Strichstäre muss zum margin-top
/   dazu gerechnet werden: 
/   eigentlich geht dieBerechnung so (s.o. `margin: 0`): 
/   margin-top: 
/       calc( ( var(--MG_OU) - var(--MG_OU) 
/                 + var(--h4_BOW_O) ) / var(--h6_FS) * 1em ); */
h6.date4h1 {margin-top: calc( var(--h1_BOW_O, 0) / var(--h_FS) * 1em );}
h6.date4h2 {margin-top: calc( var(--h2_BOW_O, 0) / var(--h_FS) * 1em );}
h6.date4h3 {margin-top: calc( var(--h3_BOW_O, 0) / var(--h_FS) * 1em );}
h6.date4h4 {margin-top: calc( var(--h4_BOW_O, 0) / var(--h_FS) * 1em );}
h6.date4h5 {margin-top: calc( var(--h5_BOW_O, 0) / var(--h_FS) * 1em );}

/* --------------------
/   virtuelle Fontsize 
/   für jedes H6-date
/* --------------------
/   geht nicht ::before (da anders verwendet)
/   egal: ist immer nur einzeilig */
h6[class^=date4h]::after {
    content: "";
}
h6.date4h1::after {
    font-size: calc(var(--h1_FS, 2.25)/var(--h_FS) * 1em);
    line-height: var(--h12_LH);
}
h6.date4h2::after {
    font-size: calc(var(--h2_FS, 1.8125)/var(--h_FS) * 1em);
    line-height: var(--h12_LH);
}
h6.date4h3::after {
    font-size: calc(var(--h3_FS, 1.25)/var(--h_FS) * 1em);
    line-height: var(--h35_LH);
}
h6.date4h4::after {
    font-size: calc(var(--h4_FS, 1.0)/var(--h_FS) * 1em);
    line-height: var(--h35_LH);
}
h6.date4h5::after {
    font-size: calc(var(--h5_FS, 0.875)/var(--h_FS) * 1em);
    line-height: var(--h35_LH);
}

h6.date4p::after {
    content: "";
    background-color: green;
    font-size: calc( 1em / var(--h_FS));
}

/* --------------------
/   erstes Element (im article): 
/   Überschrift mit Datum (davor)
/* --------------------
/   margin darf nicht 0 sein, 
/   denn oben fehlt der margin vom vorigen Element 
/   (im master.css ohne Klassen wird das Thema anders gelöst) */
h6.date4h1:first-child {
    margin: calc( ( var(--MG_OU, 0.75) + var(--h1_BOW_O, 0) ) /var(--h_FS) * 1em ) 0 0 0;
    line-height: var(--h35_LH);
}
h6.date4h2:first-child {
    margin: calc( ( var(--MG_OU, 0.75) + var(--h2_BOW_O, 0) ) /var(--h_FS) * 1em ) 0 0 0;
    line-height: var(--h35_LH);
}
h6.date4h3:first-child {
    margin: calc( ( var(--MG_OU, 0.75) + var(--h3_BOW_O, 0) ) / var(--h_FS) * 1em ) 0 0 0;
    line-height: var(--h35_LH);
}
h6.date4h4:first-child {
    margin: calc( ( var(--MG_OU, 0.75) + var(--h4_BOW_O, 0) ) / var(--h_FS) * 1em ) 0 0 0;
    line-height: var(--h35_LH);
}
h6.date4h5:first-child {
    margin: calc( ( var(--MG_OU, 0.75) + var(--h5_BOW_O, 0) ) / var(--h_FS) * 1em ) 0 0 0;
    line-height: var(--h35_LH);
}
h6.h6id::before {
    content:    "ID:";
}
h1, h2, h3, h4, h5, h6 {
    /* ? (übernommen) */
    cursor: text;
}

/* --------------------
/   parent-Element in diesem projekt: 
/   ist `.prnt` nicht mehr `article` !
/* --------------------
/   hierfür ist dieses spezielle Design 
/   ausgerichtet (Farben Abstände ...)
/   weitere parent-Elemente sind aber möglich,
/   sie müssen hier nur angelegt und gestaltet werden */
/* --------------------
/   spezielle Variablen hierfür 
/   sind oben im :root angelegt
/* -------------------- */

.prnt {
    --MG_clc:           calc( var(--MG_L_clc) + var(--MG_R_clc) );
    --abstaende_calc:   calc(1em * (var(--abstand_L) + var(--abstand_R)));
    /* --------------------
    /   article hat das `1em` geerbt von main.
    /   Damit ist --article_FS automatisch immer 1em;
    /   margin kann hier somit vereinfacht berechnet werden. 
    /   aber: Das stimmt wohl nicht, denn es gibt evtl. 
    /   abweichendes `article_FS`,
    /   deshalb muss font-size eingestellt werden */
    border-radius: calc( 1em * var(--article_BO_radius) ); /* in em: wird kleiner mit kleinerer FS*/
    margin: 0;
    border-top: calc(var(--article_BO_OU)*1em) solid transparent;
    border-bottom: calc(var(--article_BO_OU)*1em) solid transparent;
    background-color: var(--article_BGC);
}
#myContent > .prnt {
    /* width: min(100vw - var(--MG_clc), var(--text_max_W) + var(--abstaende_calc)); */
    width:      calc(100vw - var(--MG_clc));
    max-width:  calc(var(--text_max_W) + var(--abstaende_calc));
}
.prnt > div.fin::after {
    color: var(--lastChild_fas_C); /* nicht so dunkel wie Text */
    font-family: "Font Awesome 5 Free";
    content: " \f0c8";
    font-weight: 900; /* für solid, sonst offen */
    font-size: .75em;
    font-style: normal;
}
/* beim TOC in der Sidebar kein FAS-Symbol 
.prnt.toc > *:last-child::after {
       wieso eigentlich 
       content: "";
    }
*/

.normal {
    font-size: calc(var(--_normal_FS) * 1em);
    background-color: var(--article_BGC);
}
.kleiner {
    font-size: calc(var(--_kleiner_FS) * 1em);
    background-color: var(--article_BGC);
    width: calc(100% * var(--_kleiner_FS) / var(--_normal_FS) );
    margin-left: auto;
    margin-right: auto;
}

.prnt > h1 {
    --extra_space_H1_NR: 0.25;
    text-indent: calc( -1em * (var(--h_span_indent) + var(--extra_space_H1_NR)) * var(--mitKapitelNr, 0) / var(--h_FS));
}
.prnt > h1::before {
    font-size: 1em;
    width: calc( 1em * var(--h_span_indent) / ( var(--h_FS) ));
    padding-right: calc( 1em * (var(--h_span_indent) + var(--extra_space_H1_NR)) / var(--h_FS));
    /* Aktivierung per media-query (ab 576px) in mq-Datei: 
        content: "" counter(z1); (= var(--cntZ1)) */
    background-color: transparent; /* var(--body_BGC);*/
    color: var(--max_light_C);
    text-align: right;
    text-indent: inherit;
    /* unbrauchbar :
    /    vertical-align: [+/-] %; */
}

/* language label: oberhalb 
/   redesign deckend */
div > div.prism-show-language > div.prism-show-language-label,
.prnt div.code-toolbar > .toolbar {
    background-color: var(--hi_light_C);
    top: -.75em;
    right: calc( 0.6em + 1em * ( var(--h_PD_R, 0) / var(--pre_real_FS) ));
    border: .1em solid var(--pre_BOC);
    opacity: 1;
    border-radius: .4em;
    /* oder als Fähnchen: 
    border-radius: .4em 0 .4em 0;
    */
}

em {
    letter-spacing: var(--h5_LSP);
    letter-spacing: 0.06em;
}
strong {
	letter-spacing:0.09em;
	padding:0 0.1em;
}
i {
	font-family:Andada SC;
	font-style:normal;
}
mark {
	padding: 0 .1em;
}

pre {
    opacity: 1;
}

section.status_bar { 
    min-height: calc( var(--newVH, 1vh) * 8 );
    background-color: indigo;
}
#myContent > p, #myContent > h1, #myContent > h3 {
    /* --------------------
    /   »sections« stehen auf dem body-HG und sind Texte aller Art: 
    /   zB H1, H3, p. alles andere ist tiefer und wird wegen `>` 
    /   nicht vererbt ----- */
    color: var(--_iv_C, #faa);
}

section.myCSS, section.myNote {
    background-color:       var(--article_BGC);
    margin:         0;
    padding:        0 calc( env(safe-area-inset-right) + var(--x_MG_PD_LR)) 
                    0 calc( env(safe-area-inset-left) + var(--x_MG_PD_LR));
}
section.myCSS > pre, section.myNote > pre {
    /* von myMD.css */
    font-size: calc(var(--code_FS) * 1em);
    overflow: auto;
    padding: 6px 10px;
}

section.erledigt {
    border:         2px dashed firebrick;
    background-color:       #eee;
    padding:        1em;
    opacity:        .5;
    display:        block;
    width:          100%;
    margin:         1em 0;
}
section.erledigt::before {
    content:        "erledigt!";
    border:         2px dashed firebrick;
    background-color:       #fff;
    padding:        .1em .3em;
    margin:         0;
    margin-top:     -2em;
    position:       absolute;
    font-weight:    700;
    font-family:    var(--extra_FONT);
}
.erledigt > h4 {
    border-left:    0;
}
.erledigt > h4::before,
.erledigt > h3::before {
    content:        "";
}

.prn > p, .prn ul > li, .pre > h1 {
    overflow:       hidden;
}
:not(pre) > code {
    /* --------------------
    /   soll jetzt immer gelten, denn auch ohne display: inline-flex
    /   stimmt die LH bei code im Text nicht > in master.css einbauen:
    /   (Logik unklar: empirisch festgestellt) */
    line-height:    calc( 1 / var(--basis_LH) );
    /*  > Verbesserung auch bei H1,H5 festgestellt */
}
p > code, mark > code, li > code, dt > code, dd > code {
    /* --------------------
    /   ursprünglich: :not(pre) > code */

    /* --------------------
    /   Problem: auch nur ganz dünne border verdrängt vertikal
    /   daher besser vielleicht: 
    /       border: initial;
    /   aber mit ausdrücklicher Höhe s.u. geht es trotzdem gut ? */

    display:        inline-flex;
    max-width:      100%;
    /* geht bei inline-grid oder inline-flex nicht:
    /   text-overflow: ellipsis; */
    /* overflow-x:     scroll; ist obsolet wegen obigem
       display:        inline-flex;
    */
    overflow-y:     hidden;
    /* damit das nicht vom H mit Kap-Nr geerbt wird:
    /   zwingend eforderlich */
    text-indent:    initial;
    /* besser als opacity: 0.75 für das ganze code Element
    /   nur Hintergrund 75% weiss: */
    background-color:       #ffffffc0;
    /* ausserdem scheint somit auch die Marker-Farbe (gelb)
    /   durch */

    /* --------------------
    /   zum Ende eines Satzes wäre denkbar: 
    /       overflow-y: scroll;
    /   so könnte der Inline Code auch mehrzeilig sein
    /   geht aber nicht per Markdown */

    /* --------------------
    /   wenn die Höhe ausdrücklich festgelegt wird, dann kann es wohl
    /   besser funktionieren, wenn wie hier die Vererbung der LH 
    /   überschrieben wird und die vert. Ausrichtung per padding-top gem wird */ 

    /*  LH sehr niedrig empirisch für p passend!
    /   mit 1:p_LH = 0,7410.. */
    line-height:    calc( 1 / var(--basis_LH) );
    height:         calc( 1em * var(--basis_LH) );
    padding-top:    0.3em;
}

mark {
    padding:        0 0.2em;
    border-radius:  .2em;
    color:          #0009;
}
h1 + h5, h1 + h6 + h5,
h2 + h5, h2 + h6 + h5 {
    /* ----------------
    /   steht im master-css als italic
    /   sollte dort vielleicht schon besser »normal« sein */
    font-style:     normal;
}
h5 {
    font-weight:    600;
}

h5 em {
    /* ---------------
    /   wegen h5 uppercase und metronic-Schrift braucht es zur 
    /   Verdeutlichung ein fetteres `strong` und als Kompromiss zu 
    /   `h1+h5` oder `h2+h5` vs `h5 em: bolder (900)
    /   auch die somit fest für alle h5: 600er */
    font-weight:    600;
}
h5 strong {
    font-weight:    900;
}
h5.mail_adr {
    text-transform:     lowercase;
}

/* ----------------------
/   Markdown-Brand-Klasse
/* ---------------------- */
span.brand, span.brand.btn.b_sm {
    color: var(--_brand_C);
    font-family: var(--extra_FONT);
    font-weight: bolder;
}
h1 > span.brand,
h2 > span.brand,
h3 > span.brand,
h4 > span.brand {
    font-style: italic;
    font-weight: 600;
}
span.abk_name, span.abk_name.btn.b_sm {
    color:          var(--dark_gray_C);
    font-family:    var(--h_FONT);
}

span.ttec, span.ttec.btn.b_sm {
    font-family:    var(--mono_FONT);
    color:          var(--main_C);
    /* fett und kursiv sind zusätzlich ganz normal machbar */
    font-weight:    bolder;
}
span#code_btn > code {
    font-weight: bolder;
}

/* --------------------
/   Definitionsliste
/* --------------------
/
/   ein Beispiel : ruckzuck (.dict) */
.dict > dt {
    font-weight:    600;
    color:          var(--main_C);
    text-decoration:        underline;
    margin-top:     var(--default_MG_OU_Calc);
}
.dict > dd {
    border-bottom:  var(--max_light_C) .1em dashed;
    font-family:    var(--extra_FONT);
    font-size:      calc(1em * var(--_15zu16));
    margin-top:     .15em;
    line-height:    var(--h35___LH);
}
.dict > dt::after {
    content:        ":";
}
.dict > dd > span {
    font-family:    var(--mono_FONT);
    font-size:      .8em;
    opacity:        0.8;
    font-weight:    300;
}
.dict > dd > span::before {
    content:        "[";
}
.dict > dd > span::after {
    content:        "] ";
}
/* --------------------
/   2 Klassen für span-Elemente
/   im dd */
.lang {
    /* language */
    color:          #59b;
}
.bed {
    /* Bedeutung, Beschreibung */
    color:          firebrick;
}

/* --------------------
/   Definitionsliste
/* --------------------
/
/   eine Kope von obigem dict: 
/   abgeändert für Abkürzungen in der Sidebar */

dl.dic_abk {
    display: grid;
    grid-template: auto / 8ch 1fr;
    font-size: calc( 1em * var(--_14zu16));
}
    
.dic_abk > dt {
    font-weight: 500;
    color: var(--main_C);
    /* text-decoration: underline;  */
    /* margin-top: var(--default_MG_OU_Calc); */
    font-family: var(--mono_FONT);
    text-align: right;
}
.dic_abk > dd {
    border-bottom:  var(--max_light_C) .1em dashed;
    font-family:    var(--extra_FONT);
    font-size:      calc(1em * var(--_15zu16));
    margin-top:     .15em;
    line-height:    var(--h35___LH);
    --listen_PD_L:  .5;
    /* aus master.css 
    margin-left: calc( 1em * var(--listen_PD_L, 0.4) );
    */
}
.dic_abk > dt::after {
    content:        ":";
}
.dic_abk > dd > span {
    font-family:    var(--mono_FONT);
    font-size:      .8em;
    opacity:        0.8;
    font-weight:    300;
}
.dic_abk > dd > span::before {
    content:        "[";
}
.dic_abk > dd > span::after {
    content:        "] ";
}

/* --------------------
/   Definitionsliste
/* --------------------
/
/   noch ein Beispiel : .inlineDL */
/*
.inlineDL {
    font-family: var(--extra_FONT);
}
.inlineDL > dd + dt::before {
    content: '\A';
    white-space: pre-wrap;
}
.inlineDL > dd + dt {
    clear: left;
}
.inlineDL > dd + dd::before {
    content: ', ';
}
.inlineDL > dt {
    display: block;
    float: left;
    width: 14ch;
}
.inlineDL > dd {
    display: inline-block;
    font-family: var(--mono_FONT);
    color: var(--h6_C);
    font-weight: 700;
    text-align: right;
    width: 6ch;
}
*/
/* --------------------
/   neuer Versuch */
.inlineDL {
    /* Einheit 1em */
    --dt_dd_Abst: 1;
    font-family: var(--extra_FONT);
}
.inlineDL.post_anz {
    display:            grid;
    grid-template:      auto / 3fr 1fr;
}
.inlineDL.post_anz > dt {
    text-align:         right;
}
#screeninfo.inlineDL  {
    --term_W: 8;
}
.inlineDL dt {
    float: left;
    width: calc(var(--term_W) * 1em);
    overflow: hidden;
    clear: left;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inlineDL dd {
    /* abhängig von dt-width s.o. 14ch + 4ch */
    margin-left: calc((var(--term_W) + var(--dt_dd_Abst)) * 1em);
    font-family: var(--mono_FONT);
    color: var(--h6_C);
    font-weight: 700;
    width: calc(var(--term_W) * 1em /2 );
    text-align: right;
}
.inlineDL dd:after {
    clear: both;
}
.inlineDL dd:after, .inlineDL dd:before {
    display: table;
    content: " ";
}

.myNote.myBgImg {
    min-height:         calc( var(--newVH, 1vh) * 100 );
    padding-top:        calc( var(--newVH, 1vh) * 12 );
    padding-bottom:     calc( var(--newVH, 1vh) * 24 );
}
.myBgImg em {
    color: #f3ab04;
}

/*
main {
    padding: 1em;
    position: absolute;
    top: calc( var(--newVH, 1vh) * 10 );
    height: calc( var(--newVH, 1vh) * 80 );
    overflow: scroll;
}
*/

#logo img {
    height: 1em;
}


/* --------------------
/   Feedback-Klassen (Flags)
/   a_style:    satt und kräftig (a wie alpha)
/   b_style:    hell und blaß (b wie bright oder blaß)
/   c_style:    abgedunkelt (c wie carbon)
/* -------------------- */
.succ {
    --fb_a_style_C:     var(--_fb_1a_C);
    --fb_b_style_C:     var(--_fb_1b_C);
    --fb_c_style_C:     #08674f;
    font-weight:        500;
}
.know {
    --fb_a_style_C:     var(--_fb_0a_C);
    --fb_b_style_C:     var(--_fb_0b_C);
    --fb_c_style_C:     var(--main_D2_C);
}
.warn {
    --fb_a_style_C:     var(--_fb-1a_C);
    --fb_b_style_C:     var(--_fb-1b_C);
    --fb_c_style_C:     var(--medium_warm_C);
}
.erro {
    --fb_a_style_C:     var(--_fb-2a_C);
    --fb_b_style_C:     var(--_fb-2b_C);
    --fb_c_style_C:     #891a1a;
    font-weight:        500;
}
.prim {
    --fb_a_style_C:     var(--main_D2_C);
    --fb_b_style_C:     var(--main_D2_C);
}
.scnd {
    --fb_a_style_C:     var(--main_D2_C);
    --fb_b_style_C:     var(--_fb-1b_C);
    --fb_c_style_C:     var(--hover_C);
}
.fltr {
    /* --fb_a_style_C:     var(--light_C); */
    --fb_a_style_C:     var(--near_gray_C);
    --fb_b_style_C:     hsl(210, 21%, 75%);
    /* --fb_c_style_C:     hsl(225, 8%, 39%); */
    --fb_c_style_C:     var(--main_C);
}
#gruppen_filter > label.fltr {
    /* test mit klasse .fltr war besser, da kein :hover s.u.
       bei: .btn:not(.prim, .fltr):hover */
    --fb_a_style_C:     var(--main_C);
    --fb_b_style_C:     var(--medium_warm_C);
    --fb_b_style_C:     hsl(210, 21%, 75%);
    --fb_c_style_C:     var(--deep_warm_C);
    --fb_c_style_C:     var(--dark_and_warm_C);
}

.fltr
.prim,
.scnd,
.erro,
.warn,
.know,
.succ {
    /* Formular fb: */
    color:              var(--fb_a_style_C);
    background-color:   var(--fb_b_style_C);
}

.neg_BG > * {
    color:              var(--_iv_C);
    margin-top:         0;
    margin-bottom:      0;
    background-color:   var(--fb_a_style_C);
}

div#col4 {
    /* col4 = 4 Spalten & 4 Faben :-) */
    display: grid;
    grid-template: 3em / repeat(4, 1fr);
}
div[class^="fb"] {
    border-width:       calc( var(--_fb_BOW) * 1em );
    border-style:       var(--_fb_BO_style);
    display: inline-grid;
    place-items: center;
}
/*  
div[class^="fb"]:hover {
    opacity: .8;
}
*/

/* ein DIV mit fester Größe und Hintergrundfarbe leicht transparent */
#falscher_farbname {
    background-color:   var(--semi_light_C);
    border:             .3em solid #f3ab04;
    padding:            1em;
}

section.myNote, section.myCSS {
    padding-top:        3em;
    padding-bottom:     1em;
}

/*
aside {
    background-color: silver;
    box-shadow: inset 0.3em 0.5em 1em;
}
*/
#subNav_space {
    position:           fixed;
    /* top:                var(--main_MG_OU);  */
    /* jetzt grundsätzlich ausgeblendet */
    top:                calc( -1 * var(--main_MG_OU) - 1.5em); 
    width:              100vw;
    font-size:          calc(var(--nav_FS) * 1em);
    background-color:   #000;
    /*  Höhe ergibt sich zum absolut! berechneten Wert:
    /   > wird ausdrücklich so gesetzt damit auch ohne Feedback (p innerhalb) die Höhe stimmt
    /   > aber neu: nur noch als min-height, damit mehrere Flash MSGs Platz haben */
    min-height:         var(--SubNav_space_H_calc);
    z-index:            2;
    /*  Grid für Zwischenräume bei mehreren Flash-Messages */
    display:            grid;
    grid-row-gap:       calc(var(--SubNav_space_PD_OU) * 1em);
    padding-top:        calc(var(--SubNav_space_PD_OU) * 1em);
    padding-bottom:     calc(var(--SubNav_space_PD_OU) * 1em);
    /*  alt: nur Schatten mit weisser Kante unten
          > border-bottom: var(--_fT_BO_U_design);
          > box-shadow: 0 0.5em 1.5em #000;
    */
    /*  neu: 
    /   ----
    /   Border unten als Erweiterung des Haupt-Nav in dessen HG-Farbe
    /   weisse Kante jetzt als zusätzlichen ! box-shadow umgesetzt: */
    border-width: 0 0 calc(var(--SubNav_space_PD_OU) * 1em) 0;
    border-style: solid;
    border-color: var(--_fT_BGC);
    box-shadow: 0 calc(1em * var(--nav_BO_U)) var(--_fT_C), 0 0.5em 1.5em #000;
    /* temp 
    display: none;
    */
    transition:         var(--SubNav_transit);
    /* opacity:            .6;
    background-image: linear-gradient(red, yellow); */
}
#subNav_space.mo_sub {
    /* font-size:          1.25em; */
    min-height:         calc( var(--newVH, 1vh) * 100 -  var(--main_MG_OU));
    border-bottom:      0;
    box-shadow:         none;
    align-content:      center;
}
#subNav_space.mo_sub > nav.form_fb.subNav {
    row-gap:            2.5em;
}
#subNav_space.mo_sub > nav.form_fb.subNav > .btn_line {
    flex-wrap:          wrap;
    justify-content:    center;
    flex:               1 1 auto;
}
/* #subNav_space.mo_sub .warn, 
#subNav_space.mo_sub .succ {
    flex:               1 0 75vw;
    text-align:         center;
} */

#nav_shadow {
    font-size:          calc(var(--nav_FS) * 1em);
    width:  100vw;
    /*
    border: 2px solid yellow;
    background-color: #e449;
    */
    box-shadow: 0 0.5em 1.5em #000;
    box-shadow: 0 calc(1em * var(--nav_BO_U) ) var(--_iv_C), 0 0.5em 1.5em #000;    
    position: fixed;
    top: 0px;
    z-index: 2;
    height: var(--nav_H);
}
.reiter {
    background: linear-gradient(to left, var(--near_gray_C) 4%, var(--semi_light_C) 61%);
    /* box-shadow: inset -0.1em -0.1em 0.2em #fff, 
                   inset 0.1em 0.1em 0.2em #000c, 
                   0.2em 0.2em 0.2em #000c, 
                   -0.1em -0.1em 0.2em #fff; */
    padding: .3em .8em;
    border: .2em solid var(--semi_light_C);
}

/*  --------------
/   form-footer */
.ff {
    /* von submit übernommen: */
    margin-top:         auto;
}

/*  --------------
/   disable anti-aliasing
/   source: https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images */
figure.userdata > img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}
/*
    das geht:
#post19 {
    --abstand_L:        3.2;
}
#post19 > h1 {
    font-weight:        900;
}
    das wäre für unten gewesen: ist jetzt obsolet seit `master.css` Eintrag:
                        a:not(.in_h1_home) {...} 
    ( statt bisher nur: a {...} )
.zw {
    color:              inherit;
    font-family:        inherit;
    border-bottom:      none;
    font-size:          1em;
}
*/
article.home > h1 {
    font-weight:        700;
}
a.in_h1_home {
    color:              inherit;
    text-decoration:    none;
} 
a.in_h1_home:before {
  content:              none;
}

/*  --------------
/   Klasse für bei `h1 > span` 
/   funktioniert nur mit JS */
.firstWord {
    text-decoration:    underline;
    text-decoration-thickness:  0.123em;
}
.meta {
    display: flex;
    margin-top:             calc( var(--MG_OU) * 1em);
    margin-bottom:          calc( var(--MG_OU) * 1em);
    padding-left:           calc( 1em* var(--h_BO_L_and_h_PD_L));
}
.meta_re {
    justify-content: flex-end;
}
.meta_li {
    justify-content:        flex-start;
    margin-top:             0.35em;
    margin-bottom:          0.50em;
}
.meta_re > figure.userdata {
    margin-right:       -2.35em;
}
.meta_re > figure.userdata::before {
    order: 2;
}
.meta_re > figure.userdata > figcaption {
    order: 1;
}
.meta_re > figure.userdata > img {
    order: 3;
}

figcaption > dl {
    margin: 0;
}
ol.footnotes > li {
    padding-top:        var(--all_menu_H_calc);
    margin-top:         calc( -1 * var(--all_menu_H_calc) );
}

sup[id^=fnref] {
    top: -.1em;
    padding-top:        var(--all_menu_H_calc);
    margin-top:         calc( -1 * ( var(--all_menu_H_calc) ));
}
sup[id^=fnref] > a, a.footnote-backref {
    border-bottom: none;
    font-weight: bolder;
    padding: .1em .25em 0;
    background-color: #0000;
    border-radius: .2em;
    -webkit-transition: color .6s, background-color .6s;
    transition: color .6s, background-color .6s;
}
sup[id^=fnref] > a:hover, sup[id^=fnref] > a:focus, a.footnote-backref:hover, a.footnote-backref:focus {
    background-color: #000f;
    color: var(--max_light_C);
}
sup[id^=fnref] > a::before {
    font-family: "Font Awesome 5 Free";
    /*
    content: "*";
    content: " \f0d7"; 
    font-size: 1.1428571429em;
    */
    content: " \f150";
    padding-right: .1em;
}
a.footnote-backref::before {
    content: '';
}

a.footnote-backref.active_fn_backref,
sup[id^=fnref] > a.active_fn_ref {
    background-color: #000;
    color:#fff;
}
.active_fn_li {
    font-weight: bolder;
}

/* -------------------------------------------------
/   Checkbox als Switch:
/   Source: https://boolie.org/css-checkbox-styling/
/* ------------------------------------------------- */

div.switch > input[type="checkbox"]::after {
    content: "";
}

div.switch > input[type="checkbox"] {
    position: relative;
    /* Flex Reihefolge umdrehen: erst label anzeigen: */
    order: 1;
    /* dadurch wird die (usichtbare) original-Checkbox in den "switch" verschoben */
    right: 0;
    z-index: 2;
    /* obsolet: top:0; */
    /* untsichtbare original checkbox: */
    appearance:             none;
    -webkit-appearance:     none;
    background-color:      #00f0;
    width:                  var(--_switch_H);
    height:                 var(--_switch_H);
}
div.switch > input[type="checkbox"] + label {
    /* inline-block, damit baseline funktioniert */
    display:                block;
    cursor: pointer;
    font-size:              inherit;
    font-family:            var(--h_FONT);
    color:                  var(--dark_text_C);
    /* wird von #quick_publish parent-div geerbt */
    /* letter-spacing:         .05em; */
    line-height:            var(--_btnline_LH);
    /* so ist der Text immer knapp am switch (epirisch! 1.5 hat nichts mit _LH zu tun) */
    padding-right:          calc(1.5 * var(--_switch_H) + 1em * var(--_bsm_PD_OU));
    position: relative;
    /* margin-top: -30px; */
}
div.switch > input[type="checkbox"] + label:before {
    width:                  calc(2 * var(--_switch_H));
    height:                 var(--_switch_H);
    border-radius:          calc(var(--_bsm_PD_OU) * 3em);
    border:                 calc(var(--_bsm_PD_OU) * 1em) solid #4567;
    background-color:       #EEEb;
    content: "";
    margin-right:           calc(-1 * var(--_switch_H));
    transition: background-color 0.5s linear;
    z-index: 0;
    position:               absolute;
    box-shadow:             inset .1em .1em .4em #000a;
    right:                  calc(var(--_bsm_PD_OU) * 2em);
    right:                  calc(var(--_bsm_PD_OU) * 0em);
    top:                    -.50em;
    top:                    calc( (var(--_bsm_PD_OU) * -2em ));
}
div.switch > input[type="checkbox"] + label:after {
    width:                  var(--_switch_H);
    height:                 var(--_switch_H);
    border-radius:          calc(var(--_bsm_PD_OU) * 2em);
    background-color: #fff;
    content: "";
    transition: margin 0.1s linear;
    box-shadow: 0 0 .25em #234b;
    position: absolute;
    /* right:                  calc(var(--_switch_H) * -0.75); */
    right:                  calc( 1em * var(--_bsm_PD_OU));
    /* top:                    calc(-.50em + (var(--_bsm_PD_OU) * 1em )); */
    top:                    calc( (var(--_bsm_PD_OU) * -1em ));
    /* dieser Ausgleich muss wegen baseline anders gelöst werden */
    /* top: 2px; */
    z-index: 1;
}
div.switch > input[type="checkbox"]:checked + label:before {
    content:                "";
    background-color: var(--body_BGC); /* #2b8718 */
    border-color:#abc9;
}
div.switch > input[type="checkbox"] + label:after {
    content:                "";
}
div.switch > input[type="checkbox"]:checked + label:after {
    content:                "";
    margin: 0 calc(-1 * var(--_switch_H)) 0 0;
}
li.task-list-item {
    /* list-style-type: none; ist bereits aktiv, nur woher */
    /* damit kann ich nun die untergeordneten checkboxen sauber am linken 
       Rand des Elementes ausrichten */
    position: relative;
    --ohne_LiMarker_L: 0;
}
li.task-list-item input[type=checkbox] {
    position: absolute;
    left: 0em;
    top: 0.3em;
    width: 0.857143em;
    height: 0.857143em;
    margin: 0 0 0 calc( -1em * var(--listen_PD_L, 0.4) ) !important;
    /* ursprünglich nur das hier*/
    outline: 2px solid var(--main_C);
    outline-offset: -2px;
}
li.task-list-item input[type=checkbox]:checked {
    outline: 8px solid var(--main_C);
    outline-offset: -8px;
}
li.task-list-item input[type="checkbox"]:checked::before {
    /* Das Element erscheint nur, wenn angehakt */
    /* content: '𐄂'; */
    /* content: '☑️'; */
    font-family: Devanagari MT;
    font-size: .8em;
    content: '✓';
    left: 1px;
    top: 2px;
    color: var(--max_light_C);
    position: absolute;
}


div[id].ref {
    padding-top: var(--all_menu_H_calc);
    margin-top: calc(-1 * var(--all_menu_H_calc));
}

form.in_sb > input[type=checkbox]:checked + label {
    /* --fb_a_style_C:     var(--main_D2_C); */
    background-color:   var(--fb_a_style_C);
    /* border:             solid var(--fb_a_style_C) calc(var(--_bsm_PD_OU) * 1em); */
    color:              var(--max_light_C);
}

/* -------------------------------------------------
/   button und submit als .btn-Klasse
/   Gestaltung meiner Buttons
/* ------------------------------------------------- */
/*  inclusive Seiten-Nummern */
.prnt .btn {
    margin: 0;
}
.btn, .subNav > form > .btn {
    cursor: pointer;
    --_PD_OU_c:         calc(var(--_bsm_PD_OU) * 1em);
    letter-spacing: .05em;
    border-radius: .3em;
    font-weight: 500;
    padding: var(--_PD_OU_c) 1em var(--_PD_OU_c) 1em;
    color: var(--max_light_C);
    /*
    height: 2.4em; das stört bei "details.btn"
    background-image: linear-gradient(to bottom, var(--light_saturate_C), var(--medium_warm_C));
    */
    line-height:        var(--_btnline_LH);
}
nav#nav2 > form > .btn, nav#nav2 > form + a.btn {
    /* quadratischer Button per `min.width`  wie Höhe (statt padding): */
    text-align:         center;
    padding-left:       0;
    padding-right:      0;
    min-width:          calc(1em * var(--_btnline_LH) + 2 * var(--_PD_OU_c) + 2 * var(--_bsm_PD_OU) * 1em);
}
nav#nav2 > form > .btn.fltr {
    min-width:          14ch;
}
.btn:not(.prim, .scnd, .fltr) {
    box-shadow: inset calc( -1 * var(--_btn_BXSH_xy)) calc( -1 * var(--_btn_BXSH_xy)) var(--_btn_BXSH_w) var(--_btn_BXSH_lo_C), 
                inset var(--_btn_BXSH_xy) var(--_btn_BXSH_xy) var(--_btn_BXSH_w) var(--_btn_BXSH_hi_C);
}

input[type='submit'].btn {
    padding-top:        revert;
    padding-bottom:     revert;
    width:              100%;
}

.btn.fltr,
.btn.prim,
.btn.scnd,
.btn.erro,
.btn.warn,
.btn.know,
.btn.succ {
    background-color:   var(--fb_a_style_C);
    border:             solid var(--fb_a_style_C) calc(var(--_bsm_PD_OU) * 1em);
}
.btn.scnd {
    background-color:   transparent;
    color:              var(--fb_a_style_C);
}

.btn.b_sm {
    font-family:        var(--h_FONT);
    font-weight:        400;
    text-decoration:    none;
    line-height:        var(--_btnline_LH);
}
.btn.b_sm.xsm {
    --_pd: calc( .25em * var(--_xsm) );
    --_mg: calc( -.25em * var(--_xsm) );
    --_xsm: 0.8;
    font-size:  calc( 1em * var(--_xsm) );
    padding: var(--_pd) calc( 1em * var(--_xsm) );
    border-width: .2em;
    border-style: solid;
    /* Abstand rechts wie Border s.o. */
    /* margin-top: -.9em; */
}
.xsm.ral {
    float: right;
    margin: var(--_mg) calc( 1em  * var(--h_PD_R, 0) / var(--_xsm) - .2em ) 0 1em;
    border-color:  var(--article_BGC);
}
.prnt > ul.btn_line > .btn.b_sm, 
.prnt > ul.btn_line > .switch, 
input[type=file] {
    font-size:          calc(var(--_bsm_FS) * 1em);
}

.btn.scnd:hover,
.btn.erro:hover,
.btn.warn:hover,
.btn.know:hover,
.btn.succ:hover {
    background-color:   var(--fb_c_style_C);
}
.btn.scnd:active {
    color:              var(--fb_c_style_C);
    border-color:       var(--fb_c_style_C);
    background-color:   var(--main_D3_C);
}
/* .btn.warn:focus {
    background-color: var(--medium_warm_C);
    box-shadow: inset -.1em -0.1em .4em #0004, inset .1em .1em .4em #fff8,
                0 0 0 .5em var(--medium_warm_C);
} */
.btn:not(.prim, .fltr, .dpl):hover,
.btn.rubrik:hover {
    text-decoration: none;
    text-shadow: var(--_btn_BXSH_xy) var(--_btn_BXSH_xy) calc(var(--_btn_BXSH_w) / 2) var(--_btn_BXSH_lo_C);
    /* --------------------
    /   darf nicht geändert werden: 
    /   sonst ändert sich die Breite
    font-weight: 400; */
    box-shadow: inset var(--_btn_BXSH_xy) var(--_btn_BXSH_xy) var(--_btn_BXSH_w) var(--_btn_BXSH_lo_C),
                inset calc( -1 * var(--_btn_BXSH_xy)) calc( -1 * var(--_btn_BXSH_xy)) var(--_btn_BXSH_w) var(--_btn_BXSH_hi_C);
}

.rel {
    position: relative;
}
.len_in_chars {
    height: 3px;
    background-color: var(--main_C);
    position: absolute;
    left: 0;
    top: -3px;
    width: 100%;
}

/* -------------------------------------------------
/   Details & Summary
/   Ein Modal-Fenster
/* ------------------------------------------------- */
details.btn {
    cursor: pointer;
    display: inline;
}
.modal {
    /* Variablen für Modal einstellen */
    --h1_FS:            1.5;
    --abstand_L:        2.0;
    --h_BO_L:           1.5;
    --h_PD_L:           .5;
    /* daher neuberechnungen: */
    --h_MG_L: calc( var(--parent_PD_L, 2) * -1em * var(--mit_Marginalspalte) );
    --parent_PD_L:      calc( var(--abstand_L, 2) - var(--h_BO_L, 0) - var(--h_PD_L, 0) );
    --parent_PD_L_and_h_PD_L: calc( var(--parent_PD_L, 2) * var(--mit_Marginalspalte) + var(--h_PD_L, 0) );
    /* sollte hier immer 0 ergeben! */
    padding-left:       calc(var(--parent_PD_L) * 1em);
    --h_BO_L_and_h_PD_L: calc( var(--h_BO_L, 0) + var(--h_PD_L, 0) );
    /* weitere Einstellungen: */
    background-color: #ccc;
    border-radius: 0.5em;
    box-shadow: 1em 2em 4em var(--dark_text_C);
    left: 50%;
    width: clamp(9em, 80%, 32em);
    pointer-events: none;
    position: absolute;
    z-index: 8;
    top: 4em;
    transform: translate(-50%, 0);
    text-align: left;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    text-shadow: none;
    font-weight: initial;
    font-family: initial;
    color: initial;
    cursor: initial;
}
.erro .modal,
.warn .modal,
.know .modal,
.succ .modal {
    --h_BO_L_C:         var(--fb_a_style_C);
}
.erro .modal-close,
.warn .modal-close,
.know .modal-close,
.succ .modal-close {
    color:              var(--fb_a_style_C);
}
.modal p.modal-close {
    text-align: center;
    font-size: 2em;
    line-height: 0;
    padding: 0;
    pointer-events: none;
}
.modal p {
    padding-left: calc( 1em * var(--h_BO_L_and_h_PD_L) );
}
.modal form {
    --h_PD_R:           var(--abstand_R);
    /* damit das PD_R nicht zu 0 wird wegen `marginalspalte` */
    padding-left:       calc( 1em * var(--h_BO_L_and_h_PD_L) );
    padding-right:      calc( 1em * var(--h_PD_R, 0) );
    margin: var(--default_MG_OU_Calc) 0;
    display: flex;
    gap: .75em;
    justify-content: space-between;
    align-items: initial;
}
.modal form button:focus {
    outline: none !important;
    box-shadow: inset .1em .1em .3em #0004, inset -.1em -.1em .3em #fff8,
                0 0 0 .2em #eee, 0 0 0 .4em var(--fb_a_style_C);
}
.modal h1 {
  font-weight: 600;
  display: inline-block;
}
.modal main {
  padding: 0;
  pointer-events: all;
  overflow: auto;
}
.erro .modal-overlay,
.warn .modal-overlay,
.know .modal-overlay,
.succ .modal-overlay {
    background-color: var(--fb_a_style_C);
}

details .modal-overlay {
  transition: opacity 0.7s ease-out;
  pointer-events: none;
  position: fixed;
  z-index: 7;
  opacity: 0;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
details[open] .modal-overlay {
  pointer-events: all;
  opacity: .92;
}
details summary {
  list-style: none;
}
details summary:focus {
  outline: none;
}
details summary::-webkit-details-marker {
  display: none;
}

details.erro main,
details.warn main,
details.know main,
details.succ main {
  border-top: .2em dotted var(--fb_a_style_C);
  border-bottom: .2em dotted var(--fb_a_style_C);
}
details footer {
  padding: 0;
  pointer-events: auto;
}
details footer p, details header p {
  margin:0;
  pointer-events: auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}
details footer h2 {
  margin:0;
  padding: .8em;
  pointer-events: none;
  display: inline-block;
  width: 100%;
  background-color: khaki;
}
details .flex {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
details .item1 {
  pointer-events: auto;
  height: 100%;
  width: calc(100% - 2.5em);
  padding: .5em .5em .5em 0;
  /* background-color: bisque; */
}
details .item2 {
  width: 2.5em;
  /* background-color: khaki; */
}

a[href="/account"]:before {
    --a_bef_Content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2em;
    float: left;
    margin-right: .2em;
}

.page_nums {
    font-size:          calc( 1em * var(--_pg_nums_FS) );
    min-height:             calc( 1em * var(--SubNav_fb_LH) / var(--_pg_nums_FS) );
    /* unterhalb von sub-nav: */
    z-index:            1;
    position:           fixed;
    /* top:                calc( var(--main_MG_OU) + 1em * var(--nav_BO_U) / var(--_pg_nums_FS) ); */
    /* top:                calc( var(--Pagi_plus_H_calc)  + var(--main_MG_OU) + 1em * var(--nav_BO_U) / var(--_pg_nums_FS) ); */
    top:                calc( var(--Pagi_plus_H_calc)  + var(--main_MG_OU)  );
    /* BGC wird von ::before Element überschrieben, s.u. */
    /* zur Kontrolle */
    /* background-color:   var(--dark_saturate_C); */
    /* HG deckend kann auch genommen werden, statt transparent: ist jetzt besser, 2022.06 */
    background-color:   var(--main_C);          
    /* background-color:   transparent; */
    /* justify-self:       flex-start; 
    obsolet: kann nicht wirken wegen `fixed` */
    display:            flex;
    align-items:        center;
    /* d.h. Button steht in Höhe vermittelt im ul nicht gestretcht
    über obig min-height */
    /*  die im ul enthaltenen a-Tags sind per default grundsätzlich `inline`-Elemente
    aber ohne Abstand */
    gap:                0.5em;
    flex-wrap:          nowrap;
    transition: top 0.5s ease;
    justify-content: center;
    margin-top: 0;
    padding: 1em 0 .5em 0;
    width: 100%;
    /* margin:             0 calc( env(safe-area-inset-right) + var(--x_MG_PD_LR)) 
                        0 calc( env(safe-area-inset-left) + var(--x_MG_PD_LR)); */
    margin: 0;
    left: 0;
    border-bottom:      6px solid var(--main_C);
}
.page_nums::before {
    content:        '';
    /* BG mit Gradient verhält sich ähnlich einem image
        d.h. es kann mit BG-Color kombiniert werden: */
    background: linear-gradient(to right, 
                    var(--main_C),
                    rgba(255,255,255,1) 40%,
                    rgba(255,255,255,1) 60%,
                    var(--main_C));
    /* BGC im CSS hier nach Gradient notiert erscheint die Farbe aber
        seltsamerweise hinter dem Gradient durch – anderenfalls garnicht
        Die Farbe kann auch genausogut "oben" im Elternelement notiert sein s.o.*/
    /* background-color: var(--dark_saturate_C); */

    /* Das ist nur der Verlaufshintergund: 
        die Verlaufsbreite kann via %-Wert < 100 verringert werden  */
    width: calc(100% - 2 * var(--x_MG_PD_LR) - env(safe-area-inset-right) - env(safe-area-inset-left));
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    /* margin-left: -6em; */
}
/* wegen »new stacking context« geht es nicht, ein Pseudo-
Element hinter den globalen Stacking index zu setzen 
.page_nums::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #891a1abb;
    // create a new stacking context
    z-index: -1;
} */
.page_nums > a.btn {
    text-align:         center;
    padding:            .18em 0;
    min-width:          2.2em;
} 
a.btn.off {
    pointer-events: none;
    cursor: default;
    opacity: 0;
}
figcaption h3 {
    --h_MG_L:           calc( -1 * var(--_home_figure_gap));
    padding-left:       var(--_home_figure_gap);
    /* margin-top:         var(--_home_img_BO_PD); */
    margin-top:         calc( var(--_home_figure_gap) / var(--h_FS));
    margin-bottom:      calc( var(--_home_figure_gap) / var(--h_FS));
    background-color:   var(--max_light_C);

}
figcaption h6.date4h3.h6id {
    margin-top:         calc( var(--_home_figure_gap, 0) + var(--_home_img_BO_W) / var(--h_FS) );
}
#mySidebar.prnt hr {
    margin-bottom:      revert;
    margin-top:         revert;
}
div.fin {
    height:             .9em;
    width:              1em;
    --lastChild_fas_C:  var(--main_C);
}

.toc > ul > li {
    list-style-type: none;
}
/* ggf. zuziehen bis erster Linie
:root {
    
    --uni_C:            #000;
    --main_C:           #999;

    ---------------------------------
    MONOCHROM-Versuch
    ---------------------------------
    unveränderte Farben:
    --max_light_C:      #fff;
    --hi_light_C:       #eee;
    --light_C:          #bbb;
    --dark_gray_C:      #666;

    veränderte Farben:
    --semi_light_C:     #f8f8f8dd;
    --middle_gray_C:    #808080;
    --near_gray_C:      #789;
    ---------------------------------
    --semi_light_C:     #fff;
    --near_gray_C:      var(--uni_C);
    --middle_gray_C:    var(--uni_C);
    
    --dark_text_C:      var(--uni_C);
    --light_saturate_C: var(--uni_C);
    --dark_saturate_C:  var(--uni_C);
    --dark_and_warm_C:  var(--uni_C);
    --medium_warm_C:    var(--uni_C);
    --hx_BGC:           var(--uni_C);
}
.prnt {
    color:              var(--uni_C);
}
.prnt > h5 > a {
    color:              var(--main_C);
}
.prnt em {
    color:              var(--dark_gray_C);
}
.prnt > h5 > strong, .prnt > h5 > em {
    color:              var(--main_C);
}

body {
    background-color:   var(--main_C);
}

ggf hochziehen bis letzter Linie */

fieldset.ral div.fg p.iv.sp2 {
    grid-column: 2 / span 2;
}
article.prnt time {
    /* das time-tag wird automatisch in Python angelegt bei diesem regex-match:
       r'(\d?\d:\d\d )(Uhr|AM|PM|a\.m\.|p\.m\.)(\W\s*)' 
       zum Bsp. bei: »8:25 Uhr« */
    font-family:        var(--mono_FONT);
    color:              var(--h6_C);
    /* background-color:   #f2f8ff;
    background-color:   #ffffff40;
    border-radius:      .3em;
    padding:            0 .3em; */
    font-size:          calc(1em * var(--_15zu16));
    /* mit bolder erhalte ich 600 700, Schnitt 500 ist etwas dünner
       damit erreiche ich auch einen Unterschied zu »fett« 
       ausserdem würde mit bolder aus fett dann ultrafett (hässlich) */
    font-weight:        500;
}
p.error, ul.error {
    line-height:        2em;
    text-align:         right;
}
/* #mySidebar > section.prnt {
    position:           -webkit-sticky;
    position:           sticky;
    top:                var(--all_menu_H_calc);
} */

aside > section.on_top {
    grid-row:           1;
}
section#abkz h5>span {
    font-weight:        300;
}
span.ttec > em {
    color:              inherit;
    text-decoration:    underline;
    font-style:         normal;
}
.prnt > h1.private {
    border-left-color:  var(--article_BGC);
    color:              var(--hx_BGC);
}
fieldset#todo_more.ral {
    --fs_width:         minmax(12ch, 28ch);
    /* --flex:             0 1 45ch; */
}
fieldset#account.norm {
    --fs_width:         minmax(40ch, 66ch);
    --flex:             1 1 66ch;
}

fieldset.norm.grpbtn > div.btn_line {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}
.fieldsets > fieldset {
    position: relative;
}
.fieldsets > fieldset > span {
    position:absolute;
    right: calc( 1em / var(--_xsm));
    top: -2em;
}
.btn_line.cur_tags {
    justify-content:    end;
    margin-top:         .25em;
    /* die Tags werden in der Übersicht rechtsbündig innerhalb der meta-Section ausgerichtet: */
    margin-left:        auto;
    /* das funktioniert so weil die section ein flex-container ist. */
    flex-wrap: wrap;
    margin-top:         0;
    margin-bottom:      0;
    align-items:        end;
    align-content:      end;
}
.btn_line.cur_tags > .btn.dpl {
    /* Klasse .dpl für DisPLay-only, also ohne hover Effekt */
    font-size:          .6em;
    background-color:   unset;
    cursor:             unset;
}
/* würde funktionieren aber auch die Autoren-
   Abbildung würde kleiner sein
aside > .prnt {
    --parent_FS: 0.8;
}
*/
figure.userdata.post_author > figcaption > h3 > a {
    font-size:             0.9em;
}
h5.my_info {
    margin-top:         auto;
}
section.post_tags {
    /* margin-bottom:      var(--default_MG_OU_Calc); */
    border-top:          .1em dashed var(--main_C);
    padding-top:         .5em;
    margin-top:         -.2em;
}
.post_tags > .btn_line.cur_tags {
    justify-content:     center;
}
a span > em {
    color: inherit;
    text-decoration: underline;
    font-style: normal;
}