/* =========================================================================
   v3.IT Solutions & Software – Stylesheet
   =========================================================================
   Aufbau
   01  Schriftarten (lokal eingebunden)
   02  Design-Tokens
   03  Reset und Basis
   04  Layout-Primitives
   05  Typografie
   06  Buttons und Links
   07  Header und Navigation
   08  Hero
   09  Karten und Listen
   10  Vorgehensweise
   11  Über uns
   12  Abschluss-CTA
   13  Kontakt und Formular
   14  Footer
   15  Rechtstexte
   16  Bewegung und Hilfsklassen
   ====================================================================== */


/* 01  Schriftarten ------------------------------------------------------ */
/* Inter (SIL Open Font License 1.1), lokal ausgeliefert – keine Verbindung
   zu externen Anbietern, damit ohne Einwilligung DSGVO-konform. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin.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: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.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;
}


/* 02  Design-Tokens ----------------------------------------------------- */

:root {
    /* Markenfarben, abgeleitet aus dem v3.IT-Logo */
    --brand-orange: #F6821F;
    --brand-orange-600: #E2711A;
    --brand-orange-700: #CA5D1A;
    --brand-orange-ink: #B0500E;   /* kontraststark auf hellen Flächen */

    /* Neutrale Skala */
    --ink-900: #090C10;
    --ink-850: #0E1116;
    --ink-800: #151A21;
    --ink-750: #1A212A;
    --ink-700: #1F2833;
    --ink-600: #2A3542;

    --gray-000: #FFFFFF;
    --gray-050: #F5F7FA;
    --gray-100: #EDF1F6;
    --gray-200: #E1E7EF;
    --gray-400: #A7B2C0;
    --gray-600: #52606F;
    --gray-900: #1A1F27;

    /* Typografie */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
        'Liberation Mono', monospace;

    --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
    --step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
    --step-2:  clamp(1.375rem, 1.27rem + 0.5vw, 1.75rem);
    --step-3:  clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
    --step-4:  clamp(2rem, 1.6rem + 2vw, 3.25rem);
    /* Obergrenze so gewählt, dass die längste Hero-Zeile
       ("Automatisierte Prozesse.") auf dem Desktop einzeilig bleibt. */
    --step-5:  clamp(2.25rem, 1.75rem + 3.1vw, 3rem);

    /* Abstände */
    --space-2xs: 0.375rem;
    --space-xs: 0.625rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: clamp(4rem, 8vw, 7rem);

    --container: 1280px;
    --container-pad: clamp(1.25rem, 5vw, 2.5rem);

    /* Formen */
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 20px;
    --radius-full: 999px;

    --shadow-s: 0 1px 2px rgba(12, 18, 28, .05), 0 2px 8px rgba(12, 18, 28, .04);
    --shadow-m: 0 2px 4px rgba(12, 18, 28, .05), 0 12px 28px -8px rgba(12, 18, 28, .12);
    --shadow-l: 0 24px 60px -20px rgba(12, 18, 28, .28);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: 220ms;

    /* Kontextfarben – heller Standard */
    --surface: var(--gray-000);
    --surface-2: var(--gray-050);
    --fg: var(--gray-900);
    --fg-muted: var(--gray-600);
    --line: var(--gray-200);
    --line-soft: var(--gray-100);
    --card: var(--gray-000);
    --card-line: var(--gray-200);
    --card-hover-line: #C9D3E0;
    --accent-fg: var(--brand-orange-ink);
    --accent-soft: rgba(246, 130, 31, .10);
    --grid-line: rgba(26, 31, 39, .06);
    --scheme: light;
}

/* Dunkle Flächen – gleiche Komponenten, andere Kontextfarben.
   Gilt für dunkle Bänder ebenso wie für Hero und Abschluss-CTA, damit
   Buttons, Linien und Texte dort automatisch die richtigen Werte erben. */
.band--dark,
.hero,
.cta-band {
    --surface: var(--ink-850);
    --surface-2: var(--ink-800);
    --fg: #E7EBF1;
    --fg-muted: #A3AEBE;
    --line: rgba(255, 255, 255, .10);
    --line-soft: rgba(255, 255, 255, .06);
    --card: var(--ink-800);
    --card-line: rgba(255, 255, 255, .09);
    --card-hover-line: rgba(246, 130, 31, .38);
    --accent-fg: var(--brand-orange);
    --accent-soft: rgba(246, 130, 31, .14);
    --grid-line: rgba(255, 255, 255, .055);
    --scheme: dark;
    color-scheme: dark;
}


/* 03  Reset und Basis --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sticky Header beim Ansteuern von Ankern berücksichtigen */
    scroll-padding-top: 6rem;
}

body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--fg);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

:target { scroll-margin-top: 6rem; }

/* Sichtbarer, konsistenter Fokusindikator */
:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
    border-radius: 4px;
}
.band--dark :focus-visible { outline-color: var(--brand-orange); }

::selection {
    background: rgba(246, 130, 31, .24);
    color: inherit;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--ink-850);
    color: #fff;
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* 04  Layout-Primitives ------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow { max-width: 820px; }

.band {
    position: relative;
    background-color: var(--surface);
    color: var(--fg);
    padding-block: var(--space-2xl);
}

.band--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Feine Trennlinie zwischen gleichfarbigen Bändern */
.band--hairline { border-top: 1px solid var(--line); }

/* Technisches Raster als Hintergrund */
.band--grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
    pointer-events: none;
}

.band > .container { position: relative; z-index: 1; }

.stack > * + * { margin-top: var(--flow, 1rem); }

.grid {
    display: grid;
    gap: var(--space-m);
}

@media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid--2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 05  Typografie -------------------------------------------------------- */

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h3, h4 { line-height: 1.3; letter-spacing: -0.014em; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent-fg);
    margin-bottom: var(--space-s);
}

.eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .55;
    flex: none;
}

.section-head { max-width: 62ch; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.section-title { font-size: var(--step-3); }

.lead {
    font-size: var(--step-1);
    line-height: 1.6;
    color: var(--fg-muted);
    margin-top: var(--space-s);
    max-width: 60ch;
    text-wrap: pretty;
}

.section-head--center .lead { margin-inline: auto; }

.text-muted { color: var(--fg-muted); }

.accent { color: var(--accent-fg); }

.note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--fg-muted);
    padding: .9rem 1.1rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-m);
    background: var(--surface-2);
}
.note .icon { flex: none; width: 18px; height: 18px; margin-top: .18rem; opacity: .8; }


/* 06  Buttons und Links ------------------------------------------------- */

.btn {
    --btn-bg: var(--brand-orange);
    --btn-fg: var(--ink-900);
    --btn-line: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .875rem 1.4rem;
    min-height: 48px;
    border: 1px solid var(--btn-line);
    border-radius: var(--radius-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-align: center;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.btn .icon { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 24px -12px rgba(246, 130, 31, .8);
}
.btn--primary:hover { --btn-bg: #FF922F; }

.btn--secondary {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    --btn-line: var(--gray-200);
}
.btn--secondary:hover {
    --btn-bg: var(--surface-2);
    --btn-line: var(--card-hover-line);
}

/* Auf dunklen Flächen braucht der Rahmen mehr Kontrast, damit der Button
   nicht wie ein reiner Textlink wirkt. */
.band--dark .btn--secondary,
.hero .btn--secondary,
.cta-band .btn--secondary {
    --btn-line: rgba(255, 255, 255, .28);
}
.band--dark .btn--secondary:hover,
.hero .btn--secondary:hover,
.cta-band .btn--secondary:hover {
    --btn-bg: rgba(255, 255, 255, .06);
    --btn-line: rgba(255, 255, 255, .45);
}

.btn--sm { padding: .55rem 1.05rem; min-height: 40px; font-size: var(--step--1); }
.btn--lg { padding: 1.05rem 1.9rem; min-height: 56px; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* Auf schmalen Bildschirmen sonst zweizeilige Beschriftungen mit
   danebenstehendem Pfeil. Kleinerer Grad, weniger Innenabstand, kein Icon. */
@media (max-width: 520px) {
    .btn--lg {
        font-size: var(--step-0);
        min-height: 52px;
        padding: .9rem 1.1rem;
    }
    .btn--lg > .icon { display: none; }
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-l);
}

/* Textlink mit Pfeil */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: var(--step-0);
    color: var(--accent-fg);
    text-decoration: none;
    text-underline-offset: 4px;
}
.link-arrow .icon { width: 17px; height: 17px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(4px); }

.link-plain { color: var(--accent-fg); text-underline-offset: 3px; }


/* 07  Header und Navigation --------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
    border-bottom-color: var(--gray-200);
    box-shadow: 0 1px 20px -8px rgba(12, 18, 28, .18);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding-block: .3rem;
    text-decoration: none;
    flex: none;
}
.brand img { height: 34px; width: auto; }

/* --- Mobiler Standardzustand: Menüschalter sichtbar, Navigation im Panel --- */

.header-actions { display: flex; align-items: center; gap: .5rem; }

.nav { display: none; }
.header-cta { display: none; }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-s);
    background: #fff;
    color: var(--gray-900);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__open { display: flex; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: flex; }

/* --- Ab Desktopbreite: volle Navigation, kein Menüschalter --- */

@media (min-width: 1000px) {
    .nav {
        display: flex;
        align-items: center;
        gap: .25rem;
        margin-left: auto;
    }
    .nav__link {
        display: inline-block;
        padding: .5rem .8rem;
        border-radius: var(--radius-s);
        font-size: var(--step-0);
        font-weight: 500;
        color: var(--gray-600);
        text-decoration: none;
        transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }
    .nav__link:hover { color: var(--gray-900); background: var(--gray-050); }
    .nav__link.is-current { color: var(--gray-900); font-weight: 600; }
    .header-cta { display: inline-flex; margin-left: .75rem; }
    .nav-toggle { display: none; }
}

/* Mobiles Menü */
.mobile-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    z-index: 99;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-m);
    padding: var(--space-s) 0 var(--space-l);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    transform-origin: top;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list a {
    display: block;
    padding: .9rem .25rem;
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--gray-900);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
}
.mobile-nav__list a:hover { color: var(--brand-orange-ink); }
.mobile-nav .btn { margin-top: var(--space-m); }

@media (min-width: 1000px) {
    .mobile-nav { display: none !important; }
}


/* 08  Hero -------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-850);
    color: #E7EBF1;
    padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 30% 20%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 65% at 30% 20%, #000 10%, transparent 75%);
    z-index: -2;
}

.hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60rem;
    height: 60rem;
    background: radial-gradient(circle, rgba(246, 130, 31, .16) 0%, rgba(246, 130, 31, 0) 62%);
    z-index: -1;
    pointer-events: none;
}

.hero__inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

/* Zweispaltig erst, wenn beide Spalten genug Platz haben: die Überschrift
   für einzeilige Aussagen, die Illustration für lesbare Beschriftungen. */
@media (min-width: 1280px) {
    .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Die beiden Handlungsaufforderungen passen nebeneinander nicht in die
   Textspalte. Statt eines ungleich langen Umbruchs stehen sie gestapelt und
   auf gleicher Breite – max-content nimmt die Breite des längeren Buttons. */
.hero .btn-row {
    display: grid;
    grid-template-columns: max-content;
    gap: .75rem;
}
.hero .btn-row .btn { width: 100%; }

@media (max-width: 420px) {
    .hero .btn-row { grid-template-columns: minmax(0, 1fr); }
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .9rem .4rem .55rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .04);
    font-size: var(--step--1);
    font-weight: 500;
    color: #C3CCD9;
    margin-bottom: var(--space-m);
}
.hero__eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand-orange);
    box-shadow: 0 0 0 4px rgba(246, 130, 31, .16);
    flex: none;
    margin-left: .25rem;
}

.hero h1 {
    font-size: var(--step-5);
    letter-spacing: -0.032em;
    line-height: 1.05;
}
.hero h1 span { display: block; }
.hero h1 .is-accent {
    color: var(--brand-orange);
}

/* Auf schmalen Bildschirmen würde jede der drei Aussagen ohnehin umbrechen.
   Fließender Satz spart Höhe und liest sich ruhiger. */
@media (max-width: 640px) {
    .hero h1 span { display: inline; }
    .hero h1 span + span::before { content: ' '; }
}

.hero__lead {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    line-height: 1.6;
    color: #A9B4C2;
    max-width: 56ch;
    text-wrap: pretty;
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    margin-top: var(--space-l);
    padding-top: var(--space-m);
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.hero__trust li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--step--1);
    color: #B6C0CD;
}
.hero__trust .icon {
    width: 17px; height: 17px;
    color: var(--brand-orange);
    flex: none;
}

.hero__visual {
    position: relative;
    /* Grundlage für die Container Query, die die Diagrammvariante wählt. */
    container-type: inline-size;
}
.hero__visual svg { width: 100%; height: auto; }

@media (max-width: 1279px) {
    /* width: 100% ist nötig, weil ein Grid-Item mit margin-inline: auto
       sonst auf die Standardbreite des SVG (300px) zusammenfällt. */
    .hero__visual { width: 100%; max-width: 620px; margin-inline: auto; }
}

/* 08b  Hero-Diagramm ---------------------------------------------------- */

.diagram {
    width: 100%;
    height: auto;
    font-family: var(--font-sans);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}

.d-panel      { fill: #10151C; stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.d-hairline   { stroke: rgba(255, 255, 255, .08); stroke-width: 1; fill: none; }
.d-dot        { fill: rgba(255, 255, 255, .16); }
.d-dot--accent{ fill: var(--brand-orange); }
.d-mono       { fill: #7E8A99; font-family: var(--font-mono); font-size: 12px; }
.d-badge      { fill: rgba(246, 130, 31, .10); stroke: rgba(246, 130, 31, .32); stroke-width: 1; }
.d-badge-text { fill: #F5A461; font-size: 11.5px; font-weight: 600; }
.d-pulse-dot  { fill: var(--brand-orange); animation: d-pulse 2.4s ease-in-out infinite; }

.d-label          { fill: #6F7B8B; font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.d-label--accent  { fill: var(--brand-orange); }
.d-label--right   { text-anchor: end; }

.d-card       { fill: #171E26; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.d-chip       { fill: rgba(255, 255, 255, .06); }
.d-chip--accent { fill: rgba(246, 130, 31, .13); }
.d-glyph      { fill: none; stroke: #8E9AAA; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.d-glyph--accent { stroke: var(--brand-orange); }
.d-card-title { fill: #DEE4EC; font-size: 13.5px; font-weight: 650; }
.d-card-sub   { fill: #78838F; font-size: 11.5px; }

.d-hub-glow   { fill: rgba(246, 130, 31, .06); }
.d-hub        { fill: #141A22; stroke: rgba(246, 130, 31, .3); stroke-width: 1; }
.d-hub-row    { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.d-hub-glyph  { fill: none; stroke: var(--brand-orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d-hub-text   { fill: #C6CEDA; font-size: 11px; font-weight: 600; text-anchor: middle; }

.d-wire       { stroke: rgba(255, 255, 255, .13); stroke-width: 1.5; }
.d-flow {
    stroke: var(--brand-orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 94;
    stroke-dashoffset: 0;
    animation: d-flow 3.4s linear infinite;
}
.d-flow--d1 { animation-delay: .45s; }
.d-flow--d2 { animation-delay: .9s; }
.d-flow--d3 { animation-delay: 1.35s; }
.d-flow--d4 { animation-delay: 1.8s; }
.d-flow--d5 { animation-delay: 2.25s; }

/* Kompakte Fassung für schmale Flächen.
   Sie ist der sichere Standard: Erst wenn der umgebende Bereich breit genug
   ist, damit die Beschriftungen der ausführlichen Darstellung lesbar bleiben,
   wird auf diese umgeschaltet. Größere Schriftgrade, weil die kompakte
   Fassung stärker skaliert wird. */
.diagram--compact { display: block; }
.d-mono--sm       { font-size: 12px; }
.d-label--sm      { font-size: 12.5px; }
.d-card-title--c  { text-anchor: middle; font-size: 15px; }
.d-hub-text--l    { text-anchor: start; font-size: 13px; }
.d-bullet         { fill: var(--brand-orange); }
.d-card--accent   { stroke: rgba(246, 130, 31, .3); }
.d-flow--v        { stroke-dasharray: 6 26; animation-name: d-flow-v; }

.diagram--full { display: none; }

@container (min-width: 520px) {
    .diagram--full    { display: block; }
    .diagram--compact { display: none; }
}

.d-track        { stroke: rgba(255, 255, 255, .12); stroke-width: 2; stroke-linecap: round; fill: none; }
.d-track-active { stroke: var(--brand-orange); stroke-width: 2; stroke-linecap: round; fill: none; opacity: .8; }
.d-node         { fill: #10151C; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.d-node--done   { fill: var(--brand-orange); stroke: rgba(246, 130, 31, .22); stroke-width: 5; }
.d-step         { fill: #C6CEDA; font-size: 12px; font-weight: 600; text-anchor: middle; }
.d-step-sub     { fill: #6F7B8B; font-size: 10.5px; text-anchor: middle; }

@keyframes d-flow {
    from { stroke-dashoffset: 101; }
    to   { stroke-dashoffset: 0; }
}

@keyframes d-flow-v {
    from { stroke-dashoffset: 32; }
    to   { stroke-dashoffset: 0; }
}

@keyframes d-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .d-flow, .d-pulse-dot { animation: none; }
    .d-flow { stroke-dashoffset: 48; }
    .d-flow--v { stroke-dashoffset: 16; }
}


/* Kennzahlenleiste unter dem Hero */
.hero-strip {
    background: var(--ink-800);
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #A3AEBE;
}
.hero-strip__list {
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr;
    background: rgba(255, 255, 255, .07);
}
@media (min-width: 720px) {
    .hero-strip__list { grid-template-columns: repeat(3, 1fr); }
}
.hero-strip__item {
    background: var(--ink-800);
    padding: 1.15rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--step--1);
}
.hero-strip__item .icon { width: 18px; height: 18px; color: var(--brand-orange); flex: none; }


/* 09  Karten und Listen ------------------------------------------------- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: clamp(1.4rem, 2.5vw, 1.9rem);
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-l);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.card--hover:hover {
    border-color: var(--card-hover-line);
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
}
.band--dark .card--hover:hover { box-shadow: 0 20px 50px -28px rgba(0, 0, 0, .9); }

.card__title { font-size: var(--step-2); }
.card__text { color: var(--fg-muted); }

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-m);
    background: var(--accent-soft);
    color: var(--accent-fg);
    margin-bottom: .5rem;
    flex: none;
}
.card-icon .icon { width: 23px; height: 23px; }

/* Problem-Liste */
.problem-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .35rem 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--card-line);
    border-radius: var(--radius-m);
    background: var(--card);
}
.problem-card__marker {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(246, 130, 31, .12);
    color: var(--accent-fg);
    margin-top: .15rem;
    flex: none;
}
.problem-card__marker .icon { width: 15px; height: 15px; }
.problem-card h3 { font-size: var(--step-0); font-weight: 650; }
.problem-card p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.6; }

.conclusion {
    margin-top: var(--space-xl);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-l);
    border: 1px solid var(--card-line);
    background:
        linear-gradient(180deg, rgba(246, 130, 31, .07), rgba(246, 130, 31, 0) 70%),
        var(--card);
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
}
.conclusion .icon { width: 26px; height: 26px; color: var(--brand-orange); flex: none; margin-top: .2rem; }
.conclusion p {
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.018em;
    text-wrap: pretty;
}

/* Leistungskarten */
.service-card { gap: .85rem; }
.service-card__examples {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
}
.service-card__examples li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--fg-muted);
}
.service-card__examples li::before {
    content: '';
    position: absolute;
    left: .3rem;
    top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-orange);
}
.service-card .link-arrow { margin-top: auto; padding-top: 1.15rem; }

/* Lösungskarten */
.solution-card { gap: .8rem; }
.solution-card__outcome {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
    font-size: var(--step--1);
    color: var(--fg-muted);
}
.solution-card__outcome .icon { width: 17px; height: 17px; color: var(--brand-orange); flex: none; margin-top: .15rem; }

/* Vorteilskarten */
.benefit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .3rem 1.1rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}
.benefit__icon {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--radius-m);
    border: 1px solid var(--card-line);
    background: var(--surface-2);
    color: var(--accent-fg);
    flex: none;
}
.benefit__icon .icon { width: 21px; height: 21px; }
.benefit h3 { font-size: var(--step-1); }
.benefit p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.6; }

/* Vorteile: durchgehende Linien statt Karten */
.benefits-grid { gap: 0 var(--space-l); }

/* Technologie */
.tech-note {
    margin-top: var(--space-m);
    text-align: center;
    font-size: 0.8rem;
    color: var(--fg-muted);
    opacity: .85;
    max-width: 70ch;
    margin-inline: auto;
}

.grid + .note { margin-top: var(--space-l); }

.tech-grid {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;
}
@media (min-width: 620px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tech-grid { grid-template-columns: repeat(4, 1fr); } }

.tech-item {
    background: var(--surface);
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: background-color var(--dur) var(--ease);
}
.tech-item:hover { background: var(--surface-2); }
.tech-item .icon { width: 22px; height: 22px; color: var(--accent-fg); }
.tech-item h3 { font-size: var(--step-0); font-weight: 650; }
.tech-item p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }


/* 10  Vorgehensweise ---------------------------------------------------- */

.process {
    display: grid;
    gap: var(--space-m);
    counter-reset: step;
}
@media (min-width: 760px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .process { grid-template-columns: repeat(4, 1fr); } }

.process__step {
    position: relative;
    padding-top: 2.75rem;
}

/* Verbindungslinie zwischen den Schritten */
.process__step::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}
.process__step::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand-orange);
}
@media (min-width: 1080px) {
    .process__step:last-child::before {
        background: linear-gradient(to right, var(--line) 55%, transparent);
    }
}
@media (max-width: 1079px) {
    .process__step::before { background: linear-gradient(to right, var(--line) 70%, transparent); }
}

.process__num {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent-fg);
    margin-bottom: .5rem;
}
.process__step h3 { font-size: var(--step-1); margin-bottom: .45rem; }
.process__step p { color: var(--fg-muted); }
.process__meta {
    display: block;
    margin-top: .75rem;
    font-size: var(--step--1);
    color: var(--fg-muted);
    opacity: .85;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}

.principles {
    display: grid;
    gap: .85rem;
    margin-top: var(--space-xl);
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-l);
    border: 1px solid var(--card-line);
    background: var(--surface-2);
}
@media (min-width: 900px) { .principles { grid-template-columns: repeat(2, 1fr); gap: .85rem 2.5rem; } }
.principles li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--fg-muted);
}
.principles .icon { width: 18px; height: 18px; color: var(--brand-orange); flex: none; margin-top: .2rem; }


/* 11  Über uns ---------------------------------------------------------- */

.about {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 980px) { .about { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.about__body { margin-top: var(--space-m); }
.about__body p + p { margin-top: var(--space-s); }
.about__body p { color: var(--fg-muted); font-size: var(--step-1); line-height: 1.65; }

.about__facts {
    display: grid;
    gap: 1px;
    margin-top: var(--space-l);
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
}
@media (min-width: 620px) { .about__facts { grid-template-columns: repeat(3, 1fr); } }
.about__fact { background: var(--surface); padding: 1.1rem 1.25rem; }
.about__fact b {
    display: block;
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--accent-fg);
    margin-bottom: .2rem;
}
.about__fact span { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.5; display: block; }

.person {
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-l);
    background: var(--card);
    box-shadow: var(--shadow-s);
}
.person__head { display: flex; align-items: center; gap: 1rem; }
.person__avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--card-line);
}
.person__avatar--placeholder {
    display: grid;
    place-items: center;
    color: var(--accent-fg);
    background: var(--accent-soft);
    font-weight: 700;
    font-size: var(--step-2);
    letter-spacing: -0.02em;
}
.person__name { font-size: var(--step-1); }
.person__role { font-size: var(--step--1); color: var(--fg-muted); margin-top: .15rem; }
.person__bio { margin-top: var(--space-m); color: var(--fg-muted); font-size: var(--step--1); line-height: 1.65; }
.person__quote {
    position: relative;
    margin-top: var(--space-m);
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-m);
    background: var(--surface-2);
    border-left: 3px solid var(--brand-orange);
    font-size: var(--step-0);
    line-height: 1.6;
    font-style: normal;
}
.person__quote .icon {
    width: 20px; height: 20px;
    color: var(--brand-orange);
    opacity: .5;
    margin-bottom: .5rem;
}
.person__cta { margin-top: var(--space-m); }


/* 12  Abschluss-CTA ----------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--ink-850);
    color: #E7EBF1;
    isolation: isolate;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 85% 15%, rgba(246, 130, 31, .22), transparent 60%),
        radial-gradient(ellipse 50% 70% at 10% 90%, rgba(246, 130, 31, .10), transparent 60%);
    z-index: -1;
}
.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 72%);
    z-index: -1;
}
.cta-band__inner { text-align: center; max-width: 780px; margin-inline: auto; }
.cta-band h2 {
    font-size: var(--step-4);
    letter-spacing: -0.03em;
}
.cta-band p {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    color: #A9B4C2;
    text-wrap: pretty;
}
.cta-band .btn-row { justify-content: center; }
.cta-band__hints {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.75rem;
    margin-top: var(--space-m);
}
.cta-band__hints li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--step--1);
    color: #98A3B2;
}
.cta-band__hints .icon { width: 16px; height: 16px; color: var(--brand-orange); flex: none; }


/* 13  Kontakt und Formular ---------------------------------------------- */

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

.form-card {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
}

.form-grid { display: grid; gap: var(--space-m); }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: .4rem; }

.field label {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--fg);
}
.field .optional { font-weight: 400; color: var(--fg-muted); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .8rem .95rem;
    min-height: 48px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--fg);
    font-size: var(--step-0);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352606F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 18px;
    padding-right: 2.6rem;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--gray-400); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(246, 130, 31, .18);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

.field--error input,
.field--error select,
.field--error textarea { border-color: #C2410C; }
.field--error input:focus,
.field--error textarea:focus { box-shadow: 0 0 0 3px rgba(194, 65, 12, .16); }

.field__error {
    display: none;
    align-items: center;
    gap: .35rem;
    font-size: var(--step--1);
    color: #C2410C;
}
.field--error .field__error { display: flex; }
.field__error .icon { width: 15px; height: 15px; flex: none; }

.field__hint { font-size: 0.8rem; color: var(--fg-muted); }

/* Honeypot – für Menschen unsichtbar, für Bots erreichbar */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}

.checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}
.checkbox input[type='checkbox'] {
    width: 24px; height: 24px;
    min-height: 0;
    margin-top: .08rem;
    accent-color: var(--brand-orange);
    flex: none;
    padding: 0;
}
.checkbox label { font-weight: 400; font-size: var(--step--1); line-height: 1.55; color: var(--fg-muted); }
.checkbox .field__error { grid-column: 2; }

.form-status {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-m);
    font-size: var(--step--1);
    line-height: 1.6;
    margin-bottom: var(--space-m);
}
.form-status[hidden] { display: none; }
.form-status .icon { width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.form-status--success {
    background: rgba(21, 128, 61, .09);
    border: 1px solid rgba(21, 128, 61, .3);
    color: #14532D;
}
.form-status--error {
    background: rgba(194, 65, 12, .08);
    border: 1px solid rgba(194, 65, 12, .3);
    color: #7C2D12;
}
.form-status strong { display: block; font-size: var(--step-0); margin-bottom: .15rem; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    margin-top: var(--space-m);
}
.form-actions .btn[aria-busy='true'] { opacity: .75; pointer-events: none; }

.form-privacy-hint {
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line-soft);
}

.contact-aside { display: flex; flex-direction: column; gap: var(--space-m); }

/* Bleibt beim Ausfüllen des Formulars im Blick. */
@media (min-width: 980px) {
    .contact-aside { position: sticky; top: 6rem; }
}

.contact-card { background: var(--surface-2); }

.next-steps__title {
    font-size: var(--step-0);
    font-weight: 650;
    margin-bottom: .35rem;
}
.next-steps__list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    counter-reset: nextstep;
}
.next-steps__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--fg-muted);
}
.next-steps__num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-fg);
    font-size: 0.75rem;
    font-weight: 700;
    flex: none;
}

.contact-details { display: flex; flex-direction: column; gap: 1.1rem; margin-top: var(--space-m); }
.contact-details li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-details .icon { width: 20px; height: 20px; color: var(--accent-fg); flex: none; margin-top: .18rem; }
.contact-details b { display: block; font-size: var(--step--1); font-weight: 600; }
.contact-details span, .contact-details a {
    font-size: var(--step--1);
    color: var(--fg-muted);
    line-height: 1.55;
    font-style: normal;
}
.contact-details a { text-decoration: none; }
.contact-details a:hover { color: var(--accent-fg); text-decoration: underline; }


/* 14  Footer ------------------------------------------------------------ */

.site-footer {
    background: var(--ink-900);
    color: #A3AEBE;
    padding-block: var(--space-xl) var(--space-m);
    font-size: var(--step--1);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer-top {
    display: grid;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 820px) {
    .footer-top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
}

.footer-brand img { height: 32px; width: auto; margin-bottom: var(--space-s); }
.footer-brand p { max-width: 38ch; line-height: 1.65; }

.footer-col h2 {
    font-size: var(--step--1);
    font-weight: 650;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}
/* Ausreichend große Antippflächen (WCAG 2.5.8) */
.footer-col li a,
.footer-legal a { display: inline-block; padding-block: .3rem; }
.footer-col li + li { margin-top: .15rem; }

.footer-contact { font-style: normal; line-height: 1.7; }
.footer-contact a { text-decoration: none; }

.footer-social { display: flex; gap: .5rem; margin-top: var(--space-m); }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-s);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.footer-social a:hover { border-color: var(--brand-orange); background: rgba(246, 130, 31, .12); }
.footer-social .icon { width: 19px; height: 19px; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    padding-top: var(--space-m);
    color: #7F8C9C;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-note {
    width: 100%;
    font-size: .78rem;
    color: #67727F;
    line-height: 1.55;
}


/* 15  Rechtstexte ------------------------------------------------------- */

.legal-header {
    background: var(--ink-850);
    color: #E7EBF1;
    padding-block: clamp(3rem, 6vw, 5rem);
}
.legal-header h1 { font-size: var(--step-4); }
.legal-header p { margin-top: var(--space-s); color: #A9B4C2; max-width: 62ch; }

.legal-body { padding-block: var(--space-2xl); }
.legal-body h2 {
    font-size: var(--step-2);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-s);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line);
}
.legal-body h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body p { color: var(--fg-muted); line-height: 1.75; }
.legal-body p + p { margin-top: var(--space-s); }
.legal-body address { font-style: normal; line-height: 1.75; color: var(--fg-muted); }
.legal-body ul {
    margin-top: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.legal-body ul li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--fg-muted);
    line-height: 1.65;
}
.legal-body ul li::before {
    content: '';
    position: absolute;
    left: .25rem; top: .68em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-orange);
}
.legal-body a { color: var(--accent-fg); text-underline-offset: 3px; }

.legal-updated {
    margin-top: var(--space-xl);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--fg-muted);
}

.legal-placeholder {
    background: rgba(246, 130, 31, .12);
    border-bottom: 2px solid var(--brand-orange);
    padding: 0 .2rem;
    font-weight: 600;
    color: var(--gray-900);
}


/* 16  Bewegung und Hilfsklassen ----------------------------------------- */

/* Einblenden beim Scrollen – nur wenn JavaScript aktiv ist, damit die
   Inhalte ohne JS sichtbar bleiben. */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Gestaffeltes Einblenden ohne Inline-Styles (CSP-konform) */
.stagger > *:nth-child(2) { --reveal-delay: 70ms; }
.stagger > *:nth-child(3) { --reveal-delay: 140ms; }
.stagger > *:nth-child(4) { --reveal-delay: 210ms; }
.stagger > *:nth-child(5) { --reveal-delay: 280ms; }
.stagger > *:nth-child(6) { --reveal-delay: 350ms; }
.stagger > *:nth-child(n+7) { --reveal-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
    .btn:hover { transform: none; }
    .card--hover:hover { transform: none; }
    .link-arrow:hover .icon { transform: none; }
}

@media print {
    .site-header, .mobile-nav, .cta-band, .hero__visual, .form-card { display: none; }
    body { color: #000; background: #fff; }
    .band { padding-block: 1rem; }
}