/* Rechtsseiten + Konto löschen: gemeinsame Typografie/Card-Hülle.
   Auftrag Abschnitt 5.2: Überschrift in --apricot, Datumszeile in
   --text-sekundaer, Inhaltsübersicht in einer Karte, dann Fließtext.
   Kopf/Burger/Footer kommen aus css/site.css (auf jeder Seite gleich). */

main.legal { max-width: 760px; margin: 0 auto; padding: 52px 48px 92px }

.legal h1 {
  font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.12;
  color: var(--apricot); margin-bottom: 10px;
}
.legal-datum, .meta { font-size: 13px; color: var(--text-sekundaer); margin-bottom: 36px }

.legal h2 { font-size: 19px; font-weight: 600; color: var(--blau); margin: 30px 0 8px }
.legal h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 22px 0 8px }
.legal p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--text-sekundaer); margin-bottom: 12px }
.legal ul { margin: 0 0 16px 20px }
.legal ul li { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--text-sekundaer); margin-bottom: 4px }
.legal a { color: var(--apricot) }

/* Kartenflächen auf der Rechtsseite (Inhaltsübersicht, Kontaktblock, Hinweis):
   --karte statt --weiss, da die Seite selbst schon weiß ist (siehe Phase-2-
   Korrektur) — sonst wäre die Karte auf dem Seitenhintergrund unsichtbar. */
.legal-inhalt, .toc, .kontakt-block {
  background: var(--karte); border-radius: var(--r-card); padding: 24px 28px; margin: 26px 0;
}
.legal-inhalt h2, .toc h2, .kontakt-block h2 { margin-top: 0 }
.kontakt-block p { margin-bottom: 4px }
.kontakt-block p:last-child { margin-top: 8px }

.notice {
  background: var(--karte); border-left: 3px solid var(--apricot);
  padding: 16px 20px; border-radius: 0 var(--r-card) var(--r-card) 0; margin: 20px 0;
}
.notice p { margin: 0 }

/* ── Konto löschen: eigenständige Karten/Button-Bausteine (Zustandslogik
   unangetastet — nur diese Hüllen-Klassen, IDs bleiben wie im Skript) ── */
.card { background: var(--karte); border-radius: var(--r-card); padding: 28px; margin: 24px 0 }
.card p:last-child { margin-bottom: 0 }
.email-badge { font-size: 13px; color: var(--text-sekundaer); margin-bottom: 20px }
.email-badge strong { color: var(--text); font-weight: 500 }

.btn {
  display: block; width: 100%; border: none; border-radius: var(--r-pill);
  padding: 14px 20px; font-family: 'Yaldevi Colombo', sans-serif; font-size: 15px;
  font-weight: 500; cursor: pointer; text-align: center; margin-top: 12px;
}
.btn:first-child { margin-top: 0 }
.btn:disabled { opacity: 0.5; cursor: default }
.btn:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px }
.btn-google { background: var(--weiss); color: var(--text); border: 1px solid var(--kachel-rahmen) }
.btn-apple { background: #000; color: #fff }
.btn-destruktiv { background: var(--weiss); color: #CC3300; border: 1px solid var(--kachel-rahmen) }
.btn-abbrechen { background: transparent; color: var(--text-sekundaer); font-size: 13px; padding: 10px }

.hinweis-block { background: var(--ton-warm); border-radius: var(--r-card); padding: 16px 18px; margin: 16px 0 }
.hinweis-block p { color: var(--text); font-size: 13px; margin-bottom: 0 }

.status { border-radius: var(--r-card); padding: 24px; margin: 24px 0; font-size: 14px; line-height: 1.6 }
.status-erfolg { background: #EEF7EE; color: var(--text) }
.status-fehler { background: #FDEEEA; color: var(--text) }

.hidden { display: none !important }

@media (max-width: 640px) {
  main.legal { padding: 36px 20px 68px }
}