/* 
 * Main CSS file
 * This file imports all other CSS files
 */

/* Base styles */

/* 
 * CSS Variables
 * Define all CSS variables here
 */

:root {
    /* Colors */

    --color-text: #1b1c1c;
    --color-page: #fff;

    --color-fog: #ebeded;

    --color-green: #b7da07;
    --color-blue: #012c47;
    --color-cloud: #c4ccd8;
    --color-mist: #ebeff6;
    --color-black: #1b1c1c;
    --color-grey: #828282;

    --color-accent: #436d94;

    /* Spacing */
    --gutter: 40px;
    --layout-padding: 64px;
    --spacer: 20px;

    /* Layout */
    --max-width: 1200px;
}

@media screen and (max-width: 1079px) {

:root {
        --gutter: 16px;
        --layout-padding: 64px;
        --spacer: 20px
}
    }

@media screen and (max-width: 869px) {

:root {
        --gutter: 24px;
        --layout-padding: 24px;
        --spacer: 16px
}
    }

/* 
 * Reset CSS
 * A minimal CSS reset
 */

/* Box sizing for all elements */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Remove default margin and padding */

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

/* Set core body defaults */

body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* Remove list styles */

ul, ol {
    list-style: none;
}

/* Make images easier to work with */

img {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */

input, button, textarea, select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Set default link styles */

a {
    color: inherit;
    text-decoration: none;
}

p a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/*
 * Typography
 * Base typography styles
 */

/* Font Face Declarations */

@font-face {
    font-family: "Bryant";
    src: url("../fonts/Bryant.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bryant";
    src: url("../fonts/Bryant_Bold.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HankenGrotesk";
    src: url("../fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-headlines: "Bryant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-copy: "HankenGrotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html {
    font-size: 62.5%;
}

@media screen and (max-width: 869px) {

html {
        font-size: 50%
}
    }

body {
    font-family: var(--font-copy);
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0em;
    margin-bottom: 0.5em;
    line-height: 1.1;
    font-weight: 200;
    text-transform: uppercase;
    font-variation-settings: "wght" 200;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
        font-variation-settings: "wght" 400;
    }

@media screen and (max-width: 1079px) {

h1, h2, h3, h4, h5, h6 {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto
}
    }

h1 {
    font-family: var(--font-headlines);
    font-size: 3.4rem;
}

@media screen and (max-width: 869px) {

h1 {
        font-size: 2.8rem
}
    }

h2 {
    font-family: var(--font-headlines);
    font-size: 3rem;
}

@media screen and (max-width: 869px) {

h2 {
        font-size: 2.4rem
}
    }

h3 {
    text-transform: none;
    font-size: 2rem;
    letter-spacing: 0.01em;
    font-variation-settings: "wght" 320;
}

@media screen and (max-width: 869px) {

h3 {
        font-size: 2.2rem
}
    }

h4 {
    font-size: 2rem;
}

p {
    margin-bottom: 0.4em;
    line-height: 1.4em;
    font-size: 1.8rem;
    font-weight: 400;
    font-variation-settings: "wght" 300;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

p a {
        text-decoration: underline;
    }

a {
}

a:hover {
}

strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

blockquote {
    margin: var(--gutter) 0;
    padding: var(--spacer) var(--spacer);
    border-left: 4px solid var(--color-gray);
}

blockquote strong {
        quotes: "\201C" "\201D" "\2018" "\2019";
        font-variation-settings: "wght" 240;
        line-height: 1.3em;
        color: var(--color-blue);

        position: relative;
    }

blockquote strong:before, blockquote strong:after {
            font-family: Georgia, "Times New Roman", Times, serif;
            color: var(--color-accent);
            opacity: 0.1;
            font-size: 4em;
            line-height: 0.1em;
            position: absolute;
        }

blockquote strong:before {
            content: open-quote;

            top: 0.2em;
            left: -0.6em;
        }

blockquote strong:after {
            content: close-quote;
            bottom: -0.2em;
            right: -0.6em;
        }

blockquote {

    line-height: 1.2em;
    opacity: 0.8;
    font-size: 3rem;
    margin: 1em auto;
    text-align: center;

    max-width: 840px;
}

blockquote em {
        font-size: 1.6rem;
    }

blockquote footer {
        margin-top: 1em;
        font-size: 2rem;
        color: var(--color-blue);
    }

code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    background-color: var(--color-gray-light);
    padding: var(--spacer) var(--spacer);
    border-radius: var(--border-radius);
}

pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    background-color: var(--color-gray-light);
    padding: var(--spacer);
    margin: var(--spacer) 0;
    border-radius: var(--border-radius);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background-color: transparent;
}

hr {
    width: 120px;
    height: 0px;

    border: none;
    border-top: 2px solid var(--fg-color);
    margin: var(--gutter) 0;
    opacity: 0.4;
}

/* Lists */

ul, ol {
    margin: var(--spacer) 0;
    padding-left: var(--spacer);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: var(--spacer);
}

figcaption {
    font-size: 1.6rem;
}

.credits {
    font-size: 1.2rem;
    text-align: right;
    opacity: 0.5;
    display: block;
}

/* Visually hidden elements (for screen readers only) */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

:root {
    --grid-columns: 12; /* Standardmäßig 12-Spalten-Grid */
    --grid-gap: 40px; /* Standardabstand zwischen Spalten */
}

/* 12-column-grid */

.grid, .projects-grid {
    display: grid;

    gap: var(--grid-gap);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
}

@media screen and (max-width: 1079px) {

.grid, .projects-grid {
        display: flex;
        flex-direction: column;
        --grid-gap: 12px
}
    }

.column {
    --span: 12; /* Standardwert, falls nicht anders angegeben */
    grid-column: span var(--span);
}

@media screen and (max-width: 1079px) {

.column {
        --span: 1 !important
}
    }

.fullwidth {
    width: 100vw;
}

/* Vendor specific files */

/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root {
    --swiper-theme-color: #007aff;
}

:host {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.swiper {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column;
}

.swiper-wrapper {
    box-sizing: initial;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    width: 100%;
    z-index: 1;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translateZ(0);
}

.swiper-horizontal {
    touch-action: pan-y;
}

.swiper-vertical {
    touch-action: pan-x;
}

.swiper-slide {
    display: block;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
}

.swiper-slide-invisible-blank {
    visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto;
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
}

.swiper-3d {
    perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
        transform-style: preserve-3d;
    }

.swiper-css-mode > .swiper-wrapper {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
            display: none;
        }

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: start start;
    }

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
            scroll-snap-type: x mandatory;
        }

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
            scroll-snap-type: y mandatory;
        }

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
            scroll-snap-type: none;
        }

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
            scroll-snap-align: none;
        }

.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
            content: "";
            flex-shrink: 0;
            order: 9999;
        }

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
            scroll-snap-align: center center;
            scroll-snap-stop: always;
        }

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
            margin-inline-start: var(--swiper-centered-offset-before);
        }

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
            height: 100%;
            min-height: 1px;
            width: var(--swiper-centered-offset-after);
        }

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
            margin-block-start: var(--swiper-centered-offset-before);
        }

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
            height: var(--swiper-centered-offset-after);
            min-width: 1px;
            width: 100%;
        }

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10;
    }

.swiper-3d .swiper-slide-shadow {
        background: #00000026;
    }

.swiper-3d .swiper-slide-shadow-left {
        background-image: linear-gradient(270deg, #00000080, #0000);
    }

.swiper-3d .swiper-slide-shadow-right {
        background-image: linear-gradient(90deg, #00000080, #0000);
    }

.swiper-3d .swiper-slide-shadow-top {
        background-image: linear-gradient(0deg, #00000080, #0000);
    }

.swiper-3d .swiper-slide-shadow-bottom {
        background-image: linear-gradient(180deg, #00000080, #0000);
    }

.swiper-lazy-preloader {
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid #0000;
    box-sizing: border-box;
    height: 42px;
    left: 50%;
    margin-left: -21px;
    margin-top: -21px;
    position: absolute;
    top: 50%;
    transform-origin: 50%;
    width: 42px;
    z-index: 10;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
        animation: swiper-preloader-spin 1s linear infinite;
    }

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
    }

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
        height: 1px;
        width: var(--swiper-virtual-size);
    }

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
        height: var(--swiper-virtual-size);
        width: 1px;
    }

:root {
    --swiper-navigation-size: 44px;
}

.swiper-button-next, .swiper-button-prev {
    align-items: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    cursor: pointer;
    display: flex;
    height: var(--swiper-navigation-size);
    justify-content: center;
    position: absolute;
    width: var(--swiper-navigation-size);
    z-index: 10;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
        cursor: auto;
        opacity: 0.35;
        pointer-events: none;
    }

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
        cursor: auto;
        opacity: 0;
        pointer-events: none;
    }

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
        display: none !important;
    }

.swiper-button-next svg, .swiper-button-prev svg {
        height: 100%;
        object-fit: contain;
        transform-origin: center;
        width: 100%;
        fill: currentColor;
        pointer-events: none;
    }

.swiper-button-lock {
    display: none;
}

.swiper-button-next, .swiper-button-prev {
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
    top: var(--swiper-navigation-top-offset, 50%);
}

.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
}

.swiper-button-prev .swiper-navigation-icon {
        transform: rotate(180deg);
    }

.swiper-button-next {
    left: auto;
    right: var(--swiper-navigation-sides-offset, 4px);
}

.swiper-horizontal .swiper-button-next, .swiper-horizontal .swiper-button-prev, .swiper-horizontal ~ .swiper-button-next, .swiper-horizontal ~ .swiper-button-prev {
        margin-left: 0;
        margin-top: calc(0px - var(--swiper-navigation-size) / 2);
        top: var(--swiper-navigation-top-offset, 50%);
    }

.swiper-horizontal.swiper-rtl .swiper-button-next, .swiper-horizontal.swiper-rtl ~ .swiper-button-next, .swiper-horizontal ~ .swiper-button-prev, .swiper-horizontal .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, 4px);
        right: auto;
    }

.swiper-horizontal.swiper-rtl .swiper-button-prev, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev, .swiper-horizontal ~ .swiper-button-next, .swiper-horizontal .swiper-button-next {
        left: auto;
        right: var(--swiper-navigation-sides-offset, 4px);
    }

.swiper-horizontal.swiper-rtl .swiper-button-next .swiper-navigation-icon, .swiper-horizontal.swiper-rtl ~ .swiper-button-next .swiper-navigation-icon, .swiper-horizontal ~ .swiper-button-prev .swiper-navigation-icon, .swiper-horizontal .swiper-button-prev .swiper-navigation-icon {
            transform: rotate(180deg);
        }

.swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev .swiper-navigation-icon {
            transform: rotate(0deg);
        }

.swiper-vertical .swiper-button-next, .swiper-vertical .swiper-button-prev, .swiper-vertical ~ .swiper-button-next, .swiper-vertical ~ .swiper-button-prev {
        left: var(--swiper-navigation-top-offset, 50%);
        margin-left: calc(0px - var(--swiper-navigation-size) / 2);
        margin-top: 0;
        right: auto;
    }

.swiper-vertical .swiper-button-prev, .swiper-vertical ~ .swiper-button-prev {
        bottom: auto;
        top: var(--swiper-navigation-sides-offset, 4px);
    }

.swiper-vertical .swiper-button-prev .swiper-navigation-icon, .swiper-vertical ~ .swiper-button-prev .swiper-navigation-icon {
            transform: rotate(-90deg);
        }

.swiper-vertical .swiper-button-next, .swiper-vertical ~ .swiper-button-next {
        bottom: var(--swiper-navigation-sides-offset, 4px);
        top: auto;
    }

.swiper-vertical .swiper-button-next .swiper-navigation-icon, .swiper-vertical ~ .swiper-button-next .swiper-navigation-icon {
            transform: rotate(90deg);
        }

.swiper-pagination {
    position: absolute;
    text-align: center;
    transform: translateZ(0);
    transition: opacity 0.3s;
    z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
        opacity: 0;
    }

.swiper-pagination.swiper-pagination-disabled, .swiper-pagination-disabled > .swiper-pagination {
        display: none !important;
    }

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    left: 0;
    top: var(--swiper-pagination-top, auto);
    width: 100%;
}

.swiper-pagination-bullets-dynamic {
    font-size: 0;
    overflow: hidden;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        position: relative;
        transform: scale(0.33);
    }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
        transform: scale(1);
    }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
        transform: scale(0.66);
    }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
        transform: scale(0.33);
    }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
        transform: scale(0.66);
    }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
        transform: scale(0.33);
    }

.swiper-pagination-bullet {
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    display: inline-block;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
}

button.swiper-pagination-bullet {
        appearance: none;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

.swiper-pagination-clickable .swiper-pagination-bullet {
        cursor: pointer;
    }

.swiper-pagination-bullet:only-child {
        display: none !important;
    }

.swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    opacity: var(--swiper-pagination-bullet-opacity, 1);
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    left: var(--swiper-pagination-left, auto);
    right: var(--swiper-pagination-right, 8px);
    top: 50%;
    transform: translate3d(0, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
        display: block;
        margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    }

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
    }

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
            display: inline-block;
            transition:
                transform 0.2s,
                top 0.2s;
        }

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
    }

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
            transition:
                transform 0.2s,
                left 0.2s;
        }

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition:
        transform 0.2s,
        right 0.2s;
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, #00000040);
    position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: var(--swiper-pagination-color, var(--swiper-theme-color));
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: scale(0);
        transform-origin: left top;
        width: 100%;
    }

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        transform-origin: right top;
    }

.swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-horizontal > .swiper-pagination-progressbar, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        height: var(--swiper-pagination-progressbar-size, 4px);
        left: 0;
        top: 0;
        width: 100%;
    }

.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar {
        height: 100%;
        left: 0;
        top: 0;
        width: var(--swiper-pagination-progressbar-size, 4px);
    }

.swiper-pagination-lock {
    display: none;
}

.swiper-scrollbar {
    background: var(--swiper-scrollbar-bg-color, #0000001a);
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
}

.swiper-scrollbar.swiper-scrollbar-disabled, .swiper-scrollbar-disabled > .swiper-scrollbar {
        display: none !important;
    }

.swiper-scrollbar.swiper-scrollbar-horizontal, .swiper-horizontal > .swiper-scrollbar {
        bottom: var(--swiper-scrollbar-bottom, 4px);
        height: var(--swiper-scrollbar-size, 4px);
        left: var(--swiper-scrollbar-sides-offset, 1%);
        position: absolute;
        top: var(--swiper-scrollbar-top, auto);
        width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
        z-index: 50;
    }

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
        height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
        left: var(--swiper-scrollbar-left, auto);
        position: absolute;
        right: var(--swiper-scrollbar-right, 4px);
        top: var(--swiper-scrollbar-sides-offset, 1%);
        width: var(--swiper-scrollbar-size, 4px);
        z-index: 50;
    }

.swiper-scrollbar-drag {
    background: var(--swiper-scrollbar-drag-bg-color, #00000080);
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
}

.swiper-scrollbar-cursor-drag {
    cursor: move;
}

.swiper-scrollbar-lock {
    display: none;
}

.swiper-zoom-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none;
}

.swiper .swiper-notification {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
    margin: 0 auto;
    transition-timing-function: ease-out;
}

.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
    flex-direction: column;
    flex-wrap: wrap;
}

.swiper-fade.swiper-free-mode .swiper-slide {
            transition-timing-function: ease-out;
        }

.swiper-fade .swiper-slide {
        pointer-events: none;
        transition-property: opacity;
    }

.swiper-fade .swiper-slide .swiper-slide {
            pointer-events: none;
        }

.swiper-fade .swiper-slide-active {
        pointer-events: auto;
    }

.swiper-fade .swiper-slide-active .swiper-slide-active {
            pointer-events: auto;
        }

.swiper.swiper-cube {
    overflow: visible;
}

.swiper-cube .swiper-slide {
        backface-visibility: hidden;
        height: 100%;
        pointer-events: none;
        transform-origin: 0 0;
        visibility: hidden;
        width: 100%;
        z-index: 1;
    }

.swiper-cube .swiper-slide .swiper-slide {
            pointer-events: none;
        }

.swiper-cube.swiper-rtl .swiper-slide {
        transform-origin: 100% 0;
    }

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
            pointer-events: auto;
        }

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
        pointer-events: auto;
        visibility: visible;
    }

.swiper-cube .swiper-cube-shadow {
        bottom: 0;
        height: 100%;
        left: 0;
        opacity: 0.6;
        position: absolute;
        width: 100%;
        z-index: 0;
    }

.swiper-cube .swiper-cube-shadow:before {
            background: #000;
            bottom: 0;
            content: "";
            filter: blur(50px);
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }

.swiper-cube .swiper-slide-next + .swiper-slide {
        pointer-events: auto;
        visibility: visible;
    }

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
        backface-visibility: hidden;
        z-index: 0;
    }

.swiper.swiper-flip {
    overflow: visible;
}

.swiper-flip .swiper-slide {
        backface-visibility: hidden;
        pointer-events: none;
        z-index: 1;
    }

.swiper-flip .swiper-slide .swiper-slide {
            pointer-events: none;
        }

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
            pointer-events: auto;
        }

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
        backface-visibility: hidden;
        z-index: 0;
    }

.swiper-creative .swiper-slide {
        backface-visibility: hidden;
        overflow: hidden;
        transition-property: transform, opacity, height;
    }

.swiper.swiper-cards {
    overflow: visible;
}

.swiper-cards .swiper-slide {
        backface-visibility: hidden;
        overflow: hidden;
        transform-origin: center bottom;
    }

/* Layout */

/* Components */

.btn, .cta, .memory-toggle-btn {
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    display: inline-flex;
    padding: 0.5em 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    border-radius: 0px;
    margin: 0.75em 0;

    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn:hover, .cta:hover, .memory-toggle-btn:hover {
        background-color: var(--color-accent);
        color: var(--bg-color);
    }

.cta {
    --idle-color: var(--color-accent);
    --active-color: var(--color-accent);
    border-color: transparent;
    min-height: 60px;

    padding: 0;
    margin: 0;

    color: var(--idle-color);

    position: relative;
    z-index: 1;
}

.cta:hover {
        color: var(--active-color);
        background-color: transparent;
        gap: 10px;
        margin-left: -14px;
    }

.cta:hover i {
            border-color: var(--active-color);
            background-color: transparent;
            width: 40px;
            height: 40px;
        }

.cta:hover i svg {
                opacity: 1;
            }

@media screen and (max-width: 869px) {

.cta {
        color: var(--active-color);
        background-color: transparent;
        gap: 10px;
        margin-left: 0;

        font-size: 1.8rem
}

        .cta i {
            border-color: var(--active-color) !important;
            background-color: transparent !important;
            width: 32px !important;
            height: 32px !important;
        }

            .cta i svg {
                opacity: 1 !important;
            }
    }

.cta {

    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cta i {
        display: block;

        top: 0px;
        left: 0px;
        width: 12px;
        height: 12px;
        display: flex;

        background-color: var(--idle-color);

        align-items: center;
        justify-content: center;
        border: 2px solid transparent;

        border-radius: 100px;
        transition: all 0.2s ease-in-out;
    }

.cta i svg {
            opacity: 0;
            width: 100%;
            height: 100%;
        }

.cta i svg path, .cta i svg circle, .cta i svg polygon, .cta i svg rect {
                fill: var(--active-color);
            }

figure video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        margin: 0;
    }

/* Fallback-Stil für nicht unterstützte Videos */

figure video .video-fallback {
            display: none;
            width: 100%;
            height: 100%;
            background-color: transparent;
            color: #666;
            text-align: center;
            padding: 2rem;
            box-sizing: border-box;
        }

/* Stil für den Fall, dass das Video nicht geladen werden kann */

figure video:not([src]), figure video[src=""] {
        background-color: transparent;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Zeige den Fallback-Text an, wenn das Video nicht unterstützt wird */

figure video:not([src]) .video-fallback, figure video[src=""] .video-fallback, figure video.video-error .video-fallback {
        display: block;
    }

.video-thumb {
    position: relative;
}

.video-thumb:after {
        content: "";
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;

        background-image: url("../img/icon_arrow_next.svg");
        background-position: center;
        background-size: 20%;
        background-repeat: no-repeat;
        position: absolute;
    }

header.header {
    --header-height: 100px;
    min-height: var(--header-height);

    padding: 0 var(--gutter);
}

@media screen and (max-width: 1079px) {

header.header {
        --header-height: 64px
        /*
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        z-index: 300;
        background-color: #fff;
        */
}
    }

header.header .wrapper {
        max-width: var(--max-width);
        margin: 0 auto;
        height: 100%;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gutter);
    }

@media screen and (max-width: 1499px) {

header.header .wrapper {
            max-width: 100%
    }
        }

body.nav-open {
    overflow: hidden;
}

.logo {
    background-image: url("../img/logo-wide.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    width: 200px;

    height: var(--header-height);

    margin-left: -60px;

    position: relative;
    z-index: 200;
}

@media screen and (max-width: 1499px) {

.logo {
        margin-left: 0
}
    }

@media screen and (max-width: 1079px) {

.logo {
        width: 120px
}
    }

.logo {

    font-size: 0;
}

body.nav-open .logo {
        background-image: url("../img/logo-wide-w.svg");
        position: fixed;
        top: 0px;
        left: var(--gutter);
    }

.menu {
    margin-left: auto;
}

.menu .main-menu {
        list-style-type: none;
        display: flex;
        flex-direction: row;
        gap: 40px;
    }

.menu .main-menu li {
            margin: 0;
        }

.menu .main-menu li a {
                text-transform: uppercase;
                font-variation-settings: "wght" 500;
                font-size: 1.8rem;
            }

.menu .main-menu li a[aria-current="page"] {
                    border-bottom: 2px solid var(--color-green);
                }

@media screen and (max-width: 1079px) {

.menu .main-menu {
            display: none;

            padding: var(--gutter);

            flex-direction: column;
            align-items: center;
            justify-content: center;

            gap: 20px
    }

            body.nav-open .menu .main-menu {
                display: flex;
            }
                .menu .main-menu li a {
                    text-transform: uppercase;
                    font-weight: 400;
                    font-size: 3rem;
                    font-family: var(--font-headlines);
                }
        }

@media screen and (max-width: 1079px) {

.menu {
        flex-direction: column;

        z-index: 50;

        flex-direction: column;

        justify-content: center;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;

        z-index: 100;

        background-color: var(--color-page)
}

        body.nav-open .menu {
            display: flex;
            position: fixed;
            margin: 0;
            min-height: 100dvh;
            background-color: var(--color-black);
            color: #fff;
        }
    }

.menu #menu-toggle {
        position: relative;
        z-index: 140;
        display: none;

        width: var(--header-height);
        height: var(--header-height);
    }

.menu #menu-toggle i {
            pointer-events: none;
            width: 32px;
            height: 32px;
            display: flex;
        }

.menu #menu-toggle i.close {
            display: none;
        }

.menu #menu-toggle i.burger {
            display: flex;
        }

.menu #menu-toggle svg path, .menu #menu-toggle svg rect, .menu #menu-toggle svg circle {
                fill: var(--color-text);
            }

@media screen and (max-width: 1079px) {

.menu #menu-toggle {
            position: fixed;
            top: 0px;
            right: 0px;

            display: flex;
            align-items: center;
            justify-content: center
    }
        }

.menu #menu-toggle[aria-expanded="true"] i.close {
                display: flex;
            }

.menu #menu-toggle[aria-expanded="true"] i.burger {
                display: none;
            }

.options {
    /*  position: absolute;
    top: 0px;
    right: 0px;

    */

    height: var(--header-height);
    margin-right: -50px;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

@media screen and (max-width: 1499px) {

.options {
        position: relative;
        margin-right: 12px
}
    }

@media screen and (max-width: 419px) {

.options {
        display: none;
        z-index: 400;

        justify-content: space-between
}

        body.nav-open .options {
            display: flex;
            position: fixed;
            bottom: 12px;
            right: 12px;
            left: 12px;
        }
    }

.contact-switch, .language-switch {
    --item-size: 32px;
    height: var(--item-size);
}

.contact-switch:hover ul li a, .language-switch:hover ul li a {
                    outline: 2px solid var(--color-cloud);
                }

.contact-switch:hover ul:after, .language-switch:hover ul:after {
                background-color: var(--color-mist);
                border-radius: 0;
            }

.contact-switch ul, .language-switch ul {
        position: relative;
        list-style-type: none;

        width: var(--item-size);
        height: var(--item-size);
        margin: 0;
        padding: 0;

        transition: all 0.3s ease-in-out;
    }

.contact-switch ul:after, .language-switch ul:after {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            width: calc(var(--item-size) + 4px);
            height: calc(var(--item-size) + 4px);
            background-color: transparent;
            transition: all 0.2s ease-in-out;
            border-radius: 100px;

            /* box-shadow: inset 5px 5px 5px var(--color-cloud); */
        }

.contact-switch li, .language-switch li {
        position: absolute;
        left: 0px;
        top: 0px;
        flex-shrink: 0;

        transition: all 0.3s ease-in-out;
    }

.contact-switch li a, .language-switch li a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--item-size);
            height: var(--item-size);

            background-size: 60%;
            background-position: center;
            background-repeat: no-repeat;

            border-radius: var(--item-size);
            background-color: #fff;

            outline: 2px solid var(--color-cloud);
            color: var(--color-cloud);
        }

.contact-switch li a:hover, .language-switch li a:hover {
                outline: 2px solid var(--color-accent) !important;
                color: var(--color-accent);
            }

.contact-switch li a:hover i, .language-switch li a:hover i {
                    opacity: 1;
                    transition-delay: 0.2s;
                }

.contact-switch li i, .language-switch li i {
            position: absolute;
            display: inline-block;

            top: -24px;

            word-break: keep-all;
            white-space: nowrap;

            left: 50%;

            width: auto;
            transform: translateX(-50%);

            font-size: 1.4rem;
            font-style: normal;
            text-align: left;
            opacity: 0;
            color: var(--color-accent);
            transition: all 0.2s ease-in-out;
        }

.contact-switch, .language-switch {

    display: flex;

    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.contact-switch ul:after, .language-switch ul:after {
            width: 0;
            top: -2px;
            right: 50%;
            height: calc(var(--item-size) + 4px);
        }

.contact-switch:hover ul li:first-child, .language-switch:hover ul li:first-child {
                    transform: translateX(-120%);
                }

.contact-switch:hover ul li:last-child, .language-switch:hover ul li:last-child {
                }

.contact-switch:hover ul:after, .language-switch:hover ul:after {
                width: calc(var(--item-size) + 4px);
            }

.contact-switch li.switch-mail a {
                background-image: url("../img/icon_mail.svg");
            }

.contact-switch li.switch-phone a {
                background-image: url("../img/icon_phone.svg");
            }

@media screen and (max-width: 869px) {

.contact-switch {
        --item-size: 48px
}

        .contact-switch ul {
            width: auto;
            display: flex;
            flex-direction: row;
            gap: 20px;
        }
        .contact-switch li {
            position: relative;
        }

            .contact-switch li i {
                opacity: 1;
            }
            .contact-switch li a {
                background-color: transparent;
                outline: 2px solid transparent;
                font-size: 1.6rem;
                color: var(--color-grey);
            }

            .contact-switch li.active a {
                outline: 0px solid var(--color-accent);
                background-color: var(--color-accent);
                color: #fff;
                font-variation-settings: "wght" 500;
            }
    }

.language-switch li.lang-de a {
                text-transform: uppercase;
            }

.language-switch li.lang-en a {
            }

.language-switch li a {
            text-transform: uppercase;
            font-variation-settings: "wght" 500;
            font-size: 1.2rem;
        }

.language-switch:hover ul li:first-child {
                    transform: translateX(120%);
                }

.language-switch ul:after {
            right: unset;
            left: 50%;
        }

.language-switch ul:hover li.active a {
            background-color: var(--color-accent);
            outline: 2px solid var(--color-accent) !important;
            color: #fff;
        }

@media screen and (max-width: 869px) {
        .language-switch ul {
            width: auto;
            display: flex;
            flex-direction: row;
            gap: 5px;
            background-color: #000;
            border-radius: 50px;
        }
        .language-switch li {
            position: relative;
        }

            .language-switch li a {
                background-color: transparent;
                outline: 2px solid transparent;
                font-size: 1.6rem;
                color: var(--color-grey);
            }

            .language-switch li.active a {
                outline: 0px solid var(--color-cloud);
                background-color: var(--color-cloud);
                color: var(--color-text);
                font-variation-settings: "wght" 500;
            }
    }

.site-footer {
    --layout-padding: 20px;
    padding-bottom: var(--layout-padding);
    padding-top: 40px;
    font-size: 1.6rem;
}

@media screen and (max-width: 869px) {

.site-footer {
        padding: 0px
}
    }

.site-footer p {
        font-size: 1.6rem;
    }

.site-footer p strong {
            font-size: 2rem;
            letter-spacing: 0.01em;
        }

.site-footer p {

        -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.site-footer .cta {
        min-height: 60px;

        padding: 0;
        margin: 0;

        text-transform: uppercase;

        font-size: 1.6rem;

        transform: translateY(-10px);
    }

.site-footer .cta:hover {
            margin-left: -14px;
            text-decoration: none;
        }

.site-footer .cta:hover i {
                width: 40px;
                height: 40px;
            }

.site-footer .cta i {
            width: 8px;
            height: 8px;
        }

@media screen and (max-width: 869px) {

.site-footer .cta {
            --active-color: var(--color-accent) !important;
            --idle-color: var(--color-accent) !important;

            font-size: 1.8rem
    }
            .site-footer .cta t i {
                width: 32px;
                height: 32px;
                border-color: var(--active-color);
                background-color: transparent;
            }
        }

.site-footer a {
        text-decoration: none;
    }

.site-footer a:hover {
            text-decoration: underline;
        }

.site-footer hr {
        width: 100%;
        border-top: 1px solid var(--fg-color);
        opacity: 0.4;
    }

.site-footer .blocks {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

.site-footer .blocks .cta-container {
            margin-top: auto;
        }

@media screen and (max-width: 869px) {

.site-footer .layout {
            --fg-color: var(--color-cloud) !important;
            --bg-color: var(--color-black) !important
    }
        }

#memory{

    padding: var(--layout-padding) calc(var(--gutter) * 0.5);
    padding-top: 0;
}

.services-block {
    width: 100%;
}

.memory-grid {
    margin: 0 auto;
    max-width: var(--max-width);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    position: relative;
}

@media screen and (max-width: 869px) {

.memory-grid {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 10px
}
    }

.memory-card {
    position: relative;
    z-index: 1;
    opacity: 0;

    aspect-ratio: 1/1;
}

@media screen and (max-width: 869px) {

.memory-card {
        aspect-ratio: unset
}
    }

.memory-card {

    overflow: visible;

    --bg-color: #fff;
    --fg-color: var(--color-blue);

    cursor: zoom-in;
}

/* Aktive Karte */

.memory-card.active {
        z-index: 100;

        --bg-color: var(--color-blue) !important;
        --fg-color: #fff;
        cursor: zoom-out;
    }

.memory-card.active .memory-toggle-btn {
            transform: rotate(0deg);
        }

.memory-card:hover .memory-toggle-btn {
            color: var(--color-accent);
            border-color: var(--color-accent);
        }

.memory-card.covered {
        z-index: 0;
    }

.memory-card .images-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 99;
    }

.memory-card .card-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;

        background-color: #fff;
        visibility: hidden;

        pointer-events: auto;

        border-radius: 2px;
        overflow: hidden;
    }

.memory-card .card-image img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

.memory-card .card-image video {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

.memory-card .card-image.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;

    position: relative;
    z-index: 200;

    background-color: var(--bg-color);
    color: var(--fg-color);

    padding: 28px 20px;
    border-radius: 2px;

    transition: all 0.2s ease-in-out;
}

.card-content h3 {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;

        font-variation-settings: "wght" 400;
    }

@media screen and (max-width: 869px) {

.card-content h3 {
            flex-direction: row;
            text-align: left;
            gap: 10px;
            max-width: 240px
    }
        }

.card-content h3:before {
            content: "";
            display: block;
            width: 128px;
            height: 96px;
            margin-bottom: 20px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

@media screen and (max-width: 869px) {

.card-content h3:before {
                height: 64px;
                width: 128px;
                background-position: center right;
                margin: 0px
        }
            }

.card-content .service-item-description {
        text-align: center;
        font-size: 1.6rem;
        line-height: 1.4em;
        font-variation-settings: "wght" 300;
    }

@media screen and (max-width: 869px) {

.card-content .service-item-description {
            font-size: 1.8rem
    }
        }

@media screen and (max-width: 869px) {

.card-content {
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 12px
}
    }

.memory-toggle-btn {
    padding: 0.25em 0.7em;

    background-color: transparent;
    color: var(--color-cloud);
    border-color: var(--color-cloud);
    border-radius: 40px;
    transform: rotate(-45deg);

    margin-top: auto;

    transition: all 0.2s ease-in-out;
}

.memory-toggle-btn:hover {
        background-color: transparent;
    }

.toggle-btn:hover {
    background-color: #45a049;
}

#services-visuelle-identitaet .card-content h3:before {
        background-image: url("../img/illu_identity.svg");
    }

#services-visuelle-identitaet.active .card-content h3:before {
            background-image: url("../img/illu_identity_a.svg");
        }

#services-reports-publikationen .card-content h3:before {
        background-image: url("../img/illu_reports.svg");
    }

#services-reports-publikationen.active .card-content h3:before {
            background-image: url("../img/illu_reports_a.svg");
        }

#services-infografiken-illustrationen .card-content h3:before {
        background-image: url("../img/illu_infographics.svg");
    }

#services-infografiken-illustrationen.active .card-content h3:before {
            background-image: url("../img/illu_infographics_a.svg");
        }

#services-grafik-layout .card-content h3:before {
        background-image: url("../img/illu_layout.svg");
    }

#services-grafik-layout.active .card-content h3:before {
            background-image: url("../img/illu_layout_a.svg");
        }

#services-web-social .card-content h3:before {
        background-image: url("../img/illu_web.svg");
    }

#services-web-social.active .card-content h3:before {
            background-image: url("../img/illu_web_a.svg");
        }

#services-events-und-messeauftritte .card-content h3:before {
        background-image: url("../img/illu_events.svg");
    }

#services-events-und-messeauftritte.active .card-content h3:before {
            background-image: url("../img/illu_events_a.svg");
        }

#strengths-bar {
    padding-bottom: 30px;
}

.strengths-block h2 {
        margin-bottom: 30px;
        margin-top: -30px;
    }

@media screen and (max-width: 869px) {

.strengths-block h2 {
            margin-top: 0px;
            margin-bottom: 12px
    }
        }

.strengths-block .strength-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

@media screen and (max-width: 869px) {

.strengths-block .strength-grid {
            display: flex;
            flex-direction: column
    }
        }

.strengths-block .strength-card {
        position: relative;
    }

.strengths-block .strength-card h3 {
            margin-top: 20px;
            text-align: center;
            text-transform: none;
        }

.strengths-block .strength-title {
    }

.strengths-block .images-container {
        position: relative;
        border-radius: 2px;
        overflow: hidden;
    }

.strengths-block .svg-image {
        position: absolute;
        z-index: 44;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

/* 
 * Layout-Komponente für Inhaltsblöcke
 * Verwendet CSS-Variablen für Anpassungen
 */

.layout {
    /* Standardwerte für CSS-Variablen */

    --bg-color: #fff;
    --fg-color: var(--color-text);

    /* Grundlegende Stile */
    width: 100%;
    margin: 0;
    padding: var(--layout-padding) var(--gutter);
    background-color: var(--bg-color);

    overflow: hidden;
}

.layout p, .layout h1, .layout h2, .layout h3, .layout h4 {
        color: var(--fg-color);
    }

.layout .grid, .layout .projects-grid {
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;
    }

/* Breitenvarianten */

.layout.width-narrow .grid, .layout.width-narrow .projects-grid {
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;
    }

.layout.width-wide .grid, .layout.width-wide .projects-grid {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

.layout.width-full {
    padding: var(--layout-padding) 0px;
}

.layout.width-full .grid, .layout.width-full .projects-grid {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

.no-pad-top {
    padding-top: 0;
}

#hero-home .column:first-child {
        z-index: 10;
    }

@media screen and (max-width: 1079px) {

#hero-home {
        padding-top: 0
}
        #hero-home .column:first-child {
            order: 2;
        }
        #hero-home .column:last-child {
            order: 1;
        }
    }

/* Gallery Block Styles */

.swiper {
    margin: 0;
}

.swiper .swiper-button-prev, .swiper .swiper-button-next {
        opacity: 0.5;
        transition: all 0.2s ease-in-out;

        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center center;

        position: absolute;
        left: unset;
        top: unset;
        bottom: 0px !important;
        right: 0px !important;

        margin-top: 0 !important;

        height: 40px;
        width: 40px;
    }

.swiper .swiper-button-prev:hover, .swiper .swiper-button-next:hover {
            opacity: 1;
        }

.swiper .swiper-button-prev.swiper-button-disabled, .swiper .swiper-button-next.swiper-button-disabled {
            opacity: 0.1;
        }

@media screen and (max-width: 869px){

.swiper .swiper-button-prev, .swiper .swiper-button-next {
            right: var(--gutter) !important
    }
        }

.swiper .swiper-button-prev {
        background-image: url("../img/icon_arrow_prev.svg");
        justify-content: flex-start;
    }

.swiper .swiper-button-next {
        background-image: url("../img/icon_arrow_next.svg");
        justify-content: flex-end;
    }

@media screen and (max-width: 869px) {

.column.media {
        width: calc(100vw - 2 * var(--gutter));
        order: 1
}
    }

@media screen and (max-width: 869px) {

.column.description {
        order: 2;
        padding: var(--gutter);
        padding-top: 0
}
    }

.gallery-container {
    margin-bottom: 2rem;
    overflow: hidden;
    width: 133%;
}

@media screen and (max-width: 869px) {

.gallery-container {
        width: 100%
}
    }

.swiper-wrapper {
}

/* Hauptgalerie-Styles */

.gallery-main {
    margin-bottom: 10px;
    width: 75%;

    padding: 0 5px;

    --swiper-navigation-size: 100px;
}

@media screen and (max-width: 869px) {

.gallery-main {
        width: 100%;
        padding: 0
}
    }

.gallery-main .swiper-button-prev, .gallery-main .swiper-button-next {
    }

.gallery-main .swiper-button-prev {
        transform: translate(-100%, 20%);
    }

.gallery-main .swiper-button-next {
        transform: translate(0%, 20%);
    }

.gallery-main .swiper-slide {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-main .swiper-slide figure {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        gap: 10px;

        max-width: 100%;
        max-height: 60vh;
    }

.gallery-main .swiper-slide figure img, .gallery-main .swiper-slide figure video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid var(--color-cloud);
        }

@media screen and (max-width: 869px){

.gallery-main .swiper-slide figure img, .gallery-main .swiper-slide figure video {
                border: none
        }
                
            }

@media screen and (max-width: 869px){

.gallery-main .swiper-slide figure figcaption{
               padding-left: var(--gutter)
        }
                
            }

/* Thumbnail-Galerie-Styles */

.gallery-thumbs {
    width: 75%;
    overflow: visible;
    position: relative;

    padding: 5px;
}

@media screen and (max-width: 869px) {

.gallery-thumbs {
        display: none
}
    }

.gallery-thumbs {

    --swiper-navigation-size: 30px;
}

.gallery-thumbs .swiper-button-prev, .gallery-thumbs .swiper-button-next {
        height: 100%;
        margin-top: 0;
        top: 0;

        transition: all 0.2s ease-in-out;

        background-image: none;
    }

.gallery-thumbs .swiper-button-next {
        right: 0px;
        width: 20%;
        transform: translateX(100%);
        z-index: 30;
    }

/* Höher als der Gradient (z-index: 22) */

.gallery-thumbs .swiper-button-next.swiper-button-disabled {
            opacity: 0;
        }

.gallery-thumbs .swiper-button-prev {
        transform: translateX(-100%);
    }

.gallery-thumbs:after {
        content: "";
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        transform: translateX(100%);
        width: 35%;
        height: 100%;
        background-color: pink;

        background: linear-gradient(
            90deg,
            rgb(from var(--bg-color) r g b / 0) 0%,
            rgb(from var(--bg-color) r g b / 1) 75%
        );
        z-index: 22;
    }

.gallery-thumbs .swiper-slide {
    cursor: pointer;
    /* height: 140px; */
    overflow: hidden;
    border: 1px solid var(--color-cloud);
    box-sizing: border-box;
}

.gallery-thumbs .swiper-slide img, .gallery-thumbs .swiper-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gallery-thumbs .swiper-slide {

    opacity: 0.25;
}

.gallery-thumbs .swiper-slide.swiper-slide-visible {
        opacity: 1;
    }

.gallery-thumbs .swiper-slide-thumb-active {
    border: 1px solid var(--color-accent);
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}

/* Beschriftung */

.gallery-caption {
    margin-top: 1rem;
    font-style: italic;
    text-align: center;
}

/**
 * Project Popup Styles
 * Styling für das Projekt-Popup-Overlay
 */

/* Overlay */

.project-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 28, 42, 0.95);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    overflow-y: auto;
    padding: 2rem;

    -webkit-backdrop-filter: blur(10px) saturate(0%);
    backdrop-filter: blur(10px) saturate(0%);
}

@media screen and (max-width: 869px) {

.project-popup-overlay {
        width: 100%;
        height: 100dvh;

        --gutter: 16px;
        padding-bottom: 30px
}
    }

.project-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Container */

.project-popup-container {
    /* position: relative; */
    height: 100%;

    pointer-events: none;
}

.project-popup-overlay.active .project-popup-container {
    transform: translateY(0);
}

.project-popup-content-wrapper {
    max-width: calc(var(--max-width) + 2 * var(--gutter));
    margin: 0 auto;
    height: 100%;
}

@media screen and (max-width: 869px) {

.project-popup-content-wrapper {
        width: 100%
}
    }

.project-popup-content-wrapper article.project {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.project-popup-content-wrapper .solo {
        height: 100%;
    }

@media screen and (max-width: 869px){

.project-popup-content-wrapper .solo {
            display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center
    }}

.project-popup-content-wrapper .solo figure {
            height: 100%;
            width: 100%;
            max-height: 95vh;
        }

@media screen and (max-width: 869px){

.project-popup-content-wrapper .solo figure {
                height: auto
        }
                
            }

.project-popup-content-wrapper .solo figure img {
                height: 100%;
                width: 100%;
                object-fit: contain;
            }

.project-popup-content-wrapper .solo figcaption {
            color: var(--color-fog);
            text-align: center;
        }

.project-popup-content-wrapper .grid, .project-popup-content-wrapper .projects-grid {
        padding: var(--gutter);
        border-radius: 4px;
        pointer-events: all;
        overflow: hidden;

        background-color: var(--color-fog);
        box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.38);
    }

@media screen and (max-width: 869px) {

.project-popup-content-wrapper .grid, .project-popup-content-wrapper .projects-grid {
            max-width: 100%;
            max-height: 85dvh;
            overflow-y: scroll;
            gap: 0;
            display: flex;
            flex-direction: column;
             padding: 0
    }
        }

.project-popup-content-wrapper .gallery-container {
        margin: 0;
    }

.project-popup-content-wrapper .gallery-container .swiper-button-next {
            width: var(--gutter);
        }

/* Loader */

.project-popup-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 1.2rem;
    color: #666;
}

/* Content */

.project-popup-content {
    padding: 2rem;
}

/* Header */

.project-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.project-popup-header h2 {
    margin: 0;
    font-size: 1.8rem;
}

/* Close Button */

.close-popup {
    position: absolute;
    z-index: 300;
    top: 20px;
    right: 20px;
    padding: 0;

    width: var(--gutter);
    height: var(--gutter);

    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;

    color: var(--color-cloud);
    transition: color 0.2s ease;
}

.close-popup:hover {
    color: #fff;
}

.project-description {
    margin-bottom: 2rem;
}

.project-description h1 {
        display: flex;
        flex-direction: column;
    }

.project-gallery figure {
    margin: 0;
}

.project-gallery img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.project-gallery figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.project-meta {
    margin-top: auto;
    font-size: 1.6rem;
}

.project-link a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.project-link a:hover {
    background-color: #000;
}

/* Prevent body scrolling when popup is open */

body.popup-open {
    overflow: hidden;
}

/* Error state */

.project-popup-error {
    padding: 2rem;
    text-align: center;
    color: #d9534f;
}

.projects-grid {
    width: 100%;
    max-width: 100%;
}

.projects-grid.columns-1 {
        --grid-columns: 1;
    }

.projects-grid.columns-2 {
        --grid-columns: 2;
    }

.projects-grid.columns-3 {
        --grid-columns: 3;
    }

.projects-grid.columns-4 {
        --grid-columns: 4;
    }

@media screen and (max-width: 869px) {

.projects-grid {
        --grid-columns: 1 !important;
        grid-gap: 40px
}
    }

.projects-grid .grid-item {
        margin-bottom: var(--grid-gap);

        color: var(--fg-color);
    }

.projects-grid .grid-item figure {
            aspect-ratio: 16/9;
            width: 100%;
            height: 100%;
        }

.projects-grid .grid-item figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: var(--focus);
        }

.projects-grid .grid-item figcaption {
            margin-top: 10px;
            font-variation-settings: "wght" 200;
        }

.projects-grid .grid-item figcaption strong {
                font-variation-settings: "wght" 200;
            }

.projects-grid .grid-item.story figcaption:before {
                content: "";
                width: 1em;
                height: 0.8em;
                display: inline-block;
                background-image: url("../img/icon_arrow_green.svg");
                background-position: left center;
                background-repeat: no-repeat;
            }

/* Benutzerdefinierter Image-Block */

.custom-image-block {
    width: 100%;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

.custom-image-block .responsive-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.custom-image-block .image-link:hover .responsive-image {
    transform: scale(1.03);
}

.custom-image-block .image-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--fg-color);
    font-variation-settings: "wght" 200;
    line-height: 1.4;
}

/* Verschiedene Bildverhältnisse */

.custom-image-block[data-ratio="16/9"] .responsive-image {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.custom-image-block[data-ratio="4/3"] .responsive-image {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.custom-image-block[data-ratio="1/1"] .responsive-image {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.custom-image-block[data-ratio="3/4"] .responsive-image {
    aspect-ratio: 3/4;
    object-fit: cover;
}

.custom-image-block[data-ratio="9/16"] .responsive-image {
    aspect-ratio: 9/16;
    object-fit: cover;
}

#facts-1 {
    padding-bottom: 0;
}

#facts-1 svg text {
            font-family: var(--font-copy);
        }

#facts-2 {
    padding-top: 0;
}

/* Styling für den illu-grid (Navigation) */

#heads {
    padding-bottom: 0;
    position: relative;
}

@media screen and (max-width: 869px) {

#heads {
        padding: 0
}
    }

#illu-grid {
    padding-bottom: var(--gutter);
}

#illu-grid .swiper {
        overflow: visible;
        width: 100%;
        margin-bottom: 20px;

        max-width: var(--max-width);
        margin: 0 auto;
    }

#illu-grid h3 {
        font-size: 1.6rem;
        margin-bottom: 0;
        line-height: 1.3em;
    }

#illu-grid p {
        font-size: 1.4rem;
        line-height: 1.3em;
    }

@media screen and (max-width: 869px) {

#illu-grid {

        position: absolute;
        top: 70px;
        right: 0;
        z-index: 20
}
        #illu-grid h3, #illu-grid p {
            display: none;
        }
    }

#illu-grid .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: center;
        overflow: visible;
    }

@media screen and (max-width: 869px) {

#illu-grid .swiper-wrapper {
            flex-direction: column;
            flex-wrap: wrap
    }
        }

#illu-grid .swiper-slide {
        width: auto !important;

        flex: 1;
        text-align: center;
        cursor: pointer;
        padding: 10px;
    }

#illu-grid .swiper-slide:nth-child(1) {
            --rotation: -4deg;
            --depth: -60px;
        }

#illu-grid .swiper-slide:nth-child(2) {
            --rotation: -2deg;
            --depth: -45px;
        }

#illu-grid .swiper-slide:nth-child(3) {
            --rotation: 3deg;
            --depth: -50px;
        }

#illu-grid .swiper-slide:nth-child(4) {
            --rotation: 5deg;
            --depth: -40px;
        }

#illu-grid .swiper-slide:nth-child(5) {
            --rotation: -6deg;
            --depth: -50px;
        }

#illu-grid .swiper-slide:nth-child(6) {
            --rotation: -2deg;
            --depth: -60px;
        }

#illu-grid .swiper-slide:nth-child(7) {
            --rotation: 3deg;
            --depth: -45px;
        }

#illu-grid .swiper-slide:nth-child(8) {
            --rotation: -4deg;
            --depth: -65px;
        }

@media screen and (max-width: 869px) {

#illu-grid .swiper-slide {
            display: none;
            opacity: 0;
            transition: all 0.4s ease-in-out
    }
        }

@media screen and (max-width: 869px) {

#illu-grid .swiper-slide.swiper-slide-thumb-active {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                opacity: 1
        }
            }

#illu-grid .swiper-slide figure {
            position: relative;
            display: grid;

            justify-items: center;

            grid-template-areas: "overlap";
            margin-bottom: 20px;

            transform: scale(1);
            transition: all 0.2s ease-in-out;
            transform-origin: 50% 90%;
        }

#illu-grid .swiper-slide figure svg {
                max-width: 96px;

                grid-area: overlap;
                transition: opacity 0.2s ease-in-out;
            }

#illu-grid .swiper-slide figure svg:first-child {
                    opacity: 1;
                    z-index: 1;
                }

#illu-grid .swiper-slide figure svg:last-child {
                    opacity: 0;
                    z-index: 2;
                }

@media screen and (max-width: 869px) {

#illu-grid .swiper-slide figure {
                width: 24vw
        }
            }

#illu-grid .swiper-slide p {
            min-height: 3em;
            margin-bottom: 0;
        }

#illu-grid .swiper-slide .illu-label {
            position: absolute;
            top: 0px;
            left: 50%;

            opacity: 0;
            transform: translate(-50%, -80px) rotate(var(--rotation));
            transform-origin: center;
            transition: all 0.2s ease;
            transition-delay: 0s;
        }

#illu-grid .swiper-slide .illu-label p {
                display: block;
                background-color: #436d94;
                color: #fff;
                margin: 0;
                padding: 0.2em 0.75em;
                /*   white-space: nowrap; */

                min-height: 0;

                max-width: 200px;

                border-radius: 3px;
            }

#illu-grid .swiper-slide .illu-label p:after {
                    display: block;
                    content: "";
                    position: absolute;
                    bottom: -15px;
                    left: 0px;
                    height: 16px;
                    width: 100%;
                    background-image: url("../img/tipdown.svg");
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: top center;
                }

@media screen and (max-width: 869px) {

#illu-grid .swiper-slide .illu-label p:after {
                        background-image: url("../img/tipdown_w.svg")
                }
                    }

@media screen and (max-width: 869px) {

#illu-grid .swiper-slide .illu-label p {
                    color: #436d94;
                    background-color: #fff
            }
                }

#illu-grid .swiper-slide:hover, #illu-grid .swiper-slide.swiper-slide-thumb-active {
            color: var(--color-accent);
            transition: all 0.3s ease;
        }

#illu-grid .swiper-slide:hover figure svg:first-child, #illu-grid .swiper-slide.swiper-slide-thumb-active figure svg:first-child {
                        opacity: 0;
                    }

#illu-grid .swiper-slide:hover figure svg:last-child, #illu-grid .swiper-slide.swiper-slide-thumb-active figure svg:last-child {
                        opacity: 1;
                    }

#illu-grid .swiper-slide:hover .illu-label, #illu-grid .swiper-slide.swiper-slide-thumb-active .illu-label {
                opacity: 1;
                transform: translate(-50%, var(--depth)) rotate(var(--rotation));
                transition-delay: 1s;
            }

#illu-grid .swiper-slide.swiper-slide-thumb-active figure {
                transform: scale(1.2);
            }

/* Styling für den heads-grid (Hauptslider) */

#heads-grid {
    background-color: var(--bg-color);
    color: var(--fg-color);
}

#heads-grid .swiper {
        --max-width: 800px;

        overflow: visible;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
    }

#heads-grid .swiper-slide.head-item {
        width: 100%; /* Jeder Slide nimmt die volle Breite ein */
        height: 100%;
        height: auto !important; /* Erlaubt die Anpassung an den höchsten Inhalt */
        max-width: var(--max-width);
        padding: var(--gutter);

        transition: all 0.3s ease-in-out;
        background-color: var(--color-blue);

        margin: 0 auto;
        display: flex;
        gap: 20px;
        flex-direction: row;
    }

@media screen and (max-width: 869px) {

#heads-grid .swiper-slide.head-item {
            flex-direction: column;
            padding-bottom: 40px
    }
        }

#heads-grid .swiper-slide.head-item.swiper-slide-active {
            background-color: var(--color-accent);
        }

#heads-grid .swiper-slide.head-item.swiper-slide-active figure {
                background-color: var(--color-blue);
            }

#heads-grid .swiper-slide.head-item.swiper-slide-prev .profile, #heads-grid .swiper-slide.head-item.swiper-slide-next .profile {
                opacity: 0.4;
            }

#heads-grid .swiper-slide.head-item figure {
            background-color: var(--color-accent);
            aspect-ratio: 1/1;
            width: 256px;
        }

#heads-grid .swiper-slide.head-item figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: var(--focus);
            }

#heads-grid .swiper-slide.head-item .profile {
            padding: 20px;
            flex: 1;
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
            color: #fff;
        }

@media screen and (max-width: 869px) {

#heads-grid .swiper-slide.head-item .profile {
                padding: 0
        }
            }

#heads-grid .swiper-wrapper {
        position: relative;
        align-items: stretch;
        justify-content: stretch;
    }

#heads-grid .swiper-button-prev, #heads-grid .swiper-button-next {
        opacity: 0.5;
        transition: all 0.2s ease-in-out;

        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center center;

        position: absolute;
        left: unset;
        top: unset;
        bottom: 0px !important;
        right: -40px !important;

        margin-top: 0 !important;

        height: 40px;
        width: 40px;
    }

#heads-grid .swiper-button-prev:hover, #heads-grid .swiper-button-next:hover {
            opacity: 1;
        }

#heads-grid .swiper-button-prev.swiper-button-disabled, #heads-grid .swiper-button-next.swiper-button-disabled {
            opacity: 0.1;
        }

#heads-grid .swiper-button-prev {
        background-image: url("../img/icon_arrow_prev.svg");
        justify-content: flex-start;

        left: -40px !important;
        bottom: 0px !important;
    }

@media screen and (max-width: 869px) {

#heads-grid .swiper-button-prev {
            left: 16px !important;
            bottom: 6px !important;
            background-image: url("../img/icon_arrow_prev_w.svg")
    }
        }

#heads-grid .swiper-button-next {
        background-image: url("../img/icon_arrow_next.svg");
        justify-content: flex-end;
    }

@media screen and (max-width: 869px) {

#heads-grid .swiper-button-next {
            right: 16px !important;
            bottom: 6px !important;
            background-image: url("../img/icon_arrow_next_w.svg")
    }
        }

#heads-grid .cta {
        color: #fff;

        background-image: none;
    }

#heads-grid .cta:before {
            background-color: #fff;
        }

body {
}

article.default-page {
}