/************************************************/
/* Responsive                                   */
/************************************************/

@media(max-width:768px){

    .header-inner,
    .menu-inner,
    .content,
    .footer-inner{
        width:auto;
        margin-left:20px;
        margin-right:20px;
    }

    .header-inner{
        min-height:auto;
        padding:20px 0;
    }

    .headerlogo img{
        width:220px;
    }

    .menu-inner{
        display:block;
    }

    .headermenu > ul{
        display:block;
    }

    .headermenu li{
        display:block;
    }

    .submenu{
        position:static;
        display:none;
        background:#444;
        padding:0;
    }

    .submenu a{
        color:#ccc;
        padding-left:20px;
    }

    .startseite{
        grid-template-columns:1fr;
    }

    .start-left,
    .start-right{
        padding:0;
    }

    .nils{
        display:block;
        margin:20px auto;
        width:120px;
    }

    .kacheln{
        grid-template-columns:1fr;
    }

}

/* Hero Bereich */

@media(max-width:768px){

    .frame-hero-overlay{
        min-height:420px;
    }

    .frame-hero-overlay img{
        height:420px !important;
    }

    .frame-hero-overlay .ce-bodytext{
        left:24px;
        right:24px;
        max-width:none;
    }

    .frame-hero-overlay h1{
        font-size:34px;
    }

    .frame-hero-overlay p{
        font-size:18px;
    }

	.layout-2cols-equal{
        grid-template-columns:1fr;
    }

	.layout-3cols-equal{
        grid-template-columns:1fr;
    }
}

/* Responsive */
@media (max-width: 1400px){

    .layout-2cols{
        flex-direction:column;
    }

    .layout-2cols > .col{
        width:100%;
        max-width:100%;
        flex:none;
    }

    .layout-2cols img{
        max-width:100% !important;
        height:auto !important;
    }


}

.frame-hero-bottom{
    position:relative !important;
    overflow:hidden !important;
}

.frame-hero-bottom > .ce-bodytext{
    position:absolute !important;
    left:70px !important;
    bottom:70px !important;
    z-index:99999 !important;
    width:900px !important;
    max-width:85% !important;
    color:#ffffff !important;
    background:rgba(7,30,61,0.40) !important;
    padding:20px !important;
}

.frame-hero-bottom > .ce-bodytext h2,
.frame-hero-bottom > .ce-bodytext p{
    color:#ffffff !important;
}

@media(max-width:900px){

    .theta-process{
        flex-direction:column;
    }

    .theta-process-step:not(:last-child)::after{

        content:"↓";

        top:auto;
        bottom:-24px;

        left:50%;
        right:auto;

        transform:translateX(-50%);
    }
}