/* ============================================================
   Drei Fragen – Motion Graphic (scroll-getriggert, ~15 s)
   Nutzt die CI aus style.css: Teal #00c2cb · Gelb #ffde59 · #2a2a2a
   ============================================================ */
.dfa {
    --dfa-bg:    #2a2a2a;
    --dfa-teal:  #00c2cb;
    --dfa-yellow:#ffde59;
    --dfa-fg:    #ffffff;
    --dfa-muted: #b3bdbe;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1000px;
    margin: 0 auto 2.5rem;
}
.dfa__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dfa-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    color: var(--dfa-fg);
}
.dfa__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Frage (Typewriter) */
.dfa__q {
    position: absolute; left: 6%; right: 6%; top: 7%; display: flex; align-items: flex-start; gap: .35em;
    font-size: clamp(1.3rem, 3.6vw, 2.4rem); opacity: 0; transition: opacity .35s ease;
}
.dfa__q.is-on { opacity: 1; }
.dfa__step {   /* Ziffer im gelben Kreis – wie im Endbild */
    /* sitzt immer mittig zur ERSTEN Zeile der Frage – egal ob ein- oder zweizeilig */
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    font-size: .5em; width: 2em; height: 2em; margin-top: .15em; border-radius: 50%;
    background: var(--dfa-yellow); color: #2a2a2a; font-weight: 800; line-height: 1;
}
.dfa__q-text {
    min-width: 0;
    font-size: 1em; font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
}
.dfa__q-text::after {
    content: ''; display: inline-block; width: .09em; height: .95em; margin-left: .08em; vertical-align: -.1em;
    background: var(--dfa-yellow); animation: dfa-blink 1s steps(1) infinite;
}
@keyframes dfa-blink { 50% { opacity: 0; } }

/* Einordnung unten */
.dfa__cap {
    position: absolute; left: 6%; right: 6%; bottom: 4.5%; margin: 0; max-width: 40em;
    font-size: clamp(.9rem, 1.7vw, 1.15rem); line-height: 1.45; color: var(--dfa-muted);
    opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
}
.dfa__cap.is-on { opacity: 1; transform: none; }
.dfa__cap strong { color: var(--dfa-yellow); font-weight: 700; }
.dfa__cap--lead {   /* Kernaussage zu Frage 1: groß, weiß, zentriert */
    max-width: none; text-align: center; text-wrap: balance;
    font-size: clamp(1.1rem, 2.5vw, 1.65rem); font-weight: 700; line-height: 1.3; color: var(--dfa-fg);
}
.dfa__src { display: block; margin-top: .4rem; font-size: .75em; opacity: .75; }
.dfa__cap--lead .dfa__src { font-size: max(.5em, 11px); font-weight: 400; color: var(--dfa-muted); }

/* Endbild */
.dfa__end {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    gap: clamp(1.25rem, 4vw, 2.5rem); padding: 6% 6% 7%; pointer-events: none;
}
.dfa__items { margin-block: auto; }
.dfa__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.25rem); }
.dfa__item {
    display: flex; flex-direction: column; gap: .9rem; min-width: 0;
    opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.dfa__item svg { width: clamp(48px, 7vw, 68px); height: auto; flex: none; }
.dfa__num {   /* Ziffer im gelben Kreis */
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: .5rem;
    width: 1.9em; height: 1.9em; border-radius: 50%;
    background: var(--dfa-yellow); color: #2a2a2a; font-size: .875rem; font-weight: 800; line-height: 1;
}
.dfa__item p { margin: 0; font-size: clamp(1.15rem, 2.7vw, 1.8rem); font-weight: 700; line-height: 1.25; color: var(--dfa-fg); text-wrap: balance; }
.dfa__tag {
    margin: 0 auto; text-align: center; text-wrap: balance;
    font-size: clamp(1.3rem, 3.4vw, 2.25rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--dfa-fg);
    opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;
}
.dfa__tag a {   /* Rahmen mit leichter Füllung – springt zu den Antworten */
    display: inline-block; padding: .45em 1.1em; border: 2px solid var(--dfa-yellow); border-radius: 12px;
    background: rgba(255,222,89,.14); color: inherit; text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.dfa__tag.is-on a { pointer-events: auto; }
.dfa__tag a:hover { background: rgba(255,222,89,.28); transform: translateY(-1px); }
.dfa__tag a:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
.dfa__tag a span { color: var(--dfa-yellow); }
/* Desktop: Icon, Ziffer und Frage mittig untereinander */
.dfa__item { align-items: center; text-align: center; }
.dfa__item.is-on, .dfa__tag.is-on { opacity: 1; transform: none; }
.dfa__replay {
    display: block; margin: .75rem 0 0 auto;
    visibility: hidden; opacity: 0; transition: opacity .4s ease, color .2s;
    font: inherit; font-size: .875rem; font-weight: 600; color: #3d3d3d;
    background: none; border: 0; padding: .375rem .25rem; cursor: pointer;
}
.dfa__replay.is-on { visibility: visible; opacity: 1; }
.dfa__replay:hover { color: #008f96; }
.dfa__replay:focus-visible { outline: 2px solid #00c2cb; outline-offset: 3px; border-radius: 4px; }

.dfa__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 641px) {
    .dfa__cap { bottom: 8%; }
}
@media (max-width: 640px) {
    .dfa__stage { aspect-ratio: 4 / 5; }
    .dfa__items { grid-template-columns: 1fr; }
    .dfa__item { flex-direction: row; align-items: center; text-align: left; }
    .dfa__item p { font-size: 1.1rem; }
    .dfa__cap--lead { font-size: 1rem; }
    .dfa__item svg { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .dfa__q-text::after { animation: none; }
    .dfa__q, .dfa__cap, .dfa__item, .dfa__tag, .dfa__replay { transition: none; }
}

/* Karten unter der Animation: gleiche gelbe Ziffern wie in der Animation */
.problem-card__num {
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: #ffde59; color: #2a2a2a; font-size: 1rem; font-weight: 800; line-height: 1;
}