/*-------seiten-aufbau-------*/

* {
    box-sizing: border-box; /*Korrektur von schlechten Browsereinstellungen*/
}

html, body { /*sichere Rahmeneinstellungen für die Seite*/
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px; /*Abstand vom Rahmen nach außen*/
    padding: 0px; /*Abstand vom Rahmen nach innen*/
    overflow: hidden;
    perspective: 1px;
    perspective-origin: 0 0;
}

body {
    font-family: var(--fontFamily); /*Schriftart*/
    font-weight: var(--fontWeight); /*Schriftdicke*/
    line-height: var(--lineHeight); /*Zeilenabstand*/
    background-color: rgb(var(--colBG)); /*Hintergrundfarbe*/
    letter-spacing: var(--letterSpacing);

}

header {
    width: 100%;
    height: var(--navHeight);
    padding: 1em;
    background-color: rgb(255,255,255);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
}
    .header__entry {
        height: calc(var(--navHeight) * 0.65);
        padding: 2px 1em;
    }
    header.flex--hori{
        flex-wrap: nowrap;
    }

    .navi__entry {
        color: rgb(var(--colUIText05));
    }
        .navi__entry--current {
            color: rgb(var(--colAction));
        }
    .navi__entry.dropDown__entry {
        margin: 0px;
        text-decoration: none;
    }

main {
    width: 100%;
    height: calc(100vh - var(--navHeight));
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: var(--navHeight);
    perspective: 300px;
}
section {
    padding-top: 12em;
    padding-bottom: 12em;
    flex-shrink: 0;
    width: 100%;
    min-height: 100vh;
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
}

    .section--shadow {
        box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, 0.2);
    }
    .section--dark {
        color: rgb(var(--colLight));
    }
    .section--signal {
        /*shuffle up colors*/
        /*signals get regular background*/
        --colSignalText: var(--colSignal);
        --colBG: var(--colSignalDark);
        --colText: var(--colLight);
        --colPadding: 0.1em;

        color: rgb(var(--colText));
        background-color: rgb(var(--colBG));
    }

    .section--double {
        min-height: 200vh;

    }


    .section--triple {
        min-height: 300vh;

    }


.column {
    width: 100%;
    position: relative;
    padding: 0px var(--columnPadding);
    max-width: var(--columnWidth);
    border-radius: 0.5em;
}
    .column--40em {
        height: 40em;
    }
    .column--wide {
        /*text-align:center;*/
        display: flex;
        align-items: center;
        flex-direction: column;
        max-width: 100%;
    }

    .column__image {
        position: absolute;
    }
    .column__block {
        position: relative;
    }
    .column__halfSquare {
        width: 50%;
        padding-top:35%;
    }
        .column__blockContent {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2em;
        }

    .ratioBlock {
        position: relative;
    }
        .ratioBlock__content {
            position: absolute;
            top:0px;
            left:0px;
            bottom:0px;
            right:0px;
        }

footer {
    background-color: rgb(var(--colDarker));
    color: rgb(var(--colLight));
    padding: 3em;
}
    .footer__link {
        margin:1em;
    }

.spacer--verti40 {
    height: 40vh;
    width: 100%;;
}

.product {
    height: 24em;
}



.dark {
    color: rgb(var(--colUIText02));
    background-color: rgb(86,86,86);
}





.form__field {
    display: flex;
    flex-direction: column;
}
    .form__field--third {
        width: calc((100% - 2em) / 3);
    }



/*-------allgemeine Elemente-------*/

h1, h2, h3, h4 {
    line-height: 1.1em;
    margin-top: 0px;
    font-weight: 100;
    letter-spacing: 0.035em;
    margin-bottom: 1.2em;
}
    h2, h1, .h2 {
        font-size: 2em;
    }
    h3 {
        font-size: 1.5em;
    }

    .h2--center, .h3--center {
        text-align: center;
    }

ol {
    /*font-size: 2em;*/
    opacity: 0.9;
    list-style: decimal;
    text-align: left;
    display: block;
    /*line-height: 1.35em;
    max-width: 40em;
    color: rgb(var(--colUIBack03));*/
}


button, .button {
    background: none;
    color: rgb(255,255,255);
    font-weight: bold;
    text-decoration: none;
    border-radius: 0.45em;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgb(245,195,0);
    padding: 0.7em;
    width: fit-content;
    border-width: 0px; /*overwrites settings of input type="button"*/
    white-space: nowrap;
}

    .button--small {
        padding: 0px;
    }
    .button--border {
        padding: 10px;
        background-color: transparent;
        color: rgb(240,240,240);
        outline-color: rgb(240,240,240);
        outline-style:solid;
    }
    .button--red {
        background-color: rgb(244, 78, 78);
    }

    .button--inactive {
        opacity: 50%;
    }

.dropDown {
    height: var(--dropDownHeight);
    overflow: hidden;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.dropDown:hover, .dropDown:focus, .dropDown--open {
    overflow: visible;
}

    .dropDown__entry {
        padding: var(--dropDownPadding);
        margin: 0px;
        background-color: inherit;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        .dropDown__entry:hover {
            background-color: rgb(var(--colAction03));
            border-radius: 0.5em;
        }

p {
    min-width: var(--textWidthMin);
    max-width: var(--textWidthMax);
    margin-top: 0px;
    font-size: 1.1em;
    /*padding-right: 2em;*/
    margin-bottom: var(--lineHeight);
}

    em, .text--emphazised {
        text-transform: uppercase;
        font-style: normal;
        color: rgb(var(--colSignalText));
        background-color: rgb(var(--colSignalBG));
        padding: var(--colPadding);
    }

    .text--slogan {
        font-size: 2em;
        opacity: 0.9;
        text-align: center;
        /*display: block;*/
        line-height: 1.35em;
        max-width: 22em;
    }


    
    .invisible {
        visibility: collapse;
    }

    /*Lektorat*/
    .text--remove {
        color: tomato;
        text-decoration: line-through;
    }
    .text--add {
        color: yellowgreen;
        text-decoration: underline;
    }

    a {
        color: rgb(var(--colAction));
        text-decoration: none;
    }
    summary {
        user-select: none;
        text-decoration: none;
        display: block;
    }
    summary:hover {
        text-decoration: underline;
        cursor: pointer;
    }
    details summary::-webkit-details-marker {
        display:none;
    }
    
    details[open] summary {
        outline: 0;
        opacity: 0.5;
    }
    
    details[open] summary:before {
        content: "-";
        opacity: 1;
    }
    details summary:before {
        content: "+";
        display: block;
        text-align: center;
    }
    

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

input[type="text"], textarea, input[type="checkbox"] {
    padding: 0.8em;
    border-radius: 0.2em;
    border-width: 0.2em;
    border-style: solid;
    border-color: rgb(var(--colDarker));
}

input[type="text"]:invalid, textarea:invalid, input[type="checkbox"]:invalid {
    border-color: rgb(var(--colSignal));
}


.hamburger{
    cursor: pointer;
}
    .hamburger__line{
        width: 2em;
        height: 0.125em;
        background-color: rgb(var(--colAction));
        display: block;
        margin: 8px auto;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .hamburger.hamburger--open>.hamburger__line:nth-child(1) {
        -webkit-transform: translateY(13px) rotate(45deg);
        -ms-transform: translateY(13px) rotate(45deg);
        -o-transform: translateY(13px) rotate(45deg);
        transform: translateY(13px) rotate(45deg);
    }

    .hamburger.hamburger--open>.hamburger__line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.hamburger--open>.hamburger__line:nth-child(3) {
        -webkit-transform: translateY(-13px) rotate(-45deg);
        -ms-transform: translateY(-13px) rotate(-45deg);
        -o-transform: translateY(-13px) rotate(-45deg);
        transform: translateY(-13px) rotate(-45deg);
    }

    .box {
        color: rgb(var(--colUIText01));
        background-color: rgb(70,70,70);
        background-repeat: no-repeat;
        margin: 0.5em;
        border-radius: 1em;
        position: relative;
        overflow: hidden;
    }

        .box__panel {
            position: relative;
            text-align: center;
            margin-left: -1em;
            padding: 10px 3em;
            line-height: 1.5em;
            width: calc(100% + 2em);
            margin-bottom: 1em;
        }
            .box__panel--saar {
                background-color: rgb(86, 86, 86);
            }
            .box__panel--hfh {
                background-color: rgb(0, 105, 180);
            }
            .box__panel--steinbeis {
                background-color: rgb(245,195,0);
            }
        .box__title {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            padding: 0px 2em;
            flex-direction: column;
            align-items: flex-start;
        }
            .box__name {
                margin-bottom: 0px;
            }
        .box__text {
            padding: 2em;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
            .box__text--image {
                width: 66%;
            }
            .product__button {
                bottom: 2em;
                margin-top: 2em;
                width: calc(100%);
                left: 3em;
            }

            .box__image {
                position: absolute;
                height: 39em;
                top: 2em;
                left: 65%;

            }
            .box__logo {
                position: absolute;
                height: 4em;
                top: 1em;
                right: -4em;
            }
            .box__button{
                position: absolute;
                bottom: 2em;
            }

    .price {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-end;
        justify-content: flex-start;
        height: 3.5em;
        width: 10em;
    }
        .price__major {
            width: fit-content;
            display: block;
            font-size: 3em;
            line-height: 1em;
            margin-right: 0.05em;
        }
        .price__minor {
            width: fit-content;
            font-size: 1.6em;
            margin-top: 0.05em;
        }
        .price__interval {
            width: fit-content;
            margin-left:0.1em;
            opacity: 0.5;
        }


/*-------allgemeine Regeln-------*/
.flex--hori, .flex--verti {
    display: flex;
    align-items: center;
    justify-content: center;
}
    .flex--hori {
        flex-wrap: wrap;
        flex-direction: row;
    }
        .flex--horiStart {
            flex-direction: row;
            justify-content: flex-start;
            align-content: flex-start;
        }
    .flex--verti{
        flex-direction: column;
    }
        .flex--vertiStart {
            flex-direction: column;
            justify-content: flex-start;
            align-content: flex-start;
        }
    .flex--start {
        align-items: flex-start;
        align-content: flex-start;
    }

    .flex--baseline {
        align-items: baseline;
    }
    .flex--spaced {
        justify-content: space-between;
    }

.parallax {
    position: relative;
    transform-style: preserve-3d;
}

    .parallax__layer {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100%;
        background-size: cover;
    }

        /*1 + ((Ztransform * -1) / perspective)*/
        .parallax__layer--fg2 {
            transform: translateZ(180px) scale(0.4);
        }
        .parallax__layer--fg1 {
            transform: translateZ(120px) scale(0.6);
        }
        .parallax__layer--bg0 {
            transform: translateZ(-120px) scale(1.4);
        }
        .parallax__layer--bg1 {
            transform: translateZ(-300px) scale(2);
        }
        .parallax__layer--bg2 {
            transform: translateZ(-600px) scale(3);
        }

.device--smart {
    border-style: solid;
    border-color: rgb(150,150,150);
}
    .device--smart {
        border-radius: 2.5em;
        border-width: 0.2em;
    }

.elem--bg {
    background-color: rgba(var(--colBG), 0.5);
    border-radius: 0.5em;
}



/*sonderlösungen*/
#navi__logo {
    position:absolute;
    left:0px;
}
#navi__testButton {
    position: absolute;
    right: 1em;
}
.home__keyword {
    width: 4em;
    text-align: right;
    margin-bottom: 0.4em;;
}
.home__claim {
    text-align: left;
    margin: 0.5em 0em 1.5em 1em;
    max-width: 16em;
}



/*-------responsibility-------*/
/*slim navi*/
@media (max-width: 60em) {
    .dropDown__entry:hover {
        border-radius: 0em;
    }
    nav.dropDown {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        position: absolute;
        left: 0px;
        z-index: 1;
    }
    nav.dropDown>.dropDown {
        height: fit-content;
        overflow: visible;
        width: 100%;
    }
    nav, .dropDown__entry {
        width: 100%;
        text-align: center;
    }
}

/*wide navi*/
@media (min-width: 60em) {
    .hidden--n2 {
        display:none;
    }
}



/*exactly 1 column*/
@media (max-width: 40em) {
    .hidden--c1{
        display: none;
    }
    .elem--bgSlim {
        background-color: rgba(var(--colBG), 0.5);
    }

    .product {
        border: 2px solid tomato;
    }

    #philoLaptop{
        top: 20em;
        right: -30em;
    }
    #softwareLogos {
        order:2;
    }
    #carePerson {
        top: 10em;
    }
}



/*min 2 columns*/
@media (min-width: 40em) {
    .column {
        width: 50%;
    }
        .column--wide {
            width: 100%;
        }

    .hidden--c2plus{
        display: none;
    }

    #philoLaptop{
        top: -28em;
        right: -23em;
    }

    #carePhone {
        top: -24em;
    }
    #carePerson {
        top: -20em;
    }
}


/*max 2 columns*/
@media (max-width: 80em) {
    .product {
        height: auto;
        width: 100%;
    }
        .product__title {
            flex-direction: column;
            align-items: flex-start;
        }
        .product__price {
            margin-top: 1em;
            align-content: flex-start;
        }
        .product__button{
            position:static;
            margin-top: 2em;
        }
}


#zeitleiste {
    position: relative;
    margin-left: 7.5em;
    list-style-type: none;
  }	
  
  #zeitleiste::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: -2.25em;
    top: 0;
    background: #999999;
    width: 0.4em;
  }
  
  #zeitleiste::after {
    position: absolute;
    content: "";
    bottom: -1.3em;
    left: -3em;
    width: 0;
    height: 0;
    border-width: 1em;
    border-style: solid;
    border-color: rgb(var(--colSignalDark)) transparent transparent transparent;
  }
  
  #zeitleiste >li::before{
    position: absolute;
    content: "";
    width: 0.5em;
    height: 0.5em;
    left: -2.5em;  
    border-radius: 50%;
    border: 0.2em solid rgb(var(--colSignalDark));
    background: rgb(var(--colAction));
  } 
  
  #zeitleiste >li {
    margin-bottom: 3em;
  }
  
  li h4 {
    margin: -1em 0 0.2em;
  }
  h5 {
    margin: -1em 0 0.2em;
    font-weight: bold;
  }
  
  time {
      display: block;
      margin-left: -10em;
      width: 6.5em;
      text-align:right;
  }






/*debugging*/
.debugMessage {
    display:none;
}
/*.debugMessage {
    color:rgb(var(--colSignalBright));
    position: fixed;
    top: 4em;
    left: 4em;
}

section {
    border: 2px solid teal;
}
    section:nth-child(2n+1) {
        border-color: crimson;
    }*/