/* ---------------------------------------------------------------------------
   Impressum und Datenschutz.

   ALLES HIER IST GEKAPSELT, und das ist keine Stilfrage.

   Dieses Blatt wird beim ersten Oeffnen der Rechtsansicht in die KARTE
   nachgeladen. Die erste Fassung trug `body`, `h1`, `p`, `a`, `table`, `*`
   und `.knopf` als blanke Selektoren — dreissig von achtundsiebzig griffen
   damit durch und haben die Anwendung umgestylt, sobald jemand einmal auf
   Impressum geklickt hatte. Runde Knoepfe, wo eckige stehen sollten, andere
   Schatten, andere Ueberschriften. Gemeldet als: „das hat das andere Layout
   verändert".

   Deshalb gilt hier: kein einziger Selektor ohne Anker.

     .rechtseite   — nur die eigenstaendige Seite (steht am <body>)
     .rechtstext   — der Text selbst, in beiden Zusammenhaengen
     .rechtsschau  — der Kasten in der Karte

   Und keine Toepfe auf :root. Die eigenstaendige Seite bringt sie unter
   `.rechtseite` mit; in der Karte kommen sie aus karte.css, wo sie
   hingehoeren. Die erste Fassung setzte sie doppelt und `--schatten` sogar
   anders.

   Kein Inline-CSS und kein fremder Zeichensatz: der Server schickt
   `style-src 'self'` ohne unsafe-inline, und der Dienst holt nichts von
   Dritten — das steht so in der Erklaerung, die auf diesem Blatt liegt.

   Die Formensprache ist die der Karte: sechs Bildpunkte Radius, wie `.knopf`
   dort. Eckig, nicht rund.
   --------------------------------------------------------------------------- */

/* ---------- Die eigenstaendige Seite ---------- */

/* Die Klasse steht am <html>, nicht am <body>.

   `color-scheme` entscheidet, wie der Browser die Bildlaufleiste des FENSTERS
   malt, und dafuer zaehlt das Wurzelelement. Am <body> gesetzt blieb
   `:root` auf `normal` — gemessen: Wurzel normal, Koerper dark. Der Browser
   malte also eine helle Leiste auf eine dunkle Seite. Genau der Fehler, der
   in karte.css schon einmal behoben wurde.

   An der Wurzel und nicht auf blankem `:root`: dieses Blatt wird auch in die
   Karte geladen, und dort gehoert das Farbschema karte.css. */
.rechtseite {
  color-scheme: light;
  --grund: #f7f5f2;
  --feld: #ffffff;
  --rand: #ddd6cc;
  --schrift: #23201c;
  --schrift-leise: #6d655b;
  --betont: #000000;
  --plan: #efece6;
  --leiste: rgba(247, 245, 242, .85);
  --schatten: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --lauf-griff: #9c9388;

  /* Der Griff der Leiste, gemessen wie in karte.css: die leisesten Toene der
     Familie, die WCAG 1.4.11 mit 3:1 noch halten (3,02 auf Weiss, 3,03 auf
     dem dunklen Feld). Volle Breite, nicht `thin` — auf einer Textseite ist
     die Leiste die Auskunft, wie viel noch kommt. */
  scrollbar-color: var(--lauf-griff) transparent;
}
.rechtseite body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 400 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* `.rechtseite` IST hier die Wurzel — also am selben Element abfragen und
   nicht als Nachfahre. Mit `:root[data-theme="dark"] .rechtseite` verlangte
   die Regel ein Kind und griff nie: gemessen stand data-theme auf dark und
   die Seite rendete hell. */
@media (prefers-color-scheme: dark) {
  .rechtseite:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #16150f;
    --feld: #1f1d17;
    --rand: #35322a;
    --schrift: #ece7dd;
    --schrift-leise: #9b9184;
    --betont: #ffffff;
    --plan: #1a180f;
    --leiste: rgba(22, 21, 15, .85);
    --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --lauf-griff: #70675b;
  }
}
.rechtseite[data-theme="dark"] {
  color-scheme: dark;
  --grund: #16150f;
  --feld: #1f1d17;
  --rand: #35322a;
  --schrift: #ece7dd;
  --schrift-leise: #9b9184;
  --betont: #ffffff;
  --plan: #1a180f;
  --leiste: rgba(22, 21, 15, .85);
  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --lauf-griff: #70675b;
}

.rechtseite *, .rechtseite *::before, .rechtseite *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  .rechtseite * { transition-duration: .01ms !important; }
}

/* ---------- Leiste oben ----------
   Sie bleibt stehen, weil auf einer langen Rechtsseite der Weg zurueck sonst
   ganz oben liegt — und man merkt erst unten, dass man genug gelesen hat. */
.rechtseite .leiste {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem clamp(1rem, 4vw, 2rem);
  background: var(--leiste);
  border-bottom: 1px solid var(--rand);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rechtseite .leiste-titel {
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rechtseite .leiste-weit { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* Dieselben Knoepfe wie in der Karte: eckig, sechs Bildpunkte, dieselbe
   Hoehe. Die Kante traegt --schrift-leise und nicht --rand — gemessen kam
   --rand gegen den Grund der Leiste auf 1,32 (hell) und 1,43 (dunkel), die
   Fuellung auf 1,04. WCAG 1.4.11 verlangt 3:1 fuer die Begrenzung eines
   Bedienelements; mit --schrift-leise sind es 5,27 und 5,90. */
.rechtseite .knopf {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2rem; padding: 0 .6rem;
  border: 1px solid var(--schrift-leise); border-radius: 6px;
  background: var(--feld); color: var(--schrift);
  font: inherit; font-size: .85rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten);
  transition: background .15s;
}
.rechtseite .knopf:hover { background: var(--plan); }
.rechtseite .knopf:focus-visible { outline: 2px solid var(--betont); outline-offset: 2px; }
.rechtseite .knopf-zeichen { width: .9em; height: .9em; flex: none; }

/* 44 Bildpunkte fuer den Finger — dieselbe Grenze wie in der Karte. */
@media (pointer: coarse) {
  .rechtseite .knopf { min-height: 2.75rem; padding: 0 .8rem; }
}

/* Schmal bleibt nur das Zeichen: „Zur Karte" und „Schliessen" tun dasselbe,
   und zwei Knoepfe nebeneinander fuer eine Tat sind einer zu viel. */
@media (max-width: 30rem) {
  .rechtseite .leiste-zurueck span { display: none; }
  .rechtseite .leiste-zurueck { padding: 0 .5rem; }
}

/* ---------- Das Blatt ---------- */
.rechtseite .blatt {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 5rem;
}

.rechtseite .fuss {
  max-width: 42rem;
  margin: 3.5rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rand);
  color: var(--schrift-leise); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
}
.rechtseite .fuss a { color: inherit; text-underline-offset: .18em; }

/* ---------- Zurueck nach oben ----------
   Erscheint erst, wenn es etwas zu tun gibt. Ein Knopf, der immer da ist und
   meistens nichts bewirkt, ist Zierrat. */
.rechtseite .nach-oben {
  position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem);
  z-index: 9;
  width: 2.5rem; height: 2.5rem; padding: 0;
  justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.rechtseite .nach-oben.ist-da { opacity: 1; visibility: visible; }
.rechtseite .nach-oben .knopf-zeichen { width: 1.1em; height: 1.1em; }

/* ---------------------------------------------------------------------------
   Der Text. Gilt auf der eigenen Seite UND im Kasten in der Karte — deshalb
   haengt alles an .rechtstext und an nichts sonst.
   --------------------------------------------------------------------------- */

.rechtstext { min-width: 0; }
.rechtstext *, .rechtstext *::before, .rechtstext *::after { box-sizing: border-box; }

.rechtstext .kopfzeile { max-width: 40rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.rechtstext h1 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.rechtstext .vorspann { color: var(--schrift-leise); font-size: 1.05rem; margin: 0; }

/* Zwei Spalten, sobald Platz ist. */
.rechtstext .werk { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 64rem) {
  .rechtstext .werk { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
}

/* ---------- Inhaltsverzeichnis (nur auf der eigenen Seite) ---------- */
.rechtstext .inhalt {
  border: 1px solid var(--rand); border-radius: 6px;
  background: var(--feld);
  padding: .9rem 1rem;
}
@media (min-width: 64rem) {
  .rechtstext .inhalt { position: sticky; top: 4rem; max-height: calc(100vh - 6rem); overflow: auto; }
}
.rechtstext .inhalt ol { list-style: none; margin: 0; padding: 0; }
.rechtstext .inhalt li { margin: 0; }
.rechtstext .inhalt a {
  display: block; padding: .3rem .5rem; margin: 0 -.5rem;
  border-radius: 4px;
  color: var(--schrift-leise); text-decoration: none;
  font-size: .88rem; line-height: 1.35;
}
.rechtstext .inhalt a:hover { color: var(--schrift); background: var(--plan); }
.rechtstext .inhalt a:focus-visible { outline: 2px solid var(--betont); outline-offset: -2px; }
.rechtstext .inhalt a.ist-hier { color: var(--schrift); background: var(--plan); font-weight: 600; }

.rechtstext .inhalt-klapp > summary {
  cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 600; color: var(--schrift-leise);
  padding: .2rem 0;
}
.rechtstext .inhalt-klapp > summary::-webkit-details-marker { display: none; }
.rechtstext .inhalt-klapp > summary::after { content: " ▾"; }
.rechtstext .inhalt-klapp[open] > summary::after { content: " ▴"; }
/* Breit ist es immer offen und die Zeile nur noch Beschriftung — der Pfeil
   verspraeche sonst eine Bedienung, die dort nichts bringt. */
@media (min-width: 64rem) {
  .rechtstext .inhalt-klapp > summary {
    font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: .35rem; cursor: default;
  }
  .rechtstext .inhalt-klapp[open] > summary::after,
  .rechtstext .inhalt-klapp > summary::after { content: ""; }
}

/* ---------- Fliesstext ---------- */
.rechtstext .text { max-width: 42rem; min-width: 0; }

.rechtstext section { scroll-margin-top: 4.5rem; }
.rechtstext section + section {
  margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid var(--rand);
}

.rechtstext h2 {
  font-size: 1.3rem; line-height: 1.25; letter-spacing: -.015em;
  margin: 0 0 .8rem;
}
.rechtstext h3 { font-size: 1rem; margin: 1.8rem 0 .4rem; scroll-margin-top: 4.5rem; }
.rechtstext p, .rechtstext ul, .rechtstext ol { margin: 0 0 1rem; }
.rechtstext ul, .rechtstext ol { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext li::marker { color: var(--schrift-leise); }
.rechtstext strong { font-weight: 650; }

.rechtstext a {
  color: inherit; text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.rechtstext a:hover { text-decoration-thickness: 2px; }
.rechtstext a:focus-visible { outline: 2px solid var(--betont); outline-offset: 2px; }

/* Anschrift: hier zaehlen die Zeilenumbrueche. */
.rechtstext .anschrift { line-height: 1.55; margin: 0 0 1rem; }

/* „Das Wichtigste vorweg": vier Aussagen, jede fuer sich lesbar. */
.rechtstext .merkliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
@media (min-width: 34rem) { .rechtstext .merkliste { grid-template-columns: 1fr 1fr; } }
.rechtstext .merkliste li {
  margin: 0; padding: .8rem .9rem .8rem 2.4rem;
  border: 1px solid var(--rand); border-radius: 6px;
  background: var(--feld);
  font-size: .95rem; line-height: 1.5;
  position: relative;
}
/* Der Haken aus CSS, nicht aus einem Zeichensatz — dieselbe Machart wie die
   Zeichen in der Karte. */
.rechtstext .merkliste li::before {
  content: ""; position: absolute; left: .95rem; top: 1.15rem;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--betont); border-bottom: 2px solid var(--betont);
  transform: rotate(-45deg);
}

/* ---------- Tabellen ---------- */
.rechtstext .tafel {
  overflow-x: auto;
  border: 1px solid var(--rand); border-radius: 6px;
  background: var(--feld);
  margin: 0 0 1.2rem;
  overscroll-behavior-x: contain;
}
.rechtstext table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: .92rem; }
.rechtstext th, .rechtstext td { text-align: left; vertical-align: top; padding: .6rem .8rem; }
.rechtstext thead th {
  font-size: .72rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--schrift-leise);
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.rechtstext tbody tr + tr td { border-top: 1px solid var(--rand); }
.rechtstext tbody td:first-child { font-weight: 600; }

.rechtstext code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .87em;
  background: var(--plan); color: var(--schrift);
  padding: .1em .35em; border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Derselbe Text als Kasten IN der Karte.

   Der Grund steht in einem Satz von Martin: „ich binde das auch auf
   duesseldorp an - da ist das mit den Links schlecht, da ich dann die Seite
   verlasse und nicht wieder zu Duesseldorp komme."

   Genau so ist es. Ein Rechtsverweis in einer eingebetteten Karte, der den
   Leser auf eine fremde Domain schickt, nimmt ihn aus dem Artikel heraus, den
   er gerade liest. Die Pflicht ist erfuellt, der Leser weg.

   Die Toepfe kommen hier aus karte.css — dieses Blatt setzt in der Karte
   keine, und der Schliessen-Knopf traegt `.knopf` von dort. So sieht der
   Kasten aus wie die Anwendung und nicht wie ein Gast.
   --------------------------------------------------------------------------- */

.rechtsschau {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 2rem));
  /* Spalte, und der Rumpf darin `flex: 1; min-height: 0` — sonst nimmt er
     seine INHALTSHOEHE (gemessen 5550 Bildpunkte) und der Kasten schneidet
     mit `overflow: hidden` alles darunter ab. Nicht nur ohne Balken: der
     Text war unerreichbar. `min-height: 0` ist der Teil, den man vergisst —
     ein Flex-Kind hat von sich aus `min-height: auto` und schrumpft darum
     nicht unter seinen Inhalt. */
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--grund);
  color: var(--schrift);
  box-shadow: 0 8px 40px rgba(0,0,0,.28);
  overflow: hidden;
}
/* Die Spalte NUR im offenen Zustand.

   `display: flex` stand vorher am Element selbst — und hat damit die
   Browserregel `dialog:not([open]) { display: none }` ueberschrieben. Der
   Kasten war nach `close()` logisch zu (`open` false, `:modal` trifft nicht
   mehr) und wurde trotzdem weiter gezeichnet, halbdurchsichtig ueber der
   Karte. Gemeldet als: „es laesst sich nicht schliessen." Es liess sich
   schliessen; es ging nur nicht weg.

   Der Fehler kam mit der Behebung des abgeschnittenen Textes zwei Schritte
   vorher. Eine Regel, die einen Zustand herstellt, gehoert an den Zustand. */
.rechtsschau[open] { display: flex; flex-direction: column; }

.rechtsschau::backdrop { background: rgba(0,0,0,.45); }

.rechtsschau-kopf {
  flex: none;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--rand);
  background: var(--feld);
}
.rechtsschau-titel {
  margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* .knopf kommt aus karte.css und ist dort kein Flex-Behaelter — Zeichen und
   Wort klebten deshalb aneinander. Nur der Abstand, die Form bleibt die der
   Anwendung. */
.rechtsschau-kopf .knopf {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .4rem;
}

.rechtsschau-rumpf {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; overscroll-behavior: contain;
  padding: clamp(1rem, 3vw, 1.75rem);
  -webkit-overflow-scrolling: touch;
}
.rechtsschau-laedt { color: var(--schrift-leise); margin: 0; }

/* Im Kasten kein Inhaltsverzeichnis.

   Martin: „die Navigation im Modal ist schlecht - einfaches scrollen wäre
   einfacher und zielführender." Stimmt: der Kasten ist keine Seite. Sein
   Rollbereich ist kurz, die Sprungmarken zielen in etwas, das man ohnehin
   ueberblickt, und vierzehn Verweise standen vor dem ersten Satz.

   Die Ueberschrift faellt weg, weil sie schon im Kopf des Kastens steht, und
   der Fuss, weil „Zurueck zur Karte" hier der Schliessen-Knopf ist. */
.rechtsschau .kopfzeile,
.rechtsschau .inhalt,
.rechtsschau .fuss { display: none; }
.rechtsschau .werk { display: block; }
.rechtsschau .text { max-width: none; }