/* ═══════════════════════════════════════════════════════════════════════════
   Component: Footer CTA v2 — Dramatic teal, gradient accent, large type
   ═══════════════════════════════════════════════════════════════════════════ */

.c-footer-cta {
  position: relative;
  padding-block: var(--section-spacing-fluid);
  background: var(--gradient-dark);
  overflow: hidden;
}

/* Gradient accent line at top */
.c-footer-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

/* Subtle texture */
.c-footer-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
}

.c-footer-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3xl);
  align-items: center;
}

/* ── Heading ────────────────────────────────────────────────────────── */

.c-footer-cta__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.c-footer-cta__text {
  font-size: var(--font-size-sm);
  color: hsl(198 12% 65%);
  line-height: var(--line-height-relaxed);
}

/* ── Actions ────────────────────────────────────────────────────────── */

.c-footer-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Der frühere Override auf orange-500 (Hover orange-400) ist entfallen: weiße Schrift
   darauf war 3,7:1 bzw. 3,0:1. Die Basisregel .c-btn--primary liefert auf dem dunklen
   Band bereits die kontraststarke Fläche (orange-600, Hover orange-700).

   ACHTUNG (26.09.2026): Die Basisregel greift hier NICHT von selbst. elements.css
   faerbt in dunklen Baendern pauschal jeden Link ein ("in dark sections, links use teal
   accent") —
       .c-footer-cta a { color: teal-300; background-image: linear-gradient(teal-300, teal-300) }
   Diese Regel hat die hoehere Spezifitaet (0,1,1 gegen 0,1,0) und hat damit die weisse
   Beschriftung des Primaerbuttons ueberschrieben. Gemessen: color rgb(117,167,189) auf
   der Flaeche rgb(193,61,21) ergibt rund 2,0:1 statt der noetigen 4,5:1. Die Audit-
   Skripte ueberspringen genau dieses Element, weil das gesetzte background-image sie als
   "unsicher" einstufen — der Fehler war nur mit dem Auge zu finden.
   Deshalb hier ausdruecklich zuruecknehmen. */
.c-footer-cta .c-btn,
.c-site-footer .c-btn {
  background-image: none;
}

.c-footer-cta .c-btn--primary,
.c-site-footer .c-btn--primary {
  color: var(--color-text-inverse);
}

.c-footer-cta .c-btn--primary:hover,
.c-site-footer .c-btn--primary:hover {
  color: var(--color-text-inverse);
}

.c-footer-cta .c-btn--outline {
  color: var(--color-text-inverse);
  border-color: var(--color-border-teal);
}

.c-footer-cta .c-btn--outline:hover {
  border-color: var(--color-teal-300);
  background-color: hsl(198 30% 18%);
  color: var(--color-text-inverse);
}

.c-footer-cta .c-btn:hover {
  transform: translateX(4px);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .c-footer-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .c-footer-cta__heading {
    font-size: var(--font-size-lg);
  }

  .c-footer-cta .c-btn:hover {
    transform: none;
  }
}