/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- variables */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- framework */

    /* !- widths */

    --width-4xs: 375px;
    --width-3xs: 480px;
    --width-2xs: 560px;
    --width-xs: 660px;
    --width-s: 740px;
    --width-m: 960px;
    --width-l: 1024px;
    --width-xl: 1140px;
    --width-2xl: 1280px;
    --width-3xl: 1360px;
    --width-4xl: 1440px;
    --width-full-content: 1920px;
    --width-full: none;

    /* !- spacings */

    /**
     * @info
     * `clamp` values based on the same settings as for the 'fluid-type-scale'
     * used for the 'fluid' font-sizes (`--font-size-fluid-*`):
     * - root font size: 62.5%
     * - min device width (mobile): 375px
     * - max device width (desktop): 1440px
     *
     * @link https://geary.co/clamp-calculator/
     */

    --spacing-gutter: clamp(1.6rem, 4.507vw + -0.09rem, 6.4rem);

    --spacing-none: 0rem;
    --spacing-3xs: clamp(0.5rem, 0.469vw + 0.324rem, 1rem);
    --spacing-2xs: clamp(0.8rem, 0.751vw + 0.518rem, 1.6rem);
    --spacing-xs: clamp(1rem, 0.939vw + 0.648rem, 2rem);
    --spacing-s: clamp(1.6rem, 1.502vw + 1.037rem, 3.2rem);
    --spacing-m: clamp(2rem, 2.629vw + 1.014rem, 4.8rem);
    --spacing-l: clamp(3rem, 3.192vw + 1.803rem, 6.4rem);
    --spacing-xl: clamp(3.6rem, 3.38vw + 2.332rem, 7.2rem);
    --spacing-2xl: clamp(4.5rem, 4.225vw + 2.915rem, 9rem);
    --spacing-3xl: clamp(5.6rem, 5.258vw + 3.628rem, 11.2rem);

    /* !- animations (inview) */

    --animation-inview-shift: 8rem;
    --animation-inview-duration: 0.6s;
    --animation-inview-delay: 0.2s;
    --animation-inview-opacity-start: 0;
    --animation-inview-scale-start: 0.4;

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- style */

    /* !- colors */

    --color-primary: var(--lp-color-primary);
    --color-secondary: var(--lp-color-secondary);

    --color-text-main: var(--lp-color-text-main);
    --color-text-complement: var(--lp-color-text-complement);

    --color-text-primary: var(--lp-color-text-primary);
    --color-text-on-primary: var(--lp-color-text-on-primary);
    --color-background-primary: var(--lp-color-background-primary);

    --color-text-secondary: var(--lp-color-text-secondary);
    --color-text-on-secondary: var(--lp-color-text-on-secondary);
    --color-background-secondary: var(--lp-color-background-secondary);

    --color-text-on-background-complement: var(
        --lp-color-text-on-background-complement
    );
    --color-background-complement: var(--lp-color-background-complement);

    --color-text-on-background-1: var(--lp-color-text-on-background-1);
    --color-background-1: var(--lp-color-background-1);
    --color-text-on-background-2: var(--lp-color-text-on-background-2);
    --color-background-2: var(--lp-color-background-2);
    --color-text-on-background-3: var(--lp-color-text-on-background-3);
    --color-background-3: var(--lp-color-background-3);

    --color-text-on-page: var(--lp-color-text-on-page);
    --color-background-page: var(--lp-color-background-page);

    --color-text-on-navigation: var(--lp-color-text-on-navigation);
    --color-background-navigation: var(--lp-color-background-navigation);

    --color-background-media-placeholder: var(
        --lp-color-background-media-placeholder
    );

    --color-stroke-1: var(--lp-color-stroke-1);
    --color-stroke-2: var(--lp-color-stroke-2);
    --color-stroke-3: var(--lp-color-stroke-3);

    --color-scrollbar-thumb: var(--lp-color-scrollbar-thumb);
    --color-scrollbar-track: var(--lp-color-scrollbar-track);

    --color-selection-text-primary: var(--lp-color-selection-text-primary);
    --color-selection-background-primary: var(
        --lp-color-selection-background-primary
    );
    --color-selection-text-secondary: var(--lp-color-selection-text-secondary);
    --color-selection-background-secondary: var(
        --lp-color-selection-background-secondary
    );

    --color-outline-focus-primary: var(--lp-color-outline-focus-primary);
    --color-outline-focus-secondary: var(--lp-color-outline-focus-secondary);

    --color-interactive-idle: var(--lp-color-interactive-idle);
    --color-interactive-active: var(--lp-color-interactive-active);

    --color-indicator-text-on-success: var(
        --lp-color-indicator-text-on-success
    );
    --color-indicator-success: var(--lp-color-indicator-success);
    --color-indicator-text-on-notice: var(--lp-color-indicator-text-on-notice);
    --color-indicator-notice: var(--lp-color-indicator-notice);
    --color-indicator-text-on-warning: var(
        --lp-color-indicator-text-on-warning
    );
    --color-indicator-warning: var(--lp-color-indicator-warning);
    --color-indicator-text-on-error: var(--lp-color-indicator-text-on-error);
    --color-indicator-error: var(--lp-color-indicator-error);

    /* !- typography */

    --font-family-primary: var(--lp-font-family-primary);
    --font-family-secondary: var(--lp-font-family-secondary);

    --font-style-main: var(--lp-font-style-main);
    --font-style-accent: var(--lp-font-style-accent);

    --font-weight-s: var(--lp-font-weight-s);
    --font-weight-m: var(--lp-font-weight-m);
    --font-weight-l: var(--lp-font-weight-l);
    --font-weight-xl: var(--lp-font-weight-xl);
    --font-weight-2xl: var(--lp-font-weight-2xl);
    --font-weight-3xl: var(--lp-font-weight-3xl);

    --font-weight-text-strong: var(--lp-font-weight-text-strong);

    --font-size-fluid-m: var(--lp-font-size-fluid-m);
    --font-size-fluid-l: var(--lp-font-size-fluid-l);
    --font-size-fluid-xl: var(--lp-font-size-fluid-xl);
    --font-size-fluid-2xl: var(--lp-font-size-fluid-2xl);
    --font-size-fluid-3xl: var(--lp-font-size-fluid-3xl);
    --font-size-fluid-4xl: var(--lp-font-size-fluid-4xl);
    --font-size-fluid-5xl: var(--lp-font-size-fluid-5xl);
    --font-size-fluid-6xl: var(--lp-font-size-fluid-6xl);

    --font-size-static-xs: var(--lp-font-size-static-xs);
    --font-size-static-s: var(--lp-font-size-static-s);
    --font-size-static-m: var(--lp-font-size-static-m);
    --font-size-static-l: var(--lp-font-size-static-l);
    --font-size-static-xl: var(--lp-font-size-static-xl);

    --line-height-s: var(--lp-line-height-s);
    --line-height-m: var(--lp-line-height-m);
    --line-height-l: var(--lp-line-height-l);
    --line-height-xl: var(--lp-line-height-xl);
    --line-height-2xl: var(--lp-line-height-2xl);
    --line-height-3xl: var(--lp-line-height-3xl);

    --letter-spacing-m: var(--lp-letter-spacing-m);

    --font-text-copy: var(--lp-font-text-copy);
    --font-text-teaser: var(--lp-font-text-teaser);
    --font-text-highlight: var(--lp-font-text-highlight);
    --font-text-h1: var(--lp-font-text-h1);
    --font-text-h2: var(--lp-font-text-h2);
    --font-text-h3: var(--lp-font-text-h3);
    --font-text-h4: var(--lp-font-text-h4);
    --font-text-h5: var(--lp-font-text-h5);
    --font-text-h6: var(--lp-font-text-h6);
    --font-text-list: var(--lp-font-text-list);
    --font-text-button: var(--lp-font-text-button);
    --font-text-label: var(--lp-font-text-label);
    --font-text-navigation: var(--lp-font-text-navigation);
    --font-text-aside-cta: var(--lp-font-text-aside-cta);

    --text-decoration-thickness-interactive: 0.1rem; /** @info do *not* use half pixels (e.g., 0.15rem) */
    --text-decoration-line-interactive: underline;
    --text-decoration-style-interactive: solid;
    --text-decoration-color-interactive-idle: transparent;
    --text-decoration-color-interactive-active: currentcolor;

    --text-underline-offset-main: 0.05em;
    --text-underline-offset-interactive: 0.3em;

    --list-item-spacing: var(--lp-list-item-spacing);
    --list-item-bullet-spacing: var(--lp-list-item-bullet-spacing);
    --list-item-bullet-size: var(--lp-list-item-bullet-size);
    --list-item-bullet-align-vertical: var(
        --lp-list-item-bullet-align-vertical
    );
    --list-item-bullet-border-radius: var(--lp-list-item-bullet-border-radius);
    --list-item-bullet-color: var(--color-text-secondary);
    --list-item-icon-code: "\e919"; /** @info `bh-font-circle-check` icon from the bakehouse iconset */
    --list-item-icon-spacing: var(--lp-list-item-icon-spacing);
    --list-item-icon-size: var(--icon-size-xs);
    --list-item-icon-align-vertical: var(--lp-list-item-icon-align-vertical);
    --list-item-icon-color: var(--color-text-secondary);

    /* !- icons */

    /** @info use even values for the icon sizes */
    --icon-size-xs: 1.6rem;
    --icon-size-s: 2rem;
    --icon-size-m: 2.4rem;
    --icon-size-l: 3.2rem;
    --icon-size-xl: 4.8rem;

    /* !- borders */

    --border-width-main: 0.1rem; /** @info do *not* use half pixels (e.g., 0.15rem) */
    --border-style-main: solid;
    --border-color-main: var(--color-stroke-2);
    --border-main: var(--border-width-main) var(--border-style-main)
        var(--border-color-main);

    --border-width-highlight: 0.2rem; /** @info do *not* use half pixels (e.g., 0.15rem) */
    --border-style-highlight: solid;
    --border-color-highlight: var(--color-primary);
    --border-highlight: var(--border-width-highlight)
        var(--border-style-highlight) var(--border-color-highlight);

    --border-radius-s: var(--lp-border-radius-s);
    --border-radius-m: var(--lp-border-radius-m);
    --border-radius-l: var(--lp-border-radius-l);

    --border-radius-media: var(--border-radius-m);

    --outline-width-focus: 0.2rem; /** @info do *not* use half pixels (e.g., 0.15rem) */
    --outline-style-focus: solid;
    --outline-color-focus-primary: var(--color-outline-focus-primary);
    --outline-color-focus-secondary: var(--color-outline-focus-secondary);
    --outline-focus-primary: var(--outline-width-focus)
        var(--outline-style-focus) var(--outline-color-focus-primary);
    --outline-focus-secondary: var(--outline-width-focus)
        var(--outline-style-focus) var(--outline-color-focus-secondary);
    --outline-offset-focus: 0;
    --outline-offset-focus-edge: calc(var(--outline-width-focus) * -1);

    /* !- effects */

    --opacity-1: var(--lp-opacity-1);
    --opacity-2: var(--lp-opacity-2);
    --opacity-3: var(--lp-opacity-3);
    --opacity-4: var(--lp-opacity-4);

    --box-shadow-color: var(--lp-box-shadow-color);
    --box-shadow-offset-x: var(--lp-box-shadow-offset-x);
    --box-shadow-offset-y: var(--lp-box-shadow-offset-y);
    --box-shadow-blur-radius: var(--lp-box-shadow-blur-radius);
    --box-shadow-spread-radius: var(--lp-box-shadow-spread-radius);
    --box-shadow-main: var(--lp-box-shadow-main);
    --box-shadow-alternate: var(--lp-box-shadow-alternate);

    --background-blur-radius-main: 2rem;

    /**
     * @info
     * the `backdrop-filter` function renders approx. half the blur radius of `box-shadow`
     * @see https://github.com/w3c/fxtf-drafts/issues/102
     *
     * @warning
     * safari does not support the usage of custom properties for `-webkit-backdrop-filter`
     * because of this, `-webkit-backdrop-filter` is set to `blur(1rem)` manually at the moment
     *
     * @update consider removing `-webkit-backdrop-filter` for the future when browser support is sufficient
     */
    --backdrop-filter-blur-main: blur(
        calc(var(--background-blur-radius-main) * 0.5)
    );

    /* !- transitions */

    --transition-duration-s: 0.2s;
    --transition-duration-m: 0.3s;
    --transition-duration-l: 0.6s;
    --transition-timing-function-s: ease-in-out;
    --transition-timing-function-m: ease-in-out;
    --transition-timing-function-l: ease-in-out;
    --transition-s: var(--transition-duration-s)
        var(--transition-timing-function-s);
    --transition-m: var(--transition-duration-m)
        var(--transition-timing-function-m);
    --transition-l: var(--transition-duration-l)
        var(--transition-timing-function-l);

    --transition-interactive: var(--transition-m);

    /* !- buttons */

    --button-border-width: 0.1rem; /** @info do *not* use half pixels (e.g., 0.15rem) */
    --button-border-style: solid;
    --button-border-radius: var(--border-radius-s);

    --button-padding-block: 0.75em;
    --button-padding-inline-idle: var(--spacing-s);
    --button-padding-inline-active: calc(
        var(--button-padding-inline-idle) * 1.5
    );

    --button-transition: var(--transition-interactive);

    --button-primary-color-border-idle: var(
        --button-primary-color-background-idle
    );
    --button-primary-color-border-active: var(
        --button-primary-color-background-active
    );
    --button-primary-color-text-idle: var(--color-text-on-primary);
    --button-primary-color-text-active: var(--button-primary-color-text-idle);
    --button-primary-color-background-idle: var(--color-background-primary);
    --button-primary-color-background-active: var(
        --button-primary-color-background-idle
    );

    --button-outline-primary-color-border-idle: var(
        --button-outline-primary-color-text-idle
    );
    --button-outline-primary-color-border-active: var(
        --button-outline-primary-color-background-active
    );
    --button-outline-primary-color-text-idle: var(--color-text-primary);
    --button-outline-primary-color-text-active: var(--color-text-on-primary);
    --button-outline-primary-color-background-idle: transparent;
    --button-outline-primary-color-background-active: var(
        --color-background-primary
    );

    --button-link-primary-color-border-idle: transparent;
    --button-link-primary-color-border-active: var(
        --button-link-primary-color-text-active
    );
    --button-link-primary-color-text-idle: var(--color-text-primary);
    --button-link-primary-color-text-active: var(
        --button-link-primary-color-text-idle
    );

    --button-secondary-color-border-idle: var(
        --button-secondary-color-background-idle
    );
    --button-secondary-color-border-active: var(
        --button-secondary-color-background-active
    );
    --button-secondary-color-text-idle: var(--color-text-on-secondary);
    --button-secondary-color-text-active: var(
        --button-secondary-color-text-idle
    );
    --button-secondary-color-background-idle: var(--color-background-secondary);
    --button-secondary-color-background-active: var(
        --button-secondary-color-background-idle
    );

    --button-outline-secondary-color-border-idle: var(
        --button-outline-secondary-color-text-idle
    );
    --button-outline-secondary-color-border-active: var(
        --button-outline-secondary-color-background-active
    );
    --button-outline-secondary-color-text-idle: var(--color-text-secondary);
    --button-outline-secondary-color-text-active: var(
        --color-text-on-secondary
    );
    --button-outline-secondary-color-background-idle: transparent;
    --button-outline-secondary-color-background-active: var(
        --color-background-secondary
    );

    --button-link-secondary-color-border-idle: transparent;
    --button-link-secondary-color-border-active: var(
        --button-link-secondary-color-text-active
    );
    --button-link-secondary-color-text-idle: var(--color-text-secondary);
    --button-link-secondary-color-text-active: var(
        --button-link-secondary-color-text-idle
    );

    --button-alternative-color-border-idle: var(
        --button-alternative-color-background-idle
    );
    --button-alternative-color-border-active: var(
        --button-alternative-color-background-active
    );
    --button-alternative-color-text-idle: var(--color-text-primary);
    --button-alternative-color-text-active: var(
        --button-alternative-color-text-idle
    );
    --button-alternative-color-background-idle: var(--color-background-1);
    --button-alternative-color-background-active: var(
        --button-alternative-color-background-idle
    );

    --button-outline-alternative-color-border-idle: var(--color-stroke-3);
    --button-outline-alternative-color-border-active: var(
        --button-outline-alternative-color-background-active
    );
    --button-outline-alternative-color-text-idle: var(--color-text-primary);
    --button-outline-alternative-color-text-active: var(
        --button-outline-alternative-color-text-idle
    );
    --button-outline-alternative-color-background-idle: transparent;
    --button-outline-alternative-color-background-active: var(
        --color-background-1
    );

    --button-link-alternative-color-border-idle: transparent;
    --button-link-alternative-color-border-active: var(--color-stroke-3);
    --button-link-alternative-color-text-idle: var(--color-text-primary);
    --button-link-alternative-color-text-active: var(
        --button-link-alternative-color-text-idle
    );

    --button-complement-color-border-idle: var(
        --button-complement-color-background-idle
    );
    --button-complement-color-border-active: var(
        --button-complement-color-background-active
    );
    --button-complement-color-text-idle: var(--color-text-primary);
    --button-complement-color-text-active: var(
        --button-complement-color-text-idle
    );
    --button-complement-color-background-idle: var(
        --color-background-complement
    );
    --button-complement-color-background-active: var(
        --button-complement-color-background-idle
    );

    --button-outline-complement-color-border-idle: var(
        --color-background-complement
    );
    --button-outline-complement-color-border-active: var(
        --button-outline-complement-color-background-active
    );
    --button-outline-complement-color-text-idle: var(--color-text-complement);
    --button-outline-complement-color-text-active: var(--color-text-primary);
    --button-outline-complement-color-background-idle: transparent;
    --button-outline-complement-color-background-active: var(
        --color-background-complement
    );

    --button-link-complement-color-border-idle: transparent;
    --button-link-complement-color-border-active: var(
        --button-link-complement-color-text-active
    );
    --button-link-complement-color-text-idle: var(--color-text-complement);
    --button-link-complement-color-text-active: var(
        --button-link-complement-color-text-idle
    );

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- template */

    /* !- navigation */

    --navigation-font-text: var(--font-text-navigation);
    --navigation-transition: var(--transition-m);

    --navigation-list-gap-row: var(--spacing-3xs);
    --navigation-list-gap-column: var(--spacing-xs);
    --navigation-list-item-link-gap: 0.3em;
    --navigation-list-item-link-icon-size: var(--icon-size-s);

    --navigation-menu-spacing-s: var(--spacing-3xs);
    --navigation-menu-spacing-m: var(--spacing-2xs);
    --navigation-menu-button-icon-size: var(--icon-size-m);
    --navigation-menu-list-z-index: 85;
    --navigation-menu-list-shift: 1rem;
    --navigation-menu-list-border-radius: var(--border-radius-l);
    --navigation-menu-list-color-text-on-background: var(
        --color-text-on-background-complement
    );
    --navigation-menu-list-color-background: var(--color-background-complement);
    --navigation-menu-list-box-shadow: var(--box-shadow-main);
    --navigation-menu-list-item-link-opacity-idle: var(--opacity-2);
    --navigation-menu-list-item-link-opacity-active: 1;

    --navigation-anchor-z-index: 80;
    --navigation-anchor-spacing-horizontal: var(--spacing-s);
    --navigation-anchor-height-desktop: 6rem;
    --navigation-anchor-height-mobile: var(--navigation-anchor-height-desktop);
    --navigation-anchor-logo-width: var(--lp-navigation-anchor-logo-width);
    --navigation-anchor-font-text: var(--font-text-navigation);
    --navigation-anchor-color-text-on-background: var(
        --color-text-on-navigation
    );
    --navigation-anchor-color-background: var(--color-background-navigation);
    --navigation-anchor-color-interactive-idle: var(--color-text-primary);
    --navigation-anchor-color-interactive-active: var(--color-text-secondary);
    --navigation-anchor-backdrop-filter: var(--backdrop-filter-blur-main);
    --navigation-anchor-box-shadow: var(--box-shadow-main);
    --navigation-anchor-transition: var(--transition-m);

    /* !- skip links */

    --skip-links-z-index: 99;
    --skip-links-spacing-m: 1rem;
    --skip-links-spacing-screen-vertical: var(--skip-links-spacing-m);
    --skip-links-border-radius: var(--border-radius-m);
    --skip-links-font-text: var(--font-text-navigation);
    --skip-links-color-text-on-background: var(--color-text-on-navigation);
    --skip-links-color-background: var(--color-background-navigation);
    --skip-links-backdrop-filter: var(--backdrop-filter-blur-main);
    --skip-links-box-shadow: var(--box-shadow-main);
    --skip-links-transition-in-preparation: var(--transition-m)
        calc(var(--transition-duration-l) * 0.2);
    --skip-links-transition-in: var(--transition-l);
    --skip-links-transition-out: var(--transition-m);

    /* !- aside cta */

    --aside-cta-z-index: 90;
    --aside-cta-border-radius: var(--border-radius-l);
    --aside-cta-width: var(--width-m);
    --aside-cta-height-default: 6.4rem; /** @info default height without (text) wrapping */
    --aside-cta-height-dynamic: var(
        --aside-cta-height-default
    ); /** @see `dynamicCtaHeight` function defined in `EXT:bh_landingpages/Resources/Public/Elements/el-cta/el-cta.js` */
    --aside-cta-spacing-m: 1rem;
    --aside-cta-spacing-l: 1.4rem;
    --aside-cta-spacing-screen-vertical: var(--aside-cta-spacing-m);
    --aside-cta-font-text: var(--font-text-aside-cta);
    --aside-cta-color-text-on-background-primary: var(--color-text-on-primary);
    --aside-cta-color-background-primary: var(--color-background-primary);
    --aside-cta-color-text-on-background-secondary: var(
        --color-text-on-secondary
    );
    --aside-cta-color-background-secondary: var(--color-background-secondary);
    --aside-cta-color-text-on-background-alternative: var(
        --color-text-on-background-3
    );
    --aside-cta-color-background-alternative: var(--color-background-3);
    --aside-cta-color-background-opacity: 15%;
    --aside-cta-backdrop-filter: var(--backdrop-filter-blur-main);
    --aside-cta-box-shadow: var(--box-shadow-main);
    --aside-cta-transition-in: var(--transition-l);
    --aside-cta-transition-out: var(--transition-m);
    --aside-cta-transition-out-delayed: var(--aside-cta-transition-out)
        calc(var(--transition-duration-m) * 0.2);

    /* !- dialog popup */

    --dialog-popup-z-index: 98;
    --dialog-popup-border-radius: var(--border-radius-l);
    --dialog-popup-width: var(--width-s);
    --dialog-popup-height: clamp(52rem, 80vh, 84rem);
    --dialog-popup-spacing-screen-vertical: clamp(
        var(--spacing-xs),
        10vh,
        var(--spacing-s)
    );
    --dialog-popup-spacing-s: var(--spacing-2xs);
    --dialog-popup-spacing-m: var(--spacing-s);
    --dialog-popup-color-text-highlight-primary: var(--color-text-primary);
    --dialog-popup-color-text-highlight-secondary: var(--color-text-secondary);
    --dialog-popup-color-text-on-background: var(--color-text-on-page);
    --dialog-popup-color-background: var(--color-background-page);
    --dialog-popup-color-background-backdrop: rgb(0 0 0 / 70%);
    --dialog-popup-transition-in: var(--transition-l);
    --dialog-popup-transition-out: var(--transition-m);
    --dialog-popup-transition-out-delayed: var(--dialog-popup-transition-out)
        calc(var(--transition-duration-m) * 0.2);
    --dialog-popup-close-border-radius: var(--border-radius-s);
    --dialog-popup-close-spacing: var(--dialog-popup-spacing-s);
    --dialog-popup-close-size: 3.2rem;
    --dialog-popup-close-size-icon: 0.75em; /** @info use the `em` unit and a value <= `1em` relative to `--dialog-popup-close-size` */
    --dialog-popup-close-color-text-on-background: var(--color-text-on-primary);
    --dialog-popup-close-color-background: var(--color-background-primary);
    --dialog-popup-close-transition: var(--transition-m);

    /* !- footer */

    --footer-logo-width-desktop: var(--lp-footer-logo-width-desktop);
    --footer-logo-width-mobile: var(--lp-footer-logo-width-mobile);
    --footer-spacing-horizontal-s: var(--spacing-2xs);
    --footer-spacing-horizontal-m: var(--spacing-s);
    --footer-spacing-vertical-xs: var(--spacing-2xs);
    --footer-spacing-vertical-s: var(--spacing-s);
    --footer-spacing-vertical-m: var(--spacing-m);
    --footer-address-heading-color-text: var(--color-text-primary);
    --footer-contact-link-color-idle: var(--color-text-secondary);
    --footer-contact-link-color-active: var(--color-text-primary);

    /* !- elements */

    --header-logo-width-desktop: var(--lp-header-logo-width-desktop);
    --header-logo-width-mobile: var(--lp-header-logo-width-mobile);
    --header-navigation-language-width-desktop: var(
        --lp-header-navigation-language-width-desktop
    );
    --header-navigation-language-width-mobile: var(
        --lp-header-navigation-language-width-mobile
    );
    --header-spacing-horizontal-s: var(--spacing-2xs);
    --header-spacing-vertical-s: var(--spacing-xs);
    --header-spacing-vertical-m: var(--spacing-m);
    --header-spacing-vertical-l: var(--spacing-l);
    --header-color-text-content: var(--color-text-complement);
    --header-media-gradient-height: 47%; /** @warning a value >=50% would cause the 2 pseudo-elements of `.el-header__media` to overlap, resulting in visual bugs in certain browsers */
    --header-media-gradient-background: linear-gradient(
        0deg,
        rgb(0 0 0 / 0%) 0%,
        rgb(0 0 0 / 30%) 74.5%
    );
    --header-badge-text-size-desktop: var(
        --lp-header-badge-text-size-desktop
    ); /** @info value is set for `badgeMessage` defined in `/fileadmin/templates/ext/bh_landingpages/typoscript/constants.typoscript` */
    --header-badge-text-size-mobile: var(
        --lp-header-badge-text-size-mobile
    ); /** @info value is set for `badgeMessage` defined in `/fileadmin/templates/ext/bh_landingpages/typoscript/constants.typoscript` */
    --header-badge-image-size-desktop: var(
        --lp-header-badge-image-size-desktop
    );
    --header-badge-image-size-mobile: var(--lp-header-badge-image-size-mobile);
    --header-badge-text-tilt-idle: 0deg;
    --header-badge-image-tilt-idle: 9deg;
    --header-badge-text-tilt-active: 9deg;
    --header-badge-image-tilt-active: 18deg;
    --header-badge-color-text-on-background-idle: var(--color-text-on-primary);
    --header-badge-color-background-idle: var(--color-background-primary);
    --header-badge-color-text-on-background-active: var(
        --color-text-on-secondary
    );
    --header-badge-color-background-active: var(--color-background-secondary);
    --header-badge-image-color-background-placeholder: var(
        --color-background-media-placeholder
    );
    --header-transition: var(--transition-duration-m);

    --section-spacing-vertical-s: var(--spacing-2xs);
    --section-spacing-vertical-m: var(--spacing-s);
    --section-spacing-vertical-l: var(--spacing-m);
    --section-spacer-height: var(--spacing-3xs);
    --section-spacer-line-height: var(--border-width-main);
    --section-spacer-line-gap: 1.2rem;
    --section-spacer-line-logo-size: var(
        --icon-size-xl
    ); /** @note overrules the set `--section-spacer-height` when 'section-spacer-line--logo' line variant is set */
    --section-spacer-line-color-1: var(--color-stroke-1);
    --section-spacer-line-color-2: var(--color-stroke-2);
    --section-spacer-line-color-3: var(--color-stroke-3);
    --section-spacer-line-color-logo: var(--section-spacer-line-color-2);
    --section-intro-group-width: 60ch;
    --section-intro-group-color-text-heading: var(--color-text-primary);

    --text-spacing-copy: 1em;
    --text-spacing-h1: 0.8em;
    --text-spacing-h2: 0.33em;
    --text-spacing-h3: 0.67em;
    --text-spacing-h4: 0.42em;
    --text-spacing-h5: 0.5em;
    --text-spacing-h6: 0.6em;
    --text-spacing-preformatted: 0.6em 0.8em;
    --text-spacing-table: 0.6em 0.8em;
    --text-block-border-radius: var(--border-radius-s);
    --text-block-color-text-on-background: var(--color-text-on-secondary);
    --text-block-color-background: var(--color-background-secondary);
    --text-columns-gap-s: var(--spacing-s);
    --text-columns-gap-m: var(--spacing-m);
    --text-columns-gap-l: var(--spacing-l);
    --text-columns-border: var(--border-main);

    --picture-spacing: var(--spacing-3xs);
    --picture-border-radius: var(--border-radius-media);
    --picture-background-image-height-fixed: calc(var(--spacing-3xl) * 4);
    --picture-font-size-copyright: var(--font-size-static-xs);
    --picture-color-text-on-picture: var(--color-text-complement);
    --picture-text-shadow: 0.1em 0.1em 0.3em rgb(0 0 0 / 60%);
    --picture-hover-icon-code: "\e90f"; /** @info `bh-font-plus` icon from the bakehouse iconset */
    --picture-hover-icon-border-radius: var(--border-radius-s);
    --picture-hover-icon-size: var(--icon-size-m);
    --picture-hover-icon-color: var(--color-text-primary);
    --picture-hover-icon-background: var(--color-background-complement);
    --picture-hover-icon-box-shadow: var(--box-shadow-alternate);
    --picture-transition: var(--transition-duration-m);

    --gallery-spacing: var(--spacing-3xs);
    --gallery-item-width-grid-desktop: clamp(
        13.3rem,
        18.028vw + 6.539rem,
        32.5rem
    ); /** @info `clamp` value based on the same settings as for the spacings (`--spacing-*`) */
    --gallery-item-height-grid-desktop: clamp(
        13rem,
        17.84vw + 6.31rem,
        32rem
    ); /** @info `clamp` value based on the same settings as for the spacings (`--spacing-*`) */
    --gallery-item-width-grid-mobile: var(--gallery-item-width-grid-desktop);
    --gallery-item-height-grid-mobile: var(--gallery-item-height-grid-desktop);
    --gallery-item-width-swiper-desktop: clamp(
        37.5rem,
        16.432vw + 31.338rem,
        55rem
    ); /** @info `clamp` value based on the same settings as for the spacings (`--spacing-*`) */
    --gallery-item-height-swiper-desktop: clamp(
        24.9rem,
        7.136vw + 22.224rem,
        32.5rem
    ); /** @info `clamp` value based on the same settings as for the spacings (`--spacing-*`) */
    --gallery-item-width-swiper-mobile: var(
        --gallery-item-width-swiper-desktop
    );
    --gallery-item-height-swiper-mobile: var(
        --gallery-item-height-swiper-desktop
    );

    --video-border-radius: var(--border-radius-media);

    --downloadlink-spacing: var(--spacing-2xs);
    --downloadlink-preview-image-size: 6.5rem; /** @info intrinsic size: 180 × 180 px; rendered size set in bh core: 65 × 65 px */
    --downloadlink-preview-image-border-radius: var(--border-radius-s);

    --accordions-gap-row: var(--spacing-m);
    --accordions-gap-column: var(--spacing-l);
    --accordions-image-height-desktop: clamp(
        25.6rem,
        28.545vw + 14.896rem,
        56rem
    ); /** @info `clamp` value based on the same settings as for the spacings (`--spacing-*`) */
    --accordions-image-height-mobile: var(--accordions-image-height-desktop);
    --accordions-image-color-background-placeholder: var(
        --color-background-media-placeholder
    );
    --accordion-toggler-spacing: var(--spacing-2xs);
    --accordion-toggler-border: var(--border-main);
    --accordion-toggler-padding: 0.75em 0rem;
    --accordion-toggler-font-text: var(--font-text-button);
    --accordion-toggler-icon-size: var(--icon-size-m);
    --accordion-toggler-color-text-idle: var(--color-text-primary);
    --accordion-toggler-color-text-idle-hover: var(--color-text-secondary);
    --accordion-toggler-color-text-active: var(--color-text-secondary);
    --accordion-toggler-color-text-active-hover: var(--color-text-primary);
    --accordion-toggler-transition: var(--transition-interactive);

    --tabs-spacing-xs: var(--spacing-3xs);
    --tabs-spacing-s: var(--spacing-s);
    --tabs-spacing-m: var(--spacing-m);
    --tabs-toggler-border-width-simple: 0 0 var(--border-width-main) 0;
    --tabs-toggler-border-width-filled: var(--border-width-main);
    --tabs-toggler-border-style: var(--border-style-main);
    --tabs-toggler-border-color-simple-idle: transparent;
    --tabs-toggler-border-color-simple-idle-hover: currentcolor;
    --tabs-toggler-border-color-simple-active: currentcolor;
    --tabs-toggler-border-color-simple-active-hover: currentcolor;
    --tabs-toggler-border-color-filled-idle: var(
        --tabs-toggler-color-background-filled-idle
    );
    --tabs-toggler-border-color-filled-idle-hover: var(
        --tabs-toggler-color-background-filled-idle-hover
    );
    --tabs-toggler-border-color-filled-active: var(
        --tabs-toggler-color-background-filled-active
    );
    --tabs-toggler-border-color-filled-active-hover: var(
        --tabs-toggler-color-background-filled-active-hover
    );
    --tabs-toggler-border-radius-simple: 0rem;
    --tabs-toggler-border-radius-filled: var(--border-radius-m);
    --tabs-toggler-padding-simple: 0.625em 0 0.5625em;
    --tabs-toggler-padding-filled: 0.66em 1.08em;
    --tabs-toggler-font-simple: var(--font-text-button);
    --tabs-toggler-font-filled: var(--font-text-copy);
    --tabs-toggler-color-text-simple-idle: var(--color-text-primary);
    --tabs-toggler-color-text-simple-idle-hover: var(--color-text-primary);
    --tabs-toggler-color-text-simple-active: var(--color-text-secondary);
    --tabs-toggler-color-text-simple-active-hover: var(--color-text-primary);
    --tabs-toggler-color-text-filled-idle: var(--color-text-primary);
    --tabs-toggler-color-text-filled-idle-hover: var(--color-text-on-primary);
    --tabs-toggler-color-text-filled-active: var(--color-text-on-secondary);
    --tabs-toggler-color-text-filled-active-hover: var(--color-text-on-primary);
    --tabs-toggler-color-background-simple: transparent;
    --tabs-toggler-color-background-filled-idle: var(--color-background-1);
    --tabs-toggler-color-background-filled-idle-hover: var(
        --color-background-primary
    );
    --tabs-toggler-color-background-filled-active: var(
        --color-background-secondary
    );
    --tabs-toggler-color-background-filled-active-hover: var(
        --color-background-primary
    );
    --tabs-toggler-transition: var(--transition-interactive);

    --scores-spacing-s: var(--spacing-3xs);
    --scores-spacing-m: var(--spacing-2xs);
    --scores-spacing-l: var(--spacing-s);
    --scores-border-radius: var(--border-radius-l);
    --scores-color-text-highlight: var(--color-text-primary);
    --scores-color-text-on-background-base: var(--color-text-on-background-2);
    --scores-color-background-base: var(--color-background-2);
    --scores-color-text-on-background-total: var(--color-text-on-background-1);
    --scores-color-background-total: var(--color-background-1);
    --score-border-radius: var(--border-radius-m);
    --score-width-basis-desktop: 17.6rem;
    --score-width-basis-mobile: 13.6rem;
    --score-platform-image-height: 2.4rem;
    --score-rating-spacing: 0.2rem;
    --score-box-shadow: var(--box-shadow-main);
    --score-scale-active: 1.03;
    --score-transition: var(--transition-interactive);

    --review-spacing-s: var(--spacing-3xs);
    --review-spacing-m: var(--spacing-xs);
    --review-spacing-l: var(--spacing-s);
    --review-width-desktop: 36rem;
    --review-width-mobile: 29rem;
    --review-border-width: var(--border-width-main);
    --review-border-color: var(--border-color-main);
    --review-icon-size: var(--icon-size-xs);
    --review-icon-gap: 0.3rem;
    --review-color-text-highlight: var(--color-text-primary);

    --partners-spacing: var(--spacing-2xs);
    --partner-width-desktop: 20rem;
    --partner-aspect-ratio-desktop: 2 / 1;
    --partner-width-mobile: 14rem;
    --partner-aspect-ratio-mobile: var(--partner-aspect-ratio-desktop);
    --partner-border-radius: var(--border-radius-s);
    --partner-image-color-background-placeholder: var(
        --color-background-media-placeholder
    );
    --partner-transition: var(--transition-interactive);

    --cookies-consent-button-list-spacing: var(--spacing-xs);
    --cookies-consent-button-list-border-radius: var(--border-radius-m);
    --cookies-consent-button-list-color-text-highlight: var(
        --color-text-primary
    );
    --cookies-consent-button-list-color-text-on-background: var(
        --color-text-on-background-1
    );
    --cookies-consent-button-list-color-background: var(--color-background-1);
    --cookies-consent-button-list-box-shadow: var(--box-shadow-main);
    --cookies-consent-button-list-text-opacity-dimmed: var(--opacity-2);

    --swiper-controls-color-background-on-dark: rgb(255 255 255 / 40%);
    --swiper-controls-spacing-vertical: var(--spacing-l);
    --swiper-controls-spacing-horizontal: 0.8rem;
    --swiper-controls-backdrop-filter: var(--backdrop-filter-blur-main);
    --swiper-controls-opacity-inactive: var(--opacity-1);
    --swiper-controls-transition: var(--transition-interactive);
    --swiper-controls-navigation-spacing: var(--spacing-3xs);
    --swiper-controls-navigation-border-radius: var(--border-radius-s);
    --swiper-controls-navigation-size: 4.8rem;
    --swiper-controls-navigation-icon-size: var(
        --icon-size-m
    ); /** @info *must* be smaller than `--swiper-controls-navigation-size` */
    --swiper-controls-navigation-icon-size-hover-factor: 0.2; /** @info *must* be <= `0.5` */
    --swiper-controls-navigation-color-indicator-on-light: var(
        --color-text-primary
    );
    --swiper-controls-navigation-color-background-on-light: var(
        --color-background-page
    );
    --swiper-controls-navigation-color-indicator-on-dark: var(
        --color-text-complement
    );
    --swiper-controls-navigation-color-background-on-dark: var(
        --swiper-controls-color-background-on-dark
    );
    --swiper-controls-pagination-spacing: var(
        --swiper-controls-spacing-horizontal
    );
    --swiper-controls-pagination-size-idle: 0.5rem;
    --swiper-controls-pagination-size-active-factor: 4; /** @info multiplication factor of `--swiper-controls-pagination-size-idle` */
    --swiper-controls-pagination-color-indicator-on-light-idle: var(
        --color-background-1
    );
    --swiper-controls-pagination-color-indicator-on-light-active: var(
        --color-background-primary
    );
    --swiper-controls-pagination-color-background-on-light: var(
        --color-background-page
    );
    --swiper-controls-pagination-color-indicator-on-dark-idle: var(
        --color-background-complement
    );
    --swiper-controls-pagination-color-indicator-on-dark-active: var(
        --color-background-complement
    );
    --swiper-controls-pagination-color-background-on-dark: var(
        --swiper-controls-color-background-on-dark
    );

    --hapi-rooms-swiper-spacing-xs: var(--spacing-3xs);
    --hapi-rooms-swiper-spacing-s: var(--spacing-2xs);
    --hapi-rooms-swiper-spacing-m: var(--spacing-s);
    --hapi-rooms-swiper-spacing-l: var(--spacing-m);
    --hapi-rooms-swiper-room-width-desktop: 48rem;
    --hapi-rooms-swiper-room-width-mobile: 32.5rem;
    --hapi-rooms-swiper-room-image-ratio-desktop: 480 / 300;
    --hapi-rooms-swiper-room-image-ratio-mobile: 394 / 300;
    --hapi-rooms-swiper-room-border-radius: var(--border-radius-m);
    --hapi-rooms-swiper-room-font-info: var(--font-text-label);
    --hapi-rooms-swiper-room-icon-size: var(--icon-size-s);
    --hapi-rooms-swiper-room-color-text-highlight-primary: var(
        --color-text-primary
    );
    --hapi-rooms-swiper-room-color-text-on-background-primary: var(
        --color-text-on-background-1
    );
    --hapi-rooms-swiper-room-color-background-primary: var(
        --color-background-1
    );
    --hapi-rooms-swiper-room-color-text-highlight-secondary: var(
        --color-text-secondary
    );
    --hapi-rooms-swiper-room-color-text-on-background-secondary: var(
        --color-text-on-background-2
    );
    --hapi-rooms-swiper-room-color-background-secondary: var(
        --color-background-2
    );
    --hapi-rooms-swiper-room-box-shadow: var(--box-shadow-main);
    --hapi-rooms-swiper-room-hover-scale-image: 1.1;
    --hapi-rooms-swiper-room-transition-m: var(--transition-m);
    --hapi-rooms-swiper-room-transition-l: var(--transition-l);
    --hapi-rooms-swiper-room-detail-border: var(--border-main);
    --hapi-rooms-swiper-room-detail-spacing-swiper: var(--spacing-3xs);
    --hapi-rooms-swiper-room-detail-image-border-radius: var(--border-radius-m);
    --hapi-rooms-swiper-room-detail-image-width-desktop: 100%;
    --hapi-rooms-swiper-room-detail-image-width-mobile: var(
        --hapi-rooms-swiper-room-detail-image-width-desktop
    );
    --hapi-rooms-swiper-room-detail-image-ratio-desktop: 100 / 49.95;
    --hapi-rooms-swiper-room-detail-image-ratio-mobile: 100 / 50.69;
    --hapi-rooms-swiper-room-detail-image-swiper-width-desktop: 83.25%;
    --hapi-rooms-swiper-room-detail-image-swiper-width-mobile: 96.75%;
    --hapi-rooms-swiper-room-detail-image-swiper-ratio-desktop: 5 / 3;
    --hapi-rooms-swiper-room-detail-image-swiper-ratio-mobile: 21 / 11;

    --hapi-packages-swiper-spacing-xs: var(--spacing-3xs);
    --hapi-packages-swiper-spacing-s: var(--spacing-2xs);
    --hapi-packages-swiper-spacing-m: var(--spacing-s);
    --hapi-packages-swiper-spacing-l: var(--spacing-m);
    --hapi-packages-swiper-package-width-desktop: 48rem;
    --hapi-packages-swiper-package-height-desktop: 50rem;
    --hapi-packages-swiper-package-width-mobile: 32.5rem;
    --hapi-packages-swiper-package-height-mobile: 40rem;
    --hapi-packages-swiper-package-border-radius: var(--border-radius-m);
    --hapi-packages-swiper-package-font-info: var(--font-text-label);
    --hapi-packages-swiper-package-icon-size: var(--icon-size-s);
    --hapi-packages-swiper-package-color-text-on-image: var(
        --color-text-complement
    );
    --hapi-packages-swiper-package-gradient-height: 55%;
    --hapi-packages-swiper-package-gradient-background: linear-gradient(
        180deg,
        rgb(0 0 0 / 0%) 0%,
        rgb(0 0 0 / 70%) 74.5%
    );
    --hapi-packages-swiper-package-box-shadow: var(--box-shadow-main);
    --hapi-packages-swiper-package-hover-scale-image: 1.1;
    --hapi-packages-swiper-package-transition-m: var(--transition-m);
    --hapi-packages-swiper-package-transition-l: var(--transition-l);
    --hapi-packages-swiper-package-detail-border: var(--border-main);
    --hapi-packages-swiper-package-detail-spacing-swiper: var(--spacing-3xs);
    --hapi-packages-swiper-package-detail-image-border-radius: var(
        --border-radius-m
    );
    --hapi-packages-swiper-package-detail-image-width-desktop: 100%;
    --hapi-packages-swiper-package-detail-image-width-mobile: var(
        --hapi-packages-swiper-package-detail-image-width-desktop
    );
    --hapi-packages-swiper-package-detail-image-ratio-desktop: 100 / 49.95;
    --hapi-packages-swiper-package-detail-image-ratio-mobile: 100 / 50.69;
    --hapi-packages-swiper-package-detail-image-swiper-width-desktop: 83.25%;
    --hapi-packages-swiper-package-detail-image-swiper-width-mobile: 96.75%;
    --hapi-packages-swiper-package-detail-image-swiper-ratio-desktop: 550 / 330;
    --hapi-packages-swiper-package-detail-image-swiper-ratio-mobile: 420 / 220;

    --hapi-border-radius: var(--border-radius-s);
    --hapi-font-size: 1.5rem;
    --hapi-color-text: inherit;
    --hapi-color-link: var(--color-text-primary);
    --hapi-color-button: var(--color-text-on-primary);
    --hapi-background-button: var(--color-background-primary);
    --hapi-color-primary: var(--color-text-on-secondary);
    --hapi-background-primary: var(--color-background-secondary);
    --hapi-color-contrast: inherit;
    --hapi-background-contrast: rgb(0 0 0 / 10%);
    --hapi-error-color-text: var(--color-indicator-text-on-error);
    --hapi-error-color: var(--color-indicator-error);

    --datepicker-color-highlight: var(--color-secondary);
    --datepicker-color-selected: color-mix(
        in srgb,
        var(--datepicker-color-highlight),
        transparent var(--opacity-2)
    );

    --form-spacing-column: var(--spacing-s);
    --form-spacing-row: var(--spacing-xs);
    --form-spacing-label: 0.29em; /** @info *must* be just one value for all sides */
    --form-spacing-input: 0.89em; /** @info *must* be just one value for all sides */
    --form-spacing-submit-idle: var(--button-padding-block)
        var(--button-padding-inline-idle);
    --form-spacing-submit-active: var(--button-padding-block)
        var(--button-padding-inline-active);
    --form-color-highlight: var(--color-primary);
    --form-color-error: var(--color-indicator-error);
    --form-color-text-on-error: var(--color-indicator-text-on-error);
    --form-border-width-input: var(--border-width-main);
    --form-border-style-input: var(--border-style-main);
    --form-border-color-input-idle: var(--border-color-main);
    --form-border-color-input-hover: var(--form-border-color-input-idle);
    --form-border-color-input-focus: var(--form-color-highlight);
    --form-border-input-idle: var(--form-border-width-input)
        var(--form-border-style-input) var(--form-border-color-input-idle);
    --form-border-input-hover: var(--form-border-width-input)
        var(--form-border-style-input) var(--form-border-color-input-hover);
    --form-border-input-focus: var(--form-border-width-input)
        var(--form-border-style-input) var(--form-border-color-input-focus);
    --form-border-submit-idle: var(--button-border-width)
        var(--button-border-style) var(--button-primary-color-border-idle);
    --form-border-submit-active: var(--button-border-width)
        var(--button-border-style) var(--button-primary-color-border-active);
    --form-border-radius-input: var(--border-radius-s);
    --form-border-radius-submit: var(--button-border-radius);
    --form-outline-width-input: var(--border-width-main);
    --form-outline-style-input: var(--border-style-main);
    --form-outline-color-input-idle: transparent;
    --form-outline-color-input-hover: var(--form-border-color-input-hover);
    --form-outline-color-input-focus: var(--form-border-color-input-focus);
    --form-outline-input-idle: var(--form-outline-width-input)
        var(--form-outline-style-input) var(--form-outline-color-input-idle);
    --form-outline-input-hover: var(--form-outline-width-input)
        var(--form-outline-style-input) var(--form-outline-color-input-hover);
    --form-outline-input-focus: var(--form-outline-width-input)
        var(--form-outline-style-input) var(--form-outline-color-input-focus);
    --form-outline-offset-input: 0rem;
    --form-icon-size: var(--icon-size-m);
    --form-font-family-label: var(--font-family-secondary);
    --form-font-family-input: var(--font-family-secondary);
    --form-font-family-submit: var(--font-family-secondary);
    --form-font-style-label: var(--font-style-main);
    --form-font-style-input: var(--font-style-main);
    --form-font-style-submit: var(--font-style-main);
    --form-font-weight-label: var(--font-weight-m);
    --form-font-weight-input: var(--font-weight-m);
    --form-font-weight-submit: var(--font-weight-xl);
    --form-font-size-label: var(--font-size-static-m);
    --form-font-size-label-checkbox: var(--font-size-static-s);
    --form-font-size-input: var(--font-size-static-m);
    --form-font-size-submit: var(--font-size-static-l);
    --form-line-height-label: var(--line-height-3xl);
    --form-line-height-input: var(--line-height-3xl);
    --form-line-height-submit: var(--line-height-xl);
    --form-color-text-label: var(--form-color-highlight);
    --form-color-text-input: var(--color-text-main);
    --form-color-text-placeholder: color-mix(
        in srgb,
        var(--form-color-text-input),
        transparent var(--opacity-1)
    );
    --form-color-background-input: var(--color-background-complement);
    --form-color-text-submit-idle: var(--button-primary-color-text-idle);
    --form-color-text-submit-active: var(--button-primary-color-text-active);
    --form-color-background-submit-idle: var(
        --button-primary-color-background-idle
    );
    --form-color-background-submit-active: var(
        --button-primary-color-background-active
    );
    --form-textarea-height: clamp(15rem, 30vh, 30rem);
    --form-spacer-height-s: var(--spacing-s);
    --form-spacer-height-m: var(--spacing-m);
    --form-spacer-height-l: var(--spacing-l);
    --form-box-shadow-input-active: var(--box-shadow-main);
    --form-transition-input: var(--transition-s);
    --form-transition-submit: var(--transition-interactive);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- document */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html {
    /**
     * @info
     * equal to 10px if browser font-size is set to 16px (default in most browsers)
     * (62.5 / 100) * 16 = 10
     */
    font-size: 62.5%;

    scroll-behavior: smooth;
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

body {
    /**
     * @info
     * scale back up to match browser font-size (16px default in most browsers)
     * html: 62.5% of browser font size (0.625)
     * body: 0.625 * 1.6rem = 1 (100% of browser font-size)
     */
    font-size: 1.6rem;

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

.lp-page {
    overflow: clip;
    position: relative;
    display: flow-root;
    font: var(--font-text-copy);
    color: var(--color-text-on-page);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- interactivity */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- selection */

:where(body:not(.bhe-state-editing) .lp-page) ::selection {
    color: var(--color-selection-text-primary);
    background-color: var(--color-selection-background-primary);
}

:where(body:not(.bhe-state-editing) .lp-page)
    :where(
        .style-button.style-button--primary,
        .el-cta.cta-background-color--primary,
        .el-header__content__badge:not(:hover, :focus-visible)
    )
    ::selection {
    color: var(--color-selection-text-secondary);
    background-color: var(--color-selection-background-secondary);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- focus */

:where(body:not(.bhe-state-editing) .lp-page)
    *:not(
        input:not(.bh-form-manager__submit__input),
        textarea,
        select
    ):focus-visible {
    outline: var(--outline-focus-primary);
    outline-offset: var(--outline-offset-focus);
}

:where(body:not(.bhe-state-editing) .lp-page)
    :where(.el-cta.cta-background-color--secondary)
    *:not(input, textarea, select):focus-visible,
:where(body:not(.bhe-state-editing) .lp-page)
    :where(
        .style-button.style-button--secondary,
        .el-header__content__badge
    ):not(input, textarea, select):focus-visible {
    outline: var(--outline-focus-secondary);
}

:where(body:not(.bhe-state-editing) .lp-page)
    :is(
        .lp-navigation__menu__list__item__link:any-link,
        .lp-navigation__anchor__list__item__link:any-link,
        .lp-main[tabindex],
        .el-section-inner[tabindex]
    ):focus-visible {
    outline-offset: var(--outline-offset-focus-edge);
}

:where(body:not(.bhe-state-editing) .lp-page) [tabindex="-1"]:focus-visible {
    outline-color: transparent;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- hover */

:where(body:not(.bhe-state-editing)) :any-link[target="lightbox"]:hover {
    cursor: zoom-in;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- utility */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**
 * @update consider moving 'utility' styles to `EXT:bh_landingpages/Resources/Public/Css/framework.css`
 * @update use a prefix like `bh-`, `bhf-` or `lp-` for example
 */

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within):not(:active) {
    overflow: hidden;
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- typography */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:is(.style-text-paragraph, .style-text-address, .style-text-preformatted),
:where(.style-text, .bh-bodytext) :is(p, address, pre) {
    font: var(--font-text-copy);
}

.style-text-address,
:where(.style-text, .bh-bodytext) address {
    font-style: var(--font-style-main);
}

.style-text-preformatted,
:where(.style-text, .bh-bodytext) pre {
    border-radius: var(--text-block-border-radius);
    padding: var(--text-spacing-preformatted);
    color: var(--text-block-color-text-on-background);
    background-color: var(--text-block-color-background);
}

.style-text-strong,
:where(.style-text, .bh-bodytext) strong {
    font-weight: var(--font-weight-text-strong);
}

.style-text-emphasis,
:where(.style-text, .bh-bodytext) em {
    font-style: var(--font-style-accent);
}

.style-text-unarticulated,
:where(.style-text, .bh-bodytext) :is(u, span[style*="underline"]) {
    text-underline-offset: var(--text-underline-offset-main);
}

.style-text-teaser {
    font: var(--font-text-teaser);
}

.style-text-highlight {
    font: var(--font-text-highlight);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- headings */

:is(
    .style-text-h1,
    .style-text-h2,
    .style-text-h3,
    .style-text-h4,
    .style-text-h5,
    .style-text-h6
),
:where(.style-text, .bh-bodytext) :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}

.style-text-h1,
:where(.style-text, .bh-bodytext) h1 {
    font: var(--font-text-h1);
}

.style-text-h2,
:where(.style-text, .bh-bodytext) h2 {
    font: var(--font-text-h2);
}

.style-text-h3,
:where(.style-text, .bh-bodytext) h3 {
    font: var(--font-text-h3);
}

.style-text-h4,
:where(.style-text, .bh-bodytext) h4 {
    font: var(--font-text-h4);
}

.style-text-h5,
:where(.style-text, .bh-bodytext) h5 {
    font: var(--font-text-h5);
}

.style-text-h6,
:where(.style-text, .bh-bodytext) h6 {
    font: var(--font-text-h6);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- lists */

:is(.style-text-list, .copyrightlist),
:where(.style-text, .bh-bodytext) :is(ul, ol) {
    margin: 0;
    padding: 0;
    font: var(--font-text-list);
}

:where(.style-text-list) .style-text-list__item,
:where(
        .style-text ul,
        .style-text ol,
        .bh-bodytext ul,
        .bh-bodytext ol,
        .copyrightlist
    )
    li {
    position: relative;
}

/* !- unordered */

:is(
    .style-text-list--unordered-bullet,
    .style-text-list--unordered-icon,
    .copyrightlist
),
:where(.style-text, .bh-bodytext) ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    gap: var(--list-item-spacing);
}

:where(.style-text-list--unordered-bullet)
    .style-text-list__item--unordered-bullet,
:where(
        .style-text ul:not(.style-text-list--unordered-icon),
        .bh-bodytext ul:not(.style-text-list--unordered-icon),
        .copyrightlist
    )
    li {
    padding-inline-start: calc(
        var(--list-item-bullet-size) + var(--list-item-bullet-spacing)
    );
}

:where(.style-text-list--unordered-bullet)
    .style-text-list__item--unordered-bullet::before,
:where(
        .style-text ul:not(.style-text-list--unordered-icon),
        .bh-bodytext ul:not(.style-text-list--unordered-icon),
        .copyrightlist
    )
    li::before {
    /**
     * @info 'zero-width space' for voiceover 'fix'
     * @see `EXT:bh_landingpages/Resources/Public/Css/framework.css` for further details
     */
    content: "\200B";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: var(--list-item-bullet-align-vertical);
    border-radius: var(--list-item-bullet-border-radius);
    inline-size: var(--list-item-bullet-size);
    block-size: var(--list-item-bullet-size);
    background-color: var(--list-item-bullet-color);
}

:where(.style-text-list--unordered-icon) .style-text-list__item--unordered-icon,
:where(
        .style-text ul.style-text-list--unordered-icon,
        .bh-bodytext ul.style-text-list--unordered-icon
    )
    li {
    padding-inline-start: calc(
        var(--list-item-icon-size) + var(--list-item-icon-spacing)
    );
}

:where(.style-text-list--unordered-icon)
    .style-text-list__item--unordered-icon::before,
:where(
        .style-text ul.style-text-list--unordered-icon,
        .bh-bodytext ul.style-text-list--unordered-icon
    )
    li::before {
    content: var(--list-item-icon-code);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: var(--list-item-icon-align-vertical);
    font-family: "bakehouse-iconset" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: var(--list-item-icon-size);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-feature-settings: "liga";
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
    color: var(--list-item-bullet-color);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- tables */

:where(body:not(.bhe-state-editing)) .bh-bodytext:has(> table.mce-item-table) {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

:where(.bh-bodytext) table.mce-item-table {
    inline-size: 100%;
}

:where(.bh-bodytext) tbody tr:nth-child(odd) {
    color: var(--text-block-color-text-on-background);
    background-color: var(--text-block-color-background);
}

:where(.bh-bodytext) tbody tr:nth-child(even) {
    color: var(--color-text-on-page);
    background-color: var(--color-background-page);
}

:where(.bh-bodytext) table td {
    padding: var(--text-spacing-table);
}

:where(.bh-bodytext) table td:first-of-type {
    border-start-start-radius: var(--text-block-border-radius);
    border-end-start-radius: var(--text-block-border-radius);
}

:where(.bh-bodytext) table td:last-of-type {
    border-start-end-radius: var(--text-block-border-radius);
    border-end-end-radius: var(--text-block-border-radius);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- hyperlinks */

/**
 * @info
 * use `transparent` for `text-decoration-color` because of a11y
 * for example, in 'high contrast mode' or `::selection` the `text-decoration`
 * won't be visible/identifiable when `text-decoration` is set to `none`
 */
:where(:any-link) {
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
}

:is(.style-text-link, .bhDownloadlink),
:where(.style-text, .bh-bodytext, .lp-navigation__list)
    :is(a, .lp-navigation__list__item__link__text) {
    display: inline-block;
    /**
     * @info quirks needed for safari:
     * - not all `text-decoration-*` properties supported in the shorthand
     * - `-webkit-*` prefixes for `text-decoration` transitions
     */
    text-decoration-thickness: var(--text-decoration-thickness-interactive);
    -webkit-text-decoration-line: var(--text-decoration-line-interactive);
    text-decoration-line: var(--text-decoration-line-interactive);
    -webkit-text-decoration-style: var(--text-decoration-style-interactive);
    text-decoration-style: var(--text-decoration-style-interactive);
    -webkit-text-decoration-color: var(
        --text-decoration-color-interactive-idle
    );
    text-decoration-color: var(--text-decoration-color-interactive-idle);
    text-underline-offset: var(--text-underline-offset-interactive);
    color: var(--color-interactive-idle);
    transition:
        color var(--transition-interactive),
        -webkit-text-decoration var(--transition-interactive);
    transition:
        text-decoration var(--transition-interactive),
        color var(--transition-interactive);
    transition:
        text-decoration var(--transition-interactive),
        color var(--transition-interactive),
        -webkit-text-decoration var(--transition-interactive);
}

:where(.lp-navigation__list) .lp-navigation__list__item__link {
    /**
     * @info remove `text-decoration` on the hyperlink itself because of possible child icons
     */
    -webkit-text-decoration: none;
    text-decoration: none;
}

/**
 * @info
 * complicated selectors because of possible child icons of `.lp-navigation__list__item__link`
 * which may not receive the following 'active' stylings
 */
:where(body:not(.bhe-state-editing))
    :is(.style-text-link, .bhDownloadlink):any-link:focus-visible,
:where(body:not(.bhe-state-editing))
    :where(.style-text, .bh-bodytext, .lp-navigation__list)
    :is(
        a:any-link:focus-visible,
        .lp-navigation__list__item__link:any-link:focus-visible
            .lp-navigation__list__item__link__text,
        :where(.lp-navigation__list__item.lp-navigation__list__item--active)
            .lp-navigation__list__item__link:any-link
            .lp-navigation__list__item__link__text
    ) {
    -webkit-text-decoration-color: var(
        --text-decoration-color-interactive-active
    );
    text-decoration-color: var(--text-decoration-color-interactive-active);
    color: var(--color-interactive-active);
}

:where(.lp-navigation__list__item.lp-navigation__list__item--active)
    .lp-navigation__list__item__link:any-link:focus-visible
    .lp-navigation__list__item__link__text {
    -webkit-text-decoration-color: var(
        --text-decoration-color-interactive-idle
    );
    text-decoration-color: var(--text-decoration-color-interactive-idle);
}

@media (pointer: fine) {
    :where(body:not(.bhe-state-editing))
        :is(.style-text-link, .bhDownloadlink):any-link:hover,
    :where(body:not(.bhe-state-editing))
        :where(.style-text, .bh-bodytext, .lp-navigation__list)
        :is(
            a:any-link:hover,
            .lp-navigation__list__item__link:any-link:hover
                .lp-navigation__list__item__link__text
        ) {
        -webkit-text-decoration-color: var(
            --text-decoration-color-interactive-active
        );
        text-decoration-color: var(--text-decoration-color-interactive-active);
        color: var(--color-interactive-active);
    }

    :where(.lp-navigation__list__item.lp-navigation__list__item--active)
        .lp-navigation__list__item__link:any-link:hover
        .lp-navigation__list__item__link__text {
        -webkit-text-decoration-color: var(
            --text-decoration-color-interactive-idle
        );
        text-decoration-color: var(--text-decoration-color-interactive-idle);
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- button */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.style-button,
.bh-cookies-consent-button {
    isolation: isolate;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: var(--button-border-width) var(--button-border-style)
        var(--button-color-border-idle, currentcolor);
    border-radius: var(--button-border-radius);
    padding: calc(var(--button-padding-block) - var(--button-border-width))
        calc(var(--button-padding-inline-idle) - var(--button-border-width));
    font: var(--font-text-button);
    letter-spacing: var(--letter-spacing-m);
    text-align: center;
    text-decoration-color: transparent;
    color: var(--button-color-text-idle, inherit);
    background: var(--button-color-background-idle, transparent);
    transition:
        border var(--button-transition),
        padding var(--button-transition),
        color var(--button-transition),
        background var(--button-transition);
}

.style-button--outline {
    border-color: var(--button-outline-color-border-idle, currentcolor);
    color: var(--button-outline-color-text-idle, inherit);
    background: var(--button-outline-color-background-idle, transparent);
}

.style-button--link {
    border-color: transparent transparent
        var(--button-link-color-border-idle, transparent) transparent;
    padding-inline: 0;
    color: var(--button-link-color-text-idle, inherit);
    background: transparent;
}

:where(body:not(.bhe-state-editing))
    .style-button:where(:not(a), a:any-link):focus-visible {
    border-color: var(--button-color-border-active, currentcolor);
    color: var(--button-color-text-active, inherit);
    background: var(--button-color-background-active, transparent);
}

:where(body:not(.bhe-state-editing))
    .style-button--outline:where(:not(a), a:any-link):focus-visible {
    border-color: var(--button-outline-color-border-active, transparent);
    color: var(--button-outline-color-text-active, inherit);
    background: var(--button-outline-color-background-active, transparent);
}

:where(body:not(.bhe-state-editing))
    .style-button--link:where(:not(a), a:any-link):focus-visible {
    border-color: transparent transparent
        var(--button-link-color-border-active, currentcolor) transparent;
    color: var(--button-link-color-text-active, inherit);
    background: transparent;
}

:where(body:not(.bhe-state-editing))
    .style-button:not(
        .style-button--outline,
        .style-button--link,
        .el-cta__buttons__link
    ):where(:not(a), a:any-link):focus-visible {
    padding-inline: calc(
        var(--button-padding-inline-active) - var(--button-border-width)
    );
}

@media (pointer: fine) {
    :where(body:not(.bhe-state-editing))
        .style-button:where(:not(a), a:any-link):hover,
    :where(body:not(.bhe-state-editing)) .bh-cookies-consent-button:hover {
        border-color: var(--button-color-border-active, currentcolor);
        color: var(--button-color-text-active, inherit);
        background: var(--button-color-background-active, transparent);
    }

    :where(body:not(.bhe-state-editing))
        .style-button--outline:where(:not(a), a:any-link):hover {
        border-color: var(--button-outline-color-border-active, transparent);
        color: var(--button-outline-color-text-active, inherit);
        background: var(--button-outline-color-background-active, transparent);
    }

    :where(body:not(.bhe-state-editing))
        .style-button--link:where(:not(a), a:any-link):hover {
        border-color: transparent transparent
            var(--button-link-color-border-active, currentcolor) transparent;
        color: var(--button-link-color-text-active, inherit);
        background: transparent;
    }

    :where(body:not(.bhe-state-editing))
        .style-button:not(
            .style-button--outline,
            .style-button--link,
            .el-cta__buttons__link
        ):where(:not(a), a:any-link):hover {
        padding-inline: calc(
            var(--button-padding-inline-active) - var(--button-border-width)
        );
    }
}

.style-button--primary,
.bh-cookies-consent-button {
    --button-color-border-idle: var(--button-primary-color-border-idle);
    --button-color-border-active: var(--button-primary-color-border-active);
    --button-color-text-idle: var(--button-primary-color-text-idle);
    --button-color-text-active: var(--button-primary-color-text-active);
    --button-color-background-idle: var(--button-primary-color-background-idle);
    --button-color-background-active: var(
        --button-primary-color-background-active
    );

    --button-outline-color-border-idle: var(
        --button-outline-primary-color-border-idle
    );
    --button-outline-color-border-active: var(
        --button-outline-primary-color-border-active
    );
    --button-outline-color-text-idle: var(
        --button-outline-primary-color-text-idle
    );
    --button-outline-color-text-active: var(
        --button-outline-primary-color-text-active
    );
    --button-outline-color-background-idle: var(
        --button-outline-primary-color-background-idle
    );
    --button-outline-color-background-active: var(
        --button-outline-primary-color-background-active
    );

    --button-link-color-border-idle: var(
        --button-link-primary-color-border-idle
    );
    --button-link-color-border-active: var(
        --button-link-primary-color-border-active
    );
    --button-link-color-text-idle: var(--button-link-primary-color-text-idle);
    --button-link-color-text-active: var(
        --button-link-primary-color-text-active
    );
}

.style-button--secondary {
    --button-color-border-idle: var(--button-secondary-color-border-idle);
    --button-color-border-active: var(--button-secondary-color-border-active);
    --button-color-text-idle: var(--button-secondary-color-text-idle);
    --button-color-text-active: var(--button-secondary-color-text-active);
    --button-color-background-idle: var(
        --button-secondary-color-background-idle
    );
    --button-color-background-active: var(
        --button-secondary-color-background-active
    );

    --button-outline-color-border-idle: var(
        --button-outline-secondary-color-border-idle
    );
    --button-outline-color-border-active: var(
        --button-outline-secondary-color-border-active
    );
    --button-outline-color-text-idle: var(
        --button-outline-secondary-color-text-idle
    );
    --button-outline-color-text-active: var(
        --button-outline-secondary-color-text-active
    );
    --button-outline-color-background-idle: var(
        --button-outline-secondary-color-background-idle
    );
    --button-outline-color-background-active: var(
        --button-outline-secondary-color-background-active
    );

    --button-link-color-border-idle: var(
        --button-link-secondary-color-border-idle
    );
    --button-link-color-border-active: var(
        --button-link-secondary-color-border-active
    );
    --button-link-color-text-idle: var(--button-link-secondary-color-text-idle);
    --button-link-color-text-active: var(
        --button-link-secondary-color-text-active
    );
}

.style-button--alternative {
    --button-color-border-idle: var(--button-alternative-color-border-idle);
    --button-color-border-active: var(--button-alternative-color-border-active);
    --button-color-text-idle: var(--button-alternative-color-text-idle);
    --button-color-text-active: var(--button-alternative-color-text-active);
    --button-color-background-idle: var(
        --button-alternative-color-background-idle
    );
    --button-color-background-active: var(
        --button-alternative-color-background-active
    );

    --button-outline-color-border-idle: var(
        --button-outline-alternative-color-border-idle
    );
    --button-outline-color-border-active: var(
        --button-outline-alternative-color-border-active
    );
    --button-outline-color-text-idle: var(
        --button-outline-alternative-color-text-idle
    );
    --button-outline-color-text-active: var(
        --button-outline-alternative-color-text-active
    );
    --button-outline-color-background-idle: var(
        --button-outline-alternative-color-background-idle
    );
    --button-outline-color-background-active: var(
        --button-outline-alternative-color-background-active
    );

    --button-link-color-border-idle: var(
        --button-link-alternative-color-border-idle
    );
    --button-link-color-border-active: var(
        --button-link-alternative-color-border-active
    );
    --button-link-color-text-idle: var(
        --button-link-alternative-color-text-idle
    );
    --button-link-color-text-active: var(
        --button-link-alternative-color-text-active
    );
}

.style-button--complement {
    --button-color-border-idle: var(--button-complement-color-border-idle);
    --button-color-border-active: var(--button-complement-color-border-active);
    --button-color-text-idle: var(--button-complement-color-text-idle);
    --button-color-text-active: var(--button-complement-color-text-active);
    --button-color-background-idle: var(
        --button-complement-color-background-idle
    );
    --button-color-background-active: var(
        --button-complement-color-background-active
    );

    --button-outline-color-border-idle: var(
        --button-outline-complement-color-border-idle
    );
    --button-outline-color-border-active: var(
        --button-outline-complement-color-border-active
    );
    --button-outline-color-text-idle: var(
        --button-outline-complement-color-text-idle
    );
    --button-outline-color-text-active: var(
        --button-outline-complement-color-text-active
    );
    --button-outline-color-background-idle: var(
        --button-outline-complement-color-background-idle
    );
    --button-outline-color-background-active: var(
        --button-outline-complement-color-background-active
    );

    --button-link-color-border-idle: var(
        --button-link-complement-color-border-idle
    );
    --button-link-color-border-active: var(
        --button-link-complement-color-border-active
    );
    --button-link-color-text-idle: var(
        --button-link-complement-color-text-idle
    );
    --button-link-color-text-active: var(
        --button-link-complement-color-text-active
    );
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- coloring (text & background) */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.style-color-text--main {
    color: var(--color-text-main);
}

.style-color-text--complement {
    color: var(--color-text-complement);
}

.style-color-text--primary {
    color: var(--color-text-primary);
}

.style-color-text--secondary {
    color: var(--color-text-secondary);
}

.style-color-background--primary {
    color: var(--color-text-on-primary);
    background-color: var(--color-background-primary);
}

.style-color-background--secondary {
    color: var(--color-text-on-secondary);
    background-color: var(--color-background-secondary);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- navigation */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.lp-navigation {
    position: relative;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- list */

.lp-navigation__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: var(--navigation-list-gap-row);
    column-gap: var(--navigation-list-gap-column);
}

.lp-navigation__list__item {
    position: relative;
}

.lp-navigation__list__item__link {
    display: flex;
    align-items: center;
    gap: var(--navigation-list-item-link-gap);
}

.lp-navigation__list__item__link__icon {
    font-size: var(--navigation-list-item-link-icon-size);
    color: inherit;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- menu */

.lp-navigation__menu {
    position: relative;
}

.lp-navigation__menu__button,
.lp-navigation__menu__list {
    inline-size: 100%;
    font: var(--navigation-font-text);
    text-align: center;
}

:is(
    .lp-navigation__menu__button__text--mobile,
    .lp-navigation__menu__list__item__link__text--mobile
) {
    text-transform: uppercase;
}

/* !- button */

.lp-navigation__menu__button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--navigation-menu-spacing-m);
    padding-block: var(--navigation-menu-spacing-s);
}

.lp-navigation__menu__button__icon {
    transform: rotate(0deg) translate3d(0, 0, 0);
    font-size: var(--navigation-menu-button-icon-size);
    transition: transform var(--navigation-transition);
}

:where(body:not(.bhe-state-editing))
    .lp-navigation__menu__button[aria-expanded="false"]:focus-visible
    .lp-navigation__menu__button__icon {
    transform: rotate(-90deg) translate3d(0, 0, 0);
}

@media (pointer: fine) {
    :where(body:not(.bhe-state-editing))
        .lp-navigation__menu__button[aria-expanded="false"]:hover
        .lp-navigation__menu__button__icon {
        transform: rotate(-90deg) translate3d(0, 0, 0);
    }
}

:where(body:not(.bhe-state-editing))
    .lp-navigation__menu__button[aria-expanded="true"]
    .lp-navigation__menu__button__icon {
    transform: rotate(-180deg) translate3d(0, 0, 0);
}

/* !- list (popup) */

/**
 * @update
 * consider anchor positioning for the future when browser support is sufficient
 * to position the popup element so that it's bound to its parent anchor element
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using
 */

.lp-navigation__menu__list {
    position: absolute;
    z-index: var(--navigation-menu-list-z-index);
    inset-block-start: calc(100% + var(--navigation-menu-list-shift));
    transform: translate3d(0, 10%, 0);
    border-radius: var(--navigation-menu-list-border-radius);
    padding-block: var(--navigation-menu-spacing-m);
    color: var(--navigation-menu-list-color-text-on-background);
    background-color: var(--navigation-menu-list-color-background);
    box-shadow: var(--navigation-menu-list-box-shadow);
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--navigation-transition),
        opacity var(--navigation-transition);
}

:where(body:not(.bhe-state-editing))
    .lp-navigation__menu__button[aria-expanded="true"]
    + .lp-navigation__menu__list {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: unset;
}

.lp-navigation__menu__list__item__link {
    padding: var(--navigation-menu-spacing-s) var(--navigation-menu-spacing-m);
    opacity: var(--navigation-menu-list-item-link-opacity-idle);
    transition: opacity var(--navigation-transition);
}

:where(body:not(.bhe-state-editing))
    .lp-navigation__menu__list__item__link:any-link:focus-visible {
    opacity: var(--navigation-menu-list-item-link-opacity-active);
}

@media (pointer: fine) {
    :where(body:not(.bhe-state-editing))
        .lp-navigation__menu__list__item__link:any-link:hover {
        opacity: var(--navigation-menu-list-item-link-opacity-active);
    }
}

.lp-navigation__menu__list__item--invalid
    .lp-navigation__menu__list__item__link {
    cursor: not-allowed;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- anchor (sticky scroll) */

.lp-navigation__anchor {
    position: sticky;
    z-index: var(--navigation-anchor-z-index);
    inset-block-start: var(--bh-safe-area-inset-top, 0px);
    font: var(--navigation-anchor-font-text);
    /**
     * @info render sticky element in own layer, improving repaint speed and therefore performance and a11y
     * @warning always use `will-change` with caution and sparingly
     */
    will-change: transform;
}

:where(.bhe-state-editing.js-navigation-anchor-sticky) .lp-navigation__anchor {
    transform: translate3d(
        0,
        calc(-100% - var(--bh-safe-area-inset-top, 0px)),
        0
    );
    pointer-events: none;
}

.lp-navigation__anchor-inner {
    display: grid;
    grid-template-columns:
        var(--navigation-anchor-logo-width) minmax(0, 1fr)
        var(--navigation-anchor-logo-width);
    column-gap: var(--navigation-anchor-spacing-horizontal);
    padding-block: calc(var(--navigation-anchor-height) * 0.08);
    block-size: var(--navigation-anchor-height);
    color: var(--navigation-anchor-color-text-on-background);
    transition:
        background-color var(--navigation-anchor-transition),
        backdrop-filter var(--navigation-anchor-transition),
        box-shadow var(--navigation-anchor-transition);
}

:where(.lp-navigation__anchor.js-sticky) .lp-navigation__anchor-inner {
    background-color: var(--navigation-anchor-color-background);
    -webkit-backdrop-filter: blur(
        1rem
    ); /** @update consider removing `-webkit-backdrop-filter` for the future when browser support is sufficient */
    backdrop-filter: var(--navigation-anchor-backdrop-filter);
    box-shadow: var(--navigation-anchor-box-shadow);
}

/* !- logo */

.lp-navigation__anchor__logo {
    position: relative;
    display: flex;
    inline-size: min(100%, var(--navigation-anchor-logo-width));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--navigation-anchor-transition);
}

:where(.lp-navigation__anchor.js-sticky) .lp-navigation__anchor__logo {
    opacity: 1;
    pointer-events: unset;
}

.lp-navigation__anchor__logo__image {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: left center;
}

/* !- list */

.lp-navigation__anchor__list-swiper {
    position: relative;
    display: flex;
    justify-content: center;
    block-size: 100%;
}

.lp-navigation__anchor__list {
    margin: 0; /* @update consider removing the `margin` for all list elements in `EXT:bh_landingpages/Resources/Public/Css/framework.css` */
    inline-size: 100%;
    block-size: 100%;
}

.lp-navigation__anchor__list__item {
    inline-size: auto;
    block-size: 100%;
}

.lp-navigation__anchor__list__item__link {
    /**
     * @info quirks needed for safari:
     * - not all `text-decoration-*` properties supported in the shorthand
     * - `-webkit-*` prefixes for `text-decoration` transitions
     */
    display: flex;
    align-items: center;
    padding-inline: calc(var(--navigation-anchor-spacing-horizontal) * 0.5);
    block-size: 100%;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-style: solid;
    text-decoration-style: solid;
    -webkit-text-decoration-color: currentcolor;
    text-decoration-color: currentcolor;
    text-underline-offset: var(--text-underline-offset-interactive);
    color: var(--navigation-anchor-color-interactive-idle);
    transition:
        color var(--navigation-anchor-transition),
        -webkit-text-decoration var(--navigation-anchor-transition);
    transition:
        text-decoration var(--navigation-anchor-transition),
        color var(--navigation-anchor-transition);
    transition:
        text-decoration var(--navigation-anchor-transition),
        color var(--navigation-anchor-transition),
        -webkit-text-decoration var(--navigation-anchor-transition);
}

:where(.lp-navigation__anchor__list__item.js-active)
    .lp-navigation__anchor__list__item__link,
.lp-navigation__anchor__list__item__link:focus-visible {
    color: var(--navigation-anchor-color-interactive-active);
}

@media (pointer: fine) {
    .lp-navigation__anchor__list__item__link:hover {
        color: var(--navigation-anchor-color-interactive-active);
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- skip links */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.lp-skip-links {
    position: fixed;
    z-index: var(--skip-links-z-index);
    inset-inline: 0;
    inset-block-start: var(--bh-safe-area-inset-top, 0px);
    padding-block-start: var(--skip-links-spacing-screen-vertical);
    font: var(--skip-links-font-text);
    text-align: center;
    color: var(--skip-links-color-text-on-background);
    opacity: 0;
    pointer-events: none;
    transition:
        padding var(--skip-links-transition-out),
        opacity var(--skip-links-transition-out);
    animation: skip-link-bounce-out var(--skip-links-transition-out) 1 forwards;
    /**
     * @info render fixed element in own layer, improving repaint speed and therefore performance and a11y
     * @warning always use `will-change` with caution and sparingly
     */
    will-change: transform;
}

:where(.js-navigation-anchor-sticky) .lp-skip-links {
    padding-block-start: calc(
        var(--navigation-anchor-height) +
            var(--skip-links-spacing-screen-vertical)
    );
}

:where(body:not(.bhe-state-editing)) .lp-skip-links:focus-within {
    opacity: 1;
    transition:
        padding var(--skip-links-transition-out),
        opacity var(--skip-links-transition-in-preparation);
    animation: skip-link-bounce-in var(--skip-links-transition-in) 1 forwards;
}

@keyframes skip-link-bounce-in {
    0% {
        transform: translate3d(0, -100%, 0);
    }
    60% {
        transform: translate3d(0, 10%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes skip-link-bounce-out {
    to {
        transform: translate3d(0, -100%, 0);
    }
}

.lp-skip-links-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--skip-links-spacing-m);
}

.lp-skip-links__anchor {
    border-radius: var(--skip-links-border-radius);
    padding: var(--skip-links-spacing-m);
    background-color: var(--skip-links-color-background);
    -webkit-backdrop-filter: blur(
        1rem
    ); /** @update consider removing `-webkit-backdrop-filter` for the future when browser support is sufficient */
    backdrop-filter: var(--skip-links-backdrop-filter);
    box-shadow: var(--skip-links-box-shadow);
}

:where(body:not(.bhe-state-editing)) .lp-skip-links__anchor:focus {
    pointer-events: auto;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- header */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.lp-header {
    position: relative;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- aside cta */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**
 * @todo implement transitions and animations for `.lp-aside-cta` that also work in `.bhe-state-editing` mode
 * @see behavior of e.g., `.lp-skip-links` or `.lp-navigation__anchor` on `.bhe-state-editing`
 */

.lp-aside-cta {
    position: absolute;
    z-index: var(--aside-cta-z-index);
    inset-inline: 0;
    inset-block-end: 0;
    margin-block-end: var(
        --aside-cta-spacing-screen-vertical
    ); /** @info fallback for `env(safe-area-inset-bottom)` */
    margin-block-end: calc(
        var(--aside-cta-spacing-screen-vertical) +
            env(safe-area-inset-bottom, 2rem)
    );
    opacity: 0;
    pointer-events: none;
    /**
     * @info render fixed element in own layer, improving repaint speed and therefore performance and a11y
     * @warning always use `will-change` with caution and sparingly
     */
    will-change: transform;
    transition: opacity var(--aside-cta-transition-out-delayed);
    animation: aside-cta-bounce-out var(--aside-cta-transition-out) 1 forwards;
}

:where(.bh-femode) .lp-aside-cta {
    position: fixed;
}

@supports selector(:has(.selector)) {
    :where(.bh-bemode:not(.bhe-state-editing))
        .lp-aside-cta:has(
            .lp-aside-cta__content:not(.bhe-state-content-empty)
        ) {
        position: fixed;
    }

    :where(.bh-femode)
        .lp-aside-cta:has(.lp-aside-cta__content.bhe-state-content-empty) {
        display: none;
    }
}

:where(.js-aside-cta-visible) .lp-aside-cta,
:where(body:not(.bhe-state-editing):not(.js-aside-cta-visible))
    .lp-aside-cta:focus-within {
    opacity: 1;
    transition: opacity var(--aside-cta-transition-in);
    /**
     * @info
     * `animation-duration` and `@keyframes` percentages of `aside-cta-bounce` are interdependent
     * to achieve an animation speed of `0.6s` while keeping the interval at `6s`
     * ideal for the used `cubic-bezier` ('easeOutCubic') function
     * total speed of the animation = (95% - 90%) + (100% - 95%) = 10%
     * 6s (total `animation-duration`) * 10% (total animation speed in %) = 0.6s
     */
    animation:
        aside-cta-bounce-in var(--aside-cta-transition-in) 1 forwards,
        aside-cta-bounce 6s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

:where(.bh-bemode.js-aside-cta-visible) .lp-aside-cta,
:where(.bh-bemode:not(.bhe-state-editing):not(.js-aside-cta-visible))
    .lp-aside-cta:focus-within {
    animation: aside-cta-bounce-in var(--aside-cta-transition-in) 1 forwards;
}

@keyframes aside-cta-bounce-in {
    0% {
        transform: translate3d(
            0,
            calc(100% + var(--aside-cta-spacing-screen-vertical)),
            0
        );
    }
    60% {
        transform: translate3d(0, -10%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes aside-cta-bounce-out {
    to {
        transform: translate3d(
            0,
            calc(100% + var(--aside-cta-spacing-screen-vertical)),
            0
        );
    }
}

@keyframes aside-cta-bounce {
    90%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    95% {
        transform: translate3d(0, -5%, 0);
    }
}

:where(.bhe-state-dragging) .lp-aside-cta__content.bhe-state-content-empty {
    pointer-events: auto;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- main */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.lp-main {
    position: relative;
    scroll-margin-top: calc(
        var(--bh-safe-area-inset-top, 0px) + var(--navigation-anchor-height)
    );
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- dialog popup */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.lp-dialog-popup {
    position: fixed;
    z-index: var(--dialog-popup-z-index);
    inset: var(--bh-safe-area-inset-top, 0px) 0 0;
    display: grid;
    place-items: center;
    padding-block: var(--dialog-popup-spacing-screen-vertical);
    opacity: 0;
    pointer-events: none;
    /**
     * @info render fixed element in own layer, improving repaint speed and therefore performance and a11y
     * @warning always use `will-change` with caution and sparingly
     */
    will-change: transform;
    transition: opacity var(--dialog-popup-transition-out-delayed);
}

.lp-dialog-popup:where(.js-open) {
    opacity: 1;
    pointer-events: unset;
    transition: opacity var(--dialog-popup-transition-in);
}

.lp-dialog-popup::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: var(--dialog-popup-color-background-backdrop);
}

.lp-dialog-popup-inner {
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--dialog-popup-border-radius);
    padding-block-end: var(--dialog-popup-close-spacing);
    inline-size: min(100%, var(--dialog-popup-width));
    block-size: min(
        100%,
        var(--dialog-popup-height) - var(--bh-safe-area-inset-top, 0px)
    );
    color: var(--dialog-popup-color-text-on-background);
    background-color: var(--dialog-popup-color-background);
    animation: dialog-popup-scale-down var(--dialog-popup-transition-out) 1
        forwards;
}

:where(.lp-dialog-popup.js-open) .lp-dialog-popup-inner {
    animation: dialog-popup-bounce-in var(--dialog-popup-transition-in) 1
        forwards;
}

@keyframes dialog-popup-bounce-in {
    0% {
        transform: translate3d(0, 60%, 0);
    }
    60% {
        transform: translate3d(0, -10%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes dialog-popup-scale-down {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.4);
    }
}

:where(.lp-dialog-popup) .style-dialog-popup-color-text-highlight-primary {
    color: var(--dialog-popup-color-text-highlight-primary);
}

:where(.lp-dialog-popup) .style-dialog-popup-color-text-highlight-secondary {
    color: var(--dialog-popup-color-text-highlight-secondary);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- close */

.lp-dialog-popup__close {
    display: grid;
    place-items: center;
    margin-inline: auto var(--dialog-popup-close-spacing);
    margin-block: var(--dialog-popup-close-spacing);
    border-radius: var(--dialog-popup-close-border-radius);
    inline-size: 1em;
    aspect-ratio: 1 / 1;
    font-size: var(--dialog-popup-close-size);
    color: var(--dialog-popup-close-color-text-on-background);
    background-color: var(--dialog-popup-close-color-background);
}

.lp-dialog-popup__close__icon {
    transform: rotate(0deg) translate3d(0, 0, 0);
    font-size: var(--dialog-popup-close-size-icon);
    transition: transform var(--dialog-popup-close-transition);
}

.lp-dialog-popup__close:focus-visible .lp-dialog-popup__close__icon {
    transform: rotate(90deg) translate3d(0, 0, 0);
}

@media (pointer: fine) {
    .lp-dialog-popup__close:hover .lp-dialog-popup__close__icon {
        transform: rotate(90deg) translate3d(0, 0, 0);
    }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- content */

.lp-dialog-popup__content {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    max-block-size: 100%;
    padding-inline: var(--dialog-popup-spacing-m);
    padding-block-end: var(--dialog-popup-spacing-m);
}

.lp-dialog-popup__content__body[hidden] {
    display: none !important;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- footer */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.lp-footer {
    position: relative;
}

.lp-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--footer-spacing-vertical-m);
    padding-block-start: var(--footer-spacing-vertical-m);
    padding-block-end: calc(
        var(--footer-spacing-vertical-m) +
            var(--aside-cta-height-dynamic, --aside-cta-height-default) +
            var(--aside-cta-spacing-screen-vertical)
    ); /** @info fallback for `env(safe-area-inset-bottom)` */
    padding-block-end: calc(
        var(--footer-spacing-vertical-m) +
            var(--aside-cta-height-dynamic, --aside-cta-height-default) +
            var(--aside-cta-spacing-screen-vertical) +
            env(safe-area-inset-bottom, 2rem)
    ); /** @see `margin-block-end` of `.lp-aside-cta` */
}

.lp-footer__logo__image {
    inline-size: var(--footer-logo-width);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- address */

.lp-footer__address {
    text-align: center;
}

.lp-footer__address__heading {
    margin-block-end: var(--footer-spacing-vertical-xs);
    color: var(--footer-address-heading-color-text);
}

.lp-footer__address__details {
    margin-block-end: var(--footer-spacing-vertical-s);
}

.lp-footer__address__details__place {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--footer-spacing-horizontal-s);
}

.lp-footer__address__contact {
    --color-interactive-idle: var(--footer-contact-link-color-idle);
    --color-interactive-active: var(--footer-contact-link-color-active);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: var(--footer-spacing-vertical-xs);
    column-gap: var(--footer-spacing-horizontal-m);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- responsive (media queries) */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**
 * @info
 * check out why `.98px` values are used for `max-width`
 * https://stackoverflow.com/a/54596322/17582002
 *
 * @update
 * consider using range syntax characters like `>=` and `<=` for the future when browser support is sufficient
 *
 * @see https://stackoverflow.com/a/73241255/17582002 and https://caniuse.com/css-media-range-syntax
 */

@media (min-width: 1440px) {
}

@media (max-width: 1439.98px) {
}

@media (min-width: 1200px) {
}

@media (max-width: 1199.98px) {
}

@media (min-width: 992px) {
    :root {
        --navigation-anchor-height: var(--navigation-anchor-height-desktop);
        --footer-logo-width: var(--footer-logo-width-desktop);
    }

    .lp-footer__logo__image--mobile {
        display: none;
    }
}

@media (max-width: 991.98px) {
    :root {
        --navigation-anchor-height: var(--navigation-anchor-height-mobile);
        --footer-logo-width: var(--footer-logo-width-mobile);
    }

    .lp-navigation__anchor__logo,
    .lp-footer__logo__image--desktop {
        display: none;
    }

    .lp-navigation__anchor-inner {
        display: block;
    }
}

@media (min-width: 768px) {
}

@media (max-width: 767.98px) {
}

@media (min-width: 576px) {
}

@media (max-width: 575.98px) {
}

@media (min-width: 376px) {
}

@media (max-width: 375.98px) {
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- elements (base & core) */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- text */

:where(.el-text) :where(.bh-bodytext) :is(p, address, pre, :is(ul, ol), table) {
    margin-block-end: var(--text-spacing-copy);
}

:where(.el-text) :where(.bh-bodytext) h1 {
    margin-block-end: var(--text-spacing-h1);
}

:where(.el-text) :where(.bh-bodytext) h2 {
    margin-block-end: var(--text-spacing-h2);
}

:where(.el-text) :where(.bh-bodytext) h3 {
    margin-block-end: var(--text-spacing-h3);
}

:where(.el-text) :where(.bh-bodytext) h4 {
    margin-block-end: var(--text-spacing-h4);
}

:where(.el-text) :where(.bh-bodytext) h5 {
    margin-block-end: var(--text-spacing-h5);
}

:where(.el-text) :where(.bh-bodytext) h6 {
    margin-block-end: var(--text-spacing-h6);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- picture */

:where(.el-picture, .el-gallery__item, .el-accordions__images-container) {
    border-radius: var(--picture-border-radius);
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    .picture-figure {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    border-radius: var(--picture-border-radius);
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    .picture-figure--reverse {
    grid-template-rows: auto 1fr;
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    :is(
        .el-picture__image,
        .el-gallery__item__image,
        .el-accordions__image,
        .el-accordion__image
    ),
:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    ):any-link
    .picture-figure::after,
:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    .picture-copyright,
:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    :where(.picture-figure--reverse)
    .picture-caption {
    grid-row: 1 / span 1;
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    :where(.picture-figure--reverse)
    :is(
        .el-picture__image,
        .el-gallery__item__image,
        .el-accordions__image,
        .el-accordion__image
    ),
:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    ):any-link
    .picture-figure--reverse::after,
:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    :where(.picture-figure--reverse)
    .picture-copyright,
:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    :where(.picture-figure:not(.picture-figure--reverse))
    .picture-caption {
    grid-row: 2 / span 1;
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    ):any-link
    .picture-figure::after {
    --picture-hover-icon-size-total: 2em;

    content: var(--picture-hover-icon-code);
    position: absolute;
    justify-self: end;
    transform: scale(0.8) rotate(90deg) translate3d(0, 0, 0);
    display: grid;
    place-items: center;
    margin: var(--picture-spacing);
    border-radius: var(--picture-hover-icon-border-radius);
    inline-size: min(
        100% - var(--picture-spacing) * 2,
        var(--picture-hover-icon-size-total)
    );
    block-size: min(
        100% - var(--picture-spacing) * 2,
        var(--picture-hover-icon-size-total)
    );
    font-family: "bakehouse-iconset" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: var(--picture-hover-icon-size);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-feature-settings: "liga";
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
    color: var(--picture-hover-icon-color);
    background-color: var(--picture-hover-icon-background);
    box-shadow: var(--picture-hover-icon-box-shadow);
    pointer-events: none;
    opacity: 0;
    transition:
        transform var(--picture-transition),
        opacity var(--picture-transition);
}

:where(body:not(.bhe-state-editing))
    :where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    ):any-link:focus-visible
    .picture-figure::after {
    transform: scale(1) rotate(0deg) translate3d(0, 0, 0);
    opacity: 1;
}

@media (pointer: fine) {
    :where(body:not(.bhe-state-editing))
        :where(
            .el-picture,
            .el-gallery__item,
            .el-accordions__image-wrapper,
            .el-accordion__image-wrapper
        ):any-link:hover
        .picture-figure::after {
        transform: scale(1) rotate(0deg) translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* !- copyright */

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    .picture-copyright {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    inset: var(--picture-spacing);
    display: grid;
    place-items: end;
    pointer-events: none;
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    .picture-copyright-text {
    /**
     * @update
     * consider using `sideways-lr` for the `writing-mode` for the future when browser support is sufficient
     * to not rely on `text-orientation` and `rotate`
     * https://caniuse.com/?search=sideways-lr
     */
    writing-mode: vertical-rl;
    text-orientation: sideways;
    rotate: 180deg;
    font-size: var(--picture-font-size-copyright);
    color: var(--picture-color-text-on-picture);
    text-shadow: var(--picture-text-shadow);
    pointer-events: auto;
}

/* !- text (caption) */

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    .picture-caption {
    padding: var(--picture-spacing) var(--picture-spacing) 0;
}

:where(
        .el-picture,
        .el-gallery__item,
        .el-accordions__image-wrapper,
        .el-accordion__image-wrapper
    )
    :where(.picture-figure--reverse)
    .picture-caption {
    padding: 0 var(--picture-spacing) var(--picture-spacing);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- swiper */

:where(.bh-swiper) {
    --bh-swiper-controls-spacing-vertical: var(
        --swiper-controls-spacing-vertical
    );
    --bh-swiper-controls-spacing-horizontal: var(
        --swiper-controls-spacing-horizontal
    );
    --bh-swiper-controls-backdrop-filter: var(
        --swiper-controls-backdrop-filter
    );
    --bh-swiper-controls-opacity-inactive: var(
        --swiper-controls-opacity-inactive
    );
    --bh-swiper-controls-transition: var(--swiper-controls-transition);

    --bh-swiper-controls-navigation-spacing: var(
        --swiper-controls-navigation-spacing
    );
    --bh-swiper-controls-navigation-border-radius: var(
        --swiper-controls-navigation-border-radius
    );
    --bh-swiper-controls-navigation-size: var(
        --swiper-controls-navigation-size
    );
    --bh-swiper-controls-navigation-icon-size: var(
        --swiper-controls-navigation-icon-size
    );
    --bh-swiper-controls-navigation-icon-size-hover-factor: var(
        --swiper-controls-navigation-icon-size-hover-factor
    );
    --bh-swiper-controls-navigation-color-indicator-on-light: var(
        --swiper-controls-navigation-color-indicator-on-light
    );
    --bh-swiper-controls-navigation-color-background-on-light: var(
        --swiper-controls-navigation-color-background-on-light
    );
    --bh-swiper-controls-navigation-color-indicator-on-dark: var(
        --swiper-controls-navigation-color-indicator-on-dark
    );
    --bh-swiper-controls-navigation-color-background-on-dark: var(
        --swiper-controls-navigation-color-background-on-dark
    );

    --bh-swiper-controls-pagination-spacing: var(
        --swiper-controls-pagination-spacing
    );
    --bh-swiper-controls-pagination-size-idle: var(
        --swiper-controls-pagination-size-idle
    );
    --bh-swiper-controls-pagination-size-active-factor: var(
        --swiper-controls-pagination-size-active-factor
    );
    --bh-swiper-controls-pagination-color-indicator-on-light-idle: var(
        --swiper-controls-pagination-color-indicator-on-light-idle
    );
    --bh-swiper-controls-pagination-color-indicator-on-light-active: var(
        --swiper-controls-pagination-color-indicator-on-light-active
    );
    --bh-swiper-controls-pagination-color-background-on-light: var(
        --swiper-controls-pagination-color-background-on-light
    );
    --bh-swiper-controls-pagination-color-indicator-on-dark-idle: var(
        --swiper-controls-pagination-color-indicator-on-dark-idle
    );
    --bh-swiper-controls-pagination-color-indicator-on-dark-active: var(
        --swiper-controls-pagination-color-indicator-on-dark-active
    );
    --bh-swiper-controls-pagination-color-background-on-dark: var(
        --swiper-controls-pagination-color-background-on-dark
    );

    position: relative;
}

:where(.bh-swiper--overflow) .swiper-container {
    overflow: visible;
}

:where(.bh-swiper--overflow) .swiper-wrapper {
    height: auto !important;
}

/* !- controls */

:where(.bh-swiper) .bh-swiper__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--bh-swiper-controls-spacing-horizontal);
    margin: var(--bh-swiper-controls-spacing-vertical) 0 0;
    padding: 0;
    list-style-type: none;
    pointer-events: none;
}

:where(.lp-navigation__anchor__list-swiper.bh-swiper) .bh-swiper__controls {
    position: absolute;
    top: 100%;
    margin: 0;
    box-shadow: var(--navigation-anchor-box-shadow);
}

:where(.bh-swiper)
    .bh-swiper__controls:has(.swiper-button-lock, .swiper-pagination-lock) {
    display: none !important;
}

:where(.bh-swiper) .bh-swiper__controls__item {
    pointer-events: auto;
}

:where(.bh-swiper-controls--absolute) .bh-swiper__controls {
    position: absolute;
    inset: 0;
    align-items: flex-end;
    margin-block-start: 0;
}

/* navigation */

:where(.bh-swiper) .swiper-navigation {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    margin-top: 0;
    border-radius: var(--bh-swiper-controls-navigation-border-radius);
    width: var(--bh-swiper-controls-navigation-size);
    height: var(--bh-swiper-controls-navigation-size);
    color: var(--bh-swiper-controls-navigation-color-indicator-on-light);
    background: var(--bh-swiper-controls-navigation-color-background-on-light);
    transition: opacity var(--bh-swiper-controls-transition);
}

:where(.bh-swiper--on-dark) .swiper-navigation {
    color: var(--bh-swiper-controls-navigation-color-indicator-on-dark);
    background: var(--bh-swiper-controls-navigation-color-background-on-dark);
    -webkit-backdrop-filter: blur(
        1rem
    ); /** @update consider removing `-webkit-backdrop-filter` for the future when browser support is sufficient */
    backdrop-filter: var(--bh-swiper-controls-backdrop-filter);
}

:where(.bh-swiper) .swiper-button-prev {
    left: var(--bh-swiper-controls-navigation-spacing);
}

:where(.bh-swiper) .swiper-button-next {
    right: var(--bh-swiper-controls-navigation-spacing);
}

:where(.bh-swiper:not(.bh-swiper-controls--absolute))
    .bh-swiper__controls__item__navigation {
    position: relative;
    inset: auto;
    transform: none;
}

:where(.bh-swiper) .swiper-navigation.swiper-button-disabled {
    opacity: var(--bh-swiper-controls-opacity-inactive);
    cursor: not-allowed;
}

:where(.bh-swiper) .swiper-navigation.swiper-button-lock {
    display: none !important;
}

:where(.bh-swiper) .swiper-navigation::before {
    font-family: "bakehouse-iconset" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: var(--bh-swiper-controls-navigation-icon-size);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-feature-settings: "liga";
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
    color: inherit;
    transform: translate3d(0, 0, 0);
    transition: transform var(--bh-swiper-controls-transition);
}

:where(.bh-swiper)
    .swiper-button-prev:not(.swiper-button-disabled):focus-visible::before {
    transform: translate3d(
        calc(
            (
                    var(--bh-swiper-controls-navigation-size) -
                        var(--bh-swiper-controls-navigation-icon-size)
                ) *
                var(--bh-swiper-controls-navigation-icon-size-hover-factor) * -1
        ),
        0,
        0
    );
}

:where(.bh-swiper)
    .swiper-button-next:not(.swiper-button-disabled):focus-visible::before {
    transform: translate3d(
        calc(
            (
                    var(--bh-swiper-controls-navigation-size) -
                        var(--bh-swiper-controls-navigation-icon-size)
                ) *
                var(--bh-swiper-controls-navigation-icon-size-hover-factor)
        ),
        0,
        0
    );
}

@media (pointer: fine) {
    :where(.bh-swiper)
        .swiper-button-prev:not(.swiper-button-disabled):hover::before {
        transform: translate3d(
            calc(
                (
                        var(--bh-swiper-controls-navigation-size) -
                            var(--bh-swiper-controls-navigation-icon-size)
                    ) *
                    var(
                        --bh-swiper-controls-navigation-icon-size-hover-factor
                    ) *
                    -1
            ),
            0,
            0
        );
    }

    :where(.bh-swiper)
        .swiper-button-next:not(.swiper-button-disabled):hover::before {
        transform: translate3d(
            calc(
                (
                        var(--bh-swiper-controls-navigation-size) -
                            var(--bh-swiper-controls-navigation-icon-size)
                    ) *
                    var(--bh-swiper-controls-navigation-icon-size-hover-factor)
            ),
            0,
            0
        );
    }
}

:where(.bh-swiper) .swiper-button-prev::before {
    content: "\e9f7";
}

:where(.bh-swiper) .swiper-button-next::before {
    content: "\e9f8";
}

:where(.bh-swiper:not(.bh-swiper-controls--absolute))
    .bh-swiper__controls__item__navigation--prev::before {
    content: "\e901";
}

:where(.bh-swiper:not(.bh-swiper-controls--absolute))
    .bh-swiper__controls__item__navigation--next::before {
    content: "\e902";
}

:where(.bh-swiper) .swiper-navigation::after {
    content: none !important;
}

/* pagination */

:where(.bh-swiper) .swiper-pagination {
    position: relative;
    z-index: 1;
    inset-block-end: var(--bh-swiper-controls-navigation-spacing);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--bh-swiper-controls-pagination-spacing);
    border-radius: calc(
        var(--bh-swiper-controls-pagination-size-idle) *
            var(--bh-swiper-controls-pagination-size-active-factor)
    );
    padding: calc(var(--bh-swiper-controls-pagination-spacing) * 0.5);
    inline-size: 100%;
    transition: opacity var(--bh-swiper-controls-transition);
}

:where(.bh-swiper:not(.bh-swiper-controls--absolute))
    .bh-swiper__controls__item__pagination {
    inset-block-end: auto;
}

:where(.bh-swiper) .swiper-pagination.swiper-pagination-bullets-dynamic {
    width: auto !important;
}

:where(.bh-swiper--pagination-background) .swiper-pagination {
    background-color: var(
        --bh-swiper-controls-pagination-color-background-on-light
    );
}

:where(.bh-swiper--on-dark.bh-swiper--pagination-background)
    .swiper-pagination {
    background-color: var(
        --bh-swiper-controls-pagination-color-background-on-dark
    );
    -webkit-backdrop-filter: blur(
        1rem
    ); /** @update consider removing `-webkit-backdrop-filter` for the future when browser support is sufficient */
    backdrop-filter: var(--bh-swiper-controls-backdrop-filter);
}

:where(.bh-swiper) .swiper-pagination.swiper-pagination-lock {
    display: none !important;
}

:where(.bh-swiper) .swiper-pagination .swiper-pagination-bullet {
    margin: 0 !important;
    border-radius: var(--bh-swiper-controls-pagination-size-idle);
    width: var(--bh-swiper-controls-pagination-size-idle);
    height: var(--bh-swiper-controls-pagination-size-idle);
    background: var(
        --bh-swiper-controls-pagination-color-indicator-on-light-idle
    );
    opacity: 1;
    transition:
        width var(--bh-swiper-controls-transition),
        background var(--bh-swiper-controls-transition),
        opacity var(--bh-swiper-controls-transition);
}

:where(.bh-swiper)
    .swiper-pagination.swiper-pagination-bullets-dynamic
    .swiper-pagination-bullet {
    left: auto !important;
    transform: none !important;
}

:where(.bh-swiper--on-dark) .swiper-pagination .swiper-pagination-bullet {
    background: var(
        --bh-swiper-controls-pagination-color-indicator-on-dark-idle
    );
    opacity: var(--bh-swiper-controls-opacity-inactive);
}

:where(.bh-swiper--on-dark.bh-swiper--pagination-background)
    .swiper-pagination
    .swiper-pagination-bullet {
    background: var(
        --bh-swiper-controls-pagination-color-indicator-on-light-idle
    );
    opacity: 1;
}

:where(.bh-swiper) .swiper-pagination .swiper-pagination-bullet-active {
    width: calc(
        var(--bh-swiper-controls-pagination-size-idle) *
            var(--bh-swiper-controls-pagination-size-active-factor)
    );
    background: var(
        --bh-swiper-controls-pagination-color-indicator-on-light-active
    );
    opacity: 1;
}

:where(.bh-swiper--on-dark)
    .swiper-pagination
    .swiper-pagination-bullet-active {
    background: var(
        --bh-swiper-controls-pagination-color-indicator-on-dark-active
    );
    opacity: 1;
}

:where(.bh-swiper--on-dark.bh-swiper--pagination-background)
    .swiper-pagination
    .swiper-pagination-bullet-active {
    background: var(
        --bh-swiper-controls-pagination-color-indicator-on-light-idle
    );
    opacity: 1;
}