/* =====================================================================
   Startseite, Testarten, Schritt 1: Kartenkarussell
   ---------------------------------------------------------------------
   Teil  : resources/views/welcome_parts/step_cards.blade.php ($mode digital | papier)
   Einsatz: welcome_parts/digital_steps und paper_steps (Schritt 1), geladen in
            welcome.blade.php. Eingebaut am 09.11.2026.
   Präfix: stepcards_

   Zwei gerade Karten liegen in einer Rasterzelle (gleich hoch). Zyklus 12 s, Karte 2
   um 6 s (50 %) versetzt. Ablauf je Karte:
     0 bis 32 %   vorn (Karte 1: Mauszeiger tippt bei 25 %)
     32 bis 42 %  gleitet nach unten weg und blendet aus, bleibt dabei vorn
     43 %         springt unsichtbar in die hintere Stellung
     43 bis 50 %  blendet hinten ein (kleiner, blass überlagert)
     50 bis 82 %  hinten
     82 bis 92 %  wächst nach vorn, die vordere gleitet währenddessen weg
     ab 93 %      vorn
   Der Wechsel der Stapelreihenfolge liegt dort, wo die wegfahrende Karte unsichtbar ist.
   Grundzustand ohne Animation (Bewegung reduzieren): Karte 1 vorn, Karte 2 hinten.
   ===================================================================== */

.stepcards {
    --stepcards-blue: #4279BC;
    --stepcards-blue-dark: #163C6B;
    --stepcards-blue-tint: #f2f7fd;
    --stepcards-line: #e3e7ec;
    --stepcards-muted: #8a8a8a;
    --stepcards-ink: #1f3a66;
    --stepcards-shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.06), 0 14px 28px -8px rgba(22, 60, 107, 0.35);

    container-type: inline-size;
    width: 100%;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #222;
}

.stepcards,
.stepcards *,
.stepcards *::before,
.stepcards *::after {
    box-sizing: border-box;
}

.stepcards_wrap {
    width: 100%;
    max-width: 340px;
    padding: 36px 0 46px;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.stepcards_deck {
    display: grid;
}

/* ── Karten ────────────────────────────────────────────────────────── */

.stepcards_card {
    --stepcards-delay: 0s;
    position: relative;
    z-index: 2;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--stepcards-shadow-lg);
    font-size: 14px;
    line-height: 1.4;
    transform-origin: 50% 0;
    animation: stepcards_cycle 12s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: var(--stepcards-delay);
}

.stepcards_card--b {
    --stepcards-delay: -6s;
    z-index: 1;
    opacity: 0.9;
    transform: translateY(-12%) scale(0.86);
}

/* Blasse Überlagerung der hinteren Karte */
.stepcards_card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: rgba(226, 235, 247, 0.62);
    opacity: 0;
    pointer-events: none;
    animation: stepcards_veil 12s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: var(--stepcards-delay);
}

.stepcards_card--b::after {
    opacity: 1;
}

.stepcards_bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
}

.stepcards_step {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--stepcards-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.stepcards_title {
    font-size: 12.5px;
    font-weight: 600;
    color: #222;
}

.stepcards_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* ── Karte 1: Auswahl ──────────────────────────────────────────────── */

.stepcards_question {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
}

.stepcards_options {
    display: grid;
    gap: 8px;
}

.stepcards_options--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stepcards_option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--stepcards-line);
    border-radius: 10px;
    background: #fff;
}

.stepcards_options--three .stepcards_option {
    flex-direction: column;
    gap: 6px;
    padding: 12px 4px 10px;
    text-align: center;
}

.stepcards_option.is-selected {
    border-color: var(--stepcards-blue);
    background: var(--stepcards-blue-tint);
}

.stepcards_optionicon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(66, 121, 188, 0.12);
    color: var(--stepcards-blue);
}

.stepcards_optionicon svg {
    width: 19px;
    height: 19px;
}

.stepcards_optiontext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.stepcards_optiontext strong {
    font-weight: 600;
    color: #222;
}

.stepcards_optiontext small {
    font-size: 12px;
    color: var(--stepcards-muted);
}

/* Auswahlpunkt: ganze Pixel und Rastermitte, damit der Punkt genau mittig sitzt */
.stepcards_radio {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid #c9d0d8;
    border-radius: 50%;
}

.stepcards_radio::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stepcards-blue);
    transform: scale(0);
}

.stepcards_option.is-selected .stepcards_radio {
    border-color: var(--stepcards-blue);
}

.stepcards_option.is-selected .stepcards_radio::after {
    transform: scale(1);
}

.stepcards_pages {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--stepcards-muted);
}

.stepcards_pages span:last-child {
    margin-left: 4px;
}

.stepcards_thumb {
    width: 22px;
    height: 29px;
    padding: 5px 4px;
    border: 1px solid #dfe3e8;
    border-radius: 3px;
    background-color: #fff;
    background-image: repeating-linear-gradient(to bottom, transparent 0 4px, #e3e8ee 4px 5px);
    background-clip: content-box;
}

.stepcards_footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

.stepcards_btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--stepcards-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(22, 60, 107, 0.25), 0 4px 10px -2px rgba(66, 121, 188, 0.45);
    animation: stepcards_press 12s ease-in-out infinite;
}

.stepcards_btn svg {
    width: 16px;
    height: 16px;
}

.stepcards_cursor {
    position: absolute;
    top: 55%;
    right: 26px;
    z-index: 3;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    animation: stepcards_cursor 12s ease-in-out infinite;
}

/* ── Karte 2, Digital: bei der Testperson ──────────────────────────── */

.stepcards_progress {
    height: 4px;
    margin-bottom: 8px;
    border-radius: 2px;
    background: #e7ebf0;
    overflow: hidden;
}

.stepcards_progress i {
    display: block;
    width: 8%;
    height: 100%;
    background: var(--stepcards-blue);
}

.stepcards_small {
    display: block;
    font-size: 11.5px;
    color: var(--stepcards-muted);
}

.stepcards_testq {
    display: block;
    margin: 3px 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #222;
}

.stepcards_answer {
    display: block;
    margin-bottom: 6px;
    padding: 7px 11px;
    border: 1.5px solid var(--stepcards-line);
    border-radius: 9px;
    font-size: 13px;
    color: #444;
}

.stepcards_answer--pick {
    border-color: var(--stepcards-blue);
    background: var(--stepcards-blue-tint);
    color: var(--stepcards-blue-dark);
    font-weight: 600;
    animation: stepcards_pick 12s ease-in-out infinite;
    animation-delay: var(--stepcards-delay);
}

/* ── Karte 2, Papier: Prüfen ───────────────────────────────────────── */

.stepcards_status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.stepcards_statusok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
}

.stepcards_statusok svg {
    width: 16px;
    height: 16px;
    color: var(--stepcards-blue);
}

.stepcards_sheet {
    padding: 8px 10px;
    border: 1px solid #e6e2d8;
    border-radius: 8px;
    background: #fbfaf7;
}

.stepcards_row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.stepcards_rownum {
    flex: none;
    width: 12px;
    font-size: 11px;
    color: var(--stepcards-muted);
}

.stepcards_rowq {
    flex: 1;
    min-width: 20px;
    height: 4px;
    margin-right: 4px;
    border-radius: 2px;
    background: #e4dfd4;
}

.stepcards_box {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid #b9b2a3;
    border-radius: 3px;
    background: #fff;
}

.stepcards_box--hit {
    border: 1.5px solid var(--stepcards-blue);
    background: rgba(66, 121, 188, 0.14);
    animation: stepcards_mark_hit 12s ease-out infinite;
    animation-delay: var(--stepcards-delay);
}

.stepcards_box--hint {
    border: 1.5px solid hsl(35, 79%, 52%);
    background: hsla(35, 79%, 66%, 0.28);
    animation: stepcards_mark_hint 12s ease-out infinite;
    animation-delay: var(--stepcards-delay);
}

.stepcards_box--hit::before,
.stepcards_box--hit::after,
.stepcards_box--hint::before,
.stepcards_box--hint::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;
    right: 1px;
    height: 1.5px;
    margin-top: -0.75px;
    border-radius: 1px;
    background: var(--stepcards-ink);
}

.stepcards_box--hit::before,
.stepcards_box--hint::before { transform: rotate(42deg); }
.stepcards_box--hit::after,
.stepcards_box--hint::after { transform: rotate(-48deg); }

.stepcards_hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: hsla(35, 79%, 66%, 0.2);
    font-size: 12.5px;
    font-weight: 600;
    color: #946713;
    animation: stepcards_hint 12s ease-out infinite;
    animation-delay: var(--stepcards-delay);
}

.stepcards_hint svg {
    flex: none;
    width: 15px;
    height: 15px;
}

/* ── Abläufe ───────────────────────────────────────────────────────── */

@keyframes stepcards_cycle {
    0%, 32% { transform: translateY(0) scale(1); opacity: 1; z-index: 2; }
    42% { transform: translateY(30%) scale(0.97); opacity: 0; z-index: 2; }
    43% { transform: translateY(-12%) scale(0.86); opacity: 0; z-index: 1; }
    50%, 82% { transform: translateY(-12%) scale(0.86); opacity: 0.9; z-index: 1; }
    92% { transform: translateY(0) scale(1); opacity: 1; z-index: 1; }
    93%, 100% { transform: translateY(0) scale(1); opacity: 1; z-index: 2; }
}

@keyframes stepcards_veil {
    0%, 42% { opacity: 0; }
    43%, 82% { opacity: 1; }
    92%, 100% { opacity: 0; }
}

@keyframes stepcards_cursor {
    0%, 8% { transform: translate(36px, 30px); opacity: 0; }
    14% { opacity: 1; }
    22% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(0, 0) scale(0.82); }
    28% { transform: translate(0, 0) scale(1); opacity: 1; }
    32%, 100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes stepcards_press {
    0%, 24%, 28%, 100% { transform: scale(1); }
    25.5% { transform: scale(0.95); }
}

/* Karte 2 ist ab etwa 92 % vorn. Ihre Bewegungen sind von 46 bis 100 % aus und
   erscheinen genau einmal kurz nach 0 %. */
@keyframes stepcards_pick {
    0%, 4% { border-color: var(--stepcards-line); background: #fff; color: #444; }
    9%, 42% { border-color: var(--stepcards-blue); background: var(--stepcards-blue-tint); color: var(--stepcards-blue-dark); }
    46%, 100% { border-color: var(--stepcards-line); background: #fff; color: #444; }
}

@keyframes stepcards_mark_hit {
    0%, 1% { border-color: #b9b2a3; background: #fff; }
    5%, 42% { border-color: var(--stepcards-blue); background: rgba(66, 121, 188, 0.14); }
    46%, 100% { border-color: #b9b2a3; background: #fff; }
}

@keyframes stepcards_mark_hint {
    0%, 4% { border-color: #b9b2a3; background: #fff; }
    8%, 42% { border-color: hsl(35, 79%, 52%); background: hsla(35, 79%, 66%, 0.28); }
    46%, 100% { border-color: #b9b2a3; background: #fff; }
}

@keyframes stepcards_hint {
    0%, 7% { opacity: 0; transform: translateY(4px); }
    12%, 42% { opacity: 1; transform: none; }
    46%, 100% { opacity: 0; transform: translateY(4px); }
}

/* ── Schmale Spalte ────────────────────────────────────────────────── */

@container (max-width: 320px) {
    .stepcards_body { padding: 13px; }
    .stepcards_option { gap: 8px; padding: 8px 10px; }
    .stepcards_optionicon { width: 30px; height: 30px; }
    .stepcards_optiontext small { font-size: 11px; }
    .stepcards_hint { font-size: 12px; }
}

/* ── Bewegung reduzieren ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .stepcards *,
    .stepcards *::before,
    .stepcards *::after {
        animation: none !important;
    }

    .stepcards_cursor {
        display: none;
    }
}