/* ==========================================================================
   Making the Grade – Startseite „Circuit Blue“
   Reines CSS ohne Framework: Cascade Layers, Custom Properties, Nesting,
   Container Queries, :has(), clamp().
   ========================================================================== */

@layer reset, fonts, tokens, base, layout, components, utilities;

/* ---------- Reset ---------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    img, svg { display: block; max-inline-size: 100%; }
    button, input, textarea, select { font: inherit; color: inherit; }
    ul[role="list"], ol { list-style: none; padding: 0; }

    /* !important in der ersten Ebene schlägt alle späteren Ebenen */
    [hidden] { display: none !important; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@layer fonts {
    @font-face {
        font-family: "Space Grotesk";
        font-style: normal;
        font-weight: 300 700;
        font-display: swap;
        src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
        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: "Space Grotesk";
        font-style: normal;
        font-weight: 300 700;
        font-display: swap;
        src: url("../fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
        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;
    }
    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
        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: "Inter";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
        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;
    }
}

/* ---------- Design-Tokens (Styleguide „Circuit Blue“) ---------- */
@layer tokens {
    :root {
        color-scheme: dark;

        /* Farben – Kontrast gegen Navy in Klammern */
        --c-navy: #0B1F3A;           /* Grundfläche */
        --c-navy-2: #0F2A4D;         /* Sekundäre Fläche */
        --c-navy-3: #132F58;         /* Karten */
        --c-cyan: #00D4FF;           /* Akzent, CTA (9,3 : 1) */
        --c-off: #F7F9FC;            /* Überschriften (15,7 : 1) */
        --c-text: #B9C4D6;           /* Fließtext (9,4 : 1) */
        --c-muted: #8A97AD;          /* Meta, Fußzeile (5,6 : 1) */
        --c-line: #6B7A93;           /* Formularrahmen (3,8 : 1) */
        --c-slate: #4A5568;          /* nur Flächen, nie Text */
        --c-amber: #FFB020;          /* Status, Fehler (9,0 : 1) */
        --c-spark: #E6FBFF;          /* Kern der Stromimpulse */

        --c-cyan-soft: rgb(0 212 255 / .08);
        --c-cyan-border: rgb(0 212 255 / .18);
        --c-cyan-strong: rgb(0 212 255 / .35);
        --c-hairline: rgb(255 255 255 / .08);

        /* Schrift */
        --font-display: "Space Grotesk", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
        --font-body: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
        --fs-h1: clamp(2.375rem, 1.9rem + 2vw, 3.25rem);    /* 38 → 52 px */
        --fs-h2: clamp(1.625rem, 1.45rem + .8vw, 2rem);     /* 26 → 32 px */
        --fs-h3: 1.25rem;                                   /* 20 px */
        --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.125rem); /* 17 → 18 px */
        --fs-body: 1rem;
        --fs-small: .875rem;
        --fs-eyebrow: .75rem;

        /* Abstände (4er-Raster) */
        --space-1: .25rem;
        --space-2: .5rem;
        --space-3: .75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;
        --space-9: 6rem;
        --section-pad: var(--space-9);   /* 6rem, auf allen Bildschirmgrößen */
        --gutter: clamp(1.25rem, .5rem + 3.2vw, 4rem);      /* 20 → 64 px */
        --content-max: 82rem;                               /* 1312 px */

        --radius: 1rem;
        --radius-sm: .5rem;
        --radius-lg: 1.25rem;
        --bevel: .625rem;            /* abgeschrägte Button-Ecken */
        --tap: 2.75rem;              /* Mindestgröße für Bedienelemente (44 px) */
        --header-h: 5.5rem;
    }
}

/* ---------- Basis ---------- */
@layer base {
    html {
        font-family: var(--font-body);
        font-size: 100%;
        line-height: 1.6;
        background: var(--c-navy);
        color: var(--c-text);
        scroll-behavior: smooth;
        scroll-padding-block-start: var(--header-h);
        -webkit-text-size-adjust: 100%;
    }

    body {
        position: relative;
        min-block-size: 100dvh;
        overflow-x: clip;
    }

    h1, h2, h3 {
        font-family: var(--font-display);
        color: var(--c-off);
        line-height: 1.2;
        text-wrap: balance;
    }
    h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.12; }
    h2 { font-size: var(--fs-h2); font-weight: 700; }
    h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
    p { text-wrap: pretty; }

    a {
        color: var(--c-text);
        text-decoration: none;
        &:hover { color: var(--c-cyan); }
    }

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

    main:focus { outline: none; }
}

/* ---------- Layout ---------- */
@layer layout {
    .container {
        inline-size: min(100%, var(--content-max));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }
    .container--narrow { --content-max: 48rem; }

    /* Alle Inhalte liegen über der Hintergrund-Animation */
    body > :not(.page-bg, .sprite) { position: relative; z-index: 1; }

    .section { padding-block: var(--section-pad); }
    .section--alt { background: rgb(15 42 77 / .7); }
    .section--contact { padding-block-start: var(--space-6); }

    .section__head {
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        max-inline-size: 40rem;
        margin: 0 auto clamp(var(--space-6), 2rem + 2vw, 3.5rem);
        text-align: center;
    }
}

/* ---------- Komponenten ---------- */
@layer components {

    /* SVG-Sprite unsichtbar halten */
    .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

    .icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        flex-shrink: 0;
    }
    .icon--sm { inline-size: 1rem; block-size: 1rem; }

    /* Skip-Link */
    .skip-link {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        z-index: 20;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        background: var(--c-cyan);
        color: var(--c-navy);
        font-weight: 600;
        translate: 0 -200%;

        &:focus-visible { translate: 0; color: var(--c-navy); }
    }

    .eyebrow {
        font-family: var(--font-display);
        font-size: var(--fs-eyebrow);
        font-weight: 600;
        letter-spacing: .125em;
        text-transform: uppercase;
        color: var(--c-cyan);
    }
    .lead { font-size: var(--fs-lead); }
    .muted { color: var(--c-text); }

    /* ---- Buttons (abgeschrägte Ecken als Markenmerkmal) ---- */
    .btn {
        --clip: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: 0.6rem 1.75rem;
        border: 0;
        font-family: var(--font-body);
        font-size: .9375rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        clip-path: var(--clip);
        transition: filter .15s, background-color .15s, border-color .15s;

        /* Äußerer Fokusring würde von der Schräge abgeschnitten → innenliegend */
        &:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
        &:disabled, &[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
    }
    .btn--small { min-block-size: var(--tap); padding-inline: 1.125rem; font-size: var(--fs-small); }

    /* Kompakter CTA; ein Lichtpunkt wandert umlaufend über die Border
       (::before-Ring) – kein Glow/Halo. Die rotierende conic-gradient legt
       ein helles Segment über den Basis-Rahmen, der Winkel wird animiert. */
    .btn--cta { padding-inline: 2rem; min-block-size: 2rem; }
    @property --cta-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
    }
    .btn.btn--cta::before {
        background:
            conic-gradient(from var(--cta-angle),
                transparent 270deg,
                var(--c-cyan) 330deg,
                var(--c-spark) 350deg,
                transparent 360deg),
            var(--frame);
        animation: cta-border-run 3s linear infinite;
    }
    @keyframes cta-border-run { to { --cta-angle: 360deg; } }

    .btn--secondary {
        background: transparent;
        color: var(--c-off);
        &:hover { color: var(--c-off); background: rgb(247 249 252 / .08); --frame: var(--c-off); }
        &:disabled, &[aria-disabled="true"] {
            color: rgb(247 249 252 / .5);
            --frame: rgb(247 249 252 / .25);
            background: rgb(247 249 252 / .04);
        }
    }

    /* Rahmen, der den abgeschrägten Ecken folgt: Ring als evenodd-Polygon
       (ein normales border würde von clip-path an den Schrägen abgeschnitten). */
    .btn--secondary, .icon-btn {
        --frame: rgb(247 249 252 / .55);
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: var(--frame);
            pointer-events: none;
            --b: var(--bevel);
            clip-path: polygon(evenodd,
                var(--b) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--b)),
                calc(100% - var(--b)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--b), var(--b) 0,
                var(--b) 1px, 1px var(--b), 1px calc(100% - var(--b)), var(--b) calc(100% - 1px),
                calc(100% - var(--b)) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--b)),
                calc(100% - 1px) var(--b), calc(100% - var(--b)) 1px, var(--b) 1px);
        }
    }
    .icon-btn::before { --b: 8px; }
    .btn--ghost {
        min-block-size: var(--tap);
        padding-inline: var(--space-1);
        background: transparent;
        color: var(--c-cyan);
        clip-path: none;
        &:hover { color: var(--c-cyan); text-decoration: underline; text-underline-offset: 4px; }
        &:focus-visible { outline-offset: 2px; }
    }

    .icon-btn {
        --clip: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
        display: inline-grid;
        place-items: center;
        inline-size: 3rem;
        block-size: 3rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--c-off);
        cursor: pointer;
        clip-path: var(--clip);
        &:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
        &:hover { background: rgb(247 249 252 / .08); }
    }

    /* ---- Kopfzeile & Navigation ---- */
    .site-header {
        position: sticky;
        inset-block-start: 0;
        z-index: 10;
        border-block-end: 1px solid var(--c-hairline);
        background: rgb(11 31 58 / .85);
        backdrop-filter: blur(10px);
    }
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        min-block-size: var(--header-h);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        margin-inline-end: auto;   /* Logo links, restliche Leiste nach rechts */
        min-block-size: var(--tap);
        font-family: var(--font-display);
        font-size: 1.1875rem;
        font-weight: 600;
        color: var(--c-off);
        &:hover { color: var(--c-off); }
    }
    .brand__icon { inline-size: auto; block-size: 1.75rem; }

    .site-header__toggle { display: none; }
    .icon--close { display: none; }

    .site-nav {
        display: flex;
        align-items: center;
        gap: 2.25rem;
    }
    /* CTA ist jetzt immer sichtbar (außerhalb von <nav>); auf Desktop rechts
       hinter der Linkliste. */
    .site-nav__cta { order: 1; }
    .site-nav__list {
        display: flex;
        gap: 2.25rem;
        list-style: none;
        padding: 0;
        font-size: var(--fs-small);
        font-weight: 500;

        & a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
    }

    /* Mobil: Menü-Button, ausklappbare Liste (nur mit JavaScript; ohne JS bleibt die Liste sichtbar) */
    @media (max-width: 47.99rem) {
        :root { --header-h: 4rem; }

        .site-header__inner { flex-wrap: wrap; gap: 0 var(--space-3); }
        /* Logo + Schriftzug teilen sich die Zeile mit dem Menü-Button.
           min-block-size hält die Zeile auf Header-Höhe, damit sie beim
           Ausklappen der Navigation nicht nach oben springt (Layout-Shift).
           white-space: nowrap verhindert einen Umbruch des Schriftzugs. */
        .brand { flex: 1 1 0; min-inline-size: 0; min-block-size: var(--header-h); gap: var(--space-2); font-size: 1.0625rem; white-space: nowrap; }
        .brand__icon { block-size: 1.25rem; }

        /* CTA in der mobilen Ansicht ausblenden */
        .site-nav__cta { display: none; }

        @media (scripting: enabled) {
            .site-header__toggle { display: inline-grid; inline-size: 2.25rem; block-size: 2.25rem; }
            .site-header__toggle .icon { inline-size: 1.25rem; block-size: 1.25rem; }

            .site-nav {
                display: none;
                flex-basis: 100%;
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-4);
                padding-block: var(--space-2) var(--space-5);
            }
            [data-nav-open] .site-nav { display: flex; }
            [data-nav-open] .icon--open { display: none; }
            [data-nav-open] .icon--close { display: block; }
        }

        .site-nav__list {
            flex-direction: column;
            gap: 0;
            font-size: 1rem;

            & a {
                display: flex;
                min-block-size: 3rem;
                border-block-end: 1px solid rgb(255 255 255 / .06);
            }
        }
    }

    /* ---- Hero ---- */
    .hero {
        /* Gleicher Hintergrund wie die Kontakt-Section: kein eigener Verlauf,
           es wirkt der Body-Hintergrund (var(--c-navy)) mit der Animation. */
        overflow: hidden;
    }
    .hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        align-items: center;
        gap: var(--space-8);
        padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(4.5rem, 3rem + 5vw, 7rem);
    }
    .hero__copy {
        display: grid;
        gap: 1.375rem;
        max-inline-size: 37.5rem;
    }
    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        margin-block-start: var(--space-2);
    }
    .hero__visual {
        justify-self: end;
        inline-size: 100%;
        max-inline-size: 32rem;
    }
    .hero__visual {
        container-type: inline-size;
        display: grid;
        justify-items: center;
        gap: .375rem;
    }
    /* Schriftzug über und Claim unter dem Signet: Navy-Fläche mit feiner Cyan-Kontur, ohne Leuchteffekt */
    .hero__wordmark,
    .hero__tagline {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 1.05;
        white-space: nowrap;
        text-align: center;
        color: var(--c-navy);
        -webkit-text-stroke: 1px var(--c-cyan);
        paint-order: stroke fill;
    }
    .hero__wordmark {
        font-size: clamp(1.5rem, 9.6cqi, 3.4rem);   /* passt sich der Breite des Signets an, immer einzeilig */
        letter-spacing: .03em;
    }
    .hero__tagline {
        font-size: clamp(.875rem, 4.4cqi, 1.5rem);
        letter-spacing: .18em;
        text-transform: uppercase;
        -webkit-text-stroke-width: .8px;             /* zartere Kontur als beim Schriftzug */

        /* Drei Spalten an der Aussparung unten im Signet (43,6 % – 60,7 % der Breite):
           „Digital“ endet links davon, „and“ steht darunter, „Analog“ beginnt rechts davon. */
        justify-self: stretch;
        display: grid;
        grid-template-columns: 43.6% 17.1% 1fr;

        & > span { margin-inline-end: -.18em; }      /* Sperrung nach dem letzten Buchstaben ausgleichen */
        & > :first-child { justify-self: end; }
        & > :nth-child(2) { justify-self: center; }
        & > :last-child  { justify-self: start; }
    }

    /* ---- Signet: leuchtende Kontur mit Stromimpulsen ---- */
    .signet {
        inline-size: 100%;
        block-size: auto;
        overflow: visible;
    }
    .signet__shape {
        fill: rgb(0 212 255 / .14);
        stroke: var(--c-cyan);
        stroke-width: 2.5;
        stroke-linejoin: round;
        animation: signet-glow 4.5s ease-in-out infinite;
    }
    @keyframes signet-glow {
        0%, 100% { filter: drop-shadow(0 0 4px rgb(0 212 255 / .55)) drop-shadow(0 0 14px rgb(0 212 255 / .25)); }
        50%      { filter: drop-shadow(0 0 6px rgb(0 212 255 / .9))  drop-shadow(0 0 22px rgb(0 212 255 / .45)); }
    }
    .signet__spark {
        fill: none;
        stroke: var(--c-spark);
        stroke-width: 3.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 4 96;
        filter: drop-shadow(0 0 3px var(--c-cyan)) drop-shadow(0 0 9px var(--c-cyan));
        animation: signet-spark 9s linear infinite;
    }
    .signet__spark--late { animation-delay: -4.5s; }
    @keyframes signet-spark {
        from { stroke-dashoffset: 0; }
        to   { stroke-dashoffset: -100; }
    }

    @media (prefers-reduced-motion: reduce) {
        .signet__spark { display: none; }
        .signet__shape { animation: none; filter: drop-shadow(0 0 5px rgb(0 212 255 / .6)); }
    }

    @media (max-width: 47.99rem) {
        .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
        .hero__actions { flex-direction: column; align-items: stretch; }
        .hero__visual { justify-self: center; max-inline-size: 20rem; }
    }

    /* ---- Leistungs-Karten ---- */
    .cards {
        display: grid;
        align-items: start;      /* aufgeklappte Karte wächst allein nach unten */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: clamp(var(--space-4), .5rem + 1.5vw, 1.75rem);
    }
    .card {
        display: flex;
        flex-direction: column;
        gap: .875rem;
        padding: clamp(var(--space-5), 1rem + 1vw, var(--space-6));
        border: 1px solid var(--c-cyan-border);
        border-radius: var(--radius);
        background: var(--c-navy-3);
    }
    .card__tile {
        display: grid;
        place-items: center;
        inline-size: 3.5rem;
        block-size: 3.5rem;
        border: 1px solid var(--c-cyan-strong);
        border-radius: .75rem;
        background: var(--c-cyan-soft);
        color: var(--c-cyan);
    }
    /* Gleiche Ausgangshöhe der Karten in der 3er-Reihe */
    @media (min-width: 64rem) {
        .card__teaser { min-block-size: 3lh; }
    }

    /* „Mehr erfahren“: natives <details>, sanftes Aufklappen wo unterstützt */
    .card__more {
        interpolate-size: allow-keywords;

        &::details-content {
            block-size: 0;
            overflow: hidden;
            transition: block-size .3s ease, content-visibility .3s allow-discrete;
        }
        &[open]::details-content { block-size: auto; }
    }
    .card__toggle {
        list-style: none;
        &::-webkit-details-marker { display: none; }
    }
    .card__toggle-label--close { display: none; }
    .card__more[open] {
        & .card__toggle-label--open { display: none; }
        & .card__toggle-label--close { display: inline; }
        & .card__toggle-icon { rotate: 180deg; }
    }
    .card__toggle-icon { transition: rotate .2s ease; }
    .card__more-body {
        display: grid;
        gap: var(--space-3);
        margin-block-start: var(--space-2);
        padding-block-start: var(--space-4);
        border-block-start: 1px dashed rgb(0 212 255 / .3);
    }

    /* ---- Prozess (Container Query: waagerecht ↔ senkrecht) ---- */
    .steps {
        container: steps / inline-size;
        position: relative;
        max-inline-size: 68.75rem;
        margin-inline: auto;
    }
    .steps__list {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }
    .steps__line {
        position: absolute;
        inset-block-start: 1.6875rem;
        inset-inline: 12.5%;
        block-size: 2px;
        background: repeating-linear-gradient(90deg, var(--c-cyan) 0 6px, transparent 6px 16px);
        animation: dash-h 5s linear infinite;
    }
    @keyframes dash-h { to { background-position: 160px 0; } }
    @keyframes dash-v { to { background-position: 0 160px; } }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        text-align: center;
    }
    .step__node {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        inline-size: 3.5rem;
        block-size: 3.5rem;
        border: 2px solid var(--c-cyan);
        border-radius: 50%;
        background: var(--c-navy-3);
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--c-off);
    }
    .step__text { display: grid; gap: var(--space-2); }
    .step__title { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
    .step .muted { font-size: .9375rem; }

    @container steps (max-width: 47.99rem) {
        .steps__list { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
        .steps__line {
            inset-block: 1.75rem;
            inset-inline: 1.6875rem auto;
            inline-size: 2px;
            block-size: auto;
            background: repeating-linear-gradient(180deg, var(--c-cyan) 0 6px, transparent 6px 16px);
            animation-name: dash-v;
        }
        .step { flex-direction: row; align-items: flex-start; gap: 1.25rem; text-align: start; }
        .step__text { padding-block-start: var(--space-1); }
    }

    /* ---- Kontakt ---- */
    .contact {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
        align-items: start;
        gap: clamp(2.25rem, 1rem + 3vw, 3.5rem);
        padding: clamp(1.25rem, .5rem + 3vw, 3.5rem);
        border: 1px solid rgb(0 212 255 / .3);
        border-radius: var(--radius-lg);
        background: linear-gradient(135deg, rgb(19 47 88 / .94), rgb(15 42 77 / .94));
    }
    .contact__copy { display: grid; gap: 1.125rem; }

    /* ---- Formular ---- */
    .form { display: grid; gap: 1.25rem; }
    .field { display: grid; gap: var(--space-2); }
    .field__label { font-size: var(--fs-small); font-weight: 600; color: var(--c-off); }
    .field__input {
        inline-size: 100%;
        min-block-size: 3rem;
        padding: var(--space-3) .875rem;
        border: 1px solid var(--c-line);
        border-radius: var(--radius-sm);
        background: var(--c-navy);
        color: var(--c-off);
        font-size: 1rem;

        &::placeholder { color: var(--c-muted); opacity: 1; }
        &:focus { outline: none; border-color: var(--c-cyan); box-shadow: 0 0 0 3px rgb(0 212 255 / .25); }
        &[aria-invalid="true"] { border-color: var(--c-amber); }
    }
    textarea.field__input { min-block-size: 8rem; resize: vertical; }

    .field__error {
        display: flex;
        align-items: center;
        gap: .375rem;
        font-size: .8125rem;
        color: var(--c-amber);
        & .icon { inline-size: 1rem; block-size: 1rem; }
    }

    .form__submit { justify-self: start; }
    .form__status {
        font-size: var(--fs-small);
        &:empty { display: none; }
        &[data-state="success"] { color: var(--c-cyan); }
        &[data-state="error"] { color: var(--c-amber); }
    }
    .form__note { font-size: .8125rem; line-height: 1.5; }
    .form__note a { text-decoration: underline; text-underline-offset: 3px; }

    /* Spam-Falle aus dem Sichtbereich und der Bedienung nehmen */
    .form__trap {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    @media (max-width: 47.99rem) {
        .form__submit { justify-self: stretch; }
    }

    /* ---- Rechtliches ---- */
    .legal .container { display: grid; gap: var(--space-4); }
    .legal h2 { font-size: 1.25rem; margin-block-start: var(--space-4); }
    .legal p:not(.eyebrow), .legal address { color: var(--c-text); }
    .legal address { font-style: normal; }
    .legal a:not(.btn) { color: var(--c-cyan); text-decoration: underline; text-underline-offset: 3px; }

    /* ---- Fußzeile ---- */
    .site-footer {
        padding-block: var(--space-8) var(--space-7);
        border-block-start: 1px solid var(--c-hairline);
        background: var(--c-navy);
        font-size: var(--fs-small);
    }
    .site-footer__grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--space-7) 2.5rem;
        margin-block-end: 2.5rem;
    }
    .site-footer__about { display: grid; gap: var(--space-3); align-content: start; max-inline-size: 21rem; }
    .site-footer__brand { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--c-off); }
    .site-footer__col {
        display: grid;
        align-content: start;
        gap: var(--space-1);

        & a { display: inline-flex; align-items: center; min-block-size: 2.25rem; }
    }
    .site-footer__title {
        margin-block-end: var(--space-2);
        font-family: var(--font-body);
        font-size: var(--fs-small);
        font-weight: 600;
    }
    .site-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-3) var(--space-5);
        padding-block-start: 1.25rem;
        border-block-start: 1px solid rgb(255 255 255 / .06);
        font-size: .8125rem;
        color: var(--c-muted);
    }
    .site-footer__legal {
        display: flex;
        gap: var(--space-5);
        list-style: none;
        padding: 0;
        & a { color: var(--c-muted); display: inline-flex; align-items: center; min-block-size: var(--tap); }
        & a:hover { color: var(--c-cyan); }
    }
    .site-footer__bottom p { display: flex; align-items: center; min-block-size: var(--tap); }

    @media (max-width: 47.99rem) {
        .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    }

    /* ---- Hintergrund-Animation: Stromimpulse über die ganze Seite ---- */
    .page-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .page-bg__layer {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
    }
    .page-bg__layer--narrow { display: none; }
    @media (max-width: 47.99rem) {
        .page-bg__layer--wide { display: none; }
        .page-bg__layer--narrow { display: block; }
    }
    .page-bg__spark {
        fill: none;
        stroke: var(--c-spark);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 14 300;
        stroke-dashoffset: 14;
        opacity: 0;
        filter: drop-shadow(0 0 3px var(--c-cyan)) drop-shadow(0 0 8px var(--c-cyan)) drop-shadow(0 0 16px var(--c-cyan));
        animation: spark 8s linear infinite;
        animation-delay: var(--d, 0s);
    }
    @keyframes spark {
        0% { stroke-dashoffset: 14; opacity: 0; }
        3% { opacity: 1; }
        30% { opacity: 1; }
        34% { stroke-dashoffset: -100; opacity: 0; }
        100% { stroke-dashoffset: -100; opacity: 0; }
    }
}

/* ---------- Hilfsklassen ---------- */
@layer utilities {
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Bei „Bewegung reduzieren“: Deko-Animationen ganz ausblenden statt einfrieren */
    @media (prefers-reduced-motion: reduce) {
        .page-bg { display: none; }
    }
}