/* ========== INDEXSEITE ====== */



/* ================================= */
/* ========= teaserboxen =========== */

.boxx {margin:10px; border-top:1px solid #1A67C1; border-left:1px solid #1A67C1; background-image: linear-gradient(135deg, #032651 90%, #D6AA16 10%); box-shadow: 10px 10px 5px rgba(0,0,0,0.2); float:left;}
.triangle2 {background-image: linear-gradient(135deg, #032651 90%, #5ec037 10%);}
.boxx { width: calc(33.33333333% - 25px)}

.boxx:hover {filter: brightness(120%);}


/* =========== 3fr inner untereinander für forwhat, offerhead, bild+tabelle, mehrbutton ======== */
.gridtype3fr_inner {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd3fr_a_inner,
.grd3fr_b_inner,
.grd3fr_c_inner {border:0px solid #00FFFF; padding:0 10px;}

.grd3fr_a_inner { grid-area: 1 / 1 / 2 / 2; height:70px}
.grd3fr_b_inner { grid-area: 2 / 1 / 3 / 2; height:450px}
.grd3fr_c_inner { grid-area: 3 / 1 / 4 / 2; height:100px}



/* =========== 2fr inner waagrecht für bild und tabelle ======== */
.gridtype2fr {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;

}

.grd2fr_a { grid-area: 1 / 1 / 2 / 2; }
.grd2fr_b { grid-area: 1 / 2 / 2 / 3; }







.forwhat {font-size:85%; font-weight: 500; letter-spacing:0.15em; color: #FF0066;text-transform:uppercase; }

.offerhead {
         font-family: 'Archivo Black', sans-serif;
         font-weight:800;
         font-size:200%;
         line-height: 1.0em;
         letter-spacing:0.0em;
         color: #FFFFFF;
         text-transform:uppercase;
         margin:0;
         text-align:center;
         margin-bottom:30px;
          -moz-hyphens: none;
         -o-hyphens: none;
         -webkit-hyphens: none;
         -ms-hyphens: none;
         hyphens: none;
}

.subhead {color: #5f8ce9;}

.price {
         font-family: 'Archivo Black', sans-serif;
         font-weight:800;
         font-size:200%;
         line-height: 1.0em;
         letter-spacing:0.0em;
         color: #5f8ce9;
         text-transform:uppercase;
         margin:0;
}

.features {font-size:90%; font-weight: 300; line-height:120%; color:#D6AA16; text-transform:uppercase;}
.listedfeatures {padding:5px 0px 5px 0; margin:0;border-bottom:1px solid #1C5890;}


.imginner { width: 100%;}


.linkbutton {
         display: flex;
         align-items: center;
         border:0px solid #FF0000;
         height:60px;
         width:70%;
         margin:0 auto;
         font-family: 'Roboto', sans-serif;
         font-weight:300;
         font-size:100%;
         line-height: 1.0em;
         letter-spacing:0.1em;
         color: #FFFFFF;
         text-transform:uppercase;
         text-align:center;
         justify-content: center;
         background-color:;

}




@media all and (max-width: 1500px) {.boxx { width: calc(50% - 25px)}}
@media all and (max-width: 960px)  {.boxx { width: calc(100% - 25px)}}

@media all and (max-width: 1660px) {.grd3fr_b_inner { grid-area: 2 / 1 / 3 / 2; height:500px}}
@media all and (max-width: 1500px) {.grd3fr_b_inner { grid-area: 2 / 1 / 3 / 2; height:400px}}
@media all and (max-width: 1100px) {.grd3fr_b_inner { grid-area: 2 / 1 / 3 / 2; height:450px}}
@media all and (max-width:  560px) {.grd3fr_b_inner { grid-area: 2 / 1 / 3 / 2; height:300px}}

@media all and (max-width: 560px) { .gridtype2fr { grid-template-columns: 1fr; grid-template-rows: auto; }
        .grd2fr_a { grid-area: 1 / 1 / 2 / 2; }
        .grd2fr_b { grid-area: 2 / 1 / 3 / 2; }
}

@media all and (max-width: 560px) {.imginner {width: 70%; margin:-20px 0 00px 15%}}

@media all and (max-width: 1500px) {.offerhead {font-size:180%}}

@media all and (max-width: 560px) {.dismobout {display:none}}






/* ================================= */
/* ========= MATRIX =========== */

.bgcolor_matrix {background-color:#032650; }
.wrapper {  max-width: 1400px; margin:0 auto;}

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


ul.tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 100px;
        width: 100%;
        border-top:1px solid #5f8ce9;
        box-shadow: 10px 10px 5px rgba(0,0,0,0.0);
}



.start,
.ico,
.close,
.empty  {
        float: left;
        margin: 0;
        cursor: pointer;
        padding: 0px 0px;
        height: 100px;

        line-height: 30px;

        background-color: #032650;
        color: #ccc;
        overflow: hidden;
        position: relative;
}



.start {  width: calc(100% - 600px);}
.ico   {  width:100px;}
.close {  width:100px; }
.empty {  width:100px; }

.img100{  width:100%; }
.marg  {  margin-top:0px; }

.fill   {font-family: 'Roboto', sans-serif;
        font-size: 24px;
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 0.05em;
        margin:30px 40px 0 0px;
        text-align:right;
        text-transform: uppercase;
        }

.symbol {  width:50px; height:auto; margin:25px 0 0 25px;}
.dim    {  opacity:0.15;}

.start:hover {
        background-image: linear-gradient(#032650, #043165, #032650);
        color: #333;
}

.start.active {
        background-image: linear-gradient(#032650, #032650, #032650);
        color: #333;
}


.ico:hover,
.close:hover {
        background-color: #ccc;
        background-image: radial-gradient(#C5D4F1, #1662D3, #032650, #032650);
        color: #333;
}



.ico.active {
        background-image: radial-gradient(#EEB1D7, #C61968, #032650, #032650);
        display: block;
}


.close.active {
        background-image: radial-gradient(#032650, #032650, #032650);
        display: block;
}





.tab_container {
        clear: both;
        float: left;
        width: 100%;
        background-color: #032650;
        overflow: auto;
        -webkit-transition: .3s ease-in-out;
          transition: .3s ease-in-out;

}

.tab_content {
        padding-left: 0px;
        display: none;


}


.bounding {
        margin-bottom:60px;

}

.tab_drawer_heading { display: none; }


.matrix_p   {font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #FFFFFF;
        letter-spacing: 0.05em;
        margin:0px 0 0 0px;
        }




@media screen and (max-width: 900px) {

         .bounding {padding:0 0px 0px 0px;}
         ul.tabs {height: 50px;}

         .start,
         .ico,
         .close,
         .empty  { height: 50px;}


         .start {  width: calc(100% - 300px);}
         .ico   {  width:50px;}
         .close {  width:50px; }
         .empty {  width:50px; }


         .bounding {margin-bottom:30px;}







         .img100{  width:80%;margin-left:10%; }
         .marg  {  margin-top:15px; }

         .fill   {
        font-size: 14px;
        line-height:14px;
        margin:10px 20px 0 0px;
        }

         .symbol {  width:30px; height:auto; margin:10px 0 0 10px;}

         .matrix_p   {
        font-size: 16px;
        margin:0px 0 0 0px;
        }

}






@media screen and (max-width: 560px) {

ul.tabs {height: 36px;}

.start,
.ico,
.close,
.empty  {
        height: 36px;
        line-height: 00px;
}

.start {  width: calc(100% - 216px);}
.ico   {  width:36px;}
.close {  width:36px; }
.empty {  width:36px; }

.img100{  width:80%;margin-left:10%; }
.marg  {  margin-top:15px; }

.fill   {
        font-size: 10px;
        line-height:12px;
        margin:5px 20px 0 0px;
        }

.symbol {  width:24px; height:auto; margin:6px 0 0 6px;}

.matrix_p   {
        font-size: 14px;
        margin:0px 0 0 0px;
        }

}








/*

@media screen and (max-width: 480px) {
        .tabs {
                display: none;
        }
        .tab_drawer_heading {
                background-color: #ccc;
                color: #fff;
                border-top: 1px solid #333;
                margin: 0;
                padding: 5px 20px;
                display: block;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
        }
        .d_active {
                background-color: #666;
                color: #fff;
        }
}

*/






.kachel {width: calc(20% - 20px); margin:10px; float:left;}
         @media all and (max-width: 1100px) {  .kachel {width: calc(25% - 12px); margin:6px;}}
         @media all and (max-width: 700px)  {  .kachel {width: calc(33.333% - 10px); margin:5px;}}

.kachel:hover {filter: brightness(1.2); cursor:pointer;}





.groupicon {  width:300px; height:auto; margin:0 0 0 15%;}
@media all and (max-width:1600px) {.groupicon {  width:200px; height:auto; margin:0 0 0 20%;}}}
@media all and (max-width: 560px) {.groupicon {  width:150px; height:auto; margin:0 0 0 10%;}}}







/* ============== tabellen =================== */

table {max-width:600px; border:0; cellpadding:0; cellspacing:2;}

.spalte1,
.spalte2,
.spalte3,
.spalte12a,
.spalte12b  {font-family: 'Roboto', Helvetica, Arial, sans-serif;
        font-weight:300;
        line-height: 120%;
        text-transform:none;
        margin:0;
         }

.spalte12a,
.spalte12b  {line-height: 140%; }



.spalte1  { width:60%;
        color: #FFFFFF;
        padding:10px 0 10px 0;
        font-size:100%;
                                         border-bottom:1px solid #5f8ce9;
        }

        @media all and (max-width: 1200px){.spalte1 {font-size:100%;}}
        @media all and (max-width: 860px) {.spalte1 {font-size:95%;}}
        @media all and (max-width: 640px) {.spalte1 {font-size:90%;}}


.spalte2  { width:20%;
        color: #FFFFFF;
        padding:10px 0 10px 0;
        font-size:140%;
        text-align:right;
                                         border-bottom:1px solid #5f8ce9;
        }

        @media all and (max-width: 1200px){.spalte1 {font-size:120%;}}
        @media all and (max-width: 860px) {.spalte1 {font-size:95%;}}
        @media all and (max-width: 640px) {.spalte1 {font-size:90%;}}

.spalte3 {  width:20%;
        color: #FFFFFF;
        padding:10px 0 10px 10px;
        font-size:100%;
        text-align:right;
                                         border-bottom:1px solid #5f8ce9;
         }

         @media all and (max-width: 1200px){.spalte3 {font-size:100%;}}
         @media all and (max-width: 860px) {.spalte3 {font-size:95%;}}
         @media all and (max-width: 640px) {.spalte3 {font-size:90%; }}






.spalte12a  { width:30%;
        color: #FFFFFF;
        padding:10px 0 10px 0;
        font-size:100%;
        vertical-align:top;
        font-weight:600;
                                         border-bottom:1px solid #5f8ce9;
        }

        @media all and (max-width: 1200px){.spalte1 {font-size:100%;}}
        @media all and (max-width: 860px) {.spalte1 {font-size:95%;}}
        @media all and (max-width: 640px) {.spalte1 {font-size:90%;}}


.spalte12b  { width:70%;
        color: #FFFFFF;
        padding:10px 0 10px 0;
        font-size:100%;

        vertical-align:top;
                                         border-bottom:1px solid #5f8ce9;
        }

        @media all and (max-width: 1200px){.spalte1 {font-size:100%;}}
        @media all and (max-width: 860px) {.spalte1 {font-size:95%;}}
        @media all and (max-width: 640px) {.spalte1 {font-size:90%;}}












.bold  {font-weight:600;}

.white {color:#FFFFFF;}

.caram {color: #5f8ce9;}

.rot, .red {color: #FF0066;}

.orange {color: #FF9F00;}

.fill:hover {color: #FF0066;}


.lightblue {color:#BCC9F0; }