/* ============================================================================
   4founder redesign — shared base (Phase 0b)
   Everything here is scoped to `body.ff-redesign` so that enqueueing this file
   can never restyle Oxygen-built pages. The redesign PHP head partial is
   expected to output <body class="ff-redesign ff-route-<route>">.
   Requires tokens.css (loaded before this file).

   This factors the page-base block every template's <helmet><style> repeats
   (verified identical across all 10 newest .dc.html versions), plus the shared
   button / chip / eyebrow / card / FAQ patterns observed in the templates.
   tools/redesign-port/extract.mjs drops exact duplicates of these rules from
   the per-page CSS it emits.
   ============================================================================ */

/* Subset built by tools/redesign-port/subset-font.mjs from the design
   project's HostGrotesk-VariableFont_wght.ttf (variation axes kept). */
@font-face {
  font-family: 'Host Grotesk';
  src: url('../../fonts/redesign/HostGrotesk-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ── Page base (the shared helmet block, scoped) ──────────────────────────── */
/* html{scroll-behavior:smooth} equivalent — applies only while a redesign
   page is being served (the :has() guard keeps Oxygen pages untouched). */
:root:has(body.ff-redesign) { scroll-behavior: smooth; }

body.ff-redesign,
body.ff-redesign *,
body.ff-redesign *::before,
body.ff-redesign *::after { box-sizing: border-box; }

body.ff-redesign {
  margin: 0;
  font-family: var(--ff-font);
  color: var(--ff-text);
  background: var(--ff-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ff-redesign img { max-width: 100%; }

body.ff-redesign a { color: var(--ff-brand); text-decoration: none; }
body.ff-redesign a:hover { color: var(--ff-brand-deep); }

/* Anchor targets clear the 104px fixed header (services/impressum templates
   use 120px — that page-specific override survives in their page CSS). */
body.ff-redesign [id] { scroll-margin-top: 104px; }

body.ff-redesign ::selection,
body.ff-redesign::selection { background: rgba(var(--ff-brand-rgb),0.18); }

/* Keyframe names are global; ff-prefixed to avoid collisions. Referenced by
   inline `animation: ffFloat …` styles in ported markup. */
@keyframes ffFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ── data-reveal (scroll-in) ──────────────────────────────────────────────── */
/* Templates also carry the initial state inline (opacity:0;translateY(24px)),
   so `.is-revealed` — added by the redesign runtime JS when the element
   enters the viewport — must win with !important over those inline styles. */
body.ff-redesign [data-reveal] {
  opacity: 0;
  transform: translateY(var(--ff-reveal-shift));
  transition: opacity var(--ff-reveal-duration) var(--ff-ease),
              transform var(--ff-reveal-duration) var(--ff-ease);
}
body.ff-redesign [data-reveal].is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Buttons (primary + outline CTA, verbatim from templates) ─────────────── */
body.ff-redesign .ff-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border: 0;
  border-radius: var(--ff-radius-btn);
  background: var(--ff-brand);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ff-shadow-cta);
  transition: transform var(--ff-duration-fast) var(--ff-ease),
              background var(--ff-duration-fast) var(--ff-ease);
}
body.ff-redesign .ff-btn:hover {
  transform: translateY(-2px);
  background: var(--ff-brand-deep);
  color: #fff;
}

body.ff-redesign .ff-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border: 1px solid #cfe7ff;
  border-radius: var(--ff-radius-btn);
  background: #fff;
  color: var(--ff-brand);
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(9,22,52,0.06);
  transition: all var(--ff-duration-fast) var(--ff-ease);
}
body.ff-redesign .ff-btn-outline:hover {
  border-color: #a8d6ff;
  color: var(--ff-brand-deep);
  background: #f5fbff;
}

/* ── Chips / pills / eyebrows ─────────────────────────────────────────────── */
/* Uppercase label chip (hero badge) */
body.ff-redesign .ff-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-bg-tint);
  border: 1px solid var(--ff-border);
  font-size: var(--ff-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ff-brand-deep);
  white-space: nowrap;
}

/* Checkmark/feature pill */
body.ff-redesign .ff-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--ff-radius-pill);
  background: #fff;
  border: 1px solid var(--ff-border);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ff-heading);
  box-shadow: 0 6px 18px rgba(103,133,219,0.1);
}

/* Section eyebrow (plain, brand-deep) */
body.ff-redesign .ff-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--ff-text-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ff-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ff-brand-deep);
}
/* Dot-eyebrow variant used above CTA blocks */
body.ff-redesign .ff-eyebrow-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ff-brand);
}
body.ff-redesign .ff-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ff-brand);
  display: inline-block;
}
body.ff-redesign .ff-dot-halo { box-shadow: 0 0 0 5px rgba(var(--ff-brand-rgb),0.10); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
body.ff-redesign .ff-card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-card);
}
body.ff-redesign .ff-card-hover {
  transition: transform .25s var(--ff-ease), box-shadow .25s var(--ff-ease);
}
body.ff-redesign .ff-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--ff-shadow-lift);
}

/* Numbered step badge (Arbeitsweise / Ablauf sections) */
body.ff-redesign .ff-step-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ff-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(var(--ff-brand-rgb),0.32);
}

/* ── FAQ <details> baseline (structural part shared by all FAQ pages) ─────── */
/* Icon color/rotation rules intentionally stay in per-page CSS: the Kontakt
   template uses a divergent +/− icon variant that a global rotate rule would
   corrupt. Base only removes the marker and carries the open glow. */
body.ff-redesign details.ff-faq { overflow: hidden; }
body.ff-redesign details.ff-faq summary {
  list-style: none;
  outline: none;
  cursor: pointer;
}
body.ff-redesign details.ff-faq summary::-webkit-details-marker { display: none; }
body.ff-redesign details.ff-faq[open] {
  border-color: #a8d0ff;
  box-shadow: 0 14px 34px rgba(var(--ff-brand-rgb),0.15);
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root:has(body.ff-redesign) { scroll-behavior: auto; }
  body.ff-redesign *,
  body.ff-redesign *::before,
  body.ff-redesign *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Reveal content immediately (also overrides the templates' inline
     opacity:0 initial state). */
  body.ff-redesign [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Fixed-header clearance ────────────────────────────────────────────────
   The live-replica menu bar floats fixed over the page (wrapper top 12px,
   bar ~80px tall). The design pages carried their own 104px spacer, which
   the extractor strips together with the design header. A transparent
   border-top on the first section restores the clearance INSIDE the
   section's own background (backgrounds paint under transparent borders),
   so hero gradients still run edge-to-edge behind the floating bar. */
body.ff-redesign main > section:first-child,
body.ff-redesign main > div:first-child > section:first-child {
  border-top: 96px solid transparent;
}
