/* =============================================================================
   page-projekte.css  —  Premium-Hero + Karten-Section der Projekte-Seite
   .pds-gescoped. Tokens aus projecta-system.css (mit Fallbacks). Die Leaflet-Karte
   (#interactive-project-map / .germany-map-fullwidth) behaelt ihre Inline-Hoehe —
   hier NUR Rahmen/Optik, KEINE Hoehen-/Funktions-Aenderung.
   ============================================================================= */

/* Alten dunklen page-header neutralisieren (falls projects-page.css noch greift) */
body.pds .page-header.dark-bg { display: none !important; }

/* ===== PREMIUM-HERO ===== */
body.pds .proj-hero {
  padding: 150px 0 56px;
  background: linear-gradient(180deg, var(--mint-3, #eef6e6) 0%, #ffffff 100%);
  text-align: center;
}
body.pds .proj-hero-inner { max-width: 940px; margin: 0 auto; padding: 0 24px; }
body.pds .proj-hero-title {
  font-size: clamp(40px, 6vw, 74px); line-height: 1.03; letter-spacing: -.03em;
  font-weight: 800; color: var(--ink, #15271b); margin: 18px 0 0;
}
body.pds .proj-hero-title em { font-style: normal; color: var(--green-ink, #3a6212); }
body.pds .proj-hero-sub {
  font-size: clamp(16px, 2vw, 20px); color: var(--muted-2, #5a6b5e);
  max-width: 640px; margin: 22px auto 0; line-height: 1.55;
}

/* Track-Record-Zahlen */
body.pds .proj-stats {
  display: flex; justify-content: center; gap: 52px; margin-top: 46px; flex-wrap: wrap;
}
body.pds .proj-stat { display: flex; flex-direction: column; align-items: center; }
body.pds .proj-stat .num {
  font-size: clamp(34px, 4.5vw, 54px); font-weight: 800; color: var(--green-ink, #3a6212);
  letter-spacing: -.02em; line-height: 1;
}
body.pds .proj-stat .lbl {
  font-size: 14px; color: var(--muted-2, #5a6b5e); margin-top: 9px; max-width: 170px; line-height: 1.3;
}

/* ===== KARTEN-SECTION ===== */
body.pds #projects-map-section { max-width: var(--maxw, 1280px); margin: 0 auto; padding: 8px 24px 0; }
/* Premium-Rahmen um die Karte — Hoehe bleibt aus dem Inline-CSS der Karte */
body.pds .germany-map-fullwidth {
  border-radius: var(--r, 24px); overflow: hidden;
  border: 1px solid var(--line, #e3ece0);
  box-shadow: var(--shadow-card, 0 24px 60px -34px rgba(40, 90, 30, .34));
}

/* Filter/Liste-Container in die Seitenbreite einpassen (Optik, keine Funktion) */
body.pds .page-content { max-width: var(--maxw, 1280px); margin: 0 auto; padding: 0 24px 40px; }

@media (max-width: 720px) {
  body.pds .proj-hero { padding: 118px 0 38px; }
  body.pds .proj-stats { gap: 30px; }
  body.pds #projects-map-section, body.pds .page-content { padding-left: 14px; padding-right: 14px; }
}

/* ===== SCHLUSS-CTA (.final) — portiert aus page-ueber-uns.css.
   CSS-Falle behoben: page-projekte.css hatte 0 .final-Regeln, ein kopierter Block waere unformatiert. ===== */
body.pds .final { position: relative; padding: 104px 0; background: linear-gradient(135deg, #3d6b18, #4f841f 60%, #46791d); overflow: hidden; }
body.pds .final::after { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.2px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(85% 95% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(85% 95% at 50% 0%, #000, transparent 80%); }
body.pds .final-center { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; text-align: center; padding: 0 24px; }
body.pds .final .kicker { color: #fff; justify-content: center; }
body.pds .final .kicker .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
body.pds .final h2 { color: #fff; font-size: clamp(30px, 3.8vw, 50px); margin: 18px 0 16px; letter-spacing: -.04em; line-height: 1.05; }
body.pds .final p { color: rgba(255,255,255,.94); font-size: 18px; margin: 0 auto 28px; max-width: 520px; line-height: 1.6; }
body.pds .final-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
body.pds .btn-white { background: #fff; color: var(--green-deep, #5a9023); box-shadow: 0 14px 34px -14px rgba(0,0,0,.32); border: 0; }
body.pds .btn-white:hover { transform: translateY(-3px); }
body.pds .btn-line { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
body.pds .btn-line:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-3px); }
@media (max-width: 640px) {
  body.pds .final { padding: 72px 0; }
  body.pds .final h2 { font-size: clamp(26px, 7vw, 34px); }
  body.pds .final-cta .btn { width: 100%; justify-content: center; }
}