/* =====================================================================
   Webnest — Startseite
   Dunkel, typografisch, ruhig. Farbe kommt von den Apps selbst.
   ===================================================================== */

:root {
  --bg:        #08080a;
  --bg-soft:   #0e0e11;
  --surface:   #121216;
  --surface-2: #17171c;
  --line:      rgba(255, 255, 255, .075);
  --line-soft: rgba(255, 255, 255, .045);
  --text:      #f2f2f4;
  --muted:     #86868f;
  --faint:     #6a6a73;
  --accent:    #d4ff4f;

  --online:  #5ee08a;
  --offline: #ff5f5f;
  --warn:    #f7c948;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1180px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --radius: 20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  /* leichte Aufhellung oben, damit die Seite nicht flach wirkt */
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  background: radial-gradient(120% 100% at 50% -20%, rgba(255, 255, 255, .055), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.spotlight {
  position: fixed;
  width: 640px;
  height: 640px;
  left: 0; top: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, 50vw), var(--y, 30vh), 0) translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%);
  transition: opacity .6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body.has-pointer .spotlight { opacity: .55; }
}

main, .topbar, .footer { position: relative; z-index: 2; }

/* --------------------------------------------------------------- Topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter) 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: calc(22px + env(safe-area-inset-top));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text);
}

.brand__mark { width: 30px; height: 30px; overflow: visible; }
.brand__mark .ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  transform-origin: center;
  transition: transform .7s var(--ease-spring), opacity .4s;
}
.brand__mark .dot { fill: var(--accent); transition: transform .5s var(--ease-spring); transform-origin: center; }
.brand:hover .ring--outer { transform: scale(1.09); }
.brand:hover .ring--inner { transform: scale(.88); }
.brand:hover .dot { transform: scale(1.25); }

.brand__name {
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -.03em;
}

.topbar__right { display: flex; align-items: center; gap: 14px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  transition: background .4s, box-shadow .4s;
}
.pill__dot.is-live {
  background: var(--online);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 55%, transparent);
  animation: beat 2.4s var(--ease-out) infinite;
}
.pill__dot.is-down { background: var(--offline); }

@keyframes beat {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.clock {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) { .clock { display: none; } }

/* ----------------------------------------------------------------- Hero */

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}

.hero { padding: clamp(46px, 9vw, 96px) 0 clamp(30px, 5vw, 46px); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow__line {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: sweep .7s var(--ease-out) both;
}
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__title {
  margin: 0;
  font-size: clamp(42px, 8.2vw, 88px);
  line-height: .98;
  font-weight: 680;
  letter-spacing: -.045em;
}

.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  animation: liftIn .6s var(--ease-out) both;
}
.line:nth-child(2) > span { animation-delay: .06s; }

@keyframes liftIn {
  from { transform: translateY(105%) rotate(2deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}

/*
  Konturschrift. Zwei Dinge sind hier wichtig, sonst wird die Linie unsauber:

  1. Deckende Strichfarbe. Der Strich liegt mittig auf der Glyphenkontur und
     überlappt sich an engen Rundungen und Buchstabenansätzen selbst. Mit einer
     halbtransparenten Farbe addieren sich diese Stellen zu dunkleren Flecken —
     die Linie sieht doppelt aus. Die Mischung mit der Hintergrundfarbe ergibt
     optisch dasselbe, aber ohne Alpha.
  2. Strichstärke in em. Bei fixem Wert ist der Strich auf dem Handy (42px
     Schrift) relativ doppelt so dick wie am Rechner (88px) und läuft in engen
     Buchstaben zu. In em bleibt das Verhältnis überall gleich.
*/
/*
  Konturschrift.

  Grundstellung ist die gefüllte Akzentfarbe — die sieht überall gut aus und
  kann nicht kaputtgehen. Die Kontur kommt nur dazu, wenn der Browser beides
  beherrscht, was sie braucht.

  Warum das nötig ist: -webkit-text-stroke zeichnet *jede* Kontur einer Glyphe
  nach, auch die inneren Kanten, an denen sich Teilformen überlappen. Beim
  Füllen sind die unsichtbar (nonzero-Regel), beim Umranden nicht — es entstehen
  Striche quer durch Buchstaben. Welche Schrift davon betroffen ist, hängt vom
  System ab: SF Pro auf dem iPhone ja, Segoe UI auf Windows hier nicht.

  Die Technik dagegen: erst den Strich zeichnen, dann die Glyphe in
  Hintergrundfarbe darüber ("paint-order: stroke fill"). Die Füllung deckt alle
  inneren Linien ab, stehen bleibt nur die äussere Hälfte des Strichs rund um
  die tatsächliche Silhouette. Darum die doppelte Strichstärke: sichtbar ist
  davon die Hälfte.
*/
.hero__accent {
  color: var(--accent);
  /* Etwas leichterer Schnitt: Konturschrift wirkt optisch schwerer als
     gefüllte, und schlankere Glyphen stossen bei der engen Laufweite der
     Überschrift nicht aneinander. Die Zeile bleibt so breit wie die darüber. */
  font-weight: 600;
  letter-spacing: -.035em;
}

@supports ((-webkit-text-stroke: 1px red) and (paint-order: stroke)) {
  .hero__accent {
    color: var(--bg);
    -webkit-text-fill-color: var(--bg);
    -webkit-text-stroke: 0.032em var(--accent);
    -webkit-text-stroke: 0.032em color-mix(in srgb, var(--accent) 70%, var(--bg));
    paint-order: stroke fill;
  }
}

.hero__lede {
  max-width: 46ch;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  animation: fadeUp .5s var(--ease-out) .14s both;
}

@keyframes fadeUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------- Suche */

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  margin-top: 30px;
  padding: 0 14px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color .3s, background .3s, box-shadow .3s;
  animation: fadeUp .5s var(--ease-out) .2s both;
}
.search[hidden] { display: none; }
.search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent);
}

.search__icon {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--faint); stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke .3s;
}
.search:focus-within .search__icon { stroke: var(--accent); }

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search__hint {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  line-height: 1;
}
.search:focus-within .search__hint { opacity: 0; }
@media (hover: none) { .search__hint { display: none; } }

/* ---------------------------------------------------------------- Grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 14px;
}

.card {
  --card: #8b8b94;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .4s var(--ease-out),
    border-color .3s var(--ease-out),
    background .3s var(--ease-out);
  animation: cardIn .45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  -webkit-tap-highlight-color: transparent;
}

/* Unsichtbarer Knopf über der ganzen Kachel — Antippen heisst „Hinzufügen“. */
.card__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--radius); }

@keyframes cardIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.card::before {
  /* Farbschimmer der App, nur beim Darüberfahren */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(90% 70% at 22% 0%, color-mix(in srgb, var(--card) 26%, transparent), transparent 66%);
  transition: opacity .55s var(--ease-out);
}

.card:hover, .card:has(.card__hit:focus-visible) {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card) 42%, var(--line));
  background: var(--surface-2);
}
.card:hover::before, .card:has(.card__hit:focus-visible)::before { opacity: 1; }
.card:has(.card__hit:active) { transform: translateY(-1px) scale(.994); }

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card__icon {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 16px;
  flex: none;
  background: var(--surface-2);
  overflow: hidden;
  transition: transform .5s var(--ease-spring);
}
.card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover .card__icon { transform: scale(1.06) rotate(-2deg); }

.card__icon--letter {
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 640;
  letter-spacing: -.03em;
  color: #0b0b0d;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, white), var(--card));
}

.card__body { margin-top: auto; }

.card__name {
  margin: 0;
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -.025em;
}

.card__sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Sichtbarer Hinweis; geklickt wird die Fläche darunter. */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 580;
  color: var(--accent);
  letter-spacing: -.01em;
}
.card__cta svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-spring);
}
.card:hover .card__cta svg { transform: scale(1.12) rotate(90deg); }

.card__open {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: color .25s, border-color .25s, background .25s;
  -webkit-tap-highlight-color: transparent;
}
.card__open:hover { color: var(--text); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: .02em;
}
.status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.status[data-state="online"]  i { background: var(--online); box-shadow: 0 0 9px color-mix(in srgb, var(--online) 70%, transparent); }
.status[data-state="offline"] i { background: var(--offline); }
.status[data-state="warn"]    i { background: var(--warn); }
.status[data-state="online"]  { color: color-mix(in srgb, var(--online) 78%, var(--muted)); }
.status[data-state="offline"] { color: color-mix(in srgb, var(--offline) 62%, var(--muted)); }

.card--dim { opacity: .74; }

/* ------------------------------------------------------------- Zustände */

.state {
  padding: 60px 4px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  animation: fadeUp .6s var(--ease-out) both;
}
.state__title { margin: 0; font-size: 17px; font-weight: 570; }
.state__text { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.mono { font-family: var(--mono); font-size: .92em; }

/* --------------------------------------------------------------- Footer */

.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px var(--gutter) calc(34px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 12px;
}
.footer__sep { width: 1px; height: 12px; background: var(--line); }

/* ---------------------------------------------------------------- Sheet */

.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, .72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: fade .35s var(--ease-out) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet__panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(560px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  padding: 14px 24px calc(28px + env(safe-area-inset-bottom));
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  animation: sheetUp .5s var(--ease-out) both;
}
@keyframes sheetUp {
  from { transform: translateX(-50%) translateY(26px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@media (min-width: 640px) {
  .sheet__panel {
    bottom: 50%;
    border-radius: 26px;
    border-bottom: 1px solid var(--line);
    transform: translate(-50%, 50%);
    max-height: 88dvh;
  }
  @keyframes sheetUp {
    from { transform: translate(-50%, 50%) scale(.96); opacity: 0; }
    to   { transform: translate(-50%, 50%) scale(1); opacity: 1; }
  }
}

.sheet__grip {
  width: 38px; height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: var(--line);
}
@media (min-width: 640px) { .sheet__grip { display: none; } }

.sheet__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .25s, background .25s, transform .25s var(--ease-spring);
  z-index: 2;
}
.sheet__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet__close:hover { color: var(--text); background: var(--surface-2); transform: rotate(90deg); }

.sheet__head { display: flex; align-items: center; gap: 16px; padding-right: 40px; }

.sheet__icon {
  width: 66px; height: 66px;
  border-radius: 18px;
  flex: none;
  overflow: hidden;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 27px; font-weight: 640; color: #0b0b0d;
}
.sheet__icon img { width: 100%; height: 100%; object-fit: cover; }

.sheet__titles h2 { margin: 2px 0 6px; font-size: 23px; font-weight: 640; letter-spacing: -.03em; }

.sheet__kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Der Nebenweg: Seite nur anschauen statt installieren. */
.sheet__more {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.sheet__moretitle {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--faint);
}

.sheet__actions { display: flex; gap: 10px; }

.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 540;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .2s var(--ease-spring), color .3s;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, .16); }
.btn:active { transform: scale(.975); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0c;
  font-weight: 600;
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, white);
  border-color: color-mix(in srgb, var(--accent) 86%, white);
  color: #0a0a0c;
}

.linkbox {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(255, 255, 255, .017);
  color: var(--faint);
  font-size: 12px;
  word-break: break-all;
}

/* ------------------------------------------------------------ Anleitung */

.platforms {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 22px 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.platforms button { flex: 1; }
.platforms button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.platforms button:hover { color: var(--text); }
.platforms button.is-active { background: var(--surface-2); color: var(--text); }

.steps { display: grid; gap: 18px; }
.steps[hidden] { display: none; }

.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  animation: fadeUp .35s var(--ease-out) both;
  animation-delay: calc(var(--s, 0) * 50ms);
}

.step__art {
  width: 104px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0e;
  border: 1px solid var(--line);
}
.step__art svg { width: 100%; height: auto; display: block; }

.step__text { min-width: 0; }

.step__n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--accent);
  text-transform: uppercase;
}

/* Schritt 1 ist der Knopf selbst — keine Beschreibung einer Handlung. */
.step__btn {
  display: inline-flex;
  width: auto;
  flex: none;
  margin-top: 12px;
  height: 40px;
  font-size: 14px;
}
.step__t { margin: 3px 0 0; font-size: 14px; font-weight: 550; }
.step__d { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------- Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: 90;
  transform: translate(-50%, 18px);
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20, 20, 24, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--ease-out), transform .42s var(--ease-spring);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------- Bewegung reduziert */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .spotlight { display: none; }
}