/* =====================================================================
   LEIS & LEIS ESTRICHBAU — Website Design System
   Farben: Navy / Blau (Bestand) · Stahlgrau aus dem Logo
   ===================================================================== */

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-var.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

:root {
    /* Bestandsfarben */
    --ink: #050d17;
    --navy-950: #071120;
    --navy-900: #0a1628;
    --navy-800: #0d2840;
    --primary: #1a4971;
    --primary-2: #2563a8;
    --accent: #3b82f6;
    --accent-2: #60a5fa;
    --accent-rgb: 59, 130, 246;
    --logo-blue: #2c4a85;
    --steel: #8e959e;

    --paper: #eef2f6;
    --paper-2: #e3e9f0;
    --white: #ffffff;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;

    --text: #142236;
    --text-soft: #4b5b70;
    --line: rgba(10, 22, 40, 0.12);
    --line-light: rgba(255, 255, 255, 0.12);

    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --gutter: clamp(16px, 4vw, 56px);
    --container: 1360px;
    --section: clamp(80px, 11vw, 168px);
    --radius: 4px;
    --radius-lg: 10px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --nav-h: 84px;
}

@media (min-width: 1920px) {
    :root { --container: 1640px; }
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(16px, 0.35vw + 14.8px, 19px);
    line-height: 1.65;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
    position: fixed; left: 16px; top: -60px; z-index: 10001;
    background: var(--accent); color: #fff; padding: 10px 16px; font-weight: 700;
    transition: top .3s var(--ease);
}
.skip-link:focus { top: 16px; }

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

/* ---------------------------------------------------------------------
   Typografie
   --------------------------------------------------------------------- */
.display {
    font-size: clamp(3rem, 9.4vw, 11.5rem);
    font-stretch: 112%;
    font-weight: 850;
    line-height: 0.88;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}
.h-xl {
    font-size: clamp(2.3rem, 5.6vw, 6rem);
    font-stretch: 108%;
    line-height: 0.95;
    letter-spacing: -0.035em;
}
.h-lg {
    font-size: clamp(1.9rem, 3.6vw, 3.6rem);
    font-stretch: 104%;
    line-height: 1;
    letter-spacing: -0.03em;
}
.h-md { font-size: clamp(1.35rem, 1.8vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.12; }
.lead { font-size: clamp(1.08rem, 0.7vw + 0.9rem, 1.45rem); line-height: 1.55; color: var(--text-soft); max-width: 46ch; }
.muted { color: var(--text-soft); }
.accent { color: var(--accent); }
.outline-text { color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.is-dark .outline-text, .outline-text--light { -webkit-text-stroke-color: rgba(255,255,255,0.55); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-2);
    margin-bottom: clamp(18px, 2vw, 28px);
}
.eyebrow::before {
    content: ''; width: 34px; height: 1px; background: currentColor; flex: none;
}
.eyebrow .num { color: var(--slate-500); }
.is-dark .eyebrow { color: var(--accent-2); }
.is-dark .eyebrow .num { color: rgba(255,255,255,0.45); }

.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.04em; }

/* Zeilen-Reveal (per JS gesplittet) */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-mask > .line-inner { display: block; will-change: transform; }

/* ---------------------------------------------------------------------
   Sektionen / Hintergründe
   --------------------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.is-dark { background: var(--navy-900); color: #e6edf6; }
.is-dark .lead, .is-dark .muted { color: rgba(230, 237, 246, 0.68); }
.is-ink { background: var(--ink); color: #e6edf6; }
.is-white { background: #fff; }

.bg-grid {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 96px 96px;
    background-position: center top;
}
.is-dark.bg-grid, .is-ink.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
}

.section-head {
    display: grid; gap: 24px; margin-bottom: clamp(48px, 6vw, 96px);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .section-head { grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: 64px; }
    .section-head .lead { justify-self: end; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--accent);
    --btn-fg: #fff;
    --btn-fill: var(--navy-900);
    --btn-fill-fg: #fff;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 56px; padding: 0 30px;
    font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid transparent; border-radius: var(--radius);
    transition: color .5s var(--ease), border-color .5s var(--ease), transform .3s var(--ease);
    white-space: nowrap;
}
.btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--btn-fill);
    transform: translateY(101%);
    transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); }
.btn .btn-arrow { display: inline-flex; width: 18px; overflow: hidden; }
.btn .btn-arrow i { transition: transform .45s var(--ease); }
.btn:hover .btn-arrow i { animation: arrowLoop .55s var(--ease); }
@keyframes arrowLoop { 0% { transform: translateX(0); } 49% { transform: translateX(22px); } 50% { transform: translateX(-22px); } 100% { transform: translateX(0); } }

.btn--dark { --btn-bg: var(--navy-900); --btn-fill: var(--accent); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-900); --btn-fill: var(--accent); }
.btn--ghost {
    --btn-bg: transparent; --btn-fg: var(--navy-900); --btn-fill: var(--navy-900);
    border-color: rgba(10,22,40,0.25);
}
.is-dark .btn--ghost, .btn--ghost-light {
    --btn-bg: transparent; --btn-fg: #fff; --btn-fill: #fff; --btn-fill-fg: var(--navy-900);
    border-color: rgba(255,255,255,0.3);
}
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.9rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
    position: relative; padding-bottom: 4px;
}
.link-arrow::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; transform-origin: right; transform: scaleX(0.35);
    transition: transform .5s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow i { transition: transform .4s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   Preloader
   --------------------------------------------------------------------- */
.preloader {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--ink); color: #fff;
    display: grid; place-items: center;
    pointer-events: none;
}
.preloader__mark { width: clamp(120px, 16vw, 190px); }
.preloader__mark rect, .preloader__mark line { transform-box: fill-box; }
.preloader__count {
    position: absolute; right: var(--gutter); bottom: calc(var(--gutter) * 0.8);
    font-family: var(--mono); font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 400;
    line-height: 1; color: rgba(255,255,255,0.9); letter-spacing: -0.04em;
}
.preloader__label {
    position: absolute; left: var(--gutter); bottom: calc(var(--gutter) * 0.8 + 0.6rem);
    font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.preloader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
html:not(.js) .preloader { display: none; }

/* ---------------------------------------------------------------------
   Cursor (nur Maus)
   --------------------------------------------------------------------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
    .cursor {
        display: block; position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
        width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
        background: var(--accent); mix-blend-mode: normal;
        transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), opacity .3s;
        opacity: 0;
    }
    .cursor.is-visible { opacity: 1; }
    .cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--accent-rgb), 0.16); backdrop-filter: blur(2px); border: 1px solid rgba(var(--accent-rgb), 0.6); }
    .cursor.is-view { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent); }
    .cursor__label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; opacity: 0; transition: opacity .3s; text-transform: uppercase; }
    .cursor.is-view .cursor__label { opacity: 1; }
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.site-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 900;
    height: var(--nav-h);
    color: var(--navy-900);
    transition: transform .6s var(--ease), background .4s, color .4s, height .4s var(--ease), box-shadow .4s;
}
.site-nav.on-dark { color: #fff; }
.site-nav.is-scrolled {
    --nav-h: 70px;
    background: rgba(238, 242, 246, 0.82);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    color: var(--navy-900);
    box-shadow: 0 1px 0 var(--line);
}
.site-nav.is-hidden { transform: translateY(-110%); }
.site-nav.menu-open { color: #fff !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; }

.site-nav__inner {
    height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
.brand__mark { width: 40px; height: 34px; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 3px; }
.brand__name { font-weight: 800; font-stretch: 112%; font-size: 1.12rem; letter-spacing: -0.01em; text-transform: uppercase; }
.brand__sub { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: .6; }

.nav-links { display: none; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav-links a {
    position: relative; font-weight: 600; font-size: 0.95rem; padding: 6px 0;
    opacity: .82; transition: opacity .3s;
}
.nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { opacity: 1; }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 1180px) { .nav-links { display: flex; } }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }
.nav-phone { display: none; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; opacity: .8; }
@media (min-width: 1440px) { .nav-phone { display: inline-flex; gap: 8px; align-items: center; } }

.menu-btn {
    position: relative; width: 52px; height: 52px; border-radius: 50%;
    display: inline-grid; place-items: center;
    border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent);
    transition: border-color .3s, background .3s;
}
.menu-btn:hover { border-color: currentColor; }
.menu-btn span { position: absolute; left: 15px; right: 15px; height: 2px; background: currentColor; transition: transform .5s var(--ease), opacity .3s; }
.menu-btn span:nth-child(1) { transform: translateY(-4px); }
.menu-btn span:nth-child(2) { transform: translateY(4px); right: 21px; }
.menu-btn:hover span:nth-child(2) { right: 15px; }
.menu-open .menu-btn span:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { transform: rotate(-45deg); right: 15px; }
@media (min-width: 1180px) { .menu-btn--desktop-hide { display: none; } }

/* Vollbild-Menü */
.menu {
    position: fixed; inset: 0; z-index: 850;
    background: var(--ink); color: #fff;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.menu.is-open { visibility: visible; }
html:not(.js) .menu.is-open { clip-path: none; }
.menu__inner {
    flex: 1; display: grid; gap: 48px; align-content: center;
    padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px;
}
@media (min-width: 1024px) { .menu__inner { grid-template-columns: 1.6fr 1fr; align-items: end; } }
.menu__links { counter-reset: m; }
.menu__links li { overflow: hidden; border-bottom: 1px solid var(--line-light); }
.menu__links a {
    display: flex; align-items: baseline; gap: 18px; padding: 10px 0;
    font-size: clamp(1.7rem, min(6.4vh, 9vw), 4.6rem); font-weight: 800; font-stretch: 112%;
    text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.02;
    transition: color .35s, padding-left .5s var(--ease);
}
.menu__links a::before {
    counter-increment: m; content: '0' counter(m);
    font-family: var(--mono); font-size: 0.8rem; font-weight: 400; letter-spacing: .1em; color: rgba(255,255,255,.4);
    font-stretch: 100%;
}
.menu__links a:hover, .menu__links a.is-active { color: var(--accent-2); padding-left: 14px; }
.menu__aside { display: grid; gap: 26px; font-size: 1rem; color: rgba(255,255,255,.75); }
.menu__aside h6 { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 400; margin-bottom: 8px; }
.menu__aside a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   HERO (Startseite)
   --------------------------------------------------------------------- */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    background: radial-gradient(120% 90% at 70% 0%, #0f2b4a 0%, var(--navy-900) 45%, var(--ink) 100%);
    color: #fff; overflow: hidden;
    display: flex; flex-direction: column;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__vignette {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,13,23,0.0) 40%, rgba(5,13,23,0.75) 100%),
                linear-gradient(90deg, rgba(5,13,23,0.55) 0%, rgba(5,13,23,0) 60%);
}
.hero__inner {
    position: relative; z-index: 2; flex: 1;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(28px, 5vh, 56px);
}
.hero__meta {
    display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: clamp(18px, 3vh, 32px);
    font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 10px; }
.hero__meta span::before { content: ''; width: 7px; height: 7px; background: var(--accent); }
.hero__meta span:nth-child(2)::before { background: var(--steel); }
.hero__title { margin-bottom: clamp(24px, 4vh, 44px); }
.hero__title .accent-line { color: var(--accent-2); }
.hero__bottom {
    display: grid; gap: 32px; align-items: end;
    border-top: 1px solid var(--line-light); padding-top: clamp(22px, 3.5vh, 36px);
}
@media (min-width: 1024px) { .hero__bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }
.hero__text { max-width: 52ch; color: rgba(230,237,246,0.75); font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem); margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    margin-top: clamp(28px, 4vh, 44px);
    border: 1px solid var(--line-light);
}
.hero__stat { padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 26px); border-right: 1px solid var(--line-light); }
.hero__stat:last-child { border-right: 0; }
.hero__stat strong { display: block; font-size: clamp(1.6rem, 3.2vw, 3rem); font-stretch: 110%; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.hero__stat span { display: block; margin-top: 8px; font-family: var(--mono); font-size: clamp(.62rem, .8vw, .74rem); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@media (min-width: 1024px) {
    .hero__stats { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 40px); width: min(420px, 34vw); grid-template-columns: 1fr; margin: 0; background: rgba(5,13,23,0.35); backdrop-filter: blur(6px); }
    .hero__stat { border-right: 0; border-bottom: 1px solid var(--line-light); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
    .hero__stat:last-child { border-bottom: 0; }
    .hero__stat span { margin: 0; text-align: right; }
}
@media (max-height: 640px) and (min-width: 1024px) { .hero__stats { display: none; } }

.hero__level {
    position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--nav-h) + 40px);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: rgba(255,255,255,.45);
    display: none;
}
@media (min-width: 1024px) { .hero__level { display: block; } }
.hero__level b { color: var(--accent-2); font-weight: 500; }

.scroll-cue {
    position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(28px, 5vh, 56px);
    display: none; flex-direction: column; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55);
    writing-mode: vertical-rl;
}
.scroll-cue::after { content: ''; width: 1px; height: 64px; background: linear-gradient(var(--accent-2), transparent); animation: cue 2.2s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------------------------------------------------------------
   Marquee
   --------------------------------------------------------------------- */
.marquee {
    position: relative; overflow: hidden; background: var(--accent); color: #fff;
    padding-block: clamp(14px, 2vw, 24px);
    border-block: 1px solid rgba(255,255,255,.15);
}
.marquee--dark { background: var(--ink); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
    display: inline-flex; align-items: center; gap: clamp(18px, 3vw, 44px); padding-right: clamp(18px, 3vw, 44px);
    font-size: clamp(1.6rem, 4.4vw, 4.4rem); font-weight: 800; font-stretch: 120%; text-transform: uppercase;
    letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
}
.marquee__item::after { content: ''; width: .42em; height: .42em; background: currentColor; opacity: .9; flex: none; }
.marquee__item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
html:not(.js) .marquee__track, .reduced .marquee__track { animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   Intro / Statement
   --------------------------------------------------------------------- */
.statement { font-size: clamp(1.7rem, 3.8vw, 4rem); font-weight: 700; font-stretch: 104%; line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; }
.statement .word { display: inline-block; opacity: .16; transition: opacity .2s; }
html:not(.js) .statement .word, .reduced .statement .word { opacity: 1; }

.intro-grid { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 1024px) { .intro-grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }

.check-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.check-list li {
    display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.check-list li::before { content: ''; width: 10px; height: 10px; background: var(--accent); flex: none; transform: translateY(-1px); }
.is-dark .check-list, .is-dark .check-list li { border-color: var(--line-light); }

/* ---------------------------------------------------------------------
   Schichtaufbau (Signature-Sektion)
   --------------------------------------------------------------------- */
.layers { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.layers__pin { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 20px) 40px; }
.layers__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .layers__grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.layers__copy .h-xl { margin-bottom: 24px; }
.layers__legend { margin-top: 32px; display: grid; gap: 0; border-top: 1px solid var(--line-light); }
.layers__legend li {
    display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: baseline;
    padding: 12px 0; border-bottom: 1px solid var(--line-light);
    color: rgba(255,255,255,.42); transition: color .4s;
}
.layers__legend li.is-active { color: #fff; }
.layers__legend li.is-active .lg-num { color: var(--accent-2); }
.layers__legend .lg-num { font-family: var(--mono); font-size: .75rem; }
.layers__legend .lg-name { font-weight: 700; font-size: clamp(.98rem, 1.1vw, 1.12rem); }
.layers__legend .lg-val { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; }

.layers__stage { position: relative; aspect-ratio: 1 / 0.92; width: 100%; max-width: 760px; margin-inline: auto; perspective: 1800px; }
.layers__stack {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(-38deg) translateY(-6%);
}
.layer {
    position: absolute; left: 14%; top: 14%; width: 72%; height: 72%;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--i) * 18px));
}
.layer__face {
    position: absolute; inset: 0;
    background: var(--c);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.layer__face::after { content: ''; position: absolute; inset: 0; background: var(--tex, none); opacity: .9; }
.layer__side-a, .layer__side-b { position: absolute; background: var(--c); filter: brightness(.62); }
.layer__side-a { left: 0; right: 0; bottom: 0; height: var(--t); transform-origin: bottom; transform: rotateX(-90deg); }
.layer__side-b { top: 0; bottom: 0; right: 0; width: var(--t); transform-origin: right; transform: rotateY(90deg); filter: brightness(.45); }
.layer__tag {
    position: absolute; right: -6%; top: 50%; white-space: nowrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; transform: rotateZ(38deg) rotateX(-58deg) translate(30px, -50%); transform-origin: left center;
    opacity: 0; display: none;
}
@media (min-width: 768px) { .layer__tag { display: block; } }
.layers__laser {
    position: absolute; left: 0; right: 0; top: 50%; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent-2) 20%, #fff 50%, var(--accent-2) 80%, transparent);
    box-shadow: 0 0 18px 2px rgba(96,165,250,.7);
    opacity: 0;
}
.layers__dim {
    position: absolute; right: 0; bottom: 4%; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: rgba(255,255,255,.5);
}
.layers__dim b { color: var(--accent-2); font-weight: 500; font-size: 1.6rem; display: block; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------------
   Leistungs-Karten
   --------------------------------------------------------------------- */
.svc-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-grid--4 { }
@media (min-width: 1100px) { .svc-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.svc-card {
    --mx: 50%; --my: 50%;
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: 18px;
    min-height: clamp(300px, 30vw, 420px);
    padding: clamp(26px, 2.6vw, 40px);
    background: var(--paper);
    transition: color .5s var(--ease);
}
.is-white .svc-card { background: #fff; }
.svc-card::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: var(--navy-900);
    clip-path: inset(100% 0 0 0);
    transition: clip-path .7s var(--ease);
}
.svc-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .35), transparent 60%);
}
.svc-card:hover { color: #fff; }
.svc-card:hover::before { clip-path: inset(0 0 0 0); }
.svc-card:hover::after { opacity: 1; }
.svc-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card__num { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--slate-500); transition: color .5s; }
.svc-card:hover .svc-card__num { color: rgba(255,255,255,.55); }
.svc-card__icon {
    width: 56px; height: 56px; display: grid; place-items: center;
    border: 1px solid var(--line); font-size: 1.3rem; color: var(--primary-2);
    transition: border-color .5s, color .5s, transform .6s var(--ease);
}
.svc-card:hover .svc-card__icon { border-color: rgba(255,255,255,.25); color: var(--accent-2); transform: rotate(90deg); }
.svc-card:hover .svc-card__icon i { transform: rotate(-90deg); }
.svc-card__icon i { transition: transform .6s var(--ease); }
.svc-card__title { font-size: clamp(1.45rem, 2vw, 2.1rem); font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.02em; margin-top: auto; }
.svc-card__sub { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-2); transition: color .5s; }
.svc-card:hover .svc-card__sub { color: var(--accent-2); }
.svc-card__text { color: var(--text-soft); margin: 0; transition: color .5s; max-width: 38ch; }
.svc-card:hover .svc-card__text { color: rgba(255,255,255,.72); }
.svc-card__more { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; }
.svc-card__more i { transition: transform .4s var(--ease); }
.svc-card:hover .svc-card__more i { transform: translateX(6px); }

/* ---------------------------------------------------------------------
   Zahlen
   --------------------------------------------------------------------- */
.stats-band { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-light); }
@media (min-width: 900px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stat {
    padding: clamp(28px, 4vw, 56px) clamp(4px, 1.4vw, 24px);
    border-bottom: 1px solid var(--line-light);
    border-right: 1px solid var(--line-light);
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) { .stat:nth-child(2n) { border-right: 1px solid var(--line-light); } .stat:last-child { border-right: 0; } }
.stat__num { display: flex; align-items: flex-start; font-size: clamp(3rem, 8vw, 8.5rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.05em; line-height: .9; }
.stat__num sup { font-size: .36em; color: var(--accent-2); margin-left: 4px; top: 0; line-height: 1.2; }
.stat__label { margin-top: 16px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---------------------------------------------------------------------
   Vorteile (Liste mit Hover-Zeilen)
   --------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--line); }
.row-item {
    position: relative; display: grid; gap: 8px 32px; align-items: baseline;
    grid-template-columns: 54px 1fr;
    padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line);
    overflow: hidden;
}
@media (min-width: 900px) { .row-item { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.1fr) 40px; } }
.row-item::before {
    content: ''; position: absolute; inset: 0; background: #fff; z-index: -1;
    transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease);
}
.row-item:hover::before { transform: scaleY(1); }
.row-item__num { font-family: var(--mono); font-size: .8rem; color: var(--slate-500); padding-left: 4px; }
.row-item__title { font-size: clamp(1.3rem, 2.2vw, 2.2rem); font-stretch: 108%; letter-spacing: -0.025em; transition: transform .5s var(--ease); }
.row-item:hover .row-item__title { transform: translateX(10px); }
.row-item__text { grid-column: 2; color: var(--text-soft); margin: 0; }
@media (min-width: 900px) { .row-item__text { grid-column: auto; } }
.row-item__icon { display: none; color: var(--accent); justify-self: end; transition: transform .5s var(--ease); }
@media (min-width: 900px) { .row-item__icon { display: block; } }
.row-item:hover .row-item__icon { transform: rotate(-45deg); }
.is-dark .rows, .is-dark .row-item { border-color: var(--line-light); }
.is-dark .row-item::before { background: rgba(255,255,255,.04); }

/* ---------------------------------------------------------------------
   Ablauf / Prozess
   --------------------------------------------------------------------- */
.process { position: relative; display: grid; gap: 0; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, 1fr); } }
.process__line { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line); display: none; }
.process__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
@media (min-width: 900px) { .process__line { display: block; } }
.step { position: relative; padding: 36px 0 28px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .step { padding: 48px 32px 0 0; border-top: 0; } }
.step__dot { position: absolute; top: -6px; left: 0; width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--accent); display: none; }
@media (min-width: 900px) { .step__dot { display: block; } }
.step__num { font-size: clamp(3rem, 5vw, 5rem); font-weight: 800; font-stretch: 115%; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--primary-2); margin-bottom: 20px; }
.step h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); margin-bottom: 12px; letter-spacing: -0.02em; }
.step p { color: var(--text-soft); margin: 0; }
.is-dark .step { border-color: var(--line-light); }
.is-dark .process__line { background: var(--line-light); }
.is-dark .step__dot { background: var(--navy-900); }
.is-dark .step p { color: rgba(255,255,255,.62); }

/* ---------------------------------------------------------------------
   Testimonials
   --------------------------------------------------------------------- */
.quotes { display: grid; gap: 40px; }
@media (min-width: 1024px) { .quotes { grid-template-columns: 0.8fr 1.2fr; gap: 80px; } }
.quote-slider { position: relative; }
.quote-track { display: grid; }
.quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.quote.is-active { opacity: 1; visibility: visible; }
.quote__text { font-size: clamp(1.4rem, 2.5vw, 2.4rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 32px; }
.quote__text::before { content: '„'; color: var(--accent); }
.quote__text::after { content: '“'; color: var(--accent); }
.quote__by { display: flex; align-items: center; gap: 16px; }
.quote__avatar { width: 52px; height: 52px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.2rem; }
.quote__name { font-weight: 700; }
.quote__meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--slate-500); text-transform: uppercase; }
.stars { display: inline-flex; gap: 4px; color: #f5b301; font-size: .9rem; margin-bottom: 20px; }
.stars .off { color: var(--slate-300); }
.quote-nav { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.quote-nav button { width: 52px; height: 52px; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; }
.quote-nav button:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.quote-count { font-family: var(--mono); font-size: .8rem; margin-left: 12px; color: var(--slate-500); }
.quote-progress { height: 2px; background: var(--line); margin-top: 28px; position: relative; overflow: hidden; }
.quote-progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------------------------------------------------------------------
   Split / Feature-Blöcke
   --------------------------------------------------------------------- */
.split { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }

.panel {
    position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px);
    background: var(--navy-900); color: #fff;
}
.panel--light { background: #fff; color: var(--text); border: 1px solid var(--line); }
.panel__corner { position: absolute; width: 22px; height: 22px; border-color: var(--accent); border-style: solid; }
.panel__corner--tl { left: 12px; top: 12px; border-width: 2px 0 0 2px; }
.panel__corner--br { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; }

.brand-visual {
    position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px;
    background: #fff; border: 1px solid var(--line);
    display: grid; place-items: center; overflow: hidden;
}
.brand-visual img { width: 72%; height: auto; position: relative; z-index: 2; }
.brand-visual svg.bv-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.brand-visual__badge {
    position: absolute; z-index: 3; left: 0; bottom: 0; background: var(--accent); color: #fff;
    padding: 20px 26px; display: flex; align-items: baseline; gap: 10px;
}
.brand-visual__badge strong { font-size: clamp(2.2rem, 4vw, 3.6rem); font-stretch: 112%; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.brand-visual__badge span { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

.promise { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .promise { grid-template-columns: 1fr 1fr; } }
.promise__item { background: #fff; padding: 26px; display: grid; gap: 10px; }
.promise__item i { color: var(--accent); font-size: 1.1rem; }
.promise__item strong { font-size: 1.08rem; }

/* ---------------------------------------------------------------------
   CTA (groß)
   --------------------------------------------------------------------- */
.cta-xl { position: relative; background: var(--accent); color: #fff; overflow: hidden; }
.cta-xl__inner { position: relative; z-index: 2; padding-block: clamp(80px, 12vw, 180px); display: grid; gap: 40px; }
@media (min-width: 1024px) { .cta-xl__inner { grid-template-columns: 1fr auto; align-items: end; } }
.cta-xl__title { font-size: clamp(2.6rem, 8.2vw, 9.4rem); font-stretch: 115%; font-weight: 850; text-transform: uppercase; letter-spacing: -0.045em; line-height: .88; }
.cta-xl__title em { font-style: normal; color: var(--navy-900); }
.cta-xl__side { display: grid; gap: 20px; max-width: 360px; }
.cta-xl__side p { margin: 0; color: rgba(255,255,255,.85); }
.cta-xl__grid { position: absolute; inset: 0; z-index: 1; opacity: .25;
    background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
    background-size: 80px 80px; mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%); }
.circle-btn {
    width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%;
    background: var(--navy-900); color: #fff; display: grid; place-items: center; text-align: center;
    font-weight: 700; font-size: 1rem; line-height: 1.2; position: relative; isolation: isolate; overflow: hidden;
    transition: color .4s;
}
.circle-btn::before { content: ''; position: absolute; inset: 0; background: #fff; border-radius: 50%; transform: scale(0); transition: transform .6s var(--ease); z-index: -1; }
.circle-btn:hover { color: var(--navy-900); }
.circle-btn:hover::before { transform: scale(1); }
.circle-btn i { display: block; font-size: 1.4rem; margin-top: 10px; }

/* ---------------------------------------------------------------------
   Seiten-Hero (Unterseiten)
   --------------------------------------------------------------------- */
.page-hero {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(110% 120% at 85% 0%, #123659 0%, var(--navy-900) 50%, var(--ink) 100%);
    padding-top: calc(var(--nav-h) + clamp(60px, 10vw, 140px));
    padding-bottom: clamp(48px, 6vw, 88px);
}
.page-hero__grid-bg { position: absolute; inset: 0; opacity: .6;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 96px 96px; mask-image: linear-gradient(180deg, #000 30%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.page-hero__squares { position: absolute; right: calc(var(--gutter) * 0.5); top: calc(var(--nav-h) + 10px); width: clamp(140px, 22vw, 340px); opacity: .9; }
@media (max-width: 767px) { .page-hero__squares { opacity: .35; } }
.page-hero__inner { position: relative; z-index: 2; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: clamp(24px, 3vw, 40px); }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--accent-2); }
.crumbs .sep { opacity: .5; }
.page-hero__title { font-size: clamp(2.8rem, 10vw, 10.5rem); font-stretch: 115%; font-weight: 850; text-transform: uppercase; letter-spacing: -0.05em; line-height: .86; }
.page-hero__foot { display: grid; gap: 24px; margin-top: clamp(32px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line-light); }
@media (min-width: 900px) { .page-hero__foot { grid-template-columns: 1fr auto; align-items: end; } }
.page-hero__text { margin: 0; max-width: 56ch; color: rgba(230,237,246,.72); font-size: clamp(1rem, .5vw + .9rem, 1.2rem); }
.page-hero__index { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; color: rgba(255,255,255,.45); text-transform: uppercase; }

/* ---------------------------------------------------------------------
   Leistungen – Detail
   --------------------------------------------------------------------- */
.svc-nav {
    position: sticky; top: 0; z-index: 50; background: rgba(238,242,246,.9);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
    transition: top .6s var(--ease);
}
body.nav-visible .svc-nav { top: 70px; }
.svc-nav__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 12px; }
.svc-nav__list::-webkit-scrollbar { display: none; }
.svc-nav__list a { flex: none; padding: 10px 16px; font-weight: 600; font-size: .9rem; border: 1px solid transparent; transition: border-color .3s, background .3s, color .3s; white-space: nowrap; }
.svc-nav__list a:hover { border-color: var(--line); }
.svc-nav__list a.is-active { background: var(--navy-900); color: #fff; }

.svc-detail { padding-block: clamp(72px, 9vw, 140px); border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.svc-detail__grid { display: grid; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 1024px) { .svc-detail__grid { grid-template-columns: 0.95fr 1.05fr; } }
.svc-detail__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px; }
.svc-detail__idx { font-family: var(--mono); font-size: .8rem; color: var(--slate-500); }
.svc-detail__title { font-size: clamp(1.9rem, 3.3vw, 4rem); font-stretch: 100%; hyphens: manual !important; text-transform: uppercase; letter-spacing: -0.045em; line-height: .9; margin-bottom: 14px; }
.svc-detail__sub { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--svc, var(--primary-2)); margin-bottom: 28px; display: block; }
.svc-detail .lead { max-width: 52ch; }
.spec-card { background: var(--navy-900); color: #fff; padding: clamp(24px, 3vw, 44px); position: relative; overflow: hidden; }
.spec-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 16px; }
.spec-card__icon { width: 64px; height: 64px; display: grid; place-items: center; background: var(--svc, var(--accent)); font-size: 1.5rem; }
.spec-card__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-top: 1px solid var(--line-light); }
.spec-table th, .spec-table td { padding: 14px 0; text-align: left; vertical-align: top; }
.spec-table th { font-weight: 400; color: rgba(255,255,255,.6); font-size: .95rem; padding-right: 16px; }
.spec-table td { font-family: var(--mono); font-size: .9rem; text-align: right; color: #fff; }
.feature-grid { display: grid; gap: 0; margin: 28px 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.feature-grid li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.feature-grid li i { color: var(--svc, var(--accent)); margin-top: 5px; font-size: .8rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; padding: 7px 14px; border: 1px solid var(--line); font-size: .86rem; font-weight: 600; background: #fff; }
.tag--dark { background: transparent; border-color: var(--line-light); color: rgba(255,255,255,.8); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------------------------------------------------------------------
   Team
   --------------------------------------------------------------------- */
.team-grid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1700px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.member { position: relative; }
.member__img {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-900);
}
.member__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.06); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.member:hover .member__img img { filter: grayscale(0); transform: scale(1); }
.member__ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--primary) 0%, var(--navy-900) 70%); }
.member__ph span { font-size: clamp(5rem, 12vw, 9rem); font-weight: 850; font-stretch: 120%; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); letter-spacing: -0.06em; line-height: 1; }
.member__ph::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; }
.member__contact { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.member__contact a { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: var(--navy-900); transform: translateY(12px); opacity: 0; transition: transform .5s var(--ease), opacity .5s, background .3s, color .3s; }
.member:hover .member__contact a, .member:focus-within .member__contact a { transform: none; opacity: 1; }
.member__contact a:nth-child(2) { transition-delay: .06s; }
.member__contact a:hover { background: var(--accent); color: #fff; }
@media (hover: none) { .member__contact a { transform: none; opacity: 1; } .member__img img { filter: none; transform: none; } }
.member__body { padding-top: 20px; display: grid; gap: 6px; }
.member__name { font-size: clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing: -0.02em; }
.member__role { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-2); }
.member__text { color: var(--text-soft); font-size: .96rem; margin: 6px 0 0; }

/* ---------------------------------------------------------------------
   Referenzen
   --------------------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); }
.filter-btn { padding: 11px 20px; border: 1px solid var(--line); font-weight: 600; font-size: .92rem; transition: background .3s, color .3s, border-color .3s; display: inline-flex; gap: 10px; align-items: center; }
.filter-btn .count { font-family: var(--mono); font-size: .72rem; opacity: .55; }
.filter-btn:hover { border-color: var(--navy-900); }
.filter-btn.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.ref-grid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
@media (min-width: 640px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ref-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ref-grid > .ref:nth-child(6n+1) { grid-column: span 2; } .ref-grid > .ref:nth-child(6n+1) .ref__img { aspect-ratio: 2.41 / 1; } }
.ref { display: block; text-align: left; width: 100%; }
.ref.is-hidden { display: none; }
.ref__img { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--navy-900); }
.ref__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.ref:hover .ref__img img { transform: scale(1.1); }
.ref__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,13,23,.7)); opacity: 0; transition: opacity .5s; }
.ref:hover .ref__img::after { opacity: 1; }
.ref__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.25); font-size: 3rem; background: linear-gradient(150deg, var(--primary) 0%, var(--navy-900) 75%); }
.ref__ph::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 40px 40px; }
.ref__cat { position: absolute; left: 14px; top: 14px; z-index: 2; background: #fff; color: var(--navy-900); padding: 6px 12px; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.ref__body { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-top: 18px; }
.ref__title { font-size: clamp(1.15rem, 1.5vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; }
.ref__meta { margin-top: 8px; font-family: var(--mono); font-size: .76rem; color: var(--slate-500); letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ref__go { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); transition: background .3s, color .3s, transform .5s var(--ease); }
.ref:hover .ref__go { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------
   News
   --------------------------------------------------------------------- */
.news-grid { display: grid; gap: clamp(28px, 3vw, 44px); }
@media (min-width: 700px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news { display: flex; flex-direction: column; text-align: left; width: 100%; border-top: 2px solid var(--navy-900); padding-top: 18px; }
.news__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; color: var(--slate-500); }
.news__top .cat { color: var(--primary-2); }
.news__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-900); position: relative; margin-bottom: 22px; }
.news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.news:hover .news__img img { transform: scale(1.06); }
.news__title { font-size: clamp(1.3rem, 1.8vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; transition: color .3s; }
.news:hover .news__title { color: var(--primary-2); }
.news__excerpt { color: var(--text-soft); margin-bottom: 18px; }
.news .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------------
   Modal (dialog)
   --------------------------------------------------------------------- */
dialog.modal {
    width: min(1040px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
    background: #fff; color: var(--text); overflow: hidden; border-radius: 0;
}
dialog.modal::backdrop { background: rgba(5,13,23,.78); backdrop-filter: blur(6px); }
dialog.modal[open] { animation: modalIn .6s var(--ease); display: flex; flex-direction: column; }
@keyframes modalIn { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__scroll { overflow-y: auto; overscroll-behavior: contain; }
.modal__img { aspect-ratio: 16 / 8; background: var(--navy-900); overflow: hidden; }
.modal__img img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(24px, 4vw, 56px); }
.modal__title { font-size: clamp(1.7rem, 3.6vw, 3.2rem); font-stretch: 108%; letter-spacing: -0.035em; line-height: 1; margin: 12px 0 24px; }
.modal__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 28px; }
@media (min-width: 768px) { .modal__facts { grid-template-columns: repeat(4, 1fr); } }
.modal__facts div { background: #fff; padding: 16px 18px; }
.modal__facts small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 4px; }
.modal__facts strong { font-size: 1.02rem; }
.modal__text { color: var(--text-soft); line-height: 1.8; }
.modal__close {
    position: absolute; right: 14px; top: 14px; z-index: 5; width: 50px; height: 50px; background: var(--navy-900); color: #fff;
    display: grid; place-items: center; font-size: 1.1rem; transition: background .3s, transform .5s var(--ease);
}
.modal__close:hover { background: var(--accent); transform: rotate(90deg); }
.modal__foot { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 clamp(24px, 4vw, 56px) clamp(24px, 4vw, 48px); }

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.faq-layout { display: grid; gap: 48px; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 300px 1fr; gap: 80px; } .faq-side { position: sticky; top: 110px; align-self: start; } }
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) { .faq-cats { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: 1px solid var(--line); } }
.faq-cats a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--line); font-weight: 600; transition: color .3s, background .3s; }
@media (min-width: 1024px) { .faq-cats a { border: 0; border-bottom: 1px solid var(--line); padding: 16px 0; } }
.faq-cats a span { font-family: var(--mono); font-size: .74rem; color: var(--slate-500); }
.faq-cats a:hover, .faq-cats a.is-active { color: var(--primary-2); }
.faq-group { margin-bottom: clamp(48px, 6vw, 80px); scroll-margin-top: 120px; }
.faq-group__title { display: flex; align-items: center; gap: 14px; font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-stretch: 108%; letter-spacing: -0.03em; margin-bottom: 18px; }
.faq-group__title i { font-size: .6em; color: var(--accent); }
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary {
    list-style: none; cursor: pointer; display: flex; gap: 24px; justify-content: space-between; align-items: center;
    padding: clamp(18px, 2vw, 26px) 0; font-weight: 700; font-size: clamp(1.05rem, 1.2vw, 1.28rem); letter-spacing: -0.01em;
    transition: color .3s;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { color: var(--primary-2); }
.acc-icon { position: relative; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.acc-icon::before, .acc-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; transition: transform .5s var(--ease); }
.acc-icon::after { transform: rotate(90deg); }
.acc-item[open] .acc-icon { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(180deg); }
.acc-item[open] .acc-icon::after { transform: rotate(0); }
.acc-body { overflow: hidden; }
.acc-body__inner { padding: 0 64px clamp(20px, 2.4vw, 30px) 0; color: var(--text-soft); line-height: 1.8; max-width: 72ch; }
@media (max-width: 600px) { .acc-body__inner { padding-right: 0; } }
.is-dark .acc, .is-dark .acc-item, .is-dark .acc-icon { border-color: var(--line-light); }
.is-dark .acc-body__inner { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 0.8fr 1.2fr; } .contact-aside { position: sticky; top: 110px; align-self: start; } }
.contact-lines { border-top: 1px solid var(--line); margin-top: 32px; }
.contact-line { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: color .3s; }
.contact-line i { width: 44px; height: 44px; display: grid; place-items: center; background: var(--navy-900); color: #fff; transition: background .3s; }
a.contact-line:hover i { background: var(--accent); }
.contact-line small { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); }
.contact-line span { font-weight: 700; word-break: break-word; }

.form-card { background: #fff; padding: clamp(24px, 4vw, 56px); border: 1px solid var(--line); position: relative; }
.form-card__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-stretch: 108%; letter-spacing: -0.03em; margin-bottom: 8px; }
.form-steps { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 32px; }
.form-grid { display: grid; gap: 22px 20px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.form-legend { grid-column: 1 / -1; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-2); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.form-legend:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.field { position: relative; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 8px; color: var(--slate-700); }
.field input, .field select, .field textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--text);
    padding: 15px 16px; background: var(--paper); border: 1px solid transparent; border-bottom: 2px solid var(--slate-300);
    border-radius: 0; outline: none; transition: border-color .3s, background .3s;
    -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231a4971' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--line); border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }
.field--short input { max-width: 180px; }
.req { color: var(--accent); }

.check { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { width: 24px; height: 24px; flex: none; border: 2px solid var(--slate-300); display: grid; place-items: center; transition: background .3s, border-color .3s; margin-top: -1px; background: #fff; }
.check__box::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .3s var(--ease); margin-top: -3px; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check a { color: var(--primary-2); text-decoration: underline; text-underline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; padding: 11px 16px; border: 1px solid var(--slate-300); font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .3s; background: #fff; }
.chip span:hover { border-color: var(--navy-900); }
.chip input:checked + span { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-msg { display: none; gap: 14px; align-items: flex-start; padding: 18px 20px; margin-bottom: 24px; font-weight: 600; }
.form-msg.is-show { display: flex; animation: modalIn .5s var(--ease); }
.form-msg--ok { background: #e6f6ee; color: #0f6a3f; border-left: 4px solid #16a34a; }
.form-msg--err { background: #fdecec; color: #9b1c1c; border-left: 4px solid #dc2626; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.star-input { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.star-input button { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--slate-300); transition: color .2s, transform .3s var(--ease); line-height: 1; padding: 2px; }
.star-input button.is-on { color: #f5b301; }
.star-input button:hover { transform: scale(1.18) rotate(-8deg); }
.star-input__text { margin-left: 12px; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-600); }

.map-wrap { position: relative; height: clamp(320px, 45vw, 560px); filter: grayscale(1) contrast(1.05); transition: filter .8s; }
.map-wrap:hover { filter: none; }
.map-wrap iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }

/* ---------------------------------------------------------------------
   Rechtstexte
   --------------------------------------------------------------------- */
.legal { display: grid; gap: 48px; }
@media (min-width: 1024px) { .legal { grid-template-columns: 260px minmax(0, 760px); gap: 96px; } .legal-toc { position: sticky; top: 110px; align-self: start; } }
.legal-toc { font-size: .92rem; }
.legal-toc h6 { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); font-weight: 400; margin-bottom: 12px; }
.legal-toc ol { border-top: 1px solid var(--line); }
.legal-toc a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-soft); transition: color .3s, padding-left .4s var(--ease); }
.legal-toc a:hover { color: var(--primary-2); padding-left: 6px; }
@media (max-width: 1023px) { .legal-toc { display: none; } }
.legal-content { line-height: 1.8; color: var(--slate-700); overflow-wrap: anywhere; }
.legal-content h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-stretch: 106%; letter-spacing: -0.025em; margin: 2.4em 0 .8em; color: var(--text); scroll-margin-top: 110px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.15rem; margin: 1.8em 0 .6em; color: var(--text); letter-spacing: -0.01em; }
.legal-content h4 { font-size: 1rem; margin: 1.4em 0 .5em; }
.legal-content a { color: var(--primary-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-content ul { list-style: none; margin: 0 0 1em; }
.legal-content ul li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.legal-content ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--accent); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(230,237,246,.7); position: relative; overflow: hidden; }
.footer-top { padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(48px, 6vw, 80px); display: grid; gap: 48px; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand p { max-width: 34ch; margin-top: 20px; }
.footer-col h6 { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 400; margin-bottom: 18px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { position: relative; transition: color .3s; }
.footer-col a:hover { color: #fff; }
.footer-col a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.footer-col a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-contact li { display: flex; gap: 12px; }
.footer-contact i { color: var(--accent); width: 16px; margin-top: 6px; font-size: .85rem; }
.social { display: flex; gap: 8px; margin-top: 24px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-light); color: #fff; transition: background .3s, border-color .3s; }
.social a:hover { background: var(--accent); border-color: var(--accent); }
.footer-word {
    font-size: clamp(3.6rem, 17.5vw, 22rem); font-weight: 850; font-stretch: 125%; letter-spacing: -0.06em; line-height: .78;
    color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); text-transform: uppercase; white-space: nowrap;
    user-select: none; margin-bottom: -0.04em; text-align: center;
}
.footer-word span { display: inline-block; }
.footer-bottom { border-top: 1px solid var(--line-light); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .86rem; }
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: #fff; }

/* Mobile Aktionsleiste */
.mobile-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 800;
    display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; padding: 6px;
    background: rgba(5,13,23,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-light);
    transform: translateY(140%); transition: transform .6s var(--ease);
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px) * .5);
}
.mobile-bar.is-show { transform: none; }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: #fff; font-weight: 700; font-size: .9rem; }
.mobile-bar a:last-child { background: var(--accent); }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* Nach oben + Fortschritt */
.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 790; width: 56px; height: 56px;
    display: none; place-items: center; background: var(--navy-900); color: #fff;
    opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--ease), background .3s;
}
@media (min-width: 900px) { .to-top { display: grid; } }
.to-top.is-show { opacity: 1; transform: none; }
.to-top:hover { background: var(--accent); }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke: var(--accent-2); stroke-width: 2; }

/* Cookie */
.cookie {
    position: fixed; left: 12px; bottom: 12px; z-index: 950; width: min(440px, calc(100% - 24px));
    background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(5,13,23,.25);
    padding: 24px; display: none;
}
.cookie.is-show { display: block; animation: modalIn .6s var(--ease); }
.cookie h6 { font-size: 1.05rem; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.cookie p { font-size: .92rem; color: var(--text-soft); margin-bottom: 18px; }
.cookie p a { color: var(--primary-2); text-decoration: underline; }

/* Popup */
.popup {
    position: fixed; inset: 0; z-index: 960; display: none; place-items: center; padding: 16px;
    background: rgba(5,13,23,.72); backdrop-filter: blur(6px);
}
.popup.is-show { display: grid; animation: fadeIn .4s; }
@keyframes fadeIn { from { opacity: 0; } }
.popup__box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; color: #fff; padding: clamp(28px, 5vw, 48px); background: var(--popup-bg, var(--navy-900)); animation: modalIn .7s var(--ease); }
.popup__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.popup__deco i { position: absolute; opacity: .12; font-size: 2.6rem; animation: floaty 6s ease-in-out infinite; }
.popup__deco i:nth-child(1) { left: 8%; top: 10%; }
.popup__deco i:nth-child(2) { right: 10%; top: 18%; animation-delay: -1.5s; }
.popup__deco i:nth-child(3) { left: 14%; bottom: 14%; animation-delay: -3s; }
.popup__deco i:nth-child(4) { right: 12%; bottom: 10%; animation-delay: -4.5s; }
@keyframes floaty { 50% { transform: translateY(-14px) rotate(8deg); } }
.popup__icon { font-size: 2.4rem; margin-bottom: 18px; color: var(--popup-accent, var(--accent-2)); position: relative; }
.popup__title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-stretch: 108%; letter-spacing: -0.03em; margin-bottom: 14px; position: relative; }
.popup__text { color: rgba(255,255,255,.85); position: relative; }
.popup__close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.12); transition: background .3s, transform .5s var(--ease); z-index: 2; }
.popup__close:hover { background: rgba(255,255,255,.25); transform: rotate(90deg); }
.popup__foot { position: relative; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 24px; }
.popup .check__box { background: transparent; border-color: rgba(255,255,255,.5); }
.popup .btn { --btn-bg: var(--popup-accent, #fff); --btn-fg: var(--navy-900); --btn-fill: #fff; --btn-fill-fg: var(--navy-900); }

/* Leerzustände */
.empty { text-align: center; padding: clamp(48px, 8vw, 120px) 20px; border: 1px dashed var(--slate-300); }
.empty i { font-size: 2.6rem; color: var(--slate-400); margin-bottom: 18px; display: block; }
.empty h3 { font-size: clamp(1.4rem, 2vw, 2rem); margin-bottom: 10px; }
.empty p { color: var(--text-soft); max-width: 46ch; margin: 0 auto 24px; }

/* ---------------------------------------------------------------------
   Reveal-Zustände (nur mit JS aktiv)
   --------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js.reduced [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }

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

/* Kleine Screens */
@media (max-width: 479px) {
    .btn { padding: 0 22px; min-height: 52px; }
    .hero__actions .btn { flex: 1 1 100%; }
    .hero__stat span { letter-spacing: .06em; }
    .menu-btn { width: 46px; height: 46px; }
    .menu-btn span { left: 13px; right: 13px; }
    .brand__sub { display: none; }
    .brand__name { font-size: 1rem; }
}
@media (max-width: 899px) { body { padding-bottom: 0; } .site-footer { padding-bottom: 84px; } }

/* Druck */
@media print {
    .site-nav, .menu, .mobile-bar, .to-top, .cookie, .popup, .preloader, .cursor, .hero__canvas { display: none !important; }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Lange deutsche Wörter sauber umbrechen */
h1, h2, h3, h4 { overflow-wrap: break-word; }
@media (max-width: 600px) { h2, h3, h4 { hyphens: auto; -webkit-hyphens: auto; } }
.svc-grid--4 .svc-card__title { font-size: clamp(1.3rem, 1.45vw, 1.75rem); font-stretch: 104%; }
@media (min-width: 640px) and (max-width: 1099px) { .svc-grid--4 .svc-card__title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); } }

@media (min-width: 1024px) { .svc-detail--rev .svc-detail__main { order: 2; } }
.svc-detail.is-white .tag:not(.tag--dark) { background: var(--paper); }
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; background: var(--navy-900); color: rgba(255,255,255,.8);
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; }
.map-consent i { font-size: 2.4rem; color: var(--accent-2); }
.map-consent p { max-width: 46ch; margin: 0; }
.map-consent a { color: #fff; text-decoration: underline; }
.brand-visual .bv-mark { width: 60%; color: var(--logo-blue); position: relative; z-index: 2; }

/* Mobile/Tablet: Hero-Kennzahlen unter den Inhalt, Schichtaufbau ohne Pin */
@media (max-width: 1023px) {
    .hero__stats { order: 3; position: relative; z-index: 2; margin: 0 var(--gutter) clamp(24px, 5vh, 40px); background: rgba(5,13,23,.4); backdrop-filter: blur(6px); }
    .hero__inner { padding-bottom: 20px; }
    .layers__pin { min-height: 0; padding-block: var(--section); }
    .layers__stage { max-width: 520px; margin-top: 8px; }
}
@media (min-width: 1024px) {
    .hero__stats { right: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
    .hero__level { left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}

/* =====================================================================
   v10.1 – Ruhigere, angenehmere Gestaltung
   (weniger Versalien, keine Mini-Labels, runde Ecken, weichere Kontraste)
   ===================================================================== */
:root {
    --radius: 10px;
    --radius-lg: 18px;
    --section: clamp(72px, 9vw, 136px);
    --shadow-soft: 0 1px 2px rgba(10,22,40,.04), 0 12px 32px -12px rgba(10,22,40,.14);
}
body { line-height: 1.7; }

/* Überschriften: Satzschreibung, moderate Größen */
.display { font-size: clamp(2.5rem, 6vw, 6.2rem); font-stretch: 104%; font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-transform: none; }
.h-xl { font-size: clamp(2rem, 3.8vw, 3.7rem); font-stretch: 102%; line-height: 1.06; letter-spacing: -0.03em; }
.h-lg { font-size: clamp(1.7rem, 2.7vw, 2.7rem); font-stretch: 100%; line-height: 1.1; }
.statement { font-size: clamp(1.5rem, 2.9vw, 2.9rem); font-stretch: 100%; line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; }
.statement .word { opacity: .28; }

/* Beschriftungen: normale Schrift, gut lesbar */
.eyebrow { font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 12px; margin-bottom: 18px; }
.eyebrow::before { width: 28px; height: 2px; border-radius: 2px; }
.hero__meta, .hero__stat span, .stat__label, .svc-card__sub, .quote__meta, .crumbs, .svc-detail__sub,
.spec-card__label, .member__role, .ref__cat, .ref__meta, .news__top, .modal__facts small, .faq-cats a span,
.contact-line small, .form-steps, .form-legend, .star-input__text, .legal-toc h6, .footer-col h6, .menu__aside h6,
.layers__legend .lg-num, .layers__legend .lg-val, .layers__dim, .quote-count, .filter-btn .count, .spec-table td {
    font-family: var(--font); letter-spacing: 0; text-transform: none;
}
.hero__meta span { font-size: .98rem; color: rgba(255,255,255,.82); padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.hero__meta span::before { border-radius: 50%; }
.hero__stat span { font-size: .95rem; color: rgba(255,255,255,.7); }
.hero__stat strong { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.stat__label { font-size: 1rem; color: rgba(255,255,255,.7); }
.stat__num { font-size: clamp(2.8rem, 6vw, 6rem); font-stretch: 105%; }
.svc-card__sub { font-size: .95rem; font-weight: 600; }
.quote__meta { font-size: .95rem; }
.crumbs { font-size: .95rem; color: rgba(255,255,255,.65); }
.svc-detail__sub { font-size: 1.05rem; font-weight: 600; }
.spec-card__label { font-size: .95rem; color: rgba(255,255,255,.65); }
.spec-table td { font-size: 1rem; font-weight: 600; }
.member__role { font-size: .95rem; font-weight: 600; }
.ref__cat { font-size: .85rem; font-weight: 600; border-radius: 999px; padding: 6px 14px; }
.ref__meta { font-size: .95rem; }
.news__top { font-size: .95rem; }
.modal__facts small { font-size: .85rem; }
.faq-cats a span { font-size: .9rem; }
.contact-line small { font-size: .9rem; }
.form-steps { font-size: .95rem; }
.form-legend { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.star-input__text { font-size: 1rem; font-weight: 600; }
.legal-toc h6, .footer-col h6, .menu__aside h6 { font-size: 1rem; font-weight: 700; color: inherit; }
.footer-col h6 { color: #fff; }
.layers__legend .lg-num { font-size: .95rem; }
.layers__legend .lg-val { font-size: .95rem; }
.layers__dim { font-size: .95rem; }
.quote-count { font-size: .95rem; }

/* Titel ohne Versalien */
.svc-card__title { font-size: clamp(1.35rem, 1.7vw, 1.75rem); font-stretch: 100%; text-transform: none; letter-spacing: -0.02em; }
.svc-grid--4 .svc-card__title { font-size: clamp(1.3rem, 1.5vw, 1.6rem); font-stretch: 100%; }
.svc-detail__title { font-size: clamp(2rem, 3.6vw, 3.6rem); text-transform: none; letter-spacing: -0.03em; line-height: 1.05; }
.page-hero { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 100px)); padding-bottom: clamp(44px, 5vw, 72px); }
.page-hero__title { font-size: clamp(2.6rem, 6vw, 5.8rem); font-stretch: 104%; text-transform: none; letter-spacing: -0.035em; line-height: 1; }
.page-hero__foot { border-top: 0; padding-top: 0; margin-top: clamp(18px, 2.5vw, 28px); }
.page-hero__squares { width: clamp(120px, 16vw, 260px); opacity: .75; }
.cta-xl__title { font-size: clamp(2.4rem, 5.6vw, 5.8rem); font-stretch: 104%; text-transform: none; letter-spacing: -0.035em; line-height: 1.02; }
.cta-xl__inner { padding-block: clamp(72px, 9vw, 130px); }
.menu__links a { font-size: clamp(1.6rem, min(5.4vh, 8vw), 3.4rem); font-stretch: 102%; text-transform: none; letter-spacing: -0.025em; }
.menu__links a::before { content: none; }
.layers__legend li { grid-template-columns: 34px 1fr auto; }

/* Laufband ruhiger */
.marquee { background: var(--primary); padding-block: clamp(12px, 1.4vw, 18px); }
.marquee__item { font-size: clamp(1.15rem, 2vw, 1.8rem); font-stretch: 100%; text-transform: none; letter-spacing: -0.01em; font-weight: 700; }
.marquee__item:nth-child(even) { color: rgba(255,255,255,.75); -webkit-text-stroke: 0; }
.marquee__item::after { width: .32em; height: .32em; border-radius: 50%; opacity: .6; }

/* Runde Ecken & weiche Schatten */
.btn { border-radius: var(--radius); }
.svc-grid { gap: 16px; background: none; border: 0; }
.svc-card { border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); min-height: clamp(260px, 24vw, 340px); }
.svc-card::before { border-radius: inherit; }
.svc-card__icon { border-radius: 12px; }
.promise { gap: 12px; background: none; border: 0; }
.promise__item { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.hero__stats { border-radius: 16px; overflow: hidden; }
.panel, .spec-card, .form-card, .brand-visual { border-radius: var(--radius-lg); }
.form-card { box-shadow: var(--shadow-soft); }
.member__img, .ref__img { border-radius: var(--radius-lg); }
.news__img { border-radius: 14px; }
.news { border-top: 0; padding-top: 0; }
.news__top { margin-bottom: 12px; }
.member__contact a { border-radius: 10px; }
.ref__go, .quote-nav button { border-radius: 50%; }
.quote__avatar { border-radius: 50%; }
.filter-btn, .chip span, .tag, .svc-nav__list a { border-radius: 999px; }
.contact-line i { border-radius: 10px; }
.acc-icon { border-radius: 50%; }
.check__box { border-radius: 6px; }
.field input, .field select, .field textarea { border-radius: 10px; border: 1px solid var(--slate-300); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.form-msg { border-radius: 12px; }
dialog.modal { border-radius: 20px; }
.modal__close { border-radius: 50%; }
.modal__facts { border-radius: 12px; overflow: hidden; }
.mobile-bar { border-radius: 16px; overflow: hidden; }
.mobile-bar a:last-child { border-radius: 12px; }
.to-top { border-radius: 50%; }
.to-top svg { border-radius: 50%; }
.cookie { border-radius: 16px; }
.popup__box { border-radius: 20px; }
.popup__close { border-radius: 50%; }
.empty { border-radius: var(--radius-lg); }
.map-wrap { border-radius: 0; }
.row-item::before { border-radius: 12px; }
.step__dot { border-radius: 50%; }
.brand-visual__badge { border-radius: 0 14px 0 0; }
.spec-card__icon { border-radius: 14px; }
.circle-btn { width: clamp(132px, 12vw, 176px); }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.row-item { grid-template-columns: 1fr; gap: 6px 40px; padding-inline: 12px; }
.row-item__text { grid-column: auto; }
@media (min-width: 900px) { .row-item { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 40px; } }
.nav-phone { font-family: var(--font); font-size: .92rem; letter-spacing: 0; font-weight: 600; }
@media (max-width: 599px) { .hero__meta span { font-size: .85rem; padding: 6px 12px 6px 10px; } }
.brand-visual__badge span { font-family: var(--font); font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.footer-gag { margin-top: 14px !important; font-size: .88rem; font-style: italic; color: rgba(230,237,246,.32); transition: color .5s var(--ease), letter-spacing .5s var(--ease); cursor: default; }
.footer-gag:hover { color: var(--accent-2); }

/* v10.2 – Kennzahlen unter dem Hero-Text, Bühne rechts frei für die Estrich-Szene */
.hero__stats, .hero__stats { position: relative !important; inset: auto !important; width: auto !important; order: initial; margin: clamp(22px, 3.5vh, 36px) 0 0 !important;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(5,13,23,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-light); border-radius: 16px; overflow: hidden; }
.hero__stats .hero__stat { display: block; border-bottom: 0; border-right: 1px solid var(--line-light); }
.hero__stats .hero__stat:last-child { border-right: 0; }
.hero__stats .hero__stat span { margin-top: 6px; text-align: left; }
@media (min-width: 1024px) { .hero__stats { max-width: 640px; } .hero__inner { padding-bottom: clamp(28px, 5vh, 52px); } }
.hero__vignette { background: linear-gradient(180deg, rgba(5,13,23,0) 55%, rgba(5,13,23,.8) 100%), linear-gradient(90deg, rgba(5,13,23,.7) 0%, rgba(5,13,23,.25) 45%, rgba(5,13,23,0) 70%); }
@media (max-width: 1023px) { .hero__vignette { background: linear-gradient(180deg, rgba(5,13,23,.55) 0%, rgba(5,13,23,.35) 55%, rgba(5,13,23,.75) 100%); } }

/* =====================================================================
   v10.3 – Ruhig & hochwertig: Estrichoberfläche statt Effekte
   ===================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hero: Raum mit polierter Estrichfläche in Perspektive */
.hero { background: linear-gradient(180deg, #0b1830 0%, #0a1628 38%, #08121f 100%); }
.hero__room { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__room::before { /* Lichteinfall an der Rückwand */
    content: ''; position: absolute; left: 50%; top: 22%; width: 120%; height: 60%; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 60%, rgba(96,165,250,.20), rgba(59,130,246,.06) 45%, transparent 70%);
}
.hero__floor {
    position: absolute; left: -60%; right: -60%; bottom: -55%; height: 135%;
    transform-origin: 50% 100%; transform: perspective(900px) rotateX(70deg);
    background: #101b2b url('../img/estrich.jpg') center / 520px 520px repeat;
    -webkit-mask-image: linear-gradient(to top, #000 45%, rgba(0,0,0,.6) 70%, transparent 96%);
            mask-image: linear-gradient(to top, #000 45%, rgba(0,0,0,.6) 70%, transparent 96%);
}
.hero__sheen { /* weicher Reflex, wie Licht auf geschliffenem Boden */
    position: absolute; top: 0; bottom: 0; left: 30%; width: 40%;
    background: radial-gradient(50% 42% at 50% 46%, rgba(186,212,255,.30), rgba(120,160,230,.10) 50%, transparent 72%);
    mix-blend-mode: screen; animation: sheen 22s ease-in-out infinite alternate;
}
@keyframes sheen { from { transform: translateX(-55%); } to { transform: translateX(55%); } }
.hero__laser { /* Höhenlaser, der einmal langsam über den Boden läuft */
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(147,197,253,.55) 30%, rgba(219,234,254,.85) 50%, rgba(147,197,253,.55) 70%, transparent);
    box-shadow: 0 0 14px rgba(96,165,250,.6);
    opacity: 0; animation: laserPass 14s cubic-bezier(.45,0,.25,1) 2.5s infinite;
}
@keyframes laserPass { 0% { top: 8%; opacity: 0; } 10% { opacity: .7; } 60% { top: 92%; opacity: .55; } 70%, 100% { top: 100%; opacity: 0; } }
.hero__vignette { background: linear-gradient(180deg, rgba(8,18,31,.35) 0%, rgba(8,18,31,0) 30%, rgba(8,18,31,.25) 70%, rgba(8,18,31,.85) 100%), linear-gradient(90deg, rgba(8,18,31,.75) 0%, rgba(8,18,31,.3) 50%, rgba(8,18,31,0) 75%) !important; }
@media (max-width: 1023px) {
    .hero__floor { transform: perspective(700px) rotateX(66deg); background-size: 380px 380px; }
    .hero__vignette { background: linear-gradient(180deg, rgba(8,18,31,.55) 0%, rgba(8,18,31,.45) 55%, rgba(8,18,31,.85) 100%) !important; }
}

/* Seitenkopf: dieselbe Oberfläche, flacher */
.page-hero { background: linear-gradient(180deg, #0b1830 0%, #0a1628 60%, #08121f 100%); }
.hero__room--page .hero__floor { height: 120%; bottom: -60%; transform: perspective(800px) rotateX(72deg); }
.hero__room--page::before { top: 10%; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,18,31,.7) 0%, rgba(8,18,31,.2) 60%, transparent); pointer-events: none; }
.page-hero__inner { z-index: 2; }

/* CTA: Navy statt grellem Blau, Estrichfläche als ruhiger Grund */
.cta-xl { background: #0a1628 url('../img/estrich.jpg') center / 620px 620px; }
.cta-xl::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,22,40,.92) 0%, rgba(10,22,40,.7) 55%, rgba(26,73,113,.55) 100%); }
.cta-xl__title em { color: var(--accent-2); }
.circle-btn { background: var(--accent); }
.circle-btn::before { background: #fff; }

/* Karten: ruhiger Hover statt Farbwechsel */
.svc-card::before, .svc-card::after { display: none; }
.svc-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.svc-card:hover { color: inherit; transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 24px 50px -24px rgba(10,22,40,.35); }
.svc-card:hover .svc-card__text { color: var(--text-soft); }
.svc-card:hover .svc-card__sub { color: var(--primary-2); }
.svc-card:hover .svc-card__icon { transform: none; border-color: rgba(var(--accent-rgb), .35); color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.svc-card:hover .svc-card__icon i { transform: none; }
.svc-card:hover .svc-card__more { color: var(--accent); }
.row-item:hover .row-item__title { transform: none; }
.row-item:hover .row-item__icon { transform: translateX(4px); }
.member:hover .member__img img { transform: scale(1.03); }
.ref:hover .ref__img img { transform: scale(1.05); }

/* Statement: normal lesbar */
.statement .word { opacity: 1; }
.statement { font-weight: 600; color: var(--text); }
.is-dark .statement { color: #e6edf6; }

/* v10.3 – Bodengeometrie (Perspektive am Raum, Horizont bei ca. 1/3) */
.hero__room { perspective: 900px; perspective-origin: 50% 34%; }
.hero__floor { left: -150%; right: -150%; bottom: 0; height: 400%; transform: rotateX(82deg); background-size: 300px 300px;
    -webkit-mask-image: linear-gradient(to top, #000 55%, rgba(0,0,0,.5) 80%, transparent 97%); mask-image: linear-gradient(to top, #000 55%, rgba(0,0,0,.5) 80%, transparent 97%); }
.hero__sheen { left: 42%; width: 16%; background: radial-gradient(50% 30% at 50% 82%, rgba(186,212,255,.34), rgba(120,160,230,.10) 55%, transparent 75%); }
@keyframes sheen { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
@keyframes laserPass { 0% { top: 55%; opacity: 0; } 12% { opacity: .75; } 70% { top: 99%; opacity: .5; } 78%, 100% { top: 100%; opacity: 0; } }
.hero__room--page { perspective: 800px; perspective-origin: 50% 18%; }
.hero__room--page .hero__floor { bottom: 0; height: 400%; transform: rotateX(84deg); }
@media (max-width: 1023px) {
    .hero__room { perspective: 600px; perspective-origin: 50% 40%; }
    .hero__floor { transform: rotateX(80deg); background-size: 220px 220px; }
    .hero__room--page { perspective-origin: 50% 20%; }
}
.cta-xl__side .link-arrow::after { display: none; }

/* =====================================================================
   v10.4 – Hero: Kameraflug über polierten Estrich
   ===================================================================== */
.hero__room { perspective: 900px; perspective-origin: 50% 34%; transform-style: preserve-3d; }
.hero__floor { animation: dolly 26s linear infinite; }
.hero__floor--raw { background: #0b111a url('../img/estrich-roh.jpg') 50% 0 / 300px 300px repeat; }
.hero__floor--polished { background-image: url('../img/estrich.jpg'); clip-path: inset(0 0 0 0); }
.hero__floor--fx { background: none; animation: none; -webkit-mask-image: none; mask-image: none; }
@keyframes dolly { from { background-position: 50% 0; } to { background-position: 50% 300px; } }

/* Fensterlicht-Reflexionen auf dem polierten Boden */
.hero__window {
    position: absolute; left: 47.6%; top: 58%; width: 1.4%; height: 26%;
    background: linear-gradient(180deg, rgba(200,222,255,0) 0%, rgba(200,222,255,.22) 35%, rgba(220,234,255,.32) 70%, rgba(200,222,255,0) 100%);
    filter: blur(6px); mix-blend-mode: screen; animation: shimmer 7s ease-in-out infinite;
}
.hero__window--2 { left: 49.6%; animation-delay: -2.3s; }
.hero__window--3 { left: 51.6%; animation-delay: -4.6s; }
@keyframes shimmer { 50% { opacity: .55; } }
.hero__sheen { left: 44%; width: 12%; mix-blend-mode: screen; }

/* Schleif-Laser: Linie an der Kante zwischen roh und poliert */
.hero__grind { position: absolute; left: 0; right: 0; top: 100%; height: 3px; opacity: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(147,197,253,.9) 44%, #fff 50%, rgba(147,197,253,.9) 56%, transparent 70%);
    box-shadow: 0 0 22px 4px rgba(96,165,250,.75); }

.hero__title .accent-line { text-shadow: 0 0 40px rgba(59,130,246,.35); }
.hero__floor--polished { clip-path: none; }
.hero__rawcover { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2;
    background: #0b111a url('../img/estrich-roh.jpg') 50% 0 / 300px 300px repeat; animation: dolly 26s linear infinite; }
.hero__window, .hero__sheen { z-index: 1; }
@media (max-width: 1023px) { .hero__rawcover { background-size: 220px 220px; } }
.hero__room .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__room::before { display: none; }
.hero .hero__vignette { background: linear-gradient(180deg, rgba(8,18,31,.3) 0%, rgba(8,18,31,0) 28%, rgba(8,18,31,0) 70%, rgba(8,18,31,.7) 100%), linear-gradient(90deg, rgba(8,18,31,.62) 0%, rgba(8,18,31,.2) 45%, rgba(8,18,31,0) 70%) !important; }
@media (max-width: 1023px) { .hero .hero__vignette { background: linear-gradient(180deg, rgba(8,18,31,.5) 0%, rgba(8,18,31,.35) 55%, rgba(8,18,31,.75) 100%) !important; } }

/* =====================================================================
   v10.4 – Schichtaufbau mit Materialien, Einflug, Orbit und Beschriftung
   ===================================================================== */
.layers { background: radial-gradient(80% 70% at 70% 45%, #10284a 0%, #071120 60%, #050d17 100%); }
.layers__grid { align-items: center; }
@media (min-width: 1024px) { .layers__grid { grid-template-columns: 0.8fr 1.2fr; gap: 48px; } }
.layers__stage { max-width: 860px; aspect-ratio: 1 / .82; perspective: 2000px; }
.layers__stack { left: 0; right: 26%; transform: rotateX(58deg) rotateZ(-38deg); }
@media (max-width: 1023px) { .layers__stack { right: 0; } .layers__stage { max-width: 560px; aspect-ratio: 1 / .9; } }
.layer { left: 12%; top: 12%; width: 76%; height: 76%; transform: translateZ(calc(var(--i) * 26px)); }
.layer__face { border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 0 60px rgba(0,0,0,.12); overflow: hidden; }
.layer__face::after { display: none; }
.layer__side-a, .layer__side-b { background: var(--side); filter: none; }
.layer__side-a { box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.layer__side-b { filter: brightness(.78); }
.layer__flash { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.55), rgba(147,197,253,.25) 40%, transparent 70%); opacity: 0; }

.layer--0 { --side: #5d636c; }
.layer--0 .layer__face { background: #6d727a url('../img/beton.jpg') 0 0 / 180px 180px; }
.layer--0 .layer__side-a, .layer--0 .layer__side-b { background: #5d636c url('../img/beton.jpg') 0 0 / 120px 120px; filter: brightness(.7); }
.layer--1 { --side: #e3e8ee; }
.layer--1 .layer__face { background:
    linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(10,22,40,.18) calc(33.3% - 1px) 33.3%, transparent 33.3% calc(66.6% - 1px), rgba(10,22,40,.18) calc(66.6% - 1px) 66.6%, transparent 66.6%),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(10,22,40,.18) calc(50% - 1px) 50%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 2.4px, rgba(10,22,40,.08) 2.6px 3.4px, transparent 3.6px) 0 0 / 9px 9px,
    #eef2f6; }
.layer--1 .layer__side-a, .layer--1 .layer__side-b { background: radial-gradient(circle, rgba(10,22,40,.12) 1.4px, transparent 1.8px) 0 0 / 6px 6px, #dfe5ec; }
.layer--2 { --side: rgba(147,197,253,.5); }
.layer--2 .layer__face { background: linear-gradient(115deg, rgba(255,255,255,.45) 0%, rgba(147,197,253,.18) 30%, rgba(96,165,250,.28) 60%, rgba(255,255,255,.3) 100%); border-color: rgba(191,219,254,.6); backdrop-filter: blur(1px); }
.layer--3 { --side: #d9e0e9; }
.layer--3 .layer__face { background: #e7ecf2 url('../img/fbh.svg') center / 100% 100%; }
.layer--4 { --side: #8f99a6; }
.layer--4 .layer__face { background: #a7b0bc url('../img/estrich-hell.jpg') 0 0 / 200px 200px; }
.layer--4 .layer__side-a, .layer--4 .layer__side-b { background: #8f99a6 url('../img/estrich-hell.jpg') 0 0 / 140px 140px; filter: brightness(.82); }
.layer--5 { --side: #b8c1cc; }
.layer--5 .layer__face { background:
    linear-gradient(135deg, rgba(255,255,255,.35), transparent 45%, rgba(255,255,255,.12) 70%, transparent),
    linear-gradient(rgba(60,72,90,.35) 1.5px, transparent 1.5px) 0 0 / 100% 33.333%,
    linear-gradient(90deg, rgba(60,72,90,.35) 1.5px, transparent 1.5px) 0 0 / 33.333% 100%,
    #d3dae3; }

.layers__shadow { position: absolute; left: 4%; right: 30%; bottom: 6%; height: 22%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.65), transparent 70%); filter: blur(12px); }
@media (max-width: 1023px) { .layers__shadow { right: 4%; } }
.layers__laser { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; right: auto; border: 2px solid rgba(191,219,254,.95); border-radius: 2px;
    background: rgba(96,165,250,.14); box-shadow: 0 0 50px rgba(96,165,250,.7), inset 0 0 50px rgba(96,165,250,.4); opacity: 0; transform: translateZ(0); }

.layers__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.layers__lines path { fill: none; stroke: rgba(147,197,253,.7); stroke-width: 1.2; }
.layers__lines circle { fill: #93c5fd; }
.layers__callouts { position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; right: 0; top: 0; width: 25%; min-width: 170px; transform: translateY(-50%); opacity: 0;
    padding: 9px 13px; border-radius: 10px; background: rgba(10,22,40,.82); border: 1px solid rgba(147,197,253,.28); backdrop-filter: blur(6px); }
.callout strong { display: block; font-size: .95rem; line-height: 1.25; color: #fff; }
.callout span { display: block; font-size: .9rem; color: var(--accent-2); font-weight: 600; margin-top: 2px; }
@media (max-width: 1023px) { .layers__lines, .layers__callouts { display: none; } }
.layers__dim { right: 0; bottom: 0; }

.layers__detail { margin-top: 22px; padding: 16px 20px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.045); border-radius: 0 12px 12px 0; min-height: 104px; }
.layers__detail strong { display: block; font-size: 1.15rem; color: #fff; margin-bottom: 4px; }
.layers__detail p { margin: 0; color: rgba(230,237,246,.72); font-size: .98rem; }
.layers__legend li { cursor: default; }
.layers__legend li.is-current { color: #fff; }
.layers__legend li.is-current .lg-name { color: var(--accent-2); }
@media (min-width: 1024px) {
    .layers__stack { right: 34%; top: 6%; bottom: -6%; }
    .layers__shadow { right: 38%; }
    .callout { width: 30%; }
}
.layers__lines path { stroke-width: 1.4; stroke: rgba(147,197,253,.85); }

/* =====================================================================
   v10.4 – Schnellanfrage-Panel, schwebender Button, Marke mobil
   ===================================================================== */
.qf { position: fixed; inset: 0; z-index: 980; visibility: hidden; }
.qf.is-open { visibility: visible; }
.qf__backdrop { position: absolute; inset: 0; background: rgba(5,13,23,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.qf__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(5,13,23,.35); }
.qf__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 18px; background: var(--navy-900); color: #fff; }
.qf__title { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.qf__sub { margin: 6px 0 0; color: rgba(230,237,246,.72); font-size: .98rem; }
.qf__close { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; font-size: 1.1rem; transition: background .3s, transform .5s var(--ease); }
.qf__close:hover { background: var(--accent); transform: rotate(90deg); }
.qf__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 32px; }
.qf__direct { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 22px; }
.qf__direct a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; transition: border-color .3s, background .3s, color .3s; }
.qf__direct a i { color: var(--accent); }
.qf__direct a:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.qf .form-grid { gap: 16px 14px; }
.qf .field textarea { min-height: 96px; }
.qf__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 700; color: var(--primary-2); }
.qf__more i { transition: transform .4s var(--ease); }
.qf__more:hover i { transform: translateX(4px); }
@media (max-width: 639px) {
    .qf__panel { top: 4%; border-radius: 20px 20px 0 0; overflow: hidden; }
    .qf__head { padding: 20px 20px 16px; }
    .qf__body { padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
}
body.qf-open .mobile-bar, body.qf-open .qf-fab { opacity: 0; pointer-events: none; }

.qf-fab { position: fixed; right: 20px; bottom: 20px; z-index: 795; display: none; align-items: center; gap: 10px; padding: 0 22px; height: 56px; border-radius: 999px;
    background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 14px 34px -10px rgba(59,130,246,.75); opacity: 0; transform: translateY(20px) scale(.96);
    transition: opacity .4s, transform .5s var(--ease), background .3s; }
.qf-fab:hover { background: var(--primary-2); }
.qf-fab.is-show { opacity: 1; transform: none; }
.qf-fab i { font-size: .95rem; }
@media (min-width: 900px) { .qf-fab { display: inline-flex; } .to-top { bottom: 88px; } }

/* Mobile Leiste immer sichtbar, Seite unten freihalten */
@media (max-width: 899px) { .mobile-bar { transform: none; } body { padding-bottom: 76px; } .site-footer { padding-bottom: 0; } }

/* Firmenname vollständig, auch auf dem Handy */
.brand__sub { display: block !important; font-family: var(--font); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .78; }
.brand__name { text-transform: none; font-stretch: 105%; }
@media (max-width: 479px) { .brand__name { font-size: 1.02rem; } .brand__mark { width: 34px; height: 29px; } .brand { gap: 10px; } }

.qf__panel.is-sent form, .qf__panel.is-sent .qf__more { display: none; }
.qf__panel.is-sent .form-msg--ok { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 36px 24px; font-size: 1.08rem; border-left: 0; border-radius: 16px; }
.qf__panel.is-sent .form-msg--ok i { font-size: 2.6rem; color: #16a34a; }
@media (max-width: 1023px) { .layers__stage { margin-bottom: 64px; } .layers__dim { bottom: -60px; right: 0; text-align: right; } }

/* v10.5 – Formular-Zuverlässigkeit: Feldhinweise, Entwurf, Notfall-Link */
.field-error { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .88rem; font-weight: 600; color: #b91c1c; }
.field-error::before { content: '!'; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #dc2626; color: #fff; font-size: .7rem; display: grid; place-items: center; }
.has-error input, .has-error select, .has-error textarea { border-color: #dc2626 !important; background: #fff7f7 !important; }
.has-error .check__box { border-color: #dc2626; }
.form-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(var(--accent-rgb), .08); color: var(--primary); font-size: .92rem; font-weight: 600; }
.form-note button { margin-left: auto; font-weight: 700; color: var(--primary-2); text-decoration: underline; text-underline-offset: 3px; }
.form-fallback { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #9b1c1c; font-weight: 700; text-decoration: none; border: 1px solid rgba(220,38,38,.35); }
.form-fallback:hover { background: #9b1c1c; color: #fff; }

/* =====================================================================
   v10.6 – Handy-Optimierung & Zeilen-Reveal
   ===================================================================== */
.js:not(.reduced) .hero__title, .js:not(.reduced) .page-hero__title { visibility: hidden; }
.reveal-fallback .hero__title, .reveal-fallback .page-hero__title { visibility: visible !important; }
.line-mask { padding-bottom: .12em; margin-bottom: -.12em; padding-top: .04em; margin-top: -.04em; }

/* Hero auf dem Handy: Headline oben, Boden frei, Inhalt unten kompakt */
@media (max-width: 767px) {
    .hero__inner { justify-content: flex-start; padding-top: calc(var(--nav-h) + 18px); padding-bottom: 18px; }
    .hero__title { font-size: clamp(2.3rem, 11vw, 3.2rem); margin-bottom: 0; }
    .hero__bottom { margin-top: auto; border-top: 0; padding-top: 0; gap: 16px; }
    .hero__text { font-size: .98rem; line-height: 1.55; }
    .hero__actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
    .hero__actions .btn { flex: none; min-height: 50px; padding: 0 12px; font-size: .92rem; }
    .hero__actions .btn--ghost-light { background: rgba(10,22,40,.45); }
    .hero__stats { margin-top: 12px !important; }
    .hero__stats .hero__stat { padding: 10px 12px; }
    .hero__stat strong { font-size: 1.35rem; }
    .hero__stat span { font-size: .78rem !important; margin-top: 2px !important; }
    .hero .hero__vignette { background: linear-gradient(180deg, rgba(8,18,31,.75) 0%, rgba(8,18,31,.15) 30%, rgba(8,18,31,0) 45%, rgba(8,18,31,.35) 62%, rgba(8,18,31,.92) 82%) !important; }
}
@media (max-width: 767px) and (max-height: 700px) { .hero__text { display: none; } }
@media (max-width: 767px) { .hero__inner { padding-bottom: 92px; } }

/* Schichtaufbau auf dem Handy: Titel – Bühne – wechselnde Karte, alles in einem Bildschirm */
.layers__idx { display: none; }
@media (max-width: 1023px) {
    .layers__pin { min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) * .5) 0 96px; align-items: start; }
    .layers__grid { display: flex; flex-direction: column; gap: 0; }
    .layers__copy { display: contents; }
    .layers__copy .eyebrow { order: 1; margin-bottom: 8px; }
    .layers__copy .h-xl { order: 2; font-size: clamp(1.7rem, 7.5vw, 2.3rem); margin-bottom: 6px; }
    .layers__copy .lead, .layers__legend { display: none; }
    .layers__stage { order: 3; width: 100%; aspect-ratio: 1 / .78; margin: 0 auto; }
    .layers__detail { order: 4; margin-top: 4px; min-height: 0; padding: 14px 16px; }
    .layers__detail strong { font-size: 1.05rem; }
    .layers__detail p { font-size: .92rem; line-height: 1.5; }
    .layers__idx { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--accent-2); margin-bottom: 4px; }
    .layers__dim { bottom: 4px; right: 0; }
    .layers__dim b { font-size: 1.2rem; }
    .layers__stage { margin-bottom: 0; }
}

/* ---------- Material-Karten (Leistungen) ---------- */
.mat-track { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mat-track--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) and (max-width: 1099px) { .mat-track, .mat-track--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat-card { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 18px 40px -22px rgba(10,22,40,.28); transition: transform .6s var(--ease), box-shadow .6s var(--ease); isolation: isolate; }
.mat-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -26px rgba(10,22,40,.45); }
.mat-card__visual { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-900); }
.mat-card__tex { position: absolute; inset: -8%; background-size: 260px 260px; transition: transform 1.4s var(--ease); }
.mat-card:hover .mat-card__tex { transform: scale(1.08) rotate(-1deg); }
.mat-card__visual::before { /* Lichtkante wie auf polierter Fläche */
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); transform: translateX(-120%); transition: transform 1.2s var(--ease); }
.mat-card:hover .mat-card__visual::before, .mat-card.is-active .mat-card__visual::before { transform: translateX(120%); }
.mat-card__visual::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(5,13,23,.55)); }
.mat-card__icon { position: absolute; left: 18px; bottom: 16px; z-index: 2; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255,255,255,.92); color: var(--primary); font-size: 1.2rem; box-shadow: 0 10px 24px -8px rgba(5,13,23,.5); }
.mat-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.mat-card__sub { font-size: .9rem; font-weight: 700; color: var(--primary-2); }
.mat-card__title { font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.mat-card__text { color: var(--text-soft); font-size: .98rem; line-height: 1.55; }
.mat-card__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--accent); }
.mat-card__more i { transition: transform .4s var(--ease); }
.mat-card:hover .mat-card__more i { transform: translateX(6px); }
.mat--zement .mat-card__tex, .mat--sanierung .mat-card__tex { background-image: url('../img/beton.jpg'); }
.mat--sanierung .mat-card__tex { filter: contrast(1.15) brightness(.9); }
.mat--fliess .mat-card__tex { background-image: url('../img/estrich-hell.jpg'); }
.mat--heiz .mat-card__tex { background: #e7ecf2 url('../img/fbh.svg') center / 240px 240px repeat; }
.mat--industrie .mat-card__tex { background-image: url('../img/estrich-roh.jpg'); filter: brightness(1.5) contrast(1.1); }
.mat--schnell .mat-card__tex { background-image: url('../img/estrich.jpg'); }
.mat-progress { display: none; }

/* Handy: wischen statt endlos scrollen */
@media (max-width: 767px) {
    .mat-rail { margin-inline: calc(var(--gutter) * -1); }
    .mat-track, .mat-track--4 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .mat-track::-webkit-scrollbar { display: none; }
    .mat-card { flex: 0 0 82%; scroll-snap-align: center; transform: scale(.94); opacity: .75; transition: transform .45s var(--ease), opacity .45s; }
    .mat-card.is-active { transform: none; opacity: 1; }
    .mat-card:hover { transform: scale(.94); }
    .mat-card.is-active:hover { transform: none; }
    .mat-progress { display: block; position: relative; height: 3px; margin: 0 var(--gutter); background: var(--line); border-radius: 3px; overflow: hidden; }
    .mat-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--accent); border-radius: 3px; transition: transform .2s; }
}

/* ---------- Ablauf & Versprechen auf dem Handy kompakter ---------- */
@media (max-width: 767px) {
    .process { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scrollbar-width: none; }
    .process::-webkit-scrollbar { display: none; }
    .process .step { flex: 0 0 78%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: #fff; }
    .is-dark .process .step { background: rgba(255,255,255,.04); border-color: var(--line-light); }
    .step__num { font-size: 2.6rem; margin-bottom: 12px; }
    .promise { grid-template-columns: 1fr 1fr; gap: 10px; }
    .promise__item { padding: 16px; gap: 6px; }
    .promise__item strong { font-size: .98rem; line-height: 1.25; }
    .promise__item .muted { font-size: .88rem; line-height: 1.4; }
    .row-item { padding: 18px 4px; }
    .row-item__title { font-size: 1.2rem; }
    .row-item__text { font-size: .95rem; }
    .section { padding-block: 64px; }
    .section-head { margin-bottom: 32px; gap: 12px; }
    .h-xl { font-size: clamp(1.85rem, 8vw, 2.4rem); }
    .stat { padding: 22px 8px; }
    .stat__num { font-size: clamp(2.4rem, 13vw, 3.4rem); }
    .stat__label { font-size: .9rem; margin-top: 8px; }
}

/* ---------- Footer auf dem Handy kurz und zweispaltig ---------- */
@media (max-width: 899px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-top: 56px; padding-bottom: 32px; }
    .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
    .footer-brand p { margin-top: 14px; font-size: .95rem; }
    .footer-col h6 { margin-bottom: 10px; }
    .footer-col li { margin-bottom: 6px; font-size: .95rem; }
    .footer-bottom { flex-direction: column; gap: 8px; font-size: .82rem; padding-block: 16px; }
}
@media (max-width: 767px) {
    .quotes { gap: 20px; }
    .quote-slider { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; box-shadow: 0 18px 40px -24px rgba(10,22,40,.3); }
    .quote__text { font-size: 1.3rem; margin-bottom: 20px; }
    .quote-nav { margin-top: 16px; }
    .quotes > div:first-child .btn-row { margin-top: 12px; }
}
@media (max-width: 1023px) {
    .contact-layout { display: flex; flex-direction: column; gap: 40px; }
    .contact-layout > .form-card { order: -1; }
}
@media (max-width: 767px) { .form-card { padding: 22px 18px; border-radius: 18px; } }


/* =====================================================================
   v10.7 – Ruhige Animationen
   ===================================================================== */
.js:not(.reduced) .hero__title, .js:not(.reduced) .page-hero__title { visibility: visible; }
/* Karten: dezenter Hover ohne Zoom/Lichtwisch */
.mat-card:hover { transform: translateY(-3px); }
.mat-card:hover .mat-card__tex { transform: none; }
.mat-card__visual::before { display: none; }
.svc-card:hover { transform: translateY(-2px); }
.hero__title .accent-line { text-shadow: none; }
/* Schichtaufbau: nicht mehr festgepinnt, auf dem Handy mit Legende */
.layers__pin { min-height: 0 !important; padding-block: var(--section) !important; }
.layer__flash { display: none; }
.layers__legend li.is-current { background: rgba(255,255,255,.04); }
@media (max-width: 1023px) {
    .layers__pin { padding: 64px 0 !important; }
    .layers__copy .lead { display: block; font-size: 1rem; order: 3; }
    .layers__stage { order: 4; }
    .layers__legend { display: grid; order: 5; margin-top: 12px; }
    .layers__detail { order: 6; }
    .layers__idx { display: none; }
}
/* Mobile Wischleiste: keine verkleinerten Nachbarkarten */
@media (max-width: 767px) {
    .mat-card, .mat-card:hover { transform: none !important; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__sheen, .hero__window { animation: none; } }
@media (min-width: 1024px) { .layers__dim { left: 0; right: auto; bottom: 0; } }

/* =====================================================================
   v10.8 – Alles eine Nummer kleiner, CTA neu
   ===================================================================== */
body { font-size: clamp(15.5px, .25vw + 14.6px, 17.5px); }
:root { --section: clamp(60px, 7vw, 108px); --container: 1240px; --nav-h: 76px; }
@media (min-width: 1920px) { :root { --container: 1400px; } }

.display { font-size: clamp(2.2rem, 4.6vw, 4.6rem); }
.h-xl { font-size: clamp(1.7rem, 2.8vw, 2.75rem); line-height: 1.1; }
.h-lg { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.h-md { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
.lead { font-size: clamp(1rem, .4vw + .9rem, 1.2rem); }
.statement { font-size: clamp(1.3rem, 2.1vw, 2.1rem); }
.eyebrow { font-size: .92rem; margin-bottom: 14px; }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }

.btn { min-height: 48px; padding: 0 22px; font-size: .94rem; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .88rem; }

.page-hero { padding-top: calc(var(--nav-h) + clamp(40px, 5vw, 72px)); padding-bottom: clamp(36px, 4vw, 56px); }
.page-hero__title { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.page-hero__text { font-size: clamp(.98rem, .3vw + .9rem, 1.1rem); }

.hero__stat strong { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
.hero__stats .hero__stat { padding: 14px 18px; }
@media (min-width: 1024px) { .hero__stats { max-width: 520px; } }
.stat__num { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.stat { padding: clamp(22px, 3vw, 40px) clamp(4px, 1.2vw, 20px); }

.mat-card__title { font-size: clamp(1.15rem, 1.3vw, 1.35rem); }
.mat-card__visual { aspect-ratio: 16 / 9; }
.mat-card__icon { width: 44px; height: 44px; font-size: 1rem; border-radius: 12px; }
.row-item__title { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
.row-item { padding-block: clamp(16px, 1.8vw, 24px); }
.step__num { font-size: clamp(2.2rem, 3vw, 3rem); }
.step h3 { font-size: clamp(1.08rem, 1.2vw, 1.25rem); }
.quote__text { font-size: clamp(1.15rem, 1.7vw, 1.65rem); }
.svc-detail { padding-block: clamp(56px, 6vw, 96px); }
.svc-detail__title { font-size: clamp(1.8rem, 2.8vw, 2.8rem); }
.spec-card__icon { width: 52px; height: 52px; font-size: 1.25rem; }
.member__name { font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
.ref__title, .news__title { font-size: clamp(1.1rem, 1.3vw, 1.35rem); }
.faq-group__title { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
.acc-item summary { font-size: clamp(1rem, 1vw, 1.12rem); padding-block: clamp(14px, 1.6vw, 20px); }
.form-card__title { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.modal__title { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.menu__links a { font-size: clamp(1.4rem, min(4.6vh, 7vw), 2.6rem); }
.legal-content h2 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.layers__stage { max-width: 760px; }
.layers__detail { min-height: 0; }
.brand__mark { width: 34px; height: 29px; }
.brand__name { font-size: 1.02rem; }
.qf-fab { height: 48px; padding: 0 18px; font-size: .92rem; }
.to-top { width: 48px; height: 48px; }
@media (min-width: 900px) { .to-top { bottom: 80px; } }

/* CTA-Block: ruhig, ausgewogen, zwei klare Aktionen */
.cta-xl__inner { padding-block: clamp(56px, 6vw, 88px); gap: 28px; align-items: center !important; }
@media (min-width: 1024px) { .cta-xl__inner { grid-template-columns: 1fr minmax(320px, 420px); gap: 64px; } }
.cta-xl__title { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.08; }
.cta-xl__side { max-width: none; gap: 18px; padding: clamp(22px, 2.4vw, 30px); border-radius: 18px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cta-xl__side p { font-size: 1rem; line-height: 1.6; color: rgba(230,237,246,.82); }
.cta-xl__actions { display: grid; gap: 12px; }
.cta-xl__actions .btn { width: 100%; justify-content: space-between; border-radius: 12px; }
.cta-phone { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 12px; color: #fff; border: 1px solid rgba(255,255,255,.14); transition: background .3s, border-color .3s; }
.cta-phone:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff; }
.cta-phone__icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent); font-size: .95rem; }
.cta-phone small { display: block; font-size: .8rem; color: rgba(230,237,246,.6); font-weight: 500; }
.cta-phone > span:last-child { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }

@media (max-width: 767px) {
    .h-xl { font-size: clamp(1.55rem, 6.6vw, 2rem); }
    .hero__title { font-size: clamp(2rem, 9.4vw, 2.6rem); }
    .page-hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .stat__num { font-size: clamp(2.1rem, 11vw, 2.8rem); }
    .section { padding-block: 52px; }
    .layers__copy .h-xl { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
}