/*

    Reallabor B[e] Ware
    Design and Development: Leon Klaßen—www.leonklassen.com
    2026

*/



*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

b, strong {
    font-weight: bold;
}

i, em {
    font-style: italic;
}

dialog:modal {
    max-width: 100%;
    max-height: 100%;
}



/* ### FONTS ### */


@font-face {
    font-family: 'ApfelGrotezk';
    font-style: normal;
    font-weight: normal;
    src: url( 'fonts/ApfelGrotezk/ApfelGrotezk-Regular.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'ApfelGrotezkBrukt';
    font-style: normal;
    font-weight: normal;
    src: url( 'fonts/ApfelGrotezk/ApfelGrotezk-Brukt.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: normal;
    src: url( 'fonts/Geist/Geist-Regular.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Geist';
    font-style: italic;
    font-weight: normal;
    src: url( 'fonts/Geist/Geist-Italic.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 600;
    src: url( 'fonts/Geist/Geist-SemiBold.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Geist';
    font-style: italic;
    font-weight: 600;
    src: url( 'fonts/Geist/Geist-SemiBoldItalic.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: bold;
    src: url( 'fonts/Geist/Geist-Bold.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Geist';
    font-style: italic;
    font-weight: bold;
    src: url( 'fonts/Geist/Geist-BoldItalic.otf' ) format( 'opentype' );
}



/* ### COLORS ### */


:root {

    --color-dark: hsl( 0deg 0% 0% );
    --color-light: hsl( 0deg 0% 100% );
    
    --color-green: rgb( 138 161 0 );
    --color-darkred: rgb( 96 0 0 );
    
    --color-pink: rgb( 255 125 193 );
    --color-turquoise: rgb( 0 255 190 );
    --color-softturquoise: rgb( 160 215 200 );
    
    --font-small-size: 0.875rem; /* 14 / 18 */
    --font-small-lineheight: 1.28em;

    --font-normal-size: 1.125rem; /* 18 / 21 */
    --font-normal-lineheight: 1.2em;

    --font-large-size: 2rem; /* 32 / 36 */
    --font-large-lineheight: 1.125em;
    
    --font-title-size: 4rem; /* 64 / 60 */
    --font-title-lineheight: 0.9375em;
    
    --margin-side: 24px;
    
    --content-max-width: 950px;
    
}


@media ( max-width: 500px ) {

    :root {
    
        --font-normal-size: 1rem; /* 16 / 20 */
        --font-normal-lineheight: 1.25em;
    
        --font-large-size: 1.5rem; /* 24 / 27 */
        --font-large-lineheight: 1.125em;
    
        --font-title-size: 3rem; /* 48 / 46 */
        --font-title-lineheight: 0.95em;
    
        --margin-side: 16px;

    }

}



/* ### GENERAL ### */


body {
    margin: 0px;
    padding: 0px;
    font-family: 'Geist', sans-serif;
    font-size: var( --font-normal-size );
    line-height: var( --font-normal-lineheight );
    font-weight: normal;
    background-color: var( --color-light );
    color: var( --color-dark );
    cursor: default;
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text;
    font-weight: normal;
    overflow-wrap: break-word;
    min-height:100%;
    height: 100%;
    width: 100%;
}

::selection {
    background: var( --color-dark );
    color: var( --color-light );
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

button {
    background-color: transparent;
    text-align: left;       
    color: inherit;     
}

a:hover {

}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}



/* ### BODY ### */


body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}



/* ### HEADER ### */


header {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    z-index: 99999991;
    pointer-events: none;
}

header .header__logolink {
    height: 48px;
    border-radius: 24px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: var( --color-pink );
    display: flex;
    align-items: center;
    pointer-events: all;
    transition: box-shadow .4s;
}

header .header__logolink:hover {
    box-shadow: 0px 0px 16px var( --color-pink );
}

header .header__logolink svg {
    display: block;
    height: 28px;
    width: auto;
    fill: var( --color-dark );
    margin-bottom: 2px;
}

header .header__menu-button {
    position: relative;
    height: 48px;
    border-radius: 24px;
    padding-left: 80px;
    padding-right: 24px;
    background-color: var( --color-pink );
    display: flex;
    align-items: center;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    pointer-events: all;
    cursor: pointer;
    transition: box-shadow .4s;
}

header .header__menu-button:hover {
    box-shadow: 0px 0px 16px var( --color-pink );
}

header .header__menu-button::before {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 18px;
    left: 24px;
    top: 15px;
    border-top: 2px solid var( --color-dark );
    border-bottom: 2px solid var( --color-dark );
}

header .header__menu-button::after {
    content: "";
    display: block;
    position: absolute;
    left: 24px;
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var( --color-dark );
    width: 32px;
    height: 2px;
}

@media ( max-width: 500px ) { 
    
    header .header__logolink {
        padding-left: 16px;
        padding-right: 16px;    
    }
    
    header .header__logolink svg {
        height: 22px;    
    }
    
    header .header__menu-button {
        padding-left: 64px;
        padding-right: 16px;
    }
    
    header .header__menu-button::before,
    header .header__menu-button::after {
        left: 16px;
    }

}



/* ### MAIN MENU ### */


.main-menu-back {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;    
    z-index: 99999998; 
    background-color: var( --color-darkred );
    opacity: 0;
    transition: opacity .4s;
}

.main-menu-back.visible {
    opacity: 0.8;    
}

.main-menu {
    position: fixed;
    top: 0px;
    width: auto;
    right: 0px;
    height: 100%;    
    z-index: 99999999;
    background-color: var( --color-pink );
    color: var( --color-darkred );
    padding: 0px var( --margin-side );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    transform: translate3d( 100%, 0px, 0px );
    transition: transform .4s;
}

.main-menu.visible {
    transform: none;
}

.main-menu .main-menu__close-button {
    position: relative;
    height: 48px;
    width: fit-content;
    margin-left: auto;
    border-radius: 24px;
    padding-left: 80px;
    padding-right: 24px;
    background-color: var( --color-darkred );
    color: var( --color-pink );
    display: flex;
    align-items: center;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    pointer-events: all;
    cursor: pointer;
    margin-top: 16px;
    flex-shrink: 0;
    transition: box-shadow .4s;
}

.main-menu .main-menu__close-button:hover {
    box-shadow: 0px 0px 16px var( --color-darkred );
}

.main-menu .main-menu__close-button::before,
.main-menu .main-menu__close-button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    left: 24px;
    background-color: var( --color-pink );
    width: 32px;
    height: 2px;
}

.main-menu .main-menu__close-button::before {
    rotate: 45deg;
}

.main-menu .main-menu__close-button::after {
    rotate: -45deg;
}

.main-menu .main-menu__logolink {
    display: block;
    position: relative;
    margin-top: 16px;
    margin-bottom: 24px;
    padding-top: 24px;
    border-top: 1px solid var( --color-darkred );
}

.main-menu .main-menu__logolink svg {
    display: block;
    height: 128px;
    width: auto;
    fill: var( --color-darkred );
}

.main-menu .main-menu__primary {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight ); 
    border-top: 1px solid var( --color-darkred );
    border-bottom: 1px solid var( --color-darkred );
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: -1px;
    flex-shrink: 0;
}

.main-menu .main-menu__primary li.separated {
    border-top: 1px solid var( --color-darkred );
    padding-top: 16px;
}

.main-menu .main-menu__footer {
    margin-top: auto;
    margin-bottom: 24px;
    border-top: 1px solid var( --color-darkred );
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    flex-shrink: 0;
}

@media ( max-width: 500px ) { 

    .main-menu {
        width: 100%;
    }
    
    .main-menu .main-menu__logolink svg {
        height: 96px;
    }

}



/* ### MAIN ### */


main {
    flex-grow: 1;
}



/* ### HEADING ### */


.wp-block-heading {
    max-width: var( --content-max-width );
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );
    text-wrap: balance;
}

h1.wp-block-heading,
h2.wp-block-heading {
    font-family: "ApfelGrotezk", sans-serif;
    font-size: var( --font-title-size );
    line-height: var( --font-title-lineheight );
}

h3.wp-block-heading {
    font-family: "ApfelGrotezk", sans-serif;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

.wp-block-heading:not( :first-child ) {
    margin-top: 32px;
}

.wp-block-heading:not( :last-child ) {
    margin-bottom: 32px;
}

h1.wp-block-heading.wp-block-heading--pagetitle {
    font-size: 8rem;
    line-height: 0.9375em;
    font-family: "ApfelGrotezkBrukt", sans-serif;
    margin-top: calc( 16px + 48px + 16px + 24px );
    max-width: unset;
    margin-bottom: 0px;
}

@media ( max-width: 500px ) { 
    
    h1.wp-block-heading.wp-block-heading--pagetitle {
        font-size: 5rem;
        line-height: 0.9375em;
    }
    
}



/* ### PARAGRAPH ### */


.wp-block-paragraph {
    max-width: var( --content-max-width );
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );   
}

.wp-block-paragraph:not( :first-child ) {
    margin-top: var( --font-normal-lineheight );
}

.wp-block-paragraph:not( :last-child ) {
    margin-bottom: var( --font-normal-lineheight );
}

.wp-block-paragraph a {
    text-decoration: underline;
}



/* ### IMAGE ### */


.wp-block-image {
    position: relative;
    width: 100%;
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );
    max-width: var( --content-max-width );
}

.wp-block-image:not( :first-child ) {
    margin-top: 32px;
}

.wp-block-image:not( :last-child ) {
    margin-bottom: 32px;
}

.wp-block-image:has( figure.aligncenter ) {
    max-width: unset;
}

.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
}

.wp-block-image figcaption {
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    font-weight: 600;
    font-style: italic;
    max-width: 600px;
    margin-top: 16px;
}



/* ### GALLERY ### */


.wp-block-gallery {
    position: relative;
    width: 100%;
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );
    display: flex;
    gap: 24px;
}

.wp-block-gallery:not( :first-child ) {
    margin-top: 32px;
}

.wp-block-gallery:not( :last-child ) {
    margin-bottom: 32px;
}

.wp-block-gallery .wp-block-image {
    padding-left: 0px;
    padding-right: 0px;
}

@media ( max-width: 500px ) {

    .wp-block-gallery { 
        flex-direction: column;
    }
    
    .wp-block-gallery .wp-block-image {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
}



/* ### DETAIL ### */


.wp-block-details {
    position: relative;
    width: auto;
    margin-left: var( --margin-side );
    margin-right: var( --margin-side );  
    max-width: calc( var( --content-max-width ) - var( --margin-side ) * 2 );
    border-top: 1px solid var( --color-darkred );
    border-bottom: 1px solid var( --color-darkred );
}

.wp-block-details:not( :first-child ) {
    margin-top: 32px;
}

.wp-block-details:not( :last-child ) {
    margin-bottom: 32px;
}

.wp-block-details:has( + .wp-block-details ) {
    margin-bottom: 0px;
}

.wp-block-details + .wp-block-details {
    margin-top: -1px;
}

.wp-block-details summary {
    position: relative;
    list-style: none;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    padding-top: 16px;
    padding-bottom: 16px;
    cursor: pointer;
    padding-right: calc( 24px + 32px );
}

.wp-block-details summary::before,
.wp-block-details summary::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;
    right: 0px;
    width: 32px;
    height: 2px;
    background-color: var( --color-pink );
    transition: rotate .4s;
}

.wp-block-details summary::after {
    rotate: 90deg;
}

.wp-block-details[open] summary::before {
    rotate: 45deg;
}

.wp-block-details[open] summary::after {
    rotate: calc( 90deg + 45deg );
}

.wp-block-details .wrapper {
    overflow: hidden;
    transition: height .4s;
    height: 0px;   
}

.wp-block-details .wrapper > * {
    padding-left: 0px;
    padding-right: 0px;
}

.wp-block-details .wrapper > *:last-child {
    margin-bottom: 32px;
}



/* ### BUTTONS ### */


.wp-block-buttons {
    position: relative;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;    
    width: 100%;
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );
}

.wp-block-buttons:not( :first-child ) {
    margin-top: 32px;
}

.wp-block-buttons:not( :last-child ) {
    margin-bottom: 32px;
}

.wp-block-buttons .wp-element-button {
    display: block;
    background-color: var( --color-pink );
    color: var( --color-dark );
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 16px;
    padding-left: 24px;
    padding-right: 24px;
    width: fit-content;
    display: flex;
    align-items: center;
    transition: box-shadow .4s;
}

.wp-block-buttons .wp-element-button::after {
    content: "→";
    margin-left: 24px;
}

.wp-block-buttons .wp-element-button:hover {
    box-shadow: 0px 0px 16px var( --color-pink );
}



/* ### HERO ### */


.hero {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;    
    background-color: black;
    max-height: 100svh;
}

.hero video {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
}

.hero button {
    position: absolute;
    height: 48px;
    width: fit-content;
    margin-left: auto;
    border-radius: 24px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: var( --color-dark );
    color: var( --color-pink );
    top: 16px;
    cursor: pointer;
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

.hero button.playpause {
    right: 210px;
}

.hero .hero__logo {
    position: absolute;
    width: 100%;
    height: 400px;
    max-height: 70%;
    bottom: 0px;
    left: 0px;
    background: linear-gradient( transparent, var( --color-darkred ) );
}

.hero .hero__logo svg {
    display: block;
    position: absolute;
    top: 48px;
    left: var( --margin-side );
    height: calc( 100% - 48px - 48px );
    width: auto;
    fill: var( --color-pink );
}

@media ( max-width: 800px ) { 

    .hero {
        aspect-ratio: 1 / 1;
    }
    
    .hero button { 
        top: 72px
    }
    
    .hero button.playpause {
        right: 16px;
    }
    
    .hero .hero__logo {
        height: auto;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    
    .hero .hero__logo svg {
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
        height: auto;
        padding-left: var( --margin-side );
        padding-right: var( --margin-side );
    }
    
}

@media ( max-width: 500px ) { 

    .hero {
        aspect-ratio: 2 / 3;
    }
    
}



/* ### INTRO ### */


.intro {
    position: relative;
    width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
}

.intro.intro--darkred {
    background-color: var( --color-darkred );
    color: var( --color-light );
}

/*.intro > * {
    max-width: var( --content-max-width );
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );
}*/

.intro .wp-block-paragraph {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
}

.intro .wp-block-paragraph:not( :first-child ) {
    margin-top: var( --font-large-lineheight );
}

.intro .wp-block-paragraph:not( :last-child ) {
    margin-bottom: var( --font-large-lineheight );
}



/* ### STICKER ### */


.sticker {
    --sticker-width-px: 304px;
    
    position: sticky;
    z-index: 100;
    width: var( --sticker-width-px );
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var( --color-turquoise );
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: calc( var( --sticker-width-px ) * -0.5 );
    margin-bottom: calc( var( --sticker-width-px ) * -0.5 );
    margin-left: auto;
    margin-right: 32px;
    top: 128px;
    overflow: hidden;
    transform-origin: top right;
    transition: scale .5s, translate .5s;
    transition-timing-function: cubic-bezier(.59,-0.17,.33,1.27);
    cursor: pointer;
}

.sticker.in-menu {
    position: fixed;
    right: 32px;
    top: 128px;
    margin: 0px;
    scale: calc( 48px / var( --sticker-width-px ) );
    translate: -178px -112px;
}

.sticker.in-menu.extended {
    scale: 1;
}

.sticker::after {
    content: "+1";
    display: block;
    position: absolute;
    inset: 0px;
    margin: auto;
    width: fit-content;
    height: fit-content;
    font-size: calc( var( --sticker-width-px ) / 48px * var( --font-large-size ) );
    line-height: 1em;
    transition: opacity .5s;
    opacity: 0;
}

.sticker.in-menu:not( .extended )::after {
    opacity: 1;
}

.sticker > * {
    transition: opacity .5s;
}

.sticker.in-menu:not( .extended ) > * {
    opacity: 0;
    pointer-events: none;
}

.sticker .wp-block-group__inner-container {
    rotate: 4deg;
    z-index: 101;
}

.sticker .wp-block-paragraph {
    text-align: center;
    font-size: var( --font-small-size );
    line-height: var( --font-small-lineheight );
    font-weight: 600;
}

.sticker .wp-block-buttons {
    margin-top: 16px;
    justify-content: center;
}

@media ( max-width: 500px ) {

    .sticker.in-menu {
        translate: 16px -56px;
    }

}



/* ### SECTION ### */


.section {
    position: relative;
    width: 100%;
    padding-top: 48px;
    padding-bottom: 48px;
}

.section:not(:first-child) {
    margin-top: 48px;
}

.section:not(:last-child) {
    margin-bottom: 48px;
}

.section.section--green {
    background-color: var( --color-softturquoise );
    color: var( --color-dark );    
}



/* ### PROJECT TILES ### */


.project-tiles {
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );  
}

.project-tiles:not(:first-child) {
    margin-top: 64px;
}

.project-tiles:not(:last-child) {
    margin-bottom: 64px;
}

.project-tiles .project-tiles__filter {
    display: flex;
    flex-wrap: wrap;
    font-family: "ApfelGrotezk", sans-serif;
    font-size: var( --font-title-size );
    line-height: var( --font-title-lineheight );
    gap: 8px;
    margin-bottom: 64px;
}

.project-tiles .project-tiles__filter button {
    position: relative;
    height: 80px;
    border-radius: 40px;
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid var( --color-darkred );
    cursor: pointer;
    transition: box-shadow .4s;
}

.project-tiles .project-tiles__filter button.active {
    background-color: var( --color-darkred );
    color: var( --color-light );
}

.project-tiles .project-tiles__filter button:not( .active ):hover {
    box-shadow: 0px 0px 16px var( --color-darkred );
}

.project-tiles .project-tiles__filter button[data-filter="material"],
.project-tiles .project-tiles__filter button[data-filter="bauteil"],
.project-tiles .project-tiles__filter button[data-filter="projekt"] {
    padding-left: 80px;
}

.project-tiles .project-tiles__filter button[data-filter="material"]::before,
.project-tiles .project-tiles__filter button[data-filter="bauteil"]::before,
.project-tiles .project-tiles__filter button[data-filter="projekt"]::before {
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    top: 15px;
    left: 15px;
}

.project-tiles .project-tiles__filter button[data-filter="material"]::before {
    background-color: var( --color-green );
}

.project-tiles .project-tiles__filter button[data-filter="bauteil"]::before {
    background-color: var( --color-turquoise );
}

.project-tiles .project-tiles__filter button[data-filter="projekt"]::before {
    background-color: var( --color-pink );
}

.project-tiles .project-tiles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
    row-gap: 32px;
}

.project-tiles .project-tiles__grid li {
    min-width: 0px;
}

.project-tiles .project-tiles__grid li.hidden {
    display: none;
}

.project-tiles .project-tiles__grid li:nth-child( 4n + 2 ),
.project-tiles .project-tiles__grid li:nth-child( 4n + 4 ) {
    padding-top: 32px;
}

.project-tiles .project-tile {
    position: relative;
}

.project-tiles .project-tile .project-tile__thumbnail {
    position: relative;
    width: 100%;
}

.project-tiles .project-tile .project-tile__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
}

.project-tiles .project-tile .project-tile__dot {
    position: absolute;
    left: -12px;
    top: -12px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.project-tiles .project-tile.project-tile--material .project-tile__dot {
    background-color: var( --color-green );
}

.project-tiles .project-tile.project-tile--bauteil .project-tile__dot {
    background-color: var( --color-turquoise );
}

.project-tiles .project-tile.project-tile--projekt .project-tile__dot {
    background-color: var( --color-pink );
}

.project-tiles .project-tile .project-tile__title {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-top: 16px;
    margin-bottom: 16px;
}

.project-tiles .project-tile .project-tile__action {
    display: block;
    background-color: var( --color-darkred );
    color: var( --color-light );
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 16px;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 16px;
    width: fit-content;
    display: flex;
    align-items: center;
}

.project-tiles .project-tile.project-tile--material .project-tile__action  {
    background-color: var( --color-green );
    color: var( --color-dark );
}

.project-tiles .project-tile.project-tile--bauteil .project-tile__action  {
    background-color: var( --color-turquoise );
    color: var( --color-dark );
}

.project-tiles .project-tile.project-tile--projekt .project-tile__action  {
    background-color: var( --color-pink );
    color: var( --color-dark );
}

.project-tiles .project-tile .project-tile__action::after {
    content: "→";
    margin-left: 24px;
}

@media ( max-width: 900px ) {

    .project-tiles .project-tiles__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .project-tiles .project-tiles__grid li:nth-child( 4n + 2 ),
    .project-tiles .project-tiles__grid li:nth-child( 4n + 4 ) {
        padding-top: 0px;
    }
    
    .project-tiles .project-tiles__grid li:nth-child( 3n + 2 ) {
        padding-top: 32px;
    }
    
}

@media ( max-width: 800px ) {

    .project-tiles .project-tiles__filter {
        font-size: var( --font-large-size );
        line-height: var( --font-large-lineheight );
    }
    
    .project-tiles .project-tiles__filter button {
        height: 48px;
        border-radius: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .project-tiles .project-tiles__filter button[data-filter="material"],
    .project-tiles .project-tiles__filter button[data-filter="bauteil"],
    .project-tiles .project-tiles__filter button[data-filter="projekt"] {
        padding-left: 48px;
    }
    
    .project-tiles .project-tiles__filter button[data-filter="material"]::before,
    .project-tiles .project-tiles__filter button[data-filter="bauteil"]::before,
    .project-tiles .project-tiles__filter button[data-filter="projekt"]::before {
        top: 7px;
        left: 7px;
        width: 32px;
        height: 32px;
    }
    
}

@media ( max-width: 700px ) {

    .project-tiles .project-tiles__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .project-tiles .project-tiles__grid li:nth-child( 3n + 2 ) {
        padding-top: 0px;
    }
    
    .project-tiles .project-tiles__grid li:nth-child( 2n + 2 ) {
        padding-top: 32px;
    }
    
}

@media ( max-width: 500px ) {
    
    .project-tiles .project-tiles__grid {
        grid-template-columns: 1fr;
    }
    
    .project-tiles .project-tiles__grid li:nth-child( 2n + 2 ) {
        padding-top: 0px;
    }
    
}



/* ### NEWS TILES ### */


.news-tiles {
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );  
}

.news-tiles:not(:first-child) {
    margin-top: 64px;
}

.news-tiles:not(:last-child) {
    margin-bottom: 64px;
}

.news-tiles .news-tiles__filter {
    display: flex;
    flex-wrap: wrap;
    font-family: "ApfelGrotezk", sans-serif;
    font-size: var( --font-title-size );
    line-height: var( --font-title-lineheight );
    gap: 8px;
    margin-bottom: 64px;
}

.news-tiles .news-tiles__filter button {
    position: relative;
    height: 80px;
    border-radius: 40px;
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid var( --color-darkred );
    cursor: pointer;
    transition: box-shadow .4s;
}

.news-tiles .news-tiles__filter button.active {
    background-color: var( --color-darkred );
    color: var( --color-light );
}

.news-tiles .news-tiles__filter button:not( .active ):hover {
    box-shadow: 0px 0px 16px var( --color-darkred );
}

.news-tiles .news-tiles__grid {
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;*/
}

.news-tiles .news-tiles__grid li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
}

.news-tiles .news-tiles__grid li.hidden {
    display: none;
}

.news-tiles .news-tiles__grid li:not( .hidden ) + li:not( .hidden ) {
    margin-top: -1px;
}

.news-tiles .news-tile .news-tile__thumbnail {
    min-width: 0px;
}

.news-tiles .news-tile .news-tile__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
}

.news-tiles .news-tile .news-tile__info {
    grid-column: span 3;
    min-width: 0px;
    border-top: 1px solid var( --color-darkred );
    border-bottom: 1px solid var( --color-darkred );
    padding-top: 16px;
    padding-bottom: 32px;
}

/*.news-tiles .news-tile:last-child .news-tile__info {
    border-bottom: 1px solid var( --color-darkred );
}*/

.news-tiles .news-tile .news-tile__title {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-top: 16px;
    margin-bottom: 16px;
}

.news-tiles .news-tile .news-tile__action {
    display: block;
    background-color: var( --color-pink );
    color: var( --color-dark );
    height: 32px;
    border-radius: 16px;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 16px;
    width: fit-content;
    display: flex;
    align-items: center;
    transition: box-shadow .4s;
}

.news-tiles .news-tile .news-tile__action::after {
    content: "→";
    margin-left: 24px;
}

.news-tiles .news-tile .news-tile__action:hover {
    box-shadow: 0px 0px 16px var( --color-pink );
}

@media ( max-width: 900px ) {

    .news-tiles .news-tiles__grid li {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .news-tiles .news-tile .news-tile__info {
        grid-column: span 2;
    }

}

@media ( max-width: 800px ) {

    .news-tiles .news-tiles__filter {
        font-size: var( --font-large-size );
        line-height: var( --font-large-lineheight );
    }
    
    .news-tiles .news-tiles__filter button {
        height: 48px;
        border-radius: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
}

@media ( max-width: 500px ) {
    
    .news-tiles .news-tiles__grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    
    .news-tiles .news-tiles__grid li {
        display: flex;
        flex-direction: column;
    }
    
    .news-tiles .news-tile .news-tile__info {
        border-top: none;
        border-bottom: none;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
}



/* ### TEAM ### */


.team-grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
    row-gap: 32px;
    padding-left: var( --margin-side );
    padding-right: var( --margin-side );
}

.team-grid:not(:first-child) {
    margin-top: 64px;
}

.team-grid:not(:last-child) {
    margin-bottom: 64px;
}

.team-grid .wp-block-column {
    min-width: 0px;
}

.team-grid .wp-block-column:nth-child( 4n + 2 ),
.team-grid .wp-block-column:nth-child( 4n + 4 ) {
    padding-top: 32px;    
}

.team-grid .wp-block-column > * {
    padding-left: 0px;
    padding-right: 0px;
}

.team-grid .wp-block-column .wp-block-image {
    margin-bottom: 16px;
}

.team-grid .wp-block-column h3.wp-block-heading {
    font-size: var( --font-large-size );
    line-height: var( --font-large-lineheight );
    margin-top: 16px;
    margin-bottom: 16px;
}

.team-grid .wp-block-column h3.wp-block-heading + p {
    margin-top: 16px;
}

@media ( max-width: 900px ) {

    .team-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .team-grid .wp-block-column:nth-child( 4n + 2 ),
    .team-grid .wp-block-column:nth-child( 4n + 4 ) {
        padding-top: 0px;    
    }
    
    .team-grid .wp-block-column:nth-child( 3n + 2 ) {
        padding-top: 32px;    
    }
    
}

@media ( max-width: 700px ) {

    .team-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .team-grid .wp-block-column:nth-child( 3n + 2 ) {
        padding-top: 0px;    
    }

    .team-grid .wp-block-column:nth-child( 2n + 2 ) {
        padding-top: 32px;    
    }
    
}

@media ( max-width: 500px ) {

    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid .wp-block-column:nth-child( 2n + 2 ) {
        padding-top: 0px;    
    }

}



/* ### FIELDS ### */


.fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;    
}

.fields-grid .wp-block-column {
    min-width: 0px;
}

.fields-grid > .wp-block-column:first-child {
    grid-column: span 3;
    border-right: 1px solid var( --color-darkred );
}

.fields-grid > .wp-block-column:first-child > .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.fields-grid .wp-block-image {
    padding-left: 24px;
    padding-right: 24px;
}

.fields-grid .wp-block-image img {
    /*background-color: var( --color-pink );*/
    /*box-shadow: 0px 0px 16px var( --color-pink );*/
    padding: 24px;
}

@media ( max-width: 1150px ) {

    .fields-grid {
        display: flex;
        flex-direction: column;
    }
    
    .fields-grid > .wp-block-column:first-child {
        position: relative;
        border-right: none;
        padding-bottom: 48px;
    }
    
    .fields-grid > .wp-block-column:first-child::before {
        content: "";
        display: block;
        position: absolute;
        left: var( --margin-side );
        right: var( --margin-side );
        bottom: 0px;
        width: auto;
        height: 1px;
        background-color: var( --color-darkred );
    }
    
    .fields-grid > .wp-block-column:last-child {
        width: 33.3333%;
    }
    
}

@media ( max-width: 500px ) {
    
    .fields-grid > .wp-block-column:first-child > .wp-block-columns {
        display: flex;
        flex-direction: column;
    }
    
    .fields-grid .wp-block-image {
        padding-left: 64px;
        padding-right: 64px;
    }

}



/* ### PARTNER CARDS ### */


.partner-cards {
    position: relative;
    width: 100%;
    display: flex;    
}

.partner-cards .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    padding-top: 48px;
    padding-bottom: 48px;
}

.partner-cards .wp-block-column:first-child {
    background-color: var( --color-pink );
}

.partner-cards .wp-block-column:last-child {
    background-color: var( --color-turquoise );
}

.partner-cards .wp-block-column:first-child .wp-element-button {
    background-color: var( --color-turquoise );
}

.partner-cards .wp-block-column:first-child .wp-element-button:hover {
    box-shadow: 0px 0px 16px var( --color-turquoise );
}

.partner-cards .wp-block-column .wp-block-image img {
    border-radius: 0px;
    height: 128px;
    width: auto;
    max-width: 100%;
}

@media ( max-width: 1150px ) {

    .partner-cards .wp-block-column .wp-block-image img {
        height: 96px;    
    }
    
}

@media ( max-width: 900px ) {

    .partner-cards {
        flex-direction: column;
    }
    
}



/* ### FOOTER ### */


footer {
    position: relative;
    width: 100%;
    background-color: var( --color-darkred );
    color: var( --color-light );
    margin-top: 96px;
}

footer .footer__logolink {
    display: block;
    position: relative;
    padding: 0px var( --margin-side ) 0px var( --margin-side );
    margin-top: 24px;
    margin-bottom: 32px;
}

footer .footer__logolink svg {
    display: block;
    height: 124px;
    width: auto;
    fill: var( --color-pink );
}

footer .footer__logobar {
    padding: 0px var( --margin-side ) 0px var( --margin-side );
    margin-top: 32px;
    margin-bottom: 32px;
    display: flex;
    gap: 24px;
    align-items: center;
}

footer .footer__logobar .wp-block-image {
    width: 128px;
    height: auto;
    padding: 0px;
}

footer .footer__logobar .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0px;
}

footer .footer__navigation {
    padding: 0px var( --margin-side ) 0px var( --margin-side );
    margin-top: 32px;
    margin-bottom: 24px;
}

footer .footer__navigation ul {
    display: flex;
    gap: 24px;
}

footer .footer__navigation .menu-only {
    display: none;
}

footer .footer__year {
    position: absolute;
    right: var( --margin-side );
    bottom: 24px;
}

@media ( max-width: 500px ) {

    footer .footer__logolink svg {
        height: 96px;    
    }

    footer .footer__navigation ul {
        flex-direction: column;
        gap: 0px;
    }
    
}



/* ### SPECIAL MARGINS ### */


.section:has( + .section ) {
    margin-bottom: 0px;
}

.section + .section {
    margin-top: 0px;
}

.intro:has( + .section ) {
    margin-bottom: 0px;
}

.intro + .section {
    margin-top: 0px;
}

.intro:has( + .sticker ) {
    margin-bottom: 0px;
}

.sticker + .section {
    margin-top: 0px;
}

@media ( max-width: 1240px ) {

    .intro:has( + .sticker ) {
        padding-bottom: calc( 152px + 32px );
    }
    
    .sticker + .section {
        padding-top: calc( 152px + 32px );
    }

}