:root{
    --tc : #091011; /*Textcolor*/
    /*--tsc : #2a4e56;*/
    --tsc: #e0f4f5a0; /*Text-shadowcolor*/
    --ahc : #4d928a; /*a-hovercolor*/

    --hc : #a7d1d2; /*headercolor*/
    /*--hc : #a7d1d2b0; /*mobil*/

    --hca: #a7d1d2d0; /*headercolor with alpha */ /*alternativ: #c6e5e6d0*/
    /*--hca: #a7d1d248; /*mobil*/

    --bsc: #2e5052;  /*box-shadow color*/
    --bsca: #2e505280; /*box-shadow color with alpha*/
    --bsct: #2e505200; /*box-shadow color transparent*/
    
    --ec: #85b7bb;    /*elemet color (e.g. links)*/
    /*--ec: #85b7bb2d; /*mobil*/

    --eca: #85b7bbd0; /*elemt color with alpha */
    /*--eca: #85b7bb1a; /*mobile*/

    --ac : #e0f4f5; /*li hover color*/
    /*--ac : #4e968d; /*mobil*/

    --grad_start: #fafdff; /*gradient start color (for header and footer)*/
}



/* orig:

:root{
    --tc : #fafdff; 
    --tsc : #163d52;
    --ahc: #81b3db;
    --bsc : #005e9b;
    --hc: #0083ce;
    --hca: 0083ced0;
}
*/


body{
    font-size: 100%;
    background-color: #f2f1f0;
    margin: 0px; 
    padding: 8px;
    font-family:  "Verdana", "sans serif" ;
    /*background-image: url('medien/Hintergrund.png');*/
    background-image: url('medien/hg2.svg');
    background-repeat: repeat;
    background-attachment: fixed; /*fixed*/
    background-size: 25%; /*cover*/
    background-position: left top; /*ohne*/

}


h1{
    font-size: 2.0em;
    font-family: "Georgia","serif";
    text-shadow: 3px 3px 3px var(--tsc);/*#0b0b0b;*/
}

h2{
    font-size: 1.6em;
    font-family: "Georgia","serif";
    text-shadow: 2px 2px 2px var(--tsc);/*#0b0b0b;*/
}

h3{
    font-size: 1.4em;
    font-family: "Georgia","serif";
    text-shadow: 1px 1px 1px var(--tsc);/*#0b0b0b;*/
}

p{
    font-size: inherit;
    font-family: inherit;
    line-height: 25px;
    display: block;
    margin-block-start: 10px;
}

ul{
    list-style-type: disc;
    font-size: inherit;

}

ol{
    font-size: inherit;
}

ol li::marker {
    font-size: 1.4em;
}

#container{
    width: inherit;
    font-family: inherit;
    width: auto;
    height: auto;
    padding-top: 50px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 50px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    color: var(--tc); /* #fafdff;*/
    text-shadow: 0 0 10px var(--tsc); /*#163d52;*/
    line-height: 20px;
}

#menu a{
    color: inherit;
    background-color: inherit;
    font-family: inherit;
    font-size: 1.2em;
    line-height:1.5em;
    text-decoration: none;
}

#menu_mobil_nav{
    display:none;
}


a{
    color: inherit;
    background-color: inherit;
    font-family: inherit;
}

a:hover{
    color: var(--ahc);/*#81b3db;*/
}

a .tooltipText{
    visibility: hidden;
    color:#ffffff;
    background-color: #00000040;
    text-align: center;
    border-radius: 5px;
    padding: 5px 5px;
    /*z-index: 1;
   /* top: -5px;
    right: 110%;*/
    text-decoration: none;
    font-size: 0.8em;
}


a:hover .tooltipText{
    visibility: visible;
}

#kopfleiste{
    margin: 0px 0px 15px 0px; /*trbl reihenfolge: top, right, bottom, left*/
    padding: 1px 1px 1px 25px;
    text-align: center;
    box-shadow: 0px 0px 10px  var(--bsc);/*#005e9b;*/
}


#vermName::after{
    content : "Dr.-Ing. Richard Boerner";
}


#address::after{
    content : "Sassenstraße 9, 17235 Neustrelitz";
}


#tel::after{
    content : "03981-4898097";
}

#leftBar{
    width: auto;
    height: auto;
    background-color: var(--ec);/*#0083ce;*/
    float: left;
    margin: 0px 15px 0px 0px;
    padding: 10px;
    box-shadow: 0px 0px 10px var(--bsc);/* #005e9b;*/
}


#menu li.li_current{
    /*background-image: linear-gradient(0deg, #143a5280, #2675a300 60%);*/
    background-image: linear-gradient(0deg, var(--bsca), var(--bsct) 60%);
}

#menu a.li_current{
    background-image: linear-gradient(0deg, var(--bsca), var(--bsct) 60%);
}


#menu ul.menu_ul_active li:hover{
    /*font-size: 1.3em; .. bissl nervig*/
    color: var(--ac);/*#ffffff;*/
    text-shadow: 0 0 15px var(--ac);/*#ffffff;*/
}

#menu a:hover{
    color: var(--ac);/*#ffffff;*/
    text-shadow: 0 0 15px var(--ac);/*#ffffff;*/
}


.header{
    color: var(--tc);/*#fafdff;*/
    text-shadow: 0 0 5px var(--tsc);/*#163d52;*/
    background-color: var(--ec);/*#0083ced0;*/
    /*background-image: radial-gradient(farthest-side at -45% -25%,#fafdff,#00609780);*/
    background-image: radial-gradient(farthest-side at -45% -25%,var(--grad_start),var(--eca));
}




#content{
    width: auto;
    height: auto;
    min-height: 300px;
    background-color: var(--hca);/*#0083ced0;*/
    overflow: hidden; /*Eigentlich zum verbergen von übergroßen Inhalt, 
                        in kombi mit Float element wird das gefloatete Element aber berücksichtigt,
                        als sei es noch Teil des FLusses -> rechnerische Vergrößerung*/
    padding: 20px 40px 20px 40px;
    margin: 0px 0px 15px 0px;
    box-shadow: 0px 0px 10px  var(--bsc);/*#005e9b;*/
    color: var(--tc);/*#f2f3ff;*/
    text-shadow: 0 0 5px var(--tsc);/*#163d52;*/
    text-align: justify;
    font-size: 1.1em;
    display: block;
}

#content div.content_block{

    border-style: solid;
    border-color: var(--bsc);/*#0083ce;*/
    margin: 0px 0px 20px 0px;
}

#content div.flex_layout div.frst{
    margin : 0px 10px 0px 0px;
}

#content div.flex_layout div.mid{
    margin : 0px 10px 0px 10px;
}

#content div.flex_layout div.last{
    margin : 0px 0px 0px 10px;
}

/*
usefull for additional information or subpages

#content div.content_block:hover{

    background-color:  var(--ahc);
}*/


#content_header{
    width: inherit;
    height: auto;
    background-color: var(--hc);/*#0175b8;*/
    margin: 0px;
    padding: 0.9em;
}

#content_header h2{
    margin: 0px;
}

#page_Main{
    width: auto;
    height: auto;
    min-height: 300px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}


#footer{
    width: auto;
    height: auto;
    background-color: var(--eca);/*#0083ce90*/;
    padding: 0px 0px 0px 15px;
    margin: 15px 0px 0px 0px;
    box-shadow: 0px 0px 10px  var(--bsc);/*#005e9b;*/
    text-align: center;
    /*background-image: radial-gradient(farthest-side at 145% 175%,#fafdff,#00609780);*/
    background-image: radial-gradient(farthest-side at 145% 175%,var(--grad_start),var(--eca));
}

#footer p::before{
    content: "Copyright © 2023 Dr.-Ing. Richard Boerner"

}

iframe{
    box-shadow: 0px 0px 10px  var(--bsc);/*#005e9b;*/
    padding: 0px;
    margin: 5px 5px 15px 5px;
}

form{
    padding: 5px;
    margin: 5px;
}

fieldset{
    border-color: #a8d0ea; 
}

form .button{
    background-color: var(--ec);/*#1276b1;*/
    box-shadow: 0px 0px 1px  var(--bsc);/*#005e9b;*/
    color: var(--tc);/*#ececec;*/
    text-shadow: none;
    width : auto;
    font-size: 1.0em;
    height: 2.0em;
    border-color: var(--ac);/*#d2cee6;*/

}

form .button:hover{
    background-color: var(--ahc);/*#024c78;*/
}


#sendMailForm fieldset input[type = text]{
    width:600px;
}

#sendMailForm fieldset textarea{
    width:600px;
}

/*"table" at kontakt site*/

div.div_td_kont span.span_kontakt_sym{
    float: left;
    width: auto;
    margin: 0px 10px 0px 0px;
}

div.div_td_kont span.span_kontakt_txt{
    display: block;
    overflow: hidden;
    padding: 0px 0px 0px 10px;
    width: auto;
}

#tcsymtxt div.div_td_kont{
    margin:1.9em 0px 0px 0px;
}

a.blind_a{
    text-decoration: none;
}

@media(max-width:1100px){
    
#sendMailForm fieldset input[type = text]{
    width:400px;
}
  
#sendMailForm fieldset textarea{
    width:400px;
}

}


.clearfix::before{
    content:"";
    display: table;
}

.clearfix::after{
    clear:both;
}


div.flex_layout{
    display:flex;
    flex-direction: row;
}

@media (max-width:1100px){
    div.flex_layout{
        flex-direction: column;
    }

    
    #content div.flex_layout div.frst{
        margin : 0px 0px 2px 0px;
    }

    #content div.flex_layout div.mid{
        margin : 2px 0px 2px 0px;
    }

    #content div.flex_layout div.last{
     margin : 2px 0px 0px 0px;
    }    
}

div.flex_layout  div{
    margin: 10px;
}