/* ALLGEMEIN */
    @font-face{ 
        font-family: 'Wolfers';
        src: url(../fonts/Wolfers-Regular.woff) format('woff'),
        url(../fonts/Wolfers-Regular.woff2) format('woff2');
    }
    @font-face{ 
        font-family: 'Ubuntu';
        src: url(../fonts/ubuntu.woff) format('woff'),
        url(../fonts/ubuntu.woff2) format('woff2');
    }


    .disp_none {
        display:none!important;
    }
    h1,h2,h3,h4,h5 {
        font-family: Wolfers;
    }
    p, a, button, input, textarea, label {
        font-family: Ubuntu;
    }
    #start {
        min-width:100%;
        margin-top: 2vw;
        h1, h2 {
            color:white;
        }
        color: white!important;;
    }
    section, .container-wide, .form, #benefits .container {
        padding: 40px!important;
        max-width:1070px;
        margin-left:auto;
        margin-right:auto;
        padding:0!important;
    }

/* HEADER + NAVIGATION */
    #header{
        min-width:100%;
        height: 40px;
        position: absolute!important;
        background-color:#E1E6DF;
        border-bottom:none;
        transition:0s !important;
        .landscape{
            min-width:100%;
            background-image: url(/user/themes/quark/images/background_dingslebener.svg);
            background-size: cover;
            min-height:11vw!important;
            margin-top:-100px;
        }
        a:hover {
            color: #2A4524!important; 
            text-decoration: underline;
        }
    }
    .navbar-section{
        height: inherit!important;
        li {
            display: flex!important;
            flex-direction: row!important;
            align-items: center;

            a {
                padding-left: 8px!important;
                color:#2A4524!important;
            }
            a:before{
                content:""!important;
            }
        }
    }
    .logo{
        height:118px!important;
        img {
            height:118px!important;
        }
    }

/* HERO SECTION + ANIMATION */
    #welcome{
        h1 {
            margin-bottom:0;
        }
        h2 {
            margin-top: 0;
        }
        .hero {
            padding-right:40px!important;
            align-items: flex-start;
            max-width: 750px;
            a{
                border-radius: 100px;
                border: 2px solid #2A4524!important;
                color:#2A4524!important;
                background: #F4B600;
                width:220px!important;
                height:60px!important;
                display: inline-flex;
                padding: 0px 20px;
                justify-content: center;
                align-items: center;
                text-decoration: none;
            }
            a:after{
                content: '\2192';
                padding-left:8px;
            }
            a:hover {
                border: 2px solid #F4B600!important;
                color:#F4B600!important;
                background: #2A4524;
            }
        }
        min-width:100%;
        padding-top: 5vw!important;    
        background-color: #2A4524;
        .row {
            display: flex;
            justify-content: center;
            gap: 120px;
            .animation_col{
                position: relative;
                width: 250px;  
            }
            .animation_col img {
                height: 100%;
                overflow: visible;
                object-fit: none;
                object-position: right top;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                max-width: unset;
            }
        }
    }

/* BENEFITS - KLEINE AUFLAGE GROSSE WIRKUNG */
    #benefits{
        width:100%;
        max-width: unset;
        background-color: #F4B600;
        text-align: left;
        .container {
            padding: 40px!important;
        }
        h2 {
            margin-top: 0 !important;
            padding-top: 32px;
            color: #2A4524
        }
        .row {
            padding-top: 32px;

            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 115px;
        }
        .col {
            
            .card{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: flex-start;
                text-align: left;
                background-color: transparent;
                border:none;
                h4 {
                    margin-top:0;
                    color: #2A4524
                }
                p{
                    margin-bottom: 0;;
                    color: #2A4524;
                }
            }
            .card:before {
                content: '\2192';
                padding-right:8px;
                color: #2A4524;
            }
        }
    }

/* TRUST - UEBER UNS */
    #trust {
        .container {
            margin-top: 36px;
            margin-bottom: 36px;
        }
        h2 {
            margin-top: 0;
        }
        background-color:white;
        .row {
            display:flex;
            flex-direction: row-reverse;
            color: #2A4524;
            h2{
                color: #2A4524;
            }
            .trust {
                padding-left: 40px!important;
                padding-right: 40px!important;
                max-width: 750px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
        a{
            border-radius: 100px;
            border: 2px solid #2A4524!important;
            color:#2A4524!important;
            width:220px!important;
            height:60px!important;
            display: inline-flex;
            padding: 0px 20px;
            justify-content: center;
            align-items: center;
            text-decoration: none;
        }
        a:hover {
            background-color: #2A4524;
            color:white!important;
        }
        a:after{
            content: '\2192';
            padding-left:8px;
        }
    }


/* FAQ - AUSKLAPPBAR */
    #faq-block {
        padding: 40px!important;
        position: relative;
        text-align: left;
        background-color: #F4B600;
        height:160px;
        overflow:hidden;
        h2 {
            color: #2A4524;
            margin-top:25px;
            margin-bottom: 100px;
        }
        h3 {
            color: #2A4524;
        }
        p {
            color: #2A4524;
        }
        a{
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }
        .open{
            display:block;
        }
        .close{
            display:none;
        }
    }
    #faq-block .container:before {
        content:"\2193";
        font-family: 'Ubuntu';
        color: #2A4524;
        position: absolute;
        font-size: 4rem;
        left:50%;
        top:25px;
        transform: translateX(-50%)
    }
    #faq-block.show_more {
        height:unset;
        h2{
            margin-bottom: 0;
        }
        .container:before {
            content:"\2715";
            left:100%;
            transform: translateX(-200%)
        }
    }


/* KONTAKT FORMULAR */
    .form {
        background-color: #2A4524;
        padding: 40px!important;
        
        #contact-form{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 18px;
        }
        input, textarea {
            border: 2px solid white!important;
            background-color: #2A4524;
            color:white!important;
        }
        input::placeholder, textarea::placeholder {
            color:white!important;
        }
        .form-field:nth-child(1){
            width:48%;
        }
        .form-field:nth-child(2){
            width:48%;
        }
        .form-field:nth-child(3){
            width:48%;
        }
        .form-field:nth-child(4){
            width:48%;
        }
        .form-field:nth-child(5){
            width:40%;
            }
        .form-field:nth-child(6){
            width:12%;
        }
        .form-field:nth-child(7){
            width:40%;
        }
        .form-field:nth-child(8){
            width:100%;
        }
        .form-field:nth-child(9){
            width:100%;
        }
        .button-wrapper {
            width:100%;
        }
        button{
            border-radius: 100px;
            border: 2px solid #2A4524!important;
            color:#2A4524!important;
            background: #F4B600;
            width:220px!important;
            height:60px!important;
            display: inline-flex;
            padding: 0px 20px;
            justify-content: center;
            align-items: center;
            text-decoration: none;
        }
        button:hover{
            border: 2px solid #F4B600!important;
            color:#F4B600!important;
            background: #2A4524;;
        }
        button:after{
            content: '\2192';
            padding-left:8px;
        }
    }

/* BLOCK ZU DINGSLEBENER */
    #link-block{
        margin-top:72px;
        a{
            border-radius: 100px;
            border: 2px solid #2A4524!important;
            color:#2A4524!important;
            width:220px!important;
            height:60px!important;
            display: inline-flex;
            padding: 0px 20px;
            justify-content: center;
            align-items: center;
            text-decoration: none;
        }
        a:hover {
            background-color: #2A4524;
            color:white!important;
        }
        a:after{
            content: '\2192';
            padding-left:8px;
        }
        img {
            max-width: 400px;
        }
        p:nth-child(1){
            margin-bottom:0!important;
        }
    }

/* FOOTER + LANDSCAPE */
    .landscape_footer {
        min-width:100%;
        min-height: 11vw;
        background-image: url(/user/themes/quark/images/footer_background_dingslebener.svg)!important;
        background-size: cover!important;
    }
    #footer {
        position: relative;
        text-align:left;
        min-width:100%;
        background-color: #2A4524!important;
        display: flex;
        justify-content: center;
        align-items: center;
        .container {
            z-index: 2;
            display: flex;
            justify-content: space-between;
            padding-left:40px!important;
            padding-right:40px!important;
            margin-bottom: 40px;;
            h3, p , a {
                color: white!important;
                margin:0
            }
            .col{
                display: flex;
                gap: 16px;
                flex-direction: column;
                div {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                }
            }
            svg {
                height: 25px;
            }
        }
        #hopfen {
            position: absolute;
            right:0;
            bottom:15px;
            height: 14vw;
            max-height: 270px;
        }
    }


/* RESPONSIVE */
    .mobile {
        display: none;;
    }

    @media screen and (max-width: 1300px){
        #header {
            height: 60px;
            .landscape{
                margin-top:-60px;
            }
        }
            .animation_col {
            align-items: center;
            display: flex;
            img {
                max-width: 100%!important;
                object-position: right center!important;
                object-fit: contain!important;
            }
        }
    }
    @media screen and (max-width: 800px){
        .mobile {
            display: block;
        }
        #welcome .row {
            flex-direction: column;
            align-items: center;
            gap: 0;
            
            div {
                display: flex;
                align-items: center;
                padding:40px!important
            }
            .mobile {
                max-width: 450px;
                padding-bottom:0!important;
                h2,a,p{
                    display:none;
                }
            }
            .hero {
                h1 {
                    display: none;
                }
            }
            .animation_col{
                height:500px;
                width:100%;
                position: relative;
                img {
                    position: absolute;
                    height: 100%;
                    left: 50%;
                    transform: translateX(-70%);
                }
            }
        }

        #trust .row {
            flex-direction: column;
            .trust_col {
                display: flex;
                justify-content: center!important;
                padding-bottom: 40px!important;
            }
        }
        #faq-block{
            margin-right: 2%;
            margin-left: 2%;
        }
        .form{
            margin-right: 2%;
            margin-left: 2%;
        }
    }
    @media screen and (max-width: 600px){
        #header {
            height: 80px;
            .landscape{
                margin-top:-40px;
            }
            ul{
                flex-direction: column;
                padding-top: 40px;
            }
            .desktop-menu{
                height: 4rem!important;
            }
        }
        .animation_col {
            height: 400px!important;
        }
        #benefits {
            .row {
                flex-direction: column;
                gap:18px;
            }
        }
        #footer {
            min-height: 500px;
            .container {
                flex-direction: column;
                gap: 40px;
            }
            #hopfen {
                height: 50vw!important;
            }
        }
        .form {
            .form-field:nth-child(1){
                width:100%;
            }
            .form-field:nth-child(2){
                width:100%;
            }
            .form-field:nth-child(3){
                width:100%;
            }
            .form-field:nth-child(4){
                width:100%;
            }
            .form-field:nth-child(5){
                width:70%;
                }
            .form-field:nth-child(6){
                width:25%;
            }
            .form-field:nth-child(7){
                width:100%;
            }
            .form-field:nth-child(8){
                width:100%;
            }
            .form-field:nth-child(9){
                width:100%;
            }
        }
    }
    @media screen and (max-width: 400px){
        .animation_col {
            height: 300px!important;
        }
    }

/* overwrites */
    #header {
        display:block!important;
    }
    .navbar-section, .desktop-menu, .dropmenu {
        display: flex!important;
    }
    .form-label{
        display:none;
    }

/* IMPRESSUM */
    .impressum, .datenschutz, .success {
        #start{
            max-width:1070px;
            margin: auto;
            padding-left: 40px!important;
            padding-right: 40px!important;
            h1, h2, p, a {
                color: #2A4524!important;
            }
            h1{
                margin-top: 200px;
            }
        }
    }
    .success{
        div{    
            color: #2A4524!important;
        }
        #start{
            a:hover {
                color:white!important;
            }
        }
    }