/* IN-APP-MELDUNG fuer die Schale (index.html), 4. November 2026.
   Die Schale laedt l24-v2.css nicht, zeigt aber seit heute das Banner, das
   der Postfach-Rahmen meldet (assets/l24-melder.js, zeigen()). Dieselben
   Regeln wie in l24-v2.css, Abschnitt IN-APP-MELDUNGEN. Wer sie dort
   aendert, zieht sie hier nach (wie schon in mobil.html). */
.l24-melder-stapel{
  position:fixed;top:58px;right:16px;z-index:9800;width:318px;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.l24-melder{
  pointer-events:auto;cursor:pointer;text-align:left;font:inherit;border:0;
  background:rgba(14,14,18,.96);color:#fff;border-radius:13px;padding:11px 13px;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 6px 20px rgba(0,0,0,.24),0 18px 44px rgba(0,0,0,.20);
  transform:translateX(120%);opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.3,1),opacity .24s;
}
.l24-melder.auf{ transform:translateX(0);opacity:1; }
.l24-melder .lm-ic{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.11);color:#fff;position:relative;
}
.l24-melder .lm-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
/* Der farbige Punkt ist die EINZIGE Farbe der Meldung. */
.l24-melder .lm-ic::after{
  content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;
  border-radius:50%;border:2px solid #0E0E12;background:#7FA8FF;
}
.l24-melder.chat .lm-ic::after{ background:#F0776B; }
.l24-melder .lm-txt{ min-width:0;flex:1; }
.l24-melder .lm-txt b{
  display:block;font-size:13px;font-weight:640;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.l24-melder .lm-txt span{
  display:block;font-size:12px;color:rgba(255,255,255,.66);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.l24-melder .lm-zeit{
  flex:none;font-size:11px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
}

@media (max-width:720px){
  /* Auf dem Handy von OBEN und ueber die volle Breite. */
  .l24-melder-stapel{ top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;right:10px;width:auto; }
  .l24-melder{ transform:translateY(-130%);border-radius:15px; }
  .l24-melder.auf{ transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .l24-melder{ transition:opacity .2s;transform:none; }
  .l24-melder.auf{ transform:none; }
}