/* ==========================================================
   BBH accessibility layer
   Target: EN 301 549 / WCAG 2.1 A + AA oriented implementation
   Loaded last so accessibility corrections can override legacy theme CSS.
   ========================================================== */

:root {
    /* Darker functional blue for AA text contrast on white. */
    --bbh-blue: #006f92;
    --bbh-nav-blue: #087da7;
    --bbh-nav-blue-dark: #006f92;
    --bbh-a11y-focus: #005fcc;
    --bbh-a11y-link: #006f92;
    --bbh-a11y-link-hover: #00536d;
}

/* The legacy BBH design defines its palette again inside these shells.
   Override only the functional blue there; decorative cyan remains unchanged. */
.bbh48z,
.bbhkfz,
.bbhveh,
.bbhprod {
    --bbh-blue: #006f92;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-wrap: break-word;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Programmatic route focus should not draw a frame around the whole page. */
#main:focus {
    outline: none;
}

/* Strong, consistent keyboard focus, independent of color alone. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--bbh-a11y-focus) !important;
    outline-offset: 3px !important;
    box-shadow: none;
}

/* Skip link: highly visible as soon as it receives keyboard focus. */
.skip-link.screen-reader-text:focus {
    position: fixed !important;
    z-index: 10000;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    clip: auto !important;
    clip-path: none;
    overflow: visible;
    border: 2px solid #0b1a22;
    border-radius: 8px;
    background: #ffffff;
    color: #0b1a22;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

/* Functional link colors with AA contrast on white. */
a {
    color: var(--bbh-a11y-link);
}

a:hover {
    color: var(--bbh-a11y-link-hover);
}

/* Inline text links remain identifiable without relying only on color. */
.entry-content p a,
.entry-content li a,
.entry-content address a,
.bbh-legal-shell a,
.bbh-privacy-shell a,
.bbh-accessibility-shell a,
.bbh-sitemap-shell a {
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.16em;
}

/* Do not underline card-wide/overlay controls or button-style links. */
.entry-content a[class*="overlay"],
.entry-content a[class*="apply"],
.entry-content .wp-block-button__link {
    text-decoration: none;
}

/* ---------- Mobile navigation: semantic button state ---------- */
.bbh-modern-navigation .bbh-menu-toggle {
    font: inherit;
}

@media only screen and (max-width: 899px) {
    .bbh-modern-navigation .bbh-menu-toggle {
        display: inline-flex;
    }

    .bbh-modern-navigation.is-open > .menu-hauptmenue-container,
    #menu-hauptmenue-container.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .bbh-menu-toggle[aria-expanded="true"] {
        color: var(--bbh-nav-blue-dark);
        background: rgba(0, 111, 146, 0.10);
        border-color: rgba(0, 111, 146, 0.28);
    }

    .bbh-menu-toggle[aria-expanded="true"] .bbh-menu-toggle-bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .bbh-menu-toggle[aria-expanded="true"] .bbh-menu-toggle-bars span:nth-child(2) {
        opacity: 0;
    }

    .bbh-menu-toggle[aria-expanded="true"] .bbh-menu-toggle-bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

/* Product submenu can be dismissed with Escape even while the Products link retains focus. */
.bbh-products-menu.bbh-submenu-dismissed > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------- Contrast corrections ---------- */
.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a {
    background: var(--bbh-nav-blue) !important;
    color: #ffffff !important;
}

.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a:hover,
.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a:focus-visible,
.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a.active {
    background: var(--bbh-nav-blue-dark) !important;
    color: #ffffff !important;
}

.bbh-language-dropdown a.active .bbh-language-code {
    background: var(--bbh-nav-blue-dark) !important;
    color: #ffffff !important;
}

.bbh-legal-label,
.bbh-privacy-shell a,
.bbh-legal-shell a {
    color: var(--bbh-a11y-link) !important;
}

/* Cyan badges use dark text so small labels also meet contrast requirements. */
.bbh48z-voltage,
.bbhkfz-bus-badge,
.bbhveh-badge,
.bbhveh-process-number,
.bbhkfz-practice-number,
.bbhprod-quick-number,
.bbhprod-info-number {
    color: #06212b !important;
    -webkit-text-fill-color: #06212b !important;
}

/* Focus for transparent whole-card links must be visible. */
.bbh48z-contact-overlay:focus-visible,
.bbhkfz-contact-overlay:focus-visible,
.bbhveh-contact-overlay:focus-visible,
.bbhprod-contact-overlay:focus-visible {
    outline: 4px solid var(--bbh-a11y-focus) !important;
    outline-offset: -4px !important;
    border-radius: 10px;
}


.bbh-404-home {
    background: #006f92 !important;
    color: #ffffff !important;
}

.bbh-404-home:hover,
.bbh-404-home:focus-visible {
    background: #00536d !important;
}

/* Minimum practical target height for primary controls. */
.bbh-modern-navigation > div > ul.main-menu > li > a,
.bbh-language-details > summary,
.bbh-language-dropdown a,
.footer-navigation .footer-menu a,
.bbh-menu-toggle {
    min-height: 44px;
}

/* Text-spacing resilience (WCAG 1.4.12): do not clip growing text. */
:where(p, li, h1, h2, h3, h4, h5, h6, a, button, summary) {
    text-overflow: clip;
}

/* ---------- Accessibility information page ---------- */
.bbh-accessibility-page > .entry-header,
.bbh-sitemap-page > .entry-header {
    width: calc(100% - 48px) !important;
    max-width: 1200px !important;
    margin: 44px auto 18px !important;
    padding: 0 !important;
}

.bbh-accessibility-page > .entry-header::before,
.bbh-sitemap-page > .entry-header::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin: 0 0 13px;
    border-radius: 999px;
    background: #26bdd8;
}

.bbh-accessibility-page > .entry-header .entry-title,
.bbh-sitemap-page > .entry-header .entry-title {
    margin: 0 !important;
    color: #0b1a22;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em;
    text-transform: none !important;
}

.bbh-accessibility-page .entry-content,
.bbh-sitemap-page .entry-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bbh-accessibility-shell,
.bbh-sitemap-shell {
    width: calc(100% - 48px);
    max-width: 1200px;
    margin: 0 auto 80px;
    color: #24343d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.bbh-accessibility-intro,
.bbh-accessibility-card,
.bbh-sitemap-card {
    margin: 0 0 18px;
    padding: clamp(25px, 4vw, 40px);
    border: 1px solid #d9e4e8;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 9px 28px rgba(17, 43, 55, 0.05);
}

.bbh-accessibility-intro {
    background: linear-gradient(135deg, #f2f7f8 0%, #eaf3f5 100%);
}

.bbh-accessibility-kicker {
    display: block;
    margin-bottom: 10px;
    color: #006f92;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bbh-accessibility-shell h2,
.bbh-sitemap-shell h2 {
    margin: 0 0 16px !important;
    color: #0b1a22 !important;
    font-family: inherit !important;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

.bbh-accessibility-shell p,
.bbh-accessibility-shell li,
.bbh-accessibility-contact,
.bbh-sitemap-shell p,
.bbh-sitemap-shell li {
    color: #536872;
    font-size: 1rem;
    line-height: 1.72;
}

.bbh-accessibility-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.35rem;
}

.bbh-accessibility-contact {
    margin: 0;
    font-style: normal;
}

.bbh-accessibility-updated {
    margin: 24px 0 0 !important;
    color: #5d7079 !important;
    font-size: 0.9rem !important;
}

.bbh-sitemap-lead {
    margin: 0 0 24px;
}

.bbh-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bbh-sitemap-card {
    margin: 0;
}

.bbh-sitemap-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.25rem;
}

/* ---------- Reflow ---------- */
@media only screen and (max-width: 900px) {
    .bbh-accessibility-page > .entry-header,
    .bbh-sitemap-page > .entry-header,
    .bbh-accessibility-shell,
    .bbh-sitemap-shell {
        width: calc(100% - 32px) !important;
    }

    .bbh-sitemap-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 560px) {
    .bbh-accessibility-page > .entry-header,
    .bbh-sitemap-page > .entry-header {
        margin-top: 30px !important;
    }

    .bbh-accessibility-intro,
    .bbh-accessibility-card,
    .bbh-sitemap-card {
        padding: 24px 20px;
        border-radius: 16px;
    }
}

@media only screen and (max-width: 400px) {
    .site-header.bbh-modern-header,
    .bbh-accessibility-page > .entry-header,
    .bbh-sitemap-page > .entry-header,
    .bbh-accessibility-shell,
    .bbh-sitemap-shell {
        width: calc(100% - 20px) !important;
    }

    .bbh-language-dropdown {
        grid-template-columns: 1fr !important;
    }
}

/* Respect user preferences for motion and higher contrast. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --bbh-a11y-link: #00536d;
        --bbh-nav-blue: #005f83;
        --bbh-nav-blue-dark: #004b68;
    }

    .bbh-accessibility-card,
    .bbh-accessibility-intro,
    .bbh-sitemap-card,
    .bbh-modern-navigation > .menu-hauptmenue-container {
        border-color: #536872 !important;
    }
}

@media (forced-colors: active) {
    .bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a,
    .bbh-language-dropdown a.active .bbh-language-code,
    .bbh48z-voltage,
    .bbhkfz-bus-badge,
    .bbhveh-badge,
    .bbhveh-process-number,
    .bbhkfz-practice-number,
    .bbhprod-quick-number,
    .bbhprod-info-number {
        forced-color-adjust: auto;
    }
}

/* ==========================================================
   Sitemap polish
   Keeps the accessibility semantics while visually matching the
   current BBH page language more closely.
   ========================================================== */
.bbh-sitemap-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    margin: 0 0 22px;
    padding: clamp(30px, 5vw, 54px);
    overflow: hidden;
    border: 1px solid #d8e5e9;
    border-radius: 24px;
    background: linear-gradient(135deg, #f1f7f8 0%, #eaf4f6 58%, #f8fbfc 100%);
    box-shadow: 0 12px 34px rgba(17, 43, 55, 0.06);
}

.bbh-sitemap-intro::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -108px;
    width: 260px;
    height: 260px;
    border: 52px solid rgba(38, 189, 216, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.bbh-sitemap-intro-copy {
    position: relative;
    z-index: 1;
    max-width: 790px;
}

.bbh-sitemap-kicker,
.bbh-sitemap-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 9px;
    color: #006f92;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.095em;
    line-height: 1.25;
    text-transform: uppercase;
}

.bbh-sitemap-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: #26bdd8;
}

.bbh-sitemap-intro h2 {
    margin: 0 0 13px !important;
    color: #0b1a22 !important;
    font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.018em;
}

.bbh-sitemap-intro p {
    max-width: 760px;
    margin: 0 !important;
    color: #536872 !important;
    font-size: 1.04rem !important;
    line-height: 1.7 !important;
}

.bbh-sitemap-intro-mark {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 11px;
    width: 122px;
    padding: 24px 22px;
    border: 1px solid rgba(0, 111, 146, 0.13);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.bbh-sitemap-intro-mark span {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #26bdd8;
}

.bbh-sitemap-intro-mark span:nth-child(2) {
    width: 74%;
    background: #77cddd;
}

.bbh-sitemap-intro-mark span:nth-child(3) {
    width: 52%;
    background: #b3dce4;
}

.bbh-sitemap-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 20px;
}

.bbh-sitemap-card {
    position: relative;
    padding: clamp(25px, 3.5vw, 36px);
    overflow: hidden;
    border-color: #d9e4e8;
    box-shadow: 0 9px 28px rgba(17, 43, 55, 0.05);
}

.bbh-sitemap-card--products {
    grid-row: span 2;
}

.bbh-sitemap-card-head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 13px;
}

.bbh-sitemap-card-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 1px solid rgba(0, 111, 146, 0.13);
    border-radius: 15px;
    color: #006f92;
    background: #eef7f9;
}

.bbh-sitemap-card-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bbh-sitemap-card-kicker {
    margin-bottom: 3px;
    font-size: 0.68rem;
}

.bbh-sitemap-card-head h2 {
    margin: 0 !important;
    font-size: clamp(1.3rem, 2vw, 1.65rem) !important;
}

.bbh-sitemap-card-description {
    margin: 0 0 20px !important;
    color: #617680 !important;
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
}

.bbh-sitemap-links,
.bbh-sitemap-product-links {
    display: grid;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bbh-sitemap-product-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bbh-sitemap-links li,
.bbh-sitemap-product-links li {
    margin: 0 !important;
    padding: 0 !important;
}

.bbh-sitemap-links a,
.bbh-sitemap-product-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #e2ebee;
    border-radius: 12px;
    color: #263b45 !important;
    background: #f9fbfc;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.bbh-sitemap-product-links a {
    min-height: 58px;
}

.bbh-sitemap-links a > span:last-child,
.bbh-sitemap-product-links a > span:last-child {
    flex: 0 0 auto;
    color: #008db8;
    font-size: 1.08rem;
}

.bbh-sitemap-links a:hover,
.bbh-sitemap-product-links a:hover,
.bbh-sitemap-links a:focus-visible,
.bbh-sitemap-product-links a:focus-visible {
    transform: translateY(-1px);
    border-color: #b9dce5;
    color: #006f92 !important;
    background: #f1f8fa;
}

.bbh-sitemap-feature-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 14px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 111, 146, 0.18);
    border-radius: 15px;
    color: #0b1a22 !important;
    background: linear-gradient(135deg, #eaf6f8 0%, #f5fafb 100%);
    text-decoration: none !important;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.bbh-sitemap-feature-link strong,
.bbh-sitemap-feature-link small {
    display: block;
}

.bbh-sitemap-feature-link strong {
    margin-bottom: 3px;
    font-size: 1.03rem;
}

.bbh-sitemap-feature-link small {
    color: #607781;
    font-size: 0.86rem;
    font-weight: 500;
}

.bbh-sitemap-feature-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    color: #ffffff;
    background: #006f92;
    font-size: 1.1rem;
}

.bbh-sitemap-feature-link:hover,
.bbh-sitemap-feature-link:focus-visible {
    transform: translateY(-1px);
    border-color: #8fc9d7;
    box-shadow: 0 8px 22px rgba(0, 111, 146, 0.08);
}

/* Suppress any startup-only Blazor/WebAssembly progress UI. The BBH Web App
   is server-rendered, so a transient progress bar adds no useful information. */
body > progress,
#loadingIndicator,
.loading-progress,
.loading-progress-text,
blazor-loading-indicator,
[class*="blazor-loading-progress"] {
    display: none !important;
    visibility: hidden !important;
}

@media only screen and (max-width: 900px) {
    .bbh-sitemap-grid {
        grid-template-columns: 1fr;
    }

    .bbh-sitemap-card--products {
        grid-row: auto;
    }
}

@media only screen and (max-width: 650px) {
    .bbh-sitemap-intro {
        grid-template-columns: 1fr;
    }

    .bbh-sitemap-intro-mark {
        display: none;
    }

    .bbh-sitemap-product-links {
        grid-template-columns: 1fr;
    }
}

/* The sitemap header previously inherited a small cyan decorative line from
   the accessibility-page heading style. It looked like a transient loading
   bar at the top of the page, so the sitemap intentionally omits it. */
.bbh-sitemap-page > .entry-header::before {
    content: none !important;
    display: none !important;
}


/* 2026-09: Sitemap without decorative cyan rules. */
.bbh-sitemap-page > .entry-header::before,
.bbh-sitemap-kicker::before {
    content: none !important;
    display: none !important;
}

.bbh-sitemap-kicker {
    gap: 0 !important;
}