/* Hero-Motion – Station 3, Eingabe „Ihre Karte“: lädt zum Ausprobieren ein (builder-cue.js), bis die erste Eingabe kommt.
   Laptop/PC (ab 1101 px): Pille über dem Formular + Lauflicht über alle Eingaben, in Firma/Name tippt sich ein Beispiel als Platzhalter.
   Handy/Tablet: abgespeckt ohne Pille (Formular passt sonst nicht unter die klebende Vorschau), Hinweis in der Zeile „Ihr Büro“.
   Vorlage: design-previews/eingabe-ausprobieren/, Kombination A + B. */
.bc-callout { display: none; }

@media (min-width: 1101px) {
    #station-3 .bc-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;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); transition: opacity .35s ease;
    }
    #station-3 .bc-callout + .dv-builder { margin-top: 12px; }
    #station-3 .bc-callout.is-gone { opacity: 0; pointer-events: none; }
}

/* Handy/Tablet: „Tippen Sie los“ rechts in der Zeile „Ihr Büro“ (keine zusätzliche Höhe) */
.dvm-builder .bc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dvm-builder .bc-hint {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--bl-green-text); transition: opacity .35s ease;
}
.dvm-builder .bc-hint i { font-size: 10px; }
.dvm-builder .bc-hint.is-gone { opacity: 0; }

/* Beispiel im Platzhalter */
#station-3 input.bc-ghost::placeholder { color: var(--bl-text-2); font-weight: 600; }

/* Lauflicht */
#station-3 .dv-logos.bc-cue { border-radius: 14px; }
#station-3 .bc-cue { animation: bc-ring 1.2s ease-out 1; }
#station-3 input.bc-cue {
    border-color: #e5b04a;
    background-image: linear-gradient(105deg, transparent 30%, rgba(229, 176, 74, .3) 50%, transparent 70%);
    background-size: 250% 100%; background-repeat: no-repeat;
    animation: bc-ring 1.2s ease-out 1, bc-sheen 1.1s ease-out 1;
}

@keyframes bc-ring { 0% { box-shadow: 0 0 0 0 rgba(229, 176, 74, .75); } 100% { box-shadow: 0 0 0 12px rgba(229, 176, 74, 0); } }
@keyframes bc-sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }