/* =========================================================
   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(0,19,43,.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; }
.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(0,19,43,.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; } }

/* ---- 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(0,19,43,.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(0,19,43,.7) 42%, rgba(0,19,43,.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 (Parallax-Visual ohne Overlay-Text) */
.wf-band--bare { min-height: 62svh; }
@media (max-width: 700px){ .wf-band--bare { min-height: 46svh; } }

/* Compare-Karten Farbwelten (Lösungen): FTC = Blau, Onsite = Rot */
.fd-compare-card--ftc { background: linear-gradient(165deg, rgba(3,64,135,.30), rgba(0,19,43,.65)); border-color: rgba(96,150,224,.32); }
.fd-compare-card--onsite { background: linear-gradient(165deg, rgba(191,33,76,.22), rgba(0,19,43,.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(0,19,43,.7) 44%, rgba(0,19,43,.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(0,19,43,.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: #00132B; 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) --- */
.fd-legal { max-width: 60rem; color: rgba(255,255,255,.72); line-height: 1.7; }
.fd-legal h3 { margin-top: 2rem; font-size: 1.2rem; 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.02rem; 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(0,19,43,.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; } }