/* ═══════════════════════════════════════════════
   DELEVEO — legal.css
   Shared styles for Impressum & Datenschutz
   ═══════════════════════════════════════════════ */

/* ── PAGE HERO ──────────────────────────────────── */
.page-hero {
  padding: 160px 60px 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.page-hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.0;
  opacity: 1; animation: none;
}
.last-updated { margin-top: 16px; font-size: 13px; color: #555; }

/* ── TABLE OF CONTENTS (Datenschutz) ────────────── */
.toc-wrap {
  padding: 40px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.toc { display: flex; flex-wrap: wrap; gap: 10px; }
.toc a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #666; text-decoration: none;
  background: var(--gray-dim);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 16px; border-radius: 100px;
  transition: color 0.2s, border-color 0.2s;
  cursor: none;
}
.toc a:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.2); }

/* ── CONTENT ────────────────────────────────────── */
.content-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 60px 120px;
}
.content-section { margin-bottom: 56px; scroll-margin-top: 100px; }
.content-section:last-child { margin-bottom: 0; }

.content-section h2 {
  font-family: 'Syne', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.content-section h3 {
  font-family: 'Syne', sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  margin-top: 28px; margin-bottom: 10px; color: var(--white);
}
p    { font-size: 15px; color: #aaa; line-height: 1.8; font-weight: 300; margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }
a    { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul   { padding-left: 20px; margin-bottom: 14px; }
ul li { font-size: 15px; color: #aaa; line-height: 1.8; font-weight: 300; margin-bottom: 6px; }

.card {
  background: var(--gray-dim);
  border-radius: var(--radius);
  padding: 32px 36px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.card p      { color: #999; }
.card strong { color: var(--white); font-weight: 500; }

.highlight-box {
  background: var(--gray-dim);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px; margin: 24px 0;
}
.highlight-box p { color: #999; margin: 0; }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 700px) {
  .page-hero   { padding: 120px 24px 60px; }
  .toc-wrap    { padding: 30px 24px; }
  .content-wrap{ padding: 60px 24px 80px; }
}

/* ── Legal pages mobile ── */
@media (max-width: 900px) {
  .page-hero { padding: 100px 20px 50px; }
  .page-hero h1 { font-size: clamp(32px, 9vw, 52px); word-break: break-word; }
  .toc-wrap    { padding: 28px 20px; }
  .content-wrap{ padding: 50px 20px 80px; }
}