/* Anfang Klein - Schriflayout K*/
    @media all and (min-width:0em){body {padding:0px;margin:0px;text-align:center;}
/* Ende Klein - Schriflayout K*/

    /* Anfang Klein geschrieben N*/
        small{font-size: 0.7em; font-weight:lighter;}
    /* Ende Klein geschrieben N*/

    /* Anfang Impressum Box Hintergrundfarbe N*/
        .black-box-opacity-5 {background: rgba(0,0,0,0.6);}
    /* Ende Impressum Box Hintergrundfarbe N*/

    /* Anfang Menü Hintergrundfarbe - Schriftfarbe  N*/
        .dark-grey-box, .menu-btn, .menu-btn.is-close::before, .menu-btn.is-close::after, .menu-btn.is-open::before, .menu-btn.is-open::after {background-color: #2e2828;color: #293133;}
    /* Ende Menü Hintergrundfarbe - Schriftfarbe  N*/

    /* Anfang Schriftfarbe Menü N*/
        .dark-grey-box a {color: #ffffff;}
    /* Ende Schriftfarbe Menü N*/

    /* Anfang Überschriften Farbe und Position N*/
        h2, h3 {color: #293133; margin: 0.5em 0em; margin: 8px 0px;}
    /* Ende Überschriften Farbe und Position N*/

    /* Anfang Link Farbe N*/
        .a {color: #0044CC;}
    /* Ende Link Farbe N*/

    /* Anfang Trenner Linie - Farbe - Größe - Prosition N*/
        .seperator {border-top: 1px solid #2e2828;margin: 3em;margin: 48px;}
    /* Ende Trenner Linie - Farbe - Größe - Prosition N*/

    /* Anfang Impressum Box Hintergrundfarbe Hintergrundfarbe - Schriftfarbe N*/
        .white-box {background-color: #ffffff;color:#293133;}
    /* Ende Impressum Box Hintergrundfarbe Hintergrundfarbe - Schriftfarbe N*/

    /* Anfang Menü Schatten N*/
        .menu-btn, .menu-btn.is-close::before, .menu-btn.is-close::after, .menu-btn.is-open::before, .menu-btn.is-open::after, #mainNav {box-shadow: 0px 0px 4px rgba(255,255,255,0.7);}
    /* Ende Menü Schatten N*/

    /* Anfang Impressum Box "schließen" farbe N*/
        .white-text {color: #ffffff;}
    /* Ende Impressum Box "schließen" farbe N*/

    /* Anfang Alle Links nicht Unterstrichen N*/
        a {text-decoration: none;}
    /* Ende Alle Links nicht Unterstrichen N*/

    /* Anfang Alle Links Unterstrichen wenn Maus N*/
        a:hover {text-decoration: underline;}
    /* Ende Alle Links Unterstrichen wenn Maus N*/

    /* Anfang Impressum Box "schließen" Schriftgröße N*/
        .big-text {font-size: 1.5em;}
    /* Ende Impressum Box "schließen" Schriftgröße N*/

    /* Anfang Standard - Schriftart - Schriftgröße - Schriftfarbe N*/
        body {font-family:Arial, Helvetica, sans-serif;	font-size: 18px; background-color: #fae8e7;}
    /* Ende Standard - Schriftart - Schriftgröße - Schriftfarbe N*/
        
    /* Anfang Trenner Linie - Größe - Prosition K*/
        .seperator {width: 75%;margin: auto;}
    /* Ende Trenner Linie - Größe - Prosition K*/

    /* Anfang Elementen Anordnung aufgehoben K*/
        .clear {clear: both;}
     /* Ende Elementen Anordnung aufgehoben K*/

    /* Anfang Content Position - Ausrichtung - Größe K*/
        .container {position: relative;margin: auto;text-align: left; width: 100%;}
    /* Ende Content Position - Ausrichtung - Größe K*/
    
    /* Anfang Absatz mit Bildern - Größe - Schriftgröße K*/
        .columns-0-5 {width: 95%;font-size: 0.9em;}
    /* Ende Absatz mit Bildern - Größe K*/

    /* Anfang Absatz mit Bildern - Bildergröße K*/        
        .columns-0-5 img {width: 80%;}
    /* Ende Absatz mit Bildern - Bildergröße K*/
    
    /* Anfang Absatz Ohne Bilder - Größe - Schriftgröße K*/        
         .columns-4 {width: 75%;font-size: 0.9em;}
    /* Ende Absatz Ohne Bilder - Größe K*/        

    /* Anfang Impressum & Co - Corsor Touchsymbol - Unterstreichen K*/     
        [data-action=loadModalBox] {cursor: pointer; text-decoration: underline;}
    /* Ende Impressum & Co - Corsor Touchsymbol - Unterstreichen K*/     

    /* Anfang für JS Touchsymbol K*/ 
        [data-action=askForOffer] {cursor: pointer;}
    /* Anfang für JS Touchsymbol K*/  

    /* Anfang Menü Rahmen Abstände K*/ 
        .padding-8 {padding: 0.5em; padding: 8px;}
    /* Ende Menü Rahmen Abstände K*/ 

    /* Anfang Header größe und Position K*/ 
        header {height: 6.25em; height: 100px; position: relative; z-index: 10;}
    /* Ende Header größe und Position K*/ 
    
    /* Anfang Logo Position - größe K*/ 
        header .logo {position: absolute; left: 0.5em; left: 8px; top: 1.5em; top: 24px; width: 11.25em; width: 300px;}
    /* Ende Logo Position - größe K*/ 

    /* Anfang Logo Bild größe K*/ 
        header .logo img {width: 75%;}
    /* Ende Logo Bild größe K*/ 

    /* Anfang Menü Aufgeklappt Position und größe K*/ 
        header nav {position: absolute; right: 0.5em; right: 8px; top: 5em; top: 80px;}
    /* Ende Menü Aufgeklappt Position und größe K*/
    
    /* Anfang Menü geschlossen Position und größe K*/
    header nav.is-close {height: 0em; height: 0px; opacity: 0; overflow: hidden; width: 0em; width: 0px;}
    /* Ende Menü geschlossen Position und größe K*/

    /* Anfang Menü Aufgeklappt größe K*/ 
        header nav.is-open {height: auto; opacity: 1; width: auto;}
    /* Ende Menü Aufgeklappt größe K*/ 

    /* Anfang Menüpunkte Position K*/ 
        header nav ul {list-style: none; margin: 0em; margin: 0px; padding: 0em; padding: 0px;}
    /* Ende Menüpunkte Position K*/ 
        
    /* Anfang Menübutton Position K*/ 
        header .header-menu {position: absolute; right: 1em; right: 16px; top: 2em; top: 32px;}
    /* Ende Menübutton Position K*/ 

    /* Anfang Menübutton Feste Position K*/ 
        header .menu-container {position: fixed; width: 100%}
    /* Ende Menübutton Feste Position K*/ 

    /* Anfang Menübutton Mauszeiger K*/ 
        header .menuBtnContainer {cursor: pointer; height: 2.25em; height: 36px;}
    /* Ende Menübutton Mauszeiger K*/ 

    /* Anfang Menübutton Rotation K*/ 
        header .menu-btn {transition:all linear 0.2s;}
    /* Ende Menübutton Rotation K*/ 

    /* Anfang Menübutton aussehen - ein Striche K*/ 
        header .menu-btn.is-close, header .menu-btn.is-close:before, header .menu-btn.is-close:after {height: 4px; margin-left: 10px; position: relative; width: 35px;}
    /* Ende Menübutton aussehen - ein Striche K*/ 
        
    /* Anfang Menübutton Position K*/ 
        header .menu-btn.is-close:before, header .menu-btn.is-close:after {content: ""; left:-10px; position: absolute;}
    /* Anfang Menübutton Position K*/ 

    /* Anfang Menübutton aussehen - zweiter Strich K*/ 
        header .menu-btn.is-close:before {top:10px;}
    /* Ende Menübutton aussehen - zweiter Strich K*/ 

    /* Anfang Menübutton aussehen - dritter Strich K*/ 
        header .menu-btn.is-close:after {top:20px;}
    /* Ende Menübutton aussehen - dritter Strich K*/ 

    /* Anfang Menübutton aussehen - Position - X - erster strich K*/ 
        header .menu-btn.is-open {height: 2.5em; height: 40px; margin-left: -1.5em;
        margin-left: -24px; position: relative; width: 10px;}
    /* Ende Menübutton aussehen - Position - X - erster strich K*/ 

    /* Anfang Menübutton aussehen - Position - X - zweiter strich K*/
        header .menu-btn.is-open:before {content: ""; left: -15px; height: 10px; position: absolute; top: 15px; width: 40px;}
    /* Ende Menübutton aussehen - Position - X - zweiter strich K*/

    /* Anfang Menübutton X Rotation K*/ 
        header .menu-btn.is-open {transform: rotate(45deg);}
    /* Ende Menübutton X Rotation K*/ 

    /* Anfang Banner Position - größe K*/ 
        .claim {height: 17.5em; height: 220px; position: relative; overflow: hidden; width: 100%; z-index: 0;}
    /* Ende Banner Position - größe K*/ 

    /* Anfang Banner Bild Position - größe K*/ 
        .claim .claim-image {position: absolute; width: 100%; x-index: 0;}
    /* Anfang Banner Bild Position - größe K*/ 

    /* Anfang Bilder Layout - Position K*/ 
        .main-content .article-images .article-item {float: left; margin: 0% 2% 0% 0%;}
    /* Ende Bilder Layout - Position K*/ 

    /* Anfang Banner Bild - größe K*/ 
         .claim-image img {width: 100%;}
    /* Ende Banner Bild - größe K*/ 

    /* Anfang Impressum Layout K*/     
        .legaslative-container ul {list-style: none; margin: 0em; margin: 0px; padding: 0em; padding: 0px;}
    /* Ende Impressum Layout K*/     

    /* Anfang Impressum Layout - Nebeneinander K*/     
        .legaslative-container ul li {font-size: 0.9em; float: left; margin: 0em 1em 2em 0em; margin: 0px 16px 32px 0px; padding: 0em 1em 0em 0em; padding: 0px 16px 0px 0px;}
    /* Ende Impressum Layout - Nebeneinander K*/   
       
    /* Anfang Impressum Trennstrich nicht anzeigen K*/
        .wech {display: none;}     
    /* Ende Impressum Trennstrich nicht anzeigen K*/
        
    /* Anfang Impressums Box anzeigen - Position - Delay Zeit bis sichtbar K*/
        #modalbox {position: fixed; overflow: auto; text-align: left; transition: all linear 0.2s; z-index: 20;}
    /* Ende Impressums Box anzeigen - Position - Delay Zeit bis sichtbar K*/

    /* Anfang Impressums Box geschlossen - Position beim schließen K*/
        #modalbox.is-close {height: 10%; right: 0%; top: 0%; width: 0%;}
    /* Ende Impressums Box geschlossen - Position K*/

    /* Anfang Impressums Box anzeigen - Position K*/
        #modalbox.is-open {height: 80%; right: 5%; top: 10%; width: 80%; padding: 1em;}
    /* Ende Impressums Box anzeigen - Position K*/

    /* Anfang Impressums Box Schließen anzeigen - cursor - Position K*/
        #modalboxClose {cursor: pointer; position: fixed; text-align: center; top: 3%; width:100%; z-index: 20;}
    /* Ende Impressums Box Schließen anzeigen - cursor - Position K*/

    /* Anfang Impressums Box X nach Schließen K*/
        #modalboxClose:after {content:"\2718"}
    /* Ende Impressums Box X nach Schließen K*/
    
    /* Anfang Impressums Box Schließen X verschwindet nach drücken K*/
        #modalboxClose.is-close {display: none;}
    /* Ende Impressums Box Schließen X verschwindet nach drücken K*/

    /* Anfang Impressums Box Schließen X ist sichtbar vor drücken K*/
    #modalboxClose.is-open {display: block;}
    /* Anfang Impressums Box Schließen X ist sichtbar vor drücken K*/
        
    /* Anfang Impressums Hintergrund Delay Zeit bis sichtbar K*/
        #overlay {left: 0%; position: fixed; top: 0%; transition: all linear 0.2s; z-index: 10;}
    /* Ende Impressums Hintergrund Delay Zeit bis sichtbar K*/

    /* Anfang Impressums Box Hintergrund Position beim schließen K*/
        #overlay.is-close {height: 0%; width: 0%;}
    /* Ende Impressums Box Hintergrund Position beim schließen K*/
    
    /* Anfang Impressums Box Hintergrund Position beim Offnen K*/
        #overlay.is-open {height: 100%; width: 100%;}
    /* Ende Impressums Box Hintergrund Position beim Offnen K*/

    /* Anfang Impressums Box Hintergrund nicht scrollbar beim Offnen K*/
        .overlay-active {overflow: hidden;}
    /* Ende Impressums Box Hintergrund nicht scrollbar beim Offnen K*/

        /* Anfang Mittel - Schriflayout M*/
            @media all and (min-width:48em){
        /* Ende Mittel - Schriflayout M*/

        /* Anfang Impressum Trennstrich anzeigen M*/
            .wech {display: block;}
        /* Ende Impressum Trennstrich anzeigen M*/
            
        /* Anfang Trenner Linie - Größe - Prosition M*/
            .seperator {width: 650px; margin: auto;}
        /* Ende Trenner Linie - Größe - Prosition M*/

        /* Anfang Logo größe M*/
            header .logo img {width: 100%;}
        /* Ende Logo größe M*/
    
    .columns-0-5 {
        width: 7em;
        width: 112px;
    }
    
    .columns-0-5 img, .columns-0-1 img, .columns-3 img , .columns-4 img {
        width: 300%
            
        
    }
    
    .columns-1 {
        width: 15.5em;
        width: 248px;
    }
    
    input.result {
        width: 15.5em !important;
        width: 248px !important;
    }
    
    .columns-2 {
        width: 35.5em;
        width: 508px;
    }
    
    .columns-3 {
        width: 48em;
        width: 768px;
    }
    
        .columns-4 {
        width: 48em;
        width: 650px;
        font-size: 1em;
    }
    
    .padding-12-flanks {
        padding: 0em;
        padding: 0px;
    }
    
    /* header*/
    header .right, header nav {
        right: 0em;
        right: 0px;
    }
    
    /* Claim */
    .claim {
        height: 25em;
        height: 400px;
    }
        
    .claim .claim-content {
        top: auto;
        bottom: 2em;
        bottom: 32px;
        left: 0em;
        left: 0px;
    }
    
    /* Main Content */
    .main-content .article-images .article-item {
        margin: 0em 0.75em 0em 0em;
        margin: 0px 12px 0px 0px;
    }
    
    .main-content .article-images .article-item:last-child {
        margin: 0em;
        margin: 0px;
    }

    
    .main-content .main-content-image-max img {
        margin-top: -2.5em;
        margin-top: -40px; 
    }
    
    /* Produkt Angebote */
    #productOffers .product, #productOffers .product:nth-child(2n +2) {
        float: left;
        margin: 0em 0.75em 0.75em 0em;
        margin: 0px 12px 12px 0px;
    }
    
    #productOffers .product:nth-child(3n+3) {
        margin: 0em 0em 0.75em 0em;
        margin: 0px 0px 12px 0px;
    }
    
    /* Forms */
    .forms--content input, .forms--content textarea {
        width: 43.75em;
        width: 700px;
    }
}


/* 960 px */
@media all and (min-width:60em){
    
    
    .seperator {
        
    width: 820px;
    margin: auto;

}
    
     header .logo img {
        width: 100%;
    }
    
    .columns-0-5 {
        width: 9.375em;
        width: 350px;
    }
    
    
        .columns-0-5 img, .columns-0-1 img, .columns-3 img , .columns-4 img {
        width: 95%;
    }
    
    .columns-1 {
        width: 19.5em;
        width: 312px;
    }
    
    input.result {
        width: 15.5em !important;
        width: 248px !important;
    }
    
    .columns-2 {
        width: 39.75em;
        width: 636px;
    }
    
    .columns-3 {
        width: 60em;
        width: 980px;
    }
    
    
        .columns-4 {
        width: 60em;
        width: 820px;
        font-size: 1em;
    }
    /* Claim */
    .claim {
        height: 32.5em;
        height: 520px;
    }
    
    /* Forms */
    .forms--content input, .forms--content textarea {
        width: 51.75em;
        width: 828px;
    }
    
    /* Modal Box */
    
    #modalbox.is-open {        
        height: 80%;
        right: 15%;
        top: 10%;
        width: 70%;

    }
}