/* Rechtsseiten (Impressum, Datenschutz) — Aufbau nach Blenk (NN Brain › impressum.md, Anhang 3).
   Links die Leiste mit Titel und nummerierter Gliederung, rechts das „Blatt“.
   Ab 1101 px fährt die Gliederung beim Scrollen mit (sticky), darunter einspaltig ohne Gliederung.
   Gliederung und Nummern schreibt _bausteine/normalisiere-recht.py — nicht von Hand pflegen. */

main.recht-seite{padding:0}
.recht{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(180deg,#F8F8F5 0%,#F3F1EC 100%);
  padding:calc(94px + clamp(40px,6vh,72px)) clamp(18px,4vw,40px) clamp(64px,10vh,120px)}
.recht-rahmen{position:relative;max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}

/* Leiste */
.recht-leiste .page-eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--green-dark);
  margin-bottom:16px;display:inline-flex;align-items:center;gap:14px}
.recht-leiste .page-eyebrow::before{content:"";width:24px;height:1px;background:var(--green)}
.recht-leiste h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,3.6vw,54px);line-height:1.05;
  color:var(--text);margin:0 0 14px;hyphens:auto;-webkit-hyphens:auto}
.recht-unter{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);
  line-height:1.6;margin:0 0 4px}
.recht-mit{padding-top:18px;margin-top:14px;border-top:1px solid rgba(99,136,137,.35)}
.recht-index ol{list-style:none;display:grid;gap:2px;margin:0;padding:0}
.recht-index a{display:flex;align-items:baseline;gap:12px;padding:6px 10px 6px 12px;margin-left:-14px;
  font-size:15.5px;font-weight:400;line-height:1.35;color:#333;text-decoration:none;border-left:2px solid transparent;
  border-radius:0 6px 6px 0;transition:color .2s,border-color .2s,background .2s}
.recht-index a .nr{font-family:var(--serif);font-size:15px;color:var(--green);min-width:22px;font-variant-numeric:lining-nums}
.recht-index a:hover{color:var(--green-dark);background:rgba(255,255,255,.7)}
.recht-index a[aria-current]{color:var(--green-deep);font-weight:500;border-left-color:var(--green);background:#fff}
.recht-index a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.recht-wechsel{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);text-decoration:none}
.recht-wechsel svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .2s}
.recht-wechsel:hover{color:var(--green-dark)}
.recht-wechsel:hover svg{transform:translateX(4px)}

/* Blatt */
.recht-blatt{position:relative;background:#fff;border-top:4px solid var(--green);border-radius:0 0 8px 8px;
  box-shadow:0 1px 0 var(--warm-gray),0 24px 60px -30px rgba(31,47,47,.28);
  padding:clamp(28px,4vw,60px) clamp(22px,4.4vw,68px) clamp(32px,4vw,56px)}
.recht-einleitung{padding-bottom:clamp(22px,3.2vh,32px);border-bottom:1px solid var(--warm-gray)}
.recht-einleitung p{font-size:16px;font-weight:300;line-height:1.85;color:#333;margin:0 0 .9em}
.recht-einleitung p:last-child{margin-bottom:0}
.recht-abschnitt{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:8px;
  padding:clamp(22px,3.2vh,34px) 0;border-bottom:1px solid var(--warm-gray)}
.recht-abschnitt:first-child{padding-top:6px}
.recht-abschnitt:last-child{border-bottom:0;padding-bottom:0}
.recht-nr{grid-row:1/span 2;font-family:var(--serif);font-size:30px;line-height:1;color:var(--green);opacity:.9;padding-top:2px;
  font-variant-numeric:lining-nums}
.recht-abschnitt h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.2;
  color:var(--text);margin:0 0 14px}
.recht-text p{font-size:16px;font-weight:300;line-height:1.85;color:#333;margin:0 0 .9em}
.recht-text p:last-child{margin-bottom:0}
.recht-text p b,.recht-text p strong{font-weight:500;color:var(--text)}
.recht-text ul{margin:0 0 .9em 18px;padding:0}
.recht-text ul:last-child{margin-bottom:0}
.recht-text li{font-size:16px;font-weight:300;line-height:1.85;color:#333;margin-bottom:6px;padding-left:6px}
.recht-text a{color:var(--green-dark);text-decoration:none;font-weight:500;   /* keine Unterstreichung (Christian, 13.10.2026) */
 
  overflow-wrap:anywhere;transition:color .2s}
.recht-text a:hover{color:var(--green)}
.recht-text .nn-marke{display:inline-block;margin-top:18px;text-decoration:none}
.recht-text .nn-marke img{width:clamp(200px,26vw,260px);height:auto;display:block}

/* Breit: Titel scrollt weg, Gliederung und Wechsel-Link fahren mit.
   overflow:clip an .recht statt hidden — hidden machte .recht zum Scroll-Container, dann greift sticky nicht. */
@media (min-width:1101px){
  .recht-leiste{align-self:stretch}
  .recht-leiste-innen{display:contents}
  .recht-mit{position:sticky;top:122px}   /* Kopf abgescrollt 94 px + 28 px */
}
@media (max-width:1100px){
  .recht-rahmen{grid-template-columns:1fr;gap:28px}
  .recht-index{display:none}
  .recht-mit{border-top:0;padding-top:0;margin-top:6px}
  .recht-wechsel{margin-top:4px}
}
@media (max-width:600px){
  .recht{padding:calc(94px + 26px) 14px 56px}
  .recht-leiste h1{font-size:36px}
  .recht-blatt{padding:26px 20px 30px}
  .recht-abschnitt{grid-template-columns:1fr}
  .recht-nr{grid-row:auto;font-size:22px;margin-bottom:6px}
  .recht-abschnitt h2{font-size:23px}
  .recht-text p,.recht-text li,.recht-einleitung p{font-size:15px}
}

/* Kontrastmodus und Druck */
html[data-contrast="high"] .recht{background:#fff}
html[data-contrast="high"] .recht-index a .nr,html[data-contrast="high"] .recht-nr{color:#000;opacity:1}
@media print{
  .recht{padding:0;background:#fff}
  .recht-rahmen{display:block}
  .recht-mit{display:none}
  .recht-blatt{box-shadow:none;border-top:0;padding:0}
}