/* ==========================================================================
   custom.css — Agency Boilerplate
   Waldhirsch Marketing GmbH · 2026
   Reihenfolge: Bootstrap-Token-Bridge → Agency Properties → Section-Klassen
               → Animations → Block-Styles → Accessibility
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Bootstrap-Token-Bridge
   Farben und Typografie aus theme.json — nur dort pflegen.
   -------------------------------------------------------------------------- */

:root {
    /* Farben */
    --bs-primary:                var(--wp--preset--color--primary);
    --bs-secondary:              var(--wp--preset--color--secondary);
    --bs-dark:                   var(--wp--preset--color--dark);
    --bs-link-color:             var(--wp--preset--color--primary);
    --bs-link-hover-color:       var(--wp--preset--color--accent);

    /* Typografie */
    --bs-body-font-family:       var(--wp--preset--font-family--body);
    --bs-headings-font-family:   var(--wp--preset--font-family--body);
    --bs-body-font-size:         1rem;
    --bs-body-line-height:       1.7;

    /* Border-Radius */
    --bs-border-radius:          0.375rem;
    --bs-border-radius-lg:       0.625rem;
}


/* --------------------------------------------------------------------------
   2. Agency Custom Properties
   Projektweite Designwerte, die nicht aus theme.json kommen.
   -------------------------------------------------------------------------- */

:root {
    --agency-white:                #fff;
    --agency-accent:               #E8A24C;
    --agency-decoration-color:     currentColor;
    --agency-animation-duration:   0.5s;
    --agency-animation-easing:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Context defaults. Sections may override these per background color.
       color-mix() here means: when a section overrides --agency-text,
       --agency-muted / --agency-border / --agency-surface-hover cascade automatically. */
    --agency-text:                 var(--wp--preset--color--dark);
    --agency-muted:                color-mix(in oklch, var(--agency-text) 68%, transparent);
    --agency-surface:              var(--agency-white);
    --agency-surface-hover:        color-mix(in oklch, var(--agency-text) 3.5%, transparent);
    --agency-border:               color-mix(in oklch, var(--agency-text) 12%, transparent);
    --agency-action-bg:            var(--wp--preset--color--primary);
    --agency-action-color:         var(--agency-white);
    --agency-action-hover-bg:      var(--wp--preset--color--dark);
    --agency-action-hover-color:   var(--agency-white);
    --agency-action-secondary-color: var(--wp--preset--color--primary);
    --agency-action-secondary-border: currentColor;

    /* Named alpha-tints — live when primary/dark change in theme.json */
    --agency-primary-tint:         color-mix(in oklch, var(--wp--preset--color--primary) 8%, transparent);
    --agency-primary-tint-md:      color-mix(in oklch, var(--wp--preset--color--primary) 18%, transparent);
    --agency-dark-tint:            color-mix(in oklch, var(--wp--preset--color--dark) 8%, transparent);
    --agency-dark-tint-md:         color-mix(in oklch, var(--wp--preset--color--dark) 12%, transparent);

    --site-header-height:          4.75rem;
}

html {
    scroll-padding-top: calc(var(--site-header-height) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

.has-site-header body {
    padding-top: var(--site-header-height);
}

/* --------------------------------------------------------------------------
   3. Sektions-Klassen
   Werden von render.php dynamisch zusammengebaut (siehe ARCHITECTURE.md §6.5).
   ALLE Kombinationen müssen hier definiert sein.
   -------------------------------------------------------------------------- */

.agency-section {
    position: relative;
    overflow-x: hidden; /* horizontal clip für dekorative Elemente, kein vertikales clipping */
    max-width: none !important;
    width: 100%;
}

.agency-section__inner--full {
    width: 100%;
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

.agency-section__inner--wide {
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 4rem);
}

.agency-hero.row,
.agency-text-media.row,
.agency-features__grid.row {
    margin-right: 0;
    margin-left: 0;
}

/* Hintergründe */
.agency-section--bg-none {
    background: transparent;
    color: var(--agency-text);
}

.agency-section--bg-light {
    background: var(--wp--preset--color--secondary);
    color: var(--agency-text);
    --agency-surface: rgba(255, 255, 255, 0.72);
    --agency-surface-hover: rgba(255, 255, 255, 0.92);
}

.agency-section--bg-dark {
    background: var(--wp--preset--color--dark);
    color: var(--agency-white);
    --agency-text: var(--agency-white);
    --agency-muted: rgba(255, 255, 255, 0.78);
    --agency-surface: rgba(255, 255, 255, 0.07);
    --agency-surface-hover: rgba(255, 255, 255, 0.11);
    --agency-border: rgba(255, 255, 255, 0.22);
    --agency-action-bg: var(--agency-white);
    --agency-action-color: var(--wp--preset--color--dark);
    --agency-action-hover-bg: var(--wp--preset--color--accent);
    --agency-action-hover-color: var(--wp--preset--color--dark);
    --agency-action-secondary-color: var(--agency-white);
    --agency-action-secondary-border: rgba(255, 255, 255, 0.72);
}

.agency-section--bg-primary {
    background: var(--wp--preset--color--primary);
    color: var(--agency-white);
    --agency-text: var(--agency-white);
    --agency-muted: rgba(255, 255, 255, 0.82);
    --agency-surface: rgba(255, 255, 255, 0.09);
    --agency-surface-hover: rgba(255, 255, 255, 0.14);
    --agency-border: rgba(255, 255, 255, 0.24);
    --agency-action-bg: var(--agency-white);
    --agency-action-color: var(--wp--preset--color--primary);
    --agency-action-hover-bg: var(--wp--preset--color--accent);
    --agency-action-hover-color: var(--wp--preset--color--dark);
    --agency-action-secondary-color: var(--agency-white);
    --agency-action-secondary-border: rgba(255, 255, 255, 0.72);
}

/* Padding oben */
.agency-section--pt-none { padding-top: 0; }
.agency-section--pt-sm   { padding-top: 2rem; }
.agency-section--pt-md   { padding-top: 4rem; }
.agency-section--pt-lg   { padding-top: 6rem; }

/* Padding unten */
.agency-section--pb-none { padding-bottom: 0; }
.agency-section--pb-sm   { padding-bottom: 2rem; }
.agency-section--pb-md   { padding-bottom: 4rem; }
.agency-section--pb-lg   { padding-bottom: 6rem; }


/* --------------------------------------------------------------------------
   4. Animations-CSS
   Setzt voraus, dass animations.js .is-visible per IntersectionObserver setzt.
   -------------------------------------------------------------------------- */

/* fade-in: sanftes Einblenden von unten (Hero, allgemein) */
[data-animate="fade-in"] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity   var(--agency-animation-duration) var(--agency-animation-easing),
        transform var(--agency-animation-duration) var(--agency-animation-easing);
}
[data-animate="fade-in"].is-visible {
    opacity: 1;
    transform: none;
}

/* slide-up: stärkere Vertikalbewegung (CTA) */
[data-animate="slide-up"] {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate="slide-up"].is-visible {
    opacity: 1;
    transform: none;
}

/* stagger: versetztes Einblenden von Kindelementen (Features, Grid) */
[data-animate="stagger"] > * {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
[data-animate="stagger"].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s;    }
[data-animate="stagger"].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
[data-animate="stagger"].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
[data-animate="stagger"].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
[data-animate="stagger"].is-visible > *:nth-child(n+5) { opacity: 1; transform: none; transition-delay: 0.4s; }

/* PFLICHT: Reduzierte Bewegung — alle Transitions deaktivieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:   0.001ms !important;
        transition-duration:  0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    [data-animate],
    [data-animate] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   5. Block-spezifische Basis-Styles
   Minimal — Bootstrap übernimmt Grid, Spacing, Typografie.
   -------------------------------------------------------------------------- */

/* Site Chrome */
.skip-link,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus,
.screen-reader-text:focus {
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    clip: auto;
    color: var(--agency-white);
    background: var(--wp--preset--color--primary);
    border-radius: var(--bs-border-radius);
    text-decoration: none;
}

.site-header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0);
    right: 0;
    left: 0;
    z-index: 1020;
    width: 100%;
    max-width: none !important;
    color: var(--wp--preset--color--dark);
    background: color-mix(in oklch, var(--agency-white) 90%, transparent);
    border-bottom: 1px solid var(--agency-dark-tint);
    box-shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--wp--preset--color--dark) 4%, transparent);
    backdrop-filter: blur(16px);
    transform: translateY(0);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.24s ease;
    will-change: transform;
}

.site-header--scrolled {
    background: color-mix(in oklch, var(--agency-white) 96%, transparent);
    border-bottom-color: var(--agency-dark-tint-md);
    box-shadow: 0 0.75rem 2rem var(--agency-dark-tint);
}

.site-header--hidden {
    transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
}

.site-header__inner {
    width: min(100% - 2rem, var(--wp--style--global--wide-size, 90rem));
    min-height: 4.75rem;
    margin-inline: auto;
    gap: 1.5rem;
}

.site-header__brand {
    min-width: 0;
    gap: 0.75rem;
}

.site-header__logo {
    flex: 0 0 auto;
}

.site-header__logo img,
.site-footer__logo img {
    display: block;
    border-radius: 0.375rem;
}

.site-header__identity {
    min-width: 0;
}

.site-header__title,
.site-footer__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.site-header__title a,
.site-footer__title a {
    color: inherit;
    text-decoration: none;
}

.site-header__title a:hover,
.site-header__title a:focus-visible,
.site-footer__title a:hover,
.site-footer__title a:focus-visible {
    color: var(--wp--preset--color--primary);
}

.site-header__tagline {
    margin: 0.125rem 0 0;
    color: color-mix(in oklch, var(--wp--preset--color--dark) 62%, transparent);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.site-header__navigation {
    flex: 0 1 auto;
    color: inherit;
}

.site-header__navigation .wp-block-navigation__container {
    gap: 0.25rem 0.375rem;
}

.site-header__navigation .wp-block-navigation-item__content {
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius);
    color: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.site-header__navigation .wp-block-navigation-item__content:hover,
.site-header__navigation .wp-block-navigation-item__content:focus-visible,
.site-header__navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header__navigation .current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary);
    background: var(--agency-primary-tint);
}

.site-header__navigation .wp-block-navigation-submenu {
    position: relative;
    border-radius: var(--bs-border-radius);
}

.site-header__navigation .wp-block-navigation-submenu__toggle {
    min-height: 2.5rem;
    min-width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.625rem 0.5rem 0.25rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    color: inherit;
    background: transparent;
    font-weight: 600;
    line-height: 1.2;
}

.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu {
    display: inline-flex;
    align-items: center;
}

.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    padding-right: 0.25rem;
}

.site-header__navigation .wp-block-navigation-submenu__toggle:hover,
.site-header__navigation .wp-block-navigation-submenu__toggle:focus-visible,
.site-header__navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    color: var(--wp--preset--color--primary);
}

.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover,
.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu:focus-within,
.site-header__navigation .wp-block-navigation__container > .current-menu-ancestor {
    background: var(--agency-primary-tint);
}

.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content,
.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation-item__content,
.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle,
.site-header__navigation .wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation-submenu__toggle,
.site-header__navigation .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.site-header__navigation .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-submenu__toggle {
    color: var(--wp--preset--color--primary);
    background: transparent;
}

/* Desktop-only: icon-size für den chevron-button.
   Auf Mobile überschreibt die mobile .wp-block-navigation-submenu__toggle-Regel (höhere Spezifität). */
@media (min-width: 992px) {
    .site-header__navigation .wp-block-navigation__submenu-icon {
        width: 0.625rem;
        height: 0.625rem;
        margin-left: 0;
        transition: transform 0.2s ease;
    }
}

/* SVG im Button rotieren (WordPress 6.x: button IST das icon-element, SVG ist das Kind) */
.site-header__navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.site-header__navigation .wp-block-navigation__submenu-container {
    min-width: 14rem;
    color: var(--wp--preset--color--dark);
    background: var(--agency-white);
    border: 1px solid color-mix(in oklch, var(--wp--preset--color--dark) 10%, transparent);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2.5rem var(--agency-dark-tint-md);
    padding: 0.5rem;
    align-self: start;
}

.site-header__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: var(--bs-border-radius);
    color: inherit;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.site-header__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary);
    background: var(--agency-primary-tint);
}

.site-header__navigation .wp-block-navigation__responsive-container-open {
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--agency-dark-tint-md);
    border-radius: 50%;
    color: var(--wp--preset--color--dark);
    background: var(--agency-white);
}

.site-header__navigation .wp-block-navigation__responsive-container-open:hover,
.site-header__navigation .wp-block-navigation__responsive-container-open:focus-visible {
    color: var(--agency-white);
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    z-index: 100000;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    color: var(--wp--preset--color--dark);
    background: var(--agency-white);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: min(100% - 2rem, 42rem);
    margin-inline: auto;
    padding: calc(var(--site-header-height) + 1.5rem) 0 2.5rem;
    align-items: stretch;
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    align-items: stretch;
    gap: 0.125rem;
}

/* Alle Nav-Links (top-level und sub-items) */
.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%;
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    font-size: 1.125rem;
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary);
    background: var(--agency-primary-tint);
}

/* Chevron-Button in der Overlay komplett ausblenden.
   Submenüs sind in Mobile immer sichtbar — kein Toggle nötig. */
.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: none !important;
}

/* Submenu-Liste: immer sichtbar, Position aus dem Dokument-Fluss (nicht absolute wie Desktop). */
.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0.375rem 0.375rem 0.375rem 1rem;
    color: inherit;
    background: var(--agency-primary-tint);
    border: 0;
    border-left: 3px solid var(--agency-primary-tint-md);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

/* Sub-Items: etwas kleiner, leicht gedimmt */
.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    color: color-mix(in oklch, var(--wp--preset--color--dark) 78%, transparent);
    font-size: 0.9375rem;
    border-radius: var(--bs-border-radius);
    white-space: normal;
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary);
    background: color-mix(in oklch, var(--wp--preset--color--primary) 14%, transparent);
}

.site-header__navigation .wp-block-navigation__responsive-container-close {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--agency-dark-tint-md);
    border-radius: 50%;
    color: var(--wp--preset--color--dark);
    background: var(--agency-white);
}

.site-header__navigation .wp-block-navigation__responsive-container-close:hover,
.site-header__navigation .wp-block-navigation__responsive-container-close:focus-visible {
    color: var(--agency-white);
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.has-mobile-navigation-open,
.has-mobile-navigation-open body {
    overflow: hidden;
}

.site-footer {
    width: 100%;
    max-width: none !important;
    color: var(--agency-white);
    background: var(--wp--preset--color--dark);
    border-top: 0.25rem solid var(--wp--preset--color--accent);
}

.site-footer__inner {
    width: min(100% - 2rem, var(--wp--style--global--wide-size, 90rem));
    margin-inline: auto;
    padding-block: clamp(3rem, 6vw, 5rem) 1.5rem;
}

.site-footer__top {
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__brand {
    max-width: 28rem;
}

.site-footer__logo {
    margin-bottom: 1rem;
}

.site-footer__title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.site-footer__tagline {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}

.site-footer__navigation,
.site-footer__meta-navigation {
    color: inherit;
}

.site-footer__navigation .wp-block-navigation__container,
.site-footer__meta-navigation .wp-block-navigation__container {
    gap: 0.5rem 1rem;
}

.site-footer__navigation .wp-block-navigation-item__content,
.site-footer__meta-navigation .wp-block-navigation-item__content {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.site-footer__navigation .wp-block-navigation-item__content {
    font-weight: 600;
}

.site-footer__meta-navigation .wp-block-navigation-item__content,
.site-footer__copyright {
    font-size: 0.9375rem;
}

.site-footer__navigation .wp-block-navigation-item__content:hover,
.site-footer__navigation .wp-block-navigation-item__content:focus-visible,
.site-footer__meta-navigation .wp-block-navigation-item__content:hover,
.site-footer__meta-navigation .wp-block-navigation-item__content:focus-visible {
    color: var(--agency-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__bottom {
    gap: 1rem;
    padding-top: 1.25rem;
    color: rgba(255, 255, 255, 0.68);
}

.site-footer__copyright {
    margin: 0;
}

@media (max-width: 767px) {
    .site-header__inner {
        min-height: 4.25rem;
        width: min(100% - 1.25rem, var(--wp--style--global--wide-size, 90rem));
        gap: 0.75rem;
    }

    .site-header__logo img {
        max-width: 2.5rem;
        height: auto;
    }

    .site-header__tagline {
        display: none;
    }

    .site-header__title {
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-footer__top,
    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__navigation .wp-block-navigation__container,
    .site-footer__meta-navigation .wp-block-navigation__container {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .site-header__navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }

    .site-header__navigation .wp-block-navigation__responsive-container-open {
        display: inline-flex;
    }
}

@media (min-width: 992px) {
    .site-header__navigation .wp-block-navigation__responsive-container {
        display: block !important;
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        background: transparent;
    }

    .site-header__navigation .wp-block-navigation__responsive-container-open,
    .site-header__navigation .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    .site-header__navigation .wp-block-navigation__submenu-container {
        margin-top: 0.5rem;
    }

    .site-header__navigation .wp-block-navigation__submenu-container::before {
        content: "";
        position: absolute;
        top: -0.5rem;
        right: 0;
        left: 0;
        height: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
        will-change: auto;
    }

    .site-header--hidden {
        transform: none;
    }
}

.agency-section h1,
.agency-section h2,
.agency-section h3,
.agency-section h4,
.agency-section h5,
.agency-section h6 {
    color: inherit;
}

.agency-btn.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--bs-border-radius);
    border-width: 1px;
    text-decoration: none;
}

.agency-btn--primary.btn {
    --bs-btn-color: var(--agency-action-color);
    --bs-btn-bg: var(--agency-action-bg);
    --bs-btn-border-color: var(--agency-action-bg);
    --bs-btn-hover-color: var(--agency-action-hover-color);
    --bs-btn-hover-bg: var(--agency-action-hover-bg);
    --bs-btn-hover-border-color: var(--agency-action-hover-bg);
    --bs-btn-active-color: var(--agency-action-hover-color);
    --bs-btn-active-bg: var(--agency-action-hover-bg);
    --bs-btn-active-border-color: var(--agency-action-hover-bg);
}

.agency-btn--secondary.btn {
    --bs-btn-color: var(--agency-action-secondary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--agency-action-secondary-border);
    --bs-btn-hover-color: var(--agency-action-color);
    --bs-btn-hover-bg: var(--agency-action-bg);
    --bs-btn-hover-border-color: var(--agency-action-bg);
    --bs-btn-active-color: var(--agency-action-color);
    --bs-btn-active-bg: var(--agency-action-bg);
    --bs-btn-active-border-color: var(--agency-action-bg);
}

.agency-block-placeholder {
    padding: 1rem;
    color: var(--agency-muted);
    background: var(--agency-surface);
    border: 1px dashed var(--agency-border);
    border-radius: var(--bs-border-radius);
    font-size: 0.9375rem;
}

.wp-block-paragraph.is-style-eyebrow,
p.is-style-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--agency-action-bg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wp-block-paragraph.is-style-eyebrow::before,
p.is-style-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
}

.wp-block-paragraph.is-style-large-quote,
p.is-style-large-quote {
    position: relative;
    max-width: 52rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-left: clamp(1rem, 2vw, 1.5rem);
    color: var(--agency-text);
    border-left: 3px solid var(--agency-action-bg);
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.18;
}

.wp-block-paragraph.is-style-large-quote:last-child,
p.is-style-large-quote:last-child {
    margin-bottom: 0;
}

.wp-block-list.is-style-bullet-list {
    list-style: disc;
}

.wp-block-list.is-style-checklist {
    padding-left: 0;
    list-style: none;
}

.wp-block-list.is-style-checklist > li {
    position: relative;
    padding-left: 1.75rem;
}

.wp-block-list.is-style-checklist > li + li {
    margin-top: 0.5rem;
}

.wp-block-list.is-style-checklist > li::before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--agency-action-bg);
}

.wp-block-list.is-style-checklist > li::after {
    content: "";
    position: absolute;
    top: 0.58em;
    left: 0.28rem;
    width: 0.45rem;
    height: 0.25rem;
    border-bottom: 2px solid var(--agency-action-color);
    border-left: 2px solid var(--agency-action-color);
    transform: rotate(-45deg);
}

/* Agency Grid — Frontend: agency-grid ist direkt das Grid */
.agency-grid {
    display: grid;
    grid-template-columns: repeat(var(--agency-cols-lg, 3), 1fr);
    gap: var(--agency-gap, 1.5rem);
}

/* Editor: acf-innerblocks-container ist das einzige Kind von agency-grid.
   grid-column: 1/-1 → volle Breite (spannt alle Spalten).
   Dann selbst ein Grid für die echten Kindelemente. */
.agency-grid > .acf-innerblocks-container {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--agency-cols-lg, 3), 1fr);
    gap: var(--agency-gap, 1.5rem);
}

@media (max-width: 991px) {
    .agency-grid,
    .agency-grid > .acf-innerblocks-container {
        grid-template-columns: repeat(var(--agency-cols-md, 2), 1fr);
    }
}

@media (max-width: 767px) {
    .agency-grid,
    .agency-grid > .acf-innerblocks-container {
        grid-template-columns: 1fr;
    }
}

/* Agency Stack
   Vertikaler Flex-Stack. Gilt für Frontend und Editor-Wrapper. */
.agency-stack,
.agency-stack > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    gap: var(--agency-gap, 1.5rem);
}

/* Hero */
.agency-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.agency-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
}

.agency-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--agency-muted);
}

.agency-hero__image,
.agency-text-media__image {
    border-radius: var(--bs-border-radius-lg);
}

/* Features */
.agency-features__grid.row {
    display: flex;
}

.agency-features__item {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    color: inherit;
    background: var(--agency-surface);
    border: 1px solid var(--agency-border);
    border-radius: 0.5rem;
}

.agency-features__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--agency-action-color);
    background: var(--agency-action-bg);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.agency-features__icon--check::before { content: "✓"; }
.agency-features__icon--arrow::before { content: "→"; }
.agency-features__icon--star::before { content: "★"; }
.agency-features__icon--shield::before { content: "◆"; }
.agency-features__icon--leaf::before { content: "•"; }
.agency-features__icon--chart::before { content: "↗"; }
.agency-features__icon--users::before { content: "●"; }

.agency-features__subline,
.agency-features__item-text,
.agency-text-media__text,
.agency-cta__subline {
    color: var(--agency-muted);
}

.agency-features__item-headline {
    font-size: 1.125rem;
    margin-bottom: 0;
}

/* Card */
.agency-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: inherit;
    background: var(--agency-surface);
    border: 1px solid var(--agency-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.agency-card--link {
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.agency-card--link:hover,
.agency-card--link:focus-visible {
    color: inherit;
    background: var(--agency-surface-hover);
    border-color: currentColor;
    transform: translateY(-2px);
}

.agency-card__media {
    aspect-ratio: 16 / 9;
    background: var(--agency-surface-hover);
    overflow: hidden;
}

.agency-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.agency-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.agency-card__headline {
    margin-bottom: 0;
    font-size: 1.125rem;
}

.agency-card__text {
    color: var(--agency-muted);
}

.agency-card__text > :last-child {
    margin-bottom: 0;
}

.agency-card__link {
    margin-top: auto;
    color: var(--agency-action-secondary-color);
    font-weight: 600;
    text-decoration: none;
}

.agency-card__link:hover,
.agency-card__link:focus-visible {
    color: var(--agency-action-secondary-color);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Video */
.agency-video {
    margin: 0;
}

.agency-video__frame {
    background: var(--agency-surface);
    border: 1px solid var(--agency-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.agency-video__frame iframe,
.agency-video__media {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.agency-video__caption {
    margin-top: 0.625rem;
    color: var(--agency-muted);
    font-size: 0.9375rem;
}

.agency-video__transcript {
    margin-top: 0.75rem;
    color: inherit;
}

.agency-video__transcript summary {
    cursor: pointer;
    color: var(--agency-action-secondary-color);
    font-weight: 600;
}

.agency-video__transcript summary:hover,
.agency-video__transcript summary:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.agency-video__transcript-content {
    margin-top: 0.75rem;
    color: var(--agency-muted);
}

/* FAQ */
.agency-faq__accordion.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: inherit;
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: inherit;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: inherit;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    display: grid;
    gap: 0.75rem;
}

.agency-faq__item.accordion-item {
    color: inherit;
    background: var(--agency-surface);
    border: 1px solid var(--agency-border);
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.agency-faq__accordion .accordion-button {
    min-height: 3.75rem;
    color: inherit;
    background: transparent;
    border-radius: 0 !important;
    box-shadow: none;
    padding: 1rem 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    gap: 1rem;
}

.agency-faq__accordion .accordion-button:hover,
.agency-faq__accordion .accordion-button:focus-visible {
    background: var(--agency-surface-hover);
}

.agency-faq__accordion .accordion-button::after {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem 2px, 2px 1rem;
    opacity: 0.72;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.agency-faq__accordion .accordion-button:not(.collapsed)::after {
    background-size: 1rem 2px, 0 0;
    transform: rotate(180deg);
}

.agency-faq__accordion .accordion-button:hover::after,
.agency-faq__accordion .accordion-button:focus-visible::after {
    opacity: 1;
}

.agency-faq__accordion .accordion-body {
    color: var(--agency-muted);
    padding: 0 1.125rem 1.125rem;
    line-height: 1.7;
}

.agency-faq__answer > :last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   6. Focus-Styles — Barrierefreiheit (WCAG 2.2 AA)
   -------------------------------------------------------------------------- */

:focus-visible {
    outline:        2px solid var(--wp--preset--color--primary);
    outline-offset: 3px;
    border-radius:  2px;
}

/* Dunkle Hintergründe: weißen Fokus-Ring verwenden */
.agency-section--bg-dark  :focus-visible,
.agency-section--bg-primary :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--agency-white);
}