/* Rechtsseiten Routenplaner (AGB, AVV) — HANS-04. Ergänzt landing.css, ändert sie nicht.
   · Gliederungsnummern stehen als Text im Dokument (<span class="nr">), damit „§ 8“ per Strg+F find- und kopierbar ist
     (Entscheid Constantin 22.09.; CSS-Zähler waren es nicht, gemessen). Gegen Drift wacht die Abnahme: lückenlos,
     Verzeichnis = Überschrift, a.verweis = Nummer seines Ziels. .par = „§ n“, .anl = „Anlage n“, ohne Klasse = Präambel.
   · EIN Umbruchpunkt (1100 px): darüber Verzeichnis links, darunter aufklappbar oben. recht.js liest ihn
     nicht als Zahl, sondern an --art (links | oben) ab. */

[hidden]{display:none !important}
:root{--leiste-h:0px}

/* ── Kopf: Rückweg wie impressum.html. Der Link ist ein Flex-Behälter (landing.css) — ein führendes Leerzeichen im
   <span> fiele weg, deshalb &nbsp; im Dokument. ── */
.kopf-nav .zurueck-lang{white-space:nowrap}

/* ── Raster: Verzeichnis | Text ── */
.recht{max-width:var(--huelle);margin:0 auto;padding:48px 64px 0;display:grid;
  grid-template-columns:minmax(200px,260px) minmax(0,740px);column-gap:80px;align-items:start}

/* ── Verzeichnis ── */
.verzeichnis-huelle{position:sticky;top:calc(var(--kopf-h) + 32px);max-height:calc(100vh - var(--kopf-h) - 64px);
  overflow:auto;overscroll-behavior:contain;padding-bottom:16px}
.verzeichnis{--art:links}
.verzeichnis-dach{margin-bottom:14px}
/* Breit ist das Verzeichnis offen (recht.js) und der Knopf weg. Ohne Skript bleibt es zu — dann bleibt der Knopf da. */
.verzeichnis summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--em-400)}
.verzeichnis[open] summary{display:none}
.verzeichnis-liste{display:flex;flex-direction:column;border-left:1px solid var(--linie)}
.verzeichnis-liste a{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:7px 12px 7px 14px;margin-left:-1px;
  border-left:2px solid transparent;color:var(--text-2);text-decoration:none;font-size:14.5px;line-height:1.35}
.verzeichnis-liste a:hover{color:var(--text)}
.verzeichnis-liste a[aria-current]{color:var(--text);border-left-color:var(--em-400)}
/* Der Link ist ein Flex-Behälter: Nummer und Text je EIN Kind (.nr, .vz-text) — loser Text zerfiele in Einzelteile */
.verzeichnis-liste .vz-text{min-width:0}
.verzeichnis-liste .nr{flex:none;min-width:2.6em;color:var(--leise);font-variant-numeric:tabular-nums;white-space:nowrap}
.verzeichnis-liste .anl a{flex-direction:column;gap:2px}
.verzeichnis-liste .anl .nr{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.verzeichnis-liste li:not(.anl) + .anl{margin-top:10px;padding-top:10px;border-top:1px solid var(--linie)}

/* ── Titel ── */
.recht-kopf{display:flex;flex-direction:column;gap:10px;padding-bottom:28px;border-bottom:1px solid var(--linie)}
.recht-kopf h1{font-size:44px;line-height:1.08;font-weight:700;text-wrap:balance}
.recht-stand{font-size:14.5px;color:var(--leise)}

/* ── Abschnitte ── */
.recht-text{min-width:0}
.abschnitt{padding-top:40px}
.abschnitt h2{font-family:var(--titel);font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.01em;
  padding-left:2.6em;text-indent:-2.6em}
.abschnitt h2 .nr{display:inline-block;min-width:2.35em;text-indent:0;color:var(--em-400);font-variant-numeric:tabular-nums;white-space:nowrap}
.abschnitt:not(.par) h2{padding-left:0;text-indent:0}
.abschnitt.anl{margin-top:24px;border-top:1px solid var(--linie)}
.abschnitt.anl h2 .nr{display:block;min-width:0;margin-bottom:6px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--em-400)}

/* Was setzen.mjs aus der Quelle macht: Absätze, Listen, Tabellen, Zwischentitel. Nummerierte Absätze als Text, damit „Abs. 2“
   findbar bleibt: <p class="absatz" id="<abschnitt>-abs-<k>"><span class="nr">(1)</span> …</p> — hängender Einzug,
   Abnahme prüft (1)…(k) je Abschnitt und dass jeder a.verweis auf das Ziel mit genau dieser Nummer zeigt. */
.abschnitt > * + *{margin-top:14px}
.abschnitt h2 + *{margin-top:16px}
.abschnitt p,.abschnitt li{color:var(--text-2);font-size:16.5px;line-height:1.7}
.abschnitt li + li{margin-top:8px}
.abschnitt .absatz{padding-left:2.4em;text-indent:-2.4em}
.abschnitt .absatz .nr{display:inline-block;min-width:2.15em;text-indent:0;color:var(--leise);font-variant-numeric:tabular-nums}
.abschnitt ul > li{position:relative;padding-left:1.4em}
.abschnitt ul > li::before{content:"–";position:absolute;left:0;color:var(--leise)}
.abschnitt table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.abschnitt th,.abschnitt td{padding:10px 14px 10px 0;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}   /* „Unterauftragsverarbeiter“ je Spalte trieb die Tabelle auf 918 px bei 740 px Spalte */
.abschnitt th{color:var(--text);font-weight:600;border-bottom-color:var(--linie-stark)}
.abschnitt td{color:var(--text-2)}
.abschnitt .tabelle{margin-top:14px}
.abschnitt h3{margin-top:26px;font-size:17px;line-height:1.4;font-weight:600;color:var(--text)}
.abschnitt h3 + *{margin-top:10px}
/* Unterliste eines Absatzes (Begriffe, Gruppen): Ziffern der Liste, eingerückt unter den Absatztext */
.abschnitt ol{list-style:decimal;padding-left:calc(2.4em + 1.6em)}
.abschnitt ol > li{padding-left:.3em}
.abschnitt ol > li::marker{color:var(--leise);font-variant-numeric:tabular-nums}
.abschnitt .absatz + ol{margin-top:10px}
/* Begriffsbestimmung (§ 1 Abs. 3 AGB): der definierte Begriff trägt Gewicht, nicht Kursiv */
.abschnitt dfn{font-style:normal;font-weight:600;color:var(--text)}
.abschnitt strong{color:var(--text)}
.abschnitt a.verweis{color:var(--em-400);text-decoration:underline;text-decoration-color:rgba(52,211,153,.4);text-underline-offset:3px}
.abschnitt a.verweis:hover{text-decoration-color:currentColor}
.abschnitt .absatz:target,.abschnitt h3:target{background:rgba(52,211,153,.09);box-shadow:0 0 0 6px rgba(52,211,153,.09);border-radius:4px}

/* ── Anbieter unter der Stand-Zeile, PDF-Knopf ── */
.anbieter{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px;font-style:normal;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.anbieter-firma{flex-basis:100%;color:var(--text);font-weight:600}
.anbieter a{color:var(--em-400)}
.pdf-knopf{margin-top:6px}

/* ── Fuß ── */
.fuss-links a[aria-current]{color:var(--text)}

/* ── Schmal: Verzeichnis als Leiste unter dem Kopf, aufklappbar, legt sich ÜBER den Text (kein Springen) ── */
@media (max-width:1099px){
  :root{--leiste-h:52px}
  .recht{display:block;padding:0}
  .verzeichnis-huelle{top:var(--kopf-h);z-index:25;max-height:none;overflow:visible;padding:0;background:var(--bg);
    border-bottom:1px solid var(--linie)}
  .verzeichnis-dach{display:none}
  .verzeichnis{position:relative;--art:oben}
  .verzeichnis summary,.verzeichnis[open] summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--leiste-h);
    padding:0 32px;cursor:pointer;list-style:none;font-weight:600;font-size:15px;color:var(--text)}
  .verzeichnis summary::-webkit-details-marker{display:none}
  .verzeichnis summary::after{content:"+";flex:none;font-family:var(--titel);font-size:22px;line-height:1;color:var(--em-400);
    transition:transform .2s ease}
  .verzeichnis[open] summary::after{transform:rotate(45deg)}
  .verzeichnis-liste{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - var(--kopf-h) - var(--leiste-h) - 24px);
    overflow:auto;overscroll-behavior:contain;padding:8px 32px 16px;border-left:0;background:var(--flaeche);
    border-bottom:1px solid var(--linie-stark);box-shadow:0 24px 48px rgba(0,0,0,.55)}
  .verzeichnis-liste a{min-height:44px;align-items:center;border-left:0;padding:10px 0;margin:0}
  .verzeichnis-liste .anl a{align-items:flex-start}
  .verzeichnis-liste a[aria-current]{color:var(--em-400)}
  .recht-text{max-width:804px;padding:40px 32px 0}
  .abschnitt,.abschnitt .absatz,.abschnitt h3{scroll-margin-top:calc(var(--kopf-h) + var(--leiste-h) + 12px)}
}
@media (max-width:760px){
  .kopf-nav .zurueck-lang{display:none}
  .verzeichnis summary,.verzeichnis[open] summary{padding:0 16px}
  .verzeichnis-liste{padding:4px 16px 12px}
  .recht-text{padding:28px 16px 0}
  .recht-kopf{gap:8px;padding-bottom:22px}
  .recht-kopf h1{font-size:30px;line-height:1.12}
  .anbieter{font-size:14px;column-gap:10px}
  .abschnitt ol{padding-left:2.2em}
  .abschnitt{padding-top:30px}
  .abschnitt h2{font-size:20px}
  .abschnitt p,.abschnitt li{font-size:16px;line-height:1.65}
  /* Deutsche Komposita auf schmaler Spalte: trennen im Titel und im Fließtext. Überschriften brechen nur an „/“ und „-“
     („Tabel-le“ gemessen bei 390) — und nur im Notfall mitten im Wort. */
  .recht-kopf h1,.abschnitt p,.abschnitt li{-webkit-hyphens:auto;hyphens:auto}
  .abschnitt h2{overflow-wrap:break-word}
  /* Tabelle: scrollt in sich, die Seite bleibt 390 breit */
  .abschnitt table{display:block;width:auto;max-width:100%;overflow-x:auto;
    /* Scroll-Schatten: zeigt an der Kante, dass weitere Spalten folgen; die Abdeckung wandert mit dem Inhalt (local) */
    background:linear-gradient(to right,var(--bg) 40%,rgba(2,11,7,0)) left/32px 100% no-repeat local,
      linear-gradient(to left,var(--bg) 40%,rgba(2,11,7,0)) right/32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(52,211,153,.28),rgba(52,211,153,0)) left/12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(52,211,153,.28),rgba(52,211,153,0)) right/12px 100% no-repeat scroll}
  .abschnitt th,.abschnitt td{min-width:9em}
}
@media (prefers-reduced-motion:reduce){ .verzeichnis summary::after{transition:none} }

/* ── Druck: A4, keine Kopfleiste, kein Verzeichnis, Schwarz auf Weiß ── */
/* Laufende Kopfzeile: Wortlaut samt Fassung setzt setzen.mjs je Dokument als <style>@page{@top-left{content:…}}</style> */
@page{size:A4;margin:20mm 20mm 22mm;
  @top-left{font:8pt "Inter",system-ui,sans-serif;color:#444;vertical-align:bottom;padding-bottom:4mm}
  @bottom-right{content:"Seite " counter(page) " von " counter(pages);font:8.5pt "Inter",system-ui,sans-serif;color:#444}}
@media print{
  :root{color-scheme:light}
  html,body{background:#fff !important;color:#000 !important}
  body{font-size:10.5pt;line-height:1.5;overflow:visible}
  .sprung,.kopf,.verzeichnis-huelle,.fuss-links,.pdf-knopf{display:none !important}
  .recht{display:block;max-width:none;padding:0}
  .recht-text{padding:0;max-width:none}
  .recht-kopf{padding-bottom:6mm;border-bottom:.5pt solid #999}
  .recht-kopf .dach{color:#000;font-size:8.5pt}
  .recht-kopf h1{font-size:20pt;color:#000}
  .recht-stand{color:#333;font-size:9.5pt}
  .abschnitt{padding-top:6mm}
  .abschnitt.anl{border-top:.5pt solid #999;break-before:page;margin-top:0}
  .abschnitt h2{font-size:12.5pt;color:#000;break-after:avoid}
  .abschnitt h2 .nr,.abschnitt.anl h2 .nr{color:#000}   /* gleiche Spezifität wie die Bildschirmregeln — sonst Grün auf Weiß, 1,92:1 gemessen */
  .abschnitt p,.abschnitt li,.abschnitt td,.abschnitt th{color:#000;font-size:10.5pt;orphans:3;widows:3}
  .abschnitt .absatz .nr,.abschnitt ul > li::before{color:#000}
  .abschnitt table{display:table;width:100%;overflow:visible}
  .abschnitt th,.abschnitt td{min-width:0}   /* A4 ist schmaler als 760 px — die Schmal-Regel gilt auch im Druck */
  .abschnitt th,.abschnitt td{border-bottom:.5pt solid #999}
  /* Feste Spaltenanteile: im automatischen Layout schrumpften die Spalten auf ihre Silben („Hotelprei-se“, 13 Trennungen je Tabelle) */
  .abschnitt table{table-layout:fixed}
  .abschnitt th,.abschnitt td{font-size:9.5pt;overflow-wrap:normal;padding-right:4mm}
  .abschnitt th:nth-child(1){width:30%} .abschnitt th:nth-child(2){width:22%} .abschnitt th:nth-child(3){width:24%}
  .abschnitt tr{break-inside:avoid}
  a{color:#000}
  .abschnitt a.verweis{color:#000;text-decoration:none}
  .abschnitt h3{font-size:11pt;color:#000;break-after:avoid;margin-top:5mm}
  .abschnitt dfn,.abschnitt strong{color:#000}
  .abschnitt ol > li::marker{color:#000}
  .abschnitt .absatz:target,.abschnitt h3:target{background:none;box-shadow:none}
  .anbieter{color:#000;font-size:9pt}
  .anbieter-firma{color:#000}
  .anbieter a{color:#000;text-decoration:none}
  .fuss{margin-top:10mm;padding:3mm 0 0;border-top:.5pt solid #999;color:#333;font-size:8.5pt}
  .fuss-firma{color:#000}
}