.inhalt { padding: 0 !important; }

.form-komplett {
    box-sizing: border-box;
    max-width: 1400px;
    margin: auto;
    min-height: 100%;
    background: #fff;
    color: #000;
    --max-content-width: 1400px;
    --barthelme-blau: #006ab3;
    --barthelme-dunkelblau: #003a5c;
    --barthelme-hellblau: #d2d9eb;
    --barthelme-red: rgba(255, 0, 0, 0.913);
    --barthelme-green: #33a826;
    --header-top-distance: 15px;
    --default-font: DINWeb,sans-serif;
    --default-font-bold: DINWeb-Medium,sans-serif;
    --text-color: #404040;
    --margin--left: 25%
}

    .form-komplett input {
        font-size: 13px;
        text-rendering: optimizeLegibility;
        font-family: var(--default-font)
    }

    .form-komplett dl,
    .form-komplett ol,
    .form-komplett ul {
        margin: 0;
        overflow-x: hidden;
    }

    .form-komplett article,
    .form-komplett aside,
    .form-komplett audio,
    .form-komplett footer,
    .form-komplett header,
    .form-komplett nav,
    .form-komplett section,
    .form-komplett video {
        display: block
    }

    .form-komplett .h1,
    .form-komplett .h2,
    .form-komplett .h3,
    .form-komplett .h4,
    .form-komplett h1,
    .form-komplett h2,
    .form-komplett h3,
    .form-komplett h4 {
        text-transform: uppercase;
        font-weight: bold
    }

    .form-komplett .h1,
    .form-komplett h1 {
        font-size: 2.4em;
        text-align: center;
        margin: 0 0 1em
    }

    .form-komplett .h2,
    .form-komplett h2 {
        font-size: 1.5em;
        line-height: 1
    }

    .form-komplett .h3,
    .form-komplett h3 {
        font-size: 1em;
        line-height: 1
    }

    .form-komplett .h4,
    .form-komplett h4 {
        font-size: 1em;
        line-height: 1.2
    }

    .form-komplett .h5,
    .form-komplett h5 {
        font-size: 0.95em;
        line-height: 1.2
    }

    .form-komplett optgroup label {
        color: #003a5c
    }

    .form-komplett select#products {
        text-indent: 10px;
        appearance: auto;
        width: 60%;
    }

    .form-komplett .lower {
        text-transform: lowercase
    }

    .form-komplett .txtbold,
    .form-komplett .txtbold input,
    .form-komplett .txtbold label {
        font-family: var(--default-font-bold);
        font-size: 1rem
    }

    .form-komplett form {
        padding: 1rem
    }

        .form-komplett form h3:not(.form-zelle h3) {
            padding: 1rem;
        }



    .form-komplett .blue-back > h3 {
        padding: 1rem 0.5rem;
    }

    .form-komplett p {
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto
    }

    .form-komplett textarea {
        resize: vertical
    }

    .form-komplett table {
        border-collapse: collapse
    }

    .form-komplett td {
        padding: .5rem
    }

    .form-komplett img {
        border: none;
        max-width: 100%
    }


    .form-komplett .placeholder,
    .form-komplett .form-zelle h3,
    .form-komplett .form-zelle label {
        width: 100%;
        min-width: var(--margin--left);
        display: flex;
        align-items: center;
        max-width: 350px
    }

    .form-komplett .placeholder {
        min-width: 370px;
    }


    .form-komplett input[type=number],
    .form-komplett input[type=text] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        padding: .5rem;
        margin: .2rem;
        border-radius: 0px;
        border: 1px dotted #6d6d6d;
        text-align: end;
        width: 50%;
        background: 0 0;
        text-align: center
    }

    .form-komplett input::-webkit-inner-spin-button,
    .form-komplett input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .form-komplett :focus {
        outline: 1px dashed var(--barthelme-blau)
    }

    .form-komplett input[data-click=not] {
        border: 0 solid;
        pointer-events: none
    }

        .form-komplett input[data-click=not]::-moz-focus-inner,
        .form-komplett input[type=button]::-moz-focus-inner,
        .form-komplett input[type=submit]::-moz-focus-inner {
            border: 0
        }

    .form-komplett input[type=search] {
        -webkit-appearance: textfield
    }

    .form-komplett input[type=submit] {
        -webkit-appearance: none
    }

    .form-komplett input:required:after {
        color: red;
        content: " *"
    }

    .form-komplett input[type=email]:invalid {
        background: red
    }

    .form-komplett option {
        font-weight: 400;
        display: block;
        white-space: nowrap;
        min-height: 1.2em;
        padding: 2px 1px;
        line-height: 3
    }

    .form-komplett .unclickbl {
        pointer-events: none;
    }

    .form-komplett .right {
        float: right;
        margin-left: 2rem;
        clear: right
    }

    .form-komplett .left {
        float: left;
        margin-right: 2rem;
        clear: left
    }

    .form-komplett sub,
    .form-komplett sup {
        line-height: 0
    }

@font-face {
    font-family: DINWeb-Light;
    src: url("/kalkulator/webfonts/DINWeb-Light.eot")
}

@font-face {
    font-family: DINWeb-Light;
    src: url("/kalkulator/webfonts/DINWeb-Light.woff") format("woff")
}

@font-face {
    font-family: DINWeb-Medium;
    src: url("/kalkulator/webfonts/DINWeb-Medium.eot")
}

@font-face {
    font-family: DINWeb-Medium;
    src: url("/kalkulator/webfonts/DINWeb-Medium.woff") format("woff")
}

@font-face {
    font-family: DINWeb;
    src: url("/kalkulator/webfonts/DINWeb.eot")
}

@font-face {
    font-family: DINWeb;
    src: url("/kalkulator/webfonts/DINWeb.woff") format("woff")
}

.form-komplett .form-header {
    display: flex;
    /*width: 100%;*/
    align-items: baseline;
    /*  grid-template-columns: minmax(25%,350px) 25% 25%; */
    padding-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    overflow-x: auto;
    flex-direction: column;
}

.form-komplett .header-txt {
    max-width: 50ch;
    margin: 1rem auto;
}

.form-komplett .form-head {
    display: grid;
    /*width: 100%;*/
    grid-template-columns: 43% 25% 25%;
}

.form-komplett .umschalter {
    background-color: var(--barthelme-blau);
    padding: 1rem;
    max-width: 100px;
    position: fixed;
    color: var(--barthelme-hellblau);
    display: flex;
}

    .form-komplett .umschalter a {
        text-decoration: none;
        color: var(--barthelme-hellblau)
    }

        .form-komplett .umschalter a.active {
            color: #fff
        }

        .form-komplett .umschalter a:first-child {
            padding-right: 5px;
        }

        .form-komplett .umschalter a:nth-child(2) {
            padding-left: 5px;
        }

/* .form-komplett .form-head>*{
  padding: 0!important;
} */

.form-komplett .first-row {
    text-align: center;
    width: 100%;
    padding-right: 1rem;
}
/* 
.form-komplett .form-zelle input:nth-child(2) {
  background: bisque;
  padding: 1rem;
  border-left: 2px solid red;
}
 */

.form-komplett .second-row {
    text-align: center;
    width: 100%;
    padding-left: 1rem;
}

    .form-komplett .second-row h4 {
        max-width: 30ch;
        text-align: center;
        margin: auto;
        padding-bottom: 1rem;
    }

.form-komplett .form-zelle {
    display: flex;
    /*width: 100%;*/
    border-bottom: 1px dotted;
    padding: 0;
}

.form-komplett .bb {
    border-bottom: 3px solid var(--barthelme-blau);
    padding-left: 1em;
    padding-top: 1.5em;
}

.form-komplett .pb05 {
    padding-bottom: 0.5rem !important
}

.form-komplett .pt05 {
    padding-top: 0.5rem !important
}

.form-komplett .pt1 {
    padding-top: 1rem !important
}

.form-komplett .pt2 {
    padding-top: 2rem !important
}

.form-komplett .green {
    color: var(--barthelme-green);
    display: inline-block;
    transform: scale(1.1) translateX(0);
    background: 0 0;
    transform-origin: center;
    transition: all .3s ease
}

.form-komplett .red {
    color: var(--barthelme-red) !important;
    transform-origin: center;
    transform: scale(1) translateX(0);
    transition: all .3s ease
}

.form-komplett .desk--hidden {
    display: inline-block;
}

.form-komplett .centered {
    display: inline-flex;
    justify-content: flex-end;
}


.form-komplett .borderlos {
    border: 0 !important;
}

.form-komplett .blue-back,
.form-komplett .form-header {
    background-color: var(--barthelme-hellblau);
    color: var(--barthelme-blau);
}

    .form-komplett .blue-back input,
    .form-komplett .blue-back input.green {
        font-family: DINWeb-Medium;
    }

.form-komplett #e-savings-c,
.form-komplett #percent-total-c {
    opacity: 0;
}



@media screen and (min-width:719px) {

    .form-komplett .desk--hidden {
        display: none !important;
    }


    .form-komplett select {
        border: 1px dotted;
        font-size: .8em;
        font-family: var(--default-font);
        line-height: 20px;
        padding: .5rem;
        background-color: transparent;
        -webkit-appearance: auto;
    }

    .form-komplett input {
        font-size: 15px;
    }

    .form-komplett .first-row {
        border-right: 1px solid var(--barthelme-blau);
    }

    .form-komplett .form-header {
        display: flex;
        overflow-x: auto;
        flex-direction: row;
        align-items: center;
    }

    .form-komplett .form-zelle.bb.pt1,
    .form-komplett .form-zelle {
        padding: 0 1rem
    }

    .form-komplett .green {
        transform: scale(1.5) translateX(0);
    }


    .form-komplett form h3:not(.form-zelleh3) {
        padding: 1rem 0;
    }
}