/* ============================================================================
   SD-Link — Produktfinder-Landingpage (/produktfinder)
   ----------------------------------------------------------------------------
   Markenlook der Startseite (Hero navy + Finder-Karte über den Hero gezogen),
   aber eigenständig und CONTAINED (kein Full-Bleed-Hack), gescoped auf
   body.sd-finder-page. Tokens aus sdlink-tokens.css / sdlink-base.css.
   SPEC_SDLINK_CONVERSION_GROWTH_V1 §7 C1. Handoff:
   docs/specs/handoff_produktfinder_landing/.
   ============================================================================ */

/* --- Seiten-Reset: volle Breite, kein Standard-Seitentitel ----------------- */
.sd-finder-page #secondary,
.sd-finder-page .entry-header { display: none; }
.sd-finder-page #primary,
.sd-finder-page .content-area {
  width: 100%; max-width: none; float: none; margin: 0;
}
.sd-finder-page .entry-content { margin-top: 0; }
.sd-finder-page .entry-content > .sd-pf { margin-top: 0; }
/* WooCommerce/Storefront geben dem Content seitliches Padding über .col-full;
   der Hero soll bis an dessen Rand reichen — Standardabstände genügen. */

.sd-pf { color: var(--fg-1, #0f2742); }
.sd-pf * { box-sizing: border-box; }

/* --- Hero ------------------------------------------------------------------ */
.sd-pf-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl, 18px);
  background:
    radial-gradient(1100px 460px at 50% -8%, rgba(238,129,39,0.16), transparent 60%),
    linear-gradient(180deg, var(--sd-navy-800, #102742) 0%, var(--sd-navy-900, #0a1b2e) 100%);
  color: #fff;
  padding: 56px 28px 150px;
  text-align: center;
}
.sd-pf-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.sd-pf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sd-amber-500, #ee8127);
}
.sd-pf-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sd-amber-500, #ee8127);
  box-shadow: 0 0 0 4px rgba(238,129,39,0.2);
}
.sd-pf-hero h1 {
  font-family: var(--font-display, "IBM Plex Sans", sans-serif); font-weight: 700; color: #fff;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 14px; text-wrap: balance;
}
.sd-pf-lede {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(255,255,255,0.85);
  margin: 0 auto; max-width: 56ch; text-wrap: pretty;
}

/* --- 3-Schritt-Strip ------------------------------------------------------- */
.sd-pf-steps {
  list-style: none; margin: 30px auto 0; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left;
}
.sd-pf-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 15px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);
}
.sd-pf-steps .num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600;
  color: var(--sd-navy-900, #0a1b2e); background: var(--sd-amber-500, #ee8127);
}
.sd-pf-steps .txt { display: grid; gap: 3px; min-width: 0; }
.sd-pf-steps .st {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14.5px; color: #fff;
}
.sd-pf-steps .st svg { color: var(--sd-amber-500, #ee8127); flex: 0 0 auto; }
.sd-pf-steps .sd { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.72); }

/* --- Finder-Karte (über den Hero gezogen) ---------------------------------- */
.sd-pf-finder { padding: 0; }
.sd-pf-finder-wrap {
  position: relative; z-index: 2; max-width: 1080px;
  margin: -104px auto 0;
}
.sd-pf-frame, .sd-pf-finder-wrap #sd-finder {
  width: 100%; min-height: 200px; border: 0; display: block;
  border-radius: var(--r-xl, 18px);
  background: var(--sd-navy-900, #0a1b2e);
  box-shadow: var(--shadow-3, 0 24px 60px -20px rgba(10,27,46,0.45));
}
.sd-pf-foot {
  text-align: center; color: var(--fg-3, #5b6b7d); font-size: 14px; margin: 22px auto 0; max-width: 760px;
}
.sd-pf-foot a { color: var(--sd-navy-600, #1e4e79); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sd-pf-foot a:hover { color: var(--sd-amber-600, #d9710f); }

/* --- Info-/Trust-Karten + SEO-Text ----------------------------------------- */
.sd-pf-info { max-width: 1080px; margin: 0 auto; padding: 56px 0 8px; }
.sd-pf-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sd-pf-card {
  padding: 22px 20px; border-radius: 14px;
  background: var(--sd-navy-050, #f3f6fa); border: 1px solid var(--sd-line-soft, #e2e8f0);
}
.sd-pf-card > svg { color: var(--sd-navy-600, #1e4e79); }
.sd-pf-card h3 {
  font-family: var(--font-display, "IBM Plex Sans", sans-serif); font-weight: 700;
  font-size: 17px; color: var(--fg-brand, #102742); margin: 10px 0 6px;
}
.sd-pf-card p { font-size: 14px; line-height: 1.6; color: var(--fg-2, #34465a); margin: 0; }
.sd-pf-card strong { color: var(--sd-navy-700, #173a5c); font-weight: 600; }
.sd-pf-seo {
  margin: 28px auto 0; max-width: 72ch; text-align: center;
  font-size: 14.5px; line-height: 1.7; color: var(--fg-3, #5b6b7d);
}
.sd-pf-seo a { color: var(--sd-navy-600, #1e4e79); font-weight: 600; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
  .sd-pf-steps { grid-template-columns: 1fr; max-width: 460px; gap: 10px; }
  .sd-pf-info-grid { grid-template-columns: 1fr; }
  .sd-pf-finder-wrap { margin-top: -84px; }
}
@media (max-width: 560px) {
  .sd-pf-hero { padding: 40px 18px 120px; border-radius: 14px; }
  .sd-pf-finder-wrap { margin-top: -72px; }
}