/* Rechtsseiten (Impressum, Datenschutz) – 2026-11-10
   Grauer Grund wie die obere Zone der Startseite, Text im Outline-Panel
   (Linie → Band → Panel, Werte aus sections-v2.css), Datenschutz mit
   mitlaufendem Inhaltsverzeichnis. Eigene Datei, nur auf diesen Seiten geladen. */

/* Die Seitenanimation blendet den Header nur auf Seiten mit Hero ein.
   Hier gibt es keinen Hero, also ist er von Anfang an sichtbar. */
html.motion .page-legal .hdr { opacity: 1; }

body.page-legal { background: #f2f2f2; }

.legal-main { padding: clamp(128px, 15vw, 176px) 20px clamp(80px, 9vw, 128px); }
.legal-wrap { max-width: 1160px; margin: 0 auto; }

/* Titelblock im Stil der Abschnitts-Headlines */
.legal-head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 48px); }
.legal-head .eyebrow { margin-bottom: 18px; }
.legal-head .h2 { font-size: clamp(40px, 5.2vw, 68px); }
.legal-head .legal-lead { margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: var(--slate); max-width: 600px; }

.legal-grid { display: grid; gap: 28px; align-items: start; }
.legal-grid.has-toc { grid-template-columns: 280px minmax(0, 1fr); }

/* Inhaltsverzeichnis: Kartenhülle, läuft beim Scrollen mit */
.legal-aside { position: sticky; top: 112px; }
.legal-toc {
  padding: 22px 22px 18px; border-radius: 24px;
  background: var(--glass-bg); box-shadow: var(--glass-shadow-flat), 0 12px 24px -16px rgba(0, 0, 0, .18);
}
.legal-toc p { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal-toc a {
  display: flex; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 10px;
  font-size: 14px; line-height: 1.35; color: var(--charcoal); text-decoration: none; transition: background .2s, color .2s;
}
.legal-toc .toc-num { min-width: 18px; color: #a1a1a8; font-variant-numeric: tabular-nums; }
.legal-toc a:hover, .legal-toc a.is-active { background: #ececec; color: var(--obsidian); }
.legal-toc a.is-active .toc-num { color: var(--gold); }

/* Outline-Rahmen: Linie (Verlauf) → Band → Panel mit Schatten im Band */
.legal-frame {
  --w: 14px; --r: 32px;
  padding: var(--w); border-radius: calc(var(--r) + var(--w) + 1px);
  border: 1px solid transparent;
  background: var(--ol-band-grad) padding-box, var(--ol-line-grad) border-box;
  overflow: hidden;
}
.legal {
  border-radius: var(--r); padding: clamp(28px, 4.4vw, 56px) clamp(22px, 4.6vw, 64px);
  background: var(--glass-bg); box-shadow: var(--ol-panel-inset), var(--ol-panel-ring), var(--ol-shadow);
  color: var(--charcoal); font-size: 16px; line-height: 1.72;
}

.legal-sec + .legal-sec { margin-top: 34px; padding-top: 30px; border-top: 1px solid #ececec; }
.legal h2 { margin: 0 0 12px; font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: var(--obsidian); scroll-margin-top: 120px; }
.legal h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 600; color: var(--obsidian); }
.legal p { margin: 0 0 12px; }
.legal p:last-child, .legal ul:last-child { margin-bottom: 0; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 5px 0; }
.legal li::marker { color: var(--gold); }
.legal a { color: var(--obsidian); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.legal strong { color: var(--obsidian); font-weight: 600; }
.legal-caps { color: var(--obsidian); font-weight: 600; }
.legal-stand { display: inline-block; margin-bottom: 18px; padding: 4px 12px; border-radius: 999px; background: #efefef; font-size: 13px; color: var(--slate); }

/* Impressum: Beschriftung links, Angaben rechts */
.legal--rows .legal-sec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 32px; }
.legal--rows h2 { margin: 2px 0 0; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--slate); }
.legal--rows .legal-sec + .legal-sec { margin-top: 24px; padding-top: 22px; }

@media (max-width: 960px) {
  .legal-grid.has-toc { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .legal-toc ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 640px) {
  .legal-main { padding-inline: 12px; }
  .legal-frame { --w: 8px; --r: 24px; }
  .legal { font-size: 15px; line-height: 1.68; }
  .legal-toc ol { columns: 1; }
  .legal--rows .legal-sec { grid-template-columns: 1fr; gap: 4px; }
  .legal-head .legal-lead { font-size: 16px; }
  .legal-head .h2 { font-size: clamp(30px, 9.4vw, 40px); overflow-wrap: anywhere; }
}