@charset "UTF-8";
    /************************************************************************************
*
* Theme Name: 	 WP Theme für Tierzentrum Tierärzte
* Theme URI:	 https://www.xxx.ch/
* Description: 	 Webseite für Tierzentrum Tierärzte
* Tested up to:  5.0
* Requiers PHP:  8.0
* Author:		 PFIRSICHBLAU die Werbeagentur GmbH 
* Author URI:	 www.pfirsichblau.ch
* Version:		 1.2
* License:       GNU General Public License V3 or later
* License URI:   https://www.gnu.org/licenses/gpl-3.0
*
************************************************************************************/
    /* Webfonts */
    
    @font-face {
        font-family: 'Frutiger-Next-LT-Condensed-Light-Std';
        src: url('./fonts/Frutiger-Next-LT-Condensed-Light-Std.woff') format('woff'), url('./fonts/Frutiger-Next-LT-Condensed-Light-Std.woff2') format('woff2'), url('./fonts/Frutiger-Next-LT-Condensed-Light-Std.eot'), url('./fonts/Frutiger-Next-LT-Condensed-Light-Std.eot?#iefix') format('embedded-opentype'), url('./fonts/Frutiger-Next-LT-Condensed-Light-Std.otf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Frutiger-Next-LT-Condensed-Medium-Std';
        src: url('./fonts/Frutiger-Next-LT-Condensed-Medium-Std.woff') format('woff'), url('./fonts/Frutiger-Next-LT-Condensed-Medium-Std.woff2') format('woff2'), url('./fonts/Frutiger-Next-LT-Condensed-Medium-Std.eot'), url('./fonts/Frutiger-Next-LT-Condensed-Medium-Std.eot?#iefix') format('embedded-opentype'), url('./fonts/Frutiger-Next-LT-Condensed-Medium-Std.otf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Frutiger-Next-LT-Condensed-Black-Std';
        src: url('./fonts/Frutiger-Next-LT-Condensed-Black-Std.woff') format('woff'), url('./fonts/Frutiger-Next-LT-Condensed-Black-Std.woff2') format('woff2'), url('./fonts/Frutiger-Next-LT-Condensed-Black-Std.eot'), url('./fonts/Frutiger-Next-LT-Condensed-Black-Std.eot?#iefix') format('embedded-opentype'), url('./fonts/Frutiger-Next-LT-Condensed-Black-Std.otf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
     :root {
        --ff-primary: 'Frutiger-Next-LT-Condensed-Light-Std';
        --ff-medium: 'Frutiger-Next-LT-Condensed-Medium-Std';
        --ff-bold: 'Frutiger-Next-LT-Condensed-Black-Std';
        --ff-body: var(--ff-primary);
        --ff-regular: var(--ff-medium);
        --ff-headline: var(--ff-bold);
        --fs-headline-h1: 2.5rem;
        --fs-headline-h2: 2rem;
        --fs-headline-h3: 2rem;
        --fs-headline-h4: 1.5rem;
        --fs-headline-h5: 1.25rem;
        --fs-headline-h6: 1.125rem;
        --fs-base: 1.25rem;
        --fs-nav: 1.5rem;
        --fs-small: .875rem;
        --fw-light: 'Frutiger-Next-LT-Condensed-Light-Std';
        --fw-regular: 'Frutiger-Next-LT-Condensed-Medium-Std';
        --fw-bold: 'Frutiger-Next-LT-Condensed-Black-Std';
        --clr-neutral-100: #ffffff;
        --clr-neutral-900: #000000;
        --clr-ui-200: #2b4799;
        --clr-ui-300: #c1d4e3;
        --clr-ui-400: #778959;
        --clr-ui-500: #c1d4e3;
        --clr-ui-600: #6e341e;
        --clr-ui-700: #7e3c48;
        --clr-shadow-100: rgba(0, 0, 0, 0.4);
        --padding-100: clamp(1em, 3%, 1.5em);
        --padding-200: clamp(2em, 6%, 4em);
        --padding-300: clamp(3em, 12%, 6em);
        --margin-100: 1em;
        --margin-200: 2em;
        --z-fixed-0: 0;
        --z-fixed-10: 10;
        --z-fixed-20: 20;
        --z-fixed-30: 30;
        --icon-open: url(public/svg/icon_lines_1c1c1c.svg);
        --icon-close: url(public/svg/icon_cross_1c1c1c.svg);
    }
    
    @media (min-width: 50em) {
         :root {
            --fs-headline-h1: 4rem;
            --fs-headline-h2: 2.5rem;
            --fs-headline-h3: 2.25rem;
            --fs-headline-h4: 2rem;
            --fs-headline-h5: 1.5rem;
            --fs-headline-h6: 1.5rem;
            --fs-base: 1.25rem;
            --fs-nav: 1.5rem;
            --fs-small: 1rem;
        }
    }
    /* Kontrats CSS Style */
    
    @media (prefers-contrast: more) {
        body {}
    }
    
    #root,
    #__next {
        isolation: isolate;
    }
    /* Base */
    
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    *:focus:not(:focus-visible) {
        outline: none
    }
    
     :target {
        scroll-padding-block-start: 2rem;
    }
    
     :focus {
        scroll-padding-block-end: 8vh;
    }
    
    ul,
    ol,
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }
    /* Set core root defaults */
    
    html:focus-within {
        scroll-behavior: smooth;
    }
    /* Set core body defaults */
    
    html {
        height: 100%;
        scroll-behavior: smooth;
        overflow-x: hidden
    }
    .black-link {
		font-size:var(--fs-base);
		color:inherit;
		font-weight:bold;
		font-family:var(--ff-headline);
}
    body {
        font-family: 'Frutiger-Next-LT-Condensed-Light-Std';
        font-style: normal;
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        background-color: var(--clr-neutral-100);
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    /* A elements that don't have a class get default styles */
    
    a:not([class]) {
        text-decoration-skip-ink: auto;
    }
    
    a {
        text-decoration: none;
    }
    
     :is(a,
    button,
    input,
    textarea,
    summary) {
        --outline-size: max(2px, 0.08em);
        --outline-style: solid;
        --outline-color: currentColor;
    }
    
     :is(a,
    button,
    input,
    textarea,
    summary):focus {
        outline: var(--outline-size) var(--outline-style) var(--outline-color);
        outline-offset: var(--outline-offset, var(--outline-size));
    }
    /* Make images easier to work with */
    
    img,
    picture,
    video,
    svg {
        max-width: 100%;
        height: auto;
        display: block;
        vertical-align: bottom;
    }
    /* Remove built-in form typography styles */
    
    input,
    textarea,
    select {
        font: inherit;
    }
    
    button {
        font: inherit;
        background-color: transparent;
        outline: none;
        border: none;
        border-radius: none;
    }
    /* Avoid text overflows */
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--ff-headline);
        overflow-wrap: break-word;
        line-height: 1.2;
        text-wrap: balance;
        max-inline-size: 60ch;
		font-weight:normal;
    }
    
    p,
    ul {
        font-family: var(--ff-primary);
        line-height: 1.6;
    }
    
    strong {
        font-family: var(--ff-headline);
    }
    /*
p:not([class]) {
  max-width: 80ch
}

p[data-width="wide"] {
  max-width: 100%;
}
*/
    /* 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;
        }
    }
    /* Accessibility styles */
    
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0
    }
    
    .skip-nav {
        background-color: var(--clr-ui-400);
        font-size: var(--fs-base);
        color: var(--clr-neutral-100);
        display: inline-block;
        padding: .5em 1em;
        border-radius: 0 0 .25em .25em;
        position: absolute;
        left: 0;
        transform: translateY(-6em);
        transition: transform 325ms ease-in;
    }
    
    .skip-nav:focus {
        transform: translateY(0em);
    }
    /* Button styles */
    
    .button {
        min-width: 220px;
        display: inline-flex;
        gap: 1em;
        justify-content: center;
        align-items: center;
        border: 0;
        padding: .5em;
        cursor: pointer;
        font-family: var(--ff-regular);
        line-height: 1;
    }
    
    .button-primary {
        min-width: 220px;
        display: inline-flex;
        gap: 1em;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        padding: .5em;
        cursor: pointer;
        font-family: var(--ff-medium);
        font-size: var(--fs-base);
        border-radius: 100vw;
        line-height: 1;
    }
    
    .button-primary[data-type="default"] {
        background-color: var(--clr-ui-200);
        color: var(--clr-neutral-100);
        transition: translateY 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
    }
    
    .button-primary[data-type="default"]:hover,
    .button-primary[data-type="default"]:focus {
        background-color: var(--clr-neutral-900);
        color: var(--clr-neutral-100);
        transform: translateY(-4px);
    }
    
    .button-primary[data-type="inverted"] {
        background-color: var(--clr-neutral-100);
        color: var(--clr-ui-200);
    }
    
    .button-primary[data-type="inverted"]:hover,
    .button-primary[data-type="inverted"]:focus {
        background-color: var(--clr-neutral-900);
        border: 1px solid var(--clr-neutral-900);
        color: var(--clr-neutral-100);
    }
    
    .button-secondary[data-type="inverted"]:focus-visible {
        outline: 1px solid var(--clr-neutral-900);
        outline-offset: 2px;
    }
    
    .button-primary[data-icon="svg-icon"]::after {
        content: '';
        width: 32px;
        height: 32px;
        background-image: url('public/svg/icon_arrow_right.svg');
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .button-secondary[data-type="roundness"] {
        background-color: var(--clr-ui-600);
        color: #1C1C1C;
        font-size: var(--fs-base);
        font-weight: var(--fw-regular);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-radius: 100vw;
        transition: background-size 200ms, scale 250ms ease-in;
    }
    
    .button-secondary[data-type="roundness"]:hover,
    .button-secondary[data-type="roundness"]:focus {
        background-color: var(--clr-ui-800);
        color: #1C1C1C;
        background-size: 160%;
        scale: 1.05;
    }
    
    .button:focus-visible,
    .button-secondary[data-type="roundness"]:focus-visible {
        outline: 1px solid var(--clr-neutral-900);
        outline-offset: 2px;
    }
    
    .mobile-button {
        display: block;
        width: 260px;
        font-weight: var(--fw-regular);
        font-family: var(--ff-medium);
        font-size: 1rem;
        text-align: center;
        padding: 1rem;
        cursor: pointer;
        border-radius: 2em;
        margin: .5em 0;
    }
    
    .mobile-button[data-type="outline"] {
        border: 1px solid var(--clr-neutral-100);
        color: var(--clr-neutral-100);
    }
    
    .mobile-button[data-type="inverted"] {
        background-color: var(--clr-neutral-100);
        color: var(--clr-ui-200);
    }
    /* Default styles */
    
    .layout {
        position: relative;
    }
    /* Reusable styles */
    
    .section-container {
        --max-width: 100%;
        width: min(var(--max-width));
        margin: 0 auto;
        margin-inline: auto;
    }
    
    .section-container[data-type="min-content"] {
        --max-width: 48em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
    
    .section-container[data-type="fit-content"] {
        --max-width: 60em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
    
    .section-container[data-type="max-content"] {
        --max-width: 80em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
    
    .section-container[data-type="full-content"] {
        --max-width: 90em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
    
    .space-100 {
        padding-block: var(--padding-100);
    }
    
    .space-200 {
        padding-block: var(--padding-200);
    }
    
    .space-300 {
        padding-block: var(--padding-300);
    }
    
    .content-before {
        display: block;
        position: relative;
        color: var(--clr-neutral-900);
    }
    
    .content-before[data-type="center"] {
        text-align: center
    }
    
    .content-before[data-type="left"] {
        text-align: left
    }
    
    .content-before--headline h2 {
        font-size: var(--fs-headline-h2)
    }
    
    .content-before--headline h3 {
        font-size: var(--fs-headline-h3)
    }
    
    .content-before--headline h2 a,
    .content-before--headline h3 a {
        color: var(--clr-ui-200)
    }
    
    .content-before--wysiwyg p {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .container-before--headline h2 {
        font-size: var(--fs-headline-h2)
    }
    
    .container-before--wysiwyg p {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .container-wrap {
        --max-width: 48em;
        --padding: 0;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
    
    @media (min-width: 50em) {
        .container-wrap {
            --max-width: 48em;
            --padding: 1em;
            width: min(var(--max-width), 100% - var(--padding) * 2);
            margin: 0 auto;
            margin-inline: auto;
        }
    }
    /* Custom Header styles */
    
    .site-header {
        background-color: var(--clr-neutral-100);
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 20;
    }
    
    .site-header>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 90em;
        min-height: 5em;
        margin: 0 auto;
        padding: 1em;
        position: relative
    }
    
    .site-header--logo {
        position: relative;
        width: 130px;
        height: 36px;
    }
    
    @media (min-width: 50em) {
        .site-header--logo {
            position: relative;
            width: 220px;
            height: 61px;
        }
    }
    
    .site-header--mobile,
    .mobile-buttons {
        display: none;
    }
    
    .site-header nav ul {
        font-family: var(--ff-medium);
        font-size: var(--fs-base);
        font-weight: var(--fw-regular);
        position: relative;
    }
    
    .site-header nav ul li {
        position: relative;
        float: left;
    }
    
    .site-header nav ul li a {
        color: var(--clr-neutral-900);
        display: flex;
        justify-content: space-between;
        padding: 1em;
    }
    
    .site-header nav ul li a:hover {
        color: var(--clr-ui-200);
    }
    
    .site-header nav ul li a[aria-current="page"] {
        color: var(--clr-ui-200);
    }
    
    li.has-submenu::after {
        content: '';
        width: 20px;
        height: 20px;
        display: block;
        background-image: url('public/svg/arrowdown-01.svg');
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: 8em;
        top: .75em;
    }
    
    @media (min-width: 40em) {
        li.has-submenu::after {
            content: '';
            width: 20px;
            height: 20px;
            display: block;
            background-image: url('public/svg/arrowdown-01.svg');
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            right: -.125em;
            top: 1.25em;
        }
    }
    
    .site-header nav ul li ul.sub-menu {
        position: absolute;
        left: 0;
        width: 180px;
        background: var(--clr-neutral-100);
        border-radius: 0 0 1em 1em;
        display: none;
    }
    
    .site-header nav ul li ul.sub-menu li a {
        position: relative;
        width: 100%;
        font-size: var(--fs-base);
        padding: .5em 1em;
    }
    
    @media (max-width: 680px) {
        .site-header nav {
            position: absolute;
            width: 100%;
            height: 80vh;
            top: 5em;
            left: 0;
            background-color: var(--clr-ui-200);
            border-radius: 1em;
            display: none
        }
        .site-header.active nav {
            display: block
        }
        .site-header nav ul {
            font-size: var(--fs-base);
            position: relative;
        }
        .site-header nav ul li {
            width: 100%;
        }
        .site-header nav ul li a {
            font-size: var(--fs-nav);
            color: var(--clr-neutral-100);
            padding: .25em 1em;
        }
        @media (hover: none) {
            .site-header nav ul li a:hover {
                color: #E3E3E3;
            }
        }
        .site-header nav ul li a[aria-current="page"] {
            color: #E3E3E3;
        }
        .site-header nav ul li ul.sub-menu {
            position: relative;
            width: 100%;
            left: 1em;
        }
        .site-header nav ul li ul.sub-menu li a {
            position: relative;
            width: 100%;
            font-size: var(--fs-base);
            color: var(--clr-neutral-100);
            padding: .5em 1em;
        }
        .site-header--mobile {
            display: flex;
            gap: .5em;
        }
        .mobile-buttons {
            display: block;
            padding: 2.5em 1em;
        }
        .menu-toggle {
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--clr-ui-200);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .menu-toggle span::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: var(--clr-neutral-100);
            transform: translateY(-8px);
        }
        .menu-toggle span {
            display: block;
            position: absolute;
            width: calc(100% - 20px);
            height: 2px;
            background-color: var(--clr-neutral-100);
            transform: translateY(0);
        }
        .menu-toggle span::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: var(--clr-neutral-100);
            transform: translateY(8px);
        }
        header.site-header.active .menu-toggle span::before {
            transform: rotate(45deg);
        }
        header.site-header.active .menu-toggle span {
            background-color: var(--clr-ui-200);
        }
        header.site-header.active .menu-toggle span::after {
            transform: rotate(315deg);
        }
    }
    /* Custom Hero01 styles */
    
    .site-hero {
        --max-width: 100%;
        width: min(var(--max-width));
        margin: 0 auto;
        margin-inline: auto;
        position: relative;
    }
    
    .site-hero--content {
        --max-width: 90em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
        align-items: center;
        background-color: var(--clr-ui-300);
        position: relative;
        border-radius: 1em;
    }
    
    .bg-illustration {
        background-size: 60% 100%;
        width: 100%;
        height: 100%;
    }
    
    .bg {
        width: 400px;
        height: 360px;
        margin: 0;
    }
    
    @media (min-width: 50em) {
        .site-hero--content {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            align-items: center;
        }
        .bg-illustration {
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
        }
        .bg {
            width: 700px;
            height: 600px;
            margin: 0 2em;
        }
    }
    
    .headline h1 {
        font-size: var(--fs-headline-h1);
        line-height: 1.2;
        padding: .5em;
    }
    
    @media (min-width: 50em) {
        .headline h1 {
            font-size: var(--fs-headline-h1);
            line-height: 1.2;
            padding: 0;
        }
    }
    
    .site-stage {
        --max-width: 90em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
        position: relative;
    }
    
    .site-stage::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(2, 3, 21, .8), transparent max(16%, 16vw));
        overflow: hidden;
        border-radius: 1em;
    }
    
    .site-stage--image {
        width: 100%;
        height: calc(100% - 5em);
        overflow: hidden;
        border-radius: 1em;
    }
    
    @media (min-width: 38em) {
        .site-stage--image {
            width: 100%;
            height: 640px;
            overflow: hidden;
            border-radius: 1em;
        }
    }
    
    .site-stage--image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover
    }
    
    .site-stage--content {
        --max-width: 48em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
        position: relative;
        z-index: 4;
    }
    
    .stage-content--headline {
        position: absolute;
        bottom: 5em;
        left: 0;
    }
    
    .stage-content--headline h1 {
        font-size: var(--fs-headline-h1);
        color: var(--clr-neutral-100);
    }
    
    .stage-content--headline p {
        font-size: var(--fs-base);
        color: var(--clr-neutral-100);
        margin: 1em 0;
    }
    /* Custom Block Editor */
    
    .block-editor {
        position: relative;
        color: var(--clr-neutral-900);
    }
    
    .block-editor--headlines h1 {
        font-size: var(--fs-headline-h1)
    }
    
    .block-editor--headlines h2 {
        font-size: var(--fs-headline-h2)
    }
    
    .block-editor--headlines h3 {
        font-size: var(--fs-headline-h3)
    }
    
    .block-editor--wysiwyg p {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .block-editor--wysiwyg ul {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .block-editor--wysiwyg li {
        display: list-item
    }
    
    .block-editor--wysiwyg p a,
    .block-editor--wysiwyg li a {
        color: var(--clr-ui-200);
    }
    
    .block-image {
        display: block
    }
    
    .block-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        border-radius: 1em;
    }
    
    .section-container--featured {
        width: 100%;
        position: relative;
        transform: translateX(25%);
    }
    
    .featured-heading {
        margin: 0 auto;
        margin-inline: auto;
        color: var(--clr-neutral-900);
    }
    
    .featured-heading h2 {
        font-size: var(--fs-headline-h2)
    }
    
    .featured-heading p {
        font-size: var(--fs-base);
        margin: 1em 0 0 0;
    }
    
    .featured-slider {
        margin: 2.5em 0;
    }
    
    .featured-button {
        --max-width: 48em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
    /* Custom Listing styles */
    
    .listing-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        margin: 0 0 1em 0;
        margin-block-end: 1em;
    }
    
    .listing-cards> :first-child {
        flex-basis: 20rem;
        flex-grow: 1;
    }
    
    .listing-cards> :last-child {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: 50%;
    }
    
    .listing-cards--icon {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2em;
        border-radius: 1em;
    }
    
    .listing-cards--icon img {
        width: 160px;
        height: 160px;
    }
    
    .listing-cards--content {
        padding: 2em;
        border-radius: 1em;
    }
    
    @media (min-width: 46em) {
        .listing-cards--content {
            padding: 4em;
            border-radius: 1em;
        }
    }
    
    .content-headline h2 {
        font-size: var(--fs-headline-h2);
    }
    
    .content-list {
        display: inline-flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        gap: 0em;
        width: 100%;
    }
    
    .content-list .content-list-item {
        flex: 1;
    }
    
    @media (min-width: 46em) {
        .content-list {
            flex-direction: row;
            gap: 2em;
        }
    }
    
    .content-text {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .content-list ul {
        font-size: var(--fs-base);
        line-height: 1.875rem;
        padding: 0 1em;
        position: relative
    }
    
    @media (min-width: 46em) {
        .content-list ul {
            font-size: var(--fs-base);
            line-height: 1.875rem;
            padding: 1em 1em;
        }
    }
    
    .content-list li {
        list-style-type: disc;
        list-style-position: outside;
    }
    
    .content-list li a {
        color: var(--clr-neutral-900);
        padding: 0 0 .25em 0;
    }
    
    .content-list li a:hover {
        text-decoration: underline;
    }
    
    .content-list li.link {
        list-style-type: none;
        list-style-position: outside;
    }
    
    .content-list li[data-icon="icon-extern"]::before {
        content: '';
        display: inline-block;
        width: 25px;
        height: 25px;
        background-image: url("public/svg/icon-externlink.svg");
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: -1em;
        position: absolute;
        left: -.75em;
    }
    
    .website-cards {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    
    .website-cards--card {
        width: 100%;
        height: 640px;
        right: auto;
        border-radius: 1em;
        overflow: hidden;
        position: relative;
    }
    
    .card-content {
        width: 90%;
        height: 80px;
        margin: 1em auto;
        padding: 1em;
        border-radius: 1em;
        background-color: var(--clr-neutral-100);
        color: var(--clr-neutral-900);
        position: absolute;
        left: 5%;
        bottom: .5em;
        transition: height 250ms ease;
        transition-delay: 100ms;
    }
    
    .website-cards--card:hover .card-content {
        height: 95%;
        bottom: 0;
        visibility: visible;
        opacity: 1;
    }
    
    .card-content--body {
        visibility: hidden;
        opacity: 0;
        transition: opacity 250ms ease;
        transition-delay: 200ms;
    }
    
    .website-cards--card:hover .card-content--body {
        visibility: visible;
        opacity: 1;
    }
    
    .card-content--title h2 {
        position: relative;
        width: max-content;
    }
    
    .card-content--title h2 span.small {
        display: block;
        font-family: var(--ff-medium);
        font-size: var(--fs-base);
    }
    
    .card-content--body ul {
        font-size: var(--fs-base);
        line-height: 1.875rem;
        padding: 1em;
    }
    
    .card-content--body li {
        list-style-type: disc;
        list-style-position: outside;
    }
    
    .card-caption {
        width: 90%;
        height: 80px;
        margin: 1em auto;
        padding: 1em;
        border-radius: 1em;
        background-color: var(--clr-neutral-100);
        color: var(--clr-neutral-900);
        position: absolute;
        left: 5%;
        bottom: .5em;
    }
    
    .card-caption--title h2 {
        position: relative;
        width: max-content;
    }
    
    .card-caption--title h2 span.caption-small {
        display: block;
        font-family: var(--ff-medium);
        font-size: var(--fs-base);
    }
    
    .image-block {
        width: 100%;
        min-height: 640px;
        padding: 200px 0;
        border-radius: 1em;
        margin: 2em 0;
        position: relative;
    }
    
    .image-block::before {
        content: '';
        display: block;
        width: 100%;
        height: 2em;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        border-radius: 0 0 2em 2em;
    }
    
    .image-block--wrap {
        --max-width: 80em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
        display: flex;
        position: relative;
        left: 0;
        bottom: 0;
    }
    
    .iframe-block .image-block--wrap {
        pointer-events: none;
    }
.iframe-block .overlay-content li a {
	color:white;
}
    
    @media screen and (max-width:639px) {
        .iframe-block .image-block--wrap {
            --max-width: 100%;
            display: block;
            margin-top: 10px;
        }
    }
    
    .iframe-block .image-block--wrap .overlay-content {
        pointer-events: all;
    }
    
    @media (min-width: 40em) {
        .image-block--wrap {
            position: absolute;
            left: 2.5em;
            bottom: 2.5em;
        }
    }
    /* JS Parallax*/
    
    .block-parallax {
        width: 100%;
        min-height: 460px;
        padding: 20px 0;
        border-radius: 1em;
        margin: 2em 0;
        position: relative;
        overflow: hidden;
        display: none
    }
    
    @media (min-width: 40em) {
        .block-parallax {
            width: 100%;
            min-height: 640px;
            padding: 20px 0;
            border-radius: 1em;
            margin: 2em 0;
            position: relative;
            overflow: hidden;
            display: block;
        }
        .block-parallax::before {
            content: '';
            display: block;
            width: 100%;
            height: 2em;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #fff;
            border-radius: 0 0 2em 2em;
            z-index: 1;
        }
        .block-parallax--img {
            width: 100%;
            z-index: 0;
            position: relative;
            top: 0;
            left: 50%;
            border-radius: 1em;
        }
        .block-parallax--img {
            width: 100%;
            z-index: 0;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            pointer-events: none;
            border-radius: 1em;
        }
        .block-parallax--wrap {
            --max-width: 80em;
            --padding: 1em;
            width: min(var(--max-width), 100% - var(--padding) * 2);
            margin: 0 auto;
            margin-inline: auto;
            display: flex;
            position: relative;
            left: 0;
            bottom: 0;
        }
    }
    
    @media (min-width: 40em) {
        .block-parallax--wrap {
            position: absolute;
            left: 2.5em;
            bottom: 2.5em;
        }
    }
    
    .block-parallax--overlay {
        border-radius: 1em;
        padding: 2.5em;
        position: relative;
    }
    
    .overlay-headline h2 {
        max-width: 22ch;
        font-size: 2.25rem;
    }
    
    .overlay-headline h3 {
        max-width: 22ch;
        font-size: 2rem;
        margin: .5em 0;
    }
    
    .overlay-text p {
        max-width: 40ch;
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .overlay-text ul {
        max-width: 40ch;
        font-size: var(--fs-base);
        margin: 0 0 1em 0;
    }
    
    .overlay-headline h2 a,
    .overlay-text p a {
        color: var(--clr-ui-200);
    }
    
    .overlay-button {
        margin: 2.5em 0 0 0;
    }
    
    .repeat-block {
        width: 100%;
        min-height: 640px;
        padding: 200px 0;
        border-radius: 1em;
        margin: 2em 0;
        position: relative;
    }
    
    .repeat-block--wrap {
        --max-width: 80em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
        display: flex;
        position: absolute;
        left: 5em;
        bottom: 5em;
    }
    
    .overlay-content {
        border-radius: 1em;
        padding: 1.5em;
        position: relative;
    }
    
    .overlay-content--text h2 {
        max-width: 22ch;
        font-size: 2rem;
    }
    
    .overlay-content--text h3 {
        max-width: 26ch;
        font-size: 1.8rem;
    }
    
    .overlay-content--text p {
        max-width: 40ch;
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .overlay-content--text ul {
        max-width: 40ch;
        font-size: var(--fs-base);
        margin: 0 0 1em 0;
    }
    
    .overlay-content--text h2 a,
    .overlay-content--text p a {
        color: var(--clr-ui-200);
    }
    
    .overlay-content--button {
        margin: 2.5em 0 0 0;
    }
    /* Beiträge styles */
    
    .post-cards {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .post-cards--card {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }
    
    .card-teaser--image {
        position: relative;
        overflow: hidden;
        border-radius: 1em;
    }
    
    .card-teaser--image img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 280px;
        object-fit: cover;
        transition: .35s;
    }
    
    .card-teaser--image:hover img {
        transform: scale(1.2);
    }
    
    .card-teaser--post {
        background-color: #dae8f2;
        margin: 1em 0;
        padding: 1.5em;
        border-radius: 1em;
        min-height: 420px;
    }
    
    .carousel-post .bg-child:nth-child(1) {
        background-color: var(--clr-ui-200);
    }
    
    .carousel-post .bg-child:nth-child(2) {
        background-color: var(--clr-ui-300);
    }
    
    .carousel-post.bg-child:nth-child(3) {
        background-color: var(--clr-ui-400);
    }
    
    .carousel-post .post-cards--card>.bg-child:nth-child(4) {
        background-color: var(--clr-ui-500);
    }
    
    .carousel-post .post-cards--card>.bg-child:nth-child(5) {
        background-color: var(--clr-ui-600);
    }
    
    .carousel-post .post-cards--card>.bg-child:nth-child(6) {
        background-color: var(--clr-ui-700);
    }
    
    .card-teaser--post date {
        font-size: var(--fs-small);
        color: var(--clr-neutral-900);
    }
    
    .card-teaser--post h2 {
        font-size: var(--fs-headline-h2);
        margin: .5em 0;
    }
    
    .card-teaser--post h2 a {
        display: block;
        font-size: var(--fs-headline-h2);
        margin: .5em 0;
        color: var(--clr-neutral-900)
    }
    
    .card-teaser--post h2 a:hover {
        color: var(--clr-ui-200);
    }
    
    .card-teaser--post p {
        font-size: var(--fs-base);
    }
    
    .card-teaser--post .read-more {
        display: inline-flex;
        font-size: var(--fs-base);
        color: var(--clr-neutral-900);
        text-decoration: underline;
        margin: .5em 0;
    }
    /* Gutenberg styles */
    
    .wp-gutenberg {
        display: block;
        position: relative;
        margin: 0 0 2.5em 0;
    }
    
    .wp-gutenberg--editor {
        color: var(--clr-neutral-900);
    }
    
    .wp-gutenberg--editor date {
        font-size: var(--fs-small);
        color: var(--clr-neutral-900);
    }
    
    .wp-gutenberg--editor h1 {
        max-width: 26ch;
        font-size: var(--fs-headline-h1);
    }
    
    .wp-gutenberg--editor h2 {
        font-size: var(--fs-headline-h2);
    }
    
    .wp-gutenberg--editor h3 {
        font-size: var(--fs-headline-h3);
    }
    
    .wp-gutenberg--editor p {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .wp-gutenberg--editor ul {
        font-size: var(--fs-base);
        margin: 1em 0;
    }
    
    .wp-gutenberg--editor li {
        display: list-item;
    }
    
    .wp-gutenberg--editor p a,
    .wp-gutenberg--editor li a {
        color: var(--clr-ui-200);
    }
    
    .wp-gutenberg--editor p a:hover,
    .wp-gutenberg--editor li a:hover {
        color: var(--clr-ui-200);
        text-decoration: underline
    }
    
    .wp-backlink {
        width: 100%;
        display: flex;
        padding: 2.5em 0;
    }
    
    .wp-backlink--link {
        background-color: var(--clr-ui-200);
        border-radius: 100vw;
        color: var(--clr-neutral-100);
        min-width: 240px;
        display: inline-flex;
        gap: 1em;
        justify-content: center;
        align-items: center;
        border: 0;
        padding: 1em;
        cursor: pointer;
    }
    /* Custom Footer styles */
    
    .site-footer {
        --max-width: 100%;
        width: min(var(--max-width));
        margin: 0 auto;
        margin-inline: auto;
        padding-block: 5em;
        background-color: var(--clr-ui-200);
        position: relative;
    }
    
    .site-footer::before {
        content: '';
        display: block;
        width: 100%;
        height: 2em;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        border-radius: 0 0 2em 2em;
    }
    
    .site-footer>div {
        --max-width: 80em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2em;
    }
    
    .block-content {
        position: relative;
    }
    
    .block-content--headline h5 {
        font-size: var(--fs-headline-h5);
        color: var(--clr-neutral-100);
        margin: 0 0 .5em 0;
    }
    
    .block-content--list ul {
        font-size: var(--fs-base);
        font-weight: var(--fw-regular);
        color: var(--clr-neutral-100);
        line-height: 1.4;
        margin: .5em 0;
    }
    
    .block-content--list li {
        display: list-item;
    }
    
    .block-content--list li a {
        font-size: var(--fs-base);
        color: var(--clr-neutral-100);
    }
    
    .block-content--list li a:hover {
        color: var(--clr-neutral-900);
    }
    
    .custom-content--button {
        margin: 0 0 1em 0;
    }
    
    .custom-content--button .button-primary {
        min-width: 90vw;
    }
    
    @media (min-width: 40em) {
        .custom-content--button .button-primary {
            min-width: 220px;
        }
    }
    
    .custom-content--headline h5 {
        min-width: 220px;
        font-family: var(--ff-medium);
        font-size: var(--fs-base);
        color: var(--clr-neutral-100);
        outline: 1px solid var(--clr-neutral-100);
        border-radius: 100vw;
        padding: .5em;
        text-align: center;
        margin: 0 0 .5em 0;
    }
    
    .custom-content--list {
        background-color: var(--clr-neutral-100);
        padding: 1em;
        border-radius: 1em;
        min-width: 90vw;
    }
    
    @media (min-width: 40em) {
        .custom-content--list {
            min-width: auto;
        }
    }
    
    .custom-content--list ul {
        font-family: var(--ff-medium);
        font-size: var(--fs-base);
        line-height: 1.4;
        margin: .5em 0;
        text-align: center;
    }
    
    .custom-content--list li {
        color: var(--clr-ui-200);
    }
    
    .custom-content--list li strong,
    .custom-content--list li a {
        font-family: var(--ff-headline);
        color: var(--clr-ui-200);
    }
    
    .footer-menu nav>* {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1em;
        margin: 1em 0;
    }
    
    .footer-menu nav li a {
        font-size: var(--fs-base);
        color: var(--clr-neutral-100);
    }
    
    .footer-menu nav li a:hover {
        color: var(--clr-neutral-900);
    }
    
    .footer-social ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .social-icon {
        transition: translateY 0.2s cubic-bezier(.77, .49, .46, 1.15), -webkit-transform 0.2s ease-in;
    }
    
    .social-icon:hover {
        will-change: translateY;
        transform: translateY(-4px);
    }
    
    @media (min-width: 52em) {
        .site-footer--illustration {
            display: none;
        }
    }
    
    @media (min-width: 64em) {
        .site-footer--illustration {
            width: 260px;
            height: 260px;
            position: absolute;
            top: 5em;
            right: calc(15% - 180px);
            display: block;
        }
    }
    
    @media (min-width: 78em) {
        .site-footer--illustration {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 5em;
            right: calc(15% - 150px);
            display: block;
        }
    }
    
    @media (min-width: 80em) {
        .site-footer--illustration {
            width: 360px;
            height: 360px;
            position: absolute;
            top: 5em;
            right: calc(25% - 300px);
            display: block;
        }
    }
    
    @media (min-width: 84em) {
        .site-footer--illustration {
            width: 380px;
            height: 380px;
            position: absolute;
            top: 5em;
            right: calc(25% - 324px);
            display: block;
        }
    }
    
    @media (min-width: 86em) {
        .site-footer--illustration {
            width: 440px;
            height: 440px;
            position: absolute;
            top: 5em;
            right: calc(25% - 320px);
            display: block;
        }
    }
    /* Grid Gallery styles */
    
    .container-gallery {
        position: relative;
    }
    
    .container-gallery--headline h2 {
        font-size: var(--fs-headline-h2);
        text-align: center;
        max-inline-size: none;
        margin: .5em auto 1em;
    }
    
    .grid-gallery {
        display: grid;
        gap: 1em;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: 'item1 item1 item2 item3 item3' 'item4 item5 item5 item3 item3' 'item6 item6 item7 item7 item8' 'item9 item9 item7 item7 item10'
    }
    
    .grid-gallery--item img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
        min-height: 12rem;
    }
    
    .item-01 {
        grid-area: item1;
    }
    
    .item-02 {
        grid-area: item2;
    }
    
    .item-03 {
        grid-area: item3;
    }
    
    .item-04 {
        grid-area: item4;
    }
    
    .item-05 {
        grid-area: item5;
    }
    
    .item-06 {
        grid-area: item6;
    }
    
    .item-07 {
        grid-area: item7;
    }
    
    .item-08 {
        grid-area: item8;
    }
    
    .item-09 {
        grid-area: item9;
    }
    
    .item-10 {
        grid-area: item10;
    }
    
    @media (max-width: 768px) {
        .grid-gallery {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas: "item1 item1 item2" "item3 item4 item2" "item5 item5 item6" "item8 item7 item7" "item8 item7 item7" "item9 item9 item10";
        }
    }
    
    @media (max-width: 620px) {
        .grid-gallery {
            grid-template-columns: 1fr 1fr;
            grid-template-areas: "item1 item2" "item3 item3" "item4 item4" "item5 item5" "item6 item8" "item7 item7" "item9 item10";
        }
    }
    
    @media (max-width: 360px) {
        .grid-gallery {
            grid-template-columns: 1fr;
            grid-template-areas: "item1" "item2" "item3" "item4" "item5" "item6" "item7" "item8" "item9" "item10";
        }
    }
    
    .iframe-block {
        position: relative;
        /*padding-bottom: 66.25%;*/
        overflow: hidden;
        max-width: 100%;
        height: auto;
    }
    
    .iframe-block iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    #map {
        height: 600px;
        width: 100%;
    }
    /* Instagram */
    
    .sbi_inner_wrap {
        border: 1px solid var(--clr-ui-200);
    }
    
    .sbi-theme:not(.sbi-default_theme)#sb_instagram.sbi-style-boxed .sbi_info .sbi_meta {
        padding: 0 20px 15px;
    }
    
    .sbi-theme:not(.sbi-default_theme,
    .sbi-overlap)#sb_instagram.sbi-style-boxed .sbi-user-info {
        padding: 20px 15px 0;
    }
    /* Bookly */
    
    .bookly-summary-price-mark {
        display: none;
    }

/* Accordions */
.accordion-buttons {
	margin-bottom:80px;
}
.accordion-mobile-button {
	display:none;	
}

@media screen and (max-width:768px) {
	
	.accordion-desktop-button {
		display:none;	
	}
	.accordion-mobile-button {
		display:inline-flex;	
	}
}