/* ===================================================================
   SEITENÜBERSICHT
   Der Baum auf /uebersicht.

   Ein Baum und keine Kachelwand: Links untereinander, Unterseiten
   eingerückt, mit einer sichtbaren Linie, die die Zugehörigkeit
   zeigt. So sah eine Seitenübersicht aus, als Websites noch
   Übersichten hatten, und so liest sie sich am schnellsten.

   Farben, Abstände und Schriften aus tokens.css. Kein Breakpoint:
   die Einrückung wird auf schmalen Geräten kleiner, die Beschreibung
   rutscht unter den Link. Beides über clamp und flex-wrap, nicht
   über eine Media Query.
   =================================================================== */

.baum {
  max-width: 72ch;
  margin-inline: auto;
}

.baum__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Ein Hauptpunkt ---------- */
.baum__ast {
  padding-block: var(--vr-space-sm);
  border-bottom: 1px solid var(--vr-linie-soft);
}

.baum__ast:last-child {
  border-bottom: none;
}

/* Ein Punkt, der selbst keine Seite ist, sondern nur gruppiert.
   Bei uns ist das "Aus der Region zu uns". */
.baum__ast--gruppe > .baum__zeile .baum__link--stumm {
  color: var(--vr-text-muted);
  cursor: default;
}

/* ---------- Die Zeile: Link links, Beschreibung dahinter ----------
   flex-wrap statt Media Query: auf schmalen Geräten rutscht die
   Beschreibung von selbst unter den Link. */
.baum__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--vr-space-md);
}

.baum__link {
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: 600;
  color: var(--vr-burgund);
  text-decoration: none;
  /* WCAG 2.2: Tippziel mindestens 24 Pixel hoch. Über die Zeilenhöhe
     gelöst, nicht über ein Pseudoelement, damit es auch auf einem
     schmalen Gerät stimmt. */
  line-height: 1.6;
  min-height: 1.6em;
}

.baum__link:hover,
.baum__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  color: var(--vr-burgund-tief);
}

.baum__text {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: 1.5;
  /* Nicht --vr-text-muted: das ergibt auf Creme nur 4,1 zu 1 und reißt
     die AA-Schwelle von 4,5. Gemessen, nicht geschätzt. */
  color: var(--vr-anthrazit-soft);
}

/* ---------- Unterseiten: eingerückt, mit Linie ----------
   Die senkrechte Linie zeigt, wozu ein Punkt gehört. Der waagerechte
   Strich vor jedem Kind macht die Zugehörigkeit auch dann klar, wenn
   jemand nur überfliegt. */
.baum__liste--kinder {
  margin-top: var(--vr-space-xs);
  /* clamp statt fester Wert: auf 320 Pixel bleibt Platz für den Text,
     auf dem Desktop ist die Einrückung deutlich sichtbar. */
  padding-left: clamp(1.1rem, 4vw, 2.2rem);
  margin-left: clamp(0.3rem, 1.5vw, 0.7rem);
  border-left: 2px solid var(--vr-gold);
}

.baum__ast--kind {
  border-bottom: none;
  padding-block: 0.2rem;
  position: relative;
}

.baum__ast--kind::before {
  content: "";
  position: absolute;
  left: clamp(-1.1rem, -4vw, -2.2rem);
  top: 1.05em;
  width: clamp(0.6rem, 2.4vw, 1.4rem);
  height: 2px;
  background: var(--vr-gold);
  opacity: 0.55;
}

.baum__link--kind {
  font-size: var(--vr-text-md);
  font-weight: 500;
}

/* ---------- Rechtliches, abgesetzt am Fuß ---------- */
.baum__liste--recht {
  margin-top: var(--vr-space-xl);
  padding-top: var(--vr-space-lg);
  border-top: 2px solid var(--vr-linie);
}

.baum__ast--recht {
  border-bottom: none;
  padding-block: 0.2rem;
}

.baum__ast--recht .baum__link {
  color: var(--vr-text-secondary);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  font-weight: 500;
}

.baum__ast--recht .baum__link:hover,
.baum__ast--recht .baum__link:focus-visible {
  color: var(--vr-burgund);
}

/* ---------- Fußnote ---------- */
.baum__fuss {
  max-width: 72ch;
  margin: var(--vr-space-2xl) auto 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-anthrazit-soft);
}

.baum__fuss a {
  color: var(--vr-burgund);
}