/* ============================================================
   heeybaby — Unterseiten (Rechtliches, Kontakt, Über uns)
   Ergänzt main.css um Prosa-Layouts; gleiche Tokens & Komponenten.
   ============================================================ */

.page-main { padding-top: clamp(20px, 4vh, 40px); }

.page-main .sect-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }

.legal-meta { font-size: 14px; color: var(--hb-ink-muted); }

/* ============ Prosa / Rechtstexte ============ */
.legal {
  display: grid;
  gap: clamp(28px, 4vh, 40px);
  max-width: 860px;
  padding: 10px var(--pad-x) clamp(90px, 12vh, 150px);
}
.legal section { display: grid; gap: 12px; }
.legal h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.legal p { color: var(--hb-ink-soft); max-width: 72ch; text-wrap: pretty; }
.legal .pre { white-space: pre-line; }
.legal ul { display: grid; gap: 8px; padding-left: 22px; color: var(--hb-ink-soft); }
.legal li { max-width: 70ch; text-wrap: pretty; }
.legal li::marker { color: var(--hb-pink-600); }
.legal a { color: var(--hb-pink-600); font-weight: 600; }
.legal a:hover { text-decoration: underline; }

/* ============ Status-Zeilen (Cookie-Seite) ============ */
.status-list { display: grid; gap: 10px; max-width: 720px; }

/* ============ Kontakt ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
  max-width: 1080px;
  padding: 10px var(--pad-x) clamp(90px, 12vh, 150px);
}
.contact-card {
  display: grid;
  gap: 18px;
  justify-items: start;
  background: var(--hb-navy);
  color: var(--hb-on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 56px);
}
.contact-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; }
.contact-card p { color: color-mix(in oklab, var(--hb-on-dark) 75%, var(--hb-navy)); max-width: 44ch; text-wrap: pretty; }
.contact-card .mail {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--hb-pink);
  word-break: break-all;
}
.contact-aside { display: grid; gap: 12px; }
.contact-info {
  display: grid;
  gap: 8px;
  background: var(--hb-white);
  border: 1px solid var(--hb-border-soft);
  border-radius: 22px;
  padding: 24px 26px;
}
.contact-info h3 { font-size: 1rem; font-weight: 800; }
.contact-info p { font-size: 14.5px; color: var(--hb-ink-soft); white-space: pre-line; }
.contact-info a { color: var(--hb-pink-600); font-weight: 700; }
.contact-info a:hover { text-decoration: underline; }

/* ============ Über uns ============ */
.about-intro {
  display: grid;
  gap: 18px;
  max-width: 860px;
  padding: 10px var(--pad-x) clamp(40px, 6vh, 70px);
}
.about-intro p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--hb-ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
.about-intro p b { color: var(--hb-ink); }
.about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: clamp(20px, 3vh, 40px) var(--pad-x) clamp(90px, 12vh, 150px);
}

@media (max-width: 1020px) {
  .contact-grid { grid-template-columns: 1fr; }
}