/*
 * moselewski.de section and component styles (design "Variante 1 Markenfortführung").
 * Builds on the tokens in site.css. Mobile first, one layout breakpoint at 980px
 * (as in the mockup) plus small-phone tweaks up to 400px.
 *
 * Contrast (WCAG 2.x, measured): ink #232a3a on mist 13.0:1, muted #5a6274 on white 6.1:1
 * and on mist 5.6:1, on-navy #b9c0ce on navy 8.5:1, white on navy 15.5:1, placeholder
 * ink #6a4a00 on #fff4d6 7.4:1, field border #7a8294 on white 3.9:1. Steel #8b93a3 is
 * used for decoration only.
 */

:root {
    --ms-white: var(--theme-palette-color-7, #ffffff);
    --ms-field-border: #7a8294;
    --ms-warn-bg: #fff4d6;
    --ms-warn-ink: #6a4a00;
    --ms-warn-line: #b7791f;
    --ms-error: #b3261e;
    --ms-error-bg: #fdf0ef;
    --ms-success: #1e6b3a;
    --ms-success-bg: #eef7f1;
    /* Measures of the approved layout (Variante B, 2026-10-31): 72rem content, fluid gutter and section rhythm. */
    --ms-wrap-max: 1152px;
    --ms-wrap-narrow: 820px;
    --ms-pad-x: clamp(20px, 4vw, 40px);
    --ms-section-y: clamp(64px, 9vw, 112px);
    --ms-gap: 1rem;
    --ms-bar-height: 56px;
    --ms-icon-form: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h8l4 4v14H7z M15 3v4h4 M10 12h6 M10 16h6' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ms-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
    --ms-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z M8 9h8 M8 12h5' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ms-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 10h6M9 14h6M9 18h4' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ms-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9.5 17h-19zM12 10v4.5M12 17.5v.5' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ms-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ms-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    --ms-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
    --ms-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-7.1 7-12.5A7 7 0 0 0 5 9.5C5 14.9 12 22 12 22z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='9.5' r='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
    --ms-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231b2437' stroke-width='2'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------------------------------------------------------------- */
/* Section scaffolding                                               */
/* ---------------------------------------------------------------- */

.entry-content > .ms-section.alignfull,
.is-layout-constrained > .ms-section.alignfull,
.is-layout-flow > .ms-section.alignfull {
    margin-block: 0;
}

.ms-section {
    position: relative;
    padding-block: var(--ms-section-y);
    color: var(--ms-ink);
    font-family: var(--ms-font-body);
    font-size: 1.125rem;
    line-height: 1.6;
}
.ms-section--tight {
    padding-block: 32px;
}
.ms-section--mist {
    background: var(--ms-mist);
}
.ms-section--navy {
    background: var(--ms-navy);
}

.ms-section[id],
.ms-section [id] {
    scroll-margin-top: 96px;
}

.ms-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--ms-wrap-max) + 2 * var(--ms-pad-x));
    margin-inline: auto;
    padding-inline: var(--ms-pad-x);
}
.ms-wrap--narrow {
    max-width: calc(var(--ms-wrap-narrow) + 2 * var(--ms-pad-x));
}

/* Classic themes without theme.json wrap group children: keep grids working. */
.ms-section .wp-block-group__inner-container {
    display: contents;
}

/* Reset theme margins, then space children with one flow rule. */
.ms-section p,
.ms-section h1,
.ms-section h2,
.ms-section h3,
.ms-section h4,
.ms-section ul,
.ms-section ol,
.ms-section blockquote,
.ms-section figure,
.ms-section details {
    margin: 0;
}
.ms-section .wp-block-group > * + *,
.ms-section details > * + * {
    margin-block-start: var(--ms-gap);
}
.ms-section .ms-head {
    max-width: 40rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ms-section .ms-head > p:not(.ms-eyebrow) {
    color: var(--ms-muted);
}

/* Typography */
.ms-section h1,
.ms-section h2,
.ms-section h3 {
    font-family: var(--ms-font-display);
    text-transform: uppercase;
    color: var(--ms-navy);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-wrap: balance;
}
.ms-section h2 {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
    font-weight: 600;
}
.ms-section h2 + * {
    margin-block-start: 1rem;
}
.ms-section h3 {
    font-size: 1.375rem;
    font-weight: 600;
}
.ms-section .ms-eyebrow + h1,
.ms-section .ms-eyebrow + h2 {
    margin-block-start: 12px;
}
.ms-note {
    font-size: 1rem;
    color: var(--ms-muted);
}

/* Links */
.ms-section a:not(.wp-block-button__link) {
    color: var(--ms-navy);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.ms-section a:not(.wp-block-button__link):hover {
    text-decoration-thickness: 2px;
}
.ms-link-arrow a:not(.wp-block-button__link) {
    display: inline-block;
    padding-block: 13px;
    font-family: var(--ms-font-display);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.ms-link-arrow a:not(.wp-block-button__link)::after {
    content: " \2192";
}

/* Navy surfaces */
.ms-on-navy {
    color: var(--ms-on-navy);
}
.ms-on-navy h1,
.ms-on-navy h2,
.ms-on-navy h3,
.ms-on-navy strong {
    color: var(--ms-white);
}
.ms-section .ms-on-navy a:not(.wp-block-button__link),
.ms-section.ms-on-navy a:not(.wp-block-button__link) {
    color: var(--ms-white);
}
.ms-on-navy .ms-note {
    color: var(--ms-on-navy);
}

/* Focus: always visible, colour flips on navy. */
.ms-section :focus-visible,
.ms-mobile-bar :focus-visible,
.ms-header-phone:focus-visible,
.ms-header-phone-icon:focus-visible {
    outline: 2px solid var(--ms-navy);
    outline-offset: 3px;
}
.ms-on-navy :focus-visible,
.ms-section.ms-on-navy :focus-visible,
.ms-mobile-bar :focus-visible,
.ms-header-phone:focus-visible,
.ms-header-phone-icon:focus-visible {
    outline-color: var(--ms-white);
}
.ms-mobile-bar .ms-mobile-bar__link--report:focus-visible {
    outline-color: var(--ms-white);
    outline-offset: -5px;
    box-shadow: inset 0 0 0 3px var(--ms-navy);
}

/* ---------------------------------------------------------------- */
/* Utilities                                                          */
/* ---------------------------------------------------------------- */

@media (max-width: 979.98px) {
    .ms-desktop-only {
        display: none !important;
    }
}
@media (min-width: 980px) {
    .ms-mobile-only {
        display: none !important;
    }
}

.ms-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.ms-section .ms-grid > *,
.ms-section .ms-hero-inner > *,
.ms-section .ms-report-inner > *,
.ms-section .ms-contact-grid > *,
.ms-section .ms-claim-inner > *,
.ms-section .ms-cta-inner > *,
.ms-section .ms-contact-strip-inner > *,
.ms-section .ms-service > *,
.ms-section .ms-trust-logos > *,
.ms-section .ms-person > * {
    margin-block-start: 0;
}
@media (min-width: 980px) {
    .ms-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .ms-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

/* Review markers: placeholders in a warning colour, easy to spot. */
.ms-placeholder {
    padding: 8px 12px;
    border: 1px dashed var(--ms-warn-line);
    border-left: 4px solid var(--ms-warn-line);
    background: var(--ms-warn-bg);
    color: var(--ms-warn-ink) !important;
    font-family: var(--ms-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}
.ms-logo-slot {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px dashed var(--ms-warn-line);
    background: var(--ms-warn-bg);
    color: var(--ms-warn-ink) !important;
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Optional image slots render nothing while empty. */
.ms-image-slot:empty,
.ms-image-slot:not(:has(img, picture, video, svg)) {
    display: none;
}
.ms-image-slot img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------- */
/* Buttons (core button block)                                         */
/* ---------------------------------------------------------------- */

.ms-section .ms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-block-start: 2rem;
}
.ms-section .wp-block-button {
    margin: 0;
}
.ms-section .wp-block-button__link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 12px 1.5rem;
    border: 2px solid transparent;
    border-radius: 0;
    font-family: var(--ms-font-display);
    /* 16px with moderate tracking (A11Y-18 asked for at least 15px), as in the approved layout. */
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.ms-section .ms-btn-solid > .wp-block-button__link {
    background: var(--ms-white);
    color: var(--ms-navy);
}
.ms-section .ms-btn-solid > .wp-block-button__link:hover {
    background: #e4e8f0;
}
.ms-section .ms-btn-navy > .wp-block-button__link {
    background: var(--ms-navy);
    color: var(--ms-white);
}
.ms-section .ms-btn-navy > .wp-block-button__link:hover {
    background: var(--ms-navy-deep);
}
.ms-section .ms-btn-ghost > .wp-block-button__link {
    background: transparent;
    border-color: var(--ms-on-navy);
    color: var(--ms-white);
}
.ms-section .ms-btn-ghost > .wp-block-button__link:hover {
    background: var(--ms-navy-deep);
}
.ms-section .ms-btn-solid > .wp-block-button__link {
    border-color: var(--ms-white);
}
.ms-section .ms-btn-navy > .wp-block-button__link {
    border-color: var(--ms-navy);
}
/* Trailing arrow on the primary action (approved layout). */
.ms-section .ms-btn-arrow > .wp-block-button__link::after {
    content: "";
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    background: currentColor;
    -webkit-mask: var(--ms-icon-arrow) center / contain no-repeat;
    mask: var(--ms-icon-arrow) center / contain no-repeat;
}
.ms-section .ms-btn-outline > .wp-block-button__link {
    background: transparent;
    border-color: var(--ms-navy);
    color: var(--ms-navy);
}
.ms-section .ms-btn-outline > .wp-block-button__link:hover {
    background: var(--ms-navy);
    color: var(--ms-white);
}

/* Mobile: full-width buttons, phone first where requested. */
@media (max-width: 979.98px) {
    .ms-section .ms-actions--stack-mobile {
        flex-direction: column;
    }
    .ms-section .ms-actions--stack-mobile .ms-btn-phone {
        order: -1;
    }
    .ms-section .ms-actions--stack-mobile .wp-block-button,
    .ms-section .ms-actions--stack-mobile .wp-block-button__link {
        width: 100%;
    }
}
@media (max-width: 599.98px) {
    .ms-section .ms-actions .wp-block-button {
        flex: 1 1 100%;
    }
    .ms-section .ms-actions .wp-block-button__link {
        width: 100%;
    }
}

/* Page components (hero, bands, lists, steps, cards): see layout.css (redesign 2026-10-31). */

/* ---------------------------------------------------------------- */
/* Report form (Contact Form 7, html_class="ms-form")                 */
/* ---------------------------------------------------------------- */

.ms-form {
    --theme-form-field-border-initial-color: var(--ms-field-border);
    --theme-form-field-border-focus-color: var(--ms-navy);
    --theme-form-field-border-radius: 0;
    --theme-form-field-height: 48px;
    display: grid;
    gap: 20px;
    color: var(--ms-ink);
}
.ms-form > p {
    margin: 0;
}
.ms-form br {
    display: none;
}
.ms-form-emergency {
    padding: 16px 18px;
    background: var(--ms-navy);
    color: var(--ms-on-navy);
    font-size: 0.95rem;
    line-height: 1.5;
}
.ms-form-emergency strong {
    color: var(--ms-white);
}
.ms-form-emergency a {
    color: var(--ms-white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.ms-form-emergency a:focus-visible {
    outline: 2px solid var(--ms-white);
    outline-offset: 2px;
}
.ms-form-intro {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.95rem;
}
.ms-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.ms-field > label,
.ms-field > legend {
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ms-navy);
}
.ms-field > legend {
    margin-bottom: 8px;
    /* Blocksy pulls legends 15px to the left for padded fieldsets, which clipped the label. */
    margin-inline: 0;
}
.ms-field small {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ms-muted);
}
.ms-field-row {
    display: grid;
    gap: 20px;
}
.ms-form .wpcf7-form-control-wrap {
    display: block;
}

.ms-form input[type="text"],
.ms-form input[type="tel"],
.ms-form input[type="email"],
.ms-form input[type="date"],
.ms-form input[type="number"],
.ms-form select,
.ms-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--ms-field-border);
    border-radius: 0;
    background-color: var(--ms-white);
    color: var(--ms-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
}
.ms-form textarea {
    min-height: 150px;
    resize: vertical;
}
.ms-form select {
    padding-right: 44px;
    background-image: var(--ms-chevron);
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    appearance: none;
}
.ms-form ::placeholder {
    color: var(--ms-muted);
    opacity: 1;
}
.ms-form input:focus-visible,
.ms-form select:focus-visible,
.ms-form textarea:focus-visible {
    border-color: var(--ms-navy);
    outline: 2px solid var(--ms-navy);
    outline-offset: 2px;
}

/* "Ich bin" radio group and the checkbox groups as large tap targets. */
.ms-form .wpcf7-radio,
.ms-form .wpcf7-checkbox {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.ms-form .wpcf7-list-item {
    display: flex;
    margin: 0;
}
.ms-form .wpcf7-radio label,
.ms-form .wpcf7-checkbox label {
    flex: 1;
}
.ms-form .wpcf7-radio label,
.ms-form .wpcf7-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--ms-field-border);
    background: var(--ms-white);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.ms-form .wpcf7-radio input,
.ms-form .wpcf7-checkbox input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ms-navy);
}
.ms-form .wpcf7-radio label:has(input:checked),
.ms-form .wpcf7-checkbox label:has(input:checked) {
    border-color: var(--ms-navy);
    background: var(--ms-navy);
    color: var(--ms-white);
    font-weight: 600;
}
.ms-form .wpcf7-radio label:has(input:checked) input,
.ms-form .wpcf7-checkbox label:has(input:checked) input {
    accent-color: var(--ms-white);
}
.ms-form .wpcf7-radio label:has(input:focus-visible),
.ms-form .wpcf7-checkbox label:has(input:focus-visible) {
    outline: 2px solid var(--ms-navy);
    outline-offset: 2px;
}
.ms-form .wpcf7-radio input:focus-visible,
.ms-form .wpcf7-checkbox input:focus-visible {
    outline: none;
}
@media (min-width: 560px) {
    .ms-form .wpcf7-radio,
    .ms-form .wpcf7-checkbox {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* File inputs: native picker, camera allowed on phones. */
.ms-files .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
    margin-top: 8px;
}
.ms-form .ms-file-step-hidden {
    display: none;
}
.ms-form input[type="file"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 6px;
    border: 1px dashed var(--ms-field-border);
    background: var(--ms-mist);
    color: var(--ms-ink);
    font: inherit;
    font-size: 0.9rem;
}
.ms-form input[type="file"]::file-selector-button {
    min-height: 40px;
    margin-right: 12px;
    padding: 8px 14px;
    border: 1px solid var(--ms-navy);
    background: var(--ms-white);
    color: var(--ms-navy);
    font-family: var(--ms-font-display);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.ms-form input[type="file"]:focus-visible {
    outline: 2px solid var(--ms-navy);
    outline-offset: 2px;
}

/* Privacy note sits directly above the submit button. */
.ms-form-privacy {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ms-ink);
}
.ms-form-privacy a {
    color: var(--ms-navy);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.ms-form-privacy a::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (öffnet in neuem Tab)";
    font-size: 0.85em;
}

.ms-form .wpcf7-submit,
.ms-form .ms-button {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 14px 28px;
    border: 0;
    border-radius: 0;
    background: var(--ms-navy);
    color: var(--ms-white);
    font-family: var(--ms-font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ms-form .wpcf7-submit:hover,
.ms-form .ms-button:hover {
    background: var(--ms-navy-deep);
}
.ms-form .wpcf7-submit:focus-visible,
.ms-form .ms-button:focus-visible {
    outline: 2px solid var(--ms-navy);
    outline-offset: 3px;
}
.ms-form .wpcf7-submit:disabled {
    cursor: progress;
    opacity: 0.75;
}
.ms-form .wpcf7-spinner {
    margin: 12px auto 0;
}

/* Validation and status messages. Element plus class (0,2,1) so the error border beats the field rules above. */
.ms-form input.wpcf7-not-valid,
.ms-form select.wpcf7-not-valid,
.ms-form textarea.wpcf7-not-valid {
    border: 2px solid var(--ms-error);
}
.ms-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: var(--ms-error);
    font-size: 0.875rem;
    font-weight: 600;
}
/* Result of a submission, in the site's own card look (client 2026-11-02: it looked like a foreign body). */
.wpcf7 form.ms-form .wpcf7-response-output {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--ms-line);
    border-left: 4px solid var(--ms-error);
    background: var(--ms-error-bg);
    color: var(--ms-ink);
    font-family: var(--ms-font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
}
.ms-form .wpcf7-response-output:focus {
    outline: none;
}
.ms-form .wpcf7-response-output:empty {
    display: none;
}
.wpcf7 form.ms-form.sent .wpcf7-response-output {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    border-color: var(--ms-line);
    border-left-color: var(--ms-navy);
    background: var(--ms-mist);
}
.wpcf7 form.ms-form.sent .wpcf7-response-output::before {
    content: "";
    width: 28px;
    height: 28px;
    background: var(--ms-navy);
    clip-path: var(--ms-hex);
}
.wpcf7 form.ms-form.sent .wpcf7-response-output::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    margin: 7px 0 0 7px;
    background: var(--ms-white);
    -webkit-mask: var(--ms-icon-check) center / contain no-repeat;
    mask: var(--ms-icon-check) center / contain no-repeat;
}
/* The visitor's entries under the success message. The accordion look comes from details.wp-block-details. */
.ms-form-details__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-top: 8px;
}
.ms-form-details__list dt {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ms-navy);
}
.ms-form-details__list dd {
    margin: 0 0 12px;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.ms-form-details__list dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 980px) {
    .ms-field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .ms-form-details__list {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 12px 16px;
    }
    .ms-form-details__list dd {
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------- */
/* Header and footer hooks (see pages/_header-footer.md)              */
/* ---------------------------------------------------------------- */

.ms-header-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ms-white);
    font-family: var(--ms-font-display);
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
}
.ms-header-phone:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ms-white);
}
.ms-header-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ms-white);
}

.ms-footer-trust-label {
    margin: 0 0 10px;
    font-family: var(--ms-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ms-on-navy);
}
.ms-footer-trust-logos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
}
.ms-footer-trust-logos img {
    display: block;
    width: auto;
    height: 44px;
}
.ms-footer-trust-logos a {
    display: inline-block;
}
.ms-footer-trust-logos a:focus-visible {
    outline: 2px solid var(--ms-white);
    outline-offset: 3px;
}
@media (min-width: 980px) {
    .ms-footer-trust-logos img {
        height: 56px;
    }
}

/* ---------------------------------------------------------------- */
/* Sticky mobile bar (markup: pages/_mobile-bar.html), no call button */
/* ---------------------------------------------------------------- */

.ms-mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--ms-navy);
    font-family: var(--ms-font-display);
}
.ms-mobile-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ms-bar-height);
    padding: 0 10px;
    color: var(--ms-white);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}
.ms-mobile-bar__link:hover,
.ms-mobile-bar__link:focus {
    color: var(--ms-white);
}
.ms-mobile-bar__link--report,
.ms-mobile-bar__link--report:hover,
.ms-mobile-bar__link--report:focus {
    background: var(--ms-white);
    color: var(--ms-navy);
}
.ms-mobile-bar__icon {
    flex: none;
}
.ms-mobile-bar :focus-visible {
    outline-offset: -4px;
}

/* Bar breakpoint follows Blocksy's header switch at 1000px, so between 980 and 999px (mobile header,
   no header button) the bar still offers "Anliegen melden". */
@media (max-width: 999.98px) {
    body:has(.ms-mobile-bar) {
        padding-bottom: calc(var(--ms-bar-height) + env(safe-area-inset-bottom, 0px));
    }
    html:has(.ms-mobile-bar) {
        scroll-padding-bottom: calc(var(--ms-bar-height) + 16px);
    }
}
@media (min-width: 1000px) {
    .ms-mobile-bar {
        display: none;
    }
}

/* Form parts added in round 1. The hidden attribute must win over display: grid. */
.ms-form [hidden] {
    display: none !important;
}
.ms-fieldset {
    gap: 14px;
}
.ms-fieldset > legend {
    font-family: var(--ms-font-display);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ms-form-note {
    padding: 12px 14px;
    border-left: 4px solid var(--ms-navy);
    background: var(--ms-mist);
    font-size: 0.95rem;
}
.ms-form-note a {
    font-weight: 600;
}
.ms-form-response-time {
    margin: 0;
    color: var(--ms-muted);
    font-size: 0.95rem;
}
.ms-required-when {
    color: inherit;
}

/* ---------------------------------------------------------------- */
/* Small phones (390px class)                                         */
/* ---------------------------------------------------------------- */

@media (max-width: 400px) {
    .ms-section .wp-block-button__link {
        padding-inline: 18px;
    }
    .ms-mobile-bar__link {
        gap: 6px;
    }
}

/* ---------------------------------------------------------------- */
/* Reduced motion                                                     */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ms-section *,
    .ms-section *::before,
    .ms-section *::after,
    .ms-mobile-bar * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------- */
/* Review round 1 (2026-10-31)                                        */
/* ---------------------------------------------------------------- */

/* Topic-dependent text variants of the report form: without JavaScript only the default shows. */
.ms-form:not(.ms-form--ready) .ms-variant:not(.ms-variant--default) {
    display: none;
}
/* Purchase enquiry (WF-14, client 2026-11-01) and rental enquiry (idea 10): the hint about a listing's Immobilien-ID
   only while a listing of that kind is online. The wrapper carries the state (Contact_Form::render), the script toggles both variants. */
.ms-report-form[data-purchase-listings="0"] .ms-variant--purchase-listed,
.ms-report-form[data-purchase-listings="1"] .ms-variant--purchase-empty,
.ms-report-form[data-rent-listings="0"] .ms-variant--rent-listed,
.ms-report-form[data-rent-listings="1"] .ms-variant--rent-empty {
    display: none !important;
}
/* Damage triage questions (idea 2): spaced like the form itself, and a field with a hint does not stretch its
   neighbour in the same row. */
.ms-form .ms-damage-triage:not([hidden]) {
    display: grid;
    gap: 20px;
}
.ms-damage-triage .ms-field-row > .ms-field {
    align-content: start;
}
.ms-field > small.ms-hint-before {
    margin-top: -2px;
}

/* FlowFact listings: the plugin prints its primary colour as rgba(242,244,246,0.12) with !important,
   which made prices invisible (A11Y-2). body raises the specificity above the inline rule. */
body .ff-color-primary {
    color: var(--ms-navy) !important;
}
body .ff-border-color-primary {
    border-color: var(--ms-navy) !important;
}
/* The price labels carry the same colour as an inline style attribute. */
body .ff-color-primary .ff-border-color-primary {
    color: var(--ms-navy) !important;
}
.FFestateview-default-overview-search-submit-button {
    min-height: 44px;
}

/* Legal pages (Datenschutzerklärung, Impressum). */
.ms-legal-text h2 {
    margin-block: 40px 12px;
    font-size: 1.25rem;
}
.ms-legal-text h2:first-of-type {
    margin-top: 24px;
}
.ms-legal-text p {
    margin-block: 0 14px;
}
.ms-legal-objection {
    margin-top: 12px;
    padding: 18px 20px;
    border-left: 4px solid var(--ms-navy);
    background: var(--ms-mist);
}
.ms-legal-objection p:last-child {
    margin-bottom: 0;
}

/* FlowFact's chosen.js stylesheet points to chosen-sprite@2x.png on high-density screens, which the connector
   does not ship: on phones every listing page logged a 404 (round 9, measured at deviceScaleFactor 2). The
   connector draws its own select arrow, so the sprite is simply dropped. */
html body .chosen-container .chosen-results-scroll-down span,
html body .chosen-container .chosen-results-scroll-up span,
html body .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
html body .chosen-container-single .chosen-search input[type="text"],
html body .chosen-container-single .chosen-single abbr,
html body .chosen-container-single .chosen-single div b,
html body .chosen-rtl .chosen-search input[type="text"] {
    background-image: none !important;
}