*
{
    font-family:'Nunito', Verdana, Trebuchet, sans-serif;
    color:var(--dark);
    font-size:var(--normal_fnt);
    box-sizing:border-box;
    padding:0px;
    margin:0px;
}
body
{
    width:100%;
    background:var(--light);
}
p
{
    padding-bottom:10px;
}
p, a, span, ul li, ul li *
{ 
    font-weight:200;
    font-size:var(--normal_fnt);
}
h1, h2, h3, h4, h5, h6
{
    font-weight:normal;
}
a
{
    text-decoration: none;
    cursor:pointer;
    transition: all 0.2s;
}
a:hover
{
    font-weight:bold !important;
    transition: all 0.2s;
}
.nav_notselected
{
    font-weight:bold !important;
    color:var(--grey_medium) !important;
}
.nav_selected
{
    font-weight:bold !important;
    color:var(--red_dark) !important;
}
ul, li
{
    list-style: none;
}
.big1
{
    font-size:var(--big1) !important;
}
.big2
{
    font-size:var(--big2) !important;
}
.big3
{
    font-weight:normal;
    font-size:var(--big3) !important;
    line-height:var(--big3_height) !important;
}
.small1
{
    font-size:var(--small1) !important;
}
.small2
{
    font-size:var(--small2) !important;
}
.fett, p.fett
{
    font-weight:bold !important;
}
.thin, p.thin
{
    font-weight:200 !important;
}
.normal, p.normal
{
    font-weight:normal !important;
}
.zentriert
{
    text-align:center;
}
.green_medium
{
    color:var(--green_medium) !important;
}
.button_linie
{
    width:100%;
    height:100%;
    padding:8px 10px 6px 10px;
    text-align:center;
    border:2px dashed var(--light);
    border-radius:var(--small_radius);
}
.button_linie p, .button_linie a, .button_linie span
{
    padding-top:0px;
    padding-bottom:0px;
    text-align:center;
    font-size:var(--normal_fnt) !important;
    font-weight:normal;
    color:var(--light) !important;
}
.impressum_linie
{
    width:100%;
    height:100%;
    padding:25px;
    overflow:scroll;
    border:2px dashed var(--grey_dark);
    border-radius:var(--small_radius);
}
.impressum_linie *
{
    font-size:var(--normal_fnt);
}
/* ########################################################################## */
/* all
/* ########################################################################## */
.all
{
    position:relative;
    width:100%;
    min-width:var(--all_width_min);
    padding:0px;
    border:0px solid var(--red_dark);
}
/* ########################################################################## */
/* Navigation Anfang
/* ########################################################################## */
nav
{
    background-image: url(../bilder/white.png);
    background-repeat: repeat;
    position:sticky;
    width:100%;
    left:0px;
    top:0px;
    padding:18px var(--all_right_margin) 21px var(--all_left_margin);
    box-shadow: var(--nav_shadow);
    z-index:1000;
}
.nav_div
{
    display:flex;
    flex-flow: row nowrap !important;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    column-gap:0px;
}
ul.nav_items_container
{
    display:flex;
    flex-flow: row nowrap !important;
    justify-content: center;
    align-items: center;
    align-content: center;
    column-gap:20px;
}
.nav_logo_container
{
    background:transparent;
    display:flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.nav_logo
{
    display:block;
    width:var(--nav_logo_wide);
    border-radius:var(--med_radius);
    box-shadow:var(--img_shadow);

}
ul.nav_items_container a
{
    position:relative;
    font-weight:bold;
    color:var(--grey_medium);
    transition: all 0.2s;
}
ul.nav_items_container a:hover
{
    color:var(--dark) !important;
    transition: all 0.2s;
}
ul.nav_items_container a:before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--dark);
    transform: scaleX(0);
    transition: all 0.2s ease-in-out;
}
ul.nav_items_container a:hover:before
{
    visibility: visible;
    transform: scaleX(1);
}
li.vertical_line
{
    display:inline-block;
    width:0px;
    height:20px;
    border-right:2px dashed var(--red_dark);
}
/* ########################################################################## */
/* Navigation Ende
/* ########################################################################## */
/* */
/* ########################################################################## */
/* Pages Anfang
/* ########################################################################## */
.page
{
    width:100%;
    background:transparent;
    padding:0px;
}
.page_content
{
    width:100%;
    padding:20px var(--all_right_margin) 40px var(--all_left_margin);
}
/* ########################################################################## */
/* ########################################################################## */
.home
{
    background-image: url(../bilder/holz_grau.jpg);
    background-size: cover;
    position:relative;
    top:0px;
    padding-bottom:40px;
    border:0px solid blue;
}
.home *
{
    color:var(--light);
}
svg.home_svg
{
    position:absolute;
    top:0px;
    left:0px;
    display:block;
    width:100%;
    height:var(--home_svg_h);
    border:0px dashed var(--red_dark);
}
/* ########################################################################## */
.home_img_title
{
    position:relative;
    top:0px;
    width:100%;
    border:0px solid black;
}
.home_img_title_relative
{
    position:relative;
    width:100%;
    height:100%;
    border:0px solid black;
}
.home_title
{
    position:absolute;
    right:var(--all_right_margin);
    top:70px;
    color:var(--light);
    text-align:right;
    border:0px solid black;
}
.home_title p:first-child
{
    font-size:var(--big5);
    line-height:80px;
    font-weight:normal !important;
    padding:0px;
}
.home_title p:last-child, .home_title p:last-child span
{
    font-size:var(--big1);
    line-height:36px;
    font-weight:normal;
    margin-top:30px;
    padding:0px;
}
.home_img
{
    margin-left:var(--all_left_margin);
    padding-top:100px;
    width:500px;
    border:0px solid green;
}
.home_img img
{
    width:100%;
}
ul.products
{
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-between;
    align-items: center;
    align-content:center;
    row-gap: 20px;
    column-gap:10px;
    margin-bottom:30px;
}
ul.products li
{
    background:transparent;
    width:var(--product_width) !important;
    height:var(--product_width) !important;
    min-width:var(--product_min_width);
}
ul.products li img
{
    background-size:cover;
    width:100%;
    height:100%;
    border-radius:var(--small_radius);
    border:1px solid var(--grey_medium);
    box-shadow:var(--img_shadow);
    cursor:pointer;
}
div.big_product_img_container
{
    background-color: var(--light);
    position:fixed;
    display:none;
    opacity:0;
    border:1px solid var(--grey_dark);
    border-radius:var(--big_radius);
    box-shadow:var(--img_shadow);
    z-index:4000;
}
div.big_product_img_container img
{
    display:block;
    border-radius:var(--big_radius);
    width:100%;
    height:100%;
}
/* ########################################################################## */
div.handwerk_headline_photo
{
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: center;
    column-gap:40px;
}
h1.handwerk_headline
{
    display:flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
    column-gap:40px;
    width:45%;
}
div.handwerk_photo
{
    background: url(../bilder/tamara.png);
    background-size:cover;
    padding:10px;
    width:var(--photo_w);
    height:var(--photo_h) ;
    margin-top:var(--photo_top);
    border-radius:var(--big_radius);
    box-shadow:var(--img_shadow);
}
div.handwerk_photo_linie
{
    width:100%;
    height:100%;
    border:2px dashed var(--light);
    border-radius:var(--small_radius);
}
.unterschrift
{
    height:130px;
    margin-left:30px !important;
}
.unterschrift img
{
    display:block;
    height:100%;
    margin-left:30px !important;
}
/* ########################################################################## */
#kaufen
{
    position:fixed;
    right:var(--all_right_margin);
    bottom:130px;
    background: url(../bilder/red.png);
    border-radius:var(--big_radius);
    box-shadow:var(--img_shadow);
    z-index:2000;
    padding:10px;
    visibility:visible;
    cursor:pointer;
}
/* ########################################################################## */
/* ########################################################################## */
.verkauf_eintrag
{
    margin-top:20px;
    margin-bottom:40px;
}
p.ort_link, p.ort_link  *
{
    position:relative;
    font-weight:bold !important;
    transition: all 0.2s;
}
p.zeit, p.zeit  *
{
    font-weight:200 !important;
}
p.ort_link a:hover
{
    color:var(--green_medium);
    transition: all 0.2s;
}
/* ######################################### */
p.ort_link a:before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--green_medium);
    transform: scaleX(0);
    transition: all 0.2s ease-in-out;
}
p.ort_link a:hover:before
{
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.2s ease-in-out;
}
/* ######################################### */
svg.page_svg
{
    display:block;
    width:100%;
    margin-top:0px;
    height:var(--page_svg_h);
}
.img_fachl
{
    display:block;
    width:300px !important;
    margin-bottom:20px;
}
.shops
{
    width:100%;
    padding:50px 0px 0px 70px !important;
}
/* ########################################################################## */
/* Pages Ende
/* ########################################################################## */
/**/
/**/
/* ########################################################################## */
/* Footer Anfang
/* ########################################################################## */
footer
{
    background:var(--grey_light);
    padding:60px;
}
footer *
{
    color:var(--dark);
}
footer .button_linie
{
    display:flex;
    flex-flow: column nowrap !important;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius:var(--big_radius);
    row-gap:30px;
    padding:30px;
}
footer .button_linie *
{
    color:var(--dark) !important;
}
ul.footer_items_container, ul.social,  ul.copyright
{
    display:flex;
    flex-flow: row wrap !important;
    justify-content: center;
    align-items: center;
    align-content: center;
    column-gap:30px;
    row-gap:20px;
}
ul.copyright *
{
    font-size:var(--normal_fnt);
}
ul.footer_items_container *
{
    font-weight:bold;
}
ul.social *
{
    padding:0px !important;
    margin:0px !important;
}
ul.social
{
    column-gap:100px;
}
ul.social li
{
    display:inline-block;
    width:35px;
    height:35px;
}
ul.social li img
{
    display:block;
    width:100%;
    height:100%;
}
footer .button_linie img.footer_logo
{
    display:block;
    width:330px;
    margin:0px auto;
    cursor:pointer;
}
/* ########################################################################## */
/* Footer Ende
/* ########################################################################## */

/* ########################################################################## */
/* Datenschutz Anfang
/* ########################################################################## */
.coo_info
{
    background:rgba(96,96,96,0.9);
    position:sticky;
    display:flex;
    flex-flow:column nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width:100%;
    bottom:0px;
    padding:20px 30px;
    border:1px solid var(--dark);
    z-index:5000;
}
.coo_info p, .datenschutz_button
{
    text-align:center;
    color:var(--light);
}
.datenschutz_button
{
    background: none;
    display: inline;
    font-weight:normal;
    padding:10px 15px;
    border-radius:var(--small_radius);
    margin:0px auto;
}
.accept_button
{
    background: url(../bilder/red.png);
    display:block;
    border-radius:var(--big_radius);
    padding:10px;
    cursor:pointer;
    box-shadow:var(--small_shadow);
    transition:all 0.2s;
}
accept_button:hover
{
    box-shadow:none;
    transition:all 0.2s;
}
/* ########################################################################## */
/* Datenschutz Ende
/* ########################################################################## */

/* ########################################################################## */
/* Impressum Anfang
/* ########################################################################## */
#impressum
{
    background-image: url(../bilder/white.png);
    background-repeat: repeat;
    position:absolute;
    padding:15px;
    border:2px solid var(--dark);
    border-radius:var(--big_radius);
    box-shadow:var(--img_shadow);
    z-index:6000;
    display:none;
    opacity:0;
}
.impressum_linie h3
{
    font-weight:bold;
    font-size:var(--big1);
    padding:10px 0px;
    color:var(--green_medium);
}
.impressum_linie h3:first-child
{
    padding-top:0px;
}
.impressum_linie
{
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.impressum_text
{
    display:flex;
    flex-flow:column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}
.impressum_close
{
    background-image: url(../bilder/red.png);
    background-repeat: repeat;
    padding:10px;
    margin-top:20px;
    border-radius:var(--big_radius);
    box-shadow:var(--small_shadow);
    cursor:pointer;
    transition:all 0.2s;
}
.impressum_close:hover
{
    box-shadow:none;
    transition:all 0.2s;
}
/* ########################################################################## */
/* Impressum Ende
/* ########################################################################## */