@property --beam-x-nsx {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --beam-w-nsx {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-h-nsx {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-spike-nsx {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-spike2-nsx {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-edge-nsx {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --beam-opacity-nsx {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.nsx-beamclip {
  position: absolute;
  inset: 3px 3px 6px;
  border-radius: var(--beam-r, 30px);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.nsx-beamclip[data-active] {
  animation:
    beam-travel-nsx 3.1s linear infinite,
    beam-edge-fade-nsx 3.1s linear infinite,
    beam-breathe-nsx 4.0s ease-in-out infinite,
    beam-spike-nsx 4.1s ease-in-out infinite,
    beam-spike2-nsx 5.3s ease-in-out infinite,
    beam-fade-in-nsx 0.6s ease forwards;
}

.nsx-beamclip[data-fading] {
  animation:
    beam-travel-nsx 3.1s linear infinite,
    beam-edge-fade-nsx 3.1s linear infinite,
    beam-breathe-nsx 4.0s ease-in-out infinite,
    beam-spike-nsx 4.1s ease-in-out infinite,
    beam-spike2-nsx 5.3s ease-in-out infinite,
    beam-fade-out-nsx 0.5s ease forwards;
}

.nsx-beamclip[data-active]::after,
.nsx-beamclip[data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--beam-r, 30px);
  padding: 1px;
  clip-path: inset(0 round var(--beam-r, 30px));
  background: radial-gradient(
        ellipse calc(24px * var(--beam-w-nsx)) calc(28px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) calc(100% + 2px),
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.12) 30%,
        transparent 65%
      ), radial-gradient(ellipse calc(36px * var(--beam-w-nsx)) calc(36px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) calc(100% + 2px), rgb(226, 188, 116), transparent),
       radial-gradient(ellipse calc(30px * var(--beam-w-nsx)) calc(32px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 39px) calc(100%), rgb(198, 202, 212), transparent),
       radial-gradient(ellipse calc(33px * var(--beam-w-nsx)) calc(28px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 36px) calc(100% + 2px), rgb(198, 202, 212), transparent),
       radial-gradient(ellipse calc(29px * var(--beam-w-nsx)) calc(34px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 54px) calc(100%), rgb(198, 202, 212), transparent),
       radial-gradient(ellipse calc(27px * var(--beam-w-nsx)) calc(30px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 51px) calc(100% - 1px), rgb(226, 188, 116), transparent),
       radial-gradient(ellipse calc(36px * var(--beam-w-nsx)) calc(24px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 21px) calc(100% + 1px), rgb(198, 202, 212), transparent),
       radial-gradient(ellipse calc(30px * var(--beam-w-nsx)) calc(22px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 21px) calc(100%), rgb(198, 202, 212), transparent),
       radial-gradient(ellipse calc(25px * var(--beam-w-nsx)) calc(28px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 66px) calc(100% + 1px), rgb(226, 188, 116), transparent),
       radial-gradient(ellipse calc(23px * var(--beam-w-nsx)) calc(30px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 66px) calc(100% - 1px), rgb(198, 202, 212), transparent);
  -webkit-mask:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-nsx)) calc(60px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-nsx)) calc(60px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-nsx) * var(--beam-edge-nsx) * 1.14 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-nsx 12s ease-in-out infinite;
}

.nsx-beamclip[data-active]::before,
.nsx-beamclip[data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--beam-r, 30px);
  background: radial-gradient(ellipse calc(33px * var(--beam-w-nsx)) calc(30px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) calc(100%), rgba(226, 188, 116, 0.48), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w-nsx)) calc(26px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 39px) calc(100% - 3px), rgba(198, 202, 212, 0.42), transparent),
    radial-gradient(ellipse calc(27px * var(--beam-w-nsx)) calc(24px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 36px) calc(100%), rgba(198, 202, 212, 0.48), transparent),
    radial-gradient(ellipse calc(23px * var(--beam-w-nsx)) calc(28px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 54px) calc(100% - 2px), rgba(198, 202, 212, 0.42), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w-nsx)) calc(24px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 51px) calc(100% - 1px), rgba(226, 188, 116, 0.50), transparent),
    radial-gradient(ellipse calc(30px * var(--beam-w-nsx)) calc(20px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 21px) calc(100%), rgba(198, 202, 212, 0.45), transparent),
    radial-gradient(ellipse calc(25px * var(--beam-w-nsx)) calc(18px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 21px) calc(100% - 2px), rgba(198, 202, 212, 0.40), transparent),
    radial-gradient(ellipse calc(21px * var(--beam-w-nsx)) calc(24px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% + 66px) calc(100%), rgba(226, 188, 116, 0.45), transparent),
    radial-gradient(ellipse calc(18px * var(--beam-w-nsx)) calc(26px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100% - 66px) calc(100% - 1px), rgba(198, 202, 212, 0.52), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.1);
  -webkit-mask-image:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-nsx)) calc(60px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    radial-gradient(
      ellipse calc(78px * var(--beam-w-nsx)) calc(60px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%,
      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-nsx) * var(--beam-edge-nsx) * 0.70 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  clip-path: inset(0 round var(--beam-r, 30px));
  animation: beam-hue-shift-nsx 12s ease-in-out infinite;
}

.nsx-beamclip [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--beam-r, 30px);
  clip-path: inset(0 round var(--beam-r, 30px));
  padding: 0;
  -webkit-mask: radial-gradient(
    ellipse calc(84px * var(--beam-w-nsx)) calc(110px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%,
    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
  );
  -webkit-mask-composite: source-over;
  mask: radial-gradient(
    ellipse calc(84px * var(--beam-w-nsx)) calc(110px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%,
    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
  );
  mask-composite: add;
  background: radial-gradient(ellipse calc(0.8px * var(--beam-spike-nsx)) calc(92px * var(--beam-h-nsx)) at 8% calc(100% - 2px), rgb(226, 188, 116), rgb(226, 188, 116) 30%, transparent 88%),
       radial-gradient(ellipse calc(10px * var(--beam-spike2-nsx)) calc(35px * var(--beam-h-nsx)) at 22% calc(100% - 4px), rgba(198, 202, 212, 0.98), rgba(198, 202, 212, 0.49) 50%, transparent 95%),
       radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-nsx))) calc(72px * var(--beam-h-nsx)) at 36% calc(100% - 3px), rgb(198, 202, 212), rgba(198, 202, 212, 1) 40%, transparent 90%),
       radial-gradient(ellipse calc(14px * var(--beam-spike2-nsx)) calc(28px * var(--beam-h-nsx)) at 50% calc(100% - 2px), rgba(226, 188, 116, 0.59), rgba(226, 188, 116, 0.29) 55%, transparent 96%),
       radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-nsx))) calc(85px * var(--beam-h-nsx)) at 64% calc(100% - 4px), rgb(198, 202, 212), rgba(198, 202, 212, 1) 35%, transparent 89%),
       radial-gradient(ellipse calc(7px * var(--beam-spike-nsx)) calc(45px * var(--beam-h-nsx)) at 78% calc(100% - 2px), rgba(198, 202, 212, 0.91), rgba(198, 202, 212, 0.45) 48%, transparent 94%),
       radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike-nsx))) calc(60px * var(--beam-h-nsx)) at 92% calc(100% - 3px), rgb(198, 202, 212), rgba(198, 202, 212, 1) 42%, transparent 91%),
       radial-gradient(ellipse calc(21px * var(--beam-spike-nsx)) calc(15px * var(--beam-spike2-nsx)) at calc(var(--beam-x-nsx) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
       radial-gradient(ellipse calc(42px * var(--beam-w-nsx)) calc(40px * var(--beam-h-nsx)) at calc(var(--beam-x-nsx) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
  
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.nsx-beamclip[data-active] [data-beam-bloom],
.nsx-beamclip[data-fading] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-nsx) * var(--beam-edge-nsx) * 0.80 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-bloom-nsx 8s ease-in-out infinite;
}

@keyframes beam-travel-nsx {
  0%   { --beam-x-nsx: 0.06;  --beam-w-nsx: 0.75; }
  10%  { --beam-x-nsx: 0.15;  --beam-w-nsx: 1.2; }
  20%  { --beam-x-nsx: 0.25;  --beam-w-nsx: 1.65; }
  30%  { --beam-x-nsx: 0.35;  --beam-w-nsx: 1.95; }
  40%  { --beam-x-nsx: 0.44;  --beam-w-nsx: 2.175; }
  50%  { --beam-x-nsx: 0.5;   --beam-w-nsx: 2.25; }
  60%  { --beam-x-nsx: 0.56;  --beam-w-nsx: 2.175; }
  70%  { --beam-x-nsx: 0.65;  --beam-w-nsx: 1.95; }
  80%  { --beam-x-nsx: 0.75;  --beam-w-nsx: 1.65; }
  90%  { --beam-x-nsx: 0.85;  --beam-w-nsx: 1.2; }
  100% { --beam-x-nsx: 0.94;  --beam-w-nsx: 0.75; }
}

@keyframes beam-edge-fade-nsx {
  0%    { --beam-edge-nsx: 0; }
  12.5% { --beam-edge-nsx: 0; }
  32.5% { --beam-edge-nsx: 1; }
  67.5% { --beam-edge-nsx: 1; }
  87.5% { --beam-edge-nsx: 0; }
  100%  { --beam-edge-nsx: 0; }
}

@keyframes beam-breathe-nsx {
  0%, 100% { --beam-h-nsx: 0.8; }
  25%      { --beam-h-nsx: 1.25; }
  55%      { --beam-h-nsx: 0.85; }
  80%      { --beam-h-nsx: 1.3; }
}

@keyframes beam-spike-nsx {
  0%   { --beam-spike-nsx: 0.8; }
  25%  { --beam-spike-nsx: 1.3; }
  50%  { --beam-spike-nsx: 0.9; }
  75%  { --beam-spike-nsx: 1.4; }
  100% { --beam-spike-nsx: 0.8; }
}

@keyframes beam-spike2-nsx {
  0%   { --beam-spike2-nsx: 1.2; }
  25%  { --beam-spike2-nsx: 0.7; }
  50%  { --beam-spike2-nsx: 1.4; }
  75%  { --beam-spike2-nsx: 0.8; }
  100% { --beam-spike2-nsx: 1.2; }
}

@keyframes beam-fade-in-nsx {
  to { --beam-opacity-nsx: 1; }
}

@keyframes beam-fade-out-nsx {
  from { --beam-opacity-nsx: 1; }
  to { --beam-opacity-nsx: 0; }
}

@keyframes beam-hue-shift-nsx {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 6deg)) brightness(1.30) saturate(1.20); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 6deg)) brightness(1.30) saturate(1.20); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 6deg)) brightness(1.30) saturate(1.20); }
}

@keyframes beam-hue-shift-bloom-nsx {
  0% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 10deg)) brightness(1.30) saturate(1.20); }
  50% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + 10deg)) brightness(1.30) saturate(1.20); }
  100% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - 10deg)) brightness(1.30) saturate(1.20); }
}

/* Der Listen-Filter (data-filterdock in _tiles.html) schwebt UNTEN — gleiche
   Familie wie .ls-dock, nur mit Textfeld statt Knoepfen. Er erscheint beim
   Runterscrollen; beim Hochscrollen macht er der Navigation Platz (VH). Bewusst
   hier in beam.css: das ueberlebt Template-Umbauten. */
/* max() wie bei .ls-dock: Rand ODER Safe-Area, nie beides gestapelt — die Addition
   liess die Leiste am iPhone in der Luft haengen. */
/* Seit 2026-08-11 im GOOEY-LOOK der Kopf-Suche (VH: „genauso wie oben, etwas
   schmäler, mittig, in Silber"): dieselben .mb-goo-Schichten aus base.css
   (Metaball-Filter #nsx-goo aus base.html), hier silbern umgefärbt und
   schmaler. Der Beam läuft per grayscale mit. */
.ls-filterdock{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom, 0px));transform:translateX(-50%) translateY(10px);z-index:60;
  display:flex;align-items:center;height:50px;border-radius:var(--rp);
  /* Ruhe: so breit wie der Inhalt (--fd-w misst base.html aus dem Platzhalter);
     Fokus zieht auf Kopf-Suchen-Breite auf (VH). */
  width:min(var(--fd-w, 460px),calc(100vw - 24px));
  background:transparent;overflow:visible;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,box-shadow .4s,width .5s cubic-bezier(.32,1.2,.5,1)}
.ls-filterdock.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ls-filterdock:focus-within{box-shadow:0 0 24px rgba(201,204,212,.16);width:min(560px,calc(100vw - 24px))}
/* Beam in Silber: das goldene Original einfach entsättigen. 5px eingerückt
   statt 3: der Metaball-Filter schneidet die sichtbare Pille 1–2px kleiner
   als ihre Geometrie — mit 3px lief der Beam optisch AUF der Kante und
   wirkte breiter als die Pille (VH). Radius = 25px Pille − 5px Inset. */
.ls-filterdock .nsx-beamclip{filter:grayscale(1) brightness(1.12);inset:5px;--beam-r:20px}
/* Goo-Geometrie: mobil OHNE Überhang — am unteren Rand ist kein Platz zum
   Rausknospen, overflow-x:clip würde die Blase an der Viewport-Kante köpfen. */
.ls-filterdock .mb-goo{left:0;right:0}
.ls-filterdock .mb-rim{filter:url(#nsx-goo)}
/* Durchsichtiger Hintergrund (VH): Transparenz INNERHALB der Goo-Schicht geht
   nicht (der Alpha-Schwellwert des Metaball-Filters frisst alles unter ~0.9),
   aber die GANZE gefilterte Füll-Schicht darf durchscheinen — der Filter
   läuft vor der Element-Opacity. Der Rand (mb-rim) bleibt satt. */
.ls-filterdock .mb-fill{opacity:.5}
.ls-filterdock:focus-within .mb-rim{filter:url(#nsx-goo) drop-shadow(0 1px 5px rgba(201,204,212,.4)) drop-shadow(0 0 15px rgba(201,204,212,.24))}
.ls-filterdock .mb-rim .bar{left:0;right:0;top:0;bottom:0;
  background-color:color-mix(in srgb, #c9ccd4 calc(var(--ns-rim) * 100%), #0d0e11)}
.ls-filterdock .mb-rim .bub{right:4px;width:42px;height:42px;margin-top:-21px;
  background-color:color-mix(in srgb, #c9ccd4 calc(var(--ns-rim) * 100%), #0d0e11)}
.ls-filterdock:focus-within .mb-rim .bar,
.ls-filterdock:focus-within .mb-rim .bub{background-color:#c2c6cf}
.ls-filterdock .mb-fill .bar{left:1px;right:1px;top:1px;bottom:1px;
  background:radial-gradient(150% 190% at 50% -14%, rgba(220,224,232,.09), transparent 62%),
             linear-gradient(180deg,#212329 0%,#141519 42%,#0c0d10 100%)}
.ls-filterdock .mb-fill .bub{right:6px;width:38px;height:38px;margin-top:-19px;
  background:radial-gradient(150% 190% at 50% -14%, rgba(220,224,232,.09), transparent 62%),
             linear-gradient(180deg,#212329 0%,#141519 42%,#0c0d10 100%)}
.ls-filterdock:focus-within .mb-fill .bar,
.ls-filterdock:focus-within .mb-fill .bub{background:linear-gradient(180deg,#17181c 0%,#0c0d10 42%,#070809 100%)}
/* Lupe rechts in der Blase — Ruhe silbern, bei Fokus dunkel auf hellem Silber. */
/* Lupe (Lucide „search"): hell in JEDEM Zustand (VH 17.09.: „kann auch hell
   bleiben" — dunkel auf der dunklen Fokus-Fuellung war kaum zu sehen), 18px
   statt 17 und Strich 2.2 fuer eine klare Form. Die Box (36px) sitzt exakt
   ueber der Blasenmitte, sonst haengt die Lupe schief in der Blase. */
.ls-filterdock .fd-mag{position:absolute;right:7px;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  color:rgba(222,225,232,.92);pointer-events:none;transition:color .4s,right .82s cubic-bezier(.32,1.5,.52,1)}
.ls-filterdock .fd-mag svg{width:18px;height:18px;stroke-width:2.2}
.ls-filterdock:focus-within .fd-mag{color:#f2f3f6}
/* Kompakt (kein Fokus): die Blase mit ihrem Ring verschwindet, die Lupe sitzt
   schlicht in der Leiste (VH: „braucht keine eigene Umrandung"). Beim Fokus
   knospt die Blase wieder auf und die Lupe reitet mit. */
.ls-filterdock .mb-rim .bub,.ls-filterdock .mb-fill .bub{transition:opacity .28s ease,transform .28s ease,right .82s cubic-bezier(.32,1.5,.52,1)}
.ls-filterdock:not(:focus-within) .mb-rim .bub,.ls-filterdock:not(:focus-within) .mb-fill .bub{opacity:0;transform:scale(.6)}
.ls-filterdock input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--ink);
  position:relative;z-index:2;padding:0 50px 0 19px;
  font:500 13.5px/1 var(--sans);letter-spacing:.1px}
/* Desktop (Platz vorhanden): die Blase knospt beim Fokus nach RECHTS aus der
   Leiste heraus, die Lupe reitet mit — derselbe .82s-Feder-Blob wie oben. */
@media (min-width:640px){
  /* Desktop-Feintuning (VH): Ruhe ein Stück breiter als der nackte Inhalt,
     Fokus deutlich schmaler als die Kopf-Suche (560 wirkte zu breit). */
  .ls-filterdock{width:min(calc(var(--fd-w, 420px) + 48px),calc(100vw - 24px))}
  .ls-filterdock:focus-within{width:min(420px,calc(100vw - 24px))}
  .ls-filterdock .mb-goo{right:-56px}
  .ls-filterdock .mb-rim .bar{right:56px}
  .ls-filterdock .mb-fill .bar{right:57px}
  .ls-filterdock .mb-rim .bub{right:60px;transition:right .82s cubic-bezier(.32,1.5,.52,1)}
  .ls-filterdock .mb-fill .bub{right:62px;transition:right .82s cubic-bezier(.32,1.5,.52,1)}
  .ls-filterdock:focus-within .mb-rim .bub{right:2px}
  .ls-filterdock:focus-within .mb-fill .bub{right:4px}
  /* Blase im Fokus: right 2px in der um 56px verschobenen Goo-Schicht = −54px zur
     Leiste, Mitte bei −33px → Lupen-Box (36px) auf −51px, nicht −47 (war 4px schief). */
  .ls-filterdock:focus-within .fd-mag{right:-51px}
}
/* Die alte 16px-Touch-Regel ist raus (VH fand die Riesen-Schrift doof):
   den iOS-Auto-Zoom unterbindet jetzt maximum-scale=1 im Viewport-Meta
   (base.html, nur auf iOS gesetzt — Pinch-Zoom bleibt dort möglich). */
.ls-filterdock input::placeholder{color:rgba(244,241,232,var(--ns-ph))}
.ls-filterdock input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
@media (max-width:560px){.ls-filterdock{bottom:max(12px, env(safe-area-inset-bottom, 0px));height:46px}
  .ls-filterdock .mb-rim .bub{width:38px;height:38px;margin-top:-19px}
  .ls-filterdock .mb-fill .bub{width:34px;height:34px;margin-top:-17px}
  /* Blase 38px bei right 4px → Mitte 23px → Lupen-Box (36px) auf right 5px */
  .ls-filterdock .fd-mag{right:5px}}
@media (prefers-reduced-motion:reduce){.ls-filterdock .mb-rim,.ls-filterdock .mb-fill{filter:none}}