/* ============================================================
   PDLX – LIGHT THEME (hell & luftig, "Figma-clean")
   Wird NACH styles.css geladen; greift über body.light
   ============================================================ */

body.light {
  --bg: #F4F8FC;
  --bg-2: #FFFFFF;
  --bg-3: #EAF1F9;
  --card: #FFFFFF;
  --line: rgba(18,38,60,.10);
  --line-strong: rgba(18,38,60,.18);

  --ink: #142130;
  --ink-soft: #46586B;
  --ink-dim: #7A8A9A;

  --shadow: 0 24px 60px -28px rgba(24,52,86,.30);
  --glow: 0 14px 34px -10px rgba(42,160,230,.45);

  background: var(--bg);
  color: var(--ink);
}

/* ---- Nav ---- */
body.light .nav.scrolled {
  background: rgba(255,255,255,.82);
  border-bottom-color: var(--line);
}
body.light .nav-links a { color: var(--ink-soft); }
body.light .nav-links a:hover, body.light .nav-links a.active { color: var(--ink); }
body.light .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
body.light .btn-ghost:hover { background: rgba(42,160,230,.06); border-color: var(--blue); }
/* Logo frei stehend – ohne Kachel (Revision 2026-08-18) */
body.light .nav-drawer { background: rgba(255,255,255,.98); }
body.light .nav-drawer a { color: var(--ink-soft); }
body.light .nav-burger { color: var(--ink); }

/* ---- Hero: hell & luftig, Halle oben rechts durchscheinend ---- */
body.light .hero-photo { opacity: .5; filter: saturate(1.02) contrast(1.02); background-position: right 25%; }
body.light .hero-bg {
  background:
    radial-gradient(1100px 560px at 82% 8%, rgba(42,160,230,.16), transparent 60%),
    radial-gradient(760px 420px at 5% 92%, rgba(19,106,172,.10), transparent 55%),
    linear-gradient(180deg, rgba(244,248,252,.55), rgba(244,248,252,.86) 52%, var(--bg) 92%);
}
body.light .hero-grid {
  background-image: linear-gradient(rgba(18,38,60,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,38,60,.06) 1px, transparent 1px);
  opacity: .5;
}
body.light .hero h1 { color: var(--ink); }
body.light .hero p.lead { color: var(--ink-soft); }
/* Logo-Badge rechts braucht auf hellem Grund einen weichen Rahmen */
body.light .hero-badge { filter: drop-shadow(0 24px 48px rgba(24,52,86,.25)); }

/* ---- Trust ---- */
body.light .trust { background: var(--bg-2); }
body.light .trust-item b { color: var(--ink); }

/* ---- Karten / Sektionen ---- */
body.light .section-head p { color: var(--ink-soft); }
body.light .card { background: #fff; border-color: var(--line); box-shadow: 0 2px 4px rgba(24,52,86,.04); }
body.light .card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
body.light .card p, body.light .split p { color: var(--ink-soft); }

/* ---- Über / Media ---- */
body.light .media-frame { background: linear-gradient(135deg, #eaf1f9, #f4f8fc); border-color: var(--line); }

/* ---- Courts ---- */
body.light .court-card {
  background: linear-gradient(160deg, #eaf3fb, #d9e9f6);
  border-color: var(--line);
}
body.light .court-card::before { background: radial-gradient(600px 200px at 70% 0%, rgba(42,160,230,.28), transparent 60%); }
body.light .court-card h3 { color: var(--ink); }
body.light .court-card p { color: var(--ink-soft); }

/* ---- Booking ---- */
body.light .booking { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
body.light .booking-box {
  background: linear-gradient(135deg, rgba(42,160,230,.10), rgba(19,106,172,.05));
  border-color: var(--line-strong);
}
body.light .booking-box p { color: var(--ink-soft); }
body.light .booking-steps li { color: var(--ink-soft); }

/* ---- Preise ---- */
body.light .price-card { background: #fff; border-color: var(--line); box-shadow: 0 2px 4px rgba(24,52,86,.04); }
body.light .price-card.featured { border-color: var(--blue); box-shadow: var(--glow); }
body.light .price-card li { color: var(--ink-soft); }
body.light .price-card .amt small { color: var(--ink-dim); }

/* ---- FAQ ---- */
body.light .faq-q { color: var(--ink); }
body.light .faq-a { color: var(--ink-soft); }

/* ---- Anfrage / Formular ---- */
body.light .anfrage-intro p { color: var(--ink-soft); }
body.light .anfrage-usp li { color: var(--ink-soft); }
body.light .anfrage-form { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
body.light .field input, body.light .field select, body.light .field textarea { background: #fff; border-color: var(--line-strong); }
body.light .field input::placeholder, body.light .field textarea::placeholder { color: var(--ink-dim); }

/* ---- Kontakt / Map ---- */
body.light .contact-row span { color: var(--ink-soft); }
body.light .map-frame { border-color: var(--line); }
body.light .map-frame iframe { filter: none; }

/* ---- Footer ---- */
body.light .footer { background: var(--bg-3); border-top-color: var(--line); }
body.light .footer p { color: var(--ink-dim); }
/* Footer-Logo frei stehend – ohne Kachel */
body.light .footer-col a { color: var(--ink-soft); }
body.light .footer-bottom { border-top-color: var(--line); color: var(--ink-dim); }

/* ---- Mobile bar ---- */
body.light .mobile-bar { background: rgba(255,255,255,.92); border-top-color: var(--line); }