/* ============================================================================
   Entiflow – Partikelhintergrund
   ----------------------------------------------------------------------------
   Diese Datei allein ergibt bereits einen brauchbaren Grund: einen dunklen
   Verlauf mit einem warmen Schimmer. Läuft das Javascript nicht - weil es
   abgeschaltet ist, weil kein Canvas zur Verfügung steht, weil die Datei
   nicht geladen wurde -, bleibt genau dieser Verlauf stehen. Es gibt deshalb
   keinen sichtbaren Ausfall, nur eine ruhigere Fassung.

   Eingebunden wird sie vor dem Javascript:
     <link rel="stylesheet" href="hintergrund.css">
     <script src="hintergrund.js" defer></script>
   ============================================================================ */

:root {
  --hg-tief:   #070a0f;   /* fast schwarz, leicht blaustichig  */
  --hg-mitte:  #0d131c;
  --hg-warm:   rgba(214, 178, 112, .10);   /* das warme Gold, sehr verhalten */
}

/* Kein Querscrollen und kein Springen der Seitenlänge, wenn die feste
   Fläche dazukommt. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Der Grund. Er trägt auch dann, wenn das Canvas fehlt. */
html.hg-an, body.hg-grund {
  background:
    radial-gradient(120% 80% at 50% 6%,  var(--hg-warm) 0%, transparent 58%),
    radial-gradient(90% 60% at 50% 100%, rgba(120,150,190,.07) 0%, transparent 62%),
    linear-gradient(180deg, var(--hg-tief) 0%, var(--hg-mitte) 52%, var(--hg-tief) 100%)
    var(--hg-tief);
  background-attachment: fixed;
}

/* Die Zeichenfläche. Hinter allem, ohne Griff für Maus und Finger. */
.hg-flaeche {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* Ein eigener Zeichenkontext: Der Browser muss die Fläche beim Scrollen
     nicht mit dem Inhalt zusammen neu setzen.
     Bewusst ohne "size": Die Grösse kommt hier von inset:0, und
     Grössenkapselung hiesse, sie so zu berechnen, als sei nichts da. */
  will-change: transform;
  contain: layout paint;
}

/* Weicher Übergang zwischen Punktfeld und Text.
   Ohne ihn liegt heller Text stellenweise auf hellen Punkten - lesbar
   bleibt er, ruhig nicht mehr. Der Verlauf nimmt oben und unten etwas
   Dichte heraus und lässt die Mitte offen. */
.hg-schleier {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7,10,15,.72) 0%,
      rgba(7,10,15,.18) 26%,
      rgba(7,10,15,.18) 74%,
      rgba(7,10,15,.80) 100%);
}

/* Alles, was Inhalt ist, liegt darüber. Ohne diese Regel entscheidet die
   Reihenfolge im Dokument, und das ist auf Dauer zu wenig verlässlich. */
html.hg-an body > *:not(.hg-flaeche):not(.hg-schleier) {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------- Karten
   Auf dunklem Grund wirkt eine rein weisse Fläche hart. Ein Hauch
   Durchlässigkeit und ein weicher Rand nehmen die Kante, ohne den Kontrast
   des Textes anzutasten: Die Schrift bleibt auf nahezu weissem Grund. */
html.hg-an .karte {
  background: rgba(255,255,255,.965);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 18px 50px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.06);
}

/* Kopfzeilen und Fusszeilen dürfen den Grund durchscheinen lassen. */
html.hg-an > body > header {
  background: rgba(19,32,48,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Text, der unmittelbar auf dem Grund steht, braucht etwas Abhebung. */
html.hg-an body > .fuss,
html.hg-an body > p,
html.hg-an body > small {
  color: #c8d2df;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* --------------------------------------------------------- Kleine Geräte
   Der Schleier wird dichter: Auf einem Telefon liegt der Text näher am
   Grund, und die Fläche ist kleiner, also fällt jeder helle Punkt mehr ins
   Gewicht. */
@media (max-width: 640px) {
  .hg-schleier {
    background:
      linear-gradient(180deg,
        rgba(7,10,15,.80) 0%,
        rgba(7,10,15,.34) 30%,
        rgba(7,10,15,.34) 70%,
        rgba(7,10,15,.86) 100%);
  }
  html.hg-an .karte { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ------------------------------------------------------ Weniger Bewegung
   Das Javascript hält die Kamerafahrt selbst an; hier wird zusätzlich
   alles ruhiggestellt, was der Browser sonst noch bewegen würde. */
@media (prefers-reduced-motion: reduce) {
  .hg-flaeche { will-change: auto; }
  html.hg-an * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------------ Druck
   Auf Papier hat der Grund nichts verloren: Er kostet Toner und macht den
   Text schlechter lesbar. */
@media print {
  .hg-flaeche, .hg-schleier { display: none !important; }
  html.hg-an, body.hg-grund { background: #fff !important; }
  html.hg-an .karte { background: #fff !important; box-shadow: none !important; }
}