:root {
    --standard_text:    #000000;
    --standard_bg:      #CCCCCC;
    --akzent_bg:        hsl(219, 18%, 26%);
    --akzent_bg_alt:    hsl(219, 18%, 30%);
    --akzent:           #FFAAFF;
    --akzent_alt:       #AAFFFF;
    
    --std_padding:      2px 2px 2px 2px;
    --std_margin:       0px 0px 0px 0px;
    --Seitenkopfhoehe:  150px;
    --Seitenbreite:     1200px;
    --Logohoehe:        100px;
}

@font-face {
    font-family: 'optima';
    src: url('font/OPUS.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin:         0px;
    
    background:     gray;
    color:          black;
    background-image:   url("img/farbe.jpg");
    background-size: cover;
    background-attachment: fixed;
    
    font-family:    sans-serif;
/*     font-family:    'optima'; */
}

a {
    text-decoration:none;
}

h1 {
    
    margin:         0px;
    
    font-size:      30pt;
}


.Highlight {
    background:     hsl(219, 18%, 26%);
}

.Highlight > h2 {
    
    margin:         0px;
    
    font-size:      30pt;
    color:          #FBBB00;
    text-shadow:    1px 2px 2px rgba(0, 0, 0, 0.6);
    text-align:     center;
}

p {
    
    font-size:      14pt;
}

article {
    
    margin:         20px;
    padding:        20px;
    border-radius:  10px;
    
    background:     white;
    box-shadow:     0px 5px 10px -5px black;
}

.ul_Navigation {
    
    margin:         0px;
    margin-left:    120px;
}

.li_Navigation {
    
    float:          left;
    list-style-type:none;
    
    height:         26px;
    margin:         0px;
    margin-right:   4px;
    padding:        10px;
    padding-top:    4px;
    padding-bottom: 0px;
    border-radius:  5px;
    
    color:          white;
    background:     hsl(219, 18%, 30%);
    border:         solid 1px white;
    
    transition:     ease-in-out 0.2s all;
}

li:hover {
    
    color:          hsl(219, 18%, 26%);
    background:     white;
}

textarea {
    
    width:          1110px;
    height:         400px;
}

/* Layoutelemente */

#div_Seitenkopf {
    
    position:       fixed;
    top:            0px;
    left:           0px;
    width:          100%;
    height:         100px;
    padding:        5px;
    
    background:     hsl(219, 18%, 26%);
    box-shadow:     0px -20px 20px 20px black;
    z-index:        1;
}

#div_Logo {
    
    width:          700px;
    height:         100px;
    float:          left;
    
    background-image:   url("img/resch_druck_text.png");
    background-repeat:  no-repeat;
    background-position:left middle;
}

#div_Position {
    
    height:         70px;
    
    color:          white;
}

#div_Navigation {
    
    height:         30px;
    margin-top:     0px;
}

#div_Seiteninhalt {
    
    position:       relative;
    width:          1200px;
    margin:         auto;
    margin-top:     130px;
}

#div_Banner {
    
    height:         250px;
    margin-bottom:  10px;
    background:     purple;
}

.div_Produktbox {
    
    padding:        10px;
}

.div_Produkt {
    
    width:          275px;
    height:         275px;
    margin:         10px;
    float:          left;
    overflow:       hidden;
    
    background:     white;
    border-radius:  10px;
    box-shadow:     0px 5px 10px -5px black;
}

#div_Fusszeile {
    
    width:          100%;
    clear:          left;
    padding:        0px;
    
    background:     hsl(219, 18%, 26%);
    color:          white;
    box-shadow:     0px 20px 20px 20px black;
}


/* #### Produktbilder #### */

.div_Informationstext {
    
    position:           absolute;
    top:                20px;
    left:               580px;
    width:              540px;
    padding:            10px;
    height:             780px;
    overflow:           scroll;
    overflow-x:         hidden;
    
    border:             solid 1px gray;
}

/* #### Inputelemente #### */

.div_Auswahlkontainer {
    width:              550px;
    min-height:         800px;
}

.div_Auswahlelement {
    height:             50px;
    margin-bottom:      16px;
    border-bottom:      solid 1px black;
}

.h3_Auswahl {
    width:              220px;
    float:              left;
}

#div_Zusammenfassung {
    float:              right;
}

input[type="text"] {
    width:              320px;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
}

input[type="email"] {
    width:              320px;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
}

input[type="tel"] {
    width:              320px;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
}

input[type="submit"] {
    width:              550px;
}

#btn_nummer_pruefen {
    width:              320px;
    margin-left:        224px;
}
select {
    width:              320px;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
}

textarea {
    width:              540px;
    height:             200px;
}

/* #### Zusatzelemente #### */

.span_Position_Zusatz {
    
    display:            inline;
    font-size:          14pt;
}

.img_technik {
    
    width:              40%;
    float:              left;
    margin-right:       10px;
}

.div_tecknik {
    
    width:              100%;
    margin-bottom:      20px;
    overflow:           hidden;
}

.div_tecknik h3 {
    position:           inherit;
    color:              inherit;
    font-size:          20pt;
    text-shadow:        none;
}

.div_tecknik p {
    position:           inherit;
}

#div_Cookie {
    position:           fixed;
    bottom:             -250px;
    right:              0px;
    height:             190px;
    width:              450px;
    padding:            0px;
    
    background:         #FBBB00;
    transition:         all 1s ease-in-out;
    
    border-radius:      20px 0px 0px 0px;
    box-shadow:         0px 0px 10px 0px black;
    
    text-align:         justify;
}

#div_Cookie h3 {
    margin:             5px;
    padding:            0px;
    font-size:          18pt;
    text-align:         center;
}

#div_Cookie p {
    margin:             10px;
    padding:            0px;
    font-size:          11pt;
    text-align:         justify;
}

#div_Cookie input {
    position:           absolute;
    bottom:             0px;
    right:              0px;
    margin:             10px;
    padding:            0px;
    font-size:          11pt;
}