@charset "UTF-8";
    /************************************************************************************
*
* Theme Name: 	WP Theme für Segelmacherei Schmidhauser
* Theme URI:	https://www.pfirsichblau.ch
* Description: 	Webseite mit WordPress
* Author:		PFIRSICHBLAU die Werbeagentur GmbH
* Author URI:	https://www.pfirsichblau.ch
* Version:		1.0
* License:      PFIRSICHBLAU die Werbeagentur GmbH
* License URI:  https://www.pfirsichblau.ch
*
************************************************************************************/
    /************************************************************************************
*
* RESET
*
************************************************************************************/
    
    *,
    *::before,
    *::after {
        list-style: none outside none;
        border: none;
        margin: 0;
        padding: 0;
        outline: none;
        text-decoration: none;
        box-sizing: border-box;
    }
    
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }
    
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }
    
    html,
    body {
        position: relative;
        background: #fff;
        scroll-behavior: smooth;
    }
    /* Set core root defaults */
    
    html:focus-within {
        scroll-behavior: smooth;
    }
    /* Set core body defaults */
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto, "Oxygen",
 "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        text-rendering: optimizeSpeed;
        line-height: 1.5;
        font-feature-settings: normal;
        font-feature-settings: 'kern'1;
        font-kerning: normal;
        font-variant-ligatures: none;
        font-display: block;
        -moz-osx-font-smoothing: grayscale;
        -webkit-overflow-scrolling: touch;
        font-size: 100%;
        height: 100%;
        overflow-x: hidden;
    }
    
    a:not([class]) {
        text-decoration-skip-ink: auto;
    }
    /* Make images easier to work with */
    
    img,
    picture {
        max-width: 100%;
        display: block;
    }
    /* Inherit fonts for inputs and buttons */
    
    input,
    button,
    textarea,
    select {
        font: inherit;
    }
    
    button {
        overflow: visible;
        background: none;
    }
    
    button,
    select {
        text-transform: none
    }
    
    img {
        max-width: 100%;
        height: auto;
        display: block;
        border: 0;
        margin: 0;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        user-select: none;
    }
    
    a {
        margin: 0;
        outline: none;
        text-decoration: none;
        cursor: pointer;
    }
    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    
    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    /************************************************************************************
*
* ROOT
*
************************************************************************************/
    
     :root {
        --card-margin: 1em;
        --widget-margin: 1rem 0;
        --dimmed: hsla(0, 0, 100%, . 5);
        --gutter: 5rem 1rem;
        --border: 1px solid var(--dimmed);
        --spacing: calc(var(--gutter) * 3);
        --gradient: linear-gradient(135deg, var(--start), var(--end));
        --space: 5em 1em;
        --grid-min: 280px;
        --width: 100%;
        --content-width: 75em;
        --inner-width: 63.75em;
        --min: 280px;
        --gap: 1em;
    }
    
     :root {
        --background-1: #F2F2F2;
        --background-2: #0D0D0D;
        --background-3: #D9D9D9;
        --background-4: #A6A4A5;
        --background-5: #595959;
        --color-1: #0D0D0D;
        --color-2: #F2F2F2;
        --color-3: #D9D9D9;
        --color-4: #A6A4A5;
        --color-5: #A6A4A5;
        --border-1: #D9D9D9;
        --border-2: #A6A4A5;
    }
    /************************************************************************************
*
* BASE
*
************************************************************************************/
    
    .layout {
        position: relative;
        padding: 8em 0 0 0;
        overflow: hidden;
    }
    
    .skip-nav-link {
        background: #000000;
        color: #fff;
        padding: .5em 1em;
        border-radius: 0 0 .25em .25em;
        position: absolute;
        left: 1em;
        transform: translateY(-120%);
        transition: transform 325ms ease-in;
        cursor: pointer;
    }
    
    .skip-nav-link:focus {
        transform: translateY(0);
    }
    /************************************************************************************
*
* FONTS
*
************************************************************************************/
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-style: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.2;
    }
    
    p,
    ul {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1.6;
    }
    
    strong {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
    }
    /*h1{
    font-size: clamp(2rem, 8vw + 1rem, 4rem);
    line-height:1;
}

h2{
    font-size: clamp(1rem, 6vw + 1rem, 3rem);
    line-height:1;
}
*/
    
    .has-margin {
        margin: 9em 0
    }
    /************************************************************************************
*
* OFF-CANVAS
*
************************************************************************************/
    
    .menu-toggler {
        position: fixed;
        z-index: 40;
        top: 1.25em;
        right: 1em;
        height: 44px;
        width: 44px;
        background: #0D0D0D;
        overflow: hidden;
        white-space: nowrap;
        visibility: hidden
    }
    
    .menu-toggler--title {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: .875rem;
        line-height: 1.2;
        color: #000000;
        right: 5em;
        top: 2.5em;
        position: fixed;
        z-index: 60;
    }
    
    .menu-toggler--btn span,
    .menu-toggler--btn span::before,
    .menu-toggler--btn span::after {
        position: absolute;
        height: 2px;
        width: 32px;
        background: #fff;
    }
    
    .menu-toggler--btn span {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        transition: background .3s;
    }
    
    .menu-toggler--btn span::before,
    .menu-toggler--btn span::after {
        content: '';
        top: 0;
        left: 0;
        transition: background .3s, transform .3s;
    }
    
    .menu-toggler--btn span::before {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    
    .menu-toggler--btn span::after {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    
    .nav-open .menu-toggler--btn span {
        background: transparent;
    }
    
    .nav-open .menu-toggler--btn span::before,
    .nav-open .menu-toggler--btn span::after {
        background: #fff;
    }
    
    .nav-open .menu-toggler--btn span::before {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    .nav-open .menu-toggler--btn span::after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .nav-open .offCanvas-container {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    .offCanvas-container {
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        max-width: 100vw;
        padding: 1rem 0;
        background: #fff;
        overflow: auto;
        transform: translateZ(0);
        transform: translateY(-100%);
        transition: transform .5s cubic-bezier(.07, .23, .34, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .offCanvas-menu ul {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.5rem;
        line-height: 1.2;
        font-weight: 400;
        color: #000000;
        text-align: left
    }
    
    .offCanvas-menu li {
        display: list-item;
        padding: .5rem 0
    }
    
    .offCanvas-menu li a {
        color: #000000
    }
    
    .offCanvas-icon {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        margin: 2em 0 0 0;
        min-width: 50%;
    }
    
    .offCanvas-icon img {
        width: 40px;
        height: 40px;
        display: block;
    }
    /************************************************************************************
*
* HEADER
*
************************************************************************************/
    
    .header-container {
        width: 100%;
        position: relative;
        background: #fff;
    }
    
    .header-stoerer {
        position: relative;
        align-self: flex-start;
        width: 120px;
        transition: all .5s cubic-bezier(.17, .47, .63, 1.06);
    }
    
    .footer-stoerer {
        display: none;
        margin-bottom: 30px;
    }
    
    .header-stoerer img {
        position: absolute;
        width: 120px;
        max-width: none;
        transition: all .5s cubic-bezier(.17, .47, .63, 1.06);
    }
    
    .header-active-shrink .header-stoerer img {
        width: 80px;
        top: 0;
        transform: translateY(-10px);
    }
    
    .header-active-shrink .header-stoerer {
        width: 80px;
    }
    
    .header-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 8em;
        z-index: 10;
        transition: height .5s linear;
    }
    
    .header-container--inner {
        --inner-width: 70rem;
        
        width:var(--inner-width);
        max-width: 95%;
        position: relative;
        margin-inline: auto;
        padding: 1em;
    }
    
    .header-logo {
        width: 168px;
        max-width: 100%;
        height: 66px;
        margin: 1em 0;
        display: block;
        background-image: url('wp_mediathek/logo/segelmacherei_schmidhauser.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    ul.header-navigation {
        display: flex;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        color: #000000;
    }
    
    ul.header-navigation li {
        margin: 0 0 0 2em;
    }
    
    ul.header-navigation li.menu-item a {
        color: #000000;
    }
    
    ul.header-navigation li.current_page_item a,
    ul.header-navigation li.current-page-ancestor a {
        position: relative
    }
    
    ul.header-navigation li.current_page_item a::after,
    ul.header-navigation li.current-page-ancestor a::after {
        content: '';
        width: 18px;
        height: 3px;
        background: #000000;
        position: absolute;
        display: inline-block;
        left: calc(50% - 9px);
        bottom: -.3em;
    }
    
    .header-active .header-active--inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header-active-shrink {
        height: 5em;
        box-shadow: 0 0 6px rgba(29, 29, 27, .2);
    }
    
    .header-active.header-active-shrink .header-logo {
        width: 127px;
        max-width: 100%;
        height: 50px;
        margin: 0;
        display: block;
    }
    /* Transitions and class for reduced height */
    
    .header-active .header-logo,
    .header-active .header-nav {
        transition: all .5s cubic-bezier(.17, .47, .63, 1.06);
    }
    
    .header-active .header-logo,
    .header-active .header-nav {
        animation: height .5s cubic-bezier(0.28, 0.32, 0.29, 0.94) .5s;
    }
    
    .link {
        position: relative;
    }
    
    .link::before,
    .link::after {
        position: absolute;
        width: 100%;
        height: 1px;
        background: currentColor;
        top: 100%;
        left: 0;
        pointer-events: none;
    }
    
    .link::before {
        content: '';
        /* show by default */
    }
    
    .link-hover::before {
        transform-origin: 50% 100%;
        transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
        clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
    }
    
    .link-hover:hover::before {
        transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
        clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
    }
    
    .link-hover span {
        display: inline-block;
        transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    }
    
    .link-hover:hover span {
        transform: translate3d(0, -2px, 0);
    }
    /************************************************************************************
*
* HEADER NAVIGATION SUB
*
************************************************************************************/
    
    ul.header-navigation li>ul.sub-menu {
        height: min-content;
        min-width: 260px;
        background: #fff;
        display: none;
        flex-direction: column;
        position: absolute;
        left: -1em;
        top: auto;
    }
    
    ul.header-navigation ul.sub-menu li {
        margin: 0 0 0 0;
    }
    
    ul.sub-menu li a {
        color: #000;
        width: 100%;
        margin: 0;
        padding: .75em;
        white-space: nowrap;
        display: block
    }
    
    ul.sub-menu li a:hover {
        color: #fff;
        background: #000;
    }
    
    .menu-item-has-children:hover .sub-menu {
        display: block;
    }
    
    .menu-item-has-children .sub-menu li.current_page_item a {
        color: #747474
    }
    
    ul.header-navigation ul.sub-menu li.current_page_item.has-children a::after {
        content: '';
        display: block;
        background: transparent;
    }
    
    ul.header-navigation ul.sub-menu li.has-children a::after,
    ul.header-navigation ul.sub-menu li.current_page_item.has-children a::after {
        content: '';
        display: block;
        background: transparent;
    }
    /************************************************************************************
*
* MAIN LAYOUT
*
************************************************************************************/
    
    .main-layout {
        width: 100%;
        position: relative
    }
    
    .section-container {
        position: relative;
    }
    
    .header-gap {
        margin: 6em 1em 9em 1em;
    }
    
    .spacing-top {
        margin: 6em 0 0 0;
    }
    
    .section-container--header {
        width: fit-content;
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    
    .section-container--inner {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin-inline: auto;
        padding: max(5vh, 2.5em) 1em;
        ;
    }
    
    .section-fitcontent {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin-inline: auto;
    }
    
    .section-container--contents {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        height: 600px;
        margin-inline: auto;
    }
    
    .section-container--width {
        width: 100%;
    }
    
    .section-container--offset01 {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        height: 540px;
        position: relative;
        margin: 2em auto;
        padding: 0 1em;
        display: flex;
        justify-content: flex-start
    }
    
    .section-container--offset02 {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        height: 540px;
        position: relative;
        margin: 2em auto;
        ;
        padding: 0 1em;
        display: flex;
        justify-content: flex-end
    }
    
    .section-container--offset03 {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        height: auto;
        position: relative;
        margin: 2em auto;
        padding: 0 1em;
        display: flex;
        justify-content: flex-start
    }
    
    .header-content {
        width: calc(50% + 10em);
        padding: 0
    }
    
    .header-content--headline h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .header-content--headline h2 {
        font-size: 1.75rem;
        line-height: 2rem;
        color: #000;
    }
    
    .header-content--wysiwyg p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        text-align: start;
        margin: 1em 0
    }
    
    .header-content--wysiwyg ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        margin: 1em 0;
        padding: 1em
    }
    
    .header-content--wysiwyg li {
        display: list-item;
        list-style-type: disc;
        list-style-position: outside;
        margin: .25em 0
    }
    
    .placeholder-content--background01 {
        position: absolute;
        height: 600px;
        right: 0;
        left: calc(50% - 9em);
        overflow: hidden
    }
    
    .placeholder-content--background03 {
        position: absolute;
        height: 800px;
        right: 0;
        left: calc(60% - 0em);
        overflow: hidden
    }
    
    .header-link--group {
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }
    
    .header-link--group a.custom-link {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        display: inline-block;
        position: relative;
        margin: .25em 0
    }
    
    button .button-teaser {
        min-width: 220px;
        display: inline-block;
        margin: 1em 0;
        padding: .5em 1em;
        border: 1px solid #000000;
        border-radius: 1.25em;
        font-size: 1rem;
        font-weight: 400;
        color: #000000;
        text-align: left;
        background-image: url(website-files/svg/arrow-right.svg);
        background-repeat: no-repeat;
        background-position: 96%;
    }
    
    button .button-teaser:hover {
        color: #fff;
        background: #000000;
        background-image: url(website-files/svg/arrow-right-inverted.svg);
        background-repeat: no-repeat;
        background-position: 96%;
    }
    
    .header-link--group a.custom-link:hover {
        text-decoration: underline
    }
    
    .header-link--group a.custom-link::after {
        content: '';
        width: 24px;
        height: 24px;
        display: block;
        background-image: url("website-files/svg/arrow-right.svg");
        background-repeat: no-repeat;
        position: absolute;
        left: 180px;
        right: auto;
        top: 6px;
    }
    
    .placeholder-content--background02 {
        position: absolute;
        height: 600px;
        left: 0;
        right: calc(50% - 9em);
        overflow: hidden
    }
    /*
.opener-cards {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
}

.opener-cards--card {
    display: flex;
    flex-direction: column;
}

.opener-cards--card  > * + * {
    margin-top: 1rem;
}

.card-footer{
    margin-top: auto;
}

.card-content h3{
    font-size:1.5rem;
    font-weight:700;
    color:#000000;
}

.card-content p{
    font-size:1rem;
    line-height:1.5rem;
    font-weight:400;
    color:#000000;
    margin:1em 0
}
*/
    
    .opener-cards {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1em;
    }
    
    .opener-cards--card {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 1em;
    }
    
    @media screen and (min-width: 20em) {
        .opener-cards--card>*+* {
            margin-bottom: 1rem;
        }
    }
    
    @media screen and (min-width: 40em) {
        .opener-cards {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -1em;
        }
        .opener-cards--card {
            width: 50%;
        }
        .opener-cards--card>*+* {
            margin-bottom: 1em;
        }
    }
    
    @media screen and (min-width: 75em) {
        .opener-cards--card {
            width: 33.333%;
        }
    }
    
    .card-header {
        margin: 0 0 .5em 0;
    }
    
    .card-header img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center
    }
    
    .card-content h2 {
        font-size: 1.75rem;
        line-height: 2rem;
        font-weight: 700;
        color: #000000;
    }
    
    .card-content h3 {
        font-size: 1.75rem;
        line-height: 2rem;
        font-weight: 700;
        color: #000000;
    }
    
    .card-content--label h4 {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        margin: .5em 0
    }
    
    .card-content p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        margin: 1em 0
    }
    
    .card-footer {
        margin-top: auto;
    }
    
    .card-footer--link {
        min-width: 220px;
        display: inline-block;
        margin: 1em 0 0 0;
        padding: .5em 1em;
        border: 1px solid #000000;
        border-radius: 1.25em;
        font-size: 1rem;
        font-weight: 400;
        color: #000000;
        text-align: left;
        background-image: url(website-files/svg/arrow-right.svg);
        background-repeat: no-repeat;
        background-position: 96%;
    }
    
    .card-footer--link:hover {
        color: #fff;
        background: #000000;
        background-image: url(website-files/svg/arrow-right-inverted.svg);
        background-repeat: no-repeat;
        background-position: 96%;
    }
    
    .teaser-content {
        width: 320px;
    }
    
    .teaser-content-03 {
        width: 60%;
    }
    
    .teaser-content--headline h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000;
        margin: 0 0 .5em 0
    }
    
    .teaser-content--wysiwyg p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        text-align: start;
        margin: 1em 0
    }
    
    .teaser-content--wysiwyg ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        margin: 1em 0;
        padding: 1em
    }
    
    .teaser-content--wysiwyg li {
        display: list-item;
        list-style-type: disc;
        list-style-position: outside;
        margin: .25em 0
    }
    /************************************************************************************
*
* PRODUKTE
*
************************************************************************************/
    
    .placeholder-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-gap: 2em;
        margin: 0
    }
    
    .placeholder-cards--card {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
    }
    
    .card-link {
        display: flex;
        flex-direction: column;
    }
    
    .card-link--headline h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000;
        margin: 0 0 .5em 0
    }
    
    .card-link--image {
        position: relative;
        overflow: hidden;
    }
    
    .card-link--image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center;
    }
    
    .card-link--image img {
        transform: scale(1);
        transition: transform 0.5s ease-in-out;
        opacity: 1
    }
    
    .card-link--image img:hover {
        transform: scale(1.125);
        opacity: .7
    }
    
    .card-url {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: .5em 0 0 0;
    }
    
    .card-url--link {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        position: relative;
    }
    
    .card-url--link::after {
        content: '';
        width: 24px;
        height: 24px;
        display: block;
        background-image: url("website-files/svg/arrow-right.svg");
        background-repeat: no-repeat;
        position: absolute;
        right: auto;
        left: 140px;
        top: 6px;
    }
    
    .card-url--link {
        transition: translateX 0.4s cubic-bezier(.77, .49, .46, 1.15), -webkit-transform 0.43s ease-in;
    }
    
    .card-url--link:hover {
        color: #858486;
        will-change: translateX;
        transform: translateX(6px);
    }
    /************************************************************************************
*
* CARD HOVER 03
*
************************************************************************************/
    /************************************************************************************
*
* CARD HOVER 03
*
************************************************************************************/
    
    .image {
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0;
        transition: transform 0.3s;
    }
    
    .image-img {
        overflow: hidden;
    }
    
    .image-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center
    }
    
    .image:hover .image-overlay {
        background-position: center 100%;
        background-size: 105%;
        box-shadow: 0px 0px 20px 0px rgba(#777777, 0.6);
        visibility: visible;
        opacity: 1;
        transform: translateY(0%);
        color: #027090;
        transition: all 0.3s;
    }
    
    .image-overlay {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        background-color: #fff;
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        transform: translateY(100%);
        visibility: hidden;
        opacity: 0;
        transition: transform 0.3s;
    }
    
    .image-overlay--link {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        display: block;
        text-align: left;
        padding: 1em;
        position: relative
    }
    
    .image-overlay--link:hover {
        background-color: #000000;
        color: #ffffff;
    }
    
    .image-overlay--link::after {
        content: '';
        width: 24px;
        height: 24px;
        display: block;
        background-image: url("website-files/svg/arrow-right.svg");
        background-repeat: no-repeat;
        position: absolute;
        right: auto;
        left: 160px;
        top: 22px;
    }
    
    .image-overlay--link:hover::after {
        background-image: url("website-files/svg/arrow-right-inverted.svg");
        background-repeat: no-repeat;
        position: absolute;
        right: auto;
        left: 160px;
        top: 22px;
    }
    
    @media screen and (min-width: 20em) {
        .image:hover .image-overlay {
            visibility: visible;
            opacity: 1;
            transform: translateY(0%);
        }
        .image-overlay {
            transform: translateY(0%);
            visibility: visible;
            opacity: 1;
        }
    }
    
    @media screen and (min-width: 35em) {}
    
    @media screen and (min-width: 37.5em) {
        .image:hover .image-overlay {
            visibility: visible;
            opacity: 1;
            transform: translateY(0%);
        }
        .image-overlay {
            transform: translateY(100%);
            visibility: hidden;
            opacity: 0;
        }
    }
    
    @media screen and (min-width: 60em) {}
    /************************************************************************************
*
* PRODUKTE GALLERIE GRID 01
*
************************************************************************************/
    
    .placeholder-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        grid-gap: 2em;
    }
    
    .placeholder-items--item {
        position: relative
    }
    
    .item-wysiwyg {
        grid-row: auto
    }
    
    .item-wysiwyg h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .5em 0
    }
    
    .item-wysiwyg p {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #000000;
        hyphens: auto;
        margin: 1em 0
    }
    
    .item-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center
    }
    /************************************************************************************
*
* PRODUKTE GALLERIE GRID 02
*
************************************************************************************/
    
    .flex-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        gap: 2em
    }
    /*.flex-items > * {
   flex: 1 1 calc(280px + var(--card-margin));
}*/
    
    .flex-item--item:nth-child(1) {
        /*flex: 1 1 310px;*/
        width: 310px;
        align-self: flex-start;
    }
    
    .flex-item--item:nth-child(2) {
        flex: 2 1 auto;
        align-self: flex-start;
        overflow: hidden
    }
    
    .flex-item--custom01,
    .flex-item--custom02 {}
    
    .placeholder-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-gap: 2em;
    }
    
    .placeholder-gallery--image {
        position: relative;
    }
    
    .placeholder-gallery--image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center
    }
    /************************************************************************************
*
* RESPONSIVE TABELLE
*
************************************************************************************/
    
    .responsive-table {
        overflow-x: auto;
    }
    
    table {
        width: 100%;
        position: relative;
        display: table;
        border-collapse: collapse;
    }
    
    table td,
    table th {
        position: relative;
        text-align: inherit;
        white-space: nowrap;
    }
    
    table thead td {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 700;
        white-space: nowrap;
        padding: 0 .5em 1em .5em;
        border-bottom: 2px solid #000
    }
    
    table tbody td {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        padding: .5em;
    }
    
    table tbody tr {
        border-bottom: 1px solid #000
    }
    
    table tbody tr:last-child {
        border-bottom: 0
    }
    
    table tbody tr:hover {
        background: #efefef
    }
    /************************************************************************************
*
* BACKGROUND IMAGE
*
************************************************************************************/
    
    .bg-image-container {
        width: 50%;
        height: 600px;
        margin: 5em 0;
        position: relative;
    }
    
    .bg-image {
        width: 100%;
        max-width: 100%;
        height: 600px;
        position: absolute;
        top: 0;
        left: 0
    }
    /************************************************************************************
*
* TEAM
*
************************************************************************************/
    
    .editor-content {}
    
    .editor-content--headlines h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        color: #000000;
        margin: 0 0 .5em 0
    }
    
    .editor-content--headlines h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .5em 0
    }
    
    .editor-content--headlines h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .editor-content--wysiwyg {
        matgin: 1em 0
    }
    
    .editor-content--wysiwyg p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
    }
    
    .editor-content--wysiwyg p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        word-wrap: break-word;
        hyphens: auto
    }
    
    .editor-content--wysiwyg p strong {
        font-weight: 700;
    }
    
    .editor-content--wysiwyg p a {
        color: #000000;
        text-decoration: underline;
    }
    
    .editor-content--wysiwyg p a:hover {
        color: #858486;
    }
    
    .editor-content--wysiwyg ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        margin: 0;
        padding: 1em
    }
    
    .editor-content--wysiwyg li {
        display: list-item;
        list-style-type: disc;
        list-style-position: outside;
        margin: .25em 0
    }
    
    .editor-content--button {
        margin: 1em 0
    }
    
    button .button-link {
        min-width: 200px;
        display: inline-block;
        margin: 1em 0;
        padding: .5em 1em;
        border: 1px solid #000000;
        border-radius: 1.25em;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #000000;
        background: #fff;
        text-align: left;
        transition: transform .2s ease-in-out;
    }
    
    button .button-link:hover {
        color: #fff;
        background: #000000;
        box-shadow: 0 0 6px rgba(29, 29, 27, .2);
        transform: scale(1.02);
    }
    
    button .button-link--icon {
        min-width: 220px;
        display: inline-block;
        margin: 1em 0;
        padding: .5em 1em;
        border: 1px solid #000000;
        border-radius: 1.25em;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #000000;
        background: #fff;
        text-align: left;
        background-image: url(website-files/svg/arrow-right.svg);
        background-repeat: no-repeat;
        background-position: 94%;
    }
    
    button .button-link--icon:hover {
        color: #fff;
        background: #000000;
        background-image: url(website-files/svg/arrow-right-inverted.svg);
        background-repeat: no-repeat;
        background-position: 96%;
    }
    /************************************************************************************
*
* TEAM
*
************************************************************************************/
    
    .website-cards--before {
        display: block;
        margin: 1em 0;
    }
    
    .website-cards--before h2 {
        font-size: 1.5rem;
        line-height: 1.75rem;
        color: #000000;
        margin: .5em 0;
    }
    
    .website-cards--before p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
    }
    
    .website-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-gap: 2em;
    }
    
    .website-cards--card {
        display: flex;
        flex-direction: column;
    }
    
    .card-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .card-content h3 {
        font-size: 1.5rem;
        line-height: 1.75rem;
        color: #000000;
    }
    
    .card-content p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        margin: .5em 0;
    }
    /************************************************************************************
*
* BILDERGALERIE
*
************************************************************************************/
    
    .section-container--attach02 {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin: 150px auto;
        padding: max(5vh, 2.5em) 1em;
    }
    
    .section-container--attach {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin: 290px auto 0;
        padding: max(5vh, 2.5em) 1em;
    }
    
    .section-container--gallery {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin-inline: auto;
        padding: 0 1em 9em 1em
    }
    
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-gap: 2em;
    }
    
    .grid-gallery--image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center
    }
    
    .section-container--full {
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    
    .placeholder-content--holder {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin: 0 auto;
        padding: 0 1em;
        display: flex;
        justify-content: flex-start;
    }
    
    .placeholder-content--holder02 {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin: 0 auto;
        padding: 0 1em;
        display: flex;
        justify-content: flex-end;
    }
    
    .placeholder-content--wrapper {
        position: absolute;
        width: 100%;
        left: calc(50% - 9.5em);
        overflow: hidden;
    }
    
    .placeholder-content--wrapper02 {
        position: absolute;
        width: 100%;
        right: calc(50% - 9.5em);
        overflow: hidden;
    }
    
    .placeholder-content--image {
        height: 600px;
    }
    
    .placeholder-content--image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: initial;
        object-fit: cover;
        object-position: center;
        z-index: 1
    }
    
    .placeholder-content--image02 {
        height: 600px;
    }
    
    .placeholder-content--image02 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: initial;
        object-fit: cover;
        object-position: center;
        z-index: 1
    }
    
    .placeholder-content--background02 {
        position: absolute;
        height: 600px;
        left: 0;
        right: calc(50% - 9em);
        overflow: hidden;
    }
    /************************************************************************************
*
* Kontaktseite
*
************************************************************************************/
    
    .placeholder-content--dflex {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .wpforms-text {
        width: 320px
    }
    
    .wpforms-text--headline h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000;
        margin: 0 0 .5em 0;
    }
    
    .wpforms-text--wysiwyg p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        text-align: start;
        margin: 1em 0;
    }
    
    .wpforms-text--wysiwyg ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        margin: 0;
        padding: .5em 1em;
    }
    
    .wpforms-text--wysiwyg li {
        display: list-item;
        list-style-type: disc;
        list-style-position: outside;
        margin: .25em 0;
    }
    
    .forms-content--widget {
        width: 650px
    }
    /************************************************************************************
*
* AKTUELLES/BEITRÄGE INDEX
*
************************************************************************************/
    
    .news-index--head {
        width: 100%;
        height: auto;
        position: relative;
        margin: 0 0 2.5em 0;
    }
    
    .head-content {
        padding: 0 1em;
    }
    
    .head-content h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .head-content p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        text-align: start;
        margin: 1em 0
    }
    
    .section-container--before h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
    }
    
    .section-container--index {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin-inline: auto;
        padding: 1em;
    }
    
    .news-index--body {
        width: 100%;
        position: relative;
    }
    
    .news-index--body h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        color: #000000;
        margin: 0 0 1em 0;
    }
    
    .main-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1em;
    }
    
    .main-list--item {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 1em;
    }
    
    @media screen and (min-width: 30em) {
        .main-list--item>*+* {
            margin-bottom: 1rem;
        }
    }
    
    @media screen and (min-width: 40em) {
        .main-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -1em;
        }
        .main-list--item {
            width: 50%;
        }
        .main-list--item>*+* {
            margin-bottom: 1em;
        }
    }
    
    @media screen and (min-width: 75em) {
        .main-list--item {
            width: 33.333%;
        }
    }
    
    .article-content {
        position: relative;
        margin: 1em 0
    }
    
    .article-content--thumb img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        object-fit: cover;
        object-position: center
    }
    
    .article-content--inner {
        position: relative;
        margin: 1em 0;
    }
    
    .article-content--inner .date {
        font-size: .875rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #858486;
    }
    
    .article-content--inner .cat a {
        font-size: .875rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #000000;
        text-decoration: underline
    }
    
    .article-content--inner .headline h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .5em 0
    }
    
    .article-content--inner .excerpt p {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #000000;
        hyphens: auto;
        margin: 1em 0
    }
    
    .article-content--inner .read-more a {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        position: relative;
    }
    
    .article-content--inner .read-more a:hover {
        text-decoration: underline
    }
    
    .article-content--inner .read-more a::after {
        content: '';
        width: 24px;
        height: 24px;
        display: block;
        background-image: url("website-files/svg/arrow-right.svg");
        background-repeat: no-repeat;
        position: absolute;
        right: auto;
        left: 120px;
        top: 4px;
    }
    
    .wp-pagination {
        display: flex;
        justify-content: flex-start;
        margin: 1em 0;
    }
    
    .wp-pagination>* {
        margin: 0 1em 0 0
    }
    
    span.page-numbers.current {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #000000;
        min-width: 80px;
        display: inline-block;
        padding: .5em 0;
        border: 1px solid #000000;
        border-radius: 1em;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 700;
        text-align: center;
        padding: .5em 0;
        background: #858486
    }
    
    a.page-numbers {
        min-width: 80px;
        display: inline-block;
        padding: .5em 0;
        border: 1px solid #000000;
        border-radius: 1em;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        background: #fff;
        text-align: center;
    }
    
    a.page-numbers {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #000;
    }
    
    a.page-numbers:hover {
        color: #fff;
        background: #000000
    }
    
    .next.page-numbers {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .next.page-numbers:hover {
        color: #fff;
        background: #000000
    }
    
    .section-container--single {
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        position: relative;
        margin-inline: auto;
        padding: 1em;
    }
    
    .news-single--head {
        width: 100%;
        position: relative;
        margin: 0 auto
    }
    
    .news-single--body {
        display: block;
        margin: 2.5em 0
    }
    
    .news-single--body .date {
        font-size: .875rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #858486;
        display: block;
    }
    
    .news-single--body .cat a {
        font-size: .875rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #000000;
        text-decoration: underline;
        display: block;
    }
    
    .news-single--body h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        color: #000000;
        margin: 0 0 .5em 0
    }
    
    .wp-textarea h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .5em 0
    }
    
    .wp-textarea h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .wp-textarea h4 {
        font-size: 1.5rem;
        line-height: 2rem;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .wp-textarea {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #000000;
        hyphens: auto;
        margin: 1em 0
    }
    
    .wp-textarea p {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #000000;
        hyphens: auto;
        margin: 1em 0
    }
    
    .wp-textarea ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        margin: 0;
        padding: .5em 1em;
    }
    
    .wp-textarea li {
        display: list-item;
        list-style-type: disc;
        list-style-position: outside;
        margin: .25em 0;
    }
    
    .wp-textarea a,
    .wp-textarea p a,
    .wp-textarea li a {
        font-weight: 700;
        color: #858486;
        text-decoration: underline
    }
    
    .wp-backlink {
        display: block;
        margin: 1em 0
    }
    
    a.wp-backlink--link {
        min-width: 200px;
        display: inline-block;
        margin: 1em 0;
        padding: .5em 1em;
        border: 1px solid #000000;
        border-radius: 1.25em;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #000000;
        background: #fff;
        text-align: left;
        transition: transform .2s ease-in-out;
    }
    
    a.wp-backlink--link:hover {
        color: #fff;
        background: #000000;
        box-shadow: 0 0 6px rgba(29, 29, 27, .2);
        transform: scale(1.02);
    }
    /************************************************************************************
*
* WORDPRESS STANDARD PAGE
*
************************************************************************************/
    
    .editor-content {
        position: relative
    }
    
    .editor-content--wpeditor h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        font-weight: 700;
        color: #000000;
        margin: 0 0 1em 0
    }
    
    .editor-content--wpeditor h2 {
        font-size: 1.75rem;
        line-height: 2rem;
        font-weight: 700;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .editor-content--wpeditor h3 {
        font-size: 1.5rem;
        line-height: 1.75rem;
        font-weight: 700;
        color: #000000;
        margin: 1em 0 .25em 0
    }
    
    .editor-content--wpeditor h4,
    .editor-content--wpeditor h5 {
        font-size: 1.25rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: #000000;
        margin: 0 0 .25em 0
    }
    
    .editor-content--wpeditor p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #000000;
        word-wrap: break-word;
        hyphens: auto;
        margin: .75em 0
    }
    
    .editor-content--wpeditor p strong {
        font-weight: 700;
    }
    
    .editor-content--wpeditor p a {
        color: #000000;
        text-decoration: underline;
    }
    
    .editor-content--wpeditor p a:hover {
        color: #858486;
    }
    
    .editor-content--wpeditor ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #000000;
        margin: .75em 0;
        padding: 0
    }
    
    .editor-content--wpeditor li {
        display: list-item;
    }
    
    .editor-content--wpeditor li a {
        color: #000000;
        text-decoration: underline;
    }
    
    .editor-content--wpeditor li a:hover {
        color: #858486;
    }
    /************************************************************************************
*
* FOOTER
*
************************************************************************************/
    
    .footer-container {
        width: 100%;
        position: relative;
    }
    
    .footer-container--inner {
        display: block;
        width: 100%;
        max-width: 63.75em;
        max-width: var(--inner-width);
        margin-inline: auto;
        padding: 3.75em 1em;
    }
    
    .footer-top {
        position: relative
    }
    
    .footer-top--logo img {
        width: 230px;
        height: 90px;
        margin: 0;
        display: block
    }
    
    .footer-main {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 2.5em -1em;
    }
    
    .footer-main>* {
        flex: 1 1 25%;
    }
    
    .footer-main--widget {
        display: flex;
        flex-wrap: wrap;
        padding: var(--card-margin);
    }
    
    .footer-main--widget>* {
        flex: 1 1 280px;
    }
    
    .footer-main--widget ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
    }
    
    .footer-main--widget li {
        display: list-item
    }
    
    .footer-main--widget nav ul {
        font-size: 1rem;
        line-height: 1.75rem;
        font-weight: 400;
        color: #fff;
    }
    
    .footer-main--widget nav li a {
        position: relative;
        color: #fff;
    }
    
    .footer-main--widget nav li.current_page_item a {
        text-decoration: underline
    }
    
    .footer-main--widget nav li.site-link a {
        color: #fff;
    }
    
    .footer-main--widget li a {
        color: #fff;
        text-decoration: underline
    }
    
    .footer-main--widget nav li.site-link a::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #fff;
        bottom: -2px;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }
    
    .footer-main--widget nav li.site-link a:hover::before {
        transform-origin: left;
        transform: scaleX(1);
    }
    
    ul.icon-with-url {
        display: flex;
        justify-content: flex-start;
        margin: 1em auto;
    }
    
    .icon-with-url li img {
        width: 40px;
        height: 40px;
        display: block;
        margin: 0 .5em 0 0;
    }
    
    .footer-bottom {
        display: flex;
        justify-content: flex-start;
    }
    
    .footer-bottom--small small {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #fff;
        padding: 0
    }
    /************************************************************************************
*
* CSS MEDIA QUERIES
*
************************************************************************************/
    
    @media screen and (min-width: 20em) {
        .has-margin {
            margin: 5em 0
        }
        .header-content {
            width: 100%;
            padding: 0
        }
        .header-gap {
            margin: 5em 1em 5em 1em;
        }
        .section-container--offset01 {
            height: auto;
        }
        .section-container--offset02 {
            height: auto;
        }
        .section-container--offset03 {
            height: auto;
        }
        .placeholder-content--background01 {
            position: relative;
            height: 400px;
            right: 0;
            left: 0;
            overflow: hidden;
        }
        .placeholder-content--background02 {
            position: relative;
            height: 400px;
            right: 0;
            left: 0;
            overflow: hidden;
        }
        .placeholder-content--background03 {
            position: relative;
            height: 400px;
            right: 0;
            left: 0;
            overflow: hidden;
        }
        .section-container--full {
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }
        .placeholder-content--wrapper {
            position: relative;
            left: 0
        }
        .section-container--attach,
        .section-container--attach02 {
            margin: auto;
        }
        .placeholder-content--image {
            position: relative;
        }
        .placeholder-content--image {
            height: 400px;
        }
        .placeholder-content--image02 {
            position: relative;
        }
        .placeholder-content--image02 {
            height: 400px;
        }
        .bg-image-container {
            width: 100%;
            height: 400px;
        }
        .bg-image {
            width: 100%;
            max-width: 100%;
            height: 400px;
        }
        .section-container--gallery {
            padding: 0 0 5em 0
        }
        .teaser-content-03 {
            width: 100%;
            margin: 1em 0 0 0
        }
        .teaser-content {
            width: 100%;
            margin: 1em 0 0 0
        }
        .flex-item--item:nth-child(1) {
            width: 100%;
            align-self: flex-start;
        }
        .forms-content--widget {
            width: 100%;
            margin: 1em 0
        }
        .footer-bottom {
            display: block;
        }
    }
    
    @media screen and (min-width: 35em) {}
    
    @media screen and (min-width: 37.5em) {
        .has-margin {
            margin: 5em 0
        }
        .header-content {
            width: calc(50% + 10em);
            padding: 0
        }
        .section-container--offset01 {
            height: 540px;
        }
        .section-container--offset02 {
            height: 540px;
        }
        .placeholder-content--background01 {
            position: absolute;
            height: 540px;
            right: 0;
            left: calc(50% - 10em);
            overflow: hidden
        }
        .placeholder-content--background02 {
            position: absolute;
            height: 540px;
            right: calc(50% - 10em);
            left: 0;
            overflow: hidden;
        }
        .placeholder-content--background03 {
            position: absolute;
            height: 800px;
            right: 0;
            left: calc(60% - 0em);
            overflow: hidden
        }
        .bg-image-container {
            width: 50%;
            height: 600px;
        }
        .bg-image {
            width: 100%;
            max-width: 100%;
            height: 600px;
        }
        .section-container--offset03 {
            height: 800px;
        }
        .section-container--attach {
            margin: 290px auto 0;
        }
        .section-container--attach02 {
            margin: 0 auto 290px;
        }
        .teaser-content {
            width: 320px;
            margin: 0 0 0 0
        }
        .teaser-content-03 {
            width: 60%;
            margin: 0 0 0 0
        }
        .footer-bottom {
            display: flex;
        }
    }
    /* ==========================================================================
CSS Tablet / Desktop
========================================================================== */
    
    @media screen and (min-width: 48.75em) {
        .has-margin {
            margin: 9em 0
        }
        .section-container--full {
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
        }
        .header-gap {
            margin: 6em 1em 9em 1em;
        }
        .placeholder-content--wrapper {
            position: absolute;
            width: 100%;
            left: calc(50% - 9.5em);
            overflow: hidden;
        }
        .placeholder-content--image {
            height: 600px;
        }
        .placeholder-content--image img {
            position: absolute;
        }
        .placeholder-content--wrapper02 {
            position: absolute;
            width: 100%;
            right: calc(50% - 9.5em);
            overflow: hidden;
        }
        .placeholder-content--image02 {
            height: 600px;
        }
        .placeholder-content--image02 img {
            position: absolute;
        }
        .section-container--gallery {
            padding: 0 0 9em 0
        }
        .flex-item--item:nth-child(1) {
            width: 310px;
            align-self: flex-start;
        }
        .forms-content--widget {
            width: 650px;
            margin: 0 0
        }
    }
    
    @media screen and (min-width: 50em) {}
    /* ==========================================================================
CSS Over 9000px
========================================================================== */
    
    @media screen and (min-width: 75em) {}
    
    @media screen and (min-width: 87.5em) {}
    
    @media screen and (min-width: 120em) {}
    
    @media screen and (max-width:991px) {
        ul.header-navigation {
            visibility: hidden;
        }
        .menu-toggler {
            visibility: visible
        }
        .header-stoerer {
            display: none;
        }
        .footer-stoerer {
            display: inline-block;
        }
    }