/**
 * Aurora Digital Vienna — Zentraler Footer (DESIGN-IDENTITY §4)
 * Gehoert zu mu-plugins/aurora-central-footer.php
 *
 * Quelle: der bereits korrekte lp-footer der Startseite, hier 1:1 uebernommen
 * und an drei Stellen gehaertet:
 *
 * 1) VARIABLEN: das Original nutzt var(--color-bg-dark) / var(--color-primary-light)
 *    / var(--transition-smooth). Diese sind nur auf den Canvas-Landingpages
 *    definiert. Auf Artikeln, /blog/ und /impressum/ waeren sie leer ->
 *    background-color wuerde ungueltig = transparenter Footer.
 *    Daher hier auf .lp-footer selbst gesetzt (vererbt an alle Kinder).
 * 2) KONTRAST: .lp-footer-bottom war rgba(255,255,255,.35) -> gemessen 2,9:1
 *    auf Navy = unter WCAG AA. Jetzt #94a3b8 = 6,96:1.
 * 3) Der alte .custom-footer wird ausgeblendet — Sicherheitsnetz, falls die
 *    PHP-Ersetzung eine Stelle nicht erwischt. So steht nie ein zweiter Footer da.
 */

.lp-footer {
  /* Fallbacks — greifen nur, wo die Seite die Tokens nicht selbst definiert */
  --color-bg-dark: #0f172a;
  --color-primary-light: #60a5fa;
  --transition-smooth: .2s ease;

  background-color: #0f172a !important;   /* Literal statt var(): siehe (1) */
  border-top: 4px solid !important;
  /* Rot-Weiss-Rot (Identity §4) */
  border-image: linear-gradient(to right,
      #b91c1c 0%, #b91c1c 33%,
      #ffffff 33%, #ffffff 66%,
      #b91c1c 66%, #b91c1c 100%) 1 !important;
  padding: 4rem 0 2rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.lp-footer .lp-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.lp-footer .lp-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.lp-footer .lp-footer-column h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  color: #ffffff !important;
}

.lp-footer .lp-footer-column p {
  color: #94a3b8;            /* 6,96:1 auf Navy */
  font-size: 0.95rem;
  line-height: 1.6;
}

.lp-footer .lp-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-footer .lp-footer-links li { margin-bottom: 0.75rem; }

.lp-footer .lp-footer-links a {
  color: #94a3b8;            /* 6,96:1 */
  text-decoration: none;
  transition: color var(--transition-smooth);
  /* Touch-Target (Identity §7) */
  display: inline-block;
  min-height: 24px;
  padding: 6px 0;
}
.lp-footer .lp-footer-links a:hover,
.lp-footer .lp-footer-links a:focus-visible { color: #60a5fa; }

.lp-footer a:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 3px;
  border-radius: 6px;
}

.lp-footer .lp-social-links { display: flex; gap: 1rem; margin-top: 1rem; }
.lp-footer .lp-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;           /* Identity §7: Touch-Target >= 44px */
  min-height: 44px;
}
.lp-footer .lp-social-icon {
  width: 24px; height: 24px;
  fill: #94a3b8;
  transition: fill var(--transition-smooth), transform var(--transition-smooth);
}
.lp-footer .lp-social-links a:hover .lp-social-icon,
.lp-footer .lp-social-links a:focus-visible .lp-social-icon {
  fill: #60a5fa;
  transform: translateY(-2px);
}

.lp-footer .lp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
  color: #94a3b8;            /* war rgba(255,255,255,.35) = 2,9:1 -> jetzt 6,96:1 */
  font-size: 0.85rem;
  text-align: center;
}
.lp-footer .lp-footer-bottom p { color: #94a3b8 !important; margin: 0; }

/* Alter Footer — Sicherheitsnetz, siehe (3) */
.custom-footer { display: none !important; }

/* ==========================================================================
   Promo-Banner auf /blog/ (Page 63, Container 1cd23fc)
   Kein Footer, aber ebenfalls seitenweit ausgeliefert — daher hier.

   Gemessen 2026-07-16:
     H3      weiss 32px/700 auf #667eea .... 3,66:1  (Soll 3 fuer grossen Text)  ok
     Subtext #b0b8c8 16px/300 auf #667eea .. 1,84:1  (Soll 4,5)  -> "fast nicht zu lesen"
     Button  #0d1b2a auf Gold #d4a855 ...... 7,89:1  lesbar, aber off-brand
   Farben (Lila #667eea->#764ba2, Gold #d4a855) sind Reste des alten
   Violett-Stacks und widersprechen DESIGN-IDENTITY §1.

   Selektor spiegelt Elementors eigenen (inkl. :not(...)), damit !important
   sicher greift. Elementor lazy-loaded Container-Hintergruende
   (.e-con.e-parent:not(.e-lazyloaded){background-image:none!important}) —
   das bleibt wie gehabt, der Verlauf erscheint beim Reinscrollen.
   ========================================================================== */
.elementor-63 .elementor-element.elementor-element-1cd23fc:not(.elementor-motion-effects-element-type-background),
.elementor-63 .elementor-element.elementor-element-1cd23fc.e-lazyloaded {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
}
.elementor-63 .elementor-element.elementor-element-1cd23fc .elementor-heading-title {
  color: #ffffff !important;                 /* 17,85:1 auf Navy */
}
.elementor-63 .elementor-element.elementor-element-1cd23fc p {
  color: #cbd5e1 !important;                 /* war #b0b8c8 = 1,84:1 -> jetzt 12,02:1 */
}
.elementor-63 .elementor-element.elementor-element-1cd23fc .elementor-button {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, #0072e0, #2563eb) !important;
  color: #ffffff !important;                 /* 4,68:1 auf Verlaufsstart */
  fill: #ffffff !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  min-height: 44px !important;               /* Identity §7 */
  box-shadow: 0 12px 30px rgba(0, 136, 255, .32) !important;
}
.elementor-63 .elementor-element.elementor-element-1cd23fc .elementor-button:hover {
  color: #ffffff !important;
  box-shadow: 0 18px 40px rgba(0, 136, 255, .42) !important;
}

@media (max-width: 768px) {
  .lp-footer { padding: 3rem 0 1.5rem; }
  .lp-footer .lp-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-footer .lp-social-links a:hover .lp-social-icon { transform: none; }
}