/**
 * Ein Kreuz, das in den Farbverlauf eingemischt (per mix-blend-mode) im
 * Hintergrund liegt — deutlich als Kreuz erkennbar, aber ohne harte
 * Kante, damit es sich weiter wie ein Teil des Gradienten anfühlt statt
 * wie ein aufgeklebtes Symbol.
 *
 * WICHTIG (Überlappung am Kreuzungspunkt): mix-blend-mode und opacity
 * stehen bewusst NUR auf dem gemeinsamen Container ".bg-cross", nicht
 * auf den beiden Balken einzeln. Hätte jeder Balken seine eigene
 * Deckkraft/Verblendung, würde der zweite Balken dort, wo er den ersten
 * überlappt (die Kreuzungsfläche), zusätzlich MIT dem bereits
 * verblendeten ersten Balken verblenden — die Fläche wäre dadurch
 * sichtbar heller/"weißer" als der Rest des Kreuzes. Die Balken selbst
 * sind deshalb voll deckend (opacity: 1, kein eigener Blend-Mode) und
 * verschmelzen dank "isolation: isolate" auf dem Container zu EINER
 * flachen Form, bevor genau einmal Deckkraft + Verblend-Modus auf das
 * Ergebnis angewendet werden — dadurch ist die Transparenz überall
 * gleich, auch an der Kreuzungsstelle.
 *
 * Proportionen (WICHTIG, damit nichts auf irgendeinem Bildschirm
 * verzerrt/übersteht):
 *   - Verhältnis Gesamthöhe (--cross-v-length) : Breite des Querbalkens
 *     (--cross-h-length) ist fest 3:2 — --cross-h-length wird direkt aus
 *     --cross-v-length berechnet, es gibt also nur EINEN Wert, an dem
 *     die Gesamtgröße hängt.
 *   - --cross-v-length selbst ist `min(70vh, 120vw)`: normalerweise
 *     durch 70 % der Bildschirmhöhe begrenzt (damit das Kreuz nicht zu
 *     groß/erdrückend wirkt), aber auf sehr schmalen Bildschirmen
 *     (Hochformat-Handy) greift stattdessen die Breiten-Grenze (120vw,
 *     was einem maximalen --cross-h-length von 80vw entspricht) —
 *     dadurch steht der Querbalken nie über den Bildschirmrand hinaus.
 *   - --cross-thickness ist ebenfalls direkt von --cross-v-length
 *     abgeleitet, damit Balkendicke, -länge und -breite IMMER im
 *     selben Verhältnis zueinander bleiben, egal wie groß das Kreuz auf
 *     einem gegebenen Bildschirm gerade gerechnet wird.
 *
 * Sichtbarkeit wird über die Body-Klasse "emds-cross-visible" gesteuert
 * (gesetzt von assets/js/settings-applier.js anhand der Einstellung
 * "Kreuz im Hintergrund").
 *
 * Siehe MANUAL.md, Abschnitt "Einstellungen (Burger-Menü)".
 */

.bg-cross{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  isolation: isolate; /* fasst beide Balken zu einer Gruppe zusammen, siehe Kommentar oben */
  transition: opacity 1.4s ease;

  /* Einzige "Stellschraube" für die Gesamtgröße — Dicke und Breite des
     Querbalkens werden unten im festen Verhältnis davon abgeleitet. */
  --cross-v-length: min(70vh, 120vw);
  --cross-h-length: calc(var(--cross-v-length) * 2 / 3); /* Höhe:Breite = 3:2 */
  --cross-thickness: calc(var(--cross-v-length) * 0.14);
}

body.emds-cross-visible .bg-cross{
  opacity: 1;
}

.bg-cross__v,
.bg-cross__h{
  position: absolute;
  left: 50%;
  background: var(--ink);
  opacity: 1;
  filter: blur(10px);
  border-radius: 24px;
  transform: translate(-50%, -50%);
}

/* Senkrechter Balken, mittig */
.bg-cross__v{
  top: 50%;
  width: var(--cross-thickness);
  height: var(--cross-v-length);
}

/* Querbalken, klassisch im oberen Drittel des senkrechten Balkens */
.bg-cross__h{
  top: 40%;
  width: var(--cross-h-length);
  height: var(--cross-thickness);
}