:root {
  color-scheme: dark;
  --hintergrund: #08111f;
  --karte: #111f35;
  --kontur: #243754;
  --text: #f2f6ff;
  --leise: #b8c5d9;
  --akzent: #63e6be;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #172944 0, var(--hintergrund) 55%);
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  line-height: 1.65;
}

.legal-kopf,
.legal-fuss {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  color: var(--leise);
}

.legal-kopf a,
.legal-fuss a,
.legal a { color: var(--akzent); }

.legal {
  width: min(820px, calc(100% - 2rem));
  margin: 1rem auto 2rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--karte) 94%, transparent);
  border: 2px solid var(--kontur);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 30%);
}

.legal h1 { margin-top: 0; color: var(--akzent); line-height: 1.15; }
.legal h2 { margin-top: 2rem; line-height: 1.25; }
.legal address { font-style: normal; }
.legal .stand { margin-top: 2.5rem; color: var(--leise); font-size: 0.9rem; }
.rev { direction: rtl; unicode-bidi: bidi-override; }

/* ---------------------------------------------------------------- Fließtext
   Einleitung und Hinweise heben sich vom Rest ab, ohne laut zu werden: die
   Einleitung etwas größer, der Hinweis mit einem Balken an der Seite. */
.legal .einleitung { font-size: 1.05rem; color: var(--text); }

.legal .hinweis {
  margin: 1rem 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--akzent);
  background: rgb(99 230 190 / 8%);
  border-radius: 0 8px 8px 0;
}

.legal h3 { margin-top: 1.6rem; font-size: 1.05rem; color: var(--akzent); }
.legal code { font-size: 0.92em; overflow-wrap: anywhere; }
.legal .behoerde { margin-top: 0.75rem; }

/* ------------------------------------------------------- Inhaltsverzeichnis
   Zweispaltig, wo Platz ist. Die Zahlen kommen aus der Liste selbst, damit
   die Nummerierung im Text und in der Übersicht nicht auseinanderlaufen. */
.inhalt {
  margin: 1.5rem 0 2.5rem;
  padding: 1rem 1.25rem;
  background: rgb(255 255 255 / 3%);
  border: 1px solid var(--kontur);
  border-radius: 12px;
}

.inhalt ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2rem;
}

.inhalt li { break-inside: avoid; margin: 0.15rem 0; }

@media (max-width: 34rem) {
  .inhalt ol { columns: 1; }
}

/* --------------------------------------------------------------- Tabellen
   Auf schmalen Geräten passt keine vierspaltige Tabelle mehr; sie darf dort
   in ihrem eigenen Rahmen waagrecht scrollen, statt die Seite zu sprengen. */
.tabelle-rahmen {
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--kontur);
  border-radius: 12px;
}

.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal caption {
  padding: 0.7rem 0.9rem;
  color: var(--leise);
  font-size: 0.88rem;
  text-align: left;
}

.legal th,
.legal td {
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--kontur);
  text-align: left;
  vertical-align: top;
}

.legal thead th {
  background: rgb(255 255 255 / 4%);
  color: var(--akzent);
  font-weight: 600;
}

.legal tbody tr:nth-child(even) { background: rgb(255 255 255 / 2%); }