/*
Theme Name: Einzelhandelsverband
Theme URI:
Author: Das JAGI-Team
Author URI:
Description: WordPress FSE Block Theme für den Einzelhandelsverband (EHV)
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ehv
Tags:
*/

/*
 * BREAKPOINTS
 * < 550px  – Footer-Menü: 2-Spalten-Grid statt horizontaler Liste
 * < 1024px – Burger-Menü aktiv; Footer-Spalten gestapelt
 * 1024–1274px – Footer-Button auf volle Spaltenbreite (Umbruch-Fix)
 */

body {
    overflow-x: hidden; /* Verhindert horizontales Scrollen bei alignfull-Blöcken */
    hyphens: auto;
}

:root p {
    margin-block-start: 0.5em;
}

.wp-site-blocks > main {
    margin-block-start: 0;
}

.wp-block-paragraph a,
.wp-block-list a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    font-weight: 400;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.wp-block-paragraph a:hover,
.wp-block-list a:hover {
    text-decoration: none;
}

.has-hero-font-size {
    line-height: 1.18;
}

.wp-block-cover.is-style-hero {
    height: 60vh !important;
    align-items: center;
    padding-bottom: var(--wp--preset--spacing--40) !important;
    margin-bottom: var(--wp--preset--spacing--50);
}

.wp-block-cover.is-style-hero .wp-block-cover__image-background {
    object-position: right center !important;
}

.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

.wp-block-cover.is-style-hero .wp-block-cover__inner-container:has(.wp-block-buttons) {
    margin-block-start: 12vh;
}

.wp-block-cover.is-style-hero h1,
.wp-block-cover.is-style-hero h2,
.wp-block-cover.is-style-hero h3,
.wp-block-cover.is-style-hero h4,
.wp-block-cover.is-style-hero h5,
.wp-block-cover.is-style-hero h6,
.wp-block-cover.is-style-hero p {
    hyphens: manual;
}

.wp-block-cover.is-style-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(0, 38, 65, 0.80) 60%,
        transparent 70%
    );
}

@media (max-width: 767px) {
    .wp-block-cover.is-style-hero {
        height: calc(100svh - var(--ehv-header-h, 0px) - var(--wp-admin--admin-bar--height, 0px)) !important;
        align-items: flex-end;
    }

    .wp-block-cover.is-style-hero::before {
        background: linear-gradient(
            to top,
            rgba(0, 38, 65, 0.80) 20%,
            transparent 100%
        );
    }

    .wp-block-cover.is-style-hero .wp-block-heading,
    .wp-block-cover.is-style-hero .wp-block-paragraph {
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    .wp-block-cover.is-style-hero .wp-block-cover__inner-container:has(.wp-block-buttons) {
        margin-block-start: 0;
    }

    .hero-cta .wp-block-button__link {
        font-size: var(--wp--preset--font-size--large);
    }
}

.hero-subline {
    margin-block-start: 0.5rem !important;
}

.hero-cta {
    margin-block-start: 2rem !important;
}

footer.wp-block-template-part {
    margin-block-start: 0;
}

@media (max-width: 767px) {

    .wp-block-group:has(> .ehv-partner-logos) {
        background-color: var(--wp--preset--color--secondary) !important;
        margin-block-start: 0;
        padding-block-end: var(--wp--preset--spacing--50);
    }

    .wp-block-group:has(> .ehv-partner-logos) + * {
        margin-block-start: 0;
    }
}

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

.wp-block-button__link {
    transition: filter 0.2s ease;
}

.is-style-hero-filled .wp-block-button__link,
.is-style-hero-white .wp-block-button__link {
    min-width: 340px;
}

.is-style-hero-filled .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--accent-2);
    transition: background-color 0.15s, color 0.15s;
}

.is-style-hero-filled .wp-block-button__link:hover {
    filter: none;
    background-color: transparent !important;
    color: var(--wp--preset--color--light) !important;
    border-color: var(--wp--preset--color--light);
}

.is-style-hero-white .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--light);
    transition: background-color 0.15s, color 0.15s;
}

.is-style-hero-white .wp-block-button__link:hover {
    filter: none;
    background-color: transparent !important;
    color: var(--wp--preset--color--light) !important;
    border-color: var(--wp--preset--color--light);
}

@media (max-width: 499px) {
    .hero-cta .wp-block-button {
        width: 100%;
    }

    .is-style-hero-filled .wp-block-button__link,
    .is-style-hero-white .wp-block-button__link {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

.wp-block-button__link:hover {
    filter: brightness(0.85);
}

.is-style-accent .wp-block-button__link {
    border: 2px solid transparent;
}

.has-primary-background-color .wp-block-button.is-style-accent .wp-block-button__link:hover {
    color: var(--wp--preset--color--accent-1) !important;
}

.is-style-accent .wp-block-button__link:hover {
    filter: none;
    background-color: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--accent-1) !important;
}

header .is-style-accent .wp-block-button__link:hover {
    color: var(--wp--preset--color--light) !important;
}

header .wp-block-button__link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

footer .wp-block-button__link {
    white-space: nowrap;
}

footer .is-style-outline .wp-block-button__link:hover {
    filter: none;
    background-color: var(--wp--preset--color--accent-1) !important;
    color: var(--wp--preset--color--dark) !important;
    border-color: transparent !important;
}

footer .is-style-outline .wp-block-button__link:hover .icon-arrow-right {
    background-color: var(--wp--preset--color--primary);
}

.is-style-outline-arrow .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    white-space: nowrap;
}

.is-style-outline-arrow .wp-block-button__link::after {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 1.4em;
    height: 0.6em;
    background-color: var(--wp--preset--color--accent-1);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.28 16.36'%3E%3Cline y1='8.18' x2='35.11' y2='8.18' stroke='black' stroke-width='2'/%3E%3Cpolygon points='28.48 16.36 27.12 14.89 34.34 8.18 27.12 1.46 28.48 0 37.28 8.18 28.48 16.36' fill='black'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    transition: background-color 0.2s ease;
}

.is-style-outline-arrow .wp-block-button__link:hover {
    filter: none;
    background-color: var(--wp--preset--color--accent-1) !important;
    color: var(--wp--preset--color--dark) !important;
    border-color: transparent !important;
}

.is-style-outline-arrow .wp-block-button__link:hover::after {
    background-color: var(--wp--preset--color--dark);
}

.is-style-accent-arrow .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    white-space: nowrap;
}

.is-style-accent-arrow .wp-block-button__link::after {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 1.4em;
    height: 0.6em;
    background-color: var(--wp--preset--color--dark);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.28 16.36'%3E%3Cline y1='8.18' x2='35.11' y2='8.18' stroke='black' stroke-width='2'/%3E%3Cpolygon points='28.48 16.36 27.12 14.89 34.34 8.18 27.12 1.46 28.48 0 37.28 8.18 28.48 16.36' fill='black'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    transition: background-color 0.2s ease;
}

.is-style-accent-arrow .wp-block-button__link:hover {
    filter: none;
    background-color: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--accent-1) !important;
}

.is-style-accent-arrow .wp-block-button__link:hover::after {
    background-color: var(--wp--preset--color--primary);
}

.wp-block-button__link:focus-visible {
    outline-offset: 4px;
}

.is-style-icon-link-akzent .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    background: transparent !important;
    color: currentColor !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 500;
}

.is-style-icon-link-akzent .wp-block-button__link::before {
    content: '';
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--accent-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d696' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    transition: background-color 0.2s ease;
}

.is-style-icon-link-akzent .wp-block-button__link:hover {
    filter: none;
}

.is-style-icon-link-akzent .wp-block-button__link:hover::before {
    background-color: var(--wp--preset--color--accent-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f5d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

.is-style-icon-link .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    background: transparent !important;
    color: currentColor !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 500;
}

.is-style-icon-link .wp-block-button__link::before {
    content: '';
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f5d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    transition: transform 0.2s ease;
}

.is-style-icon-link .wp-block-button__link:hover {
    filter: none;
}

.is-style-icon-link .wp-block-button__link:hover::before {
    transform: scale(1.1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--dark);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--dark);
}

header .wp-block-navigation__container {
    hyphens: none;
}

header .wp-block-navigation-item__content:focus-visible {
    outline-offset: 6px;
}

header .wp-block-navigation-item__content:hover,
header .current-menu-item > .wp-block-navigation-item__content,
footer .wp-block-navigation-item__content:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

header .wp-block-navigation__responsive-container-content,
header .wp-block-navigation__container {
    gap: 2rem;
}

/* Burger-Menü ab unter 1024px – überschreibt WordPress Inline-CSS via !important */
@keyframes nav-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (max-width: 1023px) {
    header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        animation: nav-slide-in 0.3s ease forwards;
        background-color: var(--wp--preset--color--secondary) !important;
        padding: 2rem 1.5rem 0 !important;
    }

    /* padding-bottom über ::after, da Browser den padding-bottom scrollbarer Container
       nicht in die Scrollhöhe einrechnen */
    header .wp-block-navigation__responsive-container.is-menu-open::after {
        content: '';
        display: block;
        height: 2rem;
        flex-shrink: 0;
    }

    /* Backdrop: abdunkelt die linke Hälfte hinter dem Panel */
    html.has-modal-open body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-color: rgba(0, 38, 65, 0.7);
        z-index: 999;
    }
}


@media (min-width: 1024px) {
    header .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
    header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
        display: flex !important;
        position: static !important;
        background-color: transparent !important;
        padding: 0 !important;
        height: auto !important;
        width: auto !important;
    }
}

@media (max-width: 1023px) {
    header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
}

/*
 * HEADER – DROPDOWN / SUBMENU
 */

/* Toggle-Button: Browser-Defaults zurücksetzen */
header .wp-block-navigation-submenu__toggle {
    background: none;
    border: none;
    padding: 0.25em;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 0;
}

/* Chevron-SVG: stroke auf currentColor – WP setzt keinen stroke-Wert im Attribut */
header .wp-block-navigation__submenu-icon path {
    stroke: currentColor;
}

/* Chevron dreht sich wenn Submenu offen (Desktop) */
header .wp-block-navigation__submenu-icon svg {
    transition: transform 0.2s ease;
}

header .open-on-hover-click:hover .wp-block-navigation__submenu-icon svg,
header .wp-block-navigation-item.is-menu-open .wp-block-navigation__submenu-icon svg {
    transform: rotate(180deg);
}

/* Dropdown-Panel */
header .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--secondary) !important;
    z-index: 100 !important;
    border-top: 3px solid var(--wp--preset--color--accent-1);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 24px rgba(0, 38, 65, 0.12);
    padding: 0.75rem;
}

/* Einspaltig auf Desktop */
@media (min-width: 1024px) {
    header .wp-block-navigation__submenu-container {
        display: flex !important;
        flex-direction: column;
        min-width: 220px;
        padding: 0;
    }
}

/* Trennlinie zwischen Items */
header .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: 1px solid rgba(0, 47, 93, 0.1);
}

/* Links im Dropdown */
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary) !important;
    padding: 0.6rem 1rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mobile: Panel-Wechsel-Navigation */
@media (max-width: 1023px) {
    /* Hauptliste linksbündig */
    header .is-menu-open .wp-block-navigation__responsive-container-content {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* Schließen-Button: rechts oben im Panel verankern */
    header .is-menu-open .wp-block-navigation__responsive-close-button {
        align-self: flex-end !important;
        margin-bottom: 1rem;
    }

    header .is-menu-open .wp-block-navigation__container {
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Links linksbündig (WP setzt hier ggf. flex-end aus justifyContent: right) */
    header .is-menu-open .wp-block-navigation-item__content {
        text-align: left !important;
        font-weight: 400;
    }

    /* Trennlinie + Abstand zwischen Hauptmenü-Items.
       display:grid überschreibt WPs flex-layout (inkl. justify-content:flex-end aus justifyContent:right) */
    header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        padding-block: 0.8rem;
    }

    header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
        border-top: 1px solid rgba(0, 47, 93, 0.1);
    }

    /* Items mit Untermenü: zweite Spalte für Chevron-Button.
       display:grid muss auch hier explizit stehen – WP setzt auf .has-child möglicherweise
       display:flex !important mit höherer Spezifität als der allgemeine Item-Selektor. */
    header .is-menu-open .has-child {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center;
    }

    header .is-menu-open .has-child > .wp-block-navigation-item__content {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
    }

    /* Chevron-Button: kompakt, eigenes Icon statt WP-SVG */
    header .is-menu-open .wp-block-navigation-submenu__toggle {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.4rem;
    }

    /* WP-SVG ausblenden – zuverlässig nicht renderbar auf Mobile */
    header .is-menu-open .wp-block-navigation-submenu__toggle svg {
        display: none !important;
    }

    /* Chevron-down via mask-image (konsistent mit restlichem Icon-System),
       chevron-right um 90° gedreht = chevron-down */
    header .is-menu-open .wp-block-navigation-submenu__toggle::after {
        content: '';
        display: block;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        background-color: var(--wp--preset--color--primary);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: transform 0.2s ease;
    }

    /* Chevron dreht sich wenn Sub-Menü offen:
       aria-expanded="true" deckt WP Interactivity API + ältere WP-Versionen ab */
    header .is-menu-open .has-child.is-menu-open .wp-block-navigation-submenu__toggle::after,
    header .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
        transform: rotate(90deg);
    }

    /* Sub-Menü im Panel: standardmäßig eingeklappt */
    header .is-menu-open .has-child .wp-block-navigation__submenu-container {
        position: static !important;
        grid-column: 1 / -1;
        grid-row: 2;
        display: none !important;
        background: transparent !important;
        border-top: 1px solid rgba(0, 47, 93, 0.1) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
        padding: 0 !important;
        margin-top: 0.8rem; /* Abstand zwischen Link-Zeile und Trennstrich */
    }

    /* Sub-Menü anzeigen wenn Parent geöffnet.
       Zwei Selektoren für alle WP-Versionen:
       1. .is-menu-open auf <li>         → ältere WP-Versionen
       2. aria-expanded="true" + :has()  → WP Interactivity API (6.3+) */
    header .is-menu-open .has-child.is-menu-open .wp-block-navigation__submenu-container,
    header .is-menu-open .has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) .wp-block-navigation__submenu-container {
        display: flex !important;
        flex-direction: column;
    }

    /* Kein unterer Innenabstand auf dem li, wenn Untermenü geöffnet –
       der Abstand kommt aus dem padding-block der Sub-Items */
    header .is-menu-open .has-child.is-menu-open,
    header .is-menu-open .has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
        padding-bottom: 0;
    }

    /* Sub-Items: Einrückung + Trennlinie */
    header .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding-inline-start: 1.5rem !important;
    }

    header .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
        border-top: 1px solid rgba(0, 47, 93, 0.1);
    }

}

/*
 * FOOTER
 */

/* Trenner nach Spalte 1 und 2 – nth-child(-n+2) trifft alle Spalten mit Index ≤ 2 */
footer .wp-block-columns .wp-block-column:nth-child(-n+2) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

footer .wp-block-columns .wp-block-column:not(:last-child) {
    padding-right: 1.25rem;
}

footer .wp-block-columns .wp-block-column:nth-child(2) {
    padding-inline-start: 1.5rem;
}

footer .wp-block-separator.has-alpha-channel-opacity {
    opacity: 0.35;
}

@media (max-width: 767px) {
    footer.wp-block-template-part > .wp-block-group:first-child {
        padding-top: var(--wp--preset--spacing--80) !important;
    }

    footer .wp-block-columns .wp-block-column:nth-child(2) {
        padding-inline-start: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1274px) {
    footer .wp-block-button {
        width: 100%;
    }
    footer .wp-block-button__link {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

@media (max-width: 1023px) {
    footer .wp-block-columns {
        flex-direction: column !important;
    }

    footer .wp-block-columns .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        padding-right: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    footer .wp-block-columns .wp-block-column:nth-child(2) .is-layout-flex {
        text-align: left;
    }

    footer .wp-block-columns .wp-block-column:nth-child(-n+2) {
        border-right: none;
    }

    footer .wp-block-columns .wp-block-column:nth-child(1),
    footer .wp-block-columns .wp-block-column:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        padding-bottom: 1.25rem;
    }

    /* Spalte 4: Button vor Social-Icons (umgekehrte Reihenfolge) */
    footer .wp-block-columns .wp-block-column:nth-child(4) .is-layout-flex {
        flex-direction: column-reverse;
        align-items: center;
    }

    footer .wp-block-columns .wp-block-column:nth-child(4) .wp-block-social-links {
        flex-direction: row;
    }
}

footer .wp-block-navigation__container {
    gap: 0;
}

footer .wp-block-navigation .wp-block-navigation-item {
    display: flex;
    align-items: center;
}

footer .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before {
    content: '';
    width: 1px;
    height: 1em;
    flex-shrink: 0;
    background-color: var(--wp--preset--color--accent-1);
    margin-inline: 2rem;
}

@media (max-width: 1023px) {
    footer .wp-block-separator {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 550px) {
    footer .wp-block-navigation__container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    footer .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before {
        display: none;
    }
}

footer .icon-arrow-right {
    margin-inline-start: 1em;
}

footer .wp-block-column:nth-child(2) .wp-block-group.is-nowrap {
    position: relative;
}

footer .wp-block-column:nth-child(2) .wp-block-group.is-nowrap .icon-location {
    position: absolute;
    left: -1.5rem;
    top: 3px;
    margin-inline: 0;
}

/*
 * SINGLE POST
 */



.single-weitere-dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .single-weitere-dots {
        display: flex;
    }
}

.single-weitere-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 47, 93, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.single-weitere-dot--active {
    background-color: var(--wp--preset--color--primary);
}

.single .wp-block-query .wp-block-post-template,
.post-type-archive-termin .wp-block-query .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--20);
}

.single .wp-block-query .wp-block-post-template > .wp-block-post,
.post-type-archive-termin .wp-block-query .wp-block-post-template > .wp-block-post {
    margin-block-start: 0;
    display: flex;
    flex-direction: column;
}

.single .wp-block-query .wp-block-post-template > .wp-block-post > .wp-block-group,
.post-type-archive-termin .wp-block-query .wp-block-post-template > .wp-block-post > .wp-block-group {
    flex: 1;
}

@media (max-width: 767px) {
    .single .wp-block-query .wp-block-post-template,
    .post-type-archive-termin .wp-block-query .wp-block-post-template {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 1rem;
    }

    .single .wp-block-query .wp-block-post-template::-webkit-scrollbar,
    .post-type-archive-termin .wp-block-query .wp-block-post-template::-webkit-scrollbar {
        display: none;
    }

    .single .wp-block-query .wp-block-post-template > .wp-block-post,
    .post-type-archive-termin .wp-block-query .wp-block-post-template > .wp-block-post {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}

.single .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image),
.post-type-archive-termin .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) {
    box-shadow: 0 2px 12px rgba(0, 46, 93, 0.08);
    overflow: hidden;
    gap: 0;
    padding: 0;
}

.single .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-post-featured-image,
.post-type-archive-termin .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-post-featured-image {
    margin: 0;
}

.single .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-post-featured-image figure,
.single .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-post-featured-image img,
.post-type-archive-termin .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-post-featured-image figure,
.post-type-archive-termin .wp-block-query .wp-block-group:has(> .wp-block-post-featured-image) > .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    margin: 0;
}

.single .wp-block-query .wp-block-post-date,
.single .wp-block-query .wp-block-post-title,
.post-type-archive-termin .wp-block-query .wp-block-post-date,
.post-type-archive-termin .wp-block-query .wp-block-post-title {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-weight: 400;
}

.single .wp-block-query .wp-block-post-date,
.post-type-archive-termin .wp-block-query .wp-block-post-date {
    font-size: var(--wp--preset--font-size--medium);
}

.single .wp-block-query .wp-block-post-title,
.post-type-archive-termin .wp-block-query .wp-block-post-title {
    font-size: var(--wp--preset--font-size--large);
}

.single .wp-block-query .wp-block-post-title a,
.post-type-archive-termin .wp-block-query .wp-block-post-title a {
    text-decoration: none;
    color: inherit;

    &:hover {
        text-decoration: underline;
    }
}

.single .wp-block-query .wp-block-post-excerpt__excerpt,
.post-type-archive-termin .wp-block-query .wp-block-post-excerpt__excerpt {
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--dark);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
}

/*
 * MEDIA + TEXT
 */

.wp-block-media-text__media img,
.wp-block-media-text__media video {
    border-radius: 8px;
}

/* Content-Bereich streckt sich auf die Bildhöhe */
.wp-block-media-text {
    align-items: stretch;
}

/* Direktes Group-Kind füllt die volle Höhe – ermöglicht space-between im Editor */
.wp-block-media-text__content > .wp-block-group {
    height: 100%;
}

@media (max-width: 767px) {
    .single .wp-block-query .wp-block-post-excerpt__excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (max-width: 767px) {
    .wp-block-media-text {
        grid-template-columns: 100% !important;
    }

    .wp-block-media-text > .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
    }

    .wp-block-media-text > .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 2;
        padding-inline: 0;
        padding-top: 1.5rem;
    }
}

.single .wp-block-query .wp-block-post-excerpt__more-text {
    display: none;
}

.wp-block-media-text.is-style-hervorgehoben {
    align-items: stretch !important;
    border-radius: 8px;
    overflow: hidden;
}

.wp-block-media-text.is-style-hervorgehoben .wp-block-media-text__media {
    align-self: stretch !important;
    position: relative;
    overflow: hidden;
    min-height: 250px;
}

.wp-block-media-text.is-style-hervorgehoben .wp-block-media-text__media img,
.wp-block-media-text.is-style-hervorgehoben .wp-block-media-text__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.wp-block-media-text.is-style-hervorgehoben .wp-block-media-text__content {
    background-color: inherit;
    color: inherit;
    padding: var(--wp--preset--spacing--40);
}

@media (max-width: 767px) {
    .wp-block-media-text.is-style-hervorgehoben > .wp-block-media-text__content {
        padding: 1.5rem;
    }
}

body.single main.wp-block-group .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

body.single .ehv-ansprechpersonen-grid__cards {
    max-width: var(--wp--custom--single-content-size);
}

body.single main:has(.entry-content > .alignfull:last-child) .ehv-aktuelle-beitraege {
    margin-top: 0 !important;
}


.ehv-section-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--wp--preset--font-family--source-sans-3);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 300;
    color: var(--wp--preset--color--primary);
    margin: 0;

    &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: currentColor;
        opacity: 0.25;
        min-width: 2rem;
    }
}

/*
 * ZITAT – KARTE
 */

@media (max-width: 781px) {
    .no-padding-left-right-quote {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.wp-block-quote.is-style-karte {
    background: var(--wp--preset--color--light);
    border-radius: 8px;
    border: none;
    padding: 1.75rem 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.wp-block-quote.is-style-karte::before {
    content: '\201C';
    font-size: 6rem;
    line-height: 0.75;
    color: var(--wp--preset--color--accent-1);
    flex-shrink: 0;
    font-weight: 700;
}

.wp-block-quote.is-style-karte p {
    margin: 0;
}

.wp-block-quote.is-style-karte-oben {
    background: var(--wp--preset--color--light);
    border-radius: 8px;
    border: none;
    padding-left: 0;
}

.wp-block-quote.is-style-karte-oben::before {
    content: '\201C';
    display: block;
    font-size: clamp(5rem, 3.25rem + 7.19vw, 9rem);
    line-height: 0.75;
    color: var(--wp--preset--color--accent-1);
    font-weight: 700;
    margin-bottom: -0.3em;
}

.wp-block-quote.is-style-karte-oben p {
    margin: 0;
}

.wp-block-column.is-style-inhalt-zentriert {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 * LEISTUNGEN-GRID
 */

.leistungen-karte {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
}


.leistungen-karte :is(h1, h2, h3, h4, h5, h6) {
    margin-block-end: 0;
}

@media (max-width: 767px) {
    .leistungen-karte .wp-block-heading,
    .leistungen-karte .wp-block-paragraph {
        text-align: center !important;
    }
}

.leistungen-karte .wp-block-separator {
    width: 20px;
    max-width: 20px;
    margin-inline: auto;
}

.leistungen-karte.is-style-featured > .wp-block-columns {
    flex-grow: 1;
    margin-bottom: 0;
}

.leistungen-karte.is-style-featured .wp-block-column:first-child {
    display: flex;
    flex-direction: column;
}

.leistungen-karte.is-style-featured .wp-block-columns,
.leistungen-karte.is-style-featured .wp-block-column:last-child {
    overflow: visible;
}

.leistungen-karte.is-style-featured .wp-block-column:last-child .wp-block-image {
    margin: -2rem -2rem -2rem 0;
    overflow: visible;
}

.leistungen-karte.is-style-featured .wp-block-column:last-child .wp-block-image img {
    width: 100%;
    height: auto;
    max-width: unset;
    display: block;
}

.is-style-ohne-shadow .leistungen-karte {
    box-shadow: none;
}

@media (max-width: 767px) {
    .is-style-ohne-shadow .leistungen-karte:not(.is-style-featured) {
        padding: 0;
    }
}

.is-style-mit-trennlinie .leistungen-karte {
    --ehv-trennlinie-gap: var(--jagi-gap, var(--wp--style--block-gap));
    box-shadow: none;
}

.is-style-mit-trennlinie .leistungen-karte:not(:first-child) {
    position: relative;
}

/* Linie sitzt mittig in der Grid-Gap statt an der Kartenkante, daher der
   negative Versatz um die halbe Gap-Breite/-Höhe. */
.is-style-mit-trennlinie .leistungen-karte:not(:first-child)::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--ehv-trennlinie-gap) / 2);
    top: 12.5%;
    height: 75%;
    width: 1px;
    background: var(--wp--preset--color--secondary);
}

/*
 * jagi/karten-grid (hat [data-columns]): Der Zeilenanfang (Spalte 1) bekommt
 * keine vertikale Linie mehr, stattdessen bekommt JEDE Karte ab der 2. Zeile
 * eine horizontale Linie oben (::after) – unabhängig von ihrer Spalte, damit
 * z.B. bei 2 Spalten auch Spalte 2 der 2. Zeile die Linie zeigt. Pro Spalten-
 * anzahl eigene nth-child-Formel, da nth-child() keine CSS-Variable akzeptiert.
 */
.is-style-mit-trennlinie[data-columns="1"] .leistungen-karte::before,
.is-style-mit-trennlinie[data-columns="2"] .leistungen-karte:nth-child(2n+1)::before,
.is-style-mit-trennlinie[data-columns="3"] .leistungen-karte:nth-child(3n+1)::before,
.is-style-mit-trennlinie[data-columns="4"] .leistungen-karte:nth-child(4n+1)::before,
.is-style-mit-trennlinie[data-columns="5"] .leistungen-karte:nth-child(5n+1)::before,
.is-style-mit-trennlinie[data-columns="6"] .leistungen-karte:nth-child(6n+1)::before {
    display: none;
}

.is-style-mit-trennlinie[data-columns="1"] .leistungen-karte:not(:first-child)::after,
.is-style-mit-trennlinie[data-columns="2"] .leistungen-karte:nth-child(n+3)::after,
.is-style-mit-trennlinie[data-columns="3"] .leistungen-karte:nth-child(n+4)::after,
.is-style-mit-trennlinie[data-columns="4"] .leistungen-karte:nth-child(n+5)::after,
.is-style-mit-trennlinie[data-columns="5"] .leistungen-karte:nth-child(n+6)::after,
.is-style-mit-trennlinie[data-columns="6"] .leistungen-karte:nth-child(n+7)::after {
    content: '';
    position: absolute;
    left: 12.5%;
    top: calc(-1 * var(--ehv-trennlinie-gap) / 2);
    width: 75%;
    height: 1px;
    background: var(--wp--preset--color--secondary);
}

@media (max-width: 767px) {
    .leistungen-karte:not(.is-style-featured) {
        padding-inline: 0.5rem;
        padding-top: 2rem;
    }

    .is-style-mit-trennlinie .leistungen-karte:not(.is-style-featured) {
        padding-inline: 0;
    }

    /* auf Mobile sollen die Elemente stapeln, die sonst die Option "Zeilenumbruch erlauben" deaktiviert haben. Weil es ab einer bestimmten größe einfach umgebrochen werden muss. */
    .leistungen-karte .is-nowrap {
        flex-direction: column;
    }

    /* leistungen-grid stapelt ab hier einspaltig, karten-grid zeigt 2 Spalten
       (siehe .leistungen-grid und .karten-grid weiter unten) -> horizontale
       Linien nach der 1. Zeile, vertikale Linie zwischen den 2 Spalten
       (gleiche Formel wie [data-columns="2"] am Desktop: Spalte 1 = ungerade
       Position bekommt keine Linie, Spalte 2 = gerade Position schon). */
    .is-style-mit-trennlinie .leistungen-karte:nth-child(2n+1)::before {
        display: none;
    }

    .is-style-mit-trennlinie .leistungen-karte:nth-child(n+3)::after {
        content: '';
        position: absolute;
        left: 12.5%;
        top: calc(-1 * var(--ehv-trennlinie-gap) / 2);
        width: 75%;
        height: 1px;
        background: var(--wp--preset--color--secondary);
    }
}

.leistungen-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20) !important;
}

@media (max-width: 767px) {
    .leistungen-grid {
        flex-direction: column;
    }

    /* Überschreibt die Spaltenanzahl aus dem Plugin (data-columns) auf 2,
       statt wie leistungen-grid einspaltig zu stapeln. */
    .karten-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.leistungen-grid > .block-editor-inner-blocks {
    flex: 1 1 100%;
}

/*
 * JAGI AKKORDION
 * Überschreibt das Placeholder-Styling des Plugins mit EHV Design Tokens.
 */

.jagi-accordion {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
}

.jagi-accordion .jagi-accordion-item:last-child {
    border-bottom: none;
}

/* Trennlinien zwischen Items */
.jagi-accordion .jagi-accordion-item {
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--secondary);
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}


/* Browser-Marker (Dreieck) entfernen, Plugin-Hintergrund zurücksetzen */
.jagi-accordion .jagi-accordion-item summary {
    list-style: none;
    background: transparent;
}
.jagi-accordion .jagi-accordion-item summary::-webkit-details-marker {
    display: none;
}

/* Summary – Layout & Grundstil */
.jagi-accordion .accordion-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    background: transparent;
    cursor: pointer;
}

.jagi-accordion .accordion-item-header:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-1);
    outline-offset: 2px;
}

/* Überschrift im Summary */
.jagi-accordion .accordion-item-header h2,
.jagi-accordion .accordion-item-header h3,
.jagi-accordion .accordion-item-header h4,
.jagi-accordion .accordion-item-header h5,
.jagi-accordion .accordion-item-header h6 {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    color: var(--wp--preset--color--primary);
    line-height: 1.35;
}

/* Plus-Icon – wechselt beim Öffnen zu einem Minus */
.jagi-accordion .accordion-item-header::after {
    content: '+';
    flex-shrink: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: var(--wp--preset--color--primary);
}

.jagi-accordion .jagi-accordion-item[open] > .accordion-item-header::after {
    content: '−';
}

/* Inhalt des geöffneten Items */
.jagi-accordion .accordion-item-content {
    padding: 0.75rem 0 1.25rem 1.25rem;
    background: transparent;
}

/* Sanftes Auf- und Zuklappen (öffnen + schließen) */
.jagi-accordion .jagi-accordion-item {
    interpolate-size: allow-keywords;
}

.jagi-accordion .jagi-accordion-item::details-content {
    overflow: hidden;
    block-size: 0;
    transition: block-size 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

.jagi-accordion .jagi-accordion-item[open]::details-content {
    block-size: auto;
}

.leistungen-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex !important;
    flex-wrap: wrap;
}

.leistungen-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .leistungen-karte.is-style-featured {
    flex: 0 0 40%;
}

.leistungen-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .leistungen-karte:not(.is-style-featured) {
    flex: 1;
}

.leistungen-karte.is-style-featured {
    position: relative;
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background-color: transparent !important;
    border-radius: 0 !important;
    margin-inline-end: calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--20));
}

.leistungen-karte.is-style-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--primary);
    border-radius: 8px;
    z-index: 0;
}

.leistungen-karte.is-style-featured::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -32px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 50px 32px;
    border-color: transparent transparent transparent var(--wp--preset--color--primary);
    z-index: 0;
}

.leistungen-karte.is-style-featured > * {
    position: relative;
    z-index: 1;
}

.leistungen-karte.is-style-featured p.has-accent-1-color {
    margin-top: 1rem;
}

.leistungen-karte.is-style-featured :is(h1, h2, h3, h4, h5, h6) + p {
    margin-block-start: var(--wp--preset--spacing--10);
}

.leistungen-karte.is-style-featured .ehv-icon-link {
    margin-block-start: auto;
}

.leistungen-karte:not(.is-style-featured) {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 1.75rem;
}

.leistungen-karte:not(.is-style-featured) :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0.5rem;
}

.leistungen-karte:not(.is-style-featured) p {
    font-weight: 300;
}

.leistungen-karte:not(.is-style-featured) .wp-block-image {
    display: flex;
    justify-content: center;
}

.leistungen-karte:not(.is-style-featured) .ehv-icon-link {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    margin-top: auto;
}

@media (max-width: 1299px) {
    .leistungen-karte.is-style-featured {
        flex: 0 1 100%;
        margin-inline-end: 0;
        margin-block-end: calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--20));
    }

    .leistungen-karte.is-style-featured::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .home .leistungen-grid {
        flex-direction: column;
    }

    .home .leistungen-karte {
        padding: 1rem;
    }

    .home .leistungen-karte.is-style-featured {
        flex: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    .home .leistungen-karte.is-style-featured > .wp-block-columns {
        width: 100%;
        margin-bottom: 0;
    }

    .home .leistungen-karte.is-style-featured .ehv-responsive-icon {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        z-index: -1;
        opacity: 0.15;
    }

    .home .leistungen-karte.is-style-featured .ehv-responsive-icon picture {
        width: 100%;
        margin: 0;
    }

    .home .leistungen-karte.is-style-featured .ehv-responsive-icon img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .home .leistungen-karte.is-style-featured::after {
        display: none;
    }

    .home .leistungen-karte:not(.is-style-featured) {
        display: grid;
        grid-template-columns: 70px auto;
        align-items: center;
        gap: 1rem;
        text-align: left;
        padding-left: 15%;
    }

    .home .leistungen-karte:not(.is-style-featured) .wp-block-image,
    .home .leistungen-karte:not(.is-style-featured) .ehv-responsive-icon {
        flex-shrink: 0;
        width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .home .leistungen-karte:not(.is-style-featured) .ehv-responsive-icon picture {
        margin: 0;
        width: auto;
    }

    .home .leistungen-karte:not(.is-style-featured) .ehv-responsive-icon img {
        width: 48px;
        height: 48px;
    }

    .home .leistungen-karte:not(.is-style-featured) :is(h1, h2, h3, h4, h5, h6) {
        margin: 0;
        text-align: left !important;
    }

    .home .leistungen-karte:not(.is-style-featured) .wp-block-paragraph,
    .home .leistungen-karte:not(.is-style-featured) .ehv-icon-link,
    .home .leistungen-karte.is-style-featured .wp-block-paragraph:not(:first-of-type) {
        display: none;
    }

    .home .leistungen-karte.is-style-featured .has-x-large-font-size {
        font-size: var(--wp--preset--font-size--xx-large) !important;
    }

    .home .leistungen-karte.is-style-featured .ehv-icon-link.is-style-akzent {
        color: var(--wp--preset--color--accent-1);
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    .page .leistungen-grid {
        flex-direction: column;
    }

    .page .leistungen-karte .wp-block-image img,
    .page .leistungen-karte .ehv-responsive-icon img {
        max-width: 80px;
        height: auto;
    }
}

/*
 * AKTUELLE BEITRÄGE + TERMINE – 2-SPALTEN-LAYOUT
 * WP setzt ab 782px flex-wrap: nowrap !important auf .wp-block-columns.
 * Wir müssen das für diesen Block überschreiben, damit die Spalten wrappen können.
 */

@media (max-width: 999px) {
    .wp-block-columns:has(> .wp-block-column > .ehv-beitraege) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:has(> .wp-block-column > .ehv-beitraege) > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/*
 * KARTEN-GRID IN 2-SPALTEN-LAYOUT
 * Gleiches Problem wie oben: Steht ein karten-grid in einer Columns-Spalte,
 * bleibt die Spalte bis 782px nebeneinander und staucht das Grid. Wrap hier
 * bewusst früher erzwingen, damit das Grid wieder auf voller Breite steht.
 */

@media (max-width: 1024px) {
    .wp-block-columns:has(> .wp-block-column > .karten-grid) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:has(> .wp-block-column > .karten-grid) > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/*
 * HILFKLASSEN
 */

.full-width img {
    width: 100%;
    height: auto;
}

/*
 * ICONS
 * Verwendung: <span class="icon-[name]" aria-hidden="true"></span>
 * Beispiel:   Kontakt<span class="icon-chevron-right" aria-hidden="true"></span>
 * Hinweis:    aria-hidden="true" ist Pflicht – Icons sind rein dekorativ.
 */

[class^="icon-"],
[class*=" icon-"] {
    margin-inline: 0.25em;
}

.icon-location {
    display: inline-block;
    width: calc(0.85 * var(--wp--preset--font-size--medium));
    height: calc(1.1 * var(--wp--preset--font-size--medium));
    vertical-align: middle;
    background-color: var(--wp--preset--color--accent-1);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.82 27.56'%3E%3Cpath d='M19.82,10.41c0,5.2-9.41,15.65-9.41,15.65,0,0-9.41-10.45-9.41-15.65S5.21,1,10.41,1s9.41,4.21,9.41,9.41Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='10.41' cy='10.41' r='3.12' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-arrow-right {
    display: inline-block;
    width: 1.4em;
    height: 0.6em;
    vertical-align: middle;
    background-color: var(--wp--preset--color--accent-1);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.28 16.36'%3E%3Cline y1='8.18' x2='35.11' y2='8.18' stroke='black' stroke-width='2'/%3E%3Cpolygon points='28.48 16.36 27.12 14.89 34.34 8.18 27.12 1.46 28.48 0 37.28 8.18 28.48 16.36' fill='black'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}


.icon-chevron-right {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-phone {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.59 28.59'%3E%3Cpath d='M26.24,26.24c-.06.06-.13.12-.19.19-.06.05-.12.1-.18.15-1.4,1.18-3.33,1.64-5.52,1.47-.01,0-.02,0-.03,0-3.97-.32-8.8-2.76-12.92-6.87C3.29,17.06.86,12.23.54,8.26c0,0,0-.01,0-.03-.17-2.19.29-4.12,1.47-5.52.05-.06.1-.12.15-.18.06-.06.12-.13.19-.19s.13-.12.19-.19c.06-.05.12-.1.18-.15.83-.69,1.83-1.14,2.97-1.35.32-.06.65-.1,1-.13l3.98,9.15c-.14.18-.3.35-.46.52-.58.58-2.53,2.31-3.23,2.63.8,1.07,3.18,3.6,4.2,4.61s3.54,3.39,4.62,4.2c.32-.71,2.05-2.65,2.63-3.23.18-.18.37-.35.56-.5l9.1,3.95c-.02.36-.06.72-.13,1.06-.21,1.14-.66,2.14-1.35,2.97-.05.06-.1.12-.15.18-.06.06-.12.13-.19.19Z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='1.5'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-mail {
    display: inline-block;
    width: 1.37em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.35 22.52'%3E%3Crect x='.5' y='.5' width='29.35' height='21.52' fill='none' stroke='black' stroke-miterlimit='10'/%3E%3Cpolyline points='.5 .5 15.17 11.26 29.85 .5' fill='none' stroke='black' stroke-miterlimit='10'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-link {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zm4.1 1h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-document {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-external-link {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zm-5-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-clock {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpolyline points='12 6 12 12 16 14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-download {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zm-14 9v2h14v-2H5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

/*
 * CHECK LIST
 */

ul.is-style-check-list {
    list-style: none;
    padding-inline-start: 0;
}

ul.is-style-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
}

ul.is-style-check-list li:not(:last-child) {
    margin-block-end: 0.75em;
}

ul.is-style-check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    margin-block-start: 0.1em;
    background-color: var(--wp--preset--color--accent-1);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='8.4 12 10.8 14.4 15.6 9.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
}

/*
 * NUMBERED BADGES
 */

ol.is-style-numbered-badges {
    list-style: none;
    padding-inline-start: 0;
    counter-reset: ehv-counter;
}

ol.is-style-numbered-badges li {
    counter-increment: ehv-counter;
    position: relative;
    padding-inline-start: calc(1.75em + 0.75em);
    min-height: 1.75em;
}

ol.is-style-numbered-badges li:not(:last-child) {
    margin-block-end: 0.75em;
}

ol.is-style-numbered-badges li::before {
    content: counter(ehv-counter);
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--dark);
    font-size: 0.875em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * ZWEISPALTIGE LISTE
 * Group-Style statt List-Style, damit sich die Spaltenoption mit anderen
 * List-Styles (Haken-Liste, Nummerierte Badges) kombinieren lässt.
 * CSS-Multicolumn hält die Liste als eine durchgehende Liste, die auf
 * Mobile ohne Gap untereinander steht.
 */

.wp-block-group.is-style-zweispaltige-liste > .wp-block-list {
    columns: 2;
    column-gap: 2rem;
}

.wp-block-group.is-style-zweispaltige-liste > .wp-block-list li {
    break-inside: avoid;
}

@media (max-width: 767px) {
    .wp-block-group.is-style-zweispaltige-liste > .wp-block-list {
        columns: 1;
    }
}

/*
 * Contact Form 7
 */

.cf7-row {
  display: flex;
  gap: 1rem;
}

.cf7-row .cf7-col {
  display: flex;
  flex-direction: column;
}

.cf7-col--grow { flex: 1 1 auto; }
.cf7-col--small { flex: 0 0 16rem; }

.cf7-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.wpcf7 .wpcf7-acceptance label {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
}

.wpcf7-acceptance a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.wpcf7-acceptance a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf7-privacy input[type="checkbox"] {
  margin-top: 0.2em;
  flex-shrink: 0;
}

.wpcf7 {
  max-width: var(--wp--custom--single-content-size);
  margin-inline: auto;
}

.wpcf7 label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wpcf7 input:not([type="submit"]):not([type="checkbox"]),
.wpcf7 textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}

.wpcf7 input:not([type="submit"]):not([type="checkbox"]):focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
}

.wpcf7 input[type="submit"] {
  padding: 0.5rem 1.75rem;
  background-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--dark);
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.wpcf7 input[type="submit"]:hover {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--accent-1);
}

@media (max-width: 767px) {
  .cf7-row {
    flex-direction: column;
  }

  .cf7-col--small {
    flex: 1 1 auto;
  }
}