/**
 * Location:    /assets/css/legal.css
 * File:        legal.css
 * Function:    Shared stylesheet for Impressum and Datenschutzerklärung pages.
 *              Provides legal-specific components: page hero, TOC, content cards,
 *              address blocks, info box, rights grid, legal tables, breadcrumb
 *              override, and print styles. Extends style.css brand tokens.
 *              All components WCAG AA contrast compliant.
 *
 * Version:     1.0.0
 * History:
 *   1.0.0 - 2025-02-20 - Initial release. Full legal page design system for
 *                         Impressum (§ 5 TMG) and Datenschutz (DSGVO) pages.
 */

/* ── Page base ───────────────────────────────────────────────────────── */
.legal-page {
  background: #f7f3ed;
  font-size: .97rem;
  line-height: 1.75;
  color: #2a1a0a;
}

/* ── Hero / page header ──────────────────────────────────────────────── */
.legal-hero {
  border-bottom: 3px solid rgba(201, 168, 76, .35);
  background: linear-gradient(135deg, var(--brand-dark) 0%, #2a0d0d 100%) !important;
}
.legal-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin: 0;
}
.legal-hero-sub {
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  margin: .5rem 0 0;
}

/* Breadcrumb inside hero */
.breadcrumb-legal {
  --bs-breadcrumb-divider-color: rgba(255,255,255,.4);
  --bs-breadcrumb-item-active-color: rgba(255,255,255,.75);
  font-size: .82rem;
  margin: 0;
  padding: 0;
  background: none;
}
.breadcrumb-legal .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.35);
}

/* ── Table of contents ───────────────────────────────────────────────── */
.legal-toc {
  background: #fff;
  border: 1px solid rgba(201,168,76,.3);
  border-left: 4px solid var(--brand-gold);
  border-radius: .75rem;
  padding: 1.5rem 2rem;
}
.legal-toc-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}
.legal-toc-list {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2rem;
}
.legal-toc-list li { break-inside: avoid; margin-bottom: .3rem; }
.legal-toc-link {
  color: var(--brand-crimson);
  text-decoration: none;
  font-size: .87rem;
  font-weight: 600;
  transition: color .2s;
}
.legal-toc-link:hover { color: var(--brand-gold); text-decoration: underline; }

@media (max-width: 575px) {
  .legal-toc { padding: 1.25rem 1.25rem; }
  .legal-toc-list { columns: 1; }
}

/* ── Content cards ───────────────────────────────────────────────────── */
.legal-card {
  background: #fff;
  border-radius: .85rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}
.legal-card-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--brand-light);
  border-bottom: 1px solid rgba(201,168,76,.25);
}
.legal-card-header h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0;
}
.legal-card-body {
  padding: 1.5rem;
}
.legal-card-body p:last-child { margin-bottom: 0; }

/* ── Typography helpers ──────────────────────────────────────────────── */
.legal-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-crimson);
  margin-bottom: .35rem;
}
.legal-link {
  color: var(--brand-crimson);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
  transition: color .2s;
}
.legal-link:hover { color: var(--brand-gold); text-decoration: underline; }

/* ── Address block ───────────────────────────────────────────────────── */
.legal-address {
  background: var(--brand-light);
  border-left: 3px solid var(--brand-gold);
  padding: .75rem 1rem;
  border-radius: 0 .5rem .5rem 0;
  font-size: .9rem;
  line-height: 1.8;
}

/* ── List style ──────────────────────────────────────────────────────── */
.legal-list {
  padding-left: 0;
  list-style: none;
}
.legal-list li {
  padding: .35rem 0 .35rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: .9rem;
}
.legal-list li:last-child { border-bottom: none; }
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .75rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-gold);
}

/* ── Info / highlight box ────────────────────────────────────────────── */
.legal-info-box {
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.4);
  border-radius: .5rem;
  padding: .85rem 1.1rem;
  font-size: .88rem;
  margin-top: 1rem;
}

/* ── Data table ──────────────────────────────────────────────────────── */
.legal-table {
  font-size: .85rem;
}
.legal-table thead th {
  background: var(--brand-light);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-dark);
  border-color: rgba(201,168,76,.3);
}
.legal-table td {
  vertical-align: middle;
  border-color: rgba(0,0,0,.06);
}
.legal-table tr:last-child td { border-bottom: none; }

/* ── Rights cards (Betroffenenrechte) ────────────────────────────────── */
.rights-card {
  background: var(--brand-light);
  border-left: 3px solid var(--brand-crimson);
  transition: border-color .2s, box-shadow .2s;
}
.rights-card:hover {
  border-left-color: var(--brand-gold);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.rights-art {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(123,10,10,.6);
  white-space: nowrap;
}
.rights-title {
  font-size: .82rem;
  color: var(--brand-dark);
}
.rights-desc {
  font-size: .78rem;
  color: #6b5a42;
  line-height: 1.5;
}

/* ── Smooth scroll offset for anchors (sticky nav compensation) ──────── */
[id] { scroll-margin-top: 80px; }

/* ── Print styles ────────────────────────────────────────────────────── */
@media print {
  .navbar, footer, .btn, .breadcrumb-legal { display: none !important; }
  .legal-hero { padding: 1rem 0 !important; background: none !important; }
  .legal-hero-title { color: #000 !important; font-size: 1.5rem !important; }
  .legal-hero-sub   { color: #555 !important; }
  .legal-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  .legal-card-header { background: #f0f0f0 !important; }
  .legal-card-body  { padding: .75rem !important; }
  body { font-size: 11pt; background: #fff !important; }
  a { color: #000 !important; text-decoration: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .legal-toc { page-break-after: always; }
  .legal-card  { page-break-inside: avoid; }
}