/* =============================================================================
   legal.css — Rechtsseiten (Impressum/AGB/Datenschutz/Barrierefreiheit)
   Schlichtes, gut lesbares Layout im Markendesign: kompakter Header +
   Inhaltsverzeichnis (sticky) + Prosa. Wird NACH style.css geladen.
   ============================================================================= */

.page-legal{ background:var(--bg); }
.page-legal .scene{ display:none; }

/* ---- Header -------------------------------------------------------- */
.legal-hero{
  position:relative; padding:calc(84px + clamp(40px,8vw,84px)) 24px clamp(34px,5vw,52px);
  text-align:center; overflow:hidden;
  background:radial-gradient(120% 140% at 50% -20%, rgba(230,0,126,.18), transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.legal-hero__eyebrow{ font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-hot); margin:0 0 .6em; }
.legal-hero h1{ font-size:clamp(2.1rem,6vw,3.4rem); font-weight:900; letter-spacing:-.02em; line-height:1.05; color:#fff; margin:0; }
.legal-hero__sub{ max-width:620px; margin:1em auto 0; font-size:clamp(.98rem,2vw,1.1rem); color:var(--text-dim,rgba(255,255,255,.7)); line-height:1.55; }
.legal-hero__stand{ display:inline-block; margin-top:1.4em; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:.45em 1em; border-radius:999px; }

/* ---- Layout: TOC + Inhalt ------------------------------------------ */
.legal-wrap{ max-width:1120px; margin:0 auto; padding:clamp(40px,6vw,64px) 24px clamp(70px,10vw,120px);
  display:grid; grid-template-columns:248px minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:start; }

.legal__toc{ position:sticky; top:100px; align-self:start; }
.legal__toc-title{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); margin:0 0 14px; }
.legal__toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.legal__toc a{ display:block; padding:.5em .8em; border-radius:10px; font-size:.9rem; line-height:1.35; color:rgba(255,255,255,.66);
  border-left:2px solid transparent; transition:color .2s, background .2s, border-color .2s; }
.legal__toc a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.legal__toc a.is-current{ color:var(--pink-hot); border-left-color:var(--pink-hot); background:rgba(230,0,126,.08); }

/* ---- Prosa --------------------------------------------------------- */
.legal{ min-width:0; max-width:780px; }
.legal__sec{ margin:0 0 clamp(34px,5vw,48px); scroll-margin-top:96px; }
.legal__sec:last-child{ margin-bottom:0; }
.legal__sec > h2{ font-size:clamp(1.3rem,3.2vw,1.75rem); font-weight:800; color:#fff; line-height:1.2; margin:0 0 16px;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1); }
.legal__sec h3{ font-size:1.08rem; font-weight:700; color:#fff; margin:26px 0 8px; }
.legal__sec p{ font-size:1rem; line-height:1.75; color:rgba(255,255,255,.74); margin:0 0 14px; }
.legal__sec ul, .legal__sec ol{ margin:0 0 16px; padding-left:1.3em; color:rgba(255,255,255,.74); }
.legal__sec li{ font-size:1rem; line-height:1.7; margin:0 0 7px; }
.legal__sec li::marker{ color:var(--pink-hot); }
.legal__sec a{ color:var(--pink-hot); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; word-break:break-word; }
.legal__sec a:hover{ color:var(--pink-soft); }
.legal__sec strong{ color:#fff; font-weight:700; }
.legal__sec address{ font-style:normal; color:rgba(255,255,255,.82); line-height:1.7; }

/* Hervorgehobener Adress-/Info-Block */
.legal__card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-card);
  padding:22px 26px; margin:0 0 18px; }
.legal__card p{ margin:.2em 0; color:rgba(255,255,255,.85); }
.legal__card strong{ color:#fff; }

/* Hinweis-Box (z. B. „bitte juristisch prüfen lassen" / wichtige Hinweise) */
.legal__note{ display:flex; gap:13px; align-items:flex-start; background:rgba(230,0,126,.08); border:1px solid rgba(230,0,126,.28);
  border-radius:14px; padding:16px 18px; margin:0 0 22px; font-size:.92rem; line-height:1.6; color:rgba(255,255,255,.82); }
.legal__note i{ color:var(--pink-hot); margin-top:.2em; flex:none; }

/* ---- Mobile -------------------------------------------------------- */
@media (max-width:860px){
  .legal-wrap{ grid-template-columns:1fr; gap:30px; }
  .legal__toc{ position:static; top:auto; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:var(--r-card); padding:18px 18px; }
  .legal{ max-width:none; }
  .legal__toc ol{ gap:0; }
}