@charset "utf-8";
/* ---------------------
/* #### Modul form  ####
/* ---------------------
/   LHR @2021-03-21 ff
/
/   umgebaut von grid_test.css 
/   zu form.css und dann zu form_ff.css */

/* mobile first: Label oberhalb von Input-Feld */

/* LHR Form-Basis */
span.search-icon, span.clear-icon,
input, select, textarea {
    font-size: calc( var(--input_FS) * 1em );
    margin: var(--input_MG);
}
input[type=text],
.sfg > input[type=search],
fieldset.sf > button.btn.scnd,
input[type=password],
input[type=number],
input[type=date],
input[type=email],
select, textarea {
    box-sizing: border-box;
    padding: var(--input_PD_calc);
    border-width: calc( var(--input_BO_W) / var(--input_FS) * 1em );
    border-color: initial;
    border-radius: inherit;
    color:              var(--main_C);
}

/* Password-Field in eigenem "Container" mit Auge-Symbol */
.pw_container > input {
    width:              100%;
    border-radius:      0.3em;
    padding-right:      2em;
}
#eye {
    font-size: calc( var(--input_FS) * 1em );
    /*  -2em Margin-Left absolut bei geg. input_FS rechnerisch ca.1.95em
    /   aus Padding+eye-Symbol-Größe in dieser FS */
    margin-left:        calc( -2em + ( var(--input_BO_W) + var(--_fb_BOW) + 
                                       var(--_fg_PD)) * -1em / var(--input_FS) );
    padding:            .25em .35em;
}
#eye > i {
    /* color muss spezifischer angegeben werden wegen master.css: `span > i` */
    color:              var(--main_C);
}
input[type=text],
input[type=search],
fieldset.sf > button,
input[type=password],
input[type=number],
input[type=date],
input[type=email],
select {
    height: calc( var(--input_FS) * var(--basis_LH)* 1.37em );
}
.sfg > input[type=search] {
    width:              100%;
    padding-right:      1.8em;
    padding-left:       1.8em;
}
.sfg > input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
  
.fg > input[type=checkbox] {
    /* Höhe ist mehr: s.o., wegen Quadrat gilt am Ende das hier */
    width:  calc( var(--input_FS) * var(--basis_LH)* 1.37em/1.37 );
    /*  height: stretch;
    /   height: -webkit-fill-available; */
    height:             calc( var(--normalize_LH) * var(--input_FS) * 1em 
                + 2em * ( var(--input_PD_OU) + var(--input_BO_W) ) / var(--input_FS) );
}
.fg > input[type="checkbox"]::after {
    margin-left:        1.5em;
    color:              var(--_iv_C);
    line-height:        calc( var(--normalize_LH) * var(--input_FS) * 1em 
                + 2em * ( var(--input_PD_OU) + var(--input_BO_W) ) / var(--input_FS) );
}
.fg > input[type="checkbox"]:checked::after {
    content:            "ja";
}
.fg > input[type="checkbox"]:not(:checked)::after {
    content:            "nein";
}

.sfg:focus,
input[type=text]:focus,
input[type=search]:focus,
fieldset.sf > button:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=email]:focus,
select:focus, textarea:focus {
    font-weight:        bold;
    color:              var(--dark_text_C);
}
input[type=text],
input[type=search],
fieldset.sf > button,
input[type=password],
input[type=number],
input[type=email],
input[type=date] {
    /* default: inset nur bei diesem type 
        ist somit nicht einheitlich, daher: */
    border-style: solid;
}

fieldset.sf {
    /* im Such-Formular */
    /* --fieldset_BG_C:    #abc; */
    padding:            0; 
    flex-direction:     row;
    justify-content:    space-between;
}
/* spezifisch nur für action-Zeile
fieldset.sf.action {
}
*/
fieldset.sf.options {
    --fieldset_BG_C:    var(--near_gray_C);
    opacity:            1;
    display:            none;
}

fieldset {
    background-color: var(--fieldset_BG_C);
    border: none;
    display: flex;
    border-radius:      calc( 1em * var(--main_BO_radius) );
    flex-direction: column;
    margin:             0;
    flex:               var(--flex);
    /*  gap per MQ und CP (--myFormGap) eventuell feintunen */ 
    gap:                0.25em;
}
fieldset legend {
    /*  wenn die --fieldset_BG_C transparenz hat, dann darf muss die legend
    /   ohne Transparenz sein: alternativ dazu ein Verlauf per `.reiter` */
    background-color:   var(--semi_light_C);
    padding: .3em;
    border-radius: .3em;
}

.fg > label,
.inp_table > li > span {
    font-family:        var(--basis_FONT);
    font-size:          calc( var(--label_FS) * 1em );
    font-weight:        normal;
    line-height:        var(--min_LH);
    color:              var(--_iv_C);
    grid-row:           var(--label_gROW); /* `1 / 2`  oder `1 / -1` */
    /* 
    align-self:         first baseline;

    Meine Lösung für `baseline` Label und Input ausrichtung 
       bei verschiedenen Schriftgrößen: geht am Desktop, mobil noch nicht, wegen 
       mangelnder Unterstützung von `align-self: first baseline;` (s.o.)*/
    justify-self: var(--label_gJustSelf);
    padding-top: var(--label_PD_O_calc);
    padding-left: var(--label_PD_L_calc);
}
.fg > label::after {
    content:':';
}
.tal > .fg.opt > label::after {
    content:' (optional)';
    font-weight:        300;
    font-size:          calc(var(--_iv_FS) * 1em);
    color:              yellow;
}

.fg > label.question::after {
    content:'?';
}

/* Layout */

#main_layout > #myContent > form.frm {
    grid-area:          my_c;
    display: flex;
    gap:                calc( var(--grid_gap, 0.75) * 1em);
    flex-direction: column;
    /* die section um die Form hat pd_OU: 1em > 2em wird abgezogen 
    /   ausserdem _onPageRef_PD_O (0.5em) 
    /   ------------------------------------*/
    /*  alt und falsch : 
    /   min-height: calc( var(--newVH, 1vh) * 70 - 2em - var(--_onPageRef_PD_O)); */
    /*  ------------------------------------
    /   auch form brauch ein definiert Höhe, damit per justify-content 
    /   der Submit am Seitenende ausgerichet wird.
    /   zusaätzlich zum H-Wert vom Container #main_layout muss noch 2x der 
    /   form-Margin abgezogen werden */
    /*  oblsolet:
    / > justify-content: space-between; */
}
#main_layout > #myContent > form.frm input[type='submit'] {
    min-height:             2.4em;
    white-space:        normal;
    /*  border-width muss bleiben (iOS) */
}

.fieldsets {
    /* die Sammlung aller Fieldsets im großen (Haupt-)Formular */
    display: flex;
    gap:                calc( var(--grid_gap, 0.75) * 1em);
    flex-wrap: wrap;
    /* max-width: var(--fieldset_MW_lg); */

    /* mit diesen Angaben kann »auf die Schnelle« die 
       Höhe fixiert werden. Der Schatten hilft zu erkennen, dass 
       dieser Eigabebereich oben abgeschitten wurde (beim Scrollen)
    height: calc( var(--newVH, 1vh) * 65 );
    padding: 1em;
    box-shadow: inset 0 0 10px #000000;
    overflow-y: scroll;

    Probleme macht aber die Höhenangabe!
    */
}

/* Klassen */

.sfg {
    /* such-feld-gruppe */
    position:           relative;
    background-color:   inherit;
    padding:            0;
    font-family:        var(--mono_FONT);
    border-radius:      .3rem;
    color:              var(--main_C);
}
.sfg.active {
    color:              var(--dark_text_C);
}

.search-icon {
    position:           absolute;
    top:                53%;
    transform:          translateY(-50%);
    left:               0.5em;
}

.clear-icon {
    position:           absolute;
    padding:            0;
    top:                53%;
    transform:          translateY(-50%);
    right:              0.5em;
    cursor: pointer;
}

.fg {
    display: grid;
    align-items: baseline;
    grid-template: var(--_fg_grid);
    /*  solnge kein `border-style` angegeben ist 
        bleibt border-width automatisch 0 !
     * >border-width:   0;
        somit obsolet
    */
    column-gap: .4em;
    row-gap: .1em;
}
.fg.editor {
    --_fg_grid-notyet:         auto auto minmax(var(--_iv_LH), auto) / var(--fs_width) auto;
    --_fg_grid:         auto auto minmax(var(--_iv_LH), auto) / auto 1fr;
    text-align:         right;
    grid-template-areas:  "labl btns"
                          "edit edit"
                          "info info";
}
.fg.editor > #format_btns {
    grid-area: btns;
    padding:            .4em 0 0.4em 1em;
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    justify-content: end;
}
#format_btns .prim {
    --fb_a_style_C: black;
}
#format_btns .scnd {
    --fb_a_style_C: black;
    background-color:   white;
}
#format_btns > span span {
    /* accesskey-Buchstabe in den Buttons unterstrichen */
    text-decoration: underline;
}
.fg.editor > label {
    grid-area: labl;
    align-self: end;
}
.fg.editor > p.iv {
    grid-area: info;
}
.fg.editor > textarea#content {
    grid-area: edit;
}
.sfg {
    background-color:   inherit;
    padding:            0;
}
fieldset.sf.action > .sfg {
    flex:               0 1 42ch;
}
#format_btns > .prim {
    border-color: var(--main_C);
}

.fg, .inp_table {
    font-family:        var(--mono_FONT);
    color:              var(--_iv_C);
    background-color:   var(--_fg_BG_C);
    border-radius: .3rem;
    padding:            calc( (var(--_fb_BOW) + var(--_fg_PD)) * 1em);
    padding-bottom:     calc( (var(--_fb_BOW) + var(--_fg_PD_U)) * 1em);
    padding-top:        calc( (var(--_fb_BOW) + var(--_fg_PD_O)) * 1em);
    /*  ----------------------------
    / > margin: .15em;
    /   muss weg: wird per `gap` vom fieldset-container gemacht */
}
.inp_table {
    margin-top:         0;
}
ul.inp_table li,
ul.inp_table li input {
    border-radius: inherit;
}
.abstand_1em {
    /* bei scrollen kommt das padding der
       .fieldsets unten nicht zum tragen, daher ein 
        leeres div im html mit dieser Klasse
    */
    flex: 0 0 100%;
    height: 1em;
    font-size: small;
    text-align: right;
}

.iv {
    font-family:        var(--basis_FONT);
    font-weight:        300;
    line-height:        var(--min_LH);
    /* color wir jetzt geerbt */
    font-size:          calc(var(--_iv_FS) * 1em);
    /*  nachfolgende Maße müssen in uem festgelegt werden */
    margin:             0;
    padding:            0 0 0 calc(1em * (var(--_iv_PD_LR) + var(--input_BO_W)) /  var(--_iv_FS) );
}
.iv code {
    /*  so kann im .iv-Text auch Code vorkommen, ohne dass sich die Höhe ändert */
    height: auto;
}
.form_fb > .iv {
    font-weight:        inherit;
    /*  das Feedback-Flag hat immer eine Hintergrund-Farbe 
    /   die Vererbung würde hier stören (so nahe beim Input-Feld): */
    background-color:   transparent;
    /*  Grundsätzlich hat `.form_fb` ein text-align: center. 
    /   Das wäre hier aber falsch 
    /   (label ist ohnehin ausdrücklich eingestellt per justify-self)
    /   (input ist grundsätzlich "end" per user-agent) */
    text-align:         initial;
}
.form_fb.erro > .iv, .form_fb.fb-2 > .iv {
    letter-spacing:     .04em;
}

/*  Feedback-Meldung für ganzes Formular
/   ------------------------------------
/   wurde zunächst per Pseudo-Fieldset versucht:
/   ist mittlerweile obsolet: */
fieldset.fb {
    /*  eine Zeile ist immer reserviert, dann bleibt das Layout
    /   bestehen, d.h. es wird nichts verdrängt auch ohne FB */
    min-height:         7em;
}
fieldset.fb > legend {
    /*  der Container für die Meldung wird mit einem Pseudo-Fieldset
    /   umgesetzt, optisch unterschieden durch die LEGEND rechts ausgerichtet */
    text-align:         right;
    background-color:   inherit;
    color:              inherit;
}
.flsText {
    font-size:          calc( var(--label_FS) * 1em );
    /*  wie alle grid-items: "margin" wird im fls(=fieldset)
    /   per gap gesteuert */
    margin:             0;
}
.flsText > a {
    white-space:        nowrap;
}
.rb {
    text-align:         right;
}
.flsText > small {
    font-size:          calc(var(--_iv_FS) * 1em / var(--label_FS));
}

.fb > legend.succ::before {
    content:            "Erfolgsmeldung:";
}
.fb > legend.erro::before {
    content:            "Fehlermeldung:";
}
.fb > legend.know::before {
    content:            "Info:";
}
.fb > legend.warn::before {
    content:            "bitte beachten:";
}
/*  Ende: Feedback-Meldung für ganzes Formular
/   ------------------------------------------ */

.form_fb {
    /*  Ausgabe-Text in einem `p-Tag` zentriert,
    /   dazu mit einer der Klassen von .succ bis .erro angegeben
    /   für die Flag-Auszeichnung 
    /   (=unspezifisch > für ganzes Formular
    /   zB wird das neue padding nicht innerhalb des Formulars verwendet, 
    /      denn es wird via .fg.form_fb... überschrieben) */
    padding:            0;
    border-style:       var(--_fb_BO_style);
    border-width:       calc( var(--_fb_BOW) * 1em );
    border-radius:      .3em;
    text-align:         center;
}
#subNav_space > .form_fb {
    /*  LH muss größer als 1.35 sein damit die exakte Höhe des subNav
    /   berechnet werden kann */
    line-height:        var(--SubNav_fb_LH);
}
#subNav_space > .form_fb.subNav {
    text-align:         initial;
    background-color:   var(--dark_text_C);
    /*  das ist vl schon alles damit es kein Umbruch gibt */
    overflow-x: scroll;
    white-space: nowrap;
    border-color: var(--dark_text_C);
    column-gap: 1.2em;
}

.fg.form_fb {
    /*  (spezifisch > nur für das jeweilge input-Feld (-Grid-Gruppe))*/
    /* --------------------
    /   Formular-Feldgruppen können ein Flag erhalten zB `.fg.form_fb.erro`
    /   mit einer Rückmeldung innerhalb der Feldruppe.
    /   Dazu ist eine kleine Anpassung nötig:
    /   Weil bei "form_fb" ein border-style (mit der definierten BOW) 
    /   festgelegt ist wird die border »wirksam« (sichtbar),
    /   deshalb muss hier das padding um diesen BOW verringert werden */
    padding:            calc( var(--_fg_PD) * 1em );
    padding-bottom:     calc( var(--_fg_PD_U) * 1em );
    padding-top:        calc( var(--_fg_PD_O) * 1em );
}

/* placeholder */
::-webkit-input-placeholder {
    text-align:         right;
    color:              var(--placeholder_C);
}
::placeholder { /* Firefox */
    color:              var(--placeholder_C);
    opacity:            1;
}
:-moz-placeholder { /* Firefox 18- */
    text-align: right;
}
::-moz-placeholder { /* Firefox 19+ */
    text-align:         right;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    text-align:         right;
    color:              var(--placeholder_C);
}
::-ms-input-placeholder { /* Microsoft Edge */
    text-align: right;
    color:              var(--placeholder_C);
}

form#UpdateAccoutForm.frm {
    border: 0px solid yellow;
}
figcaption > h2 {
    /*  das war nur für Account-route gedacht*/
    border-top:         calc( .4em / var(--h2_FS, 2.25) ) solid;
}
.userdata > img {
    /* das ist jetzt erst mal im schema geregelt
    padding:            .35em;
    align-self:         flex-start;
    border-radius:      .3em;
    border:             calc( (var(--MG_OU, .75) - .35) * 1em ) solid var(--hx_BGC);
    order:              1;
    */
}
.userdata > figcaption {
    order:              2;
    text-align:         left;
}
/* aus blogbeitrag: */
input[type="checkbox"]#hiernicht {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;
}
/* blogbeitrag ende */

nav.form_fb.subNav > form > input[type=checkbox][id^="cb_"],
input[type="checkbox"][id^="usr_"],
input[type="checkbox"][id^="tag_"] {
    width: 1em;
    /* border: 1px solid yellow; */

    position: absolute;
    z-index: -1;
    -webkit-appearance: none;
    appearance: none;
    /* background-color: #4c4c9c7d; */
    height: 1em;
    /* temp: 
    z-index: 1;
    -webkit-appearance: checkbox;
    margin-left: 0;
    background-color: #4c4c9c;
    */
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;
}
/* input[type=checkbox][id="cb_fltr1"] {
    margin-left: 1em;
    top:2em;
}
input[type=checkbox][id="cb_fltr2"] {
    margin-left: 2em;
    top:3em;
} */
#nav2 a.btn.b_sm {
    font-family: var(--basis_FONT);
    font-weight: 500;
}
nav.form_fb.subNav > form > input[type=checkbox][id^="cb_"]:checked + label,
#nav2 a.btn.b_sm.aktiv {
    background-color:   var(--fb_c_style_C);
    text-decoration: none;
    text-shadow: var(--_btn_BXSH_xy) var(--_btn_BXSH_xy) calc(var(--_btn_BXSH_w) / 2) var(--_btn_BXSH_lo_C);
    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);
}
nav.form_fb.subNav > form > input[type=checkbox][id^="cb_"]:disabled + label {
    text-decoration: none;
    background-color: var(--main_C);
    border-color: var(--main_C);
    color: var(--dark_text_C);
    text-shadow: none;
    box-shadow: none;
    /* 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); */
}
input.inaktiv {
    /* opacity:            .4;
    background-color:       var(--main_C); */
    color:                  var(--light_C);
}
/* form#new_group .btn_line {
    justify-content:        flex-end;
} */
form#new_group a.btn {
    font-family:            var(--mono_FONT);
}
.rel {
    position:               relative;
    border-radius:          inherit;
}
.rel.username {
    flex:                   0 1 35%;
}
.rel.email {
    flex:                   1 1 45%;
}
.rel.entf {
    flex:                   0 0 1em;
    /* align-content:          center; */
    align-self:          center;
    /* background-color:       var(--main_D1_C); */
}
div.rel input {
    width:                  100%
    /* die ganze Breite der o.g. 45% wird vom Feld erfüllt */
}
div.rel > p.iv {
    /* tooltip error text */
    position: absolute;
    bottom: 100%;
    left: 10%;
    z-index: 2;
    padding: .3em;
    padding-left: .6em;
    border-radius: .3em;
    max-width: 80%;
    box-shadow: .1em .1em .3em black;
}
div.rel > p.iv::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 5%;
    margin-left:  .8em;
    border-width: .8em;
    border-style: solid;
    border-color: var(--_fb-2b_C) transparent transparent transparent;
    border-color: var(--fb_b_style_C) transparent transparent transparent;
}
ul.inp_table > li {
    display:                flex;
    gap:                    .5em;
    margin:                 .3em 0;
}


.rel.entf label {
    background-color: #fff;
    border: calc( var(--input_BO_W) / var(--input_FS) * 1em ) solid var(--main_C);
    border-radius: .3em;
    cursor: pointer;
    height: calc( var(--input_FS) * var(--basis_LH)* 1.37em );
    width: calc( var(--input_FS) * var(--basis_LH)* 1.37em );
    display: block;
}
.rel.entf label:after {
    border: .2em solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: .4em; 
    left: .5em;
    opacity: 0;
    position: absolute;
    top: .5em;
    transform: rotate(-45deg);
    width: .8em;
}
.rel.entf input[type="checkbox"] {
    visibility: hidden;
    display: none;
    opacity: 0;
}
.rel.entf input[type="checkbox"]:checked+label {
    background-color: var(--main_C);
}
.rel.entf input[type="checkbox"]:checked+label:after {
    opacity: 1;
}
/* textarea {    
    keine gute Idee:
    --input_FS:         0.8; 
       bei Mobilgeräten wird bei verkleinerter FS das textarea Feld gezoomt
   
} */
/* obsolet: denn der Container ist kein `display:flex`, 
   und über ID sollte hier sowiso nicht adressiert werden
section.prnt.statistik > form.frm {
    flex: 1 1 15ch;
} */
fieldset.sf > button {
    line-height: initial;
    align-self: center;
}