/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*
 * Mila — Gestaltung der nativen Impreza-Inhaltsbereiche
 * Stand: 2026-09-08
 *
 * Schriftfamilien (einschließlich Überschriften), Hero-Szene und globale
 * Theme-Farben werden ausschließlich in Impreza gepflegt.
 * Diese Regeln ergänzen ausschließlich die Mila-Komponenten nach der Hero-Szene.
 * Reihenfolge: gemeinsame Gestaltung, Farbschemata, native Builder-Elemente,
 * responsive Anpassungen und gezielte SVG-/Tab-Zustände.
 * Die Kaskadenreihenfolge ist bewusst erhalten; keine CSS-Abhängigkeit von Rows.
 */

/* All content styles are scoped; the authored hero is left intact. */
/* ===== 01 · Markenfarben, Typografie und gemeinsame Elemente ===== */
.mila-story {
    --mila-ink: var(--color-content-text,#edf7f6);
    --mila-muted: var(--color-content-text,#edf7f6);
    --mila-paper: var(--color-content-bg,#03191c);
    --mila-teal: var(--color-content-primary,#00bfa5);
    --mila-line: color-mix(in srgb,var(--color-content-border,#dadfe0) 25%,transparent);
    --mila-heading: var(--color-content-heading,#00897b);
    --mila-surface: var(--color-content-bg,#03191c);
    --mila-secondary: var(--color-content-secondary-grad,linear-gradient(325deg,#004d7a 0%,#008793 33%,#209196 67%,#005878 100%));
    background: var(--mila-paper);
    color: var(--mila-ink);

    font-size: 17px;
    line-height: 1.7;
    text-align: left;
    overflow: clip;
}

.mila-story * {
    box-sizing: border-box;
}

.mila-story h2,.mila-story h3,.mila-story p,.mila-story figure {
    margin: 0;
}

.mila-story h2,.mila-story h3 {

    color: inherit;
    font-weight: 500;
    letter-spacing: -.045em;
}

.mila-story h2 {
    font-size: clamp(34px,3.3vw,62px);
    line-height: 1.12;
}

.mila-story h3 {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.025em;
}

.mila-story h2 em {
    font-style: normal;
    color: var(--mila-heading);
}

.mila-story p {
    color: var(--mila-muted);
}

.mila-story a {
    color: inherit;
    text-decoration: none;
}

.mila-story a:focus-visible,.mila-story button:focus-visible {
    outline: 3px solid var(--color-content-link,#00bfa5);
    outline-offset: 5px;
}

.mila-story a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.mila-wrap {
    width: min(1320px,calc(100% - 112px));
    margin-inline: auto;
}

.mila-section {
    padding: 116px 0;
    scroll-margin-top: 110px;
}

.mila-story .mila-eyebrow {
    font-size: 11px;
    line-height: 1.5;
    font-weight: 650;
    letter-spacing: .16em;
    margin-bottom: 24px;
    color: inherit;
}

.mila-story .mila-lead {
    font-size: 23px;
    line-height: 1.55;
    color: inherit;
}

.mila-section-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 100px;
    align-items: end;
    margin-bottom: 54px;
}

.mila-section-head>p {
    max-width: 400px;
    justify-self: end;
    padding-bottom: 5px;
}

.mila-status {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 10px;
    letter-spacing: .15em;
    font-weight: 600;
}

.mila-status>span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mila-teal);
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--mila-teal) 12%,transparent);
    flex: none;
}

/* ===== 02 · Übergang von der Hero-Szene und Einführung ===== */
.mila-intro {
    padding: 65px 0 0;
    background: var(--color-content-bg,#03191c);
    color: var(--color-content-text,#edf7f6);
    scroll-margin-top: 100px;
}

.mila-intro .mila-status {
    color: var(--color-content-faded,#7f8a88);
}

.mila-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: center;
    padding: 66px 0 80px;
}

.mila-intro h2 {
    font-size: clamp(38px,3.7vw,69px);
    letter-spacing: -.05em;
}

.mila-intro h2 em {
    color: var(--mila-teal);
}

.mila-intro-copy p {
    color: var(--mila-muted);
    margin-bottom: 24px;
}

.mila-story .mila-text-link {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    font-size: 14px;
    color: inherit;
    border-bottom: 1px solid var(--mila-line);
    padding-bottom: 8px;
}

.mila-text-link span {
    font-size: 23px;
    color: var(--mila-teal);
}

.mila-context {
    border-top: 1px solid var(--mila-line);
    display: grid;
    grid-template-columns: 1fr 1.45fr auto;
    gap: 40px;
    align-items: center;
    padding: 27px 0;
}

.mila-context>span {
    font-size: 10px;
    letter-spacing: .12em;
    max-width: 210px;
}

.mila-context p {
    color: var(--mila-muted);
    font-size: 13px;
    line-height: 1.6;
    max-width: 450px;
}

.mila-context a {
    font-size: 13px;
    white-space: nowrap;
}

.mila-context a span {
    margin-left: 14px;
    color: var(--mila-teal);
}

/* ===== 03 · Atmosphärische Wohnszene ===== */
.mila-moment {
    height: 650px;
    min-height: 500px;
    position: relative;
    color: #fff;
    display: flex;
    align-items: flex-end;
}

.mila-moment>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 57%;
}

.mila-moment-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(3,25,28,.75),rgba(3,25,28,.24) 55%,transparent),linear-gradient(0deg,rgba(3,25,28,.35),transparent 50%);
}

.mila-moment-copy {
    position: relative;
    padding-bottom: 80px;
}

.mila-moment-copy h2 {
    font-size: clamp(40px,4.2vw,76px);
    margin-bottom: 23px;
    max-width: 650px;
}

.mila-moment-copy p {
    color: #fff;
    font-size: 18px;
    line-height: 1.7;
    max-width: 460px;
}

.mila-story .mila-light-link {
    display: inline-block;
    margin-top: 25px;
    font-size: 13px;
    border-bottom: 1px solid color-mix(in srgb,var(--color-content-text,#edf7f6) 50%,transparent);
    padding-bottom: 7px;
}

.mila-light-link span {
    margin-left: 35px;
}

.mila-photo-note {
    position: absolute;
    right: 25px;
    bottom: 20px;
    font-size: 10px;
    color: var(--color-content-text,#edf7f6);
    letter-spacing: .05em;
}

/* ===== 04 · Alltagsszenarien und interaktive Wohnungsgrafik ===== */
.mila-scenario-switch {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.mila-story .mila-scenario-switch button {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 14px;
    line-height: 1.4;
    padding: 15px 23px;
    background: transparent;
    color: var(--mila-ink);
    border: 1px solid var(--mila-line);
    border-radius: 99px;
    cursor: pointer;
    box-shadow: none;
    transition: background .2s,color .2s;
}

.mila-scenario-switch button span {
    font-size: 10px;
    margin-right: 16px;
    opacity: .65;
}

.mila-story .mila-scenario-switch button[aria-pressed=true] {
    background: var(--mila-ink);
    color: #fff;
    border-color: var(--mila-ink);
}

.mila-story .mila-scenario-switch button:hover {
    border-color: var(--color-content-heading,#00897b);
}

.mila-demo {
    display: grid;
    grid-template-columns: minmax(0,1.75fr) minmax(0,1fr);
    background: var(--color-content-bg-alt,#f2f4f5);
    border: 1px solid var(--mila-line);
    border-radius: 4px;
    overflow: hidden;
}

.mila-room-figure {
    padding: 27px 24px 0;
    min-width: 0;
}

.mila-diagram-top {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    letter-spacing: .11em;
}

.mila-demo-label {
    border: 1px solid var(--mila-line);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 9px;
    letter-spacing: .03em;
}

.mila-room {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0 6px;
}

.mila-room text {

}

.mila-node circle {
    fill: var(--color-content-text,#edf7f6);
    stroke: var(--color-content-heading,#00897b);
    stroke-width: 2;
}

.mila-node text {
    fill: var(--color-content-bg,#03191c);
    text-anchor: middle;
    font-size: 17px;
    font-weight: 700;
}

.mila-room-key {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    border-top: 1px solid var(--mila-line);
    padding: 21px 0;
}

.mila-room-key>div {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.mila-room-key>div>span {
    border: 1px solid var(--color-content-heading,#00897b);
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    line-height: 18px;
    color: var(--color-content-heading,#00897b);
}

.mila-room-key p {
    font-size: 11px;
    line-height: 1.5;
}

.mila-room-key strong {
    display: block;
    font-weight: 500;
    color: var(--mila-ink);
    font-size: 11px;
}

.mila-explanation {
    background: var(--mila-surface);
    padding: 40px 33px;
}

.mila-explanation h3 {
    font-size: 30px;
    line-height: 1.15;
    margin-bottom: 28px;
}

.mila-story .mila-explanation .mila-eyebrow {
    font-size: 10px;
    color: var(--color-content-heading,#00897b);
    margin-bottom: 14px;
}

.mila-causal {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: mila-causal;
}

.mila-causal li {
    position: relative;
    border-left: 1px solid var(--mila-line);
    padding: 0 0 24px 23px;
    margin: 0 0 0 4px;
}

.mila-causal li:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--color-content-heading,#00897b);
    background: var(--mila-surface);
    left: -4px;
    top: 6px;
}

.mila-causal li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.mila-causal li:last-child:before {
    background: var(--color-content-heading,#00897b);
}

.mila-causal li>span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-content-heading,#00897b);
    margin-bottom: 6px;
}

.mila-causal p {
    font-size: 14px;
    line-height: 1.7;
}

.mila-causal li:last-child p {
    color: var(--mila-ink);
    font-weight: 550;
}

.mila-story .mila-caption {
    font-size: 11px;
    color: var(--mila-muted);
    max-width: 870px;
    margin-top: 20px;
}

.mila-room .mila-sun {
    opacity: 0;
}

.mila-room .mila-light-glow,.mila-room .mila-heat,.mila-room .mila-blinds {
    transition: opacity .45s,transform .45s;
}

.mila-demo[data-scene=sun] .mila-sun {
    opacity: 1;
}

.mila-demo[data-scene=sun] .mila-blinds {
    transform: scaleY(1.35);
    transform-origin: 230px 140px;
}

.mila-demo[data-scene=sun] .mila-light-glow,.mila-demo[data-scene=sun] .mila-lamp-core,.mila-demo[data-scene=sun] .mila-heat {
    opacity: .12;
}

.mila-demo[data-scene=away] .mila-light-glow,.mila-demo[data-scene=away] .mila-lamp-core,.mila-demo[data-scene=away] .mila-heat {
    opacity: .08;
}

.mila-demo[data-scene=away] .mila-blinds {
    opacity: .65;
}

.mila-demo[data-scene=away] .mila-room {
    filter: saturate(.65);
}

.mila-nojs {
    margin-top: 24px;
}

/* ===== 05 · Zusammenspiel und Mila-Zentrale ===== */
.mila-system {
    background: var(--color-content-bg,#03191c);
}

.mila-system-map {
    display: grid;
    grid-template-columns: 1fr 60px 230px 60px 1.1fr;
    align-items: center;
    padding: 35px 20px 55px;
}

.mila-map-label {
    display: block;
    font-size: 9px;
    letter-spacing: .12em;
    margin-bottom: 20px;
}

.mila-inputs>div,.mila-outputs>div {
    padding: 17px 0;
    border-bottom: 1px solid var(--mila-line);
    font-size: 16px;
}

.mila-inputs>div:last-child,.mila-outputs>div:last-child {
    border: 0;
}

.mila-outputs>div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.mila-outputs>div span {
    min-width: 100px;
}

.mila-map-connector {
    height: 2px;
    background: var(--mila-teal);
    position: relative;
    z-index: 1;
}

.mila-map-connector::after,.mila-map-connector--both::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--mila-teal);
    border-right: 2px solid var(--mila-teal);
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    box-sizing: border-box;
}

.mila-map-connector--both::before {
    right: auto;
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

.mila-hub {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: var(--mila-secondary);
    color: var(--color-content-text,#edf7f6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 15px color-mix(in srgb,var(--mila-teal) 8%,transparent),0 0 0 31px color-mix(in srgb,var(--mila-teal) 5%,transparent);
}

.mila-hub>span {
    font-weight: 700;
    font-size: 38px;
    letter-spacing: .035em;
}

.mila-hub p {
    font-size: 12px;
    color: var(--color-content-text,#edf7f6);
    text-align: center;
    line-height: 1.75;
    margin-top: 8px;
}

.mila-system-bottom {
    border-top: 1px solid var(--mila-line);
    padding-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
}

.mila-system-bottom p {
    font-size: 14px;
    max-width: 480px;
}

.mila-system-bottom strong {
    color: var(--mila-ink);
    font-weight: 600;
}

/* ===== 06 · Ressourcen und Wohnqualität ===== */
.mila-resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.mila-resource-image {
    position: relative;
    height: 760px;
    overflow: hidden;
}

.mila-resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
}

.mila-resource-image:after {
    content: '';
    position: absolute;
    inset: 70% 0 0;
    background: linear-gradient(transparent,color-mix(in srgb,var(--color-content-bg,#03191c) 60%,transparent));
}

.mila-resource-image>span {
    position: absolute;
    z-index: 1;
    bottom: 29px;
    left: 30px;
    color: #fff;
    font-size: 10px;
    letter-spacing: .15em;
}

.mila-resources h2 {
    margin-bottom: 24px;
}

.mila-resources-grid>div>p:not(.mila-eyebrow) {
    font-size: 16px;
    max-width: 430px;
}

.mila-resource-list {
    margin-top: 37px;
}

.mila-resource-list article {
    display: flex;
    gap: 25px;
    border-top: 1px solid var(--mila-line);
    padding: 24px 0;
}

.mila-resource-list article>span {
    font-size: 10px;
    color: var(--color-content-heading,#00897b);
    line-height: 2.7;
}

.mila-resource-list h3 {
    font-size: 21px;
    margin-bottom: 8px;
}

.mila-resource-list p {
    font-size: 14px;
    line-height: 1.6;
}

/* ===== 07 · Vertrauen und Zusammenarbeit ===== */
.mila-trust {
    background: var(--color-content-bg,#03191c);
}

.mila-safety-flow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    list-style: none;
    padding: 0;
    margin: 50px 0 32px;
    gap: 45px;
}

.mila-safety-flow li {
    padding-top: 23px;
    border-top: 1px solid var(--mila-line);
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mila-safety-flow li:not(:last-child):after {
    content: '→';
    position: absolute;
    right: -31px;
    top: -19px;
    font-size: 23px;
    color: var(--mila-teal);
}

.mila-step-number {
    font-size: 11px;
    color: var(--mila-teal);
    margin-bottom: 24px;
}

.mila-safety-flow h3 {
    font-size: 25px;
    margin-bottom: 16px;
}

.mila-safety-flow p {
    font-size: 14px;
    margin-bottom: 28px;
    flex: 1;
}

.mila-step-output {
    font-size: 12px;
    color: var(--mila-teal);
    font-weight: 600;
}

.mila-trust-note {
    display: flex;
    gap: 25px;
    align-items: center;
    border-top: 1px solid var(--mila-line);
    padding-top: 27px;
}

.mila-trust-note>span {
    font-size: 40px;
    color: var(--mila-teal);
}

.mila-trust-note p {
    font-size: 13px;
    max-width: 1060px;
}

.mila-trust-note strong {
    font-weight: 600;
    color: var(--mila-ink);
}

/* ===== 08 · Kontakt und Seitenabschluss ===== */
.mila-contact {
    background: var(--color-content-bg,#03191c);
    color: var(--color-content-text,#edf7f6);
    padding-bottom: 45px;
}

.mila-contact>.mila-wrap>.mila-status {
    color: var(--color-content-faded,#7f8a88);
    margin-bottom: 50px;
}

.mila-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 120px;
}

.mila-contact h2 {
    font-size: clamp(38px,3.7vw,65px);
    margin-bottom: 29px;
}

.mila-contact .mila-lead {
    font-size: 22px;
    margin-bottom: 15px;
}

.mila-contact-grid>div>p:not(.mila-lead):not(.mila-eyebrow):not(.mila-email-hint) {
    font-size: 15px;
    color: var(--mila-muted);
    max-width: 500px;
}

.mila-story .mila-button {
    display: inline-flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    background: var(--mila-teal);
    color: var(--color-content-bg,#03191c);
    font-size: 13px;
    font-weight: 600;
    padding: 19px 23px;
    margin-top: 34px;
    border-radius: 3px;
    text-decoration: none;
    line-height: 1.5;
}

.mila-story .mila-button:hover {
    background: var(--color-content-link-hover,#107c94);
}

.mila-button span {
    font-size: 23px;
}

.mila-story .mila-email-hint {
    font-size: 10px;
    color: var(--color-content-faded,#7f8a88);
    margin-top: 13px;
}

.mila-email-hint a {
    text-decoration: underline;
}

.mila-contact-guide {
    border-left: 1px solid var(--mila-line);
    padding: 7px 0 0 43px;
}

.mila-contact-guide .mila-eyebrow {
    color: var(--color-content-faded,#7f8a88);
    font-size: 10px;
}

.mila-contact-guide ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mila-contact-guide li {
    display: flex;
    gap: 23px;
    padding: 20px 0;
    margin: 0;
    border-bottom: 1px solid var(--mila-line);
}

.mila-contact-guide li:last-child {
    border: 0;
}

.mila-contact-guide li>span {
    color: var(--mila-teal);
    font-size: 11px;
    padding-top: 3px;
}

.mila-contact-guide h3 {
    font-size: 19px;
    margin-bottom: 8px;
    letter-spacing: -.02em;
}

.mila-contact-guide p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--mila-muted);
}

.mila-contact-bottom {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-end;
    margin-top: 70px;
    padding-top: 35px;
    border-top: 1px solid var(--mila-line);
}

.mila-contact-bottom p {
    font-size: 11px;
    line-height: 1.8;
    color: var(--color-content-faded,#7f8a88);
    max-width: 640px;
}

.mila-footer-wordmark {
    font-size: 39px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.03em;
}

.mila-footer-wordmark span {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .02em;
    margin-top: 14px;
}

.mila-footer {
    background: var(--color-subfooter-bg,#1d2625);
    color: var(--color-footer-text,#7f8a88);
    padding: 23px 0;
    font-size: 10px;
}

.mila-footer>.mila-wrap {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.mila-footer nav {
    display: flex;
    gap: 25px;
}

/* ===== 09 · Responsive Grundgestaltung ===== */
@media(min-width:1800px) {
    .mila-moment {
        height: 750px;
    }

    .mila-moment>img {
        object-position: center 58%;
    }

}

@media(max-width:1100px) {
    .mila-wrap {
        width: calc(100% - 64px);
    }

    .mila-section {
        padding: 80px 0;
    }

    .mila-section-head {
        gap: 40px;
    }

    .mila-intro-grid {
        gap: 40px;
    }

    .mila-intro h2 {
        font-size: 43px;
    }

    .mila-story .mila-lead {
        font-size: 20px;
    }

    .mila-demo {
        grid-template-columns: 1.35fr 1fr;
    }

    .mila-explanation {
        padding: 30px 24px;
    }

    .mila-room-figure {
        padding: 25px 16px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .mila-room-key {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mila-room-key p {
        display: flex;
        gap: 12px;
    }

    .mila-room-key strong {
        font-size: 11px;
    }

    .mila-system-map {
        grid-template-columns: 1fr 40px 175px 40px 1.15fr;
        padding-inline: 0;
    }

    .mila-hub {
        width: 175px;
        height: 175px;
    }

    .mila-hub>span {
        font-size: 31px;
    }

    .mila-inputs>div,.mila-outputs>div {
        font-size: 13px;
    }

    .mila-outputs>div span {
        min-width: 80px;
    }

    .mila-resources-grid {
        gap: 45px;
    }

    .mila-resource-image {
        height: 690px;
    }

    .mila-contact-grid {
        gap: 55px;
    }

    .mila-contact h2 {
        font-size: 43px;
    }

    .mila-contact-guide {
        padding-left: 28px;
    }

}

@media(max-width:760px) {
    .mila-wrap {
        width: calc(100% - 40px);
    }

    .mila-section {
        padding: 64px 0;
        scroll-margin-top: 75px;
    }

    .mila-story {
        font-size: 15px;
        line-height: 1.7;
    }

    .mila-story h2 {
        font-size: 35px;
    }

    .mila-story .mila-eyebrow {
        font-size: 9px;
        margin-bottom: 18px;
    }

    .mila-status {
        font-size: 8px;
        letter-spacing: .1em;
    }

    .mila-intro {
        padding-top: 36px;
        scroll-margin-top: 70px;
    }

    .mila-intro-grid {
        display: block;
        padding: 35px 0 40px;
    }

    .mila-intro h2 {
        font-size: 42px;
        margin-bottom: 30px;
    }

    .mila-intro-copy p {
        font-size: 15px;
    }

    .mila-intro-copy .mila-lead {
        font-size: 20px;
    }

    .mila-context {
        grid-template-columns: 1fr auto;
        gap: 15px;
        padding: 22px 0;
    }

    .mila-context>span {
        font-size: 8px;
        max-width: none;
        grid-column: 1/-1;
    }

    .mila-context p {
        font-size: 11px;
    }

    .mila-context a {
        font-size: 11px;
    }

    .mila-moment {
        height: 610px;
        min-height: 0;
    }

    .mila-moment>img {
        object-position: 58% center;
    }

    .mila-moment-shade {
        background: linear-gradient(0deg,rgba(3,25,28,.95),rgba(3,25,28,.65) 42%,transparent 85%);
    }

    .mila-moment-copy {
        padding-bottom: 60px;
    }

    .mila-moment-copy h2 {
        font-size: 42px;
        max-width: 330px;
    }

    .mila-moment-copy p {
        font-size: 16px;
    }

    .mila-story .mila-moment-copy .mila-eyebrow {
        font-size: 8px;
    }

    .mila-photo-note {
        font-size: 8px;
        bottom: 17px;
        right: 20px;
    }

    .mila-section-head {
        display: block;
        margin-bottom: 32px;
    }

    .mila-section-head>p {
        margin-top: 22px;
        max-width: 100%;
        font-size: 14px;
    }

    .mila-scenario-switch {
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .mila-story .mila-scenario-switch button {
        font-size: 11px;
        padding: 12px 14px;
    }

    .mila-scenario-switch button span {
        display: none;
    }

    .mila-demo {
        display: block;
    }

    .mila-room-figure {
        padding: 19px 13px 0;
    }

    .mila-diagram-top {
        font-size: 7px;
        letter-spacing: .06em;
    }

    .mila-demo-label {
        font-size: 7px;
        padding: 3px 5px;
    }

    .mila-room {
        margin: 20px -8px 10px;
        width: calc(100% + 16px);
    }

    .mila-room-key {
        grid-template-columns: repeat(3,1fr);
        padding: 17px 0;
        gap: 7px;
    }

    .mila-room-key>div {
        gap: 5px;
    }

    .mila-room-key p {
        display: block;
        font-size: 9px;
    }

    .mila-room-key strong {
        font-size: 9px;
        margin-top: 4px;
    }

    .mila-room-key>div>span {
        width: 16px;
        height: 16px;
        line-height: 14px;
        font-size: 8px;
    }

    .mila-explanation {
        padding: 28px 24px;
    }

    .mila-explanation h3 {
        font-size: 27px;
    }

    .mila-causal p {
        font-size: 13px;
    }

    .mila-caption {
        font-size: 10px!important;
    }

    .mila-system-map {
        display: flex;
        flex-direction: column;
        padding: 5px 0 35px;
    }

    .mila-inputs,.mila-outputs {
        width: 100%;
    }

    .mila-map-label {
        text-align: center;
        font-size: 8px;
        margin-bottom: 13px;
    }

    .mila-inputs>div {
        padding: 10px;
        text-align: center;
        border: 1px solid var(--mila-line);
        margin-top: 7px;
        border-radius: 2px;
        font-size: 13px;
    }

    .mila-inputs>div:last-child {
        border: 1px solid var(--mila-line);
    }

    .mila-map-connector {
        width: 2px;
        height: 49px;
        margin: 5px 0 16px;
        flex: none;
    }

    .mila-map-connector::after {
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(135deg);
    }

    .mila-map-connector--both::before {
        top: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(-45deg);
    }

    .mila-hub {
        width: 180px;
        height: 180px;
        flex: none;
        margin: 5px 0;
    }

    .mila-outputs>div {
        font-size: 14px;
        padding: 12px 23px;
    }

    .mila-outputs>div span {
        min-width: 110px;
    }

    .mila-system-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 27px;
    }

    .mila-system-bottom p {
        font-size: 13px;
    }

    .mila-resources-grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 35px;
    }

    .mila-resource-image {
        height: 400px;
        width: 100%;
    }

    .mila-resources-grid>div>p:not(.mila-eyebrow) {
        font-size: 14px;
    }

    .mila-resource-list {
        margin-top: 28px;
    }

    .mila-resource-list article {
        gap: 18px;
        padding: 22px 0;
    }

    .mila-resource-list h3 {
        font-size: 20px;
    }

    .mila-resource-list p {
        font-size: 13px;
    }

    .mila-resource-image>span {
        font-size: 8px;
        left: 23px;
        bottom: 23px;
    }

    .mila-safety-flow {
        grid-template-columns: 1fr;
        gap: 30px;
        margin: 35px 0 28px;
    }

    .mila-safety-flow li {
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 0 15px;
        padding-top: 23px;
    }

    .mila-step-number {
        grid-row: 1/4;
        margin: 0;
        line-height: 2.8;
    }

    .mila-safety-flow h3 {
        font-size: 23px;
        margin-bottom: 12px;
    }

    .mila-safety-flow p {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .mila-step-output {
        grid-column: 2;
        font-size: 11px;
    }

    .mila-safety-flow li:not(:last-child):after {
        content: none;
    }

    .mila-trust-note {
        gap: 14px;
        align-items: flex-start;
        padding-top: 22px;
    }

    .mila-trust-note p {
        font-size: 12px;
    }

    .mila-trust-note>span {
        font-size: 28px;
        line-height: 1.3;
    }

    .mila-contact {
        padding-bottom: 30px;
    }

    .mila-contact>.mila-wrap>.mila-status {
        margin-bottom: 32px;
        font-size: 7px;
    }

    .mila-contact-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .mila-contact h2 {
        font-size: 39px;
        margin-bottom: 23px;
    }

    .mila-contact .mila-lead {
        font-size: 20px;
    }

    .mila-story .mila-button {
        font-size: 12px;
        padding: 17px 18px;
        gap: 18px;
        width: 100%;
        margin-top: 27px;
    }

    .mila-contact-guide {
        border-left: 0;
        border-top: 1px solid var(--mila-line);
        padding: 28px 0 0;
    }

    .mila-contact-guide li {
        gap: 18px;
        padding: 17px 0;
    }

    .mila-contact-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-top: 30px;
        padding-top: 25px;
    }

    .mila-contact-bottom p {
        font-size: 10px;
    }

    .mila-footer>.mila-wrap {
        flex-wrap: wrap;
        font-size: 9px;
        gap: 17px;
    }

    .mila-footer nav {
        gap: 17px;
    }

    .mila-story .mila-email-hint {
        font-size: 9px;
    }

}

.mila-explanation h3 {
    white-space: pre-line;
}

.mila-scenario-switch {
    display: none;
}

.mila-interactive .mila-scenario-switch {
    display: flex;
}

.mila-room-key p,.mila-room-key strong {
    font-size: 12px;
}

@media(max-width:760px) {
    .mila-room-key {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .mila-room-key>div {
        gap: 9px;
    }

    .mila-room-key p {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 14px;
        font-size: 12px;
    }

    .mila-room-key strong {
        font-size: 12px;
        margin: 0;
    }

    .mila-room-key>div>span {
        width: 20px;
        height: 20px;
        line-height: 18px;
        font-size: 10px;
    }

    .mila-diagram-top {
        font-size: 8px;
    }

    .mila-demo-label {
        font-size: 8px;
    }

    .mila-node circle {
        r: 23px;
    }

    .mila-node text {
        font-size: 27px;
    }

    .mila-room-key p {
        color: var(--mila-muted);
    }

    .mila-story .mila-caption {
        font-size: 11px!important;
    }

}

@media(prefers-reduced-motion:reduce) {
    .mila-story * {
        transition: none!important;
        animation: none!important;
        scroll-behavior: auto!important;
    }

}

/* ===== 10 · Impreza-Farbschemata und Kontraste ===== */
/* Inherit the Impreza default and alternative color schemes, including future theme changes. */
.mila-scenarios,.mila-resources {
    --mila-ink: var(--color-alt-content-heading,#212121);
    --mila-muted: var(--color-alt-content-text,#3f4544);
    --mila-heading: var(--color-alt-content-heading,#212121);
    --mila-line: var(--color-alt-content-border,#dadfe0);
    --mila-surface: var(--color-alt-content-bg-alt,#fff);
    background: var(--color-alt-content-bg,#f2f4f5);
}

.mila-story h2 {
    color: var(--mila-heading);
}

.mila-story h3 {
    color: var(--mila-ink);
}

.mila-story .mila-eyebrow {
    color: var(--color-content-heading,#00897b);
}

.mila-intro h2 em,.mila-system h2 em {
    color: var(--mila-teal);
}

.mila-intro-copy .mila-lead,.mila-contact .mila-lead {
    color: var(--color-content-text,#edf7f6);
}

.mila-moment h2,.mila-moment .mila-eyebrow,.mila-moment-copy p {
    color: var(--color-content-text,#edf7f6);
}

.mila-story .mila-text-link,.mila-context a,.mila-contact a:not(.mila-button) {
    color: var(--color-content-link,#00bfa5);
}

.mila-story a:hover {
    color: var(--color-content-link-hover,#107c94);
}

.mila-story .mila-button:hover {
    color: var(--color-content-text,#edf7f6);
}

.mila-story .mila-scenario-switch button[aria-pressed=true] {
    background: var(--mila-secondary);
    color: var(--color-content-text,#edf7f6);
    border-color: var(--color-content-secondary,#004d7a);
}

.mila-causal li:last-child {
    border-left-color: transparent;
}

.mila-node circle {
    fill: var(--color-content-bg-alt,#f2f4f5);
}

.mila-room .mila-connections {
    stroke: var(--color-content-heading,#00897b);
}

.mila-room .mila-room-hub {
    fill: url(#mila-brand-gradient);
}

.mila-room .mila-room-hub-text {
    fill: var(--color-content-text,#edf7f6);
}

.mila-contact {
    border-top: 1px solid var(--mila-line);
}

/* Readable text on each scheme; accent colors remain the exact brand values. */
.mila-scenarios,.mila-resources {
    color: var(--mila-ink);
}

.mila-story .mila-eyebrow {
    color: var(--mila-teal);
}

.mila-scenarios .mila-eyebrow,.mila-resources .mila-eyebrow,.mila-story .mila-explanation .mila-eyebrow,.mila-causal li>span {
    color: var(--mila-muted);
}

.mila-moment .mila-eyebrow {
    color: var(--color-content-text,#edf7f6);
}

.mila-room-key>div>span,.mila-resource-list article>span {
    color: var(--mila-muted);
}

.mila-hub {
    box-shadow: inset 0 0 0 240px rgba(0,0,0,.2),0 0 0 15px color-mix(in srgb,var(--mila-teal) 8%,transparent),0 0 0 31px color-mix(in srgb,var(--mila-teal) 5%,transparent);
}

.mila-story .mila-scenario-switch button[aria-pressed=true] {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,.2);
}

.mila-room .mila-room-hub {
    filter: brightness(.8);
}

/* ===== 11 · Native Live-Builder-Elemente ===== */
/* Native Impreza components: layout adaptation, never replace editor markup. */
.mila-native.l-section {
    padding: 116px 0;
    scroll-margin-top: 110px;
}

.mila-native>.l-section-h {
    width: calc(100% - 112px);
    max-width: 1320px;
    margin-inline: auto;
}

.mila-native .g-cols {
    margin-bottom: 0;
}

.mila-native .wpb_text_column {
    margin-bottom: 0;
}

.mila-native .wpb_text_column p+p {
    margin-top: 1rem;
}

.mila-native h2 .w-text-value>span {
    color: var(--mila-teal);
}

.mila-native .w-text-value {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.mila-native .mila-smallcaps {
    font-size: 10px;
    letter-spacing: .12em;
    line-height: 1.6;
}

.mila-native .mila-native-status {
    font-size: 10px;
    letter-spacing: .15em;
    line-height: 1.7;
    color: var(--color-content-faded);
}

.mila-native-status:before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mila-teal);
    margin-right: 14px;
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--mila-teal) 12%,transparent);
}

.mila-native .mila-native-link {
    background: transparent!important;
    border: 0;
    border-bottom: 1px solid var(--mila-line);
    border-radius: 0;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-content-link);
    line-height: 1.7;
    box-shadow: none;
    text-align: left;
}

.mila-native .mila-native-link:before {
    display: none;
}

.mila-native .mila-native-link i {
    margin-left: 24px;
    color: var(--mila-teal);
}

.mila-native .mila-native-link:hover {
    color: var(--color-content-link-hover);
    text-decoration: none;
}

.mila-native .mila-native-head {
    margin-bottom: 54px;
    gap: 5rem;
}

.mila-native-head-copy {
    font-size: 16px;
    line-height: 1.75;
    max-width: 430px;
    justify-self: end;
}

/* ===== 12 · Native Einführung und Bildszene ===== */
.mila-native.mila-intro {
    padding: 65px 0 0;
}

.mila-native-intro-grid {
    padding: 65px 0 80px;
    gap: 6rem!important;
}

.mila-native-intro-copy .wpb_text_column {
    margin-bottom: 24px;
}

.mila-native-context {
    padding: 28px 0;
    border-top: 1px solid var(--mila-line);
    font-size: 13px;
    line-height: 1.6;
}

.mila-native-context .mila-native-link {
    font-size: 13px;
    white-space: nowrap;
}

.mila-native.mila-native-moment {
    min-height: 650px;
    display: flex;
    align-items: flex-end;
    padding-top: 100px;
    padding-bottom: 80px;
    color: #edf7f6;
    position: relative;
}

.mila-native-moment h2 {
    font-size: clamp(40px,4.2vw,76px);
    color: #edf7f6;
}

.mila-native-moment .mila-eyebrow,.mila-native-moment p {
    color: #edf7f6;
}

.mila-native-moment .wpb_text_column {
    font-size: 18px;
    max-width: 510px;
    margin-bottom: 25px;
}

.mila-native .mila-native-light {
    color: #edf7f6;
}

.mila-native .mila-native-photo-note {
    font-size: 10px;
    letter-spacing: .05em;
    position: absolute;
    right: 0;
    bottom: -58px;
}

/* ===== 13 · Native Tabs und erklärende Grafiken ===== */
.mila-native-tabs .w-tabs-list {
    gap: 10px;
    background: transparent;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mila-native-tabs .w-tabs-list-h {
    gap: 10px;
    flex-wrap: wrap;
}

.mila-native-tabs .w-tabs-item {
    padding: 14px 23px!important;
    border: 1px solid var(--mila-line)!important;
    border-radius: 99px;
    background: transparent;
    box-shadow: none!important;
    color: var(--mila-ink);
    font-size: 14px;
    line-height: 1.5;
}

.mila-native-tabs .w-tabs-item.active {
    background: linear-gradient(325deg,#004d7a,#008793 33%,#209196 67%,#005878);
    color: #edf7f6!important;
}

.mila-native-tabs .w-tabs-item:before,.mila-native-tabs .w-tabs-list:before {
    display: none;
}

.mila-native-tabs .w-tabs-section-content {
    padding: 0!important;
}

.mila-native-demo {
    border: 1px solid var(--mila-line);
    border-radius: 4px;
    overflow: hidden;
    background: #f2f4f5;
}

.mila-native-room {
    padding: 27px 24px 0!important;
    min-width: 0;
    align-self: stretch;
}

.mila-native .mila-diagram-top {
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .1em;
}

.mila-native-art .mila-demo {
    display: block;
    border: 0;
    background: transparent;
    overflow: visible;
}

.mila-native-art .mila-room {
    width: 100%;
    margin: 20px 0 6px;
    filter: none;
}

.mila-native-art .mila-room-hub {
    fill: revert;
    filter: brightness(.8);
}

.mila-native-art .mila-room-hub-text {
    fill: #edf7f6;
}

.mila-native-art .mila-node text {
    fill: #03191c;
}

.mila-native-art .mila-node circle {
    fill: #f2f4f5;
}

.mila-native .mila-native-keys {
    border-top: 1px solid var(--mila-line);
    padding: 21px 0;
    align-items: start;
    justify-content: space-between;
}

.mila-native .mila-native-key {
    font-size: 12px;
    line-height: 1.6;
    flex: 1;
    min-width: 0;
}

.mila-native-key strong {
    font-weight: 500;
    color: var(--mila-ink);
}

.mila-native-explanation {
    padding: 38px 30px!important;
    background: #fff;
    align-self: stretch;
}

.mila-native-explanation h3 {
    font-size: 29px;
    margin-bottom: 28px;
}

.mila-native-explanation .mila-eyebrow {
    font-size: 10px;
    margin-bottom: 14px;
}

.mila-native .mila-native-causal {
    border-left: 1px solid var(--mila-line);
    padding: 0 0 24px 22px;
    position: relative;
    margin-left: 4px;
}

.mila-native-causal:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: -4px;
    top: 7px;
    border: 1px solid #00897b;
    border-radius: 50%;
    background: #fff;
}

.mila-native-causal:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.mila-native-causal:last-child:before {
    background: #00897b;
}

.mila-native-causal .wpb_text_column {
    font-size: 14px;
    line-height: 1.7;
}

.mila-native .mila-native-causal-label {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ===== 14 · Native Systemgrafik und Verbindungspfeile ===== */
.mila-native .mila-native-system-map {
    grid-template-columns: 1fr 230px 1.1fr!important;
    gap: 60px!important;
    padding: 35px 0 60px;
    align-items: center;
}

.mila-native .mila-map-label {
    font-size: 9px;
    letter-spacing: .1em;
    margin-bottom: 20px;
    line-height: 1.6;
}

.mila-native .mila-native-system-item {
    padding: 17px 0;
    border-bottom: 1px solid var(--mila-line);
    font-size: 16px;
    line-height: 1.6;
}

.mila-native-system-item:last-child {
    border-bottom: 0;
}

.mila-native-hub-column {
    position: relative;
    width: 230px!important;
    min-width: 0;
}

.mila-native-hub-column:before,.mila-native-hub-column:after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    width: 60px;
    height: 12px;
    background: var(--mila-teal);
    z-index: 2;
}

.mila-native-hub-column:before {
    left: -60px;
    clip-path: polygon(0 42%,86% 42%,79% 0,100% 50%,79% 100%,86% 58%,0 58%);
}

.mila-native-hub-column:after {
    right: -60px;
    clip-path: polygon(0 50%,21% 0,14% 42%,86% 42%,79% 0,100% 50%,79% 100%,86% 58%,14% 58%,21% 100%);
}

.mila-native .mila-hub {
    width: 230px;
    height: 230px;
    margin: 0!important;
}

.mila-native .mila-native-hub-name {
    font-weight: 750;
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: .035em;
    color: #edf7f6;
}

.mila-native-system-bottom {
    border-top: 1px solid var(--mila-line);
    padding-top: 30px;
    font-size: 14px;
    line-height: 1.75;
}

/* ===== 15 · Native Ressourcen und Vertrauen ===== */
.mila-native-resource-image {
    overflow: hidden;
    width: 100%;
}

.mila-native-resource-image .w-image-h,.mila-native-resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mila-native-resource-copy>.wpb_text_column {
    font-size: 16px;
    max-width: 460px;
    margin-bottom: 32px;
}

.mila-native-resource-item {
    border-top: 1px solid var(--mila-line);
    padding: 22px 0;
}

.mila-native-resource-item h3 {
    font-size: 21px;
}

.mila-native-resource-item .wpb_text_column {
    font-size: 14px;
    line-height: 1.65;
}

.mila-native .mila-native-number {
    font-size: 11px;
    color: var(--mila-teal);
}

.mila-resources .mila-native-number {
    color: var(--mila-muted);
}

.mila-native-safety-item {
    border-top: 1px solid var(--mila-line);
    padding-top: 24px;
}

.mila-native-safety-item .mila-native-number {
    margin-bottom: 24px;
}

.mila-native-safety-item h3 {
    font-size: 25px;
    margin-bottom: 16px;
}

.mila-native-safety-item .wpb_text_column {
    font-size: 14px;
    margin-bottom: 28px;
    line-height: 1.75;
}

.mila-native .mila-native-step-output {
    font-size: 12px;
    color: var(--mila-teal);
    font-weight: 600;
}

.mila-native .mila-native-trust-note {
    margin-top: 34px;
    padding-top: 27px;
    border-top: 1px solid var(--mila-line);
    font-size: 13px;
}

/* ===== 16 · Native Roadmap / Impreza Timeline ===== */
.mila-native-roadmap {
    border-top: 1px solid var(--mila-line);
}

.mila-native-roadmap-intro h2 {
    margin-bottom: 26px;
}

.mila-native-roadmap-intro .wpb_text_column {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 25px;
}

.mila-native-timeline {
    padding-left: 20px;
}

.mila-native-timeline .w-timeline-section-content {
    min-width: 0;
    padding-bottom: 0;
}

.mila-native-timeline .mila-eyebrow {
    font-size: 10px;
    margin: 0 0 10px;
    line-height: 1.5;
}

.mila-native-timeline h3 {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 15px;
}

.mila-native-timeline .wpb_text_column {
    font-size: 15px;
    line-height: 1.75;
    max-width: 570px;
}

.mila-native-current .mila-eyebrow {
    display: inline-block;
    padding: 5px 10px;
    background: color-mix(in srgb,var(--mila-teal) 12%,transparent);
    border-radius: 3px;
}

.mila-native-current .w-timeline-section-marker {
    box-shadow: 0 0 0 7px color-mix(in srgb,var(--mila-teal) 10%,transparent);
}

.mila-native.mila-contact {
    padding-bottom: 45px;
}

/* ===== 17 · Nativer Kontaktbereich ===== */
.mila-native-contact-grid {
    margin-top: 50px;
    margin-bottom: 65px!important;
}

.mila-native-contact-grid .wpb_text_column {
    max-width: 530px;
    font-size: 15px;
}

.mila-native-contact-grid .mila-lead {
    font-size: 22px;
}

.mila-native .mila-native-cta {
    padding: 19px 23px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    background: var(--mila-teal);
    color: #03191c;
    border-radius: 3px;
    margin-top: 34px;
    text-align: left;
}

.mila-native-cta i {
    margin-left: 24px;
}

.mila-native .mila-native-cta:hover {
    color: #edf7f6;
    text-decoration: none;
}

.mila-native-guide {
    border-left: 1px solid var(--mila-line);
    padding-left: 42px!important;
}

.mila-native-guide-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--mila-line);
}

.mila-native-guide-item:last-child {
    border: 0;
}

.mila-native-guide-item h3 {
    font-size: 19px;
}

.mila-native-guide-item .wpb_text_column {
    font-size: 13px;
}

.mila-native .mila-native-wordmark {
    font-size: 39px;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.4;
}

.mila-native.mila-native-footer {
    padding: 23px 0;
    background: var(--color-subfooter-bg,#1d2625);
    color: var(--color-footer-text,#7f8a88);
    font-size: 11px;
}

.mila-native-styling {
    display: none;
}

/* ===== 18 · Native Elemente: Desktop, Tablet und Smartphone ===== */
@media(min-width:1800px) {
    .mila-native.mila-native-moment {
        min-height: 750px;
    }

}

@media(max-width:1100px) {
    .mila-native.l-section {
        padding: 80px 0;
    }

    .mila-native>.l-section-h {
        width: calc(100% - 64px);
    }

    .mila-native.mila-intro {
        padding: 50px 0 0;
    }

    .mila-native-intro-grid {
        gap: 3rem!important;
    }

    .mila-native.mila-native-moment {
        min-height: 650px;
        padding-bottom: 80px;
    }

    .mila-native .mila-native-system-map {
        grid-template-columns: 1fr 180px 1.1fr!important;
        gap: 40px!important;
    }

    .mila-native-hub-column,.mila-native .mila-hub {
        width: 180px!important;
    }

    .mila-native .mila-hub {
        height: 180px;
    }

    .mila-native-hub-column:before {
        width: 40px;
        left: -40px;
    }

    .mila-native-hub-column:after {
        width: 40px;
        right: -40px;
    }

    .mila-native .mila-native-system-item {
        font-size: 13px;
    }

    .mila-native .mila-native-hub-name {
        font-size: 31px;
    }

}

@media(max-width:1024px) {
    .mila-native .mila-native-head {
        gap: 1.5rem!important;
    }

    .mila-native-head-copy {
        justify-self: start;
        max-width: 100%;
    }

    .mila-native-demo {
        gap: 0!important;
    }

    .mila-native-room {
        padding: 24px!important;
    }

    .mila-native-roadmap-grid,.mila-native-contact-grid,.mila-native-resources-grid {
        gap: 3rem!important;
    }

    .mila-native-guide {
        padding-left: 0!important;
        border-left: 0;
        border-top: 1px solid var(--mila-line);
        padding-top: 30px!important;
    }

}

@media(max-width:760px) {
    .mila-native.l-section {
        padding: 64px 0;
        scroll-margin-top: 75px;
    }

    .mila-native>.l-section-h {
        width: calc(100% - 40px);
    }

    .mila-native.mila-intro {
        padding: 36px 0 0;
    }

    .mila-native-intro-grid {
        padding: 35px 0 40px;
        gap: 0!important;
    }

    .mila-native .mila-native-status {
        font-size: 8px;
        letter-spacing: .1em;
    }

    .mila-native-status:before {
        margin-right: 10px;
    }

    .mila-native-intro-copy .wpb_text_column {
        font-size: 15px;
    }

    .mila-native-intro-copy .mila-lead {
        font-size: 20px;
    }

    .mila-native-context {
        gap: 18px!important;
        padding: 24px 0;
        font-size: 12px;
    }

    .mila-native .mila-smallcaps {
        font-size: 9px;
    }

    .mila-native.mila-native-moment {
        min-height: 640px;
        padding: 80px 0 60px;
    }

    .mila-native-moment h2 {
        font-size: 39px;
        max-width: 380px!important;
    }

    .mila-native-moment .wpb_text_column {
        font-size: 16px;
    }

    .mila-native-moment .l-section-overlay {
        background: linear-gradient(0deg,rgba(3,25,28,.96),rgba(3,25,28,.68) 48%,rgba(3,25,28,.1))!important;
    }

    .mila-native .mila-native-photo-note {
        bottom: -42px;
        font-size: 8px;
    }

    .mila-native .mila-native-head {
        margin-bottom: 32px;
    }

    .mila-native-head-copy {
        font-size: 14px;
    }

    .mila-native-tabs .w-tabs-list {
        gap: 7px;
        margin-bottom: 20px;
    }

    .mila-native-tabs .w-tabs-item {
        font-size: 11px;
        padding: 11px 13px!important;
    }

    .mila-native .mila-diagram-top {
        font-size: 8px;
    }

    .mila-native-room {
        padding: 20px 13px 0!important;
    }

    .mila-native .mila-native-keys {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mila-native-key br {
        display: none;
    }

    .mila-native-key strong {
        margin-left: 12px;
    }

    .mila-native-explanation {
        padding: 28px 24px!important;
    }

    .mila-native-explanation h3 {
        font-size: 27px;
    }

    .mila-native-causal .wpb_text_column {
        font-size: 13px;
    }

    .mila-native .mila-native-system-map {
        grid-template-columns: 1fr!important;
        gap: 70px!important;
        padding: 5px 0 35px;
    }

    .mila-native-hub-column {
        justify-self: center;
        width: 180px!important;
    }

    .mila-native .mila-hub {
        width: 180px;
        height: 180px;
    }

    .mila-native-hub-column:before,.mila-native-hub-column:after {
        width: 48px;
        left: calc(50% - 24px);
        right: auto;
        transform: rotate(90deg);
    }

    .mila-native-hub-column:before {
        top: -40px;
    }

    .mila-native-hub-column:after {
        top: auto;
        bottom: -40px;
    }

    .mila-native-inputs .mila-native-system-item {
        text-align: center;
        border: 1px solid var(--mila-line);
        padding: 10px;
        margin-top: 7px;
    }

    .mila-native-outputs .mila-native-system-item {
        padding: 12px 23px;
        font-size: 14px;
    }

    .mila-native-system-bottom {
        gap: 24px!important;
        font-size: 13px;
    }

    .mila-native .mila-map-label {
        font-size: 8px;
        text-align: center;
    }

    .mila-native-resource-image {
        max-height: 440px;
    }

    .mila-native-resource-item .wpb_text_column {
        font-size: 13px;
    }

    .mila-native-safety {
        gap: 30px!important;
    }

    .mila-native-safety-item h3 {
        font-size: 23px;
    }

    .mila-native-safety-item .wpb_text_column {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .mila-native-roadmap-intro .wpb_text_column {
        font-size: 14px;
    }

    .mila-native-timeline {
        padding-left: 17px;
        --line-offset: 1.5rem;
        --marker-size: .85rem;
    }

    .mila-native-timeline h3 {
        font-size: 23px;
    }

    .mila-native-timeline .wpb_text_column {
        font-size: 14px;
    }

    .mila-native-timeline .mila-eyebrow {
        font-size: 9px;
    }

    .mila-native-contact-grid {
        margin-top: 32px;
        margin-bottom: 35px!important;
    }

    .mila-native-contact-grid .mila-lead {
        font-size: 20px;
    }

    .mila-native .mila-native-cta {
        font-size: 12px;
        padding: 17px 18px;
        width: 100%;
        margin-top: 27px;
    }

    .mila-native-cta i {
        margin-left: 15px;
    }

    .mila-native-footer-links {
        gap: 16px!important;
        justify-content: start!important;
    }

    .mila-native.mila-native-footer {
        padding: 23px 0;
        font-size: 10px;
    }

}

/* ===== 19 · SVG-Zustände und lesbare Tab-Beschriftungen ===== */
.mila-native-art .mila-demo[data-scene=evening] .mila-room-hub {
    fill: url(#mila-brand-gradient-evening);
}

.mila-native-art .mila-demo[data-scene=sun] .mila-room-hub {
    fill: url(#mila-brand-gradient-sun);
}

.mila-native-art .mila-demo[data-scene=away] .mila-room-hub {
    fill: url(#mila-brand-gradient-away);
}

.mila-native-tabs .w-tabs-item:not(.active),.mila-native-tabs .w-tabs-item:not(.active) .w-tabs-item-title {
    color: #212121!important;
}

.mila-native-tabs .w-tabs-item.active .w-tabs-item-title {
    color: #edf7f6!important;
}

/* ===== 20 · Footer: persönlicher Kontakt und rechtliche Navigation ===== */
/* Scoped to the existing Formidable contact footer; theme typography stays in Impreza. */
#page-footer:has(#frm_form_1_container) {
    --mila-footer-bg: var(--color-content-bg, #03191c);
    --mila-footer-text: var(--color-content-text, #edf7f6);
    --mila-footer-accent: var(--color-content-primary, #00bfa5);
    --mila-form-surface: var(--color-content-bg-alt, #f2f4f5);
    --mila-form-ink: #03191c;
    --mila-form-muted: #455b5c;
    --mila-form-border: #bccbca;
    background: var(--mila-footer-bg);
    color: var(--mila-footer-text);
}

#page-footer:has(#frm_form_1_container) > .l-section {
    background: var(--mila-footer-bg);
    color: var(--mila-footer-text);
    border-top: 1px solid color-mix(in srgb, var(--mila-footer-text) 20%, transparent);
    padding: 88px 0 28px;
}

#page-footer:has(#frm_form_1_container) > .l-section > .l-section-h {
    max-width: 1320px;
    width: calc(100% - 112px);
    margin-inline: auto;
}

/* Keep the native two-column Row; replace its previous translucent card styling. */
#page-footer:has(#frm_form_1_container) .g-cols:has(> .wpb_column > .vc_column-inner > .w-html > #frm_form_1_container) {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#page-footer:has(#frm_form_1_container) .g-cols:has(> .wpb_column > .vc_column-inner > .w-html > #frm_form_1_container) > .wpb_column {
    min-width: 0;
}

#page-footer:has(#frm_form_1_container) h2 {
    color: var(--color-content-heading, #00897b);
    font-size: clamp(32px, 3.4vw, 54px);
    margin: 8px 0 28px;
    overflow-wrap: break-word;
}

#page-footer:has(#frm_form_1_container) .wpb_text_column p {
    color: var(--mila-footer-text);
    font-size: 17px;
    line-height: 1.8;
    max-width: 34em;
}

#page-footer:has(#frm_form_1_container) .w-separator {
    height: 64px;
}

#page-footer:has(#frm_form_1_container) .w-hwrapper {
    border-top: 1px solid color-mix(in srgb, var(--mila-footer-text) 20%, transparent);
    padding-top: 20px;
    gap: 16px 32px;
}

#page-footer:has(#frm_form_1_container) .w-hwrapper .wpb_text_column {
    margin: 0 !important;
}

#page-footer:has(#frm_form_1_container) .w-hwrapper p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
}

#page-footer:has(#frm_form_1_container) .w-hwrapper a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mila-footer-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--mila-footer-text) 35%, transparent);
}

#page-footer:has(#frm_form_1_container) a:hover {
    color: var(--mila-footer-accent);
}

#page-footer:has(#frm_form_1_container) a:focus-visible {
    outline: 3px solid var(--mila-footer-accent);
    outline-offset: 5px;
    border-radius: 2px;
}

/* ===== 21 · Kontaktformular: Felder, Eingabehilfen und Zustände ===== */
#page-footer #frm_form_1_container {
    background: var(--mila-form-surface, #f2f4f5);
    color: var(--mila-form-ink, #03191c);
    padding: clamp(24px, 3.3vw, 48px);
    margin: 0;
    border: 1px solid var(--color-content-border, #dadfe0);
    border-top: 3px solid var(--color-content-primary, #00bfa5);
    border-radius: 10px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .12);
}

#page-footer #frm_form_1_container fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

#page-footer #frm_form_1_container .frm_fields_container {
    column-gap: 18px;
    row-gap: 0;
}

#page-footer #frm_form_1_container .frm_form_field {
    margin-bottom: 24px;
    min-width: 0;
}

#page-footer #frm_form_1_container .frm_primary_label {
    color: var(--mila-form-ink);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    padding: 0 0 8px;
}

/* The surname field must keep a visible label, including on stacked layouts. */
#page-footer #frm_form_1_container .frm_hidden_container .frm_primary_label {
    display: block;
    visibility: visible;
    height: auto;
    width: auto;
    position: static;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

#page-footer #frm_form_1_container .frm_required {
    color: var(--color-content-heading, #00897b);
    font-weight: 700;
}

#page-footer #frm_form_1_container input[type="text"]:not(.frm_verify),
#page-footer #frm_form_1_container input[type="email"],
#page-footer #frm_form_1_container input[type="tel"],
#page-footer #frm_form_1_container textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    box-sizing: border-box;
    padding: 13px 15px;
    margin: 0;
    border: 1px solid var(--mila-form-border);
    border-radius: 6px;
    background: #fff;
    color: var(--mila-form-ink);
    font-size: 16px;
    line-height: 1.6;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#page-footer #frm_form_1_container textarea {
    min-height: 170px;
    resize: vertical;
}

#page-footer #frm_form_1_container input::placeholder,
#page-footer #frm_form_1_container textarea::placeholder {
    color: var(--mila-form-muted);
    opacity: 1;
}

#page-footer #frm_form_1_container input:not([type="hidden"]):not(.frm_verify):hover,
#page-footer #frm_form_1_container textarea:hover {
    border-color: #6a8584;
}

#page-footer #frm_form_1_container input:not([type="hidden"]):not(.frm_verify):focus,
#page-footer #frm_form_1_container textarea:focus {
    border-color: var(--color-content-heading, #00897b);
    outline: 2px solid var(--color-content-heading, #00897b);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 137, 123, .08);
    background: #fff;
}

#page-footer #frm_form_1_container .frm_description,
#page-footer #frm_form_1_container .frm_html_container,
#page-footer #frm_form_1_container .frm_html_container > span {
    color: var(--mila-form-muted);
    font-size: 13px !important;
    line-height: 1.7 !important;
}

#page-footer #frm_form_1_container .frm_description {
    padding-top: 7px;
}

/* Names now have individual labels; suppress the redundant sub-labels. */
#page-footer #frm_desc_field_qh4icy,
#page-footer #frm_desc_field_ocfup1 {
    display: none;
}

#page-footer #frm_form_1_container .frm_html_container a {
    color: #006b63;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#page-footer #frm_form_1_container .frm_html_container a:hover {
    color: var(--color-content-bg, #03191c);
}

#page-footer #frm_form_1_container .frm_submit {
    margin: 0;
}

#page-footer #frm_field_6_container {
    margin-bottom: 0;
}

#page-footer #frm_form_1_container .frm_button_submit {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 15px 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--color-content-primary, #00bfa5);
    color: var(--color-content-bg, #03191c);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

#page-footer #frm_form_1_container .frm_button_submit:hover {
    background: var(--color-content-link-hover, #107c94);
    color: var(--color-content-text, #edf7f6);
}

#page-footer #frm_form_1_container .frm_button_submit:focus-visible {
    outline: 3px solid var(--color-content-heading, #00897b);
    outline-offset: 4px;
}

#page-footer #frm_form_1_container .frm_button_submit:disabled,
#page-footer #frm_form_1_container .frm_button_submit[aria-disabled="true"] {
    opacity: .6;
    cursor: wait;
}

#page-footer #frm_form_1_container .frm_error {
    margin-top: 8px;
    padding: 0;
    color: #9f2828;
    font-size: 13px;
    line-height: 1.6;
}

#page-footer #frm_form_1_container [aria-invalid="true"],
#page-footer #frm_form_1_container .frm_blank_field input,
#page-footer #frm_form_1_container .frm_blank_field textarea {
    border-color: #b83939;
    background: #fffafa;
}

#page-footer #frm_form_1_container .frm_error_style,
#page-footer #frm_form_1_container .frm_message {
    padding: 18px 20px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.7;
    box-shadow: none;
}

#page-footer #frm_form_1_container .frm_error_style {
    color: #802525;
    background: #fff4f2;
    border: 1px solid #d59b95;
    margin-bottom: 24px;
}

#page-footer #frm_form_1_container .frm_message {
    color: #064d45;
    background: #edf7f6;
    border: 1px solid #00897b;
}

#page-footer #frm_form_1_container .frm_message p {
    color: inherit;
    margin: 0;
}

/* ===== 22 · Footer und Formular auf Tablet und Smartphone ===== */
@media (max-width: 1100px) {
    #page-footer:has(#frm_form_1_container) > .l-section > .l-section-h {
        width: calc(100% - 64px);
    }
}

@media (max-width: 900px) {
    #page-footer:has(#frm_form_1_container) .g-cols:has(> .wpb_column > .vc_column-inner > .w-html > #frm_form_1_container) {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #page-footer:has(#frm_form_1_container) h2 {
        max-width: 16em;
    }
}

@media (max-width: 600px) {
    #page-footer:has(#frm_form_1_container) > .l-section {
        padding: 56px 0 20px;
    }

    #page-footer:has(#frm_form_1_container) > .l-section > .l-section-h {
        width: calc(100% - 40px);
    }

    #page-footer:has(#frm_form_1_container) h2 {
        font-size: 32px;
        margin-top: 0;
        margin-bottom: 20px;
    }

    #page-footer:has(#frm_form_1_container) .wpb_text_column p {
        font-size: 15px;
    }

    #page-footer #frm_form_1_container {
        padding: 26px 20px;
        border-radius: 8px;
    }

    #page-footer #frm_form_1_container .frm_fields_container > .frm_form_field {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #page-footer #frm_form_1_container .frm_form_field {
        margin-bottom: 22px;
    }

    #page-footer #frm_field_6_container {
        margin-bottom: 0;
    }

    #page-footer:has(#frm_form_1_container) .w-separator {
        height: 40px;
    }

    #page-footer:has(#frm_form_1_container) .w-hwrapper {
        align-items: flex-start;
        text-align: left;
        gap: 8px;
    }

    #page-footer:has(#frm_form_1_container) .w-hwrapper p {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-footer #frm_form_1_container input,
    #page-footer #frm_form_1_container textarea,
    #page-footer #frm_form_1_container button {
        transition: none;
    }
}

/* Clear visual guidance while preserving Formidable's required-field semantics. */
#page-footer #frm_form_1_container .frm_form_fields::before {
    content: "* Pflichtfelder";
    display: block;
    margin-bottom: 24px;
    color: var(--mila-form-muted);
    font-size: 12px;
    line-height: 1.6;
}

#page-footer #field_llrvb_label::after {
    content: " (optional)";
    color: var(--mila-form-muted);
    font-weight: 400;
}