/* ==========================================================================
   Share2Flow — Legal/Text-Seiten v8 (Impressum, Datenschutz, AGB, Widerruf).
   Gekapselt unter .legal + eigene Variablen → kein Konflikt mit Bootstrap/Shell.
   Für Komponente generic-sections.text (Template „Legal"). Basiert auf
   _preview/legal_v1.html (freigegeben). Auto-Inhaltsverzeichnis via s2f-legal.js.
   ========================================================================== */
.legal{
  --paper:#F4F7FF;--paper-2:#E6EDFF;--ink:#0B192F;--text:#3B475F;--muted:#8790A6;
  --line:rgba(11,25,47,.13);--blue:#3B5BDB;--cyan:#6B9AEB;--max:1320px;--ease:cubic-bezier(.16,1,.3,1);
  position:relative;padding:calc(96px + clamp(28px,4vw,56px)) 0 clamp(70px,9vw,120px);
  background:var(--paper);color:var(--text);font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
}
/* Der weiße 98px-Spacer der Shell würde über dem hellen Legal-Hero als Streifen
   sichtbar → auf Legal-Seiten ausblenden; Nav-Freihöhe steckt im .legal-Padding. */
.s2f-shell-spacer{display:none}
.legal *,.legal *::before,.legal *::after{box-sizing:border-box}
.legal::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 40% at 50% -8%,rgba(107,154,235,.16),transparent 66%)}
.legal .serif{font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-weight:400}
.legal__wrap{position:relative;z-index:1;width:min(calc(100% - 48px),var(--max));margin-inline:auto}

.legal__head{max-width:820px;margin:0 0 clamp(32px,4vw,52px)}
.legal__head h1{margin:0;font-size:clamp(38px,5vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1;text-wrap:balance;color:var(--ink)}
.legal__head h1 .serif{color:var(--blue)}
.legal__sub{margin:16px 0 0;color:var(--text);font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:62ch}
.legal__grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(30px,4vw,64px);align-items:start}

/* Inhaltsverzeichnis (sticky, auto aus h2) */
.legal__toc{position:sticky;top:110px}
.legal__toc h2{margin:0 0 14px;color:var(--muted);font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.legal__toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px;border-left:1px solid var(--line)}
.legal__toc a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--text);font-size:15px;line-height:1.4;transition:color .2s,border-color .2s}
.legal__toc a:hover{color:var(--ink);border-left-color:var(--line)}
.legal__toc a.is-active{color:var(--blue);border-left-color:var(--blue);font-weight:600}

/* Textkörper (Content-HTML aus Strapi) */
.legal__body{max-width:74ch;font-size:17px;line-height:1.72;color:var(--text)}
.legal__body h2{margin:44px 0 14px;color:var(--ink);font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.2;scroll-margin-top:110px}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{margin:28px 0 10px;color:var(--ink);font-size:19px;font-weight:700}
.legal__body p{margin:0 0 16px}
.legal__body strong,.legal__body b{color:var(--ink);font-weight:700}
.legal__body a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.legal__body ul,.legal__body ol{margin:0 0 18px;padding-left:22px}
.legal__body li{margin:0 0 8px}
.legal__body hr{margin:32px 0;border:0;border-top:1px solid var(--line)}
.legal__body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.legal__body th,.legal__body td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.legal__body th{background:var(--paper-2);color:var(--ink);font-weight:700}
.legal__updated{display:inline-flex;align-items:center;gap:8px;margin:0 0 30px;padding:7px 14px;border-radius:999px;background:rgba(59,91,219,.08);color:var(--blue);font-size:14px;font-weight:700}
.legal__updated::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}

@media(max-width:900px){
  .legal__grid{grid-template-columns:1fr;gap:8px}
  .legal__toc{position:static;margin-bottom:26px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.6)}
  .legal__toc ol{border-left:0}
  .legal__toc a{padding-left:0;border-left:0}
  .legal__toc a.is-active{border-left:0}
}
@media(prefers-reduced-motion:reduce){.legal__toc a{transition:none}}