/* ============================================================
   Praxis Ragnitz und Oettel
   Feststehender Hintergrund mit Relief          (08.08.2026)

   Warum eine eigene feste Ebene und ausdruecklich KEIN
   background-attachment:fixed: Letzteres laesst den Browser bei
   jedem Scrollschritt neu zeichnen und ruckelt, auf iOS wird es
   ausserdem ganz ignoriert. Die Ebene hier haengt an
   position:fixed und liegt dank translateZ(0) auf einer eigenen
   Zeichenschicht. Beim Scrollen faellt dort keine Arbeit an.

   Die hellen Sektionen werden durchsichtig, damit das Relief
   ueberhaupt sichtbar ist. Dunkle Sektionen bleiben unangetastet,
   sie decken den Hintergrund bewusst ab und geben der Seite ihren
   Rhythmus. Weisse Karten bleiben ebenfalls deckend.
   ============================================================ */

/* ---------- 1 Die Ebene ---------- */
.px-hintergrund{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  transform:translateZ(0);
}
.px-hintergrund .px-relief{
  position:absolute;
  inset:0;
  opacity:var(--px-relief-deckkraft, .08);
  transition:opacity .4s ease;
}
.px-hintergrund .px-relief svg{
  display:block;
  width:100%;
  height:100%;
}

/* Sehr sanfter Aufheller in der Blattmitte. Dort steht auf fast
   allen Bildschirmgroessen Text. Kostet nichts und haelt die
   Schrift auch dann klar, wenn eine Relieflinie sie kreuzt. */
.px-hintergrund::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(78% 58% at 50% 42%,
    rgba(248,245,238,.42) 0%,
    rgba(248,245,238,.18) 45%,
    rgba(248,245,238,0) 72%);
}

/* ---------- 2 Helle Sektionen durchsichtig ----------
   Der Vorsatz body erhoeht nur die Spezifitaet, damit diese Regel
   die urspruengliche Deklaration im Seitenkopf schlaegt. Kein
   !important, damit spaetere gezielte Aenderungen moeglich bleiben. */
body .standorte,
body .about,
body .team,
body .termin,
body .services,
body .testimonials,
body .notfall,
body .karriere,
body .rezept,
body .dgr-section{
  background:transparent;
}

/* ---------- 2b Die abgesetzten Sektionen (05.09.2026, Etappe 3) ----------
   sektionen.css legt vier Sektionen auf Creme-warm: Standorte, Praxisteam,
   Gesundheitsthemen, Rezept. Eine deckende Flaeche schluckt das Relief
   vollstaendig - auf einem Drittel der Seite kam die Idee der Seite gar
   nicht mehr durch.

   Deshalb traegt Creme-warm dort jetzt Alpha. Gemessen: das Relief kommt
   mit 0,62 noch zu 38 Prozent durch, vorher zu 0. Gleich stark wie auf
   dem Grund ist es nicht - das geht nur ohne Flaeche -, aber die Linie
   laeuft sichtbar weiter, statt an einer Kante zu enden.

   Die Haarlinien halten die Sektion trotz der duenneren Flaeche als
   eigenen Block lesbar. Ohne sie verschwaemme der Unterschied zum Grund.

   html body und nicht body: sektionen.css laedt spaeter und setzt
   dieselben Klassen. Die Relieffrage gehoert aber hierher, in die Datei,
   die das Relief besitzt - nicht in die Datei, die Flaechen verteilt. */
html body .standorte,
html body .pt-section,
html body .gt-section,
html body .rezept{
  background:rgba(242,237,225,.62);
  border-top:1px solid rgba(26,31,27,.05);
  border-bottom:1px solid rgba(26,31,27,.05);
}

/* ---------- 3 Ruhe fuer empfindliche Augen ----------
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   auch hier keine weichen Uebergaenge. */
@media (prefers-reduced-motion:reduce){
  .px-hintergrund .px-relief{transition:none}
}

/* ---------- 4 Druck ----------
   Auf Papier bringt das Relief nichts und kostet nur Toner. */
@media print{
  .px-hintergrund{display:none}
}