/* Hero-Motion – Station 2, Kacheln ①②③: Lauflicht + Hinweis-Pille, bis die erste Kachel angeklickt wird (legend-cue.js).
   Nur zweispaltig (ab 1101 px); Handy und Tablet unverändert. Vorlage: design-previews/kachel-klickbar/, Variante B. */
.lc-callout { display: none; }

@media (min-width: 1101px) {
    #station-2 .lc-callout {
        display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 7px 14px; border-radius: 999px;
        background: var(--bl-green); color: #fff; font-size: 13px; font-weight: 700; transition: opacity .35s ease;
    }
    #station-2 .lc-callout i { animation: lc-tap 1.6s ease-in-out infinite; }
    #station-2 .lc-callout + .dv-legend { margin-top: 12px; }
    #station-2.lc-done .lc-callout { opacity: 0; pointer-events: none; }

    #station-2 .dv-legend__item { position: relative; overflow: hidden; }
    #station-2 .dv-legend__item::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(105deg, transparent 30%, rgba(229, 176, 74, .28) 50%, transparent 70%); transform: translateX(-110%);
    }
    #station-2 .dv-legend__item.lc-cue { border-color: var(--bl-acc-border-sand); }
    #station-2 .dv-legend__item.lc-cue::after { animation: lc-sheen 1.1s ease-out 1; }
    #station-2 .dv-legend__item.lc-cue .dv-legend__n { animation: lc-ring 1.1s ease-out 1; }
}

@keyframes lc-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-8deg); } }
@keyframes lc-sheen { to { transform: translateX(110%); } }
@keyframes lc-ring { 0% { box-shadow: 0 0 0 0 rgba(229, 176, 74, .7); } 100% { box-shadow: 0 0 0 14px rgba(229, 176, 74, 0); } }

@media (prefers-reduced-motion: reduce) {
    #station-2 .lc-callout i, #station-2 .dv-legend__item.lc-cue::after, #station-2 .dv-legend__item.lc-cue .dv-legend__n { animation: none; }
}
