@media (max-width: 1500px) {
    .keyvisual-intranet .content {width: 50%; bottom: 10px}
    .keyvisual-intranet .canvas {min-height: 425px;background-position-x: center !important;}
}


@media (min-width: 1086px) and (max-width: 1286px) {
    .frame {
        width: calc(100vw - 50px);
    }
    .login .frame {width: 100%;}
    .keyvisual-startseite {
        width: 100%;
    }
}


@media (max-width: 1252px) {
    .start-vier .box .content {width: auto; left: 15px;}

    .redbox .box {width: 100%; height: auto; padding: 20px; min-height: auto;}
    .redbox .box2, .redbox .box3 {margin-top: 15px;}
    .redbox .icon {margin-bottom: 15px;}
    .frame.frame-layout-5 > header {padding: 0 26px;}  
}

@media (max-width: 1200px) {
    .frame.frame-layout-4 {background: none;}
    .youtube .youtube-player p {font-size: 16px; line-height: 20px;}
}

@media (max-width: 1241px) {
    body {position: relative;}
    body > .header {height: 61px;}
    body > .header.sticky {height: 61px;}    
    .header .headerbox .mainlogo-sticky img {max-width: 195px;max-height: 50px;}
    .header .headerbox {width: 100%; margin: 0;}
    .header .headerbox .mainlogo {top: 10px; left: 25px;}
    .header .headerbox .mainlogo-sticky {top: 5px; left: 25px;}
    .header .headerbox .mainlogo img {max-width: 195px;max-height: 50px;}
    .header .mainlogo.mm-logo,
    .header .mainlogo-sticky.mm-logo {top: 10px; left: 25px;}
    .header .mainlogo.mm-logo img {max-width: 195px;max-height: 50px;}
    .header .mainnav,
    .header .headernav {display: none;}
    .header .mobile-nav.isopen {display: block;}
    .header #mobile-nav-trigger {display: inline-block; position: absolute; top: 16px; right: 26px;}
    .header #mobile-nav-trigger .trigger-icon {width: 30px; height: 30px; background: url("/typo3conf/ext/eas_sitepackage/Resources/Public/Images/nav-icon.png") no-repeat center; float: right;}
    .header #mobile-nav-trigger.isOpen .trigger-icon {background: url("/typo3conf/ext/eas_sitepackage/Resources/Public/Images/nav-icon-close.png") no-repeat center; width: 30px; height: 30px;}

    .header .mobile-nav {width: 100%; z-index: 9; padding-top: 15px; position: absolute; background-color: var(--white); top: 60px; left: 0;}
    .header .mobile-nav ul ul.sub {display: none; margin-left: 45px; margin-right: 35px;}
    .header .mobile-nav ul ul.sub.open {display: block; border-top: 2px solid var(--red); margin-bottom: 10px;}
    .header .mobile-nav ul li {position: relative; }
    .header .mobile-nav ul li a {padding: 15px 60px 15px 45px; display: block; font-size: 20px; color: var(--grey); text-transform: uppercase;}
    .header .mobile-nav ul li .submenu {position: absolute; right: 30px; top: 7px; height: 45px; width: 30px; cursor: pointer;}
    .header .mobile-nav ul li .submenu:before { content:"expand_more"; font-family: 'Material Icons'; font-size: 30px; position: absolute; color: var(--red);}
    .header .mobile-nav ul li .submenu.open:before {content:"expand_less"; }
    .header .mobile-nav ul li.service a,
    .header .mobile-nav ul li.login a {font-size: 18px;}
    .header .mobile-nav ul li.redbutton {padding: 0 45px;}
    .header .mobile-nav ul li.redbutton a {color: var(--white);}
    .header .mobile-nav ul li.login {position: relative;}
    .header .mobile-nav ul li.login:before {content:"arrow_forward"; font-family: 'Material Icons'; font-size: 18px; top: 18px; left: 43px; position: absolute; pointer-events: none; color: var(--red);}
    .header .mobile-nav ul li.login a {padding-left: 65px;}    
    .header .mobile-nav ul li ul li a {padding: 8px 0; font-size: 20px; text-transform: none;}

    #main-content {padding: 0 26px;}
    .footer {padding-left: 26px; padding-right: 26px;}
	#keyvisual .frame {padding: 0 0 20px 0;}
    .keyvisual-unterseite .canvas {min-height: 0; height: 400px;}
    .keyvisual-unterseite .content {width: 90%;}
    
    .keyvisual-startseite .canvas {height: auto;}
    .keyvisual-startseite .content {position: relative; bottom: 0; width: 100%; height: auto;}

    .keyvisual-landingpage .canvas {min-height: 0; height: auto;}
    .keyvisual-landingpage .content {width: 90%;}

    .rootline .frame a {margin-left: 26px;}

    .start-zwei .box .content {top: 0; right: 0;}
    /* .frame.youtube {left: 0;} */

    .keyvisual-intranet .content {padding: 15px;}
    .header.intranet .headernav {display: block;}

    .cc-revoke, .cc-window {position: absolute;}
    .cc-animate.cc-revoke.cc-bottom,
    .cc-animate.cc-revoke.cc-active.cc-bottom { transform:none; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; }
}

@media (max-width: 992px) {
    .footer {height: auto;}
    .footer .footerMain {display: flex; justify-content: center; flex-wrap: wrap;}
    .footer .frame .content-left {justify-content: center;}
    .footer .frame .row {gap: 20px;}
    .keyvisual-unterseite .content {bottom: 44px; height: 100px; height: auto; padding: 14px 20px;}
    .ce-left .ce-gallery, .ce-column, .ce-right .ce-gallery {float: none; width: 100%; margin-bottom: 20px;}
    .start-zwei .box .content {position: relative;left: 45px;top: -40px;width: 90%;height: auto;}
    .start-zwei .image {display:none;}
    .start-vier .box {margin-bottom: 10px;}
    .start-vier .image {display:none;}
    .start-vier .content {position: relative;}
    .start-vier .box .content {position: relative;left: 45px;top: -40px;width: 90%;height: auto;}
    .wipeslider {flex-direction: column-reverse; }
    .wipeslider .content {width: 100%; margin-bottom: 40px;}
    .login .whitebox {position: relative; left: 0; right: 0; margin: 0 auto; max-width: 742px; width: auto;}

    .keyvisual-intranet .canvas {min-height: 285px;}
    .youtube .youtube-player p {font-size: 20px; line-height: 28px; padding-bottom: 420px;}
	.footer .footerMain ul {text-align: center;}
	.footer .socialmedia {justify-content: center;}
}

@media (max-width: 768px) {
    h1 {font-size: 32px; line-height: 42px; margin-bottom: 34px;word-break: break-word;}
    h2 {font-size: 28px; line-height: 38px; margin-bottom: 34px;word-break: break-word;}
    h4 {font-size: 22px; line-height: 32px; margin-bottom: 15px;}
    .footer .frame .content-left {flex-wrap: wrap; gap: 20px;}
    .threebox .leftbox {margin-bottom: 37px;}
    .threebox .middlebox {margin-bottom: 37px;}
    .home .frame {padding: var(--spacing-responsive) 0;}
    .default .frame {padding: var(--spacing-responsive) 0;}
    .footer .socialmedia {text-align: left; margin-top: 30px;}
    .keyvisual-unterseite .content {bottom: 44px; height: 71px; height: auto; padding: 5px 14px;}
    .zweixzwei .upperleft, .zweixzwei .lowerleft, .zweixzwei .upper {margin-bottom: 30px;}
    .keyvisual-startseite .content {padding: 28px 38px; }

    .threebox .text p {font-size: 0;}
    .threebox .text .plus {position: relative;}
    .threebox .text .plus:before {content:"add"; font-family: 'Material Icons'; font-size: 22px; top: 0; left: calc(50% - 11px); position: absolute; color: var(--red); cursor: pointer;border: 2px solid; border-radius: 50%; line-height: 21px;}
    
    .keyvisual-intranet .content {width: 80%;}

    .redbox .text {font-size: 14px; line-height: 1.2;}

    .keyvisual-unterseite .canvas {min-height: 0; height: 300px;}

    .start-zwei .box .content {
        position: relative;
        left: 35px;
        top: -30px;
        width: 90%;
        height: auto;
    }

    .start-vier .box {
        margin-bottom: 20px;
    }

    .start-vier .box .content {
        position: relative;
        left: 35px;
        top: -30px;
        width: 90%;
        height: auto;
    }

    .youtube .youtube-player p {font-size: 16px; line-height: 22px; padding-bottom: 255px;}
}

@media (max-width: 480px) {
    p, a {font-size: 16px;}
    .footer .footerMain ul {flex-wrap: wrap; justify-content: center; gap: 10px; }
    .zweixzwei .image {margin-right: 15px;}
    .zweixzwei .content .headline {font-size: 18px;}
    .login .whitebox {padding: 27px 30px;}

    .keyvisual-intranet .content {width: 100%; }
    .keyvisual-intranet .text {font-size: 20px; line-height: 30px;}

    .youtube .youtube-player .datenschutz-link a {font-size: 16px;}
    .youtube .youtube-player p {font-size: 10px; line-height: 22px; padding: 35px 20px 175px 15px;}
    .youtube .youtube-player .play {top: 80%;}
}

@media (max-width: 350px) {
    .partner-youtube-container .youtube-player .datenschutz-link a {font-size: 14px;}
}

@media (max-height: 710px) {
    .header .mobile-nav ul li a {padding: 10px 0 10px 45px;}
    .header .mobile-nav ul li.login::before {top: 11px;}
}