/* ==========================================================================
   Szillus — Effektschicht (nur lokale Vorschau)

   Aufbau nach dem Vorbild des Glyph-Felds: nicht jedes Bauteil bekommt eine
   eigene Animation, sondern es gibt EIN durchlaufendes Feld hinter der
   ganzen Seite, und die Seite liegt als perforiertes Blech davor. Die
   Löcher sind Fenster auf dasselbe Feld — es hört unter der Bühne nicht
   auf, sondern läuft unter Text, Abschnitten und Karten weiter.

   Drei Lagen, von hinten nach vorn:

     1. Der Grund           — die Seitenfarbe, deckend.
     2. Das Feld            — eine feste Leinwand mit einer sehr langsamen
                              Wellenform. Der Zeiger wird auf der ganzen
                              Seite verfolgt und beult die Wellen leicht
                              aus. Hinter den Bühnen liegt sie zwar auch,
                              ist dort aber verdeckt: über einem Foto wären
                              die Wellen nur Unruhe.
     3. Das perforierte Blech — jede Fläche trägt dasselbe Lochraster. Es
                              scrollt mit der Seite, genau wie das Feld
                              dahinter: beide gehören zur Seite, nicht zum
                              Fenster.

   Alles ist bewusst leise. Bei "prefers-reduced-motion" steht das Feld
   still; das Blech bleibt als ruhige Perforation stehen.
   ========================================================================== */

:root {
  /* --- Lochraster ------------------------------------------------------- */
  --loch-teilung: 22px;   /* Mitte zu Mitte */
  --loch-kern:   2.2px;   /* bis hierhin ist das Blech dünn */
  --loch-rand:   7.0px;   /* ab hier volles Blech */
  --loch-offen:    84%;   /* Deckkraft im Loch, Flächen */
  --loch-dicht:    98%;   /* Deckkraft im vollen Blech */

  /* Ein Loch lässt 16 % des Feldes durch, volles Blech 2 %. Weiter offene
     Löcher wären verlockend — dann steht das Raster aber schon im Ruhezustand
     als Punktmuster auf der Fläche, unabhängig vom Feld. So ist die
     Perforation eine Textur, die man erst sucht, und sichtbar wird allein
     das langsame Wandern der Helligkeit darüber.
     Karten tragen kein eigenes Blech, sondern tönen das des Abschnitts ein
     (siehe unten). Hinter einer Karte kommen so noch rund 10 % des Feldes
     an — genug, denn wahrgenommen wird dort die Bewegung, nicht der
     Kontrast. */

  /* --- Feld ------------------------------------------------------------- */
  /* Ein mittleres Stahlblau. Es ist dunkler als der helle Grund und heller
     als das Bühnenfoto — dieselbe Farbe trägt also in beiden Themes und in
     beiden Zusammenhängen. */
  --feld-linie:  94, 148, 196;
  /* Nachgemessen am gerenderten Bild. Siehe README für die Zahlen. */
  --feld-staerke: .20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --feld-linie:  126, 178, 222;
    --feld-staerke: .24;
  }
}

/* --------------------------------------------------------------------------
   1. Der Grund
   Der Grund gehört an die Wurzel, nicht an den Körper: die feste Leinwand
   liegt dazwischen. Wäre der Körper deckend, verdeckte er sie.
   -------------------------------------------------------------------------- */
html { background: var(--grund); }
body { background: transparent; }

/* --------------------------------------------------------------------------
   2. Das Feld
   Die Leinwand bleibt am Fenster — eine Leinwand über die ganze Seitenhöhe
   wäre bei mehreren tausend Pixeln zu gross für den Speicher. Gezeichnet
   wird aber in Seitenkoordinaten: das Skript verschiebt die Wellen um die
   Scrollposition und wiederholt sie periodisch. Sichtbar ist damit ein Feld,
   das zur Seite gehört und mit ihr wandert.
   -------------------------------------------------------------------------- */
.feld {
  position: fixed; inset: 0; z-index: -1;
  display: block; width: 100vw; height: 100vh;
  pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.feld[data-bereit="true"] { opacity: 1; }

/* Die Bühnen bleiben, wie sie waren: eigener Stapelzusammenhang, eigener
   Grund, Foto. Die Leinwand liegt hinter ihnen und ist dort nicht zu sehen —
   über einem Foto wären die Wellen nur Unruhe. Das Feld zeigt sich
   ausschliesslich durch die Perforation der Flächen. */

/* --------------------------------------------------------------------------
   3. Das perforierte Blech
   Ein Muster, viermal in verschiedenen Farben. "fixed" hält alle Raster in
   Deckung, damit gestapelte Lagen dieselben Löcher haben.
   -------------------------------------------------------------------------- */
/* Alle Flächen, die Blech tragen, bekommen Rasterweite, Verankerung und
   durchsichtigen Grund in EINER Regel — und zwar mit jedem Klassennamen
   ausgeschrieben. Grund: site.css setzt .grund-nebel, .grund-dunkel und
   .aufruf über die Kurzform "background", und die setzt background-size und
   background-attachment gleich mit zurück. Ein blosses "main > section"
   verliert dagegen an Spezifität — das Raster würde dann als ein einziger
   riesiger Farbverlauf über den ganzen Abschnitt gezogen statt gekachelt.

   "scroll" statt "fixed": das Blech gehört zur Seite und wandert mit ihr.
   Jeder Abschnitt beginnt sein Raster damit an der eigenen Oberkante, die
   Phase springt an Abschnittsgrenzen also um bis zu eine Lochbreite. Bei
   3 von 255 Kontrast ist das nicht zu sehen — und es spart die Rechenzeit,
   die ein am Fenster verankerter Hintergrund beim Scrollen kostet. */
main > section,
main > section.grund-nebel,
main > section.grund-dunkel,
main > section.aufruf,
.kennzahlen,
.fuss {
  background-color: transparent;
  background-repeat: repeat;
  background-size: var(--loch-teilung) var(--loch-teilung);
  background-attachment: scroll;
}

/* Dasselbe Muster, viermal in der Farbe der jeweiligen Fläche. */
main > section,
.kennzahlen {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--grund) var(--loch-offen), transparent) 0 var(--loch-kern),
    color-mix(in srgb, var(--grund) var(--loch-dicht), transparent) var(--loch-rand));
}

main > section.grund-nebel {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--grund-alt) var(--loch-offen), transparent) 0 var(--loch-kern),
    color-mix(in srgb, var(--grund-alt) var(--loch-dicht), transparent) var(--loch-rand));
}

main > section.grund-dunkel,
main > section.aufruf {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--dunkel) var(--loch-offen), transparent) 0 var(--loch-kern),
    color-mix(in srgb, var(--dunkel) var(--loch-dicht), transparent) var(--loch-rand));
}

.fuss {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--dunkel-tief) var(--loch-offen), transparent) 0 var(--loch-kern),
    color-mix(in srgb, var(--dunkel-tief) var(--loch-dicht), transparent) var(--loch-rand));
}

/* Die Bühnen bekommen kein Blech und behalten ihren eigenen Grund. */
main > section.buehne,
main > section.buehne-klein {
  background-image: none;
  background-color: var(--dunkel-tief);
}

/* Die Karten bekommen bewusst KEIN eigenes Blech. Zwei Lochbleche
   übereinander sähen aus wie ein Rasterdruck: das Loch der Karte zeigt dann
   nicht das Feld, sondern die hellere Fläche darunter, und das Raster tritt
   als hartes Punktmuster hervor — auf dunklen Karten besonders.

   Stattdessen sind die Karten durchscheinende Flächen auf dem einen Blech
   des Abschnitts. Sie tönen es ein, die Löcher bleiben die des Abschnitts,
   und das Feld läuft ungebrochen unter ihnen weiter. Genau so liegen im
   Glyph-Feld die Tafeln auf dem Schleier. */
.leistung, .spez-karte, .kontaktkarte, .kennwert {
  background-image: none;
  background-color: color-mix(in srgb, var(--karte) 84%, transparent);
}

.leistung--dunkel {
  background-color: color-mix(in srgb, var(--dunkel-tief) 80%, transparent);
}


/* --------------------------------------------------------------------------
   Rücksicht: Bewegungsarmut, Druck, kleine Geräte
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .feld { transition: none; }
}

/* Auf dem Handy entfällt das Feld — die Leinwand kostet dort mehr, als der
   kaum sichtbare Effekt wert ist. Das ruhende Lochblech bleibt. */
@media (max-width: 700px) {
  .feld { display: none; }
}

@media print {
  .feld { display: none; }
  main > section, .kennzahlen, .fuss { background-image: none; }
}