/* =====================================================================
   ROB Abbruch GmbH – gemeinsames Stylesheet
   Aufbau: Tokens → Reset → Typografie → Layout → Komponenten → Seiten
   Breakpoints: 980px (Tablet/Mobile), 520px (kleine Phones).
   Abstände und Schriftgrößen sind fluid (clamp), Desktop-Werte entsprechen
   dem Design-Handoff 1:1.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --navy: #16233f;
  --ink: #0d0b24;
  --ink-2: #100e26;
  --ink-3: #0e0c24;
  --stage: #0f1428;
  --text: #3c4454;
  --text-2: #5a6577;
  --text-3: #8a94a6;
  --blue: #0590FF;
  --blue-soft: #3E8BF4;
  --blue-link: #1F6FE0;          /* WCAG AA auf Weiss (4.8:1); #2f7ef0 erreichte nur 3.9:1 */
  --blue-cta: #0075E4;           /* Flaeche fuer weisse Schrift (4.5:1); --blue selbst nur 3.3:1 */
  --blue-light: #eaf3ff;
  --blueprint: #a3c4f2;
  --orange: #ED7D31;
  --orange-hover: #f28a44;
  --orange-eyebrow: #FF6F00;     /* nur auf dunklem Grund */
  --orange-eyebrow-l: #C25000;   /* dieselbe Farbe abgedunkelt fuer helle Sektionen (4.7:1) */
  --orange-dark: #FF9046;
  --line: #e1e6ee;
  --line-2: #e6eaf0;
  --line-3: #d3dae5;
  --bg-1: #f7f9fc;
  --bg-2: #f2f6fb;
  --bg-3: #eef3f8;
  --green: #1f8a4c;
  --white: #fff;

  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Source Sans 3', 'Inter', Arial, sans-serif;

  --r-card: 20px;
  --r-inner: 12px;
  --r-pill: 100px;
  --r-thumb: 8px;

  --shadow-card: 0 8px 30px rgba(16, 28, 54, .10);
  --shadow-funnel: 0 24px 60px rgba(4, 8, 24, .4);
  --shadow-menu: 0 22px 50px rgba(4, 8, 24, .35);

  /* Layout */
  --container: 1056px;
  --container-wide: 1180px;
  --gutter: clamp(16px, 4vw, 24px);                 /* Seitenrand: 16 → 24px */
  --gutter-safe: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  --sec: clamp(56px, 8vw, 96px);                    /* Sektionsabstand groß */
  --sec-sm: clamp(40px, 6vw, 60px);                 /* Sektionsabstand klein */
  --card-pad: clamp(24px, 4.5vw, 60px);             /* Innenabstand dunkler Karten (vertikal) */
  --card-x: clamp(18px, 4.5vw, 60px);               /* Innenabstand Karten horizontal – mobil klein, damit Text breit läuft */

  /* Typografie */
  --fs-h1: clamp(30px, 1rem + 3.2vw, 46px);
  --fs-h2: clamp(26px, 1.4rem + 1.6vw, 40px);
  --fs-h3-card: clamp(24px, 1.2rem + 1vw, 30px);
  --fs-h3: 19px;
  --fs-body: 15px;
  --fs-hero-p: clamp(16px, 1rem + .3vw, 19px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--white); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); background: var(--white); color: var(--navy); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; min-width: 320px; }
a { color: var(--blue-link); text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: manual; }
.step p, .check-item, .faq-a, .acc-body p { hyphens: auto; }
p { overflow-wrap: break-word; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter-safe); padding-right: var(--gutter-safe); }
.container--wide { max-width: var(--container-wide); }
.sec { padding: var(--sec-sm) 0; }
.sec--lg { padding: var(--sec) 0; }
.sec--white { background: var(--white); }
.sec--md { padding: clamp(40px, 6vw, 64px) 0; }                                 /* Zertifikate-Karte */
.sec--fs { padding: clamp(56px, 7vw, 84px) 0 clamp(56px, 7vw, 90px); }           /* Full Service */
.sec--svc { padding: 20px 0 clamp(56px, 8vw, 90px); }                             /* Leistungen-Karte auf Unterseiten */
.sec-head { text-align: center; }
.sec-h2 { color: var(--navy); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 10px 0 0; }
.eyebrow { color: var(--orange-eyebrow-l); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.eyebrow--warm { color: var(--orange-dark); }
/* Auf dunklem Grund bleibt das kraeftige Orange – dort ist der Kontrast ohnehin hoch. */
.hero .eyebrow, .step--dark .eyebrow, .komp-dark .eyebrow, .cert-card .eyebrow { color: var(--orange-eyebrow); }

/* ---------- Buttons / Pills ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-pill); padding: 15px 26px; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; min-height: 48px; transition: background-color .15s, color .15s, transform .15s; }
.pill:hover { transform: translateY(-1px); }
.pill-blue { background: var(--blue-cta); color: var(--white); }
.pill-soft { background: var(--blue-soft); color: var(--white); }
.pill-white { background: var(--white); color: var(--navy); }
.pill-orange { background: var(--orange); color: var(--white); }
.pill-orange:hover { background: var(--orange-hover); }
.pill-outline { border: 1px solid rgba(255, 255, 255, .5); color: var(--white); }
.pill-cta { font-size: 13px; letter-spacing: .4px; padding: 14px 24px; text-transform: uppercase; }
.btn-row { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- Header ---------- */
.hdr { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px max(44px, env(safe-area-inset-right)) 0 max(44px, env(safe-area-inset-left)); }
.hdr-brand { display: block; flex: 0 0 auto; padding: 8px 0; margin: -8px 0; }
.hdr-logo { width: 148px; height: auto; }
.hdr-nav { display: flex; align-items: center; gap: 30px; }
.hdr-nav > a, .mega-trigger { color: var(--white); font-size: 15px; font-weight: 500; padding: 10px 0; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.hdr-nav > a.is-active::after, .mega-trigger.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--orange-dark); border-radius: 2px; }
.hdr-phone { display: inline-flex; align-items: center; gap: 10px; background: #0b0b26; border-radius: var(--r-pill); padding: 15px 26px; color: var(--white); font-size: 15px; font-weight: 700; white-space: nowrap; min-height: 48px; }

/* Mega-Menü */
.mega { position: relative; }
.mega-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 640px; padding-top: 16px; z-index: 50; display: grid; grid-template-columns: 1fr 280px; filter: drop-shadow(var(--shadow-menu)); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .18s, transform .18s, visibility .18s; }
.mega:hover .mega-panel, .mega:focus-within .mega-panel, .mega.is-open .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-panel::before { content: ""; position: absolute; top: 2px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom-color: var(--white); }
.mega-col { background: var(--white); padding: 24px 26px 22px 26px; display: flex; flex-direction: column; gap: 4px; border-radius: 16px 0 0 16px; }
.mega-h { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.mega-h--light { color: var(--blueprint); }
.mega-item { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--navy); font-size: 14px; font-weight: 500; }
.mega-item:hover, .mega-item.is-active { background: var(--bg-2); }
.mega-item img { width: 44px; height: 44px; border-radius: var(--r-thumb); object-fit: cover; flex: 0 0 44px; }
.mega-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-item b { font-weight: 600; font-size: 14px; color: var(--navy); line-height: 1.25; }
.mega-item small { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.mega-cta { background: var(--navy); border-radius: 0 16px 16px 0; padding: 26px 26px 24px; border-left: 1px solid var(--line-2); }
.mega-cta-title { font-size: 19px; font-weight: 600; color: var(--white); line-height: 1.25; margin-top: 6px; }
.mega-cta-text { font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.45; margin-top: 8px; }
.mega-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: var(--white); border-radius: var(--r-pill); padding: 12px 18px; font-size: 13.5px; font-weight: 700; margin-top: 18px; }
.mega-cta-btn:hover { background: var(--orange-hover); }
.mega-cta-link { display: block; color: var(--blueprint); font-size: 13px; font-weight: 600; margin-top: 16px; }

/* Mobile Navigation */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; color: var(--white); }
.mnav summary::-webkit-details-marker, .mnav summary::marker { display: none; content: ""; }
.mnav[open] summary { background: var(--white); color: var(--navy); }
.mnav-ic-close, .mnav[open] .mnav-ic-open { display: none; }
.mnav[open] .mnav-ic-close { display: block; }
.mnav-panel { position: absolute; right: 0; top: 56px; width: min(calc(100vw - 2 * var(--gutter-safe)), 360px); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-menu); padding: 10px; z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.mnav-panel a { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 48px; border-radius: 10px; color: var(--navy); font-size: 15px; font-weight: 600; }
.mnav-panel a:hover, .mnav-panel a.is-active { background: var(--bg-2); }
.mnav-panel img { width: 40px; height: 40px; border-radius: var(--r-thumb); object-fit: cover; flex: 0 0 40px; }
.mnav-h { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); padding: 10px 12px 4px; }
.mnav-sep { height: 1px; background: #e9edf3; margin: 6px 4px; }
.mnav-cta { background: var(--orange); color: var(--white) !important; justify-content: center; margin-top: 6px; }
.mnav-cta:hover { background: var(--orange-hover) !important; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy); isolation: isolate; } /* kein overflow:hidden – sonst wird das Mobile-Menü abgeschnitten */
.hero-bg, .hero-shade { clip-path: inset(0); }
.hero--solid { background: #161519; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-bg--gray { filter: grayscale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 22, .55), rgba(8, 10, 22, .3)); z-index: -1; }
.hero-shade--dark { background: linear-gradient(180deg, rgba(5, 6, 12, .72), rgba(5, 6, 12, .55)); }  /* Zertifizierungen/Impressum/Datenschutz */
.hero .eyebrow { font-size: 13px; font-weight: 700; margin: 0; }  /* schlägt .hero p, falls Eyebrow als <p> gesetzt wird */
.hero-inner { position: relative; padding-top: clamp(36px, 7vw, 96px); padding-bottom: clamp(44px, 7vw, 90px); }
.hero-inner--grid { display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: 52px; align-items: start; max-width: var(--container-wide); }
.hero-text { min-width: 0; }
.hero h1 { color: var(--white); font-size: var(--fs-h1); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 14px 0 0; max-width: 640px; hyphens: auto; }  /* lange Fachwörter (Schadstoffsanierung) sauber trennen statt hart umbrechen */
.hero-text p, .hero-inner > p { color: var(--white); font-size: var(--fs-hero-p); font-weight: 300; line-height: 1.45; margin: 22px 0 0; max-width: 640px; }
.hero .pill-white { color: var(--navy); }

/* ---------- Logoleiste: immer EINE Reihe, Logos skalieren mit der Spaltenbreite ---------- */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; justify-items: center; gap: clamp(10px, 3vw, 44px); padding: clamp(28px, 4vw, 44px) 0; }
.logos img { width: 100%; height: auto; filter: grayscale(1); opacity: .8; }
/* Desktop-Höhen des Handoffs (52/62/46/32/58/34px) als maximale Breiten */
.logo--berlin { max-width: 92px; } .logo--bim { max-width: 110px; } .logo--famila { max-width: 114px; } .logo--siemens { max-width: 103px; } .logo--alogo { max-width: 58px; } .logo--hornbach { max-width: 131px; }
/* Mobil: Spalten nach Seitenverhältnis gewichtet → alle Logos gleich hoch, Reihe füllt die Breite */
@media (max-width: 640px) {
  .logos { grid-template-columns: 1.78fr 1.78fr 2.47fr 3.2fr 1fr 3.86fr; gap: clamp(8px, 2.5vw, 14px); }
  .logos img { max-width: none; }
}

/* ---------- Slider (zwei gegenläufige Reihen) ---------- */
.slider-sec { position: relative; background: var(--white); padding: var(--sec-sm) 0; overflow: hidden; }
.slider-sec::before, .slider-sec::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 8vw, 120px); z-index: 2; pointer-events: none; }
.slider-sec::before { left: 0; background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0)); }
.slider-sec::after { right: 0; background: linear-gradient(270deg, var(--white), rgba(255, 255, 255, 0)); }
.slider { display: flex; align-items: center; gap: 18px; padding-right: 18px; width: max-content; animation: rob-marquee 40s linear infinite; will-change: transform; }  /* padding-right = gap → nahtloser -50%-Loop */
.slider-b { animation-name: rob-marquee-rev; margin-top: 18px; }
.slider img { width: 300px; height: 200px; flex: 0 0 300px; object-fit: cover; border-radius: var(--r-inner); }
.slider-sec:hover .slider { animation-play-state: paused; }
@keyframes rob-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rob-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Leistungen-Karte ---------- */
.svc-card { position: relative; border-radius: var(--r-card); overflow: hidden; isolation: isolate; }
.svc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.svc-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 32, 66, .96) 0%, rgba(16, 42, 88, .88) 40%, rgba(30, 72, 140, .55) 75%, rgba(40, 90, 160, .45) 100%); z-index: -1; }
.svc-inner { position: relative; padding: clamp(28px, 4vw, 44px) min(var(--card-x), 48px); }
.svc-inner h2 { color: var(--white); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 10px 0 0; max-width: 560px; }
.check-list { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; max-width: 540px; }  /* ul ohne Einzug – Icons bündig zur Überschrift */
.check-item { display: flex; align-items: flex-start; gap: 14px; color: var(--white); font-size: 15px; line-height: 1.4; }
.check-dot { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #3B82F6; display: flex; align-items: center; justify-content: center; margin-top: -1px; }

/* ---------- Vorteile (helle Sektion ohne Flächenfarbe) + Akkordeon ---------- */
.dark-sec { position: relative; background: var(--white); padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 6vw, 96px); }
.dark-sec .container { position: relative; }
.dark-sec h2 { color: var(--navy); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 12px 0 0; }
.vorteil-grid { display: flex; gap: 46px; margin-top: 46px; align-items: flex-start; }
.vorteil-grid > img { width: 46%; aspect-ratio: 16 / 10; border-radius: var(--r-inner); object-fit: cover; flex: 0 0 auto; }
.acc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; text-align: left; color: var(--navy); }
.acc-h { margin: 0; }
.acc-btn > span { color: var(--navy); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.acc-btn .ic { flex: 0 0 20px; color: var(--text-2); transition: transform .2s; }
.acc-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.acc-body > div { overflow: hidden; }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body p { color: var(--text); font-size: 15px; line-height: 1.5; margin: 0; padding: 0 0 24px; }

/* ---------- Zertifikate-Karte ---------- */
.cert-card { background: var(--ink); border-radius: var(--r-card); padding: clamp(32px, 4vw, 46px) min(var(--card-x), 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
.cert-card h3 { color: var(--white); font-size: var(--fs-h3-card); font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.cert-left { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; min-width: 0; }
.cert-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-pill); padding: 13px 24px; color: var(--white); font-size: 14px; font-weight: 700; min-height: 48px; }
.cert-btn:hover { background: rgba(255, 255, 255, .08); }
.cert-imgs { display: grid; grid-template-columns: repeat(2, 170px); gap: 14px; align-items: center; }  /* zwei Nachweise vorhanden; dritter folgt, sobald der Kunde ihn liefert */
.cert-imgs img { width: 100%; aspect-ratio: 1 / 1.49; object-fit: contain; background: var(--white); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }

/* ---------- Full-Service / Split-Karten ---------- */
.fs-head { max-width: 720px; margin: 0 auto; text-align: center; }
.fs-head .kicker { color: #F0722C; font-size: 14px; font-weight: 500; }
.fs-head h2 { color: var(--navy); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 8px 0 0; }
.fs-head p { color: var(--text); font-size: 15px; line-height: 1.55; margin: 16px 0 0; }
.split-card { border-radius: 16px; overflow: hidden; display: flex; min-height: 412px; margin-top: clamp(32px, 5vw, 64px); }
.split-pane { flex: 0 0 45%; min-width: 0; padding: clamp(32px, 4.5vw, 52px) min(var(--card-x), 44px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.split-pane h3 { font-size: var(--fs-h3-card); font-weight: 600; margin: 0; line-height: 1.25; letter-spacing: -.01em; }
.split-pane p { font-size: 15px; line-height: 1.5; margin: 0; max-width: 390px; }
.split-pane .pill { align-self: flex-start; margin-top: 10px; }
.split-pane--ink, .split-pane--dach, .split-pane--ember { background: linear-gradient(135deg, #3a1608 0%, #1b1026 45%, #0f1126 100%); color: var(--white); }
.split-pane--ink h3, .split-pane--dach h3, .split-pane--ember h3 { color: var(--white); }
.split-pane--ink p, .split-pane--dach p, .split-pane--ember p { color: rgba(255, 255, 255, .88); }
.split-pane--warm, .split-pane--selektiv, .split-pane--peach { background: linear-gradient(135deg, #fff 0%, #fbe3d0 55%, #f8cfae 100%); color: var(--navy); }
.split-pane--warm h3, .split-pane--selektiv h3, .split-pane--peach h3 { color: var(--navy); }
.split-pane--warm p, .split-pane--selektiv p, .split-pane--peach p { color: var(--text); }
.split-pane--violet, .split-pane--gefahr { background: linear-gradient(120deg, #c26f9e 0%, #7583d8 40%, #4f7fd8 100%); color: var(--white); }
.split-pane--violet h3, .split-pane--gefahr h3 { color: var(--white); }
.split-pane--violet p, .split-pane--gefahr p { color: rgba(255, 255, 255, .92); }
.split-img { flex: 1 1 auto; position: relative; min-height: 280px; }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Schritte ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; text-align: left; }
.step { border-radius: var(--r-inner); padding: 28px 26px; display: flex; gap: 22px; min-width: 0; }
.step > div:last-child { min-width: 0; }
.step-num { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.step-num .n { font-size: 44px; font-weight: 300; line-height: 1; }
.step-num .l { font-size: 12px; font-weight: 500; letter-spacing: .5px; margin-top: 6px; }
.step h3 { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 8px; }
.step p { font-size: 14px; line-height: 1.45; margin: 0; }
.step--dark { background: #12102a; color: var(--white); }
.step--dark p { color: rgba(255, 255, 255, .85); }
.step--light { background: #bcd4f8; color: var(--navy); }
.step--light p { color: #2c3444; }
.step--blue { background: #3e8bf4; color: var(--white); }
.step--blue p { color: rgba(255, 255, 255, .92); }

/* ---------- Kompetenz (helle Variante: Bild links, Text rechts) ---------- */
/* Bild füllt die Höhe der Textspalte. Wichtig: beim <img> KEIN height:100% – das ergäbe mit
   align-items:stretch eine Rückkopplung (Bildhöhe ↔ Zeilenhöhe) und die Sektion wächst endlos.
   Ein ersetztes Element streckt sich bei height:auto bereits durch align-self:stretch. */
.komp { display: flex; gap: 42px; align-items: stretch; }
.komp > img, .komp > picture { width: 43%; flex: 0 0 auto; align-self: stretch; }
.komp > picture { display: block; position: relative; }
.komp > img { height: auto; border-radius: var(--r-inner); object-fit: cover; }
.komp > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r-inner); object-fit: cover; }
.komp .komp-body h2 { color: var(--navy); }
.komp .komp-body p { color: var(--text); line-height: 1.55; }
.komp .komp-body .btn-row { margin-top: 12px; }
.komp .stat { border: 1px solid var(--line-2); }  /* weiße Kachel auf weißem Grund */
.pill-white--shadow { box-shadow: 0 2px 10px rgba(20, 40, 80, .08); }

/* ---------- Kompetenz (dunkle Karte) ---------- */
.komp-sec { background: var(--white); padding: clamp(40px, 6vw, 64px) 0; }
.komp-dark { padding: var(--card-pad) var(--card-x); background: var(--ink); border-radius: var(--r-card); display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.komp-figure { position: relative; padding: 0 18px 18px 0; }
.komp-figure::after { content: ""; position: absolute; right: 0; bottom: 0; width: 78%; height: 78%; border: 2px solid var(--orange); border-radius: 14px; }
.komp-figure img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; z-index: 1; }
.komp-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.komp-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; color: var(--orange-dark); text-transform: uppercase; }
.komp-body h2 { font-size: var(--fs-h2); font-weight: 600; color: var(--white); line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.komp-body p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 0; }
.komp-body p a { color: var(--orange-dark); }
.komp-body .btn-row { margin-top: 6px; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.stat { background: var(--white); border-radius: var(--r-inner); padding: 20px 14px; min-width: 0; }
.stat .v { color: #F0722C; font-size: clamp(24px, 1.1rem + .7vw, 30px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.stat .t { color: var(--text); font-size: 14px; line-height: 1.4; margin-top: 8px; hyphens: manual; overflow-wrap: break-word; text-wrap: pretty; }  /* nur gesetzte Trennstellen (&shy;), keine automatische Trennung */  /* echte Silbentrennung (lang="de") statt Bruch mitten im Wort */

/* ---------- Formular-Sektion (Kontaktformular) ---------- */
.form-sec { background: var(--white); padding: var(--sec) 0; }
.form-card { max-width: 724px; margin: 0 auto; background: var(--white); border: 1px solid #e3e8f0; border-radius: 24px; padding: clamp(32px, 5vw, 56px) var(--card-x); box-shadow: 0 10px 40px rgba(30, 50, 90, .06); }
.form-card h2 { color: var(--navy); font-size: var(--fs-h2); font-weight: 600; text-align: center; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.form-card .sub { color: #2c3444; font-size: 16px; text-align: center; margin-top: 16px; }
.f-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.f-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.f-in { width: 100%; min-width: 0; border: 1px solid #cfd6e4; border-radius: 10px; padding: 13px 16px; color: var(--navy); font-size: 15px; background: var(--white); }
.f-in::placeholder { color: var(--text-3); text-overflow: ellipsis; }
.f-in { text-overflow: ellipsis; }
.f-in:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(5, 144, 255, .15); }
.f-area { min-height: 96px; resize: vertical; }
.f-note { color: #2c3444; font-size: 14px; margin-top: 16px; }
.f-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: #2c3444; font-size: 14px; }
.f-check input { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: -13px 0 -13px -13px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.f-check input::before { content: ""; width: 18px; height: 18px; border: 1.5px solid #7a8496; border-radius: 4px; background: var(--white) center / 12px no-repeat; transition: background-color .15s, border-color .15s; }
.f-check input:checked::before { background-color: var(--blue); border-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.f-check input:focus-visible { outline: none; }
.f-check input:focus-visible::before { outline: 3px solid var(--blue); outline-offset: 3px; }
.f-check input.is-invalid::before { border-color: #d92d20; }
.f-check label { cursor: pointer; }
.f-check a { display: inline-block; padding: 12px 0; margin: -12px 0; text-decoration: underline; text-underline-offset: 2px; }
.f-submit { width: 100%; background: #4a90f2; border-radius: var(--r-pill); padding: 16px 0; text-align: center; margin-top: 22px; color: var(--white); font-size: 15px; font-weight: 700; min-height: 48px; }
.f-submit:hover { background: var(--blue); }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--white); padding: var(--sec) 0 clamp(56px, 9vw, 110px); }
.faq-wrap { max-width: 725px; margin: 0 auto; padding: 0 var(--gutter-safe); }
.faq-wrap h2 { color: var(--navy); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-align: center; margin: 0; }
.faq-intro { color: var(--text); font-size: 16px; line-height: 1.5; text-align: center; margin: 18px auto 0; max-width: 620px; }
.faq-intro--wide { max-width: none; text-align: left; }
.faq-intro--wide p { margin: 0; }
.faq-intro--wide p + p { margin-top: 1.5em; }
.faq-list { margin-top: 40px; display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid #a9cdf0; }
.faq-item:last-child { border-bottom: 1px solid #a9cdf0; }
.faq-item summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-item summary::-webkit-details-marker, .faq-item summary::marker { display: none; content: ""; }
.faq-item summary h3 { color: var(--navy); font-size: var(--fs-h3); font-weight: 700; margin: 0; }
.faq-ic { flex: 0 0 18px; color: var(--navy); }
.faq-item[open] .faq-v { display: none; }
.faq-a { display: flex; flex-direction: column; gap: 14px; padding-bottom: 26px; color: var(--text); font-size: 15px; line-height: 1.55; }
.faq-a b { color: var(--navy); }
.faq-a p, .faq-a ul { margin: 0; }
.faq-ul { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }

/* ---------- CTA-Banner ---------- */
.cta-banner { position: relative; border-radius: var(--r-card); overflow: hidden; padding: clamp(44px, 6vw, 74px) min(var(--card-x), 56px); margin-top: clamp(48px, 7vw, 80px); isolation: isolate; }
.cta-banner .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-banner .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 11, 36, .8) 0%, rgba(13, 11, 36, .5) 45%, rgba(13, 11, 36, .05) 78%); z-index: -1; }  /* nur Lesbarkeit hinter dem Text, kein Farbschleier über dem Foto */
.cta-banner .inner { position: relative; }
.cta-banner h2 { color: var(--white); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.cta-banner p { color: #f4f6fa; font-size: 16px; line-height: 1.5; margin: 16px 0 0; }

/* ---------- Referenzen ---------- */
.ref-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; margin-top: 44px; }
.ref-item { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ref-img { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--bg-3); }
.ref-img img { width: 100%; height: 100%; object-fit: cover; }
.ref-img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px; font-weight: 600; letter-spacing: .4px; }
.ref-item h3 { font-size: clamp(20px, 1rem + 1vw, 24px); font-weight: 600; color: var(--navy); line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.ref-tag { display: inline-block; margin-top: 12px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 600; border-radius: var(--r-pill); padding: 8px 16px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-3); padding: clamp(48px, 6vw, 64px) 0 0; }
.foot-logo { width: 180px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-top: 54px; }
.foot-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; align-items: flex-start; }
.foot-col h3 { color: var(--white); font-size: var(--fs-h3); font-weight: 700; margin: 0 0 4px; }
.foot-col div, .foot-col a, .foot-col address { color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.foot-col a { padding: 11px 0; margin: -11px 0; display: inline-block; }  /* Klickfläche ≥ 44px bei gleichem optischen Abstand */
.foot-col a:hover { color: var(--white); text-decoration: underline; }
.foot-badge { width: 152px; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 48px; padding: 24px 0 max(28px, env(safe-area-inset-bottom)); color: rgba(255, 255, 255, .7); font-size: 14px; }
.foot-legal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-legal a { color: rgba(255, 255, 255, .7); padding: 12px 0; display: inline-block; }
.foot-legal a:hover { color: var(--white); }

/* ---------- Rechtliches (Impressum / Datenschutz) ---------- */
.legal { padding: clamp(44px, 6vw, 70px) var(--gutter-safe) clamp(56px, 8vw, 90px); color: #24303f; font-size: 16px; line-height: 1.6; max-width: calc(var(--container)); }
.legal h2 { color: var(--navy); font-size: clamp(24px, 1.2rem + 1vw, 28px); font-weight: 700; margin: 40px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { color: var(--navy); font-size: 19px; font-weight: 700; margin: 26px 0 6px; }
.legal h4 { color: var(--navy); font-size: 17px; font-weight: 700; margin: 20px 0 4px; }
.legal p { margin: 10px 0; }
.legal ul { margin: 10px 0; padding-left: 24px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--blue-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal a:hover { color: var(--blue); }

/* ---------- Fehlerseiten ---------- */
.hero--plain .hero-inner { min-height: 60vh; display: flex; align-items: center; }
.error-detail { background: rgba(0, 0, 0, .35); color: #ffd9c2; padding: 12px 16px; border-radius: 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 20px; }
.hero code { background: rgba(255, 255, 255, .15); padding: 2px 8px; border-radius: 6px; overflow-wrap: anywhere; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .hero-inner--grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; }
  .hdr { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .hdr-nav { gap: 22px; }
}

@media (max-width: 980px) {
  .hdr { padding: 16px var(--gutter-safe) 0; gap: 12px; }
  .hdr-nav { display: none; }
  .mnav { display: block; }
  .hdr-phone span { display: none; }
  .hdr-phone { padding: 14px; width: 48px; height: 48px; justify-content: center; }
  .hdr-phone .ic { width: 18px; height: 18px; }
  .hero-inner--grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-inner--grid > * { max-width: 520px; }
  .hero-inner--grid > .funnel-slot { width: 100%; justify-self: stretch; }
  .btn-row { gap: 12px; }
  .slider img { width: 225px; height: 150px; flex-basis: 225px; }
  .vorteil-grid, .komp { flex-direction: column; }
  .vorteil-grid { gap: 32px; margin-top: 36px; }
  .komp { gap: 32px; }
  .vorteil-grid > img, .komp > img, .komp > picture { width: 100%; }
  .komp > picture { aspect-ratio: 16 / 10; }
  .komp > img { aspect-ratio: 16 / 10; height: auto; }
  .cert-card { grid-template-columns: 1fr; gap: 24px; }
  .cert-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .split-card { flex-direction: column; min-height: 0; }
  .split-card.rev { flex-direction: column-reverse; }
  .split-pane { flex: 1 1 auto; }
  .split-img { min-height: 240px; aspect-ratio: 16 / 9; }
  .steps { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .komp-dark { grid-template-columns: 1fr; }
  .komp-figure { max-width: 400px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f-2 { grid-template-columns: 1fr; }
  .ref-list { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .foot-bottom { margin-top: 36px; }
  .faq-list { margin-top: 30px; }
  .faq-item summary { padding: 20px 0; }
  .faq-item summary h3 { font-size: 17px; }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .komp-dark .stats { grid-template-columns: 1fr; }
  .komp-body .btn-row .pill { width: 100%; }
}

@media (max-width: 520px) {
  .hdr-logo { width: 116px; }
  .hdr-phone { width: 46px; height: 46px; padding: 12px; }
  .pill { padding: 13px 20px; font-size: 14px; }
  .btn-row .pill { width: 100%; }
  .step { padding: 22px var(--card-x); gap: 14px; }
  .step-num .n { font-size: 36px; }
  .check-item { font-size: 14px; }
  .split-pane .pill { align-self: stretch; width: 100%; }
  .stat .v { font-size: 26px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
  :root { --card-x: 16px; }
  .hero h1 { font-size: 28px; }
  .hdr-logo { width: 104px; }
  .stats { grid-template-columns: 1fr; }
  .pill { font-size: 13px; padding: 12px 16px; }
}

/* Sehr große Bildschirme: nichts wird breiter als der Container, aber Heros bleiben füllend */
@media (min-width: 1600px) {
  .hero-inner { padding-top: 110px; padding-bottom: 100px; }
}

/* ---------- Scroll-Reveal ---------- */
[data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); }
[data-rv="img"] { transform: scale(1.03); transition-duration: .9s; }
[data-rv="in"] { opacity: 1; transform: none; }
.no-js [data-rv] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rv] { transition: none; opacity: 1; transform: none; }
  .slider { animation: none; width: auto; overflow-x: auto; }
  .pill, .acc-btn .ic, .mega-panel { transition: none; }
}

/* ---------- Druck ---------- */
@media print {
  .hdr-nav, .mnav, .hdr-phone, .slider-sec, .footer .foot-badge { display: none !important; }
  .hero-bg, .hero-shade { display: none; }
  .hero { background: none; }
  .hero h1, .hero-text p { color: #000; }
}

/* ---------- Formular: Fehler-/Statusmeldungen (kontakt.js, funnel.js) ---------- */
.f-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f-err { color: #b42318; font-size: 13px; line-height: 1.4; }
.f-in.is-invalid { border-color: #d92d20; }
.f-msg { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.f-msg--ok { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.f-msg--error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.f-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none; }

/* ---------- Projektvideo in den Referenzen ---------- */
.ref-video { position: relative; margin: 0; background: var(--ink); }
.ref-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }
.ref-video-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: rgba(13, 11, 36, .62); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; backdrop-filter: blur(4px); transition: background-color .15s, opacity .2s, transform .15s; }
.ref-video-btn:hover { background: rgba(13, 11, 36, .82); transform: scale(1.06); }
.ref-video-play { left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.ref-video-play .ic { margin-left: 2px; }          /* Dreieck optisch mittig */
.ref-video.is-playing .ref-video-play { opacity: 0; pointer-events: none; }
.ref-video:hover .ref-video-play, .ref-video-play:focus-visible { opacity: 1; pointer-events: auto; }
.ref-video-hint { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(13, 11, 36, .62); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; backdrop-filter: blur(4px); pointer-events: none; }
@media (max-width: 520px) {
  .ref-video-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .ref-video-hint { display: none; }
}
.sec-lead { color: var(--text); font-size: 16px; line-height: 1.55; max-width: 620px; margin: 16px auto 0; }

/* ---------- Hero mit Hintergrundvideo ---------- */
/* Kein deckender Hintergrund: bis das Video Daten hat, soll das Posterbild darunter sichtbar bleiben. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
              opacity: 0; transition: opacity .4s ease; }
.hero-video.is-ready { opacity: 1; }
.hero--video .hero-shade { background: linear-gradient(180deg, rgba(8, 10, 22, .62), rgba(8, 10, 22, .48)); }  /* etwas kräftiger, da das Video hell wird */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }  /* Posterbild aus .hero-bg bleibt stehen */

/* Videovorschau als eigenes lazy <img>: ein poster-Attribut wird vom Browser immer sofort geladen,
   auch weit unterhalb der Falte. Das Video liegt darüber und wird erst sichtbar, wenn es Daten hat. */
.ref-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ref-video video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.ref-video video.is-ready { opacity: 1; }