/* ------------------------------ */
/* ----------- Header ----------- */
/* ------------------------------ */

/* --------- Allgemein ---------- */

header {
    position: absolute;
    width: 100%;
    min-height: var(--height-header); 
    top: 0;
}
 
.site_header {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--height-header);
    -webkit-transition: top var(--transition-2), background-color var(--transition-2);
    transition: top var(--transition-2), background-color var(--transition-2);
}
 
.page-scrolled .site_header {
    top: calc(-1* var(--height-header));
    background-color: var(--brand-white);
}

.logged-in.page-scrolled .site_header {
    top: calc(-1* var(--height-header));
}

.page-scrolled.header-fixed .site_header, .page-scrolled.menu-open .site_header  {
    top: 0;
}

.logged-in .site_header, .logged-in.page-scrolled.header-fixed .site_header {
    top: 50px;
}

.site_header__inside, .site_header__row {
    height: 100%;
}

.site_header .site_logo, .site_menu {
    position: relative;
    z-index: 105;
}



/* ---- Headerimage / -video ---- */
.section__intro_media, .section__intro_media .media, .section__intro_media .media__media {
    position: relative;
}

.intro__title h1 > span {
    font-variation-settings: "wdth" 500, "wght" 700;
}

.section__intro:not(.section__intro--home) .intro__title {
    border-bottom: 1px solid var(--brand-black);
}

body:not(.page-template-page-angebot-sub) .section__intro:not(.section__intro--home) .intro__title h1, .section__intro:not(.section__intro--home) .intro__text {
    margin-right: auto;
    margin-left: auto;
}

.section__intro:not(.section__intro--home) .intro__text p {
    max-width: 100%;
}

.intro__text .button--ghost a span.arrow {
    top: -1px;
    margin-right: var(--spacing-1);
}

.section__intro_media {
    padding-bottom: 0 !important;
}

.section > .section__intro:not(.section__intro--home) + .section__intro_media {
    padding-top: 0;
}

.media__pattern--right {
    text-align: right;
}

.media__pattern--absolute {
    position: absolute;
}

.section__intro_media .intro_media {
    position: relative;
}

.section__intro_media .media.fixed .media__container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;

    /* transition: top var(--transition-1); */
}

.section__intro_media .media.fixed.media--left .media__container {
    left: 0;
}

.section__intro_media .media.fixed.media--right .media__container {
    right: 0;
}






/* Startseite */
body.home .section__intro h1.typography--huge {
    max-width: 100%;
}

body.home .section__intro h1 > span {
    position: relative;
    z-index: 2;
}

body.home .intro__animation {
    position: relative;
    display: inline-block;
}

body.home .intro__animation > span {
    position: absolute;
    z-index: -1;

    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
}

body.home .intro__animation > span.is-active {
    z-index: 2;
    opacity: 1;
}

body.home .section__intro p {
    max-width: 100%;
}

body.home .section__intro_media .media--1 .media__media {
    aspect-ratio: 880 / 890;
}

body.home .section__intro_media .media--2 {
    overflow: hidden;
}

body.home .section__intro_media .media--2 .media__media {
    aspect-ratio: 880 / 1320;
}

body.home .section__intro_media .media--2 .media__pattern--absolute {
    z-index: 1;
    top: 0;
    right: 0;
}

body.home .section__intro_media .media--3 .media__media {
    aspect-ratio: 880 / 716;
}


/* Angebot */
.page-template-page-angebot .media--1 {
    overflow: hidden;
}

.page-template-page-angebot .media--1 .media__media {
    aspect-ratio: 880 / 1024;
}

.page-template-page-angebot .media--1 .media__pattern--absolute {
    left: 0;
}

.page-template-page-angebot .media--2 .media__media {
    aspect-ratio: 880 / 1100;
}


/* Angebot - Unterseite */
.page-template-page-angebot-sub .section__intro .intro__title h1 {
    font-variation-settings: "wdth" 0, "wght" 400;
    display: inline-block;
    margin-top: 0;
    margin-bottom: var(--spacing-6);
}

.page-template-page-angebot-sub .section__intro .intro__title .clipart img {
    position: absolute;
}

.page-template-page-angebot-sub .section__intro .intro__text p {
    margin-bottom: 0;
}

.page-template-page-angebot-sub .section__intro .button--ghost a {
    margin-top: var(--spacing-6);
}


/* Über uns */
.page-template-page-ueber-uns .media--1 .media__container > img {
    position: absolute;
    top: 0;
    left: 0;
}

.page-template-page-ueber-uns .media--1 {
    overflow: hidden;
}

.page-template-page-ueber-uns .media--1 .media__media {
    aspect-ratio: 880 / 1170;
}

.page-template-page-ueber-uns .media--2 .media__media {
    aspect-ratio: 880 / 720;
}


/* Karriere */
.page-template-page-karriere .media--1 .media__media {
    aspect-ratio: 880 / 720;
}

.page-template-page-karriere .media--2 .media__media {
    aspect-ratio: 880 / 1140;
}


/* Showroom */
.page-template-page-showroom .media .media__container {
    aspect-ratio: 16 / 9;
}

.page-template-page-showroom .section--header + .section {
    padding-top: var(--spacing-12);
}



/* --------- Navigation --------- */

/* General */
body.menu-open {
    overflow: hidden
}

.site_menu button.site_menu__button {
    position: relative;
    top: 2px;
    display: block;
    font-size: var(--font-size-standard);
    padding: var(--spacing-3);
    margin-right: calc(-1 * var(--spacing-3));
}

.site_menu button.site_menu__button span {
    position: relative;
    display: inline-block;
    font-variation-settings: "wdth" 0, "wght" 400;

    -webkit-transition: opacity var(--transition-2);

    transition: opacity var(--transition-2);
}

.site_menu button.site_menu__button span.close {
    position: absolute;
    left: var(--spacing-3);
    opacity: 0;
}

body.open-animation .site_menu button.site_menu__button span.close, body.open-animation.close-animation .site_menu button.site_menu__button span.open {
    opacity: 1;
}

body.open-animation .site_menu button.site_menu__button span.open, body.open-animation.close-animation .site_menu button.site_menu__button span.close {
    opacity: 0;
}

body.open-animation .site_menu button.site_menu__button span.close, body.open-animation .site_menu button.site_menu__button span.open {
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
}

body.open-animation.close-animation .site_menu button.site_menu__button span.open, body.open-animation.close-animation .site_menu button.site_menu__button span.close {
    -webkit-transition-delay: unset;
            transition-delay: unset;
}

.site_menu button.site_menu__button span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background-color: var(--brand-black);
    -webkit-transition: width var(--transition-2);
    transition: width var(--transition-2);
}

.no-touchevents .site_menu button.site_menu__button:hover span::after {
    width: 100%;
}


/* Navigation */
.site_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: var(--app-height);
    background-color: var(--brand-yellow);
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: -webkit-transform .75s;
    transition: -webkit-transform .75s;
    transition: transform .75s;
    transition: transform .75s, -webkit-transform .75s;

    overflow: auto;
    z-index: -1;
    visibility: hidden;
}

body.open-animation .site_nav {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    z-index: 101;
    visibility: visible;
}

body.open-animation.close-animation .site_nav {
    -webkit-transition: -webkit-transform .75s;
    transition: -webkit-transform .75s;
    transition: transform .75s;
    transition: transform .75s, -webkit-transform .75s;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
}

.site_nav ::-moz-selection {
  color: var(--brand-yellow);
  background: var(--brand-black);
}

.site_nav ::selection {
  color: var(--brand-yellow);
  background: var(--brand-black);
}

.site_nav ::-moz-selection {
  color: var(--brand-yellow);
  background: var(--brand-black);
}

.site_nav::-webkit-scrollbar-track {
  background: var(--brand-white);
}

.site_nav::-webkit-scrollbar-thumb {
  background: var(--brand-black);
}

.site_nav__container {
    min-height: 100%;
}

.site_nav__row {
    width: 100%;
}


/* Navigation */
.site_nav__main li a {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-9);
    font-variation-settings: "wdth" 0, "wght" 500;
    -webkit-font-feature-settings: 'ss01' on;
            font-feature-settings: 'ss01' on;
    line-height: var(--line-height-3);
    letter-spacing: calc(-1 * (var(--font-size-9) * 0.01));
}

.site_nav__main li a span {
    position: relative;
    z-index: 2;
}

.site_nav__main li a::after {
    content: "";
    position: absolute;
    width: 0;
    background-color: var(--brand-white);
    -webkit-transition: width .35s;
    transition: width .35s;
}


/* Info */
.site_nav__info {
    line-height: var(--line-height-2);
}

.site_nav__info a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    -webkit-transition: opacity var(--transition-2);
    transition: opacity var(--transition-2);
}

.no-touchevents .site_nav__info a:hover {
    opacity: var(--opacity-1);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 768px) {

    /* Startseite */
    body.home .section__intro_media .media {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    body.home .section__intro p {
        text-align: right;
    }

    body.home .section__intro h1.typography--huge {
        margin-bottom: var(--spacing-8);
    }

    /* Angebot */
    .page-template-page-angebot .media--1 {
        overflow: hidden;
        margin-top: var(--spacing-10-5);
    }


    /* Über uns */
    .page-template-page-ueber-uns .media--2 {
        margin-top: var(--spacing-11);
    }

    /* Karriere */
    .page-template-page-karriere .media--2 {
        overflow: hidden;
    }

}


@media all and (min-width: 992px) {

    .site_nav::-webkit-scrollbar {
        width: 10px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        position: relative;
        display: inline-block;
        margin-left: var(--spacing-4);
    }

}


@media all and (min-width: 1240px) {

    header .site_logo svg {
        width: 165px;
        height: 35px;
    }

}


@media all and (min-width: 1400px) {

    .site_nav__row {
        padding-top: var(--spacing-11);
        padding-bottom: var(--spacing-11);
    }

}


@media all and (min-width: 1600px) and (min-height: 1100px) { 

    body.home .section__intro_media {
        padding-top: var(--spacing-12);
    }

}


@media all and (min-width: 1600px) and (max-height: 1099.98px) { 

    body.home .section__intro_media {
        padding-top: var(--spacing-11);
    }

}


@media all and (min-width: 1600px) {

    body:not(.page-template-page-angebot-sub) .section__intro:not(.section__intro--home) .intro__title h1 {
        margin-bottom: var(--spacing-9);
    }

    .section__intro:not(.section__intro--home) .intro__text {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-10);
    }

    .page-template-default .section__intro:not(.section__intro--home) .intro__text:last-child {
        padding-bottom: var(--spacing-11);
    }

    .site_nav__main {
        -ms-flex-preferred-size: 56%;
        flex-basis: 56%;
        max-width: 56%;
    }
    
    .site_nav__main li a::after {
        top: 26px;
        left: -20px;
        height: 52px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 40px);
    }

    .site_nav__info {
        -ms-flex-preferred-size: 44%;
        flex-basis: 44%;
        max-width: 44%;
        padding-bottom: 22px;
    }

    /* Startseite */
    body.home .section__intro p {
        padding-right: 126px;
    }

    body.home .intro__animation {
        width: 280px;
        height: 108px;
    }

    body.home .intro__animation > span {
        top: -132px;
        left: -47px;
        width: 374px;
        height: 374px;
    }

    body.home .section--header {
        margin-bottom: calc(213px + (calc(var(--spacing-14) - var(--spacing-10))));
    }

    body.home .section__intro {
        margin-bottom: -213px;
    }

    body.home .section__intro_media {
        bottom: -213px;
    }


    /* Angebot */
    .page-template-page-angebot .section--header {
        margin-bottom: 620px;
    }

    .page-template-page-angebot .section__intro {
        margin-bottom: -620px;
    }

    .page-template-page-angebot .section__intro_media {
        bottom: -620px;
    }

    .page-template-page-angebot .media--1 {
        width: 580px;
    }

    .page-template-page-angebot .media--1 .media__pattern--absolute {
        bottom: -44px;
    }

    .page-template-page-angebot .media--2 {
        width: 440px;
    }


    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title h1 {
        max-width: 610px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        width: 374px;
        height: 72px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart img {
        bottom: -120px;
    }

    /* Über uns */
    .page-template-page-ueber-uns .section--header {
        margin-bottom: 623px;
    }

    .page-template-page-ueber-uns .section__intro {
        margin-bottom: -623px;
    }

    .page-template-page-ueber-uns .section__intro_media {
        bottom: -623px;
    }

    .page-template-page-ueber-uns .media--1 {
        width: 715px;
    }

    .page-template-page-ueber-uns .media--1 .media__media {
        margin-left: 89px;
    }

    .page-template-page-ueber-uns .media--2 {
        width: 605px;
    }


    /* Karriere */
    .page-template-page-karriere .section--header {
        margin-bottom: 680px;
    }

    .page-template-page-karriere .section__intro {
        margin-bottom: -680px;
    }

    .page-template-page-karriere .section__intro_media {
        bottom: -680px;
    }

    .page-template-page-karriere .media--1 {
        width: 550px;
    }

    .page-template-page-karriere .media--2 {
        width: 590px;
    }


    /* Showroom */
    .page-template-page-showroom .section--header {
        margin-bottom: 720px;
    }

    .page-template-page-showroom .section__intro {
        margin-bottom: -720px;
    }

    .page-template-page-showroom .section__intro_media {
        bottom: -720px;
    }

}


@media all and (max-width: 1599.98px) {

    .section__intro:not(.section__intro--home) .intro__text {
        padding-top: var(--spacing-7);
        padding-bottom: var(--spacing-9);
    }

    .page-template-default .section__intro:not(.section__intro--home) .intro__text:last-child {
        padding-bottom: var(--spacing-10);
    }

    .pattern-horizontal, .pattern-square {
        width: auto;
    }

    .pattern-vertical {
        height: auto;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 768px) {

    body:not(.page-template-page-angebot-sub) .section__intro:not(.section__intro--home) .intro__title h1 {
        margin-bottom: var(--spacing-8);
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1240px) {

    body.home .section__intro_media {
        padding-top: var(--spacing-11);
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

    .site_nav__main {
        -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
        max-width: 60%;
    }

    .site_nav__main li a::after {
        top: 24px;
        left: -19px;
        height: 49px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 38px);
    }

    .site_nav__info {
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
        max-width: 40%;
        padding-bottom: 22px;
    }


    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 80px;
    }

    .pattern-vertical {
        max-width: 80px;
    }

    /* Startseite */
    body.home .section__intro p {
        padding-right: 140px;
    }

    body.home .intro__animation {
        width: 252px;
        height: 97px;
    }

    body.home .intro__animation > span {
        top: -119px;
        left: -42px;
        width: 337px;
        height: 337px;
    }

    body.home .section--header {
        margin-bottom: 192px;
    }

    body.home .section__intro {
        padding-top: 20px !important;
        margin-bottom: -192px;
    }

    body.home .section__intro_media {
        bottom: -192px;
    }


    /* Angebot */
    .page-template-page-angebot .section--header {
        margin-bottom: 558px;
    }

    .page-template-page-angebot .section__intro {
        margin-bottom: -558px;
    }

    .page-template-page-angebot .section__intro_media {
        bottom: -558px;
    }

    .page-template-page-angebot .media--1 {
        width: 522px;
    }

    .page-template-page-angebot .media--1 .media__pattern--absolute {
        bottom: -40px;
    }

    .page-template-page-angebot .media--2 {
        width: 396px;
    }


    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title h1 {
        max-width: 554px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        width: 338px;
        height: 65px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart img {
        bottom: -108px;
    }

    /* Über uns */
    .page-template-page-ueber-uns .section--header {
        margin-bottom: 560px;
    }

    .page-template-page-ueber-uns .section__intro {
        margin-bottom: -560px;
    }

    .page-template-page-ueber-uns .section__intro_media {
        bottom: -560px;
    }

    .page-template-page-ueber-uns .media--1 {
        width: 644px;
    }

    .page-template-page-ueber-uns .media--1 .media__media {
        margin-left: 80px;
    }

    .page-template-page-ueber-uns .media--2 {
        width: 544px;
    }


    /* Karriere */
    .page-template-page-karriere .section--header {
        margin-bottom: 612px;
    }

    .page-template-page-karriere .section__intro {
        margin-bottom: -612px;
    }

    .page-template-page-karriere .section__intro_media {
        bottom: -612px;
    }

    .page-template-page-karriere .media--1 {
        width: 495px;
    }

    .page-template-page-karriere .media--2 {
        width: 531px;
    }


    /* Showroom */
    .page-template-page-showroom .section--header {
        margin-bottom: 648px;
    }

    .page-template-page-showroom .section__intro {
        margin-bottom: -648px;
    }

    .page-template-page-showroom .section__intro_media {
        bottom: -648px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .site_nav__row {
        padding-top: 140px;
        padding-bottom: 140px;
    }

    .site_nav__main {
        -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
        max-width: 60%;
    }

    .site_nav__main li a::after {
        top: 22px;
        left: -18px;
        height: 45px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 36px);
    }

    .site_nav__info {
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
        max-width: 40%;
        padding-bottom: 22px;
    }

    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 72px;
    }

    .pattern-vertical {
        max-width: 72px;
    }

    /* Startseite */
    body.home .section__intro p {
        padding-right: 108px;
    }

    body.home .intro__animation {
        width: 224px;
        height: 86px;
    }

    body.home .intro__animation > span {
        top: -106px;
        left: -38px;
        width: 299px;
        height: 299px;
    }

    body.home .section--header {
        margin-bottom: 170px;
    }

    body.home .section__intro {
        padding-top: 30px !important;
        margin-bottom: -170px;
    }

    body.home .section__intro_media {
        bottom: -170px;
    }

    body.home .pattern-horizontal {
        width: 360px;
        max-height: unset;
    }


    /* Angebot */
    .page-template-page-angebot .section--header {
        margin-bottom: 496px;
    }

    .page-template-page-angebot .section__intro {
        margin-bottom: -496px;
    }

    .page-template-page-angebot .section__intro_media {
        bottom: -496px;
    }

    .page-template-page-angebot .media--1 {
        width: 464px;
    }

    .page-template-page-angebot .media--1 .media__pattern--absolute {
        bottom: -35px;
    }

    .page-template-page-angebot .media--2 {
        width: 352px;
    }


    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        width: 299px;
        height: 58px;
        margin-right: -60px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart img {
        bottom: -96px;
    }

    /* Über uns */
    .page-template-page-ueber-uns .section--header {
        margin-bottom: 498px;
    }

    .page-template-page-ueber-uns .section__intro {
        margin-bottom: -498px;
    }

    .page-template-page-ueber-uns .section__intro_media {
        bottom: -498px;
    }

    .page-template-page-ueber-uns .media--1 {
        width: 572px;
    }

    .page-template-page-ueber-uns .media--1 .media__media {
        margin-left: 71px;
    }

    .page-template-page-ueber-uns .media--2 {
        width: 484px;
    }


    /* Karriere */
    .page-template-page-karriere .section--header {
        margin-bottom: 544px;
    }

    .page-template-page-karriere .section__intro {
        margin-bottom: -544px;
    }

    .page-template-page-karriere .section__intro_media {
        bottom: -544px;
    }

    .page-template-page-karriere .media--1 {
        width: 440px;
    }

    .page-template-page-karriere .media--2 {
        width: 472px;
    }


    /* Showroom */
    .page-template-page-showroom .section--header {
        margin-bottom: 576px;
    }

    .page-template-page-showroom .section__intro {
        margin-bottom: -576px;
    }

    .page-template-page-showroom .section__intro_media {
        bottom: -576px;
    }

}


@media all and (max-width: 1239.98px) {

    body.home .section__intro_media {
        padding-top: var(--spacing-10);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    header .site_logo svg {
        width: 156px;
        height: 33px;
    }

    .site_nav__row {
        padding-top: 140px;
        padding-bottom: 140px;
    }

    .site_nav__main {
        -ms-flex-preferred-size: 64%;
        flex-basis: 64%;
        max-width: 64%;
    }

    .site_nav__main li a::after {
        top: 20px;
        left: -15px;
        height: 42px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 30px);
    }

    .site_nav__info {
        -ms-flex-preferred-size: 36%;
        flex-basis: 36%;
        max-width: 36%;
        padding-bottom: 15px;
    }


    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 58px;
    }

    .pattern-vertical {
        max-width: 58px;
    }

    /* Startseite */
    body.home .section__intro p {
        padding-right: 12px;
    }

    body.home .intro__animation {
        width: 182px;
        height: 70px;
    }

    body.home .intro__animation > span {
        top: -86px;
        left: -30px;
        width: 243px;
        height: 243px;
    }

    body.home .section--header {
        margin-bottom: 137px;
    }

    body.home .section__intro {
        padding-top: 30px !important;
        margin-bottom: -137px;
    }

    body.home .section__intro_media {
        bottom: -137px;
    }

    body.home .pattern-horizontal, .page-template-page-angebot .pattern-horizontal {
        width: 286px;
        max-height: unset;
    }


    /* Angebot */
    .page-template-page-angebot .section--header {
        margin-bottom: 400px;
    }

    .page-template-page-angebot .section__intro {
        margin-bottom: -400px;
    }

    .page-template-page-angebot .section__intro_media {
        bottom: -400px;
    }

    .page-template-page-angebot .media--1 {
        width: 377px;
    }

    .page-template-page-angebot .media--1 .media__pattern--absolute {
        bottom: -28px;
    }

    .page-template-page-angebot .media--2 {
        width: 286px;
    }


    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        width: 243px;
        height: 47px;
        margin-right: -60px;
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart img {
        bottom: -86px;
    }

    /* Über uns */
    .page-template-page-ueber-uns .section--header {
        margin-bottom: 405px;
    }

    .page-template-page-ueber-uns .section__intro {
        margin-bottom: -405px;
    }

    .page-template-page-ueber-uns .section__intro_media {
        bottom: -405px;
    }

    .page-template-page-ueber-uns .media--1 {
        width: 465px;
    }

    .page-template-page-ueber-uns .media--1 .media__media {
        margin-left: 58px;
    }

    .page-template-page-ueber-uns .media--2 {
        width: 393px;
    }


    /* Karriere */
    .page-template-page-karriere .section--header {
        margin-bottom: 442px;
    }

    .page-template-page-karriere .section__intro {
        margin-bottom: -442px;
    }

    .page-template-page-karriere .section__intro_media {
        bottom: -442px;
    }

    .page-template-page-karriere .media--1 {
        width: 358px;
    }

    .page-template-page-karriere .media--2 {
        width: 383px;
    }


    /* Showroom */
    .page-template-page-showroom .section--header {
        margin-bottom: 468px;
    }

    .page-template-page-showroom .section__intro {
        margin-bottom: -468px;
    }

    .page-template-page-showroom .section__intro_media {
        bottom: -468px;
    }

}


@media all and (max-width: 991.98px) {

    .site_nav::-webkit-scrollbar {
        width: 8px;
    }

    .site_nav__row {
        padding-top: var(--spacing-14);
        padding-bottom: var(--spacing-14);
    }

    .site_nav__main, .site_nav__info {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .site_nav__info {
        margin-top: var(--spacing-9);
    }

    
    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title {
        margin-top: var(--spacing-10-5);
    }

    .page-template-page-angebot-sub .section__intro .intro__title h1 {
        position: relative;
        z-index: 2;
        font-size: var(--font-size-8);
    }

    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        position: absolute;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    header .site_logo svg {
        width: 151px;
        height: 32px;
    }

    .site_nav__main li a::after {
        top: 16px;
        left: -13px;
        height: 35px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 26px);
    }


    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 48px;
    }

    .pattern-vertical {
        max-width: 48px;
    }

    /* Startseite */
    body.home .intro__animation {
        width: 148px;
        height: 57px;
    }

    body.home .intro__animation > span {
        top: -70px;
        left: -25px;
        width: 198px;
        height: 198px;
    }

    body.home .section--header {
        margin-bottom: 113px;
    }

    body.home .section__intro {
        margin-bottom: -113px;
    }

    body.home .section__intro_media {
        bottom: -113px;
    }


    /* Angebot */
    .page-template-page-angebot .section--header {
        margin-bottom: 328px;
    }

    .page-template-page-angebot .section__intro {
        margin-bottom: -328px;
    }

    .page-template-page-angebot .section__intro_media {
        bottom: -328px;
    }

    .page-template-page-angebot .media--1 {
        width: 307px;
    }

    .page-template-page-angebot .media--1 .media__pattern--absolute {
        bottom: -23px;
    }

    .page-template-page-angebot .media--2 {
        width: 233px;
    }


    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        bottom: 48px;
        right: 0;
        width: 272px;
        height: 272px;
    }

    /* Über uns */
    .page-template-page-ueber-uns .section--header {
        margin-bottom: 330px;
    }

    .page-template-page-ueber-uns .section__intro {
        margin-bottom: -330px;
    }

    .page-template-page-ueber-uns .section__intro_media {
        bottom: -330px;
    }

    .page-template-page-ueber-uns .media--1 {
        width: 379px;
    }

    .page-template-page-ueber-uns .media--1 .media__media {
        margin-left: 47px;
    }

    .page-template-page-ueber-uns .media--2 {
        width: 320px;
    }


    /* Karriere */
    .page-template-page-karriere .section--header {
        margin-bottom: 360px;
    }

    .page-template-page-karriere .section__intro {
        margin-bottom: -360px;
    }

    .page-template-page-karriere .section__intro_media {
        bottom: -360px;
    }

    .page-template-page-karriere .media--1 {
        width: 290px;
    }

    .page-template-page-karriere .media--2 {
        width: 313px;
    }


    /* Showroom */
    .page-template-page-showroom .section--header {
        margin-bottom: 380px;
    }

    .page-template-page-showroom .section__intro {
        margin-bottom: -380px;
    }

    .page-template-page-showroom .section__intro_media {
        bottom: -380px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 414px) {

    /*
    .page-template-page-angebot .media--2, .page-template-page-ueber-uns .media--2, .page-template-page-karriere .media--2 {
        margin-top: var(--spacing-8);
    }
    */

}


@media all and (max-width: 767.98px) {

    body:not(.page-template-page-angebot-sub) .section__intro:not(.section__intro--home) .intro__title h1 {
        padding-right: 0;
        padding-left: 0;
        margin-bottom: var(--spacing-8);
    }

    .section__intro_media, .section__intro_media .media, .section__intro_media .media__media {
        width: 100%;
    }

    .section__intro_media {
        padding-bottom: var(--spacing-10-5) !important;
    }

    .page-template-page-showroom .intro_media {
        max-width: 100%;
    }


    /* Startseite */
    body.home .section__intro h1 > span:not(.intro__animation) {
        display: block;
    }

    body.home .section__intro h1 > .intro__animation {
        position: absolute;
    }

    body.home .section__intro_media .media {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    body.home .section__intro h1.typography--huge {
        margin-bottom: var(--spacing-6);
    }

    body.home .section__intro p {
        font-size: var(--font-size-standard);
    }

    body.home .section__intro_media .media--3 {
        background-color: var(--brand-grey);
    }

    body.home .section__intro_media .media--3 .media__container {
        z-index: 2;
    }

    body.home .section__intro_media .media--3::after {
        content: "";
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--brand-grey);
    }

    /* Über uns */
    .page-template-page-ueber-uns .media--1 .media__container > img {
        display: none;
    }

    /* Karriere */
    .page-template-page-karriere .media--2 .media__pattern {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
    }

    .page-template-page-karriere .media--2 .media__pattern img {
        max-width: unset;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    header .site_logo svg {
        width: 146px;
        height: 31px;
    }

    .site_nav__main li a::after {
        top: 15px;
        left: -12px;
        height: 30px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 24px);
    }


    /* Intro media */
    .intro_media {
        max-width: 396px;
        margin-right: auto;
        margin-left: auto;
    }

    .intro_media .pattern-horizontal:not(.pattern-flexible):not(.pattern-huge) {
        width: 396px;
        max-height: unset;
    }


    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 80px;
    }

    .pattern-vertical {
        max-width: 80px;
    }

    .page-template-page-karriere .media--2 {
        padding-bottom: 80px;
    }


    /* Startseite */
    body.home .section__intro--home {
        max-width: calc(396px + var(--spacing-6) * 2);
    }

    body.home .pattern-horizontal {
        width: 396px;
        max-height: unset;
    }

    body.home .section__intro h1 {
        margin-top: var(--spacing-10-5);
    }

    body.home .section__intro h1 > .intro__animation, body.home .section__intro h1 > .intro__animation > span {
        width: 272px;
        height: 272px;
    }

    body.home .section__intro h1 > .intro__animation {
        top: -130px;
        left: 170px;
    }

    /* Angebot */
    .page-template-page-angebot .media--1 .media__pattern--absolute {
        bottom: -40px;
    }


    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        bottom: 48px;
        right: 0;
        width: 272px;
        height: 272px;
    }

}


@media all and (max-width: 575.98px) {

    /* Intro */
    .section__intro:not(.section__intro--home) .intro__title__container.inside.width--tiny,
    .section__intro:not(.section__intro--home) .intro__text {
        padding-right: 0;
        padding-left: 0;
    }

    .section__intro:not(.section__intro--home) .intro__title__container.inside.width--tiny {
        max-width: 100%;
    }

    body:not(.page-template-page-angebot-sub) .section__intro:not(.section__intro--home) .intro__title h1 {
        font-size: var(--font-size-9);
    }


    /* Intro media */
    .intro_media {
        margin-right: auto;
        margin-left: auto;
    }


    /* Startseite */
    body.home .section__intro h1 {
        margin-top: var(--spacing-10-5);
    }

    body.home .section__intro p {
        text-align: center;
    }

    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        right: calc(-1 * var(--spacing-6));
    }


    /* Single */
    .single-event .title.inside, .single-stelle .title.inside, 
    .page-template-page-showroom .section > .section__intro:not(.section__intro--home) + .section__intro_media {
        padding-right: 0;
        padding-left: 0;
    }

    .single-event h1:not(.typography--h2):not(.typography--huge):not(.typography--h1-big), 
    .single-stelle h1:not(.typography--h2):not(.typography--huge):not(.typography--h1-big) {
        font-size: var(--font-size-7);
        letter-spacing: calc(-1 * (var(--font-size-7) * 0.01));
    }

}


@media all and (max-width: 575.98px) and (min-width: 375px) {

    .intro_media {
        max-width: 317px;
    }

    .intro_media .pattern-horizontal:not(.pattern-flexible):not(.pattern-huge) {
        width: 317px;
        max-height: unset;
    }

    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 64px;
    }

    .pattern-vertical {
        max-width: 64px;
    }

    .page-template-page-karriere .media--2 {
        padding-bottom: 64px;
    }

    /* Startseite */
    body.home .section__intro--home {
        max-width: calc(317px + var(--spacing-6) * 2);
    }

}


@media all and (max-width: 575.98px) and (min-width: 414px) {

    header .site_logo svg {
        width: 137px;
        height: 29px;
    }

    .site_nav__main li a::after {
        top: 12px;
        left: -10px;
        height: 26px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 20px);
    }

    /* Startseite */
    body.home .section__intro h1 > .intro__animation, body.home .section__intro h1 > .intro__animation > span {
        width: 238px;
        height: 238px;
    }

    body.home .section__intro h1 > .intro__animation {
        top: -120px;
        left: 140px;
    }

    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        bottom: 51px;
        width: 238px;
        height: 238px;
    }

}


@media all and (max-width: 413.98px) {

    header .site_logo svg {
        width: 132px;
        height: 28px;
    }

    /*
    .page-template-page-angebot .media--2, .page-template-page-ueber-uns .media--2, .page-template-page-karriere .media--2 {
        margin-top: var(--spacing-6);
    }
    */

}



@media all and (max-width: 413.98px) and (min-width: 375px) {

    /* Navigation */
    .site_nav__main li a::after {
        top: 10px;
        left: -9px;
        height: 24px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 18px);
    }


    /* Startseite */
    body.home .section__intro h1 > .intro__animation, body.home .section__intro h1 > .intro__animation > span {
        width: 204px;
        height: 204px;
    }

    body.home .section__intro h1 > .intro__animation {
        top: -83px;
        left: 146px;
    }

    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        bottom: 51px;
        width: 204px;
        height: 204px;
    }

}


@media all and (max-width: 374.98px) {

    /* Navigation */
    .site_nav__main li a::after {
        top: 10px;
        left: -8px;
        height: 21px;
    }

    .no-touchevents .site_nav__main li a:hover::after, .site_nav__main li.nav__item--active a::after,
    .single-projekt .site_nav__main li.nav__item--projekte a::after, .page-template-page-angebot-sub .site_nav__main li.nav__item--angebot a::after,
    .single-event .site_nav__main li.nav__item--showroom a::after, .single-stelle .site_nav__main li.nav__item--karriere a::after {
        width: calc(100% + 16px);
    }


    .intro_media {
        max-width: 307px;
    }

    .intro_media .pattern-horizontal:not(.pattern-flexible):not(.pattern-huge) {
        width: 307px;
        max-height: unset;
    }

    /* Pattern */
    .pattern-horizontal, .pattern-square {
        max-height: 62px;
    }

    .pattern-vertical {
        max-width: 62px;
    }

    .page-template-page-karriere .media--2 {
        padding-bottom: 62px;
    }

    /* Startseite */
    body.home .section__intro--home {
        max-width: calc(307px + var(--spacing-6) * 2);
    }

    body.home .section__intro h1 > .intro__animation, body.home .section__intro h1 > .intro__animation > span {
        width: 204px;
        height: 204px;
    }

    body.home .section__intro h1 > .intro__animation {
        top: -83px;
        left: 136px;
    }

    /* Angebot - Unterseite */
    .page-template-page-angebot-sub .section__intro .intro__title .clipart {
        bottom: 51px;
        width: 204px;
        height: 204px;
    }

}