/**{
 margin: 0;
padding: 0; 
box-sizing: border-box; TODO muss irgendwann angepasst werden
}*/
.d-none {
    display: none;
}

.Koerper {
    background-color: #ffffff;
    font-family: "Frutiger",
        "Open Sans",
        "Helvetica Neue",
        Helvetica,
        Arial,
        "Lucida Grande",
        sans-serif;
    font-size: 1.0625rem;
    color: #434343;
    font-weight: 500;
    margin: 10px;
}

/* input[type="number"]{
width: 75%;
border: 0;
padding: 20px 20px 20px 50px;
background:#eee;
font-size: 16px;
font-weight: 700;
border-bottom: 1px solid #999999;
} */
input:required {
    width: 75%;
    border: 0;
    padding: 20px 20px 20px 50px;
    background: #eee;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #999999;
}

input:required:valid {
    background: #fff url(../images/Icons/green-checkmark-line.png) no-repeat 98% center;
    background-size: 20px;
    /* box-shadow: 0 0 5px #5cd053;
 border-color: #28921f; */
    background-position: 20px 20px;
}

input:required:valid+label {
    opacity: 1;
}

input:required:invalid {
    background: pink url(../images/Icons/red-x-line.png) no-repeat 98% center;
    background-size: 20px;
    /* box-shadow: 0 0 5px #d06253;
 border-color: #f86429; */
    color: #434343;
    background-position: 20px 20px;
    /* Postion X-Zeichen */
}

/* Alle Checkboxen Hintergrundfarbe ändern
input[type='checkbox']:checked {
  background-color: #eb1f27;
}*/
/* Alle Radiobuttons Abstände ändern */
input[type="radio"] {
    margin-right: 10px;
    margin-left: 15px;
    vertical-align: middle;
}

.box_laengenAuswahl {
    max-width: 350px;
    margin: 0 auto;
}

.box_laengenAuswahl>div {
    position: relative;
}

.box_laengenAuswahl>div>label {
    opacity: 0.6;
    position: absolute;
    top: 27px;
    left: 115px;
    font-size: 12px;
}

/* input {
    border: 1px solid black;
} */

/*  input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
   
}

input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
    border: 2px solid red;
}

input:in-range+ ::after {
    content: ' ✔';
}

input:out-of-range+ ::after {
    content: ' X';
}  */

/* input {
    margin: 0 0 1em 31%;
    padding: .2em .5em;
    width: 80%;
    background-color: #fffbf0;
    border: 1px solid #e7c157;
} */

/*  label {
    text-align: right;
    line-height: 1.5;
    width: 30%;
    position: absolute;
    left: 0;
}
 
label::after {
    content: ": ";
}



 /* button {
    margin-left: 31%;
} 

input:required+label::before {
    position: absolute;
    left: 300%;
    content: "★";
    color: red;
}

input:required:valid+label::before {
    content: "✔";
    color: green;
}

*/

.gridcontainer-Kopf {
    display: grid;
    grid-template-columns: 164px 64px 64px 64px 64px 64px 64px 64px 64px 64px 85px;
    grid-template-rows: 91px;
    grid-template-areas: "gridKopfLogo gridNavBtn-1 gridNavBtn-2 gridNavBtn-3 gridNavBtn-4 gridNavBtn-5 gridNavBtn-6 gridNavBtn-7 gridNavBtn-8 . gridNavBtn-9..gridKopfVideo";
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #ffffff;
}

.gridcontainer-Kopf--Mini {
    display: none;
}

#gridNavBtn--mini {
    display: none;
}

.burger {
    height: 2rem;
    display: none;
}

@media screen and (max-width: 768px) {
    .gridcontainer-Kopf {
        grid-template-columns: 164px 64px 64px 64px 64px 85px;
        grid-template-rows: 91px 91px;
        grid-template-areas: "gridKopfLogo gridNavBtn-1 gridNavBtn-2 gridNavBtn-3 gridNavBtn-4"
            "gridNavBtn-9 gridNavBtn-5 gridNavBtn-6 gridNavBtn-7 gridNavBtn-8 gridKopfVideo";
    }
}

@media screen and (max-width: 420px) {
    .gridcontainer-Kopf {
        display: none;
    }

    .burger {
        margin-top: 60px;
        display: grid;

    }

    .gridcontainer-Kopf--Mini {
        display: grid;
        grid-template-columns: 64px 150px 85px;
        grid-template-rows: 91px;
        grid-template-areas: "gridNavBtn--mini gridKopfLogo gridNavBtn-9 gridKopfVideo"
        ;
    }

    #gridNavBtn--mini {
        display: grid;
        grid-template-columns: 64px 64px 64px 64px;
        grid-template-rows: 91px 91px;
        grid-template-areas:
            "gridNavBtn-1 gridNavBtn-2 gridNavBtn-3 gridNavBtn-4"
            "gridNavBtn-5 gridNavBtn-6 gridNavBtn-7 gridNavBtn-8"
        ;
    }
}

.Kopf {
    padding-bottom: 5px;
    border-bottom: 10px solid #999999;
    z-index: 1;
}

.KopfLogo {
    display: block;
    grid-area: gridKopfLogo;
}

.KopfVideo {
    display: block;
    grid-area: gridKopfVideo;
}

.kopf-logo-heraBild {
    height: 2rem;
    padding-left: .5rem;
    padding-bottom: .3rem;
}

.kopf-video-heraBild {
    height: 4rem;
    padding-left: .5rem;
    padding-bottom: .3rem;
}

.kopf-logo-bild {
    height: 2.6rem;
}

.NavBtn {
    min-height: 50px;
    padding: 0;
    margin: 0;
}

.gridNavBtn-1 {
    grid-area: gridNavBtn-1;
}

.gridNavBtn-2 {
    grid-area: gridNavBtn-2;
}

.gridNavBtn-3 {
    grid-area: gridNavBtn-3;
}

.gridNavBtn-4 {
    grid-area: gridNavBtn-4;
}

.gridNavBtn-5 {
    grid-area: gridNavBtn-5;
}

.gridNavBtn-6 {
    grid-area: gridNavBtn-6;
}

.gridNavBtn-7 {
    grid-area: gridNavBtn-7;
}

.gridNavBtn-8 {
    grid-area: gridNavBtn-8;
}

.gridNavBtn-9 {
    grid-area: gridNavBtn-9;
}

.navBtn-naechsteBild {
    width: 5rem;
    height: 4rem;
}

.navBtn-bild {
    height: 4rem;
    width: 4rem;
}

.navBtn-text {
    font-size: .6rem;
}

.navVid-text {
    font-size: 1rem;
    color: #eb1f27;

}

.gridTitelErgebnis {
    display: grid;
    grid-template-columns: 1470px 360px;
    grid-template-rows: 50px;
    /*  row-gap: 5px; */
    grid-template-areas: "tapeSeite-titel ergebnisSeite";
}

.gridTitelErgebnis--TapeMehrteilig {
    display: grid;
    grid-template-columns: 1285px 360px;
    grid-template-rows: 50px;
    /*  row-gap: 5px; */
    grid-template-areas: "tapeSeite-titel ergebnisSeite";
}

.gridTitelErgebnis--ProfZub {
    display: grid;
    grid-template-columns: 1200px 360px;
    grid-template-rows: 50px;
    /*  row-gap: 5px; */
    grid-template-areas: "tapeSeite-titel ergebnisSeite";
}

.gridTitelErgebnis--TapeZub {
    display: grid;
    grid-template-columns: 1160px 360px;
    grid-template-rows: 50px;
    /*  row-gap: 5px; */
    grid-template-areas: "tapeSeite-titel ergebnisSeite";
}

.gridTitelErgebnis--Profil {
    display: grid;
    grid-template-columns: 1215px 360px;
    grid-template-rows: 50px;
    grid-template-areas: "tapeSeite-titel ergebnisSeite";
}

.gridTitelErgebnis--Touch {
    display: grid;
    grid-template-columns: 510px 360px;
    grid-template-rows: 50px;
    /*  row-gap: 5px; */
    grid-template-areas: "tapeSeite-titel ergebnisSeite";
}

.TapeSeite {
    width: 1205px;
    margin-left: 0px;
    /* display: grid;
grid-auto-flow: column;  */
}

.hrLinie {
    width: 1285px;
    margin-left: 0;
}

.hrLinie_intero {
    width: 1460px;
    margin-left: 0;
}

/* TapeSeite Menü Anfang */
.gridTapeSeite {
    display: grid;
    grid-template-columns: repeat(7, 185px);
    grid-template-rows: 245px;
    grid-template-areas: "premium basic eco dynamic feucht rgb flaeche";
}

.gridTapeSeite_intero {
    display: grid;
    grid-template-columns: repeat(8, 185px);
    grid-template-rows: 245px;
    grid-template-areas: "premium basic eco dynamic feucht rgb flaeche intero";
}

.premium {
    grid-area: premium;
}

.basic {
    grid-area: basic;
}

.eco {
    grid-area: eco;
}

.rgb {
    grid-area: rgb;
}

.dynamic {
    grid-area: dynamic;
}

.feucht {
    grid-area: feucht;
}

.flaeche {
    grid-area: flaeche;
}

.intero {
    grid-area: intero;
}

.TapeSeiteMenueBox {
    width: 170px;
    min-height: 200px;
}

.TapeSeiteMenueBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.tapeSeite-titel {
    grid-area: tapeSeite-titel;
    color: #eb1f27;
    font: bold;
    padding-bottom: 10px;
}

.tapeSeite-titel H2 {
    margin-top: 10px;
}

.tapeSeiteMenueBox-bild {
    height: 170px;
    width: 170px;
}

.tapeSeiteMenueBox-strich {
    width: 5rem;
    margin: 0;
    border-bottom: 10px solid #999999;
}

.tapeSeiteMenueBox-strich--aktiv {
    width: 5rem;
    margin: 0;
    border-bottom: 10px solid #eb1f27;
}

.tapeSeiteMenueBox-title {
    color: #000000;
    font: bold;
    font-size: 1.2rem;
    padding-top: 0.3rem;
}

.tapeSeiteMenueBox-title--aktiv {
    color: #eb1f27;
    font: bold;
    font-size: 1.2rem;
    padding-top: 0.3rem;
}

.tapeSeiteMenueBox-text {
    font-size: .8rem;
    padding-top: 0.3rem;
}

@media screen and (max-width: 1080px) {
    .gridTapeSeite {
        grid-template-columns: repeat(7, 111px);
        grid-template-rows: 160px;
    }

    .gridTapeSeite_intero {
        grid-template-columns: repeat(8, 111px);
        grid-template-rows: 160px;
    }

    .TapeSeiteMenueBox {
        width: 111px;
        min-height: 100px;
    }

    .tapeSeiteMenueBox-bild {
        height: 100px;
        width: 100px;
    }

    .tapeSeiteMenueBox-title {
        font-size: 1.1rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-text {
        font-size: .7rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-strich {
        width: 4rem;
        border-bottom: 9px solid #999999;
    }

    .tapeSeiteMenueBox-strich--aktiv {
        width: 4rem;
        border-bottom: 9px solid #eb1f27;
    }
}

@media screen and (max-width: 768px) {
    .gridTapeSeite {
        grid-template-columns: repeat(7, 90px);
        grid-template-rows: 130px;
    }

    .gridTapeSeite_intero {
        grid-template-columns: repeat(8, 90px);
        grid-template-rows: 130px;
    }

    .TapeSeiteMenueBox {
        width: 90px;
        min-height: 100px;
    }

    .tapeSeiteMenueBox-bild {
        height: 80px;
        width: 80px;
    }

    .tapeSeiteMenueBox-title {
        font-size: 0.9rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-text {
        font-size: .6rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-strich {
        width: 3.4rem;
        border-bottom: 8px solid #999999;
    }

    .tapeSeiteMenueBox-strich--aktiv {
        width: 3.4rem;
        border-bottom: 8px solid #eb1f27;
    }
}

@media screen and (max-width: 620px) {
    .tapeSeite-titel {
        font-size: 1rem;
    }

    .gridTapeSeite {
        grid-template-columns: repeat(4, 90px);
        grid-template-rows: 130px 130px;
        grid-template-areas: "premium basic eco dynamic"
            "feucht rgb flaeche.";
    }

    .gridTapeSeite_intero {
        grid-template-columns: repeat(4, 90px);
        grid-template-rows: 130px 130px;
        grid-template-areas: "premium basic eco dynamic"
            "feucht rgb flaeche intero";
    }

    .TapeSeiteMenueBox {
        width: 90px;
        min-height: 100px;
    }

    .tapeSeiteMenueBox-bild {
        height: 80px;
        width: 80px;
    }

    .tapeSeiteMenueBox-title {
        font-size: 0.9rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-text {
        font-size: .6rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-strich {
        width: 3.4rem;
        border-bottom: 8px solid #999999;
    }

    .tapeSeiteMenueBox-strich--aktiv {
        width: 3.4rem;
        border-bottom: 8px solid #eb1f27;
    }
}

@media screen and (max-width: 350px) {
    .tapeSeite-titel {
        font-size: 0.9rem;
    }

    .gridTapeSeite {
        grid-template-columns: repeat(3, 80px);
        grid-template-rows: 120px 120px 120px;
        grid-template-areas: "premium basic eco "
            "dynamic feucht rgb"
            " flaeche ..";
    }

    .gridTapeSeite_intero {
        grid-template-columns: repeat(3, 80px);
        grid-template-rows: 120px 120px 120px;
        grid-template-areas: "premium basic eco "
            "dynamic feucht rgb"
            " flaeche intero .";
    }

    .TapeSeiteMenueBox {
        width: 80px;
        min-height: 90px;
    }

    .tapeSeiteMenueBox-bild {
        height: 70px;
        width: 70px;
    }

    .tapeSeiteMenueBox-title {
        font-size: 0.8rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-text {
        font-size: .5rem;
        padding-top: 0.2rem;
    }

    .tapeSeiteMenueBox-strich {
        width: 3rem;
        border-bottom: 8px solid #999999;
    }

    .tapeSeiteMenueBox-strich--aktiv {
        width: 3rem;
        border-bottom: 8px solid #eb1f27;
    }
}

/* TapeSeite Menü Ende */
/* TapeAuswahl Anfang */
.AuswahlGruppe {
    display: grid;
    grid-template-columns: 550px 370px 370px;
    grid-template-rows: auto;
    grid-template-areas: "LedAuswahl LichtfarbeAuswahl laengenauswahl";

}

.LedAuswahl {
    /* display: flex;
    flex-direction: column; */
    background-color: #F2F2F2;
    padding: 0;
    grid-area: LedAuswahl;
}

/*     .gridledAuswahl-titel{
        display: grid;
       /*  grid-template-columns: 650px;
        grid-template-rows:  60px; 
        grid-template-areas: "ledAuswahl-titel";
    } */

#ledAuswahlBox_1 {
    grid-area: ledAuswahlBox_1;
}

#ledAuswahlBox_2 {
    grid-area: ledAuswahlBox_2;
}

#ledAuswahlBox_3 {
    grid-area: ledAuswahlBox_3;
}

#ledAuswahlBox_4 {
    grid-area: ledAuswahlBox_4;
}

#ledAuswahlBox_5 {
    grid-area: ledAuswahlBox_5;
}

#ledAuswahlBox_6 {
    grid-area: ledAuswahlBox_6;
}

#ledAuswahlBox_7 {
    grid-area: ledAuswahlBox_7;
}

.LedAuswahlBox {
    display: flex;
    margin-bottom: 5px;
    border-bottom: 1px solid #999999;
    height: 80px;
}

.LedAuswahlBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.ledAuswahl-titel {
    color: #eb1f27;
    font: bold;
    grid-area: ledAuswahl-titel;
}

/*  .ledAuswahlBox-Textteil{
        display:block;
        } */
.ledAuswahlBox-bild {
    height: 80px;
}

.ledAuswahlBox-strich--aktiv {
    width: 7rem;
    margin-left: 15px;
    border-bottom: 10px solid #eb1f27;
}

.ledAuswahlBox-strich {
    width: 7rem;
    margin-left: 15px;
    border-bottom: 10px solid #999999;
}

.ledAuswahlBox-titel {
    color: #000000;
    font-size: 1.2rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.ledAuswahlBox-titel--aktiv {
    color: #eb1f27;
    font-size: 1.2rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.ledAuswahlBox-text {
    margin-left: 15px;
    margin-top: 5px;
    color: #434343;
    font-size: 14px;
}

@media screen and (max-width: 550px) {
    .ledAuswahlBox-bild {
        height: 70px;
    }

    .ledAuswahlBox-titel {
        font-size: 1rem;
        padding-top: 0.2rem;
        margin-left: 15px;
        margin-top: 3px;
    }

    .ledAuswahlBox-text {
        margin-left: 15px;
        margin-top: 3px;
        font-size: 12px;
    }
}

p {
    margin: 0;
}

/* Defauld Einstellung */
#ledAuswahlBox_4,
#ledAuswahlBox_5,
#ledAuswahlBox_6,
#ledAuswahlBox_7 {
    display: none;
}

#lichtfarbeBox_xw,
#lichtfarbeBox_cw,
#lichtfarbeBox_dl,
#lichtfarbeBox_meat {
    display: none;
}

/* TapeAuswahl Ende */
/* Lichtfarbe Anfang */
.LichtfarbeAuswahl {
    display: grid;
    grid-template-columns: 370px;
    grid-template-rows: repeat(7, 80px);
    grid-template-areas: "lichtfarbeAuswahl-titel"
        "#lichtfarbeBox_xw"
        "#lichtfarbeBox_ww"
        "#lichtfarbeBox_nw"
        "#lichtfarbeBox_cw"
        "#lichtfarbeBox_xw"
        "#lichtfarbeBox_dl"
        "#lichtfarbeBox_meat"
    ;
    background-color: #F2F2F2;
    grid-area: LichtfarbeAuswahl;
    margin-left: 15px;
    padding: 0 10px;
}

.lichtfarbeAuswahl-titel {
    color: #eb1f27;
    font: bold;
    grid-area: lichtfarbeAuswahl-titel;
}

.LichtfarbeBox {
    display: grid;
    /*  background-color: lightgreen; */
    /* justify-content: start; */
    margin-bottom: 5px;
    border-bottom: 1px solid #999999;
    height: 80px;
}

.LichtfarbeBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.lichtfarbeBox-bild {
    height: 80px;
}

.lichtfarbeBox-strich--aktiv {
    width: 5rem;
    margin-left: 15px;
    border-bottom: 10px solid #eb1f25;
}

.lichtfarbeBox-strich {
    width: 5rem;
    margin-left: 15px;
    border-bottom: 10px solid #999999;
}

.lichtfarbeBox-titel {
    color: #000000;
    font-size: 1rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.lichtfarbeBox-titel--aktiv {
    color: #eb1f27;
    font-size: 1rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.lichtfarbeBox-textteil {
    display: block;
}

.leuchtenart-titel {
    color: #eb1f27;
    font: bold;
    margin-left: 15px;
    margin-bottom: 5px;
    grid-area: leuchtenart-titel;
}

.btn-radio {
    display: inline-block;
    margin-top: -1.3rem;
}

.btn-radio--hoch {
    display: inline-block;
    margin-top: -1.8rem;
}

@media screen and (max-width: 900px) {
    .lichtfarbeBox-bild {
        height: 3rem;
    }

    .lichtfarbeBox-strich--aktiv {
        width: 4rem;
        margin-left: 15px;
        border-bottom: 10px solid #eb1f25;
    }

    .lichtfarbeBox-strich {
        width: 4rem;
        margin-left: 15px;
        border-bottom: 10px solid #999999;
    }

    .lichtfarbeBox-titel {
        color: #eb1f27;
        font-size: 0.8rem;
        padding-top: 0.3rem;
        margin-left: 15px;
        margin-top: 5px;
    }
}

@media screen and (max-width: 768px) {
    .AuswahlGruppe {
        display: grid;
        grid-template-columns: 550px;
        grid-template-rows: 600px 400px;
        grid-template-areas: "LedAuswahl"
            "LichtfarbeAuswahl"
        ;
    }

    .LichtfarbeAuswahl {

        margin: 0;
    }
}

.laengenauswahl {
    grid-area: laengenauswahl;
    background-color: #F2F2F2;
    color: #eb1f27;
    margin-left: 10px;
}

.leuchtenartAuswahl {
    margin-left: 15px;
    padding: 0 10px;
    background-color: #F2F2F2;
}

.Leuchtenart {
    /*  display:block;
        flex-direction: column; */
    margin-left: 0;
    color: #434343;
    font-size: 15px;
    border: 0;
}

.leuchtenart-label--inaktiv {
    display: flex;
    border: 2px solid #eb1f27;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;

}

.leuchtenart-label {
    display: flex;
    padding-top: 8px;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;
    width: 314px;
    height: 40px;
    text-align: left;
}

.leuchtenart-label span {
    padding-left: 5px;
}

.leuchtenart-label--aktiv {
    display: flex;
    padding-top: 8px;
    /* border: 2px solid #eb1f27; */
    background-color: #999999;
    color: #ffffff;
    font: bold;
    width: 314px;
    height: 40px;
    text-align: left;
}

.leuchtenart-label--aktiv span {
    padding-left: 5px;
}

.leuchtenart-label:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.Leitungsart {
    margin-left: 0;
    color: #434343;
    font-size: 15px;
    border: 0;
}

.leitart-titel {
    color: #eb1f27;
    font: bold;
    margin-bottom: 5px;
    margin-left: 15px;
}

.leitart-label {
    display: flex;
    padding-top: 8px;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;
    width: 314px;
    height: 40px;
    text-align: left;
}

.leitart-label span {
    padding-left: 5px;
}

.leitart-label--aktiv {
    display: flex;
    padding-top: 8px;
    /* border: 2px solid #eb1f27; */
    background-color: #999999;
    color: #ffffff;
    font: bold;
    width: 314px;
    height: 40px;
    text-align: left;
}

/*  .leitart-label--aktiv span {
        padding-left: 5px;
    } */
.leitart-label:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.Rollenart {
    margin-left: 0;
    color: #434343;
    font-size: 15px;
    border: 0;
}

.RolleArt-titel {
    color: #eb1f27;
    font: bold;
    margin-bottom: 5px;
    margin-left: 15px;
}

.RolleArt-label {
    display: flex;
    padding-top: 16px;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;
    /*  width: 314px; */
    height: 40px;
    text-align: left;
}

.RolleArt-label span {
    padding-left: 5px;
}

.RolleArt-label--aktiv {
    display: flex;
    padding-top: 8px;
    background-color: #999999;
    color: #ffffff;
    font: bold;
    width: 314px;
    height: 40px;
    text-align: left;
}

.RolleArt-label--aktiv span {
    padding-left: 5px;
}

.RolleArt-label:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.LeitStromschiene {
    margin-left: 5px;
    color: #434343;
    font-size: 15px;
    border: 0;
}

.leitStrom-titel {
    color: #eb1f27;
    font: bold;
    /*  margin-bottom: 5px; */
    margin-left: 5px;
}

.leitStrom-label {
    display: flex;
    padding-top: 8px;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;
    width: 314px;
    height: 40px;
    text-align: left;
}

.leitStrom-label span {
    padding-left: 5px;
}

.leitStrom-label--aktiv {
    display: flex;
    padding-top: 8px;
    /* border: 2px solid #eb1f27; */
    background-color: #999999;
    color: #ffffff;
    font: bold;
    width: 314px;
    height: 40px;
    text-align: left;
}

.leitStrom-label--aktiv span {
    padding-left: 5px;
}

.leitStrom-label:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.leitlaeng-titel {
    color: #eb1f27;
    font: bold;
    margin-bottom: 5px;
    margin-left: 10px;
}

.leuchtenlaeng-titel {
    color: #eb1f27;
    font: bold;
    margin-bottom: 5px;
    margin-left: 10px;
}

.Leuchtenlaeng {
    /* display: block; */
    margin-left: 10px;
    color: #434343;
    font-size: 16px;
}

/* .leuchtenlaeng-label{
         display: flex; 
     } */
/*     .leuchtenTeillaeng-label {
        display: block;
     } */
.leuchtenlaeng-box {
    height: 30px;
    width: 320px;
    font-size: 14px;
    /* margin-bottom: 10px; */
}

.leuchtenlaeng-text {
    margin: 0;
    color: #eb1f27;
    padding-left: 15px;
    padding-top: 5px;
    font-size: 13px;
}

.leuchtenlaeng-text_top {
    margin: 0;
    color: #eb1f27;
    padding-left: 0;
    padding-top: 5px;
    font-size: 13px;
}

.Leitungslaeng {
    /* display: block; */
    margin-left: 10px;
    color: #434343;
    font-size: 16px;
}

.Leitungslaeng_2 {
    display: block;
    margin-left: 10px;
    color: #434343;
    font-size: 16px;
}

.leitungs-box {
    height: 30px;
    width: 320px;
    font-size: 14px;
    /* margin-bottom: 10px; */
}

.leitungslaeng-titel {
    color: #eb1f27;
    font: bold;
    margin-bottom: 5px;
}

/* .Ergebnis {
        background-color: #F2F2F2;
        color: #eb1f27;
        border-left: 1px solid #999999;
        margin-left: 10px;
        margin-top: 10px;
        grid-area: Ergebnis;
    } */
.ergebnisSeite {
    color: #eb1f27;
    background-color: #c9c9c9;
    font: bold;
    font-size: 20px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 10px;
    margin-top: 50px;
    margin-bottom: 0;
    grid-area: ergebnisSeite;
   /*  z-index: 2;
    position:fixed; */

}

.ergebnisSeite-titel {
    color: #eb1f27;
    /* background-color: #c9c9c9; */
    font: bold;
    font-size: 26px;
    padding-left: 0px;
    margin-left: 10px;
    margin-top: 35px;
    margin-bottom: 0;
    grid-area: ergebnisSeite-titel;
    /*  grid-template-columns: 200px;
        grid-template-rows: 250px;
        grid-template-areas: "ErgebnisTapeBox" */

    ;
}

/* .ErgebnisProfilBox {
         background-color: #c9c9c9;
         padding-bottom: 20px;
         padding-top: 20px;
        
     } */
.ergebnisTapeBox-bild {
    padding-left: 10px;
    height: 6.2rem;
}

.ergebnisProfilBox-bild,
.ergebnisProfilBox-Zeichnung {
    padding-top: 20px;
    padding-left: 10px;
    height: 6.2rem;
}
.ergebnisProfilBox-Zeichnung-Gross {
    padding-top: 20px;
    padding-left: 10px;
    height: 10rem;
   
}
.ergebnisProfilBoxKabelauslass-bild{
padding-top: 20px;
    padding-left: 10px;
    height: 10rem;
 max-width: 350px;
}
.ergebnisTapeBox-titel,
.ergebnisProfilBox-titel {
    padding-left: 10px;
    padding-bottom: 10px;
}

.ergebnisZubehoerBox-titel {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}


.ergebnisTapeBoxMehrteilig-titel {
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
}

.ergebnisTapeBox-Beschreibung,
.ergebnisProfilBox-Beschreibung,
.ergebnisZubehoerBox-Beschreibung {
    padding-left: 10px;
    color: #434343;
    font-size: 14px;
}

.ergebnisProfilBox-Schenkel,
.ergebnisTapeBoxMehrteilig-Leit,
.ergebnisZubehoerBox-Trafo {
    padding-left: 20px;
    color: #434343;
    font-size: 14px;
}

.ErgebnisPreisBox {
    margin-top: 10px;
    padding-top: 5px;
    padding-left: 10px;
    color: #eb1f27;
    border-top: 1px solid #434343;
    font-size: 16px;
    font: bold;
}

.ErgebnisPreisBox-Text {
    padding-bottom: 5px;
    padding-left: 10px;
    color: #434343;
    border-bottom: 1px solid #434343;
    font-size: 12px;
}

/* Lichtfarbe Ende */
input[required]:after {
    content: " * ";
}

.buttonProfilauswahl {
    background-color: #D8D8D8;
    margin-top: 30px;
    margin-left: 10px;
    font-size: 18px;
    height: 35px;
    width: 314px;
}

.buttonProfilauswahl--Fastlane {
    max-width: 350px;
    margin: 0 auto;
    /* margin-top: 1rem; */
    /*  margin-bottom: 1rem;  */
    width: 20.3rem;
}

.buttonProfilauswahl:hover,
.buttonProfilauswahl:focus {
    background-color: #eb1f27;
    /* background-color:#999999; */
    color: #ffffff;
    font: bold;
}

/* TapeSeite Ende */
/* ProfilSeite Anfang */
.gridProfilSeite {
    /* display: grid;
    grid-template-columns: repeat(6, 220px);
    grid-template-rows: 240px;
    grid-template-areas: "eloxiert edelstahl schwarz kunststoff topEdelstahl topSchwarz"; */
    display: flex;
    flex-direction: row;
    gap: 17px;
    /*  position:sticky; */
}

.eloxiert {
    grid-area: eloxiert;
}

.edelstahl {
    grid-area: edelstahl;
}

.schwarz {
    grid-area: schwarz;
}

.kunststoff {
    grid-area: kunststoff;
}

.topEdelstahl {
    grid-area: topEdelstahl;
}

.topSchwarz {
    grid-area: topSchwarz;
}

.ProfilSeiteMenueBox {
    width: 230px;
    min-height: 140px;
}

.ProfilSeiteMenueBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.ProfilSeiteMenueBox-bild {
    height: 140px;
    width: 230px;
}

.ProfilSeiteMenueBox-strich {
    width: 7rem;
    margin: 0;
    border-bottom: 10px solid #999999;
}

.ProfilSeiteMenueBox-strich--aktiv {
    width: 7rem;
    margin: 0;
    border-bottom: 10px solid #eb1f27;
}

.ProfilSeiteMenueBox-title {
    color: #000000;
    font: bold;
    font-size: 1rem;
    padding-top: 0.3rem;
}

.ProfilSeiteMenueBox-title--aktiv {
    color: #eb1f27;
    font: bold;
    font-size: 1rem;
    padding-top: 0.3rem;
}

.ProfilSeiteMenueBox-text {
    font-size: .8rem;
    padding-top: 0.3rem;
}

.hrLinieProfil {
    width: 1217px;
    margin-left: 0;
}

.gridProfilKopf {
    background-color: white;
    position: -webkit-sticky;
    position: sticky;
    top: 10rem;
    z-index: 1;
}

@media screen and (max-width: 1080px) {
    .gridProfilSeite {
        grid-template-columns: repeat(7, 111px);
        grid-template-rows: 160px;
    }

    .ProfilSeiteMenueBox {
        width: 111px;
        min-height: 100px;
    }

    .ProfilSeiteMenueBox-bild {
        height: 100px;
        width: 100px;
    }

    .ProfilSeiteMenueBox-title {
        font-size: 1.1rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-text {
        font-size: .7rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-strich {
        width: 4rem;
        border-bottom: 9px solid #999999;
    }

    .ProfilSeiteMenueBox-strich--aktiv {
        width: 4rem;
        border-bottom: 9px solid #eb1f27;
    }
}

@media screen and (max-width: 768px) {
    .gridProfilSeite {
        grid-template-columns: repeat(7, 90px);
        grid-template-rows: 130px;
    }

    .ProfilSeiteMenueBox {
        width: 90px;
        min-height: 100px;
    }

    .ProfilSeiteMenueBox-bild {
        height: 80px;
        width: 80px;
    }

    .ProfilSeiteMenueBox-title {
        font-size: 0.9rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-text {
        font-size: .6rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-strich {
        width: 3.4rem;
        border-bottom: 8px solid #999999;
    }

    .ProfilSeiteMenueBox-strich--aktiv {
        width: 3.4rem;
        border-bottom: 8px solid #eb1f27;
    }
}

@media screen and (max-width: 620px) {
    .tapeSeite-titel {
        font-size: 1rem;
    }

    .gridProfilSeite {
        grid-template-columns: repeat(4, 90px);
        grid-template-rows: 130px 130px;
        grid-template-areas: "premium basic eco dynamic"
            "feucht rgb flaeche intero";
    }

    .ProfilSeiteMenueBox {
        width: 90px;
        min-height: 100px;
    }

    .ProfilSeiteMenueBox-bild {
        height: 80px;
        width: 80px;
    }

    .ProfilSeiteMenueBox-title {
        font-size: 0.9rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-text {
        font-size: .6rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-strich {
        width: 3.4rem;
        border-bottom: 8px solid #999999;
    }

    .ProfilSeiteMenueBox-strich--aktiv {
        width: 3.4rem;
        border-bottom: 8px solid #eb1f27;
    }
}

@media screen and (max-width: 350px) {
    .tapeSeite-titel {
        font-size: 0.9rem;
    }

    .gridProfilSeite {
        grid-template-columns: repeat(3, 80px);
        grid-template-rows: 120px 120px 120px;
        grid-template-areas: "premium basic eco "
            "dynamic feucht rgb"
            " flaeche intero .";
    }

    .ProfilSeiteMenueBox {
        width: 80px;
        min-height: 90px;
    }

    .ProfilSeiteMenueBox-bild {
        height: 70px;
        width: 70px;
    }

    .ProfilSeiteMenueBox-title {
        font-size: 0.8rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-text {
        font-size: .5rem;
        padding-top: 0.2rem;
    }

    .ProfilSeiteMenueBox-strich {
        width: 3rem;
        border-bottom: 8px solid #999999;
    }

    .ProfilSeiteMenueBox-strich--aktiv {
        width: 3rem;
        border-bottom: 8px solid #eb1f27;
    }
}

.ProfilAuswahlGruppe {
    display: grid;
    grid-template-columns: 400px 410px 410px;
    /*  grid-template-columns: 500px 420px 395px; */
    grid-template-rows: auto;
    grid-template-areas: "ProfilAuswahl AbdeckungAuswahl Befestigungsartauswahl";   
}

.ZubehoerAuswahlGruppe {
    display: grid;
    grid-template-columns: 525px 680px;
    grid-template-rows: auto;
    grid-template-areas: "TrafoAuswahl DimmerAuswahl";
}

.ZubehoerAuswahlGruppe--Touch {
    display: grid;
    grid-template-columns: 525px 400px;
    grid-template-rows: auto;
    grid-template-areas: "TrafoAuswahl DimmerAuswahl";
}

.TrafoAuswahl {
    /* display: flex;
    flex-direction: column; */
    background-color: #F2F2F2;
    padding: 0;
    grid-area: TrafoAuswahl;
    grid-template-rows: 220px auto;
}

.TrafoAuswahl-titel {
    color: #eb1f27;
    /* font: bold; */
    padding-left: 10px;


}

.TrafoAuswahl-titel h3 {
    margin-bottom: 0;
    font-size: 18px;
}


.USBAuswahlBox {
    display: flex;
    /* margin-bottom: 5px; */
    border-bottom: 1px solid #999999;
    height: 40px;
}

.PreisZusBox {
    display: flex;
    margin-Top: 0.3rem;
    margin-left: 0.3rem;
    height: 3rem;
    position: relative;
    /*  bottom: 1.8rem; */
    /*  align-items:flex-end; */

}

.PreisZusBox--Mehrzeilig {
    display: flex;
    margin-Top: 0.3rem;
    margin-left: 0.3rem;
    height: 3rem;
    position: relative;
    bottom: 1.8rem;
}

.zubGesambez {
    margin-bottom: 50px;
}

.Leuchtenpreistext {
    display: block;
}

.Zubehoerpreistext {
    display: block;
    margin-left: 0.3rem;
    margin-top: auto;
    /*  position: relative;
     top: 3.5rem;  */
}

.TrafoAuswahlBox {
    display: flex;
    /* margin-bottom: 5px; */
    border-bottom: 1px solid #999999;
    height: 40px;
}

.TrafoAuswahlBox:hover,
.USBAuswahlBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

/* Mengen Label als Placeholder */
.TrafoAuswahlBox label {
    opacity: 0.8;
    color: #434343;
    position: relative;
    top: 15px;
    left: -440px;
    font-size: 11px;
    height: 25px;
    width: 80px;
}

.Leuchteneinzelpreis-text {
    margin-right: 10px;
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    font-size: 1rem;
    color: #434343;
    font: bold;
    height: 18px;
}

.Leuchtengesamtpreis-text {
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0;
    margin-left: 5px;
    font-size: 18px;
    color: #434343;
    font: bold;
    height: 30px;
}

.TrafoAusw {
    /* display: block;
    flex-direction: column; */
    margin-left: 15px;
    color: #434343;
    font-size: 15px;
    border: 0;
    width: 80px;
}

.TrafoAusw-titel {
    color: #434343;
    font: bold;
    font-size: 15px;
    margin-bottom: 5px;
    width: 140%;
    margin-left: 15px;
}

.USBAusw-titel {
    color: #434343;
    font: bold;
    font-size: 15px;
    margin-bottom: 5px;
    width: 80%;
    margin-left: margin-left
}

.TrafoAusw-box:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.TrafoAusw-box {
    height: 30px;
    /*     height: 25px; */
    width: 80px;
    font-size: 15px;
    margin-top: 10px;
    border: 0;
}

.fernbAusw-box {
    height: 30px;
    width: 80px;
    font-size: 15px;
    margin-top: 10px;
    border: 0;
}

.USBAusw-box {
    height: 25px;
    width: 80px;
    font-size: 15px;
    margin-top: 10px;
    border: 0;
    accent-color: #eb1f27;
}

.TrafoPreis-text {
    margin-right: 10px;
    margin-top: 17px;
    font-size: 15px;
    color: #434343;
    font: bold;
    height: 30px;
}

.USBPreis-text {
    margin-right: 10px;
    margin-top: 17px;
    font-size: 15px;
    color: #434343;
    font: bold;
    height: 30px;
}

.DimmerAuswahl {
    /* display: flex;
    flex-direction: column; */
    background-color: #f2f2f2;
    padding: 0;
    grid-area: DimmerAuswahl;
    margin-left: 15px;
    grid-template-rows: 200px 800px;

    /* padding: 0 10px; */
}

.DimmerAuswahl-titel {
    color: #eb1f27;
    padding-left: 10px;
    margin-top: 25px;
}

.DimmerAuswahl-titel h3 {
    margin-bottom: 0;
    font-size: 18px;
}

.DimmerAuswahlBox {
    display: flex;
    /* margin-bottom: 5px; */

    border-bottom: 1px solid #999999;
    height: 40px;
}

.DimmerAuswahlBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

/* Mengen Label als Placeholder */
.DimmerAuswahlBox label {
    opacity: 0.8;
    color: #434343;
    position: relative;
    top: 15px;
    left: -550px;
    font-size: 11px;
    height: 30px;
    width: 60px;
}

.DimmerAusw {
    /* display: block;
    flex-direction: column; */
    margin-left: 15px;
    color: #434343;
    font-size: 13px;
    border: 0;

}

.DimmerAusw-titel {
    color: #434343;
    font: bold;
    font-size: 15px;
    margin-bottom: 5px;
    width: 70%;
    margin-left: 15px;
}

.DimmerAusw-box:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.DimmerAusw-box {
    height: 30px;
    width: 80px;
    font-size: 15px;
    margin-top: 10px;
    border: 0;

}

.DimmerPreis-text {
    margin-right: 10px;
    margin-top: 17px;
    font-size: 15px;
    color: #434343;
    font: bold;
    height: 30px;
}

.fernbAuswahl-titel {
    color: #eb1f27;
    font-size: 15px;
}

.fernbAuswahl-titel h3 {
    margin-bottom: 0;
    font-size: 18px;
}

.fernbAuswahl {
    /*  grid-area: FernbedienungAuswahl; */
    background-color: #F2F2F2;
    color: #eb1f27;
    margin-left: 10px;
    font-size: 15px;
}

.fernbArt {
    /* display: block;
    flex-direction: column; */
    margin-left: 5px;
    color: #434343;
    font-size: 15px;
    border: 0;
    width: 350px;
}

.fernbAuswahlBox {
    display: flex;
    /*   background-color: lightgreen; */
    /* justify-content: start; */
    margin-bottom: 5px;
    border-bottom: 1px solid #999999;
    height: 50px;
}

.fernbAuswahlBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

/* Mengen Label als Placeholder */
.fernbAuswahlBox label {
    opacity: 0.8;
    color: #434343;
    position: relative;
    top: 15px;
    left: -582px;
    font-size: 11px;
    height: 30px;
    width: 60px;
}

.fernbAusw {
    /* display: block;
    flex-direction: column; */
    /* margin-left: 5px; */
    color: #434343;
    font-size: 15px;
    border: 0;

}

.fernbAusw-titel {
    color: #434343;
    font: bold;
    font-size: 14px;
    margin-bottom: 5px;
    width: 90%;
    margin-left: 15px;
}

.TrafoAusw-titel {
    color: #434343;
    font: bold;
    font-size: 15px;
    margin-bottom: 5px;
    width: 130%;
    margin-left: 15px;
}

.PreisZus-titel {
    color: #434343;
    font: bold;
    font-size: 1rem;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 20px;
    width: 40px;
}

.PreisMengeAusw-box:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.PreisMengeAusw-box {
    height: 25px;
    width: 60px;
    font-size: 18px;
    font: bold;
    margin-top: 0px;
    border: 0;
    text-align: center;
}

.fernbAusw-box:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.fernbAusw-box {
    height: 30px;
    width: 80px;
    font-size: 15px;
    margin-top: 10px;
    border: 0;
}

.fernbPreis-text {
    margin-right: 10px;
    margin-top: 17px;
    font-size: 15px;
    color: #434343;
    font: bold;
    height: 30px;
}

.ProfilAuswahl {
    /* display: flex;
    flex-direction: column; */
    background-color: #F2F2F2;
    padding-left: 10px;
    padding-right: 10px;
    grid-area: ProfilAuswahl;   
}

#ProfilAuswahlBox_1 {
    grid-area: ProfilAuswahlBox_1;
}

#ProfilAuswahlBox_2 {
    grid-area: ProfilAuswahlBox_2;
}

#ProfilAuswahlBox_3 {
    grid-area: ProfilAuswahlBox_3;
}

#ProfilAuswahlBox_4 {
    grid-area: ProfilAuswahlBox_4;
}

#ProfilAuswahlBox_5 {
    grid-area: ProfilAuswahlBox_5;
}

#ProfilAuswahlBox_6 {
    grid-area: ProfilAuswahlBox_6;
}

#ProfilAuswahlBox_7 {
    grid-area: ProfilAuswahlBox_7;
}

#ProfilAuswahlBox_8 {
    grid-area: ProfilAuswahlBox_8;
}

#ProfilAuswahlBox_9 {
    grid-area: ProfilAuswahlBox_9;
}

#ProfilAuswahlBox_10 {
    grid-area: ProfilAuswahlBox_10;
}

.ProfilAuswahlBox {
    display: flex;
    /*   background-color: lightgreen; */
    /* justify-content: start; */
    margin-bottom: 5px;
    border-bottom: 1px solid #999999;
    height: 80px;
}

.ProfilAuswahlBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.ProfilAuswahlBox--Top:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.ZusammenfassungGruppe {
    display: grid;
    grid-template-columns: 500px 515px 515px;
    grid-template-rows: 200px 130px auto;
    grid-template-areas: "TapeZus ProfZus ZubehoerZus";
}

.ZusammenfassungGruppe--pdf {
    display: grid;
    grid-template-columns: 500px 515px 515px;
    grid-template-rows: 200px 3px auto;
    grid-template-areas: "TapeZus ProfZus ZubehoerZus";
}

.kopfZus {
    grid-column: 1/3;
    grid-row: 1/2;
    background-color: #F2F2F2;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.kopfZusPreis {
    grid-column: 1/4;
    grid-row: 2/3;
    background-color: #F2F2F2;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    height: 7rem;
}

.kopfZusPreis--einspaltig {
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: #F2F2F2;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    height: 7rem;
}

.kopfZusPreis--zweispaltig {
    grid-column: 1/3;
    grid-row: 2/3;
    background-color: #F2F2F2;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    height: 7rem;
}

.Komplettpreistext {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-right: 8px;
    margin-top: 6px;
    /* margin-right: 8rem; */
}

.btnWarenkorb {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-basis: 31%; */
    /* margin-right: 8rem; */

}

.btnLichtfarbe {
    position: absolute;
    bottom: 0.7rem;
    /* max-width: 16rem; */
    right: 15px;
    width: 194px;
}

.btnLedLaenge {
    position: absolute;
    bottom: -2.7rem;
    max-width: 16rem;
}

.btnZubehoer {
    position: relative;
    left: 190px;
    top: 0px;
    /* max-width: 16rem; */
    width: 194px;
    margin-bottom: 0;
}

.btnAbdeckung {
    position: absolute;
    left: 80px;
    top: 155px;
    /* max-width: 16rem; */
    margin-bottom: 0;
    width: 194px;
}


.ZubZusTitel {
    margin-bottom: 12px;
}

.Komplettpreis-text {
    margin-right: 0.3rem;
    margin-top: 1.2rem;
    margin-bottom: 0;
    margin-left: 0.3rem;
    font-size: 1.4rem;
    color: #434343;
    font: bold;
    height: 2.5rem;
    min-width: 19rem;
}

.kopfZus-Tape {
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: #F2F2F2;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.kopfZub {
    grid-column: 3/4;
    grid-row: 1/2;
    background-color: #F2F2F2;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.kopfZub-Tape {
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: #F2F2F2;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

/* Anfang Tape Zusammenfassungsseite */
.TapeZus {
    background-color: #F2F2F2;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    grid-area: TapeZus;
    grid-row: 3/4;
}

.TapeZus-titel {
    color: #eb1f27;
    font: bold;
}


.TapeZusBox {
    display: grid;
    margin-top: 0.31rem;
    /*  margin-bottom: 0.31rem; */
    padding-bottom: 0.31rem;
    border-bottom: 0.062rem solid #999999;
    grid-template-areas: "TapeZusBox-bild TapeZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
    grid-template-rows: 9.37rem;
}

.TapeZusBox_2 {
    display: grid;
    margin-top: 0.31rem;
    /*  margin-bottom: 0.31rem; */
    padding-bottom: 0.31rem;
    border-bottom: 0.062rem solid #999999;
    grid-template-areas: "TapeZusBox-bild TapeZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
    grid-template-rows: 12rem;
}

.TapeZusBox-Textteil {
    grid-area: TapeZusBox-Textteil;
    height: 9.37rem;
    position: relative;
}

.TapeZusBox-bild {
    height: 8.12rem;
    grid-area: TapeZusBox-bild;
    border-bottom: 0px;
}

.TapeZusBox-titel {
    color: #eb1f27;
    font-size: 1.2rem;
    padding-top: 0.3rem;
    /*  padding-bottom: 1.4rem; */
    margin-left: 1rem;
    margin-right: 0;
    margin-top: 0.3rem;
    width: 90%;
}

.Sonder {
    grid-column: 1/4;
    grid-row: 6/7;
    background-color: #F2F2F2;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 15px;
    height: 10.5rem;
}

.Sonder--einspaltig {
    grid-column: 1/2;
    grid-row: 6/7;
    background-color: #F2F2F2;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 15px;
    height: 10.5rem;
}

.Sonder--zweispaltig {
    grid-column: 1/3;
    grid-row: 6/7;
    background-color: #F2F2F2;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 15px;
    height: 10.5rem;
}

.Sonder__anmerk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 99.5%;
    margin-top: 1rem;
    color: #434343;
    font-size: 1.2rem;
    height: 8rem;
}

.TrafoZusBox {
    display: grid;
    margin-top: 0.3rem;
    /*  margin-bottom: 0.3rem; */
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #999999;
    grid-template-areas: "TrafoZusBox-bild TrafoZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
    grid-template-rows: 12rem;
}

.TrafoZusBox_2 {
    display: grid;
    margin-top: 0.3rem;
    /*  margin-bottom: 0.3rem; */
    /* padding-bottom: 0.3rem; */
    border-bottom: 1px solid #999999;
    grid-template-areas: "TrafoZusBox-bild TrafoZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
    grid-template-rows: 12rem;
    height: 9.37rem;
}

.TablarZusBox {
    display: grid;
    margin-top: 0.3rem;
    /*  margin-bottom: 0.3rem; */
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #999999;
    grid-template-areas: "TrafoZusBox-bild TablarZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
    grid-template-rows: 12rem;

}

.TablarZusBox_2 {
    display: grid;
    margin-top: 0.3rem;
    /*  margin-bottom: 0.3rem; */
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #999999;
    grid-template-areas: "TrafoZusBox-bild TablarZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
    grid-template-rows: 12rem;
    height: 9.37rem;
}

.TrafoZusBox_2 {
    height: 9.37rem;
}

.TrafoZusBox-Textteil {
    grid-area: TrafoZusBox-Textteil;
    height: 9.37rem;
}

.TrafoZusBox-bild {
    height: 8.12rem;
    grid-area: TrafoZusBox-bild;
    border-bottom: 0px;
}

.TrafoZusBox-titel {
    color: #eb1f27;
    font-size: 1.2rem;
    padding-top: 0.3rem;
    margin-left: 1rem;
    margin-right: 0;
    margin-top: 0.3rem;
    width: 90%;
}

.TrafoZusBox-TextMehrteilig {
    margin-left: 1rem;
    margin-top: 1.56rem;
    margin-right: 0;
    font-size: 0.93rem;
    width: 90%;
    position: relative;
    top: -1.12rem;
}

.ledZusBox-Text {
    margin-left: 0;
    margin-top: 0.3rem;
    margin-right: 0;
    color: white;
    font-size: 1.06rem;
    background-color: #999999;
    height: 1.87rem;
    width: 11.69rem;
    padding-top: 0.62rem;
    padding-left: 0.62rem;
}

.ledZusBox-TextMehrteilig {
    margin-left: 1rem;
    margin-top: 1.56rem;
    margin-right: 0;
    font-size: 0.93rem;
    width: 90%;
    position: relative;
    top: -2.3rem;
    /*     top: -1.12rem;
 */
}

.ledZusBox-TextMehrteilig--Top {
    margin-left: 1rem;
    margin-top: 1.56rem;
    margin-right: 0;
    font-size: 0.93rem;
    width: 90%;
    position: relative;
    top: -1.12rem;
}

.leitZusBox-Text_Mehrteilig {
    display: block;
    margin-left: 1rem;
    margin-top: 0;
    margin-right: 0;
    font-size: 0.93rem;
    width: 90%;

}

/*Ende Tape Zusammenfassungsseite */

/* Anfang Profil Zusammenfassungsseite */
.ProfZus {
    background-color: #F2F2F2;
    padding-left: 0.63rem;
    padding-right: 0.63rem;
    grid-area: ProfZus;
    margin-left: 0.93rem;
    grid-row: 3/4;
}

.ProfZus-titel {
    color: #eb1f27;
    font: bold;
}

.ProfZusBox {
    display: grid;
    margin-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 0.06rem solid #999999;
    grid-template-areas: "ProfZusBox-bild ProfZusBox-Textteil";
    grid-template-columns: 12.5rem 18rem;
}

.ProfZusBox-Textteil {
    grid-area: ProfZusBox-Textteil;
    position: relative;
}

.ProfZusBox-bild {
    height: 8.12rem;
    grid-area: ProfZusBox-bild;
    border-bottom: 0px;
    margin-bottom: 0.62rem;
}

.ProfZusBox-titel {
    color: #eb1f27;
    font-size: 1.2rem;
    padding-top: 0.3rem;
    margin-left: 0.93rem;
    margin-right: 0;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    width: 90%;
}

.ProfZusBox-Text {
    margin-left: 0;
    margin-top: 0.3rem;
    margin-right: 0;
    color: white;
    font-size: 1.06rem;
    background-color: #999999;
    height: 1.87rem;
    width: 11.69rem;
    padding-top: 0.62rem;
    padding-left: 0.62rem;
}

.ProfZusBoxDetail-Text {
    margin-left: 0.93rem;
    margin-top: 2.5rem;
    margin-right: 0;
    color: white;
    font-size: 1.06rem;
    background-color: #999999;
    height: 1.87rem;
    width: 90%;
    padding-top: 0.62rem;
    padding-left: 0.62rem;
}

.ProfZusBox-TextMehrteilig {
    margin-left: 0.93rem;
    margin-top: 0;
    margin-right: 0;
    font-size: 0.93rem;
    width: 90%;
}

/* Ende Profil Zusammenfassungsseite */
/* Anfang Zubehör Zusammenfassungsseite */
.ZubehoerZus {
    background-color: #F2F2F2;
    padding-left: 0.62rem;
    padding-right: 0.62rem;
    grid-area: ZubehoerZus;
    grid-row: 3/4;
    margin-left: 0.93rem;
}

.ZubehoerZus-Tape {
    background-color: #F2F2F2;
    padding-left: 0.62rem;
    padding-right: 0.62rem;
    grid-row: 3/4;
    grid-column: 2/3;
    margin-left: 0.93rem;
}

/* Anfang Zubehör Zusammenfassungsseite */
.imgGross {
    margin: 0;
    /*  max-height: 30px;   */
}

.imgGrossDim {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 15px;
    margin-right: 15px;
}

#dimBild,
#fernBild {
    margin: auto;
}

.imgGrossZub {
    margin-top: 10px;
    margin-left: 100px;
    margin-bottom: 15px;
    ;

}

.imgTrafo {
    margin-left: 5px;
    max-height: 150px;

}

#zBild {
    /* display: inline-block; */
    margin: 0;

}

#grBild {
    /* display: inline-block; */
    margin: 0;

}

#imgVerbleitText_1 {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: -10px;
}

.imgVerbleit {
    margin-top: 20px;
    margin-left: 0;
    margin-right: -10px;
}

.imgVerbleitUnten {
    margin-top: 90px;
    margin-left: 0px;
    margin-right: -10px;
}

.imgTapestreifen {
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
}

.imgTapestreifenUnten {
    margin-top: 90px;
    margin-left: 0;
    margin-right: 0;
}

#imgTapestreifen_5 {
    margin-left: -245px;
}

#imgTapestreifen_6 {

    margin-left: -290px;
}

#imgTapestreifen_7 {
    margin-left: -290px;
}

#imgTapestreifen_8 {
    margin-left: -290px;
}

#imgVerbleit_6 {
    margin-left: -305px;
}

#imgVerbleit_7 {
    margin-left: -300px;
}

#imgVerbleit_8 {
    margin-left: -300px;
}

.imgCaptionText {
    font-size: 12px;
    color: #434343;
    font: bold;
    text-align: center;
}

.btnTeilst {
    margin-top: 25px;
}

.btnTeilst--Fastlane {
    margin-top: 25px;
    margin-left: 5.6rem;
}

.btnProf {
    margin-top: 25px;
    margin-left: 5px;
}

.btnZub {
    background-color: #D8D8D8;
    margin-top: 0px;
    width: 314px;
    font-size: 18px;
    height: 35px;
    margin-top: 25px;
    margin-left: 25px;
}

.buttonTeilstück {
    background-color: #D8D8D8;
    margin-top: 0px;
    margin-left: 10px;
    font-size: 18px;
    height: 35px;
    width: 314px;
}

.buttonTeilstück:hover,
.buttonTeilstück:focus {
    background-color: #eb1f27;
    /* background-color:#999999; */
    color: #ffffff;
    font: bold;
}

.btnZus {
    background-color: #D8D8D8;
    margin-top: 0px;
    /* margin-left: 25px; */
    font-size: 18px;
    height: 35px;
    width: 314px;
}

.btnZusProf {
    margin-left: 25px;
}

/* .btnZusTeilst {
    background-color: #D8D8D8;
    margin-top: 0px;
   
    font-size: 18px;
    height: 35px;
    width: 314px;
} */
.buttonZub {
    background-color: #D8D8D8;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 18px;
    height: 35px;
    width: 314px;
}

.buttonZubTouch {
    background-color: #D8D8D8;
    margin-top: 680px;
    margin-left: 10px;
    font-size: 18px;
    height: 35px;
    width: 314px;
}

.buttonZubTouch:hover,
.buttonZub:hover,
buttonZubTouch:focus,
.buttonZub:focus {
    background-color: #eb1f27;
    /* background-color:#999999; */
    color: #ffffff;
    font: bold;
}

.buttonProfil {
    background-color: #D8D8D8;
    margin-top: 0px;
    /*  margin-left: 25px; */
    font-size: 18px;
    height: 35px;
    /*  width: 194px; */
}

.btnZus:focus,
.btnZus:hover,
.btnZub:focus,
.btnZub:hover,
.buttonProfil:hover,
.buttonProfil:focus {
    background-color: #eb1f27;
    /* background-color:#999999; */
    color: #ffffff;
    font: bold;
}

.buttonProfil--einspaltig {
    background-color: #D8D8D8;
    /* margin-top: 60px;
    margin-left: -200px; */
    font-size: 18px;
    height: 35px;
    width: 194px;
}

.buttonProfil--einspaltig:hover,
.buttonProfil--einspaltig:focus {
    background-color: #eb1f27;
    /* background-color:#999999; */
    color: #ffffff;
    font: bold;
}

.buttonProfilPDF {
    background-color: #D8D8D8;
    /* margin: 1rem 40%; */
    margin-right: 0;
    margin-left: 55%;
    font-size: 18px;
    height: 35px;
    width: 194px;
}

.buttonProfilPDF--einspaltig {
    background-color: #D8D8D8;
    margin-right: 0;
    margin-left: 10%;
    font-size: 18px;
    height: 35px;
    width: 194px;
}

.buttonProfilPDF--einspaltig:hover,
.buttonProfilPDF--einspaltig:focus,
.buttonProfilPDF:hover,
.buttonProfilPDF:focus {
    background-color: #eb1f27;
    /* background-color:#999999; */
    color: #ffffff;
    font: bold;
}

.pdf__titel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.5rem;

}

.pdf__titelZus {
    color: #eb1f27;
    font: bold;
    margin: 0;
    padding-top: 0.5rem;
    order: 2;
}

.ProfilAuswahl-titel {
    color: #eb1f27;
    font: bold;
    /* grid-area: ProfilAuswahl-titel; */
}

/*  .ProfilAuswahlBox-Textteil{
        display:block;
        } */
.ProfilAuswahlBox-bild {
    height: 80px;
}

.ProfilAuswahlBox-strich--aktiv {
    width: 7rem;
    margin-left: 15px;
    border-bottom: 10px solid #eb1f27;
}

.ProfilAuswahlBox-strich {
    width: 7rem;
    margin-left: 15px;
    border-bottom: 10px solid #999999;
}

.ProfilAuswahlBox-titel {
    color: #000000;
    font-size: 1rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.ProfilAuswahlBox-titel--aktiv {
    color: #eb1f27;
    font-size: 1rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

/*  .ProfilAuswahlBox-text {
        margin-left: 15px;
        margin-top: 5px;
        color: #434343;
        font-size: 14px;
    } */
/* Lichtfarbe Anfang */
.AbdeckungAuswahl {
    display: grid;
    grid-template-columns: 410px;
    grid-template-rows: repeat(5, 80px);
    grid-template-areas: "AbdeckungAuswahl-titel"
        "#abdeckungBox_klar"
        "#abdeckungBox_leicht"
        "#abdeckungBox_stark"
        "#abdeckungBox_H"
        "#abdeckungBox_schwarz"
    ;
    background-color: #F2F2F2;
    grid-area: AbdeckungAuswahl;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.AbdeckungAuswahl--aktiv {
    display: none;
    grid-template-columns: 410px;
    grid-template-rows: repeat(5, 80px);
    grid-template-areas: "AbdeckungAuswahl-titel"
        "#abdeckungBox_klar"
        "#abdeckungBox_leicht"
        "#abdeckungBox_stark"
        "#abdeckungBox_H"
        "#abdeckungBox_schwarz"
    ;
    background-color: #F2F2F2;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.AbdeckungAuswahl-titel {
    color: #eb1f27;
    font: bold;
    grid-area: AbdeckungAuswahl-titel;
}

.AbdeckungBox {
    display: flex;
    /*  background-color: lightgreen; */
    /* justify-content: start; */
    margin-bottom: 5px;
    border-bottom: 1px solid #999999;
    height: 80px;
}

.AbdeckungBox:hover {
    background-color: #D8D8D8;
    cursor: "pointer";
}

.abdeckungBox-bild {
    height: 80px;
}

.abdeckungBox-strich--aktiv {
    width: 5rem;
    margin-left: 15px;
    border-bottom: 10px solid #eb1f25;
}

.abdeckungBox-strich {
    width: 5rem;
    margin-left: 15px;
    border-bottom: 10px solid #999999;
}

.abdeckungBox-titel {
    color: #000000;
    font-size: 1rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.abdeckungBox-titel--aktiv {
    color: #eb1f27;
    font-size: 1rem;
    padding-top: 0.3rem;
    margin-left: 15px;
    margin-top: 5px;
}

.abdeckungBox-text {
    font-size: .8rem;
    padding-top: 0.3rem;
    margin-left: 15px;
}

.abdeckungBox-textteil {
    display: block;
}

.Befestigungsartauswahl {
    grid-area: Befestigungsartauswahl;
    background-color: #F2F2F2;
    color: #eb1f27;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.KabeleinfAusw,
.BefestigArtAusw {
    margin-right: 0;
    padding: 0;
}

.Kabeleinf,
.BefestigArt {
    /* display: block;
flex-direction: column; 
margin-left: 5px;*/
    color: #434343;
    font-size: 1rem;
    border: 0;
    /*  */
    width: 350px;
}

.KabeleinfAusw-titel,
.BefestigArt-titel {
    color: #eb1f27;
    font: bold;
    margin-bottom: 5px;
    margin-left: 15px;
}

.BefestigArt-label {
    /* float: left; */
    display: flex;
    padding-top: 8px;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;
    width: 355px;
    height: 50px;
    text-align: left;
}

.BefestigArt-label_IR {
    display: flex;
    padding-top: 8px;
    border-bottom: 1px solid #434343;
    background-color: #ffffff;
    width: 355px;
    height: 60px;
    text-align: left;
}

.BefestigArt-label span {
    padding-left: 0px;
}

.BefestigArt-label--aktiv {
    display: flex;
    padding-top: 8px;
    /* border: 2px solid #eb1f27; */
    background-color: #999999;
    color: #ffffff;
    font: bold;
    width: 355px;
    height: 50px;
    text-align: left;
}

.BefestigArt-label_IR--aktiv {
    display: flex;
    padding-top: 8px;
    background-color: #999999;
    color: #ffffff;
    font: bold;
    width: 355px;
    height: 60px;
    text-align: left;
}

.BefestigArt-label_IR--aktiv span,
.BefestigArt-label--aktiv span {
    padding-left: 0px;
}

.BefestigArt-label_IR:hover,
.BefestigArt-label:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.schenkellängAusw {
    /* display: block;
    flex-direction: column; */
    margin-left: 15px;
    color: #434343;
    font-size: 14px;
    border: 0;

}

.SchenkellängAusw-titel {
    color: #eb1f27;
    font: bold;
    font-size: 19.89px;
    margin-bottom: 5px;
    /* margin-left: 15px;*/
}

.SchenkellängAusw-box:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.SchenkellängAusw-box {
    height: 30px;
    width: 350px;
    font-size: 14px;
    margin-bottom: 10px;
}

.SchenkellängAusw-text {
    margin: 0;
    padding-left: 10px;
    padding-top: 5px;
    font-size: 12px;
}

.bohrMenge {
    /* display: block;
    flex-direction: column; */
    margin-left: 15px;
    color: #434343;
    font-size: 14px;
    border: 0;
}

.BohrungAuswahlBox {
    display: flex;
    margin-bottom: 5px;
    border-bottom: 1px solid #999999;
    height: 40px;

}

.BohrAusw-titel {
    color: #434343;
    /* font: bold; */
    font-size: 13px;
    margin-bottom: 5px;
    width: 130%;
    margin-left: 15px;
}

.BohrungAuswahlBox label {
    opacity: 0.8;
    color: #434343;
    position: relative;
    top: 15px;
    left: -330px;
    font-size: 11px;
    height: 25px;
    width: 10px;
}

.BohrAusw-box:hover {
    background-color: #D8D8D8;
    /*  cursor: "pointer"; */
}

.BohrAusw-box {
    height: 25px;
    width: 100px;
    font-size: 15px;
    margin-top: 10px;
    border: 0;
}


@media screen and (max-width: 550px) {
    .ProfilAuswahlBox-bild {
        height: 70px;
    }

    .ProfilAuswahlBox-titel {
        font-size: 1rem;
        padding-top: 0.2rem;
        margin-left: 15px;
        margin-top: 3px;
    }

    .ProfilAuswahlBox-text {
        margin-left: 15px;
        margin-top: 3px;
        font-size: 12px;
    }
}

p {
    margin: 0;
}

/* Default Einstellung */
#lichtfarbeBox_xw,
#lichtfarbeBox_cw,
#lichtfarbeBox_dl,
#lichtfarbeBox_meat {
    display: none;
}

/* ProfilAuswahl Ende */
/* ProfilSeite Ende */