/* ==========================================================================
   Scroll-Effekt fuer Film und Fotos (Praxisfilm, Empfang)

   Das Medium liegt immer bildschirmfuellend im Kleber. Was waechst, ist nur
   der sichtbare Ausschnitt (clip-path). Frueher wurden Breite und Hoehe
   animiert, dann muss der Browser in jedem Einzelbild das Layout neu
   rechnen. Der Ausschnitt kostet das nicht und laeuft spuerbar ruhiger.

   Der Schatten liegt bewusst nur im Ruhezustand an. Ein drop-shadow ueber
   ein bildschirmfuellendes Video waere waehrend der Fahrt der teuerste
   Posten von allen.
   ========================================================================== */

.vs-section {
  position: relative;
  /* Scrollstrecke. Kuerzer als zuvor, dadurch steht weniger Leerraum */
  height: 260vh;
  height: 260svh;
  /* index.html gibt jeder Sektion 8px 48px 140px. Hier muss das weg,
     sonst bleibt im Vollbild links und rechts ein Rand stehen. */
  padding: 0;
  /* bewusst durchsichtig: die Nachbarsektionen sind es auch, darunter liegt
     der Seitenton mit dem Relief. */
  background: transparent;
}

.vs-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* haelt Aenderungen im Container, das Dokument wird nicht neu berechnet */
  contain: layout paint;
}

.vs-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Startausschnitt: 72 Prozent breit, 70 Prozent hoch, mittig.
     Die Werte setzt beim Scrollen /assets/video-scroll.js */
  clip-path: inset(15% 14% 15% 14% round 26px);
  background: transparent;
}

.vs-section.is-aktiv .vs-frame {
  will-change: clip-path;
}

/* Schatten nur im Ruhezustand, siehe Kopf der Datei */
.vs-frame.vs-ruhe {
  filter: drop-shadow(0 34px 60px rgba(26, 31, 27, 0.3));
}

.vs-video,
.vs-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--forest-ink, #1C3125);
}

/* Der Empfang wird etwas hoeher angeschnitten, damit die Kollegin
   am Telefon auch im Vollbild mittig im Blick bleibt. */
.vs-bild {
  object-position: center 42%;
}

/* Bildunterschrift, blendet im Vollbild ein */
.vs-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.vs-section.is-voll .vs-cap { opacity: 0.95; }

/* --------------------------------------------------------------------------
   Knopf zum Anhalten (Pflicht nach WCAG 2.2.2 bei Bewegung ueber 5 Sekunden;
   er haelt auch die Wellen-Schrift an). Seit 15.08.2026 auf Dirks Wunsch als
   kleiner stiller Kreis OBEN RECHTS statt Textknopf unten links: er soll
   nicht ablenken, der Platz unten links gehoert der Schrift. Die
   Beschriftung bleibt fuer Vorleser erhalten (unsichtbarer Text).
   -------------------------------------------------------------------------- */
.vs-pause {
  position: absolute;
  right: calc(14% + 14px);
  top: calc(15% + 14px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(20, 24, 21, 0.45);
  color: #FFFFFF;
  opacity: 0.55;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease,
              right 0.25s ease, top 0.25s ease;
}

/* im Vollbild wandert er an den Bildschirmrand (oben, unten rechts sitzt
   der feste Notfallknopf 116 117) */
.vs-section.is-voll .vs-pause {
  right: 18px;
  top: 18px;
}

.vs-pause:hover,
.vs-pause:focus-visible {
  opacity: 1;
  background: rgba(20, 24, 21, 0.85);
  border-color: rgba(255, 255, 255, 0.75);
}

.vs-pause:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

.vs-pause svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

/* Beschriftung nur fuer Vorleser (der Knopf traegt zusaetzlich title) */
.vs-pause .vs-pause-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vs-pause .vs-icon-play { display: none; }
.vs-pause[data-angehalten="true"] .vs-icon-play { display: block; }
.vs-pause[data-angehalten="true"] .vs-icon-pause { display: none; }

/* --------------------------------------------------------------------------
   Bis 1039 Pixel: kuerzere Strecke, groesserer Startausschnitt
   -------------------------------------------------------------------------- */
@media (max-width: 1039px) {
  .vs-section {
    height: 200vh;
    height: 200svh;
  }
  .vs-frame {
    clip-path: inset(19% 8% 19% 8% round 22px);
  }
  .vs-pause { right: calc(8% + 12px); top: calc(19% + 12px); }
}

/* --------------------------------------------------------------------------
   Bis 768 Pixel: eigene Spielart des Effekts (seit 14.08.2026).
   position: sticky ist hier durch overflow-x auf html/body ausser Kraft,
   deshalb liegt der Rahmen randlos ueber der vollen Displaybreite und der
   Ausschnitt waechst, waehrend die Sektion im normalen Fluss durchs Bild
   laeuft. Die Startwerte (4% / 7% / 18px) muessen zu video-scroll.js passen.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vs-section {
    height: auto;
    padding: 34px 18px 40px;
  }
  .vs-sticky {
    position: static;
    height: auto;
    contain: none;
  }
  .vs-frame {
    position: relative;
    inset: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    aspect-ratio: 16 / 9;
    /* !important noetig: index.html deckelt unter 768 ALLES mit
       * { max-width: 100% !important; } - hier soll es randlos sein. */
    max-width: none !important;
    clip-path: inset(4% 7% 4% 7% round 18px);
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }
  /* Das Empfangsfoto steht hochkantiger, damit Chips und Zeile Platz haben */
  #praxisempfang .vs-frame { aspect-ratio: 4 / 3; }
  .vs-frame.vs-ruhe { filter: none; }
  .vs-pause {
    right: calc(7% + 10px);
    top: calc(4% + 10px);
  }
  .vs-section.is-voll .vs-pause { right: 10px; top: 10px; }
}

/* --------------------------------------------------------------------------
   Wellen-Titel im Film (unten links, ueber dem Anhalteknopf)
   -------------------------------------------------------------------------- */
.vs-titel {
  position: absolute;
  left: 15%;
  bottom: 17%;
  z-index: 2;
  max-width: 70%;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   ecke-mitwachsen-20260903  (Dirks Ansage vom 03.09.2026)

   Vorher wuchs die Schrift zwar mit, blieb aber an derselben Stelle des
   BILDSCHIRMS stehen. Weil das Bild darunter groesser wurde, wanderte sie
   relativ zum Bild nach innen. Gemessen bei 1680 mal 1050:

     Abstand zur linken Bildkante    in Ruhe  17 px   im Vollbild  252 px
     Abstand zur unteren Bildkante   in Ruhe  21 px   im Vollbild  179 px

   Jetzt klebt sie an der unteren linken Ecke des SICHTBAREN Ausschnitts.
   In Anteilen des Ausschnitts bleibt sie damit in jeder Phase gleich:
   1,39 Prozent von links, 2,86 Prozent von unten.

   Die Rechnung dahinter, damit sie nachvollziehbar bleibt. Der Ausschnitt
   ist ab 1040 Pixel oben und unten 15 Prozent, seitlich 14 Prozent
   eingerueckt, also 72 mal 70 Prozent gross, und waechst auf 100 mal 100:

     links(a)  = 14(1-a) + 0,0139 * (72 + 28a) = 15   - 13,61a
     unten(a)  = 15(1-a) + 0,0286 * (70 + 30a) = 17   - 14,14a

   Beide Male exakt linear, deshalb genuegt ein calc ohne Zwischenschritte.
   Bei 769 bis 1039 Pixel ist der Ausschnitt 84 mal 62 Prozent gross:

     links(a)  = 8(1-a)  + 0,0119 * (84 + 16a) =  9   -  7,81a
     unten(a)  = 19(1-a) + 0,0323 * (62 + 38a) = 21   - 17,77a

   Der Wachstumsfaktor gehoert zum Ausschnitt, nicht zum Bildschirm: ab 1040
   waechst das Bild um 100/72 = 1,39, bei 769 bis 1039 nur um 100/84 = 1,19.
   Bisher galten ueberall dieselben 1,46, im mittleren Bereich wuchs die
   Schrift also schneller als das Bild. Jeweils fuenf Prozent Zuschlag, damit
   sie im Vollbild eine Spur praesenter steht: 1,46 und 1,25.

   --vs-a (0 bis 1) setzt video-scroll.js waehrend des Effekts.
   --------------------------------------------------------------------------- */
/*
   luftiger-20260903 (Dirks Nachtrag, 11:28)

   Der Zielwert im Vollbild steht jetzt in PUNKTEN, nicht in Prozent, und
   fuer links und unten ist es derselbe. Das ist der ganze Kniff hinter
   Dirks Satz "den gleichen Abstand nach links wie nach unten": Prozent
   beziehen sich links auf die Breite und unten auf die Hoehe, sind also
   bei einem 16:9-Bild nie gleich. 2,86 Prozent Breite waren 48 Punkte,
   2,86 Prozent Hoehe nur 30.

   Gemessen war vorher bei 1680 mal 1050: 23 Punkte links, 30 unten.
   Jetzt beide 50, unabhaengig vom Seitenverhaeltnis des Fensters.

   Die Ruhelage bleibt unveraendert. Dort sitzt die Schrift an der Ecke
   eines kleineren Bildes mit sichtbarem Rand ringsum, das wirkt schon
   luftig. Die Wanderung nach innen betraegt damit 33 Punkte statt der
   229 von heute frueh, und die stoert nicht, sie sieht nach Absicht aus. */
@media (min-width: 1040px) {
  .vs-titel {
    transform-origin: left bottom;
    transform: scale(calc(1 + var(--vs-a, 0) * 0.46));
    left:   calc(15% - (15% - 50px) * var(--vs-a, 0));
    bottom: calc(17% - (17% - 50px) * var(--vs-a, 0));
  }
}
.vs-welle {
  margin: 0;
  color: #FFFFFF;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 34px rgba(0, 0, 0, 0.4);
}

/* Dunkler Schleier unten im Rahmen: sichert die Lesbarkeit von Titel,
   Chips und Knopf unabhaengig vom Bildinhalt (helle Blumen links). */
#praxisfilm .vs-frame::after,
#praxisempfang .vs-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* ecke-mitwachsen-20260903: von 44 auf 54 Prozent und am Fuss von 0,55 auf
     0,72. Grund: die Schrift steht jetzt tiefer in der Ecke, und gemessen
     wurde am hellen Pflaster im Film nur 2,14 zu 1. */
  height: 54%;
  background: linear-gradient(180deg,
              rgba(10, 14, 11, 0)    0%,
              rgba(10, 14, 11, 0.34) 46%,
              rgba(10, 14, 11, 0.72) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Empfang: die A12-Zeilen stehen hoeher als der alte Chip-Block. Der
   Schleier deckt deshalb zusaetzlich die linke Bildseite ab (gruene Wand,
   Orchidee), gleiches Prinzip wie der Fussschleier: Lesbarkeit unabhaengig
   vom Bildinhalt. Der Film behaelt den reinen Fussschleier. */
#praxisempfang .vs-frame::after {
  height: 100%;
  /* ecke-mitwachsen-20260903: links und unten kraeftiger. Der Textblock sitzt
     jetzt in der unteren linken Ecke, genau dort, wo im Foto die gruene Wand
     und die Orchidee stehen. Rechts bleibt das Bild unberuehrt, die Kollegin
     am Telefon wird nicht abgedunkelt. */
  background:
    linear-gradient(90deg, rgba(10, 14, 11, 0.62) 0%, rgba(10, 14, 11, 0.34) 38%, rgba(10, 14, 11, 0) 62%),
    linear-gradient(180deg, rgba(10, 14, 11, 0) 36%, rgba(10, 14, 11, 0.56) 100%);
}

/* --------------------------------------------------------------------------
   Zeilen von den Seiten (A12) auf dem Empfangsfoto, seit 15.08.2026 anstelle
   der Schmuck-Chips (Dirks Vorgabe). Typografie verbindlich: Fraunces 300,
   clamp(28px, 4.6vw, 68px), Zeilen als Bloecke, letzte Zeile im Hausakzent.
   Die Zeilen fahren scrollgebunden von links und rechts herein
   (/assets/sidelines.js). Auf Desktop waechst der Block wie der Film-Titel
   mit dem Ausschnitt mit (--vs-a aus video-scroll.js). Der Zeilen-Ueberlauf
   liegt in .line-mask (overflow hidden), es entsteht nie eine horizontale
   Scrollleiste.
   -------------------------------------------------------------------------- */
.headline-block {
  position: absolute;
  left: 15%;
  bottom: 17%;
  z-index: 2;
  margin: 0;
  padding: 0;
  max-width: min(1150px, 70%);
  pointer-events: none;
  color: #F8F5EE;
}
.headline-block h2 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 4.6vw, 68px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.headline-block .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.headline-block [data-sl] {
  display: block;
  will-change: transform, opacity;
}
/* ecke-mitwachsen-20260903: war #3F7355, der Hausakzent fuer HELLEN Grund.
   Auf dem Empfangsfoto gemessen: 1,14 zu 1 im Mittel, 2,42 an der guenstigsten
   Stelle. Verlangt sind bei 68 Pixel mindestens 3. hausstil.css sagt fuer
   dunklen Grund Gold, das ist --gold-soft. */
.headline-block .accent { color: #C9AD77; }
.headline-block .sub {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.6;
  /* ecke-mitwachsen-20260903: war 0.65. Deckkraft ueber einem Foto mischt mit
     dem Bildinhalt, der Wert ist also nicht vorhersagbar. Gemessen an der
     hellsten Stelle: 2,04 zu 1, verlangt sind bei 17 Pixel 4,5. */
  opacity: 0.86;
  max-width: 46ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
/* Desktop: an der Ecke des Ausschnitts kleben und mitwachsen,
   gleiche Rechnung wie beim Film-Titel, siehe ecke-mitwachsen-20260903 */
/* luftiger-20260903: gleiche Rechnung wie beim Filmtitel, siehe dort. */
@media (min-width: 1040px) {
  .headline-block {
    transform-origin: left bottom;
    transform: scale(calc(1 + var(--vs-a, 0) * 0.46));
    left:   calc(15% - (15% - 50px) * var(--vs-a, 0));
    bottom: calc(17% - (17% - 50px) * var(--vs-a, 0));
  }
}

/* 769 bis 1039 Pixel: kleinerer Ausschnitt, also kleinere Wege und ein
   kleinerer Wachstumsfaktor. Der Sockel von 58 Punkten unter dem Filmtitel
   wird im Vollbild mit abgebaut, sonst schwebte die Schrift dort ueber der
   Ecke statt an ihr zu kleben. */
/* luftiger-20260903: 34 statt 50 Punkte. Das Bild ist hier kleiner, und
   ein Abstand, der auf 1920 luftig wirkt, frisst auf 800 die halbe Zeile. */
@media (min-width: 769px) and (max-width: 1039px) {
  .vs-titel,
  .headline-block {
    transform-origin: left bottom;
    transform: scale(calc(1 + var(--vs-a, 0) * 0.25));
    left: calc(9% - (9% - 34px) * var(--vs-a, 0));
  }
  .vs-titel      { bottom: calc(21% + 58px - (21% + 58px - 34px) * var(--vs-a, 0)); }
  .headline-block { bottom: calc(21% - (21% - 34px) * var(--vs-a, 0)); }
}

/* Bis 768 Pixel bleibt alles wie gehabt: dort springt die Schrift bei
   is-voll, und dafuer wird die weiche Ueberblendung gebraucht, die oben
   entfallen ist. */
@media (max-width: 768px) {
  .vs-titel { transition: left 0.25s ease, bottom 0.25s ease; }
}

@media (max-width: 768px) {
  .vs-titel { left: calc(7% + 14px); bottom: calc(4% + 62px); max-width: 82%; }
  .vs-section.is-voll .vs-titel { left: 14px; bottom: 70px; }
  .vs-welle { font-size: clamp(21px, 6vw, 27px); }
  /* !important noetig: index.html deckelt unter 768 alles mit
     * { max-width: 100% !important; }, sonst laeuft die Unterzeile
     unter dem Ausschnittsrand hindurch und wird abgeschnitten. */
  .headline-block { left: calc(7% + 16px); bottom: calc(4% + 16px); max-width: 76% !important; }
}

/* --------------------------------------------------------------------------
   Wer weniger Bewegung eingestellt hat, bekommt ein ruhiges Standbild
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vs-section {
    height: auto;
    padding: 40px 20px 46px;
  }
  .vs-sticky {
    position: static;
    height: auto;
    contain: none;
  }
  .vs-frame {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 880px;
    margin: 0 auto;
    clip-path: none;
    border-radius: 22px;
    overflow: hidden;
    will-change: auto;
  }
  .vs-frame.vs-ruhe { filter: none; }
  .vs-pause { transition: none; right: 12px; top: 12px; }
  /* Titel und Chips stehen ruhig an festen Plaetzen */
  .vs-titel { left: 18px; bottom: 18px; transition: none; }
  .headline-block { left: 18px; bottom: 18px; transform: none; }
}


/* =========================================================================
   schrift-nach-dem-bild-20260909  (Dirks Ansage vom 09.09.2026)

   "richte die Schrift mal bisschen mehr nach rechts und nach oben und
    nicht zu Randmaessig ausgerichtet"

   Gemessen vorher bei 1600 mal 1000: die Zeilen sassen im Vollbild auf
   50 Punkten links und 50 unten, klebten also in der Ecke. Rechts davon
   steht im Foto reichlich freie Flaeche, erst ab etwa der Bildmitte
   beginnt die Kollegin am Telefon.

   Neu 120 Punkte auf grossen Schirmen, 78 auf mittleren. Links und unten
   derselbe Wert, das ist der Kniff aus luftiger-20260903: Prozent beziehen
   sich links auf die Breite und unten auf die Hoehe und sind deshalb nie
   gleich gross.

   Gilt AUSSCHLIESSLICH fuer das Empfangsfoto. Der Filmtitel oben bleibt
   unveraendert, deshalb steht #praxisempfang davor.
   ========================================================================= */
@media (min-width: 1040px) {
  #praxisempfang .headline-block {
    left:   calc(15% - (15% - 120px) * var(--vs-a, 0));
    bottom: calc(17% - (17% - 120px) * var(--vs-a, 0));
  }
}

@media (min-width: 769px) and (max-width: 1039px) {
  #praxisempfang .headline-block {
    left:   calc(9%  - (9%  - 78px) * var(--vs-a, 0));
    bottom: calc(21% - (21% - 78px) * var(--vs-a, 0));
  }
}


/* =========================================================================
   schleier-folgt-der-schrift-20260909

   Nachmessung zu schrift-nach-dem-bild-20260909. Das Verschieben der
   Schrift nach oben hat den Kontrast an der unguenstigsten Stelle unter
   die Schwelle gedrueckt, gemessen mit der Maskenmethode:

     Zeile           vorher   nach dem Verschieben   verlangt
     Sprechstunde,    3,86           2,96               3
     Nachsorge.       3,89           2,87               3

   Der Grund steckt im Schleier selbst: sein senkrechter Verlauf begann
   erst bei 36 Prozent Hoehe. Die Schrift sitzt jetzt darueber.

   Kein text-shadow als Abhilfe. Der umrandet die Buchstaben und
   verbessert den gemessenen Wert nicht, er versteckt das Problem nur.
   Dieselbe Falle wie bei den Ampelzahlen am 29.08.2026.

   Die Kollegin am Telefon bleibt unberuehrt: sie beginnt bei etwa 53
   Prozent der Bildbreite, dort ist der Schleier schon fast durchsichtig.
   ========================================================================= */
#praxisempfang .vs-frame::after {
  background:
    linear-gradient(90deg,
      rgba(10, 14, 11, 0.70) 0%,
      rgba(10, 14, 11, 0.50) 30%,
      rgba(10, 14, 11, 0.22) 46%,
      rgba(10, 14, 11, 0)    64%),
    linear-gradient(180deg,
      rgba(10, 14, 11, 0)    12%,
      rgba(10, 14, 11, 0.26) 38%,
      rgba(10, 14, 11, 0.46) 68%,
      rgba(10, 14, 11, 0.58) 100%);
}


/* -------------------------------------------------------------------------
   vorhang-20260909: die Schrift 10 Punkte nach rechts und 10 tiefer.
   Dirks Nachbesserung, nachdem er die erste Fassung gesehen hat.
   Von 120/120 auf 130 links und 110 unten.
   ------------------------------------------------------------------------- */
@media (min-width: 1040px) {
  #praxisempfang .headline-block {
    left:   calc(15% - (15% - 130px) * var(--vs-a, 0));
    bottom: calc(17% - (17% - 110px) * var(--vs-a, 0));
  }
}

@media (min-width: 769px) and (max-width: 1039px) {
  #praxisempfang .headline-block {
    left:   calc(9%  - (9%  - 86px) * var(--vs-a, 0));
    bottom: calc(21% - (21% - 70px) * var(--vs-a, 0));
  }
}


/* =========================================================================
   vorhang-ist-die-sektion-20260909  (Dirks Befund vom 09.09.2026, 15:35)

   Er hat an seinen eigenen Bildschirmfotos gesehen, was die erste Fassung
   anrichtet: eine LEERE cremefarbene Flaeche schiebt sich vor das Foto,
   und danach steht minutenlang nichts im Bild, bis die naechste Sektion
   nachrueckt. Woertlich: "das ist falsch ... diese Sektion muss ich
   darueber legen und keine weisse Seite".

   Ein Vorhang ist laut Katalog "Sektion bleibt stehen, naechste schiebt
   sich drueber". Die naechste SEKTION, nicht eine Farbe.

   WARUM ES BISHER NICHT VON SELBST GING
   .gt-section steht in gesundheitsthemen.css auf "transparent", und
   rhythmus.css legt nur einen Schleier darueber. Die Sektion schiebt sich
   zwar ueber das klebende Foto, aber sie ist halbdurchsichtig, man sieht
   das Foto hindurch.

   WAS SICH OPTISCH AENDERT: NICHTS
   rhythmus.css Zeile 59 sagt selbst, was ihr Schleier ergibt:
     --ry-c: rgba(203,222,207,.52);   ergibt ueber A #E1E9DE, Salbei
   Genau dieser Wert steht hier, nur deckend. Dieselbe Farbe.

   ueber die ID gesetzt, damit die Regel gegen "html body .gt-section" aus
   rhythmus.css gewinnt, ohne dort etwas anzufassen. Spezifitaet schlaegt
   Ladereihenfolge, und rhythmus.css bleibt unberuehrt: sie ist die
   juengste Farbebene und gehoert einer anderen Sitzung.

   KOSTET NICHTS
   Eine Hintergrundfarbe statt einer halbdurchsichtigen. Kein Element mehr,
   kein transform, kein will-change, keine Zeile JavaScript. Der Effekt
   entsteht allein daraus, dass die eine Sektion klebt und die andere
   normal weiterscrollt. Damit laeuft er auch dort, wo Bausteine mit
   animation-timeline ausfallen, und auf jedem Geraet gleich.
   ========================================================================= */
#gesundheitsthemen.gt-section {
  background-color: #E1E9DE;
}

/* Rueckfall. Die Gesundheitsthemen verstecken sich selbst, wenn der
   naechtliche Lauf keine geprueften Themen geliefert hat. Dann ist
   #bewertungen die erste sichtbare Folgesektion und muss tragen.
   #F3EEE2 ist der Wert, den .dgr-section ohnehin schon hat, hier nur
   deckend abgesichert. */
#bewertungen.dgr-section {
  background-color: #F3EEE2;
}