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

/* Base styles */

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

:root {
  /* Colors */

  --color-text: #353535;
  --color-page: #fff;

  --color-clay: #c37677;
  --color-haze: #78818c;
  --color-ink: #353535;
  --color-skin: #eedbd4;
  --color-tan: #c29281;
  --color-chalk: #ebebeb;
  --color-moss: #c1c6b3;
  --color-yolk: #edb956;
  --color-dlib: #117bca;
  --color-dlib-dark: #06528c;
  --color-action: #f07c70;

  --color-accent: #f07c70;

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

  /* Layout */

  --header-height: 100px;
  --radius: 2px;
  --max-width: 1200px;
  --box-padding: 24px;

  --icon-size: 56px;
}

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

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

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

:root {
    --gutter: 16px;
    --layout-padding: 16px;
    --spacer: 16px;
    --header-height: 64px;
    --box-padding: 16px;
    --icon-size: 42px
}
  }

/* 
 * 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: "UbuntuSans";
  src: url("../fonts/UbuntuSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-headlines:
    "UbuntuSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-copy:
    "UbuntuSans", -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;
  hyphens: none;

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

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

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

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.2rem;
}

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

h1 {
    font-size: 2.8rem
}
  }

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

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

h2 {
    font-size: 2.4rem
}
  }

h3 {
  text-transform: none;
  font-size: 1.8rem;

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

@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" 400;

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

p a {
    text-decoration: underline;
  }

a {
}

a:hover {
}

strong, b {
  font-variation-settings: "wght" 600;
}

em, i {
  font-style: italic;
}

blockquote {
  margin: var(--layout-padding) auto;
  padding: var(--layout-padding);

  font-variation-settings: "wght" 200;

  line-height: 1.2em;
  opacity: 0.8;
  font-size: 3rem;

  text-align: center;

  color: var(--fg-color);

  max-width: 840px;
}

blockquote em {
    font-size: 1.6rem;
  }

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

blockquote {

  background-image: url("../img/ornament.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

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;
}

.spacer {
  --height: 20px;
  height: var(--height);
}

/* Lists */

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

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: 0.25em;
}

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: 16px; /* Standardabstand zwischen Spalten */
}

/* 12-column-grid */

.grid, .service-grid, .team-profile {
  display: grid;

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

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

.grid, .service-grid, .team-profile {
    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: 1279px) {

.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 */

.button.align-left {
    text-align: left;
  }

.button.align-center {
    text-align: center;
  }

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

.button.icon-align-left a {
      flex-direction: row;
      padding-left: 0.5em;
    }

.button.icon-align-right a {
      flex-direction: row-reverse;
      padding-right: 0.5em;
    }

.button a {
    background-color: var(--idle-color);
    color: var(--text-color);

    display: inline-flex;

    gap: 0px;
    align-items: center;
    justify-content: center;
    padding: 0.25em 1.2em;
    font-weight: bold;
    text-transform: none;
    font-size: 1.5rem;
    letter-spacing: 0.05em;

    border-radius: 42px;

    margin: 0.75em 0;

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

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

.button a {
      font-size: 1.8rem
  }
    }

.button a:hover {
      background-color: var(--active-color);
      color: var(--text-color);
      text-decoration: none;
    }

.button a:hover i {
        transform: translateX(2px);
        opacity: 1;
      }

.button a:hover .button-icon {
        opacity: 1;
      }

.button a .button-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      opacity: var(--icon-opacity);
    }

.button a .button-icon svg {
        width: 32px;
        height: 32px;
      }

.button a .button-icon svg path, .button a .button-icon svg rect, .button a .button-icon svg circle {
          fill: var(--icon-color);
        }

.button a .button-icon {

      transition: all 0.2s ease-out;
}

.button.contact-phone, .button.contact-mail, .button.contact-location {
    margin: 0 !important;
  }

.button.contact-phone a, .button.contact-mail a, .button.contact-location a {
      padding: 0;
      margin: 0.25em 0;
      gap: 4px;
    }

.button.contact-phone span, .button.contact-mail span, .button.contact-location span {
      order: 2;
    }

.button.contact-phone i, .button.contact-mail i, .button.contact-location i {
      width: 32px;
      height: 32px;
      order: 1;
    }

.button.contact-phone:hover i, .button.contact-mail:hover i, .button.contact-location:hover i {
        transform: scale(1.1);
        opacity: 1;
      }

.button.contact-phone span {
      font-size: 2rem;
    }

.button.contact-phone i {
      background-image: url("../icons/icon-phone.svg");
    }

.button.contact-mail i {
      background-image: url("../icons/icon-mail.svg");
    }

.button.contact-location i {
      background-image: url("../icons/icon-location.svg");
    }

details.accordion-details {
  --element-padding: 16px;
  margin-bottom: var(--element-padding);

  border-radius: var(--radius);

  font-size: 2rem;

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

details.accordion-details h1, details.accordion-details h2, details.accordion-details h3, details.accordion-details h4, details.accordion-details p {
    color: var(--color-ink);
  }

details.accordion-details {

  background-color: #fff;
}

details.accordion-details .accordion-text {
    padding: var(--element-padding);
  }

details.accordion-details:first-of-type {
    margin-top: 30px;
  }

details.accordion-details:last-of-type {
    margin-bottom: 30px;
  }

summary.accordion-summary {
  /* Pin the custom marker to the container */
  position: relative;
  /* Register summary as an anchor element */
  anchor-name: --summary;
  padding: var(--element-padding);
  padding-right: 40px;

  cursor: pointer;
  color: var(--color-clay);

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

summary.accordion-summary::marker {
    content: "";
  }

summary.accordion-summary::after {
    /* Custom marker dimensions */
    content: "";
    display: block;
    height: 32px;
    width: 32px;

    opacity: 0.5;

    background-image: url("../icons/caret.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    transition: all 0.4s ease-in-out;

    /* Anchor the shape to the summary */
    position: absolute;
    top: var(--element-padding);
    right: var(--element-padding);

    transform: rotate(0deg);
  }

summary.accordion-summary:hover::after {
      opacity: 1;
    }

/* Rotate the line when open */

details[open] summary::after {
  transform: rotate(180deg);
  opacity: 1;
}

details table {
  border: 1px solid #dedede;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 0px;
}

details table tr {
    font-size: 1.8rem;
    color: var(--color-ink);
  }

details table tr td, details table tr th {
      padding: 5px 20px 5px 0;
    }

details table tr th {
      text-align: left;
      font-variation-settings: "wght" 500;
      text-align: right;
    }

details table tr th:last-child {
      text-align: left;
      color: var(--color-accent);
    }

details table tr td {
      width: 50%;
      position: relative;
      text-align: right;
      z-index: 1;
    }

details table tr td:last-child {
      text-align: left;
      padding-left: calc(var(--right) / 2 + 10px);
      color: var(--color-accent);
    }

details table tr td:last-child:before, details table tr td:last-child:after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        display: block;

        height: 10px;
        border-radius: 10px;
      }

details table tr td:last-child:before {
        left: 0px;

        width: var(--right);

        background-color: var(--color-skin);
      }

details table tr td:last-child:after {
        left: var(--left);

        width: calc(var(--right) - var(--left));

        background-color: var(--color-accent);
      }

details table:nth-of-type(1) tr:nth-of-type(1) {
      --left: 5%;
      --right: 15%;
    }

details table:nth-of-type(1) tr:nth-of-type(2) {
      --left: 0%;
      --right: 35%;
    }

details table:nth-of-type(1) tr:nth-of-type(3) {
      --left: 0%;
      --right: 6%;
    }

details table:nth-of-type(1) tr:nth-of-type(4) {
      --left: 15%;
      --right: 35%;
    }

details table:nth-of-type(1) tr:nth-of-type(5) {
      --left: 0%;
      --right: 2%;
    }

details table:nth-of-type(1) tr:nth-of-type(6) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(1) tr:nth-of-type(7) {
      --left: 1%;
      --right: 10%;
    }

details table:nth-of-type(2) tr:nth-of-type(1) {
      --left: 1%;
      --right: 20%;
    }

details table:nth-of-type(2) tr:nth-of-type(2) {
      --left: 5%;
      --right: 25%;
    }

details table:nth-of-type(2) tr:nth-of-type(3) {
      --left: 1%;
      --right: 3%;
    }

details table:nth-of-type(2) tr:nth-of-type(4) {
      --left: 2%;
      --right: 3%;
    }

details table:nth-of-type(2) tr:nth-of-type(5) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(2) tr:nth-of-type(6) {
      --left: 0%;
      --right: 6%;
    }

details table:nth-of-type(2) tr:nth-of-type(7) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(2) tr:nth-of-type(8) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(2) tr:nth-of-type(9) {
      --left: 5%;
      --right: 10%;
    }

details table:nth-of-type(2) tr:nth-of-type(10) {
      --left: 5%;
      --right: 10%;
    }

details table:nth-of-type(2) tr:nth-of-type(11) {
      --left: 3%;
      --right: 21%;
    }

details table:nth-of-type(3) tr:nth-of-type(1) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(3) tr:nth-of-type(2) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(3) tr:nth-of-type(3) {
      --left: 0%;
      --right: 0.5%;
    }

details table:nth-of-type(3) tr:nth-of-type(4) {
      --left: 0%;
      --right: 0.5%;
    }

details table:nth-of-type(3) tr:nth-of-type(5) {
      --left: 0%;
      --right: 3%;
    }

details table:nth-of-type(3) tr:nth-of-type(6) {
      --left: 0%;
      --right: 1%;
    }

details table:nth-of-type(3) tr:nth-of-type(7) {
      --left: 5%;
      --right: 30%;
    }

details table:nth-of-type(3) tr:nth-of-type(8) {
      --left: 0%;
      --right: 1%;
    }

figure {
  width: var(--width);
}

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;
    }

figure img {
    height: auto;
  }

/* 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 {
  min-height: var(--header-height);

  padding: 0 var(--gutter);
}

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

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

header.header {

  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 500;
  width: 100%;
}

header.header .wrapper {
    position: relative;
    max-width: calc(var(--max-width) + 2 * var(--gutter));
    margin: 0 auto;
    height: 100%;

    background-color: var(--color-clay);
    padding: 0 var(--gutter);

    border-radius: 0 0 var(--radius) var(--radius);

    /*
    box-shadow:
      rgba(0, 0, 0, 0.02) 0px 1px 1px,
      rgba(0, 0, 0, 0.02) 0px 2px 2px,
      rgba(0, 0, 0, 0.02) 0px 4px 4px,
      rgba(0, 0, 0, 0.02) 0px 8px 8px,
      rgba(0, 0, 0, 0.02) 0px 16px 16px;
*/

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

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

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

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

body.nav-open {
  overflow: hidden;
}

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

  height: var(--header-height);

  /* margin-left: -110px; */

  position: relative;
  z-index: 200;
}

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

.logo {
    margin-left: 0
}
  }

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

.logo {
    width: 240px;
    height: var(--header-height)
}
  }

.logo {

  font-size: 0;
}

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

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

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

.site-footer {
    padding: 0px
}
  }

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

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

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

.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 {
      font-size: 1.8rem
  }
      .site-footer .cta t i {
        width: 32px;
        height: 32px;
        border-color: var(--active-color);
        background-color: transparent;
      }
    }

.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;
    }

.site-footer #branding-footer {
    padding-bottom: 0;
  }

.site-footer #branding-footer figure {
      width: 240px;
    }

.site-footer #branding-footer figure svg {
        width: 100%;
        height: auto;
      }

.site-footer #post-footer {
    padding-top: 0;
  }

.site-footer #post-footer .column:last-child .blocks {
        align-items: flex-end;
        justify-content: flex-end;
      }

.site-footer #post-footer .column:last-child p {
        text-align: right;
      }

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

main > .layout:first-child {
  padding-top: calc(var(--layout-padding) + var(--header-height));
}

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

  --bg-color: var(--color-chalk);
  --fg-color: var(--color-text);

  background-position: var(--focus);
  background-repeat: no-repeat;
  background-size: cover;

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

  overflow: hidden;

  scroll-margin-top: var(--header-height);
}

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

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

.layout.no-padding {
    padding: 0 !important;
  }

/* Breitenvarianten */

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

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

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

.layout.width-full .grid, .layout.width-full .service-grid, .layout.width-full .team-profile {
    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: 1279px) {

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

.service-page {
  position: relative;
}

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

.service-page {
    display: flex;
    flex-direction: column
}
  }

.service-page main .layout .column {
        --span: 8 !important;
      }

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

.service-page main .layout .column {
          width: 100%
      }
        }

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

.service-page main {
      order: 2
  }
    }

.service-page aside {
    position: fixed;
    z-index: 400;
    top: calc(var(--gutter) + var(--header-height));
    padding-left: var(--gutter);

    width: calc(var(--max-width) / 12 * 4);
    right: calc((100vw - var(--max-width)) / 2);

    transition: opacity 0.3s ease-in;
    opacity: 1;
  }

.service-page aside figure {
      border-radius: var(--radius) var(--radius) 0 0;
      overflow: hidden;
      aspect-ratio: 4/3;
    }

.service-page aside figure img {
        object-fit: cover;
        object-position: var(--focus);
        width: 100%;
        height: 100%;
      }

body.fin .service-page aside {
      opacity: 0;
    }

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

.service-page aside {
      padding-left: var(--gutter);
      padding-right: var(--gutter);
      order: 1;
      position: relative;
      right: unset;
      width: 100%;
      margin-bottom: var(--gutter)
  }

      .service-page aside .heads-block {
        position: fixed;
        z-index: 400;
        bottom: 0px;
        left: 0px;
        width: 100%;
      }
          .service-page aside .heads-block .block-header:after {
            content: "";
            display: block;
            height: var(--icon-size);
            width: var(--icon-size);
            opacity: 0.5;
            background-image: url(../icons/caret.svg);
            background-repeat: no-repeat;
            background-size: 75%;
            background-position: center;
            transition: all 0.4s ease-in-out;
            position: absolute;
            top: 0px;
            right: 12px;
            transform: rotate(0deg);
          }

        .service-page aside .heads-block .head-item .profile h3 {
          font-size: 2.2rem;
        }

        .service-page aside .heads-block .team-members {
          display: none;
        }
          .service-page aside .heads-block.open .team-members {
            display: block;
          }

          .service-page aside .heads-block.open .block-header:after {
            transform: rotate(180deg);
          }
    }

.service-grid {
  width: 100%;
  max-width: 100%;

  --fg-color: var(--color-clay);
  --bg-color: #fff;
  --grid-columns: 3;
}

.service-grid.services-grid-2 {
    --grid-columns: 2;
  }

.service-grid.services-grid-3 {
    --grid-columns: 3;
  }

.service-grid.services-grid-4 {
    --grid-columns: 4;
  }

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

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

.service-grid .service-card {
    color: var(--fg-color);
    width: 100%;

    background-color: var(--bg-color);
    border-radius: var(--radius);
    overflow: hidden;

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

.service-grid .service-card a {
      display: flex;
      flex-direction: column;
      width: 100%;

      border-radius: 0px;
    }

.service-grid .service-card a:hover .card-content h3 {
            color: var(--color-ink);
          }

.service-grid .service-card figure {
    }

.service-grid .service-card .img-wrapper {
      aspect-ratio: 16/9;
      width: 100%;
      height: 100%;
    }

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

.service-grid .service-card figcaption {
      display: none;
    }

.service-grid .service-card .card-content {
      padding: 12px;
      position: relative;
    }

.service-grid .service-card .card-content .service-title {
        margin: 0;
        font-variation-settings: "wght" 500;
        color: var(--color-clay);
        line-height: 1.1em;
        font-size: 1.8rem;
        padding-right: 50px; /* Platz für das Icon */
      }

.service-grid .service-card .card-content .box-icon {
        position: absolute;
        top: 8px;
        right: 8px;

        display: none;
      }

.service-grid .service-card .card-content .box-icon svg {
          width: 64px;
          height: auto;
        }

.service-grid .service-card .card-content .box-icon svg path, .service-grid .service-card .card-content .box-icon svg circle, .service-grid .service-card .card-content .box-icon svg ellipse {
            fill: var(--icon-color, var(--color-clay));
          }

.service-grid .service-card .card-content .box-icon svg line {
            stroke-color: var(--icon-color, var(--color-clay));
          }

.service-grid .service-card .card-content .service-description {
        margin-top: 8px;
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--fg-color);
      }

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

.service-grid {
    gap: 12px
}
      .service-grid .service-card .card-image {
        display: none;
      }

      .service-grid .service-card .card-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;

        padding: 0px;
      }

        .service-grid .service-card .card-content .service-title {
          order: 2;
          font-size: 2.2rem;
        }
        .service-grid .service-card .card-content .box-icon {
          position: relative;
          order: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          top: unset;
          right: unset;
          bottom: unset;
          left: unset;
        }

          .service-grid .service-card .card-content .box-icon svg {
            width: 52px;
            height: 52px;
          }

        .service-grid .service-card .card-content:after {
          order: 3;
          margin-left: auto;
          flex-shrink: 0;
          content: "";
          display: block;
          height: var(--icon-size);
          width: var(--icon-size);
          opacity: 0.5;
          background-image: url(../icons/caret.svg);
          background-repeat: no-repeat;
          background-size: 75%;
          background-position: center;
          transition: all 0.4s ease-in-out;

          transform: rotate(-90deg);
        }
  }

/* 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;
}

.heads-block {
  background-color: var(--bg-color);
  color: var(--fg-color);
  transition: all 0.3s ease;

  --gutter: 12px;
}

.heads-block h1, .heads-block h2, .heads-block h3, .heads-block h4, .heads-block p, .heads-block a {
    margin: 0;
  }

.heads-block .block-header {
    padding: var(--gutter);
  }

.heads-block .head-item {
    background-color: #fff;
    color: var(--color-ink);

    padding: var(--gutter);

    display: flex;
    flex-direction: row;
    gap: var(--gutter);

    border-bottom: 2px solid var(--color-chalk);
  }

.heads-block .head-item.disabled {
      pointer-events: none;
    }

.heads-block .head-item.disabled figure, .heads-block .head-item.disabled .profile {
        opacity: 0.5;
        filter: saturate(0);
      }

.heads-block .head-item:last-child {
      border-bottom: none;
    }

.heads-block .head-item figure {
      width: 72px;
      height: 72px;
      border-radius: 42px;
      overflow: hidden;
    }

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

.heads-block .head-item .profile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 5px;
    }

.heads-block .head-item .profile h1, .heads-block .head-item .profile h2, .heads-block .head-item .profile h3, .heads-block .head-item .profile h4 {
        font-size: 1.6rem;
        font-variation-settings: "wght" 500;
      }

.heads-block .head-item .profile p {
        font-size: 1.6rem;
      }

.heads-block .head-item .profile .button {
        --idle-color: var(--color-dlib);
        --active-color: var(--color-dlib-dark);
        --text-color: #fff;
      }

.site-footer .heads-block .team-members {
      display: flex;
      flex-direction: row;
      gap: var(--gutter);
    }

@media screen and (min-width: 1281px) {
      .site-footer .heads-block .head-item {
        flex-direction: column;
        padding: 0;

        border-radius: var(--radius);
        overflow: hidden;

        border: none;
      }

        .site-footer .heads-block .head-item.disabled {
          pointer-events: all;
        }
          .site-footer .heads-block .head-item.disabled figure, .site-footer .heads-block .head-item.disabled .profile {
            opacity: 1;
            filter: saturate(1);
          }

        .site-footer .heads-block .head-item figure {
          width: 100%;
          height: auto;
          aspect-ratio: 4/3;
        }

          .site-footer .heads-block .head-item figure a {
            display: block;
            aspect-ratio: 4/3;
          }

          .site-footer .heads-block .head-item figure {

          border-radius: 0;
  }

        .site-footer .heads-block .head-item .profile {
          padding: 12px;

          align-items: center;
        }

          .site-footer .heads-block .head-item .profile h1, .site-footer .heads-block .head-item .profile h2, .site-footer .heads-block .head-item .profile h3, .site-footer .heads-block .head-item .profile h4, .site-footer .heads-block .head-item .profile p {
            color: var(--color-ink);
            text-align: center;
          }
    }

@media screen and (max-width: 1279px) {
    .site-footer .box {
      padding: 0;
    }
        .site-footer .box .box-content div, .site-footer .box .box-content table, .site-footer .box .box-content hr {
          display: block;
        }

        .site-footer .box .box-content h2 {
          margin-bottom: 16px;
          margin-left: 0;
        }

          .site-footer .box .box-content h2:after {
            display: none;
          }
      .site-footer #footer-docs .column:nth-child(1) {
        order: 2;
      }
      .site-footer #footer-docs .column:nth-child(2) {
        order: 1;
      }
      .site-footer .heads-block .profile h3 {
        color: var(--color-ink);
        font-size: 2.2rem;
      }

      .site-footer .heads-block .team-members {
        flex-direction: column;
      }
  }

.team-profile {
  scroll-margin-top: calc(var(--header-height) + var(--gutter));
  gap: 0;

  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gutter);
}

.team-profile .bio {
    --spacer: 32px;

    padding: var(--spacer);
    padding-bottom: 0;
    grid-column: span 8;

    background-color: #fff;

    display: flex;
    flex-direction: column;
  }

.team-profile .bio ul {
      margin: 0;
      margin-left: 12px;
      margin-top: var(--spacer);
      padding: 0;
      flex: 1;
      list-style-type: none;

      border-left: 3px solid var(--bg-color);
    }

.team-profile .bio ul li {
        margin-top: -4px;
        margin-left: -10px;
        margin-bottom: 0.5em;
        display: flex;
        flex-direction: row;
        gap: 10px;
      }

.team-profile .bio ul li:before {
          content: "";
          display: flex;
          margin-top: 4px;

          flex-shrink: 0;
          width: 16px;
          height: 16px;
          background-color: var(--bg-color);
          border-radius: 32px;
        }

.team-profile .bio ul li a {
          text-decoration: none;
          font-variation-settings: "wght" 500;
        }

.team-profile .profile {
    grid-column: span 4;

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

.team-profile .profile figure {
      width: 100%;
      aspect-ratio: 4/3;
    }

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

.team-profile .profile .meta {
      padding: var(--spacer);
    }

.team-profile .profile .meta ul li {
          margin-bottom: 0.25em;
        }

.team-profile .profile .meta ul li a {
            text-decoration: none;
            font-variation-settings: "wght" 500;
          }

#mfas section.team-members {
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
  }

@media screen and (min-width: 1281px) {
      #mfas section.team-members .head-item {
        flex-direction: column;
        padding: 0;

        border-radius: var(--radius);
        overflow: hidden;

        border: none;
      }

        #mfas section.team-members .head-item.disabled {
          pointer-events: all;
        }
          #mfas section.team-members .head-item.disabled figure, #mfas section.team-members .head-item.disabled .profile {
            opacity: 1;
            filter: saturate(1);
          }

        #mfas section.team-members .head-item figure {
          width: 100%;
          height: auto;
          aspect-ratio: 4/3;
        }

          #mfas section.team-members .head-item figure a {
            display: block;
            aspect-ratio: 4/3;
          }

          #mfas section.team-members .head-item figure {

          border-radius: 0;
  }

        #mfas section.team-members .head-item .profile {
          padding: 12px;

          align-items: center;
        }

          #mfas section.team-members .head-item .profile h1, #mfas section.team-members .head-item .profile h2, #mfas section.team-members .head-item .profile h3, #mfas section.team-members .head-item .profile h4, #mfas section.team-members .head-item .profile p {
            color: var(--color-ink);
            text-align: center;
          }
    }

.box {
  --icon-color: #fff;

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

  padding: var(--box-padding);
  border-radius: var(--radius);

  position: relative;
  transition: all 0.3s ease;
}

.box .box-icon {
    position: absolute;
    top: 6px;
    right: 10px;
  }

.box .box-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

.box svg {
    width: var(--icon-size);

    height: auto;
  }

.box svg path, .box svg rect {
      fill: var(--icon-color);
    }

.box .alert {
    margin: calc(var(--box-padding) * -1);
    margin-top: var(--box-padding);

    padding: var(--box-padding);

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

.box .alert p {
      line-height: 1.2em;
      margin: 0;
    }

.box h1, .box h2, .box h3, .box h4 {
  }

.box h2 {
    font-size: 2.2rem;
    word-break: normal;
    hyphens: auto;

    margin-bottom: 20px;
    padding-right: var(--icon-size);
  }

.box hr {
    width: 100%;
    height: 0px;
    border: none;
    border-top: 1px solid var(--fg-color);
    margin: 1em 0;
    opacity: 0.4;
  }

@media screen and (max-width: 1279px) {
    .box .box-icon {
      right: unset;
      left: 10px;
    }
      .box .box-content div, .box .box-content table, .box .box-content hr {
        display: none;
      }

      .box .box-content h2 {
        display: block;
        margin: 0;
        margin-left: var(--icon-size);
      }

        .box .box-content h2:after {
          content: "";
          display: block;
          height: var(--icon-size);
          width: var(--icon-size);
          opacity: 0.5;
          background-image: url(../icons/caret.svg);
          background-repeat: no-repeat;
          background-size: 75%;
          background-position: center;
          transition: all 0.4s ease-in-out;
          position: absolute;
          top: 6px;
          right: 10px;
          transform: rotate(0deg);
        }
      .box#appointments .box-content h2:after {
        background-image: url(../icons/caret_w.svg);
      }
        .box.open .box-content div, .box.open .box-content table, .box.open .box-content hr {
          display: block;
        }

        .box.open .box-content h2 {
          margin-bottom: 16px;
        }

          .box.open .box-content h2:after {
            transform: rotate(180deg);
          }
  }

#hero {
}

#hero-boxes {
  position: relative;
  z-index: 100;
  overflow: visible;
}

#hero-boxes .box {
    margin-top: -100px;
  }

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

#hero-boxes .box {
      margin-top: -28px;
      margin-bottom: 28px
  }
    }

#hero-boxes .column {
    display: flex;
  }

#hero-boxes .column .blocks {
      display: flex;
      flex: 1;
    }

#hero-boxes .column .box {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

#hero-boxes .button {
    margin-top: auto;
  }

@media screen and (max-width: 1279px) {
    #hero-boxes .column:nth-child(1) {
      order: 3;
    }
    #hero-boxes .column:nth-child(2) {
      order: 2;
    }
    #hero-boxes .column:nth-child(3) {
      order: 1;
    }
  }

#opening-hours table {
    width: 100%;
    margin-bottom: 16px;
  }

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

#opening-hours table td {
        border-bottom: 1px solid var(--color-chalk)
    }
      }

#opening-hours table td:first-child {
      text-align: left;
      font-variation-settings: "wght" 600;
      padding: 0;

      font-size: 1.8rem;
    }

#opening-hours table td:first-child:before {
        display: none;
      }

#opening-hours table td {
      position: relative;
      padding: 0 4px;
      font-size: 1.6rem;
      text-align: center;
    }

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

#opening-hours table td {
        padding: 4px 10px;
        font-size: 2rem
    }

        #opening-hours table td strong {
          font-variation-settings: "wght" 400;
        }
      }

#opening-hours table td strong:before {
      content: "";
      position: absolute;
      mix-blend-mode: multiply;
      top: 0px;
      left: 0px;
      z-index: 0;
      width: 100%;
      height: 100%;
      border-radius: 50px;
      background-color: var(--color-chalk);
    }

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

#opening-hours table td strong:before {
        width: auto;
        height: auto;
        top: 4px;
        left: 4px;
        bottom: 4px;
        right: 4px
    }
      }

#opening-hours p {
    background-color: var(--color-yolk);
    margin-left: calc(var(--box-padding) * -1);
    margin-right: calc(var(--box-padding) * -1);
    margin-bottom: calc(var(--box-padding) * -1);

    padding: var(--box-padding);
  }

/* 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;
        }

#multi-menu {
  margin-left: auto;

  display: flex;
  flex-direction: row;
  align-items: stretch;
}

#multi-menu .main-menu {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 0;
    padding: 0;
  }

#multi-menu .main-menu li {
      margin: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

@media screen and (min-width: 1281px) {
          #multi-menu .main-menu li:hover section {
            display: block;
          }
        }

#multi-menu .main-menu li:hover a {
          color: #fff;
        }

#multi-menu .main-menu li .text p {
        margin: 0;
      }

#multi-menu .main-menu li a, #multi-menu .main-menu li p {
        text-transform: uppercase;
        font-variation-settings: "wght" 500;
        font-size: 1.8rem;
        text-decoration: none;
        padding: 10px;

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

#multi-menu .main-menu li a[aria-current="page"], #multi-menu .main-menu li p[aria-current="page"] {
          color: #fff;
        }

#multi-menu .main-menu li .box {
        position: absolute;
        top: var(--header-height);
        left: 0px;
        width: 100%;
        width: 30%;
      }

#multi-menu .main-menu li section {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0px;

        width: 100%;

        background-color: var(--color-clay);
        padding: var(--gutter);

        background-image: url("../img/ornament.svg");
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: -40% 400%;

        box-shadow:
          rgba(0, 0, 0, 0.07) 0px 1px 1px,
          rgba(0, 0, 0, 0.07) 0px 2px 2px,
          rgba(0, 0, 0, 0.07) 0px 4px 4px,
          rgba(0, 0, 0, 0.07) 0px 8px 8px,
          rgba(0, 0, 0, 0.07) 0px 16px 16px;
        overflow: visible;
        border-radius: 0 0 var(--radius) var(--radius);
      }

#multi-menu .main-menu li section a {
          text-transform: none;
        }

#multi-menu .main-menu li section #services-heading {
          position: absolute;
          top: var(--gutter);
          left: var(--gutter);
          padding-left: 10px;
          z-index: 400;
          width: 100%;
          color: #fff;
          font-size: 2rem;
          height: var(--gutter);
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }

#multi-menu .main-menu li section .service-grid {
          margin-left: auto;
          width: 66%;
        }

#multi-menu .main-menu li section .service-card {
          --bg-color: var(--color-skin);
          --fg-color: var(--color-clay);
        }

#multi-menu .main-menu li section .service-card:hover {
            --bg-color: #fff;
          }

#multi-menu .main-menu li section .service-card:hover figure.card-image {
              opacity: 1;

              z-index: 200;
            }

#multi-menu .main-menu li section .service-card a {
            height: 100%;
          }

#multi-menu .main-menu li section .card-content {
          height: 100%;
          display: flex;

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

#multi-menu .main-menu li section .card-content .box-icon {
            display: flex;
            position: relative;
            top: unset;
            right: unset;
            order: 1;

            width: 84px;
            height: 84px;
          }

#multi-menu .main-menu li section .card-content .box-icon svg {
              width: 100%;
              height: auto;
            }

#multi-menu .main-menu li section .card-content .box-icon svg path, #multi-menu .main-menu li section .card-content .box-icon svg circle, #multi-menu .main-menu li section .card-content .box-icon svg ellipse {
                fill: var(--icon-color, var(--fg-color));
                stroke: var(--icon-color, var(--fg-color));
              }

#multi-menu .main-menu li section .card-content .box-icon svg line {
                stroke: var(--icon-color, var(--fg-color));
              }

#multi-menu .main-menu li section .card-content .service-title {
            order: 2;
            text-align: center;
            line-height: 1.2em;
            font-size: 1.6rem;
            color: var(--fg-color);

            padding: 0;
          }

#multi-menu .main-menu li section figure.card-image {
          display: flex;
          opacity: 0;
          transition: all 0.2s ease-in-out;

          pointer-events: none;

          flex-direction: column;

          position: absolute;
          bottom: var(--gutter);
          top: var(--gutter);
          left: var(--gutter);
          width: 30%;

          border-radius: var(--radius);
          overflow: hidden;
        }

#multi-menu .main-menu li section figure.card-image .img-wrapper {
            flex: 1;
            min-width: 0; /* VERY IMPORTANT */
            overflow: hidden; /* sometimes needed */
          }

#multi-menu .main-menu li section figure.card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* or cover */
            object-position: var(--focus);
          }

#multi-menu .main-menu li section figure.card-image figcaption {
            background-color: #fff;
            padding: 12px;
            display: flex;
            flex-direction: column;
            flex: 0 0 auto;
          }

/* size to content */

#multi-menu .main-menu li section figure.card-image figcaption .service-title {
              color: var(--fg-color);
            }

#multi-menu .main-menu li section .service-description {
          line-height: 1.2em;
          font-variation-settings: "wght" 400;
          color: var(--color-ink);
        }

#multi-menu .main-menu #menu-toggle {
    }

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

#multi-menu .main-menu {
      flex-direction: column;

      z-index: 50;

      flex-direction: column;

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

      z-index: 100;

      display: none;

      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0
  }

      body.nav-open #multi-menu .main-menu {
        display: flex;
        display: flex;
        position: fixed;
        margin: 0;
        min-height: 100dvh;
        background-color: var(--color-clay);
        color: #fff;
      }
        #multi-menu .main-menu li p, #multi-menu .main-menu li a {
          text-transform: uppercase;
          font-weight: 400;
          font-size: 3rem;
          font-family: var(--font-headlines);

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

          #multi-menu .main-menu li p[aria-current="page"], #multi-menu .main-menu li a[aria-current="page"] {
            color: #fff;
          }
    }

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

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

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

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

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

#multi-menu #menu-toggle i.burger svg path, #multi-menu #menu-toggle i.burger svg rect, #multi-menu #menu-toggle i.burger svg line {
          fill: var(--color-chalk);
          stroke: var(--color-chalk);
        }

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

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

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

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

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

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

/* Styling für den Contacts-Block */

.contacts-block {
  margin: 2rem 0;
}

.contacts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.contact-content {
  display: flex;
  flex-direction: column;
}

.contact-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: var(--color-text-muted);
}

.contact-value {
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.contact-value:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.contacts-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Responsive Anpassungen */

@media (min-width: 768px) {
  .contacts-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .contact-item {
    flex: 1 1 calc(50% - 1rem);
    min-width: 200px;
  }
}

@media (min-width: 1024px) {
  .contact-item {
    flex: 1 1 calc(33.333% - 1.5rem);
  }
}

body {
  background-color: var(--color-chalk);
}

article.default-page {
}