/* Header and footer chrome. Blocksy keeps these colours as per-item builder values, so a CSS layer
   is the verifiable route (see skills/blocksy-website/layout/header). */

#header [data-row*="middle"],
#header [data-row*="middle"] > div {
    background: var(--ms-navy);
    --height: 72px;
}
/* The rule under the header spans the full width (#2c3550 as in the approved layout). */
#header [data-row*="middle"] {
    border-bottom: 1px solid #2c3550;
}
#header [data-row*="middle"] > div {
    border-bottom: 0;
}
.ct-header [data-id="logo"] .site-logo-container img,
.ct-header [data-id="logo"] img {
    max-height: 44px;
    width: auto;
}
/* Navigation as in the approved layout (Variante B): body face, semibold, white, underline on hover. */
.ct-header .menu > li > a,
.ct-header [data-id="menu"] > ul > li > a {
    color: #ffffff;
    font-family: var(--ms-font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}
.ct-header .menu > li > a:hover,
.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-menu-ancestor > a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.ct-header .sub-menu {
    background: var(--ms-navy-deep);
}
.ct-header .sub-menu a {
    color: #c9cfdb;
}
.ct-header .sub-menu a:hover {
    color: #ffffff;
}
.ct-header [data-id="button"] .ct-button,
#offcanvas [data-id="button"] .ct-button {
    background: #ffffff;
    color: var(--ms-navy);
    min-height: 44px;
    padding-inline: 1.1rem;
    border-radius: 0;
    font-family: var(--ms-font-display);
    font-weight: 500;
    /* 16px with moderate tracking (A11Y-18 asked for at least 15px), as in the approved layout. */
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ct-header [data-id="button"] .ct-button:hover,
#offcanvas [data-id="button"] .ct-button:hover {
    background: #e4e8f0;
    color: var(--ms-navy);
}
.ct-header [data-id="trigger"] {
    color: #ffffff;
    min-width: 44px;
    min-height: 44px;
}
/* The trigger SVG did not inherit the white colour (1.08:1 on navy, MKT-3). */
.ct-header [data-id="trigger"] svg,
.ct-header .ct-header-trigger svg {
    fill: currentColor;
    color: #ffffff;
}
#offcanvas .ct-panel-inner {
    background: var(--ms-navy);
}
#offcanvas .mobile-menu a {
    color: #ffffff;
    min-height: 48px;
}

/* Footer: plugin block above Blocksy's copyright row, laid out as in the approved layout. */
.ms-site-footer {
    background: var(--ms-navy-deep);
    color: var(--ms-on-navy);
    font-family: var(--ms-font-body);
    font-size: 1rem;
    line-height: 1.6;
    padding: 3rem 0 0;
}
.ms-site-footer__inner {
    box-sizing: border-box;
    max-width: calc(1152px + 2 * clamp(20px, 4vw, 40px));
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 40px);
    display: grid;
    gap: 2rem;
}
.ms-site-footer p,
.ms-site-footer ul {
    margin: 0;
}
.ms-site-footer ul {
    padding: 0;
    list-style: none;
}
.ms-site-footer li + li {
    margin-top: 0.35rem;
}
.ms-footer-title {
    margin-bottom: 0.6rem !important;
    color: #ffffff;
    font-family: var(--ms-font-display);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ms-site-footer a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ms-site-footer a:hover,
.ms-site-footer a:focus-visible {
    color: #ffffff;
    text-decoration-thickness: 2px;
}
.ms-footer-pages a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
/* Link "Hinweise für Notfälle" in the contact column (concept part 2, footer). */
.ms-site-footer .ms-footer-emergency {
    margin-top: 0.5rem;
}
.ms-footer-emergency a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
.ms-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid #2c3550;
    padding-top: 0.75rem;
    font-size: 0.9375rem;
}
.ms-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.ms-footer-trust-logos img {
    height: 56px;
    width: auto;
}
/* Blocksy's copyright row continues the legal row: same ground, no extra rule. Blocksy paints the
   footer with its own mist background at a higher specificity, so the id selector is needed. */
#footer.ct-footer,
#footer [data-row="bottom"] {
    background: var(--ms-navy-deep);
    color: var(--ms-on-navy);
    border-top: 0;
    font-size: 0.9375rem;
}
#footer [data-row="bottom"] > .ct-container {
    padding-block: 0.25rem 2rem;
}
/* Header and copyright row share the 72rem content width of the page sections. */
#header [data-row*="middle"] > .ct-container,
#footer [data-row="bottom"] > .ct-container {
    width: min(100% - 2 * clamp(20px, 4vw, 40px), 1152px);
    max-width: 1152px;
}
@media (min-width: 980px) {
    .ms-site-footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
    .ms-footer-legal,
    .ms-site-footer .ms-footer-trust {
        grid-column: 1 / -1;
    }
}
@media (max-width: 999.98px) {
    .ms-footer-trust-logos img {
        height: 44px;
    }
    /* Room for the sticky mobile bar. */
    .ct-footer {
        padding-bottom: 72px;
    }
}

/* Focus on navy surfaces: the global navy ring was invisible on the navy header, drawer and footer
   (A11Y-1). White is 15.5:1 on navy and 17.3:1 on deep navy. */
#header :focus-visible,
#offcanvas :focus-visible,
.ms-site-footer :focus-visible,
.ct-footer :focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 3px;
}
.ct-header .menu > li > a:focus-visible,
#offcanvas .mobile-menu a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* The header button is white, so its ring sits outside on the navy header and stays white. */
#header [data-id="button"] .ct-button:focus-visible,
#offcanvas [data-id="button"] .ct-button:focus-visible {
    outline-offset: 3px;
}

/* Footer links that open a new tab say so (A11Y-15). */
.ms-footer-legal a[target="_blank"]::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (öffnet in neuem Tab)";
    font-size: 0.85em;
}

/* English pages (round 11, html lang="en-GB"): the same hint in English, for every new-tab arrow of the site
   (footer here, form privacy line in sections.css, review link and section links in layout.css). */
:lang(en) .ms-footer-legal a[target="_blank"]::after,
:lang(en) .ms-form-privacy a::after,
:lang(en) .ms-trust-note a[target="_blank"]::after,
:lang(en) .ms-section a[target="_blank"].ms-rating-link::after,
:lang(en) .ms-section a[target="_blank"].ms-ext::after,
:lang(en) .ms-section .ms-city-links a[target="_blank"]::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (opens in a new tab)";
}

/* Drawer submenu toggle as a 44 px target (A11Y-16). */
#offcanvas .ct-toggle-dropdown-mobile {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

/* Blocksy colours the copyright text with a dark palette value (low contrast on deep navy). */
#footer .ct-footer-copyright {
    color: var(--ms-on-navy);
}

/* Language switch in the header (client 2026-11-01, WF2-10): flag and language code, on every page, in the
   desktop and the mobile header without opening the menu. Rendered by [moselewski_language_switch] in a
   Blocksy text item (Language::switch_link). The 44 px box keeps the tap target large, the text stays small. */
.ct-header [data-id="text"] {
    --theme-font-size: 1rem;
    margin: 0;
}
.ct-header [data-id="text"] .entry-content > * {
    margin: 0;
}
.ms-header-language {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 0.35rem;
    box-sizing: border-box;
    color: #ffffff;
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.ms-header-language:hover,
.ms-header-language:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.ms-header-language__flag {
    display: block;
    flex: none;
    height: 14px;
    width: auto;
    /* A thin light edge keeps the dark parts of the flags apart from the navy header. */
    outline: 1px solid rgba(255, 255, 255, 0.55);
}
@media (max-width: 999.98px) {
    .ct-header [data-device="mobile"] [data-id="text"] {
        margin-inline-end: 0.25rem;
    }
}