/* =============================================================
   Rechtsseiten — Impressum & Datenschutz
   Gleiche Bildsprache wie die Startseite: Schwarz, Gold, Muster.
   ============================================================= */

/* ---------- Kopfbereich ---------- */
.legal-hero {
  position: relative;
  padding: calc(var(--nav-h) + 78px) 0 46px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #100d09 0%, var(--ink) 100%);
}
.legal-hero .container { position: relative; z-index: 2; }
.legal-hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 14px 0 0;
}
.legal-hero .legal-sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--cream-dim);
  max-width: 60ch;
  margin: 6px 0 0;
}
.legal-back {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--cream-mut); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase;
  transition: color .35s var(--ease-out), gap .35s var(--ease-out);
}
.legal-back:hover { color: var(--gold); gap: .9rem; }

/* ---------- Layout ---------- */
.legal-body { position: relative; padding: clamp(44px, 6vw, 84px) 0 clamp(60px, 8vw, 110px); }
.legal-grid { display: block; }
@media (min-width: 992px) {
  .legal-grid { display: grid; grid-template-columns: 232px 1fr; gap: 58px; align-items: start; }
}

/* Inhaltsverzeichnis */
.legal-toc { display: none; }
@media (min-width: 992px) {
  .legal-toc {
    display: block; position: sticky; top: 104px;
    border-left: 1px solid var(--line);
    padding-left: 20px;
  }
}
.legal-toc h2 {
  font-family: var(--font-ui); font-size: .62rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 16px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; counter-reset: toc; }
.legal-toc a {
  display: block; padding: 7px 0 7px 26px; position: relative;
  font-size: .84rem; line-height: 1.4; color: var(--cream-mut);
  transition: color .3s var(--ease-out);
}
.legal-toc li { counter-increment: toc; }
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 7px;
  font-family: var(--font-display); font-size: .66rem;
  color: rgba(212, 175, 55, .45); letter-spacing: .06em;
}
.legal-toc a:hover, .legal-toc a.active { color: var(--gold-lite); }
.legal-toc a.active::before { color: var(--gold); }

/* ---------- Inhalt ---------- */
.legal-content { max-width: 74ch; }
.legal-content > * { scroll-margin-top: 100px; }

.legal-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  letter-spacing: .04em;
  margin: 52px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h2 .num {
  font-size: .62rem; letter-spacing: .18em;
  color: var(--gold); font-family: var(--font-ui); font-weight: 600;
  flex: 0 0 auto;
}
.legal-content h3 {
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--cream); margin: 30px 0 8px; letter-spacing: .03em;
}
.legal-content p,
.legal-content li {
  font-family: var(--font-serif);
  font-size: 1.06rem; line-height: 1.8; color: var(--cream-dim);
}
.legal-content p { margin: 0 0 14px; }
.legal-content ul { padding-left: 0; list-style: none; margin: 0 0 18px; }
.legal-content ul li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.legal-content ul li::before {
  content: ""; position: absolute; left: 4px; top: .78em;
  width: 6px; height: 6px; background: var(--gold);
  transform: rotate(45deg); opacity: .75;
}
.legal-content a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,175,55,.35); }
.legal-content a:hover { color: var(--gold-lite); border-bottom-color: var(--gold-lite); }
.legal-content code {
  font-size: .88em; color: var(--gold-lite);
  background: rgba(212, 175, 55, .1); border: 1px solid rgba(212, 175, 55, .2);
  border-radius: 5px; padding: 1px 6px;
}
.legal-content small { font-size: .86rem; color: var(--cream-mut); }

/* Datenblock (Adresse, Kontakt …) */
.legal-facts {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
  padding: 22px 26px; margin: 0 0 18px;
  display: grid; gap: 4px;
}
.legal-facts p { margin: 0; }
.legal-facts .name {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--cream); letter-spacing: .04em; margin-bottom: 6px;
}

/* Hinweis-Karte */
.legal-card {
  border: 1px solid rgba(212, 175, 55, .38); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(212,175,55,.09), rgba(212,175,55,.02));
  padding: 22px 26px; margin: 0 0 40px;
  display: flex; gap: 16px; align-items: flex-start;
}
.legal-card > i { color: var(--gold); font-size: 1.25rem; flex: 0 0 auto; line-height: 1.4; }
.legal-card p { margin: 0; font-family: var(--font-ui); font-size: .93rem; line-height: 1.7; color: var(--cream-dim); }
.legal-card b { color: var(--gold-lite); }

/* „bitte ergänzen"-Marker */
.todo {
  display: inline-block; font-family: var(--font-ui);
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: #120e05; background: var(--gold-grad);
  padding: 3px 9px; border-radius: 5px; font-weight: 700;
  margin: 0 3px; vertical-align: middle; white-space: nowrap;
}

/* ---------- Eintritts-Animation ---------- */
.lv { opacity: 0; transform: translateY(20px); }
.lv.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .lv { opacity: 1 !important; transform: none !important; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 991.98px) {
  .legal-hero { padding-top: calc(var(--nav-h) + 46px); }
  .legal-content h2 { margin-top: 40px; }
}

/* =============================================================
   LIGHT MODE — künye / gizlilik
   ============================================================= */
:root[data-theme="light"] .legal-hero {
  background: linear-gradient(180deg, #fffdf8 0%, var(--ink) 100%);
}
:root[data-theme="light"] .legal-facts {
  background: linear-gradient(150deg, #fffdf8, #f6efe1);
  box-shadow: 0 10px 26px -24px rgba(70, 50, 18, .45);
}
:root[data-theme="light"] .legal-card {
  background: linear-gradient(150deg, rgba(169,126,28,.12), rgba(169,126,28,.04));
}
:root[data-theme="light"] .legal-card b { color: var(--gold-deep); }
:root[data-theme="light"] .legal-content code {
  background: rgba(169, 126, 28, .12); color: var(--gold-deep);
}
:root[data-theme="light"] .legal-toc a.active,
:root[data-theme="light"] .legal-toc a:hover { color: var(--gold-deep); }