/* ============================================
   Styles für Unterseiten – pippoprobiert
   ============================================ */

/* ---------- Seiten-Hero ---------- */
.page-hero {
  background:
    radial-gradient(ellipse at top right, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(0,0,0,0.15), transparent 60%),
    #1A6B38;
  padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px);
  color: #E8F5EE;
}
.page-hero,
.page-hero * { text-align: left; }

.page-hero .section__eyebrow {
  display: inline-block;
  color: #fff;
  background: rgba(0,0,0,0.25);
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: #E8F5EE;
}
.page-hero__lead {
  font-size: clamp(16px, 2vw, 18px);
  color: #A8D4B8;
  max-width: 660px;
  margin: 0;
  line-height: 1.65;
}

/* ---------- Inhalts-Sektionen ---------- */
.page-section {
  padding: clamp(48px, 7vw, 88px) 0;
}
.page-section__inner {
  text-align: left;
}

/* Hellgrün – statt weiß */
.page-section--white {
  background: var(--color-surface);
}

/* Hellgrün – Surface */
.page-section--light {
  background: var(--color-surface); /* #D9EFE4 */
}

/* Mittel-dunkel – wie Resonance */
.page-section--mid {
  background: #155730;
}

/* Helles Grün – wie CTA-Banner auf Startseite */
.page-section--dark {
  background: #28A85A;
}

/* ---------- Typografie in Sektionen ---------- */
.page-section h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--color-accent-dk);
}
.page-section p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin: 0 0 16px;
}

/* Dunkle Sektionen: helle Texte */
.page-section--mid h2 { color: #6DD99A; }
.page-section--mid p  { color: #C8E6D5; }

.page-section--dark h2 { color: #fff; }
.page-section--dark p  { color: #E8F5EE; }

/* ---------- Listen ---------- */
.page-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.page-section ul li {
  position: relative;
  padding: 12px 16px 12px 44px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.65;
  border-radius: var(--radius-sm);
}

/* Listen auf hellen Sektionen */
.page-section--white ul li,
.page-section--light ul li {
  background: rgba(26,107,56,0.08);
  color: var(--color-ink-soft);
}
.page-section--white ul li::before,
.page-section--light ul li::before {
  content: '–';
  position: absolute;
  left: 16px;
  color: var(--color-accent);
  font-weight: 700;
}

/* Listen auf dunklen Sektionen */
.page-section--mid ul li,
.page-section--dark ul li {
  background: rgba(255,255,255,0.07);
  color: #C8E6D5;
}
.page-section--mid ul li::before,
.page-section--dark ul li::before {
  content: '–';
  position: absolute;
  left: 16px;
  color: #6DD99A;
  font-weight: 700;
}

/* ---------- Zitate (blockquote) ---------- */
.legal-quote {
  margin: 24px 0;
  padding: 16px 24px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.page-section--white .legal-quote,
.page-section--light .legal-quote {
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  color: var(--color-ink);
}
.page-section--mid .legal-quote {
  background: rgba(255,255,255,0.08);
  border-left: 4px solid #6DD99A;
  color: #E8F5EE;
}
.page-section--dark .legal-quote {
  background: rgba(255,255,255,0.15);
  border-left: 4px solid #fff;
  color: #fff;
}

/* ---------- Zurück-Link ---------- */
.page-section__back {
  margin-top: 40px;
  font-size: 15px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.page-section--mid .page-section__back,
.page-section--dark .page-section__back {
  border-top-color: rgba(255,255,255,0.15);
}
.page-section--mid .page-section__back a,
.page-section--dark .page-section__back a {
  color: #6DD99A;
}

/* ---------- Offer-Cards (hilfe-angebote) ---------- */
.offer-card {
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin: 32px 0;
  border-left: 4px solid #6DD99A;
}
.page-section--white .offer-card,
.page-section--light .offer-card {
  background: var(--color-card);
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.offer-card h2 {
  margin-top: 0;
  border: none !important;
  padding-bottom: 0 !important;
}
.page-section--mid .offer-card,
.page-section--mid .offer-card p {
  color: #fff !important;
}
.page-section--mid .offer-card h2 {
  color: #fff;
}
.offer-card .offer-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 28px;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background .2s;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.offer-card .offer-cta:hover {
  background: var(--color-accent-dk);
}

/* ---------- Altes .legal – Rückwärtskompatibilität ---------- */
.legal {
  padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 72px);
  background: var(--color-surface);
  text-align: left;
}
.legal__inner { text-align: left; }
.legal h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin: 36px 0 10px;
  color: var(--color-accent-dk);
}
.legal p {
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.legal__notice {
  background: var(--color-accent-soft);
  border: 1px solid #C8D4B0;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 0 0 36px;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.55;
}
.legal__notice strong {
  color: var(--color-accent-dk);
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}
.legal__back {
  margin-top: 48px;
  font-size: 15px;
}
.legal-list {
  padding-left: 20px;
  margin: 0 0 14px;
}
.legal-list li {
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 6px;
}
.legal-quote {
  border-left: 4px solid var(--color-accent);
  margin: 20px 0;
  padding: 12px 20px;
  background: var(--color-accent-soft);
  border-