/* Dropprinters · drucken-blasen.css (v12) · Sprechblasen mit Produktnamen über den 9 Hero-Produkten von /drucken/.
   Präfix lp-bl-. Wirkt nur unter html.lp-blasen (setzt js/drucken-blasen.js); ohne JS greift hier nichts.
   Trefferfläche und Blasen-Ebene erzeugt das Skript; Farben und Glas nur aus styles/tokens.css. */

/* ---------- Trefferfläche: nur die opake Bildfläche nimmt den Zeiger an (clip-path setzt das Skript je Produkt) ---------- */
.lp-blasen .lp-const .lp-imglink{pointer-events:none}
.lp-bl-hit{position:absolute;inset:0;pointer-events:auto;rotate:var(--tilt,0deg);transition:scale 360ms var(--ease-glass)}
.lp-bl-m{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.lp-bl-m--1{left:100%}
.lp-bl-m--2{top:100%}
/* deckungsgleich mit dem Bild: Schweben (lp-bob aus drucken.css, Startzeit gleicht das Skript an) und Hover-Zoom */
.lp-blasen.lp-on .lp-bl-hit{animation:lp-bob var(--lp-bl-bob,7s) ease-in-out infinite alternate}
.lp-blasen.lp-on.lp-calm .lp-bl-hit{animation-play-state:paused}
@media (hover:hover){.lp-blasen .lp-imglink:hover .lp-bl-hit{scale:1.05}}

/* ---------- Blasen-Ebene: fix, außerhalb des Flusses, unter der Nav (z 50), fängt keine Klicks ---------- */
.lp-bl-layer{position:fixed;inset:0;z-index:45;overflow:hidden;pointer-events:none}
/* Lage per translate (Skript). Bilden: sofort deckend, Aufploppen aus der Spitze per scale (260 ms, leichtes Überschwingen),
   damit die Blase schon im ersten Bild nach dem Überfahren steht. Ausblenden (110 ms, früh abfallend, beim Verlassen nach
   60 ms Verzögerung) macht das Skript als Web-Animation mit fester Startzeit; der Ruhezustand hier hat daher keinen Übergang.
   Deckkraft an Körper und Spitze (nicht am Rahmen), damit das Backdrop-Glas beim Blenden den Hintergrund sieht */
.lp-bl{position:absolute;left:0;top:0;width:max-content;visibility:hidden;scale:.6;
  transform-origin:var(--tx,50%) calc(100% + 10px)}
.lp-bl.is-below{transform-origin:var(--tx,50%) -10px}
.lp-bl.is-on{visibility:visible;scale:1;transition:scale 260ms cubic-bezier(.34,1.56,.64,1)}
.lp-bl__body,.lp-bl__tip{opacity:0;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.lp-bl.is-on .lp-bl__body,.lp-bl.is-on .lp-bl__tip{opacity:1}
.lp-bl__body{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:18px;
  font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.005em;white-space:nowrap;color:var(--ink-0);
  background:linear-gradient(135deg,var(--glass-highlight),var(--glass-bg-strong) 62%);border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 #fff,0 16px 30px -18px rgba(48,32,110,.36),0 2px 8px rgba(48,32,110,.08)}
.lp-bl__ic{flex:none;width:14px;height:14px;fill:currentColor;color:var(--ink-2)}
/* Spitze: gedrehtes Quadrat aus demselben Glas, nur die äußere Hälfte sichtbar (deckt die Kante des Körpers ab) */
.lp-bl__tip{position:absolute;left:var(--tx,50%);top:100%;width:14px;height:14px;translate:-50% -50%;rotate:45deg;
  background:var(--glass-bg-strong);border:solid var(--line-strong);border-width:0 1px 1px 0;
  clip-path:polygon(85% 0,100% 0,100% 100%,0 100%,0 85%)}
.lp-bl.is-below .lp-bl__tip{top:0;border-width:1px 0 0 1px;clip-path:polygon(0 0,100% 0,100% 15%,15% 100%,0 100%)}
@media (max-width:480px){.lp-bl__body{padding:9px 14px;font-size:14px}}

/* Reduzierte Bewegung: nur Deckkraft (Einblenden hier, Ausblenden im Skript ohne scale), keine Skalierung;
   Fläche ohne Schweben (wie das Bild) */
@media (prefers-reduced-motion:reduce){
  .lp-bl-hit{animation:none!important}
  .lp-bl,.lp-bl.is-on{scale:none;transition:none}
  .lp-bl.is-on .lp-bl__body,.lp-bl.is-on .lp-bl__tip{transition:opacity 120ms var(--ease-out)}
}
/* Ohne Backdrop-Blur bzw. bei reduzierter Transparenz: deckend hell */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lp-bl__body,.lp-bl__tip{background:var(--bg-0)}
}
@media (prefers-reduced-transparency:reduce){
  .lp-bl__body,.lp-bl__tip{background:var(--bg-0)}
}

/* Wächter am Seitenanfang für die Touch-Folge (Höhe = 2 % des Hero-Pins, setzt das Skript) */
.lp-bl-rest{position:absolute;left:0;top:0;width:1px;height:4px;visibility:hidden;pointer-events:none}