/* =====================================================================
   A Stranger's Journey – der Look der iOS-App, übersetzt fürs Web
   ---------------------------------------------------------------------
   Quelle: die SwiftUI-App (ASJ/Core/Design/ASJTheme.swift, StoryView.swift,
   MenuShellView.swift, ASJMenuSurfaces.swift, DarkDecisionSign.swift).
   Alle Farben, Deckkräfte, Radien und Schatten sind Werte aus der App.
   iOS-Punkte (pt) entsprechen CSS-Pixeln (px).

   Liquid Glass gibt es im Browser nicht. Die Klassen unten bauen es nach:
   backdrop-filter (Unschärfe + Sättigung) + halbtransparenter Farbton
   + Lichtkante oben + Haarlinie. Die Lichtbrechung am Rand von Liquid
   Glass lässt sich in Safari nicht nachbauen und fehlt bewusst.

   Die @font-face-Regeln für Waden und Gilmer stehen schon in
   css/style.css; diese Datei setzt sie voraus.
   ===================================================================== */

:root {
  /* ---- Farben (ASJTheme) ------------------------------------------- */
  --asj-ink: #05030E;              /* fast schwarz, Grund aller Flächen  */
  --asj-deep-space: #0E0521;       /* Tönung von Glas und Schatten       */
  --asj-violet: #591FBF;
  --asj-magenta: #C90FE3;          /* nur noch Akzent, z. B. Logo-Glow   */
  --asj-aurora-light: #9999FF;     /* Kicker, Glanz, Schatten            */
  --asj-aurora: #33B2F2;           /* Leuchten, Timeline Shift           */
  --asj-connection-blue: #7AC7F2;
  --asj-website-purple: #5836AC;   /* = --primary-purple der Website     */
  --asj-pastel-lavender: #CCC2FF;  /* Tönung und Konturen               */
  --asj-pastel-blue: #B8DBFF;
  --asj-shift-blue: #9EE0FF;       /* Kontur einer Timeline-Shift-Wahl   */

  /* Dieselben Farben als RGB-Tripel, für eigene Deckkräfte:
     rgb(var(--asj-ink-rgb) / 0.4) */
  --asj-ink-rgb: 5 3 14;
  --asj-deep-space-rgb: 14 5 33;
  --asj-violet-rgb: 89 31 191;
  --asj-magenta-rgb: 201 15 227;
  --asj-aurora-light-rgb: 153 153 255;
  --asj-aurora-rgb: 51 178 242;
  --asj-website-purple-rgb: 88 54 172;
  --asj-pastel-lavender-rgb: 204 194 255;
  --asj-pastel-blue-rgb: 184 219 255;

  --asj-text: rgb(255 255 255 / 0.92);
  --asj-text-secondary: rgb(255 255 255 / 0.62);

  /* Der Akzentverlauf der App: Lavendel-Violett an den Rändern, Magenta in
     der Mitte. Für die Nachrichten des Spielers und die Hauptaktionen. */
  --asj-accent-gradient: linear-gradient(to bottom right, #8C5CF7 0%, #D147F0 50%, #8080FA 100%);

  /* ---- Schriften ---------------------------------------------------- */
  --asj-font-title: "Waden", serif;                    /* nur Regular       */
  --asj-font-body: "Gilmer", system-ui, sans-serif;    /* 300 bis 900       */

  /* ---- Formen ------------------------------------------------------- */
  --asj-radius-capsule: 999px;
  --asj-radius-bubble: 20px;
  --asj-radius-bubble-tail: 6px;   /* die Ecke, aus der eine Blase „spricht“ */
  --asj-radius-tile: 26px;
  --asj-radius-dialog: 30px;
  --asj-radius-system: 10px;

  /* ---- Bewegung ----------------------------------------------------- */
  /* Kommt den Federn der App nahe (response 0.55, damping 0.88). */
  --asj-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --asj-ease-out: cubic-bezier(0.25, 0.8, 0.35, 1);
}


/* =====================================================================
   1. Glas
   ===================================================================== */

/* „Clear Glass“ der App: zurückhaltend, der Hintergrund bleibt lesbar.
   Für Chat-Blasen, Kacheln, Leisten. Die Tönung kommt über --glass-tint. */
.asj-glass {
  --glass-tint: rgb(var(--asj-deep-space-rgb) / 0.3);
  position: relative;
  isolation: isolate;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),   /* Lichtkante oben           */
    inset 0 0 0 1px rgb(255 255 255 / 0.1);  /* Haarlinie                 */
}

/* „Regular Glass“: dichter, für Karten über unruhigem Grund. */
.asj-glass--regular {
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
}

/* Weicher Glanz oben links, wie das Licht auf Liquid Glass. */
.asj-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 15% 0%, rgb(255 255 255 / 0.12), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

/* Kontur mit Farbverlauf, wie die Strokes der App. Die Farben kommen über
   --stroke; die Breite über --stroke-width (App: 0.7 pt ≈ 1 px). */
.asj-stroke::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--stroke-width, 1px);
  border-radius: inherit;
  background: var(--stroke, linear-gradient(to bottom right, rgb(255 255 255 / 0.5), rgb(var(--asj-pastel-blue-rgb) / 0.45)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Ohne backdrop-filter (sehr alte Browser): dichtere Tönung statt Unschärfe. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .asj-glass { background: rgb(var(--asj-deep-space-rgb) / 0.82); }
}


/* =====================================================================
   2. Buttons
   ===================================================================== */

/* Hauptaktion („Kontakt aufnehmen“, „Reise fortsetzen“) */
.asj-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 23px;
  border: 0;
  border-radius: var(--asj-radius-capsule);
  font: 700 16px/1.1 var(--asj-font-body);
  color: rgb(255 255 255 / 0.98);
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(to bottom right, rgb(140 92 247 / 0.94), rgb(209 71 240 / 0.94) 50%, rgb(128 128 250 / 0.94)),
    rgb(var(--asj-pastel-lavender-rgb) / 0.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  backdrop-filter: blur(20px) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 7px 36px rgb(var(--asj-aurora-rgb) / 0.3);
  --stroke: linear-gradient(to bottom right, rgb(255 255 255 / 0.5), rgb(var(--asj-pastel-blue-rgb) / 0.45));
  transition: transform 160ms var(--asj-ease-out), filter 160ms var(--asj-ease-out), box-shadow 240ms var(--asj-ease-out);
}
.asj-button::before { /* Kontur */
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.asj-button:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 9px 42px rgb(var(--asj-aurora-rgb) / 0.38); }
.asj-button:active { transform: translateY(-1px) scale(0.975); color: rgb(255 255 255 / 0.74); }
.asj-button:focus-visible { outline: 2px solid var(--asj-pastel-blue); outline-offset: 3px; }

/* Zweite Aktion („Neue Reise beginnen“): klares, violett getöntes Glas. */
.asj-button--secondary {
  background:
    linear-gradient(to bottom right, rgb(255 255 255 / 0.055), rgb(var(--asj-magenta-rgb) / 0.03), rgb(var(--asj-violet-rgb) / 0.046)),
    rgb(var(--asj-violet-rgb) / 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 7px 36px rgb(var(--asj-aurora-rgb) / 0.15);
  --stroke: linear-gradient(to bottom right, rgb(255 255 255 / 0.55), rgb(var(--asj-magenta-rgb) / 0.28));
}
.asj-button--secondary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 9px 42px rgb(var(--asj-aurora-rgb) / 0.22); }

/* Antwortknopf im Chat: Kapsel, Verlauf von Website-Lila zu Aurora-Hell
   über einer sehr dünnen Milchglas-Schicht. */
.asj-choice {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--asj-radius-capsule);
  font: 700 13px/1.3 var(--asj-font-body);
  text-align: center;
  color: rgb(255 255 255 / 0.94);
  cursor: pointer;
  background: linear-gradient(to bottom right, rgb(var(--asj-website-purple-rgb) / 0.6) 5%, rgb(var(--asj-aurora-light-rgb) / 0.55));
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 4px 26px rgb(var(--asj-aurora-light-rgb) / 0.25);
  --stroke: linear-gradient(to bottom right, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.42));
  transition: transform 140ms ease-out, opacity 140ms ease-out, background 140ms ease-out;
}
.asj-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.asj-choice:hover { background: linear-gradient(to bottom right, rgb(var(--asj-website-purple-rgb) / 0.7) 5%, rgb(var(--asj-aurora-light-rgb) / 0.68)); }
.asj-choice:active {
  transform: scale(0.975);
  opacity: 0.9;
  background: linear-gradient(to bottom right, rgb(var(--asj-aurora-light-rgb) / 0.85) 5%, rgb(var(--asj-aurora-light-rgb) / 0.92));
}

/* Timeline Shift (Dark Decision): hellblaue Kontur und Leuchten. */
.asj-choice--shift {
  box-shadow: 0 4px 36px rgb(var(--asj-aurora-rgb) / 0.5);
  --stroke: linear-gradient(to bottom right, rgb(255 255 255 / 0.42), rgb(158 224 255 / 0.8));
}

/* Zwei Antworten nebeneinander, mehr untereinander – wie in der App. */
.asj-choices { display: grid; gap: 9px; }
.asj-choices--pair { grid-template-columns: 1fr 1fr; }


/* =====================================================================
   3. Chat
   ===================================================================== */

.asj-chat { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }

/* Nachricht des Fremden: klares Glas, dunkel getönt, Ecke oben links spitz. */
.asj-bubble {
  position: relative;
  isolation: isolate;
  align-self: flex-start;
  max-width: min(310px, 82%);
  padding: 12px 16px;
  border-radius: var(--asj-radius-bubble-tail) var(--asj-radius-bubble) var(--asj-radius-bubble) var(--asj-radius-bubble);
  font: 400 14px/1.45 var(--asj-font-body);
  color: var(--asj-text);
  background: rgb(var(--asj-deep-space-rgb) / 0.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 7px 26px rgb(var(--asj-deep-space-rgb) / 0.42);
}

/* Antwort des Spielers: Akzentverlauf auf Lavendel-Glas, Ecke unten rechts. */
.asj-bubble--player {
  align-self: flex-end;
  border-radius: var(--asj-radius-bubble) var(--asj-radius-bubble) var(--asj-radius-bubble-tail) var(--asj-radius-bubble);
  font-weight: 700;
  color: #fff;
  background:
    linear-gradient(to bottom right, rgb(140 92 247 / 0.66), rgb(209 71 240 / 0.66) 50%, rgb(128 128 250 / 0.66)),
    rgb(var(--asj-pastel-lavender-rgb) / 0.24);
  box-shadow: inset 0 0 0 1px rgb(var(--asj-pastel-lavender-rgb) / 0.4);
}
.asj-bubble--player.asj-bubble--shift { box-shadow: inset 0 0 0 1px rgb(var(--asj-pastel-lavender-rgb) / 0.4), 0 0 36px rgb(var(--asj-aurora-rgb) / 0.55); }

/* Systemzeile: „[ VERBINDUNG HERGESTELLT ]“, Schrift im Verlauf Aurora → Magenta. */
.asj-system-line {
  position: relative;
  padding: 10px 12px;
  margin: 6px 0;
  text-align: center;
  font: 700 10px/1.2 var(--asj-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--asj-radius-system);
  background: linear-gradient(to right, rgb(var(--asj-ink-rgb) / 0.3), rgb(var(--asj-ink-rgb) / 0.9), rgb(var(--asj-ink-rgb) / 0.3));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
}
.asj-system-line span {
  background: linear-gradient(to right, var(--asj-aurora), var(--asj-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Der Fremde schreibt gerade: drei Punkte in einer Glaskapsel. */
.asj-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 13px 15px;
  border-radius: var(--asj-radius-capsule);
  background: rgb(var(--asj-deep-space-rgb) / 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.asj-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.2;
  transform: scale(0.9);
  animation: asj-typing 990ms infinite;
}
.asj-typing i:nth-child(2) { animation-delay: 330ms; }
.asj-typing i:nth-child(3) { animation-delay: 660ms; }
@keyframes asj-typing {
  0%, 33% { opacity: 0.85; transform: scale(1.18); }
  34%, 100% { opacity: 0.2; transform: scale(0.9); }
}

/* Neue Nachrichten gleiten herein: seine von unten, die des Spielers von rechts. */
.asj-arrive { animation: asj-arrive 550ms var(--asj-ease-spring) both; }
.asj-bubble--player.asj-arrive { transform-origin: bottom right; animation-name: asj-arrive-player; }
@keyframes asj-arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes asj-arrive-player { from { opacity: 0; transform: translate(28px, 12px) scale(0.9); } }


/* =====================================================================
   4. Flächen, Hinweise, Überschriften
   ===================================================================== */

/* Kachel hinter Menü-Abschnitten und Dialogen. */
.asj-tile {
  position: relative;
  isolation: isolate;
  padding: 20px 22px;
  border-radius: var(--asj-radius-tile);
  background: rgb(var(--asj-deep-space-rgb) / 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.21);
}

/* Hinweis-Kapsel wie „Der Fremde ist nicht erreichbar“: Glas mit Verlauf,
   runder Signal-Badge links. */
.asj-notice {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: var(--asj-radius-capsule);
  background:
    linear-gradient(to bottom, rgb(var(--asj-aurora-light-rgb) / 0.16), rgb(var(--asj-deep-space-rgb) / 0.5)),
    rgb(var(--asj-deep-space-rgb) / 0.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    0 8px 28px rgb(var(--asj-ink-rgb) / 0.55),
    0 0 36px rgb(var(--asj-aurora-light-rgb) / 0.14);
  --stroke: linear-gradient(to bottom, rgb(255 255 255 / 0.24), rgb(var(--asj-aurora-light-rgb) / 0.1));
}
.asj-notice::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.asj-notice__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgb(var(--asj-website-purple-rgb) / 0.7), rgb(var(--asj-aurora-light-rgb) / 0.55));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.32), 0 0 16px rgb(var(--asj-aurora-light-rgb) / 0.35);
  color: var(--asj-pastel-blue);
}
.asj-notice__title { font: 700 14px/1.3 var(--asj-font-body); color: #fff; }
.asj-notice__text { font: 400 12px/1.3 var(--asj-font-body); color: var(--asj-text-secondary); }

/* Kleine gesperrte Zeile über einem Titel („DEINE REISE“). */
.asj-kicker {
  font: 500 13px/1.2 var(--asj-font-body);
  letter-spacing: 0.215em;
  text-transform: uppercase;
  color: var(--asj-aurora-light);
  text-shadow: 0 5px 24px rgb(var(--asj-ink-rgb) / 0.8);
}

/* Seitentitel (Waden 38) und großer Titel wie auf dem Startbildschirm (Waden 42). */
.asj-title {
  margin: 7px 0 0;
  font: 400 38px/1 var(--asj-font-title);
  color: #fff;
  text-shadow: 0 5px 24px rgb(var(--asj-ink-rgb) / 0.8);
}
.asj-title--hero {
  font-size: 42px;
  line-height: 0.88;
  letter-spacing: 0.033em;
  text-shadow: 0 10px 24px rgb(var(--asj-ink-rgb) / 0.8);
}
.asj-tagline {
  font: 400 17px/1.4 var(--asj-font-body);
  color: rgb(255 255 255 / 0.78);
  text-shadow: 0 4px 24px rgb(var(--asj-ink-rgb) / 0.9);
}


/* =====================================================================
   5. Leuchten: Logo und Timeline Shift
   ===================================================================== */

/* Das Logo-Signet atmet (2,8 s hin und zurück): weißer Kern, Magenta-Hof,
   Aurora-Schein. Für PNGs mit Transparenz. */
.asj-logo-glow { animation: asj-logo-glow 2.8s ease-in-out infinite alternate; }
@keyframes asj-logo-glow {
  from { filter: drop-shadow(0 0 2px rgb(255 255 255 / 0.17)) drop-shadow(0 0 15px rgb(var(--asj-magenta-rgb) / 0.58)) drop-shadow(0 0 26px rgb(var(--asj-aurora-light-rgb) / 0.24)); }
  to   { filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.2))  drop-shadow(0 0 25px rgb(var(--asj-magenta-rgb) / 0.9))  drop-shadow(0 0 38px rgb(var(--asj-aurora-light-rgb) / 0.32)); }
}

/* Der Neon-Ring einer gewählten Timeline-Shift-Antwort. */
.asj-ring {
  --size: 22px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: calc(var(--size) * 0.09) solid #fff;
  box-shadow:
    0 0 calc(var(--size) * 0.12) #6105FF,
    0 0 calc(var(--size) * 0.34) #9905F5,
    inset 0 0 calc(var(--size) * 0.2) #9905F5;
  animation: asj-ring 1.8s ease-in-out infinite alternate;
}
@keyframes asj-ring { from { filter: brightness(0.85); } to { filter: brightness(1.15); } }

/* Pulsierende Kreise über einer anstehenden Timeline-Shift-Entscheidung. */
.asj-pulse { position: relative; width: 44px; height: 44px; }
.asj-pulse::before,
.asj-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #99FFFF 0%, rgb(76 235 255 / 0.95) 10%, rgb(128 204 255 / 0.8) 22%, rgb(153 140 252 / 0.55) 30%, rgb(184 77 252 / 0.3) 36%, rgb(214 41 252 / 0.14) 42%, transparent 60%);
  box-shadow: inset 0 0 0 2px rgb(191 230 255 / 0.45);
  animation: asj-pulse 1.8s ease-in-out infinite;
}
.asj-pulse::after { animation-delay: 0.9s; }
@keyframes asj-pulse {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}


/* =====================================================================
   6. Hintergrund
   ===================================================================== */

/* Bühne wie in der App: Bild (Cover oder Szene), leicht entsättigt und
   weichgezeichnet, darüber Verläufe in Ink und Deep Space. Das Bild kommt
   über --stage-image. */
.asj-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--asj-ink);
  overflow: hidden;
}
.asj-stage::before {
  content: "";
  position: absolute;
  inset: -24px;               /* Rand für die Unschärfe */
  background: var(--stage-image) center / cover no-repeat;
  filter: saturate(0.86) contrast(0.96) blur(1.25px);
}
.asj-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(var(--asj-deep-space-rgb) / 0.44) 0%, rgb(var(--asj-ink-rgb) / 0.12) 42%, rgb(var(--asj-ink-rgb) / 0.48) 100%),
    rgb(var(--asj-ink-rgb) / 0.2);
}

/* Filmkorn über allem: monochromes Rauschen, weiches Licht, 40 %. */
.asj-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.28' intercept='-0.14'/%3E%3CfeFuncG type='linear' slope='1.28' intercept='-0.14'/%3E%3CfeFuncB type='linear' slope='1.28' intercept='-0.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}


/* =====================================================================
   7. Weniger Bewegung
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .asj-arrive,
  .asj-logo-glow,
  .asj-ring,
  .asj-pulse::before,
  .asj-pulse::after,
  .asj-typing i { animation: none; }
  .asj-typing i { opacity: 0.6; }
  .asj-button,
  .asj-choice { transition: none; }
}