/* ==========================================================================
   STUDIO KONTUR – Unterseiten Impressum und Datenschutz („Anhang A/B“)
   ========================================================================== */

.recht {
  row-gap: var(--s-6);
  border-top: 0;
}

/* deutlicher Demo-Hinweis oben */
.demo-hinweis {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: var(--rahmen) solid var(--tinte);
  background-color: var(--blau);
  color: var(--weiss);
  box-shadow: var(--schatten);
}

.demo-hinweis__titel {
  font-family: var(--schrift-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.demo-hinweis .platzhalter {
  background: var(--weiss);
  color: var(--tinte);
  border-color: var(--tinte);
}

/* Platzhalter für echte Betreiberangaben: klar erkennbar */
.platzhalter {
  padding: 0 0.25em;
  border: var(--rahmen-duenn) dashed var(--blau);
  background: var(--blau-hell);
  color: var(--tinte);
  font-family: var(--schrift-mono);
  font-size: 0.9em;
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.demo-wert {
  color: var(--tinte-2);
  font-size: var(--fs-klein);
}

/* Inhaltsverzeichnis der Seite */
.recht__inhalt {
  align-self: start;
  padding: var(--s-4);
  border: var(--rahmen) solid var(--tinte);
}

.recht__inhalt-titel {
  margin-bottom: var(--s-3);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.recht__inhalt ol {
  display: grid;
  gap: var(--s-1);
  font-size: var(--fs-klein);
}

.recht__inhalt a {
  display: block;
  padding: var(--s-1) var(--s-2);
  text-decoration: none;
  border-left: var(--rahmen) solid transparent;
}

.recht__inhalt a:hover {
  background: var(--tinte);
  color: var(--weiss);
  border-left-color: var(--blau);
}

/* Fließtext */
.recht__text {
  display: grid;
  gap: var(--s-7);
}

.recht__text section {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--rahmen) solid var(--tinte);
  scroll-margin-top: calc(var(--kopfleiste) + var(--s-4));
}

.recht__text h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  hyphens: auto;
}

.recht__text p,
.recht__liste {
  max-width: 66ch;
}

.recht__text a:not([class]) {
  text-decoration-color: var(--blau);
  text-decoration-thickness: 2px;
}

.recht__text a:not([class]):hover {
  background: var(--blau);
  color: var(--weiss);
}

.recht__text code {
  font-family: var(--schrift-mono);
  font-size: 0.9em;
}

.recht__vermerk {
  padding: var(--s-4);
  background: var(--tinte);
  color: var(--weiss);
}

.recht__liste {
  display: grid;
  gap: var(--s-2);
}

.recht__liste li {
  position: relative;
  padding-left: var(--s-5);
}

.recht__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6em;
  height: 0.6em;
  background: var(--blau);
}

/* Bildnachweise */
.tabelle-rahmen {
  overflow-x: auto;
  border: var(--rahmen) solid var(--tinte);
}

.nachweise {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: var(--fs-klein);
}

.nachweise th {
  padding: var(--s-2) var(--s-3);
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-align: left;
  text-transform: uppercase;
}

.nachweise td {
  padding: var(--s-2) var(--s-3);
  border-top: var(--rahmen-duenn) solid var(--tinte);
  vertical-align: top;
}

.nachweise td:last-child {
  font-family: var(--schrift-mono);
  white-space: nowrap;
}

.nachweis__datei {
  display: block;
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  color: var(--tinte-2);
}

@media (min-width: 48rem) {
  .demo-hinweis {
    grid-column: b / e;
  }

  .recht__inhalt {
    grid-column: a / b;
    position: sticky;
    top: var(--s-6);
  }

  .recht__text {
    grid-column: b / e;
  }
}