*{  box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    
    -webkit-text-size-adjust: none;
    
    margin: 0px;
    padding: 0px;
    border: 0px;
}

@font-face
{
    font-family: "DaxLight";
    src: url('../Fonts/DaxWeb-Light.eot'), 
    url('../Fonts/DaxWeb-Light.woff') format('woff');  
    }

@font-face
{
    font-family: "DaxMedi";
    src: url('../Fonts/DaxWeb-Medi.eot'), 
    url('../Fonts/DaxWeb-Medi.woff') format('woff');  
    }
    
@font-face
{
    font-family: "PTsansRegular";
    src: url('../Fonts/PTS55F-webfont.eot'), 
    url('../Fonts/PTS55F-webfont.woff') format('woff');  
    }    

html
{
    scroll-behavior: smooth;
    }

body 
{
    
    font-family: Verdana, Arial;
}

form
{
    display:flex;
    flex-direction:column;
    height:100vh;
    }

img
{
    width:100%; 
    } 

h1, h2
{
    color:#3d4548;

    }

h1
{
    font-family: DaxMedi;
    font-weight: normal;
    font-size: 2.6em;
    }

h1, h2
{
    font-family: DaxLight;
    font-weight: normal;

    font-size: 2.3em;
    font-size: 2.2em;
    font-size: 35px;
    line-height: 1.3em;
    margin-bottom:0.1em;
    }
    
@media (max-width: 1250px)
{
    h1, h2 {
        font-size: 1.8em;
        font-size: 1.7em;
        font-size: 27px;
    }    
}

@media (max-width: 900px)
{
    h1 {
        font-size: 1.4em;
        font-size: 22.5px;
    } 
}


@media (max-width: 500px)
{
    h1 {
        font-size: 1.1em;
        
    }
}   

h3 
{
    font-family: DaxLight;
    font-weight: normal;
    font-size: 1.6em;
    line-height: 1.3em;
    /*margin-bottom:0.5em;*/
    }

h4 {
    font-family: DaxLight;
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.3em;

}

cite {
    font-family: DaxLight;
    font-weight: normal;
    font-style: normal;
    font-size: 32px;
    
    line-height: 1.3em;
}

@media (max-width: 1250px) {
    cite {
        font-size: 26px;
    }
}

@media (max-width: 750px) {
    cite {
        font-size: 26px;
    }
}

@media (max-width: 400px) {
    cite {
        font-size: 21px;
    }
}

p  {
    font-size: 1.3em;
    font-size: 21.0px;
    line-height: 1.5em;
    color: #3d4548;
    font-family: PTsansRegular;
    margin-bottom: 1.5em;
}
    
@media (max-width: 750px)
{
    p, li
    {
        font-size:1.0em;

    }
 }



a {
    color: #657378;
}



button {
    background-color: #333838;
    box-shadow: 2px 2px 8px #595959;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1.0em;
    cursor: pointer;
    color: #ffffff;
}

header#mainHeader {
    background-color: #ffffff;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0px;
    height: 134px;
    width: 100%;
    z-index: 200;
}
  
@media (max-width: 1920px)
{
    header#mainHeader
    {
      height:120px;  
    }
 }  
 
 

@media (max-width: 750px) {
    header#mainHeader {
        height: 100px;

    }
}


header#mainHeader picture {
    display: flex;
    align-items: center;
}

header#mainHeader .logo {

    width: 255px;
    height: 84px;

    margin-bottom: 3px;
   
}

@media (max-width: 1500px) {
    header#mainHeader .logo {
        max-width: 100%;
    }
}


@media (max-width: 1100px) {
    header#mainHeader .logo {

    }
}



@media (max-width: 750px) {
    header#mainHeader .logo {
        min-width: 180px;
        width: 180px;
    }
}

header#mainHeader div {
    min-width: 240px;
    max-width: 1026px; 
    width: 100%;
    height:inherit;
    margin-left: auto;
    margin-right: auto;
        
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
}
    
@media (max-width: 1500px)
{
    header#mainHeader div
    {
        max-width: 70%;
    }
 }

 
 @media (max-width: 900px)
{
    header#mainHeader div
    {
        /*max-width:70%; */
    }
 } 
 
  @media (max-width: 1024px) /* 750 */
{
    header#mainHeader div
    {
        max-width:85%; 
    }
 }


header#mainHeader nav#mainMenu {
    flex: 1 1 auto;
    margin-left: 80px;
    margin-top: 9px;
} 
    
@media (max-width: 900px)
{
    header#mainHeader nav#mainMenu
    {
   /* margin-left: 20px;*/
    }
 }   
    
     
@media (max-width: 750px)
{
    header#mainHeader nav#mainMenu
    {
       display:none;  

    }
 }    
 
header#mainHeader nav#mainMenu ul
{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    
    list-style-type:none;
    }

    
header#mainHeader nav#mainMenu li
{
    margin-right:16px;
    
    font-family: DaxLight;
    font-size: 1.6em;
    } 
    
@media (max-width: 900px)
{
    header#mainHeader nav#mainMenu li
    {
/*        font-size: 1.2em;*/
    }
 }       
    
header#mainHeader nav #mainMenu li:last-child
{
    margin-right:0px;
    }    
    
header#mainHeader nav#mainMenu a
{
    color:#3d4548;
    text-decoration:none;
    }

header#mainHeader nav#mainMenu a:hover {
    color: #657378;
}     
  
main
{
   display:block; /* Internet Explorer */

    }

section
{   
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;  
 
    min-width: 320px;
    max-width:100%;
    }
    
@media (max-width: 1500px)
{
    section 
    {
        background-size: 170% auto; 
    }
 }   
 
 @media (max-width: 750px)
{
    section 
    {
        background-size: 210% auto;
    }
 }   
    
section article
{   
    min-width: 280px;
    max-width: 1026px; 
    width: 100%;
    margin-left: auto;
    margin-right: auto;  
    margin-bottom: 50px; 

    overflow:hidden;
    } 
    
@media (max-width: 1500px)
{
   section article
    {
        max-width: 70%;
    }
 }  
 
@media (max-width: 1024px) /* 750px */
{
    section article
    {
        max-width: 85%;
        margin-bottom: 25px; 
    }
 }

main section .columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

main section .columns.center {
}



main section .columns.one.center {
    justify-content: space-around;
}

main section .columns.one {
}

main section .columns.two.center {
    justify-content: space-around;
}

main section .columns.two .column {
    width: 45%;
}



@media (max-width: 1250px) {
    main section .columns.two .column {
        width: auto;
    }
}

/* Intro */

main section.intro {
    margin-top: 120px;
    background-image: url(Pix/BackgroundIntro.svg);  
} 
    
 @media (min-width: 1920px)
{
    main section.intro
    {
    background-image: url(Pix/BackgroundIntro1900.svg); 
    }
 }   
   
@media (min-width: 1500px)
{
    main section.intro
    {    
    height:450px;
    }
 }  

   
@media (max-width: 750px)
{
    main section.intro
    {
        margin-top: 100px;
    }
 }   
    
main section.intro article
{  
    margin-bottom:50px;

    display:flex;
    justify-content: space-between;
    height:inherit;   
    }

@media (max-width: 450px) {
    main section.intro article {
        margin-bottom: 20px;
    }
}

/* Products */
main section.products article {
    display: flex;
    margin-bottom: 100px;
    overflow: unset;
}

@media (max-width: 900px) {
    main section.products article {
        margin-bottom: 60px;
    }
}
    
main section.products article a
{
    text-decoration:none;
    
    }    
    
main section.products article div:nth-child(1)
{
    width:53%;
    margin-right:15px;
    
    position:relative;
    }

    main section.products article div:nth-child(2) {
        width: 47%;
        margin-top: 7.0%;
    }

@media (max-width: 900px) {
    main section.products article div:nth-child(2) {
        margin-top: 4%;
    }
}

@media (max-width: 500px) {

    main section.products article {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    main section.products article div:nth-child(1) {
        width: 35%;
        width: 80%;

    }

    main section.products article div:nth-child(2) {
        width: 65%;
        width: 100%;

    }
}

main section.products article div:nth-child(1) .new {
    width: 116px;
    
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(205,33,23);
    background: linear-gradient(62deg, rgba(205,33,23,1) 0%, rgba(229,0,109,1) 100%);
    font-family: "DaxMedi";
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);

    position: absolute;
    top: 36px;
    z-index: 200;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

main section.products article div:nth-child(1) .new h2{
    font-size: 2.4em;
    color: #ffffff;
    transform: rotate(-7deg);
}

main section.products .productBubbleBorder {
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 900px) {
    main section.products .productBubbleBorder {
        margin-bottom: 0px;
    }
}

main section.products .productBubbleBorder.zerowasteindex {
    border: 1px solid #ed6e60;
}

main section.products .productBubbleBorder.aufgemoebeltes {
    border: 1px solid #892469;
}
    
main section.products .productBubbleBorder.abfall-abc
{
    border:1px solid #007e7d;
    
    }

main section.products .productBubbleBorder.abfuhrkalender {
    border: 1px solid #4A2E55;
    border: 1px solid #8d57a1;
}

main section.products .productBubbleBorder.flohmarktfinder {
    border: 1px solid #F0863B;
}
    
main section.products .productBubbleBorder.internetVerschenkmarkt
{
    border:1px solid #8e094e;
    
    }

main section.products .productBubbleBorder.kleinanzeigenFuerAbfallvermeider {
    border: 1px solid #018abe;
}

main section.products .productBubbleBorder.umfragen {
    border: 1px solid #E4072A;
}
    
   
main section.products .productBubble
{
    width: 100%;
    height:auto;
    border-radius:50%; 
    border:0px;
    }
    
main section.products .imageNotebook
{
    width:80%;
    position:absolute;
    bottom:0px; 
    right:-40%;
    }

@media (max-width: 900px) {
    main section.products .imageNotebook {
        display:none;
    }
}

main section.products .imageEndgeraete {
    width: 100%;
    position: absolute;
    bottom: -40px;
    right: -50%;
}

@media (max-width: 900px) {
    main section.products .imageEndgeraete {
        display: none;
    }
}

main section.products .imageEndgeraeteAufgemoebeltes, main section.products .imageEndgeraeteZerowasteindex {
    width: 70%;
    position: absolute;
    bottom: -20px;
    right: -40%;
}


@media (max-width: 1250px) {
    main section.products .imageEndgeraeteAufgemoebeltes, main section.products .imageEndgeraeteZerowasteindex {
        bottom: -35px;
    }
}

@media (max-width: 900px) {
    main section.products .imageEndgeraeteAufgemoebeltes, main section.products .imageEndgeraeteZerowasteindex {
        display: none;
    }
}

main section.products h2.medi
{
    font-family: DaxMedi;

    }

main section.products article p {
    
    margin-bottom: 0.1em;
}

/* Referenzen */

main section#references {
    background-image: url(Pix/BackgroundBox1.svg);
    background-size: cover, cover;
    background-repeat: no-repeat;
    background-position: top left;
    min-height: 31em;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 2000px) {
    main section#references {
        min-height: 25em;
    }
}

@media (max-width: 1200px) {
    main section#references {
    }
}

@media (max-width: 1250px) {
    main section#references {
        min-height: 21em;
    }
}

@media (max-width: 750px) {
    main section#references {
        background-image: url(Pix/BackgroundBox3.svg);
        min-height: 24em;
    }
}

@media (max-width: 400px) {
    main section#references {
        min-height: 24em;
    }
}

main section#references article {
    margin-bottom: 0px;
}

main section#references article {

}

/* Argumentationsfeld */

main section#argument 
{

    background-image: url(Pix/BackgroundBox1.svg);
    background-size: cover, cover;
    background-repeat:no-repeat;
    background-position:top left;
    min-height:31em;
        
    display:flex;
    justify-content:center;
    align-items:center;
    
    }
    
 @media (max-width: 2000px)
{
    main section#argument {
        min-height: 25em;
    }
 }    
    
@media (max-width: 1200px)
{
    main section#argument {
        
    }
 }   
 
 @media (max-width: 1250px)
{
    main section#argument {
        
        min-height: 21em;
    }
 }

@media (max-width: 750px) {
    main section#argument {
        background-image: url(Pix/BackgroundBox3.svg);
        min-height: 24em;
    }
}

@media (max-width: 400px) {
    main section#argument {
        min-height: 24em;
    }
}

main section#argument article {
    margin-bottom: 0px;
}
      
main section#argument article cite
{
    color: #ffffff;
    
    }


/* mailForm */

main section#mailForm {
    min-width: 280px;
    max-width: 1026px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}     
    
    @media (max-width: 1500px)
{
    main section#mailForm {
        max-width: 70%;
    }
 }  
 
@media (max-width: 1024px) /* 750 */
{
    main section#mailForm {
        max-width: 85%;
        margin-bottom: 25px;
    }
 }

main section#mailForm {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
}

main section#mailForm article {
    background-color: #717d7d;
    background-image: url(Pix/BackgroundBox2.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top left;
    margin-bottom: 0px;
    padding: 25px;
}    
    
@media (max-width: 1500px)
{
    main section#mailForm article {
        max-width: 100%;
    }
 }  
 
@media (max-width: 750px)
{
    main section#mailForm article {
        max-width: 100%;
    }
 }

main section#mailForm article .column {
    margin-bottom: 0px;

}

main section#mailForm .columns.one .column {
    width: 65%;
}

@media (max-width: 900px) {
    main section#mailForm .columns.one .column {
        width: 100%;
    }
}

/*
main section#mailForm a.button {
    color: #ffffff;
    text-decoration: none;
    background-color: #717d7d;
    box-shadow: 2px 2px 8px #595959;
    border-radius: 4px;
    width: 200px;
    height: 40px;
    margin-top: 25px;
    display: block;
    align-self: flex-end;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/

/* Impressum */
main section#impressum, main section#datenschutzerklaerung {
    margin-top: 170px;
}

@media (max-width: 1920px) {
    main section#impressum, main section#datenschutzerklaerung {
        margin-top: 150px;
    }
}

@media (max-width: 540px) {
    main section#impressum, main section#datenschutzerklaerung {
        margin-top: 130px;
    }
}

main section#impressum h1, main section#datenschutzerklaerung h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

@media (max-width: 540px) {
    main section#impressum h1, main section#datenschutzerklaerung h1 {
        font-size: 2.3em;
    }
}

main section#datenschutzerklaerung ul {
    margin-left: 22px;
    font-size: 21.0px;
    line-height: 1.5em;
    color: #3d4548;
    font-family: PTsansRegular;
    margin-bottom: 1.5em;
}

main section#datenschutzerklaerung li {
    list-style-type: disc;
    
}

main section#impressum .sut {
    display: flex;
}

main section#impressum .sut figure{
    width: 40px;
    height: auto;
    margin-right: 15px;
}

main section .formButtonBar button {
    width: 280px;
    height: 40px;
    margin-top: 25px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 400px) {
    main section .formButtonBar button {
        width: 230px;
        height: 50px;
    }
}

main section.intro article h1, main section article.hasBox, article.hasBox a, main section article.hasBox h2, main section article.hasBox button, main section#argument article p, main section#mailForm article p, footer h2, footer li, footer a, footer small {
    color: #ffffff;
} 
    


footer {
    background-color: #717d7d;
    padding-top: 25px;
    padding-bottom: 25px;
}

footer section.copyright {
    min-width: 280px;
    max-width: 1026px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

@media (max-width: 1500px) {
    footer section.copyright {
        max-width: 70%;
    }
}

@media (max-width: 650px) {
    footer section.copyright {
        max-width: 85%;
        margin-bottom: 25px;
    }
}

footer section {
    /*width: 86%;*/
/*    margin-left: auto;
    margin-right: auto;*/
/*    display: flex;
    flex-direction: row;
    justify-content: space-between;*/
}

/*@media (max-width: 400px) {
    footer section {
        flex-direction: column;
    }
}*/



footer h2 {
    margin-bottom: 0.2em;
}

@media (max-width: 900px) {
    footer h2 {
        font-size: 1.8em;
    }
}

footer a {
    text-decoration: none;
}

footer a:first-child {
    margin-right: 25px;
}

footer ul {
    list-style-type: none;
    margin-top: 0px;
    width: 100%;
    column-count: 3;
    border: 0px solid red;
}

@media (max-width: 1000px) {
    footer ul {
        column-count: 2;
    }
}

@media (max-width: 650px) {
    footer ul {
        column-count: 1;
    }
}

footer li {
    line-height: 1.6em;
    line-height: 1.4em;
    margin-bottom: 0.7em;
}

    
.anchor    
{
    position:relative;
    top:-120px;
    }

main section .formSection {
}


main section .formSection input,
main section .formSection textarea,
main section .formSection select {
    background-color: #ffffff;
    padding: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 500px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 2px;
    font-size: 1.2em;
}

    main section .formSection input:focus, main section .formSection textarea:focus, main section .formSection select:focus, main section .formSection button:focus {
        outline: 0px;
    }

    main section .formSection input.error,
    main section .formSection textarea.error,
    main section .formSection select.error {
        border: 8px solid red;
    }

main section .formSection select {
    background-image: url('Pix/selectArrow.svg');
    background-size: 37px 34px;
    background-repeat: no-repeat;
    background-position: right;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

main section select::-ms-expand {
    display: none;
}

main section .formSection button {
    width: 200px;
    height: 40px;
    margin-top: 25px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*font-size: 1.3em;*/
}


main section .formSection label {
    display: block;
    font-size: 1.0em;
    margin-bottom: 2px;
}

main section .formSection .note {
    width: 100%;
    margin-top: 15px;
}



main section .formSection input[type=checkbox] {
    display: none;
}

main section .formSection input[type=checkbox] + label {
    --radio-control-size: 40px;
    font-size: 1.0em;
    display: flex;
    align-items: center;
    margin-left: 0px;
}

    main section .formSection input[type=checkbox] + label::before {
        content: "";
        height: var(--radio-control-size);
        flex: 0 0 var(--radio-control-size);
        margin-right: 0.5em;
        background-color: #ffffff;
        /*background-image: url('Pix/Checkbox.svg');
background-repeat: no-repeat;
background-position-y: center;*/
    }

main section .formSection input[type=checkbox]:checked + label::before {
    background-image: url('Pix/CheckboxEnabled.svg');
}



    
/*.acceptanceEntry
{
    margin-top:0px; 
    color:#ffffff;
    }
    
.acceptanceEntry a
{
    color:#ffffff;
    }
 
.acceptanceEntry a:hover
{
    text-decoration:none;
    }    

.acceptanceEntry input[type='checkbox']
{   
    display: inline-block;
    width: 20px;
    height: 20px;
    padding:10px;
}*/  

/*.formSection input[type='checkbox'].error
{    
    outline:2px solid #ff0000;
    }           


.acceptanceEntry input[type='checkbox'] + label, .acceptanceEntry label
{
    display: inline-block;

    line-height:1.6em;
    margin-bottom: 6px;  
    vertical-align: text-top;   

    width: 90%;
    } 

.formSection{} 

.formSection .textField, .formSection select
{
    background-color: #ffffff;
    padding:16px;
    width: 500px;    
    margin-bottom:10px;
    border-radius: 2px;
    font-size:1.2em;
}

@media (max-width: 900px)
{
    .formSection .textField, .formSection select
    {
        width: 400px;  
        }    
}

@media (max-width: 700px)
{
    .formSection .textField, .formSection select
    {
        width: 300px;  
        }    
}

@media (max-width: 450px)
{
    .formSection .textField, .formSection select
    {
        width: 235px;  
        }    
}

.formSection select
{
    background-image: url('../Pix/selectArrow.png');
    background-repeat:no-repeat;
    background-position: right;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    }
    
select::-ms-expand {
    display: none;
}    

.formSection .textField[disabled]
{

    background-color: #909090;

    } 
    
.formSection label
{
    display: block;
    font-size: 1.0em;
    color:#ffffff;
}

.formSection .note
{
    width: 100%; 
    margin-top:15px;

    color:#ffffff;
    }*/

figure
{
    position:relative;
    }