/**
 * Weicher Farbverlauf hinter dem Bearbeitungsbereich der Werkzeugseiten.
 *
 * Uebernimmt die Anmutung aus dem Aufmacher der Startseite: drei stark
 * weichgezeichnete Farbkreise in Rot, Blau und Warmgelb, die ineinander
 * laufen. Dort sind es die Elemente unter .aurora-home .aurora; hier
 * entsteht dasselbe Bild aus zwei Pseudoelementen, damit kein zusaetzliches
 * HTML noetig ist.
 *
 * Bewusst kein Eingriff in die Struktur: keine neuen Elemente, keine
 * geaenderten Klassen, keine Aenderung am Ablegen von Dateien. Der Verlauf
 * liegt hinter dem Inhalt und nimmt keine Klicks an. Rueckbau kostet die
 * Zeile im Layout, die diese Datei einbindet.
 *
 * Zur Dosierung: Die erste Fassung lag bei Deckkraft 0,42 auf Farben mit 30
 * Prozent, rechnerisch also 12,6 Prozent Farbe auf weissem Grund. Das sieht
 * man schlicht nicht. Auch eine zweite, kraeftigere Fassung war noch zu
 * blass. Jetzt volle Deckkraft auf kraeftigeren Farben, damit der Verlauf
 * auch auf einem hellen Bildschirm erkennbar ist.
 */

.tool-canvas {
  position: relative;
  isolation: isolate;
}

/* Erster Schleier: rot links, blau rechts. Entspricht den ersten beiden
   Kreisen im Aufmacher der Startseite. */
.tool-canvas::before {
  content: "";
  position: absolute;
  inset: -80px -10% auto;
  height: 880px;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 1;
  background:
    radial-gradient(720px 620px at 6% 14%, rgba(229, 9, 20, .55), transparent 68%),
    radial-gradient(780px 640px at 96% 2%, rgba(96, 132, 255, .50), transparent 68%);
}

/* Zweiter Schleier: warmes Gelb in der Mitte, etwas tiefer. */
.tool-canvas::after {
  content: "";
  position: absolute;
  inset: 140px 0 auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 1;
  background: radial-gradient(640px 520px at 46% 30%, rgba(255, 178, 60, .46), transparent 68%);
}

/* Das Ablagefeld hebt sich vom Verlauf ab. Ohne den etwas kraeftigeren
   Untergrund verschwimmt der gestrichelte Rand darin. */
.tool-canvas .upload-card {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tool-canvas .upload-card:hover,
.tool-canvas .upload-card.dragover,
.tool-canvas .upload-card.drag-over {
  background: rgba(255, 255, 255, .94);
}

/* Auf schmalen Geraeten weniger Flaeche und weniger Weichzeichnung: Ein
   Filter ueber 70 Pixel kostet dort spuerbar Rechenzeit. */
@media (max-width: 768px) {
  .tool-canvas::before {
    height: 460px;
    filter: blur(48px);
  }
  .tool-canvas::after {
    inset: 90px 0 auto;
    height: 300px;
    filter: blur(48px);
  }
}

/* Wer weniger Bewegung und Effekte eingestellt hat, bekommt einen ruhigen,
   flachen Hintergrund ohne Weichzeichnung. */
@media (prefers-reduced-motion: reduce) {
  .tool-canvas::before,
  .tool-canvas::after {
    filter: none;
    opacity: .18;
  }
}

/* ==========================================================================
   Werkzeuge mit eigener Inhaltskarte
   --------------------------------------------------------------------------
   Einige Werkzeuge legen ihren Bereich in eine deckend weisse Karte ueber die
   volle Breite. Die verdeckt den Verlauf vollstaendig, uebrig bleibt ein
   schmaler Rand links und rechts. Leicht durchscheinend gemacht, damit die
   Farben durchkommen, ohne dass der Inhalt an Lesbarkeit verliert.
   ========================================================================== */
.tool-canvas .bcvcard-card,
.tool-canvas .heic-card,
.tool-canvas .invgen-shell,
.tool-canvas .qr-card {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Ablagefeld mittig statt linksbuendig.
   Auf /visitenkarte-zu-vcard sass es mit 522 Pixeln Breite am linken Rand
   einer 1200 Pixel breiten Karte. Das ist ein Fehler der Seite selbst und
   war schon vor dem Verlauf so, faellt jetzt aber staerker auf. */
.tool-canvas .bcvcard-uploader {
  max-width: 640px;
  margin-inline: auto;
}