/* ============================================================
   theme.css — konsolidiert aus source/css/
   Quellstand: source 0.9.59 + Härtungs-Sync h1 (2026-07-21:
   Reduced-Motion-Lücken, Failsafe-Klasse, Dead-Code-Bereinigung)
   Reihenfolge: style.css + glow.css + pages.css + warum.css
   Hand-konsolidiert (kein automatischer Build-Stamp).
   ============================================================ */
/* ---------- style.css ---------- */
/* =========================================================
   Formeta Dental – Custom Styles (v0.3.5)
   Erweiterungen zu Tailwind Play CDN.
   Brand Tokens:
     #001E43 Brand Blue (Primary, Service)
     #BF214C Brand Red (Equipment, CTA)
     #858A8E Metal/Grey (Material, Sekundärtext)
     #FEFEFE White (Software)
   Font: Outfit (300/400/500/700/800)
   ========================================================= */

:root {
  --brand-blue:        #001E43;
  --brand-blue-dark:   #0A1E3D;
  --brand-blue-light:  #032656;
  --brand-red:         #BF214C;
  --brand-red-bright:  #D8294F;
  --brand-red-on-dark: #BF214C;   /* v0.4.1: Hell-/Korallrot (#FF5E7A) verbannt — jetzt Brand-Rot auf Dunkelblau */
  --brand-metal:       #858A8E;
  --brand-light:       #FEFEFE;
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-bg:          rgba(255, 255, 255, 0.04);
  --glass-bg-strong:   rgba(255, 255, 255, 0.07);
}

/* ----- Basis ----- */
/* KEIN scroll-behavior:smooth auf html — bricht die ScrollTrigger-Pin-Messung
   (Scroll-Restore beim refresh() wird animiert statt gesprungen → Pin-Positionen
   um die In-Flight-Distanz verschoben, Sektionen „zerschossen"). Anker-Smooth-Scroll
   übernimmt js/main.js (mit Header-Offset). */
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  background-color: var(--brand-blue);
  color: var(--brand-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Selection: rote Markierung passend zum Brand */
::selection {
  background: var(--brand-red);
  color: #fff;
}

/* Custom dark scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--brand-blue-dark); }
::-webkit-scrollbar-thumb {
  background: rgba(191, 33, 76, 0.45);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-red); }

/* ----- Glassmorphism Cards ----- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 28px -26px rgba(0,0,0,0.4);
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 36px -30px rgba(0,0,0,0.45);
}

/* Hover-Lift für Bento Cards */
.bento-card {
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s, border-color 0.5s, background 0.5s;
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
}

/* Icon-Glow (v0.3.4): weisses Icon + weiter, weicher roter Blur-Schein statt Box.
   Halo via ::before (radial, geblurrt); Icon liegt per z-index darueber. */
.icon-glow {
  position: relative;
  isolation: isolate;
}
.icon-glow > svg {
  position: relative;
  z-index: 1;
}
.icon-glow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320%;
  height: 320%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(191, 33, 76, 0.55), rgba(191, 33, 76, 0.22) 38%, transparent 70%);
  filter: blur(10px);
}

/* Flat Icons (v0.3.7): flacher, brand-getoenter Chip mit Hairline statt Glas/Glow.
   Kein Gloss, kein Schlagschatten, keine Schwebe-Animation. Hierarchie ueber
   Farbe + duennen Strich. Hover (von der Card getriggert): Brand-Akzent zieht an. */
.icon-flat {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background: rgba(191,33,76,0.10);
  border: 1px solid rgba(191,33,76,0.22);
  color: var(--brand-red-on-dark);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.icon-flat .flat-glyph { width: 23px; height: 23px; }
.bento-card:hover .icon-flat {
  background: rgba(191,33,76,0.16);
  border-color: rgba(191,33,76,0.45);
  color: #fff;
}

/* ----- Hero Background: Subtle Mesh / Spotlight ----- */
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-mesh::before {
  content: ''; position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(191,33,76,0.32), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(3,38,86,0.7), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(191,33,76,0.12), transparent 70%);
  filter: blur(20px);
}
.hero-grid {
  position: absolute; inset: 0; opacity: 0.18; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
}

/* Floating 3D-Mark Animation */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
.float-slow { animation: floaty 8s ease-in-out infinite; }
.float-medium { animation: floaty 6s ease-in-out infinite; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 1.5rem; border-radius: 9999px;
  font-weight: 600; font-size: 0.95rem; line-height: 1.15;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: normal; max-width: 100%; text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 6px 18px -12px rgba(191,33,76,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  background: var(--brand-red-bright);
  box-shadow: 0 10px 26px -14px rgba(191,33,76,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.4);
}

.btn-light {
  background: #fff;
  color: var(--brand-blue);
}
.btn-light:hover {
  background: #f1f3f7;
  transform: translateY(-2px);
}

/* Blauer Voll-Button (FTC-Pendant zum roten btn-primary) — aktuell nur Lösungen-Hero */
.btn-fdblue {
  background: #0f3c87;
  color: #fff;
  box-shadow: 0 6px 18px -12px rgba(15,60,135,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-fdblue:hover {
  background: #164a9e;
  box-shadow: 0 10px 26px -14px rgba(15,60,135,0.65), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-2px);
}

/* ----- Mobil: alle Buttons full-width (CTA-Reihen nutzen flex-wrap → stapeln) ----- */
@media (max-width: 640px) {
  .btn { width: 100%; max-width: 100%; }
}

/* ----- Headlines ----- */
.h-display {
  font-family: 'Outfit', sans-serif;
  font-weight: 300; /* Outfit Light – wie im Brand Manual */
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.h-section {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.h-emphasis {
  font-weight: 700;
}

/* Hero- & CTA-Headline: Zeilenhoehe verengt (v0.3.5). Element+Attribut-Selektor
   schlaegt Tailwinds gebundelte text-6xl-line-height (:1), die sonst leading-[..]
   ueberstimmt, weil das Play-CDN-<style> nach style.css injiziert wird. */
h1[data-hero-headline],
#termin h2.h-section {
  line-height: 0.95;
}

/* Balance-Wrap fuer alle Headings (verhindert Waisen & unsch\u00f6ne Umbr\u00fcche).
   Browser-Support: Chrome 114+, Safari 17.5+, Firefox 121+ \u2014 progressive enhancement. */
h1, h2, h3,
.h-display, .h-section {
  text-wrap: balance;
}

/* ----- Headline-Highlight: animierte Unterstreichung (v0.3.2) -----
   Weisse Schrift + dicke rote Marker-Unterstreichung in Brand-Rot.
   Beim Scrollen in den View zeichnet sich die Linie von links nach rechts
   durch (Klasse .is-marked, gesetzt per JS/IntersectionObserver bzw. in der
   Hero-Timeline). Die Linie ist em-relativ (skaliert mit der Schriftgroesse).
   `box-decoration-break: clone` → sauber auch ueber Zeilenumbruch.
   Schrift ist weiss auf Dunkelblau (~16:1), die rote Linie ist dekorativer
   Akzent (kein Textkontrast noetig). */
.headline-accent {
  color: #fff;
  font-style: normal;
  padding: 0 0.04em 0.1em;
  /* Verlauf laengs der Linie: links transparent → rechts Brand-Rot.
     Transparentes Rot (Alpha 0) statt `transparent`, sonst Grau-Stich im Fade. */
  background-image: linear-gradient(90deg, rgba(191, 33, 76, 0), var(--brand-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.6s cubic-bezier(.2, .8, .2, 1);
}
.headline-accent.is-marked {
  background-size: 100% 0.12em;
}

/* Stat-Zahlen (100%, 0 €): solides Korall statt Marker — grosse, leichte
   Display-Ziffern; ein roter Block dahinter waere zu schwer. */
.stat-figure {
  color: var(--brand-red-on-dark);
}

/* Reduced-Motion: Unterstreichung sofort voll, kein Wisch */
@media (prefers-reduced-motion: reduce) {
  .headline-accent {
    background-size: 100% 0.12em;
    transition: none;
  }
}

/* ----- Reveal on Scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-slow, .float-medium { animation: none; }
  html { scroll-behavior: auto; }
}

/* ----- Form Fields ----- */
.input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  color: #fff;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: rgba(255,255,255,0.45); }
.input:focus {
  outline: none;
  border-color: var(--brand-red);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(191,33,76,0.18);
}
textarea.input { min-height: 140px; resize: vertical; }

/* Custom checkbox */
.check {
  appearance: none;
  width: 1.1rem; height: 1.1rem;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.check:checked {
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.check:checked::after {
  content: ''; width: 0.45rem; height: 0.7rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}
/* Mobil: runde Checkbox mit ausreichend großer Tap-Fläche */
@media (max-width: 640px) {
  .check {
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    border-width: 1.5px;
    flex: 0 0 auto;
  }
  .check:checked::after { width: 0.55rem; height: 0.85rem; border-width: 0 2.5px 2.5px 0; }
}

/* ---- Kontaktformular: Spamschutz-Honeypot + Validierungs-States ---- */
/* Honeypot: für Menschen unsichtbar, von Bots ausgefüllt */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Ungültiges Feld: roter Rahmen (Grafik, kein roter Text) */
.input.input--err { border-color: var(--brand-red); }
/* Fehlermeldung: weiß (keine rote Schrift auf Blau) */
.form-err {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
}
.form-err::before { content: '⚠ '; }
[data-form-status] { margin-top: 1rem; font-size: 0.875rem; color: rgba(255,255,255,0.9); }
[data-form-status].is-err { color: #fff; border-left: 3px solid var(--brand-red); padding-left: 0.75rem; }

/* ---- Scroll-to-top Button ---- */
.to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60;
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-red); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s, background .2s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand-red-bright); }
@media (max-width: 640px) { .to-top { bottom: 1rem; right: 1rem; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s; transform: none; } }

/* ----- Bento Grid Hilfen ----- */
.bento-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.bento-tag .dot {
  width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor;
}

/* Diagonal Stripe für Card-Akzent (Equipment / Service) */
.accent-stripe {
  position: absolute; top: 0; right: 0;
  width: 130px; height: 130px;
  pointer-events: none; opacity: 0.25;
  background: repeating-linear-gradient(135deg,
    currentColor 0 2px, transparent 2px 12px);
  mask-image: radial-gradient(circle at top right, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at top right, black, transparent 70%);
}

/* ----- Header ----- */
.header-shell {
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.header-shell.scrolled {
  background: rgba(10, 30, 61, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ----- Nav: Triggers & Direktlinks ----- */
.nav-trigger,
.nav-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 0.5rem 0;
  background: transparent; border: 0;
  cursor: pointer;
  transition: color 0.2s;
  font-family: inherit;
  position: relative;
}
.nav-trigger:hover,
.nav-link:hover,
.nav-trigger[aria-expanded="true"] { color: #fff; }
.nav-chevron { transition: transform 0.25s cubic-bezier(.2,.8,.2,1); }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Aktiver Trigger bekommt eine subtile Glow-Line unten (wie in frame.io) */
.nav-trigger[aria-expanded="true"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.3rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(191,33,76,0.9), transparent);
  filter: drop-shadow(0 0 4px rgba(191,33,76,0.7));
}

/* ----- Nav Megapanel (frame.io-Style, Full-Width) -----
   Ein einziges Panel, das von Header-Kante zu Kante spannt.
   Inhalt wird per .nav-mp-content[data-active] gewechselt.
   Oben/unten Laser-Kanten (rote Gradient-Linien). */
.nav-megapanel {
  /* v0.2.9: position fixed + top 5rem (= Header h-20 = 80px).
     Vorher absolute innerhalb <header> — scheiterte am verschachtelten
     backdrop-filter (Header.scrolled hat selbst backdrop-filter, das
     den Child-Filter neutralisiert). Jetzt Sibling zum Header. */
  position: fixed;
  top: 5rem;
  left: 0; right: 0;
  width: 100%;
  background: rgba(3, 38, 86, 0.72);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 28px 56px -44px rgba(0,0,0,0.55),
              0 1px 0 rgba(255,255,255,0.04) inset;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s cubic-bezier(.2,.8,.2,1),
              transform 0.22s cubic-bezier(.2,.8,.2,1);
  z-index: 45;
  overflow: hidden;
}

/* v0.2.9: Page-Dim Scrim bei offenem Megapanel (leichte Abdunklung der
   restlichen Seite bei Menue-Hover). Liegt unter Header und Megapanel. */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 10, 28, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(.2,.8,.2,1);
  z-index: 40;
}
.nav-scrim[data-open="true"] {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nav-scrim { transition: none; }
}
.nav-megapanel::before,
.nav-megapanel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  pointer-events: none;
}
.nav-megapanel::before {
  top: 0;
  background: linear-gradient(90deg, transparent 10%, rgba(191,33,76,0.45) 50%, transparent 90%);
}
.nav-megapanel::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(191,33,76,0.22) 50%, transparent 80%);
}
.nav-megapanel[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-mp-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  position: relative;
}

.nav-mp-content {
  display: none;
  grid-template-columns: 1fr 1fr 1fr 1.35fr;
  gap: 3rem;
  animation: nav-mp-fade-in 0.18s ease;
}
.nav-mp-content[data-active="true"] { display: grid; }

@keyframes nav-mp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-mp-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-mp-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
  margin: 0 0 1rem;
  font-family: 'Outfit', sans-serif;
  text-wrap: normal;
}
.nav-mp-col-title::after {
  content: '';
  display: block;
  width: 1.6rem;
  height: 2px;
  margin-top: 0.5rem;
  background: linear-gradient(90deg, var(--brand-red), rgba(191, 33, 76, 0));
}
.nav-mp-link {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.18s, border-color 0.18s, padding-left 0.18s;
}
.nav-mp-link:last-child { border-bottom: none; }
.nav-mp-link:hover {
  color: #fff;
  padding-left: 0.4rem;
  border-bottom-color: rgba(191, 33, 76, 0.35);
}

/* Featured-Cell (rechts) mit Thumbnail */
.nav-mp-featured {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1),
              border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.nav-mp-featured:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 33, 76, 0.35);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 26px -22px rgba(191,33,76,0.26);
}
.nav-mp-featured-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.65rem;
  overflow: hidden;
  margin-bottom: 0.35rem;
  background: rgba(0,0,0,0.3);
}
.nav-mp-featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s;
}
.nav-mp-featured:hover .nav-mp-featured-img img {
  transform: scale(1.04);
  filter: brightness(1.05) saturate(1.1);
}
.nav-mp-featured-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
  margin-top: 0.2rem;
}
.nav-mp-featured-eyebrow::after {
  content: '';
  display: block;
  width: 1.4rem;
  height: 2px;
  margin-top: 0.35rem;
  background: linear-gradient(90deg, var(--brand-red), rgba(191, 33, 76, 0));
}
.nav-mp-featured-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.nav-mp-featured-desc {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* Reduced-Motion: Megapanel sofort einblenden */
@media (prefers-reduced-motion: reduce) {
  .nav-megapanel {
    transition: none;
    transform: none;
  }
  .nav-mp-content { animation: none; }
}

/* ----- Mobile Menu: Accordion für Nav-Dropdowns ----- */
.m-nav-group {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.m-nav-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.m-nav-trigger:hover { color: var(--brand-red-on-dark); }
.m-nav-trigger .nav-chevron {
  width: 14px; height: 14px;
  opacity: 0.6;
}
.m-nav-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(.2,.8,.2,1);
}
.m-nav-group[data-open="true"] .m-nav-panel {
  max-height: 320px;
}
.m-nav-group[data-open="true"] .m-nav-trigger .nav-chevron {
  transform: rotate(180deg);
}
.m-nav-panel a {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.7);
  border-left: 2px solid rgba(191,33,76,0.25);
  margin-left: 0.25rem;
  margin-bottom: 0.25rem;
}
.m-nav-panel a:hover { color: var(--brand-red-on-dark); }

/* ----- Mobile Menu Slide-In ----- */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
#mobile-menu.open {
  transform: translateX(0);
}

/* ----- Marquee / Trust Strip ----- */
.trust-strip {
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.04em;
}
.trust-item svg { color: var(--brand-red); }

/* ----- Play Button ----- */
.play-btn {
  width: 88px; height: 88px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-red);
  color: #fff;
  /* v0.7.0: statischer, sauberer Play-Button — keine Pulse-/Hover-/Maus-Animation */
  box-shadow: 0 14px 34px -12px rgba(191,33,76,0.6);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(191,33,76,0.55); }
  70%  { box-shadow: 0 0 0 30px rgba(191,33,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(191,33,76,0); }
}

/* ----- Section Divider ----- */
.section-edge-top {
  background: linear-gradient(180deg, var(--brand-blue-dark) 0%, var(--brand-blue) 30%);
}

/* ----- Utility: noscroll bei offenem Mobile-Menu ----- */
body.no-scroll { overflow: hidden; }

/* =========================================================
   HERO VIDEO SECTION (Variante A & B)
   Vollbild-Video, dunkles Tint-Overlay, Reveal-Layer
   nach Video-Ende per GSAP eingeblendet.
   ========================================================= */
.hero-video-section {
  /* Background-Schwarz, falls Video langsam lädt */
  background: #000;
}
.hero-video {
  /* object-cover via Tailwind, hier nur Performance-Hints */
  will-change: transform;
}
/* Tint: während Video unsichtbar, wird per GSAP nach `video.ended`
   vollflächig eingeblendet. Der "Blur" wird NICHT via backdrop-filter
   gemacht (greift nicht über HW-decoded <video>), sondern direkt
   per filter:blur() aufs Video selbst — siehe .hero-video. */
.hero-tint {
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(0,19,67,0.65), rgba(0,15,36,0.92) 75%);
  opacity: 0;
}

/* Hero-Video: filter ist GSAP-tween-bar (blur + leichte Abdunkelung beim Reveal) */
.hero-video {
  will-change: transform, filter;
  filter: blur(0px) brightness(1) saturate(1);
}

/* Reveal-Layer initial unsichtbar — JS-Sicherheit, falls GSAP versagt */
.hero-reveal { opacity: 0; }
.hero-reveal [data-hero-eyebrow],
.hero-reveal [data-hero-headline],
.hero-reveal [data-hero-sub],
.hero-reveal [data-hero-cta] {
  opacity: 0;
  transform: translateY(24px);
}

/* Hero-Slider + Punkt-Navigation (ersetzt die 3 Scroll-Sections) — gleicher Look, Crossfade */
.hero-slider { display: grid; }
.hero-slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero-dots { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 2.2rem; }
.hero-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.28); cursor: pointer; transition: background .3s ease, width .3s cubic-bezier(.2,.8,.2,1); }
.hero-dot:hover { background: rgba(255,255,255,.55); }
.hero-dot.is-active { width: 30px; background: var(--brand-red); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: opacity .25s linear; transform: none; } }

/* (entfernt) .hero-reveal-card – kein Box-Container mehr.
   Inhalte liegen frei zentriert auf dem vollflächigen Tint-Layer. */
/* Word-Splitter Output: jedes Wort ein span */
[data-hero-headline] .word,
[data-usp-content] .word {
  display: inline-block;
  overflow: hidden;
  /* leichter Padding-Bottom vermeidet Descender-Clipping */
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
[data-hero-headline] .word > span,
[data-usp-content] .word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

/* CTA Glow-Pulse (1× nach Reveal) */
@keyframes ctaGlow {
  0%   { box-shadow: 0 10px 30px -10px rgba(191,33,76,0.6), 0 0 0 0 rgba(191,33,76,0.55); }
  50%  { box-shadow: 0 14px 40px -12px rgba(191,33,76,0.85), 0 0 0 18px rgba(191,33,76,0); }
  100% { box-shadow: 0 10px 30px -10px rgba(191,33,76,0.6), 0 0 0 0 rgba(191,33,76,0); }
}
.hero-reveal [data-hero-cta].pulse-once {
  animation: ctaGlow 1.4s ease-out 1;
}

/* =========================================================
   USP SCROLL-SECTIONS (Scroll-gescrubbtes Hintergrundvideo)
   Section ist 100svh hoch — die Pin-Distance kommt von GSAP
   (`end: '+=300%'` = 3 Viewports zusätzlicher Scroll während gepinnt).
   GSAP hängt einen 300vh-Spacer NACH der Section an, sodass wir die
   volle Hold-Phase visuell halten können (CSS-Sticky kann das nicht,
   weil sich Sticky immer bei `section.height - viewport` löst).
   Phasen via GSAP-Master-Timeline:
     0  – 55 %  Pin-Progress  →  Video-Scrub
    55  – 75 %  Pin-Progress  →  Reveal (Filter aufs Video, Tint, Text)
    75  – 100% Pin-Progress  →  Hold (alles bleibt sichtbar)
   Voraussetzung: Videos sind mit jedem Frame als Keyframe encoded
   (siehe project/videos/_originals/ für Master-Files).
   ========================================================= */
.usp-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: var(--brand-blue-dark);
  overflow: hidden;          /* clip object-cover video */
}
.usp-pin {
  /* Reine logische Hülle (kein eigenes Pin-Verhalten mehr — die ganze
     Section wird via GSAP gepinnt). 100% × 100% innerhalb der Section. */
  position: relative;
  width: 100%;
  height: 100%;
}

/* USP-Video: filter ist GSAP-tween-bar (analog Hero) */
.usp-video {
  will-change: transform, filter;
  filter: blur(0px) brightness(1) saturate(1);
}

/* Tint analog Hero – initial unsichtbar, kommt nach Video-Scrub */
.usp-tint {
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(0,19,67,0.65), rgba(0,15,36,0.92) 75%);
  opacity: 0;
}

.usp-content [data-usp-eyebrow],
.usp-content [data-usp-headline],
.usp-content [data-usp-sub] {
  opacity: 0;
  transform: translateY(28px);
}

/* Section-Connector */
.usp-section + .usp-section { border-top: 1px solid rgba(255,255,255,0.05); }

/* News card 3D-Tilt (Hover via JS) */
.news-card { transform-style: preserve-3d; perspective: 800px; will-change: transform; }


/* Cursor Spotlight (optional Design-Spell, ein/aus per .has-spotlight auf body) */
body.has-spotlight {
  --spot-x: 50%; --spot-y: 50%;
}
body.has-spotlight::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(420px circle at var(--spot-x) var(--spot-y),
              rgba(191,33,76,0.08), transparent 60%);
  transition: opacity 0.4s;
}

/* Reduced-Motion Failsafe */
@media (prefers-reduced-motion: reduce) {
  .hero-reveal,
  .hero-reveal [data-hero-eyebrow],
  .hero-reveal [data-hero-headline],
  .hero-reveal [data-hero-sub],
  .hero-reveal [data-hero-cta],
  .usp-content [data-usp-eyebrow],
  .usp-content [data-usp-headline],
  .usp-content [data-usp-sub],
  /* Aktiver Hero-Slide gegen ein eventuell inline gesetztes opacity:0 (GSAP-Teilausfall)
     absichern — NUR der aktive Slide, sonst würden die grid-gestapelten Slides überlappen */
  .hero-slide.is-active {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-hero-headline] .word > span,
  [data-usp-content] .word > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-tint { opacity: 0.55 !important; }
}

/* JS-Failsafe (siehe main.js _revealFailsafeFull): macht initial versteckte,
   GSAP-getweente Elemente sichtbar, wenn GSAP/Slider nicht (voll) startet
   (Low-Power-Modus, JS-Teilausfall, CDN-Blockade). Instant gesetzt → kein Transition-Sprung.
   Wird per JS NUR vergeben, wenn kein Inline-opacity anliegt (aktive Animation bleibt unberührt). */
.js-failsafe-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ----- Numeric / Step number style (Pattern aus MEMORY.md) ----- */
.step-num {
  font-size: 3rem;
  font-weight: 900;
  color: #fff; /* v0.7.0: Step-Zahlen in reinem Weiss (Kundenwunsch) */
  line-height: 1;
  letter-spacing: -0.04em;
}
@media (min-width: 768px) {
  .step-num { font-size: 3.75rem; }
}

/* =========================================================
   CTA SECTION (#termin) — vollflaechig, Mesh-Gradient + Laser-Beam
   Layout analog USP-Sections (Content zentriert auf vollfl. Hintergrund).
   Mesh-Koordinaten werden von GSAP animiert (slow drift der Farbflecken).
   ========================================================= */

/* @property fuer saubere Custom-Property-Animation der Mesh-Positionen */
@property --mx1 { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --my1 { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --mx2 { syntax: '<percentage>'; initial-value: 80%; inherits: false; }
@property --my2 { syntax: '<percentage>'; initial-value: 75%; inherits: false; }
@property --mx3 { syntax: '<percentage>'; initial-value: 50%; inherits: false; }
@property --my3 { syntax: '<percentage>'; initial-value: 50%; inherits: false; }

.cta-section {
  min-height: 80vh;
  min-height: 80svh;
  width: 100%;
  background: var(--brand-blue-dark);
  position: relative;
  isolation: isolate;
}

.cta-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at var(--mx1, 20%) var(--my1, 20%), rgba(191, 33, 76, 0.55), transparent 62%),
    radial-gradient(ellipse 50% 45% at var(--mx2, 80%) var(--my2, 75%), rgba(3, 38, 86, 1), transparent 66%),
    radial-gradient(ellipse 70% 55% at var(--mx3, 50%) var(--my3, 50%), rgba(216, 41, 79, 0.22), transparent 62%),
    linear-gradient(135deg, #0A1E3D 0%, #032656 55%, #001E43 100%);
  filter: saturate(1.08);
  z-index: 0;
  animation:
    cta-mesh-drift-1 14s ease-in-out infinite alternate,
    cta-mesh-drift-2 18s ease-in-out infinite alternate,
    cta-mesh-drift-3 22s ease-in-out infinite alternate;
}

/* v0.2.9.1: Image-Backed Hintergrund fuer den Haupt-CTA.
   Content in .cta-content bleibt zentriert (Layout aus v0.2.8.1),
   nur Hintergrund wird statt Mesh-Gradient ein Foto (NCL-M180A) + radiales Overlay. */
.cta-image-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../assets/img/gallery-ncl-m180a.jpg');
  background-size: cover;
  background-position: center center;
  z-index: 0;
}
/* Radial-Overlay: Zentrum heller (Foto bleibt erahnbar), Raender stark abgedunkelt.
   Sorgt dafuer dass zentrierte Headline + CTA-Button lesbar bleiben. */
.cta-image-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(10, 30, 61, 0.55) 0%, rgba(10, 30, 61, 0.85) 45%, rgba(0, 15, 36, 0.96) 100%),
    linear-gradient(180deg, rgba(0, 15, 36, 0.35) 0%, transparent 22%, transparent 78%, rgba(0, 15, 36, 0.6) 100%);
  pointer-events: none;
}
@keyframes cta-mesh-drift-1 {
  to { --mx1: 38%; --my1: 45%; }
}
@keyframes cta-mesh-drift-2 {
  to { --mx2: 55%; --my2: 55%; }
}
@keyframes cta-mesh-drift-3 {
  to { --mx3: 35%; --my3: 65%; }
}

/* v0.7.0: Laser-Beam (Scan-Linie oben->unten) entfernt — Kundenwunsch. */

.cta-content {
  position: relative;
  z-index: 2;
  /* Inhalt vertikal mittig im vollflaechigen CTA (analog USP-Sections) */
  min-height: 80vh;
  min-height: 80svh;
  display: grid;
  place-items: center;
}

/* CTA Button: staerkerer Glow als btn-primary */
.cta-button {
  box-shadow:
    0 10px 28px -14px rgba(191, 33, 76, 0.6),
    0 0 40px -14px rgba(191, 33, 76, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cta-button:hover {
  box-shadow:
    0 14px 34px -16px rgba(191, 33, 76, 0.68),
    0 0 54px -14px rgba(191, 33, 76, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 6px rgba(191, 33, 76, 0.12);
}

/* Reduced-Motion: Mesh statisch */
@media (prefers-reduced-motion: reduce) {
  .cta-mesh { animation: none; }
}

/* =========================================================
   PARALLAX GALLERY (Section #einblicke, nach #warum)
   Horizontaler Scroll via GSAP ScrollTrigger-Pin auf Desktop.
   Vertikales Scrollen → horizontale Track-Translation.
   Mobile/Touch: native overflow-x mit scroll-snap.
   ========================================================= */

.gallery-section {
  position: relative;
  width: 100%;
  /* Normale horizontale Galerie (kein Pin-Scroll-Hijack mehr) — Section auf Inhaltshöhe. */
  height: auto;
  padding: clamp(3rem, 6vw, 6rem) 0;
  background: var(--brand-blue-dark);
  isolation: isolate;
}

/* v0.2.9.1: Gallery-Mesh-Layer — weiche radial-gradient-Wolken im Brand-Dark.
   Liegt hinter .gallery-pin (z-index der Panels ist hoeher durch normal flow). */
.gallery-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 42% at var(--gx1, 15%) var(--gy1, 25%), rgba(191, 33, 76, 0.32), transparent 65%),
    radial-gradient(ellipse 52% 55% at var(--gx2, 85%) var(--gy2, 75%), rgba(3, 38, 86, 0.85), transparent 68%),
    radial-gradient(ellipse 40% 45% at var(--gx3, 75%) var(--gy3, 18%), rgba(216, 41, 79, 0.16), transparent 66%),
    radial-gradient(ellipse 55% 50% at var(--gx4, 25%) var(--gy4, 80%), rgba(0, 30, 67, 0.9), transparent 70%),
    linear-gradient(180deg, #0A1E3D 0%, #001E43 50%, #0A1E3D 100%);
  filter: saturate(1.08);
  animation:
    gallery-mesh-drift-1 24s ease-in-out infinite alternate,
    gallery-mesh-drift-2 30s ease-in-out infinite alternate;
}

/* Leichter Laser-Akzent oben (analog anderen Sections) */
.gallery-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 15%, rgba(191, 33, 76, 0.35) 50%, transparent 85%);
  filter: drop-shadow(0 0 6px rgba(191, 33, 76, 0.4));
  z-index: 3;
  pointer-events: none;
}

/* @property fuer smooth Custom-Property-Animation */
@property --gx1 { syntax: '<percentage>'; initial-value: 15%; inherits: false; }
@property --gy1 { syntax: '<percentage>'; initial-value: 25%; inherits: false; }
@property --gx2 { syntax: '<percentage>'; initial-value: 85%; inherits: false; }
@property --gy2 { syntax: '<percentage>'; initial-value: 75%; inherits: false; }
@property --gx3 { syntax: '<percentage>'; initial-value: 75%; inherits: false; }
@property --gy3 { syntax: '<percentage>'; initial-value: 18%; inherits: false; }
@property --gx4 { syntax: '<percentage>'; initial-value: 25%; inherits: false; }
@property --gy4 { syntax: '<percentage>'; initial-value: 80%; inherits: false; }

@keyframes gallery-mesh-drift-1 {
  to { --gx1: 28%; --gy1: 38%; --gx3: 62%; --gy3: 32%; }
}
@keyframes gallery-mesh-drift-2 {
  to { --gx2: 68%; --gy2: 62%; --gx4: 38%; --gy4: 68%; }
}

/* Reduced-Motion: Mesh statisch */
@media (prefers-reduced-motion: reduce) {
  .gallery-section::before { animation: none; }
}

.gallery-pin {
  position: relative;
  width: 100%;
}

.gallery-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1.5rem 6rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(191,33,76,0.45) transparent;
  cursor: grab;
}
.gallery-track::-webkit-scrollbar { height: 8px; }
.gallery-track::-webkit-scrollbar-thumb { background: rgba(191,33,76,0.45); border-radius: 99px; }
.gallery-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gallery-panel, .gallery-quote-card { scroll-snap-align: center; }
@media (min-width: 1280px) {
  .gallery-track { gap: 4rem; padding: 1.5rem 8rem; }
}

/* Einzelnes Panel (Bild-Wrapper) */
.gallery-panel {
  position: relative;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(0,0,0,0.5),
              0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.4s cubic-bezier(.2,.8,.2,1);
  background: var(--brand-blue-dark);
}
.gallery-panel:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 50px -32px rgba(0,0,0,0.6),
              0 0 0 1px rgba(191,33,76,0.2);
}

/* Panel-Größen: alle auf gleiche Höhe (480px), kein Zig-Zag-Stagger mehr */
.gallery-panel--landscape-md,
.gallery-panel--landscape-lg,
.gallery-panel--landscape-sm { width: 640px; height: 480px; margin-top: 0; }
.gallery-panel--portrait-md,
.gallery-panel--portrait-sm  { width: 360px; height: 480px; margin-top: 0; }

.gallery-panel__img {
  position: absolute;
  inset: -40px 0;
  width: 100%;
  height: calc(100% + 80px);
  object-fit: cover;
  will-change: transform;
  transition: filter 0.5s cubic-bezier(.2,.8,.2,1);
}
.gallery-panel:hover .gallery-panel__img {
  filter: brightness(1.05) saturate(1.1);
}

/* Zitat-Panel (Finale Gallery-Card) */
.gallery-quote-card {
  position: relative;
  flex-shrink: 0;
  width: 760px;
  height: 620px;
  margin-top: 0;
  border-radius: 24px;
  padding: 3.5rem 3rem;
  background:
    linear-gradient(135deg, rgba(3,38,86,0.7), rgba(10,30,61,0.85) 55%, rgba(0,15,36,0.95));
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 18px 40px -30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Portrait-Variante: Freisteller ist unten buendig mit der Card (kein Anschnitt) */
.gallery-quote-card--with-portrait {
  overflow: hidden;
  padding-right: 18rem;
  width: 820px;
}

.gallery-quote-portrait {
  position: absolute;
  right: -1rem;
  bottom: 0;
  width: auto;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}
.gallery-quote-portrait img {
  width: auto;
  height: 100%;
  max-width: 22rem;
  object-fit: contain;
  object-position: bottom right;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.4))
          drop-shadow(0 0 32px rgba(191,33,76,0.12));
}

.gallery-quote-body {
  position: relative;
  z-index: 2;
  max-width: 36rem;
}

.gallery-quote-mark {
  position: absolute;
  top: -0.15em;
  left: 0.3rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 16rem;
  line-height: 0.8;
  color: rgba(191, 33, 76, 0.18);
  pointer-events: none;
  user-select: none;
}

.gallery-quote-text {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.25;
  color: var(--brand-light);
  max-width: 42ch;
  margin: 0 0 2.25rem;
}
.gallery-quote-text em {
  font-style: normal;
  font-weight: 500;
  color: #fff;
}

.gallery-quote-divider {
  width: 56px;
  height: 2px;
  background: var(--brand-red);
  border: none;
  margin: 0 0 1.5rem;
}

.gallery-quote-attrib {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.gallery-quote-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: #fff;
  display: block;
  line-height: 1.2;
}
.gallery-quote-role {
  font-size: 0.85rem;
  color: var(--brand-metal);
  letter-spacing: 0.02em;
  display: block;
  margin-top: 0.2rem;
}

.gallery-quote-cta {
  align-self: flex-start;
}

/* Mobile: Pin deaktiviert, native overflow-x + snap */
@media (max-width: 1023px) {
  .gallery-section {
    height: auto;
    padding: 1rem 0 3rem;
  }
  .gallery-pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .gallery-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
    padding: 1rem 1.5rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(191,33,76,0.4) transparent;
  }
  .gallery-track::-webkit-scrollbar { height: 6px; }
  .gallery-track::-webkit-scrollbar-thumb {
    background: rgba(191,33,76,0.4);
    border-radius: 99px;
  }
  .gallery-panel,
  .gallery-quote-card {
    scroll-snap-align: center;
    margin-top: 0 !important;
  }
  .gallery-panel--landscape-md,
  .gallery-panel--landscape-lg,
  .gallery-panel--landscape-sm {
    width: 82vw; max-width: 420px; height: 280px;
  }
  .gallery-panel--portrait-md,
  .gallery-panel--portrait-sm {
    width: 68vw; max-width: 320px; height: 440px;
  }
  .gallery-quote-card,
  .gallery-quote-card--with-portrait {
    width: 86vw; max-width: 460px; height: auto;
    padding: 2.5rem 2rem;
    padding-bottom: 14rem;
    padding-right: 2rem;
  }
  .gallery-quote-portrait {
    right: 50%;
    transform: translateX(50%);
    width: 14rem;
    height: auto;
    max-width: none;
    bottom: 0;
    display: block;
  }
  .gallery-quote-portrait img {
    height: auto;
    width: 100%;
    max-width: none;
  }
  .gallery-quote-body { max-width: 100%; }
  .gallery-quote-mark { font-size: 10rem; }
  .gallery-quote-text { font-size: 1.35rem; margin-bottom: 1.75rem; }
  .gallery-panel__img {
    inset: 0;
    height: 100%;
    transform: none !important;
  }
}

/* Reduced-Motion Failsafe */
@media (prefers-reduced-motion: reduce) {
  .gallery-section {
    height: auto;
    padding: 2rem 0;
  }
  .gallery-pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .gallery-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    transform: none !important;
  }
  .gallery-panel,
  .gallery-quote-card {
    margin-top: 0 !important;
  }
  .gallery-panel__img {
    inset: 0;
    height: 100%;
    transform: none !important;
    transition: none !important;
  }
  .gallery-panel { transition: none !important; }
}

/* =========================================================
   BRANCHEN-KONTEXT — "Die Industrie ist zerrissen" (v0.2.11)
   Mesh-Gradient-Atmosphäre + animierte SVG-Risslinien +
   Converge-Beam + Formeta-Pill-Lockup
   ========================================================= */

/* Mesh-Gradient-Layer: 4 radiale Wolken (rot/blau) die langsam driften.
   Liegt hinter den Risslinien + Cards (z-index 0), gibt der Section
   atmosphärische Tiefe ohne die Bruch-Metapher zu überlagern. */
.bk-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* v0.7.0: ruhiges Navy-Mesh — rote Farbkleckse entfernt (Kundenwunsch) */
  background:
    radial-gradient(ellipse 50% 45% at var(--bkx1, 18%) var(--bky1, 22%), rgba(3, 38, 86, 0.55), transparent 65%),
    radial-gradient(ellipse 55% 50% at var(--bkx2, 82%) var(--bky2, 78%), rgba(3, 38, 86, 0.8), transparent 68%),
    radial-gradient(ellipse 40% 40% at var(--bkx3, 70%) var(--bky3, 18%), rgba(0, 30, 67, 0.5), transparent 66%),
    radial-gradient(ellipse 50% 48% at var(--bkx4, 30%) var(--bky4, 82%), rgba(0, 30, 67, 0.9), transparent 70%);
  filter: saturate(1.05);
  animation:
    bk-mesh-drift-a 22s ease-in-out infinite alternate,
    bk-mesh-drift-b 28s ease-in-out infinite alternate;
}

@property --bkx1 { syntax: '<percentage>'; initial-value: 18%; inherits: false; }
@property --bky1 { syntax: '<percentage>'; initial-value: 22%; inherits: false; }
@property --bkx2 { syntax: '<percentage>'; initial-value: 82%; inherits: false; }
@property --bky2 { syntax: '<percentage>'; initial-value: 78%; inherits: false; }
@property --bkx3 { syntax: '<percentage>'; initial-value: 70%; inherits: false; }
@property --bky3 { syntax: '<percentage>'; initial-value: 18%; inherits: false; }
@property --bkx4 { syntax: '<percentage>'; initial-value: 30%; inherits: false; }
@property --bky4 { syntax: '<percentage>'; initial-value: 82%; inherits: false; }

@keyframes bk-mesh-drift-a {
  to { --bkx1: 32%; --bky1: 38%; --bkx3: 58%; --bky3: 34%; }
}
@keyframes bk-mesh-drift-b {
  to { --bkx2: 70%; --bky2: 62%; --bkx4: 42%; --bky4: 66%; }
}

/* Converge-Abschluss mit pulsierendem Lichtstrahl */
.bk-converge {
  margin-top: 7rem;
  text-align: center;
  position: relative;
}
.bk-converge-heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  margin-top: 1.2rem;
  color: #FEFEFE;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bk-converge-heading em {
  font-style: normal;
  font-weight: 500;
}

/* Formeta-Logo unter der Converge-Headline (schlichtes Original-Logo, kein Button) */
/* v0.7.0: deutlich groesser (Kundenwunsch) */
.bk-logo {
  display: inline-block;
  height: 4rem;
  width: auto;
  margin-top: 2.75rem;
}

@media (max-width: 640px) {
  .bk-logo { height: 2.85rem; }
  .bk-converge { margin-top: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-mesh { animation: none; }
}

/* Anker-Sprünge: Offset für fixen Header (Feedback #792928) */
section[id] { scroll-margin-top: 96px; }

/* ---------- glow.css ---------- */
/* =========================================================
   Formeta Dental – Laser-Glow UI-Paket (v0.2.8.2)

   Separate CSS-Datei, damit das Paket einfach ein-/ausgeschaltet
   werden kann (einfach den <link> aus index.html entfernen).

   Enthaelt das User-gewaehlte Minimal-Paket:
     #1 Animated Gradient Border auf .bento-card (Conic-Gradient rotiert)
     #3 Section-Edge-Laser-Lines auf .section-laser-top / -bottom
     #4 Red-Glow-Hover auf .bento-card
     #6 Text-Glow auf .text-brand-red
     #7 Button-Glow-Ring auf .btn-primary:hover
   ========================================================= */

/* @property fuer smoothes Conic-Gradient-Angle-Tween.
   Browser-Support: Chrome 85+, Safari 16.4+, Firefox 128+. */
@property --bento-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* =========================================================
   #1 — Animated Gradient Border auf Bento-Cards
   Rotierender Conic-Gradient-Ring, nur Kante sichtbar via Mask.
   Staerker bei Hover (schneller + opak).
   ========================================================= */
.bento-card {
  position: relative;
  isolation: isolate;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--bento-angle),
    transparent 0deg 270deg,
    rgba(191, 33, 76, 0.55) 310deg,
    rgba(216, 41, 79, 0.35) 335deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: bento-border-spin 9s linear infinite;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.35s cubic-bezier(.2,.8,.2,1),
              animation-duration 0.35s;
  z-index: 0;
}
.bento-card > * {
  position: relative;
  z-index: 1;
}
.bento-card:hover::before {
  opacity: 1;
  animation-duration: 4s;
}
@keyframes bento-border-spin {
  to { --bento-angle: 360deg; }
}

/* =========================================================
   #4 — Red-Glow-Hover auf Bento-Cards
   Erweitert die bestehende hover-Lift-Transition um einen
   dezenten roten Outer-Glow.
   ========================================================= */
.bento-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 30px -26px rgba(0, 0, 0, 0.42),
    0 0 26px -14px rgba(191, 33, 76, 0.3);
}

/* =========================================================
   #3 — Section-Edge-Laser-Lines
   Horizontale 1px Laser-Line am Section-Rand, mit Red-Glow.
   Klassen auf Section-Element setzen: .section-laser-top
   und/oder .section-laser-bottom.
   ========================================================= */
.section-laser-top::before,
.section-laser-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 10%,
    rgba(191, 33, 76, 0.6) 50%,
    transparent 90%
  );
  filter: drop-shadow(0 0 6px rgba(191, 33, 76, 0.5));
  z-index: 3;
}
.section-laser-top::before { top: 0; }
.section-laser-bottom::after { bottom: 0; }

/* =========================================================
   #6 — Text-Glow auf .text-brand-red — ENTFERNT (v0.3.1)
   Der 18px-Blur verwischte jeden roten Text und war ein
   Haupt-Faktor der schlechten Lesbarkeit auf Dunkelblau.
   Rote Icons sitzen jetzt auf weissen Chips (brauchen keinen Glow);
   roter Text auf Dunkel nutzt jetzt --brand-red-on-dark.
   ========================================================= */

/* =========================================================
   #7 — Button-Glow-Ring auf .btn-primary:hover
   Ergaenzt den bestehenden hover-Shadow um einen Soft-Ring
   wie ein LED-Button. CTA-Button (.cta-button) hat bereits
   eigenen staerkeren Glow, wird hier nicht doppelt gerahmt.
   ========================================================= */
.btn-primary:not(.cta-button):hover {
  box-shadow:
    0 10px 26px -14px rgba(191, 33, 76, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 5px rgba(191, 33, 76, 0.12);
}

/* =========================================================
   Reduced-Motion-Failsafes
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .bento-card::before {
    animation: none;
    opacity: 0.3;
  }
}

/* ---------- pages.css ---------- */
/* =========================================================
   Formeta Dental – Unterseiten-Komponenten (v0.5.0)
   Baut auf style.css / glow.css / warum.css auf.
   Brand-Regeln (HART):
   - keine Kicker/Eyebrows über Headings
   - Haupt-Headings nutzen .headline-accent (weiß + roter Marker)
   - NIEMALS rote Schrift auf Blau (Rot nur als Grafik/Marker/Block)
   - kein Hell-/Korallrot (#FF5E7A) — nur Brand-Rot #BF214C
   - Section-BG = Navy-Gradient (.wf-mesh), ruhig & clean
   ========================================================= */

/* ---- generische Section / Wrap (analog warum.css) ---- */
.fd-section { position: relative; padding: clamp(5rem,11vw,9rem) 0; overflow: hidden; }
.fd-section--tight { padding: clamp(3.5rem,8vw,6rem) 0; }
.fd-wrap { position: relative; z-index: 1; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-wrap--narrow { max-width: 70rem; }
.fd-head { margin-bottom: clamp(2.5rem,5vw,4rem); }
/* Einheitlicher Titel→Lead-Abstand: wenn ein Lead DIREKT auf den Head folgt, NICHT
   die grosse fd-head-margin + lead-margin addieren, sondern einheitlich 1.4rem (wie head(title,lead)). */
.fd-head:has(+ .fd-section-lead) { margin-bottom: 1.4rem; }
.fd-head + .fd-section-lead { margin-top: 0; }
.fd-section-title { font-size: clamp(2.1rem,4.6vw,3.8rem); max-width: 1050px; font-weight: 300; letter-spacing: -.015em; line-height: 1.05; }
.fd-section-lead { margin-top: 1.4rem; max-width: 60rem; color: rgba(255,255,255,.68); font-size: 1.08rem; line-height: 1.65; }
.fd-eyebrow-meta { font-family: ui-monospace,monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-metal); }

/* =========================================================
   COMPACT SUBHERO (für funktionale Seiten: Kontakt, Portal,
   Upload, Danke, 404). Navy-Gradient, linksbündig, ruhig.
   ========================================================= */
.fd-subhero { position: relative; overflow: hidden; background: var(--brand-blue-dark);
  padding: clamp(8rem,16vw,11rem) 0 clamp(3.5rem,7vw,5.5rem); }
.fd-subhero--center { text-align: center; }
.fd-subhero--center .fd-subhero-sub,
.fd-subhero--center .fd-subhero-actions { margin-inline: auto; }
.fd-subhero--center .fd-subhero-actions { justify-content: center; }
.fd-subhero-inner { position: relative; z-index: 2; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-subhero--center .fd-subhero-inner { max-width: 60rem; }
.fd-subhero-title { font-size: clamp(2.2rem,4.8vw,3.9rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.03; max-width: 20ch; }
.fd-subhero--center .fd-subhero-title { max-width: 24ch; margin-inline: auto; }
.fd-subhero-sub { margin-top: 1.5rem; max-width: 48rem; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.6; color: rgba(255,255,255,.8); }
.fd-subhero-sub strong { color: #fff; font-weight: 600; }
.fd-subhero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
/* v0.7.0: Subhero mit Bild rechts, leicht angeschnitten (Kontakt-Team) */
.fd-subhero--media .fd-subhero-title,
.fd-subhero--media .fd-subhero-sub { max-width: 34rem; }
.fd-subhero-figure { position: absolute; right: 0; bottom: 0; z-index: 1; width: clamp(380px, 44vw, 740px); pointer-events: none; }
.fd-subhero-figure img { display: block; width: 100%; height: auto; transform: translateX(8%); filter: drop-shadow(-20px 24px 48px rgba(0,0,0,.45)); }
@media (max-width: 900px) {
  .fd-subhero--media { padding-bottom: 0; }
  .fd-subhero--media .fd-subhero-title, .fd-subhero--media .fd-subhero-sub { max-width: none; }
  .fd-subhero-figure { position: static; width: min(100%, 26rem); margin: 2.2rem auto 0; padding-inline: clamp(1.25rem,4vw,3rem); }
  .fd-subhero-figure img { transform: none; }
}

/* =========================================================
   GRIDS
   ========================================================= */
.fd-grid { display: grid; gap: clamp(1.25rem,2.5vw,1.75rem); }
.fd-grid-2 { grid-template-columns: repeat(2,1fr); }
.fd-grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .fd-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fd-grid-2, .fd-grid-3 { grid-template-columns: 1fr; } }

/* ---- Feature- / Info-Card (reuse .glass.bento-card aus style.css) ---- */
.fd-card { position: relative; border-radius: 20px; padding: clamp(1.6rem,2.4vw,2.1rem);
  background: var(--glass-bg); border: 1px solid var(--glass-border); overflow: hidden; }
.fd-card h3 { margin-top: 1.2rem; font-size: clamp(1.15rem,1.8vw,1.4rem); font-weight: 600; line-height: 1.25; }
.fd-card p { margin-top: .65rem; color: rgba(255,255,255,.68); line-height: 1.65; font-size: .98rem; }
.fd-card .icon-flat { width: 46px; height: 46px; }
.fd-card-num { font-family: 'Outfit'; font-weight: 300; font-size: clamp(2rem,3vw,2.6rem); line-height: 1; letter-spacing: -.02em; color: #fff; }

/* =========================================================
   SPLIT (Bild + Text) — generisch (analog .wf-split, ohne Parallax-Zwang)
   ========================================================= */
.fd-split { position: relative; display: grid; gap: clamp(2rem,5vw,4.5rem); grid-template-columns: 1fr 1fr; align-items: center;
  max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-split--rev .fd-split-media { order: 2; }
.fd-split-media { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid rgba(255,255,255,.1); }
.fd-split-media-inner { position: absolute; inset: -8% 0; will-change: transform; }
.fd-split-media-inner img { width: 100%; height: 100%; object-fit: cover; }
.fd-split-badge { position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 2; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(10,30,61,.6); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); padding: .5rem .9rem; border-radius: 999px; }
.fd-split-title { font-size: clamp(2.1rem,4.4vw,3.4rem); max-width: 1050px; font-weight: 300; letter-spacing: -.015em; line-height: 1.06; }
/* STANDARD (zentral): Body-Copy direkt nach einer Split-Überschrift hat IMMER 1.5rem Abstand —
   egal ob .fd-richtext oder .fd-split-text. Verhindert dauerhaft das „Überschrift klebt am Text". */
.fd-split-title + .fd-richtext,
.fd-split-title + .fd-split-text { margin-top: 1.5rem; }
.fd-split-text { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.05rem; color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; }
.fd-split-text strong { color: #fff; font-weight: 600; }
@media (max-width: 900px) { .fd-split { grid-template-columns: 1fr; } .fd-split--rev .fd-split-media { order: 0; } .fd-split-media { aspect-ratio: 4/3; } }

/* ---- Full-Bleed-Variante: Bild bricht randlos zum Viewport-Rand aus (kein Border, nur Innenseite gerundet) ---- */
.fd-split--bleed { max-width: none; margin-inline: 0; padding-inline: 0; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.fd-split--bleed .fd-split-media { aspect-ratio: auto; align-self: stretch; min-height: clamp(440px,56vw,720px); border: 0; border-radius: 0 26px 26px 0; }
.fd-split--bleed .fd-split-body { max-width: 760px; padding-right: clamp(1.5rem,6vw,5rem); padding-block: clamp(1rem,3vw,2.5rem); }
.fd-split--bleed.fd-split--rev .fd-split-media { border-radius: 26px 0 0 26px; }
.fd-split--bleed.fd-split--rev .fd-split-body { padding-right: 0; padding-left: clamp(1.5rem,6vw,5rem); margin-right: auto; }
@media (max-width: 900px) {
  .fd-split--bleed { grid-template-columns: 1fr; }
  /* Mobil: Bild oben bündig an den Section-Rand andocken (Top-Padding der Wrapper-Section entfernen). */
  .fd-section:has(> .fd-split--bleed) { padding-top: 0; }
  .fd-split--bleed .fd-split-media, .fd-split--bleed.fd-split--rev .fd-split-media { min-height: 62vw; border-radius: 0 0 22px 22px; }
  .fd-split--bleed .fd-split-body, .fd-split--bleed.fd-split--rev .fd-split-body { padding-inline: clamp(1.25rem,4vw,3rem); }
}

/* ---- Bullet-Liste mit rotem Haken (white-on-red ist erlaubt; Marker = Grafik) ---- */
.fd-checklist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.fd-checklist li { position: relative; padding-left: 2.1rem; color: rgba(255,255,255,.74); line-height: 1.6; }
.fd-checklist li::before { content: ''; position: absolute; left: 0; top: .15rem; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--brand-red); border: 0; }
.fd-checklist li::after { content: ''; position: absolute; left: .44rem; top: .34rem; width: .38rem; height: .68rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Onsite-Vergleichskarte hat starken roten Hintergrund → Marker invertieren (weißer Kreis, roter Haken) */
.fd-compare-card--onsite .fd-checklist li::before { background: #fff; }
.fd-compare-card--onsite .fd-checklist li::after { border-color: var(--brand-red); }
.fd-checklist li strong { color: #fff; font-weight: 600; }

/* =========================================================
   PROMISES — nummerierte Versprechen (z.B. Preis-Seite).
   Reuse der wf-adv-Nummerntypo, aber als ruhiges 2-Spalten-Grid.
   ========================================================= */
.fd-promises { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,4.5rem); }
.fd-promise { display: flex; gap: 1.3rem; padding: clamp(1.4rem,2.5vw,2rem) 0; border-top: 1px solid rgba(255,255,255,.1); }
.fd-promise-num { flex: 0 0 auto; min-width: 2.4ch; font-family: 'Outfit'; font-weight: 300; font-size: clamp(2rem,3.2vw,3rem);
  line-height: 1; letter-spacing: -.02em; color: #fff; }
.fd-promise h3 { font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 600; line-height: 1.2; }
.fd-promise p { margin-top: .6rem; color: rgba(255,255,255,.68); line-height: 1.6; font-size: .98rem; }
@media (max-width: 760px) { .fd-promises { grid-template-columns: 1fr; } }

/* =========================================================
   COMPARE — FTC vs. Onsite Gegenüberstellung
   ========================================================= */
.fd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2.5vw,1.75rem); }
.fd-compare-card { position: relative; border-radius: 22px; padding: clamp(1.8rem,3vw,2.6rem);
  background: linear-gradient(165deg, rgba(3,38,86,.5), rgba(10,30,61,.7)); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.fd-compare-card h3 { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 600; }
.fd-compare-card .fd-compare-tag { font-family: ui-monospace,monospace; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-red-on-dark); display: inline-block; margin-bottom: .8rem; }
.fd-compare-card p { margin-top: .6rem; color: rgba(255,255,255,.7); line-height: 1.6; }
@media (max-width: 760px) { .fd-compare { grid-template-columns: 1fr; } }

/* =========================================================
   STATIC STEPS — nummerierter Ablauf ohne Pin (z.B. Upload)
   ========================================================= */
.fd-steps { display: grid; gap: clamp(1.25rem,2.5vw,1.75rem); grid-template-columns: repeat(3,1fr); counter-reset: fdstep; }
.fd-steps--5 { grid-template-columns: repeat(5,1fr); }
.fd-step { position: relative; border-radius: 18px; padding: clamp(1.5rem,2.4vw,2rem); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fd-step-num { font-family: 'Outfit'; font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: #fff; }
.fd-step h3 { margin-top: .9rem; font-size: 1.15rem; font-weight: 600; }
.fd-step p { margin-top: .55rem; color: rgba(255,255,255,.66); line-height: 1.6; font-size: .95rem; }
@media (max-width: 1000px) { .fd-steps, .fd-steps--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fd-steps, .fd-steps--5 { grid-template-columns: 1fr; } }

/* =========================================================
   FORM (Kontakt / Upload) — reuse .input / .check aus style.css
   ========================================================= */
.fd-form { max-width: 46rem; }
.fd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.fd-form-grid .fd-col-full { grid-column: 1 / -1; }
.fd-field { display: flex; flex-direction: column; gap: .5rem; }
.fd-field label { font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.78); }
.fd-field label .opt { color: var(--brand-metal); font-weight: 400; }
.fd-consent { display: flex; align-items: flex-start; gap: .7rem; margin-top: .4rem; font-size: .88rem; color: rgba(255,255,255,.66); line-height: 1.5; }
.fd-form-note { margin-top: 1rem; font-size: .85rem; color: var(--brand-metal); }
@media (max-width: 600px) { .fd-form-grid { grid-template-columns: 1fr; } }

/* ---- Dropzone (Upload-Platzhalter, nicht funktional) ---- */
.fd-dropzone { border: 1.5px dashed rgba(255,255,255,.22); border-radius: 18px; padding: clamp(2.2rem,5vw,3.5rem);
  text-align: center; background: rgba(255,255,255,.025); transition: border-color .25s, background .25s; }
.fd-dropzone:hover { border-color: rgba(191,33,76,.5); background: rgba(191,33,76,.04); }
.fd-dropzone .fd-dz-icon { width: 54px; height: 54px; margin: 0 auto 1rem; display: grid; place-items: center;
  background: transparent; border: 0; color: #fff; }
.fd-dropzone .fd-dz-icon svg { stroke: #fff; }
.fd-dropzone p { color: rgba(255,255,255,.7); }
.fd-dropzone .fd-dz-meta { margin-top: .6rem; font-size: .82rem; color: var(--brand-metal); }

/* =========================================================
   CONTACT CHANNELS (Kontakt-Seite)
   ========================================================= */
.fd-channels { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.fd-channel { border-radius: 18px; padding: clamp(1.4rem,2.4vw,1.9rem); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fd-channel .icon-flat { margin-bottom: 1rem; }
.fd-channel h3 { font-size: 1.1rem; font-weight: 600; }
.fd-channel p { margin-top: .5rem; color: rgba(255,255,255,.7); line-height: 1.55; font-size: .95rem; }
.fd-channel .fd-placeholder { color: var(--brand-metal); font-style: italic; }
@media (max-width: 800px) { .fd-channels { grid-template-columns: 1fr; } }

/* Downloadcenter (v0.9.52 — Kundenwunsch Christina 06.07.) */
.fd-downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1rem; margin-top: clamp(1.5rem,3vw,2.2rem); }
/* v0.9.61: Kante entdoppelt. Vorher lagen heller 1px-Rand UND hellere Fläche übereinander —
   auf dem Navy-Mesh las sich das wie ein zweiter, zu harter Schatten. Jetzt trägt nur noch
   die Fläche die Abgrenzung; der Rand kommt erst beim Hover dezent dazu. */
.fd-download { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: rgba(255,255,255,.055); border: 1px solid transparent; color: #fff; text-decoration: none; transition: border-color .25s, background .25s, transform .25s; }
.fd-download:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.085); transform: translateY(-2px); }
/* v0.9.61: rote Kachel hinter dem Icon entfernt, Glyph dafür deutlich größer (freistehend). */
.fd-download-ic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; background: none; }
.fd-download-ic svg { width: 34px; height: 34px; color: #fff; }
.fd-download-main { flex: 1; min-width: 0; }
.fd-download-main b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.fd-download-main span { display: block; font-size: .8rem; color: rgba(255,255,255,.55); margin-top: .2rem; }
.fd-download-dl { flex: 0 0 auto; color: rgba(255,255,255,.5); transition: color .25s, transform .25s; }
.fd-download-dl svg { width: 20px; height: 20px; }
.fd-download:hover .fd-download-dl { color: #fff; transform: translateY(2px); }
@media (max-width: 640px) { .fd-downloads { grid-template-columns: 1fr; } }

/* v0.9.61: Downloadbereich zweispaltig — Text links, Karten untereinander rechts. */
.fd-dlsplit { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
.fd-dlsplit > .fd-head { margin-bottom: 0; }
.fd-dlsplit .fd-downloads { grid-template-columns: 1fr; margin-top: 0; gap: .85rem; }
@media (max-width: 900px) { .fd-dlsplit { grid-template-columns: 1fr; gap: 2.25rem; } }
.fd-section--center .fd-ctarow { justify-content: center; }

/* ---- Platzhalter-Badge (klar markierte offene Inhalte) ---- */
.fd-placeholder-box { border: 1px dashed rgba(255,255,255,.2); border-radius: 16px; padding: clamp(1.4rem,3vw,2rem);
  background: rgba(255,255,255,.02); color: rgba(255,255,255,.6); }
.fd-placeholder-box .fd-ph-tag { display: inline-block; font-family: ui-monospace,monospace; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-red-on-dark); border: 1px solid rgba(191,33,76,.35); border-radius: 999px;
  padding: .25rem .7rem; margin-bottom: .9rem; }

/* =========================================================
   LINKEDIN / PROFILE CARDS (News-Seite)
   ========================================================= */
.fd-profiles { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.fd-profile { display: flex; align-items: center; gap: 1rem; border-radius: 16px; padding: 1.2rem 1.3rem;
  background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color .25s, transform .25s; text-decoration: none; }
.fd-profile:hover { border-color: rgba(191,33,76,.4); transform: translateY(-2px); }
.fd-profile-av { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 999px; overflow: hidden; color: #fff; }
.fd-profile-av svg { stroke: #fff; }
.fd-profile b { display: block; color: #fff; font-weight: 600; font-size: 1rem; }
.fd-profile span { display: block; font-size: .85rem; color: rgba(255,255,255,.6); }
@media (max-width: 800px) { .fd-profiles { grid-template-columns: 1fr; } }

/* =========================================================
   AUTH / PORTAL CTA-Splitkarten (Kundenportal)
   ========================================================= */
.fd-authgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2.5vw,1.75rem); }
.fd-auth { border-radius: 22px; padding: clamp(1.8rem,3vw,2.6rem); background: linear-gradient(165deg, rgba(3,38,86,.5), rgba(10,30,61,.7));
  border: 1px solid rgba(255,255,255,.1); }
.fd-auth h3 { font-size: clamp(1.3rem,2.2vw,1.7rem); font-weight: 600; }
.fd-auth p { margin-top: .6rem; color: rgba(255,255,255,.7); line-height: 1.6; }
@media (max-width: 700px) { .fd-authgrid { grid-template-columns: 1fr; } }

/* =========================================================
   CTA-BAND (schlanker Abschluss-CTA, reuse cta-mesh-Look via wf-mesh)
   ========================================================= */
.fd-cta { position: relative; overflow: hidden; padding: clamp(4.5rem,9vw,7rem) 0; text-align: center; }
.fd-cta-inner { position: relative; z-index: 2; max-width: 52rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-cta h2 { font-size: clamp(2rem,4.4vw,3.4rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.08; }
.fd-cta p { margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.fd-cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* =========================================================
   DANKE / 404 — zentrierter Inhalt
   ========================================================= */
.fd-center-list { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.fd-signature { margin-top: 2.4rem; font-family: 'Outfit'; font-weight: 300; font-style: italic; font-size: 1.25rem; color: rgba(255,255,255,.7); }

/* =========================================================
   FULLBLEED — großflächige Bild-Statement-Section (100svh, Parallax)
   ========================================================= */
.fd-fullbleed { position: relative; min-height: 92svh; display: flex; overflow: hidden; isolation: isolate; background: var(--brand-blue-dark); }
.fd-fullbleed-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fd-fullbleed-media img { width: 100%; height: 100%; object-fit: cover; }
.fd-fullbleed-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(100deg, rgba(0,11,28,.92) 0%, rgba(10,30,61,.7) 42%, rgba(10,30,61,.2) 72%, transparent 100%),
  linear-gradient(0deg, rgba(0,11,28,.8), transparent 35%); }
.fd-fullbleed-inner { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; max-width: 98rem;
  margin-inline: auto; padding: clamp(4rem,10vw,8rem) clamp(1.25rem,4vw,3rem); }
.fd-fullbleed-inner[style*="center"] { justify-content: center; }
.fd-fullbleed-title { font-size: clamp(2.1rem,5vw,4rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.03; }
.fd-fullbleed-text { margin-top: 1.3rem; font-size: clamp(1.05rem,1.5vw,1.3rem); line-height: 1.6; color: rgba(255,255,255,.82); }
.fd-fullbleed-text strong { color: #fff; font-weight: 600; }

/* =========================================================
   MOSAIK — asymmetrisches Bildraster mit Hover-Zoom
   ========================================================= */
.fd-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px,18vw,230px); gap: clamp(.75rem,1.5vw,1.1rem); }
.fd-mosaic-tile { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.fd-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; }
.fd-mosaic-tile:hover img { transform: scale(1.05); filter: brightness(1.05) saturate(1.08); }
.fd-mosaic-cap { position: absolute; left: 1rem; bottom: .9rem; z-index: 2; font-family: ui-monospace,monospace; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,11,28,.55); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); padding: .35rem .7rem; border-radius: 999px; }
.fd-mosaic-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,11,28,.35), transparent 45%); pointer-events: none; }
.fd-mosaic-wide { grid-column: span 2; }
.fd-mosaic-tall { grid-row: span 2; }
.fd-mosaic-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) {
  .fd-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px,30vw,180px); }
  .fd-mosaic-big { grid-column: span 2; grid-row: span 2; }
  .fd-mosaic-wide { grid-column: span 2; }
  .fd-mosaic-tall { grid-row: span 1; }
}

@media (max-width: 520px) {
  .fd-subhero-actions .btn, .fd-cta-actions .btn, .fd-center-list .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   ICON — Stil 1: weißes Glass-Icon (Verlauf) im rot getönten Frosted-Circle.
   Nutzt den geteilten SVG-Verlauf #iconGlass (muss einmal im DOM liegen).
   Größe via Tailwind w-/h- am Element; sonst Default 3.5rem.
   ========================================================= */
.fd-icon1 { position:relative; flex:0 0 auto; display:grid; place-items:center start; color:#fff;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:transform .25s ease, opacity .25s ease; }
.fd-icon1:not([class*="w-"]) { width:3.5rem; height:3.5rem; }
.fd-icon1 svg { width:62%; height:62%; display:block; stroke:#fff; fill:none; filter:none; }
.bento-card:hover .fd-icon1, .fd-icon1:hover { transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .fd-icon1 { transition:none; } }
/* kompakter Abstand Icon → Titel in Feature-Cards & Kontakt-Kanälen */
.fd-card > .fd-icon1 + h3, .fd-channel > .fd-icon1 + h3 { margin-top:.7rem; }

/* text-freier Video-Divider: Regeln siehe unten NACH der .wf-band-Basisregel —
   gleiche Spezifität, die Quell-Reihenfolge (warum.css VOR pages.css) muss
   erhalten bleiben, sonst gewinnt 100svh über 62svh (Soll-Ist U5, 2026-07-24). */

/* Compare-Karten Farbwelten (Lösungen): FTC = Blau, Onsite = Rot */
.fd-compare-card--ftc { background: linear-gradient(165deg, rgba(3,64,135,.30), rgba(10,30,61,.65)); border-color: rgba(96,150,224,.32); }
.fd-compare-card--onsite { background: linear-gradient(165deg, rgba(191,33,76,.22), rgba(10,30,61,.65)); border-color: rgba(191,33,76,.4); }
.fd-compare-card--ftc h3 { color: #fff; }
.fd-compare-card--onsite h3 { color: #fff; }

/* Hero mit Video-Hintergrund (z.B. Kontakt: Hamburg) */
.wf-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-Height Video-Section mit Text-Overlay (z.B. Produkte: Warum 3D-Metalldruck) */
.fd-video-section { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--brand-blue-dark); }
.fd-video-section .fd-vs-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fd-video-section .fd-vs-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-video-section .fd-vs-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(100deg, rgba(0,11,28,.9) 0%, rgba(10,30,61,.7) 44%, rgba(10,30,61,.32) 72%, rgba(0,11,28,.5) 100%),
  linear-gradient(0deg, rgba(0,11,28,.7), transparent 40%); }
.fd-video-section .fd-vs-inner { position: relative; z-index: 2; width: 100%; max-width: 98rem; margin-inline: auto; padding: clamp(4rem,9vw,7rem) clamp(1.25rem,4vw,3rem); }
.fd-video-section .fd-vs-inner .fd-section-title, .fd-video-section .fd-vs-inner h2 { max-width: 1000px; }

/* =========================================================
   v0.7.0 — Go-Live-Korrekturpaket: neue Bausteine
   ========================================================= */

/* --- Lösungs-Module FTC/Onsite (Wow): große Typo + große Media + Parallax (item 15) --- */
.fd-solution { position: relative; padding: clamp(4rem,9vw,8rem) 0; overflow: hidden; isolation: isolate; }
/* v0.8.0: FULL-BLEED-Split analog .wf-split--bleed ("Aus Hamburg"): Bild bricht randlos zum
   Viewport-Rand aus (gerundet nur innen, full-height), Kopf + Body sitzen in der Textspalte. */
.fd-solution-split { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem); align-items: stretch; }
/* min-width:0 verhindert Grid-Blowout durch den max-content-Track des Box-Sliders (sonst Overflow auf Mobil). */
.fd-solution-media, .fd-solution-body { min-width: 0; }
.fd-solution-media { position: relative; overflow: hidden; align-self: stretch;
  min-height: clamp(440px,52vw,680px); border-radius: 0 28px 28px 0; }
.fd-solution--rev .fd-solution-media { order: 2; border-radius: 28px 0 0 28px; }
.fd-solution-media-inner { position: absolute; inset: -8% 0; will-change: transform; }
.fd-solution-media-inner img { width: 100%; height: 100%; object-fit: cover; }
.fd-solution-body { max-width: 760px; align-self: center;
  padding-right: clamp(1.5rem,6vw,5rem); padding-block: clamp(1rem,3vw,2.5rem); }
.fd-solution--rev .fd-solution-body { order: 1; padding-right: 0; padding-left: clamp(1.5rem,6vw,5rem); }
.fd-solution-head { display: flex; align-items: baseline; gap: clamp(.8rem,2vw,1.6rem); margin-bottom: clamp(1.4rem,3vw,2.2rem); }
.fd-solution-num { flex: 0 0 auto; font-family: 'Outfit'; font-weight: 800; font-size: clamp(2.6rem,6vw,4.6rem); line-height: .8; letter-spacing: -.04em; color: rgba(255,255,255,.16); }
.fd-solution-title { font-size: clamp(2rem,4.4vw,3.4rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; color: #fff; }
.fd-solution-tag { margin-top: .5rem; font-size: clamp(1.1rem,2.2vw,1.6rem); font-weight: 300; color: rgba(255,255,255,.92); }
.fd-solution-body .fd-split-text { margin-top: 0; }
@media (max-width: 900px) {
  /* Mobil: Bild oben bündig an den Section-Rand andocken (kein Top-Padding-Streifen über dem Bild). */
  .fd-solution { padding-top: 0; }
  .fd-solution-split { grid-template-columns: 1fr; }
  .fd-solution-media, .fd-solution--rev .fd-solution-media { order: 0; min-height: 62vw; border-radius: 0 0 22px 22px; }
  .fd-solution-body, .fd-solution--rev .fd-solution-body { order: 1; max-width: none;
    padding-inline: clamp(1.25rem,4vw,3rem); padding-right: clamp(1.25rem,4vw,3rem); padding-left: clamp(1.25rem,4vw,3rem); }
  .fd-solution-head { gap: .6rem; }
}

/* v0.8.0: "Was du bekommst" — horizontaler Auto-Slider von Boxen, die den Rand anschneiden.
   Reine CSS-Marquee (Track 1× dupliziert, translateX 0→-50% = nahtlos), Hover pausiert. */
.fd-bslider { position: relative; margin-top: 1.4rem; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.fd-bslider-track { display: flex; width: max-content; animation: fd-bslide 36s linear infinite; }
.fd-bslider:hover .fd-bslider-track { animation-play-state: paused; }
.fd-bcard { flex: 0 0 auto; width: clamp(220px,24vw,290px); margin-right: 1rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 1.5rem 1.4rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fd-bcard .fd-icon1 { width: 3rem; height: 3rem; }
.fd-bcard p { color: rgba(255,255,255,.82); line-height: 1.55; font-size: .98rem; }
@keyframes fd-bslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .fd-bslider { overflow-x: auto; -webkit-mask: none; mask: none; }
  .fd-bslider-track { animation: none; }
}

/* --- ROI-Section mit Hintergrundbild + Overlay (item 18) --- */
.fd-roi { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem,8vw,6.5rem) 0; }
.fd-roi-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fd-roi-media img { width: 100%; height: 100%; object-fit: cover; }
.fd-roi-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(ellipse 90% 80% at 32% 40%, rgba(10,30,61,.78), rgba(0,11,28,.93) 72%),
  linear-gradient(180deg, rgba(0,11,28,.55), rgba(0,11,28,.85)); }
.fd-roi-inner { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); text-align: center; }
.fd-roi-inner .fd-section-title, .fd-roi-inner .fd-section-lead { margin-inline: auto; }
.fd-roi-inner .fd-checklist { display: inline-flex; text-align: left; margin-inline: auto; }
.fd-roi-inner [style*="display:flex"] { justify-content: center; }

/* --- „Was passt zu dir"-Section: Überschrift + Fließtext/CTA zentriert (item 16) --- */
.fd-compare-block { text-align: center; }
.fd-compare-block .fd-head { text-align: center; max-width: 48rem; margin-inline: auto; }
.fd-compare-block .fd-section-lead { margin-inline: auto; }
.fd-compare-block .fd-compare { text-align: left; max-width: 70rem; margin-inline: auto; }
.fd-compare-foot { max-width: 48rem; margin: clamp(1.75rem,3vw,2.5rem) auto 0; color: rgba(255,255,255,.8); }
.fd-compare-foot strong { color: #fff; }
.fd-compare-foot p + p { margin-top: 1rem; }
.fd-compare-block [style*="display:flex"] { justify-content: center; }

/* --- „Was passt zu dir"-Boxen EXAKT im Startseiten-Karten-Styling (glass-strong FTC / vibrant-red Onsite + accent-stripe) --- */
.fd-compare-card { position: relative; overflow: hidden; text-align: center; border-radius: 24px; padding: clamp(2rem,4vw,2.7rem);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s, background .5s; }
.fd-compare-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.fd-compare-card::before { content: ''; position: absolute; top: 0; right: 0; width: 130px; height: 130px; pointer-events: none; opacity: .25;
  background: repeating-linear-gradient(135deg, var(--cstripe,#fff) 0 2px, transparent 2px 12px);
  -webkit-mask-image: radial-gradient(circle at top right, #000, transparent 70%);
  mask-image: radial-gradient(circle at top right, #000, transparent 70%); }
.fd-compare-card h3 { font-size: clamp(1.45rem,2.6vw,2rem); line-height: 1.12; position: relative; }
.fd-compare-card .fd-checklist { display: inline-flex; text-align: left; margin-inline: auto; position: relative; }
.fd-compare-card--ftc { background: var(--glass-bg-strong); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-border-strong); --cstripe: #5a8ad0; }
.fd-compare-card--onsite { background: linear-gradient(160deg, rgba(191,33,76,.85), rgba(191,33,76,.55) 60%, rgba(191,33,76,.4)); border: 1px solid rgba(255,255,255,.18); --cstripe: #ffffff; }

/* --- News: LinkedIn-Section mit iPhone-Mockup + Parallax (item 19) --- */
.fd-linkedin { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem,8vw,6.5rem) 0; }
.fd-linkedin-wrap { position: relative; z-index: 1; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.fd-linkedin-sub { font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 300; color: #fff; margin-top: .3rem; }
.fd-linkedin-media { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: clamp(340px,42vw,560px); overflow: hidden; }
.fd-linkedin-phone { width: clamp(220px,80%,360px); height: auto; border-radius: 34px; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); will-change: transform; }
@media (max-width: 900px) {
  .fd-linkedin-wrap { grid-template-columns: 1fr; }
  .fd-linkedin-media { order: -1; min-height: auto; }
  .fd-linkedin-phone { width: clamp(200px,55%,300px); }
}
.fd-profile-av--img { overflow: hidden; }
.fd-profile-av--img img { width: 100%; height: 100%; object-fit: cover; }
.fd-profile-av--logo { background: rgba(255,255,255,.06); }
.fd-profile-av--logo img { width: 64%; height: 64%; object-fit: contain; margin: auto; }

/* --- Kontakt: Boxen links neben Formular (item 22) --- */
.fd-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.fd-contact-col { display: flex; flex-direction: column; gap: 1rem; }
.fd-contact-box { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: 18px; padding: clamp(1.2rem,2.4vw,1.7rem); }
.fd-contact-box h3 { font-size: 1.05rem; font-weight: 600; color: #fff; }
.fd-contact-box p { margin-top: .3rem; color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.5; }
.fd-contact-box .fd-placeholder { color: var(--brand-metal); font-style: italic; }
.fd-contact-box .fd-contact-link { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); transition: color .2s, border-color .2s; }
.fd-contact-box .fd-contact-link:hover { color: var(--brand-red-on-dark); border-color: var(--brand-red-on-dark); }
.fd-contact-box address p { margin-top: .3rem; }
.fd-contact-form .fd-section-lead { margin-top: 0; }
@media (max-width: 860px) { .fd-contact-grid { grid-template-columns: 1fr; } }

/* --- Kundenportal: 3 Anleitungs-Videos (item 24) --- */
.fd-portal-videos { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,1.75rem); margin-top: clamp(1.5rem,3vw,2.5rem); }
.fd-pvid { margin: 0; }
.fd-pvid-el { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; background: #0A1E3D; border: 1px solid rgba(255,255,255,.1); display: block; }
.fd-pvid figcaption { margin-top: .8rem; font-size: .95rem; color: rgba(255,255,255,.78); font-weight: 500; }
@media (max-width: 860px) { .fd-portal-videos { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }

/* --- Produktion: Zertifizierungs-Design-Karten (item 27) --- */
.fd-certcards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,1.75rem); margin-top: clamp(1.5rem,3vw,2.2rem); }
.fd-certcard { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.6rem,3vw,2.2rem); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.035); }
.fd-certcard-tag { font-family: ui-monospace, monospace; font-weight: 800; font-size: clamp(2rem,4.5vw,3.2rem); line-height: 1; letter-spacing: .02em; color: #fff; }
.fd-certcard h3 { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; }
@media (max-width: 760px) { .fd-certcards { grid-template-columns: 1fr; } }

/* --- Rechtsseiten (Impressum/Datenschutz, item 29) --- */
/* Schriftgröße erhöht (Feedbucket 802247/801237): Rechtstexte besser lesbar */
.fd-legal { max-width: 60rem; color: rgba(255,255,255,.8); line-height: 1.75; font-size: 1.08rem; }
.fd-legal h3 { margin-top: 2rem; font-size: 1.35rem; font-weight: 600; color: #fff; }
.fd-legal p { margin-top: .6rem; }
.fd-legal a { color: var(--brand-red-on-dark); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.fd-legal h4 { margin-top: 1.4rem; font-size: 1.14rem; font-weight: 600; color: #fff; }
.fd-legal ul, .fd-legal ol { margin-top: .6rem; padding-left: 1.4rem; list-style: disc; }
.fd-legal ol { list-style: decimal; }
.fd-legal li { margin-top: .3rem; }
.fd-legal strong { color: #fff; font-weight: 600; }

.fd-ph { color: var(--brand-metal); font-style: italic; }
.fd-legal-note { max-width: 60rem; margin-bottom: 2rem; border: 1px solid rgba(191,33,76,.4); background: rgba(191,33,76,.08); border-radius: 14px; padding: 1.1rem 1.3rem; color: rgba(255,255,255,.85); line-height: 1.6; }
.fd-legal-note strong { color: #fff; }
.fd-legal-note .fd-ph { color: rgba(255,255,255,.7); }

/* --- Datei hochladen: Split (Formular-Card + „Was danach passiert") — Konzept A --- */
.fd-upl-split { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.fd-upl-card { background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: 24px; padding: clamp(1.6rem,3vw,2.6rem); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.fd-upl-card h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 1.4rem; }
.fd-upl-dz { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; border: 1.5px dashed rgba(255,255,255,.24); border-radius: 18px; padding: clamp(2rem,4vw,3rem); cursor: pointer; transition: border-color .3s, background .3s; }
.fd-upl-dz:hover { border-color: rgba(191,33,76,.55); background: rgba(255,255,255,.03); }
.fd-upl-dz-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; margin-bottom: .2rem; }
.fd-upl-dz-icon svg { stroke: #fff; }
.fd-upl-dz-meta { font-size: .9rem; color: rgba(255,255,255,.7); }
.fd-upl-after { border-radius: 20px; padding: clamp(1.5rem,2.6vw,2.1rem); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fd-upl-after h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin-bottom: 1.3rem; }
.fd-upl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.fd-upl-list li { display: flex; gap: .95rem; align-items: flex-start; }
.fd-upl-num { flex: 0 0 auto; font-family: 'Outfit'; font-weight: 800; font-size: 1.35rem; line-height: 1.2; color: #fff; min-width: 2ch; }
.fd-upl-list p { color: rgba(255,255,255,.74); line-height: 1.55; font-size: .98rem; margin: 0; }
.fd-upl-note { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: .92rem; line-height: 1.55; }
@media (max-width: 900px) { .fd-upl-split { grid-template-columns: 1fr; } }

/* --- Zentrierte Video-Section (letzte Section produkte): gleichmäßig dunkles Overlay für lesbaren zentrierten Text --- */
.fd-vs--center .fd-vs-scrim { background:
  radial-gradient(ellipse 120% 100% at 50% 45%, rgba(10,30,61,.78), rgba(0,11,28,.93) 82%),
  linear-gradient(180deg, rgba(0,11,28,.6), transparent 30%, transparent 70%, rgba(0,11,28,.75)); }
/* 4 Icon-Feature-Boxen horizontal */
.fd-featrow { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vw,2.8rem); text-align: left; }
.fd-feat { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.3rem,2.4vw,1.8rem); border-radius: 18px; background: linear-gradient(160deg,#0a2c5e,#061d3a); border: 1px solid rgba(255,255,255,.10); backdrop-filter: none; -webkit-backdrop-filter: none; }
.fd-feat p { color: rgba(255,255,255,.82); line-height: 1.5; font-size: .96rem; margin: 0; }
@media (max-width: 860px) { .fd-featrow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fd-featrow { grid-template-columns: 1fr; } }

/* =========================================================
   VIDEO-MODAL (Werk-in-Aktion-Popup, analog warum-formeta)
   ========================================================= */
#video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(1rem,4vw,3rem); }
#video-modal.open { display: flex; }
#video-modal .vm-scrim { position: absolute; inset: 0; background: rgba(0,8,20,.86); backdrop-filter: blur(6px); animation: vm-fade .25s ease; }
#video-modal .vm-dialog { position: relative; z-index: 1; width: 100%; max-width: 1100px; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden;
  background: #000; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); animation: vm-pop .3s cubic-bezier(.2,.8,.2,1); }
#video-modal .vm-dialog video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
#video-modal .vm-close { position: absolute; top: .7rem; right: .7rem; transform: none; z-index: 3; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; background: var(--brand-red); color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
#video-modal .vm-close:hover { background: var(--brand-red-bright); }
@keyframes vm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #video-modal .vm-scrim, #video-modal .vm-dialog { animation: none; } }

/* =========================================================
   KARRIERE — Fliesstext, Stellen-Listing, Bewerbungs-Block
   ========================================================= */
/* Zentrierter Abschnitt (z.B. Initiativbewerbung) — Kopf, Body und CTAs mittig.
   STANDARD: Body-Text läuft NIE breiter als die Überschrift → schmale, zentrierte Body-Spalte (44rem);
   die Headline behält ihre eigene (breitere) max-width. Gilt für ALLE Body-Absätze inkl. uncapped <p>. */
.fd-section--center .fd-head { text-align: center; }
.fd-section--center .fd-section-title { margin-inline: auto; }
.fd-section--center .fd-wrap > p,
.fd-section--center .fd-wrap > .fd-richtext,
.fd-section--center .fd-section-lead { text-align: center; margin-inline: auto; max-width: 44rem; }
.fd-section--center .reveal[style*="display:flex"] { justify-content: center; }

/* Fliesstext-Block (mehrere Absaetze, links, ruhig) */
.fd-richtext { max-width: 60rem; color: rgba(255,255,255,.78); }
.fd-richtext p { margin-top: 1rem; line-height: 1.72; font-size: 1.06rem; }
.fd-richtext p:first-child { margin-top: 0; }
.fd-richtext a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-red); }
.fd-richtext a:hover { text-decoration-color: #fff; }

/* Stellen-Intro: Fliesstext links + Eckdaten-Card rechts (strukturiert statt loser Badges) */
.fd-jobintro { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem,4.5vw,3.75rem); align-items: start; }
.fd-jobintro .fd-richtext { max-width: 42rem; }
.fd-jobcard { background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: 22px; padding: clamp(1.6rem,2.6vw,2.15rem); }
.fd-jobcard-h { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-metal); margin-bottom: 1.25rem; }
.fd-jobfacts { display: flex; flex-direction: column; gap: 1.15rem; margin-bottom: 1.7rem; }
.fd-jobfact { display: flex; align-items: flex-start; gap: .85rem; }
.fd-jobfact .fd-icon1 { width: 1.75rem; height: 1.75rem; }
.fd-jobfact-label { display: block; font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: .1rem; }
.fd-jobfact-value { display: block; font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.25; }
.fd-jobcard .btn { display: flex; width: 100%; justify-content: center; }
@media (max-width: 860px) { .fd-jobintro { grid-template-columns: 1fr; gap: 2.25rem; } .fd-jobintro .fd-richtext { max-width: none; } }

/* Meta-Badges (Pensum / Bereich / Ort) — neutrale Tags, kein Rot, kein Eyebrow */
.fd-job-meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.fd-job-badge { font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,.82);
  padding: .34rem .8rem; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); white-space: nowrap; }

/* Stellen-Listing */
.fd-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2.6vw,1.9rem); margin-top: clamp(1.75rem,3vw,2.6rem); }
@media (max-width: 880px) { .fd-jobs { grid-template-columns: 1fr; } }
.fd-job { position: relative; display: flex; flex-direction: column; gap: 1rem; border-radius: 22px; overflow: hidden;
  padding: clamp(1.7rem,2.8vw,2.4rem); background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s ease, background .5s ease, box-shadow .5s ease; }
.fd-job:hover { transform: translateY(-6px); border-color: var(--glass-border-strong); background: var(--glass-bg-strong);
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.7); }
/* Akzent als wachsender Titel-Marker (Brand-Sprache, kein Side-Stripe) */
.fd-job-title { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #fff;
  padding-bottom: .5rem; background-image: linear-gradient(var(--brand-red), var(--brand-red)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 2.4rem 3px; transition: background-size .5s cubic-bezier(.16,1,.3,1); }
.fd-job:hover .fd-job-title { background-size: 4.6rem 3px; }
@media (prefers-reduced-motion: reduce) { .fd-job, .fd-job-title { transition: none; } .fd-job:hover { transform: none; } }
.fd-job-teaser { color: rgba(255,255,255,.7); line-height: 1.6; font-size: 1rem; }
.fd-job-deadline { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: rgba(255,255,255,.82); margin-top: -.2rem; }
.fd-job-deadline .fd-icon1 { width: 1.4rem; height: 1.4rem; }
.fd-job-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; padding-top: .4rem; }

/* Bewerbungs-Block — 2-spaltig: Pitch links (Überschrift/Text/Frist), Kontakt-Card rechts */
.fd-applygrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem,4.5vw,3.75rem); align-items: start; }
/* Pitch-Text auf lesbare Breite begrenzen (Section bleibt full-width, Text bündig links) */
.fd-apply-pitch { max-width: 42rem; }
.fd-apply-pitch .fd-section-lead, .fd-apply-pitch .fd-apply-deadline { max-width: none; }
@media (max-width: 860px) { .fd-applygrid { grid-template-columns: 1fr; gap: 2.25rem; } .fd-apply-pitch { max-width: none; } }
.fd-apply-deadline { display: flex; align-items: flex-start; gap: .7rem; max-width: 52rem; margin-top: 1.4rem;
  color: #fff; font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.fd-apply-deadline .fd-icon1 { width: 1.7rem; height: 1.7rem; margin-top: .1rem; }
.fd-apply-card { display: flex; flex-direction: column; gap: 1.6rem;
  padding: clamp(1.6rem,2.8vw,2.15rem); border-radius: 22px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); }
.fd-apply-person { display: flex; align-items: center; gap: 1rem; }
.fd-apply-person .fd-icon1 { width: 3rem; height: 3rem; }
.fd-apply-label { display: block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-metal); }
.fd-apply-person h3 { font-size: clamp(1.3rem,2.2vw,1.75rem); font-weight: 600; color: #fff; line-height: 1.1; margin-top: .15rem; }
.fd-apply-lines { display: flex; flex-direction: column; gap: .55rem; }
.fd-apply-line { display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.45; transition: color .2s ease; }
.fd-apply-line .fd-icon1 { width: 1.55rem; height: 1.55rem; }
a.fd-apply-line:hover { color: #fff; }
.fd-apply-line--static { color: rgba(255,255,255,.72); align-items: flex-start; }
.fd-apply-line--static .fd-icon1 { margin-top: .1rem; }
.fd-apply-privacy { max-width: 62rem; margin-top: clamp(1.5rem,2.6vw,2.1rem); font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.5); }
.fd-apply-privacy a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
.fd-apply-privacy a:hover { color: #fff; }

/* ---------- warum.css ---------- */
/* =========================================================
   Formeta Dental – Unterseite „Warum Formeta DENTAL" (v0.4.1)
   Baut auf style.css/glow.css auf (Brand-Tokens, .glass, .reveal,
   .headline-accent, .btn). Regeln v0.4.1:
   - keine Kicker/Eyebrows über Headings
   - Haupt-Headings nutzen .headline-accent (Marker wischt beim Scroll)
   - breite Headings (keine engen max-width)
   - kein Hell-/Korallrot (#FF5E7A) — nur Brand-Rot
   - Section-Hintergründe öfter mit subtilen Mesh-Gradients (.wf-mesh)
   ========================================================= */

section[id] { scroll-margin-top: 5.5rem; }

.wf-wrap { position: relative; z-index: 1; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

/* ---- gemeinsame Kleinteile ---- */
.wf-section-title { font-size: clamp(2.1rem, 4.6vw, 3.8rem); max-width: 1050px; }
.wf-section-lead { margin-top: 1.4rem; max-width: 60rem; color: rgba(255,255,255,.68); font-size: 1.08rem; line-height: 1.65; }

/* Marker-Highlight (aus den Texten: <span class="mark">) */
.mark {
  background-image: linear-gradient(90deg, rgba(191,33,76,0), var(--brand-red));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.14em;
  padding: 0 .04em .08em; color: #fff;
}

/* ---- Scroll-Text-Reveal (dunkel → hell, Wort für Wort) ---- */
.wf-word { color: rgba(255,255,255,.16); transition: color .5s cubic-bezier(.2,.8,.2,1); }
.wf-word.lit { color: #fff; }
.wf-word.wf-hl-word.lit { color: var(--brand-red); }
@media (prefers-reduced-motion: reduce) {
  .wf-word { color: #fff; }
  .wf-word.wf-hl-word { color: var(--brand-red); }
}

/* Textlink mit Pfeil */
.wf-textlink {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem;
  color: #fff; font-weight: 600; transition: color .25s, gap .25s;
}
.wf-textlink svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wf-textlink:hover { color: var(--brand-red-on-dark); gap: .85rem; }
.wf-textlink:hover svg { transform: translateX(3px); }
.wf-textlink--sm { font-size: .9rem; margin-top: 1rem; }

/* ---- Section-Hintergründe mit Variation (v0.4.5) — KEIN Rot. -----------
   Tonale Rhythmik (heller/tiefer Navy) + dezente Textur + weiches blaues
   Ambient-Glow. Pro Section eine andere Variante für Dynamik. -------------- */
.wf-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wf-mesh::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, #0A1E3D 0%, #001E43 60%, #000B1C 100%); }

/* v0.4.7: stark reduziert — nur noch sehr feine Tonwert-Nuancen, KEINE Texturen, KEIN Glow. */
.wf-mesh--soft::before { background: linear-gradient(165deg, #001f46 0%, #001E43 55%, #0A1E3D 100%); }
.wf-mesh--deep::before { background: linear-gradient(180deg, #000B1C 0%, #0A1E3D 80%, #000B1C 100%); }
.wf-mesh--glow::before, .wf-mesh--grid::before, .wf-mesh--lines::before { background: linear-gradient(160deg, #0A1E3D 0%, #001E43 60%, #000B1C 100%); }
/* Leistungs-Farbwelten: FTC = Blau, Onsite = Rot (Startseiten-Logik) */
.wf-mesh--ftc::before { background: radial-gradient(ellipse 95% 75% at 50% 4%, rgba(3,64,135,.55), transparent 60%), linear-gradient(160deg, #00163a 0%, #001E43 58%, #000B1C 100%); }
.wf-mesh--onsite::before { background: radial-gradient(ellipse 95% 75% at 50% 4%, rgba(191,33,76,.30), transparent 60%), linear-gradient(160deg, #14071a 0%, #001226 55%, #000B1C 100%); }

/* =========================================================
   1 · HERO
   ========================================================= */
.wf-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--brand-blue-dark); }
.wf-hero-media { position: absolute; inset: 0; z-index: 0; }
.wf-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scale(1.06); animation: wf-kenburns 18s ease-out forwards; }
@keyframes wf-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.wf-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0,15,36,.94) 0%, rgba(10,30,61,.82) 38%, rgba(10,30,61,.25) 70%, transparent 100%),
    linear-gradient(0deg, rgba(0,11,28,.85), transparent 30%); }
.wf-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 98rem; margin-inline: auto; padding: 7rem clamp(1.25rem,4vw,3rem) 6rem; }
.wf-hero-title { font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: 1.0; max-width: 20ch; }
.wf-hero-sub { margin-top: 1.8rem; max-width: 46rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.6; color: rgba(255,255,255,.8); }
.wf-hero-cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.wf-scrollcue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.5); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; pointer-events: none; }

/* =========================================================
   2 · MANIFEST
   ========================================================= */
/* v0.4.4: ruhig, linksbündig, viel Raum — kein Marquee mehr. */
.wf-manifest { position: relative; padding: clamp(6rem,12vw,10rem) 0; overflow: hidden; }
.wf-manifest-head { font-family: 'Outfit'; font-weight: 300; letter-spacing: -.015em; line-height: 1.08;
  font-size: clamp(2.1rem, 4.4vw, 3.7rem); margin: 0; max-width: none; }
.wf-manifest-head .headline-accent { white-space: nowrap; }
.wf-manifest-lead { margin-top: 1.8rem; max-width: 50rem; font-size: 1.18rem; line-height: 1.65; color: rgba(255,255,255,.7); font-weight: 300; }
.wf-manifest-lead strong { color: #fff; font-weight: 600; }
.wf-manifest-close { margin-top: clamp(2.5rem,5vw,4rem); padding-top: clamp(1.8rem,3.5vw,2.4rem); border-top: 1px solid rgba(255,255,255,.12);
  max-width: 46rem; font-family: 'Outfit'; font-weight: 300; font-size: clamp(1.35rem,2.6vw,2rem); line-height: 1.3; color: #fff; }

/* =========================================================
   3 · ÜBER UNS (Editorial-Split)
   ========================================================= */
.wf-split { position: relative; padding: clamp(4rem,8vw,7rem) 0; display: grid; gap: clamp(2rem,5vw,4.5rem);
  grid-template-columns: 1fr 1fr; align-items: center; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.wf-split-media { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/5; }
.wf-split-media-inner { position: absolute; inset: -8% 0; will-change: transform; }
.wf-split-media-inner img { width: 100%; height: 100%; object-fit: cover; }
.wf-split-badge { position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 2;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(10,30,61,.6); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px);
  padding: .5rem .9rem; border-radius: 999px; }
.wf-split-title { font-size: clamp(2.1rem, 4.4vw, 3.6rem); max-width: 1050px; }
.wf-split-text { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1.05rem; color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; }
.wf-split-text strong { color: #fff; font-weight: 600; }
.wf-quote { position: relative; margin: 2rem 0 0; padding: 1.4rem 0 0 2.4rem; font-family: 'Outfit'; font-weight: 300; font-style: normal; font-size: 1.3rem; line-height: 1.4; color: #fff; border-top: 1px solid rgba(255,255,255,.1); }
.wf-quote-mark { position: absolute; left: -.1rem; top: .6rem; font-size: 3rem; line-height: 1; color: rgba(191,33,76,.7); font-weight: 800; }
.wf-quote cite { display: block; margin-top: .9rem; font-size: .9rem; font-style: normal; color: var(--brand-metal); }

/* v0.7.0: Über-uns-Bild bricht full-bleed zum Viewport-Rand aus (analog .fd-split--bleed) */
.wf-split--bleed { max-width: none; margin-inline: 0; padding-inline: 0; align-items: stretch; gap: clamp(2rem,5vw,5rem); }
.wf-split--bleed .wf-split-media { aspect-ratio: auto; align-self: stretch; min-height: clamp(440px,56vw,720px); border-radius: 0 28px 28px 0; }
.wf-split--bleed .wf-split-body { max-width: 760px; padding-right: clamp(1.5rem,6vw,5rem); padding-block: clamp(1rem,3vw,2.5rem); }
@media (max-width: 900px) {
  /* Mobil: Bild oben bündig an den Section-Rand andocken (kein Top-Padding-Streifen über dem Bild). */
  .wf-split--bleed { grid-template-columns: 1fr; padding-top: 0; }
  .wf-split--bleed .wf-split-media { min-height: 62vw; border-radius: 0 0 22px 22px; }
  .wf-split--bleed .wf-split-body { padding-inline: clamp(1.25rem,4vw,3rem); }
}

/* =========================================================
   4 · VORTEILE (Sticky-Media-Scroll, Nummern statt Icons)
   ========================================================= */
.wf-adv { position: relative; padding: clamp(4rem,8vw,7rem) 0; }
.wf-adv-head { margin-bottom: clamp(2.5rem,5vw,4rem); }
.wf-adv-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.wf-adv-media { position: sticky; top: 6rem; height: 76vh; min-height: 460px; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.wf-adv-media-stack { position: absolute; inset: 0; }
.wf-adv-media-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1); }
.wf-adv-media-stack img.is-active { opacity: 1; transform: scale(1); }
/* v0.7.0: kein Pill/Chip mehr — schlichte Zahl auf dem Bild */
.wf-adv-counter { display: none; }
.wf-adv-counter b { color: #fff; font-weight: 700; }
.wf-adv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wf-adv-item { display: flex; gap: 1.4rem; padding: clamp(2.2rem,5vw,3.4rem) 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: .42; transition: opacity .4s ease; }
.wf-adv-item:first-child { padding-top: 0; }
.wf-adv-item.is-active { opacity: 1; }
.wf-adv-num { flex: 0 0 auto; min-width: 2.4ch; font-family: 'Outfit'; font-weight: 300; font-size: clamp(2rem,3.2vw,3rem); line-height: 1; letter-spacing: -.02em; color: #fff; }
.wf-adv-item h3 { font-size: clamp(1.3rem,2.2vw,1.75rem); font-weight: 600; line-height: 1.2; }
.wf-adv-item p { margin-top: .7rem; color: rgba(255,255,255,.68); line-height: 1.6; }
.wf-adv-cta { margin-top: clamp(2.5rem,5vw,3.5rem); }

/* =========================================================
   5 · 72-STUNDEN-BAND (Video-Hintergrund)
   ========================================================= */
.wf-band { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--brand-blue-dark); }
/* text-freier Video-Divider (Parallax-Visual ohne Overlay-Text). MUSS nach der
   .wf-band-Basisregel stehen (gleiche Spezifität; Original: warum.css vor pages.css). */
.wf-band--bare { min-height: 62svh; }
@media (max-width: 700px){ .wf-band--bare { min-height: 46svh; } }
.wf-band-media { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.wf-band-media img, .wf-band-media video { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.wf-band-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,11,28,.85), rgba(10,30,61,.5) 60%, rgba(0,11,28,.8)); }
.wf-band-inner { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.5rem,5vw,4rem); padding-block: clamp(3rem,7vw,5rem); }
.wf-band-num { font-family: 'Outfit'; font-weight: 800; line-height: .85; letter-spacing: -.04em; display: flex; align-items: flex-start; color: #fff; }
.wf-band-num span { font-size: clamp(6rem, 18vw, 15rem); color: #fff; }
.wf-band-num em { font-style: normal; font-size: clamp(2.5rem, 6vw, 5rem); color: #fff; margin-top: .3em; }
.wf-band-body h2 { font-size: clamp(1.7rem,3.6vw,2.9rem); }
.wf-band-body p { margin-top: 1rem; max-width: 40rem; color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.6; }

/* =========================================================
   6 · CASE STUDIES (übersichtliches Karten-Grid)
   ========================================================= */
/* v0.4.4: gestapelte Editorial-Blöcke, viel Raum, EINE Hero-Kennzahl. */
.wf-cases { position: relative; padding: clamp(6rem,12vw,10rem) 0; overflow: hidden; }
.wf-cases-head { margin-bottom: clamp(3.5rem,7vw,6rem); }
.wf-case { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.wf-case + .wf-case { margin-top: clamp(4rem,9vw,8rem); }
.wf-case--rev { grid-template-columns: 5fr 7fr; }
.wf-case--rev .wf-case-media { order: 2; }
.wf-case-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16/10; border: 1px solid rgba(255,255,255,.1); }
.wf-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.wf-case:hover .wf-case-media img { transform: scale(1.03); }
.wf-case-tag { position: absolute; top: 1rem; left: 1rem; font-family: ui-monospace,monospace; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(0,11,28,.6); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); padding: .4rem .8rem; border-radius: 999px; }
.wf-case-body { max-width: 34rem; }
.wf-case-body h3 { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 600; line-height: 1.15; }
.wf-case-ctx { margin-top: 1rem; color: rgba(255,255,255,.62); line-height: 1.7; }
.wf-case-metric { margin-top: clamp(1.6rem,3vw,2.2rem); display: flex; align-items: baseline; gap: 1rem; }
.wf-case-metric b { font-family: 'Outfit'; font-weight: 300; font-size: clamp(3rem,6vw,5rem); line-height: .9; letter-spacing: -.03em; color: #fff; }
.wf-case-metric span { font-size: .95rem; color: rgba(255,255,255,.6); line-height: 1.3; max-width: 14rem; }
.wf-case-sub { margin-top: 1.2rem; display: flex; gap: 2rem; flex-wrap: wrap; }
.wf-case-sub div { font-size: .85rem; color: rgba(255,255,255,.55); }
.wf-case-sub b { display: block; font-weight: 600; color: #fff; font-size: 1.05rem; margin-bottom: .1rem; }
.wf-case-quote { margin-top: clamp(1.8rem,3.5vw,2.4rem); padding-left: 1.1rem; border-left: 2px solid var(--brand-red); font-family: 'Outfit'; font-weight: 300; font-size: 1.1rem; line-height: 1.45; color: #fff; }
.wf-case-quote cite { display: block; margin-top: .6rem; font-size: .82rem; font-style: normal; color: var(--brand-metal); }
.wf-cases-foot { margin-top: clamp(3.5rem,7vw,6rem); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.wf-cases-foot p { color: rgba(255,255,255,.72); font-size: 1.45rem; line-height: 1.6; max-width: 46rem; margin: 0; text-align: center; }

/* =========================================================
   7 · QUALITÄT – Full-Height Scroll-Stepper
   ========================================================= */
.wf-process { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--brand-blue-dark); }
.wf-process-bg { position: absolute; inset: 0; z-index: 0; }
.wf-process-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.wf-process-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(10,30,61,.5), rgba(0,11,28,.82) 85%); }
.wf-process-inner { position: relative; z-index: 2; width: 100%; max-width: 98rem; margin-inline: auto; padding: clamp(3rem,6vw,5rem) clamp(1.25rem,4vw,3rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.wf-process-intro h2 { font-size: clamp(2.1rem,4.6vw,3.8rem); max-width: 1050px; }
.wf-process-intro p { margin-top: 1.2rem; max-width: 36rem; color: rgba(255,255,255,.68); line-height: 1.65; }
.wf-process-intro p.wf-process-lead { margin-top: 1.5rem; color: #fff; font-weight: 600; max-width: none; }
.wf-process-progress { margin-top: 2rem; height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; max-width: 22rem; }
.wf-process-progress span { display: block; height: 100%; width: 25%; background: var(--brand-red); transform-origin: left; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.wf-process-stage { position: relative; min-height: 18rem; }
.wf-process-num { font-family: 'Outfit'; font-weight: 800; font-size: clamp(5rem,12vw,11rem); line-height: 1; letter-spacing: -.04em; color: rgba(255,255,255,.10); }
.wf-process-steps { position: relative; margin-top: -1rem; }
.wf-process-step { position: absolute; inset: 0; opacity: 0; transform: translateY(24px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.wf-process-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.wf-process-step h3 { font-size: clamp(1.5rem,2.6vw,2.1rem); font-weight: 600; }
.wf-process-step p { margin-top: .7rem; color: rgba(255,255,255,.72); line-height: 1.6; max-width: 30rem; }
.wf-process-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-red-on-dark); }
/* Statischer Fallback (Reduced-Motion / kein GSAP): alle Schritte sichtbar */
.wf-process.is-static { min-height: auto; }
.wf-process.is-static .wf-process-stage { min-height: 0; }
.wf-process.is-static .wf-process-step { position: relative; opacity: 1; transform: none; }
.wf-process.is-static .wf-process-step + .wf-process-step { margin-top: 1.6rem; }
.wf-process.is-static .wf-process-num, .wf-process.is-static .wf-process-progress { display: none; }

/* Arbeitssicherheit + Zertifikate (normale Section nach dem Stepper) */
.wf-safety { position: relative; padding: clamp(3.5rem,7vw,5.5rem) 0; }
/* v0.7.0: modernisiert + an die Card-/Icon-Sprache der übrigen Sections angeglichen */
.wf-safety-inner { position: relative; z-index: 1; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.wf-safety-head { max-width: 56rem; margin-inline: auto; text-align: center; }
.wf-safety-head h3 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
.wf-safety-head p { margin: 1.1rem auto 0; max-width: 50rem; color: rgba(255,255,255,.7); line-height: 1.7; font-size: 1.05rem; }
.wf-safety-head strong { color: #fff; }
.wf-certs { list-style: none; margin: clamp(2rem,4vw,3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.wf-cert { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.4rem,2.5vw,1.9rem); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.035); }
.wf-cert-ico { width: 2.6rem; height: 2.6rem; color: #fff; }
.wf-cert-ico svg { width: 100%; height: 100%; display: block; }
.wf-cert-tag { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: #fff; }
.wf-cert h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: #fff; margin: 0; }
.wf-safety-cta { margin-top: clamp(2rem,4vw,3rem); display: flex; justify-content: center; }

/* =========================================================
   8 · EINWÄNDE (Accordion)
   ========================================================= */
/* v0.4.4: zweispaltig — links sticky Headline, rechts ruhiges Akkordeon. */
.wf-obj { position: relative; padding: clamp(6rem,12vw,10rem) 0; overflow: hidden; }
.wf-obj-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem,6vw,6rem); align-items: start; }
.wf-obj-aside { align-self: start; }
.wf-obj-aside .wf-section-lead { margin-top: 1.2rem; max-width: 30rem; }
.wf-acc { position: relative; z-index: 1; }
.wf-acc-item { border-top: 1px solid rgba(255,255,255,.12); }
.wf-acc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
/* erstes Item oben bündig zur Heading-Spalte (kein Top-Versatz) */
.wf-acc-item:first-child { border-top: 0; }
.wf-acc-item:first-child .wf-acc-q { padding-top: 0; }
.wf-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.9rem 0; background: none; border: 0; cursor: pointer; text-align: left; color: #fff; font-family: inherit; font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 500; line-height: 1.3; transition: color .25s; }
.wf-acc-q:hover { color: var(--brand-red-on-dark); }
.wf-acc-q i { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
.wf-acc-q i::before, .wf-acc-q i::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--brand-red-on-dark); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wf-acc-q i::before { width: 14px; height: 2px; }
.wf-acc-q i::after { width: 2px; height: 14px; }
.wf-acc-item.open .wf-acc-q i::after { transform: translate(-50%,-50%) scaleY(0); }
.wf-acc-a { overflow: hidden; max-height: 0; transition: max-height .45s cubic-bezier(.2,.8,.2,1); }
.wf-acc-a > div { padding: 0 0 1.6rem; max-width: 54rem; color: rgba(255,255,255,.7); line-height: 1.7; }
.wf-acc-item.open .wf-acc-a { max-height: 520px; }

/* =========================================================
   9 · TEAM
   ========================================================= */
/* v0.4.4: ruhige Anordnung — großes Feature + CEO-Karte + Support-Foto. */
.wf-team { position: relative; padding: clamp(6rem,12vw,10rem) 0 0; overflow: hidden; }
.wf-team-head { margin-bottom: clamp(3rem,6vw,5rem); }
.wf-team-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem,3vw,2rem); }
.wf-team-feature { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); aspect-ratio: 4/3; }
.wf-team-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.wf-team-feature:hover img { transform: scale(1.03); }
.wf-team-side { display: grid; grid-template-rows: 1.1fr .9fr; gap: clamp(1.5rem,3vw,2rem); }
.wf-team-ceo { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.wf-team-ceo img { width: 100%; height: 100%; object-fit: cover; }
.wf-team-ceo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.3rem 1.2rem; background: linear-gradient(0deg, rgba(0,11,28,.92), transparent); }
.wf-team-ceo figcaption b { display: block; font-size: 1.05rem; font-weight: 600; color: #fff; }
.wf-team-ceo figcaption span { font-size: .82rem; color: rgba(255,255,255,.6); }
.wf-team-support { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.wf-team-support img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.wf-team-support:hover img { transform: scale(1.03); }
/* Team-Breakout-Slider (horizontal, bricht nach rechts aus dem Raster) */
.wf-team-slidewrap { --gutter: clamp(1.25rem, 4vw, 3rem); --edge: max(var(--gutter), calc((100% - 98rem) / 2 + var(--gutter))); position: relative; z-index: 1; }
.wf-team-slider { display: flex; gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-inline: var(--edge) var(--gutter); scroll-padding-inline-start: var(--edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.wf-team-slider::-webkit-scrollbar { display: none; }
.wf-team-slider.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.wf-ts-card { position: relative; flex: 0 0 auto; height: clamp(360px, 64vw, 520px); aspect-ratio: 4/5; margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); scroll-snap-align: start; background: #0A1E3D; }
/* Basis-Zoom über die eigenständige `scale`-Property (nicht `transform`): so bleibt
   der Personen-Zoom im Ruhezustand stabil, während die Hover-Animation weiter über
   `transform` läuft — beide Properties überlagern sich sauber. */
.wf-ts-card img { --ts-base: 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; scale: var(--ts-base); transform-origin: center 28%; transition: transform .7s cubic-bezier(.2,.8,.2,1); -webkit-user-drag: none; user-select: none; pointer-events: none; }
.wf-ts-card:hover img { transform: scale(1.03); }
/* Personen-Skalierung angleichen (Kundenwunsch Christina 06.07.): zu weit entfernt
   aufgenommene Personen näher heranzoomen + Kopf höher framen, damit alle Köpfe im
   Kartenrahmen ähnlich groß/hoch sitzen. */
.wf-ts-card img.wf-ts-img--irene { --ts-base: 1.6; object-position: center 34%; }
.wf-ts-card img.wf-ts-img--roethig { --ts-base: 1.55; object-position: center 14%; }
.wf-ts-card img.wf-ts-img--soetje { --ts-base: 1.26; object-position: center 14%; }
.wf-ts-card img.wf-ts-img--klarmeyer { --ts-base: 2.0; object-position: 76% 22%; }
.wf-ts-card--wide { aspect-ratio: 3/2; }
.wf-ts-card--wide img { object-position: center; }
.wf-ts-card--ceo { border-color: rgba(191,33,76,.4); }
.wf-ts-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.4rem 1.2rem; background: linear-gradient(0deg, rgba(0,11,28,.94), rgba(0,11,28,.35) 60%, transparent); }
.wf-ts-card figcaption b { display: block; font-size: 1.2rem; font-weight: 600; color: #fff; }
.wf-ts-card figcaption span { font-size: .82rem; color: rgba(255,255,255,.6); }
.wf-team-slider-ctrl { display: flex; gap: .7rem; margin-top: clamp(1.5rem, 3vw, 2.2rem); padding-inline-start: var(--edge); }
.wf-ts-arrow { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; cursor: pointer; transition: background .25s, border-color .25s, transform .25s, opacity .25s; }
.wf-ts-arrow:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.wf-ts-arrow:disabled { opacity: .28; cursor: default; transform: none; }
.wf-team-band { position: relative; margin-top: clamp(3rem,6vw,5rem); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wf-team-band-media { position: absolute; inset: -8% 0; will-change: transform; }
.wf-team-band-media img { width: 100%; height: 100%; object-fit: cover; }
.wf-team-band-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(10,30,61,.55), rgba(0,11,28,.86) 85%); }
.wf-team-band-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; }
.wf-team-band-quote { max-width: 64rem; margin: 0; font-family: 'Outfit'; font-weight: 300; font-size: clamp(1.6rem,3.4vw,2.8rem); line-height: 1.25; color: #fff; }
.wf-team-band-cta { margin-top: clamp(1.8rem,3.5vw,2.6rem); }
.wf-team-play { display: inline-flex; align-items: center; gap: .9rem; padding: .55rem .55rem .55rem 1.4rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff; font-family: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: background .25s, border-color .25s, transform .25s; backdrop-filter: blur(8px); }
.wf-team-play:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.wf-team-play .wf-team-play-ico { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--brand-red); color: #fff; box-shadow: 0 0 0 0 rgba(191,33,76,.55); animation: pulse 2.6s ease-out infinite; }
.wf-video { padding: clamp(3rem,6vw,5rem) clamp(1.25rem,4vw,3rem); }
.wf-video-frame { position: relative; max-width: 64rem; margin-inline: auto; aspect-ratio: 16/9; border-radius: 24px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(3,38,86,.7), rgba(10,30,61,.9)); border: 1px solid rgba(255,255,255,.12); }
.wf-video-ph { position: absolute; bottom: 1.2rem; left: 1.4rem; font-size: .85rem; color: rgba(255,255,255,.5); letter-spacing: .04em; }

/* =========================================================
   10 · FINAL CTA
   ========================================================= */
.wf-finalcta { position: relative; min-height: 70svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; background: var(--brand-blue-dark); }
.wf-finalcta-media { position: absolute; inset: 0; z-index: 0; }
.wf-finalcta-media img { width: 100%; height: 100%; object-fit: cover; }
.wf-finalcta-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(10,30,61,.78), rgba(0,11,28,.94) 80%); }
.wf-finalcta-inner { position: relative; z-index: 2; max-width: 58rem; padding: clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem); }
.wf-finalcta-inner h2 { font-size: clamp(2.6rem,6.2vw,5rem); line-height: 1.04; letter-spacing: -.02em; }
/* v0.7.0: Final-CTA ohne Hintergrundbild — ruhiges Navy + Scrim-Vignette */
.wf-finalcta--plain { background: var(--brand-blue-dark); }
.wf-finalcta-inner p { margin-top: 1.2rem; font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); }
.wf-finalcta-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .wf-case { grid-template-columns: 1fr; }
  .wf-case--rev .wf-case-media { order: 0; }
  .wf-case-body { max-width: none; }
}
@media (max-width: 900px) {
  .wf-split { grid-template-columns: 1fr; }
  .wf-split-media { aspect-ratio: 4/3; }
  .wf-adv-grid { grid-template-columns: 1fr; }
  .wf-adv-media { display: none; }
  .wf-adv-item { opacity: 1; }
  .wf-band-inner { grid-template-columns: 1fr; }
  .wf-process { min-height: auto; }
  .wf-process-inner { grid-template-columns: 1fr; }
  .wf-process-stage { min-height: 0; }
  .wf-process-step { position: relative; opacity: 1; transform: none; }
  .wf-process-step + .wf-process-step { margin-top: 1.6rem; }
  .wf-process-num, .wf-process-progress { display: none; }
  .wf-certs { grid-template-columns: 1fr; }
  .wf-obj-grid { grid-template-columns: 1fr; }
  .wf-obj-aside { position: static; }
  .wf-team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wf-hero-cta .btn, .wf-finalcta-actions .btn { width: 100%; justify-content: center; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .wf-hero-media img { animation: none; transform: none; }
  /* Prozess-Stepper statisch stapeln, damit ohne Scroll/JS alle Schritte sichtbar sind
     (analog .wf-process.is-static und dem Mobile-Reset) */
  .wf-process-step { position: relative; opacity: 1; transform: none; }
  .wf-process-step + .wf-process-step { margin-top: 1.6rem; }
  /* Vorteils-Media-Stack: mindestens das erste (bzw. aktive) Bild statisch zeigen,
     kein Crossfade — die Bilder sind absolut gestapelt, daher nur eines sichtbar */
  .wf-adv-media-stack img { transform: none; }
  .wf-adv-media-stack img:first-child,
  .wf-adv-media-stack img.is-active { opacity: 1; }
}

/* =========================================================
   CASE STUDIES — Redesign v2 (editorial). Ersetzt .wf-case-*
   Hero-Kennzahl als Grafik · Strip mit Trennlinien · Pull-Quote
   ========================================================= */
.cs-case { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.cs-case + .cs-case { margin-top: clamp(4.5rem,9vw,8rem); }
.cs-case--rev .cs-media { order: 2; }
.cs-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid rgba(255,255,255,.1); }
.cs-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cs-case:hover .cs-media img { transform: scale(1.03); }
.cs-body h3 { margin: 0; font-family: 'Outfit'; font-weight: 300; letter-spacing: -.015em; line-height: 1.05; font-size: clamp(1.9rem,3.4vw,2.9rem); }
.cs-ctx { margin-top: 1.1rem; color: rgba(255,255,255,.62); line-height: 1.7; max-width: 33rem; }
.cs-hero { margin-top: clamp(1.8rem,3.5vw,2.6rem); display: flex; align-items: flex-end; gap: 1.2rem; }
.cs-hero-num { font-family: 'Outfit'; font-weight: 200; letter-spacing: -.04em; line-height: .82; color: #fff; font-size: clamp(4.5rem,11vw,8.5rem); }
.cs-hero-num .lt { color: #fff; font-weight: 300; }
.cs-hero-num .unit { color: #fff; font-weight: 400; }
.cs-hero-label { padding-bottom: .7rem; padding-left: .9rem; border-left: 2px solid var(--brand-red); font-size: .95rem; line-height: 1.35; color: rgba(255,255,255,.6); max-width: 12rem; }
.cs-strip { margin-top: 1.8rem; display: flex; flex-wrap: wrap; }
.cs-strip > div { padding: 0 1.5rem; border-left: 1px solid rgba(255,255,255,.14); }
.cs-strip > div:first-child { padding-left: 0; border-left: 0; }
.cs-strip b { display: block; font-family: 'Outfit'; font-weight: 400; font-size: 1.5rem; color: #fff; line-height: 1; letter-spacing: -.01em; }
.cs-strip span { display: block; margin-top: .4rem; font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.3; }
.cs-pq { position: relative; margin-top: clamp(2rem,4vw,2.8rem); padding-top: 1.6rem; padding-left: 2.7rem; border-top: 1px solid rgba(255,255,255,.12); }
.cs-pq p { margin: 0; max-width: 34rem; font-family: 'Outfit'; font-weight: 300; font-size: clamp(1.15rem,1.8vw,1.45rem); line-height: 1.4; color: #fff; }
.cs-pq cite { display: block; margin-top: .8rem; font-size: .82rem; font-style: normal; color: var(--brand-metal); }
.cs-pq::before { content: '„'; position: absolute; top: .7rem; left: 0; font-family: 'Outfit'; font-weight: 800; font-size: 3.4rem; line-height: 1; color: rgba(191,33,76,.4); pointer-events: none; }
@media (max-width: 1000px) {
  .cs-case { grid-template-columns: 1fr; gap: clamp(1.5rem,4vw,2.5rem); }
  .cs-case--rev .cs-media { order: 0; }
  .cs-media { aspect-ratio: 16/11; }
}
@media (max-width: 520px) {
  .cs-strip { gap: 1.2rem; }
  .cs-strip > div { padding: 0; border-left: 0; }
}

/* =========================================================
   VIDEO-MODAL (Team-Popup)
   ========================================================= */
#video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(1rem,4vw,3rem); }
#video-modal.open { display: flex; }
#video-modal .vm-scrim { position: absolute; inset: 0; background: rgba(0,8,20,.86); backdrop-filter: blur(6px); animation: vm-fade .25s ease; }
#video-modal .vm-dialog { position: relative; z-index: 1; width: 100%; max-width: 1100px; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden;
  background: #000; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); animation: vm-pop .3s cubic-bezier(.2,.8,.2,1); }
#video-modal .vm-dialog video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
/* Schließen-Button IMMER innerhalb des Dialogs (vorher per translate nach außen geschoben → bei breitem Dialog/kleinem Viewport ausserhalb des sichtbaren Bereichs). */
#video-modal .vm-close { position: absolute; top: .7rem; right: .7rem; transform: none; z-index: 3; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; background: var(--brand-red); color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
#video-modal .vm-close:hover { background: var(--brand-red-bright); }
@keyframes vm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #video-modal .vm-scrim, #video-modal .vm-dialog { animation: none; } }