/*==============================================================================*/
/*       STYLESHEET FÜR DAS LAYOUT DER WEBSEITE                                 */
/*==============================================================================*/


/*=== alle Seiten ===*/

#header {
    height:             100px;
    width:              960px;
    position:           relative;
    margin:             0px auto;
    padding:            20px 0px 40px 0px;
}

#header img {
    width:              300px;
    height:             auto;
    position:           relative;
    z-index:            1;
}

#language {
    visibility:         hidden;
    position:           absolute;
    top:                80px;
    right:              0;
    text-align:         end;
}

#language img {
    width:              40px;
    padding-left:       5px;
}

#footer {
    height:             180px;
    width:              960px;
    margin:             0px auto 0px auto;
    padding:            20px 0px 0px 0px;
    line-height:        20px;
    color:              #456f7f;
}

#footer table {
    width:              100%;
    table-layout:       fixed;
    border-collapse:    collapse;
}

#footer .col_1 { width: 180px; }
#footer .col_2 { width:  75px; }
#footer .col_3 { width: 213px; }
#footer .col_4 { width:  85px; }
#footer .col_5 { width: 213px; }
#footer .col_6 { width:  auto; }

#footer img {
    width:              100%;
    height:             auto;
}


/*=== Index-Seiten ===*/

#whitebanner {
    height:             352px;
    width:              auto;
    padding-top:        20px;
    background-color:   #ffffff;
}

#intro {
    width:              960px;
    margin:             auto;
    background-color:   #E5E5E5;
}

#intro .description {
    width:              280px;
    height:             292px;
    float:              left;
    padding:            30px 30px 30px 40px;
    box-sizing:         border-box;
    
/*    -webkit-hyphens:    auto;
    -ms-hyphens:        auto;
    hyphens:            auto;
    lang:               de;*/
}

#intro .description p {
    padding:            0 0 10px 0;
}

#maintopics {
    height:             120px;
    width:              960px;
    display:            flex;
    margin:             auto;
    padding:            20px;
    box-sizing:         border-box;
    background-color:   #dcdcdc;
}

#maintopics .maintopic {
    flex: 1;
}

#maintopics .maintopic img {
    width:              70px;
    height:             70px;
    float:              left;
    margin:             5px 5px 5px 0;
}

#index-contents {
    background:         url(../Bilder/bg-content.gif) repeat;
    height:             570px;
    padding:            0px;
}

#index-contentbackground {
    width:              960px;
    height:             510px;
    margin:             0px auto;
    padding:            0px 10px 0px 10px;
}

#links {
    height:             470px;
    width:              270px;
    position:           relative;
    float:              left;
    padding:            20px 30px 20px 0px;
}

#chapters {
    height:             auto;
    width:              640px;
    position:           relative;
    padding:            20px 0px 20px 20px;
    float:              left;
}

#chapters table {
    width:              100%;
    height:             100%;
    padding-bottom:     30px;
    background-color:   #03354e
}

#chapters .chapter {
    width:              50%;
    height:             50%;
    padding:            30px 0 0 30px;
}

#chapters .chapter .link {
    display:            flex;
    flex-wrap:          nowrap;
    align-items:        center;
}

#chapters .chapter .link img {
    height:             128px;
    width:              128px;
    margin:             0 20px 0 0;
}


/*=== Inhalts-Seiten ===*/

#contentwrapper {
    position:           absolute;
    top:                0px;
    left:               0px;
    width:              100%;
}

#contents {
    background:         url(../Bilder/bg-content.gif) repeat;
    margin:             -20px auto 0px 0px;
    padding:            35px 0px 20px 0px;
}

#contentbackground {
    background-color:   #03354e;
    width:              931px;
    min-height: 	800px;
    display:            block;
    margin:             auto;
    padding:            15px;
    /* z-index:            0; */
}

.content_tile {
    width:                  calc(50% - 7.5px);
    height:                 226px;
    background-color:       #7491bb;
    float:                  left;
    margin:                 0 15px 15px 0;
    padding:                30px;
    align-items:            center;
    box-sizing:             border-box;
}

.content_tile.offer {
    display:                grid;
    grid-template-columns:  1fr 1fr;
    grid-template-rows:     max-content;
}

.content_tile:nth-child(2n of a) {
    margin-right:       0;
}

.content_tile img {
    justify-self:       center;
    width:              128px;
}

.content_tile .description {
    grid-column:        1 / 3;
    height: 100%;
}

.produkticon {
    width:              150px;
    height:             130px;
}

.tabelle_techdata {
    width:              100%;
}

.tabelle_techdata td {
    padding:            0px 0px 30px 0px;
}

.tabelle_techdata td:first-child {
    width:              200px;
}

.optionsliste {
    padding:            0px 0px 0px 30px;
}

.optionsliste li {
    margin-bottom:      5px;
}

.produktmatrix {
    margin-bottom:      40px;
}

.produktmatrix tr {
    background-color:   #dcdcdc;
}

.produktmatrix th,
.produktmatrix td {
    width:              150px;
    height:             40px;
    text-align:         center;
    vertical-align:     middle;
}

.produktmatrix tr:first-child th:first-child {
    background-color:   #03354e;
}

.mitarbeiter {
    width:              100%;
    display:            grid;
    grid-template-columns: 1fr 1fr;
}

.mitarbeiter div {
    margin:             0 30% 0 30%;
}

.mitarbeiter img {
    width:              100%;
    margin-bottom:      10px;
}

.mitarbeiter p {
    text-align:         center;
}

.geschichte {
    border-collapse:    collapse;
}

.geschichte tr td {
    width:              80%;
    vertical-align:     top;
    padding:            10px 40px 10px 40px;
}

.geschichte tr td:first-child {
    width:              20%;
    text-align:         right;
    border-right:       2px solid white;
}