/*
 * moselewski.de page components, redesign 2026-10-31 ("Variante B", approved by the client:
 * "B ist passender, aber sieht jetzt sehr viel besser aus").
 * Reference: design-proposals/redesign-2026-10-31/variante-b.html with shared.css.
 *
 * Principles applied on every page: navy hero band (H1, one lead, at most two buttons, optional trust
 * row, one sketch composition in hexagons), white canvas with generous whitespace, at most one mist band,
 * a dark close band, then the footer. No grids of equal boxed cards: audiences are quiet columns, tasks a
 * slim list, processes numbered hexagon steps, and a bordered card only for a contact person.
 *
 * Builds on the tokens in site.css and the scaffolding, buttons and form in sections.css.
 * One layout breakpoint at 980px, as in sections.css.
 */

/* ---------------------------------------------------------------- */
/* Hero band                                                          */
/* ---------------------------------------------------------------- */

.ms-hero {
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
    background: var(--ms-navy);
    color: var(--ms-on-navy);
}
.ms-hero-inner {
    display: grid;
    gap: 2.5rem;
}
.ms-section .ms-hero-inner > * {
    margin-block-start: 0;
}
.ms-section .ms-hero-title {
    font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
    font-weight: 600;
    color: var(--ms-white);
    overflow-wrap: break-word;
    /* Automatic hyphenation split "Hausverwaltung" in the owner H1, so words break only where they must. */
    hyphens: manual;
}
.ms-section .ms-hero-title + * {
    margin-block-start: 1.25rem;
}
.ms-lead {
    max-width: 34rem;
    font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
    color: var(--ms-muted);
}
.ms-on-navy .ms-lead,
.ms-hero .ms-lead {
    color: var(--ms-on-navy);
}
.ms-section .ms-lead + .ms-lead {
    margin-block-start: 0.5rem;
}
.ms-hero .ms-lead a:not(.wp-block-button__link) {
    color: var(--ms-white);
}
/* Small lines in the hero: translation hint (RE-12) and the owner microcopy (MKT-6). */
.ms-hero .ms-translate-note,
.ms-hero .ms-hero-note {
    font-size: 1rem;
    color: var(--ms-on-navy);
}
.ms-section .ms-translate-note + .ms-lead {
    margin-block-start: 0.75rem;
}
.ms-section .ms-actions + .ms-hero-note {
    margin-block-start: 1rem;
}

/* Compact hero for the legal pages: same band, smaller title, no sketch. */
.ms-hero--compact {
    padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* Sized so "Datenschutzerklärung" fits a 390px phone on one line. */
.ms-section.ms-hero--compact .ms-hero-title {
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
}

/* Line sketches in hexagon masks (feedback round 1: no photos of managed buildings). */
.ms-sketch {
    aspect-ratio: 1 / 1.155;
    clip-path: var(--ms-hex);
    overflow: hidden;
}
.ms-sketch-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sketch composition: one large and one small hexagon, as in the approved layout. */
.ms-section .ms-hero-art {
    position: relative;
    width: min(62%, 15rem);
    aspect-ratio: 1 / 0.9;
    margin-inline-start: auto;
}
.ms-hero-art .ms-sketch {
    position: absolute;
    aspect-ratio: auto;
    background: #26304a;
}
.ms-hero-art .ms-sketch:first-child {
    inset: 0 12% 8% 0;
}
.ms-hero-art .ms-sketch:nth-child(2) {
    inset: auto 0 0 auto;
    width: 38%;
    aspect-ratio: 400 / 462;
}
.ms-image-slot.ms-hero-art img,
.ms-sketch .ms-sketch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero actions: full width on phones, as in the approved layout. Below the desktop breakpoint no page
   shows hero sketches, so the form, the templates, the listing or "Schnell erledigt" start one screen
   earlier. The start page followed the subpages in round 6 (client 2026-10-31: "Die Waben gefallen mir da
   direkt unter Quelle immer noch nicht. Sollten wir anders machen."). */
@media (max-width: 979.98px) {
    .ms-section .ms-hero-art,
    .ms-section .ms-hero-art.ms-hero-art--comb {
        display: none;
    }
    .ms-hero .ms-actions .wp-block-button {
        flex: 1 1 100%;
    }
    .ms-hero .ms-actions .wp-block-button__link {
        width: 100%;
    }
}
@media (min-width: 980px) {
    .ms-hero-inner:has(.ms-hero-art) {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: center;
    }
    .ms-section .ms-hero-art {
        width: 100%;
        max-width: 28rem;
        aspect-ratio: 1 / 1;
        margin-inline-start: auto;
    }
}

/* Trust row under the hero buttons ([moselewski_trust]). */
.ms-section .ms-trust-wrap {
    margin-block-start: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2c3550;
}
.ms-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: var(--ms-on-navy);
}
.ms-section .ms-trust li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.ms-trust strong {
    color: var(--ms-white);
    font-weight: 600;
}
.ms-trust__star {
    flex: none;
    color: #e2b552;
    font-size: 1.05rem;
    line-height: 1;
}
.ms-trust__fact::before {
    content: "";
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--ms-on-navy);
    -webkit-mask: var(--ms-icon-check) center / contain no-repeat;
    mask: var(--ms-icon-check) center / contain no-repeat;
}
/* Rating below the facts with its source right beside it (client 2026-11-02). */
.ms-section .ms-trust-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
    margin-block-start: 0.75rem;
    font-size: 1rem;
    color: var(--ms-on-navy);
}
.ms-section .ms-trust-rating p {
    margin: 0;
}
.ms-trust-rating strong {
    color: var(--ms-white);
    font-weight: 600;
}
.ms-section .ms-trust-note {
    max-width: 40rem;
    margin-block-start: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ms-on-navy);
}
.ms-section .ms-trust-note a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ms-white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.ms-trust-note a[target="_blank"]::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (öffnet in neuem Tab)";
    font-size: 0.85em;
}

/* ---------------------------------------------------------------- */
/* Bands                                                              */
/* ---------------------------------------------------------------- */

/* Two-column split used by the quick-help, steps, report, contact and services sections. */
.ms-split {
    display: grid;
    gap: 2.5rem;
}
.ms-section .ms-split > * {
    margin-block-start: 0;
}
@media (min-width: 980px) {
    .ms-split {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        gap: clamp(2rem, 6vw, 5rem);
        align-items: start;
    }
    .ms-split--lead {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
    .ms-split--even {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Dark close band with the contact call to action. */
.ms-close {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
    background: var(--ms-navy);
}
.ms-close-inner {
    display: grid;
    gap: 2rem;
}
.ms-section .ms-close-inner > * {
    margin-block-start: 0;
}
.ms-close p {
    max-width: 34rem;
    color: var(--ms-on-navy);
}
.ms-section .ms-close .ms-actions {
    margin-block-start: 0;
}
/* Close-band buttons keep their natural width on phones, as in the approved layout. */
@media (max-width: 599.98px) {
    .ms-section.ms-close .ms-actions .wp-block-button {
        flex: 0 0 auto;
    }
    .ms-section.ms-close .ms-actions .wp-block-button__link {
        width: auto;
    }
}
@media (min-width: 980px) {
    .ms-close-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

/* ---------------------------------------------------------------- */
/* Text links                                                         */
/* ---------------------------------------------------------------- */

.ms-section .ms-textlink a:not(.wp-block-button__link) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--ms-navy);
    text-decoration-thickness: 1px;
}
.ms-section .ms-textlink a:not(.wp-block-button__link)::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: var(--ms-icon-arrow) center / contain no-repeat;
    mask: var(--ms-icon-arrow) center / contain no-repeat;
    transition: translate 0.25s ease-out;
}
.ms-section .ms-textlink a:not(.wp-block-button__link):hover::after {
    translate: 3px 0;
}
.ms-on-navy .ms-textlink a:not(.wp-block-button__link) {
    color: var(--ms-white);
}

/* ---------------------------------------------------------------- */
/* Audience columns (quiet columns with a small hexagon sketch)       */
/* ---------------------------------------------------------------- */

.ms-audiences {
    display: grid;
    gap: 2.5rem;
}
.ms-section .ms-audiences > * {
    margin-block-start: 0;
}
.ms-audience {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    align-content: start;
}
.ms-section .ms-audience > * {
    grid-column: 2;
    margin-block-start: 0;
}
.ms-section .ms-audience > .ms-sketch {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 5.5rem;
    background: var(--ms-mist);
}
.ms-section .ms-audience h3 {
    margin-bottom: 0.5rem;
}
.ms-section .ms-audience p:not(.ms-textlink) {
    margin-bottom: 0.25rem;
    color: var(--ms-muted);
}
@media (min-width: 980px) {
    .ms-audiences {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 3.5rem);
    }
    .ms-audiences--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 50rem;
    }
    .ms-audience {
        display: block;
    }
    .ms-section .ms-audience > .ms-sketch {
        width: 7.5rem;
        margin-bottom: 1.5rem;
    }
}

/* ---------------------------------------------------------------- */
/* Task list (icon, title, one line, arrow)                           */
/* ---------------------------------------------------------------- */

.ms-section .ms-tasks {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ms-navy);
}
.ms-section .ms-tasks li {
    margin: 0;
}
.ms-section .ms-tasks a {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem;
    grid-template-areas:
        "icon title arrow"
        "icon desc arrow";
    column-gap: 1rem;
    align-items: center;
    padding: 1.35rem 0.25rem;
    border-bottom: 1px solid var(--ms-line);
    color: var(--ms-ink);
    text-decoration: none;
    transition:
        background-color 0.2s,
        padding 0.3s ease-out;
}
.ms-section .ms-tasks a:hover {
    padding-inline: 0.9rem;
    background: var(--ms-white);
}
.ms-section--mist .ms-tasks a:hover {
    background: var(--ms-white);
}
.ms-section:not(.ms-section--mist) .ms-tasks a:hover {
    background: var(--ms-mist);
}
.ms-section .ms-tasks a::before {
    content: "";
    grid-area: icon;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--ms-navy);
    -webkit-mask: var(--ms-icon, var(--ms-icon-doc)) center / contain no-repeat;
    mask: var(--ms-icon, var(--ms-icon-doc)) center / contain no-repeat;
}
.ms-section .ms-tasks a::after {
    content: "";
    grid-area: arrow;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ms-navy);
    -webkit-mask: var(--ms-icon-arrow) center / contain no-repeat;
    mask: var(--ms-icon-arrow) center / contain no-repeat;
}
.ms-section .ms-tasks strong {
    grid-area: title;
    font-family: var(--ms-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ms-navy);
}
.ms-section .ms-tasks span {
    grid-area: desc;
    font-size: 1rem;
    color: var(--ms-muted);
}
.ms-icon-form {
    --ms-icon: var(--ms-icon-form);
}
.ms-icon-doc {
    --ms-icon: var(--ms-icon-doc);
}
.ms-icon-pin {
    --ms-icon: var(--ms-icon-pin);
}
.ms-icon-mail {
    --ms-icon: var(--ms-icon-mail);
}
.ms-section .ms-tasks-note {
    margin-block-start: 1.25rem;
    font-size: 1rem;
    color: var(--ms-muted);
}
.ms-tasks-note a {
    font-weight: 600;
}
/* Download list: a calmer variant with smaller titles. */
.ms-section .ms-tasks--files a {
    padding-block: 1rem;
}
.ms-section .ms-tasks--files a::before {
    width: 2rem;
    height: 2rem;
}
.ms-section .ms-tasks--files strong {
    font-family: var(--ms-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.ms-section .ms-tasks--files span {
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- */
/* Numbered hexagon steps                                             */
/* ---------------------------------------------------------------- */

.ms-section .ms-steps {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ms-step;
}
.ms-section .ms-steps li {
    position: relative;
    margin: 0;
    padding: 0 0 1.75rem 3.75rem;
    color: var(--ms-muted);
    counter-increment: ms-step;
}
.ms-section .ms-steps li::before {
    content: counter(ms-step);
    position: absolute;
    top: -0.15rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.85rem;
    clip-path: var(--ms-hex);
    background: var(--ms-navy);
    color: var(--ms-white);
    font: 600 1.1rem var(--ms-font-display);
}
.ms-section .ms-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 0.4rem;
    left: 1.2rem;
    width: 2px;
    background: var(--ms-line);
}
.ms-section .ms-steps li > strong:first-child {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ms-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ms-navy);
}

/* ---------------------------------------------------------------- */
/* Contact person card (the only bordered card)                       */
/* ---------------------------------------------------------------- */

.ms-person-card {
    padding: 2rem;
    border: 1px solid var(--ms-line);
    background: var(--ms-white);
}
.ms-section .ms-person-card > p:not(.ms-person) {
    color: var(--ms-muted);
}
.ms-person {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ms-section .ms-person > * {
    margin: 0;
}
.ms-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 4rem;
    height: 4.6rem;
    margin: 0;
    clip-path: var(--ms-hex);
    background: var(--ms-navy);
    color: var(--ms-white);
    font: 600 1.25rem var(--ms-font-display);
    letter-spacing: 0.04em;
}
.ms-avatar--small {
    width: 2.75rem;
    height: 3.15rem;
    font-size: 0.95rem;
}
.ms-person-text {
    line-height: 1.3;
}
.ms-person-label {
    display: block;
    font-size: 0.9375rem;
    color: var(--ms-muted);
}
.ms-person-name {
    display: block;
    font: 600 1.35rem/1.2 var(--ms-font-display);
    text-transform: uppercase;
    color: var(--ms-navy);
}
.ms-section .ms-person-card .ms-person {
    margin-bottom: 1.25rem;
}
.ms-section .ms-person-card .ms-actions {
    margin-block-start: 0.5rem;
}
.ms-section .ms-person-card .wp-block-button,
.ms-section .ms-person-card .wp-block-button__link {
    width: 100%;
}

/* ---------------------------------------------------------------- */
/* Accordions as lines (FAQ, cities, details, trades)                 */
/* ---------------------------------------------------------------- */

.ms-section details.wp-block-details {
    border: 0;
    border-bottom: 1px solid var(--ms-line);
    background: none;
}
.ms-section details.wp-block-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 1rem 0.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ms-navy);
    cursor: pointer;
    list-style: none;
}
.ms-section details.wp-block-details > summary::-webkit-details-marker {
    display: none;
}
.ms-section details.wp-block-details > summary::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-right: 6px;
    border-right: 2px solid var(--ms-navy);
    border-bottom: 2px solid var(--ms-navy);
    rotate: 45deg;
    transition: rotate 0.2s ease;
}
.ms-section details.wp-block-details[open] > summary::after {
    margin-top: 5px;
    rotate: -135deg;
}
.ms-section details.wp-block-details > summary:hover {
    color: var(--ms-navy-deep);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.ms-section details.wp-block-details > :not(summary) {
    margin-inline: 0.25rem;
}
.ms-section details.wp-block-details > summary + * {
    margin-block-start: 0;
}
.ms-section details.wp-block-details > :last-child:not(summary) {
    margin-bottom: 1.25rem;
}
.ms-accordion {
    border-top: 2px solid var(--ms-navy);
}
.ms-section .ms-accordion > details.wp-block-details {
    margin-block-start: 0;
}
.ms-section .ms-accordion details p {
    max-width: 65ch;
    color: var(--ms-muted);
}

/*
 * .ms-collapse-mobile: an accordion below 980px, shown open from 980px.
 * Uses ::details-content where supported. Browsers without it keep a working
 * (closed) accordion on desktop too.
 */
@media (min-width: 980px) {
    @supports selector(::details-content) {
        .ms-section details.ms-collapse-mobile::details-content {
            content-visibility: visible;
        }
        .ms-section details.ms-collapse-mobile > summary {
            cursor: default;
            pointer-events: none;
        }
        .ms-section details.ms-collapse-mobile > summary::after {
            display: none;
        }
        .ms-section details.ms-collapse-mobile > summary:hover {
            text-decoration: none;
        }
    }
}

/* ---------------------------------------------------------------- */
/* Tenant page: report, why, emergency, templates, cities             */
/* ---------------------------------------------------------------- */

.ms-form-card {
    padding: 1.25rem 1rem;
    border: 1px solid var(--ms-line);
    background: var(--ms-white);
}
.ms-section--mist .ms-form-card {
    border-color: var(--ms-white);
}
.ms-section .ms-form-card {
    margin-block-start: 2rem;
}
@media (min-width: 980px) {
    .ms-form-card {
        padding: 2.25rem;
    }
}

/* "Warum schriftlich?": accordion on phones, a quiet list with a small heading on desktop. */
.ms-why-point {
    font-size: 1rem;
    color: var(--ms-muted);
}
.ms-why-point strong {
    color: var(--ms-navy);
}
@media (min-width: 980px) {
    .ms-section details.ms-why {
        border: 0;
    }
    .ms-section details.ms-why > summary {
        min-height: 0;
        padding: 0 0 0.75rem;
        border-bottom: 2px solid var(--ms-navy);
        font-family: var(--ms-font-display);
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .ms-section details.ms-why > .ms-why-point {
        margin: 0;
        padding: 1rem 0;
        border-bottom: 1px solid var(--ms-line);
    }
    .ms-section details.ms-why > :last-child:not(summary) {
        margin-bottom: 0;
    }
}

/* Emergency notice: small on purpose (feedback round 1), the only tel: link on the tenant page. */
.ms-section .ms-emergency-note {
    margin-block-start: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--ms-navy);
    background: var(--ms-mist);
    font-size: 1rem;
}
.ms-section .ms-emergency-note h3 {
    font-size: 1.2rem;
    padding-left: 1.9rem;
    position: relative;
}
.ms-section .ms-emergency-note h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.35rem;
    height: 1.35rem;
    translate: 0 -55%;
    background: var(--ms-navy);
    -webkit-mask: var(--ms-icon-alert) center / contain no-repeat;
    mask: var(--ms-icon-alert) center / contain no-repeat;
}
.ms-section .ms-emergency-note > * + * {
    margin-block-start: 0.6rem;
}
.ms-emergency-note a {
    font-weight: 600;
}
.ms-emergency-safety {
    padding-top: 0.6rem;
    border-top: 1px solid var(--ms-line);
}

/* Templates: the downloads as a slim list. */
.ms-section .ms-downloads h3 {
    font-size: 1.375rem;
}
.ms-section .ms-downloads > h3 + * {
    margin-block-start: 1rem;
}
.ms-section .ms-downloads > .ms-note {
    margin-block-start: 1.25rem;
}
/* City links: rows that open per city on phones, quiet columns on desktop. */
.ms-city-list {
    border-top: 2px solid var(--ms-navy);
}
.ms-section .ms-city-list > * {
    margin-block-start: 0;
}
.ms-section details.ms-city > summary {
    font-family: var(--ms-font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ms-city-links {
    padding: 0;
    list-style: none;
}
.ms-section .ms-city-links li {
    margin: 0;
}
.ms-section .ms-city-links a:not(.wp-block-button__link) {
    display: flex;
    align-items: center;
    min-height: 44px;
}
.ms-section a[target="_blank"].ms-ext::after,
.ms-section .ms-city-links a[target="_blank"]::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (öffnet in neuem Tab)";
    font-size: 0.85em;
}
.ms-section .ms-cities .ms-wrap > .ms-note {
    margin-block-start: 1.5rem;
}
@media (min-width: 980px) {
    .ms-city-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }
    .ms-section details.ms-city {
        padding-bottom: 0.5rem;
    }
    .ms-section details.ms-city > summary {
        min-height: 0;
        padding: 1.25rem 0 0.25rem;
    }
    .ms-section details.ms-city > :not(summary) {
        margin-inline: 0;
    }
    .ms-section .ms-city-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1.25rem;
    }
    .ms-section .ms-city-links a:not(.wp-block-button__link) {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------- */
/* Owner page: claim, quote, services                                 */
/* ---------------------------------------------------------------- */

.ms-section .ms-quote,
.ms-section .wp-block-quote.ms-quote {
    margin: 0;
    padding: 0 0 0 1.25rem;
    border: 0;
    border-left: 3px solid var(--ms-navy);
    background: none;
    font-family: var(--ms-font-body);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ms-navy);
    quotes: none;
}
.ms-section .ms-quote p {
    font-size: inherit;
    color: inherit;
}
.ms-section .ms-claim-text > p {
    color: var(--ms-muted);
}
.ms-section .ms-references {
    margin-block-start: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ms-line);
}
.ms-section .ms-references > * + * {
    margin-block-start: 0.5rem;
}
.ms-section .ms-references p:not(.ms-textlink) {
    color: var(--ms-muted);
}
.ms-section .ms-scope-line {
    font-weight: 600;
    color: var(--ms-ink);
}

/* Services as rows: text left, details right, separated by lines. */
.ms-service-list {
    border-top: 2px solid var(--ms-navy);
}
.ms-section .ms-service-list > * {
    margin-block-start: 0;
}
.ms-service {
    display: grid;
    gap: 1rem;
    padding-block: 2rem;
    border-bottom: 1px solid var(--ms-line);
}
.ms-section .ms-service > * {
    margin-block-start: 0;
}
.ms-section .ms-service-text > p {
    color: var(--ms-muted);
}
.ms-section .ms-service-details {
    border-top: 1px solid var(--ms-line);
}
.ms-detail-list {
    padding-left: 1.2em;
    font-size: 1rem;
}
.ms-section .ms-detail-list li + li {
    margin-block-start: 0.5rem;
}
.ms-section .ms-service-list + .ms-note {
    margin-block-start: 1.5rem;
}
@media (min-width: 980px) {
    .ms-service {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 6vw, 5rem);
        padding-block: 2.5rem;
    }
    .ms-section .ms-service-details {
        border-top: 0;
    }
}

/* ---------------------------------------------------------------- */
/* Contact page                                                       */
/* ---------------------------------------------------------------- */

.ms-contact-card {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--ms-line);
    background: var(--ms-white);
}
.ms-section .ms-contact-card > * + * {
    margin-block-start: 0.85rem;
}
.ms-contact-name {
    font: 600 1.35rem/1.2 var(--ms-font-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ms-navy);
}
.ms-section .ms-contact-name + .ms-contact-address {
    margin-block-start: 0.35rem;
}
.ms-contact-list {
    padding: 0;
    list-style: none;
}
.ms-section .ms-contact-list li {
    margin: 0;
}
.ms-section .ms-contact-list a:not(.wp-block-button__link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.ms-contact-emergency {
    padding-left: 0.9rem;
    border-left: 3px solid var(--ms-navy);
}
.ms-map-slot img {
    border: 1px solid var(--ms-line);
}
.ms-section .ms-contact-card .ms-note {
    padding-top: 1rem;
    border-top: 1px solid var(--ms-line);
}
.ms-section .ms-persons > * + * {
    margin-block-start: 1rem;
}
.ms-section .ms-persons .ms-heading-small {
    font-size: 1.375rem;
}
.ms-section .ms-persons .ms-person + .ms-person {
    margin-block-start: 1rem;
}
.ms-section .ms-persons .ms-note {
    margin-block-start: 1.5rem;
}
@media (min-width: 980px) {
    .ms-contact-card {
        padding: 2.25rem;
    }
}

/* Trades: accordion on phones, a plain block with a heading on desktop. */
@media (min-width: 980px) {
    @supports selector(::details-content) {
        .ms-section details.ms-trades-details {
            border: 0;
        }
        .ms-section details.ms-trades-details > summary {
            padding: 0 0 0.5rem;
            font-family: var(--ms-font-display);
            font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
            font-weight: 600;
            line-height: 1.05;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }
        .ms-section details.ms-trades-details > :not(summary) {
            max-width: 40rem;
            margin: 0.75rem 0 0;
            color: var(--ms-muted);
        }
    }
}

/* ---------------------------------------------------------------- */
/* Listings (FlowFact) and the rating component                       */
/* ---------------------------------------------------------------- */

.ms-section.ms-listing {
    padding-block: clamp(2.5rem, 5vw, 4rem) var(--ms-section-y);
}

/* Empty listing (idea 10, Assets::flowfact_empty_text): a short message with phone and form instead of "0 results". */
.ms-section .ms-empty-state {
    max-width: 40rem;
    padding: 1.25rem 1.4rem;
    border-left: 4px solid var(--ms-navy);
    background: var(--ms-mist);
    color: var(--ms-ink);
    text-align: start;
}
.ms-section .ms-empty-state > p {
    margin: 0;
}
.ms-section .ms-empty-state > * + * {
    margin-block-start: 0.6rem;
}
.ms-section .ms-empty-state__title {
    font-family: var(--ms-font-display);
    font-size: 1.25rem;
    font-weight: 500;
}
.ms-section .ms-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
}
.ms-section .ms-empty-state a {
    font-weight: 600;
}

/* Review link as a standalone paragraph ([moselewski_rating]), kept for later use. */
.ms-section .ms-rating {
    margin-block-start: 1.75rem;
}
.ms-section a[target="_blank"].ms-rating-link::after {
    content: "\00a0\2197";
    content: "\00a0\2197" / " (öffnet in neuem Tab)";
    font-size: 0.85em;
}

/* ---------------------------------------------------------------- */
/* Motion                                                             */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ms-section .ms-tasks a,
    .ms-section .ms-textlink a::after,
    .ms-section details.wp-block-details > summary::after {
        transition: none !important;
    }
}

/* A form card that is itself a column of a split starts flush with the heading column. */
.ms-section .ms-split > .ms-form-card {
    margin-block-start: 0;
}

/* ---------------------------------------------------------------- */
/* Report form: audience first (client feedback 2026-10-31)           */
/* ---------------------------------------------------------------- */

.ms-form-submit {
    display: grid;
    gap: 20px;
}
.ms-form-submit > p {
    margin: 0;
}
@media (min-width: 980px) {
    /* Five audiences: three tiles above two wider ones, so both rows end flush. */
    .ms-form .ms-audience-choice .wpcf7-radio {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .ms-form .ms-audience-choice .wpcf7-list-item {
        grid-column: span 2;
    }
    .ms-form .ms-audience-choice .wpcf7-list-item:nth-child(n + 4) {
        grid-column: span 3;
    }
}
@media (min-width: 560px) and (max-width: 979px) {
    .ms-form .ms-audience-choice .wpcf7-list-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}
.ms-form .wpcf7-list-item[hidden] {
    display: none !important;
}

/* Formulare und Bescheinigungen: one small heading per life situation above its list. */
.ms-section .ms-situations > .ms-situation {
    margin-block: 2.25rem 0.75rem;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ms-section .ms-situations > .ms-situation:first-child {
    margin-block-start: 0;
}
.ms-section .ms-situations > .ms-situation + .ms-tasks {
    margin-block-start: 0;
}
.ms-section .ms-situations > .ms-note {
    margin-block-start: 1.5rem;
}
/* Applicant note under the rental listing. */
.ms-section .ms-applicant-note {
    margin-block-start: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ms-line);
    color: var(--ms-muted);
}
.ms-section .ms-applicant-note + .ms-textlink {
    margin-block-start: 0.25rem;
}

/* ---------------------------------------------------------------- */
/* Report form: implied audience (client feedback round 5)            */
/* ---------------------------------------------------------------- */

/* One quiet line instead of "Wer sind Sie?", with a text button that reveals the question again. */
.ms-form .ms-audience-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.75rem;
    margin: 0;
    color: var(--ms-ink);
    font-size: 0.95rem;
}
.ms-form .ms-text-button {
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ms-navy);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}
.ms-form .ms-text-button:hover {
    text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------- */
/* Relaunch round 6 (concept/ia-2026-10-31.md)                        */
/* ---------------------------------------------------------------- */

/*
 * Start page hero: a honeycomb of four hexagons without overlap (client decision 2026-10-31, option 1 of
 * hero-hex-options.html). Three light cells hold a sketch centred at 78 % with a margin, so no line touches
 * an edge, the third cell stays dark and empty. The right column is shifted down by about half a cell.
 */
.ms-section .ms-hero-art.ms-hero-art--comb {
    /*
     * Box of 1 : 1.417. Cells are 48 % wide (h = 1.155 x w = 55.44 % of the width), 4 % column gap,
     * 2 % row gap, right column shifted down by 52 % of a cell height. Positions below are those
     * values divided by the box height (141.7 % of the width), so no cell can touch another.
     */
    position: relative;
    width: min(74%, 16rem);
    aspect-ratio: 1 / 1.417;
    margin-inline: auto 0;
}
.ms-hero-art.ms-hero-art--comb .ms-sketch {
    position: absolute;
    inset: auto;
    display: grid;
    place-items: center;
    width: 48%;
    height: 39.12%;
    aspect-ratio: auto;
    background: var(--ms-mist);
}
.ms-hero-art.ms-hero-art--comb .ms-sketch:nth-child(1) {
    top: 0;
    left: 0;
}
.ms-hero-art.ms-hero-art--comb .ms-sketch:nth-child(2) {
    top: 20.35%;
    left: 52%;
}
.ms-hero-art.ms-hero-art--comb .ms-sketch:nth-child(3) {
    top: 40.54%;
    left: 0;
}
.ms-hero-art.ms-hero-art--comb .ms-sketch:nth-child(4) {
    top: 60.88%;
    left: 52%;
}
.ms-hero-art.ms-hero-art--comb .ms-sketch.ms-sketch--blank {
    background: #26304a;
}
.ms-image-slot.ms-hero-art--comb .ms-sketch .ms-sketch-img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}
/* The street drawing is taller, its lower corners sit closest to the hexagon's slanted edges. */
.ms-image-slot.ms-hero-art--comb .ms-sketch--town-street-framed .ms-sketch-img {
    width: 72%;
    height: 72%;
}
@media (min-width: 980px) {
    .ms-section .ms-hero-art.ms-hero-art--comb {
        width: 100%;
        max-width: 24rem;
        aspect-ratio: 1 / 1.417;
    }
}

/* More task icons for "Schnell erledigt". */
.ms-icon-alert {
    --ms-icon: var(--ms-icon-alert);
}
.ms-icon-chat {
    --ms-icon: var(--ms-icon-chat);
}

/* Two text links in one line (start page, "Miet- und Kaufinteressenten"). */
.ms-section .ms-textlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

/* Tenant hero: jump line instead of buttons, every link at least 44px high (concept 4.2). */
.ms-section .ms-jumpline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin-block-start: 1.5rem;
}
.ms-jumpline a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--ms-white);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}
.ms-jumpline a:hover {
    text-decoration-thickness: 2px;
}

/* Translation hint as the first line of the tenant form section. */
.ms-section .ms-report .ms-translate-note {
    margin-block-start: 0.75rem;
    font-size: 1rem;
    color: var(--ms-muted);
}
/* The emergency notice now stands before the form on every width. */
.ms-section .ms-report-main .ms-emergency-note {
    margin-block-start: 1.75rem;
}
/* "Lieber per E-Mail?" line beside the tenant form and in the owner form section. */
.ms-section .ms-email-line {
    margin-block-start: 1.5rem;
    font-size: 1rem;
    color: var(--ms-muted);
}
.ms-email-line a {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Owner hero: kicker and the scope line. */
.ms-hero .ms-eyebrow + .ms-hero-title {
    margin-block-start: 0.75rem;
}
.ms-hero .ms-lead.ms-scope-line {
    color: var(--ms-white);
    font-weight: 600;
}

/* Makler line on the contact card: collapsed on phones, plain from 980px. */
.ms-section .ms-contact-card details.ms-makler {
    border-top: 1px solid var(--ms-line);
}
.ms-section .ms-contact-card details.ms-makler > summary {
    font-size: 1rem;
}
.ms-section .ms-contact-card details.ms-makler .ms-note {
    padding-top: 0;
    border-top: 0;
}
@media (min-width: 980px) {
    .ms-section .ms-contact-card details.ms-makler > summary {
        min-height: 0;
        padding: 1rem 0 0.25rem;
        font-weight: 600;
    }
}

/* FlowFact detail page: features that a flat lacks are printed at 40 % opacity (contrast 2.3:1). Muted text
   keeps the "not available" look at 6:1, the cross icon still marks them. */
[class*="FFestateview-default-details"] .nein {
    opacity: 1;
    color: var(--ms-muted);
}
/* Workflow review WF-13: "Balkon vorhanden ✕" read as the opposite, aloud and at a glance. Missing features are
   hidden, as in the Eckdaten, and an equipment block that lists nothing else disappears with its heading. */
.FFestateview-default-details-content-equipments span.nein {
    display: none;
}
.FFestateview-default-details-content-description:has(.FFestateview-default-details-content-equipments):not(
        :has(.FFestateview-default-details-content-equipments span:not(.nein))
    ) {
    display: none;
}

/* ---------------------------------------------------------------- */
/* Relaunch round 7 (workflow review loop 1, English tenant page)     */
/* ---------------------------------------------------------------- */

/* WF-22: sentences that are only true once the form script runs. */
.ms-form:not(.ms-form--ready) .ms-js-only {
    display: none;
}

/* WF-4: the listing an enquiry came from, one quiet line above the fields. */
.ms-form .ms-listing {
    margin: 0;
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid var(--ms-navy, #1b2437);
    background: var(--ms-mist);
    font-weight: 600;
}

/* WF-28: link for flat seekers under the tenant hero lead. */
.ms-hero .ms-lead-link {
    margin-block-start: 0.75rem;
    color: var(--ms-white);
}
.ms-hero .ms-lead-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ms-white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* Language switch beside the translation hint (/mieter/ and /en/tenants/). */
.ms-section .ms-language-switch {
    margin-block-start: 0.25rem;
    font-size: 1rem;
}
.ms-language-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

/* Subpage heroes use the start page honeycomb (client 2026-10-31: clipped sketches gone), smaller, so the
   hero keeps about the height of the former two-hexagon composition. Desktop only, like every hero sketch. */
@media (min-width: 980px) {
    .ms-section .ms-hero-art.ms-hero-art--comb.ms-hero-art--compact {
        max-width: 19rem;
    }
}


/* ---------------------------------------------------------------- */
/* Large text (workflow review WF2-3). At 320px with text at 200 %, long words, German compounds  */
/* and e-mail addresses set the minimum width of grid and flex items, the items grew wider than   */
/* the screen and the page clipped them (emergency note, Kontakt card, start hero, bottom bar).   */
/* Words now break where they must, and these items may shrink below their longest word. At 100 % */
/* nothing overflows, so nothing breaks and the layout stays as it was.                           */
/* ---------------------------------------------------------------- */
.ms-section :is(.ms-hero-inner, .ms-split, .ms-close-inner, .ms-audiences, .ms-audience, .ms-grid, .ms-service-list, .ms-service, .ms-form, .ms-form-submit, .ms-field-row, .ms-trust, .ms-person, .ms-actions, .ms-textlinks, .ms-jumpline, .is-layout-flex, .is-layout-grid) > *,
.ms-section .ms-tasks a > *,
.ms-site-footer__inner > *,
.ms-mobile-bar > *,
.ms-mobile-bar__link > * {
    min-width: 0;
}
.ms-section :is(p, li, dd, dt, label, legend, summary, small, figcaption, blockquote, td, th, h1, h2, h3, h4, h5, h6, a),
.ms-mobile-bar__link span,
.ms-site-footer :is(p, li, a) {
    overflow-wrap: anywhere;
}
.ms-section .wp-block-button,
.ms-section .wp-block-button__link {
    max-width: 100%;
}
.ms-form input[type="submit"] {
    max-width: 100%;
    white-space: normal;
}
.ms-mobile-bar {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
/* Hyphenation only on the narrowest phones, where words otherwise break without a hyphen. The H1 */
/* keeps hyphens: manual (an automatic split of "Hausverwaltung" was rejected, see .ms-hero-title). */
@media (max-width: 359.98px) {
    .ms-section :is(h2, h3, p, label, li) {
        hyphens: auto;
    }
}