/* ==========================================================================
   Impressum und Datenschutz: eine ruhige Textspalte mit Marginalnummern
   ========================================================================== */

.recht {
  padding: var(--abstand-7) 0 var(--abstand-8);
  counter-reset: abschnitt;
}

.recht h1 {
  margin: var(--abstand-2) 0 var(--abstand-5);
  font-size: var(--text-3xl);
  font-weight: 330;
}

.recht .vorspann {
  margin-top: var(--abstand-5);
}

.recht section {
  position: relative;
  margin-top: var(--abstand-6);
  padding-top: var(--abstand-5);
  border-top: var(--linie-breite) solid var(--linie);
  counter-increment: abschnitt;
}

.recht h2 {
  margin-bottom: var(--abstand-3);
  font-size: var(--text-xl);
}

.recht h2::before {
  content: counter(abschnitt, upper-roman) " ";
  font-style: italic;
  font-weight: 300;
  color: var(--terrakotta);
}

@media (min-width: 48rem) {
  .recht .spalte {
    padding-left: var(--marginalie);
  }

  .recht h2::before {
    position: absolute;
    left: calc(-1 * var(--marginalie));
    width: calc(var(--marginalie) - var(--abstand-5));
    text-align: right;
  }
}

.demo-hinweis {
  padding: var(--abstand-4) var(--abstand-5);
  border: 1.5px solid var(--terrakotta-text);
  border-radius: var(--radius);
  background: var(--papier-hell);
}

.demo-hinweis p {
  margin: 0;
}

.demo-hinweis .marke {
  margin-bottom: var(--abstand-1);
}

/* klar erkennbare Platzhalter für echte Betreiberangaben */
.platzhalter-text {
  padding: 0 0.25em;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ocker) 30%, var(--papier));
  color: var(--espresso);
  font-family: var(--schrift-marke);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.recht__anmerkung {
  padding-left: var(--abstand-4);
  border-left: 2px solid var(--linie-stark);
  font-size: var(--text-s);
  color: var(--espresso-weich);
}

.recht__liste {
  margin: 0 0 var(--abstand-4);
  padding-left: 1.2rem;
}

.recht__liste li {
  margin-bottom: var(--abstand-1);
}

.recht__liste li::marker {
  color: var(--terrakotta);
}

/* Bildnachweise: breite Tabelle darf innerhalb ihres Rahmens scrollen */
.tabelle-rahmen {
  overflow-x: auto;
  margin: var(--abstand-4) 0;
  border-block: var(--linie-breite) solid var(--espresso);
}

.tabelle-rahmen:focus-visible {
  outline-offset: 2px;
}

.nachweise {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.nachweise th,
.nachweise td {
  padding: var(--abstand-2) var(--abstand-3) var(--abstand-2) 0;
  border-bottom: var(--linie-breite) solid var(--linie);
  text-align: left;
  vertical-align: top;
}

.nachweise th {
  font-family: var(--schrift-marke);
  font-weight: 500;
  font-size: var(--text-s);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  color: var(--espresso-weich);
}

.nachweise code {
  font-size: 0.95em;
  white-space: nowrap;
}

@media (min-width: 62rem) {
  .recht .spalte {
    width: min(100% - 2 * var(--rand), 52rem);
  }
}