/* X-Project Banner (HTML5, ersetzt Animation (Top).swf), 600 x 80 */
.xp-banner { position: relative; width: 600px; height: 80px; margin: 0 auto; overflow: hidden; background: #fff;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.xp-kachel { position: relative; overflow: hidden; background: #111; }
.xp-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Einflug: Startlage setzt das Skript je Kachel über --dx, --dy, --rot */
.xp-an .xp-kachel { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0)) scale(.35); opacity: 0; }
.xp-an .xp-kachel.xp-da { transform: none; opacity: 1;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .5s ease-out; }
.xp-an .xp-kachel.xp-weg { transform: translate(0, -90px) scale(.6); opacity: 0;
  transition: transform .7s ease-in, opacity .7s ease-in; }
.xp-kachel img.xp-neu { opacity: 0; transition: opacity 1.2s ease-in-out; }
.xp-kachel img.xp-neu.xp-sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .xp-an .xp-kachel, .xp-an .xp-kachel.xp-da, .xp-an .xp-kachel.xp-weg { transform: none; opacity: 1; transition: none; }
}