/* Flüssige Leiste (js/motion/liquid-bar.js): Chip aus zwei Tropfen und der Kreis-Tropfen liegen in
   einer Goo-Schicht, die um die Leiste herum Platz hat; dazwischen Regenbogen-Licht. */
.liquid {
  position: absolute;
  inset: -3.5rem;
  z-index: 0;
  filter: url('#liquid-goo');
  opacity: 0.62;
  pointer-events: none;
  /* Eigene Ebene: der Filter wird sauber neu gezeichnet, ohne Reste beim schnellen Wischen */
  transform: translateZ(0);
}

.liquid i {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-pill);
  background: #fff;
}

.liquid .liquid__blob {
  border-radius: 50%;
}

.liquid .liquid__drop {
  transition: opacity 200ms var(--ease-in-out);
}

.liquid.is-empty .liquid__drop {
  opacity: 0;
}

.liquid__leak {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    100deg,
    transparent,
    rgb(255 150 210 / 0.7),
    rgb(150 215 255 / 0.7),
    rgb(255 240 160 / 0.7),
    transparent
  );
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* Der Eintrag, über dem der Tropfen liegt, wird dunkel und lesbar */
.dark-zone .on-liquid {
  color: var(--color-ink);
  text-shadow: none;
  transition-delay: 80ms;
}

/* Kontrast-Pille (gewählt: Idee B, Runde 14): schwarzer, deckender Tropfen auf hellgrauer Pille,
   weiße Schrift darauf. Der Regenbogen zwischen den Tropfen ist normal gemischt (auf Hellgrau
   verschwindet "screen") und kräftiger, damit man beim Ziehen über die Leiste mehr davon sieht. */
.contrast-pill .liquid {
  opacity: 1;
}

.contrast-pill .liquid i {
  background: var(--color-ink);
}

.contrast-pill .liquid__leak {
  z-index: 1;
  background: var(--rainbow);
  mix-blend-mode: normal;
}

.contrast-pill .on-liquid {
  color: #fff;
  text-shadow: none;
  transition-delay: 80ms;
}

/* Menüleiste G4b (css/layout.css), Stationen auf Über mich und Kundenliste der Websites: heller
   Glas-Tropfen mit weichem Schatten auf der hellen Pille. Der Regenbogen bleibt im Tropfen (keine
   Brechung an der Kontur), die Schrift bleibt dunkel. */
:is(.site-nav, .stations__pill, .client-switch) .liquid {
  opacity: 1;
  filter: url('#liquid-goo') drop-shadow(0 2px 5px rgb(0 0 0 / 0.12));
}

:is(.site-nav, .stations__pill, .client-switch) .liquid i {
  background: #fff;
}

/* Schwarz-Weiß-Modus: die Stationen-Pille wird schwarzes Glas wie Menü und Kundenliste */
:root[data-theme='mono'] .stations__fill {
  background: var(--pill-glass);
  -webkit-backdrop-filter: var(--pill-glass-blur);
  backdrop-filter: var(--pill-glass-blur);
}

:is(.site-nav, .stations__pill, .client-switch) .liquid__leak {
  z-index: 0;
  background: var(--rainbow);
  mix-blend-mode: normal;
  filter: blur(2px);
  clip-path: inset(4px round var(--radius-pill));
}