* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--hg_body);
    color: var(--vg_body);
    font-family: scs_font, Verdana, Geneva, sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
    word-wrap: break-word !important;
}

h1 {
    font-weight: bold;
    font-size: 1.5em;
    color: var(--vg_h1);
}

h2 {
    font-weight: bold;
    font-size: 1.4em;
    color: var(--vg_h1);
}

h3 {
    font-size: 1.3em;
    color: var(--vg_h1);
}

a {
    text-decoration: none;
    color: var(--hg_menue);
}

#in_seite a {
    text-decoration: none;
    font-weight: normal;
    color: var(--hg_menue);
}

#in_seite a:hover {
    color: var(--vg_link);
}

#in_seite ul {
    padding-left: 50px;
    padding-bottom: 10px;
    padding-top: 10px;
}

#in_seite p {
    padding-bottom: 5px;
}

#in_seite table tr td {
    padding-bottom: 5px;
    padding-top: 5px;
}

#in_seite h1,
#in_seite h2,
#in_seite h3,
#in_seite h4 {
    padding-bottom: 5px;
    padding-top: 5px;
}

.container {
    padding: 1em;
    width: 99%;
    max-width: 75em;
    margin: auto;
    margin-bottom: 50px
}

.seitentext p {
    hyphens: auto;
    -webkit-hyphens: auto;
    text-align: justify;
}

.col_button {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    padding: 0px;
    border: 1px solid var(--vg_rahmen);
}

#div_sprache {
    position: absolute;
    display: none;
    min-width: 150px;
    background-color: var(--hg_container);
    border: 1px solid var(--vg_rahmen);
	    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
   
    z-index: 2000;
}

.container #containerinnen {
    border: 2px solid var(--vg_rahmen);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    -webkit-box-shadow: 5px 5px 5px var(--vg_schatten);
    box-shadow: 5px 5px 5px var(--vg_schatten);
    background-color: var(--hg_container);
}

.mittelcontainer {
    padding-top: 20px;
    padding-right: .5em;
    padding-left: .5em;
}

#main_logo {
    margin-bottom: 10px;
}

#main_logo img {
    width: 300px;
    max-width: 600px;
    height: auto;
}

#formmaske {
    width: 100%;
    margin: auto;
    margin-top: 30px;
    background-color: var(--hg_rahmen);
}

.cmsdatentabelle {
    border-collapse: collapse;
    border: thin solid var(--hg_menue);
}

.cmsdatentabelle td {
    padding: 5px;
}

.cmsdatentabelle th {
    text-align: center;
    background-color: #A8ADAD;
    padding: 3px;
}

#formmaske,
    {
    border: thin solid var(--hg_menue);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

#formmaske_email,
.formmaske_liste {
    border: thin solid var(--hg_menue);
    width: 90%;
    max-width: 70em;
    margin: auto;
    */ margin-top: 20px;
}

#formmaske_login {
    border: thin solid var(--hg_menue);
    width: 35em;
    max-width: 35em;
    margin: auto;
    margin-top: 20px;
}

.formmaske_daten {
    border: thin solid var(--hg_menue);
    width: 40em;
    max-width: 40em;
    margin: auto;
    margin-top: 20px;
}

.formmaske_innen {
    padding: 5px;
}

.kapitel_gerade,
.kapitel,
.kapitel_unten {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue_verlauf)), to(var(--hg_menue)));
    background: -moz-linear-gradient(top, var(--hg_menue_verlauf), var(--hg_menue));
    background: linear-gradient(to top, var(--hg_menue_verlauf), var(--hg_menue));
    background-repeat: no-repeat;
    color: var(--vg_menue);
    font-size: 1.1em;
    padding-top: 4px;
    padding-bottom: 4px;
}

.formmaske_liste,
.formmaske_daten,
#formmaske_login,
#formmaske_email,
.kapitel_gerade {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.site_button,
.back_button {
    border: 2px solid var(--vg_rahmen_fine);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    min-width: 32px;
    min-height: 32px;
    max-height: 40px;
    padding: 8px;
    font-size: 1.2em;
    margin-left: 6px;
    cursor: pointer;
}

.back_button {
    background: var(--hg_button);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_button)), to(var(--hg_button_verlauf)));
    background: -moz-linear-gradient(top, var(--hg_button), var(--hg_button_verlauf));
    background: linear-gradient(to top, var(--hg_button), var(--hg_button_verlauf));
    background-repeat: no-repeat;
    color: var(--vg_button);
    font-size: .8em;
}

.site_foot {
    margin-right: 6px;
    margin-left: 6px;
}

.kapitel {
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
}

.css_stern {
    padding: 5px;
    font-size: .8em;
}

.css_link {
    cursor: pointer;
    color: var(--hg_menue);
}

/* formular input elements */
.cssinput,
.cssinput_combo {
    padding: 4px;
    background-color: var(--hg_textbox);
    /*LightYellow;*/
    border-left: 3px solid var(--vg_rahmen);
    box-sizing: border-box;
    border: 2px solid var(--vg_rahmen);
    border-radius: 3px;
}

.cssinput_combo:focus,
.cssinput:focus {
    border: 1px solid var(--hg_textbox_marker);
    border-left: 3px solid var(--hg_textbox_marker);
    background: var(--hg_textbox_focus);
}

.cssinput_f {
    margin-bottom: 10px;
    padding: 0 5px;
}

.cssinput_combo {
    background-color: var(--hg_select_classic);
    color: var(--vg_select_classic);
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
}

.cssreadonly {
    background-color: white;
}

.cssreadonly:focus {
    background-color: Red;
    color: White;
}

.css_nur_res {
    display: none;
}

.css_belehrung {
    font-size: .8em;
}

select.classic {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--vg_select_classic_image) 50%), linear-gradient(135deg, var(--vg_select_classic_image) 50%, transparent 50%), linear-gradient(to right, var(--hg_select_classic_image), var(--hg_select_classic_image));
    background-position:
        calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
    background-size:
        5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    padding-right: 35px;
}

select.classic:focus {
    background-image:
        linear-gradient(45deg, var(--vg_select_classic_focus) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, var(--vg_select_classic_focus) 50%), linear-gradient(to right, var(--hg_select_classic_focus), var(--hg_select_classic_focus));
    background-position:
        calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
    background-size:
        5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: var(--vg_body);
    outline: 0;
}

select.kategorie {
    background-color: white;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--vg_select_classic_image) 50%), linear-gradient(135deg, var(--vg_select_classic_image) 50%, transparent 50%), linear-gradient(to right, white, white);
    background-position:
        calc(100% - 10px) calc(1em + 2px), calc(100% - 5px) calc(1em + 2px), 100% 0;
    background-size:
        5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    padding-right: 40px;
}

select.kategorie:focus {
    background-image:
        linear-gradient(45deg, var(--vg_select_classic_focus) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, var(--vg_select_classic_focus) 50%), linear-gradient(to right, var(--hg_select_classic_focus), var(--hg_select_classic_focus));
    background-position:
        calc(100% - 5px) 1em, calc(100% - 10px) 1em, 100% 0;
    background-size:
        5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: var(--vg_body);
    outline: 0;
}

input,
select,
label,
.labbel,
textarea,
.cssnoinput {
    width: 100%;
    padding: 5px;
    min-height: 20px;
    font-size: 1em;
}

.labbel,
label {
    padding-bottom: 3px;
}
.caption label{
	min-height:28px;
}
.zeig_kategorie {
    font-size: 10px;
   min-height: 20px;
}

.css_button {
    background: var(--hg_button);
    background: linear-gradient(to top, var(--hg_button), var(--hg_button_verlauf));
    background-repeat: no-repeat;
    height: 40px;
    color: var(--vg_button);
    cursor: pointer;
}

.css_button {
    padding-top: 2px;
    padding-bottom: 2px;
}

.css_button_bz,
.css_button_preisanfrage,
.css_button_drucken,
.css_button_zurueck,
.css_button_wk,
.css_button_wk_alternativ,
.css_button_trash,
.css_button_aktuell,
.css_button_bestellung_fertig,
.css_button_notiz_edit,
.css_button_notiz_show,
.css_button_wk_loesch,
.css_button_save,
.css_button_einkauf,
.css_button_send,
.css_button_uebernahme,
.css_button_pdf {
    cursor: pointer;
    padding-top: 2px;
    padding-bottom: 2px;
    background: var(--hg_button);
    background-repeat: no-repeat;
    background-position: 10px 3px;
    background-size: 28px auto;
    height: 40px;
    /*  padding-left: 10px;*/
    color: var(--vg_button);
}

.css_button:hover {
    background: linear-gradient(to top, var(--hg_hover_button), var(--hg_button));
}

.css_button_bz:hover,
.css_button_preisanfrage:hover,
.css_button_drucken:hover,
.css_button_zurueck:hover,
.css_button_wk:hover,
.css_button_wk_alternativ:hover;
.css_button_trash:hover,
.css_button_aktuell:hover,
.css_button_bestellung_fertig:hover,
.css_button_notiz_edit:hover,
.css_button_notiz_show:hover,
.css_button_wk_loesch:hover,
.css_button_save:hover,
.css_button_einkauf:hover,
.css_button_send:hover,
.css_button_uebernahme:hover,
.css_blutton_pdf:hover {
    background-color: var(--hg_hover_button);
}

.css_button_save {
    background-image: url(../../img/symbole/speichern_w.png);
}

.css_button_bz {
    background-image: url(../../img/symbole/bestellzettel_w.png);
}

.css_button_trash {
    background-image: url(../../img/symbole/trash_w.png);
}

.css_button_aktuell {
    background-image: url(../../img/symbole/aktualisieren_w.png);
}

.css_button_bestellung_fertig {
    background-image: url(../../img/symbole/bestellung_fertig_w.png);
}

.css_button_notiz_edit {
    background-image: url(../../img/symbole/notizen_erstellen_w.png);
}

.css_button_notiz_show {
    background-image: url(../../img/symbole/notiz_show_w.png);
}

.css_button_wk_loesch {
    background-image: url(../../img/symbole/wk_loesch_w.png);
}

.css_button_wk_alternativ
 {
    background-image: url(../../img/symbole/wk_alternativ_w.png);
}

.css_button_wk,
.css_button_einkauf {
    background-image: url(../../img/symbole/warenkorb_w.png);
}

.css_button_drucken {
    background-image: url(../../img/symbole/drucken_w.png);
}

.css_button_zurueck {
    background-image: url(../../img/symbole/zurueck_w.png);
}

.css_button_send {
    background-image: url(../../img/symbole/preisanfrage_w.png);
}

.css_button_preisanfrage {
    background-image: url(../../img/symbole/preisanfrage_w.png);
}

.css_button_uebernahme {
    background-image: url(../../img/symbole/uebernehmen_w.png);
}

.css_button_pdf {
    cursor: pointer;
    background-image: url(../../img/symbole/pdficon_small.jpg);
    border: none;
    background-color: var(--hg_container);
    color: var(--vg_container);
    text-align: left;
    padding-left: 40px;
}

#lf_adr_aendern {
    padding-top: 10px;
    font-weight: bold;
    padding-bottom: 10px;
    cursor: pointer;
}

.lis_button {
    cursor: pointer;
    display: none;
}

.row {
    clear: both;
    width: auto;
    min-height: 20px;
    float: none;
}

.row:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

.zelle_0,
.zelle_2,
.zelle_5,
.zelle_7,
.zelle_7_5,
.zelle_8,
.zelle_9,
.zelle_10,
.zelle_12,
.zelle_12_5,
.zelle_13,
.zelle_15,
.zelle_15_a,
.zelle_15_b,
.zelle_16,
.zelle_50_px,
.zelle_20,
.zelle_21,
.zelle_24,
.zelle_25,
.zelle_25_button,
.zelle_26,
.zelle_30,
.zelle_32_px,
.zelle_35,
.zelle_35_a,
.zelle_36,
.zelle_40,
.zelle_40_nores,
.zelle_45,
.zelle_46,
.zelle_50,
.zelle_55,
.zelle_56,
.zelle_58,
.zelle_60,
.zelle_60_nores,
.zelle_65,
.zelle_70,
.zelle_75,
.zelle_80,
.zelle_85,
.zelle_86,
.zelle_87,
.zelle_90,
.zelle_95,
.zelle_100,
.zelle_100_px,
.z_20,
.z_80{
    float: left;
    padding-bottom: 3px;
    font-size: 100%;
}

.spalte {
    float: left:
}

.zelle_0 {
    padding-left: 5px;
    padding-right: 10px;
}

.zelle_2 {
    width: 3%;
}

.zelle_5 {
    width: 5%;
}

.zelle_7 {
    width: 6.5%;
}

.zelle_7_5 {
    width: 7.5%;
}

.zelle_8 {
    width: 8%;
}

.zelle_9 {
    width: 9%;
}

.zelle_10 {
    width: 10%;
}

.zelle_12 {
    width: 12%;
}

.zelle_12_5 {
    width: 12.5%;
}

.zelle_13 {
    width: 13.5%;
}

.zelle_15 {
    width: 15%;
}

.zelle_15_a {
    width: 16.5%;
}

.zelle_15_b {
    width: 17.5%;
}

.zelle_16 {
    width: 16%;
}

.zelle_20 {
    width: 19%;
}

.zelle_21 {
    width: 21.5%;
}

.zelle_24 {
    width: 23%;
}
.z_20,
.zelle_25 {
    width: 25%;
}

.zelle_25_button {
    width: 24%;
}

.zelle_26 {
    width: 26%;
}

.zelle_30 {
    width: 30%;
}

.zelle_32_px {
    width: 40px;
}

.zelle_35 {
    width: 35%;
}

.zelle_35_a {
    width: 33.5%;
}

.zelle_36 {
    width: 38%;
}

.zelle_40_nores,
.zelle_40 {
    width: 40%;
}

.zelle_45 {
    width: 45%;
}

.zelle_46 {
    width: 46%;
}

.zelle_50 {
    width: 50%;
}

.zelle_54 {
    width: 54%;
}

.zelle_55 {
    width: 55.5%;
}

.zelle_56 {
    width: 56.9%;
}

.zelle_58 {
    width: 56.3%;
}

.zelle_60_nores,
.zelle_60 {
    width: 60%;
}

.zelle_65 {
    width: 65%;
}

.zelle_70 {
    width: 69.5%;
}
.z_80,
.zelle_75 {
    width: 75%;
}
.z_80,
.zelle_80 {
    width: 80%;
}

.zelle_85 {
    width: 85%;
}

.zelle_86 {
    width: 86%;
}

.zelle_87 {
    width: 87%;
}

.zelle_90 {
    width: 90%;
}

.zelle_95 {
    width: 91.2%;
}

.zelle_100 {
    width: 100%;
}

.zelle_50_px {
    width: 50px;
}

.zelle_100_px {
    width: 100px;
}

/* special format for label element */
.label,
.label_nores {
    margin-bottom: 10px;
    padding: 0 5px;
}

.label,
.label_nores {
    display: block;
    color: var(--vg_textbox);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
}

.label label.weiss {
    color: var(--vg_button);
}

.label.wrap label {
    white-space: normal;
}

.clear {
    clear: both;
}

.top_land {
    text-align: right;
    margin-top: -20px;
    margin-right: 20px;
    cursor: pointer;
}

.har_ini {
    font-size: 1em;
    margin-top: 10px;
}

.flex-formular,
.flex-detail {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.flex-rahmen {
    display: flex;
    width: 100%;
    border: 1px solid var(--vg_rahmen);
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.flex-neutral {
    display: flex;
    padding: 10px;
}

.flex-container,
.flex-tabelle {
    display: flex;
    background-color: var(--hg_container);
}

.flex-bottom,
.flex-bottom_foot {
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: center;
}

.flex-top {
    display: flex;
    background-color: white;
    align-items: right;
    justify-content: right;
}

.flex-tabelle {
    border: 1px solid var(--vg_rahmen);
    /*	border-top:none;*/
    flex-wrap: wrap;
}

.flex-container_tab {
    display: flex;
}

.flex-container_lis {
    display: flex;
    flex-direction: column;
    background-color: white;
    flex-wrap: wrap;
}

.flex-container_row {
    display: flex;
    flex-direction: row;
    background-color: white;
    flex-wrap: wrap;
}

.flex-item_tab {
    flex: 1;
    text-align: right;
}

.flex-item,
.flex-item2 {
    margin-left: 10px;
}

.flex-spalte_res {
    display: none;
    width: 20%;
    float: left;
}

. {
    width: 25%;
    border-right: 1px solid var(--vg_rahmen);
    padding: 3px;
}

.flex-spalte_0 {
    padding: 3px;
}

.flex-spalte_5 {
    width: 5%;
    padding: 3px;
}

.flex-spalte_7 {
    width: 7.5%;
    padding: 3px;
}

.flex-spalte_10 {
    width: 10%;
    padding: 3px;
}
.flex-spalte_12_5 {
    width: 12.5%;
    padding: 3px;
}

.flex-spalte_15 {
    width: 15%;
    padding: 3px;
}

.weiete_165 {
    min-width: 165px;
}

.flex-spalte_20 {
    width: 20%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_25 {
    width: 25%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_30 {
    width: 30%;
    /*  border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_35 {
    width: 35%;
    /*  border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_33 {
    width: 32%;
    /*  border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_40 {
    width: 40%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_45 {
    width: 45%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_50 {
    width: 50%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_55 {
    width: 55%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_60 {
    width: 60%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_75 {
    width: 73%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_70 {
    width: 70%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_r_80 {
    float: right;
}

.flex-spalte_80,
.flex-spalte_r_80 {
    width: 78%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_90 {
    width: 90%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_100 {
    width: 100%;
    /*border-right: 1px solid var(--vg_rahmen);*/
    padding: 3px;
}

.flex-spalte_gesamt {
    width: 100%;
    /*border-right: 1px solid var(--vg_rahmen);*/
}

.flex-spalte_3 {
    flex: 1;
    padding: 3px;
}

.flex-top-left {
    padding-top: 10px;
    margin-left: 10px;
}

.flex-top-right {
    text-align: right;
    font-size: .8em;
    flex: 1;
}

.flex-nav-left {
    width: 200px;
    padding: 0px;
    /* font-size: 10px;*/
}

.flex-main {
    flex: 1;
    padding-top: 0px;
    padding-left: 25px;
    min-height: 600px;
}

.flex-foot {
    flex: 1;
    width: 100%;
    text-align: center;
    background: var(--hg_menue);
    /*   padding-top: 8px;
    padding-left: 200px;*/
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue_verlauf)), to(var(--hg_menue)));
    background: -moz-linear-gradient(top, var(--hg_menue_verlauf), var(--hg_menue));
    background: linear-gradient(to top, var(--hg_menue_verlauf), var(--hg_menue));
    background-repeat: no-repeat;
    color: var(--vg_menue);
    font-size: 12px;
    margin-bottom: 0px;
}

.flex-foot a {
    color: var(--vg_menue);
    text-decoration: none;
}

.gerade_zeile {
    background-color: var(--hg_zeilen_even);
    color: var(--vg_zeilen_even);
}

.ungerade_zeile {
    background-color: var(--hg_zeilen_odd);
    color: var(--vg_zeilen_odd);
}

.label_link {
    cursor: pointer;
}

.css_info_item img {
    width: auto;
    height: 32px;
}

#in_seite {
    font-size: .8em;
    padding-bottom: 15px;
}

.nav_links {
    padding-top: 0px;
    padding-bottom: 20px;
}

#navigation ul {
    list-style-type: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
    margin: 0;
    /* Remove margins */
}

#navigation {
    margin-top: 0px;
    width: 100%;
    line-height: 30px;
}

#navigation ul {}

/* Global Styles - Teil 1 */
#navigation ul li {
    padding-left: 5px;
    background-color: var(--hg_menue_links);
    border-left: 1px solid var(--hg_menue);
    border-right: 1px solid var(--hg_menue);
    border-bottom: 1px solid var(--vg_menue);
    text-align: left;
    font-size: 12px;
}

#navigation ul li img {
    padding-left: 14px;
}

#navigation ul li a {
    text-decoration: none;
    color: var(--vg_menue_links);
    display: block;
}

#navigation ul li:hover,
#navigation ul li a:hover {
    color: var(--vg_hover_menue_links);
    background-color: var(--hg_hover_menue_links);
    /* margin-left: 0;
	font-size: 12px;*/
}

#navigation ul li.nav_kopf {
    background-color: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue_verlauf)), to(var(--hg_menue)));
    background: -moz-linear-gradient(top, var(--hg_menue_verlauf), var(--hg_menue));
    background: linear-gradient(to top, var(--hg_menue_verlauf), var(--hg_menue));
    background-repeat: no-repeat;
    color: var(--vg_menue);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-left: 1px solid var(--hg_menue);
    border-right: 1px solid var(--hg_menue);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

#navigation ul li.nav_unten {
    background-color: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue_verlauf)), to(var(--hg_menue)));
    background: -moz-linear-gradient(top, var(--hg_menue_verlauf), var(--hg_menue));
    background: linear-gradient(to top, var(--hg_menue_verlauf), var(--hg_menue));
    background-repeat: no-repeat;
    line-height: 10px;
    border-left: 1px solid var(--hg_menue);
    border-right: 1px solid var(--hg_menue);
}

.kopfzeile {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--vg_h1);
}

.untertitel {
    padding-top: 15px;
    padding-right: 15px;
    font-size: 1em;
    line-height: 1.5em;
}

#kopf_klein {
    display: none;
}

.img_klein {
    width: 28px;
    height: 28px;
}

#lis_variante,
#lis_beschreibung {}

.lis_detail_resp {
    display: none;
}

.lis_detail_normal {
    display: block;
}

.img_artikel img {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.bestell_liste_detail img {
    padding: 3px;
    width: 60%;
    height: auto;
}

.bestell_liste img {
    padding: 3px;
    width: auto;
    height: 60px;
}

.bz_artikel_liste img {
    padding: 3px;
    /*width: 90px;*/
    width: 100%;
    height: auto;
    text-align: center;
}

.artikel_liste_wk img {
    /*padding: 3px;*/
    /*width: 90px;*/
    width: 60%;
    height: auto;
    text-align: center;
}

.artikel_liste img,
.bz_bild_artikel_liste img {
    width: 60%;
    height: auto;
    text-align: center;
}

.weite_218 {
    /*min-width:220px;*/
}

.artikel_detail img {
    padding: 3px;
    width: 100%;
    max-width: 360px;
    height: auto;
}

#artikel_filter {
    display: none;
    background-color: white;
}

.bild_artikel_liste {
    /*background-color:#F2F2F2;*/
    padding: 3px;
    width: 100%;
    text-align: center;
}

.bz_bild_artikel_liste {
    /*background-color:#F2F2F2;*/
    padding: 3px;
    text-align: center;
}

.kategorie {
    padding-top: 6px;
}

.css_border {
    border: 1px solid var(--vg_rahmen);
}
.css_border_o {
    border-top: 1px solid var(--vg_rahmen_dunkel);
}

.css_border_o_u_r {
    border-top: 1px solid var(--vg_rahmen_dunkel);
    border-bottom: 1px solid var(--vg_rahmen_dunkel);
    border-right: 1px solid var(--vg_rahmen_dunkel);
}
.css_border_u_r {
    
    border-bottom: 1px solid var(--vg_rahmen_dunkel);
    border-right: 1px solid var(--vg_rahmen_dunkel);
}
.css_border_u {
    border-bottom: 1px solid var(--vg_rahmen_dunkel);
}

.css_border_u_fine {
    border-bottom: 1px solid var(--vg_rahmen_fine);
}

.css_border_l {
    border-left: 1px solid var(--vg_rahmen_dunkel);
}

.css_border_r {
    border-right: 1px solid var(--vg_rahmen_dunkel);
}
#div_frage {
    padding-top: 10px;
}

.css_wk_titel {
    font-weight: bold;
    border-bottom: 1px solid var(--vg_rahmen);
    border-top: 1px solid var(--vg_rahmen);
    background-color: var(--hg_menue_links);
}

.css_foot {
    color: var(--vg_menue);
    background-color: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue)), to(var(--hg_menue_verlauf)));
    background: -moz-linear-gradient(top, var(--hg_menue), var(--hg_menue_verlauf));
    background: linear-gradient(to top, var(--hg_menue), var(--hg_menue_verlauf));
    background-repeat: no-repeat;
    font-size: .8em;
    padding-top: 3px;
    padding-bottom: 3px;
    ;
}

.css_foot a {
    color: var(--vg_menue);
}

.css_foot label {
    padding-right: 10px;
}

.css_m_top {
    margin-top: 30px;
}

.css_m_top_10 {
    margin-top: 10px;
}

.css_m_top_15 {
    margin-top: 15px;
}

.css_right {
    float: right;
}

.css_links,
.css_links_res {
    text-align: left;
}

.css_rechts {
    text-align: right;
}

.css_left_res {
    text-align: left;
}

.css_center,
.css_center_res {
    text-align: center;
}

.css_info {
    color: red;
}

.css_pointer {
    cursor: pointer;
}
.css_nobold
{
font-weight:normal;
}

.css_bold {
    font-weight: bold;
}

.css_u_border {
    border-bottom: 1px solid var(--vg_rahmen);
}

.css_r_border {
    border-right: 1px solid var(--vg_rahmen);
}

.css_l_border {
    border-left: 1px solid var(--vg_rahmen);
}

.css_o_border {
    border-top: 1px solid var(--vg_rahmen);
}

.css_u_border_fine {
    border-bottom: 1px solid var(--vg_rahmen_fine);
}

.css_o_border_fine {
    border-top: 1px solid var(--vg_rahmen_fine);
}

.css_tabelle {
    font-size: .9em;
}

.css_thead,
.css_thead_ohne_link {
    border-top: 1px solid var(--vg_rahmen);
    font-weight: bold;
    text-align: center;
    background-color: var(--hg_th);
}

.css_thead {
    cursor: pointer;
}

.tab_kopf {
    background-color: var(--hg_menue_links);
    font-size: 1em;
}

.tab_wk_liste {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 10px;
}

.tab_bestell_liste {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 1em;
    margin-bottom: 10px;
}

.seitentitel {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--vg_h1);
    padding: 10px;
}

.seitenuntertitel {
    font-weight: bold;
    color: var(--vg_h1);
    font-size: 1em;
    padding-left: 10px;
}

.seitentext {
    border-top: 2px solid var(--vg_rahmen);
    padding-top: 20px;
    font-size: 1em;
}

#row_lieferadresse {
    display: none;
}

.harmonica_titel,
.lis_kopf,
.lis_titel {
    width: 100%;
    background-color: var(--hg_menue_links);
    font-weight: bold;
    text-align: center;
}

.lis_titel {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.harmonica_titel {
    text-align: left;
    margin-right: 5px;
    padding: 5px;
    width: 98%;
}

.harmonica_titel {
    cursor: pointer;
}

.lis_meine_daten {
    width: 100%;
    text-align: left;
}

.lis_klein_akt {
    font-size: .8em;
    padding-left: 10px;
    font-weight: normal;
    width: 100%;
}

.lis_artikelnr,
.lis_kategorie,
.lis_hersteller {
    font-size: 1.2em;
}

.lis_bezeichnung1,
.lis_preis,
.lis_anzahl {
    font-size: 1.2em;
}

.lis_bezeichnung1_wk,
.lis_preis_wk,
.lis_anzahl_wk,
.lis_einheit_wk {
    font-size: .9em;
}

.lis_bezeichnung1_wk {
    font-size: 1em;
    font-weight: bold;
}

.lis_beschreibung {
    font-size: 1em;
}

.lis_bezeichnung2 {
    font-size: 1em;
}

.lis_bild {
    text-align: left;
}

.lis_preis,
.lis_anzahl,
.lis_rabatt,
.lis_anzahl_wk,
.lis_einheit_wk,
.lis_preis_wk {
    font-size: 1em;
    text-align: right;
}

.lis_preis {
    font-weight: bold;
}

.lis_preis_feld,
.lis_anzahl_feld {
    text-align: right;
}

.lis_rabatt {
    text-decoration: line-through;
}

.lis_anzahl_input {
    text-align: right;
}

.lis_wk {
    padding-left: 5px;
    cursor: pointer;
}

.lis_wk img {
    margin-left: 10px;
}

.lis_hoch {
    margin-top: -2px;
}

.lis_hinweis,
.lis_info,
.lis_info_wk {
    text-align: center;
    padding-bottom: 10px;
}

.lis_ve,
.lis_mwst,
.lis_versand,
.lis_hinweis,
.lis_klein {
    font-size: xx-small;
    font-weight: normal;
}

.lis_ve {
    text-align: left;
    color: red;
    font-weight: bold;
}

.lis_wk_notiz {
    margin-top: 10px;
}

.lis_dokumente {
    padding-left: 10px;
}

.lis_preis_wk,
.lis_anzahl_wk,
.lis_einheit_wk {
    padding-top: 0px;
}

.lis_artikelnr,
.lis_artikelnr_wk {}

.img_wk:active {
    opacity: 1;
}

.img_wk:hover {
    opacity: 0.3;
}

#wk_inhalt,
#wk_gp {
    padding-right: 5px;
}

.lis_wk_gp {
    display: block;
    padding-top: 40px;
}

#wk_gp_res,
#wk_v_rabatt {
    float: right;
    font-weight: bold;
}

#wk_aa_res {
    font-weight: bold;
}

#check_budget,
#check_fracht_frei {
    background-color: #eeeeee;
    margin-bottom: 10px;
}

.check_blue {
    background-color: skyblue;
}

.check_yellow {
    background-color: yellow;
}

#div_suche {
    border: 0px solid var(--vg_rahmen);
    display: none;
    margin-top: -15px;
    margin-bottom: 10px;
    height: 43px;
    width: 100%;
    background-color: white;
}

.css_rechts {
    text-align: right;
}

/* #############################################################################################################*/
.fusszeile {
    padding-top: 1em;
    padding-bottom: 0.5em;
    text-align: center;
    color: var(--vg_button);
    background: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_hover_menue)), to(var(--hg_hover_button)));
    background: -moz-linear-gradient(top, var(--hg_hover_menue), var(--hg_menue));
    background: linear-gradient(to top, var(--hg_hover_menue), var(--hg_hover_menue));
    background-repeat: no-repeat;
    font-size: 0.5em;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

.css_anzeige_anzahl_top {
    float: right;
    text-align: right;
}

.css_anzeige_anzahl_bottom {
    text-align: center;
}

#id_big_bild {
    display: none;
    position: absolute;
    background: var(--hg_formular);
    z-index: 2005;
}

#id_big_bild img {
    width: 100%;
    height: auto;
    padding: 10px;
}

#dialog_maske,
    {
    display: none;
    position: absolute;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    border-left: solid 1px var(--vg_rahmen);
    border-right: solid 4px var(--vg_rahmen);
    border-top: solid 1px var(--vg_rahmen);
    border-bottom: solid 4px var(--vg_rahmen);
    color: var(--vg_body);
    background: var(--hg_formular);
    min-width: 300px;
    max-width: 40em;
    top: 120px;
    z-index: 2005;
}

#cssvedialog,
#cssweitereeingabe,
#dialog_maske,
#dialog_maske_cf,
#login_maske,
#dialog_maske_be,
#mit_dialog_maske {
    display: none;
    position: absolute;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    border-left: solid 1px var(--vg_rahmen);
    border-right: solid 4px var(--vg_rahmen);
    border-top: solid 1px var(--vg_rahmen);
    border-bottom: solid 4px var(--vg_rahmen);
    color: Black;
    background-color: var(--hg_rahmen);
    min-width: 300px;
    /* min-height: 200px;*/
    top: 50px;
    left: 300px;
    z-index: 2006;
}

#dialog_maske_cf {
    min-height: 100px;
    min-width: 35%;
    z-index: 2010;
}

#dialog_maske,
#dialog_maske_cf,
#login_maske,
#mit_dialog_maske {
    padding: 0px;
    top: 130px;
}

.dm_30,
.dm_40 {
    max-width: 35em;
}

.dm_45 {
    max-width: 40em;
}

.dm_50,
.dm_60 {
    max-width: 60em;
}
.dm_65 {
    max-width: 65em;
}
.dm_55 {
    width: 55%;
}

.dm_30 {
    width: 30%;
}

.dm_40 {
    width: 40%;
}

.dm_45 {
    width: 48%;
}

.dm_50 {
    width: 50%;
}

.dm_60 {
    width: 60%;
}

.dm_70 {
    width: 70%;
    max-width: 65em;
}

.dm_80 {
    width: 80%;
    max-width: 65em;
}

#cssabblenden,
#cssabblenden2 {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: var(--hg_body);
    z-index: 1001;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

/* CSS Document */
#css_lb_abblenden,
#css_dm_abblenden,
#css_dm_abblenden_cf,
#css_login_abblenden,
#css_pd_abblenden,
#css_be_abblenden,
#mit_css_dm_abblenden,
#css_abblenden {
    display: none;
    position: fixed;
    /*position:				absolute;*/
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /*background-color: var(--hg_body);*/
    z-index: 1001;
}

#css_lb_abblenden {}

#css_dm_abblenden_cf {
    z-index: 2001;
}

#css_pd_abblenden {
    display: block;
    opacity: 0;
    filter: alpha(opacity=40);
}

#css_dm_formular {
    position: absolute;
    z-index: 2000;
}

#kreuz_close {
    cursor: pointer;
    color: white;
    margin-right: 15px;
    float: right;
    margin-top: -30px;
    z-index: 2003;
}

.suche_kreuz {
    margin-left: -15px;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 50%;
}

.css_dm_titel {
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    background: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue)), to(var(--hg_menue_verlauf)));
    background: -moz-linear-gradient(top, var(--hg_menue), var(--hg_menue_verlauf));
    background: linear-gradient(to top, var(--hg_menue), var(--hg_menue_verlauf));
    background-repeat: no-repeat;
    display: block;
    line-height: 2em;
    width: 100%;
    font-size: 1.2em;
    color: var(--vg_menue);
    padding: 2px;
    min-width: 300px;
    text-align: center;
}

.css_dm_titel {
    margin-top: -1px;
}

.css_icon_bottom {
    width: 32px;
    height: 32px;
}

.css_icon_bottom_right,
.css_menue_bottom {
    float: left;
    padding: 1px;
    padding-right: 0px;
    padding-left: 15px;
    cursor: pointer;
}

.css_icon_bottom_right {
    padding-right: 5px;
    padding-left: 15px;
}

.css_menue_bottom_top {
    padding-left: 20px;
}

.css_menue_bottom_bottom {
    padding-right: 20px;
}

#backto,
#downto,
#saveto,
#neuto,
#changeto {
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    position: fixed;
    bottom: 10px;
    right: 0px;
    padding: 5px;
    opacity: 0;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    background-color: var(--hg_menue);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--hg_menue)), to(var(--hg_menue_verlauf)));
    background: -moz-linear-gradient(top, var(--hg_menue), var(--hg_menue_verlauf));
    background: linear-gradient(to top, var(--hg_menue), var(--hg_menue_verlauf));
    background-repeat: no-repeat;
    color: var(--vg_menue);
}

#saveto {}

#downto {
    right: 0px;
}

div.wrapper {
    padding: 5px;
    display: block;
    overflow: auto;
}

.css_tabelle_hintergrund {
    background-color: var(--hg_container);
    color: var(--vg_container);
}

.css_tabelle_hintergrund_markiert {
    background-color: var(--hg_button);
    color: var(--vg_button);
}

table.scroll {
    width: 100%;
    background-color: var(--hg_container);
    font-size: .8em;
}

table.scroll thead {
    width: 100%;
    background: var(--hg_th);
}

table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}

table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: var(--vg_th);
}

table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}

table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}

table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}

table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid var(--vg_rahmen);
    border-left: 1px solid var(--vg_rahmen);
    border-right: 1px solid var(--vg_rahmen);
}

.tbl_sort {
    cursor: pointer;
}

.tab_5,
.tab_10,
.tab_15,
.tab_20,
.tab_25,
.tab_30,
.tab_35,
.tab_40,
.tab_45,
.tab_50,
.tab_60,
.tab_70,
    {
    width: 5%;
}

.tab_8 {
    width: 8.25%;
}

.tab_10 {
    width: 10%;
}

.tab_12 {
    width: 12%;
}

.tab_15 {
    width: 15%;
}

.tab_20 {
    width: 20%;
}

.tab_25 {
    width: 25%;
}

.tab_30 {
    width: 30%;
}

.tab_35 {
    width: 35%;
}

.tab_40 {
    width: 40%;
}

.tab_45 {
    width: 45%;
}

.tab_50 {
    width: 50%;
}

.tab_60 {
    width: 60%;
}

.tab_70 {
    width: 70%;
}

#anmelde_info {
    font-size: .8em;
    color: var(--hg_menue);
    padding-bottom: 10px;
}

.no_standard {
    display: none;
}
.css_no_standard {
    display: none;
}

.no_res {
    display: block;
}
.css_no_res {
    display: inline;
}

#rahmen label {
    padding-top: 10px;
}

.cssloginformular {
    display: block;
    border: 2px solid var(--vg_rahmen);
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    box-shadow: 5px 5px 5px var(--vg_shadow);
    margin: 0 auto;
    margin-bottom: 15px;
    width: 33%;
    background-color: var(--hg_tabelle);
    ;
}

.cssformular,
.cssformular_suche {
    margin: 0 auto;
    display: block;
    width: 99%;
    border: 2px solid var(--vg_rahmen);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.cssformular_suche {
    width: 80%;
}

.cssformularinnen {
    padding: 5px;
    margin-top: 10px;
    width: 100%;
}

.cssformulartitel,
.cssformulartitel_dm {
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    display: block;
    line-height: 2em;
    font-size: 1.2em;
    color: var(--vg_menue);
    background: var(--hg_button);
    background: linear-gradient(to top, var(--hg_button) 25%, var(--hg_button_verlauf) 75%);
    background-repeat: no-repeat;
    text-align: center;
}

.cssformulartitel_dm {
    margin-top: -1px;
    width: 100%;
}

#kopfzeile_klein {
    display: none;
}

.tab_symbol {
    float: right;
}

.tab_symbol img {
    width: 24px;
    height: 24px;
}

input.css_icons {
    padding-right: 25px;
}

img.cssicon {
    cursor: pointer;
    margin-left: -22px;
    vertical-align: middle;
}

img.cssicon_neben {
    cursor: pointer;
    margin-left: -40px;
    vertical-align: middle;
}

img.cssicon_32 {
    cursor: pointer;
    margin-left: -36px;
    margin-top: -3px;
    vertical-align: middle;
}

.css_exit {
    float: right;
    margin-right: 8px;
}
 nav .top_symbole_nores {
        display: block;
    }

	table.festezeile {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px Grey;
    background-color: White;
	
}
table.festezeile {
		font-size:.8em;
	}

table.festezeile thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}

table.festezeile thead th {
    flex: 1 auto;
    display: block;
    background-color: Silver;
}

table.festezeile tbody {
    display: block;
    width: 100%;
    overflow-y: scroll;
    height: auto;
    max-height: 15em;
}
table.festezeile thead tr,
table.festezeile tbody tr {
    display: flex;
}

table.festezeile tbody tr td {
    flex: 1 auto;
    word-wrap: break;
   /* min-height: 25px;*/
	
}

table.festezeile td,
th {
    border: solid 1px Grey;
    
	   
}
	.css_dm_body
	{
	font-size:1em;	
	}