/* WebStärke · Rechtsseiten (Impressum, Datenschutz) und Antwortseite des Anfrageformulars – Neugestaltung 08.10.2026
   (Rechtsauftrag material/quellen/AUFTRAG-rechtlicher-abschluss-2026-10-08.txt; Prinzipien nach Mutabor/Jung von Matt, eigene Umsetzung).
   Weiße Fläche, tiefes Markenblau als einziger Akzent: Kopfzeile mit W-Logo und Textnavigation (aktive Seite unterstrichen), großer kräftiger
   Titel in Archivo neben einem klar begrenzten Himmelsfeld, feine Linie, danach redaktionelle Gruppen bzw. eine ruhige Lesespalte (Archivo in
   normaler Breite, 17–18 px, 60–75 Zeichen). Kein Text blendet ein, kein Parallax, kein Pinning, kein Lader; nur das Himmelsfeld zeigt sich
   einmal ruhig (html.recht-bewegt, nicht bei reduzierter Bewegung). Vollständig ohne JavaScript lesbar; Druck: nur Inhalt. */

.recht-seite {
  --rt-text: #161C2A; --rt-neben: #465064; --rt-leise: #5A6376; --rt-blau: #0B264D; --rt-linie: rgba(11, 38, 77, .14); --rt-linie-stark: rgba(11, 38, 77, .32);
  --rt-offen: #7A4500; --rt-offen-linie: #E2A746; --rt-max: 1240px; --rt-rand: clamp(20px, 5.2vw, 88px);
  --rt-lese: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  background: #FFFFFF; color: var(--rt-text); font: 400 clamp(17px, 1.24vw, 18px)/1.65 var(--rt-lese); font-stretch: 100%;
}
html:has(> .recht-seite) { background: #FFFFFF; }
.recht-seite main { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
.recht-seite .ohne-trennung, .recht-seite .rt-web { hyphens: none; -webkit-hyphens: none; }
.recht-seite .rt-web { overflow-wrap: anywhere; }
.recht-seite :focus-visible { outline: 2px solid var(--rt-blau); outline-offset: 3px; border-radius: 3px; }
.recht-seite .sprung { background: var(--rt-blau); }

/* Links: feine Unterstreichung, beim Zeigen/Fokus kräftiger */
.recht-seite main a, .rf a { color: var(--rt-blau); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: rgba(11, 38, 77, .38); transition: text-decoration-color .2s var(--ease), text-decoration-thickness .2s var(--ease); }
.recht-seite main a:hover, .rf a:hover, .recht-seite main a:focus-visible, .rf a:focus-visible { text-decoration-color: var(--rt-blau); text-decoration-thickness: 2px; }

/* ---------- Kopfzeile: W-Logo links, Textnavigation und „Zur Website“ rechts (im Dokumentfluss, überlagert nichts) ---------- */
.rk { max-width: calc(var(--rt-max) + 2 * var(--rt-rand)); margin: 0 auto; padding: 26px var(--rt-rand) 0; display: flex; align-items: center; gap: 18px 36px; flex-wrap: wrap; }
.rk__marke { display: inline-flex; color: var(--rt-blau); margin-right: auto; padding: 6px 0; }
.rk__logo { display: block; width: clamp(132px, 12vw, 164px); height: auto; fill: currentColor; }
.rk__nav { display: flex; gap: 28px; }
.rk__nav a, .rk__zurueck { position: relative; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; color: var(--rt-text); text-decoration: none;
  font: 560 15px/1 var(--rt-lese); font-stretch: 108%; letter-spacing: .005em; }
.rk__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--rt-blau); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.rk__nav a:hover::after { transform: scaleX(.35); }
.rk__nav a[aria-current="page"] { color: var(--rt-blau); font-weight: 640; }
.rk__nav a[aria-current="page"]::after { transform: none; }
.rk__zurueck { padding-left: 32px; border-left: 1px solid var(--rt-linie); }
.rk__zurueck span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(11, 38, 77, .3); transition: text-decoration-color .2s var(--ease); }
.rk__zurueck:hover span:first-child { text-decoration-color: var(--rt-blau); }
.rk__pfeil { display: inline-block; transition: transform .25s var(--ease); }
.rk__zurueck:hover .rk__pfeil, .rf__kontakt:hover .rk__pfeil { transform: translateX(3px); }

/* ---------- Einstieg: Rubrik, großer Titel, kurzer Satz; daneben ein klar begrenztes Himmelsfeld; darunter eine feine Linie ---------- */
/* Titel über die volle Breite (bricht nie im Wort), darunter links der einleitende Satz, rechts das Himmelsfeld */
.rh { max-width: calc(var(--rt-max) + 2 * var(--rt-rand)); margin: 0 auto; padding: clamp(36px, 6svh, 68px) var(--rt-rand) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kopf kopf" "text himmel"; gap: clamp(26px, 3.6svh, 40px) clamp(28px, 4.5vw, 72px); align-items: start; }
.rh__kopf { grid-area: kopf; }
.rh__text { grid-area: text; padding-top: 4px; }
.rh__titel { overflow-wrap: normal; word-break: keep-all; }
.rh__rubrik { margin-bottom: clamp(14px, 2svh, 22px); color: var(--rt-neben); font: 620 12.5px/1.2 var(--rt-lese); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }
.rh__titel { margin-left: -.04em; color: var(--rt-blau); font: 680 clamp(54px, 8.1vw, 116px)/.92 var(--display); font-stretch: 125%; letter-spacing: -.045em; hyphens: manual; }
.rh__lead { max-width: 30em; color: var(--rt-text); font: 400 clamp(18px, 1.45vw, 21px)/1.5 var(--rt-lese); }
.rh__himmel { grid-area: himmel; position: relative; min-height: clamp(140px, 12vw, 180px); border-radius: 6px; overflow: hidden;
  background: #2F5C9E url('../img/himmel/inhalt-d.webp') 62% 40% / cover no-repeat; }
.rh__zeichen { position: absolute; left: 22px; bottom: 20px; width: 46px; height: auto; fill: #FFFFFF; opacity: .92; }
html.recht-bewegt .rh__himmel { animation: rh-himmel .9s var(--ease) both; }
@keyframes rh-himmel { from { opacity: 0; clip-path: inset(0 0 0 18% round 6px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 6px); } }

/* ---------- Inhalt ---------- */
.rt { max-width: calc(var(--rt-max) + 2 * var(--rt-rand)); margin: clamp(40px, 6svh, 64px) auto 0; padding: 0 var(--rt-rand) clamp(72px, 10svh, 112px); }
.rt::before { content: ''; display: block; height: 1px; background: var(--rt-linie-stark); margin-bottom: clamp(36px, 5svh, 56px); }
.rt p + p { margin-top: .85em; }
.rt strong { font-weight: 640; color: var(--rt-text); }

/* Impressum: zwei redaktionelle Spalten mit gemeinsamer Ausrichtung */
.rt-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 112px); padding-bottom: clamp(40px, 6svh, 64px); }
.rt-etikett { margin-bottom: 16px; color: var(--rt-neben); font: 620 12.5px/1.2 var(--rt-lese); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }
.rt-name { color: var(--rt-blau); font: 660 clamp(30px, 2.8vw, 42px)/1.06 var(--display); font-stretch: 122%; letter-spacing: -.03em; }
.rt-marke { margin-top: 8px; color: var(--rt-text); font: 600 clamp(19px, 1.4vw, 21px)/1.3 var(--rt-lese); font-stretch: 112%; }
.rt-zeile { margin-top: 6px; }
.rt p.rt-zeile + p.rt-zeile { margin-top: 10px; }
.rt-adresse { margin-top: 18px; font-style: normal; line-height: 1.55; }
.rt-mail { font: 600 clamp(22px, 2vw, 29px)/1.2 var(--rt-lese); font-stretch: 108%; letter-spacing: -.01em; }
.rt-mail + .rt-zeile { margin-top: 20px; }
.rt-feld { display: block; margin-bottom: 2px; color: var(--rt-neben); font-size: .86em; font-weight: 560; letter-spacing: .01em; }
.rt-notiz { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--rt-offen-linie); }
.offen { color: var(--rt-offen); }

/* Abschnitte: starke Zwischenüberschrift links, Text rechts – getrennt durch feine Linien */
.rt-abschnitt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(32px, 6vw, 112px); /* gleiche Achse wie Anbieter/Kontakt */ padding: clamp(32px, 4.5svh, 48px) 0; border-top: 1px solid var(--rt-linie); }
.rt-abschnitt h2, .rt-teil h2 { color: var(--rt-blau); font: 640 clamp(21px, 1.7vw, 26px)/1.2 var(--display); font-stretch: 112%; letter-spacing: -.012em; hyphens: manual; }
.rt-fluss { max-width: 57ch; } /* ≈ 70 Zeichen je Zeile (ch = Ziffernbreite, Archivo-Text ist schmaler) */
.rt-liste { margin: 0; }
.rt-liste > div + div { margin-top: 18px; }
.rt-liste dt { color: var(--rt-text); font-weight: 640; }
.rt-liste dd { margin: 2px 0 0; }
.rt-stand { margin-top: clamp(32px, 4svh, 44px); padding-top: 20px; border-top: 1px solid var(--rt-linie); color: var(--rt-leise); font-size: .9em; }
.rt-leise { color: var(--rt-leise); font-size: .94em; }

/* Datenschutz: schmale Themennavigation links (dezent haftend), daneben eine durchgehende Lesespalte */
.rt--spalten { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 112px); align-items: start; }
.rt--spalten::before { grid-column: 1 / -1; }
.rt-toc { position: sticky; top: 28px; padding-top: 4px; }
.rt-toc__titel { margin-bottom: 14px; color: var(--rt-neben); font: 620 12.5px/1.2 var(--rt-lese); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }
.rt-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rt-linie); }
.rt-toc li a { position: relative; display: block; padding: 7px 0 7px 16px; color: var(--rt-neben); text-decoration: none; font: 500 15px/1.35 var(--rt-lese); hyphens: manual;
  transition: color .2s var(--ease); }
.rt-toc li a::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--rt-blau); transform: scaleY(0); transition: transform .25s var(--ease); }
.rt-toc li a:hover { color: var(--rt-blau); }
.rt-toc li a[aria-current="true"] { color: var(--rt-blau); font-weight: 620; }
.rt-toc li a[aria-current="true"]::before { transform: none; }
.rt-lesen { max-width: 57ch; }
.rt-teil { padding: 0 0 clamp(36px, 5svh, 52px); scroll-margin-top: 28px; }
.rt-teil + .rt-teil { padding-top: clamp(32px, 4.5svh, 48px); border-top: 1px solid var(--rt-linie); }
.rt-teil h2 { margin-bottom: 18px; }
.rt-anschrift { line-height: 1.6; }
.rt-hervor { padding: 14px 18px; border-left: 3px solid var(--rt-blau); background: #F3F6FB; }
.rt-nachoben { margin-top: 8px; }

/* ---------- Fuß: kompakt – Marke, Website und Rechtslinks, kleines Kontaktangebot ---------- */
.rf { border-top: 1px solid var(--rt-linie); background: #F6F8FB; }
.rf__innen, .rf__unten { max-width: calc(var(--rt-max) + 2 * var(--rt-rand)); margin: 0 auto; padding-left: var(--rt-rand); padding-right: var(--rt-rand); }
.rf__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding-top: 34px; padding-bottom: 26px; }
.rf__marke { display: inline-flex; color: var(--rt-blau); margin-right: auto; }
.rf__logo { width: 128px; height: auto; fill: currentColor; }
.rf__nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.rf__nav a { font: 520 15px/1.4 var(--rt-lese); color: var(--rt-text); }
.rf__nav a[aria-current="page"] { color: var(--rt-blau); font-weight: 640; text-decoration-color: var(--rt-blau); }
.rf .rf__kontakt { display: inline-flex; align-items: center; gap: .5em; font: 620 15px/1.4 var(--rt-lese); font-stretch: 108%; }
.rf__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; padding-bottom: 30px; border-top: 1px solid var(--rt-linie); color: var(--rt-leise); font-size: 14px; }
.rf__unten p { margin: 0; }
.rf__direkt a { color: var(--rt-text); text-decoration: underline; text-decoration-color: var(--rt-linie-stark); text-underline-offset: .22em; }

/* ---------- Antwortseite des Formulars (ohne JavaScript) ---------- */
.rh--knapp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text"; }
.rh--knapp .rh__titel { font-size: clamp(40px, 5.2vw, 72px); line-height: .98; }
.antwort { max-width: 64ch; }
.antwort__liste { margin: 0 0 1em; padding-left: 1.2em; }
.antwort__liste li + li { margin-top: 6px; }
.antwort__aktion { margin-top: 1.6em; }
.antwort__aktion a { font-weight: 620; }

/* ---------- schmalere Bildschirme ---------- */
@media (max-width: 1080px) {
  .rt--spalten { grid-template-columns: minmax(0, 1fr); }
  .rt-toc { position: static; margin-bottom: clamp(32px, 5svh, 48px); padding: 20px 22px; border-radius: 6px; background: #F4F7FB; }
  .rt-toc ol { border-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .rt-toc li a { padding: 7px 0; }
  .rt-toc li a::before { display: none; }
}
@media (max-width: 860px) {
  .rh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text" "himmel"; }
  .rh__himmel { min-height: 132px; }
  .rt-paar, .rt-abschnitt { grid-template-columns: minmax(0, 1fr); }
  .rt-abschnitt { gap: 14px; }
}
@media (max-width: 600px) {
  .recht-seite { font-size: 16.5px; }
  .rk { padding-top: 14px; gap: 4px 20px; }
  .rk__logo { width: 124px; }
  .rk__zurueck { padding-left: 0; border-left: 0; }
  .rk__nav { order: 3; flex-basis: 100%; gap: 24px; border-top: 1px solid var(--rt-linie); }
  .rh { padding-top: 26px; }
  .rh__titel { font-size: clamp(36px, 10.6vw, 56px); }
  .rh__lead { font-size: 18px; }
  .rh__himmel { min-height: 112px; }
  .rh__zeichen { width: 34px; left: 16px; bottom: 14px; }
  .rt-toc { padding: 16px 18px; }
  .rt-toc ol { grid-template-columns: minmax(0, 1fr); }
  .rt-toc li a { padding: 5px 0; }
  .rt-mail { font-size: 21px; overflow-wrap: anywhere; }
  .rf__innen { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduzierte Bewegung: alles sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  html.recht-bewegt .rh__himmel { animation: none; }
  .rk__nav a::after, .rt-toc li a::before, .rk__pfeil { transition: none; }
}

/* ---------- Druck: nur Inhalt ---------- */
@media print {
  .recht-seite { font-size: 11pt; color: #000; }
  .sprung, .rk__nav, .rk__zurueck, .rh__himmel, .rt-toc, .rf__innen nav, .rf__kontakt, .rt-nachoben { display: none !important; }
  .rk, .rh, .rt, .rf__innen, .rf__unten { max-width: none; padding-left: 0; padding-right: 0; }
  .rh { display: block; padding-top: 12pt; }
  .rh__titel { font-size: 34pt; color: #000; }
  .rt--spalten, .rt-abschnitt, .rt-paar { display: block; }
  .rt-paar > div + div, .rt-abschnitt .rt-fluss { margin-top: 10pt; }
  .rt-teil, .rt-abschnitt { break-inside: avoid-page; }
  .recht-seite main a { color: #000; text-decoration: underline; }
  .rf { background: none; }
}