/* Social-Proof-Meldung unten links. Speist sich ausschliesslich aus sales-feed.json.
   Farben kommen ueber Tokens aus der Seite. */

.kt[hidden]{display:none}
.kt{
  position:fixed; left:20px; bottom:20px; z-index:70;
  display:flex; gap:12px; align-items:center; max-width:352px;
  padding:12px 14px 12px 12px;
  background:rgba(21,26,22,.97); backdrop-filter:blur(10px);
  border:1px solid var(--line-3); border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  opacity:0; transform:translateY(16px) scale(.97);
  transition:opacity .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.kt.is-in{opacity:1; transform:none; pointer-events:auto}
.kt-av{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--accent-soft); border:1px solid rgba(92,192,140,.3);
  display:grid; place-items:center;
  font:500 12.5px var(--mono); color:var(--accent-2); letter-spacing:.02em;
}
.kt-body{min-width:0}
.kt-l1{font-size:12.8px; line-height:1.35; color:var(--ink-2)}
.kt-l1 b{color:var(--ink); font-weight:600}
.kt-l2{display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11.5px; color:var(--mute)}
.kt-l2 svg{width:10px; height:10px; stroke:var(--accent-2); stroke-width:3; fill:none; flex:none}
.kt-x{
  background:none; border:0; color:var(--mute); font-size:18px; line-height:1;
  cursor:pointer; padding:2px 4px; align-self:flex-start; border-radius:6px;
}
.kt-x:hover{color:var(--ink)}
@media (max-width:560px){
  .kt{left:12px; right:12px; max-width:none; bottom:86px}
}