/* ===========================================================
   Dach und Haus v2 — Stylesheet
   Schrift: Rasa (self-hosted), Palette: Ziegel / Schiefer / Kalk
   Visuelle Sprache: inspiriert von en-vier-software-vorlage,
   eigene Farbführung, eigene Typografie.
   =========================================================== */

/* --- Fonts ---------------------------------------------------- */
@font-face {
    font-family: "Varta";
    src: url("/assets/fonts/Varta-Regular.latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Varta";
    src: url("/assets/fonts/Varta-Regular.latinext.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------- */
:root {
    --c-ziegel:      #B8533A;
    --c-ziegel-deep: #7E2F1C;
    --c-ziegel-soft: #F4DACE;
    --c-kupfer:      #C68642;
    --c-mooseiche:   #1F4A3A;
    --c-schiefer:    #1E2425;
    --c-graphit:     #3A4047;
    --c-stein:       #585E66;        /* WCAG-AA-konform 5.6:1 auf Kalk */
    --c-kupfer-bright: #E3A969;      /* Heller Kupfer für Text auf Dunkel — 4.7:1 auf Mooseiche */
    --c-kalk:        #F5EFE6;
    --c-kalk-deep:   #ECE3D2;
    --c-elfenbein:   #FFFCF6;
    --c-sand-line:   #E0D5BF;
    --c-success:     #1F7A3A;
    --c-warn:        #B45309;
    --c-error:       #9B2C1C;

    --radius-s:  6px;
    --radius-m: 14px;
    --radius-l: 22px;
    --radius-xl: 32px;

    --shadow-soft: 0 1px 2px rgba(30, 36, 37, .06), 0 8px 28px -14px rgba(30, 36, 37, .22);
    --shadow-pop:  0 2px 6px rgba(30, 36, 37, .10), 0 24px 60px -22px rgba(30, 36, 37, .32);
    --shadow-card: 0 1px 0 rgba(30,36,37,.04), 0 1px 2px rgba(30,36,37,.06), 0 20px 40px -28px rgba(30,36,37,.30);

    --container: 1180px;
    --header-h: 78px;

    --font-sans: "Varta", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    color: var(--c-schiefer);
    background: var(--c-kalk);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--c-ziegel-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-ziegel); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-schiefer); color: var(--c-kalk);
    padding: .7rem 1rem; border-radius: 0 0 var(--radius-s) 0;
    z-index: 9999;
}
.skip-link:focus { left: 0; outline: 3px solid var(--c-kupfer); outline-offset: 0; }

/* Screen-Reader-only Text: visuell verborgen, für Vorlese-Software erreichbar */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Globale Fokus-Ringe — sichtbar auf jedem Hintergrund, auch Dunkel */
:where(a, button, summary, [role="button"], input:not([type="hidden"]), select, textarea):focus-visible {
    outline: 3px solid var(--c-ziegel);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Auf dunklen Sektionen: Kupfer-Ring (höherer Kontrast gegen Mooseiche/Schiefer) */
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.site-footer a:focus-visible,
.inquiry-shell__head a:focus-visible,
.mobile-nav a:focus-visible,
.mobile-nav button:focus-visible,
.admin-side a:focus-visible,
.admin-side button:focus-visible {
    outline-color: var(--c-kupfer);
}
/* Karten-Klick: weicherer Ring auf der ganzen Karte */
.reference-card:focus-visible,
.problem-card__cta:focus-visible,
.service-directory__link:focus-visible,
.leistung-related__item:focus-visible {
    outline-offset: 3px;
}

/* --- Container ----------------------------------------------- */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* --- Header --------------------------------------------------- */
.site-header {
    position: sticky; top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--c-kalk) 92%, transparent);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--c-sand-line);
}
.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.2rem;
    min-height: var(--header-h);
    padding-block: .65rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    color: var(--c-schiefer);
    text-decoration: none;
}
.brand__mark {
    color: var(--c-ziegel);
    display: inline-grid;
    place-content: center;
    width: 46px; height: 46px;
    background: var(--c-elfenbein);
    border: 1px solid var(--c-sand-line);
    border-radius: 12px;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-ziegel-soft) 70%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.brand:hover .brand__mark {
    transform: translateY(-1px);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-ziegel-soft) 70%, transparent), 0 6px 14px -8px rgba(30,36,37,.25);
}
.brand__mark svg { display: block; }
.brand__text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand__text strong {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--c-schiefer);
}
.brand__text small {
    font-size: .76rem;
    color: var(--c-stein);
    margin-top: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.brand--invert { color: var(--c-kalk); }
.brand--invert .brand__mark {
    color: var(--c-kupfer);
    background: color-mix(in srgb, var(--c-elfenbein) 8%, transparent);
    border-color: color-mix(in srgb, var(--c-sand-line) 25%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-kupfer) 35%, transparent);
}
.brand--invert .brand__text strong { color: var(--c-kalk); }
.brand--invert .brand__text small  { color: var(--c-sand-line); }

.nav { display: flex; gap: .35rem; }
.nav a {
    color: var(--c-graphit);
    text-decoration: none;
    padding: .55rem .9rem;
    border-radius: var(--radius-s);
    font-weight: 500;
    transition: color .15s ease, background .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] {
    color: var(--c-ziegel-deep);
    background: var(--c-ziegel-soft);
}
.header-cta { padding: .55rem .9rem; font-size: .95rem; }
.menu-toggle {
    display: none;
    background: none; border: 0;
    color: var(--c-schiefer);
    padding: .4rem;
    cursor: pointer;
    border-radius: var(--radius-s);
}
.menu-toggle:hover { background: var(--c-kalk-deep); }

@media (max-width: 880px) {
    .nav { display: none; }
    /* Header-Telefon-Button ist auf Mobile redundant — der schwebende
       Anrufen-Floater unten rechts übernimmt die Call-Aktion. */
    .header-cta { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-header__inner { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 540px) {
    .brand__text small { display: none; }
    .site-header__inner { gap: .6rem; }
}

/* --- Mobile-Nav ---------------------------------------------- */
.mobile-backdrop {
    position: fixed; inset: 0;
    background: rgba(30, 36, 37, .42);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 80;
}
.mobile-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--c-elfenbein);
    z-index: 90;
    padding: 1.4rem 1.4rem 1.8rem;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.65,.25,1);
    box-shadow: -24px 0 60px -16px rgba(30,36,37,.22);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.mobile-nav[data-open="true"] { transform: translateX(0); }
.mobile-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-sand-line);
}
.mobile-nav__head .brand { color: var(--c-schiefer); gap: .7rem; }
.mobile-nav__head .brand__mark {
    width: 40px; height: 40px;
    color: var(--c-ziegel);
    background: var(--c-elfenbein);
    border: 1px solid var(--c-sand-line);
    border-radius: 10px;
    box-shadow: none;
}
.mobile-nav__head .brand__text strong { font-size: 1.05rem; }
.mobile-nav__close {
    background: var(--c-kalk-deep); border: 0;
    width: 38px; height: 38px;
    display: grid; place-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-graphit);
    transition: background-color .15s ease, color .15s ease;
    flex-shrink: 0;
}
.mobile-nav__close:hover { background: var(--c-ziegel-soft); color: var(--c-ziegel-deep); }

/* Primäre Navigation */
.mobile-nav__primary {
    display: grid; gap: 2px;
    margin: 0; padding: .4rem 0 0;
}
.mobile-nav__primary a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    color: var(--c-schiefer);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -.005em;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}
.mobile-nav__primary a:hover {
    background: color-mix(in srgb, var(--c-ziegel-soft) 70%, transparent);
    color: var(--c-ziegel-deep);
}
.mobile-nav__primary a[aria-current="page"] {
    background: var(--c-ziegel-soft);
    color: var(--c-ziegel-deep);
    font-weight: 600;
}
.mobile-nav__primary a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--c-ziegel);
}
.mobile-nav__chevron {
    color: var(--c-ziegel);
    opacity: 0;
    transition: opacity .15s ease, transform .2s ease;
}
.mobile-nav__primary a:hover .mobile-nav__chevron,
.mobile-nav__primary a[aria-current="page"] .mobile-nav__chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* Sekundäre Navigation (Rechtliches) */
.mobile-nav__secondary {
    display: grid; gap: 0;
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--c-sand-line);
}
.mobile-nav__secondary a {
    padding: .55rem 1rem;
    color: var(--c-stein);
    text-decoration: none;
    font-size: .88rem;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}
.mobile-nav__secondary a:hover,
.mobile-nav__secondary a[aria-current="page"] {
    color: var(--c-ziegel-deep);
    background: color-mix(in srgb, var(--c-kalk-deep) 60%, transparent);
}

/* Telefon-Tiles am Drawer-Fuß */
.mobile-nav__cta {
    margin-top: auto;
    padding-top: 1.4rem;
    display: grid;
    gap: .55rem;
}
.mobile-nav__phone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.1rem;
    border-radius: 14px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mobile-nav__phone-icon {
    width: 40px; height: 40px;
    display: grid; place-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.mobile-nav__phone-meta {
    display: flex; flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.mobile-nav__phone-meta small {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    opacity: .85;
    margin-bottom: .12rem;
}
.mobile-nav__phone-meta strong {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.mobile-nav__phone--primary {
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-ziegel) 80%, transparent);
}
.mobile-nav__phone--primary:hover {
    background: var(--c-ziegel-deep);
    color: var(--c-elfenbein);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--c-ziegel) 90%, transparent);
}
.mobile-nav__phone--primary .mobile-nav__phone-icon {
    background: color-mix(in srgb, var(--c-elfenbein) 18%, transparent);
    color: var(--c-elfenbein);
}
.mobile-nav__phone:not(.mobile-nav__phone--primary) {
    background: var(--c-elfenbein);
    color: var(--c-schiefer);
    border: 1px solid var(--c-sand-line);
}
.mobile-nav__phone:not(.mobile-nav__phone--primary) .mobile-nav__phone-icon {
    background: var(--c-ziegel-soft);
    color: var(--c-ziegel-deep);
}
.mobile-nav__phone:not(.mobile-nav__phone--primary):hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--c-ziegel) 35%, var(--c-sand-line));
    color: var(--c-schiefer);
}

/* --- Datenschutz-Hinweis-Bar ---------------------------------- */
.privacy-bar {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 70;
    max-width: 720px;
    margin-inline: auto;
    background: var(--c-schiefer);
    color: var(--c-kalk);
    border-radius: 14px;
    box-shadow: 0 24px 60px -16px rgba(30, 36, 37, .35);
    transform: translateY(120%);
    transition: transform .26s cubic-bezier(.2,.65,.25,1);
}
.privacy-bar[data-show="true"] { transform: none; }
.privacy-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
}
.privacy-bar p {
    margin: 0;
    font-size: .9rem;
    color: var(--c-sand-line);
    line-height: 1.5;
}
.privacy-bar p strong { color: var(--c-elfenbein); font-weight: 600; }
.privacy-bar a {
    color: var(--c-kupfer-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.privacy-bar a:hover { color: var(--c-elfenbein); }
.privacy-bar__ack {
    --bg: var(--c-elfenbein);
    --fg: var(--c-schiefer);
    flex-shrink: 0;
    padding: .65rem 1.1rem;
    min-block-size: 40px;
}
.privacy-bar__ack:hover {
    --bg: var(--c-kupfer-bright);
    color: var(--c-schiefer);
}
@media (max-width: 640px) {
    .privacy-bar { left: .8rem; right: .8rem; bottom: 5rem; /* über dem Anrufen-Floater */ }
    .privacy-bar__inner { grid-template-columns: 1fr; gap: .6rem; padding: .9rem 1rem; }
    .privacy-bar__ack { justify-self: start; }
}

/* Bei sehr kleinem Viewport: nicht über den Mobile-Call-Floater stapeln */
@media (max-width: 360px) {
    .privacy-bar { bottom: 4.5rem; }
}

/* --- Mobile Call Bar ----------------------------------------- */
.mobile-call {
    position: fixed; right: 1rem; bottom: 1rem;
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    padding: .9rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center; gap: .5rem;
    font-weight: 600;
    box-shadow: var(--shadow-pop);
    z-index: 60;
}
.mobile-call:hover { background: var(--c-ziegel-deep); color: var(--c-elfenbein); }
@media (min-width: 881px) { .mobile-call { display: none; } }

/* --- Typografie ---------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-sans);
    color: var(--c-schiefer);
    margin: 0 0 .6em;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.005em;
}
.h-display {
    font-size: clamp(2.1rem, 5.2vw, 3.8rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 600;
    margin: 0 0 .4em;
}
.h-display em {
    font-style: normal;
    font-weight: 700;
    color: var(--c-ziegel);
}
.h-section {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: -.015em;
    margin: 0 0 .4em;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    color: var(--c-mooseiche);
    margin-bottom: 1.2rem;
}
.eyebrow::before {
    content: ""; display: inline-block; width: 28px; height: 2px;
    background: var(--c-ziegel);
}
.lead {
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    color: var(--c-graphit);
    line-height: 1.6;
    max-width: 58ch;
    margin: 0;
}
hr {
    border: 0; height: 1px;
    background: var(--c-sand-line);
    margin: 2.4rem 0;
}

/* --- Buttons ------------------------------------------------- */
.btn {
    --bg: var(--c-schiefer);
    --fg: var(--c-elfenbein);
    --bd: transparent;
    --shadow-rest: 0 1px 0 rgba(30, 36, 37, .04), 0 2px 4px -2px rgba(30, 36, 37, .12);
    --shadow-hover: 0 1px 0 rgba(30, 36, 37, .04), 0 12px 24px -10px rgba(30, 36, 37, .28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--bd);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-rest);
    transition:
        background-color .28s cubic-bezier(.2, .65, .25, 1),
        color            .28s cubic-bezier(.2, .65, .25, 1),
        border-color     .28s cubic-bezier(.2, .65, .25, 1),
        transform        .32s cubic-bezier(.2, .65, .25, 1),
        box-shadow       .32s cubic-bezier(.2, .65, .25, 1);
    will-change: transform;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.btn:active {
    transform: translateY(0);
    transition-duration: .12s;
    box-shadow: var(--shadow-rest);
}
.btn > svg { flex-shrink: 0; }

.btn--primary  { --bg: var(--c-ziegel); --fg: var(--c-elfenbein);
    --shadow-rest: 0 1px 0 rgba(126, 47, 28, .12), 0 4px 10px -4px rgba(126, 47, 28, .25);
    --shadow-hover: 0 1px 0 rgba(126, 47, 28, .12), 0 14px 26px -10px rgba(126, 47, 28, .42);
}
.btn--primary:hover { --bg: var(--c-ziegel-deep); color: var(--c-elfenbein); }

.btn--ghost    { --bg: transparent; --fg: var(--c-schiefer); --bd: var(--c-sand-line);
    --shadow-rest: 0 1px 0 rgba(30, 36, 37, .02);
    --shadow-hover: 0 1px 0 rgba(30, 36, 37, .02), 0 8px 18px -8px rgba(30, 36, 37, .22);
}
.btn--ghost:hover { --bg: var(--c-kalk-deep); --bd: color-mix(in srgb, var(--c-ziegel) 25%, var(--c-sand-line)); color: var(--c-schiefer); }

.btn--ink      { --bg: var(--c-mooseiche); --fg: var(--c-elfenbein);
    --shadow-rest: 0 1px 0 rgba(20, 54, 40, .14), 0 4px 10px -4px rgba(20, 54, 40, .28);
    --shadow-hover: 0 1px 0 rgba(20, 54, 40, .14), 0 14px 26px -10px rgba(20, 54, 40, .42);
}
.btn--ink:hover { --bg: var(--c-schiefer); color: var(--c-elfenbein); }

.btn--lg {
    padding: 1.05rem 1.8rem;
    font-size: 1.05rem;
    gap: .65rem;
}

/* --- Sections ----------------------------------------------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--paper { background: var(--c-kalk-deep); }
.section--dark  { background: var(--c-mooseiche); color: var(--c-kalk); }
.section--dark .h-section,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-kalk); }
.section--dark .eyebrow { color: var(--c-kupfer-bright); }
.section--dark .eyebrow::before { background: var(--c-kupfer-bright); }
.section--dark .benefit h4 { color: var(--c-kupfer-bright); }
.section--dark .benefit__icon {
    color: var(--c-kupfer-bright);
    border-color: color-mix(in srgb, var(--c-kupfer-bright) 55%, transparent);
}
.section--dark .lead { color: var(--c-sand-line); }

.section-head {
    display: grid; gap: 1rem;
    margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}
.section-head > div { display: grid; gap: 1rem; }
.section-head > div > .eyebrow,
.section-head > div > .h-section,
.section-head > div > .lead { margin: 0; }
.section-head--split {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.6rem;
}
.section-head--center {
    text-align: center;
    justify-items: center;
}
.section-head--center .lead { margin-inline: auto; }

/* Editorial: zweispaltig — Titel/Lead links, sekundäres Element (z.B. Telefon-Panel) rechts.
   Linksbündig statt zentriert. */
.section-head--editorial {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, auto);
    align-items: end;
    gap: clamp(1.6rem, 4vw, 3.2rem);
    margin-bottom: clamp(2.8rem, 5vw, 4rem);
}
.section-head--editorial > div { max-width: 56ch; gap: 1.1rem; }
@media (max-width: 880px) {
    .section-head--editorial {
        grid-template-columns: 1fr;
        align-items: start;
    }
}
@media (max-width: 640px) {
    .section-head--split { grid-template-columns: 1fr; align-items: start; }
}

/* "Direkter Draht"-Panel im Editorial-Section-Head */
.section-head__direct {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.2rem 1.4rem;
    background: var(--c-elfenbein);
    border: 1px solid var(--c-sand-line);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: var(--c-schiefer);
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.section-head__direct::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--c-ziegel);
}
.section-head__direct:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c-ziegel) 30%, var(--c-sand-line));
    box-shadow: var(--shadow-pop);
    color: var(--c-schiefer);
}
.section-head__direct-icon {
    width: 48px; height: 48px;
    display: grid; place-content: center;
    border-radius: 50%;
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--c-ziegel) 60%, transparent);
}
.section-head__direct-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.section-head__direct-meta small {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-stein);
    font-weight: 700;
    margin-bottom: .25rem;
}
.section-head__direct-meta strong {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--c-schiefer);
    letter-spacing: -.005em;
    white-space: nowrap;
}
.section-head__direct-meta span {
    font-size: .85rem;
    color: var(--c-graphit);
    margin-top: .2rem;
}
.section-head__direct-arrow {
    color: var(--c-ziegel);
    transition: transform .2s ease;
}
.section-head__direct:hover .section-head__direct-arrow { transform: translateX(4px); }

@media (max-width: 480px) {
    .section-head__direct { grid-template-columns: auto minmax(0, 1fr); padding: 1rem 1.1rem; }
    .section-head__direct-arrow { display: none; }
    .section-head__direct-meta strong { font-size: 1.1rem; }
}

/* --- Hero --------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem);
    background:
        radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c-ziegel) 14%, transparent), transparent 60%),
        radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--c-mooseiche) 12%, transparent), transparent 60%),
        var(--c-kalk);
    border-bottom: 1px solid var(--c-sand-line);
    overflow: hidden;
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.hero__body { min-width: 0; }
.hero__title {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 3.8vw, 2.7rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.hero__lead  { margin: 0 0 2.2rem; max-width: 48ch; }
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; gap: 2.4rem; }
    .hero__body { max-width: 56ch; }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__meta {
    margin-top: 2rem;
    display: flex; flex-wrap: wrap;
    gap: .9rem 1.6rem;
    color: var(--c-stein);
    font-size: .92rem;
    line-height: 1.5;
}
.hero__meta a { color: var(--c-graphit); text-decoration: none; border-bottom: 1px dashed var(--c-sand-line); padding-bottom: 2px; }
.hero__meta a:hover { color: var(--c-ziegel-deep); border-color: var(--c-ziegel); }

.hero__media {
    position: relative;
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--shadow-pop);
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--c-ziegel) 30%, transparent), transparent 55%),
        linear-gradient(140deg, var(--c-mooseiche) 0%, var(--c-schiefer) 100%);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--placeholder {
    display: grid;
    place-content: center;
    color: var(--c-kalk);
    text-align: center;
    padding: 2.5rem;
}
.hero__media--placeholder svg {
    width: clamp(110px, 32%, 180px);
    height: auto;
    margin-inline: auto;
    opacity: .85;
    margin-bottom: 1.4rem;
    color: var(--c-kupfer);
}
.hero__media--placeholder .label {
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--c-sand-line);
    opacity: .9;
}
.hero__media--placeholder .line {
    margin: 1rem auto 1.2rem;
    height: 2px;
    width: 78px;
    background: var(--c-kupfer);
    border-radius: 2px;
}
.hero__media--placeholder .brand-line {
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--c-elfenbein);
}
.hero__media--placeholder .meta {
    margin-top: 1rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-kupfer-bright);
    font-weight: 600;
}
.hero__badge {
    position: absolute;
    left: -22px; bottom: 22px;
    background: var(--c-kupfer);
    color: var(--c-schiefer);
    padding: .6rem 1.2rem .6rem 2rem;
    border-radius: 0 999px 999px 0;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .02em;
    box-shadow: var(--shadow-soft);
}
@media (max-width: 1024px) {
    /* Auf Tablet/Mobile bekommt das grüne Plakat die volle Spaltenbreite und einen
       etwas flacheren Anteil (5:4 statt Quadrat) — sieht in der Vertikalstapelung
       proportionaler aus. */
    .hero__media {
        aspect-ratio: 5 / 4;
        max-width: 540px;
        margin-inline: auto;
    }
    .hero__media--placeholder { padding: 2rem; }
}
@media (max-width: 640px) {
    .hero__media { aspect-ratio: 4 / 3; }
    .hero__media--placeholder { padding: 1.6rem; }
    .hero__media--placeholder svg { width: 26%; margin-bottom: .7rem; }
    .hero__media--placeholder .brand-line { font-size: clamp(1.4rem, 6vw, 1.8rem); }
    .hero__media--placeholder .label { font-size: .8rem; letter-spacing: .18em; }
    .hero__media--placeholder .line { width: 52px; margin: .55rem auto .7rem; }
    .hero__media--placeholder .meta { margin-top: .8rem; font-size: .68rem; letter-spacing: .14em; }
}

/* --- Problem-Cards ------------------------------------------ */
.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}
@media (max-width: 880px) { .problems-grid { grid-template-columns: 1fr; } }
.problem-card {
    --accent: var(--c-ziegel);
    --accent-soft: var(--c-ziegel-soft);
    --accent-deep: var(--c-ziegel-deep);
    position: relative;
    display: flex; flex-direction: column;
    padding: 2rem 1.8rem 1.7rem;
    background: var(--c-elfenbein);
    border-radius: var(--radius-m);
    border: 1px solid var(--c-sand-line);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.problem-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent);
}
.problem-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--c-sand-line));
    box-shadow: var(--shadow-pop);
}
.problem-card--alert   { --accent: var(--c-ziegel);    --accent-soft: var(--c-ziegel-soft);                                     --accent-deep: var(--c-ziegel-deep); }
.problem-card--care    { --accent: var(--c-kupfer);    --accent-soft: color-mix(in srgb, var(--c-kupfer) 16%, var(--c-elfenbein));  --accent-deep: #8E5A20; }
.problem-card--project { --accent: var(--c-mooseiche); --accent-soft: color-mix(in srgb, var(--c-mooseiche) 12%, var(--c-elfenbein)); --accent-deep: #143628; }

.problem-card__icon {
    width: 52px; height: 52px;
    display: grid; place-content: center;
    border-radius: 14px;
    background: var(--accent);
    color: var(--c-elfenbein);
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.problem-card__tag {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--accent-deep); /* dunklere Akzentvariante — WCAG-AA-konform */
    font-weight: 700;
    margin-bottom: .35rem;
}
.problem-card h3 {
    font-size: 1.3rem;
    margin: 0 0 .5rem;
    line-height: 1.25;
    color: var(--c-schiefer);
}
.problem-card p {
    color: var(--c-graphit);
    margin: 0 0 1.2rem;
    line-height: 1.55;
}
.problem-card__facts {
    list-style: none;
    padding: 1rem 0 0;
    margin: 0 0 1.4rem;
    display: grid;
    gap: .55rem;
    font-size: .92rem;
    color: var(--c-graphit);
    border-top: 1px dashed var(--c-sand-line);
}
.problem-card__facts li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    line-height: 1.45;
}
.problem-card__facts svg {
    flex-shrink: 0;
    margin-top: 4px;
    width: 16px; height: 16px;
    padding: 2px;
    color: var(--c-elfenbein);
    background: var(--accent);
    border-radius: 50%;
}
.problem-card__actions {
    margin-top: auto;
    display: grid; gap: .6rem;
}
.problem-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--accent-deep);
    text-decoration: none;
    align-self: flex-start;
}
.problem-card__cta svg { transition: transform .2s ease; }
.problem-card:hover .problem-card__cta svg { transform: translateX(4px); }

.problem-card__phone {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--c-stein);
    text-decoration: none;
    font-size: .85rem;
    align-self: flex-start;
    flex-wrap: wrap;
}
.problem-card__phone svg { color: var(--accent); flex-shrink: 0; }
.problem-card__phone span { white-space: normal; }
.problem-card__phone:hover { color: var(--accent-deep); }

/* --- Service-Grid -------------------------------------------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.service-card {
    display: flex; flex-direction: column;
    gap: .55rem;
    padding: 1.8rem 1.6rem;
    background: var(--c-elfenbein);
    border-radius: var(--radius-m);
    border: 1px solid var(--c-sand-line);
    color: inherit; text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    box-shadow: var(--shadow-card);
}
.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-ziegel-soft);
    box-shadow: var(--shadow-pop);
    color: inherit;
}
.service-card__icon {
    width: 46px; height: 46px;
    display: grid; place-content: center;
    background: var(--c-ziegel-soft);
    color: var(--c-ziegel-deep);
    border-radius: 12px;
    margin-bottom: .5rem;
}
.service-card h3 { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.service-card p  { color: var(--c-graphit); margin: .3rem 0 1rem; font-size: .95rem; line-height: 1.55; }
.service-card__more {
    margin-top: auto;
    font-weight: 600;
    color: var(--c-ziegel-deep);
    font-size: .94rem;
}
/* Service-Verzeichnis — kompakte 2-spaltige Liste aller Leistungen.
   Wird auf der Startseite statt der Karten-Grid verwendet, damit alle 12
   Bereiche gleichgewichtig auf einen Blick erfassbar bleiben. */
.service-directory {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.8rem);
    row-gap: 0;
    border-top: 1px solid var(--c-sand-line);
}
@media (max-width: 768px) {
    .service-directory { grid-template-columns: 1fr; }
}
.service-directory__item {
    border-bottom: 1px solid var(--c-sand-line);
    margin: 0;
}
.service-directory__details { width: 100%; }
.service-directory__details > summary::-webkit-details-marker { display: none; }
.service-directory__details > summary { list-style: none; }
.service-directory__link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .95rem .5rem;
    color: var(--c-schiefer);
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, padding .15s ease;
}
.service-directory__link:hover {
    background: color-mix(in srgb, var(--c-elfenbein) 70%, transparent);
    color: var(--c-schiefer);
    padding-inline: .9rem .5rem;
}
.service-directory__details[open] .service-directory__link {
    background: var(--c-elfenbein);
}
.service-directory__icon {
    width: 40px; height: 40px;
    display: grid; place-content: center;
    border-radius: 10px;
    background: var(--c-ziegel-soft);
    color: var(--c-ziegel-deep);
    transition: background-color .2s ease, color .2s ease;
}
.service-directory__link:hover .service-directory__icon {
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
}
.service-directory__main {
    display: flex; flex-direction: column;
    gap: .15rem;
    min-width: 0;
    line-height: 1.4;
}
.service-directory__main strong {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--c-schiefer);
    letter-spacing: -.005em;
}
.service-directory__sub {
    font-size: .87rem;
    color: var(--c-graphit);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-directory__chevron {
    color: var(--c-ziegel);
    display: inline-flex;
    transition: transform .25s ease;
}
.service-directory__details[open] .service-directory__chevron { transform: rotate(180deg); }

/* Aufgeklappter Detail-Bereich */
.service-directory__body {
    grid-column: 1 / -1;
    padding: .6rem 1rem 1.4rem 65px;
    color: var(--c-graphit);
    font-size: .94rem;
    line-height: 1.6;
}
.service-directory__body p { margin: 0 0 .8rem; }
.service-directory__body p:last-child { margin-bottom: 0; }

/* Aufgeklappte Items spannen über beide Spalten, damit der Body in voller Breite läuft
   und das Nachbar-Item nicht in ein Loch fällt. */
@supports selector(:has(*)) {
    @media (min-width: 769px) {
        .service-directory__item:has(.service-directory__details[open]) {
            grid-column: 1 / -1;
        }
        .service-directory__item:has(.service-directory__details[open]) .service-directory__link {
            grid-template-columns: 44px minmax(0, 1fr) auto;
        }
    }
}

@media (max-width: 540px) {
    .service-directory__link { grid-template-columns: 36px minmax(0, 1fr) auto; gap: .8rem; padding: .8rem .4rem; }
    .service-directory__icon { width: 36px; height: 36px; }
    .service-directory__sub { -webkit-line-clamp: 2; font-size: .85rem; }
    .service-directory__body { padding-left: 48px; padding-right: .4rem; }
}

/* --- Feature-Split ------------------------------------------ */
.feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
@media (max-width: 880px) { .feature-split { grid-template-columns: 1fr; } }
.feature-split img,
.feature-split .feature-split__media {
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    aspect-ratio: 5 / 4;
    object-fit: cover;
    width: 100%;
}
.feature-split--reverse > :first-child { order: 2; }
@media (max-width: 880px) { .feature-split--reverse > :first-child { order: 0; } }

/* --- Process ------------------------------------------------- */
.process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
    counter-reset: step;
    position: relative;
}
.process::before {
    content: "";
    position: absolute;
    top: 1.9rem;
    left: 8%; right: 8%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--c-ziegel-soft) 0 8px, transparent 8px 14px);
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 880px) {
    .process { grid-template-columns: repeat(2, 1fr); }
    .process::before { display: none; }
}
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }
.process-step {
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--c-elfenbein);
    border-radius: var(--radius-m);
    border: 1px solid var(--c-sand-line);
    counter-increment: step;
    position: relative;
    z-index: 1;
}
.process-step::before {
    content: counter(step, decimal-leading-zero);
    display: inline-grid;
    place-content: center;
    width: 38px; height: 38px;
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: .8rem;
    box-shadow: 0 0 0 4px var(--c-elfenbein), 0 0 0 5px var(--c-ziegel-soft);
}
.process-step h4 { margin: 0 0 .4rem; font-size: 1.08rem; line-height: 1.35; }
.process-step p  { margin: 0; color: var(--c-graphit); font-size: .95rem; line-height: 1.55; }

/* --- Benefits ----------------------------------------------- */
.benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1024px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }
@media (max-width: 540px)  { .benefits { grid-template-columns: 1fr; } }
.benefit {
    padding: 1.6rem 1.4rem 1.5rem;
    background: color-mix(in srgb, var(--c-kalk-deep) 50%, transparent);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.benefit__icon {
    width: 40px; height: 40px;
    display: grid; place-content: center;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--c-kupfer) 50%, transparent);
    color: var(--c-kupfer);
    margin-bottom: .9rem;
}
.benefit h4 {
    font-size: 1.02rem;
    color: var(--c-kupfer);
    margin: 0 0 .4rem;
    line-height: 1.3;
}
.benefit p {
    line-height: 1.55;
    font-size: .94rem;
}
.section--dark .benefit { background: color-mix(in srgb, var(--c-schiefer) 50%, transparent); }
.section--dark .benefit h4 { color: var(--c-kupfer); }
.benefit p { margin: 0; color: var(--c-graphit); }
.section--dark .benefit p { color: var(--c-sand-line); }

/* --- References --------------------------------------------- */
.references {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}
@media (max-width: 880px) { .references { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .references { grid-template-columns: 1fr; } }
.reference-card {
    display: flex; flex-direction: column;
    background: var(--c-elfenbein);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--c-sand-line);
    transition: transform .18s ease, box-shadow .18s ease;
}
.reference-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
    color: inherit;
}
.reference-card__media {
    aspect-ratio: 4 / 3;
    background: var(--c-kalk-deep);
    overflow: hidden;
}
.reference-card__media img { width: 100%; height: 100%; object-fit: cover; }
.reference-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
/* Falls kein Bild hinterlegt ist: rein typografische Karte mit linker Akzent-Linie. */
.reference-card--text {
    border-left: 4px solid var(--c-ziegel);
    background: var(--c-elfenbein);
}
.reference-card--text .reference-card__body { padding: 1.4rem 1.4rem 1.6rem; }
.reference-card__cat {
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--c-kupfer);
    font-weight: 700;
}
.reference-card h3 { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.reference-card p  { margin: .5rem 0 0; color: var(--c-graphit); font-size: .95rem; line-height: 1.55; }
.reference-facts {
    margin: 1rem 0 0;
    display: grid; gap: .5rem;
    font-size: .92rem;
}
.reference-facts > div {
    display: grid; grid-template-columns: 110px 1fr; gap: .5rem;
}
.reference-facts dt { color: var(--c-stein); font-weight: 500; }
.reference-facts dd { margin: 0; color: var(--c-graphit); }

/* --- FAQ ---------------------------------------------------- */
.faq { display: grid; gap: .7rem; max-width: 760px; margin-inline: auto; }
.faq details {
    border: 1px solid var(--c-sand-line);
    background: var(--c-elfenbein);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.4rem;
    transition: border-color .15s ease;
}
.faq details[open] { border-color: var(--c-ziegel-soft); }
.faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    width: 12px; height: 12px;
    border-right: 2px solid var(--c-ziegel);
    border-bottom: 2px solid var(--c-ziegel);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details > p { margin: .8rem 0 0; color: var(--c-graphit); }

/* --- Contact / Inquiry Form --------------------------------- */
.inquiry-shell {
    background: var(--c-elfenbein);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    border: 1px solid var(--c-sand-line);
}
.inquiry-shell__head {
    padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 1.8rem);
    background:
        radial-gradient(110% 100% at 0% 0%, color-mix(in srgb, var(--c-kupfer) 14%, transparent), transparent 55%),
        linear-gradient(135deg, var(--c-mooseiche) 0%, var(--c-schiefer) 100%);
    color: var(--c-kalk);
}
.inquiry-shell__head .eyebrow { color: var(--c-kupfer); }
.inquiry-shell__head .eyebrow::before { background: var(--c-kupfer); }
.inquiry-shell__head h2 { color: var(--c-kalk); margin: 0 0 .5rem; line-height: 1.2; }
.inquiry-shell__head p  { color: var(--c-sand-line); margin: 0; max-width: 56ch; line-height: 1.55; }
.inquiry-shell__body { padding: clamp(1.6rem, 4vw, 2.5rem); }
.inquiry-shell.is-prefilled {
    animation: shell-prefill 1.4s ease;
}
@keyframes shell-prefill {
    0%   { box-shadow: var(--shadow-pop); }
    30%  { box-shadow: var(--shadow-pop), 0 0 0 5px color-mix(in srgb, var(--c-ziegel) 45%, transparent); }
    100% { box-shadow: var(--shadow-pop); }
}

.inquiry-form { display: grid; gap: 1.5rem; }
.inquiry-section { display: grid; gap: .8rem; }
.inquiry-section-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--c-mooseiche);
}
.inquiry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) { .inquiry-grid { grid-template-columns: 1fr; } }

.inquiry-form label { display: grid; gap: .4rem; font-size: .95rem; color: var(--c-graphit); }
/* Feld-Bezeichner: Name fett auf einer Zeile mit dem Pflicht-Sternchen */
.field-label {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
    line-height: 1.3;
}
.field-label strong {
    font-weight: 600;
    color: var(--c-schiefer);
    font-size: .98rem;
}
.field-required {
    color: var(--c-ziegel);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}
.field-optional {
    color: var(--c-stein);
    font-weight: 400;
    font-size: .82em;
}
.inquiry-form label.full { grid-column: 1 / -1; }
.inquiry-form input[type=text],
.inquiry-form input[type=email],
.inquiry-form input[type=tel],
.inquiry-form select,
.inquiry-form textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--c-sand-line);
    background: var(--c-kalk);
    border-radius: 10px;
    font: inherit;
    color: var(--c-schiefer);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.inquiry-form textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
    outline: none;
    border-color: var(--c-ziegel);
    background: var(--c-elfenbein);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ziegel) 25%, transparent);
}

.inquiry-section__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--c-sand-line);
    margin-bottom: .2rem;
}
.inquiry-section__head > small {
    color: var(--c-stein);
    font-size: .85rem;
}

.inquiry-pills {
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.inquiry-pill {
    display: inline-flex;
    align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--c-sand-line);
    background: var(--c-kalk);
    border-radius: 999px;
    cursor: pointer;
    font-size: .92rem;
    color: var(--c-graphit);
    transition: background .15s, border-color .15s;
}
.inquiry-pill input { position: absolute; left: -9999px; }
.inquiry-pill:has(input:checked) {
    background: var(--c-ziegel-soft);
    border-color: var(--c-ziegel);
    color: var(--c-ziegel-deep);
    font-weight: 600;
}

.inquiry-file-drop {
    border: 2px dashed var(--c-sand-line);
    background: var(--c-kalk);
    border-radius: var(--radius-m);
    padding: 1.4rem 1.2rem;
    text-align: center;
    color: var(--c-graphit);
    display: grid; gap: .3rem;
    position: relative;
    cursor: pointer;
}
.inquiry-file-drop input[type=file] {
    position: absolute; inset: 0;
    opacity: 0;
    cursor: pointer;
}
.inquiry-file-drop strong { color: var(--c-ziegel-deep); font-weight: 600; }
.inquiry-file-drop small { color: var(--c-stein); font-size: .85rem; }
.inquiry-file-drop:hover { border-color: var(--c-ziegel); background: var(--c-elfenbein); }
.inquiry-file-list:not(:empty) {
    display: grid; gap: .3rem;
    margin-top: .8rem;
    text-align: left;
    font-size: .9rem;
    color: var(--c-graphit);
}

.field-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .7rem;
    font-size: .93rem;
    color: var(--c-graphit);
    line-height: 1.5;
}
.field-check input { margin-top: .25rem; }

/* Fortschrittsanzeige beim Anfrage-Submit */
.inquiry-submit {
    display: grid;
    gap: .9rem;
}
.inquiry-progress {
    display: grid;
    gap: .4rem;
    padding: .8rem 1rem;
    background: var(--c-kalk);
    border: 1px solid var(--c-sand-line);
    border-radius: 12px;
    animation: inquiry-progress-in .25s ease;
}
@keyframes inquiry-progress-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.inquiry-progress__bar {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-sand-line) 60%, var(--c-elfenbein));
    overflow: hidden;
}
.inquiry-progress__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--c-ziegel) 0%, var(--c-kupfer) 100%);
    border-radius: inherit;
    transition: width .2s ease;
}
.inquiry-progress__meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    font-size: .88rem;
    color: var(--c-graphit);
    font-variant-numeric: tabular-nums;
}
[data-inquiry-submit]:disabled { opacity: .7; cursor: progress; }

.honeypot, .hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden;
}

.alert {
    padding: .9rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 1.4rem;
    font-size: .96rem;
}
.alert--ok  { background: color-mix(in srgb, var(--c-success) 14%, var(--c-elfenbein)); color: #155b2a; border: 1px solid color-mix(in srgb, var(--c-success) 32%, transparent); }
.alert--err { background: color-mix(in srgb, var(--c-error)   14%, var(--c-elfenbein)); color: #7a1f12; border: 1px solid color-mix(in srgb, var(--c-error)   32%, transparent); }

/* --- Contact-Grid (Adresse + Formular) ---------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: clamp(1.5rem, 3vw, 2.4rem);
    align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info {
    display: grid; gap: 1.2rem;
    padding: 1.6rem 1.4rem;
    background: var(--c-elfenbein);
    border-radius: var(--radius-m);
    border: 1px solid var(--c-sand-line);
}
.contact-info h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-stein); margin: 0; font-weight: 600; }
.contact-info .val { display: block; color: var(--c-schiefer); font-weight: 500; text-decoration: none; }
.contact-info .val:hover { color: var(--c-ziegel-deep); }

/* --- Page-Head (sekundäre Seiten) --------------------------- */
.page-head {
    background: var(--c-elfenbein);
    border-bottom: 1px solid var(--c-sand-line);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
.crumbs { font-size: .9rem; color: var(--c-stein); margin-bottom: 1rem; }
.crumbs a { color: var(--c-graphit); text-decoration: none; border-bottom: 1px dashed var(--c-sand-line); }
.crumbs a:hover { color: var(--c-ziegel-deep); }

/* --- Leistung-Detailseite ----------------------------------- */
.leistung-head {
    position: relative;
    padding-block: clamp(2.8rem, 7vw, 4.5rem);
    background:
        radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c-ziegel) 12%, transparent), transparent 60%),
        radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--c-mooseiche) 10%, transparent), transparent 60%),
        var(--c-kalk);
    border-bottom: 1px solid var(--c-sand-line);
    overflow: hidden;
}
.leistung-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    margin-top: 1.4rem;
}
.leistung-head__body { min-width: 0; }
.leistung-head__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin: 0 0 1.2rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.leistung-head__lead {
    max-width: 52ch;
    margin: 0 0 2rem;
}
.leistung-head__cta {
    display: flex; flex-wrap: wrap; gap: .8rem;
}
.leistung-head__mark {
    display: grid;
    place-content: center;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--c-ziegel) 30%, transparent), transparent 55%),
        linear-gradient(140deg, var(--c-mooseiche) 0%, var(--c-schiefer) 100%);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-pop);
}
.leistung-head__icon {
    display: grid; place-content: center;
    width: clamp(120px, 28%, 180px);
    height: clamp(120px, 28%, 180px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-elfenbein) 10%, transparent);
    color: var(--c-kupfer);
}
.leistung-head__icon svg { width: 60%; height: 60%; stroke-width: 1.5; }

@media (max-width: 880px) {
    .leistung-head__inner { grid-template-columns: 1fr; }
    .leistung-head__mark { aspect-ratio: 16 / 9; }
    .leistung-head__icon { width: 110px; height: 110px; }
}

.leistung-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 960px) {
    .leistung-grid { grid-template-columns: 1fr; }
}

/* Body-Prose: Bullet-Listen aus nl2content() schön gesetzt */
.leistung-body ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.4rem;
    display: grid; gap: .55rem;
}
.leistung-body ul li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .6rem;
    align-items: start;
    color: var(--c-graphit);
    line-height: 1.55;
}
.leistung-body ul li::before {
    content: "";
    width: 18px; height: 18px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--c-ziegel-soft);
    background-image: linear-gradient(transparent, transparent),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E2F1C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex-shrink: 0;
}

/* Sidebar */
.leistung-sidebar { display: grid; gap: 1.4rem; position: sticky; top: calc(var(--header-h) + 1.2rem); }
@media (max-width: 960px) {
    .leistung-sidebar { position: static; }
}

.leistung-direct {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: var(--c-elfenbein);
    border: 1px solid var(--c-sand-line);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: var(--c-schiefer);
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.leistung-direct::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--c-ziegel);
}
.leistung-direct:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c-ziegel) 30%, var(--c-sand-line));
    box-shadow: var(--shadow-pop);
    color: var(--c-schiefer);
}
.leistung-direct__icon {
    width: 48px; height: 48px;
    display: grid; place-content: center;
    border-radius: 50%;
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--c-ziegel) 60%, transparent);
}
.leistung-direct__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.leistung-direct__meta small {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--c-stein); font-weight: 700; margin-bottom: .2rem;
}
.leistung-direct__meta strong { font-size: 1.15rem; color: var(--c-schiefer); font-weight: 600; white-space: nowrap; }
.leistung-direct__meta span  { font-size: .85rem; color: var(--c-graphit); margin-top: .2rem; }

.leistung-related {
    background: var(--c-elfenbein);
    border: 1px solid var(--c-sand-line);
    border-radius: var(--radius-m);
    padding: 1.4rem 1.4rem 1rem;
}
.leistung-related .eyebrow { margin-bottom: 1rem; }
.leistung-related__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
}
.leistung-related__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .55rem 0;
    text-decoration: none;
    color: var(--c-schiefer);
    border-bottom: 1px dashed var(--c-sand-line);
    transition: padding .15s ease, color .15s ease;
}
.leistung-related__list li:last-child .leistung-related__item { border-bottom: 0; }
.leistung-related__item:hover { color: var(--c-ziegel-deep); padding-inline-start: .35rem; }
.leistung-related__icon { color: var(--c-ziegel-deep); }
.leistung-related__title { font-size: .95rem; font-weight: 500; }
.leistung-related__arrow { color: var(--c-ziegel); transition: transform .2s ease; }
.leistung-related__item:hover .leistung-related__arrow { transform: translateX(3px); }

/* --- Footer ------------------------------------------------- */
.site-footer {
    background: var(--c-schiefer);
    color: var(--c-sand-line);
    padding: 4rem 0 1.8rem;
    line-height: 1.55;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
    color: var(--c-kalk);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin: 0 0 1rem;
    font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--c-kalk); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--c-sand-line) 40%, transparent); }
.site-footer a:hover { color: var(--c-kupfer); border-color: var(--c-kupfer); }
.footer-text { margin: 1.2rem 0 0; color: var(--c-sand-line); font-size: .95rem; max-width: 40ch; line-height: 1.55; }
.footer-bottom {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid color-mix(in srgb, var(--c-graphit) 60%, transparent);
    font-size: .85rem;
    color: var(--c-stein);
}

/* --- Prose (CMS-Inhalte: Über uns, Impressum, Datenschutz) -- */
.prose {
    max-width: 64ch;
    margin-inline: auto;
    color: var(--c-graphit);
    font-size: 1.04rem;
    line-height: 1.75;
}
.prose h2 { margin: 2.4rem 0 .8rem; font-size: 1.4rem; color: var(--c-schiefer); line-height: 1.3; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose ul li { margin-bottom: .3rem; }
.prose a { color: var(--c-ziegel-deep); }
.prose strong { color: var(--c-schiefer); }

/* --- Utility ------------------------------------------------ */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }

/* ============================================================
   Über-uns — editorielles Art-Layout
   ============================================================ */

/* Mega-Hero mit asymmetrischer Type */
.about-hero {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(0rem, 4vw, 3rem);
    background: var(--c-kalk);
    overflow: hidden;
}
.about-hero__inner { position: relative; }
.about-hero .crumbs { margin-bottom: 1.4rem; }
.about-hero .eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.about-hero__title {
    font-size: clamp(2.6rem, 8.5vw, 6.2rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 600;
    margin: 0 0 1.4rem;
    color: var(--c-schiefer);
    max-width: 14ch;
}
.about-hero__title em {
    font-style: normal;
    color: var(--c-ziegel);
    position: relative;
    display: inline-block;
}
.about-hero__title em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .04em;
    height: .08em;
    background: var(--c-kupfer);
    opacity: .55;
    transform-origin: left;
    animation: about-underline-grow 1.1s cubic-bezier(.2,.65,.25,1) .4s both;
}
@keyframes about-underline-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.about-hero__sub {
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
    color: var(--c-graphit);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    max-width: 38ch;
    line-height: 1.5;
}
.about-hero__sub strong { color: var(--c-schiefer); font-weight: 600; }
.about-hero__marker {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--c-stein);
    font-size: 1.5rem;
}
.about-hero__line {
    display: block;
    width: 80px; height: 1px;
    background: var(--c-stein);
    transform-origin: left;
    animation: about-line-grow .9s cubic-bezier(.2,.65,.25,1) .8s both;
}
.about-hero__chevron { animation: about-chevron-bob 1.6s ease-in-out infinite; opacity: .7; }
@keyframes about-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes about-chevron-bob {
    0%, 100% { transform: translateY(0); opacity: .6; }
    50%      { transform: translateY(4px); opacity: 1; }
}

/* Marquee — endlose horizontale Begriffe als ästhetischer Footer-Strich */
.about-hero__marquee {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--c-sand-line);
    border-bottom: 1px solid var(--c-sand-line);
    padding: 1rem 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.about-hero__marquee-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: about-marquee 48s linear infinite;
}
.about-hero__marquee-track span {
    display: inline-block;
    padding-inline: 1rem;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    color: var(--c-mooseiche);
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}
@keyframes about-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .about-hero__marquee-track { animation: none; }
    .about-hero__chevron { animation: none; }
}

/* Big-Year-Quote-Block — Mooseiche-Panel mit diagonalen Kanten */
.about-quote {
    position: relative;
    background: var(--c-mooseiche);
    color: var(--c-kalk);
    padding-block: clamp(5rem, 11vw, 9rem) clamp(5rem, 10vw, 8rem);
    margin: clamp(2rem, 5vw, 4rem) 0 clamp(-3rem, -3vw, -1.5rem);
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    isolation: isolate;
}
.about-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 20% 20%, color-mix(in srgb, var(--c-kupfer) 22%, transparent), transparent 65%),
        radial-gradient(40% 40% at 100% 100%, color-mix(in srgb, var(--c-schiefer) 50%, transparent), transparent 60%);
    z-index: -1;
}
.about-quote__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 880px) {
    .about-quote__inner { grid-template-columns: 1fr; }
}
.about-quote__year {
    font-family: var(--font-sans);
    font-size: clamp(7rem, 22vw, 18rem);
    line-height: .85;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--c-kalk);
    display: inline-flex;
    align-items: baseline;
    user-select: none;
}
.about-quote__year-accent {
    color: var(--c-kupfer-bright);
}
.about-quote__copy { max-width: 44ch; }
.about-quote__kicker {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--c-kupfer-bright);
    margin: 0 0 1.2rem;
    font-weight: 700;
}
.about-quote blockquote {
    margin: 0;
    border-left: 3px solid var(--c-kupfer-bright);
    padding-left: 1.5rem;
}
.about-quote blockquote p {
    font-size: clamp(1.2rem, 2.3vw, 1.6rem);
    line-height: 1.4;
    margin: 0 0 1.2rem;
    color: var(--c-kalk);
    text-wrap: balance;
}
.about-quote cite {
    font-style: normal;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-sand-line);
    opacity: .85;
}

/* Story-Block — editorial Drop-Cap + Pull-Quote */
.about-story {
    padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem);
    background: var(--c-kalk);
}
.about-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
@media (max-width: 880px) {
    .about-story__inner { grid-template-columns: 1fr; }
}
.about-story__pull {
    padding: 1.4rem 1.4rem 1.6rem;
    border-left: 3px solid var(--c-ziegel);
    background: var(--c-elfenbein);
    border-radius: 0 12px 12px 0;
    align-self: start;
}
.about-story__pull .eyebrow { margin-bottom: .7rem; }
.about-story__pull p {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.35;
    color: var(--c-schiefer);
    font-weight: 600;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.about-story__body {
    max-width: 56ch;
}
.about-story__lead {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    line-height: 1.55;
    color: var(--c-schiefer);
    margin: 0 0 1.4rem;
}
.about-story__drop {
    float: left;
    font-size: clamp(3.2rem, 6vw, 4.6rem);
    line-height: .85;
    font-weight: 700;
    color: var(--c-ziegel);
    padding: .35rem .6rem .2rem 0;
    margin-right: .1rem;
    letter-spacing: -.04em;
}
.about-story__body p:not(.about-story__lead) {
    color: var(--c-graphit);
    line-height: 1.65;
    font-size: 1.05rem;
}
.about-story__body strong { color: var(--c-schiefer); }

/* Timeline */
.about-timeline {
    padding-block: clamp(4rem, 9vw, 7rem);
    background: var(--c-kalk-deep);
    position: relative;
}
.about-timeline__intro {
    color: var(--c-graphit);
    font-size: 1.02rem;
    max-width: 36ch;
    justify-self: end;
    text-wrap: balance;
}
@media (max-width: 880px) {
    .about-timeline__intro { justify-self: start; }
}
.about-timeline__rail {
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    position: relative;
}
.about-timeline__rail::before {
    content: "";
    position: absolute;
    top: 1.6rem;
    left: 6%;
    right: 6%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--c-ziegel) 0 12px,
        transparent 12px 22px);
    z-index: 0;
}
@media (max-width: 880px) {
    .about-timeline__rail { grid-template-columns: 1fr; }
    .about-timeline__rail::before {
        top: 0; bottom: 0; left: 1.6rem; right: auto;
        width: 2px; height: auto;
        background: repeating-linear-gradient(180deg,
            var(--c-ziegel) 0 12px,
            transparent 12px 22px);
    }
}
.about-timeline__step {
    position: relative;
    padding: 3.4rem 1.3rem 1.4rem;
    background: var(--c-elfenbein);
    border: 1px solid var(--c-sand-line);
    border-radius: 14px;
    z-index: 1;
    transition: transform .35s cubic-bezier(.2,.65,.25,1), box-shadow .35s ease, border-color .35s ease;
}
.about-timeline__step:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(30,36,37,.35);
    border-color: color-mix(in srgb, var(--c-ziegel) 30%, var(--c-sand-line));
}
@media (max-width: 880px) {
    .about-timeline__step { padding: 1.4rem 1.4rem 1.4rem 3.6rem; }
}
.about-timeline__year-pill {
    position: absolute;
    top: -.05rem; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 0 0 4px var(--c-kalk-deep), 0 4px 12px -4px color-mix(in srgb, var(--c-ziegel) 60%, transparent);
    white-space: nowrap;
}
@media (max-width: 880px) {
    .about-timeline__year-pill {
        top: 1.4rem; left: 1.6rem;
        transform: translate(-50%, 0);
    }
}
.about-timeline__step h3 {
    font-size: 1.18rem;
    margin: 0 0 .4rem;
    color: var(--c-schiefer);
}
.about-timeline__step p {
    margin: 0;
    color: var(--c-graphit);
    font-size: .92rem;
    line-height: 1.55;
}
.about-timeline__step strong { color: var(--c-schiefer); }

/* Numbers — Mooseiche-Panel mit clip-path Diagonalen */
.about-numbers {
    position: relative;
    background: var(--c-mooseiche);
    color: var(--c-kalk);
    padding-block: clamp(5rem, 11vw, 9rem) clamp(5rem, 11vw, 9rem);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
    isolation: isolate;
}
.about-numbers::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 40% at 80% 30%, color-mix(in srgb, var(--c-kupfer) 18%, transparent), transparent 65%),
        radial-gradient(35% 35% at 10% 90%, color-mix(in srgb, var(--c-schiefer) 50%, transparent), transparent 60%);
    z-index: -1;
}
.about-numbers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    text-align: center;
}
@media (max-width: 880px) {
    .about-numbers__grid { grid-template-columns: 1fr; gap: 2rem; }
}
.about-numbers__grid article {
    display: grid;
    gap: .8rem;
    justify-items: center;
}
.about-numbers__big {
    font-family: var(--font-sans);
    font-size: clamp(5rem, 11vw, 9rem);
    line-height: .9;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--c-kalk);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--c-kalk) 0%, var(--c-kupfer-bright) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}
.about-numbers__big--mark::after {
    content: ".";
    color: var(--c-kupfer-bright);
    -webkit-text-fill-color: var(--c-kupfer-bright);
}
.about-numbers__grid p {
    margin: 0;
    color: var(--c-sand-line);
    font-size: 1rem;
    max-width: 22ch;
    line-height: 1.4;
    text-wrap: balance;
}

/* Finale-Block — letzter Editorial-Beat mit Big-Type-Statement und CTAs */
.about-finale {
    padding-block: clamp(4rem, 9vw, 7rem);
    background: var(--c-kalk);
}
.about-finale__inner { max-width: 920px; margin-inline: auto; }
.about-finale__kicker {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--c-mooseiche);
    margin: 0 0 1.4rem;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: .8rem;
}
.about-finale__kicker::before {
    content: "";
    width: 36px; height: 2px;
    background: var(--c-ziegel);
}
.about-finale__line {
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--c-schiefer);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-wrap: balance;
}
.about-finale__line em {
    font-style: normal;
    color: var(--c-ziegel);
    position: relative;
}
.about-finale__line em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .08em;
    height: .06em;
    background: var(--c-kupfer);
    opacity: .55;
}
.about-finale__cta {
    display: flex; flex-wrap: wrap; gap: .8rem;
}

/* ------------------------------------------------------------
   Mobile-Tightening — alle Über-uns-Blöcke kompakter,
   keine Sticky-Overlays, keine zu aggressiven clip-paths
   ------------------------------------------------------------ */
@media (max-width: 880px) {
    /* Hero */
    .about-hero {
        padding-block: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
    }
    .about-hero__title { max-width: none; }
    .about-hero__sub { margin-bottom: 1.6rem; }
    .about-hero__marquee { margin-top: 1.8rem; padding-block: .8rem; }
    .about-hero__marquee-track span { font-size: 1.15rem; }

    /* Big-Year-Quote: clip-path zahmer, weniger Padding, keine negativen Margins */
    .about-quote {
        padding-block: clamp(3.5rem, 9vw, 5rem);
        margin: 0;
        clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    }
    .about-quote__inner { gap: 1rem; }
    .about-quote__year {
        font-size: clamp(5.5rem, 26vw, 8rem);
        margin-bottom: .4rem;
    }
    .about-quote__copy { max-width: none; }
    .about-quote blockquote { padding-left: 1.1rem; }
    .about-quote blockquote p { font-size: 1.15rem; line-height: 1.45; }

    /* Story: kompakter Pull-Quote-Block oben, kein Sticky-Mitlauf */
    .about-story {
        padding-block: clamp(2.5rem, 7vw, 4.5rem);
    }
    .about-story__inner { gap: 1.4rem; }
    .about-story__pull {
        padding: 1rem 1.2rem 1.1rem;
        border-radius: 8px;
    }
    .about-story__pull p {
        font-size: 1.05rem;
        line-height: 1.4;
    }
    .about-story__lead { font-size: 1.08rem; line-height: 1.55; }
    .about-story__drop {
        font-size: 3rem;
        padding: .25rem .5rem .15rem 0;
    }
    .about-story__body p:not(.about-story__lead) { font-size: 1rem; }

    /* Timeline: Pill hängt halb über die Card, klare Trennung zur Überschrift */
    .about-timeline {
        padding-block: clamp(2.5rem, 7vw, 4.5rem);
    }
    .about-timeline__rail { gap: 1.4rem; }
    .about-timeline__step {
        padding: 2.4rem 1.2rem 1.2rem 1.2rem;
    }
    .about-timeline__step h3 { font-size: 1.08rem; }
    .about-timeline__step p { font-size: .9rem; }
    .about-timeline__year-pill {
        top: -.8rem;
        left: 1.1rem;
        transform: none;
        font-size: .78rem;
        padding: .32rem .7rem;
        box-shadow: 0 0 0 3px var(--c-kalk-deep);
    }
    .about-timeline__rail::before {
        left: 2.2rem;
    }

    /* Numbers: clip-path zahmer, kompakter */
    .about-numbers {
        padding-block: clamp(3.5rem, 9vw, 5rem);
        margin: 0;
        clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    }
    .about-numbers__grid { gap: 1.6rem; }
    .about-numbers__big { font-size: clamp(4.5rem, 18vw, 7rem); }
    .about-numbers__grid p { font-size: .95rem; }

    /* Finale: Buttons stacken sauber, einheitliche Breite */
    .about-finale {
        padding-block: clamp(2.5rem, 7vw, 4.5rem);
    }
    .about-finale__line { font-size: clamp(1.3rem, 5vw, 1.7rem); }
    .about-finale__cta { gap: .7rem; }
    .about-finale__cta .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 480px) {
    .about-hero__title { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
    .about-quote__year { font-size: clamp(5rem, 26vw, 6.5rem); }
    .about-numbers__big { font-size: clamp(4rem, 19vw, 5.5rem); }
    .about-finale__cta .btn { flex: 1 1 100%; }
}

/* Reduced-Motion: Diagonalen bleiben, Animationen weg */
@media (prefers-reduced-motion: reduce) {
    .about-hero__title em::after,
    .about-hero__line {
        animation: none;
        transform: none;
    }
}

/* ============================================================
   Animationen — zurückhaltend, an `prefers-reduced-motion` koppeln
   ============================================================ */

/* Reveal beim Scrollen: Default-Status = unsichtbar + 18 px nach unten,
   beim Hereinscrollen setzt das JS [data-animate-in] und es fließt hoch. */
[data-animate],
[data-animate-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity .65s cubic-bezier(.2,.65,.25,1),
        transform .65s cubic-bezier(.2,.65,.25,1);
    will-change: opacity, transform;
}
[data-animate].is-in,
[data-animate-stagger].is-in > * {
    opacity: 1;
    transform: none;
}
/* Stagger: 80 ms-Versatz pro Kind (bis 8 Kinder, Rest = letztes Delay) */
[data-animate-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger].is-in > *:nth-child(2) { transition-delay: 80ms; }
[data-animate-stagger].is-in > *:nth-child(3) { transition-delay: 160ms; }
[data-animate-stagger].is-in > *:nth-child(4) { transition-delay: 240ms; }
[data-animate-stagger].is-in > *:nth-child(5) { transition-delay: 320ms; }
[data-animate-stagger].is-in > *:nth-child(6) { transition-delay: 400ms; }
[data-animate-stagger].is-in > *:nth-child(7) { transition-delay: 480ms; }
[data-animate-stagger].is-in > *:nth-child(n+8) { transition-delay: 560ms; }

/* Hero-Inhalte fließen beim Page-Load von unten ein (ohne Scroll-Trigger).
   Die Klasse `.is-loaded` wird vom JS unten direkt an <body> gehängt. */
.hero__body > *,
.hero__media { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1); }
.is-loaded .hero__body > *:nth-child(1) { transition-delay: 60ms; }
.is-loaded .hero__body > *:nth-child(2) { transition-delay: 180ms; }
.is-loaded .hero__body > *:nth-child(3) { transition-delay: 300ms; }
.is-loaded .hero__body > *:nth-child(4) { transition-delay: 420ms; }
.is-loaded .hero__media { transition-delay: 240ms; }
.is-loaded .hero__body > *,
.is-loaded .hero__media { opacity: 1; transform: none; }

/* Mikro-Interaktionen — sanfte CTAs */
/* WCAG 2.5.5: Tap-Targets mindestens 44 × 44 px für primäre Aktionen.
   Wir setzen das per `min-block-size` auf alle .btn-Varianten. */
.btn { min-block-size: 44px; }
.btn--lg { min-block-size: 52px; }

/* Sekundäre Links in Karten haben durch Padding meist schon 44 px,
   aber wir geben einen weichen Mindestabstand */
.problem-card__cta,
.service-directory__link,
.leistung-related__item,
.faq summary,
.section-head__direct {
    min-block-size: 44px;
    display: flex;
    align-items: center;
}
.problem-card__cta { display: inline-flex; }
.problem-card__phone { min-block-size: 36px; display: inline-flex; align-items: center; }
.mobile-call { min-block-size: 44px; }
.menu-toggle { min-block-size: 44px; min-inline-size: 44px; }
.header-cta { min-block-size: 40px; }

/* Akzent-Linie unter Sektion-Eyebrows wächst beim Erscheinen */
[data-animate] .eyebrow::before,
[data-animate-stagger].is-in .eyebrow::before { transition: width .6s cubic-bezier(.2,.65,.25,1) .15s; }

/* FAQ-Antwort weich auswickeln. Browser ohne details-content-Animation
   bekommen einfach den klassischen Sprung-Effekt — kein Bruch. */
@supports (interpolate-size: allow-keywords) {
    .faq details,
    .service-directory__details {
        interpolate-size: allow-keywords;
    }
    .faq details::details-content,
    .service-directory__details::details-content {
        transition: block-size .32s ease, content-visibility .32s allow-discrete;
        block-size: 0;
        overflow: hidden;
    }
    .faq details[open]::details-content,
    .service-directory__details[open]::details-content {
        block-size: auto;
    }
}

/* Sticky Header bekommt beim Scrollen eine kleine Schatten-Andeutung — toggelt das JS via .is-scrolled. */
.site-header { transition: box-shadow .2s ease, background-color .2s ease; }
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--c-kalk) 96%, transparent);
    box-shadow: 0 2px 14px -6px rgba(30, 36, 37, .15);
}

/* Math-Captcha Fokus-Glow am Anfrage-Formular */
.inquiry-form input:focus-visible,
.inquiry-form textarea:focus-visible,
.inquiry-form select:focus-visible {
    animation: focus-pulse .9s ease;
}
@keyframes focus-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ziegel) 40%, transparent); }
    60%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-ziegel) 0%, transparent); }
    100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ziegel) 25%, transparent); }
}

/* Service-Card-Icon dreht und vergrößert sich leicht beim Hover */
.service-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.service-card__icon { transition: transform .25s ease, background-color .25s ease; }
.service-card:hover .service-card__icon {
    background: var(--c-ziegel);
    color: var(--c-elfenbein);
    transform: rotate(-6deg) scale(1.05);
}

/* Sekundäre Hover-Pfeile (Service-Cards, Reference-Cards) */
.service-card__more,
.reference-card a strong { transition: transform .2s ease; }

/* Reveal-Element ohne JS sichtbar lassen (Safety-Net) */
.no-js [data-animate],
.no-js [data-animate-stagger] > * { opacity: 1; transform: none; }

/* ============================================================
   Mobile-Politur — alle Abstände, Card-Innenmaße und Header
   bekommen auf kleinen Viewports kürzere Werte.
   ============================================================ */

@media (max-width: 880px) {
    /* Sektion-Padding ~50 % kürzer als auf Desktop */
    .section { padding-block: clamp(2rem, 7vw, 3.5rem); }
    .section-head { margin-bottom: clamp(1.6rem, 4.5vw, 2.2rem); }
    .section-head--editorial { margin-bottom: clamp(2rem, 4.5vw, 3rem); }
    .hero { padding-block: 2rem 2.4rem; }
    .page-head { padding-block: clamp(1.8rem, 5vw, 2.8rem); }
}

@media (max-width: 640px) {
    /* Hero noch enger packen */
    .hero { padding-block: 1.8rem 2.2rem; }
    .hero__inner { gap: 1.6rem; }
    .hero__title { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: 1rem; }
    .hero__lead  { font-size: 1rem; margin-bottom: 1.4rem; }
    .hero__meta  { margin-top: 1.2rem; font-size: .88rem; gap: .6rem 1rem; }

    /* CTA-Pair gestapelt, jeweils volle Breite — bessere Touch-Targets */
    .hero__cta { flex-direction: column; align-items: stretch; gap: .55rem; }
    .hero__cta .btn { justify-content: center; padding-block: .9rem; }

    /* Buttons ein bisschen kleiner auf Mobile */
    .btn--lg { padding: .85rem 1.2rem; font-size: 1rem; }

    /* Section-Head Editorial: Stacking jetzt schon ab 880 px — der Direkter-Draht-Block
       bekommt auf Mobile noch etwas weniger Innen-Padding und niedrigeres Wort-Tracking */
    .section-head__direct { padding: 1rem 1.1rem; }
    .section-head__direct-icon { width: 42px; height: 42px; }
    .section-head__direct-meta small { letter-spacing: .14em; font-size: .68rem; margin-bottom: .15rem; }
    .section-head__direct-meta strong { font-size: 1.08rem; }
    .section-head__direct-meta span { font-size: .8rem; }

    /* Problem-Cards enger */
    .problem-card { padding: 1.6rem 1.4rem 1.4rem; }
    .problem-card__icon { width: 44px; height: 44px; margin-bottom: .9rem; border-radius: 12px; }
    .problem-card h3 { font-size: 1.18rem; }
    .problem-card p { margin-bottom: .9rem; font-size: .95rem; }
    .problem-card__facts { padding-top: .8rem; gap: .45rem; font-size: .88rem; margin-bottom: 1.1rem; }

    /* Process: Step-Bubble kleiner, Cards weniger Padding */
    .process { gap: .7rem; }
    .process-step { padding: 1.1rem 1.1rem 1.2rem; }
    .process-step::before { width: 32px; height: 32px; font-size: .85rem; margin-bottom: .55rem; }
    .process-step h4 { font-size: 1rem; }

    /* Benefits */
    .benefits { gap: .7rem; }
    .benefit { padding: 1.1rem 1.2rem 1.2rem; }
    .benefit__icon { width: 36px; height: 36px; margin-bottom: .6rem; }
    .benefit h4 { font-size: .98rem; margin-bottom: .3rem; }
    .benefit p { font-size: .92rem; }

    /* Reference-Cards */
    .reference-card__body { padding: 1.2rem 1.3rem 1.4rem; }

    /* FAQ */
    .faq details { padding: .95rem 1.1rem; }

    /* Inquiry-Shell — Header und Body enger */
    .inquiry-shell { border-radius: var(--radius-m); }
    .inquiry-shell__head { padding: 1.3rem 1.2rem 1.1rem; }
    .inquiry-shell__head h2 { font-size: 1.3rem; }
    .inquiry-shell__head p { font-size: .92rem; }
    .inquiry-shell__body { padding: 1.3rem 1.2rem; }
    .inquiry-form { gap: 1.3rem; }
    .inquiry-section { gap: .65rem; }
    .inquiry-section-label { font-size: .72rem; letter-spacing: .14em; }
    .inquiry-form label { font-size: .92rem; }
    .inquiry-form input[type=text],
    .inquiry-form input[type=email],
    .inquiry-form input[type=tel],
    .inquiry-form select,
    .inquiry-form textarea { padding: .7rem .8rem; font-size: 16px; /* iOS-Zoom verhindern */ }
    .inquiry-section__head small { font-size: .78rem; }

    /* Page-Head sekundärer Seiten — H1 etwas kleiner */
    .page-head .h-display,
    .page-head h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); }
    .page-head .lead { font-size: .96rem; }
    .crumbs { font-size: .82rem; }

    /* Footer kompakter */
    .site-footer { padding: 2.6rem 0 1.4rem; }
    .footer-grid { gap: 1.8rem; }
    .footer-text { margin-top: .9rem; font-size: .9rem; }
    .footer-bottom { margin-top: 2rem; padding-top: 1.2rem; font-size: .8rem; }

    /* Service-Directory in Single-Column-Modus */
    .service-directory__body { font-size: .92rem; padding-bottom: 1.2rem; }
}

/* Sehr kleine Phones (< 540 px) */
@media (max-width: 540px) {
    .container { padding-inline: 1rem; }

    /* Header noch kompakter */
    .site-header__inner { gap: .5rem; padding-block: .5rem; }
    .brand { gap: .65rem; }
    .brand__mark { width: 40px; height: 40px; border-radius: 10px; }
    .brand__mark svg { width: 26px; height: 26px; }
    .brand__text strong { font-size: 1rem; }
    .brand__text small { display: none; }
    .header-cta { padding: .55rem .7rem; }
    .header-cta svg { width: 18px; height: 18px; }

    /* Process: 2 → 1 Spalte (war bereits) — Step-Padding nochmal kleiner */
    .process-step { padding: 1.1rem 1rem 1.2rem; }

    /* Benefits-Grid: 1 Spalte (war bereits) */
    /* Reference-Karten: 1 Spalte (war bereits) */

    /* Inquiry-Pills enger */
    .inquiry-pill { padding: .45rem .8rem; font-size: .88rem; }

    /* Mobile-Call-Pille */
    .mobile-call { padding: .8rem 1rem; font-size: .92rem; }
    .mobile-call svg { width: 16px; height: 16px; }
}


/* Reduced-Motion: alles deaktivieren */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate-stagger] > *,
    .hero__body > *,
    .hero__media {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .service-card:hover .service-card__icon,
    .problem-card:hover .problem-card__cta svg { transform: none !important; }
    .site-header.is-scrolled { transition: none !important; }
}