/* ==========================================================================
   CAD-Vision — site components.

   Loads after tokens-cad-vision.css and before forms.css. Every value is a
   token role from tokens-cad-vision.css; there is no colour value in this file.
   Source: Figma "cad-vision.at", Design File page (DESIGN.md beside the
   design system has the measurements and the contrast table).
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-p);
    line-height: var(--lh-p);
    letter-spacing: var(--ls-p);
    color: var(--text-2);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--ink);
    letter-spacing: 0;
}

.mw-module__title { margin: 0; }

h2, .mw-module__title {
    font-size: var(--fs-h3);   /* Figma: section titles use the H3 style (32) */
    line-height: var(--lh-h3);
    font-weight: var(--fw-h3);
}
/* After .mw-module__title: the heroes' titles carry both classes. */
h1, .mw-hero__title, .cv-cta__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-h1);
}
/* Figma: subpage hero titles use H3 (32), not H1 — the tag stays h1. */
.mw-banner__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-h3);
}
h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-h5); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); }

a { color: var(--accent-ink); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

::selection { background: var(--accent); color: var(--on-accent); }

img { display: block; }

/* One section rhythm. Modules that sit on a band set their own ground. */
.mw-module { padding-block: var(--section); }

/* ---- Prose (WYSIWYG output) ---------------------------------------------- */
.mw-prose > * { margin: 0; }
.mw-prose > * + * { margin-top: 1em; }
.mw-prose strong, .mw-prose b { color: var(--ink); font-weight: var(--fw-medium); }
.mw-prose a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mw-prose a:hover { text-decoration-thickness: 2px; }
.mw-prose ul, .mw-prose ol { padding-left: 1.25em; }
.mw-prose li + li { margin-top: .25em; }
.mw-prose li::marker { color: var(--ink); }
/* Figma: the service blocks' sub-heads ("UNSERE LEISTUNGEN") are Paragraph in
   uppercase and accent. Editors set them as "Überschrift 4". */
.mw-prose h3, .mw-prose h4 {
    font-size: var(--fs-p);
    line-height: var(--lh-p);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-p);
    text-transform: uppercase;
    color: var(--accent-ink);
}
.mw-prose * + h3, .mw-prose * + h4 { margin-top: 1.5em; }
.mw-prose h3 + *, .mw-prose h4 + * { margin-top: .25em; }
.mw-prose img { border-radius: var(--radius-card); height: auto; }

/* ---- Eyebrow, section head ------------------------------------------------ */
.cv-eyebrow {
    margin: 0;
    font-size: var(--fs-p-s);
    line-height: var(--lh-p-s);
    letter-spacing: var(--ls-p-s);
    color: var(--accent-ink);
}
.cv-eyebrow--on-dark { color: var(--on-dark-accent); }
.cv-eyebrow--on-photo { color: var(--on-photo); }

.cv-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    max-width: 626px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}
.cv-section-head:last-child { margin-bottom: 0; }

/* ---- Buttons --------------------------------------------------------------
   Figma Button: 1px edge, 4px radius, 15/30, label = H6 (Figtree Medium 14,
   0.08em). Hover was not designed (the variant is identical); the states
   below are derived in DESIGN.md § Derived states. */
.btn {
    gap: var(--space-2xs);
    min-height: 48px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-size: var(--fs-h6);
    font-weight: var(--fw-h6);
    line-height: 1;
    letter-spacing: var(--ls-h6);
    border: var(--border) solid var(--accent-ink);
    border-radius: var(--radius-btn);
    color: var(--accent-ink);
    background: transparent;
}
.btn:hover,
.btn--outline:hover {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent-ink);
}
.btn--filled {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent-edge);
}
.btn--filled:hover {
    background: var(--accent-hover);
    color: var(--on-accent-hover);
    border-color: var(--accent-hover);
}
.btn--on-dark {
    border-color: var(--on-dark);
    color: var(--on-dark);
}
.btn--on-dark:hover {
    background: var(--on-dark);
    color: var(--ink);
    border-color: var(--on-dark);
}
.btn--on-dark:focus-visible { outline-color: var(--focus-on-dark); }

.cv-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: var(--fs-link-s);
    font-weight: var(--fw-link-s);
    letter-spacing: var(--ls-link-s);
    color: var(--ink);
    text-decoration: none;
}
.cv-link-arrow svg { width: 16px; height: 16px; transition: transform var(--t); }
.cv-link-arrow:hover { color: var(--accent-ink); }
.cv-link-arrow:hover svg { transform: translate(2px, -2px); }

/* ---- Header ---------------------------------------------------------------
   Figma Menu: 72px, sticky, Light gray, shadow 0 4 44 #A0A0A0 12%. */
.site-top {
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header {
    background: var(--canvas);
    border-bottom: 0;
    box-shadow: var(--shadow-header);
}
.site-header__inner { min-height: var(--header-h); }
@media (min-width: 64rem) {
    .site-header__inner { min-height: var(--header-h); gap: var(--space-l); }
}

.site-branding__link { display: block; color: var(--ink); text-decoration: none; }
.site-branding__logo { width: 147px; }
.site-branding__name {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-h6);
    text-transform: uppercase;
}

.main-navigation__list { gap: var(--space-l); }
.main-navigation__list a {
    font-size: var(--fs-h6);
    font-weight: var(--fw-h6);
    letter-spacing: var(--ls-h6);
    color: var(--text-2);     /* Figma: ink at 64% → solid --text-2 (5.39:1) */
    text-decoration: none;
    position: relative;
}
.main-navigation__list a:hover { color: var(--ink); }
/* Current page: ink AND a rule, so the state is not colour alone. */
.main-navigation__list .current-menu-item > a,
.main-navigation__list a[aria-current="page"] { color: var(--ink); }
.main-navigation__list .current-menu-item > a::after,
.main-navigation__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 2px;
    background: var(--accent);
}

/* The CTA: a full-height cyan block that runs into the gutter to the edge. */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    order: 2;
    min-height: 44px;
    margin-left: auto;
    padding: 0 var(--space-s);
    font-size: var(--fs-h6);
    font-weight: var(--fw-h6);
    letter-spacing: var(--ls-h6);
    background: var(--accent);
    color: var(--on-accent);
    text-decoration: none;
    border-radius: var(--radius-none);
    transition: background-color var(--t), color var(--t);
}
.site-header__cta:hover {
    background: var(--accent-hover);
    color: var(--on-accent-hover);
}
@media (min-width: 64rem) {
    .main-navigation { margin-left: auto; }
    /* To the viewport's edge at every width, as in the 1440 frame: the gutter
       plus whatever the capped .wrap leaves beside it. Clipped, so a classic
       scrollbar (100vw includes it) never causes sideways scrolling. */
    .site-header { overflow-x: clip; }
    .site-header__cta {
        margin-left: 0;
        margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--max)) / 2));
        padding: var(--nav-cta-pad-y) var(--nav-cta-pad-x);
    }
}
@media (max-width: 63.99rem) {
    .site-header__inner { flex-wrap: wrap; gap: 0; }
    .site-branding { flex: 1 1 0; min-width: 0; margin-right: var(--space-xs); }
    .site-branding__logo { width: 116px; }
    .site-branding__name { font-size: var(--fs-p-s); }
    .site-header__cta { order: 2; margin-block: 12px; padding-inline: var(--space-xs); }
    .nav-toggle { order: 3; margin-left: var(--space-xs); }
    #site-navigation.is-open { background: var(--surface); }
    #site-navigation.is-open .main-navigation__list a { font-size: var(--fs-p); color: var(--ink); }
}

/* ---- Home hero (intro) -----------------------------------------------------
   Figma Frame 8: white, 768 high under the menu; copy left; the cut-out gear
   photograph bleeds off the right edge. */
.mw-hero {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    padding-block: var(--section);
}
.mw-hero__inner {
    display: grid;
    align-items: center;
    gap: var(--space-xl);
}
.mw-hero__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    max-width: 564px;
}
.mw-hero__title { margin-bottom: var(--space-2xs); }
.mw-hero__prose { color: var(--text-2); }
.mw-hero__prose p:first-child { color: var(--ink); }
.mw-hero__text .btn { margin-top: var(--space-xs); }

.mw-hero__dots {
    display: flex;
    gap: 0;
    margin-top: var(--space-xs);
    margin-left: -12px;
}
.mw-hero__dot {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.mw-hero__dot::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-ink);
    transform: translate(-50%, -50%);
    transition: width var(--t), height var(--t);
}
/* Active = larger dot (21px in Figma): a shape change, not colour alone. */
.mw-hero__dot[aria-pressed="true"]::before { width: 21px; height: 21px; background: var(--accent); }

/* Below the desktop breakpoint the copy stands alone: the gear photograph and
   its dots only make sense beside the text, not stacked under it. */
.mw-hero__media,
.mw-hero__dots { display: none; }

@media (min-width: 64rem) {
    .mw-hero { min-height: calc(768px - var(--header-h)); display: flex; align-items: center; }
    .mw-hero__inner { width: 100%; grid-template-columns: minmax(0, 564px) 1fr; }
    .mw-hero__dots { display: flex; }
    .mw-hero__media {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50vw;
        max-width: 760px;
    }
    /* Every slide is sized by the box's width and pinned to its top-right
       corner, so all of them share the first one's scale and position. The
       cut-outs differ in height; a taller one runs on below and the hero clips
       it, as the Figma frame does. */
    .mw-hero__img {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: auto;
        opacity: 0;
        transition: opacity .8s ease-out;
    }
    .mw-hero__img.is-active { opacity: 1; }
}

/* ---- Subpage hero (heading) ------------------------------------------------
   Figma: photo, #000 at 64%, padding 123 / 120 / 73, white copy. */
.mw-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 420px;
    padding-block: clamp(80px, 8.5vw, 123px) clamp(56px, 5vw, 73px);
    background: var(--dark);
    color: var(--on-photo);
}
.mw-banner__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mw-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--scrim);
}
.mw-banner__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
}
.mw-banner__title { color: var(--on-photo); }
.mw-banner__prose { max-width: 585px; color: var(--on-photo); }
.mw-banner__prose a { color: var(--on-photo); }
.mw-banner .btn { margin-top: var(--space-xs); }
.mw-banner :focus-visible { outline-color: var(--focus-on-dark); }
@media (min-width: 64rem) { .mw-banner { min-height: 501px; } }

/* ---- Service cards ----------------------------------------------------------
   Figma: Light gray band, 120 padding, 60 to the grid; 4 × 288 cards, 16 gap;
   white, 12 radius, 1px Title @25%, 24 padding / 24 gap; no shadow. */
.mw-cards { background: var(--canvas); }
.mw-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 64rem) { .mw-cards__grid { grid-template-columns: repeat(4, 1fr); } }
.mw-cards__item { display: flex; min-width: 0; }   /* a long word must not widen the card past its column */
.mw-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-s);
    min-height: 184px;
    padding: var(--card-pad);
    background: var(--surface);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-card);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow var(--t), border-color var(--t);
}
.mw-card__icon { width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 47.99rem) {
    .mw-card { min-height: 0; padding: var(--space-xs); gap: var(--space-xs); }
    .mw-card__icon { width: 48px; height: 48px; }
    .mw-card__title { font-size: var(--fs-p); line-height: 1.3; }
}
/* German compounds ("Arbeitsmittelprüfung") are wider than a phone-width card:
   hyphenate them (html lang is de), and break as a last resort. */
.mw-card__title { margin-top: auto; hyphens: auto; overflow-wrap: break-word; }
/* Link card: the edge becomes a 2px --accent-ink frame (shape and colour). */
.mw-card.is-link:hover,
.mw-card.is-link:focus-visible {
    border-color: var(--accent-ink);
    box-shadow: inset 0 0 0 1px var(--accent-ink);
}
.mw-card.is-link:hover .mw-card__title { color: var(--accent-ink); }

/* ---- Partner logos ---------------------------------------------------------- */
.mw-partners { background: var(--surface); }
.mw-partners__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-s) var(--space-l);
    margin: 0;
    padding: 0;
    list-style: none;
}
.mw-partners__logo { width: auto; max-width: 160px; height: 48px; object-fit: contain; }
.mw-partners__link { display: block; }

/* ---- Text + image (service blocks) ----------------------------------------
   Figma Frame 121: 120 padding, image 420 wide, 12 radius, 0.5px black 20%;
   text column 700; the two sit space-between. */
.mw-text-image.on-canvas { background: var(--canvas); }
.mw-text-image.on-surface { background: var(--surface); }
/* Selectors carry the .mw-image-left/right modifier on purpose: main.css has
   modifier rules of that weight that would otherwise keep two columns (and
   its own ratio) on every screen. Below desktop: one column, image first. */
.mw-text-image.mw-image-left .mw-text-image__inner,
.mw-text-image.mw-image-right .mw-text-image__inner {
    display: grid;
    gap: var(--space-l);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}
.mw-text-image.mw-image-left .mw-text-image__media,
.mw-text-image.mw-image-right .mw-text-image__media { order: 0; }
.mw-text-image.mw-image-left .mw-text-image__text,
.mw-text-image.mw-image-right .mw-text-image__text { order: 1; }
.mw-text-image__media { max-width: 520px; }
.mw-text-image__text { display: flex; flex-direction: column; gap: var(--space-s); }
.cv-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    outline: var(--border-image) solid var(--image-edge);
    outline-offset: calc(-1 * var(--border-image));
}
@media (min-width: 64rem) {
    .mw-text-image.mw-image-left .mw-text-image__inner,
    .mw-text-image.mw-image-right .mw-text-image__inner { gap: var(--space-3xl); }
    .mw-text-image.mw-image-left .mw-text-image__inner { grid-template-columns: minmax(0, 420fr) minmax(0, 700fr); }
    .mw-text-image.mw-image-right .mw-text-image__inner { grid-template-columns: minmax(0, 700fr) minmax(0, 420fr); }
    .mw-text-image.mw-image-right .mw-text-image__media { order: 2; }
    .mw-text-image__media { max-width: none; }
}
/* No image: the text takes the full measure instead of leaving a hole. */
.mw-text-image.mw-text-image .mw-text-image__inner:not(:has(.mw-text-image__media)) { grid-template-columns: minmax(0, 800px); }

/* Mobile menu: the current page is marked by a short rule, not one that runs
   the full width and reads as a divider. */
#site-navigation.is-open .main-navigation__list a[aria-current="page"]::after,
#site-navigation.is-open .main-navigation__list .current-menu-item > a::after { right: auto; width: 24px; bottom: 8px; }

@media print {
    .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- Team ---------------------------------------------------------------- */
.mw-team { background: var(--canvas); }
.mw-person {
    display: grid;
    gap: var(--space-l);
    align-items: start;
}
.mw-person + .mw-person { margin-top: var(--space-2xl); }
.mw-person__media { position: relative; max-width: 300px; }
/* The tilted plate behind the portrait, from the Figma — the one playful
   gesture on the site. Drawn from tokens, no image. */
.mw-person__media::before {
    content: "";
    position: absolute;
    inset: 4% -6% -4% 6%;
    z-index: 0;
    border-radius: var(--radius-card);
    background: var(--line);
    transform: rotate(-4deg);
}
.mw-person__img { position: relative; z-index: 1; }
.mw-person__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.mw-person__card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding: var(--space-s);
    background: var(--surface);
    border-radius: var(--radius-card);
}
.mw-person__name { font-size: var(--fs-h5); line-height: var(--lh-h5); }
@media (min-width: 64rem) {
    .mw-person { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-2xl); }
    .mw-person:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) 300px; }
    .mw-person:nth-of-type(even) .mw-person__media { order: 2; }
    .mw-person:nth-of-type(even) .mw-person__media::before { transform: rotate(4deg); inset: 4% 6% -4% -6%; }
    .mw-person__card { margin-left: calc(-1 * var(--space-2xl) - 40px); position: relative; z-index: 2; }
    .mw-person:nth-of-type(even) .mw-person__card { margin-left: 0; margin-right: calc(-1 * var(--space-2xl) - 40px); }
}

/* Fact lists: label over value (contact block, person card). */
.cv-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    margin: 0;
}
.cv-facts dt {
    font-size: var(--fs-link-s);
    font-weight: var(--fw-link-s);
    letter-spacing: var(--ls-link-s);
    line-height: 1.4;
    color: var(--text-2);
}
.cv-facts dd {
    margin: 4px 0 0;
    font-size: var(--fs-p-s);
    line-height: var(--lh-p-s);
    color: var(--ink);
}
.cv-facts dd a { color: inherit; text-decoration: none; }
.cv-facts dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cv-facts address { font-style: normal; }

/* ---- Contact block ----------------------------------------------------------
   Figma: Secondary panel 1200 × 456, 12 radius; info at 80 inset; the white
   form card (480, 48/40, gap 32, 12 radius) sits 80 from the panel's top and
   runs past its bottom edge. The fields' own rhythm is in forms.css (.cv-float). */
.mw-contact { background: var(--canvas); }
.mw-contact__panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-s);
    background: var(--secondary);
    color: var(--on-secondary);
    border-radius: var(--radius-card);
}
/* The Figma gear group (613 × 508, three gears): white at 20% inside a 50% group
   = 10%. The SVG is a mask, so the colour is a token, not a value in the file.
   Stacked: the whole group, uncut, in the corner beside the contact details
   (it shares the info's grid cell and sits behind it). */
.mw-contact__gear {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    align-self: end;
    width: min(240px, 55%);
    aspect-ratio: 613 / 508;
    background: color-mix(in srgb, var(--on-secondary) 10%, transparent);   /* decoration, not text */
    -webkit-mask: url("../images/contact-gears.svg") left top / 100% 100% no-repeat;
            mask: url("../images/contact-gears.svg") left top / 100% 100% no-repeat;
    pointer-events: none;
}
.mw-contact__info { grid-row: 1; grid-column: 1; position: relative; display: flex; flex-direction: column; gap: var(--space-m); }
.mw-contact .mw-module__title { color: var(--on-secondary); font-size: var(--fs-h3); }
.cv-facts--on-secondary { flex-direction: column; flex-wrap: nowrap; gap: var(--space-s); }
.cv-facts--on-secondary dt { color: var(--on-secondary-2); }
.cv-facts--on-secondary dd { color: var(--on-secondary); font-size: var(--fs-p); line-height: var(--lh-p); }
.mw-contact :focus-visible { outline-color: var(--focus-on-dark); }

.mw-contact__form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--form-card-pad);
    background: var(--surface);
    color: var(--text-2);
    border-radius: var(--radius-card);
}
.mw-contact__form :focus-visible { outline-color: var(--focus); }
.mw-contact__form-title { font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--ink); }
@media (max-width: 47.99rem) {
    .mw-contact__form { padding: var(--space-m) var(--space-s); }
    /* Phones: the panel runs edge to edge, its content (and the form card) on the page gutter. */
    .mw-contact__panel {
        padding-inline: var(--gutter);
        margin-inline: calc(-1 * var(--gutter));
        border-radius: 0;
    }
}
@media (min-width: 64rem) {
    .mw-contact__panel {
        grid-template-columns: minmax(0, 1fr) 480px;
        gap: var(--space-l);
        padding: 80px;
        overflow: visible;
    }
    /* Figma: 290 × 346 at left 350, top 110 of a 1200 × 445 panel — its right edge
       meets the form card and the panel cuts its last 11px. Anchored to the card
       (80 padding + 480 column) and the panel's bottom so it holds at every width. */
    .mw-contact__gear {
        position: absolute;
        right: calc(80px + 480px);
        bottom: 0;
        width: 290px;
        height: 335px;
        aspect-ratio: auto;
        -webkit-mask-size: 613px 508px;   /* 1:1, so the box crops the group as Frame 69 does */
                mask-size: 613px 508px;
    }
    .mw-contact__info { grid-row: auto; grid-column: auto; }
    .mw-contact.has-form .mw-contact__panel { padding-bottom: 80px; margin-bottom: 75px; }
    .mw-contact__form { margin-bottom: -155px; }
}

/* ---- CTA band (footer.php) ------------------------------------------------
   Figma: Background dark, 80 / 120, H1 white, cyan eyebrow, white outline. */
.cv-cta {
    padding-block: var(--section-sm);
    background: var(--dark);
    color: var(--on-dark);
}
.cv-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-m);
}
.cv-cta__text { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 640px; }
.cv-cta__title { margin: 0; color: var(--on-dark); }
.cv-cta .btn::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.cv-cta :focus-visible { outline-color: var(--focus-on-dark); }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer {
    padding-block: var(--section-sm) 0;
    background: var(--dark);
    color: var(--on-dark);
    border-top: var(--border) solid var(--line-on-dark);
}
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }
.site-footer__inner {
    gap: var(--space-xl) var(--space-l);
    padding-bottom: var(--section-sm);
    border-bottom: var(--border) solid var(--line-on-dark);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
@media (min-width: 64rem) {
    .site-footer__inner { grid-template-columns: 1.3fr .8fr 1.2fr 1fr; gap: var(--space-l); }
}
.site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__badge { width: 72px; height: 72px; object-fit: contain; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-s); }
.site-footer__heading {
    font-size: var(--fs-h7);
    line-height: var(--lh-h7);
    font-weight: var(--fw-h7);
    letter-spacing: var(--ls-h7);
    color: var(--on-dark-2);
}
.site-footer__list { gap: 4px; }
.site-footer__list a,
.site-footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--on-dark);
    text-decoration: none;
}
.site-footer__list a:hover,
.site-footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-s); margin: 0; }
.site-footer__contact dt { font-size: var(--fs-p); color: var(--on-dark-2); }
.site-footer__contact dd { margin: 4px 0 0; font-size: var(--fs-link-l); letter-spacing: var(--ls-link-l); }

.cv-social { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.cv-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 48px;
    color: var(--on-dark);
    border: var(--border) solid var(--line-on-dark);
    border-radius: var(--radius-btn);
    transition: background-color var(--t), color var(--t), border-color var(--t);
}
.cv-social__link:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.cv-social__icon { width: 22px; height: 22px; }

.site-footer__bottom { padding-block: var(--space-s); gap: var(--space-xs); }
.site-footer__copyright {
    font-size: var(--fs-p-es);
    font-weight: var(--fw-p-es);
    letter-spacing: var(--ls-p-es);
    color: var(--on-dark-2);
}
/* Side by side at every width (main.css stacks them below 48rem); they wrap only if they no longer fit. */
.site-footer__legal-list { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-s); }
.site-footer__legal-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-link-s);
    font-weight: var(--fw-link-s);
    color: var(--on-dark);
    text-decoration: none;
}
.site-footer__legal-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Starter modules kept for the requirements, brought onto the tokens --- */
.mw-faq__list { border-top: var(--border) solid var(--line-strong); }
.mw-faq__item { border-bottom: var(--border) solid var(--line-strong); }
.mw-faq__toggle { color: var(--ink); font-size: var(--fs-h5); min-height: 44px; }
.mw-faq__icon { border-color: var(--line-strong); }
.mw-faq__toggle[aria-expanded="true"] .mw-faq__icon {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent-edge);
}
.mw-faq__toggle:focus-visible { outline-color: var(--focus); }

/* Plain pages (Impressum, Datenschutz) */
.plain-page { padding-block: var(--section); }
.plain-page__title { margin-bottom: var(--space-l); }
.plain-page__body.mw-prose h2 { font-size: var(--fs-h4); font-weight: var(--fw-medium); margin-top: 1.75em; }
.plain-page__body.mw-prose h3 { color: var(--ink); text-transform: none; font-weight: var(--fw-medium); }

/* Admin-only notice for a layout without a template part. */
.acf-missing-template { border-color: var(--error); background: var(--surface); color: var(--error); }

/* Home hero copy (Figma): "Was heißt das?" in ink, the answer indented. */
.mw-hero__prose p:has(+ blockquote) { color: var(--ink); margin-top: var(--space-s); }
/* The answer sits directly under the question: no indent, no paragraph gap. */
.mw-hero__prose > blockquote { margin: 4px 0 0; }
/* Badges keep their own ratio (the Ingenieurbüros mark is landscape). */
.site-footer__badge { width: auto; max-width: 160px; height: 72px; }

/* Text (1 Spalte): column width as a share of the 1200 content measure. */
.mw-one-column { background: var(--surface); }
.mw-one-column--4 .mw-one-column__body { max-width: calc(var(--max-content) * 4 / 12); }
.mw-one-column--5 .mw-one-column__body { max-width: calc(var(--max-content) * 5 / 12); }
.mw-one-column--6 .mw-one-column__body { max-width: calc(var(--max-content) * 6 / 12); }
.mw-one-column--7 .mw-one-column__body { max-width: calc(var(--max-content) * 7 / 12); }
.mw-one-column--8 .mw-one-column__body { max-width: calc(var(--max-content) * 8 / 12); }
.mw-one-column--9 .mw-one-column__body { max-width: calc(var(--max-content) * 9 / 12); }
.mw-one-column--10 .mw-one-column__body { max-width: calc(var(--max-content) * 10 / 12); }
.mw-one-column__body h2 { margin-bottom: var(--space-l); }
.mw-one-column__body img { width: 100%; }
.hr { border-top: var(--border) solid var(--line); }

/* ---- Motion ----------------------------------------------------------------
   Kept to the brand's own idea — parts moving into place, gears turning — and
   to one reveal per content group, not per element. All of it is off for
   visitors who ask for reduced motion (main.css also zeroes every duration). */
.mw-module[id] { scroll-margin-top: var(--header-h); }

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

    /* Hero, once on load: the copy settles, the gear turns into place. */
    .mw-hero__text > * { animation: cv-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
    .mw-hero__text > :nth-child(2) { animation-delay: .06s; }
    .mw-hero__text > :nth-child(3) { animation-delay: .12s; }
    .mw-hero__text > :nth-child(4) { animation-delay: .18s; }
    .mw-hero__text > :nth-child(n+5) { animation-delay: .24s; }
    .mw-hero__media { animation: cv-turn-in 1.2s cubic-bezier(.2, .7, .2, 1) .1s both; transform-origin: 55% 45%; }

    /* On scroll: script.js marks the groups and adds .js-reveal to <html>, so
       without JavaScript nothing is ever hidden. --i staggers card rows. */
    .js-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1);
        transition-delay: calc(var(--i, 0) * 70ms);
    }
    .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

}

@keyframes cv-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cv-turn-in { from { opacity: 0; transform: rotate(-10deg) translateX(32px); } }