html, body
{
    background: url(/HSH_img/Hausservice.jpg) no-repeat center center fixed;
/*    background-color: #64645D; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif;
    color: #64645D;
    font-size: 1em;
    scroll-behavior: smooth; }

* { margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box; 
    box-sizing: border-box; }

/* _________________________________________ */


@media screen {
    }

@media print {
    }

header, nav, main, article, section, aside, footer {
    display: block; }

/* _________________________________________ */


header {
        background-color: #FFFFFF; opacity: 0.75;
/*        text-shadow: 2px 2px 6px #4A6DA7;*/
        position: relative;
        max-width: 1140px;
        height: auto;
        font-family: Verdana;
        color: #4A6DA7;
        padding-top: 12px;
        padding-bottom: 12px;
        margin: auto;
        -moz-box-shadow:    0px 15px 15px 0px #9C9C9C ,
                            0px  0px 15px 0px #9C9C9C;
        -webkit-box-shadow: 0px 15px 15px 0px #9C9C9C ,
                            0px  0px 15px 0px #9C9C9C;
        box-shadow:         0px 15px 15px 0px #9C9C9C ,
                            0px  0px 15px 0px #9C9C9C;
        }

@media only screen and ( min-width: 1080px )
    { header { font-size: 4.5em; }
    }

@media only screen and (max-width: 639px)
    { header { font-size: 2em; }
    }

@media only screen and ( min-width: 640px ) and ( max-width: 749px )
    { header { font-size: 2.5em; }
    }

@media only screen and ( min-width: 750px ) and ( max-width: 827px )
    { header { font-size: 3em; }
    }

@media only screen and ( min-width: 828px ) and ( max-width: 989px )
    { header { font-size: 3.5em; }
    }

@media only screen and ( min-width: 990px ) and ( max-width: 1079px )
    { header { font-size: 4em; }
    }

/* _________________________________________ */


    #image {
        background-image: url(/KBR_img/KBR-Dienstleistungen.jpg);
        background-position: center bottom 10%; }
    
    #head_1 {
        float: left;
        width: 35%;
        padding-top: 20px;
        padding-left: 20px; }
    
    #head_1 img { width: 70%; }
    
    #head_text {
        font-size: 0.675em;
        color: #FFFFFF;
        padding: 12px 0px 12px 35%;
        text-shadow: 2px 2px 6px #7EBC00; }
    
    #tab_hd_2 { padding-left: 20px; }
    #tab_hd_3 { padding-left: 40px; }
    #tab_hd_4 { padding-left: 60px; }
    
    .left_20 { left: 20px; }

/* _________________________________________ */


/* Dateipfad */
    #path {
/*      background-color: #9C9C9C; opacity: 1.0; */
    background-image: linear-gradient(to right, #9C9C9C, #FFFFFF);
    position: relative;
    max-width: 1222px;
    height: auto;
    font-size: 0.75em;
    font-family: Arial;
    color: #FFFFFF;
    padding: 8px;
    padding-left: 16px;
    margin: auto;
    -moz-box-shadow:    0px 15px 15px 0px #9C9C9C ,
                        0px  0px 15px 0px #9C9C9C;
    -webkit-box-shadow: 0px 15px 15px 0px #9C9C9C ,
                        0px  0px 15px 0px #9C9C9C;
    box-shadow:         0px 15px 15px 0px #9C9C9C ,
                        0px  0px 15px 0px #9C9C9C; }

    #path a:link    { color:#4A6DA7; text-decoration:none; letter-spacing: 0.02em; }
    #path a:visited { color:#64645D; opacity: 1.0; }
    #path a:focus   { color:#FFFFFF; opacity: 1.0; }
    #path a:hover   { color:#FFFFFF; text-decoration:none; }
    #path a:active  { color:#4A6DA7; }

/* _________________________________________ */


/* Navigation oben */
nav {
    line-height: 1.5;
    font-family: Arial;
    text-transform: uppercase;
    font-size: 1em;
    color:#fff;
    z-index: 1; }

    a { text-decoration: none; color: #fff }

    .navi_top {
        background-color: #7EBC00;
        position: relative;
        max-width: 1140px;
        height: 56px;
/*        font-weight:bold;*/
        font-size: 1em;
        font-family: Arial;
        margin: auto;
        -moz-box-shadow:    0px 15px 15px 0px #9C9C9C ,
                            0px  0px 15px 0px #9C9C9C;
        -webkit-box-shadow: 0px 15px 15px 0px #9C9C9C ,
                            0px  0px 15px 0px #9C9C9C;
        box-shadow:         0px 15px 15px 0px #9C9C9C ,
                            0px  0px 15px 0px #9C9C9C; }

/* Gruppe */
    #steuerung_top li {
        list-style: none;
    	border-left: 2px solid #9C9C9C;
    	border-bottom: 2px solid #9C9C9C;
        float: left; }

/* button */
    #steuerung_top a {
        display: block;
        background-color: #64645D;
        height: 46px;
        min-width: 120px;
        color: #FFFFFF;
        text-decoration: none;
        padding: 12px 20px 12px 20px; }

    .menue-button_top { display: none; }

/* erster button */
    #steuerung_top {
/*        padding-bottom: 10px;*/
        padding-left: 0px; }

    #steuerung_top a:hover {
        color: #4A6DA7;
        background: #9C9C9C; }

    .markh {
        background-color: #FF9B07;
        position: absolute;
        top: -53px;
        height: 5px; }

        #markh1 { left:  12px; width: 141px; }
        #markh2 { left: 153px; width: 233px; }
        #markh3 { left: 386px; width: 202px; }
        #markh4 { left: 588px; width: 196px; }
        #markh5 { left: 784px; width: 122px; }
        #markh6 { left: 906px; width: 122px; }


@media only screen and (max-width: 1080px) {
    .markh {
        position: absolute; }
        #markh1 { left: 40%; width: 0px; }
        #markh2 { left: 40%; width: 0px; }
        #markh3 { left: 40%; width: 0px; }
        #markh4 { left: 40%; width: 0px; }
        #markh5 { left: 40%; width: 0px; }
        #markh6 { left: 40%; width: 0px; }
    }


@media only screen and (max-width: 1080px) {
        .menue-button_top {
        display: block;
        position: absolute;
        padding: 0px;
        color: white;
        cursor: pointer;
        text-decoration: none; }

    .navi_top {
        font-size: 0.875em;
        font-size: 1em;
        z-index: 1;
        box-shadow:         0px  0px 0px 0px #9C9C9C ,
                            0px  0px 0px 0px #9C9C9C; }

    #steuerung_top {
        padding-top: 60px;
        padding-right: 0px;
        padding-left: 150px;
    	display: none; }

    #steuerung_top li {
        right: 0px;
        float: none; }

    #buttonbox {
        position: absolute;
        top: 12px;
        left: 80%;
        height: 32px;           /* 97 */
        width: 50px; }           /* 151 */
    }

    #nav-menue_top:target
        #steuerung_top { display: block; }

    #nav-menue_top:target
        .menue-button-beschr-open { display: none; }

/* _________________________________________ */


/* Navigation oben (Untermenü) */
nav ul {
        float: left;
        position: relative }

nav li {
        list-style: none;
        float: left;
        z-index: 1 }

nav .dropdown { position: relative }

nav li a {
        float: left;
        padding: 5px }

nav li ul { display: none }
nav li:hover ul { display: inline }
nav li li { float: none }

nav .dropdown ul {   /* Untermenü */
        position: absolute;
        left: 0;
        top: 100%;
        background: #FFFFFF;
        padding: 0px 10px 4px 5px;
        border-bottom: 2px solid #64645D; }

nav .dropdown li {white-space:nowrap}    /* Überstand rechts */
nav .dropdown li a {
        width: 180px
/*        padding: 10px 35px;*/
         }

@media only screen and (max-width: 1080px) {
    nav {
        display: none;
        width: 100%;
        clear: both;
        float: none;
        height: 500px;
        overflow-y: scroll; }

/*  nav{padding:10px}*/     /* Menüabstand vom rechten Rand */
    nav ul { float: none }
    nav li {
        float: none;
        z-index: 0 }

    nav ul li a {float: none; }
    }

/* _________________________________________ */


/* Werbeanzeige rechts bzw. links*/
@media only screen and (max-width: 1080px) { /* siehe oben */
        .menue-button_top {
        display: block;
        position: absolute;
        height: 120px;
        width: 188px; }
    }

    #nav-menue:target 
        #banner { display: block; }

    #nav-menue:target 
        .banner-button-beschr-open { display: none ; }

    .banner-button { display: none; }


@media only screen and (max-width: 1080px) {
    .navi_top { z-index: 1; }
    }

@media only screen and (max-width: 1080px) {
    #buttonbox_2 {
        position: absolute;
        left: 1em;
        height: 32px;
        width: 162px;
        top: 4px;
        z-index: 1; }
    .banner-button {
        display: block;
        position: absolute;
        cursor: pointer;
        text-decoration: none; }
    #banner { display: none; }
    }

    #banner-menue:target 
        #banner { display: block; }

    #banner-menue:target 
        .banner-button-beschr-open { display: none ; }

/* _________________________________________ */        
        
        
/* Index-LINK */
    #index li { list-style-type: none; }
    #index { /* float: left; */ }

    .index:link    { text-decoration:none; letter-spacing: 0.02em; }
    .index:visited { background-color:#9C9C9C; opacity: 1.0; }
    .index:focus   { background-color:#9C9C9C; opacity: 1.0; }
    .index:hover   { background-color:#9C9C9C; opacity: 1.0 ;
                     color:#FFFFFF; text-decoration:none; }
    .index:active  { background-color:#9C9C9C; color:#4A6DA7; }

    .index {
        position: relative;
        height: auto;
        color:#4A6DA7;
        padding: 4px 10px 4px 10px;
        letter-spacing: 0.02em; }

    .idx {
        padding-top: 8px;
        padding-bottom: 8px; }

    .tab {
        padding-top: 0px;
        padding-bottom: 8px; }

/* _________________________________________ */


/* Pfeile */
    .arrow:link    { text-decoration:none; letter-spacing: 0.02em; }
    .arrow:visited { background-color:#9C9C9C; opacity: 1.0; }
    .arrow:focus   { background-color:#9C9C9C; opacity: 1.0; }
    .arrow:hover   { background-color:#9C9C9C; opacity: 1.0 ;
                    color:#FFFFFF; text-decoration:none; }
    .arrow:active  { background-color:#9C9C9C;
                    color:#4A6DA7; }

    .arrow {
        position: relative;
        font-size: 1em;
        color:#4A6DA7;
        padding: 10px; }

    #spm_a  { float: right; }
    #spm_t  { float: right; }
    #kap_z  { float: left;  }
    #kap_v  { float: right; }

/* _________________________________________ */


/* Navigation links - entfällt hier */


/* _________________________________________ */


/* Artikel */
article {
    background-color:#FFFFFF;
    position: relative;
    max-width: 1140px;
    padding-bottom: 80px;
    margin: auto;
    -moz-box-shadow:    0px 15px 15px 0px #9C9C9C ,
                        0px  0px 15px 0px #9C9C9C;
    -webkit-box-shadow: 0px 15px 15px 0px #9C9C9C ,
                        0px  0px 15px 0px #9C9C9C;
    box-shadow:         0px 15px 15px 0px #9C9C9C ,
                        0px  0px 15px 0px #9C9C9C; }

    .center { text-align: center; }

    .text {
        background-color:#ECEAE7;
        position: relative;
        font-family: Verdana;
        color: #64645D;
        top: 20px;
        max-width: 840px;
        padding: 50px 50px 80px 50px;
        border:0px #64645D solid;
        margin: auto;
        -moz-box-shadow:     -1px -1px 0px #9C9C9C ,
                             5px 0px 15px #9C9C9C;
        -webkit-box-shadow:  -1px -1px 0px #9C9C9C ,
                             5px 0px 15px #9C9C9C;
        box-shadow:          -1px -1px 0px #9C9C9C ,
                             5px 0px 15px #9C9C9C; }
    
    #text_s { max-width: 640px; }

    .box_100 {
        width: 300px;
        height: auto;
        text-align: center;
        font-size: 1.75em;
        color: #4A6DA7;
        padding-top: 20px;
        padding-bottom: 20px; }

    #box_100 { float: right; }


    .h2   { color: #4A6DA7; padding-bottom: 10px; }
    .h2_c { font-size: 1.75em; color: #4A6DA7; text-align: center; }

@media only screen and ( max-width:520px )
    { .text { padding: 35px 25px 60px 25px; }
/*    .arrow { font-size: 0.875em; }*/
    .tab { font-size: 0.875em; }
    }

@media only screen and ( min-width: 981px )
    { .h1 { font-size: 2.25em; padding-bottom: 40px; }
    .h2 { font-size: 1.75em; }
    .h2_c { font-size: 1.75em; }
    .box_100 { font-size: 1.75em; }
    .h3 { font-size: 1.375em; color: #4A6DA7; font-style: italic; padding-top: 30px; }
    }

@media only screen and ( max-width:520px )
    { .h1 { font-size: 1.75em; padding-bottom: 20px; }
    .h2 { font-size: 1.375em; }
    .h2_c { font-size: 1.375em; }
    .box_100 { font-size: 1.375em; }
    .h3 { font-size: 1.25em; color: #4A6DA7; font-style: italic; padding-top: 25px; }
    }

@media only screen and ( min-width: 521px ) and ( max-width: 980px )
    { .h1 { font-size: 2em; padding-bottom: 30px;}
    .h2 { font-size: 1.625em; }
    .h2_c { font-size: 1.625em; }
    .box_100 { font-size: 1.625em; }
    .h3 { font-size: 1.25em; color: #4A6DA7; font-style: italic; padding-top: 20px; }
    }

    .h4 { font-size: 1.25em; color: #4A6DA7; padding-bottom: 20px; }

/* _________________________________________ */


/* Leistungen */
@import url('https://fonts.googleapis.com/css2?family=Rock Salt&display=swap');

.font {
    font-family: sans-serif;
    padding: 1em; }

.figure_1 {
    width: 250px;
    height: auto;
    float: left;
    font-size: 1.75em;
    padding: 1em 1em 3em 1em;
    border: 1px solid silver;
    margin: 0 1em 2em 1em;
    box-shadow: 10px 0px 25px #555;
    transform: rotate(-1deg); }

.figure_2 {
    width: 250px;
    height: auto;
    float: right;
    font-size: 1.75em;
    padding: 1em 1em 3em 1em;
    border: 1px solid silver;
    margin: 0 1em 2em 1em;
    box-shadow: 10px 0px 25px #555;
    transform: rotate(1deg); }

.figure_1 img {
    width: 100%;
    height: auto; }

.figure_2 img {
    width: 100%;
    height: auto; }

.figcaption {
    font-family: 'Rock Salt', cursive;
    color: #7EBC00;
    padding-top: 1em;
    line-height: 1.2em;
    text-align: center; }

    p { 
        line-height: 150%;
        word-spacing: 0.1em;
        letter-spacing: 0.02em; 
        padding-bottom: 1em; }

    ul { line-height: 150%;
        word-spacing: 0.1em;
        letter-spacing: 0.02em; 
        padding: 8px 0px 8px 10px; }

    ol { line-height: 150%;
        word-spacing: 0.1em;
        letter-spacing: 0.02em; }

    .li_p li {
    padding-bottom: 16px; }

    .f  { padding-left: 20px; }
    .hr hr { color:#4A6DA7; width:100%; }
    .ulu { padding-top: 15px; padding-left: 30px; }

    .f_0  img { width: 100%; padding-bottom: 16px; }

/* _________________________________________ */


/* Anhang */
    section {
        background-color:#ECEAE7;
        position: relative;
        max-width: 1140px;
        height: auto;
        font-family: Verdana;
        font-size: 0.75em;
        padding: 30px 50px;
        margin: auto;
        -moz-box-shadow:     0px 15px 15px 0px #9C9C9C ,
                             0px  0px  0px 0px #9C9C9C;
        -webkit-box-shadow:  0px 15px 15px 0px #9C9C9C ,
                             0px  0px  0px 0px #9C9C9C;
        box-shadow:          0px 15px 15px 0px #9C9C9C ,
                             0px  0px  0px 0px #9C9C9C; }

@media only screen and ( max-width:520px )
    { section { padding: 25px 25px; }
    }

    section li { list-style-type: none; }

    section a {
        color:#4A6DA7;
        text-decoration:none;
        line-height: 250%; }

    section a:hover {
        text-decoration:underline; }

    a { color:#4A6DA7; text-decoration:none; }
    a:hover { text-decoration:underline; }

    #link_a25 { float: left; width: 250px; padding-top: 10px; padding-bottom: 10px; }
    #link_a26 { float: left; width: 250px; padding-top: 10px; padding-bottom: 10px; }
    #link_a27 { float: left; width: 250px; padding-top: 10px; padding-bottom: 10px; }

@media only screen and ( max-width:520px )
    {
    #link_a25 { padding-bottom: 0px; }
    #link_a26 { padding-top: 0px; padding-bottom: 0px; }
    #link_a27 { padding-top: 0px; }
    }

/* _________________________________________ */


/* Fussbereich */
    footer {
        background-color: #7EBC00;
        position: relative;
        max-width: 1140px;
        height: auto;
        font-size: 0.875em;
        font-family: Arial;
        color: #FFFFFF;
        padding: 12px;
        margin: auto;
        -moz-box-shadow:    0px 15px 15px 0px #9C9C9C ,
                            0px  0px  0px 0px #9C9C9C;
        -webkit-box-shadow: 0px 15px 15px 0px #9C9C9C ,
                            0px  0px  0px 0px #9C9C9C;
        box-shadow:         0px 15px 15px 0px #9C9C9C ,
                            0px  0px  0px 0px #9C9C9C; }

    #ff {
        color: #64645D;
        font-style: italic;
        font-size: 1.75em;
        font-family: Times;
        line-height: 125%; }

@media only screen and ( max-width:520px )
    { #ff { font-size: 1.25em; }
    }