/* ================================================================
   Tiefe: Papierflächen, die von der Seite in die Abschnitte ragen,
   und ein feines Papierkorn. Die Flächen gehören in die Abschnitte
   Hero, Vier Bereiche, Über uns und Kontakt (siehe index.html).
   Sie wandern beim Scrollen und mit der Maus unterschiedlich weit
   mit (assets/js/tiefe.js).
   ================================================================ */
.hero,.pillars,.about,.contact{ overflow:hidden; }

.bgp{
  position:absolute; z-index:0; aspect-ratio:1; border-radius:6%; pointer-events:none;
  transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--r,0deg));
  will-change:transform;
}
.bgp--slate{
  background:linear-gradient(148deg,#6E93AC 0%,#33556B 56%,#1E3644 100%);
  box-shadow:0 50px 90px -40px rgba(24,42,54,.55);
}
.bgp--paper{
  background:linear-gradient(148deg,#FCFAF7 0%,#E9E1D8 60%,#D3C9BD 100%);
  box-shadow:0 50px 90px -34px rgba(29,26,24,.28), 0 0 0 1px rgba(29,26,24,.05);
}
.bgp--line{ border:1.5px solid var(--line); }
/* Flächen im blauen Hero: Blautöne statt Papier, sonst läge beige Schrift auf beigem Grund */
.bgp--blau{
  background:linear-gradient(148deg,#4D748C 0%,#34576C 58%,#2A4A5E 100%);
  box-shadow:0 50px 90px -40px rgba(8,18,26,.45), 0 0 0 1px rgba(244,238,229,.06);
}
.bgp--tief{
  background:linear-gradient(148deg,#294659 0%,#1D3647 60%,#162B39 100%);
  box-shadow:0 50px 90px -40px rgba(4,12,18,.5), 0 0 0 1px rgba(244,238,229,.05);
}

/* Feines Papierkorn. Es liegt als Hintergrund unter den hellen Flächen und nicht als Schicht
   über der ganzen Seite: Eine Mischschicht über allem würde bei jeder Bewegung der Würfel
   die ganze Seite neu berechnen. */
:root{
  --korn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .1 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
body,.about,.contact{ background-image:var(--korn); }

@media (prefers-reduced-motion:reduce){ .bgp{ transform:rotate(var(--r,0deg)); } }