/* Rechtliches (25.10.2026), Aufbau in src/components/seite/Recht.astro. Ruhig gesetzt: keine Bewegung außer dem hellen Eintrag im Inhaltsverzeichnis.
   Die Teilung liegt bei 5/12, rechts bleibt der Text unter 68 Zeichen. Farben über die Kanäle (Tag und Nacht). */
.recht { padding: calc(var(--kopf) + clamp(28px, 3vw, 48px)) var(--rand) clamp(96px, 8vw, 160px); }
.recht-leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--zl); border-bottom: 0; }
.recht-leiste ul { list-style: none; margin: 0; padding: 0; display: flex; }
.recht-leiste a { display: block; padding: 14px clamp(14px, 1.4vw, 22px); border-right: 1px solid var(--zl); color: var(--leise); text-decoration: none;
                  font: 500 14px/1.2 var(--schrift); transition: color .25s var(--aus), background-color .25s var(--aus); }
.recht-leiste a[aria-current="page"] { color: var(--nacht); background: var(--sand); }
@media (hover: hover) and (pointer: fine) { .recht-leiste a:not([aria-current]):hover { color: var(--sand); background: rgb(var(--vg-k) / .05); } }
.recht-stand { margin: 0; padding: 0 clamp(14px, 1.4vw, 22px); color: var(--leise); font: 500 13px/1.2 var(--schrift); font-variant-numeric: tabular-nums; }

.recht-raster { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--zl); }
.recht-plus { left: calc(5 / 12 * 100%); top: 0; color: var(--zp); }
.recht-seite { border-right: 1px solid var(--zl); }
.recht-steht { position: sticky; top: var(--kopf); padding-bottom: clamp(28px, 3vw, 48px); }   /* Titel und Inhalt bleiben stehen, solange der Text läuft */
.recht-titel { margin: 0; padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 36px) 0;
               font: 320 clamp(44px, 26px + 3.4vw, 96px)/.98 var(--schrift); letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
html.hell .recht-titel { font-weight: 300; }
.recht-inhalt { margin-top: clamp(32px, 3vw, 56px); }
.recht-inhalt ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zl); }
.recht-inhalt a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; padding: 11px clamp(20px, 2vw, 36px); border-bottom: 1px solid var(--zl);
                  color: var(--leise); text-decoration: none; font-size: 15px; line-height: 1.35; transition: color .25s var(--aus), background-color .25s var(--aus); }
.recht-nr { font: 500 12px/1 var(--schrift); font-variant-numeric: tabular-nums; color: var(--leise); transition: color .25s var(--aus); }
.recht-inhalt a.jetzt { color: var(--sand); }
.recht-inhalt a.jetzt .recht-nr { color: var(--sonne); }
html.hell .recht-inhalt a.jetzt .recht-nr { color: var(--sonne-700); }
@media (hover: hover) and (pointer: fine) { .recht-inhalt a:hover { color: var(--sand); background: rgb(var(--vg-k) / .04); } }

/* Text: nummerierte Abschnitte, Linie darüber, Nummer klein vor der Überschrift */
.recht-text { padding: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 64px) clamp(36px, 4vw, 72px); font-size: 16.5px; line-height: 1.62; letter-spacing: -.003em; color: rgb(var(--vg-k) / .86); }
.recht-text > section { max-width: 68ch; scroll-margin-top: calc(var(--kopf) + 24px); }
.recht-text > section + section { margin-top: clamp(40px, 3.6vw, 64px); padding-top: clamp(28px, 2.4vw, 40px); border-top: 1px solid var(--zl); }
.recht-text h2 { display: flex; gap: 14px; align-items: baseline; margin: 0 0 18px; font: 320 clamp(24px, 18px + .7vw, 32px)/1.15 var(--schrift); letter-spacing: -.025em; color: var(--sand); text-wrap: balance; }
html.hell .recht-text h2 { font-weight: 300; }
.recht-text h2 .recht-nr { flex: none; translate: 0 -.35em; }
.recht-text h3 { margin: 26px 0 8px; font: 500 16.5px/1.35 var(--schrift); color: var(--sand); }
.recht-text p, .recht-text ul, .recht-text address { margin: 0 0 14px; }
.recht-text address { font-style: normal; }
.recht-text ul { padding-left: 1.1em; }
.recht-text li + li { margin-top: 6px; }
.recht-text li::marker { color: rgb(var(--vg-k) / .45); }
.recht-text strong { font-weight: 500; color: var(--sand); }
.recht-knopf { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }   /* Cookie-Einstellungen im Text (28.10.) */
.recht-text :is(a, .recht-knopf) { color: var(--sand); text-decoration: underline; text-decoration-color: rgb(var(--vg-k) / .35); text-underline-offset: 3px; transition: text-decoration-color .25s var(--aus); }
@media (hover: hover) and (pointer: fine) { .recht-text :is(a, .recht-knopf):hover { text-decoration-color: var(--sonne); } }
.recht-gross { max-width: 64ch; text-transform: uppercase; letter-spacing: .01em; font-size: 14.5px; line-height: 1.6; }   /* Widerspruchsrecht nach Art. 21 DSGVO: gesetzlich hervorzuheben */
.recht-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; margin: 0 0 14px; }
.recht-angaben dt { color: var(--leise); }
.recht-angaben dd { margin: 0; }
.hier-text { padding: 2px 8px; border-radius: 2px; background: rgb(255 106 31 / .16); color: var(--sand); font-size: .92em; }   /* fehlende Angabe, nur im Entwurf */

@media (max-width: 860px) {
  .recht-leiste { flex-direction: column; align-items: stretch; }
  .recht-leiste ul { border-bottom: 1px solid var(--zl); }
  .recht-leiste li { flex: 1; }
  .recht-leiste a { text-align: center; padding: 13px 8px; }
  .recht-leiste li:last-child a { border-right: 0; }
  .recht-stand { padding: 12px 16px; }
  .recht-raster { grid-template-columns: minmax(0, 1fr); }
  .recht-plus { display: none; }
  .recht-seite { border-right: 0; border-bottom: 1px solid var(--zl); }
  .recht-steht { position: static; padding-bottom: 0; }
  .recht-inhalt ol { border-bottom: 0; }
  .recht-inhalt li:last-child a { border-bottom: 0; }
  .recht-text { padding-top: 32px; font-size: 16px; }
  .recht-angaben { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .recht-angaben dd + dt { margin-top: 8px; }
}
@media (min-width: 861px) and (max-height: 820px) { .recht-steht { position: static; } }   /* niedriger Bildschirm: das Inhaltsverzeichnis passte sonst nicht ganz hinein */