/* =====================================================================
   Über diese Software – Lizenzen und Herkunft
   ---------------------------------------------------------------------
   Ausschließlich Token aus tokens.css.

   Lange Lizenztexte laufen niemals über die Seitenbreite hinaus: Sie
   stehen in einem eigenen Bildlaufbereich mit `overflow: auto` und
   umgebrochenen Zeilen.
   ===================================================================== */

.ueber__block {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  padding-top: var(--abstand-m);
  border-top: var(--rahmenbreite) solid var(--farbe-rahmen);
}

.ueber__kennung {
  font-weight: var(--schriftstaerke-fett);
}

.ueber__angaben {
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  gap: var(--abstand-2xs) var(--abstand-m);
  margin: 0;
}

.ueber__angaben dt {
  color: var(--farbe-text-leise);
  font-weight: var(--schriftstaerke-mittel);
}

.ueber__angaben dd {
  margin: 0;
}

.ueber__url {
  overflow-wrap: anywhere;
}

.ueber__fussnote {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.ueber__dritte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ueber__komponente {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  padding: var(--abstand-s) var(--abstand-m);
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-m);
}

.ueber__komponentenname {
  font-weight: var(--schriftstaerke-fett);
}

.ueber__komponentenhinweis {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* =====================================================================
   Aufklappbare Lizenztexte
   ===================================================================== */

.lizenzblock {
  margin-top: var(--abstand-2xs);
}

/* Kein `display: flex`: Chromium unterdrueckt damit das Aufklapp-Dreieck, und
   ein Aufklapper ohne Marke sieht aus wie eine gewoehnliche Zeile. Derselbe
   Fehler stand in `lernen.css` bei `.sitzung__kuerzel summary` und ist dort
   im laufenden Fenster nachgemessen worden.

   Die Klickflaeche traegt das Polster (2 × 12 px zu 29,7 px Zeilenhoehe bei
   --schrift-basis = 54 px, WCAG 2.2 – 2.5.8); `min-height` bleibt als
   Untergrenze mit dem ausdruecklichen Zielgroessen-Wert stehen. */
.lizenzblock__schalter {
  min-height: var(--klickflaeche-min);
  padding-block: var(--abstand-s);
  font-weight: var(--schriftstaerke-mittel);
  cursor: pointer;
}

.lizenzblock__leer {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.lizenztext {
  max-block-size: 24rem;
  margin-top: var(--abstand-xs);
  padding: var(--abstand-s) var(--abstand-m);
  background-color: var(--farbe-grund-versetzt);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  overflow: auto;
}

.lizenztext__inhalt {
  margin: 0;
  font-family: var(--schrift-familie-mono);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-text);

  /* Umbrechen statt seitlich scrollen: Lizenztexte enthalten sehr lange
     Zeilen, die die Seite sonst breiter machen würden. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .ueber__angaben {
    grid-template-columns: 1fr;
  }

  .ueber__angaben dd {
    margin-bottom: var(--abstand-s);
  }
}

/* ── Datenschutzerklärung ──────────────────────────────────────────────────
   Seit 0.25.0 liegt die Erklärung in der Anwendung. Bis dahin kam das Wort
   in der ganzen Oberfläche nicht ein einziges Mal als sichtbarer Text vor.

   Aufgeklappt sind es 144 Blöcke. Der Kasten begrenzt die Höhe und scrollt
   in sich, damit die Abschnitte darunter — Lizenz, Rechtslage, Verfahren,
   Fremdkomponenten — erreichbar bleiben. Dieselbe Bauform wie `.lizenztext`. */
.datenschutz {
  margin-top: var(--abstand-2xs);
}

.datenschutz__stand {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.datenschutz__inhalt {
  max-block-size: 32rem;
  margin-top: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  background-color: var(--farbe-grund-versetzt);
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-m);
  overflow: auto;
}

/* Die Überschriften der Erklärung, nicht die des Bereichs: kleiner gesetzt,
   damit die Gliederung des Bereichs erkennbar bleibt. Die Ebenen selbst sind
   echt (h3/h4) — ein Bildschirmleser liest die Gliederung, nicht die Größe. */
.datenschutz__titel {
  margin-block: var(--abstand-m) var(--abstand-2xs);
  font-size: var(--schrift-basis);
}

.datenschutz__verzeichnis ol {
  margin: 0;
  padding-inline-start: var(--abstand-l);
}

/* Umbrechen statt seitlich scrollen: In den Codeblöcken stehen Dateipfade,
   und ein waagerechter Bildlauf im Kasten wäre ein zweiter neben dem
   senkrechten. */
.datenschutz__code {
  margin: var(--abstand-xs) 0;
  padding: var(--abstand-xs) var(--abstand-s);
  background-color: var(--farbe-grund);
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-s);
  font-size: var(--schrift-klein);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
