@media screen and (max-width: 849px) {
    .fw-site .fw-aufmass-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: .1rem;
        justify-items: start;
    }

    .fw-site .fw-aufmass-heading > a.fw-aufmass-download {
        margin: 0;
        text-align: start;
        white-space: normal;
    }

    .fw-site .fw-aufmass-download > .icon {
        flex: none;
    }
}
/* Keep the photo clear and present the same theme links at every width. */
@media (max-width: 650px) {
    .fw-site .fw-mood-hero {
        grid-template-rows: auto auto auto;
        min-block-size: 0;
    }

    .fw-site .fw-mood-hero > .fw-mood-media {
        grid-area: 1 / 1;
        min-block-size: clamp(242px, 81vw, 480px);
    }

    .fw-site .fw-mood-hero > .fw-mood-credit {
        position: relative;
        grid-area: 1 / 1;
        align-self: end;
        justify-self: end;
        inset: auto;
        margin: 0 8px 8px;
    }

    .fw-site .fw-mood-hero > .fw-nav {
        grid-area: 2 / 1;
        display: block;
        inline-size: 100%;
        margin: 0;
        padding: 4px;
        border: 0;
        border-block-end: 1px solid var(--fw-topic-line, var(--fw-line));
        border-radius: 0;
        box-shadow: none;
        background: #fff;
    }

    .fw-site .fw-nav > .fw-r41-nav-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 3px;
        padding: 0;
    }

    .fw-site .fw-r41-nav-links .fw-nav-link {
        justify-content: center;
        min-inline-size: 0;
        min-block-size: 44px;
        padding: 6px;
        border-block-end: 3px solid transparent;
        border-radius: 3px;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .fw-site .fw-r41-nav-links .fw-nav-icon { display: none; }

    .fw-site .fw-r41-nav-links .fw-nav-link[aria-current="page"] {
        border-block-end-color: currentColor;
        font-weight: 700;
    }

    .fw-site .fw-r41-nav-links .fw-nav-link:focus-visible {
        outline-offset: -3px;
    }

    .fw-site .fw-mood-hero > .fw-mood-inner {
        grid-area: 3 / 1;
        display: block;
        inline-size: 100%;
        padding: 0;
    }

    .fw-site .fw-mood-inner > .fw-hero-content {
        inline-size: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .fw-site .fw-mood-hero .fw-hero-content .fw-btn {
        font-size: 15px;
    }

    .fw-site .fw-mood-hero-level {
        grid-template-rows: auto auto auto auto;
    }

    .fw-site .fw-mood-hero-level > .fw-mood-media {
        min-block-size: 0;
        padding-block-start: 14px;
        padding-block-end: 8px;
    }

    .fw-site .fw-mood-hero-level .fw-ux-level-visual img {
        block-size: clamp(112px, 34vw, 195px);
        padding: 8px;
    }

    .fw-site .fw-mood-hero-level .fw-ux-level-visual figcaption {
        padding: 8px;
        font-size: 14px;
    }

    .fw-site .fw-mood-hero-level > .fw-mood-credit { grid-area: 2 / 1; }
    .fw-site .fw-mood-hero-level > .fw-nav { grid-area: 3 / 1; }
    .fw-site .fw-mood-hero-level > .fw-mood-inner { grid-area: 4 / 1; }
}

@media (max-width: 1099px) {
    .fw-site #projekte .fw-project-grid .fw-project-link {
        display: flex;
        flex-direction: column;
    }

    .fw-site #projekte .fw-project-grid .fw-project-media {
        min-block-size: 0;
        aspect-ratio: 16 / 10;
    }

    .fw-site #projekte .fw-project-grid .fw-project-media .fw-project-image {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        max-block-size: none;
        object-fit: cover;
        object-position: center 46%;
    }

    .fw-site #projekte .fw-project-grid .fw-project-content {
        flex: 1;
        padding: clamp(14px, 3.5vw, 20px);
    }

    .fw-site #projekte .fw-project-grid .fw-project-content h3 {
        color: var(--fw-project-accent, var(--fw-ink));
        font-size: clamp(20px, 4.8vw, 24px);
    }

    .fw-site #projekte .fw-project-grid .fw-project-content h3::after {
        content: "";
        flex: 0 0 8px;
        block-size: 8px;
        margin-inline-start: auto;
        border-block-start: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
        transform: rotate(45deg);
    }
}

@media (min-width: 560px) and (max-width: 1099px) {
    .fw-site #projekte.fw-hub-topics .fw-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 651px) and (max-width: 999px) {
    .fw-site .fw-mood-hero-hub {
        min-block-size: clamp(445px, 54svh, 535px);
    }

    .fw-site .fw-mood-hero-hub > .fw-mood-media > picture > img {
        object-position: 64% center;
    }

    .fw-site .fw-mood-hero > .fw-nav > .fw-r41-nav-links {
        justify-content: space-between;
        inline-size: 100%;
    }
}

@media (forced-colors: active) {
    .fw-site .fw-r41-nav-links .fw-nav-link[aria-current="page"] {
        border-block-end-color: Highlight;
    }
}
@media screen and (max-width: 1024px) {
    .fw-site .fw-process-steps:not([hidden]) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.75rem), 1fr));
    }

    .fw-site .fw-hotspot-controls:not([hidden]) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 182px), 1fr));
    }

    .fw-site :is(.fw-process-steps, .fw-hotspot-controls) > button {
        overflow-wrap: normal;
        word-break: normal;
        white-space: normal;
    }

    .fw-site .fw-hotspot-controls > button {
        padding-inline: .6em;
    }

    .fw-site .fw-hotspot-controls > button[aria-pressed="true"]::after {
        content: none;
    }
}

@media screen and (min-width: 760px) and (max-width: 1024px) {
    .fw-site .fw-process-steps:not([hidden]):has(> button:nth-child(5):last-child) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.75rem), 1fr));
    }
}

@media screen and (max-width: 600px) {
    .fw-site .fw-advisor [data-fw-question] > .fw-actions {
        gap: 6px;
    }

    .fw-site .fw-advisor [data-fw-question] > .fw-actions > .fw-btn {
        padding-inline: .6em;
        text-align: center;
        white-space: normal;
    }

    .fw-site .fw-advisor [data-fw-question] > .fw-actions:has(> :is([data-fw-back], [data-fw-advisor-cancel]):not([hidden]))
        > .fw-btn {
        flex: 1 1 min-content;
        min-inline-size: min-content;
    }

    .fw-site :is(.fw-process-steps, .fw-hotspot-controls):not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .fw-site :is(.fw-process-steps, .fw-hotspot-controls) > button {
        font-size: .925rem;
        font-weight: 600;
        padding: .45em .55em;
    }

    .fw-site .fw-process-steps > button > span:first-child {
        display: grid;
        place-items: center;
        inline-size: 1.6em;
        block-size: 1.6em;
        border-radius: 50%;
        background: var(--fw-cream);
    }

    .fw-site .fw-process-steps > button[aria-pressed="true"] > span:first-child {
        color: var(--fw-red-dark);
        background: #fff;
    }

}

@media screen and (max-width: 360px) {
    .fw-site :is(.fw-process-steps, .fw-hotspot-controls) > button {
        display: grid;
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: .25em;
    }
}
@media screen {
    .fw-site :is(a, button).fw-link:not(.fw-btn):has(> .fw-ux-action-icon:first-child) {
        column-gap: 0;
    }

    .fw-site :is(a, button).fw-link:not(.fw-btn) > .fw-ux-action-icon:first-child {
        margin-inline-end: max(6px, .42em);
    }

    .fw-site a[target="_blank"] .fw-product-new-tab {
        margin-inline-start: max(4px, .27em);
    }

    .fw-site a[href][target="_blank"]:not([download], :has(.fw-product-new-tab))::after {
        content: "\f2d2" / "";
        display: inline-block;
        margin-inline-start: max(6px, .45em);
        font: var(--icon-font-regular, normal 400 1em/1 "Font Awesome 6 Pro");
        font-size: .86em;
        text-decoration: none;
    }

    .fw-site [data-fw-project] .fw-project-row[data-fw-row-kind="product"].is-done {
        background: var(--fw-white, #fff);
    }

    .fw-site [data-fw-project] .fw-project-rows:has(> [data-fw-row-kind="product"]) {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
    }

    .fw-site [data-fw-project] [data-fw-row-kind="product"] > .fw-ux-row-actions {
        row-gap: 3px;
        padding-block-start: 8px;
    }

    .fw-site [data-fw-project] [data-fw-row-kind="product"] .fw-ux-row-quantity {
        display: flex;
        justify-content: space-between;
        inline-size: 100%;
        max-inline-size: 100%;
        min-block-size: 44px;
        margin-block: 0;
        font-weight: 600;
    }

    .fw-site [data-fw-project] .fw-ux-row-quantity > input[data-fw-project-quantity] {
        flex: 0 1 5.2em;
        min-inline-size: 0;
        min-block-size: 44px;
        margin: 0;
        font-size: max(16px, 1em);
    }

    .fw-site [data-fw-project] .fw-project-buy {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        inline-size: 100%;
        gap: 5px;
        margin-block: 0 2px;
    }

    .fw-site [data-fw-project] [data-fw-row-kind="product"] .fw-project-buy-link {
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        column-gap: max(7px, .5em);
        inline-size: 100%;
        padding-inline: .65em;
        font-size: 15px;
        white-space: normal;
    }

    .fw-site [data-fw-project] [data-fw-row-kind="product"] .fw-project-buy-link.fw-link {
        justify-content: start;
        padding-inline: 0;
    }

    .fw-site :is(.fw-exterior-product, .fw-level-shopping-products li) a[data-fw-product] {
        display: inline-block;
        align-content: center;
        min-block-size: 44px;
    }

    .fw-site [data-fw-project] .fw-project-stage > .fw-ux-actions {
        flex: 0 1 auto;
        margin-inline-start: 0;
    }

    .fw-site .fw-r41-outcome .fw-project-stage > .fw-project-counts:not([hidden]) {
        flex: 0 1 auto;
    }

    @media (max-width: 720px) {
        .fw-site [data-fw-project] .fw-project-stage > .fw-ux-actions {
            flex: 1 1 100%;
            justify-content: start;
        }

        .fw-site [data-fw-project] .fw-project-stage > .fw-ux-actions > :is(.fw-project-secondary, [data-fw-project-transfer]) {
            flex: 1 1 max-content;
            font-size: max(14px, .91em);
        }

        .fw-site [data-fw-project] .fw-project-stage > .fw-ux-actions > .fw-project-primary {
            flex: 1 1 100%;
            font-size: max(15px, 1em);
        }
    }
}