/* AUREON Vergleich — "Die Naht" · 05.09.2026
   ---------------------------------------------------------------------------
   Ersetzt die vierspaltige Rastertabelle (6 Zeilen, 24 Zellen, 752 px).
   Mert: "vergleich section anders kreativer, nicht so kompliziert,
   mach am besten mit logo".

   DIE IDEE
   Eine einzige Tafel, senkrecht aufgetrennt. Links liegt sie matt, rechts
   liegt Licht darauf. Genau auf der Trennung sitzt das silberne A — es ist
   die Naht selbst, kein Abzeichen daneben. Beim Eintreten laeuft das Licht
   von der Naht aus nach rechts ueber unsere Haelfte: dort, wo das Zeichen
   steht, wird es hell. Beide Seiten ruecken bis an die Naht heran, links
   rechtsbuendig, rechts linksbuendig — die zwei Wege stossen aneinander,
   statt als zwei Listen nebeneinander zu liegen.

   Vier Punkte statt sechs, zwei Seiten statt drei Spalten: acht Aussagen
   statt vierundzwanzig Zellen. Das Thema jeder Zeile steht EINMAL, mittig
   auf der Naht, in einer Luecke der Linie — es haengt buchstaeblich
   zwischen den beiden Antworten.

   HERKUNFT DER TECHNIK
   Aus Merts 21st.dev-Sammlung: "Diagram Card (TextRevealCard)" (ID 10758) —
   dort schiebt ein senkrechter Lichtbalken eine helle Fassung ueber eine
   matte. Uebernommen ist die Grundfigur (senkrechte Kante als Traeger des
   Unterschieds, helle gegen matte Seite), NICHT der Aufdeck-Mechanismus:
   im Original ist die Reveal-Ebene mit clip-path: inset(0 100% 0 0) beim
   Start unsichtbar. Das verstoesst gegen Merts Lesbarkeitsregel. Hier steht
   beides von Anfang an vollstaendig da; das Licht betont nur.
   Die 80 Sternchen mit repeat:Infinity sind ersatzlos raus.

   MERTS REGELN, EINGEBAUT
   - Jedes Wort steht in JEDEM Zustand da. Bewegt wird nur ein Lichtschleier
     hinter dem Text und ein Schein hinter dem Zeichen. Faellt das Skript aus,
     fehlt Licht, kein Buchstabe.
   - Beide Bewegungen haengen an --au-lauf. Das setzt der vorhandene
     Beobachter in aureon-dashliste.js ueber [data-au-pausiert] auf 'paused',
     sobald die Sektion aus dem Bild ist oder der Tab wechselt. Kein neues
     Skript noetig.
   - Hoechstbreite 900 px. Eine Spalte wird am Rechner rund 370 px breit,
     nicht die halbe Fensterbreite.
   - Nichts hat overflow:hidden, nichts ragt ueber eine Kante. Das Logo laeuft
     mit height:auto in seinem echten Verhaeltnis 440x381 — kein cover, kein
     Zuschnitt.
   - Kein pinker Text, keine rote Flaeche. Jade nur als Schleier (max 8,5 %)
     und als Linie, Gold ausschliesslich fuer Paragrafen.
   --------------------------------------------------------------------------- */

.vgs {
  /* Eigene Marken statt geerbter Seitenwerte: die Sektion bringt ihre
     Farben mit und funktioniert auch ausserhalb dieser Seite. */
  --vgs-grund:  #090c0b;
  --vgs-text:   #f5f2e9;
  --vgs-matt:   rgba(245, 242, 233, .66);   /* Alleine-Seite: rund 7:1 auf dem Grund */
  --vgs-leise:  rgba(245, 242, 233, .58);
  --vgs-linie:  rgba(245, 242, 233, .11);
  --vgs-jade:   #2ED9A6;
  --vgs-gold:   #E8C36B;
  --vgs-mitte:  104px;                       /* Breite der Nahtspalte */
  --vgs-rund:   8px;

  padding: 62px 32px 0;
  color: var(--vgs-text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.vgs__innen { max-width: 900px; margin: 0 auto; }

/* ── Kopf ─────────────────────────────────────────────────────────────── */

.vgs__augenbraue {
  margin: 0 0 10px;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vgs-leise);
}

.vgs__titel {
  margin: 0 0 11px;
  font-family: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  max-width: 17ch;
  text-wrap: balance;
}

.vgs__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 14px; line-height: 1.6;
  color: var(--vgs-leise);
  text-wrap: pretty;
}

/* ── Die Tafel ────────────────────────────────────────────────────────── */

.vgs__tafel {
  position: relative;
  margin-top: 24px;
  padding: 20px 24px 10px;
  border: 1px solid var(--vgs-linie);
  border-radius: var(--vgs-rund);
  background: rgba(245, 242, 233, .022);
}

/* Das Licht auf unserer Haelfte. Es laeuft EINMAL von der Naht nach rechts,
   wenn die Sektion ins Bild kommt, und bleibt dann liegen.
   'both' heisst: davor haelt es den Anfangszustand, danach den Endzustand.
   Ohne Skript faellt --au-lauf auf 'running' zurueck und es laeuft beim
   Laden — in beiden Faellen steht jedes Wort vollstaendig da, dies ist
   reine Flaechenhelligkeit HINTER dem Text (z-index 0 gegen 1). */
.vgs__tafel::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1px; right: 1px; bottom: 1px; left: calc(50% + 1px);
  border-radius: 0 calc(var(--vgs-rund) - 1px) calc(var(--vgs-rund) - 1px) 0;
  background: linear-gradient(90deg,
              rgba(46, 217, 166, .085),
              rgba(46, 217, 166, .020) 58%,
              rgba(46, 217, 166, 0));
  transform-origin: left center;
  animation: vgs-flut .9s cubic-bezier(.16, 1, .3, 1) both;
  animation-play-state: var(--au-lauf, running);
  pointer-events: none;
}

@keyframes vgs-flut {
  from { transform: scaleX(.04); opacity: 0; }
  to   { transform: scaleX(1);   opacity: 1; }
}

/* Inhalt liegt ueber dem Schleier. */
.vgs__namen,
.vgs__punkt { position: relative; z-index: 1; }

/* ── Kopfzeile der Tafel: die zwei Wege, dazwischen das Zeichen ───────── */

.vgs__namen {
  display: grid;
  grid-template-columns: 1fr var(--vgs-mitte) 1fr;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vgs-linie);
}

.vgs__name {
  margin: 0;
  padding-right: 18px;
  font-size: 15px; font-weight: 800; line-height: 1.25;
  color: var(--vgs-matt);
  /* Rechtsbuendig: die linke Seite endet AN der Naht, die rechte beginnt
     dort. Ohne das klafft hinter kurzen Antworten wie "Bleiben bei dir."
     ein totes Feld von 250 px, und die zwei Seiten wirken wie zwei Listen
     statt wie eine Trennung. */
  text-align: right;
}

.vgs__name span {
  display: block;
  margin-top: 6px;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  color: var(--vgs-leise);
}

.vgs__name--wir {
  padding-right: 0; padding-left: 18px;
  color: var(--vgs-text);
  text-align: left;
}

/* ── Das Zeichen: es IST die Naht ─────────────────────────────────────── */

.vgs__zeichen {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 10px;
}

.vgs__marke { position: relative; display: block; }

/* Freigestelltes A, silber. Kein object-fit, kein Zuschnitt: die Breite
   steht fest, die Hoehe folgt dem echten Verhaeltnis 440x381. */
.vgs__marke img {
  display: block;
  width: 54px;
  height: auto;
}

/* Der Schein, aus dem das Licht der rechten Haelfte kommt. Atmet sehr
   langsam und haelt an, sobald niemand hinsieht. */
.vgs__marke::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(46, 217, 166, .17), rgba(46, 217, 166, 0) 74%);
  animation: vgs-schein 7s ease-in-out infinite;
  animation-play-state: var(--au-lauf, running);
  pointer-events: none;
}

@keyframes vgs-schein {
  0%, 100% { opacity: .48; }
  50%      { opacity: .95; }
}

/* Das Stueck Naht unter dem Zeichen — es faedelt in die Linie darunter ein.
   ::before bleibt am Rechner leer und wird am Handy zur linken Haelfte der
   dann waagerechten Naht. */
.vgs__zeichen::before { content: ""; display: none; }

.vgs__zeichen::after {
  content: "";
  width: 1px; flex: 1; min-height: 12px;
  background: var(--vgs-linie);
}

/* ── Die vier Punkte ──────────────────────────────────────────────────── */

.vgs__punkt {
  display: grid;
  grid-template-columns: 1fr var(--vgs-mitte) 1fr;
  align-items: center;
}

/* Reihenfolge im Quelltext: Thema, dann Alleine, dann Mit AUREON — so liest
   ein Vorleseprogramm "Provision. Alleine … Mit AUREON …". Am Rechner
   schiebt order() das Thema zwischen die beiden Antworten. */
.vgs__thema     { order: 2; }
.vgs__wert      { order: 1; }
.vgs__wert--wir { order: 3; }

.vgs__thema {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin: 0;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vgs-leise);
  text-align: center;
}

/* Die Naht laeuft ueber und unter dem Wort weiter und laesst genau dort
   eine Luecke, wo das Thema steht. Zwei 1-px-Segmente, keine Flaeche. */
.vgs__thema::before,
.vgs__thema::after {
  content: "";
  width: 1px; flex: 1;
  background: var(--vgs-linie);
}
.vgs__thema::before { margin-bottom: 9px; }
.vgs__thema::after  { margin-top: 9px; }

.vgs__wert {
  margin: 0;
  padding: 17px 18px 17px 0;
  font-size: 14px; line-height: 1.5;
  color: var(--vgs-matt);
  text-align: right;
  text-wrap: pretty;
}

.vgs__wert--wir {
  padding: 17px 0 17px 18px;
  font-weight: 600;
  color: var(--vgs-text);
  text-align: left;
}

/* "Alleine" / "Mit AUREON" je Antwort: am Rechner sagt es die Kopfzeile,
   fuer Vorleseprogramme steht es trotzdem an jeder Antwort. Am Handy wird
   daraus eine sichtbare Beschriftung. */
.vgs__wo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Paragraf hinter jeder Zusage. Ohne Fundstelle ist eine Zusage nur eine
   Behauptung — deshalb steht er an jeder Zeile, nicht im Kleingedruckten. */
.vgs__par {
  display: block;
  margin-top: 5px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em;
  color: var(--vgs-gold);
}

/* Sanfte Belohnung beim Darueberfahren — kein Dauerlauf, keine Schleife. */
@media (hover: hover) and (pointer: fine) {
  .vgs__tafel::after { transition: background .45s ease; }
  .vgs__tafel:hover::after {
    background: linear-gradient(90deg,
                rgba(46, 217, 166, .125),
                rgba(46, 217, 166, .030) 58%,
                rgba(46, 217, 166, 0));
  }
}

/* ── Die Fragen an andere ─────────────────────────────────────────────── */
/* Ueber andere Managements steht hier keine einzige Behauptung, nur Fragen,
   die der Creator dort stellen soll. Jede Haeufigkeitsaussage ("meistens",
   "ueblich") waere eine Tatsachenbehauptung, die der Werbende im Streitfall
   beweisen muesste (§§ 5, 4 UWG). Fragen sind sicher und obendrein nuetzlich. */

.vgs__fragen {
  margin: 16px 0 0;
  padding: 13px 17px;
  border: 1px solid var(--vgs-linie);
  border-radius: var(--vgs-rund);
  font-size: 12.5px; line-height: 1.6;
  color: var(--vgs-leise);
  text-wrap: pretty;
}

.vgs__fragen b {
  color: var(--vgs-text);
  font-weight: 700;
}

.vgs__fuss {
  margin: 11px 0 0;
  font-size: 11.5px; line-height: 1.6;
  color: var(--vgs-leise);
  text-wrap: pretty;
}

.vgs__fuss a {
  color: var(--vgs-gold);
  text-underline-offset: 3px;
}

/* ── Handy: unter 720 px ──────────────────────────────────────────────── */
/* Zwei Spalten auf 390 px waeren 13 Zeichen je Zeile. Die Tafel klappt
   deshalb auf eine Spalte: das Zeichen wandert nach oben in die Mitte und
   bleibt das Gelenk zwischen den zwei Wegen; darunter steht je Punkt das
   Thema, dann beide Antworten, jede mit eigener Beschriftung. Die Zuordnung
   haengt damit nicht an einer Kopfzeile, die weggescrollt ist.
   Die Beschriftung laeuft INLINE mit, nicht in einer eigenen Spalte — eine
   74-px-Spalte kostet ein Fuenftel der Zeilenbreite und damit rund vier
   zusaetzliche Umbrueche. */

@media (max-width: 720px) {
  .vgs { padding: 46px 20px 0; }

  .vgs__titel { max-width: 20ch; }
  .vgs__lead  { font-size: 13.5px; }
  .vgs__tafel { margin-top: 20px; padding: 16px 15px 8px; }

  /* Der Schleier ergibt ohne rechte Haelfte keinen Sinn — er faellt weg.
     Die Auszeichnung traegt am Handy die Jade-Linie an unserer Antwort. */
  .vgs__tafel::after { display: none; }

  .vgs__namen {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 9px;
    padding-bottom: 13px;
    text-align: center;
  }

  /* Kein order-Eingriff: der Quelltext sagt schon Alleine -> Zeichen ->
     Mit AUREON. Damit sitzt das A auch am Handy GENAU zwischen den beiden
     Wegen — dieselbe Rolle, nur um 90 Grad gedreht. */
  .vgs__zeichen {
    align-self: auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 2px 0;
  }
  .vgs__zeichen::before,
  .vgs__zeichen::after {
    display: block;
    width: auto; height: 1px;
    min-height: 0; flex: 1;
    background: var(--vgs-linie);
  }
  .vgs__marke img { width: 42px; }

  .vgs__name,
  .vgs__name--wir { padding: 0; font-size: 14px; text-align: center; }
  .vgs__name span { margin-top: 3px; font-size: 11.5px; line-height: 1.45; }

  .vgs__punkt {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 10px 0 2px;
  }

  .vgs__thema {
    order: -1;
    align-self: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
  }
  .vgs__thema::before,
  .vgs__thema::after { display: none; }

  .vgs__wert {
    order: 0;
    display: block;
    margin-top: 6px;
    padding: 0;
    font-size: 13px; line-height: 1.5;
    text-align: left;
  }

  .vgs__wo {
    position: static;
    display: inline;
    width: auto; height: auto;
    margin: 0 8px 0 0; padding: 0;
    overflow: visible;
    clip-path: none;
    font-size: 10px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--vgs-leise);
  }

  .vgs__wert--wir {
    margin-top: 6px;
    padding: 0 0 0 11px;
    border-left: 1px solid rgba(46, 217, 166, .45);
  }
  .vgs__wert--wir .vgs__wo { color: var(--vgs-jade); }

  /* Der Paragraf laeuft am Handy in der Zeile mit statt darunter — das
     spart vier Zeilen ueber die ganze Tafel. nowrap haelt "§ 9 Abs. 1-2"
     zusammen, damit die Fundstelle nicht mitten im Paragrafen umbricht. */
  .vgs__par {
    display: inline;
    margin: 0 0 0 8px;
    white-space: nowrap;
  }

  .vgs__fragen {
    margin-top: 14px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--vgs-linie);
    border-radius: 0;
    font-size: 12px;
  }
}

/* ── Weniger Bewegung ─────────────────────────────────────────────────── */
/* Beides steht still im Endzustand. Es geht nichts verloren: die Bewegung
   war Licht, keine Aussage. */
@media (prefers-reduced-motion: reduce) {
  .vgs__tafel::after {
    animation: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
  .vgs__marke::before { animation: none; opacity: .72; }
}
/* ── Die Tafel kommt von der Naht nach aussen ──────────────────────────────
   05.09.2026. Befund aus der Bestandsaufnahme: der KERN dieser Sektion - die
   vier Vergleichszeilen, die Kopfzeile und der Fragenkasten - stand voellig
   still. Bewegt hatten sich nur die Lichtflut und der Schein hinter dem
   Zeichen, also zwei Flaechen, die gar nichts sagen. Ausgerechnet die
   Sektion, die ueberzeugen soll, war die ruhigste der Seite.

   Die Bewegung sagt jetzt dasselbe wie der Inhalt: die zwei Seiten fahren
   von der Naht AUSEINANDER. Links geht nach links, rechts geht nach rechts,
   Zeile fuer Zeile versetzt - man liest den Unterschied, statt ihn zu
   ueberfliegen.

   KEIN neues JavaScript: die Sektion haengt an [data-ps-reveal], das
   portal-signal.js ohnehin beobachtet. Damit gilt hier automatisch alles,
   was dort schon geloest ist - IntersectionObserver, ein Rueckfall nach
   1100 ms gegen leere Abschnitte, und die Abschaltung bei "weniger
   Bewegung".

   Ohne Skript steht die Tafel vollstaendig da: das Verstecken haengt allein
   an `html.ps-reveal-enabled`, und diese Klasse setzt nur das Skript. */

/* Die zwei Namen fahren auseinander - das ist die Aussage der Sektion. */
html.ps-reveal-enabled .vgs__namen[data-ps-reveal] {
  transform: none;                     /* der Block selbst bleibt stehen */
}
html.ps-reveal-enabled .vgs__namen[data-ps-reveal] .vgs__name {
  opacity: 0;
  transform: translateX(14px);         /* linker Name: von der Naht nach links */
  transition: opacity .62s cubic-bezier(.2, .8, .2, 1),
              transform .62s cubic-bezier(.2, .8, .2, 1);
}
html.ps-reveal-enabled .vgs__namen[data-ps-reveal] .vgs__name--wir {
  transform: translateX(-14px);        /* rechter Name: nach rechts */
  transition-delay: 90ms;
}
html.ps-reveal-enabled .vgs__namen[data-ps-reveal].is-visible .vgs__name {
  opacity: 1;
  transform: none;
}

/* Die vier Zeilen: linke Antwort von links, rechte von rechts. */
html.ps-reveal-enabled .vgs__punkt[data-ps-reveal] {
  transform: none;                     /* die Zeile selbst haelt ihren Platz */
}
html.ps-reveal-enabled .vgs__punkt[data-ps-reveal] .vgs__thema {
  opacity: 0;
  transition: opacity .5s ease var(--ps-delay, 0ms);
}
html.ps-reveal-enabled .vgs__punkt[data-ps-reveal] .vgs__wert {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .58s cubic-bezier(.2, .8, .2, 1) var(--ps-delay, 0ms),
              transform .58s cubic-bezier(.2, .8, .2, 1) var(--ps-delay, 0ms);
}
html.ps-reveal-enabled .vgs__punkt[data-ps-reveal] .vgs__wert--wir {
  transform: translateX(-18px);
}
html.ps-reveal-enabled .vgs__punkt[data-ps-reveal].is-visible .vgs__thema,
html.ps-reveal-enabled .vgs__punkt[data-ps-reveal].is-visible .vgs__wert {
  opacity: 1;
  transform: none;
}

/* Die Paragrafen sind der Beleg der Sektion - beim Ueberfahren treten sie
   hervor, damit sie anfassbar wirken statt wie Kleingedrucktes. */
.vgs__par {
  transition: color .22s ease, border-color .22s ease, opacity .22s ease;
}
.vgs__wert:hover .vgs__par,
.vgs__name:hover .vgs__par {
  opacity: 1;
  color: var(--vgs-jade, #2ED9A6);
}

/* Weniger Bewegung: alles steht sofort. */
@media (prefers-reduced-motion: reduce) {
  html.ps-reveal-enabled .vgs__namen[data-ps-reveal] .vgs__name,
  html.ps-reveal-enabled .vgs__punkt[data-ps-reveal] .vgs__thema,
  html.ps-reveal-enabled .vgs__punkt[data-ps-reveal] .vgs__wert {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Handy: zwei Spalten statt vierzehn Bloecke ────────────────────────────
   Mert, 05.09.2026, zum Bildschirmfoto: "Viel zu kompliziert und
   unuebersichtlich. Mach das leichter."

   Der Grund war gemessen und einfach: Unter 720 px stand jede Antwort in
   einer EIGENEN Zeile untereinander, und weil man dann nicht mehr sieht,
   welche Seite welche ist, musste in JEDER Zeile noch einmal "ALLEINE" und
   "MIT AUREON" davorstehen. Vier Punkte mal drei Zeilen plus Kopf ergaben
   vierzehn Bloecke hintereinander - und acht Beschriftungen, die dasselbe
   sagen wie die Kopfzeile zwei Zentimeter darueber.

   Jetzt stehen die zwei Antworten NEBENEINANDER, so wie am Rechner. Damit
   benennt die Kopfzeile wieder die Spalten, und die acht Wiederholungen
   fallen ersatzlos weg. Die Naht laeuft als 1-px-Linie zwischen den Spalten
   durch - dieselbe Trennung wie am Rechner, nur schmaler.

   Diese Regeln stehen bewusst NACH dem alten Handy-Block: sie nehmen ihn
   Punkt fuer Punkt zurueck, statt ihn zu loeschen. Wer den alten Aufbau
   wiederhaben will, entfernt diesen Block. */
@media (max-width: 720px) {
  /* Kopfzeile in eine Reihe: Alleine | Zeichen | Mit AUREON. Nur so
     benennen die zwei Namen die Spalten darunter. */
  .vgs__namen {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .vgs__zeichen { flex: none; width: auto; margin: 0; }
  .vgs__zeichen::before,
  .vgs__zeichen::after { display: none; }
  .vgs__marke img { width: 34px; }
  .vgs__name,
  .vgs__name--wir { font-size: 12.5px; }
  /* Die Unterzeilen der Kopfzeile tragen am Handy nichts, was die Spalten
     nicht schon sagen - und sie kosten vier Zeilen. */
  .vgs__name span { display: none; }

  /* Zwei Spalten mit der Naht dazwischen. */
  .vgs__punkt {
    grid-template-columns: 1fr 1fr;
    column-gap: 13px;
    align-items: start;
    padding: 11px 0 3px;
  }
  .vgs__thema {
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 2px;
  }
  .vgs__wert {
    order: 0;
    margin-top: 0;
    padding: 0 11px 0 0;
    font-size: 12px; line-height: 1.45;
    border-right: 1px solid var(--vgs-linie);
  }
  .vgs__wert--wir {
    margin-top: 0;
    padding: 0 0 0 11px;
    border-right: 0;
    border-left: 1px solid rgba(46, 217, 166, .45);
  }

  /* Die acht Wiederholungen: weg. Die Kopfzeile sagt es einmal. */
  .vgs__wo {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* In der schmalen Spalte braucht der Paragraf eine eigene Zeile, sonst
     schiebt er den Satz auseinander. */
  .vgs__par {
    display: block;
    margin: 4px 0 0;
    white-space: normal;
  }
}